@nmorph/nmorph-ui-kit 2.2.38 → 2.2.40

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

@@ -1,11 +1,11 @@
 import './NmorphEmpty.css';
-import { defineComponent as u, useSlots as f, computed as t } from "vue";
-import { NmorphShadowType as c } from "../../../types/index.js";
-import { useModifiers as h } from "../../../utils/create-modifiers.js";
-import { toCssSize as r } from "../../../utils/common.js";
-import g from "../../../assets/icons/folder-opened.svg.js";
-import y from "../../basic/nmorph-icon/NmorphIcon.vue.js";
-const z = /* @__PURE__ */ u({
+import { defineComponent as m, useSlots as u, computed as t } from "vue";
+import { useModifiers as f } from "../../../utils/create-modifiers.js";
+import { createCssSizeVariables as c, toCssSize as h } from "../../../utils/common.js";
+import { NmorphShadowType as g } from "../../../types/common.types.js";
+import y from "../../../assets/icons/folder-opened.svg.js";
+import S from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+const v = /* @__PURE__ */ m({
   __name: "NmorphEmpty",
   props: {
     title: { type: String, required: !1, default: "No data" },
@@ -20,27 +20,29 @@ const z = /* @__PURE__ */ u({
     ariaLabel: { type: String, required: !1, default: void 0 },
     ariaOrientation: { type: String, required: !1, default: void 0 }
   },
-  setup(n, { expose: p }) {
-    p();
-    const e = n, o = f(), s = t(() => !e.hideIcon || !!o.icon), a = t(() => !!(e.description || o.description)), d = t(() => e.ariaLabel || e.title), l = t(
-      () => h({
-        nmorph: [e.design === "nmorph" ? c[e.shadowType] : ""],
+  setup(o, { expose: n }) {
+    n();
+    const e = o, r = u(), s = t(() => !e.hideIcon || !!r.icon), a = t(() => !!(e.description || r.description)), p = t(() => e.ariaLabel || e.title), d = t(
+      () => f({
+        nmorph: [e.design === "nmorph" ? g[e.shadowType] : ""],
         "nmorph-empty": [e.design]
       })
-    ), m = t(() => ({
-      "--nmorph-empty-icon-size": r(e.iconSize),
-      "--nmorph-empty-min-height": r(e.minHeight),
-      "--nmorph-empty-padding": r(e.padding)
-    })), i = { props: e, slots: o, hasIcon: s, hasDescription: a, label: d, modifiers: l, styles: m, get NmorphIcon() {
-      return y;
+    ), l = t(
+      () => c({
+        "--nmorph-empty-icon-size": e.iconSize,
+        "--nmorph-empty-min-height": e.minHeight,
+        "--nmorph-empty-padding": e.padding
+      })
+    ), i = { props: e, slots: r, hasIcon: s, hasDescription: a, label: p, modifiers: d, styles: l, get NmorphIcon() {
+      return S;
     }, get NmorphIconFolderOpened() {
-      return g;
+      return y;
     }, get toCssSize() {
-      return r;
+      return h;
     } };
     return Object.defineProperty(i, "__isScriptSetup", { enumerable: !1, value: !0 }), i;
   }
 });
 export {
-  z as default
+  v 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{--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;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.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(--default-border-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)}

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

@@ -1,114 +1,164 @@
 import './NmorphImagePreview.css';
-import p from "./NmorphImagePreview.vue2.js";
-import { openBlock as n, createElementBlock as l, Fragment as h, normalizeStyle as c, normalizeClass as v, createElementVNode as a, createVNode as e, createSlots as _, withCtx as r, renderSlot as t, createCommentVNode as d, createBlock as m, Teleport as k, withDirectives as w, renderList as y, resolveDynamicComponent as g, vShow as N } from "vue";
+import y from "./NmorphImagePreview.vue2.js";
+import { openBlock as o, createElementBlock as a, Fragment as c, normalizeStyle as g, normalizeClass as _, createElementVNode as m, renderList as f, withModifiers as p, createVNode as i, createSlots as h, withCtx as r, renderSlot as t, toDisplayString as w, createCommentVNode as d, createBlock as s, Teleport as N, resolveDynamicComponent as k } from "vue";
 /* empty css                        */
 import C from "../../../_virtual/_plugin-vue_export-helper.js";
-const I = { class: "nmorph-image-preview__content" }, S = {
+const b = ["aria-label", "onClick"], I = {
+  key: 0,
+  class: "nmorph-image-preview__trigger-more"
+}, S = { class: "nmorph-image-preview__content" }, B = {
   key: 0,
   class: "nmorph-image-preview__left"
-}, b = {
+}, T = {
   key: 1,
   class: "nmorph-image-preview__right"
-}, B = {
+}, D = {
   key: 2,
   class: "nmorph-image-preview__actions"
-}, D = { class: "nmorph-image-preview__action-element" };
-function z(i, H, L, o, O, A) {
-  return n(), l(
-    h,
+}, L = { class: "nmorph-image-preview__action-element" };
+function z(n, H, A, e, O, V) {
+  return o(), a(
+    c,
     null,
     [
-      o.props.showTrigger ? (n(), l(
+      e.props.showTrigger ? (o(), a(
         "div",
         {
           key: 0,
-          class: v(o.modifiers),
-          style: c(o.triggerStyle)
+          class: _(e.modifiers),
+          style: g(e.triggerStyle)
         },
         [
-          a("div", {
+          m("div", {
             class: "nmorph-image-preview__trigger",
-            onClick: o.clickHandler
+            onClick: e.clickHandler
           }, [
-            e(o.NmorphImage, {
-              src: o.triggerSource,
-              alt: o.props.alt,
+            e.showGalleryTrigger ? (o(!0), a(
+              c,
+              { key: 0 },
+              f(e.triggerSources, (l) => (o(), a("button", {
+                key: `${l.src}-${l.index}`,
+                type: "button",
+                class: "nmorph-image-preview__trigger-item",
+                "aria-label": e.getTriggerLabel(l.index),
+                onClick: p((v) => e.openPreviewAt(l.index), ["stop"])
+              }, [
+                i(e.NmorphImage, {
+                  src: l.src,
+                  alt: e.getTriggerLabel(l.index),
+                  fit: "cover",
+                  "frame-border": 0
+                }, h({
+                  _: 2
+                  /* DYNAMIC */
+                }, [
+                  n.$slots.loading ? {
+                    name: "loading",
+                    fn: r(() => [
+                      t(n.$slots, "loading")
+                    ]),
+                    key: "0"
+                  } : void 0,
+                  n.$slots.error ? {
+                    name: "error",
+                    fn: r(() => [
+                      t(n.$slots, "error")
+                    ]),
+                    key: "1"
+                  } : void 0
+                ]), 1032, ["src", "alt"]),
+                l.index === e.lastVisibleTriggerIndex && e.hiddenTriggerCount > 0 ? (o(), a(
+                  "span",
+                  I,
+                  " +" + w(e.hiddenTriggerCount),
+                  1
+                  /* TEXT */
+                )) : d("v-if", !0)
+              ], 8, b))),
+              128
+              /* KEYED_FRAGMENT */
+            )) : (o(), s(e.NmorphImage, {
+              key: 1,
+              src: e.triggerSource,
+              alt: e.props.alt,
               fit: "cover",
               "frame-border": 0
-            }, _({
+            }, h({
               _: 2
               /* DYNAMIC */
             }, [
-              i.$slots.loading ? {
+              n.$slots.loading ? {
                 name: "loading",
                 fn: r(() => [
-                  t(i.$slots, "loading")
+                  t(n.$slots, "loading")
                 ]),
                 key: "0"
               } : void 0,
-              i.$slots.error ? {
+              n.$slots.error ? {
                 name: "error",
                 fn: r(() => [
-                  t(i.$slots, "error")
+                  t(n.$slots, "error")
                 ]),
                 key: "1"
               } : void 0
-            ]), 1032, ["src", "alt"])
+            ]), 1032, ["src", "alt"]))
           ])
         ],
         6
         /* CLASS, STYLE */
       )) : d("v-if", !0),
-      (n(), m(k, { to: "body" }, [
-        w(a(
+      e.open ? (o(), s(N, {
+        key: 1,
+        to: "body"
+      }, [
+        m(
           "div",
           {
-            class: v(["nmorph-image-preview__portal", o.modifiers]),
-            style: c(o.portalStyle)
+            class: _(["nmorph-image-preview__portal", e.modifiers]),
+            style: g(e.portalStyle)
           },
           [
-            e(o.NmorphOverlay, {
-              show: o.open,
-              "z-index": o.props.zIndex,
+            i(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(() => [
-                a("div", I, [
-                  e(o.NmorphImage, {
-                    src: o.triggerSource,
-                    alt: o.props.alt,
+                m("div", S, [
+                  i(e.NmorphImage, {
+                    src: e.triggerSource,
+                    alt: e.props.alt,
                     fit: "contain",
                     "frame-border": 0,
-                    style: c({ transform: `rotate(${o.rotateLevel}deg) scale(${o.scaleLevel})` })
-                  }, _({
+                    style: g({ transform: `rotate(${e.rotateLevel}deg) scale(${e.scaleLevel})` })
+                  }, h({
                     _: 2
                     /* DYNAMIC */
                   }, [
-                    i.$slots.loading ? {
+                    n.$slots.loading ? {
                       name: "loading",
                       fn: r(() => [
-                        t(i.$slots, "loading")
+                        t(n.$slots, "loading")
                       ]),
                       key: "0"
                     } : void 0,
-                    i.$slots.error ? {
+                    n.$slots.error ? {
                       name: "error",
                       fn: r(() => [
-                        t(i.$slots, "error")
+                        t(n.$slots, "error")
                       ]),
                       key: "1"
                     } : void 0
                   ]), 1032, ["src", "alt", "style"])
                 ]),
-                o.showNavigation ? (n(), l("div", S, [
-                  e(o.NmorphButton, { onClick: o.previousHandler }, {
+                e.showNavigation ? (o(), a("div", B, [
+                  i(e.NmorphButton, { onClick: e.previousHandler }, {
                     default: r(() => [
-                      e(o.NmorphIcon, null, {
+                      i(e.NmorphIcon, null, {
                         default: r(() => [
-                          e(o.NmorphIconChevronDown)
+                          i(e.NmorphIconChevronDown)
                         ]),
                         _: 1
                         /* STABLE */
@@ -118,12 +168,12 @@ function z(i, H, L, o, O, A) {
                     /* STABLE */
                   })
                 ])) : d("v-if", !0),
-                o.showNavigation ? (n(), l("div", b, [
-                  e(o.NmorphButton, { onClick: o.nextHandler }, {
+                e.showNavigation ? (o(), a("div", T, [
+                  i(e.NmorphButton, { onClick: e.nextHandler }, {
                     default: r(() => [
-                      e(o.NmorphIcon, null, {
+                      i(e.NmorphIcon, null, {
                         default: r(() => [
-                          e(o.NmorphIconChevronDown)
+                          i(e.NmorphIconChevronDown)
                         ]),
                         _: 1
                         /* STABLE */
@@ -133,24 +183,24 @@ function z(i, H, L, o, O, A) {
                     /* STABLE */
                   })
                 ])) : d("v-if", !0),
-                o.props.showActionBar ? (n(), l("div", B, [
-                  (n(), l(
-                    h,
+                e.props.showActionBar ? (o(), a("div", D, [
+                  (o(), a(
+                    c,
                     null,
-                    y(o.actions, (s, f) => a("div", {
-                      key: f,
+                    f(e.actions, (l, v) => m("div", {
+                      key: v,
                       class: "nmorph-image-preview__action-element"
                     }, [
-                      e(o.NmorphButton, {
-                        onClick: s.handler
+                      i(e.NmorphButton, {
+                        onClick: l.handler
                       }, {
                         default: r(() => [
-                          e(
-                            o.NmorphIcon,
+                          i(
+                            e.NmorphIcon,
                             null,
                             {
                               default: r(() => [
-                                (n(), m(g(s.icon)))
+                                (o(), s(k(l.icon)))
                               ]),
                               _: 2
                               /* DYNAMIC */
@@ -166,15 +216,15 @@ function z(i, H, L, o, O, A) {
                     64
                     /* STABLE_FRAGMENT */
                   )),
-                  a("div", D, [
-                    e(o.NmorphButton, {
-                      disabled: o.scaleLevel === 1,
-                      onClick: o.enlargeShrinkActionData.handler
+                  m("div", L, [
+                    i(e.NmorphButton, {
+                      disabled: e.scaleLevel === 1,
+                      onClick: e.enlargeShrinkActionData.handler
                     }, {
                       default: r(() => [
-                        e(o.NmorphIcon, null, {
+                        i(e.NmorphIcon, null, {
                           default: r(() => [
-                            (n(), m(g(o.enlargeShrinkActionData.icon)))
+                            (o(), s(k(e.enlargeShrinkActionData.icon)))
                           ]),
                           _: 1
                           /* STABLE */
@@ -192,16 +242,14 @@ function z(i, H, L, o, O, A) {
           ],
           6
           /* CLASS, STYLE */
-        ), [
-          [N, o.open]
-        ])
-      ]))
+        )
+      ])) : d("v-if", !0)
     ],
     64
     /* STABLE_FRAGMENT */
   );
 }
-const j = /* @__PURE__ */ C(p, [["render", z], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-image-preview/NmorphImagePreview.vue"]]);
+const F = /* @__PURE__ */ C(y, [["render", z], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-image-preview/NmorphImagePreview.vue"]]);
 export {
-  j as default
+  F as default
 };

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

@@ -1,19 +1,19 @@
 import './NmorphImagePreview.css';
-import { defineComponent as z, ref as u, watch as F, computed as n } from "vue";
-import { useModifiers as H } from "../../../utils/create-modifiers.js";
-import { toCssSize as m } from "../../../utils/common.js";
-import R from "../../../assets/icons/shrink.svg.js";
-import T from "../../../assets/icons/rotate-right.svg.js";
-import D from "../../../assets/icons/rotate-left.svg.js";
-import V from "../../../assets/icons/zoom-in.svg.js";
-import P from "../../../assets/icons/zoom-out.svg.js";
-import Z from "../../../assets/icons/enlarge.svg.js";
-import j from "../../../assets/icons/chevron-down.svg.js";
-import E from "../../others/nmorph-overlay/NmorphOverlay.vue.js";
-import G from "../../basic/nmorph-icon/NmorphIcon.vue.js";
-import J from "../../basic/nmorph-button/NmorphButton.vue.js";
-import K from "../nmorph-image/NmorphImage.vue.js";
-const ue = /* @__PURE__ */ z({
+import { defineComponent as Z, ref as c, watch as x, computed as t } from "vue";
+import { useModifiers as j } from "../../../utils/create-modifiers.js";
+import { createCssSizeVariables as B } from "../../../utils/common.js";
+import E from "../../../assets/icons/shrink.svg.js";
+import J from "../../../assets/icons/rotate-right.svg.js";
+import K from "../../../assets/icons/rotate-left.svg.js";
+import Q from "../../../assets/icons/zoom-in.svg.js";
+import U from "../../../assets/icons/zoom-out.svg.js";
+import W from "../../../assets/icons/enlarge.svg.js";
+import X from "../../../assets/icons/chevron-down.svg.js";
+import Y from "../../others/nmorph-overlay/NmorphOverlay.vue.js";
+import ee from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+import re from "../../basic/nmorph-button/NmorphButton.vue.js";
+import te from "../nmorph-image/NmorphImage.vue.js";
+const Ne = /* @__PURE__ */ Z({
   __name: "NmorphImagePreview",
   props: {
     modelValue: { type: Boolean, required: !1, default: !1 },
@@ -29,89 +29,116 @@ const ue = /* @__PURE__ */ z({
     showActionBar: { type: Boolean, required: !1, default: !0 },
     width: { type: [Number, String], required: !1, default: void 0 },
     height: { type: [Number, String], required: !1, default: void 0 },
-    navigationButtonMargin: { type: [Number, String], required: !1, default: void 0 }
+    navigationButtonMargin: { type: [Number, String], required: !1, default: void 0 },
+    triggerView: { type: String, required: !1, default: "single" },
+    triggerLimit: { type: Number, required: !1, default: void 0 },
+    triggerGap: { type: [Number, String], required: !1, default: 8 }
   },
   emits: ["update:model-value"],
-  setup(S, { expose: I, emit: w }) {
-    I();
-    const e = S, l = u(e.modelValue);
-    F(
+  setup(_, { expose: T, emit: C }) {
+    T();
+    const e = _, i = c(e.modelValue);
+    x(
       () => e.modelValue,
-      (a) => l.value = a
+      (r) => i.value = r
     );
-    const q = n(
-      () => H({
-        "nmorph-image-preview": [l.value && "opened"]
+    const a = t(() => Array.isArray(e.src) ? e.src : [e.src]), s = (r) => {
+      const l = a.value.length - 1;
+      return l < 0 || r < 0 ? 0 : r > l ? l : r;
+    }, u = c(s(e.initialIndex)), m = t(() => s(u.value)), V = t(() => a.value[m.value] || ""), v = t(() => e.triggerView === "gallery" && a.value.length > 1), d = t(() => !e.triggerLimit || e.triggerLimit < 1 ? a.value.length : Math.min(Math.floor(e.triggerLimit), a.value.length)), g = t(
+      () => a.value.slice(0, d.value).map((r, l) => ({
+        index: l,
+        src: r
+      }))
+    ), A = t(() => a.value.length - g.value.length), M = t(() => g.value[g.value.length - 1]?.index ?? -1), O = t(
+      () => j({
+        "nmorph-image-preview": [i.value && "opened", v.value && "gallery-trigger"]
       })
-    ), o = u(e.initialIndex), B = n(() => typeof e.src == "string" ? e.src : e.src[o.value]), t = u(1), b = () => {
-      l.value = !0, s("update:model-value", l.value);
-    }, x = () => {
-      l.value = !1, s("update:model-value", l.value);
-    }, c = () => {
-      r.value = r.value + 90, r.value >= 360 && (r.value = 0);
-    }, p = () => {
-      r.value = r.value - 90, r.value <= -360 && (r.value = 0);
-    }, d = () => {
-      t.value < e.maxScaleLevel && (t.value += e.scaleStep), t.value = parseFloat(t.value.toFixed(3));
-    }, v = () => {
-      t.value > e.minScaleLevel && (t.value -= e.scaleStep), t.value = parseFloat(t.value.toFixed(3));
-    }, f = n(() => t.value < 1), h = () => {
-      t.value = 1;
-    }, g = () => {
-      t.value = 1;
-    }, r = u(0), _ = () => {
-      const a = e.src.length - 1, i = o.value - 1;
-      i < 0 ? o.value = a : o.value = i;
-    }, L = () => {
-      const a = e.src.length - 1, i = o.value + 1;
-      i > a ? o.value = 0 : o.value = i;
-    }, A = n(() => {
-      let a = {
-        icon: R,
-        handler: g
+    ), o = c(1);
+    x(
+      () => [e.initialIndex, a.value.length],
+      () => {
+        u.value = s(e.initialIndex);
+      }
+    );
+    const f = (r) => {
+      u.value = s(r), i.value = !0, p("update:model-value", i.value);
+    }, k = () => {
+      v.value || f(m.value);
+    }, z = () => {
+      i.value = !1, p("update:model-value", i.value);
+    }, h = () => {
+      n.value = n.value + 90, n.value >= 360 && (n.value = 0);
+    }, N = () => {
+      n.value = n.value - 90, n.value <= -360 && (n.value = 0);
+    }, y = () => {
+      o.value < e.maxScaleLevel && (o.value += e.scaleStep), o.value = parseFloat(o.value.toFixed(3));
+    }, I = () => {
+      o.value > e.minScaleLevel && (o.value -= e.scaleStep), o.value = parseFloat(o.value.toFixed(3));
+    }, S = t(() => o.value < 1), w = () => {
+      o.value = 1;
+    }, b = () => {
+      o.value = 1;
+    }, n = c(0), F = () => {
+      const r = a.value.length;
+      if (!r) return;
+      const l = m.value - 1;
+      u.value = l < 0 ? r - 1 : l;
+    }, H = () => {
+      const r = a.value.length;
+      if (!r) return;
+      const l = m.value + 1;
+      u.value = l > r - 1 ? 0 : l;
+    }, R = t(() => {
+      let r = {
+        icon: E,
+        handler: b
       };
-      return f.value && (a = {
-        icon: Z,
-        handler: h
-      }), a;
-    }), C = [
+      return S.value && (r = {
+        icon: W,
+        handler: w
+      }), r;
+    }), D = [
       {
-        icon: T,
-        handler: c
+        icon: J,
+        handler: h
       },
       {
-        icon: D,
-        handler: p
+        icon: K,
+        handler: N
       },
       {
-        icon: V,
-        handler: d
+        icon: Q,
+        handler: y
       },
       {
-        icon: P,
-        handler: v
+        icon: U,
+        handler: I
       }
-    ], s = w, N = n(() => Array.isArray(e.src) && e.src.length > 0), M = n(() => e.showNavigationButtons && N.value), O = n(() => ({
-      ...e.width !== void 0 && { "--width": m(e.width) },
-      ...e.height !== void 0 && { "--height": m(e.height) }
-    })), k = n(() => ({
-      ...e.navigationButtonMargin !== void 0 && {
-        "--nmorph-image-preview-btn-margin": m(e.navigationButtonMargin)
-      }
-    })), y = { props: e, open: l, modifiers: q, currentIndex: o, triggerSource: B, scaleLevel: t, clickHandler: b, closeHandler: x, rotateRight: c, rotateLeft: p, zoomIn: d, zoomOut: v, isLevelChangedToMin: f, enlargeToNormal: h, shrinkToNormal: g, rotateLevel: r, previousHandler: _, nextHandler: L, enlargeShrinkActionData: A, actions: C, emit: s, multipleSources: N, showNavigation: M, triggerStyle: O, portalStyle: k, get NmorphImage() {
-      return K;
+    ], p = C, q = t(() => a.value.length > 1), G = t(() => e.showNavigationButtons && q.value), P = t(
+      () => B({
+        "--width": e.width,
+        "--height": e.height,
+        "--nmorph-image-preview-trigger-gap": e.triggerGap
+      })
+    ), $ = t(
+      () => B({
+        "--nmorph-image-preview-btn-margin": e.navigationButtonMargin
+      })
+    ), L = { props: e, open: i, sourceList: a, getClampedIndex: s, currentIndex: u, resolvedCurrentIndex: m, triggerSource: V, showGalleryTrigger: v, triggerSourceLimit: d, triggerSources: g, hiddenTriggerCount: A, lastVisibleTriggerIndex: M, modifiers: O, scaleLevel: o, openPreviewAt: f, clickHandler: k, closeHandler: z, rotateRight: h, rotateLeft: N, zoomIn: y, zoomOut: I, isLevelChangedToMin: S, enlargeToNormal: w, shrinkToNormal: b, rotateLevel: n, previousHandler: F, nextHandler: H, enlargeShrinkActionData: R, actions: D, emit: p, multipleSources: q, showNavigation: G, triggerStyle: P, portalStyle: $, getTriggerLabel: (r) => e.alt ? `${e.alt} ${r + 1}` : `Image ${r + 1}`, get NmorphImage() {
+      return te;
     }, get NmorphButton() {
-      return J;
+      return re;
     }, get NmorphIcon() {
-      return G;
+      return ee;
     }, get NmorphOverlay() {
-      return E;
+      return Y;
     }, get NmorphIconChevronDown() {
-      return j;
+      return X;
     } };
-    return Object.defineProperty(y, "__isScriptSetup", { enumerable: !1, value: !0 }), y;
+    return Object.defineProperty(L, "__isScriptSetup", { enumerable: !1, value: !0 }), L;
   }
 });
 export {
-  ue as default
+  Ne as default
 };