@ironsource/shared-ui 2.0.0-test.9 → 2.0.1

package/components/table/common/Table.common.js

@@ -0,0 +1,114 @@
+import { ref as a, provide as z, computed as i, useSlots as G, onMounted as K, nextTick as N } from "vue";
+import { useVirtualList as V, useInfiniteScroll as j } from "@vueuse/core";
+import { TableContext as q } from "./TableContext.js";
+const F = 46, J = 46, Z = (o, u) => {
+  const c = a([]);
+  z(q, {
+    onClose({ rowIndex: t, cellIndex: e, value: n } = {}) {
+      n && (c.value = [...c.value, t], u("saveRow", {
+        rowIndex: t,
+        cellIndex: e,
+        value: n,
+        confirm: () => {
+          c.value = c.value.filter(
+            (s) => s !== t
+          );
+        }
+      }));
+    }
+  });
+  const m = i(() => !!o.selection), T = i(() => {
+    const t = (m.value ? `${J}px ` : "") + (C.value ? `${F}px ` : "");
+    return o.columns.reduce((e, n) => {
+      const s = n.width ? `${n.width}px` : `${n.colSpan || 1}fr`;
+      return `${e} ${s}`;
+    }, t);
+  }), R = a(null), y = i(() => Array(o.loadingRowCount).fill(
+    Array(o.columns.length).fill("")
+  )), $ = i(() => o.isLoading ? [...o.rows, ...y.value] : o.rows), { list: v, containerProps: l, wrapperProps: b } = V($, {
+    itemHeight: (t) => h[t] ?? o.rowHeight
+  }), H = a(null), g = a(0), x = G(), k = i(() => !!x.search), B = (t) => {
+    l.onScroll(), g.value = t.target.scrollLeft + t.target.getBoundingClientRect().width, u("onScroll", t.target.scrollTop);
+  };
+  K(() => {
+    g.value = l.ref.value?.getBoundingClientRect().width, o.defaultScrollPosition && setTimeout(() => {
+      l.ref.value?.scrollTo({
+        top: o.defaultScrollPosition,
+        behavior: "smooth"
+      });
+    }, 300);
+  });
+  const I = i(() => {
+    const [t] = v.value;
+    return t && t.index > 0;
+  }), O = i(() => l.style), P = i(() => o.columns.reduce((t, e) => (e.isSticky && (t[e.id] = A(e)), t), {}));
+  j(
+    l.ref,
+    () => {
+      o.isInfiniteScroll && u("loadMore");
+    },
+    { distance: o.infiniteScrollThreshold }
+  );
+  function E() {
+    l.ref.value?.scrollTo({
+      top: 0,
+      behavior: "smooth"
+    });
+  }
+  function L(t) {
+    if (!o.sort)
+      return;
+    const e = o.sort.sortBy === t.id;
+    if (!(t.isSortable || t.isSortable === void 0))
+      return;
+    let s = o.sort.sortOrder, f = o.sort.sortBy;
+    e ? s = o.sort.sortOrder === "asc" ? "desc" : "asc" : f = t.id, u("update:sort", { sortBy: f, sortOrder: s });
+  }
+  function A(t) {
+    const { isSticky: e, width: n } = t;
+    if (!e || !n)
+      return null;
+    const s = o.columns.findIndex((r) => r.id === t.id), f = o.columns.reduce((r, S, w) => w < s ? r + S.width : r, 0), X = o.columns.reduce((r, S, w) => w > s ? r + S.width : r, 0);
+    return {
+      ...t.isStickyRight ? { right: `${X}px` } : { left: `${f}px` },
+      zIndex: 1
+    };
+  }
+  const d = a([]), h = {}, _ = (t) => d.value.includes(t), D = async (t, e) => {
+    const n = d.value.indexOf(t);
+    if (n === -1) {
+      d.value.push(t);
+      const s = e.target.closest("tr");
+      await N(), s && (h[t] = s.offsetHeight);
+    } else
+      d.value.splice(n, 1), delete h[t];
+  }, C = i(() => !!x.expanded), M = i(() => `${o.rowHeight}px`), W = i(
+    () => `1 / span ${o.columns.length + 1}`
+  );
+  return {
+    list: v,
+    containerProps: l,
+    wrapperProps: b,
+    activeRow: R,
+    gridColumnTemplate: T,
+    floatingActionRef: H,
+    scrollToTop: E,
+    toggleSortOrder: L,
+    columnsStickyPositions: P,
+    hasSearchSlot: k,
+    showBackToTopButton: I,
+    containerStyle: O,
+    onScroll: B,
+    savingRows: c,
+    floatingActionPosition: g,
+    hasExpandSlot: C,
+    hasCheckboxes: m,
+    toggleExpandRow: D,
+    isRowExpanded: _,
+    cssRowHeight: M,
+    cssExpandGridCol: W
+  };
+};
+export {
+  Z as tableCommon
+};

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

