mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-14 12:14:41 +01:00
Merge remote-tracking branch 'origin/v3' into feat/init-blog
This commit is contained in:
HugoRCD
@@ -0,0 +1,78 @@
|
||||
<script setup lang="ts">
|
||||
const groups = [
|
||||
{
|
||||
id: 'actions',
|
||||
items: [
|
||||
{
|
||||
label: 'Add new file',
|
||||
suffix: 'Create a new file in the current directory',
|
||||
icon: 'i-lucide-file-plus',
|
||||
kbds: ['meta', 'N']
|
||||
},
|
||||
{
|
||||
label: 'Add new folder',
|
||||
suffix: 'Create a new folder in the current directory',
|
||||
icon: 'i-lucide-folder-plus',
|
||||
kbds: ['meta', 'F']
|
||||
},
|
||||
{
|
||||
label: 'Search files',
|
||||
suffix: 'Search across all files in the project',
|
||||
icon: 'i-lucide-search',
|
||||
kbds: ['meta', 'P']
|
||||
},
|
||||
{
|
||||
label: 'Settings',
|
||||
suffix: 'Open application settings',
|
||||
icon: 'i-lucide-settings',
|
||||
kbds: ['meta', ',']
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'recent',
|
||||
label: 'Recent',
|
||||
items: [
|
||||
{
|
||||
label: 'project.vue',
|
||||
suffix: 'components/',
|
||||
icon: 'i-vscode-icons-file-type-vue'
|
||||
},
|
||||
{
|
||||
label: 'readme.md',
|
||||
suffix: 'docs/',
|
||||
icon: 'i-vscode-icons-file-type-markdown'
|
||||
},
|
||||
{
|
||||
label: 'package.json',
|
||||
suffix: 'root/',
|
||||
icon: 'i-vscode-icons-file-type-node'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UCommandPalette :groups="groups" class="flex-1 h-80">
|
||||
<template #footer>
|
||||
<div class="flex items-center justify-between gap-2">
|
||||
<UIcon name="i-simple-icons-nuxtdotjs" class="size-5 text-dimmed ml-1" />
|
||||
<div class="flex items-center gap-1">
|
||||
<UButton color="neutral" variant="ghost" label="Open Command" class="text-dimmed" size="xs">
|
||||
<template #trailing>
|
||||
<UKbd value="enter" />
|
||||
</template>
|
||||
</UButton>
|
||||
<USeparator orientation="vertical" class="h-4" />
|
||||
<UButton color="neutral" variant="ghost" label="Actions" class="text-dimmed" size="xs">
|
||||
<template #trailing>
|
||||
<UKbd value="meta" />
|
||||
<UKbd value="k" />
|
||||
</template>
|
||||
</UButton>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</UCommandPalette>
|
||||
</template>
|
||||
@@ -0,0 +1,16 @@
|
||||
<script setup lang="ts">
|
||||
const toast = useToast()
|
||||
|
||||
function showToast() {
|
||||
toast.add({
|
||||
title: 'Uh oh! Something went wrong.',
|
||||
description: 'There was a problem with your request.',
|
||||
icon: 'i-lucide-wifi',
|
||||
progress: false
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UButton label="Show toast" color="neutral" variant="outline" @click="showToast" />
|
||||
</template>
|
||||
@@ -877,6 +877,20 @@ props:
|
||||
This can be useful when using the CommandPalette inside a [`Modal`](/components/modal) for example.
|
||||
::
|
||||
|
||||
### With footer slot :badge{label="Soon" class="align-text-top"}
|
||||
|
||||
Use the `#footer` slot to add custom content at the bottom of the CommandPalette, such as keyboard shortcuts help or additional actions.
|
||||
|
||||
::component-example
|
||||
---
|
||||
collapse: true
|
||||
name: 'command-palette-footer-slot-example'
|
||||
class: '!p-0'
|
||||
props:
|
||||
autofocus: false
|
||||
---
|
||||
::
|
||||
|
||||
### With custom slot
|
||||
|
||||
Use the `slot` property to customize a specific item or group.
|
||||
|
||||
@@ -107,7 +107,7 @@ name: 'toast-color-example'
|
||||
|
||||
### Close
|
||||
|
||||
Pass a `close` field to customize or hide the close button (with `false` value).
|
||||
Pass a `close` field to customize or hide the close [Button](/components/button) (with `false` value).
|
||||
|
||||
::component-example
|
||||
---
|
||||
@@ -143,7 +143,7 @@ You can customize this icon globally in your `vite.config.ts` under `ui.icons.cl
|
||||
|
||||
### Actions
|
||||
|
||||
Pass an `actions` field to add some [Button](/components/button) actions to the Alert.
|
||||
Pass an `actions` field to add some [Button](/components/button) actions to the Toast.
|
||||
|
||||
::component-example
|
||||
---
|
||||
@@ -155,9 +155,23 @@ name: 'toast-actions-example'
|
||||
---
|
||||
::
|
||||
|
||||
### Progress :badge{label="Soon" class="align-text-top"}
|
||||
|
||||
Pass a `progress` field to customize or hide the [Progress](/components/progress) bar (with `false` value).
|
||||
|
||||
::tip
|
||||
The Progress bar inherits the Toast color by default, but you can override it using the `progress.color` field.
|
||||
::
|
||||
|
||||
::component-example
|
||||
---
|
||||
name: 'toast-progress-example'
|
||||
---
|
||||
::
|
||||
|
||||
### Orientation
|
||||
|
||||
Use the `orientation` prop to change the orientation of the Toast.
|
||||
Pass an `orientation` field to the `toast.add` method to change the orientation of the Toast.
|
||||
|
||||
::component-example
|
||||
---
|
||||
|
||||
@@ -11,10 +11,10 @@
|
||||
"dependencies": {
|
||||
"@ai-sdk/vue": "^1.2.12",
|
||||
"@iconify-json/logos": "^1.2.4",
|
||||
"@iconify-json/lucide": "^1.2.54",
|
||||
"@iconify-json/simple-icons": "^1.2.41",
|
||||
"@iconify-json/lucide": "^1.2.56",
|
||||
"@iconify-json/simple-icons": "^1.2.42",
|
||||
"@iconify-json/vscode-icons": "^1.2.23",
|
||||
"@nuxt/content": "^3.6.2",
|
||||
"@nuxt/content": "^3.6.3",
|
||||
"@nuxt/image": "^1.10.0",
|
||||
"@nuxt/ui": "workspace:*",
|
||||
"@nuxt/ui-pro": "https://pkg.pr.new/@nuxt/ui-pro@22fdc5e",
|
||||
@@ -29,22 +29,22 @@
|
||||
"capture-website": "^4.2.0",
|
||||
"joi": "^17.13.3",
|
||||
"maska": "^3.2.0",
|
||||
"motion-v": "^1.4.0",
|
||||
"motion-v": "^1.5.0",
|
||||
"nuxt": "^3.17.6",
|
||||
"nuxt-component-meta": "^0.12.1",
|
||||
"nuxt-llms": "^0.1.3",
|
||||
"nuxt-og-image": "^5.1.8",
|
||||
"nuxt-og-image": "^5.1.9",
|
||||
"prettier": "^3.6.2",
|
||||
"shiki-transformer-color-highlight": "^1.0.0",
|
||||
"sortablejs": "^1.15.6",
|
||||
"superstruct": "^2.0.2",
|
||||
"ufo": "^1.6.1",
|
||||
"valibot": "^1.1.0",
|
||||
"workers-ai-provider": "^0.7.0",
|
||||
"workers-ai-provider": "^0.7.1",
|
||||
"yup": "^1.6.1",
|
||||
"zod": "^3.25.67"
|
||||
"zod": "^3.25.75"
|
||||
},
|
||||
"devDependencies": {
|
||||
"wrangler": "^4.22.0"
|
||||
"wrangler": "^4.23.0"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -123,7 +123,7 @@
|
||||
"@tailwindcss/postcss": "^4.1.11",
|
||||
"@tailwindcss/vite": "^4.1.11",
|
||||
"@tanstack/vue-table": "^8.21.3",
|
||||
"@unhead/vue": "^2.0.11",
|
||||
"@unhead/vue": "^2.0.12",
|
||||
"@vueuse/core": "^13.5.0",
|
||||
"@vueuse/integrations": "^13.5.0",
|
||||
"colortranslator": "^5.0.0",
|
||||
@@ -152,10 +152,10 @@
|
||||
"unplugin-auto-import": "^19.3.0",
|
||||
"unplugin-vue-components": "^28.8.0",
|
||||
"vaul-vue": "0.4.1",
|
||||
"vue-component-type-helpers": "^3.0.0"
|
||||
"vue-component-type-helpers": "^3.0.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@nuxt/eslint-config": "^1.5.0",
|
||||
"@nuxt/eslint-config": "^1.5.2",
|
||||
"@nuxt/module-builder": "^1.0.1",
|
||||
"@nuxt/test-utils": "^3.19.2",
|
||||
"@release-it/conventional-changelog": "^10.0.1",
|
||||
@@ -167,7 +167,7 @@
|
||||
"release-it": "^19.0.3",
|
||||
"vitest": "^3.2.4",
|
||||
"vitest-environment-nuxt": "^1.0.1",
|
||||
"vue-tsc": "^3.0.0"
|
||||
"vue-tsc": "^3.0.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@inertiajs/vue3": "^2.0.7",
|
||||
|
||||
@@ -13,12 +13,12 @@
|
||||
"@nuxt/ui": "workspace:*",
|
||||
"vue": "^3.5.17",
|
||||
"vue-router": "^4.5.1",
|
||||
"zod": "^3.25.67"
|
||||
"zod": "^3.25.75"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^5.2.4",
|
||||
"typescript": "^5.8.3",
|
||||
"vite": "^6.3.5",
|
||||
"vue-tsc": "^3.0.0"
|
||||
"vue-tsc": "^3.0.1"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -166,7 +166,27 @@ defineShortcuts({
|
||||
multiple
|
||||
class="sm:max-h-80"
|
||||
@update:model-value="onSelect"
|
||||
/>
|
||||
>
|
||||
<template #footer>
|
||||
<div class="flex items-center justify-between gap-2">
|
||||
<UIcon name="i-simple-icons-nuxtdotjs" class="size-5 text-dimmed ml-1" />
|
||||
<div class="flex items-center gap-1">
|
||||
<UButton color="neutral" variant="ghost" label="Open Command" class="text-dimmed" size="xs">
|
||||
<template #trailing>
|
||||
<UKbd value="enter" />
|
||||
</template>
|
||||
</UButton>
|
||||
<USeparator orientation="vertical" class="h-4" />
|
||||
<UButton color="neutral" variant="ghost" label="Actions" class="text-dimmed" size="xs">
|
||||
<template #trailing>
|
||||
<UKbd value="meta" />
|
||||
<UKbd value="k" />
|
||||
</template>
|
||||
</UButton>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</UCommandPalette>
|
||||
</DefineTemplate>
|
||||
|
||||
<div class="flex-1 flex flex-col gap-12 w-full max-w-lg">
|
||||
|
||||
@@ -9,17 +9,17 @@
|
||||
"typecheck": "nuxt typecheck"
|
||||
},
|
||||
"dependencies": {
|
||||
"@iconify-json/lucide": "^1.2.54",
|
||||
"@iconify-json/simple-icons": "^1.2.41",
|
||||
"@iconify-json/lucide": "^1.2.56",
|
||||
"@iconify-json/simple-icons": "^1.2.42",
|
||||
"@internationalized/date": "^3.8.2",
|
||||
"@nuxt/ui": "workspace:*",
|
||||
"@nuxthub/core": "^0.9.0",
|
||||
"nuxt": "^3.17.6",
|
||||
"zod": "^3.25.67"
|
||||
"zod": "^3.25.75"
|
||||
},
|
||||
"devDependencies": {
|
||||
"typescript": "^5.8.3",
|
||||
"vue-tsc": "^3.0.0"
|
||||
"vue-tsc": "^3.0.1"
|
||||
},
|
||||
"resolutions": {
|
||||
"unimport": "4.1.1"
|
||||
|
||||
728
pnpm-lock.yaml
generated
728
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
@@ -339,6 +339,7 @@ defineExpose({
|
||||
:aria-label="t('carousel.goto', { slide: index + 1 })"
|
||||
:class="ui.dot({ class: props.ui?.dot, active: selectedIndex === index })"
|
||||
:data-state="selectedIndex === index ? 'active' : undefined"
|
||||
:aria-current="selectedIndex === index ? true : undefined"
|
||||
@click="scrollTo(index)"
|
||||
/>
|
||||
</template>
|
||||
|
||||
@@ -147,6 +147,7 @@ type SlotProps<T> = (props: { item: T, index: number }) => any
|
||||
|
||||
export type CommandPaletteSlots<G extends CommandPaletteGroup<T> = CommandPaletteGroup<any>, T extends CommandPaletteItem = CommandPaletteItem> = {
|
||||
'empty'(props: { searchTerm?: string }): any
|
||||
'footer'(props: { ui: { [K in keyof Required<CommandPalette['slots']>]: (props?: Record<string, any>) => string } }): any
|
||||
'back'(props: { ui: { [K in keyof Required<CommandPalette['slots']>]: (props?: Record<string, any>) => string } }): any
|
||||
'close'(props: { ui: { [K in keyof Required<CommandPalette['slots']>]: (props?: Record<string, any>) => string } }): any
|
||||
'item': SlotProps<T>
|
||||
@@ -444,5 +445,9 @@ function onSelect(e: Event, item: T) {
|
||||
</slot>
|
||||
</div>
|
||||
</ListboxContent>
|
||||
|
||||
<div v-if="!!slots.footer" :class="ui.footer({ class: props.ui?.footer })">
|
||||
<slot name="footer" :ui="ui" />
|
||||
</div>
|
||||
</ListboxRoot>
|
||||
</template>
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
import type { ToastRootProps, ToastRootEmits } from 'reka-ui'
|
||||
import type { AppConfig } from '@nuxt/schema'
|
||||
import theme from '#build/ui/toast'
|
||||
import type { AvatarProps, ButtonProps } from '../types'
|
||||
import type { AvatarProps, ButtonProps, ProgressProps } from '../types'
|
||||
import type { StringOrVNode, ComponentConfig } from '../types/utils'
|
||||
|
||||
type Toast = ComponentConfig<typeof theme, AppConfig, 'toast'>
|
||||
@@ -29,18 +29,6 @@ export interface ToastProps extends Pick<ToastRootProps, 'defaultOpen' | 'open'
|
||||
* @defaultValue 'vertical'
|
||||
*/
|
||||
orientation?: Toast['variants']['orientation']
|
||||
/**
|
||||
* Whether to show the progress bar.
|
||||
* @defaultValue true
|
||||
*/
|
||||
progress?: boolean
|
||||
/**
|
||||
* Display a list of actions:
|
||||
* - under the title and description when orientation is `vertical`
|
||||
* - next to the close button when orientation is `horizontal`
|
||||
* `{ size: 'xs' }`{lang="ts-type"}
|
||||
*/
|
||||
actions?: ButtonProps[]
|
||||
/**
|
||||
* Display a close button to dismiss the toast.
|
||||
* `{ size: 'md', color: 'neutral', variant: 'link' }`{lang="ts-type"}
|
||||
@@ -53,6 +41,19 @@ export interface ToastProps extends Pick<ToastRootProps, 'defaultOpen' | 'open'
|
||||
* @IconifyIcon
|
||||
*/
|
||||
closeIcon?: string
|
||||
/**
|
||||
* Display a list of actions:
|
||||
* - under the title and description when orientation is `vertical`
|
||||
* - next to the close button when orientation is `horizontal`
|
||||
* `{ size: 'xs' }`{lang="ts-type"}
|
||||
*/
|
||||
actions?: ButtonProps[]
|
||||
/**
|
||||
* Display a progress bar showing the toast's remaining duration.
|
||||
* `{ size: 'sm' }`{lang="ts-type"}
|
||||
* @defaultValue true
|
||||
*/
|
||||
progress?: boolean | Pick<ProgressProps, 'color'>
|
||||
class?: any
|
||||
ui?: Toast['slots']
|
||||
}
|
||||
@@ -78,10 +79,11 @@ import { tv } from '../utils/tv'
|
||||
import UIcon from './Icon.vue'
|
||||
import UAvatar from './Avatar.vue'
|
||||
import UButton from './Button.vue'
|
||||
import UProgress from './Progress.vue'
|
||||
|
||||
const props = withDefaults(defineProps<ToastProps>(), {
|
||||
close: true,
|
||||
orientation: 'vertical',
|
||||
close: true,
|
||||
progress: true
|
||||
})
|
||||
const emits = defineEmits<ToastEmits>()
|
||||
@@ -119,7 +121,7 @@ defineExpose({
|
||||
<template>
|
||||
<ToastRoot
|
||||
ref="el"
|
||||
v-slot="{ remaining, duration }"
|
||||
v-slot="{ remaining, duration, open }"
|
||||
v-bind="rootProps"
|
||||
:data-orientation="orientation"
|
||||
:class="ui.root({ class: [props.ui?.root, props.class] })"
|
||||
@@ -184,6 +186,13 @@ defineExpose({
|
||||
</ToastClose>
|
||||
</div>
|
||||
|
||||
<div v-if="progress && remaining > 0 && duration" :class="ui.progress({ class: props.ui?.progress })" :style="{ width: `${remaining / duration * 100}%` }" />
|
||||
<UProgress
|
||||
v-if="progress && open && remaining > 0 && duration"
|
||||
:model-value="remaining / duration * 100"
|
||||
:color="color"
|
||||
v-bind="(typeof progress === 'object' ? progress as Partial<ProgressProps> : {})"
|
||||
size="sm"
|
||||
:class="ui.progress({ class: props.ui?.progress })"
|
||||
/>
|
||||
</ToastRoot>
|
||||
</template>
|
||||
|
||||
@@ -7,6 +7,7 @@ export default (options: Required<ModuleOptions>) => ({
|
||||
close: '',
|
||||
back: 'p-0',
|
||||
content: 'relative overflow-hidden flex flex-col',
|
||||
footer: 'p-1',
|
||||
viewport: 'relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1 focus:outline-none',
|
||||
group: 'p-1 isolate',
|
||||
empty: 'py-6 text-center text-sm text-muted',
|
||||
|
||||
@@ -10,20 +10,18 @@ export default (options: Required<ModuleOptions>) => ({
|
||||
avatar: 'shrink-0',
|
||||
avatarSize: '2xl',
|
||||
actions: 'flex gap-1.5 shrink-0',
|
||||
progress: 'absolute inset-x-0 bottom-0 h-1 z-[-1]',
|
||||
progress: 'absolute inset-x-0 bottom-0',
|
||||
close: 'p-0'
|
||||
},
|
||||
variants: {
|
||||
color: {
|
||||
...Object.fromEntries((options.theme.colors || []).map((color: string) => [color, {
|
||||
root: `focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-${color}`,
|
||||
icon: `text-${color}`,
|
||||
progress: `bg-${color}`
|
||||
icon: `text-${color}`
|
||||
}])),
|
||||
neutral: {
|
||||
root: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted',
|
||||
icon: 'text-highlighted',
|
||||
progress: 'bg-inverted'
|
||||
icon: 'text-highlighted'
|
||||
}
|
||||
},
|
||||
orientation: {
|
||||
|
||||
@@ -89,7 +89,8 @@ describe('CommandPalette', () => {
|
||||
['with item-label slot', { props, slots: { 'item-label': () => 'Item label slot' } }],
|
||||
['with item-trailing slot', { props, slots: { 'item-trailing': () => 'Item trailing slot' } }],
|
||||
['with custom slot', { props, slots: { custom: () => 'Custom slot' } }],
|
||||
['with close slot', { props: { ...props, close: true }, slots: { close: () => 'Close slot' } }]
|
||||
['with close slot', { props: { ...props, close: true }, slots: { close: () => 'Close slot' } }],
|
||||
['with footer slot', { props, slots: { footer: () => 'Footer slot' } }]
|
||||
])('renders %s correctly', async (nameOrHtml: string, options: { props?: CommandPaletteProps, slots?: Partial<CommandPaletteSlots> }) => {
|
||||
const html = await ComponentRender(nameOrHtml, options, CommandPalette)
|
||||
expect(html).toMatchSnapshot()
|
||||
|
||||
@@ -32,6 +32,7 @@ exports[`CommandPalette > renders with as correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</section>"
|
||||
`;
|
||||
@@ -68,6 +69,7 @@ exports[`CommandPalette > renders with class correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
@@ -102,6 +104,7 @@ exports[`CommandPalette > renders with close correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
@@ -136,6 +139,7 @@ exports[`CommandPalette > renders with close slot correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
@@ -170,6 +174,7 @@ exports[`CommandPalette > renders with closeIcon correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
@@ -204,6 +209,7 @@ exports[`CommandPalette > renders with custom slot correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
@@ -240,6 +246,7 @@ exports[`CommandPalette > renders with defaultValue correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
@@ -276,6 +283,7 @@ exports[`CommandPalette > renders with disabled correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
@@ -312,6 +320,44 @@ exports[`CommandPalette > renders with empty slot correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`CommandPalette > renders with footer slot correctly 1`] = `
|
||||
"<div dir="ltr" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
|
||||
<div class="relative inline-flex items-center [&>input]:h-12"><input type="text" placeholder="Type a command or search..." class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
<div class="relative overflow-hidden flex flex-col" role="listbox" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
|
||||
<div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1 focus:outline-none">
|
||||
<div role="group" aria-labelledby="reka-listbox-group-v-0" class="p-1 isolate">
|
||||
<!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-default"></svg><span class="truncate space-x-1 rtl:space-x-reverse text-dimmed"><!--v-if--><span class="text-highlighted [&>mark]:text-inverted [&>mark]:bg-primary">Add new file</span><span class="text-dimmed [&>mark]:text-inverted [&>mark]:bg-primary">Create a new file in the current directory or workspace.</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans bg-default text-highlighted ring ring-inset ring-accented h-5 min-w-[20px] text-[11px]">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans bg-default text-highlighted ring ring-inset ring-accented h-5 min-w-[20px] text-[11px]">N</kbd></span>
|
||||
<!----></span>
|
||||
</button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span class="truncate space-x-1 rtl:space-x-reverse text-dimmed"><!--v-if--><span class="text-highlighted [&>mark]:text-inverted [&>mark]:bg-primary">Add new folder</span><span class="text-dimmed [&>mark]:text-inverted [&>mark]:bg-primary">Create a new folder in the current directory or workspace.</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans bg-default text-highlighted ring ring-inset ring-accented h-5 min-w-[20px] text-[11px]">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans bg-default text-highlighted ring ring-inset ring-accented h-5 min-w-[20px] text-[11px]">F</kbd></span>
|
||||
<!----></span>
|
||||
</button><button type="button" disabled="" data-reka-collection-item="" id="reka-listbox-item-v-3" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span class="truncate space-x-1 rtl:space-x-reverse text-dimmed"><!--v-if--><span class="text-highlighted [&>mark]:text-inverted [&>mark]:bg-primary">Add hashtag</span><span class="text-dimmed [&>mark]:text-inverted [&>mark]:bg-primary">Add a hashtag to the current item.</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans bg-default text-highlighted ring ring-inset ring-accented h-5 min-w-[20px] text-[11px]">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans bg-default text-highlighted ring ring-inset ring-accented h-5 min-w-[20px] text-[11px]">H</kbd></span>
|
||||
<!----></span>
|
||||
</button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span class="truncate space-x-1 rtl:space-x-reverse text-dimmed"><!--v-if--><span class="text-highlighted [&>mark]:text-inverted [&>mark]:bg-primary">Add label</span><span class="text-dimmed [&>mark]:text-inverted [&>mark]:bg-primary">Add a label to the current item.</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans bg-default text-highlighted ring ring-inset ring-accented h-5 min-w-[20px] text-[11px]">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans bg-default text-highlighted ring ring-inset ring-accented h-5 min-w-[20px] text-[11px]">L</kbd></span>
|
||||
<!----></span>
|
||||
</button>
|
||||
</div>
|
||||
<div role="group" aria-labelledby="reka-listbox-group-v-5" class="p-1 isolate">
|
||||
<div id="reka-listbox-group-v-5" class="p-1.5 text-xs font-semibold text-highlighted">Labels</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
|
||||
<div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-error h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="truncate space-x-1 rtl:space-x-reverse text-dimmed"><!--v-if--><span class="text-highlighted [&>mark]:text-inverted [&>mark]:bg-primary">bug</span><span class="text-dimmed [&>mark]:text-inverted [&>mark]:bg-primary"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
|
||||
</button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
|
||||
<div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-success h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="truncate space-x-1 rtl:space-x-reverse text-dimmed"><!--v-if--><span class="text-highlighted [&>mark]:text-inverted [&>mark]:bg-primary">feature</span><span class="text-dimmed [&>mark]:text-inverted [&>mark]:bg-primary"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
|
||||
</button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-8" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
|
||||
<div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-info h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="truncate space-x-1 rtl:space-x-reverse text-dimmed"><!--v-if--><span class="text-highlighted [&>mark]:text-inverted [&>mark]:bg-primary">enhancement</span><span class="text-dimmed [&>mark]:text-inverted [&>mark]:bg-primary"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
|
||||
</button>
|
||||
</div>
|
||||
<div role="group" aria-labelledby="reka-listbox-group-v-9" class="p-1 isolate">
|
||||
<div id="reka-listbox-group-v-9" class="p-1.5 text-xs font-semibold text-highlighted">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" target="_blank" data-reka-collection-item="" id="reka-listbox-item-v-10" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate space-x-1 rtl:space-x-reverse text-dimmed"><!--v-if--><span class="text-highlighted [&>mark]:text-inverted [&>mark]:bg-primary">benjamincanac</span><span class="text-dimmed [&>mark]:text-inverted [&>mark]:bg-primary"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-1">Footer slot</div>
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
@@ -348,6 +394,7 @@ exports[`CommandPalette > renders with groups correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
@@ -384,6 +431,7 @@ exports[`CommandPalette > renders with icon correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
@@ -408,6 +456,7 @@ exports[`CommandPalette > renders with item slot correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
@@ -444,6 +493,7 @@ exports[`CommandPalette > renders with item-label slot correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
@@ -474,6 +524,7 @@ exports[`CommandPalette > renders with item-leading slot correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
@@ -504,6 +555,7 @@ exports[`CommandPalette > renders with item-trailing slot correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
@@ -545,6 +597,7 @@ exports[`CommandPalette > renders with labelKey correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
@@ -581,6 +634,7 @@ exports[`CommandPalette > renders with loading correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
@@ -617,6 +671,7 @@ exports[`CommandPalette > renders with loadingIcon correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
@@ -653,6 +708,7 @@ exports[`CommandPalette > renders with modelValue correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
@@ -689,6 +745,7 @@ exports[`CommandPalette > renders with placeholder correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
@@ -725,6 +782,7 @@ exports[`CommandPalette > renders with selectedIcon correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
@@ -761,6 +819,7 @@ exports[`CommandPalette > renders with ui correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
@@ -773,6 +832,7 @@ exports[`CommandPalette > renders without data correctly 1`] = `
|
||||
<div class="relative overflow-hidden flex flex-col" role="listbox" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
|
||||
<div class="py-6 text-center text-sm text-muted">No data</div>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
@@ -32,6 +32,7 @@ exports[`CommandPalette > renders with as correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</section>"
|
||||
`;
|
||||
@@ -68,6 +69,7 @@ exports[`CommandPalette > renders with class correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
@@ -105,6 +107,7 @@ exports[`CommandPalette > renders with close correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
@@ -139,6 +142,7 @@ exports[`CommandPalette > renders with close slot correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
@@ -176,6 +180,7 @@ exports[`CommandPalette > renders with closeIcon correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
@@ -210,6 +215,7 @@ exports[`CommandPalette > renders with custom slot correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
@@ -246,6 +252,7 @@ exports[`CommandPalette > renders with defaultValue correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
@@ -282,6 +289,7 @@ exports[`CommandPalette > renders with disabled correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
@@ -318,6 +326,44 @@ exports[`CommandPalette > renders with empty slot correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`CommandPalette > renders with footer slot correctly 1`] = `
|
||||
"<div dir="ltr" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
|
||||
<div class="relative inline-flex items-center [&>input]:h-12"><input type="text" placeholder="Type a command or search..." class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" value="" aria-activedescendant="reka-listbox-item-v-0-0-1"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
<div class="relative overflow-hidden flex flex-col" role="listbox" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
|
||||
<div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1 focus:outline-none">
|
||||
<div role="group" aria-labelledby="reka-listbox-group-v-0-0-0" class="p-1 isolate">
|
||||
<!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated" data-highlighted=""><span class="iconify i-lucide:file-plus shrink-0 size-5 text-default" aria-hidden="true"></span><span class="truncate space-x-1 rtl:space-x-reverse text-dimmed"><!--v-if--><span class="text-highlighted [&>mark]:text-inverted [&>mark]:bg-primary">Add new file</span><span class="text-dimmed [&>mark]:text-inverted [&>mark]:bg-primary">Create a new file in the current directory or workspace.</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans bg-default text-highlighted ring ring-inset ring-accented h-5 min-w-[20px] text-[11px]">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans bg-default text-highlighted ring ring-inset ring-accented h-5 min-w-[20px] text-[11px]">N</kbd></span>
|
||||
<!----></span>
|
||||
</button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:folder-plus shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="truncate space-x-1 rtl:space-x-reverse text-dimmed"><!--v-if--><span class="text-highlighted [&>mark]:text-inverted [&>mark]:bg-primary">Add new folder</span><span class="text-dimmed [&>mark]:text-inverted [&>mark]:bg-primary">Create a new folder in the current directory or workspace.</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans bg-default text-highlighted ring ring-inset ring-accented h-5 min-w-[20px] text-[11px]">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans bg-default text-highlighted ring ring-inset ring-accented h-5 min-w-[20px] text-[11px]">F</kbd></span>
|
||||
<!----></span>
|
||||
</button><button type="button" disabled="" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:hash shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="truncate space-x-1 rtl:space-x-reverse text-dimmed"><!--v-if--><span class="text-highlighted [&>mark]:text-inverted [&>mark]:bg-primary">Add hashtag</span><span class="text-dimmed [&>mark]:text-inverted [&>mark]:bg-primary">Add a hashtag to the current item.</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans bg-default text-highlighted ring ring-inset ring-accented h-5 min-w-[20px] text-[11px]">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans bg-default text-highlighted ring ring-inset ring-accented h-5 min-w-[20px] text-[11px]">H</kbd></span>
|
||||
<!----></span>
|
||||
</button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:tag shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="truncate space-x-1 rtl:space-x-reverse text-dimmed"><!--v-if--><span class="text-highlighted [&>mark]:text-inverted [&>mark]:bg-primary">Add label</span><span class="text-dimmed [&>mark]:text-inverted [&>mark]:bg-primary">Add a label to the current item.</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans bg-default text-highlighted ring ring-inset ring-accented h-5 min-w-[20px] text-[11px]">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans bg-default text-highlighted ring ring-inset ring-accented h-5 min-w-[20px] text-[11px]">L</kbd></span>
|
||||
<!----></span>
|
||||
</button>
|
||||
</div>
|
||||
<div role="group" aria-labelledby="reka-listbox-group-v-0-0-5" class="p-1 isolate">
|
||||
<div id="reka-listbox-group-v-0-0-5" class="p-1.5 text-xs font-semibold text-highlighted">Labels</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
|
||||
<div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-error h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="truncate space-x-1 rtl:space-x-reverse text-dimmed"><!--v-if--><span class="text-highlighted [&>mark]:text-inverted [&>mark]:bg-primary">bug</span><span class="text-dimmed [&>mark]:text-inverted [&>mark]:bg-primary"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
|
||||
</button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
|
||||
<div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-success h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="truncate space-x-1 rtl:space-x-reverse text-dimmed"><!--v-if--><span class="text-highlighted [&>mark]:text-inverted [&>mark]:bg-primary">feature</span><span class="text-dimmed [&>mark]:text-inverted [&>mark]:bg-primary"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
|
||||
</button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-8" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
|
||||
<div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-info h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="truncate space-x-1 rtl:space-x-reverse text-dimmed"><!--v-if--><span class="text-highlighted [&>mark]:text-inverted [&>mark]:bg-primary">enhancement</span><span class="text-dimmed [&>mark]:text-inverted [&>mark]:bg-primary"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
|
||||
</button>
|
||||
</div>
|
||||
<div role="group" aria-labelledby="reka-listbox-group-v-0-0-9" class="p-1 isolate">
|
||||
<div id="reka-listbox-group-v-0-0-9" class="p-1.5 text-xs font-semibold text-highlighted">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" id="reka-listbox-item-v-0-0-10" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate space-x-1 rtl:space-x-reverse text-dimmed"><!--v-if--><span class="text-highlighted [&>mark]:text-inverted [&>mark]:bg-primary">benjamincanac</span><span class="text-dimmed [&>mark]:text-inverted [&>mark]:bg-primary"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-1">Footer slot</div>
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
@@ -354,6 +400,7 @@ exports[`CommandPalette > renders with groups correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
@@ -390,6 +437,7 @@ exports[`CommandPalette > renders with icon correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
@@ -414,6 +462,7 @@ exports[`CommandPalette > renders with item slot correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
@@ -450,6 +499,7 @@ exports[`CommandPalette > renders with item-label slot correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
@@ -480,6 +530,7 @@ exports[`CommandPalette > renders with item-leading slot correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
@@ -510,6 +561,7 @@ exports[`CommandPalette > renders with item-trailing slot correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
@@ -551,6 +603,7 @@ exports[`CommandPalette > renders with labelKey correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
@@ -587,6 +640,7 @@ exports[`CommandPalette > renders with loading correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
@@ -623,6 +677,7 @@ exports[`CommandPalette > renders with loadingIcon correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
@@ -659,6 +714,7 @@ exports[`CommandPalette > renders with modelValue correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
@@ -695,6 +751,7 @@ exports[`CommandPalette > renders with placeholder correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
@@ -731,6 +788,7 @@ exports[`CommandPalette > renders with selectedIcon correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
@@ -767,6 +825,7 @@ exports[`CommandPalette > renders with ui correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
@@ -779,6 +838,7 @@ exports[`CommandPalette > renders without data correctly 1`] = `
|
||||
<div class="relative overflow-hidden flex flex-col" role="listbox" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
|
||||
<div class="py-6 text-center text-sm text-muted">No data</div>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
@@ -25,7 +25,13 @@ exports[`Toast > renders with actions correctly 1`] = `
|
||||
<!--v-if-->
|
||||
</button>
|
||||
</div>
|
||||
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary" style="width: 100%;"></div>
|
||||
<div class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
|
||||
<!--v-if-->
|
||||
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
|
||||
<div data-state="complete" data-value="100" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</li>
|
||||
</ol><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
|
||||
</div>
|
||||
@@ -56,7 +62,13 @@ exports[`Toast > renders with as correctly 1`] = `
|
||||
<!--v-if-->
|
||||
</button>
|
||||
</div>
|
||||
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary" style="width: 100%;"></div>
|
||||
<div class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
|
||||
<!--v-if-->
|
||||
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
|
||||
<div data-state="complete" data-value="100" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</section>
|
||||
</ol><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
|
||||
</div>
|
||||
@@ -86,7 +98,13 @@ exports[`Toast > renders with avatar correctly 1`] = `
|
||||
<!--v-if-->
|
||||
</button>
|
||||
</div>
|
||||
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary" style="width: 100%;"></div>
|
||||
<div class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
|
||||
<!--v-if-->
|
||||
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
|
||||
<div data-state="complete" data-value="100" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</li>
|
||||
</ol><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
|
||||
</div>
|
||||
@@ -117,7 +135,13 @@ exports[`Toast > renders with class correctly 1`] = `
|
||||
<!--v-if-->
|
||||
</button>
|
||||
</div>
|
||||
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary" style="width: 100%;"></div>
|
||||
<div class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
|
||||
<!--v-if-->
|
||||
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
|
||||
<div data-state="complete" data-value="100" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</li>
|
||||
</ol><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
|
||||
</div>
|
||||
@@ -145,7 +169,13 @@ exports[`Toast > renders with close slot correctly 1`] = `
|
||||
<div class="flex gap-1.5 shrink-0 items-center">
|
||||
<!--v-if-->Close slot
|
||||
</div>
|
||||
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary" style="width: 100%;"></div>
|
||||
<div class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
|
||||
<!--v-if-->
|
||||
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
|
||||
<div data-state="complete" data-value="100" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</li>
|
||||
</ol><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
|
||||
</div>
|
||||
@@ -176,7 +206,13 @@ exports[`Toast > renders with closeIcon correctly 1`] = `
|
||||
<!--v-if-->
|
||||
</button>
|
||||
</div>
|
||||
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary" style="width: 100%;"></div>
|
||||
<div class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
|
||||
<!--v-if-->
|
||||
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
|
||||
<div data-state="complete" data-value="100" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</li>
|
||||
</ol><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
|
||||
</div>
|
||||
@@ -207,7 +243,13 @@ exports[`Toast > renders with color neutral correctly 1`] = `
|
||||
<!--v-if-->
|
||||
</button>
|
||||
</div>
|
||||
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-inverted" style="width: 100%;"></div>
|
||||
<div class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
|
||||
<!--v-if-->
|
||||
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
|
||||
<div data-state="complete" data-value="100" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-inverted data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</li>
|
||||
</ol><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
|
||||
</div>
|
||||
@@ -238,7 +280,13 @@ exports[`Toast > renders with description correctly 1`] = `
|
||||
<!--v-if-->
|
||||
</button>
|
||||
</div>
|
||||
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary" style="width: 100%;"></div>
|
||||
<div class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
|
||||
<!--v-if-->
|
||||
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
|
||||
<div data-state="complete" data-value="100" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</li>
|
||||
</ol><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
|
||||
</div>
|
||||
@@ -269,7 +317,13 @@ exports[`Toast > renders with description slot correctly 1`] = `
|
||||
<!--v-if-->
|
||||
</button>
|
||||
</div>
|
||||
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary" style="width: 100%;"></div>
|
||||
<div class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
|
||||
<!--v-if-->
|
||||
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
|
||||
<div data-state="complete" data-value="100" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</li>
|
||||
</ol><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
|
||||
</div>
|
||||
@@ -299,7 +353,13 @@ exports[`Toast > renders with icon correctly 1`] = `
|
||||
<!--v-if-->
|
||||
</button>
|
||||
</div>
|
||||
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary" style="width: 100%;"></div>
|
||||
<div class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
|
||||
<!--v-if-->
|
||||
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
|
||||
<div data-state="complete" data-value="100" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</li>
|
||||
</ol><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
|
||||
</div>
|
||||
@@ -328,7 +388,13 @@ exports[`Toast > renders with leading slot correctly 1`] = `
|
||||
<!--v-if-->
|
||||
</button>
|
||||
</div>
|
||||
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary" style="width: 100%;"></div>
|
||||
<div class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
|
||||
<!--v-if-->
|
||||
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
|
||||
<div data-state="complete" data-value="100" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</li>
|
||||
</ol><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
|
||||
</div>
|
||||
@@ -359,7 +425,13 @@ exports[`Toast > renders with orientation horizontal correctly 1`] = `
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button></div>
|
||||
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary" style="width: 100%;"></div>
|
||||
<div class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
|
||||
<!--v-if-->
|
||||
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
|
||||
<div data-state="complete" data-value="100" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</li>
|
||||
</ol><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
|
||||
</div>
|
||||
@@ -392,7 +464,13 @@ exports[`Toast > renders with orientation vertical correctly 1`] = `
|
||||
<!--v-if-->
|
||||
</button>
|
||||
</div>
|
||||
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary" style="width: 100%;"></div>
|
||||
<div class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
|
||||
<!--v-if-->
|
||||
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
|
||||
<div data-state="complete" data-value="100" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</li>
|
||||
</ol><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
|
||||
</div>
|
||||
@@ -423,7 +501,13 @@ exports[`Toast > renders with title correctly 1`] = `
|
||||
<!--v-if-->
|
||||
</button>
|
||||
</div>
|
||||
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary" style="width: 100%;"></div>
|
||||
<div class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
|
||||
<!--v-if-->
|
||||
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
|
||||
<div data-state="complete" data-value="100" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</li>
|
||||
</ol><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
|
||||
</div>
|
||||
@@ -454,7 +538,13 @@ exports[`Toast > renders with title slot correctly 1`] = `
|
||||
<!--v-if-->
|
||||
</button>
|
||||
</div>
|
||||
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary" style="width: 100%;"></div>
|
||||
<div class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
|
||||
<!--v-if-->
|
||||
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
|
||||
<div data-state="complete" data-value="100" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</li>
|
||||
</ol><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
|
||||
</div>
|
||||
@@ -485,7 +575,13 @@ exports[`Toast > renders with type correctly 1`] = `
|
||||
<!--v-if-->
|
||||
</button>
|
||||
</div>
|
||||
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary" style="width: 100%;"></div>
|
||||
<div class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
|
||||
<!--v-if-->
|
||||
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
|
||||
<div data-state="complete" data-value="100" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</li>
|
||||
</ol><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
|
||||
</div>
|
||||
@@ -516,7 +612,13 @@ exports[`Toast > renders with ui correctly 1`] = `
|
||||
<!--v-if-->
|
||||
</button>
|
||||
</div>
|
||||
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary" style="width: 100%;"></div>
|
||||
<div class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
|
||||
<!--v-if-->
|
||||
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
|
||||
<div data-state="complete" data-value="100" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</li>
|
||||
</ol><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
|
||||
</div>
|
||||
@@ -542,7 +644,13 @@ exports[`Toast > renders without close correctly 1`] = `
|
||||
<!--v-if-->
|
||||
</div>
|
||||
<!--v-if-->
|
||||
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary" style="width: 100%;"></div>
|
||||
<div class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
|
||||
<!--v-if-->
|
||||
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
|
||||
<div data-state="complete" data-value="100" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</li>
|
||||
</ol><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
|
||||
</div>
|
||||
|
||||
@@ -25,7 +25,13 @@ exports[`Toast > renders with actions correctly 1`] = `
|
||||
<!--v-if-->
|
||||
</button>
|
||||
</div>
|
||||
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary" style="width: 100%;"></div>
|
||||
<div class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
|
||||
<!--v-if-->
|
||||
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
|
||||
<div data-state="complete" data-value="100" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</li>
|
||||
</ol><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
|
||||
</div>
|
||||
@@ -56,7 +62,13 @@ exports[`Toast > renders with as correctly 1`] = `
|
||||
<!--v-if-->
|
||||
</button>
|
||||
</div>
|
||||
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary" style="width: 100%;"></div>
|
||||
<div class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
|
||||
<!--v-if-->
|
||||
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
|
||||
<div data-state="complete" data-value="100" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</section>
|
||||
</ol><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
|
||||
</div>
|
||||
@@ -86,7 +98,13 @@ exports[`Toast > renders with avatar correctly 1`] = `
|
||||
<!--v-if-->
|
||||
</button>
|
||||
</div>
|
||||
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary" style="width: 100%;"></div>
|
||||
<div class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
|
||||
<!--v-if-->
|
||||
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
|
||||
<div data-state="complete" data-value="100" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</li>
|
||||
</ol><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
|
||||
</div>
|
||||
@@ -117,7 +135,13 @@ exports[`Toast > renders with class correctly 1`] = `
|
||||
<!--v-if-->
|
||||
</button>
|
||||
</div>
|
||||
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary" style="width: 100%;"></div>
|
||||
<div class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
|
||||
<!--v-if-->
|
||||
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
|
||||
<div data-state="complete" data-value="100" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</li>
|
||||
</ol><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
|
||||
</div>
|
||||
@@ -145,7 +169,13 @@ exports[`Toast > renders with close slot correctly 1`] = `
|
||||
<div class="flex gap-1.5 shrink-0 items-center">
|
||||
<!--v-if-->Close slot
|
||||
</div>
|
||||
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary" style="width: 100%;"></div>
|
||||
<div class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
|
||||
<!--v-if-->
|
||||
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
|
||||
<div data-state="complete" data-value="100" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</li>
|
||||
</ol><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
|
||||
</div>
|
||||
@@ -176,7 +206,13 @@ exports[`Toast > renders with closeIcon correctly 1`] = `
|
||||
<!--v-if-->
|
||||
</button>
|
||||
</div>
|
||||
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary" style="width: 100%;"></div>
|
||||
<div class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
|
||||
<!--v-if-->
|
||||
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
|
||||
<div data-state="complete" data-value="100" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</li>
|
||||
</ol><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
|
||||
</div>
|
||||
@@ -207,7 +243,13 @@ exports[`Toast > renders with color neutral correctly 1`] = `
|
||||
<!--v-if-->
|
||||
</button>
|
||||
</div>
|
||||
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-inverted" style="width: 100%;"></div>
|
||||
<div class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
|
||||
<!--v-if-->
|
||||
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
|
||||
<div data-state="complete" data-value="100" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-inverted data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</li>
|
||||
</ol><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
|
||||
</div>
|
||||
@@ -238,7 +280,13 @@ exports[`Toast > renders with description correctly 1`] = `
|
||||
<!--v-if-->
|
||||
</button>
|
||||
</div>
|
||||
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary" style="width: 100%;"></div>
|
||||
<div class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
|
||||
<!--v-if-->
|
||||
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
|
||||
<div data-state="complete" data-value="100" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</li>
|
||||
</ol><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
|
||||
</div>
|
||||
@@ -269,7 +317,13 @@ exports[`Toast > renders with description slot correctly 1`] = `
|
||||
<!--v-if-->
|
||||
</button>
|
||||
</div>
|
||||
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary" style="width: 100%;"></div>
|
||||
<div class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
|
||||
<!--v-if-->
|
||||
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
|
||||
<div data-state="complete" data-value="100" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</li>
|
||||
</ol><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
|
||||
</div>
|
||||
@@ -299,7 +353,13 @@ exports[`Toast > renders with icon correctly 1`] = `
|
||||
<!--v-if-->
|
||||
</button>
|
||||
</div>
|
||||
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary" style="width: 100%;"></div>
|
||||
<div class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
|
||||
<!--v-if-->
|
||||
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
|
||||
<div data-state="complete" data-value="100" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</li>
|
||||
</ol><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
|
||||
</div>
|
||||
@@ -328,7 +388,13 @@ exports[`Toast > renders with leading slot correctly 1`] = `
|
||||
<!--v-if-->
|
||||
</button>
|
||||
</div>
|
||||
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary" style="width: 100%;"></div>
|
||||
<div class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
|
||||
<!--v-if-->
|
||||
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
|
||||
<div data-state="complete" data-value="100" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</li>
|
||||
</ol><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
|
||||
</div>
|
||||
@@ -359,7 +425,13 @@ exports[`Toast > renders with orientation horizontal correctly 1`] = `
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button></div>
|
||||
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary" style="width: 100%;"></div>
|
||||
<div class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
|
||||
<!--v-if-->
|
||||
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
|
||||
<div data-state="complete" data-value="100" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</li>
|
||||
</ol><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
|
||||
</div>
|
||||
@@ -392,7 +464,13 @@ exports[`Toast > renders with orientation vertical correctly 1`] = `
|
||||
<!--v-if-->
|
||||
</button>
|
||||
</div>
|
||||
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary" style="width: 100%;"></div>
|
||||
<div class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
|
||||
<!--v-if-->
|
||||
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
|
||||
<div data-state="complete" data-value="100" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</li>
|
||||
</ol><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
|
||||
</div>
|
||||
@@ -423,7 +501,13 @@ exports[`Toast > renders with title correctly 1`] = `
|
||||
<!--v-if-->
|
||||
</button>
|
||||
</div>
|
||||
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary" style="width: 100%;"></div>
|
||||
<div class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
|
||||
<!--v-if-->
|
||||
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
|
||||
<div data-state="complete" data-value="100" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</li>
|
||||
</ol><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
|
||||
</div>
|
||||
@@ -454,7 +538,13 @@ exports[`Toast > renders with title slot correctly 1`] = `
|
||||
<!--v-if-->
|
||||
</button>
|
||||
</div>
|
||||
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary" style="width: 100%;"></div>
|
||||
<div class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
|
||||
<!--v-if-->
|
||||
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
|
||||
<div data-state="complete" data-value="100" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</li>
|
||||
</ol><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
|
||||
</div>
|
||||
@@ -485,7 +575,13 @@ exports[`Toast > renders with type correctly 1`] = `
|
||||
<!--v-if-->
|
||||
</button>
|
||||
</div>
|
||||
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary" style="width: 100%;"></div>
|
||||
<div class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
|
||||
<!--v-if-->
|
||||
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
|
||||
<div data-state="complete" data-value="100" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</li>
|
||||
</ol><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
|
||||
</div>
|
||||
@@ -516,7 +612,13 @@ exports[`Toast > renders with ui correctly 1`] = `
|
||||
<!--v-if-->
|
||||
</button>
|
||||
</div>
|
||||
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary" style="width: 100%;"></div>
|
||||
<div class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
|
||||
<!--v-if-->
|
||||
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
|
||||
<div data-state="complete" data-value="100" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</li>
|
||||
</ol><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
|
||||
</div>
|
||||
@@ -542,7 +644,13 @@ exports[`Toast > renders without close correctly 1`] = `
|
||||
<!--v-if-->
|
||||
</div>
|
||||
<!--v-if-->
|
||||
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary" style="width: 100%;"></div>
|
||||
<div class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
|
||||
<!--v-if-->
|
||||
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
|
||||
<div data-state="complete" data-value="100" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</li>
|
||||
</ol><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user