mediacube-ui-v2 0.0.340 → 0.0.341
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.
- package/dist/ai-catalog/index.json +1 -1
- package/dist/assets/components/templates/McModal/index.css +1 -1
- package/dist/components/templates/McModal/McModal.vue2.js +88 -80
- package/dist/types/components/templates/McModal/McModal.vue.d.ts +1 -0
- package/dist/types/components/templates/McModal/index.d.ts +1 -0
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
@charset "UTF-8";.mc-modal{position:relative;--mc-modal-padding: 2rem;--mc-modal-padding-small: .75rem;--mc-modal-header-line-height: 1.5rem;--mc-modal-header-line-height-small: 1.25rem;--mc-modal-button-height: 3rem;--mc-modal-button-height-small: 2.5rem;--mc-modal-max-width: 510px;--mc-modal-min-width: 768px;--mc-modal-state-number: 0;width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden;opacity:var(--mc-modal-state-number)}@media (min-width: 480px){.mc-modal{--modal-scale: calc(var(--mc-modal-state-number) * .1 + .9);padding:12px 0;height:auto;max-height:80%;max-width:var(--mc-modal-max-width);min-width:var(--mc-modal-min-width)}}.mc-modal__overlay{position:absolute;inset:0;background-color:#20242780;display:flex;justify-content:flex-start}.mc-modal__overlay--hidden{background:transparent}.mc-modal__wrapper{position:absolute;inset:0;z-index:1;overflow:hidden;display:flex;justify-content:center;align-items:center}.mc-modal__btn-close,.mc-modal__btn-back{transition:.15s all;box-sizing:border-box;display:block;margin:0;padding:0;white-space:nowrap;vertical-align:middle;user-select:none;text-align:center;text-decoration:none;text-transform:none;border-radius:0;border:none;background-color:transparent;background-image:none;cursor:pointer;outline:0;font-size:0;line-height:0;font-family:inherit;-webkit-appearance:none;-webkit-text-fill-color:currentColor}.mc-modal__btn-close:focus,.mc-modal__btn-back:focus{outline:0}.mc-modal__btn-close,.mc-modal__btn-back{color:#8f99a3}.mc-modal__btn-close:hover,.mc-modal__btn-close:focus,.mc-modal__btn-back:hover,.mc-modal__btn-back:focus{color:#202427}.mc-modal__btn-close:active,.mc-modal__btn-back:active{color:#202427!important}.mc-modal__btn-close{position:absolute;top:1.5rem;inset-inline-end:1.5rem;padding:0!important}@media (min-width: 480px){.mc-modal__btn-close{position:absolute;top:1.5rem;inset-inline-end:1.5rem}}.mc-modal__btn-back{position:absolute;top:1.5rem;inset-inline-start:1.5rem}@media (min-width: 480px){.mc-modal__btn-back{position:absolute;top:1.5rem;inset-inline-start:1.5rem}}.mc-modal__icon-close{height:1.5rem;width:1.5rem;min-height:1.5rem;min-width:1.5rem;max-height:1.5rem;max-width:1.5rem;transition:color .15s}.mc-modal.overlay-fade-enter-active .mc-modal__inner,.mc-modal.overlay-fade-leave-active .mc-modal__inner{transition:all .15s;transform:translateZ(0)}.mc-modal.overlay-fade-enter .mc-modal__inner,.mc-modal.overlay-fade-leave-active .mc-modal__inner{transform:translate3d(0,-20px,0)}.mc-modal.mc-modal--secondary .mc-modal__inner{border-radius:2rem;box-shadow:0 15px 30px #20008c28;padding:2rem}.mc-modal.mc-modal--secondary .mc-modal__btn-close,.mc-modal.mc-modal--secondary .mc-modal__btn-back{top:27px}.mc-modal.mc-modal--secondary .mc-modal__btn-close{inset-inline-end:2rem}.mc-modal.mc-modal--secondary .mc-modal__btn-back{inset-inline-start:2rem}.mc-modal.mc-modal--secondary .mc-modal__header{padding-bottom:9px;border-bottom:2px solid #EDF0F3;margin-bottom:var(--mc-modal-padding)}.mc-modal.mc-modal--secondary .mc-modal__control{display:flex;justify-content:space-between;align-items:center}.mc-modal.mc-modal--secondary .mc-modal__control .mc-button{border-radius:.75rem}.mc-modal__header{flex-shrink:0;transition
|
|
1
|
+
@charset "UTF-8";.mc-modal{position:relative;--mc-modal-padding: 2rem;--mc-modal-padding-small: .75rem;--mc-modal-header-line-height: 1.5rem;--mc-modal-header-line-height-small: 1.25rem;--mc-modal-button-height: 3rem;--mc-modal-button-height-small: 2.5rem;--mc-modal-max-width: 510px;--mc-modal-min-width: 768px;--mc-modal-state-number: 0;width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden;opacity:var(--mc-modal-state-number)}@media (min-width: 480px){.mc-modal{--modal-scale: calc(var(--mc-modal-state-number) * .1 + .9);padding:12px 0;height:auto;max-height:80%;max-width:var(--mc-modal-max-width);min-width:var(--mc-modal-min-width)}}.mc-modal__overlay{position:absolute;inset:0;background-color:#20242780;display:flex;justify-content:flex-start}.mc-modal__overlay--hidden{background:transparent}.mc-modal__wrapper{position:absolute;inset:0;z-index:1;overflow:hidden;display:flex;justify-content:center;align-items:center}.mc-modal__btn-close,.mc-modal__btn-back{transition:.15s all;box-sizing:border-box;display:block;margin:0;padding:0;white-space:nowrap;vertical-align:middle;user-select:none;text-align:center;text-decoration:none;text-transform:none;border-radius:0;border:none;background-color:transparent;background-image:none;cursor:pointer;outline:0;font-size:0;line-height:0;font-family:inherit;-webkit-appearance:none;-webkit-text-fill-color:currentColor}.mc-modal__btn-close:focus,.mc-modal__btn-back:focus{outline:0}.mc-modal__btn-close,.mc-modal__btn-back{color:#8f99a3}.mc-modal__btn-close:hover,.mc-modal__btn-close:focus,.mc-modal__btn-back:hover,.mc-modal__btn-back:focus{color:#202427}.mc-modal__btn-close:active,.mc-modal__btn-back:active{color:#202427!important}.mc-modal__btn-close{position:absolute;top:1.5rem;inset-inline-end:1.5rem;padding:0!important}@media (min-width: 480px){.mc-modal__btn-close{position:absolute;top:1.5rem;inset-inline-end:1.5rem}}.mc-modal__btn-back{position:absolute;top:1.5rem;inset-inline-start:1.5rem}@media (min-width: 480px){.mc-modal__btn-back{position:absolute;top:1.5rem;inset-inline-start:1.5rem}}.mc-modal__icon-close{height:1.5rem;width:1.5rem;min-height:1.5rem;min-width:1.5rem;max-height:1.5rem;max-width:1.5rem;transition:color .15s}.mc-modal.overlay-fade-enter-active .mc-modal__inner,.mc-modal.overlay-fade-leave-active .mc-modal__inner{transition:all .15s;transform:translateZ(0)}.mc-modal.overlay-fade-enter .mc-modal__inner,.mc-modal.overlay-fade-leave-active .mc-modal__inner{transform:translate3d(0,-20px,0)}.mc-modal.mc-modal--secondary .mc-modal__inner{border-radius:2rem;box-shadow:0 15px 30px #20008c28;padding:2rem}.mc-modal.mc-modal--secondary .mc-modal__btn-close,.mc-modal.mc-modal--secondary .mc-modal__btn-back{top:27px}.mc-modal.mc-modal--secondary .mc-modal__btn-close{inset-inline-end:2rem}.mc-modal.mc-modal--secondary .mc-modal__btn-back{inset-inline-start:2rem}.mc-modal.mc-modal--secondary .mc-modal__header{padding-bottom:9px;border-bottom:2px solid #EDF0F3;margin-bottom:var(--mc-modal-padding)}.mc-modal.mc-modal--secondary .mc-modal__control{display:flex;justify-content:space-between;align-items:center}.mc-modal.mc-modal--secondary .mc-modal__control .mc-button{border-radius:.75rem}.mc-modal__header{flex-shrink:0;transition:padding-block .15s,border-color .15s;padding:var(--mc-modal-padding) 1rem 1.75rem;border-color:#edf0f3}@media (min-width: 480px){.mc-modal__header{padding:1.75rem}.mc-modal__header .mc-title{line-height:var(--mc-modal-header-line-height)}}.mc-modal__header:has(.mc-modal__title:empty){display:none}.mc-modal__header:has(.mc-modal__title:empty)+.mc-modal__body{padding-top:2rem}.mc-modal__title{margin-top:0;margin-bottom:0;color:#212121;font-family:Inter,sans-serif;overflow-x:hidden;text-overflow:ellipsis}.mc-modal__body{padding:.25rem 1rem 1rem;flex-grow:1;min-height:0;overflow-x:hidden}.mc-modal__body>*:only-child{min-height:100%}@media (min-width: 480px){.mc-modal__body{padding:.25rem 2rem 1rem;overflow:visible}}.mc-modal__inner{position:relative;box-shadow:0 4px 12px #00000029;background-color:#fff;display:flex;flex-direction:column;overflow:hidden;height:100%!important}.mc-modal__inner>*:first-child{padding-top:var(--mc-modal-padding)}.mc-modal__inner>*:last-child{padding-bottom:var(--mc-modal-padding)}@media (min-width: 480px){.mc-modal__inner--with-title .mc-modal__btn-close{position:absolute;top:var(--mc-modal-padding);inset-inline-end:2rem}}@media (min-width: 480px){.mc-modal__inner--with-title .mc-modal__btn-back{position:absolute;top:var(--mc-modal-padding);inset-inline-start:2rem}}@media (min-width: 480px){.mc-modal__inner{overflow:visible;-ms-overflow-style:none;scrollbar-width:none;border-radius:.5rem;margin:0 .75rem}.mc-modal__inner::-webkit-scrollbar{display:none}}.mc-modal--scrollable{overflow:hidden!important}.mc-modal--scrollable .mc-modal__body{overflow-y:auto;overflow-x:hidden}.mc-modal--scrollable .mc-modal__inner{overflow-x:hidden}@media (min-width: 480px){.mc-modal--scrollable .mc-modal__inner{max-height:80vh}}.mc-modal--header-align-center .mc-modal__header{padding-inline:2.5rem;text-align:center}@media (min-width: 480px){.mc-modal--header-align-center .mc-modal__header{padding-inline:3.5rem}}.mc-modal--header-align-left .mc-modal__header{padding-bottom:.75rem}@media (min-width: 480px){.mc-modal--small-indents .mc-modal__control{padding-block:var(--mc-modal-padding-small)!important}.mc-modal--small-indents .mc-modal__control .mc-button{height:var(--mc-modal-button-height-small)}.mc-modal--small-indents .mc-modal__header{padding-block:var(--mc-modal-padding-small)!important}.mc-modal--small-indents .mc-modal__header .mc-title{font-weight:600;font-size:1rem;line-height:var(--mc-modal-header-line-height-small);align-items:center}.mc-modal--small-indents .mc-modal__body{padding-bottom:.25rem}}.mc-modal--small-indents .mc-modal__inner--with-title .mc-modal__btn-back,.mc-modal--small-indents .mc-modal__inner--with-title .mc-modal__btn-close{top:var(--mc-modal-padding-small)!important}.mc-modal--scrolled-top .mc-modal__header{border-bottom:1px solid #EDF0F3}.mc-modal--scrolled-bottom .mc-modal__control:not(:empty){border-top:1px solid #EDF0F3}.mc-modal--top-padding .mc-modal__inner:before{content:"";height:2rem;min-height:2rem}.mc-modal__control{flex-shrink:0;display:flex;justify-content:center;padding:1rem 1rem 2rem;transition:.15s all}@media (min-width: 480px){.mc-modal__control{padding:1rem 1.5rem 2rem}}.mc-modal__control .mc-button{width:100%}@media (min-width: 480px){.mc-modal__control .mc-button{min-width:100px;height:var(--mc-modal-button-height);transition:.15s all;width:unset}}.mc-modal__control:empty{position:relative;padding:1.75rem 0 0}.mc-modal__control:not(:empty){border-color:#edf0f3}.mc-modal:has(.mc-modal__control:empty) .mc-modal__body{padding-bottom:.25rem}@media (min-width: 480px){.mc-modal--variation-info .mc-modal__header{padding:1.5rem 1.5rem .75rem}}@media (min-width: 480px){.mc-modal--variation-info .mc-modal__btn-close{top:1.5rem}}@media (min-width: 480px){.mc-modal--variation-info .mc-modal__inner>*:first-child{padding-top:1.5rem}}@media (min-width: 480px){.mc-modal--variation-info .mc-modal__inner>*:last-child{padding-bottom:1.5rem}}.mc-modal--variation-info .mc-modal__body{padding-bottom:.25rem}@media (min-width: 480px){.mc-modal--variation-info .mc-modal__body{padding-inline:1.5rem}}.mc-modal--variation-info .mc-modal__control{padding-top:1.25rem}@media (min-width: 480px){.mc-modal--variation-info .mc-modal__control{padding-top:.75rem}}html[dir=rtl] .mc-modal__btn-back{transform:rotate(180deg)}
|
|
@@ -1,19 +1,19 @@
|
|
|
1
|
-
import { defineComponent as
|
|
1
|
+
import { defineComponent as ie, defineAsyncComponent as de, useSlots as ce, ref as m, reactive as me, computed as w, watch as L, openBlock as i, createElementBlock as d, withModifiers as B, createCommentVNode as c, createElementVNode as h, normalizeStyle as ue, normalizeClass as $, renderSlot as C, createVNode as A, unref as N } from "vue";
|
|
2
2
|
import { LineHeights as p } from "../../../types/styles/LineHeights.js";
|
|
3
3
|
import { Sizes as f } from "../../../types/styles/Sizes.js";
|
|
4
4
|
import { Spaces as _ } from "../../../types/styles/Spaces.js";
|
|
5
|
-
import { useTransition as
|
|
6
|
-
const
|
|
5
|
+
import { useTransition as he, TransitionPresets as pe, useEventListener as fe } from "@vueuse/core";
|
|
6
|
+
const _e = {
|
|
7
7
|
key: 0,
|
|
8
8
|
class: "mc-modal__wrapper"
|
|
9
|
-
},
|
|
9
|
+
}, ge = {
|
|
10
10
|
key: 0,
|
|
11
11
|
class: "mc-modal__header"
|
|
12
|
-
},
|
|
12
|
+
}, be = {
|
|
13
13
|
key: 1,
|
|
14
14
|
class: "mc-modal__control",
|
|
15
15
|
id: "mcModalFooter"
|
|
16
|
-
},
|
|
16
|
+
}, ve = 24, V = 2, Ve = /* @__PURE__ */ ie({
|
|
17
17
|
__name: "McModal",
|
|
18
18
|
props: {
|
|
19
19
|
modelValue: {
|
|
@@ -119,11 +119,11 @@ const ce = {
|
|
|
119
119
|
}
|
|
120
120
|
},
|
|
121
121
|
emits: ["before-open", "before-close", "opened", "closed", "back", "update:modelValue"],
|
|
122
|
-
setup(g, { emit:
|
|
123
|
-
const
|
|
122
|
+
setup(g, { emit: O }) {
|
|
123
|
+
const M = de(() => import("../../elements/McSvgIcon/McSvgIcon.vue.js")), P = ce(), r = O, l = g, b = m(0), I = he(b, {
|
|
124
124
|
duration: l.duration || 300,
|
|
125
|
-
transition:
|
|
126
|
-
}),
|
|
125
|
+
transition: pe.easeOutQuart
|
|
126
|
+
}), a = m(null), v = m(null), T = m(null), u = m(null), e = me({
|
|
127
127
|
scrolled_top: !1,
|
|
128
128
|
scrolled_bottom: !1,
|
|
129
129
|
small_indents: !1,
|
|
@@ -148,8 +148,8 @@ const ce = {
|
|
|
148
148
|
}
|
|
149
149
|
}
|
|
150
150
|
});
|
|
151
|
-
|
|
152
|
-
const
|
|
151
|
+
w(() => !!P.title);
|
|
152
|
+
const D = w(() => ({
|
|
153
153
|
"mc-modal--arrow-visible": l.arrowVisible,
|
|
154
154
|
"mc-modal--scrolled-top": e.scrolled_top,
|
|
155
155
|
"mc-modal--scrolled-bottom": e.scrolled_bottom,
|
|
@@ -158,7 +158,7 @@ const ce = {
|
|
|
158
158
|
"mc-modal--small-indents": e.small_indents,
|
|
159
159
|
[`mc-modal--variation-${l.variation}`]: !!l.variation,
|
|
160
160
|
[`mc-modal--header-align-${l.headerAlign}`]: (l.closeVisible || l.arrowVisible) && !!l.headerAlign
|
|
161
|
-
})),
|
|
161
|
+
})), R = w(() => ({
|
|
162
162
|
"--mc-modal-padding": _[e.indent.regular],
|
|
163
163
|
"--mc-modal-padding-small": _[e.indent.small],
|
|
164
164
|
"--mc-modal-header-line-height": p[e.header.title.line_height.regular],
|
|
@@ -167,44 +167,48 @@ const ce = {
|
|
|
167
167
|
"--mc-modal-button-height-small": f[e.footer.button.small],
|
|
168
168
|
"--mc-modal-max-width": `${l.maxWidth + 24}px`,
|
|
169
169
|
"--mc-modal-min-width": `${l.minWidth - 24}px`,
|
|
170
|
-
"--mc-modal-state-number":
|
|
171
|
-
})),
|
|
170
|
+
"--mc-modal-state-number": I.value
|
|
171
|
+
})), W = () => {
|
|
172
172
|
e.scrolled_top = !1, e.scrolled_bottom = !1, e.small_indents = !1, e.can_shorten_modal = !1;
|
|
173
|
-
},
|
|
173
|
+
}, x = () => T.value?.parentElement ?? null, q = (t, o) => {
|
|
174
174
|
const n = getComputedStyle(t).getPropertyValue(o).trim();
|
|
175
175
|
if (!n) return 0;
|
|
176
|
-
const
|
|
177
|
-
return n.endsWith("rem") ?
|
|
178
|
-
},
|
|
179
|
-
const t = parseFloat(getComputedStyle(document.documentElement).fontSize), o = (
|
|
180
|
-
return
|
|
181
|
-
},
|
|
182
|
-
if (!
|
|
183
|
-
const { scrollTop: t, scrollHeight: o, clientHeight: n } =
|
|
184
|
-
e.scrolled_top = t >
|
|
185
|
-
},
|
|
186
|
-
|
|
176
|
+
const s = parseFloat(n);
|
|
177
|
+
return n.endsWith("rem") ? s * parseFloat(getComputedStyle(document.documentElement).fontSize) : s;
|
|
178
|
+
}, X = () => {
|
|
179
|
+
const t = parseFloat(getComputedStyle(document.documentElement).fontSize), o = (re) => parseFloat(re) * t, n = +e.modal_params["--mc-modal-padding"] || o(_[e.indent.regular]), s = +e.modal_params["--mc-modal-padding-small"] || o(_[e.indent.small]), z = +e.modal_params["--mc-modal-header-line-height"] || o(p[e.header.title.line_height.regular]), E = +e.modal_params["--mc-modal-header-line-height-small"] || o(p[e.header.title.line_height.small]), te = +e.modal_params["--mc-modal-button-height"] || o(f[e.footer.button.regular]), le = +e.modal_params["--mc-modal-button-height-small"] || o(f[e.footer.button.small]), oe = (n - s) * 3 + s, F = e.small_indents ? E : z, ae = v.value && F ? Math.max(1, Math.round(v.value.scrollHeight / F)) : 1, ne = (z - E) * ae, se = te - le;
|
|
180
|
+
return oe + ne + se;
|
|
181
|
+
}, y = () => {
|
|
182
|
+
if (!a.value) return;
|
|
183
|
+
const { scrollTop: t, scrollHeight: o, clientHeight: n } = a.value;
|
|
184
|
+
e.scrolled_top = t > V, e.scrolled_bottom = t + n < o - V;
|
|
185
|
+
}, G = () => {
|
|
186
|
+
if (!a.value) return;
|
|
187
|
+
const { scrollTop: t } = a.value;
|
|
188
|
+
e.small_indents ? e.small_indents = t > 0 : e.small_indents = t > V && e.can_shorten_modal;
|
|
189
|
+
}, Q = () => {
|
|
190
|
+
S(), y(), G();
|
|
187
191
|
};
|
|
188
|
-
|
|
189
|
-
l.separators &&
|
|
192
|
+
fe(a, "scroll", () => {
|
|
193
|
+
l.separators && Q();
|
|
190
194
|
}, { passive: !0 });
|
|
191
|
-
const
|
|
192
|
-
|
|
193
|
-
},
|
|
194
|
-
!
|
|
195
|
-
},
|
|
195
|
+
const H = () => {
|
|
196
|
+
u.value?.disconnect(), u.value = null;
|
|
197
|
+
}, Y = () => {
|
|
198
|
+
!a.value || !l.separators || (H(), u.value = new ResizeObserver(Z), u.value.observe(a.value));
|
|
199
|
+
}, j = () => {
|
|
196
200
|
requestAnimationFrame(() => {
|
|
197
201
|
requestAnimationFrame(() => {
|
|
198
|
-
|
|
202
|
+
J();
|
|
199
203
|
});
|
|
200
204
|
});
|
|
201
|
-
},
|
|
202
|
-
|
|
203
|
-
},
|
|
205
|
+
}, J = () => {
|
|
206
|
+
a.value && (U(), a.value.scrollTop = 0, S(), y());
|
|
207
|
+
}, K = (t) => {
|
|
204
208
|
r("back", t);
|
|
205
|
-
},
|
|
209
|
+
}, U = () => {
|
|
206
210
|
try {
|
|
207
|
-
const t =
|
|
211
|
+
const t = x();
|
|
208
212
|
if (!t) return;
|
|
209
213
|
[
|
|
210
214
|
"--mc-modal-padding",
|
|
@@ -214,24 +218,24 @@ const ce = {
|
|
|
214
218
|
"--mc-modal-button-height",
|
|
215
219
|
"--mc-modal-button-height-small"
|
|
216
220
|
].forEach((n) => {
|
|
217
|
-
const
|
|
218
|
-
|
|
221
|
+
const s = q(t, n);
|
|
222
|
+
s && (e.modal_params[n] = s);
|
|
219
223
|
});
|
|
220
224
|
} catch (t) {
|
|
221
225
|
console.error(t);
|
|
222
226
|
}
|
|
223
|
-
}, y = () => {
|
|
224
|
-
if (!s.value) return;
|
|
225
|
-
const { scrollTop: t, scrollHeight: o, clientHeight: n } = s.value, a = L();
|
|
226
|
-
(!e.small_indents || t === 0) && (e.can_shorten_modal = o - n > a);
|
|
227
|
-
}, G = () => {
|
|
228
|
-
y(), v();
|
|
229
227
|
}, S = () => {
|
|
228
|
+
if (!a.value) return;
|
|
229
|
+
const { scrollTop: t, scrollHeight: o, clientHeight: n } = a.value, s = X();
|
|
230
|
+
(!e.small_indents || t === 0) && (e.can_shorten_modal = o - n - s > ve);
|
|
231
|
+
}, Z = () => {
|
|
232
|
+
S(), y();
|
|
233
|
+
}, k = () => {
|
|
230
234
|
r("before-close"), r("closed"), r("update:modelValue", !1);
|
|
231
|
-
},
|
|
232
|
-
l.clickBackdropToClose &&
|
|
235
|
+
}, ee = () => {
|
|
236
|
+
l.clickBackdropToClose && k();
|
|
233
237
|
};
|
|
234
|
-
return
|
|
238
|
+
return L(
|
|
235
239
|
() => l.modelValue,
|
|
236
240
|
(t, o) => {
|
|
237
241
|
if (t !== o) {
|
|
@@ -239,75 +243,79 @@ const ce = {
|
|
|
239
243
|
b.value = 1, r("before-open");
|
|
240
244
|
return;
|
|
241
245
|
}
|
|
242
|
-
|
|
246
|
+
H(), W(), b.value = 0, k();
|
|
243
247
|
}
|
|
244
248
|
},
|
|
245
249
|
{ immediate: !0 }
|
|
246
|
-
),
|
|
247
|
-
|
|
250
|
+
), L(
|
|
251
|
+
a,
|
|
248
252
|
(t, o) => {
|
|
249
|
-
!l.modelValue || !t || !l.separators || (
|
|
253
|
+
!l.modelValue || !t || !l.separators || (Y(), o || (j(), r("opened")));
|
|
250
254
|
},
|
|
251
255
|
{ flush: "post" }
|
|
252
|
-
), (t, o) => l.modelValue ? (i(), d("div",
|
|
256
|
+
), (t, o) => l.modelValue ? (i(), d("div", _e, [
|
|
253
257
|
l.showOverlay ? (i(), d("div", {
|
|
254
258
|
key: 0,
|
|
255
259
|
class: "mc-modal__overlay",
|
|
256
|
-
onClick:
|
|
257
|
-
})) :
|
|
260
|
+
onClick: B(ee, ["stop"])
|
|
261
|
+
})) : c("", !0),
|
|
258
262
|
h("div", {
|
|
259
|
-
class:
|
|
260
|
-
style:
|
|
263
|
+
class: $(["mc-modal", D.value]),
|
|
264
|
+
style: ue(R.value)
|
|
261
265
|
}, [
|
|
262
266
|
h("div", {
|
|
263
267
|
ref_key: "modalInner",
|
|
264
|
-
ref:
|
|
265
|
-
class:
|
|
268
|
+
ref: T,
|
|
269
|
+
class: $(["mc-modal__inner", { "mc-modal__inner--with-title": t.$slots.title }])
|
|
266
270
|
}, [
|
|
267
|
-
t.$slots.title ? (i(), d("div",
|
|
268
|
-
h("div",
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
271
|
+
t.$slots.title ? (i(), d("div", ge, [
|
|
272
|
+
h("div", {
|
|
273
|
+
ref_key: "mcModalTitle",
|
|
274
|
+
ref: v,
|
|
275
|
+
class: "mc-modal__title"
|
|
276
|
+
}, [
|
|
277
|
+
C(t.$slots, "title")
|
|
278
|
+
], 512)
|
|
279
|
+
])) : c("", !0),
|
|
272
280
|
h("div", {
|
|
273
281
|
ref_key: "mcModalBody",
|
|
274
|
-
ref:
|
|
282
|
+
ref: a,
|
|
275
283
|
class: "mc-modal__body"
|
|
276
284
|
}, [
|
|
277
|
-
|
|
285
|
+
C(t.$slots, "default")
|
|
278
286
|
], 512),
|
|
279
|
-
t.$slots.footer ? (i(), d("div",
|
|
280
|
-
|
|
281
|
-
])) :
|
|
287
|
+
t.$slots.footer ? (i(), d("div", be, [
|
|
288
|
+
C(t.$slots, "footer")
|
|
289
|
+
])) : c("", !0),
|
|
282
290
|
g.arrowVisible ? (i(), d("button", {
|
|
283
291
|
key: 2,
|
|
284
292
|
type: "button",
|
|
285
293
|
class: "mc-modal__btn-back",
|
|
286
|
-
onClick:
|
|
294
|
+
onClick: B(K, ["prevent"])
|
|
287
295
|
}, [
|
|
288
|
-
|
|
296
|
+
A(N(M), {
|
|
289
297
|
name: "arrow_leftward",
|
|
290
298
|
class: "mc-modal__icon-back"
|
|
291
299
|
})
|
|
292
|
-
])) :
|
|
300
|
+
])) : c("", !0),
|
|
293
301
|
g.closeVisible ? (i(), d("button", {
|
|
294
302
|
key: 3,
|
|
295
303
|
type: "button",
|
|
296
304
|
class: "mc-modal__btn-close",
|
|
297
|
-
onClick:
|
|
305
|
+
onClick: B(k, ["prevent"])
|
|
298
306
|
}, [
|
|
299
|
-
|
|
307
|
+
A(N(M), {
|
|
300
308
|
class: "mc-modal__icon-close",
|
|
301
309
|
width: "24",
|
|
302
310
|
height: "24",
|
|
303
311
|
name: "close"
|
|
304
312
|
})
|
|
305
|
-
])) :
|
|
313
|
+
])) : c("", !0)
|
|
306
314
|
], 2)
|
|
307
315
|
], 6)
|
|
308
|
-
])) :
|
|
316
|
+
])) : c("", !0);
|
|
309
317
|
}
|
|
310
318
|
});
|
|
311
319
|
export {
|
|
312
|
-
|
|
320
|
+
Ve as default
|
|
313
321
|
};
|
|
@@ -236,6 +236,7 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<im
|
|
|
236
236
|
topPadding: boolean;
|
|
237
237
|
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {
|
|
238
238
|
modalInner: HTMLDivElement;
|
|
239
|
+
mcModalTitle: HTMLDivElement;
|
|
239
240
|
mcModalBody: HTMLDivElement;
|
|
240
241
|
}, any>, {
|
|
241
242
|
title?(_: {}): any;
|
|
@@ -90,6 +90,7 @@ declare const McModal: {
|
|
|
90
90
|
topPadding: boolean;
|
|
91
91
|
}, true, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {
|
|
92
92
|
modalInner: HTMLDivElement;
|
|
93
|
+
mcModalTitle: HTMLDivElement;
|
|
93
94
|
mcModalBody: HTMLDivElement;
|
|
94
95
|
}, any, import('vue').ComponentProvideOptions, {
|
|
95
96
|
P: {};
|