@ironsource/shared-ui 2.1.7-rc.12 → 2.1.7-rc.13

package/TabsV4.vue_vue_type_style_index_0_scoped_f9433b11_lang.css

@@ -0,0 +1 @@
+.tabs-list[data-v-f9433b11]{position:relative;padding:0;margin:0}.tabs-list--page[data-v-f9433b11]{border-bottom:1px solid var(--common-divider);box-sizing:border-box}.tabs-list--page .tab-item[data-v-f9433b11]{padding:0;margin-right:var(--spacing-200);min-height:calc(var(--spacing-600) - 1px)}.tabs-list--page .tabs-border-line[data-v-f9433b11]{margin-top:-1px}.tabs-border-line[data-v-f9433b11]{left:var(--167b065e);width:var(--8cfadb62);border-bottom:2px solid var(--primary-main);transition:left .2s ease-in-out,width .2s;position:absolute;margin-top:-2px}.tab-item[data-v-f9433b11]{display:inline-flex;flex-direction:row;justify-content:center;align-items:center;color:var(--action-active);gap:var(--spacing-100);vertical-align:middle;padding:0 var(--spacing-300);min-height:var(--spacing-600)}.tab-item[data-v-f9433b11]:hover{cursor:pointer;color:var(--text-primary)}.tab-item--active[data-v-f9433b11]{color:var(--text-primary)}.tab-item--disabled[data-v-f9433b11]{color:var(--action-disabled);cursor:not-allowed;pointer-events:none}

package/components/tabs/v4/TabsV4.vue.js

@@ -1,7 +1,7 @@
 import o from "./TabsV4.vue2.js";
-/* empty css             */import e from "../../../_virtual/_plugin-vue_export-helper.js";
-// import "../../../TabsV4.vue_vue_type_style_index_0_scoped_bab40cfe_lang.css"; //*');
-const a = /* @__PURE__ */ e(o, [["__scopeId", "data-v-bab40cfe"]]);
+/* empty css             */import _ from "../../../_virtual/_plugin-vue_export-helper.js";
+// import "../../../TabsV4.vue_vue_type_style_index_0_scoped_f9433b11_lang.css"; //*');
+const p = /* @__PURE__ */ _(o, [["__scopeId", "data-v-f9433b11"]]);
 export {
-  a as default
+  p as default
 };

package/components/tabs/v4/TabsV4.vue2.js

@@ -1,9 +1,9 @@
- import "../../../TabsV4.vue_vue_type_style_index_0_scoped_bab40cfe_lang.css"; import { defineComponent as h, useCssVars as C, ref as v, watch as w, nextTick as $, openBlock as r, createElementBlock as l, mergeProps as y, unref as s, Fragment as S, renderList as g, normalizeClass as A, renderSlot as N, createBlock as V, withCtx as B, createTextVNode as M, toDisplayString as E, createCommentVNode as P, pushScopeId as W, popScopeId as _, createElementVNode as H } from "vue";
-import R from "../../typography/v4/Typography.vue.js";
-import { TabsTestIdModifiers as c } from "../../../testids/index.js";
+ import "../../../TabsV4.vue_vue_type_style_index_0_scoped_f9433b11_lang.css"; import { defineComponent as x, useCssVars as y, ref as l, watch as C, nextTick as $, openBlock as o, createElementBlock as c, mergeProps as w, unref as s, Fragment as A, renderList as S, normalizeClass as g, renderSlot as V, createBlock as B, withCtx as M, createTextVNode as N, toDisplayString as R, createCommentVNode as _, pushScopeId as E, popScopeId as P, createElementVNode as W } from "vue";
+import H from "../../typography/v4/Typography.vue.js";
+import { TabsTestIdModifiers as m } from "../../../testids/index.js";
 import { tabsCommon as z } from "../common/tabsCommon.js";
 import { useTestIdAttrs as D } from "../../../utils/testIds.js";
