mediacube-ui-v2 0.0.328 → 0.0.329

package/dist/ai-catalog/index.json

@@ -1,6 +1,6 @@
 {
   "catalogSchemaVersion": 2,
-  "libraryVersion": "0.0.328",
+  "libraryVersion": "0.0.329",
   "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/package.json

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