mediacube-ui-v2 0.0.341 → 0.0.342

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
1
  {
2
2
  "catalogSchemaVersion": 2,
3
- "libraryVersion": "0.0.341",
3
+ "libraryVersion": "0.0.342",
4
4
  "packageName": "mediacube-ui-v2",
5
5
  "pathHash": "9b6f3b8016b22ac7",
6
6
  "componentCount": 76,
@@ -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: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
+ @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,19 +1,19 @@
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
- import { LineHeights as p } from "../../../types/styles/LineHeights.js";
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 _ } from "../../../types/styles/Spaces.js";
5
- import { useTransition as he, TransitionPresets as pe, useEventListener as fe } from "@vueuse/core";
6
- const _e = {
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
- }, ge = {
9
+ }, ce = {
10
10
  key: 0,
11
11
  class: "mc-modal__header"
12
- }, be = {
12
+ }, ie = { class: "mc-modal__title" }, me = {
13
13
  key: 1,
14
14
  class: "mc-modal__control",
15
15
  id: "mcModalFooter"
16
- }, ve = 24, V = 2, Ve = /* @__PURE__ */ ie({
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(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
- duration: l.duration || 300,
125
- transition: pe.easeOutQuart
126
- }), a = m(null), v = m(null), T = m(null), u = m(null), e = me({
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
- w(() => !!P.title);
152
- const D = w(() => ({
153
- "mc-modal--arrow-visible": l.arrowVisible,
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": l.scrollableContent,
157
- "mc-modal--top-padding": l.topPadding,
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-${l.variation}`]: !!l.variation,
160
- [`mc-modal--header-align-${l.headerAlign}`]: (l.closeVisible || l.arrowVisible) && !!l.headerAlign
161
- })), R = w(() => ({
162
- "--mc-modal-padding": _[e.indent.regular],
163
- "--mc-modal-padding-small": _[e.indent.small],
164
- "--mc-modal-header-line-height": p[e.header.title.line_height.regular],
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": `${l.maxWidth + 24}px`,
169
- "--mc-modal-min-width": `${l.minWidth - 24}px`,
170
- "--mc-modal-state-number": I.value
171
- })), W = () => {
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
- }, x = () => T.value?.parentElement ?? null, q = (t, o) => {
174
- const n = getComputedStyle(t).getPropertyValue(o).trim();
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 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();
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
- fe(a, "scroll", () => {
193
- l.separators && Q();
186
+ re(s, "scroll", () => {
187
+ o.separators && D();
194
188
  }, { passive: !0 });
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 = () => {
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
- J();
196
+ R();
203
197
  });
204
198
  });
205
- }, J = () => {
206
- a.value && (U(), a.value.scrollTop = 0, S(), y());
207
- }, K = (t) => {
199
+ }, R = () => {
200
+ s.value && (Q(), s.value.scrollTop = 0, v(), g());
201
+ }, q = (t) => {
208
202
  r("back", t);
209
- }, U = () => {
203
+ }, Q = () => {
210
204
  try {
211
- const t = x();
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 s = q(t, n);
222
- s && (e.modal_params[n] = s);
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
- }, 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 = () => {
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
- }, ee = () => {
236
- l.clickBackdropToClose && k();
227
+ }, G = () => {
228
+ o.clickBackdropToClose && y();
237
229
  };
238
- return L(
239
- () => l.modelValue,
240
- (t, o) => {
241
- if (t !== o) {
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
- H(), W(), b.value = 0, k();
238
+ C(), A(), b.value = 0, y();
247
239
  }
248
240
  },
249
241
  { immediate: !0 }
250
- ), L(
251
- a,
252
- (t, o) => {
253
- !l.modelValue || !t || !l.separators || (Y(), o || (j(), r("opened")));
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, o) => l.modelValue ? (i(), d("div", _e, [
257
- l.showOverlay ? (i(), d("div", {
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: B(ee, ["stop"])
261
- })) : c("", !0),
262
- h("div", {
263
- class: $(["mc-modal", D.value]),
264
- style: ue(R.value)
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
- h("div", {
258
+ p("div", {
267
259
  ref_key: "modalInner",
268
- ref: T,
269
- class: $(["mc-modal__inner", { "mc-modal__inner--with-title": t.$slots.title }])
260
+ ref: V,
261
+ class: M(["mc-modal__inner", { "mc-modal__inner--with-title": t.$slots.title }])
270
262
  }, [
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),
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: a,
270
+ ref: s,
283
271
  class: "mc-modal__body"
284
272
  }, [
285
- C(t.$slots, "default")
273
+ w(t.$slots, "default")
286
274
  ], 512),
287
- t.$slots.footer ? (i(), d("div", be, [
288
- C(t.$slots, "footer")
289
- ])) : c("", !0),
290
- g.arrowVisible ? (i(), d("button", {
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: B(K, ["prevent"])
282
+ onClick: k(q, ["prevent"])
295
283
  }, [
296
- A(N(M), {
284
+ T($(B), {
297
285
  name: "arrow_leftward",
298
286
  class: "mc-modal__icon-back"
299
287
  })
300
- ])) : c("", !0),
301
- g.closeVisible ? (i(), d("button", {
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: B(k, ["prevent"])
293
+ onClick: k(y, ["prevent"])
306
294
  }, [
307
- A(N(M), {
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
- ])) : c("", !0)
301
+ ])) : i("", !0)
314
302
  ], 2)
315
303
  ], 6)
316
- ])) : c("", !0);
304
+ ])) : i("", !0);
317
305
  }
318
306
  });
319
307
  export {
320
- Ve as default
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: {};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "mediacube-ui-v2",
3
- "version": "0.0.341",
3
+ "version": "0.0.342",
4
4
  "license": "MIT",
5
5
  "description": "Design system for Mediacube services",
6
6
  "sideEffects": [