energy-components 2.4.0 → 2.5.0

package/dist/components/actionButton.es.js

@@ -1,8 +1,8 @@
-import { defineComponent as r, openBlock as o, createBlock as i, withCtx as l, createVNode as d, mergeProps as n } from "vue";
-import a from "./button.es.js";
-import s from "./tooltip.es.js";
-import { _ as p } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-import './style/actionButton.css';const c = /* @__PURE__ */ r({
+import { defineComponent as u, computed as a, openBlock as l, createBlock as s, normalizeProps as f, mergeProps as i, withCtx as m, createVNode as y } from "vue";
+import p from "./button.es.js";
+import v from "./tooltip.es.js";
+import { _ as g } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+import './style/actionButton.css';const P = /* @__PURE__ */ u({
   __name: "action-button",
   props: {
     /**
@@ -75,35 +75,48 @@ import './style/actionButton.css';const c = /* @__PURE__ */ r({
       validator(t) {
         return t === void 0 || ["top", "bottom", "left", "right"].includes(t);
       }
+    },
+    /**
+     * <span>Props adicionales para el RDSTooltip interno. Permite configurar cualquier prop de RDSTooltip
+     * (ej: teleportTo, offsetSpace, hideDelay, large…). Los valores aquí definidos sobreescriben
+     * los derivados de `tooltip` y `tooltipPosition`.</span>
+     */
+    tooltipProps: {
+      type: Object,
+      default: () => ({})
     }
   },
   setup(t) {
-    return (e, f) => t.tooltip ? (o(), i(s, {
-      key: 0,
-      content: t.tooltip,
-      placement: t.tooltipPosition || void 0,
-      inverse: t.inverse
-    }, {
-      default: l(() => [
-        d(a, n({
+    const o = t, n = a(() => ({
+      content: o.tooltip,
+      placement: o.tooltipPosition || void 0,
+      inverse: o.inverse,
+      ...o.tooltipProps
+    })), r = a(() => {
+      const { tooltip: e, tooltipPosition: d, tooltipProps: B, ...c } = o;
+      return c;
+    });
+    return (e, d) => n.value.content ? (l(), s(v, f(i({ key: 0 }, n.value)), {
+      default: m(() => [
+        y(p, i({
           id: t.id,
           class: "rds-e-btn--action"
-        }, { ...e.$props, ...e.$attrs }, {
+        }, { ...r.value, ...e.$attrs }, {
           text: "",
           "is-action": ""
         }), null, 16, ["id"])
       ]),
       _: 1
-    }, 8, ["content", "placement", "inverse"])) : (o(), i(a, n({
+    }, 16)) : (l(), s(p, i({
       key: 1,
       id: t.id,
       class: "rds-e-btn--action"
-    }, { ...e.$props, ...e.$attrs }, {
+    }, { ...r.value, ...e.$attrs }, {
       text: "",
       "is-action": ""
     }), null, 16, ["id"]));
   }
-}), g = /* @__PURE__ */ p(c, [["__scopeId", "data-v-765c5af6"]]);
+}), k = /* @__PURE__ */ g(P, [["__scopeId", "data-v-3c819ad5"]]);
 export {
-  g as default
+  k as default
 };

package/dist/components/breadcrumbs.es.js

@@ -1,7 +1,7 @@
-import { defineComponent as C, toRefs as h, ref as y, watchEffect as I, onMounted as L, openBlock as u, createElementBlock as m, Fragment as T, renderList as w, normalizeClass as x, unref as B, createVNode as E, mergeProps as j, toHandlers as P, withCtx as S, createCommentVNode as D } from "vue";
-import N from "./link.es.js";
-import { _ as O } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-import './style/breadcrumbs.css';const R = ["id"], V = { key: 0 }, q = /* @__PURE__ */ C({
+import { defineComponent as h, toRefs as C, ref as y, watchEffect as L, onMounted as I, openBlock as c, createElementBlock as u, createElementVNode as T, normalizeClass as w, unref as B, Fragment as E, renderList as S, createVNode as x, mergeProps as P, toHandlers as j, withCtx as A, createCommentVNode as N } from "vue";
+import V from "./link.es.js";
+import { _ as D } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+import './style/breadcrumbs.css';const O = ["aria-label"], R = ["id"], q = { key: 0 }, z = /* @__PURE__ */ h({
   __name: "breadcrumbs",
   props: {
     /**
@@ -32,6 +32,20 @@ import './style/breadcrumbs.css';const R = ["id"], V = { key: 0 }, q = /* @__PUR
       type: Boolean,
       default: !1
     },
+    /**
+     * <span>Etiqueta accesible del landmark de navegación para i18n</span>
+     */
+    ariaLabel: {
+      type: String,
+      default: "Breadcrumb"
+    },
+    /**
+     * <span>Etiqueta accesible del botón de elipsis para i18n</span>
+     */
+    ellipsisAriaLabel: {
+      type: String,
+      default: "Show hidden levels"
+    },
     /**
      * ID del breadcrumbs para testing
      */
@@ -41,81 +55,91 @@ import './style/breadcrumbs.css';const R = ["id"], V = { key: 0 }, q = /* @__PUR
     }
   },
   emits: ["onClickTrimmedList", "onClickItem", "onClickEllipsis"],
-  setup(o, { emit: f }) {
-    const s = o, a = f, {
+  setup(i, { emit: b }) {
+    const r = i, n = b, {
       items: e,
-      inverse: c
-    } = h(s), i = y(), v = () => {
-      s.leftTrim ? a("onClickTrimmedList", e.value.slice(0, -2)) : a("onClickTrimmedList", e.value.slice(1, -1));
-    }, p = () => {
-      i.value = [
+      inverse: d
+    } = C(r), s = y([]), v = () => {
+      r.leftTrim ? n("onClickTrimmedList", e.value.slice(0, -2)) : n("onClickTrimmedList", e.value.slice(1, -1));
+    }, f = () => {
+      s.value = [
         e.value[0],
         {
           text: "...",
           active: !1,
-          tag: "router-link",
+          tag: "button",
           to: "",
           clickable: !0
         },
         e.value[e.value.length - 1]
       ];
-    }, k = () => {
-      i.value = [
+    }, p = () => {
+      s.value = [
         {
           text: "...",
           active: !1,
-          tag: "router-link",
+          tag: "button",
           to: "",
           clickable: !0
         },
         e.value[e.value.length - 2],
         e.value[e.value.length - 1]
       ];
-    }, d = () => {
-      s.trimItems && e.value.length >= 3 ? p() : s.leftTrim && e.value.length >= 3 ? k() : typeof s.items == "object" ? i.value = s.items : console.error("energy-components: The prop is not an Object");
-    }, b = (r, n) => {
-      const t = {
-        ...r,
-        inverse: c.value,
-        customClass: "rds-e-breadcrumbs__link--text"
+    }, m = () => {
+      r.trimItems && e.value.length >= 3 ? f() : r.leftTrim && e.value.length >= 3 ? p() : typeof r.items == "object" ? s.value = r.items : console.error("energy-components: The prop is not an Object");
+    }, k = (t, o) => {
+      const l = {
+        ...t,
+        inverse: d.value,
+        customClass: "rds-e-breadcrumbs__link--text",
+        "aria-current": t?.active ? "page" : void 0,
+        "aria-label": t?.clickable ? r.ellipsisAriaLabel : void 0,
+        type: t?.clickable ? "button" : void 0
       };
-      return n !== i.value.length - 1 && Object.assign(t, {
+      return o !== s.value.length - 1 && Object.assign(l, {
         arrow: !0,
         right: !0,
         arrowSmall: !0
-      }), t;
-    }, _ = (r, n) => ({
-      click: (t) => {
-        if (a("onClickItem", { item: r, index: n ?? -1, event: t }), r?.clickable) {
-          const l = s.leftTrim ? e.value.slice(0, -2) : e.value.slice(1, -1);
-          a("onClickEllipsis", { trimmed: l, event: t }), v(), t.preventDefault(), t.stopPropagation();
+      }), l;
+    }, _ = (t, o) => ({
+      click: (l) => {
+        if (n("onClickItem", { item: t, index: o ?? -1, event: l }), t?.clickable) {
+          const a = r.leftTrim ? e.value.slice(0, -2) : e.value.slice(1, -1);
+          n("onClickEllipsis", { trimmed: a, event: l }), v(), l?.preventDefault?.(), l?.stopPropagation?.();
         }
       }
-    }), g = (r) => [
+    }), g = (t) => [
       "rds-e-breadcrumbs__link",
-      r?.active ? "rds-e-breadcrumbs__link--active" : "",
-      c.value && r?.active ? "rds-e-breadcrumbs__link--inverse-active" : ""
+      t?.clickable ? "rds-e-breadcrumbs__ellipsis-button" : "",
+      t?.active ? "rds-e-breadcrumbs__link--active" : "",
+      d.value && t?.active ? "rds-e-breadcrumbs__link--inverse-active" : ""
     ];
-    return I(() => {
-      d();
-    }), L(() => {
-      d();
-    }), (r, n) => (u(!0), m(T, null, w(i.value, (t, l) => (u(), m("ul", {
-      id: o.id ? `${o.id}-${l}` : void 0,
-      key: l,
-      class: x(["rds-e-breadcrumbs", `${B(c) ? "rds-e-breadcrumbs--inverse" : ""}`])
-    }, [
-      E(N, j({
-        class: g(t)
-      }, { ref_for: !0 }, b(t, l), P(_(t, l))), {
-        default: S(() => [
-          t?.clickable ? (u(), m("span", V, "...")) : D("", !0)
-        ]),
-        _: 2
-      }, 1040, ["class"])
-    ], 10, R))), 128));
+    return L(() => {
+      m();
+    }), I(() => {
+      m();
+    }), (t, o) => (c(), u("nav", { "aria-label": i.ariaLabel }, [
+      T("ol", {
+        class: w(["rds-e-breadcrumbs", `${B(d) ? "rds-e-breadcrumbs--inverse" : ""}`])
+      }, [
+        (c(!0), u(E, null, S(s.value, (l, a) => (c(), u("li", {
+          id: i.id ? `${i.id}-${a}` : void 0,
+          key: a,
+          class: "rds-e-breadcrumbs__item"
+        }, [
+          x(V, P({
+            class: g(l)
+          }, { ref_for: !0 }, k(l, a), j(_(l, a))), {
+            default: A(() => [
+              l?.clickable ? (c(), u("span", q, "...")) : N("", !0)
+            ]),
+            _: 2
+          }, 1040, ["class"])
+        ], 8, R))), 128))
+      ], 2)
+    ], 8, O));
   }
-}), H = /* @__PURE__ */ O(q, [["__scopeId", "data-v-1a87a370"]]);
+}), G = /* @__PURE__ */ D(z, [["__scopeId", "data-v-28c9477d"]]);
 export {
-  H as default
+  G as default
 };

package/dist/components/link.es.js

@@ -1,8 +1,8 @@
-import { defineComponent as B, useAttrs as z, computed as o, openBlock as t, createBlock as s, 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 { s as j } from "./functions-D3GA3OzJ.js";
-import { R as l } from "./icon-svg-CW3eQRcp.js";
-import { _ as A } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-import './style/link.css';const O = /* @__PURE__ */ B({
+import { defineComponent as D, useAttrs as j, computed as t, openBlock as i, createBlock as l, resolveDynamicComponent as A, mergeProps as d, withCtx as E, createCommentVNode as s, createElementBlock as g, normalizeClass as v, renderSlot as b, createTextVNode as h, toDisplayString as w } from "vue";
+import { s as O } from "./functions-D3GA3OzJ.js";
+import { R as c } from "./icon-svg-CW3eQRcp.js";
+import { _ as T } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+import './style/link.css';const L = /* @__PURE__ */ D({
   __name: "link",
   props: {
     /**
@@ -24,10 +24,10 @@ import './style/link.css';const O = /* @__PURE__ */ B({
     icon: {
       type: Object,
       default: () => ({ name: "", modifier: "" }),
-      validator: (n) => typeof n.name == "string" && (n.modifier === void 0 || typeof n.modifier == "string") ? !0 : (console.error("El icono debe tener una propiedad name de tipo string y una propiedad modifier opcional de tipo string"), !1)
+      validator: (a) => typeof a.name == "string" && (a.modifier === void 0 || typeof a.modifier == "string") ? !0 : (console.error("El icono debe tener una propiedad name de tipo string y una propiedad modifier opcional de tipo string"), !1)
     },
     /**
-     * <span>Tag del link</span>
+     * <span>Tag semántico del componente. Valores soportados: <code>router-link</code> (navegación interna), <code>a</code> (enlace externo) y <code>button</code> (acción sin navegación).</span>
      */
     tag: {
       type: String,
@@ -98,93 +98,108 @@ import './style/link.css';const O = /* @__PURE__ */ B({
     }
   },
   emits: ["click"],
-  setup(n, { emit: d }) {
-    const e = n, v = d, c = z(), w = o(() => {
+  setup(a, { emit: u }) {
+    const e = a, p = u, f = j(), S = t(() => {
       const r = {};
       return e.color && (r.color = e.color), e.disabled && (r["pointer-events"] = "none"), Object.keys(r).length ? r : void 0;
-    }), b = o(() => j(e.to)), S = o(() => {
-      const r = c.rel;
-      return c.target === "_blank" ? r || "noopener noreferrer" : r;
-    }), x = o(() => {
+    }), x = t(() => O(e.to)), C = t(() => {
+      const r = f.rel;
+      return f.target === "_blank" ? r || "noopener noreferrer" : r;
+    }), o = t(() => e.tag === "a" ? "a" : e.tag === "button" ? "button" : "router-link"), z = t(() => {
       const r = ["rds-e-link"];
       return e.inverse && r.push("rds-e-link--inverse"), e.underline && r.push("rds-e-link--underline"), e.disabled && r.push("rds-e-style-state-disabled"), !!(e.arrow || e.icon?.name) && r.push("rds-e-arrow-link"), e.customClass === "rds-e-breadcrumbs__link--text" && r.push("rds-e-link__breadcrumbs"), r.join(" ");
-    }), u = o(() => {
+    }), m = t(() => {
       const r = [];
       return e.arrow && r.push("rds-e-arrow-link__icon--arrow"), e.icon?.name && !e.arrow && (r.push("rds-e-arrow-link__icon"), e.disabled && r.push("rds-e-arrow-link__icon--disabled"), e.inverse && r.push("rds-e-arrow-link__icon--inverse")), r.push(
         e.right ? "rds-e-arrow-link__icon--animation-right" : "rds-e-arrow-link__icon--animation-left"
       ), r.join(" ");
-    }), p = o(() => !!(e.arrow || e.icon?.name)), C = (r) => {
+    }), k = t(() => !!(e.arrow || e.icon?.name)), B = (r) => {
       if (e.disabled) {
         r.preventDefault(), r.stopPropagation();
         return;
       }
-      v("click", r);
-    }, f = o(() => e.icon?.size ?? 20);
-    return (r, m) => (t(), s(I(e.tag === "a" ? e.tag : "router-link"), a({
+      p("click", r);
+    }, I = (r) => {
+      if (e.disabled || o.value !== "button") return;
+      const n = r.key?.toLowerCase();
+      if (!(n === "enter") && !(n === " " || n === "space")) return;
+      r.preventDefault();
+      const y = r.currentTarget;
+      if (y) {
+        y.click();
+        return;
+      }
+      p("click", r);
+    }, _ = t(() => e.icon?.size ?? 20);
+    return (r, n) => (i(), l(A(o.value), d({
       id: e.id,
-      class: x.value,
-      to: e.tag === "router-link" ? e.to : null,
-      href: e.tag === "a" ? b.value : null
+      class: z.value,
+      type: o.value === "button" ? "button" : void 0,
+      to: o.value === "router-link" ? e.to : null,
+      href: o.value === "a" ? x.value : null
     }, r.$attrs, {
-      rel: S.value,
-      style: w.value,
+      rel: C.value,
+      style: S.value,
       tabindex: e.disabled ? -1 : 0,
       "aria-disabled": e.disabled,
-      onClick: C
+      disabled: o.value === "button" ? e.disabled : void 0,
+      onClick: B,
+      onKeydown: I
     }), {
-      default: D(() => [
-        e.icon.name && !e.right && !e.arrow ? (t(), s(l, a({
+      default: E(() => [
+        e.icon.name && !e.right && !e.arrow ? (i(), l(c, d({
           key: 0,
           name: e.icon.name
         }, {
           ...e.icon
         }, {
-          class: ["rds-e-link__icon-left", u.value],
-          size: f.value,
+          class: ["rds-e-link__icon-left", m.value],
+          size: _.value,
           style: e.color ? { color: e.color } : void 0
-        }), null, 16, ["name", "class", "size", "style"])) : i("", !0),
-        e.right ? (t(), _("span", {
+        }), null, 16, ["name", "class", "size", "style"])) : s("", !0),
+        e.right ? (i(), g("span", {
           key: 1,
-          class: k(["rds-e-link__text", [e.customClass, {
-            "rds-e-mr-xs": p.value,
+          class: v(["rds-e-link__text", [e.customClass, {
+            "rds-e-mr-xs": k.value,
             "rds-e-link__text--underline": e.underline
           }]])
         }, [
-          g(r.$slots, "default", {}, () => [
-            y(h(e.text), 1)
+          b(r.$slots, "default", {}, () => [
+            h(w(e.text), 1)
           ], !0)
-        ], 2)) : i("", !0),
-        e.arrow ? (t(), s(l, a({ key: 2 }, {
+        ], 2)) : s("", !0),
+        e.arrow ? (i(), l(c, d({ key: 2 }, {
           name: e.right ? "arrow_right" : "arrow_left",
           size: e.arrowSmall ? 16 : void 0
         }, {
+          "aria-hidden": "true",
           class: ["rds-e-arrow-link__icon--arrow", [
             e.right ? "rds-e-arrow-link__icon--animation-right" : "rds-e-arrow-link__icon--animation-left",
             { "rds-flex rds-flex-center-center": e.arrowSmall }
           ]],
           style: e.color ? { color: e.color } : void 0
-        }), null, 16, ["class", "style"])) : i("", !0),
-        e.right ? i("", !0) : (t(), _("span", {
+        }), null, 16, ["class", "style"])) : s("", !0),
+        e.right ? s("", !0) : (i(), g("span", {
           key: 3,
-          class: k(["rds-e-link__text", { "rds-e-ml-xs": p.value }])
+          class: v(["rds-e-link__text", { "rds-e-ml-xs": k.value }])
         }, [
-          g(r.$slots, "default", {}, () => [
-            y(h(e.text), 1)
+          b(r.$slots, "default", {}, () => [
+            h(w(e.text), 1)
           ], !0)
         ], 2)),
-        e.icon.name && e.right && !e.arrow ? (t(), s(l, a({
+        e.icon.name && e.right && !e.arrow ? (i(), l(c, d({
           key: 4,
           name: e.icon.name
         }, e.icon, {
-          class: ["rds-e-link__icon-right", u.value],
-          size: f.value,
+          class: ["rds-e-link__icon-right", m.value],
+          size: _.value,
           style: e.color ? { color: e.color } : void 0
-        }), null, 16, ["name", "class", "size", "style"])) : i("", !0)
+        }), null, 16, ["name", "class", "size", "style"])) : s("", !0)
       ]),
       _: 3
-    }, 16, ["id", "class", "to", "href", "rel", "style", "tabindex", "aria-disabled"]));
+    }, 16, ["id", "class", "type", "to", "href", "rel", "style", "tabindex", "aria-disabled", "disabled"]));
   }
-}), N = /* @__PURE__ */ A(O, [["__scopeId", "data-v-b4522d46"]]);
+}), M = /* @__PURE__ */ T(L, [["__scopeId", "data-v-724ec928"]]);
 export {
-  N as default
+  M as default
 };