mediacube-ui-v2 0.0.341 → 0.0.343
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/elements/McFieldSelect/McFieldSelect.vue2.js +109 -103
- package/dist/components/templates/McModal/McModal.vue2.js +106 -118
- package/dist/types/components/templates/McModal/McModal.vue.d.ts +0 -1
- package/dist/types/components/templates/McModal/index.d.ts +0 -1
- 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-
|
|
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-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:.15s all;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{transition:.15s all;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{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,29 +1,29 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
import
|
|
3
|
-
import { Directions as
|
|
4
|
-
import { useFieldErrors as
|
|
5
|
-
import { SelectGroupKeys as w, SelectListDirections as
|
|
6
|
-
import { PreviewSizes as
|
|
7
|
-
import { TitleVariations as
|
|
8
|
-
import { TooltipPositions as
|
|
1
|
+
import { defineComponent as He, defineAsyncComponent as q, useSlots as je, inject as Ie, ref as p, computed as i, onBeforeUnmount as Ye, watch as K, openBlock as s, createElementBlock as O, normalizeStyle as Ge, normalizeClass as ue, createElementVNode as T, renderSlot as $, createBlock as u, unref as a, withCtx as r, createTextVNode as E, toDisplayString as f, createCommentVNode as _, createVNode as S, mergeProps as Ue, createSlots as J, nextTick as de } from "vue";
|
|
2
|
+
import Xe from "vue-multiselect";
|
|
3
|
+
import { Directions as me } from "../../../enums/ui/Directions2.js";
|
|
4
|
+
import { useFieldErrors as Ke } from "../../../composables/useFieldErrors2.js";
|
|
5
|
+
import { SelectGroupKeys as w, SelectListDirections as Je } from "../../../enums/Select2.js";
|
|
6
|
+
import { PreviewSizes as pe } from "../../../enums/Preview2.js";
|
|
7
|
+
import { TitleVariations as fe } from "../../../enums/Title2.js";
|
|
8
|
+
import { TooltipPositions as Qe } from "../../../enums/Tooltip2.js";
|
|
9
9
|
import { Weights as Q } from "../../../enums/ui/Weights2.js";
|
|
10
|
-
import { ChipSize as
|
|
11
|
-
import { useTheme as
|
|
12
|
-
import { useThrottleFn as
|
|
10
|
+
import { ChipSize as Ze } from "../../../enums/Chip2.js";
|
|
11
|
+
import { useTheme as et } from "../../../composables/useTheme2.js";
|
|
12
|
+
import { useThrottleFn as tt } from "@vueuse/core";
|
|
13
13
|
import h from "../McTitle/McTitle.vue2.js";
|
|
14
14
|
import '../../../assets/components/elements/McSvgIcon/index.css';import '../../../assets/components/elements/McTitle/index.css';/* empty css */
|
|
15
|
-
import
|
|
15
|
+
import H from "../McSvgIcon/McSvgIcon.vue2.js";
|
|
16
16
|
/* empty css */
|
|
17
|
-
const
|
|
17
|
+
const lt = ["dir"], ot = { class: "mc-field-select__header" }, nt = { class: "mc-field-select__main" }, at = {
|
|
18
18
|
key: 1,
|
|
19
19
|
class: "mc-field-select__single-label"
|
|
20
|
-
},
|
|
20
|
+
}, rt = {
|
|
21
21
|
key: 0,
|
|
22
22
|
class: "mc-field-select__prepend"
|
|
23
|
-
},
|
|
23
|
+
}, it = {
|
|
24
24
|
key: 0,
|
|
25
25
|
class: "mc-field-select__footer"
|
|
26
|
-
},
|
|
26
|
+
}, st = { key: 1 }, xt = /* @__PURE__ */ He({
|
|
27
27
|
__name: "McFieldSelect",
|
|
28
28
|
props: {
|
|
29
29
|
/**
|
|
@@ -250,7 +250,7 @@ const tt = ["dir"], lt = { class: "mc-field-select__header" }, ot = { class: "mc
|
|
|
250
250
|
},
|
|
251
251
|
dir: {
|
|
252
252
|
type: String,
|
|
253
|
-
default:
|
|
253
|
+
default: me.Ltr
|
|
254
254
|
},
|
|
255
255
|
/**
|
|
256
256
|
* На какое после смотреть что бы считать его заголовком строки
|
|
@@ -268,11 +268,11 @@ const tt = ["dir"], lt = { class: "mc-field-select__header" }, ot = { class: "mc
|
|
|
268
268
|
}
|
|
269
269
|
},
|
|
270
270
|
emits: ["original-input", "tag", "search-change", "update:modelValue", "handle-open", "handle-close"],
|
|
271
|
-
setup(k, { emit:
|
|
272
|
-
const
|
|
271
|
+
setup(k, { emit: ve }) {
|
|
272
|
+
const j = q(() => import("../McAvatar/McAvatar.vue.js")), ge = q(() => import("../McTooltip/McTooltip.vue.js")), Z = q(() => import("../../patterns/McPreview/McPreview.vue.js")), he = q(() => import("../McChip/McChip.vue.js")), C = ve, ye = je(), ee = Ie("dsOptions", {}), e = k, d = et("select"), y = Ke(e.errors), L = p(null), x = p(null), I = p(null), A = p([]), g = p(null), z = p(), F = p(!1), N = p(null), Y = p(null), P = p(null), B = i(() => e.options.some(
|
|
273
273
|
(t) => Object.prototype.hasOwnProperty.call(t, w.Label) && Object.prototype.hasOwnProperty.call(t, w.Values) && //@ts-ignore
|
|
274
274
|
Array.isArray(t[w.Values])
|
|
275
|
-
)), te = i(() => !!e.title), le = i(() => e.avatar || e.icon), V = i(() => e.multiple),
|
|
275
|
+
)), te = i(() => !!e.title), le = i(() => e.avatar || e.icon), V = i(() => e.multiple), be = i(() => V.value ? !!(e.modelValue || [])?.length : !!e.modelValue), _e = i(() => e.noResultsText ?? ee.componentTranslations?.select?.noResultsText), Se = i(() => e.emptyList ?? ee.componentTranslations?.select?.emptyList), we = i(() => ({
|
|
276
276
|
label: e.titleField,
|
|
277
277
|
trackBy: e.valueField,
|
|
278
278
|
loading: e.loading,
|
|
@@ -297,21 +297,21 @@ const tt = ["dir"], lt = { class: "mc-field-select__header" }, ot = { class: "mc
|
|
|
297
297
|
})), R = i(() => {
|
|
298
298
|
if (B.value) return e.options;
|
|
299
299
|
const t = /* @__PURE__ */ new Set();
|
|
300
|
-
return [...e.options,
|
|
300
|
+
return [...e.options, ...A.value].filter((l) => {
|
|
301
301
|
const n = l[e.valueField];
|
|
302
302
|
return t.has(String(n)) ? !1 : (t.add(String(n)), !0);
|
|
303
303
|
});
|
|
304
|
-
}),
|
|
304
|
+
}), oe = i(() => B.value ? R.value.map((t) => t[w.Values]).flat() : R.value), ke = i(() => new Map(oe.value.map((t) => [String(t[e.valueField]), t]))), Ce = i(() => e.dir === me.Rtl), xe = i(() => ({
|
|
305
305
|
"mc-field-select": !0,
|
|
306
306
|
"mc-field-select--error": !!y.errorText.value,
|
|
307
307
|
"mc-field-select--disabled": e.disabled,
|
|
308
308
|
[`mc-field-select--bg-${e.backgroundColor}`]: !!e.backgroundColor,
|
|
309
|
-
"mc-field-select--is-empty-options-list":
|
|
310
|
-
"mc-field-select--with-preview": e.optionWithPreview &&
|
|
309
|
+
"mc-field-select--is-empty-options-list": Te.value || e.loading,
|
|
310
|
+
"mc-field-select--with-preview": e.optionWithPreview && be.value,
|
|
311
311
|
"mc-field-select--max-height": !!e.maxHeight,
|
|
312
|
-
"mc-field-select--rtl":
|
|
313
|
-
"mc-field-select--hide-arrow": !!
|
|
314
|
-
})),
|
|
312
|
+
"mc-field-select--rtl": Ce.value,
|
|
313
|
+
"mc-field-select--hide-arrow": !!ye.arrow
|
|
314
|
+
})), Be = i(() => `${e.title}${e.required ? " *" : ""}`), Ve = i(() => {
|
|
315
315
|
const t = ["gray", "dark-gray", "black"], o = ["white"];
|
|
316
316
|
let l = "gray", n = e.backgroundColor, c = e.backgroundColor, m = "black";
|
|
317
317
|
return (!e.backgroundColor || o.includes(e.backgroundColor)) && (n = d.component.color), t.includes(e.backgroundColor) && (m = "white", l = "white", n = "black"), e.disabled && !e.backgroundColor && (c = "hover-gray"), {
|
|
@@ -323,11 +323,11 @@ const tt = ["dir"], lt = { class: "mc-field-select__header" }, ot = { class: "mc
|
|
|
323
323
|
"--mc-field-select-label-color": d.colors[m],
|
|
324
324
|
"--mc-field-select-placeholder-color": d.colors[l]
|
|
325
325
|
};
|
|
326
|
-
}),
|
|
326
|
+
}), Te = i(() => e.hideSelected && !L.value || !e.options.length ? e.multiple ? B.value ? !1 : Array.isArray(e.modelValue) && e.options.length === e.modelValue.length : !!e.modelValue && R.value?.length === 1 && !L.value : e.options.length === 0 ? !e.options.length : !1), M = i({
|
|
327
327
|
get() {
|
|
328
328
|
let t = V.value ? e.modelValue || [] : [e.modelValue].filter(Boolean);
|
|
329
329
|
t = t.map((l) => {
|
|
330
|
-
const n =
|
|
330
|
+
const n = ke.value.get(String(l));
|
|
331
331
|
return {
|
|
332
332
|
[e.titleField]: n?.[e.titleField] || l,
|
|
333
333
|
[e.valueField]: n?.[e.valueField] || l,
|
|
@@ -346,23 +346,23 @@ const tt = ["dir"], lt = { class: "mc-field-select__header" }, ot = { class: "mc
|
|
|
346
346
|
const [l] = o;
|
|
347
347
|
$e(t), Oe(V.value ? o : l);
|
|
348
348
|
}
|
|
349
|
-
}),
|
|
350
|
-
const o = /* @__PURE__ */ new Set(), l = B.value ? t.flatMap((c) => c[w.Values] ?? []) : t, n = [
|
|
351
|
-
|
|
349
|
+
}), ne = (t = e.options) => {
|
|
350
|
+
const o = /* @__PURE__ */ new Set(), l = B.value ? t.flatMap((c) => c[w.Values] ?? []) : t, n = [...A.value, ...l];
|
|
351
|
+
A.value = n.filter((c) => {
|
|
352
352
|
const m = c[e.valueField];
|
|
353
353
|
if (o.has(String(m))) return !1;
|
|
354
354
|
const b = e.modelValue?.constructor === Array ? e.modelValue.map((U) => String(U)).includes(String(c[e.valueField])) : String(c[e.valueField]) === String(e.modelValue);
|
|
355
355
|
return b && o.add(String(m)), b;
|
|
356
356
|
});
|
|
357
|
-
},
|
|
357
|
+
}, ae = (t) => {
|
|
358
358
|
if (!t || t.nodeType !== Node.ELEMENT_NODE || t === document.documentElement)
|
|
359
359
|
return document.documentElement;
|
|
360
360
|
const { overflow: o, overflowY: l } = getComputedStyle(t);
|
|
361
361
|
if (["auto", "scroll"].some((m) => [o, l].includes(m)))
|
|
362
362
|
return t;
|
|
363
363
|
const c = t.parentNode;
|
|
364
|
-
return !c || c.nodeType !== Node.ELEMENT_NODE ? document.documentElement :
|
|
365
|
-
},
|
|
364
|
+
return !c || c.nodeType !== Node.ELEMENT_NODE ? document.documentElement : ae(c);
|
|
365
|
+
}, Ee = (t) => {
|
|
366
366
|
if (!t) return null;
|
|
367
367
|
let o = t.parentElement;
|
|
368
368
|
for (; o && o !== document.body; ) {
|
|
@@ -371,7 +371,7 @@ const tt = ["dir"], lt = { class: "mc-field-select__header" }, ot = { class: "mc
|
|
|
371
371
|
o = o.parentElement;
|
|
372
372
|
}
|
|
373
373
|
return null;
|
|
374
|
-
},
|
|
374
|
+
}, re = i(() => ["iPhone", "iPad"].some((t) => navigator?.platform?.includes(t)) && window.visualViewport?.offsetTop || 0), D = tt(() => {
|
|
375
375
|
if (!g.value || !x.value) return;
|
|
376
376
|
const {
|
|
377
377
|
top: t = 0,
|
|
@@ -383,29 +383,29 @@ const tt = ["dir"], lt = { class: "mc-field-select__header" }, ot = { class: "mc
|
|
|
383
383
|
if (!b) return;
|
|
384
384
|
const U = t - m.top, Re = o - m.bottom;
|
|
385
385
|
if (U >= -l && Re < l) {
|
|
386
|
-
const v = b.$refs.list,
|
|
387
|
-
v.style.width = `${n}px`, v.style.position = "fixed", v.style.left = `${c -
|
|
388
|
-
const
|
|
386
|
+
const v = b.$refs.list, W = Ee(v), Me = W ? W.left : 0, ce = W ? W.top : 0;
|
|
387
|
+
v.style.width = `${n}px`, v.style.position = "fixed", v.style.left = `${c - Me}px`;
|
|
388
|
+
const De = I.value?.querySelector(".mc-field-select__header")?.offsetHeight, We = 8;
|
|
389
389
|
let X = e.openDirection;
|
|
390
|
-
switch (X ===
|
|
390
|
+
switch (X === Je.Auto && (X = b?.isAbove ? "top" : "bottom"), X) {
|
|
391
391
|
case "top": {
|
|
392
|
-
const
|
|
393
|
-
v.style.top = `${
|
|
392
|
+
const qe = t + (te.value ? De + We : 0) + re.value - v.getBoundingClientRect().height - 8;
|
|
393
|
+
v.style.top = `${qe - ce}px`, v.style.bottom = "auto";
|
|
394
394
|
break;
|
|
395
395
|
}
|
|
396
396
|
case "bottom":
|
|
397
|
-
v.style.bottom = "auto", v.style.top = `${t +
|
|
397
|
+
v.style.bottom = "auto", v.style.top = `${t + re.value + l - ce}px`;
|
|
398
398
|
break;
|
|
399
399
|
}
|
|
400
400
|
} else if (!/Android/i.test(navigator.userAgent))
|
|
401
401
|
return b.deactivate();
|
|
402
|
-
}, 16),
|
|
403
|
-
G(), g.value =
|
|
404
|
-
},
|
|
402
|
+
}, 16), Le = () => {
|
|
403
|
+
G(), g.value = ae(x.value.$el) || document.documentElement, g.value.addEventListener("scroll", D), z.value?.disconnect(), z.value = new ResizeObserver(D), z.value.observe(g.value);
|
|
404
|
+
}, ie = (t) => {
|
|
405
405
|
const o = { [e.titleField]: t, [e.valueField]: t };
|
|
406
|
-
|
|
406
|
+
A.value.push(o), M.value = V.value ? [...M.value, o] : o, C("tag", t);
|
|
407
407
|
}, Fe = (t) => {
|
|
408
|
-
|
|
408
|
+
L.value = t, C("search-change", t);
|
|
409
409
|
}, Oe = (t) => {
|
|
410
410
|
y.toggleErrorVisible(), C("update:modelValue", t);
|
|
411
411
|
}, $e = (t) => {
|
|
@@ -414,35 +414,40 @@ const tt = ["dir"], lt = { class: "mc-field-select__header" }, ot = { class: "mc
|
|
|
414
414
|
const t = x.value;
|
|
415
415
|
if (!t?.$refs?.list) return;
|
|
416
416
|
const o = t.$refs.list;
|
|
417
|
-
if (o.parentNode?.nodeName === "BODY" ||
|
|
418
|
-
|
|
417
|
+
if (o.parentNode?.nodeName === "BODY" || P.value?.contains(o)) return;
|
|
418
|
+
N.value = o.parentElement, Y.value = o.nextSibling;
|
|
419
419
|
const l = document.createElement("div");
|
|
420
420
|
l.className = "mc-field-select mc-field-select--list-portal";
|
|
421
421
|
const n = document.createElement("div");
|
|
422
|
-
n.className = "multiselect", n.appendChild(o), l.appendChild(n), document.body.appendChild(l),
|
|
423
|
-
},
|
|
424
|
-
if (!
|
|
425
|
-
const o = x.value?.$refs?.list, l =
|
|
426
|
-
o && l?.contains(o) &&
|
|
422
|
+
n.className = "multiselect", n.appendChild(o), l.appendChild(n), document.body.appendChild(l), P.value = l, F.value = !0, de(D);
|
|
423
|
+
}, se = () => {
|
|
424
|
+
if (!F.value || !N.value) return;
|
|
425
|
+
const o = x.value?.$refs?.list, l = P.value;
|
|
426
|
+
o && l?.contains(o) && N.value.insertBefore(o, Y.value), l?.remove(), F.value = !1, N.value = null, Y.value = null, P.value = null;
|
|
427
427
|
}, ze = () => {
|
|
428
|
-
C("handle-open"), e.renderAbsoluteList && (
|
|
428
|
+
C("handle-open"), e.renderAbsoluteList && (Le(), de(Ae));
|
|
429
429
|
}, G = () => {
|
|
430
|
-
|
|
430
|
+
z.value?.disconnect(), g.value && (g.value.removeEventListener("scroll", D), g.value = null);
|
|
431
431
|
}, Ne = () => {
|
|
432
|
-
|
|
432
|
+
e.taggable && Pe(), F.value && se(), G(), C("handle-close");
|
|
433
|
+
}, Pe = () => {
|
|
434
|
+
const t = L.value?.trim();
|
|
435
|
+
!t || oe.value.some(
|
|
436
|
+
(l) => String(l[e.titleField]).toLowerCase() === t.toLowerCase()
|
|
437
|
+
) || (ie(t), L.value = "");
|
|
433
438
|
};
|
|
434
|
-
return
|
|
435
|
-
|
|
439
|
+
return Ye(() => {
|
|
440
|
+
F.value && se(), G();
|
|
436
441
|
}), K(
|
|
437
442
|
() => e.options,
|
|
438
443
|
(t) => {
|
|
439
|
-
|
|
444
|
+
ne(t);
|
|
440
445
|
},
|
|
441
446
|
{ immediate: !0 }
|
|
442
447
|
), K(
|
|
443
448
|
() => e.modelValue,
|
|
444
449
|
() => {
|
|
445
|
-
|
|
450
|
+
ne();
|
|
446
451
|
},
|
|
447
452
|
{ immediate: !0, deep: !0 }
|
|
448
453
|
), K(
|
|
@@ -450,35 +455,35 @@ const tt = ["dir"], lt = { class: "mc-field-select__header" }, ot = { class: "mc
|
|
|
450
455
|
(t) => {
|
|
451
456
|
y.setError(t);
|
|
452
457
|
}
|
|
453
|
-
), (t, o) => (s(),
|
|
458
|
+
), (t, o) => (s(), O("div", {
|
|
454
459
|
ref_key: "field_select_wrapper_ref",
|
|
455
460
|
ref: I,
|
|
456
461
|
dir: k.dir,
|
|
457
|
-
class:
|
|
458
|
-
style:
|
|
462
|
+
class: ue(xe.value),
|
|
463
|
+
style: Ge(Ve.value)
|
|
459
464
|
}, [
|
|
460
|
-
T("div",
|
|
461
|
-
|
|
465
|
+
T("div", ot, [
|
|
466
|
+
$(t.$slots, "header", {}, () => [
|
|
462
467
|
te.value ? (s(), u(h, {
|
|
463
468
|
key: 0,
|
|
464
469
|
"max-width": "100%",
|
|
465
470
|
weight: a(Q).Medium
|
|
466
471
|
}, {
|
|
467
472
|
default: r(() => [
|
|
468
|
-
E(f(
|
|
473
|
+
E(f(Be.value), 1)
|
|
469
474
|
]),
|
|
470
475
|
_: 1
|
|
471
476
|
}, 8, ["weight"])) : _("", !0)
|
|
472
477
|
])
|
|
473
478
|
]),
|
|
474
|
-
T("div",
|
|
475
|
-
S(a(
|
|
479
|
+
T("div", nt, [
|
|
480
|
+
S(a(Xe), Ue({
|
|
476
481
|
ref_key: "field_select_ref",
|
|
477
482
|
ref: x,
|
|
478
|
-
modelValue:
|
|
479
|
-
"onUpdate:modelValue": o[0] || (o[0] = (l) =>
|
|
480
|
-
},
|
|
481
|
-
onTag:
|
|
483
|
+
modelValue: M.value,
|
|
484
|
+
"onUpdate:modelValue": o[0] || (o[0] = (l) => M.value = l)
|
|
485
|
+
}, we.value, {
|
|
486
|
+
onTag: ie,
|
|
482
487
|
onSearchChange: Fe,
|
|
483
488
|
onOpen: ze,
|
|
484
489
|
onClose: Ne
|
|
@@ -487,7 +492,7 @@ const tt = ["dir"], lt = { class: "mc-field-select__header" }, ot = { class: "mc
|
|
|
487
492
|
e.optionWithPreview ? (s(), u(a(Z), {
|
|
488
493
|
key: 0,
|
|
489
494
|
class: "option__desc",
|
|
490
|
-
size: a(
|
|
495
|
+
size: a(pe).L
|
|
491
496
|
}, J({
|
|
492
497
|
top: r(() => [
|
|
493
498
|
S(h, {
|
|
@@ -496,19 +501,19 @@ const tt = ["dir"], lt = { class: "mc-field-select__header" }, ot = { class: "mc
|
|
|
496
501
|
}, null, 8, ["weight", "html-data"])
|
|
497
502
|
]),
|
|
498
503
|
right: r(() => [
|
|
499
|
-
|
|
504
|
+
$(t.$slots, "arrow")
|
|
500
505
|
]),
|
|
501
506
|
_: 2
|
|
502
507
|
}, [
|
|
503
508
|
l.icon || l.avatar ? {
|
|
504
509
|
name: "left",
|
|
505
510
|
fn: r(() => [
|
|
506
|
-
l.icon ? (s(), u(
|
|
511
|
+
l.icon ? (s(), u(H, {
|
|
507
512
|
key: 0,
|
|
508
513
|
name: l.icon,
|
|
509
514
|
color: l.iconColor || "main",
|
|
510
515
|
size: "400"
|
|
511
|
-
}, null, 8, ["name", "color"])) : (s(), u(a(
|
|
516
|
+
}, null, 8, ["name", "color"])) : (s(), u(a(j), {
|
|
512
517
|
key: 1,
|
|
513
518
|
src: l.avatar,
|
|
514
519
|
size: "400",
|
|
@@ -532,35 +537,35 @@ const tt = ["dir"], lt = { class: "mc-field-select__header" }, ot = { class: "mc
|
|
|
532
537
|
]),
|
|
533
538
|
key: "1"
|
|
534
539
|
} : void 0
|
|
535
|
-
]), 1032, ["size"])) : (s(),
|
|
536
|
-
le.value ? (s(),
|
|
537
|
-
k.avatar ? (s(), u(a(
|
|
540
|
+
]), 1032, ["size"])) : (s(), O("div", at, [
|
|
541
|
+
le.value ? (s(), O("div", rt, [
|
|
542
|
+
k.avatar ? (s(), u(a(j), {
|
|
538
543
|
key: 0,
|
|
539
544
|
src: k.avatar
|
|
540
|
-
}, null, 8, ["src"])) : (s(), u(
|
|
545
|
+
}, null, 8, ["src"])) : (s(), u(H, {
|
|
541
546
|
key: 1,
|
|
542
547
|
color: l.iconColor || "main",
|
|
543
548
|
name: e.icon
|
|
544
549
|
}, null, 8, ["color", "name"]))
|
|
545
550
|
])) : _("", !0),
|
|
546
551
|
T("div", {
|
|
547
|
-
class:
|
|
552
|
+
class: ue(["mc-field-select__label-text", le.value ? "mc-field-select__label-text--indent-left" : ""])
|
|
548
553
|
}, f(l ? l[e.titleField] : k.placeholder), 3)
|
|
549
554
|
]))
|
|
550
555
|
]),
|
|
551
556
|
noResult: r(() => [
|
|
552
|
-
|
|
553
|
-
T("span", null, f(
|
|
557
|
+
$(t.$slots, "noResult", {}, () => [
|
|
558
|
+
T("span", null, f(_e.value), 1)
|
|
554
559
|
])
|
|
555
560
|
]),
|
|
556
561
|
noOptions: r(() => [
|
|
557
|
-
|
|
558
|
-
T("span", null, f(
|
|
562
|
+
$(t.$slots, "noOptions", {}, () => [
|
|
563
|
+
T("span", null, f(Se.value), 1)
|
|
559
564
|
])
|
|
560
565
|
]),
|
|
561
566
|
tag: r((l) => [
|
|
562
|
-
S(a(
|
|
563
|
-
size: a(
|
|
567
|
+
S(a(he), {
|
|
568
|
+
size: a(Ze).Xs,
|
|
564
569
|
class: "multiselect__tag",
|
|
565
570
|
variation: `${a(d).component.selected}-invert`,
|
|
566
571
|
"text-color": "black",
|
|
@@ -568,7 +573,7 @@ const tt = ["dir"], lt = { class: "mc-field-select__header" }, ot = { class: "mc
|
|
|
568
573
|
onClose: (n) => l.remove(l.option)
|
|
569
574
|
}, {
|
|
570
575
|
button: r(() => [
|
|
571
|
-
S(
|
|
576
|
+
S(H, {
|
|
572
577
|
size: "250",
|
|
573
578
|
name: "cancel"
|
|
574
579
|
})
|
|
@@ -596,7 +601,7 @@ const tt = ["dir"], lt = { class: "mc-field-select__header" }, ot = { class: "mc
|
|
|
596
601
|
e.optionWithPreview ? (s(), u(a(Z), {
|
|
597
602
|
key: 1,
|
|
598
603
|
class: "option__desc",
|
|
599
|
-
size: a(
|
|
604
|
+
size: a(pe).L
|
|
600
605
|
}, J({
|
|
601
606
|
top: r(() => [
|
|
602
607
|
S(h, {
|
|
@@ -609,12 +614,12 @@ const tt = ["dir"], lt = { class: "mc-field-select__header" }, ot = { class: "mc
|
|
|
609
614
|
l.icon || l.avatar ? {
|
|
610
615
|
name: "left",
|
|
611
616
|
fn: r(() => [
|
|
612
|
-
l.icon ? (s(), u(
|
|
617
|
+
l.icon ? (s(), u(H, {
|
|
613
618
|
key: 0,
|
|
614
619
|
name: l.icon,
|
|
615
620
|
color: l.iconColor || "main",
|
|
616
621
|
size: "400"
|
|
617
|
-
}, null, 8, ["name", "color"])) : (s(), u(a(
|
|
622
|
+
}, null, 8, ["name", "color"])) : (s(), u(a(j), {
|
|
618
623
|
key: 1,
|
|
619
624
|
src: l.avatar,
|
|
620
625
|
size: "400",
|
|
@@ -635,12 +640,12 @@ const tt = ["dir"], lt = { class: "mc-field-select__header" }, ot = { class: "mc
|
|
|
635
640
|
]),
|
|
636
641
|
key: "1"
|
|
637
642
|
} : void 0
|
|
638
|
-
]), 1032, ["size"])) : (s(), u(a(
|
|
643
|
+
]), 1032, ["size"])) : (s(), u(a(ge), {
|
|
639
644
|
key: 2,
|
|
640
645
|
class: "mc-field-select__options-tooltip-target",
|
|
641
646
|
"max-width": "m",
|
|
642
647
|
color: "black",
|
|
643
|
-
placement: a(
|
|
648
|
+
placement: a(Qe).Top,
|
|
644
649
|
content: l[e.titleField]
|
|
645
650
|
}, {
|
|
646
651
|
default: r(() => [
|
|
@@ -653,23 +658,24 @@ const tt = ["dir"], lt = { class: "mc-field-select__header" }, ot = { class: "mc
|
|
|
653
658
|
} : void 0
|
|
654
659
|
]), 1040, ["modelValue"])
|
|
655
660
|
]),
|
|
656
|
-
a(y).errorText.value || e.helpText || t.$slots.footer ? (s(),
|
|
661
|
+
a(y).errorText.value || e.helpText || t.$slots.footer ? (s(), O("div", it, [
|
|
657
662
|
a(y).errorText.value ? (s(), u(h, {
|
|
658
663
|
key: 0,
|
|
659
664
|
"tag-name": "div",
|
|
660
665
|
color: "red",
|
|
661
|
-
variation: a(
|
|
666
|
+
variation: a(fe).Overline,
|
|
662
667
|
"max-width": "100%",
|
|
663
668
|
"html-data": a(y).errorText.value
|
|
664
669
|
}, null, 8, ["variation", "html-data"])) : _("", !0),
|
|
665
|
-
a(y).errorText.value ? (s(),
|
|
666
|
-
|
|
670
|
+
a(y).errorText.value ? (s(), O("br", st)) : _("", !0),
|
|
671
|
+
$(t.$slots, "footer", {}, () => [
|
|
667
672
|
e.helpText ? (s(), u(h, {
|
|
668
673
|
key: 0,
|
|
669
674
|
"tag-name": "div",
|
|
670
|
-
variation: a(
|
|
675
|
+
variation: a(fe).Overline,
|
|
671
676
|
color: "gray",
|
|
672
|
-
"max-width": "100%"
|
|
677
|
+
"max-width": "100%",
|
|
678
|
+
"pre-line": ""
|
|
673
679
|
}, {
|
|
674
680
|
default: r(() => [
|
|
675
681
|
E(f(e.helpText), 1)
|
|
@@ -678,9 +684,9 @@ const tt = ["dir"], lt = { class: "mc-field-select__header" }, ot = { class: "mc
|
|
|
678
684
|
}, 8, ["variation"])) : _("", !0)
|
|
679
685
|
])
|
|
680
686
|
])) : _("", !0)
|
|
681
|
-
], 14,
|
|
687
|
+
], 14, lt));
|
|
682
688
|
}
|
|
683
689
|
});
|
|
684
690
|
export {
|
|
685
|
-
|
|
691
|
+
xt as default
|
|
686
692
|
};
|
|
@@ -1,19 +1,19 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
import { LineHeights as
|
|
1
|
+
import { defineComponent as Z, defineAsyncComponent as ee, useSlots as te, ref as u, reactive as oe, computed as S, watch as z, openBlock as d, createElementBlock as c, withModifiers as k, createCommentVNode as i, createElementVNode as p, normalizeStyle as le, normalizeClass as M, renderSlot as w, createVNode as T, unref as $ } from "vue";
|
|
2
|
+
import { LineHeights as ae } from "../../../types/styles/LineHeights.js";
|
|
3
3
|
import { Sizes as f } from "../../../types/styles/Sizes.js";
|
|
4
|
-
import { Spaces as
|
|
5
|
-
import { useTransition as
|
|
6
|
-
const
|
|
4
|
+
import { Spaces as h } from "../../../types/styles/Spaces.js";
|
|
5
|
+
import { useTransition as ne, TransitionPresets as se, useEventListener as re } from "@vueuse/core";
|
|
6
|
+
const de = {
|
|
7
7
|
key: 0,
|
|
8
8
|
class: "mc-modal__wrapper"
|
|
9
|
-
},
|
|
9
|
+
}, ce = {
|
|
10
10
|
key: 0,
|
|
11
11
|
class: "mc-modal__header"
|
|
12
|
-
},
|
|
12
|
+
}, ie = { class: "mc-modal__title" }, me = {
|
|
13
13
|
key: 1,
|
|
14
14
|
class: "mc-modal__control",
|
|
15
15
|
id: "mcModalFooter"
|
|
16
|
-
},
|
|
16
|
+
}, ge = /* @__PURE__ */ Z({
|
|
17
17
|
__name: "McModal",
|
|
18
18
|
props: {
|
|
19
19
|
modelValue: {
|
|
@@ -119,11 +119,11 @@ const _e = {
|
|
|
119
119
|
}
|
|
120
120
|
},
|
|
121
121
|
emits: ["before-open", "before-close", "opened", "closed", "back", "update:modelValue"],
|
|
122
|
-
setup(
|
|
123
|
-
const
|
|
124
|
-
duration:
|
|
125
|
-
transition:
|
|
126
|
-
}),
|
|
122
|
+
setup(_, { emit: E }) {
|
|
123
|
+
const B = ee(() => import("../../elements/McSvgIcon/McSvgIcon.vue.js")), H = te(), r = E, o = _, b = u(0), F = ne(b, {
|
|
124
|
+
duration: o.duration || 300,
|
|
125
|
+
transition: se.easeOutQuart
|
|
126
|
+
}), s = u(null), V = u(null), m = u(null), e = oe({
|
|
127
127
|
scrolled_top: !1,
|
|
128
128
|
scrolled_bottom: !1,
|
|
129
129
|
small_indents: !1,
|
|
@@ -142,180 +142,168 @@ const _e = {
|
|
|
142
142
|
header: {
|
|
143
143
|
title: {
|
|
144
144
|
line_height: {
|
|
145
|
-
regular: "300"
|
|
146
|
-
small: "250"
|
|
145
|
+
regular: "300"
|
|
147
146
|
}
|
|
148
147
|
}
|
|
149
148
|
}
|
|
150
149
|
});
|
|
151
|
-
|
|
152
|
-
const
|
|
153
|
-
"mc-modal--arrow-visible":
|
|
150
|
+
S(() => !!H.title);
|
|
151
|
+
const O = S(() => ({
|
|
152
|
+
"mc-modal--arrow-visible": o.arrowVisible,
|
|
154
153
|
"mc-modal--scrolled-top": e.scrolled_top,
|
|
155
154
|
"mc-modal--scrolled-bottom": e.scrolled_bottom,
|
|
156
|
-
"mc-modal--scrollable":
|
|
157
|
-
"mc-modal--top-padding":
|
|
155
|
+
"mc-modal--scrollable": o.scrollableContent,
|
|
156
|
+
"mc-modal--top-padding": o.topPadding,
|
|
158
157
|
"mc-modal--small-indents": e.small_indents,
|
|
159
|
-
[`mc-modal--variation-${
|
|
160
|
-
[`mc-modal--header-align-${
|
|
161
|
-
})),
|
|
162
|
-
"--mc-modal-padding":
|
|
163
|
-
"--mc-modal-padding-small":
|
|
164
|
-
"--mc-modal-header-line-height":
|
|
165
|
-
"--mc-modal-header-line-height-small": p[e.header.title.line_height.small],
|
|
158
|
+
[`mc-modal--variation-${o.variation}`]: !!o.variation,
|
|
159
|
+
[`mc-modal--header-align-${o.headerAlign}`]: (o.closeVisible || o.arrowVisible) && !!o.headerAlign
|
|
160
|
+
})), P = S(() => ({
|
|
161
|
+
"--mc-modal-padding": h[e.indent.regular],
|
|
162
|
+
"--mc-modal-padding-small": h[e.indent.small],
|
|
163
|
+
"--mc-modal-header-line-height": ae[e.header.title.line_height.regular],
|
|
166
164
|
"--mc-modal-button-height": f[e.footer.button.regular],
|
|
167
165
|
"--mc-modal-button-height-small": f[e.footer.button.small],
|
|
168
|
-
"--mc-modal-max-width": `${
|
|
169
|
-
"--mc-modal-min-width": `${
|
|
170
|
-
"--mc-modal-state-number":
|
|
171
|
-
})),
|
|
166
|
+
"--mc-modal-max-width": `${o.maxWidth + 24}px`,
|
|
167
|
+
"--mc-modal-min-width": `${o.minWidth - 24}px`,
|
|
168
|
+
"--mc-modal-state-number": F.value
|
|
169
|
+
})), A = () => {
|
|
172
170
|
e.scrolled_top = !1, e.scrolled_bottom = !1, e.small_indents = !1, e.can_shorten_modal = !1;
|
|
173
|
-
},
|
|
174
|
-
const n = getComputedStyle(t).getPropertyValue(
|
|
171
|
+
}, N = () => V.value?.parentElement ?? null, I = (t, l) => {
|
|
172
|
+
const n = getComputedStyle(t).getPropertyValue(l).trim();
|
|
175
173
|
if (!n) return 0;
|
|
176
|
-
const
|
|
177
|
-
return n.endsWith("rem") ?
|
|
178
|
-
},
|
|
179
|
-
const t = parseFloat(getComputedStyle(document.documentElement).fontSize),
|
|
180
|
-
return
|
|
181
|
-
},
|
|
182
|
-
if (!
|
|
183
|
-
const { scrollTop: t, scrollHeight:
|
|
184
|
-
e.scrolled_top = t >
|
|
185
|
-
},
|
|
186
|
-
|
|
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();
|
|
174
|
+
const a = parseFloat(n);
|
|
175
|
+
return n.endsWith("rem") ? a * parseFloat(getComputedStyle(document.documentElement).fontSize) : a;
|
|
176
|
+
}, W = () => {
|
|
177
|
+
const t = parseFloat(getComputedStyle(document.documentElement).fontSize), l = (Y) => parseFloat(Y) * t, n = +e.modal_params["--mc-modal-padding"] || l(h[e.indent.regular]), a = +e.modal_params["--mc-modal-padding-small"] || l(h[e.indent.small]), J = +e.modal_params["--mc-modal-button-height"] || l(f[e.footer.button.regular]), K = +e.modal_params["--mc-modal-button-height-small"] || l(f[e.footer.button.small]), U = (n - a) * 3 + a, X = J - K;
|
|
178
|
+
return U + X;
|
|
179
|
+
}, g = () => {
|
|
180
|
+
if (!s.value) return;
|
|
181
|
+
const { scrollTop: t, scrollHeight: l, clientHeight: n } = s.value, a = 2;
|
|
182
|
+
e.scrolled_top = t > a, e.small_indents ? e.small_indents = t > 0 : e.small_indents = t > a && e.can_shorten_modal, e.scrolled_bottom = t + n < l - a;
|
|
183
|
+
}, D = () => {
|
|
184
|
+
v(), g();
|
|
191
185
|
};
|
|
192
|
-
|
|
193
|
-
|
|
186
|
+
re(s, "scroll", () => {
|
|
187
|
+
o.separators && D();
|
|
194
188
|
}, { passive: !0 });
|
|
195
|
-
const
|
|
196
|
-
|
|
197
|
-
},
|
|
198
|
-
!
|
|
199
|
-
},
|
|
189
|
+
const C = () => {
|
|
190
|
+
m.value?.disconnect(), m.value = null;
|
|
191
|
+
}, x = () => {
|
|
192
|
+
!s.value || !o.separators || (C(), m.value = new ResizeObserver(j), m.value.observe(s.value));
|
|
193
|
+
}, L = () => {
|
|
200
194
|
requestAnimationFrame(() => {
|
|
201
195
|
requestAnimationFrame(() => {
|
|
202
|
-
|
|
196
|
+
R();
|
|
203
197
|
});
|
|
204
198
|
});
|
|
205
|
-
},
|
|
206
|
-
|
|
207
|
-
},
|
|
199
|
+
}, R = () => {
|
|
200
|
+
s.value && (Q(), s.value.scrollTop = 0, v(), g());
|
|
201
|
+
}, q = (t) => {
|
|
208
202
|
r("back", t);
|
|
209
|
-
},
|
|
203
|
+
}, Q = () => {
|
|
210
204
|
try {
|
|
211
|
-
const t =
|
|
205
|
+
const t = N();
|
|
212
206
|
if (!t) return;
|
|
213
207
|
[
|
|
214
208
|
"--mc-modal-padding",
|
|
215
209
|
"--mc-modal-padding-small",
|
|
216
|
-
"--mc-modal-header-line-height",
|
|
217
|
-
"--mc-modal-header-line-height-small",
|
|
218
210
|
"--mc-modal-button-height",
|
|
219
211
|
"--mc-modal-button-height-small"
|
|
220
212
|
].forEach((n) => {
|
|
221
|
-
const
|
|
222
|
-
|
|
213
|
+
const a = I(t, n);
|
|
214
|
+
a && (e.modal_params[n] = a);
|
|
223
215
|
});
|
|
224
216
|
} catch (t) {
|
|
225
217
|
console.error(t);
|
|
226
218
|
}
|
|
227
|
-
},
|
|
228
|
-
if (!
|
|
229
|
-
const { scrollTop: t, scrollHeight:
|
|
230
|
-
(!e.small_indents || t === 0) && (e.can_shorten_modal =
|
|
231
|
-
},
|
|
232
|
-
|
|
233
|
-
},
|
|
219
|
+
}, v = () => {
|
|
220
|
+
if (!s.value) return;
|
|
221
|
+
const { scrollTop: t, scrollHeight: l, clientHeight: n } = s.value, a = W();
|
|
222
|
+
(!e.small_indents || t === 0) && (e.can_shorten_modal = l - n > a);
|
|
223
|
+
}, j = () => {
|
|
224
|
+
v(), g();
|
|
225
|
+
}, y = () => {
|
|
234
226
|
r("before-close"), r("closed"), r("update:modelValue", !1);
|
|
235
|
-
},
|
|
236
|
-
|
|
227
|
+
}, G = () => {
|
|
228
|
+
o.clickBackdropToClose && y();
|
|
237
229
|
};
|
|
238
|
-
return
|
|
239
|
-
() =>
|
|
240
|
-
(t,
|
|
241
|
-
if (t !==
|
|
230
|
+
return z(
|
|
231
|
+
() => o.modelValue,
|
|
232
|
+
(t, l) => {
|
|
233
|
+
if (t !== l) {
|
|
242
234
|
if (t) {
|
|
243
235
|
b.value = 1, r("before-open");
|
|
244
236
|
return;
|
|
245
237
|
}
|
|
246
|
-
|
|
238
|
+
C(), A(), b.value = 0, y();
|
|
247
239
|
}
|
|
248
240
|
},
|
|
249
241
|
{ immediate: !0 }
|
|
250
|
-
),
|
|
251
|
-
|
|
252
|
-
(t,
|
|
253
|
-
!
|
|
242
|
+
), z(
|
|
243
|
+
s,
|
|
244
|
+
(t, l) => {
|
|
245
|
+
!o.modelValue || !t || !o.separators || (x(), l || (L(), r("opened")));
|
|
254
246
|
},
|
|
255
247
|
{ flush: "post" }
|
|
256
|
-
), (t,
|
|
257
|
-
|
|
248
|
+
), (t, l) => o.modelValue ? (d(), c("div", de, [
|
|
249
|
+
o.showOverlay ? (d(), c("div", {
|
|
258
250
|
key: 0,
|
|
259
251
|
class: "mc-modal__overlay",
|
|
260
|
-
onClick:
|
|
261
|
-
})) :
|
|
262
|
-
|
|
263
|
-
class:
|
|
264
|
-
style:
|
|
252
|
+
onClick: k(G, ["stop"])
|
|
253
|
+
})) : i("", !0),
|
|
254
|
+
p("div", {
|
|
255
|
+
class: M(["mc-modal", O.value]),
|
|
256
|
+
style: le(P.value)
|
|
265
257
|
}, [
|
|
266
|
-
|
|
258
|
+
p("div", {
|
|
267
259
|
ref_key: "modalInner",
|
|
268
|
-
ref:
|
|
269
|
-
class:
|
|
260
|
+
ref: V,
|
|
261
|
+
class: M(["mc-modal__inner", { "mc-modal__inner--with-title": t.$slots.title }])
|
|
270
262
|
}, [
|
|
271
|
-
t.$slots.title ? (
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
C(t.$slots, "title")
|
|
278
|
-
], 512)
|
|
279
|
-
])) : c("", !0),
|
|
280
|
-
h("div", {
|
|
263
|
+
t.$slots.title ? (d(), c("div", ce, [
|
|
264
|
+
p("div", ie, [
|
|
265
|
+
w(t.$slots, "title")
|
|
266
|
+
])
|
|
267
|
+
])) : i("", !0),
|
|
268
|
+
p("div", {
|
|
281
269
|
ref_key: "mcModalBody",
|
|
282
|
-
ref:
|
|
270
|
+
ref: s,
|
|
283
271
|
class: "mc-modal__body"
|
|
284
272
|
}, [
|
|
285
|
-
|
|
273
|
+
w(t.$slots, "default")
|
|
286
274
|
], 512),
|
|
287
|
-
t.$slots.footer ? (
|
|
288
|
-
|
|
289
|
-
])) :
|
|
290
|
-
|
|
275
|
+
t.$slots.footer ? (d(), c("div", me, [
|
|
276
|
+
w(t.$slots, "footer")
|
|
277
|
+
])) : i("", !0),
|
|
278
|
+
_.arrowVisible ? (d(), c("button", {
|
|
291
279
|
key: 2,
|
|
292
280
|
type: "button",
|
|
293
281
|
class: "mc-modal__btn-back",
|
|
294
|
-
onClick:
|
|
282
|
+
onClick: k(q, ["prevent"])
|
|
295
283
|
}, [
|
|
296
|
-
|
|
284
|
+
T($(B), {
|
|
297
285
|
name: "arrow_leftward",
|
|
298
286
|
class: "mc-modal__icon-back"
|
|
299
287
|
})
|
|
300
|
-
])) :
|
|
301
|
-
|
|
288
|
+
])) : i("", !0),
|
|
289
|
+
_.closeVisible ? (d(), c("button", {
|
|
302
290
|
key: 3,
|
|
303
291
|
type: "button",
|
|
304
292
|
class: "mc-modal__btn-close",
|
|
305
|
-
onClick:
|
|
293
|
+
onClick: k(y, ["prevent"])
|
|
306
294
|
}, [
|
|
307
|
-
|
|
295
|
+
T($(B), {
|
|
308
296
|
class: "mc-modal__icon-close",
|
|
309
297
|
width: "24",
|
|
310
298
|
height: "24",
|
|
311
299
|
name: "close"
|
|
312
300
|
})
|
|
313
|
-
])) :
|
|
301
|
+
])) : i("", !0)
|
|
314
302
|
], 2)
|
|
315
303
|
], 6)
|
|
316
|
-
])) :
|
|
304
|
+
])) : i("", !0);
|
|
317
305
|
}
|
|
318
306
|
});
|
|
319
307
|
export {
|
|
320
|
-
|
|
308
|
+
ge as default
|
|
321
309
|
};
|
|
@@ -236,7 +236,6 @@ 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;
|
|
240
239
|
mcModalBody: HTMLDivElement;
|
|
241
240
|
}, any>, {
|
|
242
241
|
title?(_: {}): any;
|
|
@@ -90,7 +90,6 @@ declare const McModal: {
|
|
|
90
90
|
topPadding: boolean;
|
|
91
91
|
}, true, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {
|
|
92
92
|
modalInner: HTMLDivElement;
|
|
93
|
-
mcModalTitle: HTMLDivElement;
|
|
94
93
|
mcModalBody: HTMLDivElement;
|
|
95
94
|
}, any, import('vue').ComponentProvideOptions, {
|
|
96
95
|
P: {};
|