v-page 3.3.0 → 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 -103
- package/dist/v-page.js +185 -191
- package/dist/v-page.umd.cjs +1 -1
- package/package.json +75 -74
- package/types/index.d.ts +134 -134
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,103 +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
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
PaginationPageSizeOptions,
|
|
86
|
-
PaginationInfo,
|
|
87
|
-
PaginationPanel,
|
|
88
|
-
PaginationPageNumbers,
|
|
89
|
-
PaginationFirstPage,
|
|
90
|
-
PaginationPreviousPage,
|
|
91
|
-
PaginationNextPage,
|
|
92
|
-
PaginationLastPage
|
|
93
|
-
} from 'v-page'
|
|
94
|
-
import type { PageInfo } from 'v-page'
|
|
95
|
-
// set default page to 3
|
|
96
|
-
const pageNumber = ref<number>(3)
|
|
97
|
-
const totalRow = ref<number>(100)
|
|
98
|
-
// respond for pagination change
|
|
99
|
-
function paginationChange (data: PageInfo): void {
|
|
100
|
-
console.log(data) // { pageNumber: 1, pageSize: 10, totalPage: 10 }
|
|
101
|
-
}
|
|
102
|
-
</script>
|
|
103
|
-
```
|
|
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,13 +1,13 @@
|
|
|
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 { defineComponent as
|
|
3
|
-
const
|
|
4
|
-
U,
|
|
5
|
-
S,
|
|
6
|
-
Z,
|
|
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"), [
|
|
7
4
|
H,
|
|
8
|
-
|
|
5
|
+
S,
|
|
6
|
+
J,
|
|
7
|
+
q,
|
|
8
|
+
K
|
|
9
9
|
] = ["cn", "en", "de", "jp", "pt"], B = {
|
|
10
|
-
[
|
|
10
|
+
[H]: {
|
|
11
11
|
pageLength: "每页记录数",
|
|
12
12
|
pageInfo: "第 #pageNumber#/#totalPage# 页(共#totalRow#条记录)",
|
|
13
13
|
first: "首页",
|
|
@@ -21,21 +21,21 @@ const g = 1, D = 5, L = 10, V = [L, 20, 50, 100], A = 0, [X, Y, x] = ["left", "c
|
|
|
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",
|
|
@@ -43,158 +43,28 @@ const g = 1, D = 5, L = 10, V = [L, 20, 50, 100], A = 0, [X, Y, x] = ["left", "c
|
|
|
43
43
|
all: "Todos"
|
|
44
44
|
}
|
|
45
45
|
};
|
|
46
|
-
function
|
|
47
|
-
if (a <= t) return
|
|
46
|
+
function Q(e, a, t) {
|
|
47
|
+
if (a <= t) return s;
|
|
48
48
|
const i = Math.floor(t / 2), u = a - t + 1, l = e - i;
|
|
49
|
-
return l <
|
|
49
|
+
return l < s ? s : l > u ? u : l;
|
|
50
50
|
}
|
|
51
|
-
function
|
|
52
|
-
const i =
|
|
53
|
-
return Array.from({ length: t }).map((u, l) => i + l).filter((u) => u >=
|
|
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);
|
|
54
54
|
}
|
|
55
|
-
function
|
|
55
|
+
function X(e = S) {
|
|
56
56
|
const a = String(e).toLowerCase();
|
|
57
57
|
return B[Object.hasOwn(B, a) ? a : S];
|
|
58
58
|
}
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
props: {
|
|
62
|
-
modelValue: {
|
|
63
|
-
type: Number,
|
|
64
|
-
default: 0
|
|
65
|
-
},
|
|
66
|
-
pageSize: {
|
|
67
|
-
type: Number,
|
|
68
|
-
default: L
|
|
69
|
-
},
|
|
70
|
-
totalRow: {
|
|
71
|
-
type: Number,
|
|
72
|
-
default: 0
|
|
73
|
-
},
|
|
74
|
-
language: {
|
|
75
|
-
type: String,
|
|
76
|
-
default: S
|
|
77
|
-
},
|
|
78
|
-
/**
|
|
79
|
-
* Pagination alignment direction
|
|
80
|
-
* `left`, `center` and `right`(default)
|
|
81
|
-
*/
|
|
82
|
-
align: {
|
|
83
|
-
type: String,
|
|
84
|
-
default: x
|
|
85
|
-
},
|
|
86
|
-
/** Page size list */
|
|
87
|
-
pageSizeMenu: {
|
|
88
|
-
type: [Array],
|
|
89
|
-
default: () => V
|
|
90
|
-
},
|
|
91
|
-
disabled: {
|
|
92
|
-
type: Boolean,
|
|
93
|
-
default: !1
|
|
94
|
-
},
|
|
95
|
-
/** Round style page number button */
|
|
96
|
-
circle: {
|
|
97
|
-
type: Boolean,
|
|
98
|
-
default: !1
|
|
99
|
-
},
|
|
100
|
-
border: {
|
|
101
|
-
type: Boolean,
|
|
102
|
-
default: !1
|
|
103
|
-
},
|
|
104
|
-
/**
|
|
105
|
-
* Display all records
|
|
106
|
-
*
|
|
107
|
-
* will add `all` option in page size list
|
|
108
|
-
* and the page size will be 0
|
|
109
|
-
*/
|
|
110
|
-
displayAll: {
|
|
111
|
-
type: Boolean,
|
|
112
|
-
default: !1
|
|
113
|
-
},
|
|
114
|
-
/** Hide pagination when only have one page */
|
|
115
|
-
hideOnSinglePage: {
|
|
116
|
-
type: Boolean,
|
|
117
|
-
default: !1
|
|
118
|
-
}
|
|
119
|
-
},
|
|
120
|
-
emits: ["update:modelValue", "update:pageSize", "change"],
|
|
121
|
-
setup(e, {
|
|
122
|
-
emit: a,
|
|
123
|
-
slots: t
|
|
124
|
-
}) {
|
|
125
|
-
const {
|
|
126
|
-
pageSizeMenu: i,
|
|
127
|
-
totalRow: u
|
|
128
|
-
} = w(e), l = h(0), v = h(D), o = h(e.pageSize ?? L), f = b(() => {
|
|
129
|
-
const r = Array.from(Array.isArray(i.value) && i.value.length > 0 ? i.value : V);
|
|
130
|
-
return o.value !== 0 && !r.includes(o.value) && r.push(o.value), r.sort((p, M) => p - M);
|
|
131
|
-
}), c = b(() => o.value === A ? g : Math.ceil(u.value / o.value)), P = b(() => K(l.value, c.value, v.value)), j = b(() => ({
|
|
132
|
-
"v-pagination": !0,
|
|
133
|
-
"v-pagination--right": e.align === "right",
|
|
134
|
-
"v-pagination--center": e.align === "center",
|
|
135
|
-
"v-pagination--disabled": e.disabled,
|
|
136
|
-
"v-pagination--border": e.border,
|
|
137
|
-
"v-pagination--circle": !e.border && e.circle
|
|
138
|
-
})), z = b(() => l.value === g), E = b(() => l.value === c.value);
|
|
139
|
-
F(() => e.modelValue, y), F(() => e.pageSize, R);
|
|
140
|
-
function y(r = g) {
|
|
141
|
-
if (e.disabled || typeof r != "number") return;
|
|
142
|
-
let p = r < g ? g : r;
|
|
143
|
-
r > c.value && c.value > 0 && (p = c.value), p !== l.value && (l.value = p, a("update:modelValue", l.value), I());
|
|
144
|
-
}
|
|
145
|
-
function R(r) {
|
|
146
|
-
if (typeof r == "number" && !(r < 0) && r !== o.value) {
|
|
147
|
-
if (o.value = r, a("update:pageSize", o.value), l.value === g)
|
|
148
|
-
return I();
|
|
149
|
-
y(g);
|
|
150
|
-
}
|
|
151
|
-
}
|
|
152
|
-
function I() {
|
|
153
|
-
a("change", {
|
|
154
|
-
pageNumber: l.value,
|
|
155
|
-
pageSize: Number(o.value),
|
|
156
|
-
totalPage: c.value
|
|
157
|
-
});
|
|
158
|
-
}
|
|
159
|
-
return C(() => y(e.modelValue || g)), G(s, {
|
|
160
|
-
lang: Q(e.language),
|
|
161
|
-
pageSize: o,
|
|
162
|
-
sizeList: f,
|
|
163
|
-
pageNumbers: P,
|
|
164
|
-
isFirst: z,
|
|
165
|
-
isLast: E,
|
|
166
|
-
current: l,
|
|
167
|
-
totalPage: c,
|
|
168
|
-
changePageNumber: y,
|
|
169
|
-
changePageSize: R,
|
|
170
|
-
...w(e)
|
|
171
|
-
}), () => {
|
|
172
|
-
var p;
|
|
173
|
-
if (e.hideOnSinglePage && c.value <= 1) return null;
|
|
174
|
-
const r = {
|
|
175
|
-
pageNumber: l.value,
|
|
176
|
-
pageSize: o.value,
|
|
177
|
-
totalPage: c.value,
|
|
178
|
-
totalRow: u.value,
|
|
179
|
-
isFirst: z.value,
|
|
180
|
-
isLast: E.value
|
|
181
|
-
};
|
|
182
|
-
return n("div", {
|
|
183
|
-
class: j.value
|
|
184
|
-
}, [n("ul", null, [(p = t == null ? void 0 : t.default) == null ? void 0 : p.call(t, r)])]);
|
|
185
|
-
};
|
|
186
|
-
}
|
|
187
|
-
});
|
|
188
|
-
function O(e) {
|
|
189
|
-
return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !k(e);
|
|
59
|
+
function M(e) {
|
|
60
|
+
return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !C(e);
|
|
190
61
|
}
|
|
191
62
|
function _(e, {
|
|
192
63
|
slots: a
|
|
193
64
|
}) {
|
|
194
|
-
var t;
|
|
195
65
|
return n("a", {
|
|
196
66
|
href: "javascript:void(0)"
|
|
197
|
-
}, [
|
|
67
|
+
}, [a?.default?.()]);
|
|
198
68
|
}
|
|
199
69
|
function m({
|
|
200
70
|
classes: e,
|
|
@@ -203,16 +73,16 @@ function m({
|
|
|
203
73
|
}) {
|
|
204
74
|
const {
|
|
205
75
|
changePageNumber: i
|
|
206
|
-
} = d(
|
|
76
|
+
} = d(f);
|
|
207
77
|
return n("li", {
|
|
208
78
|
class: ["v-pagination__item", ...e]
|
|
209
79
|
}, [n(_, {
|
|
210
80
|
onClick: () => i(a)
|
|
211
|
-
},
|
|
81
|
+
}, M(t) ? t : {
|
|
212
82
|
default: () => [t]
|
|
213
83
|
})]);
|
|
214
84
|
}
|
|
215
|
-
function
|
|
85
|
+
function Y() {
|
|
216
86
|
const {
|
|
217
87
|
lang: e,
|
|
218
88
|
sizeList: a,
|
|
@@ -220,11 +90,11 @@ function $() {
|
|
|
220
90
|
disabled: i,
|
|
221
91
|
displayAll: u,
|
|
222
92
|
changePageSize: l
|
|
223
|
-
} = d(
|
|
224
|
-
key:
|
|
225
|
-
value:
|
|
226
|
-
selected: t.value ===
|
|
227
|
-
}, [
|
|
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", {
|
|
228
98
|
value: A,
|
|
229
99
|
selected: t.value === A
|
|
230
100
|
}, [e.all]) : null;
|
|
@@ -233,40 +103,37 @@ function $() {
|
|
|
233
103
|
}, [n(_, null, {
|
|
234
104
|
default: () => [n("span", null, [e.pageLength]), n("select", {
|
|
235
105
|
disabled: i.value,
|
|
236
|
-
onChange: (
|
|
237
|
-
}, [n(
|
|
106
|
+
onChange: (c) => l(Number(c.target.value))
|
|
107
|
+
}, [n(p, null, null), n(o, null, null)])]
|
|
238
108
|
})]);
|
|
239
109
|
}
|
|
240
|
-
function
|
|
110
|
+
function $() {
|
|
241
111
|
const {
|
|
242
112
|
lang: e,
|
|
243
113
|
current: a,
|
|
244
114
|
totalPage: t,
|
|
245
115
|
totalRow: i
|
|
246
|
-
} = d(
|
|
116
|
+
} = d(f), u = e.pageInfo.replace("#pageNumber#", a.value).replace("#totalPage#", t.value).replace("#totalRow#", i.value);
|
|
247
117
|
return n("li", {
|
|
248
118
|
class: "v-pagination__info"
|
|
249
|
-
}, [n(_, null,
|
|
119
|
+
}, [n(_, null, M(u) ? u : {
|
|
250
120
|
default: () => [u]
|
|
251
121
|
})]);
|
|
252
122
|
}
|
|
253
|
-
function
|
|
123
|
+
function re(e, {
|
|
254
124
|
slots: a
|
|
255
125
|
}) {
|
|
256
126
|
return n("li", {
|
|
257
127
|
class: "v-pagination__slot"
|
|
258
128
|
}, [n(_, null, {
|
|
259
|
-
default: () =>
|
|
260
|
-
var t;
|
|
261
|
-
return [(t = a == null ? void 0 : a.default) == null ? void 0 : t.call(a)];
|
|
262
|
-
}
|
|
129
|
+
default: () => [a?.default?.()]
|
|
263
130
|
})]);
|
|
264
131
|
}
|
|
265
|
-
function
|
|
132
|
+
function ee() {
|
|
266
133
|
const {
|
|
267
134
|
pageNumbers: e,
|
|
268
135
|
current: a
|
|
269
|
-
} = d(
|
|
136
|
+
} = d(f);
|
|
270
137
|
return e.value.map((t) => n(m, {
|
|
271
138
|
key: t,
|
|
272
139
|
classes: [{
|
|
@@ -276,24 +143,24 @@ function te() {
|
|
|
276
143
|
name: t
|
|
277
144
|
}, null));
|
|
278
145
|
}
|
|
279
|
-
function
|
|
146
|
+
function ae() {
|
|
280
147
|
const {
|
|
281
148
|
isFirst: e,
|
|
282
149
|
lang: a
|
|
283
|
-
} = d(
|
|
150
|
+
} = d(f);
|
|
284
151
|
return n(m, {
|
|
285
152
|
classes: ["v-pagination__first", {
|
|
286
153
|
disabled: e.value
|
|
287
154
|
}],
|
|
288
|
-
pageNumberValue:
|
|
155
|
+
pageNumberValue: s,
|
|
289
156
|
name: a.first
|
|
290
157
|
}, null);
|
|
291
158
|
}
|
|
292
|
-
function
|
|
159
|
+
function te() {
|
|
293
160
|
const {
|
|
294
161
|
isFirst: e,
|
|
295
162
|
current: a
|
|
296
|
-
} = d(
|
|
163
|
+
} = d(f);
|
|
297
164
|
return n(m, {
|
|
298
165
|
classes: ["v-pagination__previous", {
|
|
299
166
|
disabled: e.value
|
|
@@ -302,11 +169,11 @@ function le() {
|
|
|
302
169
|
name: "«"
|
|
303
170
|
}, null);
|
|
304
171
|
}
|
|
305
|
-
function
|
|
172
|
+
function ne() {
|
|
306
173
|
const {
|
|
307
174
|
isLast: e,
|
|
308
175
|
current: a
|
|
309
|
-
} = d(
|
|
176
|
+
} = d(f);
|
|
310
177
|
return n(m, {
|
|
311
178
|
classes: ["v-pagination__next", {
|
|
312
179
|
disabled: e.value
|
|
@@ -315,12 +182,12 @@ function ue() {
|
|
|
315
182
|
name: "»"
|
|
316
183
|
}, null);
|
|
317
184
|
}
|
|
318
|
-
function
|
|
185
|
+
function le() {
|
|
319
186
|
const {
|
|
320
187
|
isLast: e,
|
|
321
188
|
totalPage: a,
|
|
322
189
|
lang: t
|
|
323
|
-
} = d(
|
|
190
|
+
} = d(f);
|
|
324
191
|
return n(m, {
|
|
325
192
|
classes: ["v-pagination__last", {
|
|
326
193
|
disabled: e.value
|
|
@@ -329,31 +196,158 @@ function ie() {
|
|
|
329
196
|
name: t.last
|
|
330
197
|
}, null);
|
|
331
198
|
}
|
|
199
|
+
const N = /* @__PURE__ */ G({
|
|
200
|
+
name: "PaginationBar",
|
|
201
|
+
props: {
|
|
202
|
+
modelValue: {
|
|
203
|
+
type: Number,
|
|
204
|
+
default: 0
|
|
205
|
+
},
|
|
206
|
+
pageSize: {
|
|
207
|
+
type: Number,
|
|
208
|
+
default: L
|
|
209
|
+
},
|
|
210
|
+
totalRow: {
|
|
211
|
+
type: Number,
|
|
212
|
+
default: 0
|
|
213
|
+
},
|
|
214
|
+
language: {
|
|
215
|
+
type: String,
|
|
216
|
+
default: S
|
|
217
|
+
},
|
|
218
|
+
/**
|
|
219
|
+
* Pagination alignment direction
|
|
220
|
+
* `left`, `center` and `right`(default)
|
|
221
|
+
*/
|
|
222
|
+
align: {
|
|
223
|
+
type: String,
|
|
224
|
+
default: Z
|
|
225
|
+
},
|
|
226
|
+
/** Page size list */
|
|
227
|
+
pageSizeMenu: {
|
|
228
|
+
type: [Array],
|
|
229
|
+
default: () => V
|
|
230
|
+
},
|
|
231
|
+
disabled: {
|
|
232
|
+
type: Boolean,
|
|
233
|
+
default: !1
|
|
234
|
+
},
|
|
235
|
+
/** Round style page number button */
|
|
236
|
+
circle: {
|
|
237
|
+
type: Boolean,
|
|
238
|
+
default: !1
|
|
239
|
+
},
|
|
240
|
+
border: {
|
|
241
|
+
type: Boolean,
|
|
242
|
+
default: !1
|
|
243
|
+
},
|
|
244
|
+
/**
|
|
245
|
+
* Display all records
|
|
246
|
+
*
|
|
247
|
+
* will add `all` option in page size list
|
|
248
|
+
* and the page size will be 0
|
|
249
|
+
*/
|
|
250
|
+
displayAll: {
|
|
251
|
+
type: Boolean,
|
|
252
|
+
default: !1
|
|
253
|
+
},
|
|
254
|
+
/** Hide pagination when only have one page */
|
|
255
|
+
hideOnSinglePage: {
|
|
256
|
+
type: Boolean,
|
|
257
|
+
default: !1
|
|
258
|
+
}
|
|
259
|
+
},
|
|
260
|
+
emits: ["update:modelValue", "update:pageSize", "change"],
|
|
261
|
+
setup(e, {
|
|
262
|
+
emit: a,
|
|
263
|
+
slots: t
|
|
264
|
+
}) {
|
|
265
|
+
const {
|
|
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)])]);
|
|
324
|
+
}
|
|
325
|
+
});
|
|
332
326
|
N.install = (e, a = {}) => {
|
|
333
327
|
if (Object.keys(a).length) {
|
|
334
328
|
const { props: t } = N, {
|
|
335
329
|
language: i,
|
|
336
330
|
align: u,
|
|
337
331
|
info: l,
|
|
338
|
-
border:
|
|
332
|
+
border: p,
|
|
339
333
|
pageNumber: o,
|
|
340
|
-
first:
|
|
341
|
-
last:
|
|
334
|
+
first: c,
|
|
335
|
+
last: g,
|
|
342
336
|
pageSizeMenu: P
|
|
343
337
|
} = a;
|
|
344
|
-
i && (t.language.default = i), u && (t.align.default = u), typeof l == "boolean" && (t.info.default = l), typeof
|
|
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);
|
|
345
339
|
}
|
|
346
340
|
e.component(N.name, N);
|
|
347
341
|
};
|
|
348
342
|
export {
|
|
349
343
|
N as PaginationBar,
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
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,
|
|
358
352
|
N as default
|
|
359
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(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
|
|
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,74 +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
|
-
"vite
|
|
72
|
-
"
|
|
73
|
-
|
|
74
|
-
}
|
|
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,135 +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 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
|
|
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
|
-
|
|
126
|
-
PaginationInfo,
|
|
127
|
-
PaginationPageNumbers,
|
|
128
|
-
PaginationFirstPage,
|
|
129
|
-
PaginationPreviousPage,
|
|
130
|
-
PaginationNextPage,
|
|
131
|
-
PaginationLastPage,
|
|
132
|
-
PaginationPanel
|
|
133
|
-
}
|
|
134
|
-
|
|
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
|
+
|
|
135
135
|
export default PaginationBar
|