energy-components 2.5.1 → 2.6.0

package/dist/components/textField.es.js

@@ -1,4 +1,4 @@
-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 { defineComponent as de, ref as y, useSlots as ce, computed as i, watch as L, onMounted as fe, onBeforeUnmount as pe, openBlock as o, createElementBlock as h, normalizeClass as _, 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";
@@ -6,10 +6,10 @@ 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 = {
+}, xe = ["data-value"], _e = ["id", "type", "maxlength", "minlength", "disabled", "value", "autocomplete", "readonly", "tabindex", "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 = {
+}, Se = ["for"], we = {
   key: 1,
   class: "rds-e-textfield__icon rds-e-textfield__icon--right"
 }, ke = ["aria-label"], Ve = {
@@ -82,12 +82,30 @@ import './style/textField.css';const he = { class: "rds-e-textfield__input-conta
       default: !1
     },
     /**
-     * Indica si el campo de entrada es de solo lectura o no.
+     * Estado semántico de solo lectura. Añade el atributo HTML `readonly` al input, lo que
+     * impide la edición y lo anuncia a los lectores de pantalla como "solo lectura".
+     *
+     * **No cambia el aspecto visual del campo.** Si además se necesita el estilo visual
+     * (fondo gris, sin iconos, cursor texto), activa también `readonlyStyle`.
+     * Ambas props son independientes y pueden usarse juntas o por separado.
      */
     readonly: {
       type: Boolean,
       default: !1
     },
+    /**
+     * Estilo visual de solo lectura: fondo gris, borde por defecto, cursor texto y sin iconos
+     * ni elementos accionables. El campo parece no editable visualmente.
+     *
+     * **No añade el atributo HTML `readonly`** ni semántica de accesibilidad.
+     * Para bloquear la edición funcionalmente y anunciarlo a lectores de pantalla,
+     * activa también `:readonly="true"`.
+     * Ambas props son independientes y pueden usarse juntas o por separado.
+     */
+    readonlyStyle: {
+      type: Boolean,
+      default: !1
+    },
     /**
      * Número máximo de caracteres permitidos en el campo de entrada.
      * Si no se especifica, el componente no establecerá atributo maxlength (sin límite impuesto por la librería).
@@ -96,7 +114,7 @@ import './style/textField.css';const he = { class: "rds-e-textfield__input-conta
     maxLength: {
       type: Number,
       required: !1,
-      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
+      validator: (n) => n == null ? !0 : typeof n != "number" || Number.isNaN(n) ? (console.info("El valor de maxLength debe ser un número"), !1) : n < 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.
@@ -105,7 +123,7 @@ import './style/textField.css';const he = { class: "rds-e-textfield__input-conta
     minLength: {
       type: Number,
       required: !1,
-      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
+      validator: (n) => n == null ? !0 : typeof n != "number" || Number.isNaN(n) ? (console.info("El valor de minLength debe ser un número"), !1) : n < 0 ? (console.info("El valor de minLength no puede ser menor a 0"), !1) : !0
     },
     /**
      * Tipo del input HTML. Por defecto 'text'.
@@ -114,9 +132,9 @@ import './style/textField.css';const he = { class: "rds-e-textfield__input-conta
     type: {
       type: String,
       default: "text",
-      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;
+      validator: (n) => {
+        const c = ["text", "number", "password", "email", "tel", "url"], f = c.includes(n);
+        return f || console.warn(`[RDSTextfield]: El valor de la prop 'type' debe ser uno de: ${c.join(", ")}. Valor recibido: ${n}`), f;
       }
     },
     /**
@@ -192,9 +210,9 @@ import './style/textField.css';const he = { class: "rds-e-textfield__input-conta
     autocomplete: {
       type: String,
       default: "off",
-      validator: (i, c) => {
+      validator: (n, 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;
+        return (c.password || c.type === "password") && !f.includes(n) ? (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 */
@@ -243,6 +261,11 @@ import './style/textField.css';const he = { class: "rds-e-textfield__input-conta
       type: Boolean,
       required: !1
     },
+    /** Índice de tabulación del input nativo. */
+    inputTabindex: {
+      type: [String, Number],
+      required: !1
+    },
     /** Control de capitalización automática del navegador en inputs text. */
     autocapitalize: {
       type: String,
@@ -250,17 +273,17 @@ import './style/textField.css';const he = { class: "rds-e-textfield__input-conta
     }
   },
   emits: ["update:modelValue", "clear", "keydown", "keyup", "keypress", "change"],
-  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 = () => {
+  setup(n, { expose: c, emit: f }) {
+    const e = n, p = f, a = y(null), m = y(!1), u = y(!1), S = y(!1), w = y(!1), J = me(), x = y(""), r = y(!1), $ = ce(), B = i(() => !!e.prefix || !!$.prefix), T = i(() => !!e.suffix || !!$.suffix), C = () => {
       if (a.value)
         if (e.type === "number") {
           const t = a.value, l = t.value !== "" || t.selectionStart !== null && t.selectionStart > 0 || t.validity.badInput;
-          n.value = l;
+          r.value = l;
         } else
-          n.value = a.value.value !== "";
+          r.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(() => {
+      !e.disabled && !e.readonly && !e.readonlyStyle && a.value && a.value.focus();
+    }, I = i(() => e.id !== void 0 && e.id !== null ? String(e.id) : `text-field-${J}`), D = i(() => e.helper || e.error ? `${I.value}-helper` : void 0), v = i(() => e.password || e.type === "password"), X = i(() => v.value ? m.value ? "text" : "password" : ["text", "number", "password", "email", "tel", "url"].includes(e.type) ? e.type : "text"), Y = i(() => e.autocomplete), Z = i(() => {
       const t = e.modelValue === null || e.modelValue === void 0 ? "" : String(e.modelValue);
       return v.value && !m.value ? "•".repeat(t.length) : t;
     }), ee = (t) => {
@@ -268,9 +291,9 @@ import './style/textField.css';const he = { class: "rds-e-textfield__input-conta
       let k = l.value;
       if (e.type === "number") {
         const V = l.value !== "" || l.selectionStart !== null && l.selectionStart > 0 || l.validity.badInput;
-        n.value = V;
+        r.value = V;
       } else
-        n.value = l.value !== "";
+        r.value = l.value !== "";
       if (e.type === "number") {
         if (l.value.trim() === "")
           k = null;
@@ -278,37 +301,37 @@ import './style/textField.css';const he = { class: "rds-e-textfield__input-conta
           const V = Number.parseFloat(l.value);
           k = Number.isNaN(V) ? l.value : V;
         }
-        j === "" && !l.validity.badInput && (n.value = !1);
+        j === "" && !l.validity.badInput && (r.value = !1);
       } else l.value === "" && e.modelValue === null && (k = null);
       p("update:modelValue", k), C();
     }, te = () => {
-      S.value = !0;
+      w.value = !0;
     }, R = () => {
       const t = a.value?.value.trim() || "";
-      n.value = t !== "", u.value = !1, w.value = !1, S.value = !1, t === "" && (_.value = ""), C();
+      r.value = t !== "", u.value = !1, S.value = !1, w.value = !1, t === "" && (x.value = ""), C();
     }, z = () => {
-      u.value = !0, w.value = !S.value, S.value = !1;
+      u.value = !0, S.value = !w.value, w.value = !1;
     }, le = (t) => {
       p("keydown", t);
     }, ae = (t) => {
       p("keyup", t);
-    }, ie = (t) => {
+    }, ne = (t) => {
       p("keypress", t);
-    }, oe = (t) => {
+    }, ie = (t) => {
       p("change", t);
-    }, ne = o(() => {
+    }, re = i(() => {
       const t = [];
-      _.value && t.push(_.value);
+      x.value && t.push(x.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(" ");
+      return (B.value || T.value || l || r.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"), e.readonlyStyle && t.push("rds-e-textfield--readonly-style"), t.join(" ");
     });
     L(
       () => e.modelValue,
       (t) => {
-        t !== null && String(t).length > 0 && (_.value = ""), (t === "" || t === null) && !u.value && (n.value = !1);
+        t !== null && String(t).length > 0 && (x.value = ""), (t === "" || t === null) && !u.value && (r.value = !1);
       }
     );
-    const s = o(() => {
+    const s = i(() => {
       const t = {
         name: e.icon,
         class: "",
@@ -349,7 +372,7 @@ import './style/textField.css';const he = { class: "rds-e-textfield__input-conta
     }, K = (t) => {
       const l = a.value;
       if (!l) return;
-      l.matches(":-webkit-autofill") && t.animationName.startsWith("onAutoFillStart") && l.value.trim().length > 0 && (_.value = "rds-e-textfield--filled", n.value = !0);
+      l.matches(":-webkit-autofill") && t.animationName.startsWith("onAutoFillStart") && l.value.trim().length > 0 && (x.value = "rds-e-textfield--filled", r.value = !0);
     };
     fe(() => {
       a.value && (a.value.addEventListener("animationstart", K), C());
@@ -363,54 +386,54 @@ import './style/textField.css';const he = { class: "rds-e-textfield__input-conta
         a.value && (a.value.blur(), R());
       }
     });
-    const re = () => {
+    const oe = () => {
       m.value = !m.value;
     }, se = () => {
       const t = e.type === "number";
-      p("update:modelValue", t ? null : ""), a.value && (a.value.value = ""), u.value = !1, n.value = !1, a.value && a.value.blur(), p("clear");
+      p("update:modelValue", t ? null : ""), a.value && (a.value.value = ""), u.value = !1, r.value = !1, a.value && a.value.blur(), p("clear");
     }, M = (t) => {
       (t.key === "Enter" || t.key === " ") && t.currentTarget?.click();
-    }, ue = o(() => m.value ? "Ocultar contraseña" : "Mostrar contraseña");
+    }, ue = i(() => 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) => (r(), h("div", {
-      class: x(["rds-e-textfield", ne.value])
+    ), (t, l) => (o(), h("div", {
+      class: _(["rds-e-textfield", re.value])
     }, [
       g("div", {
-        class: x(["rds-e-textfield__container", {
-          "rds-e-textfield__container--keyboard-focus": w.value,
-          "rds-e-textfield__container--active": u.value && !w.value
+        class: _(["rds-e-textfield__container", {
+          "rds-e-textfield__container--keyboard-focus": S.value,
+          "rds-e-textfield__container--active": u.value && !S.value
         }]),
         onMousedown: te
       }, [
-        B.value ? d("", !0) : b(t.$slots, "left-icon", { key: 0 }, () => [
-          e.loading ? (r(), E(G, {
+        !B.value && !e.readonlyStyle ? b(t.$slots, "left-icon", { key: 0 }, () => [
+          e.loading ? (o(), E(G, {
             key: 0,
             name: "loading",
             class: "rds-e-textfield__icon--loading"
           })) : d("", !0),
-          s.value.left.name && A(s.value.left.name) && !i.loading ? (r(), E(G, O({
+          s.value.left.name && A(s.value.left.name) && !n.loading ? (o(), E(G, O({
             key: 1,
             class: ["rds-e-textfield__icon rds-e-textfield__icon--left", { "rds-e-textfield__icon--hidden": u.value }],
             "aria-hidden": "true"
           }, s.value.left, U(s.value.left.events)), null, 16, ["class"])) : d("", !0)
-        ], !0),
+        ], !0) : d("", !0),
         g("div", he, [
           g("div", {
             class: "rds-e-textfield__input-wrapper",
             onClick: Q
           }, [
-            B.value ? (r(), h("span", ge, [
+            B.value ? (o(), 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 }]),
+              class: _(["rds-e-textfield__input-sizer", { "rds-e-textfield__input-sizer--grow": !T.value }]),
               "data-value": Z.value
             }, [
               g("input", {
@@ -425,6 +448,7 @@ import './style/textField.css';const he = { class: "rds-e-textfield__input-conta
                 value: e.modelValue === null ? "" : e.modelValue,
                 autocomplete: Y.value,
                 readonly: e.readonly,
+                tabindex: e.inputTabindex,
                 name: e.name,
                 required: e.required,
                 inputmode: e.inputmode,
@@ -442,11 +466,11 @@ import './style/textField.css';const he = { class: "rds-e-textfield__input-conta
                 onFocus: z,
                 onKeydown: le,
                 onKeyup: ae,
-                onKeypress: ie,
-                onChange: oe
-              }, null, 40, xe)
-            ], 10, _e),
-            T.value ? (r(), h("span", be, [
+                onKeypress: ne,
+                onChange: ie
+              }, null, 40, _e)
+            ], 10, xe),
+            T.value ? (o(), h("span", be, [
               b(t.$slots, "suffix", {}, () => [
                 W(N(e.suffix), 1)
               ], !0)
@@ -454,17 +478,17 @@ import './style/textField.css';const he = { class: "rds-e-textfield__input-conta
           ]),
           g("label", {
             for: I.value,
-            class: x(["rds-e-textfield__label", e.disabled ? "rds-e-textfield__label--disabled" : ""])
-          }, N(e.label), 11, we)
+            class: _(["rds-e-textfield__label", e.disabled ? "rds-e-textfield__label--disabled" : ""])
+          }, N(e.label), 11, Se)
         ]),
-        v.value && e.toggleVisibility || e.clearable || s.value.right.name || t.$slots["right-icon"] ? (r(), h("span", Se, [
+        !e.readonlyStyle && (v.value && e.toggleVisibility || e.clearable || s.value.right.name || t.$slots["right-icon"]) ? (o(), h("span", we, [
           b(t.$slots, "right-icon", {}, () => [
-            v.value && e.toggleVisibility ? (r(), h("button", {
+            v.value && e.toggleVisibility ? (o(), h("button", {
               key: 0,
               type: "button",
               class: "rds-e-textfield__icon rds-e-textfield__icon--right rds-e-textfield__icon--password",
               "aria-label": ue.value,
-              onClick: q(re, ["stop"]),
+              onClick: q(oe, ["stop"]),
               onKeydown: q(M, ["stop", "prevent"])
             }, [
               H(F, {
@@ -472,7 +496,7 @@ import './style/textField.css';const he = { class: "rds-e-textfield__input-conta
                 variant: "ghost",
                 small: ""
               }, null, 8, ["icon"])
-            ], 40, ke)) : e.clearable ? (r(), h("button", {
+            ], 40, ke)) : e.clearable ? (o(), h("button", {
               key: 1,
               type: "button",
               class: "rds-e-textfield__icon rds-e-textfield__icon--right rds-e-textfield__icon--clear",
@@ -485,7 +509,7 @@ import './style/textField.css';const he = { class: "rds-e-textfield__input-conta
                 variant: "ghost",
                 small: ""
               })
-            ], 32)) : s.value.right.name && A(s.value.right.name) ? (r(), E(F, O({
+            ], 32)) : s.value.right.name && A(s.value.right.name) ? (o(), E(F, O({
               key: 2,
               icon: s.value.right.name,
               variant: "ghost",
@@ -494,17 +518,17 @@ import './style/textField.css';const he = { class: "rds-e-textfield__input-conta
           ], !0)
         ])) : d("", !0)
       ], 34),
-      e.helper || e.error ? (r(), h("div", Ve, [
+      e.helper || e.error ? (o(), h("div", Ve, [
         b(t.$slots, "helper-text", {}, () => [
           g("span", {
             id: D.value,
-            class: x(e.error ? "rds-e-textfield__helper--error" : "")
+            class: _(e.error ? "rds-e-textfield__helper--error" : "")
           }, N(e.helperText), 11, Ne)
         ], !0)
       ])) : d("", !0)
     ], 2));
   }
-}), Ee = /* @__PURE__ */ ye(qe, [["__scopeId", "data-v-5c6648f7"]]);
+}), Ee = /* @__PURE__ */ ye(qe, [["__scopeId", "data-v-193ba6dd"]]);
 export {
   Ee as default
 };