energy-components 1.11.0 → 1.12.0

package/dist/components/textField.es.js

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