v-page 3.2.1 → 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,232 +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;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]: {
+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: "全部"
   },
-  [h]: {
+  [S]: {
     pageLength: "Per page",
     pageInfo: "Page #pageNumber#/#totalPage# (total #totalRow# records)",
     first: "First",
     last: "Last",
     all: "All"
   },
-  [W]: {
+  [Z]: {
     pageLength: "Seitenlänge",
     pageInfo: "Aktuell #pageNumber#/#totalPage# (gesamt #totalRow# Aufzeichnungen)",
     first: "Zuerst",
     last: "Letzte",
     all: "Alle"
   },
-  [X]: {
+  [H]: {
     pageLength: "ページごとの記録数",
     pageInfo: "現在の第 #pageNumber#/#totalPage# ページ(全部で #totalRow# 条の記録)",
     first: "トップページ",
     last: "尾のページ",
     all: "すべて"
   },
-  [Y]: {
+  [J]: {
     pageLength: "Resultados por página",
     pageInfo: "#pageNumber#/#totalPage# (total de #totalRow#)",
     first: "Início",
     last: "Fim",
     all: "Todos"
   }
-}, 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 le(e = h) {
-  const u = String(e).toLowerCase();
-  return V[Object.hasOwn(V, u) ? u : h];
+};
+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(e) {
-  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !q(e);
+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 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
-  };
+function Q(e = S) {
+  const a = String(e).toLowerCase();
+  return B[Object.hasOwn(B, a) ? a : S];
 }
-const _ = /* @__PURE__ */ K({
+const N = /* @__PURE__ */ T({
   name: "PaginationBar",
   props: {
     modelValue: {
@@ -235,7 +65,7 @@ const _ = /* @__PURE__ */ K({
     },
     pageSize: {
       type: Number,
-      default: R
+      default: L
     },
     totalRow: {
       type: Number,
@@ -243,7 +73,7 @@ const _ = /* @__PURE__ */ K({
     },
     language: {
       type: String,
-      default: h
+      default: S
     },
     /**
      * Pagination alignment direction
@@ -251,17 +81,12 @@ const _ = /* @__PURE__ */ K({
      */
     align: {
       type: String,
-      default: ee
+      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,
@@ -276,24 +101,6 @@ const _ = /* @__PURE__ */ K({
       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
      *
@@ -312,43 +119,241 @@ const _ = /* @__PURE__ */ K({
   },
   emits: ["update:modelValue", "update:pageSize", "change"],
   setup(e, {
-    emit: u,
-    slots: l
+    emit: a,
+    slots: t
   }) {
     const {
-      containerClasses: d,
-      totalPage: r,
-      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)])]);
+      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)])]);
+    };
   }
 });
-_.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);
+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: 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(_.name, _);
+  e.component(N.name, N);
 };
 export {
-  _ as PaginationBar,
-  _ 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;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"}})});
+(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.1",
+  "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