@wikicasa-dev/components 2.2.9-alpha.1 → 2.2.9-alpha.11

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/Autocomplete/ClearableAutocomplete.d.ts

@@ -15,6 +15,7 @@ export interface ClearableAutocompleteProps<TID extends string | number | undefi
         offset?: number;
     };
     keepState?: Nullable<"closed" | "open">;
+    disableCb?: boolean;
     onInputChangeCb: (v: string) => Promise<AccessibleSelectOptions<TPayload, TID>[]>;
     onOptionSelectedCb?: Nullable<(v: AccessibleSelectOptions<TPayload, TID>) => void>;
 }
@@ -24,15 +25,17 @@ declare const _default: <TID extends string | number | undefined, TPayload>(__VL
         readonly onClick?: ((args_0: MouseEvent) => any) | undefined;
         readonly onKeydown?: ((args_0: KeyboardEvent) => any) | undefined;
         readonly "onUpdate:open"?: ((value: boolean) => any) | undefined;
+        readonly "onUpdate:inputValue"?: ((value: string) => any) | undefined;
         readonly onInputClick?: ((args_0: MouseEvent) => any) | undefined;
-        readonly "onUpdate:inputValue"?: ((args_0: string) => any) | undefined;
-    } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, "onUpdate:modelValue" | "onClick" | "onKeydown" | "onUpdate:open" | "onInputClick" | "onUpdate:inputValue"> & ({
+    } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, "onUpdate:modelValue" | "onClick" | "onKeydown" | "onUpdate:open" | "onUpdate:inputValue" | "onInputClick"> & ({
         open?: boolean;
         modelValue?: Nullable<AccessibleSelectOptions<TPayload, TID>>;
+        inputValue?: string;
     } & ClearableAutocompleteProps<TID, TPayload>) & Partial<{}>> & import('vue').PublicProps;
     expose(exposed: import('vue').ShallowUnwrapRef<{
-        select: () => void;
         getRootElement: () => HTMLDivElement | null | undefined;
+        select: () => void;
+        focus: () => void;
     }>): void;
     attrs: any;
     slots: {
@@ -44,7 +47,7 @@ declare const _default: <TID extends string | number | undefined, TPayload>(__VL
             idx: number;
         }): any;
     };
-    emit: (((evt: "click", args_0: MouseEvent) => void) & ((evt: "keydown", args_0: KeyboardEvent) => void) & ((evt: "inputClick", args_0: MouseEvent) => void) & ((evt: "update:inputValue", args_0: string) => void)) & (((evt: "update:modelValue", value: Nullable<AccessibleSelectOptions<TPayload, TID>>) => void) & ((evt: "update:open", value: boolean) => void));
+    emit: (((evt: "click", args_0: MouseEvent) => void) & ((evt: "keydown", args_0: KeyboardEvent) => void) & ((evt: "inputClick", args_0: MouseEvent) => void)) & (((evt: "update:modelValue", value: Nullable<AccessibleSelectOptions<TPayload, TID>>) => void) & ((evt: "update:open", value: boolean) => void) & ((evt: "update:inputValue", value: string) => void));
 }>) => import('vue').VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

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

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

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

