@nmorph/nmorph-ui-kit 2.2.47 → 2.2.49

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__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 c from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+import { defineComponent as E, useSlots as A, ref as h, computed as u, openBlock as o, createElementBlock as t, normalizeStyle as M, normalizeClass as T, createCommentVNode as n, createVNode as s, unref as r, withCtx as c, createBlock as m, toDisplayString as _, 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 p 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/pause.svg.js";
+import F from "../../../assets/icons/play.svg.js";
+import G from "../../../assets/icons/loading.svg.js";
+import J from "../../../assets/icons/video.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"], _e = /* @__PURE__ */ E({
   __name: "NmorphVideoPreview",
   props: {
     src: {},
@@ -35,6 +37,7 @@ const T = ["src", "poster", "controls", "muted", "playsinline", "preload"], O =
     width: { default: void 0 },
     height: { default: void 0 },
     durationMs: { default: void 0 },
+    surface: { default: "card" },
     compact: { type: Boolean, default: !1 },
     controls: { type: Boolean, default: !0 },
     muted: { type: Boolean, default: !1 },
@@ -48,29 +51,58 @@ 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(y, { expose: w, emit: k }) {
+    const e = y, i = k, g = A(), d = h(null), l = h(!1), b = (a) => {
+      if (!a || a < 0) return "";
+      const v = Math.round(a / 1e3), I = Math.floor(v / 60), V = v % 60;
+      return `${I}:${V.toString().padStart(2, "0")}`;
+    }, f = u(() => b(e.durationMs)), B = u(
+      () => !!g.actions || e.showDefaultActions && (e.src || e.downloadHref)
+    ), H = u(
+      () => L({
+        "nmorph-video-preview": [
+          e.surface,
+          e.compact && "compact",
+          e.fit,
+          e.loading && "loading",
+          e.error && "error",
+          l.value && "playing"
+        ]
       })
-    ), 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 w({ videoRef: d }), (a, v) => (o(), t("div", {
+      class: T(H.value),
+      style: M(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 +110,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(p), { size: "medium" }, {
+          default: c(() => [
+            l.value ? (o(), m(r(q), { key: 0 })) : (o(), m(r(F), { key: 1 }))
+          ]),
+          _: 1
+        })
+      ], 8, W)) : (o(), t("div", X, [
+        e.loading ? (o(), m(r(p), {
           key: 0,
           size: "large"
         }, {
-          default: m(() => [
-            l(a(A))
+          default: c(() => [
+            s(r(G))
           ]),
           _: 1
-        })) : (o(), v(a(c), {
+        })) : (o(), m(r(p), {
           key: 1,
           size: "large"
         }, {
-          default: m(() => [
-            l(a(E))
+          default: c(() => [
+            s(r(J))
           ]),
           _: 1
         })),
-        e.error && e.errorText ? (o(), t("span", L, f(e.errorText), 1)) : s("", !0)
+        e.error && e.errorText ? (o(), t("span", Y, _(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.name || f.value ? (o(), t("div", Z, [
+        e.name ? (o(), t("span", ee, _(e.name), 1)) : n("", !0),
+        f.value ? (o(), t("span", oe, _(f.value), 1)) : n("", !0)
+      ])) : n("", !0),
+      B.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(p), { size: "small" }, {
+              default: c(() => [
+                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(p), { size: "small" }, {
+              default: c(() => [
+                s(r(Q))
               ]),
               _: 1
             })
-          ], 8, K)) : s("", !0)
+          ], 8, te)) : n("", !0)
         ])
-      ])) : s("", !0)
+      ])) : n("", !0)
     ], 6));
   }
 });
 export {
-  re as default
+  _e 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)))
               ]),