mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-21 07:21:46 +01:00
Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
4fad9521b2 |
41
CHANGELOG.md
41
CHANGELOG.md
@@ -1,46 +1,5 @@
|
|||||||
# Changelog
|
# Changelog
|
||||||
|
|
||||||
## [3.1.2](https://github.com/nuxt/ui/compare/v3.1.1...v3.1.2) (2025-05-15)
|
|
||||||
|
|
||||||
### Features
|
|
||||||
|
|
||||||
* **Badge:** add `square` prop ([#4008](https://github.com/nuxt/ui/issues/4008)) ([894e8a6](https://github.com/nuxt/ui/commit/894e8a61b6fea3618fc863bd77678385e9d021c2))
|
|
||||||
* **CheckboxGroup:** add `table` variant ([#3997](https://github.com/nuxt/ui/issues/3997)) ([1b6ab27](https://github.com/nuxt/ui/commit/1b6ab271ea3875a7c77ffe9367c7c341083dd53c))
|
|
||||||
* **components:** add `ui` field in items ([#4060](https://github.com/nuxt/ui/issues/4060)) ([b9adc83](https://github.com/nuxt/ui/commit/b9adc83e787db02507e6e7bb1aabc684eccc197b))
|
|
||||||
* **InputNumber:** add `increment-disabled` / `decrement-disabled` props ([#4141](https://github.com/nuxt/ui/issues/4141)) ([c7fba2e](https://github.com/nuxt/ui/commit/c7fba2e0ebfb7153f3bfb727165d653bbd3dbe54))
|
|
||||||
* **locale:** add Slovenian language ([#4140](https://github.com/nuxt/ui/issues/4140)) ([e86dc79](https://github.com/nuxt/ui/commit/e86dc79e51b2773a77ada5f12d4f0964fbc83354))
|
|
||||||
* **NavigationMenu:** add `collapsible` field in items ([2be60cd](https://github.com/nuxt/ui/commit/2be60cddfe10fd1e2466900fd53e21ee0c877227)), closes [#3353](https://github.com/nuxt/ui/issues/3353) [#3911](https://github.com/nuxt/ui/issues/3911)
|
|
||||||
* **NavigationMenu:** handle `tooltip` in items ([46c2987](https://github.com/nuxt/ui/commit/46c2987ebfd30b2b071a96a745b7270e852e96de)), closes [#4050](https://github.com/nuxt/ui/issues/4050)
|
|
||||||
* **Slider:** handle `tooltip` around thumbs ([d140acc](https://github.com/nuxt/ui/commit/d140acc608c6ae11c0a0531fe443588776ea7807)), closes [#1469](https://github.com/nuxt/ui/issues/1469)
|
|
||||||
* **Toast:** add `progress` prop to hide progress bar ([#4125](https://github.com/nuxt/ui/issues/4125)) ([92632e9](https://github.com/nuxt/ui/commit/92632e969eaa11521a166e50e346753929b7f523))
|
|
||||||
|
|
||||||
### Bug Fixes
|
|
||||||
|
|
||||||
* **Badge/Button:** handle zero value in label correctly ([#4108](https://github.com/nuxt/ui/issues/4108)) ([f244d15](https://github.com/nuxt/ui/commit/f244d15b96d97cd8ba34ba9c18f23965e17e3cef))
|
|
||||||
* **ButtonGroup:** add `z-index` on focused element ([204953b](https://github.com/nuxt/ui/commit/204953b780bde08dbfde230fc8887674449227b7))
|
|
||||||
* **Calendar:** wrong color for today date with `neutral` color ([7d51a9e](https://github.com/nuxt/ui/commit/7d51a9e479cb6105ea37759c5cd67ff9f7702c49)), closes [#4084](https://github.com/nuxt/ui/issues/4084) [#3629](https://github.com/nuxt/ui/issues/3629)
|
|
||||||
* **Checkbox/RadioGroup:** render correct element without `variant` ([f2fd778](https://github.com/nuxt/ui/commit/f2fd778c0a604f2d65aec9f3fe2d54b6d4e8c3a2)), closes [#3998](https://github.com/nuxt/ui/issues/3998)
|
|
||||||
* **CheckboxGroup:** relative `UCheckbox` import ([7551a85](https://github.com/nuxt/ui/commit/7551a85ad2d92b59e2909396affb862403d5b27a)), closes [#4090](https://github.com/nuxt/ui/issues/4090)
|
|
||||||
* **ColorPicker:** make thumb touch draggable ([#4101](https://github.com/nuxt/ui/issues/4101)) ([cc20a26](https://github.com/nuxt/ui/commit/cc20a26f07268d19119ab4c7c254033143bb63f4))
|
|
||||||
* **components:** `class` should have priority over `ui` prop ([e6e510b](https://github.com/nuxt/ui/commit/e6e510b848d995a286a51d50a120d67483e11232))
|
|
||||||
* **FormField:** block form field injection after use ([#4150](https://github.com/nuxt/ui/issues/4150)) ([d79da9d](https://github.com/nuxt/ui/commit/d79da9d7b60c9972af64acd8e6eef4ae7d6bc3eb))
|
|
||||||
* **FormField:** use `div` for `error` and `help` slots ([459a041](https://github.com/nuxt/ui/commit/459a0410ab729fde60865e84632b36903465f57e))
|
|
||||||
* **inertia:** link always render as anchor tag ([#3989](https://github.com/nuxt/ui/issues/3989)) ([e81464a](https://github.com/nuxt/ui/commit/e81464a43ede4e63ce3dc92429bbfef48614f731))
|
|
||||||
* **inertia:** make `useAppConfig` reactive ([12303a8](https://github.com/nuxt/ui/commit/12303a87be62dae84ef774e3a9795deb0ac90cc7))
|
|
||||||
* **Input/Textarea:** handle generic types ([3c8d6cd](https://github.com/nuxt/ui/commit/3c8d6cd01dfafed5844c376f52adbdda0c814420)), closes [nuxt/ui-pro#887](https://github.com/nuxt/ui-pro/issues/887)
|
|
||||||
* **InputNumber:** handle inside button group ([2e4c308](https://github.com/nuxt/ui/commit/2e4c3082a1e66fa597086dc3431fec37fa29ef62)), closes [#4155](https://github.com/nuxt/ui/issues/4155)
|
|
||||||
* **Link:** consistent behavior between nuxt, vue and inertia ([#4134](https://github.com/nuxt/ui/issues/4134)) ([67da90a](https://github.com/nuxt/ui/commit/67da90a2f638124f640c4271d3376c5ff3fab6a1))
|
|
||||||
* **module:** configure `@nuxt/fonts` with default weights ([276268d](https://github.com/nuxt/ui/commit/276268d311f57715cec47bc600a0ccc3d3885682))
|
|
||||||
* **NavigationMenu:** arrow position conflict ([#4137](https://github.com/nuxt/ui/issues/4137)) ([0dc4678](https://github.com/nuxt/ui/commit/0dc4678c68e4b500be49c38336dc75b73843e38d))
|
|
||||||
* **Select:** support more primitive types in `value` field ([#4105](https://github.com/nuxt/ui/issues/4105)) ([09b4699](https://github.com/nuxt/ui/commit/09b4699aeadaa195ea081509f8e237bb2c346238))
|
|
||||||
* **Slider:** handle generic types ([d7a4d02](https://github.com/nuxt/ui/commit/d7a4d029b77d2dfa0b8efcd2755d482fa5e31fd3))
|
|
||||||
* **Stepper:** use `div` tag for `title` & `description` ([a57844e](https://github.com/nuxt/ui/commit/a57844e41676c13ed1af861424961b88cee7b4da)), closes [#4096](https://github.com/nuxt/ui/issues/4096)
|
|
||||||
* **Tabs:** prevent trigger truncate without parent width ([06e5689](https://github.com/nuxt/ui/commit/06e5689da80b36205d0548d5d6b58510938e4a6e)), closes [#4056](https://github.com/nuxt/ui/issues/4056)
|
|
||||||
* **Tabs:** set `focus:outline-none` with `link` variant ([999a0f8](https://github.com/nuxt/ui/commit/999a0f84671fad20fa3dc50c6774af2e0200b32e))
|
|
||||||
* **templates:** dont write unused variants in theme files ([d3df3bb](https://github.com/nuxt/ui/commit/d3df3bb929fe6732f27b182d1664213884a662ec))
|
|
||||||
* **Toaster:** allow `base` slot override ([c63d2f3](https://github.com/nuxt/ui/commit/c63d2f380aac16f1d1e812516df3dca7fa7c8034))
|
|
||||||
* **vue:** make `useAppConfig` reactive ([869c070](https://github.com/nuxt/ui/commit/869c0708bd351c7be44e5e430c348b19dd316db9)), closes [#3952](https://github.com/nuxt/ui/issues/3952)
|
|
||||||
|
|
||||||
## [3.1.1](https://github.com/nuxt/ui/compare/v3.1.0...v3.1.1) (2025-05-02)
|
## [3.1.1](https://github.com/nuxt/ui/compare/v3.1.0...v3.1.1) (2025-05-02)
|
||||||
|
|
||||||
### Features
|
### Features
|
||||||
|
|||||||
@@ -0,0 +1,47 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import type { FormError } from '@nuxt/ui'
|
||||||
|
|
||||||
|
const state = reactive({
|
||||||
|
email: undefined,
|
||||||
|
password: undefined
|
||||||
|
})
|
||||||
|
|
||||||
|
const form = useTemplateRef('form')
|
||||||
|
|
||||||
|
const validate = (state: any): FormError[] => {
|
||||||
|
const errors = []
|
||||||
|
if (!state.email) errors.push({ name: 'email', message: 'Required' })
|
||||||
|
if (!state.password) errors.push({ name: 'password', message: 'Required' })
|
||||||
|
return errors
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<UForm ref="form" :validate="validate" :state="state" class="space-y-4">
|
||||||
|
<UFormField
|
||||||
|
label="Email"
|
||||||
|
name="email"
|
||||||
|
:ui="{
|
||||||
|
error: 'data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]'
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<UInput v-model="state.email" />
|
||||||
|
</UFormField>
|
||||||
|
|
||||||
|
<UFormField
|
||||||
|
label="Password"
|
||||||
|
name="password"
|
||||||
|
:ui="{
|
||||||
|
error: 'data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]'
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<UInput v-model="state.password" type="password" />
|
||||||
|
</UFormField>
|
||||||
|
|
||||||
|
<div class="flex gap-2">
|
||||||
|
<UButton label="Submit" type="submit" color="neutral" />
|
||||||
|
|
||||||
|
<UButton label="Clear" color="neutral" variant="outline" @click="form?.clear()" />
|
||||||
|
</div>
|
||||||
|
</UForm>
|
||||||
|
</template>
|
||||||
@@ -1,20 +1,8 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
const route = useRoute()
|
const route = useRoute()
|
||||||
const colorMode = useColorMode()
|
|
||||||
const appConfig = useAppConfig()
|
|
||||||
|
|
||||||
const name = route.params.slug?.[0]
|
const name = route.params.slug?.[0]
|
||||||
|
|
||||||
if (route.query.theme) {
|
|
||||||
colorMode.preference = route.query.theme === 'light' ? 'light' : 'dark'
|
|
||||||
}
|
|
||||||
if (route.query.neutral) {
|
|
||||||
appConfig.ui.colors.neutral = route.query.neutral as string
|
|
||||||
}
|
|
||||||
if (route.query.primary) {
|
|
||||||
appConfig.ui.colors.primary = route.query.primary as string
|
|
||||||
}
|
|
||||||
|
|
||||||
const width = computed(() => route.query.width && Number.parseInt(route.query.width as string) > 0 ? `${Number.parseInt(route.query.width as string) - 2}px` : '864px')
|
const width = computed(() => route.query.width && Number.parseInt(route.query.width as string) > 0 ? `${Number.parseInt(route.query.width as string) - 2}px` : '864px')
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@@ -229,10 +229,6 @@ export default defineConfig({
|
|||||||
|
|
||||||
::
|
::
|
||||||
|
|
||||||
::caution
|
|
||||||
When configuring your theme colors, you must use either color names from the [default Tailwind palette](https://tailwindcss.com/docs/colors) (like 'blue', 'green', etc.) or reference custom colors that you've previously defined in your [CSS file](#theme).
|
|
||||||
::
|
|
||||||
|
|
||||||
### Extend colors
|
### Extend colors
|
||||||
|
|
||||||
::framework-only
|
::framework-only
|
||||||
|
|||||||
@@ -170,6 +170,36 @@ slots:
|
|||||||
:u-input{placeholder="Enter your email" class="w-full"}
|
:u-input{placeholder="Enter your email" class="w-full"}
|
||||||
::
|
::
|
||||||
|
|
||||||
|
## Examples
|
||||||
|
|
||||||
|
### With error animation
|
||||||
|
|
||||||
|
You can animate the `error` slot by using the `ui` prop.
|
||||||
|
|
||||||
|
::component-example
|
||||||
|
---
|
||||||
|
collapse: true
|
||||||
|
name: 'form-field-error-animation-example'
|
||||||
|
---
|
||||||
|
::
|
||||||
|
|
||||||
|
::tip
|
||||||
|
You can also configure this globally in your `app.config.ts`:
|
||||||
|
|
||||||
|
```ts
|
||||||
|
export default defineAppConfig({
|
||||||
|
ui: {
|
||||||
|
formField: {
|
||||||
|
slots: {
|
||||||
|
error: 'data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
::
|
||||||
|
|
||||||
## API
|
## API
|
||||||
|
|
||||||
### Props
|
### Props
|
||||||
|
|||||||
@@ -5,9 +5,9 @@
|
|||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@ai-sdk/vue": "^1.2.12",
|
"@ai-sdk/vue": "^1.2.12",
|
||||||
"@iconify-json/logos": "^1.2.4",
|
"@iconify-json/logos": "^1.2.4",
|
||||||
"@iconify-json/lucide": "^1.2.43",
|
"@iconify-json/lucide": "^1.2.42",
|
||||||
"@iconify-json/simple-icons": "^1.2.34",
|
"@iconify-json/simple-icons": "^1.2.34",
|
||||||
"@iconify-json/vscode-icons": "^1.2.21",
|
"@iconify-json/vscode-icons": "^1.2.20",
|
||||||
"@nuxt/content": "^3.5.1",
|
"@nuxt/content": "^3.5.1",
|
||||||
"@nuxt/image": "^1.10.0",
|
"@nuxt/image": "^1.10.0",
|
||||||
"@nuxt/ui": "latest",
|
"@nuxt/ui": "latest",
|
||||||
@@ -16,8 +16,8 @@
|
|||||||
"@nuxtjs/plausible": "^1.2.0",
|
"@nuxtjs/plausible": "^1.2.0",
|
||||||
"@octokit/rest": "^21.1.1",
|
"@octokit/rest": "^21.1.1",
|
||||||
"@rollup/plugin-yaml": "^4.1.2",
|
"@rollup/plugin-yaml": "^4.1.2",
|
||||||
"@vueuse/integrations": "^13.2.0",
|
"@vueuse/integrations": "^13.1.0",
|
||||||
"@vueuse/nuxt": "^13.2.0",
|
"@vueuse/nuxt": "^13.1.0",
|
||||||
"ai": "^4.3.15",
|
"ai": "^4.3.15",
|
||||||
"capture-website": "^4.2.0",
|
"capture-website": "^4.2.0",
|
||||||
"joi": "^17.13.3",
|
"joi": "^17.13.3",
|
||||||
@@ -32,11 +32,11 @@
|
|||||||
"superstruct": "^2.0.2",
|
"superstruct": "^2.0.2",
|
||||||
"ufo": "^1.6.1",
|
"ufo": "^1.6.1",
|
||||||
"valibot": "^1.1.0",
|
"valibot": "^1.1.0",
|
||||||
"workers-ai-provider": "^0.4.1",
|
"workers-ai-provider": "^0.3.2",
|
||||||
"yup": "^1.6.1",
|
"yup": "^1.6.1",
|
||||||
"zod": "^3.24.4"
|
"zod": "^3.24.4"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"wrangler": "^4.15.1"
|
"wrangler": "^4.14.4"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
14
package.json
14
package.json
@@ -1,8 +1,8 @@
|
|||||||
{
|
{
|
||||||
"name": "@nuxt/ui",
|
"name": "@nuxt/ui",
|
||||||
"description": "A UI Library for Modern Web Apps, powered by Vue & Tailwind CSS.",
|
"description": "A UI Library for Modern Web Apps, powered by Vue & Tailwind CSS.",
|
||||||
"version": "3.1.2",
|
"version": "3.1.1",
|
||||||
"packageManager": "pnpm@10.11.0",
|
"packageManager": "pnpm@10.10.0",
|
||||||
"repository": {
|
"repository": {
|
||||||
"type": "git",
|
"type": "git",
|
||||||
"url": "git+https://github.com/nuxt/ui.git"
|
"url": "git+https://github.com/nuxt/ui.git"
|
||||||
@@ -115,7 +115,7 @@
|
|||||||
"@iconify/vue": "^4.3.0",
|
"@iconify/vue": "^4.3.0",
|
||||||
"@internationalized/date": "^3.8.0",
|
"@internationalized/date": "^3.8.0",
|
||||||
"@internationalized/number": "^3.6.1",
|
"@internationalized/number": "^3.6.1",
|
||||||
"@nuxt/fonts": "^0.11.4",
|
"@nuxt/fonts": "^0.11.3",
|
||||||
"@nuxt/icon": "^1.12.0",
|
"@nuxt/icon": "^1.12.0",
|
||||||
"@nuxt/kit": "^3.17.3",
|
"@nuxt/kit": "^3.17.3",
|
||||||
"@nuxt/schema": "^3.17.3",
|
"@nuxt/schema": "^3.17.3",
|
||||||
@@ -125,8 +125,8 @@
|
|||||||
"@tailwindcss/vite": "^4.1.6",
|
"@tailwindcss/vite": "^4.1.6",
|
||||||
"@tanstack/vue-table": "^8.21.3",
|
"@tanstack/vue-table": "^8.21.3",
|
||||||
"@unhead/vue": "^2.0.8",
|
"@unhead/vue": "^2.0.8",
|
||||||
"@vueuse/core": "^13.2.0",
|
"@vueuse/core": "^13.1.0",
|
||||||
"@vueuse/integrations": "^13.2.0",
|
"@vueuse/integrations": "^13.1.0",
|
||||||
"colortranslator": "^4.1.0",
|
"colortranslator": "^4.1.0",
|
||||||
"consola": "^3.4.2",
|
"consola": "^3.4.2",
|
||||||
"defu": "^6.1.4",
|
"defu": "^6.1.4",
|
||||||
@@ -149,7 +149,7 @@
|
|||||||
"tailwind-variants": "^1.0.0",
|
"tailwind-variants": "^1.0.0",
|
||||||
"tailwindcss": "^4.1.6",
|
"tailwindcss": "^4.1.6",
|
||||||
"tinyglobby": "^0.2.13",
|
"tinyglobby": "^0.2.13",
|
||||||
"unplugin": "^2.3.4",
|
"unplugin": "^2.3.2",
|
||||||
"unplugin-auto-import": "^19.2.0",
|
"unplugin-auto-import": "^19.2.0",
|
||||||
"unplugin-vue-components": "^28.5.0",
|
"unplugin-vue-components": "^28.5.0",
|
||||||
"vaul-vue": "^0.4.1",
|
"vaul-vue": "^0.4.1",
|
||||||
@@ -209,7 +209,7 @@
|
|||||||
"debug": "4.3.7",
|
"debug": "4.3.7",
|
||||||
"rollup": "4.34.9",
|
"rollup": "4.34.9",
|
||||||
"unimport": "4.1.1",
|
"unimport": "4.1.1",
|
||||||
"unplugin": "^2.3.4"
|
"unplugin": "^2.3.2"
|
||||||
},
|
},
|
||||||
"pnpm": {
|
"pnpm": {
|
||||||
"onlyBuiltDependencies": [
|
"onlyBuiltDependencies": [
|
||||||
|
|||||||
@@ -11,7 +11,7 @@
|
|||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@nuxt/ui": "latest",
|
"@nuxt/ui": "latest",
|
||||||
"vue": "^3.5.14",
|
"vue": "^3.5.13",
|
||||||
"vue-router": "^4.5.1",
|
"vue-router": "^4.5.1",
|
||||||
"zod": "^3.24.4"
|
"zod": "^3.24.4"
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -9,7 +9,7 @@
|
|||||||
"typecheck": "nuxt typecheck"
|
"typecheck": "nuxt typecheck"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@iconify-json/lucide": "^1.2.43",
|
"@iconify-json/lucide": "^1.2.42",
|
||||||
"@iconify-json/simple-icons": "^1.2.34",
|
"@iconify-json/simple-icons": "^1.2.34",
|
||||||
"@nuxt/ui": "latest",
|
"@nuxt/ui": "latest",
|
||||||
"@nuxthub/core": "^0.8.27",
|
"@nuxthub/core": "^0.8.27",
|
||||||
|
|||||||
614
pnpm-lock.yaml
generated
614
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
@@ -91,21 +91,12 @@ export default defineNuxtModule<ModuleOptions>({
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
await registerModule('@nuxt/icon', 'icon', {
|
await registerModule('@nuxt/icon', 'icon', { cssLayer: 'components' })
|
||||||
cssLayer: 'components'
|
|
||||||
})
|
|
||||||
if (options.fonts) {
|
if (options.fonts) {
|
||||||
await registerModule('@nuxt/fonts', 'fonts', {
|
await registerModule('@nuxt/fonts', 'fonts', {})
|
||||||
defaults: {
|
|
||||||
weights: [400, 500, 600, 700]
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
}
|
||||||
if (options.colorMode) {
|
if (options.colorMode) {
|
||||||
await registerModule('@nuxtjs/color-mode', 'colorMode', {
|
await registerModule('@nuxtjs/color-mode', 'colorMode', { classSuffix: '', disableTransition: true })
|
||||||
classSuffix: '',
|
|
||||||
disableTransition: true
|
|
||||||
})
|
|
||||||
}
|
}
|
||||||
|
|
||||||
addPlugin({ src: resolve('./runtime/plugins/colors') })
|
addPlugin({ src: resolve('./runtime/plugins/colors') })
|
||||||
|
|||||||
@@ -86,9 +86,9 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.breadcrumb |
|
|||||||
<Primitive :as="as" aria-label="breadcrumb" :class="ui.root({ class: [props.ui?.root, props.class] })">
|
<Primitive :as="as" aria-label="breadcrumb" :class="ui.root({ class: [props.ui?.root, props.class] })">
|
||||||
<ol :class="ui.list({ class: props.ui?.list })">
|
<ol :class="ui.list({ class: props.ui?.list })">
|
||||||
<template v-for="(item, index) in items" :key="index">
|
<template v-for="(item, index) in items" :key="index">
|
||||||
<li :class="ui.item({ class: [props.ui?.item, item.ui?.item] })">
|
<li :class="ui.item({ class: [props.ui?.item, item.ui?.item, item.class] })">
|
||||||
<ULink v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(item)" custom>
|
<ULink v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(item)" custom>
|
||||||
<ULinkBase v-bind="slotProps" as="span" :aria-current="active && (index === items!.length - 1) ? 'page' : undefined" :class="ui.link({ class: [props.ui?.link, item.ui?.link, item.class], active: index === items!.length - 1, disabled: !!item.disabled, to: !!item.to })">
|
<ULinkBase v-bind="slotProps" as="span" :aria-current="active && (index === items!.length - 1) ? 'page' : undefined" :class="ui.link({ class: [props.ui?.link, item.ui?.link], active: index === items!.length - 1, disabled: !!item.disabled, to: !!item.to })">
|
||||||
<slot :name="((item.slot || 'item') as keyof BreadcrumbSlots<T>)" :item="item" :index="index">
|
<slot :name="((item.slot || 'item') as keyof BreadcrumbSlots<T>)" :item="item" :index="index">
|
||||||
<slot :name="((item.slot ? `${item.slot}-leading`: 'item-leading') as keyof BreadcrumbSlots<T>)" :item="item" :active="index === items!.length - 1" :index="index">
|
<slot :name="((item.slot ? `${item.slot}-leading`: 'item-leading') as keyof BreadcrumbSlots<T>)" :item="item" :active="index === items!.length - 1" :index="index">
|
||||||
<UIcon v-if="item.icon" :name="item.icon" :class="ui.linkLeadingIcon({ class: [props.ui?.linkLeadingIcon, item.ui?.linkLeadingIcon], active: index === items!.length - 1 })" />
|
<UIcon v-if="item.icon" :name="item.icon" :class="ui.linkLeadingIcon({ class: [props.ui?.linkLeadingIcon, item.ui?.linkLeadingIcon], active: index === items!.length - 1 })" />
|
||||||
|
|||||||
@@ -101,7 +101,7 @@ function onUpdate(value: any) {
|
|||||||
|
|
||||||
<!-- eslint-disable vue/no-template-shadow -->
|
<!-- eslint-disable vue/no-template-shadow -->
|
||||||
<template>
|
<template>
|
||||||
<Primitive :as="(!variant || variant === 'list') ? as : Label" :class="ui.root({ class: [props.ui?.root, props.class] })">
|
<Primitive :as="variant === 'list' ? as : Label" :class="ui.root({ class: [props.ui?.root, props.class] })">
|
||||||
<div :class="ui.container({ class: props.ui?.container })">
|
<div :class="ui.container({ class: props.ui?.container })">
|
||||||
<CheckboxRoot
|
<CheckboxRoot
|
||||||
:id="id"
|
:id="id"
|
||||||
@@ -122,7 +122,7 @@ function onUpdate(value: any) {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div v-if="(label || !!slots.label) || (description || !!slots.description)" :class="ui.wrapper({ class: props.ui?.wrapper })">
|
<div v-if="(label || !!slots.label) || (description || !!slots.description)" :class="ui.wrapper({ class: props.ui?.wrapper })">
|
||||||
<component :is="(!variant || variant === 'list') ? Label : 'p'" v-if="label || !!slots.label" :for="id" :class="ui.label({ class: props.ui?.label })">
|
<component :is="variant === 'list' ? Label : 'p'" v-if="label || !!slots.label" :for="id" :class="ui.label({ class: props.ui?.label })">
|
||||||
<slot name="label" :label="label">
|
<slot name="label" :label="label">
|
||||||
{{ label }}
|
{{ label }}
|
||||||
</slot>
|
</slot>
|
||||||
|
|||||||
@@ -48,7 +48,7 @@ export interface FormFieldSlots {
|
|||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { computed, ref, inject, provide, type Ref, useId } from 'vue'
|
import { computed, ref, inject, provide, type Ref, useId } from 'vue'
|
||||||
import { Primitive, Label } from 'reka-ui'
|
import { Primitive, Presence, Label } from 'reka-ui'
|
||||||
import { useAppConfig } from '#imports'
|
import { useAppConfig } from '#imports'
|
||||||
import { formFieldInjectionKey, inputIdInjectionKey } from '../composables/useFormField'
|
import { formFieldInjectionKey, inputIdInjectionKey } from '../composables/useFormField'
|
||||||
import { tv } from '../utils/tv'
|
import { tv } from '../utils/tv'
|
||||||
@@ -68,6 +68,8 @@ const formErrors = inject<Ref<FormError[]> | null>('form-errors', null)
|
|||||||
|
|
||||||
const error = computed(() => props.error || formErrors?.value?.find(error => error.name && (error.name === props.name || (props.errorPattern && error.name.match(props.errorPattern))))?.message)
|
const error = computed(() => props.error || formErrors?.value?.find(error => error.name && (error.name === props.name || (props.errorPattern && error.name.match(props.errorPattern))))?.message)
|
||||||
|
|
||||||
|
const hasError = computed(() => !!(typeof error.value === 'string' && error.value) || !!slots.error)
|
||||||
|
|
||||||
const id = ref(useId())
|
const id = ref(useId())
|
||||||
// Copies id's initial value to bind aria-attributes such as aria-describedby.
|
// Copies id's initial value to bind aria-attributes such as aria-describedby.
|
||||||
// This is required for the RadioGroup component which unsets the id value.
|
// This is required for the RadioGroup component which unsets the id value.
|
||||||
@@ -115,12 +117,15 @@ provide(formFieldInjectionKey, computed(() => ({
|
|||||||
<div :class="[(label || !!slots.label || description || !!slots.description) && ui.container({ class: props.ui?.container })]">
|
<div :class="[(label || !!slots.label || description || !!slots.description) && ui.container({ class: props.ui?.container })]">
|
||||||
<slot :error="error" />
|
<slot :error="error" />
|
||||||
|
|
||||||
<div v-if="(typeof error === 'string' && error) || !!slots.error" :id="`${ariaId}-error`" :class="ui.error({ class: props.ui?.error })">
|
<Presence v-slot="{ present }" :present="hasError">
|
||||||
<slot name="error" :error="error">
|
<div :id="`${ariaId}-error`" :data-state="present ? 'open' : 'closed'" :class="ui.error({ class: props.ui?.error })">
|
||||||
{{ error }}
|
<slot name="error" :error="error">
|
||||||
</slot>
|
{{ error }}
|
||||||
</div>
|
</slot>
|
||||||
<div v-else-if="help || !!slots.help" :class="ui.help({ class: props.ui?.help })">
|
</div>
|
||||||
|
</Presence>
|
||||||
|
|
||||||
|
<div v-if="!hasError && (help || !!slots.help)" :class="ui.help({ class: props.ui?.help })">
|
||||||
<slot name="help" :help="help">
|
<slot name="help" :help="help">
|
||||||
{{ help }}
|
{{ help }}
|
||||||
</slot>
|
</slot>
|
||||||
|
|||||||
@@ -80,7 +80,6 @@ const slots = defineSlots<InputSlots>()
|
|||||||
const [modelValue, modelModifiers] = defineModel<T>()
|
const [modelValue, modelModifiers] = defineModel<T>()
|
||||||
|
|
||||||
const appConfig = useAppConfig() as Input['AppConfig']
|
const appConfig = useAppConfig() as Input['AppConfig']
|
||||||
|
|
||||||
const { emitFormBlur, emitFormInput, emitFormChange, size: formGroupSize, color, id, name, highlight, disabled, emitFormFocus, ariaAttrs } = useFormField<InputProps>(props, { deferInputValidation: true })
|
const { emitFormBlur, emitFormInput, emitFormChange, size: formGroupSize, color, id, name, highlight, disabled, emitFormFocus, ariaAttrs } = useFormField<InputProps>(props, { deferInputValidation: true })
|
||||||
const { orientation, size: buttonGroupSize } = useButtonGroup<InputProps>(props)
|
const { orientation, size: buttonGroupSize } = useButtonGroup<InputProps>(props)
|
||||||
const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(props)
|
const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(props)
|
||||||
|
|||||||
@@ -36,8 +36,6 @@ export interface InputNumberProps extends Pick<NumberFieldRootProps, 'modelValue
|
|||||||
* @IconifyIcon
|
* @IconifyIcon
|
||||||
*/
|
*/
|
||||||
incrementIcon?: string
|
incrementIcon?: string
|
||||||
/** Disable the increment button. */
|
|
||||||
incrementDisabled?: boolean
|
|
||||||
/**
|
/**
|
||||||
* Configure the decrement button. The `color` and `size` are inherited.
|
* Configure the decrement button. The `color` and `size` are inherited.
|
||||||
* @defaultValue { variant: 'link' }
|
* @defaultValue { variant: 'link' }
|
||||||
@@ -49,8 +47,6 @@ export interface InputNumberProps extends Pick<NumberFieldRootProps, 'modelValue
|
|||||||
* @IconifyIcon
|
* @IconifyIcon
|
||||||
*/
|
*/
|
||||||
decrementIcon?: string
|
decrementIcon?: string
|
||||||
/** Disable the decrement button. */
|
|
||||||
decrementDisabled?: boolean
|
|
||||||
autofocus?: boolean
|
autofocus?: boolean
|
||||||
autofocusDelay?: number
|
autofocusDelay?: number
|
||||||
/**
|
/**
|
||||||
@@ -79,7 +75,6 @@ import { onMounted, ref, computed } from 'vue'
|
|||||||
import { NumberFieldRoot, NumberFieldInput, NumberFieldDecrement, NumberFieldIncrement, useForwardPropsEmits } from 'reka-ui'
|
import { NumberFieldRoot, NumberFieldInput, NumberFieldDecrement, NumberFieldIncrement, useForwardPropsEmits } from 'reka-ui'
|
||||||
import { reactivePick } from '@vueuse/core'
|
import { reactivePick } from '@vueuse/core'
|
||||||
import { useAppConfig } from '#imports'
|
import { useAppConfig } from '#imports'
|
||||||
import { useButtonGroup } from '../composables/useButtonGroup'
|
|
||||||
import { useFormField } from '../composables/useFormField'
|
import { useFormField } from '../composables/useFormField'
|
||||||
import { useLocale } from '../composables/useLocale'
|
import { useLocale } from '../composables/useLocale'
|
||||||
import { tv } from '../utils/tv'
|
import { tv } from '../utils/tv'
|
||||||
@@ -88,31 +83,26 @@ import UButton from './Button.vue'
|
|||||||
defineOptions({ inheritAttrs: false })
|
defineOptions({ inheritAttrs: false })
|
||||||
|
|
||||||
const props = withDefaults(defineProps<InputNumberProps>(), {
|
const props = withDefaults(defineProps<InputNumberProps>(), {
|
||||||
orientation: 'horizontal',
|
orientation: 'horizontal'
|
||||||
disabledIncrement: false,
|
|
||||||
disabledDecrement: false
|
|
||||||
})
|
})
|
||||||
const emits = defineEmits<InputNumberEmits>()
|
const emits = defineEmits<InputNumberEmits>()
|
||||||
defineSlots<InputNumberSlots>()
|
defineSlots<InputNumberSlots>()
|
||||||
|
|
||||||
const { t, code: codeLocale } = useLocale()
|
|
||||||
const appConfig = useAppConfig() as InputNumber['AppConfig']
|
const appConfig = useAppConfig() as InputNumber['AppConfig']
|
||||||
|
|
||||||
const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'modelValue', 'defaultValue', 'min', 'max', 'step', 'stepSnapping', 'formatOptions', 'disableWheelChange'), emits)
|
const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'modelValue', 'defaultValue', 'min', 'max', 'step', 'stepSnapping', 'formatOptions', 'disableWheelChange'), emits)
|
||||||
|
|
||||||
const { emitFormBlur, emitFormFocus, emitFormChange, emitFormInput, id, color, size: formGroupSize, name, highlight, disabled, ariaAttrs } = useFormField<InputNumberProps>(props)
|
const { emitFormBlur, emitFormFocus, emitFormChange, emitFormInput, id, color, size, name, highlight, disabled, ariaAttrs } = useFormField<InputNumberProps>(props)
|
||||||
const { orientation, size: buttonGroupSize } = useButtonGroup<InputNumberProps>(props)
|
|
||||||
|
|
||||||
|
const { t, code: codeLocale } = useLocale()
|
||||||
const locale = computed(() => props.locale || codeLocale.value)
|
const locale = computed(() => props.locale || codeLocale.value)
|
||||||
const inputSize = computed(() => buttonGroupSize.value || formGroupSize.value)
|
|
||||||
|
|
||||||
const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.inputNumber || {}) })({
|
const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.inputNumber || {}) })({
|
||||||
color: color.value,
|
color: color.value,
|
||||||
variant: props.variant,
|
variant: props.variant,
|
||||||
size: inputSize.value,
|
size: size.value,
|
||||||
highlight: highlight.value,
|
highlight: highlight.value,
|
||||||
orientation: props.orientation,
|
orientation: props.orientation
|
||||||
buttonGroup: orientation.value
|
|
||||||
}))
|
}))
|
||||||
|
|
||||||
const incrementIcon = computed(() => props.incrementIcon || (props.orientation === 'horizontal' ? appConfig.ui.icons.plus : appConfig.ui.icons.chevronUp))
|
const incrementIcon = computed(() => props.incrementIcon || (props.orientation === 'horizontal' ? appConfig.ui.icons.plus : appConfig.ui.icons.chevronUp))
|
||||||
@@ -172,7 +162,7 @@ defineExpose({
|
|||||||
/>
|
/>
|
||||||
|
|
||||||
<div :class="ui.increment({ class: props.ui?.increment })">
|
<div :class="ui.increment({ class: props.ui?.increment })">
|
||||||
<NumberFieldIncrement as-child :disabled="disabled || incrementDisabled">
|
<NumberFieldIncrement as-child :disabled="disabled">
|
||||||
<slot name="increment">
|
<slot name="increment">
|
||||||
<UButton
|
<UButton
|
||||||
:icon="incrementIcon"
|
:icon="incrementIcon"
|
||||||
@@ -187,7 +177,7 @@ defineExpose({
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div :class="ui.decrement({ class: props.ui?.decrement })">
|
<div :class="ui.decrement({ class: props.ui?.decrement })">
|
||||||
<NumberFieldDecrement as-child :disabled="disabled || decrementDisabled">
|
<NumberFieldDecrement as-child :disabled="disabled">
|
||||||
<slot name="decrement">
|
<slot name="decrement">
|
||||||
<UButton
|
<UButton
|
||||||
:icon="decrementIcon"
|
:icon="decrementIcon"
|
||||||
|
|||||||
@@ -265,7 +265,7 @@ const lists = computed<NavigationMenuItem[][]>(() =>
|
|||||||
:unmount-on-hide="(orientation === 'vertical' && item.children?.length) ? unmountOnHide : undefined"
|
:unmount-on-hide="(orientation === 'vertical' && item.children?.length) ? unmountOnHide : undefined"
|
||||||
:open="item.open"
|
:open="item.open"
|
||||||
>
|
>
|
||||||
<div v-if="orientation === 'vertical' && item.type === 'label'" :class="ui.label({ class: [props.ui?.label, item.ui?.label, item.class] })">
|
<div v-if="orientation === 'vertical' && item.type === 'label'" :class="ui.label({ class: [props.ui?.label, item.ui?.label] })">
|
||||||
<ReuseLinkTemplate :item="item" :index="index" />
|
<ReuseLinkTemplate :item="item" :index="index" />
|
||||||
</div>
|
</div>
|
||||||
<ULink v-else-if="item.type !== 'label'" v-slot="{ active, ...slotProps }" v-bind="(orientation === 'vertical' && item.children?.length && item.collapsible !== false) ? {} : pickLinkProps(item as Omit<NavigationMenuItem, 'type'>)" custom>
|
<ULink v-else-if="item.type !== 'label'" v-slot="{ active, ...slotProps }" v-bind="(orientation === 'vertical' && item.children?.length && item.collapsible !== false) ? {} : pickLinkProps(item as Omit<NavigationMenuItem, 'type'>)" custom>
|
||||||
@@ -277,11 +277,11 @@ const lists = computed<NavigationMenuItem[][]>(() =>
|
|||||||
@select="item.onSelect"
|
@select="item.onSelect"
|
||||||
>
|
>
|
||||||
<UTooltip v-if="!!item.tooltip" :content="{ side: 'right' }" v-bind="item.tooltip">
|
<UTooltip v-if="!!item.tooltip" :content="{ side: 'right' }" v-bind="item.tooltip">
|
||||||
<ULinkBase v-bind="slotProps" :class="ui.link({ class: [props.ui?.link, item.ui?.link, item.class], active: active || item.active, disabled: !!item.disabled, level: orientation === 'horizontal' || level > 0 })">
|
<ULinkBase v-bind="slotProps" :class="ui.link({ class: [props.ui?.link, item.ui?.link], active: active || item.active, disabled: !!item.disabled, level: orientation === 'horizontal' || level > 0 })">
|
||||||
<ReuseLinkTemplate :item="item" :active="active || item.active" :index="index" />
|
<ReuseLinkTemplate :item="item" :active="active || item.active" :index="index" />
|
||||||
</ULinkBase>
|
</ULinkBase>
|
||||||
</UTooltip>
|
</UTooltip>
|
||||||
<ULinkBase v-else v-bind="slotProps" :class="ui.link({ class: [props.ui?.link, item.ui?.link, item.class], active: active || item.active, disabled: !!item.disabled, level: orientation === 'horizontal' || level > 0 })">
|
<ULinkBase v-else v-bind="slotProps" :class="ui.link({ class: [props.ui?.link, item.ui?.link], active: active || item.active, disabled: !!item.disabled, level: orientation === 'horizontal' || level > 0 })">
|
||||||
<ReuseLinkTemplate :item="item" :active="active || item.active" :index="index" />
|
<ReuseLinkTemplate :item="item" :active="active || item.active" :index="index" />
|
||||||
</ULinkBase>
|
</ULinkBase>
|
||||||
</component>
|
</component>
|
||||||
@@ -289,10 +289,10 @@ const lists = computed<NavigationMenuItem[][]>(() =>
|
|||||||
<NavigationMenuContent v-if="orientation === 'horizontal' && (item.children?.length || !!slots[(item.slot ? `${item.slot}-content` : 'item-content') as keyof NavigationMenuSlots<T>])" v-bind="contentProps" :class="ui.content({ class: [props.ui?.content, item.ui?.content] })">
|
<NavigationMenuContent v-if="orientation === 'horizontal' && (item.children?.length || !!slots[(item.slot ? `${item.slot}-content` : 'item-content') as keyof NavigationMenuSlots<T>])" v-bind="contentProps" :class="ui.content({ class: [props.ui?.content, item.ui?.content] })">
|
||||||
<slot :name="((item.slot ? `${item.slot}-content` : 'item-content') as keyof NavigationMenuSlots<T>)" :item="item" :active="active" :index="index">
|
<slot :name="((item.slot ? `${item.slot}-content` : 'item-content') as keyof NavigationMenuSlots<T>)" :item="item" :active="active" :index="index">
|
||||||
<ul :class="ui.childList({ class: [props.ui?.childList, item.ui?.childList] })">
|
<ul :class="ui.childList({ class: [props.ui?.childList, item.ui?.childList] })">
|
||||||
<li v-for="(childItem, childIndex) in item.children" :key="childIndex" :class="ui.childItem({ class: [props.ui?.childItem, item.ui?.childItem] })">
|
<li v-for="(childItem, childIndex) in item.children" :key="childIndex" :class="ui.childItem({ class: [props.ui?.childItem, item.ui?.childItem, childItem.class] })">
|
||||||
<ULink v-slot="{ active: childActive, ...childSlotProps }" v-bind="pickLinkProps(childItem)" custom>
|
<ULink v-slot="{ active: childActive, ...childSlotProps }" v-bind="pickLinkProps(childItem)" custom>
|
||||||
<NavigationMenuLink as-child :active="childActive" @select="childItem.onSelect">
|
<NavigationMenuLink as-child :active="childActive" @select="childItem.onSelect">
|
||||||
<ULinkBase v-bind="childSlotProps" :class="ui.childLink({ class: [props.ui?.childLink, item.ui?.childLink, childItem.class], active: childActive })">
|
<ULinkBase v-bind="childSlotProps" :class="ui.childLink({ class: [props.ui?.childLink, item.ui?.childLink], active: childActive })">
|
||||||
<UIcon v-if="childItem.icon" :name="childItem.icon" :class="ui.childLinkIcon({ class: [props.ui?.childLinkIcon, item.ui?.childLinkIcon], active: childActive })" />
|
<UIcon v-if="childItem.icon" :name="childItem.icon" :class="ui.childLinkIcon({ class: [props.ui?.childLinkIcon, item.ui?.childLinkIcon], active: childActive })" />
|
||||||
|
|
||||||
<div :class="ui.childLinkWrapper({ class: [props.ui?.childLinkWrapper, item.ui?.childLinkWrapper] })">
|
<div :class="ui.childLinkWrapper({ class: [props.ui?.childLinkWrapper, item.ui?.childLinkWrapper] })">
|
||||||
@@ -322,7 +322,7 @@ const lists = computed<NavigationMenuItem[][]>(() =>
|
|||||||
:item="childItem"
|
:item="childItem"
|
||||||
:index="childIndex"
|
:index="childIndex"
|
||||||
:level="level + 1"
|
:level="level + 1"
|
||||||
:class="ui.childItem({ class: [props.ui?.childItem, childItem.ui?.childItem] })"
|
:class="ui.childItem({ class: [props.ui?.childItem, childItem.ui?.childItem, childItem.class] })"
|
||||||
/>
|
/>
|
||||||
</ul>
|
</ul>
|
||||||
</template>
|
</template>
|
||||||
@@ -334,7 +334,7 @@ const lists = computed<NavigationMenuItem[][]>(() =>
|
|||||||
|
|
||||||
<template v-for="(list, listIndex) in lists" :key="`list-${listIndex}`">
|
<template v-for="(list, listIndex) in lists" :key="`list-${listIndex}`">
|
||||||
<NavigationMenuList :class="ui.list({ class: props.ui?.list })">
|
<NavigationMenuList :class="ui.list({ class: props.ui?.list })">
|
||||||
<ReuseItemTemplate v-for="(item, index) in list" :key="`list-${listIndex}-${index}`" :item="item" :index="index" :class="ui.item({ class: [props.ui?.item, item.ui?.item] })" />
|
<ReuseItemTemplate v-for="(item, index) in list" :key="`list-${listIndex}-${index}`" :item="item" :index="index" :class="ui.item({ class: [props.ui?.item, item.ui?.item, item.class] })" />
|
||||||
</NavigationMenuList>
|
</NavigationMenuList>
|
||||||
|
|
||||||
<div v-if="orientation === 'vertical' && listIndex < lists.length - 1" :class="ui.separator({ class: props.ui?.separator })" />
|
<div v-if="orientation === 'vertical' && listIndex < lists.length - 1" :class="ui.separator({ class: props.ui?.separator })" />
|
||||||
|
|||||||
@@ -178,7 +178,7 @@ function onUpdate(value: any) {
|
|||||||
</slot>
|
</slot>
|
||||||
</legend>
|
</legend>
|
||||||
|
|
||||||
<component :is="(!variant || variant === 'list') ? 'div' : Label" v-for="item in normalizedItems" :key="item.value" :class="ui.item({ class: [props.ui?.item, item.ui?.item, item.class] })">
|
<component :is="variant === 'list' ? 'div' : Label" v-for="item in normalizedItems" :key="item.value" :class="ui.item({ class: [props.ui?.item, item.ui?.item, item.class] })">
|
||||||
<div :class="ui.container({ class: [props.ui?.container, item.ui?.container] })">
|
<div :class="ui.container({ class: [props.ui?.container, item.ui?.container] })">
|
||||||
<RadioGroupItem
|
<RadioGroupItem
|
||||||
:id="item.id"
|
:id="item.id"
|
||||||
@@ -191,7 +191,7 @@ function onUpdate(value: any) {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div v-if="(item.label || !!slots.label) || (item.description || !!slots.description)" :class="ui.wrapper({ class: [props.ui?.wrapper, item.ui?.wrapper] })">
|
<div v-if="(item.label || !!slots.label) || (item.description || !!slots.description)" :class="ui.wrapper({ class: [props.ui?.wrapper, item.ui?.wrapper] })">
|
||||||
<component :is="(!variant || variant === 'list') ? Label : 'p'" v-if="item.label || !!slots.label" :for="item.id" :class="ui.label({ class: [props.ui?.label, item.ui?.label] })">
|
<component :is="variant === 'list' ? Label : 'p'" v-if="item.label || !!slots.label" :for="item.id" :class="ui.label({ class: [props.ui?.label, item.ui?.label] })">
|
||||||
<slot name="label" :item="item" :model-value="(modelValue as RadioGroupValue)">
|
<slot name="label" :item="item" :model-value="(modelValue as RadioGroupValue)">
|
||||||
{{ item.label }}
|
{{ item.label }}
|
||||||
</slot>
|
</slot>
|
||||||
|
|||||||
@@ -79,7 +79,6 @@ const slots = defineSlots<TextareaSlots>()
|
|||||||
const [modelValue, modelModifiers] = defineModel<T>()
|
const [modelValue, modelModifiers] = defineModel<T>()
|
||||||
|
|
||||||
const appConfig = useAppConfig() as Textarea['AppConfig']
|
const appConfig = useAppConfig() as Textarea['AppConfig']
|
||||||
|
|
||||||
const { emitFormFocus, emitFormBlur, emitFormInput, emitFormChange, size, color, id, name, highlight, disabled, ariaAttrs } = useFormField<TextareaProps>(props, { deferInputValidation: true })
|
const { emitFormFocus, emitFormBlur, emitFormInput, emitFormChange, size, color, id, name, highlight, disabled, ariaAttrs } = useFormField<TextareaProps>(props, { deferInputValidation: true })
|
||||||
const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(props)
|
const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(props)
|
||||||
|
|
||||||
|
|||||||
@@ -151,7 +151,7 @@ const defaultExpanded = computed(() =>
|
|||||||
<li
|
<li
|
||||||
v-for="(item, index) in items"
|
v-for="(item, index) in items"
|
||||||
:key="`${level}-${index}`"
|
:key="`${level}-${index}`"
|
||||||
:class="level > 0 ? ui.itemWithChildren({ class: [props.ui?.itemWithChildren, item.ui?.itemWithChildren] }) : ui.item({ class: [props.ui?.item, item.ui?.item] })"
|
:class="level > 0 ? ui.itemWithChildren({ class: [props.ui?.itemWithChildren, item.ui?.itemWithChildren, item.class] }) : ui.item({ class: [props.ui?.item, item.ui?.item, item.class] })"
|
||||||
>
|
>
|
||||||
<TreeItem
|
<TreeItem
|
||||||
v-slot="{ isExpanded, isSelected }"
|
v-slot="{ isExpanded, isSelected }"
|
||||||
@@ -161,7 +161,7 @@ const defaultExpanded = computed(() =>
|
|||||||
@toggle="item.onToggle"
|
@toggle="item.onToggle"
|
||||||
@select="item.onSelect"
|
@select="item.onSelect"
|
||||||
>
|
>
|
||||||
<button :disabled="item.disabled || disabled" :class="ui.link({ class: [props.ui?.link, item.ui?.link, item.class], selected: isSelected, disabled: item.disabled || disabled })">
|
<button :disabled="item.disabled || disabled" :class="ui.link({ class: [props.ui?.link, item.ui?.link], selected: isSelected, disabled: item.disabled || disabled })">
|
||||||
<slot :name="((item.slot || 'item') as keyof TreeSlots<T>)" v-bind="{ index, level, expanded: isExpanded, selected: isSelected }" :item="(item as Extract<NestedItem<T>, { slot: string; }>)">
|
<slot :name="((item.slot || 'item') as keyof TreeSlots<T>)" v-bind="{ index, level, expanded: isExpanded, selected: isSelected }" :item="(item as Extract<NestedItem<T>, { slot: string; }>)">
|
||||||
<slot :name="((item.slot ? `${item.slot}-leading`: 'item-leading') as keyof TreeSlots<T>)" v-bind="{ index, level, expanded: isExpanded, selected: isSelected }" :item="(item as Extract<NestedItem<T>, { slot: string; }>)">
|
<slot :name="((item.slot ? `${item.slot}-leading`: 'item-leading') as keyof TreeSlots<T>)" v-bind="{ index, level, expanded: isExpanded, selected: isSelected }" :item="(item as Extract<NestedItem<T>, { slot: string; }>)">
|
||||||
<UIcon
|
<UIcon
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
import { inject, computed, type InjectionKey, type Ref, type ComputedRef, provide } from 'vue'
|
import { inject, computed, type InjectionKey, type Ref, type ComputedRef } from 'vue'
|
||||||
import { type UseEventBusReturn, useDebounceFn } from '@vueuse/core'
|
import { type UseEventBusReturn, useDebounceFn } from '@vueuse/core'
|
||||||
import type { FormFieldProps } from '../types'
|
import type { FormFieldProps } from '../types'
|
||||||
import type { FormEvent, FormInputEvents, FormFieldInjectedOptions, FormInjectedOptions } from '../types/form'
|
import type { FormEvent, FormInputEvents, FormFieldInjectedOptions, FormInjectedOptions } from '../types/form'
|
||||||
@@ -15,7 +15,7 @@ type Props<T> = {
|
|||||||
|
|
||||||
export const formOptionsInjectionKey: InjectionKey<ComputedRef<FormInjectedOptions>> = Symbol('nuxt-ui.form-options')
|
export const formOptionsInjectionKey: InjectionKey<ComputedRef<FormInjectedOptions>> = Symbol('nuxt-ui.form-options')
|
||||||
export const formBusInjectionKey: InjectionKey<UseEventBusReturn<FormEvent<any>, string>> = Symbol('nuxt-ui.form-events')
|
export const formBusInjectionKey: InjectionKey<UseEventBusReturn<FormEvent<any>, string>> = Symbol('nuxt-ui.form-events')
|
||||||
export const formFieldInjectionKey: InjectionKey<ComputedRef<FormFieldInjectedOptions<FormFieldProps>> | undefined> = Symbol('nuxt-ui.form-field')
|
export const formFieldInjectionKey: InjectionKey<ComputedRef<FormFieldInjectedOptions<FormFieldProps>>> = Symbol('nuxt-ui.form-field')
|
||||||
export const inputIdInjectionKey: InjectionKey<Ref<string | undefined>> = Symbol('nuxt-ui.input-id')
|
export const inputIdInjectionKey: InjectionKey<Ref<string | undefined>> = Symbol('nuxt-ui.input-id')
|
||||||
export const formInputsInjectionKey: InjectionKey<Ref<Record<string, { id?: string, pattern?: RegExp }>>> = Symbol('nuxt-ui.form-inputs')
|
export const formInputsInjectionKey: InjectionKey<Ref<Record<string, { id?: string, pattern?: RegExp }>>> = Symbol('nuxt-ui.form-inputs')
|
||||||
export const formLoadingInjectionKey: InjectionKey<Readonly<Ref<boolean>>> = Symbol('nuxt-ui.form-loading')
|
export const formLoadingInjectionKey: InjectionKey<Readonly<Ref<boolean>>> = Symbol('nuxt-ui.form-loading')
|
||||||
@@ -27,9 +27,6 @@ export function useFormField<T>(props?: Props<T>, opts?: { bind?: boolean, defer
|
|||||||
const formInputs = inject(formInputsInjectionKey, undefined)
|
const formInputs = inject(formInputsInjectionKey, undefined)
|
||||||
const inputId = inject(inputIdInjectionKey, undefined)
|
const inputId = inject(inputIdInjectionKey, undefined)
|
||||||
|
|
||||||
// Blocks the FormField injection to avoid duplicating events when nesting input components.
|
|
||||||
provide(formFieldInjectionKey, undefined)
|
|
||||||
|
|
||||||
if (formField && inputId) {
|
if (formField && inputId) {
|
||||||
if (opts?.bind === false) {
|
if (opts?.bind === false) {
|
||||||
// Removes for="..." attribute on label for RadioGroup and alike.
|
// Removes for="..." attribute on label for RadioGroup and alike.
|
||||||
|
|||||||
@@ -1,18 +1,18 @@
|
|||||||
export const buttonGroupVariant = {
|
export const buttonGroupVariant = {
|
||||||
buttonGroup: {
|
buttonGroup: {
|
||||||
horizontal: 'not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none focus-visible:z-[1]',
|
horizontal: 'not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none',
|
||||||
vertical: 'not-only:first:rounded-b-none not-only:last:rounded-t-none not-last:not-first:rounded-none focus-visible:z-[1]'
|
vertical: 'not-only:first:rounded-b-none not-only:last:rounded-t-none not-last:not-first:rounded-none'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export const buttonGroupVariantWithRoot = {
|
export const buttonGroupVariantWithRoot = {
|
||||||
buttonGroup: {
|
buttonGroup: {
|
||||||
horizontal: {
|
horizontal: {
|
||||||
root: 'group has-focus-visible:z-[1]',
|
root: 'group',
|
||||||
base: 'group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none'
|
base: 'group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none'
|
||||||
},
|
},
|
||||||
vertical: {
|
vertical: {
|
||||||
root: 'group has-focus-visible:z-[1]',
|
root: 'group',
|
||||||
base: 'group-not-only:group-first:rounded-b-none group-not-only:group-last:rounded-t-none group-not-last:group-not-first:rounded-none'
|
base: 'group-not-only:group-first:rounded-b-none group-not-only:group-last:rounded-t-none group-not-last:group-not-first:rounded-none'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,6 +1,5 @@
|
|||||||
import type { ModuleOptions } from '../module'
|
import type { ModuleOptions } from '../module'
|
||||||
import inputTheme from './input'
|
import inputTheme from './input'
|
||||||
import { buttonGroupVariantWithRoot } from './button-group'
|
|
||||||
|
|
||||||
export default (options: Required<ModuleOptions>) => {
|
export default (options: Required<ModuleOptions>) => {
|
||||||
const input = inputTheme(options)
|
const input = inputTheme(options)
|
||||||
@@ -13,7 +12,6 @@ export default (options: Required<ModuleOptions>) => {
|
|||||||
decrement: 'absolute flex items-center'
|
decrement: 'absolute flex items-center'
|
||||||
},
|
},
|
||||||
variants: {
|
variants: {
|
||||||
...buttonGroupVariantWithRoot,
|
|
||||||
color: {
|
color: {
|
||||||
...Object.fromEntries((options.theme.colors || []).map((color: string) => [color, ''])),
|
...Object.fromEntries((options.theme.colors || []).map((color: string) => [color, ''])),
|
||||||
neutral: ''
|
neutral: ''
|
||||||
|
|||||||
@@ -2,10 +2,10 @@
|
|||||||
|
|
||||||
exports[`ButtonGroup > renders orientation vertical with default slot correctly 1`] = `
|
exports[`ButtonGroup > renders orientation vertical with default slot correctly 1`] = `
|
||||||
"<div class="relative flex flex-col -space-y-px">
|
"<div class="relative flex flex-col -space-y-px">
|
||||||
<div class="relative inline-flex items-center group has-focus-visible:z-[1]"><input type="text" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors group-not-only:group-first:rounded-b-none group-not-only:group-last:rounded-t-none group-not-last:group-not-first:rounded-none 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">
|
<div class="relative inline-flex items-center group"><input type="text" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors group-not-only:group-first:rounded-b-none group-not-only:group-last:rounded-t-none group-not-last:group-not-first:rounded-none 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">
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div> <button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-b-none not-only:last:rounded-t-none not-last:not-first:rounded-none focus-visible:z-[1] px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
|
</div> <button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-b-none not-only:last:rounded-t-none not-last:not-first:rounded-none px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
|
||||||
<!--v-if--> Click me!
|
<!--v-if--> Click me!
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</button>
|
</button>
|
||||||
@@ -18,10 +18,10 @@ exports[`ButtonGroup > renders with class correctly 1`] = `"<div class="inline-f
|
|||||||
|
|
||||||
exports[`ButtonGroup > renders with default slot correctly 1`] = `
|
exports[`ButtonGroup > renders with default slot correctly 1`] = `
|
||||||
"<div class="relative inline-flex -space-x-px">
|
"<div class="relative inline-flex -space-x-px">
|
||||||
<div class="relative inline-flex items-center group has-focus-visible:z-[1]"><input type="text" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none 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">
|
<div class="relative inline-flex items-center group"><input type="text" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none 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">
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div> <button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none focus-visible:z-[1] px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
|
</div> <button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
|
||||||
<!--v-if--> Click me!
|
<!--v-if--> Click me!
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</button>
|
</button>
|
||||||
@@ -30,10 +30,10 @@ exports[`ButtonGroup > renders with default slot correctly 1`] = `
|
|||||||
|
|
||||||
exports[`ButtonGroup > renders with size lg correctly 1`] = `
|
exports[`ButtonGroup > renders with size lg correctly 1`] = `
|
||||||
"<div class="relative inline-flex -space-x-px">
|
"<div class="relative inline-flex -space-x-px">
|
||||||
<div class="relative inline-flex items-center group has-focus-visible:z-[1]"><input type="text" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none px-3 py-2 text-sm gap-2 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off">
|
<div class="relative inline-flex items-center group"><input type="text" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none px-3 py-2 text-sm gap-2 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off">
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div> <button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none focus-visible:z-[1] px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
|
</div> <button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
|
||||||
<!--v-if--> Click me!
|
<!--v-if--> Click me!
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</button>
|
</button>
|
||||||
@@ -42,10 +42,10 @@ exports[`ButtonGroup > renders with size lg correctly 1`] = `
|
|||||||
|
|
||||||
exports[`ButtonGroup > renders with size md correctly 1`] = `
|
exports[`ButtonGroup > renders with size md correctly 1`] = `
|
||||||
"<div class="relative inline-flex -space-x-px">
|
"<div class="relative inline-flex -space-x-px">
|
||||||
<div class="relative inline-flex items-center group has-focus-visible:z-[1]"><input type="text" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none 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">
|
<div class="relative inline-flex items-center group"><input type="text" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none 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">
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div> <button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none focus-visible:z-[1] px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
|
</div> <button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
|
||||||
<!--v-if--> Click me!
|
<!--v-if--> Click me!
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</button>
|
</button>
|
||||||
@@ -54,10 +54,10 @@ exports[`ButtonGroup > renders with size md correctly 1`] = `
|
|||||||
|
|
||||||
exports[`ButtonGroup > renders with size sm correctly 1`] = `
|
exports[`ButtonGroup > renders with size sm correctly 1`] = `
|
||||||
"<div class="relative inline-flex -space-x-px">
|
"<div class="relative inline-flex -space-x-px">
|
||||||
<div class="relative inline-flex items-center group has-focus-visible:z-[1]"><input type="text" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none px-2.5 py-1.5 text-xs 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">
|
<div class="relative inline-flex items-center group"><input type="text" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none px-2.5 py-1.5 text-xs 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">
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div> <button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none focus-visible:z-[1] px-2.5 py-1.5 text-xs gap-1.5 text-inverted bg-primary hover:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
|
</div> <button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none px-2.5 py-1.5 text-xs gap-1.5 text-inverted bg-primary hover:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
|
||||||
<!--v-if--> Click me!
|
<!--v-if--> Click me!
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</button>
|
</button>
|
||||||
@@ -66,10 +66,10 @@ exports[`ButtonGroup > renders with size sm correctly 1`] = `
|
|||||||
|
|
||||||
exports[`ButtonGroup > renders with size xl correctly 1`] = `
|
exports[`ButtonGroup > renders with size xl correctly 1`] = `
|
||||||
"<div class="relative inline-flex -space-x-px">
|
"<div class="relative inline-flex -space-x-px">
|
||||||
<div class="relative inline-flex items-center group has-focus-visible:z-[1]"><input type="text" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none px-3 py-2 text-base gap-2 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off">
|
<div class="relative inline-flex items-center group"><input type="text" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none px-3 py-2 text-base gap-2 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off">
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div> <button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none focus-visible:z-[1] px-3 py-2 text-base gap-2 text-inverted bg-primary hover:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
|
</div> <button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none px-3 py-2 text-base gap-2 text-inverted bg-primary hover:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
|
||||||
<!--v-if--> Click me!
|
<!--v-if--> Click me!
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</button>
|
</button>
|
||||||
@@ -78,10 +78,10 @@ exports[`ButtonGroup > renders with size xl correctly 1`] = `
|
|||||||
|
|
||||||
exports[`ButtonGroup > renders with size xs correctly 1`] = `
|
exports[`ButtonGroup > renders with size xs correctly 1`] = `
|
||||||
"<div class="relative inline-flex -space-x-px">
|
"<div class="relative inline-flex -space-x-px">
|
||||||
<div class="relative inline-flex items-center group has-focus-visible:z-[1]"><input type="text" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none px-2 py-1 text-xs gap-1 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off">
|
<div class="relative inline-flex items-center group"><input type="text" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none px-2 py-1 text-xs gap-1 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off">
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div> <button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none focus-visible:z-[1] px-2 py-1 text-xs gap-1 text-inverted bg-primary hover:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
|
</div> <button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none px-2 py-1 text-xs gap-1 text-inverted bg-primary hover:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
|
||||||
<!--v-if--> Click me!
|
<!--v-if--> Click me!
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</button>
|
</button>
|
||||||
|
|||||||
@@ -2,10 +2,10 @@
|
|||||||
|
|
||||||
exports[`ButtonGroup > renders orientation vertical with default slot correctly 1`] = `
|
exports[`ButtonGroup > renders orientation vertical with default slot correctly 1`] = `
|
||||||
"<div class="relative flex flex-col -space-y-px">
|
"<div class="relative flex flex-col -space-y-px">
|
||||||
<div class="relative inline-flex items-center group has-focus-visible:z-[1]"><input type="text" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors group-not-only:group-first:rounded-b-none group-not-only:group-last:rounded-t-none group-not-last:group-not-first:rounded-none 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">
|
<div class="relative inline-flex items-center group"><input type="text" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors group-not-only:group-first:rounded-b-none group-not-only:group-last:rounded-t-none group-not-last:group-not-first:rounded-none 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">
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div> <button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-b-none not-only:last:rounded-t-none not-last:not-first:rounded-none focus-visible:z-[1] px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
|
</div> <button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-b-none not-only:last:rounded-t-none not-last:not-first:rounded-none px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
|
||||||
<!--v-if--> Click me!
|
<!--v-if--> Click me!
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</button>
|
</button>
|
||||||
@@ -18,10 +18,10 @@ exports[`ButtonGroup > renders with class correctly 1`] = `"<div class="inline-f
|
|||||||
|
|
||||||
exports[`ButtonGroup > renders with default slot correctly 1`] = `
|
exports[`ButtonGroup > renders with default slot correctly 1`] = `
|
||||||
"<div class="relative inline-flex -space-x-px">
|
"<div class="relative inline-flex -space-x-px">
|
||||||
<div class="relative inline-flex items-center group has-focus-visible:z-[1]"><input type="text" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none 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">
|
<div class="relative inline-flex items-center group"><input type="text" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none 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">
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div> <button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none focus-visible:z-[1] px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
|
</div> <button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
|
||||||
<!--v-if--> Click me!
|
<!--v-if--> Click me!
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</button>
|
</button>
|
||||||
@@ -30,10 +30,10 @@ exports[`ButtonGroup > renders with default slot correctly 1`] = `
|
|||||||
|
|
||||||
exports[`ButtonGroup > renders with size lg correctly 1`] = `
|
exports[`ButtonGroup > renders with size lg correctly 1`] = `
|
||||||
"<div class="relative inline-flex -space-x-px">
|
"<div class="relative inline-flex -space-x-px">
|
||||||
<div class="relative inline-flex items-center group has-focus-visible:z-[1]"><input type="text" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none px-3 py-2 text-sm gap-2 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off">
|
<div class="relative inline-flex items-center group"><input type="text" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none px-3 py-2 text-sm gap-2 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off">
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div> <button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none focus-visible:z-[1] px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
|
</div> <button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
|
||||||
<!--v-if--> Click me!
|
<!--v-if--> Click me!
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</button>
|
</button>
|
||||||
@@ -42,10 +42,10 @@ exports[`ButtonGroup > renders with size lg correctly 1`] = `
|
|||||||
|
|
||||||
exports[`ButtonGroup > renders with size md correctly 1`] = `
|
exports[`ButtonGroup > renders with size md correctly 1`] = `
|
||||||
"<div class="relative inline-flex -space-x-px">
|
"<div class="relative inline-flex -space-x-px">
|
||||||
<div class="relative inline-flex items-center group has-focus-visible:z-[1]"><input type="text" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none 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">
|
<div class="relative inline-flex items-center group"><input type="text" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none 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">
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div> <button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none focus-visible:z-[1] px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
|
</div> <button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
|
||||||
<!--v-if--> Click me!
|
<!--v-if--> Click me!
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</button>
|
</button>
|
||||||
@@ -54,10 +54,10 @@ exports[`ButtonGroup > renders with size md correctly 1`] = `
|
|||||||
|
|
||||||
exports[`ButtonGroup > renders with size sm correctly 1`] = `
|
exports[`ButtonGroup > renders with size sm correctly 1`] = `
|
||||||
"<div class="relative inline-flex -space-x-px">
|
"<div class="relative inline-flex -space-x-px">
|
||||||
<div class="relative inline-flex items-center group has-focus-visible:z-[1]"><input type="text" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none px-2.5 py-1.5 text-xs 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">
|
<div class="relative inline-flex items-center group"><input type="text" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none px-2.5 py-1.5 text-xs 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">
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div> <button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none focus-visible:z-[1] px-2.5 py-1.5 text-xs gap-1.5 text-inverted bg-primary hover:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
|
</div> <button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none px-2.5 py-1.5 text-xs gap-1.5 text-inverted bg-primary hover:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
|
||||||
<!--v-if--> Click me!
|
<!--v-if--> Click me!
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</button>
|
</button>
|
||||||
@@ -66,10 +66,10 @@ exports[`ButtonGroup > renders with size sm correctly 1`] = `
|
|||||||
|
|
||||||
exports[`ButtonGroup > renders with size xl correctly 1`] = `
|
exports[`ButtonGroup > renders with size xl correctly 1`] = `
|
||||||
"<div class="relative inline-flex -space-x-px">
|
"<div class="relative inline-flex -space-x-px">
|
||||||
<div class="relative inline-flex items-center group has-focus-visible:z-[1]"><input type="text" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none px-3 py-2 text-base gap-2 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off">
|
<div class="relative inline-flex items-center group"><input type="text" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none px-3 py-2 text-base gap-2 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off">
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div> <button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none focus-visible:z-[1] px-3 py-2 text-base gap-2 text-inverted bg-primary hover:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
|
</div> <button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none px-3 py-2 text-base gap-2 text-inverted bg-primary hover:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
|
||||||
<!--v-if--> Click me!
|
<!--v-if--> Click me!
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</button>
|
</button>
|
||||||
@@ -78,10 +78,10 @@ exports[`ButtonGroup > renders with size xl correctly 1`] = `
|
|||||||
|
|
||||||
exports[`ButtonGroup > renders with size xs correctly 1`] = `
|
exports[`ButtonGroup > renders with size xs correctly 1`] = `
|
||||||
"<div class="relative inline-flex -space-x-px">
|
"<div class="relative inline-flex -space-x-px">
|
||||||
<div class="relative inline-flex items-center group has-focus-visible:z-[1]"><input type="text" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none px-2 py-1 text-xs gap-1 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off">
|
<div class="relative inline-flex items-center group"><input type="text" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none px-2 py-1 text-xs gap-1 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off">
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div> <button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none focus-visible:z-[1] px-2 py-1 text-xs gap-1 text-inverted bg-primary hover:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
|
</div> <button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none px-2 py-1 text-xs gap-1 text-inverted bg-primary hover:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
|
||||||
<!--v-if--> Click me!
|
<!--v-if--> Click me!
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</button>
|
</button>
|
||||||
|
|||||||
@@ -1,187 +1,191 @@
|
|||||||
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
|
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
|
||||||
|
|
||||||
exports[`Checkbox > renders with ariaLabel correctly 1`] = `
|
exports[`Checkbox > renders with ariaLabel correctly 1`] = `
|
||||||
"<div class="relative flex items-start flex-row">
|
"<label class="relative flex items-start flex-row">
|
||||||
<div class="flex items-center h-5"><button aria-label="Aria label" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
<div class="flex items-center h-5"><button aria-label="Aria label" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||||
<!---->
|
<!---->
|
||||||
<!---->
|
<!---->
|
||||||
</button></div>
|
</button></div>
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>"
|
</label>"
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`Checkbox > renders with as correctly 1`] = `
|
exports[`Checkbox > renders with as correctly 1`] = `
|
||||||
"<section class="relative flex items-start flex-row">
|
"<label class="relative flex items-start flex-row">
|
||||||
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||||
<!---->
|
<!---->
|
||||||
<!---->
|
<!---->
|
||||||
</button></div>
|
</button></div>
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</section>"
|
</label>"
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`Checkbox > renders with class correctly 1`] = `
|
exports[`Checkbox > renders with class correctly 1`] = `
|
||||||
"<div class="relative items-start flex-row inline-flex">
|
"<label class="relative items-start flex-row inline-flex">
|
||||||
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||||
<!---->
|
<!---->
|
||||||
<!---->
|
<!---->
|
||||||
</button></div>
|
</button></div>
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>"
|
</label>"
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`Checkbox > renders with defaultValue correctly 1`] = `
|
exports[`Checkbox > renders with defaultValue correctly 1`] = `
|
||||||
"<div class="relative flex items-start flex-row">
|
"<label class="relative flex items-start flex-row">
|
||||||
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span data-state="checked" style="pointer-events: none;" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-full" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span data-state="checked" style="pointer-events: none;" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-full" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||||
<!---->
|
<!---->
|
||||||
</button></div>
|
</button></div>
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>"
|
</label>"
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`Checkbox > renders with description correctly 1`] = `
|
exports[`Checkbox > renders with description correctly 1`] = `
|
||||||
"<div class="relative flex items-start flex-row">
|
"<label class="relative flex items-start flex-row">
|
||||||
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||||
<!---->
|
<!---->
|
||||||
<!---->
|
<!---->
|
||||||
</button></div>
|
</button></div>
|
||||||
<div class="w-full ms-2 text-sm"><label for="v-0" class="block font-medium text-default">Label</label>
|
<div class="w-full ms-2 text-sm">
|
||||||
|
<p for="v-0" class="block font-medium text-default">Label</p>
|
||||||
<p class="text-muted">Description</p>
|
<p class="text-muted">Description</p>
|
||||||
</div>
|
</div>
|
||||||
</div>"
|
</label>"
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`Checkbox > renders with description slot correctly 1`] = `
|
exports[`Checkbox > renders with description slot correctly 1`] = `
|
||||||
"<div class="relative flex items-start flex-row">
|
"<label class="relative flex items-start flex-row">
|
||||||
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||||
<!---->
|
<!---->
|
||||||
<!---->
|
<!---->
|
||||||
</button></div>
|
</button></div>
|
||||||
<div class="w-full ms-2 text-sm"><label for="v-0" class="block font-medium text-default">Description slot</label>
|
<div class="w-full ms-2 text-sm">
|
||||||
|
<p for="v-0" class="block font-medium text-default">Description slot</p>
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
</div>"
|
</label>"
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`Checkbox > renders with disabled correctly 1`] = `
|
exports[`Checkbox > renders with disabled correctly 1`] = `
|
||||||
"<div class="relative flex items-start flex-row">
|
"<label class="relative flex items-start flex-row">
|
||||||
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4 cursor-not-allowed opacity-75" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-disabled="" disabled="">
|
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4 cursor-not-allowed opacity-75" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-disabled="" disabled="">
|
||||||
<!---->
|
<!---->
|
||||||
<!---->
|
<!---->
|
||||||
</button></div>
|
</button></div>
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>"
|
</label>"
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`Checkbox > renders with icon correctly 1`] = `
|
exports[`Checkbox > renders with icon correctly 1`] = `
|
||||||
"<div class="relative flex items-start flex-row">
|
"<label class="relative flex items-start flex-row">
|
||||||
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||||
<!---->
|
<!---->
|
||||||
<!---->
|
<!---->
|
||||||
</button></div>
|
</button></div>
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>"
|
</label>"
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`Checkbox > renders with id correctly 1`] = `
|
exports[`Checkbox > renders with id correctly 1`] = `
|
||||||
"<div class="relative flex items-start flex-row">
|
"<label class="relative flex items-start flex-row">
|
||||||
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="id" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="id" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||||
<!---->
|
<!---->
|
||||||
<!---->
|
<!---->
|
||||||
</button></div>
|
</button></div>
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>"
|
</label>"
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`Checkbox > renders with indeterminate correctly 1`] = `
|
exports[`Checkbox > renders with indeterminate correctly 1`] = `
|
||||||
"<div class="relative flex items-start flex-row">
|
"<label class="relative flex items-start flex-row">
|
||||||
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="mixed" aria-required="false" data-state="indeterminate"><span data-state="indeterminate" style="pointer-events: none;" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-full" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="mixed" aria-required="false" data-state="indeterminate"><span data-state="indeterminate" style="pointer-events: none;" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-full" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||||
<!---->
|
<!---->
|
||||||
</button></div>
|
</button></div>
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>"
|
</label>"
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`Checkbox > renders with indeterminateIcon correctly 1`] = `
|
exports[`Checkbox > renders with indeterminateIcon correctly 1`] = `
|
||||||
"<div class="relative flex items-start flex-row">
|
"<label class="relative flex items-start flex-row">
|
||||||
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="mixed" aria-required="false" data-state="indeterminate"><span data-state="indeterminate" style="pointer-events: none;" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-full" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="mixed" aria-required="false" data-state="indeterminate"><span data-state="indeterminate" style="pointer-events: none;" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-full" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||||
<!---->
|
<!---->
|
||||||
</button></div>
|
</button></div>
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>"
|
</label>"
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`Checkbox > renders with indicator end correctly 1`] = `
|
exports[`Checkbox > renders with indicator end correctly 1`] = `
|
||||||
"<div class="relative flex items-start flex-row-reverse">
|
"<label class="relative flex items-start flex-row-reverse">
|
||||||
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
|
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
|
||||||
<!---->
|
<!---->
|
||||||
<!---->
|
<!---->
|
||||||
</button></div>
|
</button></div>
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>"
|
</label>"
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`Checkbox > renders with indicator hidden correctly 1`] = `
|
exports[`Checkbox > renders with indicator hidden correctly 1`] = `
|
||||||
"<div class="relative flex items-start">
|
"<label class="relative flex items-start">
|
||||||
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary sr-only size-4" id="v-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
|
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary sr-only size-4" id="v-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
|
||||||
<!---->
|
<!---->
|
||||||
<!---->
|
<!---->
|
||||||
</button></div>
|
</button></div>
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>"
|
</label>"
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`Checkbox > renders with indicator start correctly 1`] = `
|
exports[`Checkbox > renders with indicator start correctly 1`] = `
|
||||||
"<div class="relative flex items-start flex-row">
|
"<label class="relative flex items-start flex-row">
|
||||||
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
|
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
|
||||||
<!---->
|
<!---->
|
||||||
<!---->
|
<!---->
|
||||||
</button></div>
|
</button></div>
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>"
|
</label>"
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`Checkbox > renders with label correctly 1`] = `
|
exports[`Checkbox > renders with label correctly 1`] = `
|
||||||
"<div class="relative flex items-start flex-row">
|
"<label class="relative flex items-start flex-row">
|
||||||
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||||
<!---->
|
<!---->
|
||||||
<!---->
|
<!---->
|
||||||
</button></div>
|
</button></div>
|
||||||
<div class="w-full ms-2 text-sm"><label for="v-0" class="block font-medium text-default">Label</label>
|
<div class="w-full ms-2 text-sm">
|
||||||
|
<p for="v-0" class="block font-medium text-default">Label</p>
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
</div>"
|
</label>"
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`Checkbox > renders with label slot correctly 1`] = `
|
exports[`Checkbox > renders with label slot correctly 1`] = `
|
||||||
"<div class="relative flex items-start flex-row">
|
"<label class="relative flex items-start flex-row">
|
||||||
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||||
<!---->
|
<!---->
|
||||||
<!---->
|
<!---->
|
||||||
</button></div>
|
</button></div>
|
||||||
<div class="w-full ms-2 text-sm"><label for="v-0" class="block font-medium text-default">Label slot</label>
|
<div class="w-full ms-2 text-sm">
|
||||||
|
<p for="v-0" class="block font-medium text-default">Label slot</p>
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
</div>"
|
</label>"
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`Checkbox > renders with modelValue correctly 1`] = `
|
exports[`Checkbox > renders with modelValue correctly 1`] = `
|
||||||
"<div class="relative flex items-start flex-row">
|
"<label class="relative flex items-start flex-row">
|
||||||
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span data-state="checked" style="pointer-events: none;" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-full" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span data-state="checked" style="pointer-events: none;" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-full" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||||
<!---->
|
<!---->
|
||||||
</button></div>
|
</button></div>
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>"
|
</label>"
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`Checkbox > renders with name correctly 1`] = `
|
exports[`Checkbox > renders with name correctly 1`] = `
|
||||||
"<div class="relative flex items-start flex-row">
|
"<label class="relative flex items-start flex-row">
|
||||||
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||||
<!---->
|
<!---->
|
||||||
<!---->
|
<!---->
|
||||||
</button></div>
|
</button></div>
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>"
|
</label>"
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`Checkbox > renders with neutral variant card correctly 1`] = `
|
exports[`Checkbox > renders with neutral variant card correctly 1`] = `
|
||||||
@@ -225,83 +229,84 @@ exports[`Checkbox > renders with primary variant list correctly 1`] = `
|
|||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`Checkbox > renders with required correctly 1`] = `
|
exports[`Checkbox > renders with required correctly 1`] = `
|
||||||
"<div class="relative flex items-start flex-row">
|
"<label class="relative flex items-start flex-row">
|
||||||
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="true" data-state="unchecked">
|
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="true" data-state="unchecked">
|
||||||
<!---->
|
<!---->
|
||||||
<!---->
|
<!---->
|
||||||
</button></div>
|
</button></div>
|
||||||
<div class="w-full ms-2 text-sm"><label for="v-0" class="block font-medium text-default after:content-['*'] after:ms-0.5 after:text-error">Label</label>
|
<div class="w-full ms-2 text-sm">
|
||||||
|
<p for="v-0" class="block font-medium text-default after:content-['*'] after:ms-0.5 after:text-error">Label</p>
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
</div>"
|
</label>"
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`Checkbox > renders with size lg correctly 1`] = `
|
exports[`Checkbox > renders with size lg correctly 1`] = `
|
||||||
"<div class="relative flex items-start flex-row">
|
"<label class="relative flex items-start flex-row">
|
||||||
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4.5" id="v-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
|
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4.5" id="v-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
|
||||||
<!---->
|
<!---->
|
||||||
<!---->
|
<!---->
|
||||||
</button></div>
|
</button></div>
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>"
|
</label>"
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`Checkbox > renders with size md correctly 1`] = `
|
exports[`Checkbox > renders with size md correctly 1`] = `
|
||||||
"<div class="relative flex items-start flex-row">
|
"<label class="relative flex items-start flex-row">
|
||||||
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
|
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
|
||||||
<!---->
|
<!---->
|
||||||
<!---->
|
<!---->
|
||||||
</button></div>
|
</button></div>
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>"
|
</label>"
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`Checkbox > renders with size sm correctly 1`] = `
|
exports[`Checkbox > renders with size sm correctly 1`] = `
|
||||||
"<div class="relative flex items-start flex-row">
|
"<label class="relative flex items-start flex-row">
|
||||||
<div class="flex items-center h-4"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-3.5" id="v-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
|
<div class="flex items-center h-4"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-3.5" id="v-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
|
||||||
<!---->
|
<!---->
|
||||||
<!---->
|
<!---->
|
||||||
</button></div>
|
</button></div>
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>"
|
</label>"
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`Checkbox > renders with size xl correctly 1`] = `
|
exports[`Checkbox > renders with size xl correctly 1`] = `
|
||||||
"<div class="relative flex items-start flex-row">
|
"<label class="relative flex items-start flex-row">
|
||||||
<div class="flex items-center h-6"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-5" id="v-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
|
<div class="flex items-center h-6"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-5" id="v-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
|
||||||
<!---->
|
<!---->
|
||||||
<!---->
|
<!---->
|
||||||
</button></div>
|
</button></div>
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>"
|
</label>"
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`Checkbox > renders with size xs correctly 1`] = `
|
exports[`Checkbox > renders with size xs correctly 1`] = `
|
||||||
"<div class="relative flex items-start flex-row">
|
"<label class="relative flex items-start flex-row">
|
||||||
<div class="flex items-center h-4"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-3" id="v-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
|
<div class="flex items-center h-4"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-3" id="v-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
|
||||||
<!---->
|
<!---->
|
||||||
<!---->
|
<!---->
|
||||||
</button></div>
|
</button></div>
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>"
|
</label>"
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`Checkbox > renders with ui correctly 1`] = `
|
exports[`Checkbox > renders with ui correctly 1`] = `
|
||||||
"<div class="relative flex items-start flex-row">
|
"<label class="relative flex items-start flex-row">
|
||||||
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||||
<!---->
|
<!---->
|
||||||
<!---->
|
<!---->
|
||||||
</button></div>
|
</button></div>
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>"
|
</label>"
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`Checkbox > renders with value correctly 1`] = `
|
exports[`Checkbox > renders with value correctly 1`] = `
|
||||||
"<div class="relative flex items-start flex-row">
|
"<label class="relative flex items-start flex-row">
|
||||||
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||||
<!---->
|
<!---->
|
||||||
<!---->
|
<!---->
|
||||||
</button></div>
|
</button></div>
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>"
|
</label>"
|
||||||
`;
|
`;
|
||||||
|
|||||||
@@ -1,187 +1,191 @@
|
|||||||
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
|
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
|
||||||
|
|
||||||
exports[`Checkbox > renders with ariaLabel correctly 1`] = `
|
exports[`Checkbox > renders with ariaLabel correctly 1`] = `
|
||||||
"<div class="relative flex items-start flex-row">
|
"<label class="relative flex items-start flex-row">
|
||||||
<div class="flex items-center h-5"><button aria-label="Aria label" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
<div class="flex items-center h-5"><button aria-label="Aria label" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||||
<!---->
|
<!---->
|
||||||
<!---->
|
<!---->
|
||||||
</button></div>
|
</button></div>
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>"
|
</label>"
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`Checkbox > renders with as correctly 1`] = `
|
exports[`Checkbox > renders with as correctly 1`] = `
|
||||||
"<section class="relative flex items-start flex-row">
|
"<label class="relative flex items-start flex-row">
|
||||||
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||||
<!---->
|
<!---->
|
||||||
<!---->
|
<!---->
|
||||||
</button></div>
|
</button></div>
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</section>"
|
</label>"
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`Checkbox > renders with class correctly 1`] = `
|
exports[`Checkbox > renders with class correctly 1`] = `
|
||||||
"<div class="relative items-start flex-row inline-flex">
|
"<label class="relative items-start flex-row inline-flex">
|
||||||
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||||
<!---->
|
<!---->
|
||||||
<!---->
|
<!---->
|
||||||
</button></div>
|
</button></div>
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>"
|
</label>"
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`Checkbox > renders with defaultValue correctly 1`] = `
|
exports[`Checkbox > renders with defaultValue correctly 1`] = `
|
||||||
"<div class="relative flex items-start flex-row">
|
"<label class="relative flex items-start flex-row">
|
||||||
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span data-state="checked" style="pointer-events: none;" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true"></span></span>
|
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span data-state="checked" style="pointer-events: none;" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true"></span></span>
|
||||||
<!---->
|
<!---->
|
||||||
</button></div>
|
</button></div>
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>"
|
</label>"
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`Checkbox > renders with description correctly 1`] = `
|
exports[`Checkbox > renders with description correctly 1`] = `
|
||||||
"<div class="relative flex items-start flex-row">
|
"<label class="relative flex items-start flex-row">
|
||||||
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||||
<!---->
|
<!---->
|
||||||
<!---->
|
<!---->
|
||||||
</button></div>
|
</button></div>
|
||||||
<div class="w-full ms-2 text-sm"><label for="v-0-0" class="block font-medium text-default">Label</label>
|
<div class="w-full ms-2 text-sm">
|
||||||
|
<p for="v-0-0" class="block font-medium text-default">Label</p>
|
||||||
<p class="text-muted">Description</p>
|
<p class="text-muted">Description</p>
|
||||||
</div>
|
</div>
|
||||||
</div>"
|
</label>"
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`Checkbox > renders with description slot correctly 1`] = `
|
exports[`Checkbox > renders with description slot correctly 1`] = `
|
||||||
"<div class="relative flex items-start flex-row">
|
"<label class="relative flex items-start flex-row">
|
||||||
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||||
<!---->
|
<!---->
|
||||||
<!---->
|
<!---->
|
||||||
</button></div>
|
</button></div>
|
||||||
<div class="w-full ms-2 text-sm"><label for="v-0-0" class="block font-medium text-default">Description slot</label>
|
<div class="w-full ms-2 text-sm">
|
||||||
|
<p for="v-0-0" class="block font-medium text-default">Description slot</p>
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
</div>"
|
</label>"
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`Checkbox > renders with disabled correctly 1`] = `
|
exports[`Checkbox > renders with disabled correctly 1`] = `
|
||||||
"<div class="relative flex items-start flex-row">
|
"<label class="relative flex items-start flex-row">
|
||||||
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4 cursor-not-allowed opacity-75" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-disabled="" disabled="">
|
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4 cursor-not-allowed opacity-75" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-disabled="" disabled="">
|
||||||
<!---->
|
<!---->
|
||||||
<!---->
|
<!---->
|
||||||
</button></div>
|
</button></div>
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>"
|
</label>"
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`Checkbox > renders with icon correctly 1`] = `
|
exports[`Checkbox > renders with icon correctly 1`] = `
|
||||||
"<div class="relative flex items-start flex-row">
|
"<label class="relative flex items-start flex-row">
|
||||||
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||||
<!---->
|
<!---->
|
||||||
<!---->
|
<!---->
|
||||||
</button></div>
|
</button></div>
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>"
|
</label>"
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`Checkbox > renders with id correctly 1`] = `
|
exports[`Checkbox > renders with id correctly 1`] = `
|
||||||
"<div class="relative flex items-start flex-row">
|
"<label class="relative flex items-start flex-row">
|
||||||
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="id" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="id" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||||
<!---->
|
<!---->
|
||||||
<!---->
|
<!---->
|
||||||
</button></div>
|
</button></div>
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>"
|
</label>"
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`Checkbox > renders with indeterminate correctly 1`] = `
|
exports[`Checkbox > renders with indeterminate correctly 1`] = `
|
||||||
"<div class="relative flex items-start flex-row">
|
"<label class="relative flex items-start flex-row">
|
||||||
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="mixed" aria-required="false" data-state="indeterminate"><span data-state="indeterminate" style="pointer-events: none;" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:minus shrink-0 size-full" aria-hidden="true"></span></span>
|
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="mixed" aria-required="false" data-state="indeterminate"><span data-state="indeterminate" style="pointer-events: none;" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:minus shrink-0 size-full" aria-hidden="true"></span></span>
|
||||||
<!---->
|
<!---->
|
||||||
</button></div>
|
</button></div>
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>"
|
</label>"
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`Checkbox > renders with indeterminateIcon correctly 1`] = `
|
exports[`Checkbox > renders with indeterminateIcon correctly 1`] = `
|
||||||
"<div class="relative flex items-start flex-row">
|
"<label class="relative flex items-start flex-row">
|
||||||
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="mixed" aria-required="false" data-state="indeterminate"><span data-state="indeterminate" style="pointer-events: none;" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:trash shrink-0 size-full" aria-hidden="true"></span></span>
|
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="mixed" aria-required="false" data-state="indeterminate"><span data-state="indeterminate" style="pointer-events: none;" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:trash shrink-0 size-full" aria-hidden="true"></span></span>
|
||||||
<!---->
|
<!---->
|
||||||
</button></div>
|
</button></div>
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>"
|
</label>"
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`Checkbox > renders with indicator end correctly 1`] = `
|
exports[`Checkbox > renders with indicator end correctly 1`] = `
|
||||||
"<div class="relative flex items-start flex-row-reverse">
|
"<label class="relative flex items-start flex-row-reverse">
|
||||||
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
|
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
|
||||||
<!---->
|
<!---->
|
||||||
<!---->
|
<!---->
|
||||||
</button></div>
|
</button></div>
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>"
|
</label>"
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`Checkbox > renders with indicator hidden correctly 1`] = `
|
exports[`Checkbox > renders with indicator hidden correctly 1`] = `
|
||||||
"<div class="relative flex items-start">
|
"<label class="relative flex items-start">
|
||||||
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary sr-only size-4" id="v-0-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
|
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary sr-only size-4" id="v-0-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
|
||||||
<!---->
|
<!---->
|
||||||
<!---->
|
<!---->
|
||||||
</button></div>
|
</button></div>
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>"
|
</label>"
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`Checkbox > renders with indicator start correctly 1`] = `
|
exports[`Checkbox > renders with indicator start correctly 1`] = `
|
||||||
"<div class="relative flex items-start flex-row">
|
"<label class="relative flex items-start flex-row">
|
||||||
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
|
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
|
||||||
<!---->
|
<!---->
|
||||||
<!---->
|
<!---->
|
||||||
</button></div>
|
</button></div>
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>"
|
</label>"
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`Checkbox > renders with label correctly 1`] = `
|
exports[`Checkbox > renders with label correctly 1`] = `
|
||||||
"<div class="relative flex items-start flex-row">
|
"<label class="relative flex items-start flex-row">
|
||||||
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||||
<!---->
|
<!---->
|
||||||
<!---->
|
<!---->
|
||||||
</button></div>
|
</button></div>
|
||||||
<div class="w-full ms-2 text-sm"><label for="v-0-0" class="block font-medium text-default">Label</label>
|
<div class="w-full ms-2 text-sm">
|
||||||
|
<p for="v-0-0" class="block font-medium text-default">Label</p>
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
</div>"
|
</label>"
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`Checkbox > renders with label slot correctly 1`] = `
|
exports[`Checkbox > renders with label slot correctly 1`] = `
|
||||||
"<div class="relative flex items-start flex-row">
|
"<label class="relative flex items-start flex-row">
|
||||||
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||||
<!---->
|
<!---->
|
||||||
<!---->
|
<!---->
|
||||||
</button></div>
|
</button></div>
|
||||||
<div class="w-full ms-2 text-sm"><label for="v-0-0" class="block font-medium text-default">Label slot</label>
|
<div class="w-full ms-2 text-sm">
|
||||||
|
<p for="v-0-0" class="block font-medium text-default">Label slot</p>
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
</div>"
|
</label>"
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`Checkbox > renders with modelValue correctly 1`] = `
|
exports[`Checkbox > renders with modelValue correctly 1`] = `
|
||||||
"<div class="relative flex items-start flex-row">
|
"<label class="relative flex items-start flex-row">
|
||||||
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span data-state="checked" style="pointer-events: none;" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true"></span></span>
|
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span data-state="checked" style="pointer-events: none;" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true"></span></span>
|
||||||
<!---->
|
<!---->
|
||||||
</button></div>
|
</button></div>
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>"
|
</label>"
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`Checkbox > renders with name correctly 1`] = `
|
exports[`Checkbox > renders with name correctly 1`] = `
|
||||||
"<div class="relative flex items-start flex-row">
|
"<label class="relative flex items-start flex-row">
|
||||||
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||||
<!---->
|
<!---->
|
||||||
<!---->
|
<!---->
|
||||||
</button></div>
|
</button></div>
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>"
|
</label>"
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`Checkbox > renders with neutral variant card correctly 1`] = `
|
exports[`Checkbox > renders with neutral variant card correctly 1`] = `
|
||||||
@@ -225,83 +229,84 @@ exports[`Checkbox > renders with primary variant list correctly 1`] = `
|
|||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`Checkbox > renders with required correctly 1`] = `
|
exports[`Checkbox > renders with required correctly 1`] = `
|
||||||
"<div class="relative flex items-start flex-row">
|
"<label class="relative flex items-start flex-row">
|
||||||
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="true" data-state="unchecked">
|
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="true" data-state="unchecked">
|
||||||
<!---->
|
<!---->
|
||||||
<!---->
|
<!---->
|
||||||
</button></div>
|
</button></div>
|
||||||
<div class="w-full ms-2 text-sm"><label for="v-0-0" class="block font-medium text-default after:content-['*'] after:ms-0.5 after:text-error">Label</label>
|
<div class="w-full ms-2 text-sm">
|
||||||
|
<p for="v-0-0" class="block font-medium text-default after:content-['*'] after:ms-0.5 after:text-error">Label</p>
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
</div>"
|
</label>"
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`Checkbox > renders with size lg correctly 1`] = `
|
exports[`Checkbox > renders with size lg correctly 1`] = `
|
||||||
"<div class="relative flex items-start flex-row">
|
"<label class="relative flex items-start flex-row">
|
||||||
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4.5" id="v-0-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
|
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4.5" id="v-0-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
|
||||||
<!---->
|
<!---->
|
||||||
<!---->
|
<!---->
|
||||||
</button></div>
|
</button></div>
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>"
|
</label>"
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`Checkbox > renders with size md correctly 1`] = `
|
exports[`Checkbox > renders with size md correctly 1`] = `
|
||||||
"<div class="relative flex items-start flex-row">
|
"<label class="relative flex items-start flex-row">
|
||||||
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
|
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
|
||||||
<!---->
|
<!---->
|
||||||
<!---->
|
<!---->
|
||||||
</button></div>
|
</button></div>
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>"
|
</label>"
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`Checkbox > renders with size sm correctly 1`] = `
|
exports[`Checkbox > renders with size sm correctly 1`] = `
|
||||||
"<div class="relative flex items-start flex-row">
|
"<label class="relative flex items-start flex-row">
|
||||||
<div class="flex items-center h-4"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-3.5" id="v-0-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
|
<div class="flex items-center h-4"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-3.5" id="v-0-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
|
||||||
<!---->
|
<!---->
|
||||||
<!---->
|
<!---->
|
||||||
</button></div>
|
</button></div>
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>"
|
</label>"
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`Checkbox > renders with size xl correctly 1`] = `
|
exports[`Checkbox > renders with size xl correctly 1`] = `
|
||||||
"<div class="relative flex items-start flex-row">
|
"<label class="relative flex items-start flex-row">
|
||||||
<div class="flex items-center h-6"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-5" id="v-0-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
|
<div class="flex items-center h-6"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-5" id="v-0-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
|
||||||
<!---->
|
<!---->
|
||||||
<!---->
|
<!---->
|
||||||
</button></div>
|
</button></div>
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>"
|
</label>"
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`Checkbox > renders with size xs correctly 1`] = `
|
exports[`Checkbox > renders with size xs correctly 1`] = `
|
||||||
"<div class="relative flex items-start flex-row">
|
"<label class="relative flex items-start flex-row">
|
||||||
<div class="flex items-center h-4"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-3" id="v-0-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
|
<div class="flex items-center h-4"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-3" id="v-0-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
|
||||||
<!---->
|
<!---->
|
||||||
<!---->
|
<!---->
|
||||||
</button></div>
|
</button></div>
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>"
|
</label>"
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`Checkbox > renders with ui correctly 1`] = `
|
exports[`Checkbox > renders with ui correctly 1`] = `
|
||||||
"<div class="relative flex items-start flex-row">
|
"<label class="relative flex items-start flex-row">
|
||||||
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||||
<!---->
|
<!---->
|
||||||
<!---->
|
<!---->
|
||||||
</button></div>
|
</button></div>
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>"
|
</label>"
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`Checkbox > renders with value correctly 1`] = `
|
exports[`Checkbox > renders with value correctly 1`] = `
|
||||||
"<div class="relative flex items-start flex-row">
|
"<label class="relative flex items-start flex-row">
|
||||||
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||||
<!---->
|
<!---->
|
||||||
<!---->
|
<!---->
|
||||||
</button></div>
|
</button></div>
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>"
|
</label>"
|
||||||
`;
|
`;
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -12,6 +12,7 @@ exports[`Form > custom validation works > with error 1`] = `
|
|||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
|
<!---->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -25,7 +26,8 @@ exports[`Form > custom validation works > with error 1`] = `
|
|||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
<div id="v-1-error" class="mt-2 text-error">Must be at least 8 characters</div>
|
<div id="v-1-error" data-state="open" class="mt-2 text-error">Must be at least 8 characters</div>
|
||||||
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</form>"
|
</form>"
|
||||||
@@ -43,6 +45,7 @@ exports[`Form > custom validation works > without error 1`] = `
|
|||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
|
<!---->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -56,6 +59,7 @@ exports[`Form > custom validation works > without error 1`] = `
|
|||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
|
<!---->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -74,6 +78,7 @@ exports[`Form > joi validation works > with error 1`] = `
|
|||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
|
<!---->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -87,7 +92,8 @@ exports[`Form > joi validation works > with error 1`] = `
|
|||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
<div id="v-1-error" class="mt-2 text-error">Must be at least 8 characters</div>
|
<div id="v-1-error" data-state="open" class="mt-2 text-error">Must be at least 8 characters</div>
|
||||||
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</form>"
|
</form>"
|
||||||
@@ -105,6 +111,7 @@ exports[`Form > joi validation works > without error 1`] = `
|
|||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
|
<!---->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -118,6 +125,7 @@ exports[`Form > joi validation works > without error 1`] = `
|
|||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
|
<!---->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -140,6 +148,7 @@ exports[`Form > superstruct validation works > with error 1`] = `
|
|||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
|
<!---->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -153,7 +162,8 @@ exports[`Form > superstruct validation works > with error 1`] = `
|
|||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
<div id="v-1-error" class="mt-2 text-error">Must be at least 8 characters</div>
|
<div id="v-1-error" data-state="open" class="mt-2 text-error">Must be at least 8 characters</div>
|
||||||
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</form>"
|
</form>"
|
||||||
@@ -171,6 +181,7 @@ exports[`Form > superstruct validation works > without error 1`] = `
|
|||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
|
<!---->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -184,6 +195,7 @@ exports[`Form > superstruct validation works > without error 1`] = `
|
|||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
|
<!---->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -202,6 +214,7 @@ exports[`Form > valibot validation works > with error 1`] = `
|
|||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
|
<!---->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -215,7 +228,8 @@ exports[`Form > valibot validation works > with error 1`] = `
|
|||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
<div id="v-1-error" class="mt-2 text-error">Must be at least 8 characters</div>
|
<div id="v-1-error" data-state="open" class="mt-2 text-error">Must be at least 8 characters</div>
|
||||||
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</form>"
|
</form>"
|
||||||
@@ -233,6 +247,7 @@ exports[`Form > valibot validation works > without error 1`] = `
|
|||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
|
<!---->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -246,6 +261,7 @@ exports[`Form > valibot validation works > without error 1`] = `
|
|||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
|
<!---->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -264,6 +280,7 @@ exports[`Form > yup validation works > with error 1`] = `
|
|||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
|
<!---->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -277,7 +294,8 @@ exports[`Form > yup validation works > with error 1`] = `
|
|||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
<div id="v-1-error" class="mt-2 text-error">Must be at least 8 characters</div>
|
<div id="v-1-error" data-state="open" class="mt-2 text-error">Must be at least 8 characters</div>
|
||||||
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</form>"
|
</form>"
|
||||||
@@ -295,6 +313,7 @@ exports[`Form > yup validation works > without error 1`] = `
|
|||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
|
<!---->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -308,6 +327,7 @@ exports[`Form > yup validation works > without error 1`] = `
|
|||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
|
<!---->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -326,6 +346,7 @@ exports[`Form > zod validation works > with error 1`] = `
|
|||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
|
<!---->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -339,7 +360,8 @@ exports[`Form > zod validation works > with error 1`] = `
|
|||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
<div id="v-1-error" class="mt-2 text-error">Must be at least 8 characters</div>
|
<div id="v-1-error" data-state="open" class="mt-2 text-error">Must be at least 8 characters</div>
|
||||||
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</form>"
|
</form>"
|
||||||
@@ -357,6 +379,7 @@ exports[`Form > zod validation works > without error 1`] = `
|
|||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
|
<!---->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -370,6 +393,7 @@ exports[`Form > zod validation works > without error 1`] = `
|
|||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
|
<!---->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -12,6 +12,7 @@ exports[`Form > custom validation works > with error 1`] = `
|
|||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
|
<!---->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -25,7 +26,8 @@ exports[`Form > custom validation works > with error 1`] = `
|
|||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
<div id="v-0-0-1-error" class="mt-2 text-error">Must be at least 8 characters</div>
|
<div id="v-0-0-1-error" data-state="open" class="mt-2 text-error">Must be at least 8 characters</div>
|
||||||
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</form>"
|
</form>"
|
||||||
@@ -43,6 +45,7 @@ exports[`Form > custom validation works > without error 1`] = `
|
|||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
|
<!---->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -56,6 +59,7 @@ exports[`Form > custom validation works > without error 1`] = `
|
|||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
|
<!---->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -74,6 +78,7 @@ exports[`Form > joi validation works > with error 1`] = `
|
|||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
|
<!---->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -87,7 +92,8 @@ exports[`Form > joi validation works > with error 1`] = `
|
|||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
<div id="v-0-0-1-error" class="mt-2 text-error">Must be at least 8 characters</div>
|
<div id="v-0-0-1-error" data-state="open" class="mt-2 text-error">Must be at least 8 characters</div>
|
||||||
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</form>"
|
</form>"
|
||||||
@@ -105,6 +111,7 @@ exports[`Form > joi validation works > without error 1`] = `
|
|||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
|
<!---->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -118,6 +125,7 @@ exports[`Form > joi validation works > without error 1`] = `
|
|||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
|
<!---->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -140,6 +148,7 @@ exports[`Form > superstruct validation works > with error 1`] = `
|
|||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
|
<!---->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -153,7 +162,8 @@ exports[`Form > superstruct validation works > with error 1`] = `
|
|||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
<div id="v-0-0-1-error" class="mt-2 text-error">Must be at least 8 characters</div>
|
<div id="v-0-0-1-error" data-state="open" class="mt-2 text-error">Must be at least 8 characters</div>
|
||||||
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</form>"
|
</form>"
|
||||||
@@ -171,6 +181,7 @@ exports[`Form > superstruct validation works > without error 1`] = `
|
|||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
|
<!---->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -184,6 +195,7 @@ exports[`Form > superstruct validation works > without error 1`] = `
|
|||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
|
<!---->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -202,6 +214,7 @@ exports[`Form > valibot validation works > with error 1`] = `
|
|||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
|
<!---->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -215,7 +228,8 @@ exports[`Form > valibot validation works > with error 1`] = `
|
|||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
<div id="v-0-0-1-error" class="mt-2 text-error">Must be at least 8 characters</div>
|
<div id="v-0-0-1-error" data-state="open" class="mt-2 text-error">Must be at least 8 characters</div>
|
||||||
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</form>"
|
</form>"
|
||||||
@@ -233,6 +247,7 @@ exports[`Form > valibot validation works > without error 1`] = `
|
|||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
|
<!---->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -246,6 +261,7 @@ exports[`Form > valibot validation works > without error 1`] = `
|
|||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
|
<!---->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -264,6 +280,7 @@ exports[`Form > yup validation works > with error 1`] = `
|
|||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
|
<!---->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -277,7 +294,8 @@ exports[`Form > yup validation works > with error 1`] = `
|
|||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
<div id="v-0-0-1-error" class="mt-2 text-error">Must be at least 8 characters</div>
|
<div id="v-0-0-1-error" data-state="open" class="mt-2 text-error">Must be at least 8 characters</div>
|
||||||
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</form>"
|
</form>"
|
||||||
@@ -295,6 +313,7 @@ exports[`Form > yup validation works > without error 1`] = `
|
|||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
|
<!---->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -308,6 +327,7 @@ exports[`Form > yup validation works > without error 1`] = `
|
|||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
|
<!---->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -326,6 +346,7 @@ exports[`Form > zod validation works > with error 1`] = `
|
|||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
|
<!---->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -339,7 +360,8 @@ exports[`Form > zod validation works > with error 1`] = `
|
|||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
<div id="v-0-0-1-error" class="mt-2 text-error">Must be at least 8 characters</div>
|
<div id="v-0-0-1-error" data-state="open" class="mt-2 text-error">Must be at least 8 characters</div>
|
||||||
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</form>"
|
</form>"
|
||||||
@@ -357,6 +379,7 @@ exports[`Form > zod validation works > without error 1`] = `
|
|||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
|
<!---->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -370,6 +393,7 @@ exports[`Form > zod validation works > without error 1`] = `
|
|||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
|
<!---->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -7,6 +7,7 @@ exports[`FormField > renders with as correctly 1`] = `
|
|||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
<div class="">
|
<div class="">
|
||||||
|
<!---->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
</section>"
|
</section>"
|
||||||
@@ -19,6 +20,7 @@ exports[`FormField > renders with class correctly 1`] = `
|
|||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
<div class="">
|
<div class="">
|
||||||
|
<!---->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
</div>"
|
</div>"
|
||||||
@@ -31,6 +33,7 @@ exports[`FormField > renders with default slot correctly 1`] = `
|
|||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
<div class="">Default slot
|
<div class="">Default slot
|
||||||
|
<!---->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
</div>"
|
</div>"
|
||||||
@@ -43,6 +46,7 @@ exports[`FormField > renders with description slot correctly 1`] = `
|
|||||||
<p id="v-0-0-description" class="text-muted">Description slot</p>
|
<p id="v-0-0-description" class="text-muted">Description slot</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="mt-1 relative">
|
<div class="mt-1 relative">
|
||||||
|
<!---->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
</div>"
|
</div>"
|
||||||
@@ -55,7 +59,8 @@ exports[`FormField > renders with error correctly 1`] = `
|
|||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
<div class="">
|
<div class="">
|
||||||
<div id="v-0-0-error" class="mt-2 text-error">Username is already taken</div>
|
<div id="v-0-0-error" data-state="open" class="mt-2 text-error">Username is already taken</div>
|
||||||
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
</div>"
|
</div>"
|
||||||
`;
|
`;
|
||||||
@@ -67,7 +72,8 @@ exports[`FormField > renders with error slot correctly 1`] = `
|
|||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
<div class="">
|
<div class="">
|
||||||
<div id="v-0-0-error" class="mt-2 text-error">Error slot</div>
|
<div id="v-0-0-error" data-state="open" class="mt-2 text-error">Error slot</div>
|
||||||
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
</div>"
|
</div>"
|
||||||
`;
|
`;
|
||||||
@@ -79,6 +85,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 class="mt-2 text-muted">Username must be unique</div>
|
||||||
</div>
|
</div>
|
||||||
</div>"
|
</div>"
|
||||||
@@ -91,6 +98,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 class="mt-2 text-muted">Help slot</div>
|
||||||
</div>
|
</div>
|
||||||
</div>"
|
</div>"
|
||||||
@@ -103,6 +111,7 @@ exports[`FormField > renders with hint correctly 1`] = `
|
|||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
<div class="">
|
<div class="">
|
||||||
|
<!---->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
</div>"
|
</div>"
|
||||||
@@ -115,6 +124,7 @@ exports[`FormField > renders with hint slot correctly 1`] = `
|
|||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
<div class="">
|
<div class="">
|
||||||
|
<!---->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
</div>"
|
</div>"
|
||||||
@@ -129,6 +139,7 @@ exports[`FormField > renders with label and description correctly 1`] = `
|
|||||||
<p id="v-0-0-description" class="text-muted">Enter your username</p>
|
<p id="v-0-0-description" class="text-muted">Enter your username</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="mt-1 relative">
|
<div class="mt-1 relative">
|
||||||
|
<!---->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
</div>"
|
</div>"
|
||||||
@@ -143,6 +154,7 @@ exports[`FormField > renders with label slot correctly 1`] = `
|
|||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
<div class="mt-1 relative">
|
<div class="mt-1 relative">
|
||||||
|
<!---->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
</div>"
|
</div>"
|
||||||
@@ -157,6 +169,7 @@ exports[`FormField > renders with required correctly 1`] = `
|
|||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
<div class="mt-1 relative">
|
<div class="mt-1 relative">
|
||||||
|
<!---->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
</div>"
|
</div>"
|
||||||
@@ -171,6 +184,7 @@ exports[`FormField > renders with size lg correctly 1`] = `
|
|||||||
<p id="v-0-0-description" class="text-muted">Enter your username</p>
|
<p id="v-0-0-description" class="text-muted">Enter your username</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="mt-1 relative">
|
<div class="mt-1 relative">
|
||||||
|
<!---->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
</div>"
|
</div>"
|
||||||
@@ -185,6 +199,7 @@ exports[`FormField > renders with size md correctly 1`] = `
|
|||||||
<p id="v-0-0-description" class="text-muted">Enter your username</p>
|
<p id="v-0-0-description" class="text-muted">Enter your username</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="mt-1 relative">
|
<div class="mt-1 relative">
|
||||||
|
<!---->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
</div>"
|
</div>"
|
||||||
@@ -199,6 +214,7 @@ exports[`FormField > renders with size sm correctly 1`] = `
|
|||||||
<p id="v-0-0-description" class="text-muted">Enter your username</p>
|
<p id="v-0-0-description" class="text-muted">Enter your username</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="mt-1 relative">
|
<div class="mt-1 relative">
|
||||||
|
<!---->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
</div>"
|
</div>"
|
||||||
@@ -213,6 +229,7 @@ exports[`FormField > renders with size xl correctly 1`] = `
|
|||||||
<p id="v-0-0-description" class="text-muted">Enter your username</p>
|
<p id="v-0-0-description" class="text-muted">Enter your username</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="mt-1 relative">
|
<div class="mt-1 relative">
|
||||||
|
<!---->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
</div>"
|
</div>"
|
||||||
@@ -227,6 +244,7 @@ exports[`FormField > renders with size xs correctly 1`] = `
|
|||||||
<p id="v-0-0-description" class="text-muted">Enter your username</p>
|
<p id="v-0-0-description" class="text-muted">Enter your username</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="mt-1 relative">
|
<div class="mt-1 relative">
|
||||||
|
<!---->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
</div>"
|
</div>"
|
||||||
@@ -239,6 +257,7 @@ exports[`FormField > renders with ui correctly 1`] = `
|
|||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
<div class="">
|
<div class="">
|
||||||
|
<!---->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
</div>"
|
</div>"
|
||||||
|
|||||||
@@ -7,6 +7,7 @@ exports[`FormField > renders with as correctly 1`] = `
|
|||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
<div class="">
|
<div class="">
|
||||||
|
<!---->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
</section>"
|
</section>"
|
||||||
@@ -19,6 +20,7 @@ exports[`FormField > renders with class correctly 1`] = `
|
|||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
<div class="">
|
<div class="">
|
||||||
|
<!---->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
</div>"
|
</div>"
|
||||||
@@ -31,6 +33,7 @@ exports[`FormField > renders with default slot correctly 1`] = `
|
|||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
<div class="">Default slot
|
<div class="">Default slot
|
||||||
|
<!---->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
</div>"
|
</div>"
|
||||||
@@ -43,6 +46,7 @@ exports[`FormField > renders with description slot correctly 1`] = `
|
|||||||
<p id="v-0-0-description" class="text-muted">Description slot</p>
|
<p id="v-0-0-description" class="text-muted">Description slot</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="mt-1 relative">
|
<div class="mt-1 relative">
|
||||||
|
<!---->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
</div>"
|
</div>"
|
||||||
@@ -55,7 +59,8 @@ exports[`FormField > renders with error correctly 1`] = `
|
|||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
<div class="">
|
<div class="">
|
||||||
<div id="v-0-0-error" class="mt-2 text-error">Username is already taken</div>
|
<div id="v-0-0-error" data-state="open" class="mt-2 text-error">Username is already taken</div>
|
||||||
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
</div>"
|
</div>"
|
||||||
`;
|
`;
|
||||||
@@ -67,7 +72,8 @@ exports[`FormField > renders with error slot correctly 1`] = `
|
|||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
<div class="">
|
<div class="">
|
||||||
<div id="v-0-0-error" class="mt-2 text-error">Error slot</div>
|
<div id="v-0-0-error" data-state="open" class="mt-2 text-error">Error slot</div>
|
||||||
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
</div>"
|
</div>"
|
||||||
`;
|
`;
|
||||||
@@ -79,6 +85,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 class="mt-2 text-muted">Username must be unique</div>
|
||||||
</div>
|
</div>
|
||||||
</div>"
|
</div>"
|
||||||
@@ -91,6 +98,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 class="mt-2 text-muted">Help slot</div>
|
||||||
</div>
|
</div>
|
||||||
</div>"
|
</div>"
|
||||||
@@ -103,6 +111,7 @@ exports[`FormField > renders with hint correctly 1`] = `
|
|||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
<div class="">
|
<div class="">
|
||||||
|
<!---->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
</div>"
|
</div>"
|
||||||
@@ -115,6 +124,7 @@ exports[`FormField > renders with hint slot correctly 1`] = `
|
|||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
<div class="">
|
<div class="">
|
||||||
|
<!---->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
</div>"
|
</div>"
|
||||||
@@ -129,6 +139,7 @@ exports[`FormField > renders with label and description correctly 1`] = `
|
|||||||
<p id="v-0-0-description" class="text-muted">Enter your username</p>
|
<p id="v-0-0-description" class="text-muted">Enter your username</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="mt-1 relative">
|
<div class="mt-1 relative">
|
||||||
|
<!---->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
</div>"
|
</div>"
|
||||||
@@ -143,6 +154,7 @@ exports[`FormField > renders with label slot correctly 1`] = `
|
|||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
<div class="mt-1 relative">
|
<div class="mt-1 relative">
|
||||||
|
<!---->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
</div>"
|
</div>"
|
||||||
@@ -157,6 +169,7 @@ exports[`FormField > renders with required correctly 1`] = `
|
|||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
<div class="mt-1 relative">
|
<div class="mt-1 relative">
|
||||||
|
<!---->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
</div>"
|
</div>"
|
||||||
@@ -171,6 +184,7 @@ exports[`FormField > renders with size lg correctly 1`] = `
|
|||||||
<p id="v-0-0-description" class="text-muted">Enter your username</p>
|
<p id="v-0-0-description" class="text-muted">Enter your username</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="mt-1 relative">
|
<div class="mt-1 relative">
|
||||||
|
<!---->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
</div>"
|
</div>"
|
||||||
@@ -185,6 +199,7 @@ exports[`FormField > renders with size md correctly 1`] = `
|
|||||||
<p id="v-0-0-description" class="text-muted">Enter your username</p>
|
<p id="v-0-0-description" class="text-muted">Enter your username</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="mt-1 relative">
|
<div class="mt-1 relative">
|
||||||
|
<!---->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
</div>"
|
</div>"
|
||||||
@@ -199,6 +214,7 @@ exports[`FormField > renders with size sm correctly 1`] = `
|
|||||||
<p id="v-0-0-description" class="text-muted">Enter your username</p>
|
<p id="v-0-0-description" class="text-muted">Enter your username</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="mt-1 relative">
|
<div class="mt-1 relative">
|
||||||
|
<!---->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
</div>"
|
</div>"
|
||||||
@@ -213,6 +229,7 @@ exports[`FormField > renders with size xl correctly 1`] = `
|
|||||||
<p id="v-0-0-description" class="text-muted">Enter your username</p>
|
<p id="v-0-0-description" class="text-muted">Enter your username</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="mt-1 relative">
|
<div class="mt-1 relative">
|
||||||
|
<!---->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
</div>"
|
</div>"
|
||||||
@@ -227,6 +244,7 @@ exports[`FormField > renders with size xs correctly 1`] = `
|
|||||||
<p id="v-0-0-description" class="text-muted">Enter your username</p>
|
<p id="v-0-0-description" class="text-muted">Enter your username</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="mt-1 relative">
|
<div class="mt-1 relative">
|
||||||
|
<!---->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
</div>"
|
</div>"
|
||||||
@@ -239,6 +257,7 @@ exports[`FormField > renders with ui correctly 1`] = `
|
|||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
<div class="">
|
<div class="">
|
||||||
|
<!---->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</div>
|
||||||
</div>"
|
</div>"
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -271,15 +271,13 @@ exports[`Table > renders with columns correctly 1`] = `
|
|||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
<thead class="relative [&>tr]:after:absolute [&>tr]:after:inset-x-0 [&>tr]:after:bottom-0 [&>tr]:after:h-px [&>tr]:after:bg-(--ui-border-accented)">
|
<thead class="relative [&>tr]:after:absolute [&>tr]:after:inset-x-0 [&>tr]:after:bottom-0 [&>tr]:after:h-px [&>tr]:after:bg-(--ui-border-accented)">
|
||||||
<tr class="data-[selected=true]:bg-elevated/50">
|
<tr class="data-[selected=true]:bg-elevated/50">
|
||||||
<th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">
|
<th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0"><label class="relative flex items-start flex-row">
|
||||||
<div class="relative flex items-start flex-row">
|
|
||||||
<div class="flex items-center h-5"><button arialabel="Select all" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
<div class="flex items-center h-5"><button arialabel="Select all" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||||
<!---->
|
<!---->
|
||||||
<!---->
|
<!---->
|
||||||
</button></div>
|
</button></div>
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</label></th>
|
||||||
</th>
|
|
||||||
<th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">#</th>
|
<th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">#</th>
|
||||||
<th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Date</th>
|
<th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Date</th>
|
||||||
<th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Status</th>
|
<th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Status</th>
|
||||||
@@ -296,15 +294,13 @@ exports[`Table > renders with columns correctly 1`] = `
|
|||||||
</thead>
|
</thead>
|
||||||
<tbody class="divide-y divide-default [&>tr]:data-[selectable=true]:hover:bg-elevated/50 [&>tr]:data-[selectable=true]:focus-visible:outline-primary">
|
<tbody class="divide-y divide-default [&>tr]:data-[selectable=true]:hover:bg-elevated/50 [&>tr]:data-[selectable=true]:focus-visible:outline-primary">
|
||||||
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
||||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0"><label class="relative flex items-start flex-row">
|
||||||
<div class="relative flex items-start flex-row">
|
|
||||||
<div class="flex items-center h-5"><button arialabel="Select row" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
<div class="flex items-center h-5"><button arialabel="Select row" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||||
<!---->
|
<!---->
|
||||||
<!---->
|
<!---->
|
||||||
</button></div>
|
</button></div>
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</label></td>
|
||||||
</td>
|
|
||||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">#m5gr84i9</td>
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">#m5gr84i9</td>
|
||||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">Invalid Date</td>
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">Invalid Date</td>
|
||||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 capitalize"><!--v-if-->success<!--v-if--></span></td>
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 capitalize"><!--v-if-->success<!--v-if--></span></td>
|
||||||
@@ -327,15 +323,13 @@ exports[`Table > renders with columns correctly 1`] = `
|
|||||||
</tr>
|
</tr>
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
||||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0"><label class="relative flex items-start flex-row">
|
||||||
<div class="relative flex items-start flex-row">
|
|
||||||
<div class="flex items-center h-5"><button arialabel="Select row" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
<div class="flex items-center h-5"><button arialabel="Select row" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||||
<!---->
|
<!---->
|
||||||
<!---->
|
<!---->
|
||||||
</button></div>
|
</button></div>
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</label></td>
|
||||||
</td>
|
|
||||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">#3u1reuv4</td>
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">#3u1reuv4</td>
|
||||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">Invalid Date</td>
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">Invalid Date</td>
|
||||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 capitalize"><!--v-if-->success<!--v-if--></span></td>
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 capitalize"><!--v-if-->success<!--v-if--></span></td>
|
||||||
@@ -358,15 +352,13 @@ exports[`Table > renders with columns correctly 1`] = `
|
|||||||
</tr>
|
</tr>
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
||||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0"><label class="relative flex items-start flex-row">
|
||||||
<div class="relative flex items-start flex-row">
|
|
||||||
<div class="flex items-center h-5"><button arialabel="Select row" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-5" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
<div class="flex items-center h-5"><button arialabel="Select row" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-5" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||||
<!---->
|
<!---->
|
||||||
<!---->
|
<!---->
|
||||||
</button></div>
|
</button></div>
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</label></td>
|
||||||
</td>
|
|
||||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">#derv1ws0</td>
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">#derv1ws0</td>
|
||||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">Invalid Date</td>
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">Invalid Date</td>
|
||||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 capitalize"><!--v-if-->processing<!--v-if--></span></td>
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 capitalize"><!--v-if-->processing<!--v-if--></span></td>
|
||||||
@@ -389,15 +381,13 @@ exports[`Table > renders with columns correctly 1`] = `
|
|||||||
</tr>
|
</tr>
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
||||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0"><label class="relative flex items-start flex-row">
|
||||||
<div class="relative flex items-start flex-row">
|
|
||||||
<div class="flex items-center h-5"><button arialabel="Select row" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-7" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
<div class="flex items-center h-5"><button arialabel="Select row" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-7" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||||
<!---->
|
<!---->
|
||||||
<!---->
|
<!---->
|
||||||
</button></div>
|
</button></div>
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</label></td>
|
||||||
</td>
|
|
||||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">#5kma53ae</td>
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">#5kma53ae</td>
|
||||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">Invalid Date</td>
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">Invalid Date</td>
|
||||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 capitalize"><!--v-if-->success<!--v-if--></span></td>
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 capitalize"><!--v-if-->success<!--v-if--></span></td>
|
||||||
@@ -420,15 +410,13 @@ exports[`Table > renders with columns correctly 1`] = `
|
|||||||
</tr>
|
</tr>
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
||||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0"><label class="relative flex items-start flex-row">
|
||||||
<div class="relative flex items-start flex-row">
|
|
||||||
<div class="flex items-center h-5"><button arialabel="Select row" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-9" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
<div class="flex items-center h-5"><button arialabel="Select row" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-9" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||||
<!---->
|
<!---->
|
||||||
<!---->
|
<!---->
|
||||||
</button></div>
|
</button></div>
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</label></td>
|
||||||
</td>
|
|
||||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">#bhqecj4p</td>
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">#bhqecj4p</td>
|
||||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">Invalid Date</td>
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">Invalid Date</td>
|
||||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-error/10 text-error ring ring-inset ring-error/25 capitalize"><!--v-if-->failed<!--v-if--></span></td>
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-error/10 text-error ring ring-inset ring-error/25 capitalize"><!--v-if-->failed<!--v-if--></span></td>
|
||||||
@@ -530,15 +518,13 @@ exports[`Table > renders with empty slot correctly 1`] = `
|
|||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
<thead class="relative [&>tr]:after:absolute [&>tr]:after:inset-x-0 [&>tr]:after:bottom-0 [&>tr]:after:h-px [&>tr]:after:bg-(--ui-border-accented)">
|
<thead class="relative [&>tr]:after:absolute [&>tr]:after:inset-x-0 [&>tr]:after:bottom-0 [&>tr]:after:h-px [&>tr]:after:bg-(--ui-border-accented)">
|
||||||
<tr class="data-[selected=true]:bg-elevated/50">
|
<tr class="data-[selected=true]:bg-elevated/50">
|
||||||
<th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">
|
<th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0"><label class="relative flex items-start flex-row">
|
||||||
<div class="relative flex items-start flex-row">
|
|
||||||
<div class="flex items-center h-5"><button arialabel="Select all" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
<div class="flex items-center h-5"><button arialabel="Select all" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||||
<!---->
|
<!---->
|
||||||
<!---->
|
<!---->
|
||||||
</button></div>
|
</button></div>
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</label></th>
|
||||||
</th>
|
|
||||||
<th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">#</th>
|
<th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">#</th>
|
||||||
<th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Date</th>
|
<th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Date</th>
|
||||||
<th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Status</th>
|
<th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Status</th>
|
||||||
@@ -1310,15 +1296,13 @@ exports[`Table > renders with loading slot correctly 1`] = `
|
|||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
<thead class="relative [&>tr]:after:absolute [&>tr]:after:inset-x-0 [&>tr]:after:bottom-0 [&>tr]:after:h-px [&>tr]:after:bg-(--ui-border-accented) after:absolute after:bottom-0 after:inset-x-0 after:h-px after:bg-primary after:animate-[carousel_2s_ease-in-out_infinite] rtl:after:animate-[carousel-rtl_2s_ease-in-out_infinite]">
|
<thead class="relative [&>tr]:after:absolute [&>tr]:after:inset-x-0 [&>tr]:after:bottom-0 [&>tr]:after:h-px [&>tr]:after:bg-(--ui-border-accented) after:absolute after:bottom-0 after:inset-x-0 after:h-px after:bg-primary after:animate-[carousel_2s_ease-in-out_infinite] rtl:after:animate-[carousel-rtl_2s_ease-in-out_infinite]">
|
||||||
<tr class="data-[selected=true]:bg-elevated/50">
|
<tr class="data-[selected=true]:bg-elevated/50">
|
||||||
<th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">
|
<th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0"><label class="relative flex items-start flex-row">
|
||||||
<div class="relative flex items-start flex-row">
|
|
||||||
<div class="flex items-center h-5"><button arialabel="Select all" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
<div class="flex items-center h-5"><button arialabel="Select all" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||||
<!---->
|
<!---->
|
||||||
<!---->
|
<!---->
|
||||||
</button></div>
|
</button></div>
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</label></th>
|
||||||
</th>
|
|
||||||
<th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">#</th>
|
<th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">#</th>
|
||||||
<th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Date</th>
|
<th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Date</th>
|
||||||
<th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Status</th>
|
<th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Status</th>
|
||||||
|
|||||||
@@ -271,15 +271,13 @@ exports[`Table > renders with columns correctly 1`] = `
|
|||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
<thead class="relative [&>tr]:after:absolute [&>tr]:after:inset-x-0 [&>tr]:after:bottom-0 [&>tr]:after:h-px [&>tr]:after:bg-(--ui-border-accented)">
|
<thead class="relative [&>tr]:after:absolute [&>tr]:after:inset-x-0 [&>tr]:after:bottom-0 [&>tr]:after:h-px [&>tr]:after:bg-(--ui-border-accented)">
|
||||||
<tr class="data-[selected=true]:bg-elevated/50">
|
<tr class="data-[selected=true]:bg-elevated/50">
|
||||||
<th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">
|
<th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0"><label class="relative flex items-start flex-row">
|
||||||
<div class="relative flex items-start flex-row">
|
|
||||||
<div class="flex items-center h-5"><button arialabel="Select all" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
<div class="flex items-center h-5"><button arialabel="Select all" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||||
<!---->
|
<!---->
|
||||||
<!---->
|
<!---->
|
||||||
</button></div>
|
</button></div>
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</label></th>
|
||||||
</th>
|
|
||||||
<th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">#</th>
|
<th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">#</th>
|
||||||
<th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Date</th>
|
<th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Date</th>
|
||||||
<th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Status</th>
|
<th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Status</th>
|
||||||
@@ -296,15 +294,13 @@ exports[`Table > renders with columns correctly 1`] = `
|
|||||||
</thead>
|
</thead>
|
||||||
<tbody class="divide-y divide-default [&>tr]:data-[selectable=true]:hover:bg-elevated/50 [&>tr]:data-[selectable=true]:focus-visible:outline-primary">
|
<tbody class="divide-y divide-default [&>tr]:data-[selectable=true]:hover:bg-elevated/50 [&>tr]:data-[selectable=true]:focus-visible:outline-primary">
|
||||||
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
||||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0"><label class="relative flex items-start flex-row">
|
||||||
<div class="relative flex items-start flex-row">
|
|
||||||
<div class="flex items-center h-5"><button arialabel="Select row" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0-1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
<div class="flex items-center h-5"><button arialabel="Select row" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0-1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||||
<!---->
|
<!---->
|
||||||
<!---->
|
<!---->
|
||||||
</button></div>
|
</button></div>
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</label></td>
|
||||||
</td>
|
|
||||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">#m5gr84i9</td>
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">#m5gr84i9</td>
|
||||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">Invalid Date</td>
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">Invalid Date</td>
|
||||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 capitalize"><!--v-if-->success<!--v-if--></span></td>
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 capitalize"><!--v-if-->success<!--v-if--></span></td>
|
||||||
@@ -327,15 +323,13 @@ exports[`Table > renders with columns correctly 1`] = `
|
|||||||
</tr>
|
</tr>
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
||||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0"><label class="relative flex items-start flex-row">
|
||||||
<div class="relative flex items-start flex-row">
|
|
||||||
<div class="flex items-center h-5"><button arialabel="Select row" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0-3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
<div class="flex items-center h-5"><button arialabel="Select row" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0-3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||||
<!---->
|
<!---->
|
||||||
<!---->
|
<!---->
|
||||||
</button></div>
|
</button></div>
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</label></td>
|
||||||
</td>
|
|
||||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">#3u1reuv4</td>
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">#3u1reuv4</td>
|
||||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">Invalid Date</td>
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">Invalid Date</td>
|
||||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 capitalize"><!--v-if-->success<!--v-if--></span></td>
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 capitalize"><!--v-if-->success<!--v-if--></span></td>
|
||||||
@@ -358,15 +352,13 @@ exports[`Table > renders with columns correctly 1`] = `
|
|||||||
</tr>
|
</tr>
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
||||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0"><label class="relative flex items-start flex-row">
|
||||||
<div class="relative flex items-start flex-row">
|
|
||||||
<div class="flex items-center h-5"><button arialabel="Select row" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0-5" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
<div class="flex items-center h-5"><button arialabel="Select row" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0-5" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||||
<!---->
|
<!---->
|
||||||
<!---->
|
<!---->
|
||||||
</button></div>
|
</button></div>
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</label></td>
|
||||||
</td>
|
|
||||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">#derv1ws0</td>
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">#derv1ws0</td>
|
||||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">Invalid Date</td>
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">Invalid Date</td>
|
||||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 capitalize"><!--v-if-->processing<!--v-if--></span></td>
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 capitalize"><!--v-if-->processing<!--v-if--></span></td>
|
||||||
@@ -389,15 +381,13 @@ exports[`Table > renders with columns correctly 1`] = `
|
|||||||
</tr>
|
</tr>
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
||||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0"><label class="relative flex items-start flex-row">
|
||||||
<div class="relative flex items-start flex-row">
|
|
||||||
<div class="flex items-center h-5"><button arialabel="Select row" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0-7" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
<div class="flex items-center h-5"><button arialabel="Select row" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0-7" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||||
<!---->
|
<!---->
|
||||||
<!---->
|
<!---->
|
||||||
</button></div>
|
</button></div>
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</label></td>
|
||||||
</td>
|
|
||||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">#5kma53ae</td>
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">#5kma53ae</td>
|
||||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">Invalid Date</td>
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">Invalid Date</td>
|
||||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 capitalize"><!--v-if-->success<!--v-if--></span></td>
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 capitalize"><!--v-if-->success<!--v-if--></span></td>
|
||||||
@@ -420,15 +410,13 @@ exports[`Table > renders with columns correctly 1`] = `
|
|||||||
</tr>
|
</tr>
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
||||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0"><label class="relative flex items-start flex-row">
|
||||||
<div class="relative flex items-start flex-row">
|
|
||||||
<div class="flex items-center h-5"><button arialabel="Select row" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0-9" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
<div class="flex items-center h-5"><button arialabel="Select row" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0-9" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||||
<!---->
|
<!---->
|
||||||
<!---->
|
<!---->
|
||||||
</button></div>
|
</button></div>
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</label></td>
|
||||||
</td>
|
|
||||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">#bhqecj4p</td>
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">#bhqecj4p</td>
|
||||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">Invalid Date</td>
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">Invalid Date</td>
|
||||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-error/10 text-error ring ring-inset ring-error/25 capitalize"><!--v-if-->failed<!--v-if--></span></td>
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-error/10 text-error ring ring-inset ring-error/25 capitalize"><!--v-if-->failed<!--v-if--></span></td>
|
||||||
@@ -530,15 +518,13 @@ exports[`Table > renders with empty slot correctly 1`] = `
|
|||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
<thead class="relative [&>tr]:after:absolute [&>tr]:after:inset-x-0 [&>tr]:after:bottom-0 [&>tr]:after:h-px [&>tr]:after:bg-(--ui-border-accented)">
|
<thead class="relative [&>tr]:after:absolute [&>tr]:after:inset-x-0 [&>tr]:after:bottom-0 [&>tr]:after:h-px [&>tr]:after:bg-(--ui-border-accented)">
|
||||||
<tr class="data-[selected=true]:bg-elevated/50">
|
<tr class="data-[selected=true]:bg-elevated/50">
|
||||||
<th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">
|
<th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0"><label class="relative flex items-start flex-row">
|
||||||
<div class="relative flex items-start flex-row">
|
|
||||||
<div class="flex items-center h-5"><button arialabel="Select all" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
<div class="flex items-center h-5"><button arialabel="Select all" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||||
<!---->
|
<!---->
|
||||||
<!---->
|
<!---->
|
||||||
</button></div>
|
</button></div>
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</label></th>
|
||||||
</th>
|
|
||||||
<th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">#</th>
|
<th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">#</th>
|
||||||
<th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Date</th>
|
<th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Date</th>
|
||||||
<th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Status</th>
|
<th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Status</th>
|
||||||
@@ -1310,15 +1296,13 @@ exports[`Table > renders with loading slot correctly 1`] = `
|
|||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
<thead class="relative [&>tr]:after:absolute [&>tr]:after:inset-x-0 [&>tr]:after:bottom-0 [&>tr]:after:h-px [&>tr]:after:bg-(--ui-border-accented) after:absolute after:bottom-0 after:inset-x-0 after:h-px after:bg-primary after:animate-[carousel_2s_ease-in-out_infinite] rtl:after:animate-[carousel-rtl_2s_ease-in-out_infinite]">
|
<thead class="relative [&>tr]:after:absolute [&>tr]:after:inset-x-0 [&>tr]:after:bottom-0 [&>tr]:after:h-px [&>tr]:after:bg-(--ui-border-accented) after:absolute after:bottom-0 after:inset-x-0 after:h-px after:bg-primary after:animate-[carousel_2s_ease-in-out_infinite] rtl:after:animate-[carousel-rtl_2s_ease-in-out_infinite]">
|
||||||
<tr class="data-[selected=true]:bg-elevated/50">
|
<tr class="data-[selected=true]:bg-elevated/50">
|
||||||
<th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">
|
<th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0"><label class="relative flex items-start flex-row">
|
||||||
<div class="relative flex items-start flex-row">
|
|
||||||
<div class="flex items-center h-5"><button arialabel="Select all" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
<div class="flex items-center h-5"><button arialabel="Select all" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||||
<!---->
|
<!---->
|
||||||
<!---->
|
<!---->
|
||||||
</button></div>
|
</button></div>
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</label></th>
|
||||||
</th>
|
|
||||||
<th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">#</th>
|
<th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">#</th>
|
||||||
<th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Date</th>
|
<th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Date</th>
|
||||||
<th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Status</th>
|
<th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Status</th>
|
||||||
|
|||||||
Reference in New Issue
Block a user