energy-components 1.8.1 → 1.10.0-beta.0

package/dist/components/dropdown.es.js

@@ -1,21 +1,21 @@
-import { defineComponent as ne, mergeModels as K, toRefs as de, useModel as ie, ref as S, computed as p, provide as T, onMounted as ue, nextTick as F, onBeforeUnmount as ce, createElementBlock as y, openBlock as m, createVNode as V, mergeProps as H, unref as n, withModifiers as a, createSlots as P, withCtx as d, createElementVNode as u, createCommentVNode as D, createBlock as W, renderSlot as f, Fragment as pe, toDisplayString as M, normalizeClass as me } from "vue";
-import fe from "./multiselect.es.js";
-import ve from "./checkbox.es.js";
-import { _ as be } from "./radio-group.vue_vue_type_script_setup_true_lang-DpguLlRK.js";
-import ye from "./radioButton.es.js";
+import { defineComponent as de, mergeModels as K, toRefs as ie, useModel as ue, ref as D, computed as u, provide as T, onMounted as ce, nextTick as F, onBeforeUnmount as pe, createElementBlock as y, openBlock as m, createVNode as S, mergeProps as H, unref as a, withModifiers as n, createSlots as P, withCtx as d, createElementVNode as c, createCommentVNode as V, createBlock as W, renderSlot as f, Fragment as me, toDisplayString as M, normalizeClass as fe } from "vue";
+import ve from "./multiselect.es.js";
+import be from "./checkbox.es.js";
+import { _ as ye } from "./radio-group.vue_vue_type_script_setup_true_lang-DpguLlRK.js";
+import ge from "./radioButton.es.js";
 import z from "./textField.es.js";
