@wikicasa-dev/components 1.5.18 → 1.6.0

package/dist/chunks/{BaseAutocomplete.vue_vue_type_script_setup_true_lang.BoNJQPjL.js → BaseAutocomplete.vue_vue_type_script_setup_true_lang.CFikyojk.js}

@@ -1,22 +1,22 @@
-import { defineComponent as H, mergeModels as S, useModel as P, ref as s, computed as f, onBeforeMount as z, watch as k, openBlock as g, createBlock as V, normalizeClass as E, withCtx as c, createVNode as J, renderSlot as B, createElementBlock as K, Fragment as U, renderList as A, unref as F, createElementVNode as W } from "vue";
-import j from "../BaseInput.js";
-import { _ as q } from "./BaseDropDown.vue_vue_type_script_setup_true_lang.XCCbfFor.js";
+import { defineComponent as P, mergeModels as S, useModel as z, ref as s, computed as k, onBeforeMount as A, watch as f, openBlock as y, createBlock as V, normalizeClass as E, withCtx as c, createVNode as K, renderSlot as B, createElementBlock as N, Fragment as U, renderList as F, unref as W, createElementVNode as j } from "vue";
+import q from "../BaseInput.js";
+import { _ as G } from "./BaseDropDown.vue_vue_type_script_setup_true_lang.XCCbfFor.js";
 import "./js.cookie.BQua9eWh.js";
