vue-command-kit 0.1.0 → 0.1.2

package/dist/vue-cmdk.js

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