@ironsource/shared-ui 2.1.11-rc.24 → 2.1.11-rc.25

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

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

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

@@ -7,7 +7,7 @@ export type Column = {
     isBordered?: boolean;
     isSortable?: boolean;
     colSpan?: number;
-    width?: number;
+    width?: number | string;
     isTextRight?: boolean;
     isStickyRight?: boolean;
     helpText?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ironsource/shared-ui",
-  "version": "2.1.11-rc.24",
+  "version": "2.1.11-rc.25",
   "engines": {
     "npm": ">=7.0.0",
     "node": ">=16.0.0"