@wikicasa-dev/components 2.4.1-alpha.5 → 2.4.1-alpha.7

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

@@ -1,8 +1,8 @@
-import { defineComponent as T, mergeModels as h, useModel as D, useTemplateRef as v, shallowRef as $, onUnmounted as H, createBlock as O, openBlock as c, Teleport as F, createVNode as y, Transition as K, withCtx as N, withDirectives as S, createElementVNode as l, normalizeClass as i, createElementBlock as C, createCommentVNode as w, renderSlot as d, withModifiers as U, unref as V, vShow as A } from "vue";
-import { CloseIcon as P } from "@wikicasa-dev/svg-icons";
-const R = ["id", "data-cy"], G = ["innerHTML"], J = /* @__PURE__ */ T({
+import { defineComponent as z, mergeModels as w, useModel as T, useTemplateRef as y, shallowRef as $, onUnmounted as H, createBlock as O, openBlock as n, Teleport as F, createVNode as C, Transition as U, withCtx as K, createElementBlock as k, createCommentVNode as m, normalizeClass as i, createElementVNode as d, renderSlot as r, withModifiers as N, unref as V } from "vue";
+import { CloseIcon as A } from "@wikicasa-dev/svg-icons";
+const G = ["id", "data-cy"], P = ["innerHTML"], j = /* @__PURE__ */ z({
   __name: "BaseModal",
-  props: /* @__PURE__ */ h({
+  props: /* @__PURE__ */ w({
     id: { default: "base-bt-modal" },
     size: { default: "modal-md" },
     customBackdropClasses: {},
@@ -25,57 +25,66 @@ const R = ["id", "data-cy"], G = ["innerHTML"], J = /* @__PURE__ */ T({
     showModal: { type: Boolean, default: !0 },
     showModalModifiers: {}
   }),
-  emits: /* @__PURE__ */ h(["closed", "opened", "dialogClick"], ["update:showModal"]),
+  emits: /* @__PURE__ */ w(["closed", "opened", "dialogClick"], ["update:showModal"]),
   setup(e, { emit: p }) {
-    const r = p, a = D(e, "showModal"), k = v("backdrop"), s = v("modalDialog"), u = $(!1), m = ({ key: t }) => {
-      t === "Escape" && o();
+    const c = p, o = T(e, "showModal"), f = y("backdrop"), s = y("modalDialog"), l = $(!1), b = ({ key: t }) => {
+      t === "Escape" && a();
     }, x = () => {
-      document?.body.addEventListener("keydown", m);
-    }, f = () => {
-      document?.body.removeEventListener("keydown", m);
-    }, g = () => {
-      console.log("DEBUG:onBeforeEnter called"), x(), document?.body.classList.add(
+      document?.body.addEventListener("keydown", b);
+    }, h = () => {
+      document?.body.removeEventListener("keydown", b);
+    };
+    console.log("DEBUG: BaseModal setup called", {
+      showModal: o.value,
+      timestamp: Date.now()
+    });
+    const g = () => {
+      console.log("DEBUG:onBeforeEnter called", {
+        timestamp: Date.now(),
+        showModal: o.value,
+        stack: new Error().stack
+      }), x(), document?.body.classList.add(
         "sm:uikit-pr-15px",
         "sm:uikit-mr-0",
         "uikit-overflow-hidden"
       );
     }, M = () => {
-      r("opened"), e.autoClose !== void 0 && setTimeout(() => {
-        o();
+      c("opened"), e.autoClose !== void 0 && setTimeout(() => {
+        a();
       }, e.autoClose);
     }, B = () => {
-      f(), document?.body.classList.remove(
+      h(), document?.body.classList.remove(
         "sm:uikit-pr-15px",
         "sm:uikit-mr-0",
         "uikit-overflow-hidden"
-      ), r("closed");
-    }, o = () => {
-      a.value = !1;
+      ), c("closed");
+    }, a = () => {
+      o.value = !1;
     }, E = (t) => {
-      s.value && s.value.contains(t.target) && (u.value = !0);
+      s.value && s.value.contains(t.target) && (l.value = !0);
     }, I = (t) => {
-      s.value && s.value.contains(t.target) && (u.value = !1);
+      s.value && s.value.contains(t.target) && (l.value = !1);
     }, L = async (t) => {
-      if (!(t.target !== k.value && k.value?.contains(t.target)) && e.closeOnClickOut) {
-        if (u.value) {
-          u.value = !1;
+      if (!(t.target !== f.value && f.value?.contains(t.target)) && e.closeOnClickOut) {
+        if (l.value) {
+          l.value = !1;
           return;
         }
-        o();
+        a();
       }
     };
     H(() => {
-      f(), document?.body.classList.remove(
+      h(), document?.body.classList.remove(
         "sm:uikit-pr-15px",
         "sm:uikit-mr-0",
         "uikit-overflow-hidden"
       );
     });
-    const z = (t) => {
+    const D = (t) => {
       s.value === t.target && t.stopPropagation();
     };
-    return (t, n) => (c(), O(F, { to: "body" }, [
-      y(K, {
+    return (t, u) => (n(), O(F, { to: "body" }, [
+      C(U, {
         appear: e.appear,
         name: "modal-transition",
         duration: { enter: 500, leave: 250 },
@@ -83,22 +92,23 @@ const R = ["id", "data-cy"], G = ["innerHTML"], J = /* @__PURE__ */ T({
         onAfterEnter: M,
         onAfterLeave: B
       }, {
-        default: N(() => [
-          S(l("div", {
+        default: K(() => [
+          o.value ? (n(), k("div", {
+            key: 0,
             ref: "backdrop",
             class: i(["bbt-backdrop uikit-fixed uikit-left-0 uikit-top-0 uikit-z-50 uikit-h-full uikit-w-full", [
               e.customBackdropClasses,
               {
-                "uikit-bg-w-secondary/70": a.value
+                "uikit-bg-w-secondary/70": o.value
               },
-              { "uikit-bg-transparent": !a.value },
+              { "uikit-bg-transparent": !o.value },
               { "sm:uikit-pt-[30px]": !e.centered }
             ]]),
             onClick: L,
             onMousedown: E,
             onMouseup: I
           }, [
-            l("dialog", {
+            d("dialog", {
               id: e.id,
               ref: "modalDialog",
               "data-cy": e.dataCy,
@@ -112,50 +122,48 @@ const R = ["id", "data-cy"], G = ["innerHTML"], J = /* @__PURE__ */ T({
                 e.fullHeight ? "uikit-h-[95%]" : "uikit-h-auto"
               ]]),
               tabindex: "-1",
-              onClick: n[1] || (n[1] = (b) => r("dialogClick", b)),
-              onFocusin: z
+              onClick: u[1] || (u[1] = (v) => c("dialogClick", v)),
+              onFocusin: D
             }, [
-              l("div", {
+              d("div", {
                 class: i(["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 ? (c(), C("button", {
+                e.withCloseIcon ? (n(), k("button", {
                   key: 0,
                   id: "close-icon-btn",
                   "data-cy": "bbt-default-close-icon-btn",
                   class: i(["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: n[0] || (n[0] = U((b) => a.value = !1, ["prevent", "stop"]))
+                  onClick: u[0] || (u[0] = N((v) => o.value = !1, ["prevent", "stop"]))
                 }, [
-                  y(V(P), {
+                  C(V(A), {
                     class: i(["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),
-                d(t.$slots, "header", { closeModal: o }, () => [
-                  l("span", {
+                ], 2)) : m("", !0),
+                r(t.$slots, "header", { closeModal: a }, () => [
+                  d("span", {
                     class: i(["uikit-w-auto uikit-text-18 uikit-font-semibold sm:uikit-text-22", e.titleClasses]),
                     innerHTML: e.headerTitle
-                  }, null, 10, G)
+                  }, null, 10, P)
                 ])
               ], 2),
-              l("div", {
+              d("div", {
                 class: i(["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 })
+                r(t.$slots, "body", { closeModal: a })
               ], 2),
-              t.$slots.footer ? (c(), C("div", {
+              t.$slots.footer ? (n(), k("div", {
                 key: 0,
                 class: i(["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)) : w("", !0),
-              d(t.$slots, "fixed-bottom")
-            ], 42, R)
-          ], 34), [
-            [A, a.value]
-          ])
+                r(t.$slots, "footer", { closeModal: a })
+              ], 2)) : m("", !0),
+              r(t.$slots, "fixed-bottom")
+            ], 42, G)
+          ], 34)) : m("", !0)
         ]),
         _: 3
       }, 8, ["appear"])
@@ -163,5 +171,5 @@ const R = ["id", "data-cy"], G = ["innerHTML"], J = /* @__PURE__ */ T({
   }
 });
 export {
-  J as default
+  j as default
 };

package/package.json

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