@ironsource/shared-ui 2.0.0-rc.5 → 2.0.0-rc.6

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

@@ -0,0 +1,296 @@
+ import "../../../DataGrid.vue_vue_type_style_index_0_scoped_f080f37f_lang.css"; import { defineComponent as p, useCssVars as _, unref as t, useSlots as tt, computed as H, openBlock as i, createElementBlock as d, createElementVNode as n, normalizeStyle as v, normalizeClass as y, renderSlot as r, createVNode as c, withCtx as b, createTextVNode as $, toDisplayString as R, isRef as et, createCommentVNode as u, Fragment as T, renderList as C, createBlock as st, mergeProps as at } from "vue";
+import E from "../../typography/v4/Typography.vue.js";
+import it from "../../skeleton/Skeleton.vue.js";
+import dt from "../../emptyState/v4/EmptyStateV4.vue.js";
+import U from "../../checkbox/Checkbox.vue.js";
+import { TableTestIdModifiers as f } from "../../../testids/index.js";
+import { tableCommon as lt } from "../common/Table.common.js";
+import ot from "./SortIcon.vue.js";
+import nt from "./ExpandRowToggle.vue.js";
+import rt from "../../search/v4/SearchV4.vue.js";
+import { useVModel as ct } from "@vueuse/core";
+const ut = ["data-testid"], ht = ["data-testid"], yt = ["data-testid"], ft = ["data-testid"], St = ["data-testid"], kt = { class: "search-wrapper" }, mt = ["data-testid"], gt = ["data-testid"], vt = { key: 0 }, bt = {
+  key: 1,
+  class: "expand-toggle-cell"
+}, $t = ["onClick"], Rt = { class: "table-head-container" }, Tt = ["data-testid"], Ct = ["onMouseenter"], Et = { key: 0 }, xt = {
+  key: 1,
+  class: "expand-toggle-cell"
+}, Bt = {
+  key: 2,
+  class: "expanded-row"
+}, Pt = { key: 1 }, Vt = {
+  key: 0,
+  class: "table-footer"
+}, Ut = /* @__PURE__ */ p({
+  __name: "DataGrid",
+  props: {
+    title: { default: "" },
+    columns: null,
+    rows: null,
+    sections: { default: null },
+    sort: { default: null },
+    selection: { default: null },
+    getRowId: { type: Function, default: (s, S) => S },
+    isSticky: { type: Boolean, default: !0 },
+    isStickyHeader: { type: Boolean, default: !1 },
+    isLoading: { type: Boolean, default: !1 },
+    emptyStateVariant: { default: "no-data" },
+    emptyStateTitle: { default: "No data to display" },
+    emptyStateSubtitle: { default: "" },
+    isInfiniteScroll: { type: Boolean, default: !1 },
+    infiniteScrollThreshold: { default: 100 },
+    rowHeight: { type: [Number, Function], default: 48 },
+    loadingRowCount: { default: 3 },
+    defaultScrollPosition: { default: null },
+    testId: { default: "" },
+    search: { default: null },
+    showSearch: { type: Boolean, default: !1 },
+    searchPlaceholder: { default: "Search" },
+    searchAutoFocus: { type: Boolean, default: !1 }
+  },
+  emits: ["update:sort", "update:search", "update:selection", "onScroll", "saveRow", "loadMore"],
+  setup(s, { emit: S }) {
+    const h = s;
+    _((a) => ({
+      "0df6ad71": t(K),
+      "32cd282a": t(L),
+      "1e6d6132": t(J)
+    }));
+    const x = tt(), {
+      list: I,
+      containerProps: G,
+      wrapperProps: Y,
+      activeRow: B,
+      gridColumnTemplate: L,
+      toggleSortOrder: Q,
+      columnsStickyPositions: N,
+      hasSearchSlot: W,
+      containerStyle: j,
+      onScroll: w,
+      savingRows: F,
+      hasExpandSlot: m,
+      toggleExpandRow: q,
+      cssRowHeight: J,
+      cssExpandGridCol: K,
+      isRowExpanded: P,
+      hasCheckboxes: M
+    } = lt(h, S), O = H(() => !!x.footer), V = ct(h, "search", S), D = H(() => h.selection.length || 0), A = H(() => D.value === h.rows.length), z = (a) => h.selection.includes(a), X = (a) => {
+      z(a) ? g(h.selection.filter((o) => o !== a)) : g([...h.selection, a]);
+    }, Z = () => {
+      A.value ? g([]) : g(h.rows.map((a, o) => h.getRowId(a, o)));
+    }, g = (a) => {
+      S("update:selection", a);
+    };
+    return (a, o) => (i(), d("div", {
+      class: "table-container",
+      "data-testid": `${s.testId}-${t(f).CONTAINER}`,
+      onMouseleave: o[2] || (o[2] = (e) => B.value = null)
+    }, [
+      n("table", {
+        ref: t(G).ref,
+        style: v(t(j)),
+        class: y({
+          hasFooter: t(O)
+        }),
+        "data-testid": `${s.testId}-${t(f).TABLE}`,
+        onScrollPassive: o[1] || (o[1] = //@ts-ignore
+        (...e) => t(w) && t(w)(...e))
+      }, [
+        s.title || t(W) || t(x)["table-header-actions"] ? (i(), d("div", {
+          key: 0,
+          class: y(["table-header", { isStickyHeader: s.isStickyHeader }]),
+          "data-testid": `${s.testId}-${t(f).HEADER}`
+        }, [
+          n("div", {
+            class: "table-title",
+            "data-testid": `${s.testId}-${t(f).TITLE}`
+          }, [
+            r(a.$slots, "title", {}, () => [
+              c(t(E), { variant: "h3" }, {
+                default: b(() => [
+                  $(R(s.title), 1)
+                ]),
+                _: 1
+              })
+            ], !0)
+          ], 8, ft),
+          n("div", {
+            class: "table-header-right",
+            "data-testid": `${s.testId}-${t(f).HEADER_RIGHT}`
+          }, [
+            s.showSearch ? r(a.$slots, "search", { key: 0 }, () => [
+              n("div", kt, [
+                c(t(rt), {
+                  modelValue: t(V),
+                  "onUpdate:modelValue": o[0] || (o[0] = (e) => et(V) ? V.value = e : null),
+                  placeholder: s.searchPlaceholder,
+                  "auto-focus": s.searchAutoFocus,
+                  "test-id": s.testId
+                }, null, 8, ["modelValue", "placeholder", "auto-focus", "test-id"])
+              ])
+            ], !0) : u("", !0)
+          ], 8, St),
+          t(x)["table-header-actions"] ? (i(), d("div", {
+            key: 0,
+            class: "table-header-actions",
+            "data-testid": `${s.testId}-${t(f).ACTIONS}`
+          }, [
+            r(a.$slots, "table-header-actions", {}, void 0, !0)
+          ], 8, mt)) : u("", !0)
+        ], 10, yt)) : u("", !0),
+        n("thead", {
+          class: y({ sticky: s.isSticky, isStickyHeader: s.isStickyHeader })
+        }, [
+          n("div", {
+            class: "sections",
+            "data-testid": `${s.testId}-${t(f).SECTIONS}`
+          }, [
+            (i(!0), d(T, null, C(s.sections, (e) => (i(), d("div", {
+              key: e.id,
+              class: y(["section-container", { sticky: e.isSticky }])
+            }, [
+              r(a.$slots, `section-${e.id}`, {}, () => [
+                n("div", {
+                  style: v({ width: e.width + "px" }),
+                  class: y({ section: !0 })
+                }, [
+                  c(t(E), { variant: "body2" }, {
+                    default: b(() => [
+                      $(R(e.title), 1)
+                    ]),
+                    _: 2
+                  }, 1024)
+                ], 4)
+              ], !0)
+            ], 2))), 128))
+          ], 8, gt),
+          n("tr", null, [
+            t(M) ? (i(), d("th", vt, [
+              c(t(U), {
+                "is-checked": t(A),
+                "is-indeterminate": !t(A) && t(D) > 0,
+                size: "sm",
+                "onUpdate:isChecked": Z
+              }, null, 8, ["is-checked", "is-indeterminate"])
+            ])) : u("", !0),
+            t(m) ? (i(), d("th", bt)) : u("", !0),
+            (i(!0), d(T, null, C(s.columns, (e) => (i(), d("th", {
+              key: e.id,
+              class: y({
+                sticky: e.isSticky,
+                isStickyRight: e.isStickyRight,
+                bordered: e.isBordered,
+                isTextRight: e.isTextRight,
+                isSortable: e.isSortable
+              }),
+              style: v(e.isSticky ? t(N)[e.id] : null),
+              onClick: (k) => e.isSortable ? t(Q)(e) : null
+            }, [
+              n("div", Rt, [
+                r(a.$slots, `header-${e.id}`, { column: e }, () => [
+                  c(t(E), { variant: "tableLabel" }, {
+                    default: b(() => [
+                      $(R(e.title), 1)
+                    ]),
+                    _: 2
+                  }, 1024)
+                ], !0),
+                e.isSortable && e.id === s.sort?.sortBy ? (i(), st(ot, {
+                  key: 0,
+                  "sort-order": s.sort.sortOrder
+                }, null, 8, ["sort-order"])) : u("", !0)
+              ])
+            ], 14, $t))), 128))
+          ])
+        ], 2),
+        n("tbody", null, [
+          t(I).length > 0 ? (i(), d("div", at({
+            key: 0,
+            class: "table-body-wrapper",
+            "data-testid": `${s.testId}-${t(f).BODY_WRAPPER}`
+          }, t(Y)), [
+            (i(!0), d(T, null, C(t(I), (e) => (i(), d("tr", {
+              key: e.index,
+              class: y(["table-row", {
+                loading: s.isLoading || s.isLoading && !e.data || t(F).includes(e.index),
+                active: t(B) === e.index,
+                expanded: t(m) && t(P)(e.index)
+              }]),
+              onMouseenter: (k) => B.value = e.index
+            }, [
+              t(M) ? (i(), d("td", Et, [
+                c(t(U), {
+                  "is-checked": z(s.getRowId(e.data, e.index)),
+                  size: "sm",
+                  "onUpdate:isChecked": (k) => X(s.getRowId(e.data, e.index))
+                }, null, 8, ["is-checked", "onUpdate:isChecked"])
+              ])) : u("", !0),
+              t(m) ? (i(), d("td", xt, [
+                c(nt, {
+                  expanded: t(P)(e.index),
+                  onClick: (k) => t(q)(e.index, k)
+                }, null, 8, ["expanded", "onClick"])
+              ])) : u("", !0),
+              (i(!0), d(T, null, C(s.columns, (k, l) => (i(), d("td", {
+                key: l,
+                class: y({
+                  sticky: s.columns[l].isSticky,
+                  isStickyRight: s.columns[l].isStickyRight,
+                  bordered: s.columns[l].isBordered,
+                  isTextRight: s.columns[l].isTextRight
+                }),
+                style: v(
+                  s.columns[l].isSticky ? t(N)[s.columns[l].id] : null
+                )
+              }, [
+                !s.isLoading || s.isLoading && e.data[l] ? (i(), d("div", {
+                  key: 0,
+                  class: y(["table-cell", { last: l === e.data.length - 1 }])
+                }, [
+                  r(a.$slots, `cell-${s.columns[l].id}`, {
+                    cell: e.data[l],
+                    isLoading: t(F).includes(e.index),
+                    cellIndex: l,
+                    row: e,
+                    rowIndex: e.index
+                  }, () => [
+                    c(t(E), { variant: "body1" }, {
+                      default: b(() => [
+                        $(R(e.data[l]), 1)
+                      ]),
+                      _: 2
+                    }, 1024)
+                  ], !0)
+                ], 2)) : r(a.$slots, "loader", { key: 1 }, () => [
+                  c(t(it), { round: "" })
+                ], !0)
+              ], 6))), 128)),
+              t(m) && t(P)(e.index) ? (i(), d("div", Bt, [
+                r(a.$slots, "expanded", {
+                  row: e,
+                  gridColumnTemplate: t(L)
+                }, void 0, !0)
+              ])) : u("", !0)
+            ], 42, Ct))), 128))
+          ], 16, Tt)) : (i(), d("div", Pt, [
+            r(a.$slots, "empty-state", {}, () => [
+              c(t(dt), {
+                class: "empty-state",
+                title: s.emptyStateTitle,
+                subtitle: s.emptyStateSubtitle,
+                variant: s.emptyStateVariant,
+                "test-id": `${s.testId}-${t(f).EMPTY_STATE}`
+              }, null, 8, ["title", "subtitle", "variant", "test-id"])
+            ], !0)
+          ]))
+        ])
+      ], 46, ht),
+      t(O) ? (i(), d("div", Vt, [
+        r(a.$slots, "footer", {}, void 0, !0)
+      ])) : u("", !0)
+    ], 40, ut));
+  }
+});
+export {
+  Ut as default
+};

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

