@nmorph/nmorph-ui-kit 2.2.53 → 2.2.55

package/dist/components/feedback/nmorph-tooltip/NmorphTooltip.vue.js

@@ -1,132 +1,186 @@
 import './NmorphTooltip.css';
-import f from "./NmorphTooltip.vue2.js";
-import { openBlock as e, createElementBlock as t, normalizeStyle as d, normalizeClass as h, createElementVNode as n, renderSlot as s, Fragment as y, createBlock as c, Transition as _, withCtx as m, createCommentVNode as r, toDisplayString as p } from "vue";
-/* empty css                   */
-import k from "../../../_virtual/_plugin-vue_export-helper.js";
-const v = {
-  ref: "slotDOMRef",
-  class: "nmorph-tooltip__trigger"
-}, C = { class: "nmorph-tooltip__shadow-content" }, P = {
+import { defineComponent as q, ref as t, useSlots as H, computed as c, watch as J, onBeforeUnmount as K, openBlock as l, createElementBlock as i, normalizeStyle as M, normalizeClass as Q, createElementVNode as d, renderSlot as P, Fragment as X, createBlock as E, Transition as O, withCtx as z, createCommentVNode as _, toDisplayString as N } from "vue";
+import { usePlacement as ee } from "../../../hooks/use-placement.js";
+import { useZIndex as oe } from "../../../hooks/use-z-index.js";
+import { useModifiers as te } from "../../../utils/create-modifiers.js";
+import { createCssSizeVariables as le } from "../../../utils/common.js";
+const ne = { class: "nmorph-tooltip__shadow-content" }, ie = {
   key: 0,
   class: "nmorph-tooltip__triangle"
-}, g = { key: 1 }, x = {
-  key: 0,
-  ref: "tooltipBody",
-  class: "nmorph-tooltip__info-content"
-}, E = { class: "nmorph-tooltip__shadow-content" }, M = { key: 0 };
-function b(l, a, i, o, u, w) {
-  return e(), t(
-    "div",
-    {
-      class: h(o.modifiers),
-      style: d(o.styles)
-    },
-    [
-      n(
-        "div",
-        {
-          ref: "tooltipDOMRef",
-          class: "nmorph-tooltip__content",
-          onClick: o.handleClick,
-          onMouseenter: o.handleMouseEnter,
-          onMouseleave: o.handleMouseLeave,
-          onPointerdown: o.handlePointerDown,
-          onPointerup: o.handlePointerEnd,
-          onPointercancel: o.handlePointerEnd,
-          onPointerleave: o.handlePointerEnd
-        },
-        [
-          n(
-            "div",
-            v,
-            [
-              s(l.$slots, "default")
-            ],
-            512
-            /* NEED_PATCH */
-          ),
-          o.props.disabled ? r("v-if", !0) : (e(), t(
-            y,
-            { key: 0 },
-            [
-              o.props.forceCoordinate ? (e(), c(_, {
+}, re = { key: 1 }, ae = { class: "nmorph-tooltip__shadow-content" }, se = { key: 0 }, ue = 600, he = /* @__PURE__ */ q({
+  __name: "NmorphTooltip",
+  props: {
+    text: { default: "" },
+    position: { default: "top" },
+    forceShow: { type: Boolean, default: !1 },
+    forceCoordinate: { default: null },
+    disabled: { type: Boolean, default: !1 },
+    trigger: { default: "hover" },
+    touch: { default: "click" },
+    openDelay: { default: 0 },
+    closeDelay: { default: 0 },
+    zIndex: { default: void 0 },
+    width: { default: void 0 },
+    maxWidth: { default: void 0 },
+    height: { default: void 0 }
+  },
+  setup(r, { expose: R }) {
+    const e = r, a = t(e.forceShow), S = t(null), b = t(null), I = H(), f = t(null), p = t(null), m = t(null), s = t("mouse"), g = t(!1), T = c(() => !!(e.text || I.content)), B = c(() => a.value && T.value && !e.disabled), { placement: L } = ee({
+      initialPlacement: e.position,
+      contentDOMElement: S,
+      relativeElement: b
+    }), V = c(
+      () => te({
+        "nmorph-tooltip": [
+          L.value,
+          e.disabled && "disabled",
+          !!e.forceCoordinate?.x && !!e.forceCoordinate?.y && "force-coords"
+        ]
+      })
+    ), h = () => {
+      f.value && clearTimeout(f.value), f.value = null;
+    }, v = () => {
+      p.value && clearTimeout(p.value), p.value = null;
+    }, k = () => {
+      m.value && clearTimeout(m.value), m.value = null;
+    }, n = (o) => {
+      if (h(), v(), e.disabled || !T.value) {
+        a.value = !1;
+        return;
+      }
+      a.value = o;
+    }, y = () => {
+      if (v(), !(e.disabled || !T.value)) {
+        if (e.openDelay <= 0) {
+          n(!0);
+          return;
+        }
+        h(), f.value = setTimeout(() => n(!0), e.openDelay);
+      }
+    }, x = () => {
+      if (!e.forceShow) {
+        if (h(), e.closeDelay <= 0) {
+          n(!1);
+          return;
+        }
+        v(), p.value = setTimeout(() => n(!1), e.closeDelay);
+      }
+    }, C = () => {
+      a.value ? x() : y();
+    }, W = () => {
+      e.trigger !== "hover" || s.value !== "mouse" || y();
+    }, $ = () => {
+      e.trigger !== "hover" || s.value !== "mouse" || x();
+    }, F = (o) => {
+      if (g.value) {
+        g.value = !1, o.preventDefault();
+        return;
+      }
+      if (e.disabled || e.trigger === "manual") return;
+      if (s.value === "touch" || s.value === "pen") {
+        if (e.touch !== "click") return;
+        C();
+        return;
+      }
+      e.trigger === "click" && C();
+    }, A = (o) => {
+      s.value = o.pointerType || "mouse", !(e.disabled || e.touch !== "longpress") && (o.pointerType !== "touch" && o.pointerType !== "pen" || (k(), m.value = setTimeout(() => {
+        g.value = !0, y();
+      }, ue)));
+    }, w = () => {
+      k();
+    }, G = c(() => e.forceCoordinate ? "100%" : "auto"), U = oe(
+      () => a.value,
+      () => e.zIndex
+    ), Y = c(() => ({
+      "--nmorph-tooltip-width": G.value,
+      "--nmorph-tooltip-z-index": U.value,
+      ...le({
+        "--width": e.width,
+        "--max-width": e.maxWidth,
+        "--height": e.height
+      })
+    })), D = t(null);
+    return J(
+      () => [e.forceShow, e.disabled],
+      ([o, u], Z) => {
+        const j = Z?.[0] ?? !1;
+        if (u) {
+          n(!1);
+          return;
+        }
+        o ? n(!0) : j && n(!1);
+      },
+      { immediate: !0 }
+    ), K(() => {
+      h(), v(), k();
+    }), R({ tooltipBody: D, open: y, close: x, toggle: C }), (o, u) => (l(), i("div", {
+      class: Q(V.value),
+      style: M(Y.value)
+    }, [
+      d("div", {
+        ref_key: "tooltipDOMRef",
+        ref: S,
+        class: "nmorph-tooltip__content",
+        onClick: F,
+        onMouseenter: W,
+        onMouseleave: $,
+        onPointerdown: A,
+        onPointerup: w,
+        onPointercancel: w,
+        onPointerleave: w
+      }, [
+        d("div", {
+          ref_key: "slotDOMRef",
+          ref: b,
+          class: "nmorph-tooltip__trigger"
+        }, [
+          P(o.$slots, "default")
+        ], 512),
+        e.disabled ? _("", !0) : (l(), i(X, { key: 0 }, [
+          e.forceCoordinate ? (l(), E(O, {
+            key: 0,
+            name: "opacity"
+          }, {
+            default: z(() => [
+              B.value ? (l(), i("div", {
+                key: 0,
+                ref_key: "tooltipBody",
+                ref: D,
+                class: "nmorph-tooltip__info-content",
+                style: M({ left: r.forceCoordinate?.x, bottom: r.forceCoordinate?.y })
+              }, [
+                d("div", ne, [
+                  e.forceCoordinate ? _("", !0) : (l(), i("div", ie)),
+                  e.text ? (l(), i("span", re, N(r.text), 1)) : P(o.$slots, "content", { key: 2 })
+                ])
+              ], 4)) : _("", !0)
+            ]),
+            _: 3
+          })) : (l(), E(O, {
+            key: 1,
+            name: "opacity"
+          }, {
+            default: z(() => [
+              B.value ? (l(), i("div", {
                 key: 0,
-                name: "opacity"
-              }, {
-                default: m(() => [
-                  o.shouldRenderTooltip ? (e(), t(
-                    "div",
-                    {
-                      key: 0,
-                      ref: "tooltipBody",
-                      class: "nmorph-tooltip__info-content",
-                      style: d({ left: i.forceCoordinate?.x, bottom: i.forceCoordinate?.y })
-                    },
-                    [
-                      n("div", C, [
-                        o.props.forceCoordinate ? r("v-if", !0) : (e(), t("div", P)),
-                        o.props.text ? (e(), t(
-                          "span",
-                          g,
-                          p(i.text),
-                          1
-                          /* TEXT */
-                        )) : s(l.$slots, "content", { key: 2 })
-                      ])
-                    ],
-                    4
-                    /* STYLE */
-                  )) : r("v-if", !0)
-                ]),
-                _: 3
-                /* FORWARDED */
-              })) : (e(), c(_, {
-                key: 1,
-                name: "opacity"
-              }, {
-                default: m(() => [
-                  o.shouldRenderTooltip ? (e(), t(
-                    "div",
-                    x,
-                    [
-                      n("div", E, [
-                        a[0] || (a[0] = n(
-                          "div",
-                          { class: "nmorph-tooltip__triangle" },
-                          null,
-                          -1
-                          /* CACHED */
-                        )),
-                        o.props.text ? (e(), t(
-                          "span",
-                          M,
-                          p(i.text),
-                          1
-                          /* TEXT */
-                        )) : s(l.$slots, "content", { key: 1 })
-                      ])
-                    ],
-                    512
-                    /* NEED_PATCH */
-                  )) : r("v-if", !0)
-                ]),
-                _: 3
-                /* FORWARDED */
-              }))
-            ],
-            64
-            /* STABLE_FRAGMENT */
-          ))
-        ],
-        544
-        /* NEED_HYDRATION, NEED_PATCH */
-      )
-    ],
-    6
-    /* CLASS, STYLE */
-  );
-}
-const R = /* @__PURE__ */ k(f, [["render", b], ["__file", "/builds/ketjo/nmorph/library/src/components/feedback/nmorph-tooltip/NmorphTooltip.vue"]]);
+                ref_key: "tooltipBody",
+                ref: D,
+                class: "nmorph-tooltip__info-content"
+              }, [
+                d("div", ae, [
+                  u[0] || (u[0] = d("div", { class: "nmorph-tooltip__triangle" }, null, -1)),
+                  e.text ? (l(), i("span", se, N(r.text), 1)) : P(o.$slots, "content", { key: 1 })
+                ])
+              ], 512)) : _("", !0)
+            ]),
+            _: 3
+          }))
+        ], 64))
+      ], 544)
+    ], 6));
+  }
+});
 export {
-  R as default
+  he as default
 };

package/dist/components/feedback/nmorph-tooltip/NmorphTooltip.vue3.js

@@ -0,0 +1,6 @@
+import './NmorphTooltip.css';
+import o from "./NmorphTooltip.vue.js";
+/* empty css                   */
+export {
+  o as default
+};