energy-components 2.3.1 → 2.5.0

package/dist/components/toggle.es.js

@@ -1,6 +1,7 @@
-import { defineComponent as L, toRefs as R, ref as V, computed as E, onMounted as w, openBlock as B, createElementBlock as F, normalizeClass as g, createElementVNode as m, unref as d, toDisplayString as r } from "vue";
-import { _ as I } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-import './style/toggle.css';const C = ["id"], G = ["id"], H = ["id"], W = /* @__PURE__ */ L({
+import { defineComponent as V, toRefs as D, ref as b, computed as h, onMounted as A, openBlock as c, createElementBlock as L, normalizeClass as m, createElementVNode as E, createBlock as I, createCommentVNode as u, toDisplayString as F, nextTick as C } from "vue";
+import { R as x } from "./icon-svg-CW3eQRcp.js";
+import { _ as W } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+import './style/toggle.css';const $ = ["id", "aria-label"], N = ["id", "aria-checked", "aria-label", "tabindex"], K = { key: 1 }, M = ["id", "aria-checked", "aria-label", "tabindex"], j = { key: 1 }, q = /* @__PURE__ */ V({
   __name: "toggle",
   props: {
     small: { type: Boolean },
@@ -11,53 +12,108 @@ import './style/toggle.css';const C = ["id"], G = ["id"], H = ["id"], W = /* @__
     valueRight: {},
     labelLeft: {},
     labelRight: {},
+    iconLeft: {},
+    iconRight: {},
+    ariaLabelLeft: {},
+    ariaLabelRight: {},
+    ariaLabel: {},
     id: {},
     variant: {}
   },
   emits: ["update:modelValue"],
-  setup(e, { emit: c }) {
-    const h = e, o = c, { modelValue: u, switchType: n, valueLeft: v, valueRight: s, variant: b } = R(h), t = {
+  setup(a, { emit: B }) {
+    const t = a, s = B, { modelValue: d, switchType: g, valueLeft: R, valueRight: f, variant: G } = D(t), e = {
       LEFT: "left",
       RIGHT: "right"
-    }, l = V(t.LEFT), T = E(() => {
-      const a = b?.value ?? "default";
-      return a === "navy" ? "rds-e-toggle--navy" : a === "floating" ? "rds-e-toggle--floating" : "";
-    }), f = (a) => {
-      o("update:modelValue", a);
+    }, i = b(e.LEFT), T = b(null), y = b(null), H = h(() => {
+      const l = G?.value ?? "default";
+      return l === "navy" ? "rds-e-toggle--navy" : l === "floating" ? "rds-e-toggle--floating" : "";
+    }), n = h(() => !(t.iconLeft || t.iconRight) ? "label" : !!(t.labelLeft || t.labelRight) ? "icon-label" : "icon"), k = h(() => t.small ? 16 : 20), z = (l) => {
+      s("update:modelValue", l);
+    }, r = async (l) => {
+      i.value = l, z(
+        l === e.LEFT ? g?.value ? !0 : R?.value : g?.value ? !1 : f?.value
+      ), await C(), l === e.LEFT ? T.value?.focus() : y.value?.focus();
+    }, S = (l) => {
+      if (["ArrowLeft", "ArrowRight", "Enter", " "].includes(l.key))
+        if (l.preventDefault(), l.key === "ArrowRight") {
+          const o = i.value === e.LEFT ? e.RIGHT : e.LEFT;
+          r(o);
+        } else if (l.key === "ArrowLeft") {
+          const o = i.value === e.RIGHT ? e.LEFT : e.RIGHT;
+          r(o);
+        } else {
+          const o = l.target, v = l.currentTarget.querySelectorAll(".rds-e-toggle__tab"), w = Array.from(v).indexOf(o);
+          r(w === 0 ? e.LEFT : w === 1 ? e.RIGHT : i.value);
+        }
     };
-    return w(() => {
-      n?.value ? (o("update:modelValue", u?.value), l.value = u?.value ? t.RIGHT : t.LEFT) : u?.value === s?.value ? (o("update:modelValue", s?.value), l.value = t.RIGHT) : (o("update:modelValue", v?.value), l.value = t.LEFT);
-    }), (a, i) => (B(), F("div", {
-      id: e.id,
-      class: g(["rds-e-toggle", [
+    return A(() => {
+      !!t.iconLeft != !!t.iconRight && console.warn("[RDSToggle] iconLeft e iconRight deben proporcionarse juntos para una visualización consistente."), n.value === "icon" && !t.ariaLabel && console.warn("[RDSToggle] ariaLabel es obligatorio en modo icon-only para garantizar accesibilidad."), n.value === "icon" && !t.ariaLabelLeft && console.warn("[RDSToggle] ariaLabelLeft es obligatorio en modo icon-only para garantizar accesibilidad."), n.value === "icon" && !t.ariaLabelRight && console.warn("[RDSToggle] ariaLabelRight es obligatorio en modo icon-only para garantizar accesibilidad."), g?.value ? (s("update:modelValue", d?.value), i.value = d?.value ? e.RIGHT : e.LEFT) : d?.value === f?.value ? (s("update:modelValue", f?.value), i.value = e.RIGHT) : (s("update:modelValue", R?.value), i.value = e.LEFT);
+    }), (l, o) => (c(), L("div", {
+      id: a.id,
+      class: m(["rds-e-toggle", [
         {
-          "rds-e-toggle--small-full-width": e.small && e.fullWidth,
-          "rds-e-toggle--full-width": e.fullWidth && !e.small,
-          "rds-e-toggle--small": e.small && !e.fullWidth,
-          "rds-e-toggle--width": !e.small && !e.fullWidth
+          "rds-e-toggle--small-full-width": a.small && a.fullWidth,
+          "rds-e-toggle--full-width": a.fullWidth && !a.small,
+          "rds-e-toggle--small": a.small && !a.fullWidth,
+          "rds-e-toggle--width": !a.small && !a.fullWidth,
+          "rds-e-toggle--icon-mode": n.value === "icon"
         },
-        T.value
-      ]])
+        H.value
+      ]]),
+      role: "radiogroup",
+      "aria-label": a.ariaLabel,
+      onKeydown: S
     }, [
-      m("button", {
-        id: e.id ? `${e.id}-left` : void 0,
-        class: g(["rds-e-toggle__tab", {
-          "rds-e-toggle__tab--active": l.value === t.LEFT
+      E("button", {
+        id: a.id ? `${a.id}-left` : void 0,
+        ref_key: "leftBtnRef",
+        ref: T,
+        class: m(["rds-e-toggle__tab", {
+          "rds-e-toggle__tab--active": i.value === e.LEFT,
+          "rds-e-toggle__tab--icon-only": n.value === "icon"
         }]),
         type: "button",
-        onClick: i[0] || (i[0] = (y) => (f(d(n) ? !0 : d(v)), l.value = t.LEFT))
-      }, r(e.labelLeft), 11, G),
-      m("button", {
-        id: e.id ? `${e.id}-right` : void 0,
-        class: g(["rds-e-toggle__tab", {
-          "rds-e-toggle__tab--active": l.value === t.RIGHT
+        role: "radio",
+        "aria-checked": i.value === e.LEFT,
+        "aria-label": n.value === "icon" ? a.ariaLabelLeft : void 0,
+        tabindex: i.value === e.LEFT ? 0 : -1,
+        onClick: o[0] || (o[0] = (v) => r(e.LEFT))
+      }, [
+        n.value !== "label" ? (c(), I(x, {
+          key: 0,
+          class: "rds-e-toggle__tab-icon",
+          name: t.iconLeft ?? "replace_this_icon",
+          size: k.value
+        }, null, 8, ["name", "size"])) : u("", !0),
+        a.labelLeft ? (c(), L("span", K, F(a.labelLeft), 1)) : u("", !0)
+      ], 10, N),
+      E("button", {
+        id: a.id ? `${a.id}-right` : void 0,
+        ref_key: "rightBtnRef",
+        ref: y,
+        class: m(["rds-e-toggle__tab", {
+          "rds-e-toggle__tab--active": i.value === e.RIGHT,
+          "rds-e-toggle__tab--icon-only": n.value === "icon"
         }]),
         type: "button",
-        onClick: i[1] || (i[1] = (y) => (f(d(n) ? !1 : d(s)), l.value = t.RIGHT))
-      }, r(e.labelRight), 11, H)
-    ], 10, C));
+        role: "radio",
+        "aria-checked": i.value === e.RIGHT,
+        "aria-label": n.value === "icon" ? a.ariaLabelRight : void 0,
+        tabindex: i.value === e.RIGHT ? 0 : -1,
+        onClick: o[1] || (o[1] = (v) => r(e.RIGHT))
+      }, [
+        n.value !== "label" ? (c(), I(x, {
+          key: 0,
+          class: "rds-e-toggle__tab-icon",
+          name: t.iconRight ?? "replace_this_icon",
+          size: k.value
+        }, null, 8, ["name", "size"])) : u("", !0),
+        a.labelRight ? (c(), L("span", j, F(a.labelRight), 1)) : u("", !0)
+      ], 10, M)
+    ], 42, $));
   }
-}), x = /* @__PURE__ */ I(W, [["__scopeId", "data-v-8469b457"]]);
+}), p = /* @__PURE__ */ W(q, [["__scopeId", "data-v-4dc4c0be"]]);
 export {
-  x as default
+  p as default
 };