@nmorph/nmorph-ui-kit 2.2.41 → 2.2.42

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

@@ -1,255 +1,322 @@
 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 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";
+/* empty css                               */
+import fe 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";
+/* 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 = {
   key: 0,
   class: "nmorph-image-preview__trigger-more"
-}, S = { class: "nmorph-image-preview__content" }, B = {
+}, Ce = { class: "nmorph-image-preview__content" }, Se = {
   key: 0,
   class: "nmorph-image-preview__left"
-}, T = {
+}, Le = {
   key: 1,
   class: "nmorph-image-preview__right"
-}, D = {
+}, Ne = {
   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
+}, be = { class: "nmorph-image-preview__action-element" }, qe = /* @__PURE__ */ de({
+  __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(j, { emit: q }) {
+    const t = j, c = k(t.modelValue);
+    H(
+      () => t.modelValue,
+      (e) => c.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,
+        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"]
+      })
+    ), r = k(1);
+    H(
+      () => [t.initialIndex, u.value.length],
+      () => {
+        f.value = _(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 = () => {
+      v.value = v.value + 90, v.value >= 360 && (v.value = 0);
+    }, X = () => {
+      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;
+      if (!e) return;
+      const s = y.value + 1;
+      f.value = s > e - 1 ? 0 : s;
+    }, A = a(() => {
+      let e = {
+        icon: pe,
+        handler: le
+      };
+      return te.value && (e = {
+        icon: ke,
+        handler: ae
+      }), e;
+    }), ne = [
+      {
+        icon: he,
+        handler: W
+      },
+      {
+        icon: _e,
+        handler: X
+      },
+      {
+        icon: ye,
+        handler: Y
+      },
+      {
+        icon: we,
+        handler: ee
+      }
+    ], F = q, ie = a(() => u.value.length > 1), O = a(() => t.showNavigationButtons && ie.value), se = a(
+      () => Z({
+        "--width": t.width,
+        "--height": t.height,
+        "--nmorph-image-preview-radius": t.radius,
+        "--nmorph-image-preview-trigger-gap": t.triggerGap
+      })
+    ), ue = a(
+      () => Z({
+        "--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", {
+        key: 0,
+        class: R(V.value),
+        style: N(se.value)
+      }, [
+        h("div", {
+          class: "nmorph-image-preview__trigger",
+          onClick: U
+        }, [
+          S.value ? (n(!0), m(L, { key: 0 }, G(w.value, (d) => (n(), m("button", {
+            key: `${d.src}-${d.index}`,
+            type: "button",
+            class: "nmorph-image-preview__trigger-item",
+            "aria-label": D(d.index),
+            onClick: ve((E) => z(d.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(o(B), {
+              src: d.src,
+              alt: D(d.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")
+                fn: l(() => [
+                  g(e.$slots, "loading")
                 ]),
                 key: "0"
               } : void 0,
-              n.$slots.error ? {
+              e.$slots.error ? {
                 name: "error",
-                fn: r(() => [
-                  t(n.$slots, "error")
+                fn: l(() => [
+                  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"]),
+            d.index === Q.value && T.value > 0 ? (n(), m("span", Ie, " +" + me(T.value), 1)) : p("", !0)
+          ], 8, $e))), 128)) : (n(), $(o(B), {
+            key: 1,
+            src: x.value,
+            alt: t.alt,
+            fit: t.fit,
+            "frame-border": 0
+          }, b({ _: 2 }, [
+            e.$slots.loading ? {
+              name: "loading",
+              fn: l(() => [
+                g(e.$slots, "loading")
+              ]),
+              key: "0"
+            } : void 0,
+            e.$slots.error ? {
+              name: "error",
+              fn: l(() => [
+                g(e.$slots, "error")
+              ]),
+              key: "1"
+            } : void 0
+          ]), 1032, ["src", "alt", "fit"]))
+        ])
+      ], 6)) : p("", !0),
+      c.value ? (n(), $(ce, {
         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: R(["nmorph-image-preview__portal", V.value]),
+          style: N(ue.value)
+        }, [
+          i(o(fe), {
+            show: c.value,
+            "z-index": t.zIndex,
+            "disabled-teleport": "",
+            onOnOutsideClick: M,
+            onOnEscapeKeydown: M
+          }, {
+            default: l(() => [
+              h("div", Ce, [
+                i(o(B), {
+                  src: x.value,
+                  alt: t.alt,
+                  fit: "contain",
+                  "frame-border": 0,
+                  style: N({ transform: `rotate(${v.value}deg) scale(${r.value})` })
+                }, b({ _: 2 }, [
+                  e.$slots.loading ? {
+                    name: "loading",
+                    fn: l(() => [
+                      g(e.$slots, "loading")
+                    ]),
+                    key: "0"
+                  } : void 0,
+                  e.$slots.error ? {
+                    name: "error",
+                    fn: l(() => [
+                      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))
                       ]),
-                      key: "0"
-                    } : void 0,
-                    n.$slots.error ? {
-                      name: "error",
-                      fn: r(() => [
-                        t(n.$slots, "error")
+                      _: 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))
                       ]),
-                      key: "1"
-                    } : void 0
-                  ]), 1032, ["src", "alt", "style"])
-                ]),
-                e.showNavigation ? (o(), a("div", B, [
-                  i(e.NmorphButton, { onClick: e.previousHandler }, {
-                    default: r(() => [
-                      i(e.NmorphIcon, null, {
-                        default: r(() => [
-                          i(e.NmorphIconChevronDown)
+                      _: 1
+                    })
+                  ]),
+                  _: 1
+                })
+              ])) : p("", !0),
+              t.showActionBar ? (n(), m("div", Ne, [
+                (n(), m(L, null, G(ne, (d, E) => h("div", {
+                  key: E,
+                  class: "nmorph-image-preview__action-element"
+                }, [
+                  i(o(I), {
+                    onClick: d.handler
+                  }, {
+                    default: l(() => [
+                      i(o(C), null, {
+                        default: l(() => [
+                          (n(), $(P(d.icon)))
                         ]),
-                        _: 1
-                        /* STABLE */
-                      })
+                        _: 2
+                      }, 1024)
                     ]),
-                    _: 1
-                    /* STABLE */
-                  })
-                ])) : d("v-if", !0),
-                e.showNavigation ? (o(), a("div", T, [
-                  i(e.NmorphButton, { onClick: e.nextHandler }, {
-                    default: r(() => [
-                      i(e.NmorphIcon, null, {
-                        default: r(() => [
-                          i(e.NmorphIconChevronDown)
+                    _: 2
+                  }, 1032, ["onClick"])
+                ])), 64)),
+                h("div", be, [
+                  i(o(I), {
+                    disabled: r.value === 1,
+                    onClick: A.value.handler
+                  }, {
+                    default: l(() => [
+                      i(o(C), null, {
+                        default: l(() => [
+                          (n(), $(P(A.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"])
+                ])
+              ])) : p("", !0)
+            ]),
+            _: 3
+          }, 8, ["show", "z-index"])
+        ], 6)
+      ])) : p("", !0)
+    ], 64));
+  }
+});
 export {
-  F as default
+  qe 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)}