@wikicasa-dev/components 2.2.9-alpha.48 → 2.2.9-alpha.5

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

@@ -1,7 +1,7 @@
-import { defineComponent as I, ref as n, useTemplateRef as T, onUnmounted as z, watch as H, createBlock as O, openBlock as m, Teleport as $, createElementVNode as a, normalizeClass as s, createElementBlock as y, createCommentVNode as h, renderSlot as d, withModifiers as D, createVNode as F, unref as K, nextTick as N } from "vue";
-import { isWindows as g, awaitableSetTimeout as S } from "@wikicasa-dev/utilities";
+import { defineComponent as I, ref as n, useTemplateRef as T, onUnmounted as z, watch as H, createBlock as O, openBlock as r, Teleport as $, createElementVNode as l, normalizeClass as s, withModifiers as y, createElementBlock as h, createCommentVNode as w, renderSlot as d, createVNode as D, unref as K, nextTick as N } from "vue";
+import { isWindows as C, awaitableSetTimeout as S } from "@wikicasa-dev/utilities";
 import { CloseIcon as V } from "@wikicasa-dev/svg-icons";
-const P = ["id", "data-cy"], U = ["innerHTML"], j = /* @__PURE__ */ I({
+const F = ["id", "data-cy"], U = ["innerHTML"], R = /* @__PURE__ */ I({
   __name: "BaseModal",
   props: {
     id: { default: "base-bt-modal" },
@@ -24,25 +24,25 @@ const P = ["id", "data-cy"], U = ["innerHTML"], j = /* @__PURE__ */ I({
     titleClasses: {}
   },
   emits: ["closed", "opened", "dialogClick"],
-  setup(e, { emit: w }) {
-    const c = w, i = n(!1), r = n(null), l = T("modalDialog"), k = n(!1), u = n(!1), f = ({ key: t }) => {
+  setup(e, { emit: g }) {
+    const c = g, i = n(!1), m = n(null), a = T("modalDialog"), k = n(!1), u = n(!1), f = ({ key: t }) => {
       t === "Escape" && o();
-    }, C = () => {
+    }, x = () => {
       document?.body.addEventListener("keydown", f);
     }, b = () => {
       document?.body.removeEventListener("keydown", f);
-    }, x = async () => {
+    }, p = async () => {
       i.value = !0, N(() => {
-        C(), g() ? document?.body.classList.add("uikit-no-scrolling", "sm:uikit-pr-15px") : document?.body.classList.add("uikit-no-scrolling");
+        x(), C() ? document?.body.classList.add("uikit-no-scrolling", "sm:uikit-pr-15px") : document?.body.classList.add("uikit-no-scrolling");
       }), c("opened"), e.autoClose !== void 0 && setTimeout(() => {
         o();
       }, e.autoClose);
-    }, p = (t) => {
-      l.value && l.value.contains(t.target) && (u.value = !0);
     }, M = (t) => {
-      l.value && l.value.contains(t.target) && (u.value = !1);
-    }, B = async (t) => {
-      if (!r.value?.contains(t.target) && e.closeOnClickOut) {
+      a.value && a.value.contains(t.target) && (u.value = !0);
+    }, B = (t) => {
+      a.value && a.value.contains(t.target) && (u.value = !1);
+    }, L = async () => {
+      if (e.closeOnClickOut) {
         if (u.value) {
           u.value = !1;
           return;
@@ -51,25 +51,21 @@ const P = ["id", "data-cy"], U = ["innerHTML"], j = /* @__PURE__ */ I({
       }
     }, o = async () => {
       i.value = !1, b(), document?.documentElement.classList.remove("uikit-no-scrolling"), navigator.userAgent.includes("Windows") ? document?.body.classList.remove("uikit-no-scrolling", "sm:uikit-pr-15px") : document?.body.classList.remove("uikit-no-scrolling"), await S(() => {
-        r.value?.classList.add("uikit-hidden"), c("closed");
+        m.value?.classList.add("uikit-hidden"), c("closed");
       }, 250);
     };
-    z(() => {
-      b(), document?.documentElement.classList.remove("uikit-no-scrolling"), g() ? document?.body.classList.remove("uikit-no-scrolling", "sm:uikit-pr-15px") : document?.body.classList.remove("uikit-no-scrolling");
+    return z(() => {
+      b(), document?.documentElement.classList.remove("uikit-no-scrolling"), C() ? document?.body.classList.remove("uikit-no-scrolling", "sm:uikit-pr-15px") : document?.body.classList.remove("uikit-no-scrolling");
     }), H(
       () => e.showModal,
       async (t) => {
-        !t && !i.value ? k.value = !0 : k.value = !1, t && !i.value && await x(), !t && i.value && await o(), i.value = t;
+        !t && !i.value ? k.value = !0 : k.value = !1, t && !i.value && await p(), !t && i.value && await o(), i.value = t;
       },
       { immediate: !0 }
-    );
-    const L = (t) => {
-      l.value === t.target && t.stopPropagation();
-    };
-    return (t, v) => (m(), O($, { to: "body" }, [
-      a("div", {
+    ), (t, v) => (r(), O($, { to: "body" }, [
+      l("div", {
         ref_key: "backdropEl",
-        ref: r,
+        ref: m,
         class: s(["bbt-backdrop uikit-fixed uikit-left-0 uikit-top-0 uikit-h-full uikit-w-full", [
           e.customBackdropClasses,
           {
@@ -80,11 +76,11 @@ const P = ["id", "data-cy"], U = ["innerHTML"], j = /* @__PURE__ */ I({
           { hide: k.value }
         ]]),
         style: { "z-index": "1062" },
-        onClick: B,
-        onMousedown: p,
-        onMouseup: M
+        onClick: L,
+        onMousedown: M,
+        onMouseup: B
       }, [
-        a("dialog", {
+        l("dialog", {
           id: e.id,
           ref: "modalDialog",
           "data-cy": e.dataCy,
@@ -98,52 +94,50 @@ const P = ["id", "data-cy"], U = ["innerHTML"], j = /* @__PURE__ */ I({
             `base-${e.size}`,
             e.fullHeight ? "uikit-h-[95%]" : "uikit-h-auto"
           ]]),
-          tabindex: "-1",
-          onClick: v[0] || (v[0] = (E) => c("dialogClick", E)),
-          onFocusin: L
+          onClick: v[0] || (v[0] = y((E) => c("dialogClick", E), ["stop"]))
         }, [
-          a("div", {
+          l("div", {
             class: s(["default-header uikit-sticky uikit-top-0 uikit-z-10 uikit-rounded-t uikit-border-0 uikit-bg-white uikit-px-4 uikit-pb-10px uikit-pt-20px sm:uikit-px-6", [e.customModalHeaderClasses]])
           }, [
-            e.withCloseIcon ? (m(), y("button", {
+            e.withCloseIcon ? (r(), h("button", {
               key: 0,
               id: "close-icon-btn",
               "data-cy": "bbt-default-close-icon-btn",
               class: s(["uikit-absolute uikit-right-15px uikit-top-15px uikit-z-10 uikit-bg-transparent uikit-p-5px", e.closeIconBtnClasses]),
               type: "button",
               "aria-label": "Close",
-              onClick: D(o, ["prevent", "stop"])
+              onClick: y(o, ["prevent", "stop"])
             }, [
-              F(K(V), {
+              D(K(V), {
                 class: s(["bbt-close-icon uikit-box-border", e.closeIcon?.classes]),
                 width: e.closeIcon?.size || 20,
                 height: e.closeIcon?.size || 20
               }, null, 8, ["class", "width", "height"])
-            ], 2)) : h("", !0),
+            ], 2)) : w("", !0),
             d(t.$slots, "header", { closeModal: o }, () => [
-              a("span", {
+              l("span", {
                 class: s(["uikit-w-auto uikit-text-18 uikit-font-semibold sm:uikit-text-22", e.titleClasses]),
                 innerHTML: e.headerTitle
               }, null, 10, U)
             ])
           ], 2),
-          a("div", {
+          l("div", {
             class: s(["uikit-bbt-body uikit-flex-auto uikit-overflow-y-auto uikit-overflow-x-hidden uikit-px-4 uikit-pb-0 uikit-no-scrollbar sm:uikit-px-6 sm:uikit-pb-25px", [e.customModalBodyClasses]])
           }, [
             d(t.$slots, "body", { closeModal: o })
           ], 2),
-          t.$slots.footer ? (m(), y("div", {
+          t.$slots.footer ? (r(), h("div", {
             key: 0,
             class: s(["uikit-bbt-footer uikit-sticky uikit-bottom-0 uikit-border-0 uikit-bg-white uikit-px-4 uikit-py-15px sm:uikit-px-6", e.customModalFooterClasses])
           }, [
             d(t.$slots, "footer", { closeModal: o })
-          ], 2)) : h("", !0),
+          ], 2)) : w("", !0),
           d(t.$slots, "fixed-bottom")
-        ], 42, P)
+        ], 10, F)
       ], 34)
     ]));
   }
 });
 export {
-  j as default
+  R as default
 };

package/dist/packages/components/lib/UIKit/BaseSelect/SelectItem.vue.js

@@ -1,5 +1,5 @@
-import { defineComponent as u, useTemplateRef as c, watch as d, nextTick as m, createElementBlock as r, openBlock as f, normalizeClass as v, renderSlot as k, createElementVNode as x } from "vue";
-const b = ["data-active", "tabindex"], p = ["innerHTML"], $ = /* @__PURE__ */ u({
+import { defineComponent as u, useTemplateRef as r, watch as m, nextTick as c, createElementBlock as d, openBlock as f, normalizeClass as k, renderSlot as v, createElementVNode as x } from "vue";
+const p = ["tabindex"], b = ["innerHTML"], $ = /* @__PURE__ */ u({
   __name: "SelectItem",
   props: {
     label: { default: "" },
@@ -7,34 +7,33 @@ const b = ["data-active", "tabindex"], p = ["innerHTML"], $ = /* @__PURE__ */ u(
     idx: { default: -1 }
   },
   emits: ["click", "mouseover"],
-  setup(t, { emit: o }) {
-    const a = o, i = t, n = c("liItem");
-    return d(
-      () => i.active,
+  setup(l, { emit: a }) {
+    const n = a, t = l, o = r("liItem");
+    return m(
+      () => t.active,
       (e) => {
-        e && m(() => {
-          n.value && n.value.focus();
+        e && c(() => {
+          o.value && o.value.focus();
         });
       },
       { immediate: !0 }
-    ), (e, l) => (f(), r("li", {
+    ), (e, i) => (f(), d("li", {
       ref: "liItem",
-      class: v(["uikit-list-none uikit-text-w-black", [
-        { "active uikit-bg-w-cultured": t.active },
+      class: k(["uikit-list-none uikit-text-w-black", [
+        { "active uikit-bg-w-cultured": l.active },
         "uikit-outline-none",
         e.$attrs.class
       ]]),
-      "data-active": t.active,
       tabindex: e.$attrs.tabindex ?? -1,
-      onClick: l[0] || (l[0] = (s) => a("click", i.idx)),
-      onMouseover: l[1] || (l[1] = (s) => a("mouseover", i.idx))
+      onClick: i[0] || (i[0] = (s) => n("click", t.idx)),
+      onMouseover: i[1] || (i[1] = (s) => n("mouseover", t.idx))
     }, [
-      k(e.$slots, "default", { itemIdx: t.idx }, () => [
+      v(e.$slots, "default", { itemIdx: l.idx }, () => [
         x("span", {
-          innerHTML: i.label
-        }, null, 8, p)
+          innerHTML: t.label
+        }, null, 8, b)
       ])
-    ], 42, b));
+    ], 42, p));
   }
 });
 export {

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

@@ -1,7 +1,7 @@
-import { defineComponent as s, useId as m, watch as f, createElementBlock as h, openBlock as d, createVNode as o, renderSlot as b, unref as i, normalizeClass as C, withCtx as u, createBlock as x, createCommentVNode as y, createTextVNode as V, toDisplayString as g } from "vue";
-import { CheckIcon as B } from "@wikicasa-dev/svg-icons";
-import { CheckboxRoot as p, CheckboxIndicator as w } from "reka-ui";
-const z = /* @__PURE__ */ s({
+import { defineComponent as m, useId as f, computed as h, watch as b, createElementBlock as C, openBlock as u, createVNode as c, renderSlot as x, unref as i, normalizeClass as y, withCtx as n, createBlock as V, createCommentVNode as g, createTextVNode as B, toDisplayString as w } from "vue";
+import { CheckIcon as p } from "@wikicasa-dev/svg-icons";
+import { CheckboxRoot as I, CheckboxIndicator as v } from "reka-ui";
+const N = ["for"], j = /* @__PURE__ */ m({
   __name: "CheckboxBtn",
   props: {
     id: {},
@@ -15,9 +15,9 @@ const z = /* @__PURE__ */ s({
     modelValue: { type: Boolean, default: !1 }
   },
   emits: ["click", "update:modelValue", "change"],
-  setup(e, { emit: c }) {
-    const n = m(), a = c;
-    f(
+  setup(e, { emit: r }) {
+    const l = f(), d = h(() => `${e.id ?? l}`), a = r;
+    b(
       () => e.checked,
       (t) => {
         t !== void 0 && a("update:modelValue", t);
@@ -25,20 +25,22 @@ const z = /* @__PURE__ */ s({
     );
     const k = (t) => {
       t !== "indeterminate" && (a("change", {
-        id: e.id ?? n,
+        id: e.id ?? l,
         label: e.label,
         checked: t
       }), a("update:modelValue", t));
     };
-    return (t, l) => (d(), h("label", {
+    return (t, o) => (u(), C("label", {
       class: "uikit-checkbox-btn uikit-flex uikit-items-center uikit-gap-[12px]",
-      onClick: l[0] || (l[0] = (r) => a("click", r))
+      for: d.value,
+      onClick: o[0] || (o[0] = (s) => a("click", s))
     }, [
-      o(i(p), {
+      c(i(I), {
+        id: d.value,
         "model-value": e.modelValue,
         "data-cy": e.dataCy,
         disabled: e.disabled,
-        class: C(["uikit-inline-flex uikit-size-[20px] uikit-shrink-0 uikit-items-center uikit-justify-center uikit-rounded-[4px] uikit-p-0 data-[state='unchecked']:uikit-border data-[state='unchecked']:uikit-border-solid data-[state='unchecked']:uikit-border-w-lightgray", [
+        class: y(["uikit-inline-flex uikit-size-[20px] uikit-items-center uikit-justify-center uikit-rounded-[4px] uikit-p-0 data-[state='unchecked']:uikit-border data-[state='unchecked']:uikit-border-solid data-[state='unchecked']:uikit-border-w-lightgray", [
           {
             "uikit-bg-white": !e.modelValue,
             "uikit-bg-w-primary": e.modelValue
@@ -47,27 +49,27 @@ const z = /* @__PURE__ */ s({
         ]]),
         "onUpdate:modelValue": k
       }, {
-        default: u(() => [
-          o(i(w), { class: "uikit-flex" }, {
-            default: u(() => [
-              e.modelValue === !0 ? (d(), x(i(B), {
+        default: n(() => [
+          c(i(v), { class: "uikit-flex" }, {
+            default: n(() => [
+              e.modelValue === !0 ? (u(), V(i(p), {
                 key: 0,
                 "fill-color": "#fff",
                 width: 12,
                 height: 14
-              })) : y("", !0)
+              })) : g("", !0)
             ]),
             _: 1
           })
         ]),
         _: 1
-      }, 8, ["model-value", "data-cy", "disabled", "class"]),
-      b(t.$slots, "label", {}, () => [
-        V(g(e.label), 1)
+      }, 8, ["id", "model-value", "data-cy", "disabled", "class"]),
+      x(t.$slots, "label", {}, () => [
+        B(w(e.label), 1)
       ])
-    ]));
+    ], 8, N));
   }
 });
 export {
-  z as default
+  j as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wikicasa-dev/components",
-  "version": "2.2.9-alpha.48",
+  "version": "2.2.9-alpha.5",
   "description": "Wikicasa frontend components",
   "type": "module",
   "main": "./dist/index.js",
@@ -17,7 +17,6 @@
       "default": "./dist/index.js"
     },
     "./style": "./dist/assets/tailwind.css",
-    "./css/*": "./dist/assets/*.css",
     "./generic/*": {
       "import": "./dist/components/*.js",
       "types": "./dist/components/*.d.ts"
@@ -44,8 +43,8 @@
   "peerDependencies": {
     "vue": "^3.5.0",
     "date-fns": "^4.0.0",
-    "@wikicasa-dev/svg-icons": "^1.2.28-alpha.1",
-    "@wikicasa-dev/vue-composables": "0.0.33-alpha.2",
+    "@wikicasa-dev/svg-icons": "^1.2.24",
+    "@wikicasa-dev/vue-composables": "^0.0.29",
     "@wikicasa-dev/types": "^2.4.0",
     "@wikicasa-dev/utilities": "^1.2.0"
   },
@@ -64,8 +63,8 @@
     "@vitejs/plugin-vue": "^6.0.2",
     "@vue/eslint-config-prettier": "^10.2.0",
     "@vue/eslint-config-typescript": "^14.6.0",
-    "@wikicasa-dev/svg-icons": "1.2.28-alpha.1",
-    "@wikicasa-dev/vue-composables": "0.0.33-alpha.2",
+    "@wikicasa-dev/svg-icons": "1.2.24",
+    "@wikicasa-dev/vue-composables": "0.0.29",
     "@wikicasa-dev/tailwind-plugins": "^0.0.3",
     "@wikicasa-dev/types": "2.4.6",
     "@wikicasa-dev/utilities": "1.2.0",

package/dist/assets/AccessibleSelect.css

@@ -1 +0,0 @@
-.uikit-select-dropdown.uikit-dropdown-content{--dropdown-border-color: #B4C2F0;--dropdown-max-height: 225px;--dropdown-min-width: unset;--dropdown-margin-top: 10px;margin-top:var(--dropdown-margin-top)}.uikit-select-dropdown.uikit-dropdown-content[data-side=down]{--dropdown-border-top-width: 1px;--dropdown-border-top-left-radius: 12px;--dropdown-border-top-right-radius: 12px;--dropdown-border-bottom-left-radius: 12px;--dropdown-border-bottom-right-radius: 12px}

package/dist/composables/mock.d.ts

@@ -1,25 +0,0 @@
-import { Ref } from 'vue';
-interface KeyboardControllerProps {
-    optionsLength: Ref<number> | number;
-    isDropdownOpen?: Ref<boolean>;
-    disableSpaceHandler?: boolean;
-    activate?: boolean;
-    /**
-     * If true, the listener will be initialized on the document element
-     */
-    global?: boolean;
-    /**
-     * List of keys that will close the dropdown.
-     * For the full list of keys, see
-     * @link https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values
-     * @default "Escape" and "Enter"
-     */
-    closeKeys?: string[];
-}
-export declare const useKeyboardController: (props: KeyboardControllerProps) => {
-    activeIdx: Ref<number, number>;
-    selectedIdx: Ref<number, number>;
-    $reset: () => void;
-    onKeyDownHandler: (e: KeyboardEvent) => void;
-};
-export {};

package/dist/composables/mock.js

@@ -1,49 +0,0 @@
-import { ref as _, onMounted as A, onUnmounted as D, unref as p } from "vue";
-const u = "ArrowUp", a = "ArrowDown", c = "Enter", i = "Escape", v = " ", d = "PageUp", K = "Home", E = "PageDown", m = "End", O = (l) => {
-  const {
-    isDropdownOpen: t,
-    disableSpaceHandler: P,
-    global: f = !0,
-    closeKeys: Y = [i, c]
-  } = l, n = _(-1), o = _(-1), w = l.activate === void 0 ? !0 : l.activate, y = () => {
-    n.value = -1, o.value = -1, t && (t.value = !1);
-  }, k = (e) => {
-    t && Y.includes(e) && (t.value = !1);
-  }, r = (e) => {
-    if (!t?.value || ![
-      u,
-      a,
-      c,
-      i,
-      v,
-      d,
-      K,
-      E,
-      m
-    ].includes(e.key))
-      return;
-    const s = p(l.optionsLength);
-    if ([u, a, d, E].includes(e.key) && e.preventDefault(), e.key === u)
-      n.value = n.value === 0 ? s - 1 : n.value - 1;
-    else if (e.key === a)
-      n.value = (n.value + 1) % s;
-    else if (e.key === c || e.key === v) {
-      if (e.key === v && P) return;
-      o.value = n.value, k(e.key);
-    } else e.key === i ? (n.value = o.value, k(e.key)) : e.key === d || e.key === K ? n.value = 0 : (e.key === E || e.key === m) && (n.value = s - 1);
-    e.stopPropagation();
-  };
-  return w ? (A(() => {
-    !document || !f || document.addEventListener("keydown", r);
-  }), D(() => {
-    !document || !f || document.removeEventListener("keydown", r);
-  }), {
-    activeIdx: n,
-    selectedIdx: o,
-    onKeyDownHandler: r,
-    $reset: y
-  }) : { activeIdx: n, selectedIdx: o, $reset: y, onKeyDownHandler: r };
-};
-export {
-  O as useKeyboardController
-};