vue-composable-ui 1.0.6 → 1.0.7

package/dist/{combobox.vue_vue_type_script_setup_true_lang-BhfoMt6j.js → combobox.vue_vue_type_script_setup_true_lang-8JadictW.js}

@@ -1,4 +1,4 @@
-import { defineComponent as B, mergeModels as H, computed as p, useModel as T, useId as j, watch as N, provide as P, createElementBlock as v, openBlock as r, Fragment as b, createCommentVNode as U, renderSlot as K, createBlock as A, unref as k, renderList as _, nextTick as h } from "vue";
+import { defineComponent as B, mergeModels as H, computed as p, useModel as T, useId as j, watch as K, provide as N, createElementBlock as v, openBlock as r, Fragment as b, createCommentVNode as P, renderSlot as U, createBlock as A, unref as k, renderList as _, nextTick as h } from "vue";
 import { useHTMLElement as q } from "./composable-ui23.js";
 import { usePopover as z } from "./composable-ui21.js";
 import { useList as G } from "./composable-ui22.js";
@@ -19,9 +19,9 @@ const ae = /* @__PURE__ */ B({
   }),
   emits: ["update:modelValue"],
   setup(e) {
-    const t = e, I = p(() => u.value ? l.value.map((a) => t.formValue(a)) : t.formValue(l.value)), l = T(e, "modelValue"), i = t.id ?? j(), y = t.activatorId ?? i, n = `${i}-popover`, { isOpen: o, toggle: E, open: s, close: c } = z(
+    const t = e, I = p(() => u.value ? c.value.map((a) => t.formValue(a)) : t.formValue(c.value)), c = T(e, "modelValue"), i = t.id ?? j(), y = t.activatorId ?? i, l = `${i}-popover`, { isOpen: o, toggle: E, open: n, close: s } = z(
       `#${y}`,
-      `#${n}`,
+      `#${l}`,
       {
         direction: "down",
         align: "stretch",
@@ -34,35 +34,35 @@ const ae = /* @__PURE__ */ B({
       activeItem: f,
       isMultiselectable: u,
       selectActiveItem: m,
-      activateSelectedItem: S,
+      activateSelectedItem: O,
       activateFirstItem: d,
       activateLastItem: V,
-      activateNextItem: C,
-      activatePrevItem: M
-    } = G(l), g = p(() => t.displayValue(l.value));
-    N(w, () => {
-      !f.value && w.value.length && (S({ focus: !1 }), f.value || d({ focus: !1 }));
+      activateNextItem: S,
+      activatePrevItem: C
+    } = G(c), g = p(() => t.displayValue(c.value));
+    K(w, () => {
+      !f.value && w.value.length && (O({ focus: !1 }), f.value || d({ focus: !1 }));
     });
-    function O() {
+    function D() {
       q(`#${y}`).value?.focus();
     }
-    function D(a) {
+    function M(a) {
       if (o.value)
         switch (a.code) {
           case "Space":
-            m(), u.value || c({ focus: !0 });
+            m(), u.value || s({ focus: !0 });
             break;
           case "Enter":
-            m(), c({ focus: !0 });
+            m(), s({ focus: !0 });
             break;
           case "Tab":
-            m(), c({ focus: !0 });
+            m(), s({ focus: !0 });
             return;
           case "ArrowUp":
-            M({ focus: !1, loop: !1 });
+            C({ focus: !1, loop: !1 });
             break;
           case "ArrowDown":
-            C({ focus: !1, loop: !1 });
+            S({ focus: !1, loop: !1 });
             break;
           case "Home":
             d({ focus: !1 });
@@ -71,7 +71,7 @@ const ae = /* @__PURE__ */ B({
             V({ focus: !1 });
             break;
           case "Escape":
-            c({ focus: !0 });
+            s({ focus: !0 });
             break;
           default:
             return;
@@ -80,15 +80,15 @@ const ae = /* @__PURE__ */ B({
         switch (a.code) {
           case "Space":
           case "Enter":
-            s({ focus: !1 });
+            n({ focus: !1 });
             break;
           case "End":
           case "ArrowUp":
-            s({ focus: !1 }), h(() => V({ focus: !1 }));
+            n({ focus: !1 }), h(() => V({ focus: !1 }));
             break;
           case "Home":
           case "ArrowDown":
-            s({ focus: !1 }), h(() => d({ focus: !1 }));
+            n({ focus: !1 }), h(() => d({ focus: !1 }));
             break;
           default:
             return;
@@ -96,24 +96,23 @@ const ae = /* @__PURE__ */ B({
       a.preventDefault();
     }
     const x = p(() => ({
-      onkeydown: D,
-      onclick: () => s({ focus: !1 }),
       id: i,
-      "aria-controls": o.value ? n : void 0,
+      "aria-controls": o.value ? l : void 0,
       "aria-expanded": o.value,
       "aria-activedescendant": f.value?.element.value?.id,
       "aria-haspopup": "listbox",
       role: "combobox"
     }));
-    return P(J, {
+    return N(J, {
       displayValue: g,
-      popoverId: n,
+      popoverId: l,
       isOpen: o,
-      open: s,
-      close: c,
-      focus: O,
+      open: n,
+      close: s,
+      focus: D,
       isMultiselectable: u,
-      activatorAttrs: x
+      activatorAttrs: x,
+      activatorOnKeyDown: M
     }), (a, Q) => (r(), v(b, null, [
       e.name ? (r(), v(b, { key: 0 }, [
         k(u) ? (r(!0), v(b, { key: 0 }, _(I.value, (F, L) => (r(), A($, {
@@ -124,9 +123,9 @@ const ae = /* @__PURE__ */ B({
           name: e.name,
           value: I.value
         }, null, 8, ["name", "value"]))
-      ], 64)) : U("", !0),
-      K(a.$slots, "default", {
-        popoverId: n,
+      ], 64)) : P("", !0),
+      U(a.$slots, "default", {
+        popoverId: l,
         isOpen: k(o),
         toggle: () => k(E)(),
         displayValue: g.value,

package/dist/comboboxInput.vue_vue_type_script_setup_true_lang-Cjl65Eoo.js

@@ -0,0 +1,34 @@
+import { defineComponent as r, inject as a, useModel as m, watch as p, withDirectives as d, createElementBlock as s, openBlock as f, mergeProps as v, unref as n, vModelDynamic as c } from "vue";
+import { injectCombobox as b } from "./composable-ui24.js";
+const y = /* @__PURE__ */ r({
+  __name: "comboboxInput",
+  props: {
+    modelValue: {},
+    modelModifiers: {}
+  },
+  emits: ["update:modelValue"],
+  setup(i) {
+    const e = a(b);
+    if (!e)
+      throw new Error("Combobox injectable context is not provided");
+    const l = m(i, "modelValue");
+    function u() {
+      l.value = e.displayValue.value;
+    }
+    return p(e.displayValue, u, { immediate: !0 }), (w, o) => d((f(), s("input", v({
+      "onUpdate:modelValue": o[0] || (o[0] = (t) => l.value = t)
+    }, n(e).activatorAttrs, {
+      onClick: o[1] || (o[1] = (t) => n(e).open({ focus: !1 })),
+      onKeydown: o[2] || (o[2] = //@ts-ignore
+      (...t) => n(e).activatorOnKeyDown && n(e).activatorOnKeyDown(...t)),
+      onInput: o[3] || (o[3] = (t) => n(e).open({ focus: !0 })),
+      onChange: u,
+      autocomplete: "off"
+    }), null, 16)), [
+      [c, l.value]
+    ]);
+  }
+});
+export {
+  y as _
+};

package/dist/composable-ui.js

@@ -16,8 +16,8 @@ import { _ as k } from "./tooltip.vue_vue_type_script_setup_true_lang-D4uAZmQb.j
 import { _ as w } from "./menu.vue_vue_type_script_setup_true_lang-Ci7q2rOg.js";
 import { _ as z } from "./menuItems.vue_vue_type_script_setup_true_lang-p9vftREy.js";
 import { _ as B } from "./menuItem.vue_vue_type_script_setup_true_lang-ezPw3j-i.js";
-import { _ as J } from "./combobox.vue_vue_type_script_setup_true_lang-BhfoMt6j.js";
-import { _ as N } from "./comboboxInput.vue_vue_type_script_setup_true_lang-DzRfJ5ke.js";
+import { _ as J } from "./combobox.vue_vue_type_script_setup_true_lang-8JadictW.js";
+import { _ as N } from "./comboboxInput.vue_vue_type_script_setup_true_lang-Cjl65Eoo.js";
 import { _ as R } from "./comboboxOptions.vue_vue_type_script_setup_true_lang-Doy6MfEQ.js";
 import { _ as U } from "./comboboxOption.vue_vue_type_script_setup_true_lang-DPEArk3M.js";
 export {

package/dist/composable-ui18.js

@@ -1,4 +1,4 @@
-import { _ as f } from "./comboboxInput.vue_vue_type_script_setup_true_lang-DzRfJ5ke.js";
+import { _ as f } from "./comboboxInput.vue_vue_type_script_setup_true_lang-Cjl65Eoo.js";
 export {
   f as default
 };

package/dist/composable-ui20.js

@@ -1,4 +1,4 @@
-import { _ as f } from "./combobox.vue_vue_type_script_setup_true_lang-BhfoMt6j.js";
+import { _ as f } from "./combobox.vue_vue_type_script_setup_true_lang-8JadictW.js";
 export {
   f as default
 };

package/dist/types/components/combobox/combobox.vue.d.ts

@@ -5,7 +5,6 @@ type __VLS_Props = {
     name?: string;
     formValue?: (item: any) => Record<string, string> | string;
 };
-declare function onKeyDown(evt: KeyboardEvent): void;
 type __VLS_PublicProps = __VLS_Props & {
     modelValue?: any;
 };
@@ -15,8 +14,6 @@ declare var __VLS_9: {
     toggle: () => void;
     displayValue: ((value: any) => string) & string;
     attrs: {
-        onkeydown: typeof onKeyDown;
-        onclick: () => void;
         id: string;
         "aria-controls": string | undefined;
         "aria-expanded": boolean;

package/dist/types/components/injectionKeys.d.ts

@@ -40,4 +40,5 @@ export declare const injectCombobox: InjectionKey<{
     isMultiselectable: UseListReturn["isMultiselectable"];
     focus: () => void;
     activatorAttrs: ComputedRef<Record<string, any>>;
+    activatorOnKeyDown: (e: KeyboardEvent) => void;
 }>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-composable-ui",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "type": "module",
   "repository": {
     "type": "git",

package/dist/comboboxInput.vue_vue_type_script_setup_true_lang-DzRfJ5ke.js

@@ -1,33 +0,0 @@
-import { defineComponent as i, inject as m, useModel as r, watch as c, computed as p, withDirectives as d, createElementBlock as s, openBlock as f, mergeProps as v, vModelDynamic as b } from "vue";
-import { injectCombobox as x } from "./composable-ui24.js";
-const h = /* @__PURE__ */ i({
-  __name: "comboboxInput",
-  props: {
-    modelValue: {},
-    modelModifiers: {}
-  },
-  emits: ["update:modelValue"],
-  setup(l) {
-    const e = m(x);
-    if (!e)
-      throw new Error("Combobox injectable context is not provided");
-    const o = r(l, "modelValue");
-    function t() {
-      o.value = e.displayValue.value;
-    }
-    c(e.displayValue, t, { immediate: !0 });
-    const u = p(() => ({
-      oninput: () => e.open({ focus: !0 }),
-      onchange: t,
-      ...e.activatorAttrs.value
-    }));
-    return (V, n) => d((f(), s("input", v({
-      "onUpdate:modelValue": n[0] || (n[0] = (a) => o.value = a)
-    }, u.value, { autocomplete: "off" }), null, 16)), [
-      [b, o.value]
-    ]);
-  }
-});
-export {
-  h as _
-};