-import { _ as G } from "./SelectItem.vue_vue_type_script_setup_true_lang.Colhxc7n.js";
+import { _ as J } from "./SelectItem.vue_vue_type_script_setup_true_lang.Colhxc7n.js";
 import { useKeyboardController as Q } from "../useKeyboardController.js";
 function R(d, v) {
-  return (...m) => new Promise((t, n) => {
+  return (...m) => new Promise((l, i) => {
     d.id && clearTimeout(d.id), d.id = setTimeout(() => {
       try {
-        const i = v(...m);
-        t(i);
-      } catch (i) {
-        n(i);
+        const r = v(...m);
+        l(r);
+      } catch (r) {
+        i(r);
       }
     }, d.delay);
   });
 }
-const X = ["innerHTML"], oe = /* @__PURE__ */ H({
+const X = ["innerHTML"], oe = /* @__PURE__ */ P({
   __name: "BaseAutocomplete",
   props: /* @__PURE__ */ S({
     border: { type: Boolean, default: !0 },
@@ -40,80 +40,80 @@ const X = ["innerHTML"], oe = /* @__PURE__ */ H({
   }),
   emits: /* @__PURE__ */ S(["update:dropdownState", "changedValue", "click", "keydown"], ["update:modelValue"]),
   setup(d, { expose: v, emit: m }) {
-    const t = d, n = P(d, "modelValue"), i = m, u = s(""), o = s([]), h = s(null), p = s(!1), l = s(!1), y = s(null), O = f(() => o.value.length);
-    z(() => {
-      u.value = n.value?.label || "", h.value = R({ delay: 300 }, t.onInputChangeCb);
+    const l = d, i = z(d, "modelValue"), r = m, u = s(""), n = s([]), h = s(null), p = s(!1), o = s(!1), g = s(null), O = k(() => n.value.length);
+    A(() => {
+      u.value = i.value?.label || "", h.value = R({ delay: 300 }, l.onInputChangeCb);
     });
     const { activeIdx: w, selectedIdx: C } = Q({
       optionsLength: O,
-      isDropdownOpen: l,
+      isDropdownOpen: o,
       disableSpaceHandler: !0
-    }), M = f(() => {
-      switch (t.theme) {
+    }), M = k(() => {
+      switch (l.theme) {
         case "bordered":
           return "";
         case "all-bordered":
-          return "uikit-rounded " + (l.value && "uikit-rounded-b-none");
+          return "!uikit-rounded " + (o.value && "!uikit-rounded-b-none");
         case "all-bordered-thick":
-          return "uikit-rounded-xl !uikit-h-[60px] " + (l.value && "uikit-rounded-b-none");
+          return "!uikit-rounded-xl !uikit-h-[60px] " + (o.value && "!uikit-rounded-b-none");
         default:
           return "";
       }
-    }), I = f(() => {
-      switch (t.theme) {
+    }), I = k(() => {
+      switch (l.theme) {
         case "bordered":
           return "";
         case "all-bordered":
-          return "uikit-border uikit-border-w-lavender uikit-border-solid uikit-rounded " + (l.value ? "uikit-border-b-0 uikit-rounded-b-none" : "");
+          return "uikit-border uikit-border-w-lavender uikit-border-solid !uikit-rounded !uikit-border-w-lavender !uikit-border " + (o.value ? "!uikit-border-b-0 !uikit-rounded-b-none" : "");
         case "all-bordered-thick":
-          return "uikit-rounded-xl !uikit-h-[60px] " + (l.value ? "uikit-rounded-b-none" : "");
+          return "!uikit-rounded-xl !uikit-h-[60px] !uikit-border-w-lavender !uikit-border-none " + (o.value ? "!uikit-rounded-b-none" : "");
         default:
           return "";
       }
-    }), D = f(() => {
+    }), D = k(() => {
       const e = "uikit-rounded-b-xl uikit-shadow uikit-rounded-t-none uikit-mb-0 !uikit-mt-0 uikit-text-w-black !uikit-rounded-b-xl !uikit-rounded-t-none";
-      switch (t.theme) {
+      switch (l.theme) {
         case "bordered":
           return "before:uikit-content-[''] before:uikit-absolute before:uikit-w-1/2 before:uikit-border-b before:uikit-border-b-w-lavender before:[border-bottom-style:solid] before:uikit-right-1/4 uikit-rounded-b-xl uikit-shadow uikit-rounded-t-none uikit-mt-5px uikit-mb-0";
         case "all-bordered":
           return e;
         case "all-bordered-thick":
-          return e;
+          return e + " !uikit-border-0";
         default:
           return "";
       }
     }), T = async (e) => {
-      if (u.value !== e && (i("changedValue", e), u.value = e, !!t.onInputChangeCb)) {
+      if (u.value !== e && (r("changedValue", e), u.value = e, !!l.onInputChangeCb)) {
         if (!e || p.value) {
-          o.value = [], p.value = !1, C.value = -1, w.value = -1, n.value && (n.value.label = ""), l.value = !1, await h.value(null);
+          n.value = [], p.value = !1, C.value = -1, w.value = -1, i.value && (i.value.label = ""), o.value = !1, await h.value(null);
           return;
         }
-        t.disableCb || (o.value = await h.value(e), console.log({ options: JSON.parse(JSON.stringify(o.value)) }), l.value = !!o.value.length);
+        l.disableCb || (n.value = await h.value(e), o.value = !!n.value.length);
       }
-    }, $ = (e, a) => {
-      t.onOptionSelectedCb && t.onOptionSelectedCb(e), t.cleanupOnClose && (o.value = []), p.value = !0, u.value = e.label, n.value = e, l.value = !1, C.value = a;
+    }, $ = (e, t) => {
+      l.onOptionSelectedCb && l.onOptionSelectedCb(e), l.cleanupOnClose && (n.value = []), p.value = !0, u.value = e.label, i.value = e, o.value = !1, C.value = t;
     }, L = () => {
-      o.value.length && t.keepState !== "closed" && (l.value = !0);
+      n.value.length && l.keepState !== "closed" && (o.value = !0);
     };
-    return k(n, (e, a) => {
-      e !== a && (u.value = e?.label || "");
-    }), k(C, (e) => {
-      if (e === -1 || !o.value.length)
+    return f(i, (e, t) => {
+      console.log("baseAutocomplete", { cur: e, prev: t }), e !== t && (u.value = e?.label || "");
+    }), f(C, (e) => {
+      if (e === -1 || !n.value.length)
         return;
-      const a = o.value[e];
-      p.value && a.label === n.value?.label || $(a, e);
-    }), k(
-      () => t.keepState,
+      const t = n.value[e];
+      p.value && t.label === i.value?.label || $(t, e);
+    }), f(
+      () => l.keepState,
       (e) => {
-        e === "closed" ? (l.value = !1, t.cleanupOnClose && (o.value = [])) : e === "open" && o.value.length && (l.value = !0);
+        e === "closed" ? (o.value = !1, l.cleanupOnClose && (n.value = [])) : e === "open" && n.value.length && (o.value = !0);
       }
-    ), k(l, (e) => {
-      i("update:dropdownState", e);
+    ), f(o, (e) => {
+      r("update:dropdownState", e);
     }), v({
       select: () => {
-        y.value?.select();
+        g.value?.select();
       }
-    }), (e, a) => (g(), V(q, {
+    }), (e, t) => (y(), V(G, {
       class: E(e.$attrs["root-classes"]),
       "data-cy": `ac_${e.$attrs.id}`,
       "dropdown-element": "ul",
@@ -125,58 +125,55 @@ const X = ["innerHTML"], oe = /* @__PURE__ */ H({
           "uikit-mt-10px !uikit-border !uikit-border-w-secondary !uikit-rounded-xs": !e.theme
         },
         D.value,
-        "!uikit-max-h-[210px] uikit-z-10",
+        "!uikit-max-h-[210px] uikit-z-30",
         e.dropdownClasses
       ],
-      "open-dropdown": l.value,
-      "keep-state": !o.value.length || t.keepState === "closed" ? "closed" : "opened",
-      "onUpdate:dropdownState": a[1] || (a[1] = (r) => l.value = r),
-      onClick: a[2] || (a[2] = (r) => {
-        i("click"), L();
+      "open-dropdown": o.value,
+      "keep-state": !n.value.length || l.keepState === "closed" ? "closed" : "opened",
+      "onUpdate:dropdownState": t[2] || (t[2] = (a) => o.value = a),
+      onClick: t[3] || (t[3] = (a) => {
+        r("click"), L();
       }),
       "close-when-clicked-outside": e.closeDropdownOnBodyPressed
     }, {
       btn_slot: c(() => [
-        J(j, {
+        K(q, {
           id: `ac_input_${e.$attrs.id}`,
           ref_key: "baseInput",
-          ref: y,
+          ref: g,
           "data-cy": `ac_input_${e.$attrs.id}`,
           "label-text": e.label,
-          "model-value": n.value?.label || "",
+          "model-value": u.value,
           "is-valid": e.isValid,
           disabled: e.$attrs.disabled,
           placeholder: e.$attrs.placeholder,
           "with-left-icon": !!e.$slots.lefticon,
           "with-right-icon": !!e.$slots.righticon,
-          border: !e.theme,
-          radius: !e.theme || e.theme === "bordered",
           "input-class": [M.value, e.$attrs["input-classes"]],
           "fieldset-classes": [I.value, e.$attrs["fieldset-classes"]],
-          "keep-floating-label": !!u.value,
-          "onUpdate:modelValue": T,
-          onKeydown: a[0] || (a[0] = (r) => i("keydown", r))
+          "onUpdate:modelValue": t[0] || (t[0] = (a) => T(a === void 0 ? "" : `${a}`)),
+          onKeydown: t[1] || (t[1] = (a) => r("keydown", a))
         }, {
           leftIcon: c(() => [
             B(e.$slots, "lefticon")
           ]),
-          righticon: c(({ handleClean: r }) => [
-            B(e.$slots, "righticon", { handleClean: r })
+          righticon: c(({ handleClean: a }) => [
+            B(e.$slots, "righticon", { handleClean: a })
           ]),
           _: 3
-        }, 8, ["id", "data-cy", "label-text", "model-value", "is-valid", "disabled", "placeholder", "with-left-icon", "with-right-icon", "border", "radius", "input-class", "fieldset-classes", "keep-floating-label"])
+        }, 8, ["id", "data-cy", "label-text", "model-value", "is-valid", "disabled", "placeholder", "with-left-icon", "with-right-icon", "input-class", "fieldset-classes"])
       ]),
       default: c(() => [
-        (g(!0), K(U, null, A(o.value, (r, b) => (g(), V(G, {
+        (y(!0), N(U, null, F(n.value, (a, b) => (y(), V(J, {
           key: b,
-          active: F(w) === b,
+          active: W(w) === b,
           class: "uikit-m-1 uikit-rounded-[5px] uikit-px-5 uikit-py-10px hover:uikit-cursor-pointer",
-          onClick: (N) => $(r, b),
-          onMouseover: (N) => w.value = b
+          onClick: (H) => $(a, b),
+          onMouseover: (H) => w.value = b
         }, {
           default: c(() => [
-            W("span", {
-              innerHTML: r.label
+            j("span", {
+              innerHTML: a.label
             }, null, 8, X)
           ]),
           _: 2

package/dist/index.js

@@ -8,9 +8,9 @@ import { default as d } from "./CheckboxBtn.js";
 import { _ as n } from "./chunks/CheckboxGroup.vue_vue_type_script_setup_true_lang.DDtN9_Bg.js";
 import { _ as i } from "./chunks/RadioButton.vue_vue_type_script_setup_true_lang.DR6a7QAi.js";
 import { _ as b } from "./chunks/RadioGroup.vue_vue_type_script_setup_true_lang.C-jm5z4e.js";
-import { _ as A } from "./chunks/AccessibleSelect.vue_vue_type_script_setup_true_lang.BE4EKjlJ.js";
-import { _ as S } from "./chunks/BaseAlert.vue_vue_type_style_index_0_lang.CunhU74n.js";
-import { _ as T } from "./chunks/BaseAutocomplete.vue_vue_type_script_setup_true_lang.BoNJQPjL.js";
+import { _ as A } from "./chunks/AccessibleSelect.vue_vue_type_script_setup_true_lang.5pqk7vlZ.js";
+import { _ as S } from "./chunks/BaseAlert.vue_vue_type_style_index_0_lang.BtqP_iYL.js";
+import { _ as T } from "./chunks/BaseAutocomplete.vue_vue_type_script_setup_true_lang.CFikyojk.js";
 import { _ as v } from "./chunks/BaseBadge.vue_vue_type_style_index_0_lang.BOA1gBKu.js";
 import { _ as h } from "./chunks/BaseButton.vue_vue_type_script_setup_true_lang.BrJbAMJ8.js";
 import { _ as F } from "./chunks/BaseCard.vue_vue_type_style_index_0_lang.w5aEohzG.js";

package/dist/useFloatingLabel.js

@@ -1,33 +1,33 @@
-import { ref as b } from "vue";
-function r(n) {
-  const e = b("inline-label");
-  function i(l) {
-    l != null && `${l}`.length > 0 && (e.value = "floating-label");
+import { ref as s } from "vue";
+function f(e) {
+  const n = s("inline-label");
+  function a(l) {
+    l != null && `${l}`.length > 0 && (n.value = "floating-label");
   }
-  const o = (l = !0) => {
-    e.value !== "floating-label" && l && (e.value = "floating-label"), n("focusin");
+  const i = (l = !0) => {
+    n.value !== "floating-label" && l && (n.value = "floating-label"), e("focusin");
   };
-  function u(l, f = !1, s = !0) {
-    if (l != null && `${l}`.trim().length > 0 || !f && !s) {
-      a(), n("focusout");
+  function u(l) {
+    if (console.log("handleFocusOut", { value: l }), l != null && `${l}`.trim().length > 0) {
+      o(), e("focusout");
       return;
     }
-    t();
+    console.log("setting inline label"), t();
   }
   const t = () => {
-    e.value = "inline-label";
-  }, a = () => {
-    e.value = "floating-label";
+    n.value = "inline-label";
+  }, o = () => {
+    n.value = "floating-label";
   };
   return {
-    labelState: e,
-    setInitialLabelState: i,
-    handleFocusIn: o,
+    labelState: n,
+    setInitialLabelState: a,
+    handleFocusIn: i,
     handleFocusOut: u,
     setInlineLabel: t,
-    setFloatingLabel: a
+    setFloatingLabel: o
   };
 }
 export {
-  r as useFloatingLabel
+  f as useFloatingLabel
 };

package/package.json

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

package/dist/chunks/BaseAlert.vue_vue_type_style_index_0_lang.CunhU74n.js

@@ -1,23 +0,0 @@
-import '../assets/BaseAlert.css';
-import { defineComponent as t, openBlock as r, createElementBlock as a, normalizeClass as s, renderSlot as l, createTextVNode as o, toDisplayString as n } from "vue";
-const i = ["id"], m = /* @__PURE__ */ t({
-  __name: "BaseAlert",
-  props: {
-    text: { default: "" },
-    alertClass: { default: "" }
-  },
-  setup(d) {
-    return (e, p) => (r(), a("div", {
-      id: e.$attrs.id,
-      class: s(["uikit-alert", e.alertClass]),
-      role: "alert"
-    }, [
-      l(e.$slots, "default", {}, () => [
-        o(n(e.text), 1)
-      ])
-    ], 10, i));
-  }
-});
-export {
-  m as _
-};