@nmorph/nmorph-ui-kit 2.2.51 → 2.2.53

package/dist/components/data/nmorph-image/NmorphImage.vue2.js

@@ -0,0 +1,37 @@
+import './NmorphImage.css';
+import { defineComponent as _, computed as t, ref as s } from "vue";
+import { useModifiers as y } from "../../../utils/create-modifiers.js";
+import { useI18n as h } from "vue-i18n";
+const b = /* @__PURE__ */ _({
+  __name: "NmorphImage",
+  props: {
+    loadingText: { type: String, required: !1, default: "" },
+    loadFailedText: { type: String, required: !1, default: "" },
+    frameBorder: { type: Number, required: !1, default: 4 },
+    src: { type: String, required: !1 },
+    srcSet: { type: String, required: !1, default: "" },
+    fit: { type: null, required: !1, default: "cover" },
+    alt: { type: String, required: !1, default: "" }
+  },
+  emits: ["error", "load"],
+  setup(u, { expose: m, emit: f }) {
+    m();
+    const { t: o } = h(), e = u, p = t(() => e.loadingText ? e.loadingText : o("loadingText")), c = t(() => e.loadFailedText ? e.loadFailedText : o("loadFailedText")), r = s(!1), a = s(!1), d = f, g = (i) => {
+      r.value = !0, a.value = !1, d("load", i);
+    }, x = (i) => {
+      r.value = !0, a.value = !0, d("error", i);
+    }, l = t(() => r.value && a.value), v = t(
+      () => y({
+        nmorph: [e.frameBorder > 0 && "shadow-combined"],
+        "nmorph-image": [(l.value || !r.value) && "hide"]
+      })
+    ), T = t(() => ({
+      "--nmorph-image-fit": e.fit || "cover",
+      "--nmorph-image-frame-border": `${e.frameBorder}px`
+    })), n = { t: o, props: e, computedLoadingText: p, computedLoadFailedText: c, imageLoadFinished: r, imageLoadError: a, emit: d, onImageLoad: g, onImageError: x, loadingFailed: l, modifiers: v, styles: T };
+    return Object.defineProperty(n, "__isScriptSetup", { enumerable: !1, value: !0 }), n;
+  }
+});
+export {
+  b as default
+};

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

