feat(VCommandPalette): add new command palette component

packages/api-generator/src/locale/en/VCommandPalette.json

@@ -0,0 +1,25 @@
+{
+  "props": {
+    "modelValue": "Controls the visibility of the command palette dialog. Use `v-model` for two-way binding.",
+    "search": "The current search query. Use `v-model:search` to control or monitor the search input value.",
+    "items": "Array of command palette items. Objects should have **title** and optionally **subtitle**, **prependIcon**, **appendIcon**, **prependAvatar**, **appendAvatar**, **hotkey**, **onClick**, **to**, **href**, and **value** properties. Use `type: 'subheader'` with a **title** for section headers, or `type: 'divider'` for visual separators between groups.",
+    "hotkey": "Global keyboard shortcut to toggle the palette. Accepts hotkey strings like `'ctrl+shift+p'` or `'meta+j'`. The shortcut is automatically registered on mount and cleaned up on unmount.",
+    "placeholder": "Placeholder text displayed in the search input. Defaults to the `$vuetify.command.search` locale string.",
+    "inputIcon": "Icon to display at the start of the search input field. Defaults to `'mdi-magnify'`.",
+    "noDataText": "Text displayed when no items match the current search query. Defaults to `$vuetify.noDataText`.",
+    "location": "Controls the position of the dialog. Supports values like `'top'`, `'bottom'`, `'center'` and combinations. Passed to the underlying **v-dialog**.",
+    "activator": "Element to use as the activator. Set to `'parent'` to use the parent element, or provide a CSS selector or element reference. Passed to the underlying **v-dialog**.",
+    "dialogProps": "Additional props to pass through to the underlying **v-dialog** component. Useful for customizing behavior like `persistent`, `fullscreen`, `width`, `maxWidth`, etc."
+  },
+  "events": {
+    "update:modelValue": "Emitted when the dialog visibility changes.",
+    "update:search": "Emitted when the search query changes.",
+    "click:item": "Emitted when an item is clicked or activated via Enter key. The payload includes the selected item object and the triggering event (MouseEvent or KeyboardEvent). The palette automatically closes after this event."
+  },
+  "slots": {
+    "prepend": "Content to render above the search input, inside the command palette card. Useful for headers, breadcrumbs, or instructions.",
+    "input": "Custom search input field. Replaces the default **v-text-field**. Useful for providing a completely custom search implementation.",
+    "append": "Content to render below the items list, inside the command palette card. Useful for footers, keyboard shortcut hints, or additional actions.",
+    "no-data": "Custom content to display when no items match the search query. Replaces the default no-data message."
+  }
+}

packages/api-generator/src/locale/en/VList.json

@@ -30,9 +30,10 @@
     "update:selected": "Emitted when the list item is selected."
   },
   "slots": {
-    "divider": "Slot for the divider.",
-    "header": "Slot for the header.",
-    "subheader": "Removes the top padding from `v-list-subheader` components. When used as a **String**, renders a subheader for you.",
+    "item": "Slot for rendering custom list items. Receives `{ props }` where `props` contains item data (`title`, `subtitle`, `value`, etc.) plus `index` (the item's position in the list). Use this to completely customize item rendering while still using VList's navigation and selection features.",
+    "divider": "Slot for rendering custom dividers. Receives `{ props }` containing divider item data including `value`. Note: dividers do not receive `index` since they are not navigable items.",
+    "subheader": "Slot for rendering custom subheaders. Receives `{ props }` containing subheader item data including `title` and `value`. Note: subheaders do not receive `index` since they are not navigable items.",
+    "header": "Slot for rendering custom group headers when using nested items. Receives `{ props }` containing the group's header item data plus activator props for expand/collapse functionality.",
     "children": "Slot for the children.",
     "focus": "Slot for the focus.",
     "open": "Slot for the open.",

packages/docs/src/data/nav.json

@@ -254,6 +254,10 @@
         "title": "color-inputs",
         "subfolder": "components"
       },