@@ -0,0 +1,28 @@
+export type Row = unknown[];
+export type Column = {
+    id: string;
+    title: string;
+    isSticky?: boolean;
+    isBordered?: boolean;
+    isSortable?: boolean;
+    colSpan?: number;
+    width?: number;
+    isTextRight?: boolean;
+    isStickyRight?: boolean;
+};
+export type Section = {
+    id: string;
+    title: string;
+    isSticky?: boolean;
+    isBordered?: boolean;
+    width: number;
+};
+export type Sort = {
+    sortBy: string;
+    sortOrder: 'asc' | 'desc';
+};
+export type MenuItem = {
+    id: string | number;
+    text: string;
+    icon?: string;
+};

package/components/table/v3/SortOrderIcon.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+export default _default;

package/components/table/v3/SortOrderIcon.vue.js

@@ -0,0 +1,21 @@
+import { openBlock as t, createElementBlock as e, pushScopeId as c, popScopeId as r, createElementVNode as n } from "vue";
+/* empty css                    */import s from "../../../_virtual/_plugin-vue_export-helper.js";
+const _ = {}, d = (o) => (c("data-v-cb20f507"), o = o(), r(), o), p = {
+  width: "8",
+  height: "4",
+  viewBox: "0 0 8 4",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, i = /* @__PURE__ */ d(() => /* @__PURE__ */ n("path", {
+  d: "M7.94188 3.66979L4.21022 0.0771272C4.1034 -0.0257091 3.89773 -0.0257091 3.78978 0.0771272L0.0581151 3.66979C-0.0805157 3.80376 0.0444792 4 0.268334 4H7.73167C7.95552 4 8.08052 3.80376 7.94188 3.66979Z",
+  fill: "currentColor"
+}, null, -1)), l = [
+  i
+];
+function a(o, f) {
+  return t(), e("svg", p, l);
+}
+const u = /* @__PURE__ */ s(_, [["render", a], ["__scopeId", "data-v-cb20f507"]]);
+export {
+  u as default
+};

package/components/table/v3/Table.vue.d.ts

@@ -0,0 +1,137 @@
+import type { Column, Row, Section, Sort } from '../common/Table.types';
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    title: string;
+    columns: Column[];
+    rows: Row[];
+    sections?: Section[];
+    sort: Sort;
+    isSticky?: boolean;
+    isStickyHeader?: boolean;
+    isLoading?: boolean;
+    emptyStateTitle?: string;
+    emptyStateSubtitle?: string;
+    isInfiniteScroll?: boolean;
+    infiniteScrollThreshold?: number;
+    rowHeight?: number | ((index: number) => number);
+    loadingRowCount?: number;
+    defaultScrollPosition?: number;
+    testId?: string;
+}>, {
+    isSticky: boolean;
+    isStickyHeader: boolean;
+    sections: any;
+    isLoading: boolean;
+    sortOrder: string;
+    emptyStateTitle: string;
+    emptyStateSubtitle: string;
+    isInfiniteScroll: boolean;
+    infiniteScrollThreshold: number;
+    rowHeight: number;
+    loadingRowCount: number;
+    defaultScrollPosition: any;
+    testId: string;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:sort": (newSort: Sort) => void;
+    onScroll: (event: Event) => void;
+    saveRow: (args_0: {
+        value: unknown;
+        confirm: () => void;
+        rowIndex: number;
+        cellIndex: number;
+    }) => void;
+    loadMore: () => void;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    title: string;
+    columns: Column[];
+    rows: Row[];
+    sections?: Section[];
+    sort: Sort;
+    isSticky?: boolean;
+    isStickyHeader?: boolean;
+    isLoading?: boolean;
+    emptyStateTitle?: string;
+    emptyStateSubtitle?: string;
+    isInfiniteScroll?: boolean;
+    infiniteScrollThreshold?: number;
+    rowHeight?: number | ((index: number) => number);
+    loadingRowCount?: number;
+    defaultScrollPosition?: number;
+    testId?: string;
+}>, {
+    isSticky: boolean;
+    isStickyHeader: boolean;
+    sections: any;
+    isLoading: boolean;
+    sortOrder: string;
+    emptyStateTitle: string;
+    emptyStateSubtitle: string;
+    isInfiniteScroll: boolean;
+    infiniteScrollThreshold: number;
+    rowHeight: number;
+    loadingRowCount: number;
+    defaultScrollPosition: any;
+    testId: string;
+}>>> & {
+    onOnScroll?: (event: Event) => any;
+    "onUpdate:sort"?: (newSort: Sort) => any;
+    onSaveRow?: (args_0: {
+        value: unknown;
+        confirm: () => void;
+        rowIndex: number;
+        cellIndex: number;
+    }) => any;
+    onLoadMore?: () => any;
+}, {
+    testId: string;
+    isLoading: boolean;
+    isSticky: boolean;
+    sections: Section[];
+    isStickyHeader: boolean;
+    emptyStateTitle: string;
+    emptyStateSubtitle: string;
+    isInfiniteScroll: boolean;
+    infiniteScrollThreshold: number;
+    rowHeight: number | ((index: number) => number);
+    loadingRowCount: number;
+    defaultScrollPosition: number;
+}>, Partial<Record<`section-${string}`, (_: {}) => any>> & Partial<Record<`header-${string}`, (_: {
+    column: Column;
+}) => any>> & Partial<Record<`cell-${string}`, (_: {
+    cell: unknown;
+    isLoading: boolean;
+    cellIndex: number;
+    row: import("@vueuse/core").UseVirtualListItem<Row>;
+    rowIndex: number;
+}) => any>> & {
+    title?(_: {}): any;
+    search?(_: {}): any;
+    "table-header-actions"?(_: {}): any;
+    "floating-actions"?(_: {
+        row: import("@vueuse/core").UseVirtualListItem<Row>;
+    }): any;
+    loader?(_: {}): any;
+    "empty-state"?(_: {}): any;
+}>;
+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];
+} & {};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/components/table/v3/Table.vue.js

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

