v-page 3.2.1 → 3.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -21
- package/README.md +84 -85
- package/dist/v-page.js +250 -251
- package/dist/v-page.umd.cjs +1 -1
- package/package.json +75 -72
- package/types/index.d.ts +134 -126
package/LICENSE
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
MIT License
|
|
2
|
-
|
|
3
|
-
Copyright (c) 2018 Terry Zeng
|
|
4
|
-
|
|
5
|
-
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
-
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
-
in the Software without restriction, including without limitation the rights
|
|
8
|
-
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
-
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
-
furnished to do so, subject to the following conditions:
|
|
11
|
-
|
|
12
|
-
The above copyright notice and this permission notice shall be included in all
|
|
13
|
-
copies or substantial portions of the Software.
|
|
14
|
-
|
|
15
|
-
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
-
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
-
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
-
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
-
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
-
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
-
SOFTWARE.
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2018 Terry Zeng
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
CHANGED
|
@@ -1,85 +1,84 @@
|
|
|
1
|
-
# [v-page](https://terryz.github.io/vue/#/page) · [ version instead
|
|
8
|
-
|
|
9
|
-
<!-- ## Features
|
|
10
|
-
|
|
11
|
-
- Simple interface style
|
|
12
|
-
- I18n supported
|
|
13
|
-
- Modularization of Pagination bar features
|
|
14
|
-
- -->
|
|
15
|
-
|
|
16
|
-
## Examples and Documentation
|
|
17
|
-
|
|
18
|
-
Documentation and examples and please visit below sites
|
|
19
|
-
|
|
20
|
-
- [github-pages](https://terryz.github.io/docs-vue3/page/)
|
|
21
|
-
|
|
22
|
-
## Installation
|
|
23
|
-
|
|
24
|
-
[](https://www.npmjs.com/package/v-page)
|
|
25
|
-
|
|
26
|
-
```sh
|
|
27
|
-
# npm
|
|
28
|
-
npm i v-page
|
|
29
|
-
# yarn
|
|
30
|
-
yarn add v-page
|
|
31
|
-
# pnpm
|
|
32
|
-
pnpm add v-page
|
|
33
|
-
```
|
|
34
|
-
|
|
35
|
-
Include and install plugin in your `main.js` file
|
|
36
|
-
|
|
37
|
-
```js
|
|
38
|
-
import { createApp } from 'vue'
|
|
39
|
-
import App from './app.vue'
|
|
40
|
-
import { PaginationBar } from 'v-page'
|
|
41
|
-
|
|
42
|
-
const app = createApp(App)
|
|
43
|
-
// install component globally
|
|
44
|
-
app.use(PaginationBar, {
|
|
45
|
-
// globally config options
|
|
46
|
-
})
|
|
47
|
-
app.mount('#app')
|
|
48
|
-
```
|
|
49
|
-
|
|
50
|
-
Use `v-page` as a locally component
|
|
51
|
-
|
|
52
|
-
```vue
|
|
53
|
-
<template>
|
|
54
|
-
<PaginationBar />
|
|
55
|
-
</template>
|
|
56
|
-
|
|
57
|
-
<script setup>
|
|
58
|
-
import { PaginationBar } from 'v-page'
|
|
59
|
-
</script>
|
|
60
|
-
```
|
|
61
|
-
|
|
62
|
-
## Usage
|
|
63
|
-
|
|
64
|
-
```vue
|
|
65
|
-
<template>
|
|
66
|
-
<PaginationBar
|
|
67
|
-
v-model="pageNumber"
|
|
68
|
-
:total-row="totalRow"
|
|
69
|
-
@change="paginationChange"
|
|
70
|
-
/>
|
|
71
|
-
</template>
|
|
72
|
-
|
|
73
|
-
<script setup lang='ts'>
|
|
74
|
-
import { ref } from 'vue'
|
|
75
|
-
import { PaginationBar } from 'v-page'
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
const
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
```
|
|
1
|
+
# [v-page](https://terryz.github.io/vue/#/page) · [](https://github.com/TerryZ/v-page/actions/workflows/npm-publish.yml) [](https://codecov.io/gh/TerryZ/v-page) [](https://www.npmjs.com/package/v-page) [](https://mit-license.org/) [](https://www.npmjs.com/package/v-page) [](https://standardjs.com)
|
|
2
|
+
|
|
3
|
+
A simple pagination bar for vue3, including size Menu, i18n support features
|
|
4
|
+
|
|
5
|
+
<img src="https://terryz.github.io/image/v-page/v-page.png" alt="v-page" height="54px">
|
|
6
|
+
|
|
7
|
+
If you are using vue `2.x` version, please use [v-page 2.x](https://github.com/TerryZ/v-page/tree/dev-vue-2) version instead
|
|
8
|
+
|
|
9
|
+
<!-- ## Features
|
|
10
|
+
|
|
11
|
+
- Simple interface style
|
|
12
|
+
- I18n supported
|
|
13
|
+
- Modularization of Pagination bar features
|
|
14
|
+
- -->
|
|
15
|
+
|
|
16
|
+
## Examples and Documentation
|
|
17
|
+
|
|
18
|
+
Documentation and examples and please visit below sites
|
|
19
|
+
|
|
20
|
+
- [github-pages](https://terryz.github.io/docs-vue3/page/)
|
|
21
|
+
|
|
22
|
+
## Installation
|
|
23
|
+
|
|
24
|
+
[](https://www.npmjs.com/package/v-page)
|
|
25
|
+
|
|
26
|
+
```sh
|
|
27
|
+
# npm
|
|
28
|
+
npm i v-page
|
|
29
|
+
# yarn
|
|
30
|
+
yarn add v-page
|
|
31
|
+
# pnpm
|
|
32
|
+
pnpm add v-page
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
Include and install plugin in your `main.js` file
|
|
36
|
+
|
|
37
|
+
```js
|
|
38
|
+
import { createApp } from 'vue'
|
|
39
|
+
import App from './app.vue'
|
|
40
|
+
import { PaginationBar } from 'v-page'
|
|
41
|
+
|
|
42
|
+
const app = createApp(App)
|
|
43
|
+
// install component globally
|
|
44
|
+
app.use(PaginationBar, {
|
|
45
|
+
// globally config options
|
|
46
|
+
})
|
|
47
|
+
app.mount('#app')
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
Use `v-page` as a locally component
|
|
51
|
+
|
|
52
|
+
```vue
|
|
53
|
+
<template>
|
|
54
|
+
<PaginationBar />
|
|
55
|
+
</template>
|
|
56
|
+
|
|
57
|
+
<script setup>
|
|
58
|
+
import { PaginationBar } from 'v-page'
|
|
59
|
+
</script>
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
## Usage
|
|
63
|
+
|
|
64
|
+
```vue
|
|
65
|
+
<template>
|
|
66
|
+
<PaginationBar
|
|
67
|
+
v-model="pageNumber"
|
|
68
|
+
:total-row="totalRow"
|
|
69
|
+
@change="paginationChange"
|
|
70
|
+
/>
|
|
71
|
+
</template>
|
|
72
|
+
|
|
73
|
+
<script setup lang='ts'>
|
|
74
|
+
import { ref } from 'vue'
|
|
75
|
+
import { PaginationBar, type PageInfo } from 'v-page'
|
|
76
|
+
// set default page to 3
|
|
77
|
+
const pageNumber = ref<number>(3)
|
|
78
|
+
const totalRow = ref<number>(100)
|
|
79
|
+
// respond for pagination change
|
|
80
|
+
function paginationChange (data: PageInfo): void {
|
|
81
|
+
console.log(data) // { pageNumber: 1, pageSize: 10, totalPage: 10 }
|
|
82
|
+
}
|
|
83
|
+
</script>
|
|
84
|
+
```
|
package/dist/v-page.js
CHANGED
|
@@ -1,232 +1,202 @@
|
|
|
1
1
|
(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)}})();
|
|
2
|
-
import {
|
|
3
|
-
const [
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
] = ["cn", "en", "de", "jp", "pt"],
|
|
10
|
-
[
|
|
2
|
+
import { inject as d, createVNode as n, isVNode as C, defineComponent as G, toRefs as w, ref as h, computed as v, watch as F, onMounted as k, provide as D, Fragment as x } from "vue";
|
|
3
|
+
const s = 1, U = 5, L = 10, V = [L, 20, 50, 100], A = 0, [ie, oe, Z] = ["left", "center", "right"], f = Symbol("pagination"), [
|
|
4
|
+
H,
|
|
5
|
+
S,
|
|
6
|
+
J,
|
|
7
|
+
q,
|
|
8
|
+
K
|
|
9
|
+
] = ["cn", "en", "de", "jp", "pt"], B = {
|
|
10
|
+
[H]: {
|
|
11
11
|
pageLength: "每页记录数",
|
|
12
12
|
pageInfo: "第 #pageNumber#/#totalPage# 页(共#totalRow#条记录)",
|
|
13
13
|
first: "首页",
|
|
14
14
|
last: "尾页",
|
|
15
15
|
all: "全部"
|
|
16
16
|
},
|
|
17
|
-
[
|
|
17
|
+
[S]: {
|
|
18
18
|
pageLength: "Per page",
|
|
19
19
|
pageInfo: "Page #pageNumber#/#totalPage# (total #totalRow# records)",
|
|
20
20
|
first: "First",
|
|
21
21
|
last: "Last",
|
|
22
22
|
all: "All"
|
|
23
23
|
},
|
|
24
|
-
[
|
|
24
|
+
[J]: {
|
|
25
25
|
pageLength: "Seitenlänge",
|
|
26
26
|
pageInfo: "Aktuell #pageNumber#/#totalPage# (gesamt #totalRow# Aufzeichnungen)",
|
|
27
27
|
first: "Zuerst",
|
|
28
28
|
last: "Letzte",
|
|
29
29
|
all: "Alle"
|
|
30
30
|
},
|
|
31
|
-
[
|
|
31
|
+
[q]: {
|
|
32
32
|
pageLength: "ページごとの記録数",
|
|
33
33
|
pageInfo: "現在の第 #pageNumber#/#totalPage# ページ(全部で #totalRow# 条の記録)",
|
|
34
34
|
first: "トップページ",
|
|
35
35
|
last: "尾のページ",
|
|
36
36
|
all: "すべて"
|
|
37
37
|
},
|
|
38
|
-
[
|
|
38
|
+
[K]: {
|
|
39
39
|
pageLength: "Resultados por página",
|
|
40
40
|
pageInfo: "#pageNumber#/#totalPage# (total de #totalRow#)",
|
|
41
41
|
first: "Início",
|
|
42
42
|
last: "Fim",
|
|
43
43
|
all: "Todos"
|
|
44
44
|
}
|
|
45
|
-
}
|
|
46
|
-
function
|
|
47
|
-
if (
|
|
48
|
-
const
|
|
49
|
-
return
|
|
45
|
+
};
|
|
46
|
+
function Q(e, a, t) {
|
|
47
|
+
if (a <= t) return s;
|
|
48
|
+
const i = Math.floor(t / 2), u = a - t + 1, l = e - i;
|
|
49
|
+
return l < s ? s : l > u ? u : l;
|
|
50
|
+
}
|
|
51
|
+
function W(e, a, t) {
|
|
52
|
+
const i = Q(e, a, t);
|
|
53
|
+
return Array.from({ length: t }).map((u, l) => i + l).filter((u) => u >= s && u <= a);
|
|
50
54
|
}
|
|
51
|
-
function
|
|
52
|
-
const
|
|
53
|
-
return
|
|
55
|
+
function X(e = S) {
|
|
56
|
+
const a = String(e).toLowerCase();
|
|
57
|
+
return B[Object.hasOwn(B, a) ? a : S];
|
|
54
58
|
}
|
|
55
|
-
function
|
|
56
|
-
|
|
57
|
-
return V[Object.hasOwn(V, u) ? u : h];
|
|
59
|
+
function M(e) {
|
|
60
|
+
return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !C(e);
|
|
58
61
|
}
|
|
59
|
-
function
|
|
60
|
-
|
|
62
|
+
function _(e, {
|
|
63
|
+
slots: a
|
|
64
|
+
}) {
|
|
65
|
+
return n("a", {
|
|
66
|
+
href: "javascript:void(0)"
|
|
67
|
+
}, [a?.default?.()]);
|
|
61
68
|
}
|
|
62
|
-
function
|
|
69
|
+
function m({
|
|
70
|
+
classes: e,
|
|
71
|
+
pageNumberValue: a,
|
|
72
|
+
name: t
|
|
73
|
+
}) {
|
|
63
74
|
const {
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
"v-pagination--right": e.align === "right",
|
|
74
|
-
"v-pagination--center": e.align === "center",
|
|
75
|
-
"v-pagination--disabled": e.disabled,
|
|
76
|
-
"v-pagination--border": e.border,
|
|
77
|
-
"v-pagination--circle": !e.border && e.circle
|
|
78
|
-
})), I = b(() => n.value === f), L = b(() => n.value === c.value);
|
|
79
|
-
w(() => e.modelValue, N), w(() => e.pageSize, B);
|
|
80
|
-
function N(a = f) {
|
|
81
|
-
if (e.disabled || typeof a != "number") return;
|
|
82
|
-
let o = a < f ? f : a;
|
|
83
|
-
a > c.value && c.value > 0 && (o = c.value), o !== n.value && (n.value = o, u("update:modelValue", n.value), O());
|
|
84
|
-
}
|
|
85
|
-
function B(a) {
|
|
86
|
-
if (typeof a == "number" && !(a < 0) && a !== i.value) {
|
|
87
|
-
if (i.value = a, u("update:pageSize", i.value), n.value === f)
|
|
88
|
-
return O();
|
|
89
|
-
N(f);
|
|
90
|
-
}
|
|
91
|
-
}
|
|
92
|
-
function O() {
|
|
93
|
-
u("change", {
|
|
94
|
-
pageNumber: n.value,
|
|
95
|
-
pageSize: Number(i.value),
|
|
96
|
-
totalPage: c.value
|
|
97
|
-
});
|
|
98
|
-
}
|
|
99
|
-
function S(a, {
|
|
100
|
-
slots: o
|
|
101
|
-
}) {
|
|
102
|
-
var g;
|
|
103
|
-
return t("a", {
|
|
104
|
-
href: "javascript:void(0)"
|
|
105
|
-
}, [(g = o == null ? void 0 : o.default) == null ? void 0 : g.call(o)]);
|
|
106
|
-
}
|
|
107
|
-
function M() {
|
|
108
|
-
if (!d.value) return null;
|
|
109
|
-
const a = () => m.value.map((g) => t("option", {
|
|
110
|
-
key: g,
|
|
111
|
-
value: g,
|
|
112
|
-
selected: i.value === g
|
|
113
|
-
}, [g])), o = () => e.displayAll ? t("option", {
|
|
114
|
-
value: z,
|
|
115
|
-
selected: i.value === z
|
|
116
|
-
}, [p.all]) : null;
|
|
117
|
-
return t("li", {
|
|
118
|
-
class: "v-pagination__list"
|
|
119
|
-
}, [t(S, null, {
|
|
120
|
-
default: () => [t("span", null, [p.pageLength]), t("select", {
|
|
121
|
-
disabled: e.disabled,
|
|
122
|
-
onChange: (g) => B(Number(g.target.value))
|
|
123
|
-
}, [t(a, null, null), t(o, null, null)])]
|
|
124
|
-
})]);
|
|
125
|
-
}
|
|
126
|
-
function T() {
|
|
127
|
-
if (!e.info) return null;
|
|
128
|
-
const a = p.pageInfo.replace("#pageNumber#", n.value).replace("#totalPage#", c.value).replace("#totalRow#", s.value);
|
|
129
|
-
return t("li", {
|
|
130
|
-
class: "v-pagination__info"
|
|
131
|
-
}, [t(S, null, E(a) ? a : {
|
|
132
|
-
default: () => [a]
|
|
133
|
-
})]);
|
|
134
|
-
}
|
|
135
|
-
function j() {
|
|
136
|
-
let a;
|
|
137
|
-
if (!Object.hasOwn(l, "default")) return null;
|
|
138
|
-
const o = {
|
|
139
|
-
pageNumber: n.value,
|
|
140
|
-
pageSize: i.value,
|
|
141
|
-
totalPage: c.value,
|
|
142
|
-
totalRow: s.value,
|
|
143
|
-
isFirst: I.value,
|
|
144
|
-
isLast: L.value
|
|
145
|
-
};
|
|
146
|
-
return t("li", {
|
|
147
|
-
class: "v-pagination__slot"
|
|
148
|
-
}, [t(S, null, E(a = l.default(o)) ? a : {
|
|
149
|
-
default: () => [a]
|
|
150
|
-
})]);
|
|
151
|
-
}
|
|
152
|
-
function P({
|
|
153
|
-
classes: a,
|
|
154
|
-
pageNumberValue: o,
|
|
155
|
-
name: g,
|
|
156
|
-
hasItem: Z = !0
|
|
157
|
-
}) {
|
|
158
|
-
return Z ? t("li", {
|
|
159
|
-
class: ["v-pagination__item", ...a]
|
|
160
|
-
}, [t(S, {
|
|
161
|
-
onClick: () => N(o)
|
|
162
|
-
}, E(g) ? g : {
|
|
163
|
-
default: () => [g]
|
|
164
|
-
})]) : null;
|
|
165
|
-
}
|
|
166
|
-
function G() {
|
|
167
|
-
return e.pageNumber ? y.value.map((a) => t(P, {
|
|
168
|
-
key: a,
|
|
169
|
-
classes: [{
|
|
170
|
-
active: a === n.value
|
|
171
|
-
}],
|
|
172
|
-
pageNumberValue: a,
|
|
173
|
-
name: a
|
|
174
|
-
}, null)) : null;
|
|
175
|
-
}
|
|
176
|
-
function k() {
|
|
177
|
-
return t(P, {
|
|
178
|
-
classes: ["v-pagination__first", {
|
|
179
|
-
disabled: I.value
|
|
180
|
-
}],
|
|
181
|
-
pageNumberValue: f,
|
|
182
|
-
name: p.first,
|
|
183
|
-
hasItem: e.first
|
|
184
|
-
}, null);
|
|
185
|
-
}
|
|
186
|
-
function D() {
|
|
187
|
-
return t(P, {
|
|
188
|
-
classes: ["v-pagination__previous", {
|
|
189
|
-
disabled: I.value
|
|
190
|
-
}],
|
|
191
|
-
pageNumberValue: n.value - 1,
|
|
192
|
-
name: "«"
|
|
193
|
-
}, null);
|
|
194
|
-
}
|
|
195
|
-
function x() {
|
|
196
|
-
return t(P, {
|
|
197
|
-
classes: ["v-pagination__next", {
|
|
198
|
-
disabled: L.value
|
|
199
|
-
}],
|
|
200
|
-
pageNumberValue: n.value + 1,
|
|
201
|
-
name: "»"
|
|
202
|
-
}, null);
|
|
203
|
-
}
|
|
204
|
-
function U() {
|
|
205
|
-
return t(P, {
|
|
206
|
-
classes: ["v-pagination__last", {
|
|
207
|
-
disabled: L.value
|
|
208
|
-
}],
|
|
209
|
-
pageNumberValue: c.value,
|
|
210
|
-
name: p.last,
|
|
211
|
-
hasItem: e.last
|
|
212
|
-
}, null);
|
|
213
|
-
}
|
|
214
|
-
return J(() => N(e.modelValue || f)), {
|
|
215
|
-
containerClasses: C,
|
|
216
|
-
totalPage: c,
|
|
217
|
-
current: n,
|
|
218
|
-
pageNumbers: y,
|
|
219
|
-
PageSizeOptions: M,
|
|
220
|
-
PageInformation: T,
|
|
221
|
-
PageSlot: j,
|
|
222
|
-
PageNumberItems: G,
|
|
223
|
-
FirstPageItem: k,
|
|
224
|
-
PreviousPageItem: D,
|
|
225
|
-
NextPageItem: x,
|
|
226
|
-
LastPageItem: U
|
|
227
|
-
};
|
|
75
|
+
changePageNumber: i
|
|
76
|
+
} = d(f);
|
|
77
|
+
return n("li", {
|
|
78
|
+
class: ["v-pagination__item", ...e]
|
|
79
|
+
}, [n(_, {
|
|
80
|
+
onClick: () => i(a)
|
|
81
|
+
}, M(t) ? t : {
|
|
82
|
+
default: () => [t]
|
|
83
|
+
})]);
|
|
228
84
|
}
|
|
229
|
-
|
|
85
|
+
function Y() {
|
|
86
|
+
const {
|
|
87
|
+
lang: e,
|
|
88
|
+
sizeList: a,
|
|
89
|
+
pageSize: t,
|
|
90
|
+
disabled: i,
|
|
91
|
+
displayAll: u,
|
|
92
|
+
changePageSize: l
|
|
93
|
+
} = d(f), p = () => a.value.map((c) => n("option", {
|
|
94
|
+
key: c,
|
|
95
|
+
value: c,
|
|
96
|
+
selected: t.value === c
|
|
97
|
+
}, [c])), o = () => u.value ? n("option", {
|
|
98
|
+
value: A,
|
|
99
|
+
selected: t.value === A
|
|
100
|
+
}, [e.all]) : null;
|
|
101
|
+
return n("li", {
|
|
102
|
+
class: "v-pagination__list"
|
|
103
|
+
}, [n(_, null, {
|
|
104
|
+
default: () => [n("span", null, [e.pageLength]), n("select", {
|
|
105
|
+
disabled: i.value,
|
|
106
|
+
onChange: (c) => l(Number(c.target.value))
|
|
107
|
+
}, [n(p, null, null), n(o, null, null)])]
|
|
108
|
+
})]);
|
|
109
|
+
}
|
|
110
|
+
function $() {
|
|
111
|
+
const {
|
|
112
|
+
lang: e,
|
|
113
|
+
current: a,
|
|
114
|
+
totalPage: t,
|
|
115
|
+
totalRow: i
|
|
116
|
+
} = d(f), u = e.pageInfo.replace("#pageNumber#", a.value).replace("#totalPage#", t.value).replace("#totalRow#", i.value);
|
|
117
|
+
return n("li", {
|
|
118
|
+
class: "v-pagination__info"
|
|
119
|
+
}, [n(_, null, M(u) ? u : {
|
|
120
|
+
default: () => [u]
|
|
121
|
+
})]);
|
|
122
|
+
}
|
|
123
|
+
function re(e, {
|
|
124
|
+
slots: a
|
|
125
|
+
}) {
|
|
126
|
+
return n("li", {
|
|
127
|
+
class: "v-pagination__slot"
|
|
128
|
+
}, [n(_, null, {
|
|
129
|
+
default: () => [a?.default?.()]
|
|
130
|
+
})]);
|
|
131
|
+
}
|
|
132
|
+
function ee() {
|
|
133
|
+
const {
|
|
134
|
+
pageNumbers: e,
|
|
135
|
+
current: a
|
|
136
|
+
} = d(f);
|
|
137
|
+
return e.value.map((t) => n(m, {
|
|
138
|
+
key: t,
|
|
139
|
+
classes: [{
|
|
140
|
+
active: t === a.value
|
|
141
|
+
}],
|
|
142
|
+
pageNumberValue: t,
|
|
143
|
+
name: t
|
|
144
|
+
}, null));
|
|
145
|
+
}
|
|
146
|
+
function ae() {
|
|
147
|
+
const {
|
|
148
|
+
isFirst: e,
|
|
149
|
+
lang: a
|
|
150
|
+
} = d(f);
|
|
151
|
+
return n(m, {
|
|
152
|
+
classes: ["v-pagination__first", {
|
|
153
|
+
disabled: e.value
|
|
154
|
+
}],
|
|
155
|
+
pageNumberValue: s,
|
|
156
|
+
name: a.first
|
|
157
|
+
}, null);
|
|
158
|
+
}
|
|
159
|
+
function te() {
|
|
160
|
+
const {
|
|
161
|
+
isFirst: e,
|
|
162
|
+
current: a
|
|
163
|
+
} = d(f);
|
|
164
|
+
return n(m, {
|
|
165
|
+
classes: ["v-pagination__previous", {
|
|
166
|
+
disabled: e.value
|
|
167
|
+
}],
|
|
168
|
+
pageNumberValue: a.value - 1,
|
|
169
|
+
name: "«"
|
|
170
|
+
}, null);
|
|
171
|
+
}
|
|
172
|
+
function ne() {
|
|
173
|
+
const {
|
|
174
|
+
isLast: e,
|
|
175
|
+
current: a
|
|
176
|
+
} = d(f);
|
|
177
|
+
return n(m, {
|
|
178
|
+
classes: ["v-pagination__next", {
|
|
179
|
+
disabled: e.value
|
|
180
|
+
}],
|
|
181
|
+
pageNumberValue: a.value + 1,
|
|
182
|
+
name: "»"
|
|
183
|
+
}, null);
|
|
184
|
+
}
|
|
185
|
+
function le() {
|
|
186
|
+
const {
|
|
187
|
+
isLast: e,
|
|
188
|
+
totalPage: a,
|
|
189
|
+
lang: t
|
|
190
|
+
} = d(f);
|
|
191
|
+
return n(m, {
|
|
192
|
+
classes: ["v-pagination__last", {
|
|
193
|
+
disabled: e.value
|
|
194
|
+
}],
|
|
195
|
+
pageNumberValue: a.value,
|
|
196
|
+
name: t.last
|
|
197
|
+
}, null);
|
|
198
|
+
}
|
|
199
|
+
const N = /* @__PURE__ */ G({
|
|
230
200
|
name: "PaginationBar",
|
|
231
201
|
props: {
|
|
232
202
|
modelValue: {
|
|
@@ -235,7 +205,7 @@ const _ = /* @__PURE__ */ K({
|
|
|
235
205
|
},
|
|
236
206
|
pageSize: {
|
|
237
207
|
type: Number,
|
|
238
|
-
default:
|
|
208
|
+
default: L
|
|
239
209
|
},
|
|
240
210
|
totalRow: {
|
|
241
211
|
type: Number,
|
|
@@ -243,7 +213,7 @@ const _ = /* @__PURE__ */ K({
|
|
|
243
213
|
},
|
|
244
214
|
language: {
|
|
245
215
|
type: String,
|
|
246
|
-
default:
|
|
216
|
+
default: S
|
|
247
217
|
},
|
|
248
218
|
/**
|
|
249
219
|
* Pagination alignment direction
|
|
@@ -251,17 +221,12 @@ const _ = /* @__PURE__ */ K({
|
|
|
251
221
|
*/
|
|
252
222
|
align: {
|
|
253
223
|
type: String,
|
|
254
|
-
default:
|
|
224
|
+
default: Z
|
|
255
225
|
},
|
|
256
226
|
/** Page size list */
|
|
257
227
|
pageSizeMenu: {
|
|
258
228
|
type: [Array],
|
|
259
|
-
default: () =>
|
|
260
|
-
},
|
|
261
|
-
/** Display page size menu panel */
|
|
262
|
-
pageSizeOptions: {
|
|
263
|
-
type: Boolean,
|
|
264
|
-
default: !0
|
|
229
|
+
default: () => V
|
|
265
230
|
},
|
|
266
231
|
disabled: {
|
|
267
232
|
type: Boolean,
|
|
@@ -276,24 +241,6 @@ const _ = /* @__PURE__ */ K({
|
|
|
276
241
|
type: Boolean,
|
|
277
242
|
default: !1
|
|
278
243
|
},
|
|
279
|
-
info: {
|
|
280
|
-
type: Boolean,
|
|
281
|
-
default: !0
|
|
282
|
-
},
|
|
283
|
-
pageNumber: {
|
|
284
|
-
type: Boolean,
|
|
285
|
-
default: !0
|
|
286
|
-
},
|
|
287
|
-
/** first page button */
|
|
288
|
-
first: {
|
|
289
|
-
type: Boolean,
|
|
290
|
-
default: !0
|
|
291
|
-
},
|
|
292
|
-
/** last page button */
|
|
293
|
-
last: {
|
|
294
|
-
type: Boolean,
|
|
295
|
-
default: !0
|
|
296
|
-
},
|
|
297
244
|
/**
|
|
298
245
|
* Display all records
|
|
299
246
|
*
|
|
@@ -312,43 +259,95 @@ const _ = /* @__PURE__ */ K({
|
|
|
312
259
|
},
|
|
313
260
|
emits: ["update:modelValue", "update:pageSize", "change"],
|
|
314
261
|
setup(e, {
|
|
315
|
-
emit:
|
|
316
|
-
slots:
|
|
262
|
+
emit: a,
|
|
263
|
+
slots: t
|
|
317
264
|
}) {
|
|
318
265
|
const {
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
266
|
+
pageSizeMenu: i,
|
|
267
|
+
totalRow: u
|
|
268
|
+
} = w(e), l = h(0), p = h(U), o = h(e.pageSize ?? L), c = v(() => {
|
|
269
|
+
const r = Array.from(Array.isArray(i.value) && i.value.length > 0 ? i.value : V);
|
|
270
|
+
return o.value !== 0 && !r.includes(o.value) && r.push(o.value), r.sort((b, T) => b - T);
|
|
271
|
+
}), g = v(() => o.value === A ? s : Math.ceil(u.value / o.value)), P = v(() => W(l.value, g.value, p.value)), O = v(() => ({
|
|
272
|
+
"v-pagination": !0,
|
|
273
|
+
"v-pagination--right": e.align === "right",
|
|
274
|
+
"v-pagination--center": e.align === "center",
|
|
275
|
+
"v-pagination--disabled": e.disabled,
|
|
276
|
+
"v-pagination--border": e.border,
|
|
277
|
+
"v-pagination--circle": !e.border && e.circle
|
|
278
|
+
})), z = v(() => l.value === s), E = v(() => l.value === g.value);
|
|
279
|
+
F(() => e.modelValue, y), F(() => e.pageSize, R);
|
|
280
|
+
function y(r = s) {
|
|
281
|
+
if (e.disabled || typeof r != "number") return;
|
|
282
|
+
let b = r < s ? s : r;
|
|
283
|
+
r > g.value && g.value > 0 && (b = g.value), b !== l.value && (l.value = b, a("update:modelValue", l.value), I());
|
|
284
|
+
}
|
|
285
|
+
function R(r) {
|
|
286
|
+
if (typeof r == "number" && !(r < 0) && r !== o.value) {
|
|
287
|
+
if (o.value = r, a("update:pageSize", o.value), l.value === s)
|
|
288
|
+
return I();
|
|
289
|
+
y(s);
|
|
290
|
+
}
|
|
291
|
+
}
|
|
292
|
+
function I() {
|
|
293
|
+
a("change", {
|
|
294
|
+
pageNumber: l.value,
|
|
295
|
+
pageSize: Number(o.value),
|
|
296
|
+
totalPage: g.value
|
|
297
|
+
});
|
|
298
|
+
}
|
|
299
|
+
function j() {
|
|
300
|
+
return t.default ? t.default({
|
|
301
|
+
pageNumber: l.value,
|
|
302
|
+
pageSize: o.value,
|
|
303
|
+
totalPage: g.value,
|
|
304
|
+
totalRow: u.value,
|
|
305
|
+
isFirst: z.value,
|
|
306
|
+
isLast: E.value
|
|
307
|
+
}) : n(x, null, [n(Y, null, null), n($, null, null), n(ae, null, null), n(te, null, null), n(ee, null, null), n(ne, null, null), n(le, null, null)]);
|
|
308
|
+
}
|
|
309
|
+
return k(() => y(e.modelValue || s)), D(f, {
|
|
310
|
+
lang: X(e.language),
|
|
311
|
+
pageSize: o,
|
|
312
|
+
sizeList: c,
|
|
313
|
+
pageNumbers: P,
|
|
314
|
+
isFirst: z,
|
|
315
|
+
isLast: E,
|
|
316
|
+
current: l,
|
|
317
|
+
totalPage: g,
|
|
318
|
+
changePageNumber: y,
|
|
319
|
+
changePageSize: R,
|
|
320
|
+
...w(e)
|
|
321
|
+
}), () => e.hideOnSinglePage && g.value <= 1 ? null : n("div", {
|
|
322
|
+
class: O.value
|
|
323
|
+
}, [n("ul", null, [n(j, null, null)])]);
|
|
333
324
|
}
|
|
334
325
|
});
|
|
335
|
-
|
|
336
|
-
if (Object.keys(
|
|
337
|
-
const { props:
|
|
338
|
-
language:
|
|
339
|
-
align:
|
|
340
|
-
info:
|
|
341
|
-
border:
|
|
342
|
-
pageNumber:
|
|
343
|
-
first:
|
|
344
|
-
last:
|
|
345
|
-
pageSizeMenu:
|
|
346
|
-
} =
|
|
347
|
-
|
|
326
|
+
N.install = (e, a = {}) => {
|
|
327
|
+
if (Object.keys(a).length) {
|
|
328
|
+
const { props: t } = N, {
|
|
329
|
+
language: i,
|
|
330
|
+
align: u,
|
|
331
|
+
info: l,
|
|
332
|
+
border: p,
|
|
333
|
+
pageNumber: o,
|
|
334
|
+
first: c,
|
|
335
|
+
last: g,
|
|
336
|
+
pageSizeMenu: P
|
|
337
|
+
} = a;
|
|
338
|
+
i && (t.language.default = i), u && (t.align.default = u), typeof l == "boolean" && (t.info.default = l), typeof p == "boolean" && (t.border.default = p), typeof o == "boolean" && (t.pageNumber.default = o), typeof c == "boolean" && (t.first.default = c), typeof g == "boolean" && (t.last.default = g), typeof P < "u" && (t.pageSizeMenu.default = P);
|
|
348
339
|
}
|
|
349
|
-
e.component(
|
|
340
|
+
e.component(N.name, N);
|
|
350
341
|
};
|
|
351
342
|
export {
|
|
352
|
-
|
|
353
|
-
|
|
343
|
+
N as PaginationBar,
|
|
344
|
+
ae as PaginationFirstPage,
|
|
345
|
+
$ as PaginationInfo,
|
|
346
|
+
le as PaginationLastPage,
|
|
347
|
+
ne as PaginationNextPage,
|
|
348
|
+
ee as PaginationPageNumbers,
|
|
349
|
+
Y as PaginationPageSizes,
|
|
350
|
+
re as PaginationPanel,
|
|
351
|
+
te as PaginationPreviousPage,
|
|
352
|
+
N as default
|
|
354
353
|
};
|
package/dist/v-page.umd.cjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
(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)}})();
|
|
2
|
-
(function(
|
|
2
|
+
(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 y=[10,20,50,100],_=0,[Y,$,M]=["left","center","right"],d=Symbol("pagination"),[G,m,O,D,U]=["cn","en","de","jp","pt"],I={[G]:{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"},[O]:{pageLength:"Seitenlänge",pageInfo:"Aktuell #pageNumber#/#totalPage# (gesamt #totalRow# Aufzeichnungen)",first:"Zuerst",last:"Letzte",all:"Alle"},[D]:{pageLength:"ページごとの記録数",pageInfo:"現在の第 #pageNumber#/#totalPage# ページ(全部で #totalRow# 条の記録)",first:"トップページ",last:"尾のページ",all:"すべて"},[U]:{pageLength:"Resultados por página",pageInfo:"#pageNumber#/#totalPage# (total de #totalRow#)",first:"Início",last:"Fim",all:"Todos"}};function Z(a,t,n){if(t<=n)return 1;const r=Math.floor(n/2),i=t-n+1,l=a-r;return l<1?1:l>i?i:l}function C(a,t,n){const r=Z(a,t,n);return Array.from({length:n}).map((i,l)=>r+l).filter(i=>i>=1&&i<=t)}function k(a=m){const t=String(a).toLowerCase();return I[Object.hasOwn(I,t)?t:m]}function h(a){return typeof a=="function"||Object.prototype.toString.call(a)==="[object Object]"&&!e.isVNode(a)}function b(a,{slots:t}){return e.createVNode("a",{href:"javascript:void(0)"},[t?.default?.()])}function P({classes:a,pageNumberValue:t,name:n}){const{changePageNumber:r}=e.inject(d);return e.createVNode("li",{class:["v-pagination__item",...a]},[e.createVNode(b,{onClick:()=>r(t)},h(n)?n:{default:()=>[n]})])}function R(){const{lang:a,sizeList:t,pageSize:n,disabled:r,displayAll:i,changePageSize:l}=e.inject(d),p=()=>t.value.map(s=>e.createVNode("option",{key:s,value:s,selected:n.value===s},[s])),u=()=>i.value?e.createVNode("option",{value:_,selected:n.value===_},[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:r.value,onChange:s=>l(Number(s.target.value))},[e.createVNode(p,null,null),e.createVNode(u,null,null)])]})])}function A(){const{lang:a,current:t,totalPage:n,totalRow:r}=e.inject(d),i=a.pageInfo.replace("#pageNumber#",t.value).replace("#totalPage#",n.value).replace("#totalRow#",r.value);return e.createVNode("li",{class:"v-pagination__info"},[e.createVNode(b,null,h(i)?i:{default:()=>[i]})])}function q(a,{slots:t}){return e.createVNode("li",{class:"v-pagination__slot"},[e.createVNode(b,null,{default:()=>[t?.default?.()]})])}function E(){const{pageNumbers:a,current:t}=e.inject(d);return a.value.map(n=>e.createVNode(P,{key:n,classes:[{active:n===t.value}],pageNumberValue:n,name:n},null))}function L(){const{isFirst:a,lang:t}=e.inject(d);return e.createVNode(P,{classes:["v-pagination__first",{disabled:a.value}],pageNumberValue:1,name:t.first},null)}function F(){const{isFirst:a,current:t}=e.inject(d);return e.createVNode(P,{classes:["v-pagination__previous",{disabled:a.value}],pageNumberValue:t.value-1,name:"«"},null)}function T(){const{isLast:a,current:t}=e.inject(d);return e.createVNode(P,{classes:["v-pagination__next",{disabled:a.value}],pageNumberValue:t.value+1,name:"»"},null)}function z(){const{isLast:a,totalPage:t,lang:n}=e.inject(d);return e.createVNode(P,{classes:["v-pagination__last",{disabled:a.value}],pageNumberValue:t.value,name:n.last},null)}const f=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:M},pageSizeMenu:{type:[Array],default:()=>y},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:r,totalRow:i}=e.toRefs(a),l=e.ref(0),p=e.ref(5),u=e.ref(a.pageSize??10),s=e.computed(()=>{const g=Array.from(Array.isArray(r.value)&&r.value.length>0?r.value:y);return u.value!==0&&!g.includes(u.value)&&g.push(u.value),g.sort((N,K)=>N-K)}),c=e.computed(()=>u.value===_?1:Math.ceil(i.value/u.value)),S=e.computed(()=>C(l.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})),j=e.computed(()=>l.value===1),v=e.computed(()=>l.value===c.value);e.watch(()=>a.modelValue,V),e.watch(()=>a.pageSize,w);function V(g=1){if(a.disabled||typeof g!="number")return;let N=g<1?1:g;g>c.value&&c.value>0&&(N=c.value),N!==l.value&&(l.value=N,t("update:modelValue",l.value),B())}function w(g){if(typeof g=="number"&&!(g<0)&&g!==u.value){if(u.value=g,t("update:pageSize",u.value),l.value===1)return B();V(1)}}function B(){t("change",{pageNumber:l.value,pageSize:Number(u.value),totalPage:c.value})}function J(){return n.default?n.default({pageNumber:l.value,pageSize:u.value,totalPage:c.value,totalRow:i.value,isFirst:j.value,isLast:v.value}):e.createVNode(e.Fragment,null,[e.createVNode(R,null,null),e.createVNode(A,null,null),e.createVNode(L,null,null),e.createVNode(F,null,null),e.createVNode(E,null,null),e.createVNode(T,null,null),e.createVNode(z,null,null)])}return e.onMounted(()=>V(a.modelValue||1)),e.provide(d,{lang:k(a.language),pageSize:u,sizeList:s,pageNumbers:S,isFirst:j,isLast:v,current:l,totalPage:c,changePageNumber:V,changePageSize:w,...e.toRefs(a)}),()=>a.hideOnSinglePage&&c.value<=1?null:e.createVNode("div",{class:H.value},[e.createVNode("ul",null,[e.createVNode(J,null,null)])])}});f.install=(a,t={})=>{if(Object.keys(t).length){const{props:n}=f,{language:r,align:i,info:l,border:p,pageNumber:u,first:s,last:c,pageSizeMenu:S}=t;r&&(n.language.default=r),i&&(n.align.default=i),typeof l=="boolean"&&(n.info.default=l),typeof p=="boolean"&&(n.border.default=p),typeof u=="boolean"&&(n.pageNumber.default=u),typeof s=="boolean"&&(n.first.default=s),typeof c=="boolean"&&(n.last.default=c),typeof S<"u"&&(n.pageSizeMenu.default=S)}a.component(f.name,f)},o.PaginationBar=f,o.PaginationFirstPage=L,o.PaginationInfo=A,o.PaginationLastPage=z,o.PaginationNextPage=T,o.PaginationPageNumbers=E,o.PaginationPageSizes=R,o.PaginationPanel=q,o.PaginationPreviousPage=F,o.default=f,Object.defineProperties(o,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));
|
package/package.json
CHANGED
|
@@ -1,72 +1,75 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "v-page",
|
|
3
|
-
"description": "A simple pagination bar",
|
|
4
|
-
"version": "3.
|
|
5
|
-
"author": "TerryZ <terry5@foxmail.com>",
|
|
6
|
-
"type": "module",
|
|
7
|
-
"files": [
|
|
8
|
-
"./dist",
|
|
9
|
-
"./types"
|
|
10
|
-
],
|
|
11
|
-
"main": "./dist/v-page.umd.cjs",
|
|
12
|
-
"module": "./dist/v-page.js",
|
|
13
|
-
"exports": {
|
|
14
|
-
".": {
|
|
15
|
-
"import": {
|
|
16
|
-
"types": "./types/index.d.ts",
|
|
17
|
-
"default": "./dist/v-page.js"
|
|
18
|
-
},
|
|
19
|
-
"require": "./dist/v-page.umd.cjs"
|
|
20
|
-
},
|
|
21
|
-
"./types": {
|
|
22
|
-
"import": {
|
|
23
|
-
"types": "./types/index.d.ts"
|
|
24
|
-
}
|
|
25
|
-
}
|
|
26
|
-
},
|
|
27
|
-
"typings": "./types/index.d.ts",
|
|
28
|
-
"license": "MIT",
|
|
29
|
-
"
|
|
30
|
-
|
|
31
|
-
"
|
|
32
|
-
"
|
|
33
|
-
"
|
|
34
|
-
"
|
|
35
|
-
"
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
"
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
"
|
|
44
|
-
"
|
|
45
|
-
"
|
|
46
|
-
"
|
|
47
|
-
"
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
"@
|
|
58
|
-
"@vitejs/plugin-vue
|
|
59
|
-
"@
|
|
60
|
-
"@
|
|
61
|
-
"@vue/
|
|
62
|
-
"
|
|
63
|
-
"
|
|
64
|
-
"eslint
|
|
65
|
-
"
|
|
66
|
-
"
|
|
67
|
-
"
|
|
68
|
-
"
|
|
69
|
-
"
|
|
70
|
-
"
|
|
71
|
-
|
|
72
|
-
|
|
1
|
+
{
|
|
2
|
+
"name": "v-page",
|
|
3
|
+
"description": "A simple pagination bar",
|
|
4
|
+
"version": "3.4.0",
|
|
5
|
+
"author": "TerryZ <terry5@foxmail.com>",
|
|
6
|
+
"type": "module",
|
|
7
|
+
"files": [
|
|
8
|
+
"./dist",
|
|
9
|
+
"./types"
|
|
10
|
+
],
|
|
11
|
+
"main": "./dist/v-page.umd.cjs",
|
|
12
|
+
"module": "./dist/v-page.js",
|
|
13
|
+
"exports": {
|
|
14
|
+
".": {
|
|
15
|
+
"import": {
|
|
16
|
+
"types": "./types/index.d.ts",
|
|
17
|
+
"default": "./dist/v-page.js"
|
|
18
|
+
},
|
|
19
|
+
"require": "./dist/v-page.umd.cjs"
|
|
20
|
+
},
|
|
21
|
+
"./types": {
|
|
22
|
+
"import": {
|
|
23
|
+
"types": "./types/index.d.ts"
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
},
|
|
27
|
+
"typings": "./types/index.d.ts",
|
|
28
|
+
"license": "MIT",
|
|
29
|
+
"packageManager": "pnpm@9.15.9",
|
|
30
|
+
"scripts": {
|
|
31
|
+
"dev": "vite",
|
|
32
|
+
"build": "vite build",
|
|
33
|
+
"preview": "vite preview --port 4173",
|
|
34
|
+
"test:unit": "vitest",
|
|
35
|
+
"coverage": "vitest run --coverage",
|
|
36
|
+
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore"
|
|
37
|
+
},
|
|
38
|
+
"repository": {
|
|
39
|
+
"type": "git",
|
|
40
|
+
"url": "git+https://github.com/TerryZ/v-page.git"
|
|
41
|
+
},
|
|
42
|
+
"keywords": [
|
|
43
|
+
"front-end",
|
|
44
|
+
"web",
|
|
45
|
+
"vue",
|
|
46
|
+
"vuejs",
|
|
47
|
+
"page",
|
|
48
|
+
"pagination"
|
|
49
|
+
],
|
|
50
|
+
"peerDependencies": {
|
|
51
|
+
"vue": "^3.4.0"
|
|
52
|
+
},
|
|
53
|
+
"dependencies": {
|
|
54
|
+
"vue": "^3.5.13"
|
|
55
|
+
},
|
|
56
|
+
"devDependencies": {
|
|
57
|
+
"@rushstack/eslint-patch": "^1.10.4",
|
|
58
|
+
"@vitejs/plugin-vue": "^6.0.1",
|
|
59
|
+
"@vitejs/plugin-vue-jsx": "^5.1.1",
|
|
60
|
+
"@vitest/coverage-v8": "^3.2.4",
|
|
61
|
+
"@vue/eslint-config-standard": "^8.0.1",
|
|
62
|
+
"@vue/test-utils": "^2.4.6",
|
|
63
|
+
"bootstrap": "^5.3.8",
|
|
64
|
+
"eslint": "^8.50.0",
|
|
65
|
+
"eslint-plugin-vue": "^9.32.0",
|
|
66
|
+
"postcss": "^8.5.6",
|
|
67
|
+
"autoprefixer": "^10.4.21",
|
|
68
|
+
"jsdom": "^27.0.0",
|
|
69
|
+
"sass": "^1.93.2",
|
|
70
|
+
"typescript": "^5.9.3",
|
|
71
|
+
"vite": "^7.1.9",
|
|
72
|
+
"vite-plugin-css-injected-by-js": "^3.5.2",
|
|
73
|
+
"vitest": "^3.2.4"
|
|
74
|
+
}
|
|
75
|
+
}
|
package/types/index.d.ts
CHANGED
|
@@ -1,127 +1,135 @@
|
|
|
1
|
-
import {
|
|
2
|
-
AllowedComponentProps,
|
|
3
|
-
ComponentCustomProps,
|
|
4
|
-
VNodeProps,
|
|
5
|
-
VNode
|
|
6
|
-
} from 'vue'
|
|
7
|
-
|
|
8
|
-
export declare interface PageInfo {
|
|
9
|
-
pageNumber: number
|
|
10
|
-
pageSize: number
|
|
11
|
-
totalPage: number
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
export declare interface PageSlotData {
|
|
15
|
-
pageNumber: number
|
|
16
|
-
pageSize: number
|
|
17
|
-
totalPage: number
|
|
18
|
-
totalRow: number
|
|
19
|
-
isFirst: boolean
|
|
20
|
-
isLast: boolean
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
/**
|
|
24
|
-
* Pagination plugin for Vue
|
|
25
|
-
*/
|
|
26
|
-
declare interface
|
|
27
|
-
/**
|
|
28
|
-
* The number of current page
|
|
29
|
-
*/
|
|
30
|
-
modelValue?: number
|
|
31
|
-
/**
|
|
32
|
-
* The number of total record
|
|
33
|
-
*/
|
|
34
|
-
totalRow: number
|
|
35
|
-
/**
|
|
36
|
-
* The number of page size
|
|
37
|
-
* @default 10
|
|
38
|
-
*/
|
|
39
|
-
pageSize?: number
|
|
40
|
-
/**
|
|
41
|
-
* v-page language
|
|
42
|
-
* @default `en`
|
|
43
|
-
*/
|
|
44
|
-
language?: 'cn' | 'en' | 'de' | 'jp' | 'pt'
|
|
45
|
-
/**
|
|
46
|
-
* Page size list
|
|
47
|
-
* @default [10, 20, 50, 100]
|
|
48
|
-
*/
|
|
49
|
-
pageSizeMenu?: number[]
|
|
50
|
-
/**
|
|
51
|
-
*
|
|
52
|
-
* @default
|
|
53
|
-
*/
|
|
54
|
-
|
|
55
|
-
/**
|
|
56
|
-
*
|
|
57
|
-
* @default
|
|
58
|
-
*/
|
|
59
|
-
|
|
60
|
-
/**
|
|
61
|
-
*
|
|
62
|
-
* @default
|
|
63
|
-
*/
|
|
64
|
-
|
|
65
|
-
/**
|
|
66
|
-
*
|
|
67
|
-
* @default
|
|
68
|
-
*/
|
|
69
|
-
|
|
70
|
-
/**
|
|
71
|
-
*
|
|
72
|
-
* @default false
|
|
73
|
-
*/
|
|
74
|
-
|
|
75
|
-
/**
|
|
76
|
-
*
|
|
77
|
-
* @default
|
|
78
|
-
*/
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
declare
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
1
|
+
import {
|
|
2
|
+
AllowedComponentProps,
|
|
3
|
+
ComponentCustomProps,
|
|
4
|
+
VNodeProps,
|
|
5
|
+
VNode
|
|
6
|
+
} from 'vue'
|
|
7
|
+
|
|
8
|
+
export declare interface PageInfo {
|
|
9
|
+
pageNumber: number
|
|
10
|
+
pageSize: number
|
|
11
|
+
totalPage: number
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
export declare interface PageSlotData {
|
|
15
|
+
pageNumber: number
|
|
16
|
+
pageSize: number
|
|
17
|
+
totalPage: number
|
|
18
|
+
totalRow: number
|
|
19
|
+
isFirst: boolean
|
|
20
|
+
isLast: boolean
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
/**
|
|
24
|
+
* Pagination plugin for Vue
|
|
25
|
+
*/
|
|
26
|
+
declare interface PaginationProps {
|
|
27
|
+
/**
|
|
28
|
+
* The number of current page
|
|
29
|
+
*/
|
|
30
|
+
modelValue?: number
|
|
31
|
+
/**
|
|
32
|
+
* The number of total record
|
|
33
|
+
*/
|
|
34
|
+
totalRow: number
|
|
35
|
+
/**
|
|
36
|
+
* The number of page size
|
|
37
|
+
* @default 10
|
|
38
|
+
*/
|
|
39
|
+
pageSize?: number
|
|
40
|
+
/**
|
|
41
|
+
* v-page language
|
|
42
|
+
* @default `en`
|
|
43
|
+
*/
|
|
44
|
+
language?: 'cn' | 'en' | 'de' | 'jp' | 'pt'
|
|
45
|
+
/**
|
|
46
|
+
* Page size list
|
|
47
|
+
* @default [10, 20, 50, 100]
|
|
48
|
+
*/
|
|
49
|
+
pageSizeMenu?: number[]
|
|
50
|
+
/**
|
|
51
|
+
* Alignment direction
|
|
52
|
+
* @default `right`
|
|
53
|
+
*/
|
|
54
|
+
align?: 'left' | 'right' | 'center'
|
|
55
|
+
/**
|
|
56
|
+
* Disabled the pagination
|
|
57
|
+
* @default false
|
|
58
|
+
*/
|
|
59
|
+
disabled?: boolean
|
|
60
|
+
/**
|
|
61
|
+
* Whether to display the border
|
|
62
|
+
* @default true
|
|
63
|
+
*/
|
|
64
|
+
border?: boolean
|
|
65
|
+
/**
|
|
66
|
+
* Round style page number button
|
|
67
|
+
* @default false
|
|
68
|
+
*/
|
|
69
|
+
circle?: boolean
|
|
70
|
+
/**
|
|
71
|
+
* Whether add `All` item in page length list
|
|
72
|
+
* @default false
|
|
73
|
+
*/
|
|
74
|
+
displayAll?: boolean
|
|
75
|
+
/**
|
|
76
|
+
* Hide pagination when only have one page
|
|
77
|
+
* @default false
|
|
78
|
+
*/
|
|
79
|
+
hideOnSinglePage?: boolean
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
/** Update pageNumber value */
|
|
83
|
+
type EmitUpdateModelValue = (event: "update:modelValue", value: number) => void
|
|
84
|
+
/** Update pageSize value */
|
|
85
|
+
type EmitUpdatePageSize = (event: "update:pageSize", value: number) => void
|
|
86
|
+
/** The event respond pageNumber or pageSize change */
|
|
87
|
+
type EmitChange = (event: "change", value: PageInfo) => void
|
|
88
|
+
|
|
89
|
+
type ComponentProps = AllowedComponentProps & ComponentCustomProps & VNodeProps
|
|
90
|
+
|
|
91
|
+
declare interface PaginationBar {
|
|
92
|
+
new (): {
|
|
93
|
+
$props: ComponentProps & PaginationProps
|
|
94
|
+
$emit: EmitUpdateModelValue & EmitUpdatePageSize & EmitChange
|
|
95
|
+
$slots: {
|
|
96
|
+
default?: (defaultSlotData: PageSlotData) => VNode[]
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
declare interface PaginationComponent {
|
|
101
|
+
new (): {
|
|
102
|
+
$props: ComponentProps
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
declare interface PaginationPanel {
|
|
106
|
+
new (): {
|
|
107
|
+
$props: ComponentProps
|
|
108
|
+
$slots: {
|
|
109
|
+
default?: () => VNode[]
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
declare const PaginationBar: PaginationBar
|
|
114
|
+
declare const PaginationPageSizes: PaginationComponent
|
|
115
|
+
declare const PaginationInfo: PaginationComponent
|
|
116
|
+
declare const PaginationPageNumbers: PaginationComponent
|
|
117
|
+
declare const PaginationFirstPage: PaginationComponent
|
|
118
|
+
declare const PaginationPreviousPage: PaginationComponent
|
|
119
|
+
declare const PaginationNextPage: PaginationComponent
|
|
120
|
+
declare const PaginationLastPage: PaginationComponent
|
|
121
|
+
declare const PaginationPanel: PaginationPanel
|
|
122
|
+
|
|
123
|
+
export {
|
|
124
|
+
PaginationBar,
|
|
125
|
+
PaginationPageSizes,
|
|
126
|
+
PaginationInfo,
|
|
127
|
+
PaginationPageNumbers,
|
|
128
|
+
PaginationFirstPage,
|
|
129
|
+
PaginationPreviousPage,
|
|
130
|
+
PaginationNextPage,
|
|
131
|
+
PaginationLastPage,
|
|
132
|
+
PaginationPanel
|
|
133
|
+
}
|
|
134
|
+
|
|
127
135
|
export default PaginationBar
|