@@ -0,0 +1,34 @@
+import { MenuItem } from '@is-ssp/table/common/Table.types';
+declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    menuItems: MenuItem[];
+}>, {
+    menuItems: () => any[];
+}>, {}, 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<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    menuItems: MenuItem[];
+}>, {
+    menuItems: () => any[];
+}>>> & {
+    onSelected?: (option: unknown) => any;
+}, {
+    menuItems: MenuItem[];
+}>;
+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/DataGridMenu.vue.js

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

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

@@ -0,0 +1,50 @@
+ import "../../../DataGridMenu.vue_vue_type_style_index_0_scoped_99f1dcca_lang.css"; import { defineComponent as d, openBlock as p, createBlock as l, unref as t, withCtx as o, createVNode as a, createSlots as c, createTextVNode as u, toDisplayString as f } from "vue";
+import x 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 _ from "../../dropdown/v4/OptionV4.vue.js";
+import g from "../../icon/v4/IconV4.vue.js";
+const B = /* @__PURE__ */ d({
+  __name: "DataGridMenu",
+  props: {
+    menuItems: { default: () => [] }
+  },
+  emits: ["selected"],
+  setup(m, { emit: s }) {
+    const n = (r) => r.text;
+    return (r, i) => (p(), l(t(x), {
+      class: "data-grid-menu",
+      options: m.menuItems,
+      "display-value": n,
+      "predefined-trigger": "icon-button",
+      placement: "left-start",
+      skidding: -4,
+      "onUpdate:selected": i[0] || (i[0] = (e) => s("selected", e))
+    }, {
+      default: o(({ option: e }) => [
+        a(t(_), { option: e }, c({
+          default: o(() => [
+            u(" " + f(n(e)), 1)
+          ]),
+          _: 2
+        }, [
+          e.icon ? {
+            name: "icon-start",
+            fn: o(() => [
+              a(t(g), {
+                name: e.icon,
+                size: "20px"
+              }, null, 8, ["name"])
+            ]),
+            key: "0"
+          } : void 0
+        ]), 1032, ["option"])
+      ]),
+      _: 1
+    }, 8, ["options"]));
+  }
+});
+export {
+  B as default
+};

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

