@nmorph/nmorph-ui-kit 2.2.51 → 2.2.52

package/dist/components/data/nmorph-media-gallery/NmorphMediaGallery.vue.js

@@ -0,0 +1,298 @@
+import './NmorphMediaGallery.css';
+import { defineComponent as de, ref as f, computed as i, watch as C, onBeforeUnmount as ce, openBlock as p, createBlock as y, withCtx as r, createElementVNode as g, unref as t, normalizeStyle as ve, createElementBlock as T, createCommentVNode as L, withModifiers as me, createVNode as l } from "vue";
+import { useModifiers as fe } from "../../../utils/create-modifiers.js";
+import pe from "../nmorph-preview-portal/NmorphPreviewPortal.vue.js";
+/* empty css                                                */
+import he from "../nmorph-image/NmorphImage.vue.js";
+/* empty css                               */
+import k from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+/* empty css                                      */
+import w from "../../basic/nmorph-button/NmorphButton.vue.js";
+/* empty css                                          */
+import _e from "../../../assets/icons/pause.svg.js";
+import ye from "../../../assets/icons/play.svg.js";
+import ge from "../../../assets/icons/rotate-right.svg.js";
+import ke from "../../../assets/icons/rotate-left.svg.js";
+import Ie from "../../../assets/icons/zoom-in.svg.js";
+import xe from "../../../assets/icons/zoom-out.svg.js";
+import we from "../../../assets/icons/enlarge.svg.js";
+import Ne from "../../../assets/icons/shrink.svg.js";
+const be = { class: "nmorph-media-gallery__stage" }, Pe = ["src", "poster", "controls", "muted", "playsinline", "preload", "title"], Ce = ["aria-label"], Ve = { class: "nmorph-media-gallery__action-element" }, Ee = { class: "nmorph-media-gallery__action-element" }, He = { class: "nmorph-media-gallery__action-element" }, Be = { class: "nmorph-media-gallery__action-element" }, Le = { class: "nmorph-media-gallery__action-element" }, Fe = 45, Je = /* @__PURE__ */ de({
+  __name: "NmorphMediaGallery",
+  props: {
+    modelValue: { type: Boolean, default: !1 },
+    items: {},
+    initialIndex: { default: 0 },
+    activeIndex: { default: void 0 },
+    zIndex: { default: void 0 },
+    showNavigationButtons: { type: Boolean, default: !0 },
+    showActionBar: { type: Boolean, default: !0 },
+    imageFit: { default: "contain" },
+    videoFit: { default: "contain" }
+  },
+  emits: ["update:model-value", "update:active-index", "close", "change"],
+  setup(X, { emit: Y }) {
+    const o = X, N = Y, c = f(o.modelValue), I = f(0), v = f(null), b = f(null), u = f(!1), d = f(1), s = f(0), h = f(null), m = i(() => o.items || []), F = i(() => m.value.length > 1), z = i(() => o.showNavigationButtons && F.value), x = (e) => {
+      const n = m.value.length - 1;
+      return n < 0 || !Number.isFinite(e) || e < 0 ? 0 : e > n ? n : e;
+    }, _ = i(() => x(I.value)), a = i(() => m.value[_.value]), M = i(() => a.value?.kind === "image"), V = i(() => a.value?.kind === "video"), U = i(
+      () => a.value?.kind === "video" ? a.value.controls !== !1 : !1
+    ), Z = i(() => a.value?.kind === "video" ? a.value.muted === !0 : !1), G = i(
+      () => a.value?.kind === "video" ? a.value.playsinline !== !1 : !0
+    ), W = i(
+      () => a.value?.kind === "video" && a.value.preload || "metadata"
+    ), R = i(
+      () => a.value?.kind === "video" && a.value.name || "video"
+    ), j = i(
+      () => fe({
+        "nmorph-media-gallery": [
+          c.value && "opened",
+          M.value && "image",
+          V.value && "video",
+          u.value && V.value && "video-playing",
+          o.imageFit === "cover" && M.value && "image-cover",
+          o.videoFit === "cover" && V.value && "video-cover"
+        ]
+      })
+    ), q = i(() => `rotate(${s.value}deg) scale(${d.value})`);
+    C(
+      () => o.modelValue,
+      (e) => {
+        c.value = e;
+      }
+    ), C(
+      () => o.activeIndex,
+      (e) => {
+        typeof e == "number" && (I.value = x(e));
+      },
+      { immediate: !0 }
+    ), C(
+      () => [o.initialIndex, m.value.length],
+      () => {
+        typeof o.activeIndex != "number" && (I.value = x(o.initialIndex));
+      },
+      { immediate: !0 }
+    );
+    const E = () => {
+      !v.value || v.value === b.value || (v.value.pause(), u.value = !1, b.value = v.value);
+    }, J = () => {
+      d.value = 1, s.value = 0;
+    }, $ = (e) => {
+      if (!m.value.length) return;
+      const n = x(e);
+      if (n === _.value) return;
+      E(), u.value = !1, I.value = n, J(), N("update:active-index", n);
+      const P = m.value[n];
+      P && N("change", P, n);
+    }, H = () => {
+      const e = m.value.length;
+      e && $(_.value === 0 ? e - 1 : _.value - 1);
+    }, B = () => {
+      const e = m.value.length;
+      e && $(_.value === e - 1 ? 0 : _.value + 1);
+    }, K = () => {
+      c.value && (E(), c.value = !1, N("update:model-value", !1), N("close"));
+    }, Q = () => {
+      s.value = s.value + 90, s.value >= 360 && (s.value = 0);
+    }, ee = () => {
+      s.value = s.value - 90, s.value <= -360 && (s.value = 0);
+    }, ae = () => {
+      d.value = parseFloat(Math.min(d.value + 0.2, 4).toFixed(3));
+    }, te = () => {
+      d.value = parseFloat(Math.max(d.value - 0.2, 0.2).toFixed(3));
+    }, oe = () => {
+      d.value = 1;
+    }, le = async () => {
+      if (v.value) {
+        if (u.value) {
+          v.value.pause();
+          return;
+        }
+        try {
+          await v.value.play();
+        } catch {
+          u.value = !1;
+        }
+      }
+    }, ne = () => {
+      u.value = !0, b.value = null;
+    }, ie = () => {
+      u.value = !1;
+    }, re = () => {
+      u.value = !1;
+    }, ue = () => {
+      u.value = !1;
+    }, S = (e) => {
+      if (c.value && !(e.altKey || e.ctrlKey || e.metaKey || e.shiftKey)) {
+        if (e.key === "Escape") {
+          e.preventDefault(), K();
+          return;
+        }
+        F.value && (e.key === "ArrowLeft" && (e.preventDefault(), H()), e.key === "ArrowRight" && (e.preventDefault(), B()));
+      }
+    }, se = () => {
+      typeof document > "u" || document.addEventListener("keydown", S);
+    }, D = () => {
+      typeof document > "u" || document.removeEventListener("keydown", S);
+    };
+    C(
+      c,
+      (e) => {
+        e ? (se(), b.value = null, I.value = x(
+          typeof o.activeIndex == "number" ? o.activeIndex : o.initialIndex
+        )) : (E(), u.value = !1, D());
+      },
+      { immediate: !0 }
+    ), ce(D);
+    const A = (e) => {
+      h.value = { x: e.clientX, y: e.clientY };
+    }, O = (e) => {
+      if (!h.value || !z.value) {
+        h.value = null;
+        return;
+      }
+      const n = e.clientX - h.value.x, P = e.clientY - h.value.y;
+      h.value = null, !(Math.abs(n) < Fe || Math.abs(n) < Math.abs(P) * 1.2) && (n > 0 ? H() : B());
+    };
+    return (e, n) => c.value ? (p(), y(pe, {
+      key: 0,
+      show: c.value,
+      "z-index": o.zIndex,
+      "state-class": j.value,
+      "content-class": "nmorph-media-gallery__content",
+      "left-class": "nmorph-media-gallery__left",
+      "right-class": "nmorph-media-gallery__right",
+      "actions-class": "nmorph-media-gallery__actions",
+      "show-navigation": z.value,
+      "show-action-bar": o.showActionBar && a.value?.kind === "image",
+      onClose: K,
+      onPrevious: H,
+      onNext: B
+    }, {
+      actions: r(() => [
+        g("div", Ve, [
+          l(t(w), { onClick: Q }, {
+            default: r(() => [
+              l(t(k), null, {
+                default: r(() => [
+                  l(t(ge))
+                ]),
+                _: 1
+              })
+            ]),
+            _: 1
+          })
+        ]),
+        g("div", Ee, [
+          l(t(w), { onClick: ee }, {
+            default: r(() => [
+              l(t(k), null, {
+                default: r(() => [
+                  l(t(ke))
+                ]),
+                _: 1
+              })
+            ]),
+            _: 1
+          })
+        ]),
+        g("div", He, [
+          l(t(w), { onClick: ae }, {
+            default: r(() => [
+              l(t(k), null, {
+                default: r(() => [
+                  l(t(Ie))
+                ]),
+                _: 1
+              })
+            ]),
+            _: 1
+          })
+        ]),
+        g("div", Be, [
+          l(t(w), { onClick: te }, {
+            default: r(() => [
+              l(t(k), null, {
+                default: r(() => [
+                  l(t(xe))
+                ]),
+                _: 1
+              })
+            ]),
+            _: 1
+          })
+        ]),
+        g("div", Le, [
+          l(t(w), {
+            disabled: d.value === 1,
+            onClick: oe
+          }, {
+            default: r(() => [
+              l(t(k), null, {
+                default: r(() => [
+                  d.value < 1 ? (p(), y(t(we), { key: 0 })) : (p(), y(t(Ne), { key: 1 }))
+                ]),
+                _: 1
+              })
+            ]),
+            _: 1
+          }, 8, ["disabled"])
+        ])
+      ]),
+      default: r(() => [
+        g("div", be, [
+          a.value?.kind === "image" ? (p(), y(t(he), {
+            key: 0,
+            src: a.value.src,
+            alt: a.value.alt || a.value.name || "",
+            title: a.value.name,
+            fit: o.imageFit,
+            "frame-border": 0,
+            style: ve({ transform: q.value }),
+            onPointerdown: A,
+            onPointerup: O
+          }, null, 8, ["src", "alt", "title", "fit", "style"])) : a.value?.kind === "video" ? (p(), T("video", {
+            key: 1,
+            ref_key: "currentVideoRef",
+            ref: v,
+            class: "nmorph-media-gallery__video",
+            src: a.value.src,
+            poster: a.value.poster || void 0,
+            controls: U.value,
+            muted: Z.value,
+            playsinline: G.value,
+            preload: W.value,
+            title: a.value.name,
+            onPointerdown: A,
+            onPointerup: O,
+            onPlay: ne,
+            onPause: ie,
+            onEnded: re,
+            onError: ue
+          }, null, 40, Pe)) : L("", !0),
+          a.value?.kind === "video" ? (p(), T("button", {
+            key: 2,
+            class: "nmorph-media-gallery__play",
+            type: "button",
+            "aria-label": u.value ? `Pause ${R.value}` : `Play ${R.value}`,
+            onClick: me(le, ["stop"])
+          }, [
+            l(t(k), {
+              size: "medium",
+              color: "var(--nmorph-contrast-text-color)"
+            }, {
+              default: r(() => [
+                u.value ? (p(), y(t(_e), { key: 0 })) : (p(), y(t(ye), { key: 1 }))
+              ]),
+              _: 1
+            })
+          ], 8, Ce)) : L("", !0)
+        ])
+      ]),
+      _: 1
+    }, 8, ["show", "z-index", "state-class", "show-navigation", "show-action-bar"])) : L("", !0);
+  }
+});
+export {
+  Je as default
+};

