@nmorph/nmorph-ui-kit 3.0.2 → 3.0.4

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

package/dist/components/navigation/nmorph-backtop/NmorphBacktop.vue.js

@@ -1,19 +1,19 @@
 import './NmorphBacktop.css';
 import i from "./NmorphBacktop.vue2.js";
-import { openBlock as e, createElementBlock as c, createBlock as a, Teleport as s, createElementVNode as t, normalizeStyle as d, normalizeClass as p, withModifiers as m, renderSlot as f, createVNode as r, withCtx as l } from "vue";
+import { openBlock as e, createElementBlock as s, createBlock as a, Teleport as c, createElementVNode as l, normalizeStyle as d, normalizeClass as p, withModifiers as m, renderSlot as f, createVNode as r, withCtx as t } from "vue";
 /* empty css                   */
 import h from "../../../_virtual/_plugin-vue_export-helper.js";
 const _ = { ref: "placeholderDOMEl" };
-function k(n, v, b, o, N, B) {
-  return e(), c(
+function b(n, k, v, o, N, g) {
+  return e(), s(
     "div",
     _,
     [
-      (e(), a(s, {
+      (e(), a(c, {
         to: o.props.teleportTo,
         disabled: !o.isMounted || o.props.teleportDisabled
       }, [
-        t(
+        l(
           "div",
           {
             ref: "selfDOMEl",
@@ -21,19 +21,20 @@ function k(n, v, b, o, N, B) {
             style: d(o.styles)
           },
           [
-            t("div", {
+            l("div", {
               onClick: m(o.scrollToTopHandler, ["stop"])
             }, [
               f(n.$slots, "default", {}, () => [
                 r(o.NmorphButton, {
-                  design: o.props.design
+                  design: o.props.design,
+                  borderless: o.props.design === "plain"
                 }, {
-                  default: l(() => [
+                  default: t(() => [
                     r(o.NmorphIcon, {
                       class: "nmorph-backtop__up-icon",
                       color: o.props.design === "nmorph" ? void 0 : "var(--nmorph-contrast-text-color)"
                     }, {
-                      default: l(() => [
+                      default: t(() => [
                         r(o.NmorphIconChevronDown)
                       ]),
                       _: 1
@@ -42,7 +43,7 @@ function k(n, v, b, o, N, B) {
                   ]),
                   _: 1
                   /* STABLE */
-                }, 8, ["design"])
+                }, 8, ["design", "borderless"])
               ])
             ])
           ],
@@ -55,7 +56,7 @@ function k(n, v, b, o, N, B) {
     /* NEED_PATCH */
   );
 }
-const D = /* @__PURE__ */ h(i, [["render", k], ["__file", "/builds/ketjo/nmorph/library/src/components/navigation/nmorph-backtop/NmorphBacktop.vue"]]);
+const D = /* @__PURE__ */ h(i, [["render", b], ["__file", "/builds/ketjo/nmorph/library/src/components/navigation/nmorph-backtop/NmorphBacktop.vue"]]);
 export {
   D as default
 };