energy-components 2.7.0 → 2.8.0

package/dist/components/table.es.js

@@ -1,18 +1,18 @@
-import { defineComponent as Y, toRefs as Z, ref as h, useSlots as _, computed as f, watch as S, openBlock as u, createElementBlock as g, Fragment as B, createVNode as x, renderList as L, renderSlot as P, toDisplayString as ee, createCommentVNode as T, createBlock as $, unref as K, withCtx as C, createSlots as te, normalizeProps as le, guardReactiveProps as ae, withModifiers as D } from "vue";
-import oe from "./tableRenderer.es.js";
-import ne from "./pagination.es.js";
+import { defineComponent as Z, ref as h, useSlots as _, toRefs as ee, computed as f, watch as S, openBlock as u, createElementBlock as g, Fragment as B, createVNode as x, renderList as L, renderSlot as P, toDisplayString as le, createCommentVNode as T, createBlock as $, unref as K, withCtx as C, createSlots as te, normalizeProps as ae, guardReactiveProps as oe, withModifiers as D } from "vue";
+import ne from "./tableRenderer.es.js";
+import se from "./pagination.es.js";
 import E from "./radioButton.es.js";
-import { _ as se } from "./radio-group.vue_vue_type_script_setup_true_lang-CwgSZYeD.js";
-import ie from "./loader.es.js";
-import { g as re } from "./getInstance-GhoEcxLF.js";
-import { _ as de } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-import './style/table.css';const ue = { class: "rds-e-table__container" }, ce = {
+import { _ as ie } from "./radio-group.vue_vue_type_script_setup_true_lang-CwgSZYeD.js";
+import re from "./loader.es.js";
+import { g as de } from "./getInstance-GhoEcxLF.js";
+import { _ as ue } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+import './style/table.css';const ce = { class: "rds-e-table__container" }, me = {
   key: 0,
   class: "rds-e-table__loading-mobile"
-}, me = {
+}, ve = {
   key: 0,
   class: "rds-e-table__empty"
-}, ve = /* @__PURE__ */ Y({
+}, ye = /* @__PURE__ */ Z({
   __name: "table",
   props: {
     header: { default: () => [] },
@@ -45,22 +45,23 @@ import './style/table.css';const ue = { class: "rds-e-table__container" }, ce =
     cellClass: {},
     isRowDisabled: {},
     resizableColumns: { type: Boolean },
+    reorderableColumns: { type: Boolean },
     resetPageOnSort: { type: Boolean, default: !1 }
   },
-  emits: ["update:page", "update:pageSize", "update:sort", "update:checkedKeys", "optionsChange", "selectionChange", "rowExpand", "columnResize"],
+  emits: ["update:page", "update:pageSize", "update:sort", "update:checkedKeys", "optionsChange", "selectionChange", "rowExpand", "columnResize", "columnReorder"],
   setup(a, { expose: H, emit: O }) {
-    const o = a, i = O, V = re(), { items: A, selectionMode: r, selectionPosition: I } = Z(o), c = h(o.page), v = h(o.pageSize), m = h(o.sort || null), n = h([...o.checkedKeys]), k = h([]), M = _(), j = f(() => o.rowKey), p = (e) => typeof e == "number" ? e : String(e), d = (e) => {
-      const l = o.rowKey, t = e[l];
-      return t === void 0 ? (console.warn(`[RDSTable] Row missing key '${String(o.rowKey)}'`, e), "unknown") : t;
-    }, y = f(() => {
+    const o = a, i = O, c = h(o.page), v = h(o.pageSize), m = h(o.sort || null), n = h([...o.checkedKeys]), b = h([]), V = _(), M = de(), { items: A, selectionMode: r, selectionPosition: I } = ee(o), j = f(() => o.rowKey), y = (e) => typeof e == "number" ? e : String(e), d = (e) => {
+      const t = o.rowKey, l = e[t];
+      return l === void 0 ? (console.warn(`[RDSTable] Row missing key '${String(o.rowKey)}'`, e), "unknown") : l;
+    }, p = f(() => {
       if (o.asynchrone === !0) return A.value;
-      const e = (c.value - 1) * v.value, l = e + v.value;
-      return A.value.slice(e, l);
-    }), F = f(() => y.value), N = f(() => {
-      const e = o.header.map((t) => ({
-        ...t,
-        sort: t.sortable && m.value?.key === t.key ? m.value.order : null
-      })), l = y.value.length > 0 && y.value.every((t) => n.value.includes(p(d(t))));
+      const e = (c.value - 1) * v.value, t = e + v.value;
+      return A.value.slice(e, t);
+    }), F = f(() => p.value), N = f(() => {
+      const e = o.header.map((l) => ({
+        ...l,
+        sort: l.sortable && m.value?.key === l.key ? m.value.order : null
+      })), t = p.value.length > 0 && p.value.every((l) => n.value.includes(y(d(l))));
       if (r.value !== "none" && I.value === "left")
         return [{
           key: "__select_all",
@@ -69,19 +70,19 @@ import './style/table.css';const ue = { class: "rds-e-table__container" }, ce =
           width: "48px",
           align: "center",
           sticky: !1,
-          allSelected: l
+          allSelected: t
         }, ...e];
       if (r.value !== "none" && I.value === "right") {
-        const t = {
+        const l = {
           key: "checkbox",
           text: "",
           type: "selection",
           width: "48px",
           align: "right",
           sticky: !1,
-          allSelected: l
+          allSelected: t
         };
-        return [...e, t];
+        return [...e, l];
       }
       return e;
     }), U = f(() => o.hideSelectAll ? !0 : r.value !== "multiple"), R = () => {
@@ -92,9 +93,9 @@ import './style/table.css';const ue = { class: "rds-e-table__container" }, ce =
       });
     }, G = (e) => {
       if (!e.sortable) return;
-      const l = m.value?.key, t = m.value?.order;
+      const t = m.value?.key, l = m.value?.order;
       let s = "asc";
-      l === e.key && (t === "asc" ? s = "desc" : t === "desc" && (s = null));
+      t === e.key && (l === "asc" ? s = "desc" : l === "desc" && (s = null));
       const w = s ? { key: e.key, order: s } : null;
       o.resetPageOnSort && (c.value = 1, i("update:page", 1)), m.value = w, i("update:sort", w), R();
     }, q = (e) => {
@@ -103,34 +104,36 @@ import './style/table.css';const ue = { class: "rds-e-table__container" }, ce =
       i("update:checkedKeys", [...n.value]), i("selectionChange", [...n.value]);
     }, J = (e) => {
       if (r.value === "none") return;
-      const l = p(d(e));
+      const t = y(d(e));
       if (r.value === "single")
-        n.value = [l];
+        n.value = [t];
       else {
-        const t = n.value.indexOf(l);
-        t === -1 ? n.value.push(l) : n.value.splice(t, 1);
+        const l = n.value.indexOf(t);
+        l === -1 ? n.value.push(t) : n.value.splice(l, 1);
       }
       z();
     }, Q = (e) => {
       if (r.value !== "multiple") return;
-      const l = y.value.map((t) => p(d(t)));
+      const t = p.value.map((l) => y(d(l)));
       if (e) {
-        const t = l.filter((s) => !n.value.includes(s));
-        n.value.push(...t);
+        const l = t.filter((s) => !n.value.includes(s));
+        n.value.push(...l);
       } else
-        n.value = n.value.filter((t) => !l.includes(t));
+        n.value = n.value.filter((l) => !t.includes(l));
       z();
-    }, b = f({
+    }, k = f({
       get: () => n.value[0] || null,
       set: (e) => {
         e !== null && r.value === "single" && (n.value = [e], z());
       }
     }), W = (e) => {
-      if (!e.expandible || !M.expandible) return;
-      const l = p(d(e)), t = k.value.indexOf(l);
-      t === -1 ? k.value.push(l) : k.value.splice(t, 1), i("rowExpand", e);
+      if (!e.expandible || !V.expandible) return;
+      const t = y(d(e)), l = b.value.indexOf(t);
+      l === -1 ? b.value.push(t) : b.value.splice(l, 1), i("rowExpand", e);
     }, X = (e) => {
       i("columnResize", e);
+    }, Y = (e) => {
+      i("columnReorder", e);
     };
     return S(() => o.page, (e) => {
       e && (c.value = e);
@@ -142,30 +145,30 @@ import './style/table.css';const ue = { class: "rds-e-table__container" }, ce =
       n.value = [...e || []];
     }), H({ reset: () => {
       c.value = 1, n.value = [], m.value = null, R();
-    } }), (e, l) => (u(), g("div", ue, [
+    } }), (e, t) => (u(), g("div", ce, [
       a.isMobileDevice && e.$slots.mobile ? (u(), g(B, { key: 0 }, [
-        a.loading ? (u(), g("div", ce, [
-          x(ie, { size: 20 })
+        a.loading ? (u(), g("div", me, [
+          x(re, { size: 20 })
         ])) : (u(), g(B, { key: 1 }, [
-          (u(!0), g(B, null, L(y.value, (t, s) => (u(), g("div", {
-            key: `${p(d(t))}-m-${s}`,
+          (u(!0), g(B, null, L(p.value, (l, s) => (u(), g("div", {
+            key: `${y(d(l))}-m-${s}`,
             class: "rds-e-table__mobile-item"
           }, [
             P(e.$slots, "mobile", {
-              item: t,
+              item: l,
               index: s
             }, void 0, !0)
           ]))), 128)),
-          y.value.length === 0 && a.showEmptyState ? (u(), g("div", me, ee(a.emptyStateText), 1)) : T("", !0)
+          p.value.length === 0 && a.showEmptyState ? (u(), g("div", ve, le(a.emptyStateText), 1)) : T("", !0)
         ], 64))
-      ], 64)) : (u(), $(se, {
+      ], 64)) : (u(), $(ie, {
         key: 1,
-        modelValue: b.value,
-        "onUpdate:modelValue": l[2] || (l[2] = (t) => b.value = t),
-        "group-name": `table-radio-${K(V)}`
+        modelValue: k.value,
+        "onUpdate:modelValue": t[2] || (t[2] = (l) => k.value = l),
+        "group-name": `table-radio-${K(M)}`
       }, {
         default: C(() => [
-          x(oe, {
+          x(ne, {
             headers: N.value,
             rows: F.value,
             "row-key": j.value,
@@ -179,31 +182,33 @@ import './style/table.css';const ue = { class: "rds-e-table__container" }, ce =
             "select-all-aria-label": a.selectAllAriaLabel,
             "row-aria-label": a.rowAriaLabel,
             "selected-keys": n.value,
-            "expanded-keys": k.value,
+            "expanded-keys": b.value,
             "row-class": a.rowClass,
             "cell-class": a.cellClass,
             "is-row-disabled": a.isRowDisabled,
             "resizable-columns": a.resizableColumns,
+            "reorderable-columns": a.reorderableColumns,
             onColumnResize: X,
+            onColumnReorder: Y,
             onHeaderClick: G,
             onToggleSelectAll: Q,
             onToggleRowSelection: J,
             onRowClick: W
           }, te({ _: 2 }, [
-            L(e.$slots, (t, s) => ({
+            L(e.$slots, (l, s) => ({
               name: s,
               fn: C((w) => [
-                P(e.$slots, s, le(ae(w)), void 0, !0)
+                P(e.$slots, s, ae(oe(w)), void 0, !0)
               ])
             })),
             K(r) === "single" ? {
               name: "td-__select_all",
-              fn: C(({ item: t }) => [
+              fn: C(({ item: l }) => [
                 x(E, {
-                  id: `radio-left-${d(t)}`,
-                  option: p(d(t)),
-                  "model-value": b.value,
-                  onClick: l[0] || (l[0] = D(() => {
+                  id: `radio-left-${d(l)}`,
+                  option: y(d(l)),
+                  "model-value": k.value,
+                  onClick: t[0] || (t[0] = D(() => {
                   }, ["stop"]))
                 }, null, 8, ["id", "option", "model-value"])
               ]),
@@ -211,22 +216,22 @@ import './style/table.css';const ue = { class: "rds-e-table__container" }, ce =
             } : void 0,
             K(r) === "single" ? {
               name: "td-checkbox",
-              fn: C(({ item: t }) => [
+              fn: C(({ item: l }) => [
                 x(E, {
-                  id: `radio-right-${d(t)}`,
-                  option: p(d(t)),
-                  "model-value": b.value,
-                  onClick: l[1] || (l[1] = D(() => {
+                  id: `radio-right-${d(l)}`,
+                  option: y(d(l)),
+                  "model-value": k.value,
+                  onClick: t[1] || (t[1] = D(() => {
                   }, ["stop"]))
                 }, null, 8, ["id", "option", "model-value"])
               ]),
               key: "1"
             } : void 0
-          ]), 1032, ["headers", "rows", "row-key", "loading", "hide-headers", "hide-select-all", "variant", "condensed", "show-empty-state", "empty-state-text", "select-all-aria-label", "row-aria-label", "selected-keys", "expanded-keys", "row-class", "cell-class", "is-row-disabled", "resizable-columns"])
+          ]), 1032, ["headers", "rows", "row-key", "loading", "hide-headers", "hide-select-all", "variant", "condensed", "show-empty-state", "empty-state-text", "select-all-aria-label", "row-aria-label", "selected-keys", "expanded-keys", "row-class", "cell-class", "is-row-disabled", "resizable-columns", "reorderable-columns"])
         ]),
         _: 3
       }, 8, ["modelValue", "group-name"])),
-      a.hidePagination ? T("", !0) : (u(), $(ne, {
+      a.hidePagination ? T("", !0) : (u(), $(se, {
         key: 2,
         class: "rds-e-table__pagination",
         "total-items": a.totalItemsLength,
@@ -241,7 +246,7 @@ import './style/table.css';const ue = { class: "rds-e-table__container" }, ce =
       }, null, 8, ["total-items", "current-page", "items-per-page", "hide-leyend", "jump-to", "disable-first-load", "legend-text"]))
     ]));
   }
-}), xe = /* @__PURE__ */ de(ve, [["__scopeId", "data-v-31f62fdc"]]);
+}), Ce = /* @__PURE__ */ ue(ye, [["__scopeId", "data-v-5dbe1d27"]]);
 export {
-  xe as default
+  Ce as default
 };