@nmorph/nmorph-ui-kit 2.2.40 → 2.2.42

package/dist/components/feedback/nmorph-drawer/NmorphDrawer.vue.js

@@ -1,81 +1,99 @@
 import './NmorphDrawer.css';
-import c from "./NmorphDrawer.vue2.js";
-import { openBlock as e, createBlock as p, withCtx as n, createElementVNode as l, normalizeStyle as m, normalizeClass as d, createElementBlock as a, renderSlot as t, toDisplayString as _, createVNode as i, createCommentVNode as s } from "vue";
-/* empty css                  */
-import h from "../../../_virtual/_plugin-vue_export-helper.js";
-const f = ["aria-label"], w = {
+import { defineComponent as b, useSlots as z, computed as s, openBlock as o, createBlock as k, unref as t, withCtx as m, createElementVNode as r, normalizeStyle as B, normalizeClass as u, createElementBlock as n, renderSlot as d, toDisplayString as O, createVNode as f, createCommentVNode as i } from "vue";
+import { useModifiers as V } from "../../../utils/create-modifiers.js";
+import { createCssSizeVariables as S } from "../../../utils/common.js";
+import $ from "../../others/nmorph-overlay/NmorphOverlay.vue.js";
+/* empty css                                             */
+import x from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+/* empty css                                      */
+import E from "../../../assets/icons/cross.svg.js";
+const N = ["aria-label"], T = {
   key: 0,
   class: "nmorph-drawer__header"
-}, b = { class: "nmorph-drawer__title" }, y = ["aria-label"], k = {
+}, g = { class: "nmorph-drawer__title" }, H = ["aria-label"], I = {
   key: 1,
   class: "nmorph-drawer__footer"
-};
-function v(r, C, N, o, z, O) {
-  return e(), p(o.NmorphOverlay, {
-    show: o.props.modelValue,
-    "z-index": o.props.zIndex,
-    "teleport-to": o.props.teleportTo,
-    "disabled-teleport": o.props.disabledTeleport,
-    "close-on-escape": o.props.closeOnEscape,
-    "trap-focus": "",
-    onOnOutsideClick: o.overlayClickHandler,
-    onOnEscapeKeydown: o.closeHandler
-  }, {
-    default: n(() => [
-      l("aside", {
-        class: d(o.modifiers),
-        style: m(o.drawerStyle),
-        role: "dialog",
-        "aria-modal": "true",
-        "aria-label": o.props.title || void 0
-      }, [
-        o.hasHeader ? (e(), a("div", w, [
-          t(r.$slots, "header", {}, () => [
-            l(
-              "div",
-              b,
-              _(o.props.title),
-              1
-              /* TEXT */
-            ),
-            o.props.showClose ? (e(), a("button", {
-              key: 0,
-              class: "nmorph-drawer__close",
-              type: "button",
-              "aria-label": o.props.title ? `Close ${o.props.title}` : "Close drawer",
-              onClick: o.closeHandler
-            }, [
-              i(o.NmorphIcon, null, {
-                default: n(() => [
-                  i(o.NmorphIconCross)
-                ]),
-                _: 1
-                /* STABLE */
-              })
-            ], 8, y)) : s("v-if", !0)
-          ])
-        ])) : s("v-if", !0),
-        l(
-          "div",
-          {
-            class: d(["nmorph-drawer__content", o.props.contentClass])
-          },
-          [
-            t(r.$slots, "default")
-          ],
-          2
-          /* CLASS */
-        ),
-        o.slots.footer ? (e(), a("div", k, [
-          t(r.$slots, "footer")
-        ])) : s("v-if", !0)
-      ], 14, f)
-    ]),
-    _: 3
-    /* FORWARDED */
-  }, 8, ["show", "z-index", "teleport-to", "disabled-teleport", "close-on-escape"]);
-}
-const V = /* @__PURE__ */ h(c, [["render", v], ["__file", "/builds/ketjo/nmorph/library/src/components/feedback/nmorph-drawer/NmorphDrawer.vue"]]);
+}, L = /* @__PURE__ */ b({
+  __name: "NmorphDrawer",
+  props: {
+    modelValue: { type: Boolean, default: !1 },
+    title: { default: "" },
+    placement: { default: "right" },
+    size: { default: "360px" },
+    showClose: { type: Boolean, default: !0 },
+    closeOnOverlay: { type: Boolean, default: !0 },
+    closeOnEscape: { type: Boolean, default: !0 },
+    zIndex: { default: void 0 },
+    teleportTo: { default: "body" },
+    disabledTeleport: { type: Boolean, default: !1 },
+    contentClass: { default: "" }
+  },
+  emits: ["on-close", "update:model-value"],
+  setup(_, { emit: h }) {
+    const e = _, c = h, p = z(), y = s(
+      () => V({
+        "nmorph-drawer": [e.placement, e.modelValue && "open"]
+      })
+    ), w = s(
+      () => S({
+        "--nmorph-drawer-size": e.size
+      })
+    ), l = () => {
+      c("on-close"), c("update:model-value", !1);
+    }, C = () => {
+      e.closeOnOverlay && l();
+    }, v = s(() => !!(p.header || e.title || e.showClose));
+    return (a, D) => (o(), k(t($), {
+      show: e.modelValue,
+      "z-index": e.zIndex,
+      "teleport-to": e.teleportTo,
+      "disabled-teleport": e.disabledTeleport,
+      "close-on-escape": e.closeOnEscape,
+      "trap-focus": "",
+      onOnOutsideClick: C,
+      onOnEscapeKeydown: l
+    }, {
+      default: m(() => [
+        r("aside", {
+          class: u(y.value),
+          style: B(w.value),
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-label": e.title || void 0
+        }, [
+          v.value ? (o(), n("div", T, [
+            d(a.$slots, "header", {}, () => [
+              r("div", g, O(e.title), 1),
+              e.showClose ? (o(), n("button", {
+                key: 0,
+                class: "nmorph-drawer__close",
+                type: "button",
+                "aria-label": e.title ? `Close ${e.title}` : "Close drawer",
+                onClick: l
+              }, [
+                f(t(x), null, {
+                  default: m(() => [
+                    f(t(E))
+                  ]),
+                  _: 1
+                })
+              ], 8, H)) : i("", !0)
+            ])
+          ])) : i("", !0),
+          r("div", {
+            class: u(["nmorph-drawer__content", e.contentClass])
+          }, [
+            d(a.$slots, "default")
+          ], 2),
+          t(p).footer ? (o(), n("div", I, [
+            d(a.$slots, "footer")
+          ])) : i("", !0)
+        ], 14, N)
+      ]),
+      _: 3
+    }, 8, ["show", "z-index", "teleport-to", "disabled-teleport", "close-on-escape"]));
+  }
+});
 export {
-  V as default
+  L as default
 };

