v-page 3.1.0 → 3.2.1

package/README.md

@@ -73,7 +73,7 @@ import { PaginationBar } from 'v-page'
 <script setup lang='ts'>
 import { ref } from 'vue'
 import { PaginationBar } from 'v-page'
-import type { PageInfo } from 'v-page/types'
+import type { PageInfo } from 'v-page'
 // set default page to 3
 const pageNumber = ref<number>(3)
 const totalRow = ref<number>(100)

package/dist/v-page.js

@@ -1,231 +1,354 @@
-(function(){"use strict";try{if(typeof document<"u"){var i=document.createElement("style");i.appendChild(document.createTextNode(".v-pagination{display:flex;justify-content:flex-start;box-sizing:border-box}.v-pagination--right{justify-content:flex-end}.v-pagination--center{justify-content:center}.v-pagination.v-pagination--disabled a,.v-pagination.v-pagination--disabled select{color:#999!important}.v-pagination.v-pagination--disabled.v-pagination--border a,.v-pagination.v-pagination--disabled.v-pagination--border a:hover{background-color:#fafafa}.v-pagination ul{margin:0;padding:0;display:flex}.v-pagination ul li{list-style:none;display:flex}.v-pagination ul li.v-pagination__info a,.v-pagination ul li.v-pagination__list a{cursor:default;color:#333}.v-pagination ul li a{padding:.3rem .6rem;text-decoration:none;line-height:1.3;font-size:14px;margin:0;outline:0;color:#333;border-radius:.25rem;display:inline-flex;align-items:center}.v-pagination ul li:not(.active):not(.disabled):not(.v-pagination__list):not(.v-pagination__info):not(.v-pagination__slot) a:hover{background-color:#fafafa}.v-pagination ul li.active a{background-color:#eee;color:#aaa}.v-pagination ul li.disabled a{color:#999!important;cursor:default}.v-pagination ul li select{width:auto!important;font-size:12px;padding:0;outline:0;margin:0 0 0 5px;border:1px solid #ccc;color:#333;border-radius:.3rem}.v-pagination.v-pagination--border ul{box-shadow:0 1px 2px #0000000d;border-radius:.25rem}.v-pagination.v-pagination--border ul li:not(:first-child) a{margin-left:-1px}.v-pagination.v-pagination--border ul li a{border:1px solid #DEE2E6;border-radius:0}.v-pagination.v-pagination--border ul li:first-child>a{border-bottom-left-radius:.25rem;border-top-left-radius:.25rem}.v-pagination.v-pagination--border ul li:last-child>a{border-top-right-radius:.25rem;border-bottom-right-radius:.25rem}.v-pagination.v-pagination--border ul li.active a{color:#999;background-color:#eee}")),document.head.appendChild(i)}}catch(a){console.error("vite-plugin-css-injected-by-js",a)}})();
-import { defineComponent as U, toRefs as V, ref as P, computed as v, watch as x, onMounted as Z, h as o } from "vue";
-const g = 1, k = 5, C = 10, F = [C, 20, 50, 100], G = 0, [ee, ae, H] = ["left", "center", "right"], [
-  J,
-  L,
-  q,
-  K,
-  Q
-] = ["cn", "en", "de", "jp", "pt"], I = {
-  [J]: {
-    pageLength: "每页记录数 ",
-    pageInfo: "当前显示第 #pageNumber# / #totalPage# 页（共#totalRow#条记录）",
+(function(){"use strict";try{if(typeof document<"u"){var i=document.createElement("style");i.appendChild(document.createTextNode(".v-pagination{display:flex;justify-content:flex-start;box-sizing:border-box}.v-pagination--right{justify-content:flex-end}.v-pagination--center{justify-content:center}.v-pagination.v-pagination--disabled a,.v-pagination.v-pagination--disabled select{color:#ddd!important}.v-pagination.v-pagination--disabled .v-pagination__item a{cursor:default!important}.v-pagination.v-pagination--disabled .v-pagination__item a:hover{background-color:transparent}.v-pagination.v-pagination--disabled.v-pagination--border ul{background-color:#fafafa}.v-pagination.v-pagination--circle .v-pagination__item a{border-radius:50rem;border:1px solid transparent;min-height:30px;min-width:30px;padding:0 .6rem;display:flex;align-items:center;justify-content:center}.v-pagination.v-pagination--circle .v-pagination__item a:hover{border:1px solid #f7f7f7}.v-pagination.v-pagination--circle .v-pagination__item.disabled a:hover{border:1px solid transparent}.v-pagination.v-pagination--circle .v-pagination__item.active a{border:1px solid #ddd!important;background-color:transparent!important;box-shadow:0 1px 3px #0000001a}.v-pagination ul{margin:0;padding:0;display:flex}.v-pagination ul li{list-style:none;display:flex}.v-pagination ul li a{padding:.3rem .6rem;text-decoration:none;line-height:1.3;font-size:14px;margin:0;outline:0;color:#333;border-radius:.5rem;display:inline-flex;align-items:center;cursor:default}.v-pagination ul li.v-pagination__list a,.v-pagination ul li.v-pagination__info a{color:#888}.v-pagination ul li.active a,.v-pagination ul li.disabled a{cursor:default!important}.v-pagination ul li.v-pagination__item a:hover{background-color:#f7f7f7;color:#000;cursor:pointer}.v-pagination ul li.active a{background-color:#eee!important;color:#aaa}.v-pagination ul li.active a:hover{color:#aaa}.v-pagination ul li.disabled a{color:#ddd!important}.v-pagination ul li.disabled a:hover{background-color:transparent}.v-pagination ul li select{width:auto!important;font-size:12px;padding:0;outline:0;margin:0 0 0 5px;border:1px solid #ccc;color:#333;border-radius:.3rem}.v-pagination.v-pagination--border ul{box-shadow:0 1px 2px #0000000d;border-radius:.5rem}.v-pagination.v-pagination--border ul li a{border:1px solid #DEE2E6;border-left:0;border-radius:0}.v-pagination.v-pagination--border ul li:first-child>a{border-bottom-left-radius:.5rem;border-top-left-radius:.5rem;border-left:1px solid #DEE2E6}.v-pagination.v-pagination--border ul li:last-child>a{border-top-right-radius:.5rem;border-bottom-right-radius:.5rem}.v-pagination.v-pagination--border ul li.active a{color:#aaa;background-color:#eee}")),document.head.appendChild(i)}}catch(a){console.error("vite-plugin-css-injected-by-js",a)}})();
+import { toRefs as H, ref as A, computed as b, watch as w, onMounted as J, createVNode as t, isVNode as q, defineComponent as K } from "vue";
+const [
+  Q,
+  h,
+  W,
+  X,
+  Y
+] = ["cn", "en", "de", "jp", "pt"], V = {
+  [Q]: {
+    pageLength: "每页记录数",
+    pageInfo: "第 #pageNumber#/#totalPage# 页(共#totalRow#条记录)",
     first: "首页",
-    previous: "«",
-    next: "»",
     last: "尾页",
     all: "全部"
   },
-  [L]: {
-    pageLength: "Page length ",
-    pageInfo: "Current #pageNumber# / #totalPage# (total #totalRow# records)",
+  [h]: {
+    pageLength: "Per page",
+    pageInfo: "Page #pageNumber#/#totalPage# (total #totalRow# records)",
     first: "First",
-    previous: "«",
-    next: "»",
     last: "Last",
     all: "All"
   },
-  [q]: {
-    pageLength: "Seitenlänge ",
-    pageInfo: "Aktuell #pageNumber# / #totalPage# (gesamt #totalRow# Aufzeichnungen)",
+  [W]: {
+    pageLength: "Seitenlänge",
+    pageInfo: "Aktuell #pageNumber#/#totalPage# (gesamt #totalRow# Aufzeichnungen)",
     first: "Zuerst",
-    previous: "«",
-    next: "»",
     last: "Letzte",
     all: "Alle"
   },
-  [K]: {
+  [X]: {
     pageLength: "ページごとの記録数",
-    pageInfo: "現在の第 #pageNumber# / #totalPage# ページ（全部で #totalRow# 条の記録）",
+    pageInfo: "現在の第 #pageNumber#/#totalPage# ページ(全部で #totalRow# 条の記録)",
     first: "トップページ",
-    previous: "«",
-    next: "»",
     last: "尾のページ",
     all: "すべて"
   },
-  [Q]: {
-    pageLength: "Resultados por página ",
-    pageInfo: "#pageNumber# / #totalPage# (total de #totalRow#)",
+  [Y]: {
+    pageLength: "Resultados por página",
+    pageInfo: "#pageNumber#/#totalPage# (total de #totalRow#)",
     first: "Início",
-    previous: "<",
-    next: ">",
     last: "Fim",
     all: "Todos"
   }
-};
-function W(e, n, t) {
-  if (n <= t) return g;
-  const c = Math.floor(t / 2), s = n - t + 1, u = e - c;
-  return u < g ? g : u > s ? s : u;
+}, f = 1, $ = 5, R = 10, F = [R, 20, 50, 100], z = 0, [ie, oe, ee] = ["left", "center", "right"];
+function ae(e, u, l) {
+  if (u <= l) return f;
+  const d = Math.floor(l / 2), r = u - l + 1, s = e - d;
+  return s < f ? f : s > r ? r : s;
+}
+function te(e, u, l) {
+  const d = ae(e, u, l);
+  return Array.from({ length: l }).map((r, s) => d + s).filter((r) => r >= f && r <= u);
 }
-function X(e, n, t) {
-  const c = W(e, n, t);
-  return Array.from({ length: t }).map((s, u) => c + u).filter((s) => s >= g && s <= n);
+function le(e = h) {
+  const u = String(e).toLowerCase();
+  return V[Object.hasOwn(V, u) ? u : h];
 }
-function Y(e = L) {
-  const n = String(e).toLowerCase();
-  return n in I ? I[n] : I[L];
+function E(e) {
+  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !q(e);
 }
-const A = U({
+function ne(e, u, l) {
+  const {
+    pageSizeOptions: d,
+    pageSizeMenu: r,
+    totalRow: s
+  } = H(e), n = A(0), v = A($), i = A(e.pageSize ?? R), p = le(e.language), m = b(() => {
+    if (!d.value) return [];
+    const a = Array.from(Array.isArray(r.value) && r.value.length > 0 ? r.value : F);
+    return i.value !== 0 && !a.includes(i.value) && a.push(i.value), a.sort((o, g) => o - g);
+  }), c = b(() => i.value === z ? f : Math.ceil(s.value / i.value)), y = b(() => te(n.value, c.value, v.value)), C = b(() => ({
+    "v-pagination": !0,
+    "v-pagination--right": e.align === "right",
+    "v-pagination--center": e.align === "center",
+    "v-pagination--disabled": e.disabled,
+    "v-pagination--border": e.border,
+    "v-pagination--circle": !e.border && e.circle
+  })), I = b(() => n.value === f), L = b(() => n.value === c.value);
+  w(() => e.modelValue, N), w(() => e.pageSize, B);
+  function N(a = f) {
+    if (e.disabled || typeof a != "number") return;
+    let o = a < f ? f : a;
+    a > c.value && c.value > 0 && (o = c.value), o !== n.value && (n.value = o, u("update:modelValue", n.value), O());
+  }
+  function B(a) {
+    if (typeof a == "number" && !(a < 0) && a !== i.value) {
+      if (i.value = a, u("update:pageSize", i.value), n.value === f)
+        return O();
+      N(f);
+    }
+  }
+  function O() {
+    u("change", {
+      pageNumber: n.value,
+      pageSize: Number(i.value),
+      totalPage: c.value
+    });
+  }
+  function S(a, {
+    slots: o
+  }) {
+    var g;
+    return t("a", {
+      href: "javascript:void(0)"
+    }, [(g = o == null ? void 0 : o.default) == null ? void 0 : g.call(o)]);
+  }
+  function M() {
+    if (!d.value) return null;
+    const a = () => m.value.map((g) => t("option", {
+      key: g,
+      value: g,
+      selected: i.value === g
+    }, [g])), o = () => e.displayAll ? t("option", {
+      value: z,
+      selected: i.value === z
+    }, [p.all]) : null;
+    return t("li", {
+      class: "v-pagination__list"
+    }, [t(S, null, {
+      default: () => [t("span", null, [p.pageLength]), t("select", {
+        disabled: e.disabled,
+        onChange: (g) => B(Number(g.target.value))
+      }, [t(a, null, null), t(o, null, null)])]
+    })]);
+  }
+  function T() {
+    if (!e.info) return null;
+    const a = p.pageInfo.replace("#pageNumber#", n.value).replace("#totalPage#", c.value).replace("#totalRow#", s.value);
+    return t("li", {
+      class: "v-pagination__info"
+    }, [t(S, null, E(a) ? a : {
+      default: () => [a]
+    })]);
+  }
+  function j() {
+    let a;
+    if (!Object.hasOwn(l, "default")) return null;
+    const o = {
+      pageNumber: n.value,
+      pageSize: i.value,
+      totalPage: c.value,
+      totalRow: s.value,
+      isFirst: I.value,
+      isLast: L.value
+    };
+    return t("li", {
+      class: "v-pagination__slot"
+    }, [t(S, null, E(a = l.default(o)) ? a : {
+      default: () => [a]
+    })]);
+  }
+  function P({
+    classes: a,
+    pageNumberValue: o,
+    name: g,
+    hasItem: Z = !0
+  }) {
+    return Z ? t("li", {
+      class: ["v-pagination__item", ...a]
+    }, [t(S, {
+      onClick: () => N(o)
+    }, E(g) ? g : {
+      default: () => [g]
+    })]) : null;
+  }
+  function G() {
+    return e.pageNumber ? y.value.map((a) => t(P, {
+      key: a,
+      classes: [{
+        active: a === n.value
+      }],
+      pageNumberValue: a,
+      name: a
+    }, null)) : null;
+  }
+  function k() {
+    return t(P, {
+      classes: ["v-pagination__first", {
+        disabled: I.value
+      }],
+      pageNumberValue: f,
+      name: p.first,
+      hasItem: e.first
+    }, null);
+  }
+  function D() {
+    return t(P, {
+      classes: ["v-pagination__previous", {
+        disabled: I.value
+      }],
+      pageNumberValue: n.value - 1,
+      name: "«"
+    }, null);
+  }
+  function x() {
+    return t(P, {
+      classes: ["v-pagination__next", {
+        disabled: L.value
+      }],
+      pageNumberValue: n.value + 1,
+      name: "»"
+    }, null);
+  }
+  function U() {
+    return t(P, {
+      classes: ["v-pagination__last", {
+        disabled: L.value
+      }],
+      pageNumberValue: c.value,
+      name: p.last,
+      hasItem: e.last
+    }, null);
+  }
+  return J(() => N(e.modelValue || f)), {
+    containerClasses: C,
+    totalPage: c,
+    current: n,
+    pageNumbers: y,
+    PageSizeOptions: M,
+    PageInformation: T,
+    PageSlot: j,
+    PageNumberItems: G,
+    FirstPageItem: k,
+    PreviousPageItem: D,
+    NextPageItem: x,
+    LastPageItem: U
+  };
+}
+const _ = /* @__PURE__ */ K({
   name: "PaginationBar",
   props: {
-    modelValue: { type: Number, default: 0 },
-    totalRow: { type: Number, default: 0 },
-    pageSize: { type: Number, default: C },
-    language: { type: String, default: L },
+    modelValue: {
+      type: Number,
+      default: 0
+    },
+    pageSize: {
+      type: Number,
+      default: R
+    },
+    totalRow: {
+      type: Number,
+      default: 0
+    },
+    language: {
+      type: String,
+      default: h
+    },
     /**
      * Pagination alignment direction
      * `left`, `center` and `right`(default)
      */
-    align: { type: String, default: H },
+    align: {
+      type: String,
+      default: ee
+    },
     /** Page size list */
-    pageSizeMenu: { type: [Array], default: () => F },
+    pageSizeMenu: {
+      type: [Array],
+      default: () => F
+    },
     /** Display page size menu panel */
-    pageSizeOptions: { type: Boolean, default: !0 },
-    disabled: { type: Boolean, default: !1 },
-    border: { type: Boolean, default: !1 },
-    info: { type: Boolean, default: !0 },
-    pageNumber: { type: Boolean, default: !0 },
+    pageSizeOptions: {
+      type: Boolean,
+      default: !0
+    },
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    /** Round style page number button */
+    circle: {
+      type: Boolean,
+      default: !1
+    },
+    border: {
+      type: Boolean,
+      default: !1
+    },
+    info: {
+      type: Boolean,
+      default: !0
+    },
+    pageNumber: {
+      type: Boolean,
+      default: !0
+    },
     /** first page button */
-    first: { type: Boolean, default: !0 },
+    first: {
+      type: Boolean,
+      default: !0
+    },
     /** last page button */
-    last: { type: Boolean, default: !0 },
+    last: {
+      type: Boolean,
+      default: !0
+    },
     /**
      * Display all records
      *
      * will add `all` option in page size list
      * and the page size will be 0
      */
-    displayAll: { type: Boolean, default: !1 },
+    displayAll: {
+      type: Boolean,
+      default: !1
+    },
     /** Hide pagination when only have one page */
-    hideOnSinglePage: { type: Boolean, default: !1 }
+    hideOnSinglePage: {
+      type: Boolean,
+      default: !1
+    }
   },
   emits: ["update:modelValue", "update:pageSize", "change"],
-  setup(e, { emit: n, slots: t, expose: c }) {
-    const { pageSizeOptions: s, pageSizeMenu: u, totalRow: b } = V(e), l = P(0), m = P(-1), S = P(k), f = Y(e.language), T = v(() => Array.isArray(u.value) && u.value.length > 0 ? u.value : F), p = P(e.pageSize || C), r = v(() => p.value === G ? g : Math.ceil(b.value / p.value)), B = v(() => X(
-      l.value,
-      r.value,
-      S.value
-    )), O = v(
-      () => f.pageInfo.replace("#pageNumber#", l.value).replace("#totalPage#", r.value).replace("#totalRow#", b.value)
-    ), D = v(() => ({
-      "v-pagination": !0,
-      "v-pagination--border": e.border,
-      "v-pagination--right": e.align === "right",
-      "v-pagination--center": e.align === "center",
-      "v-pagination--disabled": e.disabled
-    })), E = v(() => l.value === g), R = v(() => l.value === r.value);
-    x(() => e.modelValue, (a) => y(a)), x(() => e.pageSize, M);
-    function y(a = g) {
-      if (e.disabled || typeof a != "number") return;
-      let d = a < g ? g : a;
-      a > r.value && r.value > 0 && (d = r.value), !(d === l.value && p.value === m.value) && (l.value = d, m.value = p.value, w());
-    }
-    function w() {
-      n("change", {
-        pageNumber: l.value,
-        pageSize: Number(p.value),
-        totalPage: r.value
-      }), n("update:modelValue", l.value), n("update:pageSize", p.value);
-    }
-    function M(a) {
-      a < 0 || a !== p.value && (p.value = a, y());
-    }
-    function _(a, d, z) {
-      return o("li", { class: a }, [o("a", {
-        href: "javascript:void(0)",
-        onClick: () => y(d)
-      }, z)]);
-    }
-    return Z(() => {
-      y(e.modelValue || g);
-    }), c({
-      goPage: y,
-      current: l,
+  setup(e, {
+    emit: u,
+    slots: l
+  }) {
+    const {
+      containerClasses: d,
       totalPage: r,
-      pageNumbers: B,
-      reload: w
-    }), () => {
-      if (e.hideOnSinglePage && r.value <= 1) return;
-      const a = [];
-      if (s.value) {
-        const i = {
-          disabled: e.disabled,
-          onChange: (N) => M(Number(N.target.value))
-        }, h = T.value.map(
-          (N) => o("option", { value: N }, N)
-        );
-        e.displayAll && h.push(
-          o("option", { value: G }, f.all)
-        );
-        const j = o("li", { class: "v-pagination__list" }, [
-          o("a", { href: "javascript:void(0)" }, [
-            o("span", f.pageLength),
-            o("select", i, h)
-          ])
-        ]);
-        a.push(j);
-      }
-      if (e.info && a.push(
-        o("li", { class: "v-pagination__info" }, [
-          o("a", { href: "javascript:void(0)" }, O.value)
-        ])
-      ), "default" in t) {
-        const i = {
-          pageNumber: l.value,
-          pageSize: p.value,
-          totalPage: r.value,
-          totalRow: b.value,
-          isFirst: E.value,
-          isLast: R.value
-        }, h = o("li", { class: "v-pagination__slot" }, [
-          o("a", t.default(i))
-        ]);
-        a.push(h);
-      }
-      if (e.first) {
-        const i = ["v-pagination__first", { disabled: E.value }];
-        a.push(_(i, g, f.first));
-      }
-      const d = ["v-pagination__previous", { disabled: E.value }];
-      a.push(
-        _(d, l.value - 1, f.previous)
-      ), e.pageNumber && a.push(
-        ...B.value.map((i) => {
-          const h = { active: i === l.value };
-          return _(h, i, i);
-        })
-      );
-      const z = ["v-pagination__next", { disabled: R.value }];
-      if (a.push(
-        _(z, l.value + 1, f.next)
-      ), e.last) {
-        const i = ["v-pagination__last", { disabled: R.value }];
-        a.push(
-          _(i, r.value, f.last)
-        );
-      }
-      return o("div", { class: D.value }, [o("ul", a)]);
-    };
+      PageSizeOptions: s,
+      PageInformation: n,
+      PageSlot: v,
+      PageNumberItems: i,
+      FirstPageItem: p,
+      PreviousPageItem: m,
+      NextPageItem: c,
+      LastPageItem: y
+    } = ne(e, u, l);
+    return () => e.hideOnSinglePage && r.value <= 1 ? null : t("div", {
+      class: d.value
+    }, [t("ul", null, [t(s, null, null), t(n, null, null), t(v, null, null), t(p, null, null), t(m, null, null), t(i, null, null), t(c, null, null), t(y, null, null)])]);
   }
 });
-A.install = (e, n = {}) => {
-  if (Object.keys(n).length) {
-    const { props: t } = A, {
-      language: c,
-      align: s,
-      info: u,
-      border: b,
-      pageNumber: l,
-      first: m,
-      last: S,
-      pageSizeMenu: f
-    } = n;
-    c && (t.language.default = c), s && (t.align.default = s), typeof u == "boolean" && (t.info.default = u), typeof b == "boolean" && (t.border.default = b), typeof l == "boolean" && (t.pageNumber.default = l), typeof m == "boolean" && (t.first.default = m), typeof S == "boolean" && (t.last.default = S), typeof f < "u" && (t.pageSizeMenu.default = f);
-  }
-  e.component(A.name, A);
+_.install = (e, u = {}) => {
+  if (Object.keys(u).length) {
+    const { props: l } = _, {
+      language: d,
+      align: r,
+      info: s,
+      border: n,
+      pageNumber: v,
+      first: i,
+      last: p,
+      pageSizeMenu: m
+    } = u;
+    d && (l.language.default = d), r && (l.align.default = r), typeof s == "boolean" && (l.info.default = s), typeof n == "boolean" && (l.border.default = n), typeof v == "boolean" && (l.pageNumber.default = v), typeof i == "boolean" && (l.first.default = i), typeof p == "boolean" && (l.last.default = p), typeof m < "u" && (l.pageSizeMenu.default = m);
+  }
+  e.component(_.name, _);
 };
 export {
-  A as PaginationBar,
-  A as default
+  _ as PaginationBar,
+  _ as default
 };

package/dist/v-page.umd.cjs

@@ -1,2 +1,2 @@
-(function(){"use strict";try{if(typeof document<"u"){var i=document.createElement("style");i.appendChild(document.createTextNode(".v-pagination{display:flex;justify-content:flex-start;box-sizing:border-box}.v-pagination--right{justify-content:flex-end}.v-pagination--center{justify-content:center}.v-pagination.v-pagination--disabled a,.v-pagination.v-pagination--disabled select{color:#999!important}.v-pagination.v-pagination--disabled.v-pagination--border a,.v-pagination.v-pagination--disabled.v-pagination--border a:hover{background-color:#fafafa}.v-pagination ul{margin:0;padding:0;display:flex}.v-pagination ul li{list-style:none;display:flex}.v-pagination ul li.v-pagination__info a,.v-pagination ul li.v-pagination__list a{cursor:default;color:#333}.v-pagination ul li a{padding:.3rem .6rem;text-decoration:none;line-height:1.3;font-size:14px;margin:0;outline:0;color:#333;border-radius:.25rem;display:inline-flex;align-items:center}.v-pagination ul li:not(.active):not(.disabled):not(.v-pagination__list):not(.v-pagination__info):not(.v-pagination__slot) a:hover{background-color:#fafafa}.v-pagination ul li.active a{background-color:#eee;color:#aaa}.v-pagination ul li.disabled a{color:#999!important;cursor:default}.v-pagination ul li select{width:auto!important;font-size:12px;padding:0;outline:0;margin:0 0 0 5px;border:1px solid #ccc;color:#333;border-radius:.3rem}.v-pagination.v-pagination--border ul{box-shadow:0 1px 2px #0000000d;border-radius:.25rem}.v-pagination.v-pagination--border ul li:not(:first-child) a{margin-left:-1px}.v-pagination.v-pagination--border ul li a{border:1px solid #DEE2E6;border-radius:0}.v-pagination.v-pagination--border ul li:first-child>a{border-bottom-left-radius:.25rem;border-top-left-radius:.25rem}.v-pagination.v-pagination--border ul li:last-child>a{border-top-right-radius:.25rem;border-bottom-right-radius:.25rem}.v-pagination.v-pagination--border ul li.active a{color:#999;background-color:#eee}")),document.head.appendChild(i)}}catch(a){console.error("vite-plugin-css-injected-by-js",a)}})();
-(function(p,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(p=typeof globalThis<"u"?globalThis:p||self,e(p.VPage={},p.Vue))})(this,function(p,e){"use strict";const L=[10,20,50,100],N=0,[K,Q,C]=["left","center","right"],[G,y,M,w,D]=["cn","en","de","jp","pt"],P={[G]:{pageLength:"每页记录数 ",pageInfo:"当前显示第 #pageNumber# / #totalPage# 页（共#totalRow#条记录）",first:"首页",previous:"«",next:"»",last:"尾页",all:"全部"},[y]:{pageLength:"Page length ",pageInfo:"Current #pageNumber# / #totalPage# (total #totalRow# records)",first:"First",previous:"«",next:"»",last:"Last",all:"All"},[M]:{pageLength:"Seitenlänge ",pageInfo:"Aktuell #pageNumber# / #totalPage# (gesamt #totalRow# Aufzeichnungen)",first:"Zuerst",previous:"«",next:"»",last:"Letzte",all:"Alle"},[w]:{pageLength:"ページごとの記録数",pageInfo:"現在の第 #pageNumber# / #totalPage# ページ（全部で #totalRow# 条の記録）",first:"トップページ",previous:"«",next:"»",last:"尾のページ",all:"すべて"},[D]:{pageLength:"Resultados por página ",pageInfo:"#pageNumber# / #totalPage# (total de #totalRow#)",first:"Início",previous:"<",next:">",last:"Fim",all:"Todos"}};function U(a,o,n){if(o<=n)return 1;const d=Math.floor(n/2),s=o-n+1,u=a-d;return u<1?1:u>s?s:u}function x(a,o,n){const d=U(a,o,n);return Array.from({length:n}).map((s,u)=>d+u).filter(s=>s>=1&&s<=o)}function Z(a=y){const o=String(a).toLowerCase();return o in P?P[o]:P[y]}const h=e.defineComponent({name:"PaginationBar",props:{modelValue:{type:Number,default:0},totalRow:{type:Number,default:0},pageSize:{type:Number,default:10},language:{type:String,default:y},align:{type:String,default:C},pageSizeMenu:{type:[Array],default:()=>L},pageSizeOptions:{type:Boolean,default:!0},disabled:{type:Boolean,default:!1},border:{type:Boolean,default:!1},info:{type:Boolean,default:!0},pageNumber:{type:Boolean,default:!0},first:{type:Boolean,default:!0},last:{type:Boolean,default:!0},displayAll:{type:Boolean,default:!1},hideOnSinglePage:{type:Boolean,default:!1}},emits:["update:modelValue","update:pageSize","change"],setup(a,{emit:o,slots:n,expose:d}){const{pageSizeOptions:s,pageSizeMenu:u,totalRow:v}=e.toRefs(a),l=e.ref(0),S=e.ref(-1),E=e.ref(5),f=Z(a.language),O=e.computed(()=>Array.isArray(u.value)&&u.value.length>0?u.value:L),g=e.ref(a.pageSize||10),r=e.computed(()=>g.value===N?1:Math.ceil(v.value/g.value)),F=e.computed(()=>x(l.value,r.value,E.value)),j=e.computed(()=>f.pageInfo.replace("#pageNumber#",l.value).replace("#totalPage#",r.value).replace("#totalRow#",v.value)),V=e.computed(()=>({"v-pagination":!0,"v-pagination--border":a.border,"v-pagination--right":a.align==="right","v-pagination--center":a.align==="center","v-pagination--disabled":a.disabled})),R=e.computed(()=>l.value===1),A=e.computed(()=>l.value===r.value);e.watch(()=>a.modelValue,t=>b(t)),e.watch(()=>a.pageSize,B);function b(t=1){if(a.disabled||typeof t!="number")return;let c=t<1?1:t;t>r.value&&r.value>0&&(c=r.value),!(c===l.value&&g.value===S.value)&&(l.value=c,S.value=g.value,z())}function z(){o("change",{pageNumber:l.value,pageSize:Number(g.value),totalPage:r.value}),o("update:modelValue",l.value),o("update:pageSize",g.value)}function B(t){t<0||t!==g.value&&(g.value=t,b())}function _(t,c,T){const i={href:"javascript:void(0)",onClick:()=>b(c)};return e.h("li",{class:t},[e.h("a",i,T)])}return e.onMounted(()=>{b(a.modelValue||1)}),d({goPage:b,current:l,totalPage:r,pageNumbers:F,reload:z}),()=>{if(a.hideOnSinglePage&&r.value<=1)return;const t=[];if(s.value){const i={disabled:a.disabled,onChange:I=>B(Number(I.target.value))},m=O.value.map(I=>e.h("option",{value:I},I));a.displayAll&&m.push(e.h("option",{value:N},f.all));const k=e.h("li",{class:"v-pagination__list"},[e.h("a",{href:"javascript:void(0)"},[e.h("span",f.pageLength),e.h("select",i,m)])]);t.push(k)}if(a.info&&t.push(e.h("li",{class:"v-pagination__info"},[e.h("a",{href:"javascript:void(0)"},j.value)])),"default"in n){const i={pageNumber:l.value,pageSize:g.value,totalPage:r.value,totalRow:v.value,isFirst:R.value,isLast:A.value},m=e.h("li",{class:"v-pagination__slot"},[e.h("a",n.default(i))]);t.push(m)}if(a.first){const i=["v-pagination__first",{disabled:R.value}];t.push(_(i,1,f.first))}const c=["v-pagination__previous",{disabled:R.value}];t.push(_(c,l.value-1,f.previous)),a.pageNumber&&t.push(...F.value.map(i=>{const m={active:i===l.value};return _(m,i,i)}));const T=["v-pagination__next",{disabled:A.value}];if(t.push(_(T,l.value+1,f.next)),a.last){const i=["v-pagination__last",{disabled:A.value}];t.push(_(i,r.value,f.last))}return e.h("div",{class:V.value},[e.h("ul",t)])}}});h.install=(a,o={})=>{if(Object.keys(o).length){const{props:n}=h,{language:d,align:s,info:u,border:v,pageNumber:l,first:S,last:E,pageSizeMenu:f}=o;d&&(n.language.default=d),s&&(n.align.default=s),typeof u=="boolean"&&(n.info.default=u),typeof v=="boolean"&&(n.border.default=v),typeof l=="boolean"&&(n.pageNumber.default=l),typeof S=="boolean"&&(n.first.default=S),typeof E=="boolean"&&(n.last.default=E),typeof f<"u"&&(n.pageSizeMenu.default=f)}a.component(h.name,h)},p.PaginationBar=h,p.default=h,Object.defineProperties(p,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+(function(){"use strict";try{if(typeof document<"u"){var i=document.createElement("style");i.appendChild(document.createTextNode(".v-pagination{display:flex;justify-content:flex-start;box-sizing:border-box}.v-pagination--right{justify-content:flex-end}.v-pagination--center{justify-content:center}.v-pagination.v-pagination--disabled a,.v-pagination.v-pagination--disabled select{color:#ddd!important}.v-pagination.v-pagination--disabled .v-pagination__item a{cursor:default!important}.v-pagination.v-pagination--disabled .v-pagination__item a:hover{background-color:transparent}.v-pagination.v-pagination--disabled.v-pagination--border ul{background-color:#fafafa}.v-pagination.v-pagination--circle .v-pagination__item a{border-radius:50rem;border:1px solid transparent;min-height:30px;min-width:30px;padding:0 .6rem;display:flex;align-items:center;justify-content:center}.v-pagination.v-pagination--circle .v-pagination__item a:hover{border:1px solid #f7f7f7}.v-pagination.v-pagination--circle .v-pagination__item.disabled a:hover{border:1px solid transparent}.v-pagination.v-pagination--circle .v-pagination__item.active a{border:1px solid #ddd!important;background-color:transparent!important;box-shadow:0 1px 3px #0000001a}.v-pagination ul{margin:0;padding:0;display:flex}.v-pagination ul li{list-style:none;display:flex}.v-pagination ul li a{padding:.3rem .6rem;text-decoration:none;line-height:1.3;font-size:14px;margin:0;outline:0;color:#333;border-radius:.5rem;display:inline-flex;align-items:center;cursor:default}.v-pagination ul li.v-pagination__list a,.v-pagination ul li.v-pagination__info a{color:#888}.v-pagination ul li.active a,.v-pagination ul li.disabled a{cursor:default!important}.v-pagination ul li.v-pagination__item a:hover{background-color:#f7f7f7;color:#000;cursor:pointer}.v-pagination ul li.active a{background-color:#eee!important;color:#aaa}.v-pagination ul li.active a:hover{color:#aaa}.v-pagination ul li.disabled a{color:#ddd!important}.v-pagination ul li.disabled a:hover{background-color:transparent}.v-pagination ul li select{width:auto!important;font-size:12px;padding:0;outline:0;margin:0 0 0 5px;border:1px solid #ccc;color:#333;border-radius:.3rem}.v-pagination.v-pagination--border ul{box-shadow:0 1px 2px #0000000d;border-radius:.5rem}.v-pagination.v-pagination--border ul li a{border:1px solid #DEE2E6;border-left:0;border-radius:0}.v-pagination.v-pagination--border ul li:first-child>a{border-bottom-left-radius:.5rem;border-top-left-radius:.5rem;border-left:1px solid #DEE2E6}.v-pagination.v-pagination--border ul li:last-child>a{border-top-right-radius:.5rem;border-bottom-right-radius:.5rem}.v-pagination.v-pagination--border ul li.active a{color:#aaa;background-color:#eee}")),document.head.appendChild(i)}}catch(a){console.error("vite-plugin-css-injected-by-js",a)}})();
+(function(m,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(m=typeof globalThis<"u"?globalThis:m||self,e(m.VPage={},m.Vue))})(this,function(m,e){"use strict";const[w,y,T,F,M]=["cn","en","de","jp","pt"],E={[w]:{pageLength:"每页记录数",pageInfo:"第 #pageNumber#/#totalPage# 页(共#totalRow#条记录)",first:"首页",last:"尾页",all:"全部"},[y]:{pageLength:"Per page",pageInfo:"Page #pageNumber#/#totalPage# (total #totalRow# records)",first:"First",last:"Last",all:"All"},[T]:{pageLength:"Seitenlänge",pageInfo:"Aktuell #pageNumber#/#totalPage# (gesamt #totalRow# Aufzeichnungen)",first:"Zuerst",last:"Letzte",all:"Alle"},[F]:{pageLength:"ページごとの記録数",pageInfo:"現在の第 #pageNumber#/#totalPage# ページ(全部で #totalRow# 条の記録)",first:"トップページ",last:"尾のページ",all:"すべて"},[M]:{pageLength:"Resultados por página",pageInfo:"#pageNumber#/#totalPage# (total de #totalRow#)",first:"Início",last:"Fim",all:"Todos"}},f=1,j=5,I=10,R=[I,20,50,100],v=0,[$,ee,C]=["left","center","right"];function G(t,o,n){if(o<=n)return f;const d=Math.floor(n/2),i=o-n+1,c=t-d;return c<f?f:c>i?i:c}function k(t,o,n){const d=G(t,o,n);return Array.from({length:n}).map((i,c)=>d+c).filter(i=>i>=f&&i<=o)}function D(t=y){const o=String(t).toLowerCase();return E[Object.hasOwn(E,o)?o:y]}function L(t){return typeof t=="function"||Object.prototype.toString.call(t)==="[object Object]"&&!e.isVNode(t)}function x(t,o,n){const{pageSizeOptions:d,pageSizeMenu:i,totalRow:c}=e.toRefs(t),l=e.ref(0),b=e.ref(j),u=e.ref(t.pageSize??I),p=D(t.language),P=e.computed(()=>{if(!d.value)return[];const a=Array.from(Array.isArray(i.value)&&i.value.length>0?i.value:R);return u.value!==0&&!a.includes(u.value)&&a.push(u.value),a.sort((r,g)=>r-g)}),s=e.computed(()=>u.value===v?f:Math.ceil(c.value/u.value)),h=e.computed(()=>k(l.value,s.value,b.value)),U=e.computed(()=>({"v-pagination":!0,"v-pagination--right":t.align==="right","v-pagination--center":t.align==="center","v-pagination--disabled":t.disabled,"v-pagination--border":t.border,"v-pagination--circle":!t.border&&t.circle})),A=e.computed(()=>l.value===f),z=e.computed(()=>l.value===s.value);e.watch(()=>t.modelValue,S),e.watch(()=>t.pageSize,B);function S(a=f){if(t.disabled||typeof a!="number")return;let r=a<f?f:a;a>s.value&&s.value>0&&(r=s.value),r!==l.value&&(l.value=r,o("update:modelValue",l.value),O())}function B(a){if(typeof a=="number"&&!(a<0)&&a!==u.value){if(u.value=a,o("update:pageSize",u.value),l.value===f)return O();S(f)}}function O(){o("change",{pageNumber:l.value,pageSize:Number(u.value),totalPage:s.value})}function _(a,{slots:r}){var g;return e.createVNode("a",{href:"javascript:void(0)"},[(g=r==null?void 0:r.default)==null?void 0:g.call(r)])}function Z(){if(!d.value)return null;const a=()=>P.value.map(g=>e.createVNode("option",{key:g,value:g,selected:u.value===g},[g])),r=()=>t.displayAll?e.createVNode("option",{value:v,selected:u.value===v},[p.all]):null;return e.createVNode("li",{class:"v-pagination__list"},[e.createVNode(_,null,{default:()=>[e.createVNode("span",null,[p.pageLength]),e.createVNode("select",{disabled:t.disabled,onChange:g=>B(Number(g.target.value))},[e.createVNode(a,null,null),e.createVNode(r,null,null)])]})])}function q(){if(!t.info)return null;const a=p.pageInfo.replace("#pageNumber#",l.value).replace("#totalPage#",s.value).replace("#totalRow#",c.value);return e.createVNode("li",{class:"v-pagination__info"},[e.createVNode(_,null,L(a)?a:{default:()=>[a]})])}function H(){let a;if(!Object.hasOwn(n,"default"))return null;const r={pageNumber:l.value,pageSize:u.value,totalPage:s.value,totalRow:c.value,isFirst:A.value,isLast:z.value};return e.createVNode("li",{class:"v-pagination__slot"},[e.createVNode(_,null,L(a=n.default(r))?a:{default:()=>[a]})])}function V({classes:a,pageNumberValue:r,name:g,hasItem:Y=!0}){return Y?e.createVNode("li",{class:["v-pagination__item",...a]},[e.createVNode(_,{onClick:()=>S(r)},L(g)?g:{default:()=>[g]})]):null}function J(){return t.pageNumber?h.value.map(a=>e.createVNode(V,{key:a,classes:[{active:a===l.value}],pageNumberValue:a,name:a},null)):null}function K(){return e.createVNode(V,{classes:["v-pagination__first",{disabled:A.value}],pageNumberValue:f,name:p.first,hasItem:t.first},null)}function Q(){return e.createVNode(V,{classes:["v-pagination__previous",{disabled:A.value}],pageNumberValue:l.value-1,name:"«"},null)}function W(){return e.createVNode(V,{classes:["v-pagination__next",{disabled:z.value}],pageNumberValue:l.value+1,name:"»"},null)}function X(){return e.createVNode(V,{classes:["v-pagination__last",{disabled:z.value}],pageNumberValue:s.value,name:p.last,hasItem:t.last},null)}return e.onMounted(()=>S(t.modelValue||f)),{containerClasses:U,totalPage:s,current:l,pageNumbers:h,PageSizeOptions:Z,PageInformation:q,PageSlot:H,PageNumberItems:J,FirstPageItem:K,PreviousPageItem:Q,NextPageItem:W,LastPageItem:X}}const N=e.defineComponent({name:"PaginationBar",props:{modelValue:{type:Number,default:0},pageSize:{type:Number,default:I},totalRow:{type:Number,default:0},language:{type:String,default:y},align:{type:String,default:C},pageSizeMenu:{type:[Array],default:()=>R},pageSizeOptions:{type:Boolean,default:!0},disabled:{type:Boolean,default:!1},circle:{type:Boolean,default:!1},border:{type:Boolean,default:!1},info:{type:Boolean,default:!0},pageNumber:{type:Boolean,default:!0},first:{type:Boolean,default:!0},last:{type:Boolean,default:!0},displayAll:{type:Boolean,default:!1},hideOnSinglePage:{type:Boolean,default:!1}},emits:["update:modelValue","update:pageSize","change"],setup(t,{emit:o,slots:n}){const{containerClasses:d,totalPage:i,PageSizeOptions:c,PageInformation:l,PageSlot:b,PageNumberItems:u,FirstPageItem:p,PreviousPageItem:P,NextPageItem:s,LastPageItem:h}=x(t,o,n);return()=>t.hideOnSinglePage&&i.value<=1?null:e.createVNode("div",{class:d.value},[e.createVNode("ul",null,[e.createVNode(c,null,null),e.createVNode(l,null,null),e.createVNode(b,null,null),e.createVNode(p,null,null),e.createVNode(P,null,null),e.createVNode(u,null,null),e.createVNode(s,null,null),e.createVNode(h,null,null)])])}});N.install=(t,o={})=>{if(Object.keys(o).length){const{props:n}=N,{language:d,align:i,info:c,border:l,pageNumber:b,first:u,last:p,pageSizeMenu:P}=o;d&&(n.language.default=d),i&&(n.align.default=i),typeof c=="boolean"&&(n.info.default=c),typeof l=="boolean"&&(n.border.default=l),typeof b=="boolean"&&(n.pageNumber.default=b),typeof u=="boolean"&&(n.first.default=u),typeof p=="boolean"&&(n.last.default=p),typeof P<"u"&&(n.pageSizeMenu.default=P)}t.component(N.name,N)},m.PaginationBar=N,m.default=N,Object.defineProperties(m,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "v-page",
   "description": "A simple pagination bar",
-  "version": "3.1.0",
+  "version": "3.2.1",
   "author": "TerryZ <terry5@foxmail.com>",
   "type": "module",
   "files": [
@@ -50,24 +50,23 @@
     "vue": "^3.4.0"
   },
   "dependencies": {
-    "vue": "^3.4.29"
+    "vue": "^3.5.12"
   },
   "devDependencies": {
-    "@rushstack/eslint-patch": "^1.3.3",
-    "@vitejs/plugin-vue": "^5.0.5",
-    "@vitejs/plugin-vue-jsx": "^4.0.0",
-    "@vitest/coverage-v8": "^1.6.0",
+    "@rushstack/eslint-patch": "^1.10.4",
+    "@vitejs/plugin-vue": "^5.1.4",
+    "@vitejs/plugin-vue-jsx": "^4.0.1",
+    "@vitest/coverage-v8": "^2.1.3",
     "@vue/eslint-config-standard": "^8.0.1",
     "@vue/test-utils": "^2.4.6",
     "bootstrap": "^5.3.3",
     "eslint": "^8.49.0",
     "eslint-plugin-vue": "^9.17.0",
-    "jsdom": "^24.1.0",
-    "sass": "^1.66.1",
-    "sass-loader": "^13.3.2",
-    "typescript": "^5.5.2",
-    "vite": "^5.3.1",
-    "vite-plugin-css-injected-by-js": "^3.5.1",
-    "vitest": "^1.6.0"
+    "jsdom": "^25.0.1",
+    "sass": "^1.80.2",
+    "typescript": "^5.6.3",
+    "vite": "^5.4.9",
+    "vite-plugin-css-injected-by-js": "^3.5.2",
+    "vitest": "^2.1.3"
   }
 }

package/types/index.d.ts

@@ -41,7 +41,7 @@ declare interface Props {
    * v-page language
    * @default `en`
    */
-  language?: string
+  language?: 'cn' | 'en' | 'de' | 'jp' | 'pt'
   /**
    * Page size list
    * @default [10, 20, 50, 100]
@@ -56,7 +56,7 @@ declare interface Props {
    * Alignment direction
    * @default `right`
    */
-  align?: string
+  align?: 'left' | 'right' | 'center'
   /**
    * Disabled the pagination
    * @default false
@@ -68,7 +68,12 @@ declare interface Props {
    */
   border?: boolean
   /**
-   * Whether to display page info bar
+   * Round style page number button
+   * @default false
+   */
+  circle?: boolean
+  /**
+   * Whether to display page information panel
    * @default true
    */
   info?: boolean
@@ -99,30 +104,17 @@ declare interface Props {
   hideOnSinglePage?: boolean
 }
 
-// declare interface Emits {
-//   /** Update pageNumber value */
-//   'onUpdate:modelValue'?: (pageNumber: number) => void
-//   /** The event respond pageNumber or pageSize change */
-//   onChange?: (data: PageInfo) => void
-// }
-
-// declare interface Methods extends MethodOptions {
-//   /** Go to the specified page */
-//   goPage: (pageNumber: number) => void
-//   /** Re-emit `change` event and output pagination states data */
-//   reload: () => void
-// }
-// $emit: ((event: "update:modelValue", value: boolean) => void) & ((event: "click:close", e: MouseEvent) => void)
-
 /** Update pageNumber value */
 type EmitUpdateModelValue = (event: "update:modelValue", value: number) => void
+/** Update pageSize value */
+type EmitUpdatePageSize = (event: "update:pageSize", value: number) => void
 /** The event respond pageNumber or pageSize change */
 type EmitChange = (event: "change", value: PageInfo) => void
 
 declare interface PaginationBar {
   new (): {
     $props: AllowedComponentProps & ComponentCustomProps & VNodeProps & Props
-    $emit: EmitUpdateModelValue & EmitChange
+    $emit: EmitUpdateModelValue & EmitUpdatePageSize & EmitChange
     $slots: {
       default?: (defaultSlotData: PageSlotData) => VNode[]
     }