@nmorph/nmorph-ui-kit 2.2.50 → 2.2.52

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

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