Skip to content

Commit e2b78a7

Browse files
benjamincanacbenjamincanac
committedJan 28, 2025·
feat(CommandPalette): support link props in items
Resolves #3190
·
v3.0.2v3.0.0-alpha.13
1 parent 527631d commit e2b78a7

File tree

9 files changed

+528
-867
lines changed

9 files changed

+528
-867
lines changed
 

‎docs/app/components/content/examples/command-palette/CommandPaletteCustomSlotExample.vue

+21-7
Original file line numberDiff line numberDiff line change
@@ -29,31 +29,45 @@ const groups = [{
2929
items: [
3030
{
3131
label: 'Benjamin Canac',
32-
suffix: 'benjamincanac'
32+
suffix: 'benjamincanac',
33+
to: 'https://github.com/benjamincanac',
34+
target: '_blank'
3335
},
3436
{
3537
label: 'Sylvain Marroufin',
36-
suffix: 'smarroufin'
38+
suffix: 'smarroufin',
39+
to: 'https://github.com/smarroufin',
40+
target: '_blank'
3741
},
3842
{
3943
label: 'Sébastien Chopin',
40-
suffix: 'atinux'
44+
suffix: 'atinux',
45+
to: 'https://github.com/atinux',
46+
target: '_blank'
4147
},
4248
{
4349
label: 'Romain Hamel',
44-
suffix: 'romhml'
50+
suffix: 'romhml',
51+
to: 'https://github.com/romhml',
52+
target: '_blank'
4553
},
4654
{
4755
label: 'Haytham A. Salama',
48-
suffix: 'Haythamasalama'
56+
suffix: 'Haythamasalama',
57+
to: 'https://github.com/Haythamasalama',
58+
target: '_blank'
4959
},
5060
{
5161
label: 'Daniel Roe',
52-
suffix: 'danielroe'
62+
suffix: 'danielroe',
63+
to: 'https://github.com/danielroe',
64+
target: '_blank'
5365
},
5466
{
5567
label: 'Neil Richter',
56-
suffix: 'noook'
68+
suffix: 'noook',
69+
to: 'https://github.com/noook',
70+
target: '_blank'
5771
}
5872
]
5973
}]

‎docs/app/components/content/examples/command-palette/CommandPaletteOpenExample.vue

