vue-command-kit 0.1.1 → 0.2.0

package/dist/vue-cmdk.js

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