package/dist/components/data/nmorph-media-gallery/NmorphMediaGallery.vue3.js

@@ -0,0 +1,6 @@
+import './NmorphMediaGallery.css';
+import o from "./NmorphMediaGallery.vue.js";
+/* empty css                        */
+export {
+  o as default
+};

package/dist/components/data/nmorph-preview-portal/NmorphPreviewPortal.css

@@ -0,0 +1 @@
+.nmorph-preview-portal{display:contents}.nmorph-preview-portal .nmorph-preview-portal__content{--nmorph-preview-portal-content-width: min( calc(100vw - 96px) , 960px);--nmorph-preview-portal-content-height: min( calc(100vh - 180px) , 720px);position:absolute;top:50%;left:50%;display:flex;justify-content:center;align-items:center;width:var(--nmorph-preview-portal-content-width);height:var(--nmorph-preview-portal-content-height);transform:translate(-50%,-50%);transition:var(--transition-04) opacity ease-in-out;pointer-events:none}.nmorph-preview-portal .nmorph-preview-portal__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-preview-portal .nmorph-button__content{box-shadow:none}.nmorph-preview-portal .nmorph-preview-portal__left,.nmorph-preview-portal .nmorph-preview-portal__right{z-index:2}.nmorph-preview-portal .nmorph-preview-portal__left{position:absolute;top:50%;left:-100%;transform:rotate(90deg) translate(-50%);transition:ease-in-out left var(--transition-03)}.nmorph-preview-portal .nmorph-preview-portal__right{position:absolute;top:50%;right:-100%;transform:rotate(270deg) translate(50%);transition:ease-in-out right var(--transition-03)}.nmorph-preview-portal.nmorph-preview-portal--opened .nmorph-preview-portal__actions{bottom:50px}.nmorph-preview-portal.nmorph-preview-portal--opened{--nmorph-preview-portal-btn-margin: 20px}.nmorph-preview-portal.nmorph-preview-portal--opened .nmorph-preview-portal__left{left:var(--nmorph-preview-portal-btn-margin)}.nmorph-preview-portal.nmorph-preview-portal--opened .nmorph-preview-portal__right{right:var(--nmorph-preview-portal-btn-margin)}

