@nmorph/nmorph-ui-kit 2.2.42 → 2.2.44

package/dist/components/data/nmorph-image-preview/NmorphImagePreview.vue.js

@@ -1,35 +1,35 @@
 import './NmorphImagePreview.css';
-import { defineComponent as de, ref as k, watch as H, computed as a, openBlock as n, createElementBlock as m, Fragment as L, normalizeStyle as N, normalizeClass as R, createElementVNode as h, renderList as G, withModifiers as ve, createVNode as i, unref as o, createSlots as b, withCtx as l, renderSlot as g, toDisplayString as me, createCommentVNode as p, createBlock as $, Teleport as ce, resolveDynamicComponent as P } from "vue";
-import { useModifiers as ge } from "../../../utils/create-modifiers.js";
-import { createCssSizeVariables as Z } from "../../../utils/common.js";
-import pe from "../../../assets/icons/shrink.svg.js";
-import B from "../nmorph-image/NmorphImage.vue.js";
+import { defineComponent as ce, ref as k, watch as S, computed as o, onBeforeUnmount as ge, openBlock as n, createElementBlock as c, Fragment as N, normalizeStyle as b, normalizeClass as Z, createElementVNode as h, renderList as U, withModifiers as fe, createVNode as i, unref as a, createSlots as B, withCtx as r, renderSlot as g, toDisplayString as pe, createCommentVNode as f, createBlock as $, Teleport as he, resolveDynamicComponent as j } from "vue";
+import { useModifiers as ye } from "../../../utils/create-modifiers.js";
+import { createCssSizeVariables as q } from "../../../utils/common.js";
+import _e from "../../../assets/icons/shrink.svg.js";
+import x from "../nmorph-image/NmorphImage.vue.js";
 /* empty css                               */
-import fe from "../../others/nmorph-overlay/NmorphOverlay.vue.js";
+import we from "../../others/nmorph-overlay/NmorphOverlay.vue.js";
 /* empty css                                             */
 import I from "../../basic/nmorph-button/NmorphButton.vue.js";
 /* empty css                                          */
-import C from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+import L from "../../basic/nmorph-icon/NmorphIcon.vue.js";
 /* empty css                                      */
