arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-14 20:19:34 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(CommandPalette): support link props in items

Browse Source 
Resolves #3190
This commit is contained in:
Benjamin Canac
2025-01-28 14:50:37 +01:00
parent 527631d2d1
commit e2b78a78a4
9 changed files with 526 additions and 865 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
docs/app/components/content/examples/command-palette/CommandPaletteCustomSlotExample.vue
View File

@@ -29,31 +29,45 @@ const groups = [{
items: [
{
label: 'Benjamin Canac',
suffix: 'benjamincanac'
suffix: 'benjamincanac',
to: 'https://github.com/benjamincanac',
target: '_blank'
},
{
label: 'Sylvain Marroufin',
suffix: 'smarroufin'
suffix: 'smarroufin',
to: 'https://github.com/smarroufin',
target: '_blank'
},
{
label: 'Sébastien Chopin',
suffix: 'atinux'
suffix: 'atinux',
to: 'https://github.com/atinux',
target: '_blank'
},
{
label: 'Romain Hamel',
suffix: 'romhml'
suffix: 'romhml',
to: 'https://github.com/romhml',
target: '_blank'
},
{
label: 'Haytham A. Salama',
suffix: 'Haythamasalama'
suffix: 'Haythamasalama',
to: 'https://github.com/Haythamasalama',
target: '_blank'
},
{
label: 'Daniel Roe',
suffix: 'danielroe'
suffix: 'danielroe',
to: 'https://github.com/danielroe',
target: '_blank'
},
{
label: 'Neil Richter',
suffix: 'noook'
suffix: 'noook',
to: 'https://github.com/noook',
target: '_blank'
}
]
}]

14
docs/app/components/content/examples/command-palette/CommandPaletteOpenExample.vue
View File

