energy-components 2.0.0-beta.3 → 2.0.0-beta.4

package/dist/components/indicator.es.js

@@ -1,7 +1,14 @@
-import { defineComponent as L, toRefs as k, ref as y, computed as z, watch as w, onMounted as N, onBeforeUnmount as q, createElementBlock as d, openBlock as u, normalizeClass as h, createElementVNode as p, normalizeStyle as P, Fragment as V, renderList as W, createCommentVNode as S, toDisplayString as B } from "vue";
-import { d as F, t as C, a as I } from "./functions-D3GA3OzJ.js";
-import { _ as T } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-import './style/indicator.css';const D = ["id"], M = { class: "rds-e-indicator__inner" }, U = { class: "rds-e-indicator__step-content" }, X = { key: 0 }, Y = /* @__PURE__ */ L({
+import { defineComponent as q, toRefs as C, ref as B, computed as I, watch as $, onMounted as P, onBeforeUnmount as T, createElementBlock as d, openBlock as l, normalizeClass as A, createElementVNode as f, normalizeStyle as W, Fragment as D, renderList as F, createCommentVNode as _, createBlock as M, toDisplayString as g, unref as u, createTextVNode as U } from "vue";
+import { d as X, t as L, a as Y } from "./functions-D3GA3OzJ.js";
+import { R as j } from "./icon-svg-CTR8GnC2.js";
+import { _ as G } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+import './style/indicator.css';const H = ["id"], J = { class: "rds-e-indicator__inner" }, K = { class: "rds-e-indicator__step-content" }, O = { key: 0 }, Q = {
+  key: 0,
+  class: "rds-e-indicator__number"
+}, Z = {
+  key: 0,
+  class: "rds-e-indicator__detail"
+}, x = /* @__PURE__ */ q({
   __name: "indicator",
   props: {
     /**
@@ -11,7 +18,7 @@ import './style/indicator.css';const D = ["id"], M = { class: "rds-e-indicator__
       type: Array,
       required: !0,
       validator(a) {
-        return !Array.isArray(a) || a.length === 0 ? (console.warn("Advertencia: steps debe ser un array no vacío de strings."), !1) : a.every((o) => typeof o != "string" ? (console.warn(`Advertencia: Todos los elementos en steps deben ser strings. Encontrado: ${typeof o}`), !1) : /^[a-z0-9\s\u00C0-\u017F]+$/i.test(o) ? !0 : (console.warn(`Advertencia: El paso "${o}" contiene caracteres no permitidos. Solo se permiten letras, números y espacios.`), !1));
+        return !Array.isArray(a) || a.length === 0 ? (console.warn("Advertencia: steps debe ser un array no vacío de strings."), !1) : a.every((i) => typeof i != "string" ? (console.warn(`Advertencia: Todos los elementos en steps deben ser strings. Encontrado: ${typeof i}`), !1) : /^[a-z0-9\s\u00C0-\u017F]+$/i.test(i) ? !0 : (console.warn(`Advertencia: El paso "${i}" contiene caracteres no permitidos. Solo se permiten letras, números y espacios.`), !1));
       }
     },
     /**
@@ -38,6 +45,46 @@ import './style/indicator.css';const D = ["id"], M = { class: "rds-e-indicator__
       type: String,
       default: "default"
     },
+    /**
+     * Estilo de numeración de pasos.
+     * 'none' mantiene el comportamiento anterior (número dentro del bullet).
+     * 'outside' muestra el número fuera del bullet.
+     * 'inline' integra la numeración en el título del paso.
+     */
+    numbering: {
+      type: String,
+      default: "none"
+    },
+    /**
+     * Mostrar etiquetas (labels). En variante 'small' se ocultan siempre.
+     */
+    showLabels: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * Tipo de contenido interno del item.
+     * - 'empty': bullet sin contenido (por defecto). Si numbering es 'none', se mantiene número dentro para compatibilidad.
+     * - 'icon': muestra un icono dentro del bullet.
+     */
+    itemContent: {
+      type: String,
+      default: "empty"
+    },
+    /**
+     * Lista opcional de iconos (nombres) a renderizar por paso cuando itemContent='icon'.
+     */
+    icons: {
+      type: Array,
+      default: void 0
+    },
+    /**
+     * Detalles opcionales por paso. Si existe un detalle en el índice, se mostrará bajo el título.
+     */
+    details: {
+      type: Array,
+      default: void 0
+    },
     /**
      * Si el indicador debe ocupar todo el ancho.
      */
@@ -61,122 +108,131 @@ import './style/indicator.css';const D = ["id"], M = { class: "rds-e-indicator__
     }
   },
   setup(a) {
-    const t = a, {
-      direction: o,
-      currentStep: f,
-      steps: A,
-      fullWidth: $
-    } = k(t), _ = y(null), v = y(null), c = y([]), R = z(() => {
-      let r = t.currentStep;
-      const e = t.steps.length, s = o.value === "vertical" ? "height" : "width";
+    const e = a, {
+      direction: i,
+      currentStep: m,
+      steps: k,
+      fullWidth: E
+    } = C(e), v = B(null), y = B(null), p = B([]), b = C(e).icons?.value, h = C(e).details?.value, z = (r, t) => e.numbering === "inline" ? `${t + 1}. ${r}` : r, N = I(() => {
+      let r = e.currentStep;
+      const t = e.steps.length, n = i.value === "vertical" ? "height" : "width";
       if (r < 1)
         return {
-          [s]: "0%"
+          [n]: "0%"
         };
-      if (r > e && (r = e), e === 1)
+      if (r > t && (r = t), t === 1)
         return {
-          [s]: "100%"
+          [n]: "100%"
         };
-      const i = (r - 1) / (e - 1) * 100, n = r < e ? 100 / (e - 1) / 2 : 0;
+      const s = (r - 1) / (t - 1) * 100, o = r < t ? 100 / (t - 1) / 2 : 0;
       return {
-        [s]: `${i + n}%`
+        [n]: `${s + o}%`
       };
-    }), b = () => {
-      if (_.value && v.value) {
-        const r = v.value, e = c.value[0];
-        if (e) {
-          if (o.value === "vertical") {
-            const s = e.getBoundingClientRect(), i = _.value.getBoundingClientRect(), n = s.left + s.width / 2 - i.left;
-            r.style.left = `${n}px`;
+    }), R = () => {
+      if (v.value && y.value) {
+        const r = y.value, t = p.value[0];
+        if (t) {
+          if (i.value === "vertical") {
+            const n = t.getBoundingClientRect(), s = v.value.getBoundingClientRect(), o = n.left + n.width / 2 - s.left;
+            r.style.left = `${o}px`;
           }
-          if (o.value === "horizontal") {
-            const s = e.getBoundingClientRect(), i = _.value.getBoundingClientRect(), n = s.top + s.height / 2 - i.top;
-            r.style.top = `${n}px`;
+          if (i.value === "horizontal") {
+            const n = t.getBoundingClientRect(), s = v.value.getBoundingClientRect(), o = n.top + n.height / 2 - s.top;
+            r.style.top = `${o}px`;
           }
         }
       }
-    }, E = (r) => {
-      const e = r === 0 || r === t.steps.length - 1, s = !e;
+    }, V = (r) => {
+      const t = r === 0 || r === e.steps.length - 1, n = !t;
       return {
         "rds-e-indicator__step-wrapper--first": r === 0,
-        "rds-e-indicator__step-wrapper--last": r === t.steps.length - 1,
-        "rds-e-indicator__step-wrapper--side": e,
-        "rds-e-indicator__step-wrapper--central": s
+        "rds-e-indicator__step-wrapper--last": r === e.steps.length - 1,
+        "rds-e-indicator__step-wrapper--side": t,
+        "rds-e-indicator__step-wrapper--central": n
       };
-    }, g = () => {
-      !t.steps || !t.steps.length || t.steps.forEach((r, e) => {
-        const s = e < f.value, i = e === f.value - 1;
-        let n = c.value[e]?.classList, l = [];
-        n && (n = Array.from(n), l = Array.from(n), l = C(
-          l,
+    }, S = () => {
+      !e.steps || !e.steps.length || e.steps.forEach((r, t) => {
+        const n = t < m.value, s = t === m.value - 1;
+        let o = p.value[t]?.classList, c = [];
+        o && (o = Array.from(o), c = Array.from(o), c = L(
+          c,
           "rds-e-indicator__bullet--active",
-          s
-        ), l = C(
-          l,
+          n
+        ), c = L(
+          c,
           "rds-e-indicator__bullet--current",
-          i
-        ), I(n, l) || setTimeout(() => {
-          c.value[e].classList.remove(...n), c.value[e].classList.add(...l);
+          s
+        ), Y(o, c) || setTimeout(() => {
+          p.value[t].classList.remove(...o), p.value[t].classList.add(...c);
         }, 150));
       });
-    }, m = () => {
-      b();
+    }, w = () => {
+      R();
     };
-    return w(
-      [o, A, $],
+    return $(
+      [i, k, E],
       () => {
-        m(), g();
+        w(), S();
       },
       { immediate: !0 }
-    ), w(f, () => {
-      g();
-    }), N(() => {
-      b(), g(), window.addEventListener("resize", F(m, 200));
-    }), q(() => {
-      window.removeEventListener("resize", m);
-    }), (r, e) => (u(), d("div", {
+    ), $(m, () => {
+      S();
+    }), P(() => {
+      R(), S(), window.addEventListener("resize", X(w, 200)), e.variant === "small" && e.itemContent === "icon" && console.warn('RDSIndicator: Los iconos dentro del bullet no están soportados en la variante "small". El icono no se renderizará.');
+    }), T(() => {
+      window.removeEventListener("resize", w);
+    }), (r, t) => (l(), d("div", {
       id: a.id,
       ref_key: "$indicator",
-      ref: _,
-      class: h(["rds-e-indicator", [
-        `rds-e-indicator--${t.direction}`,
-        { "rds-e-indicator--small": t.variant === "small" },
-        { "rds-e-indicator--full-width": t.fullWidth }
+      ref: v,
+      class: A(["rds-e-indicator", [
+        `rds-e-indicator--${e.direction}`,
+        { "rds-e-indicator--small": e.variant === "small" },
+        { "rds-e-indicator--full-width": e.fullWidth }
       ]])
     }, [
-      p("div", M, [
-        p("div", {
+      f("div", J, [
+        f("div", {
           ref_key: "$progressBar",
-          ref: v,
+          ref: y,
           class: "rds-e-indicator__progress-bar"
         }, [
-          p("div", {
+          f("div", {
             class: "rds-e-indicator__progress-bar__fill",
-            style: P(R.value)
+            style: W(N.value)
           }, null, 4)
         ], 512),
-        (u(!0), d(V, null, W(t.steps, (s, i) => (u(), d("div", {
-          key: i,
-          class: h(["rds-e-indicator__step-wrapper", E(i)])
+        (l(!0), d(D, null, F(e.steps, (n, s) => (l(), d("div", {
+          key: s,
+          class: A(["rds-e-indicator__step-wrapper", V(s)])
         }, [
-          p("div", U, [
-            p("div", {
+          f("div", K, [
+            f("div", {
               ref_for: !0,
-              ref: (n) => c.value[i] = n,
+              ref: (o) => p.value[s] = o,
               class: "rds-e-indicator__bullet"
             }, [
-              t.variant !== "small" ? (u(), d("span", X, B(i + 1), 1)) : S("", !0)
+              e.variant !== "small" && e.numbering === "none" && e.itemContent === "empty" ? (l(), d("span", O, g(s + 1), 1)) : _("", !0),
+              e.itemContent === "icon" && e.variant !== "small" && u(b) && u(b)[s] ? (l(), M(j, {
+                key: 1,
+                name: u(b)[s],
+                class: "rds-e-indicator__icon"
+              }, null, 8, ["name"])) : _("", !0)
             ], 512)
           ]),
-          t.variant !== "small" ? (u(), d("div", {
-            key: 0,
-            class: h(["rds-e-indicator__label", { "rds-e-indicator__label--ellipsis": t.ellipsis }])
-          }, B(s), 3)) : S("", !0)
+          e.numbering === "outside" ? (l(), d("div", Q, g(s + 1), 1)) : _("", !0),
+          e.variant !== "small" && e.showLabels ? (l(), d("div", {
+            key: 1,
+            class: A(["rds-e-indicator__label", { "rds-e-indicator__label--ellipsis": e.ellipsis }])
+          }, [
+            U(g(z(n, s)) + " ", 1),
+            u(h) && u(h)[s] ? (l(), d("div", Z, g(u(h)[s]), 1)) : _("", !0)
+          ], 2)) : _("", !0)
         ], 2))), 128))
       ])
-    ], 10, D));
+    ], 10, H));
   }
-}), J = /* @__PURE__ */ T(Y, [["__scopeId", "data-v-2523e4b1"]]);
+}), ne = /* @__PURE__ */ G(x, [["__scopeId", "data-v-942bba3b"]]);
 export {
-  J as default
+  ne as default
 };

package/dist/components/link.es.js

@@ -1,4 +1,4 @@
-import { defineComponent as B, useAttrs as z, computed as o, createBlock as s, openBlock as t, resolveDynamicComponent as I, mergeProps as a, withCtx as D, createCommentVNode as i, createElementBlock as _, normalizeClass as k, renderSlot as g, createTextVNode as y, toDisplayString as h } from "vue";
+import { defineComponent as B, useAttrs as z, computed as o, createBlock as a, openBlock as t, resolveDynamicComponent as I, mergeProps as s, withCtx as D, createCommentVNode as i, createElementBlock as _, normalizeClass as k, renderSlot as g, createTextVNode as y, toDisplayString as h } from "vue";
 import { s as j } from "./functions-D3GA3OzJ.js";
 import { R as l } from "./icon-svg-CTR8GnC2.js";
 import { _ as A } from "./_plugin-vue_export-helper-CHgC5LLL.js";
@@ -120,7 +120,7 @@ import './style/link.css';const O = /* @__PURE__ */ B({
       }
       v("click", r);
     }, f = o(() => e.icon?.size ?? 14);
-    return (r, m) => (t(), s(I(e.tag === "a" ? e.tag : "router-link"), a({
+    return (r, m) => (t(), a(I(e.tag === "a" ? e.tag : "router-link"), s({
       id: e.id,
       class: x.value,
       to: e.tag === "router-link" ? e.to : null,
@@ -128,12 +128,12 @@ import './style/link.css';const O = /* @__PURE__ */ B({
     }, r.$attrs, {
       rel: S.value,
       style: w.value,
-      tabindex: e.disabled ? -1 : void 0,
+      tabindex: e.disabled ? -1 : 0,
       "aria-disabled": e.disabled,
       onClick: C
     }), {
       default: D(() => [
-        e.icon.name && !e.right && !e.arrow ? (t(), s(l, a({
+        e.icon.name && !e.right && !e.arrow ? (t(), a(l, s({
           key: 0,
           name: e.icon.name
         }, {
@@ -154,7 +154,7 @@ import './style/link.css';const O = /* @__PURE__ */ B({
             y(h(e.text), 1)
           ], !0)
         ], 2)) : i("", !0),
-        e.arrow ? (t(), s(l, a({ key: 2 }, {
+        e.arrow ? (t(), a(l, s({ key: 2 }, {
           name: e.right ? "arrow_right" : "arrow_left",
           size: e.arrowSmall ? 16 : void 0
         }, {
@@ -172,7 +172,7 @@ import './style/link.css';const O = /* @__PURE__ */ B({
             y(h(e.text), 1)
           ], !0)
         ], 2)),
-        e.icon.name && e.right && !e.arrow ? (t(), s(l, a({
+        e.icon.name && e.right && !e.arrow ? (t(), a(l, s({
           key: 4,
           name: e.icon.name
         }, e.icon, {
@@ -184,7 +184,7 @@ import './style/link.css';const O = /* @__PURE__ */ B({
       _: 3
     }, 16, ["id", "class", "to", "href", "rel", "style", "tabindex", "aria-disabled"]));
   }
-}), N = /* @__PURE__ */ A(O, [["__scopeId", "data-v-d8f5c74d"]]);
+}), N = /* @__PURE__ */ A(O, [["__scopeId", "data-v-f0ad4a8d"]]);
 export {
   N as default
 };