package/components/table/v3/Table.vue2.js

@@ -0,0 +1,248 @@
+ import "../../../Table.vue_vue_type_style_index_0_scoped_76fef9bd_lang.css"; import { defineComponent as F, useCssVars as Y, unref as t, openBlock as s, createElementBlock as a, createElementVNode as o, normalizeStyle as y, normalizeClass as n, renderSlot as r, createVNode as c, withCtx as m, createTextVNode as g, toDisplayString as k, createCommentVNode as R, Fragment as $, renderList as v, createBlock as x, mergeProps as G, withDirectives as W, vShow as j } from "vue";
+import "../../typography/Heading.vue.js";
+import T from "../../typography/Text.vue.js";
+import "../../button/v3/Button.vue.js";
+import "../../button/v3/IconButton.vue.js";
+import q from "../../button/v3/ScrollButton.vue.js";
+import J from "../../skeleton/v3/Skeleton.vue.js";
+import K from "../../emptyState/v3/EmptyState.vue.js";
+import Q from "./TableHeaderSorter.vue.js";
+import { TableTestIdModifiers as u } from "../../../testids/index.js";
+import { tableCommon as U } from "../common/Table.common.js";
+const X = ["data-testid"], Z = ["data-testid"], p = ["data-testid"], _ = ["data-testid"], tt = ["data-testid"], et = ["data-testid"], it = ["data-testid"], st = ["onClick"], at = { class: "table-head-container" }, lt = ["data-testid"], ot = ["onMouseenter"], dt = { key: 1 }, nt = { key: 1 }, vt = /* @__PURE__ */ F({
+  __name: "Table",
+  props: {
+    title: null,
+    columns: null,
+    rows: null,
+    sections: { default: null },
+    sort: null,
+    isSticky: { type: Boolean, default: !0 },
+    isStickyHeader: { type: Boolean, default: !1 },
+    isLoading: { type: Boolean, default: !1 },
+    emptyStateTitle: { default: "No results found" },
+    emptyStateSubtitle: { default: "Try again with different filters" },
+    isInfiniteScroll: { type: Boolean, default: !1 },
+    infiniteScrollThreshold: { default: 100 },
+    rowHeight: { type: [Number, Function], default: 48 },
+    loadingRowCount: { default: 3 },
+    defaultScrollPosition: { default: null },
+    testId: { default: "" }
+  },
+  emits: ["update:sort", "onScroll", "saveRow", "loadMore"],
+  setup(i, { emit: A }) {
+    const H = i;
+    Y((l) => ({
+      "3205197f": t(N)
+    }));
+    const {
+      list: b,
+      containerProps: I,
+      wrapperProps: L,
+      activeRow: S,
+      gridColumnTemplate: N,
+      floatingActionRef: P,
+      scrollToTop: w,
+      toggleSortOrder: z,
+      columnsStickyPositions: B,
+      hasSearchSlot: M,
+      showBackToTopButton: O,
+      containerStyle: D,
+      onScroll: E,
+      savingRows: C,
+      floatingActionPosition: V
+    } = U(H, A);
+    return (l, h) => (s(), a("div", {
+      class: "table-container",
+      "data-testid": `${i.testId}-${t(u).CONTAINER}`,
+      onMouseleave: h[1] || (h[1] = (e) => S.value = null)
+    }, [
+      o("table", {
+        ref: t(I).ref,
+        style: y(t(D)),
+        "data-testid": `${i.testId}-${t(u).TABLE}`,
+        onScrollPassive: h[0] || (h[0] = //@ts-ignore
+        (...e) => t(E) && t(E)(...e))
+      }, [
+        i.title || l.$slots.search ? (s(), a("div", {
+          key: 0,
+          class: n(["table-header", { isStickyHeader: i.isStickyHeader }]),
+          "data-testid": `${i.testId}-${t(u).HEADER}`
+        }, [
+          o("div", {
+            class: n(["table-title", t(M) ? "border-search" : ""]),
+            "data-testid": `${i.testId}-${t(u).TITLE}`
+          }, [
+            r(l.$slots, "title", {}, () => [
+              c(t(T), {
+                size: "md",
+                strong: ""
+              }, {
+                default: m(() => [
+                  g(k(i.title), 1)
+                ]),
+                _: 1
+              })
+            ], !0)
+          ], 10, _),
+          o("div", {
+            class: "table-header-right",
+            "data-testid": `${i.testId}-${t(u).HEADER_RIGHT}`
+          }, [
+            r(l.$slots, "search", {}, void 0, !0)
+          ], 8, tt),
+          o("div", {
+            class: "table-header-actions",
+            "data-testid": `${i.testId}-${t(u).ACTIONS}`
+          }, [
+            r(l.$slots, "table-header-actions", {}, void 0, !0)
+          ], 8, et)
+        ], 10, p)) : R("", !0),
+        o("thead", {
+          class: n({ sticky: i.isSticky, isStickyHeader: i.isStickyHeader })
+        }, [
+          o("div", {
+            class: "sections",
+            "data-testid": `${i.testId}-${t(u).SECTIONS}`
+          }, [
+            (s(!0), a($, null, v(i.sections, (e) => (s(), a("div", {
+              key: e.id,
+              class: n(["section-container", { sticky: e.isSticky }])
+            }, [
+              r(l.$slots, `section-${e.id}`, {}, () => [
+                o("div", {
+                  style: y({ width: e.width + "px" }),
+                  class: n({ section: !0 })
+                }, [
+                  c(t(T), { size: "xs" }, {
+                    default: m(() => [
+                      g(k(e.title), 1)
+                    ]),
+                    _: 2
+                  }, 1024)
+                ], 4)
+              ], !0)
+            ], 2))), 128))
+          ], 8, it),
+          o("tr", null, [
+            (s(!0), a($, null, v(i.columns, (e) => (s(), a("th", {
+              key: e.id,
+              class: n({
+                sticky: e.isSticky,
+                bordered: e.isBordered,
+                isTextRight: e.isTextRight,
+                isSortable: e.isSortable
+              }),
+              style: y(e.isSticky ? t(B)[e.id] : null),
+              onClick: (f) => t(z)(e)
+            }, [
+              o("div", at, [
+                r(l.$slots, `header-${e.id}`, { column: e }, () => [
+                  c(t(T), {
+                    size: "sm",
+                    strong: "",
+                    "is-truncated": !1
+                  }, {
+                    default: m(() => [
+                      g(k(e.title), 1)
+                    ]),
+                    _: 2
+                  }, 1024)
+                ], !0),
+                e.id === i.sort.sortBy ? (s(), x(Q, {
+                  key: 0,
+                  class: "table-head-sorter",
+                  "sort-order": i.sort.sortOrder
+                }, null, 8, ["sort-order"])) : R("", !0)
+              ])
+            ], 14, st))), 128))
+          ])
+        ], 2),
+        o("tbody", null, [
+          t(b).length > 0 ? (s(), a("div", G({
+            key: 0,
+            class: "table-body-wrapper",
+            "data-testid": `${i.testId}-${t(u).BODY_WRAPPER}`
+          }, t(L)), [
+            (s(!0), a($, null, v(t(b), (e) => (s(), a("tr", {
+              key: e.index,
+              class: n(["table-row", {
+                loading: i.isLoading || i.isLoading && !e.data || t(C).includes(e.index),
+                active: t(S) === e.index
+              }]),
+              onMouseenter: (f) => S.value = e.index
+            }, [
+              W(o("div", {
+                ref_for: !0,
+                ref_key: "floatingActionRef",
+                ref: P,
+                style: y({ left: t(V) + "px" }),
+                class: "floating-actions"
+              }, [
+                r(l.$slots, "floating-actions", { row: e }, void 0, !0)
+              ], 4), [
+                [
+                  j,
+                  l.$slots["floating-actions"] && t(S) === e.index && !i.isLoading
+                ]
+              ]),
+              (s(!0), a($, null, v(e.data, (f, d) => (s(), a("td", {
+                key: d,
+                class: n({
+                  sticky: i.columns[d].isSticky,
+                  bordered: i.columns[d].isBordered,
+                  isTextRight: i.columns[d].isTextRight
+                }),
+                style: y(
+                  i.columns[d].isSticky ? t(B)[i.columns[d].id] : null
+                )
+              }, [
+                !i.isLoading || i.isLoading && f ? (s(), a("div", {
+                  key: 0,
+                  class: n({
+                    last: d === e.data.length - 1,
+                    "table-cell": !0,
+                    floating: l.$slots["floating-actions"]
+                  })
+                }, [
+                  r(l.$slots, `cell-${i.columns[d].id}`, {
+                    cell: f,
+                    isLoading: t(C).includes(e.index),
+                    cellIndex: d,
+                    row: e,
+                    rowIndex: e.index
+                  }, () => [
+                    c(t(T), { size: "sm" }, {
+                      default: m(() => [
+                        g(k(f), 1)
+                      ]),
+                      _: 2
+                    }, 1024)
+                  ], !0)
+                ], 2)) : r(l.$slots, "loader", { key: 1 }, () => [
+                  c(t(J), { round: "" })
+                ], !0)
+              ], 6))), 128))
+            ], 42, ot))), 128))
+          ], 16, lt)) : (s(), a("div", dt, [
+            r(l.$slots, "empty-state", {}, () => [
+              c(t(K), {
+                title: i.emptyStateTitle,
+                subtitle: i.emptyStateSubtitle,
+                "test-id": `${i.testId}-${t(u).EMPTY_STATE}`
+              }, null, 8, ["title", "subtitle", "test-id"])
+            ], !0)
+          ]))
+        ]),
+        t(b).length > 0 ? (s(), a("tfoot", nt)) : R("", !0)
+      ], 44, Z),
+      c(t(q), {
+        show: t(O),
+        onScrolled: t(w)
+      }, null, 8, ["show", "onScrolled"])
+    ], 40, X));
+  }
+});
+export {
+  vt as default
+};

package/components/table/v3/TableHeaderSorter.vue.js

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

package/components/table/v3/TableHeaderSorter.vue2.js

@@ -0,0 +1,23 @@
+ import "../../../TableHeaderSorter.vue_vue_type_style_index_0_scoped_745a44a2_lang.css"; import { defineComponent as o, openBlock as a, createElementBlock as l, createVNode as r, normalizeClass as t } from "vue";
+import s from "./SortOrderIcon.vue.js";
+const c = { class: "table-head-sorter-container" }, u = /* @__PURE__ */ o({
+  __name: "TableHeaderSorter",
+  props: {
+    sortOrder: null
+  },
+  setup(e) {
+    return (d, n) => (a(), l("div", c, [
+      r(s, {
+        name: "sort-order",
+        class: t({ "table-head-sorter-selected": e.sortOrder === "asc" })
+      }, null, 8, ["class"]),
+      r(s, {
+        name: "sort-order",
+        class: t(["table-head-sorter-desc", { "table-head-sorter-selected": e.sortOrder === "desc" }])
+      }, null, 8, ["class"])
+    ]));
+  }
+});
+export {
+  u as default
+};