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

Merge branch 'v3' into pr/1945

Browse Source
This commit is contained in:
Benjamin Canac
2025-07-17 10:56:15 +02:00
parent d12160927e 5db3b0f98c
commit a2b84d7f62
11 changed files with 104 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
docs/content/1.getting-started/4.icons/1.nuxt.md
View File

@@ -87,7 +87,7 @@ Read more about this in the `@nuxt/icon` documentation.
You can use local SVG files to create a custom Iconify collection. You can use local SVG files to create a custom Iconify collection.
For example, place your icons' SVG files under a folder of your choice, for example, `./assets/icons`: For example, place your icons' SVG files under a folder of your choice, for example, `./app/assets/icons`:
```bash ```bash
assets/icons assets/icons
@@ -104,7 +104,7 @@ export default defineNuxtConfig({
icon: { icon: {
customCollections: [{ customCollections: [{
prefix: 'custom', prefix: 'custom',
dir: './assets/icons' dir: './app/assets/icons'
}] }]
} }
}) })

2
src/runtime/components/FormField.vue
View File

@@ -121,7 +121,7 @@ provide(formFieldInjectionKey, computed(() => ({
{{ error }} {{ error }}
</slot> </slot>
</div> </div>
<div v-else-if="help || !!slots.help" :class="ui.help({ class: props.ui?.help })"> <div v-else-if="help || !!slots.help" :id="`${ariaId}-help`" :class="ui.help({ class: props.ui?.help })">
<slot name="help" :help="help"> <slot name="help" :help="help">
{{ help }} {{ help }}
</slot> </slot>

12
src/runtime/components/InputMenu.vue
View File

@@ -128,15 +128,16 @@ export interface InputMenuProps<T extends ArrayOrNested<InputMenuItem> = ArrayOr
} }
export type InputMenuEmits<A extends ArrayOrNested<InputMenuItem>, VK extends GetItemKeys<A> | undefined, M extends boolean> = Pick<ComboboxRootEmits, 'update:open'> & { export type InputMenuEmits<A extends ArrayOrNested<InputMenuItem>, VK extends GetItemKeys<A> | undefined, M extends boolean> = Pick<ComboboxRootEmits, 'update:open'> & {
change: [payload: Event] 'change': [payload: Event]
blur: [payload: FocusEvent] 'blur': [payload: FocusEvent]
focus: [payload: FocusEvent] 'focus': [payload: FocusEvent]
create: [item: string] 'create': [item: string]
/** Event handler when highlighted element changes. */ /** Event handler when highlighted element changes. */
highlight: [payload: { 'highlight': [payload: {
ref: HTMLElement ref: HTMLElement
value: GetModelValue<A, VK, M> value: GetModelValue<A, VK, M>
} | undefined] } | undefined]
'remove-tag': [item: GetModelValue<A, VK, M>]
} & GetModelValueEmits<A, VK, M> } & GetModelValueEmits<A, VK, M>
type SlotProps<T extends InputMenuItem> = (props: { item: T, index: number }) => any type SlotProps<T extends InputMenuItem> = (props: { item: T, index: number }) => any
@@ -366,6 +367,7 @@ function onRemoveTag(event: any) {
const modelValue = props.modelValue as GetModelValue<T, VK, true> const modelValue = props.modelValue as GetModelValue<T, VK, true>
const filteredValue = modelValue.filter(value => !isEqual(value, event)) const filteredValue = modelValue.filter(value => !isEqual(value, event))
emits('update:modelValue', filteredValue as GetModelValue<T, VK, M>) emits('update:modelValue', filteredValue as GetModelValue<T, VK, M>)
emits('remove-tag', event)
onUpdate(filteredValue) onUpdate(filteredValue)
} }
} }

14
src/runtime/components/RadioGroup.vue
View File

