feat(CommandPalette): support link props in items

Resolves #3190

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

@@ -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'
     }
   ]
 }]

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

@@ -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'
     }

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

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

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

@@ -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',
+          src: 'https://github.com/benjamincanac.png'
-          alt: 'benjamincanac'
         }
       },
       {
@@ -22,8 +21,7 @@ const groups = ref([
         to: 'https://github.com/smarroufin',
         target: '_blank',
         avatar: {
-          src: 'https://github.com/smarroufin.png',
+          src: 'https://github.com/smarroufin.png'
-          alt: 'smarroufin'
         }
       },
       {
@@ -32,8 +30,7 @@ const groups = ref([
         to: 'https://github.com/atinux',
         target: '_blank',
         avatar: {
-          src: 'https://github.com/atinux.png',
+          src: 'https://github.com/atinux.png'
-          alt: 'atinux'
         }
       },
       {
@@ -42,8 +39,7 @@ const groups = ref([
         to: 'https://github.com/romhml',
         target: '_blank',
         avatar: {
-          src: 'https://github.com/romhml.png',
+          src: 'https://github.com/romhml.png'
-          alt: 'romhml'
         }
       },
       {
@@ -52,8 +48,7 @@ const groups = ref([
         to: 'https://github.com/Haythamasalama',
         target: '_blank',
         avatar: {
-          src: 'https://github.com/Haythamasalama.png',
+          src: 'https://github.com/Haythamasalama.png'
-          alt: 'Haythamasalama'
         }
       },
       {
@@ -62,8 +57,7 @@ const groups = ref([
         to: 'https://github.com/danielroe',
         target: '_blank',
         avatar: {
-          src: 'https://github.com/danielroe.png',
+          src: 'https://github.com/danielroe.png'
-          alt: 'danielroe'
         }
       },
       {
@@ -72,8 +66,7 @@ const groups = ref([
         to: 'https://github.com/noook',
         target: '_blank',
         avatar: {
-          src: 'https://github.com/noook.png',
+          src: 'https://github.com/noook.png'
-          alt: 'noook'
         }
       }
     ]
@@ -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) {
+  console.log(item)
-    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)
-    }
-  }
 }
 </script>
 

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

@@ -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.

src/runtime/components/CommandPalette.vue

@@ -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">
+            <ULink v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(item)" custom>
-              <slot :name="item.slot ? `${item.slot}-leading` : group.slot ? `${group.slot}-leading` : `item-leading`" :item="item" :index="index">
+              <ULinkBase v-bind="slotProps" :class="ui.item({ class: props.ui?.item, active: active || item.active })">
-                <UIcon v-if="item.loading" :name="loadingIcon || appConfig.ui.icons.loading" :class="ui.itemLeadingIcon({ class: props.ui?.itemLeadingIcon, loading: true })" />
+                <slot :name="item.slot || group.slot || 'item'" :item="item" :index="index">
-                <UIcon v-else-if="item.icon" :name="item.icon" :class="ui.itemLeadingIcon({ class: props.ui?.itemLeadingIcon, active: item.active })" />
+                  <slot :name="item.slot ? `${item.slot}-leading` : group.slot ? `${group.slot}-leading` : `item-leading`" :item="item" :index="index">
-                <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 })" />
+                    <UIcon v-if="item.loading" :name="loadingIcon || appConfig.ui.icons.loading" :class="ui.itemLeadingIcon({ class: props.ui?.itemLeadingIcon, loading: true })" />
-                <UChip
+                    <UIcon v-else-if="item.icon" :name="item.icon" :class="ui.itemLeadingIcon({ class: props.ui?.itemLeadingIcon, active: active || item.active })" />
-                  v-else-if="item.chip"
+                    <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 })" />
-                  :size="((props.ui?.itemLeadingChipSize || ui.itemLeadingChipSize()) as ChipProps['size'])"
+                    <UChip
-                  inset
+                      v-else-if="item.chip"
-                  standalone
+                      :size="((props.ui?.itemLeadingChipSize || ui.itemLeadingChipSize()) as ChipProps['size'])"
-                  v-bind="item.chip"
+                      inset
-                  :class="ui.itemLeadingChip({ class: props.ui?.itemLeadingChip, active: item.active })"
+                      standalone
-                />
+                      v-bind="item.chip"
-              </slot>
+                      :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 })">
+                  <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">
+                    <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.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" />
+                      <span :class="ui.itemLabelSuffix({ class: props.ui?.itemLabelSuffix, active: active || item.active })" v-html="item.suffixHtml || item.suffix" />
-                </slot>
+                    </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>
-                  <UIcon v-else-if="group.highlightedIcon" :name="group.highlightedIcon" :class="ui.itemTrailingHighlightedIcon({ class: props.ui?.itemTrailingHighlightedIcon })" />
-                </slot>
 
-                <ListboxItemIndicator as-child>
+                  <span :class="ui.itemTrailing({ class: props.ui?.itemTrailing })">
-                  <UIcon :name="selectedIcon || appConfig.ui.icons.check" :class="ui.itemTrailingIcon({ class: props.ui?.itemTrailingIcon })" />
+                    <slot :name="item.slot ? `${item.slot}-trailing` : group.slot ? `${group.slot}-trailing` : `item-trailing`" :item="item" :index="index">
-                </ListboxItemIndicator>
+                      <span v-if="item.kbds?.length" :class="ui.itemTrailingKbds({ class: props.ui?.itemTrailingKbds })">
-              </span>
+                        <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" />
-            </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>
+              </ULinkBase>
+            </ULink>
           </ListboxItem>
         </ListboxGroup>
       </div>

test/components/CommandPalette.spec.ts

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