energy-components 1.12.0 → 1.14.0

package/dist/components/breadcrumbs.es.js

@@ -1,7 +1,7 @@
-import { defineComponent as g, toRefs as h, ref as C, watchEffect as y, onMounted as L, createElementBlock as c, openBlock as l, Fragment as I, renderList as w, normalizeClass as x, unref as B, createVNode as j, mergeProps as E, toHandlers as P, withCtx as T, 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 = { key: 0 }, S = /* @__PURE__ */ g({
+import { defineComponent as h, toRefs as C, ref as y, watchEffect as L, onMounted as T, createElementBlock as o, openBlock as c, Fragment as I, renderList as x, normalizeClass as w, unref as B, createVNode as j, mergeProps as E, toHandlers as P, withCtx as D, createCommentVNode as N } from "vue";
+import O from "./link.es.js";
+import { _ as R } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+import './style/breadcrumbs.css';const S = { key: 0 }, V = /* @__PURE__ */ h({
   __name: "breadcrumbs",
   props: {
     /**
@@ -24,18 +24,36 @@ import './style/breadcrumbs.css';const R = { key: 0 }, S = /* @__PURE__ */ g({
     trimItems: {
       type: Boolean,
       default: !1
+    },
+    /**
+     * <span>Indica si el breadcrumb debe ser recortado por la izquierda, mostrando solo los dos últimos niveles.</span>
+     */
+    leftTrim: {
+      type: Boolean,
+      default: !1
     }
   },
   emits: ["onClickTrimmedList"],
-  setup(d, { emit: p }) {
-    const t = d, f = p, {
-      items: s,
-      inverse: o
-    } = h(t), n = C(), m = () => {
-      f("onClickTrimmedList", s.value.slice(1, -1));
-    }, v = () => {
-      n.value = [
-        s.value[0],
+  setup(v, { emit: m }) {
+    const s = v, u = m, {
+      items: r,
+      inverse: l
+    } = C(s), a = y(), d = () => {
+      s.leftTrim ? u("onClickTrimmedList", r.value.slice(0, -2)) : u("onClickTrimmedList", r.value.slice(1, -1));
+    }, p = () => {
+      a.value = [
+        r.value[0],
+        {
+          text: "...",
+          active: !1,
+          tag: "router-link",
+          to: "",
+          clickable: !0
+        },
+        r.value[r.value.length - 1]
+      ];
+    }, b = () => {
+      a.value = [
         {
           text: "...",
           active: !1,
@@ -43,49 +61,50 @@ import './style/breadcrumbs.css';const R = { key: 0 }, S = /* @__PURE__ */ g({
           to: "",
           clickable: !0
         },
-        s.value[s.value.length - 1]
+        r.value[r.value.length - 2],
+        r.value[r.value.length - 1]
       ];
-    }, u = () => {
-      t.trimItems && s.value.length > 3 ? v() : typeof t.items == "object" ? n.value = t.items : console.error("energy-components: The prop is not an Object");
-    }, _ = (e, a) => {
-      const r = {
+    }, i = () => {
+      s.trimItems && r.value.length >= 3 ? p() : s.leftTrim && r.value.length >= 3 ? b() : typeof s.items == "object" ? a.value = s.items : console.error("energy-components: The prop is not an Object");
+    }, k = (e, n) => {
+      const t = {
         ...e,
-        inverse: o.value,
+        inverse: l.value,
         customClass: "rds-e-breadcrumbs__link--text"
       };
-      return a !== n.value.length - 1 && Object.assign(r, {
+      return n !== a.value.length - 1 && Object.assign(t, {
         arrow: !0,
         right: !0,
         arrowSmall: !0
-      }), r;
-    }, b = (e) => ({
-      click: (r) => {
-        r.preventDefault(), r.stopPropagation(), e != null && e.clickable && m();
+      }), t;
+    }, _ = (e) => ({
+      click: (t) => {
+        t.preventDefault(), t.stopPropagation(), e != null && e.clickable && d();
       }
-    }), k = (e) => [
+    }), g = (e) => [
       "rds-e-breadcrumbs__link",
       e != null && e.active ? "rds-e-breadcrumbs__link--active" : "",
-      o.value && (e != null && e.active) ? "rds-e-breadcrumbs__link--inverse-active" : ""
+      l.value && (e != null && e.active) ? "rds-e-breadcrumbs__link--inverse-active" : ""
     ];
-    return y(() => {
-      u();
-    }), L(() => {
-      u();
-    }), (e, a) => (l(!0), c(I, null, w(n.value, (r, i) => (l(), c("ul", {
-      key: i,
-      class: x(["rds-e-breadcrumbs", `${B(o) ? "rds-e-breadcrumbs--inverse" : ""}`])
+    return L(() => {
+      i();
+    }), T(() => {
+      i();
+    }), (e, n) => (c(!0), o(I, null, x(a.value, (t, f) => (c(), o("ul", {
+      key: f,
+      class: w(["rds-e-breadcrumbs", `${B(l) ? "rds-e-breadcrumbs--inverse" : ""}`])
     }, [
-      j(N, E({
-        class: k(r)
-      }, { ref_for: !0 }, _(r, i), P(b(r))), {
-        default: T(() => [
-          r != null && r.clickable ? (l(), c("span", R, "...")) : D("", !0)
+      j(O, E({
+        class: g(t)
+      }, { ref_for: !0 }, k(t, f), P(_(t))), {
+        default: D(() => [
+          t != null && t.clickable ? (c(), o("span", S, "...")) : N("", !0)
         ]),
         _: 2
       }, 1040, ["class"])
     ], 2))), 128));
   }
-}), A = /* @__PURE__ */ O(S, [["__scopeId", "data-v-696e4937"]]);
+}), F = /* @__PURE__ */ R(V, [["__scopeId", "data-v-ea69b47a"]]);
 export {
-  A as default
+  F as default
 };

package/dist/components/checkbox.es.js

@@ -1,7 +1,8 @@
-import { defineComponent as y, ref as n, watch as b, onMounted as w, onBeforeUnmount as g, createElementBlock as S, openBlock as f, normalizeClass as d, createElementVNode as r, renderSlot as B, createTextVNode as C, createBlock as _, createCommentVNode as E, toDisplayString as L } from "vue";
-import { R as V } from "./icon-svg-DuzOdbk1.js";
-import { _ as D } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-import './style/checkbox.css';const N = ["id", "checked", "aria-label", "required", "disabled"], R = ["for"], q = /* @__PURE__ */ y({
+import { defineComponent as g, ref as n, watch as f, onMounted as S, onBeforeUnmount as B, createElementBlock as C, openBlock as r, normalizeClass as c, createElementVNode as s, renderSlot as V, createTextVNode as D, createBlock as m, createCommentVNode as E, toDisplayString as L, withCtx as N, createVNode as R } from "vue";
+import { R as k } from "./icon-svg-DuzOdbk1.js";
+import T from "./tooltip.es.js";
+import { _ as q } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+import './style/checkbox.css';const p = ["id", "checked", "aria-label", "required", "disabled"], z = ["for"], F = /* @__PURE__ */ g({
   __name: "checkbox",
   props: {
     /**
@@ -32,6 +33,13 @@ import './style/checkbox.css';const N = ["id", "checked", "aria-label", "require
       type: String,
       default: ""
     },
+    /**
+     * <span>Texto del tooltip para el icono. Si se proporciona, el icono mostrará un tooltip.</span>
+     */
+    iconTooltip: {
+      type: String,
+      default: ""
+    },
     /**
      * <span>Estado del checkbox</span>
      */
@@ -69,58 +77,58 @@ import './style/checkbox.css';const N = ["id", "checked", "aria-label", "require
     }
   },
   emits: ["update:modelValue"],
-  setup(e, { emit: m }) {
-    const o = e, k = m, t = n(o.isChecked), c = n(!1), i = n(!1), l = n(null);
-    b(() => o.isChecked, (a) => {
-      t.value = a;
-    }), b(
-      () => o.indeterminate,
-      (a) => {
-        l.value && (l.value.indeterminate = !!(a && t.value));
+  setup(e, { emit: h }) {
+    const l = e, x = h, a = n(l.isChecked), i = n(!1), d = n(!1), o = n(null);
+    f(() => l.isChecked, (t) => {
+      a.value = t;
+    }), f(
+      () => l.indeterminate,
+      (t) => {
+        o.value && (o.value.indeterminate = !!(t && a.value));
       },
       { immediate: !0 }
     );
-    const h = () => {
-      i.value && (c.value = !0);
-    }, v = () => c.value = !1, x = (a) => {
-      t.value = a.target.checked, k("update:modelValue", a.target.checked);
-    }, s = (a) => {
-      a.key === "Tab" && (i.value = !0);
-    }, u = () => {
-      i.value = !1;
+    const v = () => {
+      d.value && (i.value = !0);
+    }, y = () => i.value = !1, w = (t) => {
+      a.value = t.target.checked, x("update:modelValue", t.target.checked);
+    }, u = (t) => {
+      t.key === "Tab" && (d.value = !0);
+    }, b = () => {
+      d.value = !1;
     };
-    return w(() => {
-      l.value && (l.value.indeterminate = !!(o.indeterminate && t.value)), window.addEventListener("keydown", s), window.addEventListener("mousedown", u);
-    }), g(() => {
-      window.removeEventListener("keydown", s), window.removeEventListener("mousedown", u);
-    }), (a, p) => (f(), S("div", {
-      class: d(["rds-e-checkbox__container", { "rds-e-checkbox__container--focused": c.value }])
+    return S(() => {
+      o.value && (o.value.indeterminate = !!(l.indeterminate && a.value)), window.addEventListener("keydown", u), window.addEventListener("mousedown", b);
+    }), B(() => {
+      window.removeEventListener("keydown", u), window.removeEventListener("mousedown", b);
+    }), (t, I) => (r(), C("div", {
+      class: c(["rds-e-checkbox__container", { "rds-e-checkbox__container--focused": i.value }])
     }, [
-      r("input", {
+      s("input", {
         id: e.id.toString(),
         ref_key: "inputRef",
-        ref: l,
+        ref: o,
         checked: e.isChecked,
         "aria-label": e.accessibilityLabel,
         type: "checkbox",
-        class: d(["rds-e-checkbox", { "rds-e-checkbox--error": e.error }]),
+        class: c(["rds-e-checkbox", { "rds-e-checkbox--error": e.error }]),
         required: e.required,
         disabled: e.disabled,
-        onChange: x,
-        onFocus: h,
-        onBlur: v
-      }, null, 42, N),
-      r("label", {
+        onChange: w,
+        onFocus: v,
+        onBlur: y
+      }, null, 42, p),
+      s("label", {
         for: e.id.toString(),
-        class: d(["rds-e-checkbox__label", {
+        class: c(["rds-e-checkbox__label", {
           "rds-e-checkbox__label--disabled": e.disabled,
-          "rds-e-checkbox__label--checked": t.value,
-          "rds-e-checkbox__label--indeterminate": e.indeterminate && t.value
+          "rds-e-checkbox__label--checked": a.value,
+          "rds-e-checkbox__label--indeterminate": e.indeterminate && a.value
         }])
       }, [
-        B(a.$slots, "label-text", {}, () => [
-          r("span", {
-            class: d([
+        V(t.$slots, "label-text", {}, () => [
+          s("span", {
+            class: c([
               "rds-e-checkbox__label-box",
               {
                 "rds-e-checkbox__label-box--disabled": e.disabled,
@@ -128,19 +136,33 @@ import './style/checkbox.css';const N = ["id", "checked", "aria-label", "require
               }
             ])
           }, [
-            C(L(e.label) + " ", 1),
-            e.icon ? (f(), _(V, {
+            D(L(e.label) + " ", 1),
+            e.icon && e.iconTooltip ? (r(), m(T, {
               key: 0,
+              content: e.iconTooltip,
+              placement: "top",
+              "offset-space": 8
+            }, {
+              default: N(() => [
+                R(k, {
+                  class: "rds-e-checkbox__label-box--icon",
+                  name: e.icon,
+                  size: "sm"
+                }, null, 8, ["name"])
+              ]),
+              _: 1
+            }, 8, ["content"])) : e.icon ? (r(), m(k, {
+              key: 1,
               class: "rds-e-checkbox__label-box--icon",
               name: e.icon,
               size: "sm"
             }, null, 8, ["name"])) : E("", !0)
           ], 2)
         ], !0)
-      ], 10, R)
+      ], 10, z)
     ], 2));
   }
-}), K = /* @__PURE__ */ D(q, [["__scopeId", "data-v-1f3c3114"]]);
+}), $ = /* @__PURE__ */ q(F, [["__scopeId", "data-v-472a518b"]]);
 export {
-  K as default
+  $ as default
 };