@wikicasa-dev/components 2.2.9-alpha.3 → 2.2.9-alpha.32

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

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

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

@@ -30,13 +30,13 @@ const Q = ["innerHTML"], ne = /* @__PURE__ */ x({
     modelModifiers: {}
   }),
   emits: /* @__PURE__ */ $(["update:dropdownState", "changedValue", "click", "keydown", "keydownEnterPressed"], ["update:modelValue"]),
-  setup(t, { expose: S, emit: V }) {
-    const u = F(t, "modelValue"), r = V, i = d(""), a = d([]), v = d(null), b = d(!1), n = d(!1), C = d(null), B = k(() => a.value.length);
+  setup(t, { expose: V, emit: B }) {
+    const u = F(t, "modelValue"), r = B, i = d(""), a = d([]), v = d(null), b = d(!1), n = d(!1), C = d(null), S = k(() => a.value.length);
     L(() => {
       v.value = q({ delay: 300 }, t.onInputChangeCb);
     });
     const { activeIdx: m, selectedIdx: h } = J({
-      optionsLength: B,
+      optionsLength: S,
       isDropdownOpen: n,
       disableSpaceHandler: !0
     }), O = k(() => {
@@ -103,7 +103,7 @@ const Q = ["innerHTML"], ne = /* @__PURE__ */ x({
       }
     ), f(n, (e) => {
       r("update:dropdownState", e);
-    }), S({
+    }), V({
       select: () => {
         C.value?.select();
       }
@@ -126,7 +126,7 @@ const Q = ["innerHTML"], ne = /* @__PURE__ */ x({
       "keep-state": !a.value.length || t.keepState === "closed" ? "closed" : "opened",
       "close-when-clicked-outside": t.closeDropdownOnBodyPressed,
       "activate-keyboard-controller": !1,
-      "onUpdate:dropdownState": l[3] || (l[3] = (o) => n.value = o),
+      "onUpdate:open": l[3] || (l[3] = (o) => n.value = o),
       onClick: l[4] || (l[4] = (o) => {
         r("click"), E();
       })

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

@@ -1,6 +1,6 @@
-import { defineComponent as c, ref as b, computed as l, createElementBlock as f, openBlock as v, withModifiers as s, normalizeStyle as B, normalizeClass as C, renderSlot as u, createVNode as M } from "vue";
-import z from "../../../../UIKit/StaticSpinner.js";
-const L = ["id", "data-cy", "type", "data-active", "disabled", "aria-label", "title"], $ = /* @__PURE__ */ c({
+import { defineComponent as v, useTemplateRef as c, shallowRef as B, computed as l, createElementBlock as C, openBlock as w, withModifiers as s, normalizeStyle as M, normalizeClass as z, renderSlot as u, createVNode as L } from "vue";
+import g from "../../../../UIKit/StaticSpinner.js";
+const S = ["id", "data-cy", "type", "data-active", "disabled", "aria-label", "title"], A = /* @__PURE__ */ v({
   __name: "BaseButton",
   props: {
     btnClass: { default: "uikit-btn-w-primary" },
@@ -15,18 +15,21 @@ const L = ["id", "data-cy", "type", "data-active", "disabled", "aria-label", "ti
     dataCy: {},
     type: {}
   },
-  emits: ["mouseover", "mouseout", "click"],
-  setup(e, { emit: d }) {
-    const o = d, n = b(!1), r = l(() => e.size ? `uikit-btn-${e.size}` : ""), m = l(() => e.outlined ? "uikit-btn-outline" : ""), k = () => {
-      n.value = !0;
-    }, y = () => {
-      n.value = !1;
+  emits: ["mouseover", "mouseout", "click", "keydown"],
+  setup(e, { expose: d, emit: r }) {
+    const o = r, m = c("buttonEl"), a = B(!1), y = l(() => e.size ? `uikit-btn-${e.size}` : ""), k = l(() => e.outlined ? "uikit-btn-outline" : ""), b = () => {
+      a.value = !0;
+    }, f = () => {
+      a.value = !1;
     };
-    return (a, t) => (v(), f("button", {
-      id: a.$attrs.id,
+    return d({
+      getRootElement: () => m.value
+    }), (n, t) => (w(), C("button", {
+      ref: "buttonEl",
+      id: n.$attrs.id,
       "data-cy": e.dataCy,
       type: e.type,
-      class: C([
+      class: z([
         "uikit-btn",
         {
           "uikit-btn-empty": !e.withMinWidth,
@@ -34,33 +37,34 @@ const L = ["id", "data-cy", "type", "data-active", "disabled", "aria-label", "ti
           "uikit-flex uikit-items-center uikit-justify-center": e.isLoading
         },
         e.btnClass,
-        r.value,
-        m.value
+        y.value,
+        k.value
       ]),
-      style: B(a.$attrs.style),
+      style: M(n.$attrs.style),
       "data-active": e.keepActive,
       disabled: e.isLoading || e.disabled,
       "aria-label": e.ariaLabel,
       title: e.title,
       onMouseover: t[0] || (t[0] = s((i) => {
-        k(), o("mouseover", i);
+        b(), o("mouseover", i);
       }, ["stop"])),
       onMouseout: t[1] || (t[1] = s((i) => {
-        y(), o("mouseout", i);
+        f(), o("mouseout", i);
       }, ["stop"])),
-      onClick: t[2] || (t[2] = (i) => o("click", i))
+      onClick: t[2] || (t[2] = (i) => o("click", i)),
+      onKeydown: t[3] || (t[3] = (i) => o("keydown", i))
     }, [
-      e.isLoading ? u(a.$slots, "spinner", { key: 1 }, () => [
-        M(z, {
+      e.isLoading ? u(n.$slots, "spinner", { key: 1 }, () => [
+        L(g, {
           "stroke-color": e.outlined ? "#ACB4C3" : "#fff"
         }, null, 8, ["stroke-color"])
-      ]) : u(a.$slots, "default", {
+      ]) : u(n.$slots, "default", {
         key: 0,
-        hover: n.value
+        hover: a.value
       })
-    ], 46, L));
+    ], 46, S));
   }
 });
 export {
-  $ as default
+  A as default
 };