@@ -0,0 +1,33 @@
+declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    expanded: boolean;
+}>, {
+    expanded: boolean;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    click: (event: Event) => void;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    expanded: boolean;
+}>, {
+    expanded: boolean;
+}>>> & {
+    onClick?: (event: Event) => any;
+}, {
+    expanded: boolean;
+}>;
+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/ExpandRowToggle.vue.js

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

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

@@ -0,0 +1,24 @@
+ import "../../../ExpandRowToggle.vue_vue_type_style_index_0_scoped_b053baa6_lang.css"; import { defineComponent as a, openBlock as r, createElementBlock as c, createVNode as l, unref as p } from "vue";
+import "../../button/v4/ButtonV4.vue.js";
+import d from "../../button/v4/IconButtonV4.vue.js";
+const f = /* @__PURE__ */ a({
+  __name: "ExpandRowToggle",
+  props: {
+    expanded: { type: Boolean, default: !1 }
+  },
+  emits: ["click"],
+  setup(n, { emit: o }) {
+    return (i, e) => (r(), c("div", {
+      class: "expand-row-toggle",
+      onClick: e[0] || (e[0] = (t) => o("click", t))
+    }, [
+      l(p(d), {
+        class: "expand-button",
+        "icon-name": n.expanded ? "caret-down" : "caret-right"
+      }, null, 8, ["icon-name"])
+    ]));
+  }
+});
+export {
+  f as default
+};

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

@@ -0,0 +1,15 @@
+declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<{
+    sortOrder: 'asc' | 'desc';
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    sortOrder: 'asc' | 'desc';
+}>>>, {}>;
+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;
+    };
+};

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,24 @@
+ 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";
+const m = { class: "table-sort-icon" }, u = /* @__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 {
+  u as default
+};