@wikicasa-dev/components 2.4.2-alpha.9 → 2.5.1-alpha.0

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

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

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

@@ -79,7 +79,7 @@ const G = ["id", "data-cy"], J = ["innerHTML"], X = /* @__PURE__ */ A({
       w(V, {
         appear: p(B),
         name: "modal-transition",
-        duration: { enter: 500, leave: 250 },
+        duration: { enter: 250, leave: 250 },
         onBeforeEnter: I,
         onAfterEnter: L,
         onLeave: z,