v-page 3.2.0 → 3.3.0

package/README.md

@@ -67,12 +67,30 @@ import { PaginationBar } from 'v-page'
     v-model="pageNumber"
     :total-row="totalRow"
     @change="paginationChange"
-  />
+  >
+    <PaginationPageSizeOptions />
+    <PaginationInfo />
+    <PaginationFirstPage />
+    <PaginationPreviousPage />
+    <PaginationPageNumbers />
+    <PaginationNextPage />
+    <PaginationLastPage />
+  </PaginationBar>
 </template>
 
 <script setup lang='ts'>
 import { ref } from 'vue'
-import { PaginationBar } from 'v-page'
+import {
+  PaginationBar,
+  PaginationPageSizeOptions,
+  PaginationInfo,
+  PaginationPanel,
+  PaginationPageNumbers,
+  PaginationFirstPage,
+  PaginationPreviousPage,
+  PaginationNextPage,
+  PaginationLastPage
+} from 'v-page'
 import type { PageInfo } from 'v-page'
 // set default page to 3
 const pageNumber = ref<number>(3)

package/dist/v-page.js

@@ -1,217 +1,62 @@
-(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}.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;transition:all .3s}.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;cursor:pointer}.v-pagination ul li.active a{background-color:#eee!important;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 Z, ref as A, computed as b, watch as w, onMounted as k, createVNode as a, defineComponent as H } from "vue";
-const [
-  J,
-  y,
-  q,
-  K,
-  Q
-] = ["cn", "en", "de", "jp", "pt"], O = {
-  [J]: {
+(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 { defineComponent as T, toRefs as w, ref as h, computed as b, watch as F, onMounted as C, provide as G, createVNode as n, inject as d, isVNode as k } from "vue";
+const g = 1, D = 5, L = 10, V = [L, 20, 50, 100], A = 0, [X, Y, x] = ["left", "center", "right"], s = Symbol("pagination"), [
+  U,
+  S,
+  Z,
+  H,
+  J
+] = ["cn", "en", "de", "jp", "pt"], B = {
+  [U]: {
     pageLength: "每页记录数",
     pageInfo: "第 #pageNumber#/#totalPage# 页(共#totalRow#条记录)",
     first: "首页",
     last: "尾页",
     all: "全部"
   },
-  [y]: {
+  [S]: {
     pageLength: "Per page",
     pageInfo: "Page #pageNumber#/#totalPage# (total #totalRow# records)",
     first: "First",
     last: "Last",
     all: "All"
   },
-  [q]: {
+  [Z]: {
     pageLength: "Seitenlänge",
     pageInfo: "Aktuell #pageNumber#/#totalPage# (gesamt #totalRow# Aufzeichnungen)",
     first: "Zuerst",
     last: "Letzte",
     all: "Alle"
   },
-  [K]: {
+  [H]: {
     pageLength: "ページごとの記録数",
     pageInfo: "現在の第 #pageNumber#/#totalPage# ページ(全部で #totalRow# 条の記録)",
     first: "トップページ",
     last: "尾のページ",
     all: "すべて"
   },
-  [Q]: {
+  [J]: {
     pageLength: "Resultados por página",
     pageInfo: "#pageNumber#/#totalPage# (total de #totalRow#)",
     first: "Início",
     last: "Fim",
     all: "Todos"
   }
-}, s = 1, W = 5, E = 10, F = [E, 20, 50, 100], z = 0, [le, ne, X] = ["left", "center", "right"];
-function Y(e, u, l) {
-  if (u <= l) return s;
-  const f = Math.floor(l / 2), i = u - l + 1, r = e - f;
-  return r < s ? s : r > i ? i : r;
+};
+function q(e, a, t) {
+  if (a <= t) return g;
+  const i = Math.floor(t / 2), u = a - t + 1, l = e - i;
+  return l < g ? g : l > u ? u : l;
 }
-function $(e, u, l) {
-  const f = Y(e, u, l);
-  return Array.from({ length: l }).map((i, r) => f + r).filter((i) => i >= s && i <= u);
+function K(e, a, t) {
+  const i = q(e, a, t);
+  return Array.from({ length: t }).map((u, l) => i + l).filter((u) => u >= g && u <= a);
 }
-function ee(e = y) {
-  const u = String(e).toLowerCase();
-  return O[Object.hasOwn(O, u) ? u : y];
+function Q(e = S) {
+  const a = String(e).toLowerCase();
+  return B[Object.hasOwn(B, a) ? a : S];
 }
-function ae(e, u, l) {
-  const {
-    pageSizeOptions: f,
-    pageSizeMenu: i,
-    totalRow: r
-  } = Z(e), n = A(0), v = A(W), o = A(e.pageSize ?? E), c = ee(e.language), m = b(() => {
-    if (!f.value) return [];
-    const t = Array.isArray(i.value) && i.value.length > 0 ? i.value : F, d = new Set(t);
-    return d.add(o.value), [...d].sort((p, L) => p - L);
-  }), g = b(() => o.value === z ? s : Math.ceil(r.value / o.value)), N = b(() => $(n.value, g.value, v.value)), V = 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 === s), _ = b(() => n.value === g.value);
-  w(() => e.modelValue, h), w(() => e.pageSize, R);
-  function h(t = s) {
-    if (e.disabled || typeof t != "number") return;
-    let d = t < s ? s : t;
-    t > g.value && g.value > 0 && (d = g.value), d !== n.value && (n.value = d, u("update:modelValue", n.value), B());
-  }
-  function R(t) {
-    if (!(t < 0) && t !== o.value) {
-      if (o.value = t, u("update:pageSize", o.value), n.value === s)
-        return B();
-      h(s);
-    }
-  }
-  function B() {
-    u("change", {
-      pageNumber: n.value,
-      pageSize: Number(o.value),
-      totalPage: g.value
-    });
-  }
-  function C() {
-    if (!f.value) return null;
-    const t = () => m.value.map((p) => a("option", {
-      value: p,
-      selected: o.value === p
-    }, [p])), d = () => e.displayAll ? a("option", {
-      value: z,
-      selected: o.value === z
-    }, [c.all]) : null;
-    return a("li", {
-      class: "v-pagination__list"
-    }, [a("a", {
-      href: "javascript:void(0)"
-    }, [a("span", null, [c.pageLength]), a("select", {
-      disabled: e.disabled,
-      onChange: (p) => R(Number(p.target.value))
-    }, [a(t, null, null), a(d, null, null)])])]);
-  }
-  function M() {
-    if (!e.info) return null;
-    const t = c.pageInfo.replace("#pageNumber#", n.value).replace("#totalPage#", g.value).replace("#totalRow#", r.value);
-    return a("li", {
-      class: "v-pagination__info"
-    }, [a("a", {
-      href: "javascript:void(0)"
-    }, [t])]);
-  }
-  function T() {
-    if (!Object.hasOwn(l, "default")) return null;
-    const t = {
-      pageNumber: n.value,
-      pageSize: o.value,
-      totalPage: g.value,
-      totalRow: r.value,
-      isFirst: I.value,
-      isLast: _.value
-    };
-    return a("li", {
-      class: "v-pagination__slot"
-    }, [a("a", {
-      href: "javascript:void(0)"
-    }, [l.default(t)])]);
-  }
-  function P({
-    classes: t,
-    pageNumberValue: d,
-    name: p,
-    hasItem: L = !0
-  }) {
-    return L ? a("li", {
-      class: ["v-pagination__item", ...t]
-    }, [a("a", {
-      href: "javascript:void(0)",
-      onClick: () => h(d)
-    }, [p])]) : null;
-  }
-  function j() {
-    return e.pageNumber ? N.value.map((t) => a(P, {
-      classes: [{
-        active: t === n.value
-      }],
-      pageNumberValue: t,
-      name: t
-    }, null)) : null;
-  }
-  function G() {
-    return a(P, {
-      classes: ["v-pagination__first", {
-        disabled: I.value
-      }],
-      pageNumberValue: s,
-      name: c.first,
-      hasItem: e.first
-    }, null);
-  }
-  function D() {
-    return a(P, {
-      classes: ["v-pagination__previous", {
-        disabled: I.value
-      }],
-      pageNumberValue: n.value - 1,
-      name: "«"
-    }, null);
-  }
-  function x() {
-    return a(P, {
-      classes: ["v-pagination__next", {
-        disabled: _.value
-      }],
-      pageNumberValue: n.value + 1,
-      name: "»"
-    }, null);
-  }
-  function U() {
-    return a(P, {
-      classes: ["v-pagination__last", {
-        disabled: _.value
-      }],
-      pageNumberValue: g.value,
-      name: c.last,
-      hasItem: e.last
-    }, null);
-  }
-  return k(() => h(e.modelValue || s)), {
-    containerClasses: V,
-    totalPage: g,
-    current: n,
-    pageNumbers: N,
-    PageSizeOptions: C,
-    PageInformation: M,
-    PageSlot: T,
-    PageNumberItems: j,
-    FirstPageItem: G,
-    PreviousPageItem: D,
-    NextPageItem: x,
-    LastPageItem: U
-  };
-}
-const S = /* @__PURE__ */ H({
+const N = /* @__PURE__ */ T({
   name: "PaginationBar",
   props: {
     modelValue: {
@@ -220,7 +65,7 @@ const S = /* @__PURE__ */ H({
     },
     pageSize: {
       type: Number,
-      default: E
+      default: L
     },
     totalRow: {
       type: Number,
@@ -228,7 +73,7 @@ const S = /* @__PURE__ */ H({
     },
     language: {
       type: String,
-      default: y
+      default: S
     },
     /**
      * Pagination alignment direction
@@ -236,17 +81,12 @@ const S = /* @__PURE__ */ H({
      */
     align: {
       type: String,
-      default: X
+      default: x
     },
     /** Page size list */
     pageSizeMenu: {
       type: [Array],
-      default: () => F
-    },
-    /** Display page size menu panel */
-    pageSizeOptions: {
-      type: Boolean,
-      default: !0
+      default: () => V
     },
     disabled: {
       type: Boolean,
@@ -261,24 +101,6 @@ const S = /* @__PURE__ */ H({
       type: Boolean,
       default: !1
     },
-    info: {
-      type: Boolean,
-      default: !0
-    },
-    pageNumber: {
-      type: Boolean,
-      default: !0
-    },
-    /** first page button */
-    first: {
-      type: Boolean,
-      default: !0
-    },
-    /** last page button */
-    last: {
-      type: Boolean,
-      default: !0
-    },
     /**
      * Display all records
      *
@@ -297,43 +119,241 @@ const S = /* @__PURE__ */ H({
   },
   emits: ["update:modelValue", "update:pageSize", "change"],
   setup(e, {
-    emit: u,
-    slots: l
+    emit: a,
+    slots: t
   }) {
     const {
-      containerClasses: f,
-      totalPage: i,
-      PageSizeOptions: r,
-      PageInformation: n,
-      PageSlot: v,
-      PageNumberItems: o,
-      FirstPageItem: c,
-      PreviousPageItem: m,
-      NextPageItem: g,
-      LastPageItem: N
-    } = ae(e, u, l);
-    return () => e.hideOnSinglePage && i.value <= 1 ? null : a("div", {
-      class: f.value
-    }, [a("ul", null, [a(r, null, null), a(n, null, null), a(v, null, null), a(c, null, null), a(m, null, null), a(o, null, null), a(g, null, null), a(N, null, null)])]);
+      pageSizeMenu: i,
+      totalRow: u
+    } = w(e), l = h(0), v = h(D), o = h(e.pageSize ?? L), f = b(() => {
+      const r = Array.from(Array.isArray(i.value) && i.value.length > 0 ? i.value : V);
+      return o.value !== 0 && !r.includes(o.value) && r.push(o.value), r.sort((p, M) => p - M);
+    }), c = b(() => o.value === A ? g : Math.ceil(u.value / o.value)), P = b(() => K(l.value, c.value, v.value)), j = 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
+    })), z = b(() => l.value === g), E = b(() => l.value === c.value);
+    F(() => e.modelValue, y), F(() => e.pageSize, R);
+    function y(r = g) {
+      if (e.disabled || typeof r != "number") return;
+      let p = r < g ? g : r;
+      r > c.value && c.value > 0 && (p = c.value), p !== l.value && (l.value = p, a("update:modelValue", l.value), I());
+    }
+    function R(r) {
+      if (typeof r == "number" && !(r < 0) && r !== o.value) {
+        if (o.value = r, a("update:pageSize", o.value), l.value === g)
+          return I();
+        y(g);
+      }
+    }
+    function I() {
+      a("change", {
+        pageNumber: l.value,
+        pageSize: Number(o.value),
+        totalPage: c.value
+      });
+    }
+    return C(() => y(e.modelValue || g)), G(s, {
+      lang: Q(e.language),
+      pageSize: o,
+      sizeList: f,
+      pageNumbers: P,
+      isFirst: z,
+      isLast: E,
+      current: l,
+      totalPage: c,
+      changePageNumber: y,
+      changePageSize: R,
+      ...w(e)
+    }), () => {
+      var p;
+      if (e.hideOnSinglePage && c.value <= 1) return null;
+      const r = {
+        pageNumber: l.value,
+        pageSize: o.value,
+        totalPage: c.value,
+        totalRow: u.value,
+        isFirst: z.value,
+        isLast: E.value
+      };
+      return n("div", {
+        class: j.value
+      }, [n("ul", null, [(p = t == null ? void 0 : t.default) == null ? void 0 : p.call(t, r)])]);
+    };
   }
 });
-S.install = (e, u = {}) => {
-  if (Object.keys(u).length) {
-    const { props: l } = S, {
-      language: f,
-      align: i,
-      info: r,
-      border: n,
-      pageNumber: v,
-      first: o,
+function O(e) {
+  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !k(e);
+}
+function _(e, {
+  slots: a
+}) {
+  var t;
+  return n("a", {
+    href: "javascript:void(0)"
+  }, [(t = a == null ? void 0 : a.default) == null ? void 0 : t.call(a)]);
+}
+function m({
+  classes: e,
+  pageNumberValue: a,
+  name: t
+}) {
+  const {
+    changePageNumber: i
+  } = d(s);
+  return n("li", {
+    class: ["v-pagination__item", ...e]
+  }, [n(_, {
+    onClick: () => i(a)
+  }, O(t) ? t : {
+    default: () => [t]
+  })]);
+}
+function $() {
+  const {
+    lang: e,
+    sizeList: a,
+    pageSize: t,
+    disabled: i,
+    displayAll: u,
+    changePageSize: l
+  } = d(s), v = () => a.value.map((f) => n("option", {
+    key: f,
+    value: f,
+    selected: t.value === f
+  }, [f])), o = () => u.value ? n("option", {
+    value: A,
+    selected: t.value === A
+  }, [e.all]) : null;
+  return n("li", {
+    class: "v-pagination__list"
+  }, [n(_, null, {
+    default: () => [n("span", null, [e.pageLength]), n("select", {
+      disabled: i.value,
+      onChange: (f) => l(Number(f.target.value))
+    }, [n(v, null, null), n(o, null, null)])]
+  })]);
+}
+function ee() {
+  const {
+    lang: e,
+    current: a,
+    totalPage: t,
+    totalRow: i
+  } = d(s), u = e.pageInfo.replace("#pageNumber#", a.value).replace("#totalPage#", t.value).replace("#totalRow#", i.value);
+  return n("li", {
+    class: "v-pagination__info"
+  }, [n(_, null, O(u) ? u : {
+    default: () => [u]
+  })]);
+}
+function ae(e, {
+  slots: a
+}) {
+  return n("li", {
+    class: "v-pagination__slot"
+  }, [n(_, null, {
+    default: () => {
+      var t;
+      return [(t = a == null ? void 0 : a.default) == null ? void 0 : t.call(a)];
+    }
+  })]);
+}
+function te() {
+  const {
+    pageNumbers: e,
+    current: a
+  } = d(s);
+  return e.value.map((t) => n(m, {
+    key: t,
+    classes: [{
+      active: t === a.value
+    }],
+    pageNumberValue: t,
+    name: t
+  }, null));
+}
+function ne() {
+  const {
+    isFirst: e,
+    lang: a
+  } = d(s);
+  return n(m, {
+    classes: ["v-pagination__first", {
+      disabled: e.value
+    }],
+    pageNumberValue: g,
+    name: a.first
+  }, null);
+}
+function le() {
+  const {
+    isFirst: e,
+    current: a
+  } = d(s);
+  return n(m, {
+    classes: ["v-pagination__previous", {
+      disabled: e.value
+    }],
+    pageNumberValue: a.value - 1,
+    name: "«"
+  }, null);
+}
+function ue() {
+  const {
+    isLast: e,
+    current: a
+  } = d(s);
+  return n(m, {
+    classes: ["v-pagination__next", {
+      disabled: e.value
+    }],
+    pageNumberValue: a.value + 1,
+    name: "»"
+  }, null);
+}
+function ie() {
+  const {
+    isLast: e,
+    totalPage: a,
+    lang: t
+  } = d(s);
+  return n(m, {
+    classes: ["v-pagination__last", {
+      disabled: e.value
+    }],
+    pageNumberValue: a.value,
+    name: t.last
+  }, null);
+}
+N.install = (e, a = {}) => {
+  if (Object.keys(a).length) {
+    const { props: t } = N, {
+      language: i,
+      align: u,
+      info: l,
+      border: v,
+      pageNumber: o,
+      first: f,
       last: c,
-      pageSizeMenu: m
-    } = u;
-    f && (l.language.default = f), i && (l.align.default = i), typeof r == "boolean" && (l.info.default = r), typeof n == "boolean" && (l.border.default = n), typeof v == "boolean" && (l.pageNumber.default = v), typeof o == "boolean" && (l.first.default = o), typeof c == "boolean" && (l.last.default = c), typeof m < "u" && (l.pageSizeMenu.default = m);
+      pageSizeMenu: P
+    } = a;
+    i && (t.language.default = i), u && (t.align.default = u), typeof l == "boolean" && (t.info.default = l), typeof v == "boolean" && (t.border.default = v), typeof o == "boolean" && (t.pageNumber.default = o), typeof f == "boolean" && (t.first.default = f), typeof c == "boolean" && (t.last.default = c), typeof P < "u" && (t.pageSizeMenu.default = P);
   }
-  e.component(S.name, S);
+  e.component(N.name, N);
 };
 export {
-  S as PaginationBar,
-  S as default
+  N as PaginationBar,
+  ne as PaginationFirstPage,
+  ee as PaginationInfo,
+  ie as PaginationLastPage,
+  ue as PaginationNextPage,
+  te as PaginationPageNumbers,
+  $ as PaginationPageSizeOptions,
+  ae as PaginationPanel,
+  le as PaginationPreviousPage,
+  N 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:#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}.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;transition:all .3s}.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;cursor:pointer}.v-pagination ul li.active a{background-color:#eee!important;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,h,O,T,F]=["cn","en","de","jp","pt"],z={[w]:{pageLength:"每页记录数",pageInfo:"第 #pageNumber#/#totalPage# 页(共#totalRow#条记录)",first:"首页",last:"尾页",all:"全部"},[h]:{pageLength:"Per page",pageInfo:"Page #pageNumber#/#totalPage# (total #totalRow# records)",first:"First",last:"Last",all:"All"},[O]:{pageLength:"Seitenlänge",pageInfo:"Aktuell #pageNumber#/#totalPage# (gesamt #totalRow# Aufzeichnungen)",first:"Zuerst",last:"Letzte",all:"Alle"},[T]:{pageLength:"ページごとの記録数",pageInfo:"現在の第 #pageNumber#/#totalPage# ページ(全部で #totalRow# 条の記録)",first:"トップページ",last:"尾のページ",all:"すべて"},[F]:{pageLength:"Resultados por página",pageInfo:"#pageNumber#/#totalPage# (total de #totalRow#)",first:"Início",last:"Fim",all:"Todos"}},s=1,M=5,S=10,E=[S,20,50,100],_=0,[X,Y,j]=["left","center","right"];function C(a,o,l){if(o<=l)return s;const c=Math.floor(l/2),u=o-l+1,r=a-c;return r<s?s:r>u?u:r}function G(a,o,l){const c=C(a,o,l);return Array.from({length:l}).map((u,r)=>c+r).filter(u=>u>=s&&u<=o)}function D(a=h){const o=String(a).toLowerCase();return z[Object.hasOwn(z,o)?o:h]}function x(a,o,l){const{pageSizeOptions:c,pageSizeMenu:u,totalRow:r}=e.toRefs(a),n=e.ref(0),b=e.ref(M),i=e.ref(a.pageSize??S),f=D(a.language),P=e.computed(()=>{if(!c.value)return[];const t=Array.isArray(u.value)&&u.value.length>0?u.value:E,d=new Set(t);return d.add(i.value),[...d].sort((p,A)=>p-A)}),g=e.computed(()=>i.value===_?s:Math.ceil(r.value/i.value)),v=e.computed(()=>G(n.value,g.value,b.value)),U=e.computed(()=>({"v-pagination":!0,"v-pagination--right":a.align==="right","v-pagination--center":a.align==="center","v-pagination--disabled":a.disabled,"v-pagination--border":a.border,"v-pagination--circle":!a.border&&a.circle})),I=e.computed(()=>n.value===s),L=e.computed(()=>n.value===g.value);e.watch(()=>a.modelValue,y),e.watch(()=>a.pageSize,R);function y(t=s){if(a.disabled||typeof t!="number")return;let d=t<s?s:t;t>g.value&&g.value>0&&(d=g.value),d!==n.value&&(n.value=d,o("update:modelValue",n.value),B())}function R(t){if(!(t<0)&&t!==i.value){if(i.value=t,o("update:pageSize",i.value),n.value===s)return B();y(s)}}function B(){o("change",{pageNumber:n.value,pageSize:Number(i.value),totalPage:g.value})}function Z(){if(!c.value)return null;const t=()=>P.value.map(p=>e.createVNode("option",{value:p,selected:i.value===p},[p])),d=()=>a.displayAll?e.createVNode("option",{value:_,selected:i.value===_},[f.all]):null;return e.createVNode("li",{class:"v-pagination__list"},[e.createVNode("a",{href:"javascript:void(0)"},[e.createVNode("span",null,[f.pageLength]),e.createVNode("select",{disabled:a.disabled,onChange:p=>R(Number(p.target.value))},[e.createVNode(t,null,null),e.createVNode(d,null,null)])])])}function k(){if(!a.info)return null;const t=f.pageInfo.replace("#pageNumber#",n.value).replace("#totalPage#",g.value).replace("#totalRow#",r.value);return e.createVNode("li",{class:"v-pagination__info"},[e.createVNode("a",{href:"javascript:void(0)"},[t])])}function q(){if(!Object.hasOwn(l,"default"))return null;const t={pageNumber:n.value,pageSize:i.value,totalPage:g.value,totalRow:r.value,isFirst:I.value,isLast:L.value};return e.createVNode("li",{class:"v-pagination__slot"},[e.createVNode("a",{href:"javascript:void(0)"},[l.default(t)])])}function V({classes:t,pageNumberValue:d,name:p,hasItem:A=!0}){return A?e.createVNode("li",{class:["v-pagination__item",...t]},[e.createVNode("a",{href:"javascript:void(0)",onClick:()=>y(d)},[p])]):null}function H(){return a.pageNumber?v.value.map(t=>e.createVNode(V,{classes:[{active:t===n.value}],pageNumberValue:t,name:t},null)):null}function J(){return e.createVNode(V,{classes:["v-pagination__first",{disabled:I.value}],pageNumberValue:s,name:f.first,hasItem:a.first},null)}function K(){return e.createVNode(V,{classes:["v-pagination__previous",{disabled:I.value}],pageNumberValue:n.value-1,name:"«"},null)}function Q(){return e.createVNode(V,{classes:["v-pagination__next",{disabled:L.value}],pageNumberValue:n.value+1,name:"»"},null)}function W(){return e.createVNode(V,{classes:["v-pagination__last",{disabled:L.value}],pageNumberValue:g.value,name:f.last,hasItem:a.last},null)}return e.onMounted(()=>y(a.modelValue||s)),{containerClasses:U,totalPage:g,current:n,pageNumbers:v,PageSizeOptions:Z,PageInformation:k,PageSlot:q,PageNumberItems:H,FirstPageItem:J,PreviousPageItem:K,NextPageItem:Q,LastPageItem:W}}const N=e.defineComponent({name:"PaginationBar",props:{modelValue:{type:Number,default:0},pageSize:{type:Number,default:S},totalRow:{type:Number,default:0},language:{type:String,default:h},align:{type:String,default:j},pageSizeMenu:{type:[Array],default:()=>E},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(a,{emit:o,slots:l}){const{containerClasses:c,totalPage:u,PageSizeOptions:r,PageInformation:n,PageSlot:b,PageNumberItems:i,FirstPageItem:f,PreviousPageItem:P,NextPageItem:g,LastPageItem:v}=x(a,o,l);return()=>a.hideOnSinglePage&&u.value<=1?null:e.createVNode("div",{class:c.value},[e.createVNode("ul",null,[e.createVNode(r,null,null),e.createVNode(n,null,null),e.createVNode(b,null,null),e.createVNode(f,null,null),e.createVNode(P,null,null),e.createVNode(i,null,null),e.createVNode(g,null,null),e.createVNode(v,null,null)])])}});N.install=(a,o={})=>{if(Object.keys(o).length){const{props:l}=N,{language:c,align:u,info:r,border:n,pageNumber:b,first:i,last:f,pageSizeMenu:P}=o;c&&(l.language.default=c),u&&(l.align.default=u),typeof r=="boolean"&&(l.info.default=r),typeof n=="boolean"&&(l.border.default=n),typeof b=="boolean"&&(l.pageNumber.default=b),typeof i=="boolean"&&(l.first.default=i),typeof f=="boolean"&&(l.last.default=f),typeof P<"u"&&(l.pageSizeMenu.default=P)}a.component(N.name,N)},m.PaginationBar=N,m.default=N,Object.defineProperties(m,{__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(o,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(o=typeof globalThis<"u"?globalThis:o||self,e(o.VPage={},o.Vue))})(this,function(o,e){"use strict";const I=[10,20,50,100],y=0,[X,Y,F]=["left","center","right"],d=Symbol("pagination"),[T,m,v,z,j]=["cn","en","de","jp","pt"],V={[T]:{pageLength:"每页记录数",pageInfo:"第 #pageNumber#/#totalPage# 页(共#totalRow#条记录)",first:"首页",last:"尾页",all:"全部"},[m]:{pageLength:"Per page",pageInfo:"Page #pageNumber#/#totalPage# (total #totalRow# records)",first:"First",last:"Last",all:"All"},[v]:{pageLength:"Seitenlänge",pageInfo:"Aktuell #pageNumber#/#totalPage# (gesamt #totalRow# Aufzeichnungen)",first:"Zuerst",last:"Letzte",all:"Alle"},[z]:{pageLength:"ページごとの記録数",pageInfo:"現在の第 #pageNumber#/#totalPage# ページ(全部で #totalRow# 条の記録)",first:"トップページ",last:"尾のページ",all:"すべて"},[j]:{pageLength:"Resultados por página",pageInfo:"#pageNumber#/#totalPage# (total de #totalRow#)",first:"Início",last:"Fim",all:"Todos"}};function w(a,t,n){if(t<=n)return 1;const u=Math.floor(n/2),l=t-n+1,i=a-u;return i<1?1:i>l?l:i}function B(a,t,n){const u=w(a,t,n);return Array.from({length:n}).map((l,i)=>u+i).filter(l=>l>=1&&l<=t)}function O(a=m){const t=String(a).toLowerCase();return V[Object.hasOwn(V,t)?t:m]}const p=e.defineComponent({name:"PaginationBar",props:{modelValue:{type:Number,default:0},pageSize:{type:Number,default:10},totalRow:{type:Number,default:0},language:{type:String,default:m},align:{type:String,default:F},pageSizeMenu:{type:[Array],default:()=>I},disabled:{type:Boolean,default:!1},circle:{type:Boolean,default:!1},border:{type:Boolean,default:!1},displayAll:{type:Boolean,default:!1},hideOnSinglePage:{type:Boolean,default:!1}},emits:["update:modelValue","update:pageSize","change"],setup(a,{emit:t,slots:n}){const{pageSizeMenu:u,totalRow:l}=e.toRefs(a),i=e.ref(0),P=e.ref(5),r=e.ref(a.pageSize??10),f=e.computed(()=>{const g=Array.from(Array.isArray(u.value)&&u.value.length>0?u.value:I);return r.value!==0&&!g.includes(r.value)&&g.push(r.value),g.sort((s,J)=>s-J)}),c=e.computed(()=>r.value===y?1:Math.ceil(l.value/r.value)),S=e.computed(()=>B(i.value,c.value,P.value)),H=e.computed(()=>({"v-pagination":!0,"v-pagination--right":a.align==="right","v-pagination--center":a.align==="center","v-pagination--disabled":a.disabled,"v-pagination--border":a.border,"v-pagination--circle":!a.border&&a.circle})),R=e.computed(()=>i.value===1),A=e.computed(()=>i.value===c.value);e.watch(()=>a.modelValue,_),e.watch(()=>a.pageSize,E);function _(g=1){if(a.disabled||typeof g!="number")return;let s=g<1?1:g;g>c.value&&c.value>0&&(s=c.value),s!==i.value&&(i.value=s,t("update:modelValue",i.value),L())}function E(g){if(typeof g=="number"&&!(g<0)&&g!==r.value){if(r.value=g,t("update:pageSize",r.value),i.value===1)return L();_(1)}}function L(){t("change",{pageNumber:i.value,pageSize:Number(r.value),totalPage:c.value})}return e.onMounted(()=>_(a.modelValue||1)),e.provide(d,{lang:O(a.language),pageSize:r,sizeList:f,pageNumbers:S,isFirst:R,isLast:A,current:i,totalPage:c,changePageNumber:_,changePageSize:E,...e.toRefs(a)}),()=>{var s;if(a.hideOnSinglePage&&c.value<=1)return null;const g={pageNumber:i.value,pageSize:r.value,totalPage:c.value,totalRow:l.value,isFirst:R.value,isLast:A.value};return e.createVNode("div",{class:H.value},[e.createVNode("ul",null,[(s=n==null?void 0:n.default)==null?void 0:s.call(n,g)])])}}});function h(a){return typeof a=="function"||Object.prototype.toString.call(a)==="[object Object]"&&!e.isVNode(a)}function b(a,{slots:t}){var n;return e.createVNode("a",{href:"javascript:void(0)"},[(n=t==null?void 0:t.default)==null?void 0:n.call(t)])}function N({classes:a,pageNumberValue:t,name:n}){const{changePageNumber:u}=e.inject(d);return e.createVNode("li",{class:["v-pagination__item",...a]},[e.createVNode(b,{onClick:()=>u(t)},h(n)?n:{default:()=>[n]})])}function G(){const{lang:a,sizeList:t,pageSize:n,disabled:u,displayAll:l,changePageSize:i}=e.inject(d),P=()=>t.value.map(f=>e.createVNode("option",{key:f,value:f,selected:n.value===f},[f])),r=()=>l.value?e.createVNode("option",{value:y,selected:n.value===y},[a.all]):null;return e.createVNode("li",{class:"v-pagination__list"},[e.createVNode(b,null,{default:()=>[e.createVNode("span",null,[a.pageLength]),e.createVNode("select",{disabled:u.value,onChange:f=>i(Number(f.target.value))},[e.createVNode(P,null,null),e.createVNode(r,null,null)])]})])}function M(){const{lang:a,current:t,totalPage:n,totalRow:u}=e.inject(d),l=a.pageInfo.replace("#pageNumber#",t.value).replace("#totalPage#",n.value).replace("#totalRow#",u.value);return e.createVNode("li",{class:"v-pagination__info"},[e.createVNode(b,null,h(l)?l:{default:()=>[l]})])}function D(a,{slots:t}){return e.createVNode("li",{class:"v-pagination__slot"},[e.createVNode(b,null,{default:()=>{var n;return[(n=t==null?void 0:t.default)==null?void 0:n.call(t)]}})])}function U(){const{pageNumbers:a,current:t}=e.inject(d);return a.value.map(n=>e.createVNode(N,{key:n,classes:[{active:n===t.value}],pageNumberValue:n,name:n},null))}function Z(){const{isFirst:a,lang:t}=e.inject(d);return e.createVNode(N,{classes:["v-pagination__first",{disabled:a.value}],pageNumberValue:1,name:t.first},null)}function C(){const{isFirst:a,current:t}=e.inject(d);return e.createVNode(N,{classes:["v-pagination__previous",{disabled:a.value}],pageNumberValue:t.value-1,name:"«"},null)}function k(){const{isLast:a,current:t}=e.inject(d);return e.createVNode(N,{classes:["v-pagination__next",{disabled:a.value}],pageNumberValue:t.value+1,name:"»"},null)}function q(){const{isLast:a,totalPage:t,lang:n}=e.inject(d);return e.createVNode(N,{classes:["v-pagination__last",{disabled:a.value}],pageNumberValue:t.value,name:n.last},null)}p.install=(a,t={})=>{if(Object.keys(t).length){const{props:n}=p,{language:u,align:l,info:i,border:P,pageNumber:r,first:f,last:c,pageSizeMenu:S}=t;u&&(n.language.default=u),l&&(n.align.default=l),typeof i=="boolean"&&(n.info.default=i),typeof P=="boolean"&&(n.border.default=P),typeof r=="boolean"&&(n.pageNumber.default=r),typeof f=="boolean"&&(n.first.default=f),typeof c=="boolean"&&(n.last.default=c),typeof S<"u"&&(n.pageSizeMenu.default=S)}a.component(p.name,p)},o.PaginationBar=p,o.PaginationFirstPage=Z,o.PaginationInfo=M,o.PaginationLastPage=q,o.PaginationNextPage=k,o.PaginationPageNumbers=U,o.PaginationPageSizeOptions=G,o.PaginationPanel=D,o.PaginationPreviousPage=C,o.default=p,Object.defineProperties(o,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "v-page",
   "description": "A simple pagination bar",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "author": "TerryZ <terry5@foxmail.com>",
   "type": "module",
   "files": [
@@ -36,7 +36,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/TerryZ/v-page.git"
+    "url": "git+https://github.com/TerryZ/v-page.git"
   },
   "keywords": [
     "front-end",
@@ -50,23 +50,25 @@
     "vue": "^3.4.0"
   },
   "dependencies": {
-    "vue": "^3.5.12"
+    "vue": "^3.5.13"
   },
   "devDependencies": {
     "@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",
+    "@vitejs/plugin-vue": "^5.2.1",
+    "@vitejs/plugin-vue-jsx": "^4.1.1",
+    "@vitest/coverage-v8": "^2.1.8",
     "@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",
+    "eslint": "^8.50.0",
+    "eslint-plugin-vue": "^9.32.0",
+    "postcss": "^8.4.49",
+    "autoprefixer": "^10.4.20",
     "jsdom": "^25.0.1",
-    "sass": "^1.80.2",
-    "typescript": "^5.6.3",
-    "vite": "^5.4.9",
+    "sass": "^1.83.0",
+    "typescript": "^5.7.2",
+    "vite": "^6.0.5",
     "vite-plugin-css-injected-by-js": "^3.5.2",
-    "vitest": "^2.1.3"
+    "vitest": "^2.1.8"
   }
 }

package/types/index.d.ts

@@ -23,7 +23,7 @@ export declare interface PageSlotData {
 /**
  * Pagination plugin for Vue
  */
-declare interface Props {
+declare interface PaginationProps {
   /**
    * The number of current page
    */
@@ -47,11 +47,6 @@ declare interface Props {
    * @default [10, 20, 50, 100]
    */
   pageSizeMenu?: number[]
-  /**
-   * Whether to display page size list panel
-   * @default true
-   */
-  pageSizeOptions?: boolean
   /**
    * Alignment direction
    * @default `right`
@@ -72,26 +67,6 @@ declare interface Props {
    * @default false
    */
   circle?: boolean
-  /**
-   * Whether to display page information panel
-   * @default true
-   */
-  info?: boolean
-  /**
-   * Whether to display page number buttons
-   * @default true
-   */
-  pageNumber?: boolean
-  /**
-   * Whether to display first page button
-   * @default true
-   */
-  first?: boolean
-  /**
-   * Whether to display last page button
-   * @default true
-   */
-  last?: boolean
   /**
    * Whether add `All` item in page length list
    * @default false
@@ -111,17 +86,50 @@ type EmitUpdatePageSize = (event: "update:pageSize", value: number) => void
 /** The event respond pageNumber or pageSize change */
 type EmitChange = (event: "change", value: PageInfo) => void
 
+type ComponentProps = AllowedComponentProps & ComponentCustomProps & VNodeProps
+
 declare interface PaginationBar {
   new (): {
-    $props: AllowedComponentProps & ComponentCustomProps & VNodeProps & Props
+    $props: ComponentProps & PaginationProps
     $emit: EmitUpdateModelValue & EmitUpdatePageSize & EmitChange
     $slots: {
       default?: (defaultSlotData: PageSlotData) => VNode[]
     }
   }
 }
+declare interface PaginationComponent {
+  new (): {
+    $props: ComponentProps
+  }
+}
+declare interface PaginationPanel {
+  new (): {
+    $props: ComponentProps
+    $slots: {
+      default?: () => VNode[]
+    }
+  }
+}
 declare const PaginationBar: PaginationBar
+declare const PaginationPageSizeOptions: PaginationComponent
+declare const PaginationInfo: PaginationComponent
+declare const PaginationPageNumbers: PaginationComponent
+declare const PaginationFirstPage: PaginationComponent
+declare const PaginationPreviousPage: PaginationComponent
+declare const PaginationNextPage: PaginationComponent
+declare const PaginationLastPage: PaginationComponent
+declare const PaginationPanel: PaginationPanel
 
-export { PaginationBar }
+export {
+  PaginationBar,
+  PaginationPageSizeOptions,
+  PaginationInfo,
+  PaginationPageNumbers,
+  PaginationFirstPage,
+  PaginationPreviousPage,
+  PaginationNextPage,
+  PaginationLastPage,
+  PaginationPanel
+}
 
 export default PaginationBar