energy-components 1.18.0 → 1.19.0-beta.0

package/dist/components/tooltip.es.js

@@ -1,11 +1,11 @@
-import { defineComponent as E, toRefs as I, ref as o, computed as S, createElementBlock as p, openBlock as f, createElementVNode as i, renderSlot as k, normalizeClass as R, createCommentVNode as $, unref as b, createVNode as P, toDisplayString as B, createTextVNode as F, nextTick as X } from "vue";
-import { c as Y, o as q, f as G, s as J, a as K, b as L } from "./floating-ui.vue-7LKzPqHI.js";
-import { R as Q } from "./icon-svg-arye8CV8.js";
-import { _ as U } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-import './style/tooltip.css';const Z = ["id"], ee = {
+import { defineComponent as J, toRefs as K, ref as r, computed as _, onBeforeUnmount as Q, createElementBlock as y, openBlock as c, createElementVNode as p, createBlock as Z, renderSlot as C, Teleport as ee, normalizeClass as M, createCommentVNode as D, unref as N, createVNode as te, toDisplayString as O, createTextVNode as oe, nextTick as le } from "vue";
+import { a as ae, c as se, o as ie, f as re, s as ne, b as de, d as ue } from "./floating-ui.vue-DWAG1g94.js";
+import { R as ce } from "./icon-svg-arye8CV8.js";
+import { _ as pe } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+import './style/tooltip.css';const fe = ["id"], me = {
   key: 0,
   class: "rds-e-tooltip__header"
-}, te = { class: "rds-e-tooltip__title" }, oe = { class: "rds-e-tooltip__content" }, le = /* @__PURE__ */ E({
+}, ve = { class: "rds-e-tooltip__title" }, he = { class: "rds-e-tooltip__content" }, _e = /* @__PURE__ */ J({
   __name: "tooltip",
   props: {
     /**
@@ -41,7 +41,6 @@ import './style/tooltip.css';const Z = ["id"], ee = {
     large: {
       type: Boolean,
       default: !1
-      // Aquí se necesita aclaración, ya que en el original se menciona 'size: 'large'', pero no se define un default para 'large'
     },
     /**
      * <span>Especifica si el tooltip debe ocupar el ancho completo</span>
@@ -77,6 +76,27 @@ import './style/tooltip.css';const Z = ["id"], ee = {
     hideArrow: {
       type: Boolean,
       default: !1
+    },
+    /**
+     * <span>Delay (ms) para ocultar el tooltip tras abandonar el trigger o el propio tooltip. Máximo 3000ms.</span>
+     */
+    hideDelay: {
+      type: Number,
+      default: 0
+    },
+    /**
+     * <span>Actualiza la posición automáticamente en scroll/resize/mutaciones</span>
+     */
+    autoUpdate: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * <span>Selector para teleport (ej: 'body', '#modal-container'). Si no se especifica se renderiza inline.</span>
+     */
+    teleportTo: {
+      type: String,
+      default: null
     }
   },
   emits: [
@@ -91,114 +111,145 @@ import './style/tooltip.css';const Z = ["id"], ee = {
      */
     "hide"
   ],
-  setup(l, { expose: C, emit: N }) {
-    const s = l, r = N, { large: u, fullWidth: D, title: t, inverse: M } = I(s), m = o(), n = o(), d = o(), e = o(!0), _ = o(""), O = S(() => ({
+  setup(l, { expose: E, emit: H }) {
+    const a = l, n = H, { large: g, fullWidth: V, title: s, inverse: j } = K(a), d = r(), i = r(), f = r(), e = r(!0), T = r("");
+    let o = null, m = !1, v = !1, t = null;
+    const x = _(() => Math.min(Math.max(a.hideDelay, 0), 3e3)), I = _(() => ({
       "rds-e-tooltip__tooltip": !0,
       "rds-e-tooltip__tooltip-hidden": e.value,
-      "rds-e-tooltip__tooltip--large": u.value,
-      "rds-e-tooltip__tooltip--inverse": M.value
-    })), V = async () => {
-      const { x: a, y, middlewareData: A, placement: g } = await Y(
-        m.value,
-        n.value,
+      "rds-e-tooltip__tooltip--large": g.value,
+      "rds-e-tooltip__tooltip--inverse": j.value
+    })), w = async () => {
+      const { x: u, y: k, middlewareData: F, placement: B } = await se(
+        d.value,
+        i.value,
         {
-          placement: s.placement,
+          placement: a.placement,
           middleware: [
-            q(s.offsetSpace),
-            G(),
-            J(),
-            K({
-              apply({ availableHeight: T, availableWidth: W, elements: z }) {
-                Object.assign(z.floating.style, {
-                  maxWidth: D.value ? `${Math.max(0, W)}px` : "380px",
+            ie(a.offsetSpace),
+            re(),
+            ne(),
+            de({
+              apply({ availableHeight: Y, availableWidth: q, elements: G }) {
+                Object.assign(G.floating.style, {
+                  maxWidth: V.value ? `${Math.max(0, q)}px` : "380px",
                   width: "max-content",
-                  maxHeight: `${Math.max(0, T)}px`
+                  maxHeight: `${Math.max(0, Y)}px`
                 });
               }
             }),
-            L({
-              element: d.value,
-              padding: u.value ? 16 : 8
+            ue({
+              element: f.value,
+              padding: g.value ? 16 : 8
             })
           ]
         }
       );
-      Object.assign(n.value.style, {
-        left: `${a}px`,
-        top: `${y}px`
+      Object.assign(i.value.style, {
+        left: `${u}px`,
+        top: `${k}px`
       });
-      const { x, y: w } = A.arrow, H = {
+      const { x: R, y: $ } = F.arrow, X = {
         left: "right",
         right: "left",
         bottom: "top",
         top: "bottom"
       };
-      _.value = `rds-e-tooltip__tooltip-arrow--${g}`, Object.assign(d.value.style, {
-        left: x != null ? `${x}px` : "",
-        top: w != null ? `${w}px` : "",
+      T.value = `rds-e-tooltip__tooltip-arrow--${B}`, Object.assign(f.value.style, {
+        left: R != null ? `${R}px` : "",
+        top: $ != null ? `${$}px` : "",
         bottom: "",
         right: "",
-        [H[g.split("-")[0]]]: "-4px"
+        [X[B.split("-")[0]]]: "-4px"
       });
-    }, v = () => {
-      t != null && t.value || (e.value = !0, r("hide"));
-    }, c = () => {
-      s.suppressed || (e.value = !1, r("show"), X(() => {
-        V();
-      }));
+    }, U = () => {
+      clearTimeout(o), e.value ? e.value = !0 : (e.value = !0, n("hide"));
+    }, S = () => {
+      s != null && s.value || (e.value ? e.value = !0 : (e.value = !0, n("hide"))), clearTimeout(o);
     }, h = () => {
-      e.value || (e.value = !0, r("hide"));
-    }, j = () => {
-      h();
+      a.suppressed || (clearTimeout(o), e.value = !1, n("show"), le(() => {
+        w(), a.autoUpdate && d.value && i.value && (t == null || t(), t = ae(
+          d.value,
+          i.value,
+          () => {
+            w();
+          }
+        ));
+      }));
+    }, W = () => {
+      v = !0, h();
+    }, z = () => {
+      v = !1, o = setTimeout(() => {
+        m || S();
+      }, x.value);
+    }, A = () => {
+      m = !0, clearTimeout(o);
+    }, L = () => {
+      m = !1, v || (o = setTimeout(() => {
+        S();
+      }, x.value));
+    }, b = () => {
+      e.value || (e.value = !0, n("hide"), t && (t(), t = null));
+    }, P = () => {
+      b();
     };
-    return C({
-      show: c,
-      hide: h,
-      isOpen: S(() => !e.value)
-    }), (a, y) => (f(), p("div", {
+    return E({
+      show: h,
+      hide: b,
+      isOpen: _(() => !e.value)
+    }), Q(() => {
+      clearTimeout(o), t && (t(), t = null);
+    }), (u, k) => (c(), y("div", {
       id: l.id,
       class: "rds-e-tooltip"
     }, [
-      i("div", {
+      p("div", {
         ref_key: "referenceRef",
-        ref: m,
+        ref: d,
         class: "rds-e-tooltip__trigger",
-        onBlur: v,
-        onFocus: c,
-        onMouseenter: c,
-        onMouseleave: v
+        onBlur: U,
+        onFocus: h,
+        onMouseenter: W,
+        onMouseleave: z
       }, [
-        k(a.$slots, "default", {}, void 0, !0)
+        C(u.$slots, "default", {}, void 0, !0)
       ], 544),
-      i("div", {
-        ref_key: "floatingRef",
-        ref: n,
-        class: R(O.value)
+      (c(), Z(ee, {
+        to: l.teleportTo,
+        disabled: !l.teleportTo
       }, [
-        b(t) ? (f(), p("div", ee, [
-          i("h3", te, B(b(t)), 1),
-          P(Q, {
-            name: "close",
-            "aria-hidden": "true",
-            class: "rds-e-tooltip__icon",
-            onClick: j
-          })
-        ])) : $("", !0),
-        i("div", oe, [
-          k(a.$slots, "tooltip-content", {}, () => [
-            F(B(l.content), 1)
-          ], !0)
-        ]),
-        l.hideArrow ? $("", !0) : (f(), p("div", {
-          key: 1,
-          ref_key: "arrowRef",
-          ref: d,
-          class: R(["rds-e-tooltip__tooltip-arrow", _.value])
-        }, null, 2))
-      ], 2)
-    ], 8, Z));
+        p("div", {
+          ref_key: "floatingRef",
+          ref: i,
+          class: M(I.value),
+          onMouseenter: A,
+          onMouseleave: L
+        }, [
+          N(s) ? (c(), y("div", me, [
+            p("h3", ve, O(N(s)), 1),
+            te(ce, {
+              name: "close",
+              "aria-hidden": "true",
+              class: "rds-e-tooltip__icon",
+              onClick: P
+            })
+          ])) : D("", !0),
+          p("div", he, [
+            C(u.$slots, "tooltip-content", {}, () => [
+              oe(O(l.content), 1)
+            ], !0)
+          ]),
+          l.hideArrow ? D("", !0) : (c(), y("div", {
+            key: 1,
+            ref_key: "arrowRef",
+            ref: f,
+            class: M(["rds-e-tooltip__tooltip-arrow", T.value])
+          }, null, 2))
+        ], 34)
+      ], 8, ["to", "disabled"]))
+    ], 8, fe));
   }
-}), ne = /* @__PURE__ */ U(le, [["__scopeId", "data-v-41d4edc5"]]);
+}), we = /* @__PURE__ */ pe(_e, [["__scopeId", "data-v-5a12657d"]]);
 export {
-  ne as default
+  we as default
 };