vue-command-kit 0.1.0 → 0.1.1

package/README.md

@@ -11,7 +11,9 @@
   Press <kbd>⌘K</kbd> and take control.
 </p>
 
----
+<p align="center">
+  <img src="./demo.gif" alt="vue-cmdk demo" width="720">
+</p>
 
 ## 🧠 Inspiration
 
@@ -171,26 +173,92 @@ npm install vue-command-kit
 </template>
 ```
 
+### With v-model:searchQuery
+
+```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 query = ref('')
+
+  const items: CommandItemData[] = [
+    { value: 'home', label: 'Home', keywords: ['dashboard'] },
+    { value: 'settings', label: 'Settings' },
+  ]
+</script>
+
+<template>
+  <Command.Dialog
+    :visible="visible"
+    :items="items"
+    v-model:searchQuery="query"
+    @update:visible="visible = $event"
+  />
+</template>
+```
+
+### Async data + loading
+
+```vue
+<script setup lang="ts">
+  import { ref, watch } from 'vue'
+  import { Command } from 'vue-command-kit'
+  import type { CommandItemData } from 'vue-command-kit'
+
+  const visible = ref(false)
+  const loading = ref(false)
+  const items = ref<CommandItemData[]>([])
+
+  watch(visible, async (v) => {
+    if (v) {
+      loading.value = true
+      const data = await fetch('/api/commands').then((r) => r.json())
+      items.value = data.map((d: any) => ({
+        value: d.id,
+        label: d.name,
+        group: d.category,
+      }))
+      loading.value = false
+    }
+  })
+</script>
+
+<template>
+  <Command.Dialog
+    :visible="visible"
+    :items="items"
+    :loading="loading"
+    @update:visible="visible = $event"
+    @select="console.log('selected', $event)"
+  />
+</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 |
+| Prop            | Type                | Default               | Description                          |
+| --------------- | ------------------- | --------------------- | ------------------------------------ |
+| `visible`       | `boolean`           | `false`               | Controlled open state                |
+| `items`         | `CommandItemData[]` | `[]`                  | Items to display                     |
+| `searchQuery`   | `string`            | `''`                  | Search query (`v-model:searchQuery`) |
+| `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 |
+| Event                | Payload           | Description                       |
+| -------------------- | ----------------- | --------------------------------- |
+| `update:visible`     | `boolean`         | Emitted when visibility changes   |
+| `update:searchQuery` | `string`          | Emitted when search query changes |
+| `select`             | `CommandItemData` | Emitted when an item is selected  |
 
 ### Components
 
@@ -245,16 +313,69 @@ menu.toggle()
 
 ## 🤝 Contributing
 
+### Prerequisites
+
+- **Node.js** >= 22.13
+- **pnpm** >= 11.x
+
+### Setup
+
 ```bash
-# dev
+# Clone the repo
+git clone https://github.com/yvng-jie/vue-cmdk.git
+cd vue-cmdk
+
+# Install dependencies
+pnpm install
+
+# Start demo dev server
 pnpm dev
+```
+
+### Scripts
+
+| Command           | Description                               |
+| ----------------- | ----------------------------------------- |
+| `pnpm dev`        | Start demo dev server at `localhost:5173` |
+| `pnpm build`      | Build the library + type declarations     |
+| `pnpm typecheck`  | Run TypeScript type checking              |
+| `pnpm preview`    | Preview production build                  |
+| `pnpm build:demo` | Build demo site to `dist-demo/`           |
 
-# type check
-pnpm typecheck
+### Project Structure
 
-# build
-pnpm build
 ```
