feat: add Radio components for demo

Author: MichaelGitArt

src/components/UI/Radio/Radio.vue

@@ -0,0 +1,72 @@
+<template>
+  <div>
+    <label>
+      <input
+        type="radio"
+        :name="computedName"
+        :checked="selected"
+        @change="onChange"
+      >
+      {{ label }}
+    </label>
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, inject } from 'vue'
+
+import { useComponentId } from '@/composables/componentId'
+
+import { RadioInjectionKey } from '@/components/UI/symbols'
+
+export default {
+  name: 'Radio',
+  props: {
+    value: {
+      type: [String, Boolean],
+      default: true,
+    },
+
+    label: {
+      type: String,
+      default: '',
+    },
+
+    /**
+     * Sets component's name attribute
+     */
+    name: {
+      type: String,
+      default: '',
+    },
+  },
+
+  emits: ['change'],
+
+  setup(props, { emit }) {
+    const RadioGroup = inject(RadioInjectionKey)
+
+    const id = useComponentId()
+    const computedName = computed(() => {
+      if(props.name && !RadioGroup) {
+        return props.name
+      }
+
+      return RadioGroup?.name || `radio-${id}`
+    })
+
+    const onChange = () => {
+      emit('change')
+      RadioGroup?.onChange(props.value)
+    }
+
+    const selected = computed(() => RadioGroup?.modelValue.value === props.value)
+
+    return {
+      computedName,
+      onChange,
+      selected,
+    }
+  },
+}
+</script>

src/components/UI/RadioGroup/RadioGroup.vue

@@ -0,0 +1,48 @@
+<template>
+  <div>
+    <slot />
+  </div>
+</template>
+
+<script lang="ts">
+import { provide, computed } from 'vue'
+
+import { useComponentId } from '@/composables/componentId'
+
+import { RadioInjectionKey } from '@/components/UI/symbols'
+
+export default {
+  name: 'RadioGroup',
+  props: {
+    name: {
+      type: String,
+      default: '',
+    },
+
+    modelValue: {
+      type: [Boolean, String],
+      default: '',
+    },
+  },
+
+  emits: {
+    'update:modelValue': (value: string | boolean) => true,
+  },
+
+  setup(props, { emit }) {
+    const id = useComponentId()
+    const computedName = computed(() => props.name || `radio-group-${id}`)
+
+    const computedModelValue = computed(() => props.modelValue)
+
+    provide(RadioInjectionKey, {
+      name: computedName,
+      modelValue: computedModelValue,
+      onChange(value) {
+        emit('update:modelValue', value)
+      },
+    })
+
+  },
+}
+</script>

src/components/UI/symbols.ts

@@ -0,0 +1,4 @@
+import { InjectionKey } from 'vue'
+import { RadioInjection } from '@/components/UI/types'
+
+export const RadioInjectionKey: InjectionKey<RadioInjection> = Symbol('GroupRadio')

src/components/UI/types.ts

@@ -0,0 +1,7 @@
+import { Ref } from 'vue'
+
+export interface RadioInjection {
+  name: Ref<string>
+  modelValue: Ref<string | boolean>
+  onChange: (value: boolean | string) => void
+}