@wikicasa-dev/components 2.4.1-alpha.3 → 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
|
|
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
2
|
import { CloseIcon as A } from "@wikicasa-dev/svg-icons";
|
|
3
|
-
const
|
|
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" },
|
|
@@ -25,7 +25,7 @@ const P = ["id", "data-cy"], R = ["innerHTML"], q = /* @__PURE__ */ T({
|
|
|
25
25
|
},
|
|
26
26
|
emits: ["closed", "opened", "dialogClick"],
|
|
27
27
|
setup(e, { emit: x }) {
|
|
28
|
-
const r = x,
|
|
28
|
+
const r = x, i = v(!1), k = h("backdrop"), s = h("modalDialog"), u = v(!1), m = ({ key: t }) => {
|
|
29
29
|
t === "Escape" && a();
|
|
30
30
|
}, p = () => {
|
|
31
31
|
document?.body.addEventListener("keydown", m);
|
|
@@ -48,7 +48,7 @@ const P = ["id", "data-cy"], R = ["innerHTML"], q = /* @__PURE__ */ T({
|
|
|
48
48
|
"uikit-overflow-hidden"
|
|
49
49
|
), r("closed");
|
|
50
50
|
}, a = () => {
|
|
51
|
-
|
|
51
|
+
i.value = !1;
|
|
52
52
|
}, E = (t) => {
|
|
53
53
|
s.value && s.value.contains(t.target) && (u.value = !0);
|
|
54
54
|
}, I = (t) => {
|
|
@@ -62,23 +62,26 @@ const P = ["id", "data-cy"], R = ["innerHTML"], q = /* @__PURE__ */ T({
|
|
|
62
62
|
a();
|
|
63
63
|
}
|
|
64
64
|
};
|
|
65
|
-
|
|
65
|
+
T(() => {
|
|
66
66
|
f(), document?.body.classList.remove(
|
|
67
67
|
"sm:uikit-pr-15px",
|
|
68
68
|
"sm:uikit-mr-0",
|
|
69
69
|
"uikit-overflow-hidden"
|
|
70
70
|
);
|
|
71
|
-
})
|
|
71
|
+
});
|
|
72
|
+
const z = (t) => {
|
|
73
|
+
s.value === t.target && t.stopPropagation();
|
|
74
|
+
};
|
|
75
|
+
return $(
|
|
72
76
|
() => e.showModal,
|
|
73
77
|
async (t) => {
|
|
74
|
-
|
|
78
|
+
t !== i.value && (console.log("DEBUG:showModal => watcher", {
|
|
79
|
+
cur: t,
|
|
80
|
+
showValue: i.value
|
|
81
|
+
}), i.value = t);
|
|
75
82
|
},
|
|
76
83
|
{ immediate: !0 }
|
|
77
|
-
)
|
|
78
|
-
const z = (t) => {
|
|
79
|
-
s.value === t.target && t.stopPropagation();
|
|
80
|
-
};
|
|
81
|
-
return (t, n) => (c(), H(O, { to: "body" }, [
|
|
84
|
+
), (t, n) => (c(), H(O, { to: "body" }, [
|
|
82
85
|
y(F, {
|
|
83
86
|
appear: e.appear,
|
|
84
87
|
name: "modal-transition",
|
|
@@ -87,15 +90,15 @@ const P = ["id", "data-cy"], R = ["innerHTML"], q = /* @__PURE__ */ T({
|
|
|
87
90
|
onAfterEnter: B,
|
|
88
91
|
onAfterLeave: M
|
|
89
92
|
}, {
|
|
90
|
-
default:
|
|
91
|
-
|
|
93
|
+
default: U(() => [
|
|
94
|
+
V(l("div", {
|
|
92
95
|
ref: "backdrop",
|
|
93
|
-
class:
|
|
96
|
+
class: o(["bbt-backdrop uikit-fixed uikit-left-0 uikit-top-0 uikit-z-50 uikit-h-full uikit-w-full", [
|
|
94
97
|
e.customBackdropClasses,
|
|
95
98
|
{
|
|
96
|
-
"uikit-bg-w-secondary/70":
|
|
99
|
+
"uikit-bg-w-secondary/70": i.value
|
|
97
100
|
},
|
|
98
|
-
{ "uikit-bg-transparent": !
|
|
101
|
+
{ "uikit-bg-transparent": !i.value },
|
|
99
102
|
{ "sm:uikit-pt-[30px]": !e.centered }
|
|
100
103
|
]]),
|
|
101
104
|
onClick: L,
|
|
@@ -106,7 +109,7 @@ const P = ["id", "data-cy"], R = ["innerHTML"], q = /* @__PURE__ */ T({
|
|
|
106
109
|
id: e.id,
|
|
107
110
|
ref: "modalDialog",
|
|
108
111
|
"data-cy": e.dataCy,
|
|
109
|
-
class:
|
|
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", [
|
|
110
113
|
e.customModalDialogClasses,
|
|
111
114
|
{
|
|
112
115
|
"centered sm:uikit-absolute sm:uikit-top-1/2 sm:-uikit-translate-y-1/2": e.centered
|
|
@@ -120,45 +123,45 @@ const P = ["id", "data-cy"], R = ["innerHTML"], q = /* @__PURE__ */ T({
|
|
|
120
123
|
onFocusin: z
|
|
121
124
|
}, [
|
|
122
125
|
l("div", {
|
|
123
|
-
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]])
|
|
124
127
|
}, [
|
|
125
|
-
e.withCloseIcon ? (c(),
|
|
128
|
+
e.withCloseIcon ? (c(), w("button", {
|
|
126
129
|
key: 0,
|
|
127
130
|
id: "close-icon-btn",
|
|
128
131
|
"data-cy": "bbt-default-close-icon-btn",
|
|
129
|
-
class:
|
|
132
|
+
class: o(["uikit-absolute uikit-right-15px uikit-top-15px uikit-z-10 uikit-bg-transparent uikit-p-5px", e.closeIconBtnClasses]),
|
|
130
133
|
type: "button",
|
|
131
134
|
"aria-label": "Close",
|
|
132
|
-
onClick: n[0] || (n[0] =
|
|
135
|
+
onClick: n[0] || (n[0] = K((b) => i.value = !1, ["prevent", "stop"]))
|
|
133
136
|
}, [
|
|
134
|
-
y(
|
|
135
|
-
class:
|
|
137
|
+
y(N(A), {
|
|
138
|
+
class: o(["bbt-close-icon uikit-box-border", e.closeIcon?.classes]),
|
|
136
139
|
width: e.closeIcon?.size || 20,
|
|
137
140
|
height: e.closeIcon?.size || 20
|
|
138
141
|
}, null, 8, ["class", "width", "height"])
|
|
139
|
-
], 2)) :
|
|
142
|
+
], 2)) : C("", !0),
|
|
140
143
|
d(t.$slots, "header", { closeModal: a }, () => [
|
|
141
144
|
l("span", {
|
|
142
|
-
class:
|
|
145
|
+
class: o(["uikit-w-auto uikit-text-18 uikit-font-semibold sm:uikit-text-22", e.titleClasses]),
|
|
143
146
|
innerHTML: e.headerTitle
|
|
144
|
-
}, null, 10,
|
|
147
|
+
}, null, 10, P)
|
|
145
148
|
])
|
|
146
149
|
], 2),
|
|
147
150
|
l("div", {
|
|
148
|
-
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]])
|
|
149
152
|
}, [
|
|
150
153
|
d(t.$slots, "body", { closeModal: a })
|
|
151
154
|
], 2),
|
|
152
|
-
t.$slots.footer ? (c(),
|
|
155
|
+
t.$slots.footer ? (c(), w("div", {
|
|
153
156
|
key: 0,
|
|
154
|
-
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])
|
|
155
158
|
}, [
|
|
156
159
|
d(t.$slots, "footer", { closeModal: a })
|
|
157
|
-
], 2)) :
|
|
160
|
+
], 2)) : C("", !0),
|
|
158
161
|
d(t.$slots, "fixed-bottom")
|
|
159
|
-
], 42,
|
|
162
|
+
], 42, G)
|
|
160
163
|
], 34), [
|
|
161
|
-
[
|
|
164
|
+
[S, i.value]
|
|
162
165
|
])
|
|
163
166
|
]),
|
|
164
167
|
_: 3
|