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

feat(Form): new component (#4)

Browse Source 
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
Romain Hamel
2024-03-19 16:09:12 +01:00
committed by GitHub
parent 1cec712fb8
commit de62676647
35 changed files with 2735 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

450
test/components/Form.spec.ts Normal file
View File

@@ -0,0 +1,450 @@
import { reactive } from 'vue'
import { describe, it, expect } from 'vitest'
import type { FormProps } from '../../src/runtime/components/Form.vue'
import {
UForm,
UInput,
UFormField
// URadioGroup,
// UTextarea,
// UCheckbox,
// USelect,
// URadio,
// USelectMenu,
// UInputMenu,
// UToggle,
// URange
} from '#components'
import { DOMWrapper, flushPromises, VueWrapper } from '@vue/test-utils'
import ComponentRender from '../component-render'
import { mountSuspended } from '@nuxt/test-utils/runtime'
import { z } from 'zod'
import * as yup from 'yup'
import Joi from 'joi'
import * as valibot from 'valibot'
async function triggerEvent (
el: DOMWrapper<Element> | VueWrapper<any, any>,
event: string
) {
el.trigger(event)
return flushPromises()
}
async function setValue (
el: DOMWrapper<Element> | VueWrapper<any, any>,
value: any
) {
el.setValue(value)
return flushPromises()
}
async function renderForm (options: {
props: Partial<FormProps<any>>
slotVars?: object
slotComponents?: any
slotTemplate: string
}) {
const state = reactive({})
return await mountSuspended(UForm, {
props: {
state,
...options.props
},
slots: {
default: {
// @ts-ignore
setup () {
return { state, ...options.slotVars }
},
components: {
UFormField,
...options.slotComponents
},
template: options.slotTemplate
}
}
})
}
describe('Form', () => {
it.each([
['basic case', { props: { state: {} } }],
['with default slot', { props: { state: {} }, slots: { default: 'Form slot' } }]
])('renders %s correctly', async (nameOrHtml: string, options: { props: FormProps<any> }) => {
const html = await ComponentRender(nameOrHtml, options, UForm)
expect(html).toMatchSnapshot()
})
it.each([
['zod', {
schema: z.object({
email: z.string(),
password: z.string().min(8, 'Must be at least 8 characters')
})
}
],
['yup', {
schema: yup.object({
email: yup.string(),
password: yup.string().min(8, 'Must be at least 8 characters')
})
}
],
['joi', {
schema: Joi.object({
email: Joi.string(),
password: Joi.string().min(8).messages({
'string.min': 'Must be at least {#limit} characters'
})
})
}
],
['valibot', {
schema: valibot.objectAsync({
email: valibot.string(),
password: valibot.string([
valibot.minLength(8, 'Must be at least 8 characters')
])
})
}
],
['custom', {
async validate (state: any) {
const errs = []
if (!state.email)
errs.push({ name: 'email', message: 'Email is required' })
if (state.password?.length < 8)
errs.push({
name: 'password',
message: 'Must be at least 8 characters'
})
return errs
}
}
]
])('%s validation works', async (_nameOrHtml: string, options: Partial<FormProps<any>>) => {
const wrapper = await renderForm({
props: options,
slotComponents: {
UFormField,
UInput
},
slotTemplate: `
<UFormField name="email">
<UInput id="email" v-model="state.email" />
</UFormField>
<UFormField name="password">
<UInput id="password" v-model="state.password" />
</UFormField>
`
})
const form = wrapper.find('form')
const emailInput = wrapper.find('#email')
const passwordInput = wrapper.find('#password')
await setValue(emailInput, 'bob@dylan.com')
await setValue(passwordInput, 'short')
await triggerEvent(form, 'submit.prevent')
// @ts-ignore
expect(wrapper.emitted('error')[0][0].errors).toMatchObject([
{
id: 'password',
name: 'password',
message: 'Must be at least 8 characters'
}
])
expect(wrapper.html()).toMatchSnapshot('with error')
await setValue(passwordInput, 'validpassword')
await triggerEvent(form, 'submit.prevent')
expect(wrapper.emitted()).toHaveProperty('submit')
expect(wrapper.emitted('submit')![0][0]).toMatchObject({
data: { email: 'bob@dylan.com', password: 'validpassword' }
})
expect(wrapper.html()).toMatchSnapshot('without error')
})
it.each([
['input', UInput, {}, 'foo']
// ['textarea', UTextarea, {}, 'foo']
])('%s validate on blur works', async (_name, InputComponent, inputProps, validInputValue) => {
const wrapper = await renderForm({
props: {
validateOn: ['blur'],
async validate (state: any) {
if (!state.value)
return [{ name: 'value', message: 'Error message' }]
return []
}
},
slotVars: {
inputProps
},
slotComponents: { InputComponent },
slotTemplate: `
<UFormField name="value">
<InputComponent id="input" v-model="state.value" v-bind="inputProps" />
</UFormField>
`
})
const input = wrapper.find('#input')
await triggerEvent(input, 'blur')
expect(wrapper.text()).toContain('Error message')
await setValue(input, validInputValue)
await triggerEvent(input, 'blur')
expect(wrapper.text()).not.toContain('Error message')
})
it.each([
// ['checkbox', UCheckbox, {}, true],
// ['range', URange, {}, 2],
// ['select', USelect, { options: ['Option 1', 'Option 2'] }, 'Option 2']
])('%s validate on change works', async (_name, InputComponent, inputProps, validInputValue) => {
const wrapper = await renderForm({
props: {
validateOn: ['change'],
async validate (state: any) {
if (!state.value)
return [{ name: 'value', message: 'Error message' }]
return []
}
},
slotVars: {
inputProps
},
slotComponents: {
InputComponent
},
slotTemplate: `
<UFormField name="value">
<InputComponent id="input" v-model="state.value" v-bind="inputProps" />
</UFormField>
`
})
const input = wrapper.find('#input')
await triggerEvent(input, 'change')
expect(wrapper.text()).toContain('Error message')
await setValue(input, validInputValue)
await triggerEvent(input, 'change')
expect(wrapper.text()).not.toContain('Error message')
})
// test('radio group validate on change works', async () => {
// const wrapper = await renderForm({
// props: {
// validateOn: ['change'],
// validate (state: any) {
// if (state.value !== 'Option 2')
// return [{ name: 'value', message: 'Error message' }]
// return []
// }
// },
// slotVars: {
// inputProps: {
// options: ['Option 1', 'Option 2', 'Option 3']
// }
// },
// slotComponents: {
// UFormField,
// URadioGroup
// },
// slotTemplate: `
// <UFormField name="value">
// <URadioGroup id="input" v-model="state.value" v-bind="inputProps" />
// </UFormField>
// `
// })
//
// const option1 = wrapper.find('[value="Option 1"]')
// await setValue(option1, true)
// expect(wrapper.text()).toContain('Error message')
//
// const option2 = wrapper.find('[value="Option 2"]')
// await setValue(option2, true)
// expect(wrapper.text()).not.toContain('Error message')
// })
//
// test('radio validate on change works', async () => {
// const wrapper = await renderForm({
// props: {
// validateOn: ['change'],
// validate (state: any) {
// if (state.value !== 'Option 2')
// return [{ name: 'value', message: 'Error message' }]
// return []
// }
// },
// slotComponents: {
// UFormField,
// URadio
// },
// slotTemplate: `
// <UFormField name="value">
// <URadio id="option-1" v-model="state.value" value="Option 1" />
// <URadio id="option-2" v-model="state.value" value="Option 2" />
// </UFormField>
// `
// })
//
// const option1 = wrapper.find('#option-1')
// await setValue(option1, true)
// expect(wrapper.text()).toContain('Error message')
//
// const option2 = wrapper.find('#option-2')
// await setValue(option2, true)
// expect(wrapper.text()).not.toContain('Error message')
// })
//
// test('toggle validate on change', async () => {
// const wrapper = await renderForm({
// props: {
// validateOn: ['change'],
// validate (state: any) {
// if (state.value) return [{ name: 'value', message: 'Error message' }]
// return []
// }
// },
// slotComponents: {
// UFormField,
// UToggle
// },
// slotTemplate: `
// <UFormField name="value">
// <UToggle id="input" v-model="state.value" />
// </UFormField>
// `
// })
//
// const input = wrapper.findComponent({ name: 'Switch' })
// await setValue(input, true)
// expect(wrapper.text()).toContain('Error message')
//
// await setValue(input, false)
// expect(wrapper.text()).not.toContain('Error message')
// })
//
// test('select menu validate on change', async () => {
// const wrapper = await renderForm({
// props: {
// validateOn: ['change'],
// validate (state: any) {
// if (state.value !== 'Option 2')
// return [{ name: 'value', message: 'Error message' }]
// return []
// }
// },
// slotVars: {
// inputProps: {
// options: ['Option 1', 'Option 2', 'Option 3']
// }
// },
// slotComponents: {
// UFormField,
// USelectMenu
// },
// slotTemplate: `
// <UFormField name="value">
// <USelectMenu id="input" v-model="state.value" v-bind="inputProps" />
// </UFormField>
// `
// })
//
// const input = wrapper.findComponent({ name: 'Listbox' })
// await setValue(input, 'Option 1')
// expect(wrapper.text()).toContain('Error message')
//
// await setValue(input, 'Option 2')
// expect(wrapper.text()).not.toContain('Error message')
// })
//
// test('input menu validate on change', async () => {
// const wrapper = await renderForm({
// props: {
// validateOn: ['change'],
// validate (state: any) {
// if (state.value !== 'Option 2')
// return [{ name: 'value', message: 'Error message' }]
// return []
// }
// },
// slotVars: {
// inputProps: {
// options: ['Option 1', 'Option 2', 'Option 3']
// }
// },
// slotComponents: {
// UFormField,
// UInputMenu
// },
// slotTemplate: `
// <UFormField name="value">
// <UInputMenu id="input" v-model="state.value" v-bind="inputProps" />
// </UFormField>
// `
// })
//
// const input = wrapper.findComponent({ name: 'Combobox' })
// await setValue(input, 'Option 1')
// expect(wrapper.text()).toContain('Error message')
//
// await setValue(input, 'Option 2')
// expect(wrapper.text()).not.toContain('Error message')
// })
//
it.each([
['input', UInput, {}, 'foo']
// ['textarea', UTextarea, {}, 'foo']
])('%s validate on input works', async (_name, InputComponent, inputProps, validInputValue) => {
const wrapper = await renderForm({
props: {
validateOn: ['input', 'blur'],
async validate (state: any) {
if (!state.value)
return [{ name: 'value', message: 'Error message' }]
return []
}
},
slotVars: {
inputProps
},
slotComponents: {
UFormField,
InputComponent
},
slotTemplate: `
<UFormField name="value" :validate-on-input-delay="50">
<InputComponent id="input" v-model="state.value" v-bind="inputProps" />
</UFormField>
`
})
const input = wrapper.find('#input')
// Validation @input is enabled only after a blur event
await triggerEvent(input, 'blur')
expect(wrapper.text()).toContain('Error message')
await setValue(input, validInputValue)
// Waiting because of the debounced validation on input event.
await new Promise((r) => setTimeout(r, 50))
expect(wrapper.text()).not.toContain('Error message')
})
})

35
test/components/FormField.spec.ts Normal file
View File

@@ -0,0 +1,35 @@
import { defineComponent } from 'vue'
import { describe, it, expect } from 'vitest'
import FormField, { type FormFieldProps } from '../../src/runtime/components/FormField.vue'
import ComponentRender from '../component-render'
// A wrapper component is needed here because of a conflict with the error prop / expose.
// See: https://github.com/nuxt/test-utils/issues/684
const FormFieldWrapper = defineComponent({
components: {
UFormField: FormField
},
template: '<UFormField v-bind="$attrs"> <slot /> </UFormField>'
})
describe('FormField', () => {
it.each([
['with label and description', { props: { label: 'Username', description: 'Enter your username' } }],
['with size', { props: { label: 'Username', description: 'Enter your username', size: 'xl' as const } }],
['with required', { props: { label: 'Username', required: true } }],
['with help', { props: { help: 'Username must be unique' } }],
['with error', { props: { error: 'Username is already taken' } }],
['with hint', { props: { hint: 'Use letters, numbers, and special characters' } }],
['with class', { props: { class: 'relative' } }],
['with ui', { props: { ui: { label: 'text-gray-900 dark:text-white' } } }],
['with default slot', { slots: { default: () => 'Default slot' } }],
['with label slot', { slots: { label: () => 'Label slot' } }],
['with description slot', { slots: { description: () => 'Description slot' } }],
['with error slot', { slots: { error: () => 'Error slot' } }],
['with hint slot', { slots: { hint: () => 'Hint slot' } }],
['with help slot', { slots: { help: () => 'Help slot' } }]
])('renders %s correctly', async (nameOrHtml: string, options: { props?: FormFieldProps, slots?: any }) => {
const html = await ComponentRender(nameOrHtml, options, FormFieldWrapper)
expect(html).toMatchSnapshot()
})
})

28
test/components/Input.spec.ts Normal file
View File

@@ -0,0 +1,28 @@
import { describe, it, expect } from 'vitest'
import Input, { type InputProps } from '../../src/runtime/components/Input.vue'
import ComponentRender from '../component-render'
describe('Input', () => {
it.each([
['basic case', {}],
['with name', { props: { name: 'username' } }],
['with type', { props: { type: 'password' } }],
['with placeholder', { props: { placeholder: 'Enter your username' } }],
['with disabled', { props: { disabled: true } }],
['with required', { props: { required: true } }],
// ['with icon', { props: { icon: 'i-heroicons-battery-50-solid' } }],
// ['with leading and icon', { props: { leading: true, icon: 'i-heroicons-battery-50-solid' } }],
// ['with leadingIcon', { props: { leadingIcon: 'i-heroicons-battery-50-solid' } }],
// ['with loading icon', { props: { loading: true } }],
// ['with leading slot', { slots: { leading: () => 'leading slot' } }],
// ['with trailing and icon', { props: { trailing: true, icon: 'i-heroicons-battery-50-solid' } }],
// ['with trailingIcon', { props: { trailingIcon: 'i-heroicons-battery-50-solid' } }],
// ['with trailing slot', { slots: { leading: () => 'trailing slot' } }],
['with size', { props: { size: 'xs' as const } }],
['with color', { props: { color: 'red' as const } }],
['with variant', { props: { variant: 'outline' as const } }]
])('renders %s correctly', async (nameOrHtml: string, options: { props?: InputProps, slots?: any }) => {
const html = await ComponentRender(nameOrHtml, options, Input)
expect(html).toMatchSnapshot()
})
})

2
test/components/Tabs.spec.ts
View File

@@ -23,7 +23,7 @@ describe('Tabs', () => {
['with defaultValue', { props: { items, defaultValue: '1' } }],
['with default slot', { props: { items }, slots: { default: () => 'Default slot' } }],
['with item slot', { props: { items }, slots: { item: () => 'Item slot' } }]
])('renders %s correctly', async (nameOrHtml: string, options: { props?: TabsProps, slots?: any }) => {
])('renders %s correctly', async (nameOrHtml: string, options: { props?: TabsProps<typeof items[number]>, slots?: any }) => {
const html = await ComponentRender(nameOrHtml, options, Tabs)
expect(html).toMatchSnapshot()
})

655
test/components/__snapshots__/Form.spec.ts.snap Normal file
View File

@@ -0,0 +1,655 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`Form > custom validation works > with error 1`] = `
"<form class="">
<div data-v-0fd934a4="" class="text-sm">
<div data-v-0fd934a4="" class="">
<!--v-if-->
<!--v-if-->
</div>
<div data-v-0fd934a4="" class="">
<div class="relative"><input id="email" type="text" name="email" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring-1 ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
<!-- span
v-if="(isLeading && leadingIconName) || $slots.leading"
:class="leadingWrapperIconClass"
>
<slot name="leading" :disabled="disabled" :loading="loading">
<UIcon :name="leadingIconName" :class="leadingIconClass" />
</slot>
</span>
<span
v-if="(isTrailing && trailingIconName) || $slots.trailing"
:class="trailingWrapperIconClass"
>
<slot name="trailing" :disabled="disabled" :loading="loading">
<UIcon :name="trailingIconName" :class="trailingIconClass" />
</slot>
</span -->
</div>
<transition-stub data-v-0fd934a4="" name="slide-fade" mode="out-in" appear="false" persisted="false" css="true">
<!--v-if-->
</transition-stub>
</div>
</div>
<div data-v-0fd934a4="" class="text-sm">
<div data-v-0fd934a4="" class="">
<!--v-if-->
<!--v-if-->
</div>
<div data-v-0fd934a4="" class="">
<div class="relative"><input id="password" type="text" name="password" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm bg-transparent text-gray-900 dark:text-white ring-1 ring-inset ring-red-500 dark:ring-red-400 focus:ring-2 focus:ring-red-500 dark:focus:ring-red-400">
<!-- span
v-if="(isLeading && leadingIconName) || $slots.leading"
:class="leadingWrapperIconClass"
>
<slot name="leading" :disabled="disabled" :loading="loading">
<UIcon :name="leadingIconName" :class="leadingIconClass" />
</slot>
</span>
<span
v-if="(isTrailing && trailingIconName) || $slots.trailing"
:class="trailingWrapperIconClass"
>
<slot name="trailing" :disabled="disabled" :loading="loading">
<UIcon :name="trailingIconName" :class="trailingIconClass" />
</slot>
</span -->
</div>
<transition-stub data-v-0fd934a4="" name="slide-fade" mode="out-in" appear="false" persisted="false" css="true">
<p data-v-0fd934a4="" class="mt-2 text-red-500 dark:text-red-400">Must be at least 8 characters</p>
</transition-stub>
</div>
</div>
</form>"
`;
exports[`Form > custom validation works > without error 1`] = `
"<form class="">
<div data-v-0fd934a4="" class="text-sm">
<div data-v-0fd934a4="" class="">
<!--v-if-->
<!--v-if-->
</div>
<div data-v-0fd934a4="" class="">
<div class="relative"><input id="email" type="text" name="email" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring-1 ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
<!-- span
v-if="(isLeading && leadingIconName) || $slots.leading"
:class="leadingWrapperIconClass"
>
<slot name="leading" :disabled="disabled" :loading="loading">
<UIcon :name="leadingIconName" :class="leadingIconClass" />
</slot>
</span>
<span
v-if="(isTrailing && trailingIconName) || $slots.trailing"
:class="trailingWrapperIconClass"
>
<slot name="trailing" :disabled="disabled" :loading="loading">
<UIcon :name="trailingIconName" :class="trailingIconClass" />
</slot>
</span -->
</div>
<transition-stub data-v-0fd934a4="" name="slide-fade" mode="out-in" appear="false" persisted="false" css="true">
<!--v-if-->
</transition-stub>
</div>
</div>
<div data-v-0fd934a4="" class="text-sm">
<div data-v-0fd934a4="" class="">
<!--v-if-->
<!--v-if-->
</div>
<div data-v-0fd934a4="" class="">
<div class="relative"><input id="password" type="text" name="password" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring-1 ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
<!-- span
v-if="(isLeading && leadingIconName) || $slots.leading"
:class="leadingWrapperIconClass"
>
<slot name="leading" :disabled="disabled" :loading="loading">
<UIcon :name="leadingIconName" :class="leadingIconClass" />
</slot>
</span>
<span
v-if="(isTrailing && trailingIconName) || $slots.trailing"
:class="trailingWrapperIconClass"
>
<slot name="trailing" :disabled="disabled" :loading="loading">
<UIcon :name="trailingIconName" :class="trailingIconClass" />
</slot>
</span -->
</div>
<transition-stub data-v-0fd934a4="" name="slide-fade" mode="out-in" appear="false" persisted="false" css="true">
<!--v-if-->
</transition-stub>
</div>
</div>
</form>"
`;
exports[`Form > joi validation works > with error 1`] = `
"<form class="">
<div data-v-0fd934a4="" class="text-sm">
<div data-v-0fd934a4="" class="">
<!--v-if-->
<!--v-if-->
</div>
<div data-v-0fd934a4="" class="">
<div class="relative"><input id="email" type="text" name="email" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring-1 ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
<!-- span
v-if="(isLeading && leadingIconName) || $slots.leading"
:class="leadingWrapperIconClass"
>
<slot name="leading" :disabled="disabled" :loading="loading">
<UIcon :name="leadingIconName" :class="leadingIconClass" />
</slot>
</span>
<span
v-if="(isTrailing && trailingIconName) || $slots.trailing"
:class="trailingWrapperIconClass"
>
<slot name="trailing" :disabled="disabled" :loading="loading">
<UIcon :name="trailingIconName" :class="trailingIconClass" />
</slot>
</span -->
</div>
<transition-stub data-v-0fd934a4="" name="slide-fade" mode="out-in" appear="false" persisted="false" css="true">
<!--v-if-->
</transition-stub>
</div>
</div>
<div data-v-0fd934a4="" class="text-sm">
<div data-v-0fd934a4="" class="">
<!--v-if-->
<!--v-if-->
</div>
<div data-v-0fd934a4="" class="">
<div class="relative"><input id="password" type="text" name="password" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm bg-transparent text-gray-900 dark:text-white ring-1 ring-inset ring-red-500 dark:ring-red-400 focus:ring-2 focus:ring-red-500 dark:focus:ring-red-400">
<!-- span
v-if="(isLeading && leadingIconName) || $slots.leading"
:class="leadingWrapperIconClass"
>
<slot name="leading" :disabled="disabled" :loading="loading">
<UIcon :name="leadingIconName" :class="leadingIconClass" />
</slot>
</span>
<span
v-if="(isTrailing && trailingIconName) || $slots.trailing"
:class="trailingWrapperIconClass"
>
<slot name="trailing" :disabled="disabled" :loading="loading">
<UIcon :name="trailingIconName" :class="trailingIconClass" />
</slot>
</span -->
</div>
<transition-stub data-v-0fd934a4="" name="slide-fade" mode="out-in" appear="false" persisted="false" css="true">
<p data-v-0fd934a4="" class="mt-2 text-red-500 dark:text-red-400">Must be at least 8 characters</p>
</transition-stub>
</div>
</div>
</form>"
`;
exports[`Form > joi validation works > without error 1`] = `
"<form class="">
<div data-v-0fd934a4="" class="text-sm">
<div data-v-0fd934a4="" class="">
<!--v-if-->
<!--v-if-->
</div>
<div data-v-0fd934a4="" class="">
<div class="relative"><input id="email" type="text" name="email" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring-1 ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
<!-- span
v-if="(isLeading && leadingIconName) || $slots.leading"
:class="leadingWrapperIconClass"
>
<slot name="leading" :disabled="disabled" :loading="loading">
<UIcon :name="leadingIconName" :class="leadingIconClass" />
</slot>
</span>
<span
v-if="(isTrailing && trailingIconName) || $slots.trailing"
:class="trailingWrapperIconClass"
>
<slot name="trailing" :disabled="disabled" :loading="loading">
<UIcon :name="trailingIconName" :class="trailingIconClass" />
</slot>
</span -->
</div>
<transition-stub data-v-0fd934a4="" name="slide-fade" mode="out-in" appear="false" persisted="false" css="true">
<!--v-if-->
</transition-stub>
</div>
</div>
<div data-v-0fd934a4="" class="text-sm">
<div data-v-0fd934a4="" class="">
<!--v-if-->
<!--v-if-->
</div>
<div data-v-0fd934a4="" class="">
<div class="relative"><input id="password" type="text" name="password" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring-1 ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
<!-- span
v-if="(isLeading && leadingIconName) || $slots.leading"
:class="leadingWrapperIconClass"
>
<slot name="leading" :disabled="disabled" :loading="loading">
<UIcon :name="leadingIconName" :class="leadingIconClass" />
</slot>
</span>
<span
v-if="(isTrailing && trailingIconName) || $slots.trailing"
:class="trailingWrapperIconClass"
>
<slot name="trailing" :disabled="disabled" :loading="loading">
<UIcon :name="trailingIconName" :class="trailingIconClass" />
</slot>
</span -->
</div>
<transition-stub data-v-0fd934a4="" name="slide-fade" mode="out-in" appear="false" persisted="false" css="true">
<!--v-if-->
</transition-stub>
</div>
</div>
</form>"
`;
exports[`Form > renders basic case correctly 1`] = `"<form class=""></form>"`;
exports[`Form > renders with default slot correctly 1`] = `"<form class="">Form slot</form>"`;
exports[`Form > valibot validation works > with error 1`] = `
"<form class="">
<div data-v-0fd934a4="" class="text-sm">
<div data-v-0fd934a4="" class="">
<!--v-if-->
<!--v-if-->
</div>
<div data-v-0fd934a4="" class="">
<div class="relative"><input id="email" type="text" name="email" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring-1 ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
<!-- span
v-if="(isLeading && leadingIconName) || $slots.leading"
:class="leadingWrapperIconClass"
>
<slot name="leading" :disabled="disabled" :loading="loading">
<UIcon :name="leadingIconName" :class="leadingIconClass" />
</slot>
</span>
<span
v-if="(isTrailing && trailingIconName) || $slots.trailing"
:class="trailingWrapperIconClass"
>
<slot name="trailing" :disabled="disabled" :loading="loading">
<UIcon :name="trailingIconName" :class="trailingIconClass" />
</slot>
</span -->
</div>
<transition-stub data-v-0fd934a4="" name="slide-fade" mode="out-in" appear="false" persisted="false" css="true">
<!--v-if-->
</transition-stub>
</div>
</div>
<div data-v-0fd934a4="" class="text-sm">
<div data-v-0fd934a4="" class="">
<!--v-if-->
<!--v-if-->
</div>
<div data-v-0fd934a4="" class="">
<div class="relative"><input id="password" type="text" name="password" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm bg-transparent text-gray-900 dark:text-white ring-1 ring-inset ring-red-500 dark:ring-red-400 focus:ring-2 focus:ring-red-500 dark:focus:ring-red-400">
<!-- span
v-if="(isLeading && leadingIconName) || $slots.leading"
:class="leadingWrapperIconClass"
>
<slot name="leading" :disabled="disabled" :loading="loading">
<UIcon :name="leadingIconName" :class="leadingIconClass" />
</slot>
</span>
<span
v-if="(isTrailing && trailingIconName) || $slots.trailing"
:class="trailingWrapperIconClass"
>
<slot name="trailing" :disabled="disabled" :loading="loading">
<UIcon :name="trailingIconName" :class="trailingIconClass" />
</slot>
</span -->
</div>
<transition-stub data-v-0fd934a4="" name="slide-fade" mode="out-in" appear="false" persisted="false" css="true">
<p data-v-0fd934a4="" class="mt-2 text-red-500 dark:text-red-400">Must be at least 8 characters</p>
</transition-stub>
</div>
</div>
</form>"
`;
exports[`Form > valibot validation works > without error 1`] = `
"<form class="">
<div data-v-0fd934a4="" class="text-sm">
<div data-v-0fd934a4="" class="">
<!--v-if-->
<!--v-if-->
</div>
<div data-v-0fd934a4="" class="">
<div class="relative"><input id="email" type="text" name="email" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring-1 ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
<!-- span
v-if="(isLeading && leadingIconName) || $slots.leading"
:class="leadingWrapperIconClass"
>
<slot name="leading" :disabled="disabled" :loading="loading">
<UIcon :name="leadingIconName" :class="leadingIconClass" />
</slot>
</span>
<span
v-if="(isTrailing && trailingIconName) || $slots.trailing"
:class="trailingWrapperIconClass"
>
<slot name="trailing" :disabled="disabled" :loading="loading">
<UIcon :name="trailingIconName" :class="trailingIconClass" />
</slot>
</span -->
</div>
<transition-stub data-v-0fd934a4="" name="slide-fade" mode="out-in" appear="false" persisted="false" css="true">
<!--v-if-->
</transition-stub>
</div>
</div>
<div data-v-0fd934a4="" class="text-sm">
<div data-v-0fd934a4="" class="">
<!--v-if-->
<!--v-if-->
</div>
<div data-v-0fd934a4="" class="">
<div class="relative"><input id="password" type="text" name="password" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring-1 ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
<!-- span
v-if="(isLeading && leadingIconName) || $slots.leading"
:class="leadingWrapperIconClass"
>
<slot name="leading" :disabled="disabled" :loading="loading">
<UIcon :name="leadingIconName" :class="leadingIconClass" />
</slot>
</span>
<span
v-if="(isTrailing && trailingIconName) || $slots.trailing"
:class="trailingWrapperIconClass"
>
<slot name="trailing" :disabled="disabled" :loading="loading">
<UIcon :name="trailingIconName" :class="trailingIconClass" />
</slot>
</span -->
</div>
<transition-stub data-v-0fd934a4="" name="slide-fade" mode="out-in" appear="false" persisted="false" css="true">
<!--v-if-->
</transition-stub>
</div>
</div>
</form>"
`;
exports[`Form > yup validation works > with error 1`] = `
"<form class="">
<div data-v-0fd934a4="" class="text-sm">
<div data-v-0fd934a4="" class="">
<!--v-if-->
<!--v-if-->
</div>
<div data-v-0fd934a4="" class="">
<div class="relative"><input id="email" type="text" name="email" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring-1 ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
<!-- span
v-if="(isLeading && leadingIconName) || $slots.leading"
:class="leadingWrapperIconClass"
>
<slot name="leading" :disabled="disabled" :loading="loading">
<UIcon :name="leadingIconName" :class="leadingIconClass" />
</slot>
</span>
<span
v-if="(isTrailing && trailingIconName) || $slots.trailing"
:class="trailingWrapperIconClass"
>
<slot name="trailing" :disabled="disabled" :loading="loading">
<UIcon :name="trailingIconName" :class="trailingIconClass" />
</slot>
</span -->
</div>
<transition-stub data-v-0fd934a4="" name="slide-fade" mode="out-in" appear="false" persisted="false" css="true">
<!--v-if-->
</transition-stub>
</div>
</div>
<div data-v-0fd934a4="" class="text-sm">
<div data-v-0fd934a4="" class="">
<!--v-if-->
<!--v-if-->
</div>
<div data-v-0fd934a4="" class="">
<div class="relative"><input id="password" type="text" name="password" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm bg-transparent text-gray-900 dark:text-white ring-1 ring-inset ring-red-500 dark:ring-red-400 focus:ring-2 focus:ring-red-500 dark:focus:ring-red-400">
<!-- span
v-if="(isLeading && leadingIconName) || $slots.leading"
:class="leadingWrapperIconClass"
>
<slot name="leading" :disabled="disabled" :loading="loading">
<UIcon :name="leadingIconName" :class="leadingIconClass" />
</slot>
</span>
<span
v-if="(isTrailing && trailingIconName) || $slots.trailing"
:class="trailingWrapperIconClass"
>
<slot name="trailing" :disabled="disabled" :loading="loading">
<UIcon :name="trailingIconName" :class="trailingIconClass" />
</slot>
</span -->
</div>
<transition-stub data-v-0fd934a4="" name="slide-fade" mode="out-in" appear="false" persisted="false" css="true">
<p data-v-0fd934a4="" class="mt-2 text-red-500 dark:text-red-400">Must be at least 8 characters</p>
</transition-stub>
</div>
</div>
</form>"
`;
exports[`Form > yup validation works > without error 1`] = `
"<form class="">
<div data-v-0fd934a4="" class="text-sm">
<div data-v-0fd934a4="" class="">
<!--v-if-->
<!--v-if-->
</div>
<div data-v-0fd934a4="" class="">
<div class="relative"><input id="email" type="text" name="email" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring-1 ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
<!-- span
v-if="(isLeading && leadingIconName) || $slots.leading"
:class="leadingWrapperIconClass"
>
<slot name="leading" :disabled="disabled" :loading="loading">
<UIcon :name="leadingIconName" :class="leadingIconClass" />
</slot>
</span>
<span
v-if="(isTrailing && trailingIconName) || $slots.trailing"
:class="trailingWrapperIconClass"
>
<slot name="trailing" :disabled="disabled" :loading="loading">
<UIcon :name="trailingIconName" :class="trailingIconClass" />
</slot>
</span -->
</div>
<transition-stub data-v-0fd934a4="" name="slide-fade" mode="out-in" appear="false" persisted="false" css="true">
<!--v-if-->
</transition-stub>
</div>
</div>
<div data-v-0fd934a4="" class="text-sm">
<div data-v-0fd934a4="" class="">
<!--v-if-->
<!--v-if-->
</div>
<div data-v-0fd934a4="" class="">
<div class="relative"><input id="password" type="text" name="password" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring-1 ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
<!-- span
v-if="(isLeading && leadingIconName) || $slots.leading"
:class="leadingWrapperIconClass"
>
<slot name="leading" :disabled="disabled" :loading="loading">
<UIcon :name="leadingIconName" :class="leadingIconClass" />
</slot>
</span>
<span
v-if="(isTrailing && trailingIconName) || $slots.trailing"
:class="trailingWrapperIconClass"
>
<slot name="trailing" :disabled="disabled" :loading="loading">
<UIcon :name="trailingIconName" :class="trailingIconClass" />
</slot>
</span -->
</div>
<transition-stub data-v-0fd934a4="" name="slide-fade" mode="out-in" appear="false" persisted="false" css="true">
<!--v-if-->
</transition-stub>
</div>
</div>
</form>"
`;
exports[`Form > zod validation works > with error 1`] = `
"<form class="">
<div data-v-0fd934a4="" class="text-sm">
<div data-v-0fd934a4="" class="">
<!--v-if-->
<!--v-if-->
</div>
<div data-v-0fd934a4="" class="">
<div class="relative"><input id="email" type="text" name="email" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring-1 ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
<!-- span
v-if="(isLeading && leadingIconName) || $slots.leading"
:class="leadingWrapperIconClass"
>
<slot name="leading" :disabled="disabled" :loading="loading">
<UIcon :name="leadingIconName" :class="leadingIconClass" />
</slot>
</span>
<span
v-if="(isTrailing && trailingIconName) || $slots.trailing"
:class="trailingWrapperIconClass"
>
<slot name="trailing" :disabled="disabled" :loading="loading">
<UIcon :name="trailingIconName" :class="trailingIconClass" />
</slot>
</span -->
</div>
<transition-stub data-v-0fd934a4="" name="slide-fade" mode="out-in" appear="false" persisted="false" css="true">
<!--v-if-->
</transition-stub>
</div>
</div>
<div data-v-0fd934a4="" class="text-sm">
<div data-v-0fd934a4="" class="">
<!--v-if-->
<!--v-if-->
</div>
<div data-v-0fd934a4="" class="">
<div class="relative"><input id="password" type="text" name="password" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm bg-transparent text-gray-900 dark:text-white ring-1 ring-inset ring-red-500 dark:ring-red-400 focus:ring-2 focus:ring-red-500 dark:focus:ring-red-400">
<!-- span
v-if="(isLeading && leadingIconName) || $slots.leading"
:class="leadingWrapperIconClass"
>
<slot name="leading" :disabled="disabled" :loading="loading">
<UIcon :name="leadingIconName" :class="leadingIconClass" />
</slot>
</span>
<span
v-if="(isTrailing && trailingIconName) || $slots.trailing"
:class="trailingWrapperIconClass"
>
<slot name="trailing" :disabled="disabled" :loading="loading">
<UIcon :name="trailingIconName" :class="trailingIconClass" />
</slot>
</span -->
</div>
<transition-stub data-v-0fd934a4="" name="slide-fade" mode="out-in" appear="false" persisted="false" css="true">
<p data-v-0fd934a4="" class="mt-2 text-red-500 dark:text-red-400">Must be at least 8 characters</p>
</transition-stub>
</div>
</div>
</form>"
`;
exports[`Form > zod validation works > without error 1`] = `
"<form class="">
<div data-v-0fd934a4="" class="text-sm">
<div data-v-0fd934a4="" class="">
<!--v-if-->
<!--v-if-->
</div>
<div data-v-0fd934a4="" class="">
<div class="relative"><input id="email" type="text" name="email" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring-1 ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
<!-- span
v-if="(isLeading && leadingIconName) || $slots.leading"
:class="leadingWrapperIconClass"
>
<slot name="leading" :disabled="disabled" :loading="loading">
<UIcon :name="leadingIconName" :class="leadingIconClass" />
</slot>
</span>
<span
v-if="(isTrailing && trailingIconName) || $slots.trailing"
:class="trailingWrapperIconClass"
>
<slot name="trailing" :disabled="disabled" :loading="loading">
<UIcon :name="trailingIconName" :class="trailingIconClass" />
</slot>
</span -->
</div>
<transition-stub data-v-0fd934a4="" name="slide-fade" mode="out-in" appear="false" persisted="false" css="true">
<!--v-if-->
</transition-stub>
</div>
</div>
<div data-v-0fd934a4="" class="text-sm">
<div data-v-0fd934a4="" class="">
<!--v-if-->
<!--v-if-->
</div>
<div data-v-0fd934a4="" class="">
<div class="relative"><input id="password" type="text" name="password" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring-1 ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
<!-- span
v-if="(isLeading && leadingIconName) || $slots.leading"
:class="leadingWrapperIconClass"
>
<slot name="leading" :disabled="disabled" :loading="loading">
<UIcon :name="leadingIconName" :class="leadingIconClass" />
</slot>
</span>
<span
v-if="(isTrailing && trailingIconName) || $slots.trailing"
:class="trailingWrapperIconClass"
>
<slot name="trailing" :disabled="disabled" :loading="loading">
<UIcon :name="trailingIconName" :class="trailingIconClass" />
</slot>
</span -->
</div>
<transition-stub data-v-0fd934a4="" name="slide-fade" mode="out-in" appear="false" persisted="false" css="true">
<!--v-if-->
</transition-stub>
</div>
</div>
</form>"
`;

