@nmorph/nmorph-ui-kit 2.2.43 → 2.2.45

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

@@ -0,0 +1,124 @@
+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 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 = {
+  key: 0,
+  class: "nmorph-file-card__error"
+}, ne = {
+  key: 1,
+  class: "nmorph-file-card__meta"
+}, ie = {
+  key: 0,
+  class: "nmorph-file-card__badge"
+}, le = {
+  key: 1,
+  class: "nmorph-file-card__actions"
+}, se = ["href", "aria-label"], me = ["href", "download", "aria-label"], Te = /* @__PURE__ */ M({
+  __name: "NmorphFileCard",
+  props: {
+    name: {},
+    extension: { default: "" },
+    mimeType: { default: "" },
+    size: { default: void 0 },
+    previewSrc: { default: "" },
+    downloadHref: { default: "" },
+    compact: { type: Boolean, default: !1 },
+    loading: { type: Boolean, default: !1 },
+    error: { type: Boolean, default: !1 },
+    errorText: { default: "" },
+    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) => {
+      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"]
+      })
+    ), A = () => y("open"), H = () => y("download");
+    return (o, u) => (r(), a("div", {
+      class: F(D.value)
+    }, [
+      _("div", oe, [
+        e.loading ? (r(), v(n(p), {
+          key: 0,
+          size: "medium"
+        }, {
+          default: c(() => [
+            l(n(Y))
+          ]),
+          _: 1
+        })) : (r(), v(n(p), {
+          key: 1,
+          size: "medium"
+        }, {
+          default: c(() => [
+            (r(), v(R(C.value)))
+          ]),
+          _: 1
+        }))
+      ]),
+      _("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)
+      ]),
+      f.value ? (r(), a("span", ie, d(f.value), 1)) : s("", !0),
+      S.value ? (r(), a("div", le, [
+        V(o.$slots, "actions", {}, () => [
+          e.previewSrc ? (r(), a("a", {
+            key: 0,
+            href: e.previewSrc,
+            target: "_blank",
+            rel: "noopener noreferrer",
+            class: "nmorph-file-card__action-link",
+            "aria-label": `Open ${e.name}`,
+            onClick: A
+          }, [
+            l(n(p), { size: "small" }, {
+              default: c(() => [
+                l(n(Z))
+              ]),
+              _: 1
+            })
+          ], 8, se)) : s("", !0),
+          e.downloadHref ? (r(), a("a", {
+            key: 1,
+            href: e.downloadHref,
+            download: e.name,
+            class: "nmorph-file-card__action-link",
+            "aria-label": `Download ${e.name}`,
+            onClick: H
+          }, [
+            l(n(p), { size: "small" }, {
+              default: c(() => [
+                l(n(ee))
+              ]),
+              _: 1
+            })
+          ], 8, me)) : s("", !0)
+        ])
+      ])) : s("", !0)
+    ], 2));
+  }
+});
+export {
+  Te as default
+};

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

@@ -0,0 +1,6 @@
+import './NmorphFileCard.css';
+import o from "./NmorphFileCard.vue.js";
+/* empty css                    */
+export {
+  o as default
+};

package/dist/components/data/nmorph-media-tile/NmorphMediaTile.vue.js

@@ -6,10 +6,10 @@ import n from "../../basic/nmorph-icon/NmorphIcon.vue.js";
 import z from "../nmorph-avatar/NmorphAvatar.vue.js";
 /* empty css                                 */
 import M from "../../../assets/icons/mic.svg.js";
