feat: Radio

packages/vue/src/Checkbox/Checkbox.vue

@@ -39,15 +39,13 @@ const onInput = (e: Event) => {
 }
 </script>
 <template>
-  <label
-    :class="['relative inline-flex items-center', props.disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer']"
-  >
+  <label :class="['relative inline-flex items-center', disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer']">
     <input
       class="form-input h-4 w-4 rounded border-gray-300 text-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500"
       :style="{ boxShadow: 'none', cursor: 'inherit' }"
       type="checkbox"
-      :name="props.name"
-      :disabled="props.disabled"
+      :name="name"
+      :disabled="disabled"
       :checked="checked"
       :onInput="onInput"
     />

packages/vue/src/Radio/Radio.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { useModelValue } from '@/use/useModelValue'
+import { computed, inject } from 'vue'
+import { RadioGroupInjectKey } from './types'
+
+defineOptions({ name: 'TRadio' })
+const emit = defineEmits<{ 'update:checked': [boolean]; change: [boolean] }>()
+const slots = defineSlots<{ default?(_: {}): any }>()
+const props = defineProps({
+  value: { type: null, required: true },
+  name: String,
+  disabled: Boolean,
+  checked: { type: Boolean, default: undefined },
+})
+
+const group = inject(RadioGroupInjectKey, null)
+console.log(parent)
+
+const [innerChecked, setInnerChecked] = useModelValue(props, {
+  defaultValue: group ? group.value.value === props.value : false,
+  valuePropName: 'checked',
+  onChange: (val: boolean) => {
+    emit('change', val)
+    group?.select(props.value)
+  },
+})
+const checked = computed(() => (group ? group.value.value === props.value : innerChecked.value))
+
+const onInput = (e: Event) => {
+  const el = e.currentTarget as HTMLInputElement
+  console.log(el.checked)
+  setInnerChecked(el.checked)
+}
+</script>
+<template>
+  <label :class="['relative inline-flex items-center', disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer']">
+    <input
+      class="form-input h-4 w-4 rounded-full border-gray-300 text-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500"
+      :style="{ boxShadow: 'none', cursor: 'inherit' }"
+      type="radio"
+      :name="name"
+      :disabled="disabled"
+      :checked="checked"
+      :onInput="onInput"
+    />
+    <template v-if="slots.default">
+      <span class="relative ml-2 text-sm font-medium">
+        <slot />
+      </span>
+    </template>
+  </label>
+</template>

packages/vue/src/Radio/RadioGroup.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { provide } from 'vue'
+import { RadioGroupInjectKey } from './types'
+import { useModelValue } from '@/use/useModelValue'
+
+defineOptions({ name: 'RadioGroup' })
+const emit = defineEmits<{ 'update:value': [unknown]; change: [unknown] }>()
+
+const props = defineProps({ name: String, value: null, disabled: Boolean })
+
+const [modelValue, setModelValue] = useModelValue<unknown>(props, {
+  onChange: val => {
+    emit('change', val)
+  },
+})
+provide(RadioGroupInjectKey, {
+  value: modelValue,
+  select: (val: unknown) => {
+    setModelValue(val)
+  },
+})
+</script>
+<template>
+  <slot />
+</template>

packages/vue/src/Radio/index.ts

@@ -0,0 +1,2 @@
+export { default as Radio } from './Radio.vue'
+export { default as RadioGroup } from './RadioGroup.vue'

packages/vue/src/Radio/types.ts

@@ -0,0 +1,6 @@
+import type { InjectionKey, ComputedRef } from 'vue'
+
+export const RadioGroupInjectKey: InjectionKey<{
+  value: ComputedRef<unknown>
+  select: (val: unknown) => void
+}> = Symbol('CheckboxGroupInjectKey')

packages/vue/src/index.ts

@@ -1,6 +1,6 @@
 export { default as Button } from './Button/index.vue'
 export { Checkbox, CheckboxGroup } from './Checkbox'
-export { Radio, type RadioProps, RadioGroup, type RadioGroupProps } from './Radio'
+export { Radio, RadioGroup } from './Radio'
 export { Anchor, type AnchorProps, type IAnchorItem } from './Anchor'
 export { default as Input } from './Input/index.vue'
 export { default as Select } from './Select/index.vue'