@nmorph/nmorph-ui-kit 2.2.53 → 2.2.54

package/dist/components/data/nmorph-media-gallery/NmorphMediaGallery.vue3.js

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

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

@@ -1,137 +1,160 @@
 import './NmorphMediaTile.css';
-import d from "./NmorphMediaTile.vue2.js";
-import { openBlock as e, createElementBlock as r, normalizeClass as c, withDirectives as p, createElementVNode as n, vShow as _, createBlock as t, withCtx as s, createVNode as a, toDisplayString as l, createCommentVNode as i, renderSlot as h } from "vue";
-/* empty css                     */
-import f from "../../../_virtual/_plugin-vue_export-helper.js";
-const v = ["src", "muted", "autoplay", "playsinline"], y = {
+import { defineComponent as B, ref as g, computed as d, watch as b, openBlock as a, createElementBlock as o, normalizeClass as O, withDirectives as S, createElementVNode as f, vShow as N, createBlock as u, unref as t, withCtx as s, createVNode as r, toDisplayString as c, createCommentVNode as l, renderSlot as j } from "vue";
+import { useModifiers as x } from "../../../utils/create-modifiers.js";
+import n from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+/* empty css                                      */
+import z from "../nmorph-avatar/NmorphAvatar.vue.js";
+/* empty css                                 */
+import M from "../../../assets/icons/mic.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"
-}, k = {
+}, $ = {
   key: 2,
   class: "nmorph-media-tile__initials"
-}, N = {
+}, E = {
   key: 3,
   class: "nmorph-media-tile__name"
-}, I = {
+}, L = {
   key: 4,
   class: "nmorph-media-tile__error-text"
-}, b = { class: "nmorph-media-tile__status" }, S = {
+}, P = { class: "nmorph-media-tile__status" }, R = {
   key: 0,
   class: "nmorph-media-tile__status-item",
   "aria-label": "Microphone muted"
-}, g = {
+}, U = {
   key: 1,
   class: "nmorph-media-tile__status-item",
   "aria-label": "Video off"
-}, z = {
+}, q = {
   key: 2,
   class: "nmorph-media-tile__status-item",
   "aria-label": "Screen sharing"
-}, V = {
+}, A = {
   key: 3,
   class: "nmorph-media-tile__status-item",
   "aria-label": "Pinned"
-};
-function x(m, M, T, o, w, B) {
-  return e(), r(
-    "div",
-    {
-      class: c(o.modifiers)
-    },
-    [
-      p(n("video", {
-        ref: "videoRef",
+}, te = /* @__PURE__ */ B({
+  __name: "NmorphMediaTile",
+  props: {
+    src: { default: "" },
+    srcObject: { default: null },
+    fit: { default: "cover" },
+    mirrored: { type: Boolean, default: !1 },
+    muted: { type: Boolean, default: !0 },
+    autoplay: { type: Boolean, default: !0 },
+    playsinline: { type: Boolean, default: !0 },
+    name: { default: "" },
+    avatarSrc: { default: "" },
+    loading: { type: Boolean, default: !1 },
+    micMuted: { type: Boolean, default: !1 },
+    videoOff: { type: Boolean, default: !1 },
+    screenSharing: { type: Boolean, default: !1 },
+    speaking: { type: Boolean, default: !1 },
+    selected: { type: Boolean, default: !1 },
+    pinned: { type: Boolean, default: !1 },
+    error: { type: Boolean, default: !1 },
+    errorText: { default: "" }
+  },
+  setup(_, { expose: h }) {
+    const e = _, i = g(null), p = d(() => !!((e.src || e.srcObject) && !e.videoOff && !e.error)), y = d(
+      () => e.name.split(/\s+/).filter(Boolean).slice(0, 2).map((m) => m[0]?.toUpperCase()).join("")
+    ), v = d(() => y.value || e.name || "?"), k = d(
+      () => x({
+        "nmorph-media-tile": [
+          e.fit,
+          e.mirrored && "mirrored",
+          e.selected && "selected",
+          e.pinned && "pinned",
+          e.speaking && "speaking",
+          e.error && "error",
+          e.videoOff && "video-off",
+          e.screenSharing && "screen-sharing",
+          e.loading && "loading"
+        ]
+      })
+    );
+    return b(
+      () => [e.srcObject, i.value],
+      () => {
+        i.value && i.value.srcObject !== e.srcObject && (i.value.srcObject = e.srcObject);
+      },
+      { immediate: !0, flush: "post" }
+    ), h({ videoRef: i }), (m, F) => (a(), o("div", {
+      class: O(k.value)
+    }, [
+      S(f("video", {
+        ref_key: "videoRef",
+        ref: i,
         class: "nmorph-media-tile__video",
-        src: o.props.src || void 0,
-        muted: o.props.muted,
-        autoplay: o.props.autoplay,
-        playsinline: o.props.playsinline
-      }, null, 8, v), [
-        [_, o.hasVideo && !o.props.loading]
+        src: e.src || void 0,
+        muted: e.muted,
+        autoplay: e.autoplay,
+        playsinline: e.playsinline
+      }, null, 8, T), [
+        [N, p.value && !e.loading]
       ]),
-      !o.hasVideo || o.props.loading ? (e(), r("div", y, [
-        o.props.loading ? (e(), t(o.NmorphIcon, {
+      !p.value || e.loading ? (a(), o("div", D, [
+        e.loading ? (a(), u(t(n), {
           key: 0,
           class: "nmorph-media-tile__loader",
           size: "large"
         }, {
           default: s(() => [
-            a(o.NmorphIconLoaderDots)
+            r(t(I))
           ]),
           _: 1
-          /* STABLE */
-        })) : o.props.avatarSrc ? (e(), t(o.NmorphAvatar, {
+        })) : e.avatarSrc ? (a(), u(t(z), {
           key: 1,
-          src: o.props.avatarSrc,
-          name: o.props.name,
+          src: e.avatarSrc,
+          name: e.name,
           size: 72
-        }, null, 8, ["src", "name"])) : (e(), r(
-          "div",
-          k,
-          l(o.fallbackLabel),
-          1
-          /* TEXT */
-        )),
-        o.props.name ? (e(), r(
-          "span",
-          N,
-          l(o.props.name),
-          1
-          /* TEXT */
-        )) : i("v-if", !0),
-        o.props.error && o.props.errorText ? (e(), r(
-          "span",
-          I,
-          l(o.props.errorText),
-          1
-          /* TEXT */
-        )) : i("v-if", !0)
-      ])) : i("v-if", !0),
-      n("div", b, [
-        o.props.micMuted ? (e(), r("span", S, [
-          a(o.NmorphIcon, { size: "small" }, {
+        }, null, 8, ["src", "name"])) : (a(), o("div", $, c(v.value), 1)),
+        e.name ? (a(), o("span", E, c(e.name), 1)) : l("", !0),
+        e.error && e.errorText ? (a(), o("span", L, c(e.errorText), 1)) : l("", !0)
+      ])) : l("", !0),
+      f("div", P, [
+        e.micMuted ? (a(), o("span", R, [
+          r(t(n), { size: "small" }, {
             default: s(() => [
-              a(o.NmorphIconMic)
+              r(t(M))
             ]),
             _: 1
-            /* STABLE */
           })
-        ])) : i("v-if", !0),
-        o.props.videoOff ? (e(), r("span", g, [
-          a(o.NmorphIcon, { size: "small" }, {
+        ])) : l("", !0),
+        e.videoOff ? (a(), o("span", U, [
+          r(t(n), { size: "small" }, {
             default: s(() => [
-              a(o.NmorphIconVideo)
+              r(t(w))
             ]),
             _: 1
-            /* STABLE */
           })
-        ])) : i("v-if", !0),
-        o.props.screenSharing ? (e(), r("span", z, [
-          a(o.NmorphIcon, { size: "small" }, {
+        ])) : l("", !0),
+        e.screenSharing ? (a(), o("span", q, [
+          r(t(n), { size: "small" }, {
             default: s(() => [
-              a(o.NmorphIconShare)
+              r(t(V))
             ]),
             _: 1
-            /* STABLE */
           })
-        ])) : i("v-if", !0),
-        o.props.pinned ? (e(), r("span", V, [
-          a(o.NmorphIcon, { size: "small" }, {
+        ])) : l("", !0),
+        e.pinned ? (a(), o("span", A, [
+          r(t(n), { size: "small" }, {
             default: s(() => [
-              a(o.NmorphIconPin)
+              r(t(C))
             ]),
             _: 1
-            /* STABLE */
           })
-        ])) : i("v-if", !0)
+        ])) : l("", !0)
       ]),
-      h(m.$slots, "overlay")
-    ],
-    2
-    /* CLASS */
-  );
-}
-const P = /* @__PURE__ */ f(d, [["render", x], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-media-tile/NmorphMediaTile.vue"]]);
+      j(m.$slots, "overlay")
+    ], 2));
+  }
+});
 export {
-  P as default
+  te as default
 };

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

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

package/dist/components/data/nmorph-pagination/NmorphPagination.vue.js

@@ -1,97 +1,138 @@
 import './NmorphPagination.css';
-import d from "./NmorphPagination.vue2.js";
-import { openBlock as e, createElementBlock as r, normalizeStyle as p, normalizeClass as t, createVNode as i, withCtx as a, Fragment as m, renderList as c, createBlock as h, mergeProps as s, createCommentVNode as _ } from "vue";
-/* empty css                      */
-import g from "../../../_virtual/_plugin-vue_export-helper.js";
-function b(f, l, v, o, k, N) {
-  return o.show ? (e(), r(
-    "div",
-    {
+import { defineComponent as O, computed as r, ref as E, watch as F, openBlock as m, createElementBlock as p, normalizeStyle as M, normalizeClass as g, createVNode as s, unref as o, withCtx as d, Fragment as z, renderList as R, createBlock as v, mergeProps as U, createCommentVNode as A } from "vue";
+import { useModifiers as D } from "../../../utils/create-modifiers.js";
+import c from "../../basic/nmorph-button/NmorphButton.vue.js";
+/* empty css                                          */
+import b from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+/* empty css                                      */
+import I from "../../form/nmorph-radio-group/NmorphRadioGroup.vue.js";
+/* empty css                                                  */
+import L from "../../form/nmorph-radio/NmorphRadio.vue.js";
+/* empty css                                       */
+import f from "../../../assets/icons/chevron-down.svg.js";
+const ee = /* @__PURE__ */ O({
+  __name: "NmorphPagination",
+  props: {
+    totalElementsQuantity: {},
+    modelValue: { default: 1 },
+    elementsQuantityOnPage: { default: 2 },
+    disabled: { type: Boolean, default: !1 },
+    hideOnSinglePage: { type: Boolean, default: !0 },
+    maxVisiblePages: { default: 9 },
+    fastForwardStep: { default: 5 },
+    height: { default: "basic" }
+  },
+  emits: ["update:model-value"],
+  setup(_, { emit: k }) {
+    const e = _, y = k, x = r(
+      () => D({
+        "nmorph-pagination": [e.disabled && "disabled"]
+      })
+    ), P = {
+      thick: "var(--thick-component)",
+      basic: "var(--default-thickness-component)",
+      thin: "var(--thin-component)"
+    }, S = r(() => ({
+      "--nmorph-pagination-height": P[e.height]
+    })), N = () => {
+      l.value = String(Number(l.value) - 1);
+    }, C = () => {
+      l.value = String(Number(l.value) + 1);
+    }, l = E(String(e.modelValue)), n = r(() => {
+      const a = e.totalElementsQuantity / e.elementsQuantityOnPage + 1, i = a % 1 === 0 ? -1 : 0;
+      return Array.from({ length: a + i }, (u, h) => ({ value: String(h + 1), label: String(h + 1) }));
+    }), V = r(() => e.hideOnSinglePage || e.totalElementsQuantity / e.elementsQuantityOnPage > 1);
+    F(l, (a) => {
+      y("update:model-value", Number(a));
+    });
+    const w = r(() => Number(l.value) === 1), B = r(() => n.value.length === Number(l.value)), Q = r(() => {
+      const a = n.value.length, i = Number(l.value), t = e.maxVisiblePages;
+      if (a <= t)
+        return n.value;
+      const u = Math.floor(t / 2);
+      return i <= u ? [...n.value.slice(0, t - 2), { value: "next", label: "..." }, n.value[a - 1]] : i >= a - u ? [n.value[0], { value: "prev", label: "..." }, ...n.value.slice(a - (t - 2))] : [
+        n.value[0],
+        { value: "prev", label: "..." },
+        ...n.value.slice(i - u, i + u - 1),
+        { value: "next", label: "..." },
+        n.value[a - 1]
+      ];
+    }), $ = (a) => {
+      const i = Number(l.value);
+      let t = a === "prev" ? i - e.fastForwardStep : i + e.fastForwardStep;
+      t <= 0 && (t = 1), t >= n.value.length && (t = n.value.length), l.value = String(t);
+    };
+    return (a, i) => V.value ? (m(), p("div", {
       key: 0,
-      class: t(o.modifiers),
-      style: p(o.paginationStyle)
-    },
-    [
-      i(o.NmorphButton, {
+      class: g(x.value),
+      style: M(S.value)
+    }, [
+      s(o(c), {
         class: "nmorph-pagination__btn nmorph-pagination__prev-btn",
-        height: o.props.height,
-        disabled: o.blockPrevButton || o.props.disabled,
-        onClick: o.prevClick
+        height: e.height,
+        disabled: w.value || e.disabled,
+        onClick: N
       }, {
-        default: a(() => [
-          i(o.NmorphIcon, { class: "nmorph-pagination__prev-icon" }, {
-            default: a(() => [
-              i(o.NmorphIconChevronDown)
+        default: d(() => [
+          s(o(b), { class: "nmorph-pagination__prev-icon" }, {
+            default: d(() => [
+              s(o(f))
             ]),
             _: 1
-            /* STABLE */
           })
         ]),
         _: 1
-        /* STABLE */
       }, 8, ["height", "disabled"]),
-      i(o.NmorphRadioGroup, {
-        modelValue: o.selectedPage,
-        "onUpdate:modelValue": l[0] || (l[0] = (n) => o.selectedPage = n),
+      s(o(I), {
+        modelValue: l.value,
+        "onUpdate:modelValue": i[0] || (i[0] = (t) => l.value = t),
         class: "nmorph-pagination__page-group",
-        height: o.props.height,
-        disabled: o.props.disabled
+        height: e.height,
+        disabled: e.disabled
       }, {
-        default: a(() => [
-          (e(!0), r(
-            m,
-            null,
-            c(o.visiblePages, (n) => (e(), r("div", {
-              key: n.value,
-              class: "nmorph-pagination__page-btn-wrapper"
-            }, [
-              n.value === "prev" || n.value === "next" ? (e(), h(o.NmorphButton, {
-                key: 0,
-                class: t(`nmorph-pagination__page-btn nmorph-pagination__${n.value}`),
-                text: n.label,
-                height: o.props.height,
-                disabled: o.props.disabled,
-                onClick: (x) => o.bigStepUpdate(n.value)
-              }, null, 8, ["class", "text", "height", "disabled", "onClick"])) : (e(), h(o.NmorphRadio, s({
-                key: 1,
-                ref_for: !0
-              }, n, {
-                class: "nmorph-pagination__page-btn",
-                height: o.props.height,
-                disabled: o.props.disabled
-              }), null, 16, ["height", "disabled"]))
-            ]))),
-            128
-            /* KEYED_FRAGMENT */
-          ))
+        default: d(() => [
+          (m(!0), p(z, null, R(Q.value, (t) => (m(), p("div", {
+            key: t.value,
+            class: "nmorph-pagination__page-btn-wrapper"
+          }, [
+            t.value === "prev" || t.value === "next" ? (m(), v(o(c), {
+              key: 0,
+              class: g(`nmorph-pagination__page-btn nmorph-pagination__${t.value}`),
+              text: t.label,
+              height: e.height,
+              disabled: e.disabled,
+              onClick: (u) => $(t.value)
+            }, null, 8, ["class", "text", "height", "disabled", "onClick"])) : (m(), v(o(L), U({
+              key: 1,
+              ref_for: !0
+            }, t, {
+              class: "nmorph-pagination__page-btn",
+              height: e.height,
+              disabled: e.disabled
+            }), null, 16, ["height", "disabled"]))
+          ]))), 128))
         ]),
         _: 1
-        /* STABLE */
       }, 8, ["modelValue", "height", "disabled"]),
-      i(o.NmorphButton, {
+      s(o(c), {
         class: "nmorph-pagination__btn nmorph-pagination__next-btn",
-        height: o.props.height,
-        disabled: o.blockNextButton || o.props.disabled,
-        onClick: o.nextClick
+        height: e.height,
+        disabled: B.value || e.disabled,
+        onClick: C
       }, {
-        default: a(() => [
-          i(o.NmorphIcon, { class: "nmorph-pagination__next-icon" }, {
-            default: a(() => [
-              i(o.NmorphIconChevronDown)
+        default: d(() => [
+          s(o(b), { class: "nmorph-pagination__next-icon" }, {
+            default: d(() => [
+              s(o(f))
             ]),
             _: 1
-            /* STABLE */
           })
         ]),
         _: 1
-        /* STABLE */
       }, 8, ["height", "disabled"])
-    ],
-    6
-    /* CLASS, STYLE */
-  )) : _("v-if", !0);
-}
-const w = /* @__PURE__ */ g(d, [["render", b], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-pagination/NmorphPagination.vue"]]);
+    ], 6)) : A("", !0);
+  }
+});
 export {
-  w as default
+  ee as default
 };

package/dist/components/data/nmorph-pagination/NmorphPagination.vue3.js

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