initial

layers/ui/composables/use-radio.ts

@@ -0,0 +1,40 @@
+import { useField } from 'vee-validate'
+import { computed, ref, toRef } from 'vue'
+import type { ComponentInternalInstance } from 'vue'
+
+interface Props {
+  id: string
+  value: string | number
+  label?: string
+  disabled?: boolean
+  modelValue?: string | number
+  required?: boolean
+}
+
+export default (props: Props, slots: ComponentInternalInstance['slots']) => {
+  const { checked, handleChange } = useField(
+    toRef(props, 'id'),
+    computed(() => ({
+      required: props.required,
+    })),
+    {
+      type: 'radio',
+      initialValue: props.modelValue,
+      checkedValue: props.value,
+      syncVModel: true,
+    },
+  )
+
+  const focused = ref(false)
+
+  const active = computed(() => !props.disabled)
+  const hasLabel = computed(() => !!props.label || slots.default)
+
+  return {
+    focused,
+    active,
+    checked,
+    hasLabel,
+    handleChange,
+  }
+}