package/dist/components/data/nmorph-preview-portal/NmorphPreviewPortal.vue.js

@@ -0,0 +1,110 @@
+import './NmorphPreviewPortal.css';
+import { defineComponent as k, computed as u, openBlock as r, createBlock as B, Teleport as $, createElementVNode as f, normalizeStyle as N, normalizeClass as a, createVNode as o, unref as s, withCtx as l, renderSlot as v, createElementBlock as m, createCommentVNode as i } from "vue";
+import { createCssSizeVariables as x } from "../../../utils/common.js";
+import z from "../../others/nmorph-overlay/NmorphOverlay.vue.js";
+/* empty css                                             */
+import c from "../../basic/nmorph-button/NmorphButton.vue.js";
+/* empty css                                          */
+import w from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+/* empty css                                      */
+import C from "../../../assets/icons/chevron-down.svg.js";
+const D = /* @__PURE__ */ k({
+  __name: "NmorphPreviewPortal",
+  props: {
+    show: { type: Boolean },
+    zIndex: { default: void 0 },
+    rootClass: { default: "" },
+    stateClass: { default: "" },
+    contentClass: { default: "" },
+    leftClass: { default: "" },
+    rightClass: { default: "" },
+    actionsClass: { default: "" },
+    navigationButtonMargin: { default: void 0 },
+    showNavigation: { type: Boolean, default: !1 },
+    showActionBar: { type: Boolean, default: !1 }
+  },
+  emits: ["close", "previous", "next"],
+  setup(h, { emit: _ }) {
+    const e = h, n = _, y = u(() => [
+      "nmorph-preview-portal",
+      e.rootClass,
+      e.stateClass,
+      e.show && "nmorph-preview-portal--opened"
+    ]), g = u(
+      () => x({
+        "--nmorph-preview-portal-btn-margin": e.navigationButtonMargin
+      })
+    );
+    return (d, t) => e.show ? (r(), B($, {
+      key: 0,
+      to: "body"
+    }, [
+      f("div", {
+        class: a(y.value),
+        style: N(g.value)
+      }, [
+        o(s(z), {
+          show: e.show,
+          "z-index": e.zIndex,
+          "disabled-teleport": "",
+          onOnOutsideClick: t[2] || (t[2] = (p) => n("close")),
+          onOnEscapeKeydown: t[3] || (t[3] = (p) => n("close"))
+        }, {
+          default: l(() => [
+            f("div", {
+              class: a(["nmorph-preview-portal__content", e.contentClass])
+            }, [
+              v(d.$slots, "default")
+            ], 2),
+            e.showNavigation ? (r(), m("div", {
+              key: 0,
+              class: a(["nmorph-preview-portal__left", e.leftClass])
+            }, [
+              o(s(c), {
+                onClick: t[0] || (t[0] = (p) => n("previous"))
+              }, {
+                default: l(() => [
+                  o(s(w), null, {
+                    default: l(() => [
+                      o(s(C))
+                    ]),
+                    _: 1
+                  })
+                ]),
+                _: 1
+              })
+            ], 2)) : i("", !0),
+            e.showNavigation ? (r(), m("div", {
+              key: 1,
+              class: a(["nmorph-preview-portal__right", e.rightClass])
+            }, [
+              o(s(c), {
+                onClick: t[1] || (t[1] = (p) => n("next"))
+              }, {
+                default: l(() => [
+                  o(s(w), null, {
+                    default: l(() => [
+                      o(s(C))
+                    ]),
+                    _: 1
+                  })
+                ]),
+                _: 1
+              })
+            ], 2)) : i("", !0),
+            e.showActionBar ? (r(), m("div", {
+              key: 2,
+              class: a(["nmorph-preview-portal__actions", e.actionsClass])
+            }, [
+              v(d.$slots, "actions")
+            ], 2)) : i("", !0)
+          ]),
+          _: 3
+        }, 8, ["show", "z-index"])
+      ], 6)
+    ])) : i("", !0);
+  }
+});
+export {
+  D as default
+};