-const F = (t) => (W("data-v-bab40cfe"), t = t(), _(), t), U = ["data-testid", "onClick", "onMouseover"], j = /* @__PURE__ */ F(() => /* @__PURE__ */ H("div", { class: "tabs-border-line" }, null, -1)), Q = /* @__PURE__ */ h({
+const F = (t) => (E("data-v-f9433b11"), t = t(), P(), t), U = ["data-testid", "onClick", "onMouseover"], j = /* @__PURE__ */ F(() => /* @__PURE__ */ W("div", { class: "tabs-border-line" }, null, -1)), Q = /* @__PURE__ */ x({
   __name: "TabsV4",
   props: {
     tabsList: { default: () => [] },
@@ -12,59 +12,56 @@ const F = (t) => (W("data-v-bab40cfe"), t = t(), _(), t), U = ["data-testid", "o
     testId: { default: "" }
   },
   emits: ["update:selectedTab"],
-  setup(t, { emit: f }) {
-    const a = t;
-    C((o) => ({
-      "57c21ae0": b.value,
-      bdc3e3e6: m.value
+  setup(t, { emit: p }) {
+    const r = t;
+    y((a) => ({
+      "167b065e": v.value,
+      "8cfadb62": b.value
     }));
-    const {
-      skipUnwrap: p,
-      selectTab: T,
-      setHover: I,
-      clearHover: u,
-      tabsNewList: L,
-      getSelectedTabIndex: k
-    } = z(a, f), x = D(a.testId, c), d = (o) => o.id === a.selectedTab, m = v(), b = v();
-    return w(
-      [() => a.variant, () => a.selectedTab, () => a.tabsList],
+    const { skipUnwrap: T, selectTab: I, setHover: L, clearHover: u, getSelectedTabIndex: k } = z(r, p), f = l(null), h = D(r.testId, m), i = (a) => a.id === r.selectedTab, b = l(), v = l();
+    return C(
+      [() => r.variant, () => r.selectedTab, () => r.tabsList],
       async () => {
-        const o = k();
+        const a = k();
+        if (a === -1)
+          return;
         await $();
-        const i = L.value[o];
-        m.value = i?.clientWidth + "px", b.value = i?.offsetLeft + "px";
+        const e = Array.from(f.value?.children || []).at(a);
+        b.value = e?.clientWidth + "px", v.value = e?.offsetLeft + "px";
       },
       { immediate: !0 }
-    ), (o, i) => (r(), l("ul", y({
+    ), (a, n) => (o(), c("ul", w({
+      ref_key: "tabsListRef",
+      ref: f,
       class: ["tabs-list", [`tabs-list--${t.variant}`]]
-    }, s(x)[s(c).WRAPPER]), [
-      (r(!0), l(S, null, g(t.tabsList, (e) => (r(), l("li", {
+    }, s(h)[s(m).WRAPPER]), [
+      (o(!0), c(A, null, S(t.tabsList, (e) => (o(), c("li", {
         ref_for: !0,
-        ref: s(p).tabsNewList,
+        ref: s(T).tabsNewList,
         key: e.id,
-        class: A(["tab-item", {
+        class: g(["tab-item", {
           "tab-item--disabled": e.disabled,
-          "tab-item--active": d(e)
+          "tab-item--active": i(e)
         }]),
-        "data-testid": t.testId ? `${t.testId}-${s(c).TAB}-${e.id}` : void 0,
-        onClick: (n) => s(T)(e),
-        onMouseover: (n) => s(I)(e),
-        onMouseleave: i[0] || (i[0] = //@ts-ignore
-        (...n) => s(u) && s(u)(...n))
+        "data-testid": t.testId ? `${t.testId}-${s(m).TAB}-${e.id}` : void 0,
+        onClick: (d) => s(I)(e),
+        onMouseover: (d) => s(L)(e),
+        onMouseleave: n[0] || (n[0] = //@ts-ignore
+        (...d) => s(u) && s(u)(...d))
       }, [
-        N(o.$slots, "tab-icon", {
+        V(a.$slots, "tab-icon", {
           tab: e,
-          active: d(e)
+          active: i(e)
         }, void 0, !0),
-        e.name ? (r(), V(s(R), {
+        e.name ? (o(), B(s(H), {
           key: 0,
-          variant: d(e) ? "tabLabel2" : "tabLabel1"
+          variant: i(e) ? "tabLabel2" : "tabLabel1"
         }, {
-          default: B(() => [
-            M(E(e.name), 1)
+          default: M(() => [
+            N(R(e.name), 1)
           ]),
           _: 2
-        }, 1032, ["variant"])) : P("", !0)
+        }, 1032, ["variant"])) : _("", !0)
       ], 42, U))), 128)),
       j
     ], 16));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ironsource/shared-ui",
-  "version": "2.1.7-rc.12",
+  "version": "2.1.7-rc.13",
   "engines": {
     "npm": ">=7.0.0",
     "node": ">=16.0.0"

package/TabsV4.vue_vue_type_style_index_0_scoped_bab40cfe_lang.css

@@ -1 +0,0 @@
-.tabs-list[data-v-bab40cfe]{position:relative;padding:0;margin:0}.tabs-list--page[data-v-bab40cfe]{border-bottom:1px solid var(--common-divider);box-sizing:border-box}.tabs-list--page .tab-item[data-v-bab40cfe]{padding:0;margin-right:var(--spacing-200);min-height:calc(var(--spacing-600) - 1px)}.tabs-list--page .tabs-border-line[data-v-bab40cfe]{margin-top:-1px}.tabs-border-line[data-v-bab40cfe]{left:var(--57c21ae0);width:var(--bdc3e3e6);border-bottom:2px solid var(--primary-main);transition:left .2s ease-in-out,width .2s;position:absolute;margin-top:-2px}.tab-item[data-v-bab40cfe]{display:inline-flex;flex-direction:row;justify-content:center;align-items:center;color:var(--action-active);gap:var(--spacing-100);vertical-align:middle;padding:0 var(--spacing-300);min-height:var(--spacing-600)}.tab-item[data-v-bab40cfe]:hover{cursor:pointer;color:var(--text-primary)}.tab-item--active[data-v-bab40cfe]{color:var(--text-primary)}.tab-item--disabled[data-v-bab40cfe]{color:var(--action-disabled);cursor:not-allowed;pointer-events:none}