mediacube-ui-v2 0.0.331 → 0.0.332
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 +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;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
|
|
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;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{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,9 +1,9 @@
|
|
|
1
|
-
import { defineComponent as U, defineAsyncComponent as u, inject as j, ref as F, computed as c, onMounted as K, onUpdated as O, watch as R, nextTick as $, provide as y, openBlock as
|
|
1
|
+
import { defineComponent as U, defineAsyncComponent as u, inject as j, ref as F, computed as c, onMounted as K, onUpdated as O, watch as R, nextTick as $, provide as y, openBlock as i, createElementBlock as p, normalizeStyle as L, normalizeClass as g, createElementVNode as l, createVNode as W, unref as a, withCtx as q, Fragment as G, renderList as H, withDirectives as J, createBlock as m, createCommentVNode as f, toDisplayString as Q, vShow as X, renderSlot as Y } from "vue";
|
|
2
2
|
import { TabVariations as Z } from "../../../enums/Tab2.js";
|
|
3
3
|
import { useTheme as ee } from "../../../composables/useTheme2.js";
|
|
4
4
|
import { ChipSize as te } from "../../../enums/Chip2.js";
|
|
5
5
|
import { useDebounceFn as oe } from "@vueuse/core";
|
|
6
|
-
const ne = { class: "tabs-component" }, se = ["aria-controls", "aria-selected", "href", "onClick"], ce = { class: "tabs-component-tab__tab-name" },
|
|
6
|
+
const ne = { class: "tabs-component" }, se = ["aria-controls", "aria-selected", "href", "onClick"], ce = { class: "tabs-component-tab__tab-name" }, ie = { class: "tabs-component-panels" }, pe = /* @__PURE__ */ U({
|
|
7
7
|
__name: "McTabs",
|
|
8
8
|
props: {
|
|
9
9
|
modelValue: {
|
|
@@ -62,14 +62,14 @@ const ne = { class: "tabs-component" }, se = ["aria-controls", "aria-selected",
|
|
|
62
62
|
},
|
|
63
63
|
emits: ["update:modelValue", "tab-changed", "clicked"],
|
|
64
64
|
setup(k, { emit: T }) {
|
|
65
|
-
const V = u(() => import("../../elements/McChip/McChip.vue.js")), h = u(() => import("../../elements/McSvgIcon/McSvgIcon.vue.js")), S = u(() => import("../McWrapScroll/McWrapScroll.vue.js")), v = T, C = j("dsOptions", {}), n = k, r = ee("tabs"), s = F([]), A = c(() => n.color || r.component.color),
|
|
65
|
+
const V = u(() => import("../../elements/McChip/McChip.vue.js")), h = u(() => import("../../elements/McSvgIcon/McSvgIcon.vue.js")), S = u(() => import("../McWrapScroll/McWrapScroll.vue.js")), v = T, C = j("dsOptions", {}), n = k, r = ee("tabs"), s = F([]), A = c(() => n.color || r.component.color), I = c(() => n.accentColor || r.component.accentColor), D = c(() => ({
|
|
66
66
|
"mc-tabs": !0,
|
|
67
67
|
[`mc-tabs--tab-variation-${n.tabVariation}`]: !!n.tabVariation,
|
|
68
68
|
"mc-tabs--uppercase": !!n.uppercase,
|
|
69
69
|
"mc-tabs--sticky": !!n.sticky
|
|
70
70
|
})), M = c(() => ({
|
|
71
71
|
"--mc-tabs-color": r.colors[A.value],
|
|
72
|
-
"--mc-tabs-accent-color": r.colors[
|
|
72
|
+
"--mc-tabs-accent-color": r.colors[I.value]
|
|
73
73
|
})), w = c({
|
|
74
74
|
// @ts-ignore
|
|
75
75
|
get() {
|
|
@@ -89,13 +89,15 @@ const ne = { class: "tabs-component" }, se = ["aria-controls", "aria-selected",
|
|
|
89
89
|
}, _ = () => {
|
|
90
90
|
let [e] = b.value;
|
|
91
91
|
const t = s.value.find((o) => o.computedId === n.modelValue);
|
|
92
|
-
t && !t.isDisabled && (e = t), e && d(e);
|
|
92
|
+
t?.visible && !t.isDisabled && (e = t), e && d(e);
|
|
93
93
|
}, E = (e, t) => {
|
|
94
94
|
v("tab-changed", { tab: e, event: t });
|
|
95
95
|
}, N = oe(() => {
|
|
96
|
-
if (n.loading
|
|
96
|
+
if (n.loading) return;
|
|
97
|
+
const e = s.value?.find((o) => o.isActive);
|
|
98
|
+
if (!e || e.visible && !e.isDisabled) return;
|
|
97
99
|
const [t] = b.value;
|
|
98
|
-
d(t);
|
|
100
|
+
t && d(t);
|
|
99
101
|
}, 100), d = (e, t) => {
|
|
100
102
|
if (!((e.to || e.href) && (t?.metaKey || t?.ctrlKey)) && (t?.preventDefault(), !e.isDisabled)) {
|
|
101
103
|
if (e.onClick && typeof e.onClick == "function") return e.onClick(e, t);
|
|
@@ -117,24 +119,24 @@ const ne = { class: "tabs-component" }, se = ["aria-controls", "aria-selected",
|
|
|
117
119
|
_();
|
|
118
120
|
});
|
|
119
121
|
}
|
|
120
|
-
), y("selfRegisterTabMethod", B), y("selfUnregisterTabMethod", x), (e, t) => (
|
|
121
|
-
class: g(
|
|
122
|
+
), y("selfRegisterTabMethod", B), y("selfUnregisterTabMethod", x), (e, t) => (i(), p("div", {
|
|
123
|
+
class: g(D.value),
|
|
122
124
|
style: L(M.value)
|
|
123
125
|
}, [
|
|
124
|
-
|
|
125
|
-
W(
|
|
126
|
+
l("div", ne, [
|
|
127
|
+
W(a(S), {
|
|
126
128
|
"tag-name": "ul",
|
|
127
129
|
role: "tablist",
|
|
128
130
|
scrollable: "",
|
|
129
131
|
class: "tabs-component-tabs"
|
|
130
132
|
}, {
|
|
131
133
|
default: q(() => [
|
|
132
|
-
(
|
|
134
|
+
(i(!0), p(G, null, H(s.value, (o) => J((i(), p("li", {
|
|
133
135
|
key: o.computedId,
|
|
134
136
|
class: g([{ "is-active": o.isActive, "is-disabled": o.isDisabled, "is-hidden": !o.visible }, "tabs-component-tab"]),
|
|
135
137
|
role: "presentation"
|
|
136
138
|
}, [
|
|
137
|
-
|
|
139
|
+
l("a", {
|
|
138
140
|
"aria-controls": o.hash,
|
|
139
141
|
"aria-selected": o.isActive,
|
|
140
142
|
href: o.href || o.to || o.hash || "javascript:void(0)",
|
|
@@ -142,25 +144,25 @@ const ne = { class: "tabs-component" }, se = ["aria-controls", "aria-selected",
|
|
|
142
144
|
role: "tab",
|
|
143
145
|
onClick: (P) => d(o, P)
|
|
144
146
|
}, [
|
|
145
|
-
|
|
146
|
-
o.iconPrepend ? (
|
|
147
|
+
l("span", ce, [
|
|
148
|
+
o.iconPrepend ? (i(), m(a(h), {
|
|
147
149
|
key: 0,
|
|
148
150
|
name: o.iconPrepend,
|
|
149
151
|
color: o.iconPrependColor,
|
|
150
152
|
size: "200"
|
|
151
153
|
}, null, 8, ["name", "color"])) : f("", !0),
|
|
152
|
-
|
|
153
|
-
o.iconAppend ? (
|
|
154
|
+
l("span", null, Q(o.header), 1),
|
|
155
|
+
o.iconAppend ? (i(), m(a(h), {
|
|
154
156
|
key: 1,
|
|
155
157
|
name: o.iconAppend,
|
|
156
158
|
color: o.iconAppendColor,
|
|
157
159
|
size: "200"
|
|
158
160
|
}, null, 8, ["name", "color"])) : f("", !0),
|
|
159
|
-
o.hasAppendCount ? (
|
|
161
|
+
o.hasAppendCount ? (i(), m(a(V), {
|
|
160
162
|
key: 2,
|
|
161
163
|
title: o.appendCount,
|
|
162
164
|
"text-color": o.appendCountColor,
|
|
163
|
-
size:
|
|
165
|
+
size: a(te).S,
|
|
164
166
|
class: "tabs-component-tab__tab-name_append-count"
|
|
165
167
|
}, null, 8, ["title", "text-color", "size"])) : f("", !0)
|
|
166
168
|
])
|
|
@@ -171,7 +173,7 @@ const ne = { class: "tabs-component" }, se = ["aria-controls", "aria-selected",
|
|
|
171
173
|
]),
|
|
172
174
|
_: 1
|
|
173
175
|
}),
|
|
174
|
-
|
|
176
|
+
l("div", ie, [
|
|
175
177
|
Y(e.$slots, "default")
|
|
176
178
|
])
|
|
177
179
|
])
|