@wikicasa-dev/components 2.2.8-alpha.21 → 2.2.8-alpha.23

package/dist/UIKit/Autocomplete/ClearableAutocomplete.d.ts

@@ -24,8 +24,9 @@ declare const _default: <TID extends string | number | undefined, TPayload>(__VL
         readonly onClick?: (() => any) | undefined;
         readonly onKeydown?: ((args_0: KeyboardEvent) => any) | undefined;
         readonly "onUpdate:open"?: ((value: boolean) => any) | undefined;
+        readonly onInputClick?: (() => any) | undefined;
         readonly "onUpdate:inputValue"?: ((args_0: string) => any) | undefined;
-    } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, "onUpdate:modelValue" | "onClick" | "onKeydown" | "onUpdate:open" | "onUpdate:inputValue"> & ({
+    } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, "onUpdate:modelValue" | "onClick" | "onKeydown" | "onUpdate:open" | "onInputClick" | "onUpdate:inputValue"> & ({
         open?: boolean;
         modelValue?: Nullable<AccessibleSelectOptions<TPayload, TID>>;
     } & ClearableAutocompleteProps<TID, TPayload>) & Partial<{}>> & import('vue').PublicProps;
@@ -42,7 +43,7 @@ declare const _default: <TID extends string | number | undefined, TPayload>(__VL
             idx: number;
         }): any;
     };
-    emit: (((evt: "click") => void) & ((evt: "keydown", args_0: KeyboardEvent) => void) & ((evt: "update:inputValue", args_0: string) => void)) & (((evt: "update:modelValue", value: Nullable<AccessibleSelectOptions<TPayload, TID>>) => void) & ((evt: "update:open", value: boolean) => void));
+    emit: (((evt: "click") => void) & ((evt: "keydown", args_0: KeyboardEvent) => void) & ((evt: "inputClick") => void) & ((evt: "update:inputValue", args_0: string) => void)) & (((evt: "update:modelValue", value: Nullable<AccessibleSelectOptions<TPayload, TID>>) => void) & ((evt: "update:open", value: boolean) => void));
 }>) => import('vue').VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

package/dist/packages/components/lib/UIKit/Autocomplete/ClearableAutocomplete.vue.js

@@ -1,11 +1,11 @@
-import { defineComponent as K, mergeModels as T, useModel as B, useTemplateRef as b, shallowRef as s, onBeforeMount as L, watch as y, nextTick as N, createBlock as M, openBlock as c, withCtx as C, createElementBlock as V, Fragment as W, renderList as I, renderSlot as f, createElementVNode as d, normalizeClass as v, withDirectives as A, createCommentVNode as H, vModelText as G, toDisplayString as P, withModifiers as X, normalizeStyle as j, createTextVNode as q } from "vue";
+import { defineComponent as L, mergeModels as B, useModel as M, useTemplateRef as C, shallowRef as d, onBeforeMount as N, watch as b, nextTick as W, createBlock as V, openBlock as c, withCtx as y, createElementBlock as $, Fragment as I, renderList as A, renderSlot as f, createElementVNode as p, withModifiers as w, normalizeClass as v, withDirectives as H, createCommentVNode as G, vModelText as P, toDisplayString as X, normalizeStyle as j, createTextVNode as q } from "vue";
 import J from "../BaseDropDown.vue.js";
 import '../../../../../assets/BaseDropDown.css';/* empty css                   */
 import Q from "../BaseSelect/SelectItem.vue.js";
 import { debounce as Y } from "@wikicasa-dev/utilities";
