@nmorph/nmorph-ui-kit 2.2.51 → 2.2.52

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

@@ -1,35 +1,25 @@
 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";
+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 we from "../../others/nmorph-overlay/NmorphOverlay.vue.js";
-/* empty css                                             */
-import I from "../../basic/nmorph-button/NmorphButton.vue.js";
+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 L from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+import O 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 $e from "../../../assets/icons/enlarge.svg.js";
+const Le = ["aria-label", "onClick"], Ie = {
   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({
+}, be = { class: "nmorph-image-preview__action-element" }, Pe = /* @__PURE__ */ ue({
   __name: "NmorphImagePreview",
   props: {
     modelValue: { type: Boolean, default: !1 },
@@ -53,284 +43,252 @@ const Se = ["aria-label", "onClick"], Ne = {
     triggerGap: { default: 8 }
   },
   emits: ["update:model-value"],
-  setup(Q, { emit: W }) {
-    const t = Q, d = k(t.modelValue);
-    S(
+  setup(Z, { emit: U }) {
+    const t = Z, i = w(t.modelValue);
+    $(
       () => t.modelValue,
-      (e) => d.value = e
+      (e) => i.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,
+    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
       }))
-    ), 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"]
+    ), 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"]
       })
-    ), l = k(1);
-    S(
-      () => [t.initialIndex, s.value.length],
+    ), o = w(1);
+    $(
+      () => [t.initialIndex, r.value.length],
       () => {
-        p.value = y(t.initialIndex);
+        f.value = p(t.initialIndex);
       }
     );
-    const A = (e) => {
-      p.value = y(e), d.value = !0, O("update:model-value", d.value);
+    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 = () => {
-      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);
+      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 = () => {
-      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;
+      o.value = 1;
+    }, d = w(0), z = () => {
+      const e = r.value.length;
       if (!e) return;
-      const u = _.value - 1;
-      p.value = u < 0 ? e - 1 : u;
-    }, D = () => {
-      const e = s.value.length;
+      const l = h.value - 1;
+      f.value = l < 0 ? e - 1 : l;
+    }, T = () => {
+      const e = r.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);
+      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);
     };
-    S(
-      d,
+    $(
+      i,
       (e) => {
-        e ? se() : F();
+        e ? re() : M();
       },
       { immediate: !0 }
-    ), ge(F);
-    const H = o(() => {
+    ), de(M);
+    const K = a(() => {
       let e = {
-        icon: _e,
-        handler: ie
+        icon: he,
+        handler: oe
       };
-      return le.value && (e = {
-        icon: Ce,
-        handler: ne
+      return te.value && (e = {
+        icon: $e,
+        handler: ae
       }), e;
-    }), ue = [
+    }), le = [
       {
-        icon: ke,
-        handler: te
+        icon: ye,
+        handler: W
       },
       {
-        icon: $e,
-        handler: oe
+        icon: we,
+        handler: X
       },
       {
-        icon: Ie,
-        handler: re
+        icon: _e,
+        handler: Y
       },
       {
-        icon: Le,
-        handler: ae
+        icon: ke,
+        handler: ee
       }
-    ], O = W, de = o(() => s.value.length > 1), R = o(() => t.showNavigationButtons && de.value), me = o(
-      () => q({
+    ], 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
       })
-    ), 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", {
+    ), 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: Z(z.value),
-        style: b(me.value)
+        class: me(x.value),
+        style: H(se.value)
       }, [
-        h("div", {
+        I("div", {
           class: "nmorph-image-preview__trigger",
-          onClick: ee
+          onClick: J
         }, [
-          C.value ? (n(!0), c(N, { key: 0 }, U(w.value, (m) => (n(), c("button", {
-            key: `${m.src}-${m.index}`,
+          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": G(m.index),
-            onClick: fe((P) => A(m.index), ["stop"])
+            "aria-label": E(s.index),
+            onClick: ce((F) => V(s.index), ["stop"])
           }, [
-            i(a(x), {
-              src: m.src,
-              alt: G(m.index),
+            v(m(S), {
+              src: s.src,
+              alt: E(s.index),
               fit: t.fit,
               "frame-border": 0
-            }, B({ _: 2 }, [
+            }, b({ _: 2 }, [
               e.$slots.loading ? {
                 name: "loading",
-                fn: r(() => [
+                fn: n(() => [
                   g(e.$slots, "loading")
                 ]),
                 key: "0"
               } : void 0,
               e.$slots.error ? {
                 name: "error",
-                fn: r(() => [
+                fn: n(() => [
                   g(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), {
+            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: T.value,
+            src: C.value,
             alt: t.alt,
             fit: t.fit,
             "frame-border": 0
-          }, B({ _: 2 }, [
+          }, b({ _: 2 }, [
             e.$slots.loading ? {
               name: "loading",
-              fn: r(() => [
+              fn: n(() => [
                 g(e.$slots, "loading")
               ]),
               key: "0"
             } : void 0,
             e.$slots.error ? {
               name: "error",
-              fn: r(() => [
+              fn: n(() => [
                 g(e.$slots, "error")
               ]),
               key: "1"
             } : void 0
           ]), 1032, ["src", "alt", "fit"]))
         ])
-      ], 6)) : f("", !0),
-      d.value ? (n(), $(he, {
+      ], 6)) : N("", !0),
+      i.value ? (u(), _(pe, {
         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
-                    })
+        show: i.value,
+        "z-index": t.zIndex,
+        "root-class": "nmorph-image-preview__portal",
+        "state-class": x.value,
+        "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
+      }, {
+        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)))
                   ]),
-                  _: 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
-                    })
+                  _: 2
+                }, 1024)
+              ]),
+              _: 2
+            }, 1032, ["onClick"])
+          ])), 64)),
+          I("div", be, [
+            v(m(P), {
+              disabled: o.value === 1,
+              onClick: K.value.handler
+            }, {
+              default: n(() => [
+                v(m(O), null, {
+                  default: n(() => [
+                    (u(), _(G(K.value.icon)))
                   ]),
                   _: 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)
+              ]),
+              _: 1
+            }, 8, ["disabled", "onClick"])
+          ])
+        ]),
+        default: n(() => [
+          v(m(S), {
+            src: C.value,
+            alt: t.alt,
+            fit: "contain",
+            "frame-border": 0,
+            style: H({ transform: `rotate(${d.value}deg) scale(${o.value})` })
+          }, 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", "style"])
+        ]),
+        _: 3
+      }, 8, ["show", "z-index", "state-class", "navigation-button-margin", "show-navigation", "show-action-bar"])) : N("", !0)
     ], 64));
   }
 });
 export {
-  We as default
+  Pe as default
 };

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

@@ -0,0 +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}