@nmorph/nmorph-ui-kit 2.2.53 → 2.2.54

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,45 +1,87 @@
 import './NmorphCallout.css';
-import n from "./NmorphCallout.vue2.js";
-import { openBlock as t, createBlock as s, resolveDynamicComponent as a, mergeProps as c, withCtx as i, createElementBlock as r, renderSlot as l, createTextVNode as p, toDisplayString as m, createCommentVNode as _ } from "vue";
-/* empty css                   */
-import d from "../../../_virtual/_plugin-vue_export-helper.js";
-const h = {
+import { defineComponent as v, useSlots as m, computed as t, openBlock as a, createBlock as h, resolveDynamicComponent as _, mergeProps as y, withCtx as g, createElementBlock as r, renderSlot as n, createTextVNode as b, toDisplayString as z, createCommentVNode as S } from "vue";
+import { createCssVariables as k, createCssSizeVariables as C } from "../../../utils/common.js";
+const w = {
   key: 0,
   class: "nmorph-callout__title"
-}, f = {
+}, B = {
   key: 1,
   class: "nmorph-callout__content"
-}, u = ["innerHTML"];
-function y(e, k, v, o, C, N) {
-  return t(), s(a(o.props.as), c({
-    class: ["nmorph-callout", `nmorph-callout--${o.props.type}`],
-    style: o.styles
-  }, o.rootAttrs), {
-    default: i(() => [
-      o.hasHeader ? (t(), r("div", h, [
-        l(e.$slots, "header", {}, () => [
-          l(e.$slots, "title", {}, () => [
-            p(
-              m(o.props.title),
-              1
-              /* TEXT */
-            )
+}, F = ["innerHTML"], $ = /* @__PURE__ */ v({
+  __name: "NmorphCallout",
+  props: {
+    type: { default: "info" },
+    title: { default: "" },
+    content: { default: "" },
+    as: { default: "div" },
+    href: { default: void 0 },
+    target: { default: void 0 },
+    rel: { default: void 0 },
+    referrerpolicy: { default: void 0 },
+    referrerPolicy: { default: void 0 },
+    download: { type: [String, Boolean], default: void 0 },
+    ariaLabel: { default: void 0 },
+    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(d) {
+    const i = {
+      self: "_self",
+      blank: "_blank",
+      parent: "_parent",
+      top: "_top"
+    }, e = d, o = m(), s = t(() => ({
+      ...C({
+        "--callout-padding": e.padding,
+        "--callout-border-radius": e.borderRadius,
+        "--callout-accent-width": e.accentWidth,
+        "--callout-title-gap": e.titleGap,
+        "--callout-title-font-size": e.titleFontSize,
+        "--callout-content-font-size": e.contentFontSize
+      }),
+      ...k({
+        "--callout-color": e.color
+      })
+    })), c = t(() => {
+      if (e.target)
+        return e.target in i ? i[e.target] : e.target;
+    }), u = t(() => e.as !== "a" ? {} : {
+      href: e.href,
+      target: c.value,
+      rel: e.rel,
+      referrerpolicy: e.referrerpolicy ?? e.referrerPolicy,
+      download: e.download === !0 ? "" : e.download === !1 ? void 0 : e.download,
+      "aria-label": e.ariaLabel
+    }), f = t(() => !!(o.header || o.title || e.title)), p = t(() => !!o.default);
+    return (l, L) => (a(), h(_(e.as), y({
+      class: ["nmorph-callout", `nmorph-callout--${e.type}`],
+      style: s.value
+    }, u.value), {
+      default: g(() => [
+        f.value ? (a(), r("div", w, [
+          n(l.$slots, "header", {}, () => [
+            n(l.$slots, "title", {}, () => [
+              b(z(e.title), 1)
+            ])
           ])
-        ])
-      ])) : _("v-if", !0),
-      o.hasDefaultContent ? (t(), r("div", f, [
-        l(e.$slots, "default")
-      ])) : (t(), r("div", {
-        key: 2,
-        class: "nmorph-callout__content",
-        innerHTML: o.props.content
-      }, null, 8, u))
-    ]),
-    _: 3
-    /* FORWARDED */
-  }, 16, ["class", "style"]);
-}
-const T = /* @__PURE__ */ d(n, [["render", y], ["__file", "/builds/ketjo/nmorph/library/src/components/feedback/nmorph-callout/NmorphCallout.vue"]]);
+        ])) : S("", !0),
+        p.value ? (a(), r("div", B, [
+          n(l.$slots, "default")
+        ])) : (a(), r("div", {
+          key: 2,
+          class: "nmorph-callout__content",
+          innerHTML: e.content
+        }, null, 8, F))
+      ]),
+      _: 3
+    }, 16, ["class", "style"]));
+  }
+});
 export {
-  T as default
+  $ 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
+};