vue-command-kit 0.1.2 → 0.2.0

package/dist/vue-cmdk.js

@@ -1,149 +1,145 @@
-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 = {
+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"
-}, _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);
+}, 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 { ...r, key: s.toLowerCase() };
+  return { ...u, key: i.toLowerCase() };
 }
-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 _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 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 = "";
+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 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 _(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 G(u) {
+  function O(r) {
     const y = /* @__PURE__ */ new Map();
-    for (const g of u) {
-      const D = g.group || O;
+    for (const g of r) {
+      const D = g.group || R;
       y.has(D) ? y.get(D).push(g) : y.set(D, [g]);
     }
-    const p = [];
-    y.has(O) && (p.push({ heading: "", items: y.get(O) }), y.delete(O));
+    const h = [];
+    y.has(R) && (h.push({ heading: "", items: y.get(R) }), y.delete(R));
     for (const g of [...y.keys()].sort())
-      p.push({ heading: g, items: y.get(g) });
-    return p;
+      h.push({ heading: g, items: y.get(g) });
+    return h;
   }
-  const Q = I(() => {
-    if (s) {
-      const u = s(c.value, n.value);
-      if (u !== null) return u;
+  const K = b(() => {
+    if (i) {
+      const r = i(f.value, n.value);
+      if (r !== null) return r;
     }
-    return r ? N(c.value, n.value) : c.value;
-  }), ne = I(() => G(Q.value));
+    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 se() {
-    const u = Q.value.length;
-    u !== 0 && (l ? t.value = (t.value + 1) % u : t.value = Math.min(t.value + 1, u - 1));
+    const r = K.value.length;
+    r !== 0 && (l ? t.value = (t.value - 1 + r) % r : t.value = Math.max(t.value - 1, 0));
   }
   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 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());
+    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 U(u) {
+  function j(r) {
     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();
+    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 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));
+    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, deep: !0, flush: "post" }
+    { immediate: !0 }
   ), ie(() => {
     E && E();
   }), {
-    visible: m,
+    visible: c,
     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
+    selectedValue: m,
+    items: f,
+    toggle: S,
+    open: s,
+    close: $,
+    defaultFilter: _,
+    groupItems: O,
+    filteredItems: K,
+    groupedItems: le,
+    selectNext: ne,
+    selectPrev: se,
+    selectCurrent: ue
   };
 }
-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 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: s,
-    loading: r = !1,
+    filter: i,
+    loading: u = !1,
     closeOnSelect: l = !0,
-    shouldFilter: m = !0,
+    shouldFilter: c = !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();
+  } = a, m = ke({ filter: i, shouldFilter: c, loop: n }, (s) => {
+    e("select", s), e("update:value", s.value), l && m.close();
   });
   k(
-    () => o.value,
-    (f) => {
-      f !== void 0 && (i.selectedValue.value = f);
+    () => a.value,
+    (s) => {
+      s !== void 0 && (m.selectedValue.value = s);
     },
     { immediate: !0 }
-  ), B(F, i), B(H, () => r), B(X, () => l), B(V, (f) => {
-    e("select", f), l && i.close();
+  ), T(N, m), T(X, () => u), T(be, () => l), T(U, (s) => {
+    e("select", s), e("update:value", s.value), l && m.close();
   });
-  const c = I(() => {
-    const f = /* @__PURE__ */ new Map();
-    return i.filteredItems.value.forEach((C, N) => f.set(C.value, N)), f;
+  const f = b(() => {
+    const s = /* @__PURE__ */ new Map();
+    return m.filteredItems.value.forEach(($, _) => s.set($.value, _)), s;
   });
-  B(Y, () => c.value);
-  function _(f) {
-    e("select", f), l && i.close();
+  T(Y, () => f.value);
+  function S(s) {
+    e("select", s), e("update:value", s.value), l && m.close();
   }
-  return { state: i, handleSelect: _ };
+  return { state: m, handleSelect: S };
 }
-const Ce = {
-  "data-cmdk-root": "",
-  role: "combobox",
-  "aria-expanded": "true",
-  "aria-haspopup": "listbox"
-}, Ie = /* @__PURE__ */ $({
+const Ce = ["aria-expanded", "aria-label"], we = /* @__PURE__ */ I({
   __name: "CommandMenu",
   props: {
-    visible: { type: Boolean, default: !0 },
+    visible: { type: Boolean, default: !1 },
     searchQuery: {},
     placeholder: { default: "Type a command or search..." },
     filter: {},
@@ -156,161 +152,183 @@ const Ce = {
     value: {}
   },
   emits: ["update:visible", "update:searchQuery", "update:value", "select"],
-  setup(o, { expose: e, emit: a }) {
-    const s = o, r = a, { state: l, handleSelect: m } = J(
+  setup(a, { expose: e, emit: o }) {
+    const i = a, u = o, { state: l, handleSelect: c } = J(
       {
-        filter: s.filter,
-        loading: s.loading,
-        closeOnSelect: s.closeOnSelect,
-        shouldFilter: s.shouldFilter,
-        loop: s.loop,
-        value: s.value
+        filter: i.filter,
+        loading: i.loading,
+        closeOnSelect: i.closeOnSelect,
+        shouldFilter: i.shouldFilter,
+        loop: i.loop,
+        value: i.value
       },
-      r
+      u
     );
     return k(
-      () => s.visible,
+      () => i.visible,
       (n) => {
         n !== void 0 && (l.visible.value = n);
       },
       { immediate: !0 }
-    ), k(l.visible, (n) => r("update:visible", n)), k(
-      () => s.searchQuery,
+    ), k(l.visible, (n) => u("update:visible", n)), k(
+      () => i.searchQuery,
       (n) => {
         n !== void 0 && (l.searchQuery.value = n);
       }
-    ), k(l.searchQuery, (n) => r("update:searchQuery", n)), e({
+    ), 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(), 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)
+    }), (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 A(o, e) {
-  const a = M(o);
-  if (a == null)
+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 a;
+  return o;
 }
-const Se = ["value", "placeholder", "aria-activedescendant", "autofocus"], W = /* @__PURE__ */ $({
+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(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];
+  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 m(t) {
-      const i = t.target;
-      i && (a.searchQuery.value = i.value, a.activeIndex.value = 0);
+    function c(t) {
+      const m = t.target;
+      m && (o.searchQuery.value = m.value, o.activeIndex.value = 0);
     }
     function n(t) {
-      var i;
+      var m;
       if (t.key === "ArrowDown")
-        t.preventDefault(), a.selectNext();
+        t.preventDefault(), o.selectNext();
       else if (t.key === "ArrowUp")
-        t.preventDefault(), a.selectPrev();
+        t.preventDefault(), o.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));
+        const f = o.filteredItems.value[o.activeIndex.value];
+        f && !f.disabled && ((m = f.onSelect) == null || m.call(f, f), i(f));
       }
     }
-    return (t, i) => (d(), h("input", {
+    return (t, m) => (d(), v("input", {
       ref_key: "inputRef",
-      ref: r,
+      ref: u,
       "data-cmdk-input": "",
-      value: v(a).searchQuery.value,
-      placeholder: o.placeholder,
+      value: p(o).searchQuery.value,
+      placeholder: a.placeholder,
       role: "searchbox",
       "aria-activedescendant": l.value,
       autocomplete: "off",
       autocorrect: "off",
       spellcheck: "false",
-      autofocus: o.autoFocus,
-      onInput: m,
+      autofocus: a.autoFocus,
+      onInput: c,
       onKeydown: n
-    }, null, 40, Se));
+    }, null, 40, Ie));
   }
-}), we = {
+}), Se = {
   key: 0,
   "data-cmdk-empty": ""
-}, Z = /* @__PURE__ */ $({
+}, Z = /* @__PURE__ */ I({
   __name: "CommandEmpty",
-  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))
+  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))
       ])
-    ])) : w("", !0);
+    ])) : L("", !0);
   }
 }), $e = {
   key: 0,
   "data-cmdk-loading": ""
-}, ee = /* @__PURE__ */ $({
+}, q = /* @__PURE__ */ I({
   __name: "CommandLoading",
   props: {
     loading: { type: Boolean }
   },
-  setup(o) {
-    return (e, a) => o.loading ? (d(), h("div", $e, [
-      S(e.$slots, "default", {}, () => [
-        a[0] || (a[0] = b("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))
       ])
-    ])) : w("", !0);
+    ])) : L("", !0);
   }
 }), xe = {
   "data-cmdk-group": "",
   role: "group"
-}, Ee = {
+}, Le = {
   key: 0,
   "data-cmdk-group-heading": "",
   role: "presentation"
-}, De = {
+}, Me = {
   "data-cmdk-group-items": "",
   role: "group"
-}, te = /* @__PURE__ */ $({
+}, ee = /* @__PURE__ */ I({
   __name: "CommandGroup",
   props: {
-    heading: {}
+    heading: {},
+    forceMount: { type: Boolean }
   },
-  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")
+  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")
       ])
     ]));
   }
