@wikicasa-dev/components 2.4.1-alpha.5 → 2.4.1-alpha.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
import { CloseIcon as
|
|
3
|
-
const
|
|
1
|
+
import { defineComponent as z, mergeModels as h, useModel as T, useTemplateRef as v, shallowRef as $, onUnmounted as H, createBlock as O, openBlock as c, Teleport as F, createVNode as w, Transition as U, withCtx as K, withDirectives as N, createElementVNode as l, normalizeClass as i, createElementBlock as y, createCommentVNode as C, renderSlot as d, withModifiers as S, unref as V, vShow as A } from "vue";
|
|
2
|
+
import { CloseIcon as G } from "@wikicasa-dev/svg-icons";
|
|
3
|
+
const P = ["id", "data-cy"], R = ["innerHTML"], J = /* @__PURE__ */ z({
|
|
4
4
|
__name: "BaseModal",
|
|
5
5
|
props: /* @__PURE__ */ h({
|
|
6
6
|
id: { default: "base-bt-modal" },
|
|
@@ -27,21 +27,30 @@ const R = ["id", "data-cy"], G = ["innerHTML"], J = /* @__PURE__ */ T({
|
|
|
27
27
|
}),
|
|
28
28
|
emits: /* @__PURE__ */ h(["closed", "opened", "dialogClick"], ["update:showModal"]),
|
|
29
29
|
setup(e, { emit: p }) {
|
|
30
|
-
const r = p,
|
|
31
|
-
t === "Escape" &&
|
|
30
|
+
const r = p, o = T(e, "showModal"), k = v("backdrop"), s = v("modalDialog"), u = $(!1), m = ({ key: t }) => {
|
|
31
|
+
t === "Escape" && a();
|
|
32
32
|
}, x = () => {
|
|
33
33
|
document?.body.addEventListener("keydown", m);
|
|
34
34
|
}, f = () => {
|
|
35
35
|
document?.body.removeEventListener("keydown", m);
|
|
36
|
-
}
|
|
37
|
-
|
|
36
|
+
};
|
|
37
|
+
console.log("DEBUG: BaseModal setup called", {
|
|
38
|
+
showModal: o.value,
|
|
39
|
+
timestamp: Date.now()
|
|
40
|
+
});
|
|
41
|
+
const g = () => {
|
|
42
|
+
console.log("DEBUG:onBeforeEnter called", {
|
|
43
|
+
timestamp: Date.now(),
|
|
44
|
+
showModal: o.value,
|
|
45
|
+
stack: new Error().stack
|
|
46
|
+
}), x(), document?.body.classList.add(
|
|
38
47
|
"sm:uikit-pr-15px",
|
|
39
48
|
"sm:uikit-mr-0",
|
|
40
49
|
"uikit-overflow-hidden"
|
|
41
50
|
);
|
|
42
51
|
}, M = () => {
|
|
43
52
|
r("opened"), e.autoClose !== void 0 && setTimeout(() => {
|
|
44
|
-
|
|
53
|
+
a();
|
|
45
54
|
}, e.autoClose);
|
|
46
55
|
}, B = () => {
|
|
47
56
|
f(), document?.body.classList.remove(
|
|
@@ -49,19 +58,19 @@ const R = ["id", "data-cy"], G = ["innerHTML"], J = /* @__PURE__ */ T({
|
|
|
49
58
|
"sm:uikit-mr-0",
|
|
50
59
|
"uikit-overflow-hidden"
|
|
51
60
|
), r("closed");
|
|
52
|
-
},
|
|
53
|
-
|
|
61
|
+
}, a = () => {
|
|
62
|
+
o.value = !1;
|
|
54
63
|
}, E = (t) => {
|
|
55
64
|
s.value && s.value.contains(t.target) && (u.value = !0);
|
|
56
65
|
}, I = (t) => {
|
|
57
66
|
s.value && s.value.contains(t.target) && (u.value = !1);
|
|
58
|
-
},
|
|
67
|
+
}, D = async (t) => {
|
|
59
68
|
if (!(t.target !== k.value && k.value?.contains(t.target)) && e.closeOnClickOut) {
|
|
60
69
|
if (u.value) {
|
|
61
70
|
u.value = !1;
|
|
62
71
|
return;
|
|
63
72
|
}
|
|
64
|
-
|
|
73
|
+
a();
|
|
65
74
|
}
|
|
66
75
|
};
|
|
67
76
|
H(() => {
|
|
@@ -71,11 +80,11 @@ const R = ["id", "data-cy"], G = ["innerHTML"], J = /* @__PURE__ */ T({
|
|
|
71
80
|
"uikit-overflow-hidden"
|
|
72
81
|
);
|
|
73
82
|
});
|
|
74
|
-
const
|
|
83
|
+
const L = (t) => {
|
|
75
84
|
s.value === t.target && t.stopPropagation();
|
|
76
85
|
};
|
|
77
86
|
return (t, n) => (c(), O(F, { to: "body" }, [
|
|
78
|
-
|
|
87
|
+
w(U, {
|
|
79
88
|
appear: e.appear,
|
|
80
89
|
name: "modal-transition",
|
|
81
90
|
duration: { enter: 500, leave: 250 },
|
|
@@ -83,18 +92,18 @@ const R = ["id", "data-cy"], G = ["innerHTML"], J = /* @__PURE__ */ T({
|
|
|
83
92
|
onAfterEnter: M,
|
|
84
93
|
onAfterLeave: B
|
|
85
94
|
}, {
|
|
86
|
-
default:
|
|
87
|
-
|
|
95
|
+
default: K(() => [
|
|
96
|
+
N(l("div", {
|
|
88
97
|
ref: "backdrop",
|
|
89
98
|
class: i(["bbt-backdrop uikit-fixed uikit-left-0 uikit-top-0 uikit-z-50 uikit-h-full uikit-w-full", [
|
|
90
99
|
e.customBackdropClasses,
|
|
91
100
|
{
|
|
92
|
-
"uikit-bg-w-secondary/70":
|
|
101
|
+
"uikit-bg-w-secondary/70": o.value
|
|
93
102
|
},
|
|
94
|
-
{ "uikit-bg-transparent": !
|
|
103
|
+
{ "uikit-bg-transparent": !o.value },
|
|
95
104
|
{ "sm:uikit-pt-[30px]": !e.centered }
|
|
96
105
|
]]),
|
|
97
|
-
onClick:
|
|
106
|
+
onClick: D,
|
|
98
107
|
onMousedown: E,
|
|
99
108
|
onMouseup: I
|
|
100
109
|
}, [
|
|
@@ -113,48 +122,48 @@ const R = ["id", "data-cy"], G = ["innerHTML"], J = /* @__PURE__ */ T({
|
|
|
113
122
|
]]),
|
|
114
123
|
tabindex: "-1",
|
|
115
124
|
onClick: n[1] || (n[1] = (b) => r("dialogClick", b)),
|
|
116
|
-
onFocusin:
|
|
125
|
+
onFocusin: L
|
|
117
126
|
}, [
|
|
118
127
|
l("div", {
|
|
119
128
|
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]])
|
|
120
129
|
}, [
|
|
121
|
-
e.withCloseIcon ? (c(),
|
|
130
|
+
e.withCloseIcon ? (c(), y("button", {
|
|
122
131
|
key: 0,
|
|
123
132
|
id: "close-icon-btn",
|
|
124
133
|
"data-cy": "bbt-default-close-icon-btn",
|
|
125
134
|
class: i(["uikit-absolute uikit-right-15px uikit-top-15px uikit-z-10 uikit-bg-transparent uikit-p-5px", e.closeIconBtnClasses]),
|
|
126
135
|
type: "button",
|
|
127
136
|
"aria-label": "Close",
|
|
128
|
-
onClick: n[0] || (n[0] =
|
|
137
|
+
onClick: n[0] || (n[0] = S((b) => o.value = !1, ["prevent", "stop"]))
|
|
129
138
|
}, [
|
|
130
|
-
|
|
139
|
+
w(V(G), {
|
|
131
140
|
class: i(["bbt-close-icon uikit-box-border", e.closeIcon?.classes]),
|
|
132
141
|
width: e.closeIcon?.size || 20,
|
|
133
142
|
height: e.closeIcon?.size || 20
|
|
134
143
|
}, null, 8, ["class", "width", "height"])
|
|
135
|
-
], 2)) :
|
|
136
|
-
d(t.$slots, "header", { closeModal:
|
|
144
|
+
], 2)) : C("", !0),
|
|
145
|
+
d(t.$slots, "header", { closeModal: a }, () => [
|
|
137
146
|
l("span", {
|
|
138
147
|
class: i(["uikit-w-auto uikit-text-18 uikit-font-semibold sm:uikit-text-22", e.titleClasses]),
|
|
139
148
|
innerHTML: e.headerTitle
|
|
140
|
-
}, null, 10,
|
|
149
|
+
}, null, 10, R)
|
|
141
150
|
])
|
|
142
151
|
], 2),
|
|
143
152
|
l("div", {
|
|
144
153
|
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]])
|
|
145
154
|
}, [
|
|
146
|
-
d(t.$slots, "body", { closeModal:
|
|
155
|
+
d(t.$slots, "body", { closeModal: a })
|
|
147
156
|
], 2),
|
|
148
|
-
t.$slots.footer ? (c(),
|
|
157
|
+
t.$slots.footer ? (c(), y("div", {
|
|
149
158
|
key: 0,
|
|
150
159
|
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])
|
|
151
160
|
}, [
|
|
152
|
-
d(t.$slots, "footer", { closeModal:
|
|
153
|
-
], 2)) :
|
|
161
|
+
d(t.$slots, "footer", { closeModal: a })
|
|
162
|
+
], 2)) : C("", !0),
|
|
154
163
|
d(t.$slots, "fixed-bottom")
|
|
155
|
-
], 42,
|
|
164
|
+
], 42, P)
|
|
156
165
|
], 34), [
|
|
157
|
-
[A,
|
|
166
|
+
[A, o.value]
|
|
158
167
|
])
|
|
159
168
|
]),
|
|
160
169
|
_: 3
|