@nmorph/nmorph-ui-kit 2.2.52 → 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.vue.js

@@ -1,294 +1,208 @@
 import './NmorphImagePreview.css';
-import { defineComponent as ue, ref as w, watch as $, computed as a, onBeforeUnmount as de, openBlock as u, createElementBlock as c, Fragment as L, normalizeStyle as H, normalizeClass as me, createElementVNode as I, renderList as R, withModifiers as ce, createVNode as v, unref as m, createSlots as b, withCtx as n, renderSlot as g, toDisplayString as ve, createCommentVNode as N, createBlock as _, resolveDynamicComponent as G } from "vue";
-import { useModifiers as ge } from "../../../utils/create-modifiers.js";
-import { createCssSizeVariables as fe } from "../../../utils/common.js";
-import pe from "../nmorph-preview-portal/NmorphPreviewPortal.vue.js";
-/* empty css                                                */
-import he from "../../../assets/icons/shrink.svg.js";
-import S from "../nmorph-image/NmorphImage.vue.js";
-/* empty css                               */
-import ye from "../../../assets/icons/rotate-right.svg.js";
-import we from "../../../assets/icons/rotate-left.svg.js";
-import _e from "../../../assets/icons/zoom-in.svg.js";
-import ke from "../../../assets/icons/zoom-out.svg.js";
-import P from "../../basic/nmorph-button/NmorphButton.vue.js";
-/* empty css                                          */
-import O from "../../basic/nmorph-icon/NmorphIcon.vue.js";
-/* empty css                                      */
-import $e from "../../../assets/icons/enlarge.svg.js";
-const Le = ["aria-label", "onClick"], Ie = {
+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__action-element" }, Pe = /* @__PURE__ */ ue({
-  __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(Z, { emit: U }) {
-    const t = Z, i = w(t.modelValue);
-    $(
-      () => t.modelValue,
-      (e) => i.value = e
-    );
-    const r = a(() => Array.isArray(t.src) ? t.src : [t.src]), p = (e) => {
-      const l = r.value.length - 1;
-      return l < 0 || e < 0 ? 0 : e > l ? l : e;
-    }, f = w(p(t.initialIndex)), h = a(() => p(f.value)), C = a(() => r.value[h.value] || ""), k = a(() => t.triggerView === "gallery" && r.value.length > 1), j = a(() => !t.triggerLimit || t.triggerLimit < 1 ? r.value.length : Math.min(Math.floor(t.triggerLimit), r.value.length)), y = a(
-      () => r.value.slice(0, j.value).map((e, l) => ({
-        index: l,
-        src: e
-      }))
-    ), B = a(() => r.value.length - y.value.length), q = a(() => y.value[y.value.length - 1]?.index ?? -1), x = a(
-      () => ge({
-        "nmorph-image-preview": [i.value && "opened", k.value && "gallery-trigger"]
-      })
-    ), o = w(1);
-    $(
-      () => [t.initialIndex, r.value.length],
-      () => {
-        f.value = p(t.initialIndex);
-      }
-    );
-    const V = (e) => {
-      f.value = p(e), i.value = !0, D("update:model-value", i.value);
-    }, J = () => {
-      k.value || V(h.value);
-    }, Q = () => {
-      i.value = !1, D("update:model-value", i.value);
-    }, W = () => {
-      d.value = d.value + 90, d.value >= 360 && (d.value = 0);
-    }, X = () => {
-      d.value = d.value - 90, d.value <= -360 && (d.value = 0);
-    }, Y = () => {
-      o.value < t.maxScaleLevel && (o.value += t.scaleStep), o.value = parseFloat(o.value.toFixed(3));
-    }, ee = () => {
-      o.value > t.minScaleLevel && (o.value -= t.scaleStep), o.value = parseFloat(o.value.toFixed(3));
-    }, te = a(() => o.value < 1), ae = () => {
-      o.value = 1;
-    }, oe = () => {
-      o.value = 1;
-    }, d = w(0), z = () => {
-      const e = r.value.length;
-      if (!e) return;
-      const l = h.value - 1;
-      f.value = l < 0 ? e - 1 : l;
-    }, T = () => {
-      const e = r.value.length;
-      if (!e) return;
-      const l = h.value + 1;
-      f.value = l > e - 1 ? 0 : l;
-    }, A = (e) => {
-      !i.value || r.value.length < 2 || e.altKey || e.ctrlKey || e.metaKey || e.shiftKey || (e.key === "ArrowLeft" && (e.preventDefault(), z()), e.key === "ArrowRight" && (e.preventDefault(), T()));
-    }, re = () => {
-      typeof document > "u" || document.addEventListener("keydown", A);
-    }, M = () => {
-      typeof document > "u" || document.removeEventListener("keydown", A);
-    };
-    $(
-      i,
-      (e) => {
-        e ? re() : M();
-      },
-      { immediate: !0 }
-    ), de(M);
-    const K = a(() => {
-      let e = {
-        icon: he,
-        handler: oe
-      };
-      return te.value && (e = {
-        icon: $e,
-        handler: ae
-      }), e;
-    }), le = [
-      {
-        icon: ye,
-        handler: W
-      },
-      {
-        icon: we,
-        handler: X
-      },
-      {
-        icon: _e,
-        handler: Y
-      },
-      {
-        icon: ke,
-        handler: ee
-      }
-    ], D = U, ne = a(() => r.value.length > 1), ie = a(() => t.showNavigationButtons && ne.value), se = a(
-      () => fe({
-        "--width": t.width,
-        "--height": t.height,
-        "--nmorph-image-preview-radius": t.radius,
-        "--nmorph-image-preview-trigger-gap": t.triggerGap
-      })
-    ), E = (e) => t.alt ? `${t.alt} ${e + 1}` : `Image ${e + 1}`;
-    return (e, l) => (u(), c(L, null, [
-      t.showTrigger ? (u(), c("div", {
-        key: 0,
-        class: me(x.value),
-        style: H(se.value)
-      }, [
-        I("div", {
-          class: "nmorph-image-preview__trigger",
-          onClick: J
-        }, [
-          k.value ? (u(!0), c(L, { key: 0 }, R(y.value, (s) => (u(), c("button", {
-            key: `${s.src}-${s.index}`,
-            type: "button",
-            class: "nmorph-image-preview__trigger-item",
-            "aria-label": E(s.index),
-            onClick: ce((F) => V(s.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
           }, [
-            v(m(S), {
-              src: s.src,
-              alt: E(s.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: n(() => [
-                  g(e.$slots, "loading")
+                fn: o(() => [
+                  t(e.$slots, "loading")
                 ]),
                 key: "0"
               } : void 0,
               e.$slots.error ? {
                 name: "error",
-                fn: n(() => [
-                  g(e.$slots, "error")
+                fn: o(() => [
+                  t(e.$slots, "error")
                 ]),
                 key: "1"
               } : void 0
-            ]), 1032, ["src", "alt", "fit"]),
-            s.index === q.value && B.value > 0 ? (u(), c("span", Ie, " +" + ve(B.value), 1)) : N("", !0)
-          ], 8, Le))), 128)) : (u(), _(m(S), {
-            key: 1,
-            src: C.value,
-            alt: t.alt,
-            fit: t.fit,
-            "frame-border": 0
-          }, b({ _: 2 }, [
-            e.$slots.loading ? {
-              name: "loading",
-              fn: n(() => [
-                g(e.$slots, "loading")
-              ]),
-              key: "0"
-            } : void 0,
-            e.$slots.error ? {
-              name: "error",
-              fn: n(() => [
-                g(e.$slots, "error")
-              ]),
-              key: "1"
-            } : void 0
-          ]), 1032, ["src", "alt", "fit"]))
-        ])
-      ], 6)) : N("", !0),
-      i.value ? (u(), _(pe, {
+            ]), 1032, ["src", "alt", "fit"]))
+          ])
+        ],
+        6
+        /* CLASS, STYLE */
+      )) : c("v-if", !0),
+      r.open ? (n(), s(r.NmorphPreviewPortal, {
         key: 1,
-        show: i.value,
-        "z-index": t.zIndex,
+        show: r.open,
+        "z-index": r.props.zIndex,
         "root-class": "nmorph-image-preview__portal",
-        "state-class": x.value,
+        "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": t.navigationButtonMargin,
-        "show-navigation": ie.value,
-        "show-action-bar": t.showActionBar,
-        onClose: Q,
-        onPrevious: z,
-        onNext: T
+        "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: n(() => [
-          (u(), c(L, null, R(le, (s, F) => I("div", {
-            key: F,
-            class: "nmorph-image-preview__action-element"
-          }, [
-            v(m(P), {
-              onClick: s.handler
-            }, {
-              default: n(() => [
-                v(m(O), null, {
-                  default: n(() => [
-                    (u(), _(G(s.icon)))
-                  ]),
-                  _: 2
-                }, 1024)
-              ]),
-              _: 2
-            }, 1032, ["onClick"])
-          ])), 64)),
-          I("div", be, [
-            v(m(P), {
-              disabled: o.value === 1,
-              onClick: K.value.handler
+        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: n(() => [
-                v(m(O), null, {
-                  default: n(() => [
-                    (u(), _(G(K.value.icon)))
+              default: o(() => [
+                l(r.NmorphIcon, null, {
+                  default: o(() => [
+                    (n(), s(_(r.enlargeShrinkActionData.icon)))
                   ]),
                   _: 1
+                  /* STABLE */
                 })
               ]),
               _: 1
+              /* STABLE */
             }, 8, ["disabled", "onClick"])
           ])
         ]),
-        default: n(() => [
-          v(m(S), {
-            src: C.value,
-            alt: t.alt,
+        default: o(() => [
+          l(r.NmorphImage, {
+            src: r.triggerSource,
+            alt: r.props.alt,
             fit: "contain",
             "frame-border": 0,
-            style: H({ transform: `rotate(${d.value}deg) scale(${o.value})` })
-          }, b({ _: 2 }, [
+            style: v({ transform: `rotate(${r.rotateLevel}deg) scale(${r.scaleLevel})` })
+          }, d({
+            _: 2
+            /* DYNAMIC */
+          }, [
             e.$slots.loading ? {
               name: "loading",
-              fn: n(() => [
-                g(e.$slots, "loading")
+              fn: o(() => [
+                t(e.$slots, "loading")
               ]),
               key: "0"
             } : void 0,
             e.$slots.error ? {
               name: "error",
-              fn: n(() => [
-                g(e.$slots, "error")
+              fn: o(() => [
+                t(e.$slots, "error")
               ]),
               key: "1"
             } : void 0
           ]), 1032, ["src", "alt", "style"])
         ]),
         _: 3
-      }, 8, ["show", "z-index", "state-class", "navigation-button-margin", "show-navigation", "show-action-bar"])) : N("", !0)
-    ], 64));
-  }
-});
+        /* 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 {
-  Pe as default
+  V as default
 };

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

@@ -0,0 +1,152 @@
+import './NmorphImagePreview.css';
+import { defineComponent as $, ref as g, watch as h, computed as t, onBeforeUnmount as Z } from "vue";
+import { useModifiers as j } from "../../../utils/create-modifiers.js";
+import { createCssSizeVariables as U } from "../../../utils/common.js";
+import J from "../nmorph-preview-portal/NmorphPreviewPortal.vue.js";
+import Q from "../../../assets/icons/shrink.svg.js";
+import W from "../../../assets/icons/rotate-right.svg.js";
+import X from "../../../assets/icons/rotate-left.svg.js";
+import Y from "../../../assets/icons/zoom-in.svg.js";
+import ee from "../../../assets/icons/zoom-out.svg.js";
+import re from "../../../assets/icons/enlarge.svg.js";
+import te from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+import ae from "../../basic/nmorph-button/NmorphButton.vue.js";
+import oe from "../nmorph-image/NmorphImage.vue.js";
+const Ne = /* @__PURE__ */ $({
+  __name: "NmorphImagePreview",
+  props: {
+    modelValue: { type: Boolean, required: !1, default: !1 },
+    alt: { type: String, required: !1, default: "" },
+    initialIndex: { type: Number, required: !1, default: 0 },
+    src: { type: [String, Array], required: !0 },
+    scaleStep: { type: Number, required: !1, default: 0.2 },
+    minScaleLevel: { type: Number, required: !1, default: 0.2 },
+    maxScaleLevel: { type: Number, required: !1, default: 4 },
+    zIndex: { type: Number, required: !1, default: void 0 },
+    showTrigger: { type: Boolean, required: !1, default: !0 },
+    showNavigationButtons: { type: Boolean, required: !1, default: !0 },
+    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 },
+    radius: { type: [Number, String], required: !1, default: void 0 },
+    fit: { type: String, required: !1, default: "cover" },
+    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(V, { expose: C, emit: K }) {
+    C();
+    const r = V, i = g(r.modelValue);
+    h(
+      () => r.modelValue,
+      (e) => i.value = e
+    );
+    const a = t(() => Array.isArray(r.src) ? r.src : [r.src]), s = (e) => {
+      const l = a.value.length - 1;
+      return l < 0 || e < 0 ? 0 : e > l ? l : e;
+    }, u = g(s(r.initialIndex)), d = t(() => s(u.value)), H = t(() => a.value[d.value] || ""), c = t(() => r.triggerView === "gallery" && a.value.length > 1), y = t(() => !r.triggerLimit || r.triggerLimit < 1 ? a.value.length : Math.min(Math.floor(r.triggerLimit), a.value.length)), m = t(
+      () => a.value.slice(0, y.value).map((e, l) => ({
+        index: l,
+        src: e
+      }))
+    ), M = t(() => a.value.length - m.value.length), P = t(() => m.value[m.value.length - 1]?.index ?? -1), R = t(
+      () => j({
+        "nmorph-image-preview": [i.value && "opened", c.value && "gallery-trigger"]
+      })
+    ), o = g(1);
+    h(
+      () => [r.initialIndex, a.value.length],
+      () => {
+        u.value = s(r.initialIndex);
+      }
+    );
+    const N = (e) => {
+      u.value = s(e), i.value = !0, p("update:model-value", i.value);
+    }, z = () => {
+      c.value || N(d.value);
+    }, F = () => {
+      i.value = !1, p("update:model-value", i.value);
+    }, S = () => {
+      n.value = n.value + 90, n.value >= 360 && (n.value = 0);
+    }, I = () => {
+      n.value = n.value - 90, n.value <= -360 && (n.value = 0);
+    }, w = () => {
+      o.value < r.maxScaleLevel && (o.value += r.scaleStep), o.value = parseFloat(o.value.toFixed(3));
+    }, L = () => {
+      o.value > r.minScaleLevel && (o.value -= r.scaleStep), o.value = parseFloat(o.value.toFixed(3));
+    }, b = t(() => o.value < 1), q = () => {
+      o.value = 1;
+    }, x = () => {
+      o.value = 1;
+    }, n = g(0), B = () => {
+      const e = a.value.length;
+      if (!e) return;
+      const l = d.value - 1;
+      u.value = l < 0 ? e - 1 : l;
+    }, _ = () => {
+      const e = a.value.length;
+      if (!e) return;
+      const l = d.value + 1;
+      u.value = l > e - 1 ? 0 : l;
+    }, f = (e) => {
+      !i.value || a.value.length < 2 || e.altKey || e.ctrlKey || e.metaKey || e.shiftKey || (e.key === "ArrowLeft" && (e.preventDefault(), B()), e.key === "ArrowRight" && (e.preventDefault(), _()));
+    }, k = () => {
+      typeof document > "u" || document.addEventListener("keydown", f);
+    }, v = () => {
+      typeof document > "u" || document.removeEventListener("keydown", f);
+    };
+    h(
+      i,
+      (e) => {
+        e ? k() : v();
+      },
+      { immediate: !0 }
+    ), Z(v);
+    const D = t(() => {
+      let e = {
+        icon: Q,
+        handler: x
+      };
+      return b.value && (e = {
+        icon: re,
+        handler: q
+      }), e;
+    }), E = [
+      {
+        icon: W,
+        handler: S
+      },
+      {
+        icon: X,
+        handler: I
+      },
+      {
+        icon: Y,
+        handler: w
+      },
+      {
+        icon: ee,
+        handler: L
+      }
+    ], p = K, T = t(() => a.value.length > 1), G = t(() => r.showNavigationButtons && T.value), O = t(
+      () => U({
+        "--width": r.width,
+        "--height": r.height,
+        "--nmorph-image-preview-radius": r.radius,
+        "--nmorph-image-preview-trigger-gap": r.triggerGap
+      })
+    ), A = { props: r, open: i, sourceList: a, getClampedIndex: s, currentIndex: u, resolvedCurrentIndex: d, triggerSource: H, showGalleryTrigger: c, triggerSourceLimit: y, triggerSources: m, hiddenTriggerCount: M, lastVisibleTriggerIndex: P, modifiers: R, scaleLevel: o, openPreviewAt: N, clickHandler: z, closeHandler: F, rotateRight: S, rotateLeft: I, zoomIn: w, zoomOut: L, isLevelChangedToMin: b, enlargeToNormal: q, shrinkToNormal: x, rotateLevel: n, previousHandler: B, nextHandler: _, keyboardNavigationHandler: f, addKeyboardNavigationListener: k, removeKeyboardNavigationListener: v, enlargeShrinkActionData: D, actions: E, emit: p, multipleSources: T, showNavigation: G, triggerStyle: O, getTriggerLabel: (e) => r.alt ? `${r.alt} ${e + 1}` : `Image ${e + 1}`, get NmorphImage() {
+      return oe;
+    }, get NmorphButton() {
+      return ae;
+    }, get NmorphIcon() {
+      return te;
+    }, NmorphPreviewPortal: J };
+    return Object.defineProperty(A, "__isScriptSetup", { enumerable: !1, value: !0 }), A;
+  }
+});
+export {
+  Ne as default
+};

package/dist/components/data/nmorph-media-gallery/NmorphMediaGallery.css

@@ -1 +1 @@
-.nmorph-media-gallery{display:contents}.nmorph-media-gallery .nmorph-media-gallery__stage{position:relative;display:flex;justify-content:center;align-items:center;width:100%;height:100%;overflow:hidden;pointer-events:none}.nmorph-media-gallery .nmorph-image{width:100%;height:100%;transition:transform var(--transition-03) ease-in-out;pointer-events:none}.nmorph-media-gallery .nmorph-image img{display:block;width:auto;max-width:100%;height:auto;max-height:100%;object-fit:contain;pointer-events:auto}.nmorph-media-gallery .nmorph-media-gallery__video{display:block;width:100%;max-width:100%;height:100%;max-height:100%;background:var(--nmorph-black-color);border-radius:var(--default-border-radius);object-fit:contain;pointer-events:auto}.nmorph-media-gallery .nmorph-media-gallery__play{position:absolute;top:50%;left:50%;z-index:1;display:inline-flex;justify-content:center;align-items:center;width:54px;height:54px;padding:0;color:var(--nmorph-contrast-text-color);background:color-mix(in srgb,var(--nmorph-black-color) 58%,transparent);border:0;border-radius:var(--border-radius-circular);transform:translate(-50%,-50%);cursor:pointer;pointer-events:auto}.nmorph-media-gallery .nmorph-media-gallery__play .nmorph-icon{--nmorph-icon-color: var(--nmorph-contrast-text-color);--color: var(--nmorph-contrast-text-color)}.nmorph-media-gallery .nmorph-media-gallery__play:hover{background:color-mix(in srgb,var(--nmorph-black-color) 72%,transparent)}.nmorph-media-gallery.nmorph-media-gallery--video-playing .nmorph-media-gallery__play{opacity:.72}.nmorph-media-gallery .nmorph-media-gallery__action-element{margin-right:var(--indentation-03)}.nmorph-media-gallery.nmorph-media-gallery--image-cover .nmorph-image img{width:100%;height:100%;object-fit:cover}.nmorph-media-gallery.nmorph-media-gallery--video-cover .nmorph-media-gallery__video{object-fit:cover}
+.nmorph-media-gallery__trigger{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:var(--indentation-03);width:100%}.nmorph-media-gallery__trigger-item{position:relative;min-width:0;overflow:hidden;background:color-mix(in srgb,var(--nmorph-accent-color) 6%,transparent);border-radius:var(--default-border-radius);aspect-ratio:16/9}.nmorph-media-gallery__trigger-open{position:relative;display:block;width:100%;height:100%;padding:0;overflow:hidden;color:inherit;font:inherit;text-align:initial;background:transparent;border:0;cursor:pointer}.nmorph-media-gallery__trigger-open .nmorph-image,.nmorph-media-gallery__trigger-open .nmorph-media-gallery__trigger-video{display:block;width:100%;height:100%;transition:filter var(--transition-03) ease-in-out}.nmorph-media-gallery__trigger-open .nmorph-image img,.nmorph-media-gallery__trigger-open .nmorph-media-gallery__trigger-video{display:block;width:100%;height:100%;object-fit:cover}.nmorph-media-gallery__trigger-open:hover .nmorph-image,.nmorph-media-gallery__trigger-open:hover .nmorph-media-gallery__trigger-video{filter:brightness(.86)}.nmorph-media-gallery__trigger-name,.nmorph-media-gallery__trigger-size{position:absolute;z-index:2;display:block;box-sizing:border-box;min-width:0;min-height:22px;padding:0 6px;overflow:hidden;color:var(--nmorph-contrast-text-color);line-height:22px;white-space:nowrap;text-overflow:ellipsis;background:color-mix(in srgb,var(--nmorph-black-color) 58%,transparent);border-radius:var(--default-border-radius);pointer-events:none}.nmorph-media-gallery__trigger-name{top:var(--indentation-02);left:var(--indentation-02);max-width:calc(100% - 56px);font-weight:600;font-size:var(--font-size-small)}.nmorph-media-gallery__trigger-item--video .nmorph-media-gallery__trigger-name{max-width:calc(100% - 118px)}.nmorph-media-gallery__trigger-size{right:var(--indentation-02);bottom:var(--indentation-02);max-width:calc(100% - var(--indentation-04));font-size:var(--font-size-extra-small)}.nmorph-media-gallery__trigger-actions{position:absolute;top:var(--indentation-02);right:var(--indentation-02);z-index:3;display:flex;gap:var(--indentation-01)}.nmorph-media-gallery__trigger-action{display:inline-flex;justify-content:center;align-items:center;box-sizing:border-box;width:22px;height:22px;padding:0;color:var(--nmorph-contrast-text-color);font:inherit;line-height:1;text-decoration:none;background:color-mix(in srgb,var(--nmorph-black-color) 58%,transparent);border:0;border-radius:var(--default-border-radius);cursor:pointer}.nmorph-media-gallery__trigger-action .nmorph-icon{flex:0 0 auto;--nmorph-icon-color: var(--nmorph-contrast-text-color);--color: var(--nmorph-contrast-text-color)}.nmorph-media-gallery__trigger-action:hover{color:var(--nmorph-contrast-text-color);background:color-mix(in srgb,var(--nmorph-black-color) 72%,transparent)}.nmorph-media-gallery__trigger-play{position:absolute;top:50%;left:50%;z-index:2;display:inline-flex;justify-content:center;align-items:center;width:54px;height:54px;color:var(--nmorph-contrast-text-color);background:color-mix(in srgb,var(--nmorph-black-color) 58%,transparent);border-radius:var(--border-radius-circular);transform:translate(-50%,-50%);pointer-events:none}.nmorph-media-gallery__trigger-play .nmorph-icon{--nmorph-icon-color: var(--nmorph-contrast-text-color);--color: var(--nmorph-contrast-text-color)}.nmorph-media-gallery{display:contents}.nmorph-media-gallery .nmorph-media-gallery__stage{position:relative;display:flex;justify-content:center;align-items:center;width:100%;height:100%;overflow:hidden;pointer-events:none}.nmorph-media-gallery .nmorph-image{width:100%;height:100%;transition:transform var(--transition-03) ease-in-out;pointer-events:none}.nmorph-media-gallery .nmorph-image img{display:block;width:auto;max-width:100%;height:auto;max-height:100%;object-fit:contain;pointer-events:auto}.nmorph-media-gallery .nmorph-media-gallery__video{display:block;width:100%;max-width:100%;height:100%;max-height:100%;background:var(--nmorph-black-color);border-radius:var(--default-border-radius);object-fit:contain;pointer-events:auto}.nmorph-media-gallery .nmorph-media-gallery__play{position:absolute;top:50%;left:50%;z-index:1;display:inline-flex;justify-content:center;align-items:center;width:54px;height:54px;padding:0;color:var(--nmorph-contrast-text-color);background:color-mix(in srgb,var(--nmorph-black-color) 58%,transparent);border:0;border-radius:var(--border-radius-circular);transform:translate(-50%,-50%);cursor:pointer;pointer-events:auto}.nmorph-media-gallery .nmorph-media-gallery__play .nmorph-icon{--nmorph-icon-color: var(--nmorph-contrast-text-color);--color: var(--nmorph-contrast-text-color)}.nmorph-media-gallery .nmorph-media-gallery__play:hover{background:color-mix(in srgb,var(--nmorph-black-color) 72%,transparent)}.nmorph-media-gallery.nmorph-media-gallery--video-playing .nmorph-media-gallery__play{opacity:.72}.nmorph-media-gallery .nmorph-media-gallery__file-name,.nmorph-media-gallery .nmorph-media-gallery__file-size{position:absolute;z-index:2;display:block;box-sizing:border-box;min-width:0;min-height:22px;padding:0 6px;overflow:hidden;color:var(--nmorph-contrast-text-color);line-height:22px;white-space:nowrap;text-overflow:ellipsis;background:color-mix(in srgb,var(--nmorph-black-color) 58%,transparent);border-radius:var(--default-border-radius);pointer-events:none}.nmorph-media-gallery .nmorph-media-gallery__file-name{top:var(--indentation-02);left:var(--indentation-02);max-width:calc(100% - 56px);font-weight:600;font-size:var(--font-size-small)}.nmorph-media-gallery.nmorph-media-gallery--video .nmorph-media-gallery__file-name{max-width:calc(100% - 92px)}.nmorph-media-gallery .nmorph-media-gallery__file-size{right:var(--indentation-02);bottom:var(--indentation-02);max-width:calc(100% - var(--indentation-04));font-size:var(--font-size-extra-small)}.nmorph-media-gallery .nmorph-media-gallery__file-actions{position:absolute;top:var(--indentation-02);right:var(--indentation-02);z-index:3;display:flex;gap:var(--indentation-01);pointer-events:auto}.nmorph-media-gallery .nmorph-media-gallery__file-action{display:inline-flex;justify-content:center;align-items:center;box-sizing:border-box;width:22px;height:22px;padding:0;color:var(--nmorph-contrast-text-color);font:inherit;line-height:1;text-decoration:none;background:color-mix(in srgb,var(--nmorph-black-color) 58%,transparent);border:0;border-radius:var(--default-border-radius);cursor:pointer}.nmorph-media-gallery .nmorph-media-gallery__file-action .nmorph-icon{flex:0 0 auto;--nmorph-icon-color: var(--nmorph-contrast-text-color);--color: var(--nmorph-contrast-text-color)}.nmorph-media-gallery .nmorph-media-gallery__file-action:hover{background:color-mix(in srgb,var(--nmorph-black-color) 72%,transparent)}.nmorph-media-gallery .nmorph-media-gallery__action-element{margin-right:var(--indentation-03)}.nmorph-media-gallery.nmorph-media-gallery--image-cover .nmorph-image img{width:100%;height:100%;object-fit:cover}.nmorph-media-gallery.nmorph-media-gallery--video-cover .nmorph-media-gallery__video{object-fit:cover}