-}), Le = ["id", "aria-selected", "aria-disabled", "data-value"], Me = {
+});
+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": ""
-}, Ke = { "data-cmdk-item-label": "" }, Qe = {
+}, Be = { "data-cmdk-item-label": "" }, Ke = { key: 0 }, Te = { key: 1 }, Fe = {
   key: 1,
   "data-cmdk-item-shortcut": ""
-}, oe = /* @__PURE__ */ $({
+}, te = /* @__PURE__ */ I({
   __name: "CommandItem",
   props: {
     value: {},
@@ -318,98 +336,111 @@ const Se = ["value", "placeholder", "aria-activedescendant", "autofocus"], W = /
     keywords: { default: void 0 },
     shortcut: { default: void 0 },
     disabled: { type: Boolean, default: !1 },
+    forceMount: { type: Boolean, default: !1 },
     icon: { type: [Object, Function], default: void 0 },
     onSelect: { type: Function, default: void 0 }
   },
-  setup(o) {
-    const e = o, a = A(F, "CommandItem"), s = M(Y, () => /* @__PURE__ */ new Map()), r = I(() => `cmdk-item-${e.value}`), l = I(() => ({
+  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
-    })), 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, () => {
+    })), 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 c() {
-      var _;
-      e.disabled || ((_ = e.onSelect) == null || _.call(e, l.value), i(l.value), t() && a.close());
+    function S() {
+      var s;
+      e.disabled || ((s = e.onSelect) == null || s.call(e, l.value), t(l.value));
     }
-    return (_, f) => (d(), h("div", {
-      id: r.value,
+    return (s, $) => (d(), v("div", {
+      id: u.value,
       "data-cmdk-item": "",
       role: "option",
       "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);
+      "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 = _);
       })
     }, [
-      S(_.$slots, "default", {
+      x(s.$slots, "default", {
         item: l.value,
         active: n.value
       }, () => [
-        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)
+        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, Le));
+    ], 42, De));
   }
-}), Be = (o, e) => {
-  const a = o.__vccOpts || o;
-  for (const [s, r] of e)
-    a[s] = r;
-  return a;
-}, Fe = {}, Ne = {
+}), Ne = {
   "data-cmdk-separator": "",
   role: "separator"
-};
-function Oe(o, e) {
-  return d(), h("div", Ne);
-}
-const ae = /* @__PURE__ */ Be(Fe, [["render", Oe]]), Te = {
+}, ae = /* @__PURE__ */ I({
+  __name: "CommandSeparator",
+  props: {
+    alwaysRender: { type: Boolean }
+  },
+  setup(a) {
+    return (e, o) => (d(), v("div", Ne));
+  }
+}), Oe = {
   "data-cmdk-list": "",
   role: "listbox"
 }, Re = {
   "aria-live": "polite",
   "aria-atomic": "true",
   class: "sr-only"
-}, le = /* @__PURE__ */ $({
+}, oe = /* @__PURE__ */ I({
   __name: "CommandList",
-  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)
+  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))
       ]),
