@wikicasa-dev/components 2.2.8-alpha.18 → 2.2.8-alpha.2

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wikicasa-dev/components",
-  "version": "2.2.8-alpha.18",
+  "version": "2.2.8-alpha.2",
   "description": "Wikicasa frontend components",
   "type": "module",
   "main": "./dist/index.js",
@@ -44,7 +44,7 @@
     "vue": "^3.5.0",
     "date-fns": "^4.0.0",
     "@wikicasa-dev/svg-icons": "^1.2.24",
-    "@wikicasa-dev/vue-composables": "^0.0.27",
+    "@wikicasa-dev/vue-composables": "^0.0.25",
     "@wikicasa-dev/types": "^2.4.0",
     "@wikicasa-dev/utilities": "^1.2.0"
   },
@@ -64,7 +64,7 @@
     "@vue/eslint-config-prettier": "^10.2.0",
     "@vue/eslint-config-typescript": "^14.6.0",
     "@wikicasa-dev/svg-icons": "1.2.24",
-    "@wikicasa-dev/vue-composables": "0.0.27",
+    "@wikicasa-dev/vue-composables": "0.0.25",
     "@wikicasa-dev/tailwind-plugins": "^0.0.3",
     "@wikicasa-dev/types": "2.4.6",
     "@wikicasa-dev/utilities": "1.2.0",

package/dist/UIKit/Autocomplete/ClearableAutocomplete.d.ts

@@ -1,52 +0,0 @@
-import { AccessibleSelectOptions } from '../AccessibleSelect';
-import { ClassTypeProp } from '../types';
-import { Nullable } from '@wikicasa-dev/types';
-export interface ClearableAutocompleteProps<TID extends string | number | undefined, TPayload> {
-    dataCy?: string;
-    placeholder?: string;
-    enableKeyboardController?: boolean;
-    triggerWrapperClasses?: ClassTypeProp;
-    inputWrapperClasses?: ClassTypeProp;
-    inputClasses?: ClassTypeProp;
-    dropdownClasses?: ClassTypeProp;
-    clearButton?: {
-        classes?: ClassTypeProp;
-        /** Space between the input element and the clear button */
-        offset?: number;
-    };
-    keepState?: Nullable<"closed" | "open">;
-    onInputChangeCb: (v: string) => Promise<AccessibleSelectOptions<TPayload, TID>[]>;
-    onOptionSelectedCb?: Nullable<(v: AccessibleSelectOptions<TPayload, TID>) => void>;
-}
-declare const _default: <TID extends string | number | undefined, TPayload>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
-        readonly "onUpdate:modelValue"?: ((value: Nullable<AccessibleSelectOptions<TPayload, TID>>) => any) | undefined;
-        readonly onClick?: (() => any) | undefined;
-        readonly onKeydown?: ((args_0: KeyboardEvent) => any) | undefined;
-        readonly "onUpdate:open"?: ((value: boolean) => 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" | "onUpdate:inputValue"> & ({
-        open?: boolean;
-        modelValue?: Nullable<AccessibleSelectOptions<TPayload, TID>>;
-    } & ClearableAutocompleteProps<TID, TPayload>) & Partial<{}>> & import('vue').PublicProps;
-    expose(exposed: import('vue').ShallowUnwrapRef<{
-        select: () => void;
-    }>): void;
-    attrs: any;
-    slots: {
-        'left-icon'?(_: {}): any;
-        'clear-icon'?(_: {}): any;
-        'right-icon'?(_: {}): any;
-        'option-content'?(_: {
-            option: AccessibleSelectOptions<TPayload, TID>;
-            idx: number;
-        }): any;
-    };
-    emit: (((evt: "click") => void) & ((evt: "keydown", args_0: KeyboardEvent) => void) & ((evt: "update:inputValue", args_0: string) => void)) & (((evt: "update:modelValue", value: Nullable<AccessibleSelectOptions<TPayload, TID>>) => void) & ((evt: "update:open", value: boolean) => void));
-}>) => import('vue').VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
-};
-export default _default;
-type __VLS_PrettifyLocal<T> = {
-    [K in keyof T]: T[K];
-} & {};

package/dist/UIKit/Autocomplete/ClearableAutocomplete.js

@@ -1,5 +0,0 @@
-import o from "../../packages/components/lib/UIKit/Autocomplete/ClearableAutocomplete.vue.js";
-import '../../assets/ClearableAutocomplete.css';/* empty css                                                                          */
-export {
-  o as default
-};

package/dist/assets/ClearableAutocomplete.css

@@ -1 +0,0 @@
-.uikit-clearable-autocomplete{--input-padding: 0;--input-margin: 0}.uikit-clearable-autocomplete input{margin:var(--input-margin);padding:var(--input-padding)}.uikit-clearable-autocomplete .uikit-clear-btn{--bg-color: transparent;background-color:var(--bg-color)}

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

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