@nmorph/nmorph-ui-kit 2.2.53 → 2.2.54

package/dist/components/feedback/nmorph-dialog/NmorphDialog.vue.js

@@ -1,65 +1,104 @@
 import './NmorphDialog.css';
-import c from "./NmorphDialog.vue2.js";
-import { openBlock as e, createBlock as d, withCtx as a, createElementVNode as l, normalizeStyle as m, normalizeClass as _, createElementBlock as i, renderSlot as s, toDisplayString as p, createVNode as n, createCommentVNode as t } from "vue";
-/* empty css                  */
-import h from "../../../_virtual/_plugin-vue_export-helper.js";
-const f = ["aria-label"], g = {
+import { defineComponent as x, useSlots as B, computed as a, ref as D, watch as T, openBlock as n, createBlock as b, unref as r, withCtx as u, createElementVNode as d, normalizeStyle as V, normalizeClass as z, createElementBlock as m, renderSlot as p, toDisplayString as H, createVNode as f, createCommentVNode as h } from "vue";
+import { useModifiers as E } from "../../../utils/create-modifiers.js";
+import N from "../../others/nmorph-overlay/NmorphOverlay.vue.js";
+/* empty css                                             */
+import S from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+/* empty css                                      */
+import $ from "../../../assets/icons/cross.svg.js";
+const I = ["aria-label"], M = {
   key: 0,
   class: "nmorph-dialog__header"
-}, y = { class: "nmorph-dialog__title" }, b = ["aria-label"], k = { class: "nmorph-dialog__content" };
-function v(r, C, N, o, w, x) {
-  return e(), d(o.NmorphOverlay, {
-    show: o.isVisible,
-    "z-index": o.props.zIndex,
-    "close-on-escape": o.props.closeOnEscape,
-    "trap-focus": "",
-    onOnOutsideClick: o.overlayClickHandler,
-    onOnEscapeKeydown: o.closeHandler
-  }, {
-    default: a(() => [
-      l("div", {
-        class: _(o.modifiers),
-        style: m(o.dialogStyle),
-        role: "dialog",
-        "aria-modal": "true",
-        "aria-label": o.props.title || void 0
-      }, [
-        o.hasHeader ? (e(), i("div", g, [
-          s(r.$slots, "header", {}, () => [
-            l(
-              "div",
-              y,
-              p(o.props.title),
-              1
-              /* TEXT */
-            ),
-            o.props.showClose ? (e(), i("button", {
-              key: 0,
-              class: "nmorph-dialog__close-icon",
-              type: "button",
-              "aria-label": o.props.title ? `Close ${o.props.title}` : "Close dialog",
-              onClick: o.closeHandler
-            }, [
-              n(o.NmorphIcon, null, {
-                default: a(() => [
-                  n(o.NmorphIconCross)
-                ]),
-                _: 1
-                /* STABLE */
-              })
-            ], 8, b)) : t("v-if", !0)
+}, K = { class: "nmorph-dialog__title" }, j = ["aria-label"], q = { class: "nmorph-dialog__content" }, U = /* @__PURE__ */ x({
+  __name: "NmorphDialog",
+  props: {
+    modelValue: { type: Boolean, default: !1 },
+    title: { default: "" },
+    width: { default: "330px" },
+    maxHeight: { default: void 0 },
+    openDelay: { default: 0 },
+    closeDelay: { default: 0 },
+    closeOnClickModal: { type: Boolean, default: !0 },
+    showClose: { type: Boolean, default: !0 },
+    zIndex: { default: void 0 },
+    closeOnOverlay: { type: Boolean, default: !0 },
+    closeOnEscape: { type: Boolean, default: !0 }
+  },
+  emits: ["on-close", "update:model-value"],
+  setup(_, { emit: y }) {
+    const e = _, c = y, v = B(), C = a(
+      () => E({
+        "nmorph-dialog": []
+      })
+    ), g = a(() => ({
+      "--nmorph-dialog-width": e.width,
+      ...e.maxHeight && { "--nmorph-dialog-max-height": e.maxHeight }
+    })), O = a(() => !!(v.header || e.title || e.showClose)), w = a(() => e.closeOnOverlay && e.closeOnClickModal), s = D(e.modelValue);
+    let l = null, t = null;
+    T(
+      () => e.modelValue,
+      (o) => {
+        o ? (t && clearTimeout(t), l = setTimeout(() => {
+          s.value = !0;
+        }, e.openDelay)) : (l && clearTimeout(l), t = setTimeout(() => {
+          s.value = !1;
+        }, e.closeDelay));
+      },
+      { immediate: !0 }
+    );
+    const i = () => {
+      c("on-close"), l && clearTimeout(l);
+      const o = () => {
+        c("update:model-value", !1);
+      };
+      e.closeDelay <= 0 ? o() : t = setTimeout(o, e.closeDelay);
+    }, k = () => {
+      w.value && i();
+    };
+    return (o, A) => (n(), b(r(N), {
+      show: s.value,
+      "z-index": e.zIndex,
+      "close-on-escape": e.closeOnEscape,
+      "trap-focus": "",
+      onOnOutsideClick: k,
+      onOnEscapeKeydown: i
+    }, {
+      default: u(() => [
+        d("div", {
+          class: z(C.value),
+          style: V(g.value),
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-label": e.title || void 0
+        }, [
+          O.value ? (n(), m("div", M, [
+            p(o.$slots, "header", {}, () => [
+              d("div", K, H(e.title), 1),
+              e.showClose ? (n(), m("button", {
+                key: 0,
+                class: "nmorph-dialog__close-icon",
+                type: "button",
+                "aria-label": e.title ? `Close ${e.title}` : "Close dialog",
+                onClick: i
+              }, [
+                f(r(S), null, {
+                  default: u(() => [
+                    f(r($))
+                  ]),
+                  _: 1
+                })
+              ], 8, j)) : h("", !0)
+            ])
+          ])) : h("", !0),
+          d("div", q, [
+            p(o.$slots, "default")
           ])
-        ])) : t("v-if", !0),
-        l("div", k, [
-          s(r.$slots, "default")
-        ])
-      ], 14, f)
-    ]),
-    _: 3
-    /* FORWARDED */
-  }, 8, ["show", "z-index", "close-on-escape"]);
-}
-const S = /* @__PURE__ */ h(c, [["render", v], ["__file", "/builds/ketjo/nmorph/library/src/components/feedback/nmorph-dialog/NmorphDialog.vue"]]);
+        ], 14, I)
+      ]),
+      _: 3
+    }, 8, ["show", "z-index", "close-on-escape"]));
+  }
+});
 export {
-  S as default
+  U as default
 };

package/dist/components/feedback/nmorph-dialog/NmorphDialog.vue3.js

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

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
+};