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