arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-14 12:14:41 +01:00
Code Issues Packages Projects Releases Wiki Activity

chore(RadioGroup): rename options prop to items (#98)

Browse Source 
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
Romain Hamel
2024-05-10 12:31:20 +02:00
committed by GitHub
parent 2480efe6e5
commit 810d278ea7
7 changed files with 128 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
playground/components/FormElementsExample.vue
View File

@@ -63,7 +63,7 @@ function onSubmit(event: FormSubmitEvent<Schema>) {
</UFormField>
<UFormField name="radioGroup">
<URadioGroup v-model="state.radioGroup" legend="Radio group" :options="options" />
<URadioGroup v-model="state.radioGroup" legend="Radio group" :items="options" />
</UFormField>
<UFormField name="switch">

32
playground/pages/radio-group.vue
View File

@@ -8,13 +8,13 @@ const literalOptions = [
'Option 2',
'Option 3'
]
const options = [
const items = [
{ value: '1', label: 'Option 1' },
{ value: '2', label: 'Option 2' },
{ value: '3', label: 'Option 3' }
]
const optionsWithDescription = [
const itemsWithDescription = [
{ value: '1', label: 'Option 1', description: 'Description 1' },
{ value: '2', label: 'Option 2', description: 'Description 2' },
{ value: '3', label: 'Option 3', description: 'Description 3' }
@@ -23,38 +23,38 @@ const optionsWithDescription = [
<template>
<div class="flex flex-col items-center gap-4">
<div class="flex flex-col gap-4">
<URadioGroup :options="options" default-value="1" />
<URadioGroup :options="literalOptions" />
<URadioGroup :options="options" label="Disabled" disabled />
<URadioGroup :options="options" color="red" default-value="1" />
<URadioGroup :options="options" orientation="horizontal" />
<div class="flex flex-col gap-4 ml-[100px]">
<URadioGroup :items="items" default-value="1" />
<URadioGroup :items="literalOptions" />
<URadioGroup :items="items" label="Disabled" disabled />
<URadioGroup :items="items" color="red" default-value="1" />
<URadioGroup :items="items" orientation="horizontal" class="ml-[-91px]" />
</div>
<div class="flex items-center gap-4 ml-[34px]">
<URadioGroup v-for="size in sizes" :key="size" :size="(size as any)" :options="options" />
<URadioGroup v-for="size in sizes" :key="size" :size="(size as any)" :items="items" />
</div>
<div class="flex items-center gap-4 ml-[74px]">
<URadioGroup v-for="size in sizes" :key="size" :size="(size as any)" :options="optionsWithDescription" />
<URadioGroup v-for="size in sizes" :key="size" :size="(size as any)" :items="itemsWithDescription" />
</div>
<div class="flex gap-4">
<URadioGroup :options="options" legend="Legend" />
<URadioGroup :options="options" legend="Legend" required />
<URadioGroup :options="options">
<URadioGroup :items="items" legend="Legend" />
<URadioGroup :items="items" legend="Legend" required />
<URadioGroup :items="items">
<template #legend>
<span class="italic font-bold">
With slots
</span>
</template>
<template #label="{ option }">
<template #label="{ item }">
<span class="italic">
{{ option.label }}
{{ item.label }}
</span>
</template>
</URadioGroup>
</div>
<URadioGroup :options="options" legend="Legend" orientation="horizontal" required />
<URadioGroup :items="items" legend="Legend" orientation="horizontal" required />
</div>
</template>

2
playground/pages/toast.vue
View File

@@ -109,7 +109,7 @@ function removeToast() {
<template>
<div class="flex flex-col items-center gap-8">
<div class="flex flex-col gap-2">
<URadioGroup v-model="appConfig.toaster.position" :options="positions" />
<URadioGroup v-model="appConfig.toaster.position" :items="positions" />
<UCheckbox v-model="appConfig.toaster.expand" label="Expand" class="mt-1" />
<UInput v-model="appConfig.toaster.duration" label="Duration" type="number" class="mt-1" />
</div>