@wikicasa-dev/components 2.2.9-alpha.20 → 2.2.9-alpha.22

package/dist/Swiper/autoplay.js

@@ -1,5 +1,5 @@
 import { Autoplay as t } from "swiper/modules";
-import '../assets/swiper-controller.css';/* empty css                                                                           */
+import '../assets/swiper-autoplay.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-controller.css';/* empty css                                                                             */
+import '../assets/swiper-autoplay.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-controller.css';/* empty css                                                                           */
+import '../assets/swiper-autoplay.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-controller.css';/* empty css                                                                         */
+import '../assets/swiper-autoplay.css';/* empty css                                                                         */
 export {
   p as Thumbs
 };

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

@@ -8,11 +8,14 @@ export interface ClearableAutocompleteProps<TID extends string | number | undefi
     triggerWrapperClasses?: ClassTypeProp;
     inputWrapperClasses?: ClassTypeProp;
     inputClasses?: ClassTypeProp;
+    hiddenTextClasses?: ClassTypeProp;
     dropdownClasses?: ClassTypeProp;
     clearButton?: {
         classes?: ClassTypeProp;
         /** Space between the input element and the clear button */
         offset?: number;
+        width?: number;
+        height?: number;
     };
     keepState?: Nullable<"closed" | "open">;
     disableCb?: boolean;

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

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

package/package.json

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