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

fix(CheckboxGroup): proxy slots & ui prop

Browse Source
This commit is contained in:
Benjamin Canac
2025-04-24 12:26:48 +02:00
parent 6e27304d8c
commit bc06185282
5 changed files with 38 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
test/components/CheckboxGroup.spec.ts
View File

@@ -38,11 +38,11 @@ describe('CheckboxGroup', () => {
['with ariaLabel', { props, attrs: { 'aria-label': 'Aria label' } }],
['with as', { props: { ...props, as: 'section' } }],
['with class', { props: { ...props, class: 'absolute' } }],
['with ui', { props: { ...props, ui: { wrapper: 'ms-4' } } }],
['with ui', { props: { ...props, ui: { fieldset: 'gap-x-4', label: 'text-red' } } }],
// Slots
['with legend slot', { props, slots: { label: () => 'Legend slot' } }],
['with legend slot', { props, slots: { legend: () => 'Legend slot' } }],
['with label slot', { props, slots: { label: () => 'Label slot' } }],
['with description slot', { props, slots: { label: () => 'Description slot' } }]
['with description slot', { props, slots: { description: () => 'Description slot' } }]
])('renders %s correctly', async (nameOrHtml: string, options: { props?: CheckboxGroupProps, slots?: Partial<CheckboxGroupSlots> }) => {
const html = await ComponentRender(nameOrHtml, options, CheckboxGroup)
expect(html).toMatchSnapshot()

22
test/components/__snapshots__/CheckboxGroup-vue.spec.ts.snap
View File

@@ -189,7 +189,7 @@ exports[`CheckboxGroup > renders with description slot correctly 1`] = `
</button></div>
<div class="w-full ms-2 text-sm">
<p for="v-0:1" class="block font-medium text-default">Option 1</p>
<!--v-if-->
<p class="text-muted">Description slot</p>
</div>
</label><label class="relative flex items-start flex-row">
<div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="">
@@ -198,7 +198,7 @@ exports[`CheckboxGroup > renders with description slot correctly 1`] = `
</button></div>
<div class="w-full ms-2 text-sm">
<p for="v-0:2" class="block font-medium text-default">Option 2</p>
<!--v-if-->
<p class="text-muted">Description slot</p>
</div>
</label><label class="relative flex items-start flex-row">
<div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="">
@@ -207,7 +207,7 @@ exports[`CheckboxGroup > renders with description slot correctly 1`] = `
</button></div>
<div class="w-full ms-2 text-sm">
<p for="v-0:3" class="block font-medium text-default">Option 3</p>
<!--v-if-->
<p class="text-muted">Description slot</p>
</div>
</label>
</fieldset>
@@ -507,7 +507,7 @@ exports[`CheckboxGroup > renders with label slot correctly 1`] = `
<!---->
</button></div>
<div class="w-full ms-2 text-sm">
<p for="v-0:1" class="block font-medium text-default">Option 1</p>
<p for="v-0:1" class="block font-medium text-default">Label slot</p>
<!--v-if-->
</div>
</label><label class="relative flex items-start flex-row">
@@ -516,7 +516,7 @@ exports[`CheckboxGroup > renders with label slot correctly 1`] = `
<!---->
</button></div>
<div class="w-full ms-2 text-sm">
<p for="v-0:2" class="block font-medium text-default">Option 2</p>
<p for="v-0:2" class="block font-medium text-default">Label slot</p>
<!--v-if-->
</div>
</label><label class="relative flex items-start flex-row">
@@ -525,7 +525,7 @@ exports[`CheckboxGroup > renders with label slot correctly 1`] = `
<!---->
</button></div>
<div class="w-full ms-2 text-sm">
<p for="v-0:3" class="block font-medium text-default">Option 3</p>
<p for="v-0:3" class="block font-medium text-default">Label slot</p>
<!--v-if-->
</div>
</label>
@@ -573,7 +573,7 @@ exports[`CheckboxGroup > renders with labelKey correctly 1`] = `
exports[`CheckboxGroup > renders with legend slot correctly 1`] = `
"<div tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0" class="relative">
<fieldset class="flex gap-x-2 flex-col gap-y-1">
<!--v-if--><label class="relative flex items-start flex-row">
<legend class="mb-1 block font-medium text-default text-sm">Legend slot</legend><label class="relative flex items-start flex-row">
<div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="">
<!---->
<!---->
@@ -994,14 +994,14 @@ exports[`CheckboxGroup > renders with size xs correctly 1`] = `
exports[`CheckboxGroup > renders with ui correctly 1`] = `
"<div tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0" class="relative">
<fieldset class="flex gap-x-2 flex-col gap-y-1">
<fieldset class="flex flex-col gap-y-1 gap-x-4">
<!--v-if--><label class="relative flex items-start flex-row">
<div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="">
<!---->
<!---->
</button></div>
<div class="w-full ms-2 text-sm">
<p for="v-0:1" class="block font-medium text-default">Option 1</p>
<p for="v-0:1" class="block font-medium text-red">Option 1</p>
<!--v-if-->
</div>
</label><label class="relative flex items-start flex-row">
@@ -1010,7 +1010,7 @@ exports[`CheckboxGroup > renders with ui correctly 1`] = `
<!---->
</button></div>
<div class="w-full ms-2 text-sm">
<p for="v-0:2" class="block font-medium text-default">Option 2</p>
<p for="v-0:2" class="block font-medium text-red">Option 2</p>
<!--v-if-->
</div>
</label><label class="relative flex items-start flex-row">
@@ -1019,7 +1019,7 @@ exports[`CheckboxGroup > renders with ui correctly 1`] = `
<!---->
</button></div>
<div class="w-full ms-2 text-sm">
<p for="v-0:3" class="block font-medium text-default">Option 3</p>
<p for="v-0:3" class="block font-medium text-red">Option 3</p>
<!--v-if-->
</div>
</label>

22
test/components/__snapshots__/CheckboxGroup.spec.ts.snap
View File

@@ -189,7 +189,7 @@ exports[`CheckboxGroup > renders with description slot correctly 1`] = `
</button></div>
<div class="w-full ms-2 text-sm">
<p for="v-0-0:1" class="block font-medium text-default">Option 1</p>
<!--v-if-->
<p class="text-muted">Description slot</p>
</div>
</label><label class="relative flex items-start flex-row">
<div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="">
@@ -198,7 +198,7 @@ exports[`CheckboxGroup > renders with description slot correctly 1`] = `
</button></div>
<div class="w-full ms-2 text-sm">
<p for="v-0-0:2" class="block font-medium text-default">Option 2</p>
<!--v-if-->
<p class="text-muted">Description slot</p>
</div>
</label><label class="relative flex items-start flex-row">
<div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="">
@@ -207,7 +207,7 @@ exports[`CheckboxGroup > renders with description slot correctly 1`] = `
</button></div>
<div class="w-full ms-2 text-sm">
<p for="v-0-0:3" class="block font-medium text-default">Option 3</p>
<!--v-if-->
<p class="text-muted">Description slot</p>
</div>
</label>
</fieldset>
@@ -507,7 +507,7 @@ exports[`CheckboxGroup > renders with label slot correctly 1`] = `
<!---->
</button></div>
<div class="w-full ms-2 text-sm">
<p for="v-0-0:1" class="block font-medium text-default">Option 1</p>
<p for="v-0-0:1" class="block font-medium text-default">Label slot</p>
<!--v-if-->
</div>
</label><label class="relative flex items-start flex-row">
@@ -516,7 +516,7 @@ exports[`CheckboxGroup > renders with label slot correctly 1`] = `
<!---->
</button></div>
<div class="w-full ms-2 text-sm">
<p for="v-0-0:2" class="block font-medium text-default">Option 2</p>
<p for="v-0-0:2" class="block font-medium text-default">Label slot</p>
<!--v-if-->
</div>
</label><label class="relative flex items-start flex-row">
@@ -525,7 +525,7 @@ exports[`CheckboxGroup > renders with label slot correctly 1`] = `
<!---->
</button></div>
<div class="w-full ms-2 text-sm">
<p for="v-0-0:3" class="block font-medium text-default">Option 3</p>
<p for="v-0-0:3" class="block font-medium text-default">Label slot</p>
<!--v-if-->
</div>
</label>
@@ -573,7 +573,7 @@ exports[`CheckboxGroup > renders with labelKey correctly 1`] = `
exports[`CheckboxGroup > renders with legend slot correctly 1`] = `
"<div tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative">
<fieldset class="flex gap-x-2 flex-col gap-y-1">
<!--v-if--><label class="relative flex items-start flex-row">
<legend class="mb-1 block font-medium text-default text-sm">Legend slot</legend><label class="relative flex items-start flex-row">
<div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="">
<!---->
<!---->
@@ -994,14 +994,14 @@ exports[`CheckboxGroup > renders with size xs correctly 1`] = `
exports[`CheckboxGroup > renders with ui correctly 1`] = `
"<div tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative">
<fieldset class="flex gap-x-2 flex-col gap-y-1">
<fieldset class="flex flex-col gap-y-1 gap-x-4">
<!--v-if--><label class="relative flex items-start flex-row">
<div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="">
<!---->
<!---->
</button></div>
<div class="w-full ms-2 text-sm">
<p for="v-0-0:1" class="block font-medium text-default">Option 1</p>
<p for="v-0-0:1" class="block font-medium text-red">Option 1</p>
<!--v-if-->
</div>
</label><label class="relative flex items-start flex-row">
@@ -1010,7 +1010,7 @@ exports[`CheckboxGroup > renders with ui correctly 1`] = `
<!---->
</button></div>
<div class="w-full ms-2 text-sm">
<p for="v-0-0:2" class="block font-medium text-default">Option 2</p>
<p for="v-0-0:2" class="block font-medium text-red">Option 2</p>
<!--v-if-->
</div>
</label><label class="relative flex items-start flex-row">
@@ -1019,7 +1019,7 @@ exports[`CheckboxGroup > renders with ui correctly 1`] = `
<!---->
</button></div>
<div class="w-full ms-2 text-sm">
<p for="v-0-0:3" class="block font-medium text-default">Option 3</p>
<p for="v-0-0:3" class="block font-medium text-red">Option 3</p>
<!--v-if-->
</div>
</label>