@nmorph/nmorph-ui-kit 2.2.48 → 2.2.50

package/dist/components/data/nmorph-file-card/NmorphFileCard.vue.js

@@ -1,31 +1,36 @@
 import './NmorphFileCard.css';
-import { defineComponent as M, useSlots as $, computed as t, openBlock as r, createElementBlock as a, normalizeClass as E, createElementVNode as _, createBlock as v, unref as n, withCtx as c, createVNode as l, resolveDynamicComponent as F, toDisplayString as d, createCommentVNode as s, renderSlot as R } from "vue";
-import { useModifiers as V } from "../../../utils/create-modifiers.js";
-import { getFileExtension as z, getPlainFileType as W, getTypeCandidates as K, isKnownFileType as m } from "../../../utils/file-types.js";
-import { NmorphImageResolution as O, NmorphAudioResolution as j, NmorphVideoResolution as G, NmorphArchiveResolution as P, NmorphDocResolution as q } from "../../form/nmorph-file-upload/types.js";
-import J from "../../../assets/icons/image.svg.js";
-import Q from "../../../assets/icons/video.svg.js";
-import U from "../../../assets/icons/archive.svg.js";
-import g from "../../../assets/icons/doc.svg.js";
+import { defineComponent as O, useSlots as W, computed as r, openBlock as a, createElementBlock as t, normalizeClass as K, createElementVNode as v, createBlock as c, unref as n, withCtx as m, createVNode as l, resolveDynamicComponent as j, createCommentVNode as i, toDisplayString as h, renderSlot as G } from "vue";
+import { useModifiers as q } from "../../../utils/create-modifiers.js";
+import { getFileExtension as J, getPlainFileType as Q, getTypeCandidates as U, isKnownFileType as d } from "../../../utils/file-types.js";
+import { NmorphImageResolution as X, NmorphAudioResolution as Y, NmorphVideoResolution as Z, NmorphArchiveResolution as ee, NmorphDocResolution as oe } from "../../form/nmorph-file-upload/types.js";
+import re from "../nmorph-audio-preview/NmorphAudioPreview.vue.js";
+/* empty css                                              */
+import ae from "../nmorph-video-preview/NmorphVideoPreview.vue.js";
+/* empty css                                              */
+import ne from "../../../assets/icons/image.svg.js";
+import te from "../../../assets/icons/archive.svg.js";
+import A from "../../../assets/icons/doc.svg.js";
 import p from "../../basic/nmorph-icon/NmorphIcon.vue.js";
 /* empty css                                      */
