@nmorph/nmorph-ui-kit 2.2.18 → 2.2.20

package/dist/components/data/nmorph-collapse/components/nmorph-collapse-item/NmorphCollapseItem.vue.js

@@ -1,29 +1,30 @@
 import './NmorphCollapseItem.css';
 import i from "./NmorphCollapseItem.vue2.js";
-import { openBlock as s, createElementBlock as n, withModifiers as a, normalizeClass as l, createElementVNode as o, renderSlot as r, createTextVNode as p, toDisplayString as c, normalizeStyle as m } from "vue";
+import { openBlock as n, createElementBlock as a, normalizeStyle as l, normalizeClass as r, createElementVNode as o, withModifiers as c, renderSlot as s, createTextVNode as m, toDisplayString as p } from "vue";
 /* empty css                        */
 import d from "../../../../../_virtual/_plugin-vue_export-helper.js";
 const _ = {
   ref: "collapseItemDOMElContent",
   class: "nmorph-collapse-item__inner-wrapper"
 };
-function f(t, h, k, e, v, C) {
-  return s(), n(
+function f(t, h, y, e, k, v) {
+  return n(), a(
     "div",
     {
-      class: l(e.modifiers),
-      onClick: a(e.clickHandler, ["stop"])
+      class: r(e.modifiers),
+      style: l(e.styles)
     },
     [
       o(
         "div",
         {
-          class: l(["nmorph-collapse-item__title", e.titleModifiers])
+          class: r(["nmorph-collapse-item__title", e.titleModifiers]),
+          onClick: c(e.clickHandler, ["stop"])
         },
         [
-          r(t.$slots, "title", {}, () => [
-            p(
-              c(e.props.title),
+          s(t.$slots, "title", {}, () => [
+            m(
+              p(e.props.title),
               1
               /* TEXT */
             )
@@ -36,14 +37,14 @@ function f(t, h, k, e, v, C) {
         "div",
         {
           class: "nmorph-collapse-item__content",
-          style: m({ height: `${e.contentHeight}px` })
+          style: l({ height: `${e.contentHeight}px` })
         },
         [
           o(
             "div",
             _,
             [
-              r(t.$slots, "default")
+              s(t.$slots, "default")
             ],
             512
             /* NEED_PATCH */
@@ -53,8 +54,8 @@ function f(t, h, k, e, v, C) {
         /* STYLE */
       )
     ],
-    2
-    /* CLASS */
+    6
+    /* CLASS, STYLE */
   );
 }
 const E = /* @__PURE__ */ d(i, [["render", f], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-collapse/components/nmorph-collapse-item/NmorphCollapseItem.vue"]]);

package/dist/components/data/nmorph-collapse/components/nmorph-collapse-item/NmorphCollapseItem.vue2.js

@@ -1,45 +1,60 @@
 import './NmorphCollapseItem.css';
-import { defineComponent as g, ref as o, computed as p, inject as c, onMounted as k, watch as d } from "vue";
-import { useModifiers as m } from "../../../../../utils/create-modifiers.js";
-import { NmorphComponentHeight as q } from "../../../../../types/index.js";
-const H = /* @__PURE__ */ g({
+import { defineComponent as H, ref as u, computed as d, inject as b, onMounted as z, onBeforeUnmount as M, watch as h, nextTick as w } from "vue";
+import { useModifiers as g } from "../../../../../utils/create-modifiers.js";
+import { NmorphComponentHeight as $ } from "../../../../../types/index.js";
+const D = /* @__PURE__ */ H({
   __name: "NmorphCollapseItem",
   props: {
     height: { type: null, required: !1, default: "basic" },
-    block: { type: Boolean, required: !1, default: !0 },
+    block: { type: Boolean, required: !1, default: !1 },
+    transitionSpeed: { type: [Number, String], required: !1, default: void 0 },
     name: { type: String, required: !0 },
     title: { type: String, required: !1, default: "" },
     disabled: { type: Boolean, required: !1, default: !1 }
   },
   emits: ["click-item"],
-  setup(f, { expose: v, emit: h }) {
-    v();
-    const t = f, n = h, e = o(!1), y = p(
-      () => m({
-        "nmorph-collapse-item": [`${t.disabled && "disabled"}`, `${e.value && "is-open"}`]
+  setup(y, { expose: O, emit: _ }) {
+    O();
+    const e = y, p = _, n = u(!1), k = d(
+      () => g({
+        "nmorph-collapse-item": [
+          `${e.disabled && "disabled"}`,
+          `${e.block && "block"}`,
+          `${n.value && "is-open"}`
+        ]
       })
-    ), _ = p(
-      () => m({
-        nmorph: [q[t.height]]
+    ), S = d(
+      () => g({
+        nmorph: [$[e.height]]
       })
-    ), l = c("collapse-data"), a = c("update-model"), i = o(null), s = o(0), b = () => {
-      t.block || (e.value = !e.value, a && (a(t.name, e.value), n("click-item", { id: t.name, isOpen: e.value })));
+    ), c = (t) => typeof t == "number" ? `${t}ms` : t, C = d(() => ({
+      ...e.transitionSpeed !== void 0 && { "--transition-speed": c(e.transitionSpeed) }
+    })), o = b("collapse-data"), m = b("update-model"), r = u(null), f = u(0);
+    let s = null;
+    const l = (t) => Array.isArray(t) ? t.includes(e.name) : t === e.name, a = () => {
+      f.value = n.value && r.value ? r.value.scrollHeight : 0;
+    }, i = () => w(a), q = () => {
+      e.disabled || e.block || (n.value = !n.value, m?.(e.name, n.value), p("click-item", { id: e.name, isOpen: n.value }));
     };
-    k(() => {
-      Array.isArray(l?.value) ? e.value = l.value.includes(t.name) : e.value = l?.value === t.name;
-    }), d(
-      () => l?.value,
-      (r) => {
-        Array.isArray(r) ? e.value = r.includes(t.name) : e.value = r === t.name;
+    z(() => {
+      n.value = l(o?.value), i(), "ResizeObserver" in window && r.value && (s = new ResizeObserver(a), s.observe(r.value));
+    }), M(() => {
+      s?.disconnect();
+    }), h(
+      () => o?.value,
+      (t) => {
+        n.value = l(t), i();
       },
       { deep: !0 }
-    ), d(e, () => {
-      s.value = e.value && i.value ? i.value?.clientHeight : 0;
-    });
-    const u = { props: t, emit: n, isOpen: e, modifiers: y, titleModifiers: _, collapseData: l, updateModel: a, collapseItemDOMElContent: i, contentHeight: s, clickHandler: b };
-    return Object.defineProperty(u, "__isScriptSetup", { enumerable: !1, value: !0 }), u;
+    ), h(n, i);
+    const v = { props: e, emit: p, isOpen: n, modifiers: k, titleModifiers: S, getCssDuration: c, styles: C, collapseData: o, updateModel: m, collapseItemDOMElContent: r, contentHeight: f, get resizeObserver() {
+      return s;
+    }, set resizeObserver(t) {
+      s = t;
+    }, isValueOpen: l, updateContentHeight: a, updateContentHeightAfterRender: i, clickHandler: q };
+    return Object.defineProperty(v, "__isScriptSetup", { enumerable: !1, value: !0 }), v;
   }
 });
 export {
-  H as default
+  D as default
 };

package/dist/components/data/nmorph-empty/NmorphEmpty.css

@@ -0,0 +1 @@
+.nmorph-empty{display:flex;flex-direction:column;gap:8px;justify-content:center;align-items:center;width:100%;min-height:var(--nmorph-empty-min-height);padding:var(--nmorph-empty-padding);color:var(--nmorph-text-color);text-align:center;border-radius:var(--default-border-radius)}.nmorph-empty .nmorph-empty__icon{display:flex;justify-content:center;align-items:center;width:var(--nmorph-empty-icon-size);height:var(--nmorph-empty-icon-size);color:var(--nmorph-semi-contrast-text-color)}.nmorph-empty .nmorph-empty__icon .nmorph-icon{--color: var(--nmorph-semi-contrast-text-color)}.nmorph-empty .nmorph-empty__title{font-weight:600;font-size:var(--font-size-large);line-height:var(--line-height-regular)}.nmorph-empty .nmorph-empty__description{max-width:420px;color:var(--nmorph-semi-contrast-text-color);font-weight:400;font-size:var(--font-size-small);line-height:var(--line-height-loose)}.nmorph-empty .nmorph-empty__action{display:flex;justify-content:center;margin-top:4px}.nmorph-empty.nmorph-empty--nmorph{background:var(--nmorph-main-color)}.nmorph-empty.nmorph-empty--nmorph.nmorph--shadow-inset{box-shadow:var(--nmorph-shadow-inset)}.nmorph-empty.nmorph-empty--nmorph.nmorph--shadow-outset{box-shadow:var(--nmorph-shadow-outset)}.nmorph-empty.nmorph-empty--common{border:1px solid var(--nmorph-gray-color)}

package/dist/components/data/nmorph-empty/NmorphEmpty.vue.js

@@ -0,0 +1,64 @@
+import './NmorphEmpty.css';
+import c from "./NmorphEmpty.vue2.js";
+import { openBlock as t, createElementBlock as i, normalizeStyle as m, normalizeClass as d, renderSlot as r, createVNode as n, withCtx as p, createCommentVNode as s, createElementVNode as h, createTextVNode as l, toDisplayString as a } from "vue";
+/* empty css                 */
+import _ from "../../../_virtual/_plugin-vue_export-helper.js";
+const y = ["role", "aria-label"], f = {
+  key: 0,
+  class: "nmorph-empty__icon",
+  "aria-hidden": "true"
+}, v = { class: "nmorph-empty__title" }, N = {
+  key: 1,
+  class: "nmorph-empty__description"
+}, S = {
+  key: 2,
+  class: "nmorph-empty__action"
+};
+function k(e, z, b, o, g, C) {
+  return t(), i("div", {
+    class: d(o.modifiers),
+    style: m(o.styles),
+    role: o.props.role,
+    "aria-label": o.label
+  }, [
+    o.hasIcon ? (t(), i("div", f, [
+      r(e.$slots, "icon", {}, () => [
+        n(o.NmorphIcon, {
+          width: o.getCssSize(o.props.iconSize),
+          height: o.getCssSize(o.props.iconSize)
+        }, {
+          default: p(() => [
+            n(o.NmorphIconFolderOpened)
+          ]),
+          _: 1
+          /* STABLE */
+        }, 8, ["width", "height"])
+      ])
+    ])) : s("v-if", !0),
+    h("div", v, [
+      r(e.$slots, "title", {}, () => [
+        l(
+          a(o.props.title),
+          1
+          /* TEXT */
+        )
+      ])
+    ]),
+    o.hasDescription ? (t(), i("div", N, [
+      r(e.$slots, "description", {}, () => [
+        l(
+          a(o.props.description),
+          1
+          /* TEXT */
+        )
+      ])
+    ])) : s("v-if", !0),
+    o.slots.action ? (t(), i("div", S, [
+      r(e.$slots, "action")
+    ])) : s("v-if", !0)
+  ], 14, y);
+}
+const B = /* @__PURE__ */ _(c, [["render", k], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-empty/NmorphEmpty.vue"]]);
+export {
+  B as default
+};

package/dist/components/data/nmorph-empty/NmorphEmpty.vue2.js

@@ -0,0 +1,43 @@
+import './NmorphEmpty.css';
+import { defineComponent as f, useSlots as c, computed as t } from "vue";
+import { NmorphShadowType as h } from "../../../types/index.js";
+import { useModifiers as y } from "../../../utils/create-modifiers.js";
+import g from "../../../assets/icons/folder-opened.svg.js";
+import S from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+const z = /* @__PURE__ */ f({
+  __name: "NmorphEmpty",
+  props: {
+    title: { type: String, required: !1, default: "No data" },
+    description: { type: String, required: !1, default: "" },
+    iconSize: { type: [Number, String], required: !1, default: 56 },
+    minHeight: { type: [Number, String], required: !1, default: 160 },
+    padding: { type: [Number, String], required: !1, default: "var(--indentation-05)" },
+    design: { type: String, required: !1, default: "nmorph" },
+    shadowType: { type: null, required: !1, default: "inset" },
+    hideIcon: { type: Boolean, required: !1, default: !1 },
+    role: { type: String, required: !1, default: "status" },
+    ariaLabel: { type: String, required: !1, default: void 0 },
+    ariaOrientation: { type: String, required: !1, default: void 0 }
+  },
+  setup(p, { expose: s }) {
+    s();
+    const e = p, o = c(), r = (i) => typeof i == "number" ? `${i}px` : i, a = t(() => !e.hideIcon || !!o.icon), d = t(() => !!(e.description || o.description)), l = t(() => e.ariaLabel || e.title), m = t(
+      () => y({
+        nmorph: [e.design === "nmorph" ? h[e.shadowType] : ""],
+        "nmorph-empty": [e.design]
+      })
+    ), u = t(() => ({
+      "--nmorph-empty-icon-size": r(e.iconSize),
+      "--nmorph-empty-min-height": r(e.minHeight),
+      "--nmorph-empty-padding": r(e.padding)
+    })), n = { props: e, slots: o, getCssSize: r, hasIcon: a, hasDescription: d, label: l, modifiers: m, styles: u, get NmorphIcon() {
+      return S;
+    }, get NmorphIconFolderOpened() {
+      return g;
+    } };
+    return Object.defineProperty(n, "__isScriptSetup", { enumerable: !1, value: !0 }), n;
+  }
+});
+export {
+  z as default
+};

package/dist/components/data/nmorph-image-preview/NmorphImagePreview.css

@@ -1 +1 @@
-.nmorph-image-preview{--width: 50px;--height: 50px;width:var(--width);height:var(--height);overflow:hidden}.nmorph-image-preview .nmorph-image-preview__trigger{position:relative;width:100%;height:100%;cursor:pointer}.nmorph-image-preview .nmorph-image-preview__trigger:hover{filter:brightness(.8)}.nmorph-image-preview .nmorph-image-preview__trigger .nmorph-image{width:100%;height:100%}.nmorph-image-preview__portal{display:contents}.nmorph-image-preview__portal .nmorph-image-preview__content{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);transition:var(--transition-04) opacity ease-in-out}.nmorph-image-preview__portal .nmorph-image-preview__actions{position:absolute;bottom:-50px;left:50%;z-index:2;display:flex;height:0;transform:translate(-50%);transition:ease-in-out bottom var(--transition-03)}.nmorph-image-preview__portal .nmorph-image-preview__action-element{margin-right:var(--indentation-03)}.nmorph-image-preview__portal .nmorph-button__content{box-shadow:none}.nmorph-image-preview__portal .nmorph-image-preview__left,.nmorph-image-preview__portal .nmorph-image-preview__right{z-index:2}.nmorph-image-preview__portal .nmorph-image-preview__left{position:absolute;top:50%;left:-100%;transform:rotate(90deg) translate(-50%);transition:ease-in-out left var(--transition-03)}.nmorph-image-preview__portal .nmorph-image-preview__right{position:absolute;top:50%;right:-100%;transform:rotate(270deg) translate(50%);transition:ease-in-out right var(--transition-03)}.nmorph-image-preview__portal.nmorph-image-preview--opened .nmorph-image-preview__actions{bottom:50px}.nmorph-image-preview__portal.nmorph-image-preview--opened{--nmorph-image-preview-btn-margin: 20px}.nmorph-image-preview__portal.nmorph-image-preview--opened .nmorph-image-preview__left{left:var(--nmorph-image-preview-btn-margin)}.nmorph-image-preview__portal.nmorph-image-preview--opened .nmorph-image-preview__right{right:var(--nmorph-image-preview-btn-margin)}
+.nmorph-image-preview{--width: 50px;--height: 50px;width:var(--width);height:var(--height);overflow:hidden}.nmorph-image-preview .nmorph-image-preview__trigger{position:relative;width:100%;height:100%;cursor:pointer}.nmorph-image-preview .nmorph-image-preview__trigger:hover{filter:brightness(.8)}.nmorph-image-preview .nmorph-image-preview__trigger .nmorph-image{width:100%;height:100%}.nmorph-image-preview__portal{display:contents}.nmorph-image-preview__portal .nmorph-image-preview__content{position:absolute;top:50%;left:50%;display:flex;justify-content:center;align-items:center;width:min(100vw - 96px,960px);height:min(100vh - 180px,720px);transform:translate(-50%,-50%);transition:var(--transition-04) opacity ease-in-out}.nmorph-image-preview__portal .nmorph-image-preview__content .nmorph-image{width:100%;height:100%}.nmorph-image-preview__portal .nmorph-image-preview__content .nmorph-image img{width:100%;height:100%;object-fit:contain}.nmorph-image-preview__portal .nmorph-image-preview__actions{position:absolute;bottom:-50px;left:50%;z-index:2;display:flex;height:0;transform:translate(-50%);transition:ease-in-out bottom var(--transition-03)}.nmorph-image-preview__portal .nmorph-image-preview__action-element{margin-right:var(--indentation-03)}.nmorph-image-preview__portal .nmorph-button__content{box-shadow:none}.nmorph-image-preview__portal .nmorph-image-preview__left,.nmorph-image-preview__portal .nmorph-image-preview__right{z-index:2}.nmorph-image-preview__portal .nmorph-image-preview__left{position:absolute;top:50%;left:-100%;transform:rotate(90deg) translate(-50%);transition:ease-in-out left var(--transition-03)}.nmorph-image-preview__portal .nmorph-image-preview__right{position:absolute;top:50%;right:-100%;transform:rotate(270deg) translate(50%);transition:ease-in-out right var(--transition-03)}.nmorph-image-preview__portal.nmorph-image-preview--opened .nmorph-image-preview__actions{bottom:50px}.nmorph-image-preview__portal.nmorph-image-preview--opened{--nmorph-image-preview-btn-margin: 20px}.nmorph-image-preview__portal.nmorph-image-preview--opened .nmorph-image-preview__left{left:var(--nmorph-image-preview-btn-margin)}.nmorph-image-preview__portal.nmorph-image-preview--opened .nmorph-image-preview__right{right:var(--nmorph-image-preview-btn-margin)}

package/dist/components/data/nmorph-image-preview/NmorphImagePreview.vue.js

@@ -1,108 +1,111 @@
 import './NmorphImagePreview.css';
-import g from "./NmorphImagePreview.vue2.js";
-import { openBlock as l, createElementBlock as a, Fragment as s, normalizeClass as h, createElementVNode as i, createVNode as e, createSlots as _, withCtx as r, renderSlot as m, createCommentVNode as t, createBlock as c, Teleport as p, normalizeStyle as k, renderList as w, resolveDynamicComponent as v } from "vue";
+import p from "./NmorphImagePreview.vue2.js";
+import { openBlock as l, createElementBlock as a, Fragment as h, normalizeStyle as m, normalizeClass as _, createElementVNode as i, createVNode as o, createSlots as v, withCtx as r, renderSlot as t, createCommentVNode as d, createBlock as c, Teleport as k, renderList as y, resolveDynamicComponent as f } from "vue";
 /* empty css                        */
-import N from "../../../_virtual/_plugin-vue_export-helper.js";
-const y = { class: "nmorph-image-preview__content" }, C = {
+import w from "../../../_virtual/_plugin-vue_export-helper.js";
+const N = { class: "nmorph-image-preview__content" }, C = {
   key: 0,
   class: "nmorph-image-preview__left"
 }, I = {
   key: 1,
   class: "nmorph-image-preview__right"
 }, S = { class: "nmorph-image-preview__actions" }, b = { class: "nmorph-image-preview__action-element" };
-function B(n, z, D, o, H, L) {
+function B(n, z, D, e, H, L) {
   return l(), a(
-    s,
+    h,
     null,
     [
-      o.props.showTrigger ? (l(), a(
+      e.props.showTrigger ? (l(), a(
         "div",
         {
           key: 0,
-          class: h(o.modifiers)
+          class: _(e.modifiers),
+          style: m(e.triggerStyle)
         },
         [
           i("div", {
             class: "nmorph-image-preview__trigger",
-            onClick: o.clickHandler
+            onClick: e.clickHandler
           }, [
-            e(o.NmorphImage, {
-              src: o.triggerSource,
-              alt: o.props.alt,
+            o(e.NmorphImage, {
+              src: e.triggerSource,
+              alt: e.props.alt,
               fit: "cover",
               "frame-border": 0
-            }, _({
+            }, v({
               _: 2
               /* DYNAMIC */
             }, [
               n.$slots.loading ? {
                 name: "loading",
                 fn: r(() => [
-                  m(n.$slots, "loading")
+                  t(n.$slots, "loading")
                 ]),
                 key: "0"
               } : void 0,
               n.$slots.error ? {
                 name: "error",
                 fn: r(() => [
-                  m(n.$slots, "error")
+                  t(n.$slots, "error")
                 ]),
                 key: "1"
               } : void 0
             ]), 1032, ["src", "alt"])
           ])
         ],
-        2
-        /* CLASS */
-      )) : t("v-if", !0),
-      (l(), c(p, { to: "body" }, [
+        6
+        /* CLASS, STYLE */
+      )) : d("v-if", !0),
+      (l(), c(k, { to: "body" }, [
         i(
           "div",
           {
-            class: h(["nmorph-image-preview__portal", o.modifiers])
+            class: _(["nmorph-image-preview__portal", e.modifiers]),
+            style: m(e.portalStyle)
           },
           [
-            e(o.NmorphOverlay, {
-              show: o.open,
-              "z-index": o.props.zIndex,
+            o(e.NmorphOverlay, {
+              show: e.open,
+              "z-index": e.props.zIndex,
+              "disabled-teleport": "",
               "trap-focus": "",
-              onOnOutsideClick: o.closeHandler,
-              onOnEscapeKeydown: o.closeHandler
+              onOnOutsideClick: e.closeHandler,
+              onOnEscapeKeydown: e.closeHandler
             }, {
               default: r(() => [
-                i("div", y, [
-                  e(o.NmorphImage, {
-                    src: o.triggerSource,
-                    alt: o.props.alt,
-                    fit: "cover",
+                i("div", N, [
+                  o(e.NmorphImage, {
+                    src: e.triggerSource,
+                    alt: e.props.alt,
+                    fit: "contain",
                     "frame-border": 0,
-                    style: k({ transform: `rotate(${o.rotateLevel}deg) scale(${o.scaleLevel})` })
-                  }, _({
+                    style: m({ transform: `rotate(${e.rotateLevel}deg) scale(${e.scaleLevel})` })
+                  }, v({
                     _: 2
                     /* DYNAMIC */
                   }, [
                     n.$slots.loading ? {
                       name: "loading",
                       fn: r(() => [
-                        m(n.$slots, "loading")
+                        t(n.$slots, "loading")
                       ]),
                       key: "0"
                     } : void 0,
                     n.$slots.error ? {
                       name: "error",
                       fn: r(() => [
-                        m(n.$slots, "error")
+                        t(n.$slots, "error")
                       ]),
                       key: "1"
                     } : void 0
                   ]), 1032, ["src", "alt", "style"])
                 ]),
-                o.multipleSources ? (l(), a("div", C, [
-                  e(o.NmorphButton, { onClick: o.previousHandler }, {
+                e.multipleSources ? (l(), a("div", C, [
+                  o(e.NmorphButton, { onClick: e.previousHandler }, {
                     default: r(() => [
-                      e(o.NmorphIcon, null, {
+                      o(e.NmorphIcon, null, {
                         default: r(() => [
-                          e(o.NmorphIconChevronDown)
+                          o(e.NmorphIconChevronDown)
                         ]),
                         _: 1
                         /* STABLE */
@@ -111,13 +114,13 @@ function B(n, z, D, o, H, L) {
                     _: 1
                     /* STABLE */
                   })
-                ])) : t("v-if", !0),
-                o.multipleSources ? (l(), a("div", I, [
-                  e(o.NmorphButton, { onClick: o.nextHandler }, {
+                ])) : d("v-if", !0),
+                e.multipleSources ? (l(), a("div", I, [
+                  o(e.NmorphButton, { onClick: e.nextHandler }, {
                     default: r(() => [
-                      e(o.NmorphIcon, null, {
+                      o(e.NmorphIcon, null, {
                         default: r(() => [
-                          e(o.NmorphIconChevronDown)
+                          o(e.NmorphIconChevronDown)
                         ]),
                         _: 1
                         /* STABLE */
@@ -126,25 +129,25 @@ function B(n, z, D, o, H, L) {
                     _: 1
                     /* STABLE */
                   })
-                ])) : t("v-if", !0),
+                ])) : d("v-if", !0),
                 i("div", S, [
                   (l(), a(
-                    s,
+                    h,
                     null,
-                    w(o.actions, (d, f) => i("div", {
-                      key: f,
+                    y(e.actions, (s, g) => i("div", {
+                      key: g,
                       class: "nmorph-image-preview__action-element"
                     }, [
-                      e(o.NmorphButton, {
-                        onClick: d.handler
+                      o(e.NmorphButton, {
+                        onClick: s.handler
                       }, {
                         default: r(() => [
-                          e(
-                            o.NmorphIcon,
+                          o(
+                            e.NmorphIcon,
                             null,
                             {
                               default: r(() => [
-                                (l(), c(v(d.icon)))
+                                (l(), c(f(s.icon)))
                               ]),
                               _: 2
                               /* DYNAMIC */
@@ -161,14 +164,14 @@ function B(n, z, D, o, H, L) {
                     /* STABLE_FRAGMENT */
                   )),
                   i("div", b, [
-                    e(o.NmorphButton, {
-                      disabled: o.scaleLevel === 1,
-                      onClick: o.enlargeShrinkActionData.handler
+                    o(e.NmorphButton, {
+                      disabled: e.scaleLevel === 1,
+                      onClick: e.enlargeShrinkActionData.handler
                     }, {
                       default: r(() => [
-                        e(o.NmorphIcon, null, {
+                        o(e.NmorphIcon, null, {
                           default: r(() => [
-                            (l(), c(v(o.enlargeShrinkActionData.icon)))
+                            (l(), c(f(e.enlargeShrinkActionData.icon)))
                           ]),
                           _: 1
                           /* STABLE */
@@ -184,8 +187,8 @@ function B(n, z, D, o, H, L) {
               /* FORWARDED */
             }, 8, ["show", "z-index"])
           ],
-          2
-          /* CLASS */
+          6
+          /* CLASS, STYLE */
         )
       ]))
     ],
@@ -193,7 +196,7 @@ function B(n, z, D, o, H, L) {
     /* STABLE_FRAGMENT */
   );
 }
-const A = /* @__PURE__ */ N(g, [["render", B], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-image-preview/NmorphImagePreview.vue"]]);
+const P = /* @__PURE__ */ w(p, [["render", B], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-image-preview/NmorphImagePreview.vue"]]);
 export {
-  A as default
+  P as default
 };