+src/
+├── useCommandMenu.ts     # core composable (state, filter, shortcuts)
+├── useCommandRoot.ts     # shared composable (provide/inject wiring)
+├── types.ts              # TypeScript type definitions
+├── injectionKeys.ts      # provide/inject keys
+├── utils/
+│   └── injectStrict.ts   # type-safe inject helper
+├── CommandMenu.vue       # inline command menu
+├── CommandDialog.vue     # modal dialog command palette
+├── CommandInput.vue      # search input
+├── CommandList.vue       # scrollable filtered list
+├── CommandGroup.vue      # group with heading
+├── CommandItem.vue       # single selectable item
+├── CommandEmpty.vue      # empty state
+├── CommandSeparator.vue  # visual separator
+├── CommandLoading.vue    # loading indicator
+├── index.ts              # barrel exports
+└── env.d.ts              # type shims
+demo/
+├── App.vue               # demo application
+├── main.ts               # demo entry
+└── style.css             # demo styles
+```
+
+### Pull Request Process
+
+1. Fork the repo and create a feature branch from `main`
+2. Make your changes and run `pnpm typecheck && pnpm build`
+3. Test your changes with `pnpm dev` (demo app)
+4. Update `CHANGELOG.md` with a description of your changes
+5. Submit a PR with a clear description of what and why
 
 PRs and issues are welcome!
 

package/dist/index.d.ts

@@ -6,15 +6,15 @@ 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
+  CommandMenu: Component
+  CommandDialog: Component
+  CommandInput: Component
+  CommandList: Component
+  CommandGroup: Component
+  CommandItem: Component
+  CommandEmpty: Component
+  CommandSeparator: Component
+  CommandLoading: Component
 }
 export const CommandMenu: Component
 export const CommandDialog: Component

package/dist/injectionKeys.d.ts

@@ -5,3 +5,4 @@ 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>;
+export declare const CMDK_ITEM_INDEX_MAP: InjectionKey<() => Map<string, number>>;

package/dist/types.d.ts

@@ -41,6 +41,11 @@ export interface CommandRootEmits {
     (e: 'update:searchQuery', value: string): void;
     (e: 'select', item: CommandItemData): void;
 }
+/** Props for CommandDialog — extends shared root props with items array */
+export interface CommandDialogProps extends CommandRootProps {
+    /** Command items to display */
+    items?: CommandItemData[];
+}
 /** Group definition */
 export interface CommandGroupData {
     heading: string;

package/dist/useCommandRoot.d.ts

@@ -0,0 +1,19 @@
+import { CommandItemData, CommandRootEmits } from './types';
+import { useCommandMenu, FilterFn } from './useCommandMenu';
+export interface UseCommandRootOptions {
+    filter?: FilterFn;
+    loading?: boolean;
+    closeOnSelect?: boolean;
+}
+export interface UseCommandRootReturn {
+    state: ReturnType<typeof useCommandMenu>;
+    handleSelect: (item: CommandItemData) => void;
+}
+/**
+ * Shared composable for root command components (Menu, Dialog).
+ *
+ * - Creates the command menu state
+ * - Provides all injection keys so child components can consume them
+ * - Returns the state and a select handler
+ */
+export declare function useCommandRoot(options: UseCommandRootOptions, emit: CommandRootEmits, onItemSelect?: (item: CommandItemData) => void): UseCommandRootReturn;

package/dist/utils/injectStrict.d.ts

@@ -0,0 +1,8 @@
+import { InjectionKey } from 'vue';
+/**
+ * Type-safe inject that throws a clear error when a required value is missing.
+ *
+ * Use this instead of `inject(key)!` to get early feedback when a child
+ * component is used outside of `<CommandMenu>` or `<CommandDialog>`.
+ */
+export declare function injectStrict<T>(key: InjectionKey<T>, componentName: string): T;

package/dist/vue-cmdk.js

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

package/dist/vue-cmdk.umd.cjs

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

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "vue-command-kit",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "⌘K — Fast, composable, unstyled command menu for Vue 3",
   "type": "module",
+  "packageManager": "pnpm@11.1.2",
   "main": "./dist/vue-cmdk.umd.cjs",
   "module": "./dist/vue-cmdk.js",
   "exports": {
@@ -10,14 +11,30 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/vue-cmdk.js",
       "require": "./dist/vue-cmdk.umd.cjs"
+    },
+    "./composables": {
+      "types": "./dist/useCommandMenu.d.ts",
+      "import": "./dist/vue-cmdk.js"
+    },
+    "./types": {
+      "types": "./dist/types.d.ts",
+      "import": "./dist/vue-cmdk.js"
     }
   },
   "files": [
     "dist/vue-cmdk.js",
     "dist/vue-cmdk.umd.cjs",
-    "dist/*.d.ts"
+    "dist/**/*.d.ts"
   ],
   "sideEffects": false,
+  "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",
+    "prepublishOnly": "pnpm run build"
+  },
   "keywords": [
     "vue",
     "command",
@@ -60,12 +77,5 @@
     "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"
   }
-}
+}