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

package/dist/Swiper/autoplay.js

@@ -1,5 +1,5 @@
 import { Autoplay as t } from "swiper/modules";
-import '../assets/swiper-keyboard.css';/* empty css                                                                           */
+import '../assets/swiper-controller.css';/* empty css                                                                           */
 export {
   t as Autoplay
 };

package/dist/Swiper/controller.js

@@ -1,5 +1,5 @@
 import { Controller as e } from "swiper/modules";
-import '../assets/swiper-keyboard.css';/* empty css                                                                             */
+import '../assets/swiper-controller.css';/* empty css                                                                             */
 export {
   e as Controller
 };

package/dist/Swiper/keyboard.js

@@ -1,5 +1,5 @@
 import { Keyboard as m } from "swiper/modules";
-import '../assets/swiper-keyboard.css';/* empty css                                                                           */
+import '../assets/swiper-controller.css';/* empty css                                                                           */
 export {
   m as Keyboard
 };

package/dist/Swiper/thumbs.js

@@ -1,5 +1,5 @@
 import { Thumbs as p } from "swiper/modules";
-import '../assets/swiper-keyboard.css';/* empty css                                                                         */
+import '../assets/swiper-controller.css';/* empty css                                                                         */
 export {
   p as Thumbs
 };

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

@@ -1,11 +1,11 @@
-import { defineComponent as X, mergeModels as O, useModel as B, useId as j, useTemplateRef as d, shallowRef as c, onBeforeMount as q, watch as g, nextTick as G, createBlock as V, openBlock as T, withCtx as S, createElementBlock as J, Fragment as Q, renderList as Y, renderSlot as m, createElementVNode as s, normalizeClass as f, normalizeStyle as W, withDirectives as U, unref as Z, vModelText as _, toDisplayString as ee, withModifiers as te, createTextVNode as le, vShow as ne } from "vue";
-import oe from "../BaseDropDown.vue.js";
+import { defineComponent as H, mergeModels as V, useModel as T, useId as P, useTemplateRef as d, shallowRef as c, onBeforeMount as G, watch as g, nextTick as X, createBlock as W, openBlock as S, withCtx as x, createElementBlock as j, Fragment as q, renderList as J, renderSlot as m, createElementVNode as s, normalizeClass as f, withDirectives as Q, unref as Y, vModelText as Z, toDisplayString as _, withModifiers as ee, normalizeStyle as te, createTextVNode as le } from "vue";
+import ne 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__ */ X({
+import oe from "../BaseSelect/SelectItem.vue.js";
+import { debounce as ae } from "@wikicasa-dev/utilities";
+const ie = ["id", "data-cy", "placeholder"], ue = ["innerHTML"], ve = /* @__PURE__ */ H({
   __name: "ClearableAutocomplete",
-  props: /* @__PURE__ */ O({
+  props: /* @__PURE__ */ V({
     dataCy: {},
     placeholder: {},
     enableKeyboardController: { type: Boolean, default: !0 },
@@ -29,40 +29,43 @@ 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: E, emit: I }) {
-    const r = B(t, "open"), u = B(t, "modelValue"), o = B(t, "inputValue");
+  emits: /* @__PURE__ */ V(["input", "click", "inputClick", "keydown"], ["update:open", "update:modelValue", "update:inputValue"]),
+  setup(t, { expose: U, emit: E }) {
+    const r = T(t, "open"), u = T(t, "modelValue"), o = T(t, "inputValue");
     o.value = o.value ?? u.value?.label ?? "";
-    const p = I, L = j(), C = d("inputRef"), v = c(0), b = c(!1), h = c(!!u.value?.label), x = c(null), a = c([]), M = d("dropdownRef"), R = d("hiddenSpan"), z = d("inputWrapperRef"), D = d("clearButtonRef"), K = () => {
+    const p = E, I = P(), C = d("inputRef"), v = c(0), b = c(!1), y = c(!!u.value?.label), M = c(null), a = c([]), F = d("dropdownRef"), R = d("hiddenSpan"), D = d("inputWrapperRef"), L = d("clearButtonRef"), z = () => {
       o.value = "", u.value = null;
-    }, N = async (l) => {
+    }, K = async (l) => {
       if (!l) {
         a.value = [], r.value = !1;
         return;
       }
-      t.disableCb || (a.value = await x.value?.(l) || [], b.value = !0, r.value = !!a.value.length);
+      t.disableCb || (a.value = await M.value?.(l) || [], b.value = !0, r.value = !!a.value.length);
     }, $ = (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, h.value = !0, a.value = []);
-    }, A = () => {
+      !e || e.id === u.value?.id || (t.onOptionSelectedCb?.(e), o.value = e.label, r.value = !1, u.value = e, y.value = !0, a.value = []);
+    }, N = () => {
       C.value?.select();
-    }, H = () => {
+    }, A = () => {
       C.value?.focus();
     };
-    return q(() => {
-      x.value = ie({ delay: 300 }, t.onInputChangeCb);
+    return G(() => {
+      M.value = ae({ delay: 300 }, t.onInputChangeCb);
     }), g(
-      [o, R, z, D],
+      [o, R, D, L],
       ([, l, e, n]) => {
-        !l || !e || G(() => {
+        !l || !e || X(() => {
           if (!l || !e) return;
-          const y = l.offsetWidth, k = e.offsetWidth, i = t.clearButton?.offset || 0, w = t.clearButton?.width || n?.offsetWidth || 0, P = k - i - w, F = Math.min(y, P);
-          F !== v.value && (v.value = F);
+          const h = l.offsetWidth, k = e.offsetWidth, i = t.clearButton?.offset || 0, w = t.clearButton?.width || n?.offsetWidth || 0, O = k - i - w, B = Math.min(h, O);
+          console.log("DEBUG:", {
+            maxPosition: O,
+            newOffset: B
+          }), B !== v.value && (v.value = B);
         });
       },
       { immediate: !0 }
     ), g(
-      () => M.value?.selectedIdx,
+      () => F.value?.selectedIdx,
       (l) => {
         const e = l ?? -1;
         e !== -1 && $(e);
@@ -73,11 +76,11 @@ const ue = ["id", "data-cy", "placeholder"], se = ["innerHTML"], ke = /* @__PURE
         l === e || l?.label === o.value || (o.value = l?.label || "");
       },
       { immediate: !0 }
-    ), E({
-      getRootElement: () => M.value?.getRootElement(),
-      select: A,
-      focus: H
-    }), (l, e) => (T(), V(oe, {
+    ), U({
+      getRootElement: () => F.value?.getRootElement(),
+      select: N,
+      focus: A
+    }), (l, e) => (S(), W(ne, {
       ref: "dropdownRef",
       class: "uikit-clearable-autocomplete",
       "data-cy": t.dataCy,
@@ -90,7 +93,7 @@ const ue = ["id", "data-cy", "placeholder"], se = ["innerHTML"], ke = /* @__PURE
       "onUpdate:resetKeyboardController": e[5] || (e[5] = (n) => b.value = n),
       "onUpdate:dropdownState": e[6] || (e[6] = (n) => r.value = n)
     }, {
-      btn_slot: S(() => [
+      btn_slot: x(() => [
         s("div", {
           class: f(["uikit-text-16", t.triggerWrapperClasses]),
           onClick: e[4] || (e[4] = (n) => p("click", n))
@@ -98,20 +101,15 @@ const ue = ["id", "data-cy", "placeholder"], se = ["innerHTML"], ke = /* @__PURE
           m(l.$slots, "left-icon"),
           s("div", {
             ref: "inputWrapperRef",
-            class: f(["uikit-relative", t.inputWrapperClasses]),
-            style: W(
-              t.clearButton?.width ? {
-                paddingRight: `${t.clearButton.width}px`
-              } : {}
-            )
+            class: f(["uikit-relative", t.inputWrapperClasses])
           }, [
-            U(s("input", {
+            Q(s("input", {
               ref: "inputRef",
               "onUpdate:modelValue": [
                 e[0] || (e[0] = (n) => o.value = n),
-                N
+                K
               ],
-              id: Z(L),
+              id: Y(I),
               "data-cy": t.dataCy ? `ac_input_${t.dataCy}` : "",
               type: "text",
               autocomplete: "off",
@@ -123,13 +121,13 @@ const ue = ["id", "data-cy", "placeholder"], se = ["innerHTML"], ke = /* @__PURE
               placeholder: t.placeholder,
               onKeydown: e[1] || (e[1] = (n) => p("keydown", n)),
               onInput: e[2] || (e[2] = (n) => {
-                p("input", n), h.value = !1;
+                p("input", n), y.value = !1;
               }),
               onClick: e[3] || (e[3] = (n) => {
                 p("inputClick", n), C.value?.select();
               })
-            }, null, 42, ue), [
-              [_, o.value]
+            }, null, 42, ie), [
+              [Z, o.value]
             ]),
             s("span", {
               ref_key: "hiddenSpan",
@@ -139,45 +137,44 @@ const ue = ["id", "data-cy", "placeholder"], se = ["innerHTML"], ke = /* @__PURE
                 font: "inherit",
                 fontSize: "inherit"
               }
-            }, ee(o.value), 3),
-            U(s("button", {
+            }, _(o.value), 3),
+            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: W({
+              style: te({
+                display: y.value && v.value ? "inline-block" : "none !important",
                 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: te(K, ["stop"])
+              onClick: ee(z, ["stop"])
             }, [
               m(l.$slots, "clear-icon", {}, () => [
                 e[7] || (e[7] = le("X", -1))
               ])
-            ], 6), [
-              [ne, h.value && v.value]
-            ])
-          ], 6),
+            ], 6)
+          ], 2),
           m(l.$slots, "right-icon")
         ], 2)
       ]),
-      default: S(({ activeIdx: n, setActiveIdx: y }) => [
-        (T(!0), J(Q, null, Y(a.value, (k, i) => (T(), V(ae, {
+      default: x(({ activeIdx: n, setActiveIdx: h }) => [
+        (S(!0), j(q, null, J(a.value, (k, i) => (S(), W(oe, {
           key: i,
           active: n === i,
           class: "uikit-m-1 uikit-rounded-[5px] uikit-px-5 uikit-py-10px hover:uikit-cursor-pointer",
           onClick: (w) => $(i),
-          onMouseover: (w) => y(i)
+          onMouseover: (w) => h(i)
         }, {
-          default: S(() => [
+          default: x(() => [
             m(l.$slots, "option-content", {
               option: k,
               idx: i
             }, () => [
               s("span", {
                 innerHTML: k.label
-              }, null, 8, se)
+              }, null, 8, ue)
             ])
           ]),
           _: 2
@@ -188,5 +185,5 @@ const ue = ["id", "data-cy", "placeholder"], se = ["innerHTML"], ke = /* @__PURE
   }
 });
 export {
-  ke as default
+  ve as default
 };

package/package.json

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