@ironsource/shared-ui 1.4.2-rc.6 → 1.4.2-test.0

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

@@ -1,66 +1,121 @@
 import type { Column, Section, Sort } from './Table.types';
-declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    title: string;
-    columns: Column[];
-    rows: unknown[][];
-    sections?: Section[];
-    sort: Sort;
-    isSticky?: boolean;
-    isLoading?: boolean;
-    emptyStateTitle?: string;
-    emptyStateSubtitle?: string;
-    isInfiniteScroll?: boolean;
-    infiniteScrollThreshold?: number;
-    rowHeight?: number | ((index: number) => number);
-    loadingRowCount?: number;
-}>, {
-    isSticky: boolean;
-    sections: any;
-    isLoading: boolean;
-    sortOrder: string;
-    emptyStateTitle: string;
-    emptyStateSubtitle: string;
-    isInfiniteScroll: boolean;
-    infiniteScrollThreshold: number;
-    rowHeight: number;
-    loadingRowCount: number;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+type Row = unknown[];
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+    sort: {
+        type: import("vue").PropType<Sort>;
+        required: true;
+    };
+    title: {
+        type: import("vue").PropType<string>;
+        required: true;
+    };
+    columns: {
+        type: import("vue").PropType<Column[]>;
+        required: true;
+    };
+    isLoading: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    rows: {
+        type: import("vue").PropType<Row[]>;
+        required: true;
+    };
+    sections: {
+        type: import("vue").PropType<Section[]>;
+        default: any;
+    };
+    isSticky: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    emptyStateTitle: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    emptyStateSubtitle: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    isInfiniteScroll: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    infiniteScrollThreshold: {
+        type: import("vue").PropType<number>;
+        default: number;
+    };
+    rowHeight: {
+        type: import("vue").PropType<number | ((index: number) => number)>;
+        default: number;
+    };
+    loadingRowCount: {
+        type: import("vue").PropType<number>;
+        default: number;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:sort": (newSort: Sort) => void;
-} & {
     saveRow: (payload_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: unknown[][];
-    sections?: Section[];
-    sort: Sort;
-    isSticky?: boolean;
-    isLoading?: boolean;
-    emptyStateTitle?: string;
-    emptyStateSubtitle?: string;
-    isInfiniteScroll?: boolean;
-    infiniteScrollThreshold?: number;
-    rowHeight?: number | ((index: number) => number);
-    loadingRowCount?: number;
-}>, {
-    isSticky: boolean;
-    sections: any;
-    isLoading: boolean;
-    sortOrder: string;
-    emptyStateTitle: string;
-    emptyStateSubtitle: string;
-    isInfiniteScroll: boolean;
-    infiniteScrollThreshold: number;
-    rowHeight: number;
-    loadingRowCount: number;
-}>>> & {
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    sort: {
+        type: import("vue").PropType<Sort>;
+        required: true;
+    };
+    title: {
+        type: import("vue").PropType<string>;
+        required: true;
+    };
+    columns: {
+        type: import("vue").PropType<Column[]>;
+        required: true;
+    };
+    isLoading: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    rows: {
+        type: import("vue").PropType<Row[]>;
+        required: true;
+    };
+    sections: {
+        type: import("vue").PropType<Section[]>;
+        default: any;
+    };
+    isSticky: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    emptyStateTitle: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    emptyStateSubtitle: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    isInfiniteScroll: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    infiniteScrollThreshold: {
+        type: import("vue").PropType<number>;
+        default: number;
+    };
+    rowHeight: {
+        type: import("vue").PropType<number | ((index: number) => number)>;
+        default: number;
+    };
+    loadingRowCount: {
+        type: import("vue").PropType<number>;
+        default: number;
+    };
+}>> & {
     "onUpdate:sort"?: (newSort: Sort) => any;
     onSaveRow?: (args_0: {
         value: unknown;
@@ -71,27 +126,35 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     onLoadMore?: () => any;
 }, {
     isLoading: boolean;
-    isSticky: boolean;
     sections: Section[];
+    isSticky: boolean;
     emptyStateTitle: string;
     emptyStateSubtitle: string;
     isInfiniteScroll: boolean;
     infiniteScrollThreshold: number;
     rowHeight: number | ((index: number) => number);
     loadingRowCount: number;
+}>, Partial<Record<string, (_: {}) => any>> & Partial<Record<string, (_: {
+    column: Column;
+}) => any>> & Partial<Record<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_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
     };
 };
-type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? P[K] & {
-        default: D[K];
-    } : P[K];
-};

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

@@ -0,0 +1,6 @@
+import o from "./Table.vue.vue2.js";
+/* empty css                *//* empty css                */import t from "../../_virtual/_plugin-vue_export-helper.vue.js";
+const a = /* @__PURE__ */ t(o, [["__scopeId", "data-v-365ff6b7"]]);
+export {
+  a as default
+};

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

@@ -0,0 +1,261 @@
+import { defineComponent as K, useCssVars as Q, unref as s, ref as $, provide as U, computed as g, onMounted as W, openBlock as r, createElementBlock as n, createElementVNode as u, normalizeStyle as v, renderSlot as c, createVNode as f, withCtx as w, createTextVNode as C, toDisplayString as B, createCommentVNode as P, normalizeClass as y, Fragment as T, renderList as p, createBlock as X, mergeProps as Y, withDirectives as Z, vShow as I } from "vue";
+/* empty css                              */import L from "../typography/Text.vue.vue.js";
+/* empty css                     *//* empty css                            *//* empty css                         *//* empty css                             */import _ from "../button/ScrollButton.vue.vue.js";
+import tt from "../skeleton/Skeleton.vue.vue.js";
+import et from "../emptyState/EmptyState.vue.vue.js";
+import ot from "./TableHeaderSorter.vue.vue.js";
+import { useVirtualList as st, useInfiniteScroll as it } from "@vueuse/core";
+import { TableContext as lt } from "./TableContext.vue.js";
+const rt = {
+  key: 0,
+  class: "table-header"
+}, nt = { class: "table-title" }, at = { class: "table-header-right" }, dt = { class: "table-header-actions" }, ut = { class: "sections" }, ct = ["onClick"], ft = { class: "table-head-container" }, yt = ["onMouseenter"], mt = { key: 1 }, ht = { key: 1 }, zt = /* @__PURE__ */ K({
+  __name: "Table",
+  props: {
+    title: null,
+    columns: null,
+    rows: null,
+    sections: { default: null },
+    sort: null,
+    isSticky: { type: Boolean, default: !0 },
+    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 }
+  },
+  emits: ["update:sort", "saveRow", "loadMore"],
+  setup(o, { emit: R }) {
+    const i = o;
+    Q((e) => ({
+      "287203b6": s(N)
+    }));
+    const m = $([]);
+    U(lt, {
+      onClose({ rowIndex: e, cellIndex: l, value: t } = {}) {
+        t && (m.value = [...m.value, e], R("saveRow", {
+          rowIndex: e,
+          cellIndex: l,
+          value: t,
+          confirm: () => {
+            m.value = m.value.filter((a) => a !== e);
+          }
+        }));
+      }
+    });
+    const N = g(() => i.columns.reduce((e, l) => {
+      const t = l.width ? `${l.width}px` : `${l.colSpan || 1}fr`;
+      return `${e} ${t}`;
+    }, "")), S = $(null), V = g(() => Array(i.loadingRowCount).fill(
+      Array(i.columns.length).fill("")
+    )), A = g(() => i.isLoading ? [...i.rows, ...V.value] : i.rows), { list: k, containerProps: h, wrapperProps: O } = st(A, {
+      itemHeight: i.rowHeight
+    }), H = $(null), z = $(0), x = (e) => {
+      h.onScroll(), z.value = e.target.scrollLeft + e.target.getBoundingClientRect().width;
+    };
+    W(() => {
+      z.value = h.ref.value?.getBoundingClientRect().width;
+    });
+    const E = g(() => {
+      const [e] = k.value;
+      return e && e.index > 0;
+    }), D = g(() => h.style), M = g(() => i.columns.reduce((e, l) => (l.isSticky && (e[l.id] = q(l)), e), {}));
+    it(
+      h.ref,
+      () => {
+        i.isInfiniteScroll && R("loadMore");
+      },
+      { distance: i.infiniteScrollThreshold }
+    );
+    function F() {
+      h.ref.value.scrollTo({
+        top: 0,
+        behavior: "smooth"
+      });
+    }
+    function j(e) {
+      const l = i.sort.sortBy === e.id;
+      if (!(e.isSortable || e.isSortable === void 0))
+        return;
+      let a = i.sort.sortOrder, d = i.sort.sortBy;
+      l ? a = i.sort.sortOrder === "asc" ? "desc" : "asc" : d = e.id, R("update:sort", { sortBy: d, sortOrder: a });
+    }
+    function q(e) {
+      const { isSticky: l, width: t } = e;
+      if (!l || !t)
+        return null;
+      const a = i.columns.findIndex((b) => b.id === e.id);
+      return {
+        left: `${i.columns.reduce((b, G, J) => J < a ? b + G.width : b, 0)}px`,
+        zIndex: 1
+      };
+    }
+    return (e, l) => (r(), n("div", {
+      class: "table-container",
+      onMouseleave: l[0] || (l[0] = (t) => S.value = null)
+    }, [
+      u("table", {
+        ref: s(h).ref,
+        style: v(s(D)),
+        onScrollPassive: x
+      }, [
+        o.title || e.$slots.search ? (r(), n("div", rt, [
+          u("div", nt, [
+            c(e.$slots, "title", {}, () => [
+              f(s(L), {
+                size: "md",
+                strong: ""
+              }, {
+                default: w(() => [
+                  C(B(o.title), 1)
+                ]),
+                _: 1
+              })
+            ], !0)
+          ]),
+          u("div", at, [
+            c(e.$slots, "search", {}, void 0, !0)
+          ]),
+          u("div", dt, [
+            c(e.$slots, "table-header-actions", {}, void 0, !0)
+          ])
+        ])) : P("", !0),
+        u("thead", {
+          class: y({ sticky: o.isSticky })
+        }, [
+          u("div", ut, [
+            (r(!0), n(T, null, p(o.sections, (t) => (r(), n("div", {
+              key: t.id,
+              class: y(["section-container", { sticky: t.isSticky }])
+            }, [
+              c(e.$slots, `section-${t.id}`, {}, () => [
+                u("div", {
+                  style: v({ width: t.width + "px" }),
+                  class: y({ section: !0 })
+                }, [
+                  f(s(L), { size: "xs" }, {
+                    default: w(() => [
+                      C(B(t.title), 1)
+                    ]),
+                    _: 2
+                  }, 1024)
+                ], 4)
+              ], !0)
+            ], 2))), 128))
+          ]),
+          u("tr", null, [
+            (r(!0), n(T, null, p(o.columns, (t) => (r(), n("th", {
+              key: t.id,
+              class: y({ sticky: t.isSticky, bordered: t.isBordered }),
+              style: v(t.isSticky ? s(M)[t.id] : null),
+              onClick: (a) => j(t)
+            }, [
+              u("div", ft, [
+                c(e.$slots, `header-${t.id}`, { column: t }, () => [
+                  f(s(L), {
+                    size: "sm",
+                    strong: "",
+                    "is-truncated": !1
+                  }, {
+                    default: w(() => [
+                      C(B(t.title), 1)
+                    ]),
+                    _: 2
+                  }, 1024)
+                ], !0),
+                t.id === o.sort.sortBy ? (r(), X(ot, {
+                  key: 0,
+                  class: "table-head-sorter",
+                  "sort-order": o.sort.sortOrder
+                }, null, 8, ["sort-order"])) : P("", !0)
+              ])
+            ], 14, ct))), 128))
+          ])
+        ], 2),
+        u("tbody", null, [
+          s(k).length > 0 ? (r(), n("div", Y({
+            key: 0,
+            class: "table-body-wrapper"
+          }, s(O)), [
+            (r(!0), n(T, null, p(s(k), (t) => (r(), n("tr", {
+              key: t.index,
+              class: y(["table-row", {
+                loading: o.isLoading || o.isLoading && !t.data || m.value.includes(t.index),
+                active: S.value === t.index
+              }]),
+              onMouseenter: (a) => S.value = t.index
+            }, [
+              Z(u("div", {
+                ref_for: !0,
+                ref_key: "floatingActionRef",
+                ref: H,
+                style: v({ left: z.value + "px" }),
+                class: "floating-actions"
+              }, [
+                c(e.$slots, "floating-actions", { row: t }, void 0, !0)
+              ], 4), [
+                [
+                  I,
+                  e.$slots["floating-actions"] && S.value === t.index && !o.isLoading
+                ]
+              ]),
+              (r(!0), n(T, null, p(t.data, (a, d) => (r(), n("td", {
+                key: d,
+                class: y({
+                  sticky: o.columns[d].isSticky,
+                  bordered: o.columns[d].isBordered
+                }),
+                style: v(
+                  o.columns[d].isSticky ? s(M)[o.columns[d].id] : null
+                )
+              }, [
+                !o.isLoading || o.isLoading && a ? (r(), n("div", {
+                  key: 0,
+                  class: y({
+                    last: d === t.data.length - 1,
+                    "table-cell": !0,
+                    floating: e.$slots["floating-actions"]
+                  })
+                }, [
+                  c(e.$slots, `cell-${o.columns[d].id}`, {
+                    cell: a,
+                    isLoading: m.value.includes(t.index),
+                    cellIndex: d,
+                    row: t,
+                    rowIndex: t.index
+                  }, () => [
+                    f(s(L), { size: "sm" }, {
+                      default: w(() => [
+                        C(B(a), 1)
+                      ]),
+                      _: 2
+                    }, 1024)
+                  ], !0)
+                ], 2)) : c(e.$slots, "loader", { key: 1 }, () => [
+                  f(s(tt), { round: "" })
+                ], !0)
+              ], 6))), 128))
+            ], 42, yt))), 128))
+          ], 16)) : (r(), n("div", mt, [
+            c(e.$slots, "empty-state", {}, () => [
+              f(s(et), {
+                title: o.emptyStateTitle,
+                subtitle: o.emptyStateSubtitle
+              }, null, 8, ["title", "subtitle"])
+            ], !0)
+          ]))
+        ]),
+        s(k).length > 0 ? (r(), n("tfoot", ht)) : P("", !0)
+      ], 36),
+      f(s(_), {
+        show: s(E),
+        onScrolled: F
+      }, null, 8, ["show"])
+    ], 32));
+  }
+});
+export {
+  zt as default
+};