@@ -70,7 +70,9 @@ export type RadioGroupEmits = RadioGroupRootEmits & {
change: [payload: Event] change: [payload: Event]
} }
type SlotProps<T extends RadioGroupItem> = (props: { item: T & { id: string }, modelValue?: RadioGroupValue }) => any type NormalizeItem<T extends RadioGroupItem> = Exclude<T & { id: string }, RadioGroupValue>
type SlotProps<T extends RadioGroupItem> = (props: { item: NormalizeItem<T>, modelValue?: RadioGroupValue }) => any
export interface RadioGroupSlots<T extends RadioGroupItem = RadioGroupItem> { export interface RadioGroupSlots<T extends RadioGroupItem = RadioGroupItem> {
legend(props?: {}): any legend(props?: {}): any
@@ -114,21 +116,21 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.radioGroup |
indicator: props.indicator indicator: props.indicator
})) }))
function normalizeItem(item: any) { function normalizeItem(item: T): NormalizeItem<T> {
if (item === null) { if (item === null) {
return { return {
id: `${id}:null`, id: `${id}:null`,
value: undefined, value: undefined,
label: undefined label: undefined
} } as NormalizeItem<T>
} }
if (typeof item === 'string' || typeof item === 'number') { if (typeof item === 'string' || typeof item === 'number' || typeof item === 'bigint') {
return { return {
id: `${id}:${item}`, id: `${id}:${item}`,
value: String(item), value: String(item),
label: String(item) label: String(item)
} } as NormalizeItem<T>
} }
const value = get(item, props.valueKey as string) const value = get(item, props.valueKey as string)
@@ -136,7 +138,7 @@ function normalizeItem(item: any) {
const description = get(item, props.descriptionKey as string) const description = get(item, props.descriptionKey as string)
return { return {
...item, ...(item as NormalizeItem<T>),
value, value,
label, label,
description, description,

9
src/runtime/composables/useFormField.ts
View File

@@ -89,10 +89,15 @@ export function useFormField<T>(props?: Props<T>, opts?: { bind?: boolean, defer
.filter(type => formField?.value?.[type]) .filter(type => formField?.value?.[type])
.map(type => `${formField?.value.ariaId}-${type}`) || [] .map(type => `${formField?.value.ariaId}-${type}`) || []
return { const attrs: Record<string, any> = {
'aria-describedby': descriptiveAttrs.join(' '),
'aria-invalid': !!formField?.value.error 'aria-invalid': !!formField?.value.error
} }
if (descriptiveAttrs.length > 0) {
attrs['aria-describedby'] = descriptiveAttrs.join(' ')
}
return attrs
}) })
} }
} }

20
test/components/FormField.spec.ts
View File

@@ -157,5 +157,25 @@ describe('FormField', () => {
const attr = wrapper.find('[aria-invalid=true]') const attr = wrapper.find('[aria-invalid=true]')
expect(attr.exists()).toBe(true) expect(attr.exists()).toBe(true)
}) })
test('renders id for aria describedby when help prop is provided', async () => {
const wrapper = await renderFormField({
props: { help: 'somehelp' },
inputComponent
})
const attr = wrapper.find('[id=v-0-0-help]')
expect(attr.exists()).toBe(true)
})
test('renders no id for aria describedby when no help prop is provided', async () => {
const wrapper = await renderFormField({
props: { label: 'Username', description: 'Enter your username' },
inputComponent
})
const attr = wrapper.find('[id=v-0-0-help]')
expect(attr.exists()).toBe(false)
})
}) })
}) })

7
test/components/InputMenu.spec.ts
View File