package/dist/components/data/nmorph-preview-portal/NmorphPreviewPortal.vue3.js

@@ -0,0 +1,6 @@
+import './NmorphPreviewPortal.css';
+import o from "./NmorphPreviewPortal.vue.js";
+/* empty css                         */
+export {
+  o as default
+};

package/dist/components/data/nmorph-video-preview/NmorphVideoPreview.vue.js

@@ -57,7 +57,8 @@ const pe = ["src", "poster", "controls", "muted", "playsinline", "preload"], me
     errorText: { default: "" },
     showDefaultActions: { type: Boolean, default: !0 },
     showPreviewAction: { type: Boolean, default: !0 },
-    showFullscreenAction: { type: Boolean, default: !0 }
+    showFullscreenAction: { type: Boolean, default: !0 },
+    previewMode: { default: "internal" }
   },
   emits: ["play", "pause", "open", "preview", "fullscreen", "download", "error"],
   setup(P, { expose: C, emit: N }) {
@@ -84,8 +85,8 @@ const pe = ["src", "poster", "controls", "muted", "playsinline", "preload"], me
         "--nmorph-video-preview-width": e.width,
         "--nmorph-video-preview-height": e.height
       })
-    ), I = s(() => Object.fromEntries(Object.entries(h).filter(([o]) => o !== "class" && o !== "style"))), z = s(() => [E.value, h.class]), D = s(() => [F.value, h.style]), x = () => c("open"), M = () => c("download"), R = () => {
-      f.value = !0, c("preview");
+    ), I = s(() => Object.fromEntries(Object.entries(h).filter(([o]) => o !== "class" && o !== "style"))), z = s(() => [E.value, h.class]), D = s(() => [F.value, h.style]), M = () => c("open"), x = () => c("download"), R = () => {
+      e.previewMode === "internal" && (f.value = !0), c("preview");
     }, B = () => {
       f.value = !1;
     }, T = async () => {
@@ -227,7 +228,7 @@ const pe = ["src", "poster", "controls", "muted", "playsinline", "preload"], me
               rel: "noopener noreferrer",
               class: "nmorph-video-preview__action-link",
               "aria-label": `Open ${e.name || "video"}`,
-              onClick: x
+              onClick: M
             }, [
               l(r(u), { size: "small" }, {
                 default: d(() => [
@@ -242,7 +243,7 @@ const pe = ["src", "poster", "controls", "muted", "playsinline", "preload"], me
               download: e.name,
               class: "nmorph-video-preview__action-link",
               "aria-label": `Download ${e.name || "video"}`,
-              onClick: M
+              onClick: x
             }, [
               l(r(u), { size: "small" }, {
                 default: d(() => [