-      K(Z),
-      K(ee, {
-        loading: v(a)()
+      B(Z),
+      B(q, {
+        loading: p(o)()
       }, null, 8, ["loading"]),
-      (d(!0), h(L, null, q(v(e).groupedItems.value, (l, m) => (d(), h(L, {
+      (d(!0), v(C, null, G(p(e).groupedItems.value, (l, c) => (d(), v(C, {
         key: l.heading || "__ungrouped__"
       }, [
-        K(te, {
+        B(ee, {
           heading: l.heading
         }, {
-          default: z(() => [
-            (d(!0), h(L, null, q(l.items, (n) => (d(), R(oe, {
+          default: H(() => [
+            (d(!0), v(C, null, G(l.items, (n) => (d(), V(te, {
               key: n.value,
               value: n.value,
               label: n.label,
@@ -422,17 +453,18 @@ const ae = /* @__PURE__ */ Be(Fe, [["render", Oe]]), Te = {
           ]),
           _: 2
         }, 1032, ["heading"]),
-        m !== v(e).groupedItems.value.length - 1 ? (d(), R(ae, { key: 0 })) : w("", !0)
+        a.alwaysRenderSeparator || c !== p(e).groupedItems.value.length - 1 ? (d(), V(ae, { key: 0 })) : L("", !0)
       ], 64))), 128))
     ]));
   }
 }), 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": ""
-}, je = /* @__PURE__ */ $({
+}, je = /* @__PURE__ */ I({
   __name: "CommandDialog",
   props: {
     items: { default: () => [] },
+    container: {},
     visible: { type: Boolean, default: !1 },
     searchQuery: {},
     placeholder: { default: "Type a command or search..." },
@@ -446,115 +478,117 @@ const ae = /* @__PURE__ */ Be(Fe, [["render", Oe]]), Te = {
     value: {}
   },
   emits: ["update:visible", "update:searchQuery", "update:value", "select"],
-  setup(o, { emit: e }) {
-    const a = o, s = e, { state: r } = J(
+  setup(a, { emit: e }) {
+    const o = a, i = e, { state: u } = J(
       {
-        filter: a.filter,
-        loading: a.loading,
-        closeOnSelect: a.closeOnSelect,
-        shouldFilter: a.shouldFilter,
-        loop: a.loop,
-        value: a.value
+        filter: o.filter,
+        loading: o.loading,
+        closeOnSelect: o.closeOnSelect,
+        shouldFilter: o.shouldFilter,
+        loop: o.loop,
+        value: o.value
       },
-      s
-    ), l = x(null);
+      i
+    ), l = M(null);
     k(
-      () => a.items,
+      () => o.items,
       (t) => {
-        r.items.value = t;
+        u.items.value = t;
       },
       { immediate: !0 }
     ), k(
-      () => a.visible,
+      () => o.visible,
       (t) => {
-        r.visible.value = t;
+        u.visible.value = t;
       },
       { immediate: !0 }
     ), k(
-      () => a.searchQuery,
+      () => o.searchQuery,
       (t) => {
-        t !== void 0 && (r.searchQuery.value = t);
+        t !== void 0 && (u.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());
+    ), 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 m(t) {
-      t.target === t.currentTarget && r.close();
+    function c(t) {
+      t.target === t.currentTarget && u.close();
     }
     function n(t) {
-      if (t.key === "Escape" && (t.preventDefault(), r.close()), t.key === "Tab") {
-        const c = t.currentTarget.querySelectorAll(
+      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 (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());
+        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 (t, i) => (d(), R(pe, { to: "body" }, [
-      K(he, { name: "cmdk-dialog" }, {
-        default: z(() => [
-          v(r).visible.value ? (d(), h("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": "",
             role: "dialog",
             "aria-modal": "true",
-            "aria-label": a.label ?? "Command menu",
+            "aria-label": o.label ?? "Command menu",
             onKeydown: n
           }, [
-            b("div", {
+            w("div", {
               "data-cmdk-dialog-mask": "",
               "aria-hidden": "true",
-              onClick: m
+              onClick: c
             }),
-            b("div", Pe, [
-              b("div", Ve, [
-                S(t.$slots, "header", {}, () => [
-                  K(W, {
+            w("div", Pe, [
+              w("div", Ve, [
+                x(t.$slots, "header", {}, () => [
+                  B(W, {
                     ref_key: "commandInputRef",
                     ref: l,
-                    placeholder: o.placeholder,
-                    "auto-focus": o.autoFocus
+                    placeholder: a.placeholder,
+                    "auto-focus": a.autoFocus
                   }, null, 8, ["placeholder", "auto-focus"])
                 ])
               ]),
-              b("div", Ge, [
-                S(t.$slots, "body", {}, () => [
-                  K(le)
+              w("div", Ge, [
+                x(t.$slots, "body", {}, () => [
+                  B(oe)
                 ])
               ]),
-              t.$slots.footer ? (d(), h("div", Ue, [
-                S(t.$slots, "footer")
-              ])) : w("", !0)
+              t.$slots.footer ? (d(), v("div", Ue, [
+                x(t.$slots, "footer")
+              ])) : L("", !0)
             ])
-          ], 40, Ae)) : w("", !0)
+          ], 40, Ae)) : L("", !0)
         ]),
         _: 3
       })
-    ]));
+    ], 8, ["to"]));
   }
-}), ze = {
-  Menu: Ie,
+}), He = {
+  Menu: we,
   Dialog: je,
   Input: W,
-  List: le,
-  Group: te,
-  Item: oe,
+  List: oe,
+  Group: ee,
+  Item: te,
   Empty: Z,
   Separator: ae,
-  Loading: ee
+  Loading: q
 };
 export {
-  ze as Command,
+  He as Command,
   je as CommandDialog,
   Z as CommandEmpty,
-  te as CommandGroup,
+  ee as CommandGroup,
   W as CommandInput,
-  oe as CommandItem,
-  le as CommandList,
-  ee as CommandLoading,
-  Ie as CommandMenu,
+  te as CommandItem,
+  oe as CommandList,
+  q as CommandLoading,
+  we as CommandMenu,
   ae as CommandSeparator,
-  be as useCommandMenu
+  ke as useCommandMenu
 };