@nmorph/nmorph-ui-kit 3.0.1 → 3.0.3

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

@@ -1,22 +1,22 @@
 import './NmorphMediaGallery.css';
-import { defineComponent as He, ref as c, computed as n, watch as N, onBeforeUnmount as Se } from "vue";
-import { useModifiers as X } from "../../../utils/create-modifiers.js";
-import { createCssSizeVariables as Ae } from "../../../utils/common.js";
-import Te from "../nmorph-preview-portal/NmorphPreviewPortal.vue.js";
-import Pe from "../nmorph-image/NmorphImage.vue.js";
-import Me from "../../../assets/icons/full-screen.svg.js";
-import Ve from "../../../assets/icons/eye.svg.js";
-import Le from "../../basic/nmorph-icon/NmorphIcon.vue.js";
-import Re from "../../basic/nmorph-button/NmorphButton.vue.js";
-import De from "../../../assets/icons/zoom-out.svg.js";
-import _e from "../../../assets/icons/zoom-in.svg.js";
-import Ee from "../../../assets/icons/shrink.svg.js";
-import ze from "../../../assets/icons/rotate-right.svg.js";
-import Ce from "../../../assets/icons/rotate-left.svg.js";
-import Ke from "../../../assets/icons/play.svg.js";
-import $e from "../../../assets/icons/enlarge.svg.js";
-import Oe from "../../../assets/icons/download.svg.js";
-const Y = 45, dt = /* @__PURE__ */ He({
+import { defineComponent as Ae, ref as c, computed as a, watch as F, onBeforeUnmount as Re } from "vue";
+import { useModifiers as Y } from "../../../utils/create-modifiers.js";
+import { createCssSizeVariables as Pe } from "../../../utils/common.js";
+import Ve from "../nmorph-preview-portal/NmorphPreviewPortal.vue.js";
+import Me from "../nmorph-image/NmorphImage.vue.js";
+import Le from "../../../assets/icons/full-screen.svg.js";
+import De from "../../../assets/icons/eye.svg.js";
+import _e from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+import Ce from "../../basic/nmorph-button/NmorphButton.vue.js";
+import Ee from "../../../assets/icons/zoom-out.svg.js";
+import ze from "../../../assets/icons/zoom-in.svg.js";
+import Ke from "../../../assets/icons/shrink.svg.js";
+import $e from "../../../assets/icons/rotate-right.svg.js";
+import Oe from "../../../assets/icons/rotate-left.svg.js";
+import Ze from "../../../assets/icons/play.svg.js";
+import Ue from "../../../assets/icons/enlarge.svg.js";
+import Xe from "../../../assets/icons/download.svg.js";
+const G = 45, ft = /* @__PURE__ */ Ae({
   __name: "NmorphMediaGallery",
   props: {
     modelValue: { type: Boolean, required: !1, default: !1 },
@@ -35,6 +35,10 @@ const Y = 45, dt = /* @__PURE__ */ He({
     showTriggerFullscreenAction: { type: Boolean, required: !1, default: !0 },
     showTriggerDownloadAction: { type: Boolean, required: !1, default: !0 },
     showTriggerPlayButton: { type: Boolean, required: !1, default: !0 },
+    triggerImageFit: { type: String, required: !1, default: "cover" },
+    triggerVideoFit: { type: String, required: !1, default: "cover" },
+    triggerItemClass: { type: Function, required: !1 },
+    triggerItemStyle: { type: Function, required: !1 },
     showNavigationButtons: { type: Boolean, required: !1, default: !0 },
     showActionBar: { type: Boolean, required: !1, default: !0 },
     showFileName: { type: Boolean, required: !1, default: !0 },
@@ -45,105 +49,115 @@ const Y = 45, dt = /* @__PURE__ */ He({
     videoFit: { type: String, required: !1, default: "contain" }
   },
   emits: ["update:model-value", "update:active-index", "close", "change", "download", "fullscreen"],
-  setup(G, { expose: W, emit: j }) {
-    W();
-    const o = G, a = j, v = c(o.modelValue), m = c(0), h = c(null), F = c({}), y = c(null), l = c(!1), f = c(1), i = c(0), p = c(null), u = n(() => o.items || []), x = n(() => u.value.length > 1), V = n(() => o.showNavigationButtons && x.value), g = (e) => {
-      const t = u.value.length - 1;
+  setup(W, { expose: j, emit: J }) {
+    j();
+    const r = W, l = J, v = c(r.modelValue), m = c(0), h = c(null), q = c({}), y = c(null), i = c(!1), f = c(1), u = c(0), g = c(null), I = c(!1), s = a(() => r.items || []), x = a(() => s.value.length > 1), M = a(() => r.showNavigationButtons && x.value), p = (e) => {
+      const t = s.value.length - 1;
       return t < 0 || !Number.isFinite(e) || e < 0 ? 0 : e > t ? t : e;
-    }, d = n(() => g(m.value)), r = n(() => u.value[d.value]), B = n(() => r.value?.kind === "image"), I = n(() => r.value?.kind === "video"), L = n(
-      () => r.value?.kind === "video" ? r.value.controls !== !1 : !1
-    ), J = n(() => r.value?.kind === "video" ? r.value.muted === !0 : !1), Q = n(
-      () => r.value?.kind === "video" ? r.value.playsinline !== !1 : !0
-    ), ee = n(
-      () => r.value?.kind === "video" && r.value.preload || "metadata"
-    ), te = n(
-      () => r.value?.kind === "video" && r.value.name || "video"
-    ), R = n(() => r.value?.name || ""), oe = n(() => o.showFileName ? R.value : ""), D = n(() => r.value?.downloadHref || ""), _ = n(() => o.showFileActions && I.value && !L.value), re = n(
-      () => o.showFileActions && (_.value || !!D.value)
-    ), ne = n(
-      () => X({
+    }, d = a(() => p(m.value)), o = a(() => s.value[d.value]), B = a(() => o.value?.kind === "image"), w = a(() => o.value?.kind === "video"), L = a(
+      () => o.value?.kind === "video" ? o.value.controls !== !1 : !1
+    ), Q = a(() => o.value?.kind === "video" ? o.value.muted === !0 : !1), ee = a(
+      () => o.value?.kind === "video" ? o.value.playsinline !== !1 : !0
+    ), te = a(
+      () => o.value?.kind === "video" && o.value.preload || "metadata"
+    ), re = a(
+      () => o.value?.kind === "video" && o.value.name || "video"
+    ), D = a(() => o.value?.name || ""), oe = a(() => r.showFileName ? D.value : ""), _ = a(() => o.value?.downloadHref || ""), C = a(() => r.showFileActions && w.value && !L.value), ae = a(
+      () => r.showFileActions && (C.value || !!_.value)
+    ), ne = a(
+      () => Y({
         "nmorph-media-gallery": [
           v.value && "opened",
           B.value && "image",
-          I.value && "video",
-          l.value && I.value && "video-playing",
-          o.imageFit === "cover" && B.value && "image-cover",
-          o.videoFit === "cover" && I.value && "video-cover"
+          w.value && "video",
+          i.value && w.value && "video-playing",
+          r.imageFit === "cover" && B.value && "image-cover",
+          r.videoFit === "cover" && w.value && "video-cover"
         ]
       })
-    ), ae = n(() => `rotate(${i.value}deg) scale(${f.value})`), le = n(
-      () => Ae({
-        "--nmorph-private-media-gallery-trigger-height": o.height
+    ), le = a(() => `rotate(${u.value}deg) scale(${f.value})`), ie = a(() => ({
+      ...Pe({
+        "--nmorph-private-media-gallery-trigger-height": r.height
+      }),
+      "--nmorph-private-media-gallery-trigger-video-fit": r.triggerVideoFit
+    })), ue = a(
+      () => Y({
+        "nmorph-media-gallery__trigger": [r.height !== void 0 && "fixed-height"]
       })
-    ), ie = n(
-      () => X({
-        "nmorph-media-gallery__trigger": [o.height !== void 0 && "fixed-height"]
-      })
-    ), q = (e) => {
+    ), S = (e) => {
       if (e === void 0 || Number.isNaN(e) || e < 0) return "";
       if (e === 0) return "0 B";
-      const t = ["B", "KB", "MB", "GB", "TB"], s = Math.min(Math.floor(Math.log(e) / Math.log(1024)), t.length - 1), M = e / 1024 ** s, ke = M >= 10 || s === 0 || Number.isInteger(M) ? 0 : 1;
-      return `${M.toFixed(ke)} ${t[s]}`;
-    }, ue = n(() => o.showFileSize ? q(r.value?.size) : ""), se = (e) => e.name || "", de = (e, t) => e.name || `${e.kind === "video" ? "Video" : "Image"} ${t + 1}`, ce = (e) => q(e.size), E = (e) => e.downloadHref || "", z = (e) => o.showTriggerPreviewAction && e.kind === "video", C = (e) => o.showTriggerFullscreenAction && e.kind === "video", K = (e) => o.showTriggerDownloadAction && !!E(e), ve = (e) => o.showTriggerActions && (z(e) || C(e) || K(e)), fe = (e, t) => {
-      F.value[e] = t instanceof HTMLVideoElement ? t : null;
+      const t = ["B", "KB", "MB", "GB", "TB"], n = Math.min(Math.floor(Math.log(e) / Math.log(1024)), t.length - 1), V = e / 1024 ** n, He = V >= 10 || n === 0 || Number.isInteger(V) ? 0 : 1;
+      return `${V.toFixed(He)} ${t[n]}`;
+    }, se = a(() => r.showFileSize ? S(o.value?.size) : ""), de = (e) => e.name || "", ce = (e, t) => e.name || `${e.kind === "video" ? "Video" : "Image"} ${t + 1}`, ve = (e) => S(e.size), E = (e) => e.downloadHref || "", z = (e) => r.showTriggerPreviewAction && e.kind === "video", K = (e) => r.showTriggerFullscreenAction && e.kind === "video", $ = (e) => r.showTriggerDownloadAction && !!E(e), fe = (e) => r.showTriggerActions && (z(e) || K(e) || $(e)), me = (e, t) => {
+      q.value[e] = t instanceof HTMLVideoElement ? t : null;
+    }, ge = (e, t) => [
+      e.itemClass,
+      r.triggerItemClass?.(e, t)
+    ], pe = (e, t) => {
+      const n = {
+        ...e.itemStyle || {},
+        ...r.triggerItemStyle?.(e, t) || {}
+      };
+      return typeof e.aspectRatio == "number" && Number.isFinite(e.aspectRatio) && e.aspectRatio > 0 && (n.aspectRatio = String(e.aspectRatio)), n;
     };
-    N(
-      () => o.modelValue,
+    F(
+      () => r.modelValue,
       (e) => {
         v.value = e;
       }
-    ), N(
-      () => o.activeIndex,
+    ), F(
+      () => r.activeIndex,
       (e) => {
-        typeof e == "number" && (m.value = g(e));
+        typeof e == "number" && (m.value = p(e));
       },
       { immediate: !0 }
-    ), N(
-      () => [o.initialIndex, u.value.length],
+    ), F(
+      () => [r.initialIndex, s.value.length],
       () => {
-        typeof o.activeIndex != "number" && (m.value = g(o.initialIndex));
+        typeof r.activeIndex != "number" && (m.value = p(r.initialIndex));
       },
       { immediate: !0 }
-    ), N(
-      () => [r.value?.kind, r.value?.src, d.value],
+    ), F(
+      () => [o.value?.kind, o.value?.src, d.value],
       () => {
-        l.value = !1, y.value = null;
+        i.value = !1, y.value = null;
       }
     );
-    const w = () => {
-      !h.value || h.value === y.value || (h.value.pause(), l.value = !1, y.value = h.value);
+    const N = () => {
+      !h.value || h.value === y.value || (h.value.pause(), i.value = !1, y.value = h.value);
     }, b = () => {
-      f.value = 1, i.value = 0;
-    }, k = (e) => {
-      if (!u.value.length) return;
-      const t = g(e);
+      f.value = 1, u.value = 0;
+    }, T = (e) => {
+      if (!s.value.length) return;
+      const t = p(e);
       if (t === d.value) return;
-      w(), l.value = !1, m.value = t, b(), a("update:active-index", t);
-      const s = u.value[t];
-      s && a("change", s, t);
+      N(), i.value = !1, m.value = t, b(), l("update:active-index", t);
+      const n = s.value[t];
+      n && l("change", n, t);
+    }, k = () => {
+      const e = s.value.length;
+      e && T(d.value === 0 ? e - 1 : d.value - 1);
     }, H = () => {
-      const e = u.value.length;
-      e && k(d.value === 0 ? e - 1 : d.value - 1);
-    }, S = () => {
-      const e = u.value.length;
-      e && k(d.value === e - 1 ? 0 : d.value + 1);
-    }, me = (e) => {
-      if (!u.value.length) return;
-      const t = g(e);
-      w(), l.value = !1, m.value = t, b(), v.value = !0, a("update:model-value", !0), a("update:active-index", t);
-      const s = u.value[t];
-      s && a("change", s, t);
-    }, $ = () => {
-      v.value && (w(), v.value = !1, a("update:model-value", !1), a("close"));
-    }, pe = () => {
-      i.value = i.value + 90, i.value >= 360 && (i.value = 0);
-    }, ge = () => {
-      i.value = i.value - 90, i.value <= -360 && (i.value = 0);
-    }, he = () => {
-      f.value = parseFloat(Math.min(f.value + 0.2, 4).toFixed(3));
+      const e = s.value.length;
+      e && T(d.value === e - 1 ? 0 : d.value + 1);
+    }, he = (e) => {
+      if (!s.value.length) return;
+      const t = p(e);
+      N(), i.value = !1, m.value = t, b(), I.value = !0, v.value = !0, l("update:model-value", !0), l("update:active-index", t);
+      const n = s.value[t];
+      n && l("change", n, t);
+    }, O = () => {
+      v.value && (N(), v.value = !1, l("update:model-value", !1), l("close"));
     }, ye = () => {
-      f.value = parseFloat(Math.max(f.value - 0.2, 0.2).toFixed(3));
+      u.value = u.value + 90, u.value >= 360 && (u.value = 0);
     }, Ie = () => {
+      u.value = u.value - 90, u.value <= -360 && (u.value = 0);
+    }, we = () => {
+      f.value = parseFloat(Math.min(f.value + 0.2, 4).toFixed(3));
+    }, Ne = () => {
+      f.value = parseFloat(Math.max(f.value - 0.2, 0.2).toFixed(3));
+    }, Fe = () => {
       f.value = 1;
     }, A = async (e) => {
       if (e)
@@ -156,83 +170,90 @@ const Y = 45, dt = /* @__PURE__ */ He({
           e.webkitEnterFullscreen?.();
         } catch {
         }
-    }, we = async () => {
-      !r.value || r.value.kind !== "video" || (a("fullscreen", r.value, d.value), await A(h.value));
-    }, Ne = async (e, t) => {
-      e.kind === "video" && (a("fullscreen", e, t), await A(F.value[t]));
-    }, O = (e, t) => {
-      a("download", e, t);
-    }, Fe = () => {
-      r.value && O(r.value, d.value);
-    }, xe = () => {
-      l.value = !0, y.value = null;
+    }, qe = async () => {
+      !o.value || o.value.kind !== "video" || (l("fullscreen", o.value, d.value), await A(h.value));
+    }, xe = async (e, t) => {
+      e.kind === "video" && (l("fullscreen", e, t), await A(q.value[t]));
+    }, Z = (e, t) => {
+      l("download", e, t);
     }, Be = () => {
-      l.value = !1;
-    }, qe = () => {
-      l.value = !1;
+      o.value && Z(o.value, d.value);
+    }, Se = () => {
+      i.value = !0, y.value = null;
     }, be = () => {
-      l.value = !1;
-    }, T = (e) => {
+      i.value = !1;
+    }, Te = () => {
+      i.value = !1;
+    }, ke = () => {
+      i.value = !1;
+    }, R = (e) => {
       if (v.value && !(e.altKey || e.ctrlKey || e.metaKey || e.shiftKey)) {
         if (e.key === "Escape") {
-          e.preventDefault(), $();
+          e.preventDefault(), O();
           return;
         }
-        x.value && (e.key === "ArrowLeft" && (e.preventDefault(), H()), e.key === "ArrowRight" && (e.preventDefault(), S()));
+        x.value && (e.key === "ArrowLeft" && (e.preventDefault(), k()), e.key === "ArrowRight" && (e.preventDefault(), H()));
       }
-    }, Z = () => {
-      typeof document > "u" || document.addEventListener("keydown", T);
+    }, U = () => {
+      typeof document > "u" || document.addEventListener("keydown", R);
     }, P = () => {
-      typeof document > "u" || document.removeEventListener("keydown", T);
+      typeof document > "u" || document.removeEventListener("keydown", R);
     };
-    N(
+    F(
       v,
       (e) => {
-        e ? (Z(), y.value = null, m.value = g(
-          typeof o.activeIndex == "number" ? o.activeIndex : o.initialIndex
-        )) : (w(), l.value = !1, P());
+        if (e) {
+          if (U(), y.value = null, I.value) {
+            I.value = !1;
+            return;
+          }
+          m.value = p(
+            typeof r.activeIndex == "number" ? r.activeIndex : r.initialIndex
+          );
+        } else
+          I.value = !1, N(), i.value = !1, P();
       },
       { immediate: !0 }
-    ), Se(P);
-    const U = { SWIPE_THRESHOLD: Y, props: o, emit: a, open: v, currentIndex: m, currentVideoRef: h, triggerVideoRefs: F, pausedVideoRef: y, videoPlaying: l, scaleLevel: f, rotateLevel: i, pointerStart: p, sourceList: u, multipleItems: x, showNavigation: V, getClampedIndex: g, resolvedCurrentIndex: d, currentItem: r, isImage: B, isVideo: I, videoControls: L, videoMuted: J, videoPlaysinline: Q, videoPreload: ee, currentVideoName: te, currentItemName: R, currentName: oe, currentDownloadHref: D, showVideoFullscreenAction: _, showFileActions: re, modifiers: ne, imageTransform: ae, triggerStyle: le, triggerModifiers: ie, formatSize: q, currentSize: ue, getItemName: se, getItemLabel: de, getItemSize: ce, getItemDownloadHref: E, showTriggerPreviewActionForItem: z, showTriggerFullscreenActionForItem: C, showTriggerDownloadActionForItem: K, showTriggerActionsForItem: ve, setTriggerVideoRef: fe, pauseCurrentVideo: w, resetImageTransform: b, setCurrentIndex: k, previousHandler: H, nextHandler: S, openPreviewAt: me, closeHandler: $, rotateRight: pe, rotateLeft: ge, zoomIn: he, zoomOut: ye, toggleNormalSize: Ie, requestVideoFullscreen: A, fullscreenHandler: we, triggerFullscreenHandler: Ne, downloadItemHandler: O, downloadHandler: Fe, videoPlayHandler: xe, videoPauseHandler: Be, videoEndedHandler: qe, videoErrorHandler: be, keyboardNavigationHandler: T, addKeyboardNavigationListener: Z, removeKeyboardNavigationListener: P, pointerDownHandler: (e) => {
-      p.value = { x: e.clientX, y: e.clientY };
+    ), Re(P);
+    const X = { SWIPE_THRESHOLD: G, props: r, emit: l, open: v, currentIndex: m, currentVideoRef: h, triggerVideoRefs: q, pausedVideoRef: y, videoPlaying: i, scaleLevel: f, rotateLevel: u, pointerStart: g, openingFromTrigger: I, sourceList: s, multipleItems: x, showNavigation: M, getClampedIndex: p, resolvedCurrentIndex: d, currentItem: o, isImage: B, isVideo: w, videoControls: L, videoMuted: Q, videoPlaysinline: ee, videoPreload: te, currentVideoName: re, currentItemName: D, currentName: oe, currentDownloadHref: _, showVideoFullscreenAction: C, showFileActions: ae, modifiers: ne, imageTransform: le, triggerStyle: ie, triggerModifiers: ue, formatSize: S, currentSize: se, getItemName: de, getItemLabel: ce, getItemSize: ve, getItemDownloadHref: E, showTriggerPreviewActionForItem: z, showTriggerFullscreenActionForItem: K, showTriggerDownloadActionForItem: $, showTriggerActionsForItem: fe, setTriggerVideoRef: me, getTriggerItemClass: ge, getTriggerItemStyle: pe, pauseCurrentVideo: N, resetImageTransform: b, setCurrentIndex: T, previousHandler: k, nextHandler: H, openPreviewAt: he, closeHandler: O, rotateRight: ye, rotateLeft: Ie, zoomIn: we, zoomOut: Ne, toggleNormalSize: Fe, requestVideoFullscreen: A, fullscreenHandler: qe, triggerFullscreenHandler: xe, downloadItemHandler: Z, downloadHandler: Be, videoPlayHandler: Se, videoPauseHandler: be, videoEndedHandler: Te, videoErrorHandler: ke, keyboardNavigationHandler: R, addKeyboardNavigationListener: U, removeKeyboardNavigationListener: P, pointerDownHandler: (e) => {
+      g.value = { x: e.clientX, y: e.clientY };
     }, pointerUpHandler: (e) => {
-      if (!p.value || !V.value) {
-        p.value = null;
+      if (!g.value || !M.value) {
+        g.value = null;
         return;
       }
-      const t = e.clientX - p.value.x, s = e.clientY - p.value.y;
-      p.value = null, !(Math.abs(t) < Y || Math.abs(t) < Math.abs(s) * 1.2) && (t > 0 ? H() : S());
+      const t = e.clientX - g.value.x, n = e.clientY - g.value.y;
+      g.value = null, !(Math.abs(t) < G || Math.abs(t) < Math.abs(n) * 1.2) && (t > 0 ? k() : H());
     }, get NmorphButton() {
-      return Re;
+      return Ce;
     }, get NmorphIcon() {
-      return Le;
+      return _e;
     }, get NmorphIconDownload() {
-      return Oe;
+      return Xe;
     }, get NmorphIconEnlarge() {
-      return $e;
+      return Ue;
     }, get NmorphIconEye() {
-      return Ve;
+      return De;
     }, get NmorphIconFullScreen() {
-      return Me;
+      return Le;
     }, get NmorphIconPlay() {
-      return Ke;
+      return Ze;
     }, get NmorphIconRotateLeft() {
-      return Ce;
+      return Oe;
     }, get NmorphIconRotateRight() {
-      return ze;
+      return $e;
     }, get NmorphIconShrink() {
-      return Ee;
+      return Ke;
     }, get NmorphIconZoomIn() {
-      return _e;
+      return ze;
     }, get NmorphIconZoomOut() {
-      return De;
+      return Ee;
     }, get NmorphImage() {
-      return Pe;
-    }, NmorphPreviewPortal: Te };
-    return Object.defineProperty(U, "__isScriptSetup", { enumerable: !1, value: !0 }), U;
+      return Me;
+    }, NmorphPreviewPortal: Ve };
+    return Object.defineProperty(X, "__isScriptSetup", { enumerable: !1, value: !0 }), X;
   }
 });
 export {
-  dt as default
+  ft as default
 };

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

@@ -1 +1 @@
-.nmorph-preview-portal{display:contents}.nmorph-preview-portal .nmorph-preview-portal__content{--nmorph-private-preview-portal-content-width: min( calc(100vw - 96px) , 960px);--nmorph-private-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-private-preview-portal-content-width);height:var(--nmorph-private-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-private-preview-portal-btn-margin: 20px}.nmorph-preview-portal.nmorph-preview-portal--opened .nmorph-preview-portal__left{left:var(--nmorph-private-preview-portal-btn-margin)}.nmorph-preview-portal.nmorph-preview-portal--opened .nmorph-preview-portal__right{right:var(--nmorph-private-preview-portal-btn-margin)}
+.nmorph-preview-portal{display:contents}.nmorph-preview-portal .nmorph-preview-portal__content{--nmorph-private-preview-portal-content-width: min( calc(100vw - 96px) , 960px);--nmorph-private-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-private-preview-portal-content-width);height:var(--nmorph-private-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__control-button{background:var(--nmorph-overlay-color);border-radius:4px}.nmorph-preview-portal .nmorph-preview-portal__control-button .nmorph-button__content,.nmorph-preview-portal .nmorph-preview-portal__control-button .nmorph-button__content:not(:disabled,[loading=true]):hover{color:var(--nmorph-contrast-text-color);background:transparent;border:0;box-shadow:none}.nmorph-preview-portal .nmorph-preview-portal__control-button .nmorph-button__content .nmorph-icon,.nmorph-preview-portal .nmorph-preview-portal__control-button .nmorph-button__content:not(:disabled,[loading=true]):hover .nmorph-icon{--nmorph-private-icon-color: var(--nmorph-contrast-text-color)}.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-private-preview-portal-btn-margin: 20px}.nmorph-preview-portal.nmorph-preview-portal--opened .nmorph-preview-portal__left{left:var(--nmorph-private-preview-portal-btn-margin)}.nmorph-preview-portal.nmorph-preview-portal--opened .nmorph-preview-portal__right{right:var(--nmorph-private-preview-portal-btn-margin)}

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

@@ -1,10 +1,10 @@
 import './NmorphPreviewPortal.css';
 import v from "./NmorphPreviewPortal.vue2.js";
-import { openBlock as t, createBlock as c, Teleport as f, createElementVNode as m, normalizeStyle as h, normalizeClass as n, createVNode as e, withCtx as l, renderSlot as d, createElementBlock as s, createCommentVNode as i } from "vue";
+import { openBlock as t, createBlock as c, Teleport as h, createElementVNode as m, normalizeStyle as f, normalizeClass as n, createVNode as e, withCtx as l, renderSlot as d, createElementBlock as a, createCommentVNode as i } from "vue";
 /* empty css                         */
 import w from "../../../_virtual/_plugin-vue_export-helper.js";
-function N(p, r, C, o, _, k) {
-  return o.props.show ? (t(), c(f, {
+function _(p, r, N, o, C, k) {
+  return o.props.show ? (t(), c(h, {
     key: 0,
     to: "body"
   }, [
@@ -12,15 +12,15 @@ function N(p, r, C, o, _, k) {
       "div",
       {
         class: n(o.rootClasses),
-        style: h(o.portalStyle)
+        style: f(o.portalStyle)
       },
       [
         e(o.NmorphOverlay, {
           show: o.props.show,
           "z-index": o.props.zIndex,
           "disabled-teleport": "",
-          onOnOutsideClick: r[2] || (r[2] = (a) => o.emit("close")),
-          onOnEscapeKeydown: r[3] || (r[3] = (a) => o.emit("close"))
+          onOnOutsideClick: r[2] || (r[2] = (s) => o.emit("close")),
+          onOnEscapeKeydown: r[3] || (r[3] = (s) => o.emit("close"))
         }, {
           default: l(() => [
             m(
@@ -34,7 +34,7 @@ function N(p, r, C, o, _, k) {
               2
               /* CLASS */
             ),
-            o.props.showNavigation ? (t(), s(
+            o.props.showNavigation ? (t(), a(
               "div",
               {
                 key: 0,
@@ -42,8 +42,10 @@ function N(p, r, C, o, _, k) {
               },
               [
                 e(o.NmorphButton, {
+                  class: "nmorph-preview-portal__control-button",
                   design: "plain",
-                  onClick: r[0] || (r[0] = (a) => o.emit("previous"))
+                  borderless: "",
+                  onClick: r[0] || (r[0] = (s) => o.emit("previous"))
                 }, {
                   default: l(() => [
                     e(o.NmorphIcon, null, {
@@ -61,7 +63,7 @@ function N(p, r, C, o, _, k) {
               2
               /* CLASS */
             )) : i("v-if", !0),
-            o.props.showNavigation ? (t(), s(
+            o.props.showNavigation ? (t(), a(
               "div",
               {
                 key: 1,
@@ -69,8 +71,10 @@ function N(p, r, C, o, _, k) {
               },
               [
                 e(o.NmorphButton, {
+                  class: "nmorph-preview-portal__control-button",
                   design: "plain",
-                  onClick: r[1] || (r[1] = (a) => o.emit("next"))
+                  borderless: "",
+                  onClick: r[1] || (r[1] = (s) => o.emit("next"))
                 }, {
                   default: l(() => [
                     e(o.NmorphIcon, null, {
@@ -88,7 +92,7 @@ function N(p, r, C, o, _, k) {
               2
               /* CLASS */
             )) : i("v-if", !0),
-            o.props.showActionBar ? (t(), s(
+            o.props.showActionBar ? (t(), a(
               "div",
               {
                 key: 2,
@@ -110,7 +114,7 @@ function N(p, r, C, o, _, k) {
     )
   ])) : i("v-if", !0);
 }
-const z = /* @__PURE__ */ w(v, [["render", N], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-preview-portal/NmorphPreviewPortal.vue"]]);
+const B = /* @__PURE__ */ w(v, [["render", _], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-preview-portal/NmorphPreviewPortal.vue"]]);
 export {
-  z as default
+  B as default
 };

package/dist/components/data/nmorph-progress/NmorphProgress.css

@@ -1 +1 @@
-.nmorph-progress{--nmorph-private-progress-height: 8px;--nmorph-private-progress-width-transition: .4s ease-in-out width;--nmorph-private-progress-indeterminate-animation: slide 2s linear infinite;display:inline}.nmorph-progress .nmorph-progress__linear{display:flex;align-items:center;height:100%;height:var(--nmorph-private-progress-height)}.nmorph-progress .nmorph-progress__linear .nmorph-progress__outer{width:100%;height:100%;overflow:hidden;background:var(--nmorph-main-color);border-radius:var(--border-radius-40);box-shadow:inset var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),inset calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-progress .nmorph-progress__linear .nmorph-progress__inner{position:relative;height:100%;border-radius:var(--border-radius-40);transition:var(--nmorph-private-progress-width-transition)}.nmorph-progress .nmorph-progress__linear .nmorph-progress__percentage,.nmorph-progress .nmorph-progress__linear .nmorph-progress__inner-text{margin-left:var(--indentation-03);font-weight:var(--nmorph-typography-caption-font-weight);font-size:var(--nmorph-typography-caption-font-size);line-height:var(--nmorph-typography-caption-line-height)}.nmorph-progress .nmorph-progress__linear .nmorph-progress__inner-text{position:absolute;top:50%;right:var(--indentation-02);color:var(--nmorph-light-shade-color);transform:translateY(-50%)}.nmorph-progress .nmorph-progress__circle{position:relative;width:var(--nmorph-private-progress-circle-size);height:var(--nmorph-private-progress-circle-size);background:var(--nmorph-main-color);border-radius:var(--border-radius-circular);box-shadow:inset var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),inset calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-progress .nmorph-progress__circle:after{position:absolute;top:50%;left:50%;width:92%;height:92%;background:var(--nmorph-main-color);border-radius:var(--border-radius-circular);box-shadow:0 0 var(--base-shadow-blur) var(--nmorph-dark-shade-color);transform:translate(-50%,-50%);content:""}.nmorph-progress .nmorph-progress__circle-inner-part{position:absolute;top:50%;left:50%;z-index:1;transform:translate(-50%,-50%)}.nmorph-progress .nmorph-progress__circle-ring{transform:rotate(-90deg);transform-origin:center;transition:stroke-dashoffset .5s;fill:none;stroke:var(--nmorph-private-progress-color);stroke-width:4px}.nmorph-progress .nmorph-progress__inner{width:var(--nmorph-private-progress-percentage);background:var(--nmorph-private-progress-color);animation:var(--nmorph-private-progress-animation)}
+.nmorph-progress{--nmorph-private-progress-height: 8px;--nmorph-private-progress-width-transition: .4s ease-in-out width;--nmorph-private-progress-indeterminate-animation: nmorph-progress-indeterminate 1.4s ease-in-out infinite;display:inline}.nmorph-progress .nmorph-progress__linear{display:flex;align-items:center;height:100%;height:var(--nmorph-private-progress-height)}.nmorph-progress .nmorph-progress__linear .nmorph-progress__outer{width:100%;height:100%;overflow:hidden;background:var(--nmorph-main-color);border-radius:var(--border-radius-40);box-shadow:inset var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),inset calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-progress .nmorph-progress__linear .nmorph-progress__inner{position:relative;height:100%;border-radius:var(--border-radius-40);transition:var(--nmorph-private-progress-width-transition)}.nmorph-progress .nmorph-progress__linear .nmorph-progress__percentage,.nmorph-progress .nmorph-progress__linear .nmorph-progress__inner-text{margin-left:var(--indentation-03);font-weight:var(--nmorph-typography-caption-font-weight);font-size:var(--nmorph-typography-caption-font-size);line-height:var(--nmorph-typography-caption-line-height)}.nmorph-progress .nmorph-progress__linear .nmorph-progress__inner-text{position:absolute;top:50%;right:var(--indentation-02);color:var(--nmorph-light-shade-color);transform:translateY(-50%)}.nmorph-progress .nmorph-progress__circle{position:relative;width:var(--nmorph-private-progress-circle-size);height:var(--nmorph-private-progress-circle-size);background:var(--nmorph-main-color);border-radius:var(--border-radius-circular);box-shadow:inset var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),inset calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-progress .nmorph-progress__circle:after{position:absolute;top:50%;left:50%;width:92%;height:92%;background:var(--nmorph-main-color);border-radius:var(--border-radius-circular);box-shadow:0 0 var(--base-shadow-blur) var(--nmorph-dark-shade-color);transform:translate(-50%,-50%);content:""}.nmorph-progress .nmorph-progress__circle-inner-part{position:absolute;top:50%;left:50%;z-index:1;transform:translate(-50%,-50%)}.nmorph-progress .nmorph-progress__circle-ring{transform:rotate(-90deg);transform-origin:center;transition:stroke-dashoffset .5s;fill:none;stroke:var(--nmorph-private-progress-color);stroke-width:4px}.nmorph-progress .nmorph-progress__inner{width:var(--nmorph-private-progress-percentage);background:var(--nmorph-private-progress-color);animation:var(--nmorph-private-progress-animation)}.nmorph-progress.nmorph-progress--indeterminate .nmorph-progress__inner{width:40%;min-width:32px;transform:translate(-100%);transition:none;will-change:transform}@keyframes nmorph-progress-indeterminate{0%{transform:translate(-100%)}to{transform:translate(250%)}}

package/dist/components/data/nmorph-progress/NmorphProgress.vue2.js

@@ -18,18 +18,18 @@ const C = /* @__PURE__ */ y({
   },
   setup(c, { expose: d }) {
     d();
-    const e = c, f = r(
+    const e = c, m = r(
       () => q({
-        "nmorph-progress": []
+        "nmorph-progress": [e.indeterminate && "indeterminate"]
       })
-    ), i = r(() => Array.isArray(e.color) ? e.color.find((h) => h.percentage <= e.percentage)?.color : typeof e.color == "function" ? e.color(e.percentage) : e.color), n = r(() => e.indeterminate ? "var(--nmorph-private-progress-indeterminate-animation)" : "none"), a = u(null), t = u(1), m = r(() => `${t.value} ${t.value}`), v = r(() => t.value - e.percentage / 100 * t.value);
+    ), a = r(() => Array.isArray(e.color) ? e.color.find((h) => h.percentage <= e.percentage)?.color : typeof e.color == "function" ? e.color(e.percentage) : e.color), n = r(() => e.indeterminate ? "var(--nmorph-private-progress-indeterminate-animation)" : "none"), i = u(null), t = u(1), f = r(() => `${t.value} ${t.value}`), v = r(() => t.value - e.percentage / 100 * t.value);
     S(() => {
-      a.value && (t.value = 2 * Math.PI * a.value.r.baseVal.value);
+      i.value && (t.value = 2 * Math.PI * i.value.r.baseVal.value);
     });
     const o = r(() => `${e.circleSize}px`), s = r(() => `${e.percentage}%`), l = r(() => e.height ?? (e.valueInside ? "18px" : void 0)), g = r(() => ({
       ...b({
         "--nmorph-private-progress-percentage": s.value,
-        "--nmorph-private-progress-color": i.value,
+        "--nmorph-private-progress-color": a.value,
         "--nmorph-private-progress-animation": n.value,
         "--nmorph-private-progress-circle-size": o.value,
         "--nmorph-private-progress-width-transition": e.widthTransition,
@@ -38,7 +38,7 @@ const C = /* @__PURE__ */ y({
       ..._({
         "--nmorph-private-progress-height": l.value
       })
-    })), p = { props: e, modifiers: f, color: i, animation: n, circle: a, circumference: t, strokeDasharray: m, strokeDashoffset: v, circleContainerSize: o, displayPercentage: s, linearHeight: l, styles: g };
+    })), p = { props: e, modifiers: m, color: a, animation: n, circle: i, circumference: t, strokeDasharray: f, strokeDashoffset: v, circleContainerSize: o, displayPercentage: s, linearHeight: l, styles: g };
     return Object.defineProperty(p, "__isScriptSetup", { enumerable: !1, value: !0 }), p;
   }
 });

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

@@ -4,10 +4,10 @@ import { useModifiers as Q } from "../../../utils/create-modifiers.js";
 import { createCssSizeVariables as X } from "../../../utils/common.js";
 import Y from "../../../assets/icons/video.svg.js";
 import Z from "../../others/nmorph-overlay/NmorphOverlay.vue.js";
-import ee from "../../basic/nmorph-icon/NmorphIcon.vue.js";
-import re from "../../../assets/icons/play.svg.js";
-import te from "../../../assets/icons/pause.svg.js";
-import oe from "../../../assets/icons/open.svg.js";
+import ee from "../../../assets/icons/open.svg.js";
+import re from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+import te from "../../../assets/icons/play.svg.js";
+import oe from "../../../assets/icons/pause.svg.js";
 import ae from "../../../assets/icons/loading.svg.js";
 import ne from "../../../assets/icons/full-screen.svg.js";
 import le from "../../../assets/icons/eye.svg.js";
@@ -133,7 +133,7 @@ const ie = "var(--nmorph-contrast-text-color)", v = 0.25, Se = /* @__PURE__ */ U
     };
     O({ videoRef: l });
     const B = { CONTRAST_ICON_COLOR: ie, VIDEO_BUFFER_EPSILON_SECONDS: v, props: e, emit: n, attrs: u, slots: h, videoRef: l, previewOpen: f, playing: o, videoLoaded: s, formatDuration: y, duration: A, mediaReady: d, showPlaybackControl: H, resolvedPreload: F, showFullscreenAction: w, hasPreviewActions: g, hasDefaultActions: N, hasActions: q, modifiers: S, styles: b, rootAttrs: E, rootClass: C, rootStyle: D, openHandler: M, downloadHandler: V, previewHandler: k, closePreviewHandler: x, fullscreenHandler: L, togglePlayback: R, isVideoFullyBuffered: I, updateVideoLoaded: j, playHandler: T, pauseHandler: W, endedHandler: $, errorHandler: z, get NmorphIcon() {
-      return ee;
+      return re;
     }, get NmorphIconDownload() {
       return se;
     }, get NmorphIconEye() {
@@ -143,13 +143,13 @@ const ie = "var(--nmorph-contrast-text-color)", v = 0.25, Se = /* @__PURE__ */ U
     }, get NmorphIconLoader() {
       return ae;
     }, get NmorphIconOpen() {
-      return oe;
+      return ee;
     }, get NmorphOverlay() {
       return Z;
     }, get NmorphIconPause() {
-      return te;
+      return oe;
     }, get NmorphIconPlay() {
-      return re;
+      return te;
     }, get NmorphIconVideo() {
       return Y;
     } };