-import K from "../../../assets/icons/chevron-down.svg.js";
-import he from "../../../assets/icons/rotate-right.svg.js";
-import _e from "../../../assets/icons/rotate-left.svg.js";
-import ye from "../../../assets/icons/zoom-in.svg.js";
-import we from "../../../assets/icons/zoom-out.svg.js";
-import ke from "../../../assets/icons/enlarge.svg.js";
-const $e = ["aria-label", "onClick"], Ie = {
+import J from "../../../assets/icons/chevron-down.svg.js";
+import ke from "../../../assets/icons/rotate-right.svg.js";
+import $e from "../../../assets/icons/rotate-left.svg.js";
+import Ie from "../../../assets/icons/zoom-in.svg.js";
+import Le from "../../../assets/icons/zoom-out.svg.js";
+import Ce from "../../../assets/icons/enlarge.svg.js";
+const Se = ["aria-label", "onClick"], Ne = {
   key: 0,
   class: "nmorph-image-preview__trigger-more"
-}, Ce = { class: "nmorph-image-preview__content" }, Se = {
+}, be = { class: "nmorph-image-preview__content" }, Be = {
   key: 0,
   class: "nmorph-image-preview__left"
-}, Le = {
+}, xe = {
   key: 1,
   class: "nmorph-image-preview__right"
-}, Ne = {
+}, Te = {
   key: 2,
   class: "nmorph-image-preview__actions"
-}, be = { class: "nmorph-image-preview__action-element" }, qe = /* @__PURE__ */ de({
+}, Ve = { class: "nmorph-image-preview__action-element" }, We = /* @__PURE__ */ ce({
   __name: "NmorphImagePreview",
   props: {
     modelValue: { type: Boolean, default: !1 },
@@ -53,238 +53,252 @@ const $e = ["aria-label", "onClick"], Ie = {
     triggerGap: { default: 8 }
   },
   emits: ["update:model-value"],
-  setup(j, { emit: q }) {
-    const t = j, c = k(t.modelValue);
-    H(
+  setup(Q, { emit: W }) {
+    const t = Q, d = k(t.modelValue);
+    S(
       () => t.modelValue,
-      (e) => c.value = e
+      (e) => d.value = e
     );
-    const u = a(() => Array.isArray(t.src) ? t.src : [t.src]), _ = (e) => {
-      const s = u.value.length - 1;
-      return s < 0 || e < 0 ? 0 : e > s ? s : e;
-    }, f = k(_(t.initialIndex)), y = a(() => _(f.value)), x = a(() => u.value[y.value] || ""), S = a(() => t.triggerView === "gallery" && u.value.length > 1), J = a(() => !t.triggerLimit || t.triggerLimit < 1 ? u.value.length : Math.min(Math.floor(t.triggerLimit), u.value.length)), w = a(
-      () => u.value.slice(0, J.value).map((e, s) => ({
-        index: s,
+    const s = o(() => Array.isArray(t.src) ? t.src : [t.src]), y = (e) => {
+      const u = s.value.length - 1;
+      return u < 0 || e < 0 ? 0 : e > u ? u : e;
+    }, p = k(y(t.initialIndex)), _ = o(() => y(p.value)), T = o(() => s.value[_.value] || ""), C = o(() => t.triggerView === "gallery" && s.value.length > 1), X = o(() => !t.triggerLimit || t.triggerLimit < 1 ? s.value.length : Math.min(Math.floor(t.triggerLimit), s.value.length)), w = o(
+      () => s.value.slice(0, X.value).map((e, u) => ({
+        index: u,
         src: e
       }))
-    ), T = a(() => u.value.length - w.value.length), Q = a(() => w.value[w.value.length - 1]?.index ?? -1), V = a(
-      () => ge({
-        "nmorph-image-preview": [c.value && "opened", S.value && "gallery-trigger"]
+    ), V = o(() => s.value.length - w.value.length), Y = o(() => w.value[w.value.length - 1]?.index ?? -1), z = o(
+      () => ye({
+        "nmorph-image-preview": [d.value && "opened", C.value && "gallery-trigger"]
       })
-    ), r = k(1);
-    H(
-      () => [t.initialIndex, u.value.length],
+    ), l = k(1);
+    S(
+      () => [t.initialIndex, s.value.length],
       () => {
-        f.value = _(t.initialIndex);
+        p.value = y(t.initialIndex);
       }
     );
-    const z = (e) => {
-      f.value = _(e), c.value = !0, F("update:model-value", c.value);
-    }, U = () => {
-      S.value || z(y.value);
-    }, M = () => {
-      c.value = !1, F("update:model-value", c.value);
-    }, W = () => {
+    const A = (e) => {
+      p.value = y(e), d.value = !0, O("update:model-value", d.value);
+    }, ee = () => {
+      C.value || A(_.value);
+    }, K = () => {
+      d.value = !1, O("update:model-value", d.value);
+    }, te = () => {
       v.value = v.value + 90, v.value >= 360 && (v.value = 0);
-    }, X = () => {
+    }, oe = () => {
       v.value = v.value - 90, v.value <= -360 && (v.value = 0);
-    }, Y = () => {
-      r.value < t.maxScaleLevel && (r.value += t.scaleStep), r.value = parseFloat(r.value.toFixed(3));
-    }, ee = () => {
-      r.value > t.minScaleLevel && (r.value -= t.scaleStep), r.value = parseFloat(r.value.toFixed(3));
-    }, te = a(() => r.value < 1), ae = () => {
-      r.value = 1;
-    }, le = () => {
-      r.value = 1;
-    }, v = k(0), oe = () => {
-      const e = u.value.length;
-      if (!e) return;
-      const s = y.value - 1;
-      f.value = s < 0 ? e - 1 : s;
     }, re = () => {
-      const e = u.value.length;
+      l.value < t.maxScaleLevel && (l.value += t.scaleStep), l.value = parseFloat(l.value.toFixed(3));
+    }, ae = () => {
+      l.value > t.minScaleLevel && (l.value -= t.scaleStep), l.value = parseFloat(l.value.toFixed(3));
+    }, le = o(() => l.value < 1), ne = () => {
+      l.value = 1;
+    }, ie = () => {
+      l.value = 1;
+    }, v = k(0), M = () => {
+      const e = s.value.length;
       if (!e) return;
-      const s = y.value + 1;
-      f.value = s > e - 1 ? 0 : s;
-    }, A = a(() => {
+      const u = _.value - 1;
+      p.value = u < 0 ? e - 1 : u;
+    }, D = () => {
+      const e = s.value.length;
+      if (!e) return;
+      const u = _.value + 1;
+      p.value = u > e - 1 ? 0 : u;
+    }, E = (e) => {
+      !d.value || s.value.length < 2 || e.altKey || e.ctrlKey || e.metaKey || e.shiftKey || (e.key === "ArrowLeft" && (e.preventDefault(), M()), e.key === "ArrowRight" && (e.preventDefault(), D()));
+    }, se = () => {
+      typeof document > "u" || document.addEventListener("keydown", E);
+    }, F = () => {
+      typeof document > "u" || document.removeEventListener("keydown", E);
+    };
+    S(
+      d,
+      (e) => {
+        e ? se() : F();
+      },
+      { immediate: !0 }
+    ), ge(F);
+    const H = o(() => {
       let e = {
-        icon: pe,
-        handler: le
+        icon: _e,
+        handler: ie
       };
-      return te.value && (e = {
-        icon: ke,
-        handler: ae
+      return le.value && (e = {
+        icon: Ce,
+        handler: ne
       }), e;
-    }), ne = [
+    }), ue = [
       {
-        icon: he,
-        handler: W
+        icon: ke,
+        handler: te
       },
       {
-        icon: _e,
-        handler: X
+        icon: $e,
+        handler: oe
       },
       {
-        icon: ye,
-        handler: Y
+        icon: Ie,
+        handler: re
       },
       {
-        icon: we,
-        handler: ee
+        icon: Le,
+        handler: ae
       }
-    ], F = q, ie = a(() => u.value.length > 1), O = a(() => t.showNavigationButtons && ie.value), se = a(
-      () => Z({
+    ], O = W, de = o(() => s.value.length > 1), R = o(() => t.showNavigationButtons && de.value), me = o(
+      () => q({
         "--width": t.width,
         "--height": t.height,
         "--nmorph-image-preview-radius": t.radius,
         "--nmorph-image-preview-trigger-gap": t.triggerGap
       })
-    ), ue = a(
-      () => Z({
+    ), ve = o(
+      () => q({
         "--nmorph-image-preview-btn-margin": t.navigationButtonMargin
       })
-    ), D = (e) => t.alt ? `${t.alt} ${e + 1}` : `Image ${e + 1}`;
-    return (e, s) => (n(), m(L, null, [
-      t.showTrigger ? (n(), m("div", {
+    ), G = (e) => t.alt ? `${t.alt} ${e + 1}` : `Image ${e + 1}`;
+    return (e, u) => (n(), c(N, null, [
+      t.showTrigger ? (n(), c("div", {
         key: 0,
-        class: R(V.value),
-        style: N(se.value)
+        class: Z(z.value),
+        style: b(me.value)
       }, [
         h("div", {
           class: "nmorph-image-preview__trigger",
-          onClick: U
+          onClick: ee
         }, [
-          S.value ? (n(!0), m(L, { key: 0 }, G(w.value, (d) => (n(), m("button", {
-            key: `${d.src}-${d.index}`,
+          C.value ? (n(!0), c(N, { key: 0 }, U(w.value, (m) => (n(), c("button", {
+            key: `${m.src}-${m.index}`,
             type: "button",
             class: "nmorph-image-preview__trigger-item",
-            "aria-label": D(d.index),
-            onClick: ve((E) => z(d.index), ["stop"])
+            "aria-label": G(m.index),
+            onClick: fe((P) => A(m.index), ["stop"])
           }, [
-            i(o(B), {
-              src: d.src,
-              alt: D(d.index),
+            i(a(x), {
+              src: m.src,
+              alt: G(m.index),
               fit: t.fit,
               "frame-border": 0
-            }, b({ _: 2 }, [
+            }, B({ _: 2 }, [
               e.$slots.loading ? {
                 name: "loading",
-                fn: l(() => [
+                fn: r(() => [
                   g(e.$slots, "loading")
                 ]),
                 key: "0"
               } : void 0,
               e.$slots.error ? {
                 name: "error",
-                fn: l(() => [
+                fn: r(() => [
                   g(e.$slots, "error")
                 ]),
                 key: "1"
               } : void 0
             ]), 1032, ["src", "alt", "fit"]),
-            d.index === Q.value && T.value > 0 ? (n(), m("span", Ie, " +" + me(T.value), 1)) : p("", !0)
-          ], 8, $e))), 128)) : (n(), $(o(B), {
+            m.index === Y.value && V.value > 0 ? (n(), c("span", Ne, " +" + pe(V.value), 1)) : f("", !0)
+          ], 8, Se))), 128)) : (n(), $(a(x), {
             key: 1,
-            src: x.value,
+            src: T.value,
             alt: t.alt,
             fit: t.fit,
             "frame-border": 0
-          }, b({ _: 2 }, [
+          }, B({ _: 2 }, [
             e.$slots.loading ? {
               name: "loading",
-              fn: l(() => [
+              fn: r(() => [
                 g(e.$slots, "loading")
               ]),
               key: "0"
             } : void 0,
             e.$slots.error ? {
               name: "error",
-              fn: l(() => [
+              fn: r(() => [
                 g(e.$slots, "error")
               ]),
               key: "1"
             } : void 0
           ]), 1032, ["src", "alt", "fit"]))
         ])
-      ], 6)) : p("", !0),
-      c.value ? (n(), $(ce, {
+      ], 6)) : f("", !0),
+      d.value ? (n(), $(he, {
         key: 1,
         to: "body"
       }, [
         h("div", {
-          class: R(["nmorph-image-preview__portal", V.value]),
-          style: N(ue.value)
+          class: Z(["nmorph-image-preview__portal", z.value]),
+          style: b(ve.value)
         }, [
-          i(o(fe), {
-            show: c.value,
+          i(a(we), {
+            show: d.value,
             "z-index": t.zIndex,
             "disabled-teleport": "",
-            onOnOutsideClick: M,
-            onOnEscapeKeydown: M
+            onOnOutsideClick: K,
+            onOnEscapeKeydown: K
           }, {
-            default: l(() => [
-              h("div", Ce, [
-                i(o(B), {
-                  src: x.value,
+            default: r(() => [
+              h("div", be, [
+                i(a(x), {
+                  src: T.value,
                   alt: t.alt,
                   fit: "contain",
                   "frame-border": 0,
-                  style: N({ transform: `rotate(${v.value}deg) scale(${r.value})` })
-                }, b({ _: 2 }, [
+                  style: b({ transform: `rotate(${v.value}deg) scale(${l.value})` })
+                }, B({ _: 2 }, [
                   e.$slots.loading ? {
                     name: "loading",
-                    fn: l(() => [
+                    fn: r(() => [
                       g(e.$slots, "loading")
                     ]),
                     key: "0"
                   } : void 0,
                   e.$slots.error ? {
                     name: "error",
-                    fn: l(() => [
+                    fn: r(() => [
                       g(e.$slots, "error")
                     ]),
                     key: "1"
                   } : void 0
                 ]), 1032, ["src", "alt", "style"])
               ]),
-              O.value ? (n(), m("div", Se, [
-                i(o(I), { onClick: oe }, {
-                  default: l(() => [
-                    i(o(C), null, {
-                      default: l(() => [
-                        i(o(K))
+              R.value ? (n(), c("div", Be, [
+                i(a(I), { onClick: M }, {
+                  default: r(() => [
+                    i(a(L), null, {
+                      default: r(() => [
+                        i(a(J))
                       ]),
                       _: 1
                     })
                   ]),
                   _: 1
                 })
-              ])) : p("", !0),
-              O.value ? (n(), m("div", Le, [
-                i(o(I), { onClick: re }, {
-                  default: l(() => [
-                    i(o(C), null, {
-                      default: l(() => [
-                        i(o(K))
+              ])) : f("", !0),
+              R.value ? (n(), c("div", xe, [
+                i(a(I), { onClick: D }, {
+                  default: r(() => [
+                    i(a(L), null, {
+                      default: r(() => [
+                        i(a(J))
                       ]),
                       _: 1
                     })
                   ]),
                   _: 1
                 })
-              ])) : p("", !0),
-              t.showActionBar ? (n(), m("div", Ne, [
-                (n(), m(L, null, G(ne, (d, E) => h("div", {
-                  key: E,
+              ])) : f("", !0),
+              t.showActionBar ? (n(), c("div", Te, [
+                (n(), c(N, null, U(ue, (m, P) => h("div", {
+                  key: P,
                   class: "nmorph-image-preview__action-element"
                 }, [
-                  i(o(I), {
-                    onClick: d.handler
+                  i(a(I), {
+                    onClick: m.handler
                   }, {
-                    default: l(() => [
-                      i(o(C), null, {
-                        default: l(() => [
-                          (n(), $(P(d.icon)))
+                    default: r(() => [
+                      i(a(L), null, {
+                        default: r(() => [
+                          (n(), $(j(m.icon)))
                         ]),
                         _: 2
                       }, 1024)
@@ -292,15 +306,15 @@ const $e = ["aria-label", "onClick"], Ie = {
                     _: 2
                   }, 1032, ["onClick"])
                 ])), 64)),
-                h("div", be, [
-                  i(o(I), {
-                    disabled: r.value === 1,
-                    onClick: A.value.handler
+                h("div", Ve, [
+                  i(a(I), {
+                    disabled: l.value === 1,
+                    onClick: H.value.handler
                   }, {
-                    default: l(() => [
-                      i(o(C), null, {
-                        default: l(() => [
-                          (n(), $(P(A.value.icon)))
+                    default: r(() => [
+                      i(a(L), null, {
+                        default: r(() => [
+                          (n(), $(j(H.value.icon)))
                         ]),
                         _: 1
                       })
@@ -308,15 +322,15 @@ const $e = ["aria-label", "onClick"], Ie = {
                     _: 1
                   }, 8, ["disabled", "onClick"])
                 ])
-              ])) : p("", !0)
+              ])) : f("", !0)
             ]),
             _: 3
           }, 8, ["show", "z-index"])
         ], 6)
-      ])) : p("", !0)
+      ])) : f("", !0)
     ], 64));
   }
 });
 export {
-  qe as default
+  We as default
 };

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

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

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

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