@nmorph/nmorph-ui-kit 2.2.51 → 2.2.53

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

@@ -1,186 +1,132 @@
 import './NmorphTooltip.css';
-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 = {
+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 = {
   key: 0,
   class: "nmorph-tooltip__triangle"
-}, 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", {
+}, 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(_, {
                 key: 0,
-                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));
-  }
-});
+                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"]]);
 export {
-  he as default
+  R as default
 };

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

@@ -0,0 +1,121 @@
+import './NmorphTooltip.css';
+import { defineComponent as j, ref as o, useSlots as A, computed as f, watch as F, onBeforeUnmount as G } from "vue";
+import { usePlacement as U } from "../../../hooks/use-placement.js";
+import { useZIndex as V } from "../../../hooks/use-z-index.js";
+import { useModifiers as Y } from "../../../utils/create-modifiers.js";
+import { createCssSizeVariables as Z } from "../../../utils/common.js";
+const P = 600, $ = /* @__PURE__ */ j({
+  __name: "NmorphTooltip",
+  props: {
+    text: { type: String, required: !1, default: "" },
+    position: { type: null, required: !1, default: "top" },
+    forceShow: { type: Boolean, required: !1, default: !1 },
+    forceCoordinate: { type: [Object, null], required: !1, default: null },
+    disabled: { type: Boolean, required: !1, default: !1 },
+    trigger: { type: String, required: !1, default: "hover" },
+    touch: { type: String, required: !1, default: "click" },
+    openDelay: { type: Number, required: !1, default: 0 },
+    closeDelay: { type: Number, required: !1, default: 0 },
+    zIndex: { type: Number, required: !1, default: void 0 },
+    width: { type: [Number, String], required: !1, default: void 0 },
+    maxWidth: { type: [Number, String], required: !1, default: void 0 },
+    height: { type: [Number, String], required: !1, default: void 0 }
+  },
+  setup(C, { expose: N }) {
+    const e = C, r = o(e.forceShow), g = o(null), T = o(null), b = A(), i = o(null), u = o(null), a = o(null), n = o("mouse"), p = o(!1), m = f(() => !!(e.text || b.content)), O = f(() => r.value && m.value && !e.disabled), { placement: S } = U({
+      initialPlacement: e.position,
+      contentDOMElement: g,
+      relativeElement: T
+    }), B = f(
+      () => Y({
+        "nmorph-tooltip": [
+          S.value,
+          e.disabled && "disabled",
+          !!e.forceCoordinate?.x && !!e.forceCoordinate?.y && "force-coords"
+        ]
+      })
+    ), s = () => {
+      i.value && clearTimeout(i.value), i.value = null;
+    }, c = () => {
+      u.value && clearTimeout(u.value), u.value = null;
+    }, h = () => {
+      a.value && clearTimeout(a.value), a.value = null;
+    }, l = (t) => {
+      if (s(), c(), e.disabled || !m.value) {
+        r.value = !1;
+        return;
+      }
+      r.value = t;
+    }, d = () => {
+      if (c(), !(e.disabled || !m.value)) {
+        if (e.openDelay <= 0) {
+          l(!0);
+          return;
+        }
+        s(), i.value = setTimeout(() => l(!0), e.openDelay);
+      }
+    }, v = () => {
+      if (!e.forceShow) {
+        if (s(), e.closeDelay <= 0) {
+          l(!1);
+          return;
+        }
+        c(), u.value = setTimeout(() => l(!1), e.closeDelay);
+      }
+    }, y = () => {
+      r.value ? v() : d();
+    }, M = () => {
+      e.trigger !== "hover" || n.value !== "mouse" || d();
+    }, E = () => {
+      e.trigger !== "hover" || n.value !== "mouse" || v();
+    }, k = (t) => {
+      if (p.value) {
+        p.value = !1, t.preventDefault();
+        return;
+      }
+      if (e.disabled || e.trigger === "manual") return;
+      if (n.value === "touch" || n.value === "pen") {
+        if (e.touch !== "click") return;
+        y();
+        return;
+      }
+      e.trigger === "click" && y();
+    }, z = (t) => {
+      n.value = t.pointerType || "mouse", !(e.disabled || e.touch !== "longpress") && (t.pointerType !== "touch" && t.pointerType !== "pen" || (h(), a.value = setTimeout(() => {
+        p.value = !0, d();
+      }, P)));
+    }, I = () => {
+      h();
+    }, x = f(() => e.forceCoordinate ? "100%" : "auto"), _ = V(
+      () => r.value,
+      () => e.zIndex
+    ), L = f(() => ({
+      "--nmorph-tooltip-width": x.value,
+      "--nmorph-tooltip-z-index": _.value,
+      ...Z({
+        "--width": e.width,
+        "--max-width": e.maxWidth,
+        "--height": e.height
+      })
+    })), q = o(null);
+    F(
+      () => [e.forceShow, e.disabled],
+      ([t, D], R) => {
+        const W = R?.[0] ?? !1;
+        if (D) {
+          l(!1);
+          return;
+        }
+        t ? l(!0) : W && l(!1);
+      },
+      { immediate: !0 }
+    ), G(() => {
+      s(), c(), h();
+    }), N({ tooltipBody: q, open: d, close: v, toggle: y });
+    const w = { LONG_PRESS_DELAY_IN_MS: P, props: e, showTooltip: r, tooltipDOMRef: g, slotDOMRef: T, slots: b, openTimer: i, closeTimer: u, longPressTimer: a, lastPointerType: n, suppressNextClick: p, hasTooltipContent: m, shouldRenderTooltip: O, placement: S, modifiers: B, clearOpenTimer: s, clearCloseTimer: c, clearLongPressTimer: h, setTooltipOpen: l, open: d, close: v, toggle: y, handleMouseEnter: M, handleMouseLeave: E, handleClick: k, handlePointerDown: z, handlePointerEnd: I, rootWidth: x, zIndex: _, styles: L, tooltipBody: q };
+    return Object.defineProperty(w, "__isScriptSetup", { enumerable: !1, value: !0 }), w;
+  }
+});
+export {
+  $ as default
+};