@wikicasa-dev/components 2.2.8-alpha.17 → 2.2.8-alpha.18

package/dist/Swiper/autoplay.js

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

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

@@ -9,7 +9,11 @@ export interface ClearableAutocompleteProps<TID extends string | number | undefi
     inputWrapperClasses?: ClassTypeProp;
     inputClasses?: ClassTypeProp;
     dropdownClasses?: ClassTypeProp;
-    clearButtonClasses?: ClassTypeProp;
+    clearButton?: {
+        classes?: ClassTypeProp;
+        /** Space between the input element and the clear button */
+        offset?: number;
+    };
     keepState?: Nullable<"closed" | "open">;
     onInputChangeCb: (v: string) => Promise<AccessibleSelectOptions<TPayload, TID>[]>;
     onOptionSelectedCb?: Nullable<(v: AccessibleSelectOptions<TPayload, TID>) => void>;

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

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

package/package.json

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