@nmorph/nmorph-ui-kit 2.2.55 → 2.2.57

package/dist/components/basic/nmorph-space/NmorphSpace.vue2.js

@@ -0,0 +1,41 @@
+import './NmorphSpace.css';
+import { defineComponent as d, computed as t } from "vue";
+import { useModifiers as m } from "../../../utils/create-modifiers.js";
+import { toCssSize as c } from "../../../utils/common.js";
+const _ = /* @__PURE__ */ d({
+  __name: "NmorphSpace",
+  props: {
+    tag: { type: String, required: !1, default: "div" },
+    direction: { type: String, required: !1, default: "row" },
+    size: { type: [String, Number], required: !1, default: "medium" },
+    align: { type: String, required: !1, default: "start" },
+    justify: { type: String, required: !1, default: "start" },
+    wrap: { type: Boolean, required: !1, default: !1 },
+    inline: { type: Boolean, required: !1, default: !1 },
+    fill: { type: Boolean, required: !1, default: !1 }
+  },
+  setup(o, { expose: p }) {
+    p();
+    const e = o, r = {
+      small: "4px",
+      medium: "8px",
+      large: "16px"
+    }, f = t(
+      () => m({
+        "nmorph-space": [e.direction, e.wrap && "wrap", e.inline && "inline", e.fill && "fill"]
+      })
+    ), i = (n) => c(r[n] || n), s = t(
+      () => e.align === "start" || e.align === "end" ? `flex-${e.align}` : e.align
+    ), a = t(
+      () => e.justify === "start" || e.justify === "end" ? `flex-${e.justify}` : e.justify
+    ), u = t(() => ({
+      "--nmorph-space-gap": i(e.size),
+      "--nmorph-space-align": s.value,
+      "--nmorph-space-justify": a.value
+    })), l = { props: e, sizeMap: r, modifiers: f, resolveSpaceSize: i, alignItems: s, justifyContent: a, styles: u };
+    return Object.defineProperty(l, "__isScriptSetup", { enumerable: !1, value: !0 }), l;
+  }
+});
+export {
+  _ as default
+};

package/dist/components/data/nmorph-audio-meter/NmorphAudioMeter.vue.js

@@ -1,48 +1,44 @@
 import './NmorphAudioMeter.css';
