@nmorph/nmorph-ui-kit 2.2.41 → 2.2.42

package/dist/components/data/nmorph-virtual-list/NmorphVirtualList.vue.js

@@ -1,86 +1,100 @@
 import './NmorphVirtualList.css';
-import a from "./NmorphVirtualList.vue2.js";
-import { openBlock as t, createElementBlock as o, normalizeStyle as l, normalizeClass as m, createElementVNode as c, Fragment as d, renderList as p, createBlock as _, resolveDynamicComponent as f, withCtx as y, renderSlot as n, createTextVNode as h, toDisplayString as k } from "vue";
-/* empty css                       */
-import x from "../../../_virtual/_plugin-vue_export-helper.js";
-const v = {
+import { defineComponent as V, computed as i, openBlock as l, createElementBlock as r, normalizeStyle as c, normalizeClass as $, createElementVNode as L, Fragment as R, renderList as z, createBlock as E, resolveDynamicComponent as N, withCtx as D, renderSlot as d, createTextVNode as F, toDisplayString as j } from "vue";
+import { useVirtualList as w } from "../../../hooks/use-virtual-list.js";
+import { useModifiers as I } from "../../../utils/create-modifiers.js";
+import { createCssSizeVariables as M } from "../../../utils/common.js";
+const Y = {
   key: 1,
   class: "nmorph-virtual-list__empty"
-};
-function S(i, g, u, e, N, V) {
-  return t(), o(
-    "div",
-    {
-      ref: "containerRef",
-      class: m(e.modifiers),
-      style: l(e.styles),
-      onScroll: e.scrollHandler
-    },
-    [
-      e.props.items.length ? (t(), o(
-        "div",
-        {
-          key: 0,
-          class: "nmorph-virtual-list__spacer",
-          style: l(e.spacerStyle)
-        },
-        [
-          c(
-            "div",
-            {
-              class: "nmorph-virtual-list__content",
-              style: l(e.contentStyle)
-            },
-            [
-              (t(!0), o(
-                d,
-                null,
-                p(e.renderedItems, (r) => (t(), _(
-                  f(e.props.itemTag),
-                  {
-                    key: e.getItemKey(r.item, r.index),
-                    ref_for: !0,
-                    ref: (s) => e.setItemRef(s, r.index),
-                    class: "nmorph-virtual-list__item"
-                  },
-                  {
-                    default: y(() => [
-                      n(i.$slots, "default", {
-                        item: r.item,
-                        index: r.index
-                      }, () => [
-                        h(
-                          k(r.item),
-                          1
-                          /* TEXT */
-                        )
-                      ])
-                    ]),
-                    _: 2
-                    /* DYNAMIC */
-                  },
-                  1024
-                  /* DYNAMIC_SLOTS */
-                ))),
-                128
-                /* KEYED_FRAGMENT */
-              ))
-            ],
-            4
-            /* STYLE */
-          )
-        ],
-        4
-        /* STYLE */
-      )) : (t(), o("div", v, [
-        n(i.$slots, "empty")
+}, O = /* @__PURE__ */ V({
+  __name: "NmorphVirtualList",
+  props: {
+    items: { default: () => [] },
+    height: { default: "320px" },
+    maxHeight: { default: "none" },
+    itemHeight: { default: 40 },
+    overscan: { default: 5 },
+    dynamic: { type: Boolean, default: !1 },
+    disabled: { type: Boolean, default: !1 },
+    itemKey: { type: [String, Function], default: void 0 },
+    itemTag: { default: "div" }
+  },
+  emits: ["on-scroll"],
+  setup(u, { expose: f, emit: p }) {
+    const e = u, h = p, y = i(() => e.items), a = i(() => !e.disabled), v = i(() => e.itemHeight), g = i(() => e.overscan), _ = i(() => e.dynamic), s = w(y, {
+      enabled: a,
+      itemHeight: v,
+      overscan: g,
+      dynamic: _
+    }), m = s.containerRef, x = i(
+      () => I({
+        "nmorph-virtual-list": [e.disabled && "disabled", e.dynamic && "dynamic"]
+      })
+    ), H = i(() => ({
+      ...M({
+        "--nmorph-virtual-list-height": e.height,
+        "--nmorph-virtual-list-max-height": e.maxHeight
+      }),
+      "--nmorph-virtual-list-item-height": `${e.itemHeight}px`
+    })), S = i(() => ({
+      transform: a.value ? `translateY(${s.offsetTop.value}px)` : void 0
+    })), b = i(() => ({
+      height: a.value ? `${s.totalHeight.value}px` : void 0
+    })), k = i(() => s.virtualItems.value), K = (t, n) => {
+      if (typeof e.itemKey == "function") return e.itemKey(t, n);
+      if (typeof e.itemKey == "string" && t && typeof t == "object") {
+        const o = t[e.itemKey];
+        return o === void 0 ? n : String(o);
+      }
+      return n;
+    }, T = (t) => {
+      s.scrollHandler(), h("on-scroll", t);
+    }, B = (t, n) => {
+      s.measureElement(n, t);
+    };
+    return f({
+      containerRef: m,
+      refresh: s.refresh,
+      scrollToIndex: s.scrollToIndex
+    }), (t, n) => (l(), r("div", {
+      ref_key: "containerRef",
+      ref: m,
+      class: $(x.value),
+      style: c(H.value),
+      onScroll: T
+    }, [
+      e.items.length ? (l(), r("div", {
+        key: 0,
+        class: "nmorph-virtual-list__spacer",
+        style: c(b.value)
+      }, [
+        L("div", {
+          class: "nmorph-virtual-list__content",
+          style: c(S.value)
+        }, [
+          (l(!0), r(R, null, z(k.value, (o) => (l(), E(N(e.itemTag), {
+            key: K(o.item, o.index),
+            ref_for: !0,
+            ref: (C) => B(C, o.index),
+            class: "nmorph-virtual-list__item"
+          }, {
+            default: D(() => [
+              d(t.$slots, "default", {
+                item: o.item,
+                index: o.index
+              }, () => [
+                F(j(o.item), 1)
+              ])
+            ]),
+            _: 2
+          }, 1024))), 128))
+        ], 4)
+      ], 4)) : (l(), r("div", Y, [
+        d(t.$slots, "empty")
       ]))
-    ],
-    38
-    /* CLASS, STYLE, NEED_HYDRATION */
-  );
-}
-const z = /* @__PURE__ */ x(a, [["render", S], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-virtual-list/NmorphVirtualList.vue"]]);
+    ], 38));
+  }
+});
 export {
-  z as default
+  O as default
 };

package/dist/components/data/nmorph-virtual-list/NmorphVirtualList.vue3.js

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

package/dist/components/feedback/nmorph-alert/NmorphAlert.vue.js

@@ -1,85 +1,108 @@
 import './NmorphAlert.css';
-import m from "./NmorphAlert.vue2.js";
-import { openBlock as e, createElementBlock as r, normalizeStyle as _, normalizeClass as d, createElementVNode as t, renderSlot as s, createVNode as i, withCtx as c, createBlock as h, resolveDynamicComponent as f, createCommentVNode as l, createTextVNode as a, toDisplayString as p } from "vue";
-/* empty css                 */
-import v from "../../../_virtual/_plugin-vue_export-helper.js";
-const y = ["innerHTML"], k = {
+import { defineComponent as b, computed as d, useSlots as g, unref as t, openBlock as o, createElementBlock as l, normalizeStyle as w, normalizeClass as B, createElementVNode as r, renderSlot as a, createVNode as c, withCtx as p, createBlock as S, resolveDynamicComponent as T, createCommentVNode as s, createTextVNode as f, toDisplayString as u } from "vue";
+import { useModifiers as V } from "../../../utils/create-modifiers.js";
+import { createCssVariables as F } from "../../../utils/common.js";
+import { NmorphAlertType as n } from "./types.js";
+import M from "../../../assets/icons/circle-close-filled.svg.js";
+import _ from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+/* empty css                                      */
+import $ from "../../../assets/icons/info-filled.svg.js";
+import x from "../../../assets/icons/warn-triangle-filled.svg.js";
+import z from "../../../assets/icons/success-filled.svg.js";
+import H from "../../../assets/icons/cross.svg.js";
+const A = ["innerHTML"], D = {
   key: 1,
   class: "nmorph-alert__wrapper"
-}, N = { class: "nmorph-alert__left-side" }, w = {
+}, E = { class: "nmorph-alert__left-side" }, L = {
   key: 0,
   class: "nmorph-alert__icon"
-}, C = { class: "nmorph-alert__content-wrapper" }, b = { class: "nmorph-alert__content-title" }, x = { class: "nmorph-alert__content" };
-function I(n, V, z, o, B, H) {
-  return o.slots.default || o.props.title || o.props.content || o.props.html ? (e(), r(
-    "div",
-    {
+}, P = { class: "nmorph-alert__content-wrapper" }, W = { class: "nmorph-alert__content-title" }, j = { class: "nmorph-alert__content" }, oe = /* @__PURE__ */ b({
+  __name: "NmorphAlert",
+  props: {
+    id: { default: void 0 },
+    type: { default: "info" },
+    closable: { type: Boolean, default: !1 },
+    title: { default: "" },
+    content: { default: "" },
+    fill: { type: Boolean, default: !1 },
+    showIcon: { type: Boolean, default: !0 },
+    bordered: { type: Boolean, default: !0 },
+    html: { default: "" },
+    closeIconPosition: { default: "center" },
+    backgroundColor: { default: void 0 }
+  },
+  emits: ["close"],
+  setup(h, { emit: y }) {
+    const e = h, v = y, k = d(
+      () => V({
+        "nmorph-alert": [e.type, e.bordered && "bordered", e.fill && "fill"]
+      })
+    ), C = d(() => ({
+      "--nmorph-alert-close-align": e.closeIconPosition,
+      ...F({
+        "--background-color": e.backgroundColor
+      })
+    })), N = () => {
+      v("close");
+    }, I = {
+      [n.success]: z,
+      [n.warning]: x,
+      [n.info]: $,
+      [n.error]: M
+    }, m = g();
+    return (i, q) => t(m).default || e.title || e.content || e.html ? (o(), l("div", {
       key: 0,
-      class: d(o.modifiers),
-      style: _(o.styles)
-    },
-    [
-      o.props.html ? (e(), r("div", {
+      class: B(k.value),
+      style: w(C.value)
+    }, [
+      e.html ? (o(), l("div", {
         key: 0,
         class: "nmorph-alert__html-wrapper",
-        innerHTML: o.props.html
-      }, null, 8, y)) : (e(), r("div", k, [
-        t("div", N, [
-          o.props.showIcon ? (e(), r("div", w, [
-            s(n.$slots, "icon", {}, () => [
-              i(o.NmorphIcon, { size: "medium" }, {
-                default: c(() => [
-                  (e(), h(f(o.iconNameMap[o.props.type])))
+        innerHTML: e.html
+      }, null, 8, A)) : (o(), l("div", D, [
+        r("div", E, [
+          e.showIcon ? (o(), l("div", L, [
+            a(i.$slots, "icon", {}, () => [
+              c(t(_), { size: "medium" }, {
+                default: p(() => [
+                  (o(), S(T(I[e.type])))
                 ]),
                 _: 1
-                /* STABLE */
               })
             ])
-          ])) : l("v-if", !0),
-          t("div", C, [
-            t("div", b, [
-              o.props.title || o.slots.title ? s(n.$slots, "title", { key: 0 }, () => [
-                a(
-                  p(o.props.title),
-                  1
-                  /* TEXT */
-                )
-              ]) : l("v-if", !0)
+          ])) : s("", !0),
+          r("div", P, [
+            r("div", W, [
+              e.title || t(m).title ? a(i.$slots, "title", { key: 0 }, () => [
+                f(u(e.title), 1)
+              ]) : s("", !0)
             ]),
-            t("div", x, [
-              s(n.$slots, "default", {}, () => [
-                a(
-                  p(o.props.content),
-                  1
-                  /* TEXT */
-                )
+            r("div", j, [
+              a(i.$slots, "default", {}, () => [
+                f(u(e.content), 1)
               ])
             ])
           ])
         ]),
-        o.props.closable ? (e(), r("div", {
+        e.closable ? (o(), l("div", {
           key: 0,
           class: "nmorph-alert__close",
-          onClick: o.closeHandler
+          onClick: N
         }, [
-          i(o.NmorphIcon, {
+          c(t(_), {
             width: "14px",
             height: "14px"
           }, {
-            default: c(() => [
-              i(o.NmorphIconCross)
+            default: p(() => [
+              c(t(H))
             ]),
             _: 1
-            /* STABLE */
           })
-        ])) : l("v-if", !0)
+        ])) : s("", !0)
       ]))
-    ],
-    6
-    /* CLASS, STYLE */
-  )) : l("v-if", !0);
-}
-const A = /* @__PURE__ */ v(m, [["render", I], ["__file", "/builds/ketjo/nmorph/library/src/components/feedback/nmorph-alert/NmorphAlert.vue"]]);
+    ], 6)) : s("", !0);
+  }
+});
 export {
-  A as default
+  oe as default
 };

package/dist/components/feedback/nmorph-alert/NmorphAlert.vue3.js

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

package/dist/components/feedback/nmorph-callout/NmorphCallout.vue.js

@@ -1,37 +1,49 @@
 import './NmorphCallout.css';
-import r from "./NmorphCallout.vue2.js";
-import { openBlock as t, createElementBlock as e, normalizeStyle as l, normalizeClass as n, toDisplayString as c, createCommentVNode as s, createElementVNode as a } from "vue";
-/* empty css                   */
-import i from "../../../_virtual/_plugin-vue_export-helper.js";
-const p = {
+import { defineComponent as n, computed as i, openBlock as e, createElementBlock as o, normalizeStyle as r, normalizeClass as c, toDisplayString as d, createCommentVNode as s, createElementVNode as u } from "vue";
+import { createCssVariables as p, createCssSizeVariables as m } from "../../../utils/common.js";
+const f = {
   key: 0,
   class: "nmorph-callout__title"
-}, m = ["innerHTML"];
-function _(d, f, h, o, u, y) {
-  return t(), e(
-    "div",
-    {
-      class: n(["nmorph-callout", `nmorph-callout--${o.props.type}`]),
-      style: l(o.styles)
-    },
-    [
-      o.props.title ? (t(), e(
-        "div",
-        p,
-        c(o.props.title),
-        1
-        /* TEXT */
-      )) : s("v-if", !0),
-      a("div", {
+}, _ = ["innerHTML"], S = /* @__PURE__ */ n({
+  __name: "NmorphCallout",
+  props: {
+    type: { default: "info" },
+    title: { default: "" },
+    content: {},
+    color: { default: void 0 },
+    padding: { default: "var(--indentation-03) var(--indentation-04)" },
+    borderRadius: { default: "var(--default-border-radius)" },
+    accentWidth: { default: "var(--indentation-02)" },
+    titleGap: { default: "var(--indentation-03)" },
+    titleFontSize: { default: "var(--font-size-medium)" },
+    contentFontSize: { default: "var(--font-size-extra-small)" }
+  },
+  setup(a) {
+    const t = a, l = i(() => ({
+      ...m({
+        "--callout-padding": t.padding,
+        "--callout-border-radius": t.borderRadius,
+        "--callout-accent-width": t.accentWidth,
+        "--callout-title-gap": t.titleGap,
+        "--callout-title-font-size": t.titleFontSize,
+        "--callout-content-font-size": t.contentFontSize
+      }),
+      ...p({
+        "--callout-color": t.color
+      })
+    }));
+    return (v, h) => (e(), o("div", {
+      class: c(["nmorph-callout", `nmorph-callout--${t.type}`]),
+      style: r(l.value)
+    }, [
+      t.title ? (e(), o("div", f, d(t.title), 1)) : s("", !0),
+      u("div", {
         class: "nmorph-callout__content",
-        innerHTML: o.props.content
-      }, null, 8, m)
-    ],
-    6
-    /* CLASS, STYLE */
-  );
-}
-const b = /* @__PURE__ */ i(r, [["render", _], ["__file", "/builds/ketjo/nmorph/library/src/components/feedback/nmorph-callout/NmorphCallout.vue"]]);
+        innerHTML: t.content
+      }, null, 8, _)
+    ], 6));
+  }
+});
 export {
-  b as default
+  S as default
 };

package/dist/components/feedback/nmorph-callout/NmorphCallout.vue3.js

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

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