@ironsource/shared-ui 2.1.7-rc.1 → 2.1.7-rc.11

package/components/sortableList/SortableList.vue2.js

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

package/components/sortableList/index.d.ts

@@ -6,6 +6,7 @@ declare const SortableListTypes: () => ({
         $props: Partial<{
             search: string;
             testId: string;
+            isLoading: boolean;
             displayValue: (item: import("./SortableList.types").SortableListItem) => string;
             searchPlaceholder: string;
             items: import("./SortableList.types").SortableListItem[];
@@ -14,6 +15,8 @@ declare const SortableListTypes: () => ({
             openId: string | number;
             selectedId: string | number;
             showSearch: boolean;
+            loadingRowCount: number;
+            emptyStateTitle: string;
         }> & Omit<Readonly<import("vue").ExtractPropTypes<{
             search: {
                 type: import("vue").PropType<string>;
@@ -23,6 +26,10 @@ declare const SortableListTypes: () => ({
                 type: import("vue").PropType<string>;
                 default: string;
             };
+            isLoading: {
+                type: import("vue").PropType<boolean>;
+                default: boolean;
+            };
             displayValue: {
                 type: import("vue").PropType<(item: import("./SortableList.types").SortableListItem) => string>;
                 required: true;
@@ -57,6 +64,14 @@ declare const SortableListTypes: () => ({
                 type: import("vue").PropType<boolean>;
                 default: boolean;
             };
+            loadingRowCount: {
+                type: import("vue").PropType<number>;
+                default: number;
+            };
+            emptyStateTitle: {
+                type: import("vue").PropType<string>;
+                default: string;
+            };
         }>> & {
             "onUpdate:items"?: (items: import("./SortableList.types").SortableListItem[]) => any;
             "onUpdate:openId"?: (id: string | number) => any;
@@ -64,7 +79,7 @@ declare const SortableListTypes: () => ({
             "onUpdate:selectedChildId"?: (id: string | number) => any;
             "onUpdate:search"?: (query: string) => any;
             onClearSearch?: () => any;
-        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "search" | "testId" | "displayValue" | "searchPlaceholder" | "items" | "selectedChildId" | "searchHandler" | "openId" | "selectedId" | "showSearch">;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "search" | "testId" | "isLoading" | "displayValue" | "searchPlaceholder" | "items" | "selectedChildId" | "searchHandler" | "openId" | "selectedId" | "showSearch" | "loadingRowCount" | "emptyStateTitle">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -87,6 +102,10 @@ declare const SortableListTypes: () => ({
                 type: import("vue").PropType<string>;
                 default: string;
             };
+            isLoading: {
+                type: import("vue").PropType<boolean>;
+                default: boolean;
+            };
             displayValue: {
                 type: import("vue").PropType<(item: import("./SortableList.types").SortableListItem) => string>;
                 required: true;
@@ -121,6 +140,14 @@ declare const SortableListTypes: () => ({
                 type: import("vue").PropType<boolean>;
                 default: boolean;
             };
+            loadingRowCount: {
+                type: import("vue").PropType<number>;
+                default: number;
+            };
+            emptyStateTitle: {
+                type: import("vue").PropType<string>;
+                default: string;
+            };
         }>> & {
             "onUpdate:items"?: (items: import("./SortableList.types").SortableListItem[]) => any;
             "onUpdate:openId"?: (id: string | number) => any;
@@ -138,6 +165,7 @@ declare const SortableListTypes: () => ({
         }, string, {
             search: string;
             testId: string;
+            isLoading: boolean;
             displayValue: (item: import("./SortableList.types").SortableListItem) => string;
             searchPlaceholder: string;
             items: import("./SortableList.types").SortableListItem[];
@@ -146,6 +174,8 @@ declare const SortableListTypes: () => ({
             openId: string | number;
             selectedId: string | number;
             showSearch: boolean;
+            loadingRowCount: number;
+            emptyStateTitle: string;
         }, {}, string> & {
             beforeCreate?: (() => void) | (() => void)[];
             created?: (() => void) | (() => void)[];
@@ -175,6 +205,10 @@ declare const SortableListTypes: () => ({
             type: import("vue").PropType<string>;
             default: string;
         };
+        isLoading: {
+            type: import("vue").PropType<boolean>;
+            default: boolean;
+        };
         displayValue: {
             type: import("vue").PropType<(item: import("./SortableList.types").SortableListItem) => string>;
             required: true;
@@ -209,6 +243,14 @@ declare const SortableListTypes: () => ({
             type: import("vue").PropType<boolean>;
             default: boolean;
         };
+        loadingRowCount: {
+            type: import("vue").PropType<number>;
+            default: number;
+        };
+        emptyStateTitle: {
+            type: import("vue").PropType<string>;
+            default: string;
+        };
     }>> & {
         "onUpdate:items"?: (items: import("./SortableList.types").SortableListItem[]) => any;
         "onUpdate:openId"?: (id: string | number) => any;
@@ -229,6 +271,10 @@ declare const SortableListTypes: () => ({
         type: import("vue").PropType<string>;
         default: string;
     };
+    isLoading: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
     displayValue: {
         type: import("vue").PropType<(item: import("./SortableList.types").SortableListItem) => string>;
         required: true;
@@ -263,6 +309,14 @@ declare const SortableListTypes: () => ({
         type: import("vue").PropType<boolean>;
         default: boolean;
     };
+    loadingRowCount: {
+        type: import("vue").PropType<number>;
+        default: number;
+    };
+    emptyStateTitle: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
 }>> & {
     "onUpdate:items"?: (items: import("./SortableList.types").SortableListItem[]) => any;
     "onUpdate:openId"?: (id: string | number) => any;
@@ -280,6 +334,7 @@ declare const SortableListTypes: () => ({
 }, string, {
     search: string;
     testId: string;
+    isLoading: boolean;
     displayValue: (item: import("./SortableList.types").SortableListItem) => string;
     searchPlaceholder: string;
     items: import("./SortableList.types").SortableListItem[];
@@ -288,11 +343,15 @@ declare const SortableListTypes: () => ({
     openId: string | number;
     selectedId: string | number;
     showSearch: boolean;
+    loadingRowCount: number;
+    emptyStateTitle: string;
 }, {}, string> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
     $slots: {
         menu?(_: {
             item: import("./SortableList.types").SortableListItem;
         }): any;
+        loader?(_: {}): any;
+        "empty-state"?(_: {}): any;
     };
 }))[];
 export { SortableList, SortableListTypes };

package/components/statusDot/StatusDot.vue.js

@@ -0,0 +1,7 @@
+import o from "./StatusDot.vue2.js";
+/* empty css                */import t from "../../_virtual/_plugin-vue_export-helper.js";
+// import "../../StatusDot.vue_vue_type_style_index_0_scoped_0c8a38e5_lang.css"; //*');
+const a = /* @__PURE__ */ t(o, [["__scopeId", "data-v-0c8a38e5"]]);
+export {
+  a as default
+};

package/components/statusDot/StatusDot.vue2.js

@@ -0,0 +1,15 @@
+ import "../../StatusDot.vue_vue_type_style_index_0_scoped_0c8a38e5_lang.css"; import { defineComponent as t, openBlock as s, createElementBlock as o, normalizeClass as a } from "vue";
+const r = /* @__PURE__ */ t({
+  __name: "StatusDot",
+  props: {
+    type: { default: "success" }
+  },
+  setup(e) {
+    return (n, c) => (s(), o("div", {
+      class: a([e.type, "status-dot"])
+    }, null, 2));
+  }
+});
+export {
+  r as default
+};

package/components/switch/v3/Switch.vue.js

@@ -0,0 +1,7 @@
+import o from "./Switch.vue2.js";
+/* empty css             */import c from "../../../_virtual/_plugin-vue_export-helper.js";
+// import "../../../Switch.vue_vue_type_style_index_0_scoped_9c008fc4_lang.css"; //*');
+const s = /* @__PURE__ */ c(o, [["__scopeId", "data-v-9c008fc4"]]);
+export {
+  s as default
+};

package/components/switch/v3/Switch.vue2.js

@@ -0,0 +1,69 @@
+ import "../../../Switch.vue_vue_type_style_index_0_scoped_9c008fc4_lang.css"; import { defineComponent as b, ref as d, computed as k, onMounted as z, openBlock as r, createElementBlock as c, normalizeClass as u, unref as l, createElementVNode as V, normalizeStyle as g, Fragment as T, renderList as C, renderSlot as I, createVNode as y, withCtx as S, createTextVNode as E, toDisplayString as N } from "vue";
+import { useVModel as R } from "@vueuse/core";
+import B from "../../typography/Text.vue.js";
+import { SwitchTestIdModifiers as f } from "../../../testids/index.js";
+const M = ["data-testid"], P = ["aria-label", "data-testid", "onClick"], D = /* @__PURE__ */ b({
+  __name: "Switch",
+  props: {
+    options: null,
+    modelValue: null,
+    size: { default: "lg" },
+    testId: { default: "" }
+  },
+  emits: ["update:modelValue"],
+  setup(e, { emit: v }) {
+    const n = e, w = d(null), p = R(n, "modelValue", v), i = d([]), x = { optionsRefs: i }, t = d(), m = k(() => ({
+      left: i.value[t.value]?.offsetLeft,
+      width: i.value[t.value]?.offsetWidth
+    }));
+    z(() => {
+      t.value = n.options.findIndex(
+        (s) => s === n.modelValue
+      );
+    });
+    const $ = (s, h) => {
+      t.value = h, p.value = s;
+    };
+    return (s, h) => (r(), c("div", {
+      class: u(["switch", { "switch--lg": e.size === "lg", "switch--sm": e.size === "sm" }]),
+      "data-testid": `${e.testId}-${l(f).WRAPPER}`
+    }, [
+      V("span", {
+        ref_key: "box",
+        ref: w,
+        class: u(["box", { "box--lg": e.size === "lg", "box--sm": e.size === "sm" }]),
+        style: g({
+          transform: `translateX(${l(m)?.left}px)`,
+          width: l(m)?.width + "px"
+        })
+      }, null, 6),
+      (r(!0), c(T, null, C(e.options, (o, a) => (r(), c("button", {
+        ref_for: !0,
+        ref: x.optionsRefs,
+        key: a,
+        "aria-label": o,
+        class: u([{ "option--selected": t.value === a }, "option"]),
+        "data-testid": `${e.testId}-${l(f).BUTTON}`,
+        onClick: (L) => $(o, a)
+      }, [
+        I(s.$slots, "default", {
+          option: o,
+          selected: t.value === a
+        }, () => [
+          y(B, {
+            size: "caption",
+            "data-testid": `${e.testId}-${l(f).TEXT}`
+          }, {
+            default: S(() => [
+              E(N(o), 1)
+            ]),
+            _: 2
+          }, 1032, ["data-testid"])
+        ], !0)
+      ], 10, P))), 128))
+    ], 10, M));
+  }
+});
+export {
+  D as default
+};

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

@@ -0,0 +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"]]);
+export {
+  s as default
+};

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

@@ -0,0 +1,42 @@
+ 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 "../../button/v4/ButtonV4.vue.js";
+import $ from "../../button/v4/IconButtonV4.vue.js";
+import { SwitchTestIdModifiers as u } from "../../../testids/index.js";
+const w = ["data-testid"], P = /* @__PURE__ */ p({
+  __name: "SwitchV4",
+  props: {
+    options: null,
+    modelValue: null,
+    testId: { default: "" },
+    iconKey: { default: "icon" }
+  },
+  emits: ["update:modelValue"],
+  setup(e, { emit: r }) {
+    const o = e, n = k(), m = C(o, "modelValue", r);
+    v(() => {
+      n.value = o.options.findIndex(
+        (t) => t === o.modelValue
+      );
+    });
+    const f = (t, i) => {
+      n.value = i, m.value = t;
+    };
+    return (t, i) => (a(), d("div", {
+      class: "switch",
+      "data-testid": `${e.testId}-${s(u).WRAPPER}`
+    }, [
+      (a(!0), d(I, null, V(e.options, (c, l) => (a(), h(s($), {
+        key: l,
+        class: B(["option", { "option--selected": n.value === l }]),
+        "icon-name": c[e.iconKey],
+        size: "small",
+        "data-testid": `${e.testId}-${s(u).BUTTON}`,
+        onClick: (y) => f(c, l)
+      }, null, 8, ["class", "icon-name", "data-testid", "onClick"]))), 128))
+    ], 8, w));
+  }
+});
+export {
+  P as default
+};

package/components/table/v3/SortOrderIcon.vue.js

@@ -0,0 +1,21 @@
+import { openBlock as t, createElementBlock as e, pushScopeId as c, popScopeId as r, createElementVNode as n } from "vue";
+/* empty css                    */import s from "../../../_virtual/_plugin-vue_export-helper.js";
+const _ = {}, d = (o) => (c("data-v-cb20f507"), o = o(), r(), o), p = {
+  width: "8",
+  height: "4",
+  viewBox: "0 0 8 4",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, i = /* @__PURE__ */ d(() => /* @__PURE__ */ n("path", {
+  d: "M7.94188 3.66979L4.21022 0.0771272C4.1034 -0.0257091 3.89773 -0.0257091 3.78978 0.0771272L0.0581151 3.66979C-0.0805157 3.80376 0.0444792 4 0.268334 4H7.73167C7.95552 4 8.08052 3.80376 7.94188 3.66979Z",
+  fill: "currentColor"
+}, null, -1)), l = [
+  i
+];
+function a(o, f) {
+  return t(), e("svg", p, l);
+}
+const u = /* @__PURE__ */ s(_, [["render", a], ["__scopeId", "data-v-cb20f507"]]);
+export {
+  u as default
+};

package/components/table/v3/Table.vue.d.ts

@@ -84,15 +84,15 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
 }, {
     testId: string;
     isLoading: boolean;
+    loadingRowCount: number;
+    emptyStateTitle: string;
     isSticky: boolean;
     sections: Section[];
     isStickyHeader: boolean;
-    emptyStateTitle: string;
     emptyStateSubtitle: string;
     isInfiniteScroll: boolean;
     infiniteScrollThreshold: number;
     rowHeight: number | ((index: number) => number);
-    loadingRowCount: number;
     defaultScrollPosition: number;
 }>, Partial<Record<`section-${string}`, (_: {}) => any>> & Partial<Record<`header-${string}`, (_: {
     column: Column;

package/components/table/v3/Table.vue.js

@@ -0,0 +1,7 @@
+import e from "./Table.vue2.js";
+/* empty css            *//* empty css            */import o from "../../../_virtual/_plugin-vue_export-helper.js";
+// import "../../../Table.vue_vue_type_style_index_0_scoped_76fef9bd_lang.css"; //*');
+const f = /* @__PURE__ */ o(e, [["__scopeId", "data-v-76fef9bd"]]);
+export {
+  f as default
+};