@nmorph/nmorph-ui-kit 2.2.41 → 2.2.43

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

@@ -1,255 +1,336 @@
 import './NmorphImagePreview.css';
-import y from "./NmorphImagePreview.vue2.js";
-import { openBlock as o, createElementBlock as a, Fragment as c, normalizeStyle as g, normalizeClass as _, createElementVNode as m, renderList as f, withModifiers as p, createVNode as i, createSlots as h, withCtx as r, renderSlot as t, toDisplayString as w, createCommentVNode as d, createBlock as s, Teleport as N, resolveDynamicComponent as k } from "vue";
-/* empty css                        */
-import C from "../../../_virtual/_plugin-vue_export-helper.js";
-const b = ["aria-label", "onClick"], I = {
+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 we from "../../others/nmorph-overlay/NmorphOverlay.vue.js";
+/* empty css                                             */
+import I from "../../basic/nmorph-button/NmorphButton.vue.js";
+/* empty css                                          */
+import L from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+/* empty css                                      */
+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"
-}, S = { class: "nmorph-image-preview__content" }, B = {
+}, be = { class: "nmorph-image-preview__content" }, Be = {
   key: 0,
   class: "nmorph-image-preview__left"
-}, T = {
+}, xe = {
   key: 1,
   class: "nmorph-image-preview__right"
-}, D = {
+}, Te = {
   key: 2,
   class: "nmorph-image-preview__actions"
-}, L = { class: "nmorph-image-preview__action-element" };
-function z(n, H, A, e, O, V) {
-  return o(), a(
-    c,
-    null,
-    [
-      e.props.showTrigger ? (o(), a(
-        "div",
-        {
-          key: 0,
-          class: _(e.modifiers),
-          style: g(e.triggerStyle)
-        },
-        [
-          m("div", {
-            class: "nmorph-image-preview__trigger",
-            onClick: e.clickHandler
+}, Ve = { class: "nmorph-image-preview__action-element" }, We = /* @__PURE__ */ ce({
+  __name: "NmorphImagePreview",
+  props: {
+    modelValue: { type: Boolean, default: !1 },
+    alt: { default: "" },
+    initialIndex: { default: 0 },
+    src: {},
+    scaleStep: { default: 0.2 },
+    minScaleLevel: { default: 0.2 },
+    maxScaleLevel: { default: 4 },
+    zIndex: { default: void 0 },
+    showTrigger: { type: Boolean, default: !0 },
+    showNavigationButtons: { type: Boolean, default: !0 },
+    showActionBar: { type: Boolean, default: !0 },
+    width: { default: void 0 },
+    height: { default: void 0 },
+    radius: { default: void 0 },
+    fit: { default: "cover" },
+    navigationButtonMargin: { default: void 0 },
+    triggerView: { default: "single" },
+    triggerLimit: { default: void 0 },
+    triggerGap: { default: 8 }
+  },
+  emits: ["update:model-value"],
+  setup(Q, { emit: W }) {
+    const t = Q, d = k(t.modelValue);
+    S(
+      () => t.modelValue,
+      (e) => d.value = e
+    );
+    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
+      }))
+    ), 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"]
+      })
+    ), l = k(1);
+    S(
+      () => [t.initialIndex, s.value.length],
+      () => {
+        p.value = y(t.initialIndex);
+      }
+    );
+    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);
+    }, oe = () => {
+      v.value = v.value - 90, v.value <= -360 && (v.value = 0);
+    }, re = () => {
+      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 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: _e,
+        handler: ie
+      };
+      return le.value && (e = {
+        icon: Ce,
+        handler: ne
+      }), e;
+    }), ue = [
+      {
+        icon: ke,
+        handler: te
+      },
+      {
+        icon: $e,
+        handler: oe
+      },
+      {
+        icon: Ie,
+        handler: re
+      },
+      {
+        icon: Le,
+        handler: ae
+      }
+    ], 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
+      })
+    ), ve = o(
+      () => q({
+        "--nmorph-image-preview-btn-margin": t.navigationButtonMargin
+      })
+    ), 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: Z(z.value),
+        style: b(me.value)
+      }, [
+        h("div", {
+          class: "nmorph-image-preview__trigger",
+          onClick: ee
+        }, [
+          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": G(m.index),
+            onClick: fe((P) => A(m.index), ["stop"])
           }, [
-            e.showGalleryTrigger ? (o(!0), a(
-              c,
-              { key: 0 },
-              f(e.triggerSources, (l) => (o(), a("button", {
-                key: `${l.src}-${l.index}`,
-                type: "button",
-                class: "nmorph-image-preview__trigger-item",
-                "aria-label": e.getTriggerLabel(l.index),
-                onClick: p((v) => e.openPreviewAt(l.index), ["stop"])
-              }, [
-                i(e.NmorphImage, {
-                  src: l.src,
-                  alt: e.getTriggerLabel(l.index),
-                  fit: "cover",
-                  "frame-border": 0
-                }, h({
-                  _: 2
-                  /* DYNAMIC */
-                }, [
-                  n.$slots.loading ? {
-                    name: "loading",
-                    fn: r(() => [
-                      t(n.$slots, "loading")
-                    ]),
-                    key: "0"
-                  } : void 0,
-                  n.$slots.error ? {
-                    name: "error",
-                    fn: r(() => [
-                      t(n.$slots, "error")
-                    ]),
-                    key: "1"
-                  } : void 0
-                ]), 1032, ["src", "alt"]),
-                l.index === e.lastVisibleTriggerIndex && e.hiddenTriggerCount > 0 ? (o(), a(
-                  "span",
-                  I,
-                  " +" + w(e.hiddenTriggerCount),
-                  1
-                  /* TEXT */
-                )) : d("v-if", !0)
-              ], 8, b))),
-              128
-              /* KEYED_FRAGMENT */
-            )) : (o(), s(e.NmorphImage, {
-              key: 1,
-              src: e.triggerSource,
-              alt: e.props.alt,
-              fit: "cover",
+            i(a(x), {
+              src: m.src,
+              alt: G(m.index),
+              fit: t.fit,
               "frame-border": 0
-            }, h({
-              _: 2
-              /* DYNAMIC */
-            }, [
-              n.$slots.loading ? {
+            }, B({ _: 2 }, [
+              e.$slots.loading ? {
                 name: "loading",
                 fn: r(() => [
-                  t(n.$slots, "loading")
+                  g(e.$slots, "loading")
                 ]),
                 key: "0"
               } : void 0,
-              n.$slots.error ? {
+              e.$slots.error ? {
                 name: "error",
                 fn: r(() => [
-                  t(n.$slots, "error")
+                  g(e.$slots, "error")
                 ]),
                 key: "1"
               } : void 0
-            ]), 1032, ["src", "alt"]))
-          ])
-        ],
-        6
-        /* CLASS, STYLE */
-      )) : d("v-if", !0),
-      e.open ? (o(), s(N, {
+            ]), 1032, ["src", "alt", "fit"]),
+            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: T.value,
+            alt: t.alt,
+            fit: t.fit,
+            "frame-border": 0
+          }, B({ _: 2 }, [
+            e.$slots.loading ? {
+              name: "loading",
+              fn: r(() => [
+                g(e.$slots, "loading")
+              ]),
+              key: "0"
+            } : void 0,
+            e.$slots.error ? {
+              name: "error",
+              fn: r(() => [
+                g(e.$slots, "error")
+              ]),
+              key: "1"
+            } : void 0
+          ]), 1032, ["src", "alt", "fit"]))
+        ])
+      ], 6)) : f("", !0),
+      d.value ? (n(), $(he, {
         key: 1,
         to: "body"
       }, [
-        m(
-          "div",
-          {
-            class: _(["nmorph-image-preview__portal", e.modifiers]),
-            style: g(e.portalStyle)
-          },
-          [
-            i(e.NmorphOverlay, {
-              show: e.open,
-              "z-index": e.props.zIndex,
-              "disabled-teleport": "",
-              onOnOutsideClick: e.closeHandler,
-              onOnEscapeKeydown: e.closeHandler
-            }, {
-              default: r(() => [
-                m("div", S, [
-                  i(e.NmorphImage, {
-                    src: e.triggerSource,
-                    alt: e.props.alt,
-                    fit: "contain",
-                    "frame-border": 0,
-                    style: g({ transform: `rotate(${e.rotateLevel}deg) scale(${e.scaleLevel})` })
-                  }, h({
-                    _: 2
-                    /* DYNAMIC */
-                  }, [
-                    n.$slots.loading ? {
-                      name: "loading",
-                      fn: r(() => [
-                        t(n.$slots, "loading")
+        h("div", {
+          class: Z(["nmorph-image-preview__portal", z.value]),
+          style: b(ve.value)
+        }, [
+          i(a(we), {
+            show: d.value,
+            "z-index": t.zIndex,
+            "disabled-teleport": "",
+            onOnOutsideClick: K,
+            onOnEscapeKeydown: K
+          }, {
+            default: r(() => [
+              h("div", be, [
+                i(a(x), {
+                  src: T.value,
+                  alt: t.alt,
+                  fit: "contain",
+                  "frame-border": 0,
+                  style: b({ transform: `rotate(${v.value}deg) scale(${l.value})` })
+                }, B({ _: 2 }, [
+                  e.$slots.loading ? {
+                    name: "loading",
+                    fn: r(() => [
+                      g(e.$slots, "loading")
+                    ]),
+                    key: "0"
+                  } : void 0,
+                  e.$slots.error ? {
+                    name: "error",
+                    fn: r(() => [
+                      g(e.$slots, "error")
+                    ]),
+                    key: "1"
+                  } : void 0
+                ]), 1032, ["src", "alt", "style"])
+              ]),
+              R.value ? (n(), c("div", Be, [
+                i(a(I), { onClick: M }, {
+                  default: r(() => [
+                    i(a(L), null, {
+                      default: r(() => [
+                        i(a(J))
                       ]),
-                      key: "0"
-                    } : void 0,
-                    n.$slots.error ? {
-                      name: "error",
-                      fn: r(() => [
-                        t(n.$slots, "error")
+                      _: 1
+                    })
+                  ]),
+                  _: 1
+                })
+              ])) : f("", !0),
+              R.value ? (n(), c("div", xe, [
+                i(a(I), { onClick: D }, {
+                  default: r(() => [
+                    i(a(L), null, {
+                      default: r(() => [
+                        i(a(J))
                       ]),
-                      key: "1"
-                    } : void 0
-                  ]), 1032, ["src", "alt", "style"])
-                ]),
-                e.showNavigation ? (o(), a("div", B, [
-                  i(e.NmorphButton, { onClick: e.previousHandler }, {
+                      _: 1
+                    })
+                  ]),
+                  _: 1
+                })
+              ])) : 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(a(I), {
+                    onClick: m.handler
+                  }, {
                     default: r(() => [
-                      i(e.NmorphIcon, null, {
+                      i(a(L), null, {
                         default: r(() => [
-                          i(e.NmorphIconChevronDown)
+                          (n(), $(j(m.icon)))
                         ]),
-                        _: 1
-                        /* STABLE */
-                      })
+                        _: 2
+                      }, 1024)
                     ]),
-                    _: 1
-                    /* STABLE */
-                  })
-                ])) : d("v-if", !0),
-                e.showNavigation ? (o(), a("div", T, [
-                  i(e.NmorphButton, { onClick: e.nextHandler }, {
+                    _: 2
+                  }, 1032, ["onClick"])
+                ])), 64)),
+                h("div", Ve, [
+                  i(a(I), {
+                    disabled: l.value === 1,
+                    onClick: H.value.handler
+                  }, {
                     default: r(() => [
-                      i(e.NmorphIcon, null, {
+                      i(a(L), null, {
                         default: r(() => [
-                          i(e.NmorphIconChevronDown)
+                          (n(), $(j(H.value.icon)))
                         ]),
                         _: 1
-                        /* STABLE */
                       })
                     ]),
                     _: 1
-                    /* STABLE */
-                  })
-                ])) : d("v-if", !0),
-                e.props.showActionBar ? (o(), a("div", D, [
-                  (o(), a(
-                    c,
-                    null,
-                    f(e.actions, (l, v) => m("div", {
-                      key: v,
-                      class: "nmorph-image-preview__action-element"
-                    }, [
-                      i(e.NmorphButton, {
-                        onClick: l.handler
-                      }, {
-                        default: r(() => [
-                          i(
-                            e.NmorphIcon,
-                            null,
-                            {
-                              default: r(() => [
-                                (o(), s(k(l.icon)))
-                              ]),
-                              _: 2
-                              /* DYNAMIC */
-                            },
-                            1024
-                            /* DYNAMIC_SLOTS */
-                          )
-                        ]),
-                        _: 2
-                        /* DYNAMIC */
-                      }, 1032, ["onClick"])
-                    ])),
-                    64
-                    /* STABLE_FRAGMENT */
-                  )),
-                  m("div", L, [
-                    i(e.NmorphButton, {
-                      disabled: e.scaleLevel === 1,
-                      onClick: e.enlargeShrinkActionData.handler
-                    }, {
-                      default: r(() => [
-                        i(e.NmorphIcon, null, {
-                          default: r(() => [
-                            (o(), s(k(e.enlargeShrinkActionData.icon)))
-                          ]),
-                          _: 1
-                          /* STABLE */
-                        })
-                      ]),
-                      _: 1
-                      /* STABLE */
-                    }, 8, ["disabled", "onClick"])
-                  ])
-                ])) : d("v-if", !0)
-              ]),
-              _: 3
-              /* FORWARDED */
-            }, 8, ["show", "z-index"])
-          ],
-          6
-          /* CLASS, STYLE */
-        )
-      ])) : d("v-if", !0)
-    ],
-    64
-    /* STABLE_FRAGMENT */
-  );
-}
-const F = /* @__PURE__ */ C(y, [["render", z], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-image-preview/NmorphImagePreview.vue"]]);
+                  }, 8, ["disabled", "onClick"])
+                ])
+              ])) : f("", !0)
+            ]),
+            _: 3
+          }, 8, ["show", "z-index"])
+        ], 6)
+      ])) : f("", !0)
+    ], 64));
+  }
+});
 export {
-  F as default
+  We as default
 };

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

