energy-components 2.6.0 → 2.7.0

package/dist/components/dragAndDrop.es.js

@@ -1,11 +1,11 @@
-import { defineComponent as W, ref as _, computed as u, openBlock as b, createElementBlock as x, withModifiers as c, normalizeClass as k, createElementVNode as o, renderSlot as q, createVNode as L, toDisplayString as D, createCommentVNode as M } from "vue";
-import { g as z } from "./getInstance-GhoEcxLF.js";
-import { R as A } from "./icon-svg-CW3eQRcp.js";
-import { _ as U } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-import './style/dragAndDrop.css';const V = ["id", "accept", "multiple", "disabled"], O = ["for"], P = { class: "rds-e-drag-and-drop__icon-wrapper" }, j = { class: "rds-e-drag-and-drop__text-container" }, G = { class: "rds-e-drag-and-drop__text" }, H = {
+import { defineComponent as q, ref as x, computed as i, openBlock as y, createElementBlock as D, withModifiers as c, withKeys as w, normalizeClass as M, createElementVNode as o, renderSlot as z, createVNode as U, toDisplayString as g, createCommentVNode as V } from "vue";
+import { g as K } from "./getInstance-GhoEcxLF.js";
+import { R as O } from "./icon-svg-CW3eQRcp.js";
+import { _ as P } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+import './style/dragAndDrop.css';const j = ["tabindex", "aria-disabled", "aria-label"], G = ["id", "accept", "multiple", "disabled"], H = ["for"], J = { class: "rds-e-drag-and-drop__icon-wrapper" }, Q = { class: "rds-e-drag-and-drop__icon-wrapper-text" }, X = { class: "rds-e-drag-and-drop__text-container" }, Y = { class: "rds-e-drag-and-drop__text" }, Z = {
   key: 0,
   class: "rds-e-drag-and-drop__detail"
-}, J = /* @__PURE__ */ W({
+}, ee = /* @__PURE__ */ q({
   __name: "drag-and-drop",
   props: {
     /**
@@ -22,6 +22,13 @@ import './style/dragAndDrop.css';const V = ["id", "accept", "multiple", "disable
       type: String,
       default: ""
     },
+    /**
+     * Texto que se muestra en el botón para dispositivos móviles.
+     */
+    mobileButtonText: {
+      type: String,
+      default: "Añade tu archivo"
+    },
     /**
      * Indica si el componente está deshabilitado.
      */
@@ -95,78 +102,88 @@ import './style/dragAndDrop.css';const V = ["id", "accept", "multiple", "disable
     }
   },
   emits: ["filesSelected", "validationError", "fileReady"],
-  setup(r, { emit: y }) {
-    const t = r, f = y;
-    let S = 0;
-    const C = () => `rds-dd-file-${S++}`, n = _(null), i = _(!1), w = z(), g = u(() => t.id || `rds-drag-drop-${w}`), F = u(() => [
+  setup(r, { emit: S }) {
+    const e = r, p = S;
+    let T = 0;
+    const C = () => `rds-dd-file-${T++}`, n = x(null), u = x(!1), F = K(), m = i(() => e.id || `rds-drag-drop-${F}`), B = i(() => [
       "rds-e-drag-and-drop",
       {
-        "rds-e-drag-and-drop--dragging": i.value && !t.disabled,
-        "rds-e-drag-and-drop--disabled": t.disabled,
-        "rds-e-drag-and-drop--full-width": t.fullWidth,
-        "rds-e-drag-and-drop--error": t.error && !t.disabled
+        "rds-e-drag-and-drop--dragging": u.value && !e.disabled,
+        "rds-e-drag-and-drop--disabled": e.disabled,
+        "rds-e-drag-and-drop--full-width": e.fullWidth,
+        "rds-e-drag-and-drop--error": e.error && !e.disabled
       }
-    ]), m = u(() => t.error && t.errorMessage ? t.errorMessage : t.detailText), I = u(() => t.showDetailText && (m.value || !t.error)), T = (e) => {
-      if (!e || e.length === 0)
+    ]), I = i(() => e.disabled ? -1 : 0), E = i(() => e.label || e.mobileButtonText || "Añade tu archivo"), v = i(() => e.error && e.errorMessage ? e.errorMessage : e.detailText), $ = i(() => e.showDetailText && (v.value || !e.error)), A = (a) => {
+      if (!a || a.length === 0)
         return { valid: !1, message: "No se seleccionaron archivos." };
-      if (!t.multiple && e.length > 1)
+      if (!e.multiple && a.length > 1)
         return { valid: !1, message: "Solo se permite seleccionar un archivo." };
-      if (t.maxFiles !== null && t.maxFiles > 0 && e.length > t.maxFiles)
-        return { valid: !1, message: `Se permite un máximo de ${t.maxFiles} archivos por selección.` };
-      if (t.accept) {
-        const a = t.accept.split(",").map((l) => l.trim().toLowerCase());
-        for (let l = 0; l < e.length; l++) {
-          const s = e[l], p = `.${s.name.split(".").pop()?.toLowerCase()}`, h = s.type.toLowerCase();
-          if (!a.some((d) => d.startsWith(".") ? p === d : d.includes("/") ? d.endsWith("/*") ? h.startsWith(d.replace("/*", "")) : h === d : !1))
-            return { valid: !1, message: `El tipo de archivo '${s.name}' no es válido. Permitidos: ${t.accept}` };
+      if (e.maxFiles !== null && e.maxFiles > 0 && a.length > e.maxFiles)
+        return { valid: !1, message: `Se permite un máximo de ${e.maxFiles} archivos por selección.` };
+      if (e.accept) {
+        const t = e.accept.split(",").map((l) => l.trim().toLowerCase());
+        for (let l = 0; l < a.length; l++) {
+          const d = a[l], f = `.${d.name.split(".").pop()?.toLowerCase()}`, _ = d.type.toLowerCase();
+          if (!t.some((s) => s.startsWith(".") ? f === s : s.includes("/") ? s.endsWith("/*") ? _.startsWith(s.replace("/*", "")) : _ === s : !1))
+            return { valid: !1, message: `El tipo de archivo '${d.name}' no es válido. Permitidos: ${e.accept}` };
         }
       }
       return { valid: !0 };
-    }, v = (e) => {
-      if (t.disabled) return;
-      if (!e || e.length === 0) {
+    }, h = (a) => {
+      if (e.disabled) return;
+      if (!a || a.length === 0) {
         n.value && (n.value.value = "");
         return;
       }
-      f("filesSelected", e);
-      const a = T(e);
-      if (a.valid) {
-        for (let l = 0; l < e.length; l++) {
-          const s = e[l], p = C();
-          f("fileReady", {
-            id: p,
-            file: s,
-            name: s.name,
-            size: s.size
+      p("filesSelected", a);
+      const t = A(a);
+      if (t.valid) {
+        for (let l = 0; l < a.length; l++) {
+          const d = a[l], f = C();
+          p("fileReady", {
+            id: f,
+            file: d,
+            name: d.name,
+            size: d.size
           });
         }
         n.value && (n.value.value = "");
-      } else a.message && (f("validationError", a.message), n.value && (n.value.value = ""));
-    }, B = (e) => {
-      const a = e.target;
-      v(a.files);
-    }, E = () => {
-      t.disabled || (i.value = !0);
-    }, $ = (e) => {
-      t.disabled || (e.preventDefault(), i.value = !0);
-    }, R = (e) => {
-      const a = e.relatedTarget;
-      (!e.currentTarget || !e.currentTarget.contains(a)) && (i.value = !1);
-    }, N = (e) => {
-      if (t.disabled) return;
-      i.value = !1;
-      const a = e.dataTransfer?.files;
-      v(a || null);
+      } else t.message && (p("validationError", t.message), n.value && (n.value.value = ""));
+    }, R = (a) => {
+      const t = a.target;
+      h(t.files);
+    }, b = (a) => {
+      a.preventDefault(), e.disabled || n.value?.click();
+    }, k = () => {
+      e.disabled || (u.value = !0);
+    }, L = (a) => {
+      e.disabled || (a.preventDefault(), u.value = !0);
+    }, N = (a) => {
+      const t = a.relatedTarget;
+      (!a.currentTarget || !a.currentTarget.contains(t)) && (u.value = !1);
+    }, W = (a) => {
+      if (e.disabled) return;
+      u.value = !1;
+      const t = a.dataTransfer?.files;
+      h(t || null);
     };
-    return (e, a) => (b(), x("div", {
-      class: k(F.value),
-      onDragenter: c(E, ["prevent"]),
-      onDragover: c($, ["prevent"]),
-      onDragleave: c(R, ["prevent"]),
-      onDrop: c(N, ["prevent"])
+    return (a, t) => (y(), D("div", {
+      class: M(B.value),
+      tabindex: I.value,
+      role: "button",
+      "aria-disabled": r.disabled ? "true" : "false",
+      "aria-label": E.value,
+      onKeydown: [
+        w(b, ["enter"]),
+        w(b, ["space"])
+      ],
+      onDragenter: c(k, ["prevent"]),
+      onDragover: c(L, ["prevent"]),
+      onDragleave: c(N, ["prevent"]),
+      onDrop: c(W, ["prevent"])
     }, [
       o("input", {
-        id: g.value,
+        id: m.value,
         ref_key: "fileInputRef",
         ref: n,
         type: "file",
@@ -174,29 +191,30 @@ import './style/dragAndDrop.css';const V = ["id", "accept", "multiple", "disable
         accept: r.accept,
         multiple: r.multiple,
         disabled: r.disabled,
-        onChange: B
-      }, null, 40, V),
+        onChange: R
+      }, null, 40, G),
       o("label", {
-        for: g.value,
+        for: m.value,
         class: "rds-e-drag-and-drop__label"
       }, [
-        q(e.$slots, "content", {}, () => [
-          o("span", P, [
-            L(A, {
+        z(a.$slots, "content", {}, () => [
+          o("span", J, [
+            U(O, {
               name: r.icon,
               class: "rds-e-drag-and-drop__icon",
               "aria-hidden": "true"
-            }, null, 8, ["name"])
+            }, null, 8, ["name"]),
+            o("p", Q, g(r.mobileButtonText), 1)
           ]),
-          o("div", j, [
-            o("span", G, D(r.label), 1),
-            I.value ? (b(), x("span", H, D(m.value), 1)) : M("", !0)
+          o("div", X, [
+            o("span", Y, g(r.label), 1),
+            $.value ? (y(), D("span", Z, g(v.value), 1)) : V("", !0)
           ])
         ], !0)
-      ], 8, O)
-    ], 34));
+      ], 8, H)
+    ], 42, j));
   }
-}), ee = /* @__PURE__ */ U(J, [["__scopeId", "data-v-3928ef06"]]);
+}), de = /* @__PURE__ */ P(ee, [["__scopeId", "data-v-9dade050"]]);
 export {
-  ee as default
+  de as default
 };