package/dist/components/feedback/nmorph-drawer/NmorphDrawer.vue3.js

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

package/dist/components/feedback/nmorph-tooltip/NmorphTooltip.css

@@ -1 +1 @@
-.nmorph-tooltip{--max-width: 120px;--width: fit-content;--height: fit-content;display:inline-block}.nmorph-tooltip .nmorph-tooltip__content{position:relative}.nmorph-tooltip .nmorph-tooltip__info-content{position:absolute;z-index:var(--nmorph-tooltip-z-index);width:var(--width);max-width:var(--max-width);height:var(--height);padding:var(--indentation-03);background:var(--nmorph-main-color);border-radius:var(--default-border-radius);box-shadow:0 0 20px var(--nmorph-dark-shade-color)}.nmorph-tooltip span{white-space:nowrap}.nmorph-tooltip .nmorph-tooltip__triangle{position:absolute;width:0;height:0;border-style:solid;content:""}.nmorph-tooltip.nmorph-tooltip--top .nmorph-tooltip__info-content{bottom:calc(100% + 8px);left:50%;transform:translate(-50%)}.nmorph-tooltip.nmorph-tooltip--top .nmorph-tooltip__triangle{top:100%;left:50%;border-width:8px 8px 0;border-color:var(--nmorph-main-color) transparent transparent transparent;transform:translate(-50%)}.nmorph-tooltip.nmorph-tooltip--right .nmorph-tooltip__info-content{top:50%;left:calc(100% + 12px);transform:translateY(-50%)}.nmorph-tooltip.nmorph-tooltip--right .nmorph-tooltip__triangle{top:50%;right:100%;border-width:8px 8px 8px 0;border-color:transparent var(--nmorph-main-color) transparent transparent;transform:translateY(-50%)}.nmorph-tooltip.nmorph-tooltip--bottom .nmorph-tooltip__info-content{top:calc(100% + 12px);left:50%;transform:translate(-50%)}.nmorph-tooltip.nmorph-tooltip--bottom .nmorph-tooltip__triangle{bottom:100%;left:50%;border-width:0 8px 8px;border-color:transparent transparent var(--nmorph-main-color) transparent;transform:translate(-50%)}.nmorph-tooltip.nmorph-tooltip--left .nmorph-tooltip__info-content{top:50%;right:calc(100% + 12px);transform:translateY(-50%)}.nmorph-tooltip.nmorph-tooltip--left .nmorph-tooltip__triangle{top:50%;left:100%;border-width:8px 0 8px 8px;border-color:transparent transparent transparent var(--nmorph-main-color);transform:translateY(-50%)}.nmorph-tooltip.nmorph-tooltip--force-coords .nmorph-tooltip__info-content{transform:none}.nmorph-tooltip{width:var(--nmorph-tooltip-width)}
+.nmorph-tooltip{--max-width: 120px;--width: fit-content;--height: fit-content;display:inline-block}.nmorph-tooltip .nmorph-tooltip__content{position:relative;display:inline-flex}.nmorph-tooltip .nmorph-tooltip__trigger{display:inline-flex;align-items:center;max-width:100%;vertical-align:middle}.nmorph-tooltip .nmorph-tooltip__info-content{position:absolute;z-index:var(--nmorph-tooltip-z-index);width:var(--width);max-width:var(--max-width);height:var(--height);padding:var(--indentation-03);background:var(--nmorph-main-color);border-radius:var(--default-border-radius);box-shadow:0 0 20px var(--nmorph-dark-shade-color)}.nmorph-tooltip span{white-space:nowrap}.nmorph-tooltip .nmorph-tooltip__triangle{position:absolute;width:0;height:0;border-style:solid;content:""}.nmorph-tooltip.nmorph-tooltip--top .nmorph-tooltip__info-content{bottom:calc(100% + 8px);left:50%;transform:translate(-50%)}.nmorph-tooltip.nmorph-tooltip--top .nmorph-tooltip__triangle{top:100%;left:50%;border-width:8px 8px 0;border-color:var(--nmorph-main-color) transparent transparent transparent;transform:translate(-50%)}.nmorph-tooltip.nmorph-tooltip--right .nmorph-tooltip__info-content{top:50%;left:calc(100% + 12px);transform:translateY(-50%)}.nmorph-tooltip.nmorph-tooltip--right .nmorph-tooltip__triangle{top:50%;right:100%;border-width:8px 8px 8px 0;border-color:transparent var(--nmorph-main-color) transparent transparent;transform:translateY(-50%)}.nmorph-tooltip.nmorph-tooltip--bottom .nmorph-tooltip__info-content{top:calc(100% + 12px);left:50%;transform:translate(-50%)}.nmorph-tooltip.nmorph-tooltip--bottom .nmorph-tooltip__triangle{bottom:100%;left:50%;border-width:0 8px 8px;border-color:transparent transparent var(--nmorph-main-color) transparent;transform:translate(-50%)}.nmorph-tooltip.nmorph-tooltip--left .nmorph-tooltip__info-content{top:50%;right:calc(100% + 12px);transform:translateY(-50%)}.nmorph-tooltip.nmorph-tooltip--left .nmorph-tooltip__triangle{top:50%;left:100%;border-width:8px 0 8px 8px;border-color:transparent transparent transparent var(--nmorph-main-color);transform:translateY(-50%)}.nmorph-tooltip.nmorph-tooltip--force-coords .nmorph-tooltip__info-content{transform:none}.nmorph-tooltip{width:var(--nmorph-tooltip-width)}

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