+      {
+        "title": "command-palettes",
+        "subfolder": "components"
+      },
       {
         "title": "date-inputs",
         "subfolder": "components"

packages/docs/src/examples/v-command-palette/prop-dialog.vue

@@ -0,0 +1,206 @@
+<template>
+  <v-container fluid>
+    <v-row>
+      <v-col cols="12" md="4">
+        <v-card>
+          <v-card-title>Default (Center)</v-card-title>
+          <v-card-text>
+            <v-btn block @click="dialogs.default = true">
+              Open Default
+            </v-btn>
+          </v-card-text>
+        </v-card>
+
+        <v-command-palette
+          v-model="dialogs.default"
+          :items="items"
+          placeholder="Search..."
+          @click:item="handleClick"
+        ></v-command-palette>
+      </v-col>
+
+      <v-col cols="12" md="4">
+        <v-card>
+          <v-card-title>Top Position</v-card-title>
+          <v-card-text>
+            <v-btn block @click="dialogs.top = true">
+              Open at Top
+            </v-btn>
+          </v-card-text>
+        </v-card>
+
+        <v-command-palette
+          v-model="dialogs.top"
+          :items="items"
+          location="top"
+          placeholder="Search..."
+          @click:item="handleClick"
+        ></v-command-palette>
+      </v-col>
+
+      <v-col cols="12" md="4">
+        <v-card>
+          <v-card-title>Parent Activator</v-card-title>
+          <v-card-text>
+            <v-btn block>
+              Click to Open
+              <v-command-palette
+                v-model="dialogs.activator"
+                :items="items"
+                activator="parent"
+                placeholder="Search..."
+                @click:item="handleClick"
+              ></v-command-palette>
+            </v-btn>
+          </v-card-text>
+        </v-card>
+      </v-col>
+    </v-row>
+
+    <v-row>
+      <v-col cols="12">
+        <v-card>
+          <v-card-title>Custom Dialog Props</v-card-title>
+          <v-card-text>
+            <v-btn block @click="dialogs.custom = true">
+              Open Persistent (No Close on Click Outside)
+            </v-btn>
+          </v-card-text>
+        </v-card>
+
+        <v-command-palette
+          v-model="dialogs.custom"
+          :dialog-props="{ persistent: true }"
+          :items="items"
+          placeholder="Search..."
+          @click:item="handleClick"
+        ></v-command-palette>
+      </v-col>
+    </v-row>
+
+    <v-snackbar v-model="snackbar" :timeout="2000">
+      Selected: {{ selectedItem }}
+    </v-snackbar>
+  </v-container>
+</template>
+
+<script setup>
+  import { ref } from 'vue'
+
+  const dialogs = ref({
+    default: false,
+    top: false,
+    activator: false,
+    custom: false,
+  })
+
+  const snackbar = ref(false)
+  const selectedItem = ref('')
+
+  const items = [
+    {
+      title: 'New File',
+      subtitle: 'Create a new file',
+      prependIcon: 'mdi-file-plus',
+      value: 'new-file',
+    },
+    {
+      title: 'New Folder',
+      subtitle: 'Create a new folder',
+      prependIcon: 'mdi-folder-plus',
+      value: 'new-folder',
+    },
+    {
+      title: 'Open',
+      subtitle: 'Open a file or project',
+      prependIcon: 'mdi-folder-open',
+      value: 'open',
+    },
+    {
+      type: 'divider',
+    },
+    {
+      type: 'subheader',
+      title: 'Recent',
+    },
+    {
+      title: 'Project Alpha',
+      subtitle: 'Last opened 2 hours ago',
+      prependIcon: 'mdi-folder',
+      value: 'project-alpha',
+    },
+    {
+      title: 'Project Beta',
+      subtitle: 'Last opened yesterday',
+      prependIcon: 'mdi-folder',
+      value: 'project-beta',
+    },
+  ]
+
+  function handleClick (item) {
+    selectedItem.value = item.title
+    snackbar.value = true
+  }
+</script>
+
+<script>
+  export default {
+    data () {
+      return {
+        dialogs: {
+          default: false,
+          top: false,
+          activator: false,
+          custom: false,
+        },
+        snackbar: false,
+        selectedItem: '',
+        items: [
+          {
+            title: 'New File',
+            subtitle: 'Create a new file',
+            prependIcon: 'mdi-file-plus',
+            value: 'new-file',
+          },
+          {
+            title: 'New Folder',
+            subtitle: 'Create a new folder',
+            prependIcon: 'mdi-folder-plus',
+            value: 'new-folder',
+          },
+          {
+            title: 'Open',
+            subtitle: 'Open a file or project',
+            prependIcon: 'mdi-folder-open',
+            value: 'open',
+          },
+          {
+            type: 'divider',
+          },
+          {
+            type: 'subheader',
+            title: 'Recent',
+          },
+          {
+            title: 'Project Alpha',
+            subtitle: 'Last opened 2 hours ago',
+            prependIcon: 'mdi-folder',
+            value: 'project-alpha',
+          },
+          {
+            title: 'Project Beta',
+            subtitle: 'Last opened yesterday',
+            prependIcon: 'mdi-folder',
+            value: 'project-beta',
+          },
+        ],
+      }
+    },
+    methods: {
+      handleClick (item) {
+        this.selectedItem = item.title
+        this.snackbar = true
+      },
+    },
+  }
+</script>