feat(component): New radio component (#161)

* radio initial

* initial radio

* Update src/components/Radio/Radio.vue

* Update src/components/Radio/Radio.vue

* Update docs/components/radio/examples/ListRadio.vue

* Update docs/components/radio/examples/LinkRadio.vue

* Update docs/components/radio/examples/InlineRadio.vue

* Update docs/components/radio/examples/HorizontalListRadio.vue

* Update docs/components/radio/examples/DisabledRadio.vue

* Update docs/components/radio/examples/DefaultRadio.vue

* Update docs/components/radio/examples/BorderedRadio.vue

* Update src/components/Radio/Radio.vue

---------

Co-authored-by: Ilya Artamonov <ilya.sosidka@gmail.com>

docs/.vitepress/config.ts

@@ -69,6 +69,7 @@ function getFormComponents() {
     { text: 'Select', link: 'components/select' },
     { text: 'Toggle', link: 'components/toggle' },
     { text: 'Range', link: 'components/range' },
+    { text: 'Radio', link: 'components/radio' },
   ]
 }
 

docs/components/radio.md

@@ -0,0 +1,132 @@
+<script setup>
+import DefaultRadio from './radio/examples/DefaultRadio.vue'
+import DisabledRadio from './radio/examples/DisabledRadio.vue'
+import ListRadio from './radio/examples/ListRadio.vue'
+import HorizontalListRadio from './radio/examples/HorizontalListRadio.vue'
+import InlineRadio from './radio/examples/InlineRadio.vue'
+import LinkRadio from './radio/examples/LinkRadio.vue'
+import BorderedRadio from './radio/examples/BorderedRadio.vue'
+</script>
+
+# Vue Toggle Radio - Flowbite
+
+#### Get started with the radio component to let the user choose a single option from multiple options in the form of a circle based on multiple styles and colors
+
+---
+
+:::tip
+Original reference: [https://flowbite.com/docs/forms/range/](https://flowbite.com/docs/forms/radio/)
+:::
+
+## Radio examples
+
+```vue
+<template>
+  <div>
+    <Radio name="default radio" v-model="picked" value="one" label="Default radio" />
+    <Radio name="default radio" v-model="picked" value="two" label="Checked state" />
+  </div>
+</template>
+
+<script setup>
+import Radio from 'flowbite-vue'
+import { ref } from 'vue'
+
+const picked = ref('one')
+</script>
+```
+
+<DefaultRadio />
+
+## Disabled Radio
+
+```vue
+<template>
+  <div>
+    <Radio name="disabled-radio" v-model="picked" value="one" label="Disabled radio" :disabled="true" />
+    <Radio name="disabled-radio" v-model="picked" value="two" label="Disabled checked" :disabled="true" />
+  </div>
+</template>
+```
+
+<DisabledRadio />
+
+## Radio list group
+
+```vue
+<template>
+  <div>
+    <p class="mb-4 font-semibold text-gray-900 dark:text-white">Technology <span class="capitalize">{{ picked }}</span></p>
+    <ul class="w-48 !p-0 text-sm text-gray-900 bg-white border border-gray-200 rounded-lg dark:bg-gray-700 dark:border-gray-600 dark:text-white">
+      <li class="w-full !m-0 pl-3 flex border-b border-gray-200 rounded-t-lg dark:border-gray-600"><Radio name="list-radio" v-model="picked" value="svelte" label="Svelte" /></li>
+      <li class="w-full !m-0 pl-3 flex border-b border-gray-200 rounded-t-lg dark:border-gray-600"><Radio name="list-radio" v-model="picked" value="vue" label="Vue JS" /></li>
+      <li class="w-full !m-0 pl-3 flex border-b border-gray-200 rounded-t-lg dark:border-gray-600"><Radio name="list-radio" v-model="picked" value="react" label="React" /></li>
+      <li class="w-full !m-0 pl-3 flex border-gray-200 rounded-t-lg dark:border-gray-600"><Radio name="list-radio" v-model="picked" value="angular" label="Angular" /></li>
+    </ul>
+  </div>
+</template>
+```
+
+<ListRadio />
+
+## Horizontal list group
+
+```vue
+<template>
+  <div>
+    <p class="mb-4 font-semibold text-gray-900 dark:text-white">Technology <span class="capitalize">{{ picked1 }}</span></p>
+    <ul class="items-center w-full text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg sm:flex dark:bg-gray-700 dark:border-gray-600 dark:text-white">
+      <li class="w-full !m-0 pl-3 flex border-gray-200 rounded-t-lg dark:border-gray-600"><Radio name="hor-radio" v-model="picked1" value="svelte" label="Svelte" /></li>
+      <li class="w-full !m-0 pl-3 flex border-gray-200 rounded-t-lg dark:border-gray-600"><Radio name="hor-radio" v-model="picked1" value="vue" label="Vue JS" /></li>
+      <li class="w-full !m-0 pl-3 flex border-gray-200 rounded-t-lg dark:border-gray-600"><Radio name="hor-radio" v-model="picked1" value="react" label="React" /></li>
+      <li class="w-full !m-0 pl-3 flex border-gray-200 rounded-t-lg dark:border-gray-600"><Radio name="hor-radio" v-model="picked1" value="angular" label="Angular" /></li>
+    </ul>
+  </div>
+</template>
+```
+
+<HorizontalListRadio />
+
+## Inline Radio
+
+```vue
+<template>
+  <div class="flex w-96">
+    <Radio v-model="picked" value="first" label="Inline 1" />
+    <Radio v-model="picked" value="sec" label="Inline 2" />
+    <Radio v-model="picked" value="third" label="Inline 3" />
+    <Radio v-model="picked" value="fourth" label="Inline 4" />
+  </div>
+</template>
+```
+
+<InlineRadio />
+
+## Radio with a link
+
+```vue
+<template>
+  <Radio v-model="picked" value="first" name="with-link">
+    I agree with the <a href="/" class="text-primary-600 dark:text-primary-500 hover:underline ml-1">terms and conditions</a>.
+  </Radio>
+</template>
+```
+
+<LinkRadio />
+
+## Bordered Radio
+
+```vue
+<template>
+  <div class="grid grid-cols-2 gap-6">
+    <div class="flex items-center p-2 border border-gray-200 rounded dark:border-gray-700">
+      <Radio v-model="picked" value="fs" label="Radio 1" />
+    </div>
+    <div class="flex items-center p-2 border border-gray-200 rounded dark:border-gray-700">
+      <Radio v-model="picked" value="sec" label="Radio 2" />
+    </div>
+  </div>
+</template>
+```
+
+<BorderedRadio />

docs/components/radio/examples/BorderedRadio.vue

@@ -0,0 +1,17 @@
+<template>
+  <div class="grid grid-cols-2 gap-6">
+    <div class="flex items-center p-2 border border-gray-200 rounded dark:border-gray-700">
+      <Radio v-model="picked" value="fs" label="Radio 1" />
+    </div>
+    <div class="flex items-center p-2 border border-gray-200 rounded dark:border-gray-700">
+      <Radio v-model="picked" value="sec" label="Radio 2" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import Radio from '../../../../src/components/Radio/Radio.vue'
+import { ref } from 'vue'
+
+const picked = ref('fs')
+</script>

docs/components/radio/examples/DefaultRadio.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>
+    <Radio name="default radio" v-model="picked" value="one" label="Default radio" />
+    <Radio name="default radio" v-model="picked" value="two" label="Checked state" />
+  </div>
+</template>
+
+<script setup>
+import Radio from '../../../../src/components/Radio/Radio.vue'
+import { ref } from 'vue'
+
+const picked = ref('one')
+</script>

docs/components/radio/examples/DisabledRadio.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>
+    <Radio name="disabled-radio" v-model="picked" value="one" label="Disabled radio" :disabled="true" />
+    <Radio name="disabled-radio" v-model="picked" value="two" label="Disabled checked" :disabled="true" />
+  </div>
+</template>
+
+<script setup>
+import Radio from '../../../../src/components/Radio/Radio.vue'
+import { ref } from 'vue'
+
+const picked = ref('one')
+</script>

docs/components/radio/examples/HorizontalListRadio.vue

@@ -0,0 +1,28 @@
+<template>
+  <div>
+    <p class="mb-4 font-semibold text-gray-900 dark:text-white">Technology <span class="capitalize">{{ picked1 }}</span>
+    </p>
+    <ul
+      class="items-center w-full text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg sm:flex dark:bg-gray-700 dark:border-gray-600 dark:text-white">
+      <li class="w-full !m-0 pl-3 flex border-gray-200 rounded-t-lg dark:border-gray-600">
+        <Radio name="hor-radio" v-model="picked1" value="svelte" label="Svelte" />
+      </li>
+      <li class="w-full !m-0 pl-3 flex border-gray-200 rounded-t-lg dark:border-gray-600">
+        <Radio name="hor-radio" v-model="picked1" value="vue" label="Vue JS" />
+      </li>
+      <li class="w-full !m-0 pl-3 flex border-gray-200 rounded-t-lg dark:border-gray-600">
+        <Radio name="hor-radio" v-model="picked1" value="react" label="React" />
+      </li>
+      <li class="w-full !m-0 pl-3 flex border-gray-200 rounded-t-lg dark:border-gray-600">
+        <Radio name="hor-radio" v-model="picked1" value="angular" label="Angular" />
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script setup>
+import Radio from '../../../../src/components/Radio/Radio.vue'
+import { ref } from 'vue'
+
+const picked1 = ref('svelte')
+</script>

docs/components/radio/examples/InlineRadio.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="flex w-96">
+    <Radio v-model="picked" value="first" label="Inline 1" />
+    <Radio v-model="picked" value="sec" label="Inline 2" />
+    <Radio v-model="picked" value="third" label="Inline 3" />
+    <Radio v-model="picked" value="fourth" label="Inline 4" />
+  </div>
+</template>
+
+<script setup>
+import Radio from '../../../../src/components/Radio/Radio.vue'
+import { ref } from 'vue'
+
+const picked = ref('first')
+</script>

docs/components/radio/examples/LinkRadio.vue

@@ -0,0 +1,12 @@
+<template>
+  <Radio v-model="picked" value="first" name="with-link">
+    I agree with the <a href="/" class="text-primary-600 dark:text-primary-500 hover:underline ml-1">terms and conditions</a>.
+  </Radio>
+</template>
+
+<script setup>
+import Radio from '../../../../src/components/Radio/Radio.vue'
+import { ref } from 'vue'
+
+const picked = ref('first')
+</script>

docs/components/radio/examples/ListRadio.vue

@@ -0,0 +1,28 @@
+<template>
+  <div>
+    <p class="mb-4 font-semibold text-gray-900 dark:text-white">Technology <span class="capitalize">{{ picked }}</span>
+    </p>
+    <ul
+      class="w-48 !p-0 text-sm text-gray-900 bg-white border border-gray-200 rounded-lg dark:bg-gray-700 dark:border-gray-600 dark:text-white">
+      <li class="w-full !m-0 pl-3 flex border-b border-gray-200 rounded-t-lg dark:border-gray-600">
+        <Radio name="list-radio" v-model="picked" value="svelte" label="Svelte" />
+      </li>
+      <li class="w-full !m-0 pl-3 flex border-b border-gray-200 rounded-t-lg dark:border-gray-600">
+        <Radio name="list-radio" v-model="picked" value="vue" label="Vue JS" />
+      </li>
+      <li class="w-full !m-0 pl-3 flex border-b border-gray-200 rounded-t-lg dark:border-gray-600">
+        <Radio name="list-radio" v-model="picked" value="react" label="React" />
+      </li>
+      <li class="w-full !m-0 pl-3 flex border-gray-200 rounded-t-lg dark:border-gray-600">
+        <Radio name="list-radio" v-model="picked" value="angular" label="Angular" />
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script setup>
+import Radio from '../../../../src/components/Radio/Radio.vue'
+import { ref } from 'vue'
+
+const picked = ref('svelte')
+</script>

src/components/Radio/Radio.vue

@@ -0,0 +1,40 @@
+<template>
+  <label class="flex w-[100%] items-center">
+    <input type="radio" v-model="model" :disabled="disabled" :name="name" :value="value"
+      :class="radioClasses">
+    <span :class="labelClasses">{{ label }}</span>
+    <slot />
+  </label>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useRadioClasses } from './composables/useRadioClasses'
+
+interface RadioProps {
+  modelValue?: string;
+  name?: string;
+  value?: string;
+  label?: string;
+  disabled?: boolean;
+}
+
+const props = withDefaults(defineProps<RadioProps>(), {
+  value: '',
+  name: '',
+  label: '',
+  disabled: false,
+})
+
+const emit = defineEmits(['update:modelValue'])
+const model = computed({
+  get() {
+    return props.modelValue
+  },
+  set(val) {
+    emit('update:modelValue', val)
+  },
+})
+
+const { radioClasses, labelClasses } = useRadioClasses()
+</script>

src/components/Radio/composables/useRadioClasses.ts

@@ -0,0 +1,20 @@
+import { computed } from 'vue'
+
+// Radio
+export const radioDefaultClasses = 'w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600'
+export const radioLabelClasses = 'm-2 mr-0 text-sm font-medium text-gray-900 dark:text-gray-300'
+
+export function useRadioClasses() {
+  const radioClasses = computed(() => {
+    return radioDefaultClasses
+  })
+
+  const labelClasses = computed(() => {
+    return radioLabelClasses
+  })
+
+  return {
+    radioClasses,
+    labelClasses,
+  }
+}

src/index.ts

@@ -60,4 +60,6 @@ export { default as Toggle } from './components/Toggle/Toggle.vue'
 
 export { default as Range } from './components/Range/Range.vue'
 
+export { default as Radio } from './components/Radio/Radio.vue'
+
 export * from './composables'