energy-components 2.1.0 → 2.3.0

package/dist/components/tooltip.es.js

@@ -1,11 +1,11 @@
-import { defineComponent as ne, computed as i, ref as c, onBeforeUnmount as le, openBlock as _, createElementBlock as R, createElementVNode as O, renderSlot as U, createBlock as ie, Teleport as re, normalizeClass as V, toDisplayString as j, createVNode as ae, createCommentVNode as P, createTextVNode as se, nextTick as ue } from "vue";
-import { a as ce, o as de, f as pe, s as fe, b as ve, c as me, d as ge } from "./floating-ui.vue-DMBZhA6d.js";
-import { R as he } from "./icon-svg-CW3eQRcp.js";
-import { _ as we } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-import './style/tooltip.css';const ye = ["id"], _e = ["aria-hidden"], Oe = {
+import { defineComponent as ie, computed as a, ref as c, watch as re, nextTick as V, onBeforeUnmount as ae, openBlock as O, createElementBlock as $, createElementVNode as k, renderSlot as j, createBlock as se, Teleport as ue, normalizeClass as P, toDisplayString as W, createVNode as ce, createCommentVNode as z, createTextVNode as de } from "vue";
+import { a as X, o as fe, f as pe, s as ve, b as me, c as ge, d as he } from "./floating-ui.vue-DMBZhA6d.js";
+import { R as we } from "./icon-svg-CW3eQRcp.js";
+import { _ as ye } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+import './style/tooltip.css';const _e = ["id"], Oe = ["aria-hidden"], ke = {
   key: 0,
   class: "rds-e-tooltip__header"
-}, ke = { class: "rds-e-tooltip__title" }, Te = { class: "rds-e-tooltip__content" }, Ce = /* @__PURE__ */ ne({
+}, Ce = { class: "rds-e-tooltip__title" }, Te = { class: "rds-e-tooltip__content" }, xe = /* @__PURE__ */ ie({
   __name: "tooltip",
   props: {
     /**
@@ -106,7 +106,7 @@ import './style/tooltip.css';const ye = ["id"], _e = ["aria-hidden"], Oe = {
       default: !1
     },
     /**
-     * <span>Controla la visibilidad mediante v-model:open. Si se establece, el componente se comporta de forma controlada.</span>
+     * <span>Controla la visibilidad mediante v-model:open. Si se pasa (true o false), el componente entra en modo controlado: los eventos internos (hover/focus/click) solo emiten `update:open` sin cambiar la visibilidad directamente. Para volver al modo no controlado, no pasar la prop (undefined).</span>
      */
     open: {
       type: Boolean,
@@ -151,182 +151,198 @@ import './style/tooltip.css';const ye = ["id"], _e = ["aria-hidden"], Oe = {
      */
     "update:open"
   ],
-  setup(n, { expose: W, emit: z }) {
-    const e = n, k = z, D = i(() => {
+  setup(n, { expose: Y, emit: q }) {
+    const e = n, C = q, L = a(() => {
       if (!e.teleportTo || typeof window > "u") return null;
       try {
         return document.querySelector(e.teleportTo) || null;
       } catch {
         return null;
       }
-    }), a = c(), s = c(), d = c(), p = c(!0), T = c("");
-    let r = null, C = !1, x = !1, o = null;
-    const f = c(null), M = i(() => e.open !== void 0), $ = i(() => e.openOnHover && !e.openOnClick), L = i(() => e.openOnFocus && !e.openOnClick), v = (t) => {
-      M.value ? k("update:open", t) : (p.value = !t, k(t ? "show" : "hide"));
-    }, l = i(() => M.value ? !!e.open : !p.value), A = i(() => Math.min(Math.max(e.hideDelay, 0), 3e3)), X = i(() => ({
+    }), l = c(), i = c(), d = c(), f = c(!0), T = c("");
+    let s = null, x = !1, B = !1, o = null;
+    const p = c(null), S = a(() => e.open !== void 0), A = a(() => e.openOnHover && !e.openOnClick), H = a(() => e.openOnFocus && !e.openOnClick), v = (t) => {
+      S.value ? C("update:open", t) : (f.value = !t, C(t ? "show" : "hide"));
+    }, r = a(() => S.value ? !!e.open : !f.value), N = a(() => Math.min(Math.max(e.hideDelay, 0), 3e3)), G = a(() => ({
       "rds-e-tooltip__tooltip": !0,
-      "rds-e-tooltip__tooltip-hidden": !l.value,
+      "rds-e-tooltip__tooltip-hidden": !r.value,
       "rds-e-tooltip__tooltip--large": e.large,
       "rds-e-tooltip__tooltip--inverse": e.inverse
-    })), H = async () => {
+    })), m = async () => {
       const t = [
-        de(e.offsetSpace),
+        fe(e.offsetSpace),
         pe(),
-        fe(),
-        ve({
-          apply({ availableHeight: w, availableWidth: y, elements: b }) {
-            Object.assign(b.floating.style, {
-              maxWidth: e.fullWidth ? `${Math.max(0, y)}px` : "380px",
+        ve(),
+        me({
+          apply({ availableHeight: y, availableWidth: _, elements: M }) {
+            Object.assign(M.floating.style, {
+              maxWidth: e.fullWidth ? `${Math.max(0, _)}px` : "380px",
               width: "max-content",
-              maxHeight: `${Math.max(0, w)}px`
+              maxHeight: `${Math.max(0, y)}px`
             });
           }
         })
       ];
-      !e.hideArrow && d.value && t.push(me({
+      !e.hideArrow && d.value && t.push(ge({
         element: d.value,
         padding: e.large ? 16 : 8
       }));
-      const u = e.target === "cursor" && e.openOnClick && f.value ? {
-        getBoundingClientRect: () => new DOMRect(f.value.x, f.value.y, 0, 0),
-        contextElement: a.value
-      } : a.value, { x: B, y: S, middlewareData: E, placement: I } = await ge(
+      const u = e.target === "cursor" && e.openOnClick && p.value ? {
+        getBoundingClientRect: () => new DOMRect(p.value.x, p.value.y, 0, 0),
+        contextElement: l.value
+      } : l.value, { x: E, y: R, middlewareData: D, placement: I } = await he(
         u,
-        s.value,
+        i.value,
         {
           placement: e.placement,
           middleware: t
         }
       );
-      if (Object.assign(s.value.style, {
-        left: `${B}px`,
-        top: `${S}px`
-      }), !e.hideArrow && d.value && E.arrow) {
-        const { x: w, y } = E.arrow, b = {
+      if (Object.assign(i.value.style, {
+        left: `${E}px`,
+        top: `${R}px`
+      }), !e.hideArrow && d.value && D.arrow) {
+        const { x: y, y: _ } = D.arrow, M = {
           left: "right",
           right: "left",
           bottom: "top",
           top: "bottom"
         };
         T.value = `rds-e-tooltip__tooltip-arrow--${I}`, Object.assign(d.value.style, {
-          left: w != null ? `${w}px` : "",
-          top: y != null ? `${y}px` : "",
+          left: y != null ? `${y}px` : "",
+          top: _ != null ? `${_}px` : "",
           bottom: "",
           right: "",
-          [b[I.split("-")[0]]]: "-4px"
+          [M[I.split("-")[0]]]: "-4px"
         });
       } else e.hideArrow && (T.value = "");
-    }, Y = () => {
-      clearTimeout(r), l.value ? v(!1) : p.value = !0;
-    }, N = () => {
-      e.title || (l.value ? v(!1) : p.value = !0, o && (o(), o = null)), clearTimeout(r);
-    }, m = () => {
-      e.suppressed || (clearTimeout(r), v(!0), ue(() => {
-        H(), e.autoUpdate && a.value && s.value && (o?.(), o = ce(
-          a.value,
-          s.value,
+    };
+    re(
+      () => e.open,
+      (t) => {
+        S.value && (t ? V(() => {
+          !l.value || !i.value || (m(), e.autoUpdate && (o?.(), o = X(
+            l.value,
+            i.value,
+            () => {
+              m();
+            }
+          )), e.openOnClick && F());
+        }) : (o && (o(), o = null), e.openOnClick && b()));
+      },
+      { immediate: !0 }
+    );
+    const J = () => {
+      clearTimeout(s), r.value ? v(!1) : f.value = !0;
+    }, U = () => {
+      e.title || (r.value ? v(!1) : f.value = !0, o && (o(), o = null)), clearTimeout(s);
+    }, g = () => {
+      e.suppressed || (clearTimeout(s), v(!0), V(() => {
+        m(), e.autoUpdate && l.value && i.value && (o?.(), o = X(
+          l.value,
+          i.value,
           () => {
-            H();
+            m();
           }
-        )), e.openOnClick && Z();
+        )), e.openOnClick && F();
       }));
-    }, q = () => {
-      $.value && (x = !0, m());
-    }, G = () => {
-      $.value && (x = !1, r = setTimeout(() => {
-        C || N();
-      }, A.value));
-    }, J = (t) => {
-      e.openOnClick && (f.value = { x: t.clientX, y: t.clientY }, l.value ? h() : m());
     }, K = () => {
-      L.value && m();
+      A.value && (B = !0, g());
     }, Q = () => {
-      L.value && Y();
+      A.value && (B = !1, s = setTimeout(() => {
+        x || U();
+      }, N.value));
+    }, Z = (t) => {
+      e.openOnClick && (p.value = { x: t.clientX, y: t.clientY }, r.value ? w() : g());
+    }, ee = () => {
+      H.value && g();
+    }, te = () => {
+      H.value && J();
     };
-    function g(t) {
+    function h(t) {
       if (!e.openOnClick) return;
-      const u = t.target, B = a.value, S = s.value;
-      !!!(u && (B?.contains(u) || S?.contains(u))) && l.value && h();
-    }
-    function Z() {
-      typeof window > "u" || (window.addEventListener("pointerdown", g, { capture: !0 }), window.addEventListener("mousedown", g, { capture: !0 }));
+      const u = t.target, E = l.value, R = i.value;
+      !!!(u && (E?.contains(u) || R?.contains(u))) && r.value && w();
     }
     function F() {
-      typeof window > "u" || (window.removeEventListener("pointerdown", g, { capture: !0 }), window.removeEventListener("mousedown", g, { capture: !0 }));
+      typeof window > "u" || (window.addEventListener("pointerdown", h, { capture: !0 }), window.addEventListener("mousedown", h, { capture: !0 }));
     }
-    const ee = () => {
-      e.openOnClick || (C = !0, clearTimeout(r));
-    }, te = () => {
-      e.openOnClick || (C = !1, x || (r = setTimeout(() => {
-        N();
-      }, A.value)));
-    };
-    function h() {
-      l.value && (v(!1), o && (o(), o = null), e.openOnClick && F());
+    function b() {
+      typeof window > "u" || (window.removeEventListener("pointerdown", h, { capture: !0 }), window.removeEventListener("mousedown", h, { capture: !0 }));
     }
     const oe = () => {
-      h();
+      e.openOnClick || (x = !0, clearTimeout(s));
+    }, ne = () => {
+      e.openOnClick || (x = !1, B || (s = setTimeout(() => {
+        U();
+      }, N.value)));
+    };
+    function w() {
+      r.value && (v(!1), o && (o(), o = null), e.openOnClick && b());
+    }
+    const le = () => {
+      w();
     };
-    return W({
-      show: m,
-      hide: h,
-      isOpen: i(() => l.value)
-    }), le(() => {
-      clearTimeout(r), o && (o(), o = null), e.openOnClick && F();
-    }), (t, u) => (_(), R("div", {
+    return Y({
+      show: g,
+      hide: w,
+      isOpen: a(() => r.value)
+    }), ae(() => {
+      clearTimeout(s), o && (o(), o = null), e.openOnClick && b();
+    }), (t, u) => (O(), $("div", {
       id: n.id,
       class: "rds-e-tooltip"
     }, [
-      O("div", {
+      k("div", {
         ref_key: "referenceRef",
-        ref: a,
+        ref: l,
         class: "rds-e-tooltip__trigger",
-        onBlur: Q,
-        onFocus: K,
-        onClick: J,
-        onMouseenter: q,
-        onMouseleave: G
+        onBlur: te,
+        onFocus: ee,
+        onClick: Z,
+        onMouseenter: K,
+        onMouseleave: Q
       }, [
-        U(t.$slots, "default", {}, void 0, !0)
+        j(t.$slots, "default", {}, void 0, !0)
       ], 544),
-      (_(), ie(re, {
-        to: D.value,
-        disabled: !D.value
+      (O(), se(ue, {
+        to: L.value,
+        disabled: !L.value
       }, [
-        O("div", {
+        k("div", {
           ref_key: "floatingRef",
-          ref: s,
-          class: V(X.value),
+          ref: i,
+          class: P(G.value),
           role: "tooltip",
-          "aria-hidden": !l.value,
-          onMouseenter: ee,
-          onMouseleave: te
+          "aria-hidden": !r.value,
+          onMouseenter: oe,
+          onMouseleave: ne
         }, [
-          n.title ? (_(), R("div", Oe, [
-            O("h3", ke, j(n.title), 1),
-            ae(he, {
+          n.title ? (O(), $("div", ke, [
+            k("h3", Ce, W(n.title), 1),
+            ce(we, {
               name: "close",
               "aria-hidden": "true",
               class: "rds-e-tooltip__icon",
-              onClick: oe
+              onClick: le
             })
-          ])) : P("", !0),
-          O("div", Te, [
-            U(t.$slots, "tooltip-content", {}, () => [
-              se(j(n.content), 1)
+          ])) : z("", !0),
+          k("div", Te, [
+            j(t.$slots, "tooltip-content", {}, () => [
+              de(W(n.content), 1)
             ], !0)
           ]),
-          n.hideArrow ? P("", !0) : (_(), R("div", {
+          n.hideArrow ? z("", !0) : (O(), $("div", {
             key: 1,
             ref_key: "arrowRef",
             ref: d,
-            class: V(["rds-e-tooltip__tooltip-arrow", T.value])
+            class: P(["rds-e-tooltip__tooltip-arrow", T.value])
           }, null, 2))
-        ], 42, _e)
+        ], 42, Oe)
       ], 8, ["to", "disabled"]))
-    ], 8, ye));
+    ], 8, _e));
   }
-}), be = /* @__PURE__ */ we(Ce, [["__scopeId", "data-v-6d36e60d"]]);
+}), Re = /* @__PURE__ */ ye(xe, [["__scopeId", "data-v-faf4bcdb"]]);
 export {
-  be as default
+  Re as default
 };