@nmorph/nmorph-ui-kit 2.2.51 → 2.2.53

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

@@ -1,291 +1,228 @@
 import './NmorphVideoPreview.css';
-import { defineComponent as Q, useAttrs as U, useSlots as W, ref as b, computed as s, openBlock as t, createElementBlock as a, Fragment as X, createElementVNode as _, mergeProps as Y, createCommentVNode as n, createVNode as l, unref as r, withCtx as d, createBlock as v, toDisplayString as k, renderSlot as Z, Teleport as ee } from "vue";
-import { useModifiers as oe } from "../../../utils/create-modifiers.js";
-import { createCssSizeVariables as te } from "../../../utils/common.js";
-import u from "../../basic/nmorph-icon/NmorphIcon.vue.js";
-/* empty css                                      */
-import re from "../../../assets/icons/video.svg.js";
-import ae from "../../../assets/icons/eye.svg.js";
-import le from "../../../assets/icons/full-screen.svg.js";
-import ne from "../../others/nmorph-overlay/NmorphOverlay.vue.js";
-/* empty css                                             */
-import se from "../../../assets/icons/pause.svg.js";
-import ie from "../../../assets/icons/play.svg.js";
-import de from "../../../assets/icons/loading.svg.js";
-import ce from "../../../assets/icons/open.svg.js";
-import ue from "../../../assets/icons/download.svg.js";
-const pe = ["src", "poster", "controls", "muted", "playsinline", "preload"], me = ["aria-label"], ve = {
+import s from "./NmorphVideoPreview.vue2.js";
+import { openBlock as r, createElementBlock as e, Fragment as _, createElementVNode as d, mergeProps as t, createCommentVNode as a, createVNode as n, withCtx as i, createBlock as l, toDisplayString as p, renderSlot as m, Teleport as v } from "vue";
+/* empty css                        */
+import h from "../../../_virtual/_plugin-vue_export-helper.js";
+const y = ["src", "poster", "controls", "muted", "playsinline", "preload"], w = ["aria-label"], f = {
   key: 2,
   class: "nmorph-video-preview__state"
-}, fe = {
+}, k = {
   key: 2,
   class: "nmorph-video-preview__error"
-}, _e = {
+}, N = {
   key: 3,
   class: "nmorph-video-preview__meta"
-}, he = {
+}, b = {
   key: 0,
   class: "nmorph-video-preview__name"
-}, we = {
+}, O = {
   key: 1,
   class: "nmorph-video-preview__duration"
-}, ye = {
+}, C = {
   key: 4,
   class: "nmorph-video-preview__actions"
-}, be = ["aria-label"], ke = ["aria-label"], ge = ["href", "aria-label"], Ae = ["href", "download", "aria-label"], Be = { class: "nmorph-video-preview__portal" }, Pe = { class: "nmorph-video-preview__portal-content" }, Ce = ["src", "poster", "muted", "playsinline", "preload"], g = "var(--nmorph-contrast-text-color)", qe = /* @__PURE__ */ Q({
-  inheritAttrs: !1,
-  __name: "NmorphVideoPreview",
-  props: {
-    src: {},
-    poster: { default: "" },
-    name: { default: "" },
-    width: { default: void 0 },
-    height: { default: void 0 },
-    durationMs: { default: void 0 },
-    surface: { default: "card" },
-    embedded: { type: Boolean, default: !1 },
-    showMeta: { type: Boolean, default: !0 },
-    compact: { type: Boolean, default: !1 },
-    controls: { type: Boolean, default: !0 },
-    muted: { type: Boolean, default: !1 },
-    playsinline: { type: Boolean, default: !0 },
-    preload: { default: "metadata" },
-    fit: { default: "cover" },
-    downloadHref: { default: "" },
-    loading: { type: Boolean, default: !1 },
-    error: { type: Boolean, default: !1 },
-    errorText: { default: "" },
-    showDefaultActions: { type: Boolean, default: !0 },
-    showPreviewAction: { type: Boolean, default: !0 },
-    showFullscreenAction: { type: Boolean, default: !0 }
-  },
-  emits: ["play", "pause", "open", "preview", "fullscreen", "download", "error"],
-  setup(P, { expose: C, emit: N }) {
-    const e = P, c = N, h = U(), H = W(), p = b(null), f = b(!1), i = b(!1), O = (o) => {
-      if (!o || o < 0) return "";
-      const m = Math.round(o / 1e3), G = Math.floor(m / 60), J = m % 60;
-      return `${G}:${J.toString().padStart(2, "0")}`;
-    }, w = s(() => O(e.durationMs)), y = s(() => !!e.src && !e.loading && !e.error), $ = s(() => y.value && (e.showPreviewAction || e.showFullscreenAction)), S = s(() => e.showDefaultActions && (e.src || e.downloadHref)), A = s(() => !!H.actions || $.value || S.value), E = s(
-      () => oe({
-        "nmorph-video-preview": [
-          e.surface,
-          e.embedded && "embedded",
-          !e.showMeta && "no-meta",
-          e.compact && "compact",
-          e.fit,
-          e.loading && "loading",
-          e.error && "error",
-          i.value && "playing",
-          !A.value && "no-actions"
-        ]
-      })
-    ), F = s(
-      () => te({
-        "--nmorph-video-preview-width": e.width,
-        "--nmorph-video-preview-height": e.height
-      })
-    ), I = s(() => Object.fromEntries(Object.entries(h).filter(([o]) => o !== "class" && o !== "style"))), z = s(() => [E.value, h.class]), D = s(() => [F.value, h.style]), x = () => c("open"), M = () => c("download"), R = () => {
-      f.value = !0, c("preview");
-    }, B = () => {
-      f.value = !1;
-    }, T = async () => {
-      const o = p.value;
-      if (o) {
-        c("fullscreen");
-        try {
-          const m = o.requestFullscreen?.() || o.webkitRequestFullscreen?.();
-          if (m) {
-            await m;
-            return;
-          }
-          o.webkitEnterFullscreen?.();
-        } catch {
-        }
-      }
-    }, V = async () => {
-      if (!(!p.value || e.loading || e.error)) {
-        if (i.value) {
-          p.value.pause();
-          return;
-        }
-        try {
-          await p.value.play();
-        } catch {
-          i.value = !1;
-        }
-      }
-    }, q = (o) => {
-      i.value = !0, c("play", o);
-    }, j = (o) => {
-      i.value = !1, c("pause", o);
-    }, L = () => {
-      i.value = !1;
-    }, K = (o) => {
-      i.value = !1, c("error", o);
-    };
-    return C({ videoRef: p }), (o, m) => (t(), a(X, null, [
-      _("div", Y(I.value, {
-        class: z.value,
-        style: D.value
-      }), [
-        !e.loading && !e.error ? (t(), a("video", {
-          key: 0,
-          ref_key: "videoRef",
-          ref: p,
-          class: "nmorph-video-preview__media",
-          src: e.src,
-          poster: e.poster || void 0,
-          controls: e.controls,
-          muted: e.muted,
-          playsinline: e.playsinline,
-          preload: e.preload,
-          onPlay: q,
-          onPause: j,
-          onEnded: L,
-          onError: K
-        }, null, 40, pe)) : n("", !0),
-        !e.loading && !e.error ? (t(), a("button", {
-          key: 1,
-          class: "nmorph-video-preview__play",
-          type: "button",
-          "aria-label": i.value ? `Pause ${e.name || "video"}` : `Play ${e.name || "video"}`,
-          onClick: V
-        }, [
-          l(r(u), {
-            size: "medium",
-            color: g
-          }, {
-            default: d(() => [
-              i.value ? (t(), v(r(se), { key: 0 })) : (t(), v(r(ie), { key: 1 }))
-            ]),
-            _: 1
-          })
-        ], 8, me)) : (t(), a("div", ve, [
-          e.loading ? (t(), v(r(u), {
+}, I = ["aria-label"], P = ["aria-label"], g = ["href", "aria-label"], H = ["href", "download", "aria-label"], R = { class: "nmorph-video-preview__portal" }, T = { class: "nmorph-video-preview__portal-content" }, A = ["src", "poster", "muted", "playsinline", "preload"];
+function z(c, S, E, o, V, x) {
+  return r(), e(
+    _,
+    null,
+    [
+      d(
+        "div",
+        t(o.rootAttrs, {
+          class: o.rootClass,
+          style: o.rootStyle
+        }),
+        [
+          !o.props.loading && !o.props.error ? (r(), e("video", {
             key: 0,
-            size: "large"
-          }, {
-            default: d(() => [
-              l(r(de))
-            ]),
-            _: 1
-          })) : (t(), v(r(u), {
+            ref: "videoRef",
+            class: "nmorph-video-preview__media",
+            src: o.props.src,
+            poster: o.props.poster || void 0,
+            controls: o.props.controls,
+            muted: o.props.muted,
+            playsinline: o.props.playsinline,
+            preload: o.props.preload,
+            onPlay: o.playHandler,
+            onPause: o.pauseHandler,
+            onEnded: o.endedHandler,
+            onError: o.errorHandler
+          }, null, 40, y)) : a("v-if", !0),
+          !o.props.loading && !o.props.error ? (r(), e("button", {
             key: 1,
-            size: "large"
-          }, {
-            default: d(() => [
-              l(r(re))
-            ]),
-            _: 1
-          })),
-          e.error && e.errorText ? (t(), a("span", fe, k(e.errorText), 1)) : n("", !0)
-        ])),
-        e.showMeta && (e.name || w.value) ? (t(), a("div", _e, [
-          e.name ? (t(), a("span", he, k(e.name), 1)) : n("", !0),
-          w.value ? (t(), a("span", we, k(w.value), 1)) : n("", !0)
-        ])) : n("", !0),
-        A.value ? (t(), a("div", ye, [
-          Z(o.$slots, "actions", {}, () => [
-            e.showPreviewAction && y.value ? (t(), a("button", {
+            class: "nmorph-video-preview__play",
+            type: "button",
+            "aria-label": o.playing ? `Pause ${o.props.name || "video"}` : `Play ${o.props.name || "video"}`,
+            onClick: o.togglePlayback
+          }, [
+            n(o.NmorphIcon, {
+              size: "medium",
+              color: o.CONTRAST_ICON_COLOR
+            }, {
+              default: i(() => [
+                o.playing ? (r(), l(o.NmorphIconPause, { key: 0 })) : (r(), l(o.NmorphIconPlay, { key: 1 }))
+              ]),
+              _: 1
+              /* STABLE */
+            })
+          ], 8, w)) : (r(), e("div", f, [
+            o.props.loading ? (r(), l(o.NmorphIcon, {
               key: 0,
-              type: "button",
-              class: "nmorph-video-preview__action-button nmorph-video-preview__action-button--preview",
-              "aria-label": `Preview ${e.name || "video"}`,
-              onClick: R
-            }, [
-              l(r(u), {
-                size: "small",
-                color: g
-              }, {
-                default: d(() => [
-                  l(r(ae))
-                ]),
-                _: 1
-              })
-            ], 8, be)) : n("", !0),
-            e.showFullscreenAction && y.value ? (t(), a("button", {
+              size: "large"
+            }, {
+              default: i(() => [
+                n(o.NmorphIconLoader)
+              ]),
+              _: 1
+              /* STABLE */
+            })) : (r(), l(o.NmorphIcon, {
               key: 1,
-              type: "button",
-              class: "nmorph-video-preview__action-button nmorph-video-preview__action-button--fullscreen",
-              "aria-label": `Fullscreen ${e.name || "video"}`,
-              onClick: T
-            }, [
-              l(r(u), {
-                size: "small",
-                color: g
-              }, {
-                default: d(() => [
-                  l(r(le))
-                ]),
-                _: 1
-              })
-            ], 8, ke)) : n("", !0),
-            e.showDefaultActions && e.src ? (t(), a("a", {
-              key: 2,
-              href: e.src,
-              target: "_blank",
-              rel: "noopener noreferrer",
-              class: "nmorph-video-preview__action-link",
-              "aria-label": `Open ${e.name || "video"}`,
-              onClick: x
-            }, [
-              l(r(u), { size: "small" }, {
-                default: d(() => [
-                  l(r(ce))
-                ]),
-                _: 1
-              })
-            ], 8, ge)) : n("", !0),
-            e.downloadHref ? (t(), a("a", {
-              key: 3,
-              href: e.downloadHref,
-              download: e.name,
-              class: "nmorph-video-preview__action-link",
-              "aria-label": `Download ${e.name || "video"}`,
-              onClick: M
-            }, [
-              l(r(u), { size: "small" }, {
-                default: d(() => [
-                  l(r(ue))
-                ]),
-                _: 1
-              })
-            ], 8, Ae)) : n("", !0)
-          ])
-        ])) : n("", !0)
-      ], 16),
-      f.value ? (t(), v(ee, {
+              size: "large"
+            }, {
+              default: i(() => [
+                n(o.NmorphIconVideo)
+              ]),
+              _: 1
+              /* STABLE */
+            })),
+            o.props.error && o.props.errorText ? (r(), e(
+              "span",
+              k,
+              p(o.props.errorText),
+              1
+              /* TEXT */
+            )) : a("v-if", !0)
+          ])),
+          o.props.showMeta && (o.props.name || o.duration) ? (r(), e("div", N, [
+            o.props.name ? (r(), e(
+              "span",
+              b,
+              p(o.props.name),
+              1
+              /* TEXT */
+            )) : a("v-if", !0),
+            o.duration ? (r(), e(
+              "span",
+              O,
+              p(o.duration),
+              1
+              /* TEXT */
+            )) : a("v-if", !0)
+          ])) : a("v-if", !0),
+          o.hasActions ? (r(), e("div", C, [
+            m(c.$slots, "actions", {}, () => [
+              o.props.showPreviewAction && o.mediaReady ? (r(), e("button", {
+                key: 0,
+                type: "button",
+                class: "nmorph-video-preview__action-button nmorph-video-preview__action-button--preview",
+                "aria-label": `Preview ${o.props.name || "video"}`,
+                onClick: o.previewHandler
+              }, [
+                n(o.NmorphIcon, {
+                  size: "small",
+                  color: o.CONTRAST_ICON_COLOR
+                }, {
+                  default: i(() => [
+                    n(o.NmorphIconEye)
+                  ]),
+                  _: 1
+                  /* STABLE */
+                })
+              ], 8, I)) : a("v-if", !0),
+              o.props.showFullscreenAction && o.mediaReady ? (r(), e("button", {
+                key: 1,
+                type: "button",
+                class: "nmorph-video-preview__action-button nmorph-video-preview__action-button--fullscreen",
+                "aria-label": `Fullscreen ${o.props.name || "video"}`,
+                onClick: o.fullscreenHandler
+              }, [
+                n(o.NmorphIcon, {
+                  size: "small",
+                  color: o.CONTRAST_ICON_COLOR
+                }, {
+                  default: i(() => [
+                    n(o.NmorphIconFullScreen)
+                  ]),
+                  _: 1
+                  /* STABLE */
+                })
+              ], 8, P)) : a("v-if", !0),
+              o.props.showDefaultActions && o.props.src ? (r(), e("a", {
+                key: 2,
+                href: o.props.src,
+                target: "_blank",
+                rel: "noopener noreferrer",
+                class: "nmorph-video-preview__action-link",
+                "aria-label": `Open ${o.props.name || "video"}`,
+                onClick: o.openHandler
+              }, [
+                n(o.NmorphIcon, { size: "small" }, {
+                  default: i(() => [
+                    n(o.NmorphIconOpen)
+                  ]),
+                  _: 1
+                  /* STABLE */
+                })
+              ], 8, g)) : a("v-if", !0),
+              o.props.downloadHref ? (r(), e("a", {
+                key: 3,
+                href: o.props.downloadHref,
+                download: o.props.name,
+                class: "nmorph-video-preview__action-link",
+                "aria-label": `Download ${o.props.name || "video"}`,
+                onClick: o.downloadHandler
+              }, [
+                n(o.NmorphIcon, { size: "small" }, {
+                  default: i(() => [
+                    n(o.NmorphIconDownload)
+                  ]),
+                  _: 1
+                  /* STABLE */
+                })
+              ], 8, H)) : a("v-if", !0)
+            ])
+          ])) : a("v-if", !0)
+        ],
+        16
+        /* FULL_PROPS */
+      ),
+      o.previewOpen ? (r(), l(v, {
         key: 0,
         to: "body"
       }, [
-        _("div", Be, [
-          l(r(ne), {
-            show: f.value,
+        d("div", R, [
+          n(o.NmorphOverlay, {
+            show: o.previewOpen,
             "disabled-teleport": "",
-            onOnOutsideClick: B,
-            onOnEscapeKeydown: B
+            onOnOutsideClick: o.closePreviewHandler,
+            onOnEscapeKeydown: o.closePreviewHandler
           }, {
-            default: d(() => [
-              _("div", Pe, [
-                _("video", {
+            default: i(() => [
+              d("div", T, [
+                d("video", {
                   class: "nmorph-video-preview__portal-media",
-                  src: e.src,
-                  poster: e.poster || void 0,
+                  src: o.props.src,
+                  poster: o.props.poster || void 0,
                   controls: "",
                   autoplay: "",
-                  muted: e.muted,
-                  playsinline: e.playsinline,
-                  preload: e.preload
-                }, null, 8, Ce)
+                  muted: o.props.muted,
+                  playsinline: o.props.playsinline,
+                  preload: o.props.preload
+                }, null, 8, A)
               ])
             ]),
             _: 1
+            /* STABLE */
           }, 8, ["show"])
         ])
-      ])) : n("", !0)
-    ], 64));
-  }
-});
+      ])) : a("v-if", !0)
+    ],
+    64
+    /* STABLE_FRAGMENT */
+  );
+}
+const j = /* @__PURE__ */ h(s, [["render", z], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-video-preview/NmorphVideoPreview.vue"]]);
 export {
-  qe as default
+  j as default
 };

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

@@ -0,0 +1,134 @@
+import './NmorphVideoPreview.css';
+import { defineComponent as V, useAttrs as j, useSlots as L, ref as u, computed as t } from "vue";
+import { useModifiers as T } from "../../../utils/create-modifiers.js";
+import { createCssSizeVariables as k } from "../../../utils/common.js";
+import $ from "../../../assets/icons/video.svg.js";
+import z from "../../others/nmorph-overlay/NmorphOverlay.vue.js";
+import G from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+import J from "../../../assets/icons/play.svg.js";
+import K from "../../../assets/icons/pause.svg.js";
+import Q from "../../../assets/icons/open.svg.js";
+import U from "../../../assets/icons/loading.svg.js";
+import W from "../../../assets/icons/full-screen.svg.js";
+import X from "../../../assets/icons/eye.svg.js";
+import Y from "../../../assets/icons/download.svg.js";
+const Z = "var(--nmorph-contrast-text-color)", fe = /* @__PURE__ */ V({
+  inheritAttrs: !1,
+  __name: "NmorphVideoPreview",
+  props: {
+    src: { type: String, required: !0 },
+    poster: { type: String, required: !1, default: "" },
+    name: { type: String, required: !1, default: "" },
+    width: { type: [Number, String], required: !1, default: void 0 },
+    height: { type: [Number, String], required: !1, default: void 0 },
+    durationMs: { type: Number, required: !1, default: void 0 },
+    surface: { type: String, required: !1, default: "card" },
+    embedded: { type: Boolean, required: !1, default: !1 },
+    showMeta: { type: Boolean, required: !1, default: !0 },
+    compact: { type: Boolean, required: !1, default: !1 },
+    controls: { type: Boolean, required: !1, default: !0 },
+    muted: { type: Boolean, required: !1, default: !1 },
+    playsinline: { type: Boolean, required: !1, default: !0 },
+    preload: { type: String, required: !1, default: "metadata" },
+    fit: { type: String, required: !1, default: "cover" },
+    downloadHref: { type: String, required: !1, default: "" },
+    loading: { type: Boolean, required: !1, default: !1 },
+    error: { type: Boolean, required: !1, default: !1 },
+    errorText: { type: String, required: !1, default: "" },
+    showDefaultActions: { type: Boolean, required: !1, default: !0 },
+    showPreviewAction: { type: Boolean, required: !1, default: !0 },
+    showFullscreenAction: { type: Boolean, required: !1, default: !0 },
+    previewMode: { type: String, required: !1, default: "internal" }
+  },
+  emits: ["play", "pause", "open", "preview", "fullscreen", "download", "error"],
+  setup(g, { expose: q, emit: N }) {
+    const e = g, o = N, s = j(), d = L(), n = u(null), i = u(!1), a = u(!1), c = (r) => {
+      if (!r || r < 0) return "";
+      const l = Math.round(r / 1e3), R = Math.floor(l / 60), x = l % 60;
+      return `${R}:${x.toString().padStart(2, "0")}`;
+    }, S = t(() => c(e.durationMs)), p = t(() => !!e.src && !e.loading && !e.error), f = t(() => p.value && (e.showPreviewAction || e.showFullscreenAction)), m = t(() => e.showDefaultActions && (e.src || e.downloadHref)), h = t(() => !!d.actions || f.value || m.value), v = t(
+      () => T({
+        "nmorph-video-preview": [
+          e.surface,
+          e.embedded && "embedded",
+          !e.showMeta && "no-meta",
+          e.compact && "compact",
+          e.fit,
+          e.loading && "loading",
+          e.error && "error",
+          a.value && "playing",
+          !h.value && "no-actions"
+        ]
+      })
+    ), y = t(
+      () => k({
+        "--nmorph-video-preview-width": e.width,
+        "--nmorph-video-preview-height": e.height
+      })
+    ), I = t(() => Object.fromEntries(Object.entries(s).filter(([r]) => r !== "class" && r !== "style"))), b = t(() => [v.value, s.class]), A = t(() => [y.value, s.style]), B = () => o("open"), O = () => o("download"), _ = () => {
+      e.previewMode === "internal" && (i.value = !0), o("preview");
+    }, H = () => {
+      i.value = !1;
+    }, P = async () => {
+      const r = n.value;
+      if (r) {
+        o("fullscreen");
+        try {
+          const l = r.requestFullscreen?.() || r.webkitRequestFullscreen?.();
+          if (l) {
+            await l;
+            return;
+          }
+          r.webkitEnterFullscreen?.();
+        } catch {
+        }
+      }
+    }, F = async () => {
+      if (!(!n.value || e.loading || e.error)) {
+        if (a.value) {
+          n.value.pause();
+          return;
+        }
+        try {
+          await n.value.play();
+        } catch {
+          a.value = !1;
+        }
+      }
+    }, M = (r) => {
+      a.value = !0, o("play", r);
+    }, C = (r) => {
+      a.value = !1, o("pause", r);
+    }, D = () => {
+      a.value = !1;
+    }, E = (r) => {
+      a.value = !1, o("error", r);
+    };
+    q({ videoRef: n });
+    const w = { CONTRAST_ICON_COLOR: Z, props: e, emit: o, attrs: s, slots: d, videoRef: n, previewOpen: i, playing: a, formatDuration: c, duration: S, mediaReady: p, hasPreviewActions: f, hasDefaultActions: m, hasActions: h, modifiers: v, styles: y, rootAttrs: I, rootClass: b, rootStyle: A, openHandler: B, downloadHandler: O, previewHandler: _, closePreviewHandler: H, fullscreenHandler: P, togglePlayback: F, playHandler: M, pauseHandler: C, endedHandler: D, errorHandler: E, get NmorphIcon() {
+      return G;
+    }, get NmorphIconDownload() {
+      return Y;
+    }, get NmorphIconEye() {
+      return X;
+    }, get NmorphIconFullScreen() {
+      return W;
+    }, get NmorphIconLoader() {
+      return U;
+    }, get NmorphIconOpen() {
+      return Q;
+    }, get NmorphOverlay() {
+      return z;
+    }, get NmorphIconPause() {
+      return K;
+    }, get NmorphIconPlay() {
+      return J;
+    }, get NmorphIconVideo() {
+      return $;
+    } };
+    return Object.defineProperty(w, "__isScriptSetup", { enumerable: !1, value: !0 }), w;
+  }
+});
+export {
+  fe as default
+};