@ironsource/shared-ui 2.1.12-rc.4 → 2.1.12-rc.41

package/components/sortableList/SortableList.vue.d.ts

@@ -5,6 +5,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     openId?: string | number;
     selectedId?: string | number;
     selectedChildId?: string | number;
+    variant?: "default" | "compact";
+    draggableArea?: "handle" | "full";
     search?: string;
     showSearch?: boolean;
     searchPlaceholder?: string;
@@ -22,6 +24,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     openId: any;
     selectedId: any;
     selectedChildId: any;
+    variant: string;
+    draggableArea: string;
     search: any;
     showSearch: boolean;
     searchPlaceholder: string;
@@ -50,6 +54,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     openId?: string | number;
     selectedId?: string | number;
     selectedChildId?: string | number;
+    variant?: "default" | "compact";
+    draggableArea?: "handle" | "full";
     search?: string;
     showSearch?: boolean;
     searchPlaceholder?: string;
@@ -67,6 +73,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     openId: any;
     selectedId: any;
     selectedChildId: any;
+    variant: string;
+    draggableArea: string;
     search: any;
     showSearch: boolean;
     searchPlaceholder: string;
@@ -92,6 +100,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
 }, {
     search: string;
     testId: string;
+    variant: "default" | "compact";
     isLoading: boolean;
     displayValue: (item: SortableListItem) => string;
     searchPlaceholder: string;
@@ -99,6 +108,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     selectedChildId: string | number;
     childListMaxHeight: string;
     searchHandler: (item: SortableListItem, searchQuery: string) => boolean;
+    draggableArea: "handle" | "full";
     openId: string | number;
     selectedId: string | number;
     showSearch: boolean;

package/components/sortableList/SortableList.vue.js

@@ -1,7 +1,7 @@
 import o from "./SortableList.vue2.js";
 /* empty css                   */import t from "../../_virtual/_plugin-vue_export-helper.js";
-// import "../../SortableList.vue_vue_type_style_index_0_scoped_8f267f88_lang.css"; //*');
-const p = /* @__PURE__ */ t(o, [["__scopeId", "data-v-8f267f88"]]);
+// import "../../SortableList.vue_vue_type_style_index_0_scoped_84dc8525_lang.css"; //*');
+const c = /* @__PURE__ */ t(o, [["__scopeId", "data-v-84dc8525"]]);
 export {
-  p as default
+  c as default
 };

package/components/sortableList/SortableList.vue2.js

@@ -1,28 +1,30 @@
- import "../../SortableList.vue_vue_type_style_index_0_scoped_8f267f88_lang.css"; import { defineComponent as P, useCssVars as z, useSlots as G, computed as S, ref as U, openBlock as s, createElementBlock as r, mergeProps as V, unref as l, normalizeClass as K, renderSlot as g, createCommentVNode as h, createBlock as p, isRef as A, withCtx as I, Fragment as x, renderList as B, createSlots as E, createElementVNode as Q, createVNode as H, createTextVNode as j, toDisplayString as J } from "vue";
-import { VueDraggable as W } from "vue-draggable-plus";
+ import "../../SortableList.vue_vue_type_style_index_0_scoped_84dc8525_lang.css"; import { defineComponent as z, useCssVars as G, useSlots as U, computed as f, ref as K, openBlock as s, createElementBlock as i, mergeProps as V, unref as l, normalizeClass as Q, renderSlot as y, createCommentVNode as h, createBlock as S, isRef as $, withCtx as I, Fragment as x, renderList as B, createSlots as w, createElementVNode as j, createVNode as E, createTextVNode as J, toDisplayString as W } from "vue";
+import { VueDraggable as X } from "vue-draggable-plus";
 import N from "./SortableItem.vue.js";
-import X from "../search/v4/SearchV4.vue.js";
-import Y from "../typography/v4/Typography.vue.js";
-import Z from "../skeleton/v4/SkeletonV4.vue.js";
-import { useVModel as _ } from "@vueuse/core";
+import Y from "../search/v4/SearchV4.vue.js";
+import Z from "../typography/v4/Typography.vue.js";
+import _ from "../skeleton/v4/SkeletonV4.vue.js";
+import { useVModel as ee } from "@vueuse/core";
 import { matchString as q } from "../../utils/search.js";
-import { useTestIdAttrs as ee } from "../../utils/testIds.js";
-import { SortableListTestIdModifiers as v } from "../../testids/index.js";
+import { useTestIdAttrs as te } from "../../utils/testIds.js";
+import { SortableListTestIdModifiers as p } from "../../testids/index.js";
 import { DRAG_CURSOR_CSS_CLASS as O } from "./consts.js";
-const te = {
+const le = {
   key: 1,
   class: "sortable-list-container"
-}, le = { class: "loader-bars" }, de = {
+}, ae = { class: "loader-bars" }, de = {
   key: 3,
   class: "empty-state-title"
-}, ye = /* @__PURE__ */ P({
+}, me = /* @__PURE__ */ z({
   __name: "SortableList",
   props: {
     items: { default: () => [] },
-    displayValue: { type: Function, default: (d) => d.displayText || d.toString() },
+    displayValue: { type: Function, default: (a) => a.displayText || a.toString() },
     openId: { default: null },
     selectedId: { default: null },
     selectedChildId: { default: null },
+    variant: { default: "default" },
+    draggableArea: { default: "handle" },
     search: { default: null },
     showSearch: { type: Boolean, default: !1 },
     searchPlaceholder: { default: "Search" },
@@ -36,136 +38,142 @@ const te = {
     testId: { default: "" }
   },
   emits: ["sortableItemDragged", "update:items", "update:openId", "update:selectedId", "update:selectedChildId", "update:search", "clearSearch"],
-  setup(d, { emit: n }) {
-    const i = d;
-    z((t) => ({
-      "2b5787e0": d.zIndexBase
+  setup(a, { emit: r }) {
+    const o = a;
+    G((t) => ({
+      dbaa7dcc: a.zIndexBase
     }));
-    const y = G(), u = _(i, "search", n), k = S(() => !!u.value?.trim()), C = S(() => k.value ? i.items.filter((t) => {
-      const a = t.children || [], e = u.value;
-      return i.searchHandler ? i.searchHandler(t, e) : q(t.displayText, e) || // match parent item
-      a.some((o) => q(o.displayText, e));
-    }) : i.items), f = S({
+    const m = U(), u = ee(o, "search", r), b = f(() => !!u.value?.trim()), k = f(() => b.value ? o.items.filter((t) => {
+      const d = t.children || [], e = u.value;
+      return o.searchHandler ? o.searchHandler(t, e) : q(t.displayText, e) || // match parent item
+      d.some((n) => q(n.displayText, e));
+    }) : o.items), g = f({
       get() {
-        return C.value.filter((t) => !t.isLocked);
+        return k.value.filter((t) => !t.isLocked);
       },
       set(t) {
-        n("update:items", [...t, ...L.value]);
+        r("update:items", [...t, ...C.value]);
       }
-    }), L = S(
-      () => C.value.filter((t) => t.isLocked)
-    ), b = U(!1), F = (t) => {
-      b.value = !0, setTimeout(() => t.target.classList.add(O), 50);
-    }, M = (t) => {
-      const { target: a, item: e, newIndex: o } = t;
-      b.value = !1, a.classList.remove(O);
+    }), C = f(
+      () => k.value.filter((t) => t.isLocked)
+    ), F = f(
+      () => o.draggableArea === "handle" ? ".draggable-handle" : ".handle-area"
+    ), L = K(!1), M = (t) => {
+      L.value = !0, setTimeout(() => t.target.classList.add(O), 50);
+    }, P = (t) => {
+      const { target: d, item: e, newIndex: n } = t;
+      L.value = !1, d.classList.remove(O);
       const c = e.attributes["data-id"]?.value;
-      n("sortableItemDragged", { id: c, newIndex: o });
-    }, D = (t) => (k.value || t.id === i.openId) && !b.value, R = (t, a) => {
-      a ? n("update:openId", t.id) : n("update:openId", null);
-    }, m = (t) => t.id === i.selectedId, $ = (t) => {
-      n("update:selectedId", t.id), n("update:selectedChildId", null);
-    }, w = (t, a) => {
-      n("update:selectedChildId", t.id), n("update:selectedId", a.id), n("update:openId", a.id);
-    }, T = ee(i.testId, v);
-    return (t, a) => (s(), r("div", V({ class: "sortable-list-and-header-container" }, l(T)[l(v).CONTAINER]), [
-      l(y).header || d.showSearch ? (s(), r("div", {
+      r("sortableItemDragged", { id: c, newIndex: n });
+    }, A = (t) => (b.value || t.id === o.openId) && !L.value, D = (t, d) => {
+      d ? r("update:openId", t.id) : r("update:openId", null);
+    }, v = (t) => t.id === o.selectedId, H = (t) => {
+      r("update:selectedId", t.id), r("update:selectedChildId", null);
+    }, R = (t, d) => {
+      r("update:selectedChildId", t.id), r("update:selectedId", d.id), r("update:openId", d.id);
+    }, T = te(o.testId, p);
+    return (t, d) => (s(), i("div", V({ class: "sortable-list-and-header-container" }, l(T)[l(p).CONTAINER]), [
+      l(m).header || a.showSearch ? (s(), i("div", {
         key: 0,
-        class: K(["header-container", { sticky: d.isSticky }])
+        class: Q(["header-container", { sticky: a.isSticky }])
       }, [
-        l(y).header ? g(t.$slots, "header", { key: 0 }, void 0, !0) : h("", !0),
-        d.showSearch ? (s(), p(l(X), {
+        l(m).header ? y(t.$slots, "header", { key: 0 }, void 0, !0) : h("", !0),
+        a.showSearch ? (s(), S(l(Y), {
           key: 1,
           modelValue: l(u),
-          "onUpdate:modelValue": a[0] || (a[0] = (e) => A(u) ? u.value = e : null),
-          placeholder: d.searchPlaceholder,
-          "test-id": d.testId,
-          onOnClear: a[1] || (a[1] = (e) => n("clearSearch"))
+          "onUpdate:modelValue": d[0] || (d[0] = (e) => $(u) ? u.value = e : null),
+          placeholder: a.searchPlaceholder,
+          "test-id": a.testId,
+          onOnClear: d[1] || (d[1] = (e) => r("clearSearch"))
         }, null, 8, ["modelValue", "placeholder", "test-id"])) : h("", !0)
       ], 2)) : h("", !0),
-      d.isLoading ? g(t.$slots, "loader", { key: 2 }, () => [
-        Q("div", le, [
-          (s(!0), r(x, null, B(d.loadingRowCount, (e) => (s(), r("div", { key: e }, [
-            H(l(Z), {
+      a.isLoading ? y(t.$slots, "loader", { key: 2 }, () => [
+        j("div", ae, [
+          (s(!0), i(x, null, B(a.loadingRowCount, (e) => (s(), i("div", { key: e }, [
+            E(l(_), {
               round: "",
               class: "loader-bar"
             })
           ]))), 128))
         ])
-      ], !0) : (s(), r("div", te, [
-        l(f).length ? (s(), p(l(W), V({
+      ], !0) : (s(), i("div", le, [
+        l(g).length ? (s(), S(l(X), V({
           key: 0,
-          modelValue: l(f),
-          "onUpdate:modelValue": a[2] || (a[2] = (e) => A(f) ? f.value = e : null),
+          modelValue: l(g),
+          "onUpdate:modelValue": d[2] || (d[2] = (e) => $(g) ? g.value = e : null),
           class: "sortable-list",
           filter: ".expand-icon",
           animation: 150,
-          handle: ".draggable-handle",
-          disabled: l(k)
-        }, l(T)[l(v).DRAGGABLE_LIST], {
-          onStart: F,
-          onEnd: M
+          handle: l(F),
+          disabled: l(b)
+        }, l(T)[l(p).DRAGGABLE_LIST], {
+          onStart: M,
+          onEnd: P
         }), {
           default: I(() => [
-            (s(!0), r(x, null, B(l(f), (e, o) => (s(), p(N, {
+            (s(!0), i(x, null, B(l(g), (e, n) => (s(), S(N, {
               key: e.id,
               "data-id": e.id,
               item: e,
-              index: o,
-              "is-open": D(e),
-              "is-selected": m(e),
-              "selected-child-id": m(e) ? d.selectedChildId : null,
-              "display-value": d.displayValue,
+              index: n,
+              "is-open": A(e),
+              "is-selected": v(e),
+              "is-disabled": !!e.isDisabled,
+              "selected-child-id": v(e) ? a.selectedChildId : null,
+              "display-value": a.displayValue,
               "search-query": l(u),
-              "search-handler": d.searchHandler,
-              onToggle: (c) => R(e, c),
-              onSelect: (c) => $(e),
-              onSelectChild: (c) => w(c, e)
-            }, E({ _: 2 }, [
-              l(y).menu ? {
+              "search-handler": a.searchHandler,
+              variant: a.variant,
+              "draggable-area": a.draggableArea,
+              onToggle: (c) => D(e, c),
+              onSelect: (c) => H(e),
+              onSelectChild: (c) => R(c, e)
+            }, w({ _: 2 }, [
+              l(m).menu ? {
                 name: "menu",
                 fn: I(() => [
-                  g(t.$slots, "menu", { item: e }, void 0, !0)
+                  y(t.$slots, "menu", { item: e }, void 0, !0)
                 ]),
                 key: "0"
               } : void 0
-            ]), 1032, ["data-id", "item", "index", "is-open", "is-selected", "selected-child-id", "display-value", "search-query", "search-handler", "onToggle", "onSelect", "onSelectChild"]))), 128))
+            ]), 1032, ["data-id", "item", "index", "is-open", "is-selected", "is-disabled", "selected-child-id", "display-value", "search-query", "search-handler", "variant", "draggable-area", "onToggle", "onSelect", "onSelectChild"]))), 128))
           ]),
           _: 3
-        }, 16, ["modelValue", "disabled"])) : h("", !0),
-        l(L).length ? (s(), r("div", V({
+        }, 16, ["modelValue", "handle", "disabled"])) : h("", !0),
+        l(C).length ? (s(), i("div", V({
           key: 1,
           class: "locked-list"
-        }, l(T)[l(v).LOCKED_LIST]), [
-          (s(!0), r(x, null, B(l(L), (e) => (s(), p(N, {
+        }, l(T)[l(p).LOCKED_LIST]), [
+          (s(!0), i(x, null, B(l(C), (e) => (s(), S(N, {
             key: e.id,
             item: e,
-            "is-open": D(e),
-            "is-selected": m(e),
-            "selected-child-id": m(e) ? d.selectedChildId : null,
-            "display-value": d.displayValue,
+            "is-open": A(e),
+            "is-selected": v(e),
+            "selected-child-id": v(e) ? a.selectedChildId : null,
+            "display-value": a.displayValue,
             "search-query": l(u),
-            "on-search": d.searchHandler,
-            "child-list-max-height": d.childListMaxHeight,
-            onToggle: (o) => R(e, o),
-            onSelect: (o) => $(e),
-            onSelectChild: (o) => w(o, e)
-          }, E({ _: 2 }, [
-            l(y).menu ? {
+            "on-search": a.searchHandler,
+            "child-list-max-height": a.childListMaxHeight,
+            variant: a.variant,
+            onToggle: (n) => D(e, n),
+            onSelect: (n) => H(e),
+            onSelectChild: (n) => R(n, e)
+          }, w({ _: 2 }, [
+            l(m).menu ? {
               name: "menu",
               fn: I(() => [
-                g(t.$slots, "menu", { item: e }, void 0, !0)
+                y(t.$slots, "menu", { item: e }, void 0, !0)
               ]),
               key: "0"
             } : void 0
-          ]), 1032, ["item", "is-open", "is-selected", "selected-child-id", "display-value", "search-query", "on-search", "child-list-max-height", "onToggle", "onSelect", "onSelectChild"]))), 128))
+          ]), 1032, ["item", "is-open", "is-selected", "selected-child-id", "display-value", "search-query", "on-search", "child-list-max-height", "variant", "onToggle", "onSelect", "onSelectChild"]))), 128))
         ], 16)) : h("", !0)
       ])),
-      !l(C).length && !d.isLoading ? (s(), r("div", de, [
-        g(t.$slots, "empty-state", {}, () => [
-          H(l(Y), { variant: "body2" }, {
+      !l(k).length && !a.isLoading ? (s(), i("div", de, [
+        y(t.$slots, "empty-state", {}, () => [
+          E(l(Z), { variant: "body2" }, {
             default: I(() => [
-              j(J(d.emptyStateTitle), 1)
+              J(W(a.emptyStateTitle), 1)
             ]),
             _: 1
           })
@@ -175,5 +183,5 @@ const te = {
   }
 });
 export {
-  ye as default
+  me as default
 };

package/components/sortableList/composables/useHoverEffect.js

@@ -10,7 +10,7 @@ const d = (e, r) => {
       ) || n.currentTarget.classList.add(r);
     },
     handleMouseout: () => {
-      e.value.classList.remove(r);
+      e.value?.classList.remove(r);
     }
   };
 };

package/components/sortableList/index.d.ts

@@ -6,6 +6,7 @@ declare const SortableListTypes: () => ({
         $props: Partial<{
             search: string;
             testId: string;
+            variant: "default" | "compact";
             isLoading: boolean;
             displayValue: (item: import("./SortableList.types").SortableListItem) => string;
             searchPlaceholder: string;
@@ -13,6 +14,7 @@ declare const SortableListTypes: () => ({
             selectedChildId: string | number;
             childListMaxHeight: string;
             searchHandler: (item: import("./SortableList.types").SortableListItem, searchQuery: string) => boolean;
+            draggableArea: "handle" | "full";
             openId: string | number;
             selectedId: string | number;
             showSearch: boolean;
@@ -29,6 +31,10 @@ declare const SortableListTypes: () => ({
                 type: import("vue").PropType<string>;
                 default: string;
             };
+            variant: {
+                type: import("vue").PropType<"default" | "compact">;
+                default: string;
+            };
             isLoading: {
                 type: import("vue").PropType<boolean>;
                 default: boolean;
@@ -59,6 +65,10 @@ declare const SortableListTypes: () => ({
                 type: import("vue").PropType<(item: import("./SortableList.types").SortableListItem, searchQuery: string) => boolean>;
                 default: any;
             };
+            draggableArea: {
+                type: import("vue").PropType<"handle" | "full">;
+                default: string;
+            };
             openId: {
                 type: import("vue").PropType<string | number>;
                 default: any;
@@ -98,7 +108,7 @@ declare const SortableListTypes: () => ({
             "onUpdate:selectedId"?: (id: string | number) => any;
             "onUpdate:selectedChildId"?: (id: string | number) => any;
             "onUpdate:search"?: (query: string) => any;
-        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "search" | "testId" | "isLoading" | "displayValue" | "searchPlaceholder" | "items" | "selectedChildId" | "childListMaxHeight" | "searchHandler" | "openId" | "selectedId" | "showSearch" | "loadingRowCount" | "emptyStateTitle" | "isSticky" | "zIndexBase">;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "search" | "testId" | "variant" | "isLoading" | "displayValue" | "searchPlaceholder" | "items" | "selectedChildId" | "childListMaxHeight" | "searchHandler" | "draggableArea" | "openId" | "selectedId" | "showSearch" | "loadingRowCount" | "emptyStateTitle" | "isSticky" | "zIndexBase">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -124,6 +134,10 @@ declare const SortableListTypes: () => ({
                 type: import("vue").PropType<string>;
                 default: string;
             };
+            variant: {
+                type: import("vue").PropType<"default" | "compact">;
+                default: string;
+            };
             isLoading: {
                 type: import("vue").PropType<boolean>;
                 default: boolean;
@@ -154,6 +168,10 @@ declare const SortableListTypes: () => ({
                 type: import("vue").PropType<(item: import("./SortableList.types").SortableListItem, searchQuery: string) => boolean>;
                 default: any;
             };
+            draggableArea: {
+                type: import("vue").PropType<"handle" | "full">;
+                default: string;
+            };
             openId: {
                 type: import("vue").PropType<string | number>;
                 default: any;
@@ -207,6 +225,7 @@ declare const SortableListTypes: () => ({
         }, string, {
             search: string;
             testId: string;
+            variant: "default" | "compact";
             isLoading: boolean;
             displayValue: (item: import("./SortableList.types").SortableListItem) => string;
             searchPlaceholder: string;
@@ -214,6 +233,7 @@ declare const SortableListTypes: () => ({
             selectedChildId: string | number;
             childListMaxHeight: string;
             searchHandler: (item: import("./SortableList.types").SortableListItem, searchQuery: string) => boolean;
+            draggableArea: "handle" | "full";
             openId: string | number;
             selectedId: string | number;
             showSearch: boolean;
@@ -250,6 +270,10 @@ declare const SortableListTypes: () => ({
             type: import("vue").PropType<string>;
             default: string;
         };
+        variant: {
+            type: import("vue").PropType<"default" | "compact">;
+            default: string;
+        };
         isLoading: {
             type: import("vue").PropType<boolean>;
             default: boolean;
@@ -280,6 +304,10 @@ declare const SortableListTypes: () => ({
             type: import("vue").PropType<(item: import("./SortableList.types").SortableListItem, searchQuery: string) => boolean>;
             default: any;
         };
+        draggableArea: {
+            type: import("vue").PropType<"handle" | "full">;
+            default: string;
+        };
         openId: {
             type: import("vue").PropType<string | number>;
             default: any;
@@ -332,6 +360,10 @@ declare const SortableListTypes: () => ({
         type: import("vue").PropType<string>;
         default: string;
     };
+    variant: {
+        type: import("vue").PropType<"default" | "compact">;
+        default: string;
+    };
     isLoading: {
         type: import("vue").PropType<boolean>;
         default: boolean;
@@ -362,6 +394,10 @@ declare const SortableListTypes: () => ({
         type: import("vue").PropType<(item: import("./SortableList.types").SortableListItem, searchQuery: string) => boolean>;
         default: any;
     };
+    draggableArea: {
+        type: import("vue").PropType<"handle" | "full">;
+        default: string;
+    };
     openId: {
         type: import("vue").PropType<string | number>;
         default: any;
@@ -415,6 +451,7 @@ declare const SortableListTypes: () => ({
 }, string, {
     search: string;
     testId: string;
+    variant: "default" | "compact";
     isLoading: boolean;
     displayValue: (item: import("./SortableList.types").SortableListItem) => string;
     searchPlaceholder: string;
@@ -422,6 +459,7 @@ declare const SortableListTypes: () => ({
     selectedChildId: string | number;
     childListMaxHeight: string;
     searchHandler: (item: import("./SortableList.types").SortableListItem, searchQuery: string) => boolean;
+    draggableArea: "handle" | "full";
     openId: string | number;
     selectedId: string | number;
     showSearch: boolean;

package/components/switch/v4/SwitchV4.vue.d.ts

@@ -1,26 +1,42 @@
+import { TooltipPositions } from '@/components/tooltip/common/Tooltip.types';
 declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     options: unknown[];
     modelValue: unknown;
+    variant: 'primary' | 'default';
     testId?: string;
     iconKey?: string;
+    tooltipTextKey?: string;
+    tooltipPlacement?: TooltipPositions;
 }>, {
     testId: string;
+    variant: string;
     iconKey: string;
+    tooltipTextKey: string;
+    tooltipPlacement: string;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (...args: any[]) => void;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     options: unknown[];
     modelValue: unknown;
+    variant: 'primary' | 'default';
     testId?: string;
     iconKey?: string;
+    tooltipTextKey?: string;
+    tooltipPlacement?: TooltipPositions;
 }>, {
     testId: string;
+    variant: string;
     iconKey: string;
+    tooltipTextKey: string;
+    tooltipPlacement: string;
 }>>> & {
     "onUpdate:modelValue"?: (...args: any[]) => any;
 }, {
     testId: string;
+    variant: 'primary' | 'default';
+    tooltipPlacement: TooltipPositions;
     iconKey: string;
+    tooltipTextKey: string;
 }>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;

package/components/switch/v4/SwitchV4.vue.js

@@ -1,7 +1,7 @@
 import o from "./SwitchV4.vue2.js";
-/* empty css               */import e from "../../../_virtual/_plugin-vue_export-helper.js";
-// import "../../../SwitchV4.vue_vue_type_style_index_0_scoped_c2e356f5_lang.css"; //*');
-const s = /* @__PURE__ */ e(o, [["__scopeId", "data-v-c2e356f5"]]);
+/* empty css               */import _ from "../../../_virtual/_plugin-vue_export-helper.js";
+// import "../../../SwitchV4.vue_vue_type_style_index_0_scoped_cd6621a7_lang.css"; //*');
+const s = /* @__PURE__ */ _(o, [["__scopeId", "data-v-cd6621a7"]]);
 export {
   s as default
 };

package/components/switch/v4/SwitchV4.vue2.js

@@ -1,44 +1,59 @@
- import "../../../SwitchV4.vue_vue_type_style_index_0_scoped_c2e356f5_lang.css"; import { defineComponent as p, ref as k, onMounted as v, openBlock as a, createElementBlock as d, unref as s, Fragment as I, renderList as V, createBlock as h, normalizeClass as B } from "vue";
-import { useVModel as C } from "@vueuse/core";
+ import "../../../SwitchV4.vue_vue_type_style_index_0_scoped_cd6621a7_lang.css"; import { defineComponent as T, ref as h, onMounted as k, openBlock as c, createElementBlock as r, normalizeClass as m, unref as a, Fragment as x, renderList as V, createBlock as w, withCtx as y, createVNode as C } from "vue";
+import { useVModel as I } from "@vueuse/core";
+import { SwitchTestIdModifiers as u } from "../../../testids/index.js";
 import "../../button/v4/ButtonV4.vue.js";
 import $ from "../../button/v4/IconButtonV4.vue.js";
 import "../../button/v4/ButtonGroup.vue.js";
 import "../../button/v4/ToggleButtonGroupAB.vue.js";
-import { SwitchTestIdModifiers as r } from "../../../testids/index.js";
-const w = ["data-testid"], S = /* @__PURE__ */ p({
+import B from "../../tooltip/v4/TooltipV4.vue.js";
+const K = ["data-testid"], A = /* @__PURE__ */ T({
   __name: "SwitchV4",
   props: {
     options: null,
     modelValue: null,
+    variant: { default: "default" },
     testId: { default: "" },
-    iconKey: { default: "icon" }
+    iconKey: { default: "icon" },
+    tooltipTextKey: { default: "tooltipText" },
+    tooltipPlacement: { default: "top" }
   },
   emits: ["update:modelValue"],
-  setup(e, { emit: m }) {
-    const o = e, n = k(), u = C(o, "modelValue", m);
-    v(() => {
-      n.value = o.options.findIndex(
-        (t) => t === o.modelValue
+  setup(t, { emit: f }) {
+    const i = t, n = h(), p = I(i, "modelValue", f), d = (e) => n.value === e;
+    k(() => {
+      n.value = i.options.findIndex(
+        (e) => e === i.modelValue
       );
     });
-    const f = (t, i) => {
-      n.value = i, u.value = t;
+    const v = (e, s) => {
+      n.value = s, p.value = e;
     };
-    return (t, i) => (a(), d("div", {
-      class: "switch",
-      "data-testid": `${e.testId}-${s(r).WRAPPER}`
+    return (e, s) => (c(), r("div", {
+      class: m(["switch", [`switch--variant-${t.variant}`]]),
+      "data-testid": `${t.testId}-${a(u).WRAPPER}`
     }, [
-      (a(!0), d(I, null, V(e.options, (c, l) => (a(), h(s($), {
+      (c(!0), r(x, null, V(t.options, (o, l) => (c(), w(a(B), {
         key: l,
-        class: B(["option", { "option--selected": n.value === l }]),
-        "icon-name": c[e.iconKey],
-        size: "small",
-        "data-testid": `${e.testId}-${s(r).BUTTON}`,
-        onClick: (y) => f(c, l)
-      }, null, 8, ["class", "icon-name", "data-testid", "onClick"]))), 128))
-    ], 8, w));
+        text: o[t.tooltipTextKey],
+        disabled: !o[t.tooltipTextKey],
+        placement: t.tooltipPlacement,
+        class: "option-wrapper"
+      }, {
+        default: y(() => [
+          C(a($), {
+            class: m(["option", { "option--selected": d(l) }]),
+            "icon-name": o[t.iconKey],
+            size: "small",
+            color: d(l) ? t.variant : "default",
+            "data-testid": `${t.testId}-${a(u).BUTTON}`,
+            onClick: (P) => v(o, l)
+          }, null, 8, ["class", "icon-name", "color", "data-testid", "onClick"])
+        ]),
+        _: 2
+      }, 1032, ["text", "disabled", "placement"]))), 128))
+    ], 10, K));
   }
 });
 export {
-  S as default
+  A as default
 };