energy-components 2.1.0 → 2.3.0

package/dist/components/textField.es.js

@@ -1,15 +1,21 @@
-import { defineComponent as ne, ref as p, computed as i, watch as B, onMounted as oe, onBeforeUnmount as re, openBlock as s, createElementBlock as h, normalizeClass as k, createElementVNode as g, renderSlot as T, createBlock as L, createCommentVNode as b, mergeProps as K, toHandlers as P, toDisplayString as z, withModifiers as V, createVNode as j } from "vue";
-import { g as ie } from "./getInstance-GhoEcxLF.js";
-import { R as O, s as se } from "./icon-svg-CW3eQRcp.js";
-import C from "./actionButton.es.js";
-import { _ as ue } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-import './style/textField.css';const de = { class: "rds-e-textfield__input-container" }, ce = ["id", "type", "maxlength", "minlength", "disabled", "value", "autocomplete", "readonly", "name", "required", "inputmode", "pattern", "min", "max", "step", "enterkeyhint", "spellcheck", "autocapitalize", "aria-invalid", "aria-describedby"], fe = ["for"], pe = {
+import { defineComponent as de, ref as y, useSlots as ce, computed as o, watch as L, onMounted as fe, onBeforeUnmount as pe, openBlock as r, createElementBlock as h, normalizeClass as x, createElementVNode as g, renderSlot as b, createBlock as E, createCommentVNode as d, mergeProps as O, toHandlers as U, createTextVNode as W, toDisplayString as N, withModifiers as q, createVNode as H } from "vue";
+import { g as me } from "./getInstance-GhoEcxLF.js";
+import { R as G, s as ve } from "./icon-svg-CW3eQRcp.js";
+import F from "./actionButton.es.js";
+import { _ as ye } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+import './style/textField.css';const he = { class: "rds-e-textfield__input-container" }, ge = {
   key: 0,
+  class: "rds-e-textfield__prefix"
+}, _e = ["data-value"], xe = ["id", "type", "maxlength", "minlength", "disabled", "value", "autocomplete", "readonly", "name", "required", "inputmode", "pattern", "min", "max", "step", "enterkeyhint", "spellcheck", "autocapitalize", "aria-invalid", "aria-describedby"], be = {
+  key: 1,
+  class: "rds-e-textfield__suffix"
+}, we = ["for"], Se = {
+  key: 1,
   class: "rds-e-textfield__icon rds-e-textfield__icon--right"
-}, me = ["aria-label"], ve = {
+}, ke = ["aria-label"], Ve = {
   key: 0,
   class: "rds-e-textfield__helper"
-}, ye = ["id"], he = /* @__PURE__ */ ne({
+}, Ne = ["id"], qe = /* @__PURE__ */ de({
   __name: "text-field",
   props: {
     /**
@@ -20,6 +26,19 @@ import './style/textField.css';const de = { class: "rds-e-textfield__input-conta
       type: Boolean,
       default: !1
     },
+    /**
+     * Versión compacta del campo de texto con altura reducida (42px en lugar de 52px).
+     * En este modo se ocultan visualmente el label y el helper text para ahorrar espacio.
+     * Los eventos y cambios de estado visual se mantienen.
+     *
+     * ⚠️ **Uso recomendado**: Solo para celdas de tablas editables.
+     * No se recomienda fuera de este contexto por cuestiones de accesibilidad,
+     * ya que la ausencia del label visible puede dificultar la comprensión del campo.
+     */
+    compact: {
+      type: Boolean,
+      default: !1
+    },
     /**
      * Etiqueta que se muestra sobre el campo de entrada. y Placeholder
      */
@@ -41,6 +60,20 @@ import './style/textField.css';const de = { class: "rds-e-textfield__input-conta
       type: [String, Number, null],
       required: !0
     },
+    /**
+     * Texto a mostrar antes del valor del input. (Reemplaza al icono izquierdo si existe)
+     */
+    prefix: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Texto a mostrar después del valor del input, siguiendo dinámicamente al texto.
+     */
+    suffix: {
+      type: String,
+      default: ""
+    },
     /**
      * Indica si el campo de entrada está deshabilitado o no.
      */
@@ -63,7 +96,7 @@ import './style/textField.css';const de = { class: "rds-e-textfield__input-conta
     maxLength: {
       type: Number,
       required: !1,
-      validator: (a) => a == null ? !0 : typeof a != "number" || Number.isNaN(a) ? (console.info("El valor de maxLength debe ser un número"), !1) : a < 0 ? (console.info("El valor de maxLength no puede ser menor a 0"), !1) : !0
+      validator: (i) => i == null ? !0 : typeof i != "number" || Number.isNaN(i) ? (console.info("El valor de maxLength debe ser un número"), !1) : i < 0 ? (console.info("El valor de maxLength no puede ser menor a 0"), !1) : !0
     },
     /**
      * Número mínimo de caracteres permitidos en el campo de entrada.
@@ -72,7 +105,7 @@ import './style/textField.css';const de = { class: "rds-e-textfield__input-conta
     minLength: {
       type: Number,
       required: !1,
-      validator: (a) => a == null ? !0 : typeof a != "number" || Number.isNaN(a) ? (console.info("El valor de minLength debe ser un número"), !1) : a < 0 ? (console.info("El valor de minLength no puede ser menor a 0"), !1) : !0
+      validator: (i) => i == null ? !0 : typeof i != "number" || Number.isNaN(i) ? (console.info("El valor de minLength debe ser un número"), !1) : i < 0 ? (console.info("El valor de minLength no puede ser menor a 0"), !1) : !0
     },
     /**
      * Tipo del input HTML. Por defecto 'text'.
@@ -81,9 +114,9 @@ import './style/textField.css';const de = { class: "rds-e-textfield__input-conta
     type: {
       type: String,
       default: "text",
-      validator: (a) => {
-        const u = ["text", "number", "password", "email", "tel", "url"], d = u.includes(a);
-        return d || console.warn(`[RDSTextfield]: El valor de la prop 'type' debe ser uno de: ${u.join(", ")}. Valor recibido: ${a}`), d;
+      validator: (i) => {
+        const c = ["text", "number", "password", "email", "tel", "url"], f = c.includes(i);
+        return f || console.warn(`[RDSTextfield]: El valor de la prop 'type' debe ser uno de: ${c.join(", ")}. Valor recibido: ${i}`), f;
       }
     },
     /**
@@ -159,9 +192,9 @@ import './style/textField.css';const de = { class: "rds-e-textfield__input-conta
     autocomplete: {
       type: String,
       default: "off",
-      validator: (a, u) => {
-        const d = ["new-password", "current-password", "off"];
-        return (u.password || u.type === "password") && !d.includes(a) ? (console.info(`[RDSTextfield]: El valor de autocomplete para un campo de contraseña debe ser uno de los siguientes: ${d.join(", ")}`), !1) : !0;
+      validator: (i, c) => {
+        const f = ["new-password", "current-password", "off"];
+        return (c.password || c.type === "password") && !f.includes(i) ? (console.info(`[RDSTextfield]: El valor de autocomplete para un campo de contraseña debe ser uno de los siguientes: ${f.join(", ")}`), !1) : !0;
       }
     },
     /** Atributos adicionales del input */
@@ -217,58 +250,65 @@ import './style/textField.css';const de = { class: "rds-e-textfield__input-conta
     }
   },
   emits: ["update:modelValue", "clear", "keydown", "keyup", "keypress", "change"],
-  setup(a, { expose: u, emit: d }) {
-    const e = a, c = d, n = p(null), m = p(!1), f = p(!1), _ = p(!1), x = p(!1), U = ie(), y = p(""), o = p(!1), N = () => {
-      if (n.value)
+  setup(i, { expose: c, emit: f }) {
+    const e = i, p = f, a = y(null), m = y(!1), u = y(!1), w = y(!1), S = y(!1), J = me(), _ = y(""), n = y(!1), $ = ce(), B = o(() => !!e.prefix || !!$.prefix), T = o(() => !!e.suffix || !!$.suffix), C = () => {
+      if (a.value)
         if (e.type === "number") {
-          const t = n.value, l = t.value !== "" || t.selectionStart !== null && t.selectionStart > 0 || t.validity.badInput;
-          o.value = l;
+          const t = a.value, l = t.value !== "" || t.selectionStart !== null && t.selectionStart > 0 || t.validity.badInput;
+          n.value = l;
         } else
-          o.value = n.value.value !== "";
-    }, q = i(() => e.id !== void 0 && e.id !== null ? String(e.id) : `text-field-${U}`), E = i(() => e.helper || e.error ? `${q.value}-helper` : void 0), v = i(() => e.password || e.type === "password"), W = i(() => v.value ? m.value ? "text" : "password" : ["text", "number", "password", "email", "tel", "url"].includes(e.type) ? e.type : "text"), H = i(() => e.autocomplete), G = (t) => {
-      const l = t.target, A = l.value.trim();
-      let w = l.value;
+          n.value = a.value.value !== "";
+    }, Q = () => {
+      !e.disabled && !e.readonly && a.value && a.value.focus();
+    }, I = o(() => e.id !== void 0 && e.id !== null ? String(e.id) : `text-field-${J}`), D = o(() => e.helper || e.error ? `${I.value}-helper` : void 0), v = o(() => e.password || e.type === "password"), X = o(() => v.value ? m.value ? "text" : "password" : ["text", "number", "password", "email", "tel", "url"].includes(e.type) ? e.type : "text"), Y = o(() => e.autocomplete), Z = o(() => {
+      const t = e.modelValue === null || e.modelValue === void 0 ? "" : String(e.modelValue);
+      return v.value && !m.value ? "•".repeat(t.length) : t;
+    }), ee = (t) => {
+      const l = t.target, j = l.value.trim();
+      let k = l.value;
       if (e.type === "number") {
-        const S = l.value !== "" || l.selectionStart !== null && l.selectionStart > 0 || l.validity.badInput;
-        o.value = S;
+        const V = l.value !== "" || l.selectionStart !== null && l.selectionStart > 0 || l.validity.badInput;
+        n.value = V;
       } else
-        o.value = l.value !== "";
+        n.value = l.value !== "";
       if (e.type === "number") {
         if (l.value.trim() === "")
-          w = null;
+          k = null;
         else {
-          const S = Number.parseFloat(l.value);
-          w = Number.isNaN(S) ? l.value : S;
+          const V = Number.parseFloat(l.value);
+          k = Number.isNaN(V) ? l.value : V;
         }
-        A === "" && !l.validity.badInput && (o.value = !1);
-      } else l.value === "" && e.modelValue === null && (w = null);
-      c("update:modelValue", w), N();
-    }, J = () => {
-      x.value = !0;
-    }, I = () => {
-      const t = n.value?.value.trim() || "";
-      o.value = t !== "", f.value = !1, _.value = !1, x.value = !1, t === "" && (y.value = ""), N();
-    }, D = () => {
-      f.value = !0, _.value = !x.value, x.value = !1;
-    }, Q = (t) => {
-      c("keydown", t);
-    }, X = (t) => {
-      c("keyup", t);
-    }, Y = (t) => {
-      c("keypress", t);
-    }, Z = (t) => {
-      c("change", t);
-    }, ee = i(() => {
+        j === "" && !l.validity.badInput && (n.value = !1);
+      } else l.value === "" && e.modelValue === null && (k = null);
+      p("update:modelValue", k), C();
+    }, te = () => {
+      S.value = !0;
+    }, R = () => {
+      const t = a.value?.value.trim() || "";
+      n.value = t !== "", u.value = !1, w.value = !1, S.value = !1, t === "" && (_.value = ""), C();
+    }, z = () => {
+      u.value = !0, w.value = !S.value, S.value = !1;
+    }, le = (t) => {
+      p("keydown", t);
+    }, ae = (t) => {
+      p("keyup", t);
+    }, ie = (t) => {
+      p("keypress", t);
+    }, oe = (t) => {
+      p("change", t);
+    }, ne = o(() => {
       const t = [];
-      return y.value && t.push(y.value), (e.modelValue !== null && String(e.modelValue).trim().length > 0 || o.value || f.value) && t.push("rds-e-textfield--filled"), e.error && t.push("rds-e-textfield--error"), e.disabled && t.push("rds-e-textfield--disabled"), e.fullWidth && t.push("rds-e-textfield--full-width"), t.join(" ");
+      _.value && t.push(_.value);
+      const l = e.modelValue !== null && String(e.modelValue).trim().length > 0;
+      return (B.value || T.value || l || n.value || u.value) && t.push("rds-e-textfield--filled"), e.error && t.push("rds-e-textfield--error"), e.disabled && t.push("rds-e-textfield--disabled"), e.fullWidth && t.push("rds-e-textfield--full-width"), e.compact && t.push("rds-e-textfield--compact"), u.value && t.push("rds-e-textfield--focused"), e.readonly && t.push("rds-e-textfield--readonly"), t.join(" ");
     });
-    B(
+    L(
       () => e.modelValue,
       (t) => {
-        t !== null && String(t).length > 0 && (y.value = ""), (t === "" || t === null) && !f.value && (o.value = !1);
+        t !== null && String(t).length > 0 && (_.value = ""), (t === "" || t === null) && !u.value && (n.value = !1);
       }
     );
-    const r = i(() => {
+    const s = o(() => {
       const t = {
         name: e.icon,
         class: "",
@@ -288,7 +328,6 @@ import './style/textField.css';const de = { class: "rds-e-textfield__input-conta
       return v.value || e.clearable ? {
         left: {
           ...t,
-          // ocultar icono izquierdo en modo password para evitar ambigüedad
           name: v.value ? "" : t.name
         },
         right: {
@@ -297,155 +336,175 @@ import './style/textField.css';const de = { class: "rds-e-textfield__input-conta
         }
       } : l;
     });
-    B(
+    L(
       v,
       (t) => {
         m.value = !1;
       },
       { immediate: !0 }
     );
-    const F = (t) => {
-      const l = se.includes(t);
+    const A = (t) => {
+      const l = ve.includes(t);
       return l || console.warn(`[RDSTextfield]: El icono "${t}" no es un icono válido.`), l;
-    }, $ = (t) => {
-      const l = n.value;
+    }, K = (t) => {
+      const l = a.value;
       if (!l) return;
-      l.matches(":-webkit-autofill") && t.animationName.startsWith("onAutoFillStart") && l.value.trim().length > 0 && (y.value = "rds-e-textfield--filled", o.value = !0);
+      l.matches(":-webkit-autofill") && t.animationName.startsWith("onAutoFillStart") && l.value.trim().length > 0 && (_.value = "rds-e-textfield--filled", n.value = !0);
     };
-    oe(() => {
-      n.value && (n.value.addEventListener("animationstart", $), N());
-    }), re(() => {
-      n.value && n.value.removeEventListener("animationstart", $);
-    }), u({
+    fe(() => {
+      a.value && (a.value.addEventListener("animationstart", K), C());
+    }), pe(() => {
+      a.value && a.value.removeEventListener("animationstart", K);
+    }), c({
       focus: () => {
-        n.value && (n.value.focus(), D());
+        a.value && (a.value.focus(), z());
       },
       blur: () => {
-        n.value && (n.value.blur(), I());
+        a.value && (a.value.blur(), R());
       }
     });
-    const te = () => {
+    const re = () => {
       m.value = !m.value;
-    }, le = () => {
+    }, se = () => {
       const t = e.type === "number";
-      c("update:modelValue", t ? null : ""), n.value && (n.value.value = ""), f.value = !1, o.value = !1, n.value && n.value.blur(), c("clear");
-    }, R = (t) => {
+      p("update:modelValue", t ? null : ""), a.value && (a.value.value = ""), u.value = !1, n.value = !1, a.value && a.value.blur(), p("clear");
+    }, M = (t) => {
       (t.key === "Enter" || t.key === " ") && t.currentTarget?.click();
-    }, ae = i(() => m.value ? "Ocultar contraseña" : "Mostrar contraseña");
-    return B(
+    }, ue = o(() => m.value ? "Ocultar contraseña" : "Mostrar contraseña");
+    return L(
       () => e.password,
       (t) => {
         t && console.warn('[RDSTextfield]: Deprecado `password`. Usa type="password" + toggleVisibility. Esta prop será eliminada en próximas versiones.');
       },
       { immediate: !0 }
-    ), (t, l) => (s(), h("div", {
-      class: k(["rds-e-textfield", ee.value])
+    ), (t, l) => (r(), h("div", {
+      class: x(["rds-e-textfield", ne.value])
     }, [
       g("div", {
-        class: k(["rds-e-textfield__container", {
-          "rds-e-textfield__container--keyboard-focus": _.value,
-          "rds-e-textfield__container--active": f.value && !_.value
+        class: x(["rds-e-textfield__container", {
+          "rds-e-textfield__container--keyboard-focus": w.value,
+          "rds-e-textfield__container--active": u.value && !w.value
         }]),
-        onMousedown: J
+        onMousedown: te
       }, [
-        T(t.$slots, "left-icon", {}, () => [
-          e.loading ? (s(), L(O, {
+        B.value ? d("", !0) : b(t.$slots, "left-icon", { key: 0 }, () => [
+          e.loading ? (r(), E(G, {
             key: 0,
             name: "loading",
             class: "rds-e-textfield__icon--loading"
-          })) : b("", !0),
-          r.value.left.name && F(r.value.left.name) && !a.loading ? (s(), L(O, K({
+          })) : d("", !0),
+          s.value.left.name && A(s.value.left.name) && !i.loading ? (r(), E(G, O({
             key: 1,
-            class: ["rds-e-textfield__icon rds-e-textfield__icon--left", { "rds-e-textfield__icon--hidden": f.value }],
+            class: ["rds-e-textfield__icon rds-e-textfield__icon--left", { "rds-e-textfield__icon--hidden": u.value }],
             "aria-hidden": "true"
-          }, r.value.left, P(r.value.left.events)), null, 16, ["class"])) : b("", !0)
+          }, s.value.left, U(s.value.left.events)), null, 16, ["class"])) : d("", !0)
         ], !0),
-        g("div", de, [
-          g("input", {
-            id: q.value,
-            ref_key: "input",
-            ref: n,
-            type: W.value,
-            class: "rds-e-textfield__input",
-            maxlength: e.type === "number" ? void 0 : e.maxLength,
-            minlength: e.type === "number" ? void 0 : e.minLength,
-            disabled: e.disabled,
-            value: e.modelValue === null ? "" : e.modelValue,
-            autocomplete: H.value,
-            readonly: e.readonly,
-            name: e.name,
-            required: e.required,
-            inputmode: e.inputmode,
-            pattern: e.pattern,
-            min: e.min,
-            max: e.max,
-            step: e.step,
-            enterkeyhint: e.enterkeyhint,
-            spellcheck: e.spellcheck,
-            autocapitalize: e.autocapitalize,
-            "aria-invalid": e.error,
-            "aria-describedby": E.value,
-            onInput: G,
-            onBlur: I,
-            onFocus: D,
-            onKeydown: Q,
-            onKeyup: X,
-            onKeypress: Y,
-            onChange: Z
-          }, null, 40, ce),
+        g("div", he, [
+          g("div", {
+            class: "rds-e-textfield__input-wrapper",
+            onClick: Q
+          }, [
+            B.value ? (r(), h("span", ge, [
+              b(t.$slots, "prefix", {}, () => [
+                W(N(e.prefix), 1)
+              ], !0)
+            ])) : d("", !0),
+            g("div", {
+              class: x(["rds-e-textfield__input-sizer", { "rds-e-textfield__input-sizer--grow": !T.value }]),
+              "data-value": Z.value
+            }, [
+              g("input", {
+                id: I.value,
+                ref_key: "input",
+                ref: a,
+                type: X.value,
+                class: "rds-e-textfield__input",
+                maxlength: e.type === "number" ? void 0 : e.maxLength,
+                minlength: e.type === "number" ? void 0 : e.minLength,
+                disabled: e.disabled,
+                value: e.modelValue === null ? "" : e.modelValue,
+                autocomplete: Y.value,
+                readonly: e.readonly,
+                name: e.name,
+                required: e.required,
+                inputmode: e.inputmode,
+                pattern: e.pattern,
+                min: e.min,
+                max: e.max,
+                step: e.step,
+                enterkeyhint: e.enterkeyhint,
+                spellcheck: e.spellcheck,
+                autocapitalize: e.autocapitalize,
+                "aria-invalid": e.error,
+                "aria-describedby": D.value,
+                onInput: ee,
+                onBlur: R,
+                onFocus: z,
+                onKeydown: le,
+                onKeyup: ae,
+                onKeypress: ie,
+                onChange: oe
+              }, null, 40, xe)
+            ], 10, _e),
+            T.value ? (r(), h("span", be, [
+              b(t.$slots, "suffix", {}, () => [
+                W(N(e.suffix), 1)
+              ], !0)
+            ])) : d("", !0)
+          ]),
           g("label", {
-            for: q.value,
-            class: k(["rds-e-textfield__label", e.disabled ? "rds-e-textfield__label--disabled" : ""])
-          }, z(e.label), 11, fe)
+            for: I.value,
+            class: x(["rds-e-textfield__label", e.disabled ? "rds-e-textfield__label--disabled" : ""])
+          }, N(e.label), 11, we)
         ]),
-        v.value && e.toggleVisibility || e.clearable || r.value.right.name || t.$slots["right-icon"] ? (s(), h("span", pe, [
-          T(t.$slots, "right-icon", {}, () => [
-            v.value && e.toggleVisibility ? (s(), h("button", {
+        v.value && e.toggleVisibility || e.clearable || s.value.right.name || t.$slots["right-icon"] ? (r(), h("span", Se, [
+          b(t.$slots, "right-icon", {}, () => [
+            v.value && e.toggleVisibility ? (r(), h("button", {
               key: 0,
               type: "button",
               class: "rds-e-textfield__icon rds-e-textfield__icon--right rds-e-textfield__icon--password",
-              "aria-label": ae.value,
-              onClick: V(te, ["stop"]),
-              onKeydown: V(R, ["stop", "prevent"])
+              "aria-label": ue.value,
+              onClick: q(re, ["stop"]),
+              onKeydown: q(M, ["stop", "prevent"])
             }, [
-              j(C, {
+              H(F, {
                 icon: m.value ? "eye_open" : "eye_close",
                 variant: "ghost",
                 small: ""
               }, null, 8, ["icon"])
-            ], 40, me)) : e.clearable ? (s(), h("button", {
+            ], 40, ke)) : e.clearable ? (r(), h("button", {
               key: 1,
               type: "button",
               class: "rds-e-textfield__icon rds-e-textfield__icon--right rds-e-textfield__icon--clear",
               "aria-label": "Limpiar campo",
-              onClick: V(le, ["stop"]),
-              onKeydown: V(R, ["stop", "prevent"])
+              onClick: q(se, ["stop"]),
+              onKeydown: q(M, ["stop", "prevent"])
             }, [
-              j(C, {
+              H(F, {
                 icon: "close",
                 variant: "ghost",
                 small: ""
               })
-            ], 32)) : r.value.right.name && F(r.value.right.name) ? (s(), L(C, K({
+            ], 32)) : s.value.right.name && A(s.value.right.name) ? (r(), E(F, O({
               key: 2,
-              icon: r.value.right.name,
+              icon: s.value.right.name,
               variant: "ghost",
               small: ""
-            }, P(r.value.right.events)), null, 16, ["icon"])) : b("", !0)
+            }, U(s.value.right.events)), null, 16, ["icon"])) : d("", !0)
           ], !0)
-        ])) : b("", !0)
+        ])) : d("", !0)
       ], 34),
-      e.helper || e.error ? (s(), h("div", ve, [
-        T(t.$slots, "helper-text", {}, () => [
+      e.helper || e.error ? (r(), h("div", Ve, [
+        b(t.$slots, "helper-text", {}, () => [
           g("span", {
-            id: E.value,
-            class: k(e.error ? "rds-e-textfield__helper--error" : "")
-          }, z(e.helperText), 11, ye)
+            id: D.value,
+            class: x(e.error ? "rds-e-textfield__helper--error" : "")
+          }, N(e.helperText), 11, Ne)
         ], !0)
-      ])) : b("", !0)
+      ])) : d("", !0)
     ], 2));
   }
-}), Se = /* @__PURE__ */ ue(he, [["__scopeId", "data-v-44221b16"]]);
+}), Ee = /* @__PURE__ */ ye(qe, [["__scopeId", "data-v-5c6648f7"]]);
 export {
-  Se as default
+  Ee as default
 };