@nmorph/nmorph-ui-kit 2.2.40 → 2.2.42

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

@@ -0,0 +1,160 @@
+import './NmorphMediaTile.css';
+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/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";
+const T = ["src", "muted", "autoplay", "playsinline"], D = {
+  key: 0,
+  class: "nmorph-media-tile__fallback"
+}, $ = {
+  key: 2,
+  class: "nmorph-media-tile__initials"
+}, E = {
+  key: 3,
+  class: "nmorph-media-tile__name"
+}, L = {
+  key: 4,
+  class: "nmorph-media-tile__error-text"
+}, P = { class: "nmorph-media-tile__status" }, R = {
+  key: 0,
+  class: "nmorph-media-tile__status-item",
+  "aria-label": "Microphone muted"
+}, U = {
+  key: 1,
+  class: "nmorph-media-tile__status-item",
+  "aria-label": "Video off"
+}, q = {
+  key: 2,
+  class: "nmorph-media-tile__status-item",
+  "aria-label": "Screen sharing"
+}, A = {
+  key: 3,
+  class: "nmorph-media-tile__status-item",
+  "aria-label": "Pinned"
+}, 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: e.src || void 0,
+        muted: e.muted,
+        autoplay: e.autoplay,
+        playsinline: e.playsinline
+      }, null, 8, T), [
+        [N, p.value && !e.loading]
+      ]),
+      !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(() => [
+            r(t(w))
+          ]),
+          _: 1
+        })) : e.avatarSrc ? (a(), u(t(z), {
+          key: 1,
+          src: e.avatarSrc,
+          name: e.name,
+          size: 72
+        }, 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(() => [
+              r(t(M))
+            ]),
+            _: 1
+          })
+        ])) : l("", !0),
+        e.videoOff ? (a(), o("span", U, [
+          r(t(n), { size: "small" }, {
+            default: s(() => [
+              r(t(V))
+            ]),
+            _: 1
+          })
+        ])) : l("", !0),
+        e.screenSharing ? (a(), o("span", q, [
+          r(t(n), { size: "small" }, {
+            default: s(() => [
+              r(t(C))
+            ]),
+            _: 1
+          })
+        ])) : l("", !0),
+        e.pinned ? (a(), o("span", A, [
+          r(t(n), { size: "small" }, {
+            default: s(() => [
+              r(t(I))
+            ]),
+            _: 1
+          })
+        ])) : l("", !0)
+      ]),
+      j(m.$slots, "overlay")
+    ], 2));
+  }
+});
+export {
+  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
+};

package/dist/components/data/nmorph-progress/NmorphProgress.vue.js

@@ -1,84 +1,100 @@
 import './NmorphProgress.css';
