@nmorph/nmorph-ui-kit 3.0.4 → 3.0.6

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

@@ -1,97 +1,93 @@
 import './NmorphPagination.css';
-import d from "./NmorphPagination.vue2.js";
-import { openBlock as e, createElementBlock as l, normalizeStyle as c, normalizeClass as t, createVNode as a, withCtx as i, Fragment as p, renderList as m, createBlock as s, createCommentVNode as h } from "vue";
+import c from "./NmorphPagination.vue2.js";
+import { openBlock as a, createElementBlock as l, normalizeStyle as d, normalizeClass as t, createVNode as i, withCtx as e, Fragment as h, renderList as m, createBlock as s, createCommentVNode as p } from "vue";
 /* empty css                      */
 import _ from "../../../_virtual/_plugin-vue_export-helper.js";
-function b(k, r, v, n, g, f) {
-  return n.show ? (e(), l(
-    "div",
-    {
-      key: 0,
-      class: t(n.modifiers),
-      style: c(n.paginationStyle)
-    },
-    [
-      a(n.NmorphButton, {
-        class: "nmorph-pagination__btn nmorph-pagination__prev-btn",
-        thickness: n.props.thickness,
-        disabled: n.blockPrevButton || n.props.disabled,
-        onClick: n.prevClick
-      }, {
-        default: i(() => [
-          a(n.NmorphIcon, { class: "nmorph-pagination__prev-icon" }, {
-            default: i(() => [
-              a(n.NmorphIconChevronDown)
-            ]),
-            _: 1
-            /* STABLE */
-          })
-        ]),
-        _: 1
-        /* STABLE */
-      }, 8, ["thickness", "disabled"]),
-      a(n.NmorphRadioGroup, {
-        modelValue: n.selectedPage,
-        "onUpdate:modelValue": r[0] || (r[0] = (o) => n.selectedPage = o),
-        class: "nmorph-pagination__page-group",
-        thickness: n.props.thickness,
-        disabled: n.props.disabled
-      }, {
-        default: i(() => [
-          (e(!0), l(
-            p,
-            null,
-            m(n.visiblePages, (o) => (e(), l("div", {
-              key: o.value,
-              class: "nmorph-pagination__page-btn-wrapper"
-            }, [
-              o.value === "prev" || o.value === "next" ? (e(), s(n.NmorphButton, {
-                key: 0,
-                class: t(`nmorph-pagination__page-btn nmorph-pagination__${o.value}`),
-                text: o.label,
-                thickness: n.props.thickness,
-                disabled: n.props.disabled,
-                onClick: (N) => n.bigStepUpdate(o.value)
-              }, null, 8, ["class", "text", "thickness", "disabled", "onClick"])) : (e(), s(n.NmorphRadio, {
-                key: 1,
-                value: o.value,
-                label: o.label,
-                class: "nmorph-pagination__page-btn",
-                thickness: n.props.thickness,
-                disabled: n.props.disabled
-              }, null, 8, ["value", "label", "thickness", "disabled"]))
-            ]))),
-            128
-            /* KEYED_FRAGMENT */
-          ))
-        ]),
-        _: 1
-        /* STABLE */
-      }, 8, ["modelValue", "thickness", "disabled"]),
-      a(n.NmorphButton, {
-        class: "nmorph-pagination__btn nmorph-pagination__next-btn",
-        thickness: n.props.thickness,
-        disabled: n.blockNextButton || n.props.disabled,
-        onClick: n.nextClick
-      }, {
-        default: i(() => [
-          a(n.NmorphIcon, { class: "nmorph-pagination__next-icon" }, {
-            default: i(() => [
-              a(n.NmorphIconChevronDown)
-            ]),
-            _: 1
-            /* STABLE */
-          })
-        ]),
-        _: 1
-        /* STABLE */
-      }, 8, ["thickness", "disabled"])
-    ],
-    6
-    /* CLASS, STYLE */
-  )) : h("v-if", !0);
+const b = ["aria-busy"];
+function k(v, r, g, n, f, N) {
+  return n.show ? (a(), l("div", {
+    key: 0,
+    class: t(n.modifiers),
+    style: d(n.paginationStyle),
+    "aria-busy": n.props.loading || void 0
+  }, [
+    i(n.NmorphButton, {
+      class: "nmorph-pagination__btn nmorph-pagination__prev-btn",
+      thickness: n.props.thickness,
+      disabled: n.blockPrevButton || n.interactionDisabled,
+      onClick: n.prevClick
+    }, {
+      default: e(() => [
+        i(n.NmorphIcon, { class: "nmorph-pagination__prev-icon" }, {
+          default: e(() => [
+            i(n.NmorphIconChevronDown)
+          ]),
+          _: 1
+          /* STABLE */
+        })
+      ]),
+      _: 1
+      /* STABLE */
+    }, 8, ["thickness", "disabled"]),
+    i(n.NmorphRadioGroup, {
+      modelValue: n.selectedPage,
+      "onUpdate:modelValue": r[0] || (r[0] = (o) => n.selectedPage = o),
+      class: "nmorph-pagination__page-group",
+      thickness: n.props.thickness,
+      disabled: n.interactionDisabled
+    }, {
+      default: e(() => [
+        (a(!0), l(
+          h,
+          null,
+          m(n.visiblePages, (o) => (a(), l("div", {
+            key: o.value,
+            class: "nmorph-pagination__page-btn-wrapper"
+          }, [
+            o.value === "prev" || o.value === "next" ? (a(), s(n.NmorphButton, {
+              key: 0,
+              class: t(`nmorph-pagination__page-btn nmorph-pagination__${o.value}`),
+              text: o.label,
+              thickness: n.props.thickness,
+              disabled: n.interactionDisabled,
+              onClick: (x) => n.bigStepUpdate(o.value)
+            }, null, 8, ["class", "text", "thickness", "disabled", "onClick"])) : (a(), s(n.NmorphRadio, {
+              key: 1,
+              value: o.value,
+              label: o.label,
+              class: "nmorph-pagination__page-btn",
+              thickness: n.props.thickness,
+              disabled: n.interactionDisabled
+            }, null, 8, ["value", "label", "thickness", "disabled"]))
+          ]))),
+          128
+          /* KEYED_FRAGMENT */
+        ))
+      ]),
+      _: 1
+      /* STABLE */
+    }, 8, ["modelValue", "thickness", "disabled"]),
+    i(n.NmorphButton, {
+      class: "nmorph-pagination__btn nmorph-pagination__next-btn",
+      thickness: n.props.thickness,
+      disabled: n.blockNextButton || n.interactionDisabled,
+      onClick: n.nextClick
+    }, {
+      default: e(() => [
+        i(n.NmorphIcon, { class: "nmorph-pagination__next-icon" }, {
+          default: e(() => [
+            i(n.NmorphIconChevronDown)
+          ]),
+          _: 1
+          /* STABLE */
+        })
+      ]),
+      _: 1
+      /* STABLE */
+    }, 8, ["thickness", "disabled"])
+  ], 14, b)) : p("v-if", !0);
 }
-const P = /* @__PURE__ */ _(d, [["render", b], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-pagination/NmorphPagination.vue"]]);
+const u = /* @__PURE__ */ _(c, [["render", k], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-pagination/NmorphPagination.vue"]]);
 export {
-  P as default
+  u as default
 };

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

@@ -1,77 +1,104 @@
 import './NmorphPagination.css';
-import { defineComponent as _, computed as l, ref as k, watch as q } from "vue";
-import { useModifiers as x } from "../../../utils/create-modifiers.js";
-import w from "../../form/nmorph-radio/NmorphRadio.vue.js";
-import B from "../../basic/nmorph-icon/NmorphIcon.vue.js";
-import O from "../../basic/nmorph-button/NmorphButton.vue.js";
-import Q from "../../form/nmorph-radio-group/NmorphRadioGroup.vue.js";
+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 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 U = /* @__PURE__ */ _({
+const z = /* @__PURE__ */ O({
   __name: "NmorphPagination",
   props: {
     totalElementsQuantity: { type: Number, required: !0 },
     modelValue: { type: Number, required: !1, default: 1 },
     elementsQuantityOnPage: { type: Number, required: !1, default: 2 },
     disabled: { type: Boolean, required: !1, default: !1 },
+    loading: { type: Boolean, required: !1, default: !1 },
     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" }
   },
   emits: ["update:model-value"],
-  setup(c, { expose: d, emit: f }) {
-    d();
-    const t = c, i = f, v = l(
-      () => x({
-        "nmorph-pagination": [t.disabled && "disabled"]
+  setup(b, { expose: h, emit: N }) {
+    h();
+    const t = b, p = N, S = n(
+      () => Q({
+        "nmorph-pagination": [t.disabled && "disabled", t.loading && "loading"]
       })
-    ), s = {
+    ), d = {
       thick: "var(--thick-component)",
       basic: "var(--basic-component)",
       thin: "var(--thin-component)"
-    }, g = l(() => ({
-      "--nmorph-private-pagination-height": s[t.thickness]
-    })), h = () => {
-      a.value = String(Number(a.value) - 1);
-    }, b = () => {
-      a.value = String(Number(a.value) + 1);
-    }, a = k(String(t.modelValue)), e = l(() => {
-      const r = t.totalElementsQuantity / t.elementsQuantityOnPage + 1, o = r % 1 === 0 ? -1 : 0;
-      return Array.from({ length: r + o }, (u, p) => ({ value: String(p + 1), label: String(p + 1) }));
-    }), N = l(() => t.hideOnSinglePage || t.totalElementsQuantity / t.elementsQuantityOnPage > 1);
-    q(a, (r) => {
-      i("update:model-value", Number(r));
+    }, 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(() => {
+      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(
+      () => 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));
+      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],
+      ([e, a]) => {
+        (e.length || !a) && (s.value = e);
+      },
+      { immediate: !0 }
+    ), c(
+      () => t.modelValue,
+      (e) => {
+        r.value = String(e);
+      }
+    ), c([u, () => t.loading], ([e, a]) => {
+      a || e <= 0 || Number(r.value) > e && (r.value = String(e));
     });
-    const y = l(() => Number(a.value) === 1), S = l(() => e.value.length === Number(a.value)), P = l(() => {
-      const r = e.value.length, o = Number(a.value), n = t.maxVisiblePages;
-      if (r <= n)
-        return e.value;
-      const u = Math.floor(n / 2);
-      return o <= u ? [...e.value.slice(0, n - 2), { value: "next", label: "..." }, e.value[r - 1]] : o >= r - u ? [e.value[0], { value: "prev", label: "..." }, ...e.value.slice(r - (n - 2))] : [
-        e.value[0],
+    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);
+      return a <= m ? [
+        ...l.value.slice(0, o - 2),
+        { value: "next", label: "..." },
+        l.value[e - 1]
+      ] : a >= e - m ? [
+        l.value[0],
+        { value: "prev", label: "..." },
+        ...l.value.slice(e - (o - 2))
+      ] : [
+        l.value[0],
         { value: "prev", label: "..." },
-        ...e.value.slice(o - u, o + u - 1),
+        ...l.value.slice(a - m, a + m - 1),
         { value: "next", label: "..." },
-        e.value[r - 1]
+        l.value[e - 1]
       ];
-    }), m = { props: t, emit: i, modifiers: v, thicknessHeightMap: s, paginationStyle: g, prevClick: h, nextClick: b, selectedPage: a, pages: e, show: N, blockPrevButton: y, blockNextButton: S, visiblePages: P, bigStepUpdate: (r) => {
-      const o = Number(a.value);
-      let n = r === "prev" ? o - t.fastForwardStep : o + t.fastForwardStep;
-      n <= 0 && (n = 1), n >= e.value.length && (n = e.value.length), a.value = String(n);
+    }), 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);
     }, get NmorphRadioGroup() {
-      return Q;
+      return I;
     }, get NmorphButton() {
-      return O;
+      return M;
     }, get NmorphIcon() {
-      return B;
+      return F;
     }, get NmorphRadio() {
-      return w;
+      return V;
     }, get NmorphIconChevronDown() {
       return R;
     } };
-    return Object.defineProperty(m, "__isScriptSetup", { enumerable: !1, value: !0 }), m;
+    return Object.defineProperty(f, "__isScriptSetup", { enumerable: !1, value: !0 }), f;
   }
 });
 export {
-  U as default
+  z as default
 };