mediacube-ui-v2 0.0.328 → 0.0.330

package/dist/ai-catalog/index.json

@@ -1,6 +1,6 @@
 {
   "catalogSchemaVersion": 2,
-  "libraryVersion": "0.0.328",
+  "libraryVersion": "0.0.330",
   "packageName": "mediacube-ui-v2",
   "pathHash": "9b6f3b8016b22ac7",
   "componentCount": 76,

package/dist/components/patterns/McTab/McTab.vue2.js

@@ -1,6 +1,6 @@
-import { defineComponent as y, inject as S, useAttrs as g, ref as u, computed as t, onMounted as A, withDirectives as x, openBlock as T, createElementBlock as P, renderSlot as k, createCommentVNode as B, vShow as D } from "vue";
-import { useTheme as w } from "../../../composables/useTheme2.js";
-const M = ["id", "aria-hidden", "href", "to"], j = /* @__PURE__ */ y({
+import { defineComponent as S, inject as u, useAttrs as A, ref as d, computed as t, onMounted as T, onBeforeUnmount as x, withDirectives as B, openBlock as M, createElementBlock as P, renderSlot as k, createCommentVNode as D, vShow as w } from "vue";
+import { useTheme as N } from "../../../composables/useTheme2.js";
+const U = ["id", "aria-hidden", "href", "to"], I = /* @__PURE__ */ S({
   __name: "McTab",
   props: {
     /**
@@ -101,18 +101,19 @@ const M = ["id", "aria-hidden", "href", "to"], j = /* @__PURE__ */ y({
     }
   },
   setup(n) {
-    const i = S("selfRegisterTabMethod", () => {
-    }), r = g(), e = n, l = w("tab"), o = u(!1), s = u(!0), p = t(() => e.appendCountColor || l.component.count), d = t(() => e.id ? e.id : e.name.toLowerCase().replace(/ /g, "-")), c = t(() => e.isDisabled ? "#" : `#${d.value}`), f = t(() => !!e.appendCount || e.appendCount === 0), C = t(() => `--mc-tab-append-count-color: ${l.colors[p.value]}`), m = t(() => [e.prefix, e.name, e.suffix].filter(Boolean).join("")), h = t(() => e.visible ? m.value : "");
-    A(() => {
-      if (i) {
-        const a = {
+    const r = u("selfRegisterTabMethod", () => {
+    }), c = u("selfUnregisterTabMethod", () => {
+    }), l = A(), e = n, p = N("tab"), o = d(!1), f = d(!0), s = t(() => e.appendCountColor || p.component.count), a = t(() => e.id ? e.id : e.name.toLowerCase().replace(/ /g, "-")), m = t(() => e.isDisabled ? "#" : `#${a.value}`), C = t(() => !!e.appendCount || e.appendCount === 0), b = t(() => `--mc-tab-append-count-color: ${p.colors[s.value]}`), h = t(() => [e.prefix, e.name, e.suffix].filter(Boolean).join("")), v = t(() => e.visible ? h.value : "");
+    T(() => {
+      if (r) {
+        const i = {
           isActive: o.value,
-          isVisible: s.value,
-          computedId: d.value,
-          hash: c.value,
-          hasAppendCount: f.value,
-          appendCountStyles: C.value,
-          header: h.value,
+          isVisible: f.value,
+          computedId: a.value,
+          hash: m.value,
+          hasAppendCount: C.value,
+          appendCountStyles: b.value,
+          header: v.value,
           id: e.id,
           name: e.name,
           to: e.to,
@@ -123,24 +124,26 @@ const M = ["id", "aria-hidden", "href", "to"], j = /* @__PURE__ */ y({
           iconPrepend: e.iconPrepend,
           visible: e.visible,
           isDisabled: e.isDisabled,
-          appendCountColor: p.value,
+          appendCountColor: s.value,
           appendCount: e.appendCount,
           suffix: e.suffix,
           prefix: e.prefix,
-          showTab: v,
-          hideTab: b,
-          onClick: r.onClick,
-          ...r
+          showTab: y,
+          hideTab: g,
+          onClick: l.onClick,
+          ...l
         };
-        i(a);
+        r(i);
       }
+    }), x(() => {
+      c(a.value);
     });
-    const v = () => {
+    const y = () => {
       o.value = !0;
-    }, b = () => {
+    }, g = () => {
       o.value = !1;
     };
-    return (a, N) => x((T(), P("section", {
+    return (i, V) => B((M(), P("section", {
       id: n.id,
       "aria-hidden": !o.value,
       class: "tabs-component-panel",
@@ -148,12 +151,12 @@ const M = ["id", "aria-hidden", "href", "to"], j = /* @__PURE__ */ y({
       href: n.href,
       to: n.to
     }, [
-      n.visible ? k(a.$slots, "default", { key: 0 }) : B("", !0)
-    ], 8, M)), [
-      [D, o.value]
+      n.visible ? k(i.$slots, "default", { key: 0 }) : D("", !0)
+    ], 8, U)), [
+      [w, o.value]
     ]);
   }
 });
 export {
-  j as default
+  I as default
 };

package/dist/components/patterns/McTabs/McTabs.vue2.js

@@ -1,9 +1,9 @@
-import { defineComponent as P, defineAsyncComponent as d, inject as j, ref as F, computed as c, onMounted as K, onUpdated as O, watch as R, nextTick as $, provide as L, openBlock as a, createElementBlock as u, normalizeStyle as U, normalizeClass as _, createElementVNode as i, createVNode as W, unref as l, 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";
+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 a, createElementBlock as p, normalizeStyle as L, normalizeClass as g, createElementVNode as i, createVNode as W, unref as l, 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";
 import { TabVariations as Z } from "../../../enums/Tab2.js";
 import { useTheme as ee } from "../../../composables/useTheme2.js";
-import { ChipSize as oe } from "../../../enums/Chip2.js";
-import { useDebounceFn as te } from "@vueuse/core";
-const ne = { class: "tabs-component" }, se = ["aria-controls", "aria-selected", "href", "onClick"], ce = { class: "tabs-component-tab__tab-name" }, ae = { class: "tabs-component-panels" }, ue = /* @__PURE__ */ P({
+import { ChipSize as te } from "../../../enums/Chip2.js";
+import { useDebounceFn as oe } from "@vueuse/core";
+const ne = { class: "tabs-component" }, se = ["aria-controls", "aria-selected", "href", "onClick"], ce = { class: "tabs-component-tab__tab-name" }, ae = { class: "tabs-component-panels" }, pe = /* @__PURE__ */ U({
   __name: "McTabs",
   props: {
     modelValue: {
@@ -61,16 +61,16 @@ const ne = { class: "tabs-component" }, se = ["aria-controls", "aria-selected",
     }
   },
   emits: ["update:modelValue", "tab-changed", "clicked"],
-  setup(k, { emit: g }) {
-    const T = d(() => import("../../elements/McChip/McChip.vue.js")), h = d(() => import("../../elements/McSvgIcon/McSvgIcon.vue.js")), V = d(() => import("../McWrapScroll/McWrapScroll.vue.js")), v = g, C = j("dsOptions", {}), n = k, r = ee("tabs"), s = F([]), S = c(() => n.color || r.component.color), A = c(() => n.accentColor || r.component.accentColor), D = c(() => ({
+  setup(k, { emit: T }) {
+    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), D = c(() => n.accentColor || r.component.accentColor), I = c(() => ({
       "mc-tabs": !0,
       [`mc-tabs--tab-variation-${n.tabVariation}`]: !!n.tabVariation,
       "mc-tabs--uppercase": !!n.uppercase,
       "mc-tabs--sticky": !!n.sticky
-    })), w = c(() => ({
-      "--mc-tabs-color": r.colors[S.value],
-      "--mc-tabs-accent-color": r.colors[A.value]
-    })), z = c({
+    })), M = c(() => ({
+      "--mc-tabs-color": r.colors[A.value],
+      "--mc-tabs-accent-color": r.colors[D.value]
+    })), w = c({
       // @ts-ignore
       get() {
         return n.modelValue;
@@ -78,23 +78,25 @@ const ne = { class: "tabs-component" }, se = ["aria-controls", "aria-selected",
       set(e) {
         v("update:modelValue", e);
       }
-    }), b = c(() => s.value.filter((e) => e.visible && !e.isDisabled)), M = (e) => {
+    }), b = c(() => s.value.filter((e) => e.visible && !e.isDisabled)), z = (e) => {
       s.value.forEach((t) => {
         t.isActive = t.computedId === e, t.isActive ? t.showTab() : t.hideTab();
       });
     }, B = (e) => {
-      s.value.push(e);
-    }, y = () => {
+      s.value.some((t) => t.computedId === e.computedId) || s.value.push(e);
+    }, x = (e) => {
+      s.value = s.value.filter((t) => t.computedId !== e);
+    }, _ = () => {
       let [e] = b.value;
       const t = s.value.find((o) => o.computedId === n.modelValue);
-      t && !t.isDisabled && (e = t), e && p(e);
-    }, I = (e, t) => {
+      t && !t.isDisabled && (e = t), e && d(e);
+    }, E = (e, t) => {
       v("tab-changed", { tab: e, event: t });
-    }, x = te(() => {
+    }, N = oe(() => {
       if (n.loading || !s.value?.find((o) => o.isActive)?.isDisabled) return;
       const [t] = b.value;
-      p(t);
-    }, 100), p = (e, t) => {
+      d(t);
+    }, 100), d = (e, t) => {
       if (!((e.to || e.href) && (t?.metaKey || t?.ctrlKey)) && (t?.preventDefault(), !e.isDisabled)) {
         if (e.onClick && typeof e.onClick == "function") return e.onClick(e, t);
         if (e.href) {
@@ -105,31 +107,31 @@ const ne = { class: "tabs-component" }, se = ["aria-controls", "aria-selected",
           C.meta.router_push(e.to);
           return;
         }
-        I(e, t), M(e.computedId), z.value = e.computedId;
+        E(e, t), z(e.computedId), w.value = e.computedId;
       }
     };
-    return K(y), O(x), R(
+    return K(_), O(N), R(
       () => n.loading,
       (e, t) => {
         !e && t && $(() => {
-          y();
+          _();
         });
       }
-    ), L("selfRegisterTabMethod", B), (e, t) => (a(), u("div", {
-      class: _(D.value),
-      style: U(w.value)
+    ), y("selfRegisterTabMethod", B), y("selfUnregisterTabMethod", x), (e, t) => (a(), p("div", {
+      class: g(I.value),
+      style: L(M.value)
     }, [
       i("div", ne, [
-        W(l(V), {
+        W(l(S), {
           "tag-name": "ul",
           role: "tablist",
           scrollable: "",
           class: "tabs-component-tabs"
         }, {
           default: q(() => [
-            (a(!0), u(G, null, H(s.value, (o, E) => J((a(), u("li", {
-              key: E,
-              class: _([{ "is-active": o.isActive, "is-disabled": o.isDisabled, "is-hidden": !o.visible }, "tabs-component-tab"]),
+            (a(!0), p(G, null, H(s.value, (o) => J((a(), p("li", {
+              key: o.computedId,
+              class: g([{ "is-active": o.isActive, "is-disabled": o.isDisabled, "is-hidden": !o.visible }, "tabs-component-tab"]),
               role: "presentation"
             }, [
               i("a", {
@@ -138,7 +140,7 @@ const ne = { class: "tabs-component" }, se = ["aria-controls", "aria-selected",
                 href: o.href || o.to || o.hash || "javascript:void(0)",
                 class: "tabs-component-tab-a",
                 role: "tab",
-                onClick: (N) => p(o, N)
+                onClick: (P) => d(o, P)
               }, [
                 i("span", ce, [
                   o.iconPrepend ? (a(), m(l(h), {
@@ -154,11 +156,11 @@ const ne = { class: "tabs-component" }, se = ["aria-controls", "aria-selected",
                     color: o.iconAppendColor,
                     size: "200"
                   }, null, 8, ["name", "color"])) : f("", !0),
-                  o.hasAppendCount ? (a(), m(l(T), {
+                  o.hasAppendCount ? (a(), m(l(V), {
                     key: 2,
                     title: o.appendCount,
                     "text-color": o.appendCountColor,
-                    size: l(oe).S,
+                    size: l(te).S,
                     class: "tabs-component-tab__tab-name_append-count"
                   }, null, 8, ["title", "text-color", "size"])) : f("", !0)
                 ])
@@ -177,5 +179,5 @@ const ne = { class: "tabs-component" }, se = ["aria-controls", "aria-selected",
   }
 });
 export {
-  ue as default
+  pe as default
 };

package/dist/components/templates/McModal/McModal.vue2.js

@@ -1,4 +1,4 @@
-import { defineComponent as oe, defineAsyncComponent as ae, useSlots as ne, ref as u, reactive as se, computed as S, watch as H, openBlock as i, createElementBlock as d, withModifiers as k, createCommentVNode as m, createElementVNode as h, normalizeStyle as re, normalizeClass as M, renderSlot as w, createVNode as T, unref as $ } from "vue";
+import { defineComponent as oe, defineAsyncComponent as ae, useSlots as ne, ref as u, reactive as se, computed as k, watch as H, openBlock as i, createElementBlock as d, withModifiers as w, createCommentVNode as m, createElementVNode as h, normalizeStyle as re, normalizeClass as M, renderSlot as B, createVNode as T, unref as $ } from "vue";
 import { LineHeights as p } from "../../../types/styles/LineHeights.js";
 import { Sizes as f } from "../../../types/styles/Sizes.js";
 import { Spaces as _ } from "../../../types/styles/Spaces.js";
@@ -120,10 +120,10 @@ const ce = {
   },
   emits: ["before-open", "before-close", "opened", "closed", "back", "update:modelValue"],
   setup(g, { emit: E }) {
-    const B = ae(() => import("../../elements/McSvgIcon/McSvgIcon.vue.js")), F = ne(), r = E, l = g, b = u(0), O = ie(b, {
+    const V = ae(() => import("../../elements/McSvgIcon/McSvgIcon.vue.js")), F = ne(), r = E, l = g, b = u(0), O = ie(b, {
       duration: l.duration || 300,
       transition: de.easeOutQuart
-    }), s = u(null), V = u(null), c = u(null), e = se({
+    }), s = u(null), C = u(null), c = u(null), e = se({
       scrolled_top: !1,
       scrolled_bottom: !1,
       small_indents: !1,
@@ -148,8 +148,8 @@ const ce = {
         }
       }
     });
-    S(() => !!F.title);
-    const P = S(() => ({
+    k(() => !!F.title);
+    const P = k(() => ({
       "mc-modal--arrow-visible": l.arrowVisible,
       "mc-modal--scrolled-top": e.scrolled_top,
       "mc-modal--scrolled-bottom": e.scrolled_bottom,
@@ -158,7 +158,7 @@ const ce = {
       "mc-modal--small-indents": e.small_indents,
       [`mc-modal--variation-${l.variation}`]: !!l.variation,
       [`mc-modal--header-align-${l.headerAlign}`]: (l.closeVisible || l.arrowVisible) && !!l.headerAlign
-    })), A = S(() => ({
+    })), A = k(() => ({
       "--mc-modal-padding": _[e.indent.regular],
       "--mc-modal-padding-small": _[e.indent.small],
       "--mc-modal-header-line-height": p[e.header.title.line_height.regular],
@@ -170,7 +170,7 @@ const ce = {
       "--mc-modal-state-number": O.value
     })), N = () => {
       e.scrolled_top = !1, e.scrolled_bottom = !1, e.small_indents = !1, e.can_shorten_modal = !1;
-    }, D = () => V.value?.parentElement ?? null, I = (t, o) => {
+    }, D = () => C.value?.parentElement ?? null, I = (t, o) => {
       const n = getComputedStyle(t).getPropertyValue(o).trim();
       if (!n) return 0;
       const a = parseFloat(n);
@@ -188,10 +188,10 @@ const ce = {
     me(s, "scroll", () => {
       l.separators && W();
     }, { passive: !0 });
-    const C = () => {
+    const z = () => {
       c.value?.disconnect(), c.value = null;
     }, x = () => {
-      !s.value || !l.separators || (C(), c.value = new ResizeObserver(G), c.value.observe(s.value));
+      !s.value || !l.separators || (z(), c.value = new ResizeObserver(G), c.value.observe(s.value));
     }, R = () => {
       requestAnimationFrame(() => {
         requestAnimationFrame(() => {
@@ -226,10 +226,10 @@ const ce = {
       (!e.small_indents || t === 0) && (e.can_shorten_modal = o - n > a);
     }, G = () => {
       y(), v();
-    }, z = () => {
+    }, S = () => {
       r("before-close"), r("closed"), r("update:modelValue", !1);
     }, J = () => {
-      l.clickBackdropToClose && z();
+      l.clickBackdropToClose && S();
     };
     return H(
       () => l.modelValue,
@@ -239,7 +239,7 @@ const ce = {
             b.value = 1, r("before-open");
             return;
           }
-          C(), N(), b.value = 0;
+          z(), N(), b.value = 0, S();
         }
       },
       { immediate: !0 }
@@ -253,7 +253,7 @@ const ce = {
       l.showOverlay ? (i(), d("div", {
         key: 0,
         class: "mc-modal__overlay",
-        onClick: k(J, ["stop"])
+        onClick: w(J, ["stop"])
       })) : m("", !0),
       h("div", {
         class: M(["mc-modal", P.value]),
@@ -261,12 +261,12 @@ const ce = {
       }, [
         h("div", {
           ref_key: "modalInner",
-          ref: V,
+          ref: C,
           class: M(["mc-modal__inner", { "mc-modal__inner--with-title": t.$slots.title }])
         }, [
           t.$slots.title ? (i(), d("div", ue, [
             h("div", he, [
-              w(t.$slots, "title")
+              B(t.$slots, "title")
             ])
           ])) : m("", !0),
           h("div", {
@@ -274,18 +274,18 @@ const ce = {
             ref: s,
             class: "mc-modal__body"
           }, [
-            w(t.$slots, "default")
+            B(t.$slots, "default")
           ], 512),
           t.$slots.footer ? (i(), d("div", pe, [
-            w(t.$slots, "footer")
+            B(t.$slots, "footer")
           ])) : m("", !0),
           g.arrowVisible ? (i(), d("button", {
             key: 2,
             type: "button",
             class: "mc-modal__btn-back",
-            onClick: k(Q, ["prevent"])
+            onClick: w(Q, ["prevent"])
           }, [
-            T($(B), {
+            T($(V), {
               name: "arrow_leftward",
               class: "mc-modal__icon-back"
             })
@@ -294,9 +294,9 @@ const ce = {
             key: 3,
             type: "button",
             class: "mc-modal__btn-close",
-            onClick: k(z, ["prevent"])
+            onClick: w(S, ["prevent"])
           }, [
-            T($(B), {
+            T($(V), {
               class: "mc-modal__icon-close",
               width: "24",
               height: "24",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mediacube-ui-v2",
-  "version": "0.0.328",
+  "version": "0.0.330",
   "license": "MIT",
   "description": "Design system for Mediacube services",
   "sideEffects": [