@nmorph/nmorph-ui-kit 2.2.56 → 2.2.57

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

@@ -0,0 +1,116 @@
+import './NmorphAudioPreview.css';
+import { defineComponent as L, useSlots as x, ref as d, watch as k, computed as t } from "vue";
+import { useModifiers as R } from "../../../utils/create-modifiers.js";
+import { createCssSizeVariables as $ } from "../../../utils/common.js";
+import j from "../../../assets/icons/play.svg.js";
+import z from "../../../assets/icons/pause.svg.js";
+import F from "../../../assets/icons/open.svg.js";
+import U from "../../../assets/icons/download.svg.js";
+import V from "../../../assets/icons/audio.svg.js";
+import E from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+import G from "../../../assets/icons/loading.svg.js";
+const J = "var(--nmorph-contrast-text-color)", te = /* @__PURE__ */ L({
+  __name: "NmorphAudioPreview",
+  props: {
+    src: { type: String, required: !0 },
+    name: { type: String, required: !1, default: "" },
+    durationMs: { type: Number, required: !1, default: void 0 },
+    width: { type: [Number, String], required: !1, default: void 0 },
+    surface: { type: String, required: !1, default: "card" },
+    embedded: { type: Boolean, required: !1, default: !1 },
+    showIcon: { type: Boolean, required: !1, default: !0 },
+    showHeader: { type: Boolean, required: !1, default: !0 },
+    compact: { type: Boolean, required: !1, default: !1 },
+    preload: { type: String, required: !1, default: "metadata" },
+    downloadHref: { type: String, required: !1, default: "" },
+    loading: { type: Boolean, required: !1, default: !1 },
+    error: { type: Boolean, required: !1, default: !1 },
+    errorText: { type: String, required: !1, default: "" },
+    showPlaybackButton: { type: Boolean, required: !1, default: !0 },
+    showDefaultActions: { type: Boolean, required: !1, default: !0 }
+  },
+  emits: ["play", "pause", "open", "download", "error"],
+  setup(h, { expose: y, emit: g }) {
+    const e = h, n = g, c = x(), o = d(null), a = d(!1), u = d(0), s = d(e.durationMs ? e.durationMs / 1e3 : 0);
+    k(
+      () => e.durationMs,
+      (r) => {
+        s.value = r ? r / 1e3 : s.value;
+      }
+    );
+    const l = t(() => s.value || 0), p = t({
+      get: () => l.value > 0 ? u.value / l.value * 100 : 0,
+      set: (r) => {
+        !o.value || l.value <= 0 || (o.value.currentTime = r / 100 * l.value, u.value = o.value.currentTime);
+      }
+    }), w = t(() => ({ "--nmorph-audio-preview-progress": `${p.value}%` })), f = t(
+      () => !!c.actions || e.showDefaultActions && (e.src || e.downloadHref)
+    ), N = t(
+      () => R({
+        "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",
+          a.value && "playing",
+          !f.value && "no-actions"
+        ]
+      })
+    ), S = t(
+      () => $({
+        "--nmorph-audio-preview-width": e.width
+      })
+    ), i = (r) => {
+      if (!Number.isFinite(r) || r < 0) return "0:00";
+      const v = Math.floor(r), C = Math.floor(v / 60), D = v % 60;
+      return `${C}:${D.toString().padStart(2, "0")}`;
+    }, I = t(() => i(u.value)), q = t(() => i(l.value)), b = async () => {
+      if (!(!o.value || !e.showPlaybackButton || e.loading || e.error)) {
+        if (a.value) {
+          o.value.pause();
+          return;
+        }
+        try {
+          await o.value.play();
+        } catch {
+          a.value = !1;
+        }
+      }
+    }, H = () => {
+      !o.value || Number.isNaN(o.value.duration) || (s.value = o.value.duration);
+    }, _ = () => {
+      u.value = o.value?.currentTime || 0;
+    }, B = (r) => {
+      a.value = !0, n("play", r);
+    }, P = (r) => {
+      a.value = !1, n("pause", r);
+    }, T = () => {
+      a.value = !1;
+    }, A = (r) => {
+      a.value = !1, n("error", r);
+    }, M = () => n("open"), O = () => n("download");
+    y({ audioRef: o });
+    const m = { CONTRAST_ICON_COLOR: J, props: e, emit: n, slots: c, audioRef: o, playing: a, currentTime: u, durationSeconds: s, resolvedDuration: l, progress: p, progressStyle: w, hasActions: f, modifiers: N, styles: S, formatTime: i, currentTimeLabel: I, durationLabel: q, togglePlayback: b, loadedMetadataHandler: H, timeUpdateHandler: _, playHandler: B, pauseHandler: P, endedHandler: T, errorHandler: A, openHandler: M, downloadHandler: O, get NmorphIcon() {
+      return E;
+    }, get NmorphIconAudio() {
+      return V;
+    }, get NmorphIconDownload() {
+      return U;
+    }, get NmorphIconLoader() {
+      return G;
+    }, get NmorphIconOpen() {
+      return F;
+    }, get NmorphIconPause() {
+      return z;
+    }, get NmorphIconPlay() {
+      return j;
+    } };
+    return Object.defineProperty(m, "__isScriptSetup", { enumerable: !1, value: !0 }), m;
+  }
+});
+export {
+  te as default
+};

