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

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

@@ -1,61 +1,60 @@
- import "../../../DataGridMenu.vue_vue_type_style_index_0_scoped_92d83650_lang.css"; import { defineComponent as p, ref as u, computed as f, openBlock as x, createElementBlock as g, createVNode as o, unref as t, withCtx as n, createSlots as k, createTextVNode as v, toDisplayString as y } from "vue";
-import _ from "../../dropdown/v4/DropdownV4.vue.js";
+ import "../../../DataGridMenu.vue_vue_type_style_index_0_scoped_13f1ce76_lang.css"; import { defineComponent as p, onBeforeUnmount as f, openBlock as x, createBlock as w, unref as n, withCtx as o, createVNode as m, createSlots as I, createTextVNode as v, toDisplayString as M } from "vue";
+import g from "../../dropdown/v4/DropdownV4.vue.js";
 import "../../dropdown/v4/DefaultDropdownTrigger.vue.js";
 import "../../dropdown/v4/IconButtonDropdownTrigger.vue.js";
 import "../../dropdown/v4/ChipDropdownTrigger.vue.js";
 import "../../dropdown/v4/AppDropdownTrigger.vue.js";
-import D from "../../dropdown/v4/OptionV4.vue.js";
-import I from "../../icon/v4/IconV4.vue.js";
-const b = /* @__PURE__ */ p({
+import C from "../../dropdown/v4/OptionV4.vue.js";
+import k from "../../icon/v4/IconV4.vue.js";
+import { useTableContext as y } from "../common/TableContext.js";
+const O = /* @__PURE__ */ p({
   __name: "DataGridMenu",
   props: {
     menuItems: { default: () => [] },
-    container: { default: null }
+    rowIndex: { default: null }
   },
   emits: ["selected"],
-  setup(r, { emit: l }) {
-    const m = r, a = (c) => c.text, i = u(null), d = f(
-      () => m.container ?? (i.value || void 0)
-    );
-    return (c, s) => (x(), g("div", {
-      ref_key: "rootRef",
-      ref: i
-    }, [
-      o(t(_), {
-        class: "data-grid-menu",
-        options: r.menuItems,
-        "display-value": a,
-        "predefined-trigger": "icon-button",
-        placement: "left-start",
-        skidding: -4,
-        container: t(d),
-        "onUpdate:selected": s[0] || (s[0] = (e) => l("selected", e))
-      }, {
-        default: n(({ option: e }) => [
-          o(t(D), { option: e }, k({
-            default: n(() => [
-              v(" " + y(a(e)), 1)
+  setup(r, { emit: u }) {
+    const t = r, i = y("DataGridMenu"), s = (d) => d.text, c = () => {
+      t.rowIndex && i.setActiveMenuRow(t.rowIndex);
+    }, a = () => {
+      t.rowIndex && i.setActiveMenuRow(null);
+    };
+    return f(a), (d, l) => (x(), w(n(g), {
+      class: "data-grid-menu",
+      options: r.menuItems,
+      "display-value": s,
+      "predefined-trigger": "icon-button",
+      placement: "left-start",
+      skidding: -4,
+      "onUpdate:selected": l[0] || (l[0] = (e) => u("selected", e)),
+      onOpened: c,
+      onClosed: a
+    }, {
+      default: o(({ option: e }) => [
+        m(n(C), { option: e }, I({
+          default: o(() => [
+            v(" " + M(s(e)), 1)
+          ]),
+          _: 2
+        }, [
+          e.icon ? {
+            name: "icon-start",
+            fn: o(() => [
+              m(n(k), {
+                class: "menu-icon",
+                name: e.icon,
+                size: "20px"
+              }, null, 8, ["name"])
             ]),
-            _: 2
-          }, [
-            e.icon ? {
-              name: "icon-start",
-              fn: n(() => [
-                o(t(I), {
-                  class: "menu-icon",
-                  name: e.icon,
-                  size: "20px"
-                }, null, 8, ["name"])
-              ]),
-              key: "0"
-            } : void 0
-          ]), 1032, ["option"])
-        ]),
-        _: 1
-      }, 8, ["options", "container"])
-    ], 512));
+            key: "0"
+          } : void 0
+        ]), 1032, ["option"])
+      ]),
+      _: 1
+    }, 8, ["options"]));
   }
 });
 export {
-  b as default
+  O as default
 };

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

@@ -1,18 +1,33 @@
 declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     count?: number;
     totalCount?: number;
+    displayingText?: string;
+    outOfText?: string;
+    totalText?: string;
 }>, {
     count: number;
     totalCount: number;
+    displayingText: string;
+    outOfText: string;
+    totalText: 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<{
     count?: number;
     totalCount?: number;
+    displayingText?: string;
+    outOfText?: string;
+    totalText?: string;
 }>, {
     count: number;
     totalCount: number;
+    displayingText: string;
+    outOfText: string;
+    totalText: string;
 }>>>, {
     count: number;
     totalCount: number;
+    displayingText: string;
+    outOfText: string;
+    totalText: string;
 }>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;

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

@@ -1,7 +1,7 @@
 import o from "./DataGridRowsCounter.vue2.js";
-/* empty css                          */import e from "../../../_virtual/_plugin-vue_export-helper.js";
-// import "../../../DataGridRowsCounter.vue_vue_type_style_index_0_scoped_9e366543_lang.css"; //*');
-const r = /* @__PURE__ */ e(o, [["__scopeId", "data-v-9e366543"]]);
+/* empty css                          */import t from "../../../_virtual/_plugin-vue_export-helper.js";
+// import "../../../DataGridRowsCounter.vue_vue_type_style_index_0_scoped_06751538_lang.css"; //*');
+const r = /* @__PURE__ */ t(o, [["__scopeId", "data-v-06751538"]]);
 export {
   r as default
 };

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/index.d.ts

@@ -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,23 +3,33 @@ 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;
+    displayValue: (option: unknown) => unknown;
     validateFunction: (value: unknown) => string | boolean;
     isLoading: boolean;
 }>, {

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
 };

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

@@ -4,14 +4,25 @@ declare const EditableTypes: () => ({
         $: import("vue").ComponentInternalInstance;
         $data: {};
         $props: Partial<{
+            type: "input" | "dropdown";
             cell: string;
+            displayValue: (option: unknown) => unknown;
             validateFunction: (value: unknown) => string | boolean;
             isLoading: boolean;
         }> & Omit<Readonly<import("vue").ExtractPropTypes<{
+            type: {
+                type: import("vue").PropType<"input" | "dropdown">;
+                required: true;
+                default: string;
+            };
             cell: {
                 type: import("vue").PropType<string>;
                 default: string;
             };
+            displayValue: {
+                type: import("vue").PropType<(option: unknown) => unknown>;
+                default: (cell: unknown) => unknown;
+            };
             validateFunction: {
                 type: import("vue").PropType<(value: unknown) => string | boolean>;
                 default: () => false;
@@ -28,7 +39,7 @@ declare const EditableTypes: () => ({
                 type: import("vue").PropType<number>;
                 required: true;
             };
-        }>> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "cell" | "validateFunction" | "isLoading">;
+        }>> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "type" | "cell" | "displayValue" | "validateFunction" | "isLoading">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -43,10 +54,19 @@ declare const EditableTypes: () => ({
         $emit: (event: string, ...args: any[]) => void;
         $el: any;
         $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+            type: {
+                type: import("vue").PropType<"input" | "dropdown">;
+                required: true;
+                default: string;
+            };
             cell: {
                 type: import("vue").PropType<string>;
                 default: string;
             };
+            displayValue: {
+                type: import("vue").PropType<(option: unknown) => unknown>;
+                default: (cell: unknown) => unknown;
+            };
             validateFunction: {
                 type: import("vue").PropType<(value: unknown) => string | boolean>;
                 default: () => false;
@@ -64,7 +84,9 @@ declare const EditableTypes: () => ({
                 required: true;
             };
         }>>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
+            type: "input" | "dropdown";
             cell: string;
+            displayValue: (option: unknown) => unknown;
             validateFunction: (value: unknown) => string | boolean;
             isLoading: boolean;
         }, {}, string> & {
@@ -88,10 +110,19 @@ declare const EditableTypes: () => ({
         $nextTick: typeof import("vue").nextTick;
         $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (args_0: R, args_1: R) => any : (...args: any) => any, options?: import("vue").WatchOptions<boolean>): import("vue").WatchStopHandle;
     } & Readonly<import("vue").ExtractPropTypes<{
+        type: {
+            type: import("vue").PropType<"input" | "dropdown">;
+            required: true;
+            default: string;
+        };
         cell: {
             type: import("vue").PropType<string>;
             default: string;
         };
+        displayValue: {
+            type: import("vue").PropType<(option: unknown) => unknown>;
+            default: (cell: unknown) => unknown;
+        };
         validateFunction: {
             type: import("vue").PropType<(value: unknown) => string | boolean>;
             default: () => false;
@@ -113,10 +144,19 @@ declare const EditableTypes: () => ({
     __isTeleport?: never;
     __isSuspense?: never;
 } & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+    type: {
+        type: import("vue").PropType<"input" | "dropdown">;
+        required: true;
+        default: string;
+    };
     cell: {
         type: import("vue").PropType<string>;
         default: string;
     };
+    displayValue: {
+        type: import("vue").PropType<(option: unknown) => unknown>;
+        default: (cell: unknown) => unknown;
+    };
     validateFunction: {
         type: import("vue").PropType<(value: unknown) => string | boolean>;
         default: () => false;
@@ -134,7 +174,9 @@ declare const EditableTypes: () => ({
         required: true;
     };
 }>>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
+    type: "input" | "dropdown";
     cell: string;
+    displayValue: (option: unknown) => unknown;
     validateFunction: (value: unknown) => string | boolean;
     isLoading: boolean;
 }, {}, string> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {