@wikicasa-dev/components 2.1.4-alpha.11 → 2.1.4-alpha.14

package/dist/lib/UIKit/BaseAutocomplete.vue.js

@@ -0,0 +1,155 @@
+import { defineComponent as P, mergeModels as y, useModel as A, ref as c, computed as g, onBeforeMount as L, watch as m, createBlock as C, openBlock as v, normalizeClass as z, withCtx as p, createElementBlock as G, Fragment as H, renderList as K, unref as $, createCommentVNode as N, createElementVNode as B, resolveDynamicComponent as F, createVNode as T, createSlots as j, withDirectives as W, vShow as X, renderSlot as q } from "vue";
+import J from "./BaseInput.vue.js";
+import '../../assets/lib/UIKit/BaseInput.css';/* empty css               */
+import Q from "./BaseDropDown.vue.js";
+import { debounce as R } from "../../node_modules/@wikicasa-dev/utilities/dist/utils/FunctionUtils.js";
+import Y from "./BaseSelect/SelectItem.vue.js";
+import { useKeyboardController as Z } from "../../node_modules/@wikicasa-dev/vue-composables/dist/useKeyboardController.js";
+const x = ["onClick"], _ = ["innerHTML"], ue = /* @__PURE__ */ P({
+  __name: "BaseAutocomplete",
+  props: /* @__PURE__ */ y({
+    isValid: { default: null },
+    disableCb: { type: Boolean, default: !1 },
+    onInputChangeCb: { type: Function },
+    onOptionSelectedCb: { default: null },
+    keepState: { default: null },
+    cleanupOnClose: { type: Boolean, default: !0 },
+    dropdownClasses: { default: "" },
+    closeDropdownOnBodyPressed: { type: Boolean, default: !0 },
+    inputClasses: {},
+    fieldsetClasses: {},
+    placeholder: { default: "" },
+    dataCy: { default: "" }
+  }, {
+    modelValue: {
+      default() {
+        return { id: "", label: "" };
+      }
+    },
+    modelModifiers: {}
+  }),
+  emits: /* @__PURE__ */ y(["update:dropdownState", "changedValue", "click", "keydown", "keydownEnterPressed"], ["update:modelValue"]),
+  setup(o, { expose: D, emit: S }) {
+    const u = A(o, "modelValue"), s = S, i = c(""), a = c([]), d = c(null), n = c(!1), b = c(null), V = g(() => a.value.length);
+    L(() => {
+      d.value = R({ delay: 300 }, o.onInputChangeCb);
+    });
+    const { activeIdx: k, selectedIdx: r } = Z({
+      optionsLength: V,
+      isDropdownOpen: n,
+      disableSpaceHandler: !0
+    }), h = g(() => r.value !== -1), I = async (e) => {
+      if (i.value !== e && (s("changedValue", e), i.value = e, !!o.onInputChangeCb)) {
+        if (!e || h.value) {
+          a.value = [], r.value = -1, k.value = -1, u.value && (u.value.label = ""), n.value = !1, await d.value?.("");
+          return;
+        }
+        o.disableCb || !d.value || (a.value = await d.value(e), console.log("DEBUG:options", {
+          disableCb: o.disableCb,
+          cb: d.value,
+          length: a.value.length,
+          open: !!a.value.length
+        }), n.value = !!a.value.length);
+      }
+    }, w = (e, t) => {
+      o.onOptionSelectedCb && o.onOptionSelectedCb(e), o.cleanupOnClose && (a.value = []), i.value = e.label, u.value = e, n.value = !1, r.value = t;
+    }, O = () => {
+      a.value.length && o.keepState !== "closed" && (n.value = !0);
+    };
+    m(
+      u,
+      (e, t) => {
+        e === t || e?.label === i.value || (i.value = e?.label || "");
+      },
+      { immediate: !0 }
+    ), m(r, (e) => {
+      if (e === -1 || !a.value.length) return;
+      const t = a.value[e];
+      h.value && t.label === u.value?.label || w(t, e);
+    }), m(
+      n,
+      (e) => {
+        console.log("DEBUG:BaseAutocomplete => openDropdown watcher", e), s("update:dropdownState", e);
+      },
+      { immediate: !0 }
+    );
+    const E = () => {
+      b.value?.select();
+    }, M = () => {
+      s("click"), O(), console.log("DEBUG:BaseAutocomplete => handleDropDownClick", {
+        "options.value.length": a.value.length
+      }), a.value.length && (n.value = !0);
+    };
+    return D({
+      select: E
+    }), (e, t) => (v(), C(Q, {
+      open: n.value,
+      "onUpdate:open": t[3] || (t[3] = (l) => n.value = l),
+      class: z(e.$attrs["root-classes"]),
+      "data-cy": e.dataCy ? e.dataCy : `ac_${e.$attrs.id}`,
+      "dropdown-element": "ul",
+      "dropdown-classes": ["!uikit-max-h-[210px] uikit-z-30", e.dropdownClasses],
+      "close-when-clicked-outside": e.closeDropdownOnBodyPressed,
+      "activate-keyboard-controller": !1,
+      "onUpdate:dropdownState": t[4] || (t[4] = (l) => n.value = l),
+      onClick: M
+    }, {
+      btn_slot: p(() => [
+        T(J, {
+          id: e.$attrs.id ? `ac_input_${e.$attrs.id}` : "",
+          ref_key: "baseInput",
+          ref: b,
+          "data-cy": e.dataCy ? `ac_input_${e.dataCy}` : `ac_input_${e.$attrs.id}`,
+          "model-value": i.value,
+          "is-valid": e.isValid,
+          disabled: e.$attrs.disabled,
+          placeholder: e.placeholder,
+          "input-class": [e.inputClasses, "!uikit-text"],
+          "fieldset-classes": [e.fieldsetClasses],
+          "onUpdate:modelValue": t[0] || (t[0] = (l) => I(l === void 0 ? "" : `${l}`)),
+          onKeydown: t[1] || (t[1] = (l) => s("keydown", l)),
+          onKeydownEnterPressed: t[2] || (t[2] = () => s("keydownEnterPressed"))
+        }, j({
+          rightIcon: p(({ handleClean: l }) => [
+            W(B("span", {
+              class: "text-input-icon right uikit-flex uikit-size-md uikit-cursor-pointer uikit-items-center uikit-justify-center uikit-rounded-full uikit-bg-w-lightgray uikit-text uikit-font-semibold uikit-text-white",
+              onClick: l
+            }, "X", 8, x), [
+              [X, $(r) !== -1]
+            ])
+          ]),
+          _: 2
+        }, [
+          e.$slots.leftIcon ? {
+            name: "leftIcon",
+            fn: p(() => [
+              q(e.$slots, "leftIcon")
+            ]),
+            key: "0"
+          } : void 0
+        ]), 1032, ["id", "data-cy", "model-value", "is-valid", "disabled", "placeholder", "input-class", "fieldset-classes"])
+      ]),
+      default: p(() => [
+        (v(!0), G(H, null, K(a.value, (l, f) => (v(), C(Y, {
+          key: f,
+          active: $(k) === f,
+          class: "uikit-relative uikit-flex uikit-gap-x-xs uikit-rounded-[5px] uikit-p-md uikit-py-xs uikit-text after:uikit-absolute after:uikit-bottom-0 after:uikit-left-1/2 after:uikit-h-[1px] after:uikit-w-[95%] after:-uikit-translate-x-1/2 after:uikit-bg-w-lightgray after:uikit-content-[''] after:last:uikit-hidden hover:uikit-cursor-pointer",
+          onClick: (U) => w(l, f),
+          onMouseover: (U) => k.value = f
+        }, {
+          default: p(() => [
+            l.icon ? (v(), C(F(l.icon), { key: 0 })) : N("", !0),
+            B("span", {
+              innerHTML: l.label
+            }, null, 8, _)
+          ]),
+          _: 2
+        }, 1032, ["active", "onClick", "onMouseover"]))), 128))
+      ]),
+      _: 3
+    }, 8, ["open", "class", "data-cy", "dropdown-classes", "close-when-clicked-outside"]));
+  }
+});
+export {
+  ue as default
+};

