@ironsource/shared-ui 2.1.11-test.8 → 2.1.11-test.91

package/components/table/v4/MultipleDataGrid.vue2.js

@@ -0,0 +1,181 @@
+ import "../../../MultipleDataGrid.vue_vue_type_style_index_0_scoped_020a9896_lang.css"; import { defineComponent as A, useCssVars as K, useSlots as H, computed as O, openBlock as d, createElementBlock as c, createElementVNode as k, normalizeClass as G, unref as s, renderSlot as i, createBlock as C, createCommentVNode as m, createVNode as M, isRef as R, Fragment as F, renderList as f, createSlots as $, withCtx as y } from "vue";
+import b from "./DataGrid.vue.js";
+import "./DataGridMenu.vue.js";
+import P from "./DataGridRowsCounter.vue.js";
+import "./MultipleDataGrid.vue.js";
+import U from "../../search/v4/SearchV4.vue.js";
+import { useVModel as Q } from "@vueuse/core";
+import { TableTestIdModifiers as g } from "../../../testids/index.js";
+const j = ["data-testid"], q = ["data-testid"], J = ["data-testid"], W = ["data-testid"], X = {
+  key: 0,
+  class: "tables-container"
+}, st = /* @__PURE__ */ A({
+  __name: "MultipleDataGrid",
+  props: {
+    tablesSettings: { default: () => [] },
+    loadingAndEmptyStatesColumns: { default: () => [] },
+    getRowId: { type: Function, default: (t, l) => l },
+    getRowKey: { type: Function, default: (t, l) => l },
+    isSticky: { type: Boolean, default: !0 },
+    isLoading: { type: Boolean, default: !1 },
+    emptyStateVariant: { default: null },
+    emptyStateTitle: { default: "No data to display" },
+    emptyStateSubtitle: { default: "" },
+    loadingRowCount: { default: 3 },
+    search: { default: null },
+    showSearch: { type: Boolean, default: !0 },
+    searchPlaceholder: { default: "Search" },
+    zIndexBase: { default: 100 },
+    count: { default: 0 },
+    totalCount: { default: 0 },
+    displayingText: { default: "Displaying" },
+    outOfText: { default: "out of" },
+    totalText: { default: "total rows" },
+    rowCustomClassKey: { default: "" },
+    rowDataKey: { default: "" },
+    testId: { default: "" }
+  },
+  emits: ["update:search", "onScroll", "onClearSearch", "clickRow", "saveRow"],
+  setup(t, { emit: l }) {
+    const h = t;
+    K((e) => ({
+      "81d1b864": t.zIndexBase
+    }));
+    const I = H(), T = O(
+      () => h.isLoading || !h.tablesSettings.flatMap((e) => e.rows).length
+    ), r = Q(h, "search", l), w = (e) => `header-${e.id}`, v = (e) => `cell-${e.id}`, x = (e) => {
+      l("onScroll", e.target.scrollTop);
+    }, E = () => l("onClearSearch"), V = (e, n) => l("clickRow", e, n), B = ({ value: e, rowIndex: n, cellIndex: a, confirm: u }, o) => l("saveRow", { value: e, tableIndex: o, rowIndex: n, cellIndex: a, confirm: u });
+    return (e, n) => (d(), c("div", {
+      class: "multi-table-container",
+      onScrollPassive: x
+    }, [
+      k("div", {
+        class: G(["table-header-container", { sticky: t.isSticky }]),
+        "data-testid": `${t.testId}-${s(g).HEADER}`
+      }, [
+        k("div", {
+          class: "rows-counter-container",
+          "data-testid": `${t.testId}-${s(g).TITLE}`
+        }, [
+          i(e.$slots, "title", {}, () => [
+            t.isLoading ? m("", !0) : (d(), C(s(P), {
+              key: 0,
+              count: t.count,
+              "total-count": t.totalCount,
+              "total-text": t.totalText,
+              "displaying-text": t.displayingText,
+              "out-of-text": t.outOfText,
+              "test-id": t.testId
+            }, null, 8, ["count", "total-count", "total-text", "displaying-text", "out-of-text", "test-id"]))
+          ], !0)
+        ], 8, q),
+        k("div", {
+          class: "table-header-right",
+          "data-testid": `${t.testId}-${s(g).HEADER_RIGHT}`
+        }, [
+          t.showSearch ? i(e.$slots, "search", { key: 0 }, () => [
+            M(s(U), {
+              modelValue: s(r),
+              "onUpdate:modelValue": n[0] || (n[0] = (a) => R(r) ? r.value = a : null),
+              placeholder: t.searchPlaceholder,
+              "test-id": t.testId,
+              onOnClear: E
+            }, null, 8, ["modelValue", "placeholder", "test-id"])
+          ], !0) : m("", !0),
+          s(I)["table-header-actions"] ? (d(), c("div", {
+            key: 1,
+            class: "table-header-actions",
+            "data-testid": `${t.testId}-${s(g).ACTIONS}`
+          }, [
+            i(e.$slots, "table-header-actions", {}, void 0, !0)
+          ], 8, W)) : m("", !0)
+        ], 8, J)
+      ], 10, j),
+      s(T) ? (d(), C(s(b), {
+        key: 1,
+        search: s(r),
+        "onUpdate:search": n[1] || (n[1] = (a) => R(r) ? r.value = a : null),
+        rows: [],
+        columns: t.loadingAndEmptyStatesColumns,
+        "is-loading": t.isLoading,
+        "loading-row-count": t.loadingRowCount,
+        "empty-state-variant": t.emptyStateVariant,
+        "empty-state-title": t.emptyStateTitle,
+        "empty-state-subtitle": t.emptyStateSubtitle,
+        "test-id": t.testId
+      }, $({
+        "empty-state": y(() => [
+          i(e.$slots, "empty-state", {}, void 0, !0)
+        ]),
+        _: 2
+      }, [
+        f(t.loadingAndEmptyStatesColumns, (a) => ({
+          name: w(a),
+          fn: y(() => [
+            i(e.$slots, `${w(a)}`, { column: a }, void 0, !0)
+          ])
+        }))
+      ]), 1032, ["search", "columns", "is-loading", "loading-row-count", "empty-state-variant", "empty-state-title", "empty-state-subtitle", "test-id"])) : (d(), c("div", X, [
+        (d(!0), c(F, null, f(t.tablesSettings, (a, u) => (d(), c("div", {
+          key: a.testId,
+          class: "table-wrapper"
+        }, [
+          a.rows.length ? (d(), C(s(b), {
+            key: 0,
+            sections: a.sections,
+            columns: a.columns,
+            rows: a.rows,
+            "row-height": a.rowHeight,
+            "is-sticky": t.isSticky,
+            "z-index-base": t.zIndexBase,
+            "get-row-id": t.getRowId,
+            "get-row-key": t.getRowKey,
+            "row-custom-class-key": t.rowCustomClassKey,
+            "row-data-key": t.rowDataKey,
+            "test-id": a.testId,
+            onClickRow: (o) => V(o, u),
+            onSaveRow: (o) => B(o, u)
+          }, $({
+            "floating-row": y(({ row: o, rowIndex: S }) => [
+              i(e.$slots, "floating-row", {
+                row: o,
+                rowIndex: S,
+                tableIndex: u
+              }, void 0, !0)
+            ]),
+            _: 2
+          }, [
+            f(a.columns, (o) => ({
+              name: w(o),
+              fn: y(() => [
+                i(e.$slots, `${w(o)}`, { column: o }, void 0, !0)
+              ])
+            })),
+            f(a.columns, (o) => ({
+              name: v(o),
+              fn: y(({
+                cell: S,
+                rowIndex: L,
+                isLoading: D,
+                cellIndex: N,
+                row: z
+              }) => [
+                i(e.$slots, `${v(o)}`, {
+                  cell: S,
+                  isLoading: D,
+                  cellIndex: N,
+                  row: z,
+                  rowIndex: L
+                }, void 0, !0)
+              ])
+            }))
+          ]), 1032, ["sections", "columns", "rows", "row-height", "is-sticky", "z-index-base", "get-row-id", "get-row-key", "row-custom-class-key", "row-data-key", "test-id", "onClickRow", "onSaveRow"])) : m("", !0)
+        ]))), 128))
+      ]))
+    ], 32));
+  }
+});
+export {
+  st as default
+};