package/components/table/TableContext.vue.js

@@ -1,19 +1,18 @@
-import { inject } from 'vue';
-
-const TableContext = Symbol(
+import { inject as o } from "vue";
+const n = Symbol(
   "TableContext"
 );
-function useTableContext(component) {
-  const context = inject(TableContext, {});
-  if (context === null) {
-    const err = new Error(
-      `<${component} /> is missing a parent <Table /> component.`
+function c(e) {
+  const t = o(n, {});
+  if (t === null) {
+    const r = new Error(
+      `<${e} /> is missing a parent <Table /> component.`
     );
-    if (Error.captureStackTrace)
-      Error.captureStackTrace(err, useTableContext);
-    throw err;
+    throw Error.captureStackTrace && Error.captureStackTrace(r, c), r;
   }
-  return context;
+  return t;
 }
-
-export { TableContext, useTableContext };
+export {
+  n as TableContext,
+  c as useTableContext
+};

package/components/table/TableHeaderSorter.vue.d.ts

@@ -1,15 +1,12 @@
-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]>;
+declare const _default: import("vue").DefineComponent<{
+    sortOrder: {
+        type: import("vue").PropType<"desc" | "asc">;
+        required: true;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    sortOrder: {
+        type: import("vue").PropType<"desc" | "asc">;
         required: true;
     };
-};
+}>>, {}>;
+export default _default;

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

@@ -0,0 +1,6 @@
+import o from "./TableHeaderSorter.vue.vue2.js";
+/* empty css                            */import r from "../../_virtual/_plugin-vue_export-helper.vue.js";
+const f = /* @__PURE__ */ r(o, [["__scopeId", "data-v-350aa9f0"]]);
+export {
+  f as default
+};

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

@@ -0,0 +1,23 @@
+import { defineComponent as o, openBlock as a, createElementBlock as l, createVNode as r, normalizeClass as t } from "vue";
+import s from "./SortOrderIcon.vue.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
+};