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

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

@@ -1,36 +1,39 @@
- import "../../../DataGridRowsCounter.vue_vue_type_style_index_0_scoped_9e366543_lang.css"; import { defineComponent as l, openBlock as u, createElementBlock as i, createVNode as e, unref as o, withCtx as a, createTextVNode as t, toDisplayString as s } from "vue";
-import r from "../../typography/v4/Typography.vue.js";
-const c = { class: "data-grid-rows-counter" }, m = /* @__PURE__ */ l({
+ import "../../../DataGridRowsCounter.vue_vue_type_style_index_0_scoped_06751538_lang.css"; import { defineComponent as r, openBlock as i, createElementBlock as d, createVNode as o, unref as n, withCtx as l, createTextVNode as e, toDisplayString as a } from "vue";
+import u from "../../typography/v4/Typography.vue.js";
+const s = { class: "data-grid-rows-counter" }, m = /* @__PURE__ */ r({
   __name: "DataGridRowsCounter",
   props: {
     count: { default: 0 },
-    totalCount: { default: 0 }
+    totalCount: { default: 0 },
+    displayingText: { default: "Displaying" },
+    outOfText: { default: "out of" },
+    totalText: { default: "total rows" }
   },
-  setup(n) {
-    return (d, f) => (u(), i("div", c, [
-      e(o(r), { variant: "body2" }, {
-        default: a(() => [
-          t(" Displaying "),
-          e(o(r), {
+  setup(t) {
+    return (c, f) => (i(), d("div", s, [
+      o(n(u), { variant: "body1" }, {
+        default: l(() => [
+          e(a(t.displayingText) + " ", 1),
+          o(n(u), {
             class: "text-strong",
-            variant: "subtitle2"
+            variant: "subtitle1"
           }, {
-            default: a(() => [
-              t(s(n.count), 1)
+            default: l(() => [
+              e(a(t.count), 1)
             ]),
             _: 1
           }),
-          t(" out of "),
-          e(o(r), {
+          e(" " + a(t.outOfText) + " ", 1),
+          o(n(u), {
             class: "text-strong",
-            variant: "subtitle2"
+            variant: "subtitle1"
           }, {
-            default: a(() => [
-              t(s(n.totalCount), 1)
+            default: l(() => [
+              e(a(t.totalCount), 1)
             ]),
             _: 1
           }),
-          t(" total rows ")
+          e(" " + a(t.totalText), 1)
         ]),
         _: 1
       })

package/components/table/v4/HelpIcon.vue.d.ts

@@ -0,0 +1,40 @@
+import { TooltipPositions } from '@/components/tooltip/common/Tooltip.types';
+declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    hoverHelpText?: string;
+    hoverHelpTextPlacement?: TooltipPositions;
+    testId?: string;
+}>, {
+    hoverHelpText: string;
+    hoverHelpTextPlacement: string;
+    testId: string;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    hoverHelpText?: string;
+    hoverHelpTextPlacement?: TooltipPositions;
+    testId?: string;
+}>, {
+    hoverHelpText: string;
+    hoverHelpTextPlacement: string;
+    testId: string;
+}>>>, {
+    testId: string;
+    hoverHelpText: string;
+    hoverHelpTextPlacement: TooltipPositions;
+}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};

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

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

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

@@ -0,0 +1,32 @@
+ import "../../../HelpIcon.vue_vue_type_style_index_0_scoped_7a611779_lang.css"; import { defineComponent as o, openBlock as n, createBlock as l, unref as t, withCtx as r, createVNode as a } from "vue";
+import c from "../../icon/v3/Icon.vue.js";
+import i from "../../tooltip/v4/TooltipV4.vue.js";
+const u = /* @__PURE__ */ o({
+  __name: "HelpIcon",
+  props: {
+    hoverHelpText: { default: "" },
+    hoverHelpTextPlacement: { default: "top" },
+    testId: { default: "" }
+  },
+  setup(e) {
+    return (m, p) => (n(), l(t(i), {
+      class: "table-help-icon",
+      triggers: ["hover"],
+      text: e.hoverHelpText,
+      placement: e.hoverHelpTextPlacement,
+      "test-id": e.testId
+    }, {
+      default: r(() => [
+        a(t(c), {
+          class: "info-icon",
+          name: "question",
+          "font-size": "sm"
+        })
+      ]),
+      _: 1
+    }, 8, ["text", "placement", "test-id"]));
+  }
+});
+export {
+  u as default
+};

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

@@ -10,10 +10,10 @@ declare const DataGridTypes: () => (({
             title: string;
             search: string;
             testId: string;
+            isLoading: boolean;
+            searchAutoFocus: boolean;
             searchPlaceholder: string;
             selection: unknown[];
-            searchAutoFocus: boolean;
-            isLoading: boolean;
             isSticky: boolean;
             sections: import("../common/Table.types").Section[];
             isStickyHeader: boolean;
@@ -50,6 +50,14 @@ declare const DataGridTypes: () => (({
                 type: import("vue").PropType<string>;
                 default: string;
             };
+            isLoading: {
+                type: import("vue").PropType<boolean>;
+                default: boolean;
+            };
+            searchAutoFocus: {
+                type: import("vue").PropType<boolean>;
+                default: boolean;
+            };
             searchPlaceholder: {
                 type: import("vue").PropType<string>;
                 default: string;
@@ -58,14 +66,6 @@ declare const DataGridTypes: () => (({
                 type: import("vue").PropType<unknown[]>;
                 default: any;
             };
-            searchAutoFocus: {
-                type: import("vue").PropType<boolean>;
-                default: boolean;
-            };
-            isLoading: {
-                type: import("vue").PropType<boolean>;
-                default: boolean;
-            };
             isSticky: {
                 type: import("vue").PropType<boolean>;
                 default: boolean;
@@ -142,7 +142,7 @@ declare const DataGridTypes: () => (({
             onLoadMore?: () => any;
             "onUpdate:search"?: (query: string) => any;
             "onUpdate:selection"?: (selection: unknown[]) => any;
-        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "sort" | "title" | "search" | "testId" | "searchPlaceholder" | "selection" | "searchAutoFocus" | "isLoading" | "isSticky" | "sections" | "isStickyHeader" | "emptyStateTitle" | "emptyStateSubtitle" | "isInfiniteScroll" | "infiniteScrollThreshold" | "rowHeight" | "loadingRowCount" | "defaultScrollPosition" | "getRowId" | "selectedMatcher" | "emptyStateVariant" | "showSearch" | "zIndexBase">;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "sort" | "title" | "search" | "testId" | "isLoading" | "searchAutoFocus" | "searchPlaceholder" | "selection" | "isSticky" | "sections" | "isStickyHeader" | "emptyStateTitle" | "emptyStateSubtitle" | "isInfiniteScroll" | "infiniteScrollThreshold" | "rowHeight" | "loadingRowCount" | "defaultScrollPosition" | "getRowId" | "selectedMatcher" | "emptyStateVariant" | "showSearch" | "zIndexBase">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -182,6 +182,14 @@ declare const DataGridTypes: () => (({
                 type: import("vue").PropType<string>;
                 default: string;
             };
+            isLoading: {
+                type: import("vue").PropType<boolean>;
+                default: boolean;
+            };
+            searchAutoFocus: {
+                type: import("vue").PropType<boolean>;
+                default: boolean;
+            };
             searchPlaceholder: {
                 type: import("vue").PropType<string>;
                 default: string;
@@ -190,14 +198,6 @@ declare const DataGridTypes: () => (({
                 type: import("vue").PropType<unknown[]>;
                 default: any;
             };
-            searchAutoFocus: {
-                type: import("vue").PropType<boolean>;
-                default: boolean;
-            };
-            isLoading: {
-                type: import("vue").PropType<boolean>;
-                default: boolean;
-            };
             isSticky: {
                 type: import("vue").PropType<boolean>;
                 default: boolean;
@@ -291,10 +291,10 @@ declare const DataGridTypes: () => (({
             title: string;
             search: string;
             testId: string;
+            isLoading: boolean;
+            searchAutoFocus: boolean;
             searchPlaceholder: string;
             selection: unknown[];
-            searchAutoFocus: boolean;
-            isLoading: boolean;
             isSticky: boolean;
             sections: import("../common/Table.types").Section[];
             isStickyHeader: boolean;
@@ -351,6 +351,14 @@ declare const DataGridTypes: () => (({
             type: import("vue").PropType<string>;
             default: string;
         };
+        isLoading: {
+            type: import("vue").PropType<boolean>;
+            default: boolean;
+        };
+        searchAutoFocus: {
+            type: import("vue").PropType<boolean>;
+            default: boolean;
+        };
         searchPlaceholder: {
             type: import("vue").PropType<string>;
             default: string;
@@ -359,14 +367,6 @@ declare const DataGridTypes: () => (({
             type: import("vue").PropType<unknown[]>;
             default: any;
         };
-        searchAutoFocus: {
-            type: import("vue").PropType<boolean>;
-            default: boolean;
-        };
-        isLoading: {
-            type: import("vue").PropType<boolean>;
-            default: boolean;
-        };
         isSticky: {
             type: import("vue").PropType<boolean>;
             default: boolean;
@@ -468,6 +468,14 @@ declare const DataGridTypes: () => (({
         type: import("vue").PropType<string>;
         default: string;
     };
+    isLoading: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    searchAutoFocus: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
     searchPlaceholder: {
         type: import("vue").PropType<string>;
         default: string;
@@ -476,14 +484,6 @@ declare const DataGridTypes: () => (({
         type: import("vue").PropType<unknown[]>;
         default: any;
     };
-    searchAutoFocus: {
-        type: import("vue").PropType<boolean>;
-        default: boolean;
-    };
-    isLoading: {
-        type: import("vue").PropType<boolean>;
-        default: boolean;
-    };
     isSticky: {
         type: import("vue").PropType<boolean>;
         default: boolean;
@@ -577,10 +577,10 @@ declare const DataGridTypes: () => (({
     title: string;
     search: string;
     testId: string;
+    isLoading: boolean;
+    searchAutoFocus: boolean;
     searchPlaceholder: string;
     selection: unknown[];
-    searchAutoFocus: boolean;
-    isLoading: boolean;
     isSticky: boolean;
     sections: import("../common/Table.types").Section[];
     isStickyHeader: boolean;
@@ -619,8 +619,8 @@ declare const DataGridTypes: () => (({
         footer?(_: {}): any;
     };
 })) | import("vue").DefineComponent<{
-    container: {
-        type: import("vue").PropType<string>;
+    rowIndex: {
+        type: import("vue").PropType<number>;
         default: any;
     };
     menuItems: {
@@ -631,8 +631,8 @@ declare const DataGridTypes: () => (({
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     selected: (option: unknown) => void;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    container: {
-        type: import("vue").PropType<string>;
+    rowIndex: {
+        type: import("vue").PropType<number>;
         default: any;
     };
     menuItems: {
@@ -643,7 +643,7 @@ declare const DataGridTypes: () => (({
 }>> & {
     onSelected?: (option: unknown) => any;
 }, {
-    container: string;
+    rowIndex: number;
     menuItems: import("../common/Table.types").MenuItem[];
 }> | import("vue").DefineComponent<{
     count: {
@@ -654,6 +654,18 @@ declare const DataGridTypes: () => (({
         type: import("vue").PropType<number>;
         default: number;
     };
+    displayingText: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    outOfText: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    totalText: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     count: {
         type: import("vue").PropType<number>;
@@ -663,9 +675,24 @@ declare const DataGridTypes: () => (({
         type: import("vue").PropType<number>;
         default: number;
     };
+    displayingText: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    outOfText: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    totalText: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
 }>>, {
     count: number;
     totalCount: number;
+    displayingText: string;
+    outOfText: string;
+    totalText: string;
 }>)[];
 export type { Column, Sort, MenuItem } from '../common/Table.types';
 export { DataGrid, DataGridMenu, DataGridRowsCounter, DataGridTypes };

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

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

package/components/table-cells/v4/EditableV4.vue.d.ts

@@ -3,25 +3,35 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     isLoading?: boolean;
     rowIndex: number;
     cellIndex: number;
+    type: "input" | "dropdown";
     validateFunction?: (value: unknown) => string | boolean;
+    displayValue?: (option: unknown) => unknown;
 }>, {
     cell: string;
     isLoading: boolean;
+    type: string;
     validateFunction: () => false;
+    displayValue: (cell: unknown) => unknown;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     cell?: string;
     isLoading?: boolean;
     rowIndex: number;
     cellIndex: number;
+    type: "input" | "dropdown";
     validateFunction?: (value: unknown) => string | boolean;
+    displayValue?: (option: unknown) => unknown;
 }>, {
     cell: string;
     isLoading: boolean;
+    type: string;
     validateFunction: () => false;
+    displayValue: (cell: unknown) => unknown;
 }>>>, {
+    type: "input" | "dropdown";
     cell: string;
     validateFunction: (value: unknown) => string | boolean;
     isLoading: boolean;
+    displayValue: (option: unknown) => unknown;
 }>, {
     input?(_: {}): any;
     content?(_: {}): any;

package/components/table-cells/v4/EditableV4.vue.js

@@ -1,7 +1,7 @@
 import o from "./EditableV4.vue2.js";
 /* empty css                 */import e from "../../../_virtual/_plugin-vue_export-helper.js";
-// import "../../../EditableV4.vue_vue_type_style_index_0_scoped_df325b51_lang.css"; //*');
-const d = /* @__PURE__ */ e(o, [["__scopeId", "data-v-df325b51"]]);
+// import "../../../EditableV4.vue_vue_type_style_index_0_scoped_31bfb722_lang.css"; //*');
+const p = /* @__PURE__ */ e(o, [["__scopeId", "data-v-31bfb722"]]);
 export {
-  d as default
+  p as default
 };

package/components/table-cells/v4/EditableV4.vue2.js

@@ -1,39 +1,48 @@
- import "../../../EditableV4.vue_vue_type_style_index_0_scoped_df325b51_lang.css"; import { defineComponent as u, openBlock as r, createElementBlock as a, unref as e, createElementVNode as m, renderSlot as i, createVNode as d, withCtx as y, createTextVNode as b, toDisplayString as g } from "vue";
-import { editableCommon as k } from "../common/Editable.common.js";
-import _ from "../../typography/v4/Typography.vue.js";
-import v from "../../input/v4/TextField.vue.js";
-const x = { class: "editable-wrapper" }, E = {
+ import "../../../EditableV4.vue_vue_type_style_index_0_scoped_31bfb722_lang.css"; import { defineComponent as m, openBlock as o, createElementBlock as i, unref as t, createElementVNode as f, renderSlot as r, createVNode as d, withCtx as y, createTextVNode as k, toDisplayString as V, createBlock as b, createCommentVNode as g } from "vue";
+import { editableCommon as x } from "../common/Editable.common.js";
+import v from "../../typography/v4/Typography.vue.js";
+import w from "../../input/v4/TextField.vue.js";
+import C from "../../icon/v4/IconV4.vue.js";
+const E = { class: "editable-wrapper" }, B = {
   key: 1,
   class: "editable-content"
-}, B = /* @__PURE__ */ u({
+}, S = /* @__PURE__ */ m({
   __name: "EditableV4",
   props: {
     cell: { default: "" },
     isLoading: { type: Boolean, default: !1 },
     rowIndex: null,
     cellIndex: null,
-    validateFunction: { type: Function, default: () => !1 }
+    type: { default: "input" },
+    validateFunction: { type: Function, default: () => !1 },
+    displayValue: { type: Function, default: (e) => e }
   },
-  setup(t) {
-    const s = t, { onEdit: o, target: c, isEditing: p } = k(s);
-    return (n, l) => (r(), a("div", {
+  setup(e) {
+    const c = e, { onEdit: n, target: s, isEditing: p } = x(c);
+    return (l, a) => (o(), i("div", {
       ref_key: "target",
-      ref: c,
+      ref: s,
       class: "editable",
-      onClick: l[0] || (l[0] = //@ts-ignore
-      (...f) => e(o) && e(o)(...f))
+      onClick: a[0] || (a[0] = //@ts-ignore
+      (...u) => t(n) && t(n)(...u))
     }, [
-      m("div", x, [
-        e(p) ? i(n.$slots, "input", { key: 0 }, () => [
-          d(e(v))
-        ], !0) : (r(), a("div", E, [
-          i(n.$slots, "content", {}, () => [
-            d(e(_), { variant: "body1" }, {
+      f("div", E, [
+        t(p) ? r(l.$slots, "input", { key: 0 }, () => [
+          d(t(w))
+        ], !0) : (o(), i("div", B, [
+          r(l.$slots, "content", {}, () => [
+            d(t(v), { variant: "body1" }, {
               default: y(() => [
-                b(g(t.cell), 1)
+                k(V(e.displayValue(e.cell)), 1)
               ]),
               _: 1
-            })
+            }),
+            e.type === "dropdown" ? (o(), b(t(C), {
+              key: 0,
+              class: "caret-icon",
+              name: "caret-down",
+              size: "20px"
+            })) : g("", !0)
           ], !0)
         ]))
       ])
@@ -41,5 +50,5 @@ const x = { class: "editable-wrapper" }, E = {
   }
 });
 export {
-  B as default
+  S as default
 };