@nmorph/nmorph-ui-kit 2.2.52 → 2.2.53

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

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

package/dist/components/data/nmorph-media-tile/NmorphMediaTile.vue.js

@@ -1,160 +1,137 @@
 import './NmorphMediaTile.css';
-import { defineComponent as B, ref as g, computed as d, watch as b, openBlock as a, createElementBlock as o, normalizeClass as O, withDirectives as S, createElementVNode as f, vShow as N, createBlock as u, unref as t, withCtx as s, createVNode as r, toDisplayString as c, createCommentVNode as l, renderSlot as j } from "vue";
-import { useModifiers as x } from "../../../utils/create-modifiers.js";
-import n from "../../basic/nmorph-icon/NmorphIcon.vue.js";
-/* empty css                                      */
-import z from "../nmorph-avatar/NmorphAvatar.vue.js";
-/* empty css                                 */
-import M from "../../../assets/icons/mic.svg.js";
-import V from "../../../assets/icons/share.svg.js";
-import C from "../../../assets/icons/pin.svg.js";
-import I from "../../../assets/icons/loader.svg.js";
-import w from "../../../assets/icons/video.svg.js";
-const T = ["src", "muted", "autoplay", "playsinline"], D = {
+import d from "./NmorphMediaTile.vue2.js";
+import { openBlock as e, createElementBlock as r, normalizeClass as c, withDirectives as p, createElementVNode as n, vShow as _, createBlock as t, withCtx as s, createVNode as a, toDisplayString as l, createCommentVNode as i, renderSlot as h } from "vue";
+/* empty css                     */
+import f from "../../../_virtual/_plugin-vue_export-helper.js";
+const v = ["src", "muted", "autoplay", "playsinline"], y = {
   key: 0,
   class: "nmorph-media-tile__fallback"
-}, $ = {
+}, k = {
   key: 2,
   class: "nmorph-media-tile__initials"
-}, E = {
+}, N = {
   key: 3,
   class: "nmorph-media-tile__name"
-}, L = {
+}, I = {
   key: 4,
   class: "nmorph-media-tile__error-text"
-}, P = { class: "nmorph-media-tile__status" }, R = {
+}, b = { class: "nmorph-media-tile__status" }, S = {
   key: 0,
   class: "nmorph-media-tile__status-item",
   "aria-label": "Microphone muted"
-}, U = {
+}, g = {
   key: 1,
   class: "nmorph-media-tile__status-item",
   "aria-label": "Video off"
-}, q = {
+}, z = {
   key: 2,
   class: "nmorph-media-tile__status-item",
   "aria-label": "Screen sharing"
-}, A = {
+}, V = {
   key: 3,
   class: "nmorph-media-tile__status-item",
   "aria-label": "Pinned"
-}, te = /* @__PURE__ */ B({
-  __name: "NmorphMediaTile",
-  props: {
-    src: { default: "" },
-    srcObject: { default: null },
-    fit: { default: "cover" },
-    mirrored: { type: Boolean, default: !1 },
-    muted: { type: Boolean, default: !0 },
-    autoplay: { type: Boolean, default: !0 },
-    playsinline: { type: Boolean, default: !0 },
-    name: { default: "" },
-    avatarSrc: { default: "" },
-    loading: { type: Boolean, default: !1 },
-    micMuted: { type: Boolean, default: !1 },
-    videoOff: { type: Boolean, default: !1 },
-    screenSharing: { type: Boolean, default: !1 },
-    speaking: { type: Boolean, default: !1 },
-    selected: { type: Boolean, default: !1 },
-    pinned: { type: Boolean, default: !1 },
-    error: { type: Boolean, default: !1 },
-    errorText: { default: "" }
-  },
-  setup(_, { expose: h }) {
-    const e = _, i = g(null), p = d(() => !!((e.src || e.srcObject) && !e.videoOff && !e.error)), y = d(
-      () => e.name.split(/\s+/).filter(Boolean).slice(0, 2).map((m) => m[0]?.toUpperCase()).join("")
-    ), v = d(() => y.value || e.name || "?"), k = d(
-      () => x({
-        "nmorph-media-tile": [
-          e.fit,
-          e.mirrored && "mirrored",
-          e.selected && "selected",
-          e.pinned && "pinned",
-          e.speaking && "speaking",
-          e.error && "error",
-          e.videoOff && "video-off",
-          e.screenSharing && "screen-sharing",
-          e.loading && "loading"
-        ]
-      })
-    );
-    return b(
-      () => [e.srcObject, i.value],
-      () => {
-        i.value && i.value.srcObject !== e.srcObject && (i.value.srcObject = e.srcObject);
-      },
-      { immediate: !0, flush: "post" }
-    ), h({ videoRef: i }), (m, F) => (a(), o("div", {
-      class: O(k.value)
-    }, [
-      S(f("video", {
-        ref_key: "videoRef",
-        ref: i,
+};
+function x(m, M, T, o, w, B) {
+  return e(), r(
+    "div",
+    {
+      class: c(o.modifiers)
+    },
+    [
+      p(n("video", {
+        ref: "videoRef",
         class: "nmorph-media-tile__video",
-        src: e.src || void 0,
-        muted: e.muted,
-        autoplay: e.autoplay,
-        playsinline: e.playsinline
-      }, null, 8, T), [
-        [N, p.value && !e.loading]
+        src: o.props.src || void 0,
+        muted: o.props.muted,
+        autoplay: o.props.autoplay,
+        playsinline: o.props.playsinline
+      }, null, 8, v), [
+        [_, o.hasVideo && !o.props.loading]
       ]),
-      !p.value || e.loading ? (a(), o("div", D, [
-        e.loading ? (a(), u(t(n), {
+      !o.hasVideo || o.props.loading ? (e(), r("div", y, [
+        o.props.loading ? (e(), t(o.NmorphIcon, {
           key: 0,
           class: "nmorph-media-tile__loader",
           size: "large"
         }, {
           default: s(() => [
-            r(t(I))
+            a(o.NmorphIconLoaderDots)
           ]),
           _: 1
-        })) : e.avatarSrc ? (a(), u(t(z), {
+          /* STABLE */
+        })) : o.props.avatarSrc ? (e(), t(o.NmorphAvatar, {
           key: 1,
-          src: e.avatarSrc,
-          name: e.name,
+          src: o.props.avatarSrc,
+          name: o.props.name,
           size: 72
-        }, null, 8, ["src", "name"])) : (a(), o("div", $, c(v.value), 1)),
-        e.name ? (a(), o("span", E, c(e.name), 1)) : l("", !0),
-        e.error && e.errorText ? (a(), o("span", L, c(e.errorText), 1)) : l("", !0)
-      ])) : l("", !0),
-      f("div", P, [
-        e.micMuted ? (a(), o("span", R, [
-          r(t(n), { size: "small" }, {
+        }, null, 8, ["src", "name"])) : (e(), r(
+          "div",
+          k,
+          l(o.fallbackLabel),
+          1
+          /* TEXT */
+        )),
+        o.props.name ? (e(), r(
+          "span",
+          N,
+          l(o.props.name),
+          1
+          /* TEXT */
+        )) : i("v-if", !0),
+        o.props.error && o.props.errorText ? (e(), r(
+          "span",
+          I,
+          l(o.props.errorText),
+          1
+          /* TEXT */
+        )) : i("v-if", !0)
+      ])) : i("v-if", !0),
+      n("div", b, [
+        o.props.micMuted ? (e(), r("span", S, [
+          a(o.NmorphIcon, { size: "small" }, {
             default: s(() => [
-              r(t(M))
+              a(o.NmorphIconMic)
             ]),
             _: 1
+            /* STABLE */
           })
-        ])) : l("", !0),
-        e.videoOff ? (a(), o("span", U, [
-          r(t(n), { size: "small" }, {
+        ])) : i("v-if", !0),
+        o.props.videoOff ? (e(), r("span", g, [
+          a(o.NmorphIcon, { size: "small" }, {
             default: s(() => [
-              r(t(w))
+              a(o.NmorphIconVideo)
             ]),
             _: 1
+            /* STABLE */
           })
-        ])) : l("", !0),
-        e.screenSharing ? (a(), o("span", q, [
-          r(t(n), { size: "small" }, {
+        ])) : i("v-if", !0),
+        o.props.screenSharing ? (e(), r("span", z, [
+          a(o.NmorphIcon, { size: "small" }, {
             default: s(() => [
-              r(t(V))
+              a(o.NmorphIconShare)
             ]),
             _: 1
+            /* STABLE */
           })
-        ])) : l("", !0),
-        e.pinned ? (a(), o("span", A, [
-          r(t(n), { size: "small" }, {
+        ])) : i("v-if", !0),
+        o.props.pinned ? (e(), r("span", V, [
+          a(o.NmorphIcon, { size: "small" }, {
             default: s(() => [
-              r(t(C))
+              a(o.NmorphIconPin)
             ]),
             _: 1
+            /* STABLE */
           })
-        ])) : l("", !0)
+        ])) : i("v-if", !0)
       ]),
-      j(m.$slots, "overlay")
-    ], 2));
-  }
-});
+      h(m.$slots, "overlay")
+    ],
+    2
+    /* CLASS */
+  );
+}
+const P = /* @__PURE__ */ f(d, [["render", x], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-media-tile/NmorphMediaTile.vue"]]);
 export {
-  te as default
+  P as default
 };

package/dist/components/data/nmorph-media-tile/NmorphMediaTile.vue2.js

@@ -0,0 +1,78 @@
+import './NmorphMediaTile.css';
+import { defineComponent as u, ref as p, computed as o, watch as c } from "vue";
+import { useModifiers as m } from "../../../utils/create-modifiers.js";
+import h from "../../../assets/icons/share.svg.js";
+import g from "../../../assets/icons/pin.svg.js";
+import y from "../../../assets/icons/mic.svg.js";
+import q from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+import v from "../nmorph-avatar/NmorphAvatar.vue.js";
+import N from "../../../assets/icons/video.svg.js";
+import B from "../../../assets/icons/loader.svg.js";
+const L = /* @__PURE__ */ u({
+  __name: "NmorphMediaTile",
+  props: {
+    src: { type: String, required: !1, default: "" },
+    srcObject: { type: null, required: !1, default: null },
+    fit: { type: String, required: !1, default: "cover" },
+    mirrored: { type: Boolean, required: !1, default: !1 },
+    muted: { type: Boolean, required: !1, default: !0 },
+    autoplay: { type: Boolean, required: !1, default: !0 },
+    playsinline: { type: Boolean, required: !1, default: !0 },
+    name: { type: String, required: !1, default: "" },
+    avatarSrc: { type: String, required: !1, default: "" },
+    loading: { type: Boolean, required: !1, default: !1 },
+    micMuted: { type: Boolean, required: !1, default: !1 },
+    videoOff: { type: Boolean, required: !1, default: !1 },
+    screenSharing: { type: Boolean, required: !1, default: !1 },
+    speaking: { type: Boolean, required: !1, default: !1 },
+    selected: { type: Boolean, required: !1, default: !1 },
+    pinned: { type: Boolean, required: !1, default: !1 },
+    error: { type: Boolean, required: !1, default: !1 },
+    errorText: { type: String, required: !1, default: "" }
+  },
+  setup(l, { expose: i }) {
+    const e = l, r = p(null), n = o(() => !!((e.src || e.srcObject) && !e.videoOff && !e.error)), t = o(
+      () => e.name.split(/\s+/).filter(Boolean).slice(0, 2).map((d) => d[0]?.toUpperCase()).join("")
+    ), f = o(() => t.value || e.name || "?"), s = o(
+      () => m({
+        "nmorph-media-tile": [
+          e.fit,
+          e.mirrored && "mirrored",
+          e.selected && "selected",
+          e.pinned && "pinned",
+          e.speaking && "speaking",
+          e.error && "error",
+          e.videoOff && "video-off",
+          e.screenSharing && "screen-sharing",
+          e.loading && "loading"
+        ]
+      })
+    );
+    c(
+      () => [e.srcObject, r.value],
+      () => {
+        r.value && r.value.srcObject !== e.srcObject && (r.value.srcObject = e.srcObject);
+      },
+      { immediate: !0, flush: "post" }
+    ), i({ videoRef: r });
+    const a = { props: e, videoRef: r, hasVideo: n, initials: t, fallbackLabel: f, modifiers: s, get NmorphAvatar() {
+      return v;
+    }, get NmorphIcon() {
+      return q;
+    }, get NmorphIconLoaderDots() {
+      return B;
+    }, get NmorphIconMic() {
+      return y;
+    }, get NmorphIconPin() {
+      return g;
+    }, get NmorphIconShare() {
+      return h;
+    }, get NmorphIconVideo() {
+      return N;
+    } };
+    return Object.defineProperty(a, "__isScriptSetup", { enumerable: !1, value: !0 }), a;
+  }
+});
+export {
+  L as default
+};