package/components/table/v4/SortIcon.vue.js

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

package/components/table/v4/SortIcon.vue2.js

@@ -0,0 +1,25 @@
+ import "../../../SortIcon.vue_vue_type_style_index_0_scoped_2bda5d4a_lang.css"; import { defineComponent as c, openBlock as e, createElementBlock as s, createBlock as o, unref as t, createCommentVNode as a } from "vue";
+import n from "../../icon/v4/IconV4.vue.js";
+import "../../icon/v4/IconFlag.vue.js";
+const m = { class: "table-sort-icon" }, f = /* @__PURE__ */ c({
+  __name: "SortIcon",
+  props: {
+    sortOrder: null
+  },
+  setup(r) {
+    return (d, i) => (e(), s("div", m, [
+      r.sortOrder === "asc" ? (e(), o(t(n), {
+        key: 0,
+        name: "arrow-up",
+        size: "20px"
+      })) : r.sortOrder === "desc" ? (e(), o(t(n), {
+        key: 1,
+        name: "arrow-down",
+        size: "20px"
+      })) : a("", !0)
+    ]));
+  }
+});
+export {
+  f as default
+};

package/components/table/v4/index.d.ts

@@ -19,6 +19,7 @@ declare const DataGridTypes: () => (({
             loadingRowCount: number;
             emptyStateTitle: string;
             isSticky: boolean;
+            zIndexBase: number;
             sections: import("../common/Table.types").Section[];
             isStickyHeader: boolean;
             emptyStateSubtitle: string;
@@ -30,9 +31,10 @@ declare const DataGridTypes: () => (({
             getRowKey: (row: import("../common/Table.types").Row, index: number) => string | number;
             selectedMatcher: (rowId: unknown, selected: unknown) => boolean;
             emptyStateVariant: "error" | "no-access" | "no-results" | "no-data" | "files" | "settings";
-            zIndexBase: number;
             rowCustomClassKey: string;
             rowDataKey: string;
+            isSelectionSticky: boolean;
+            isSelectionBordered: boolean;
         }> & Omit<Readonly<import("vue").ExtractPropTypes<{
             sort: {
                 type: import("vue").PropType<import("../common/Table.types").Sort>;
@@ -86,6 +88,10 @@ declare const DataGridTypes: () => (({
                 type: import("vue").PropType<boolean>;
                 default: boolean;
             };
+            zIndexBase: {
+                type: import("vue").PropType<number>;
+                default: number;
+            };
             rows: {
                 type: import("vue").PropType<import("../common/Table.types").Row[]>;
                 required: true;
@@ -134,10 +140,6 @@ declare const DataGridTypes: () => (({
                 type: import("vue").PropType<"error" | "no-access" | "no-results" | "no-data" | "files" | "settings">;
                 default: any;
             };
-            zIndexBase: {
-                type: import("vue").PropType<number>;
-                default: number;
-            };
             rowCustomClassKey: {
                 type: import("vue").PropType<string>;
                 default: string;
@@ -146,18 +148,26 @@ declare const DataGridTypes: () => (({
                 type: import("vue").PropType<string>;
                 default: string;
             };
+            isSelectionSticky: {
+                type: import("vue").PropType<boolean>;
+                default: boolean;
+            };
+            isSelectionBordered: {
+                type: import("vue").PropType<boolean>;
+                default: boolean;
+            };
         }>> & {
             onSelectAll?: (value: boolean) => any;
+            onLoadMore?: () => any;
             "onUpdate:search"?: (query: string) => any;
             onOnScroll?: (event: Event) => any;
             "onUpdate:sort"?: (newSort: import("../common/Table.types").Sort) => any;
             onSaveRow?: (args_0: import("../common/Table.types").SaveRowEvent) => any;
-            onLoadMore?: () => any;
             onOnClearSearch?: () => any;
             "onUpdate:selection"?: (selection: unknown[]) => any;
             onSelectRow?: (value: boolean) => any;
             onClickRow?: (rowIndex: number) => any;
-        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "sort" | "title" | "search" | "testId" | "isLoading" | "searchAutoFocus" | "searchPlaceholder" | "selection" | "showSearch" | "loadingRowCount" | "emptyStateTitle" | "isSticky" | "sections" | "isStickyHeader" | "emptyStateSubtitle" | "isInfiniteScroll" | "infiniteScrollThreshold" | "rowHeight" | "defaultScrollPosition" | "getRowId" | "getRowKey" | "selectedMatcher" | "emptyStateVariant" | "zIndexBase" | "rowCustomClassKey" | "rowDataKey">;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "sort" | "title" | "search" | "testId" | "isLoading" | "searchAutoFocus" | "searchPlaceholder" | "selection" | "showSearch" | "loadingRowCount" | "emptyStateTitle" | "isSticky" | "zIndexBase" | "sections" | "isStickyHeader" | "emptyStateSubtitle" | "isInfiniteScroll" | "infiniteScrollThreshold" | "rowHeight" | "defaultScrollPosition" | "getRowId" | "getRowKey" | "selectedMatcher" | "emptyStateVariant" | "rowCustomClassKey" | "rowDataKey" | "isSelectionSticky" | "isSelectionBordered">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -169,7 +179,7 @@ declare const DataGridTypes: () => (({
         }>;
         $root: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}>;
         $parent: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}>;
-        $emit: ((event: "onScroll", event: Event) => void) & ((event: "selectAll", value: boolean) => void) & ((event: "update:search", query: string) => void) & ((event: "onClearSearch") => void) & ((event: "update:sort", newSort: import("../common/Table.types").Sort) => void) & ((event: "saveRow", args_0: import("../common/Table.types").SaveRowEvent) => void) & ((event: "loadMore") => void) & ((event: "update:selection", selection: unknown[]) => void) & ((event: "selectRow", value: boolean) => void) & ((event: "clickRow", rowIndex: number) => void);
+        $emit: ((event: "onScroll", event: Event) => void) & ((event: "selectAll", value: boolean) => void) & ((event: "loadMore") => void) & ((event: "onClearSearch") => void) & ((event: "update:search", query: string) => void) & ((event: "update:sort", newSort: import("../common/Table.types").Sort) => void) & ((event: "saveRow", args_0: import("../common/Table.types").SaveRowEvent) => void) & ((event: "update:selection", selection: unknown[]) => void) & ((event: "selectRow", value: boolean) => void) & ((event: "clickRow", rowIndex: number) => void);
         $el: any;
         $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
             sort: {
@@ -224,6 +234,10 @@ declare const DataGridTypes: () => (({
                 type: import("vue").PropType<boolean>;
                 default: boolean;
             };
+            zIndexBase: {
+                type: import("vue").PropType<number>;
+                default: number;
+            };
             rows: {
                 type: import("vue").PropType<import("../common/Table.types").Row[]>;
                 required: true;
@@ -272,10 +286,6 @@ declare const DataGridTypes: () => (({
                 type: import("vue").PropType<"error" | "no-access" | "no-results" | "no-data" | "files" | "settings">;
                 default: any;
             };
-            zIndexBase: {
-                type: import("vue").PropType<number>;
-                default: number;
-            };
             rowCustomClassKey: {
                 type: import("vue").PropType<string>;
                 default: string;
@@ -284,13 +294,21 @@ declare const DataGridTypes: () => (({
                 type: import("vue").PropType<string>;
                 default: string;
             };
+            isSelectionSticky: {
+                type: import("vue").PropType<boolean>;
+                default: boolean;
+            };
+            isSelectionBordered: {
+                type: import("vue").PropType<boolean>;
+                default: boolean;
+            };
         }>> & {
             onSelectAll?: (value: boolean) => any;
+            onLoadMore?: () => any;
             "onUpdate:search"?: (query: string) => any;
             onOnScroll?: (event: Event) => any;
             "onUpdate:sort"?: (newSort: import("../common/Table.types").Sort) => any;
             onSaveRow?: (args_0: import("../common/Table.types").SaveRowEvent) => any;
-            onLoadMore?: () => any;
             onOnClearSearch?: () => any;
             "onUpdate:selection"?: (selection: unknown[]) => any;
             onSelectRow?: (value: boolean) => any;
@@ -321,6 +339,7 @@ declare const DataGridTypes: () => (({
             loadingRowCount: number;
             emptyStateTitle: string;
             isSticky: boolean;
+            zIndexBase: number;
             sections: import("../common/Table.types").Section[];
             isStickyHeader: boolean;
             emptyStateSubtitle: string;
@@ -332,9 +351,10 @@ declare const DataGridTypes: () => (({
             getRowKey: (row: import("../common/Table.types").Row, index: number) => string | number;
             selectedMatcher: (rowId: unknown, selected: unknown) => boolean;
             emptyStateVariant: "error" | "no-access" | "no-results" | "no-data" | "files" | "settings";
-            zIndexBase: number;
             rowCustomClassKey: string;
             rowDataKey: string;
+            isSelectionSticky: boolean;
+            isSelectionBordered: boolean;
         }, {}, string> & {
             beforeCreate?: (() => void) | (() => void)[];
             created?: (() => void) | (() => void)[];
@@ -408,6 +428,10 @@ declare const DataGridTypes: () => (({
             type: import("vue").PropType<boolean>;
             default: boolean;
         };
+        zIndexBase: {
+            type: import("vue").PropType<number>;
+            default: number;
+        };
         rows: {
             type: import("vue").PropType<import("../common/Table.types").Row[]>;
             required: true;
@@ -456,10 +480,6 @@ declare const DataGridTypes: () => (({
             type: import("vue").PropType<"error" | "no-access" | "no-results" | "no-data" | "files" | "settings">;
             default: any;
         };
-        zIndexBase: {
-            type: import("vue").PropType<number>;
-            default: number;
-        };
         rowCustomClassKey: {
             type: import("vue").PropType<string>;
             default: string;
@@ -468,13 +488,21 @@ declare const DataGridTypes: () => (({
             type: import("vue").PropType<string>;
             default: string;
         };
+        isSelectionSticky: {
+            type: import("vue").PropType<boolean>;
+            default: boolean;
+        };
+        isSelectionBordered: {
+            type: import("vue").PropType<boolean>;
+            default: boolean;
+        };
     }>> & {
         onSelectAll?: (value: boolean) => any;
+        onLoadMore?: () => any;
         "onUpdate:search"?: (query: string) => any;
         onOnScroll?: (event: Event) => any;
         "onUpdate:sort"?: (newSort: import("../common/Table.types").Sort) => any;
         onSaveRow?: (args_0: import("../common/Table.types").SaveRowEvent) => any;
-        onLoadMore?: () => any;
         onOnClearSearch?: () => any;
         "onUpdate:selection"?: (selection: unknown[]) => any;
         onSelectRow?: (value: boolean) => any;
@@ -538,6 +566,10 @@ declare const DataGridTypes: () => (({
         type: import("vue").PropType<boolean>;
         default: boolean;
     };
+    zIndexBase: {
+        type: import("vue").PropType<number>;
+        default: number;
+    };
     rows: {
         type: import("vue").PropType<import("../common/Table.types").Row[]>;
         required: true;
@@ -586,10 +618,6 @@ declare const DataGridTypes: () => (({
         type: import("vue").PropType<"error" | "no-access" | "no-results" | "no-data" | "files" | "settings">;
         default: any;
     };
-    zIndexBase: {
-        type: import("vue").PropType<number>;
-        default: number;
-    };
     rowCustomClassKey: {
         type: import("vue").PropType<string>;
         default: string;
@@ -598,13 +626,21 @@ declare const DataGridTypes: () => (({
         type: import("vue").PropType<string>;
         default: string;
     };
+    isSelectionSticky: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    isSelectionBordered: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
 }>> & {
     onSelectAll?: (value: boolean) => any;
+    onLoadMore?: () => any;
     "onUpdate:search"?: (query: string) => any;
     onOnScroll?: (event: Event) => any;
     "onUpdate:sort"?: (newSort: import("../common/Table.types").Sort) => any;
     onSaveRow?: (args_0: import("../common/Table.types").SaveRowEvent) => any;
-    onLoadMore?: () => any;
     onOnClearSearch?: () => any;
     "onUpdate:selection"?: (selection: unknown[]) => any;
     onSelectRow?: (value: boolean) => any;
@@ -635,6 +671,7 @@ declare const DataGridTypes: () => (({
     loadingRowCount: number;
     emptyStateTitle: string;
     isSticky: boolean;
+    zIndexBase: number;
     sections: import("../common/Table.types").Section[];
     isStickyHeader: boolean;
     emptyStateSubtitle: string;
@@ -646,9 +683,10 @@ declare const DataGridTypes: () => (({
     getRowKey: (row: import("../common/Table.types").Row, index: number) => string | number;
     selectedMatcher: (rowId: unknown, selected: unknown) => boolean;
     emptyStateVariant: "error" | "no-access" | "no-results" | "no-data" | "files" | "settings";
-    zIndexBase: number;
     rowCustomClassKey: string;
     rowDataKey: string;
+    isSelectionSticky: boolean;
+    isSelectionBordered: boolean;
 }, {}, string> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
     $slots: Partial<Record<`section-${string}`, (_: {}) => any>> & Partial<Record<`header-${string}`, (_: {
         column: import("../common/Table.types").Column;
@@ -782,11 +820,11 @@ declare const DataGridTypes: () => (({
             loadingRowCount: number;
             emptyStateTitle: string;
             isSticky: boolean;
+            zIndexBase: number;
             emptyStateSubtitle: string;
             getRowId: (row: import("../common/Table.types").Row, index: number) => unknown;
             getRowKey: (row: import("../common/Table.types").Row, index: number) => string | number;
             emptyStateVariant: "error" | "no-access" | "no-results" | "no-data" | "files" | "settings";
-            zIndexBase: number;
             rowCustomClassKey: string;
             rowDataKey: string;
             totalCount: number;
@@ -832,6 +870,10 @@ declare const DataGridTypes: () => (({
                 type: import("vue").PropType<boolean>;
                 default: boolean;
             };
+            zIndexBase: {
+                type: import("vue").PropType<number>;
+                default: number;
+            };
             emptyStateSubtitle: {
                 type: import("vue").PropType<string>;
                 default: string;
@@ -848,10 +890,6 @@ declare const DataGridTypes: () => (({
                 type: import("vue").PropType<"error" | "no-access" | "no-results" | "no-data" | "files" | "settings">;
                 default: any;
             };
-            zIndexBase: {
-                type: import("vue").PropType<number>;
-                default: number;
-            };
             rowCustomClassKey: {
                 type: import("vue").PropType<string>;
                 default: string;
@@ -894,7 +932,7 @@ declare const DataGridTypes: () => (({
             }) => any;
             onOnClearSearch?: () => any;
             onClickRow?: (rowIndex: number, tableIndex: number) => any;
-        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "search" | "testId" | "isLoading" | "searchPlaceholder" | "count" | "showSearch" | "loadingRowCount" | "emptyStateTitle" | "isSticky" | "emptyStateSubtitle" | "getRowId" | "getRowKey" | "emptyStateVariant" | "zIndexBase" | "rowCustomClassKey" | "rowDataKey" | "totalCount" | "displayingText" | "outOfText" | "totalText" | "tablesSettings" | "loadingAndEmptyStatesColumns">;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "search" | "testId" | "isLoading" | "searchPlaceholder" | "count" | "showSearch" | "loadingRowCount" | "emptyStateTitle" | "isSticky" | "zIndexBase" | "emptyStateSubtitle" | "getRowId" | "getRowKey" | "emptyStateVariant" | "rowCustomClassKey" | "rowDataKey" | "totalCount" | "displayingText" | "outOfText" | "totalText" | "tablesSettings" | "loadingAndEmptyStatesColumns">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -906,7 +944,7 @@ declare const DataGridTypes: () => (({
         }>;
         $root: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}>;
         $parent: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}>;
-        $emit: ((event: "onScroll", scrollTop: number) => void) & ((event: "update:search", query: string) => void) & ((event: "onClearSearch") => void) & ((event: "saveRow", args_0: import("../common/Table.types").SaveRowEvent & {
+        $emit: ((event: "onScroll", scrollTop: number) => void) & ((event: "onClearSearch") => void) & ((event: "update:search", query: string) => void) & ((event: "saveRow", args_0: import("../common/Table.types").SaveRowEvent & {
             tableIndex: number;
         }) => void) & ((event: "clickRow", rowIndex: number, tableIndex: number) => void);
         $el: any;
@@ -947,6 +985,10 @@ declare const DataGridTypes: () => (({
                 type: import("vue").PropType<boolean>;
                 default: boolean;
             };
+            zIndexBase: {
+                type: import("vue").PropType<number>;
+                default: number;
+            };
             emptyStateSubtitle: {
                 type: import("vue").PropType<string>;
                 default: string;
@@ -963,10 +1005,6 @@ declare const DataGridTypes: () => (({
                 type: import("vue").PropType<"error" | "no-access" | "no-results" | "no-data" | "files" | "settings">;
                 default: any;
             };
-            zIndexBase: {
-                type: import("vue").PropType<number>;
-                default: number;
-            };
             rowCustomClassKey: {
                 type: import("vue").PropType<string>;
                 default: string;
@@ -1027,11 +1065,11 @@ declare const DataGridTypes: () => (({
             loadingRowCount: number;
             emptyStateTitle: string;
             isSticky: boolean;
+            zIndexBase: number;
             emptyStateSubtitle: string;
             getRowId: (row: import("../common/Table.types").Row, index: number) => unknown;
             getRowKey: (row: import("../common/Table.types").Row, index: number) => string | number;
             emptyStateVariant: "error" | "no-access" | "no-results" | "no-data" | "files" | "settings";
-            zIndexBase: number;
             rowCustomClassKey: string;
             rowDataKey: string;
             totalCount: number;
@@ -1097,6 +1135,10 @@ declare const DataGridTypes: () => (({
             type: import("vue").PropType<boolean>;
             default: boolean;
         };
+        zIndexBase: {
+            type: import("vue").PropType<number>;
+            default: number;
+        };
         emptyStateSubtitle: {
             type: import("vue").PropType<string>;
             default: string;
@@ -1113,10 +1155,6 @@ declare const DataGridTypes: () => (({
             type: import("vue").PropType<"error" | "no-access" | "no-results" | "no-data" | "files" | "settings">;
             default: any;
         };
-        zIndexBase: {
-            type: import("vue").PropType<number>;
-            default: number;
-        };
         rowCustomClassKey: {
             type: import("vue").PropType<string>;
             default: string;
@@ -1200,6 +1238,10 @@ declare const DataGridTypes: () => (({
         type: import("vue").PropType<boolean>;
         default: boolean;
     };
+    zIndexBase: {
+        type: import("vue").PropType<number>;
+        default: number;
+    };
     emptyStateSubtitle: {
         type: import("vue").PropType<string>;
         default: string;
@@ -1216,10 +1258,6 @@ declare const DataGridTypes: () => (({
         type: import("vue").PropType<"error" | "no-access" | "no-results" | "no-data" | "files" | "settings">;
         default: any;
     };
-    zIndexBase: {
-        type: import("vue").PropType<number>;
-        default: number;
-    };
     rowCustomClassKey: {
         type: import("vue").PropType<string>;
         default: string;
@@ -1280,11 +1318,11 @@ declare const DataGridTypes: () => (({
     loadingRowCount: number;
     emptyStateTitle: string;
     isSticky: boolean;
+    zIndexBase: number;
     emptyStateSubtitle: string;
     getRowId: (row: import("../common/Table.types").Row, index: number) => unknown;
     getRowKey: (row: import("../common/Table.types").Row, index: number) => string | number;
     emptyStateVariant: "error" | "no-access" | "no-results" | "no-data" | "files" | "settings";
-    zIndexBase: number;
     rowCustomClassKey: string;
     rowDataKey: string;
     totalCount: number;

package/components/table-cells/common/Editable.common.js

@@ -0,0 +1,56 @@
+import { ref as n, provide as f, watch as d } from "vue";
+import { useTableContext as C } from "../../table/common/TableContext.js";
+import { EditableContext as m } from "./EditableContext.js";
+import { onClickOutside as x } from "@vueuse/core";
+const g = (e) => {
+  const l = n(!1), t = n(e.cell), i = n(e.saveOnClickOutside), o = n(null), r = C("Editable"), a = n(null), c = () => {
+    if (e.cell === t.value) {
+      l.value = !1;
+      return;
+    }
+    const u = e.validateFunction?.(t.value);
+    a.value = u, !u && (r.onClose({
+      rowIndex: e.rowIndex,
+      cellIndex: e.cellIndex,
+      value: t.value
+    }), l.value = !1);
+  };
+  f(m, {
+    focusable: !0,
+    value: t,
+    error: a,
+    withIcons: e.withIcons,
+    confirmable: !0,
+    saveOnClickOutside: i.value,
+    onChange(u) {
+      t.value = u, a.value = e.validateFunction?.(t.value);
+    },
+    onClose: c
+  });
+  const v = () => {
+    l.value || e.isLoading || (l.value = !l.value);
+  }, s = () => {
+    t.value = e.cell, a.value = null;
+  };
+  return x(o, () => {
+    if (l.value) {
+      if (i.value) {
+        c();
+        return;
+      }
+      l.value = !1, s(), r.onClose();
+    }
+  }), d(
+    () => e.cell,
+    () => {
+      l.value || (t.value = e.cell);
+    }
+  ), {
+    onEdit: v,
+    target: o,
+    isEditing: l
+  };
+};
+export {
+  g as editableCommon
+};

package/components/table-cells/common/EditableContext.d.ts

@@ -4,6 +4,7 @@ export interface EditableContextProps {
     onClose?(): void;
     focusable?: boolean;
     error?: Ref<string>;
+    withIcons?: boolean;
     value?: Ref<unknown>;
     confirmable?: boolean;
     saveOnClickOutside?: boolean;