-const Z = ["readonly", "placeholder"], _ = ["innerHTML"], ie = /* @__PURE__ */ K({
+const Z = ["readonly", "placeholder"], _ = ["innerHTML"], ie = /* @__PURE__ */ L({
   __name: "ClearableAutocomplete",
-  props: /* @__PURE__ */ T({
+  props: /* @__PURE__ */ B({
     dataCy: {},
     placeholder: {},
     enableKeyboardController: { type: Boolean, default: !0 },
@@ -23,28 +23,28 @@ const Z = ["readonly", "placeholder"], _ = ["innerHTML"], ie = /* @__PURE__ */ K
     modelValue: { default: null },
     modelModifiers: {}
   }),
-  emits: /* @__PURE__ */ T(["click", "update:inputValue", "keydown"], ["update:open", "update:modelValue"]),
-  setup(l, { expose: $, emit: F }) {
-    const u = B(l, "open"), a = B(l, "modelValue"), p = F, O = b("inputRef"), o = s(a.value?.label || ""), k = s(0), m = s(!1), w = s(null), i = s([]), U = b("dropdownRef"), h = b("hiddenSpan"), x = () => {
-      o.value = "", a.value = null, p("update:inputValue", "");
-    }, E = async (t) => {
-      if (p("update:inputValue", t), !t) {
+  emits: /* @__PURE__ */ B(["click", "inputClick", "update:inputValue", "keydown"], ["update:open", "update:modelValue"]),
+  setup(l, { expose: F, emit: O }) {
+    const u = M(l, "open"), a = M(l, "modelValue"), r = O, U = C("inputRef"), o = d(a.value?.label || ""), k = d(0), m = d(!1), h = d(null), i = d([]), x = C("dropdownRef"), g = C("hiddenSpan"), E = () => {
+      o.value = "", a.value = null, r("update:inputValue", "");
+    }, R = async (t) => {
+      if (r("update:inputValue", t), !t) {
         i.value = [], u.value = !1;
         return;
       }
-      i.value = await w.value?.(t) || [], m.value = !0, u.value = !!i.value.length;
-    }, g = (t = -1) => {
+      i.value = await h.value?.(t) || [], m.value = !0, u.value = !!i.value.length;
+    }, S = (t = -1) => {
       const e = i.value[t];
       !e || e.id === a.value?.id || (l.onOptionSelectedCb?.(e), o.value = e.label, u.value = !1, a.value = e, i.value = []);
-    }, R = () => {
-      O.value?.select();
+    }, z = () => {
+      U.value?.select();
     };
-    return L(() => {
-      w.value = Y({ delay: 300 }, l.onInputChangeCb);
-    }), y(
-      [o, () => h.value],
+    return N(() => {
+      h.value = Y({ delay: 300 }, l.onInputChangeCb);
+    }), b(
+      [o, () => g.value],
       ([t, e]) => {
-        e && N(() => {
+        e && W(() => {
           if (!e) return;
           const n = e.offsetWidth;
           n !== k.value && (console.log("DEBUG:updating icon positioning", {
@@ -53,21 +53,21 @@ const Z = ["readonly", "placeholder"], _ = ["innerHTML"], ie = /* @__PURE__ */ K
         });
       },
       { immediate: !0 }
-    ), y(
-      () => U.value?.selectedIdx,
+    ), b(
+      () => x.value?.selectedIdx,
       (t) => {
         const e = t ?? -1;
-        e !== -1 && g(e);
+        e !== -1 && S(e);
       }
-    ), y(
+    ), b(
       a,
       (t, e) => {
         t === e || t?.label === o.value || (o.value = t?.label || "");
       },
       { immediate: !0 }
-    ), $({
-      select: R
-    }), (t, e) => (c(), M(J, {
+    ), F({
+      select: z
+    }), (t, e) => (c(), V(J, {
       ref: "dropdownRef",
       class: "uikit-clearable-autocomplete",
       "data-cy": l.dataCy,
@@ -77,23 +77,23 @@ const Z = ["readonly", "placeholder"], _ = ["innerHTML"], ie = /* @__PURE__ */ K
       "keep-state": !i.value.length || l.keepState === "closed" ? "closed" : "opened",
       "activate-keyboard-controller": l.enableKeyboardController,
       "reset-keyboard-controller": m.value,
-      "onUpdate:resetKeyboardController": e[2] || (e[2] = (n) => m.value = n),
-      "onUpdate:dropdownState": e[3] || (e[3] = (n) => u.value = n),
-      onClick: e[4] || (e[4] = (n) => p("click"))
+      "onUpdate:resetKeyboardController": e[4] || (e[4] = (n) => m.value = n),
+      "onUpdate:dropdownState": e[5] || (e[5] = (n) => u.value = n)
     }, {
-      btn_slot: C(() => [
-        d("div", {
-          class: v(["uikit-text-16", l.triggerWrapperClasses])
+      btn_slot: y(() => [
+        p("div", {
+          class: v(["uikit-text-16", l.triggerWrapperClasses]),
+          onClick: e[3] || (e[3] = w((n) => r("click"), ["stop"]))
         }, [
           f(t.$slots, "left-icon"),
-          d("div", {
+          p("div", {
             class: v(["uikit-relative", l.inputWrapperClasses])
           }, [
-            A(d("input", {
+            H(p("input", {
               ref: "inputRef",
               "onUpdate:modelValue": [
                 e[0] || (e[0] = (n) => o.value = n),
-                E
+                R
               ],
               readonly: !!a.value?.label,
               class: v(["uikit-w-full uikit-border-none focus-visible:uikit-outline-none", l.inputClasses]),
@@ -102,20 +102,21 @@ const Z = ["readonly", "placeholder"], _ = ["innerHTML"], ie = /* @__PURE__ */ K
                 fontSize: "inherit"
               },
               placeholder: l.placeholder,
-              onKeydown: e[1] || (e[1] = (n) => p("keydown", n))
+              onKeydown: e[1] || (e[1] = (n) => r("keydown", n)),
+              onClick: e[2] || (e[2] = w((n) => r("inputClick"), ["stop"]))
             }, null, 42, Z), [
-              [G, o.value]
+              [P, o.value]
             ]),
-            d("span", {
+            p("span", {
               ref_key: "hiddenSpan",
-              ref: h,
+              ref: g,
               class: "uikit-invisible uikit-absolute uikit-left-0 uikit-top-0 uikit-whitespace-pre",
               style: {
                 font: "inherit",
                 fontSize: "inherit"
               }
-            }, P(o.value), 513),
-            a.value?.label ? (c(), V("button", {
+            }, X(o.value), 513),
+            a.value?.label ? (c(), $("button", {
               key: 0,
               type: "button",
               class: v(["uikit-clear-btn uikit-absolute uikit-top-1/2 -uikit-translate-y-1/2 uikit-appearance-none", l.clearButton?.classes]),
@@ -123,31 +124,31 @@ const Z = ["readonly", "placeholder"], _ = ["innerHTML"], ie = /* @__PURE__ */ K
               style: j({
                 left: `${k.value + (l.clearButton?.offset || 10)}px`
               }),
-              onClick: X(x, ["stop"])
+              onClick: w(E, ["stop"])
             }, [
               f(t.$slots, "clear-icon", {}, () => [
-                e[5] || (e[5] = q("X", -1))
+                e[6] || (e[6] = q("X", -1))
               ])
-            ], 6)) : H("", !0)
+            ], 6)) : G("", !0)
           ], 2),
           f(t.$slots, "right-icon")
         ], 2)
       ]),
-      default: C(({ activeIdx: n, setActiveIdx: z }) => [
-        (c(!0), V(W, null, I(i.value, (S, r) => (c(), M(Q, {
-          key: r,
-          active: n === r,
+      default: y(({ activeIdx: n, setActiveIdx: D }) => [
+        (c(!0), $(I, null, A(i.value, (T, s) => (c(), V(Q, {
+          key: s,
+          active: n === s,
           class: "uikit-m-1 uikit-rounded-[5px] uikit-px-5 uikit-py-10px hover:uikit-cursor-pointer",
-          onClick: (D) => g(r),
-          onMouseover: (D) => z(r)
+          onClick: (K) => S(s),
+          onMouseover: (K) => D(s)
         }, {
-          default: C(() => [
+          default: y(() => [
             f(t.$slots, "option-content", {
-              option: S,
-              idx: r
+              option: T,
+              idx: s
             }, () => [
-              d("span", {
-                innerHTML: S.label
+              p("span", {
+                innerHTML: T.label
               }, null, 8, _)
             ])
           ]),

package/dist/packages/components/lib/UIKit/BaseDropDown.vue.js

@@ -1,11 +1,11 @@
-import { defineComponent as L, mergeModels as C, useId as E, useModel as h, shallowRef as g, computed as O, useTemplateRef as W, watch as a, onBeforeMount as $, onMounted as T, onUnmounted as H, nextTick as N, createElementBlock as V, openBlock as f, normalizeClass as n, renderSlot as D, createBlock as x, createVNode as R, unref as d, withCtx as B, createElementVNode as q, createCommentVNode as z, resolveDynamicComponent as U, withModifiers as j } from "vue";
+import { defineComponent as O, mergeModels as h, useId as W, useModel as g, shallowRef as D, computed as $, useTemplateRef as T, onMounted as H, onUnmounted as N, watch as i, nextTick as V, createElementBlock as z, openBlock as f, normalizeClass as n, renderSlot as x, createBlock as I, createVNode as R, withModifiers as B, unref as r, withCtx as S, createElementVNode as q, createCommentVNode as U, resolveDynamicComponent as j } from "vue";
 import F from "./BaseButton.vue.js";
 import { ArrowIcon as G } from "@wikicasa-dev/svg-icons";
 import { useKeyboardController as J } from "@wikicasa-dev/vue-composables";
-const P = ["innerHTML"], ee = /* @__PURE__ */ L({
+const P = ["innerHTML"], ee = /* @__PURE__ */ O({
   inheritAttrs: !1,
   __name: "BaseDropDown",
-  props: /* @__PURE__ */ C({
+  props: /* @__PURE__ */ h({
     dropdownClasses: { default: "" },
     btnClasses: { default: "" },
     withArrowIcon: { type: Boolean, default: !1 },
@@ -27,17 +27,37 @@ const P = ["innerHTML"], ee = /* @__PURE__ */ L({
     resetKeyboardController: { type: Boolean, default: !1 },
     resetKeyboardControllerModifiers: {}
   }),
-  emits: /* @__PURE__ */ C(["click", "update:dropdownState"], ["update:toggleDropdown", "update:resetKeyboardController"]),
-  setup(t, { expose: I, emit: S }) {
-    const l = t, k = E(), w = S, v = h(t, "toggleDropdown"), m = h(
+  emits: /* @__PURE__ */ h(["click", "update:dropdownState"], ["update:toggleDropdown", "update:resetKeyboardController"]),
+  setup(t, { expose: A, emit: E }) {
+    const l = t, k = W(), w = E, v = g(t, "toggleDropdown"), m = g(
       t,
       "resetKeyboardController"
-    ), o = g(!1), s = g([]), M = O(() => s.value.length), p = W("dropdown"), { activeIdx: r, selectedIdx: i } = J({
-      optionsLength: M,
+    );
+    let p = !1;
+    const o = D(!1), s = D([]), K = $(() => s.value.length), b = T("dropdown"), { activeIdx: d, selectedIdx: a } = J({
+      optionsLength: K,
       isDropdownOpen: o,
       activate: l.activateKeyboardController
-    });
-    a(
+    }), C = () => {
+      o.value = !1;
+    }, c = () => {
+      l.keepState === "closed" && !o.value || l.keepState === "opened" && o.value || (o.value = !o.value);
+    }, L = (e) => {
+      e != null && (d.value = e);
+    }, M = (e) => {
+      e != null && (a.value = e);
+    }, y = () => {
+      b.value && (s.value = Array.from(b.value.children));
+    };
+    return H(() => {
+      y();
+    }), N(() => {
+      l.closeWhenClickedOutside && document.removeEventListener("click", C);
+    }), i(m, (e) => {
+      e && (d.value = -1, a.value = -1, V(() => {
+        y(), m.value = !1;
+      }));
+    }), i(
       () => l.openDropdown,
       (e) => {
         o.value = e;
@@ -45,48 +65,26 @@ const P = ["innerHTML"], ee = /* @__PURE__ */ L({
       {
         immediate: !0
       }
-    ), a(o, (e) => {
+    ), i(o, (e) => {
       w("update:dropdownState", e);
-    }), a(v, (e) => {
+    }), i(o, (e) => {
+      !e || p || !l.closeWhenClickedOutside || (document.addEventListener("click", C), p = !0);
+    }), i(v, (e) => {
       e && (o.value = !o.value, v.value = !1);
-    }), a(i, (e) => {
+    }), i(a, (e) => {
       e !== -1 && s.value[e].querySelector("a")?.click();
-    });
-    const b = () => {
-      o.value = !1;
-    }, c = () => {
-      l.keepState === "closed" && !o.value || l.keepState === "opened" && o.value || (o.value = !o.value);
-    }, A = (e) => {
-      e != null && (r.value = e);
-    }, K = (e) => {
-      e != null && (i.value = e);
-    };
-    $(() => {
-      l.closeWhenClickedOutside && document.addEventListener("click", b);
-    });
-    const y = () => {
-      p.value && (s.value = Array.from(p.value.children));
-    };
-    return T(() => {
-      y();
-    }), H(() => {
-      l.closeWhenClickedOutside && document.removeEventListener("click", b);
-    }), a(m, (e) => {
-      e && (r.value = -1, i.value = -1, N(() => {
-        y(), m.value = !1;
-      }));
-    }), I({
-      activeIdx: r,
-      selectedIdx: i
-    }), (e, u) => (f(), V("div", {
+    }), A({
+      activeIdx: d,
+      selectedIdx: a
+    }), (e, u) => (f(), z("div", {
       class: n(["uikit-relative uikit-block", e.$attrs.class])
     }, [
-      D(e.$slots, "btn_slot", {
+      x(e.$slots, "btn_slot", {
         toggleDropdown: c,
         isOpen: o.value
       }, () => [
         R(F, {
-          id: d(k),
+          id: r(k),
           type: "button",
           "data-cy": t.dataCy,
           class: n([
@@ -95,28 +93,28 @@ const P = ["innerHTML"], ee = /* @__PURE__ */ L({
           ]),
           "aria-expanded": o.value,
           "btn-class": "uikit-btn-single-selection",
-          onClick: u[0] || (u[0] = (Q) => {
+          onClick: u[0] || (u[0] = B((Q) => {
             w("click"), c();
-          })
+          }, ["stop"]))
         }, {
-          default: B(() => [
+          default: S(() => [
             q("span", {
               class: n(["uikit-mr-5px", t.labelClasses]),
               innerHTML: t.btnLabel
             }, null, 10, P),
-            t.withArrowIcon ? (f(), x(d(G), {
+            t.withArrowIcon ? (f(), I(r(G), {
               key: 0,
               class: n(["uikit-shrink-0 uikit-transition-transform motion-reduce:uikit-transition-none", o.value ? "uikit-rotate-180" : ""]),
               width: t.arrowWidth,
               height: t.arrowWidth,
               "stroke-color": t.arrowStrokeColor
-            }, null, 8, ["class", "width", "height", "stroke-color"])) : z("", !0)
+            }, null, 8, ["class", "width", "height", "stroke-color"])) : U("", !0)
           ]),
           _: 1
         }, 8, ["id", "data-cy", "class", "aria-expanded"])
       ]),
-      (f(), x(U(t.dropdownElement), {
-        id: "dropdown_" + d(k),
+      (f(), I(j(t.dropdownElement), {
+        id: "dropdown_" + r(k),
         ref: "dropdown",
         "data-cy": t.dataCy && `${t.dataCy}_dropdown`,
         class: n(["uikit-dropdown-content uikit-w-full uikit-flex-col uikit-overflow-y-auto uikit-border uikit-border-solid uikit-bg-white uikit-pl-0 uikit-opacity-100 uikit-shadow uikit-no-scrollbar", [
@@ -127,17 +125,17 @@ const P = ["innerHTML"], ee = /* @__PURE__ */ L({
           { "uikit-absolute": t.isAbsolute }
         ]]),
         "aria-hidden": !o.value,
-        onClick: u[1] || (u[1] = j(() => {
+        onClick: u[1] || (u[1] = B(() => {
         }, ["stop"]))
       }, {
-        default: B(() => [
-          D(e.$slots, "default", {
+        default: S(() => [
+          x(e.$slots, "default", {
             isOpen: o.value,
             toggleDropdown: c,
-            activeIdx: d(r),
-            selectedIdx: d(i),
-            setActiveIdx: A,
-            setSelectedIdx: K
+            activeIdx: r(d),
+            selectedIdx: r(a),
+            setActiveIdx: L,
+            setSelectedIdx: M
           })
         ]),
         _: 3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wikicasa-dev/components",
-  "version": "2.2.8-alpha.21",
+  "version": "2.2.8-alpha.23",
   "description": "Wikicasa frontend components",
   "type": "module",
   "main": "./dist/index.js",