+14
Original file line numberDiff line numberDiff line change
@@ -5,48 +5,62 @@ const users = [
55
{
66
label: 'Benjamin Canac',
77
suffix: 'benjamincanac',
8+
to: 'https://github.com/benjamincanac',
9+
target: '_blank',
810
avatar: {
911
src: 'https://github.com/benjamincanac.png'
1012
}
1113
},
1214
{
1315
label: 'Sylvain Marroufin',
1416
suffix: 'smarroufin',
17+
to: 'https://github.com/smarroufin',
18+
target: '_blank',
1519
avatar: {
1620
src: 'https://github.com/smarroufin.png'
1721
}
1822
},
1923
{
2024
label: 'Sébastien Chopin',
2125
suffix: 'atinux',
26+
to: 'https://github.com/atinux',
27+
target: '_blank',
2228
avatar: {
2329
src: 'https://github.com/atinux.png'
2430
}
2531
},
2632
{
2733
label: 'Romain Hamel',
2834
suffix: 'romhml',
35+
to: 'https://github.com/romhml',
36+
target: '_blank',
2937
avatar: {
3038
src: 'https://github.com/romhml.png'
3139
}
3240
},
3341
{
3442
label: 'Haytham A. Salama',
3543
suffix: 'Haythamasalama',
44+
to: 'https://github.com/Haythamasalama',
45+
target: '_blank',
3646
avatar: {
3747
src: 'https://github.com/Haythamasalama.png'
3848
}
3949
},
4050
{
4151
label: 'Daniel Roe',
4252
suffix: 'danielroe',
53+
to: 'https://github.com/danielroe',
54+
target: '_blank',
4355
avatar: {
4456
src: 'https://github.com/danielroe.png'
4557
}
4658
},
4759
{
4860
label: 'Neil Richter',
4961
suffix: 'noook',
62+
to: 'https://github.com/noook',
63+
target: '_blank',
5064
avatar: {
5165
src: 'https://github.com/noook.png'
5266
}

‎docs/app/components/content/examples/command-palette/CommandPaletteSearchTermExample.vue

+7-14
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,7 @@ const users = [
66
to: 'https://github.com/benjamincanac',
77
target: '_blank',
88
avatar: {
9-
src: 'https://github.com/benjamincanac.png',
10-
alt: 'benjamincanac'
9+
src: 'https://github.com/benjamincanac.png'
1110
}
1211
},
1312
{
@@ -16,8 +15,7 @@ const users = [
1615
to: 'https://github.com/smarroufin',
1716
target: '_blank',
1817
avatar: {
19-
src: 'https://github.com/smarroufin.png',
20-
alt: 'smarroufin'
18+
src: 'https://github.com/smarroufin.png'
2119
}
2220
},
2321
{
@@ -26,8 +24,7 @@ const users = [
2624
to: 'https://github.com/atinux',
2725
target: '_blank',
2826
avatar: {
29-
src: 'https://github.com/atinux.png',
30-
alt: 'atinux'
27+
src: 'https://github.com/atinux.png'
3128
}
3229
},
3330
{
@@ -36,8 +33,7 @@ const users = [
3633
to: 'https://github.com/romhml',
3734
target: '_blank',
3835
avatar: {
39-
src: 'https://github.com/romhml.png',
40-
alt: 'romhml'
36+
src: 'https://github.com/romhml.png'
4137
}
4238
},
4339
{
@@ -46,8 +42,7 @@ const users = [
4642
to: 'https://github.com/Haythamasalama',
4743
target: '_blank',
4844
avatar: {
49-
src: 'https://github.com/Haythamasalama.png',
50-
alt: 'Haythamasalama'
45+
src: 'https://github.com/Haythamasalama.png'
5146
}
5247
},
5348
{
@@ -56,8 +51,7 @@ const users = [
5651
to: 'https://github.com/danielroe',
5752
target: '_blank',
5853
avatar: {
59-
src: 'https://github.com/danielroe.png',
60-
alt: 'danielroe'
54+
src: 'https://github.com/danielroe.png'
6155
}
6256
},
6357
{
@@ -66,8 +60,7 @@ const users = [
6660
to: 'https://github.com/noook',
6761
target: '_blank',
6862
avatar: {
69-
src: 'https://github.com/noook.png',
70-
alt: 'noook'
63+
src: 'https://github.com/noook.png'
7164
}
7265
}
7366
]

‎docs/app/components/content/examples/command-palette/CommandPaletteSelectExample.vue

+13-28
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script setup lang="ts">
2-
const router = useRouter()
2+
const toast = useToast()
33
44
const groups = ref([
55
{
@@ -12,8 +12,7 @@ const groups = ref([
1212
to: 'https://github.com/benjamincanac',
1313
target: '_blank',
1414
avatar: {
15-
src: 'https://github.com/benjamincanac.png',
16-
alt: 'benjamincanac'
15+
src: 'https://github.com/benjamincanac.png'
1716
}
1817
},
1918
{
@@ -22,8 +21,7 @@ const groups = ref([
2221
to: 'https://github.com/smarroufin',
2322
target: '_blank',
2423
avatar: {
25-
src: 'https://github.com/smarroufin.png',
26-
alt: 'smarroufin'
24+
src: 'https://github.com/smarroufin.png'
2725
}
2826
},
2927
{
@@ -32,8 +30,7 @@ const groups = ref([
3230
to: 'https://github.com/atinux',
3331
target: '_blank',
3432
avatar: {
35-
src: 'https://github.com/atinux.png',
36-
alt: 'atinux'
33+
src: 'https://github.com/atinux.png'
3734
}
3835
},
3936
{
@@ -42,8 +39,7 @@ const groups = ref([
4239
to: 'https://github.com/romhml',
4340
target: '_blank',
4441
avatar: {
45-
src: 'https://github.com/romhml.png',
46-
alt: 'romhml'
42+
src: 'https://github.com/romhml.png'
4743
}
4844
},
4945
{
@@ -52,8 +48,7 @@ const groups = ref([
5248
to: 'https://github.com/Haythamasalama',
5349
target: '_blank',
5450
avatar: {
55-
src: 'https://github.com/Haythamasalama.png',
56-
alt: 'Haythamasalama'
51+
src: 'https://github.com/Haythamasalama.png'
5752
}
5853
},
5954
{
@@ -62,8 +57,7 @@ const groups = ref([
6257
to: 'https://github.com/danielroe',
6358
target: '_blank',
6459
avatar: {
65-
src: 'https://github.com/danielroe.png',
66-
alt: 'danielroe'
60+
src: 'https://github.com/danielroe.png'
6761
}
6862
},
6963
{
@@ -72,8 +66,7 @@ const groups = ref([
7266
to: 'https://github.com/noook',
7367
target: '_blank',
7468
avatar: {
75-
src: 'https://github.com/noook.png',
76-
alt: 'noook'
69+
src: 'https://github.com/noook.png'
7770
}
7871
}
7972
]
@@ -90,7 +83,7 @@ const groups = ref([
9083
'N'
9184
],
9285
onSelect() {
93-
console.log('Add new file')
86+
toast.add({ title: 'Add new file' })
9487
}
9588
},
9689
{
@@ -102,7 +95,7 @@ const groups = ref([
10295
'F'
10396
],
10497
onSelect() {
105-
console.log('Add new folder')
98+
toast.add({ title: 'Add new folder' })
10699
}
107100
},
108101
{
@@ -114,7 +107,7 @@ const groups = ref([
114107
'H'
115108
],
116109
onSelect() {
117-
console.log('Add hashtag')
110+
toast.add({ title: 'Add hashtag' })
118111
}
119112
},
120113
{
@@ -126,23 +119,15 @@ const groups = ref([
126119
'L'
127120
],
128121
onSelect() {
129-
console.log('Add label')
122+
toast.add({ title: 'Add label' })
130123
}
131124
}
132125
]
133126
}
134127
])
135128
136129
function onSelect(item: any) {
137-
if (item.onSelect) {
138-
item.onSelect()
139-
} else if (item.to) {
140-
if (typeof item.to === 'string' && (item.target === '_blank' || item.to.startsWith('http'))) {
141-
window.open(item.to, item.target || '_blank')
142-
} else {
143-
router.push(item.to)
144-
}
145-
}
130+
console.log(item)
146131
}
147132
</script>
148133

‎docs/content/3.components/command-palette.md

+8-10
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,11 @@ The CommandPalette component filters groups and ranks matching commands by relev
3434
- [`postFilter?: (searchTerm: string, items: T[]) => T[]`{lang="ts-type"}](#with-post-filtered-items)
3535
- `highlightedIcon?: string`{lang="ts-type"}
3636

37-
Each group takes some `items` as an array of objects with the following properties:
37+
::caution
38+
You must provide an `id` for each group otherwise the group will be ignored.
39+
::
40+
41+
Each group contains an `items` array of objects that define the commands. Each item can have the following properties:
3842

3943
- `prefix?: string`{lang="ts-type"}
4044
- `label?: string`{lang="ts-type"}
@@ -49,6 +53,8 @@ Each group takes some `items` as an array of objects with the following properti
4953
- [`slot?: string`{lang="ts-type"}](#with-custom-slot)
5054
- `onSelect?(e?: Event): void`{lang="ts-type"}
5155

56+
You can pass any property from the [Link](/components/link#props) component such as `to`, `target`, etc.
57+
5258
::component-code
5359
---
5460
collapse: true
@@ -98,10 +104,6 @@ props:
98104
---
99105
::
100106

101-
::caution
102-
You must provide an `id` for each group otherwise the group will be ignored.
103-
::
104-
105107
### Multiple
106108

107109
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
437439

438440
### Control selected item(s)
439441

440-
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.
442+
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.
441443

442444
::component-example
443445
---
@@ -447,10 +449,6 @@ class: '!p-0'
447449
---
448450
::
449451

450-
::note
451-
This example demonstrates how to use the `@update:model-value` event to handle different selection scenarios.
452-
::
453-
454452
### Control search term
455453

456454
Use the `v-model:search-term` directive to control the search term.

‎src/runtime/components/CommandPalette.vue

+46-39
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,14 @@ import theme from '#build/ui/command-palette'
88
import type { UseComponentIconsProps } from '../composables/useComponentIcons'
99
import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
1010
import { tv } from '../utils/tv'
11-
import type { AvatarProps, ButtonProps, ChipProps, KbdProps, InputProps } from '../types'
11+
import type { AvatarProps, ButtonProps, ChipProps, KbdProps, InputProps, LinkProps } from '../types'
1212
import type { DynamicSlots, PartialString } from '../types/utils'
1313
1414
const appConfigCommandPalette = _appConfig as AppConfig & { ui: { commandPalette: Partial<typeof theme> } }
1515
1616
const commandPalette = tv({ extend: tv(theme), ...(appConfigCommandPalette.ui?.commandPalette || {}) })
1717
18-
export interface CommandPaletteItem {
18+
export interface CommandPaletteItem extends Omit<LinkProps, 'type' | 'raw' | 'custom'> {
1919
prefix?: string
2020
label?: string
2121
suffix?: string
@@ -136,12 +136,15 @@ import { useAppConfig } from '#imports'
136136
import { useLocale } from '../composables/useLocale'
137137
import { omit, get } from '../utils'
138138
import { highlight } from '../utils/fuse'
139+
import { pickLinkProps } from '../utils/link'
139140
import UIcon from './Icon.vue'
140141
import UAvatar from './Avatar.vue'
141142
import UButton from './Button.vue'
142143
import UChip from './Chip.vue'
143-
import UKbd from './Kbd.vue'
144+
import ULinkBase from './LinkBase.vue'
145+
import ULink from './Link.vue'
144146
import UInput from './Input.vue'
147+
import UKbd from './Kbd.vue'
145148
146149
const props = withDefaults(defineProps<CommandPaletteProps<G, T>>(), {
147150
modelValue: '',
@@ -281,47 +284,51 @@ const groups = computed(() => {
281284
:key="`group-${groupIndex}-${index}`"
282285
:value="omit(item, ['matches' as any, 'group' as any, 'onSelect', 'labelHtml', 'suffixHtml'])"
283286
:disabled="item.disabled"
284-
:class="ui.item({ class: props.ui?.item, active: item.active })"
287+
as-child
285288
@select="item.onSelect"
286289
>
287-
<slot :name="item.slot || group.slot || 'item'" :item="item" :index="index">
288-
<slot :name="item.slot ? `${item.slot}-leading` : group.slot ? `${group.slot}-leading` : `item-leading`" :item="item" :index="index">
289-
<UIcon v-if="item.loading" :name="loadingIcon || appConfig.ui.icons.loading" :class="ui.itemLeadingIcon({ class: props.ui?.itemLeadingIcon, loading: true })" />
290-
<UIcon v-else-if="item.icon" :name="item.icon" :class="ui.itemLeadingIcon({ class: props.ui?.itemLeadingIcon, active: item.active })" />
291-
<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 })" />
292-
<UChip
293-
v-else-if="item.chip"
294-
:size="((props.ui?.itemLeadingChipSize || ui.itemLeadingChipSize()) as ChipProps['size'])"
295-
inset
296-
standalone
297-
v-bind="item.chip"
298-
:class="ui.itemLeadingChip({ class: props.ui?.itemLeadingChip, active: item.active })"
299-
/>
300-
</slot>
301-
302-
<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 })">
303-
<slot :name="item.slot ? `${item.slot}-label` : group.slot ? `${group.slot}-label` : `item-label`" :item="item" :index="index">
304-
<span v-if="item.prefix" :class="ui.itemLabelPrefix({ class: props.ui?.itemLabelPrefix })">{{ item.prefix }}</span>
305-
306-
<span :class="ui.itemLabelBase({ class: props.ui?.itemLabelBase, active: item.active })" v-html="item.labelHtml || get(item, props.labelKey as string)" />
307-
308-
<span :class="ui.itemLabelSuffix({ class: props.ui?.itemLabelSuffix, active: item.active })" v-html="item.suffixHtml || item.suffix" />
309-
</slot>
310-
</span>
290+
<ULink v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(item)" custom>
291+
<ULinkBase v-bind="slotProps" :class="ui.item({ class: props.ui?.item, active: active || item.active })">
292+
<slot :name="item.slot || group.slot || 'item'" :item="item" :index="index">
293+
<slot :name="item.slot ? `${item.slot}-leading` : group.slot ? `${group.slot}-leading` : `item-leading`" :item="item" :index="index">
294+
<UIcon v-if="item.loading" :name="loadingIcon || appConfig.ui.icons.loading" :class="ui.itemLeadingIcon({ class: props.ui?.itemLeadingIcon, loading: true })" />
295+
<UIcon v-else-if="item.icon" :name="item.icon" :class="ui.itemLeadingIcon({ class: props.ui?.itemLeadingIcon, active: active || item.active })" />
296+
<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 })" />
297+
<UChip
298+
v-else-if="item.chip"
299+
:size="((props.ui?.itemLeadingChipSize || ui.itemLeadingChipSize()) as ChipProps['size'])"
300+
inset
301+
standalone
302+
v-bind="item.chip"
303+
:class="ui.itemLeadingChip({ class: props.ui?.itemLeadingChip, active: active || item.active })"
304+
/>
305+
</slot>
306+
307+
<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 })">
308+
<slot :name="item.slot ? `${item.slot}-label` : group.slot ? `${group.slot}-label` : `item-label`" :item="item" :index="index">
309+
<span v-if="item.prefix" :class="ui.itemLabelPrefix({ class: props.ui?.itemLabelPrefix })">{{ item.prefix }}</span>
310+
311+
<span :class="ui.itemLabelBase({ class: props.ui?.itemLabelBase, active: active || item.active })" v-html="item.labelHtml || get(item, props.labelKey as string)" />
312+
313+
<span :class="ui.itemLabelSuffix({ class: props.ui?.itemLabelSuffix, active: active || item.active })" v-html="item.suffixHtml || item.suffix" />
314+
</slot>
315+
</span>
311316

312-
<span :class="ui.itemTrailing({ class: props.ui?.itemTrailing })">
313-
<slot :name="item.slot ? `${item.slot}-trailing` : group.slot ? `${group.slot}-trailing` : `item-trailing`" :item="item" :index="index">
314-
<span v-if="item.kbds?.length" :class="ui.itemTrailingKbds({ class: props.ui?.itemTrailingKbds })">
315-
<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" />
317+
<span :class="ui.itemTrailing({ class: props.ui?.itemTrailing })">
318+
<slot :name="item.slot ? `${item.slot}-trailing` : group.slot ? `${group.slot}-trailing` : `item-trailing`" :item="item" :index="index">
319+
<span v-if="item.kbds?.length" :class="ui.itemTrailingKbds({ class: props.ui?.itemTrailingKbds })">
320+
<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" />
321+
</span>
322+
<UIcon v-else-if="group.highlightedIcon" :name="group.highlightedIcon" :class="ui.itemTrailingHighlightedIcon({ class: props.ui?.itemTrailingHighlightedIcon })" />
323+
</slot>
324+
325+
<ListboxItemIndicator as-child>
326+
<UIcon :name="selectedIcon || appConfig.ui.icons.check" :class="ui.itemTrailingIcon({ class: props.ui?.itemTrailingIcon })" />
327+
</ListboxItemIndicator>
316328
</span>
317-
<UIcon v-else-if="group.highlightedIcon" :name="group.highlightedIcon" :class="ui.itemTrailingHighlightedIcon({ class: props.ui?.itemTrailingHighlightedIcon })" />
318329
</slot>
319-
320-
<ListboxItemIndicator as-child>
321-
<UIcon :name="selectedIcon || appConfig.ui.icons.check" :class="ui.itemTrailingIcon({ class: props.ui?.itemTrailingIcon })" />
322-
</ListboxItemIndicator>
323-
</span>
324-
</slot>
330+
</ULinkBase>
331+
</ULink>
325332
</ListboxItem>
326333
</ListboxGroup>
327334
</div>

‎test/components/CommandPalette.spec.ts

+3-1
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,9 @@ describe('CommandPalette', () => {
5555
label: 'benjamincanac',
5656
avatar: {
5757
src: 'https://github.com/benjamincanac.png'
58-
}
58+
},
59+
to: 'https://github.com/benjamincanac',
60+
target: '_blank'
5961
}]
6062
}]
6163

‎test/components/__snapshots__/CommandPalette-vue.spec.ts.snap

+208-384
Large diffs are not rendered by default.

‎test/components/__snapshots__/CommandPalette.spec.ts.snap

+208-384
Large diffs are not rendered by default.

0 commit comments

Comments
 (0)
Please sign in to comment.