vue-command-kit 0.1.1 → 0.1.2

package/dist/vue-cmdk.js

@@ -1,299 +1,328 @@
-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 = {
+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"
-}, 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);
+}, _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 { ...s, key: r.toLowerCase() };
+  return { ...r, key: s.toLowerCase() };
 }
-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 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 ve(t, e) {
-  const o = E(!1), r = E(""), s = E(0), a = E([]), i = () => {
-    o.value = !o.value;
-  }, l = () => {
-    o.value = !0, s.value = 0;
-  }, n = () => {
-    o.value = !1, r.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 u(c, p) {
-    if (!p.trim()) return c;
-    const f = p.toLowerCase();
-    return c.filter((_) => {
-      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 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 h(c) {
-    const p = /* @__PURE__ */ new Map();
-    for (const _ of c) {
-      const b = _.group || "__ungrouped__";
-      p.has(b) || p.set(b, []), p.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 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 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 = Q(() => {
-    if (t) {
-      const c = t(a.value, r.value);
-      if (c !== null) return c;
+  const Q = I(() => {
+    if (s) {
+      const u = s(c.value, n.value);
+      if (u !== null) return u;
     }
-    return u(a.value, r.value);
-  }), K = Q(() => h(y.value));
-  function ee() {
-    const c = y.value.length;
-    c !== 0 && (s.value = (s.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 te() {
-    const c = y.value.length;
-    c !== 0 && (s.value = (s.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 oe() {
-    var p;
-    const c = y.value[s.value];
-    c && !c.disabled && ((p = c.onSelect) == null || p.call(c, c), n());
+  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 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();
+  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 w = null;
-  return g(
-    a,
-    (c) => {
-      w && (w(), w = null), c.some((f) => f.shortcut) && typeof window < "u" && (window.addEventListener("keydown", R), w = () => window.removeEventListener("keydown", R));
+  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: "post" }
-  ), ne(() => {
-    w && w();
+    { immediate: !0, deep: !0, flush: "post" }
+  ), ie(() => {
+    E && E();
   }), {
-    visible: o,
-    searchQuery: r,
-    activeIndex: s,
-    items: a,
-    toggle: i,
-    open: l,
-    close: n,
-    defaultFilter: u,
-    groupItems: h,
-    filteredItems: y,
-    groupedItems: K,
-    selectNext: ee,
-    selectPrev: te,
-    selectCurrent: oe
+    visible: m,
+    searchQuery: n,
+    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 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();
+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();
   });
-  x(M, i), x(V, () => s), x(j, () => a), x(A, (u) => {
-    e("select", u), a && 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 l = Q(() => {
-    const u = /* @__PURE__ */ new Map();
-    return i.filteredItems.value.forEach((h, y) => u.set(h.value, y)), u;
+  const c = I(() => {
+    const f = /* @__PURE__ */ new Map();
+    return i.filteredItems.value.forEach((C, N) => f.set(C.value, N)), f;
   });
-  x(U, () => l.value);
-  function n(u) {
-    e("select", u), a && i.close();
+  B(Y, () => c.value);
+  function _(f) {
+    e("select", f), l && i.close();
   }
-  return { state: i, handleSelect: n };
+  return { state: i, handleSelect: _ };
 }
-const pe = {
+const Ce = {
   "data-cmdk-root": "",
   role: "combobox",
   "aria-expanded": "true",
   "aria-haspopup": "listbox"
-}, he = /* @__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(t, { expose: e, emit: o }) {
-    const r = t, s = o, { state: a, handleSelect: i } = q(
+  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: r.filter,
-        loading: r.loading,
-        closeOnSelect: r.closeOnSelect
+        filter: s.filter,
+        loading: s.loading,
+        closeOnSelect: s.closeOnSelect,
+        shouldFilter: s.shouldFilter,
+        loop: s.loop,
+        value: s.value
       },
-      s
+      r
     );
-    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);
-      }
-    ), g(a.visible, (l) => s("update:visible", l)), g(
-      () => r.searchQuery,
-      (l) => {
-        l !== void 0 && (a.searchQuery.value = l);
+    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);
       }
-    ), 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)
+    ), 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)
       })
     ]));
   }
 });
-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;
+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 ye = ["value", "placeholder", "autofocus"], z = /* @__PURE__ */ I({
+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(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;
+  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 m(t) {
+      const i = t.target;
+      i && (a.searchQuery.value = i.value, a.activeIndex.value = 0);
     }
-    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));
+    function n(t) {
+      var i;
+      if (t.key === "ArrowDown")
+        t.preventDefault(), a.selectNext();
+      else if (t.key === "ArrowUp")
+        t.preventDefault(), a.selectPrev();
+      else if (t.key === "Enter") {
+        t.preventDefault();
+        const c = a.filteredItems.value[a.activeIndex.value];
+        c && !c.disabled && ((i = c.onSelect) == null || i.call(c, c), s(c));
       }
     }
-    return (l, n) => (d(), m("input", {
+    return (t, i) => (d(), h("input", {
       ref_key: "inputRef",
-      ref: s,
+      ref: r,
       "data-cmdk-input": "",
-      value: v(o).searchQuery.value,
-      placeholder: t.placeholder,
+      value: v(a).searchQuery.value,
+      placeholder: o.placeholder,
       role: "searchbox",
+      "aria-activedescendant": l.value,
       autocomplete: "off",
       autocorrect: "off",
       spellcheck: "false",
-      autofocus: t.autoFocus,
-      onInput: a,
-      onKeydown: i
-    }, null, 40, ye));
+      autofocus: o.autoFocus,
+      onInput: m,
+      onKeydown: n
+    }, null, 40, Se));
   }
-}), _e = {
+}), we = {
   key: 0,
   "data-cmdk-empty": ""
-}, H = /* @__PURE__ */ I({
+}, Z = /* @__PURE__ */ $({
   __name: "CommandEmpty",
-  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))
+  setup(o) {
+    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))
       ])
-    ])) : S("", !0);
+    ])) : w("", !0);
   }
-}), ge = {
+}), $e = {
   key: 0,
   "data-cmdk-loading": ""
-}, X = /* @__PURE__ */ I({
+}, ee = /* @__PURE__ */ $({
   __name: "CommandLoading",
   props: {
-    loading: { type: Boolean, default: !1 }
+    loading: { type: Boolean }
   },
-  setup(t) {
-    return (e, o) => t.loading ? (d(), m("div", ge, [
-      C(e.$slots, "default", {}, () => [
-        o[0] || (o[0] = k("span", null, "Loading...", -1))
+  setup(o) {
+    return (e, a) => o.loading ? (d(), h("div", $e, [
+      S(e.$slots, "default", {}, () => [
+        a[0] || (a[0] = b("span", null, "Loading...", -1))
       ])
-    ])) : S("", !0);
+    ])) : w("", !0);
   }
-}), ke = {
+}), xe = {
   "data-cmdk-group": "",
   role: "group"
-}, be = {
+}, Ee = {
   key: 0,
   "data-cmdk-group-heading": "",
   role: "presentation"
-}, Ce = {
+}, De = {
   "data-cmdk-group-items": "",
   role: "group"
-}, J = /* @__PURE__ */ I({
+}, te = /* @__PURE__ */ $({
   __name: "CommandGroup",
   props: {
     heading: {}
   },
-  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")
+  setup(o) {
+    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")
       ])
     ]));
   }
-}), Se = ["aria-selected", "aria-disabled", "data-value"], Ie = {
+}), Le = ["id", "aria-selected", "aria-disabled", "data-value"], Me = {
   key: 0,
   "data-cmdk-item-icon": ""
-}, we = { "data-cmdk-item-label": "" }, $e = {
+}, 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(t) {
-    const e = t, o = O(M, "CommandItem"), r = D(U, () => /* @__PURE__ */ new Map()), s = Q(() => ({
+  setup(o) {
+    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,
@@ -301,104 +330,106 @@ const ye = ["value", "placeholder", "autofocus"], z = /* @__PURE__ */ I({
       disabled: e.disabled,
       icon: e.icon,
       onSelect: e.onSelect
-    })), 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, () => {
+    })), 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 n() {
-      var u;
-      e.disabled || ((u = e.onSelect) == null || u.call(e, s.value), l(s.value), i() && o.close());
+    function c() {
+      var _;
+      e.disabled || ((_ = e.onSelect) == null || _.call(e, l.value), i(l.value), t() && a.close());
     }
-    return (u, h) => (d(), m("div", {
+    return (_, f) => (d(), h("div", {
+      id: r.value,
       "data-cmdk-item": "",
       role: "option",
-      "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 y = v(r)().get(t.value);
-        y !== void 0 && (v(o).activeIndex.value = y);
+      "aria-selected": n.value,
+      "aria-disabled": o.disabled,
+      "data-value": o.value,
+      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);
       })
     }, [
-      C(u.$slots, "default", {
-        item: s.value,
-        active: a.value
+      S(_.$slots, "default", {
+        item: l.value,
+        active: n.value
       }, () => [
-        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)
+        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, Se));
+    ], 42, Le));
   }
-}), xe = (t, e) => {
-  const o = t.__vccOpts || t;
-  for (const [r, s] of e)
-    o[r] = s;
-  return o;
-}, Ee = {}, De = {
+}), 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 Le(t, e) {
-  return d(), m("div", De);
+function Oe(o, e) {
+  return d(), h("div", Ne);
 }
-const Y = /* @__PURE__ */ xe(Ee, [["render", Le]]), Qe = {
+const ae = /* @__PURE__ */ Be(Fe, [["render", Oe]]), Te = {
   "data-cmdk-list": "",
   role: "listbox"
-}, Me = {
+}, Re = {
   "aria-live": "polite",
   "aria-atomic": "true",
   class: "sr-only"
-}, Z = /* @__PURE__ */ I({
+}, le = /* @__PURE__ */ $({
   __name: "CommandList",
-  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)
+  setup(o) {
+    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))
       ]),
-      L(H),
-      L(X, {
-        loading: v(o)()
+      K(Z),
+      K(ee, {
+        loading: v(a)()
       }, null, 8, ["loading"]),
-      (d(!0), m($, null, F(r.value, (i) => (d(), m($, {
-        key: i.heading || "__ungrouped__"
+      (d(!0), h(L, null, q(v(e).groupedItems.value, (l, m) => (d(), h(L, {
+        key: l.heading || "__ungrouped__"
       }, [
-        L(J, {
-          heading: i.heading
+        K(te, {
+          heading: l.heading
         }, {
-          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))
+          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"]),
-        i !== r.value[r.value.length - 1] ? (d(), N(Y, { key: 0 })) : S("", !0)
+        m !== v(e).groupedItems.value.length - 1 ? (d(), R(ae, { key: 0 })) : w("", !0)
       ], 64))), 128))
     ]));
   }
-}), Ke = { "data-cmdk-dialog-wrapper": "" }, Te = { "data-cmdk-dialog-header": "" }, Ne = { "data-cmdk-dialog-body": "" }, Oe = {
+}), 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": ""
-}, Be = /* @__PURE__ */ I({
+}, je = /* @__PURE__ */ $({
   __name: "CommandDialog",
   props: {
     items: { default: () => [] },
@@ -408,111 +439,122 @@ const Y = /* @__PURE__ */ xe(Ee, [["render", Le]]), Qe = {
     filter: {},
     autoFocus: { type: Boolean, default: !0 },
     closeOnSelect: { type: Boolean, default: !0 },
-    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", "update:searchQuery", "select"],
-  setup(t, { emit: e }) {
-    const o = t, r = e, { state: s } = q(
+  emits: ["update:visible", "update:searchQuery", "update:value", "select"],
+  setup(o, { emit: e }) {
+    const a = o, s = e, { state: r } = J(
       {
-        filter: o.filter,
-        loading: o.loading,
-        closeOnSelect: o.closeOnSelect
+        filter: a.filter,
+        loading: a.loading,
+        closeOnSelect: a.closeOnSelect,
+        shouldFilter: a.shouldFilter,
+        loop: a.loop,
+        value: a.value
       },
-      r
-    ), a = E(null);
-    g(
-      () => o.items,
-      (n) => {
-        s.items.value = n;
+      s
+    ), l = x(null);
+    k(
+      () => a.items,
+      (t) => {
+        r.items.value = t;
       },
       { immediate: !0 }
-    ), g(
-      () => o.visible,
-      (n) => {
-        s.visible.value = n;
+    ), k(
+      () => a.visible,
+      (t) => {
+        r.visible.value = t;
       },
       { immediate: !0 }
-    ), g(
-      () => o.searchQuery,
-      (n) => {
-        n !== void 0 && (s.searchQuery.value = n);
+    ), k(
+      () => a.searchQuery,
+      (t) => {
+        t !== void 0 && (r.searchQuery.value = t);
       }
-    ), 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());
+    ), 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 i(n) {
-      n.target === n.currentTarget && s.close();
+    function m(t) {
+      t.target === t.currentTarget && r.close();
     }
-    function l(n) {
-      if (n.key === "Escape" && (n.preventDefault(), s.close()), n.key === "Tab") {
-        const h = n.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 (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());
+        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 (n, u) => (d(), N(ue, { to: "body" }, [
-      L(ce, { name: "cmdk-dialog" }, {
-        default: G(() => [
-          v(s).visible.value ? (d(), m("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: l
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-label": a.label ?? "Command menu",
+            onKeydown: n
           }, [
-            k("div", {
+            b("div", {
               "data-cmdk-dialog-mask": "",
-              onClick: i
+              "aria-hidden": "true",
+              onClick: m
             }),
-            k("div", Ke, [
-              k("div", Te, [
-                C(n.$slots, "header", {}, () => [
-                  L(z, {
+            b("div", Pe, [
+              b("div", Ve, [
+                S(t.$slots, "header", {}, () => [
+                  K(W, {
                     ref_key: "commandInputRef",
-                    ref: a,
-                    placeholder: t.placeholder,
-                    "auto-focus": t.autoFocus
+                    ref: l,
+                    placeholder: o.placeholder,
+                    "auto-focus": o.autoFocus
                   }, null, 8, ["placeholder", "auto-focus"])
                 ])
               ]),
-              k("div", Ne, [
-                C(n.$slots, "body", {}, () => [
-                  L(Z)
+              b("div", Ge, [
+                S(t.$slots, "body", {}, () => [
+                  K(le)
                 ])
               ]),
-              n.$slots.footer ? (d(), m("div", Oe, [
-                C(n.$slots, "footer")
-              ])) : S("", !0)
+              t.$slots.footer ? (d(), h("div", Ue, [
+                S(t.$slots, "footer")
+              ])) : w("", !0)
             ])
-          ], 32)) : S("", !0)
+          ], 40, Ae)) : w("", !0)
         ]),
         _: 3
       })
     ]));
   }
-}), Re = {
-  Menu: he,
-  Dialog: Be,
-  Input: z,
-  List: Z,
-  Group: J,
-  Item: W,
-  Empty: H,
-  Separator: Y,
-  Loading: X
+}), ze = {
+  Menu: Ie,
+  Dialog: je,
+  Input: W,
+  List: le,
+  Group: te,
+  Item: oe,
+  Empty: Z,
+  Separator: ae,
+  Loading: ee
 };
 export {
-  Re as Command,
-  Be as CommandDialog,
-  H as CommandEmpty,
-  J as CommandGroup,
-  z as CommandInput,
-  W as CommandItem,
-  Z as CommandList,
-  X as CommandLoading,
-  he as CommandMenu,
-  Y as CommandSeparator,
-  ve 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
 };