feat(CommandPalette): support link props in items

Resolves #3190
2026-01-23 00:15:05 +01:00 · 2025-01-28 14:50:37 +01:00
parent 527631d2d1
commit e2b78a78a4
9 changed files with 526 additions and 865 deletions
--- a/docs/app/components/content/examples/command-palette/CommandPaletteCustomSlotExample.vue
+++ b/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'
    }
  ]
 }]
--- a/docs/app/components/content/examples/command-palette/CommandPaletteOpenExample.vue
+++ b/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'
    }
--- a/docs/app/components/content/examples/command-palette/CommandPaletteSearchTermExample.vue
+++ b/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',
-      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'
    }
  }
 ]
--- a/docs/app/components/content/examples/command-palette/CommandPaletteSelectExample.vue
+++ b/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',
-          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>

--- a/docs/content/3.components/command-palette.md
+++ b/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.