feat(component): add radio component and radio group component (#150)

* feat(component): radio and radio group

* chore: add example for radio and radio group

* docs: add radio and radio group doc

* fix: hack style failure

* feat(preset): add 'o-after:aftc-DEFAULT' to set `::after{ content: '' }`

* refactor(radio): update css of radio

* fix(link): delete invalid class in link

docs/.vitepress/config.ts

@@ -51,6 +51,10 @@ const components = [
         text: 'Rate',
         link: '/components/rate',
       },
+      {
+        text: 'Radio',
+        link: '/components/radio',
+      },
     ],
   },
   {

docs/components/radio.md

@@ -0,0 +1,113 @@
+---
+title: Radio
+lang: en-US
+---
+
+# Radio <new-badge/>
+
+Single selection among multiple options.
+
+## Basic usage
+
+Radio should not have too many options. Otherwise, use the Select component instead.
+
+Creating a radio component is easy, you just need to bind a variable to Radio's `v-model`. It equals to the value of `label` of the chosen radio. The type of label is `String`, `Number` or `Boolean`.
+
+<demo src="../example/radio/basic.vue"></demo>
+
+## Disabled
+
+`disabled` attribute is used to disable the radio.
+
+You just need to add the `disabled` attribute.
+
+<demo src="../example/radio/disabled.vue"></demo>
+
+## Radio button group
+
+Suitable for choosing from some mutually exclusive options.
+
+Combine `o-radio-group` with `o-radio` to display a radio group. Bind a variable with `v-model` of `o-radio-group` element and set label value in `o-radio`. It also provides `change` event with the current value as its parameter.
+
+<demo src="../example/radio/group.vue"></demo>
+
+## With borders
+
+The `border` attribute adds a border to Radios.
+
+<demo src="../example/radio/border.vue"></demo>
+
+## Sizes
+
+Besides default size, Radio component provides three additional sizes for you to choose among different scenarios.
+
+Use attribute size to set additional sizes with `xs`, `sm`, `md`, `lg`.
+
+<demo src="../example/radio/size.vue"></demo>
+
+## Colors
+
+You can change the checked color with `fill` prop.
+
+<demo src="../example/radio/color.vue"></demo>
+
+## Text Colors
+
+You can also individually set the color of the text with `text-color` prop when the radio button is selected.
+
+<demo src="../example/radio/text-color.vue"></demo>
+
+## Label Colors
+
+You can set the color of the label text with `label-color` prop.
+
+If you do not want label's color to change when selected, you can use `not-text-color` prop.
+
+<demo src="../example/radio/label-color.vue"></demo>
+
+## Radio API
+
+### Radio Props
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| model-value / v-model | `string \| number \| boolean` | `undefined` | Binding value. |
+| label | `string` | `undefined` | The value of Radio. |
+| disabled | `boolean` | `false` |  Whether Radio is disabled.  |
+| size | `boolean` | `true` | Whether the component has underline.  |
+| fill | `'primary' \| 'secondary' \| 'success' \| 'warning' \| 'error' \| 'info'` | `'primary'` | Change radio fill color. |
+| text-color | `'primary' \| 'secondary' \| 'success' \| 'warning' \| 'error' \| 'info'` | `undefined` | Change the label color when radio is checked. |
+| label-color | `'primary' \| 'secondary' \| 'success' \| 'warning' \| 'error' \| 'info'` | `undefined` | Change radio label color. |
+| not-text-color | `boolean` | `false` | Disable text discoloration when radio is activated. |
+| border | `boolean` | `false` | Whether to add a border around Radio. |
+| name | `string` | `undefined` | Native `name` attribute. |
+
+### Radio Methods
+| Name | Parameters | Description | 
+| --- | --- | --- |
+| change | `(value: string \| number \| boolean) => void` | Triggers when the bound value changes. |
+
+### Radio Slots
+| Name | Parameters | Description | 
+| --- | --- | --- |
+| default | `()` | Customize default content. |
+
+## RadioGroup API
+
+### RadioGroup Props
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| model-value / v-model | `string \| number \| boolean` | `undefined` | Binding value. |
+| size | `'xs' \| 'sm' \| 'md' \| 'lg'` | `md` | The size of radio buttons or bordered radios.  |
+| disabled | `boolean` | `false` |  Whether the nesting radios are disabled.  |
+| name | `string` | `undefined` | Native `name` attribute. |
+| id | `string` | `undefined` | Native `id` attribute. |
+
+### RadioGroup Methods
+| Name | Parameters | Description | 
+| --- | --- | --- |
+| change | `(value: string \| number \| boolean) => void` | Triggers when the bound value changes. |
+
+### RadioGroup Slots
+| Name | Parameters | Description |
+| --- | --- | --- |
+| default | `Radio` | Customize default content. |

docs/example/radio/basic.vue

@@ -0,0 +1,22 @@
+<script setup lang='ts'>
+const radio = ref('1')
+</script>
+
+<template>
+  <div fscw gap-2>
+    <o-radio-group v-model="radio">
+      <o-radio label="1">
+        Option 1
+      </o-radio>
+      <o-radio label="2" disabled>
+        Option 2
+      </o-radio>
+      <o-radio label="3">
+        Option 3
+      </o-radio>
+    </o-radio-group>
+  </div>
+</template>
+
+<style scope>
+</style>

docs/example/radio/border.vue

@@ -0,0 +1,22 @@
+<script setup lang='ts'>
+const radio = ref('1')
+</script>
+
+<template>
+  <div fscw gap-2>
+    <o-radio-group v-model="radio">
+      <o-radio label="1" border>
+        Option A
+      </o-radio>
+      <o-radio label="2" border>
+        Option B
+      </o-radio>
+      <o-radio label="3" border disabled>
+        Option C
+      </o-radio>
+    </o-radio-group>
+  </div>
+</template>
+
+<style scope>
+</style>

docs/example/radio/color.vue

@@ -0,0 +1,31 @@
+<script setup lang='ts'>
+const radio = ref('1')
+</script>
+
+<template>
+  <div fscw gap-2>
+    <o-radio-group v-model="radio">
+      <o-radio label="1" fill="primary">
+        primary
+      </o-radio>
+      <o-radio label="2" fill="secondary">
+        secondary
+      </o-radio>
+      <o-radio label="3" fill="success">
+        success
+      </o-radio>
+      <o-radio label="4" fill="warning">
+        warning
+      </o-radio>
+      <o-radio label="5" fill="error">
+        error
+      </o-radio>
+      <o-radio label="6" fill="info">
+        info
+      </o-radio>
+    </o-radio-group>
+  </div>
+</template>
+
+<style scope>
+</style>

docs/example/radio/disabled.vue

@@ -0,0 +1,17 @@
+<script setup lang='ts'>
+const radio = ref('selected and disabled')
+</script>
+
+<template>
+  <div fscw gap-2>
+    <o-radio v-model="radio" label="disabled" disabled>
+      Option A
+    </o-radio>
+    <o-radio v-model="radio" label="selected and disabled" disabled>
+      disabled B
+    </o-radio>
+  </div>
+</template>
+
+<style scope>
+</style>

docs/example/radio/group.vue

@@ -0,0 +1,22 @@
+<script setup lang='ts'>
+const radio = ref(3)
+</script>
+
+<template>
+  <div fscw gap-2>
+    <o-radio-group v-model="radio">
+      <o-radio :label="3">
+        Option A
+      </o-radio>
+      <o-radio :label="6" disabled>
+        Option B
+      </o-radio>
+      <o-radio :label="9">
+        Option C
+      </o-radio>
+    </o-radio-group>
+  </div>
+</template>
+
+<style scope>
+</style>

docs/example/radio/label-color.vue

@@ -0,0 +1,34 @@
+<script setup lang='ts'>
+const radio = ref('1')
+</script>
+
+<template>
+  <div fscw gap-2>
+    <o-radio-group v-model="radio">
+      <o-radio label="0" label-color="warning">
+        Option
+      </o-radio>
+      <o-radio label="1" label-color="primary" not-text-color>
+        primary
+      </o-radio>
+      <o-radio label="2" label-color="secondary" not-text-color>
+        secondary
+      </o-radio>
+      <o-radio label="3" label-color="success" not-text-color>
+        success
+      </o-radio>
+      <o-radio label="4" label-color="warning" not-text-color>
+        warning
+      </o-radio>
+      <o-radio label="5" label-color="error" not-text-color>
+        error
+      </o-radio>
+      <o-radio label="6" label-color="info" not-text-color>
+        info
+      </o-radio>
+    </o-radio-group>
+  </div>
+</template>
+
+<style scope>
+</style>

docs/example/radio/size.vue

@@ -0,0 +1,25 @@
+<script setup lang='ts'>
+const radio = ref('1')
+</script>
+
+<template>
+  <div fscw gap-2>
+    <o-radio-group v-model="radio">
+      <o-radio label="1" size="xs">
+        Mini
+      </o-radio>
+      <o-radio label="2" size="sm">
+        Small
+      </o-radio>
+      <o-radio label="3" size="md">
+        Medium
+      </o-radio>
+      <o-radio label="4" size="lg">
+        Large
+      </o-radio>
+    </o-radio-group>
+  </div>
+</template>
+
+<style scope>
+</style>

docs/example/radio/text-color.vue

@@ -0,0 +1,31 @@
+<script setup lang='ts'>
+const radio = ref('1')
+</script>
+
+<template>
+  <div fscw gap-2>
+    <o-radio-group v-model="radio">
+      <o-radio label="1" text-color="primary">
+        primary
+      </o-radio>
+      <o-radio label="2" text-color="secondary">
+        secondary
+      </o-radio>
+      <o-radio label="3" text-color="success">
+        success
+      </o-radio>
+      <o-radio label="4" text-color="warning">
+        warning
+      </o-radio>
+      <o-radio label="5" text-color="error">
+        error
+      </o-radio>
+      <o-radio label="6" text-color="info">
+        info
+      </o-radio>
+    </o-radio-group>
+  </div>
+</template>
+
+<style scope>
+</style>