@@ -0,0 +1,6 @@
+import './NmorphImagePreview.css';
+import o from "./NmorphImagePreview.vue.js";
+/* empty css                        */
+export {
+  o as default
+};

package/dist/components/data/nmorph-media-tile/NmorphMediaTile.css

@@ -0,0 +1 @@
+.nmorph-media-tile{position:relative;display:flex;justify-content:center;align-items:center;aspect-ratio:16/9;min-width:0;overflow:hidden;background:var(--nmorph-main-color);border-radius:var(--default-border-radius);box-shadow:var(--nmorph-shadow-inset)}.nmorph-media-tile .nmorph-media-tile__video{width:100%;height:100%;object-fit:cover}.nmorph-media-tile.nmorph-media-tile--contain .nmorph-media-tile__video{object-fit:contain}.nmorph-media-tile.nmorph-media-tile--mirrored .nmorph-media-tile__video{transform:scaleX(-1)}.nmorph-media-tile .nmorph-media-tile__fallback{display:flex;flex-direction:column;gap:var(--indentation-02);justify-content:center;align-items:center;width:100%;height:100%;padding:var(--indentation-04);color:var(--nmorph-text-color);text-align:center}.nmorph-media-tile .nmorph-media-tile__initials{display:flex;justify-content:center;align-items:center;width:72px;height:72px;color:var(--nmorph-focus-text-color);font-weight:700;font-size:var(--font-size-extra-large);background:var(--nmorph-accent-color);border-radius:var(--border-radius-circular)}.nmorph-media-tile .nmorph-media-tile__name,.nmorph-media-tile .nmorph-media-tile__error-text{max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.nmorph-media-tile .nmorph-media-tile__error-text{color:var(--nmorph-error-text-color);font-size:var(--font-size-extra-small)}.nmorph-media-tile .nmorph-media-tile__status{position:absolute;right:var(--indentation-03);bottom:var(--indentation-03);display:flex;gap:var(--indentation-02)}.nmorph-media-tile .nmorph-media-tile__status-item{display:inline-flex;justify-content:center;align-items:center;width:24px;height:24px;color:var(--nmorph-text-color);background:color-mix(in srgb,var(--nmorph-main-color) 86%,transparent);border-radius:var(--border-radius-circular);box-shadow:var(--nmorph-shadow-outset);--color: currentColor}.nmorph-media-tile.nmorph-media-tile--selected{outline:2px solid var(--nmorph-accent-color)}.nmorph-media-tile.nmorph-media-tile--speaking{outline:3px solid var(--nmorph-success-color)}.nmorph-media-tile.nmorph-media-tile--error{outline:2px solid var(--nmorph-error-color)}.nmorph-media-tile.nmorph-media-tile--screen-sharing{box-shadow:0 0 0 2px var(--nmorph-success-color)}