mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-21 07:21:46 +01:00
feat(RadioGroup): new component (#41)
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
Romain Hamel
GitHub
32
test/components/RadioGroup.spec.ts
Normal file
32
test/components/RadioGroup.spec.ts
Normal file
@@ -0,0 +1,32 @@
|
||||
import { describe, it, expect } from 'vitest'
|
||||
import RadioGroup, { type RadioGroupProps } from '../../src/runtime/components/RadioGroup.vue'
|
||||
import ComponentRender from '../component-render'
|
||||
import { defu } from 'defu'
|
||||
|
||||
const defaultOptions = [
|
||||
{ value: '1', label: 'Option 1' },
|
||||
{ value: '2', label: 'Option 2' },
|
||||
{ value: '3', label: 'Option 3' }
|
||||
]
|
||||
|
||||
describe('RadioGroup', () => {
|
||||
it.each([
|
||||
['basic case', {}],
|
||||
['with default value', { props: { defaultValue: '1' } }],
|
||||
['with disabled', { props: { disabled: true } }],
|
||||
['with description', { props: { options: defaultOptions.map((opt, count) => ({ ...opt, description: `Description ${count}` })) } }],
|
||||
['with required', { props: { legend: 'Legend', required: true } }],
|
||||
['with custom color', { props: { color: 'red' as const } }],
|
||||
['with size 2xs', { props: { size: '2xs' as const } }],
|
||||
['with size xs', { props: { size: 'xs' as const } }],
|
||||
['with size sm', { props: { size: 'sm' as const } }],
|
||||
['with size md', { props: { size: 'md' as const } }],
|
||||
['with size lg', { props: { size: 'lg' as const } }],
|
||||
['with size xl', { props: { size: 'xl' as const } }],
|
||||
['with class', { props: { class: 'bg-red-500' } }],
|
||||
['with ui', { props: { ui: {} } }]
|
||||
])('renders %s correctly', async (nameOrHtml: string, options: { props?: RadioGroupProps<any>, slots?: any }) => {
|
||||
const html = await ComponentRender(nameOrHtml, defu(options, { props: { options: defaultOptions } }), RadioGroup)
|
||||
expect(html).toMatchSnapshot()
|
||||
})
|
||||
})
|
||||
517
test/components/__snapshots__/RadioGroup.spec.ts.snap
Normal file
517
test/components/__snapshots__/RadioGroup.spec.ts.snap
Normal file
@@ -0,0 +1,517 @@
|
||||
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
|
||||
|
||||
exports[`RadioGroup > renders basic case correctly 1`] = `
|
||||
"<div role="radiogroup" required="false" aria-required="false" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="0" class="relative" tabindex="0">
|
||||
<fieldset class="flex flex-col gap-1">
|
||||
<!--v-if-->
|
||||
<div class="flex items-start text-sm">
|
||||
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
<div class="ms-2"><label for="0:1" class="block font-medium text-gray-700 dark:text-gray-200">Option 1</label>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start text-sm">
|
||||
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
<div class="ms-2"><label for="0:2" class="block font-medium text-gray-700 dark:text-gray-200">Option 2</label>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start text-sm">
|
||||
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
<div class="ms-2"><label for="0:3" class="block font-medium text-gray-700 dark:text-gray-200">Option 3</label>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`RadioGroup > renders with class correctly 1`] = `
|
||||
"<div role="radiogroup" required="false" aria-required="false" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="12" class="relative bg-red-500" tabindex="0">
|
||||
<fieldset class="flex flex-col gap-1">
|
||||
<!--v-if-->
|
||||
<div class="flex items-start text-sm">
|
||||
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="12:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
<div class="ms-2"><label for="12:1" class="block font-medium text-gray-700 dark:text-gray-200">Option 1</label>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start text-sm">
|
||||
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="12:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
<div class="ms-2"><label for="12:2" class="block font-medium text-gray-700 dark:text-gray-200">Option 2</label>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start text-sm">
|
||||
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="12:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
<div class="ms-2"><label for="12:3" class="block font-medium text-gray-700 dark:text-gray-200">Option 3</label>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`RadioGroup > renders with custom color correctly 1`] = `
|
||||
"<div role="radiogroup" required="false" aria-required="false" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="5" class="relative" tabindex="0">
|
||||
<fieldset class="flex flex-col gap-1">
|
||||
<!--v-if-->
|
||||
<div class="flex items-start text-sm">
|
||||
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-500 dark:focus-visible:outline-red-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="5:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
<div class="ms-2"><label for="5:1" class="block font-medium text-gray-700 dark:text-gray-200">Option 1</label>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start text-sm">
|
||||
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-500 dark:focus-visible:outline-red-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="5:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
<div class="ms-2"><label for="5:2" class="block font-medium text-gray-700 dark:text-gray-200">Option 2</label>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start text-sm">
|
||||
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-500 dark:focus-visible:outline-red-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="5:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
<div class="ms-2"><label for="5:3" class="block font-medium text-gray-700 dark:text-gray-200">Option 3</label>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`RadioGroup > renders with default value correctly 1`] = `
|
||||
"<div role="radiogroup" required="false" aria-required="false" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="1" class="relative" tabindex="0">
|
||||
<fieldset class="flex flex-col gap-1">
|
||||
<!--v-if-->
|
||||
<div class="flex items-start text-sm">
|
||||
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-active="true" id="1:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" value="1" aria-label="1"><span data-state="checked" class="flex items-center justify-center size-full rounded-full after:bg-white after:rounded-full bg-primary-500 dark:bg-primary-400 after:size-1.5"></span>
|
||||
<!---->
|
||||
</button></div>
|
||||
<div class="ms-2"><label for="1:1" class="block font-medium text-gray-700 dark:text-gray-200">Option 1</label>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start text-sm">
|
||||
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="1:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
<div class="ms-2"><label for="1:2" class="block font-medium text-gray-700 dark:text-gray-200">Option 2</label>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start text-sm">
|
||||
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="1:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
<div class="ms-2"><label for="1:3" class="block font-medium text-gray-700 dark:text-gray-200">Option 3</label>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`RadioGroup > renders with description correctly 1`] = `
|
||||
"<div role="radiogroup" required="false" aria-required="false" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="3" class="relative" tabindex="0">
|
||||
<fieldset class="flex flex-col gap-1">
|
||||
<!--v-if-->
|
||||
<div class="flex items-start text-sm">
|
||||
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="3:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
<div class="ms-2"><label for="3:1" class="block font-medium text-gray-700 dark:text-gray-200">Option 1</label>
|
||||
<p class="text-gray-500 dark:text-gray-400">Description 0</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start text-sm">
|
||||
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="3:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
<div class="ms-2"><label for="3:2" class="block font-medium text-gray-700 dark:text-gray-200">Option 2</label>
|
||||
<p class="text-gray-500 dark:text-gray-400">Description 1</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start text-sm">
|
||||
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="3:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
<div class="ms-2"><label for="3:3" class="block font-medium text-gray-700 dark:text-gray-200">Option 3</label>
|
||||
<p class="text-gray-500 dark:text-gray-400">Description 2</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start text-sm">
|
||||
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="3:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
<div class="ms-2"><label for="3:1" class="block font-medium text-gray-700 dark:text-gray-200">Option 1</label>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start text-sm">
|
||||
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="3:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
<div class="ms-2"><label for="3:2" class="block font-medium text-gray-700 dark:text-gray-200">Option 2</label>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start text-sm">
|
||||
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="3:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
<div class="ms-2"><label for="3:3" class="block font-medium text-gray-700 dark:text-gray-200">Option 3</label>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`RadioGroup > renders with disabled correctly 1`] = `
|
||||
"<div role="radiogroup" data-disabled="" required="false" aria-required="false" dir="ltr" tabindex="-1" style="outline-color: none; outline-style: none; outline-width: initial;" id="2" class="relative">
|
||||
<fieldset class="flex flex-col gap-1">
|
||||
<!--v-if-->
|
||||
<div class="flex items-start text-sm">
|
||||
<div class="flex items-center h-5 cursor-not-allowed opacity-75"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-active="false" data-disabled="true" id="2:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
<div class="ms-2"><label for="2:1" class="block font-medium text-gray-700 dark:text-gray-200">Option 1</label>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start text-sm">
|
||||
<div class="flex items-center h-5 cursor-not-allowed opacity-75"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-active="false" data-disabled="true" id="2:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
<div class="ms-2"><label for="2:2" class="block font-medium text-gray-700 dark:text-gray-200">Option 2</label>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start text-sm">
|
||||
<div class="flex items-center h-5 cursor-not-allowed opacity-75"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-active="false" data-disabled="true" id="2:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
<div class="ms-2"><label for="2:3" class="block font-medium text-gray-700 dark:text-gray-200">Option 3</label>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`RadioGroup > renders with required correctly 1`] = `
|
||||
"<div role="radiogroup" required="true" aria-required="true" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="4" class="relative" tabindex="0">
|
||||
<fieldset class="flex flex-col gap-1">
|
||||
<legend class="mb-1 block font-medium text-gray-700 dark:text-gray-200 after:content-['*'] after:ms-0.5 after:text-red-500 dark:after:text-red-400">Legend</legend>
|
||||
<div class="flex items-start text-sm">
|
||||
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="4:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="true" value="1" aria-label="1">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
<div class="ms-2"><label for="4:1" class="block font-medium text-gray-700 dark:text-gray-200">Option 1</label>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start text-sm">
|
||||
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="4:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="true" value="2" aria-label="2">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
<div class="ms-2"><label for="4:2" class="block font-medium text-gray-700 dark:text-gray-200">Option 2</label>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start text-sm">
|
||||
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="4:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="true" value="3" aria-label="3">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
<div class="ms-2"><label for="4:3" class="block font-medium text-gray-700 dark:text-gray-200">Option 3</label>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`RadioGroup > renders with size 2xs correctly 1`] = `
|
||||
"<div role="radiogroup" required="false" aria-required="false" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="6" class="relative" tabindex="0">
|
||||
<fieldset class="flex flex-col gap-0.5">
|
||||
<!--v-if-->
|
||||
<div class="flex items-start text-xs">
|
||||
<div class="flex items-center h-4"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-3" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="6:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
<div class="ms-2"><label for="6:1" class="block font-medium text-gray-700 dark:text-gray-200">Option 1</label>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start text-xs">
|
||||
<div class="flex items-center h-4"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-3" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="6:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
<div class="ms-2"><label for="6:2" class="block font-medium text-gray-700 dark:text-gray-200">Option 2</label>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start text-xs">
|
||||
<div class="flex items-center h-4"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-3" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="6:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
<div class="ms-2"><label for="6:3" class="block font-medium text-gray-700 dark:text-gray-200">Option 3</label>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`RadioGroup > renders with size lg correctly 1`] = `
|
||||
"<div role="radiogroup" required="false" aria-required="false" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="10" class="relative" tabindex="0">
|
||||
<fieldset class="flex flex-col gap-1.5">
|
||||
<!--v-if-->
|
||||
<div class="flex items-start text-base">
|
||||
<div class="flex items-center h-6"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-5" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="10:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
<div class="ms-2"><label for="10:1" class="block font-medium text-gray-700 dark:text-gray-200">Option 1</label>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start text-base">
|
||||
<div class="flex items-center h-6"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-5" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="10:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
<div class="ms-2"><label for="10:2" class="block font-medium text-gray-700 dark:text-gray-200">Option 2</label>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start text-base">
|
||||
<div class="flex items-center h-6"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-5" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="10:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
<div class="ms-2"><label for="10:3" class="block font-medium text-gray-700 dark:text-gray-200">Option 3</label>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`RadioGroup > renders with size md correctly 1`] = `
|
||||
"<div role="radiogroup" required="false" aria-required="false" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="9" class="relative" tabindex="0">
|
||||
<fieldset class="flex flex-col gap-1">
|
||||
<!--v-if-->
|
||||
<div class="flex items-start text-sm">
|
||||
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-[18px]" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="9:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
<div class="ms-2"><label for="9:1" class="block font-medium text-gray-700 dark:text-gray-200">Option 1</label>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start text-sm">
|
||||
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-[18px]" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="9:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
<div class="ms-2"><label for="9:2" class="block font-medium text-gray-700 dark:text-gray-200">Option 2</label>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start text-sm">
|
||||
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-[18px]" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="9:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
<div class="ms-2"><label for="9:3" class="block font-medium text-gray-700 dark:text-gray-200">Option 3</label>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`RadioGroup > renders with size sm correctly 1`] = `
|
||||
"<div role="radiogroup" required="false" aria-required="false" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="8" class="relative" tabindex="0">
|
||||
<fieldset class="flex flex-col gap-1">
|
||||
<!--v-if-->
|
||||
<div class="flex items-start text-sm">
|
||||
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="8:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
<div class="ms-2"><label for="8:1" class="block font-medium text-gray-700 dark:text-gray-200">Option 1</label>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start text-sm">
|
||||
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="8:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
<div class="ms-2"><label for="8:2" class="block font-medium text-gray-700 dark:text-gray-200">Option 2</label>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start text-sm">
|
||||
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="8:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
<div class="ms-2"><label for="8:3" class="block font-medium text-gray-700 dark:text-gray-200">Option 3</label>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`RadioGroup > renders with size xl correctly 1`] = `
|
||||
"<div role="radiogroup" required="false" aria-required="false" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="11" class="relative" tabindex="0">
|
||||
<fieldset class="flex flex-col gap-1.5">
|
||||
<!--v-if-->
|
||||
<div class="flex items-start text-base">
|
||||
<div class="flex items-center h-6"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-[22px]" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="11:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
<div class="ms-2"><label for="11:1" class="block font-medium text-gray-700 dark:text-gray-200">Option 1</label>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start text-base">
|
||||
<div class="flex items-center h-6"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-[22px]" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="11:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
<div class="ms-2"><label for="11:2" class="block font-medium text-gray-700 dark:text-gray-200">Option 2</label>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start text-base">
|
||||
<div class="flex items-center h-6"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-[22px]" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="11:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
<div class="ms-2"><label for="11:3" class="block font-medium text-gray-700 dark:text-gray-200">Option 3</label>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`RadioGroup > renders with size xs correctly 1`] = `
|
||||
"<div role="radiogroup" required="false" aria-required="false" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="7" class="relative" tabindex="0">
|
||||
<fieldset class="flex flex-col gap-0.5">
|
||||
<!--v-if-->
|
||||
<div class="flex items-start text-xs">
|
||||
<div class="flex items-center h-4"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-3.5" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="7:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
<div class="ms-2"><label for="7:1" class="block font-medium text-gray-700 dark:text-gray-200">Option 1</label>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start text-xs">
|
||||
<div class="flex items-center h-4"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-3.5" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="7:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
<div class="ms-2"><label for="7:2" class="block font-medium text-gray-700 dark:text-gray-200">Option 2</label>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start text-xs">
|
||||
<div class="flex items-center h-4"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-3.5" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="7:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
<div class="ms-2"><label for="7:3" class="block font-medium text-gray-700 dark:text-gray-200">Option 3</label>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`RadioGroup > renders with ui correctly 1`] = `
|
||||
"<div role="radiogroup" required="false" aria-required="false" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="13" class="relative" tabindex="0">
|
||||
<fieldset class="flex flex-col gap-1">
|
||||
<!--v-if-->
|
||||
<div class="flex items-start text-sm">
|
||||
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="13:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
<div class="ms-2"><label for="13:1" class="block font-medium text-gray-700 dark:text-gray-200">Option 1</label>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start text-sm">
|
||||
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="13:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
<div class="ms-2"><label for="13:2" class="block font-medium text-gray-700 dark:text-gray-200">Option 2</label>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start text-sm">
|
||||
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="13:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
<div class="ms-2"><label for="13:3" class="block font-medium text-gray-700 dark:text-gray-200">Option 3</label>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>"
|
||||
`;
|
||||
Reference in New Issue
Block a user