@ironsource/shared-ui 2.0.0-rc.2 → 2.0.0-test.1

package/components/table/Table.vue2.js

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

package/components/table/TableHeaderSorter.vue.js

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

package/components/table/TableHeaderSorter.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.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
+};

package/components/table/index.js

@@ -0,0 +1,8 @@
+import o from "./Table.vue.js";
+import { TableContext as e } from "./TableContext.js";
+const m = () => [o, e];
+export {
+  o as Table,
+  e as TableContext,
+  m as TableTypes
+};

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

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

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

@@ -0,0 +1,66 @@
+import { defineComponent as v, ref as n, provide as p, openBlock as u, createElementBlock as c, createElementVNode as m, renderSlot as d, createVNode as x, withCtx as C, createTextVNode as b, toDisplayString as E } from "vue";
+import _ from "../typography/Text.vue.js";
+import { EditableContext as g } from "./EditableContext.js";
+import { onClickOutside as k } from "@vueuse/core";
+import { useTableContext as y } from "../table/TableContext.js";
+const I = { class: "editable-container" }, h = {
+  key: 1,
+  class: "editable-content"
+}, S = /* @__PURE__ */ v({
+  __name: "Editable",
+  props: {
+    cell: { default: "" },
+    isEditing: { type: Boolean, default: !1 },
+    validateFunction: { type: Function, default: () => !1 },
+    isLoading: { type: Boolean, default: !1 },
+    rowIndex: null,
+    cellIndex: null
+  },
+  setup(r) {
+    const l = r, t = n(!1), o = n(l.cell), i = n(null), s = y("Editable"), a = n(null);
+    p(g, {
+      focusable: !0,
+      value: o,
+      error: a,
+      confirmable: !0,
+      onChange(e) {
+        o.value = e, a.value = l.validateFunction?.(o.value);
+      },
+      onClose: () => {
+        const e = l.validateFunction?.(o.value);
+        a.value = e, !e && (s.onClose({
+          rowIndex: l.rowIndex,
+          cellIndex: l.cellIndex,
+          value: o.value
+        }), t.value = !1);
+      }
+    });
+    const f = () => {
+      t.value || (t.value = !t.value);
+    };
+    return k(i, () => {
+      t.value = !1, s.onClose();
+    }), (e, w) => (u(), c("div", {
+      ref_key: "target",
+      ref: i,
+      class: "container",
+      onClick: f
+    }, [
+      m("div", I, [
+        t.value ? d(e.$slots, "input", { key: 0 }, void 0, !0) : (u(), c("div", h, [
+          d(e.$slots, "content", {}, () => [
+            x(_, { size: "sm" }, {
+              default: C(() => [
+                b(E(r.cell), 1)
+              ]),
+              _: 1
+            })
+          ], !0)
+        ]))
+      ])
+    ], 512));
+  }
+});
+export {
+  S as default
+};

package/components/table-cells/index.js

@@ -0,0 +1,10 @@
+import t from "./Editable.vue.js";
+import { EditableContext as e } from "./EditableContext.js";
+import { useEditableContext as a } from "./EditableContext.js";
+const i = () => [t, e];
+export {
+  t as Editable,
+  e as EditableContext,
+  i as EditableTypes,
+  a as useEditableContext
+};

package/components/tabs/Tabs.vue.js

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

package/components/tabs/Tabs.vue2.js

