From c3ee509c658193805e5f0122315877c0b331e935 Mon Sep 17 00:00:00 2001 From: Benjamin Canac Date: Wed, 31 Jul 2024 14:16:23 +0200 Subject: [PATCH] docs(radio-group): update --- docs/content/3.components/accordion.md | 2 - docs/content/3.components/breadcrumb.md | 2 - docs/content/3.components/button-group.md | 2 +- docs/content/3.components/checkbox.md | 35 ++--- docs/content/3.components/radio-group.md | 180 +++++++++++++++++++++- docs/content/3.components/slider.md | 2 +- docs/content/3.components/switch.md | 32 ++-- docs/content/3.components/tabs.md | 4 +- docs/nuxt.config.ts | 1 + 9 files changed, 207 insertions(+), 53 deletions(-) diff --git a/docs/content/3.components/accordion.md b/docs/content/3.components/accordion.md index dbb6e3a6..79d34380 100644 --- a/docs/content/3.components/accordion.md +++ b/docs/content/3.components/accordion.md @@ -11,8 +11,6 @@ links: ## Usage -### Items - Use the `items` prop as an array of objects with the following properties: - `label?: string`{lang="ts-type"} diff --git a/docs/content/3.components/breadcrumb.md b/docs/content/3.components/breadcrumb.md index a2dd2d22..6f51969e 100644 --- a/docs/content/3.components/breadcrumb.md +++ b/docs/content/3.components/breadcrumb.md @@ -8,8 +8,6 @@ links: ## Usage -### Items - Use the `items` prop as an array of objects with the following properties: - `label?: string`{lang="ts-type"} diff --git a/docs/content/3.components/button-group.md b/docs/content/3.components/button-group.md index f1250479..20b597b5 100644 --- a/docs/content/3.components/button-group.md +++ b/docs/content/3.components/button-group.md @@ -45,7 +45,7 @@ slots: ### Orientation -Use the `orientation` prop to change the orientation of the buttons. +Use the `orientation` prop to change the orientation of the buttons. Defaults to `horizontal`. ::component-code --- diff --git a/docs/content/3.components/checkbox.md b/docs/content/3.components/checkbox.md index 7555e8fb..225be7f9 100644 --- a/docs/content/3.components/checkbox.md +++ b/docs/content/3.components/checkbox.md @@ -17,11 +17,8 @@ Use the `v-model` directive to control the checked state of the Checkbox. --- external: - modelValue -ignore: - - label props: modelValue: true - label: Check me --- :: @@ -29,11 +26,8 @@ Use the `default-value` prop to set the initial value when you do not need to co ::component-code --- -ignore: - - label props: defaultValue: true - label: Check me --- :: @@ -45,12 +39,9 @@ Use the `indeterminate-icon` prop to customize this icon. Defaults to `i-heroico ::component-code --- -ignore: - - label props: indeterminate: true indeterminateIcon: '' - label: Check me --- :: @@ -69,6 +60,18 @@ props: --- :: +When using the `required` prop, an asterisk will be added next to the label. + +::component-code +--- +ignore: + - label +props: + required: true + label: Check me +--- +:: + ### Description Use the `description` prop to set the description of the Checkbox. @@ -135,20 +138,6 @@ props: --- :: -### Required - -Use the `required` prop to make the Checkbox required. This will add an asterisk to the label. - -::component-code ---- -ignore: - - label -props: - required: true - label: Check me ---- -:: - ### Disabled Use the `disabled` prop to disable the Checkbox. diff --git a/docs/content/3.components/radio-group.md b/docs/content/3.components/radio-group.md index 2e94d88a..55d34f80 100644 --- a/docs/content/3.components/radio-group.md +++ b/docs/content/3.components/radio-group.md @@ -12,7 +12,185 @@ links: ## Usage -## Examples +Use the `items` prop as an array of objects with the following properties: + +- `label?: string`{lang="ts-type"} +- `description?: string`{lang="ts-type"} +- `value?: string`{lang="ts-type"} +- `disabled?: boolean`{lang="ts-type"} + +Use the `v-model` directive to control the value of the RadioGroup. + +::component-code +--- +external: + - modelValue + - items +props: + modelValue: '1' + items: + - label: 'Option 1' + description: 'This is the first option.' + value: '1' + - label: 'Option 2' + description: 'This is the second option.' + value: '2' + - label: 'Option 3' + description: 'This is the third option.' + value: '3' +--- +:: + +Use the `default-value` prop to set the initial value when you do not need to control its state. + +::component-code +--- +external: + - items +props: + defaultValue: '1' + items: + - label: 'Option 1' + description: 'This is the first option.' + value: '1' + - label: 'Option 2' + description: 'This is the second option.' + value: '2' + - label: 'Option 3' + description: 'This is the third option.' + value: '3' +--- +:: + +### Legend + +Use the `legend` prop to set the legend of the RadioGroup. + +::component-code +--- +ignore: + - defaultValue +external: + - items +props: + defaultValue: '1' + legend: 'Legend' + items: + - label: 'Option 1' + description: 'This is the first option.' + value: '1' + - label: 'Option 2' + description: 'This is the second option.' + value: '2' + - label: 'Option 3' + description: 'This is the third option.' + value: '3' +--- +:: + +### Orientation + +Use the `orientation` prop to change the orientation of the RadioGroup. Defaults to `vertical`. + +::component-code +--- +ignore: + - defaultValue +external: + - items +props: + defaultValue: '1' + orientation: 'horizontal' + items: + - label: 'Option 1' + description: 'This is the first option.' + value: '1' + - label: 'Option 2' + description: 'This is the second option.' + value: '2' + - label: 'Option 3' + description: 'This is the third option.' + value: '3' +--- +:: + +### Color + +Use the `color` prop to change the color of the RadioGroup. + +::component-code +--- +ignore: + - defaultValue +external: + - items +props: + defaultValue: '1' + color: 'gray' + items: + - label: 'Option 1' + description: 'This is the first option.' + value: '1' + - label: 'Option 2' + description: 'This is the second option.' + value: '2' + - label: 'Option 3' + description: 'This is the third option.' + value: '3' +--- +:: + +### Size + +Use the `size` prop to change the size of the RadioGroup. + +::component-code +--- +ignore: + - defaultValue +external: + - items +props: + defaultValue: '1' + size: 'xl' + items: + - label: 'Option 1' + description: 'This is the first option.' + value: '1' + - label: 'Option 2' + description: 'This is the second option.' + value: '2' + - label: 'Option 3' + description: 'This is the third option.' + value: '3' +--- +:: + +### Disabled + +Use the `disabled` prop to disable the RadioGroup. + +::component-code +--- +ignore: + - defaultValue +external: + - items +props: + defaultValue: '1' + disabled: true + items: + - label: 'Option 1' + description: 'This is the first option.' + value: '1' + - label: 'Option 2' + description: 'This is the second option.' + value: '2' + - label: 'Option 3' + description: 'This is the third option.' + value: '3' +--- +:: ## API diff --git a/docs/content/3.components/slider.md b/docs/content/3.components/slider.md index a7daca04..64c04c2f 100644 --- a/docs/content/3.components/slider.md +++ b/docs/content/3.components/slider.md @@ -87,7 +87,7 @@ props: ### Orientation -Use the `orientation` prop to change the orientation of the Slider. +Use the `orientation` prop to change the orientation of the Slider. Defaults to `horizontal`. ::component-code --- diff --git a/docs/content/3.components/switch.md b/docs/content/3.components/switch.md index 775fd998..04f18237 100644 --- a/docs/content/3.components/switch.md +++ b/docs/content/3.components/switch.md @@ -17,11 +17,8 @@ Use the `v-model` directive to control the checked state of the Switch. --- external: - modelValue -ignore: - - label props: modelValue: true - label: Check me --- :: @@ -29,11 +26,8 @@ Use the `default-value` prop to set the initial value when you do not need to co ::component-code --- -ignore: - - label props: defaultValue: true - label: Check me --- :: @@ -48,6 +42,18 @@ props: --- :: +When using the `required` prop, an asterisk will be added next to the label. + +::component-code +--- +ignore: + - label +props: + required: true + label: Check me +--- +:: + ### Description Use the `description` prop to set the description of the Switch. @@ -135,20 +141,6 @@ props: --- :: -### Required - -Use the `required` prop to make the Switch required. This will add an asterisk to the label. - -::component-code ---- -ignore: - - label -props: - required: true - label: Check me ---- -:: - ### Disabled Use the `disabled` prop to disable the Switch. diff --git a/docs/content/3.components/tabs.md b/docs/content/3.components/tabs.md index 5a0f76d3..c4017815 100644 --- a/docs/content/3.components/tabs.md +++ b/docs/content/3.components/tabs.md @@ -11,8 +11,6 @@ links: ## Usage -### Items - Use the `items` prop as an array of objects with the following properties: - `label?: string`{lang="ts-type"} @@ -167,7 +165,7 @@ props: ### Orientation -Use the `orientation` prop to change the orientation of the Tabs. +Use the `orientation` prop to change the orientation of the Tabs. Defaults to `horizontal`. ::component-code --- diff --git a/docs/nuxt.config.ts b/docs/nuxt.config.ts index e1c4863e..7749eba6 100644 --- a/docs/nuxt.config.ts +++ b/docs/nuxt.config.ts @@ -132,6 +132,7 @@ export default defineNuxtConfig({ 'UKbd', 'ULink', 'UProgress', + 'URadioGroup', 'USlider', 'USwitch', 'UTabs',