energy-components 1.16.1 → 1.18.0

package/dist/components/tag.es.js

@@ -1,7 +1,7 @@
-import { defineComponent as y, toRefs as S, computed as u, createElementBlock as $, openBlock as o, normalizeClass as l, createBlock as d, createCommentVNode as p, createElementVNode as x, unref as s, toDisplayString as B } from "vue";
-import { R as f } from "./icon-svg-BGa9K9qG.js";
-import { _ as b } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-import './style/tag.css';const k = ["id"], C = { class: "rds-caption-tag" }, N = /* @__PURE__ */ y({
+import { defineComponent as S, toRefs as x, computed as c, createElementBlock as _, openBlock as n, normalizeClass as o, createBlock as v, createCommentVNode as u, unref as t, toDisplayString as k } from "vue";
+import { R as g } from "./icon-svg-arye8CV8.js";
+import { _ as C } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+import './style/tag.css';const I = ["id"], R = /* @__PURE__ */ S({
   __name: "tag",
   props: {
     /**
@@ -26,10 +26,10 @@ import './style/tag.css';const k = ["id"], C = { class: "rds-caption-tag" }, N =
     type: {
       type: String,
       default: "default",
-      validator: (t) => ["default", "information", "success", "error", "warning", "promo"].includes(t)
+      validator: (s) => ["default", "information", "success", "error", "warning", "promo"].includes(s)
     },
     /**
-     * Define si el tag tiene una acción asociada.
+     * Define si el tag tiene una acción asociada. Se desactiva si disabled o small son true.
      */
     actionable: {
       type: Boolean,
@@ -57,43 +57,62 @@ import './style/tag.css';const k = ["id"], C = { class: "rds-caption-tag" }, N =
     id: {
       type: String,
       default: void 0
+    },
+    /**
+     * Para indicar que el tag está desactivado
+     */
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Para casos donde temporalmente sólo se deba mostrar el icono
+     */
+    onlyIcon: {
+      type: Boolean,
+      default: !1
     }
   },
-  setup(t) {
-    const m = t, {
-      type: r,
-      actionable: i,
-      icon: n,
-      text: _,
-      inverse: g,
-      small: v
-    } = S(m), h = u(() => {
+  setup(s) {
+    const y = s, {
+      type: d,
+      actionable: h,
+      icon: r,
+      text: $,
+      inverse: b,
+      small: l,
+      disabled: p,
+      onlyIcon: i
+    } = x(y), f = c(() => h.value && !l.value && !p.value), B = c(() => {
       const a = "rds-e-tag", e = [];
-      return g.value && e.push(`${a}--inverse`), i.value && e.push(`${a}--actionable`), n.value && e.push(`${a}--icon`), v.value && e.push(`${a}--small`), e.push(`${a}--${r.value}`), e.join(" ");
-    }), c = u(() => {
+      return b.value && e.push(`${a}--inverse`), f.value && e.push(`${a}--actionable`), r.value && e.push(`${a}--icon`), l.value && e.push(`${a}--small`), p.value && e.push(`${a}--disabled`), e.push(`${a}--${d.value}`), e.join(" ");
+    }), m = c(() => {
       const a = "rds-e-tag_icon", e = [];
-      return e.push(`${a}--${r.value}`), e.join(" ");
+      return e.push(`${a}--${d.value}`), i.value && e.push("rds-e-tag__icon-no-margin"), l.value && e.push("rds-e-tag__icon-small"), e.join(" ");
     });
-    return (a, e) => (o(), $("div", {
-      id: t.id,
-      class: l(["rds-e-tag rds-e-caption-tag", h.value])
+    return (a, e) => (n(), _("div", {
+      id: s.id,
+      class: o(["rds-e-tag rds-e-caption-tag", B.value])
     }, [
-      s(n) ? (o(), d(f, {
+      t(r) ? (n(), v(g, {
         key: 0,
-        name: s(n),
-        class: l(["rds-e-tag__icon", c.value]),
+        name: t(r),
+        class: o(["rds-e-tag__icon", m.value]),
         "aria-hidden": "true"
-      }, null, 8, ["name", "class"])) : p("", !0),
-      x("span", C, B(s(_)), 1),
-      s(i) ? (o(), d(f, {
+      }, null, 8, ["name", "class"])) : u("", !0),
+      t(i) ? u("", !0) : (n(), _("span", {
         key: 1,
+        class: o(["rds-e-tag__span", [{ "rds-e-tag__span--small": t(l) }]])
+      }, k(t($)), 3)),
+      f.value && !t(i) ? (n(), v(g, {
+        key: 2,
         name: "arrow_right",
-        class: l(["rds-e-tag__icon-actionable", c.value]),
+        class: o(["rds-e-tag__icon-actionable", m.value]),
         "aria-hidden": "true"
-      }, null, 8, ["class"])) : p("", !0)
-    ], 10, k));
+      }, null, 8, ["class"])) : u("", !0)
+    ], 10, I));
   }
-}), w = /* @__PURE__ */ b(N, [["__scopeId", "data-v-ac2ecb64"]]);
+}), w = /* @__PURE__ */ C(R, [["__scopeId", "data-v-4ff716c6"]]);
 export {
   w as default
 };

package/dist/components/textArea.es.js

@@ -1,5 +1,5 @@
 import { defineComponent as Q, mergeModels as W, useModel as X, toRefs as Y, ref as k, computed as s, createElementBlock as f, openBlock as o, normalizeClass as u, createElementVNode as r, withDirectives as Z, unref as e, vModelText as ee, renderSlot as S, createTextVNode as te, createBlock as z, createCommentVNode as i, mergeProps as F, toHandlers as T, toDisplayString as _ } from "vue";
-import { R as A } from "./icon-svg-BGa9K9qG.js";
+import { R as A } from "./icon-svg-arye8CV8.js";
 import { _ as ae } from "./_plugin-vue_export-helper-CHgC5LLL.js";
 import './style/textArea.css';function V(t, p = !0, d = !0) {
   return p && !t.trim() ? (console.warn("Advertencia: El valor no puede estar vacío"), !1) : d && !/^[\w\s\u00C0-\u017F\-:.,;()¿?¡!%"'$€]+$/.test(t) ? (console.warn("Advertencia: El valor contiene caracteres inválidos"), !1) : !0;

package/dist/components/textField.es.js

@@ -1,8 +1,8 @@
-import { defineComponent as re, toRefs as ie, ref as f, computed as v, watch as F, onMounted as ue, onBeforeUnmount as de, createElementBlock as V, openBlock as h, normalizeClass as k, createElementVNode as g, createCommentVNode as S, renderSlot as E, createBlock as R, mergeProps as A, toHandlers as ce, unref as d, toDisplayString as M, withModifiers as fe } from "vue";
+import { defineComponent as re, toRefs as ie, ref as f, computed as v, watch as A, onMounted as ue, onBeforeUnmount as de, createElementBlock as V, openBlock as p, normalizeClass as S, createElementVNode as g, createCommentVNode as y, renderSlot as B, createBlock as E, mergeProps as M, toHandlers as ce, unref as d, toDisplayString as K, withModifiers as fe } from "vue";
 import { g as ve } from "./getInstance-GhoEcxLF.js";
-import { R as K, s as pe } from "./icon-svg-BGa9K9qG.js";
+import { R as T, s as pe } from "./icon-svg-arye8CV8.js";
 import { _ as me } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-import './style/textField.css';const he = { class: "rds-e-textfield__input-container" }, ge = ["id", "type", "maxlength", "minlength", "disabled", "value", "autocomplete", "readonly"], _e = ["for"], ye = {
+import './style/textField.css';const he = { class: "rds-e-textfield__input-container" }, ge = ["id", "type", "maxlength", "minlength", "disabled", "value", "autocomplete", "readonly"], ye = ["for"], _e = {
   key: 0,
   class: "rds-e-textfield__icon rds-e-textfield__icon--right"
 }, xe = {
@@ -133,6 +133,13 @@ import './style/textField.css';const he = { class: "rds-e-textfield__input-conta
       type: Boolean,
       default: !1
     },
+    /**
+     * Indica si el campo de texto está en estado de carga.
+     */
+    loading: {
+      type: Boolean,
+      default: !1
+    },
     /**
      * Indica si el campo de texto es para una nueva contraseña (solo para campos de contraseña).
      * Opciones permitidas: 'new-password', 'current-password', 'off'.
@@ -149,7 +156,7 @@ import './style/textField.css';const he = { class: "rds-e-textfield__input-conta
   emits: ["update:modelValue", "keydown", "keyup", "keypress", "change"],
   setup(t, { expose: s, emit: r }) {
     const n = t, c = r, {
-      type: p,
+      type: m,
       label: P,
       disabled: N,
       maxLength: j,
@@ -164,27 +171,27 @@ import './style/textField.css';const he = { class: "rds-e-textfield__input-conta
       password: _,
       autocomplete: G,
       fullWidth: J
-    } = ie(n), a = f(null), m = f(!0), y = f(!1), x = f(!1), b = f(!1), Q = ve(), w = f(""), T = v(() => n.id || `text-field-${Q}`), X = v(() => _.value ? m.value ? "text" : "password" : ["text", "number", "password", "email", "tel", "url"].includes(p.value) ? p.value : "text"), Y = v(() => {
-      if (_.value || p.value === "password")
+    } = ie(n), a = f(null), h = f(!0), x = f(!1), b = f(!1), w = f(!1), Q = ve(), k = f(""), I = v(() => n.id || `text-field-${Q}`), X = v(() => _.value ? h.value ? "text" : "password" : ["text", "number", "password", "email", "tel", "url"].includes(m.value) ? m.value : "text"), Y = v(() => {
+      if (_.value || m.value === "password")
         return G.value;
     }), Z = (e) => {
       const l = e.target;
       let u = l.value;
-      if (p.value === "number")
+      if (m.value === "number")
         if (l.value.trim() === "")
           u = null;
         else {
-          const D = Number.parseFloat(l.value);
-          u = Number.isNaN(D) ? l.value : D;
+          const R = Number.parseFloat(l.value);
+          u = Number.isNaN(R) ? l.value : R;
         }
       else l.value === "" && i.value === null && (u = null);
       c("update:modelValue", u);
     }, ee = () => {
-      b.value = !0;
-    }, B = () => {
-      y.value = !1, x.value = !1, b.value = !1;
-    }, I = () => {
-      y.value = !0, x.value = !b.value, b.value = !1;
+      w.value = !0;
+    }, C = () => {
+      x.value = !1, b.value = !1, w.value = !1;
+    }, $ = () => {
+      x.value = !0, b.value = !w.value, w.value = !1;
     }, te = (e) => {
       c("keydown", e);
     }, le = (e) => {
@@ -196,15 +203,15 @@ import './style/textField.css';const he = { class: "rds-e-textfield__input-conta
     }, oe = v(() => {
       if (L.value) return !0;
       const e = i.value === null || i.value === void 0 ? "" : String(i.value);
-      return e.length > 0 && (e.length < q.value || p.value !== "number" && e.length > j.value);
+      return e.length > 0 && (e.length < q.value || m.value !== "number" && e.length > j.value);
     }), se = v(() => {
       const e = [];
-      return w.value !== "" && e.push(w.value), i.value !== null && String(i.value).length > 0 && e.push("rds-e-textfield--filled"), oe.value && e.push("rds-e-textfield--error"), N.value && e.push("rds-e-textfield--disabled"), J.value && e.push("rds-e-textfield--full-width"), e.join(" ");
+      return k.value !== "" && e.push(k.value), i.value !== null && String(i.value).length > 0 && e.push("rds-e-textfield--filled"), oe.value && e.push("rds-e-textfield--error"), N.value && e.push("rds-e-textfield--disabled"), J.value && e.push("rds-e-textfield--full-width"), e.join(" ");
     });
-    F(
+    A(
       () => i.value,
       (e) => {
-        e !== null && String(e).length > 0 && (w.value = "");
+        e !== null && String(e).length > 0 && (k.value = "");
       }
     );
     const o = v(() => {
@@ -231,10 +238,10 @@ import './style/textField.css';const he = { class: "rds-e-textfield__input-conta
         },
         right: {
           ...e,
-          name: m.value ? "eye_open" : "eye_close",
+          name: h.value ? "eye_open" : "eye_close",
           class: "rds-e-textfield__icon--password",
           events: {
-            click: () => m.value = !m.value
+            click: () => h.value = !h.value
           }
         }
       } : H.value ? {
@@ -251,49 +258,54 @@ import './style/textField.css';const he = { class: "rds-e-textfield__input-conta
         }
       } : l;
     });
-    F(
+    A(
       _,
-      (e) => m.value = !e,
+      (e) => h.value = !e,
       { immediate: !0 }
     );
-    const C = (e) => {
+    const D = (e) => {
       const l = pe.includes(e);
       return l || console.warn(`[RDSTextfield]: El icono "${e}" no es un icono válido.`), l;
-    }, $ = (e) => {
+    }, F = (e) => {
       var u;
-      ((u = a.value) == null ? void 0 : u.matches(":-webkit-autofill")) && e.animationName.startsWith("onAutoFillStart") && (w.value = "rds-e-textfield--filled");
+      ((u = a.value) == null ? void 0 : u.matches(":-webkit-autofill")) && e.animationName.startsWith("onAutoFillStart") && (k.value = "rds-e-textfield--filled");
     };
     return ue(() => {
-      a.value && a.value.addEventListener("animationstart", $);
+      a.value && a.value.addEventListener("animationstart", F);
     }), de(() => {
-      a.value && a.value.removeEventListener("animationstart", $);
+      a.value && a.value.removeEventListener("animationstart", F);
     }), s({
       focus: () => {
-        a.value && (a.value.focus(), I());
+        a.value && (a.value.focus(), $());
       },
       blur: () => {
-        a.value && (a.value.blur(), B());
+        a.value && (a.value.blur(), C());
       }
-    }), (e, l) => (h(), V("div", {
-      class: k(["rds-e-textfield", se.value])
+    }), (e, l) => (p(), V("div", {
+      class: S(["rds-e-textfield", se.value])
     }, [
       g("div", {
-        class: k(["rds-e-textfield__container", {
-          "rds-e-textfield__container--keyboard-focus": x.value,
-          "rds-e-textfield__container--active": y.value && !x.value
+        class: S(["rds-e-textfield__container", {
+          "rds-e-textfield__container--keyboard-focus": b.value,
+          "rds-e-textfield__container--active": x.value && !b.value
         }]),
         onMousedown: ee
       }, [
-        E(e.$slots, "left-icon", {}, () => [
-          o.value.left.name && C(o.value.left.name) ? (h(), R(K, A({
+        B(e.$slots, "left-icon", {}, () => [
+          t.loading ? (p(), E(T, {
             key: 0,
-            class: ["rds-e-textfield__icon rds-e-textfield__icon--left", { "rds-e-textfield__icon--hidden": y.value }],
+            name: "loading",
+            class: "rds-e-textfield__icon--loading"
+          })) : y("", !0),
+          o.value.left.name && D(o.value.left.name) && !t.loading ? (p(), E(T, M({
+            key: 1,
+            class: ["rds-e-textfield__icon rds-e-textfield__icon--left", { "rds-e-textfield__icon--hidden": x.value }],
             "aria-hidden": "true"
-          }, o.value.left, ce(o.value.left.events)), null, 16, ["class"])) : S("", !0)
+          }, o.value.left, ce(o.value.left.events)), null, 16, ["class"])) : y("", !0)
         ], !0),
         g("div", he, [
           g("input", {
-            id: T.value,
+            id: I.value,
             ref_key: "input",
             ref: a,
             type: X.value,
@@ -305,40 +317,40 @@ import './style/textField.css';const he = { class: "rds-e-textfield__input-conta
             autocomplete: Y.value,
             readonly: t.readonly,
             onInput: Z,
-            onBlur: B,
-            onFocus: I,
+            onBlur: C,
+            onFocus: $,
             onKeydown: te,
             onKeyup: le,
             onKeypress: ae,
             onChange: ne
           }, null, 40, ge),
           g("label", {
-            for: T.value,
-            class: k(["rds-e-textfield__label", d(N) ? "rds-e-textfield__label--disabled" : ""])
-          }, M(d(P)), 11, _e)
+            for: I.value,
+            class: S(["rds-e-textfield__label", d(N) ? "rds-e-textfield__label--disabled" : ""])
+          }, K(d(P)), 11, ye)
         ]),
-        o.value.right.name || e.$slots["right-icon"] ? (h(), V("span", ye, [
-          E(e.$slots, "right-icon", {}, () => [
-            o.value.right.name && C(o.value.right.name) ? (h(), R(K, A({
+        o.value.right.name || e.$slots["right-icon"] ? (p(), V("span", _e, [
+          B(e.$slots, "right-icon", {}, () => [
+            o.value.right.name && D(o.value.right.name) ? (p(), E(T, M({
               key: 0,
               "aria-hidden": "true",
               class: "rds-e-textfield__icon rds-e-textfield__icon--right"
             }, o.value.right, {
               onClick: fe(o.value.right.events.click, ["stop"])
-            }), null, 16, ["onClick"])) : S("", !0)
+            }), null, 16, ["onClick"])) : y("", !0)
           ], !0)
-        ])) : S("", !0)
+        ])) : y("", !0)
       ], 34),
-      d(U) || d(L) ? (h(), V("div", xe, [
-        E(e.$slots, "helper-text", {}, () => [
+      d(U) || d(L) ? (p(), V("div", xe, [
+        B(e.$slots, "helper-text", {}, () => [
           g("span", {
-            class: k(d(L) ? "rds-e-textfield__helper--error" : "")
-          }, M(d(z)), 3)
+            class: S(d(L) ? "rds-e-textfield__helper--error" : "")
+          }, K(d(z)), 3)
         ], !0)
-      ])) : S("", !0)
+      ])) : y("", !0)
     ], 2));
   }
-}), Le = /* @__PURE__ */ me(be, [["__scopeId", "data-v-9e6e107e"]]);
+}), Le = /* @__PURE__ */ me(be, [["__scopeId", "data-v-78d8f6ab"]]);
 export {
   Le as default
 };

package/dist/components/tooltip.es.js

@@ -1,6 +1,6 @@
 import { defineComponent as E, toRefs as I, ref as o, computed as S, createElementBlock as p, openBlock as f, createElementVNode as i, renderSlot as k, normalizeClass as R, createCommentVNode as $, unref as b, createVNode as P, toDisplayString as B, createTextVNode as F, nextTick as X } from "vue";
 import { c as Y, o as q, f as G, s as J, a as K, b as L } from "./floating-ui.vue-7LKzPqHI.js";
-import { R as Q } from "./icon-svg-BGa9K9qG.js";
+import { R as Q } from "./icon-svg-arye8CV8.js";
 import { _ as U } from "./_plugin-vue_export-helper-CHgC5LLL.js";
 import './style/tooltip.css';const Z = ["id"], ee = {
   key: 0,