@@ -5,6 +5,8 @@ const users = [
{
label: 'Benjamin Canac',
suffix: 'benjamincanac',
to: 'https://github.com/benjamincanac',
target: '_blank',
avatar: {
src: 'https://github.com/benjamincanac.png'
}
@@ -12,6 +14,8 @@ const users = [
{
label: 'Sylvain Marroufin',
suffix: 'smarroufin',
to: 'https://github.com/smarroufin',
target: '_blank',
avatar: {
src: 'https://github.com/smarroufin.png'
}
@@ -19,6 +23,8 @@ const users = [
{
label: 'Sébastien Chopin',
suffix: 'atinux',
to: 'https://github.com/atinux',
target: '_blank',
avatar: {
src: 'https://github.com/atinux.png'
}
@@ -26,6 +32,8 @@ const users = [
{
label: 'Romain Hamel',
suffix: 'romhml',
to: 'https://github.com/romhml',
target: '_blank',
avatar: {
src: 'https://github.com/romhml.png'
}
@@ -33,6 +41,8 @@ const users = [
{
label: 'Haytham A. Salama',
suffix: 'Haythamasalama',
to: 'https://github.com/Haythamasalama',
target: '_blank',
avatar: {
src: 'https://github.com/Haythamasalama.png'
}
@@ -40,6 +50,8 @@ const users = [
{
label: 'Daniel Roe',
suffix: 'danielroe',
to: 'https://github.com/danielroe',
target: '_blank',
avatar: {
src: 'https://github.com/danielroe.png'
}
@@ -47,6 +59,8 @@ const users = [
{
label: 'Neil Richter',
suffix: 'noook',
to: 'https://github.com/noook',
target: '_blank',
avatar: {
src: 'https://github.com/noook.png'
}

21
docs/app/components/content/examples/command-palette/CommandPaletteSearchTermExample.vue
View File

@@ -6,8 +6,7 @@ const users = [
to: 'https://github.com/benjamincanac',
target: '_blank',
avatar: {
src: 'https://github.com/benjamincanac.png',
alt: 'benjamincanac'
src: 'https://github.com/benjamincanac.png'
}
},
{
@@ -16,8 +15,7 @@ const users = [
to: 'https://github.com/smarroufin',
target: '_blank',
avatar: {
src: 'https://github.com/smarroufin.png',
alt: 'smarroufin'
src: 'https://github.com/smarroufin.png'
}
},
{
@@ -26,8 +24,7 @@ const users = [
to: 'https://github.com/atinux',
target: '_blank',
avatar: {
src: 'https://github.com/atinux.png',
alt: 'atinux'
src: 'https://github.com/atinux.png'
}
},
{
@@ -36,8 +33,7 @@ const users = [
to: 'https://github.com/romhml',
target: '_blank',
avatar: {
src: 'https://github.com/romhml.png',
alt: 'romhml'
src: 'https://github.com/romhml.png'
}
},
{
@@ -46,8 +42,7 @@ const users = [
to: 'https://github.com/Haythamasalama',
target: '_blank',
avatar: {
src: 'https://github.com/Haythamasalama.png',
alt: 'Haythamasalama'
src: 'https://github.com/Haythamasalama.png'
}
},
{
@@ -56,8 +51,7 @@ const users = [
to: 'https://github.com/danielroe',
target: '_blank',
avatar: {
src: 'https://github.com/danielroe.png',
alt: 'danielroe'
src: 'https://github.com/danielroe.png'
}
},
{
@@ -66,8 +60,7 @@ const users = [
to: 'https://github.com/noook',
target: '_blank',
avatar: {
src: 'https://github.com/noook.png',
alt: 'noook'
src: 'https://github.com/noook.png'
}
}
]

41
docs/app/components/content/examples/command-palette/CommandPaletteSelectExample.vue
View File

@@ -1,5 +1,5 @@
<script setup lang="ts">
const router = useRouter()
const toast = useToast()
const groups = ref([
{
@@ -12,8 +12,7 @@ const groups = ref([
to: 'https://github.com/benjamincanac',
target: '_blank',
avatar: {
src: 'https://github.com/benjamincanac.png',
alt: 'benjamincanac'
src: 'https://github.com/benjamincanac.png'
}
},
{
@@ -22,8 +21,7 @@ const groups = ref([
to: 'https://github.com/smarroufin',
target: '_blank',
avatar: {
src: 'https://github.com/smarroufin.png',
alt: 'smarroufin'
src: 'https://github.com/smarroufin.png'
}
},
{
@@ -32,8 +30,7 @@ const groups = ref([
to: 'https://github.com/atinux',
target: '_blank',
avatar: {
src: 'https://github.com/atinux.png',
alt: 'atinux'
src: 'https://github.com/atinux.png'
}
},
{
@@ -42,8 +39,7 @@ const groups = ref([
to: 'https://github.com/romhml',
target: '_blank',
avatar: {
src: 'https://github.com/romhml.png',
alt: 'romhml'
src: 'https://github.com/romhml.png'
}
},
{
@@ -52,8 +48,7 @@ const groups = ref([
to: 'https://github.com/Haythamasalama',
target: '_blank',
avatar: {
src: 'https://github.com/Haythamasalama.png',
alt: 'Haythamasalama'
src: 'https://github.com/Haythamasalama.png'
}
},
{
@@ -62,8 +57,7 @@ const groups = ref([
to: 'https://github.com/danielroe',
target: '_blank',
avatar: {
src: 'https://github.com/danielroe.png',
alt: 'danielroe'
src: 'https://github.com/danielroe.png'
}
},
{
@@ -72,8 +66,7 @@ const groups = ref([
to: 'https://github.com/noook',
target: '_blank',
avatar: {
src: 'https://github.com/noook.png',
alt: 'noook'
src: 'https://github.com/noook.png'
}
}
]
@@ -90,7 +83,7 @@ const groups = ref([
'N'
],
onSelect() {
console.log('Add new file')
toast.add({ title: 'Add new file' })
}
},
{
@@ -102,7 +95,7 @@ const groups = ref([
'F'
],
onSelect() {
console.log('Add new folder')
toast.add({ title: 'Add new folder' })
}
},
{
@@ -114,7 +107,7 @@ const groups = ref([
'H'
],
onSelect() {
console.log('Add hashtag')
toast.add({ title: 'Add hashtag' })
}
},
{
@@ -126,7 +119,7 @@ const groups = ref([
'L'
],
onSelect() {
console.log('Add label')
toast.add({ title: 'Add label' })
}
}
]
@@ -134,15 +127,7 @@ const groups = ref([
])
function onSelect(item: any) {
if (item.onSelect) {
item.onSelect()
} else if (item.to) {
if (typeof item.to === 'string' && (item.target === '_blank' || item.to.startsWith('http'))) {
window.open(item.to, item.target || '_blank')
} else {
router.push(item.to)
}
}
console.log(item)
}
</script>

18
docs/content/3.components/command-palette.md
View File

@@ -34,7 +34,11 @@ The CommandPalette component filters groups and ranks matching commands by relev
- [`postFilter?: (searchTerm: string, items: T[]) => T[]`{lang="ts-type"}](#with-post-filtered-items)
- `highlightedIcon?: string`{lang="ts-type"}
Each group takes some `items` as an array of objects with the following properties:
::caution
You must provide an `id` for each group otherwise the group will be ignored.
::
Each group contains an `items` array of objects that define the commands. Each item can have the following properties:
- `prefix?: string`{lang="ts-type"}
- `label?: string`{lang="ts-type"}
@@ -49,6 +53,8 @@ Each group takes some `items` as an array of objects with the following properti
- [`slot?: string`{lang="ts-type"}](#with-custom-slot)
- `onSelect?(e?: Event): void`{lang="ts-type"}
You can pass any property from the [Link](/components/link#props) component such as `to`, `target`, etc.
::component-code
---
collapse: true
@@ -98,10 +104,6 @@ props:
---
::
::caution
You must provide an `id` for each group otherwise the group will be ignored.
::
### Multiple
Use the `multiple` prop to allow multiple selections.
@@ -437,7 +439,7 @@ You can customize this icon globally in your `vite.config.ts` under `ui.icons.cl
### Control selected item(s)
You can control the selected item by using the `default-value` prop or the `v-model` directive, by using the `select` field on each item or by using the `@update:model-value` event.
You can control the selected item(s) by using the `default-value` prop or the `v-model` directive, by using the `onSelect` field on each item or by using the `@update:model-value` event.
::component-example
---
@@ -447,10 +449,6 @@ class: '!p-0'
---
::
::note
This example demonstrates how to use the `@update:model-value` event to handle different selection scenarios.
::
### Control search term
Use the `v-model:search-term` directive to control the search term.

81
src/runtime/components/CommandPalette.vue
View File

@@ -8,14 +8,14 @@ import theme from '#build/ui/command-palette'
import type { UseComponentIconsProps } from '../composables/useComponentIcons'
import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
import { tv } from '../utils/tv'
import type { AvatarProps, ButtonProps, ChipProps, KbdProps, InputProps } from '../types'
import type { AvatarProps, ButtonProps, ChipProps, KbdProps, InputProps, LinkProps } from '../types'
import type { DynamicSlots, PartialString } from '../types/utils'
const appConfigCommandPalette = _appConfig as AppConfig & { ui: { commandPalette: Partial<typeof theme> } }
const commandPalette = tv({ extend: tv(theme), ...(appConfigCommandPalette.ui?.commandPalette || {}) })
export interface CommandPaletteItem {
export interface CommandPaletteItem extends Omit<LinkProps, 'type' | 'raw' | 'custom'> {
prefix?: string
label?: string
suffix?: string
@@ -136,12 +136,15 @@ import { useAppConfig } from '#imports'
import { useLocale } from '../composables/useLocale'
import { omit, get } from '../utils'
import { highlight } from '../utils/fuse'
import { pickLinkProps } from '../utils/link'
import UIcon from './Icon.vue'
import UAvatar from './Avatar.vue'
import UButton from './Button.vue'
import UChip from './Chip.vue'
import UKbd from './Kbd.vue'
import ULinkBase from './LinkBase.vue'
import ULink from './Link.vue'
import UInput from './Input.vue'
import UKbd from './Kbd.vue'
const props = withDefaults(defineProps<CommandPaletteProps<G, T>>(), {
modelValue: '',
@@ -281,47 +284,51 @@ const groups = computed(() => {
:key="`group-${groupIndex}-${index}`"
:value="omit(item, ['matches' as any, 'group' as any, 'onSelect', 'labelHtml', 'suffixHtml'])"
:disabled="item.disabled"
:class="ui.item({ class: props.ui?.item, active: item.active })"
as-child
@select="item.onSelect"
>
<slot :name="item.slot || group.slot || 'item'" :item="item" :index="index">
<slot :name="item.slot ? `${item.slot}-leading` : group.slot ? `${group.slot}-leading` : `item-leading`" :item="item" :index="index">
<UIcon v-if="item.loading" :name="loadingIcon || appConfig.ui.icons.loading" :class="ui.itemLeadingIcon({ class: props.ui?.itemLeadingIcon, loading: true })" />
<UIcon v-else-if="item.icon" :name="item.icon" :class="ui.itemLeadingIcon({ class: props.ui?.itemLeadingIcon, active: item.active })" />
<UAvatar v-else-if="item.avatar" :size="((props.ui?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" :class="ui.itemLeadingAvatar({ class: props.ui?.itemLeadingAvatar, active: item.active })" />
<UChip
v-else-if="item.chip"
:size="((props.ui?.itemLeadingChipSize || ui.itemLeadingChipSize()) as ChipProps['size'])"
inset
standalone
v-bind="item.chip"
:class="ui.itemLeadingChip({ class: props.ui?.itemLeadingChip, active: item.active })"
/>
</slot>
<ULink v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(item)" custom>
<ULinkBase v-bind="slotProps" :class="ui.item({ class: props.ui?.item, active: active || item.active })">
<slot :name="item.slot || group.slot || 'item'" :item="item" :index="index">
<slot :name="item.slot ? `${item.slot}-leading` : group.slot ? `${group.slot}-leading` : `item-leading`" :item="item" :index="index">
<UIcon v-if="item.loading" :name="loadingIcon || appConfig.ui.icons.loading" :class="ui.itemLeadingIcon({ class: props.ui?.itemLeadingIcon, loading: true })" />
<UIcon v-else-if="item.icon" :name="item.icon" :class="ui.itemLeadingIcon({ class: props.ui?.itemLeadingIcon, active: active || item.active })" />
<UAvatar v-else-if="item.avatar" :size="((props.ui?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" :class="ui.itemLeadingAvatar({ class: props.ui?.itemLeadingAvatar, active: active || item.active })" />
<UChip
v-else-if="item.chip"
:size="((props.ui?.itemLeadingChipSize || ui.itemLeadingChipSize()) as ChipProps['size'])"
inset
standalone
v-bind="item.chip"
:class="ui.itemLeadingChip({ class: props.ui?.itemLeadingChip, active: active || item.active })"
/>
</slot>
<span v-if="item.labelHtml || get(item, props.labelKey as string) || !!slots[item.slot ? `${item.slot}-label` : group.slot ? `${group.slot}-label` : `item-label`]" :class="ui.itemLabel({ class: props.ui?.itemLabel, active: item.active })">
<slot :name="item.slot ? `${item.slot}-label` : group.slot ? `${group.slot}-label` : `item-label`" :item="item" :index="index">
<span v-if="item.prefix" :class="ui.itemLabelPrefix({ class: props.ui?.itemLabelPrefix })">{{ item.prefix }}</span>
<span v-if="item.labelHtml || get(item, props.labelKey as string) || !!slots[item.slot ? `${item.slot}-label` : group.slot ? `${group.slot}-label` : `item-label`]" :class="ui.itemLabel({ class: props.ui?.itemLabel, active: active || item.active })">
<slot :name="item.slot ? `${item.slot}-label` : group.slot ? `${group.slot}-label` : `item-label`" :item="item" :index="index">
<span v-if="item.prefix" :class="ui.itemLabelPrefix({ class: props.ui?.itemLabelPrefix })">{{ item.prefix }}</span>
<span :class="ui.itemLabelBase({ class: props.ui?.itemLabelBase, active: item.active })" v-html="item.labelHtml || get(item, props.labelKey as string)" />
<span :class="ui.itemLabelBase({ class: props.ui?.itemLabelBase, active: active || item.active })" v-html="item.labelHtml || get(item, props.labelKey as string)" />
<span :class="ui.itemLabelSuffix({ class: props.ui?.itemLabelSuffix, active: item.active })" v-html="item.suffixHtml || item.suffix" />
</slot>
</span>
<span :class="ui.itemTrailing({ class: props.ui?.itemTrailing })">
<slot :name="item.slot ? `${item.slot}-trailing` : group.slot ? `${group.slot}-trailing` : `item-trailing`" :item="item" :index="index">
<span v-if="item.kbds?.length" :class="ui.itemTrailingKbds({ class: props.ui?.itemTrailingKbds })">
<UKbd v-for="(kbd, kbdIndex) in item.kbds" :key="kbdIndex" :size="((props.ui?.itemTrailingKbdsSize || ui.itemTrailingKbdsSize()) as KbdProps['size'])" v-bind="typeof kbd === 'string' ? { value: kbd } : kbd" />
<span :class="ui.itemLabelSuffix({ class: props.ui?.itemLabelSuffix, active: active || item.active })" v-html="item.suffixHtml || item.suffix" />
</slot>
</span>
<UIcon v-else-if="group.highlightedIcon" :name="group.highlightedIcon" :class="ui.itemTrailingHighlightedIcon({ class: props.ui?.itemTrailingHighlightedIcon })" />
</slot>
<ListboxItemIndicator as-child>
<UIcon :name="selectedIcon || appConfig.ui.icons.check" :class="ui.itemTrailingIcon({ class: props.ui?.itemTrailingIcon })" />
</ListboxItemIndicator>
</span>
</slot>
<span :class="ui.itemTrailing({ class: props.ui?.itemTrailing })">
<slot :name="item.slot ? `${item.slot}-trailing` : group.slot ? `${group.slot}-trailing` : `item-trailing`" :item="item" :index="index">
<span v-if="item.kbds?.length" :class="ui.itemTrailingKbds({ class: props.ui?.itemTrailingKbds })">
<UKbd v-for="(kbd, kbdIndex) in item.kbds" :key="kbdIndex" :size="((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 })" />
</slot>
<ListboxItemIndicator as-child>
<UIcon :name="selectedIcon || appConfig.ui.icons.check" :class="ui.itemTrailingIcon({ class: props.ui?.itemTrailingIcon })" />
</ListboxItemIndicator>
</span>
</slot>
</ULinkBase>
</ULink>
</ListboxItem>
</ListboxGroup>
</div>

4
test/components/CommandPalette.spec.ts
View File

@@ -55,7 +55,9 @@ describe('CommandPalette', () => {
label: 'benjamincanac',
avatar: {
src: 'https://github.com/benjamincanac.png'
}
},
to: 'https://github.com/benjamincanac',
target: '_blank'
}]
}]

592
test/components/__snapshots__/CommandPalette-vue.spec.ts.snap
View File

File diff suppressed because one or more lines are too long

592
test/components/__snapshots__/CommandPalette.spec.ts.snap
View File

File diff suppressed because one or more lines are too long