energy-components 1.8.0 → 1.9.0

package/dist/components/textField.es.js

@@ -1,11 +1,11 @@
-import { defineComponent as W, toRefs as X, ref as y, computed as u, watch as Y, createElementBlock as x, openBlock as d, normalizeClass as b, createElementVNode as c, renderSlot as k, createCommentVNode as m, createBlock as I, mergeProps as R, toHandlers as Z, unref as t, toDisplayString as T, withModifiers as ee } from "vue";
-import { g as te } from "./getInstance-GhoEcxLF.js";
-import { R as $, s as le } from "./icon-svg-_WCkLP8-.js";
-import { _ as oe } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-import './style/textField.css';const ne = { class: "rds-e-textfield__container" }, ae = { class: "rds-e-textfield__input-container" }, re = ["id", "type", "maxLength", "minLength", "disabled", "value", "autocomplete", "readonly"], se = ["for"], ie = {
+import { defineComponent as ee, toRefs as te, ref as w, computed as d, watch as le, createElementBlock as k, openBlock as p, normalizeClass as S, createElementVNode as m, renderSlot as N, createCommentVNode as y, createBlock as I, mergeProps as $, toHandlers as ne, unref as o, toDisplayString as C, withModifiers as ae } from "vue";
+import { g as oe } from "./getInstance-GhoEcxLF.js";
+import { R, s as re } from "./icon-svg-_WCkLP8-.js";
+import { _ as se } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+import './style/textField.css';const ie = { class: "rds-e-textfield__container" }, ue = { class: "rds-e-textfield__input-container" }, de = ["id", "type", "maxlength", "minlength", "disabled", "value", "autocomplete", "readonly"], ce = ["for"], fe = {
   key: 0,
   class: "rds-e-textfield__icon rds-e-textfield__icon--right"
-}, ue = { class: "rds-e-textfield__helper" }, de = /* @__PURE__ */ W({
+}, pe = { class: "rds-e-textfield__helper" }, me = /* @__PURE__ */ ee({
   __name: "text-field",
   props: {
     /**
@@ -26,7 +26,7 @@ import './style/textField.css';const ne = { class: "rds-e-textfield__container"
      * v-model valor de entrada y salida
      */
     modelValue: {
-      type: [String, null],
+      type: [String, Number, null],
       required: !0
     },
     /**
@@ -49,7 +49,7 @@ import './style/textField.css';const ne = { class: "rds-e-textfield__container"
     maxLength: {
       type: Number,
       default: 100,
-      validator: (l) => l < 0 ? (console.info("El valor de maxLength no puede ser menor a 0"), !1) : Number.isNaN(l) ? (console.info("El valor de maxLength debe ser un número"), !1) : !0
+      validator: (t) => t < 0 ? (console.info("El valor de maxLength no puede ser menor a 0"), !1) : Number.isNaN(t) ? (console.info("El valor de maxLength debe ser un número"), !1) : !0
     },
     /**
      * Número mínimo de caracteres permitidos en el campo de entrada.
@@ -57,7 +57,19 @@ import './style/textField.css';const ne = { class: "rds-e-textfield__container"
     minLength: {
       type: Number,
       default: 0,
-      validator: (l) => l < 0 ? (console.info("El valor de minLength no puede ser menor a 0"), !1) : Number.isNaN(l) ? (console.info("El valor de minLength debe ser un número"), !1) : !0
+      validator: (t) => t < 0 ? (console.info("El valor de minLength no puede ser menor a 0"), !1) : Number.isNaN(t) ? (console.info("El valor de minLength debe ser un número"), !1) : !0
+    },
+    /**
+     * Tipo del input HTML. Por defecto 'text'.
+     * Puede ser 'text' o 'number'. La prop 'password' tiene precedencia.
+     */
+    type: {
+      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;
+      }
     },
     /**
      * Nombre del icono que se mostrará dentro del campo de entrada.
@@ -117,60 +129,72 @@ import './style/textField.css';const ne = { class: "rds-e-textfield__container"
     autocomplete: {
       type: String,
       default: "off",
-      validator: (l, v) => {
-        const f = ["new-password", "current-password", "off"];
-        return v.password && !f.includes(l) ? (console.info(`[RDSTextfield]: El valor de autocomplete para un campo de contraseña debe ser uno de los siguientes: ${f.join(", ")}`), !1) : !0;
+      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;
       }
     }
   },
   emits: ["update:modelValue", "keydown", "keyup", "keypress", "change"],
-  setup(l, { expose: v, emit: f }) {
-    const w = l, a = f, {
-      label: C,
-      disabled: p,
-      maxLength: S,
-      minLength: L,
-      modelValue: n,
-      icon: D,
+  setup(t, { expose: r, emit: s }) {
+    const n = t, i = s, {
+      type: v,
+      label: D,
+      disabled: h,
+      maxLength: F,
+      minLength: P,
+      modelValue: u,
+      icon: j,
       rightIcon: q,
-      helper: F,
-      error: h,
-      helperText: K,
-      clearable: j,
-      password: _,
-      autocomplete: P
-    } = X(w), r = y(null), s = y(!0), g = y(!1), z = te(), N = u(() => w.id || `text-field-${z}`), H = u(() => {
-      if (_.value)
-        return P.value;
-    }), M = (e) => {
-      a(
-        "update:modelValue",
-        e.target.value
-      );
-    }, V = () => {
-      g.value = !1;
-    }, B = () => {
-      g.value = !0;
-    }, U = (e) => {
-      a("keydown", e);
-    }, A = (e) => {
-      a("keyup", e);
-    }, G = (e) => {
-      a("keypress", e);
-    }, J = (e) => {
-      a("change", e);
-    }, O = u(() => !!(h.value || n.value && n.value.length && (n.value.length < L.value || n.value.length > S.value))), Q = u(() => {
+      helper: K,
+      error: x,
+      helperText: z,
+      clearable: A,
+      password: g,
+      autocomplete: H
+    } = te(n), c = w(null), f = w(!0), b = w(!1), M = oe(), V = d(() => n.id || `text-field-${M}`), U = d(() => g.value ? f.value ? "text" : "password" : v.value), G = d(() => {
+      if (g.value || v.value === "password")
+        return H.value;
+    }), J = (e) => {
+      const l = e.target;
+      let _ = l.value;
+      if (v.value === "number")
+        if (l.value.trim() === "")
+          _ = null;
+        else {
+          const B = Number.parseFloat(l.value);
+          _ = Number.isNaN(B) ? l.value : B;
+        }
+      else l.value === "" && u.value === null && (_ = null);
+      i("update:modelValue", _);
+    }, E = () => {
+      b.value = !1;
+    }, L = () => {
+      b.value = !0;
+    }, O = (e) => {
+      i("keydown", e);
+    }, Q = (e) => {
+      i("keyup", e);
+    }, W = (e) => {
+      i("keypress", e);
+    }, X = (e) => {
+      i("change", e);
+    }, Y = d(() => {
+      if (x.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);
+    }), Z = d(() => {
       const e = [];
-      return n.value !== null && n.value !== "" && e.push("rds-e-textfield--filled"), O.value && e.push("rds-e-textfield--error"), p.value && e.push("rds-e-textfield--disabled"), e.join(" ");
-    }), o = u(() => {
+      return u.value !== null && String(u.value).length > 0 && e.push("rds-e-textfield--filled"), Y.value && e.push("rds-e-textfield--error"), h.value && e.push("rds-e-textfield--disabled"), e.join(" ");
+    }), a = d(() => {
       const e = {
-        name: D.value,
+        name: j.value,
         class: "",
         events: {
           click: () => {
           }
         }
-      }, i = {
+      }, l = {
         left: {
           ...e
         },
@@ -179,20 +203,20 @@ import './style/textField.css';const ne = { class: "rds-e-textfield__container"
           name: q.value
         }
       };
-      return _.value ? {
+      return g.value ? {
         left: {
           ...e,
           name: null
         },
         right: {
           ...e,
-          name: s.value ? "eye_open" : "eye_close",
+          name: f.value ? "eye_open" : "eye_close",
           class: "rds-e-textfield__icon--password",
           events: {
-            click: () => s.value = !s.value
+            click: () => f.value = !f.value
           }
         }
-      } : j.value ? {
+      } : A.value ? {
         left: {
           ...e
         },
@@ -201,87 +225,87 @@ import './style/textField.css';const ne = { class: "rds-e-textfield__container"
           name: "close",
           class: "rds-e-textfield__icon--clear",
           events: {
-            click: () => a("update:modelValue", "")
+            click: () => i("update:modelValue", "")
           }
         }
-      } : i;
+      } : l;
     });
-    Y(
-      _,
-      (e) => s.value = !e,
+    le(
+      g,
+      (e) => f.value = !e,
       { immediate: !0 }
     );
-    const E = (e) => {
-      const i = le.includes(e);
-      return i || console.warn(`[RDSTextfield]: El icono "${e}" no es un icono válido.`), i;
+    const T = (e) => {
+      const l = re.includes(e);
+      return l || console.warn(`[RDSTextfield]: El icono "${e}" no es un icono válido.`), l;
     };
-    return v({
+    return r({
       focus: () => {
-        r.value && (r.value.focus(), B());
+        c.value && (c.value.focus(), L());
       },
       blur: () => {
-        r.value && (r.value.blur(), V());
+        c.value && (c.value.blur(), E());
       }
-    }), (e, i) => (d(), x("div", {
-      class: b(["rds-e-textfield", Q.value])
+    }), (e, l) => (p(), k("div", {
+      class: S(["rds-e-textfield", Z.value])
     }, [
-      c("div", ne, [
-        k(e.$slots, "left-icon", {}, () => [
-          o.value.left.name && E(o.value.left.name) ? (d(), I($, R({
+      m("div", ie, [
+        N(e.$slots, "left-icon", {}, () => [
+          a.value.left.name && T(a.value.left.name) ? (p(), I(R, $({
             key: 0,
-            class: ["rds-e-textfield__icon rds-e-textfield__icon--left", { "rds-e-textfield__icon--hidden": g.value }],
+            class: ["rds-e-textfield__icon rds-e-textfield__icon--left", { "rds-e-textfield__icon--hidden": b.value }],
             "aria-hidden": "true"
-          }, o.value.left, Z(o.value.left.events)), null, 16, ["class"])) : m("", !0)
+          }, a.value.left, ne(a.value.left.events)), null, 16, ["class"])) : y("", !0)
         ], !0),
-        c("div", ae, [
-          c("input", {
-            id: N.value,
+        m("div", ue, [
+          m("input", {
+            id: V.value,
             ref_key: "input",
-            ref: r,
-            type: s.value ? "text" : "password",
+            ref: c,
+            type: U.value,
             class: "rds-e-textfield__input",
-            maxLength: t(S),
-            minLength: t(L),
-            disabled: t(p),
-            value: t(n),
-            autocomplete: H.value,
-            readonly: l.readonly,
-            onInput: M,
-            onBlur: V,
-            onFocus: B,
-            onKeydown: U,
-            onKeyup: A,
-            onKeypress: G,
-            onChange: J
-          }, null, 40, re),
-          c("label", {
-            for: N.value,
-            class: b(["rds-e-textfield__label", t(p) ? "rds-e-textfield__label--disabled" : ""])
-          }, T(t(C)), 11, se)
+            maxlength: n.type === "number" ? void 0 : n.maxLength,
+            minlength: n.type === "number" ? void 0 : n.minLength,
+            disabled: o(h),
+            value: n.modelValue === null ? "" : n.modelValue,
+            autocomplete: G.value,
+            readonly: t.readonly,
+            onInput: J,
+            onBlur: E,
+            onFocus: L,
+            onKeydown: O,
+            onKeyup: Q,
+            onKeypress: W,
+            onChange: X
+          }, null, 40, de),
+          m("label", {
+            for: V.value,
+            class: S(["rds-e-textfield__label", o(h) ? "rds-e-textfield__label--disabled" : ""])
+          }, C(o(D)), 11, ce)
         ]),
-        o.value.right.name || e.$slots["right-icon"] ? (d(), x("span", ie, [
-          k(e.$slots, "right-icon", {}, () => [
-            o.value.right.name && E(o.value.right.name) ? (d(), I($, R({
+        a.value.right.name || e.$slots["right-icon"] ? (p(), k("span", fe, [
+          N(e.$slots, "right-icon", {}, () => [
+            a.value.right.name && T(a.value.right.name) ? (p(), I(R, $({
               key: 0,
               "aria-hidden": "true",
               class: "rds-e-textfield__icon rds-e-textfield__icon--right"
-            }, o.value.right, {
-              onClick: ee(o.value.right.events.click, ["stop"])
-            }), null, 16, ["onClick"])) : m("", !0)
+            }, a.value.right, {
+              onClick: ae(a.value.right.events.click, ["stop"])
+            }), null, 16, ["onClick"])) : y("", !0)
           ], !0)
-        ])) : m("", !0)
+        ])) : y("", !0)
       ]),
-      c("div", ue, [
-        k(e.$slots, "helper-text", {}, () => [
-          (t(F) || t(h)) && !t(p) ? (d(), x("span", {
+      m("div", pe, [
+        N(e.$slots, "helper-text", {}, () => [
+          (o(K) || o(x)) && !o(h) ? (p(), k("span", {
             key: 0,
-            class: b(t(h) ? "rds-e-textfield__helper--error" : "")
-          }, T(t(K)), 3)) : m("", !0)
+            class: S(o(x) ? "rds-e-textfield__helper--error" : "")
+          }, C(o(z)), 3)) : y("", !0)
         ], !0)
       ])
     ], 2));
   }
-}), ve = /* @__PURE__ */ oe(de, [["__scopeId", "data-v-5cc94c78"]]);
+}), ye = /* @__PURE__ */ se(me, [["__scopeId", "data-v-a6ab314d"]]);
 export {
-  ve as default
+  ye as default
 };

package/dist/components/toggle.es.js

@@ -1,6 +1,6 @@
-import { defineComponent as T, toRefs as E, ref as L, onMounted as _, createElementBlock as y, openBlock as B, normalizeClass as d, createElementVNode as p, unref as i, toDisplayString as m } from "vue";
+import { defineComponent as c, toRefs as E, ref as L, onMounted as h, createElementBlock as y, openBlock as B, normalizeClass as r, createElementVNode as p, unref as i, toDisplayString as f } from "vue";
 import { _ as F } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-import './style/toggle.css';const I = /* @__PURE__ */ T({
+import './style/toggle.css';const I = /* @__PURE__ */ c({
   __name: "toggle",
   props: {
     small: { type: Boolean },
@@ -13,41 +13,42 @@ import './style/toggle.css';const I = /* @__PURE__ */ T({
     labelRight: {}
   },
   emits: ["update:modelValue"],
-  setup(f, { emit: v }) {
-    const b = f, n = v, { modelValue: e, switchType: s, valueLeft: u, valueRight: o } = E(b), t = {
+  setup(m, { emit: v }) {
+    const b = m, u = v, { modelValue: l, switchType: s, valueLeft: n, valueRight: o } = E(b), t = {
       LEFT: "left",
       RIGHT: "right"
-    }, a = L(t.LEFT), g = (l) => {
-      n("update:modelValue", l);
+    }, a = L(t.LEFT), g = (e) => {
+      u("update:modelValue", e);
     };
-    return _(() => {
-      s != null && s.value ? (n("update:modelValue", e == null ? void 0 : e.value), a.value = e != null && e.value ? t.RIGHT : t.LEFT) : (e == null ? void 0 : e.value) === (o == null ? void 0 : o.value) ? (n("update:modelValue", o == null ? void 0 : o.value), a.value = t.RIGHT) : (n("update:modelValue", u == null ? void 0 : u.value), a.value = t.LEFT);
-    }), (l, r) => (B(), y("div", {
-      class: d(["rds-e-toggle", [
+    return h(() => {
+      s != null && s.value ? (u("update:modelValue", l == null ? void 0 : l.value), a.value = l != null && l.value ? t.RIGHT : t.LEFT) : (l == null ? void 0 : l.value) === (o == null ? void 0 : o.value) ? (u("update:modelValue", o == null ? void 0 : o.value), a.value = t.RIGHT) : (u("update:modelValue", n == null ? void 0 : n.value), a.value = t.LEFT);
+    }), (e, d) => (B(), y("div", {
+      class: r(["rds-e-toggle", [
         {
-          "rds-e-toggle--full-width": l.fullWidth && !l.small,
-          "rds-e-toggle--width": !l.fullWidth && !l.small,
-          "rds-e-toggle--small": l.small
+          "rds-e-toggle--small-full-width": e.small && e.fullWidth,
+          "rds-e-toggle--full-width": e.fullWidth && !e.small,
+          "rds-e-toggle--small": e.small && !e.fullWidth,
+          "rds-e-toggle--width": !e.small && !e.fullWidth
         }
       ]])
     }, [
       p("button", {
-        class: d(["rds-e-toggle__tab", {
+        class: r(["rds-e-toggle__tab", {
           "rds-e-toggle__tab--active": a.value === t.LEFT
         }]),
         type: "button",
-        onClick: r[0] || (r[0] = (c) => (g(i(s) ? !0 : i(u)), a.value = t.LEFT))
-      }, m(l.labelLeft), 3),
+        onClick: d[0] || (d[0] = (T) => (g(i(s) ? !0 : i(n)), a.value = t.LEFT))
+      }, f(e.labelLeft), 3),
       p("button", {
-        class: d(["rds-e-toggle__tab", {
+        class: r(["rds-e-toggle__tab", {
           "rds-e-toggle__tab--active": a.value === t.RIGHT
         }]),
         type: "button",
-        onClick: r[1] || (r[1] = (c) => (g(i(s) ? !1 : i(o)), a.value = t.RIGHT))
-      }, m(l.labelRight), 3)
+        onClick: d[1] || (d[1] = (T) => (g(i(s) ? !1 : i(o)), a.value = t.RIGHT))
+      }, f(e.labelRight), 3)
     ], 2));
   }
-}), H = /* @__PURE__ */ F(I, [["__scopeId", "data-v-191362c2"]]);
+}), H = /* @__PURE__ */ F(I, [["__scopeId", "data-v-30b07e72"]]);
 export {
   H as default
 };