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

package/dist/UIKit/BaseAutocomplete.d.ts

@@ -26,6 +26,8 @@ declare const _default: <T, LabelID extends string | number | undefined, TCompon
         fieldsetClasses?: ClassTypeProp;
         placeholder?: string;
         dataCy?: string;
+        withBorder?: boolean;
+        withCleanBtn?: boolean;
     }) & Partial<{}>> & import('vue').PublicProps;
     expose(exposed: import('vue').ShallowUnwrapRef<{
         select: () => void;
@@ -33,6 +35,10 @@ declare const _default: <T, LabelID extends string | number | undefined, TCompon
     attrs: any;
     slots: {
         leftIcon?(_: {}): any;
+        dropdown?(_: {
+            options: import('@vue/reactivity').UnwrapRefSimple<AccessibleSelectOptions<T, LabelID, TComponent>>[];
+            toggleDropdown: () => void;
+        }): any;
     };
     emit: (((evt: "click") => void) & ((evt: "update:dropdownState", args_0: boolean) => void) & ((evt: "keydown", args_0: KeyboardEvent) => void) & ((evt: "keydownEnterPressed") => void) & ((evt: "changedValue", args_0: string) => void)) & ((evt: "update:modelValue", value: Optional<AccessibleSelectOptions<T, LabelID, TComponent>>) => void);
 }>) => import('vue').VNode & {

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

@@ -1,13 +1,13 @@
-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 { defineComponent as H, mergeModels as g, useModel as K, ref as r, computed as $, onBeforeMount as N, watch as C, createBlock as w, openBlock as v, normalizeClass as U, withCtx as f, renderSlot as B, createElementBlock as A, Fragment as F, renderList as T, unref as S, createCommentVNode as j, createElementVNode as V, resolveDynamicComponent as W, createVNode as X, createSlots as q, withDirectives as G, vShow as J } from "vue";
+import Q 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({
+import R from "./BaseDropDown.vue.js";
+import { debounce as Y } from "../../node_modules/@wikicasa-dev/utilities/dist/utils/FunctionUtils.js";
+import Z from "./BaseSelect/SelectItem.vue.js";
+import { useKeyboardController as x } from "../../node_modules/@wikicasa-dev/vue-composables/dist/useKeyboardController.js";
+const _ = ["onClick"], ee = ["innerHTML"], se = /* @__PURE__ */ H({
   __name: "BaseAutocomplete",
-  props: /* @__PURE__ */ y({
+  props: /* @__PURE__ */ g({
     isValid: { default: null },
     disableCb: { type: Boolean, default: !1 },
     onInputChangeCb: { type: Function },
@@ -19,7 +19,9 @@ const x = ["onClick"], _ = ["innerHTML"], ue = /* @__PURE__ */ P({
     inputClasses: {},
     fieldsetClasses: {},
     placeholder: { default: "" },
-    dataCy: { default: "" }
+    dataCy: { default: "" },
+    withBorder: { type: Boolean, default: !0 },
+    withCleanBtn: { type: Boolean, default: !0 }
   }, {
     modelValue: {
       default() {
@@ -28,74 +30,67 @@ const x = ["onClick"], _ = ["innerHTML"], ue = /* @__PURE__ */ P({
     },
     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);
+  emits: /* @__PURE__ */ g(["update:dropdownState", "changedValue", "click", "keydown", "keydownEnterPressed"], ["update:modelValue"]),
+  setup(o, { expose: D, emit: I }) {
+    const u = K(o, "modelValue"), s = I, i = r(""), a = r([]), c = r(null), n = r(!1), b = r(null), O = $(() => a.value.length);
+    N(() => {
+      c.value = Y({ delay: 300 }, o.onInputChangeCb);
     });
-    const { activeIdx: k, selectedIdx: r } = Z({
-      optionsLength: V,
+    const { activeIdx: m, selectedIdx: d } = x({
+      optionsLength: O,
       isDropdownOpen: n,
       disableSpaceHandler: !0
-    }), h = g(() => r.value !== -1), I = async (e) => {
+    }), y = $(() => d.value !== -1), M = 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?.("");
+        if (!e || y.value) {
+          a.value = [], d.value = -1, m.value = -1, u.value && (u.value.label = ""), n.value = !1, await c.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);
+        o.disableCb || !c.value || (a.value = await c.value(e), 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 = () => {
+    }, h = (e, t) => {
+      o.onOptionSelectedCb && o.onOptionSelectedCb(e), o.cleanupOnClose && (a.value = []), i.value = e.label, u.value = e, n.value = !1, d.value = t;
+    }, E = () => {
       a.value.length && o.keepState !== "closed" && (n.value = !0);
     };
-    m(
+    C(
       u,
       (e, t) => {
         e === t || e?.label === i.value || (i.value = e?.label || "");
       },
       { immediate: !0 }
-    ), m(r, (e) => {
+    ), C(d, (e) => {
       if (e === -1 || !a.value.length) return;
       const t = a.value[e];
-      h.value && t.label === u.value?.label || w(t, e);
-    }), m(
+      y.value && t.label === u.value?.label || h(t, e);
+    }), C(
       n,
       (e) => {
-        console.log("DEBUG:BaseAutocomplete => openDropdown watcher", e), s("update:dropdownState", e);
+        s("update:dropdownState", e);
       },
       { immediate: !0 }
     );
-    const E = () => {
+    const P = () => {
       b.value?.select();
-    }, M = () => {
-      s("click"), O(), console.log("DEBUG:BaseAutocomplete => handleDropDownClick", {
-        "options.value.length": a.value.length
-      }), a.value.length && (n.value = !0);
+    }, L = () => {
+      s("click"), E(), a.value.length && (n.value = !0);
     };
     return D({
-      select: E
-    }), (e, t) => (v(), C(Q, {
+      select: P
+    }), (e, t) => (v(), w(R, {
       open: n.value,
       "onUpdate:open": t[3] || (t[3] = (l) => n.value = l),
-      class: z(e.$attrs["root-classes"]),
+      class: U(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
+      onClick: L
     }, {
-      btn_slot: p(() => [
-        T(J, {
+      btn_slot: f(() => [
+        X(Q, {
           id: e.$attrs.id ? `ac_input_${e.$attrs.id}` : "",
           ref_key: "baseInput",
           ref: b,
@@ -106,50 +101,58 @@ const x = ["onClick"], _ = ["innerHTML"], ue = /* @__PURE__ */ P({
           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}`)),
+          "with-border": e.withBorder,
+          "onUpdate:modelValue": t[0] || (t[0] = (l) => M(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
-        }, [
+        }, q({ _: 2 }, [
           e.$slots.leftIcon ? {
             name: "leftIcon",
-            fn: p(() => [
-              q(e.$slots, "leftIcon")
+            fn: f(() => [
+              B(e.$slots, "leftIcon")
             ]),
             key: "0"
+          } : void 0,
+          e.withCleanBtn ? {
+            name: "rightIcon",
+            fn: f(({ handleClean: l }) => [
+              G(V("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, _), [
+                [J, S(d) !== -1]
+              ])
+            ]),
+            key: "1"
           } : void 0
-        ]), 1032, ["id", "data-cy", "model-value", "is-valid", "disabled", "placeholder", "input-class", "fieldset-classes"])
+        ]), 1032, ["id", "data-cy", "model-value", "is-valid", "disabled", "placeholder", "input-class", "fieldset-classes", "with-border"])
       ]),
-      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))
+      default: f(({ toggleDropdown: l }) => [
+        B(e.$slots, "dropdown", {
+          options: a.value,
+          toggleDropdown: l
+        }, () => [
+          (v(!0), A(F, null, T(a.value, (p, k) => (v(), w(Z, {
+            key: k,
+            active: S(m) === k,
+            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: (z) => h(p, k),
+            onMouseover: (z) => m.value = k
+          }, {
+            default: f(() => [
+              p.icon ? (v(), w(W(p.icon), { key: 0 })) : j("", !0),
+              V("span", {
+                innerHTML: p.label
+              }, null, 8, ee)
+            ]),
+            _: 2
+          }, 1032, ["active", "onClick", "onMouseover"]))), 128))
+        ])
       ]),
       _: 3
     }, 8, ["open", "class", "data-cy", "dropdown-classes", "close-when-clicked-outside"]));
   }
 });
 export {
-  ue as default
+  se as default
 };

package/package.json

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