@wikicasa-dev/components 2.2.9-alpha.26 → 2.2.9-alpha.28

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

@@ -1,7 +1,7 @@
-import { defineComponent as I, ref as d, useTemplateRef as T, onUnmounted as z, watch as H, createBlock as O, openBlock as f, Teleport as $, createElementVNode as l, normalizeClass as s, withModifiers as y, createElementBlock as h, createCommentVNode as w, renderSlot as c, createVNode as D, unref as F, nextTick as K } from "vue";
-import { isWindows as g, awaitableSetTimeout as N } from "@wikicasa-dev/utilities";
-import { CloseIcon as S } from "@wikicasa-dev/svg-icons";
-const V = ["id", "data-cy"], U = ["innerHTML"], R = /* @__PURE__ */ I({
+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 { CloseIcon as V } from "@wikicasa-dev/svg-icons";
+const P = ["id", "data-cy"], U = ["innerHTML"], j = /* @__PURE__ */ I({
   __name: "BaseModal",
   props: {
     id: { default: "base-bt-modal" },
@@ -24,24 +24,24 @@ const V = ["id", "data-cy"], U = ["innerHTML"], R = /* @__PURE__ */ I({
     titleClasses: {}
   },
   emits: ["closed", "opened", "dialogClick"],
-  setup(e, { emit: C }) {
-    const k = C, i = d(!1), r = d(null), a = T("modalDialog"), m = d(!1), u = d(!1), b = ({ key: t }) => {
+  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 }) => {
       t === "Escape" && o();
-    }, x = () => {
-      document?.body.addEventListener("keydown", b);
-    }, v = () => {
-      document?.body.removeEventListener("keydown", b);
-    }, p = async () => {
-      i.value = !0, K(() => {
-        x(), g() ? document?.body.classList.add("uikit-no-scrolling", "sm:uikit-pr-15px") : document?.body.classList.add("uikit-no-scrolling");
-      }), k("opened"), e.autoClose !== void 0 && setTimeout(() => {
+    }, C = () => {
+      document?.body.addEventListener("keydown", f);
+    }, b = () => {
+      document?.body.removeEventListener("keydown", f);
+    }, x = 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");
+      }), c("opened"), e.autoClose !== void 0 && setTimeout(() => {
         o();
       }, e.autoClose);
+    }, p = (t) => {
+      l.value && l.value.contains(t.target) && (u.value = !0);
     }, M = (t) => {
-      a.value && a.value.contains(t.target) && (u.value = !0);
-    }, B = (t) => {
-      a.value && a.value.contains(t.target) && (u.value = !1);
-    }, L = async (t) => {
+      l.value && l.value.contains(t.target) && (u.value = !1);
+    }, B = async (t) => {
       if (!r.value?.contains(t.target) && e.closeOnClickOut) {
         if (u.value) {
           u.value = !1;
@@ -50,20 +50,24 @@ const V = ["id", "data-cy"], U = ["innerHTML"], R = /* @__PURE__ */ I({
         await o();
       }
     }, o = async () => {
-      i.value = !1, v(), 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 N(() => {
-        r.value?.classList.add("uikit-hidden"), k("closed");
+      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");
       }, 250);
     };
-    return z(() => {
-      v(), 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");
+    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");
     }), H(
       () => e.showModal,
       async (t) => {
-        !t && !i.value ? m.value = !0 : m.value = !1, t && !i.value && await p(), !t && i.value && await o(), i.value = t;
+        !t && !i.value ? k.value = !0 : k.value = !1, t && !i.value && await x(), !t && i.value && await o(), i.value = t;
       },
       { immediate: !0 }
-    ), (t, n) => (f(), O($, { to: "body" }, [
-      l("div", {
+    );
+    const L = (t) => {
+      l.value === t.target && t.stopPropagation();
+    };
+    return (t, v) => (m(), O($, { to: "body" }, [
+      a("div", {
         ref_key: "backdropEl",
         ref: r,
         class: s(["bbt-backdrop uikit-fixed uikit-left-0 uikit-top-0 uikit-h-full uikit-w-full", [
@@ -73,14 +77,14 @@ const V = ["id", "data-cy"], U = ["innerHTML"], R = /* @__PURE__ */ I({
           },
           { "uikit-bg-transparent": !i.value },
           { "sm:uikit-pt-[30px]": !e.centered },
-          { hide: m.value }
+          { hide: k.value }
         ]]),
         style: { "z-index": "1062" },
-        onClick: L,
-        onMousedown: M,
-        onMouseup: B
+        onClick: B,
+        onMousedown: p,
+        onMouseup: M
       }, [
-        l("dialog", {
+        a("dialog", {
           id: e.id,
           ref: "modalDialog",
           "data-cy": e.dataCy,
@@ -95,52 +99,51 @@ const V = ["id", "data-cy"], U = ["innerHTML"], R = /* @__PURE__ */ I({
             e.fullHeight ? "uikit-h-[95%]" : "uikit-h-auto"
           ]]),
           tabindex: "-1",
-          onClick: n[0] || (n[0] = (E) => k("dialogClick", E)),
-          onFocusin: n[1] || (n[1] = y(() => {
-          }, ["stop"]))
+          onClick: v[0] || (v[0] = (E) => c("dialogClick", E)),
+          onFocusin: L
         }, [
-          l("div", {
+          a("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 ? (f(), h("button", {
+            e.withCloseIcon ? (m(), y("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: y(o, ["prevent", "stop"])
+              onClick: D(o, ["prevent", "stop"])
             }, [
-              D(F(S), {
+              F(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)) : w("", !0),
-            c(t.$slots, "header", { closeModal: o }, () => [
-              l("span", {
+            ], 2)) : h("", !0),
+            d(t.$slots, "header", { closeModal: o }, () => [
+              a("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),
-          l("div", {
+          a("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]])
           }, [
-            c(t.$slots, "body", { closeModal: o })
+            d(t.$slots, "body", { closeModal: o })
           ], 2),
-          t.$slots.footer ? (f(), h("div", {
+          t.$slots.footer ? (m(), y("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])
           }, [
-            c(t.$slots, "footer", { closeModal: o })
-          ], 2)) : w("", !0),
-          c(t.$slots, "fixed-bottom")
-        ], 42, V)
+            d(t.$slots, "footer", { closeModal: o })
+          ], 2)) : h("", !0),
+          d(t.$slots, "fixed-bottom")
+        ], 42, P)
       ], 34)
     ]));
   }
 });
 export {
-  R as default
+  j as default
 };

package/package.json

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