npm - vue-command-kit - Versions diffs - 0.1.0 - Mend

vue-command-kit 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/LICENSE ADDED Viewed

@@ -0,0 +1,9 @@
+MIT License
+Copyright (c) 2026 yvng-jie
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md ADDED Viewed

@@ -0,0 +1,269 @@
+<p align="center">
+  <img src="https://img.shields.io/npm/v/vue-command-kit?color=blue&label=version" alt="npm">
+  <img src="https://img.shields.io/badge/vue-3.4%2B-brightgreen" alt="vue">
+  <img src="https://img.shields.io/badge/license-MIT-blue" alt="license">
+  <img src="https://img.shields.io/badge/bundle-3.4kB_gzip-green" alt="size">
+</p>
+<h1 align="center">⌘K — vue-cmdk</h1>
+<p align="center">
+  <b>A fast, composable, unstyled command palette for Vue 3.</b><br>
+  Press <kbd>⌘K</kbd> and take control.
+</p>
+---
+## 🧠 Inspiration
+This project is heavily inspired by two great projects:
+| Project | Author | Description |
+| --- | --- | --- |
+| [`vue-command-palette`](https://github.com/xiaoluoboding/vue-command-palette) | [@xiaoluoboding](https://github.com/xiaoluoboding) | The first composable command palette for Vue, with 590 ★ |
+| [`cmdk`](https://github.com/pacocoursey/cmdk) | [@pacocoursey](https://github.com/pacocoursey) | Fast, unstyled command menu React component (10k+ ★) |
+### Why another one?
+[`vue-command-palette`](https://github.com/xiaoluoboding/vue-command-palette) pioneered the ⌘K experience for Vue. Big thanks to [@xiaoluoboding](https://github.com/xiaoluoboding) for the original idea and work 🙌
+However, the project has been **inactive since September 2023** — 9 issues remain unanswered, no dependencies have been updated in years, and the bundle size is 28 kB. The Vue ecosystem deserves a **well-maintained, lightweight alternative** that keeps up with modern standards.
+**vue-cmdk** is built to fill that gap: same compound component API, zero dependencies, half the size, with full TypeScript support and a commitment to ongoing maintenance.
+### vs vue-command-palette (legacy reference)
+| Feature          |  `vue-command-palette`   |  `vue-cmdk`   |
+| ---------------- | :----------------------: | :-----------: |
+| 📦 Bundle (min)  |         28.2 kB          |  **11.8 kB**  |
+| 📦 Bundle (gzip) |          9.6 kB          |  **3.4 kB**   |
+| 🔍 Search        |   fuse.js (extra dep)    | **Built-in**  |
+| 📋 TypeScript    |         Partial          |   **Full**    |
+| 🔄 Async items   |            ❌            |      ✅       |
+| 🧩 Custom filter |            ❌            |      ✅       |
+| 🔒 Focus trap    |            ❌            |      ✅       |
+| 🧹 Dependencies  | 3 (fuse.js, nanoid, ...) |     **0**     |
+| 🔧 Maintenance   |  ❌ Inactive since 2023  | ✅ **Active** |
+---
+## ✨ Features
+- **🧩 Compound component API** — `<Command.Dialog>`, `<Command.List>`, `<Command.Item>`, etc.
+- **💄 Unstyled** — Bring your own CSS, zero opinions, full design control
+- **🔍 Built-in search** — Fast case-insensitive filtering with keyword matching
+- **⌨️ Keyboard-first** — Arrow keys, Enter, Escape — all built-in, no config needed
+- **📦 Tiny** — 3.4 kB gzipped, **zero runtime dependencies** (peer: `vue` only)
+- **🎯 TypeScript** — Full type inference and declaration files
+- **🔄 Dynamic items** — Pass items as a reactive array, swap anytime
+- **🛠 Custom filter** — Provide your own filter function
+- **♿ Accessible** — ARIA attributes, focus trap, `aria-live` region
+## 📊 Comparison with React cmdk
+`vue-cmdk` is a Vue 3 port inspired by the excellent [`cmdk`](https://github.com/pacocoursey/cmdk) (React). Below is the current feature parity status:
+| #   | Feature                                      |  React `cmdk`   |    `vue-cmdk`    |   Status   |
+| --- | -------------------------------------------- | :-------------: | :--------------: | :--------: |
+| 1   | `Command` root `value` / `onValueChange`     |       ✅        |        ❌        | 📋 Planned |
+| 2   | `Command` root `shouldFilter`                |       ✅        |        ❌        | 📋 Planned |
+| 3   | `Command` root `loop`                        |       ✅        |        ❌        | 📋 Planned |
+| 4   | `Command` root `label` (aria-label)          |       ✅        |        ❌        | 📋 Planned |
+| 5   | `Command.Dialog` `open` / `onOpenChange`     |    ✅ `open`    |   ✅ `visible`   |     ✅     |
+| 6   | `Command.Dialog` `container` (portal target) |       ✅        |        ❌        | 💡 Future  |
+| 7   | `Command.Input` `value` / `onValueChange`    |       ✅        | ✅ `searchQuery` |     ✅     |
+| 8   | `Command.Item` `forceMount`                  |       ✅        |        ❌        | 📋 Planned |
+| 9   | `Command.Item` `keywords`                    |       ✅        |        ✅        |     ✅     |
+| 10  | `Command.Item` `onSelect`                    |       ✅        |        ✅        |     ✅     |
+| 11  | `Command.Item` auto value from textContent   |       ✅        |        ❌        | 📋 Planned |
+| 12  | `Command.Group` `forceMount`                 |       ✅        |        ❌        | 📋 Planned |
+| 13  | `Command.Group` `heading`                    |       ✅        |        ✅        |     ✅     |
+| 14  | `Command.Separator` `alwaysRender`           |       ✅        |        ❌        | 💡 Future  |
+| 15  | `Command.Empty`                              |       ✅        |        ✅        |     ✅     |
+| 16  | `Command.Loading`                            |       ✅        |        ✅        |     ✅     |
+| 17  | `useCommandState()` state selector           |       ✅        |        ❌        | 📋 Planned |
+| 18  | **Nested items / Pages**                     |  ✅ (pattern)   |        ❌        | 📋 Planned |
+| 19  | **Built-in search / filtering**              |       ✅        |        ✅        |     ✅     |
+| 20  | **Custom filter function**                   | ✅ (rank-based) | ✅ (item-based)  |     ✅     |
+| 21  | **Global shortcut listener**                 |   ❌ (manual)   |  ✅ (built-in)   |  ✅ Bonus  |
+| 22  | **Keyboard navigation**                      |       ✅        |        ✅        |     ✅     |
+| 23  | **Focus trap**                               |   ✅ (Radix)    |   ✅ (custom)    |     ✅     |
+| 24  | **Zero dependencies**                        |  ❌ (Radix UI)  |   ✅ (0 deps)    | ✅ Better  |
+| 25  | **TypeScript**                               |       ✅        |        ✅        |     ✅     |
+| 26  | **Unstyled**                                 |       ✅        |        ✅        |     ✅     |
+| 27  | **Bundle size (gzip)**                       |      ~7 kB      |    **3.4 kB**    | ✅ Smaller |
+> **Legend** — ✅ Done · 📋 High/Medium priority · 💡 Low priority / Nice to have
+## 🚀 Install
+```bash
+npm install vue-command-kit
+```
+## Quick Start
+### Simple — items prop
+```vue
+<script setup lang="ts">
+  import { ref } from 'vue'
+  import { Command } from 'vue-command-kit'
+  import type { CommandItemData } from 'vue-command-kit'
+  const visible = ref(false)
+  const items: CommandItemData[] = [
+    { value: 'settings', label: 'Open settings', shortcut: '⌘,' },
+    { value: 'home', label: 'Go to home', shortcut: '⌘H' },
+  ]
+  function onSelect(item: CommandItemData) {
+    console.log('selected:', item.value)
+  }
+</script>
+<template>
+  <button @click="visible = true">Open (⌘K)</button>
+  <Command.Dialog
+    :visible="visible"
+    :items="items"
+    @update:visible="visible = $event"
+    @select="onSelect"
+  />
+</template>
+```
+### Advanced — custom slot content
+```vue
+<Command.Dialog :visible="visible" @update:visible="visible = $event">
+  <template #header>
+    <Command.Input placeholder="Search..." />
+  </template>
+  <template #body>
+    <Command.List>
+      <Command.Group heading="Favorites">
+        <Command.Item value="home" label="Home" />
+      </Command.Group>
+    </Command.List>
+  </template>
+</Command.Dialog>
+```
+### With custom filter
+```vue
+<script setup lang="ts">
+  import { Command } from 'vue-command-kit'
+  function myFilter(items: CommandItemData[], query: string) {
+    // Return filtered items, or null to use default filter
+    return items.filter((item) => item.label?.includes(query))
+  }
+</script>
+<template>
+  <Command.Dialog
+    :filter="myFilter"
+    ...
+  />
+</template>
+```
+## 📖 API
+### `<Command.Dialog>` Props
+| Prop            | Type                | Default               | Description                  |
+| --------------- | ------------------- | --------------------- | ---------------------------- |
+| `visible`       | `boolean`           | `false`               | Controlled open state        |
+| `items`         | `CommandItemData[]` | `[]`                  | Items to display             |
+| `placeholder`   | `string`            | `'Type a command...'` | Input placeholder            |
+| `filter`        | `FilterFn`          | —                     | Custom filter function       |
+| `loading`       | `boolean`           | `false`               | Show loading state           |
+| `autoFocus`     | `boolean`           | `true`                | Auto-focus input on open     |
+| `closeOnSelect` | `boolean`           | `true`                | Close dialog after selection |
+### `<Command.Dialog>` Events
+| Event            | Payload           | Description                      |
+| ---------------- | ----------------- | -------------------------------- |
+| `update:visible` | `boolean`         | Emitted when visibility changes  |
+| `select`         | `CommandItemData` | Emitted when an item is selected |
+### Components
+| Component             | Description                                    |
+| --------------------- | ---------------------------------------------- |
+| `<Command.Dialog>`    | Modal dialog with mask, transition, focus trap |
+| `<Command.Menu>`      | Inline command menu (non-modal)                |
+| `<Command.Input>`     | Search input with keyboard navigation          |
+| `<Command.List>`      | Scrollable list rendering `groupedItems`       |
+| `<Command.Group>`     | Group of items with heading                    |
+| `<Command.Item>`      | Single selectable command item                 |
+| `<Command.Empty>`     | Shown when no results match                    |
+| `<Command.Separator>` | Visual separator                               |
+| `<Command.Loading>`   | Loading indicator                              |
+### `CommandItemData`
+```ts
+interface CommandItemData {
+  value: string
+  label?: string
+  keywords?: string[]
+  shortcut?: string
+  group?: string
+  disabled?: boolean
+  icon?: Component
+  onSelect?: (item: CommandItemData) => void
+}
+```
+### `useCommandMenu()` Composable
+```ts
+import { useCommandMenu } from 'vue-command-kit'
+import type { UseCommandMenuReturn, FilterFn } from 'vue-command-kit'
+const menu: UseCommandMenuReturn = useCommandMenu(customFilter?)
+menu.items.value = [...]
+menu.open()
+menu.close()
+menu.toggle()
+```
+### Keyboard
+| Key      | Action                                 |
+| -------- | -------------------------------------- |
+| `↑` `↓`  | Navigate items (wraps around)          |
+| `Enter`  | Select current item                    |
+| `Escape` | Close dialog                           |
+| `Tab`    | Moves focus within dialog (focus trap) |
+## 🤝 Contributing
+```bash
+# dev
+pnpm dev
+# type check
+pnpm typecheck
+# build
+pnpm build
+```
+PRs and issues are welcome!
+## 📄 License
+MIT © [yvng-jie](https://github.com/yvng-jie)
+---
+<p align="center">
+  <sub>Made with ❤️ for the Vue community. Thanks to <a href="https://github.com/xiaoluoboding">@xiaoluoboding</a> for the original <a href="https://github.com/xiaoluoboding/vue-command-palette">vue-command-palette</a>.</sub>
+</p>

package/dist/index.d.ts ADDED Viewed

@@ -0,0 +1,27 @@
+// vue-cmdk — type definitions
+export { useCommandMenu } from './useCommandMenu'
+export type { FilterFn, UseCommandMenuReturn } from './useCommandMenu'
+export type * from './types'
+import type { Component } from 'vue'
+export const Command: {
+  Menu: Component
+  Dialog: Component
+  Input: Component
+  List: Component
+  Group: Component
+  Item: Component
+  Empty: Component
+  Separator: Component
+  Loading: Component
+}
+export const CommandMenu: Component
+export const CommandDialog: Component
+export const CommandInput: Component
+export const CommandList: Component
+export const CommandGroup: Component
+export const CommandItem: Component
+export const CommandEmpty: Component
+export const CommandSeparator: Component
+export const CommandLoading: Component

package/dist/injectionKeys.d.ts ADDED Viewed

@@ -0,0 +1,7 @@
+import { InjectionKey } from 'vue';
+import { CommandItemData } from './types';
+import { UseCommandMenuReturn } from './useCommandMenu';
+export declare const CMDK_STATE: InjectionKey<UseCommandMenuReturn>;
+export declare const CMDK_LOADING: InjectionKey<() => boolean>;
+export declare const CMDK_CLOSE_ON_SELECT: InjectionKey<() => boolean>;
+export declare const CMDK_SELECT_HANDLER: InjectionKey<(item: CommandItemData) => void>;

package/dist/types.d.ts ADDED Viewed

@@ -0,0 +1,48 @@
+import { Component, VNode } from 'vue';
+/** A single command item */
+export interface CommandItemData {
+    /** Unique value for this item */
+    value: string;
+    /** Display label (falls back to value) */
+    label?: string;
+    /** Optional keywords for search matching */
+    keywords?: string[];
+    /** Optional shortcut display (e.g. "⌘S") */
+    shortcut?: string;
+    /** Group this item belongs to */
+    group?: string;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Custom render icon or prefix */
+    icon?: Component | VNode | (() => VNode);
+    /** Callback when item is selected */
+    onSelect?: (item: CommandItemData) => void;
+}
+/** Props shared across command components */
+export interface CommandRootProps {
+    /** Controlled open state */
+    visible?: boolean;
+    /** Search query (v-model) */
+    searchQuery?: string;
+    /** Placeholder for search input */
+    placeholder?: string;
+    /** Custom filter function. Return items to display, or null to use default filter */
+    filter?: (items: CommandItemData[], query: string) => CommandItemData[];
+    /** Auto-focus input on open */
+    autoFocus?: boolean;
+    /** Close after selecting an item */
+    closeOnSelect?: boolean;
+    /** Whether the menu is loading */
+    loading?: boolean;
+}
+/** Emitted events */
+export interface CommandRootEmits {
+    (e: 'update:visible', value: boolean): void;
+    (e: 'update:searchQuery', value: string): void;
+    (e: 'select', item: CommandItemData): void;
+}
+/** Group definition */
+export interface CommandGroupData {
+    heading: string;
+    items: CommandItemData[];
+}

package/dist/useCommandMenu.d.ts ADDED Viewed

@@ -0,0 +1,20 @@
+import { Ref, ComputedRef } from 'vue';
+import { CommandItemData, CommandGroupData } from './types';
+export type FilterFn = (items: CommandItemData[], query: string) => CommandItemData[] | null;
+export interface UseCommandMenuReturn {
+    visible: Ref<boolean>;
+    searchQuery: Ref<string>;
+    activeIndex: Ref<number>;
+    items: Ref<CommandItemData[]>;
+    toggle: () => void;
+    open: () => void;
+    close: () => void;
+    defaultFilter: (allItems: CommandItemData[], query: string) => CommandItemData[];
+    groupItems: (filtered: CommandItemData[]) => CommandGroupData[];
+    filteredItems: ComputedRef<CommandItemData[]>;
+    groupedItems: ComputedRef<CommandGroupData[]>;
+    selectNext: () => void;
+    selectPrev: () => void;
+    selectCurrent: () => void;
+}
+export declare function useCommandMenu(customFilter?: FilterFn, onItemSelect?: (item: CommandItemData) => void): UseCommandMenuReturn;

package/dist/vue-cmdk.js ADDED Viewed

@@ -0,0 +1,486 @@
+import { ref as O, computed as E, watch as C, onUnmounted as oe, defineComponent as I, provide as g, openBlock as u, createElementBlock as i, renderSlot as S, unref as m, inject as w, createElementVNode as k, createCommentVNode as $, toDisplayString as B, normalizeClass as ae, createBlock as T, resolveDynamicComponent as ne, Fragment as L, createTextVNode as N, createVNode as D, renderList as V, withCtx as j, nextTick as le, Teleport as se, Transition as re } from "vue";
+const ce = {
+  "⌘": "metaKey",
+  "⌃": "ctrlKey",
+  "⌥": "altKey",
+  "⇧": "shiftKey"
+};
+function ue(o) {
+  let e = o;
+  const s = {};
+  let n = !0;
+  for (; n && e.length > 0; ) {
+    n = !1;
+    for (const [r, t] of Object.entries(ce))
+      if (e.startsWith(r)) {
+        s[t] = !0, e = e.slice(r.length), n = !0;
+        break;
+      }
+  }
+  return e ? { ...s, key: e.toLowerCase() } : null;
+}
+function ie(o, e) {
+  return e ? o.key.toLowerCase() === e.key && !!o.metaKey == !!e.metaKey && !!o.ctrlKey == !!e.ctrlKey && !!o.altKey == !!e.altKey && !!o.shiftKey == !!e.shiftKey : !1;
+}
+function q(o, e) {
+  const s = O(!1), n = O(""), r = O(0), t = O([]), v = () => {
+    s.value = !s.value;
+  }, a = () => {
+    s.value = !0, r.value = 0;
+  }, l = () => {
+    s.value = !1, n.value = "";
+  };
+  function h(c, f) {
+    if (!f.trim()) return c;
+    const d = f.toLowerCase();
+    return c.filter((_) => {
+      var b, G;
+      return !!(_.value.toLowerCase().includes(d) || (b = _.label) != null && b.toLowerCase().includes(d) || (G = _.keywords) != null && G.some((te) => te.toLowerCase().includes(d)));
+    });
+  }
+  function p(c) {
+    const f = /* @__PURE__ */ new Map();
+    for (const _ of c) {
+      const b = _.group || "__ungrouped__";
+      f.has(b) || f.set(b, []), f.get(b).push(_);
+    }
+    const d = [];
+    f.has("__ungrouped__") && (d.push({ heading: "", items: f.get("__ungrouped__") }), f.delete("__ungrouped__"));
+    for (const [_, b] of f)
+      d.push({ heading: _, items: b });
+    return d;
+  }
+  const y = E(() => {
+    if (o) {
+      const c = o(t.value, n.value);
+      if (c !== null) return c;
+    }
+    return h(t.value, n.value);
+  }), Q = E(() => p(y.value));
+  function Y() {
+    const c = y.value.length;
+    c !== 0 && (r.value = (r.value + 1) % c);
+  }
+  function Z() {
+    const c = y.value.length;
+    c !== 0 && (r.value = (r.value - 1 + c) % c);
+  }
+  function ee() {
+    var f;
+    const c = y.value[r.value];
+    c && !c.disabled && ((f = c.onSelect) == null || f.call(c, c), l());
+  }
+  function P(c) {
+    var f;
+    for (const d of t.value) {
+      if (d.disabled || !d.shortcut) continue;
+      const _ = ue(d.shortcut);
+      if (ie(c, _)) {
+        c.preventDefault(), c.stopPropagation(), (f = d.onSelect) == null || f.call(d, d), e == null || e(d), l();
+        return;
+      }
+    }
+  }
+  let x = null;
+  return C(
+    t,
+    (c) => {
+      x && (x(), x = null), c.some((d) => d.shortcut) && typeof window < "u" && (window.addEventListener("keydown", P), x = () => window.removeEventListener("keydown", P));
+    },
+    { immediate: !0, flush: "sync" }
+  ), oe(() => {
+    x && x();
+  }), {
+    visible: s,
+    searchQuery: n,
+    activeIndex: r,
+    items: t,
+    toggle: v,
+    open: a,
+    close: l,
+    defaultFilter: h,
+    groupItems: p,
+    filteredItems: y,
+    groupedItems: Q,
+    selectNext: Y,
+    selectPrev: Z,
+    selectCurrent: ee
+  };
+}
+const K = Symbol("cmdk-state"), A = Symbol("cmdk-loading"), F = Symbol("cmdk-close-on-select"), M = Symbol("cmdk-select-handler"), de = {
+  "data-cmdk-root": "",
+  role: "combobox",
+  "aria-expanded": "true",
+  "aria-haspopup": "listbox"
+}, fe = /* @__PURE__ */ I({
+  __name: "CommandMenu",
+  props: {
+    visible: { type: Boolean },
+    searchQuery: {},
+    placeholder: { default: "Type a command or search..." },
+    filter: {},
+    autoFocus: { type: Boolean, default: !0 },
+    closeOnSelect: { type: Boolean, default: !0 },
+    loading: { type: Boolean }
+  },
+  emits: ["update:visible", "update:searchQuery", "select"],
+  setup(o, { expose: e, emit: s }) {
+    const n = o, r = s, t = q(n.filter, (a) => {
+      r("select", a), n.closeOnSelect && t.close();
+    });
+    t.visible.value = n.visible ?? !0, t.searchQuery.value = n.searchQuery ?? "", g(K, t), g("cmdk-filter", n.filter), g(A, () => n.loading ?? !1), g(F, () => n.closeOnSelect), g(M, (a) => {
+      r("select", a), n.closeOnSelect && t.close();
+    }), C(
+      () => n.visible,
+      (a) => {
+        a !== void 0 && (t.visible.value = a);
+      }
+    ), C(t.visible, (a) => r("update:visible", a)), C(
+      () => n.searchQuery,
+      (a) => {
+        a !== void 0 && (t.searchQuery.value = a);
+      }
+    ), C(t.searchQuery, (a) => r("update:searchQuery", a));
+    function v(a) {
+      r("select", a), n.closeOnSelect && t.close();
+    }
+    return e({
+      open: t.open,
+      close: t.close,
+      toggle: t.toggle,
+      searchQuery: t.searchQuery,
+      items: t.items,
+      filteredItems: t.filteredItems
+    }), (a, l) => (u(), i("div", de, [
+      S(a.$slots, "default", {
+        items: m(t).items,
+        filteredItems: m(t).filteredItems,
+        searchQuery: m(t).searchQuery,
+        selectNext: m(t).selectNext,
+        selectPrev: m(t).selectPrev,
+        selectCurrent: m(t).selectCurrent,
+        handleSelect: v
+      })
+    ]));
+  }
+}), me = ["value", "placeholder", "autofocus"], R = /* @__PURE__ */ I({
+  __name: "CommandInput",
+  props: {
+    placeholder: { default: "Type a command or search..." },
+    autoFocus: { type: Boolean, default: !0 }
+  },
+  setup(o) {
+    const e = w(K), s = w(M, () => {
+    });
+    function n(t) {
+      e.searchQuery.value = t.target.value, e.activeIndex.value = 0;
+    }
+    function r(t) {
+      var v;
+      if (t.key === "ArrowDown")
+        t.preventDefault(), e.selectNext();
+      else if (t.key === "ArrowUp")
+        t.preventDefault(), e.selectPrev();
+      else if (t.key === "Enter") {
+        t.preventDefault();
+        const a = e.filteredItems.value[e.activeIndex.value];
+        a && !a.disabled && ((v = a.onSelect) == null || v.call(a, a), s(a));
+      }
+    }
+    return (t, v) => (u(), i("input", {
+      "data-cmdk-input": "",
+      value: m(e).searchQuery.value,
+      placeholder: o.placeholder,
+      role: "searchbox",
+      autocomplete: "off",
+      autocorrect: "off",
+      spellcheck: "false",
+      autofocus: o.autoFocus,
+      onInput: n,
+      onKeydown: r
+    }, null, 40, me));
+  }
+}), ve = {
+  key: 0,
+  "data-cmdk-empty": ""
+}, U = /* @__PURE__ */ I({
+  __name: "CommandEmpty",
+  setup(o) {
+    const e = w(K);
+    return (s, n) => m(e).searchQuery.value && m(e).filteredItems.value.length === 0 ? (u(), i("div", ve, [
+      S(s.$slots, "default", {}, () => [
+        n[0] || (n[0] = k("span", null, "No results found.", -1))
+      ])
+    ])) : $("", !0);
+  }
+}), he = {
+  key: 0,
+  "data-cmdk-loading": ""
+}, z = /* @__PURE__ */ I({
+  __name: "CommandLoading",
+  props: {
+    loading: { type: Boolean, default: !1 }
+  },
+  setup(o) {
+    return (e, s) => o.loading ? (u(), i("div", he, [
+      S(e.$slots, "default", {}, () => [
+        s[0] || (s[0] = k("span", null, "Loading...", -1))
+      ])
+    ])) : $("", !0);
+  }
+}), pe = {
+  "data-cmdk-group": "",
+  role: "group"
+}, ye = {
+  key: 0,
+  "data-cmdk-group-heading": "",
+  role: "presentation"
+}, _e = {
+  "data-cmdk-group-items": "",
+  role: "group"
+}, H = /* @__PURE__ */ I({
+  __name: "CommandGroup",
+  props: {
+    heading: {}
+  },
+  setup(o) {
+    return (e, s) => (u(), i("div", pe, [
+      o.heading ? (u(), i("div", ye, B(o.heading), 1)) : $("", !0),
+      k("div", _e, [
+        S(e.$slots, "default")
+      ])
+    ]));
+  }
+}), ge = ["aria-selected", "aria-disabled", "data-value"], ke = {
+  key: 0,
+  "data-cmdk-item-icon": ""
+}, be = { "data-cmdk-item-label": "" }, Ce = {
+  key: 1,
+  "data-cmdk-item-shortcut": ""
+}, W = /* @__PURE__ */ I({
+  __name: "CommandItem",
+  props: {
+    value: {},
+    label: {},
+    keywords: {},
+    shortcut: {},
+    disabled: { type: Boolean, default: !1 },
+    icon: {},
+    onSelect: {}
+  },
+  setup(o) {
+    const e = o, s = w(K), n = E(() => ({
+      value: e.value,
+      label: e.label,
+      keywords: e.keywords,
+      shortcut: e.shortcut,
+      disabled: e.disabled,
+      icon: e.icon,
+      onSelect: e.onSelect
+    })), r = E(() => {
+      const l = s.filteredItems.value[s.activeIndex.value];
+      return (l == null ? void 0 : l.value) === e.value;
+    }), t = w(F, () => !0), v = w(M, () => {
+    });
+    function a() {
+      var l;
+      e.disabled || ((l = e.onSelect) == null || l.call(e, n.value), v(n.value), t() && s.close());
+    }
+    return (l, h) => (u(), i("div", {
+      "data-cmdk-item": "",
+      role: "option",
+      "aria-selected": r.value,
+      "aria-disabled": o.disabled,
+      "data-value": o.value,
+      class: ae({ active: r.value, disabled: o.disabled }),
+      onClick: a,
+      onPointerenter: h[0] || (h[0] = () => {
+        const p = m(s).filteredItems.value.findIndex((y) => y.value === o.value);
+        p >= 0 && (m(s).activeIndex.value = p);
+      })
+    }, [
+      S(l.$slots, "default", {
+        item: n.value,
+        active: r.value
+      }, () => [
+        o.icon ? (u(), i("span", ke, [
+          (u(), T(ne(o.icon)))
+        ])) : $("", !0),
+        k("span", be, B(o.label || o.value), 1),
+        o.shortcut ? (u(), i("span", Ce, B(o.shortcut), 1)) : $("", !0)
+      ])
+    ], 42, ge));
+  }
+}), Se = (o, e) => {
+  const s = o.__vccOpts || o;
+  for (const [n, r] of e)
+    s[n] = r;
+  return s;
+}, we = {}, $e = {
+  "data-cmdk-separator": "",
+  role: "separator"
+};
+function Ie(o, e) {
+  return u(), i("div", $e);
+}
+const J = /* @__PURE__ */ Se(we, [["render", Ie]]), xe = {
+  "data-cmdk-list": "",
+  role: "listbox"
+}, Le = {
+  "aria-live": "polite",
+  "aria-atomic": "true",
+  class: "sr-only"
+}, X = /* @__PURE__ */ I({
+  __name: "CommandList",
+  setup(o) {
+    const e = w(K), s = w(A, () => !1), n = E(() => e.groupedItems.value);
+    return (r, t) => (u(), i("div", xe, [
+      k("div", Le, [
+        m(e).searchQuery.value && m(e).filteredItems.value.length === 0 ? (u(), i(L, { key: 0 }, [
+          N("No results found")
+        ], 64)) : m(s)() ? (u(), i(L, { key: 1 }, [
+          N("Loading")
+        ], 64)) : (u(), i(L, { key: 2 }, [
+          N(B(m(e).filteredItems.value.length) + " items", 1)
+        ], 64))
+      ]),
+      D(U),
+      D(z, {
+        loading: m(s)()
+      }, null, 8, ["loading"]),
+      (u(!0), i(L, null, V(n.value, (v) => (u(), i(L, {
+        key: v.heading || "__ungrouped__"
+      }, [
+        D(H, {
+          heading: v.heading
+        }, {
+          default: j(() => [
+            (u(!0), i(L, null, V(v.items, (a) => (u(), T(W, {
+              key: a.value,
+              value: a.value,
+              label: a.label,
+              shortcut: a.shortcut,
+              disabled: a.disabled,
+              icon: a.icon,
+              "on-select": a.onSelect
+            }, null, 8, ["value", "label", "shortcut", "disabled", "icon", "on-select"]))), 128))
+          ]),
+          _: 2
+        }, 1032, ["heading"]),
+        v !== n.value[n.value.length - 1] ? (u(), T(J, { key: 0 })) : $("", !0)
+      ], 64))), 128))
+    ]));
+  }
+}), De = { "data-cmdk-dialog-wrapper": "" }, Ke = { "data-cmdk-dialog-header": "" }, Ee = { "data-cmdk-dialog-body": "" }, Qe = {
+  key: 0,
+  "data-cmdk-dialog-footer": ""
+}, Oe = /* @__PURE__ */ I({
+  __name: "CommandDialog",
+  props: {
+    visible: { type: Boolean, default: !1 },
+    placeholder: { default: "Type a command or search..." },
+    autoFocus: { type: Boolean, default: !0 },
+    closeOnSelect: { type: Boolean, default: !0 },
+    items: { default: () => [] },
+    filter: {},
+    loading: { type: Boolean, default: !1 }
+  },
+  emits: ["update:visible", "select"],
+  setup(o, { emit: e }) {
+    const s = o, n = e, r = q(s.filter, t);
+    g(K, r), g(A, () => s.loading), g(F, () => s.closeOnSelect), C(
+      () => s.items,
+      (l) => {
+        r.items.value = l;
+      },
+      { immediate: !0 }
+    ), C(
+      () => s.visible,
+      (l) => {
+        r.visible.value = l;
+      },
+      { immediate: !0 }
+    ), C(r.visible, async (l) => {
+      if (n("update:visible", l), l) {
+        await le();
+        const h = document.querySelector("[data-cmdk-input]");
+        h == null || h.focus();
+      }
+    });
+    function t(l) {
+      n("select", l), s.closeOnSelect && r.close();
+    }
+    g(M, t);
+    function v(l) {
+      l.target === l.currentTarget && r.close();
+    }
+    function a(l) {
+      if (l.key === "Escape" && (l.preventDefault(), r.close()), l.key === "Tab") {
+        const p = l.currentTarget.querySelectorAll(
+          'input, button, [href], select, textarea, [tabindex]:not([tabindex="-1"])'
+        );
+        if (p.length === 0) return;
+        const y = p[0], Q = p[p.length - 1];
+        l.shiftKey ? document.activeElement === y && (l.preventDefault(), Q.focus()) : document.activeElement === Q && (l.preventDefault(), y.focus());
+      }
+    }
+    return (l, h) => (u(), T(se, { to: "body" }, [
+      D(re, { name: "cmdk-dialog" }, {
+        default: j(() => [
+          m(r).visible.value ? (u(), i("div", {
+            key: 0,
+            "data-cmdk-dialog": "",
+            onKeydown: a
+          }, [
+            k("div", {
+              "data-cmdk-dialog-mask": "",
+              onClick: v
+            }),
+            k("div", De, [
+              k("div", Ke, [
+                S(l.$slots, "header", {}, () => [
+                  D(R, {
+                    placeholder: o.placeholder,
+                    "auto-focus": o.autoFocus
+                  }, null, 8, ["placeholder", "auto-focus"])
+                ])
+              ]),
+              k("div", Ee, [
+                S(l.$slots, "body", {}, () => [
+                  D(X)
+                ])
+              ]),
+              l.$slots.footer ? (u(), i("div", Qe, [
+                S(l.$slots, "footer")
+              ])) : $("", !0)
+            ])
+          ], 32)) : $("", !0)
+        ]),
+        _: 3
+      })
+    ]));
+  }
+}), Te = {
+  Menu: fe,
+  Dialog: Oe,
+  Input: R,
+  List: X,
+  Group: H,
+  Item: W,
+  Empty: U,
+  Separator: J,
+  Loading: z
+};
+export {
+  Te as Command,
+  Oe as CommandDialog,
+  U as CommandEmpty,
+  H as CommandGroup,
+  R as CommandInput,
+  W as CommandItem,
+  X as CommandList,
+  z as CommandLoading,
+  fe as CommandMenu,
+  J as CommandSeparator,
+  q as useCommandMenu
+};

package/dist/vue-cmdk.umd.cjs ADDED Viewed

@@ -0,0 +1 @@

package/package.json ADDED Viewed

@@ -0,0 +1,71 @@
+{
+  "name": "vue-command-kit",
+  "version": "0.1.0",
+  "description": "⌘K — Fast, composable, unstyled command menu for Vue 3",
+  "type": "module",
+  "main": "./dist/vue-cmdk.umd.cjs",
+  "module": "./dist/vue-cmdk.js",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/vue-cmdk.js",
+      "require": "./dist/vue-cmdk.umd.cjs"
+    }
+  },
+  "files": [
+    "dist/vue-cmdk.js",
+    "dist/vue-cmdk.umd.cjs",
+    "dist/*.d.ts"
+  ],
+  "sideEffects": false,
+  "keywords": [
+    "vue",
+    "command",
+    "palette",
+    "command-palette",
+    "cmdk",
+    "cmd-k",
+    "vue3",
+    "keyboard",
+    "menu"
+  ],
+  "license": "MIT",
+  "author": "yvng-jie (https://github.com/yvng-jie)",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/yvng-jie/vue-cmdk"
+  },
+  "homepage": "https://github.com/yvng-jie/vue-cmdk#readme",
+  "bugs": {
+    "url": "https://github.com/yvng-jie/vue-cmdk/issues"
+  },
+  "engines": {
+    "node": ">=22.13"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org"
+  },
+  "peerDependencies": {
+    "vue": "^3.4.0"
+  },
+  "devDependencies": {
+    "@microsoft/api-extractor": "^7.58.7",
+    "@types/node": "^25.9.1",
+    "@vitejs/plugin-vue": "^5.0.0",
+    "@vue/shared": "^3.5.35",
+    "highlight.js": "^11.11.1",
+    "typescript": "^5.7.0",
+    "vite": "^6.0.0",
+    "vite-plugin-dts": "^4.0.0",
+    "vue": "^3.5.0",
+    "vue-tsc": "^2.0.0"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build && node scripts/postbuild.mjs",
+    "preview": "vite preview",
+    "build:demo": "vite build --config vite.demo.config.ts",
+    "typecheck": "vue-tsc --noEmit"
+  }
+}