energy-components 2.2.0 → 2.3.0

package/dist/components/tableRenderer.es.js

@@ -1,24 +1,69 @@
-import { defineComponent as q, computed as h, openBlock as s, createElementBlock as r, normalizeClass as i, createElementVNode as d, Fragment as u, renderList as _, normalizeStyle as C, renderSlot as k, createVNode as f, withModifiers as v, unref as g, createCommentVNode as b, toDisplayString as p, createTextVNode as F } from "vue";
-import S from "./checkbox.es.js";
-import { R as L } from "./icon-svg-CW3eQRcp.js";
-import { g as M } from "./getInstance-GhoEcxLF.js";
-import { _ as j } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-import './style/tableRenderer.css';const G = { key: 0 }, J = ["aria-sort", "onClick"], O = {
+import { reactive as se, ref as j, watch as M, getCurrentInstance as le, onUnmounted as re, defineComponent as oe, computed as w, onMounted as ie, nextTick as A, openBlock as o, createElementBlock as i, normalizeClass as b, createElementVNode as d, normalizeStyle as V, Fragment as z, renderList as K, unref as E, withModifiers as L, createCommentVNode as _, renderSlot as N, createVNode as H, toDisplayString as U } from "vue";
+import F from "./checkbox.es.js";
+import ce from "./loader.es.js";
+import { g as ae } from "./getInstance-GhoEcxLF.js";
+import { _ as de } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+import './style/tableRenderer.css';const P = 150, ue = 50;
+function X(l, u) {
+  if (!l) return u;
+  const n = Number.parseFloat(l);
+  return Number.isNaN(n) ? u : n;
+}
+function ye(l) {
+  const u = se({}), n = j(null), g = () => {
+    const y = new Set(l.value.map((c) => c.key));
+    for (const c of Object.keys(u))
+      y.has(c) || delete u[c];
+    for (const c of l.value)
+      u[c.key] === void 0 && (u[c.key] = X(c.width, P));
+  };
+  g(), M(l, g, { deep: !0 });
+  let p = 0, v = 0, h = null;
+  function S() {
+    document.removeEventListener("pointermove", x), document.removeEventListener("pointerup", C), document.removeEventListener("pointercancel", C), document.body.style.cursor = "", document.body.style.userSelect = "";
+  }
+  function x(y) {
+    const c = n.value;
+    if (!c) return;
+    const f = l.value.find((R) => R.key === c), m = X(f?.minWidth, ue), $ = y.clientX - p;
+    u[c] = Math.max(m, v + $);
+  }
+  function C(y) {
+    n.value && (h?.(n.value), n.value = null, S());
+  }
+  function k(y) {
+    const c = new Set(l.value.map((f) => f.key));
+    for (const [f, m] of Object.entries(y))
+      c.has(f) && (!Number.isFinite(m) || m <= 0 || (u[f] = m));
+  }
+  function D(y, c, f, m) {
+    const $ = l.value.find((T) => T.key === y);
+    if (!$ || $.resizable !== !0) return;
+    n.value = y, p = c.clientX, v = m || u[y] || P, h = f, c.currentTarget?.setPointerCapture?.(c.pointerId), document.addEventListener("pointermove", x), document.addEventListener("pointerup", C), document.addEventListener("pointercancel", C), document.body.style.cursor = "col-resize", document.body.style.userSelect = "none";
+  }
+  function B() {
+    n.value && (n.value = null, S());
+  }
+  return le() && re(() => {
+    S();
+  }), { columnWidths: u, resizingKey: n, startResize: D, stopResize: B, applyMeasuredWidths: k };
+}
+const be = { key: 0 }, fe = ["aria-sort", "onClick"], me = ["onPointerdown"], ke = {
   key: 0,
   class: "header-content header-content--center"
-}, P = ["for"], Q = {
+}, _e = ["for"], pe = {
   key: 0,
   class: "rds-e-table-renderer__sortable-icon rds-flex rds-flex-center-center rds-flex-col"
-}, W = {
+}, ve = {
   key: 0,
   class: "loading-row"
-}, X = ["colspan"], Y = { class: "loading-overlay" }, Z = ["onClick"], I = ["data-label"], ee = ["for"], te = {
+}, ge = ["colspan"], he = { class: "loading-overlay" }, Ce = ["onClick"], $e = ["data-label"], Re = ["for"], we = {
   key: 0,
   class: "rds-e-table-renderer__group--dropdown"
-}, le = ["colspan"], se = {
+}, ze = ["colspan"], Se = {
   key: 1,
   class: "rds-e-table-renderer__group--spacer"
-}, re = ["colspan"], ne = { key: 2 }, oe = ["colspan"], de = { class: "rds-e-table-renderer__empty-state" }, ae = { class: "rds-title-02" }, ce = /* @__PURE__ */ q({
+}, xe = ["colspan"], Ee = { key: 2 }, De = ["colspan"], We = { class: "rds-e-table-renderer__empty-state" }, Ke = { class: "rds-title-02" }, Le = /* @__PURE__ */ oe({
   __name: "table-renderer",
   props: {
     headers: {},
@@ -33,197 +78,255 @@ import './style/tableRenderer.css';const G = { key: 0 }, J = ["aria-sort", "onCl
     emptyStateText: { default: "No hay elementos a mostrar." },
     selectedKeys: { default: () => [] },
     expandedKeys: { default: () => [] },
+    resizableColumns: { type: Boolean },
     rowClass: {},
     cellClass: {},
     isRowDisabled: {}
   },
-  emits: ["headerClick", "toggleSelectAll", "toggleRowSelection", "rowClick"],
-  setup(n, { emit: R }) {
-    const a = n, $ = R, y = M(), w = h(() => [
-      `rds-e-table-renderer--${a.variant}`,
-      { "rds-e-table-renderer--condensed": a.condensed }
-    ]), x = h(() => [
-      `rds-e-table-renderer__body--${a.variant}`,
-      { "rds-e-table-renderer__body--condensed": a.condensed }
-    ]), K = (t, l) => {
-      const e = t[a.rowKey];
-      return e !== void 0 ? e : l;
-    }, D = (t) => {
-      const l = t[a.rowKey];
-      return a.selectedKeys.includes(l);
-    }, m = (t) => {
-      const l = t[a.rowKey];
-      return a.expandedKeys.includes(l);
-    }, V = (t) => a.isRowDisabled ? a.isRowDisabled(t) : !1, B = (t) => ({
-      [`rds-e-table-renderer__cell--${t.align || "left"}`]: !0,
-      "rds-e-table-renderer__cell--sortable": t.sortable,
-      "rds-e-table-renderer__cell--shadow": t.sticky,
-      "rds-e-table-renderer__cell--no-sticky": !t.sticky,
-      "rds-e-table-renderer__cell--right": t.align === "right",
-      "rds-e-table-renderer__cell--center": t.align === "center"
-    }), A = (t) => {
-      if (t.sortable)
-        return t.sort === "asc" ? "ascending" : t.sort === "desc" ? "descending" : "none";
-    }, E = (t, l) => {
-      const e = a.rowClass ? a.rowClass(t, l) : "";
+  emits: ["headerClick", "toggleSelectAll", "toggleRowSelection", "rowClick", "columnResize"],
+  setup(l, { emit: u }) {
+    const n = l, g = u, p = ae(), { columnWidths: v, resizingKey: h, startResize: S, stopResize: x, applyMeasuredWidths: C } = ye(w(() => n.headers)), k = w(() => !!n.resizableColumns), D = j(null), B = w(() => [
+      `rds-e-table-renderer--${n.variant}`,
+      { "rds-e-table-renderer--condensed": n.condensed },
+      { "rds-e-table-renderer--resizable": k.value }
+    ]), y = w(() => [
+      `rds-e-table-renderer__body--${n.variant}`,
+      { "rds-e-table-renderer__body--condensed": n.condensed }
+    ]), c = w(() => n.headers.reduce((e, s) => {
+      const t = v[s.key];
+      return e + (typeof t == "number" ? t : 0);
+    }, 0)), f = w(() => {
+      if (k.value)
+        return {
+          minWidth: "100%",
+          width: `${c.value}px`
+        };
+    }), m = (e, s) => {
+      const t = e[n.rowKey];
+      return t !== void 0 ? t : s;
+    }, $ = (e) => {
+      const s = e[n.rowKey];
+      return n.selectedKeys.includes(s);
+    }, R = (e) => {
+      const s = e[n.rowKey];
+      return n.expandedKeys.includes(s);
+    }, T = (e) => n.isRowDisabled ? n.isRowDisabled(e) : !1, q = (e) => ({
+      [`rds-e-table-renderer__cell--${e.align || "left"}`]: !0,
+      "rds-e-table-renderer__cell--sortable": e.sortable,
+      "rds-e-table-renderer__cell--shadow": e.sticky,
+      "rds-e-table-renderer__cell--no-sticky": !e.sticky,
+      "rds-e-table-renderer__cell--right": e.align === "right",
+      "rds-e-table-renderer__cell--center": e.align === "center",
+      "rds-e-table-renderer__cell--resizing": h.value === e.key
+    }), I = (e) => !k.value || e.type === "selection" || e.type === "actions" ? !1 : e.resizable === !0, W = () => {
+      const e = D.value;
+      if (!e) return;
+      const s = e.querySelectorAll("thead th");
+      if (!s.length) return;
+      const t = {};
+      for (let r = 0; r < n.headers.length; r++) {
+        const a = s[r]?.getBoundingClientRect?.().width || 0;
+        a > 0 && (t[n.headers[r].key] = a);
+      }
+      C(t);
+    }, O = (e, s) => {
+      W();
+      const t = v[e];
+      S(e, s, G, t);
+    };
+    function G(e) {
+      g("columnResize", { key: e, width: v[e] }), x();
+    }
+    const J = (e) => {
+      if (e.sortable)
+        return e.sort === "asc" ? "ascending" : e.sort === "desc" ? "descending" : "none";
+    }, Q = (e, s) => {
+      const t = n.rowClass ? n.rowClass(e, s) : "";
       return [
-        { "rds-e-table-renderer__group--odd": l % 2 === 0 },
-        { "rds-e-table-renderer__group--is-open rds-background-grey": m(t) },
+        { "rds-e-table-renderer__group--odd": s % 2 === 0 },
+        { "rds-e-table-renderer__group--is-open rds-background-grey": R(e) },
         { "rds-e-table-renderer__group--expandible": !0 },
-        e
+        t
       ];
-    }, N = (t, l, e) => {
-      const o = a.cellClass ? a.cellClass(t, l, e) : "";
+    }, Y = (e, s, t) => {
+      const r = n.cellClass ? n.cellClass(e, s, t) : "";
       return [
-        [`rds-e-table-renderer__cell--${l.align || "left"}`],
-        { "rds-e-table-renderer__cell--shadow": l.sticky },
-        o
+        [`rds-e-table-renderer__cell--${s.align || "left"}`],
+        { "rds-e-table-renderer__cell--shadow": s.sticky },
+        r
       ];
-    }, H = (t, l, e) => {
-      if (l.formatter) return l.formatter(t[l.key], t, e);
-      const o = t[l.key];
-      return o ?? "---";
-    }, T = (t) => {
-      t.sortable && $("headerClick", t);
-    }, U = (t) => {
-      $("rowClick", t);
+    }, Z = (e, s, t) => {
+      if (s.formatter) return s.formatter(e[s.key], e, t);
+      const r = e[s.key];
+      return r ?? "---";
+    }, ee = (e) => {
+      e.sortable && g("headerClick", e);
+    }, te = (e) => {
+      g("rowClick", e);
     };
-    return (t, l) => (s(), r("div", {
-      class: i(["rds-e-table-renderer__container", w.value])
+    return ie(() => {
+      A(() => {
+        W();
+      });
+    }), M(() => n.headers, () => {
+      A(() => {
+        k.value && (h.value || W());
+      });
+    }, { deep: !0 }), M(k, (e) => {
+      if (!e) {
+        x();
+        return;
+      }
+      A(() => {
+        h.value || W();
+      });
+    }), (e, s) => (o(), i("div", {
+      class: b(["rds-e-table-renderer__container", B.value])
     }, [
-      d("table", null, [
+      d("table", {
+        ref_key: "tableRef",
+        ref: D,
+        style: V(f.value)
+      }, [
         d("colgroup", null, [
-          (s(!0), r(u, null, _(n.headers, (e, o) => (s(), r("col", {
-            key: `col-${e.key}-${o}`,
-            style: C({ width: e.width || "auto" })
+          (o(!0), i(z, null, K(l.headers, (t, r) => (o(), i("col", {
+            key: `col-${t.key}-${r}`,
+            style: V({ width: k.value ? `${E(v)[t.key]}px` : t.width || "auto" })
           }, null, 4))), 128))
         ]),
-        n.hideHeaders ? b("", !0) : (s(), r("thead", G, [
+        l.hideHeaders ? _("", !0) : (o(), i("thead", be, [
           d("tr", null, [
-            (s(!0), r(u, null, _(n.headers, (e, o) => (s(), r("th", {
-              key: `th-${e.key}-${o}`,
-              class: i(["rds-e-table-renderer__cell rds-e-table-renderer__cell--heading rds-body-01", B(e)]),
-              style: C({ width: e.width }),
-              "aria-sort": A(e),
+            (o(!0), i(z, null, K(l.headers, (t, r) => (o(), i("th", {
+              key: `th-${t.key}-${r}`,
+              class: b(["rds-e-table-renderer__cell rds-e-table-renderer__cell--heading rds-body-01", q(t)]),
+              "aria-sort": J(t),
               scope: "col",
-              onClick: (c) => T(e)
+              onClick: (a) => ee(t)
             }, [
-              k(t.$slots, `header-${e.key}`, { header: e }, () => [
-                e.type === "selection" ? (s(), r(u, { key: 0 }, [
-                  n.hideSelectAll ? b("", !0) : (s(), r("div", O, [
-                    f(S, {
-                      id: `checkbox-all-${g(y)}-${e.key}`,
-                      "is-checked": e.allSelected,
-                      "onUpdate:modelValue": l[0] || (l[0] = (c) => t.$emit("toggleSelectAll", c)),
-                      onClick: l[1] || (l[1] = v(() => {
+              I(t) ? (o(), i("div", {
+                key: 0,
+                class: "rds-e-table-renderer__resize-handle",
+                onClick: s[0] || (s[0] = L(() => {
+                }, ["stop"])),
+                onPointerdown: L((a) => O(t.key, a), ["stop"])
+              }, null, 40, me)) : _("", !0),
+              N(e.$slots, `header-${t.key}`, { header: t }, () => [
+                t.type === "selection" ? (o(), i(z, { key: 0 }, [
+                  l.hideSelectAll ? _("", !0) : (o(), i("div", ke, [
+                    H(F, {
+                      id: `checkbox-all-${E(p)}-${t.key}`,
+                      "is-checked": t.allSelected,
+                      "onUpdate:modelValue": s[1] || (s[1] = (a) => e.$emit("toggleSelectAll", a)),
+                      onClick: s[2] || (s[2] = L(() => {
                       }, ["stop"]))
                     }, null, 8, ["id", "is-checked"]),
                     d("label", {
-                      for: `checkbox-all-${g(y)}-${e.key}`,
+                      for: `checkbox-all-${E(p)}-${t.key}`,
                       class: "rds-checkbox__label rds-checkbox__label--no-text"
-                    }, null, 8, P)
+                    }, null, 8, _e)
                   ]))
-                ], 64)) : (s(), r("div", {
+                ], 64)) : (o(), i("div", {
                   key: 1,
-                  class: i(["header-content", `header-content--${e.align || "left"}`])
+                  class: b(["header-content", `header-content--${t.align || "left"}`])
                 }, [
                   d("span", {
-                    class: i(["rds-title-02", { "text-active": !!e.sort }])
-                  }, p(e.text), 3),
-                  e.sortable ? (s(), r("span", Q, [
+                    class: b(["rds-title-02 header-content__text", { "text-active": !!t.sort }])
+                  }, U(t.text), 3),
+                  t.sortable ? (o(), i("span", pe, [
                     d("span", {
-                      class: i(["rds-e-table-renderer__sortable-icon--up sortable-icon", { active: e.sort === "asc" }])
+                      class: b(["rds-e-table-renderer__sortable-icon--up sortable-icon", { active: t.sort === "asc" }])
                     }, "▲", 2),
                     d("span", {
-                      class: i(["rds-e-table-renderer__sortable-icon--down sortable-icon", { active: e.sort === "desc" }])
+                      class: b(["rds-e-table-renderer__sortable-icon--down sortable-icon", { active: t.sort === "desc" }])
                     }, "▼", 2)
-                  ])) : b("", !0)
+                  ])) : _("", !0)
                 ], 2))
               ], !0)
-            ], 14, J))), 128))
+            ], 10, fe))), 128))
           ])
         ])),
         d("tbody", {
-          class: i(x.value)
+          class: b(y.value)
         }, [
-          n.loading ? (s(), r("tr", W, [
+          l.loading ? (o(), i("tr", ve, [
             d("td", {
-              colspan: n.headers.length,
+              colspan: l.headers.length,
               class: "loading-cell"
             }, [
-              d("div", Y, [
-                f(L, { name: "loading" })
+              d("div", he, [
+                H(ce, { size: 20 })
               ])
-            ], 8, X)
-          ])) : b("", !0),
-          n.rows.length > 0 ? (s(!0), r(u, { key: 1 }, _(n.rows, (e, o) => (s(), r(u, {
-            key: K(e, o)
+            ], 8, ge)
+          ])) : _("", !0),
+          l.rows.length > 0 ? (o(!0), i(z, { key: 1 }, K(l.rows, (t, r) => (o(), i(z, {
+            key: m(t, r)
           }, [
             d("tr", {
-              class: i(["rds-e-table-renderer__group", E(e, o)]),
-              onClick: (c) => U(e)
+              class: b(["rds-e-table-renderer__group", Q(t, r)]),
+              onClick: (a) => te(t)
             }, [
-              (s(!0), r(u, null, _(n.headers, (c, z) => (s(), r("td", {
-                key: `td-${c.key}-${z}`,
-                class: i(["rds-e-table-renderer__cell rds-body-01", N(e, c, o)]),
-                "data-label": c.text
+              (o(!0), i(z, null, K(l.headers, (a, ne) => (o(), i("td", {
+                key: `td-${a.key}-${ne}`,
+                class: b(["rds-e-table-renderer__cell rds-body-01", Y(t, a, r)]),
+                "data-label": a.text
               }, [
-                k(t.$slots, `td-${c.key}`, {
-                  item: e,
-                  value: e[c.key],
-                  index: o
+                N(e.$slots, `td-${a.key}`, {
+                  item: t,
+                  value: t[a.key],
+                  index: r
                 }, () => [
-                  c.type === "selection" ? (s(), r("div", {
+                  a.type === "selection" ? (o(), i("div", {
                     key: 0,
-                    class: i(["cell-content", `cell-content--${c.align || "left"}`])
+                    class: b(["cell-content", `cell-content--${a.align || "left"}`])
                   }, [
-                    f(S, {
-                      id: `chk-${g(y)}-${o}-${c.key}`,
-                      "is-checked": D(e),
-                      disabled: V(e),
-                      "onUpdate:modelValue": () => t.$emit("toggleRowSelection", e),
-                      onClick: l[2] || (l[2] = v(() => {
+                    H(F, {
+                      id: `chk-${E(p)}-${r}-${a.key}`,
+                      "is-checked": $(t),
+                      disabled: T(t),
+                      "onUpdate:modelValue": () => e.$emit("toggleRowSelection", t),
+                      onClick: s[3] || (s[3] = L(() => {
                       }, ["stop"]))
                     }, null, 8, ["id", "is-checked", "disabled", "onUpdate:modelValue"]),
                     d("label", {
-                      for: `chk-${g(y)}-${o}-${c.key}`,
+                      for: `chk-${E(p)}-${r}-${a.key}`,
                       class: "rds-checkbox__label rds-checkbox__label--no-text"
-                    }, null, 8, ee)
-                  ], 2)) : (s(), r(u, { key: 1 }, [
-                    F(p(H(e, c, o)), 1)
-                  ], 64))
+                    }, null, 8, Re)
+                  ], 2)) : (o(), i("div", {
+                    key: 1,
+                    class: b(["cell-text", `cell-text--${a.align || "left"}`])
+                  }, U(Z(t, a, r)), 3))
                 ], !0)
-              ], 10, I))), 128))
-            ], 10, Z),
-            m(e) ? (s(), r("tr", te, [
+              ], 10, $e))), 128))
+            ], 10, Ce),
+            R(t) ? (o(), i("tr", we, [
               d("td", {
-                colspan: n.headers.length,
+                colspan: l.headers.length,
                 class: "rds-e-table-renderer__cell rds-e-table-renderer__group--dropdown rds-background-grey"
               }, [
-                k(t.$slots, "expandible", { item: e }, void 0, !0)
-              ], 8, le)
-            ])) : b("", !0),
-            !n.condensed && m(e) ? (s(), r("tr", se, [
+                N(e.$slots, "expandible", { item: t }, void 0, !0)
+              ], 8, ze)
+            ])) : _("", !0),
+            !l.condensed && R(t) ? (o(), i("tr", Se, [
               d("td", {
-                colspan: n.headers.length
-              }, null, 8, re)
-            ])) : b("", !0)
-          ], 64))), 128)) : !n.loading && n.showEmptyState ? (s(), r("tr", ne, [
+                colspan: l.headers.length
+              }, null, 8, xe)
+            ])) : _("", !0)
+          ], 64))), 128)) : !l.loading && l.showEmptyState ? (o(), i("tr", Ee, [
             d("td", {
-              colspan: n.headers.length
+              colspan: l.headers.length
             }, [
-              k(t.$slots, "empty", {}, () => [
-                d("div", de, [
-                  d("h3", ae, p(n.emptyStateText), 1)
+              N(e.$slots, "empty", {}, () => [
+                d("div", We, [
+                  d("h3", Ke, U(l.emptyStateText), 1)
                 ])
               ], !0)
-            ], 8, oe)
-          ])) : b("", !0)
+            ], 8, De)
+          ])) : _("", !0)
         ], 2)
-      ])
+      ], 4)
     ], 2));
   }
-}), ke = /* @__PURE__ */ j(ce, [["__scopeId", "data-v-baaf72ee"]]);
+}), Ue = /* @__PURE__ */ de(Le, [["__scopeId", "data-v-8065aa47"]]);
 export {
-  ke as default
+  Ue as default
 };