energy-components 1.10.0-beta.0 → 1.10.0

package/dist/components/textField.es.js

@@ -1,13 +1,24 @@
-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-YXBqzlJN.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 = {
+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 = {
   key: 0,
   class: "rds-e-textfield__icon rds-e-textfield__icon--right"
-}, pe = { class: "rds-e-textfield__helper" }, me = /* @__PURE__ */ ee({
+}, me = {
+  key: 0,
+  class: "rds-e-textfield__helper"
+}, ve = /* @__PURE__ */ te({
   __name: "text-field",
   props: {
+    /**
+     * Hace que el campo ocupe todo el ancho disponible del contenedor padre (elimina min-width).
+     * ⚠️ Solo recomendado para contenedores muy pequeños.
+     */
+    fullWidth: {
+      type: Boolean,
+      default: !1
+    },
     /**
      * Etiqueta que se muestra sobre el campo de entrada. y Placeholder
      */
@@ -137,7 +148,7 @@ import './style/textField.css';const ie = { class: "rds-e-textfield__container"
   },
   emits: ["update:modelValue", "keydown", "keyup", "keypress", "change"],
   setup(t, { expose: r, emit: s }) {
-    const n = t, i = s, {
+    const a = t, i = s, {
       type: v,
       label: D,
       disabled: h,
@@ -148,13 +159,14 @@ import './style/textField.css';const ie = { class: "rds-e-textfield__container"
       rightIcon: q,
       helper: K,
       error: x,
-      helperText: z,
-      clearable: A,
+      helperText: W,
+      clearable: z,
       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(() => {
+      autocomplete: A,
+      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 H.value;
+        return A.value;
     }), J = (e) => {
       const l = e.target;
       let _ = l.value;
@@ -162,31 +174,31 @@ import './style/textField.css';const ie = { class: "rds-e-textfield__container"
         if (l.value.trim() === "")
           _ = null;
         else {
-          const B = Number.parseFloat(l.value);
-          _ = Number.isNaN(B) ? l.value : B;
+          const T = Number.parseFloat(l.value);
+          _ = Number.isNaN(T) ? l.value : T;
         }
       else l.value === "" && u.value === null && (_ = null);
       i("update:modelValue", _);
-    }, E = () => {
+    }, B = () => {
       b.value = !1;
-    }, L = () => {
+    }, E = () => {
       b.value = !0;
     }, O = (e) => {
       i("keydown", e);
     }, Q = (e) => {
       i("keyup", e);
-    }, W = (e) => {
-      i("keypress", e);
     }, X = (e) => {
+      i("keypress", e);
+    }, Y = (e) => {
       i("change", e);
-    }, Y = d(() => {
+    }, Z = 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(() => {
+    }), ee = d(() => {
       const e = [];
-      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(() => {
+      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(() => {
       const e = {
         name: j.value,
         class: "",
@@ -216,7 +228,7 @@ import './style/textField.css';const ie = { class: "rds-e-textfield__container"
             click: () => f.value = !f.value
           }
         }
-      } : A.value ? {
+      } : z.value ? {
         left: {
           ...e
         },
@@ -230,82 +242,81 @@ import './style/textField.css';const ie = { class: "rds-e-textfield__container"
         }
       } : l;
     });
-    le(
+    ae(
       g,
       (e) => f.value = !e,
       { immediate: !0 }
     );
-    const T = (e) => {
-      const l = re.includes(e);
+    const L = (e) => {
+      const l = se.includes(e);
       return l || console.warn(`[RDSTextfield]: El icono "${e}" no es un icono válido.`), l;
     };
     return r({
       focus: () => {
-        c.value && (c.value.focus(), L());
+        c.value && (c.value.focus(), E());
       },
       blur: () => {
-        c.value && (c.value.blur(), E());
+        c.value && (c.value.blur(), B());
       }
     }), (e, l) => (p(), k("div", {
-      class: S(["rds-e-textfield", Z.value])
+      class: S(["rds-e-textfield", ee.value])
     }, [
-      m("div", ie, [
+      m("div", ue, [
         N(e.$slots, "left-icon", {}, () => [
-          a.value.left.name && T(a.value.left.name) ? (p(), I(R, $({
+          n.value.left.name && L(n.value.left.name) ? (p(), I(R, $({
             key: 0,
             class: ["rds-e-textfield__icon rds-e-textfield__icon--left", { "rds-e-textfield__icon--hidden": b.value }],
             "aria-hidden": "true"
-          }, a.value.left, ne(a.value.left.events)), null, 16, ["class"])) : y("", !0)
+          }, n.value.left, ne(n.value.left.events)), null, 16, ["class"])) : y("", !0)
         ], !0),
-        m("div", ue, [
+        m("div", de, [
           m("input", {
             id: V.value,
             ref_key: "input",
             ref: c,
             type: U.value,
             class: "rds-e-textfield__input",
-            maxlength: n.type === "number" ? void 0 : n.maxLength,
-            minlength: n.type === "number" ? void 0 : n.minLength,
+            maxlength: a.type === "number" ? void 0 : a.maxLength,
+            minlength: a.type === "number" ? void 0 : a.minLength,
             disabled: o(h),
-            value: n.modelValue === null ? "" : n.modelValue,
+            value: a.modelValue === null ? "" : a.modelValue,
             autocomplete: G.value,
             readonly: t.readonly,
             onInput: J,
-            onBlur: E,
-            onFocus: L,
+            onBlur: B,
+            onFocus: E,
             onKeydown: O,
             onKeyup: Q,
-            onKeypress: W,
-            onChange: X
-          }, null, 40, de),
+            onKeypress: X,
+            onChange: Y
+          }, null, 40, ce),
           m("label", {
             for: V.value,
             class: S(["rds-e-textfield__label", o(h) ? "rds-e-textfield__label--disabled" : ""])
-          }, C(o(D)), 11, ce)
+          }, C(o(D)), 11, fe)
         ]),
-        a.value.right.name || e.$slots["right-icon"] ? (p(), k("span", fe, [
+        n.value.right.name || e.$slots["right-icon"] ? (p(), k("span", pe, [
           N(e.$slots, "right-icon", {}, () => [
-            a.value.right.name && T(a.value.right.name) ? (p(), I(R, $({
+            n.value.right.name && L(n.value.right.name) ? (p(), I(R, $({
               key: 0,
               "aria-hidden": "true",
               class: "rds-e-textfield__icon rds-e-textfield__icon--right"
-            }, a.value.right, {
-              onClick: ae(a.value.right.events.click, ["stop"])
+            }, n.value.right, {
+              onClick: oe(n.value.right.events.click, ["stop"])
             }), null, 16, ["onClick"])) : y("", !0)
           ], !0)
         ])) : y("", !0)
       ]),
-      m("div", pe, [
+      (o(K) || o(x)) && !o(h) ? (p(), k("div", me, [
         N(e.$slots, "helper-text", {}, () => [
-          (o(K) || o(x)) && !o(h) ? (p(), k("span", {
-            key: 0,
+          m("span", {
             class: S(o(x) ? "rds-e-textfield__helper--error" : "")
-          }, C(o(z)), 3)) : y("", !0)
+          }, C(o(W)), 3)
         ], !0)
-      ])
+      ])) : y("", !0)
     ], 2));
   }
-}), ye = /* @__PURE__ */ se(me, [["__scopeId", "data-v-a6ab314d"]]);
+}), xe = /* @__PURE__ */ ie(ve, [["__scopeId", "data-v-3d4a237a"]]);
 export {
-  ye as default
+  xe as default
 };