mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-14 12:14:41 +01:00
feat(CheckboxGroup): new component (#3862)
Co-authored-by: Benjamin Canac <canacb1@gmail.com> Co-authored-by: Romain Hamel <rom.hml@gmail.com>
This commit is contained in:
TribeWeb
GitHub
@@ -8,6 +8,8 @@ import type { FormInputEvents } from '~/src/module'
|
||||
|
||||
describe('Checkbox', () => {
|
||||
const sizes = Object.keys(theme.variants.size) as any
|
||||
const variants = Object.keys(theme.variants.variant) as any
|
||||
const indicators = Object.keys(theme.variants.indicator) as any
|
||||
|
||||
it.each([
|
||||
// Props
|
||||
@@ -23,8 +25,10 @@ describe('Checkbox', () => {
|
||||
['with label', { props: { label: 'Label' } }],
|
||||
['with required', { props: { label: 'Label', required: true } }],
|
||||
['with description', { props: { label: 'Label', description: 'Description' } }],
|
||||
...sizes.map((size: string) => [`with size ${size}`, { props: { size } }]),
|
||||
['with color neutral', { props: { color: 'neutral', defaultValue: true } }],
|
||||
...sizes.map((size: string) => [`with size ${size}`, { props: { size, defaultValue: '1' } }]),
|
||||
...variants.map((variant: string) => [`with primary variant ${variant}`, { props: { variant, defaultValue: '1' } }]),
|
||||
...variants.map((variant: string) => [`with neutral variant ${variant}`, { props: { variant, color: 'neutral', defaultValue: '1' } }]),
|
||||
...indicators.map((indicator: string) => [`with indicator ${indicator}`, { props: { indicator, defaultValue: '1' } }]),
|
||||
['with ariaLabel', { attrs: { 'aria-label': 'Aria label' } }],
|
||||
['with as', { props: { as: 'section' } }],
|
||||
['with class', { props: { class: 'inline-flex' } }],
|
||||
|
||||
125
test/components/CheckboxGroup.spec.ts
Normal file
125
test/components/CheckboxGroup.spec.ts
Normal file
@@ -0,0 +1,125 @@
|
||||
import { describe, it, expect, test } from 'vitest'
|
||||
import CheckboxGroup, { type CheckboxGroupProps, type CheckboxGroupSlots } from '../../src/runtime/components/CheckboxGroup.vue'
|
||||
import ComponentRender from '../component-render'
|
||||
import theme from '#build/ui/checkbox-group'
|
||||
import themeCheckbox from '#build/ui/checkbox'
|
||||
import { flushPromises, mount } from '@vue/test-utils'
|
||||
import { renderForm } from '../utils/form'
|
||||
import type { FormInputEvents } from '~/src/module'
|
||||
|
||||
describe('CheckboxGroup', () => {
|
||||
const sizes = Object.keys(theme.variants.size) as any
|
||||
const variants = Object.keys(themeCheckbox.variants.variant) as any
|
||||
const indicators = Object.keys(themeCheckbox.variants.indicator) as any
|
||||
|
||||
const items = [
|
||||
{ value: '1', label: 'Option 1' },
|
||||
{ value: '2', label: 'Option 2' },
|
||||
{ value: '3', label: 'Option 3' }
|
||||
]
|
||||
|
||||
const props = { items }
|
||||
|
||||
it.each([
|
||||
['with items', { props }],
|
||||
['with modelValue', { props: { ...props, modelValue: ['1'] } }],
|
||||
['with defaultValue', { props: { ...props, defaultValue: ['1'] } }],
|
||||
['with valueKey', { props: { ...props, valueKey: 'label' } }],
|
||||
['with labelKey', { props: { ...props, labelKey: 'value' } }],
|
||||
['with descriptionKey', { props: { ...props, descriptionKey: 'value' } }],
|
||||
['with disabled', { props: { ...props, disabled: true } }],
|
||||
['with description', { props: { items: items.map((opt, count) => ({ ...opt, description: `Description ${count}` })) } }],
|
||||
['with required', { props: { ...props, legend: 'Legend', required: true } }],
|
||||
...sizes.map((size: string) => [`with size ${size}`, { props: { ...props, size, defaultValue: ['1'] } }]),
|
||||
...variants.map((variant: string) => [`with primary variant ${variant}`, { props: { ...props, variant, defaultValue: ['1'] } }]),
|
||||
...variants.map((variant: string) => [`with neutral variant ${variant}`, { props: { ...props, variant, color: 'neutral', defaultValue: ['1'] } }]),
|
||||
...variants.map((variant: string) => [`with horizontal variant ${variant}`, { props: { ...props, variant, orientation: 'horizontal', defaultValue: ['1'] } }]),
|
||||
...indicators.map((indicator: string) => [`with indicator ${indicator}`, { props: { ...props, indicator, defaultValue: ['1'] } }]),
|
||||
['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' } } }],
|
||||
// Slots
|
||||
['with legend slot', { props, slots: { label: () => 'Legend slot' } }],
|
||||
['with label slot', { props, slots: { label: () => 'Label slot' } }],
|
||||
['with description slot', { props, slots: { label: () => 'Description slot' } }]
|
||||
])('renders %s correctly', async (nameOrHtml: string, options: { props?: CheckboxGroupProps, slots?: Partial<CheckboxGroupSlots> }) => {
|
||||
const html = await ComponentRender(nameOrHtml, options, CheckboxGroup)
|
||||
expect(html).toMatchSnapshot()
|
||||
})
|
||||
|
||||
describe('emits', () => {
|
||||
test('update:modelValue event', async () => {
|
||||
const wrapper = mount(CheckboxGroup, { props: { items: ['Option 1', 'Option 2'] } })
|
||||
const input = wrapper.findComponent({ name: 'CheckboxGroupRoot' })
|
||||
await input.setValue('Option 1')
|
||||
expect(wrapper.emitted()).toMatchObject({ 'update:modelValue': [['Option 1']] })
|
||||
})
|
||||
|
||||
test('change event', async () => {
|
||||
const wrapper = mount(CheckboxGroup, { props: { items: ['Option 1', 'Option 2'] } })
|
||||
const input = wrapper.findComponent({ name: 'CheckboxGroupRoot' })
|
||||
await input.setValue('Option 1')
|
||||
expect(wrapper.emitted()).toMatchObject({ change: [[{ type: 'change' }]] })
|
||||
})
|
||||
})
|
||||
|
||||
describe('form integration', async () => {
|
||||
async function createForm(validateOn?: FormInputEvents[]) {
|
||||
const wrapper = await renderForm({
|
||||
props: {
|
||||
validateOn,
|
||||
validateOnInputDelay: 0,
|
||||
async validate(state: any) {
|
||||
if (!state.value?.includes('Option 2'))
|
||||
return [{ name: 'value', message: 'Error message' }]
|
||||
return []
|
||||
}
|
||||
},
|
||||
slotVars: {
|
||||
items: ['Option 1', 'Option 2']
|
||||
},
|
||||
slotTemplate: `
|
||||
<UFormField name="value" label="Checkbox group">
|
||||
<UCheckboxGroup id="input" v-model="state.value" :items="items" />
|
||||
</UFormField>
|
||||
`
|
||||
})
|
||||
const input = wrapper.findComponent({ name: 'CheckboxGroupRoot' })
|
||||
return {
|
||||
wrapper,
|
||||
input
|
||||
}
|
||||
}
|
||||
|
||||
test('validate on change works', async () => {
|
||||
const { input, wrapper } = await createForm(['change'])
|
||||
|
||||
input.setValue(['Option 1'])
|
||||
await flushPromises()
|
||||
expect(wrapper.text()).toContain('Error message')
|
||||
|
||||
input.setValue(['Option 2'])
|
||||
await flushPromises()
|
||||
expect(wrapper.text()).not.toContain('Error message')
|
||||
})
|
||||
|
||||
test('validate on input works', async () => {
|
||||
const { input, wrapper } = await createForm(['input'])
|
||||
|
||||
input.setValue(['Option 1'])
|
||||
await flushPromises()
|
||||
expect(wrapper.text()).toContain('Error message')
|
||||
|
||||
input.setValue(['Option 2'])
|
||||
await flushPromises()
|
||||
expect(wrapper.text()).not.toContain('Error message')
|
||||
})
|
||||
|
||||
test('no label for=... on FormField', async () => {
|
||||
const { wrapper } = await createForm()
|
||||
const formFieldLabel = wrapper.findAll('label').map(label => label.attributes()).filter(label => !label.for?.includes(':'))[0]
|
||||
expect(formFieldLabel.for).toBeUndefined()
|
||||
})
|
||||
})
|
||||
})
|
||||
@@ -29,11 +29,11 @@ describe('RadioGroup', () => {
|
||||
['with disabled', { props: { ...props, disabled: true } }],
|
||||
['with description', { props: { items: items.map((opt, count) => ({ ...opt, description: `Description ${count}` })) } }],
|
||||
['with required', { props: { ...props, legend: 'Legend', required: true } }],
|
||||
...sizes.map((size: string) => [`with size ${size}`, { props: { ...props, size } }]),
|
||||
...sizes.map((size: string) => [`with size ${size}`, { props: { ...props, size, defaultValue: '1' } }]),
|
||||
...variants.map((variant: string) => [`with primary variant ${variant}`, { props: { ...props, variant, defaultValue: '1' } }]),
|
||||
...variants.map((variant: string) => [`with neutral variant ${variant}`, { props: { ...props, variant, color: 'neutral', defaultValue: '1' } }]),
|
||||
...variants.map((variant: string) => [`with horizontal variant ${variant}`, { props: { ...props, variant, orientation: 'horizontal', defaultValue: '1' } }]),
|
||||
...indicators.map((indicator: string) => [`with indicator ${indicator}`, { props: { ...props, indicator } }]),
|
||||
...indicators.map((indicator: string) => [`with indicator ${indicator}`, { props: { ...props, indicator, defaultValue: '1' } }]),
|
||||
['with ariaLabel', { props, attrs: { 'aria-label': 'Aria label' } }],
|
||||
['with as', { props: { ...props, as: 'section' } }],
|
||||
['with class', { props: { ...props, class: 'absolute' } }],
|
||||
|
||||
@@ -1,161 +1,226 @@
|
||||
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
|
||||
|
||||
exports[`Checkbox > renders with ariaLabel correctly 1`] = `
|
||||
"<div class="relative flex items-start">
|
||||
<div class="flex items-center h-5"><button aria-label="Aria label" class="shrink-0 flex items-center justify-center rounded-sm text-inverted ring ring-inset ring-accented focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||
"<label class="relative flex items-start flex-row">
|
||||
<div class="flex items-center h-5"><button aria-label="Aria label" 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" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
<!--v-if-->
|
||||
</div>"
|
||||
</label>"
|
||||
`;
|
||||
|
||||
exports[`Checkbox > renders with as correctly 1`] = `
|
||||
"<section class="relative flex items-start">
|
||||
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-sm text-inverted ring ring-inset ring-accented focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||
"<label class="relative flex items-start flex-row">
|
||||
<div class="flex items-center h-5"><button 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" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
<!--v-if-->
|
||||
</section>"
|
||||
</label>"
|
||||
`;
|
||||
|
||||
exports[`Checkbox > renders with class correctly 1`] = `
|
||||
"<div class="relative items-start inline-flex">
|
||||
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-sm text-inverted ring ring-inset ring-accented focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||
"<label class="relative items-start flex-row inline-flex">
|
||||
<div class="flex items-center h-5"><button 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" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
<!--v-if-->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`Checkbox > renders with color neutral correctly 1`] = `
|
||||
"<div class="relative flex items-start">
|
||||
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-sm text-inverted ring-inset focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted size-4 ring-2 ring-inverted bg-inverted" id="v-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-full" data-state="checked" style="pointer-events: none;" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<!---->
|
||||
</button></div>
|
||||
<!--v-if-->
|
||||
</div>"
|
||||
</label>"
|
||||
`;
|
||||
|
||||
exports[`Checkbox > renders with defaultValue correctly 1`] = `
|
||||
"<div class="relative flex items-start">
|
||||
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-sm text-inverted ring-inset focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4 ring-2 ring-primary bg-primary" id="v-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-full" data-state="checked" style="pointer-events: none;" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
"<label class="relative flex items-start flex-row">
|
||||
<div class="flex items-center h-5"><button 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" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span data-state="checked" style="pointer-events: none;" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-full" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
<!---->
|
||||
</button></div>
|
||||
<!--v-if-->
|
||||
</div>"
|
||||
</label>"
|
||||
`;
|
||||
|
||||
exports[`Checkbox > renders with description correctly 1`] = `
|
||||
"<div class="relative flex items-start">
|
||||
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-sm text-inverted ring ring-inset ring-accented focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||
"<label class="relative flex items-start flex-row">
|
||||
<div class="flex items-center h-5"><button 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" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
<div class="ms-2 text-sm"><label for="v-0" class="block font-medium text-default">Label</label>
|
||||
<div class="w-full ms-2 text-sm">
|
||||
<p for="v-0" class="block font-medium text-default">Label</p>
|
||||
<p class="text-muted">Description</p>
|
||||
</div>
|
||||
</div>"
|
||||
</label>"
|
||||
`;
|
||||
|
||||
exports[`Checkbox > renders with description slot correctly 1`] = `
|
||||
"<div class="relative flex items-start">
|
||||
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-sm text-inverted ring ring-inset ring-accented focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||
"<label class="relative flex items-start flex-row">
|
||||
<div class="flex items-center h-5"><button 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" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
<div class="ms-2 text-sm"><label for="v-0" class="block font-medium text-default">Description slot</label>
|
||||
<div class="w-full ms-2 text-sm">
|
||||
<p for="v-0" class="block font-medium text-default">Description slot</p>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</div>"
|
||||
</label>"
|
||||
`;
|
||||
|
||||
exports[`Checkbox > renders with disabled correctly 1`] = `
|
||||
"<div class="relative flex items-start">
|
||||
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-sm text-inverted ring ring-inset ring-accented focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4 cursor-not-allowed opacity-75" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-disabled="" disabled="">
|
||||
"<label class="relative flex items-start flex-row">
|
||||
<div class="flex items-center h-5"><button 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 cursor-not-allowed opacity-75" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-disabled="" disabled="">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
<!--v-if-->
|
||||
</div>"
|
||||
</label>"
|
||||
`;
|
||||
|
||||
exports[`Checkbox > renders with icon correctly 1`] = `
|
||||
"<div class="relative flex items-start">
|
||||
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-sm text-inverted ring ring-inset ring-accented focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||
"<label class="relative flex items-start flex-row">
|
||||
<div class="flex items-center h-5"><button 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" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
<!--v-if-->
|
||||
</div>"
|
||||
</label>"
|
||||
`;
|
||||
|
||||
exports[`Checkbox > renders with id correctly 1`] = `
|
||||
"<div class="relative flex items-start">
|
||||
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-sm text-inverted ring ring-inset ring-accented focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="id" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||
"<label class="relative flex items-start flex-row">
|
||||
<div class="flex items-center h-5"><button 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="id" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
<!--v-if-->
|
||||
</div>"
|
||||
</label>"
|
||||
`;
|
||||
|
||||
exports[`Checkbox > renders with indeterminate correctly 1`] = `
|
||||
"<div class="relative flex items-start">
|
||||
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-sm text-inverted ring-inset focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4 ring-2 ring-primary bg-primary" id="v-0" role="checkbox" type="button" aria-checked="mixed" aria-required="false" data-state="indeterminate"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-full" data-state="indeterminate" style="pointer-events: none;" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
"<label class="relative flex items-start flex-row">
|
||||
<div class="flex items-center h-5"><button 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" role="checkbox" type="button" aria-checked="mixed" aria-required="false" data-state="indeterminate"><span data-state="indeterminate" style="pointer-events: none;" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-full" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
<!---->
|
||||
</button></div>
|
||||
<!--v-if-->
|
||||
</div>"
|
||||
</label>"
|
||||
`;
|
||||
|
||||
exports[`Checkbox > renders with indeterminateIcon correctly 1`] = `
|
||||
"<div class="relative flex items-start">
|
||||
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-sm text-inverted ring-inset focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4 ring-2 ring-primary bg-primary" id="v-0" role="checkbox" type="button" aria-checked="mixed" aria-required="false" data-state="indeterminate"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-full" data-state="indeterminate" style="pointer-events: none;" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
"<label class="relative flex items-start flex-row">
|
||||
<div class="flex items-center h-5"><button 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" role="checkbox" type="button" aria-checked="mixed" aria-required="false" data-state="indeterminate"><span data-state="indeterminate" style="pointer-events: none;" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-full" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
<!---->
|
||||
</button></div>
|
||||
<!--v-if-->
|
||||
</div>"
|
||||
</label>"
|
||||
`;
|
||||
|
||||
exports[`Checkbox > renders with indicator end correctly 1`] = `
|
||||
"<label class="relative flex items-start flex-row-reverse">
|
||||
<div class="flex items-center h-5"><button 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" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
<!--v-if-->
|
||||
</label>"
|
||||
`;
|
||||
|
||||
exports[`Checkbox > renders with indicator hidden correctly 1`] = `
|
||||
"<label class="relative flex items-start">
|
||||
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary sr-only size-4" id="v-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
<!--v-if-->
|
||||
</label>"
|
||||
`;
|
||||
|
||||
exports[`Checkbox > renders with indicator start correctly 1`] = `
|
||||
"<label class="relative flex items-start flex-row">
|
||||
<div class="flex items-center h-5"><button 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" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
<!--v-if-->
|
||||
</label>"
|
||||
`;
|
||||
|
||||
exports[`Checkbox > renders with label correctly 1`] = `
|
||||
"<div class="relative flex items-start">
|
||||
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-sm text-inverted ring ring-inset ring-accented focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||
"<label class="relative flex items-start flex-row">
|
||||
<div class="flex items-center h-5"><button 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" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
<div class="ms-2 text-sm"><label for="v-0" class="block font-medium text-default">Label</label>
|
||||
<div class="w-full ms-2 text-sm">
|
||||
<p for="v-0" class="block font-medium text-default">Label</p>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</div>"
|
||||
</label>"
|
||||
`;
|
||||
|
||||
exports[`Checkbox > renders with label slot correctly 1`] = `
|
||||
"<div class="relative flex items-start">
|
||||
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-sm text-inverted ring ring-inset ring-accented focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||
"<label class="relative flex items-start flex-row">
|
||||
<div class="flex items-center h-5"><button 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" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
<div class="ms-2 text-sm"><label for="v-0" class="block font-medium text-default">Label slot</label>
|
||||
<div class="w-full ms-2 text-sm">
|
||||
<p for="v-0" class="block font-medium text-default">Label slot</p>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</div>"
|
||||
</label>"
|
||||
`;
|
||||
|
||||
exports[`Checkbox > renders with modelValue correctly 1`] = `
|
||||
"<div class="relative flex items-start">
|
||||
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-sm text-inverted ring-inset focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4 ring-2 ring-primary bg-primary" id="v-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-full" data-state="checked" style="pointer-events: none;" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
"<label class="relative flex items-start flex-row">
|
||||
<div class="flex items-center h-5"><button 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" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span data-state="checked" style="pointer-events: none;" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-full" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
<!---->
|
||||
</button></div>
|
||||
<!--v-if-->
|
||||
</label>"
|
||||
`;
|
||||
|
||||
exports[`Checkbox > renders with name correctly 1`] = `
|
||||
"<label class="relative flex items-start flex-row">
|
||||
<div class="flex items-center h-5"><button 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" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
<!--v-if-->
|
||||
</label>"
|
||||
`;
|
||||
|
||||
exports[`Checkbox > renders with neutral variant card correctly 1`] = `
|
||||
"<label class="relative flex items-start border border-muted rounded-lg flex-row p-3.5 has-data-[state=checked]:border-inverted">
|
||||
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted size-4" id="v-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
<!--v-if-->
|
||||
</label>"
|
||||
`;
|
||||
|
||||
exports[`Checkbox > renders with neutral variant list correctly 1`] = `
|
||||
"<div class="relative flex items-start flex-row">
|
||||
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted size-4" id="v-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
<!--v-if-->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`Checkbox > renders with name correctly 1`] = `
|
||||
"<div class="relative flex items-start">
|
||||
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-sm text-inverted ring ring-inset ring-accented focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||
exports[`Checkbox > renders with primary variant card correctly 1`] = `
|
||||
"<label class="relative flex items-start border border-muted rounded-lg flex-row p-3.5 has-data-[state=checked]:border-primary">
|
||||
<div class="flex items-center h-5"><button 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" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
<!--v-if-->
|
||||
</label>"
|
||||
`;
|
||||
|
||||
exports[`Checkbox > renders with primary variant list correctly 1`] = `
|
||||
"<div class="relative flex items-start flex-row">
|
||||
<div class="flex items-center h-5"><button 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" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
@@ -164,83 +229,84 @@ exports[`Checkbox > renders with name correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Checkbox > renders with required correctly 1`] = `
|
||||
"<div class="relative flex items-start">
|
||||
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-sm text-inverted ring ring-inset ring-accented focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="true" data-state="unchecked">
|
||||
"<label class="relative flex items-start flex-row">
|
||||
<div class="flex items-center h-5"><button 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" role="checkbox" type="button" aria-checked="false" aria-required="true" data-state="unchecked">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
<div class="ms-2 text-sm"><label for="v-0" class="block font-medium text-default after:content-['*'] after:ms-0.5 after:text-error">Label</label>
|
||||
<div class="w-full ms-2 text-sm">
|
||||
<p for="v-0" class="block font-medium text-default after:content-['*'] after:ms-0.5 after:text-error">Label</p>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</div>"
|
||||
</label>"
|
||||
`;
|
||||
|
||||
exports[`Checkbox > renders with size lg correctly 1`] = `
|
||||
"<div class="relative flex items-start">
|
||||
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-sm text-inverted ring ring-inset ring-accented focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4.5" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||
"<label class="relative flex items-start flex-row">
|
||||
<div class="flex items-center h-5"><button 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.5" id="v-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
<!--v-if-->
|
||||
</div>"
|
||||
</label>"
|
||||
`;
|
||||
|
||||
exports[`Checkbox > renders with size md correctly 1`] = `
|
||||
"<div class="relative flex items-start">
|
||||
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-sm text-inverted ring ring-inset ring-accented focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||
"<label class="relative flex items-start flex-row">
|
||||
<div class="flex items-center h-5"><button 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" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
<!--v-if-->
|
||||
</div>"
|
||||
</label>"
|
||||
`;
|
||||
|
||||
exports[`Checkbox > renders with size sm correctly 1`] = `
|
||||
"<div class="relative flex items-start">
|
||||
<div class="flex items-center h-4"><button class="shrink-0 flex items-center justify-center rounded-sm text-inverted ring ring-inset ring-accented focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-3.5" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||
"<label class="relative flex items-start flex-row">
|
||||
<div class="flex items-center h-4"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-3.5" id="v-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
<!--v-if-->
|
||||
</div>"
|
||||
</label>"
|
||||
`;
|
||||
|
||||
exports[`Checkbox > renders with size xl correctly 1`] = `
|
||||
"<div class="relative flex items-start">
|
||||
<div class="flex items-center h-6"><button class="shrink-0 flex items-center justify-center rounded-sm text-inverted ring ring-inset ring-accented focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-5" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||
"<label class="relative flex items-start flex-row">
|
||||
<div class="flex items-center h-6"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-5" id="v-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
<!--v-if-->
|
||||
</div>"
|
||||
</label>"
|
||||
`;
|
||||
|
||||
exports[`Checkbox > renders with size xs correctly 1`] = `
|
||||
"<div class="relative flex items-start">
|
||||
<div class="flex items-center h-4"><button class="shrink-0 flex items-center justify-center rounded-sm text-inverted ring ring-inset ring-accented focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-3" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||
"<label class="relative flex items-start flex-row">
|
||||
<div class="flex items-center h-4"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-3" id="v-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
<!--v-if-->
|
||||
</div>"
|
||||
</label>"
|
||||
`;
|
||||
|
||||
exports[`Checkbox > renders with ui correctly 1`] = `
|
||||
"<div class="relative flex items-start">
|
||||
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-sm text-inverted ring ring-inset ring-accented focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||
"<label class="relative flex items-start flex-row">
|
||||
<div class="flex items-center h-5"><button 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" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
<!--v-if-->
|
||||
</div>"
|
||||
</label>"
|
||||
`;
|
||||
|
||||
exports[`Checkbox > renders with value correctly 1`] = `
|
||||
"<div class="relative flex items-start">
|
||||
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-sm text-inverted ring ring-inset ring-accented focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||
"<label class="relative flex items-start flex-row">
|
||||
<div class="flex items-center h-5"><button 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" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
<!--v-if-->
|
||||
</div>"
|
||||
</label>"
|
||||
`;
|
||||
|
||||
@@ -1,161 +1,226 @@
|
||||
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
|
||||
|
||||
exports[`Checkbox > renders with ariaLabel correctly 1`] = `
|
||||
"<div class="relative flex items-start">
|
||||
<div class="flex items-center h-5"><button aria-label="Aria label" class="shrink-0 flex items-center justify-center rounded-sm text-inverted ring ring-inset ring-accented focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||
"<label class="relative flex items-start flex-row">
|
||||
<div class="flex items-center h-5"><button aria-label="Aria label" 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" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
<!--v-if-->
|
||||
</div>"
|
||||
</label>"
|
||||
`;
|
||||
|
||||
exports[`Checkbox > renders with as correctly 1`] = `
|
||||
"<section class="relative flex items-start">
|
||||
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-sm text-inverted ring ring-inset ring-accented focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||
"<label class="relative flex items-start flex-row">
|
||||
<div class="flex items-center h-5"><button 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" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
<!--v-if-->
|
||||
</section>"
|
||||
</label>"
|
||||
`;
|
||||
|
||||
exports[`Checkbox > renders with class correctly 1`] = `
|
||||
"<div class="relative items-start inline-flex">
|
||||
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-sm text-inverted ring ring-inset ring-accented focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||
"<label class="relative items-start flex-row inline-flex">
|
||||
<div class="flex items-center h-5"><button 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" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
<!--v-if-->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`Checkbox > renders with color neutral correctly 1`] = `
|
||||
"<div class="relative flex items-start">
|
||||
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-sm text-inverted ring-inset focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted size-4 ring-2 ring-inverted bg-inverted" id="v-0-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true" style="pointer-events: none;" data-state="checked"></span>
|
||||
<!---->
|
||||
</button></div>
|
||||
<!--v-if-->
|
||||
</div>"
|
||||
</label>"
|
||||
`;
|
||||
|
||||
exports[`Checkbox > renders with defaultValue correctly 1`] = `
|
||||
"<div class="relative flex items-start">
|
||||
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-sm text-inverted ring-inset focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4 ring-2 ring-primary bg-primary" id="v-0-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true" style="pointer-events: none;" data-state="checked"></span>
|
||||
"<label class="relative flex items-start flex-row">
|
||||
<div class="flex items-center h-5"><button 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" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span data-state="checked" style="pointer-events: none;" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true"></span></span>
|
||||
<!---->
|
||||
</button></div>
|
||||
<!--v-if-->
|
||||
</div>"
|
||||
</label>"
|
||||
`;
|
||||
|
||||
exports[`Checkbox > renders with description correctly 1`] = `
|
||||
"<div class="relative flex items-start">
|
||||
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-sm text-inverted ring ring-inset ring-accented focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||
"<label class="relative flex items-start flex-row">
|
||||
<div class="flex items-center h-5"><button 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" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
<div class="ms-2 text-sm"><label for="v-0-0" class="block font-medium text-default">Label</label>
|
||||
<div class="w-full ms-2 text-sm">
|
||||
<p for="v-0-0" class="block font-medium text-default">Label</p>
|
||||
<p class="text-muted">Description</p>
|
||||
</div>
|
||||
</div>"
|
||||
</label>"
|
||||
`;
|
||||
|
||||
exports[`Checkbox > renders with description slot correctly 1`] = `
|
||||
"<div class="relative flex items-start">
|
||||
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-sm text-inverted ring ring-inset ring-accented focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||
"<label class="relative flex items-start flex-row">
|
||||
<div class="flex items-center h-5"><button 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" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
<div class="ms-2 text-sm"><label for="v-0-0" class="block font-medium text-default">Description slot</label>
|
||||
<div class="w-full ms-2 text-sm">
|
||||
<p for="v-0-0" class="block font-medium text-default">Description slot</p>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</div>"
|
||||
</label>"
|
||||
`;
|
||||
|
||||
exports[`Checkbox > renders with disabled correctly 1`] = `
|
||||
"<div class="relative flex items-start">
|
||||
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-sm text-inverted ring ring-inset ring-accented focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4 cursor-not-allowed opacity-75" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-disabled="" disabled="">
|
||||
"<label class="relative flex items-start flex-row">
|
||||
<div class="flex items-center h-5"><button 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 cursor-not-allowed opacity-75" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-disabled="" disabled="">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
<!--v-if-->
|
||||
</div>"
|
||||
</label>"
|
||||
`;
|
||||
|
||||
exports[`Checkbox > renders with icon correctly 1`] = `
|
||||
"<div class="relative flex items-start">
|
||||
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-sm text-inverted ring ring-inset ring-accented focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||
"<label class="relative flex items-start flex-row">
|
||||
<div class="flex items-center h-5"><button 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" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
<!--v-if-->
|
||||
</div>"
|
||||
</label>"
|
||||
`;
|
||||
|
||||
exports[`Checkbox > renders with id correctly 1`] = `
|
||||
"<div class="relative flex items-start">
|
||||
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-sm text-inverted ring ring-inset ring-accented focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="id" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||
"<label class="relative flex items-start flex-row">
|
||||
<div class="flex items-center h-5"><button 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="id" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
<!--v-if-->
|
||||
</div>"
|
||||
</label>"
|
||||
`;
|
||||
|
||||
exports[`Checkbox > renders with indeterminate correctly 1`] = `
|
||||
"<div class="relative flex items-start">
|
||||
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-sm text-inverted ring-inset focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4 ring-2 ring-primary bg-primary" id="v-0-0" role="checkbox" type="button" aria-checked="mixed" aria-required="false" data-state="indeterminate"><span class="iconify i-lucide:minus shrink-0 size-full" aria-hidden="true" style="pointer-events: none;" data-state="indeterminate"></span>
|
||||
"<label class="relative flex items-start flex-row">
|
||||
<div class="flex items-center h-5"><button 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" role="checkbox" type="button" aria-checked="mixed" aria-required="false" data-state="indeterminate"><span data-state="indeterminate" style="pointer-events: none;" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:minus shrink-0 size-full" aria-hidden="true"></span></span>
|
||||
<!---->
|
||||
</button></div>
|
||||
<!--v-if-->
|
||||
</div>"
|
||||
</label>"
|
||||
`;
|
||||
|
||||
exports[`Checkbox > renders with indeterminateIcon correctly 1`] = `
|
||||
"<div class="relative flex items-start">
|
||||
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-sm text-inverted ring-inset focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4 ring-2 ring-primary bg-primary" id="v-0-0" role="checkbox" type="button" aria-checked="mixed" aria-required="false" data-state="indeterminate"><span class="iconify i-lucide:trash shrink-0 size-full" aria-hidden="true" style="pointer-events: none;" data-state="indeterminate"></span>
|
||||
"<label class="relative flex items-start flex-row">
|
||||
<div class="flex items-center h-5"><button 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" role="checkbox" type="button" aria-checked="mixed" aria-required="false" data-state="indeterminate"><span data-state="indeterminate" style="pointer-events: none;" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:trash shrink-0 size-full" aria-hidden="true"></span></span>
|
||||
<!---->
|
||||
</button></div>
|
||||
<!--v-if-->
|
||||
</div>"
|
||||
</label>"
|
||||
`;
|
||||
|
||||
exports[`Checkbox > renders with indicator end correctly 1`] = `
|
||||
"<label class="relative flex items-start flex-row-reverse">
|
||||
<div class="flex items-center h-5"><button 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" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
<!--v-if-->
|
||||
</label>"
|
||||
`;
|
||||
|
||||
exports[`Checkbox > renders with indicator hidden correctly 1`] = `
|
||||
"<label class="relative flex items-start">
|
||||
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary sr-only size-4" id="v-0-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
<!--v-if-->
|
||||
</label>"
|
||||
`;
|
||||
|
||||
exports[`Checkbox > renders with indicator start correctly 1`] = `
|
||||
"<label class="relative flex items-start flex-row">
|
||||
<div class="flex items-center h-5"><button 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" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
<!--v-if-->
|
||||
</label>"
|
||||
`;
|
||||
|
||||
exports[`Checkbox > renders with label correctly 1`] = `
|
||||
"<div class="relative flex items-start">
|
||||
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-sm text-inverted ring ring-inset ring-accented focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||
"<label class="relative flex items-start flex-row">
|
||||
<div class="flex items-center h-5"><button 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" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
<div class="ms-2 text-sm"><label for="v-0-0" class="block font-medium text-default">Label</label>
|
||||
<div class="w-full ms-2 text-sm">
|
||||
<p for="v-0-0" class="block font-medium text-default">Label</p>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</div>"
|
||||
</label>"
|
||||
`;
|
||||
|
||||
exports[`Checkbox > renders with label slot correctly 1`] = `
|
||||
"<div class="relative flex items-start">
|
||||
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-sm text-inverted ring ring-inset ring-accented focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||
"<label class="relative flex items-start flex-row">
|
||||
<div class="flex items-center h-5"><button 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" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
<div class="ms-2 text-sm"><label for="v-0-0" class="block font-medium text-default">Label slot</label>
|
||||
<div class="w-full ms-2 text-sm">
|
||||
<p for="v-0-0" class="block font-medium text-default">Label slot</p>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</div>"
|
||||
</label>"
|
||||
`;
|
||||
|
||||
exports[`Checkbox > renders with modelValue correctly 1`] = `
|
||||
"<div class="relative flex items-start">
|
||||
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-sm text-inverted ring-inset focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4 ring-2 ring-primary bg-primary" id="v-0-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true" style="pointer-events: none;" data-state="checked"></span>
|
||||
"<label class="relative flex items-start flex-row">
|
||||
<div class="flex items-center h-5"><button 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" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span data-state="checked" style="pointer-events: none;" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true"></span></span>
|
||||
<!---->
|
||||
</button></div>
|
||||
<!--v-if-->
|
||||
</label>"
|
||||
`;
|
||||
|
||||
exports[`Checkbox > renders with name correctly 1`] = `
|
||||
"<label class="relative flex items-start flex-row">
|
||||
<div class="flex items-center h-5"><button 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" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
<!--v-if-->
|
||||
</label>"
|
||||
`;
|
||||
|
||||
exports[`Checkbox > renders with neutral variant card correctly 1`] = `
|
||||
"<label class="relative flex items-start border border-muted rounded-lg flex-row p-3.5 has-data-[state=checked]:border-inverted">
|
||||
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted size-4" id="v-0-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
<!--v-if-->
|
||||
</label>"
|
||||
`;
|
||||
|
||||
exports[`Checkbox > renders with neutral variant list correctly 1`] = `
|
||||
"<div class="relative flex items-start flex-row">
|
||||
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted size-4" id="v-0-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
<!--v-if-->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`Checkbox > renders with name correctly 1`] = `
|
||||
"<div class="relative flex items-start">
|
||||
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-sm text-inverted ring ring-inset ring-accented focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||
exports[`Checkbox > renders with primary variant card correctly 1`] = `
|
||||
"<label class="relative flex items-start border border-muted rounded-lg flex-row p-3.5 has-data-[state=checked]:border-primary">
|
||||
<div class="flex items-center h-5"><button 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" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
<!--v-if-->
|
||||
</label>"
|
||||
`;
|
||||
|
||||
exports[`Checkbox > renders with primary variant list correctly 1`] = `
|
||||
"<div class="relative flex items-start flex-row">
|
||||
<div class="flex items-center h-5"><button 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" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
@@ -164,83 +229,84 @@ exports[`Checkbox > renders with name correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Checkbox > renders with required correctly 1`] = `
|
||||
"<div class="relative flex items-start">
|
||||
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-sm text-inverted ring ring-inset ring-accented focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="true" data-state="unchecked">
|
||||
"<label class="relative flex items-start flex-row">
|
||||
<div class="flex items-center h-5"><button 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" role="checkbox" type="button" aria-checked="false" aria-required="true" data-state="unchecked">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
<div class="ms-2 text-sm"><label for="v-0-0" class="block font-medium text-default after:content-['*'] after:ms-0.5 after:text-error">Label</label>
|
||||
<div class="w-full ms-2 text-sm">
|
||||
<p for="v-0-0" class="block font-medium text-default after:content-['*'] after:ms-0.5 after:text-error">Label</p>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</div>"
|
||||
</label>"
|
||||
`;
|
||||
|
||||
exports[`Checkbox > renders with size lg correctly 1`] = `
|
||||
"<div class="relative flex items-start">
|
||||
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-sm text-inverted ring ring-inset ring-accented focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4.5" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||
"<label class="relative flex items-start flex-row">
|
||||
<div class="flex items-center h-5"><button 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.5" id="v-0-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
<!--v-if-->
|
||||
</div>"
|
||||
</label>"
|
||||
`;
|
||||
|
||||
exports[`Checkbox > renders with size md correctly 1`] = `
|
||||
"<div class="relative flex items-start">
|
||||
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-sm text-inverted ring ring-inset ring-accented focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||
"<label class="relative flex items-start flex-row">
|
||||
<div class="flex items-center h-5"><button 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" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
<!--v-if-->
|
||||
</div>"
|
||||
</label>"
|
||||
`;
|
||||
|
||||
exports[`Checkbox > renders with size sm correctly 1`] = `
|
||||
"<div class="relative flex items-start">
|
||||
<div class="flex items-center h-4"><button class="shrink-0 flex items-center justify-center rounded-sm text-inverted ring ring-inset ring-accented focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-3.5" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||
"<label class="relative flex items-start flex-row">
|
||||
<div class="flex items-center h-4"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-3.5" id="v-0-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
<!--v-if-->
|
||||
</div>"
|
||||
</label>"
|
||||
`;
|
||||
|
||||
exports[`Checkbox > renders with size xl correctly 1`] = `
|
||||
"<div class="relative flex items-start">
|
||||
<div class="flex items-center h-6"><button class="shrink-0 flex items-center justify-center rounded-sm text-inverted ring ring-inset ring-accented focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-5" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||
"<label class="relative flex items-start flex-row">
|
||||
<div class="flex items-center h-6"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-5" id="v-0-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
<!--v-if-->
|
||||
</div>"
|
||||
</label>"
|
||||
`;
|
||||
|
||||
exports[`Checkbox > renders with size xs correctly 1`] = `
|
||||
"<div class="relative flex items-start">
|
||||
<div class="flex items-center h-4"><button class="shrink-0 flex items-center justify-center rounded-sm text-inverted ring ring-inset ring-accented focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-3" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||
"<label class="relative flex items-start flex-row">
|
||||
<div class="flex items-center h-4"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-3" id="v-0-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
<!--v-if-->
|
||||
</div>"
|
||||
</label>"
|
||||
`;
|
||||
|
||||
exports[`Checkbox > renders with ui correctly 1`] = `
|
||||
"<div class="relative flex items-start">
|
||||
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-sm text-inverted ring ring-inset ring-accented focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||
"<label class="relative flex items-start flex-row">
|
||||
<div class="flex items-center h-5"><button 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" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
<!--v-if-->
|
||||
</div>"
|
||||
</label>"
|
||||
`;
|
||||
|
||||
exports[`Checkbox > renders with value correctly 1`] = `
|
||||
"<div class="relative flex items-start">
|
||||
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-sm text-inverted ring ring-inset ring-accented focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||
"<label class="relative flex items-start flex-row">
|
||||
<div class="flex items-center h-5"><button 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" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
<!--v-if-->
|
||||
</div>"
|
||||
</label>"
|
||||
`;
|
||||
|
||||
1065
test/components/__snapshots__/CheckboxGroup-vue.spec.ts.snap
Normal file
1065
test/components/__snapshots__/CheckboxGroup-vue.spec.ts.snap
Normal file
File diff suppressed because it is too large
Load Diff
1065
test/components/__snapshots__/CheckboxGroup.spec.ts.snap
Normal file
1065
test/components/__snapshots__/CheckboxGroup.spec.ts.snap
Normal file
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -271,15 +271,13 @@ exports[`Table > renders with columns correctly 1`] = `
|
||||
<!--v-if-->
|
||||
<thead class="relative [&>tr]:after:absolute [&>tr]:after:inset-x-0 [&>tr]:after:bottom-0 [&>tr]:after:h-px [&>tr]:after:bg-(--ui-border-accented)">
|
||||
<tr class="data-[selected=true]:bg-elevated/50">
|
||||
<th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">
|
||||
<div class="relative flex items-start">
|
||||
<div class="flex items-center h-5"><button arialabel="Select all" class="shrink-0 flex items-center justify-center rounded-sm text-inverted ring ring-inset ring-accented focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||
<th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0"><label class="relative flex items-start flex-row">
|
||||
<div class="flex items-center h-5"><button arialabel="Select all" 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" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</th>
|
||||
</label></th>
|
||||
<th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">#</th>
|
||||
<th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Date</th>
|
||||
<th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Status</th>
|
||||
@@ -296,15 +294,13 @@ exports[`Table > renders with columns correctly 1`] = `
|
||||
</thead>
|
||||
<tbody class="divide-y divide-default [&>tr]:data-[selectable=true]:hover:bg-elevated/50 [&>tr]:data-[selectable=true]:focus-visible:outline-primary">
|
||||
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">
|
||||
<div class="relative flex items-start">
|
||||
<div class="flex items-center h-5"><button arialabel="Select row" class="shrink-0 flex items-center justify-center rounded-sm text-inverted ring ring-inset ring-accented focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0"><label class="relative flex items-start flex-row">
|
||||
<div class="flex items-center h-5"><button arialabel="Select row" 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-1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</td>
|
||||
</label></td>
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">#m5gr84i9</td>
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">Invalid Date</td>
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 capitalize"><!--v-if-->success<!--v-if--></span></td>
|
||||
@@ -327,15 +323,13 @@ exports[`Table > renders with columns correctly 1`] = `
|
||||
</tr>
|
||||
<!--v-if-->
|
||||
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">
|
||||
<div class="relative flex items-start">
|
||||
<div class="flex items-center h-5"><button arialabel="Select row" class="shrink-0 flex items-center justify-center rounded-sm text-inverted ring ring-inset ring-accented focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0"><label class="relative flex items-start flex-row">
|
||||
<div class="flex items-center h-5"><button arialabel="Select row" 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-3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</td>
|
||||
</label></td>
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">#3u1reuv4</td>
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">Invalid Date</td>
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 capitalize"><!--v-if-->success<!--v-if--></span></td>
|
||||
@@ -358,15 +352,13 @@ exports[`Table > renders with columns correctly 1`] = `
|
||||
</tr>
|
||||
<!--v-if-->
|
||||
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">
|
||||
<div class="relative flex items-start">
|
||||
<div class="flex items-center h-5"><button arialabel="Select row" class="shrink-0 flex items-center justify-center rounded-sm text-inverted ring ring-inset ring-accented focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-5" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0"><label class="relative flex items-start flex-row">
|
||||
<div class="flex items-center h-5"><button arialabel="Select row" 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-5" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</td>
|
||||
</label></td>
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">#derv1ws0</td>
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">Invalid Date</td>
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 capitalize"><!--v-if-->processing<!--v-if--></span></td>
|
||||
@@ -389,15 +381,13 @@ exports[`Table > renders with columns correctly 1`] = `
|
||||
</tr>
|
||||
<!--v-if-->
|
||||
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">
|
||||
<div class="relative flex items-start">
|
||||
<div class="flex items-center h-5"><button arialabel="Select row" class="shrink-0 flex items-center justify-center rounded-sm text-inverted ring ring-inset ring-accented focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-7" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0"><label class="relative flex items-start flex-row">
|
||||
<div class="flex items-center h-5"><button arialabel="Select row" 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-7" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</td>
|
||||
</label></td>
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">#5kma53ae</td>
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">Invalid Date</td>
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 capitalize"><!--v-if-->success<!--v-if--></span></td>
|
||||
@@ -420,15 +410,13 @@ exports[`Table > renders with columns correctly 1`] = `
|
||||
</tr>
|
||||
<!--v-if-->
|
||||
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">
|
||||
<div class="relative flex items-start">
|
||||
<div class="flex items-center h-5"><button arialabel="Select row" class="shrink-0 flex items-center justify-center rounded-sm text-inverted ring ring-inset ring-accented focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-9" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0"><label class="relative flex items-start flex-row">
|
||||
<div class="flex items-center h-5"><button arialabel="Select row" 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-9" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</td>
|
||||
</label></td>
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">#bhqecj4p</td>
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">Invalid Date</td>
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-error/10 text-error ring ring-inset ring-error/25 capitalize"><!--v-if-->failed<!--v-if--></span></td>
|
||||
@@ -530,15 +518,13 @@ exports[`Table > renders with empty slot correctly 1`] = `
|
||||
<!--v-if-->
|
||||
<thead class="relative [&>tr]:after:absolute [&>tr]:after:inset-x-0 [&>tr]:after:bottom-0 [&>tr]:after:h-px [&>tr]:after:bg-(--ui-border-accented)">
|
||||
<tr class="data-[selected=true]:bg-elevated/50">
|
||||
<th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">
|
||||
<div class="relative flex items-start">
|
||||
<div class="flex items-center h-5"><button arialabel="Select all" class="shrink-0 flex items-center justify-center rounded-sm text-inverted ring ring-inset ring-accented focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||
<th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0"><label class="relative flex items-start flex-row">
|
||||
<div class="flex items-center h-5"><button arialabel="Select all" 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" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</th>
|
||||
</label></th>
|
||||
<th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">#</th>
|
||||
<th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Date</th>
|
||||
<th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Status</th>
|
||||
@@ -1310,15 +1296,13 @@ exports[`Table > renders with loading slot correctly 1`] = `
|
||||
<!--v-if-->
|
||||
<thead class="relative [&>tr]:after:absolute [&>tr]:after:inset-x-0 [&>tr]:after:bottom-0 [&>tr]:after:h-px [&>tr]:after:bg-(--ui-border-accented) after:absolute after:bottom-0 after:inset-x-0 after:h-px after:bg-primary after:animate-[carousel_2s_ease-in-out_infinite] rtl:after:animate-[carousel-rtl_2s_ease-in-out_infinite]">
|
||||
<tr class="data-[selected=true]:bg-elevated/50">
|
||||
<th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">
|
||||
<div class="relative flex items-start">
|
||||
<div class="flex items-center h-5"><button arialabel="Select all" class="shrink-0 flex items-center justify-center rounded-sm text-inverted ring ring-inset ring-accented focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||
<th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0"><label class="relative flex items-start flex-row">
|
||||
<div class="flex items-center h-5"><button arialabel="Select all" 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" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</th>
|
||||
</label></th>
|
||||
<th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">#</th>
|
||||
<th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Date</th>
|
||||
<th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Status</th>
|
||||
|
||||
@@ -271,15 +271,13 @@ exports[`Table > renders with columns correctly 1`] = `
|
||||
<!--v-if-->
|
||||
<thead class="relative [&>tr]:after:absolute [&>tr]:after:inset-x-0 [&>tr]:after:bottom-0 [&>tr]:after:h-px [&>tr]:after:bg-(--ui-border-accented)">
|
||||
<tr class="data-[selected=true]:bg-elevated/50">
|
||||
<th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">
|
||||
<div class="relative flex items-start">
|
||||
<div class="flex items-center h-5"><button arialabel="Select all" class="shrink-0 flex items-center justify-center rounded-sm text-inverted ring ring-inset ring-accented focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||
<th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0"><label class="relative flex items-start flex-row">
|
||||
<div class="flex items-center h-5"><button arialabel="Select all" 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-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</th>
|
||||
</label></th>
|
||||
<th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">#</th>
|
||||
<th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Date</th>
|
||||
<th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Status</th>
|
||||
@@ -296,15 +294,13 @@ exports[`Table > renders with columns correctly 1`] = `
|
||||
</thead>
|
||||
<tbody class="divide-y divide-default [&>tr]:data-[selectable=true]:hover:bg-elevated/50 [&>tr]:data-[selectable=true]:focus-visible:outline-primary">
|
||||
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">
|
||||
<div class="relative flex items-start">
|
||||
<div class="flex items-center h-5"><button arialabel="Select row" class="shrink-0 flex items-center justify-center rounded-sm text-inverted ring ring-inset ring-accented 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">
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0"><label class="relative flex items-start flex-row">
|
||||
<div class="flex items-center h-5"><button arialabel="Select row" 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">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</td>
|
||||
</label></td>
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">#m5gr84i9</td>
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">Invalid Date</td>
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 capitalize"><!--v-if-->success<!--v-if--></span></td>
|
||||
@@ -327,15 +323,13 @@ exports[`Table > renders with columns correctly 1`] = `
|
||||
</tr>
|
||||
<!--v-if-->
|
||||
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">
|
||||
<div class="relative flex items-start">
|
||||
<div class="flex items-center h-5"><button arialabel="Select row" class="shrink-0 flex items-center justify-center rounded-sm text-inverted ring ring-inset ring-accented 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">
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0"><label class="relative flex items-start flex-row">
|
||||
<div class="flex items-center h-5"><button arialabel="Select row" 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">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</td>
|
||||
</label></td>
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">#3u1reuv4</td>
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">Invalid Date</td>
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 capitalize"><!--v-if-->success<!--v-if--></span></td>
|
||||
@@ -358,15 +352,13 @@ exports[`Table > renders with columns correctly 1`] = `
|
||||
</tr>
|
||||
<!--v-if-->
|
||||
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">
|
||||
<div class="relative flex items-start">
|
||||
<div class="flex items-center h-5"><button arialabel="Select row" class="shrink-0 flex items-center justify-center rounded-sm text-inverted ring ring-inset ring-accented focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0-5" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0"><label class="relative flex items-start flex-row">
|
||||
<div class="flex items-center h-5"><button arialabel="Select row" 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-5" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</td>
|
||||
</label></td>
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">#derv1ws0</td>
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">Invalid Date</td>
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 capitalize"><!--v-if-->processing<!--v-if--></span></td>
|
||||
@@ -389,15 +381,13 @@ exports[`Table > renders with columns correctly 1`] = `
|
||||
</tr>
|
||||
<!--v-if-->
|
||||
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">
|
||||
<div class="relative flex items-start">
|
||||
<div class="flex items-center h-5"><button arialabel="Select row" class="shrink-0 flex items-center justify-center rounded-sm text-inverted ring ring-inset ring-accented focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0-7" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0"><label class="relative flex items-start flex-row">
|
||||
<div class="flex items-center h-5"><button arialabel="Select row" 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-7" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</td>
|
||||
</label></td>
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">#5kma53ae</td>
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">Invalid Date</td>
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 capitalize"><!--v-if-->success<!--v-if--></span></td>
|
||||
@@ -420,15 +410,13 @@ exports[`Table > renders with columns correctly 1`] = `
|
||||
</tr>
|
||||
<!--v-if-->
|
||||
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">
|
||||
<div class="relative flex items-start">
|
||||
<div class="flex items-center h-5"><button arialabel="Select row" class="shrink-0 flex items-center justify-center rounded-sm text-inverted ring ring-inset ring-accented focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0-9" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0"><label class="relative flex items-start flex-row">
|
||||
<div class="flex items-center h-5"><button arialabel="Select row" 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-9" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</td>
|
||||
</label></td>
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">#bhqecj4p</td>
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">Invalid Date</td>
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-error/10 text-error ring ring-inset ring-error/25 capitalize"><!--v-if-->failed<!--v-if--></span></td>
|
||||
@@ -530,15 +518,13 @@ exports[`Table > renders with empty slot correctly 1`] = `
|
||||
<!--v-if-->
|
||||
<thead class="relative [&>tr]:after:absolute [&>tr]:after:inset-x-0 [&>tr]:after:bottom-0 [&>tr]:after:h-px [&>tr]:after:bg-(--ui-border-accented)">
|
||||
<tr class="data-[selected=true]:bg-elevated/50">
|
||||
<th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">
|
||||
<div class="relative flex items-start">
|
||||
<div class="flex items-center h-5"><button arialabel="Select all" class="shrink-0 flex items-center justify-center rounded-sm text-inverted ring ring-inset ring-accented focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||
<th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0"><label class="relative flex items-start flex-row">
|
||||
<div class="flex items-center h-5"><button arialabel="Select all" 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-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</th>
|
||||
</label></th>
|
||||
<th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">#</th>
|
||||
<th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Date</th>
|
||||
<th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Status</th>
|
||||
@@ -1310,15 +1296,13 @@ exports[`Table > renders with loading slot correctly 1`] = `
|
||||
<!--v-if-->
|
||||
<thead class="relative [&>tr]:after:absolute [&>tr]:after:inset-x-0 [&>tr]:after:bottom-0 [&>tr]:after:h-px [&>tr]:after:bg-(--ui-border-accented) after:absolute after:bottom-0 after:inset-x-0 after:h-px after:bg-primary after:animate-[carousel_2s_ease-in-out_infinite] rtl:after:animate-[carousel-rtl_2s_ease-in-out_infinite]">
|
||||
<tr class="data-[selected=true]:bg-elevated/50">
|
||||
<th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">
|
||||
<div class="relative flex items-start">
|
||||
<div class="flex items-center h-5"><button arialabel="Select all" class="shrink-0 flex items-center justify-center rounded-sm text-inverted ring ring-inset ring-accented focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||
<th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0"><label class="relative flex items-start flex-row">
|
||||
<div class="flex items-center h-5"><button arialabel="Select all" 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-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</th>
|
||||
</label></th>
|
||||
<th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">#</th>
|
||||
<th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Date</th>
|
||||
<th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Status</th>
|
||||
|
||||
Reference in New Issue
Block a user