package/dist/{packages/components/lib → lib}/UIKit/BaseBanner.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent as d, createElementBlock as k, openBlock as e, normalizeClass as m, createElementVNode as a, renderSlot as o, createVNode as t, createBlock as s, resolveDynamicComponent as r, withCtx as l, createTextVNode as u, toDisplayString as n } from "vue";
+import { defineComponent as d, createElementBlock as k, openBlock as e, normalizeClass as m, createElementVNode as s, renderSlot as o, createVNode as t, createBlock as n, resolveDynamicComponent as r, withCtx as l, createTextVNode as u, toDisplayString as a } from "vue";
 import c from "./BaseBanner/Background/BaseBannerBgElement1.vue.js";
 import b from "./BaseBanner/Background/BaseBannerBgElement2.vue.js";
 import h from "./BaseBanner/Background/BaseBannerBgElement3.vue.js";
@@ -10,7 +10,7 @@ const f = ["aria-label"], g = { class: "uikit-relative uikit-z-[2]" }, v = { cla
     headerTag: {},
     title: {},
     description: {},
-    ctaComponent: { type: [Object, Function] },
+    ctaComponent: {},
     ctaLabel: {},
     bannerClass: {}
   },
@@ -22,23 +22,23 @@ const f = ["aria-label"], g = { class: "uikit-relative uikit-z-[2]" }, v = { cla
         i.bannerClass === "secondary" ? "uikit-bg-w-blue" : "uikit-bg-w-pink"
       ])
     }, [
-      a("div", g, [
+      s("div", g, [
         o(i.$slots, "title", {}, () => [
-          (e(), s(r(i.headerTag || "h2"), { class: "uikit-m-0 uikit-text-20 max-sm:uikit-mb-xs" }, {
+          (e(), n(r(i.headerTag || "h2"), { class: "uikit-m-0 uikit-text-20 max-sm:uikit-mb-xs" }, {
             default: l(() => [
-              u(n(i.title), 1)
+              u(a(i.title), 1)
             ]),
             _: 1
           }))
         ]),
         o(i.$slots, "description", {}, () => [
-          a("p", v, n(i.description), 1)
+          s("p", v, a(i.description), 1)
         ])
       ]),
       o(i.$slots, "cta", {}, () => [
-        (e(), s(r(i.ctaComponent || "button"), { class: "uikit-btn uikit-btn-ternary uikit-relative uikit-z-[2]" }, {
+        (e(), n(r(i.ctaComponent || "button"), { class: "uikit-btn uikit-btn-ternary uikit-relative uikit-z-[2]" }, {
           default: l(() => [
-            u(n(i.ctaLabel), 1)
+            u(a(i.ctaLabel), 1)
           ]),
           _: 1
         }))

package/dist/{packages/components/lib → lib}/UIKit/BaseButton.vue.js

@@ -1,5 +1,5 @@
 import { defineComponent as f, ref as v, computed as s, createElementBlock as c, openBlock as g, withModifiers as l, normalizeStyle as B, normalizeClass as h, renderSlot as r, createVNode as C } from "vue";
-import w from "../../../../UIKit/StaticSpinner.js";
+import w from "../../UIKit/StaticSpinner.js";
 const M = ["id", "data-cy", "type", "data-active", "disabled", "aria-label", "title"], S = /* @__PURE__ */ f({
   __name: "BaseButton",
   props: {

package/dist/{packages/components/lib → lib}/UIKit/BaseChip.vue.js

@@ -1,7 +1,7 @@
 import { defineComponent as a, useModel as d, createBlock as s, openBlock as i, unref as o, withCtx as k, renderSlot as m, createElementBlock as n, createCommentVNode as f, createVNode as c } from "vue";
 import { Toggle as p } from "reka-ui";
-import { CloseIcon as x } from "../../../../node_modules/.pnpm/@wikicasa-dev_svg-icons@1.2.12_typescript@5.8.3/node_modules/@wikicasa-dev/svg-icons/dist/CloseIcon.js";
-import "../../../../node_modules/.pnpm/@wikicasa-dev_svg-icons@1.2.12_typescript@5.8.3/node_modules/@wikicasa-dev/svg-icons/dist/PharmacyIcon.js";
+import { CloseIcon as x } from "../../node_modules/@wikicasa-dev/svg-icons/dist/CloseIcon.js";
+import "../../node_modules/@wikicasa-dev/svg-icons/dist/PharmacyIcon.js";
 const b = {
   key: 0,
   class: "uikit-box-border uikit-flex uikit-size-sm uikit-items-center uikit-justify-center uikit-rounded-full uikit-bg-w-blue uikit-text-10 uikit-text-white"

package/dist/{packages/components/lib → lib}/UIKit/BaseCollapse.vue.js

@@ -1,6 +1,6 @@
 import { defineComponent as s, mergeModels as p, useModel as d, createBlock as f, openBlock as m, unref as t, withCtx as i, createVNode as n, renderSlot as l, normalizeClass as k } from "vue";
-import { ArrowFilledIcon as c } from "../../../../node_modules/.pnpm/@wikicasa-dev_svg-icons@1.2.12_typescript@5.8.3/node_modules/@wikicasa-dev/svg-icons/dist/ArrowFilledIcon.js";
-import "../../../../node_modules/.pnpm/@wikicasa-dev_svg-icons@1.2.12_typescript@5.8.3/node_modules/@wikicasa-dev/svg-icons/dist/PharmacyIcon.js";
+import { ArrowFilledIcon as c } from "../../node_modules/@wikicasa-dev/svg-icons/dist/ArrowFilledIcon.js";
+import "../../node_modules/@wikicasa-dev/svg-icons/dist/PharmacyIcon.js";
 import { CollapsibleRoot as b, CollapsibleTrigger as g, CollapsibleContent as C } from "reka-ui";
 const M = /* @__PURE__ */ s({
   __name: "BaseCollapse",

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

@@ -0,0 +1,128 @@
+import { defineComponent as A, mergeModels as b, useId as L, useModel as M, ref as h, computed as O, useTemplateRef as H, onBeforeMount as W, onMounted as $, onUnmounted as V, watch as y, createElementBlock as U, openBlock as u, withModifiers as C, normalizeClass as l, renderSlot as g, createBlock as B, createVNode as G, unref as i, withCtx as D, createElementVNode as K, createCommentVNode as N, resolveDynamicComponent as T } from "vue";
+import q from "./BaseButton.vue.js";
+import { ArrowIcon as x } from "../../node_modules/@wikicasa-dev/svg-icons/dist/ArrowIcon.js";
+import "../../node_modules/@wikicasa-dev/svg-icons/dist/PharmacyIcon.js";
+import { useKeyboardController as z } from "../../node_modules/@wikicasa-dev/vue-composables/dist/useKeyboardController.js";
+const R = ["innerHTML"], Y = /* @__PURE__ */ A({
+  inheritAttrs: !1,
+  __name: "BaseDropDown",
+  props: /* @__PURE__ */ b({
+    dropdownClasses: { default: "" },
+    btnClasses: { default: "" },
+    withArrowIcon: { type: Boolean, default: !1 },
+    btnLabel: { default: "" },
+    labelClasses: { default: "" },
+    direction: { default: "down" },
+    arrowWidth: { default: 12 },
+    arrowStrokeColor: { default: void 0 },
+    isAbsolute: { type: Boolean, default: !0 },
+    closeWhenClickedOutside: { type: Boolean, default: !0 },
+    dropdownElement: { default: "div" },
+    keepState: { default: "" },
+    activateKeyboardController: { type: Boolean, default: !0 },
+    disableSpaceHandler: { type: Boolean, default: !1 },
+    dataCy: { default: "" }
+  }, {
+    open: {},
+    openModifiers: {}
+  }),
+  emits: /* @__PURE__ */ b(["click", "update:dropdownState", "update:selectedIdx"], ["update:open"]),
+  setup(c, { emit: I }) {
+    const a = c, p = L(), f = I, o = M(c, "open"), t = h(!1), d = h([]), E = O(() => d.value.length), k = H("dropdown"), { activeIdx: m, selectedIdx: s } = z({
+      optionsLength: E,
+      isDropdownOpen: t,
+      activate: a.activateKeyboardController,
+      disableSpaceHandler: a.disableSpaceHandler
+    }), v = () => {
+      t.value = !1, o.value !== void 0 && (console.log("DEBUG:BaseDropdown closing", { openValue: o.value }), o.value = !1);
+    }, r = () => {
+      o.value === void 0 && (console.log("DEBUG:BaseDropdown toggling", { openValue: o.value }), t.value = !t.value);
+    }, w = (e) => {
+      e != null && (m.value = e);
+    }, S = (e) => {
+      e != null && (s.value = e);
+    };
+    return W(() => {
+      a.closeWhenClickedOutside && document.body.addEventListener("click", v);
+    }), $(() => {
+      k.value && (d.value = k.value.children || []);
+    }), V(() => {
+      a.closeWhenClickedOutside && document.body.removeEventListener("click", v);
+    }), y(s, (e) => {
+      e !== -1 && (d.value[e].querySelector("a")?.click(), f("update:selectedIdx", e));
+    }), y(
+      o,
+      (e) => {
+        console.log("DEBUG:BaseDropdown", e), e !== void 0 && (t.value = e);
+      },
+      { immediate: !0 }
+    ), (e, n) => (u(), U("div", {
+      class: l(["uikit-relative uikit-block", e.$attrs.class]),
+      onClick: n[1] || (n[1] = C((j) => {
+        f("click"), r();
+      }, ["stop"]))
+    }, [
+      g(e.$slots, "btn_slot", {
+        toggleDropdown: r,
+        isOpen: t.value,
+        setActiveIdx: w
+      }, () => [
+        G(q, {
+          id: i(p),
+          type: "button",
+          "data-cy": e.dataCy,
+          class: l([
+            "!uikit-flex uikit-w-full uikit-items-center uikit-truncate",
+            e.btnClasses
+          ]),
+          "aria-expanded": t.value,
+          "btn-class": "single-selection"
+        }, {
+          default: D(() => [
+            K("span", {
+              class: l(["uikit-mr-5px", e.labelClasses]),
+              innerHTML: e.btnLabel
+            }, null, 10, R),
+            e.withArrowIcon ? (u(), B(i(x), {
+              key: 0,
+              class: l(["uikit-shrink-0 uikit-transition-transform motion-reduce:uikit-transition-none", t.value ? "uikit-rotate-180" : ""]),
+              width: e.arrowWidth,
+              height: e.arrowWidth,
+              "stroke-color": e.arrowStrokeColor
+            }, null, 8, ["class", "width", "height", "stroke-color"])) : N("", !0)
+          ]),
+          _: 1
+        }, 8, ["id", "data-cy", "class", "aria-expanded"])
+      ]),
+      (u(), B(T(e.dropdownElement), {
+        id: "dropdown_" + i(p),
+        ref: "dropdown",
+        "data-cy": e.dataCy && `${e.dataCy}_dropdown`,
+        class: l(["uikit-border-w-lightgray uikit-m-0 uikit-mt-xs uikit-rounded-2xs uikit-max-h-[112px] 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-no-scrollbar", [
+          e.dropdownClasses,
+          t.value ? "uikit-flex" : "uikit-hidden",
+          { "uikit-bottom-[55px]": e.direction === "up" },
+          { "uikit-absolute": e.isAbsolute }
+        ]]),
+        "aria-hidden": !t.value,
+        onClick: n[0] || (n[0] = C(() => {
+        }, ["stop"]))
+      }, {
+        default: D(() => [
+          g(e.$slots, "default", {
+            isOpen: t.value,
+            toggleDropdown: r,
+            activeIdx: i(m),
+            selectedIdx: i(s),
+            setActiveIdx: w,
+            setSelectedIdx: S
+          })
+        ]),
+        _: 3
+      }, 8, ["id", "data-cy", "class", "aria-hidden"]))
+    ], 2));
+  }
+});
+export {
+  Y as default
+};

package/dist/{packages/components/lib → lib}/UIKit/BaseInput.vue.js

@@ -1,8 +1,8 @@
-import { defineComponent as A, mergeModels as L, useModel as N, ref as v, useAttrs as O, useId as j, computed as D, watch as p, createElementBlock as o, openBlock as s, normalizeClass as T, unref as k, renderSlot as m, createElementVNode as G, createBlock as J, createCommentVNode as h, withKeys as Q, withModifiers as g, Fragment as B, renderList as E } from "vue";
-import W from "./BaseFloatingLabel.vue.js";
-import '../../../../assets/packages/components/lib/UIKit/BaseFloatingLabel.css';/* empty css                       */
-import { useFloatingLabel as X } from "../../../../composables/useFloatingLabel.js";
-const Y = ["id", "data-cy", "name", "data-validation", "autocomplete", "disabled", "aria-labelledby", "readonly", "type", "pattern", "min", "max", "maxlength", "inputmode", "placeholder", "value"], Z = ["innerHTML"], x = ["innerHTML"], U = {
+import { defineComponent as A, mergeModels as L, useModel as N, ref as k, useAttrs as O, useId as j, computed as R, watch as p, createElementBlock as o, openBlock as s, normalizeClass as T, unref as m, renderSlot as v, createElementVNode as D, createBlock as G, createCommentVNode as g, withKeys as J, withModifiers as w, Fragment as B, renderList as E } from "vue";
+import Q from "./BaseFloatingLabel.vue.js";
+import '../../assets/lib/UIKit/BaseFloatingLabel.css';/* empty css                       */
+import { useFloatingLabel as W } from "../../composables/useFloatingLabel.js";
+const X = ["id", "data-cy", "name", "data-validation", "autocomplete", "disabled", "aria-labelledby", "readonly", "type", "pattern", "min", "max", "maxlength", "inputmode", "placeholder", "value"], Y = ["innerHTML"], Z = ["innerHTML"], U = {
   key: 1,
   class: "under-label uikit-absolute uikit-text-12"
 }, _ = "peer-data-[validation='invalid']:uikit-text-w-red peer-data-[validation='valid']:uikit-text-w-blue", ne = /* @__PURE__ */ A({
@@ -17,10 +17,8 @@ const Y = ["id", "data-cy", "name", "data-validation", "autocomplete", "disabled
     formatter: { default: null },
     labelClasses: {},
     labelTextClasses: {},
-    withLeftIcon: { type: Boolean, default: () => {
-    } },
-    withRightIcon: { type: Boolean, default: () => {
-    } },
+    withLeftIcon: { type: Boolean },
+    withRightIcon: { type: Boolean },
     dataCy: {}
   }, {
     modelValue: { default: "" },
@@ -28,33 +26,33 @@ const Y = ["id", "data-cy", "name", "data-validation", "autocomplete", "disabled
   }),
   emits: /* @__PURE__ */ L(["click", "keydownEnterPressed", "focusin", "focusout", "keydown", "keyup"], ["update:modelValue"]),
   setup(l, { expose: M, emit: H }) {
-    const u = N(l, "modelValue"), i = v(""), d = H, {
+    const u = N(l, "modelValue"), i = k(""), d = H, {
       labelState: c,
       handleFocusIn: P,
-      handleFocusOut: w,
-      setInlineLabel: $,
+      handleFocusOut: $,
+      setInlineLabel: h,
       setFloatingLabel: V
-    } = X(), I = O(), q = j(), r = D(() => I.id || q), n = v("text"), f = v({}), b = v(null), K = () => {
+    } = W(), F = O(), q = j(), r = R(() => F.id || q), n = k("text"), f = k({}), b = k(null), K = () => {
       l.feedback && (f.value = l.feedback, l.feedback.valid && typeof l.feedback.valid == "string" && (f.value.valid = [l.feedback.valid]), l.feedback.invalid && typeof l.feedback.invalid == "string" && (f.value.invalid = [l.feedback.invalid]));
-    }, F = (e, a) => {
+    }, C = (e, a) => {
       if (!l.formatter || !l.formatter.formatFn)
         return i.value = e, "";
       const t = e.length ? l.formatter.formatFn(e) : e;
       return a && (a.value = t), i.value = t, t;
-    }, C = (e, a = !0) => {
+    }, I = (e, a = !0) => {
       if (a && (!l.formatter || !l.formatter.unFormatFn))
         return u.value = e, e;
       if (!a || !l.formatter || !l.formatter.unFormatFn) return;
       const t = l.formatter.unFormatFn(e);
       return u.value = t ?? "", t;
-    }, R = ({ target: e }) => {
-      const a = e, t = C(a.value);
-      F(
+    }, S = ({ target: e }) => {
+      const a = e, t = I(a.value);
+      C(
         `${t}`,
         t === u.value ? a : void 0
       );
-    }, S = () => {
-      u.value = "", $();
+    }, x = () => {
+      u.value = "", h();
     }, z = () => {
       n.value === "password" ? n.value = "text" : n.value === "text" && (n.value = "password");
     };
@@ -69,10 +67,10 @@ const Y = ["id", "data-cy", "name", "data-validation", "autocomplete", "disabled
     ), p(
       u,
       (e) => {
-        F(
+        C(
           `${e}`,
-          C(`${e}`, !1) === e ? b.value : void 0
-        ), i.value != null && i.value.length > 0 && c.value !== "floating-label" ? V() : !i.value && document && document.activeElement !== b.value && $();
+          I(`${e}`, !1) === e ? b.value : void 0
+        ), i.value != null && i.value.length > 0 && c.value !== "floating-label" ? V() : !i.value && document && document.activeElement !== b.value && h();
       },
       {
         immediate: !0
@@ -80,9 +78,9 @@ const Y = ["id", "data-cy", "name", "data-validation", "autocomplete", "disabled
     ), p(
       () => l.keepFloatingLabel,
       (e) => {
-        e ? V() : w(u.value);
+        e ? V() : $(u.value);
       }
-    ), n.value = I.type || "text", M({
+    ), n.value = F.type || "text", M({
       select: () => {
         b.value?.select();
       }
@@ -90,32 +88,33 @@ const Y = ["id", "data-cy", "name", "data-validation", "autocomplete", "disabled
       class: T(["uikit-input-wrapper [&.has-right-icon.is-invalid_.text-input-icon]:uikit-mr-25px [&.has-right-icon.is-valid_.text-input-icon]:uikit-mr-25px uikit-relative uikit-inline-block uikit-w-full", [
         e.$attrs.class,
         { "floating-label": e.labelText },
-        k(c) === "floating-label" ? "floating-state" : "inline-state",
+        m(c) === "floating-label" ? "floating-state" : "inline-state",
         {
-          "has-right-icon": e.withRightIcon !== void 0 ? e.withRightIcon : !!e.$slots.righticon
+          "has-right-icon": !!e.$slots.rightIcon
         },
         {
-          "has-left-icon": e.withLeftIcon !== void 0 ? e.withLeftIcon : !!e.$slots.leftIcon
+          "has-left-icon": !!e.$slots.leftIcon
         },
         { "is-invalid": e.isValid === !1, "is-valid": e.isValid }
       ]])
     }, [
-      m(e.$slots, "leftIcon"),
-      m(e.$slots, "righticon", {
-        handleClean: S,
+      v(e.$slots, "leftIcon"),
+      v(e.$slots, "rightIcon", {
+        handleClean: x,
         handleShowPasswd: z,
         curType: n.value
       }),
-      G("input", {
+      D("input", {
         id: r.value,
         ref_key: "baseInputEl",
         ref: b,
         "data-cy": e.dataCy,
         name: e.$attrs.name,
-        class: T(["input-element disabled:uikit-text-w-secondary uikit-peer uikit-relative uikit-box-border uikit-block uikit-h-[56px] uikit-w-full uikit-appearance-none uikit-truncate uikit-rounded-2xs uikit-border uikit-border-solid uikit-border-w-lightgray uikit-bg-white uikit-px-sm uikit-pb-0 uikit-pt-md uikit-text-16 uikit-outline-none focus-visible:uikit-border-w-blue disabled:uikit-bg-w-cultured data-[validation='invalid']:uikit-border-w-red data-[validation='valid']:uikit-border-w-blue", [
+        class: T(["input-element disabled:uikit-text-w-secondary uikit-peer uikit-relative uikit-box-border uikit-block uikit-w-full uikit-appearance-none uikit-truncate uikit-rounded-2xs uikit-border uikit-border-solid uikit-border-w-lightgray uikit-bg-white uikit-px-sm uikit-pb-0 uikit-text-16 uikit-outline-none focus-visible:uikit-border-w-blue disabled:uikit-bg-w-cultured data-[validation='invalid']:uikit-border-w-red data-[validation='valid']:uikit-border-w-blue", [
           {
             "is-invalid": e.isValid === !1,
-            "is-valid": e.isValid
+            "is-valid": e.isValid,
+            "uikit-pt-md": e.labelText
           },
           e.inputClass
         ]]),
@@ -133,50 +132,50 @@ const Y = ["id", "data-cy", "name", "data-validation", "autocomplete", "disabled
         placeholder: e.$attrs.placeholder,
         value: i.value,
         onClick: a[0] || (a[0] = (t) => d("click", t)),
-        onFocusin: a[1] || (a[1] = g(
+        onFocusin: a[1] || (a[1] = w(
           (t) => {
-            d("focusin", t), e.labelText && k(P)();
+            d("focusin", t), e.labelText && m(P)();
           },
           ["stop"]
         )),
-        onFocusout: a[2] || (a[2] = g(
+        onFocusout: a[2] || (a[2] = w(
           (t) => {
-            d("focusout", t), e.labelText && !e.keepFloatingLabel && k(w)(i.value);
+            d("focusout", t), e.labelText && !e.keepFloatingLabel && m($)(i.value);
           },
           ["stop"]
         )),
-        onInput: g(R, ["stop"]),
+        onInput: w(S, ["stop"]),
         onKeydown: [
-          a[3] || (a[3] = Q(() => d("keydownEnterPressed"), ["enter"])),
+          a[3] || (a[3] = J(() => d("keydownEnterPressed"), ["enter"])),
           a[4] || (a[4] = (t) => d("keydown", t))
         ],
         onKeyup: a[5] || (a[5] = (t) => d("keyup", t))
-      }, null, 42, Y),
-      e.labelText ? (s(), J(W, {
+      }, null, 42, X),
+      e.labelText ? (s(), G(Q, {
         key: 0,
         for: r.value,
         "label-text": e.labelText,
-        "label-state": k(c),
+        "label-state": m(c),
         "is-valid": e.isValid,
         required: e.$attrs.required,
         disabled: e.$attrs.disabled,
         "label-classes": [e.labelClasses, _],
         "label-text-classes": e.labelTextClasses
-      }, null, 8, ["for", "label-text", "label-state", "is-valid", "required", "disabled", "label-classes", "label-text-classes"])) : h("", !0),
-      m(e.$slots, "feedback", {}, () => [
+      }, null, 8, ["for", "label-text", "label-state", "is-valid", "required", "disabled", "label-classes", "label-text-classes"])) : g("", !0),
+      v(e.$slots, "feedback", {}, () => [
         e.isValid === !1 ? (s(!0), o(B, { key: 0 }, E(f.value.invalid, (t, y) => (s(), o("div", {
           key: `${r.value}_invalid_${y}`,
           class: "uikit-mt-1 uikit-text-12 uikit-text-w-red",
           innerHTML: t
-        }, null, 8, Z))), 128)) : e.isValid === !0 ? (s(!0), o(B, { key: 1 }, E(f.value.valid, (t, y) => (s(), o("div", {
+        }, null, 8, Y))), 128)) : e.isValid === !0 ? (s(!0), o(B, { key: 1 }, E(f.value.valid, (t, y) => (s(), o("div", {
           key: `${r.value}_valid_${y}`,
           class: "uikit-mt-1 uikit-text-12 uikit-text-w-blue",
           innerHTML: t
-        }, null, 8, x))), 128)) : h("", !0)
+        }, null, 8, Z))), 128)) : g("", !0)
       ]),
       e.$slots["under-label"] ? (s(), o("div", U, [
-        m(e.$slots, "under-label")
-      ])) : h("", !0)
+        v(e.$slots, "under-label")
+      ])) : g("", !0)
     ], 2));
   }
 });

package/dist/{packages/components/lib → lib}/UIKit/BaseModal.vue.js

@@ -1,6 +1,6 @@
 import { defineComponent as z, ref as d, useTemplateRef as D, useId as K, computed as N, onUnmounted as S, watch as V, createBlock as W, openBlock as f, Teleport as A, createElementVNode as l, normalizeClass as o, withModifiers as g, createElementBlock as w, createCommentVNode as h, renderSlot as r, createVNode as F, unref as P, nextTick as U } from "vue";
-import { CloseIcon as R } from "../../../../node_modules/.pnpm/@wikicasa-dev_svg-icons@1.2.12_typescript@5.8.3/node_modules/@wikicasa-dev/svg-icons/dist/CloseIcon.js";
-import "../../../../node_modules/.pnpm/@wikicasa-dev_svg-icons@1.2.12_typescript@5.8.3/node_modules/@wikicasa-dev/svg-icons/dist/PharmacyIcon.js";
+import { CloseIcon as R } from "../../node_modules/@wikicasa-dev/svg-icons/dist/CloseIcon.js";
+import "../../node_modules/@wikicasa-dev/svg-icons/dist/PharmacyIcon.js";
 const j = ["id", "data-cy"], q = ["innerHTML"], X = /* @__PURE__ */ z({
   __name: "BaseModal",
   props: {