202
test/components/__snapshots__/FormField.spec.ts.snap Normal file
View File

@@ -0,0 +1,202 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`FormField > renders with class correctly 1`] = `
"<div data-v-0fd934a4="" class="text-sm relative">
<div data-v-0fd934a4="" class="">
<!--v-if-->
<!--v-if-->
</div>
<div data-v-0fd934a4="" class="">
<transition-stub data-v-0fd934a4="" name="slide-fade" mode="out-in" appear="false" persisted="false" css="true">
<!--v-if-->
</transition-stub>
</div>
</div>"
`;
exports[`FormField > renders with default slot correctly 1`] = `
"<div data-v-0fd934a4="" class="text-sm">
<div data-v-0fd934a4="" class="">
<!--v-if-->
<!--v-if-->
</div>
<div data-v-0fd934a4="" class="">Default slot<transition-stub data-v-0fd934a4="" name="slide-fade" mode="out-in" appear="false" persisted="false" css="true">
<!--v-if-->
</transition-stub>
</div>
</div>"
`;
exports[`FormField > renders with description slot correctly 1`] = `
"<div data-v-0fd934a4="" class="text-sm">
<div data-v-0fd934a4="" class="">
<!--v-if-->
<!--v-if-->
</div>
<div data-v-0fd934a4="" class="">
<transition-stub data-v-0fd934a4="" name="slide-fade" mode="out-in" appear="false" persisted="false" css="true">
<!--v-if-->
</transition-stub>
</div>
</div>"
`;
exports[`FormField > renders with error correctly 1`] = `
"<div data-v-0fd934a4="" class="text-sm">
<div data-v-0fd934a4="" class="">
<!--v-if-->
<!--v-if-->
</div>
<div data-v-0fd934a4="" class="">
<transition-stub data-v-0fd934a4="" name="slide-fade" mode="out-in" appear="false" persisted="false" css="true">
<p data-v-0fd934a4="" class="mt-2 text-red-500 dark:text-red-400">Username is already taken</p>
</transition-stub>
</div>
</div>"
`;
exports[`FormField > renders with error slot correctly 1`] = `
"<div data-v-0fd934a4="" class="text-sm">
<div data-v-0fd934a4="" class="">
<!--v-if-->
<!--v-if-->
</div>
<div data-v-0fd934a4="" class="">
<transition-stub data-v-0fd934a4="" name="slide-fade" mode="out-in" appear="false" persisted="false" css="true">
<!--v-if-->
</transition-stub>
</div>
</div>"
`;
exports[`FormField > renders with help correctly 1`] = `
"<div data-v-0fd934a4="" class="text-sm">
<div data-v-0fd934a4="" class="">
<!--v-if-->
<!--v-if-->
</div>
<div data-v-0fd934a4="" class="">
<transition-stub data-v-0fd934a4="" name="slide-fade" mode="out-in" appear="false" persisted="false" css="true">
<p data-v-0fd934a4="" class="mt-2 text-gray-500 dark:text-gray-400">Username must be unique</p>
</transition-stub>
</div>
</div>"
`;
exports[`FormField > renders with help slot correctly 1`] = `
"<div data-v-0fd934a4="" class="text-sm">
<div data-v-0fd934a4="" class="">
<!--v-if-->
<!--v-if-->
</div>
<div data-v-0fd934a4="" class="">
<transition-stub data-v-0fd934a4="" name="slide-fade" mode="out-in" appear="false" persisted="false" css="true">
<!--v-if-->
</transition-stub>
</div>
</div>"
`;
exports[`FormField > renders with hint correctly 1`] = `
"<div data-v-0fd934a4="" class="text-sm">
<div data-v-0fd934a4="" class="">
<!--v-if-->
<!--v-if-->
</div>
<div data-v-0fd934a4="" class="">
<transition-stub data-v-0fd934a4="" name="slide-fade" mode="out-in" appear="false" persisted="false" css="true">
<!--v-if-->
</transition-stub>
</div>
</div>"
`;
exports[`FormField > renders with hint slot correctly 1`] = `
"<div data-v-0fd934a4="" class="text-sm">
<div data-v-0fd934a4="" class="">
<!--v-if-->
<!--v-if-->
</div>
<div data-v-0fd934a4="" class="">
<transition-stub data-v-0fd934a4="" name="slide-fade" mode="out-in" appear="false" persisted="false" css="true">
<!--v-if-->
</transition-stub>
</div>
</div>"
`;
exports[`FormField > renders with label and description correctly 1`] = `
"<div data-v-0fd934a4="" class="text-sm">
<div data-v-0fd934a4="" class="">
<div data-v-0fd934a4="" class="flex content-center items-center justify-between"><label data-v-0fd934a4="" for="0" class="block font-medium text-gray-700 dark:text-gray-200">Username</label>
<!--v-if-->
</div>
<p data-v-0fd934a4="" class="text-gray-500 dark:text-gray-400">Enter your username</p>
</div>
<div data-v-0fd934a4="" class="mt-1 relative">
<transition-stub data-v-0fd934a4="" name="slide-fade" mode="out-in" appear="false" persisted="false" css="true">
<!--v-if-->
</transition-stub>
</div>
</div>"
`;
exports[`FormField > renders with label slot correctly 1`] = `
"<div data-v-0fd934a4="" class="text-sm">
<div data-v-0fd934a4="" class="">
<!--v-if-->
<!--v-if-->
</div>
<div data-v-0fd934a4="" class="">
<transition-stub data-v-0fd934a4="" name="slide-fade" mode="out-in" appear="false" persisted="false" css="true">
<!--v-if-->
</transition-stub>
</div>
</div>"
`;
exports[`FormField > renders with required correctly 1`] = `
"<div data-v-0fd934a4="" class="text-sm">
<div data-v-0fd934a4="" class="">
<div data-v-0fd934a4="" class="flex content-center items-center justify-between"><label data-v-0fd934a4="" for="2" class="block font-medium text-gray-700 dark:text-gray-200 after:content-['*'] after:ms-0.5 after:text-red-500 dark:after:text-red-400">Username</label>
<!--v-if-->
</div>
<!--v-if-->
</div>
<div data-v-0fd934a4="" class="mt-1 relative">
<transition-stub data-v-0fd934a4="" name="slide-fade" mode="out-in" appear="false" persisted="false" css="true">
<!--v-if-->
</transition-stub>
</div>
</div>"
`;
exports[`FormField > renders with size correctly 1`] = `
"<div data-v-0fd934a4="" class="text-base">
<div data-v-0fd934a4="" class="">
<div data-v-0fd934a4="" class="flex content-center items-center justify-between"><label data-v-0fd934a4="" for="1" class="block font-medium text-gray-700 dark:text-gray-200">Username</label>
<!--v-if-->
</div>
<p data-v-0fd934a4="" class="text-gray-500 dark:text-gray-400">Enter your username</p>
</div>
<div data-v-0fd934a4="" class="mt-1 relative">
<transition-stub data-v-0fd934a4="" name="slide-fade" mode="out-in" appear="false" persisted="false" css="true">
<!--v-if-->
</transition-stub>
</div>
</div>"
`;
exports[`FormField > renders with ui correctly 1`] = `
"<div data-v-0fd934a4="" class="text-sm">
<div data-v-0fd934a4="" class="">
<!--v-if-->
<!--v-if-->
</div>
<div data-v-0fd934a4="" class="">
<transition-stub data-v-0fd934a4="" name="slide-fade" mode="out-in" appear="false" persisted="false" css="true">
<!--v-if-->
</transition-stub>
</div>
</div>"
`;

