mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-22 16:00:39 +01:00
feat(CommandPalette): new component (#80)
This commit is contained in:
Benjamin Canac
GitHub
@@ -22,7 +22,7 @@ describe('Alert', () => {
|
||||
['with leading slot', { slots: { title: () => 'Leading slot' } }],
|
||||
['with title slot', { slots: { title: () => 'Title slot' } }],
|
||||
['with description slot', { slots: { description: () => 'Description slot' } }],
|
||||
['with close slot', { slots: { close: () => 'Close slot' } }]
|
||||
['with close slot', { props: { close: true }, slots: { close: () => 'Close slot' } }]
|
||||
])('renders %s correctly', async (nameOrHtml: string, options: { props?: AlertProps, slots?: Partial<AlertSlots> }) => {
|
||||
const html = await ComponentRender(nameOrHtml, options, Alert)
|
||||
expect(html).toMatchSnapshot()
|
||||
|
||||
@@ -10,13 +10,11 @@ const AvatarGroupWrapper = defineComponent({
|
||||
UAvatar: Avatar,
|
||||
UAvatarGroup: AvatarGroup
|
||||
},
|
||||
template: `
|
||||
<UAvatarGroup>
|
||||
<UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" alt="benjamincanac" />
|
||||
<UAvatar src="https://avatars.githubusercontent.com/u/904724?v=4" alt="Atinux" />
|
||||
<UAvatar src="https://avatars.githubusercontent.com/u/7547335?v=4" alt="smarroufin" />
|
||||
</UAvatarGroup>
|
||||
`
|
||||
template: `<UAvatarGroup>
|
||||
<UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" alt="benjamincanac" />
|
||||
<UAvatar src="https://avatars.githubusercontent.com/u/904724?v=4" alt="Atinux" />
|
||||
<UAvatar src="https://avatars.githubusercontent.com/u/7547335?v=4" alt="smarroufin" />
|
||||
</UAvatarGroup>`
|
||||
})
|
||||
|
||||
describe('AvatarGroup', () => {
|
||||
|
||||
87
test/components/CommandPalette.spec.ts
Normal file
87
test/components/CommandPalette.spec.ts
Normal file
@@ -0,0 +1,87 @@
|
||||
import { describe, it, expect } from 'vitest'
|
||||
import CommandPalette, { type CommandPaletteProps } from '../../src/runtime/components/CommandPalette.vue'
|
||||
import ComponentRender from '../component-render'
|
||||
|
||||
describe('CommandPalette', () => {
|
||||
const groups = [{
|
||||
id: 'actions',
|
||||
items: [{
|
||||
label: 'Add new file',
|
||||
suffix: 'Create a new file in the current directory or workspace.',
|
||||
icon: 'i-heroicons-document-plus',
|
||||
kbds: ['meta', 'N']
|
||||
}, {
|
||||
label: 'Add new folder',
|
||||
suffix: 'Create a new folder in the current directory or workspace.',
|
||||
icon: 'i-heroicons-folder-plus',
|
||||
kbds: ['meta', 'F']
|
||||
}, {
|
||||
label: 'Add hashtag',
|
||||
suffix: 'Add a hashtag to the current item.',
|
||||
icon: 'i-heroicons-hashtag',
|
||||
kbds: ['meta', 'H']
|
||||
}, {
|
||||
label: 'Add label',
|
||||
suffix: 'Add a label to the current item.',
|
||||
icon: 'i-heroicons-tag',
|
||||
kbds: ['meta', 'L'],
|
||||
slot: 'custom'
|
||||
}]
|
||||
}, {
|
||||
id: 'labels',
|
||||
label: 'Labels',
|
||||
items: [{
|
||||
label: 'bug',
|
||||
chip: {
|
||||
color: 'red'
|
||||
}
|
||||
}, {
|
||||
label: 'feature',
|
||||
chip: {
|
||||
color: 'green'
|
||||
}
|
||||
}, {
|
||||
label: 'enhancement',
|
||||
chip: {
|
||||
color: 'blue'
|
||||
}
|
||||
}]
|
||||
}, {
|
||||
id: 'users',
|
||||
label: 'Users',
|
||||
items: [{
|
||||
label: 'benjamincanac',
|
||||
avatar: {
|
||||
src: 'https://avatars.githubusercontent.com/u/739984?v=4'
|
||||
}
|
||||
}]
|
||||
}]
|
||||
|
||||
const props = { groups }
|
||||
|
||||
it.each([
|
||||
// Props
|
||||
['with groups', { props }],
|
||||
['with modelValue', { props: { ...props, modelValue: groups[2].items[0] } }],
|
||||
['with placeholder', { props: { ...props, placeholder: 'Search...' } }],
|
||||
['with disabled', { props: { ...props, disabled: true } }],
|
||||
['with icon', { props: { ...props, icon: 'i-heroicons-command-line' } }],
|
||||
['with loading', { props: { ...props, loading: true } }],
|
||||
['with loadingIcon', { props: { loading: true, loadingIcon: 'i-heroicons-sparkles' } }],
|
||||
['with selectedIcon', { props: { ...props, selectedIcon: 'i-heroicons-check-badge', modelValue: groups[2].items[0] } }],
|
||||
['with as', { props: { ...props, as: 'section' } }],
|
||||
['with class', { props: { ...props, class: 'divide-gray-300 dark:divide-gray-700' } }],
|
||||
['with ui', { props: { ...props, ui: { input: '[&>input]:h-10' } } }],
|
||||
// Slots
|
||||
['with empty slot', { props, slots: { empty: () => 'Empty slot' } }],
|
||||
['with leading slot', { props, slots: { leading: () => 'Leading slot' } }],
|
||||
['with label slot', { props, slots: { label: () => 'Label slot' } }],
|
||||
['with trailing slot', { props, slots: { trailing: () => 'Trailing slot' } }],
|
||||
['with item slot', { props, slots: { item: () => 'Item slot' } }],
|
||||
['with custom slot', { props, slots: { custom: () => 'Custom slot' } }],
|
||||
['with close slot', { props: { ...props, close: true }, slots: { close: () => 'Close slot' } }]
|
||||
])('renders %s correctly', async (nameOrHtml: string, options: { props?: CommandPaletteProps<typeof groups[number], typeof groups[number]['items'][number]>, slots?: Partial<any> }) => {
|
||||
const html = await ComponentRender(nameOrHtml, options, CommandPalette)
|
||||
expect(html).toMatchSnapshot()
|
||||
})
|
||||
})
|
||||
@@ -10,7 +10,11 @@ const FormFieldWrapper = defineComponent({
|
||||
components: {
|
||||
UFormField: FormField
|
||||
},
|
||||
template: '<UFormField > <slot /> </UFormField>'
|
||||
template: `<UFormField>
|
||||
<template v-for="(_, name) in $slots" #[name]="slotData">
|
||||
<slot :name="name" v-bind="slotData" />
|
||||
</template>
|
||||
</UFormField>`
|
||||
})
|
||||
|
||||
describe('FormField', () => {
|
||||
|
||||
@@ -13,7 +13,15 @@ const ToastWrapper = defineComponent({
|
||||
ClientOnly
|
||||
},
|
||||
inheritAttrs: false,
|
||||
template: '<UToaster><ClientOnly><UToast v-bind="$attrs" /></ClientOnly></UToaster>'
|
||||
template: `<UToaster>
|
||||
<ClientOnly>
|
||||
<UToast v-bind="$attrs">
|
||||
<template v-for="(_, name) in $slots" #[name]="slotData">
|
||||
<slot :name="name" v-bind="slotData" />
|
||||
</template>
|
||||
</UToast>
|
||||
</ClientOnly>
|
||||
</UToaster>`
|
||||
})
|
||||
|
||||
describe('Toast', () => {
|
||||
@@ -34,7 +42,7 @@ describe('Toast', () => {
|
||||
['with class', { props: { class: 'bg-gray-50 dark:bg-gray-800/50' } }],
|
||||
['with ui', { props: { title: 'Toast', ui: { title: 'font-bold' } } }],
|
||||
// Slots
|
||||
['with leading slot', { slots: { title: () => 'Leading slot' } }],
|
||||
['with leading slot', { slots: { leading: () => 'Leading slot' } }],
|
||||
['with title slot', { slots: { title: () => 'Title slot' } }],
|
||||
['with description slot', { slots: { description: () => 'Description slot' } }],
|
||||
['with close slot', { slots: { close: () => 'Close slot' } }]
|
||||
|
||||
@@ -10,7 +10,13 @@ const TooltipWrapper = defineComponent({
|
||||
UTooltip: Tooltip
|
||||
},
|
||||
inheritAttrs: false,
|
||||
template: '<TooltipProvider><UTooltip v-bind="$attrs"><slot /></UTooltip></TooltipProvider>'
|
||||
template: `<TooltipProvider>
|
||||
<UTooltip v-bind="$attrs">
|
||||
<template v-for="(_, name) in $slots" #[name]="slotData">
|
||||
<slot :name="name" v-bind="slotData" />
|
||||
</template>
|
||||
</UTooltip>
|
||||
</TooltipProvider>`
|
||||
})
|
||||
|
||||
describe('Tooltip', () => {
|
||||
|
||||
@@ -43,7 +43,7 @@ exports[`Alert > renders with close slot correctly 1`] = `
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</div>
|
||||
<!--v-if-->
|
||||
<div class="flex gap-1.5 shrink-0 items-center">Close slot</div>
|
||||
</div>"
|
||||
`;
|
||||
|
||||
|
||||
@@ -1,56 +1,56 @@
|
||||
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
|
||||
|
||||
exports[`Chip > renders with as correctly 1`] = `"<span class="relative inline-flex items-center justify-center shrink-0"><span class="absolute rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-primary-500 dark:bg-primary-400 h-[8px] min-w-[8px] text-[8px] top-0 right-0 -translate-y-1/2 translate-x-1/2 transform"></span></span>"`;
|
||||
exports[`Chip > renders with as correctly 1`] = `"<span class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-primary-500 dark:bg-primary-400 h-[8px] min-w-[8px] text-[8px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></span>"`;
|
||||
|
||||
exports[`Chip > renders with class correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0 mx-auto"><span class="absolute rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-primary-500 dark:bg-primary-400 h-[8px] min-w-[8px] text-[8px] top-0 right-0 -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
|
||||
exports[`Chip > renders with class correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0 mx-auto"><span class="rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-primary-500 dark:bg-primary-400 h-[8px] min-w-[8px] text-[8px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
|
||||
|
||||
exports[`Chip > renders with color black correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="absolute rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-gray-900 dark:bg-white h-[8px] min-w-[8px] text-[8px] top-0 right-0 -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
|
||||
exports[`Chip > renders with color black correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-gray-900 dark:bg-white h-[8px] min-w-[8px] text-[8px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
|
||||
|
||||
exports[`Chip > renders with color gray correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="absolute rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-gray-500 dark:bg-gray-400 h-[8px] min-w-[8px] text-[8px] top-0 right-0 -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
|
||||
exports[`Chip > renders with color gray correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-gray-500 dark:bg-gray-400 h-[8px] min-w-[8px] text-[8px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
|
||||
|
||||
exports[`Chip > renders with color green correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="absolute rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-green-500 dark:bg-green-400 h-[8px] min-w-[8px] text-[8px] top-0 right-0 -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
|
||||
exports[`Chip > renders with color green correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-green-500 dark:bg-green-400 h-[8px] min-w-[8px] text-[8px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
|
||||
|
||||
exports[`Chip > renders with color primary correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="absolute rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-primary-500 dark:bg-primary-400 h-[8px] min-w-[8px] text-[8px] top-0 right-0 -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
|
||||
exports[`Chip > renders with color primary correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-primary-500 dark:bg-primary-400 h-[8px] min-w-[8px] text-[8px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
|
||||
|
||||
exports[`Chip > renders with color red correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="absolute rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-red-500 dark:bg-red-400 h-[8px] min-w-[8px] text-[8px] top-0 right-0 -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
|
||||
exports[`Chip > renders with color red correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-red-500 dark:bg-red-400 h-[8px] min-w-[8px] text-[8px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
|
||||
|
||||
exports[`Chip > renders with color white correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="absolute rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-white dark:bg-gray-900 h-[8px] min-w-[8px] text-[8px] top-0 right-0 -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
|
||||
exports[`Chip > renders with color white correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-white dark:bg-gray-900 h-[8px] min-w-[8px] text-[8px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
|
||||
|
||||
exports[`Chip > renders with content slot correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="absolute rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-primary-500 dark:bg-primary-400 h-[8px] min-w-[8px] text-[8px] top-0 right-0 -translate-y-1/2 translate-x-1/2 transform">Content slot</span></div>"`;
|
||||
exports[`Chip > renders with content slot correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-primary-500 dark:bg-primary-400 h-[8px] min-w-[8px] text-[8px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform">Content slot</span></div>"`;
|
||||
|
||||
exports[`Chip > renders with default slot correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0">Default slot<span class="absolute rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-primary-500 dark:bg-primary-400 h-[8px] min-w-[8px] text-[8px] top-0 right-0 -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
|
||||
exports[`Chip > renders with default slot correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0">Default slot<span class="rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-primary-500 dark:bg-primary-400 h-[8px] min-w-[8px] text-[8px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
|
||||
|
||||
exports[`Chip > renders with inset correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="absolute rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-primary-500 dark:bg-primary-400 h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div>"`;
|
||||
exports[`Chip > renders with inset correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-primary-500 dark:bg-primary-400 h-[8px] min-w-[8px] text-[8px] top-0 right-0 absolute"></span></div>"`;
|
||||
|
||||
exports[`Chip > renders with position bottom-left correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="absolute rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-primary-500 dark:bg-primary-400 h-[8px] min-w-[8px] text-[8px] bottom-0 left-0 translate-y-1/2 -translate-x-1/2 transform"></span></div>"`;
|
||||
exports[`Chip > renders with position bottom-left correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-primary-500 dark:bg-primary-400 h-[8px] min-w-[8px] text-[8px] bottom-0 left-0 absolute translate-y-1/2 -translate-x-1/2 transform"></span></div>"`;
|
||||
|
||||
exports[`Chip > renders with position bottom-right correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="absolute rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-primary-500 dark:bg-primary-400 h-[8px] min-w-[8px] text-[8px] bottom-0 right-0 translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
|
||||
exports[`Chip > renders with position bottom-right correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-primary-500 dark:bg-primary-400 h-[8px] min-w-[8px] text-[8px] bottom-0 right-0 absolute translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
|
||||
|
||||
exports[`Chip > renders with position top-left correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="absolute rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-primary-500 dark:bg-primary-400 h-[8px] min-w-[8px] text-[8px] top-0 left-0 -translate-y-1/2 -translate-x-1/2 transform"></span></div>"`;
|
||||
exports[`Chip > renders with position top-left correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-primary-500 dark:bg-primary-400 h-[8px] min-w-[8px] text-[8px] top-0 left-0 absolute -translate-y-1/2 -translate-x-1/2 transform"></span></div>"`;
|
||||
|
||||
exports[`Chip > renders with position top-right correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="absolute rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-primary-500 dark:bg-primary-400 h-[8px] min-w-[8px] text-[8px] top-0 right-0 -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
|
||||
exports[`Chip > renders with position top-right correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-primary-500 dark:bg-primary-400 h-[8px] min-w-[8px] text-[8px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
|
||||
|
||||
exports[`Chip > renders with size 2xl correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="absolute rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-primary-500 dark:bg-primary-400 h-[11px] min-w-[11px] text-[11px] top-0 right-0 -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
|
||||
exports[`Chip > renders with size 2xl correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-primary-500 dark:bg-primary-400 h-[11px] min-w-[11px] text-[11px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
|
||||
|
||||
exports[`Chip > renders with size 2xs correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="absolute rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-primary-500 dark:bg-primary-400 h-[5px] min-w-[5px] text-[5px] top-0 right-0 -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
|
||||
exports[`Chip > renders with size 2xs correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-primary-500 dark:bg-primary-400 h-[5px] min-w-[5px] text-[5px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
|
||||
|
||||
exports[`Chip > renders with size 3xl correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="absolute rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-primary-500 dark:bg-primary-400 h-[12px] min-w-[12px] text-[12px] top-0 right-0 -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
|
||||
exports[`Chip > renders with size 3xl correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-primary-500 dark:bg-primary-400 h-[12px] min-w-[12px] text-[12px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
|
||||
|
||||
exports[`Chip > renders with size 3xs correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="absolute rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-primary-500 dark:bg-primary-400 h-[4px] min-w-[4px] text-[4px] top-0 right-0 -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
|
||||
exports[`Chip > renders with size 3xs correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-primary-500 dark:bg-primary-400 h-[4px] min-w-[4px] text-[4px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
|
||||
|
||||
exports[`Chip > renders with size lg correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="absolute rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-primary-500 dark:bg-primary-400 h-[9px] min-w-[9px] text-[9px] top-0 right-0 -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
|
||||
exports[`Chip > renders with size lg correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-primary-500 dark:bg-primary-400 h-[9px] min-w-[9px] text-[9px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
|
||||
|
||||
exports[`Chip > renders with size md correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="absolute rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-primary-500 dark:bg-primary-400 h-[8px] min-w-[8px] text-[8px] top-0 right-0 -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
|
||||
exports[`Chip > renders with size md correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-primary-500 dark:bg-primary-400 h-[8px] min-w-[8px] text-[8px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
|
||||
|
||||
exports[`Chip > renders with size sm correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="absolute rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-primary-500 dark:bg-primary-400 h-[7px] min-w-[7px] text-[7px] top-0 right-0 -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
|
||||
exports[`Chip > renders with size sm correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-primary-500 dark:bg-primary-400 h-[7px] min-w-[7px] text-[7px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
|
||||
|
||||
exports[`Chip > renders with size xl correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="absolute rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-primary-500 dark:bg-primary-400 h-[10px] min-w-[10px] text-[10px] top-0 right-0 -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
|
||||
exports[`Chip > renders with size xl correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-primary-500 dark:bg-primary-400 h-[10px] min-w-[10px] text-[10px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
|
||||
|
||||
exports[`Chip > renders with size xs correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="absolute rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-primary-500 dark:bg-primary-400 h-[6px] min-w-[6px] text-[6px] top-0 right-0 -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
|
||||
exports[`Chip > renders with size xs correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-primary-500 dark:bg-primary-400 h-[6px] min-w-[6px] text-[6px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
|
||||
|
||||
exports[`Chip > renders with text correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="absolute rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-primary-500 dark:bg-primary-400 h-[8px] min-w-[8px] text-[8px] top-0 right-0 -translate-y-1/2 translate-x-1/2 transform">Text</span></div>"`;
|
||||
exports[`Chip > renders with text correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-primary-500 dark:bg-primary-400 h-[8px] min-w-[8px] text-[8px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform">Text</span></div>"`;
|
||||
|
||||
exports[`Chip > renders with ui correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="absolute rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center font-medium whitespace-nowrap text-gray-500 dark:text-gray-400 bg-primary-500 dark:bg-primary-400 h-[8px] min-w-[8px] text-[8px] top-0 right-0 -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
|
||||
exports[`Chip > renders with ui correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center font-medium whitespace-nowrap text-gray-500 dark:text-gray-400 bg-primary-500 dark:bg-primary-400 h-[8px] min-w-[8px] text-[8px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
|
||||
|
||||
exports[`Chip > renders without show correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center justify-center shrink-0">
|
||||
|
||||
1065
test/components/__snapshots__/CommandPalette.spec.ts.snap
Normal file
1065
test/components/__snapshots__/CommandPalette.spec.ts.snap
Normal file
File diff suppressed because it is too large
Load Diff
@@ -28,7 +28,7 @@ exports[`FormField > renders with description slot correctly 1`] = `
|
||||
"<div class="text-sm">
|
||||
<div class="">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<p class="text-gray-500 dark:text-gray-400">Description slot</p>
|
||||
</div>
|
||||
<div class="">
|
||||
<!--v-if-->
|
||||
@@ -55,7 +55,7 @@ exports[`FormField > renders with error slot correctly 1`] = `
|
||||
<!--v-if-->
|
||||
</div>
|
||||
<div class="">
|
||||
<!--v-if-->
|
||||
<p class="mt-2 text-red-500 dark:text-red-400">Error slot</p>
|
||||
</div>
|
||||
</div>"
|
||||
`;
|
||||
@@ -79,7 +79,7 @@ exports[`FormField > renders with help slot correctly 1`] = `
|
||||
<!--v-if-->
|
||||
</div>
|
||||
<div class="">
|
||||
<!--v-if-->
|
||||
<p class="mt-2 text-gray-500 dark:text-gray-400">Help slot</p>
|
||||
</div>
|
||||
</div>"
|
||||
`;
|
||||
@@ -125,7 +125,9 @@ exports[`FormField > renders with label and description correctly 1`] = `
|
||||
exports[`FormField > renders with label slot correctly 1`] = `
|
||||
"<div class="text-sm">
|
||||
<div class="">
|
||||
<!--v-if-->
|
||||
<div class="flex content-center items-center justify-between"><label for="13" class="block font-medium text-gray-700 dark:text-gray-200">Label slot</label>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
<div class="">
|
||||
|
||||
@@ -87,11 +87,7 @@ exports[`Toast > renders with close slot correctly 1`] = `
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</div>
|
||||
<div class="flex gap-1.5 shrink-0 items-center"><button type="button" aria-label="Close" data-radix-toast-announce-exclude="" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 underline-offset-4 hover:underline focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-0">
|
||||
<!---->
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button></div>
|
||||
<div class="flex gap-1.5 shrink-0 items-center">Close slot</div>
|
||||
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary-500 dark:bg-primary-400" style="width: 100%;"></div>
|
||||
</li>
|
||||
</ol><span style="position: fixed; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="0"></span>
|
||||
@@ -233,7 +229,7 @@ exports[`Toast > renders with description slot correctly 1`] = `
|
||||
<!--v-if-->
|
||||
<div class="w-0 flex-1 flex flex-col gap-1">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<div class="text-sm text-gray-500 dark:text-gray-400">Description slot</div>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
<div class="flex gap-1.5 shrink-0 items-center"><button type="button" aria-label="Close" data-radix-toast-announce-exclude="" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 underline-offset-4 hover:underline focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-0">
|
||||
@@ -277,9 +273,7 @@ exports[`Toast > renders with leading slot correctly 1`] = `
|
||||
<!--teleport end-->
|
||||
<div role="region" aria-label="Notifications (F8)" tabindex="-1"><span style="position: fixed; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="0"></span>
|
||||
<ol tabindex="-1" data-expanded="true" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-[--height] right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
|
||||
<li role="status" aria-live="off" aria-atomic="" tabindex="0" data-radix-vue-collection-item="" class="relative overflow-hidden bg-white dark:bg-gray-900 shadow-lg rounded-lg ring ring-gray-200 dark:ring-gray-800 p-4 flex gap-2.5 items-center" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right">
|
||||
<!--v-if-->
|
||||
<div class="w-0 flex-1 flex flex-col gap-1">
|
||||
<li role="status" aria-live="off" aria-atomic="" tabindex="0" data-radix-vue-collection-item="" class="relative overflow-hidden bg-white dark:bg-gray-900 shadow-lg rounded-lg ring ring-gray-200 dark:ring-gray-800 p-4 flex gap-2.5 items-center" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right">Leading slot<div class="w-0 flex-1 flex flex-col gap-1">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
@@ -354,7 +348,7 @@ exports[`Toast > renders with title slot correctly 1`] = `
|
||||
<li role="status" aria-live="off" aria-atomic="" tabindex="0" data-radix-vue-collection-item="" class="relative overflow-hidden bg-white dark:bg-gray-900 shadow-lg rounded-lg ring ring-gray-200 dark:ring-gray-800 p-4 flex gap-2.5 items-center" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right">
|
||||
<!--v-if-->
|
||||
<div class="w-0 flex-1 flex flex-col gap-1">
|
||||
<!--v-if-->
|
||||
<div class="text-sm font-medium text-gray-900 dark:text-white">Title slot</div>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</div>
|
||||
|
||||
@@ -1,12 +1,13 @@
|
||||
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
|
||||
|
||||
exports[`Tooltip > renders with arrow correctly 1`] = `
|
||||
"<!--teleport start-->
|
||||
"<!--v-if-->
|
||||
<!--teleport start-->
|
||||
|
||||
|
||||
<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||||
<div data-state="instant-open" style="--radix-tooltip-content-transform-origin: var(--radix-popper-transform-origin); --radix-tooltip-content-available-width: var(--radix-popper-available-width); --radix-tooltip-content-available-height: var(--radix-popper-available-height); --radix-tooltip-trigger-width: var(--radix-popper-anchor-width); --radix-tooltip-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" class="flex items-center gap-1 bg-white dark:bg-gray-900 text-gray-900 dark:text-white shadow rounded ring ring-gray-200 dark:ring-gray-800 h-6 px-2 py-1 text-xs select-none data-[state=delayed-open]:animate-[scale-in_100ms_ease-out]" data-side="bottom" data-align="center"><span class="truncate">Tooltip</span>
|
||||
<!--v-if--><span style="position: absolute; top: 0px; transform-origin: center 0; transform: rotate(180deg); visibility: hidden;"><svg width="10" height="5" viewBox="0 0 30 10" preserveAspectRatio="none" class="fill-gray-200 dark:fill-gray-800" style="display: block;"><polygon points="0,0 30,0 15,10"></polygon></svg></span><span style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" id="radix-vue-tooltip-content-2" role="tooltip">Tooltipv-if</span>
|
||||
<!--v-if--><span style="position: absolute; top: 0px; transform-origin: center 0; transform: rotate(180deg); visibility: hidden;"><svg width="10" height="5" viewBox="0 0 30 10" preserveAspectRatio="none" class="fill-gray-200 dark:fill-gray-800" style="display: block;"><polygon points="0,0 30,0 15,10"></polygon></svg></span><span style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" id="" role="tooltip">Tooltipv-if</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -15,13 +16,13 @@ exports[`Tooltip > renders with arrow correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Tooltip > renders with content slot correctly 1`] = `
|
||||
"<!--teleport start-->
|
||||
"<!--v-if-->
|
||||
<!--teleport start-->
|
||||
|
||||
|
||||
<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||||
<div data-state="instant-open" style="--radix-tooltip-content-transform-origin: var(--radix-popper-transform-origin); --radix-tooltip-content-available-width: var(--radix-popper-available-width); --radix-tooltip-content-available-height: var(--radix-popper-available-height); --radix-tooltip-trigger-width: var(--radix-popper-anchor-width); --radix-tooltip-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" class="flex items-center gap-1 bg-white dark:bg-gray-900 text-gray-900 dark:text-white shadow rounded ring ring-gray-200 dark:ring-gray-800 h-6 px-2 py-1 text-xs select-none data-[state=delayed-open]:animate-[scale-in_100ms_ease-out]" data-side="bottom" data-align="center"><span class="truncate">Tooltip</span>
|
||||
<!--v-if-->
|
||||
<!--v-if--><span style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" id="radix-vue-tooltip-content-5" role="tooltip">Tooltipv-ifv-if</span>
|
||||
<div data-state="instant-open" style="--radix-tooltip-content-transform-origin: var(--radix-popper-transform-origin); --radix-tooltip-content-available-width: var(--radix-popper-available-width); --radix-tooltip-content-available-height: var(--radix-popper-available-height); --radix-tooltip-trigger-width: var(--radix-popper-anchor-width); --radix-tooltip-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" class="flex items-center gap-1 bg-white dark:bg-gray-900 text-gray-900 dark:text-white shadow rounded ring ring-gray-200 dark:ring-gray-800 h-6 px-2 py-1 text-xs select-none data-[state=delayed-open]:animate-[scale-in_100ms_ease-out]" data-side="bottom" data-align="center">Content slot
|
||||
<!--v-if--><span style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" id="" role="tooltip">Content slotv-if</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -37,7 +38,7 @@ exports[`Tooltip > renders with default slot correctly 1`] = `
|
||||
<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||||
<div data-state="instant-open" style="--radix-tooltip-content-transform-origin: var(--radix-popper-transform-origin); --radix-tooltip-content-available-width: var(--radix-popper-available-width); --radix-tooltip-content-available-height: var(--radix-popper-available-height); --radix-tooltip-trigger-width: var(--radix-popper-anchor-width); --radix-tooltip-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" class="flex items-center gap-1 bg-white dark:bg-gray-900 text-gray-900 dark:text-white shadow rounded ring ring-gray-200 dark:ring-gray-800 h-6 px-2 py-1 text-xs select-none data-[state=delayed-open]:animate-[scale-in_100ms_ease-out]" data-side="bottom" data-align="center"><span class="truncate">Tooltip</span>
|
||||
<!--v-if-->
|
||||
<!--v-if--><span style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" id="radix-vue-tooltip-content-4" role="tooltip">Tooltipv-ifv-if</span>
|
||||
<!--v-if--><span style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" id="radix-vue-tooltip-content-1" role="tooltip">Tooltipv-ifv-if</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -46,12 +47,13 @@ exports[`Tooltip > renders with default slot correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Tooltip > renders with kbds correctly 1`] = `
|
||||
"<!--teleport start-->
|
||||
"<!--v-if-->
|
||||
<!--teleport start-->
|
||||
|
||||
|
||||
<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||||
<div data-state="instant-open" style="--radix-tooltip-content-transform-origin: var(--radix-popper-transform-origin); --radix-tooltip-content-available-width: var(--radix-popper-available-width); --radix-tooltip-content-available-height: var(--radix-popper-available-height); --radix-tooltip-trigger-width: var(--radix-popper-anchor-width); --radix-tooltip-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" class="flex items-center gap-1 bg-white dark:bg-gray-900 text-gray-900 dark:text-white shadow rounded ring ring-gray-200 dark:ring-gray-800 h-6 px-2 py-1 text-xs select-none data-[state=delayed-open]:animate-[scale-in_100ms_ease-out]" data-side="bottom" data-align="center"><span class="truncate">Tooltip</span><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5 before:content-['·'] before:mr-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded font-medium font-sans bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 h-4 min-w-[16px] text-[10px]">⌃</kbd><kbd class="inline-flex items-center justify-center px-1 rounded font-medium font-sans bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 h-4 min-w-[16px] text-[10px]">K</kbd></span>
|
||||
<!--v-if--><span style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" id="radix-vue-tooltip-content-3" role="tooltip">Tooltipv-if</span>
|
||||
<!--v-if--><span style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" id="" role="tooltip">Tooltipv-if</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -60,13 +62,14 @@ exports[`Tooltip > renders with kbds correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Tooltip > renders with text correctly 1`] = `
|
||||
"<!--teleport start-->
|
||||
"<!--v-if-->
|
||||
<!--teleport start-->
|
||||
|
||||
|
||||
<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||||
<div data-state="instant-open" style="--radix-tooltip-content-transform-origin: var(--radix-popper-transform-origin); --radix-tooltip-content-available-width: var(--radix-popper-available-width); --radix-tooltip-content-available-height: var(--radix-popper-available-height); --radix-tooltip-trigger-width: var(--radix-popper-anchor-width); --radix-tooltip-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" class="flex items-center gap-1 bg-white dark:bg-gray-900 text-gray-900 dark:text-white shadow rounded ring ring-gray-200 dark:ring-gray-800 h-6 px-2 py-1 text-xs select-none data-[state=delayed-open]:animate-[scale-in_100ms_ease-out]" data-side="bottom" data-align="center"><span class="truncate">Tooltip</span>
|
||||
<!--v-if-->
|
||||
<!--v-if--><span style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" id="radix-vue-tooltip-content-1" role="tooltip">Tooltipv-ifv-if</span>
|
||||
<!--v-if--><span style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" id="" role="tooltip">Tooltipv-ifv-if</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user