-import { defineComponent as f, computed as t, openBlock as o, createElementBlock as l, normalizeStyle as _, normalizeClass as m, Fragment as b, renderList as y } from "vue";
-import { useModifiers as M } from "../../../utils/create-modifiers.js";
-const k = ["aria-label", "aria-valuenow"], w = {
+import n from "./NmorphAudioMeter.vue2.js";
+import { openBlock as e, createElementBlock as a, normalizeStyle as t, normalizeClass as i, Fragment as l, renderList as s } from "vue";
+/* empty css                      */
+import m from "../../../_virtual/_plugin-vue_export-helper.js";
+const _ = ["aria-label", "aria-valuenow"], c = {
   key: 1,
   class: "nmorph-audio-meter__line"
-}, x = {
+}, p = {
   key: 2,
   class: "nmorph-audio-meter__ring"
-}, T = /* @__PURE__ */ f({
-  __name: "NmorphAudioMeter",
-  props: {
-    value: { default: void 0 },
-    volumeDb: { default: void 0 },
-    variant: { default: "bars" },
-    bars: { default: 12 },
-    warnThreshold: { default: 0.7 },
-    errorThreshold: { default: 0.9 },
-    label: { default: "Audio level" }
-  },
-  setup(d) {
-    const e = d, n = (r) => Math.min(Math.max(r, 0), 1), a = t(() => typeof e.value == "number" ? n(e.value) : typeof e.volumeDb == "number" ? n((e.volumeDb + 60) / 60) : 0), u = t(() => Array.from({ length: Math.max(e.bars, 1) }, (r, s) => s)), v = t(() => a.value >= e.errorThreshold ? "error" : a.value >= e.warnThreshold ? "warn" : "normal"), c = t(
-      () => M({
-        "nmorph-audio-meter": [e.variant, v.value]
-      })
-    ), h = t(() => ({
-      "--nmorph-audio-meter-level": a.value,
-      "--nmorph-audio-meter-percent": `${Math.round(a.value * 100)}%`
-    })), p = (r) => (r + 1) / u.value.length <= a.value;
-    return (r, s) => (o(), l("div", {
-      class: m(c.value),
-      style: _(h.value),
-      role: "meter",
-      "aria-label": e.label,
-      "aria-valuemin": "0",
-      "aria-valuemax": "100",
-      "aria-valuenow": Math.round(a.value * 100)
-    }, [
-      e.variant === "bars" ? (o(!0), l(b, { key: 0 }, y(u.value, (i) => (o(), l("span", {
-        key: i,
-        class: m(["nmorph-audio-meter__bar", { "nmorph-audio-meter__bar--active": p(i) }])
-      }, null, 2))), 128)) : e.variant === "line" ? (o(), l("span", w)) : (o(), l("span", x))
-    ], 14, k));
-  }
-});
+};
+function d(h, u, v, r, f, b) {
+  return e(), a("div", {
+    class: i(r.modifiers),
+    style: t(r.styles),
+    role: "meter",
+    "aria-label": r.props.label,
+    "aria-valuemin": "0",
+    "aria-valuemax": "100",
+    "aria-valuenow": Math.round(r.level * 100)
+  }, [
+    r.props.variant === "bars" ? (e(!0), a(
+      l,
+      { key: 0 },
+      s(r.barIndexes, (o) => (e(), a(
+        "span",
+        {
+          key: o,
+          class: i(["nmorph-audio-meter__bar", { "nmorph-audio-meter__bar--active": r.isBarActive(o) }])
+        },
+        null,
+        2
+        /* CLASS */
+      ))),
+      128
+      /* KEYED_FRAGMENT */
+    )) : r.props.variant === "line" ? (e(), a("span", c)) : (e(), a("span", p))
+  ], 14, _);
+}
+const B = /* @__PURE__ */ m(n, [["render", d], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-audio-meter/NmorphAudioMeter.vue"]]);
 export {
-  T as default
+  B as default
 };

package/dist/components/data/nmorph-audio-meter/NmorphAudioMeter.vue2.js

@@ -0,0 +1,30 @@
+import './NmorphAudioMeter.css';
+import { defineComponent as p, computed as t } from "vue";
+import { useModifiers as v } from "../../../utils/create-modifiers.js";
+const y = /* @__PURE__ */ p({
+  __name: "NmorphAudioMeter",
+  props: {
+    value: { type: Number, required: !1, default: void 0 },
+    volumeDb: { type: Number, required: !1, default: void 0 },
+    variant: { type: String, required: !1, default: "bars" },
+    bars: { type: Number, required: !1, default: 12 },
+    warnThreshold: { type: Number, required: !1, default: 0.7 },
+    errorThreshold: { type: Number, required: !1, default: 0.9 },
+    label: { type: String, required: !1, default: "Audio level" }
+  },
+  setup(s, { expose: i }) {
+    i();
+    const e = s, u = (a) => Math.min(Math.max(a, 0), 1), r = t(() => typeof e.value == "number" ? u(e.value) : typeof e.volumeDb == "number" ? u((e.volumeDb + 60) / 60) : 0), o = t(() => Array.from({ length: Math.max(e.bars, 1) }, (a, f) => f)), l = t(() => r.value >= e.errorThreshold ? "error" : r.value >= e.warnThreshold ? "warn" : "normal"), d = t(
+      () => v({
+        "nmorph-audio-meter": [e.variant, l.value]
+      })
+    ), m = t(() => ({
+      "--nmorph-audio-meter-level": r.value,
+      "--nmorph-audio-meter-percent": `${Math.round(r.value * 100)}%`
+    })), n = { props: e, clamp: u, level: r, barIndexes: o, state: l, modifiers: d, styles: m, isBarActive: (a) => (a + 1) / o.value.length <= r.value };
+    return Object.defineProperty(n, "__isScriptSetup", { enumerable: !1, value: !0 }), n;
+  }
+});
+export {
+  y as default
+};

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

@@ -1,270 +1,219 @@
 import './NmorphAudioPreview.css';
-import { defineComponent as W, useSlots as X, ref as b, watch as Y, computed as i, openBlock as o, createElementBlock as n, normalizeStyle as C, normalizeClass as Z, createElementVNode as m, createBlock as d, unref as a, withCtx as u, createVNode as s, createCommentVNode as v, toDisplayString as _, withDirectives as ee, vModelText as oe, renderSlot as ae } from "vue";
-import { useModifiers as re } from "../../../utils/create-modifiers.js";
-import { createCssSizeVariables as te } from "../../../utils/common.js";
-import c from "../../basic/nmorph-icon/NmorphIcon.vue.js";
-/* empty css                                      */
-import S from "../../../assets/icons/audio.svg.js";
-import $ from "../../../assets/icons/pause.svg.js";
-import z from "../../../assets/icons/play.svg.js";
-import le from "../../../assets/icons/open.svg.js";
-import ne from "../../../assets/icons/download.svg.js";
-import I from "../../../assets/icons/loading.svg.js";
-const se = ["src", "preload"], ie = ["disabled", "aria-label"], de = {
+import h from "./NmorphAudioPreview.vue2.js";
+import { openBlock as r, createElementBlock as a, normalizeStyle as m, normalizeClass as t, createElementVNode as l, createBlock as n, withCtx as i, createVNode as e, createCommentVNode as d, toDisplayString as s, withDirectives as y, vModelText as v, renderSlot as f } from "vue";
+/* empty css                        */
+import k from "../../../_virtual/_plugin-vue_export-helper.js";
+const w = ["src", "preload"], b = ["disabled", "aria-label"], N = {
   key: 2,
   class: "nmorph-audio-preview__play-indicator"
-}, ue = {
+}, g = {
   key: 1,
   class: "nmorph-audio-preview__icon"
-}, ce = ["aria-label"], pe = { class: "nmorph-audio-preview__body" }, me = {
+}, I = ["aria-label"], P = { class: "nmorph-audio-preview__body" }, C = {
   key: 0,
   class: "nmorph-audio-preview__header"
-}, ve = { class: "nmorph-audio-preview__name" }, _e = {
+}, H = { class: "nmorph-audio-preview__name" }, z = {
   key: 0,
   class: "nmorph-audio-preview__error"
-}, fe = {
+}, O = {
   key: 1,
   class: "nmorph-audio-preview__time"
-}, he = { class: "nmorph-audio-preview__control" }, ye = ["disabled", "aria-label"], we = {
+}, T = { class: "nmorph-audio-preview__control" }, A = ["disabled", "aria-label"], L = {
   key: 0,
   class: "nmorph-audio-preview__time"
-}, be = {
+}, x = {
   key: 3,
   class: "nmorph-audio-preview__actions"
-}, ke = ["href", "aria-label"], ge = ["href", "download", "aria-label"], x = "var(--nmorph-contrast-text-color)", Ae = /* @__PURE__ */ W({
-  __name: "NmorphAudioPreview",
-  props: {
-    src: {},
-    name: { default: "" },
-    durationMs: { default: void 0 },
-    width: { default: void 0 },
-    surface: { default: "card" },
-    embedded: { type: Boolean, default: !1 },
-    showIcon: { type: Boolean, default: !0 },
-    showHeader: { type: Boolean, default: !0 },
-    compact: { type: Boolean, default: !1 },
-    preload: { default: "metadata" },
-    downloadHref: { default: "" },
-    loading: { type: Boolean, default: !1 },
-    error: { type: Boolean, default: !1 },
-    errorText: { default: "" },
-    showPlaybackButton: { type: Boolean, default: !0 },
-    showDefaultActions: { type: Boolean, default: !0 }
-  },
-  emits: ["play", "pause", "open", "download", "error"],
-  setup(A, { expose: M, emit: D }) {
-    const e = A, f = D, O = X(), t = b(null), l = b(!1), y = b(0), w = b(e.durationMs ? e.durationMs / 1e3 : 0);
-    Y(
-      () => e.durationMs,
-      (r) => {
-        w.value = r ? r / 1e3 : w.value;
-      }
-    );
-    const p = i(() => w.value || 0), k = i({
-      get: () => p.value > 0 ? y.value / p.value * 100 : 0,
-      set: (r) => {
-        !t.value || p.value <= 0 || (t.value.currentTime = r / 100 * p.value, y.value = t.value.currentTime);
-      }
-    }), L = i(() => ({ "--nmorph-audio-preview-progress": `${k.value}%` })), B = i(
-      () => !!O.actions || e.showDefaultActions && (e.src || e.downloadHref)
-    ), V = i(
-      () => re({
-        "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",
-          l.value && "playing",
-          !B.value && "no-actions"
-        ]
-      })
-    ), E = i(
-      () => te({
-        "--nmorph-audio-preview-width": e.width
-      })
-    ), H = (r) => {
-      if (!Number.isFinite(r) || r < 0) return "0:00";
-      const h = Math.floor(r), g = Math.floor(h / 60), Q = h % 60;
-      return `${g}:${Q.toString().padStart(2, "0")}`;
-    }, N = i(() => H(y.value)), P = i(() => H(p.value)), T = async () => {
-      if (!(!t.value || !e.showPlaybackButton || e.loading || e.error)) {
-        if (l.value) {
-          t.value.pause();
-          return;
-        }
-        try {
-          await t.value.play();
-        } catch {
-          l.value = !1;
-        }
-      }
-    }, R = () => {
-      !t.value || Number.isNaN(t.value.duration) || (w.value = t.value.duration);
-    }, U = () => {
-      y.value = t.value?.currentTime || 0;
-    }, F = (r) => {
-      l.value = !0, f("play", r);
-    }, j = (r) => {
-      l.value = !1, f("pause", r);
-    }, q = () => {
-      l.value = !1;
-    }, G = (r) => {
-      l.value = !1, f("error", r);
-    }, J = () => f("open"), K = () => f("download");
-    return M({ audioRef: t }), (r, h) => (o(), n("div", {
-      class: Z(V.value),
-      style: C(E.value)
-    }, [
-      m("audio", {
-        ref_key: "audioRef",
-        ref: t,
-        src: e.src,
-        preload: e.preload,
-        onLoadedmetadata: R,
-        onTimeupdate: U,
-        onPlay: F,
-        onPause: j,
-        onEnded: q,
-        onError: G
-      }, null, 40, se),
-      e.showIcon && e.showPlaybackButton ? (o(), n("button", {
+}, S = ["href", "aria-label"], B = ["href", "download", "aria-label"];
+function D(p, c, R, o, E, V) {
+  return r(), a(
+    "div",
+    {
+      class: t(o.modifiers),
+      style: m(o.styles)
+    },
+    [
+      l("audio", {
+        ref: "audioRef",
+        src: o.props.src,
+        preload: o.props.preload,
+        onLoadedmetadata: o.loadedMetadataHandler,
+        onTimeupdate: o.timeUpdateHandler,
+        onPlay: o.playHandler,
+        onPause: o.pauseHandler,
+        onEnded: o.endedHandler,
+        onError: o.errorHandler
+      }, null, 40, w),
+      o.props.showIcon && o.props.showPlaybackButton ? (r(), a("button", {
         key: 0,
         class: "nmorph-audio-preview__icon",
         type: "button",
-        disabled: e.loading || e.error,
-        "aria-label": l.value ? `Pause ${e.name || "audio"}` : `Play ${e.name || "audio"}`,
-        onClick: T
+        disabled: o.props.loading || o.props.error,
+        "aria-label": o.playing ? `Pause ${o.props.name || "audio"}` : `Play ${o.props.name || "audio"}`,
+        onClick: o.togglePlayback
       }, [
-        e.loading ? (o(), d(a(c), {
+        o.props.loading ? (r(), n(o.NmorphIcon, {
           key: 0,
           size: "medium"
         }, {
-          default: u(() => [
-            s(a(I))
+          default: i(() => [
+            e(o.NmorphIconLoader)
           ]),
           _: 1
-        })) : (o(), d(a(c), {
+          /* STABLE */
+        })) : (r(), n(o.NmorphIcon, {
           key: 1,
           size: "medium"
         }, {
-          default: u(() => [
-            s(a(S))
+          default: i(() => [
+            e(o.NmorphIconAudio)
           ]),
           _: 1
+          /* STABLE */
         })),
-        !e.loading && !e.error ? (o(), n("span", de, [
-          s(a(c), {
+        !o.props.loading && !o.props.error ? (r(), a("span", N, [
+          e(o.NmorphIcon, {
             size: "small",
-            color: x
+            color: o.CONTRAST_ICON_COLOR
           }, {
-            default: u(() => [
-              l.value ? (o(), d(a($), { key: 0 })) : (o(), d(a(z), { key: 1 }))
+            default: i(() => [
+              o.playing ? (r(), n(o.NmorphIconPause, { key: 0 })) : (r(), n(o.NmorphIconPlay, { key: 1 }))
             ]),
             _: 1
+            /* STABLE */
           })
-        ])) : v("", !0)
-      ], 8, ie)) : e.showIcon ? (o(), n("div", ue, [
-        e.loading ? (o(), d(a(c), {
+        ])) : d("v-if", !0)
+      ], 8, b)) : o.props.showIcon ? (r(), a("div", g, [
+        o.props.loading ? (r(), n(o.NmorphIcon, {
           key: 0,
           size: "medium"
         }, {
-          default: u(() => [
-            s(a(I))
+          default: i(() => [
+            e(o.NmorphIconLoader)
           ]),
           _: 1
-        })) : (o(), d(a(c), {
+          /* STABLE */
+        })) : (r(), n(o.NmorphIcon, {
           key: 1,
           size: "medium"
         }, {
-          default: u(() => [
-            s(a(S))
+          default: i(() => [
+            e(o.NmorphIconAudio)
           ]),
           _: 1
+          /* STABLE */
         }))
-      ])) : e.showPlaybackButton && !e.loading && !e.error ? (o(), n("button", {
+      ])) : o.props.showPlaybackButton && !o.props.loading && !o.props.error ? (r(), a("button", {
         key: 2,
         class: "nmorph-audio-preview__play-button",
         type: "button",
-        "aria-label": l.value ? `Pause ${e.name || "audio"}` : `Play ${e.name || "audio"}`,
-        onClick: T
+        "aria-label": o.playing ? `Pause ${o.props.name || "audio"}` : `Play ${o.props.name || "audio"}`,
+        onClick: o.togglePlayback
       }, [
-        s(a(c), {
+        e(o.NmorphIcon, {
           size: "small",
-          color: x
+          color: o.CONTRAST_ICON_COLOR
         }, {
-          default: u(() => [
-            l.value ? (o(), d(a($), { key: 0 })) : (o(), d(a(z), { key: 1 }))
+          default: i(() => [
+            o.playing ? (r(), n(o.NmorphIconPause, { key: 0 })) : (r(), n(o.NmorphIconPlay, { key: 1 }))
           ]),
           _: 1
+          /* STABLE */
         })
-      ], 8, ce)) : v("", !0),
-      m("div", pe, [
-        e.showHeader ? (o(), n("div", me, [
-          m("span", ve, _(e.name || "Audio"), 1),
-          e.error && e.errorText ? (o(), n("span", _e, _(e.errorText), 1)) : (o(), n("span", fe, _(N.value) + " / " + _(P.value), 1))
-        ])) : v("", !0),
-        m("div", he, [
-          ee(m("input", {
-            "onUpdate:modelValue": h[0] || (h[0] = (g) => k.value = g),
+      ], 8, I)) : d("v-if", !0),
+      l("div", P, [
+        o.props.showHeader ? (r(), a("div", C, [
+          l(
+            "span",
+            H,
+            s(o.props.name || "Audio"),
+            1
+            /* TEXT */
+          ),
+          o.props.error && o.props.errorText ? (r(), a(
+            "span",
+            z,
+            s(o.props.errorText),
+            1
+            /* TEXT */
+          )) : (r(), a(
+            "span",
+            O,
+            s(o.currentTimeLabel) + " / " + s(o.durationLabel),
+            1
+            /* TEXT */
+          ))
+        ])) : d("v-if", !0),
+        l("div", T, [
+          y(l("input", {
+            "onUpdate:modelValue": c[0] || (c[0] = (_) => o.progress = _),
             class: "nmorph-audio-preview__range",
             type: "range",
             min: "0",
             max: "100",
             step: "0.1",
-            style: C(L.value),
-            disabled: e.loading || e.error || p.value <= 0,
-            "aria-label": `Audio progress ${e.name || ""}`
-          }, null, 12, ye), [
+            style: m(o.progressStyle),
+            disabled: o.props.loading || o.props.error || o.resolvedDuration <= 0,
+            "aria-label": `Audio progress ${o.props.name || ""}`
+          }, null, 12, A), [
             [
-              oe,
-              k.value,
+              v,
+              o.progress,
               void 0,
               { number: !0 }
             ]
           ]),
-          e.showHeader ? v("", !0) : (o(), n("span", we, _(N.value) + " / " + _(P.value), 1))
+          o.props.showHeader ? d("v-if", !0) : (r(), a(
+            "span",
+            L,
+            s(o.currentTimeLabel) + " / " + s(o.durationLabel),
+            1
+            /* TEXT */
+          ))
         ])
       ]),
-      B.value ? (o(), n("div", be, [
-        ae(r.$slots, "actions", {}, () => [
-          m("a", {
-            href: e.src,
+      o.hasActions ? (r(), a("div", x, [
+        f(p.$slots, "actions", {}, () => [
+          l("a", {
+            href: o.props.src,
             target: "_blank",
             rel: "noopener noreferrer",
             class: "nmorph-audio-preview__action-link",
-            "aria-label": `Open ${e.name || "audio"}`,
-            onClick: J
+            "aria-label": `Open ${o.props.name || "audio"}`,
+            onClick: o.openHandler
           }, [
-            s(a(c), { size: "small" }, {
-              default: u(() => [
-                s(a(le))
+            e(o.NmorphIcon, { size: "small" }, {
+              default: i(() => [
+                e(o.NmorphIconOpen)
               ]),
               _: 1
+              /* STABLE */
             })
-          ], 8, ke),
-          e.downloadHref ? (o(), n("a", {
+          ], 8, S),
+          o.props.downloadHref ? (r(), a("a", {
             key: 0,
-            href: e.downloadHref,
-            download: e.name,
+            href: o.props.downloadHref,
+            download: o.props.name,
             class: "nmorph-audio-preview__action-link",
-            "aria-label": `Download ${e.name || "audio"}`,
-            onClick: K
+            "aria-label": `Download ${o.props.name || "audio"}`,
+            onClick: o.downloadHandler
           }, [
-            s(a(c), { size: "small" }, {
-              default: u(() => [
-                s(a(ne))
+            e(o.NmorphIcon, { size: "small" }, {
+              default: i(() => [
+                e(o.NmorphIconDownload)
               ]),
               _: 1
+              /* STABLE */
             })
-          ], 8, ge)) : v("", !0)
+          ], 8, B)) : d("v-if", !0)
         ])
-      ])) : v("", !0)
-    ], 6));
-  }
-});
+      ])) : d("v-if", !0)
+    ],
+    6
+    /* CLASS, STYLE */
+  );
+}
+const q = /* @__PURE__ */ k(h, [["render", D], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-audio-preview/NmorphAudioPreview.vue"]]);
 export {
-  Ae as default
+  q as default
 };