energy-components 1.6.0 → 1.8.0

package/dist/components/switch.es.js

@@ -1,12 +1,12 @@
-import { defineComponent as y, mergeModels as c, useModel as g, ref as r, onMounted as S, onBeforeUnmount as B, openBlock as d, createElementBlock as u, normalizeClass as V, createElementVNode as m, renderSlot as p, createTextVNode as x, toDisplayString as E, createBlock as _, createCommentVNode as f } from "vue";
-import { R as C } from "./icon-svg-DGp2yHJn.js";
-import { _ as M } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-import './style/switch.css';const N = ["id", "disabled", "checked"], D = ["for", "aria-label"], L = {
+import { defineComponent as p, ref as r, computed as y, onMounted as g, onBeforeUnmount as S, createElementBlock as u, openBlock as d, normalizeClass as V, createElementVNode as m, createCommentVNode as h, renderSlot as B, createBlock as _, createTextVNode as C, toDisplayString as x } from "vue";
+import { R as E } from "./icon-svg-_WCkLP8-.js";
+import { _ as D } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+import './style/switch.css';const N = ["id", "disabled", "checked"], L = ["for", "aria-label"], I = {
   key: 0,
   class: "rds-e-switch__label-text"
-}, F = /* @__PURE__ */ y({
+}, R = /* @__PURE__ */ p({
   __name: "switch",
-  props: /* @__PURE__ */ c({
+  props: {
     /**
      * ID del interruptor
      */
@@ -35,6 +35,13 @@ import './style/switch.css';const N = ["id", "disabled", "checked"], D = ["for",
       type: Boolean,
       default: !1
     },
+    /**
+     * v-model valor de entrada y salida
+     */
+    modelValue: {
+      type: Boolean,
+      default: void 0
+    },
     /**
      * Si el interruptor está marcado o no
      */
@@ -42,59 +49,59 @@ import './style/switch.css';const N = ["id", "disabled", "checked"], D = ["for",
       type: Boolean,
       default: !1
     }
-  }, {
-    modelValue: { type: Boolean },
-    modelModifiers: {}
-  }),
-  emits: /* @__PURE__ */ c(["update:checked"], ["update:modelValue"]),
-  setup(e, { emit: h }) {
-    const w = h, a = g(e, "modelValue"), l = r(!1), o = r(!1), b = () => {
-      o.value && (l.value = !0);
-    }, v = () => l.value = !1, s = (t) => {
-      t.key === "Tab" && (o.value = !0);
+  },
+  emits: ["update:modelValue", "update:checked"],
+  setup(e, { emit: f }) {
+    const t = e, s = f, a = r(!1), l = r(!1), w = y(() => t.modelValue !== void 0 ? t.modelValue : t.checked), v = () => {
+      l.value && (a.value = !0);
+    }, b = () => a.value = !1, c = (o) => {
+      o.key === "Tab" && (l.value = !0);
     }, i = () => {
-      o.value = !1;
-    }, k = (t) => {
-      const n = t.target.checked;
-      a.value = n, w("update:checked", n);
+      l.value = !1;
+    }, k = (o) => {
+      const n = o.target.checked;
+      s("update:modelValue", n), s("update:checked", n);
     };
-    return S(() => {
-      window.addEventListener("keydown", s), window.addEventListener("mousedown", i);
-    }), B(() => {
-      window.removeEventListener("keydown", s), window.removeEventListener("mousedown", i);
-    }), (t, n) => (d(), u("div", {
-      class: V(["rds-e-switch", { "rds-e-switch--focused": l.value }])
+    return g(() => {
+      t.modelValue !== void 0 && t.checked !== !1 && console.warn(
+        `[RDSSwitch] Warning: Avoid using both 'v-model' (or ':modelValue') and ':checked' props simultaneously on the same component instance (id: ${t.id}).
+      'v-model'/'modelValue' will always take precedence.`
+      ), window.addEventListener("keydown", c), window.addEventListener("mousedown", i);
+    }), S(() => {
+      window.removeEventListener("keydown", c), window.removeEventListener("mousedown", i);
+    }), (o, n) => (d(), u("div", {
+      class: V(["rds-e-switch", { "rds-e-switch--focused": a.value }])
     }, [
       m("input", {
         id: e.id.toString(),
         class: "rds-e-switch__input",
         type: "checkbox",
         disabled: e.disabled,
-        checked: a.value !== void 0 ? a.value : e.checked,
+        checked: w.value,
         onChange: k,
-        onFocus: b,
-        onBlur: v
+        onFocus: v,
+        onBlur: b
       }, null, 40, N),
       m("label", {
         class: "rds-e-switch__label",
         for: e.id.toString(),
         "aria-label": e.label
       }, [
-        e.label || t.$slots["text-label"] ? (d(), u("span", L, [
-          p(t.$slots, "text-label", {}, () => [
-            x(E(e.label), 1)
+        e.label || o.$slots["text-label"] ? (d(), u("span", I, [
+          B(o.$slots, "text-label", {}, () => [
+            C(x(e.label), 1)
           ], !0),
-          e.icon ? (d(), _(C, {
+          e.icon ? (d(), _(E, {
             key: 0,
             name: e.icon,
             class: "rds-e-switch__label-icon",
             "aria-hidden": "true"
-          }, null, 8, ["name"])) : f("", !0)
-        ])) : f("", !0)
-      ], 8, D)
+          }, null, 8, ["name"])) : h("", !0)
+        ])) : h("", !0)
+      ], 8, L)
     ], 2));
   }
-}), T = /* @__PURE__ */ M(F, [["__scopeId", "data-v-be80169d"]]);
+}), M = /* @__PURE__ */ D(R, [["__scopeId", "data-v-16659a57"]]);
 export {
-  T as default
+  M as default
 };

package/dist/components/tabBar.es.js

@@ -1,13 +1,13 @@
-import { defineComponent as N, mergeModels as B, toRefs as W, useModel as D, ref as m, computed as h, onMounted as K, nextTick as $, onUnmounted as F, watch as L, openBlock as s, createElementBlock as d, normalizeClass as u, createVNode as R, createCommentVNode as g, createElementVNode as f, Fragment as q, renderList as H, unref as O, withKeys as S, withModifiers as V, createBlock as P, createTextVNode as U, toDisplayString as j, renderSlot as G } from "vue";
-import { R as w } from "./icon-svg-DGp2yHJn.js";
+import { defineComponent as E, mergeModels as C, toRefs as N, useModel as W, ref as _, computed as h, onMounted as $, nextTick as K, onUnmounted as F, watch as L, createElementBlock as d, openBlock as s, normalizeClass as c, createCommentVNode as g, createElementVNode as v, createVNode as R, Fragment as P, renderList as q, unref as H, withKeys as S, withModifiers as A, createBlock as O, createTextVNode as U, toDisplayString as j, renderSlot as G } from "vue";
+import { R as w } from "./icon-svg-_WCkLP8-.js";
 import { d as J } from "./functions-DIHwdgF0.js";
 import { _ as Q } from "./_plugin-vue_export-helper-CHgC5LLL.js";
 import './style/tabBar.css';const X = ["aria-selected", "tabindex", "onClick", "onKeydown"], Y = { class: "rds-e-top-bar__item-title" }, Z = {
   class: "rds-e-top-bar__content",
   role: "tabpanel"
-}, ee = /* @__PURE__ */ N({
+}, ee = /* @__PURE__ */ E({
   __name: "tab-bar",
-  props: /* @__PURE__ */ B({
+  props: /* @__PURE__ */ C({
     /**
      * Pestaña activa
      */
@@ -36,6 +36,13 @@ import './style/tabBar.css';const X = ["aria-selected", "tabindex", "onClick", "
       type: Boolean,
       default: !1
     },
+    /**
+     * <span>Indica si el Tab-bar es inverso</span>
+     */
+    inverse: {
+      type: Boolean,
+      default: !1
+    },
     /**
      * Si es `true`, se mostrara un divider entre el top-bar y el contenido.
      */
@@ -49,8 +56,8 @@ import './style/tabBar.css';const X = ["aria-selected", "tabindex", "onClick", "
      */
     beforeTabChange: {
       type: Function,
-      default: (o, v) => {
-        if (o === v.id) return Promise.resolve(!0);
+      default: (r, f) => {
+        if (r === f.id) return Promise.resolve(!0);
       }
     }
   }, {
@@ -60,92 +67,102 @@ import './style/tabBar.css';const X = ["aria-selected", "tabindex", "onClick", "
     },
     activeTabModifiers: {}
   }),
-  emits: /* @__PURE__ */ B(["activeTabChanged"], ["update:activeTab"]),
-  setup(o, { emit: v }) {
-    const i = o, A = v, {
-      options: r
-    } = W(i), M = D(o, "activeTab"), a = m(""), b = m(null), l = m(null);
+  emits: /* @__PURE__ */ C(["activeTabChanged"], ["update:activeTab"]),
+  setup(r, { emit: f }) {
+    const i = r, V = f, {
+      options: o
+    } = N(i), M = W(r, "activeTab"), a = _(""), b = _(null), l = _(null);
     let p = [];
-    const y = h(() => l.value ? l.value.scrollWidth > l.value.clientWidth : !1), z = h(() => r.value.findIndex((t) => t.id === a.value) > 0 && y.value), E = h(() => l.value ? r.value.findIndex((t) => t.id === a.value) < i.options.length - 1 && y.value : !1), k = (e) => {
+    const y = h(() => l.value ? l.value.scrollWidth > l.value.clientWidth : !1), z = h(() => o.value.findIndex((t) => t.id === a.value) > 0 && y.value), D = h(() => l.value ? o.value.findIndex((t) => t.id === a.value) < i.options.length - 1 && y.value : !1), k = (e) => {
       const t = i.options.find((n) => n.id === a.value);
       return e ? t : t == null ? void 0 : t.id;
-    }, c = async (e) => {
-      const t = r.value.find((_) => _.id === e);
+    }, u = async (e) => {
+      const t = o.value.find((m) => m.id === e);
       return t ? await i.beforeTabChange(e, t) ? (a.value = e, !0) : !1 : (console.error(`[RDSTabBar]: Tab with id ${e} not found`), !1);
-    }, x = async () => {
-      let e = r.value.findIndex((t) => t.id === a.value);
-      for (; e > 0 && (e--, !await c(r.value[e].id)); )
+    }, T = async () => {
+      let e = o.value.findIndex((t) => t.id === a.value);
+      for (; e > 0 && (e--, !await u(o.value[e].id)); )
         ;
-    }, I = async () => {
-      let e = r.value.findIndex((t) => t.id === a.value);
-      for (; e < i.options.length - 1 && (e++, !await c(r.value[e].id)); )
+    }, x = async () => {
+      let e = o.value.findIndex((t) => t.id === a.value);
+      for (; e < i.options.length - 1 && (e++, !await u(o.value[e].id)); )
         ;
     };
-    function T(e) {
-      const t = r.value.findIndex((n) => n.id === e);
+    function I(e) {
+      const t = o.value.findIndex((n) => n.id === e);
       p[t] && p[t].scrollIntoView({
         behavior: "smooth",
         block: "nearest",
         inline: "start"
       });
     }
-    const C = () => {
-      T(a.value);
+    const B = () => {
+      I(a.value);
     };
-    return K(async () => {
-      await $(), b.value && (p = Array.from(
+    return $(async () => {
+      if (await K(), b.value && (p = Array.from(
         b.value.children
-      )), a.value = i.options[0].id ?? "", window.addEventListener("resize", J(C, 200));
+      )), i.activeTab) {
+        const e = o.value.find((t) => t.id === i.activeTab);
+        e ? a.value = e.id : (console.error(`[RDSTabBar]: Tab with id ${i.activeTab} not found. Picking the first tab instead.`), a.value = i.options[0].id ?? "");
+      } else
+        a.value = i.options[0].id ?? "";
+      window.addEventListener("resize", J(B, 200));
     }), F(() => {
-      window.removeEventListener("resize", C);
+      window.removeEventListener("resize", B);
     }), L(a, (e) => {
-      T(e), A("activeTabChanged", k(!1));
-    }), L(M, (e) => c(e)), (e, t) => (s(), d("div", {
-      class: u(["rds-e-top-bar", {
-        "rds-e-top-bar--fluid": o.fluid,
-        "rds-e-top-bar--divider": o.divider
+      I(e), V("activeTabChanged", k(!1));
+    }), L(M, (e) => {
+      u(e);
+    }, { immediate: !0 }), (e, t) => (s(), d("div", {
+      class: c(["rds-e-top-bar", {
+        "rds-e-top-bar--fluid": r.fluid,
+        "rds-e-top-bar--divider": r.divider,
+        "rds-e-top-bar--inverse": r.inverse
       }])
     }, [
       z.value ? (s(), d("div", {
         key: 0,
-        class: u([
+        class: c([
           "rds-e-top-bar__button",
-          o.backgroundAlternative ? "rds-e-top-bar__button--left-bg2" : "rds-e-top-bar__button--left"
+          r.backgroundAlternative ? "rds-e-top-bar__button--left-bg2" : "rds-e-top-bar__button--left"
         ]),
-        onClick: x
+        onClick: T
       }, [
         R(w, {
           class: "rds-e-top-bar__icon",
           name: "arrow_left"
         })
       ], 2)) : g("", !0),
-      f("div", {
+      v("div", {
         ref_key: "tabsListWrapper",
         ref: l,
         class: "rds-e-top-bar__wrapper"
       }, [
-        f("ul", {
+        v("ul", {
           ref_key: "tabsList",
           ref: b,
-          class: "rds-e-top-bar__list",
+          class: c(["rds-e-top-bar__list", {
+            "rds-e-top-bar__list-inverse": r.inverse
+          }]),
           role: "tablist"
         }, [
-          (s(!0), d(q, null, H(O(r), (n, _) => (s(), d("li", {
-            key: _,
-            class: u(["rds-e-top-bar__item", {
+          (s(!0), d(P, null, q(H(o), (n, m) => (s(), d("li", {
+            key: m,
+            class: c(["rds-e-top-bar__item", {
               active: a.value === n.id
             }]),
             role: "tab",
             "aria-selected": a.value === n.id,
             tabindex: a.value === n.id ? 0 : -1,
-            onClick: (te) => c(n.id),
+            onClick: (te) => u(n.id),
             onKeydown: [
-              S(V(x, ["prevent"]), ["left"]),
-              S(V(I, ["prevent"]), ["right"])
+              S(A(T, ["prevent"]), ["left"]),
+              S(A(x, ["prevent"]), ["right"])
             ]
           }, [
-            f("span", Y, [
-              n.icon ? (s(), P(w, {
+            v("span", Y, [
+              n.icon ? (s(), O(w, {
                 key: 0,
                 class: "rds-e-top-bar__item-title--icon",
                 name: n.icon
@@ -153,29 +170,29 @@ import './style/tabBar.css';const X = ["aria-selected", "tabindex", "onClick", "
               U(" " + j(n.title), 1)
             ])
           ], 42, X))), 128))
-        ], 512)
+        ], 2)
       ], 512),
-      E.value ? (s(), d("div", {
+      D.value ? (s(), d("div", {
         key: 1,
-        class: u([
+        class: c([
           "rds-e-top-bar__button",
-          o.backgroundAlternative ? "rds-e-top-bar__button--right-bg2" : "rds-e-top-bar__button--right"
+          r.backgroundAlternative ? "rds-e-top-bar__button--right-bg2" : "rds-e-top-bar__button--right"
         ]),
-        onClick: I
+        onClick: x
       }, [
         R(w, {
           class: "rds-e-top-bar__icon",
           name: "arrow_right"
         })
       ], 2)) : g("", !0),
-      f("div", Z, [
+      v("div", Z, [
         G(e.$slots, a.value, {
           tab: k(!0)
         }, void 0, !0)
       ])
     ], 2));
   }
-}), ie = /* @__PURE__ */ Q(ee, [["__scopeId", "data-v-26223c41"]]);
+}), oe = /* @__PURE__ */ Q(ee, [["__scopeId", "data-v-1fc895db"]]);
 export {
-  ie as default
+  oe as default
 };

package/dist/components/tablepaginatedcomponent.es.js

@@ -1,4 +1,4 @@
-import { defineComponent as H, toRefs as M, ref as i, watch as N, watchEffect as V, openBlock as u, createElementBlock as g, Fragment as K, renderList as v, unref as k, renderSlot as h, createBlock as z, mergeProps as F, createSlots as S, withCtx as B, normalizeProps as C, guardReactiveProps as w, withDirectives as q, createVNode as G, vShow as J } from "vue";
+import { defineComponent as H, toRefs as F, ref as i, watch as M, watchEffect as N, createElementBlock as v, openBlock as u, createBlock as V, withDirectives as K, Fragment as z, renderList as g, unref as k, renderSlot as h, mergeProps as q, createSlots as S, withCtx as B, normalizeProps as C, guardReactiveProps as w, createVNode as G, vShow as J } from "vue";
 import Q from "./tableslotedcomponent.es.js";
 import U from "./pagination.es.js";
 import { _ as W } from "./_plugin-vue_export-helper-CHgC5LLL.js";
@@ -26,23 +26,24 @@ import './style/tablepaginatedcomponent.css';const X = { class: "table_paginated
     showSelectAll: { type: Boolean, default: !0 },
     showEmptyState: { type: Boolean, default: !0 },
     asynchrone: { type: Boolean, default: !0 },
-    jumpTo: { type: Boolean, default: !1 }
+    jumpTo: { type: Boolean, default: !1 },
+    disableFirstLoad: { type: Boolean }
   },
   emits: ["update:options", "update:reset", "update:selection", "update:selectedAll", "update:sort", "onItemExpansion"],
   setup(A, { expose: E, emit: _ }) {
     const t = A, s = _, {
       loading: I,
       items: d,
-      selectableKey: $,
-      header: D,
+      selectableKey: L,
+      header: $,
       asynchrone: P
-    } = M(t), c = i(), p = i([]), o = i([]), y = i({
+    } = F(t), c = i(), p = i([]), n = i([]), b = i({
       item: {
-        header: D,
+        header: $,
         items: p
       },
-      selectableKey: $,
-      listChecked: o,
+      selectableKey: L,
+      listChecked: n,
       checkedAll: t.checkedAll,
       initChecked: [],
       variant: t.variant,
@@ -52,68 +53,68 @@ import './style/tablepaginatedcomponent.css';const X = { class: "table_paginated
       hideSelectAll: t.hideSelectAll,
       showEmptyState: t.showEmptyState,
       mockItems: t.itemsPerPage[0]
-    }), b = i(null), m = i(1), r = i(), O = () => {
+    }), y = i(null), m = i(1), r = i(), D = () => {
       p.value = [], m.value = 1, r.value = void 0, s("update:reset");
-    }, T = () => {
+    }, O = () => {
       p.value = d.value;
-    }, j = (e) => {
+    }, T = (e) => {
       const a = {};
       if ("pagination" in e) {
-        const n = e.pagination;
-        n.reset && O();
+        const o = e.pagination;
+        o.reset && D();
         let l = !1;
-        r.value = n, (n.page ?? 0) > m.value && (m.value = n.page ?? 0, l = !0), r.value && (r.value.isNewPage = l);
+        r.value = o, (o.page ?? 0) > m.value && (m.value = o.page ?? 0, l = !0), r.value && (r.value.isNewPage = l);
       }
       r.value && Object.assign(a, r.value), c.value && c.value.clearVisibleDetails(), s("update:options", a);
-    }, x = (e) => {
-      const a = o.value.indexOf(e);
-      a > -1 ? o.value.splice(a, 1) : o.value.push(e), s("update:selection", o.value);
-    }, L = () => {
+    }, j = (e) => {
+      const a = n.value.indexOf(e);
+      a > -1 ? n.value.splice(a, 1) : n.value.push(e), s("update:selection", n.value);
+    }, x = () => {
       var e;
-      (e = b.value) == null || e.resetPagination();
+      (e = y.value) == null || e.resetPagination();
     }, R = (e) => {
-      e && (o.value = []), y.value.checkedAll = e, s("update:selectedAll", e);
+      e && (n.value = []), b.value.checkedAll = e, s("update:selectedAll", e);
     };
-    return o.value = [...t.initChecked], P.value || (p.value = d.value), N(d, () => {
-      T();
-    }, { deep: !0 }), V(() => {
+    return n.value = [...t.initChecked], P.value || (p.value = d.value), M(d, () => {
+      O();
+    }, { deep: !0 }), N(() => {
       if (!P.value && d.value.length >= 0) {
         const e = (t.activePage - 1) * t.itemsPerPage[0], a = e + t.itemsPerPage[0];
         p.value = d.value.slice(e, a);
       }
     }), E({
       /** Fuerza a refrescar la paginacion y la tabla */
-      $reset: L
-    }), (e, a) => (u(), g("div", X, [
-      e.$slots.mobile && e.isMobileDevice ? (u(!0), g(K, { key: 0 }, v(k(d), (n, l) => (u(), g("div", {
+      $reset: x
+    }), (e, a) => (u(), v("div", X, [
+      e.$slots.mobile && e.isMobileDevice ? (u(!0), v(z, { key: 0 }, g(k(d), (o, l) => (u(), v("div", {
         key: `mobile-${l}`,
         class: "table_paginted__mobile_item"
       }, [
-        h(e.$slots, "mobile", { item: n }, void 0, !0)
-      ]))), 128)) : (u(), z(Q, F({
+        h(e.$slots, "mobile", { item: o }, void 0, !0)
+      ]))), 128)) : (u(), V(Q, q({
         key: 1,
         ref_key: "tableSloted",
         ref: c,
         class: "mb-5"
-      }, y.value, {
+      }, b.value, {
         loading: k(I),
         "is-mobile-device": e.isMobileDevice,
         "items-expanded": e.itemsExpanded,
-        onOnClickCheckbox: x,
+        onOnClickCheckbox: j,
         onSelectAll: R,
-        onOnItemExpansion: a[0] || (a[0] = (n) => s("onItemExpansion", n)),
-        onOnHeaderSort: a[1] || (a[1] = (n) => s("update:sort", n))
+        onOnItemExpansion: a[0] || (a[0] = (o) => s("onItemExpansion", o)),
+        onOnHeaderSort: a[1] || (a[1] = (o) => s("update:sort", o))
       }), S({ _: 2 }, [
-        v(e.$slots, (n, l) => ({
+        g(e.$slots, (o, l) => ({
           name: l,
           fn: B((f) => [
             h(e.$slots, l, C(w(f || {})), void 0, !0)
           ])
         }))
       ]), 1040, ["loading", "is-mobile-device", "items-expanded"])),
-      q(G(U, {
+      K(G(U, {
         ref_key: "paginationComponentRef",
-        ref: b,
+        ref: y,
         class: "rds-mt-16",
         "total-items": t.totalItemsLength,
         "current-page": t.activePage,
@@ -121,20 +122,21 @@ import './style/tablepaginatedcomponent.css';const X = { class: "table_paginated
         "hide-leyend": t.hideLeyend,
         "jump-to": t.jumpTo,
         selected: !0,
-        onPageChanged: a[2] || (a[2] = (n) => j({ pagination: n }))
+        "disable-first-load": t.disableFirstLoad,
+        onPageChanged: a[2] || (a[2] = (o) => T({ pagination: o }))
       }, S({ _: 2 }, [
-        v(e.$slots, (n, l) => ({
+        g(e.$slots, (o, l) => ({
           name: l,
           fn: B((f) => [
             h(e.$slots, l, C(w(f || {})), void 0, !0)
           ])
         }))
-      ]), 1032, ["total-items", "current-page", "items-per-page", "hide-leyend", "jump-to"]), [
+      ]), 1032, ["total-items", "current-page", "items-per-page", "hide-leyend", "jump-to", "disable-first-load"]), [
         [J, !e.hidePagination]
       ])
     ]));
   }
-}), ne = /* @__PURE__ */ W(Y, [["__scopeId", "data-v-4d909f61"]]);
+}), oe = /* @__PURE__ */ W(Y, [["__scopeId", "data-v-862118a8"]]);
 export {
-  ne as default
+  oe as default
 };