@@ -1 +1 @@
-.nmorph-image-preview{--width: 50px;--height: 50px;--nmorph-image-preview-radius: var(--default-border-radius);width:var(--width);height:var(--height);overflow:hidden;border-radius:var(--nmorph-image-preview-radius)}.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.nmorph-image-preview--gallery-trigger{width:auto;height:auto;overflow:visible}.nmorph-image-preview.nmorph-image-preview--gallery-trigger .nmorph-image-preview__trigger{display:flex;flex-wrap:wrap;gap:var(--nmorph-image-preview-trigger-gap, 8px);width:auto;height:auto}.nmorph-image-preview.nmorph-image-preview--gallery-trigger .nmorph-image-preview__trigger:hover{filter:none}.nmorph-image-preview.nmorph-image-preview--gallery-trigger .nmorph-image-preview__trigger-item{position:relative;display:block;width:var(--width);height:var(--height);padding:0;overflow:hidden;color:inherit;font:inherit;background:transparent;border:0;border-radius:var(--nmorph-image-preview-radius);cursor:pointer}.nmorph-image-preview.nmorph-image-preview--gallery-trigger .nmorph-image-preview__trigger-item:hover{filter:brightness(.8)}.nmorph-image-preview.nmorph-image-preview--gallery-trigger .nmorph-image-preview__trigger-item .nmorph-image{width:100%;height:100%}.nmorph-image-preview.nmorph-image-preview--gallery-trigger .nmorph-image-preview__trigger-more{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;color:var(--nmorph-white-color);font-weight:600;line-height:var(--line-height-regular);background:color-mix(in srgb,var(--nmorph-black-color) 60%,transparent);pointer-events:none}.nmorph-image-preview__portal{display:contents}.nmorph-image-preview__portal .nmorph-image-preview__content{--nmorph-image-preview-content-width: min( calc(100vw - 96px) , 960px);--nmorph-image-preview-content-height: min( calc(100vh - 180px) , 720px);position:absolute;top:50%;left:50%;display:flex;justify-content:center;align-items:center;width:var(--nmorph-image-preview-content-width);height:var(--nmorph-image-preview-content-height);transform:translate(-50%,-50%);transition:var(--transition-04) opacity ease-in-out;pointer-events:none}.nmorph-image-preview__portal .nmorph-image-preview__content .nmorph-image{width:100%;height:100%;pointer-events:none}.nmorph-image-preview__portal .nmorph-image-preview__content .nmorph-image img{display:block;width:auto;max-width:100%;height:auto;max-height:100%;object-fit:contain;pointer-events:auto}.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;--nmorph-image-preview-radius: var(--default-border-radius);width:var(--width);height:var(--height);overflow:hidden;border-radius:var(--nmorph-image-preview-radius)}.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.nmorph-image-preview--gallery-trigger{width:auto;height:auto;overflow:visible}.nmorph-image-preview.nmorph-image-preview--gallery-trigger .nmorph-image-preview__trigger{display:flex;flex-wrap:wrap;gap:var(--nmorph-image-preview-trigger-gap, 8px);width:auto;height:auto}.nmorph-image-preview.nmorph-image-preview--gallery-trigger .nmorph-image-preview__trigger:hover{filter:none}.nmorph-image-preview.nmorph-image-preview--gallery-trigger .nmorph-image-preview__trigger-item{position:relative;display:block;width:var(--width);height:var(--height);padding:0;overflow:hidden;color:inherit;font:inherit;background:transparent;border:0;border-radius:var(--nmorph-image-preview-radius);cursor:pointer}.nmorph-image-preview.nmorph-image-preview--gallery-trigger .nmorph-image-preview__trigger-item:hover{filter:brightness(.8)}.nmorph-image-preview.nmorph-image-preview--gallery-trigger .nmorph-image-preview__trigger-item .nmorph-image{width:100%;height:100%}.nmorph-image-preview.nmorph-image-preview--gallery-trigger .nmorph-image-preview__trigger-more{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;color:var(--nmorph-white-color);font-weight:600;line-height:var(--line-height-regular);background:color-mix(in srgb,var(--nmorph-black-color) 60%,transparent);pointer-events:none}.nmorph-image-preview__portal{display:contents}.nmorph-image-preview__portal .nmorph-image-preview__content .nmorph-image{width:100%;height:100%;pointer-events:none}.nmorph-image-preview__portal .nmorph-image-preview__content .nmorph-image img{display:block;width:auto;max-width:100%;height:auto;max-height:100%;object-fit:contain;pointer-events:auto}.nmorph-image-preview__portal .nmorph-image-preview__action-element{margin-right:var(--indentation-03)}

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

@@ -1,336 +1,208 @@
 import './NmorphImagePreview.css';