@@ -0,0 +1,95 @@
+import { defineComponent as W, useCssVars as y, unref as n, ref as T, computed as c, openBlock as o, createElementBlock as l, normalizeClass as u, Fragment as H, renderList as M, renderSlot as V, createBlock as p, createCommentVNode as m, withCtx as E, createTextVNode as F, toDisplayString as P, pushScopeId as _, popScopeId as A, createElementVNode as R } from "vue";
+import { TabsTestIdModifiers as h } from "../../testids/index.js";
+/* empty css                          */import U from "../typography/Text.vue.js";
+import D from "../icon/Icon.vue.js";
+const j = (s) => (_("data-v-8e053ecb"), s = s(), A(), s), q = ["data-testid"], G = ["data-testid", "onClick", "onMouseover"], J = /* @__PURE__ */ j(() => /* @__PURE__ */ R("div", { class: "tabs-border-line" }, null, -1)), K = {
+  key: 0,
+  class: "tabs-border-line-hover"
+}, ee = /* @__PURE__ */ W({
+  __name: "Tabs",
+  props: {
+    tabsList: { default: () => [] },
+    selectedTab: null,
+    variant: { default: "fill" },
+    size: { default: "sm" },
+    testId: { default: "" }
+  },
+  emits: ["update:selectedTab"],
+  setup(s, { emit: x }) {
+    const r = s;
+    y((e) => ({
+      "3c4d3c4a": n(L),
+      "09264645": n($),
+      "0d647894": n(g),
+      "75c6ab08": n(N)
+    }));
+    const d = T([]), a = T(null), I = 12, k = { tabsNewList: d }, C = c(
+      () => a.value && a.value !== r.selectedTab
+    ), L = c(() => {
+      const e = i();
+      return d.value[e]?.offsetLeft + "px";
+    }), i = () => r.tabsList.findIndex((e) => e.id === r.selectedTab), $ = c(() => {
+      const e = i();
+      return d.value[e]?.clientWidth + "px";
+    }), f = (e) => {
+      const v = d.value[e]?.offsetLeft, t = d.value[e]?.clientWidth;
+      return (parseFloat(v) + parseFloat(t) / 2 - I).toString() + "px";
+    }, g = c(() => {
+      const e = i();
+      return f(e);
+    }), w = () => r.tabsList.findIndex((e) => e.id === a.value), N = c(() => {
+      const e = w();
+      return f(e);
+    }), S = (e) => {
+      x("update:selectedTab", e.id);
+    }, z = (e) => {
+      e !== null && (a.value = e.id);
+    }, B = () => {
+      a.value = null;
+    };
+    return (e, v) => (o(), l("ul", {
+      class: u(["tabs-wrap", [s.size, s.variant]]),
+      "data-testid": `${s.testId}-${n(h).WRAPPER}`
+    }, [
+      (o(!0), l(H, null, M(s.tabsList, (t) => (o(), l("li", {
+        ref_for: !0,
+        ref: k.tabsNewList,
+        key: t.id,
+        class: u(["tab-item", {
+          "disabled-tab": t.disabled,
+          "selected-tab": t.id === s.selectedTab
+        }]),
+        "data-testid": `${s.testId}-${n(h).TAB}-${t.id}`,
+        onClick: (b) => S(t),
+        onMouseover: (b) => z(t),
+        onMouseleave: B
+      }, [
+        V(e.$slots, "default", { tab: t }, () => [
+          t.iconName ? (o(), p(n(D), {
+            key: 0,
+            name: t.iconName,
+            class: u(["tab-icon", {
+              size: s.size,
+              "lone-icon": !t.name
+            }])
+          }, null, 8, ["name", "class"])) : m("", !0),
+          t.name ? (o(), p(n(U), {
+            key: 1,
+            size: "sm",
+            strong: ""
+          }, {
+            default: E(() => [
+              F(P(t.name), 1)
+            ]),
+            _: 2
+          }, 1024)) : m("", !0)
+        ], !0)
+      ], 42, G))), 128)),
+      J,
+      n(C) ? (o(), l("div", K)) : m("", !0)
+    ], 10, q));
+  }
+});
+export {
+  ee as default
+};

package/components/tabs/index.js

@@ -0,0 +1,6 @@
+import o from "./Tabs.vue.js";
+const p = () => [o];
+export {
+  o as Tabs,
+  p as TabsTypes
+};

package/components/textArea/TextArea.vue.js

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

package/components/textArea/TextArea.vue2.js

@@ -0,0 +1,64 @@
+import { defineComponent as x, openBlock as d, createElementBlock as l, normalizeClass as s, unref as t, createVNode as i, withCtx as c, createTextVNode as o, toDisplayString as n, createCommentVNode as u, createElementVNode as T } from "vue";
+import { TextAreaTestIdModifiers as a } from "../../testids/index.js";
+/* empty css                          */import f from "../typography/Text.vue.js";
+const h = ["data-testid"], k = ["data-testid"], E = ["value", "placeholder", "disabled", "data-testid"], I = {
+  key: 1,
+  class: "extra-text-container"
+}, B = /* @__PURE__ */ x({
+  __name: "TextArea",
+  props: {
+    modelValue: { default: "" },
+    placeholder: { default: "" },
+    disabled: { type: Boolean, default: !1 },
+    label: { default: "" },
+    feedbackHelpText: { default: "" },
+    feedbackErrorText: { default: "" },
+    testId: { default: "" }
+  },
+  emits: ["update:modelValue"],
+  setup(e, { emit: m }) {
+    const b = (r) => {
+      m("update:modelValue", r.target.value);
+    };
+    return (r, V) => (d(), l("div", {
+      class: s({ "textarea-with-label-container": !0, disabled: e.disabled }),
+      "data-testid": `${e.testId}-${t(a).WRAPPER}`
+    }, [
+      e.label ? (d(), l("div", {
+        key: 0,
+        class: "label-container",
+        "data-testid": `${e.testId}-${t(a).LABEL}`
+      }, [
+        i(t(f), { class: "label" }, {
+          default: c(() => [
+            o(n(e.label), 1)
+          ]),
+          _: 1
+        })
+      ], 8, k)) : u("", !0),
+      T("textarea", {
+        class: "textarea",
+        value: e.modelValue,
+        placeholder: e.placeholder,
+        disabled: e.disabled,
+        "data-testid": `${e.testId}-${t(a).FIELD}`,
+        onInput: b
+      }, null, 40, E),
+      e.feedbackErrorText || e.feedbackHelpText ? (d(), l("div", I, [
+        i(t(f), {
+          class: s({ [e.feedbackErrorText ? "error" : "help"]: !0 }),
+          "data-testid": `${e.testId}-${t(a).TEXT}`,
+          size: "caption"
+        }, {
+          default: c(() => [
+            o(n(e.feedbackErrorText || e.feedbackHelpText), 1)
+          ]),
+          _: 1
+        }, 8, ["class", "data-testid"])
+      ])) : u("", !0)
+    ], 10, h));
+  }
+});
+export {
+  B as default
+};

package/components/textArea/index.js

@@ -0,0 +1,6 @@
+import e from "./TextArea.vue.js";
+const t = () => [e];
+export {
+  e as TextArea,
+  t as TextAreaTypes
+};

package/components/toggle/Toggle.vue.js

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