-import X from "../../../assets/icons/audio.svg.js";
-import Y from "../../../assets/icons/loading.svg.js";
-import Z from "../../../assets/icons/open.svg.js";
-import ee from "../../../assets/icons/download.svg.js";
-const oe = { class: "nmorph-file-card__icon" }, re = { class: "nmorph-file-card__body" }, te = { class: "nmorph-file-card__name" }, ae = {
+import ie from "../../../assets/icons/eye.svg.js";
+import le from "../../../assets/icons/audio.svg.js";
+import se from "../../../assets/icons/video.svg.js";
+import ce from "../../../assets/icons/loading.svg.js";
+import me from "../../../assets/icons/open.svg.js";
+import de from "../../../assets/icons/download.svg.js";
+const pe = { class: "nmorph-file-card__icon" }, ue = ["href", "aria-label"], fe = { class: "nmorph-file-card__body" }, ve = { class: "nmorph-file-card__info" }, he = { class: "nmorph-file-card__name" }, _e = {
   key: 0,
   class: "nmorph-file-card__error"
-}, ne = {
+}, we = {
   key: 1,
   class: "nmorph-file-card__meta"
-}, ie = {
+}, ye = {
   key: 0,
   class: "nmorph-file-card__badge"
-}, le = {
+}, ge = {
   key: 1,
   class: "nmorph-file-card__actions"
-}, se = ["href", "aria-label"], me = ["href", "download", "aria-label"], Te = /* @__PURE__ */ M({
+}, Be = ["href", "aria-label"], Ne = ["href", "download", "aria-label"], Oe = /* @__PURE__ */ O({
   __name: "NmorphFileCard",
   props: {
     name: {},
@@ -34,6 +39,7 @@ const oe = { class: "nmorph-file-card__icon" }, re = { class: "nmorph-file-card_
     size: { default: void 0 },
     previewSrc: { default: "" },
     downloadHref: { default: "" },
+    mediaPreview: { default: "none" },
     surface: { default: "card" },
     showExtensionBadge: { type: Boolean, default: !0 },
     iconSurface: { type: Boolean, default: !0 },
@@ -44,90 +50,141 @@ const oe = { class: "nmorph-file-card__icon" }, re = { class: "nmorph-file-card_
     showDefaultActions: { type: Boolean, default: !0 }
   },
   emits: ["open", "download", "error"],
-  setup(B, { emit: k }) {
-    const e = B, y = k, T = $(), u = t(() => (e.extension || z(e.name) || W(e.mimeType)).toLowerCase()), i = t(() => K(e.mimeType, e.name)), x = t(() => e.mimeType.toLowerCase().startsWith("image/") || i.value.some((o) => m(o, O)) ? J : e.mimeType.toLowerCase().startsWith("audio/") || i.value.some((o) => m(o, j)) ? X : e.mimeType.toLowerCase().startsWith("video/") || i.value.some((o) => m(o, G)) ? Q : i.value.some((o) => m(o, P)) ? U : i.value.some((o) => m(o, q)) ? g : g), C = (o) => {
+  setup(P, { emit: H }) {
+    const e = P, _ = H, D = W(), u = r(() => (e.extension || J(e.name) || Q(e.mimeType)).toLowerCase()), s = r(() => U(e.mimeType, e.name)), $ = r(() => e.mimeType.toLowerCase().startsWith("image/") || s.value.some((o) => d(o, X)) ? ne : e.mimeType.toLowerCase().startsWith("audio/") || s.value.some((o) => d(o, Y)) ? le : e.mimeType.toLowerCase().startsWith("video/") || s.value.some((o) => d(o, Z)) ? se : s.value.some((o) => d(o, ee)) ? te : s.value.some((o) => d(o, oe)) ? A : A), E = (o) => {
       if (o === void 0 || Number.isNaN(o) || o < 0) return "";
       if (o === 0) return "0 B";
-      const f = ["B", "KB", "MB", "GB", "TB"], h = Math.min(Math.floor(Math.log(o) / Math.log(1024)), f.length - 1), N = o / 1024 ** h, L = N >= 10 || h === 0 ? 0 : 1;
-      return `${N.toFixed(L)} ${f[h]}`;
-    }, S = t(() => C(e.size)), I = t(() => u.value || e.mimeType), w = t(() => [I.value, S.value].filter(Boolean).join(" · ")), b = t(
-      () => !!T.actions || e.showDefaultActions && (e.previewSrc || e.downloadHref)
-    ), D = t(
-      () => V({
+      const B = ["B", "KB", "MB", "GB", "TB"], N = Math.min(Math.floor(Math.log(o) / Math.log(1024)), B.length - 1), k = o / 1024 ** N, V = k >= 10 || N === 0 || Number.isInteger(k) ? 0 : 1;
+      return `${k.toFixed(V)} ${B[N]}`;
+    }, L = r(() => E(e.size)), M = r(() => u.value || e.mimeType), b = r(() => [M.value, L.value].filter(Boolean).join(" · ")), w = r(() => e.mediaPreview === "audio" && !!e.previewSrc && !e.loading && !e.error), y = r(() => e.mediaPreview === "video" && !!e.previewSrc && !e.loading && !e.error), f = r(() => w.value || y.value), z = r(() => e.compact ? "96px" : "120px"), S = r(() => e.mimeType.toLowerCase() === "application/pdf" || u.value === "pdf"), x = r(() => S.value ? e.previewSrc || e.downloadHref : ""), g = r(
+      () => e.showDefaultActions && !!x.value && !f.value && S.value
+    ), C = r(
+      () => !!D.actions || e.showDefaultActions && (e.previewSrc && !f.value && !g.value || e.downloadHref)
+    ), F = r(
+      () => q({
         "nmorph-file-card": [
           e.surface,
           e.compact && "compact",
           e.loading && "loading",
           e.error && "error",
-          !e.iconSurface && "icon-plain"
+          f.value && "media",
+          w.value && "media-audio",
+          y.value && "media-video",
+          !e.iconSurface && "icon-plain",
+          !C.value && "no-actions"
         ]
       })
-    ), A = () => y("open"), H = () => y("download");
-    return (o, f) => (r(), a("div", {
-      class: E(D.value)
+    ), T = () => _("open"), R = () => _("download"), I = () => _("error");
+    return (o, B) => (a(), t("div", {
+      class: K(F.value)
     }, [
-      _("div", oe, [
-        e.loading ? (r(), v(n(p), {
+      v("div", pe, [
+        e.loading ? (a(), c(n(p), {
           key: 0,
           size: "medium"
         }, {
-          default: c(() => [
-            l(n(Y))
+          default: m(() => [
+            l(n(ce))
           ]),
           _: 1
-        })) : (r(), v(n(p), {
+        })) : (a(), c(n(p), {
           key: 1,
           size: "medium"
         }, {
-          default: c(() => [
-            (r(), v(F(x.value)))
+          default: m(() => [
+            (a(), c(j($.value)))
           ]),
           _: 1
-        }))
+        })),
+        g.value && !e.loading && !e.error ? (a(), t("a", {
+          key: 2,
+          href: x.value,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          class: "nmorph-file-card__icon-action",
+          "aria-label": `Preview ${e.name}`,
+          onClick: T
+        }, [
+          l(n(p), { size: "small" }, {
+            default: m(() => [
+              l(n(ie))
+            ]),
+            _: 1
+          })
+        ], 8, ue)) : i("", !0)
       ]),
-      _("div", re, [
-        _("span", te, d(e.name), 1),
-        e.error && e.errorText ? (r(), a("span", ae, d(e.errorText), 1)) : w.value ? (r(), a("span", ne, d(w.value), 1)) : s("", !0)
+      v("div", fe, [
+        v("div", ve, [
+          v("span", he, h(e.name), 1),
+          e.error && e.errorText ? (a(), t("span", _e, h(e.errorText), 1)) : b.value ? (a(), t("span", we, h(b.value), 1)) : i("", !0)
+        ]),
+        w.value ? (a(), c(re, {
+          key: 0,
+          class: "nmorph-file-card__audio-preview",
+          src: e.previewSrc,
+          name: e.name,
+          surface: "plain",
+          embedded: "",
+          compact: "",
+          "show-icon": !1,
+          "show-header": !1,
+          "show-default-actions": !1,
+          onError: I
+        }, null, 8, ["src", "name"])) : i("", !0),
+        y.value ? (a(), c(ae, {
+          key: 1,
+          class: "nmorph-file-card__video-preview",
+          src: e.previewSrc,
+          name: e.name,
+          height: z.value,
+          surface: "plain",
+          embedded: "",
+          compact: "",
+          controls: !1,
+          "show-meta": !1,
+          "show-default-actions": !1,
+          onError: I
+        }, null, 8, ["src", "name", "height"])) : i("", !0)
       ]),
-      e.showExtensionBadge && u.value ? (r(), a("span", ie, d(u.value), 1)) : s("", !0),
-      b.value ? (r(), a("div", le, [
-        R(o.$slots, "actions", {}, () => [
-          e.previewSrc ? (r(), a("a", {
+      e.showExtensionBadge && u.value ? (a(), t("span", ye, h(u.value), 1)) : i("", !0),
+      C.value ? (a(), t("div", ge, [
+        G(o.$slots, "actions", {}, () => [
+          e.previewSrc && !f.value && !g.value ? (a(), t("a", {
             key: 0,
             href: e.previewSrc,
             target: "_blank",
             rel: "noopener noreferrer",
             class: "nmorph-file-card__action-link",
             "aria-label": `Open ${e.name}`,
-            onClick: A
+            onClick: T
           }, [
             l(n(p), { size: "small" }, {
-              default: c(() => [
-                l(n(Z))
+              default: m(() => [
+                l(n(me))
               ]),
               _: 1
             })
-          ], 8, se)) : s("", !0),
-          e.downloadHref ? (r(), a("a", {
+          ], 8, Be)) : i("", !0),
+          e.downloadHref ? (a(), t("a", {
             key: 1,
             href: e.downloadHref,
             download: e.name,
             class: "nmorph-file-card__action-link",
             "aria-label": `Download ${e.name}`,
-            onClick: H
+            onClick: R
           }, [
             l(n(p), { size: "small" }, {
-              default: c(() => [
-                l(n(ee))
+              default: m(() => [
+                l(n(de))
               ]),
               _: 1
             })
-          ], 8, me)) : s("", !0)
+          ], 8, Ne)) : i("", !0)
         ])
-      ])) : s("", !0)
+      ])) : i("", !0)
     ], 2));
   }
 });
 export {
-  Te as default
+  Oe as default
 };

package/dist/components/data/nmorph-video-preview/NmorphVideoPreview.css

@@ -1 +1 @@
-.nmorph-video-preview{position:relative;display:flex;width:var(--nmorph-video-preview-width, 280px);min-width:0;max-width:100%;height:var(--nmorph-video-preview-height, 158px);overflow:hidden;color:var(--nmorph-white-color);background:color-mix(in srgb,var(--nmorph-black-color) 72%,var(--nmorph-main-color));border-radius:var(--default-border-radius);box-shadow:var(--nmorph-shadow-inset)}.nmorph-video-preview .nmorph-video-preview__media,.nmorph-video-preview .nmorph-video-preview__state{width:100%;height:100%}.nmorph-video-preview .nmorph-video-preview__media{display:block;object-fit:cover}.nmorph-video-preview.nmorph-video-preview--contain .nmorph-video-preview__media{object-fit:contain}.nmorph-video-preview .nmorph-video-preview__state{display:flex;flex-direction:column;gap:var(--indentation-02);justify-content:center;align-items:center;padding:var(--indentation-03);text-align:center}.nmorph-video-preview .nmorph-video-preview__error{max-width:100%;overflow:hidden;color:var(--nmorph-error-text-color);font-size:var(--font-size-extra-small);white-space:nowrap;text-overflow:ellipsis}.nmorph-video-preview .nmorph-video-preview__meta{position:absolute;right:0;bottom:0;left:0;display:flex;gap:var(--indentation-02);justify-content:space-between;align-items:center;padding:18px var(--indentation-03) var(--indentation-02);background:linear-gradient(transparent,color-mix(in srgb,var(--nmorph-black-color) 66%,transparent));pointer-events:none}.nmorph-video-preview .nmorph-video-preview__name,.nmorph-video-preview .nmorph-video-preview__duration{min-width:0;overflow:hidden;font-size:var(--font-size-extra-small);line-height:var(--line-height-regular);white-space:nowrap;text-overflow:ellipsis}.nmorph-video-preview .nmorph-video-preview__name{flex:1 1 auto}.nmorph-video-preview .nmorph-video-preview__duration{flex:0 0 auto;font-variant-numeric:tabular-nums}.nmorph-video-preview .nmorph-video-preview__actions{position:absolute;top:var(--indentation-02);right:var(--indentation-02);display:flex;gap:var(--indentation-01);padding:2px;background:color-mix(in srgb,var(--nmorph-main-color) 86%,transparent);border-radius:var(--default-border-radius)}.nmorph-video-preview .nmorph-video-preview__action-link{display:inline-flex;justify-content:center;align-items:center;width:22px;height:22px;color:var(--nmorph-text-color);text-decoration:none;border-radius:var(--default-border-radius)}.nmorph-video-preview .nmorph-video-preview__action-link:hover{color:var(--nmorph-accent-color);background:color-mix(in srgb,var(--nmorph-accent-color) 10%,transparent)}.nmorph-video-preview .nmorph-video-preview__action-link .nmorph-icon{--color: currentColor}.nmorph-video-preview.nmorph-video-preview--compact{width:var(--nmorph-video-preview-width, 180px);height:var(--nmorph-video-preview-height, 102px)}.nmorph-video-preview.nmorph-video-preview--error{outline:1px solid var(--nmorph-error-color)}
+.nmorph-video-preview{position:relative;display:flex;width:var(--nmorph-video-preview-width, 280px);min-width:0;max-width:100%;height:var(--nmorph-video-preview-height, 158px);overflow:hidden;color:var(--nmorph-white-color);background:color-mix(in srgb,var(--nmorph-black-color) 72%,var(--nmorph-main-color));border-radius:var(--default-border-radius);box-shadow:var(--nmorph-shadow-inset)}.nmorph-video-preview .nmorph-video-preview__media,.nmorph-video-preview .nmorph-video-preview__state{width:100%;height:100%}.nmorph-video-preview.nmorph-video-preview--soft .nmorph-video-preview__state,.nmorph-video-preview.nmorph-video-preview--plain .nmorph-video-preview__state{color:var(--nmorph-text-color)}.nmorph-video-preview .nmorph-video-preview__media{display:block;object-fit:cover}.nmorph-video-preview.nmorph-video-preview--contain .nmorph-video-preview__media{object-fit:contain}.nmorph-video-preview .nmorph-video-preview__state{display:flex;flex-direction:column;gap:var(--indentation-02);justify-content:center;align-items:center;padding:var(--indentation-03);text-align:center}.nmorph-video-preview .nmorph-video-preview__error{max-width:100%;overflow:hidden;color:var(--nmorph-error-text-color);font-size:var(--font-size-extra-small);white-space:nowrap;text-overflow:ellipsis}.nmorph-video-preview .nmorph-video-preview__meta{position:absolute;right:0;bottom:0;left:0;display:flex;gap:var(--indentation-02);justify-content:space-between;align-items:center;padding:18px var(--indentation-03) var(--indentation-02);background:linear-gradient(transparent,color-mix(in srgb,var(--nmorph-black-color) 66%,transparent));pointer-events:none}.nmorph-video-preview .nmorph-video-preview__play{position:absolute;top:50%;left:50%;z-index:1;display:inline-flex;justify-content:center;align-items:center;width:42px;height:42px;padding:0;color:var(--nmorph-text-color);background:color-mix(in srgb,var(--nmorph-main-color) 86%,transparent);border:0;border-radius:var(--border-radius-circular);box-shadow:var(--nmorph-shadow-outset);transform:translate(-50%,-50%);cursor:pointer}.nmorph-video-preview .nmorph-video-preview__play .nmorph-icon{--color: currentColor}.nmorph-video-preview .nmorph-video-preview__play:hover{color:var(--nmorph-accent-color)}.nmorph-video-preview.nmorph-video-preview--playing .nmorph-video-preview__play{opacity:.72}.nmorph-video-preview.nmorph-video-preview--embedded{width:var(--nmorph-video-preview-width, 100%);height:var(--nmorph-video-preview-height, 120px);box-shadow:none}.nmorph-video-preview.nmorph-video-preview--embedded .nmorph-video-preview__play,.nmorph-video-preview.nmorph-video-preview--soft .nmorph-video-preview__play,.nmorph-video-preview.nmorph-video-preview--plain .nmorph-video-preview__play{box-shadow:none}.nmorph-video-preview .nmorph-video-preview__name,.nmorph-video-preview .nmorph-video-preview__duration{min-width:0;overflow:hidden;font-size:var(--font-size-extra-small);line-height:var(--line-height-regular);white-space:nowrap;text-overflow:ellipsis}.nmorph-video-preview .nmorph-video-preview__name{flex:1 1 auto}.nmorph-video-preview .nmorph-video-preview__duration{flex:0 0 auto;font-variant-numeric:tabular-nums}.nmorph-video-preview .nmorph-video-preview__actions{position:absolute;top:var(--indentation-02);right:var(--indentation-02);display:flex;gap:var(--indentation-01);padding:2px;background:color-mix(in srgb,var(--nmorph-main-color) 86%,transparent);border-radius:var(--default-border-radius)}.nmorph-video-preview .nmorph-video-preview__action-link{display:inline-flex;justify-content:center;align-items:center;width:22px;height:22px;color:var(--nmorph-text-color);text-decoration:none;border-radius:var(--default-border-radius)}.nmorph-video-preview .nmorph-video-preview__action-link:hover{color:var(--nmorph-accent-color);background:color-mix(in srgb,var(--nmorph-accent-color) 10%,transparent)}.nmorph-video-preview .nmorph-video-preview__action-link .nmorph-icon{--color: currentColor}.nmorph-video-preview.nmorph-video-preview--compact{width:var(--nmorph-video-preview-width, 180px);height:var(--nmorph-video-preview-height, 102px)}.nmorph-video-preview.nmorph-video-preview--soft{background:color-mix(in srgb,var(--nmorph-accent-color) 6%,transparent);box-shadow:none}.nmorph-video-preview.nmorph-video-preview--plain{background:transparent;box-shadow:none}.nmorph-video-preview.nmorph-video-preview--error{outline:1px solid var(--nmorph-error-color)}

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

@@ -1,32 +1,34 @@
 import './NmorphVideoPreview.css';
-import { defineComponent as C, useSlots as b, computed as p, openBlock as o, createElementBlock as t, normalizeStyle as D, normalizeClass as H, createBlock as v, unref as a, withCtx as m, createVNode as l, toDisplayString as f, createCommentVNode as s, renderSlot as V, createElementVNode as $ } from "vue";
-import { useModifiers as x } from "../../../utils/create-modifiers.js";
-import { createCssSizeVariables as I } from "../../../utils/common.js";
+import { defineComponent as V, useSlots as E, ref as y, computed as u, openBlock as o, createElementBlock as t, normalizeStyle as A, normalizeClass as T, createCommentVNode as n, createVNode as s, unref as r, withCtx as p, createBlock as m, toDisplayString as h, renderSlot as O, createElementVNode as R } from "vue";
+import { useModifiers as L } from "../../../utils/create-modifiers.js";
+import { createCssSizeVariables as j } from "../../../utils/common.js";
 import c from "../../basic/nmorph-icon/NmorphIcon.vue.js";
 /* empty css                                      */
-import A from "../../../assets/icons/loading.svg.js";
-import E from "../../../assets/icons/video.svg.js";
-import M from "../../../assets/icons/open.svg.js";
-import P from "../../../assets/icons/download.svg.js";
-const T = ["src", "poster", "controls", "muted", "playsinline", "preload"], O = {
-  key: 1,
+import q from "../../../assets/icons/video.svg.js";
+import F from "../../../assets/icons/pause.svg.js";
+import G from "../../../assets/icons/play.svg.js";
+import J from "../../../assets/icons/loading.svg.js";
+import K from "../../../assets/icons/open.svg.js";
+import Q from "../../../assets/icons/download.svg.js";
+const U = ["src", "poster", "controls", "muted", "playsinline", "preload"], W = ["aria-label"], X = {
+  key: 2,
   class: "nmorph-video-preview__state"
-}, L = {
+}, Y = {
   key: 2,
   class: "nmorph-video-preview__error"
-}, j = {
-  key: 2,
+}, Z = {
+  key: 3,
   class: "nmorph-video-preview__meta"
-}, q = {
+}, ee = {
   key: 0,
   class: "nmorph-video-preview__name"
-}, F = {
+}, oe = {
   key: 1,
   class: "nmorph-video-preview__duration"
-}, G = {
-  key: 3,
+}, ae = {
+  key: 4,
   class: "nmorph-video-preview__actions"
-}, J = ["href", "aria-label"], K = ["href", "download", "aria-label"], re = /* @__PURE__ */ C({
+}, re = ["href", "aria-label"], te = ["href", "download", "aria-label"], he = /* @__PURE__ */ V({
   __name: "NmorphVideoPreview",
   props: {
     src: {},
@@ -35,6 +37,9 @@ const T = ["src", "poster", "controls", "muted", "playsinline", "preload"], O =
     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 },
@@ -48,29 +53,61 @@ const T = ["src", "poster", "controls", "muted", "playsinline", "preload"], O =
     showDefaultActions: { type: Boolean, default: !0 }
   },
   emits: ["play", "pause", "open", "download", "error"],
-  setup(_, { emit: h }) {
-    const e = _, i = h, w = b(), y = (d) => {
-      if (!d || d < 0) return "";
-      const r = Math.round(d / 1e3), n = Math.floor(r / 60), z = r % 60;
-      return `${n}:${z.toString().padStart(2, "0")}`;
-    }, u = p(() => y(e.durationMs)), k = p(
-      () => !!w.actions || e.showDefaultActions && (e.src || e.downloadHref)
-    ), g = p(
-      () => x({
-        "nmorph-video-preview": [e.compact && "compact", e.fit, e.loading && "loading", e.error && "error"]
+  setup(w, { expose: k, emit: g }) {
+    const e = w, i = g, b = E(), d = y(null), l = y(!1), B = (a) => {
+      if (!a || a < 0) return "";
+      const v = Math.round(a / 1e3), I = Math.floor(v / 60), M = v % 60;
+      return `${I}:${M.toString().padStart(2, "0")}`;
+    }, f = u(() => B(e.durationMs)), _ = u(
+      () => !!b.actions || e.showDefaultActions && (e.src || e.downloadHref)
+    ), H = u(
+      () => L({
+        "nmorph-video-preview": [
+          e.surface,
+          e.embedded && "embedded",
+          !e.showMeta && "no-meta",
+          e.compact && "compact",
+          e.fit,
+          e.loading && "loading",
+          e.error && "error",
+          l.value && "playing",
+          !_.value && "no-actions"
+        ]
       })
-    ), B = p(
-      () => I({
+    ), N = u(
+      () => j({
         "--nmorph-video-preview-width": e.width,
         "--nmorph-video-preview-height": e.height
       })
-    ), N = () => i("open"), S = () => i("download");
-    return (d, r) => (o(), t("div", {
-      class: H(g.value),
-      style: D(B.value)
+    ), z = () => i("open"), C = () => i("download"), P = async () => {
+      if (!(!d.value || e.loading || e.error)) {
+        if (l.value) {
+          d.value.pause();
+          return;
+        }
+        try {
+          await d.value.play();
+        } catch {
+          l.value = !1;
+        }
+      }
+    }, S = (a) => {
+      l.value = !0, i("play", a);
+    }, $ = (a) => {
+      l.value = !1, i("pause", a);
+    }, x = () => {
+      l.value = !1;
+    }, D = (a) => {
+      l.value = !1, i("error", a);
+    };
+    return k({ videoRef: d }), (a, v) => (o(), t("div", {
+      class: T(H.value),
+      style: A(N.value)
     }, [
       !e.loading && !e.error ? (o(), t("video", {
         key: 0,
+        ref_key: "videoRef",
+        ref: d,
         class: "nmorph-video-preview__media",
         src: e.src,
         poster: e.poster || void 0,
@@ -78,70 +115,85 @@ const T = ["src", "poster", "controls", "muted", "playsinline", "preload"], O =
         muted: e.muted,
         playsinline: e.playsinline,
         preload: e.preload,
-        onPlay: r[0] || (r[0] = (n) => i("play", n)),
-        onPause: r[1] || (r[1] = (n) => i("pause", n)),
-        onError: r[2] || (r[2] = (n) => i("error", n))
-      }, null, 40, T)) : (o(), t("div", O, [
-        e.loading ? (o(), v(a(c), {
+        onPlay: S,
+        onPause: $,
+        onEnded: x,
+        onError: D
+      }, null, 40, U)) : n("", !0),
+      !e.loading && !e.error ? (o(), t("button", {
+        key: 1,
+        class: "nmorph-video-preview__play",
+        type: "button",
+        "aria-label": l.value ? `Pause ${e.name || "video"}` : `Play ${e.name || "video"}`,
+        onClick: P
+      }, [
+        s(r(c), { size: "medium" }, {
+          default: p(() => [
+            l.value ? (o(), m(r(F), { key: 0 })) : (o(), m(r(G), { key: 1 }))
+          ]),
+          _: 1
+        })
+      ], 8, W)) : (o(), t("div", X, [
+        e.loading ? (o(), m(r(c), {
           key: 0,
           size: "large"
         }, {
-          default: m(() => [
-            l(a(A))
+          default: p(() => [
+            s(r(J))
           ]),
           _: 1
-        })) : (o(), v(a(c), {
+        })) : (o(), m(r(c), {
           key: 1,
           size: "large"
         }, {
-          default: m(() => [
-            l(a(E))
+          default: p(() => [
+            s(r(q))
           ]),
           _: 1
         })),
-        e.error && e.errorText ? (o(), t("span", L, f(e.errorText), 1)) : s("", !0)
+        e.error && e.errorText ? (o(), t("span", Y, h(e.errorText), 1)) : n("", !0)
       ])),
-      e.name || u.value ? (o(), t("div", j, [
-        e.name ? (o(), t("span", q, f(e.name), 1)) : s("", !0),
-        u.value ? (o(), t("span", F, f(u.value), 1)) : s("", !0)
-      ])) : s("", !0),
-      k.value ? (o(), t("div", G, [
-        V(d.$slots, "actions", {}, () => [
-          $("a", {
+      e.showMeta && (e.name || f.value) ? (o(), t("div", Z, [
+        e.name ? (o(), t("span", ee, h(e.name), 1)) : n("", !0),
+        f.value ? (o(), t("span", oe, h(f.value), 1)) : n("", !0)
+      ])) : n("", !0),
+      _.value ? (o(), t("div", ae, [
+        O(a.$slots, "actions", {}, () => [
+          R("a", {
             href: e.src,
             target: "_blank",
             rel: "noopener noreferrer",
             class: "nmorph-video-preview__action-link",
             "aria-label": `Open ${e.name || "video"}`,
-            onClick: N
+            onClick: z
           }, [
-            l(a(c), { size: "small" }, {
-              default: m(() => [
-                l(a(M))
+            s(r(c), { size: "small" }, {
+              default: p(() => [
+                s(r(K))
               ]),
               _: 1
             })
-          ], 8, J),
+          ], 8, re),
           e.downloadHref ? (o(), t("a", {
             key: 0,
             href: e.downloadHref,
             download: e.name,
             class: "nmorph-video-preview__action-link",
             "aria-label": `Download ${e.name || "video"}`,
-            onClick: S
+            onClick: C
           }, [
-            l(a(c), { size: "small" }, {
-              default: m(() => [
-                l(a(P))
+            s(r(c), { size: "small" }, {
+              default: p(() => [
+                s(r(Q))
               ]),
               _: 1
             })
-          ], 8, K)) : s("", !0)
+          ], 8, te)) : n("", !0)
         ])
-      ])) : s("", !0)
+      ])) : n("", !0)
     ], 6));
   }
 });
 export {
-  re as default
+  he as default
 };

package/dist/components/form/nmorph-text-input/NmorphTextInput.vue.js

@@ -5,12 +5,12 @@ import { useFocusableInput as W } from "../../../hooks/use-focusable-input.js";
 import { useFormItemInput as X, useFormItemModel as Y } from "../nmorph-form/use-form-item-input.js";
 import { NmorphComponentHeight as Z } from "../../../types/common.types.js";
 import ee from "../../../assets/icons/eye-blocked.svg.js";
-import te from "../../../assets/icons/eye.svg.js";
-import oe from "../../basic/nmorph-button/NmorphButton.vue.js";
+import te from "../../basic/nmorph-button/NmorphButton.vue.js";
 /* empty css                                          */
-import ne from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+import oe from "../../basic/nmorph-icon/NmorphIcon.vue.js";
 /* empty css                                      */
-import le from "../../../assets/icons/error.svg.js";
+import ne from "../../../assets/icons/error.svg.js";
+import le from "../../../assets/icons/eye.svg.js";
 const re = { class: "nmorph-text-input__input-side" }, ae = {
   key: 0,
   class: "nmorph-text-input__prepend-icon"
@@ -59,7 +59,7 @@ const re = { class: "nmorph-text-input__input-side" }, ae = {
       onBlur: () => l("blur")
     });
     x({ inputDOMRef: u, focus: E, blur: $, select: D });
-    const K = a(() => e.clearable ? le : s.value ? ee : te), R = a(() => e.indentation || (p["prepend-icon"] ? "28px" : "8px")), S = a(() => ({ "--nmorph-text-input-indentation": R.value }));
+    const K = a(() => e.clearable ? ne : s.value ? ee : le), R = a(() => e.indentation || (p["prepend-icon"] ? "28px" : "8px")), S = a(() => ({ "--nmorph-text-input-indentation": R.value }));
     return (r, t) => (i(), f("div", {
       class: T(N.value),
       style: O(S.value)
@@ -89,7 +89,7 @@ const re = { class: "nmorph-text-input__input-side" }, ae = {
           onKeydown: t[2] || (t[2] = (n) => l("keydown", n)),
           onKeyup: t[3] || (t[3] = G((n) => l("on-enter"), ["enter"]))
         }), null, 16, se),
-        e.typePassword || e.clearable ? (i(), b(o(oe), {
+        e.typePassword || e.clearable ? (i(), b(o(te), {
           key: 1,
           disabled: e.disabled,
           class: "nmorph-text-input__password-btn",
@@ -101,7 +101,7 @@ const re = { class: "nmorph-text-input__input-side" }, ae = {
           onClick: P
         }, {
           default: v(() => [
-            L(o(ne), null, {
+            L(o(oe), null, {
               default: v(() => [
                 (i(), b(Q(K.value)))
               ]),