-import { defineComponent as ce, ref as k, watch as S, computed as o, onBeforeUnmount as ge, openBlock as n, createElementBlock as c, Fragment as N, normalizeStyle as b, normalizeClass as Z, createElementVNode as h, renderList as U, withModifiers as fe, createVNode as i, unref as a, createSlots as B, withCtx as r, renderSlot as g, toDisplayString as pe, createCommentVNode as f, createBlock as $, Teleport as he, resolveDynamicComponent as j } from "vue";
-import { useModifiers as ye } from "../../../utils/create-modifiers.js";
-import { createCssSizeVariables as q } from "../../../utils/common.js";
-import _e from "../../../assets/icons/shrink.svg.js";
-import x from "../nmorph-image/NmorphImage.vue.js";
-/* empty css                               */
-import we from "../../others/nmorph-overlay/NmorphOverlay.vue.js";
-/* empty css                                             */
-import I from "../../basic/nmorph-button/NmorphButton.vue.js";
-/* empty css                                          */
-import L from "../../basic/nmorph-icon/NmorphIcon.vue.js";
-/* empty css                                      */
-import J from "../../../assets/icons/chevron-down.svg.js";
-import ke from "../../../assets/icons/rotate-right.svg.js";
-import $e from "../../../assets/icons/rotate-left.svg.js";
-import Ie from "../../../assets/icons/zoom-in.svg.js";
-import Le from "../../../assets/icons/zoom-out.svg.js";
-import Ce from "../../../assets/icons/enlarge.svg.js";
-const Se = ["aria-label", "onClick"], Ne = {
+import p from "./NmorphImagePreview.vue2.js";
+import { openBlock as n, createElementBlock as a, Fragment as m, normalizeStyle as v, normalizeClass as k, createElementVNode as g, renderList as f, withModifiers as w, createVNode as l, createSlots as d, withCtx as o, renderSlot as t, toDisplayString as y, createCommentVNode as c, createBlock as s, resolveDynamicComponent as _ } from "vue";
+/* empty css                        */
+import b from "../../../_virtual/_plugin-vue_export-helper.js";
+const N = ["aria-label", "onClick"], C = {
   key: 0,
   class: "nmorph-image-preview__trigger-more"
-}, be = { class: "nmorph-image-preview__content" }, Be = {
-  key: 0,
-  class: "nmorph-image-preview__left"
-}, xe = {
-  key: 1,
-  class: "nmorph-image-preview__right"
-}, Te = {
-  key: 2,
-  class: "nmorph-image-preview__actions"
-}, Ve = { class: "nmorph-image-preview__action-element" }, We = /* @__PURE__ */ ce({
-  __name: "NmorphImagePreview",
-  props: {
-    modelValue: { type: Boolean, default: !1 },
-    alt: { default: "" },
-    initialIndex: { default: 0 },
-    src: {},
-    scaleStep: { default: 0.2 },
-    minScaleLevel: { default: 0.2 },
-    maxScaleLevel: { default: 4 },
-    zIndex: { default: void 0 },
-    showTrigger: { type: Boolean, default: !0 },
-    showNavigationButtons: { type: Boolean, default: !0 },
-    showActionBar: { type: Boolean, default: !0 },
-    width: { default: void 0 },
-    height: { default: void 0 },
-    radius: { default: void 0 },
-    fit: { default: "cover" },
-    navigationButtonMargin: { default: void 0 },
-    triggerView: { default: "single" },
-    triggerLimit: { default: void 0 },
-    triggerGap: { default: 8 }
-  },
-  emits: ["update:model-value"],
-  setup(Q, { emit: W }) {
-    const t = Q, d = k(t.modelValue);
-    S(
-      () => t.modelValue,
-      (e) => d.value = e
-    );
-    const s = o(() => Array.isArray(t.src) ? t.src : [t.src]), y = (e) => {
-      const u = s.value.length - 1;
-      return u < 0 || e < 0 ? 0 : e > u ? u : e;
-    }, p = k(y(t.initialIndex)), _ = o(() => y(p.value)), T = o(() => s.value[_.value] || ""), C = o(() => t.triggerView === "gallery" && s.value.length > 1), X = o(() => !t.triggerLimit || t.triggerLimit < 1 ? s.value.length : Math.min(Math.floor(t.triggerLimit), s.value.length)), w = o(
-      () => s.value.slice(0, X.value).map((e, u) => ({
-        index: u,
-        src: e
-      }))
-    ), V = o(() => s.value.length - w.value.length), Y = o(() => w.value[w.value.length - 1]?.index ?? -1), z = o(
-      () => ye({
-        "nmorph-image-preview": [d.value && "opened", C.value && "gallery-trigger"]
-      })
-    ), l = k(1);
-    S(
-      () => [t.initialIndex, s.value.length],
-      () => {
-        p.value = y(t.initialIndex);
-      }
-    );
-    const A = (e) => {
-      p.value = y(e), d.value = !0, O("update:model-value", d.value);
-    }, ee = () => {
-      C.value || A(_.value);
-    }, K = () => {
-      d.value = !1, O("update:model-value", d.value);
-    }, te = () => {
-      v.value = v.value + 90, v.value >= 360 && (v.value = 0);
-    }, oe = () => {
-      v.value = v.value - 90, v.value <= -360 && (v.value = 0);
-    }, re = () => {
-      l.value < t.maxScaleLevel && (l.value += t.scaleStep), l.value = parseFloat(l.value.toFixed(3));
-    }, ae = () => {
-      l.value > t.minScaleLevel && (l.value -= t.scaleStep), l.value = parseFloat(l.value.toFixed(3));
-    }, le = o(() => l.value < 1), ne = () => {
-      l.value = 1;
-    }, ie = () => {
-      l.value = 1;
-    }, v = k(0), M = () => {
-      const e = s.value.length;
-      if (!e) return;
-      const u = _.value - 1;
-      p.value = u < 0 ? e - 1 : u;
-    }, D = () => {
-      const e = s.value.length;
-      if (!e) return;
-      const u = _.value + 1;
-      p.value = u > e - 1 ? 0 : u;
-    }, E = (e) => {
-      !d.value || s.value.length < 2 || e.altKey || e.ctrlKey || e.metaKey || e.shiftKey || (e.key === "ArrowLeft" && (e.preventDefault(), M()), e.key === "ArrowRight" && (e.preventDefault(), D()));
-    }, se = () => {
-      typeof document > "u" || document.addEventListener("keydown", E);
-    }, F = () => {
-      typeof document > "u" || document.removeEventListener("keydown", E);
-    };
-    S(
-      d,
-      (e) => {
-        e ? se() : F();
-      },
-      { immediate: !0 }
-    ), ge(F);
-    const H = o(() => {
-      let e = {
-        icon: _e,
-        handler: ie
-      };
-      return le.value && (e = {
-        icon: Ce,
-        handler: ne
-      }), e;
-    }), ue = [
-      {
-        icon: ke,
-        handler: te
-      },
-      {
-        icon: $e,
-        handler: oe
-      },
-      {
-        icon: Ie,
-        handler: re
-      },
-      {
-        icon: Le,
-        handler: ae
-      }
-    ], O = W, de = o(() => s.value.length > 1), R = o(() => t.showNavigationButtons && de.value), me = o(
-      () => q({
-        "--width": t.width,
-        "--height": t.height,
-        "--nmorph-image-preview-radius": t.radius,
-        "--nmorph-image-preview-trigger-gap": t.triggerGap
-      })
-    ), ve = o(
-      () => q({
-        "--nmorph-image-preview-btn-margin": t.navigationButtonMargin
-      })
-    ), G = (e) => t.alt ? `${t.alt} ${e + 1}` : `Image ${e + 1}`;
-    return (e, u) => (n(), c(N, null, [
-      t.showTrigger ? (n(), c("div", {
-        key: 0,
-        class: Z(z.value),
-        style: b(me.value)
-      }, [
-        h("div", {
-          class: "nmorph-image-preview__trigger",
-          onClick: ee
-        }, [
-          C.value ? (n(!0), c(N, { key: 0 }, U(w.value, (m) => (n(), c("button", {
-            key: `${m.src}-${m.index}`,
-            type: "button",
-            class: "nmorph-image-preview__trigger-item",
-            "aria-label": G(m.index),
-            onClick: fe((P) => A(m.index), ["stop"])
+}, S = { class: "nmorph-image-preview__action-element" };
+function I(e, B, T, r, L, P) {
+  return n(), a(
+    m,
+    null,
+    [
+      r.props.showTrigger ? (n(), a(
+        "div",
+        {
+          key: 0,
+          class: k(r.modifiers),
+          style: v(r.triggerStyle)
+        },
+        [
+          g("div", {
+            class: "nmorph-image-preview__trigger",
+            onClick: r.clickHandler
           }, [
-            i(a(x), {
-              src: m.src,
-              alt: G(m.index),
-              fit: t.fit,
+            r.showGalleryTrigger ? (n(!0), a(
+              m,
+              { key: 0 },
+              f(r.triggerSources, (i) => (n(), a("button", {
+                key: `${i.src}-${i.index}`,
+                type: "button",
+                class: "nmorph-image-preview__trigger-item",
+                "aria-label": r.getTriggerLabel(i.index),
+                onClick: w((h) => r.openPreviewAt(i.index), ["stop"])
+              }, [
+                l(r.NmorphImage, {
+                  src: i.src,
+                  alt: r.getTriggerLabel(i.index),
+                  fit: r.props.fit,
+                  "frame-border": 0
+                }, d({
+                  _: 2
+                  /* DYNAMIC */
+                }, [
+                  e.$slots.loading ? {
+                    name: "loading",
+                    fn: o(() => [
+                      t(e.$slots, "loading")
+                    ]),
+                    key: "0"
+                  } : void 0,
+                  e.$slots.error ? {
+                    name: "error",
+                    fn: o(() => [
+                      t(e.$slots, "error")
+                    ]),
+                    key: "1"
+                  } : void 0
+                ]), 1032, ["src", "alt", "fit"]),
+                i.index === r.lastVisibleTriggerIndex && r.hiddenTriggerCount > 0 ? (n(), a(
+                  "span",
+                  C,
+                  " +" + y(r.hiddenTriggerCount),
+                  1
+                  /* TEXT */
+                )) : c("v-if", !0)
+              ], 8, N))),
+              128
+              /* KEYED_FRAGMENT */
+            )) : (n(), s(r.NmorphImage, {
+              key: 1,
+              src: r.triggerSource,
+              alt: r.props.alt,
+              fit: r.props.fit,
               "frame-border": 0
-            }, B({ _: 2 }, [
+            }, d({
+              _: 2
+              /* DYNAMIC */
+            }, [
               e.$slots.loading ? {
                 name: "loading",
-                fn: r(() => [
-                  g(e.$slots, "loading")
+                fn: o(() => [
+                  t(e.$slots, "loading")
                 ]),
                 key: "0"
               } : void 0,
               e.$slots.error ? {
                 name: "error",
-                fn: r(() => [
-                  g(e.$slots, "error")
+                fn: o(() => [
+                  t(e.$slots, "error")
                 ]),
                 key: "1"
               } : void 0
-            ]), 1032, ["src", "alt", "fit"]),
-            m.index === Y.value && V.value > 0 ? (n(), c("span", Ne, " +" + pe(V.value), 1)) : f("", !0)
-          ], 8, Se))), 128)) : (n(), $(a(x), {
-            key: 1,
-            src: T.value,
-            alt: t.alt,
-            fit: t.fit,
-            "frame-border": 0
-          }, B({ _: 2 }, [
+            ]), 1032, ["src", "alt", "fit"]))
+          ])
+        ],
+        6
+        /* CLASS, STYLE */
+      )) : c("v-if", !0),
+      r.open ? (n(), s(r.NmorphPreviewPortal, {
+        key: 1,
+        show: r.open,
+        "z-index": r.props.zIndex,
+        "root-class": "nmorph-image-preview__portal",
+        "state-class": r.modifiers,
+        "content-class": "nmorph-image-preview__content",
+        "left-class": "nmorph-image-preview__left",
+        "right-class": "nmorph-image-preview__right",
+        "actions-class": "nmorph-image-preview__actions",
+        "navigation-button-margin": r.props.navigationButtonMargin,
+        "show-navigation": r.showNavigation,
+        "show-action-bar": r.props.showActionBar,
+        onClose: r.closeHandler,
+        onPrevious: r.previousHandler,
+        onNext: r.nextHandler
+      }, {
+        actions: o(() => [
+          (n(), a(
+            m,
+            null,
+            f(r.actions, (i, h) => g("div", {
+              key: h,
+              class: "nmorph-image-preview__action-element"
+            }, [
+              l(r.NmorphButton, {
+                onClick: i.handler
+              }, {
+                default: o(() => [
+                  l(
+                    r.NmorphIcon,
+                    null,
+                    {
+                      default: o(() => [
+                        (n(), s(_(i.icon)))
+                      ]),
+                      _: 2
+                      /* DYNAMIC */
+                    },
+                    1024
+                    /* DYNAMIC_SLOTS */
+                  )
+                ]),
+                _: 2
+                /* DYNAMIC */
+              }, 1032, ["onClick"])
+            ])),
+            64
+            /* STABLE_FRAGMENT */
+          )),
+          g("div", S, [
+            l(r.NmorphButton, {
+              disabled: r.scaleLevel === 1,
+              onClick: r.enlargeShrinkActionData.handler
+            }, {
+              default: o(() => [
+                l(r.NmorphIcon, null, {
+                  default: o(() => [
+                    (n(), s(_(r.enlargeShrinkActionData.icon)))
+                  ]),
+                  _: 1
+                  /* STABLE */
+                })
+              ]),
+              _: 1
+              /* STABLE */
+            }, 8, ["disabled", "onClick"])
+          ])
+        ]),
+        default: o(() => [
+          l(r.NmorphImage, {
+            src: r.triggerSource,
+            alt: r.props.alt,
+            fit: "contain",
+            "frame-border": 0,
+            style: v({ transform: `rotate(${r.rotateLevel}deg) scale(${r.scaleLevel})` })
+          }, d({
+            _: 2
+            /* DYNAMIC */
+          }, [
             e.$slots.loading ? {
               name: "loading",
-              fn: r(() => [
-                g(e.$slots, "loading")
+              fn: o(() => [
+                t(e.$slots, "loading")
               ]),
               key: "0"
             } : void 0,
             e.$slots.error ? {
               name: "error",
-              fn: r(() => [
-                g(e.$slots, "error")
+              fn: o(() => [
+                t(e.$slots, "error")
               ]),
               key: "1"
             } : void 0
-          ]), 1032, ["src", "alt", "fit"]))
-        ])
-      ], 6)) : f("", !0),
-      d.value ? (n(), $(he, {
-        key: 1,
-        to: "body"
-      }, [
-        h("div", {
-          class: Z(["nmorph-image-preview__portal", z.value]),
-          style: b(ve.value)
-        }, [
-          i(a(we), {
-            show: d.value,
-            "z-index": t.zIndex,
-            "disabled-teleport": "",
-            onOnOutsideClick: K,
-            onOnEscapeKeydown: K
-          }, {
-            default: r(() => [
-              h("div", be, [
-                i(a(x), {
-                  src: T.value,
-                  alt: t.alt,
-                  fit: "contain",
-                  "frame-border": 0,
-                  style: b({ transform: `rotate(${v.value}deg) scale(${l.value})` })
-                }, B({ _: 2 }, [
-                  e.$slots.loading ? {
-                    name: "loading",
-                    fn: r(() => [
-                      g(e.$slots, "loading")
-                    ]),
-                    key: "0"
-                  } : void 0,
-                  e.$slots.error ? {
-                    name: "error",
-                    fn: r(() => [
-                      g(e.$slots, "error")
-                    ]),
-                    key: "1"
-                  } : void 0
-                ]), 1032, ["src", "alt", "style"])
-              ]),
-              R.value ? (n(), c("div", Be, [
-                i(a(I), { onClick: M }, {
-                  default: r(() => [
-                    i(a(L), null, {
-                      default: r(() => [
-                        i(a(J))
-                      ]),
-                      _: 1
-                    })
-                  ]),
-                  _: 1
-                })
-              ])) : f("", !0),
-              R.value ? (n(), c("div", xe, [
-                i(a(I), { onClick: D }, {
-                  default: r(() => [
-                    i(a(L), null, {
-                      default: r(() => [
-                        i(a(J))
-                      ]),
-                      _: 1
-                    })
-                  ]),
-                  _: 1
-                })
-              ])) : f("", !0),
-              t.showActionBar ? (n(), c("div", Te, [
-                (n(), c(N, null, U(ue, (m, P) => h("div", {
-                  key: P,
-                  class: "nmorph-image-preview__action-element"
-                }, [
-                  i(a(I), {
-                    onClick: m.handler
-                  }, {
-                    default: r(() => [
-                      i(a(L), null, {
-                        default: r(() => [
-                          (n(), $(j(m.icon)))
-                        ]),
-                        _: 2
-                      }, 1024)
-                    ]),
-                    _: 2
-                  }, 1032, ["onClick"])
-                ])), 64)),
-                h("div", Ve, [
-                  i(a(I), {
-                    disabled: l.value === 1,
-                    onClick: H.value.handler
-                  }, {
-                    default: r(() => [
-                      i(a(L), null, {
-                        default: r(() => [
-                          (n(), $(j(H.value.icon)))
-                        ]),
-                        _: 1
-                      })
-                    ]),
-                    _: 1
-                  }, 8, ["disabled", "onClick"])
-                ])
-              ])) : f("", !0)
-            ]),
-            _: 3
-          }, 8, ["show", "z-index"])
-        ], 6)
-      ])) : f("", !0)
-    ], 64));
-  }
-});
+          ]), 1032, ["src", "alt", "style"])
+        ]),
+        _: 3
+        /* FORWARDED */
+      }, 8, ["show", "z-index", "state-class", "navigation-button-margin", "show-navigation", "show-action-bar"])) : c("v-if", !0)
+    ],
+    64
+    /* STABLE_FRAGMENT */
+  );
+}
+const V = /* @__PURE__ */ b(p, [["render", I], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-image-preview/NmorphImagePreview.vue"]]);
 export {
-  We as default
+  V as default
 };