@nmorph/nmorph-ui-kit 2.2.47 → 2.2.48

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{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.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,7 +1,7 @@
 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 { defineComponent as M, useSlots as $, computed as t, openBlock as r, createElementBlock as a, normalizeClass as E, createElementVNode as _, createBlock as v, unref as n, withCtx as c, createVNode as l, resolveDynamicComponent as F, toDisplayString as d, createCommentVNode as s, renderSlot as R } from "vue";
+import { useModifiers as V } from "../../../utils/create-modifiers.js";
+import { getFileExtension as z, getPlainFileType as W, getTypeCandidates as K, isKnownFileType as m } from "../../../utils/file-types.js";
 import { NmorphImageResolution as O, NmorphAudioResolution as j, NmorphVideoResolution as G, NmorphArchiveResolution as P, NmorphDocResolution as q } from "../../form/nmorph-file-upload/types.js";
 import J from "../../../assets/icons/image.svg.js";
 import Q from "../../../assets/icons/video.svg.js";
@@ -34,6 +34,9 @@ const oe = { class: "nmorph-file-card__icon" }, re = { class: "nmorph-file-card_
     size: { default: void 0 },
     previewSrc: { default: "" },
     downloadHref: { default: "" },
+    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,21 +44,27 @@ 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(B, { emit: k }) {
+    const e = B, y = k, T = $(), u = t(() => (e.extension || z(e.name) || W(e.mimeType)).toLowerCase()), i = t(() => K(e.mimeType, e.name)), x = t(() => e.mimeType.toLowerCase().startsWith("image/") || i.value.some((o) => m(o, O)) ? J : e.mimeType.toLowerCase().startsWith("audio/") || i.value.some((o) => m(o, j)) ? X : e.mimeType.toLowerCase().startsWith("video/") || i.value.some((o) => m(o, G)) ? Q : i.value.some((o) => m(o, P)) ? U : i.value.some((o) => m(o, q)) ? g : g), C = (o) => {
       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(
+      const f = ["B", "KB", "MB", "GB", "TB"], h = Math.min(Math.floor(Math.log(o) / Math.log(1024)), f.length - 1), N = o / 1024 ** h, L = N >= 10 || h === 0 ? 0 : 1;
+      return `${N.toFixed(L)} ${f[h]}`;
+    }, S = t(() => C(e.size)), I = t(() => u.value || e.mimeType), w = t(() => [I.value, S.value].filter(Boolean).join(" · ")), b = t(
       () => !!T.actions || e.showDefaultActions && (e.previewSrc || e.downloadHref)
     ), D = t(
-      () => z({
-        "nmorph-file-card": [e.compact && "compact", e.loading && "loading", e.error && "error"]
+      () => V({
+        "nmorph-file-card": [
+          e.surface,
+          e.compact && "compact",
+          e.loading && "loading",
+          e.error && "error",
+          !e.iconSurface && "icon-plain"
+        ]
       })
     ), A = () => y("open"), H = () => y("download");
-    return (o, u) => (r(), a("div", {
-      class: F(D.value)
+    return (o, f) => (r(), a("div", {
+      class: E(D.value)
     }, [
       _("div", oe, [
         e.loading ? (r(), v(n(p), {
@@ -71,7 +80,7 @@ const oe = { class: "nmorph-file-card__icon" }, re = { class: "nmorph-file-card_
           size: "medium"
         }, {
           default: c(() => [
-            (r(), v(R(C.value)))
+            (r(), v(F(x.value)))
           ]),
           _: 1
         }))
@@ -80,9 +89,9 @@ const oe = { class: "nmorph-file-card__icon" }, re = { class: "nmorph-file-card_
         _("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)
       ]),
-      f.value ? (r(), a("span", ie, d(f.value), 1)) : s("", !0),
-      S.value ? (r(), a("div", le, [
-        V(o.$slots, "actions", {}, () => [
+      e.showExtensionBadge && u.value ? (r(), a("span", ie, d(u.value), 1)) : s("", !0),
+      b.value ? (r(), a("div", le, [
+        R(o.$slots, "actions", {}, () => [
           e.previewSrc ? (r(), a("a", {
             key: 0,
             href: e.previewSrc,