package/dist/components/data/nmorph-avatar/NmorphAvatar.vue.js

@@ -1,148 +1,114 @@
 import './NmorphAvatar.css';
-import { defineComponent as j, ref as q, computed as r, openBlock as l, createElementBlock as d, normalizeStyle as f, normalizeClass as G, createVNode as s, unref as i, withCtx as o, renderSlot as z, toDisplayString as k, createBlock as n, resolveDynamicComponent as $, createCommentVNode as I } from "vue";
-import { useModifiers as H } from "../../../utils/create-modifiers.js";
-import J from "../nmorph-image-preview/NmorphImagePreview.vue.js";
-/* empty css                                              */
-import A from "../../../assets/icons/avatar.svg.js";
-import K from "../nmorph-image/NmorphImage.vue.js";
-/* empty css                               */
-import u from "../../basic/nmorph-icon/NmorphIcon.vue.js";
-/* empty css                                      */
-import b from "../../../assets/icons/loader.svg.js";
-const le = /* @__PURE__ */ j({
-  __name: "NmorphAvatar",
-  props: {
-    src: { default: void 0 },
-    size: { default: 48 },
-    shape: { default: "circle" },
-    frameBorder: { default: 2 },
-    imagePadding: { default: 4 },
-    name: { default: "" },
-    fallback: { default: () => A },
-    preview: { type: Boolean, default: !1 },
-    previewSrc: { default: void 0 },
-    previewInitialIndex: { default: 0 },
-    previewScaleStep: { default: 0.2 },
-    previewMinScaleLevel: { default: 0.2 },
-    previewMaxScaleLevel: { default: 4 },
-    srcSet: {},
-    fit: {},
-    alt: {}
-  },
-  emits: ["error", "load"],
-  setup(B, { emit: C }) {
-    const e = B, h = C, L = (a) => {
-      h("error", a);
-    }, M = (a) => {
-      h("load", a);
-    }, m = q(!1), P = (a, t = 0) => Array.isArray(a) ? a[t] : a, N = r(() => `${e.imagePadding}px`), p = r(() => `${e.size}px`), w = r(() => P(e.src)), g = r(() => e.previewSrc || e.src), V = r(() => {
-      const a = g.value;
-      return Array.isArray(a) ? a.length > 0 : !!a;
-    }), D = r(() => {
-      const a = g.value;
-      return Array.isArray(a) ? a : a || "";
-    }), v = r(() => e.preview && V.value), E = r(
-      () => H({
-        nmorph: [e.frameBorder > 0 && "shadow-combined"],
-        "nmorph-avatar": [e.shape, v.value && "preview"]
-      })
-    ), S = r(() => `${e.size / 100 * 60}px`), y = r(() => `${Math.max(12, e.size * 0.38)}px`), U = r(() => e.shape === "circle" ? "50%" : "4px"), F = r(() => e.shape === "circle" ? "50%" : "2px"), O = r(() => ({
-      width: p.value,
-      height: p.value,
-      "--nmorph-avatar-size": p.value,
-      "--nmorph-avatar-image-padding": N.value,
-      "--nmorph-avatar-radius": U.value,
-      "--nmorph-avatar-image-radius": F.value,
-      "--nmorph-avatar-frame-border": `${e.frameBorder}px`
-    })), x = r(() => e.fallback || A), c = r(() => {
-      const a = e.name.trim();
-      if (!a) return "";
-      const t = a.split(/\s+/);
-      return (t.length > 1 ? `${t[0][0]}${t[t.length - 1][0]}` : t[0].slice(0, 2)).toUpperCase();
-    }), R = () => {
-      v.value && (m.value = !0);
-    };
-    return (a, t) => (l(), d("div", {
-      class: G(E.value),
-      style: f(O.value),
-      onClick: R
-    }, [
-      s(i(K), {
-        fit: e.fit,
-        src: w.value,
-        "src-set": e.srcSet,
-        alt: e.alt,
+import p from "./NmorphAvatar.vue2.js";
+import { openBlock as e, createElementBlock as l, normalizeStyle as n, normalizeClass as h, createVNode as o, withCtx as a, renderSlot as c, toDisplayString as s, createBlock as i, resolveDynamicComponent as d, createCommentVNode as v } from "vue";
+/* empty css                  */
+import S from "../../../_virtual/_plugin-vue_export-helper.js";
+function w(m, t, _, r, y, I) {
+  return e(), l(
+    "div",
+    {
+      class: h(r.modifiers),
+      style: n(r.styles),
+      onClick: r.openPreview
+    },
+    [
+      o(r.NmorphImage, {
+        fit: r.props.fit,
+        src: r.imageSrc,
+        "src-set": r.props.srcSet,
+        alt: r.props.alt,
         "frame-border": 0,
-        onLoad: M,
-        onError: L
+        onLoad: r.onImageLoad,
+        onError: r.onImageError
       }, {
-        loading: o(() => [
-          s(i(u), { size: "small" }, {
-            default: o(() => [
-              s(i(b))
+        loading: a(() => [
+          o(r.NmorphIcon, { size: "small" }, {
+            default: a(() => [
+              o(r.NmorphIconLoaderDots)
             ]),
             _: 1
+            /* STABLE */
           })
         ]),
-        error: o(() => [
-          z(a.$slots, "error", {}, () => [
-            c.value ? (l(), d("span", {
-              key: 0,
-              class: "nmorph-avatar__initials",
-              style: f({ fontSize: y.value })
-            }, k(c.value), 5)) : (l(), n(i(u), {
+        error: a(() => [
+          c(m.$slots, "error", {}, () => [
+            r.initials ? (e(), l(
+              "span",
+              {
+                key: 0,
+                class: "nmorph-avatar__initials",
+                style: n({ fontSize: r.initialsFontSize })
+              },
+              s(r.initials),
+              5
+              /* TEXT, STYLE */
+            )) : (e(), i(r.NmorphIcon, {
               key: 1,
-              width: S.value
+              width: r.stubIconSize
             }, {
-              default: o(() => [
-                (l(), n($(x.value)))
+              default: a(() => [
+                (e(), i(d(r.fallback)))
               ]),
               _: 1
+              /* STABLE */
             }, 8, ["width"]))
           ])
         ]),
         _: 3
+        /* FORWARDED */
       }, 8, ["fit", "src", "src-set", "alt"]),
-      w.value ? I("", !0) : z(a.$slots, "error", { key: 0 }, () => [
-        c.value ? (l(), d("span", {
-          key: 0,
-          class: "nmorph-avatar__initials",
-          style: f({ fontSize: y.value })
-        }, k(c.value), 5)) : (l(), n(i(u), {
+      r.imageSrc ? v("v-if", !0) : c(m.$slots, "error", { key: 0 }, () => [
+        r.initials ? (e(), l(
+          "span",
+          {
+            key: 0,
+            class: "nmorph-avatar__initials",
+            style: n({ fontSize: r.initialsFontSize })
+          },
+          s(r.initials),
+          5
+          /* TEXT, STYLE */
+        )) : (e(), i(r.NmorphIcon, {
           key: 1,
-          width: S.value
+          width: r.stubIconSize
         }, {
-          default: o(() => [
-            (l(), n($(x.value)))
+          default: a(() => [
+            (e(), i(d(r.fallback)))
           ]),
           _: 1
+          /* STABLE */
         }, 8, ["width"]))
       ]),
-      v.value ? (l(), n(J, {
+      r.previewAvailable ? (e(), i(r.NmorphImagePreview, {
         key: 1,
-        modelValue: m.value,
-        "onUpdate:modelValue": t[0] || (t[0] = (_) => m.value = _),
+        modelValue: r.previewOpen,
+        "onUpdate:modelValue": t[0] || (t[0] = (f) => r.previewOpen = f),
         "show-trigger": !1,
-        src: D.value,
-        alt: e.alt,
-        "initial-index": e.previewInitialIndex,
-        "scale-step": e.previewScaleStep,
-        "min-scale-level": e.previewMinScaleLevel,
-        "max-scale-level": e.previewMaxScaleLevel
+        src: r.imagePreviewSrc,
+        alt: r.props.alt,
+        "initial-index": r.props.previewInitialIndex,
+        "scale-step": r.props.previewScaleStep,
+        "min-scale-level": r.props.previewMinScaleLevel,
+        "max-scale-level": r.props.previewMaxScaleLevel
       }, {
-        loading: o(() => [
-          s(i(u), { size: "small" }, {
-            default: o(() => [
-              s(i(b))
+        loading: a(() => [
+          o(r.NmorphIcon, { size: "small" }, {
+            default: a(() => [
+              o(r.NmorphIconLoaderDots)
             ]),
             _: 1
+            /* STABLE */
           })
         ]),
         _: 1
-      }, 8, ["modelValue", "src", "alt", "initial-index", "scale-step", "min-scale-level", "max-scale-level"])) : I("", !0)
-    ], 6));
-  }
-});
+        /* STABLE */
+      }, 8, ["modelValue", "src", "alt", "initial-index", "scale-step", "min-scale-level", "max-scale-level"])) : v("v-if", !0)
+    ],
+    6
+    /* CLASS, STYLE */
+  );
+}
+const b = /* @__PURE__ */ S(p, [["render", w], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-avatar/NmorphAvatar.vue"]]);
 export {
-  le as default
+  b as default
 };

package/dist/components/data/nmorph-avatar/NmorphAvatar.vue2.js

@@ -0,0 +1,74 @@
+import './NmorphAvatar.css';
+import { defineComponent as z, ref as $, computed as a } from "vue";
+import { useModifiers as B } from "../../../utils/create-modifiers.js";
+import L from "../nmorph-image-preview/NmorphImagePreview.vue.js";
+import v from "../../../assets/icons/avatar.svg.js";
+import M from "../../../assets/icons/loader.svg.js";
+import k from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+import C from "../nmorph-image/NmorphImage.vue.js";
+const J = /* @__PURE__ */ z({
+  __name: "NmorphAvatar",
+  props: {
+    src: { type: [String, Array], required: !1, default: void 0 },
+    size: { type: Number, required: !1, default: 48 },
+    shape: { type: null, required: !1, default: "circle" },
+    frameBorder: { type: Number, required: !1, default: 2 },
+    imagePadding: { type: Number, required: !1, default: 4 },
+    name: { type: String, required: !1, default: "" },
+    fallback: { type: null, required: !1, default: () => v },
+    preview: { type: Boolean, required: !1, default: !1 },
+    previewSrc: { type: [String, Array], required: !1, default: void 0 },
+    previewInitialIndex: { type: Number, required: !1, default: 0 },
+    previewScaleStep: { type: Number, required: !1, default: 0.2 },
+    previewMinScaleLevel: { type: Number, required: !1, default: 0.2 },
+    previewMaxScaleLevel: { type: Number, required: !1, default: 4 },
+    srcSet: { type: String, required: !1 },
+    fit: { type: null, required: !1 },
+    alt: { type: String, required: !1 }
+  },
+  emits: ["error", "load"],
+  setup(g, { expose: h, emit: y }) {
+    h();
+    const r = g, o = y, S = (e) => {
+      o("error", e);
+    }, w = (e) => {
+      o("load", e);
+    }, l = $(!1), p = (e, t = 0) => Array.isArray(e) ? e[t] : e, u = a(() => `${r.imagePadding}px`), i = a(() => `${r.size}px`), b = a(() => p(r.src)), n = a(() => r.previewSrc || r.src), m = a(() => {
+      const e = n.value;
+      return Array.isArray(e) ? e.length > 0 : !!e;
+    }), q = a(() => {
+      const e = n.value;
+      return Array.isArray(e) ? e : e || "";
+    }), s = a(() => r.preview && m.value), N = a(
+      () => B({
+        nmorph: [r.frameBorder > 0 && "shadow-combined"],
+        "nmorph-avatar": [r.shape, s.value && "preview"]
+      })
+    ), I = a(() => `${r.size / 100 * 60}px`), x = a(() => `${Math.max(12, r.size * 0.38)}px`), c = a(() => r.shape === "circle" ? "50%" : "4px"), d = a(() => r.shape === "circle" ? "50%" : "2px"), A = a(() => ({
+      width: i.value,
+      height: i.value,
+      "--nmorph-avatar-size": i.value,
+      "--nmorph-avatar-image-padding": u.value,
+      "--nmorph-avatar-radius": c.value,
+      "--nmorph-avatar-image-radius": d.value,
+      "--nmorph-avatar-frame-border": `${r.frameBorder}px`
+    })), _ = a(() => r.fallback || v), P = a(() => {
+      const e = r.name.trim();
+      if (!e) return "";
+      const t = e.split(/\s+/);
+      return (t.length > 1 ? `${t[0][0]}${t[t.length - 1][0]}` : t[0].slice(0, 2)).toUpperCase();
+    }), f = { props: r, emit: o, onImageError: S, onImageLoad: w, previewOpen: l, getSourceByIndex: p, imagePadding: u, size: i, imageSrc: b, previewSource: n, hasPreviewSource: m, imagePreviewSrc: q, previewAvailable: s, modifiers: N, stubIconSize: I, initialsFontSize: x, radius: c, imageRadius: d, styles: A, fallback: _, initials: P, openPreview: () => {
+      s.value && (l.value = !0);
+    }, get NmorphImage() {
+      return C;
+    }, get NmorphIcon() {
+      return k;
+    }, get NmorphIconLoaderDots() {
+      return M;
+    }, NmorphImagePreview: L };
+    return Object.defineProperty(f, "__isScriptSetup", { enumerable: !1, value: !0 }), f;
+  }
+});
+export {
+  J as default
+};