energy-components 1.5.0 → 1.6.0-beta.0

package/dist/components/tableslotedcomponent.es.js

@@ -0,0 +1,293 @@
+import { defineComponent as ee, toRefs as le, getCurrentInstance as te, ref as _, computed as C, watchEffect as se, watch as ae, onMounted as oe, openBlock as o, createElementBlock as n, normalizeClass as b, createElementVNode as i, Fragment as p, renderList as x, renderSlot as h, normalizeStyle as ne, toDisplayString as O, createBlock as ce, mergeProps as ie, createCommentVNode as d, unref as $, createVNode as E, Transition as N, withCtx as V, nextTick as re } from "vue";
+import { I as L } from "./icon-svg-CeKfjk3j.js";
+import { _ as ue } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+import './style/tableslotedcomponent.css';const de = { key: 0 }, _e = ["data-header", "onClick"], be = ["id", "checked", "onClick"], ke = ["for"], fe = {
+  key: 0,
+  class: "table__cell table__cell--heading body-1 table__cell--right"
+}, pe = ["checked"], ye = {
+  key: 0,
+  class: "loading-overlay"
+}, ve = ["onClick"], ge = ["column-key", "data-cell"], he = ["title"], $e = {
+  key: 0,
+  class: "table__cell table__cell--shadow table__cell--right"
+}, me = ["id", "checked", "disabled", "onClick"], Ce = ["for"], Se = ["colspan"], xe = ["colspan"], Ee = /* @__PURE__ */ ee({
+  __name: "TableSlotedComponent",
+  props: {
+    loading: { type: Boolean, default: !1 },
+    item: {},
+    hideHeaders: { type: Boolean, default: !1 },
+    statusTranslate: {},
+    applyShadow: { type: Boolean, default: !1 },
+    selectableKey: {},
+    hideSelectAll: { type: Boolean },
+    checkedAll: { type: Boolean, default: !1 },
+    listChecked: { default: [] },
+    noFixedColumn: { type: Boolean, default: !1 },
+    isMobileDevice: { type: Boolean, default: !1 },
+    variant: { default: "default" },
+    condensed: { type: Boolean },
+    itemsExpanded: {},
+    showEmptyState: { type: Boolean, default: !1 },
+    mockItems: {}
+  },
+  emits: ["selectAll", "onClickCheckbox", "onItemExpansion", "onHeaderSort"],
+  setup(j, { expose: z, emit: F }) {
+    const c = j, y = F, { item: k, listChecked: P, selectableKey: r } = le(c), S = te(), q = _(), v = _([]), m = _([]), K = _([]), U = _({}), f = _(!1), Y = _(!0), G = C(() => {
+      const e = "table";
+      let t = e;
+      return t = `${t} ${e}--${c.variant}`, c.condensed && (t = `${t} ${e}--condensed`), t;
+    }), J = C(() => {
+      const e = "table__body";
+      let t = e;
+      return t = `${t} ${e}--${c.variant}`, c.condensed && (t = `${t} ${e}--condensed`), t;
+    }), Q = C(() => c.mockItems ? Array.from({ length: c.mockItems }, () => ({
+      expandible: !1,
+      visible: !1
+    })) : []), g = C(() => c.loading && v.value.length === 0 ? Q.value : v.value), W = (e) => {
+      if (r != null && r.value) {
+        const t = e[r.value];
+        return P.value.includes(t);
+      }
+      return !1;
+    }, X = (e) => {
+      r != null && r.value && y("onClickCheckbox", String(e[r.value]));
+    }, B = async (e, t = !1) => {
+      var l;
+      e.expandible && (c.isMobileDevice || (e.visible = !e.visible), y("onItemExpansion", {
+        ...e,
+        isMobileDevice: c.isMobileDevice
+      }), t && (await re(), (l = document.querySelector(".table__group--is-open")) == null || l.scrollIntoView({ behavior: "smooth" })));
+    }, Z = (e) => {
+      f.value = e.target.checked, y("selectAll", f.value);
+    }, A = (e) => e.align ? `table__cell--${e.align}` : "table__cell--left", R = (e, t) => t === "actions" ? !1 : e.status === "BLOCKED" || e.status === "BUSINESS_BLOCK" || e.status === "PT_BLOCKED" ? !0 : !!e.$disabled, D = (e, t, l) => {
+      var a, s;
+      if (!t) return "---";
+      if (e === "date") {
+        const u = (s = (a = k.value.items[l]) == null ? void 0 : a.rawElem) == null ? void 0 : s.operationHour;
+        if (u) return `${t} ${u}`;
+      }
+      return t;
+    }, w = (e, t) => {
+      if (!t.sortable) return;
+      const l = ["", "asc", "desc"], s = (l.indexOf(t.sort || "") + 1) % l.length;
+      if (m.value.forEach((u) => {
+        u.sortable && u.key !== t.key && (u.sort = "");
+      }), t.sort = l[s], t.sort === "")
+        return y("onHeaderSort", {});
+      y("onHeaderSort", {
+        sortBy: t.key,
+        order: t.sort
+      });
+    }, I = (e) => {
+      const t = {
+        name: "filter",
+        class: "",
+        style: {
+          transform: "translateY(6px)"
+        }
+      };
+      return e.sort === "asc" && (t.class = "sortable_icon--active", t.style.transform = `${t.style.transform} scale(-1)`), e.sort === "desc" && (t.class = "sortable_icon--active"), t;
+    }, H = (e = !1) => {
+      v.value = [...k.value.items].map((t, l) => {
+        var a;
+        return {
+          ...t,
+          visible: e ? !!((a = v.value[l]) != null && a.visible) : !1
+        };
+      });
+    }, T = (e = !1) => {
+      Y.value = !e, m.value = [
+        ...k.value.header.map((t) => ("sort" in t || Object.assign(t, { sort: "" }), t))
+      ], H(e), f.value = c.checkedAll;
+    };
+    T();
+    const M = (e) => Object.keys(e);
+    return se(() => {
+      var e;
+      T(!0), (e = c.itemsExpanded) != null && e.length && c.itemsExpanded.forEach((t) => {
+        k.value.items[t] && B(k.value.items[t], !0);
+      });
+    }), ae(() => c.isMobileDevice, () => {
+      v.value = [...k.value.items].map((e) => ({
+        ...e,
+        visible: !1
+      }));
+    }), z({
+      clearVisibleDetails: H
+    }), oe(() => {
+      var e;
+      q.value = (e = S == null ? void 0 : S.vnode) == null ? void 0 : e.scopeId;
+    }), (e, t) => (o(), n("div", {
+      class: b(["table__container", G.value])
+    }, [
+      i("table", null, [
+        e.hideHeaders ? d("", !0) : (o(), n("thead", de, [
+          i("tr", null, [
+            (o(!0), n(p, null, x(m.value, (l, a) => (o(), n("th", {
+              key: `header-${a}`,
+              "data-header": `data-header-${l.key}`,
+              class: b(["table__cell table__cell--heading body-1", [
+                A(l),
+                {
+                  "table__cell--shadow": l.sticky,
+                  "table__cell--no-sticky": !l.sticky,
+                  "table__cell--sortable": l.sortable
+                }
+              ]]),
+              onClick: (s) => w(s, l)
+            }, [
+              h(e.$slots, `header-${l.key}`, { item: l }, () => [
+                l.type === "selectAll" ? (o(), n(p, { key: 0 }, [
+                  i("input", {
+                    id: `checkbox_${l.key}`,
+                    class: "rds-checkbox",
+                    type: "checkbox",
+                    checked: l.allSelected,
+                    onClick: l.callback
+                  }, null, 8, be),
+                  i("label", {
+                    for: `checkbox_${l.key}`,
+                    class: "rds-checkbox__label"
+                  }, null, 8, ke)
+                ], 64)) : (o(), n(p, { key: 1 }, [
+                  i("span", {
+                    style: ne({
+                      color: (l == null ? void 0 : l.sort) !== "" ? "#00ADC3" : ""
+                    }),
+                    class: "rds-title-02"
+                  }, O(l.text || ""), 5),
+                  l.sortable ? (o(), ce(L, ie({
+                    key: 0,
+                    class: "table__header__icon sortable_icon",
+                    ref_for: !0
+                  }, I(l)), null, 16)) : d("", !0)
+                ], 64))
+              ], !0)
+            ], 10, _e))), 128)),
+            $(r) && !e.hideSelectAll ? (o(), n("th", fe, [
+              i("input", {
+                id: "All",
+                class: "rds-checkbox table__checkbox",
+                type: "checkbox",
+                checked: f.value,
+                onClick: Z
+              }, null, 8, pe),
+              t[0] || (t[0] = i("label", {
+                for: "All",
+                class: "rds-checkbox__label rds-checkbox__label--no-text"
+              }, null, -1))
+            ])) : d("", !0)
+          ])
+        ])),
+        i("tbody", {
+          class: b(J.value)
+        }, [
+          E(N, { name: "fade" }, {
+            default: V(() => [
+              e.loading ? (o(), n("div", ye, [
+                E(L, { name: "loading" })
+              ])) : d("", !0)
+            ]),
+            _: 1
+          }),
+          g.value.length !== 0 ? (o(!0), n(p, { key: 0 }, x(g.value, (l, a) => (o(), n(p, {
+            key: `row-${a}}`
+          }, [
+            i("tr", {
+              ref_for: !0,
+              ref: (s) => {
+                K.value[a] = s;
+              },
+              class: b(["table__group", [
+                { "table__group--odd": a % 2 === 0 },
+                { "table__group--is-open rds-background-grey": l.visible },
+                { "table__group--expandible": l.expandible },
+                l.$class || ""
+              ]]),
+              onClick: () => B(l)
+            }, [
+              (o(!0), n(p, null, x(m.value, (s, u) => (o(), n("td", {
+                key: `column-${u}`,
+                "column-key": u,
+                "data-cell": `data-cell-${s.key}`,
+                class: b(["table__cell rds-body-01", [
+                  A(s),
+                  {
+                    "table__cell--shadow": s.sticky,
+                    "table__cell--no-sticky": !s.sticky,
+                    "table__cell--disabled": R(l, s.key)
+                  },
+                  l[`$${s.key}_class`] || ""
+                ]])
+              }, [
+                h(e.$slots, `td-${s.key}`, {
+                  value: l[s.key],
+                  item: l
+                }, () => [
+                  i("span", {
+                    title: D(s.key, String(l[s.key] || ""), a)
+                  }, O(D(s.key, String(l[s.key] || ""), a)), 9, he)
+                ], !0)
+              ], 10, ge))), 128)),
+              $(r) ? (o(), n("td", $e, [
+                h(e.$slots, "td-checkbox", { item: l }, () => [
+                  i("input", {
+                    id: `add-${a}-${l[$(r)]}`,
+                    ref_for: !0,
+                    ref: () => {
+                      U.value[String(l[$(r)] || "")] = !0;
+                    },
+                    name: "checkbox-item",
+                    class: "rds-checkbox",
+                    checked: W(l) || f.value,
+                    disabled: f.value,
+                    type: "checkbox",
+                    onClick: (s) => X(l)
+                  }, null, 8, me),
+                  i("label", {
+                    for: `add-${a}-${l[$(r)]}`,
+                    class: "rds-checkbox__label rds-checkbox__label--no-text"
+                  }, null, 8, Ce)
+                ], !0)
+              ])) : d("", !0)
+            ], 10, ve),
+            g.value[a].visible ? (o(), n("tr", {
+              key: 0,
+              class: b(["table__group table__group--dropdown", [
+                {
+                  "table__group--odd": a % 2 === 0
+                }
+              ]])
+            }, [
+              i("td", {
+                class: b(["table__cell table__group--dropdown rds-background-grey", {
+                  "table__group--dropdown-disabled": l.status !== "ACTIVE",
+                  "table__cell--table": !l.expandible
+                }]),
+                colspan: M(l).length
+              }, [
+                h(e.$slots, "expandible", { item: l }, void 0, !0)
+              ], 10, Se)
+            ], 2)) : d("", !0),
+            g.value[a].visible ? (o(), n("tr", {
+              key: 1,
+              class: "table__group--spacer",
+              colspan: M(l).length
+            }, null, 8, xe)) : d("", !0)
+          ], 64))), 128)) : d("", !0)
+        ], 2)
+      ]),
+      E(N, { name: "fade" }, {
+        default: V(() => [
+          e.showEmptyState && !e.loading && g.value.length === 0 ? h(e.$slots, "empty", { key: 0 }, () => [
+            t[1] || (t[1] = i("p", { class: "rds-headline-03" }, " No hay datos para mostrar ", -1))
+          ], !0) : d("", !0)
+        ]),
+        _: 3
+      })
+    ], 2));
+  }
+}), He = /* @__PURE__ */ ue(Ee, [["__scopeId", "data-v-2f3d4308"]]);
+export {
+  He as default
+};

