mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-15 20:48:12 +01:00
Compare commits
7 Commits
content-3.
...
feat/inlin
| Author | SHA1 | Date | |
|---|---|---|---|
|
d099492285 | ||
|
59c26ec123 | ||
|
67ef866a40 | ||
|
5170cfd7eb | ||
|
9bcf1ad92f | ||
|
|
7a2bd4e617 | ||
|
|
8781a07909 |
@@ -83,7 +83,7 @@ const groups = [
|
||||
</template>
|
||||
|
||||
<template #billing-label="{ item }">
|
||||
{{ item.label }}
|
||||
<span class="font-medium text-primary">{{ item.label }}</span>
|
||||
|
||||
<UBadge variant="subtle" size="sm">
|
||||
50% off
|
||||
|
||||
@@ -0,0 +1,119 @@
|
||||
<script setup lang="ts">
|
||||
const toast = useToast()
|
||||
|
||||
const groups = [{
|
||||
id: 'actions',
|
||||
label: 'Actions',
|
||||
items: [{
|
||||
label: 'Create new',
|
||||
icon: 'i-lucide-plus',
|
||||
children: [{
|
||||
label: 'New file',
|
||||
icon: 'i-lucide-file-plus',
|
||||
suffix: 'Create a new file in the current directory',
|
||||
onSelect(e: Event) {
|
||||
e.preventDefault()
|
||||
toast.add({ title: 'New file created!' })
|
||||
},
|
||||
kbds: ['meta', 'N']
|
||||
}, {
|
||||
label: 'New folder',
|
||||
icon: 'i-lucide-folder-plus',
|
||||
suffix: 'Create a new folder in the current directory',
|
||||
onSelect(e: Event) {
|
||||
e.preventDefault()
|
||||
toast.add({ title: 'New folder created!' })
|
||||
},
|
||||
kbds: ['meta', 'F']
|
||||
}, {
|
||||
label: 'New project',
|
||||
icon: 'i-lucide-folder-git',
|
||||
suffix: 'Create a new project from a template',
|
||||
onSelect(e: Event) {
|
||||
e.preventDefault()
|
||||
toast.add({ title: 'New project created!' })
|
||||
},
|
||||
kbds: ['meta', 'P']
|
||||
}]
|
||||
}, {
|
||||
label: 'Share',
|
||||
icon: 'i-lucide-share',
|
||||
children: [{
|
||||
label: 'Copy link',
|
||||
icon: 'i-lucide-link',
|
||||
suffix: 'Copy a link to the current item',
|
||||
onSelect(e: Event) {
|
||||
e.preventDefault()
|
||||
toast.add({ title: 'Link copied to clipboard!' })
|
||||
},
|
||||
kbds: ['meta', 'L']
|
||||
}, {
|
||||
label: 'Share via email',
|
||||
icon: 'i-lucide-mail',
|
||||
suffix: 'Share the current item via email',
|
||||
onSelect(e: Event) {
|
||||
e.preventDefault()
|
||||
toast.add({ title: 'Share via email dialog opened!' })
|
||||
}
|
||||
}, {
|
||||
label: 'Share on social',
|
||||
icon: 'i-lucide-share-2',
|
||||
suffix: 'Share the current item on social media',
|
||||
children: [{
|
||||
label: 'Twitter',
|
||||
icon: 'i-simple-icons-twitter',
|
||||
onSelect(e: Event) {
|
||||
e.preventDefault()
|
||||
toast.add({ title: 'Shared on Twitter!' })
|
||||
}
|
||||
}, {
|
||||
label: 'LinkedIn',
|
||||
icon: 'i-simple-icons-linkedin',
|
||||
onSelect(e: Event) {
|
||||
e.preventDefault()
|
||||
toast.add({ title: 'Shared on LinkedIn!' })
|
||||
}
|
||||
}, {
|
||||
label: 'Facebook',
|
||||
icon: 'i-simple-icons-facebook',
|
||||
onSelect(e: Event) {
|
||||
e.preventDefault()
|
||||
toast.add({ title: 'Shared on Facebook!' })
|
||||
}
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
label: 'Settings',
|
||||
icon: 'i-lucide-settings',
|
||||
children: [{
|
||||
label: 'General',
|
||||
icon: 'i-lucide-sliders',
|
||||
suffix: 'Configure general settings',
|
||||
onSelect(e: Event) {
|
||||
e.preventDefault()
|
||||
toast.add({ title: 'General settings opened!' })
|
||||
}
|
||||
}, {
|
||||
label: 'Appearance',
|
||||
icon: 'i-lucide-palette',
|
||||
suffix: 'Customize the appearance',
|
||||
onSelect(e: Event) {
|
||||
e.preventDefault()
|
||||
toast.add({ title: 'Appearance settings opened!' })
|
||||
}
|
||||
}, {
|
||||
label: 'Security',
|
||||
icon: 'i-lucide-shield',
|
||||
suffix: 'Manage security settings',
|
||||
onSelect(e: Event) {
|
||||
e.preventDefault()
|
||||
toast.add({ title: 'Security settings opened!' })
|
||||
}
|
||||
}]
|
||||
}]
|
||||
}]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UCommandPalette :groups="groups" class="flex-1" />
|
||||
</template>
|
||||
@@ -52,9 +52,11 @@ Each group contains an `items` array of objects that define the commands. Each i
|
||||
- `loading?: boolean`{lang="ts-type"}
|
||||
- `disabled?: boolean`{lang="ts-type"}
|
||||
- [`slot?: string`{lang="ts-type"}](#with-custom-slot)
|
||||
- `placeholder?: string`{lang="ts-type"} :badge{label="Soon"}
|
||||
- `children?: CommandPaletteItem[]`{lang="ts-type"} :badge{label="Soon"}
|
||||
- `onSelect?(e?: Event): void`{lang="ts-type"}
|
||||
- `class?: any`{lang="ts-type"}
|
||||
- `ui?: { item?: ClassNameValue, itemLeadingIcon?: ClassNameValue, itemLeadingAvatarSize?: ClassNameValue, itemLeadingAvatar?: ClassNameValue, itemLeadingChipSize?: ClassNameValue, itemLeadingChip?: ClassNameValue, itemLabel?: ClassNameValue, itemLabelPrefix?: ClassNameValue, itemLabelBase?: ClassNameValue, itemLabelSuffix?: ClassNameValue, itemTrailing?: ClassNameValue, itemTrailingKbds?: ClassNameValue, itemTrailingKbdsSize?: ClassNameValue, itemTrailingHighlightedIcon?: ClassNameValue, itemTrailingIcon?: ClassNameValue,}`{lang="ts-type"}
|
||||
- `ui?: { item?: ClassNameValue, itemLeadingIcon?: ClassNameValue, itemLeadingAvatarSize?: ClassNameValue, itemLeadingAvatar?: ClassNameValue, itemLeadingChipSize?: ClassNameValue, itemLeadingChip?: ClassNameValue, itemLabel?: ClassNameValue, itemLabelPrefix?: ClassNameValue, itemLabelBase?: ClassNameValue, itemLabelSuffix?: ClassNameValue, itemTrailing?: ClassNameValue, itemTrailingKbds?: ClassNameValue, itemTrailingKbdsSize?: ClassNameValue, itemTrailingHighlightedIcon?: ClassNameValue, itemTrailingIcon?: ClassNameValue }`{lang="ts-type"}
|
||||
|
||||
You can pass any property from the [Link](/components/link#props) component such as `to`, `target`, etc.
|
||||
|
||||
@@ -110,6 +112,10 @@ props:
|
||||
---
|
||||
::
|
||||
|
||||
::tip{to="#with-children-in-items"}
|
||||
Each item can take a `children` array of objects with the following properties to create submenus:
|
||||
::
|
||||
|
||||
### Multiple
|
||||
|
||||
Use the `multiple` prop to allow multiple selections.
|
||||
@@ -246,6 +252,128 @@ You can customize this icon globally in your `vite.config.ts` under `ui.icons.se
|
||||
:::
|
||||
::
|
||||
|
||||
### Selected Icon
|
||||
|
||||
Use the `selected-icon` prop to customize the selected item [Icon](/components/icon). Defaults to `i-lucide-check`.
|
||||
|
||||
::component-code
|
||||
---
|
||||
collapse: true
|
||||
hide:
|
||||
- autofocus
|
||||
ignore:
|
||||
- groups
|
||||
- modelValue
|
||||
- multiple
|
||||
- class
|
||||
external:
|
||||
- groups
|
||||
- modelValue
|
||||
class: '!p-0'
|
||||
props:
|
||||
multiple: true
|
||||
autofocus: false
|
||||
modelValue:
|
||||
- label: 'Benjamin Canac'
|
||||
suffix: 'benjamincanac'
|
||||
avatar:
|
||||
src: 'https://github.com/benjamincanac.png'
|
||||
selectedIcon: 'i-lucide-circle-check'
|
||||
groups:
|
||||
- id: 'users'
|
||||
label: 'Users'
|
||||
items:
|
||||
- label: 'Benjamin Canac'
|
||||
suffix: 'benjamincanac'
|
||||
avatar:
|
||||
src: 'https://github.com/benjamincanac.png'
|
||||
- label: 'Sylvain Marroufin'
|
||||
suffix: 'smarroufin'
|
||||
avatar:
|
||||
src: 'https://github.com/smarroufin.png'
|
||||
- label: 'Sébastien Chopin'
|
||||
suffix: 'atinux'
|
||||
avatar:
|
||||
src: 'https://github.com/atinux.png'
|
||||
- label: 'Romain Hamel'
|
||||
suffix: 'romhml'
|
||||
avatar:
|
||||
src: 'https://github.com/romhml.png'
|
||||
- label: 'Haytham A. Salama'
|
||||
suffix: 'Haythamasalama'
|
||||
avatar:
|
||||
src: 'https://github.com/Haythamasalama.png'
|
||||
- label: 'Daniel Roe'
|
||||
suffix: 'danielroe'
|
||||
avatar:
|
||||
src: 'https://github.com/danielroe.png'
|
||||
- label: 'Neil Richter'
|
||||
suffix: 'noook'
|
||||
avatar:
|
||||
src: 'https://github.com/noook.png'
|
||||
class: 'flex-1'
|
||||
---
|
||||
::
|
||||
|
||||
::framework-only
|
||||
#nuxt
|
||||
:::tip{to="/getting-started/icons/nuxt#theme"}
|
||||
You can customize this icon globally in your `app.config.ts` under `ui.icons.check` key.
|
||||
:::
|
||||
|
||||
#vue
|
||||
:::tip{to="/getting-started/icons/vue#theme"}
|
||||
You can customize this icon globally in your `vite.config.ts` under `ui.icons.check` key.
|
||||
:::
|
||||
::
|
||||
|
||||
### Trailing Icon :badge{label="Soon" class="align-text-top"}
|
||||
|
||||
Use the `trailing-icon` prop to customize the trailing [Icon](/components/icon) when an item has children. Defaults to `i-lucide-chevron-right`.
|
||||
|
||||
::component-code
|
||||
---
|
||||
collapse: true
|
||||
prettier: true
|
||||
hide:
|
||||
- autofocus
|
||||
ignore:
|
||||
- groups
|
||||
- class
|
||||
external:
|
||||
- groups
|
||||
class: '!p-0'
|
||||
props:
|
||||
autofocus: false
|
||||
trailingIcon: 'i-lucide-arrow-right'
|
||||
groups:
|
||||
- id: 'actions'
|
||||
items:
|
||||
- label: 'Share'
|
||||
icon: 'i-lucide-share'
|
||||
children:
|
||||
- label: 'Email'
|
||||
icon: 'i-lucide-mail'
|
||||
- label: 'Copy'
|
||||
icon: 'i-lucide-copy'
|
||||
- label: 'Link'
|
||||
icon: 'i-lucide-link'
|
||||
class: 'flex-1'
|
||||
---
|
||||
::
|
||||
|
||||
::framework-only
|
||||
#nuxt
|
||||
:::tip{to="/getting-started/icons/nuxt#theme"}
|
||||
You can customize this icon globally in your `app.config.ts` under `ui.icons.chevronRight` key.
|
||||
:::
|
||||
|
||||
#vue
|
||||
:::tip{to="/getting-started/icons/vue#theme"}
|
||||
You can customize this icon globally in your `vite.config.ts` under `ui.icons.chevronRight` key.
|
||||
:::
|
||||
::
|
||||
|
||||
### Loading
|
||||
|
||||
Use the `loading` prop to show a loading icon on the CommandPalette.
|
||||
@@ -321,37 +449,6 @@ You can customize this icon globally in your `vite.config.ts` under `ui.icons.lo
|
||||
:::
|
||||
::
|
||||
|
||||
### Disabled
|
||||
|
||||
Use the `disabled` prop to disable the CommandPalette.
|
||||
|
||||
::component-code
|
||||
---
|
||||
collapse: true
|
||||
hide:
|
||||
- autofocus
|
||||
ignore:
|
||||
- groups
|
||||
- class
|
||||
external:
|
||||
- groups
|
||||
class: '!p-0'
|
||||
props:
|
||||
autofocus: false
|
||||
disabled: true
|
||||
groups:
|
||||
- id: 'apps'
|
||||
items:
|
||||
- label: 'Calendar'
|
||||
icon: 'i-lucide-calendar'
|
||||
- label: 'Music'
|
||||
icon: 'i-lucide-music'
|
||||
- label: 'Maps'
|
||||
icon: 'i-lucide-map'
|
||||
class: 'flex-1'
|
||||
---
|
||||
::
|
||||
|
||||
### Close
|
||||
|
||||
Use the `close` prop to display a [Button](/components/button) to dismiss the CommandPalette.
|
||||
@@ -468,6 +565,124 @@ You can customize this icon globally in your `vite.config.ts` under `ui.icons.cl
|
||||
:::
|
||||
::
|
||||
|
||||
### Back :badge{label="Soon" class="align-text-top"}
|
||||
|
||||
Use the `back` prop to customize or hide the back button (with `false` value) displayed when navigating into a submenu.
|
||||
|
||||
You can pass any property from the [Button](/components/button) component to customize it.
|
||||
|
||||
::component-code
|
||||
---
|
||||
collapse: true
|
||||
prettier: true
|
||||
hide:
|
||||
- autofocus
|
||||
ignore:
|
||||
- back.color
|
||||
- groups
|
||||
- class
|
||||
external:
|
||||
- groups
|
||||
class: '!p-0'
|
||||
props:
|
||||
autofocus: false
|
||||
back:
|
||||
color: primary
|
||||
groups:
|
||||
- id: 'actions'
|
||||
items:
|
||||
- label: 'Share'
|
||||
icon: 'i-lucide-share'
|
||||
children:
|
||||
- label: 'Email'
|
||||
icon: 'i-lucide-mail'
|
||||
- label: 'Copy'
|
||||
icon: 'i-lucide-copy'
|
||||
- label: 'Link'
|
||||
icon: 'i-lucide-link'
|
||||
class: 'flex-1'
|
||||
---
|
||||
::
|
||||
|
||||
### Back Icon :badge{label="Soon" class="align-text-top"}
|
||||
|
||||
Use the `back-icon` prop to customize the back button [Icon](/components/icon). Defaults to `i-lucide-arrow-left`.
|
||||
|
||||
::component-code
|
||||
---
|
||||
collapse: true
|
||||
hide:
|
||||
- autofocus
|
||||
ignore:
|
||||
- class
|
||||
- groups
|
||||
- back
|
||||
external:
|
||||
- groups
|
||||
class: '!p-0'
|
||||
props:
|
||||
autofocus: false
|
||||
back: true
|
||||
backIcon: 'i-lucide-house'
|
||||
groups:
|
||||
- id: 'actions'
|
||||
items:
|
||||
- label: 'Share'
|
||||
icon: 'i-lucide-share'
|
||||
children:
|
||||
- label: 'Email'
|
||||
icon: 'i-lucide-mail'
|
||||
- label: 'Copy'
|
||||
icon: 'i-lucide-copy'
|
||||
- label: 'Link'
|
||||
icon: 'i-lucide-link'
|
||||
class: 'flex-1'
|
||||
---
|
||||
::
|
||||
|
||||
::framework-only
|
||||
#nuxt
|
||||
:::tip{to="/getting-started/icons/nuxt#theme"}
|
||||
You can customize this icon globally in your `app.config.ts` under `ui.icons.arrowLeft` key.
|
||||
:::
|
||||
|
||||
#vue
|
||||
:::tip{to="/getting-started/icons/vue#theme"}
|
||||
You can customize this icon globally in your `vite.config.ts` under `ui.icons.arrowLeft` key.
|
||||
:::
|
||||
::
|
||||
|
||||
### Disabled
|
||||
|
||||
Use the `disabled` prop to disable the CommandPalette.
|
||||
|
||||
::component-code
|
||||
---
|
||||
collapse: true
|
||||
hide:
|
||||
- autofocus
|
||||
ignore:
|
||||
- groups
|
||||
- class
|
||||
external:
|
||||
- groups
|
||||
class: '!p-0'
|
||||
props:
|
||||
autofocus: false
|
||||
disabled: true
|
||||
groups:
|
||||
- id: 'apps'
|
||||
items:
|
||||
- label: 'Calendar'
|
||||
icon: 'i-lucide-calendar'
|
||||
- label: 'Music'
|
||||
icon: 'i-lucide-music'
|
||||
- label: 'Maps'
|
||||
icon: 'i-lucide-map'
|
||||
class: 'flex-1'
|
||||
---
|
||||
::
|
||||
|
||||
## Examples
|
||||
|
||||
### Control selected item(s)
|
||||
@@ -502,6 +717,28 @@ props:
|
||||
This example uses the `@update:model-value` event to reset the search term when an item is selected.
|
||||
::
|
||||
|
||||
### With children in items :badge{label="Soon" class="align-text-top"}
|
||||
|
||||
You can create hierarchical menus by using the `children` property in items. When an item has children, it will automatically display a chevron icon and enable navigation into a submenu.
|
||||
|
||||
::component-example
|
||||
---
|
||||
collapse: true
|
||||
prettier: true
|
||||
name: 'command-palette-items-children-example'
|
||||
class: '!p-0'
|
||||
props:
|
||||
autofocus: false
|
||||
---
|
||||
::
|
||||
|
||||
::note
|
||||
When navigating into a submenu:
|
||||
- The search term is reset
|
||||
- A back button appears in the input
|
||||
- You can go back to the previous group by pressing the :kbd{value="backspace"} key
|
||||
::
|
||||
|
||||
### With fetched items
|
||||
|
||||
You can fetch items from an API and use them in the CommandPalette.
|
||||
@@ -658,6 +895,7 @@ You will have access to the following slots:
|
||||
|
||||
::component-example
|
||||
---
|
||||
collapse: true
|
||||
name: 'command-palette-custom-slot-example'
|
||||
class: '!p-0'
|
||||
props:
|
||||
|
||||
@@ -782,6 +782,14 @@ name: 'input-menu-countries-example'
|
||||
|
||||
:component-emits
|
||||
|
||||
### Expose
|
||||
|
||||
When accessing the component via a template ref, you can use the following:
|
||||
|
||||
| Name | Type |
|
||||
| ---- | ---- |
|
||||
| `inputRef`{lang="ts-type"} | `Ref<InstanceType<typeof ComboboxTrigger> \| null>`{lang="ts-type"} |
|
||||
|
||||
## Theme
|
||||
|
||||
:component-theme
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
title: InputNumber
|
||||
description: Input numerical values with a customizable range.
|
||||
description: An input for numerical values with a customizable range.
|
||||
category: form
|
||||
links:
|
||||
- label: NumberField
|
||||
@@ -287,8 +287,8 @@ name: 'input-number-slots-example'
|
||||
When accessing the component via a template ref, you can use the following:
|
||||
|
||||
| Name | Type |
|
||||
|----------------------------|-------------------------------------------------|
|
||||
| `inputRef`{lang="ts-type"} | `Ref<HTMLInputElement \| null>`{lang="ts-type"} |
|
||||
| -------------------------- | ----------------------------------------------- |
|
||||
| `inputRef`{lang="ts-type"} | `Ref<InstanceType<typeof NumberFieldInput> \| null>`{lang="ts-type"} |
|
||||
|
||||
## Theme
|
||||
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
title: InputTags
|
||||
description: An input element that displays interactive tags.
|
||||
category: form
|
||||
links:
|
||||
- label: InputTags
|
||||
icon: i-custom-reka-ui
|
||||
@@ -276,8 +277,8 @@ name: 'input-tags-form-field-example'
|
||||
When accessing the component via a template ref, you can use the following:
|
||||
|
||||
| Name | Type |
|
||||
|----------------------------|-------------------------------------------------|
|
||||
| `inputRef`{lang="ts-type"} | `Ref<HTMLInputElement \| null>`{lang="ts-type"} |
|
||||
| -------------------------- | ----------------------------------------------- |
|
||||
| `inputRef`{lang="ts-type"} | `Ref<InstanceType<typeof TagsInputInput> \| null>`{lang="ts-type"} |
|
||||
|
||||
## Theme
|
||||
|
||||
|
||||
@@ -280,7 +280,7 @@ This example uses the `defineShortcuts` composable to focus the Input when the :
|
||||
|
||||
### With mask
|
||||
|
||||
There's no built-in support for masks, but you can use librairies like [maska](https://github.com/beholdr/maska) to mask the Input.
|
||||
There's no built-in support for masks, but you can use libraries like [maska](https://github.com/beholdr/maska) to mask the Input.
|
||||
|
||||
::component-example
|
||||
---
|
||||
|
||||
@@ -180,6 +180,8 @@ props:
|
||||
|
||||
:component-emits
|
||||
|
||||
### Expose
|
||||
|
||||
When accessing the component via a template ref, you can use the following:
|
||||
|
||||
| Name | Type |
|
||||
|
||||
@@ -815,6 +815,14 @@ name: 'select-menu-countries-example'
|
||||
|
||||
:component-emits
|
||||
|
||||
### Expose
|
||||
|
||||
When accessing the component via a template ref, you can use the following:
|
||||
|
||||
| Name | Type |
|
||||
| ---- | ---- |
|
||||
| `triggerRef`{lang="ts-type"} | `Ref<InstanceType<typeof ComboboxTrigger> \| null>`{lang="ts-type"} |
|
||||
|
||||
## Theme
|
||||
|
||||
:component-theme
|
||||
|
||||
@@ -709,6 +709,14 @@ collapse: true
|
||||
|
||||
:component-emits
|
||||
|
||||
### Expose
|
||||
|
||||
When accessing the component via a template ref, you can use the following:
|
||||
|
||||
| Name | Type |
|
||||
| ---- | ---- |
|
||||
| `triggerRef`{lang="ts-type"} | `Ref<InstanceType<typeof SelectTrigger> \| null>`{lang="ts-type"} |
|
||||
|
||||
## Theme
|
||||
|
||||
:component-theme
|
||||
|
||||
@@ -242,6 +242,14 @@ You will have access to the following slots:
|
||||
|
||||
:component-emits
|
||||
|
||||
### Expose
|
||||
|
||||
When accessing the component via a template ref, you can use the following:
|
||||
|
||||
| Name | Type |
|
||||
| ---- | ---- |
|
||||
| `triggersRef`{lang="ts-type"} | `Ref<ComponentPublicInstance[]>`{lang="ts-type"} |
|
||||
|
||||
## Theme
|
||||
|
||||
:component-theme
|
||||
|
||||
@@ -173,6 +173,46 @@ class: 'overflow-x-auto'
|
||||
---
|
||||
::
|
||||
|
||||
### Reverse
|
||||
|
||||
Use the reverse prop to reverse the direction of the Timeline.
|
||||
|
||||
::component-code
|
||||
---
|
||||
ignore:
|
||||
- items
|
||||
- class
|
||||
- defaultValue
|
||||
external:
|
||||
- items
|
||||
externalTypes:
|
||||
- TimelineItem[]
|
||||
props:
|
||||
reverse: true
|
||||
modelValue: 2
|
||||
orientation: 'vertical'
|
||||
items:
|
||||
- date: 'Mar 15, 2025'
|
||||
title: 'Project Kickoff'
|
||||
description: 'Kicked off the project with team alignment.'
|
||||
icon: 'i-lucide-rocket'
|
||||
- date: 'Mar 22 2025'
|
||||
title: 'Design Phase'
|
||||
description: 'User research and design workshops.'
|
||||
icon: 'i-lucide-palette'
|
||||
- date: 'Mar 29 2025'
|
||||
title: 'Development Sprint'
|
||||
description: 'Frontend and backend development.'
|
||||
icon: 'i-lucide-code'
|
||||
- date: 'Apr 5 2025'
|
||||
title: 'Testing & Deployment'
|
||||
description: 'QA testing and performance optimization.'
|
||||
icon: 'i-lucide-check-circle'
|
||||
class: 'w-full'
|
||||
class: 'overflow-x-auto'
|
||||
---
|
||||
::
|
||||
|
||||
## Examples
|
||||
|
||||
### Control active item
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
"@iconify-json/lucide": "^1.2.47",
|
||||
"@iconify-json/simple-icons": "^1.2.38",
|
||||
"@iconify-json/vscode-icons": "^1.2.22",
|
||||
"@nuxt/content": "^3.6.0",
|
||||
"@nuxt/content": "^3.5.1",
|
||||
"@nuxt/image": "^1.10.0",
|
||||
"@nuxt/ui": "workspace:*",
|
||||
"@nuxt/ui-pro": "https://pkg.pr.new/@nuxt/ui-pro@beebbd4",
|
||||
|
||||
BIN
docs/public/components/dark/input-tags.png
Normal file
BIN
docs/public/components/dark/input-tags.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
BIN
docs/public/components/light/input-tags.png
Normal file
BIN
docs/public/components/light/input-tags.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
@@ -74,6 +74,51 @@ const groups = computed(() => [{
|
||||
toast.add({ title: 'Label added!' })
|
||||
},
|
||||
kbds: ['meta', 'L']
|
||||
}, {
|
||||
label: 'More actions',
|
||||
placeholder: 'Search actions...',
|
||||
children: [{
|
||||
label: 'Create new file',
|
||||
suffix: 'Create a new file in the current directory or workspace.',
|
||||
icon: 'i-lucide-file-plus',
|
||||
onSelect(e: Event) {
|
||||
e.preventDefault()
|
||||
|
||||
toast.add({ title: 'New file added!' })
|
||||
}
|
||||
}, {
|
||||
label: 'Create new folder',
|
||||
suffix: 'Create a new folder in the current directory or workspace.',
|
||||
icon: 'i-lucide-folder-plus',
|
||||
onSelect(e: Event) {
|
||||
e.preventDefault()
|
||||
|
||||
toast.add({ title: 'New folder added!' })
|
||||
}
|
||||
}, {
|
||||
label: 'Share',
|
||||
placeholder: 'Search share options...',
|
||||
icon: 'i-lucide-share',
|
||||
children: [{
|
||||
label: 'Share with everyone',
|
||||
suffix: 'Share with everyone in the current directory or workspace.',
|
||||
icon: 'i-lucide-share',
|
||||
onSelect(e: Event) {
|
||||
e.preventDefault()
|
||||
|
||||
toast.add({ title: 'Shared with everyone!' })
|
||||
}
|
||||
}, {
|
||||
label: 'Share with team',
|
||||
suffix: 'Share with the team in the current directory or workspace.',
|
||||
icon: 'i-lucide-users',
|
||||
onSelect(e: Event) {
|
||||
e.preventDefault()
|
||||
|
||||
toast.add({ title: 'Shared with team!' })
|
||||
}
|
||||
}]
|
||||
}]
|
||||
}]
|
||||
}])
|
||||
|
||||
|
||||
@@ -16,7 +16,7 @@ const feedbacks = [
|
||||
<div class="flex flex-col items-center gap-4">
|
||||
<div class="flex flex-col gap-4 ms-[-38px]">
|
||||
<div v-for="(feedback, count) in feedbacks" :key="count" class="flex items-center">
|
||||
<UFormField v-bind="feedback" label="Email" name="email">
|
||||
<UFormField v-bind="feedback" label="Email" name="email" variant="inline">
|
||||
<UInput placeholder="john@lennon.com" />
|
||||
</UFormField>
|
||||
</div>
|
||||
@@ -41,6 +41,8 @@ const feedbacks = [
|
||||
:size="size"
|
||||
label="Email"
|
||||
description="This is a description"
|
||||
hint="This is a hint"
|
||||
help="This is a help"
|
||||
name="email"
|
||||
>
|
||||
<UInput placeholder="john@lennon.com" />
|
||||
|
||||
@@ -9,6 +9,7 @@ const orientations = Object.keys(theme.variants.orientation)
|
||||
const orientation = ref('vertical' as const)
|
||||
const color = ref('primary' as const)
|
||||
const size = ref('md' as const)
|
||||
const reverse = ref(false)
|
||||
|
||||
const items = [{
|
||||
date: 'Mar 15, 2025',
|
||||
@@ -46,6 +47,7 @@ const value = ref('kickoff')
|
||||
<USelect v-model="orientation" :items="orientations" placeholder="Orientation" />
|
||||
<USelect v-model="size" :items="sizes" placeholder="Size" />
|
||||
<USelect v-model="value" :items="items.map(item => item.value)" placeholder="Value" />
|
||||
<USelect v-model="reverse" :items="[true, false]" placeholder="Reverse" />
|
||||
</div>
|
||||
|
||||
<UTimeline
|
||||
@@ -54,6 +56,7 @@ const value = ref('kickoff')
|
||||
:orientation="orientation"
|
||||
:size="size"
|
||||
:items="items"
|
||||
:reverse="reverse"
|
||||
class="data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-96"
|
||||
/>
|
||||
</div>
|
||||
|
||||
208
pnpm-lock.yaml
generated
208
pnpm-lock.yaml
generated
@@ -240,8 +240,8 @@ importers:
|
||||
specifier: ^1.2.22
|
||||
version: 1.2.22
|
||||
'@nuxt/content':
|
||||
specifier: ^3.6.0
|
||||
version: 3.6.0(better-sqlite3@11.10.0)(magicast@0.3.5)
|
||||
specifier: ^3.5.1
|
||||
version: 3.5.1(magicast@0.3.5)(typescript@5.8.3)
|
||||
'@nuxt/image':
|
||||
specifier: ^1.10.0
|
||||
version: 1.10.0(db0@0.3.2(better-sqlite3@11.10.0))(ioredis@5.6.1)(magicast@0.3.5)
|
||||
@@ -438,10 +438,6 @@ packages:
|
||||
'@antfu/utils@8.1.1':
|
||||
resolution: {integrity: sha512-Mex9nXf9vR6AhcXmMrlz/HVgYYZpVGJ6YlPgwl7UnaFpnshXs6EK/oa5Gpf3CzENMjkvEx2tQtntGnb7UtSTOQ==}
|
||||
|
||||
'@apidevtools/json-schema-ref-parser@11.9.3':
|
||||
resolution: {integrity: sha512-60vepv88RwcJtSHrD6MjIL6Ta3SOYbgfnkHb+ppAVK+o9mXprRtulx7VlRl3lN3bbvysAfCS7WMVfhUYemB0IQ==}
|
||||
engines: {node: '>= 16'}
|
||||
|
||||
'@babel/code-frame@7.27.1':
|
||||
resolution: {integrity: sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==}
|
||||
engines: {node: '>=6.9.0'}
|
||||
@@ -1379,9 +1375,6 @@ packages:
|
||||
'@jridgewell/trace-mapping@0.3.9':
|
||||
resolution: {integrity: sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==}
|
||||
|
||||
'@jsdevtools/ono@7.1.3':
|
||||
resolution: {integrity: sha512-4JQNk+3mVzK3xh2rqd6RB4J46qUR19azEHBneZyTZM+c456qOrbbM/5xcR8huNCCcbVt7+UmizG6GuUvPvKUYg==}
|
||||
|
||||
'@kwsites/file-exists@1.1.1':
|
||||
resolution: {integrity: sha512-m9/5YGR18lIwxSFDwfE3oA7bWuq9kdau6ugN4H2rJeyhFQZcG9AgSHkQtSD15a8WvTgfz9aikZMrKPHvbpqFiw==}
|
||||
|
||||
@@ -1448,20 +1441,17 @@ packages:
|
||||
engines: {node: ^16.10.0 || >=18.0.0}
|
||||
hasBin: true
|
||||
|
||||
'@nuxt/content@3.6.0':
|
||||
resolution: {integrity: sha512-iqkcWf8M00fq7ZqF2qaHgcoKzRVOTMUp7dLkPCBrARmAKvV4kHdYyKjcf94kiNeKzIeqa73l3c1P8YMno/GgRQ==}
|
||||
'@nuxt/content@3.5.1':
|
||||
resolution: {integrity: sha512-WmWgxt5gWPSHBzLBSBZHiU9jaOmTWINMAppWxZ43ZHZCfa0GvdR5+0uTto2EGITPrPsf6iYhKKzSfmJa+Xmp2Q==}
|
||||
peerDependencies:
|
||||
'@electric-sql/pglite': '*'
|
||||
'@libsql/client': '*'
|
||||
better-sqlite3: 11.10.0
|
||||
sqlite3: '*'
|
||||
peerDependenciesMeta:
|
||||
'@electric-sql/pglite':
|
||||
optional: true
|
||||
'@libsql/client':
|
||||
optional: true
|
||||
better-sqlite3:
|
||||
optional: true
|
||||
sqlite3:
|
||||
optional: true
|
||||
|
||||
@@ -2210,33 +2200,24 @@ packages:
|
||||
'@shikijs/core@3.4.2':
|
||||
resolution: {integrity: sha512-AG8vnSi1W2pbgR2B911EfGqtLE9c4hQBYkv/x7Z+Kt0VxhgQKcW7UNDVYsu9YxwV6u+OJrvdJrMq6DNWoBjihQ==}
|
||||
|
||||
'@shikijs/core@3.6.0':
|
||||
resolution: {integrity: sha512-9By7Xb3olEX0o6UeJyPLI1PE1scC4d3wcVepvtv2xbuN9/IThYN4Wcwh24rcFeASzPam11MCq8yQpwwzCgSBRw==}
|
||||
'@shikijs/engine-javascript@3.4.2':
|
||||
resolution: {integrity: sha512-1/adJbSMBOkpScCE/SB6XkjJU17ANln3Wky7lOmrnpl+zBdQ1qXUJg2GXTYVHRq+2j3hd1DesmElTXYDgtfSOQ==}
|
||||
|
||||
'@shikijs/engine-javascript@3.6.0':
|
||||
resolution: {integrity: sha512-7YnLhZG/TU05IHMG14QaLvTW/9WiK8SEYafceccHUSXs2Qr5vJibUwsDfXDLmRi0zHdzsxrGKpSX6hnqe0k8nA==}
|
||||
'@shikijs/engine-oniguruma@3.4.2':
|
||||
resolution: {integrity: sha512-zcZKMnNndgRa3ORja6Iemsr3DrLtkX3cAF7lTJkdMB6v9alhlBsX9uNiCpqofNrXOvpA3h6lHcLJxgCIhVOU5Q==}
|
||||
|
||||
'@shikijs/engine-oniguruma@3.6.0':
|
||||
resolution: {integrity: sha512-nmOhIZ9yT3Grd+2plmW/d8+vZ2pcQmo/UnVwXMUXAKTXdi+LK0S08Ancrz5tQQPkxvjBalpMW2aKvwXfelauvA==}
|
||||
|
||||
'@shikijs/langs@3.6.0':
|
||||
resolution: {integrity: sha512-IdZkQJaLBu1LCYCwkr30hNuSDfllOT8RWYVZK1tD2J03DkiagYKRxj/pDSl8Didml3xxuyzUjgtioInwEQM/TA==}
|
||||
'@shikijs/langs@3.4.2':
|
||||
resolution: {integrity: sha512-H6azIAM+OXD98yztIfs/KH5H4PU39t+SREhmM8LaNXyUrqj2mx+zVkr8MWYqjceSjDw9I1jawm1WdFqU806rMA==}
|
||||
|
||||
'@shikijs/themes@3.4.2':
|
||||
resolution: {integrity: sha512-qAEuAQh+brd8Jyej2UDDf+b4V2g1Rm8aBIdvt32XhDPrHvDkEnpb7Kzc9hSuHUxz0Iuflmq7elaDuQAP9bHIhg==}
|
||||
|
||||
'@shikijs/themes@3.6.0':
|
||||
resolution: {integrity: sha512-Fq2j4nWr1DF4drvmhqKq8x5vVQ27VncF8XZMBuHuQMZvUSS3NBgpqfwz/FoGe36+W6PvniZ1yDlg2d4kmYDU6w==}
|
||||
|
||||
'@shikijs/transformers@3.4.2':
|
||||
resolution: {integrity: sha512-I5baLVi/ynLEOZoWSAMlACHNnG+yw5HDmse0oe+GW6U1u+ULdEB3UHiVWaHoJSSONV7tlcVxuaMy74sREDkSvg==}
|
||||
|
||||
'@shikijs/types@3.4.2':
|
||||
resolution: {integrity: sha512-zHC1l7L+eQlDXLnxvM9R91Efh2V4+rN3oMVS2swCBssbj2U/FBwybD1eeLaq8yl/iwT+zih8iUbTBCgGZOYlVg==}
|
||||
|
||||
'@shikijs/types@3.6.0':
|
||||
resolution: {integrity: sha512-cLWFiToxYu0aAzJqhXTQsFiJRTFDAGl93IrMSBNaGSzs7ixkLfdG6pH11HipuWFGW5vyx4X47W8HDQ7eSrmBUg==}
|
||||
|
||||
'@shikijs/vscode-textmate@10.0.2':
|
||||
resolution: {integrity: sha512-83yeghZ2xxin3Nj8z1NMd/NCuca+gsYXswywDy5bHvwlWL8tpTQmzGeUuHd9FC3E/SBEMvzJRwWEOz5gGes9Qg==}
|
||||
|
||||
@@ -2276,8 +2257,8 @@ packages:
|
||||
'@speed-highlight/core@1.2.7':
|
||||
resolution: {integrity: sha512-0dxmVj4gxg3Jg879kvFS/msl4s9F3T9UXC1InxgOf7t5NvcPD97u/WTA5vL/IxWHMn7qSxBozqrnnE2wvl1m8g==}
|
||||
|
||||
'@sqlite.org/sqlite-wasm@3.50.1-build1':
|
||||
resolution: {integrity: sha512-yH4M/SHN98NibniIwTVk6rwTJjy7n39l7zwWY3u+qsfZBGTi4lC1uEl2NDvIlkzsFtfCBvHBJJFJ1iuU3UzzEQ==}
|
||||
'@sqlite.org/sqlite-wasm@3.49.1-build4':
|
||||
resolution: {integrity: sha512-TBbTTWhiI6v2CT7J1hij5shx+RGL4iICprVGYhO+LKv5Nbn3NeJPWCY8kMKL5vA6b33NeWkBk4dy6RFbNh3jBw==}
|
||||
hasBin: true
|
||||
|
||||
'@standard-schema/spec@1.0.0':
|
||||
@@ -2437,9 +2418,6 @@ packages:
|
||||
'@types/json-schema@7.0.15':
|
||||
resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
|
||||
|
||||
'@types/lodash@4.17.17':
|
||||
resolution: {integrity: sha512-RRVJ+J3J+WmyOTqnz3PiBLA501eKwXl2noseKOrNo/6+XEHjTAxO4xHvxQB6QuNm+s4WRbn6rSiap8+EA+ykFQ==}
|
||||
|
||||
'@types/mdast@4.0.4':
|
||||
resolution: {integrity: sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==}
|
||||
|
||||
@@ -4910,11 +4888,6 @@ packages:
|
||||
json-parse-even-better-errors@2.3.1:
|
||||
resolution: {integrity: sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==}
|
||||
|
||||
json-schema-to-typescript@15.0.4:
|
||||
resolution: {integrity: sha512-Su9oK8DR4xCmDsLlyvadkXzX6+GGXJpbhwoLtOGArAG61dvbW4YQmSEno2y66ahpIdmLMg6YUf/QHLgiwvkrHQ==}
|
||||
engines: {node: '>=16.0.0'}
|
||||
hasBin: true
|
||||
|
||||
json-schema-traverse@0.4.1:
|
||||
resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==}
|
||||
|
||||
@@ -5377,9 +5350,6 @@ packages:
|
||||
engines: {node: '>=18.0.0'}
|
||||
hasBin: true
|
||||
|
||||
minimark@0.2.0:
|
||||
resolution: {integrity: sha512-AmtWU9pO0C2/3AM2pikaVhJ//8E5rOpJ7+ioFQfjIq+wCsBeuZoxPd97hBFZ9qrI7DMHZudwGH3r8A7BMnsIew==}
|
||||
|
||||
minimatch@10.0.1:
|
||||
resolution: {integrity: sha512-ethXTt3SGGR+95gudmqJ1eNhRO7eGEGIgYA9vnPatK4/etz2MEVDno5GMCibdMTuBMyElzIlgxMna3K94XDIDQ==}
|
||||
engines: {node: 20 || >=22}
|
||||
@@ -6492,8 +6462,8 @@ packages:
|
||||
shiki-transformer-color-highlight@1.0.0:
|
||||
resolution: {integrity: sha512-WwoXcbSQF4Hcfu/F4V7jvZxqmix4f8KNYNlYiNwz0w9RcABqhdNQOLeRRw3VNV2LBYdNcNR0qd9HVnlV+D+uzg==}
|
||||
|
||||
shiki@3.6.0:
|
||||
resolution: {integrity: sha512-tKn/Y0MGBTffQoklaATXmTqDU02zx8NYBGQ+F6gy87/YjKbizcLd+Cybh/0ZtOBX9r1NEnAy/GTRDKtOsc1L9w==}
|
||||
shiki@3.4.2:
|
||||
resolution: {integrity: sha512-wuxzZzQG8kvZndD7nustrNFIKYJ1jJoWIPaBpVe2+KHSvtzMi4SBjOxrigs8qeqce/l3U0cwiC+VAkLKSunHQQ==}
|
||||
|
||||
side-channel-list@1.0.0:
|
||||
resolution: {integrity: sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==}
|
||||
@@ -7655,6 +7625,12 @@ packages:
|
||||
peerDependencies:
|
||||
zod: ^3.24.1
|
||||
|
||||
zod-to-ts@1.2.0:
|
||||
resolution: {integrity: sha512-x30XE43V+InwGpvTySRNz9kB7qFU8DlyEy7BsSTCHPH1R0QasMmHWZDCzYm6bVXtj/9NNJAZF3jW8rzFvH5OFA==}
|
||||
peerDependencies:
|
||||
typescript: ^4.9.4 || ^5.0.2
|
||||
zod: ^3
|
||||
|
||||
zod@3.22.3:
|
||||
resolution: {integrity: sha512-EjIevzuJRiRPbVH4mGc8nApb/lVLKVpmUhAaR5R5doKGfAnGJ6Gr3CViAVjP+4FWSxCsybeWQdcgCtbX+7oZug==}
|
||||
|
||||
@@ -7664,9 +7640,6 @@ packages:
|
||||
zod@3.25.57:
|
||||
resolution: {integrity: sha512-6tgzLuwVST5oLUxXTmBqoinKMd3JeesgbgseXeFasKKj8Q1FCZrHnbqJOyiEvr4cVAlbug+CgIsmJ8cl/pU5FA==}
|
||||
|
||||
zod@3.25.63:
|
||||
resolution: {integrity: sha512-3ttCkqhtpncYXfP0f6dsyabbYV/nEUW+Xlu89jiXbTBifUfjaSqXOG6JnQPLtqt87n7KAmnMqcjay6c0Wq0Vbw==}
|
||||
|
||||
zwitch@2.0.4:
|
||||
resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==}
|
||||
|
||||
@@ -7724,12 +7697,6 @@ snapshots:
|
||||
|
||||
'@antfu/utils@8.1.1': {}
|
||||
|
||||
'@apidevtools/json-schema-ref-parser@11.9.3':
|
||||
dependencies:
|
||||
'@jsdevtools/ono': 7.1.3
|
||||
'@types/json-schema': 7.0.15
|
||||
js-yaml: 4.1.0
|
||||
|
||||
'@babel/code-frame@7.27.1':
|
||||
dependencies:
|
||||
'@babel/helper-validator-identifier': 7.27.1
|
||||
@@ -8568,8 +8535,6 @@ snapshots:
|
||||
'@jridgewell/resolve-uri': 3.1.2
|
||||
'@jridgewell/sourcemap-codec': 1.5.0
|
||||
|
||||
'@jsdevtools/ono@7.1.3': {}
|
||||
|
||||
'@kwsites/file-exists@1.1.1':
|
||||
dependencies:
|
||||
debug: 4.3.7
|
||||
@@ -8730,22 +8695,23 @@ snapshots:
|
||||
transitivePeerDependencies:
|
||||
- magicast
|
||||
|
||||
'@nuxt/content@3.6.0(better-sqlite3@11.10.0)(magicast@0.3.5)':
|
||||
'@nuxt/content@3.5.1(magicast@0.3.5)(typescript@5.8.3)':
|
||||
dependencies:
|
||||
'@nuxt/kit': 3.17.5(magicast@0.3.5)
|
||||
'@nuxtjs/mdc': 0.17.0(magicast@0.3.5)
|
||||
'@shikijs/langs': 3.6.0
|
||||
'@sqlite.org/sqlite-wasm': 3.50.1-build1
|
||||
'@shikijs/langs': 3.4.2
|
||||
'@sqlite.org/sqlite-wasm': 3.49.1-build4
|
||||
'@webcontainer/env': 1.1.1
|
||||
better-sqlite3: 11.10.0
|
||||
c12: 3.0.4(magicast@0.3.5)
|
||||
chokidar: 3.6.0
|
||||
consola: 3.4.2
|
||||
db0: 0.3.2(better-sqlite3@11.10.0)
|
||||
defu: 6.1.4
|
||||
destr: 2.0.5
|
||||
fast-glob: 3.3.3
|
||||
git-url-parse: 16.1.0
|
||||
jiti: 2.4.2
|
||||
json-schema-to-typescript: 15.0.4
|
||||
knitwork: 1.2.0
|
||||
listhen: 1.9.0
|
||||
mdast-util-to-hast: 13.2.0
|
||||
@@ -8756,35 +8722,32 @@ snapshots:
|
||||
micromark-util-resolve-all: 2.0.1
|
||||
micromark-util-sanitize-uri: 2.0.1
|
||||
micromatch: 4.0.8
|
||||
minimark: 0.2.0
|
||||
minimatch: 10.0.1
|
||||
nuxt-component-meta: 0.11.0(magicast@0.3.5)
|
||||
nypm: 0.6.0
|
||||
ohash: 2.0.11
|
||||
pathe: 2.0.3
|
||||
pkg-types: 2.1.0
|
||||
remark-mdc: 3.6.0
|
||||
scule: 1.3.0
|
||||
shiki: 3.6.0
|
||||
shiki: 3.4.2
|
||||
slugify: 1.6.6
|
||||
socket.io-client: 4.8.1
|
||||
tar: 7.4.3
|
||||
tinyglobby: 0.2.14
|
||||
ufo: 1.6.1
|
||||
unified: 11.0.5
|
||||
unist-util-stringify-position: 4.0.0
|
||||
unist-util-visit: 5.0.0
|
||||
ws: 8.18.2
|
||||
zod: 3.25.63
|
||||
zod-to-json-schema: 3.24.5(zod@3.25.63)
|
||||
optionalDependencies:
|
||||
better-sqlite3: 11.10.0
|
||||
zod: 3.25.57
|
||||
zod-to-json-schema: 3.24.5(zod@3.25.57)
|
||||
zod-to-ts: 1.2.0(typescript@5.8.3)(zod@3.25.57)
|
||||
transitivePeerDependencies:
|
||||
- bufferutil
|
||||
- drizzle-orm
|
||||
- magicast
|
||||
- mysql2
|
||||
- supports-color
|
||||
- typescript
|
||||
- utf-8-validate
|
||||
|
||||
'@nuxt/devalue@2.0.2': {}
|
||||
@@ -9277,7 +9240,7 @@ snapshots:
|
||||
'@nuxtjs/mdc@0.17.0(magicast@0.3.5)':
|
||||
dependencies:
|
||||
'@nuxt/kit': 3.17.5(magicast@0.3.5)
|
||||
'@shikijs/langs': 3.6.0
|
||||
'@shikijs/langs': 3.4.2
|
||||
'@shikijs/themes': 3.4.2
|
||||
'@shikijs/transformers': 3.4.2
|
||||
'@types/hast': 3.0.4
|
||||
@@ -9311,7 +9274,7 @@ snapshots:
|
||||
remark-rehype: 11.1.2
|
||||
remark-stringify: 11.0.0
|
||||
scule: 1.3.0
|
||||
shiki: 3.6.0
|
||||
shiki: 3.4.2
|
||||
ufo: 1.6.1
|
||||
unified: 11.0.5
|
||||
unist-builder: 4.0.0
|
||||
@@ -9824,36 +9787,25 @@ snapshots:
|
||||
'@types/hast': 3.0.4
|
||||
hast-util-to-html: 9.0.5
|
||||
|
||||
'@shikijs/core@3.6.0':
|
||||
'@shikijs/engine-javascript@3.4.2':
|
||||
dependencies:
|
||||
'@shikijs/types': 3.6.0
|
||||
'@shikijs/vscode-textmate': 10.0.2
|
||||
'@types/hast': 3.0.4
|
||||
hast-util-to-html: 9.0.5
|
||||
|
||||
'@shikijs/engine-javascript@3.6.0':
|
||||
dependencies:
|
||||
'@shikijs/types': 3.6.0
|
||||
'@shikijs/types': 3.4.2
|
||||
'@shikijs/vscode-textmate': 10.0.2
|
||||
oniguruma-to-es: 4.3.3
|
||||
|
||||
'@shikijs/engine-oniguruma@3.6.0':
|
||||
'@shikijs/engine-oniguruma@3.4.2':
|
||||
dependencies:
|
||||
'@shikijs/types': 3.6.0
|
||||
'@shikijs/types': 3.4.2
|
||||
'@shikijs/vscode-textmate': 10.0.2
|
||||
|
||||
'@shikijs/langs@3.6.0':
|
||||
'@shikijs/langs@3.4.2':
|
||||
dependencies:
|
||||
'@shikijs/types': 3.6.0
|
||||
'@shikijs/types': 3.4.2
|
||||
|
||||
'@shikijs/themes@3.4.2':
|
||||
dependencies:
|
||||
'@shikijs/types': 3.4.2
|
||||
|
||||
'@shikijs/themes@3.6.0':
|
||||
dependencies:
|
||||
'@shikijs/types': 3.6.0
|
||||
|
||||
'@shikijs/transformers@3.4.2':
|
||||
dependencies:
|
||||
'@shikijs/core': 3.4.2
|
||||
@@ -9864,11 +9816,6 @@ snapshots:
|
||||
'@shikijs/vscode-textmate': 10.0.2
|
||||
'@types/hast': 3.0.4
|
||||
|
||||
'@shikijs/types@3.6.0':
|
||||
dependencies:
|
||||
'@shikijs/vscode-textmate': 10.0.2
|
||||
'@types/hast': 3.0.4
|
||||
|
||||
'@shikijs/vscode-textmate@10.0.2': {}
|
||||
|
||||
'@shuding/opentype.js@1.4.0-beta.0':
|
||||
@@ -9896,7 +9843,7 @@ snapshots:
|
||||
|
||||
'@speed-highlight/core@1.2.7': {}
|
||||
|
||||
'@sqlite.org/sqlite-wasm@3.50.1-build1': {}
|
||||
'@sqlite.org/sqlite-wasm@3.49.1-build4': {}
|
||||
|
||||
'@standard-schema/spec@1.0.0': {}
|
||||
|
||||
@@ -10040,8 +9987,6 @@ snapshots:
|
||||
|
||||
'@types/json-schema@7.0.15': {}
|
||||
|
||||
'@types/lodash@4.17.17': {}
|
||||
|
||||
'@types/mdast@4.0.4':
|
||||
dependencies:
|
||||
'@types/unist': 3.0.3
|
||||
@@ -10768,7 +10713,6 @@ snapshots:
|
||||
dependencies:
|
||||
bindings: 1.5.0
|
||||
prebuild-install: 7.1.3
|
||||
optional: true
|
||||
|
||||
binary-extensions@2.3.0: {}
|
||||
|
||||
@@ -10783,7 +10727,6 @@ snapshots:
|
||||
buffer: 5.7.1
|
||||
inherits: 2.0.4
|
||||
readable-stream: 3.6.2
|
||||
optional: true
|
||||
|
||||
blake3-wasm@2.1.5: {}
|
||||
|
||||
@@ -10939,8 +10882,7 @@ snapshots:
|
||||
optionalDependencies:
|
||||
fsevents: 2.3.3
|
||||
|
||||
chownr@1.1.4:
|
||||
optional: true
|
||||
chownr@1.1.4: {}
|
||||
|
||||
chownr@3.0.0: {}
|
||||
|
||||
@@ -11352,12 +11294,10 @@ snapshots:
|
||||
decompress-response@6.0.0:
|
||||
dependencies:
|
||||
mimic-response: 3.1.0
|
||||
optional: true
|
||||
|
||||
deep-eql@5.0.2: {}
|
||||
|
||||
deep-extend@0.6.0:
|
||||
optional: true
|
||||
deep-extend@0.6.0: {}
|
||||
|
||||
deep-is@0.1.4: {}
|
||||
|
||||
@@ -11926,8 +11866,7 @@ snapshots:
|
||||
|
||||
exit-hook@2.2.1: {}
|
||||
|
||||
expand-template@2.0.3:
|
||||
optional: true
|
||||
expand-template@2.0.3: {}
|
||||
|
||||
expect-type@1.2.1: {}
|
||||
|
||||
@@ -12106,8 +12045,7 @@ snapshots:
|
||||
|
||||
fresh@2.0.0: {}
|
||||
|
||||
fs-constants@1.0.0:
|
||||
optional: true
|
||||
fs-constants@1.0.0: {}
|
||||
|
||||
fs.realpath@1.0.0: {}
|
||||
|
||||
@@ -12211,8 +12149,7 @@ snapshots:
|
||||
dependencies:
|
||||
git-up: 8.1.1
|
||||
|
||||
github-from-package@0.0.0:
|
||||
optional: true
|
||||
github-from-package@0.0.0: {}
|
||||
|
||||
github-slugger@2.0.0: {}
|
||||
|
||||
@@ -12787,18 +12724,6 @@ snapshots:
|
||||
|
||||
json-parse-even-better-errors@2.3.1: {}
|
||||
|
||||
json-schema-to-typescript@15.0.4:
|
||||
dependencies:
|
||||
'@apidevtools/json-schema-ref-parser': 11.9.3
|
||||
'@types/json-schema': 7.0.15
|
||||
'@types/lodash': 4.17.17
|
||||
is-glob: 4.0.3
|
||||
js-yaml: 4.1.0
|
||||
lodash: 4.17.21
|
||||
minimist: 1.2.8
|
||||
prettier: 3.5.3
|
||||
tinyglobby: 0.2.14
|
||||
|
||||
json-schema-traverse@0.4.1: {}
|
||||
|
||||
json-schema@0.4.0: {}
|
||||
@@ -13397,8 +13322,7 @@ snapshots:
|
||||
|
||||
mimic-function@5.0.1: {}
|
||||
|
||||
mimic-response@3.1.0:
|
||||
optional: true
|
||||
mimic-response@3.1.0: {}
|
||||
|
||||
min-indent@1.0.1: {}
|
||||
|
||||
@@ -13420,8 +13344,6 @@ snapshots:
|
||||
- bufferutil
|
||||
- utf-8-validate
|
||||
|
||||
minimark@0.2.0: {}
|
||||
|
||||
minimatch@10.0.1:
|
||||
dependencies:
|
||||
brace-expansion: 2.0.1
|
||||
@@ -13452,8 +13374,7 @@ snapshots:
|
||||
|
||||
mitt@3.0.1: {}
|
||||
|
||||
mkdirp-classic@0.5.3:
|
||||
optional: true
|
||||
mkdirp-classic@0.5.3: {}
|
||||
|
||||
mkdirp@3.0.1: {}
|
||||
|
||||
@@ -13526,8 +13447,7 @@ snapshots:
|
||||
|
||||
nanotar@0.2.0: {}
|
||||
|
||||
napi-build-utils@2.0.0:
|
||||
optional: true
|
||||
napi-build-utils@2.0.0: {}
|
||||
|
||||
napi-postinstall@0.2.4: {}
|
||||
|
||||
@@ -13659,7 +13579,6 @@ snapshots:
|
||||
node-abi@3.75.0:
|
||||
dependencies:
|
||||
semver: 7.7.2
|
||||
optional: true
|
||||
|
||||
node-addon-api@6.1.0:
|
||||
optional: true
|
||||
@@ -14399,7 +14318,6 @@ snapshots:
|
||||
simple-get: 4.0.1
|
||||
tar-fs: 2.1.3
|
||||
tunnel-agent: 0.6.0
|
||||
optional: true
|
||||
|
||||
precinct@12.2.0:
|
||||
dependencies:
|
||||
@@ -14534,7 +14452,6 @@ snapshots:
|
||||
ini: 1.3.8
|
||||
minimist: 1.2.8
|
||||
strip-json-comments: 2.0.1
|
||||
optional: true
|
||||
|
||||
react@19.1.0: {}
|
||||
|
||||
@@ -15004,14 +14921,14 @@ snapshots:
|
||||
'@shikijs/types': 3.4.2
|
||||
colorjs.io: 0.5.2
|
||||
|
||||
shiki@3.6.0:
|
||||
shiki@3.4.2:
|
||||
dependencies:
|
||||
'@shikijs/core': 3.6.0
|
||||
'@shikijs/engine-javascript': 3.6.0
|
||||
'@shikijs/engine-oniguruma': 3.6.0
|
||||
'@shikijs/langs': 3.6.0
|
||||
'@shikijs/themes': 3.6.0
|
||||
'@shikijs/types': 3.6.0
|
||||
'@shikijs/core': 3.4.2
|
||||
'@shikijs/engine-javascript': 3.4.2
|
||||
'@shikijs/engine-oniguruma': 3.4.2
|
||||
'@shikijs/langs': 3.4.2
|
||||
'@shikijs/themes': 3.4.2
|
||||
'@shikijs/types': 3.4.2
|
||||
'@shikijs/vscode-textmate': 10.0.2
|
||||
'@types/hast': 3.0.4
|
||||
|
||||
@@ -15047,15 +14964,13 @@ snapshots:
|
||||
|
||||
signal-exit@4.1.0: {}
|
||||
|
||||
simple-concat@1.0.1:
|
||||
optional: true
|
||||
simple-concat@1.0.1: {}
|
||||
|
||||
simple-get@4.0.1:
|
||||
dependencies:
|
||||
decompress-response: 6.0.0
|
||||
once: 1.4.0
|
||||
simple-concat: 1.0.1
|
||||
optional: true
|
||||
|
||||
simple-git@3.27.0:
|
||||
dependencies:
|
||||
@@ -15240,8 +15155,7 @@ snapshots:
|
||||
dependencies:
|
||||
min-indent: 1.0.1
|
||||
|
||||
strip-json-comments@2.0.1:
|
||||
optional: true
|
||||
strip-json-comments@2.0.1: {}
|
||||
|
||||
strip-json-comments@3.1.1: {}
|
||||
|
||||
@@ -15310,7 +15224,6 @@ snapshots:
|
||||
mkdirp-classic: 0.5.3
|
||||
pump: 3.0.2
|
||||
tar-stream: 2.2.0
|
||||
optional: true
|
||||
|
||||
tar-fs@3.0.9:
|
||||
dependencies:
|
||||
@@ -15329,7 +15242,6 @@ snapshots:
|
||||
fs-constants: 1.0.0
|
||||
inherits: 2.0.4
|
||||
readable-stream: 3.6.2
|
||||
optional: true
|
||||
|
||||
tar-stream@3.1.7:
|
||||
dependencies:
|
||||
@@ -15449,7 +15361,6 @@ snapshots:
|
||||
tunnel-agent@0.6.0:
|
||||
dependencies:
|
||||
safe-buffer: 5.2.1
|
||||
optional: true
|
||||
|
||||
type-check@0.4.0:
|
||||
dependencies:
|
||||
@@ -16239,9 +16150,10 @@ snapshots:
|
||||
dependencies:
|
||||
zod: 3.25.57
|
||||
|
||||
zod-to-json-schema@3.24.5(zod@3.25.63):
|
||||
zod-to-ts@1.2.0(typescript@5.8.3)(zod@3.25.57):
|
||||
dependencies:
|
||||
zod: 3.25.63
|
||||
typescript: 5.8.3
|
||||
zod: 3.25.57
|
||||
|
||||
zod@3.22.3: {}
|
||||
|
||||
@@ -16249,6 +16161,4 @@ snapshots:
|
||||
|
||||
zod@3.25.57: {}
|
||||
|
||||
zod@3.25.63: {}
|
||||
|
||||
zwitch@2.0.4: {}
|
||||
|
||||
@@ -26,13 +26,18 @@ export interface CommandPaletteItem extends Omit<LinkProps, 'type' | 'raw' | 'cu
|
||||
loading?: boolean
|
||||
disabled?: boolean
|
||||
slot?: string
|
||||
/**
|
||||
* The placeholder to display when the item has children.
|
||||
*/
|
||||
placeholder?: string
|
||||
children?: CommandPaletteItem[]
|
||||
onSelect?(e?: Event): void
|
||||
class?: any
|
||||
ui?: Pick<CommandPalette['slots'], 'item' | 'itemLeadingIcon' | 'itemLeadingAvatarSize' | 'itemLeadingAvatar' | 'itemLeadingChipSize' | 'itemLeadingChip' | 'itemLabel' | 'itemLabelPrefix' | 'itemLabelBase' | 'itemLabelSuffix' | 'itemTrailing' | 'itemTrailingKbds' | 'itemTrailingKbdsSize' | 'itemTrailingHighlightedIcon' | 'itemTrailingIcon'>
|
||||
[key: string]: any
|
||||
}
|
||||
|
||||
export interface CommandPaletteGroup<T> {
|
||||
export interface CommandPaletteGroup<T extends CommandPaletteItem = CommandPaletteItem> {
|
||||
id: string
|
||||
label?: string
|
||||
slot?: string
|
||||
@@ -52,7 +57,7 @@ export interface CommandPaletteGroup<T> {
|
||||
highlightedIcon?: string
|
||||
}
|
||||
|
||||
export interface CommandPaletteProps<G, T> extends Pick<ListboxRootProps, 'multiple' | 'disabled' | 'modelValue' | 'defaultValue' | 'highlightOnHover'>, Pick<UseComponentIconsProps, 'loading' | 'loadingIcon'> {
|
||||
export interface CommandPaletteProps<G extends CommandPaletteGroup<T> = CommandPaletteGroup<any>, T extends CommandPaletteItem = CommandPaletteItem> extends Pick<ListboxRootProps, 'multiple' | 'disabled' | 'modelValue' | 'defaultValue' | 'highlightOnHover' | 'selectionBehavior'>, Pick<UseComponentIconsProps, 'loading' | 'loadingIcon'> {
|
||||
/**
|
||||
* The element or component this component should render as.
|
||||
* @defaultValue 'div'
|
||||
@@ -70,6 +75,12 @@ export interface CommandPaletteProps<G, T> extends Pick<ListboxRootProps, 'multi
|
||||
* @IconifyIcon
|
||||
*/
|
||||
selectedIcon?: string
|
||||
/**
|
||||
* The icon displayed when an item has children.
|
||||
* @defaultValue appConfig.ui.icons.chevronRight
|
||||
* @IconifyIcon
|
||||
*/
|
||||
trailingIcon?: string
|
||||
/**
|
||||
* The placeholder text for the input.
|
||||
* @defaultValue t('commandPalette.placeholder')
|
||||
@@ -93,6 +104,18 @@ export interface CommandPaletteProps<G, T> extends Pick<ListboxRootProps, 'multi
|
||||
* @IconifyIcon
|
||||
*/
|
||||
closeIcon?: string
|
||||
/**
|
||||
* Display a button to navigate back in history.
|
||||
* `{ size: 'md', color: 'neutral', variant: 'link' }`{lang="ts-type"}
|
||||
* @defaultValue true
|
||||
*/
|
||||
back?: boolean | ButtonProps
|
||||
/**
|
||||
* The icon displayed in the back button.
|
||||
* @defaultValue appConfig.ui.icons.arrowLeft
|
||||
* @IconifyIcon
|
||||
*/
|
||||
backIcon?: string
|
||||
groups?: G[]
|
||||
/**
|
||||
* Options for [useFuse](https://vueuse.org/integrations/useFuse).
|
||||
@@ -116,14 +139,15 @@ export interface CommandPaletteProps<G, T> extends Pick<ListboxRootProps, 'multi
|
||||
ui?: CommandPalette['slots']
|
||||
}
|
||||
|
||||
export type CommandPaletteEmits<T> = ListboxRootEmits<T> & {
|
||||
export type CommandPaletteEmits<T extends CommandPaletteItem = CommandPaletteItem> = ListboxRootEmits<T> & {
|
||||
'update:open': [value: boolean]
|
||||
}
|
||||
|
||||
type SlotProps<T> = (props: { item: T, index: number }) => any
|
||||
|
||||
export type CommandPaletteSlots<G extends { slot?: string }, T extends { slot?: string }> = {
|
||||
export type CommandPaletteSlots<G extends CommandPaletteGroup<T> = CommandPaletteGroup<any>, T extends CommandPaletteItem = CommandPaletteItem> = {
|
||||
'empty'(props: { searchTerm?: 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>
|
||||
'item-leading': SlotProps<T>
|
||||
@@ -134,7 +158,7 @@ export type CommandPaletteSlots<G extends { slot?: string }, T extends { slot?:
|
||||
</script>
|
||||
|
||||
<script setup lang="ts" generic="G extends CommandPaletteGroup<T>, T extends CommandPaletteItem">
|
||||
import { computed } from 'vue'
|
||||
import { computed, ref, useTemplateRef } from 'vue'
|
||||
import { ListboxRoot, ListboxFilter, ListboxContent, ListboxGroup, ListboxGroupLabel, ListboxItem, ListboxItemIndicator, useForwardProps, useForwardPropsEmits } from 'reka-ui'
|
||||
import { defu } from 'defu'
|
||||
import { reactivePick } from '@vueuse/core'
|
||||
@@ -157,7 +181,8 @@ import UKbd from './Kbd.vue'
|
||||
const props = withDefaults(defineProps<CommandPaletteProps<G, T>>(), {
|
||||
modelValue: '',
|
||||
labelKey: 'label',
|
||||
autofocus: true
|
||||
autofocus: true,
|
||||
back: true
|
||||
})
|
||||
const emits = defineEmits<CommandPaletteEmits<T>>()
|
||||
const slots = defineSlots<CommandPaletteSlots<G, T>>()
|
||||
@@ -167,7 +192,7 @@ const searchTerm = defineModel<string>('searchTerm', { default: '' })
|
||||
const { t } = useLocale()
|
||||
const appConfig = useAppConfig() as CommandPalette['AppConfig']
|
||||
|
||||
const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'disabled', 'multiple', 'modelValue', 'defaultValue', 'highlightOnHover'), emits)
|
||||
const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'disabled', 'multiple', 'modelValue', 'defaultValue', 'highlightOnHover', 'selectionBehavior'), emits)
|
||||
const inputProps = useForwardProps(reactivePick(props, 'loading', 'loadingIcon'))
|
||||
|
||||
// eslint-disable-next-line vue/no-dupe-keys
|
||||
@@ -183,18 +208,22 @@ const fuse = computed(() => defu({}, props.fuse, {
|
||||
matchAllWhenSearchEmpty: true
|
||||
}))
|
||||
|
||||
const items = computed(() => props.groups?.filter((group) => {
|
||||
const history = ref<(CommandPaletteGroup & { placeholder?: string })[]>([])
|
||||
|
||||
const placeholder = computed(() => history.value[history.value.length - 1]?.placeholder || props.placeholder || t('commandPalette.placeholder'))
|
||||
|
||||
const groups = computed(() => history.value?.length ? [history.value[history.value.length - 1] as G] : props.groups)
|
||||
|
||||
const items = computed(() => groups.value?.filter((group) => {
|
||||
if (!group.id) {
|
||||
console.warn(`[@nuxt/ui] CommandPalette group is missing an \`id\` property`)
|
||||
return false
|
||||
}
|
||||
|
||||
if (group.ignoreFilter) {
|
||||
return false
|
||||
}
|
||||
|
||||
return true
|
||||
}).flatMap(group => group.items?.map(item => ({ ...item, group: group.id })) || []) || [])
|
||||
})?.flatMap(group => group.items?.map(item => ({ ...item, group: group.id })) || []) || [])
|
||||
|
||||
const { results: fuseResults } = useFuse<typeof items.value[number]>(searchTerm, items, fuse)
|
||||
|
||||
@@ -215,7 +244,7 @@ function getGroupWithItems(group: G, items: (T & { matches?: FuseResult<T>['matc
|
||||
}
|
||||
}
|
||||
|
||||
const groups = computed(() => {
|
||||
const filteredGroups = computed(() => {
|
||||
const groupsById = fuseResults.value.reduce((acc, result) => {
|
||||
const { item, matches } = result
|
||||
if (!item.group) {
|
||||
@@ -229,7 +258,7 @@ const groups = computed(() => {
|
||||
}, {} as Record<string, (T & { matches?: FuseResult<T>['matches'] })[]>)
|
||||
|
||||
const fuseGroups = Object.entries(groupsById).map(([id, items]) => {
|
||||
const group = props.groups?.find(group => group.id === id)
|
||||
const group = groups.value?.find(group => group.id === id)
|
||||
if (!group) {
|
||||
return
|
||||
}
|
||||
@@ -237,7 +266,7 @@ const groups = computed(() => {
|
||||
return getGroupWithItems(group, items)
|
||||
}).filter(group => !!group)
|
||||
|
||||
const nonFuseGroups = props.groups
|
||||
const nonFuseGroups = groups.value
|
||||
?.map((group, index) => ({ ...group, index }))
|
||||
?.filter(group => group.ignoreFilter && group.items?.length)
|
||||
?.map(group => ({ ...getGroupWithItems(group, group.items || []), index: group.index })) || []
|
||||
@@ -247,20 +276,84 @@ const groups = computed(() => {
|
||||
return acc
|
||||
}, [...fuseGroups])
|
||||
})
|
||||
|
||||
const listboxRootRef = useTemplateRef('listboxRootRef')
|
||||
|
||||
function navigate(item: T) {
|
||||
if (!item.children?.length) {
|
||||
return
|
||||
}
|
||||
|
||||
history.value.push({
|
||||
id: `history-${history.value.length}`,
|
||||
label: item.label,
|
||||
slot: item.slot,
|
||||
placeholder: item.placeholder,
|
||||
items: item.children
|
||||
} as any)
|
||||
|
||||
searchTerm.value = ''
|
||||
|
||||
listboxRootRef.value?.highlightFirstItem()
|
||||
}
|
||||
|
||||
function navigateBack() {
|
||||
if (!history.value.length) {
|
||||
return
|
||||
}
|
||||
|
||||
history.value.pop()
|
||||
|
||||
searchTerm.value = ''
|
||||
|
||||
listboxRootRef.value?.highlightFirstItem()
|
||||
}
|
||||
|
||||
function onBackspace() {
|
||||
if (!searchTerm.value) {
|
||||
navigateBack()
|
||||
}
|
||||
}
|
||||
|
||||
function onSelect(e: Event, item: T) {
|
||||
if (item.children?.length) {
|
||||
e.preventDefault()
|
||||
|
||||
navigate(item)
|
||||
} else {
|
||||
item.onSelect?.(e)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- eslint-disable vue/no-v-html -->
|
||||
<template>
|
||||
<ListboxRoot v-bind="rootProps" :class="ui.root({ class: [props.ui?.root, props.class] })">
|
||||
<ListboxRoot v-bind="rootProps" ref="listboxRootRef" :class="ui.root({ class: [props.ui?.root, props.class] })">
|
||||
<ListboxFilter v-model="searchTerm" as-child>
|
||||
<UInput
|
||||
:placeholder="placeholder || t('commandPalette.placeholder')"
|
||||
:placeholder="placeholder"
|
||||
variant="none"
|
||||
:autofocus="autofocus"
|
||||
v-bind="inputProps"
|
||||
:icon="icon || appConfig.ui.icons.search"
|
||||
:class="ui.input({ class: props.ui?.input })"
|
||||
@keydown.backspace="onBackspace"
|
||||
>
|
||||
<template v-if="history?.length && (back || !!slots.back)" #leading>
|
||||
<slot name="back" :ui="ui">
|
||||
<UButton
|
||||
:icon="backIcon || appConfig.ui.icons.arrowLeft"
|
||||
size="md"
|
||||
color="neutral"
|
||||
variant="link"
|
||||
:aria-label="t('commandPalette.back')"
|
||||
v-bind="(typeof back === 'object' ? back as Partial<ButtonProps> : {})"
|
||||
:class="ui.back({ class: props.ui?.back })"
|
||||
@click="navigateBack"
|
||||
/>
|
||||
</slot>
|
||||
</template>
|
||||
|
||||
<template v-if="close || !!slots.close" #trailing>
|
||||
<slot name="close" :ui="ui">
|
||||
<UButton
|
||||
@@ -280,8 +373,8 @@ const groups = computed(() => {
|
||||
</ListboxFilter>
|
||||
|
||||
<ListboxContent :class="ui.content({ class: props.ui?.content })">
|
||||
<div v-if="groups?.length" role="presentation" :class="ui.viewport({ class: props.ui?.viewport })">
|
||||
<ListboxGroup v-for="group in groups" :key="`group-${group.id}`" :class="ui.group({ class: props.ui?.group })">
|
||||
<div v-if="filteredGroups?.length" role="presentation" :class="ui.viewport({ class: props.ui?.viewport })">
|
||||
<ListboxGroup v-for="group in filteredGroups" :key="`group-${group.id}`" :class="ui.group({ class: props.ui?.group })">
|
||||
<ListboxGroupLabel v-if="get(group, props.labelKey as string)" :class="ui.label({ class: props.ui?.label })">
|
||||
{{ get(group, props.labelKey as string) }}
|
||||
</ListboxGroupLabel>
|
||||
@@ -289,10 +382,10 @@ const groups = computed(() => {
|
||||
<ListboxItem
|
||||
v-for="(item, index) in group.items"
|
||||
:key="`group-${group.id}-${index}`"
|
||||
:value="omit(item, ['matches' as any, 'group' as any, 'onSelect', 'labelHtml', 'suffixHtml'])"
|
||||
:value="omit(item, ['matches' as any, 'group' as any, 'onSelect', 'labelHtml', 'suffixHtml', 'children'])"
|
||||
:disabled="item.disabled"
|
||||
as-child
|
||||
@select="item.onSelect"
|
||||
@select="onSelect($event, item)"
|
||||
>
|
||||
<ULink v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(item)" custom>
|
||||
<ULinkBase v-bind="slotProps" :class="ui.item({ class: [props.ui?.item, item.ui?.item, item.class], active: active || item.active })">
|
||||
@@ -323,13 +416,20 @@ const groups = computed(() => {
|
||||
|
||||
<span :class="ui.itemTrailing({ class: [props.ui?.itemTrailing, item.ui?.itemTrailing] })">
|
||||
<slot :name="((item.slot ? `${item.slot}-trailing` : group.slot ? `${group.slot}-trailing` : `item-trailing`) as keyof CommandPaletteSlots<G, T>)" :item="(item as any)" :index="index">
|
||||
<span v-if="item.kbds?.length" :class="ui.itemTrailingKbds({ class: [props.ui?.itemTrailingKbds, item.ui?.itemTrailingKbds] })">
|
||||
<UIcon
|
||||
v-if="item.children && item.children.length > 0"
|
||||
:name="trailingIcon || appConfig.ui.icons.chevronRight"
|
||||
:class="ui.itemTrailingIcon({ class: [props.ui?.itemTrailingIcon, item.ui?.itemTrailingIcon] })"
|
||||
/>
|
||||
|
||||
<span v-else-if="item.kbds?.length" :class="ui.itemTrailingKbds({ class: [props.ui?.itemTrailingKbds, item.ui?.itemTrailingKbds] })">
|
||||
<UKbd v-for="(kbd, kbdIndex) in item.kbds" :key="kbdIndex" :size="((item.ui?.itemTrailingKbdsSize || props.ui?.itemTrailingKbdsSize || ui.itemTrailingKbdsSize()) as KbdProps['size'])" v-bind="typeof kbd === 'string' ? { value: kbd } : kbd" />
|
||||
</span>
|
||||
|
||||
<UIcon v-else-if="group.highlightedIcon" :name="group.highlightedIcon" :class="ui.itemTrailingHighlightedIcon({ class: [props.ui?.itemTrailingHighlightedIcon, item.ui?.itemTrailingHighlightedIcon] })" />
|
||||
</slot>
|
||||
|
||||
<ListboxItemIndicator as-child>
|
||||
<ListboxItemIndicator v-if="!item.children?.length" as-child>
|
||||
<UIcon :name="selectedIcon || appConfig.ui.icons.check" :class="ui.itemTrailingIcon({ class: [props.ui?.itemTrailingIcon, item.ui?.itemTrailingIcon] })" />
|
||||
</ListboxItemIndicator>
|
||||
</span>
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
import type { AppConfig } from '@nuxt/schema'
|
||||
import theme from '#build/ui/form-field'
|
||||
import type { ComponentConfig } from '../types/utils'
|
||||
import { createReusableTemplate } from '@vueuse/core'
|
||||
|
||||
type FormField = ComponentConfig<typeof theme, AppConfig, 'formField'>
|
||||
|
||||
@@ -20,6 +21,8 @@ export interface FormFieldProps {
|
||||
help?: string
|
||||
error?: string | boolean
|
||||
hint?: string
|
||||
|
||||
variant?: 'default' | 'inline'
|
||||
/**
|
||||
* @defaultValue 'md'
|
||||
*/
|
||||
@@ -61,6 +64,7 @@ const appConfig = useAppConfig() as FormField['AppConfig']
|
||||
|
||||
const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.formField || {}) })({
|
||||
size: props.size,
|
||||
variant: props.variant,
|
||||
required: props.required
|
||||
}))
|
||||
|
||||
@@ -87,9 +91,28 @@ provide(formFieldInjectionKey, computed(() => ({
|
||||
help: props.help,
|
||||
ariaId
|
||||
}) as FormFieldInjectedOptions<FormFieldProps>))
|
||||
|
||||
const [DefineHintTemplate, ReuseHintTemplate] = createReusableTemplate()
|
||||
const [DefineDescriptionTemplate, ReuseDescriptionTemplate] = createReusableTemplate()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DefineHintTemplate>
|
||||
<span v-if="(hint || !!slots.hint)" :id="`${ariaId}-hint`" :class="ui.hint({ class: props.ui?.hint })">
|
||||
<slot name="hint" :hint="hint">
|
||||
{{ hint }}
|
||||
</slot>
|
||||
</span>
|
||||
</DefineHintTemplate>
|
||||
|
||||
<DefineDescriptionTemplate>
|
||||
<p v-if="description || !!slots.description" :id="`${ariaId}-description`" :class="ui.description({ class: props.ui?.description })">
|
||||
<slot name="description" :description="description">
|
||||
{{ description }}
|
||||
</slot>
|
||||
</p>
|
||||
</DefineDescriptionTemplate>
|
||||
|
||||
<Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
|
||||
<div :class="ui.wrapper({ class: props.ui?.wrapper })">
|
||||
<div v-if="label || !!slots.label" :class="ui.labelWrapper({ class: props.ui?.labelWrapper })">
|
||||
@@ -98,20 +121,12 @@ provide(formFieldInjectionKey, computed(() => ({
|
||||
{{ label }}
|
||||
</slot>
|
||||
</Label>
|
||||
<span v-if="hint || !!slots.hint" :id="`${ariaId}-hint`" :class="ui.hint({ class: props.ui?.hint })">
|
||||
<slot name="hint" :hint="hint">
|
||||
{{ hint }}
|
||||
</slot>
|
||||
</span>
|
||||
<ReuseHintTemplate v-if="variant !== 'inline'" />
|
||||
</div>
|
||||
|
||||
<p v-if="description || !!slots.description" :id="`${ariaId}-description`" :class="ui.description({ class: props.ui?.description })">
|
||||
<slot name="description" :description="description">
|
||||
{{ description }}
|
||||
</slot>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<ReuseDescriptionTemplate v-if="variant !== 'inline'" />
|
||||
|
||||
<div :class="[(label || !!slots.label || description || !!slots.description) && ui.container({ class: props.ui?.container })]">
|
||||
<slot :error="error" />
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<script lang="ts">
|
||||
import type { AppConfig } from '@nuxt/schema'
|
||||
import type { TagsInputRootProps, AcceptableInputValue } from 'reka-ui'
|
||||
import type { TagsInputRootProps, TagsInputRootEmits, AcceptableInputValue } from 'reka-ui'
|
||||
import theme from '#build/ui/input-tags'
|
||||
import type { UseComponentIconsProps } from '../composables/useComponentIcons'
|
||||
import type { AvatarProps } from '../types'
|
||||
@@ -44,11 +44,10 @@ export interface InputTagsProps<T extends InputTagItem = InputTagItem> extends P
|
||||
ui?: InputTags['slots']
|
||||
}
|
||||
|
||||
export type InputTagsEmits<T extends InputTagItem> = {
|
||||
'update:modelValue': [payload: T[]]
|
||||
'change': [payload: Event]
|
||||
'blur': [payload: FocusEvent]
|
||||
'focus': [payload: FocusEvent]
|
||||
export interface InputTagsEmits<T extends InputTagItem> extends TagsInputRootEmits<T> {
|
||||
change: [event: Event]
|
||||
blur: [event: FocusEvent]
|
||||
focus: [event: FocusEvent]
|
||||
}
|
||||
|
||||
type SlotProps<T extends InputTagItem> = (props: { item: T, index: number }) => any
|
||||
@@ -72,6 +71,7 @@ import { useComponentIcons } from '../composables/useComponentIcons'
|
||||
import { useFormField } from '../composables/useFormField'
|
||||
import { tv } from '../utils/tv'
|
||||
import UIcon from './Icon.vue'
|
||||
import UAvatar from './Avatar.vue'
|
||||
|
||||
defineOptions({ inheritAttrs: false })
|
||||
|
||||
|
||||
@@ -245,6 +245,10 @@ function onUpdateOpen(value: boolean) {
|
||||
function isSelectItem(item: SelectItem): item is SelectItemBase {
|
||||
return typeof item === 'object' && item !== null
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
triggerRef
|
||||
})
|
||||
</script>
|
||||
|
||||
<!-- eslint-disable vue/no-template-shadow -->
|
||||
|
||||
@@ -363,6 +363,10 @@ function onSelect(e: Event, item: SelectMenuItem) {
|
||||
function isSelectItem(item: SelectMenuItem): item is _SelectMenuItem {
|
||||
return typeof item === 'object' && item !== null
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
triggerRef
|
||||
})
|
||||
</script>
|
||||
|
||||
<!-- eslint-disable vue/no-template-shadow -->
|
||||
|
||||
@@ -61,13 +61,13 @@ export type TableRow<T> = Row<T>
|
||||
export type TableData = RowData
|
||||
export type TableColumn<T extends TableData, D = unknown> = ColumnDef<T, D>
|
||||
|
||||
export interface TableOptions<T extends TableData> extends Omit<CoreOptions<T>, 'data' | 'columns' | 'getCoreRowModel' | 'state' | 'onStateChange' | 'renderFallbackValue'> {
|
||||
export interface TableOptions<T extends TableData = TableData> extends Omit<CoreOptions<T>, 'data' | 'columns' | 'getCoreRowModel' | 'state' | 'onStateChange' | 'renderFallbackValue'> {
|
||||
state?: CoreOptions<T>['state']
|
||||
onStateChange?: CoreOptions<T>['onStateChange']
|
||||
renderFallbackValue?: CoreOptions<T>['renderFallbackValue']
|
||||
}
|
||||
|
||||
export interface TableProps<T extends TableData> extends TableOptions<T> {
|
||||
export interface TableProps<T extends TableData = TableData> extends TableOptions<T> {
|
||||
/**
|
||||
* The element or component this component should render as.
|
||||
* @defaultValue 'div'
|
||||
@@ -172,7 +172,7 @@ export interface TableProps<T extends TableData> extends TableOptions<T> {
|
||||
type DynamicHeaderSlots<T, K = keyof T> = Record<string, (props: HeaderContext<T, unknown>) => any> & Record<`${K extends string ? K : never}-header`, (props: HeaderContext<T, unknown>) => any>
|
||||
type DynamicCellSlots<T, K = keyof T> = Record<string, (props: CellContext<T, unknown>) => any> & Record<`${K extends string ? K : never}-cell`, (props: CellContext<T, unknown>) => any>
|
||||
|
||||
export type TableSlots<T> = {
|
||||
export type TableSlots<T extends TableData = TableData> = {
|
||||
expanded: (props: { row: Row<T> }) => any
|
||||
empty: (props?: {}) => any
|
||||
loading: (props?: {}) => any
|
||||
@@ -226,7 +226,7 @@ const groupingState = defineModel<GroupingState>('grouping', { default: [] })
|
||||
const expandedState = defineModel<ExpandedState>('expanded', { default: {} })
|
||||
const paginationState = defineModel<PaginationState>('pagination', { default: {} })
|
||||
|
||||
const tableRef = ref<HTMLTableElement>()
|
||||
const tableRef = ref<HTMLTableElement | null>(null)
|
||||
|
||||
const tableApi = useVueTable({
|
||||
...reactiveOmit(props, 'as', 'data', 'columns', 'caption', 'sticky', 'loading', 'loadingColor', 'loadingAnimation', 'class', 'ui'),
|
||||
|
||||
@@ -79,7 +79,8 @@ export type TabsSlots<T extends TabsItem = TabsItem> = {
|
||||
</script>
|
||||
|
||||
<script setup lang="ts" generic="T extends TabsItem">
|
||||
import { computed } from 'vue'
|
||||
import type { ComponentPublicInstance } from 'vue'
|
||||
import { ref, computed } from 'vue'
|
||||
import { TabsRoot, TabsList, TabsIndicator, TabsTrigger, TabsContent, useForwardPropsEmits } from 'reka-ui'
|
||||
import { reactivePick } from '@vueuse/core'
|
||||
import { useAppConfig } from '#imports'
|
||||
@@ -108,6 +109,12 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.tabs || {})
|
||||
size: props.size,
|
||||
orientation: props.orientation
|
||||
}))
|
||||
|
||||
const triggersRef = ref<ComponentPublicInstance[]>([])
|
||||
|
||||
defineExpose({
|
||||
triggersRef
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -117,7 +124,14 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.tabs || {})
|
||||
|
||||
<slot name="list-leading" />
|
||||
|
||||
<TabsTrigger v-for="(item, index) of items" :key="index" :value="item.value || String(index)" :disabled="item.disabled" :class="ui.trigger({ class: [props.ui?.trigger, item.ui?.trigger] })">
|
||||
<TabsTrigger
|
||||
v-for="(item, index) of items"
|
||||
:key="index"
|
||||
:ref="el => (triggersRef[index] = el as ComponentPublicInstance)"
|
||||
:value="item.value || String(index)"
|
||||
:disabled="item.disabled"
|
||||
:class="ui.trigger({ class: [props.ui?.trigger, item.ui?.trigger] })"
|
||||
>
|
||||
<slot name="leading" :item="item" :index="index">
|
||||
<UIcon v-if="item.icon" :name="item.icon" :class="ui.leadingIcon({ class: [props.ui?.leadingIcon, item.ui?.leadingIcon] })" />
|
||||
<UAvatar v-else-if="item.avatar" :size="((props.ui?.leadingAvatarSize || ui.leadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" :class="ui.leadingAvatar({ class: [props.ui?.leadingAvatar, item.ui?.leadingAvatar] })" />
|
||||
|
||||
@@ -41,6 +41,7 @@ export interface TimelineProps<T extends TimelineItem = TimelineItem> {
|
||||
*/
|
||||
orientation?: Timeline['variants']['orientation']
|
||||
defaultValue?: string | number
|
||||
reverse?: boolean
|
||||
class?: any
|
||||
ui?: Timeline['slots']
|
||||
}
|
||||
@@ -75,16 +76,34 @@ const appConfig = useAppConfig() as Timeline['AppConfig']
|
||||
const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.timeline || {}) })({
|
||||
orientation: props.orientation,
|
||||
size: props.size,
|
||||
color: props.color
|
||||
color: props.color,
|
||||
reverse: props.reverse
|
||||
}))
|
||||
|
||||
const currentStepIndex = computed(() => {
|
||||
const value = modelValue.value ?? props.defaultValue
|
||||
|
||||
return ((typeof value === 'string')
|
||||
? props.items.findIndex(item => item.value === value)
|
||||
: value) ?? -1
|
||||
if (typeof value === 'string') {
|
||||
return props.items.findIndex(item => item.value === value) ?? -1
|
||||
}
|
||||
|
||||
if (props.reverse) {
|
||||
return value != null ? props.items.length - 1 - value : -1
|
||||
} else {
|
||||
return value ?? -1
|
||||
}
|
||||
})
|
||||
|
||||
function getItemState(index: number): 'active' | 'completed' | undefined {
|
||||
if (currentStepIndex.value === -1) return undefined
|
||||
if (index === currentStepIndex.value) return 'active'
|
||||
|
||||
if (props.reverse) {
|
||||
return index > currentStepIndex.value ? 'completed' : undefined
|
||||
} else {
|
||||
return index < currentStepIndex.value ? 'completed' : undefined
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -93,7 +112,7 @@ const currentStepIndex = computed(() => {
|
||||
v-for="(item, index) in items"
|
||||
:key="item.value ?? index"
|
||||
:class="ui.item({ class: [props.ui?.item, item.ui?.item, item.class] })"
|
||||
:data-state="index < currentStepIndex ? 'completed' : index === currentStepIndex ? 'active' : undefined"
|
||||
:data-state="getItemState(index)"
|
||||
>
|
||||
<div :class="ui.container({ class: [props.ui?.container, item.ui?.container] })">
|
||||
<UAvatar :size="size" :icon="item.icon" v-bind="typeof item.avatar === 'object' ? item.avatar : {}" :class="ui.indicator({ class: [props.ui?.indicator, item.ui?.indicator] })" :ui="{ icon: 'text-inherit', fallback: 'text-inherit' }">
|
||||
|
||||
@@ -25,7 +25,8 @@ export default defineLocale<Messages>({
|
||||
placeholder: 'اكتب أمرًا أو ابحث...',
|
||||
noMatch: 'لا توجد نتائج مطابقة',
|
||||
noData: 'لا توجد بيانات',
|
||||
close: 'إغلاق'
|
||||
close: 'إغلاق',
|
||||
back: 'رجوع'
|
||||
},
|
||||
selectMenu: {
|
||||
noMatch: 'لا توجد نتائج مطابقة',
|
||||
|
||||
@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
|
||||
placeholder: 'Əmr daxil edin və ya axtarın...',
|
||||
noMatch: 'Uyğun məlumat tapılmadı',
|
||||
noData: 'Məlumat yoxdur',
|
||||
close: 'Bağla'
|
||||
close: 'Bağla',
|
||||
back: 'Geri'
|
||||
},
|
||||
selectMenu: {
|
||||
noMatch: 'Uyğun məlumat tapılmadı',
|
||||
|
||||
@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
|
||||
placeholder: 'Въведете команда или потърсете...',
|
||||
noMatch: 'Няма съвпадение на данни',
|
||||
noData: 'Няма данни',
|
||||
close: 'Затворете'
|
||||
close: 'Затворете',
|
||||
back: 'Назад'
|
||||
},
|
||||
selectMenu: {
|
||||
noMatch: 'Няма съвпадение на данни',
|
||||
|
||||
@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
|
||||
placeholder: 'কমান্ড টাইপ করুন বা অনুসন্ধান করুন...',
|
||||
noMatch: 'কোন মিল পাওয়া যায়নি',
|
||||
noData: 'কোন তথ্য নেই',
|
||||
close: 'বন্ধ করুন'
|
||||
close: 'বন্ধ করুন',
|
||||
back: 'পেছনে'
|
||||
},
|
||||
selectMenu: {
|
||||
noMatch: 'কোন মিল পাওয়া যায়নি',
|
||||
|
||||
@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
|
||||
placeholder: 'Escriu una ordre o cerca...',
|
||||
noMatch: 'No hi ha dades coincidents',
|
||||
noData: 'Sense dades',
|
||||
close: 'Tancar'
|
||||
close: 'Tancar',
|
||||
back: 'Enrere'
|
||||
},
|
||||
selectMenu: {
|
||||
noMatch: 'No hi ha dades coincidents',
|
||||
|
||||
@@ -25,7 +25,8 @@ export default defineLocale<Messages>({
|
||||
placeholder: 'فەرمانێک بنووسە یان بگەڕێ...',
|
||||
noMatch: 'هیچ ئەنجامێک نەدۆزرایەوە',
|
||||
noData: 'هیچ داتایەک نییە',
|
||||
close: 'داخستن'
|
||||
close: 'داخستن',
|
||||
back: 'گەڕانەوە'
|
||||
},
|
||||
selectMenu: {
|
||||
noMatch: 'هیچ ئەنجامێک نەدۆزرایەوە',
|
||||
|
||||
@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
|
||||
placeholder: 'Zadejte příkaz nebo hledejte...',
|
||||
noMatch: 'Žádná shoda',
|
||||
noData: 'Žádná data',
|
||||
close: 'Zavřít'
|
||||
close: 'Zavřít',
|
||||
back: 'Zpět'
|
||||
},
|
||||
selectMenu: {
|
||||
noMatch: 'Žádná shoda',
|
||||
|
||||
@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
|
||||
placeholder: 'Skriv en kommando eller søg...',
|
||||
noMatch: 'Ingen matchende data',
|
||||
noData: 'Ingen data',
|
||||
close: 'Luk'
|
||||
close: 'Luk',
|
||||
back: 'Tilbage'
|
||||
},
|
||||
selectMenu: {
|
||||
noMatch: 'Ingen matchende data',
|
||||
|
||||
@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
|
||||
placeholder: 'Geben Sie einen Befehl ein oder suchen Sie...',
|
||||
noMatch: 'Nichts gefunden',
|
||||
noData: 'Keine Daten',
|
||||
close: 'Schließen'
|
||||
close: 'Schließen',
|
||||
back: 'Zurück'
|
||||
},
|
||||
selectMenu: {
|
||||
noMatch: 'Nichts gefunden',
|
||||
|
||||
@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
|
||||
placeholder: 'Πληκτρολογήστε μια εντολή ή αναζητήστε...',
|
||||
noMatch: 'Δεν βρέθηκαν δεδομένα',
|
||||
noData: 'Δεν υπάρχουν δεδομένα',
|
||||
close: 'Κλείσιμο'
|
||||
close: 'Κλείσιμο',
|
||||
back: 'Πίσω'
|
||||
},
|
||||
selectMenu: {
|
||||
noMatch: 'Δεν βρέθηκαν δεδομένα',
|
||||
|
||||
@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
|
||||
placeholder: 'Type a command or search...',
|
||||
noMatch: 'No matching data',
|
||||
noData: 'No data',
|
||||
close: 'Close'
|
||||
close: 'Close',
|
||||
back: 'Back'
|
||||
},
|
||||
selectMenu: {
|
||||
noMatch: 'No matching data',
|
||||
|
||||
@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
|
||||
placeholder: 'Escribe un comando o busca...',
|
||||
noMatch: 'No hay datos coincidentes',
|
||||
noData: 'Sin datos',
|
||||
close: 'Cerrar'
|
||||
close: 'Cerrar',
|
||||
back: 'Atrás'
|
||||
},
|
||||
selectMenu: {
|
||||
noMatch: 'No hay datos coincidentes',
|
||||
|
||||
@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
|
||||
placeholder: 'Sisesta käsk või otsi...',
|
||||
noMatch: 'Pole vastavaid andmeid',
|
||||
noData: 'Pole andmeid',
|
||||
close: 'Sulge'
|
||||
close: 'Sulge',
|
||||
back: 'Tagasi'
|
||||
},
|
||||
selectMenu: {
|
||||
noMatch: 'Pole vastavaid andmeid',
|
||||
|
||||
@@ -25,7 +25,8 @@ export default defineLocale<Messages>({
|
||||
placeholder: 'یک دستور وارد کنید یا جستجو کنید...',
|
||||
noMatch: 'دادهای یافت نشد',
|
||||
noData: 'دادهای موجود نیست',
|
||||
close: 'بستن'
|
||||
close: 'بستن',
|
||||
back: 'بازگشت'
|
||||
},
|
||||
selectMenu: {
|
||||
noMatch: 'دادهای یافت نشد',
|
||||
|
||||
@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
|
||||
placeholder: 'Kirjoita komento tai hae...',
|
||||
noMatch: 'Ei vastaavia tietoja',
|
||||
noData: 'Ei tietoja',
|
||||
close: 'Sulje'
|
||||
close: 'Sulje',
|
||||
back: 'Takaisin'
|
||||
},
|
||||
selectMenu: {
|
||||
noMatch: 'Ei vastaavia tietoja',
|
||||
|
||||
@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
|
||||
placeholder: 'Tapez une commande ou recherchez...',
|
||||
noMatch: 'Aucune donnée correspondante',
|
||||
noData: 'Aucune donnée',
|
||||
close: 'Fermer'
|
||||
close: 'Fermer',
|
||||
back: 'Retour'
|
||||
},
|
||||
selectMenu: {
|
||||
noMatch: 'Aucune donnée correspondante',
|
||||
|
||||
@@ -25,7 +25,8 @@ export default defineLocale<Messages>({
|
||||
placeholder: 'הקלד פקודה...',
|
||||
noMatch: 'לא נמצאה התאמה',
|
||||
noData: 'אין נתונים זמינים',
|
||||
close: 'סגור'
|
||||
close: 'סגור',
|
||||
back: 'חזור'
|
||||
},
|
||||
selectMenu: {
|
||||
noMatch: 'לא נמצאה התאמה',
|
||||
|
||||
@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
|
||||
placeholder: 'एक आदेश या खोज टाइप करें...',
|
||||
noMatch: 'कोई मेल खाता डेटा नहीं',
|
||||
noData: 'कोई डेटा नहीं',
|
||||
close: 'बंद करें'
|
||||
close: 'बंद करें',
|
||||
back: 'वापस'
|
||||
},
|
||||
selectMenu: {
|
||||
noMatch: 'कोई मेल खाता डेटा नहीं',
|
||||
|
||||
@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
|
||||
placeholder: 'Írjon be egy parancsot vagy keressen...',
|
||||
noMatch: 'Nincs találat',
|
||||
noData: 'Nincs adat',
|
||||
close: 'Bezárás'
|
||||
close: 'Bezárás',
|
||||
back: 'Vissza'
|
||||
},
|
||||
selectMenu: {
|
||||
noMatch: 'Nincs találat',
|
||||
|
||||
@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
|
||||
placeholder: 'Մուտքագրեք հրաման կամ որոնեք...',
|
||||
noMatch: 'Համընկնումներ չեն գտնվել',
|
||||
noData: 'Տվյալներ չկան',
|
||||
close: 'Փակել'
|
||||
close: 'Փակել',
|
||||
back: 'Հետ'
|
||||
},
|
||||
selectMenu: {
|
||||
noMatch: 'Համընկնումներ չեն գտնվել',
|
||||
|
||||
@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
|
||||
placeholder: 'Ketik perintah atau cari...',
|
||||
noMatch: 'Tidak ada data yang cocok',
|
||||
noData: 'Tidak ada data',
|
||||
close: 'Tutup'
|
||||
close: 'Tutup',
|
||||
back: 'Kembali'
|
||||
},
|
||||
selectMenu: {
|
||||
noMatch: 'Tidak ada data yang cocok',
|
||||
|
||||
@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
|
||||
placeholder: 'Digita un comando o cerca...',
|
||||
noMatch: 'Nessun dato corrispondente',
|
||||
noData: 'Nessun dato',
|
||||
close: 'Chiudi'
|
||||
close: 'Chiudi',
|
||||
back: 'Indietro'
|
||||
},
|
||||
selectMenu: {
|
||||
noMatch: 'Nessun dato corrispondente',
|
||||
|
||||
@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
|
||||
placeholder: 'コマンドを入力するか検索...',
|
||||
noMatch: '一致するデータがありません',
|
||||
noData: 'データがありません',
|
||||
close: '閉じる'
|
||||
close: '閉じる',
|
||||
back: '戻る'
|
||||
},
|
||||
selectMenu: {
|
||||
noMatch: '一致するデータがありません',
|
||||
|
||||
@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
|
||||
placeholder: 'Команда енгізіңіз немесе іздеңіз...',
|
||||
noMatch: 'Сәйкес келетін деректер жоқ',
|
||||
noData: 'Деректер жоқ',
|
||||
close: 'Жабу'
|
||||
close: 'Жабу',
|
||||
back: 'Артқа'
|
||||
},
|
||||
selectMenu: {
|
||||
noMatch: 'Сәйкес келетін деректер жоқ',
|
||||
|
||||
@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
|
||||
placeholder: 'វាយពាក្យបញ្ជា ឬស្វែងរក...',
|
||||
noMatch: 'មិនមានទិន្នន័យដែលត្រូវគ្នាទេ',
|
||||
noData: 'មិនមានទិន្នន័យ',
|
||||
close: 'បិទ'
|
||||
close: 'បិទ',
|
||||
back: 'ត្រឡប់'
|
||||
},
|
||||
selectMenu: {
|
||||
noMatch: 'មិនមានទិន្នន័យដែលត្រូវគ្នាទេ',
|
||||
|
||||
@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
|
||||
placeholder: '명령을 입력하거나 검색...',
|
||||
noMatch: '일치하는 데이터가 없습니다.',
|
||||
noData: '데이터가 없습니다.',
|
||||
close: '닫기'
|
||||
close: '닫기',
|
||||
back: '뒤로'
|
||||
},
|
||||
selectMenu: {
|
||||
noMatch: '일치하는 데이터가 없습니다.',
|
||||
|
||||
@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
|
||||
placeholder: 'Буйрук киргизиңиз же издөө…',
|
||||
noMatch: 'Эч нерсе табылган жок',
|
||||
noData: 'Маалымат жок',
|
||||
close: 'Жабуу'
|
||||
close: 'Жабуу',
|
||||
back: 'Артка'
|
||||
},
|
||||
selectMenu: {
|
||||
noMatch: 'Сүйлөшкөн маалыматтар жок',
|
||||
|
||||
@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
|
||||
placeholder: 'Tippt e Befeel oder sicht...',
|
||||
noMatch: 'Keng entspriechend Donnéeën',
|
||||
noData: 'Keng Donnéeën',
|
||||
close: 'Zoumaachen'
|
||||
close: 'Zoumaachen',
|
||||
back: 'Zréck'
|
||||
},
|
||||
selectMenu: {
|
||||
noMatch: 'Keng entspriechend Donnéeën',
|
||||
|
||||
@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
|
||||
placeholder: 'Įveskite komandą arba ieškokite...',
|
||||
noMatch: 'Nėra atitinkančių duomenų',
|
||||
noData: 'Nėra duomenų',
|
||||
close: 'Uždaryti'
|
||||
close: 'Uždaryti',
|
||||
back: 'Atgal'
|
||||
},
|
||||
selectMenu: {
|
||||
noMatch: 'Nėra atitinkančių duomenų',
|
||||
|
||||
@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
|
||||
placeholder: 'Комманд бичих эсвэл хайлт хийх...',
|
||||
noMatch: 'Тохирох мэдээлэл олдсонгүй',
|
||||
noData: 'Мэдээлэл байхгүй',
|
||||
close: 'Хаах'
|
||||
close: 'Хаах',
|
||||
back: 'Буцах'
|
||||
},
|
||||
selectMenu: {
|
||||
noMatch: 'Тохирох мэдээлэл олдсонгүй',
|
||||
|
||||
@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
|
||||
placeholder: 'Taip arahan atau carian...',
|
||||
noMatch: 'Tiada data yang sepadan',
|
||||
noData: 'Tiada data',
|
||||
close: 'Tutup'
|
||||
close: 'Tutup',
|
||||
back: 'Kembali'
|
||||
},
|
||||
selectMenu: {
|
||||
noMatch: 'Tiada data yang sepadan',
|
||||
|
||||
@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
|
||||
placeholder: 'Skriv inn en kommando eller søk...',
|
||||
noMatch: 'Ingen samsvarende data',
|
||||
noData: 'Ingen data',
|
||||
close: 'Lukk'
|
||||
close: 'Lukk',
|
||||
back: 'Tilbake'
|
||||
},
|
||||
selectMenu: {
|
||||
noMatch: 'Ingen samsvarende data',
|
||||
|
||||
@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
|
||||
placeholder: 'Typ een commando of zoek...',
|
||||
noMatch: 'Geen overeenkomende gegevens',
|
||||
noData: 'Geen gegevens',
|
||||
close: 'Sluiten'
|
||||
close: 'Sluiten',
|
||||
back: 'Terug'
|
||||
},
|
||||
selectMenu: {
|
||||
noMatch: 'Geen overeenkomende gegevens',
|
||||
|
||||
@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
|
||||
placeholder: 'Wpisz polecenie lub wyszukaj...',
|
||||
noMatch: 'Brak pasujących danych',
|
||||
noData: 'Brak danych',
|
||||
close: 'Zamknij'
|
||||
close: 'Zamknij',
|
||||
back: 'Wstecz'
|
||||
},
|
||||
selectMenu: {
|
||||
noMatch: 'Brak pasujących danych',
|
||||
|
||||
@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
|
||||
placeholder: 'Digite um comando ou pesquise...',
|
||||
noMatch: 'Nenhum dado correspondente',
|
||||
noData: 'Sem dados',
|
||||
close: 'Fechar'
|
||||
close: 'Fechar',
|
||||
back: 'Voltar'
|
||||
},
|
||||
selectMenu: {
|
||||
noMatch: 'Nenhum dado correspondente',
|
||||
|
||||
@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
|
||||
placeholder: 'Digite um comando ou pesquise...',
|
||||
noMatch: 'Nenhum dado correspondente',
|
||||
noData: 'Nenhum dado',
|
||||
close: 'Fechar'
|
||||
close: 'Fechar',
|
||||
back: 'Voltar'
|
||||
},
|
||||
selectMenu: {
|
||||
noMatch: 'Nenhum dado correspondente',
|
||||
|
||||
@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
|
||||
placeholder: 'Tastează o comandă sau caută...',
|
||||
noMatch: 'Nu există date corespunzătoare',
|
||||
noData: 'Nu există date',
|
||||
close: 'Închide'
|
||||
close: 'Închide',
|
||||
back: 'Înapoi'
|
||||
},
|
||||
selectMenu: {
|
||||
noMatch: 'Nu există date corespunzătoare',
|
||||
|
||||
@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
|
||||
placeholder: 'Введите команду или выполните поиск...',
|
||||
noMatch: 'Совпадений не найдено',
|
||||
noData: 'Нет данных',
|
||||
close: 'Закрыть'
|
||||
close: 'Закрыть',
|
||||
back: 'Назад'
|
||||
},
|
||||
selectMenu: {
|
||||
noMatch: 'Совпадений не найдено',
|
||||
|
||||
@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
|
||||
placeholder: 'Zadajte príkaz alebo vyhľadajte...',
|
||||
noMatch: 'Žiadna zhoda',
|
||||
noData: 'Žiadne dáta',
|
||||
close: 'Zatvoriť'
|
||||
close: 'Zavrieť',
|
||||
back: 'Späť'
|
||||
},
|
||||
selectMenu: {
|
||||
noMatch: 'Žiadna zhoda',
|
||||
|
||||
@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
|
||||
placeholder: 'Vpiši ukaz ali išči...',
|
||||
noMatch: 'Ni ujemanj',
|
||||
noData: 'Ni podatkov',
|
||||
close: 'Zapri'
|
||||
close: 'Zapri',
|
||||
back: 'Nazaj'
|
||||
},
|
||||
selectMenu: {
|
||||
noMatch: 'Ni ujemanj',
|
||||
|
||||
@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
|
||||
placeholder: 'Skriv ett kommando eller sök...',
|
||||
noMatch: 'Inga matchande data',
|
||||
noData: 'Inga data',
|
||||
close: 'Stäng'
|
||||
close: 'Stäng',
|
||||
back: 'Tillbaka'
|
||||
},
|
||||
selectMenu: {
|
||||
noMatch: 'Inga matchande data',
|
||||
|
||||
@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
|
||||
placeholder: 'พิมพ์คำสั่งหรือค้นหา...',
|
||||
noMatch: 'ไม่พบข้อมูลที่ตรงกัน',
|
||||
noData: 'ไม่มีข้อมูล',
|
||||
close: 'ปิด'
|
||||
close: 'ปิด',
|
||||
back: 'ย้อนกลับ'
|
||||
},
|
||||
selectMenu: {
|
||||
noMatch: 'ไม่พบข้อมูลที่ตรงกัน',
|
||||
|
||||
@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
|
||||
placeholder: 'Фармонро нависед ё ҷустуҷӯ кунед...',
|
||||
noMatch: 'Маълумоти мувофиқ ёфт нашуд',
|
||||
noData: 'Маълумот нест',
|
||||
close: 'Бастан'
|
||||
close: 'Бастан',
|
||||
back: 'Бозгашт'
|
||||
},
|
||||
selectMenu: {
|
||||
noMatch: 'Маълумоти мувофиқ ёфт нашуд',
|
||||
|
||||
@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
|
||||
placeholder: 'Bir komut yazın veya arama yapın...',
|
||||
noMatch: 'Eşleşen veri yok',
|
||||
noData: 'Veri yok',
|
||||
close: 'Kapat'
|
||||
close: 'Kapat',
|
||||
back: 'Geri'
|
||||
},
|
||||
selectMenu: {
|
||||
noMatch: 'Eşleşen veri yok',
|
||||
|
||||
@@ -25,7 +25,8 @@ export default defineLocale<Messages>({
|
||||
placeholder: 'بۇيرۇق كىرگۈزۈڭ ياكى ئىزدەڭ...',
|
||||
noMatch: 'ماس كېلىدىغان سانلىق مەلۇمات يوق',
|
||||
noData: 'سانلىق مەلۇمات يوق',
|
||||
close: 'تاقاش'
|
||||
close: 'تاقاش',
|
||||
back: 'قايتىش'
|
||||
},
|
||||
selectMenu: {
|
||||
noMatch: 'ماس كېلىدىغان سانلىق مەلۇمات يوق',
|
||||
|
||||
@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
|
||||
placeholder: 'Введіть команду або шукайте...',
|
||||
noMatch: 'Збігів не знайдено',
|
||||
noData: 'Немає даних',
|
||||
close: 'Закрити'
|
||||
close: 'Закрити',
|
||||
back: 'Назад'
|
||||
},
|
||||
selectMenu: {
|
||||
noMatch: 'Збігів не знайдено',
|
||||
|
||||
@@ -25,7 +25,8 @@ export default defineLocale<Messages>({
|
||||
placeholder: 'کمانڈ ٹائپ کریں یا تلاش کریں...',
|
||||
noMatch: 'کوئی ملتا جلتا ڈیٹا نہیں ملا',
|
||||
noData: 'کوئی ڈیٹا نہیں',
|
||||
close: 'بند کریں'
|
||||
close: 'بند کریں',
|
||||
back: 'واپس'
|
||||
},
|
||||
selectMenu: {
|
||||
noMatch: 'کوئی ملتا جلتا ڈیٹا نہیں ملا',
|
||||
|
||||
@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
|
||||
placeholder: 'Buyruq kiriting yoki qidiring...',
|
||||
noMatch: 'Mos keluvchi natija topilmadi',
|
||||
noData: 'Maʼlumot yoʻq',
|
||||
close: 'Yopish'
|
||||
close: 'Yopish',
|
||||
back: 'Orqaga'
|
||||
},
|
||||
selectMenu: {
|
||||
noMatch: 'Mos keluvchi natija topilmadi',
|
||||
|
||||
@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
|
||||
placeholder: 'Nhập lệnh hoặc tìm kiếm...',
|
||||
noMatch: 'Không có kết quả phù hợp',
|
||||
noData: 'Không có dữ liệu',
|
||||
close: 'Đóng'
|
||||
close: 'Đóng',
|
||||
back: 'Quay lại'
|
||||
},
|
||||
selectMenu: {
|
||||
noMatch: 'Không có kết quả phù hợp',
|
||||
|
||||
@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
|
||||
placeholder: '输入命令或搜索...',
|
||||
noMatch: '没有匹配的数据',
|
||||
noData: '没有数据',
|
||||
close: '关闭'
|
||||
close: '关闭',
|
||||
back: '返回'
|
||||
},
|
||||
selectMenu: {
|
||||
noMatch: '没有匹配的数据',
|
||||
|
||||
@@ -24,7 +24,8 @@ export default defineLocale<Messages>({
|
||||
placeholder: '輸入命令或搜尋...',
|
||||
noMatch: '沒有相符的資料',
|
||||
noData: '沒有資料',
|
||||
close: '關閉'
|
||||
close: '關閉',
|
||||
back: '返回'
|
||||
},
|
||||
selectMenu: {
|
||||
noMatch: '沒有相符的資料',
|
||||
|
||||
@@ -19,6 +19,7 @@ export type Messages = {
|
||||
noMatch: string
|
||||
noData: string
|
||||
close: string
|
||||
back: string
|
||||
}
|
||||
selectMenu: {
|
||||
noMatch: string
|
||||
|
||||
@@ -5,6 +5,7 @@ export default (options: Required<ModuleOptions>) => ({
|
||||
root: 'flex flex-col min-h-0 min-w-0 divide-y divide-default',
|
||||
input: '[&>input]:h-12',
|
||||
close: '',
|
||||
back: 'p-0',
|
||||
content: 'relative overflow-hidden flex flex-col',
|
||||
viewport: 'relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1 focus:outline-none',
|
||||
group: 'p-1 isolate',
|
||||
|
||||
@@ -18,6 +18,14 @@ export default {
|
||||
lg: { root: 'text-sm' },
|
||||
xl: { root: 'text-base' }
|
||||
},
|
||||
|
||||
variant: {
|
||||
inline: {
|
||||
root: 'inline-flex',
|
||||
label: 'mt-1.5 mx-2',
|
||||
container: 'mt-0'
|
||||
}
|
||||
},
|
||||
required: {
|
||||
true: {
|
||||
label: `after:content-['*'] after:ms-0.5 after:text-error`
|
||||
|
||||
@@ -29,12 +29,11 @@ export default (options: Required<ModuleOptions>) => ({
|
||||
|
||||
color: {
|
||||
...Object.fromEntries((options.theme.colors || []).map((color: string) => [color, {
|
||||
indicator: `group-data-[state=completed]:bg-${color} group-data-[state=active]:bg-${color}`,
|
||||
separator: `group-data-[state=completed]:bg-${color}`
|
||||
indicator: `group-data-[state=completed]:bg-${color} group-data-[state=active]:bg-${color}`
|
||||
|
||||
}])),
|
||||
neutral: {
|
||||
indicator: 'group-data-[state=completed]:bg-inverted group-data-[state=active]:bg-inverted',
|
||||
separator: 'group-data-[state=completed]:bg-inverted'
|
||||
indicator: 'group-data-[state=completed]:bg-inverted group-data-[state=active]:bg-inverted'
|
||||
}
|
||||
},
|
||||
|
||||
@@ -48,10 +47,38 @@ export default (options: Required<ModuleOptions>) => ({
|
||||
'xl': '',
|
||||
'2xl': '',
|
||||
'3xl': ''
|
||||
},
|
||||
|
||||
reverse: {
|
||||
true: ''
|
||||
}
|
||||
},
|
||||
|
||||
compoundVariants: [{
|
||||
compoundVariants: [...(options.theme.colors || []).map((color: string) => ({
|
||||
color,
|
||||
reverse: false,
|
||||
class: {
|
||||
separator: `group-data-[state=completed]:bg-${color}`
|
||||
}
|
||||
})), ...(options.theme.colors || []).map((color: string) => ({
|
||||
color,
|
||||
reverse: true,
|
||||
class: {
|
||||
separator: `group-data-[state=active]:bg-${color} group-data-[state=completed]:bg-${color}`
|
||||
}
|
||||
})), {
|
||||
color: 'neutral',
|
||||
reverse: false,
|
||||
class: {
|
||||
separator: 'group-data-[state=completed]:bg-inverted'
|
||||
}
|
||||
}, {
|
||||
color: 'neutral',
|
||||
reverse: true,
|
||||
class: {
|
||||
separator: 'group-data-[state=active]:bg-inverted group-data-[state=completed]:bg-inverted'
|
||||
}
|
||||
}, {
|
||||
orientation: 'horizontal',
|
||||
size: '3xs',
|
||||
class: {
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { describe, it, expect } from 'vitest'
|
||||
import CommandPalette, { type CommandPaletteProps } from '../../src/runtime/components/CommandPalette.vue'
|
||||
import CommandPalette, { type CommandPaletteProps, type CommandPaletteSlots } from '../../src/runtime/components/CommandPalette.vue'
|
||||
import ComponentRender from '../component-render'
|
||||
|
||||
describe('CommandPalette', () => {
|
||||
@@ -89,7 +89,7 @@ describe('CommandPalette', () => {
|
||||
['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' } }]
|
||||
])('renders %s correctly', async (nameOrHtml: string, options: { props?: CommandPaletteProps<typeof groups[number], typeof groups[number]['items'][number]>, slots?: Partial<any> }) => {
|
||||
])('renders %s correctly', async (nameOrHtml: string, options: { props?: CommandPaletteProps, slots?: Partial<CommandPaletteSlots> }) => {
|
||||
const html = await ComponentRender(nameOrHtml, options, CommandPalette)
|
||||
expect(html).toMatchSnapshot()
|
||||
})
|
||||
|
||||
@@ -162,7 +162,7 @@ describe('Table', () => {
|
||||
['with empty slot', { props: { columns }, slots: { empty: () => 'Empty slot' } }],
|
||||
['with loading slot', { props: { columns, loading: true }, slots: { loading: () => 'Loading slot' } }],
|
||||
['with caption slot', { props, slots: { caption: () => 'Caption slot' } }]
|
||||
])('renders %s correctly', async (nameOrHtml: string, options: { props?: TableProps<typeof data[number]>, slots?: Partial<TableSlots<typeof data[number]>> }) => {
|
||||
])('renders %s correctly', async (nameOrHtml: string, options: { props?: TableProps, slots?: Partial<TableSlots> }) => {
|
||||
const html = await ComponentRender(nameOrHtml, options, Table)
|
||||
expect(html).toMatchSnapshot()
|
||||
})
|
||||
|
||||
@@ -29,7 +29,7 @@ describe('Timeline', () => {
|
||||
title: 'Testing & Deployment',
|
||||
description: 'QA testing and performance optimization. Deployed the application to production.',
|
||||
icon: 'i-lucide-check-circle',
|
||||
value: 'deployment'
|
||||
value: 'testing-and-deployment'
|
||||
}]
|
||||
|
||||
const props = { items }
|
||||
@@ -37,14 +37,17 @@ describe('Timeline', () => {
|
||||
it.each([
|
||||
// Props
|
||||
['with items', { props }],
|
||||
['with modelValue', { props: { ...props, modelValue: 'assigned' } }],
|
||||
['with defaultValue', { props: { ...props, defaultValue: 'assigned' } }],
|
||||
['with modelValue', { props: { ...props, modelValue: 'design' } }],
|
||||
['with defaultValue', { props: { ...props, defaultValue: 'design' } }],
|
||||
['with neutral color', { props: { ...props, color: 'neutral' } }],
|
||||
...sizes.map((size: string) => [`with size ${size} horizontal`, { props: { ...props, size } }]),
|
||||
...sizes.map((size: string) => [`with size ${size} vertical`, { props: { ...props, size, orientation: 'vertical' } }]),
|
||||
['with as', { props: { ...props, as: 'section' } }],
|
||||
['with class', { props: { ...props, class: 'gap-8' } }],
|
||||
['with ui', { props: { ...props, ui: { title: 'font-bold' } } }],
|
||||
['with reverse', { props: { ...props, reverse: true } }],
|
||||
['with reverse and modelValue', { props: { ...props, reverse: true, modelValue: 'design' } }],
|
||||
['with reverse and defaultValue', { props: { ...props, reverse: true, defaultValue: 'design' } }],
|
||||
// Slots
|
||||
['with indicator slot', { props, slots: { indicator: () => 'Indicator slot' } }],
|
||||
['with date slot', { props, slots: { date: () => 'Date slot' } }],
|
||||
|
||||
@@ -137,7 +137,7 @@ exports[`Timeline > renders with date slot correctly 1`] = `
|
||||
|
||||
exports[`Timeline > renders with defaultValue correctly 1`] = `
|
||||
"<div data-orientation="vertical" class="flex gap-1.5 flex-col">
|
||||
<div class="group relative flex flex-1 gap-3">
|
||||
<div class="group relative flex flex-1 gap-3" data-state="completed">
|
||||
<div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><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-inherit"></svg></span>
|
||||
<div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
|
||||
</div>
|
||||
@@ -147,7 +147,7 @@ exports[`Timeline > renders with defaultValue correctly 1`] = `
|
||||
<div class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="group relative flex flex-1 gap-3">
|
||||
<div class="group relative flex flex-1 gap-3" data-state="active">
|
||||
<div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><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-inherit"></svg></span>
|
||||
<div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
|
||||
</div>
|
||||
@@ -317,7 +317,7 @@ exports[`Timeline > renders with items correctly 1`] = `
|
||||
|
||||
exports[`Timeline > renders with modelValue correctly 1`] = `
|
||||
"<div data-orientation="vertical" class="flex gap-1.5 flex-col">
|
||||
<div class="group relative flex flex-1 gap-3">
|
||||
<div class="group relative flex flex-1 gap-3" data-state="completed">
|
||||
<div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><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-inherit"></svg></span>
|
||||
<div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
|
||||
</div>
|
||||
@@ -327,7 +327,7 @@ exports[`Timeline > renders with modelValue correctly 1`] = `
|
||||
<div class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="group relative flex flex-1 gap-3">
|
||||
<div class="group relative flex flex-1 gap-3" data-state="active">
|
||||
<div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><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-inherit"></svg></span>
|
||||
<div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
|
||||
</div>
|
||||
@@ -405,6 +405,141 @@ exports[`Timeline > renders with neutral color correctly 1`] = `
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`Timeline > renders with reverse and defaultValue correctly 1`] = `
|
||||
"<div data-orientation="vertical" class="flex gap-1.5 flex-col">
|
||||
<div class="group relative flex flex-1 gap-3">
|
||||
<div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><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-inherit"></svg></span>
|
||||
<div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=active]:bg-primary group-data-[state=completed]:bg-primary"></div>
|
||||
</div>
|
||||
<div class="w-full mt-1.5 pb-6.5">
|
||||
<div class="text-dimmed text-xs/5">Mar 15, 2025</div>
|
||||
<div class="font-medium text-highlighted text-sm">Project Kickoff</div>
|
||||
<div class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="group relative flex flex-1 gap-3" data-state="active">
|
||||
<div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><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-inherit"></svg></span>
|
||||
<div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=active]:bg-primary group-data-[state=completed]:bg-primary"></div>
|
||||
</div>
|
||||
<div class="w-full mt-1.5 pb-6.5">
|
||||
<div class="text-dimmed text-xs/5">Mar 22, 2025</div>
|
||||
<div class="font-medium text-highlighted text-sm">Design Phase</div>
|
||||
<div class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="group relative flex flex-1 gap-3" data-state="completed">
|
||||
<div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><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-inherit"></svg></span>
|
||||
<div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=active]:bg-primary group-data-[state=completed]:bg-primary"></div>
|
||||
</div>
|
||||
<div class="w-full mt-1.5 pb-6.5">
|
||||
<div class="text-dimmed text-xs/5">Mar 29, 2025</div>
|
||||
<div class="font-medium text-highlighted text-sm">Development Sprint</div>
|
||||
<div class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="group relative flex flex-1 gap-3" data-state="completed">
|
||||
<div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><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-inherit"></svg></span>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
<div class="w-full mt-1.5 pb-6.5">
|
||||
<div class="text-dimmed text-xs/5">Apr 5, 2025</div>
|
||||
<div class="font-medium text-highlighted text-sm">Testing & Deployment</div>
|
||||
<div class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`Timeline > renders with reverse and modelValue correctly 1`] = `
|
||||
"<div data-orientation="vertical" class="flex gap-1.5 flex-col">
|
||||
<div class="group relative flex flex-1 gap-3">
|
||||
<div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><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-inherit"></svg></span>
|
||||
<div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=active]:bg-primary group-data-[state=completed]:bg-primary"></div>
|
||||
</div>
|
||||
<div class="w-full mt-1.5 pb-6.5">
|
||||
<div class="text-dimmed text-xs/5">Mar 15, 2025</div>
|
||||
<div class="font-medium text-highlighted text-sm">Project Kickoff</div>
|
||||
<div class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="group relative flex flex-1 gap-3" data-state="active">
|
||||
<div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><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-inherit"></svg></span>
|
||||
<div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=active]:bg-primary group-data-[state=completed]:bg-primary"></div>
|
||||
</div>
|
||||
<div class="w-full mt-1.5 pb-6.5">
|
||||
<div class="text-dimmed text-xs/5">Mar 22, 2025</div>
|
||||
<div class="font-medium text-highlighted text-sm">Design Phase</div>
|
||||
<div class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="group relative flex flex-1 gap-3" data-state="completed">
|
||||
<div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><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-inherit"></svg></span>
|
||||
<div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=active]:bg-primary group-data-[state=completed]:bg-primary"></div>
|
||||
</div>
|
||||
<div class="w-full mt-1.5 pb-6.5">
|
||||
<div class="text-dimmed text-xs/5">Mar 29, 2025</div>
|
||||
<div class="font-medium text-highlighted text-sm">Development Sprint</div>
|
||||
<div class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="group relative flex flex-1 gap-3" data-state="completed">
|
||||
<div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><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-inherit"></svg></span>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
<div class="w-full mt-1.5 pb-6.5">
|
||||
<div class="text-dimmed text-xs/5">Apr 5, 2025</div>
|
||||
<div class="font-medium text-highlighted text-sm">Testing & Deployment</div>
|
||||
<div class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`Timeline > renders with reverse correctly 1`] = `
|
||||
"<div data-orientation="vertical" class="flex gap-1.5 flex-col">
|
||||
<div class="group relative flex flex-1 gap-3">
|
||||
<div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><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-inherit"></svg></span>
|
||||
<div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=active]:bg-primary group-data-[state=completed]:bg-primary"></div>
|
||||
</div>
|
||||
<div class="w-full mt-1.5 pb-6.5">
|
||||
<div class="text-dimmed text-xs/5">Mar 15, 2025</div>
|
||||
<div class="font-medium text-highlighted text-sm">Project Kickoff</div>
|
||||
<div class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="group relative flex flex-1 gap-3">
|
||||
<div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><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-inherit"></svg></span>
|
||||
<div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=active]:bg-primary group-data-[state=completed]:bg-primary"></div>
|
||||
</div>
|
||||
<div class="w-full mt-1.5 pb-6.5">
|
||||
<div class="text-dimmed text-xs/5">Mar 22, 2025</div>
|
||||
<div class="font-medium text-highlighted text-sm">Design Phase</div>
|
||||
<div class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="group relative flex flex-1 gap-3">
|
||||
<div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><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-inherit"></svg></span>
|
||||
<div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=active]:bg-primary group-data-[state=completed]:bg-primary"></div>
|
||||
</div>
|
||||
<div class="w-full mt-1.5 pb-6.5">
|
||||
<div class="text-dimmed text-xs/5">Mar 29, 2025</div>
|
||||
<div class="font-medium text-highlighted text-sm">Development Sprint</div>
|
||||
<div class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="group relative flex flex-1 gap-3">
|
||||
<div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><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-inherit"></svg></span>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
<div class="w-full mt-1.5 pb-6.5">
|
||||
<div class="text-dimmed text-xs/5">Apr 5, 2025</div>
|
||||
<div class="font-medium text-highlighted text-sm">Testing & Deployment</div>
|
||||
<div class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`Timeline > renders with size 2xl horizontal correctly 1`] = `
|
||||
"<div data-orientation="vertical" class="flex gap-1.5 flex-col">
|
||||
<div class="group relative flex flex-1 gap-3">
|
||||
|
||||
@@ -137,7 +137,7 @@ exports[`Timeline > renders with date slot correctly 1`] = `
|
||||
|
||||
exports[`Timeline > renders with defaultValue correctly 1`] = `
|
||||
"<div data-orientation="vertical" class="flex gap-1.5 flex-col">
|
||||
<div class="group relative flex flex-1 gap-3">
|
||||
<div class="group relative flex flex-1 gap-3" data-state="completed">
|
||||
<div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:rocket shrink-0 text-inherit" aria-hidden="true"></span></span>
|
||||
<div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
|
||||
</div>
|
||||
@@ -147,7 +147,7 @@ exports[`Timeline > renders with defaultValue correctly 1`] = `
|
||||
<div class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="group relative flex flex-1 gap-3">
|
||||
<div class="group relative flex flex-1 gap-3" data-state="active">
|
||||
<div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:palette shrink-0 text-inherit" aria-hidden="true"></span></span>
|
||||
<div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
|
||||
</div>
|
||||
@@ -317,7 +317,7 @@ exports[`Timeline > renders with items correctly 1`] = `
|
||||
|
||||
exports[`Timeline > renders with modelValue correctly 1`] = `
|
||||
"<div data-orientation="vertical" class="flex gap-1.5 flex-col">
|
||||
<div class="group relative flex flex-1 gap-3">
|
||||
<div class="group relative flex flex-1 gap-3" data-state="completed">
|
||||
<div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:rocket shrink-0 text-inherit" aria-hidden="true"></span></span>
|
||||
<div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
|
||||
</div>
|
||||
@@ -327,7 +327,7 @@ exports[`Timeline > renders with modelValue correctly 1`] = `
|
||||
<div class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="group relative flex flex-1 gap-3">
|
||||
<div class="group relative flex flex-1 gap-3" data-state="active">
|
||||
<div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:palette shrink-0 text-inherit" aria-hidden="true"></span></span>
|
||||
<div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=completed]:bg-primary"></div>
|
||||
</div>
|
||||
@@ -405,6 +405,141 @@ exports[`Timeline > renders with neutral color correctly 1`] = `
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`Timeline > renders with reverse and defaultValue correctly 1`] = `
|
||||
"<div data-orientation="vertical" class="flex gap-1.5 flex-col">
|
||||
<div class="group relative flex flex-1 gap-3">
|
||||
<div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:rocket shrink-0 text-inherit" aria-hidden="true"></span></span>
|
||||
<div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=active]:bg-primary group-data-[state=completed]:bg-primary"></div>
|
||||
</div>
|
||||
<div class="w-full mt-1.5 pb-6.5">
|
||||
<div class="text-dimmed text-xs/5">Mar 15, 2025</div>
|
||||
<div class="font-medium text-highlighted text-sm">Project Kickoff</div>
|
||||
<div class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="group relative flex flex-1 gap-3" data-state="active">
|
||||
<div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:palette shrink-0 text-inherit" aria-hidden="true"></span></span>
|
||||
<div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=active]:bg-primary group-data-[state=completed]:bg-primary"></div>
|
||||
</div>
|
||||
<div class="w-full mt-1.5 pb-6.5">
|
||||
<div class="text-dimmed text-xs/5">Mar 22, 2025</div>
|
||||
<div class="font-medium text-highlighted text-sm">Design Phase</div>
|
||||
<div class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="group relative flex flex-1 gap-3" data-state="completed">
|
||||
<div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:code shrink-0 text-inherit" aria-hidden="true"></span></span>
|
||||
<div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=active]:bg-primary group-data-[state=completed]:bg-primary"></div>
|
||||
</div>
|
||||
<div class="w-full mt-1.5 pb-6.5">
|
||||
<div class="text-dimmed text-xs/5">Mar 29, 2025</div>
|
||||
<div class="font-medium text-highlighted text-sm">Development Sprint</div>
|
||||
<div class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="group relative flex flex-1 gap-3" data-state="completed">
|
||||
<div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:check-circle shrink-0 text-inherit" aria-hidden="true"></span></span>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
<div class="w-full mt-1.5 pb-6.5">
|
||||
<div class="text-dimmed text-xs/5">Apr 5, 2025</div>
|
||||
<div class="font-medium text-highlighted text-sm">Testing & Deployment</div>
|
||||
<div class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`Timeline > renders with reverse and modelValue correctly 1`] = `
|
||||
"<div data-orientation="vertical" class="flex gap-1.5 flex-col">
|
||||
<div class="group relative flex flex-1 gap-3">
|
||||
<div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:rocket shrink-0 text-inherit" aria-hidden="true"></span></span>
|
||||
<div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=active]:bg-primary group-data-[state=completed]:bg-primary"></div>
|
||||
</div>
|
||||
<div class="w-full mt-1.5 pb-6.5">
|
||||
<div class="text-dimmed text-xs/5">Mar 15, 2025</div>
|
||||
<div class="font-medium text-highlighted text-sm">Project Kickoff</div>
|
||||
<div class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="group relative flex flex-1 gap-3" data-state="active">
|
||||
<div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:palette shrink-0 text-inherit" aria-hidden="true"></span></span>
|
||||
<div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=active]:bg-primary group-data-[state=completed]:bg-primary"></div>
|
||||
</div>
|
||||
<div class="w-full mt-1.5 pb-6.5">
|
||||
<div class="text-dimmed text-xs/5">Mar 22, 2025</div>
|
||||
<div class="font-medium text-highlighted text-sm">Design Phase</div>
|
||||
<div class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="group relative flex flex-1 gap-3" data-state="completed">
|
||||
<div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:code shrink-0 text-inherit" aria-hidden="true"></span></span>
|
||||
<div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=active]:bg-primary group-data-[state=completed]:bg-primary"></div>
|
||||
</div>
|
||||
<div class="w-full mt-1.5 pb-6.5">
|
||||
<div class="text-dimmed text-xs/5">Mar 29, 2025</div>
|
||||
<div class="font-medium text-highlighted text-sm">Development Sprint</div>
|
||||
<div class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="group relative flex flex-1 gap-3" data-state="completed">
|
||||
<div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:check-circle shrink-0 text-inherit" aria-hidden="true"></span></span>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
<div class="w-full mt-1.5 pb-6.5">
|
||||
<div class="text-dimmed text-xs/5">Apr 5, 2025</div>
|
||||
<div class="font-medium text-highlighted text-sm">Testing & Deployment</div>
|
||||
<div class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`Timeline > renders with reverse correctly 1`] = `
|
||||
"<div data-orientation="vertical" class="flex gap-1.5 flex-col">
|
||||
<div class="group relative flex flex-1 gap-3">
|
||||
<div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:rocket shrink-0 text-inherit" aria-hidden="true"></span></span>
|
||||
<div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=active]:bg-primary group-data-[state=completed]:bg-primary"></div>
|
||||
</div>
|
||||
<div class="w-full mt-1.5 pb-6.5">
|
||||
<div class="text-dimmed text-xs/5">Mar 15, 2025</div>
|
||||
<div class="font-medium text-highlighted text-sm">Project Kickoff</div>
|
||||
<div class="text-muted text-wrap text-sm">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="group relative flex flex-1 gap-3">
|
||||
<div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:palette shrink-0 text-inherit" aria-hidden="true"></span></span>
|
||||
<div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=active]:bg-primary group-data-[state=completed]:bg-primary"></div>
|
||||
</div>
|
||||
<div class="w-full mt-1.5 pb-6.5">
|
||||
<div class="text-dimmed text-xs/5">Mar 22, 2025</div>
|
||||
<div class="font-medium text-highlighted text-sm">Design Phase</div>
|
||||
<div class="text-muted text-wrap text-sm">User research and design workshops. Created wireframes and prototypes for user testing</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="group relative flex flex-1 gap-3">
|
||||
<div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:code shrink-0 text-inherit" aria-hidden="true"></span></span>
|
||||
<div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex-1 rounded-full bg-elevated w-0.5 group-data-[state=active]:bg-primary group-data-[state=completed]:bg-primary"></div>
|
||||
</div>
|
||||
<div class="w-full mt-1.5 pb-6.5">
|
||||
<div class="text-dimmed text-xs/5">Mar 29, 2025</div>
|
||||
<div class="font-medium text-highlighted text-sm">Development Sprint</div>
|
||||
<div class="text-muted text-wrap text-sm">Frontend and backend development. Implemented core features and integrated with APIs.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="group relative flex flex-1 gap-3">
|
||||
<div class="relative flex items-center gap-1.5 flex-col"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"><span class="iconify i-lucide:check-circle shrink-0 text-inherit" aria-hidden="true"></span></span>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
<div class="w-full mt-1.5 pb-6.5">
|
||||
<div class="text-dimmed text-xs/5">Apr 5, 2025</div>
|
||||
<div class="font-medium text-highlighted text-sm">Testing & Deployment</div>
|
||||
<div class="text-muted text-wrap text-sm">QA testing and performance optimization. Deployed the application to production.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`Timeline > renders with size 2xl horizontal correctly 1`] = `
|
||||
"<div data-orientation="vertical" class="flex gap-1.5 flex-col">
|
||||
<div class="group relative flex flex-1 gap-3">
|
||||
|
||||
Reference in New Issue
Block a user