@nmorph/nmorph-ui-kit 3.0.6 → 3.0.7

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

@@ -1,18 +1,18 @@
 import './NmorphImagePreview.css';
-import { defineComponent as $, ref as g, watch as h, computed as t, onBeforeUnmount as Z } from "vue";
-import { useModifiers as j } from "../../../utils/create-modifiers.js";
-import { createCssSizeVariables as U } from "../../../utils/common.js";
-import W from "../nmorph-preview-portal/NmorphPreviewPortal.vue.js";
-import J from "../../../assets/icons/shrink.svg.js";
-import Q from "../../../assets/icons/rotate-right.svg.js";
-import X from "../../../assets/icons/rotate-left.svg.js";
-import Y from "../../../assets/icons/zoom-in.svg.js";
-import ee from "../../../assets/icons/zoom-out.svg.js";
-import re from "../../../assets/icons/enlarge.svg.js";
-import te from "../../basic/nmorph-icon/NmorphIcon.vue.js";
-import ae from "../../basic/nmorph-button/NmorphButton.vue.js";
-import ie from "../nmorph-image/NmorphImage.vue.js";
-const Ne = /* @__PURE__ */ $({
+import { defineComponent as ee, ref as w, watch as I, computed as a, onBeforeUnmount as te } from "vue";
+import { useModifiers as re } from "../../../utils/create-modifiers.js";
+import { createCssSizeVariables as ae } from "../../../utils/common.js";
+import oe from "../nmorph-preview-portal/NmorphPreviewPortal.vue.js";
+import le from "../../../assets/icons/shrink.svg.js";
+import ne from "../../../assets/icons/rotate-right.svg.js";
+import ie from "../../../assets/icons/rotate-left.svg.js";
+import ue from "../../../assets/icons/zoom-in.svg.js";
+import se from "../../../assets/icons/zoom-out.svg.js";
+import me from "../../../assets/icons/enlarge.svg.js";
+import de from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+import ce from "../../basic/nmorph-button/NmorphButton.vue.js";
+import ge from "../nmorph-image/NmorphImage.vue.js";
+const _e = /* @__PURE__ */ ee({
   __name: "NmorphImagePreview",
   props: {
     modelValue: { type: Boolean, required: !1, default: !1 },
@@ -38,117 +38,141 @@ const Ne = /* @__PURE__ */ $({
     triggerGap: { type: [Number, String], required: !1, default: 8 }
   },
   emits: ["update:model-value"],
-  setup(V, { expose: C, emit: H }) {
-    C();
-    const r = V, l = g(r.modelValue);
-    h(
-      () => r.modelValue,
+  setup(O, { expose: D, emit: E }) {
+    D();
+    const t = O, l = w(t.modelValue);
+    I(
+      () => t.modelValue,
       (e) => l.value = e
     );
-    const a = t(() => Array.isArray(r.src) ? r.src : [r.src]), s = (e) => {
-      const o = a.value.length - 1;
-      return o < 0 || e < 0 ? 0 : e > o ? o : e;
-    }, u = g(s(r.initialIndex)), d = t(() => s(u.value)), K = t(() => a.value[d.value] || ""), v = t(() => r.triggerView === "gallery" && a.value.length > 1), y = t(() => !r.triggerLimit || r.triggerLimit < 1 ? a.value.length : Math.min(Math.floor(r.triggerLimit), a.value.length)), m = t(
-      () => a.value.slice(0, y.value).map((e, o) => ({
-        index: o,
+    const o = a(() => Array.isArray(t.src) ? t.src : [t.src]), s = (e) => {
+      const r = o.value.length - 1;
+      return r < 0 || e < 0 ? 0 : e > r ? r : e;
+    }, i = w(s(t.initialIndex)), u = a(() => s(i.value)), b = a(() => o.value[u.value] || ""), p = a(() => t.triggerView === "gallery" && o.value.length > 1), q = a(() => !t.triggerLimit || t.triggerLimit < 1 ? o.value.length : Math.min(Math.floor(t.triggerLimit), o.value.length)), d = a(
+      () => o.value.slice(0, q.value).map((e, r) => ({
+        index: r,
         src: e
       }))
-    ), M = t(() => a.value.length - m.value.length), P = t(() => m.value[m.value.length - 1]?.index ?? -1), R = t(
-      () => j({
-        "nmorph-image-preview": [l.value && "opened", v.value && "gallery-trigger"]
+    ), G = a(() => o.value.length - d.value.length), j = a(() => d.value[d.value.length - 1]?.index ?? -1), F = a(
+      () => re({
+        "nmorph-image-preview": [l.value && "opened", p.value && "gallery-trigger"]
       })
-    ), i = g(1);
-    h(
-      () => [r.initialIndex, a.value.length],
+    ), c = w(/* @__PURE__ */ new Map()), x = (e, r) => e || `__empty-image-${r}`, f = a(() => x(b.value, u.value)), g = a(
+      () => c.value.get(f.value) || {
+        rotateLevel: 0,
+        scaleLevel: 1
+      }
+    ), v = a(() => g.value.rotateLevel), m = a(() => g.value.scaleLevel), Z = a(() => `rotate(${v.value}deg) scale(${m.value})`), T = (e) => {
+      const r = new Map(c.value);
+      r.set(f.value, e), c.value = r;
+    }, n = (e) => {
+      T({
+        ...g.value,
+        ...e
+      });
+    }, h = (e) => {
+      const r = e % 360;
+      return Object.is(r, -0) ? 0 : r;
+    }, y = (e) => parseFloat(Math.min(Math.max(e, t.minScaleLevel), t.maxScaleLevel).toFixed(3));
+    I(
+      () => [t.initialIndex, o.value.length],
       () => {
-        u.value = s(r.initialIndex);
+        i.value = s(t.initialIndex);
       }
     );
-    const N = (e) => {
-      u.value = s(e), l.value = !0, f("update:model-value", l.value);
+    const _ = (e) => {
+      i.value = s(e), l.value = !0, S("update:model-value", l.value);
+    }, U = () => {
+      p.value || _(u.value);
+    }, W = () => {
+      l.value = !1, S("update:model-value", l.value);
+    }, B = () => {
+      n({
+        rotateLevel: h(v.value + 90)
+      });
+    }, k = () => {
+      n({
+        rotateLevel: h(v.value - 90)
+      });
+    }, M = () => {
+      n({
+        scaleLevel: y(m.value + t.scaleStep)
+      });
+    }, A = () => {
+      n({
+        scaleLevel: y(m.value - t.scaleStep)
+      });
+    }, C = a(() => m.value < 1), K = () => {
+      n({ scaleLevel: 1 });
+    }, V = () => {
+      n({ scaleLevel: 1 });
     }, z = () => {
-      v.value || N(d.value);
-    }, F = () => {
-      l.value = !1, f("update:model-value", l.value);
-    }, S = () => {
-      n.value = n.value + 90, n.value >= 360 && (n.value = 0);
-    }, w = () => {
-      n.value = n.value - 90, n.value <= -360 && (n.value = 0);
-    }, I = () => {
-      i.value < r.maxScaleLevel && (i.value += r.scaleStep), i.value = parseFloat(i.value.toFixed(3));
-    }, b = () => {
-      i.value > r.minScaleLevel && (i.value -= r.scaleStep), i.value = parseFloat(i.value.toFixed(3));
-    }, L = t(() => i.value < 1), q = () => {
-      i.value = 1;
-    }, x = () => {
-      i.value = 1;
-    }, n = g(0), B = () => {
-      const e = a.value.length;
+      const e = o.value.length;
       if (!e) return;
-      const o = d.value - 1;
-      u.value = o < 0 ? e - 1 : o;
-    }, _ = () => {
-      const e = a.value.length;
+      const r = u.value - 1;
+      i.value = r < 0 ? e - 1 : r;
+    }, H = () => {
+      const e = o.value.length;
       if (!e) return;
-      const o = d.value + 1;
-      u.value = o > e - 1 ? 0 : o;
-    }, p = (e) => {
-      !l.value || a.value.length < 2 || e.altKey || e.ctrlKey || e.metaKey || e.shiftKey || (e.key === "ArrowLeft" && (e.preventDefault(), B()), e.key === "ArrowRight" && (e.preventDefault(), _()));
-    }, k = () => {
-      typeof document > "u" || document.addEventListener("keydown", p);
-    }, c = () => {
-      typeof document > "u" || document.removeEventListener("keydown", p);
+      const r = u.value + 1;
+      i.value = r > e - 1 ? 0 : r;
+    }, N = (e) => {
+      !l.value || o.value.length < 2 || e.altKey || e.ctrlKey || e.metaKey || e.shiftKey || (e.key === "ArrowLeft" && (e.preventDefault(), z()), e.key === "ArrowRight" && (e.preventDefault(), H()));
+    }, R = () => {
+      typeof document > "u" || document.addEventListener("keydown", N);
+    }, L = () => {
+      typeof document > "u" || document.removeEventListener("keydown", N);
     };
-    h(
+    I(
       l,
       (e) => {
-        e ? k() : c();
+        e ? R() : L();
       },
       { immediate: !0 }
-    ), Z(c);
-    const D = t(() => {
+    ), te(L);
+    const J = a(() => {
       let e = {
-        icon: J,
-        handler: x
+        icon: le,
+        handler: V
       };
-      return L.value && (e = {
-        icon: re,
-        handler: q
+      return C.value && (e = {
+        icon: me,
+        handler: K
       }), e;
-    }), E = [
+    }), Q = [
       {
-        icon: Q,
-        handler: S
+        icon: ne,
+        handler: B
       },
       {
-        icon: X,
-        handler: w
+        icon: ie,
+        handler: k
       },
       {
-        icon: Y,
-        handler: I
+        icon: ue,
+        handler: M
       },
       {
-        icon: ee,
-        handler: b
+        icon: se,
+        handler: A
       }
-    ], f = H, T = t(() => a.value.length > 1), G = t(() => r.showNavigationButtons && T.value), O = t(
-      () => U({
-        "--nmorph-private-image-preview-trigger-width": r.width,
-        "--nmorph-private-image-preview-trigger-height": r.height,
-        "--nmorph-private-image-preview-radius": r.radius,
-        "--nmorph-private-image-preview-trigger-gap": r.triggerGap
+    ], S = E, $ = a(() => o.value.length > 1), X = a(() => t.showNavigationButtons && $.value), Y = a(
+      () => ae({
+        "--nmorph-private-image-preview-trigger-width": t.width,
+        "--nmorph-private-image-preview-trigger-height": t.height,
+        "--nmorph-private-image-preview-radius": t.radius,
+        "--nmorph-private-image-preview-trigger-gap": t.triggerGap
       })
-    ), A = { props: r, open: l, sourceList: a, getClampedIndex: s, currentIndex: u, resolvedCurrentIndex: d, triggerSource: K, showGalleryTrigger: v, triggerSourceLimit: y, triggerSources: m, hiddenTriggerCount: M, lastVisibleTriggerIndex: P, modifiers: R, scaleLevel: i, openPreviewAt: N, clickHandler: z, closeHandler: F, rotateRight: S, rotateLeft: w, zoomIn: I, zoomOut: b, isLevelChangedToMin: L, enlargeToNormal: q, shrinkToNormal: x, rotateLevel: n, previousHandler: B, nextHandler: _, keyboardNavigationHandler: p, addKeyboardNavigationListener: k, removeKeyboardNavigationListener: c, enlargeShrinkActionData: D, actions: E, emit: f, multipleSources: T, showNavigation: G, triggerStyle: O, getTriggerLabel: (e) => r.alt ? `${r.alt} ${e + 1}` : `Image ${e + 1}`, get NmorphImage() {
-      return ie;
+    ), P = { props: t, open: l, sourceList: o, getClampedIndex: s, currentIndex: i, resolvedCurrentIndex: u, triggerSource: b, showGalleryTrigger: p, triggerSourceLimit: q, triggerSources: d, hiddenTriggerCount: G, lastVisibleTriggerIndex: j, modifiers: F, imageTransformStates: c, getImageTransformKey: x, currentTransformKey: f, currentTransformState: g, rotateLevel: v, scaleLevel: m, imageTransform: Z, setCurrentTransformState: T, updateCurrentTransformState: n, normalizeRotateLevel: h, clampScaleLevel: y, openPreviewAt: _, clickHandler: U, closeHandler: W, rotateRight: B, rotateLeft: k, zoomIn: M, zoomOut: A, isLevelChangedToMin: C, enlargeToNormal: K, shrinkToNormal: V, previousHandler: z, nextHandler: H, keyboardNavigationHandler: N, addKeyboardNavigationListener: R, removeKeyboardNavigationListener: L, enlargeShrinkActionData: J, actions: Q, emit: S, multipleSources: $, showNavigation: X, triggerStyle: Y, getTriggerLabel: (e) => t.alt ? `${t.alt} ${e + 1}` : `Image ${e + 1}`, get NmorphImage() {
+      return ge;
     }, get NmorphButton() {
-      return ae;
+      return ce;
     }, get NmorphIcon() {
-      return te;
-    }, NmorphPreviewPortal: W };
-    return Object.defineProperty(A, "__isScriptSetup", { enumerable: !1, value: !0 }), A;
+      return de;
+    }, NmorphPreviewPortal: oe };
+    return Object.defineProperty(P, "__isScriptSetup", { enumerable: !1, value: !0 }), P;
   }
 });
 export {
-  Ne as default
+  _e as default
 };

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

@@ -1,14 +1,14 @@
 import './NmorphMediaTile.css';
-import { defineComponent as E, ref as p, computed as t, watch as q } from "vue";
-import { useModifiers as L } from "../../../utils/create-modifiers.js";
-import M from "../../../assets/icons/video-camera-off.svg.js";
+import { defineComponent as _, ref as m, computed as t, watch as I } from "vue";
+import { useModifiers as E } from "../../../utils/create-modifiers.js";
+import L from "../../../assets/icons/video-camera-off.svg.js";
 import A from "../../../assets/icons/share.svg.js";
 import C from "../../../assets/icons/mute.svg.js";
 import x from "../../basic/nmorph-icon/NmorphIcon.vue.js";
 import w from "../../basic/nmorph-button/NmorphButton.vue.js";
-import D from "../nmorph-avatar/NmorphAvatar.vue.js";
-import R from "../../../assets/icons/loader.svg.js";
-const W = /* @__PURE__ */ E({
+import R from "../nmorph-avatar/NmorphAvatar.vue.js";
+import D from "../../../assets/icons/loader.svg.js";
+const W = /* @__PURE__ */ _({
   __name: "NmorphMediaTile",
   props: {
     src: { type: String, required: !1, default: "" },
@@ -32,23 +32,21 @@ const W = /* @__PURE__ */ E({
     error: { type: Boolean, required: !1, default: !1 },
     errorText: { type: String, required: !1, default: "" }
   },
-  setup(B, { expose: I }) {
-    const e = B, o = p(null), a = p(null), u = p({
+  setup(j, { expose: N }) {
+    const e = j, o = m(null), n = m(null), u = m({
       audio: 0,
       video: 0
-    }), v = t(() => !!(e.src || e.srcObject)), m = (r) => !r || typeof r.getAudioTracks != "function" ? [] : r.getAudioTracks(), y = (r) => !r || typeof r.getVideoTracks != "function" ? [] : r.getVideoTracks(), d = (r) => {
+    }), y = t(() => !!(e.src || e.srcObject)), h = (r) => !r || typeof r.getAudioTracks != "function" ? [] : r.getAudioTracks(), g = (r) => !r || typeof r.getVideoTracks != "function" ? [] : r.getVideoTracks(), d = (r) => {
       u.value = {
-        audio: m(r).length,
-        video: y(r).length
+        audio: h(r).length,
+        video: g(r).length
       };
-    }, h = t(() => typeof e.srcObject?.getVideoTracks == "function"), g = t(() => u.value.audio > 0), k = t(() => u.value.video > 0), S = t(
-      () => !!(e.src || e.srcObject && (!h.value || k.value))
-    ), n = t(() => v.value && S.value && !e.videoOff && !e.error), i = t(
-      () => !!(e.srcObject && !e.muted && !e.error && g.value)
-    ), j = t(() => e.muted || i.value), N = t(() => n.value && e.src ? e.src : void 0), O = t(
+    }, k = t(() => typeof e.srcObject?.getVideoTracks == "function"), O = t(() => u.value.video > 0), S = t(
+      () => !!(e.src || e.srcObject && (!k.value || O.value))
+    ), c = t(() => y.value && S.value && !e.videoOff && !e.error), i = t(() => !!(e.srcObject && !e.muted && !e.error)), b = t(() => e.muted || i.value), T = t(() => c.value && e.src ? e.src : void 0), q = t(
       () => e.name.split(/\s+/).filter(Boolean).slice(0, 2).map((r) => r[0]?.toUpperCase()).join("")
-    ), T = t(() => O.value || e.name || "?"), V = t(
-      () => L({
+    ), M = t(() => q.value || e.name || "?"), V = t(
+      () => E({
         "nmorph-media-tile": [
           e.fit,
           e.mirrored && "mirrored",
@@ -62,62 +60,74 @@ const W = /* @__PURE__ */ E({
       })
     ), s = (r) => {
       if (!r || e.sinkId === void 0) return;
-      const f = r;
-      typeof f.setSinkId == "function" && f.setSinkId(e.sinkId).catch(() => {
-      });
-    }, c = (r) => {
-      !r || !e.autoplay || r.play().catch(() => {
+      const a = r;
+      typeof a.setSinkId == "function" && a.setSinkId(e.sinkId).catch(() => {
       });
+    }, f = (r) => {
+      console.warn("[NmorphMediaTile] media autoplay failed", r);
+    }, p = (r) => {
+      if (!r || !e.autoplay) return;
+      let a;
+      try {
+        a = r.play();
+      } catch (v) {
+        f(v);
+        return;
+      }
+      a && typeof a.catch == "function" && a.catch(f);
     };
-    q(
+    I(
       () => e.srcObject,
-      (r, f, _) => {
+      (r, a, v) => {
         if (d(r), !r || typeof r.addEventListener != "function" || typeof r.removeEventListener != "function")
           return;
         const l = () => d(r);
-        r.addEventListener("addtrack", l), r.addEventListener("removetrack", l), _(() => {
+        r.addEventListener("addtrack", l), r.addEventListener("removetrack", l), v(() => {
           r.removeEventListener("addtrack", l), r.removeEventListener("removetrack", l);
         });
       },
       { immediate: !0 }
-    ), q(
+    ), I(
       () => [
         e.srcObject,
         e.sinkId,
         e.autoplay,
-        n.value,
+        e.videoOff,
+        e.error,
+        c.value,
         i.value,
+        b.value,
         o.value,
-        a.value
+        n.value
       ],
       () => {
         if (o.value) {
-          const r = n.value ? e.srcObject : null;
-          o.value.srcObject !== r && (o.value.srcObject = r), s(o.value), e.autoplay && n.value && r && c(o.value);
+          const r = e.srcObject;
+          o.value.srcObject !== r && (o.value.srcObject = r), s(o.value), e.autoplay && r && !e.videoOff && !e.error && p(o.value);
         }
-        if (a.value) {
+        if (n.value) {
           const r = i.value ? e.srcObject : null;
-          a.value.srcObject !== r && (a.value.srcObject = r), s(a.value), e.autoplay && i.value && c(a.value);
+          n.value.srcObject !== r && (n.value.srcObject = r), s(n.value), e.autoplay && i.value && p(n.value);
         }
       },
       { immediate: !0, flush: "post" }
-    ), I({ videoRef: o });
-    const b = { props: e, videoRef: o, audioRef: a, srcObjectTrackCount: u, hasMediaSource: v, getAudioTracks: m, getVideoTracks: y, updateSrcObjectTrackCount: d, canInspectVideoTracks: h, hasAudioTracks: g, hasVideoTracks: k, hasVideoSource: S, videoVisible: n, needsSeparateAudioOutput: i, videoMuted: j, videoSrc: N, initials: O, fallbackLabel: T, modifiers: V, setMediaElementSinkId: s, playMediaElement: c, get NmorphAvatar() {
-      return D;
+    ), N({ videoRef: o });
+    const B = { props: e, videoRef: o, audioRef: n, srcObjectTrackCount: u, hasMediaSource: y, getAudioTracks: h, getVideoTracks: g, updateSrcObjectTrackCount: d, canInspectVideoTracks: k, hasVideoTracks: O, hasVideoSource: S, videoVisible: c, needsSeparateAudioOutput: i, videoMuted: b, videoSrc: T, initials: q, fallbackLabel: M, modifiers: V, setMediaElementSinkId: s, logMediaPlaybackError: f, playMediaElement: p, get NmorphAvatar() {
+      return R;
     }, get NmorphButton() {
       return w;
     }, get NmorphIcon() {
       return x;
     }, get NmorphIconLoaderDots() {
-      return R;
+      return D;
     }, get NmorphIconMute() {
       return C;
     }, get NmorphIconShare() {
       return A;
     }, get NmorphIconVideoCameraOff() {
-      return M;
+      return L;
     } };
-    return Object.defineProperty(b, "__isScriptSetup", { enumerable: !1, value: !0 }), b;
+    return Object.defineProperty(B, "__isScriptSetup", { enumerable: !1, value: !0 }), B;
   }
 });
 export {

package/dist/components/data/nmorph-pagination/NmorphPagination.css

@@ -1 +1 @@
-.nmorph-pagination{display:flex;justify-content:center;margin-top:var(--indentation-04)}.nmorph-pagination .nmorph-radio-group__content{display:flex;gap:8px;justify-content:center}.nmorph-pagination .nmorph-radio-group{display:inline-flex;align-items:center}.nmorph-pagination .nmorph-radio-group .nmorph-radio:not(:last-child){margin-right:0;margin-bottom:0}.nmorph-pagination .nmorph-pagination__page-group{margin:0 var(--indentation-01)}.nmorph-pagination .nmorph-pagination__prev-icon{rotate:90deg}.nmorph-pagination .nmorph-pagination__next-icon{rotate:-90deg}.nmorph-pagination .nmorph-pagination__prev-btn{margin-right:8px}.nmorph-pagination .nmorph-pagination__next-btn{margin-left:8px}.nmorph-pagination .nmorph-pagination__page-btn{--nmorph-private-control-height: var(--nmorph-private-pagination-height);--nmorph-private-selection-control-size: var(--nmorph-private-pagination-height);width:40px;min-width:40px;height:var(--nmorph-private-pagination-height);min-height:var(--nmorph-private-pagination-height)}.nmorph-pagination .nmorph-pagination__page-btn.nmorph-radio .nmorph-radio__content,.nmorph-pagination .nmorph-pagination__page-btn.nmorph-radio .nmorph-radio__fake{width:100%;height:100%}.nmorph-pagination .nmorph-pagination__page-btn.nmorph-radio.nmorph-radio--nmorph .nmorph-radio__fake{padding:0}.nmorph-pagination .nmorph-pagination__page-btn-wrapper{display:flex}.nmorph-pagination .nmorph-pagination__prev-secondary-btn{margin-right:8px}.nmorph-pagination .nmorph-pagination__next-secondary-btn{margin-left:8px}
+.nmorph-pagination{display:flex;justify-content:center;box-sizing:border-box;width:var(--nmorph-private-pagination-width, 100%);min-width:min(100%,var(--nmorph-private-pagination-min-width, 0px));max-width:100%;margin-top:var(--indentation-04);margin-right:auto;margin-left:auto}.nmorph-pagination.nmorph-pagination--fixed-container{width:var(--nmorph-private-pagination-width, var(--nmorph-private-pagination-fixed-width))}.nmorph-pagination .nmorph-radio-group__content{display:flex;gap:8px;justify-content:center}.nmorph-pagination .nmorph-radio-group{display:inline-flex;align-items:center}.nmorph-pagination .nmorph-radio-group .nmorph-radio:not(:last-child){margin-right:0;margin-bottom:0}.nmorph-pagination .nmorph-pagination__page-group{margin:0 var(--indentation-01)}.nmorph-pagination .nmorph-pagination__prev-icon{rotate:90deg}.nmorph-pagination .nmorph-pagination__next-icon{rotate:-90deg}.nmorph-pagination .nmorph-pagination__prev-btn{margin-right:8px}.nmorph-pagination .nmorph-pagination__next-btn{margin-left:8px}.nmorph-pagination .nmorph-pagination__page-btn{--nmorph-private-control-height: var(--nmorph-private-pagination-height);--nmorph-private-selection-control-size: var(--nmorph-private-pagination-height);width:40px;min-width:40px;height:var(--nmorph-private-pagination-height);min-height:var(--nmorph-private-pagination-height)}.nmorph-pagination .nmorph-pagination__page-btn.nmorph-radio .nmorph-radio__content,.nmorph-pagination .nmorph-pagination__page-btn.nmorph-radio .nmorph-radio__fake{width:100%;height:100%}.nmorph-pagination .nmorph-pagination__page-btn.nmorph-radio.nmorph-radio--nmorph .nmorph-radio__fake{padding:0}.nmorph-pagination .nmorph-pagination__page-btn-wrapper{display:flex}.nmorph-pagination .nmorph-pagination__prev-secondary-btn{margin-right:8px}.nmorph-pagination .nmorph-pagination__next-secondary-btn{margin-left:8px}

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

@@ -17,7 +17,7 @@ function k(v, r, g, n, f, N) {
       disabled: n.blockPrevButton || n.interactionDisabled,
       onClick: n.prevClick
     }, {
-      default: e(() => [
+      "icon-only": e(() => [
         i(n.NmorphIcon, { class: "nmorph-pagination__prev-icon" }, {
           default: e(() => [
             i(n.NmorphIconChevronDown)
@@ -50,7 +50,7 @@ function k(v, r, g, n, f, N) {
               text: o.label,
               thickness: n.props.thickness,
               disabled: n.interactionDisabled,
-              onClick: (x) => n.bigStepUpdate(o.value)
+              onClick: (y) => n.bigStepUpdate(o.value)
             }, null, 8, ["class", "text", "thickness", "disabled", "onClick"])) : (a(), s(n.NmorphRadio, {
               key: 1,
               value: o.value,
@@ -73,7 +73,7 @@ function k(v, r, g, n, f, N) {
       disabled: n.blockNextButton || n.interactionDisabled,
       onClick: n.nextClick
     }, {
-      default: e(() => [
+      "icon-only": e(() => [
         i(n.NmorphIcon, { class: "nmorph-pagination__next-icon" }, {
           default: e(() => [
             i(n.NmorphIconChevronDown)
@@ -87,7 +87,7 @@ function k(v, r, g, n, f, N) {
     }, 8, ["thickness", "disabled"])
   ], 14, b)) : p("v-if", !0);
 }
-const u = /* @__PURE__ */ _(c, [["render", k], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-pagination/NmorphPagination.vue"]]);
+const P = /* @__PURE__ */ _(c, [["render", k], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-pagination/NmorphPagination.vue"]]);
 export {
-  u as default
+  P as default
 };

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

@@ -1,12 +1,13 @@
 import './NmorphPagination.css';
-import { defineComponent as O, computed as n, ref as g, watch as c } from "vue";
-import { useModifiers as Q } from "../../../utils/create-modifiers.js";
-import V from "../../form/nmorph-radio/NmorphRadio.vue.js";
+import { defineComponent as V, computed as i, ref as b, watch as d } from "vue";
+import { useModifiers as O } from "../../../utils/create-modifiers.js";
+import { createCssSizeVariables as Q } from "../../../utils/common.js";
+import W from "../../form/nmorph-radio/NmorphRadio.vue.js";
 import F from "../../basic/nmorph-icon/NmorphIcon.vue.js";
-import M from "../../basic/nmorph-button/NmorphButton.vue.js";
-import I from "../../form/nmorph-radio-group/NmorphRadioGroup.vue.js";
-import R from "../../../assets/icons/chevron-down.svg.js";
-const z = /* @__PURE__ */ O({
+import I from "../../basic/nmorph-button/NmorphButton.vue.js";
+import R from "../../form/nmorph-radio-group/NmorphRadioGroup.vue.js";
+import D from "../../../assets/icons/chevron-down.svg.js";
+const K = /* @__PURE__ */ V({
   __name: "NmorphPagination",
   props: {
     totalElementsQuantity: { type: Number, required: !0 },
@@ -17,88 +18,111 @@ const z = /* @__PURE__ */ O({
     hideOnSinglePage: { type: Boolean, required: !1, default: !0 },
     maxVisiblePages: { type: Number, required: !1, default: 9 },
     fastForwardStep: { type: Number, required: !1, default: 5 },
-    thickness: { type: null, required: !1, default: "basic" }
+    thickness: { type: null, required: !1, default: "basic" },
+    fixedContainer: { type: Boolean, required: !1, default: !1 },
+    width: { type: [Number, String], required: !1, default: void 0 },
+    minWidth: { type: [Number, String], required: !1, default: void 0 }
   },
   emits: ["update:model-value"],
-  setup(b, { expose: h, emit: N }) {
-    h();
-    const t = b, p = N, S = n(
-      () => Q({
-        "nmorph-pagination": [t.disabled && "disabled", t.loading && "loading"]
+  setup(N, { expose: S, emit: x }) {
+    S();
+    const t = N, c = x, y = i(
+      () => O({
+        "nmorph-pagination": [
+          t.disabled && "disabled",
+          t.loading && "loading",
+          t.fixedContainer && "fixed-container"
+        ]
       })
-    ), d = {
+    ), g = {
       thick: "var(--thick-component)",
       basic: "var(--basic-component)",
       thin: "var(--thin-component)"
-    }, y = n(() => ({
-      "--nmorph-private-pagination-height": d[t.thickness]
-    })), P = n(() => t.disabled || t.loading), k = () => {
-      r.value = String(Number(r.value) - 1);
-    }, _ = () => {
-      r.value = String(Number(r.value) + 1);
-    }, r = g(String(t.modelValue)), u = n(() => {
+    }, o = i(() => Math.max(1, Math.floor(t.maxVisiblePages))), v = i(() => {
+      const e = o.value * 40, a = Math.max(0, o.value - 1) * 8;
+      return [
+        "calc(",
+        "var(--nmorph-private-pagination-height) + ",
+        "var(--nmorph-private-pagination-height) + ",
+        "16px + var(--indentation-01) + var(--indentation-01) + ",
+        `${e + a}px`,
+        ")"
+      ].join("");
+    }), P = i(() => ({
+      "--nmorph-private-pagination-height": g[t.thickness],
+      "--nmorph-private-pagination-fixed-pages": o.value,
+      "--nmorph-private-pagination-fixed-width": v.value,
+      ...Q({
+        "--nmorph-private-pagination-width": t.width,
+        "--nmorph-private-pagination-min-width": t.minWidth
+      })
+    })), q = i(() => t.disabled || t.loading), k = () => {
+      n.value = String(Number(n.value) - 1);
+    }, w = () => {
+      n.value = String(Number(n.value) + 1);
+    }, n = b(String(t.modelValue)), u = i(() => {
       const e = Number(t.totalElementsQuantity), a = Number(t.elementsQuantityOnPage);
       return !Number.isFinite(e) || !Number.isFinite(a) || e <= 0 || a <= 0 ? 0 : Math.ceil(e / a);
-    }), i = n(
+    }), s = i(
       () => Array.from({ length: u.value }, (e, a) => ({ value: String(a + 1), label: String(a + 1) }))
-    ), s = g([]), v = n(() => {
-      const e = String(Math.max(1, Number(r.value) || 1));
+    ), p = b([]), f = i(() => {
+      const e = String(Math.max(1, Number(n.value) || 1));
       return [{ value: e, label: e }];
-    }), l = n(() => t.loading && s.value.length ? s.value : i.value.length ? i.value : v.value), q = n(() => t.loading || !t.hideOnSinglePage || u.value > 1);
-    c(r, (e) => {
-      p("update:model-value", Number(e));
-    }), c(
-      [i, () => t.loading],
+    }), r = i(() => t.loading && p.value.length ? p.value : s.value.length ? s.value : f.value), _ = i(() => t.loading || !t.hideOnSinglePage || u.value > 1);
+    d(n, (e) => {
+      c("update:model-value", Number(e));
+    }), d(
+      [s, () => t.loading],
       ([e, a]) => {
-        (e.length || !a) && (s.value = e);
+        (e.length || !a) && (p.value = e);
       },
       { immediate: !0 }
-    ), c(
+    ), d(
       () => t.modelValue,
       (e) => {
-        r.value = String(e);
+        n.value = String(e);
       }
-    ), c([u, () => t.loading], ([e, a]) => {
-      a || e <= 0 || Number(r.value) > e && (r.value = String(e));
+    ), d([u, () => t.loading], ([e, a]) => {
+      a || e <= 0 || Number(n.value) > e && (n.value = String(e));
     });
-    const x = n(() => Number(r.value) === 1), B = n(() => Number(r.value) >= l.value.length), w = n(() => {
-      const e = l.value.length, a = Number(r.value), o = t.maxVisiblePages;
-      if (e <= o)
-        return l.value;
-      const m = Math.floor(o / 2);
+    const B = i(() => Number(n.value) === 1), C = i(() => Number(n.value) >= r.value.length), M = i(() => {
+      const e = r.value.length, a = Number(n.value), l = t.maxVisiblePages;
+      if (e <= l)
+        return r.value;
+      const m = Math.floor(l / 2);
       return a <= m ? [
-        ...l.value.slice(0, o - 2),
+        ...r.value.slice(0, l - 2),
         { value: "next", label: "..." },
-        l.value[e - 1]
+        r.value[e - 1]
       ] : a >= e - m ? [
-        l.value[0],
+        r.value[0],
         { value: "prev", label: "..." },
-        ...l.value.slice(e - (o - 2))
+        ...r.value.slice(e - (l - 2))
       ] : [
-        l.value[0],
+        r.value[0],
         { value: "prev", label: "..." },
-        ...l.value.slice(a - m, a + m - 1),
+        ...r.value.slice(a - m, a + m - 1),
         { value: "next", label: "..." },
-        l.value[e - 1]
+        r.value[e - 1]
       ];
-    }), f = { props: t, emit: p, modifiers: S, thicknessHeightMap: d, paginationStyle: y, interactionDisabled: P, prevClick: k, nextClick: _, selectedPage: r, totalPages: u, pages: i, retainedPages: s, fallbackPages: v, effectivePages: l, show: q, blockPrevButton: x, blockNextButton: B, visiblePages: w, bigStepUpdate: (e) => {
-      const a = Number(r.value);
-      let o = e === "prev" ? a - t.fastForwardStep : a + t.fastForwardStep;
-      o <= 0 && (o = 1), o >= l.value.length && (o = l.value.length), r.value = String(o);
+    }), h = { props: t, emit: c, modifiers: y, thicknessHeightMap: g, fixedPagesCount: o, fixedContainerWidth: v, paginationStyle: P, interactionDisabled: q, prevClick: k, nextClick: w, selectedPage: n, totalPages: u, pages: s, retainedPages: p, fallbackPages: f, effectivePages: r, show: _, blockPrevButton: B, blockNextButton: C, visiblePages: M, bigStepUpdate: (e) => {
+      const a = Number(n.value);
+      let l = e === "prev" ? a - t.fastForwardStep : a + t.fastForwardStep;
+      l <= 0 && (l = 1), l >= r.value.length && (l = r.value.length), n.value = String(l);
     }, get NmorphRadioGroup() {
-      return I;
+      return R;
     }, get NmorphButton() {
-      return M;
+      return I;
     }, get NmorphIcon() {
       return F;
     }, get NmorphRadio() {
-      return V;
+      return W;
     }, get NmorphIconChevronDown() {
-      return R;
+      return D;
     } };
-    return Object.defineProperty(f, "__isScriptSetup", { enumerable: !1, value: !0 }), f;
+    return Object.defineProperty(h, "__isScriptSetup", { enumerable: !1, value: !0 }), h;
   }
 });
 export {
-  z as default
+  K as default
 };