feat: 新增Radio组件

Author: Yan Heng

main/src/components/Radio.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts" generic="T">
+import { RadioCtxKey } from '@/constants/injection-keys';
+import { injectStrict } from '@/utils/vue';
+
+defineProps<{
+  value: T;
+}>();
+
+const { modelValue } = injectStrict(RadioCtxKey);
+</script>
+
+<template>
+  <label class="radio">
+    <input v-model="modelValue" type="radio" :value="value" />
+    <div>
+      <slot></slot>
+    </div>
+  </label>
+</template>
+
+<style scoped lang="scss">
+.radio {
+  border-radius: 0.5rem;
+  display: inline-flex;
+  align-items: center;
+  position: relative;
+  cursor: pointer;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+
+  & > input {
+    position: absolute;
+    opacity: 0;
+  }
+
+  & > input:checked + div {
+    background: #e3e2fe;
+  }
+
+  div {
+    width: 2.25rem;
+    height: 2.25rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 0.5rem;
+  }
+}
+</style>

main/src/components/RadioGroup.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts" generic="T">
-import { computed } from 'vue';
+import { computed, provide } from 'vue';
+
+import { RadioCtxKey } from '@/constants/injection-keys';
 
 export type RadioGroupOption<T> = {
   value: T;
@@ -8,10 +10,10 @@ export type RadioGroupOption<T> = {
 
 const props = defineProps<{
   modelValue: T;
-  options: RadioGroupOption<T>[];
 }>();
 
 const emits = defineEmits<{
+  (event: 'change', value: T): void;
   (event: 'update:modelValue', value: T): void;
 }>();
 
@@ -20,19 +22,19 @@ const selectedValue = computed<T>({
     return props.modelValue;
   },
   set(value: T) {
+    emits('change', value);
     emits('update:modelValue', value);
   },
 });
+
+provide(RadioCtxKey, {
+  modelValue: selectedValue,
+});
 </script>
 
 <template>
   <div class="radio-group">
-    <label v-for="(item, index) in options" :key="index" class="radio">
-      <input v-model="selectedValue" type="radio" :value="item.value" />
-      <div>
-        <slot :item="item"></slot>
-      </div>
-    </label>
+    <slot></slot>
   </div>
 </template>
 
@@ -44,35 +46,5 @@ const selectedValue = computed<T>({
   grid-auto-flow: column;
   gap: calc(0.25rem * 1);
   justify-items: center;
-
-  & > .radio {
-    & > input {
-      position: absolute;
-      opacity: 0;
-    }
-
-    & > input:checked + div {
-      background: #e3e2fe;
-    }
-  }
-}
-
-.radio {
-  border-radius: 0.5rem;
-  display: inline-flex;
-  align-items: center;
-  position: relative;
-  cursor: pointer;
-  user-select: none;
-  -webkit-tap-highlight-color: transparent;
-
-  div {
-    width: 2.25rem;
-    height: 2.25rem;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    border-radius: 0.5rem;
-  }
 }
 </style>

main/src/constants/injection-keys.ts

@@ -0,0 +1,5 @@
+import { InjectionKey } from 'vue';
+
+import { RadioCtx } from '@/types';
+
+export const RadioCtxKey: InjectionKey<RadioCtx<unknown>> = Symbol('RadioCtx');

main/src/types.ts

@@ -0,0 +1,3 @@
+export interface RadioCtx<T> {
+  modelValue: T;
+}

main/src/utils/vue.ts

@@ -0,0 +1,9 @@
+import { inject, InjectionKey } from 'vue';
+
+export const injectStrict = <T>(key: InjectionKey<T>, fallback?: T) => {
+  const resolved = inject(key, fallback);
+  if (!resolved) {
+    throw new Error(`Could not resolve ${key.description}`);
+  }
+  return resolved;
+};