@wikicasa-dev/components 2.2.9-alpha.15 → 2.2.9-alpha.17

package/dist/Swiper/autoplay.js

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

package/dist/UIKit/BaseDropDown.d.ts

@@ -51,6 +51,7 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps,
     activeIdx: import('vue').Ref<number, number>;
     selectedIdx: import('vue').Ref<number, number>;
     getRootElement: () => HTMLDivElement | null;
+    getContentElement: () => HTMLElement | null;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     click: () => any;
     "update:toggleDropdown": (value: Optional<boolean>) => any;

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

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

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

@@ -1,4 +1,4 @@
-import { defineComponent as N, mergeModels as D, useId as R, useModel as E, shallowRef as x, computed as V, useTemplateRef as I, onMounted as z, onUnmounted as q, watch as l, nextTick as U, createElementBlock as j, openBlock as f, normalizeClass as i, renderSlot as K, createBlock as B, createVNode as F, unref as r, withCtx as L, createElementVNode as G, createCommentVNode as J, resolveDynamicComponent as P } from "vue";
+import { defineComponent as N, mergeModels as D, useId as R, useModel as E, shallowRef as x, computed as V, useTemplateRef as I, onMounted as z, onUnmounted as q, watch as l, nextTick as U, createElementBlock as j, openBlock as k, normalizeClass as i, renderSlot as K, createBlock as B, createVNode as F, unref as r, withCtx as L, createElementVNode as G, createCommentVNode as J, resolveDynamicComponent as P } from "vue";
 import Q from "./BaseButton.vue.js";
 import { ArrowIcon as X } from "@wikicasa-dev/svg-icons";
 import { useKeyboardController as Y } from "@wikicasa-dev/vue-composables";
