@nmorph/nmorph-ui-kit 2.2.10 → 2.2.13

package/README.md

@@ -1,9 +1,9 @@
-# Neumorphic UI Library for Vue 3
+# Neumorphic UI Library for Vue 3 and Nuxt
 
 ## Overview
 
-This is a UI component library for Vue 3, designed using the neumorphism/skeuomorphism style. It offers a set of simple
-components for creating unique user interfaces with a modern, 3D-like appearance.
+This is a UI component library for Vue 3 and Nuxt, designed using the neumorphism/skeuomorphism style. It offers a set
+of simple components for creating unique user interfaces with a modern, 3D-like appearance.
 
 ### What is Neumorphism/Skeuomorphism?
 
@@ -19,8 +19,7 @@ its stability, fixing bugs, and ensuring high-quality components.
 If you encounter any issues, please don't hesitate to report them. Your feedback is highly appreciated and will help
 enhance the library.
 
-**Documentation:** For detailed instructions and examples, visit the
-[official documentation site](https://nmorph.dev).
+**Documentation:** For detailed instructions and examples, visit the [official documentation site](https://nmorph.dev).
 
 ---
 
@@ -29,14 +28,17 @@ enhance the library.
 - **Neumorphic Design:** 3D-like components with soft shadows and smooth gradients.
 - **Customizable Themes:** Easily modify the base color, text color, and accent color to match your application's
   design.
-- **Lightweight and Intuitive:** Simple integration with Vue 3 using modern tools like Vite and Composition API.
+- **Vue and Nuxt Support:** Use the library in Vue 3 apps or through the Nuxt module.
+- **Nuxt SSR Support:** The Nuxt module installs a universal plugin so component markup can render during SSR while
+  browser-only theme and measurement effects run on the client.
+- **Lightweight and Intuitive:** Simple integration with modern tools like Vite, Nuxt, and Composition API.
 
 ---
 
 ## Requirements
 
 - **Node.js:** Version 18.13.0 or higher is required to use this library.
-- **Vue 3:** Ensure your project is set up with Vue 3 and Vite for best compatibility.
+- **Vue 3 or Nuxt:** Ensure your project is set up with Vue 3 or Nuxt 3 for best compatibility.
 
 ---
 
@@ -45,6 +47,8 @@ enhance the library.
 - Neumorphism
 - Skeuomorphism
 - Vue 3
+- Nuxt
+- Nuxt Module
 - UI Components
 - Neumorphic Design
 - Customizable Themes

package/dist/components/basic/nmorph-icon/NmorphIcon.css

@@ -1 +1 @@
-.nmorph-icon{width:var(--width);min-width:var(--width);height:var(--height);min-height:var(--height);display:flex;align-items:center;--color: var(--nmorph-icon-color)}.nmorph-icon .nmorph-icon__content{display:flex;align-items:center;justify-content:center;width:var(--width);min-width:var(--width);height:var(--height);min-height:var(--height)}.nmorph-icon svg{width:100%;height:100%;fill:var(--color);stroke-width:0}.nmorph-icon path{stroke:var(--color)}.nmorph-icon.nmorph-icon--small{--width: 14px;--height: 14px}.nmorph-icon.nmorph-icon--medium{--width: 20px;--height: 20px}.nmorph-icon.nmorph-icon--large{--width: 32px;--height: 32px}
+.nmorph-icon{width:var(--width);min-width:var(--width);height:var(--height);min-height:var(--height);display:flex;align-items:center;--color: var(--nmorph-icon-color, var(--nmorph-text-color))}.nmorph-icon .nmorph-icon__content{display:flex;align-items:center;justify-content:center;width:var(--width);min-width:var(--width);height:var(--height);min-height:var(--height)}.nmorph-icon svg{width:100%;height:100%;fill:var(--color);stroke-width:0}.nmorph-icon path{stroke:var(--color)}.nmorph-icon.nmorph-icon--small{--width: 14px;--height: 14px}.nmorph-icon.nmorph-icon--medium{--width: 20px;--height: 20px}.nmorph-icon.nmorph-icon--large{--width: 32px;--height: 32px}

package/dist/components/basic/nmorph-icon/NmorphIcon.vue2.js

@@ -1,31 +1,31 @@
 import './NmorphIcon.css';
-import { defineComponent as d, computed as o } from "vue";
-import { useModifiers as u } from "../../../utils/create-modifiers.js";
-const c = /* @__PURE__ */ d({
+import { defineComponent as h, computed as i } from "vue";
+import { useModifiers as l } from "../../../utils/create-modifiers.js";
+const p = /* @__PURE__ */ h({
   __name: "NmorphIcon",
   props: {
     size: { type: null, required: !1, default: "small" },
     width: { type: String, required: !1, default: void 0 },
     height: { type: String, required: !1, default: void 0 },
-    color: { type: String, required: !1, default: "var(--nmorph-text-color)" }
+    color: { type: String, required: !1, default: void 0 }
   },
   setup(r, { expose: s }) {
     s();
-    const e = r, n = o(
-      () => u({
+    const e = r, d = i(
+      () => l({
         "nmorph-icon": [
           `${!e.width && !e.height && e.size}`,
           `${e.width && "custom-width"}`,
           `${e.height && "custom-height"}`
         ]
       })
-    ), h = o(() => {
+    ), n = i(() => {
       const t = {};
-      return e.width && (t["--width"] = e.width), e.height && (t["--height"] = e.height), t["--nmorph-icon-color"] = e.color, t;
-    }), i = { props: e, modifiers: n, customStyles: h };
-    return Object.defineProperty(i, "__isScriptSetup", { enumerable: !1, value: !0 }), i;
+      return e.width && (t["--width"] = e.width), e.height && (t["--height"] = e.height), e.color && (t["--nmorph-icon-color"] = e.color, t["--color"] = e.color), t;
+    }), o = { props: e, modifiers: d, customStyles: n };
+    return Object.defineProperty(o, "__isScriptSetup", { enumerable: !1, value: !0 }), o;
   }
 });
 export {
-  c as default
+  p as default
 };

package/dist/components/data/nmorph-avatar/NmorphAvatar.css

@@ -0,0 +1 @@
+.nmorph-avatar--preview:hover>.nmorph-image{filter:brightness(.8)}

package/dist/components/data/nmorph-avatar/NmorphAvatar.vue.js

@@ -1,43 +1,56 @@
-import f from "./NmorphAvatar.vue2.js";
-import { resolveComponent as w, openBlock as r, createElementBlock as i, normalizeStyle as o, normalizeClass as S, createVNode as _, withCtx as l, renderSlot as m, toDisplayString as c, createBlock as a, resolveDynamicComponent as s, createCommentVNode as v } from "vue";
-import h from "../../../_virtual/_plugin-vue_export-helper.js";
-function y(n, t, k, e, I, g) {
-  const p = w("NmorphImagePreview");
-  return r(), i(
+import './NmorphAvatar.css';
+import p from "./NmorphAvatar.vue2.js";
+import { openBlock as e, createElementBlock as l, normalizeStyle as n, normalizeClass as h, createVNode as a, withCtx as o, renderSlot as t, toDisplayString as s, createBlock as i, resolveDynamicComponent as d, createCommentVNode as v } from "vue";
+/* empty css                  */
+import S from "../../../_virtual/_plugin-vue_export-helper.js";
+function w(c, m, _, r, y, I) {
+  return e(), l(
     "div",
     {
-      class: S(e.modifiers),
-      style: o(e.styles),
-      onClick: e.openPreview
+      class: h(r.modifiers),
+      style: n(r.styles),
+      onClick: r.openPreview
     },
     [
-      _(e.NmorphImage, {
-        fit: e.props.fit,
-        src: e.imageSrc,
-        "src-set": e.props.srcSet,
-        alt: e.props.alt,
+      a(r.NmorphImage, {
+        fit: r.props.fit,
+        src: r.imageSrc,
+        "src-set": r.props.srcSet,
+        alt: r.props.alt,
         "frame-border": 0,
-        onLoad: e.onImageLoad,
-        onError: e.onImageError
+        onLoad: r.onImageLoad,
+        onError: r.onImageError
       }, {
-        error: l(() => [
-          m(n.$slots, "error", {}, () => [
-            e.initials ? (r(), i(
+        loading: o(() => [
+          a(r.NmorphIcon, {
+            size: "small",
+            color: "var(--nmorph-accent-color)"
+          }, {
+            default: o(() => [
+              a(r.NmorphIconLoader)
+            ]),
+            _: 1
+            /* STABLE */
+          })
+        ]),
+        error: o(() => [
+          t(c.$slots, "error", {}, () => [
+            r.initials ? (e(), l(
               "span",
               {
                 key: 0,
                 class: "nmorph-avatar__initials",
-                style: o({ fontSize: e.initialsFontSize })
+                style: n({ fontSize: r.initialsFontSize })
               },
-              c(e.initials),
+              s(r.initials),
               5
               /* TEXT, STYLE */
-            )) : (r(), a(e.NmorphIcon, {
+            )) : (e(), i(r.NmorphIcon, {
               key: 1,
-              width: e.stubIconSize
+              width: r.stubIconSize
             }, {
-              default: l(() => [
-                (r(), a(s(e.fallback)))
+              default: o(() => [
+                (e(), i(d(r.fallback)))
               ]),
               _: 1
               /* STABLE */
@@ -47,46 +60,61 @@ function y(n, t, k, e, I, g) {
         _: 3
         /* FORWARDED */
       }, 8, ["fit", "src", "src-set", "alt"]),
-      e.imageSrc ? v("v-if", !0) : m(n.$slots, "error", { key: 0 }, () => [
-        e.initials ? (r(), i(
+      r.imageSrc ? v("v-if", !0) : t(c.$slots, "error", { key: 0 }, () => [
+        r.initials ? (e(), l(
           "span",
           {
             key: 0,
             class: "nmorph-avatar__initials",
-            style: o({ fontSize: e.initialsFontSize })
+            style: n({ fontSize: r.initialsFontSize })
           },
-          c(e.initials),
+          s(r.initials),
           5
           /* TEXT, STYLE */
-        )) : (r(), a(e.NmorphIcon, {
+        )) : (e(), i(r.NmorphIcon, {
           key: 1,
-          width: e.stubIconSize
+          width: r.stubIconSize
         }, {
-          default: l(() => [
-            (r(), a(s(e.fallback)))
+          default: o(() => [
+            (e(), i(d(r.fallback)))
           ]),
           _: 1
           /* STABLE */
         }, 8, ["width"]))
       ]),
-      e.previewAvailable ? (r(), a(p, {
+      r.previewAvailable ? (e(), i(r.NmorphImagePreview, {
         key: 1,
-        class: "nmorph-avatar__preview",
-        "model-value": e.previewOpen,
-        src: e.imagePreviewSrc,
-        alt: e.props.alt,
-        "initial-index": e.props.previewInitialIndex,
-        "scale-step": e.props.previewScaleStep,
-        "min-scale-level": e.props.previewMinScaleLevel,
-        "max-scale-level": e.props.previewMaxScaleLevel,
-        "onUpdate:modelValue": t[0] || (t[0] = (d) => e.previewOpen = d)
-      }, null, 8, ["model-value", "src", "alt", "initial-index", "scale-step", "min-scale-level", "max-scale-level"])) : v("v-if", !0)
+        "show-trigger": !1,
+        "model-value": r.previewOpen,
+        src: r.imagePreviewSrc,
+        alt: r.props.alt,
+        "initial-index": r.props.previewInitialIndex,
+        "scale-step": r.props.previewScaleStep,
+        "min-scale-level": r.props.previewMinScaleLevel,
+        "max-scale-level": r.props.previewMaxScaleLevel,
+        "onUpdate:modelValue": m[0] || (m[0] = (f) => r.previewOpen = f)
+      }, {
+        loading: o(() => [
+          a(r.NmorphIcon, {
+            size: "small",
+            color: "var(--nmorph-accent-color)"
+          }, {
+            default: o(() => [
+              a(r.NmorphIconLoader)
+            ]),
+            _: 1
+            /* STABLE */
+          })
+        ]),
+        _: 1
+        /* STABLE */
+      }, 8, ["model-value", "src", "alt", "initial-index", "scale-step", "min-scale-level", "max-scale-level"])) : v("v-if", !0)
     ],
     6
     /* CLASS, STYLE */
   );
 }
-const z = /* @__PURE__ */ h(f, [["render", y], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-avatar/NmorphAvatar.vue"]]);
+const b = /* @__PURE__ */ S(p, [["render", w], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-avatar/NmorphAvatar.vue"]]);
 export {
-  z as default
+  b as default
 };

package/dist/components/data/nmorph-avatar/NmorphAvatar.vue2.js

@@ -1,9 +1,12 @@
-import { defineComponent as z, ref as P, computed as a } from "vue";
+import './NmorphAvatar.css';
+import { defineComponent as $, ref as z, computed as a } from "vue";
 import { useModifiers as B } from "../../../utils/create-modifiers.js";
+import L from "../nmorph-image-preview/NmorphImagePreview.vue.js";
 import v from "../../../assets/icons/avatar.svg.js";
-import M from "../../basic/nmorph-icon/NmorphIcon.vue.js";
-import k from "../nmorph-image/NmorphImage.vue.js";
-const U = /* @__PURE__ */ z({
+import M from "../../../assets/icons/loader.svg.js";
+import k from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+import C from "../nmorph-image/NmorphImage.vue.js";
+const J = /* @__PURE__ */ $({
   __name: "NmorphAvatar",
   props: {
     src: { type: [String, Array], required: !1 },
@@ -24,46 +27,48 @@ const U = /* @__PURE__ */ z({
     alt: { type: String, required: !1 }
   },
   emits: ["error", "load"],
-  setup(g, { expose: y, emit: h }) {
-    y();
-    const r = g, s = h, S = (e) => {
-      s("error", e);
+  setup(g, { expose: h, emit: y }) {
+    h();
+    const r = g, o = y, S = (e) => {
+      o("error", e);
     }, w = (e) => {
-      s("load", e);
-    }, l = P(!1), u = (e, t = 0) => Array.isArray(e) ? e[t] : e, p = a(() => `${r.imagePadding}px`), i = a(() => `${r.size}px`), b = a(() => u(r.src)), n = a(() => r.previewSrc || r.src), c = a(() => {
+      o("load", e);
+    }, l = z(!1), p = (e, t = 0) => Array.isArray(e) ? e[t] : e, u = a(() => `${r.imagePadding}px`), i = a(() => `${r.size}px`), b = a(() => p(r.src)), n = a(() => r.previewSrc || r.src), m = a(() => {
       const e = n.value;
       return Array.isArray(e) ? e.length > 0 : !!e;
     }), q = a(() => {
       const e = n.value;
       return Array.isArray(e) ? e : e || "";
-    }), o = a(() => r.preview && c.value), x = a(
+    }), s = a(() => r.preview && m.value), N = a(
       () => B({
         nmorph: [`${r.frameBorder > 0 && "shadow-combined"}`],
-        "nmorph-avatar": [r.shape, `${o.value && "preview"}`]
+        "nmorph-avatar": [r.shape, `${s.value && "preview"}`]
       })
-    ), N = a(() => `${r.size / 100 * 60}px`), A = a(() => `${Math.max(12, r.size * 0.38)}px`), m = a(() => r.shape === "circle" ? "50%" : "4px"), d = a(() => r.shape === "circle" ? "50%" : "2px"), I = a(() => ({
+    ), I = a(() => `${r.size / 100 * 60}px`), x = a(() => `${Math.max(12, r.size * 0.38)}px`), c = a(() => r.shape === "circle" ? "50%" : "4px"), d = a(() => r.shape === "circle" ? "50%" : "2px"), A = a(() => ({
       width: i.value,
       height: i.value,
       "--nmorph-avatar-size": i.value,
-      "--nmorph-avatar-image-padding": p.value,
-      "--nmorph-avatar-radius": m.value,
+      "--nmorph-avatar-image-padding": u.value,
+      "--nmorph-avatar-radius": c.value,
       "--nmorph-avatar-image-radius": d.value,
       "--nmorph-avatar-frame-border": `${r.frameBorder}px`
-    })), _ = a(() => r.fallback || v), $ = a(() => {
+    })), _ = a(() => r.fallback || v), P = a(() => {
       const e = r.name.trim();
       if (!e) return "";
       const t = e.split(/\s+/);
       return (t.length > 1 ? `${t[0][0]}${t[t.length - 1][0]}` : t[0].slice(0, 2)).toUpperCase();
-    }), f = { props: r, emit: s, onImageError: S, onImageLoad: w, previewOpen: l, getSourceByIndex: u, imagePadding: p, size: i, imageSrc: b, previewSource: n, hasPreviewSource: c, imagePreviewSrc: q, previewAvailable: o, modifiers: x, stubIconSize: N, initialsFontSize: A, radius: m, imageRadius: d, styles: I, fallback: _, initials: $, openPreview: () => {
-      o.value && (l.value = !0);
+    }), f = { props: r, emit: o, onImageError: S, onImageLoad: w, previewOpen: l, getSourceByIndex: p, imagePadding: u, size: i, imageSrc: b, previewSource: n, hasPreviewSource: m, imagePreviewSrc: q, previewAvailable: s, modifiers: N, stubIconSize: I, initialsFontSize: x, radius: c, imageRadius: d, styles: A, fallback: _, initials: P, openPreview: () => {
+      s.value && (l.value = !0);
     }, get NmorphImage() {
-      return k;
+      return C;
     }, get NmorphIcon() {
+      return k;
+    }, get NmorphIconLoader() {
       return M;
-    } };
+    }, NmorphImagePreview: L };
     return Object.defineProperty(f, "__isScriptSetup", { enumerable: !1, value: !0 }), f;
   }
 });
 export {
-  U as default
+  J as default
 };

package/dist/components/data/nmorph-carousel/NmorphCarousel.vue2.js

@@ -1,8 +1,8 @@
 import { defineComponent as y, ref as a, computed as v, provide as j, reactive as k, onMounted as x, nextTick as E, watch as O } from "vue";
 import { useModifiers as D } from "../../../utils/create-modifiers.js";
 import { generateUUID as w } from "../../../utils/common.js";
-import A from "../../../assets/icons/chevron-down.svg.js";
-import M from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+import A from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+import M from "../../../assets/icons/chevron-down.svg.js";
 const L = /* @__PURE__ */ y({
   __name: "NmorphCarousel",
   props: {
@@ -40,9 +40,9 @@ const L = /* @__PURE__ */ y({
     }, C = v(() => `translateX(-${e.value * 100}%)`), r = a(!0), m = { currentSlide: e, prevSlide: _, nextSlide: g, props: s, emit: u, modifiers: S, carouselData: c, carouselId: i, carouselWrapper: o, slidesRefs: n, addInitialCloneSlides: d, transitionEndHandler: p, setItemRef: b, translateX: C, transitionEnabled: r, isCurrentElementActive: (t) => t === e.value - 1, elementIndicator: (t) => {
       e.value = t + 1;
     }, get NmorphIcon() {
-      return M;
-    }, get NmorphIconChevronDown() {
       return A;
+    }, get NmorphIconChevronDown() {
+      return M;
     } };
     return Object.defineProperty(m, "__isScriptSetup", { enumerable: !1, value: !0 }), m;
   }

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

@@ -1,45 +1,65 @@
 import './NmorphImagePreview.css';
-import s from "./NmorphImagePreview.vue2.js";
-import { openBlock as n, createElementBlock as i, Fragment as t, createElementVNode as l, normalizeClass as m, createVNode as o, createBlock as a, Teleport as v, withCtx as r, normalizeStyle as f, createCommentVNode as d, renderList as p, resolveDynamicComponent as _ } from "vue";
+import g from "./NmorphImagePreview.vue2.js";
+import { openBlock as l, createElementBlock as a, Fragment as s, normalizeClass as h, createElementVNode as i, createVNode as o, createSlots as _, withCtx as r, renderSlot as m, createCommentVNode as t, createBlock as c, Teleport as p, normalizeStyle as k, renderList as N, resolveDynamicComponent as v } from "vue";
 /* empty css                        */
-import g from "../../../_virtual/_plugin-vue_export-helper.js";
-const k = { class: "nmorph-image-preview__content" }, N = {
+import w from "../../../_virtual/_plugin-vue_export-helper.js";
+const y = { class: "nmorph-image-preview__content" }, C = {
   key: 0,
   class: "nmorph-image-preview__left"
-}, w = {
+}, I = {
   key: 1,
   class: "nmorph-image-preview__right"
-}, C = { class: "nmorph-image-preview__actions" }, I = { class: "nmorph-image-preview__action-element" };
-function y(x, B, S, e, b, u) {
-  return n(), i(
-    t,
+}, S = { class: "nmorph-image-preview__actions" }, b = { class: "nmorph-image-preview__action-element" };
+function B(n, z, D, e, H, L) {
+  return l(), a(
+    s,
     null,
     [
-      l(
+      e.props.showTrigger ? (l(), a(
         "div",
         {
-          class: m(e.modifiers)
+          key: 0,
+          class: h(e.modifiers)
         },
         [
-          l("div", {
+          i("div", {
             class: "nmorph-image-preview__trigger",
             onClick: e.clickHandler
           }, [
             o(e.NmorphImage, {
               src: e.triggerSource,
               alt: e.props.alt,
-              fit: "cover"
-            }, null, 8, ["src", "alt"])
+              fit: "cover",
+              "frame-border": 0
+            }, _({
+              _: 2
+              /* DYNAMIC */
+            }, [
+              n.$slots.loading ? {
+                name: "loading",
+                fn: r(() => [
+                  m(n.$slots, "loading")
+                ]),
+                key: "0"
+              } : void 0,
+              n.$slots.error ? {
+                name: "error",
+                fn: r(() => [
+                  m(n.$slots, "error")
+                ]),
+                key: "1"
+              } : void 0
+            ]), 1032, ["src", "alt"])
           ])
         ],
         2
         /* CLASS */
-      ),
-      (n(), a(v, { to: "body" }, [
-        l(
+      )) : t("v-if", !0),
+      (l(), c(p, { to: "body" }, [
+        i(
           "div",
           {
-            class: m(["nmorph-image-preview__portal", e.modifiers])
+            class: h(["nmorph-image-preview__portal", e.modifiers])
           },
           [
             o(e.NmorphOverlay, {
@@ -48,15 +68,34 @@ function y(x, B, S, e, b, u) {
               onOnOutsideClick: e.closeHandler
             }, {
               default: r(() => [
-                l("div", k, [
+                i("div", y, [
                   o(e.NmorphImage, {
                     src: e.triggerSource,
                     alt: e.props.alt,
                     fit: "cover",
-                    style: f({ transform: `rotate(${e.rotateLevel}deg) scale(${e.scaleLevel})` })
-                  }, null, 8, ["src", "alt", "style"])
+                    "frame-border": 0,
+                    style: k({ transform: `rotate(${e.rotateLevel}deg) scale(${e.scaleLevel})` })
+                  }, _({
+                    _: 2
+                    /* DYNAMIC */
+                  }, [
+                    n.$slots.loading ? {
+                      name: "loading",
+                      fn: r(() => [
+                        m(n.$slots, "loading")
+                      ]),
+                      key: "0"
+                    } : void 0,
+                    n.$slots.error ? {
+                      name: "error",
+                      fn: r(() => [
+                        m(n.$slots, "error")
+                      ]),
+                      key: "1"
+                    } : void 0
+                  ]), 1032, ["src", "alt", "style"])
                 ]),
-                e.multipleSources ? (n(), i("div", N, [
+                e.multipleSources ? (l(), a("div", C, [
                   o(e.NmorphButton, { onClick: e.previousHandler }, {
                     default: r(() => [
                       o(e.NmorphIcon, null, {
@@ -70,8 +109,8 @@ function y(x, B, S, e, b, u) {
                     _: 1
                     /* STABLE */
                   })
-                ])) : d("v-if", !0),
-                e.multipleSources ? (n(), i("div", w, [
+                ])) : t("v-if", !0),
+                e.multipleSources ? (l(), a("div", I, [
                   o(e.NmorphButton, { onClick: e.nextHandler }, {
                     default: r(() => [
                       o(e.NmorphIcon, null, {
@@ -85,17 +124,17 @@ function y(x, B, S, e, b, u) {
                     _: 1
                     /* STABLE */
                   })
-                ])) : d("v-if", !0),
-                l("div", C, [
-                  (n(), i(
-                    t,
+                ])) : t("v-if", !0),
+                i("div", S, [
+                  (l(), a(
+                    s,
                     null,
-                    p(e.actions, (c, h) => l("div", {
-                      key: h,
+                    N(e.actions, (d, f) => i("div", {
+                      key: f,
                       class: "nmorph-image-preview__action-element"
                     }, [
                       o(e.NmorphButton, {
-                        onClick: c.handler
+                        onClick: d.handler
                       }, {
                         default: r(() => [
                           o(
@@ -103,7 +142,7 @@ function y(x, B, S, e, b, u) {
                             null,
                             {
                               default: r(() => [
-                                (n(), a(_(c.icon)))
+                                (l(), c(v(d.icon)))
                               ]),
                               _: 2
                               /* DYNAMIC */
@@ -119,7 +158,7 @@ function y(x, B, S, e, b, u) {
                     64
                     /* STABLE_FRAGMENT */
                   )),
-                  l("div", I, [
+                  i("div", b, [
                     o(e.NmorphButton, {
                       disabled: e.scaleLevel === 1,
                       onClick: e.enlargeShrinkActionData.handler
@@ -127,7 +166,7 @@ function y(x, B, S, e, b, u) {
                       default: r(() => [
                         o(e.NmorphIcon, null, {
                           default: r(() => [
-                            (n(), a(_(e.enlargeShrinkActionData.icon)))
+                            (l(), c(v(e.enlargeShrinkActionData.icon)))
                           ]),
                           _: 1
                           /* STABLE */
@@ -139,8 +178,8 @@ function y(x, B, S, e, b, u) {
                   ])
                 ])
               ]),
-              _: 1
-              /* STABLE */
+              _: 3
+              /* FORWARDED */
             }, 8, ["show", "z-index"])
           ],
           2
@@ -152,7 +191,7 @@ function y(x, B, S, e, b, u) {
     /* STABLE_FRAGMENT */
   );
 }
-const O = /* @__PURE__ */ g(s, [["render", y], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-image-preview/NmorphImagePreview.vue"]]);
+const E = /* @__PURE__ */ w(g, [["render", B], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-image-preview/NmorphImagePreview.vue"]]);
 export {
-  O as default
+  E as default
 };