package/dist/components/tag.es.js

@@ -1,5 +1,5 @@
-import { defineComponent as h, toRefs as x, computed as u, openBlock as o, createElementBlock as $, normalizeClass as r, unref as t, createBlock as p, createCommentVNode as d, createTextVNode as S, toDisplayString as B } from "vue";
-import { R as f } from "./icon-svg-u9BWBbvW.js";
+import { defineComponent as h, toRefs as x, computed as u, openBlock as o, createElementBlock as $, normalizeClass as r, unref as t, createBlock as p, createCommentVNode as d, createTextVNode as B, toDisplayString as S } from "vue";
+import { I as f } from "./icon-svg-CeKfjk3j.js";
 import { _ as k } from "./_plugin-vue_export-helper-CHgC5LLL.js";
 import './style/tag.css';const C = /* @__PURE__ */ h({
   __name: "tag",
@@ -76,7 +76,7 @@ import './style/tag.css';const C = /* @__PURE__ */ h({
         class: r(["rds-e-tag__icon", i.value]),
         "aria-hidden": "true"
       }, null, 8, ["name", "class"])) : d("", !0),
-      S(" " + B(t(_)) + " ", 1),
+      B(" " + S(t(_)) + " ", 1),
       t(c) ? (o(), p(f, {
         key: 1,
         name: "arrow_right",
@@ -85,7 +85,7 @@ import './style/tag.css';const C = /* @__PURE__ */ h({
       }, null, 8, ["class"])) : d("", !0)
     ], 2));
   }
