energy-components 1.16.1 → 1.17.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,