@@ -110,8 +110,8 @@ const F = ["id", "data-cy"], U = ["innerHTML"], R = /* @__PURE__ */ I({
             }, [
               D(K(V), {
                 class: s(["bbt-close-icon uikit-box-border", e.closeIcon?.classes]),
-                width: e.closeIcon?.size || 30,
-                height: e.closeIcon?.size || 30
+                width: e.closeIcon?.size || 20,
+                height: e.closeIcon?.size || 20
               }, null, 8, ["class", "width", "height"])
             ], 2)) : w("", !0),
             d(t.$slots, "header", { closeModal: o }, () => [

package/dist/packages/components/lib/UIKit/Checkbox/CheckboxGroup.vue.js

@@ -1,8 +1,8 @@
-import { defineComponent as p, ref as v, computed as h, watch as D, renderSlot as b, createElementVNode as E, normalizeClass as $, createElementBlock as B, createCommentVNode as A, openBlock as g, Fragment as I, renderList as R, createBlock as K, unref as V } from "vue";
+import { defineComponent as v, ref as D, computed as h, watch as E, renderSlot as b, createElementVNode as $, normalizeClass as g, createElementBlock as B, createCommentVNode as A, openBlock as C, Fragment as I, renderList as R, createBlock as K, unref as V } from "vue";
 import { stringToHyphened as L, isArrNullOrEmpty as G } from "@wikicasa-dev/utilities";
 import N from "./CheckboxBtn.vue.js";
 import '../../../../../assets/CheckboxBtn.css';/* empty css                 */
-const T = ["id", "data-cy"], j = /* @__PURE__ */ p({
+const T = ["id", "data-cy"], j = /* @__PURE__ */ v({
   inheritAttrs: !1,
   __name: "CheckboxGroup",
   props: {
@@ -20,14 +20,14 @@ const T = ["id", "data-cy"], j = /* @__PURE__ */ p({
     dataCy: { default: "" }
   },
   emits: ["resetted", "update:modelValue", "checkedGroup"],
-  setup(a, { emit: C }) {
-    const o = a, s = C, l = v(
+  setup(a, { emit: y }) {
+    const o = a, s = y, l = D(
       /* @__PURE__ */ new Map()
     ), r = h(() => {
       for (const e of o.checkboxData)
         if (e.reset) return e;
       return null;
-    }), y = h(() => o.checkboxData.length), f = h(() => {
+    }), x = h(() => o.checkboxData.length), f = h(() => {
       let e = 0;
       return l.value.forEach((t) => {
         t.checked && e++;
@@ -60,7 +60,7 @@ const T = ["id", "data-cy"], j = /* @__PURE__ */ p({
     }, d = (e) => l.value.get(o.getKey(e))?.checked ?? !1, i = (e) => {
       if (G(o.checkboxData)) return;
       const t = l.value.get(e.id);
-      t?.reset && e.checked ? k() : r.value && !t?.reset && u(o.getKey(r.value), { checked: !1 }), u(`${e.id}`), o.autoCheckResetAll && r.value && f.value === y.value - 1 && l.value.forEach((n) => {
+      t?.reset && e.checked ? k() : r.value && !t?.reset && u(o.getKey(r.value), { checked: !1 }), u(`${e.id}`), o.autoCheckResetAll && r.value && f.value === x.value - 1 && l.value.forEach((n) => {
         n.checked = !!n.reset;
       }), o.autoCheckResetEmpty && r.value && !f.value && (!o.manualToggleResetButton || !t?.reset) && u(o.getKey(r.value), { checked: !0 });
       const c = [];
@@ -68,7 +68,7 @@ const T = ["id", "data-cy"], j = /* @__PURE__ */ p({
         n.checked && c.push(n);
       }), s("update:modelValue", c), s("checkedGroup", o.groupId);
     };
-    return D(
+    return E(
       () => o.reset,
       (e) => {
         e && m();
@@ -78,9 +78,9 @@ const T = ["id", "data-cy"], j = /* @__PURE__ */ p({
       handleChange: i,
       checkboxesData: a.checkboxData
     }, () => [
-      E("div", {
+      $("div", {
         id: a.groupId,
-        class: $(["checkbox-group-container", e.$attrs.class || ""]),
+        class: g(["checkbox-group-container", e.$attrs.class || ""]),
         "data-cy": a.dataCy
       }, [
         b(e.$slots, "checkbox_elements", {
@@ -89,19 +89,19 @@ const T = ["id", "data-cy"], j = /* @__PURE__ */ p({
           checkboxesData: a.checkboxData,
           reset: m
         }, () => [
-          a.checkboxData ? (g(!0), B(I, { key: 0 }, R(a.checkboxData, (c, n) => (g(), K(N, {
+          a.checkboxData ? (C(!0), B(I, { key: 0 }, R(a.checkboxData, (c, n) => (C(), K(N, {
             id: a.getKey(c),
             key: n,
             "data-cy": c.dataCy ?? `checkbox_${V(L)(`${c.label}`)}`,
             label: c.label,
             inline: a.formCheckInline,
             "model-value": d(c),
-            "container-class": [
+            class: g([
               a.formCheckInline ? "uikit-mr-10px" : "uikit-mb-10px",
               a.checkboxContainerClasses
-            ],
-            onChange: t[0] || (t[0] = (x) => i(x))
-          }, null, 8, ["id", "data-cy", "label", "inline", "model-value", "container-class"]))), 128)) : A("", !0)
+            ]),
+            onChange: t[0] || (t[0] = (p) => i(p))
+          }, null, 8, ["id", "data-cy", "label", "inline", "model-value", "class"]))), 128)) : A("", !0)
         ])
       ], 10, T)
     ]);

package/package.json

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