@wikicasa-dev/components 2.2.9-alpha.46 → 2.2.9-alpha.49

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

@@ -1,11 +1,11 @@
-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 { 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 M, withCtx as W, createElementBlock as Z, Fragment as _, renderList as ee, renderSlot as m, createElementVNode as s, 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 '../../../../../assets/BaseDropDown.css';/* empty css                   */
-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({
+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({
   __name: "ClearableAutocomplete",
-  props: /* @__PURE__ */ O({
+  props: /* @__PURE__ */ U({
     dataCy: {},
     placeholder: {},
     enableKeyboardController: { type: Boolean, default: !0 },
@@ -29,55 +29,60 @@ const ue = ["id", "data-cy", "placeholder"], se = ["innerHTML"], ke = /* @__PURE
     },
     inputValueModifiers: {}
   }),
-  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");
+  emits: /* @__PURE__ */ U(["input", "click", "inputClick", "keydown"], ["update:open", "update:modelValue", "update:inputValue"]),
+  setup(t, { expose: L, emit: D }) {
+    const r = S(t, "open"), u = S(t, "modelValue"), o = S(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 = () => {
+    const p = D, K = q(), C = d("inputRef"), v = c(0), y = c(!1), k = c(!!u.value?.label), x = c(null), a = c([]), O = d("dropdownRef"), h = d("hiddenSpan"), w = d("inputWrapperRef"), R = d("clearButtonRef"), N = () => {
       o.value = "", u.value = null, k.value = !1;
-    }, K = async (l) => {
+    }, A = async (l) => {
       if (!l) {
         a.value = [], r.value = !1;
         return;
       }
       t.disableCb || (a.value = await x.value?.(l) || [], y.value = !0, r.value = !!a.value.length);
-    }, R = (l = -1) => {
+    }, F = (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();
+    }, P = () => {
+      C.value?.select();
+    }, H = () => {
+      C.value?.focus();
     };
-    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 }
-    ), T(
-      () => M.value?.selectedIdx,
+    let B = null;
+    const $ = () => {
+      const l = h.value, e = w.value, n = R.value;
+      if (!l || !e) return;
+      const T = l.offsetWidth, b = e.offsetWidth, i = t.clearButton?.offset || 0, g = t.clearButton?.width || n?.offsetWidth || 0, X = b - i - g, V = Math.min(T, X);
+      V !== v.value && (v.value = V);
+    };
+    return G(() => {
+      x.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,
       (l) => {
         const e = l ?? -1;
-        e !== -1 && R(e);
+        e !== -1 && F(e);
       }
-    ), T(
+    ), E(
       u,
       (l, e) => {
         l === e || l?.label === o.value || (o.value = l?.label || "");
       },
       { immediate: !0 }
-    ), U({
-      getRootElement: () => M.value?.getRootElement(),
-      select: N,
-      focus: A
-    }), (l, e) => (g(), V(oe, {
+    ), L({
+      getRootElement: () => O.value?.getRootElement(),
+      select: P,
+      focus: H
+    }), (l, e) => (M(), z(se, {
       ref: "dropdownRef",
       class: "uikit-clearable-autocomplete",
       "data-cy": t.dataCy,
@@ -90,23 +95,23 @@ const ue = ["id", "data-cy", "placeholder"], se = ["innerHTML"], ke = /* @__PURE
       open: r.value,
       "onUpdate:open": e[6] || (e[6] = (n) => r.value = n)
     }, {
-      btn_slot: S(() => [
+      btn_slot: W(() => [
         s("div", {
           class: f(["uikit-text-16", t.triggerWrapperClasses]),
           onClick: e[4] || (e[4] = (n) => p("click", n))
         }, [
-          C(l.$slots, "left-icon"),
+          m(l.$slots, "left-icon"),
           s("div", {
             ref: "inputWrapperRef",
             class: f(["uikit-relative", t.inputWrapperClasses])
           }, [
-            W(s("input", {
+            I(s("input", {
               ref: "inputRef",
               "onUpdate:modelValue": [
                 e[0] || (e[0] = (n) => o.value = n),
-                K
+                A
               ],
-              id: Y(I),
+              id: te(K),
               "data-cy": t.dataCy ? `ac_input_${t.dataCy}` : "",
               type: "text",
               autocomplete: "off",
@@ -121,58 +126,58 @@ const ue = ["id", "data-cy", "placeholder"], se = ["innerHTML"], ke = /* @__PURE
                 p("input", n), k.value = !1;
               }),
               onClick: e[3] || (e[3] = (n) => {
-                p("inputClick", n), b.value?.select();
+                p("inputClick", n), C.value?.select();
               })
-            }, null, 42, ue), [
-              [Z, o.value]
+            }, null, 42, ce), [
+              [le, o.value]
             ]),
             s("span", {
               ref_key: "hiddenSpan",
-              ref: F,
+              ref: h,
               class: f(["uikit-invisible uikit-absolute uikit-left-0 uikit-top-0 uikit-whitespace-pre", t.hiddenTextClasses]),
               style: {
                 font: "inherit",
                 fontSize: "inherit"
               }
-            }, _(o.value), 3),
-            W(s("button", {
+            }, ne(o.value), 3),
+            I(s("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]),
               "aria-label": "Clear input",
-              style: te({
+              style: ae({
                 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: ee(D, ["stop"])
+              onClick: oe(N, ["stop"])
             }, [
-              C(l.$slots, "clear-icon", {}, () => [
-                e[7] || (e[7] = le("X", -1))
+              m(l.$slots, "clear-icon", {}, () => [
+                e[7] || (e[7] = ie("X", -1))
               ])
             ], 6), [
-              [ne, k.value && v.value]
+              [ue, k.value && v.value]
             ])
           ], 2),
-          C(l.$slots, "right-icon")
+          m(l.$slots, "right-icon")
         ], 2)
       ]),
-      default: S(({ activeIdx: n, setActiveIdx: h }) => [
-        (g(!0), G(J, null, Q(a.value, (m, i) => (g(), V(ae, {
+      default: W(({ activeIdx: n, setActiveIdx: T }) => [
+        (M(!0), Z(_, null, ee(a.value, (b, i) => (M(), z(re, {
           key: i,
           active: n === i,
           class: "uikit-m-1 uikit-rounded-[5px] uikit-px-5 uikit-py-10px hover:uikit-cursor-pointer",
-          onClick: (w) => R(i),
-          onMouseover: (w) => h(i)
+          onClick: (g) => F(i),
+          onMouseover: (g) => T(i)
         }, {
-          default: S(() => [
-            C(l.$slots, "option-content", {
-              option: m,
+          default: W(() => [
+            m(l.$slots, "option-content", {
+              option: b,
               idx: i
             }, () => [
               s("span", {
-                innerHTML: m.label
-              }, null, 8, se)
+                innerHTML: b.label
+              }, null, 8, fe)
             ])
           ]),
           _: 2
@@ -183,5 +188,5 @@ const ue = ["id", "data-cy", "placeholder"], se = ["innerHTML"], ke = /* @__PURE
   }
 });
 export {
-  ke as default
+  ye as default
 };

package/package.json

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