@nmorph/nmorph-ui-kit 2.2.47 → 2.2.49

package/dist/components/data/nmorph-audio-preview/NmorphAudioPreview.css

@@ -1 +1 @@
-.nmorph-audio-preview{display:flex;gap:var(--indentation-02);align-items:center;box-sizing:border-box;width:var(--nmorph-audio-preview-width, 360px);min-width:0;max-width:100%;min-height:64px;padding:var(--indentation-03);color:var(--nmorph-text-color);background:var(--nmorph-main-color);border-radius:var(--default-border-radius);box-shadow:var(--nmorph-shadow-inset)}.nmorph-audio-preview audio{display:none}.nmorph-audio-preview .nmorph-audio-preview__icon{display:flex;flex:0 0 auto;justify-content:center;align-items:center;width:36px;height:36px;color:var(--nmorph-accent-color);background:color-mix(in srgb,var(--nmorph-accent-color) 12%,transparent);border-radius:var(--default-border-radius);--color: currentColor}.nmorph-audio-preview .nmorph-audio-preview__play{flex:0 0 auto}.nmorph-audio-preview .nmorph-audio-preview__body{display:flex;flex:1 1 0;flex-direction:column;gap:var(--indentation-02);min-width:0}.nmorph-audio-preview .nmorph-audio-preview__header{display:flex;gap:var(--indentation-02);justify-content:space-between;align-items:center;min-width:0}.nmorph-audio-preview .nmorph-audio-preview__name,.nmorph-audio-preview .nmorph-audio-preview__time,.nmorph-audio-preview .nmorph-audio-preview__error{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-audio-preview .nmorph-audio-preview__name{flex:1 1 auto;font-weight:600}.nmorph-audio-preview .nmorph-audio-preview__time{flex:0 0 auto;color:var(--nmorph-semi-contrast-text-color);font-variant-numeric:tabular-nums}.nmorph-audio-preview .nmorph-audio-preview__error{flex:0 1 auto;color:var(--nmorph-error-text-color)}.nmorph-audio-preview .nmorph-audio-preview__range{width:100%;min-width:0;height:6px;padding:0;background:linear-gradient(to right,var(--nmorph-accent-color) var(--nmorph-audio-preview-progress, 0%),color-mix(in srgb,var(--nmorph-text-color) 16%,transparent) 0);border-radius:var(--border-radius-100);outline:0;cursor:pointer;appearance:none}.nmorph-audio-preview .nmorph-audio-preview__range:disabled{cursor:default;opacity:.6}.nmorph-audio-preview .nmorph-audio-preview__range::-webkit-slider-thumb{width:14px;height:14px;background:var(--nmorph-accent-color);border:2px solid var(--nmorph-main-color);border-radius:var(--border-radius-circular);box-shadow:var(--nmorph-shadow-outset);appearance:none}.nmorph-audio-preview .nmorph-audio-preview__range::-moz-range-thumb{width:14px;height:14px;background:var(--nmorph-accent-color);border:2px solid var(--nmorph-main-color);border-radius:var(--border-radius-circular);box-shadow:var(--nmorph-shadow-outset)}.nmorph-audio-preview .nmorph-audio-preview__actions{display:flex;flex:0 0 auto;gap:var(--indentation-01);align-items:center}.nmorph-audio-preview .nmorph-audio-preview__action-link{display:inline-flex;justify-content:center;align-items:center;width:22px;height:22px;color:inherit;text-decoration:none;border-radius:var(--default-border-radius)}.nmorph-audio-preview .nmorph-audio-preview__action-link:hover{color:var(--nmorph-accent-color);background:color-mix(in srgb,var(--nmorph-accent-color) 10%,transparent)}.nmorph-audio-preview .nmorph-audio-preview__action-link .nmorph-icon{--color: currentColor}.nmorph-audio-preview.nmorph-audio-preview--compact{min-height:52px;padding:var(--indentation-02)}.nmorph-audio-preview.nmorph-audio-preview--compact .nmorph-audio-preview__icon{width:30px;height:30px}.nmorph-audio-preview.nmorph-audio-preview--error{outline:1px solid var(--nmorph-error-color)}
+.nmorph-audio-preview{display:flex;gap:var(--indentation-02);align-items:center;box-sizing:border-box;width:var(--nmorph-audio-preview-width, 360px);min-width:0;max-width:100%;min-height:64px;padding:var(--indentation-03);color:var(--nmorph-text-color);background:var(--nmorph-main-color);border-radius:var(--default-border-radius);box-shadow:var(--nmorph-shadow-inset)}.nmorph-audio-preview audio{display:none}.nmorph-audio-preview .nmorph-audio-preview__icon{position:relative;display:flex;flex:0 0 auto;justify-content:center;align-items:center;width:36px;height:36px;padding:0;color:var(--nmorph-accent-color);background:color-mix(in srgb,var(--nmorph-accent-color) 12%,transparent);border:0;border-radius:var(--default-border-radius);cursor:pointer;--color: currentColor}.nmorph-audio-preview .nmorph-audio-preview__icon:disabled{cursor:default}.nmorph-audio-preview .nmorph-audio-preview__play-button{display:inline-flex;flex:0 0 auto;justify-content:center;align-items:center;width:20px;height:20px;padding:0;color:var(--nmorph-accent-color);background:color-mix(in srgb,var(--nmorph-accent-color) 10%,transparent);border:0;border-radius:var(--border-radius-circular);cursor:pointer}.nmorph-audio-preview .nmorph-audio-preview__play-button:hover{color:var(--nmorph-focus-text-color);background:var(--nmorph-accent-color)}.nmorph-audio-preview .nmorph-audio-preview__play-button .nmorph-icon{--color: currentColor}.nmorph-audio-preview .nmorph-audio-preview__play-indicator{position:absolute;right:-4px;bottom:-4px;display:inline-flex;justify-content:center;align-items:center;width:18px;height:18px;color:var(--nmorph-accent-color);background:var(--nmorph-main-color);border-radius:var(--border-radius-circular);box-shadow:var(--nmorph-shadow-outset)}.nmorph-audio-preview .nmorph-audio-preview__play-indicator .nmorph-icon{--color: currentColor}.nmorph-audio-preview .nmorph-audio-preview__body{display:flex;flex:1 1 0;flex-direction:column;gap:var(--indentation-02);box-sizing:border-box;min-width:0}.nmorph-audio-preview .nmorph-audio-preview__header{display:flex;gap:var(--indentation-02);justify-content:space-between;align-items:center;min-width:0}.nmorph-audio-preview .nmorph-audio-preview__control{display:flex;gap:var(--indentation-02);align-items:center;width:100%;min-width:0}.nmorph-audio-preview .nmorph-audio-preview__name,.nmorph-audio-preview .nmorph-audio-preview__time,.nmorph-audio-preview .nmorph-audio-preview__error{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-audio-preview .nmorph-audio-preview__name{flex:1 1 auto;font-weight:600}.nmorph-audio-preview .nmorph-audio-preview__time{flex:0 0 auto;color:var(--nmorph-semi-contrast-text-color);font-variant-numeric:tabular-nums}.nmorph-audio-preview .nmorph-audio-preview__error{flex:0 1 auto;color:var(--nmorph-error-text-color)}.nmorph-audio-preview .nmorph-audio-preview__range{flex:1 1 0;width:100%;min-width:0;height:6px;padding:0;background:linear-gradient(to right,var(--nmorph-accent-color) var(--nmorph-audio-preview-progress, 0%),color-mix(in srgb,var(--nmorph-text-color) 16%,transparent) 0);border-radius:var(--border-radius-100);outline:0;cursor:pointer;appearance:none}.nmorph-audio-preview .nmorph-audio-preview__range:disabled{cursor:default;opacity:.6}.nmorph-audio-preview .nmorph-audio-preview__range::-webkit-slider-thumb{width:14px;height:14px;background:var(--nmorph-accent-color);border:2px solid var(--nmorph-main-color);border-radius:var(--border-radius-circular);box-shadow:var(--nmorph-shadow-outset);appearance:none}.nmorph-audio-preview .nmorph-audio-preview__range::-moz-range-thumb{width:14px;height:14px;background:var(--nmorph-accent-color);border:2px solid var(--nmorph-main-color);border-radius:var(--border-radius-circular);box-shadow:var(--nmorph-shadow-outset)}.nmorph-audio-preview .nmorph-audio-preview__actions{display:flex;flex:0 0 auto;gap:var(--indentation-01);align-items:center}.nmorph-audio-preview .nmorph-audio-preview__action-link{display:inline-flex;justify-content:center;align-items:center;width:22px;height:22px;color:inherit;text-decoration:none;border-radius:var(--default-border-radius)}.nmorph-audio-preview .nmorph-audio-preview__action-link:hover{color:var(--nmorph-accent-color);background:color-mix(in srgb,var(--nmorph-accent-color) 10%,transparent)}.nmorph-audio-preview .nmorph-audio-preview__action-link .nmorph-icon{--color: currentColor}.nmorph-audio-preview.nmorph-audio-preview--compact{min-height:52px;padding:var(--indentation-02)}.nmorph-audio-preview.nmorph-audio-preview--compact .nmorph-audio-preview__icon{width:30px;height:30px}.nmorph-audio-preview.nmorph-audio-preview--no-actions .nmorph-audio-preview__body{padding-inline-end:var(--indentation-02)}.nmorph-audio-preview.nmorph-audio-preview--embedded{width:var(--nmorph-audio-preview-width, 100%);min-height:auto;padding:0;background:transparent;border-radius:0;box-shadow:none}.nmorph-audio-preview.nmorph-audio-preview--embedded .nmorph-audio-preview__body{gap:0;padding-inline-end:0}.nmorph-audio-preview.nmorph-audio-preview--embedded .nmorph-audio-preview__range{height:5px}.nmorph-audio-preview.nmorph-audio-preview--embedded .nmorph-audio-preview__range::-webkit-slider-thumb{width:11px;height:11px;box-shadow:none}.nmorph-audio-preview.nmorph-audio-preview--embedded .nmorph-audio-preview__range::-moz-range-thumb{width:11px;height:11px;box-shadow:none}.nmorph-audio-preview.nmorph-audio-preview--no-header .nmorph-audio-preview__time{flex:0 0 auto}.nmorph-audio-preview.nmorph-audio-preview--soft{background:color-mix(in srgb,var(--nmorph-accent-color) 6%,transparent);box-shadow:none}.nmorph-audio-preview.nmorph-audio-preview--plain{background:transparent;box-shadow:none}.nmorph-audio-preview.nmorph-audio-preview--error{outline:1px solid var(--nmorph-error-color)}

package/dist/components/data/nmorph-audio-preview/NmorphAudioPreview.vue.js

@@ -1,33 +1,44 @@
 import './NmorphAudioPreview.css';
-import { defineComponent as q, useSlots as G, ref as _, watch as J, computed as l, openBlock as t, createElementBlock as p, normalizeStyle as N, normalizeClass as K, createElementVNode as i, createBlock as h, unref as r, withCtx as m, createVNode as s, toDisplayString as y, withDirectives as Q, vModelText as W, renderSlot as X, createCommentVNode as H } from "vue";
-import { useModifiers as Y } from "../../../utils/create-modifiers.js";
-import { createCssSizeVariables as Z } from "../../../utils/common.js";
-import w from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+import { defineComponent as J, useSlots as K, ref as b, watch as Q, computed as s, openBlock as a, createElementBlock as n, normalizeStyle as T, normalizeClass as W, createElementVNode as u, createBlock as c, unref as r, withCtx as p, createVNode as i, createCommentVNode as m, toDisplayString as v, withDirectives as X, vModelText as Y, renderSlot as Z } from "vue";
+import { useModifiers as ee } from "../../../utils/create-modifiers.js";
+import { createCssSizeVariables as oe } from "../../../utils/common.js";
+import f from "../../basic/nmorph-icon/NmorphIcon.vue.js";
 /* empty css                                      */
-import ee from "../../../assets/icons/audio.svg.js";
-import oe from "../../basic/nmorph-button/NmorphButton.vue.js";
-/* empty css                                          */
-import ae from "../../../assets/icons/pause.svg.js";
-import re from "../../../assets/icons/play.svg.js";
-import te from "../../../assets/icons/open.svg.js";
-import ne from "../../../assets/icons/download.svg.js";
+import ae from "../../../assets/icons/audio.svg.js";
+import P from "../../../assets/icons/pause.svg.js";
+import z from "../../../assets/icons/play.svg.js";
+import re from "../../../assets/icons/open.svg.js";
+import te from "../../../assets/icons/download.svg.js";
 import le from "../../../assets/icons/loading.svg.js";
-const ie = ["src", "preload"], se = { class: "nmorph-audio-preview__icon" }, de = { class: "nmorph-audio-preview__body" }, ue = { class: "nmorph-audio-preview__header" }, ce = { class: "nmorph-audio-preview__name" }, pe = {
+const ne = ["src", "preload"], se = ["disabled", "aria-label"], ie = {
+  key: 2,
+  class: "nmorph-audio-preview__play-indicator"
+}, de = ["aria-label"], ue = { class: "nmorph-audio-preview__body" }, ce = {
+  key: 0,
+  class: "nmorph-audio-preview__header"
+}, pe = { class: "nmorph-audio-preview__name" }, me = {
   key: 0,
   class: "nmorph-audio-preview__error"
-}, me = {
+}, ve = {
   key: 1,
   class: "nmorph-audio-preview__time"
-}, ve = ["disabled", "aria-label"], fe = {
+}, fe = { class: "nmorph-audio-preview__control" }, _e = ["disabled", "aria-label"], he = {
   key: 0,
+  class: "nmorph-audio-preview__time"
+}, ye = {
+  key: 2,
   class: "nmorph-audio-preview__actions"
-}, _e = ["href", "aria-label"], he = ["href", "download", "aria-label"], Me = /* @__PURE__ */ q({
+}, we = ["href", "aria-label"], be = ["href", "download", "aria-label"], Ie = /* @__PURE__ */ J({
   __name: "NmorphAudioPreview",
   props: {
     src: {},
     name: { default: "" },
     durationMs: { default: void 0 },
     width: { default: void 0 },
+    surface: { default: "card" },
+    embedded: { type: Boolean, default: !1 },
+    showIcon: { type: Boolean, default: !0 },
+    showHeader: { type: Boolean, default: !0 },
     compact: { type: Boolean, default: !1 },
     preload: { default: "metadata" },
     downloadHref: { default: "" },
@@ -37,171 +48,195 @@ const ie = ["src", "preload"], se = { class: "nmorph-audio-preview__icon" }, de
     showDefaultActions: { type: Boolean, default: !0 }
   },
   emits: ["play", "pause", "open", "download", "error"],
-  setup(S, { expose: T, emit: $ }) {
-    const e = S, u = $, x = G(), a = _(null), n = _(!1), v = _(0), f = _(e.durationMs ? e.durationMs / 1e3 : 0);
-    J(
+  setup(C, { expose: I, emit: x }) {
+    const e = C, _ = x, M = K(), t = b(null), l = b(!1), y = b(0), w = b(e.durationMs ? e.durationMs / 1e3 : 0);
+    Q(
       () => e.durationMs,
       (o) => {
-        f.value = o ? o / 1e3 : f.value;
+        w.value = o ? o / 1e3 : w.value;
       }
     );
-    const d = l(() => f.value || 0), g = l({
-      get: () => d.value > 0 ? v.value / d.value * 100 : 0,
+    const d = s(() => w.value || 0), k = s({
+      get: () => d.value > 0 ? y.value / d.value * 100 : 0,
       set: (o) => {
-        !a.value || d.value <= 0 || (a.value.currentTime = o / 100 * d.value, v.value = a.value.currentTime);
+        !t.value || d.value <= 0 || (t.value.currentTime = o / 100 * d.value, y.value = t.value.currentTime);
       }
-    }), B = l(() => ({ "--nmorph-audio-preview-progress": `${g.value}%` })), C = l(
-      () => !!x.actions || e.showDefaultActions && (e.src || e.downloadHref)
-    ), M = l(
-      () => Y({
+    }), A = s(() => ({ "--nmorph-audio-preview-progress": `${k.value}%` })), H = s(
+      () => !!M.actions || e.showDefaultActions && (e.src || e.downloadHref)
+    ), D = s(
+      () => ee({
         "nmorph-audio-preview": [
+          e.surface,
+          e.embedded && "embedded",
+          !e.showIcon && "no-icon",
+          !e.showHeader && "no-header",
           e.compact && "compact",
           e.loading && "loading",
           e.error && "error",
-          n.value && "playing"
+          l.value && "playing",
+          !H.value && "no-actions"
         ]
       })
-    ), z = l(
-      () => Z({
+    ), V = s(
+      () => oe({
         "--nmorph-audio-preview-width": e.width
       })
-    ), k = (o) => {
+    ), N = (o) => {
       if (!Number.isFinite(o) || o < 0) return "0:00";
-      const c = Math.floor(o), b = Math.floor(c / 60), j = c % 60;
-      return `${b}:${j.toString().padStart(2, "0")}`;
-    }, A = l(() => k(v.value)), D = l(() => k(d.value)), I = async () => {
-      if (!(!a.value || e.loading || e.error)) {
-        if (n.value) {
-          a.value.pause();
+      const h = Math.floor(o), g = Math.floor(h / 60), G = h % 60;
+      return `${g}:${G.toString().padStart(2, "0")}`;
+    }, $ = s(() => N(y.value)), B = s(() => N(d.value)), S = async () => {
+      if (!(!t.value || e.loading || e.error)) {
+        if (l.value) {
+          t.value.pause();
           return;
         }
         try {
-          await a.value.play();
+          await t.value.play();
         } catch {
-          n.value = !1;
+          l.value = !1;
         }
       }
-    }, P = () => {
-      !a.value || Number.isNaN(a.value.duration) || (f.value = a.value.duration);
-    }, V = () => {
-      v.value = a.value?.currentTime || 0;
-    }, E = (o) => {
-      n.value = !0, u("play", o);
-    }, L = (o) => {
-      n.value = !1, u("pause", o);
-    }, O = () => {
-      n.value = !1;
+    }, E = () => {
+      !t.value || Number.isNaN(t.value.duration) || (w.value = t.value.duration);
+    }, L = () => {
+      y.value = t.value?.currentTime || 0;
+    }, O = (o) => {
+      l.value = !0, _("play", o);
     }, R = (o) => {
-      n.value = !1, u("error", o);
-    }, U = () => u("open"), F = () => u("download");
-    return T({ audioRef: a }), (o, c) => (t(), p("div", {
-      class: K(M.value),
-      style: N(z.value)
+      l.value = !1, _("pause", o);
+    }, U = () => {
+      l.value = !1;
+    }, F = (o) => {
+      l.value = !1, _("error", o);
+    }, j = () => _("open"), q = () => _("download");
+    return I({ audioRef: t }), (o, h) => (a(), n("div", {
+      class: W(D.value),
+      style: T(V.value)
     }, [
-      i("audio", {
+      u("audio", {
         ref_key: "audioRef",
-        ref: a,
+        ref: t,
         src: e.src,
         preload: e.preload,
-        onLoadedmetadata: P,
-        onTimeupdate: V,
-        onPlay: E,
-        onPause: L,
-        onEnded: O,
-        onError: R
-      }, null, 40, ie),
-      i("div", se, [
-        e.loading ? (t(), h(r(w), {
+        onLoadedmetadata: E,
+        onTimeupdate: L,
+        onPlay: O,
+        onPause: R,
+        onEnded: U,
+        onError: F
+      }, null, 40, ne),
+      e.showIcon ? (a(), n("button", {
+        key: 0,
+        class: "nmorph-audio-preview__icon",
+        type: "button",
+        disabled: e.loading || e.error,
+        "aria-label": l.value ? `Pause ${e.name || "audio"}` : `Play ${e.name || "audio"}`,
+        onClick: S
+      }, [
+        e.loading ? (a(), c(r(f), {
           key: 0,
           size: "medium"
         }, {
-          default: m(() => [
-            s(r(le))
+          default: p(() => [
+            i(r(le))
           ]),
           _: 1
-        })) : (t(), h(r(w), {
+        })) : (a(), c(r(f), {
           key: 1,
           size: "medium"
         }, {
-          default: m(() => [
-            s(r(ee))
+          default: p(() => [
+            i(r(ae))
           ]),
           _: 1
-        }))
-      ]),
-      s(r(oe), {
-        class: "nmorph-audio-preview__play",
-        height: "thin",
-        "style-type": "transparent",
-        disabled: e.loading || e.error,
-        onClick: I
-      }, {
-        "icon-only": m(() => [
-          n.value ? (t(), h(r(ae), { key: 0 })) : (t(), h(r(re), { key: 1 }))
-        ]),
-        _: 1
-      }, 8, ["disabled"]),
-      i("div", de, [
-        i("div", ue, [
-          i("span", ce, y(e.name || "Audio"), 1),
-          e.error && e.errorText ? (t(), p("span", pe, y(e.errorText), 1)) : (t(), p("span", me, y(A.value) + " / " + y(D.value), 1))
-        ]),
-        Q(i("input", {
-          "onUpdate:modelValue": c[0] || (c[0] = (b) => g.value = b),
-          class: "nmorph-audio-preview__range",
-          type: "range",
-          min: "0",
-          max: "100",
-          step: "0.1",
-          style: N(B.value),
-          disabled: e.loading || e.error || d.value <= 0,
-          "aria-label": `Audio progress ${e.name || ""}`
-        }, null, 12, ve), [
-          [
-            W,
-            g.value,
-            void 0,
-            { number: !0 }
-          ]
+        })),
+        !e.loading && !e.error ? (a(), n("span", ie, [
+          i(r(f), { size: "small" }, {
+            default: p(() => [
+              l.value ? (a(), c(r(P), { key: 0 })) : (a(), c(r(z), { key: 1 }))
+            ]),
+            _: 1
+          })
+        ])) : m("", !0)
+      ], 8, se)) : !e.loading && !e.error ? (a(), n("button", {
+        key: 1,
+        class: "nmorph-audio-preview__play-button",
+        type: "button",
+        "aria-label": l.value ? `Pause ${e.name || "audio"}` : `Play ${e.name || "audio"}`,
+        onClick: S
+      }, [
+        i(r(f), { size: "small" }, {
+          default: p(() => [
+            l.value ? (a(), c(r(P), { key: 0 })) : (a(), c(r(z), { key: 1 }))
+          ]),
+          _: 1
+        })
+      ], 8, de)) : m("", !0),
+      u("div", ue, [
+        e.showHeader ? (a(), n("div", ce, [
+          u("span", pe, v(e.name || "Audio"), 1),
+          e.error && e.errorText ? (a(), n("span", me, v(e.errorText), 1)) : (a(), n("span", ve, v($.value) + " / " + v(B.value), 1))
+        ])) : m("", !0),
+        u("div", fe, [
+          X(u("input", {
+            "onUpdate:modelValue": h[0] || (h[0] = (g) => k.value = g),
+            class: "nmorph-audio-preview__range",
+            type: "range",
+            min: "0",
+            max: "100",
+            step: "0.1",
+            style: T(A.value),
+            disabled: e.loading || e.error || d.value <= 0,
+            "aria-label": `Audio progress ${e.name || ""}`
+          }, null, 12, _e), [
+            [
+              Y,
+              k.value,
+              void 0,
+              { number: !0 }
+            ]
+          ]),
+          e.showHeader ? m("", !0) : (a(), n("span", he, v($.value) + " / " + v(B.value), 1))
         ])
       ]),
-      C.value ? (t(), p("div", fe, [
-        X(o.$slots, "actions", {}, () => [
-          i("a", {
+      H.value ? (a(), n("div", ye, [
+        Z(o.$slots, "actions", {}, () => [
+          u("a", {
             href: e.src,
             target: "_blank",
             rel: "noopener noreferrer",
             class: "nmorph-audio-preview__action-link",
             "aria-label": `Open ${e.name || "audio"}`,
-            onClick: U
+            onClick: j
           }, [
-            s(r(w), { size: "small" }, {
-              default: m(() => [
-                s(r(te))
+            i(r(f), { size: "small" }, {
+              default: p(() => [
+                i(r(re))
               ]),
               _: 1
             })
-          ], 8, _e),
-          e.downloadHref ? (t(), p("a", {
+          ], 8, we),
+          e.downloadHref ? (a(), n("a", {
             key: 0,
             href: e.downloadHref,
             download: e.name,
             class: "nmorph-audio-preview__action-link",
             "aria-label": `Download ${e.name || "audio"}`,
-            onClick: F
+            onClick: q
           }, [
-            s(r(w), { size: "small" }, {
-              default: m(() => [
-                s(r(ne))
+            i(r(f), { size: "small" }, {
+              default: p(() => [
+                i(r(te))
               ]),
               _: 1
             })
-          ], 8, he)) : H("", !0)
+          ], 8, be)) : m("", !0)
         ])
-      ])) : H("", !0)
+      ])) : m("", !0)
     ], 6));
   }
 });
 export {
-  Me as default
+  Ie as default
 };

package/dist/components/data/nmorph-file-card/NmorphFileCard.css

@@ -1 +1 @@
-.nmorph-file-card{display:flex;gap:var(--indentation-03);align-items:center;box-sizing:border-box;width:100%;min-width:0;max-width:100%;min-height:64px;padding:var(--indentation-03);color:var(--nmorph-text-color);background:var(--nmorph-main-color);border-radius:var(--default-border-radius);box-shadow:var(--nmorph-shadow-inset)}.nmorph-file-card .nmorph-file-card__icon{display:flex;flex:0 0 auto;justify-content:center;align-items:center;width:36px;height:36px;color:var(--nmorph-accent-color);background:color-mix(in srgb,var(--nmorph-accent-color) 12%,transparent);border-radius:var(--default-border-radius);--color: currentColor}.nmorph-file-card .nmorph-file-card__body{display:flex;flex:1 1 0;flex-direction:column;gap:2px;min-width:0}.nmorph-file-card .nmorph-file-card__name,.nmorph-file-card .nmorph-file-card__meta,.nmorph-file-card .nmorph-file-card__error{display:block;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.nmorph-file-card .nmorph-file-card__name{font-weight:600;font-size:var(--font-size-small);line-height:var(--line-height-regular)}.nmorph-file-card .nmorph-file-card__meta,.nmorph-file-card .nmorph-file-card__error{font-size:var(--font-size-extra-small);line-height:var(--line-height-regular)}.nmorph-file-card .nmorph-file-card__meta{color:var(--nmorph-semi-contrast-text-color)}.nmorph-file-card .nmorph-file-card__error{color:var(--nmorph-error-text-color)}.nmorph-file-card .nmorph-file-card__badge{flex:0 0 auto;max-width:72px;padding:2px 6px;overflow:hidden;color:var(--nmorph-accent-color);font-weight:700;font-size:var(--font-size-extra-small);line-height:var(--line-height-regular);white-space:nowrap;text-transform:uppercase;text-overflow:ellipsis;background:color-mix(in srgb,var(--nmorph-accent-color) 10%,transparent);border-radius:var(--default-border-radius)}.nmorph-file-card .nmorph-file-card__actions{display:flex;flex:0 0 auto;gap:var(--indentation-01);align-items:center}.nmorph-file-card .nmorph-file-card__action-link{display:inline-flex;justify-content:center;align-items:center;width:22px;height:22px;color:inherit;text-decoration:none;border-radius:var(--default-border-radius)}.nmorph-file-card .nmorph-file-card__action-link:hover{color:var(--nmorph-accent-color);background:color-mix(in srgb,var(--nmorph-accent-color) 10%,transparent)}.nmorph-file-card .nmorph-file-card__action-link .nmorph-icon{--color: currentColor}.nmorph-file-card.nmorph-file-card--compact{min-height:52px;padding:var(--indentation-02)}.nmorph-file-card.nmorph-file-card--compact .nmorph-file-card__icon{width:30px;height:30px}.nmorph-file-card.nmorph-file-card--error{outline:1px solid var(--nmorph-error-color)}
+.nmorph-file-card{display:flex;gap:var(--indentation-03);align-items:center;box-sizing:border-box;width:100%;min-width:0;max-width:100%;min-height:64px;padding:var(--indentation-03);color:var(--nmorph-text-color);background:var(--nmorph-main-color);border-radius:var(--default-border-radius);box-shadow:var(--nmorph-shadow-inset)}.nmorph-file-card .nmorph-file-card__icon{position:relative;display:flex;flex:0 0 auto;justify-content:center;align-items:center;width:36px;height:36px;color:var(--nmorph-accent-color);background:color-mix(in srgb,var(--nmorph-accent-color) 12%,transparent);border-radius:var(--default-border-radius);--color: currentColor}.nmorph-file-card .nmorph-file-card__icon-action{position:absolute;right:-4px;bottom:-4px;display:inline-flex;justify-content:center;align-items:center;width:18px;height:18px;color:var(--nmorph-accent-color);text-decoration:none;background:var(--nmorph-main-color);border-radius:var(--border-radius-circular);box-shadow:var(--nmorph-shadow-outset)}.nmorph-file-card .nmorph-file-card__icon-action:hover{color:var(--nmorph-focus-text-color);background:var(--nmorph-accent-color)}.nmorph-file-card .nmorph-file-card__icon-action .nmorph-icon{--color: currentColor}.nmorph-file-card .nmorph-file-card__body{display:flex;flex:1 1 0;flex-direction:column;gap:2px;min-width:0}.nmorph-file-card .nmorph-file-card__name,.nmorph-file-card .nmorph-file-card__meta,.nmorph-file-card .nmorph-file-card__error{display:block;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.nmorph-file-card .nmorph-file-card__name{font-weight:600;font-size:var(--font-size-small);line-height:var(--line-height-regular)}.nmorph-file-card .nmorph-file-card__meta,.nmorph-file-card .nmorph-file-card__error{font-size:var(--font-size-extra-small);line-height:var(--line-height-regular)}.nmorph-file-card .nmorph-file-card__meta{color:var(--nmorph-semi-contrast-text-color)}.nmorph-file-card .nmorph-file-card__error{color:var(--nmorph-error-text-color)}.nmorph-file-card .nmorph-file-card__audio-preview{width:100%;min-width:0;margin-top:var(--indentation-01)}.nmorph-file-card .nmorph-file-card__badge{flex:0 0 auto;max-width:72px;padding:2px 6px;overflow:hidden;color:var(--nmorph-accent-color);font-weight:700;font-size:var(--font-size-extra-small);line-height:var(--line-height-regular);white-space:nowrap;text-transform:uppercase;text-overflow:ellipsis;background:color-mix(in srgb,var(--nmorph-accent-color) 10%,transparent);border-radius:var(--default-border-radius)}.nmorph-file-card .nmorph-file-card__actions{display:flex;flex:0 0 auto;gap:var(--indentation-01);align-items:center}.nmorph-file-card .nmorph-file-card__action-link{display:inline-flex;justify-content:center;align-items:center;width:22px;height:22px;color:inherit;text-decoration:none;border-radius:var(--default-border-radius)}.nmorph-file-card .nmorph-file-card__action-link:hover{color:var(--nmorph-accent-color);background:color-mix(in srgb,var(--nmorph-accent-color) 10%,transparent)}.nmorph-file-card .nmorph-file-card__action-link .nmorph-icon{--color: currentColor}.nmorph-file-card.nmorph-file-card--compact{min-height:52px;padding:var(--indentation-02)}.nmorph-file-card.nmorph-file-card--compact .nmorph-file-card__icon{width:30px;height:30px}.nmorph-file-card.nmorph-file-card--compact .nmorph-file-card__audio-preview{margin-top:2px}.nmorph-file-card.nmorph-file-card--error{outline:1px solid var(--nmorph-error-color)}.nmorph-file-card.nmorph-file-card--soft{background:color-mix(in srgb,var(--nmorph-accent-color) 6%,transparent);box-shadow:none}.nmorph-file-card.nmorph-file-card--plain{background:transparent;box-shadow:none}.nmorph-file-card.nmorph-file-card--icon-plain .nmorph-file-card__icon{background:transparent}

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

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