energy-components 1.15.0 → 1.16.0

package/dist/components/tooltip.es.js

@@ -1,11 +1,11 @@
-import { defineComponent as j, toRefs as O, ref as o, computed as W, createElementBlock as h, openBlock as x, createElementVNode as l, renderSlot as w, normalizeClass as S, createCommentVNode as z, unref as R, createVNode as E, toDisplayString as $, createTextVNode as H } from "vue";
-import { c as I, o as P, f as T, s as A, a as F, b as X } from "./floating-ui.vue-7LKzPqHI.js";
-import { R as Y } from "./icon-svg-BU0OQFKH.js";
-import { _ as q } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-import './style/tooltip.css';const G = ["id"], J = {
+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-BU0OQFKH.js";
+import { _ as U } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+import './style/tooltip.css';const Z = ["id"], ee = {
   key: 0,
   class: "rds-e-tooltip__header"
-}, K = { class: "rds-e-tooltip__title" }, L = { class: "rds-e-tooltip__content" }, Q = /* @__PURE__ */ j({
+}, te = { class: "rds-e-tooltip__title" }, oe = { class: "rds-e-tooltip__content" }, le = /* @__PURE__ */ E({
   __name: "tooltip",
   props: {
     /**
@@ -63,105 +63,142 @@ import './style/tooltip.css';const G = ["id"], J = {
     id: {
       type: String,
       default: void 0
+    },
+    /**
+     * <span>Suprime el tooltip para que no se muestre</span>
+     */
+    suppressed: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * <span>Oculta la flecha del tooltip</span>
+     */
+    hideArrow: {
+      type: Boolean,
+      default: !1
     }
   },
-  setup(r) {
-    const i = r, { large: d, fullWidth: b, title: e, inverse: k } = O(i), c = o(), n = o(), p = o(), t = o(!0), f = o(""), B = W(() => ({
+  emits: [
+    /**
+     * Se emite cuando el tooltip se activa para mostrarse.
+     * @event show
+     */
+    "show",
+    /**
+     * Se emite cuando el tooltip se oculta.
+     * @event hide
+     */
+    "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(() => ({
       "rds-e-tooltip__tooltip": !0,
-      "rds-e-tooltip__tooltip-hidden": t.value,
-      "rds-e-tooltip__tooltip--large": d.value,
-      "rds-e-tooltip__tooltip--inverse": k.value
-    })), C = async () => {
-      const { x: a, y: s, middlewareData: _, placement: v } = await I(
-        c.value,
+      "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,
         {
-          placement: i.placement,
+          placement: s.placement,
           middleware: [
-            P(i.offsetSpace),
-            T(),
-            A(),
-            F({
-              apply({ availableHeight: D, availableWidth: M, elements: V }) {
-                Object.assign(V.floating.style, {
-                  maxWidth: b.value ? `${Math.max(0, M)}px` : "380px",
+            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",
                   width: "max-content",
-                  maxHeight: `${Math.max(0, D)}px`
+                  maxHeight: `${Math.max(0, T)}px`
                 });
               }
             }),
-            X({
-              element: p.value,
-              padding: d.value ? 16 : 8
+            L({
+              element: d.value,
+              padding: u.value ? 16 : 8
             })
           ]
         }
       );
       Object.assign(n.value.style, {
         left: `${a}px`,
-        top: `${s}px`
+        top: `${y}px`
       });
-      const { x: g, y } = _.arrow, N = {
+      const { x, y: w } = A.arrow, H = {
         left: "right",
         right: "left",
         bottom: "top",
         top: "bottom"
       };
-      f.value = `rds-e-tooltip__tooltip-arrow--${v}`, Object.assign(p.value.style, {
-        left: g != null ? `${g}px` : "",
-        top: y != null ? `${y}px` : "",
+      _.value = `rds-e-tooltip__tooltip-arrow--${g}`, Object.assign(d.value.style, {
+        left: x != null ? `${x}px` : "",
+        top: w != null ? `${w}px` : "",
         bottom: "",
         right: "",
-        [N[v.split("-")[0]]]: "-4px"
+        [H[g.split("-")[0]]]: "-4px"
       });
-    }, u = () => {
-      e != null && e.value || (t.value = !0);
-    }, m = () => {
-      t.value = !1, C();
+    }, v = () => {
+      t != null && t.value || (e.value = !0, r("hide"));
+    }, c = () => {
+      s.suppressed || (e.value = !1, r("show"), X(() => {
+        V();
+      }));
+    }, h = () => {
+      e.value || (e.value = !0, r("hide"));
+    }, j = () => {
+      h();
     };
-    return (a, s) => (x(), h("div", {
-      id: r.id,
+    return C({
+      show: c,
+      hide: h,
+      isOpen: S(() => !e.value)
+    }), (a, y) => (f(), p("div", {
+      id: l.id,
       class: "rds-e-tooltip"
     }, [
-      l("div", {
+      i("div", {
         ref_key: "referenceRef",
-        ref: c,
+        ref: m,
         class: "rds-e-tooltip__trigger",
-        onBlur: u,
-        onFocus: m,
-        onMouseenter: m,
-        onMouseleave: u
+        onBlur: v,
+        onFocus: c,
+        onMouseenter: c,
+        onMouseleave: v
       }, [
-        w(a.$slots, "default", {}, void 0, !0)
+        k(a.$slots, "default", {}, void 0, !0)
       ], 544),
-      l("div", {
+      i("div", {
         ref_key: "floatingRef",
         ref: n,
-        class: S(B.value)
+        class: R(O.value)
       }, [
-        R(e) ? (x(), h("div", J, [
-          l("h3", K, $(R(e)), 1),
-          E(Y, {
+        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: s[0] || (s[0] = (_) => t.value = !t.value)
+            onClick: j
           })
-        ])) : z("", !0),
-        l("div", L, [
-          w(a.$slots, "tooltip-content", {}, () => [
-            H($(r.content), 1)
+        ])) : $("", !0),
+        i("div", oe, [
+          k(a.$slots, "tooltip-content", {}, () => [
+            F(B(l.content), 1)
           ], !0)
         ]),
-        l("div", {
+        l.hideArrow ? $("", !0) : (f(), p("div", {
+          key: 1,
           ref_key: "arrowRef",
-          ref: p,
-          class: S(["rds-e-tooltip__tooltip-arrow", f.value])
-        }, null, 2)
+          ref: d,
+          class: R(["rds-e-tooltip__tooltip-arrow", _.value])
+        }, null, 2))
       ], 2)
-    ], 8, G));
+    ], 8, Z));
   }
-}), oe = /* @__PURE__ */ q(Q, [["__scopeId", "data-v-e322ca8e"]]);
+}), ne = /* @__PURE__ */ U(le, [["__scopeId", "data-v-41d4edc5"]]);
 export {
-  oe as default
+  ne as default
 };