@@ -29,12 +29,12 @@ const Z = ["innerHTML"], le = /* @__PURE__ */ N({
   }),
   emits: /* @__PURE__ */ D(["click", "update:dropdownState"], ["update:toggleDropdown", "update:resetKeyboardController"]),
   setup(o, { expose: S, emit: A }) {
-    const n = o, k = R(), v = A, w = E(o, "toggleDropdown"), m = E(
+    const n = o, v = R(), w = A, m = E(o, "toggleDropdown"), p = E(
       o,
       "resetKeyboardController"
     );
-    let p = !1;
-    const t = x(!1), u = x([]), M = V(() => u.value.length), s = I("container"), y = I("dropdown"), { activeIdx: d, selectedIdx: a, onKeyDownHandler: O } = Y({
+    let y = !1;
+    const t = x(!1), u = x([]), M = V(() => u.value.length), s = I("container"), c = I("dropdown"), { activeIdx: d, selectedIdx: a, onKeyDownHandler: O } = Y({
       optionsLength: M,
       isDropdownOpen: t,
       global: !1
@@ -42,26 +42,26 @@ const Z = ["innerHTML"], le = /* @__PURE__ */ N({
       t.value = !1;
     }, b = ({ target: e }) => {
       s.value?.contains(e) || W();
-    }, h = (e) => {
+    }, C = (e) => {
       t.value && s.value?.contains(document.activeElement) && e.key === "Tab" && (t.value = !1);
     }, $ = (e) => {
       n.activateKeyboardController && O(e);
-    }, c = () => {
+    }, f = () => {
       n.keepState === "closed" && !t.value || n.keepState === "opened" && t.value || (t.value = !t.value);
     }, T = (e) => {
       e != null && (d.value = e);
     }, H = (e) => {
       e != null && (a.value = e);
-    }, C = () => {
-      y.value && (u.value = Array.from(y.value.children));
+    }, h = () => {
+      c.value && (u.value = Array.from(c.value.children));
     };
     return z(() => {
-      C();
+      h();
     }), q(() => {
-      n.closeWhenClickedOutside && (document.removeEventListener("click", b), document.removeEventListener("keydown", h));
-    }), l(m, (e) => {
+      n.closeWhenClickedOutside && (document.removeEventListener("click", b), document.removeEventListener("keydown", C));
+    }), l(p, (e) => {
       e && (d.value = -1, a.value = -1, U(() => {
-        C(), m.value = !1;
+        h(), p.value = !1;
       }));
     }), l(
       () => n.openDropdown,
@@ -72,28 +72,29 @@ const Z = ["innerHTML"], le = /* @__PURE__ */ N({
         immediate: !0
       }
     ), l(t, (e) => {
-      v("update:dropdownState", e);
+      w("update:dropdownState", e);
     }), l(t, (e) => {
-      !e || p || !n.closeWhenClickedOutside || (document.addEventListener("click", b), document.addEventListener("keydown", h), p = !0);
-    }), l(w, (e) => {
-      e && (t.value = !t.value, w.value = !1);
+      !e || y || !n.closeWhenClickedOutside || (document.addEventListener("click", b), document.addEventListener("keydown", C), y = !0);
+    }), l(m, (e) => {
+      e && (t.value = !t.value, m.value = !1);
     }), l(a, (e) => {
       e !== -1 && u.value[e].querySelector("a")?.click();
     }), S({
       activeIdx: d,
       selectedIdx: a,
-      getRootElement: () => s.value
-    }), (e, g) => (f(), j("div", {
+      getRootElement: () => s.value,
+      getContentElement: () => c.value
+    }), (e, g) => (k(), j("div", {
       ref: "container",
       class: i(["uikit-relative uikit-block", e.$attrs.class]),
       onKeydown: $
     }, [
       K(e.$slots, "btn_slot", {
-        toggleDropdown: c,
+        toggleDropdown: f,
         isOpen: t.value
       }, () => [
         F(Q, {
-          id: r(k),
+          id: r(v),
           type: "button",
           "data-cy": o.dataCy,
           class: i([
@@ -103,7 +104,7 @@ const Z = ["innerHTML"], le = /* @__PURE__ */ N({
           "aria-expanded": t.value,
           "btn-class": "uikit-btn-single-selection",
           onClick: g[0] || (g[0] = (_) => {
-            v("click"), c();
+            w("click"), f();
           })
         }, {
           default: L(() => [
@@ -111,7 +112,7 @@ const Z = ["innerHTML"], le = /* @__PURE__ */ N({
               class: i(["uikit-mr-5px", o.labelClasses]),
               innerHTML: o.btnLabel
             }, null, 10, Z),
-            o.withArrowIcon ? (f(), B(r(X), {
+            o.withArrowIcon ? (k(), B(r(X), {
               key: 0,
               class: i(["uikit-shrink-0 uikit-transition-transform motion-reduce:uikit-transition-none", t.value ? "uikit-rotate-180" : ""]),
               width: o.arrowWidth,
@@ -122,8 +123,8 @@ const Z = ["innerHTML"], le = /* @__PURE__ */ N({
           _: 1
         }, 8, ["id", "data-cy", "class", "aria-expanded"])
       ]),
-      (f(), B(P(o.dropdownElement), {
-        id: "dropdown_" + r(k),
+      (k(), B(P(o.dropdownElement), {
+        id: "dropdown_" + r(v),
         ref: "dropdown",
         "data-cy": o.dataCy && `${o.dataCy}_dropdown`,
         class: i(["uikit-dropdown-content uikit-w-full uikit-flex-col uikit-overflow-y-auto uikit-border uikit-border-solid uikit-bg-white uikit-pl-0 uikit-opacity-100 uikit-shadow uikit-no-scrollbar", [
@@ -138,7 +139,7 @@ const Z = ["innerHTML"], le = /* @__PURE__ */ N({
         default: L(() => [
           K(e.$slots, "default", {
             isOpen: t.value,
-            toggleDropdown: c,
+            toggleDropdown: f,
             activeIdx: r(d),
             selectedIdx: r(a),
             setActiveIdx: T,

package/package.json

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