-import _ from "./NmorphProgress.vue2.js";
-import { openBlock as e, createElementBlock as s, normalizeStyle as d, normalizeClass as p, createElementVNode as o, renderSlot as c, createTextVNode as n, toDisplayString as a, createCommentVNode as i } from "vue";
-/* empty css                    */
-import h from "../../../_virtual/_plugin-vue_export-helper.js";
-const m = {
+import { defineComponent as z, computed as r, ref as m, onMounted as $, openBlock as t, createElementBlock as o, normalizeStyle as C, normalizeClass as V, createElementVNode as a, renderSlot as p, createTextVNode as u, toDisplayString as h, createCommentVNode as c } from "vue";
+import { useModifiers as w } from "../../../utils/create-modifiers.js";
+import { createCssSizeVariables as x, createCssVariables as A } from "../../../utils/common.js";
+const B = {
   key: 0,
   class: "nmorph-progress__linear"
-}, g = { class: "nmorph-progress__outer" }, f = { class: "nmorph-progress__inner" }, y = {
+}, N = { class: "nmorph-progress__outer" }, b = { class: "nmorph-progress__inner" }, D = {
   key: 0,
   class: "nmorph-progress__inner-text"
-}, v = {
+}, I = {
   key: 0,
   class: "nmorph-progress__percentage"
-}, k = {
+}, M = {
   key: 1,
   class: "nmorph-progress__circle"
-}, S = { class: "nmorph-progress__circle-inner-part" }, z = ["width", "height"], x = ["cx", "cy", "r", "stroke-dasharray", "stroke-dashoffset"];
-function N(t, P, l, r, D, V) {
-  return e(), s(
-    "div",
-    {
-      class: p(r.modifiers),
-      style: d(r.styles)
-    },
-    [
-      r.props.type === "linear" ? (e(), s("div", m, [
-        o("div", g, [
-          o("div", f, [
-            l.valueInside ? (e(), s("div", y, [
-              c(t.$slots, "inner-text", {}, () => [
-                n(
-                  a(r.displayPercentage),
-                  1
-                  /* TEXT */
-                )
+}, P = { class: "nmorph-progress__circle-inner-part" }, T = ["width", "height"], E = ["cx", "cy", "r", "stroke-dasharray", "stroke-dashoffset"], G = /* @__PURE__ */ z({
+  __name: "NmorphProgress",
+  props: {
+    type: { default: "linear" },
+    color: { type: [String, Array, Function], default: "var(--nmorph-accent-color)" },
+    percentage: {},
+    valueInside: { type: Boolean, default: !1 },
+    valueRightSide: { type: Boolean, default: !0 },
+    indeterminate: { type: Boolean, default: !1 },
+    circleSize: { default: 120 },
+    height: { default: void 0 },
+    widthTransition: { default: void 0 },
+    indeterminateAnimation: { default: void 0 }
+  },
+  setup(l) {
+    const e = l, v = r(
+      () => w({
+        "nmorph-progress": []
+      })
+    ), f = r(() => Array.isArray(e.color) ? e.color.find((i) => i.percentage <= e.percentage)?.color : typeof e.color == "function" ? e.color(e.percentage) : e.color), g = r(() => e.indeterminate ? "var(--animation)" : "none"), d = m(null), s = m(1), _ = r(() => `${s.value} ${s.value}`), y = r(() => s.value - e.percentage / 100 * s.value);
+    $(() => {
+      d.value && (s.value = 2 * Math.PI * d.value.r.baseVal.value);
+    });
+    const S = r(() => `${e.circleSize}px`), n = r(() => `${e.percentage}%`), k = r(() => ({
+      ...A({
+        "--nmorph-progress-percentage": n.value,
+        "--nmorph-progress-color": f.value,
+        "--nmorph-progress-animation": g.value,
+        "--nmorph-progress-circle-size": S.value,
+        "--width-transition": e.widthTransition,
+        "--animation": e.indeterminateAnimation
+      }),
+      ...x({
+        "--height": e.height
+      })
+    }));
+    return (i, R) => (t(), o("div", {
+      class: V(v.value),
+      style: C(k.value)
+    }, [
+      e.type === "linear" ? (t(), o("div", B, [
+        a("div", N, [
+          a("div", b, [
+            l.valueInside ? (t(), o("div", D, [
+              p(i.$slots, "inner-text", {}, () => [
+                u(h(n.value), 1)
               ])
-            ])) : i("v-if", !0)
+            ])) : c("", !0)
           ])
         ]),
-        l.valueRightSide ? (e(), s("div", v, [
-          c(t.$slots, "right-side", {}, () => [
-            n(
-              a(r.displayPercentage),
-              1
-              /* TEXT */
-            )
+        l.valueRightSide ? (t(), o("div", I, [
+          p(i.$slots, "right-side", {}, () => [
+            u(h(n.value), 1)
           ])
-        ])) : i("v-if", !0)
-      ])) : i("v-if", !0),
-      r.props.type === "circle" ? (e(), s("div", k, [
-        o("div", S, [
-          c(t.$slots, "circle-inner-part", {}, () => [
-            n(
-              a(r.displayPercentage),
-              1
-              /* TEXT */
-            )
+        ])) : c("", !0)
+      ])) : c("", !0),
+      e.type === "circle" ? (t(), o("div", M, [
+        a("div", P, [
+          p(i.$slots, "circle-inner-part", {}, () => [
+            u(h(n.value), 1)
           ])
         ]),
-        (e(), s("svg", {
-          width: r.props.circleSize,
-          height: r.props.circleSize
+        (t(), o("svg", {
+          width: e.circleSize,
+          height: e.circleSize
         }, [
-          o("circle", {
-            ref: "circle",
+          a("circle", {
+            ref_key: "circle",
+            ref: d,
             class: "nmorph-progress__circle-ring",
-            cx: r.props.circleSize / 2,
-            cy: r.props.circleSize / 2,
-            r: r.props.circleSize / 2 - 2,
-            "stroke-dasharray": r.strokeDasharray,
-            "stroke-dashoffset": r.strokeDashoffset
-          }, null, 8, x)
-        ], 8, z))
-      ])) : i("v-if", !0)
-    ],
-    6
-    /* CLASS, STYLE */
-  );
-}
-const E = /* @__PURE__ */ h(_, [["render", N], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-progress/NmorphProgress.vue"]]);
+            cx: e.circleSize / 2,
+            cy: e.circleSize / 2,
+            r: e.circleSize / 2 - 2,
+            "stroke-dasharray": _.value,
+            "stroke-dashoffset": y.value
+          }, null, 8, E)
+        ], 8, T))
+      ])) : c("", !0)
+    ], 6));
+  }
+});
 export {
-  E as default
+  G as default
 };

package/dist/components/data/nmorph-progress/NmorphProgress.vue3.js

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