-import { R as ge } from "./icon-svg-_WCkLP8-.js";
-import { _ as we } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-import './style/dropdown.css';const he = { class: "rds-e-dropdown" }, ke = { class: "rds-e-dropdown__option" }, $e = { class: "rds-e-dropdown__option-container" }, Ce = { class: "rds-e-dropdown__option--prepend" }, Se = { class: "rds-e-dropdown__option--content" }, Ve = {
+import { R as we } from "./icon-svg-YXBqzlJN.js";
+import { _ as he } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+import './style/dropdown.css';const ke = { class: "rds-e-dropdown" }, $e = { class: "rds-e-dropdown__option" }, Ce = { class: "rds-e-dropdown__option-container" }, De = { class: "rds-e-dropdown__option--prepend" }, Se = { class: "rds-e-dropdown__option--content" }, Ve = {
   key: 0,
   class: "rds-e-dropdown__option-detail"
-}, De = { key: 1 }, Be = {
+}, Be = { key: 1 }, Oe = {
   key: 0,
   class: "rds-e-dropdown__option--append"
-}, Oe = { class: "rds-e-dropdown__before-list-container" }, Ae = {
+}, Ae = { class: "rds-e-dropdown__before-list-container" }, Fe = {
   key: 1,
   class: "rds-e-dropdown__before-list"
-}, Fe = { class: "rds-e-dropdown__before-list-container" }, Re = { class: "rds-e-dropdown__after-list" }, Ee = { class: "rds-e-dropdown__after-list-container" }, Le = /* @__PURE__ */ ne({
+}, Re = { class: "rds-e-dropdown__before-list-container" }, Ee = { class: "rds-e-dropdown__after-list" }, Le = { class: "rds-e-dropdown__after-list-container" }, xe = /* @__PURE__ */ de({
   __name: "dropdown",
   props: /* @__PURE__ */ K({
     /**
@@ -127,6 +127,19 @@ import './style/dropdown.css';const he = { class: "rds-e-dropdown" }, ke = { cla
       type: Boolean,
       default: !1
     },
+    /**
+     * Define la dirección de apertura del dropdown
+     * 'auto': detecta automáticamente (default)
+     * 'above': siempre se abre hacia arriba
+     * 'below': siempre se abre hacia abajo
+     */
+    openDirection: {
+      type: String,
+      default: "auto",
+      validator(o) {
+        return ["auto", "above", "below"].includes(o);
+      }
+    },
     /**
      * Muestra un campo de texto para filtrar los elementos del dropdown.
      * La propiedad `autocompleteFilter` es requerida cuando se usa esta opción.
@@ -151,24 +164,24 @@ import './style/dropdown.css';const he = { class: "rds-e-dropdown" }, ke = { cla
   }),
   emits: /* @__PURE__ */ K(["open", "close", "select", "change"], ["update:modelValue"]),
   setup(o, { expose: R, emit: G }) {
-    const r = o, h = G, {
+    const s = o, h = G, {
       disabled: k,
       limit: E,
       multiple: $,
       options: g
-    } = de(r), s = ie(o, "modelValue"), i = S([]), v = S(), b = S(), L = S(""), x = S(!1), J = () => {
+    } = ie(s), r = ue(o, "modelValue"), i = D([]), v = D(), b = D(), L = D(""), x = D(!1), J = () => {
       x.value = !0;
-    }, C = p(() => r.autocomplete && Object.keys(r.autocomplete).length > 0), Q = p(() => ({
-      id: r.autocomplete.id || `autocomplete-${r.id}`,
-      label: r.autocomplete.label || r.label,
-      icon: r.autocomplete.icon || "",
-      rightIcon: r.autocomplete.rightIcon || "",
-      disabled: r.autocomplete.disabled || !1,
-      clearable: r.autocomplete.clearable || !1,
-      error: r.autocomplete.error ?? !1,
-      helper: r.autocomplete.helper ?? "",
-      helperText: r.autocomplete.helperText ?? "",
-      readonly: r.autocomplete.readonly ?? !1
+    }, C = u(() => s.autocomplete && Object.keys(s.autocomplete).length > 0), Q = u(() => ({
+      id: s.autocomplete.id || `autocomplete-${s.id}`,
+      label: s.autocomplete.label || s.label,
+      icon: s.autocomplete.icon || "",
+      rightIcon: s.autocomplete.rightIcon || "",
+      disabled: s.autocomplete.disabled || !1,
+      clearable: s.autocomplete.clearable || !1,
+      error: s.autocomplete.error ?? !1,
+      helper: s.autocomplete.helper ?? "",
+      helperText: s.autocomplete.helperText ?? "",
+      readonly: s.autocomplete.readonly ?? !1
     }));
     T("registerDropdownFocusElement", (e) => {
       e && !i.value.includes(e) && i.value.push(e);
@@ -176,45 +189,45 @@ import './style/dropdown.css';const he = { class: "rds-e-dropdown" }, ke = { cla
       const l = i.value.findIndex((t) => t === e);
       l > -1 && i.value.splice(l, 1);
     }), T("isFocusWithinDropdown", (e) => {
-      const l = i.value.some((c) => c === e || c.contains(e)), t = e.classList && (e.classList.contains("rds-e-dropdown__before-list") || e.closest(".rds-e-dropdown__before-list") || e.classList.contains("multiselect") || e.closest(".multiselect"));
+      const l = i.value.some((p) => p === e || p.contains(e)), t = e.classList && (e.classList.contains("rds-e-dropdown__before-list") || e.closest(".rds-e-dropdown__before-list") || e.classList.contains("multiselect") || e.closest(".multiselect"));
       return l || t;
     });
-    const I = p({
-      get: () => s.value && typeof s.value == "object" && !Array.isArray(s.value) ? s.value.id : typeof s.value == "string" || typeof s.value == "number" ? s.value : null,
+    const I = u({
+      get: () => r.value && typeof r.value == "object" && !Array.isArray(r.value) ? r.value.id : typeof r.value == "string" || typeof r.value == "number" ? r.value : null,
       set: (e) => {
         const l = g.value.find((t) => typeof t == "object" ? t.id === e : t === e);
-        s.value = l || null;
+        r.value = l || null;
       }
-    }), X = p(() => (g.value ?? []).every((e) => typeof e == "object" && (e == null ? void 0 : e.id) && (e == null ? void 0 : e.label))), Y = p(() => !$.value || r.closeOnSelect), q = p({
-      get: () => s.value ? r.multiple ? Array.isArray(s.value) ? s.value.length > E.value ? r.limitText(E.value) : s.value.map((e) => typeof e == "string" ? e : e.label).join(", ") : "" : typeof s.value == "object" ? s.value.label : typeof s.value == "string" ? s.value : "" : "",
+    }), X = u(() => (g.value ?? []).every((e) => typeof e == "object" && (e == null ? void 0 : e.id) && (e == null ? void 0 : e.label))), Y = u(() => !$.value || s.closeOnSelect), q = u({
+      get: () => r.value ? s.multiple ? Array.isArray(r.value) ? r.value.length > E.value ? s.limitText(E.value) : r.value.map((e) => typeof e == "string" ? e : e.label).join(", ") : "" : typeof r.value == "object" ? r.value.label : typeof r.value == "string" ? r.value : "" : "",
       set: () => null
-    }), Z = p(() => ({
+    }), Z = u(() => ({
       "rds-e-dropdown-input": !0,
       "rds-e-dropdown--disabled": k.value,
-      "rds-e-dropdown--small": r.small
-    })), j = p(() => {
+      "rds-e-dropdown--small": s.small
+    })), ee = u(() => s.openDirection !== "auto" ? s.openDirection : ""), j = u(() => {
       const e = {};
       return X.value && Object.assign(e, {
         "track-by": "id",
         label: "label"
       }), e;
-    }), ee = p(() => C.value && r.autocomplete.autocompleteFilter ? g.value.filter((e) => r.autocomplete.autocompleteFilter(e, L.value)) : g.value), B = (e) => {
-      if (s.value === e) return !0;
-      if (Array.isArray(s.value)) {
-        if (typeof e == "string") return s.value.includes(e);
+    }), le = u(() => C.value && s.autocomplete.autocompleteFilter ? g.value.filter((e) => s.autocomplete.autocompleteFilter(e, L.value)) : g.value), B = (e) => {
+      if (r.value === e) return !0;
+      if (Array.isArray(r.value)) {
+        if (typeof e == "string") return r.value.includes(e);
         if (j.value.label)
-          return s.value.some((l) => l.id === e.id);
+          return r.value.some((l) => l.id === e.id);
       }
       return !1;
-    }, le = (e) => {
-      h("open", e);
     }, te = (e) => {
-      h("close", e);
+      h("open", e);
     }, oe = (e) => {
+      h("close", e);
+    }, se = (e) => {
       F(() => {
         h("select", e);
       });
-    }, se = () => {
+    }, re = () => {
       F(() => {
         if ($.value) {
           const e = g.value.filter(
@@ -234,7 +247,7 @@ import './style/dropdown.css';const he = { class: "rds-e-dropdown" }, ke = { cla
       v.value.activate();
     }, U = () => {
       v.value.deactivate();
-    }, re = () => {
+    }, ne = () => {
       v.value.toggle();
     }, ae = () => {
       C.value && b.value && (J(), O(), F(() => {
@@ -242,10 +255,10 @@ import './style/dropdown.css';const he = { class: "rds-e-dropdown" }, ke = { cla
       }));
     }, _ = (e) => {
       if (!x.value) return;
-      const l = e.target, t = !v.value.$el.contains(l), c = b.value && !b.value.$el.contains(l) && !l.closest(".rds-e-dropdown__before-list");
-      t && c && (x.value = !1, U());
+      const l = e.target, t = !v.value.$el.contains(l), p = b.value && !b.value.$el.contains(l) && !l.closest(".rds-e-dropdown__before-list");
+      t && p && (x.value = !1, U());
     };
-    return ue(() => {
+    return ce(() => {
       var e;
       (e = v.value) != null && e.$el && i.value.push(v.value.$el), F(() => {
         var l;
@@ -255,7 +268,7 @@ import './style/dropdown.css';const he = { class: "rds-e-dropdown" }, ke = { cla
           t && !i.value.includes(t) && i.value.push(t);
         }
       }), document.addEventListener("click", _);
-    }), ce(() => {
+    }), pe(() => {
       i.value = [], document.removeEventListener("click", _);
     }), R({
       /**
@@ -266,57 +279,57 @@ import './style/dropdown.css';const he = { class: "rds-e-dropdown" }, ke = { cla
        * Cierra el dropdown
        */
       deactivate: U
-    }), (e, l) => (m(), y("div", he, [
-      V(fe, H({
+    }), (e, l) => (m(), y("div", ke, [
+      S(ve, H({
         ref_key: "multiselect",
         ref: v,
-        modelValue: s.value,
-        "onUpdate:modelValue": l[13] || (l[13] = (t) => s.value = t),
+        modelValue: r.value,
+        "onUpdate:modelValue": l[13] || (l[13] = (t) => r.value = t),
         class: Z.value,
-        options: ee.value,
+        options: le.value,
         "close-on-select": Y.value,
         "show-labels": !1,
-        disabled: n(k),
-        multiple: n($),
+        disabled: a(k),
+        multiple: a($),
         "max-height": o.maxHeight,
         searchable: !1,
         small: o.small,
-        "open-direction": "bottom",
-        limit: n(E),
+        "open-direction": ee.value,
+        limit: a(E),
         "limit-text": o.limitText
       }, j.value, {
         "append-to-body": o.appendToBody,
-        onOpen: le,
-        onClose: te,
-        onSelect: oe,
-        "onUpdate:modelValue": se,
-        onFocus: l[14] || (l[14] = a(() => O(), ["prevent"])),
-        onBlur: a(() => null, ["prevent"])
+        onOpen: te,
+        onClose: oe,
+        onSelect: se,
+        "onUpdate:modelValue": re,
+        onFocus: l[14] || (l[14] = n(() => O(), ["prevent"])),
+        onBlur: n(() => null, ["prevent"])
       }), P({
         selection: d(({ isOpen: t }) => [
-          V(n(z), {
+          S(a(z), {
             id: `multiselect-dropdown-${o.id}`,
             modelValue: q.value,
-            "onUpdate:modelValue": l[1] || (l[1] = (c) => q.value = c),
+            "onUpdate:modelValue": l[1] || (l[1] = (p) => q.value = p),
             class: "rds-e-dropdown__input",
-            disabled: n(k),
+            disabled: a(k),
             label: o.label,
             error: o.error,
             helper: o.helper,
             "helper-text": o.helperText,
             readonly: "",
-            onClick: a((c) => t ? null : O(), ["prevent", "stop"])
+            onClick: n((p) => t ? null : O(), ["prevent", "stop"])
           }, P({
             "right-icon": d(() => [
-              V(n(ge), {
+              S(a(we), {
                 name: "arrow_down",
                 "aria-hidden": "true",
-                class: me(["rds-e-dropdown__input-caret", {
+                class: fe(["rds-e-dropdown__input-caret", {
                   "rds-e-dropdown__input-caret--open": t
                 }]),
-                onClick: l[0] || (l[0] = a(() => {
+                onClick: l[0] || (l[0] = n(() => {
                 }, ["self", "stop"])),
-                onMousedown: a(re, ["self", "prevent", "stop"])
+                onMousedown: n(ne, ["self", "prevent", "stop"])
               }, null, 8, ["class"])
             ]),
             _: 2
@@ -331,57 +344,57 @@ import './style/dropdown.css';const he = { class: "rds-e-dropdown" }, ke = { cla
           ]), 1032, ["id", "modelValue", "disabled", "label", "error", "helper", "helper-text", "onClick"])
         ]),
         placeholder: d(() => [
-          l[15] || (l[15] = u("span", null, null, -1))
+          l[15] || (l[15] = c("span", null, null, -1))
         ]),
-        option: d(({ option: t, search: c, index: A }) => [
-          u("div", ke, [
-            u("div", $e, [
-              u("div", Ce, [
-                n($) ? (m(), W(n(ve), {
+        option: d(({ option: t, search: p, index: A }) => [
+          c("div", $e, [
+            c("div", Ce, [
+              c("div", De, [
+                a($) ? (m(), W(a(be), {
                   key: 0,
                   id: `${A}-${t.id}`,
                   small: o.small,
                   "is-checked": B(t),
-                  disabled: n(k) || (t == null ? void 0 : t.$isDisabled) || !1,
-                  onClick: a((w) => N(t), ["prevent", "stop"])
-                }, null, 8, ["id", "small", "is-checked", "disabled", "onClick"])) : !n($) && o.showRadio ? (m(), W(n(be), {
+                  disabled: a(k) || (t == null ? void 0 : t.$isDisabled) || !1,
+                  onClick: n((w) => N(t), ["prevent", "stop"])
+                }, null, 8, ["id", "small", "is-checked", "disabled", "onClick"])) : !a($) && o.showRadio ? (m(), W(a(ye), {
                   key: 1,
                   modelValue: I.value,
                   "onUpdate:modelValue": l[2] || (l[2] = (w) => I.value = w),
                   "group-name": `group-${o.id}`
                 }, {
                   default: d(() => [
-                    V(n(ye), {
+                    S(a(ge), {
                       id: `${A}-${typeof t == "object" ? t.id : A}`,
                       small: o.small,
                       option: typeof t == "object" ? t.id : t,
                       checked: B(t),
-                      disabled: n(k) || (t == null ? void 0 : t.$isDisabled) || !1,
-                      onClick: a((w) => N(t), ["prevent", "stop"])
+                      disabled: a(k) || (t == null ? void 0 : t.$isDisabled) || !1,
+                      onClick: n((w) => N(t), ["prevent", "stop"])
                     }, null, 8, ["id", "small", "option", "checked", "disabled", "onClick"])
                   ]),
                   _: 2
-                }, 1032, ["modelValue", "group-name"])) : D("", !0)
+                }, 1032, ["modelValue", "group-name"])) : V("", !0)
               ]),
-              u("div", Se, [
+              c("div", Se, [
                 f(e.$slots, "singleLabel", { option: t }, () => {
                   var w;
                   return [
-                    (w = j.value) != null && w.label ? (m(), y(pe, { key: 0 }, [
-                      u("span", null, M(t.label), 1),
-                      t != null && t.detail ? (m(), y("span", Ve, M(t.detail), 1)) : D("", !0)
-                    ], 64)) : (m(), y("span", De, M(t), 1))
+                    (w = j.value) != null && w.label ? (m(), y(me, { key: 0 }, [
+                      c("span", null, M(t.label), 1),
+                      t != null && t.detail ? (m(), y("span", Ve, M(t.detail), 1)) : V("", !0)
+                    ], 64)) : (m(), y("span", Be, M(t), 1))
                   ];
                 }, !0)
               ])
             ]),
-            e.$slots.optionAppend ? (m(), y("div", Be, [
+            e.$slots.optionAppend ? (m(), y("div", Oe, [
               f(e.$slots, "optionAppend", {
                 option: t,
-                search: c,
+                search: p,
                 index: A
               }, void 0, !0)
-            ])) : D("", !0)
+            ])) : V("", !0)
           ])
         ]),
         _: 2
@@ -420,59 +433,59 @@ import './style/dropdown.css';const he = { class: "rds-e-dropdown" }, ke = { cla
             C.value ? (m(), y("div", {
               key: 0,
               class: "rds-e-dropdown__before-list",
-              onMousedown: l[6] || (l[6] = a(() => {
+              onMousedown: l[6] || (l[6] = n(() => {
               }, ["stop"])),
-              onClick: a(ae, ["stop"]),
-              onBlur: l[7] || (l[7] = a(() => {
+              onClick: n(ae, ["stop"]),
+              onBlur: l[7] || (l[7] = n(() => {
               }, ["stop"])),
-              onFocus: l[8] || (l[8] = a(() => {
+              onFocus: l[8] || (l[8] = n(() => {
               }, ["stop"])),
-              onKeydown: l[9] || (l[9] = a(() => {
+              onKeydown: l[9] || (l[9] = n(() => {
               }, ["stop"])),
-              onKeyup: l[10] || (l[10] = a(() => {
+              onKeyup: l[10] || (l[10] = n(() => {
               }, ["stop"])),
-              onKeypress: l[11] || (l[11] = a(() => {
+              onKeypress: l[11] || (l[11] = n(() => {
               }, ["stop"])),
-              onChange: l[12] || (l[12] = a(() => {
+              onChange: l[12] || (l[12] = n(() => {
               }, ["stop"]))
             }, [
-              u("div", Oe, [
-                V(n(z), H({
+              c("div", Ae, [
+                S(a(z), H({
                   ref_key: "textFieldInput",
                   ref: b,
                   modelValue: L.value,
                   "onUpdate:modelValue": l[3] || (l[3] = (t) => L.value = t)
                 }, Q.value, {
-                  onMousedown: l[4] || (l[4] = a(() => {
+                  onMousedown: l[4] || (l[4] = n(() => {
                   }, ["stop", "prevent"])),
-                  onFocus: l[5] || (l[5] = a(() => {
+                  onFocus: l[5] || (l[5] = n(() => {
                   }, ["stop"]))
                 }), null, 16, ["modelValue"])
               ])
-            ], 32)) : D("", !0),
-            e.$slots.beforeList ? (m(), y("div", Ae, [
-              u("div", Fe, [
+            ], 32)) : V("", !0),
+            e.$slots.beforeList ? (m(), y("div", Fe, [
+              c("div", Re, [
                 f(e.$slots, "beforeList", {}, void 0, !0)
               ])
-            ])) : D("", !0)
+            ])) : V("", !0)
           ]),
           key: "4"
         } : void 0,
         e.$slots.afterList ? {
           name: "afterList",
           fn: d(() => [
-            u("div", Re, [
-              u("div", Ee, [
+            c("div", Ee, [
+              c("div", Le, [
                 f(e.$slots, "afterList", {}, void 0, !0)
               ])
             ])
           ]),
           key: "5"
         } : void 0
-      ]), 1040, ["modelValue", "class", "options", "close-on-select", "disabled", "multiple", "max-height", "small", "limit", "limit-text", "append-to-body"])
+      ]), 1040, ["modelValue", "class", "options", "close-on-select", "disabled", "multiple", "max-height", "small", "open-direction", "limit", "limit-text", "append-to-body"])
     ]));
   }
-}), _e = /* @__PURE__ */ we(Le, [["__scopeId", "data-v-c91ac7b6"]]);
+}), Ke = /* @__PURE__ */ he(xe, [["__scopeId", "data-v-9000f56f"]]);
 export {
-  _e as default
+  Ke as default
 };

package/dist/components/fileUploadItem.es.js

@@ -0,0 +1,182 @@
+import { defineComponent as M, ref as N, computed as c, createElementBlock as l, openBlock as o, normalizeClass as $, createElementVNode as r, renderSlot as v, createVNode as p, createCommentVNode as n, toDisplayString as m, withModifiers as I } from "vue";
+import { R as g } from "./icon-svg-YXBqzlJN.js";
+import z from "./progressBar.es.js";
+import { _ as C } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+import './style/fileUploadItem.css';const R = { class: "rds-e-file-upload-item__icon-container" }, w = { class: "rds-e-file-upload-item__details" }, E = { class: "rds-e-file-upload-item__info-wrapper" }, F = { class: "rds-e-file-upload-item__name" }, x = {
+  key: 0,
+  class: "rds-e-file-upload-item__meta"
+}, D = { class: "rds-e-file-upload-item__size" }, P = {
+  key: 0,
+  class: "rds-e-file-upload-item__time-remaining"
+}, V = {
+  key: 1,
+  class: "rds-e-file-upload-item__error-message"
+}, q = {
+  key: 0,
+  class: "rds-e-file-upload-item__progress-indicator-container"
+}, T = { class: "rds-e-file-upload-item__action" }, j = ["aria-label", "disabled"], A = /* @__PURE__ */ M({
+  __name: "file-upload-item",
+  props: {
+    /**
+     * Identificador único para el ítem de archivo (opcional, pero útil para eventos).
+     */
+    id: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Nombre del archivo a mostrar.
+     */
+    fileName: {
+      type: String,
+      required: !0
+    },
+    /**
+     * Tamaño del archivo en bytes.
+     */
+    fileSize: {
+      type: Number,
+      required: !0
+    },
+    /**
+     * Nombre del icono a mostrar para el archivo.
+     * Ver la sección 'Options > Icon' en el diseño para ejemplos.
+     * Por defecto es 'document_generic' (representando "Document final content").
+     */
+    fileIcon: {
+      type: String,
+      default: "document-final-content"
+    },
+    /**
+     * Estado actual del ítem de archivo.
+     * Determina la apariencia y elementos mostrados (ej. barra de progreso, mensaje de error).
+     * Posibles valores: 'default', 'uploading', 'error', 'disabled'.
+     */
+    status: {
+      type: String,
+      default: "default",
+      validator: (e) => ["default", "uploading", "error", "disabled"].includes(e)
+    },
+    /**
+     * Progreso de la subida (0-100). Usado por RDSProgressBar si showProgressBar es true.
+     */
+    progress: {
+      type: Number,
+      default: 0,
+      validator: (e) => e >= 0 && e <= 100
+    },
+    /**
+     * Texto que indica el tiempo restante de subida (ej. "4 second left").
+     * Solo visible si status es 'uploading'.
+     */
+    timeRemaining: {
+      type: String,
+      default: null
+    },
+    /**
+     * Mensaje de error a mostrar. Solo visible si status es 'error'.
+     * Reemplaza el campo de detalle con el contexto de error.
+     */
+    errorMessage: {
+      type: String,
+      default: null
+    },
+    /**
+     * Indica si el componente está deshabilitado.
+     * Esto aplicará estilos de deshabilitado y prevendrá interacciones.
+     */
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Define la acción disponible para el ítem.
+     * Por defecto es una acción de eliminar.
+     * Ejemplo: { type: 'delete', icon: 'delete', label: 'Eliminar archivo' }
+     */
+    action: {
+      type: Object,
+      default: () => ({ type: "delete", icon: "delete", label: "Eliminar archivo" })
+    },
+    /**
+     * Indica si se debe mostrar el componente RDSProgressBar durante el estado 'uploading'.
+     * Si es false, no se muestra ninguna barra de progreso.
+     */
+    showProgressBar: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: ["action"],
+  setup(e, { emit: _ }) {
+    const s = e, b = _, f = N(!1), a = c(() => s.disabled ? "disabled" : s.status), y = c(() => {
+      const t = [`rds-e-file-upload-item--${a.value}`];
+      return f.value && a.value !== "disabled" && a.value !== "uploading" && a.value !== "error" && t.push("rds-e-file-upload-item--hover"), t;
+    }), h = c(() => s.fileIcon), S = c(() => {
+      const t = s.fileSize;
+      if (t === 0) return "0 Bytes";
+      const i = 1024, d = ["Bytes", "KB", "MB", "GB", "TB"], u = Math.floor(Math.log(t) / Math.log(i)), k = u === 1 ? 0 : u > 1 ? 1 : 0;
+      return `${Number.parseFloat((t / i ** u).toFixed(k))} ${d[u]}`;
+    }), B = (t) => {
+      !s.disabled && t && b("action", { actionType: t.type, fileId: s.id });
+    };
+    return (t, i) => (o(), l("div", {
+      class: $(["rds-e-file-upload-item rds-radius-inputs", [y.value]]),
+      onMouseover: i[1] || (i[1] = (d) => f.value = !0),
+      onMouseleave: i[2] || (i[2] = (d) => f.value = !1)
+    }, [
+      r("div", R, [
+        v(t.$slots, "file-icon", {}, () => [
+          p(g, {
+            name: h.value,
+            class: "rds-e-file-upload-item__file-icon",
+            "aria-hidden": "true"
+          }, null, 8, ["name"])
+        ], !0)
+      ]),
+      r("div", w, [
+        r("div", E, [
+          r("span", F, m(e.fileName), 1),
+          a.value !== "error" ? (o(), l("div", x, [
+            r("span", D, m(S.value), 1),
+            a.value === "uploading" && e.timeRemaining ? (o(), l("span", P, m(e.timeRemaining), 1)) : n("", !0)
+          ])) : n("", !0),
+          a.value === "error" && e.errorMessage ? (o(), l("div", V, m(e.errorMessage), 1)) : n("", !0)
+        ]),
+        a.value === "uploading" && e.showProgressBar ? (o(), l("div", q, [
+          p(z, {
+            class: "rds-e-file-upload-item__progress-bar",
+            step: e.progress,
+            "max-steps": 100,
+            percentage: !1,
+            "back-button": !1,
+            "white-bar": "",
+            "hide-counter": "",
+            inverse: ""
+          }, null, 8, ["step"])
+        ])) : n("", !0)
+      ]),
+      r("div", T, [
+        v(t.$slots, "action", {}, () => [
+          e.action ? (o(), l("button", {
+            key: 0,
+            type: "button",
+            class: "rds-e-file-upload-item__action-button",
+            "aria-label": e.action.label || "Eliminar archivo",
+            disabled: e.disabled,
+            onClick: i[0] || (i[0] = I((d) => B(e.action), ["stop"]))
+          }, [
+            p(g, {
+              name: e.action.icon,
+              class: "rds-e-file-upload-item__action-icon",
+              "aria-hidden": "true"
+            }, null, 8, ["name"])
+          ], 8, j)) : n("", !0)
+        ], !0)
+      ])
+    ], 34));
+  }
+}), U = /* @__PURE__ */ C(A, [["__scopeId", "data-v-1de9506e"]]);
+export {
+  U as default
+};