@@ -108,6 +108,13 @@ describe('InputMenu', () => {
await input.vm.$emit('update:open', false) await input.vm.$emit('update:open', false)
expect(wrapper.emitted()).toMatchObject({ blur: [[{ type: 'blur' }]] }) expect(wrapper.emitted()).toMatchObject({ blur: [[{ type: 'blur' }]] })
}) })
test('remove-tag event', async () => {
const wrapper = mount(InputMenu, { props: { modelValue: ['Option 1'], items: ['Option 1', 'Option 2'], multiple: true } })
const input = wrapper.findComponent({ name: 'TagsInputRoot' })
await input.vm.$emit('remove-tag', 'Option 1')
expect(wrapper.emitted()).toMatchObject({ 'remove-tag': [['Option 1']] })
})
}) })
describe('form integration', async () => { describe('form integration', async () => {

48
test/components/__snapshots__/Form-vue.spec.ts.snap
View File

@@ -8,7 +8,7 @@ exports[`Form > custom validation works > with error 1`] = `
<!--v-if--> <!--v-if-->
</div> </div>
<div class=""> <div class="">
<div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-describedby="" aria-invalid="false" value="bob@dylan.com"> <div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false" value="bob@dylan.com">
<!--v-if--> <!--v-if-->
<!--v-if--> <!--v-if-->
</div> </div>
@@ -21,7 +21,7 @@ exports[`Form > custom validation works > with error 1`] = `
<!--v-if--> <!--v-if-->
</div> </div>
<div class=""> <div class="">
<div class="relative inline-flex items-center"><input id="password" type="text" name="password" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-describedby="v-1-error" aria-invalid="true" value="short"> <div class="relative inline-flex items-center"><input id="password" type="text" name="password" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-invalid="true" value="short" aria-describedby="v-1-error">
<!--v-if--> <!--v-if-->
<!--v-if--> <!--v-if-->
</div> </div>
@@ -39,7 +39,7 @@ exports[`Form > custom validation works > without error 1`] = `
<!--v-if--> <!--v-if-->
</div> </div>
<div class=""> <div class="">
<div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-describedby="" aria-invalid="false" value="bob@dylan.com"> <div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false" value="bob@dylan.com">
<!--v-if--> <!--v-if-->
<!--v-if--> <!--v-if-->
</div> </div>
@@ -52,7 +52,7 @@ exports[`Form > custom validation works > without error 1`] = `
<!--v-if--> <!--v-if-->
</div> </div>
<div class=""> <div class="">
<div class="relative inline-flex items-center"><input id="password" type="text" name="password" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-describedby="" aria-invalid="false" value="validpassword"> <div class="relative inline-flex items-center"><input id="password" type="text" name="password" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false" value="validpassword">
<!--v-if--> <!--v-if-->
<!--v-if--> <!--v-if-->
</div> </div>
@@ -70,7 +70,7 @@ exports[`Form > joi validation works > with error 1`] = `
<!--v-if--> <!--v-if-->
</div> </div>
<div class=""> <div class="">
<div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-describedby="" aria-invalid="false" value="bob@dylan.com"> <div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false" value="bob@dylan.com">
<!--v-if--> <!--v-if-->
<!--v-if--> <!--v-if-->
</div> </div>
@@ -83,7 +83,7 @@ exports[`Form > joi validation works > with error 1`] = `
<!--v-if--> <!--v-if-->
</div> </div>
<div class=""> <div class="">
<div class="relative inline-flex items-center"><input id="password" type="text" name="password" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-describedby="v-1-error" aria-invalid="true" value="short"> <div class="relative inline-flex items-center"><input id="password" type="text" name="password" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-invalid="true" value="short" aria-describedby="v-1-error">
<!--v-if--> <!--v-if-->
<!--v-if--> <!--v-if-->
</div> </div>
@@ -101,7 +101,7 @@ exports[`Form > joi validation works > without error 1`] = `
<!--v-if--> <!--v-if-->
</div> </div>
<div class=""> <div class="">
<div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-describedby="" aria-invalid="false" value="bob@dylan.com"> <div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false" value="bob@dylan.com">
<!--v-if--> <!--v-if-->
<!--v-if--> <!--v-if-->
</div> </div>
@@ -114,7 +114,7 @@ exports[`Form > joi validation works > without error 1`] = `
<!--v-if--> <!--v-if-->
</div> </div>
<div class=""> <div class="">
<div class="relative inline-flex items-center"><input id="password" type="text" name="password" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-describedby="" aria-invalid="false" value="validpassword"> <div class="relative inline-flex items-center"><input id="password" type="text" name="password" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false" value="validpassword">
<!--v-if--> <!--v-if-->
<!--v-if--> <!--v-if-->
</div> </div>
@@ -136,7 +136,7 @@ exports[`Form > superstruct validation works > with error 1`] = `
<!--v-if--> <!--v-if-->
</div> </div>
<div class=""> <div class="">
<div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-describedby="" aria-invalid="false" value="bob@dylan.com"> <div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false" value="bob@dylan.com">
<!--v-if--> <!--v-if-->
<!--v-if--> <!--v-if-->
</div> </div>
@@ -149,7 +149,7 @@ exports[`Form > superstruct validation works > with error 1`] = `
<!--v-if--> <!--v-if-->
</div> </div>
<div class=""> <div class="">
<div class="relative inline-flex items-center"><input id="password" type="text" name="password" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-describedby="v-1-error" aria-invalid="true" value="short"> <div class="relative inline-flex items-center"><input id="password" type="text" name="password" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-invalid="true" value="short" aria-describedby="v-1-error">
<!--v-if--> <!--v-if-->
<!--v-if--> <!--v-if-->
</div> </div>
@@ -167,7 +167,7 @@ exports[`Form > superstruct validation works > without error 1`] = `
<!--v-if--> <!--v-if-->
</div> </div>
<div class=""> <div class="">
<div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-describedby="" aria-invalid="false" value="bob@dylan.com"> <div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false" value="bob@dylan.com">
<!--v-if--> <!--v-if-->
<!--v-if--> <!--v-if-->
</div> </div>
@@ -180,7 +180,7 @@ exports[`Form > superstruct validation works > without error 1`] = `
<!--v-if--> <!--v-if-->
</div> </div>
<div class=""> <div class="">
<div class="relative inline-flex items-center"><input id="password" type="text" name="password" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-describedby="" aria-invalid="false" value="validpassword"> <div class="relative inline-flex items-center"><input id="password" type="text" name="password" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false" value="validpassword">
<!--v-if--> <!--v-if-->
<!--v-if--> <!--v-if-->
</div> </div>
@@ -198,7 +198,7 @@ exports[`Form > valibot validation works > with error 1`] = `
<!--v-if--> <!--v-if-->
</div> </div>
<div class=""> <div class="">
<div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-describedby="" aria-invalid="false" value="bob@dylan.com"> <div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false" value="bob@dylan.com">
<!--v-if--> <!--v-if-->
<!--v-if--> <!--v-if-->
</div> </div>
@@ -211,7 +211,7 @@ exports[`Form > valibot validation works > with error 1`] = `
<!--v-if--> <!--v-if-->
</div> </div>
<div class=""> <div class="">
<div class="relative inline-flex items-center"><input id="password" type="text" name="password" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-describedby="v-1-error" aria-invalid="true" value="short"> <div class="relative inline-flex items-center"><input id="password" type="text" name="password" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-invalid="true" value="short" aria-describedby="v-1-error">
<!--v-if--> <!--v-if-->
<!--v-if--> <!--v-if-->
</div> </div>
@@ -229,7 +229,7 @@ exports[`Form > valibot validation works > without error 1`] = `
<!--v-if--> <!--v-if-->
</div> </div>
<div class=""> <div class="">
<div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-describedby="" aria-invalid="false" value="bob@dylan.com"> <div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false" value="bob@dylan.com">
<!--v-if--> <!--v-if-->
<!--v-if--> <!--v-if-->
</div> </div>
@@ -242,7 +242,7 @@ exports[`Form > valibot validation works > without error 1`] = `
<!--v-if--> <!--v-if-->
</div> </div>
<div class=""> <div class="">
<div class="relative inline-flex items-center"><input id="password" type="text" name="password" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-describedby="" aria-invalid="false" value="validpassword"> <div class="relative inline-flex items-center"><input id="password" type="text" name="password" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false" value="validpassword">
<!--v-if--> <!--v-if-->
<!--v-if--> <!--v-if-->
</div> </div>
@@ -260,7 +260,7 @@ exports[`Form > yup validation works > with error 1`] = `
<!--v-if--> <!--v-if-->
</div> </div>
<div class=""> <div class="">
<div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-describedby="" aria-invalid="false" value="bob@dylan.com"> <div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false" value="bob@dylan.com">
<!--v-if--> <!--v-if-->
<!--v-if--> <!--v-if-->
</div> </div>
@@ -273,7 +273,7 @@ exports[`Form > yup validation works > with error 1`] = `
<!--v-if--> <!--v-if-->
</div> </div>
<div class=""> <div class="">
<div class="relative inline-flex items-center"><input id="password" type="text" name="password" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-describedby="v-1-error" aria-invalid="true" value="short"> <div class="relative inline-flex items-center"><input id="password" type="text" name="password" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-invalid="true" value="short" aria-describedby="v-1-error">
<!--v-if--> <!--v-if-->
<!--v-if--> <!--v-if-->
</div> </div>
@@ -291,7 +291,7 @@ exports[`Form > yup validation works > without error 1`] = `
<!--v-if--> <!--v-if-->
</div> </div>
<div class=""> <div class="">
<div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-describedby="" aria-invalid="false" value="bob@dylan.com"> <div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false" value="bob@dylan.com">
<!--v-if--> <!--v-if-->
<!--v-if--> <!--v-if-->
</div> </div>
@@ -304,7 +304,7 @@ exports[`Form > yup validation works > without error 1`] = `
<!--v-if--> <!--v-if-->
</div> </div>
<div class=""> <div class="">
<div class="relative inline-flex items-center"><input id="password" type="text" name="password" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-describedby="" aria-invalid="false" value="validpassword"> <div class="relative inline-flex items-center"><input id="password" type="text" name="password" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false" value="validpassword">
<!--v-if--> <!--v-if-->
<!--v-if--> <!--v-if-->
</div> </div>
@@ -322,7 +322,7 @@ exports[`Form > zod validation works > with error 1`] = `
<!--v-if--> <!--v-if-->
</div> </div>
<div class=""> <div class="">
<div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-describedby="" aria-invalid="false" value="bob@dylan.com"> <div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false" value="bob@dylan.com">
<!--v-if--> <!--v-if-->
<!--v-if--> <!--v-if-->
</div> </div>
@@ -335,7 +335,7 @@ exports[`Form > zod validation works > with error 1`] = `
<!--v-if--> <!--v-if-->
</div> </div>
<div class=""> <div class="">
<div class="relative inline-flex items-center"><input id="password" type="text" name="password" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-describedby="v-1-error" aria-invalid="true" value="short"> <div class="relative inline-flex items-center"><input id="password" type="text" name="password" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-invalid="true" value="short" aria-describedby="v-1-error">
<!--v-if--> <!--v-if-->
<!--v-if--> <!--v-if-->
</div> </div>
@@ -353,7 +353,7 @@ exports[`Form > zod validation works > without error 1`] = `
<!--v-if--> <!--v-if-->
</div> </div>
<div class=""> <div class="">
<div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-describedby="" aria-invalid="false" value="bob@dylan.com"> <div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false" value="bob@dylan.com">
<!--v-if--> <!--v-if-->
<!--v-if--> <!--v-if-->
</div> </div>
@@ -366,7 +366,7 @@ exports[`Form > zod validation works > without error 1`] = `
<!--v-if--> <!--v-if-->
</div> </div>
<div class=""> <div class="">
<div class="relative inline-flex items-center"><input id="password" type="text" name="password" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-describedby="" aria-invalid="false" value="validpassword"> <div class="relative inline-flex items-center"><input id="password" type="text" name="password" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false" value="validpassword">
<!--v-if--> <!--v-if-->
<!--v-if--> <!--v-if-->
</div> </div>

48
test/components/__snapshots__/Form.spec.ts.snap
View File

@@ -8,7 +8,7 @@ exports[`Form > custom validation works > with error 1`] = `
<!--v-if--> <!--v-if-->
</div> </div>
<div class=""> <div class="">
<div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-describedby="" aria-invalid="false" value="bob@dylan.com"> <div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false" value="bob@dylan.com">
<!--v-if--> <!--v-if-->
<!--v-if--> <!--v-if-->
</div> </div>
@@ -21,7 +21,7 @@ exports[`Form > custom validation works > with error 1`] = `
<!--v-if--> <!--v-if-->
</div> </div>
<div class=""> <div class="">
<div class="relative inline-flex items-center"><input id="password" type="text" name="password" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-describedby="v-0-0-1-error" aria-invalid="true" value="short"> <div class="relative inline-flex items-center"><input id="password" type="text" name="password" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-invalid="true" value="short" aria-describedby="v-0-0-1-error">
<!--v-if--> <!--v-if-->
<!--v-if--> <!--v-if-->
</div> </div>
@@ -39,7 +39,7 @@ exports[`Form > custom validation works > without error 1`] = `
<!--v-if--> <!--v-if-->
</div> </div>
<div class=""> <div class="">
<div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-describedby="" aria-invalid="false" value="bob@dylan.com"> <div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false" value="bob@dylan.com">
<!--v-if--> <!--v-if-->
<!--v-if--> <!--v-if-->
</div> </div>
@@ -52,7 +52,7 @@ exports[`Form > custom validation works > without error 1`] = `
<!--v-if--> <!--v-if-->
</div> </div>
<div class=""> <div class="">
<div class="relative inline-flex items-center"><input id="password" type="text" name="password" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-describedby="" aria-invalid="false" value="validpassword"> <div class="relative inline-flex items-center"><input id="password" type="text" name="password" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false" value="validpassword">
<!--v-if--> <!--v-if-->
<!--v-if--> <!--v-if-->
</div> </div>
@@ -70,7 +70,7 @@ exports[`Form > joi validation works > with error 1`] = `
<!--v-if--> <!--v-if-->
</div> </div>
<div class=""> <div class="">
<div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-describedby="" aria-invalid="false" value="bob@dylan.com"> <div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false" value="bob@dylan.com">
<!--v-if--> <!--v-if-->
<!--v-if--> <!--v-if-->
</div> </div>
@@ -83,7 +83,7 @@ exports[`Form > joi validation works > with error 1`] = `
<!--v-if--> <!--v-if-->
</div> </div>
<div class=""> <div class="">
<div class="relative inline-flex items-center"><input id="password" type="text" name="password" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-describedby="v-0-0-1-error" aria-invalid="true" value="short"> <div class="relative inline-flex items-center"><input id="password" type="text" name="password" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-invalid="true" value="short" aria-describedby="v-0-0-1-error">
<!--v-if--> <!--v-if-->
<!--v-if--> <!--v-if-->
</div> </div>
@@ -101,7 +101,7 @@ exports[`Form > joi validation works > without error 1`] = `
<!--v-if--> <!--v-if-->
</div> </div>
<div class=""> <div class="">
<div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-describedby="" aria-invalid="false" value="bob@dylan.com"> <div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false" value="bob@dylan.com">
<!--v-if--> <!--v-if-->
<!--v-if--> <!--v-if-->
</div> </div>
@@ -114,7 +114,7 @@ exports[`Form > joi validation works > without error 1`] = `
<!--v-if--> <!--v-if-->
</div> </div>
<div class=""> <div class="">
<div class="relative inline-flex items-center"><input id="password" type="text" name="password" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-describedby="" aria-invalid="false" value="validpassword"> <div class="relative inline-flex items-center"><input id="password" type="text" name="password" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false" value="validpassword">
<!--v-if--> <!--v-if-->
<!--v-if--> <!--v-if-->
</div> </div>
@@ -136,7 +136,7 @@ exports[`Form > superstruct validation works > with error 1`] = `
<!--v-if--> <!--v-if-->
</div> </div>
<div class=""> <div class="">
<div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-describedby="" aria-invalid="false" value="bob@dylan.com"> <div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false" value="bob@dylan.com">
<!--v-if--> <!--v-if-->
<!--v-if--> <!--v-if-->
</div> </div>
@@ -149,7 +149,7 @@ exports[`Form > superstruct validation works > with error 1`] = `
<!--v-if--> <!--v-if-->
</div> </div>
<div class=""> <div class="">
<div class="relative inline-flex items-center"><input id="password" type="text" name="password" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-describedby="v-0-0-1-error" aria-invalid="true" value="short"> <div class="relative inline-flex items-center"><input id="password" type="text" name="password" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-invalid="true" value="short" aria-describedby="v-0-0-1-error">
<!--v-if--> <!--v-if-->
<!--v-if--> <!--v-if-->
</div> </div>
@@ -167,7 +167,7 @@ exports[`Form > superstruct validation works > without error 1`] = `
<!--v-if--> <!--v-if-->
</div> </div>
<div class=""> <div class="">
<div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-describedby="" aria-invalid="false" value="bob@dylan.com"> <div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false" value="bob@dylan.com">
<!--v-if--> <!--v-if-->
<!--v-if--> <!--v-if-->
</div> </div>
@@ -180,7 +180,7 @@ exports[`Form > superstruct validation works > without error 1`] = `
<!--v-if--> <!--v-if-->
</div> </div>
<div class=""> <div class="">
<div class="relative inline-flex items-center"><input id="password" type="text" name="password" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-describedby="" aria-invalid="false" value="validpassword"> <div class="relative inline-flex items-center"><input id="password" type="text" name="password" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false" value="validpassword">
<!--v-if--> <!--v-if-->
<!--v-if--> <!--v-if-->
</div> </div>
@@ -198,7 +198,7 @@ exports[`Form > valibot validation works > with error 1`] = `
<!--v-if--> <!--v-if-->
</div> </div>
<div class=""> <div class="">
<div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-describedby="" aria-invalid="false" value="bob@dylan.com"> <div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false" value="bob@dylan.com">
<!--v-if--> <!--v-if-->
<!--v-if--> <!--v-if-->
</div> </div>
@@ -211,7 +211,7 @@ exports[`Form > valibot validation works > with error 1`] = `
<!--v-if--> <!--v-if-->
</div> </div>
<div class=""> <div class="">
<div class="relative inline-flex items-center"><input id="password" type="text" name="password" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-describedby="v-0-0-1-error" aria-invalid="true" value="short"> <div class="relative inline-flex items-center"><input id="password" type="text" name="password" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-invalid="true" value="short" aria-describedby="v-0-0-1-error">
<!--v-if--> <!--v-if-->
<!--v-if--> <!--v-if-->
</div> </div>
@@ -229,7 +229,7 @@ exports[`Form > valibot validation works > without error 1`] = `
<!--v-if--> <!--v-if-->
</div> </div>
<div class=""> <div class="">
<div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-describedby="" aria-invalid="false" value="bob@dylan.com"> <div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false" value="bob@dylan.com">
<!--v-if--> <!--v-if-->
<!--v-if--> <!--v-if-->
</div> </div>
@@ -242,7 +242,7 @@ exports[`Form > valibot validation works > without error 1`] = `
<!--v-if--> <!--v-if-->
</div> </div>
<div class=""> <div class="">
<div class="relative inline-flex items-center"><input id="password" type="text" name="password" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-describedby="" aria-invalid="false" value="validpassword"> <div class="relative inline-flex items-center"><input id="password" type="text" name="password" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false" value="validpassword">
<!--v-if--> <!--v-if-->
<!--v-if--> <!--v-if-->
</div> </div>
@@ -260,7 +260,7 @@ exports[`Form > yup validation works > with error 1`] = `
<!--v-if--> <!--v-if-->
</div> </div>
<div class=""> <div class="">
<div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-describedby="" aria-invalid="false" value="bob@dylan.com"> <div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false" value="bob@dylan.com">
<!--v-if--> <!--v-if-->
<!--v-if--> <!--v-if-->
</div> </div>
@@ -273,7 +273,7 @@ exports[`Form > yup validation works > with error 1`] = `
<!--v-if--> <!--v-if-->
</div> </div>
<div class=""> <div class="">
<div class="relative inline-flex items-center"><input id="password" type="text" name="password" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-describedby="v-0-0-1-error" aria-invalid="true" value="short"> <div class="relative inline-flex items-center"><input id="password" type="text" name="password" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-invalid="true" value="short" aria-describedby="v-0-0-1-error">
<!--v-if--> <!--v-if-->
<!--v-if--> <!--v-if-->
</div> </div>
@@ -291,7 +291,7 @@ exports[`Form > yup validation works > without error 1`] = `
<!--v-if--> <!--v-if-->
</div> </div>
<div class=""> <div class="">
<div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-describedby="" aria-invalid="false" value="bob@dylan.com"> <div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false" value="bob@dylan.com">
<!--v-if--> <!--v-if-->
<!--v-if--> <!--v-if-->
</div> </div>
@@ -304,7 +304,7 @@ exports[`Form > yup validation works > without error 1`] = `
<!--v-if--> <!--v-if-->
</div> </div>
<div class=""> <div class="">
<div class="relative inline-flex items-center"><input id="password" type="text" name="password" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-describedby="" aria-invalid="false" value="validpassword"> <div class="relative inline-flex items-center"><input id="password" type="text" name="password" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false" value="validpassword">
<!--v-if--> <!--v-if-->
<!--v-if--> <!--v-if-->
</div> </div>
@@ -322,7 +322,7 @@ exports[`Form > zod validation works > with error 1`] = `
<!--v-if--> <!--v-if-->
</div> </div>
<div class=""> <div class="">
<div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-describedby="" aria-invalid="false" value="bob@dylan.com"> <div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false" value="bob@dylan.com">
<!--v-if--> <!--v-if-->
<!--v-if--> <!--v-if-->
</div> </div>
@@ -335,7 +335,7 @@ exports[`Form > zod validation works > with error 1`] = `
<!--v-if--> <!--v-if-->
</div> </div>
<div class=""> <div class="">
<div class="relative inline-flex items-center"><input id="password" type="text" name="password" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-describedby="v-0-0-1-error" aria-invalid="true" value="short"> <div class="relative inline-flex items-center"><input id="password" type="text" name="password" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" aria-invalid="true" value="short" aria-describedby="v-0-0-1-error">
<!--v-if--> <!--v-if-->
<!--v-if--> <!--v-if-->
</div> </div>
@@ -353,7 +353,7 @@ exports[`Form > zod validation works > without error 1`] = `
<!--v-if--> <!--v-if-->
</div> </div>
<div class=""> <div class="">
<div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-describedby="" aria-invalid="false" value="bob@dylan.com"> <div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false" value="bob@dylan.com">
<!--v-if--> <!--v-if-->
<!--v-if--> <!--v-if-->
</div> </div>
@@ -366,7 +366,7 @@ exports[`Form > zod validation works > without error 1`] = `
<!--v-if--> <!--v-if-->
</div> </div>
<div class=""> <div class="">
<div class="relative inline-flex items-center"><input id="password" type="text" name="password" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-describedby="" aria-invalid="false" value="validpassword"> <div class="relative inline-flex items-center"><input id="password" type="text" name="password" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false" value="validpassword">
<!--v-if--> <!--v-if-->
<!--v-if--> <!--v-if-->
</div> </div>

4
test/components/__snapshots__/FormField-vue.spec.ts.snap
View File

@@ -79,7 +79,7 @@ exports[`FormField > renders with help correctly 1`] = `
<!--v-if--> <!--v-if-->
</div> </div>
<div class=""> <div class="">
<div class="mt-2 text-muted">Username must be unique</div> <div id="v-0-0-help" class="mt-2 text-muted">Username must be unique</div>
</div> </div>
</div>" </div>"
`; `;
@@ -91,7 +91,7 @@ exports[`FormField > renders with help slot correctly 1`] = `
<!--v-if--> <!--v-if-->
</div> </div>
<div class=""> <div class="">
<div class="mt-2 text-muted">Help slot</div> <div id="v-0-0-help" class="mt-2 text-muted">Help slot</div>
</div> </div>
</div>" </div>"
`; `;

4
test/components/__snapshots__/FormField.spec.ts.snap
View File

@@ -79,7 +79,7 @@ exports[`FormField > renders with help correctly 1`] = `
<!--v-if--> <!--v-if-->
</div> </div>
<div class=""> <div class="">
<div class="mt-2 text-muted">Username must be unique</div> <div id="v-0-0-help" class="mt-2 text-muted">Username must be unique</div>
</div> </div>
</div>" </div>"
`; `;
@@ -91,7 +91,7 @@ exports[`FormField > renders with help slot correctly 1`] = `
<!--v-if--> <!--v-if-->
</div> </div>
<div class=""> <div class="">
<div class="mt-2 text-muted">Help slot</div> <div id="v-0-0-help" class="mt-2 text-muted">Help slot</div>
</div> </div>
</div>" </div>"
`; `;