@ironsource/shared-ui 2.1.11-test.5 → 2.1.11-test.50

package/components/sortableList/SortableList.vue2.js

@@ -1,21 +1,21 @@
- import "../../SortableList.vue_vue_type_style_index_0_scoped_e9cd63b8_lang.css"; import { defineComponent as F, computed as f, ref as P, openBlock as s, createElementBlock as i, mergeProps as T, unref as l, createBlock as g, isRef as N, createCommentVNode as y, withCtx as m, Fragment as V, renderList as D, 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 w 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 x } 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 q } from "./consts.js";
-const X = {
+ 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 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 { matchString as q } from "../../utils/search.js";
+import { useTestIdAttrs as ee } from "../../utils/testIds.js";
+import { SortableListTestIdModifiers as v } from "../../testids/index.js";
+import { DRAG_CURSOR_CSS_CLASS as O } from "./consts.js";
+const te = {
   key: 1,
   class: "sortable-list-container"
-}, Y = { class: "loader-bars" }, Z = {
+}, le = { class: "loader-bars" }, de = {
   key: 3,
   class: "empty-state-title"
-}, ue = /* @__PURE__ */ F({
+}, ye = /* @__PURE__ */ P({
   __name: "SortableList",
   props: {
     items: { default: () => [] },
@@ -30,131 +30,150 @@ const X = {
     isLoading: { type: Boolean, default: !1 },
     loadingRowCount: { default: 3 },
     emptyStateTitle: { default: "No results" },
+    childListMaxHeight: { default: "530px" },
+    isSticky: { type: Boolean, default: !0 },
+    zIndexBase: { default: 100 },
     testId: { default: "" }
   },
   emits: ["sortableItemDragged", "update:items", "update:openId", "update:selectedId", "update:selectedChildId", "update:search", "clearSearch"],
-  setup(d, { emit: o }) {
-    const n = d, u = J(n, "search", o), v = f(() => !!u.value?.trim()), C = f(() => v.value ? n.items.filter((t) => {
+  setup(d, { emit: n }) {
+    const i = d;
+    z((t) => ({
+      "2b5787e0": d.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 n.searchHandler ? n.searchHandler(t, e) : x(t.displayText, e) || // match parent item
-      a.some((r) => x(r.displayText, e));
-    }) : n.items), h = f({
+      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({
       get() {
         return C.value.filter((t) => !t.isLocked);
       },
       set(t) {
-        o("update:items", [...t, ...b.value]);
+        n("update:items", [...t, ...L.value]);
       }
-    }), b = f(
+    }), L = S(
       () => C.value.filter((t) => t.isLocked)
-    ), k = P(!1), H = (t) => {
-      k.value = !0, setTimeout(() => t.target.classList.add(q), 50);
-    }, O = (t) => {
-      const { target: a, item: e, newIndex: r } = t;
-      k.value = !1, a.classList.remove(q);
+    ), 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);
       const c = e.attributes["data-id"]?.value;
-      o("sortableItemDragged", { id: c, newIndex: r });
-    }, R = (t) => (v.value || t.id === n.openId) && !k.value, A = (t, a) => {
-      a ? o("update:openId", t.id) : o("update:openId", null);
-    }, p = (t) => t.id === n.selectedId, B = (t) => {
-      o("update:selectedId", t.id), o("update:selectedChildId", null);
-    }, E = (t, a) => {
-      o("update:selectedChildId", t.id), o("update:selectedId", a.id), o("update:openId", a.id);
-    }, L = W(n.testId, I);
-    return (t, a) => (s(), i("div", T({ class: "sortable-list-and-search-container" }, l(L)[l(I).CONTAINER]), [
-      d.showSearch ? (s(), g(l(Q), {
+      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", {
         key: 0,
-        modelValue: l(u),
-        "onUpdate:modelValue": a[0] || (a[0] = (e) => N(u) ? u.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(t.$slots, "loader", { key: 2 }, () => [
-        G("div", Y, [
-          (s(!0), i(V, null, D(d.loadingRowCount, (e) => (s(), i("div", { key: e }, [
-            $(l(z), {
+        class: K(["header-container", { sticky: d.isSticky }])
+      }, [
+        l(y).header ? g(t.$slots, "header", { key: 0 }, void 0, !0) : h("", !0),
+        d.showSearch ? (s(), p(l(X), {
+          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"))
+        }, 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), {
               round: "",
               class: "loader-bar"
             })
           ]))), 128))
         ])
-      ], !0) : (s(), i("div", X, [
-        l(h).length ? (s(), g(l(K), T({
+      ], !0) : (s(), r("div", te, [
+        l(f).length ? (s(), p(l(W), V({
           key: 0,
-          modelValue: l(h),
-          "onUpdate:modelValue": a[2] || (a[2] = (e) => N(h) ? h.value = e : null),
+          modelValue: l(f),
+          "onUpdate:modelValue": a[2] || (a[2] = (e) => A(f) ? f.value = e : null),
           class: "sortable-list",
           filter: ".expand-icon",
           animation: 150,
           handle: ".draggable-handle",
-          disabled: l(v)
-        }, l(L)[l(I).DRAGGABLE_LIST], {
-          onStart: H,
-          onEnd: O
+          disabled: l(k)
+        }, l(T)[l(v).DRAGGABLE_LIST], {
+          onStart: F,
+          onEnd: M
         }), {
-          default: m(() => [
-            (s(!0), i(V, null, D(l(h), (e, r) => (s(), g(w, {
+          default: I(() => [
+            (s(!0), r(x, null, B(l(f), (e, o) => (s(), p(N, {
               key: e.id,
               "data-id": e.id,
               item: e,
-              index: r,
-              "is-open": R(e),
-              "is-selected": p(e),
-              "selected-child-id": p(e) ? d.selectedChildId : null,
+              index: o,
+              "is-open": D(e),
+              "is-selected": m(e),
+              "selected-child-id": m(e) ? d.selectedChildId : null,
               "display-value": d.displayValue,
               "search-query": l(u),
               "search-handler": d.searchHandler,
-              onToggle: (c) => A(e, c),
-              onSelect: (c) => B(e),
-              onSelectChild: (c) => E(c, e)
-            }, {
-              menu: m(() => [
-                S(t.$slots, "menu", { item: e }, void 0, !0)
-              ]),
-              _: 2
-            }, 1032, ["data-id", "item", "index", "is-open", "is-selected", "selected-child-id", "display-value", "search-query", "search-handler", "onToggle", "onSelect", "onSelectChild"]))), 128))
+              onToggle: (c) => R(e, c),
+              onSelect: (c) => $(e),
+              onSelectChild: (c) => w(c, e)
+            }, E({ _: 2 }, [
+              l(y).menu ? {
+                name: "menu",
+                fn: I(() => [
+                  g(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))
           ]),
           _: 3
-        }, 16, ["modelValue", "disabled"])) : y("", !0),
-        l(b).length ? (s(), i("div", T({
+        }, 16, ["modelValue", "disabled"])) : h("", !0),
+        l(L).length ? (s(), r("div", V({
           key: 1,
           class: "locked-list"
-        }, l(L)[l(I).LOCKED_LIST]), [
-          (s(!0), i(V, null, D(l(b), (e) => (s(), g(w, {
+        }, l(T)[l(v).LOCKED_LIST]), [
+          (s(!0), r(x, null, B(l(L), (e) => (s(), p(N, {
             key: e.id,
             item: e,
-            "is-open": R(e),
-            "is-selected": p(e),
-            "selected-child-id": p(e) ? d.selectedChildId : null,
+            "is-open": D(e),
+            "is-selected": m(e),
+            "selected-child-id": m(e) ? d.selectedChildId : null,
             "display-value": d.displayValue,
             "search-query": l(u),
             "on-search": d.searchHandler,
-            onToggle: (r) => A(e, r),
-            onSelect: (r) => B(e),
-            onSelectChild: (r) => E(r, e)
-          }, {
-            menu: m(() => [
-              S(t.$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)
+            "child-list-max-height": d.childListMaxHeight,
+            onToggle: (o) => R(e, o),
+            onSelect: (o) => $(e),
+            onSelectChild: (o) => w(o, e)
+          }, E({ _: 2 }, [
+            l(y).menu ? {
+              name: "menu",
+              fn: I(() => [
+                g(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))
+        ], 16)) : h("", !0)
       ])),
-      !l(C).length && !d.isLoading ? (s(), i("div", Z, [
-        S(t.$slots, "empty-state", {}, () => [
-          $(l(j), { variant: "body2" }, {
-            default: m(() => [
-              U(M(d.emptyStateTitle), 1)
+      !l(C).length && !d.isLoading ? (s(), r("div", de, [
+        g(t.$slots, "empty-state", {}, () => [
+          H(l(Y), { variant: "body2" }, {
+            default: I(() => [
+              j(J(d.emptyStateTitle), 1)
             ]),
             _: 1
           })
         ], !0)
-      ])) : y("", !0)
+      ])) : h("", !0)
     ], 16));
   }
 });
 export {
-  ue as default
+  ye as default
 };

package/components/sortableList/index.d.ts

@@ -11,12 +11,15 @@ declare const SortableListTypes: () => ({
             searchPlaceholder: string;
             items: import("./SortableList.types").SortableListItem[];
             selectedChildId: string | number;
+            childListMaxHeight: string;
             searchHandler: (item: import("./SortableList.types").SortableListItem, searchQuery: string) => boolean;
             openId: string | number;
             selectedId: string | number;
             showSearch: boolean;
             loadingRowCount: number;
             emptyStateTitle: string;
+            isSticky: boolean;
+            zIndexBase: number;
         }> & Omit<Readonly<import("vue").ExtractPropTypes<{
             search: {
                 type: import("vue").PropType<string>;
@@ -48,6 +51,10 @@ declare const SortableListTypes: () => ({
                 type: import("vue").PropType<string | number>;
                 default: any;
             };
+            childListMaxHeight: {
+                type: import("vue").PropType<string>;
+                default: string;
+            };
             searchHandler: {
                 type: import("vue").PropType<(item: import("./SortableList.types").SortableListItem, searchQuery: string) => boolean>;
                 default: any;
@@ -72,7 +79,16 @@ declare const SortableListTypes: () => ({
                 type: import("vue").PropType<string>;
                 default: string;
             };
+            isSticky: {
+                type: import("vue").PropType<boolean>;
+                default: boolean;
+            };
+            zIndexBase: {
+                type: import("vue").PropType<number>;
+                default: number;
+            };
         }>> & {
+            onClearSearch?: () => any;
             onSortableItemDragged?: (event: {
                 id: string;
                 newIndex: number;
@@ -82,8 +98,7 @@ declare const SortableListTypes: () => ({
             "onUpdate:selectedId"?: (id: string | number) => any;
             "onUpdate:selectedChildId"?: (id: string | number) => any;
             "onUpdate:search"?: (query: string) => any;
-            onClearSearch?: () => any;
-        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "search" | "testId" | "isLoading" | "displayValue" | "searchPlaceholder" | "items" | "selectedChildId" | "searchHandler" | "openId" | "selectedId" | "showSearch" | "loadingRowCount" | "emptyStateTitle">;
+        } & 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">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -131,6 +146,10 @@ declare const SortableListTypes: () => ({
                 type: import("vue").PropType<string | number>;
                 default: any;
             };
+            childListMaxHeight: {
+                type: import("vue").PropType<string>;
+                default: string;
+            };
             searchHandler: {
                 type: import("vue").PropType<(item: import("./SortableList.types").SortableListItem, searchQuery: string) => boolean>;
                 default: any;
@@ -155,7 +174,16 @@ declare const SortableListTypes: () => ({
                 type: import("vue").PropType<string>;
                 default: string;
             };
+            isSticky: {
+                type: import("vue").PropType<boolean>;
+                default: boolean;
+            };
+            zIndexBase: {
+                type: import("vue").PropType<number>;
+                default: number;
+            };
         }>> & {
+            onClearSearch?: () => any;
             onSortableItemDragged?: (event: {
                 id: string;
                 newIndex: number;
@@ -165,7 +193,6 @@ declare const SortableListTypes: () => ({
             "onUpdate:selectedId"?: (id: string | number) => any;
             "onUpdate:selectedChildId"?: (id: string | number) => any;
             "onUpdate:search"?: (query: string) => any;
-            onClearSearch?: () => any;
         }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
             sortableItemDragged: (event: {
                 id: string;
@@ -185,12 +212,15 @@ declare const SortableListTypes: () => ({
             searchPlaceholder: string;
             items: import("./SortableList.types").SortableListItem[];
             selectedChildId: string | number;
+            childListMaxHeight: string;
             searchHandler: (item: import("./SortableList.types").SortableListItem, searchQuery: string) => boolean;
             openId: string | number;
             selectedId: string | number;
             showSearch: boolean;
             loadingRowCount: number;
             emptyStateTitle: string;
+            isSticky: boolean;
+            zIndexBase: number;
         }, {}, string> & {
             beforeCreate?: (() => void) | (() => void)[];
             created?: (() => void) | (() => void)[];
@@ -242,6 +272,10 @@ declare const SortableListTypes: () => ({
             type: import("vue").PropType<string | number>;
             default: any;
         };
+        childListMaxHeight: {
+            type: import("vue").PropType<string>;
+            default: string;
+        };
         searchHandler: {
             type: import("vue").PropType<(item: import("./SortableList.types").SortableListItem, searchQuery: string) => boolean>;
             default: any;
@@ -266,7 +300,16 @@ declare const SortableListTypes: () => ({
             type: import("vue").PropType<string>;
             default: string;
         };
+        isSticky: {
+            type: import("vue").PropType<boolean>;
+            default: boolean;
+        };
+        zIndexBase: {
+            type: import("vue").PropType<number>;
+            default: number;
+        };
     }>> & {
+        onClearSearch?: () => any;
         onSortableItemDragged?: (event: {
             id: string;
             newIndex: number;
@@ -276,7 +319,6 @@ declare const SortableListTypes: () => ({
         "onUpdate:selectedId"?: (id: string | number) => any;
         "onUpdate:selectedChildId"?: (id: string | number) => any;
         "onUpdate:search"?: (query: string) => any;
-        onClearSearch?: () => any;
     } & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties & {};
     __isFragment?: never;
     __isTeleport?: never;
@@ -312,6 +354,10 @@ declare const SortableListTypes: () => ({
         type: import("vue").PropType<string | number>;
         default: any;
     };
+    childListMaxHeight: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
     searchHandler: {
         type: import("vue").PropType<(item: import("./SortableList.types").SortableListItem, searchQuery: string) => boolean>;
         default: any;
@@ -336,7 +382,16 @@ declare const SortableListTypes: () => ({
         type: import("vue").PropType<string>;
         default: string;
     };
+    isSticky: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    zIndexBase: {
+        type: import("vue").PropType<number>;
+        default: number;
+    };
 }>> & {
+    onClearSearch?: () => any;
     onSortableItemDragged?: (event: {
         id: string;
         newIndex: number;
@@ -346,7 +401,6 @@ declare const SortableListTypes: () => ({
     "onUpdate:selectedId"?: (id: string | number) => any;
     "onUpdate:selectedChildId"?: (id: string | number) => any;
     "onUpdate:search"?: (query: string) => any;
-    onClearSearch?: () => any;
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     sortableItemDragged: (event: {
         id: string;
@@ -366,14 +420,18 @@ declare const SortableListTypes: () => ({
     searchPlaceholder: string;
     items: import("./SortableList.types").SortableListItem[];
     selectedChildId: string | number;
+    childListMaxHeight: string;
     searchHandler: (item: import("./SortableList.types").SortableListItem, searchQuery: string) => boolean;
     openId: string | number;
     selectedId: string | number;
     showSearch: boolean;
     loadingRowCount: number;
     emptyStateTitle: string;
+    isSticky: boolean;
+    zIndexBase: number;
 }, {}, string> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
     $slots: {
+        header?(_: {}): any;
         menu?(_: {
             item: import("./SortableList.types").SortableListItem;
         }): any;

package/components/table/common/Table.common.d.ts

@@ -19,7 +19,7 @@ export declare const tableCommon: (props: any, emit: any) => {
     floatingActionRef: import("vue").Ref<HTMLDivElement>;
     scrollToTop: () => void;
     toggleSortOrder: (column: Column) => void;
-    columnsStickyPositions: import("vue").ComputedRef<Record<string, string>>;
+    columnsStickyPositions: import("vue").ComputedRef<Record<string, CSSProperties>>;
     hasSearchSlot: import("vue").ComputedRef<boolean>;
     showBackToTopButton: import("vue").ComputedRef<boolean>;
     containerStyle: import("vue").ComputedRef<CSSProperties>;