energy-components 2.5.1 → 2.7.0

package/dist/components/tableRenderer.es.js

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