@@ -1,111 +1,186 @@
 import './NmorphTooltip.css';
-import f from "./NmorphTooltip.vue2.js";
-import { openBlock as t, createElementBlock as n, normalizeStyle as a, normalizeClass as h, createElementVNode as e, renderSlot as d, createBlock as c, TransitionGroup as _, withCtx as p, createCommentVNode as r, toDisplayString as m } from "vue";
-/* empty css                   */
-import v from "../../../_virtual/_plugin-vue_export-helper.js";
-const y = { ref: "slotDOMRef" }, k = { class: "nmorph-tooltip__shadow-content" }, u = {
+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"
-}, x = {
-  key: 0,
-  class: "nmorph-tooltip__info-content"
-}, C = { class: "nmorph-tooltip__shadow-content" }, M = { key: 0 };
-function g(l, s, i, o, w, T) {
-  return t(), n(
-    "div",
-    {
-      class: h(o.modifiers),
-      style: a(o.styles)
-    },
-    [
-      e(
-        "div",
-        {
-          ref: "tooltipDOMRef",
-          class: "nmorph-tooltip__content",
-          onMouseenter: o.handleMouseEnter,
-          onMouseleave: o.handleMouseLeave
-        },
-        [
-          e(
-            "div",
-            y,
-            [
-              d(l.$slots, "default")
-            ],
-            512
-            /* NEED_PATCH */
-          ),
-          o.props.forceCoordinate ? (t(), 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",
-            tag: "div"
+            name: "opacity"
           }, {
-            default: p(() => [
-              o.showTooltip && o.props.text ? (t(), n(
-                "div",
-                {
-                  key: 0,
-                  ref: "tooltipBody",
-                  class: "nmorph-tooltip__info-content",
-                  style: a({ left: i.forceCoordinate?.x, bottom: i.forceCoordinate?.y })
-                },
-                [
-                  e("div", k, [
-                    o.props.forceCoordinate ? r("v-if", !0) : (t(), n("div", u)),
-                    e(
-                      "span",
-                      null,
-                      m(i.text),
-                      1
-                      /* TEXT */
-                    )
-                  ])
-                ],
-                4
-                /* STYLE */
-              )) : r("v-if", !0)
+            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)
             ]),
-            _: 1
-            /* STABLE */
-          })) : (t(), c(_, {
+            _: 3
+          })) : (l(), E(O, {
             key: 1,
-            name: "opacity",
-            tag: "div"
+            name: "opacity"
           }, {
-            default: p(() => [
-              o.showTooltip ? (t(), n("div", x, [
-                e("div", C, [
-                  s[0] || (s[0] = e(
-                    "div",
-                    { class: "nmorph-tooltip__triangle" },
-                    null,
-                    -1
-                    /* CACHED */
-                  )),
-                  o.props.text ? (t(), n(
-                    "span",
-                    M,
-                    m(i.text),
-                    1
-                    /* TEXT */
-                  )) : d(l.$slots, "content", { key: 1 })
+            default: z(() => [
+              B.value ? (l(), i("div", {
+                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 })
                 ])
-              ])) : r("v-if", !0)
+              ], 512)) : _("", !0)
             ]),
             _: 3
-            /* FORWARDED */
           }))
-        ],
-        544
-        /* NEED_HYDRATION, NEED_PATCH */
-      )
-    ],
-    6
-    /* CLASS, STYLE */
-  );
-}
-const E = /* @__PURE__ */ v(f, [["render", g], ["__file", "/builds/ketjo/nmorph/library/src/components/feedback/nmorph-tooltip/NmorphTooltip.vue"]]);
+        ], 64))
+      ], 544)
+    ], 6));
+  }
+});
 export {
-  E 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
+};