@nmorph/nmorph-ui-kit 3.0.2 → 3.0.4

package/dist/assets/icons/external-link.svg.js

@@ -21,8 +21,8 @@ function l(h, e) {
     )
   ])]);
 }
-const d = { render: l };
+const c = { render: l };
 export {
-  d as default,
+  c as default,
   l as render
 };

package/dist/components/basic/nmorph-scroll/NmorphScroll.vue.js

@@ -1,6 +1,6 @@
 import './NmorphScroll.css';
 import s from "./NmorphScroll.vue2.js";
-import { openBlock as e, createElementBlock as t, normalizeStyle as n, normalizeClass as c, createElementVNode as i, renderSlot as d, createCommentVNode as a } from "vue";
+import { openBlock as e, createElementBlock as t, normalizeStyle as n, normalizeClass as d, createElementVNode as i, renderSlot as c, createCommentVNode as a } from "vue";
 /* empty css                  */
 import h from "../../../_virtual/_plugin-vue_export-helper.js";
 function v(m, r, _, o, b, y) {
@@ -8,7 +8,7 @@ function v(m, r, _, o, b, y) {
     "div",
     {
       ref: "scrollRoot",
-      class: c(o.modifiers),
+      class: d(o.modifiers),
       style: n(o.rootStyle),
       onMouseenter: o.mouseEnterHandler,
       onMouseleave: o.mouseLeaveHandler
@@ -24,7 +24,7 @@ function v(m, r, _, o, b, y) {
           onWheel: o.wheelHandler
         },
         [
-          d(m.$slots, "default")
+          c(m.$slots, "default")
         ],
         36
         /* STYLE, NEED_HYDRATION */
@@ -59,7 +59,8 @@ function v(m, r, _, o, b, y) {
           key: 1,
           class: "nmorph-scroll__bar nmorph-scroll__bar--horizontal",
           style: n({ right: o.horizontalBarRight }),
-          onPointerdown: r[3] || (r[3] = (l) => o.trackPointerDownHandler("x", l))
+          onPointerdown: r[3] || (r[3] = (l) => o.trackPointerDownHandler("x", l)),
+          onWheel: o.wheelHandler
         },
         [
           i(

package/dist/components/basic/nmorph-scroll/NmorphScroll.vue2.js

@@ -1,6 +1,6 @@
 import './NmorphScroll.css';
-import { defineComponent as Te, ref as h, computed as l, inject as ze, onUnmounted as Be, onMounted as Me, watch as se, nextTick as We } from "vue";
-import { useModifiers as Oe } from "../../../utils/create-modifiers.js";
+import { defineComponent as Te, ref as p, computed as n, inject as Me, onUnmounted as We, onMounted as Ee, watch as de, nextTick as Oe } from "vue";
+import { useModifiers as Le } from "../../../utils/create-modifiers.js";
 const qe = /* @__PURE__ */ Te({
   __name: "NmorphScroll",
   props: {
@@ -21,20 +21,20 @@ const qe = /* @__PURE__ */ Te({
     yGapInPx: { type: Number, required: !1, default: 0 }
   },
   emits: ["on-scroll", "update:model-value", "on-scroll-end"],
-  setup(ie, { expose: ce, emit: ue }) {
-    const r = ie, de = h(null), a = h(null), V = l(() => r.scrollYProp), $ = l(() => r.scrollXProp), v = h(!1), p = h(!1), s = h({
+  setup(he, { expose: pe, emit: fe }) {
+    const o = he, O = p(null), a = p(null), N = n(() => o.scrollYProp), U = n(() => o.scrollXProp), f = p(!1), m = p(!1), s = p({
       clientWidth: 0,
       clientHeight: 0,
       scrollWidth: 0,
       scrollHeight: 0,
       scrollLeft: 0,
       scrollTop: 0
-    }), y = h(!1);
-    let x, c, P, i, H = "";
-    const m = /* @__PURE__ */ new Set(), T = () => {
+    }), y = p(!1);
+    let x, u, P, i, B = "";
+    const v = /* @__PURE__ */ new Set(), w = () => {
       const e = a.value;
       if (!e) {
-        v.value = !1, p.value = !1, s.value = {
+        f.value = !1, m.value = !1, s.value = {
           clientWidth: 0,
           clientHeight: 0,
           scrollWidth: 0,
@@ -52,161 +52,180 @@ const qe = /* @__PURE__ */ Te({
         scrollLeft: e.scrollLeft,
         scrollTop: e.scrollTop
       };
-      s.value = t, v.value = t.scrollHeight > t.clientHeight, p.value = t.scrollWidth > t.clientWidth;
-    }, f = () => {
-      We(T);
-    }, O = () => {
-      if (!c || !a.value) return;
+      s.value = t, f.value = t.scrollHeight > t.clientHeight, m.value = t.scrollWidth > t.clientWidth;
+    }, g = () => {
+      Oe(w);
+    }, L = () => {
+      if (!u || !a.value) return;
       const e = new Set(Array.from(a.value.children));
-      m.forEach((t) => {
-        e.has(t) || (c?.unobserve(t), m.delete(t));
+      v.forEach((t) => {
+        e.has(t) || (u?.unobserve(t), v.delete(t));
       }), e.forEach((t) => {
-        m.has(t) || (c?.observe(t), m.add(t));
+        v.has(t) || (u?.observe(t), v.add(t));
       });
-    }, N = () => {
+    }, G = () => {
       const e = a.value;
-      e && (typeof ResizeObserver < "u" && (c = new ResizeObserver(() => {
-        f();
-      }), O()), typeof MutationObserver < "u" && (P = new MutationObserver(() => {
-        O(), f();
+      e && (typeof ResizeObserver < "u" && (u = new ResizeObserver(() => {
+        g();
+      }), L()), typeof MutationObserver < "u" && (P = new MutationObserver(() => {
+        L(), g();
       }), P.observe(e, {
         attributes: !0,
         characterData: !0,
         childList: !0,
         subtree: !0
       })));
-    }, U = l(() => r.yBarWidthInPx + r.yGapInPx), G = l(() => r.xBarWidthInPx + r.xGapInPx), j = l(
-      () => r.scrollYProp === "hidden" || !v.value ? "0" : `${U.value}px`
-    ), A = l(
-      () => r.scrollXProp === "hidden" || !p.value ? "0" : `${G.value}px`
-    ), E = l(() => `${r.yBarWidthInPx}px`), L = l(() => `${r.xBarWidthInPx}px`), he = l(() => q.value ? L.value : "0px"), ve = l(() => I.value ? E.value : "0px"), F = ze("nmorph");
-    let u;
-    const z = ue, R = () => {
+    }, j = n(() => o.yBarWidthInPx + o.yGapInPx), A = n(() => o.xBarWidthInPx + o.xGapInPx), F = n(
+      () => o.scrollYProp === "hidden" || !f.value ? "0" : `${j.value}px`
+    ), J = n(
+      () => o.scrollXProp === "hidden" || !m.value ? "0" : `${A.value}px`
+    ), R = n(() => `${o.yBarWidthInPx}px`), D = n(() => `${o.xBarWidthInPx}px`), me = n(() => q.value ? D.value : "0px"), ve = n(() => _.value ? R.value : "0px"), K = Me("nmorph");
+    let d;
+    const H = fe, I = () => {
       const e = a.value;
       if (!e) return;
-      const t = Math.trunc(e.scrollLeft), o = Math.trunc(e.scrollTop);
-      z("update:model-value", { x: t, y: o });
-    }, J = () => {
-      z("on-scroll-end");
-    }, pe = (e) => {
-      T(), z("on-scroll", e), a.value && (r.updateOnlyOnScrollEnd || R(), u !== void 0 && clearTimeout(u), u = setTimeout(() => {
-        r.updateOnlyOnScrollEnd && R(), J();
-      }, r.scrollEndDelay));
-    }, K = (e) => e.deltaMode === 1 ? 16 : e.deltaMode === 2 ? Math.max(s.value.clientWidth, 1) : 1, Q = (e) => {
-      if (r.scrollYProp === "hidden" || !v.value || !e) return !1;
-      const t = s.value.scrollTop, o = b("y");
-      return e < 0 ? t > 0 : e > 0 ? t < o : !1;
-    }, me = (e) => {
+      const t = Math.trunc(e.scrollLeft), r = Math.trunc(e.scrollTop);
+      H("update:model-value", { x: t, y: r });
+    }, Q = () => {
+      H("on-scroll-end");
+    }, ge = (e) => {
+      w(), H("on-scroll", e), a.value && (o.updateOnlyOnScrollEnd || I(), d !== void 0 && clearTimeout(d), d = setTimeout(() => {
+        o.updateOnlyOnScrollEnd && I(), Q();
+      }, o.scrollEndDelay));
+    }, Z = (e) => e.deltaMode === 1 ? 16 : e.deltaMode === 2 ? Math.max(s.value.clientWidth, 1) : 1, ee = (e) => {
+      if (o.scrollYProp === "hidden" || !f.value || !e) return !1;
+      const t = s.value.scrollTop, r = S("y");
+      return e < 0 ? t > 0 : e > 0 ? t < r : !1;
+    }, te = (e) => {
+      const t = e.target, r = O.value;
+      if (!(t instanceof Element) || !r) return !1;
+      const l = t.closest(".nmorph-scroll");
+      return !!(l && l !== r);
+    }, re = (e) => {
+      const t = e.target, r = O.value;
+      if (!(t instanceof Element) || !r) return !1;
+      const l = t.closest(".nmorph-scroll__bar--horizontal");
+      return !!(l && l.closest(".nmorph-scroll") === r);
+    }, be = (e) => {
       const t = a.value;
-      if (!t || r.scrollXProp === "hidden" || !p.value || !e.deltaY || Math.abs(e.deltaX) > Math.abs(e.deltaY)) return;
-      const o = e.deltaY * K(e);
-      if (Q(o)) return;
-      const n = t.scrollLeft;
-      W("x", n + o), t.scrollLeft !== n && e.preventDefault();
+      if (w(), te(e)) return;
+      const r = re(e), l = r && Math.abs(e.deltaX) > Math.abs(e.deltaY) ? e.deltaX : e.deltaY;
+      if (!t || o.scrollXProp === "hidden" || !m.value || !l || !r && Math.abs(e.deltaX) > Math.abs(e.deltaY)) return;
+      const c = l * Z(e);
+      if (!r && ee(c)) {
+        e.stopPropagation();
+        return;
+      }
+      const E = t.scrollLeft;
+      if (W("x", E + c), t.scrollLeft === E) {
+        r && (e.preventDefault(), e.stopPropagation());
+        return;
+      }
+      e.preventDefault(), e.stopPropagation();
     };
-    Be(() => {
-      u !== void 0 && clearTimeout(u), x?.disconnect(), c?.disconnect(), P?.disconnect(), m.clear(), X();
+    We(() => {
+      d !== void 0 && clearTimeout(d), x?.disconnect(), u?.disconnect(), P?.disconnect(), v.clear(), V();
     });
-    const B = h(!1), fe = l(
-      () => Oe({
+    const T = p(!1), Se = n(
+      () => Le({
         "nmorph-scroll": {
-          "show-bars": B.value || y.value,
+          "show-bars": T.value || y.value,
           dragging: y.value
         }
       })
-    ), Z = () => r.cssScrollBehavior === "smooth" ? "smooth" : "auto", M = (e) => {
-      const { x: t, y: o } = e;
+    ), oe = () => o.cssScrollBehavior === "smooth" ? "smooth" : "auto", M = (e) => {
+      const { x: t, y: r } = e;
       a.value?.scrollTo({
         left: t,
-        top: o,
-        behavior: Z()
+        top: r,
+        behavior: oe()
       });
     };
-    Me(() => {
-      M(r.modelValue), N(), f(), typeof ResizeObserver < "u" && a.value && (x = new ResizeObserver(() => {
-        f();
+    Ee(() => {
+      M(o.modelValue), G(), g(), typeof ResizeObserver < "u" && a.value && (x = new ResizeObserver(() => {
+        g();
       }), x.observe(a.value));
-    }), se(
-      () => r.modelValue,
+    }), de(
+      () => o.modelValue,
       (e) => {
         M(e);
       },
       { deep: !0, immediate: !0 }
-    ), se(
-      () => F?.browser.dimensions,
+    ), de(
+      () => K?.browser.dimensions,
       () => {
-        f();
+        g();
       },
       { deep: !0, immediate: !0 }
     );
-    const ee = l(() => r.cssScrollBehavior), te = l(() => r.height), re = l(() => r.maxHeight), ge = l(() => ({
-      "--nmorph-private-scroll-bar-width": E.value,
-      "--nmorph-private-scroll-bar-height": L.value,
+    const le = n(() => o.cssScrollBehavior), ne = n(() => o.height), ae = n(() => o.maxHeight), ye = n(() => ({
+      "--nmorph-private-scroll-bar-width": R.value,
+      "--nmorph-private-scroll-bar-height": D.value,
       boxSizing: "border-box",
       minWidth: "0",
       minHeight: "0",
-      height: te.value,
-      maxHeight: re.value
-    })), be = l(() => ({
-      paddingRight: j.value,
-      paddingBottom: A.value,
-      overflowX: $.value,
-      overflowY: V.value,
-      scrollBehavior: ee.value
-    })), I = l(() => r.scrollYProp !== "hidden" && v.value), q = l(() => r.scrollXProp !== "hidden" && p.value), oe = l(
-      () => Math.max(0, s.value.clientHeight - (q.value ? r.xBarWidthInPx : 0))
-    ), le = l(
-      () => Math.max(0, s.value.clientWidth - (I.value ? r.yBarWidthInPx : 0))
-    ), g = (e) => e === "y" ? oe.value : le.value, D = (e) => e === "y" ? s.value.clientHeight : s.value.clientWidth, Y = (e) => e === "y" ? s.value.scrollHeight : s.value.scrollWidth, _ = (e) => e === "y" ? s.value.scrollTop : s.value.scrollLeft, ne = (e) => Math.min(g(e), Math.max(18, e === "y" ? r.yBarWidthInPx * 3 : r.xBarWidthInPx * 3)), b = (e) => Math.max(0, Y(e) - D(e)), d = (e) => {
-      const t = g(e), o = Y(e), n = D(e);
-      return t <= 0 || o <= n ? 0 : Math.min(t, Math.max(ne(e), n / o * t));
-    }, k = (e) => {
-      const t = b(e), o = Math.max(0, g(e) - d(e));
-      return !t || !o ? 0 : _(e) / t * o;
-    }, Se = l(() => ({
-      height: `${d("y")}px`,
-      transform: `translate3d(0, ${k("y")}px, 0)`
-    })), ye = l(() => ({
-      width: `${d("x")}px`,
-      transform: `translate3d(${k("x")}px, 0, 0)`
+      height: ne.value,
+      maxHeight: ae.value
+    })), xe = n(() => ({
+      paddingRight: F.value,
+      paddingBottom: J.value,
+      overflowX: U.value,
+      overflowY: N.value,
+      scrollBehavior: le.value
+    })), _ = n(() => o.scrollYProp !== "hidden" && f.value), q = n(() => o.scrollXProp !== "hidden" && m.value), se = n(
+      () => Math.max(0, s.value.clientHeight - (q.value ? o.xBarWidthInPx : 0))
+    ), ie = n(
+      () => Math.max(0, s.value.clientWidth - (_.value ? o.yBarWidthInPx : 0))
+    ), b = (e) => e === "y" ? se.value : ie.value, X = (e) => e === "y" ? s.value.clientHeight : s.value.clientWidth, k = (e) => e === "y" ? s.value.scrollHeight : s.value.scrollWidth, C = (e) => e === "y" ? s.value.scrollTop : s.value.scrollLeft, ce = (e) => Math.min(b(e), Math.max(18, e === "y" ? o.yBarWidthInPx * 3 : o.xBarWidthInPx * 3)), S = (e) => Math.max(0, k(e) - X(e)), h = (e) => {
+      const t = b(e), r = k(e), l = X(e);
+      return t <= 0 || r <= l ? 0 : Math.min(t, Math.max(ce(e), l / r * t));
+    }, Y = (e) => {
+      const t = S(e), r = Math.max(0, b(e) - h(e));
+      return !t || !r ? 0 : C(e) / t * r;
+    }, Pe = n(() => ({
+      height: `${h("y")}px`,
+      transform: `translate3d(0, ${Y("y")}px, 0)`
+    })), we = n(() => ({
+      width: `${h("x")}px`,
+      transform: `translate3d(${Y("x")}px, 0, 0)`
     })), W = (e, t) => {
-      const o = a.value;
-      if (!o) return;
-      const n = Math.max(0, Math.min(b(e), t));
-      e === "y" ? o.scrollTop = n : o.scrollLeft = n, T();
-    }, X = () => {
-      i && (window.removeEventListener("pointermove", C), window.removeEventListener("pointerup", w), window.removeEventListener("pointercancel", w), i = void 0, y.value = !1, document.body && (document.body.style.userSelect = H));
-    }, C = (e) => {
+      const r = a.value;
+      if (!r) return;
+      const l = Math.max(0, Math.min(S(e), t));
+      e === "y" ? r.scrollTop = l : r.scrollLeft = l, w();
+    }, V = () => {
+      i && (window.removeEventListener("pointermove", $), window.removeEventListener("pointerup", z), window.removeEventListener("pointercancel", z), i = void 0, y.value = !1, document.body && (document.body.style.userSelect = B));
+    }, $ = (e) => {
       if (!i) return;
-      const o = (i.axis === "y" ? e.clientY : e.clientX) - i.pointerStart, n = Math.max(1, i.trackSize - i.thumbSize), S = o / n * i.maxScroll;
-      W(i.axis, i.scrollStart + S);
-    }, w = () => {
-      X();
-    }, xe = (e, t) => {
+      const r = (i.axis === "y" ? e.clientY : e.clientX) - i.pointerStart, l = Math.max(1, i.trackSize - i.thumbSize), c = r / l * i.maxScroll;
+      W(i.axis, i.scrollStart + c);
+    }, z = () => {
+      V();
+    }, ze = (e, t) => {
       t.preventDefault(), t.stopPropagation();
-      const o = g(e), n = d(e), S = b(e);
-      !o || !n || !S || (i = {
+      const r = b(e), l = h(e), c = S(e);
+      !r || !l || !c || (i = {
         axis: e,
         pointerStart: e === "y" ? t.clientY : t.clientX,
-        scrollStart: _(e),
-        trackSize: o,
-        thumbSize: n,
-        maxScroll: S
-      }, y.value = !0, H = document.body?.style.userSelect ?? "", document.body && (document.body.style.userSelect = "none"), window.addEventListener("pointermove", C), window.addEventListener("pointerup", w), window.addEventListener("pointercancel", w));
-    }, Pe = (e, t) => {
+        scrollStart: C(e),
+        trackSize: r,
+        thumbSize: l,
+        maxScroll: c
+      }, y.value = !0, B = document.body?.style.userSelect ?? "", document.body && (document.body.style.userSelect = "none"), window.addEventListener("pointermove", $), window.addEventListener("pointerup", z), window.addEventListener("pointercancel", z));
+    }, Be = (e, t) => {
       if (t.target.closest(".nmorph-scroll__thumb")) return;
-      const n = t.currentTarget.getBoundingClientRect(), S = e === "y" ? t.clientY - n.top : t.clientX - n.left, we = Math.max(1, g(e) - d(e)), He = (S - d(e) / 2) / we * b(e);
+      const l = t.currentTarget.getBoundingClientRect(), c = e === "y" ? t.clientY - l.top : t.clientX - l.left, E = Math.max(1, b(e) - h(e)), He = (c - h(e) / 2) / E * S(e);
       W(e, He);
     };
-    ce({ scrollDOMContainer: a, moveTo: M });
-    const ae = { props: r, scrollRoot: de, scrollDOMContainer: a, overflowY: V, overflowX: $, hasVerticalScroll: v, hasHorizontalScroll: p, metrics: s, isDragging: y, get viewportResizeObserver() {
+    pe({ scrollDOMContainer: a, moveTo: M });
+    const ue = { props: o, scrollRoot: O, scrollDOMContainer: a, overflowY: N, overflowX: U, hasVerticalScroll: f, hasHorizontalScroll: m, metrics: s, isDragging: y, get viewportResizeObserver() {
       return x;
     }, set viewportResizeObserver(e) {
       x = e;
     }, get contentResizeObserver() {
-      return c;
+      return u;
     }, set contentResizeObserver(e) {
-      c = e;
+      u = e;
     }, get mutationObserver() {
       return P;
     }, set mutationObserver(e) {
@@ -216,19 +235,19 @@ const qe = /* @__PURE__ */ Te({
     }, set dragState(e) {
       i = e;
     }, get previousBodyUserSelect() {
-      return H;
+      return B;
     }, set previousBodyUserSelect(e) {
-      H = e;
-    }, observedContentElements: m, updateScrollableState: T, queueScrollableStateUpdate: f, refreshObservedContentElements: O, observeScrollableContent: N, paddingRightCandidate: U, paddingBottomCandidate: G, paddingRight: j, paddingBottom: A, barWidth: E, barHeight: L, verticalBarBottom: he, horizontalBarRight: ve, nmorph: F, get scrollEndTimeout() {
-      return u;
+      B = e;
+    }, observedContentElements: v, updateScrollableState: w, queueScrollableStateUpdate: g, refreshObservedContentElements: L, observeScrollableContent: G, paddingRightCandidate: j, paddingBottomCandidate: A, paddingRight: F, paddingBottom: J, barWidth: R, barHeight: D, verticalBarBottom: me, horizontalBarRight: ve, nmorph: K, get scrollEndTimeout() {
+      return d;
     }, set scrollEndTimeout(e) {
-      u = e;
-    }, emit: z, updateValue: R, handleScrollEnd: J, scrollHandler: pe, getWheelDeltaMultiplier: K, canConsumeVerticalWheel: Q, wheelHandler: me, show: B, modifiers: fe, getProgrammaticScrollBehavior: Z, moveTo: M, scrollBehavior: ee, scrollHeight: te, maxHeight: re, rootStyle: ge, viewportStyle: be, visibleVerticalBar: I, visibleHorizontalBar: q, verticalTrackSize: oe, horizontalTrackSize: le, getTrackSize: g, getClientSize: D, getScrollSize: Y, getScrollPosition: _, getMinThumbSize: ne, getMaxScroll: b, getThumbSize: d, getThumbOffset: k, verticalThumbStyle: Se, horizontalThumbStyle: ye, setScrollPosition: W, stopThumbDrag: X, thumbPointerMoveHandler: C, thumbPointerUpHandler: w, thumbPointerDownHandler: xe, trackPointerDownHandler: Pe, mouseEnterHandler: () => {
-      B.value = !0;
+      d = e;
+    }, emit: H, updateValue: I, handleScrollEnd: Q, scrollHandler: ge, getWheelDeltaMultiplier: Z, canConsumeVerticalWheel: ee, isNestedScrollEvent: te, isCurrentHorizontalBarEvent: re, wheelHandler: be, show: T, modifiers: Se, getProgrammaticScrollBehavior: oe, moveTo: M, scrollBehavior: le, scrollHeight: ne, maxHeight: ae, rootStyle: ye, viewportStyle: xe, visibleVerticalBar: _, visibleHorizontalBar: q, verticalTrackSize: se, horizontalTrackSize: ie, getTrackSize: b, getClientSize: X, getScrollSize: k, getScrollPosition: C, getMinThumbSize: ce, getMaxScroll: S, getThumbSize: h, getThumbOffset: Y, verticalThumbStyle: Pe, horizontalThumbStyle: we, setScrollPosition: W, stopThumbDrag: V, thumbPointerMoveHandler: $, thumbPointerUpHandler: z, thumbPointerDownHandler: ze, trackPointerDownHandler: Be, mouseEnterHandler: () => {
+      T.value = !0;
     }, mouseLeaveHandler: () => {
-      B.value = !1;
+      T.value = !1;
     } };
-    return Object.defineProperty(ae, "__isScriptSetup", { enumerable: !1, value: !0 }), ae;
+    return Object.defineProperty(ue, "__isScriptSetup", { enumerable: !1, value: !0 }), ue;
   }
 });
 export {

package/dist/components/data/nmorph-audio-preview/NmorphAudioPreview.css

@@ -1 +1 @@
-.nmorph-audio-preview{display:flex;gap:var(--indentation-02);align-items:center;box-sizing:border-box;width:var(--nmorph-private-audio-preview-width, 360px);min-width:0;max-width:100%;min-height:64px;padding:var(--indentation-03);color:var(--nmorph-text-color);background:var(--nmorph-main-color);border-radius:var(--default-border-radius);box-shadow:var(--nmorph-shadow-inset)}.nmorph-audio-preview audio{display:none}.nmorph-audio-preview .nmorph-audio-preview__icon{position:relative;display:flex;flex:0 0 auto;justify-content:center;align-items:center;width:36px;height:36px;padding:0;color:var(--nmorph-text-color);background:color-mix(in srgb,var(--nmorph-text-color) 10%,transparent);border:0;border-radius:var(--default-border-radius);cursor:default;--nmorph-private-icon-color: currentColor}.nmorph-audio-preview button.nmorph-audio-preview__icon{cursor:pointer}.nmorph-audio-preview button.nmorph-audio-preview__icon:disabled{cursor:default}.nmorph-audio-preview .nmorph-audio-preview__play-button{display:inline-flex;flex:0 0 auto;justify-content:center;align-items:center;width:20px;height:20px;padding:0;color:var(--nmorph-contrast-text-color);background:color-mix(in srgb,var(--nmorph-black-color) 36%,transparent);border:0;border-radius:var(--border-radius-circular);cursor:pointer}.nmorph-audio-preview .nmorph-audio-preview__play-button:hover{background:color-mix(in srgb,var(--nmorph-black-color) 48%,transparent)}.nmorph-audio-preview .nmorph-audio-preview__play-button .nmorph-icon{--nmorph-private-icon-color: var(--nmorph-contrast-text-color)}.nmorph-audio-preview .nmorph-audio-preview__play-indicator{position:absolute;right:-4px;bottom:-4px;display:inline-flex;justify-content:center;align-items:center;width:18px;height:18px;color:var(--nmorph-contrast-text-color);background:color-mix(in srgb,var(--nmorph-black-color) 36%,transparent);border-radius:var(--border-radius-circular);box-shadow:var(--nmorph-shadow-outset)}.nmorph-audio-preview .nmorph-audio-preview__play-indicator .nmorph-icon{--nmorph-private-icon-color: var(--nmorph-contrast-text-color)}.nmorph-audio-preview .nmorph-audio-preview__body{display:flex;flex:1 1 0;flex-direction:column;gap:var(--indentation-02);box-sizing:border-box;min-width:0}.nmorph-audio-preview .nmorph-audio-preview__header{display:flex;gap:var(--indentation-02);justify-content:space-between;align-items:center;min-width:0}.nmorph-audio-preview .nmorph-audio-preview__control{display:flex;gap:var(--indentation-02);align-items:center;width:100%;min-width:0}.nmorph-audio-preview .nmorph-audio-preview__name,.nmorph-audio-preview .nmorph-audio-preview__time,.nmorph-audio-preview .nmorph-audio-preview__error{min-width:0;overflow:hidden;font-size:var(--nmorph-typography-body-small-font-size);line-height:var(--nmorph-typography-body-small-line-height);white-space:nowrap;text-overflow:ellipsis}.nmorph-audio-preview .nmorph-audio-preview__name{flex:1 1 auto;font-weight:var(--font-weight-semibold)}.nmorph-audio-preview .nmorph-audio-preview__time{flex:0 0 auto;color:var(--nmorph-semi-contrast-text-color);font-variant-numeric:tabular-nums}.nmorph-audio-preview .nmorph-audio-preview__error{flex:0 1 auto;color:var(--nmorph-error-text-color)}.nmorph-audio-preview .nmorph-audio-preview__range{flex:1 1 0;width:100%;min-width:0;height:6px;padding:0;background:linear-gradient(to right,var(--nmorph-accent-color) var(--nmorph-private-audio-preview-progress, 0%),color-mix(in srgb,var(--nmorph-text-color) 16%,transparent) 0);border-radius:var(--border-radius-100);outline:0;cursor:pointer;appearance:none}.nmorph-audio-preview .nmorph-audio-preview__range:disabled{cursor:default;opacity:.6}.nmorph-audio-preview .nmorph-audio-preview__range::-webkit-slider-thumb{width:14px;height:14px;background:var(--nmorph-accent-color);border:2px solid var(--nmorph-main-color);border-radius:var(--border-radius-circular);box-shadow:var(--nmorph-shadow-outset);appearance:none}.nmorph-audio-preview .nmorph-audio-preview__range::-moz-range-thumb{width:14px;height:14px;background:var(--nmorph-accent-color);border:2px solid var(--nmorph-main-color);border-radius:var(--border-radius-circular);box-shadow:var(--nmorph-shadow-outset)}.nmorph-audio-preview .nmorph-audio-preview__actions{display:flex;flex:0 0 auto;gap:var(--indentation-01);align-items:center}.nmorph-audio-preview .nmorph-audio-preview__action-link{display:inline-flex;justify-content:center;align-items:center;width:22px;height:22px;color:inherit;text-decoration:none;border-radius:var(--default-border-radius)}.nmorph-audio-preview .nmorph-audio-preview__action-link:hover{color:var(--nmorph-accent-color);background:color-mix(in srgb,var(--nmorph-accent-color) 10%,transparent)}.nmorph-audio-preview .nmorph-audio-preview__action-link .nmorph-icon{--nmorph-private-icon-color: currentColor}.nmorph-audio-preview.nmorph-audio-preview--compact{min-height:52px;padding:var(--indentation-02)}.nmorph-audio-preview.nmorph-audio-preview--compact .nmorph-audio-preview__icon{width:30px;height:30px}.nmorph-audio-preview.nmorph-audio-preview--no-actions .nmorph-audio-preview__body{padding-inline-end:var(--indentation-02)}.nmorph-audio-preview.nmorph-audio-preview--embedded{width:var(--nmorph-private-audio-preview-width, 100%);min-height:auto;padding:0;background:transparent;border-radius:0;box-shadow:none}.nmorph-audio-preview.nmorph-audio-preview--embedded .nmorph-audio-preview__body{gap:0;padding-inline-end:0}.nmorph-audio-preview.nmorph-audio-preview--embedded .nmorph-audio-preview__range{height:5px}.nmorph-audio-preview.nmorph-audio-preview--embedded .nmorph-audio-preview__range::-webkit-slider-thumb{width:11px;height:11px;box-shadow:none}.nmorph-audio-preview.nmorph-audio-preview--embedded .nmorph-audio-preview__range::-moz-range-thumb{width:11px;height:11px;box-shadow:none}.nmorph-audio-preview.nmorph-audio-preview--embedded .nmorph-audio-preview__play-indicator{box-shadow:none}.nmorph-audio-preview.nmorph-audio-preview--no-header .nmorph-audio-preview__time{flex:0 0 auto}.nmorph-audio-preview.nmorph-audio-preview--soft{background:color-mix(in srgb,var(--nmorph-accent-color) 6%,transparent);box-shadow:none}.nmorph-audio-preview.nmorph-audio-preview--soft .nmorph-audio-preview__play-indicator{box-shadow:none}.nmorph-audio-preview.nmorph-audio-preview--plain{background:transparent;box-shadow:none}.nmorph-audio-preview.nmorph-audio-preview--plain .nmorph-audio-preview__play-indicator{box-shadow:none}.nmorph-audio-preview.nmorph-audio-preview--error{outline:1px solid var(--nmorph-error-color)}
+.nmorph-audio-preview{display:flex;gap:var(--indentation-02);align-items:center;box-sizing:border-box;width:var(--nmorph-private-audio-preview-width, 360px);min-width:0;max-width:100%;min-height:64px;padding:var(--indentation-03);color:var(--nmorph-text-color);background:var(--nmorph-main-color);border-radius:var(--default-border-radius);box-shadow:var(--nmorph-shadow-inset)}.nmorph-audio-preview audio{display:none}.nmorph-audio-preview .nmorph-audio-preview__icon{position:relative;display:flex;flex:0 0 auto;justify-content:center;align-items:center;width:36px;height:36px;padding:0;color:var(--nmorph-text-color);background:color-mix(in srgb,var(--nmorph-text-color) 10%,transparent);border:0;border-radius:var(--default-border-radius);cursor:default;--nmorph-private-icon-color: currentColor}.nmorph-audio-preview button.nmorph-audio-preview__icon{cursor:pointer}.nmorph-audio-preview button.nmorph-audio-preview__icon:disabled{cursor:default}.nmorph-audio-preview .nmorph-audio-preview__play-button{display:inline-flex;flex:0 0 auto;justify-content:center;align-items:center;width:20px;height:20px;padding:0;color:var(--nmorph-contrast-text-color);background:var(--nmorph-black-color);border:0;border-radius:var(--border-radius-circular);cursor:pointer}.nmorph-audio-preview .nmorph-audio-preview__play-button:hover{background:var(--nmorph-accent-color)}.nmorph-audio-preview .nmorph-audio-preview__play-button .nmorph-icon{--nmorph-private-icon-color: var(--nmorph-contrast-text-color)}.nmorph-audio-preview .nmorph-audio-preview__play-indicator{position:absolute;right:-4px;bottom:-4px;display:inline-flex;justify-content:center;align-items:center;width:18px;height:18px;color:var(--nmorph-contrast-text-color);background:var(--nmorph-black-color);border-radius:var(--border-radius-circular);box-shadow:var(--nmorph-shadow-outset)}.nmorph-audio-preview .nmorph-audio-preview__play-indicator .nmorph-icon{--nmorph-private-icon-color: var(--nmorph-contrast-text-color)}.nmorph-audio-preview .nmorph-audio-preview__body{display:flex;flex:1 1 0;flex-direction:column;gap:var(--indentation-02);box-sizing:border-box;min-width:0}.nmorph-audio-preview .nmorph-audio-preview__header{display:flex;gap:var(--indentation-02);justify-content:space-between;align-items:center;min-width:0}.nmorph-audio-preview .nmorph-audio-preview__control{display:flex;gap:var(--indentation-02);align-items:center;width:100%;min-width:0}.nmorph-audio-preview .nmorph-audio-preview__name,.nmorph-audio-preview .nmorph-audio-preview__time,.nmorph-audio-preview .nmorph-audio-preview__error{min-width:0;overflow:hidden;font-size:var(--nmorph-typography-body-small-font-size);line-height:var(--nmorph-typography-body-small-line-height);white-space:nowrap;text-overflow:ellipsis}.nmorph-audio-preview .nmorph-audio-preview__name{flex:1 1 auto;font-weight:var(--font-weight-semibold)}.nmorph-audio-preview .nmorph-audio-preview__time{flex:0 0 auto;color:var(--nmorph-semi-contrast-text-color);font-variant-numeric:tabular-nums}.nmorph-audio-preview .nmorph-audio-preview__error{flex:0 1 auto;color:var(--nmorph-error-text-color)}.nmorph-audio-preview .nmorph-audio-preview__range{flex:1 1 0;width:100%;min-width:0;height:6px;padding:0;background:linear-gradient(to right,var(--nmorph-accent-color) var(--nmorph-private-audio-preview-progress, 0%),color-mix(in srgb,var(--nmorph-text-color) 16%,transparent) 0);border-radius:var(--border-radius-100);outline:0;cursor:pointer;appearance:none}.nmorph-audio-preview .nmorph-audio-preview__range:disabled{cursor:default;opacity:.6}.nmorph-audio-preview .nmorph-audio-preview__range::-webkit-slider-thumb{width:14px;height:14px;background:var(--nmorph-accent-color);border:2px solid var(--nmorph-main-color);border-radius:var(--border-radius-circular);box-shadow:var(--nmorph-shadow-outset);appearance:none}.nmorph-audio-preview .nmorph-audio-preview__range::-moz-range-thumb{width:14px;height:14px;background:var(--nmorph-accent-color);border:2px solid var(--nmorph-main-color);border-radius:var(--border-radius-circular);box-shadow:var(--nmorph-shadow-outset)}.nmorph-audio-preview .nmorph-audio-preview__actions{display:flex;flex:0 0 auto;gap:var(--indentation-01);align-items:center}.nmorph-audio-preview .nmorph-audio-preview__action-link{display:inline-flex;justify-content:center;align-items:center;width:22px;height:22px;color:inherit;text-decoration:none;border-radius:var(--default-border-radius)}.nmorph-audio-preview .nmorph-audio-preview__action-link:hover{color:var(--nmorph-accent-color);background:color-mix(in srgb,var(--nmorph-accent-color) 10%,transparent)}.nmorph-audio-preview .nmorph-audio-preview__action-link .nmorph-icon{--nmorph-private-icon-color: currentColor}.nmorph-audio-preview.nmorph-audio-preview--compact{min-height:52px;padding:var(--indentation-02)}.nmorph-audio-preview.nmorph-audio-preview--compact .nmorph-audio-preview__icon{width:30px;height:30px}.nmorph-audio-preview.nmorph-audio-preview--no-actions .nmorph-audio-preview__body{padding-inline-end:var(--indentation-02)}.nmorph-audio-preview.nmorph-audio-preview--embedded{width:var(--nmorph-private-audio-preview-width, 100%);min-height:auto;padding:0;background:transparent;border-radius:0;box-shadow:none}.nmorph-audio-preview.nmorph-audio-preview--embedded .nmorph-audio-preview__body{gap:0;padding-inline-end:0}.nmorph-audio-preview.nmorph-audio-preview--embedded .nmorph-audio-preview__range{height:5px}.nmorph-audio-preview.nmorph-audio-preview--embedded .nmorph-audio-preview__range::-webkit-slider-thumb{width:11px;height:11px;box-shadow:none}.nmorph-audio-preview.nmorph-audio-preview--embedded .nmorph-audio-preview__range::-moz-range-thumb{width:11px;height:11px;box-shadow:none}.nmorph-audio-preview.nmorph-audio-preview--embedded .nmorph-audio-preview__play-indicator{box-shadow:none}.nmorph-audio-preview.nmorph-audio-preview--no-header .nmorph-audio-preview__time{flex:0 0 auto}.nmorph-audio-preview.nmorph-audio-preview--soft{background:color-mix(in srgb,var(--nmorph-accent-color) 6%,transparent);box-shadow:none}.nmorph-audio-preview.nmorph-audio-preview--soft .nmorph-audio-preview__play-indicator{box-shadow:none}.nmorph-audio-preview.nmorph-audio-preview--plain{background:transparent;box-shadow:none}.nmorph-audio-preview.nmorph-audio-preview--plain .nmorph-audio-preview__play-indicator{box-shadow:none}.nmorph-audio-preview.nmorph-audio-preview--error{outline:1px solid var(--nmorph-error-color)}

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

@@ -1,8 +1,8 @@
 import './NmorphAudioPreview.css';
 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";
+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 k } from "vue";
 /* empty css                        */
-import k from "../../../_virtual/_plugin-vue_export-helper.js";
+import f from "../../../_virtual/_plugin-vue_export-helper.js";
 const w = ["src", "preload"], b = ["disabled", "aria-label"], N = {
   key: 2,
   class: "nmorph-audio-preview__play-indicator"
@@ -15,17 +15,17 @@ const w = ["src", "preload"], b = ["disabled", "aria-label"], N = {
 }, H = { class: "nmorph-audio-preview__name" }, z = {
   key: 0,
   class: "nmorph-audio-preview__error"
-}, O = {
+}, L = {
   key: 1,
   class: "nmorph-audio-preview__time"
-}, T = { class: "nmorph-audio-preview__control" }, A = ["disabled", "aria-label"], L = {
+}, T = { class: "nmorph-audio-preview__control" }, A = ["disabled", "aria-label"], O = {
   key: 0,
   class: "nmorph-audio-preview__time"
 }, x = {
   key: 3,
   class: "nmorph-audio-preview__actions"
 }, S = ["href", "aria-label"], B = ["href", "download", "aria-label"];
-function D(p, c, R, o, E, V) {
+function D(p, c, E, o, R, V) {
   return r(), a(
     "div",
     {
@@ -138,7 +138,7 @@ function D(p, c, R, o, E, V) {
             /* TEXT */
           )) : (r(), a(
             "span",
-            O,
+            L,
             s(o.currentTimeLabel) + " / " + s(o.durationLabel),
             1
             /* TEXT */
@@ -165,7 +165,7 @@ function D(p, c, R, o, E, V) {
           ]),
           o.props.showHeader ? d("v-if", !0) : (r(), a(
             "span",
-            L,
+            O,
             s(o.currentTimeLabel) + " / " + s(o.durationLabel),
             1
             /* TEXT */
@@ -173,7 +173,7 @@ function D(p, c, R, o, E, V) {
         ])
       ]),
       o.hasActions ? (r(), a("div", x, [
-        f(p.$slots, "actions", {}, () => [
+        k(p.$slots, "actions", {}, () => [
           l("a", {
             href: o.props.src,
             target: "_blank",
@@ -184,7 +184,7 @@ function D(p, c, R, o, E, V) {
           }, [
             e(o.NmorphIcon, { size: "small" }, {
               default: i(() => [
-                e(o.NmorphIconOpen)
+                e(o.NmorphIconExternalLink)
               ]),
               _: 1
               /* STABLE */
@@ -213,7 +213,7 @@ function D(p, c, R, o, E, V) {
     /* CLASS, STYLE */
   );
 }
-const q = /* @__PURE__ */ k(h, [["render", D], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-audio-preview/NmorphAudioPreview.vue"]]);
+const q = /* @__PURE__ */ f(h, [["render", D], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-audio-preview/NmorphAudioPreview.vue"]]);
 export {
   q as default
 };

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;
   }