-}), D = /* @__PURE__ */ k(C, [["__scopeId", "data-v-e784d437"]]);
+}), j = /* @__PURE__ */ k(C, [["__scopeId", "data-v-e784d437"]]);
 export {
-  D as default
+  j as default
 };

package/dist/components/textArea.es.js

@@ -1,5 +1,5 @@
-import { defineComponent as G, mergeModels as J, useModel as K, toRefs as L, ref as O, computed as o, openBlock as s, createElementBlock as f, normalizeClass as h, createElementVNode as a, withDirectives as Q, unref as e, vModelText as W, renderSlot as y, createBlock as I, mergeProps as q, toHandlers as T, createCommentVNode as i, createTextVNode as X, toDisplayString as u } from "vue";
-import { R as $ } from "./icon-svg-u9BWBbvW.js";
+import { defineComponent as G, mergeModels as J, useModel as K, toRefs as L, ref as O, computed as o, openBlock as s, createElementBlock as f, normalizeClass as h, createElementVNode as a, withDirectives as Q, unref as e, vModelText as W, renderSlot as y, createBlock as M, mergeProps as q, toHandlers as T, createCommentVNode as i, createTextVNode as X, toDisplayString as u } from "vue";
+import { I as $ } from "./icon-svg-CeKfjk3j.js";
 import { _ as Y } from "./_plugin-vue_export-helper-CHgC5LLL.js";
 import './style/textArea.css';function b(t, _ = !0, d = !0) {
   return _ && !t.trim() ? (console.warn("Advertencia: El valor no puede estar vacío"), !1) : d && !/^[\w\-:]+$/.test(t) ? (console.warn("Advertencia: El valor contiene caracteres inválidos"), !1) : !0;
@@ -138,23 +138,23 @@ const Z = { class: "rds-e-textarea__container" }, ee = { class: "rds-e-textarea_
   setup(t) {
     const _ = t, d = K(t, "modelValue"), {
       label: w,
-      id: S,
+      id: k,
       disabled: p,
       maxlength: m,
       minlength: g,
       modelValue: c,
       icon: A,
-      rightIcon: k,
-      helper: D,
+      rightIcon: S,
+      helper: z,
       error: x,
-      helperText: R,
+      helperText: D,
       clearable: V,
-      lengthError: z
-    } = L(_), v = O(!1), F = () => {
+      lengthError: F
+    } = L(_), v = O(!1), P = () => {
       v.value = !1;
-    }, P = () => {
+    }, j = () => {
       v.value = !0;
-    }, B = o(() => c.value.length === m.value), E = o(() => c.value.length === 0 ? !1 : c.value.length < g.value), N = o(() => z.value && (B.value || E.value)), j = o(() => {
+    }, B = o(() => c.value.length === m.value), E = o(() => c.value.length === 0 ? !1 : c.value.length < g.value), N = o(() => F.value && (B.value || E.value)), H = o(() => {
       const r = [];
       return c.value && r.push("rds-e-textarea--filled"), x.value && r.push("rds-e-textarea--error"), p.value && r.push("rds-e-textarea--disabled"), N.value && r.push("rds-e-textarea--error"), r.join(" ");
     }), l = o(() => {
@@ -167,7 +167,7 @@ const Z = { class: "rds-e-textarea__container" }, ee = { class: "rds-e-textarea_
         }
       }, n = {
         left: { ...r },
-        right: { ...r, name: k.value }
+        right: { ...r, name: S.value }
       };
       return V.value && (n.right = {
         ...r,
@@ -177,16 +177,16 @@ const Z = { class: "rds-e-textarea__container" }, ee = { class: "rds-e-textarea_
           click: () => d.value = ""
         }
       }), n;
-    }), H = o(() => c.value.length);
+    }), R = o(() => c.value.length);
     return (r, n) => {
-      var C, M;
+      var C, I;
       return s(), f("div", {
-        class: h(["rds-e-textarea", j.value])
+        class: h(["rds-e-textarea", H.value])
       }, [
         a("div", Z, [
           a("div", ee, [
             Q(a("textarea", {
-              id: (C = e(S)) == null ? void 0 : C.toString(),
+              id: (C = e(k)) == null ? void 0 : C.toString(),
               "onUpdate:modelValue": n[0] || (n[0] = (U) => d.value = U),
               type: "text",
               class: h(["rds-e-textarea__input", { "rds-e-textarea__input--active": v.value }]),
@@ -195,8 +195,8 @@ const Z = { class: "rds-e-textarea__container" }, ee = { class: "rds-e-textarea_
               minlength: e(g),
               rows: t.rows,
               disabled: e(p),
-              onBlur: F,
-              onFocus: P
+              onBlur: P,
+              onFocus: j
             }, null, 42, te), [
               [W, d.value]
             ]),
@@ -216,14 +216,14 @@ const Z = { class: "rds-e-textarea__container" }, ee = { class: "rds-e-textarea_
               ])
             ], -1)),
             a("label", {
-              for: (M = e(S)) == null ? void 0 : M.toString(),
+              for: (I = e(k)) == null ? void 0 : I.toString(),
               class: h(["rds-e-textarea__label", {
                 "rds-e-textarea__label--with-icon": l.value.left.name,
                 "rds-e-textarea__label--active": v.value
               }])
             }, [
               y(r.$slots, "left-icon", {}, () => [
-                l.value.left.name ? (s(), I($, q({
+                l.value.left.name ? (s(), M($, q({
                   key: 0,
                   class: ["rds-e-textarea__icon rds-e-textarea__icon--left", { "rds-e-textarea__icon--hidden": v.value }],
                   "aria-hidden": "true"
@@ -237,9 +237,9 @@ const Z = { class: "rds-e-textarea__container" }, ee = { class: "rds-e-textarea_
                 "rds-e-textarea__counter--clearable": e(V)
               }])
             }, [
-              t.counter && !e(k) ? (s(), f("p", ae, u(H.value) + "/" + u(e(m)), 1)) : i("", !0),
+              t.counter && !e(S) ? (s(), f("p", ae, u(R.value) + "/" + u(e(m)), 1)) : i("", !0),
               y(r.$slots, "right-icon", {}, () => [
-                l.value.right.name && !l.value.left.name ? (s(), I($, q({
+                l.value.right.name && !l.value.left.name ? (s(), M($, q({
                   key: 0,
                   class: "rds-e-textarea__icon rds-e-textarea__icon--right",
                   "aria-hidden": "true"
@@ -255,7 +255,7 @@ const Z = { class: "rds-e-textarea__container" }, ee = { class: "rds-e-textarea_
           E.value ? (s(), f("li", ne, " Min text length is " + u(e(g)), 1)) : i("", !0),
           a("li", null, [
             y(r.$slots, "helper-text", {}, () => [
-              e(D) || e(x) ? (s(), f("span", se, u(e(R)), 1)) : i("", !0)
+              e(z) || e(x) ? (s(), f("span", se, u(e(D)), 1)) : i("", !0)
             ], !0)
           ])
         ], 2)