@nmorph/nmorph-ui-kit 2.2.51 → 2.2.52

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{position:relative;display:flex;flex:0 0 auto;justify-content:center;align-items:center;width:36px;height:36px;color:var(--nmorph-text-color);background:color-mix(in srgb,var(--nmorph-text-color) 10%,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-contrast-text-color);text-decoration:none;background:color-mix(in srgb,var(--nmorph-black-color) 36%,transparent);border-radius:var(--border-radius-circular);box-shadow:var(--nmorph-shadow-outset)}.nmorph-file-card .nmorph-file-card__icon-action:hover{background:color-mix(in srgb,var(--nmorph-black-color) 48%,transparent)}.nmorph-file-card .nmorph-file-card__icon-action .nmorph-icon{--nmorph-icon-color: var(--nmorph-contrast-text-color);--color: var(--nmorph-contrast-text-color)}.nmorph-file-card .nmorph-file-card__body{display:flex;flex:1 1 0;flex-direction:column;gap:var(--indentation-01);min-width:0}.nmorph-file-card .nmorph-file-card__info{display:flex;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,.nmorph-file-card .nmorph-file-card__video-preview{width:100%;min-width:0}.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,.nmorph-file-card .nmorph-file-card__action-loader{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__action-loader{color:var(--nmorph-semi-contrast-text-color)}.nmorph-file-card .nmorph-file-card__action-loader .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,.nmorph-file-card.nmorph-file-card--compact .nmorph-file-card__video-preview{margin-top:0}.nmorph-file-card.nmorph-file-card--media-audio.nmorph-file-card--no-actions .nmorph-file-card__body{padding-inline-end:var(--indentation-02)}.nmorph-file-card.nmorph-file-card--media-video.nmorph-file-card--compact{padding-block:var(--indentation-03)}.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--soft .nmorph-file-card__icon-action{box-shadow:none}.nmorph-file-card.nmorph-file-card--plain{background:transparent;box-shadow:none}.nmorph-file-card.nmorph-file-card--plain .nmorph-file-card__icon-action{box-shadow:none}.nmorph-file-card.nmorph-file-card--icon-plain .nmorph-file-card__icon{background:transparent}
+.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-text-color);background:color-mix(in srgb,var(--nmorph-text-color) 10%,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-contrast-text-color);text-decoration:none;background:color-mix(in srgb,var(--nmorph-black-color) 36%,transparent);border-radius:var(--border-radius-circular);box-shadow:var(--nmorph-shadow-outset)}.nmorph-file-card .nmorph-file-card__icon-action:hover{background:color-mix(in srgb,var(--nmorph-black-color) 48%,transparent)}.nmorph-file-card .nmorph-file-card__icon-action .nmorph-icon{--nmorph-icon-color: var(--nmorph-contrast-text-color);--color: var(--nmorph-contrast-text-color)}.nmorph-file-card .nmorph-file-card__body{display:flex;flex:1 1 0;flex-direction:column;gap:var(--indentation-01);min-width:0}.nmorph-file-card .nmorph-file-card__info{display:flex;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,.nmorph-file-card .nmorph-file-card__video-preview,.nmorph-file-card .nmorph-file-card__image-preview{width:100%;min-width:0}.nmorph-file-card .nmorph-file-card__image-preview{display:block;height:120px;padding:0;overflow:hidden;color:inherit;font:inherit;background:transparent;border:0;border-radius:var(--default-border-radius);cursor:pointer}.nmorph-file-card .nmorph-file-card__image-preview .nmorph-file-card__image{display:block;width:100%;max-width:100%;height:100%;object-fit:cover}.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__visual-size{position:absolute;right:var(--indentation-02);bottom:var(--indentation-02);z-index:2;display:inline-flex;align-items:center;min-width:0;max-width:calc(100% - var(--indentation-04));min-height:22px;padding:0 6px;overflow:hidden;color:var(--nmorph-contrast-text-color);font-size:var(--font-size-extra-small);line-height:var(--line-height-regular);white-space:nowrap;text-overflow:ellipsis;background:color-mix(in srgb,var(--nmorph-black-color) 58%,transparent);border-radius:var(--default-border-radius);pointer-events:none}.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,.nmorph-file-card .nmorph-file-card__action-loader{display:inline-flex;justify-content:center;align-items:center;box-sizing:border-box;width:22px;height:22px;padding:0;color:inherit;line-height:1;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__action-loader{color:var(--nmorph-semi-contrast-text-color)}.nmorph-file-card .nmorph-file-card__action-loader .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,.nmorph-file-card.nmorph-file-card--compact .nmorph-file-card__video-preview{margin-top:0}.nmorph-file-card.nmorph-file-card--compact .nmorph-file-card__image-preview{height:96px;margin-top:0}.nmorph-file-card.nmorph-file-card--media-audio.nmorph-file-card--no-actions .nmorph-file-card__body{padding-inline-end:var(--indentation-02)}.nmorph-file-card.nmorph-file-card--media-visual{position:relative;display:block;gap:0;min-height:0;padding:0;overflow:hidden}.nmorph-file-card.nmorph-file-card--media-visual .nmorph-file-card__body{position:relative;display:block;width:100%;min-width:0}.nmorph-file-card.nmorph-file-card--media-visual .nmorph-file-card__info{position:absolute;top:var(--indentation-02);left:var(--indentation-02);z-index:2;max-width:calc(100% - 48px);pointer-events:none}.nmorph-file-card.nmorph-file-card--media-visual .nmorph-file-card__name{display:block;min-height:22px;padding:0 6px;overflow:hidden;color:var(--nmorph-contrast-text-color);line-height:22px;white-space:nowrap;text-overflow:ellipsis;background:color-mix(in srgb,var(--nmorph-black-color) 58%,transparent);border-radius:var(--default-border-radius)}.nmorph-file-card.nmorph-file-card--media-visual .nmorph-file-card__image-preview,.nmorph-file-card.nmorph-file-card--media-visual .nmorph-file-card__video-preview,.nmorph-file-card.nmorph-file-card--media-visual .nmorph-video-preview,.nmorph-file-card.nmorph-file-card--media-visual .nmorph-video-preview__media,.nmorph-file-card.nmorph-file-card--media-visual .nmorph-file-card__image{display:block;width:100%;max-width:none;height:100%;border-radius:inherit;object-fit:cover}.nmorph-file-card.nmorph-file-card--media-visual .nmorph-file-card__actions{position:absolute;top:var(--indentation-02);right:var(--indentation-02);z-index:3}.nmorph-file-card.nmorph-file-card--media-visual .nmorph-file-card__action-link,.nmorph-file-card.nmorph-file-card--media-visual .nmorph-file-card__action-loader{color:var(--nmorph-contrast-text-color);background:color-mix(in srgb,var(--nmorph-black-color) 58%,transparent);border:0}.nmorph-file-card.nmorph-file-card--media-visual .nmorph-file-card__action-link .nmorph-icon,.nmorph-file-card.nmorph-file-card--media-visual .nmorph-file-card__action-loader .nmorph-icon{flex:0 0 auto;--nmorph-icon-color: var(--nmorph-contrast-text-color);--color: var(--nmorph-contrast-text-color)}.nmorph-file-card.nmorph-file-card--media-visual .nmorph-file-card__action-link:hover{color:var(--nmorph-contrast-text-color);background:color-mix(in srgb,var(--nmorph-black-color) 72%,transparent)}.nmorph-file-card.nmorph-file-card--media-video .nmorph-file-card__info{max-width:calc(100% - 112px)}.nmorph-file-card.nmorph-file-card--media-video .nmorph-video-preview__actions{right:calc(var(--indentation-02) + 26px)}.nmorph-file-card.nmorph-file-card--media-image .nmorph-file-card__image-preview{border-radius:inherit}.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--soft .nmorph-file-card__icon-action{box-shadow:none}.nmorph-file-card.nmorph-file-card--plain{background:transparent;box-shadow:none}.nmorph-file-card.nmorph-file-card--plain .nmorph-file-card__icon-action{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,36 +1,42 @@
 import './NmorphFileCard.css';
-import { defineComponent as V, useSlots as W, computed as a, openBlock as r, createElementBlock as n, normalizeClass as K, createElementVNode as f, createVNode as t, unref as i, withCtx as c, createBlock as b, resolveDynamicComponent as j, createCommentVNode as l, toDisplayString as h, renderSlot as G } from "vue";
-import { useModifiers as U } from "../../../utils/create-modifiers.js";
-import { getFileExtension as q, getPlainFileType as J, getTypeCandidates as Q, isKnownFileType as m } 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 ae from "../nmorph-audio-preview/NmorphAudioPreview.vue.js";
+import { defineComponent as K, useSlots as j, computed as a, openBlock as r, createElementBlock as i, normalizeClass as G, createVNode as n, unref as l, withCtx as m, createBlock as T, resolveDynamicComponent as U, createCommentVNode as t, createElementVNode as g, toDisplayString as d, Fragment as q, renderSlot as J } from "vue";
+import { useModifiers as Q } from "../../../utils/create-modifiers.js";
+import { getFileExtension as X, getPlainFileType as Y, getTypeCandidates as Z, isKnownFileType as u } from "../../../utils/file-types.js";
+import { NmorphImageResolution as ee, NmorphAudioResolution as oe, NmorphVideoResolution as ae, NmorphArchiveResolution as re, NmorphDocResolution as ie } from "../../form/nmorph-file-upload/types.js";
+import te from "../nmorph-audio-preview/NmorphAudioPreview.vue.js";
 /* empty css                                              */
-import re from "../nmorph-video-preview/NmorphVideoPreview.vue.js";
+import ne 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 d from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+import le from "../../../assets/icons/image.svg.js";
+import se from "../../../assets/icons/archive.svg.js";
+import H from "../../../assets/icons/doc.svg.js";
+import p from "../../basic/nmorph-icon/NmorphIcon.vue.js";
 /* empty css                                      */
-import ie from "../../../assets/icons/audio.svg.js";
-import le from "../../../assets/icons/video.svg.js";
-import se from "../../../assets/icons/eye.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" }, he = { class: "nmorph-file-card__info" }, ve = { class: "nmorph-file-card__name" }, _e = {
+import ce from "../../../assets/icons/audio.svg.js";
+import me from "../../../assets/icons/video.svg.js";
+import de from "../../../assets/icons/eye.svg.js";
+import ue from "../../../assets/icons/loading.svg.js";
+import pe from "../../../assets/icons/open.svg.js";
+import fe from "../../../assets/icons/download.svg.js";
+const ve = {
+  key: 0,
+  class: "nmorph-file-card__icon"
+}, he = ["href", "aria-label"], _e = { class: "nmorph-file-card__body" }, we = ["title"], ge = { class: "nmorph-file-card__name" }, ye = {
   key: 0,
   class: "nmorph-file-card__error"
-}, we = {
+}, be = {
   key: 1,
   class: "nmorph-file-card__meta"
-}, ye = {
-  key: 0,
-  class: "nmorph-file-card__badge"
-}, ge = {
+}, ke = ["title", "aria-label"], Ne = ["src", "alt"], Be = {
   key: 1,
+  class: "nmorph-file-card__visual-size"
+}, Ce = {
+  key: 2,
+  class: "nmorph-file-card__badge"
+}, Se = {
+  key: 3,
   class: "nmorph-file-card__actions"
-}, Ne = ["aria-label"], Be = ["href", "aria-label"], be = ["href", "download", "aria-label"], ke = "var(--nmorph-contrast-text-color)", Ke = /* @__PURE__ */ V({
+}, Te = ["aria-label"], xe = ["href", "aria-label"], Pe = ["href", "download", "aria-label"], Ae = "var(--nmorph-contrast-text-color)", Qe = /* @__PURE__ */ K({
   __name: "NmorphFileCard",
   props: {
     name: {},
@@ -50,67 +56,76 @@ const pe = { class: "nmorph-file-card__icon" }, ue = ["href", "aria-label"], fe
     showDefaultActions: { type: Boolean, default: !0 }
   },
   emits: ["open", "download", "error"],
-  setup(P, { emit: H }) {
-    const e = P, v = H, $ = W(), p = a(() => (e.extension || q(e.name) || J(e.mimeType)).toLowerCase()), s = a(() => Q(e.mimeType, e.name)), D = a(() => e.mimeType.toLowerCase().startsWith("image/") || s.value.some((o) => m(o, X)) ? ne : e.mimeType.toLowerCase().startsWith("audio/") || s.value.some((o) => m(o, Y)) ? ie : e.mimeType.toLowerCase().startsWith("video/") || s.value.some((o) => m(o, Z)) ? le : s.value.some((o) => m(o, ee)) ? te : s.value.some((o) => m(o, oe)) ? A : A), E = (o) => {
+  setup(D, { emit: E }) {
+    const e = D, y = E, L = j(), f = a(() => (e.extension || X(e.name) || Y(e.mimeType)).toLowerCase()), s = a(() => Z(e.mimeType, e.name)), M = a(() => e.mimeType.toLowerCase().startsWith("image/") || s.value.some((o) => u(o, ee)) ? le : e.mimeType.toLowerCase().startsWith("audio/") || s.value.some((o) => u(o, oe)) ? ce : e.mimeType.toLowerCase().startsWith("video/") || s.value.some((o) => u(o, ae)) ? me : s.value.some((o) => u(o, re)) ? se : s.value.some((o) => u(o, ie)) ? H : H), O = (o) => {
       if (o === void 0 || Number.isNaN(o) || o < 0) return "";
       if (o === 0) return "0 B";
-      const g = ["B", "KB", "MB", "GB", "TB"], N = Math.min(Math.floor(Math.log(o) / Math.log(1024)), g.length - 1), B = o / 1024 ** N, F = B >= 10 || N === 0 || Number.isInteger(B) ? 0 : 1;
-      return `${B.toFixed(F)} ${g[N]}`;
-    }, L = a(() => E(e.size)), O = a(() => p.value || e.mimeType), k = a(() => [O.value, L.value].filter(Boolean).join(" · ")), _ = a(() => e.mediaPreview === "audio" && !!e.previewSrc && !e.loading && !e.error), w = a(() => e.mediaPreview === "video" && !!e.previewSrc && !e.loading && !e.error), u = a(() => _.value || w.value), R = a(() => e.compact ? "96px" : "120px"), C = a(() => e.mimeType.toLowerCase() === "application/pdf" || p.value === "pdf"), S = a(() => C.value ? e.previewSrc || e.downloadHref : ""), y = a(
-      () => e.showDefaultActions && !!S.value && !u.value && C.value
-    ), T = a(
-      () => !!$.actions || e.showDefaultActions && (e.loading || e.previewSrc && !u.value && !y.value || e.downloadHref)
-    ), M = a(
-      () => U({
+      const B = ["B", "KB", "MB", "GB", "TB"], C = Math.min(Math.floor(Math.log(o) / Math.log(1024)), B.length - 1), S = o / 1024 ** C, W = S >= 10 || C === 0 || Number.isInteger(S) ? 0 : 1;
+      return `${S.toFixed(W)} ${B[C]}`;
+    }, b = a(() => O(e.size)), R = a(() => f.value || e.mimeType), x = a(() => [R.value, b.value].filter(Boolean).join(" · ")), k = a(() => e.mediaPreview === "audio" && !!e.previewSrc && !e.loading && !e.error), v = a(() => e.mediaPreview === "video" && !!e.previewSrc && !e.loading && !e.error), h = a(() => e.mediaPreview === "image" && !!e.previewSrc && !e.loading && !e.error), _ = a(
+      () => k.value || v.value || h.value
+    ), c = a(() => v.value || h.value), z = a(() => e.compact ? "96px" : "120px"), P = a(() => e.mimeType.toLowerCase() === "application/pdf" || f.value === "pdf"), A = a(() => P.value ? e.previewSrc || e.downloadHref : ""), N = a(
+      () => e.showDefaultActions && !!A.value && !_.value && P.value
+    ), I = a(
+      () => !!L.actions || e.showDefaultActions && (e.loading || e.previewSrc && !_.value && !N.value || e.downloadHref)
+    ), F = a(
+      () => Q({
         "nmorph-file-card": [
           e.surface,
           e.compact && "compact",
           e.loading && "loading",
           e.error && "error",
-          u.value && "media",
-          _.value && "media-audio",
-          w.value && "media-video",
+          _.value && "media",
+          k.value && "media-audio",
+          v.value && "media-video",
+          h.value && "media-image",
+          c.value && "media-visual",
           !e.iconSurface && "icon-plain",
-          !T.value && "no-actions"
+          !I.value && "no-actions"
         ]
       })
-    ), x = () => v("open"), z = () => v("download"), I = () => v("error");
-    return (o, g) => (r(), n("div", {
-      class: K(M.value)
+    ), w = () => y("open"), V = () => y("download"), $ = () => y("error");
+    return (o, B) => (r(), i("div", {
+      class: G(F.value)
     }, [
-      f("div", pe, [
-        t(i(d), { size: "medium" }, {
-          default: c(() => [
-            (r(), b(j(D.value)))
+      c.value ? t("", !0) : (r(), i("div", ve, [
+        n(l(p), { size: "medium" }, {
+          default: m(() => [
+            (r(), T(U(M.value)))
           ]),
           _: 1
         }),
-        y.value && !e.loading && !e.error ? (r(), n("a", {
+        N.value && !e.loading && !e.error ? (r(), i("a", {
           key: 0,
-          href: S.value,
+          href: A.value,
           target: "_blank",
           rel: "noopener noreferrer",
           class: "nmorph-file-card__icon-action",
           "aria-label": `Preview ${e.name}`,
-          onClick: x
+          onClick: w
         }, [
-          t(i(d), {
+          n(l(p), {
             size: "small",
-            color: ke
+            color: Ae
           }, {
-            default: c(() => [
-              t(i(se))
+            default: m(() => [
+              n(l(de))
             ]),
             _: 1
           })
-        ], 8, ue)) : l("", !0)
-      ]),
-      f("div", fe, [
-        f("div", he, [
-          f("span", ve, h(e.name), 1),
-          e.error && e.errorText ? (r(), n("span", _e, h(e.errorText), 1)) : k.value ? (r(), n("span", we, h(k.value), 1)) : l("", !0)
-        ]),
-        _.value ? (r(), b(ae, {
+        ], 8, he)) : t("", !0)
+      ])),
+      g("div", _e, [
+        g("div", {
+          class: "nmorph-file-card__info",
+          title: e.name
+        }, [
+          g("span", ge, d(e.name), 1),
+          c.value ? t("", !0) : (r(), i(q, { key: 0 }, [
+            e.error && e.errorText ? (r(), i("span", ye, d(e.errorText), 1)) : x.value ? (r(), i("span", be, d(x.value), 1)) : t("", !0)
+          ], 64))
+        ], 8, we),
+        k.value ? (r(), T(te, {
           key: 0,
           class: "nmorph-file-card__audio-preview",
           src: e.previewSrc,
@@ -121,74 +136,91 @@ const pe = { class: "nmorph-file-card__icon" }, ue = ["href", "aria-label"], fe
           "show-icon": !1,
           "show-header": !1,
           "show-default-actions": !1,
-          onError: I
-        }, null, 8, ["src", "name"])) : l("", !0),
-        w.value ? (r(), b(re, {
+          onError: $
+        }, null, 8, ["src", "name"])) : t("", !0),
+        v.value ? (r(), T(ne, {
           key: 1,
           class: "nmorph-file-card__video-preview",
           src: e.previewSrc,
           name: e.name,
-          height: R.value,
+          height: z.value,
           surface: "plain",
           embedded: "",
           compact: "",
           controls: !1,
           "show-meta": !1,
           "show-default-actions": !1,
-          onError: I
-        }, null, 8, ["src", "name", "height"])) : l("", !0)
+          "preview-mode": "emit",
+          onError: $,
+          onPreview: w
+        }, null, 8, ["src", "name", "height"])) : t("", !0),
+        h.value ? (r(), i("button", {
+          key: 2,
+          class: "nmorph-file-card__image-preview",
+          type: "button",
+          title: e.name,
+          "aria-label": `Preview ${e.name}`,
+          onClick: w
+        }, [
+          g("img", {
+            class: "nmorph-file-card__image",
+            src: e.previewSrc,
+            alt: e.name
+          }, null, 8, Ne)
+        ], 8, ke)) : t("", !0)
       ]),
-      e.showExtensionBadge && p.value ? (r(), n("span", ye, h(p.value), 1)) : l("", !0),
-      T.value ? (r(), n("div", ge, [
-        G(o.$slots, "actions", {}, () => [
-          e.loading ? (r(), n("span", {
+      c.value && b.value ? (r(), i("span", Be, d(b.value), 1)) : t("", !0),
+      e.showExtensionBadge && f.value && !c.value ? (r(), i("span", Ce, d(f.value), 1)) : t("", !0),
+      I.value ? (r(), i("div", Se, [
+        J(o.$slots, "actions", {}, () => [
+          e.loading ? (r(), i("span", {
             key: 0,
             class: "nmorph-file-card__action-loader",
             role: "status",
             "aria-label": `Uploading ${e.name}`
           }, [
-            t(i(d), { size: "small" }, {
-              default: c(() => [
-                t(i(ce))
+            n(l(p), { size: "small" }, {
+              default: m(() => [
+                n(l(ue))
               ]),
               _: 1
             })
-          ], 8, Ne)) : e.previewSrc && !u.value && !y.value ? (r(), n("a", {
+          ], 8, Te)) : e.previewSrc && !_.value && !N.value ? (r(), i("a", {
             key: 1,
             href: e.previewSrc,
             target: "_blank",
             rel: "noopener noreferrer",
             class: "nmorph-file-card__action-link",
             "aria-label": `Open ${e.name}`,
-            onClick: x
+            onClick: w
           }, [
-            t(i(d), { size: "small" }, {
-              default: c(() => [
-                t(i(me))
+            n(l(p), { size: "small" }, {
+              default: m(() => [
+                n(l(pe))
               ]),
               _: 1
             })
-          ], 8, Be)) : l("", !0),
-          !e.loading && e.downloadHref ? (r(), n("a", {
+          ], 8, xe)) : t("", !0),
+          !e.loading && e.downloadHref ? (r(), i("a", {
             key: 2,
             href: e.downloadHref,
             download: e.name,
             class: "nmorph-file-card__action-link",
             "aria-label": `Download ${e.name}`,
-            onClick: z
+            onClick: V
           }, [
-            t(i(d), { size: "small" }, {
-              default: c(() => [
-                t(i(de))
+            n(l(p), { size: "small" }, {
+              default: m(() => [
+                n(l(fe))
               ]),
               _: 1
             })
-          ], 8, be)) : l("", !0)
+          ], 8, Pe)) : t("", !0)
         ])
-      ])) : l("", !0)
+      ])) : t("", !0)
     ], 2));
   }
 });
 export {
-  Ke as default
+  Qe as default
 };

package/dist/components/data/nmorph-image-preview/NmorphImagePreview.css

@@ -1 +1 @@
-.nmorph-image-preview{--width: 50px;--height: 50px;--nmorph-image-preview-radius: var(--default-border-radius);width:var(--width);height:var(--height);overflow:hidden;border-radius:var(--nmorph-image-preview-radius)}.nmorph-image-preview .nmorph-image-preview__trigger{position:relative;width:100%;height:100%;cursor:pointer}.nmorph-image-preview .nmorph-image-preview__trigger:hover{filter:brightness(.8)}.nmorph-image-preview .nmorph-image-preview__trigger .nmorph-image{width:100%;height:100%}.nmorph-image-preview.nmorph-image-preview--gallery-trigger{width:auto;height:auto;overflow:visible}.nmorph-image-preview.nmorph-image-preview--gallery-trigger .nmorph-image-preview__trigger{display:flex;flex-wrap:wrap;gap:var(--nmorph-image-preview-trigger-gap, 8px);width:auto;height:auto}.nmorph-image-preview.nmorph-image-preview--gallery-trigger .nmorph-image-preview__trigger:hover{filter:none}.nmorph-image-preview.nmorph-image-preview--gallery-trigger .nmorph-image-preview__trigger-item{position:relative;display:block;width:var(--width);height:var(--height);padding:0;overflow:hidden;color:inherit;font:inherit;background:transparent;border:0;border-radius:var(--nmorph-image-preview-radius);cursor:pointer}.nmorph-image-preview.nmorph-image-preview--gallery-trigger .nmorph-image-preview__trigger-item:hover{filter:brightness(.8)}.nmorph-image-preview.nmorph-image-preview--gallery-trigger .nmorph-image-preview__trigger-item .nmorph-image{width:100%;height:100%}.nmorph-image-preview.nmorph-image-preview--gallery-trigger .nmorph-image-preview__trigger-more{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;color:var(--nmorph-white-color);font-weight:600;line-height:var(--line-height-regular);background:color-mix(in srgb,var(--nmorph-black-color) 60%,transparent);pointer-events:none}.nmorph-image-preview__portal{display:contents}.nmorph-image-preview__portal .nmorph-image-preview__content{--nmorph-image-preview-content-width: min( calc(100vw - 96px) , 960px);--nmorph-image-preview-content-height: min( calc(100vh - 180px) , 720px);position:absolute;top:50%;left:50%;display:flex;justify-content:center;align-items:center;width:var(--nmorph-image-preview-content-width);height:var(--nmorph-image-preview-content-height);transform:translate(-50%,-50%);transition:var(--transition-04) opacity ease-in-out;pointer-events:none}.nmorph-image-preview__portal .nmorph-image-preview__content .nmorph-image{width:100%;height:100%;pointer-events:none}.nmorph-image-preview__portal .nmorph-image-preview__content .nmorph-image img{display:block;width:auto;max-width:100%;height:auto;max-height:100%;object-fit:contain;pointer-events:auto}.nmorph-image-preview__portal .nmorph-image-preview__actions{position:absolute;bottom:-50px;left:50%;z-index:2;display:flex;height:0;transform:translate(-50%);transition:ease-in-out bottom var(--transition-03)}.nmorph-image-preview__portal .nmorph-image-preview__action-element{margin-right:var(--indentation-03)}.nmorph-image-preview__portal .nmorph-button__content{box-shadow:none}.nmorph-image-preview__portal .nmorph-image-preview__left,.nmorph-image-preview__portal .nmorph-image-preview__right{z-index:2}.nmorph-image-preview__portal .nmorph-image-preview__left{position:absolute;top:50%;left:-100%;transform:rotate(90deg) translate(-50%);transition:ease-in-out left var(--transition-03)}.nmorph-image-preview__portal .nmorph-image-preview__right{position:absolute;top:50%;right:-100%;transform:rotate(270deg) translate(50%);transition:ease-in-out right var(--transition-03)}.nmorph-image-preview__portal.nmorph-image-preview--opened .nmorph-image-preview__actions{bottom:50px}.nmorph-image-preview__portal.nmorph-image-preview--opened{--nmorph-image-preview-btn-margin: 20px}.nmorph-image-preview__portal.nmorph-image-preview--opened .nmorph-image-preview__left{left:var(--nmorph-image-preview-btn-margin)}.nmorph-image-preview__portal.nmorph-image-preview--opened .nmorph-image-preview__right{right:var(--nmorph-image-preview-btn-margin)}
+.nmorph-image-preview{--width: 50px;--height: 50px;--nmorph-image-preview-radius: var(--default-border-radius);width:var(--width);height:var(--height);overflow:hidden;border-radius:var(--nmorph-image-preview-radius)}.nmorph-image-preview .nmorph-image-preview__trigger{position:relative;width:100%;height:100%;cursor:pointer}.nmorph-image-preview .nmorph-image-preview__trigger:hover{filter:brightness(.8)}.nmorph-image-preview .nmorph-image-preview__trigger .nmorph-image{width:100%;height:100%}.nmorph-image-preview.nmorph-image-preview--gallery-trigger{width:auto;height:auto;overflow:visible}.nmorph-image-preview.nmorph-image-preview--gallery-trigger .nmorph-image-preview__trigger{display:flex;flex-wrap:wrap;gap:var(--nmorph-image-preview-trigger-gap, 8px);width:auto;height:auto}.nmorph-image-preview.nmorph-image-preview--gallery-trigger .nmorph-image-preview__trigger:hover{filter:none}.nmorph-image-preview.nmorph-image-preview--gallery-trigger .nmorph-image-preview__trigger-item{position:relative;display:block;width:var(--width);height:var(--height);padding:0;overflow:hidden;color:inherit;font:inherit;background:transparent;border:0;border-radius:var(--nmorph-image-preview-radius);cursor:pointer}.nmorph-image-preview.nmorph-image-preview--gallery-trigger .nmorph-image-preview__trigger-item:hover{filter:brightness(.8)}.nmorph-image-preview.nmorph-image-preview--gallery-trigger .nmorph-image-preview__trigger-item .nmorph-image{width:100%;height:100%}.nmorph-image-preview.nmorph-image-preview--gallery-trigger .nmorph-image-preview__trigger-more{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;color:var(--nmorph-white-color);font-weight:600;line-height:var(--line-height-regular);background:color-mix(in srgb,var(--nmorph-black-color) 60%,transparent);pointer-events:none}.nmorph-image-preview__portal{display:contents}.nmorph-image-preview__portal .nmorph-image-preview__content .nmorph-image{width:100%;height:100%;pointer-events:none}.nmorph-image-preview__portal .nmorph-image-preview__content .nmorph-image img{display:block;width:auto;max-width:100%;height:auto;max-height:100%;object-fit:contain;pointer-events:auto}.nmorph-image-preview__portal .nmorph-image-preview__action-element{margin-right:var(--indentation-03)}