199
test/components/__snapshots__/Input.spec.ts.snap Normal file
View File

@@ -0,0 +1,199 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`Input > renders basic case correctly 1`] = `
"<div class="relative"><input type="text" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring-1 ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
<!-- span
v-if="(isLeading && leadingIconName) || $slots.leading"
:class="leadingWrapperIconClass"
>
<slot name="leading" :disabled="disabled" :loading="loading">
<UIcon :name="leadingIconName" :class="leadingIconClass" />
</slot>
</span>
<span
v-if="(isTrailing && trailingIconName) || $slots.trailing"
:class="trailingWrapperIconClass"
>
<slot name="trailing" :disabled="disabled" :loading="loading">
<UIcon :name="trailingIconName" :class="trailingIconClass" />
</slot>
</span -->
</div>"
`;
exports[`Input > renders with color correctly 1`] = `
"<div class="relative"><input type="text" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm bg-transparent text-gray-900 dark:text-white ring-1 ring-inset ring-red-500 dark:ring-red-400 focus:ring-2 focus:ring-red-500 dark:focus:ring-red-400">
<!-- span
v-if="(isLeading && leadingIconName) || $slots.leading"
:class="leadingWrapperIconClass"
>
<slot name="leading" :disabled="disabled" :loading="loading">
<UIcon :name="leadingIconName" :class="leadingIconClass" />
</slot>
</span>
<span
v-if="(isTrailing && trailingIconName) || $slots.trailing"
:class="trailingWrapperIconClass"
>
<slot name="trailing" :disabled="disabled" :loading="loading">
<UIcon :name="trailingIconName" :class="trailingIconClass" />
</slot>
</span -->
</div>"
`;
exports[`Input > renders with disabled correctly 1`] = `
"<div class="relative"><input type="text" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring-1 ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400" disabled="">
<!-- span
v-if="(isLeading && leadingIconName) || $slots.leading"
:class="leadingWrapperIconClass"
>
<slot name="leading" :disabled="disabled" :loading="loading">
<UIcon :name="leadingIconName" :class="leadingIconClass" />
</slot>
</span>
<span
v-if="(isTrailing && trailingIconName) || $slots.trailing"
:class="trailingWrapperIconClass"
>
<slot name="trailing" :disabled="disabled" :loading="loading">
<UIcon :name="trailingIconName" :class="trailingIconClass" />
</slot>
</span -->
</div>"
`;
exports[`Input > renders with name correctly 1`] = `
"<div class="relative"><input type="text" name="username" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring-1 ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
<!-- span
v-if="(isLeading && leadingIconName) || $slots.leading"
:class="leadingWrapperIconClass"
>
<slot name="leading" :disabled="disabled" :loading="loading">
<UIcon :name="leadingIconName" :class="leadingIconClass" />
</slot>
</span>
<span
v-if="(isTrailing && trailingIconName) || $slots.trailing"
:class="trailingWrapperIconClass"
>
<slot name="trailing" :disabled="disabled" :loading="loading">
<UIcon :name="trailingIconName" :class="trailingIconClass" />
</slot>
</span -->
</div>"
`;
exports[`Input > renders with placeholder correctly 1`] = `
"<div class="relative"><input type="text" placeholder="Enter your username" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring-1 ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
<!-- span
v-if="(isLeading && leadingIconName) || $slots.leading"
:class="leadingWrapperIconClass"
>
<slot name="leading" :disabled="disabled" :loading="loading">
<UIcon :name="leadingIconName" :class="leadingIconClass" />
</slot>
</span>
<span
v-if="(isTrailing && trailingIconName) || $slots.trailing"
:class="trailingWrapperIconClass"
>
<slot name="trailing" :disabled="disabled" :loading="loading">
<UIcon :name="trailingIconName" :class="trailingIconClass" />
</slot>
</span -->
</div>"
`;
exports[`Input > renders with required correctly 1`] = `
"<div class="relative"><input type="text" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring-1 ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
<!-- span
v-if="(isLeading && leadingIconName) || $slots.leading"
:class="leadingWrapperIconClass"
>
<slot name="leading" :disabled="disabled" :loading="loading">
<UIcon :name="leadingIconName" :class="leadingIconClass" />
</slot>
</span>
<span
v-if="(isTrailing && trailingIconName) || $slots.trailing"
:class="trailingWrapperIconClass"
>
<slot name="trailing" :disabled="disabled" :loading="loading">
<UIcon :name="trailingIconName" :class="trailingIconClass" />
</slot>
</span -->
</div>"
`;
exports[`Input > renders with size correctly 1`] = `
"<div class="relative"><input type="text" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring-1 ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
<!-- span
v-if="(isLeading && leadingIconName) || $slots.leading"
:class="leadingWrapperIconClass"
>
<slot name="leading" :disabled="disabled" :loading="loading">
<UIcon :name="leadingIconName" :class="leadingIconClass" />
</slot>
</span>
<span
v-if="(isTrailing && trailingIconName) || $slots.trailing"
:class="trailingWrapperIconClass"
>
<slot name="trailing" :disabled="disabled" :loading="loading">
<UIcon :name="trailingIconName" :class="trailingIconClass" />
</slot>
</span -->
</div>"
`;
exports[`Input > renders with type correctly 1`] = `
"<div class="relative"><input type="password" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring-1 ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
<!-- span
v-if="(isLeading && leadingIconName) || $slots.leading"
:class="leadingWrapperIconClass"
>
<slot name="leading" :disabled="disabled" :loading="loading">
<UIcon :name="leadingIconName" :class="leadingIconClass" />
</slot>
</span>
<span
v-if="(isTrailing && trailingIconName) || $slots.trailing"
:class="trailingWrapperIconClass"
>
<slot name="trailing" :disabled="disabled" :loading="loading">
<UIcon :name="trailingIconName" :class="trailingIconClass" />
</slot>
</span -->
</div>"
`;
exports[`Input > renders with variant correctly 1`] = `
"<div class="relative"><input type="text" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring-1 ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
<!-- span
v-if="(isLeading && leadingIconName) || $slots.leading"
:class="leadingWrapperIconClass"
>
<slot name="leading" :disabled="disabled" :loading="loading">
<UIcon :name="leadingIconName" :class="leadingIconClass" />
</slot>
</span>
<span
v-if="(isTrailing && trailingIconName) || $slots.trailing"
:class="trailingWrapperIconClass"
>
<slot name="trailing" :disabled="disabled" :loading="loading">
<UIcon :name="trailingIconName" :class="trailingIconClass" />
</slot>
</span -->
</div>"
`;