@nmorph/nmorph-ui-kit 3.0.1 → 3.0.3

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

@@ -1,15 +1,15 @@
 import './NmorphAudioPreview.css';
-import { defineComponent as L, useSlots as x, ref as d, watch as k, computed as t } from "vue";
+import { defineComponent as C, useSlots as D, ref as d, watch as O, 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 E from "../../../assets/icons/play.svg.js";
+import j from "../../../assets/icons/pause.svg.js";
+import z from "../../../assets/icons/external-link.svg.js";
+import F from "../../../assets/icons/download.svg.js";
+import U from "../../../assets/icons/audio.svg.js";
+import V 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({
+const J = "var(--nmorph-contrast-text-color)", te = /* @__PURE__ */ C({
   __name: "NmorphAudioPreview",
   props: {
     src: { type: String, required: !0 },
@@ -31,22 +31,22 @@ const J = "var(--nmorph-contrast-text-color)", te = /* @__PURE__ */ L({
   },
   emits: ["play", "pause", "open", "download", "error"],
   setup(h, { expose: y, emit: g }) {
-    const e = h, n = g, p = x(), o = d(null), a = d(!1), u = d(0), s = d(e.durationMs ? e.durationMs / 1e3 : 0);
-    k(
+    const e = h, n = g, c = D(), o = d(null), a = d(!1), u = d(0), s = d(e.durationMs ? e.durationMs / 1e3 : 0);
+    O(
       () => e.durationMs,
       (r) => {
         s.value = r ? r / 1e3 : s.value;
       }
     );
-    const l = t(() => s.value || 0), c = t({
+    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-private-audio-preview-progress": `${c.value}%`
+      "--nmorph-private-audio-preview-progress": `${p.value}%`
     })), f = t(
-      () => !!p.actions || e.showDefaultActions && (e.src || e.downloadHref)
+      () => !!c.actions || e.showDefaultActions && (e.src || e.downloadHref)
     ), N = t(
       () => R({
         "nmorph-audio-preview": [
@@ -67,8 +67,8 @@ const J = "var(--nmorph-contrast-text-color)", te = /* @__PURE__ */ L({
       })
     ), 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")}`;
+      const v = Math.floor(r), x = Math.floor(v / 60), k = v % 60;
+      return `${x}:${k.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) {
@@ -93,22 +93,22 @@ const J = "var(--nmorph-contrast-text-color)", te = /* @__PURE__ */ L({
       a.value = !1;
     }, A = (r) => {
       a.value = !1, n("error", r);
-    }, M = () => n("open"), O = () => n("download");
+    }, L = () => n("open"), M = () => n("download");
     y({ audioRef: o });
-    const m = { CONTRAST_ICON_COLOR: J, props: e, emit: n, slots: p, audioRef: o, playing: a, currentTime: u, durationSeconds: s, resolvedDuration: l, progress: c, 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() {
+    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: L, downloadHandler: M, get NmorphIcon() {
       return V;
-    }, get NmorphIconDownload() {
+    }, get NmorphIconAudio() {
       return U;
+    }, get NmorphIconDownload() {
+      return F;
+    }, get NmorphIconExternalLink() {
+      return z;
     }, get NmorphIconLoader() {
       return G;
-    }, get NmorphIconOpen() {
-      return F;
     }, get NmorphIconPause() {
-      return z;
-    }, get NmorphIconPlay() {
       return j;
+    }, get NmorphIconPlay() {
+      return E;
     } };
     return Object.defineProperty(m, "__isScriptSetup", { enumerable: !1, value: !0 }), m;
   }

package/dist/components/data/nmorph-avatar/NmorphAvatar.css

@@ -1 +1 @@
-.nmorph-avatar{position:relative;display:flex;justify-content:center;align-items:center;box-sizing:border-box;overflow:hidden;font-weight:var(--font-weight-semibold);background:var(--nmorph-main-color)}.nmorph-avatar--circle{border-radius:var(--border-radius-circular)}.nmorph-avatar--square{border-radius:var(--default-border-radius)}.nmorph-avatar>.nmorph-image{position:absolute;padding:var(--nmorph-private-avatar-image-padding);border-radius:var(--nmorph-private-avatar-radius)}.nmorph-avatar:not(.nmorph-avatar--plain){background:var(--nmorph-main-color);box-shadow:var(--nmorph-shadow-combined-dark)}.nmorph-avatar:not(.nmorph-avatar--plain).nmorph-avatar--framed{border:var(--nmorph-private-avatar-frame-border) solid var(--nmorph-main-color)}.nmorph-avatar--plain{background:var(--nmorph-main-color);box-shadow:none}.nmorph-avatar--plain.nmorph-avatar--framed{border:var(--nmorph-plain-border)}.nmorph-avatar>.nmorph-image>img{border-radius:var(--nmorph-private-avatar-image-radius)}.nmorph-avatar__initials{color:var(--nmorph-text-color);font-weight:var(--font-weight-semibold);line-height:1}.nmorph-avatar--preview{cursor:pointer}.nmorph-avatar--preview:hover>.nmorph-image{filter:brightness(.8)}
+.nmorph-avatar{position:relative;display:flex;justify-content:center;align-items:center;box-sizing:border-box;overflow:hidden;font-weight:var(--font-weight-semibold);background:var(--nmorph-main-color)}.nmorph-avatar--circle{border-radius:var(--border-radius-circular)}.nmorph-avatar--square{border-radius:var(--default-border-radius)}.nmorph-avatar>.nmorph-image{position:absolute;padding:var(--nmorph-private-avatar-image-padding);border-radius:var(--nmorph-private-avatar-radius)}.nmorph-avatar:not(.nmorph-avatar--plain){background:var(--nmorph-main-color);box-shadow:var(--nmorph-shadow-combined-dark)}.nmorph-avatar:not(.nmorph-avatar--plain).nmorph-avatar--framed{border:var(--nmorph-private-avatar-frame-border) solid var(--nmorph-main-color)}.nmorph-avatar--plain{background:var(--nmorph-main-color);box-shadow:none}.nmorph-avatar--plain.nmorph-avatar--framed{border:var(--nmorph-plain-border)}.nmorph-avatar--plain.nmorph-avatar--borderless{border:0}.nmorph-avatar>.nmorph-image>img{border-radius:var(--nmorph-private-avatar-image-radius)}.nmorph-avatar__initials{color:var(--nmorph-text-color);font-weight:var(--font-weight-semibold);line-height:1}.nmorph-avatar--preview{cursor:pointer}.nmorph-avatar--preview:hover>.nmorph-image{filter:brightness(.8)}

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

@@ -10,6 +10,7 @@ const K = /* @__PURE__ */ $({
   __name: "NmorphAvatar",
   props: {
     design: { type: null, required: !1, default: "nmorph" },
+    borderless: { type: Boolean, required: !1, default: !1 },
     src: { type: [String, Array], required: !1, default: void 0 },
     size: { type: Number, required: !1, default: 48 },
     shape: { type: null, required: !1, default: "circle" },
@@ -30,40 +31,41 @@ const K = /* @__PURE__ */ $({
   emits: ["error", "load"],
   setup(h, { expose: y, emit: S }) {
     y();
-    const r = h, i = S, w = (e) => {
-      i("error", e);
-    }, q = (e) => {
-      i("load", e);
-    }, p = B(!1), u = (e, t = 0) => Array.isArray(e) ? e[t] : e, m = a(() => `${r.imagePadding}px`), o = a(() => `${r.size}px`), b = a(() => u(r.src)), n = a(() => r.previewSrc || r.src), d = a(() => {
-      const e = n.value;
-      return Array.isArray(e) ? e.length > 0 : !!e;
+    const e = h, o = S, b = (r) => {
+      o("error", r);
+    }, w = (r) => {
+      o("load", r);
+    }, p = B(!1), u = (r, t = 0) => Array.isArray(r) ? r[t] : r, d = a(() => `${e.imagePadding}px`), s = a(() => `${e.size}px`), q = a(() => u(e.src)), n = a(() => e.previewSrc || e.src), m = a(() => {
+      const r = n.value;
+      return Array.isArray(r) ? r.length > 0 : !!r;
     }), N = a(() => {
-      const e = n.value;
-      return Array.isArray(e) ? e : e || "";
-    }), s = a(() => r.preview && d.value), l = a(() => r.design || "nmorph"), I = a(
+      const r = n.value;
+      return Array.isArray(r) ? r : r || "";
+    }), l = a(() => e.preview && m.value), i = a(() => e.design || "nmorph"), I = a(
       () => L({
-        nmorph: [l.value === "nmorph" ? "shadow-combined" : ""],
+        nmorph: [i.value === "nmorph" ? "shadow-combined" : ""],
         "nmorph-avatar": [
-          l.value,
-          r.shape,
-          r.frameBorder > 0 && "framed",
-          s.value && "preview"
+          i.value,
+          e.shape,
+          e.frameBorder > 0 && "framed",
+          i.value === "plain" && e.borderless && "borderless",
+          l.value && "preview"
         ]
       })
-    ), x = a(() => `${r.size / 100 * 60}px`), A = a(() => `${Math.max(12, r.size * 0.38)}px`), c = a(() => r.shape === "circle" ? "50%" : "4px"), f = a(() => r.shape === "circle" ? "50%" : "2px"), _ = a(() => ({
-      width: o.value,
-      height: o.value,
-      "--nmorph-private-avatar-image-padding": m.value,
+    ), x = a(() => `${e.size / 100 * 60}px`), A = a(() => `${Math.max(12, e.size * 0.38)}px`), c = a(() => e.shape === "circle" ? "50%" : "4px"), f = a(() => e.shape === "circle" ? "50%" : "2px"), _ = a(() => ({
+      width: s.value,
+      height: s.value,
+      "--nmorph-private-avatar-image-padding": d.value,
       "--nmorph-private-avatar-radius": c.value,
       "--nmorph-private-avatar-image-radius": f.value,
-      "--nmorph-private-avatar-frame-border": `${r.frameBorder}px`
-    })), P = a(() => r.fallback || g), z = a(() => {
-      const e = r.name.trim();
-      if (!e) return "";
-      const t = e.split(/\s+/);
+      "--nmorph-private-avatar-frame-border": `${e.frameBorder}px`
+    })), P = a(() => e.fallback || g), z = a(() => {
+      const r = e.name.trim();
+      if (!r) return "";
+      const t = r.split(/\s+/);
       return (t.length > 1 ? `${t[0][0]}${t[t.length - 1][0]}` : t[0].slice(0, 2)).toUpperCase();
-    }), v = { props: r, emit: i, onImageError: w, onImageLoad: q, previewOpen: p, getSourceByIndex: u, imagePadding: m, size: o, imageSrc: b, previewSource: n, hasPreviewSource: d, imagePreviewSrc: N, previewAvailable: s, resolvedDesign: l, modifiers: I, stubIconSize: x, initialsFontSize: A, radius: c, imageRadius: f, styles: _, fallback: P, initials: z, openPreview: () => {
-      s.value && (p.value = !0);
+    }), v = { props: e, emit: o, onImageError: b, onImageLoad: w, previewOpen: p, getSourceByIndex: u, imagePadding: d, size: s, imageSrc: q, previewSource: n, hasPreviewSource: m, imagePreviewSrc: N, previewAvailable: l, resolvedDesign: i, modifiers: I, stubIconSize: x, initialsFontSize: A, radius: c, imageRadius: f, styles: _, fallback: P, initials: z, openPreview: () => {
+      l.value && (p.value = !0);
     }, get NmorphImage() {
       return C;
     }, get NmorphIcon() {

package/dist/components/data/nmorph-badge/NmorphBadge.css

@@ -1 +1 @@
-.nmorph-badge{position:relative;display:inline-block;height:fit-content;--nmorph-private-badge-dot-size: 4px;--nmorph-private-badge-ribbon-height: 24px;--nmorph-private-badge-ribbon-corner-size: 62px;--nmorph-private-badge-ribbon-width: 116px;--nmorph-private-badge-ribbon-radius: var(--border-radius-40);--nmorph-private-badge-ribbon-offset-x: 0px;--nmorph-private-badge-ribbon-offset-y: 0px}.nmorph-badge .nmorph-badge__container{position:absolute;display:inline-flex;justify-content:center;align-items:center;background:var(--nmorph-private-badge-color);border-radius:var(--default-border-radius);opacity:1}.nmorph-badge.nmorph-badge--tag{position:static;display:inline-flex}.nmorph-badge .nmorph-badge__container--tag{position:static}.nmorph-badge .nmorph-badge__content{display:inline-flex;justify-content:center;align-items:center;box-sizing:border-box;min-width:calc(1em * var(--line-height-regular) + 4px);padding:2px 4px;color:var(--nmorph-light-shade-color);font-size:var(--nmorph-typography-body-large-font-size);line-height:var(--nmorph-typography-body-large-line-height);text-align:center}.nmorph-badge.nmorph-badge--tiny .nmorph-badge__content{font-size:var(--nmorph-typography-caption-font-size)}.nmorph-badge.nmorph-badge--extra-small .nmorph-badge__content{font-size:var(--nmorph-typography-body-small-font-size)}.nmorph-badge.nmorph-badge--medium .nmorph-badge__content{font-size:var(--nmorph-typography-title-small-font-size)}.nmorph-badge.nmorph-badge--large .nmorph-badge__content{font-size:var(--nmorph-typography-title-font-size)}.nmorph-badge.nmorph-badge--extra-large .nmorph-badge__content{font-size:var(--nmorph-typography-title-large-font-size)}.nmorph-badge .nmorph-badge__container--hidden{opacity:0}.nmorph-badge .nmorph-badge__ribbon-frame{position:absolute;inset:0;overflow:hidden;border-radius:var(--default-border-radius);pointer-events:none}.nmorph-badge .nmorph-badge__ribbon-corner{position:absolute;width:var(--nmorph-private-badge-ribbon-corner-size);height:var(--nmorph-private-badge-ribbon-corner-size)}.nmorph-badge .nmorph-badge__container--ribbon{top:50%;left:50%;width:var(--nmorph-private-badge-ribbon-width);height:var(--nmorph-private-badge-ribbon-height);border-radius:0;box-shadow:var(--nmorph-shadow-outset)}.nmorph-badge .nmorph-badge__container--ribbon .nmorph-badge__content{width:100%;min-width:0;height:100%;padding:0 var(--indentation-03);overflow:hidden;font-weight:var(--font-weight-semibold);font-size:var(--nmorph-typography-label-font-size);line-height:1;white-space:nowrap;text-overflow:ellipsis}.nmorph-badge .nmorph-badge__ribbon-corner--top-left{top:var(--nmorph-private-badge-ribbon-offset-y);left:var(--nmorph-private-badge-ribbon-offset-x)}.nmorph-badge .nmorph-badge__ribbon-corner--top-left .nmorph-badge__container--ribbon{border-bottom-right-radius:var(--nmorph-private-badge-ribbon-radius);border-bottom-left-radius:var(--nmorph-private-badge-ribbon-radius);transform:translate(-50%,-50%) rotate(-45deg)}.nmorph-badge .nmorph-badge__ribbon-corner--top-right{top:var(--nmorph-private-badge-ribbon-offset-y);right:var(--nmorph-private-badge-ribbon-offset-x)}.nmorph-badge .nmorph-badge__ribbon-corner--top-right .nmorph-badge__container--ribbon{border-bottom-right-radius:var(--nmorph-private-badge-ribbon-radius);border-bottom-left-radius:var(--nmorph-private-badge-ribbon-radius);transform:translate(-50%,-50%) rotate(45deg)}.nmorph-badge .nmorph-badge__ribbon-corner--bottom-left{bottom:var(--nmorph-private-badge-ribbon-offset-y);left:var(--nmorph-private-badge-ribbon-offset-x)}.nmorph-badge .nmorph-badge__ribbon-corner--bottom-left .nmorph-badge__container--ribbon{border-top-left-radius:var(--nmorph-private-badge-ribbon-radius);border-top-right-radius:var(--nmorph-private-badge-ribbon-radius);transform:translate(-50%,-50%) rotate(45deg)}.nmorph-badge .nmorph-badge__ribbon-corner--bottom-right{right:var(--nmorph-private-badge-ribbon-offset-x);bottom:var(--nmorph-private-badge-ribbon-offset-y)}.nmorph-badge .nmorph-badge__ribbon-corner--bottom-right .nmorph-badge__container--ribbon{border-top-left-radius:var(--nmorph-private-badge-ribbon-radius);border-top-right-radius:var(--nmorph-private-badge-ribbon-radius);transform:translate(-50%,-50%) rotate(-45deg)}.nmorph-badge .nmorph-badge__ribbon-corner--flat{width:var(--nmorph-private-badge-ribbon-width);height:var(--nmorph-private-badge-ribbon-height)}.nmorph-badge .nmorph-badge__ribbon-corner--flat .nmorph-badge__container--ribbon{position:relative;top:auto;left:auto;border-radius:0;transform:none}.nmorph-badge.nmorph-badge--tiny .nmorph-badge__container--ribbon .nmorph-badge__content{font-weight:var(--font-weight-regular);font-size:var(--nmorph-typography-caption-font-size)}.nmorph-badge.nmorph-badge--medium .nmorph-badge__container--ribbon .nmorph-badge__content{font-size:var(--nmorph-typography-title-small-font-size)}.nmorph-badge.nmorph-badge--large .nmorph-badge__container--ribbon .nmorph-badge__content{font-size:var(--nmorph-typography-title-font-size)}.nmorph-badge.nmorph-badge--extra-large .nmorph-badge__container--ribbon .nmorph-badge__content{font-size:var(--nmorph-typography-title-large-font-size)}.nmorph-badge .nmorph-badge__dot{width:var(--nmorph-private-badge-dot-size);height:var(--nmorph-private-badge-dot-size);border-radius:var(--border-radius-circular)}.nmorph-badge.nmorph-badge--tiny{--nmorph-private-badge-dot-size: 3px;--nmorph-private-badge-ribbon-height: 18px;--nmorph-private-badge-ribbon-corner-size: 50px;--nmorph-private-badge-ribbon-width: 92px}.nmorph-badge.nmorph-badge--extra-small{--nmorph-private-badge-dot-size: 4px;--nmorph-private-badge-ribbon-height: 20px;--nmorph-private-badge-ribbon-corner-size: 56px;--nmorph-private-badge-ribbon-width: 104px}.nmorph-badge.nmorph-badge--medium{--nmorph-private-badge-dot-size: 5px;--nmorph-private-badge-ribbon-height: 28px;--nmorph-private-badge-ribbon-corner-size: 68px;--nmorph-private-badge-ribbon-width: 128px}.nmorph-badge.nmorph-badge--large{--nmorph-private-badge-dot-size: 6px;--nmorph-private-badge-ribbon-height: 32px;--nmorph-private-badge-ribbon-corner-size: 76px;--nmorph-private-badge-ribbon-width: 144px}.nmorph-badge.nmorph-badge--extra-large{--nmorph-private-badge-dot-size: 8px;--nmorph-private-badge-ribbon-height: 36px;--nmorph-private-badge-ribbon-corner-size: 84px;--nmorph-private-badge-ribbon-width: 160px}
+.nmorph-badge{position:relative;display:inline-block;height:fit-content;--nmorph-private-badge-dot-size: 4px;--nmorph-private-badge-ribbon-height: 24px;--nmorph-private-badge-ribbon-corner-size: 62px;--nmorph-private-badge-ribbon-width: 116px;--nmorph-private-badge-ribbon-radius: var(--border-radius-40);--nmorph-private-badge-ribbon-offset-x: 0px;--nmorph-private-badge-ribbon-offset-y: 0px}.nmorph-badge .nmorph-badge__container{position:absolute;display:inline-flex;justify-content:center;align-items:center;background:var(--nmorph-private-badge-color);border-radius:var(--default-border-radius);opacity:1}.nmorph-badge.nmorph-badge--tag{position:static;display:inline-flex}.nmorph-badge .nmorph-badge__container--tag{position:static}.nmorph-badge .nmorph-badge__container--tag .nmorph-badge__content--custom{min-height:calc(1em * var(--line-height-regular) + 4px);padding:2px}.nmorph-badge .nmorph-badge__container--tag .nmorph-badge__content--custom>.nmorph-icon{flex:0 0 auto}.nmorph-badge .nmorph-badge__content{--nmorph-private-badge-content-color: var(--nmorph-light-shade-color);display:inline-flex;justify-content:center;align-items:center;box-sizing:border-box;min-width:calc(1em * var(--line-height-regular) + 4px);padding:2px 4px;color:var(--nmorph-private-badge-content-color);font-size:var(--nmorph-typography-body-large-font-size);line-height:var(--nmorph-typography-body-large-line-height);text-align:center}.nmorph-badge .nmorph-badge__content .nmorph-icon{--nmorph-private-icon-color: var(--nmorph-private-badge-content-color)}.nmorph-badge.nmorph-badge--tiny .nmorph-badge__content{font-size:var(--nmorph-typography-caption-font-size)}.nmorph-badge.nmorph-badge--extra-small .nmorph-badge__content{font-size:var(--nmorph-typography-body-small-font-size)}.nmorph-badge.nmorph-badge--medium .nmorph-badge__content{font-size:var(--nmorph-typography-title-small-font-size)}.nmorph-badge.nmorph-badge--large .nmorph-badge__content{font-size:var(--nmorph-typography-title-font-size)}.nmorph-badge.nmorph-badge--extra-large .nmorph-badge__content{font-size:var(--nmorph-typography-title-large-font-size)}.nmorph-badge .nmorph-badge__container--hidden{opacity:0}.nmorph-badge .nmorph-badge__ribbon-frame{position:absolute;inset:0;overflow:hidden;border-radius:var(--default-border-radius);pointer-events:none}.nmorph-badge .nmorph-badge__ribbon-corner{position:absolute;width:var(--nmorph-private-badge-ribbon-corner-size);height:var(--nmorph-private-badge-ribbon-corner-size)}.nmorph-badge .nmorph-badge__container--ribbon{top:50%;left:50%;width:var(--nmorph-private-badge-ribbon-width);height:var(--nmorph-private-badge-ribbon-height);border-radius:0;box-shadow:var(--nmorph-shadow-outset)}.nmorph-badge .nmorph-badge__container--ribbon .nmorph-badge__content{width:100%;min-width:0;height:100%;padding:0 var(--indentation-03);overflow:hidden;font-weight:var(--font-weight-semibold);font-size:var(--nmorph-typography-label-font-size);line-height:1;white-space:nowrap;text-overflow:ellipsis}.nmorph-badge .nmorph-badge__ribbon-corner--top-left{top:var(--nmorph-private-badge-ribbon-offset-y);left:var(--nmorph-private-badge-ribbon-offset-x)}.nmorph-badge .nmorph-badge__ribbon-corner--top-left .nmorph-badge__container--ribbon{border-bottom-right-radius:var(--nmorph-private-badge-ribbon-radius);border-bottom-left-radius:var(--nmorph-private-badge-ribbon-radius);transform:translate(-50%,-50%) rotate(-45deg)}.nmorph-badge .nmorph-badge__ribbon-corner--top-right{top:var(--nmorph-private-badge-ribbon-offset-y);right:var(--nmorph-private-badge-ribbon-offset-x)}.nmorph-badge .nmorph-badge__ribbon-corner--top-right .nmorph-badge__container--ribbon{border-bottom-right-radius:var(--nmorph-private-badge-ribbon-radius);border-bottom-left-radius:var(--nmorph-private-badge-ribbon-radius);transform:translate(-50%,-50%) rotate(45deg)}.nmorph-badge .nmorph-badge__ribbon-corner--bottom-left{bottom:var(--nmorph-private-badge-ribbon-offset-y);left:var(--nmorph-private-badge-ribbon-offset-x)}.nmorph-badge .nmorph-badge__ribbon-corner--bottom-left .nmorph-badge__container--ribbon{border-top-left-radius:var(--nmorph-private-badge-ribbon-radius);border-top-right-radius:var(--nmorph-private-badge-ribbon-radius);transform:translate(-50%,-50%) rotate(45deg)}.nmorph-badge .nmorph-badge__ribbon-corner--bottom-right{right:var(--nmorph-private-badge-ribbon-offset-x);bottom:var(--nmorph-private-badge-ribbon-offset-y)}.nmorph-badge .nmorph-badge__ribbon-corner--bottom-right .nmorph-badge__container--ribbon{border-top-left-radius:var(--nmorph-private-badge-ribbon-radius);border-top-right-radius:var(--nmorph-private-badge-ribbon-radius);transform:translate(-50%,-50%) rotate(-45deg)}.nmorph-badge .nmorph-badge__ribbon-corner--flat{width:var(--nmorph-private-badge-ribbon-width);height:var(--nmorph-private-badge-ribbon-height)}.nmorph-badge .nmorph-badge__ribbon-corner--flat .nmorph-badge__container--ribbon{position:relative;top:auto;left:auto;border-radius:0;transform:none}.nmorph-badge.nmorph-badge--tiny .nmorph-badge__container--ribbon .nmorph-badge__content{font-weight:var(--font-weight-regular);font-size:var(--nmorph-typography-caption-font-size)}.nmorph-badge.nmorph-badge--medium .nmorph-badge__container--ribbon .nmorph-badge__content{font-size:var(--nmorph-typography-title-small-font-size)}.nmorph-badge.nmorph-badge--large .nmorph-badge__container--ribbon .nmorph-badge__content{font-size:var(--nmorph-typography-title-font-size)}.nmorph-badge.nmorph-badge--extra-large .nmorph-badge__container--ribbon .nmorph-badge__content{font-size:var(--nmorph-typography-title-large-font-size)}.nmorph-badge .nmorph-badge__dot{width:var(--nmorph-private-badge-dot-size);height:var(--nmorph-private-badge-dot-size);border-radius:var(--border-radius-circular)}.nmorph-badge.nmorph-badge--tiny{--nmorph-private-badge-dot-size: 3px;--nmorph-private-badge-ribbon-height: 18px;--nmorph-private-badge-ribbon-corner-size: 50px;--nmorph-private-badge-ribbon-width: 92px}.nmorph-badge.nmorph-badge--extra-small{--nmorph-private-badge-dot-size: 4px;--nmorph-private-badge-ribbon-height: 20px;--nmorph-private-badge-ribbon-corner-size: 56px;--nmorph-private-badge-ribbon-width: 104px}.nmorph-badge.nmorph-badge--medium{--nmorph-private-badge-dot-size: 5px;--nmorph-private-badge-ribbon-height: 28px;--nmorph-private-badge-ribbon-corner-size: 68px;--nmorph-private-badge-ribbon-width: 128px}.nmorph-badge.nmorph-badge--large{--nmorph-private-badge-dot-size: 6px;--nmorph-private-badge-ribbon-height: 32px;--nmorph-private-badge-ribbon-corner-size: 76px;--nmorph-private-badge-ribbon-width: 144px}.nmorph-badge.nmorph-badge--extra-large{--nmorph-private-badge-dot-size: 8px;--nmorph-private-badge-ribbon-height: 36px;--nmorph-private-badge-ribbon-corner-size: 84px;--nmorph-private-badge-ribbon-width: 160px}

package/dist/components/data/nmorph-badge/NmorphBadge.vue.js

@@ -1,59 +1,64 @@
 import './NmorphBadge.css';
-import c from "./NmorphBadge.vue2.js";
-import { openBlock as o, createElementBlock as a, normalizeStyle as r, normalizeClass as i, renderSlot as d, createCommentVNode as s, createElementVNode as n, createTextVNode as t, toDisplayString as y, Fragment as m } from "vue";
+import m from "./NmorphBadge.vue2.js";
+import { openBlock as a, createElementBlock as l, normalizeStyle as i, normalizeClass as o, renderSlot as d, createCommentVNode as n, createElementVNode as s, createTextVNode as t, toDisplayString as c } from "vue";
 /* empty css                 */
-import f from "../../../_virtual/_plugin-vue_export-helper.js";
-const _ = { class: "nmorph-badge__content" }, b = {
+import y from "../../../_virtual/_plugin-vue_export-helper.js";
+const f = {
   key: 0,
   class: "nmorph-badge__dot"
-}, g = {
-  key: 1,
-  class: "nmorph-badge__content"
 };
-function h(l, v, p, e, k, T) {
-  return !e.props.disabled && (!e.isTagType || e.shouldShowBadge) ? (o(), a(
+function b(r, h, _, e, g, v) {
+  return !e.props.disabled && (!e.isTagType || e.shouldShowBadge) ? (a(), l(
     "div",
     {
       key: 0,
-      class: i(e.modifiers),
-      style: r(e.styles)
+      class: o(e.modifiers),
+      style: i(e.styles)
     },
     [
-      e.isTagType ? s("v-if", !0) : d(l.$slots, "default", { key: 0 }),
-      e.shouldShowBadge && e.isRibbon ? (o(), a(
+      e.isTagType ? n("v-if", !0) : d(r.$slots, "default", { key: 0 }),
+      e.shouldShowBadge && e.isRibbon ? (a(), l(
         "div",
         {
           key: 1,
           class: "nmorph-badge__ribbon-frame",
-          style: r(e.ribbonFrameStyle)
+          style: i(e.ribbonFrameStyle)
         },
         [
-          n(
+          s(
             "div",
             {
-              class: i(e.ribbonCornerModifiers)
+              class: o(e.ribbonCornerModifiers)
             },
             [
-              n(
+              s(
                 "div",
                 {
                   ref: "badge",
-                  class: i(e.containerModifiers),
-                  style: r(e.containerStyle)
+                  class: o(e.containerModifiers),
+                  style: i(e.containerStyle)
                 },
                 [
-                  n("div", _, [
-                    d(l.$slots, "value", {
-                      value: e.props.value,
-                      displayValue: e.displayValue
-                    }, () => [
-                      t(
-                        y(e.displayValue),
-                        1
-                        /* TEXT */
-                      )
-                    ])
-                  ])
+                  s(
+                    "div",
+                    {
+                      class: o(["nmorph-badge__content", e.hasValueSlot && "nmorph-badge__content--custom"])
+                    },
+                    [
+                      d(r.$slots, "value", {
+                        value: e.props.value,
+                        displayValue: e.displayValue
+                      }, () => [
+                        t(
+                          c(e.displayValue),
+                          1
+                          /* TEXT */
+                        )
+                      ])
+                    ],
+                    2
+                    /* CLASS */
+                  )
                 ],
                 6
                 /* CLASS, STYLE */
@@ -65,50 +70,46 @@ function h(l, v, p, e, k, T) {
         ],
         4
         /* STYLE */
-      )) : e.shouldShowBadge ? (o(), a(
+      )) : e.shouldShowBadge ? (a(), l(
         "div",
         {
           key: 2,
           ref: "badge",
-          class: i(e.containerModifiers),
-          style: r(e.containerStyle)
+          class: o(e.containerModifiers),
+          style: i(e.containerStyle)
         },
         [
-          e.isDotType ? (o(), a("div", b)) : (o(), a("div", g, [
-            e.isTagType ? (o(), a(
-              m,
-              { key: 0 },
-              [
+          e.isDotType ? (a(), l("div", f)) : (a(), l(
+            "div",
+            {
+              key: 1,
+              class: o(["nmorph-badge__content", e.hasValueSlot && "nmorph-badge__content--custom"])
+            },
+            [
+              d(r.$slots, "value", {
+                value: e.props.value,
+                displayValue: e.displayValue
+              }, () => [
                 t(
-                  y(e.displayValue),
+                  c(e.displayValue),
                   1
                   /* TEXT */
                 )
-              ],
-              64
-              /* STABLE_FRAGMENT */
-            )) : d(l.$slots, "value", {
-              key: 1,
-              value: e.props.value,
-              displayValue: e.displayValue
-            }, () => [
-              t(
-                y(e.displayValue),
-                1
-                /* TEXT */
-              )
-            ])
-          ]))
+              ])
+            ],
+            2
+            /* CLASS */
+          ))
         ],
         6
         /* CLASS, STYLE */
-      )) : s("v-if", !0)
+      )) : n("v-if", !0)
     ],
     6
     /* CLASS, STYLE */
-  )) : e.isTagType ? s("v-if", !0) : d(l.$slots, "default", { key: 1 });
+  )) : e.isTagType ? n("v-if", !0) : d(r.$slots, "default", { key: 1 });
 }
-const w = /* @__PURE__ */ f(c, [["render", h], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-badge/NmorphBadge.vue"]]);
+const T = /* @__PURE__ */ y(m, [["render", b], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-badge/NmorphBadge.vue"]]);
 export {
-  w as default
+  T as default
 };

package/dist/components/data/nmorph-badge/NmorphBadge.vue2.js

@@ -1,8 +1,8 @@
 import './NmorphBadge.css';
-import { defineComponent as C, computed as r, ref as u, onMounted as V, watch as B, nextTick as I } from "vue";
+import { defineComponent as B, useSlots as I, computed as r, ref as d, onMounted as T, watch as M, nextTick as O } from "vue";
 import { useModifiers as s } from "../../../utils/create-modifiers.js";
-import { createCssSizeVariables as T, createCssVariables as M } from "../../../utils/common.js";
-const $ = /* @__PURE__ */ C({
+import { createCssSizeVariables as F, createCssVariables as H } from "../../../utils/common.js";
+const X = /* @__PURE__ */ B({
   __name: "NmorphBadge",
   props: {
     value: { type: [Number, String], required: !1, default: void 0 },
@@ -24,9 +24,9 @@ const $ = /* @__PURE__ */ C({
     zIndex: { type: Number, required: !1, default: 1 },
     disabled: { type: Boolean, required: !1, default: !1 }
   },
-  setup(c, { expose: m }) {
-    m();
-    const e = c, b = r(() => e.type === "dot"), a = r(() => e.type === "tag"), t = r(() => e.type === "ribbon"), y = r(
+  setup(y, { expose: h }) {
+    h();
+    const e = y, b = I(), f = r(() => e.type === "dot"), a = r(() => e.type === "tag"), t = r(() => e.type === "ribbon"), g = r(
       () => s({
         "nmorph-badge": [
           e.hidden && "hidden",
@@ -36,7 +36,7 @@ const $ = /* @__PURE__ */ C({
           e.size
         ]
       })
-    ), g = r(
+    ), S = r(
       () => s({
         "nmorph-badge__container": [
           e.hidden && "hidden",
@@ -45,27 +45,29 @@ const $ = /* @__PURE__ */ C({
           t.value && `ribbon-${e.ribbonCorner}`
         ]
       })
-    ), h = r(
+    ), x = r(
       () => s({
         "nmorph-badge__ribbon-corner": [e.ribbonCorner, !e.ribbonTilt && "flat"]
       })
-    ), S = r(() => typeof Number(e.value) == "number" && Number(e.value) > e.max ? `${e.max}+` : e.value), f = r(() => e.hideOnFalsyValue && !e.value), x = r(() => (b.value || e.value !== void 0) && !f.value), o = r(() => {
-      const v = `${(n?.value / 2 + e.offsetX) * -1}px`, N = `${(d?.value / 2 + e.offsetY) * -1}px`;
+    ), z = r(() => typeof Number(e.value) == "number" && Number(e.value) > e.max ? `${e.max}+` : e.value), p = r(() => !!b.value), v = r(() => e.hideOnFalsyValue && !e.value), q = r(
+      () => (f.value || e.value !== void 0 || p.value) && !v.value
+    ), i = r(() => {
+      const m = `${(n?.value / 2 + e.offsetX) * -1}px`, V = `${(l?.value / 2 + e.offsetY) * -1}px`;
       return {
-        x: v,
-        y: N
+        x: m,
+        y: V
       };
-    }), z = r(() => a.value || t.value ? {
+    }), _ = r(() => a.value || t.value ? {
       zIndex: e.zIndex
     } : {
-      right: o.value.x,
-      top: o.value.y,
+      right: i.value.x,
+      top: i.value.y,
       zIndex: e.zIndex
-    }), i = u(null), n = u(0), d = u(0), q = r(() => ({
-      ...M({
+    }), o = d(null), n = d(0), l = d(0), N = r(() => ({
+      ...H({
         "--nmorph-private-badge-color": e.color
       }),
-      ...T({
+      ...F({
         "--nmorph-private-badge-dot-size": e.dotSize,
         "--nmorph-private-badge-ribbon-offset-x": e.offsetX !== 0 && e.offsetX,
         "--nmorph-private-badge-ribbon-offset-y": e.offsetY !== 0 && e.offsetY,
@@ -74,19 +76,19 @@ const $ = /* @__PURE__ */ C({
         "--nmorph-private-badge-ribbon-corner-size": e.ribbonCornerSize,
         "--nmorph-private-badge-ribbon-radius": e.ribbonRadius
       })
-    })), l = async () => {
-      await I(), !(!i.value || a.value || t.value) && (n.value = i.value.clientWidth, d.value = i.value.clientHeight);
-    }, _ = r(() => ({
+    })), u = async () => {
+      await O(), !(!o.value || a.value || t.value) && (n.value = o.value.clientWidth, l.value = o.value.clientHeight);
+    }, C = r(() => ({
       zIndex: e.zIndex
     }));
-    V(l), B(
+    T(u), M(
       () => [e.value, e.max, e.type, e.ribbonCorner, e.ribbonTilt, e.size, e.hideOnFalsyValue],
-      l
+      u
     );
-    const p = { props: e, isDotType: b, isTagType: a, isRibbon: t, modifiers: y, containerModifiers: g, ribbonCornerModifiers: h, displayValue: S, shouldHideOnFalsyValue: f, shouldShowBadge: x, appliedOffset: o, containerStyle: z, badge: i, badgeWidth: n, badgeHeight: d, styles: q, updateBadgeSize: l, ribbonFrameStyle: _ };
-    return Object.defineProperty(p, "__isScriptSetup", { enumerable: !1, value: !0 }), p;
+    const c = { props: e, slots: b, isDotType: f, isTagType: a, isRibbon: t, modifiers: g, containerModifiers: S, ribbonCornerModifiers: x, displayValue: z, hasValueSlot: p, shouldHideOnFalsyValue: v, shouldShowBadge: q, appliedOffset: i, containerStyle: _, badge: o, badgeWidth: n, badgeHeight: l, styles: N, updateBadgeSize: u, ribbonFrameStyle: C };
+    return Object.defineProperty(c, "__isScriptSetup", { enumerable: !1, value: !0 }), c;
   }
 });
 export {
-  $ as default
+  X as default
 };

package/dist/components/data/nmorph-image/NmorphImage.vue.js

@@ -1,54 +1,56 @@
 import './NmorphImage.css';
-import l from "./NmorphImage.vue2.js";
-import { openBlock as r, createElementBlock as e, normalizeStyle as m, normalizeClass as d, createElementVNode as c, renderSlot as i, createTextVNode as t, toDisplayString as s, createCommentVNode as n } from "vue";
+import n from "./NmorphImage.vue2.js";
+import { openBlock as r, createElementBlock as e, normalizeStyle as s, normalizeClass as d, createElementVNode as l, renderSlot as i, createTextVNode as c, toDisplayString as _, createVNode as t, withCtx as p, createCommentVNode as m } from "vue";
 /* empty css                 */
-import _ from "../../../_virtual/_plugin-vue_export-helper.js";
-const p = ["src", "alt", "srcset"], g = {
+import f from "../../../_virtual/_plugin-vue_export-helper.js";
+const h = ["src", "alt", "srcset"], g = {
   key: 0,
   class: "nmorph-image__load-failed"
-}, f = {
+}, y = {
   key: 1,
   class: "nmorph-image__loading"
 };
-function h(a, y, k, o, v, L) {
+function N(a, k, v, o, I, L) {
   return o.props.src ? (r(), e(
     "div",
     {
       key: 0,
       class: d(o.modifiers),
-      style: m(o.styles)
+      style: s(o.styles)
     },
     [
-      c("img", {
+      l("img", {
         src: o.props.src,
         alt: o.props.alt,
         srcset: o.props.srcSet,
         onLoad: o.onImageLoad,
         onError: o.onImageError
-      }, null, 40, p),
+      }, null, 40, h),
       o.loadingFailed ? (r(), e("div", g, [
         i(a.$slots, "error", {}, () => [
-          t(
-            s(o.computedLoadFailedText),
+          c(
+            _(o.computedLoadFailedText),
             1
             /* TEXT */
           )
         ])
-      ])) : o.imageLoadFinished ? n("v-if", !0) : (r(), e("div", f, [
+      ])) : o.imageLoadFinished ? m("v-if", !0) : (r(), e("div", y, [
         i(a.$slots, "loading", {}, () => [
-          t(
-            s(o.computedLoadingText),
-            1
-            /* TEXT */
-          )
+          t(o.NmorphIcon, { size: "medium" }, {
+            default: p(() => [
+              t(o.NmorphIconLoader)
+            ]),
+            _: 1
+            /* STABLE */
+          })
         ])
       ]))
     ],
     6
     /* CLASS, STYLE */
-  )) : n("v-if", !0);
+  )) : m("v-if", !0);
 }
-const S = /* @__PURE__ */ _(l, [["render", h], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-image/NmorphImage.vue"]]);
+const z = /* @__PURE__ */ f(n, [["render", N], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-image/NmorphImage.vue"]]);
 export {
-  S as default
+  z as default
 };

package/dist/components/data/nmorph-image/NmorphImage.vue2.js

@@ -1,9 +1,11 @@
 import './NmorphImage.css';
-import { defineComponent as S, computed as r, ref as u } from "vue";
+import { defineComponent as S, computed as t, ref as s } from "vue";
 import { useModifiers as q } from "../../../utils/create-modifiers.js";
-import { createCssSizeVariables as T } from "../../../utils/common.js";
-import { useI18n as _ } from "vue-i18n";
-const I = /* @__PURE__ */ S({
+import { createCssSizeVariables as _ } from "../../../utils/common.js";
+import { useI18n as x } from "vue-i18n";
+import b from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+import I from "../../../assets/icons/loading.svg.js";
+const C = /* @__PURE__ */ S({
   __name: "NmorphImage",
   props: {
     design: { type: null, required: !1, default: "nmorph" },
@@ -18,32 +20,36 @@ const I = /* @__PURE__ */ S({
     alt: { type: String, required: !1, default: "" }
   },
   emits: ["error", "load"],
-  setup(m, { expose: p, emit: f }) {
+  setup(u, { expose: p, emit: f }) {
     p();
-    const { t: o } = _(), e = m, g = r(() => e.loadingText ? e.loadingText : o("loadingText")), c = r(() => e.loadFailedText ? e.loadFailedText : o("loadFailedText")), t = u(!1), a = u(!1), i = f, h = (l) => {
-      t.value = !0, a.value = !1, i("load", l);
-    }, v = (l) => {
-      t.value = !0, a.value = !0, i("error", l);
-    }, n = r(() => t.value && a.value), d = r(() => e.design || "nmorph"), x = r(
+    const { t: l } = x(), e = u, c = t(() => e.loadFailedText ? e.loadFailedText : l("loadFailedText")), r = s(!1), o = s(!1), a = f, g = (d) => {
+      r.value = !0, o.value = !1, a("load", d);
+    }, h = (d) => {
+      r.value = !0, o.value = !0, a("error", d);
+    }, n = t(() => r.value && o.value), i = t(() => e.design || "nmorph"), v = t(
       () => q({
-        nmorph: [d.value === "nmorph" ? "shadow-combined" : ""],
+        nmorph: [i.value === "nmorph" ? "shadow-combined" : ""],
         "nmorph-image": [
-          d.value,
+          i.value,
           e.frameBorder > 0 && "framed",
-          (n.value || !t.value) && "hide"
+          (n.value || !r.value) && "hide"
         ]
       })
-    ), y = r(() => ({
-      ...T({
+    ), y = t(() => ({
+      ..._({
         "--nmorph-private-image-width": e.width,
         "--nmorph-private-image-height": e.height
       }),
       "--nmorph-private-image-fit": e.fit || "cover",
       "--nmorph-private-image-frame-border": `${e.frameBorder}px`
-    })), s = { t: o, props: e, computedLoadingText: g, computedLoadFailedText: c, imageLoadFinished: t, imageLoadError: a, emit: i, onImageLoad: h, onImageError: v, loadingFailed: n, resolvedDesign: d, modifiers: x, styles: y };
-    return Object.defineProperty(s, "__isScriptSetup", { enumerable: !1, value: !0 }), s;
+    })), m = { t: l, props: e, computedLoadFailedText: c, imageLoadFinished: r, imageLoadError: o, emit: a, onImageLoad: g, onImageError: h, loadingFailed: n, resolvedDesign: i, modifiers: v, styles: y, get NmorphIcon() {
+      return b;
+    }, get NmorphIconLoader() {
+      return I;
+    } };
+    return Object.defineProperty(m, "__isScriptSetup", { enumerable: !1, value: !0 }), m;
   }
 });
 export {
-  I as default
+  C as default
 };