energy-components 1.10.0 → 1.11.0

package/dist/components/textField.es.js

@@ -1,14 +1,14 @@
-import { defineComponent as te, toRefs as le, ref as w, computed as d, watch as ae, createElementBlock as k, openBlock as p, normalizeClass as S, createElementVNode as m, createCommentVNode as y, renderSlot as N, createBlock as I, mergeProps as $, toHandlers as ne, unref as o, toDisplayString as C, withModifiers as oe } from "vue";
-import { g as re } from "./getInstance-GhoEcxLF.js";
-import { R, s as se } from "./icon-svg-DuzOdbk1.js";
-import { _ as ie } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-import './style/textField.css';const ue = { class: "rds-e-textfield__container" }, de = { class: "rds-e-textfield__input-container" }, ce = ["id", "type", "maxlength", "minlength", "disabled", "value", "autocomplete", "readonly"], fe = ["for"], pe = {
+import { defineComponent as ne, toRefs as oe, ref as x, computed as f, watch as $, onMounted as re, onBeforeUnmount as se, createElementBlock as k, openBlock as v, normalizeClass as N, createElementVNode as m, createCommentVNode as b, renderSlot as L, createBlock as R, mergeProps as F, toHandlers as ie, unref as r, toDisplayString as D, withModifiers as ue } from "vue";
+import { g as de } from "./getInstance-GhoEcxLF.js";
+import { R as A, s as ce } from "./icon-svg-DuzOdbk1.js";
+import { _ as fe } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+import './style/textField.css';const pe = { class: "rds-e-textfield__container" }, ve = { class: "rds-e-textfield__input-container" }, me = ["id", "type", "maxlength", "minlength", "disabled", "value", "autocomplete", "readonly"], he = ["for"], ge = {
   key: 0,
   class: "rds-e-textfield__icon rds-e-textfield__icon--right"
-}, me = {
+}, _e = {
   key: 0,
   class: "rds-e-textfield__helper"
-}, ve = /* @__PURE__ */ te({
+}, ye = /* @__PURE__ */ ne({
   __name: "text-field",
   props: {
     /**
@@ -78,8 +78,8 @@ import './style/textField.css';const ue = { class: "rds-e-textfield__container"
       type: String,
       default: "text",
       validator: (t) => {
-        const r = ["text", "number", "password", "email", "tel", "url"], s = r.includes(t);
-        return s || console.warn(`[RDSTextfield]: El valor de la prop 'type' debe ser uno de: ${r.join(", ")}. Valor recibido: ${t}`), s;
+        const s = ["text", "number", "password", "email", "tel", "url"], i = s.includes(t);
+        return i || console.warn(`[RDSTextfield]: El valor de la prop 'type' debe ser uno de: ${s.join(", ")}. Valor recibido: ${t}`), i;
       }
     },
     /**
@@ -140,67 +140,74 @@ import './style/textField.css';const ue = { class: "rds-e-textfield__container"
     autocomplete: {
       type: String,
       default: "off",
-      validator: (t, r) => {
-        const s = ["new-password", "current-password", "off"];
-        return (r.password || r.type === "password") && !s.includes(t) ? (console.info(`[RDSTextfield]: El valor de autocomplete para un campo de contraseña debe ser uno de los siguientes: ${s.join(", ")}`), !1) : !0;
+      validator: (t, s) => {
+        const i = ["new-password", "current-password", "off"];
+        return (s.password || s.type === "password") && !i.includes(t) ? (console.info(`[RDSTextfield]: El valor de autocomplete para un campo de contraseña debe ser uno de los siguientes: ${i.join(", ")}`), !1) : !0;
       }
     }
   },
   emits: ["update:modelValue", "keydown", "keyup", "keypress", "change"],
-  setup(t, { expose: r, emit: s }) {
-    const a = t, i = s, {
-      type: v,
-      label: D,
-      disabled: h,
-      maxLength: F,
-      minLength: P,
+  setup(t, { expose: s, emit: i }) {
+    const n = t, c = i, {
+      type: h,
+      label: P,
+      disabled: g,
+      maxLength: j,
+      minLength: q,
       modelValue: u,
-      icon: j,
-      rightIcon: q,
-      helper: K,
-      error: x,
-      helperText: W,
-      clearable: z,
-      password: g,
-      autocomplete: A,
+      icon: K,
+      rightIcon: W,
+      helper: M,
+      error: w,
+      helperText: O,
+      clearable: U,
+      password: _,
+      autocomplete: z,
       fullWidth: H
-    } = le(a), c = w(null), f = w(!0), b = w(!1), M = re(), V = d(() => a.id || `text-field-${M}`), U = d(() => g.value ? f.value ? "text" : "password" : v.value), G = d(() => {
-      if (g.value || v.value === "password")
-        return A.value;
-    }), J = (e) => {
+    } = oe(n), a = x(null), p = x(!0), S = x(!1), G = de(), y = x(""), V = f(() => n.id || `text-field-${G}`), J = f(() => _.value ? p.value ? "text" : "password" : h.value), Q = f(() => {
+      if (_.value || h.value === "password")
+        return z.value;
+    }), X = (e) => {
       const l = e.target;
-      let _ = l.value;
-      if (v.value === "number")
+      let d = l.value;
+      if (h.value === "number")
         if (l.value.trim() === "")
-          _ = null;
+          d = null;
         else {
-          const T = Number.parseFloat(l.value);
-          _ = Number.isNaN(T) ? l.value : T;
+          const C = Number.parseFloat(l.value);
+          d = Number.isNaN(C) ? l.value : C;
         }
-      else l.value === "" && u.value === null && (_ = null);
-      i("update:modelValue", _);
-    }, B = () => {
-      b.value = !1;
+      else l.value === "" && u.value === null && (d = null);
+      c("update:modelValue", d);
     }, E = () => {
-      b.value = !0;
-    }, O = (e) => {
-      i("keydown", e);
-    }, Q = (e) => {
-      i("keyup", e);
-    }, X = (e) => {
-      i("keypress", e);
+      S.value = !1;
+    }, B = () => {
+      S.value = !0;
     }, Y = (e) => {
-      i("change", e);
-    }, Z = d(() => {
-      if (x.value) return !0;
+      c("keydown", e);
+    }, Z = (e) => {
+      c("keyup", e);
+    }, ee = (e) => {
+      c("keypress", e);
+    }, te = (e) => {
+      c("change", e);
+    }, le = f(() => {
+      if (w.value) return !0;
       const e = u.value === null || u.value === void 0 ? "" : String(u.value);
-      return e.length > 0 && (e.length < P.value || v.value !== "number" && e.length > F.value);
-    }), ee = d(() => {
+      return e.length > 0 && (e.length < q.value || h.value !== "number" && e.length > j.value);
+    }), ae = f(() => {
       const e = [];
-      return u.value !== null && String(u.value).length > 0 && e.push("rds-e-textfield--filled"), Z.value && e.push("rds-e-textfield--error"), h.value && e.push("rds-e-textfield--disabled"), H.value && e.push("rds-e-textfield--full-width"), e.join(" ");
-    }), n = d(() => {
+      return y.value !== "" && e.push(y.value), u.value !== null && String(u.value).length > 0 && e.push("rds-e-textfield--filled"), le.value && e.push("rds-e-textfield--error"), g.value && e.push("rds-e-textfield--disabled"), H.value && e.push("rds-e-textfield--full-width"), e.join(" ");
+    });
+    $(
+      () => u.value,
+      (e) => {
+        e !== null && String(e).length > 0 && (y.value = "");
+      }
+    );
+    const o = f(() => {
       const e = {
-        name: j.value,
+        name: K.value,
         class: "",
         events: {
           click: () => {
@@ -212,23 +219,23 @@ import './style/textField.css';const ue = { class: "rds-e-textfield__container"
         },
         right: {
           ...e,
-          name: q.value
+          name: W.value
         }
       };
-      return g.value ? {
+      return _.value ? {
         left: {
           ...e,
           name: null
         },
         right: {
           ...e,
-          name: f.value ? "eye_open" : "eye_close",
+          name: p.value ? "eye_open" : "eye_close",
           class: "rds-e-textfield__icon--password",
           events: {
-            click: () => f.value = !f.value
+            click: () => p.value = !p.value
           }
         }
-      } : z.value ? {
+      } : U.value ? {
         left: {
           ...e
         },
@@ -237,86 +244,93 @@ import './style/textField.css';const ue = { class: "rds-e-textfield__container"
           name: "close",
           class: "rds-e-textfield__icon--clear",
           events: {
-            click: () => i("update:modelValue", "")
+            click: () => c("update:modelValue", "")
           }
         }
       } : l;
     });
-    ae(
-      g,
-      (e) => f.value = !e,
+    $(
+      _,
+      (e) => p.value = !e,
       { immediate: !0 }
     );
-    const L = (e) => {
-      const l = se.includes(e);
+    const T = (e) => {
+      const l = ce.includes(e);
       return l || console.warn(`[RDSTextfield]: El icono "${e}" no es un icono válido.`), l;
+    }, I = (e) => {
+      var d;
+      ((d = a.value) == null ? void 0 : d.matches(":-webkit-autofill")) && e.animationName.startsWith("onAutoFillStart") && (y.value = "rds-e-textfield--filled");
     };
-    return r({
+    return re(() => {
+      a.value && a.value.addEventListener("animationstart", I);
+    }), se(() => {
+      a.value && a.value.removeEventListener("animationstart", I);
+    }), s({
       focus: () => {
-        c.value && (c.value.focus(), E());
+        a.value && (a.value.focus(), B());
       },
       blur: () => {
-        c.value && (c.value.blur(), B());
+        a.value && (a.value.blur(), E());
       }
-    }), (e, l) => (p(), k("div", {
-      class: S(["rds-e-textfield", ee.value])
+    }), (e, l) => (v(), k("div", {
+      class: N(["rds-e-textfield", ae.value])
     }, [
-      m("div", ue, [
-        N(e.$slots, "left-icon", {}, () => [
-          n.value.left.name && L(n.value.left.name) ? (p(), I(R, $({
+      m("div", pe, [
+        L(e.$slots, "left-icon", {}, () => [
+          o.value.left.name && T(o.value.left.name) ? (v(), R(A, F({
             key: 0,
-            class: ["rds-e-textfield__icon rds-e-textfield__icon--left", { "rds-e-textfield__icon--hidden": b.value }],
+            class: ["rds-e-textfield__icon rds-e-textfield__icon--left", { "rds-e-textfield__icon--hidden": S.value }],
             "aria-hidden": "true"
-          }, n.value.left, ne(n.value.left.events)), null, 16, ["class"])) : y("", !0)
+          }, o.value.left, ie(o.value.left.events)), null, 16, ["class"])) : b("", !0)
         ], !0),
-        m("div", de, [
+        m("div", ve, [
           m("input", {
             id: V.value,
             ref_key: "input",
-            ref: c,
-            type: U.value,
+            ref: a,
+            type: J.value,
             class: "rds-e-textfield__input",
-            maxlength: a.type === "number" ? void 0 : a.maxLength,
-            minlength: a.type === "number" ? void 0 : a.minLength,
-            disabled: o(h),
-            value: a.modelValue === null ? "" : a.modelValue,
-            autocomplete: G.value,
+            maxlength: n.type === "number" ? void 0 : n.maxLength,
+            minlength: n.type === "number" ? void 0 : n.minLength,
+            disabled: r(g),
+            value: n.modelValue === null ? "" : n.modelValue,
+            autocomplete: Q.value,
             readonly: t.readonly,
-            onInput: J,
-            onBlur: B,
-            onFocus: E,
-            onKeydown: O,
-            onKeyup: Q,
-            onKeypress: X,
-            onChange: Y
-          }, null, 40, ce),
+            onInput: X,
+            onBlur: E,
+            onFocus: B,
+            onKeydown: Y,
+            onKeyup: Z,
+            onKeypress: ee,
+            onChange: te
+          }, null, 40, me),
           m("label", {
             for: V.value,
-            class: S(["rds-e-textfield__label", o(h) ? "rds-e-textfield__label--disabled" : ""])
-          }, C(o(D)), 11, fe)
+            class: N(["rds-e-textfield__label", r(g) ? "rds-e-textfield__label--disabled" : ""])
+          }, D(r(P)), 11, he)
         ]),
-        n.value.right.name || e.$slots["right-icon"] ? (p(), k("span", pe, [
-          N(e.$slots, "right-icon", {}, () => [
-            n.value.right.name && L(n.value.right.name) ? (p(), I(R, $({
+        o.value.right.name || e.$slots["right-icon"] ? (v(), k("span", ge, [
+          L(e.$slots, "right-icon", {}, () => [
+            o.value.right.name && T(o.value.right.name) ? (v(), R(A, F({
               key: 0,
               "aria-hidden": "true",
               class: "rds-e-textfield__icon rds-e-textfield__icon--right"
-            }, n.value.right, {
-              onClick: oe(n.value.right.events.click, ["stop"])
-            }), null, 16, ["onClick"])) : y("", !0)
+            }, o.value.right, {
+              onClick: ue(o.value.right.events.click, ["stop"])
+            }), null, 16, ["onClick"])) : b("", !0)
           ], !0)
-        ])) : y("", !0)
+        ])) : b("", !0)
       ]),
-      (o(K) || o(x)) && !o(h) ? (p(), k("div", me, [
-        N(e.$slots, "helper-text", {}, () => [
+      (r(M) || r(w)) && !r(g) ? (v(), k("div", _e, [
+        L(e.$slots, "helper-text", {}, () => [
           m("span", {
-            class: S(o(x) ? "rds-e-textfield__helper--error" : "")
-          }, C(o(W)), 3)
+            class: N(r(w) ? "rds-e-textfield__helper--error" : "")
+          }, D(r(O)), 3)
         ], !0)
-      ])) : y("", !0)
+      ])) : b("", !0)
     ], 2));
   }
-}), xe = /* @__PURE__ */ ie(ve, [["__scopeId", "data-v-3d4a237a"]]);
+}), ke = /* @__PURE__ */ fe(ye, [["__scopeId", "data-v-7ba97dce"]]);
 export {
-  xe as default
+  ke as default
 };