-import V from "../../../assets/icons/video.svg.js";
-import C from "../../../assets/icons/share.svg.js";
-import I from "../../../assets/icons/pin.svg.js";
-import w from "../../../assets/icons/loader.svg.js";
+import V from "../../../assets/icons/share.svg.js";
+import C from "../../../assets/icons/pin.svg.js";
+import I from "../../../assets/icons/loader.svg.js";
+import w from "../../../assets/icons/video.svg.js";
 const T = ["src", "muted", "autoplay", "playsinline"], D = {
   key: 0,
   class: "nmorph-media-tile__fallback"
@@ -105,7 +105,7 @@ const T = ["src", "muted", "autoplay", "playsinline"], D = {
           size: "large"
         }, {
           default: s(() => [
-            r(t(w))
+            r(t(I))
           ]),
           _: 1
         })) : e.avatarSrc ? (a(), u(t(z), {
@@ -129,7 +129,7 @@ const T = ["src", "muted", "autoplay", "playsinline"], D = {
         e.videoOff ? (a(), o("span", U, [
           r(t(n), { size: "small" }, {
             default: s(() => [
-              r(t(V))
+              r(t(w))
             ]),
             _: 1
           })
@@ -137,7 +137,7 @@ const T = ["src", "muted", "autoplay", "playsinline"], D = {
         e.screenSharing ? (a(), o("span", q, [
           r(t(n), { size: "small" }, {
             default: s(() => [
-              r(t(C))
+              r(t(V))
             ]),
             _: 1
           })
@@ -145,7 +145,7 @@ const T = ["src", "muted", "autoplay", "playsinline"], D = {
         e.pinned ? (a(), o("span", A, [
           r(t(n), { size: "small" }, {
             default: s(() => [
-              r(t(I))
+              r(t(C))
             ]),
             _: 1
           })

package/dist/components/data/nmorph-video-preview/NmorphVideoPreview.css

@@ -0,0 +1 @@
+.nmorph-video-preview{position:relative;display:flex;width:var(--nmorph-video-preview-width, 280px);min-width:0;max-width:100%;height:var(--nmorph-video-preview-height, 158px);overflow:hidden;color:var(--nmorph-white-color);background:color-mix(in srgb,var(--nmorph-black-color) 72%,var(--nmorph-main-color));border-radius:var(--default-border-radius);box-shadow:var(--nmorph-shadow-inset)}.nmorph-video-preview .nmorph-video-preview__media,.nmorph-video-preview .nmorph-video-preview__state{width:100%;height:100%}.nmorph-video-preview .nmorph-video-preview__media{display:block;object-fit:cover}.nmorph-video-preview.nmorph-video-preview--contain .nmorph-video-preview__media{object-fit:contain}.nmorph-video-preview .nmorph-video-preview__state{display:flex;flex-direction:column;gap:var(--indentation-02);justify-content:center;align-items:center;padding:var(--indentation-03);text-align:center}.nmorph-video-preview .nmorph-video-preview__error{max-width:100%;overflow:hidden;color:var(--nmorph-error-text-color);font-size:var(--font-size-extra-small);white-space:nowrap;text-overflow:ellipsis}.nmorph-video-preview .nmorph-video-preview__meta{position:absolute;right:0;bottom:0;left:0;display:flex;gap:var(--indentation-02);justify-content:space-between;align-items:center;padding:18px var(--indentation-03) var(--indentation-02);background:linear-gradient(transparent,color-mix(in srgb,var(--nmorph-black-color) 66%,transparent));pointer-events:none}.nmorph-video-preview .nmorph-video-preview__name,.nmorph-video-preview .nmorph-video-preview__duration{min-width:0;overflow:hidden;font-size:var(--font-size-extra-small);line-height:var(--line-height-regular);white-space:nowrap;text-overflow:ellipsis}.nmorph-video-preview .nmorph-video-preview__name{flex:1 1 auto}.nmorph-video-preview .nmorph-video-preview__duration{flex:0 0 auto;font-variant-numeric:tabular-nums}.nmorph-video-preview .nmorph-video-preview__actions{position:absolute;top:var(--indentation-02);right:var(--indentation-02);display:flex;gap:var(--indentation-01);padding:2px;background:color-mix(in srgb,var(--nmorph-main-color) 86%,transparent);border-radius:var(--default-border-radius)}.nmorph-video-preview .nmorph-video-preview__action-link{display:inline-flex;justify-content:center;align-items:center;width:22px;height:22px;color:var(--nmorph-text-color);text-decoration:none;border-radius:var(--default-border-radius)}.nmorph-video-preview .nmorph-video-preview__action-link:hover{color:var(--nmorph-accent-color);background:color-mix(in srgb,var(--nmorph-accent-color) 10%,transparent)}.nmorph-video-preview .nmorph-video-preview__action-link .nmorph-icon{--color: currentColor}.nmorph-video-preview.nmorph-video-preview--compact{width:var(--nmorph-video-preview-width, 180px);height:var(--nmorph-video-preview-height, 102px)}.nmorph-video-preview.nmorph-video-preview--error{outline:1px solid var(--nmorph-error-color)}

package/dist/components/data/nmorph-video-preview/NmorphVideoPreview.vue.js

@@ -0,0 +1,147 @@
+import './NmorphVideoPreview.css';
+import { defineComponent as C, useSlots as b, computed as p, openBlock as o, createElementBlock as t, normalizeStyle as D, normalizeClass as H, createBlock as v, unref as a, withCtx as m, createVNode as l, toDisplayString as f, createCommentVNode as s, renderSlot as V, createElementVNode as $ } from "vue";
+import { useModifiers as x } from "../../../utils/create-modifiers.js";
+import { createCssSizeVariables as I } from "../../../utils/common.js";
+import c from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+/* empty css                                      */
+import A from "../../../assets/icons/loading.svg.js";
+import E from "../../../assets/icons/video.svg.js";
+import M from "../../../assets/icons/open.svg.js";
+import P from "../../../assets/icons/download.svg.js";
+const T = ["src", "poster", "controls", "muted", "playsinline", "preload"], O = {
+  key: 1,
+  class: "nmorph-video-preview__state"
+}, L = {
+  key: 2,
+  class: "nmorph-video-preview__error"
+}, j = {
+  key: 2,
+  class: "nmorph-video-preview__meta"
+}, q = {
+  key: 0,
+  class: "nmorph-video-preview__name"
+}, F = {
+  key: 1,
+  class: "nmorph-video-preview__duration"
+}, G = {
+  key: 3,
+  class: "nmorph-video-preview__actions"
+}, J = ["href", "aria-label"], K = ["href", "download", "aria-label"], re = /* @__PURE__ */ C({
+  __name: "NmorphVideoPreview",
+  props: {
+    src: {},
+    poster: { default: "" },
+    name: { default: "" },
+    width: { default: void 0 },
+    height: { default: void 0 },
+    durationMs: { default: void 0 },
+    compact: { type: Boolean, default: !1 },
+    controls: { type: Boolean, default: !0 },
+    muted: { type: Boolean, default: !1 },
+    playsinline: { type: Boolean, default: !0 },
+    preload: { default: "metadata" },
+    fit: { default: "cover" },
+    downloadHref: { default: "" },
+    loading: { type: Boolean, default: !1 },
+    error: { type: Boolean, default: !1 },
+    errorText: { default: "" },
+    showDefaultActions: { type: Boolean, default: !0 }
+  },
+  emits: ["play", "pause", "open", "download", "error"],
+  setup(_, { emit: h }) {
+    const e = _, i = h, w = b(), y = (d) => {
+      if (!d || d < 0) return "";
+      const r = Math.round(d / 1e3), n = Math.floor(r / 60), z = r % 60;
+      return `${n}:${z.toString().padStart(2, "0")}`;
+    }, u = p(() => y(e.durationMs)), k = p(
+      () => !!w.actions || e.showDefaultActions && (e.src || e.downloadHref)
+    ), g = p(
+      () => x({
+        "nmorph-video-preview": [e.compact && "compact", e.fit, e.loading && "loading", e.error && "error"]
+      })
+    ), B = p(
+      () => I({
+        "--nmorph-video-preview-width": e.width,
+        "--nmorph-video-preview-height": e.height
+      })
+    ), N = () => i("open"), S = () => i("download");
+    return (d, r) => (o(), t("div", {
+      class: H(g.value),
+      style: D(B.value)
+    }, [
+      !e.loading && !e.error ? (o(), t("video", {
+        key: 0,
+        class: "nmorph-video-preview__media",
+        src: e.src,
+        poster: e.poster || void 0,
+        controls: e.controls,
+        muted: e.muted,
+        playsinline: e.playsinline,
+        preload: e.preload,
+        onPlay: r[0] || (r[0] = (n) => i("play", n)),
+        onPause: r[1] || (r[1] = (n) => i("pause", n)),
+        onError: r[2] || (r[2] = (n) => i("error", n))
+      }, null, 40, T)) : (o(), t("div", O, [
+        e.loading ? (o(), v(a(c), {
+          key: 0,
+          size: "large"
+        }, {
+          default: m(() => [
+            l(a(A))
+          ]),
+          _: 1
+        })) : (o(), v(a(c), {
+          key: 1,
+          size: "large"
+        }, {
+          default: m(() => [
+            l(a(E))
+          ]),
+          _: 1
+        })),
+        e.error && e.errorText ? (o(), t("span", L, f(e.errorText), 1)) : s("", !0)
+      ])),
+      e.name || u.value ? (o(), t("div", j, [
+        e.name ? (o(), t("span", q, f(e.name), 1)) : s("", !0),
+        u.value ? (o(), t("span", F, f(u.value), 1)) : s("", !0)
+      ])) : s("", !0),
+      k.value ? (o(), t("div", G, [
+        V(d.$slots, "actions", {}, () => [
+          $("a", {
+            href: e.src,
+            target: "_blank",
+            rel: "noopener noreferrer",
+            class: "nmorph-video-preview__action-link",
+            "aria-label": `Open ${e.name || "video"}`,
+            onClick: N
+          }, [
+            l(a(c), { size: "small" }, {
+              default: m(() => [
+                l(a(M))
+              ]),
+              _: 1
+            })
+          ], 8, J),
+          e.downloadHref ? (o(), t("a", {
+            key: 0,
+            href: e.downloadHref,
+            download: e.name,
+            class: "nmorph-video-preview__action-link",
+            "aria-label": `Download ${e.name || "video"}`,
+            onClick: S
+          }, [
+            l(a(c), { size: "small" }, {
+              default: m(() => [
+                l(a(P))
+              ]),
+              _: 1
+            })
+          ], 8, K)) : s("", !0)
+        ])
+      ])) : s("", !0)
+    ], 6));
+  }
+});
+export {
+  re as default
+};

package/dist/components/data/nmorph-video-preview/NmorphVideoPreview.vue3.js

@@ -0,0 +1,6 @@
+import './NmorphVideoPreview.css';
+import o from "./NmorphVideoPreview.vue.js";
+/* empty css                        */
+export {
+  o as default
+};

package/dist/components/form/nmorph-file-upload/NmorphFileUpload.css

@@ -1 +1 @@
-.nmorph-file-upload{box-sizing:border-box;width:100%;min-width:0}.nmorph-file-upload .nmorph-file-upload__trigger{position:relative;width:100%;min-width:0}.nmorph-file-upload input{display:none}.nmorph-file-upload .nmorph-file-upload__list{width:100%;min-width:0;margin-top:var(--indentation-03)}.nmorph-file-upload .nmorph-file-upload__list>div{box-sizing:border-box;width:100%;min-width:0}.nmorph-file-upload .nmorph-file-upload__file{display:flex;gap:var(--indentation-02);align-items:center;box-sizing:border-box;width:100%;min-width:0;max-width:100%;margin-bottom:var(--indentation-02);padding:var(--indentation-02) var(--indentation-03);overflow:hidden;background:var(--nmorph-main-color);border-radius:var(--default-border-radius);box-shadow:var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-file-upload.nmorph-file-upload--compact .nmorph-file-upload__file{padding:var(--indentation-01) var(--indentation-02)}.nmorph-file-upload.nmorph-file-upload--layout-grid .nmorph-file-upload__list>div{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:var(--indentation-02)}.nmorph-file-upload.nmorph-file-upload--layout-grid .nmorph-file-upload__file{margin-bottom:0}.nmorph-file-upload.nmorph-file-upload--layout-inline .nmorph-file-upload__list>div{display:flex;flex-wrap:wrap;gap:var(--indentation-02)}.nmorph-file-upload.nmorph-file-upload--layout-inline .nmorph-file-upload__file{width:auto;margin-bottom:0}.nmorph-file-upload .nmorph-file-upload__file>.nmorph-image-preview{flex:0 0 auto}.nmorph-file-upload .nmorph-file-upload__file-info{display:flex;flex:1 1 0;gap:var(--indentation-02);align-items:center;min-width:0;max-width:100%;overflow:hidden}.nmorph-file-upload .nmorph-file-upload__file-info>.nmorph-icon{flex:0 0 auto}.nmorph-file-upload .nmorph-file-upload__file-name{display:block;flex:1 1 0;width:var(--nmorph-file-upload-name-width, auto);min-width:0;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.nmorph-file-upload .nmorph-file-upload__remove-file{flex:0 0 auto}
+.nmorph-file-upload{box-sizing:border-box;width:100%;min-width:0}.nmorph-file-upload .nmorph-file-upload__trigger{position:relative;width:100%;min-width:0}.nmorph-file-upload input{display:none}.nmorph-file-upload .nmorph-file-upload__list{width:100%;min-width:0;margin-top:var(--indentation-03)}.nmorph-file-upload .nmorph-file-upload__list>div{box-sizing:border-box;width:100%;min-width:0}.nmorph-file-upload .nmorph-file-upload__file{display:flex;gap:var(--indentation-02);align-items:center;box-sizing:border-box;width:100%;min-width:0;max-width:100%;margin-bottom:var(--indentation-02);padding:var(--indentation-02) var(--indentation-03);overflow:hidden;background:var(--nmorph-main-color);border-radius:var(--default-border-radius);box-shadow:var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-file-upload.nmorph-file-upload--compact .nmorph-file-upload__file{padding:var(--indentation-01) var(--indentation-02)}.nmorph-file-upload.nmorph-file-upload--layout-grid .nmorph-file-upload__list>div{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:var(--indentation-02)}.nmorph-file-upload.nmorph-file-upload--layout-grid .nmorph-file-upload__file{margin-bottom:0}.nmorph-file-upload.nmorph-file-upload--layout-inline .nmorph-file-upload__list>div{display:flex;flex-wrap:wrap;gap:var(--indentation-02)}.nmorph-file-upload.nmorph-file-upload--layout-inline .nmorph-file-upload__file{width:auto;margin-bottom:0}.nmorph-file-upload .nmorph-file-upload__file>.nmorph-image-preview{flex:0 0 auto}.nmorph-file-upload .nmorph-file-upload__file>.nmorph-video-preview,.nmorph-file-upload .nmorph-file-upload__file>.nmorph-audio-preview,.nmorph-file-upload .nmorph-file-upload__file>.nmorph-file-card{flex:1 1 0;min-width:0}.nmorph-file-upload .nmorph-file-upload__file-info{display:flex;flex:1 1 0;gap:var(--indentation-02);align-items:center;min-width:0;max-width:100%;overflow:hidden}.nmorph-file-upload .nmorph-file-upload__file-info>.nmorph-icon{flex:0 0 auto}.nmorph-file-upload .nmorph-file-upload__file-name{display:block;flex:1 1 0;width:var(--nmorph-file-upload-name-width, auto);min-width:0;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.nmorph-file-upload .nmorph-file-upload__remove-file{flex:0 0 auto}