v-page 3.0.0-beta.3 → 3.0.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/README.md +20 -12
- package/dist/v-page.js +57 -58
- package/dist/v-page.umd.cjs +2 -2
- package/package.json +22 -17
- package/types/index.d.ts +65 -34
package/README.md
CHANGED
|
@@ -1,11 +1,18 @@
|
|
|
1
1
|
# [v-page](https://terryz.github.io/vue/#/page) · [](https://dl.circleci.com/status-badge/redirect/gh/TerryZ/v-page/tree/master) [](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
2
|
|
|
3
|
-
A simple pagination bar for vue3, including size Menu, i18n support
|
|
3
|
+
A simple pagination bar for vue3, including size Menu, i18n support features
|
|
4
4
|
|
|
5
5
|
<img src="https://terryz.github.io/image/v-page/v-page.png" alt="v-page" height="54px">
|
|
6
6
|
|
|
7
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
8
|
|
|
9
|
+
<!-- ## Features
|
|
10
|
+
|
|
11
|
+
- Simple interface style
|
|
12
|
+
- I18n supported
|
|
13
|
+
- Modularization of Pagination bar features
|
|
14
|
+
- -->
|
|
15
|
+
|
|
9
16
|
## Examples and Documentation
|
|
10
17
|
|
|
11
18
|
Documentation and examples and please visit below sites
|
|
@@ -28,27 +35,27 @@ pnpm add v-page
|
|
|
28
35
|
Include and install plugin in your `main.js` file
|
|
29
36
|
|
|
30
37
|
```js
|
|
31
|
-
// add component in global scope as plugin
|
|
32
38
|
import { createApp } from 'vue'
|
|
33
39
|
import App from './app.vue'
|
|
34
|
-
import
|
|
40
|
+
import { PaginationBar } from 'v-page'
|
|
35
41
|
|
|
36
42
|
const app = createApp(App)
|
|
37
|
-
|
|
43
|
+
// install component globally
|
|
44
|
+
app.use(PaginationBar, {
|
|
38
45
|
// globally config options
|
|
39
46
|
})
|
|
40
47
|
app.mount('#app')
|
|
41
48
|
```
|
|
42
49
|
|
|
43
|
-
You also
|
|
50
|
+
You can also use `v-page` as a locally component
|
|
44
51
|
|
|
45
52
|
```vue
|
|
46
53
|
<template>
|
|
47
|
-
<
|
|
54
|
+
<PaginationBar />
|
|
48
55
|
</template>
|
|
49
56
|
|
|
50
57
|
<script setup>
|
|
51
|
-
import {
|
|
58
|
+
import { PaginationBar } from 'v-page'
|
|
52
59
|
</script>
|
|
53
60
|
```
|
|
54
61
|
|
|
@@ -56,21 +63,22 @@ import { Page } from 'v-page'
|
|
|
56
63
|
|
|
57
64
|
```vue
|
|
58
65
|
<template>
|
|
59
|
-
<
|
|
66
|
+
<PaginationBar
|
|
60
67
|
v-model="pageNumber"
|
|
61
68
|
:total-row="totalRow"
|
|
62
|
-
@change="
|
|
69
|
+
@change="paginationChange"
|
|
63
70
|
/>
|
|
64
71
|
</template>
|
|
65
72
|
|
|
66
73
|
<script setup>
|
|
67
74
|
import { ref } from 'vue'
|
|
68
|
-
|
|
75
|
+
import { PaginationBar } from 'v-page'
|
|
76
|
+
// set default page to 3
|
|
69
77
|
const pageNumber = ref(3)
|
|
70
78
|
const totalRow = ref(100)
|
|
71
79
|
// respond for pagination change
|
|
72
|
-
function
|
|
73
|
-
console.log(
|
|
80
|
+
function paginationChange (data) {
|
|
81
|
+
console.log(data) // { pageNumber: 1, pageSize: 10 }
|
|
74
82
|
}
|
|
75
83
|
</script>
|
|
76
84
|
```
|
package/dist/v-page.js
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
(function(){"use strict";try{if(typeof document
|
|
2
|
-
import { defineComponent as F, toRefs as
|
|
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:#999!important}.v-pagination.v-pagination--disabled.v-pagination--border a,.v-pagination.v-pagination--disabled.v-pagination--border a:hover{background-color:#fafafa}.v-pagination ul{margin:0;padding:0;display:flex}.v-pagination ul li{list-style:none;display:flex}.v-pagination ul li.v-pagination__info a,.v-pagination ul li.v-pagination__list a{cursor:default;color:#333}.v-pagination ul li a{padding:.3rem .6rem;text-decoration:none;line-height:1.3;font-size:14px;margin:0;outline:0;color:#333;border-radius:.25rem;display:inline-flex;align-items:center}.v-pagination ul li:not(.active):not(.disabled):not(.v-pagination__list):not(.v-pagination__info):not(.v-pagination__slot) a:hover{background-color:#fafafa}.v-pagination ul li.active a{background-color:#eee;color:#aaa}.v-pagination ul li.disabled a{color:#999!important;cursor:default}.v-pagination ul li select{width:auto!important;font-size:12px;padding:0;outline:0;margin:0 0 0 5px;border:1px solid #ccc;color:#333;border-radius:.3rem}.v-pagination.v-pagination--border ul{box-shadow:0 1px 2px #0000000d;border-radius:.25rem}.v-pagination.v-pagination--border ul li:not(:first-child) a{margin-left:-1px}.v-pagination.v-pagination--border ul li a{border:1px solid #DEE2E6;border-radius:0}.v-pagination.v-pagination--border ul li:first-child>a{border-bottom-left-radius:.25rem;border-top-left-radius:.25rem}.v-pagination.v-pagination--border ul li:last-child>a{border-top-right-radius:.25rem;border-bottom-right-radius:.25rem}.v-pagination.v-pagination--border ul li.active a{color:#999;background-color:#eee}")),document.head.appendChild(i)}}catch(a){console.error("vite-plugin-css-injected-by-js",a)}})();
|
|
2
|
+
import { defineComponent as F, toRefs as V, ref as N, computed as b, watch as k, onMounted as D, h as u } from "vue";
|
|
3
3
|
const [
|
|
4
|
+
O,
|
|
4
5
|
z,
|
|
5
6
|
T,
|
|
6
|
-
D,
|
|
7
7
|
G,
|
|
8
8
|
Z
|
|
9
|
-
] = ["cn", "en", "de", "jp", "pt"],
|
|
10
|
-
[
|
|
9
|
+
] = ["cn", "en", "de", "jp", "pt"], B = {
|
|
10
|
+
[O]: {
|
|
11
11
|
pageLength: "每页记录数 ",
|
|
12
12
|
pageInfo: "当前显示第 #pageNumber# / #totalPage# 页（共#totalRow#条记录）",
|
|
13
13
|
first: "首页",
|
|
@@ -16,7 +16,7 @@ const [
|
|
|
16
16
|
last: "尾页",
|
|
17
17
|
all: "全部"
|
|
18
18
|
},
|
|
19
|
-
[
|
|
19
|
+
[z]: {
|
|
20
20
|
pageLength: "Page length ",
|
|
21
21
|
pageInfo: "Current #pageNumber# / #totalPage# (total #totalRow# records)",
|
|
22
22
|
first: "First",
|
|
@@ -25,7 +25,7 @@ const [
|
|
|
25
25
|
last: "Last",
|
|
26
26
|
all: "All"
|
|
27
27
|
},
|
|
28
|
-
[
|
|
28
|
+
[T]: {
|
|
29
29
|
pageLength: "Seitenlänge ",
|
|
30
30
|
pageInfo: "Aktuell #pageNumber# / #totalPage# (gesamt #totalRow# Aufzeichnungen)",
|
|
31
31
|
first: "Zuerst",
|
|
@@ -52,7 +52,7 @@ const [
|
|
|
52
52
|
last: "Fim",
|
|
53
53
|
all: "Todos"
|
|
54
54
|
}
|
|
55
|
-
}, r = 1, J = 5,
|
|
55
|
+
}, r = 1, J = 5, x = 10, q = [x, 20, 50, 100], I = 0;
|
|
56
56
|
function H(e, s, t) {
|
|
57
57
|
if (s <= t)
|
|
58
58
|
return r;
|
|
@@ -64,7 +64,7 @@ function K(e, s, t) {
|
|
|
64
64
|
return Array.from({ length: t }).map((n, o) => v + o).filter((n) => n >= r && n <= s);
|
|
65
65
|
}
|
|
66
66
|
const R = F({
|
|
67
|
-
name: "
|
|
67
|
+
name: "PaginationBar",
|
|
68
68
|
props: {
|
|
69
69
|
modelValue: { type: Number, default: 0 },
|
|
70
70
|
totalRow: { type: Number, default: 0 },
|
|
@@ -96,30 +96,30 @@ const R = F({
|
|
|
96
96
|
},
|
|
97
97
|
emits: ["update:modelValue", "change"],
|
|
98
98
|
setup(e, { emit: s, slots: t, expose: v }) {
|
|
99
|
-
const { pageSizeMenu: n, totalRow: o } =
|
|
100
|
-
n.value === !1 ?
|
|
101
|
-
),
|
|
99
|
+
const { pageSizeMenu: n, totalRow: o } = V(e), l = N(0), f = N(
|
|
100
|
+
n.value === !1 ? x : n.value[0]
|
|
101
|
+
), _ = N(J), g = N(B[e.language] || B[z]), m = N(-1), p = b(() => f.value === I ? r : Math.ceil(o.value / f.value)), C = b(() => K(
|
|
102
102
|
l.value,
|
|
103
103
|
p.value,
|
|
104
|
-
|
|
105
|
-
)), M =
|
|
104
|
+
_.value
|
|
105
|
+
)), M = b(() => g.value.pageInfo.replace("#pageNumber#", l.value).replace("#totalPage#", p.value).replace("#totalRow#", o.value)), j = b(() => ({
|
|
106
106
|
"v-pagination": !0,
|
|
107
107
|
"v-pagination--border": e.border,
|
|
108
108
|
"v-pagination--right": e.align === "right",
|
|
109
109
|
"v-pagination--center": e.align === "center",
|
|
110
110
|
"v-pagination--disabled": e.disabled
|
|
111
|
-
})), A =
|
|
111
|
+
})), A = b(() => l.value === r), L = b(() => l.value === p.value);
|
|
112
112
|
k(
|
|
113
113
|
() => e.modelValue,
|
|
114
114
|
(a) => {
|
|
115
|
-
typeof a == "number" && a > 0 &&
|
|
115
|
+
typeof a == "number" && a > 0 && h(a, !1);
|
|
116
116
|
}
|
|
117
117
|
);
|
|
118
|
-
function
|
|
118
|
+
function h(a = r, P = !0) {
|
|
119
119
|
if (e.disabled || typeof a != "number")
|
|
120
120
|
return;
|
|
121
|
-
let
|
|
122
|
-
a > p.value && p.value > 0 && (
|
|
121
|
+
let c = a < r ? r : a;
|
|
122
|
+
a > p.value && p.value > 0 && (c = p.value), !(c === l.value && f.value === m.value) && (l.value = c, P && s("update:modelValue", l.value), m.value = f.value, w());
|
|
123
123
|
}
|
|
124
124
|
function w() {
|
|
125
125
|
s("change", {
|
|
@@ -127,19 +127,19 @@ const R = F({
|
|
|
127
127
|
pageSize: Number(f.value)
|
|
128
128
|
});
|
|
129
129
|
}
|
|
130
|
-
function
|
|
130
|
+
function y(a, P, c) {
|
|
131
131
|
return u("li", { class: a }, [u("a", {
|
|
132
132
|
href: "javascript:void(0)",
|
|
133
|
-
onClick: () =>
|
|
134
|
-
},
|
|
133
|
+
onClick: () => h(P)
|
|
134
|
+
}, c)]);
|
|
135
135
|
}
|
|
136
|
-
return
|
|
137
|
-
|
|
136
|
+
return D(() => {
|
|
137
|
+
h(e.modelValue || r);
|
|
138
138
|
}), v({
|
|
139
139
|
current: l,
|
|
140
140
|
totalPage: p,
|
|
141
141
|
pageNumbers: C,
|
|
142
|
-
goPage:
|
|
142
|
+
goPage: h,
|
|
143
143
|
reload: w
|
|
144
144
|
}), () => {
|
|
145
145
|
const a = [];
|
|
@@ -147,63 +147,62 @@ const R = F({
|
|
|
147
147
|
const i = {
|
|
148
148
|
disabled: e.disabled,
|
|
149
149
|
onChange: (S) => {
|
|
150
|
-
f.value = Number(S.target.value),
|
|
150
|
+
f.value = Number(S.target.value), h();
|
|
151
151
|
}
|
|
152
|
-
},
|
|
152
|
+
}, d = n.value.map(
|
|
153
153
|
(S) => u("option", { value: S }, S)
|
|
154
154
|
);
|
|
155
|
-
e.displayAll &&
|
|
156
|
-
u("option", { value:
|
|
155
|
+
e.displayAll && d.push(
|
|
156
|
+
u("option", { value: I }, g.value.all)
|
|
157
157
|
);
|
|
158
158
|
const E = u("li", { class: "v-pagination__list" }, [
|
|
159
|
-
u("a", [
|
|
159
|
+
u("a", { href: "javascript:void(0)" }, [
|
|
160
160
|
u("span", g.value.pageLength),
|
|
161
|
-
u("select", i,
|
|
161
|
+
u("select", i, d)
|
|
162
162
|
])
|
|
163
163
|
]);
|
|
164
164
|
a.push(E);
|
|
165
165
|
}
|
|
166
166
|
if (e.info && a.push(
|
|
167
|
-
u("li", { class: "v-pagination__info" }, [
|
|
167
|
+
u("li", { class: "v-pagination__info" }, [
|
|
168
|
+
u("a", { href: "javascript:void(0)" }, M.value)
|
|
169
|
+
])
|
|
168
170
|
), "default" in t) {
|
|
169
|
-
const i =
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
isLast: L.value
|
|
179
|
-
})
|
|
180
|
-
)
|
|
171
|
+
const i = {
|
|
172
|
+
pageNumber: l.value,
|
|
173
|
+
pageSize: f.value,
|
|
174
|
+
totalPage: p.value,
|
|
175
|
+
totalRow: o.value,
|
|
176
|
+
isFirst: A.value,
|
|
177
|
+
isLast: L.value
|
|
178
|
+
}, d = u("li", { class: "v-pagination__slot" }, [
|
|
179
|
+
u("a", t.default(i))
|
|
181
180
|
]);
|
|
182
|
-
a.push(
|
|
181
|
+
a.push(d);
|
|
183
182
|
}
|
|
184
183
|
if (e.first) {
|
|
185
184
|
const i = ["v-pagination__first", { disabled: A.value }];
|
|
186
|
-
a.push(
|
|
185
|
+
a.push(y(i, r, g.value.first));
|
|
187
186
|
}
|
|
188
|
-
const
|
|
187
|
+
const P = ["v-pagination__previous", { disabled: A.value }];
|
|
189
188
|
a.push(
|
|
190
|
-
|
|
189
|
+
y(P, l.value - 1, g.value.previous)
|
|
191
190
|
), e.pageNumber && a.push(
|
|
192
191
|
...C.value.map((i) => {
|
|
193
|
-
const
|
|
194
|
-
return
|
|
192
|
+
const d = { active: i === l.value };
|
|
193
|
+
return y(d, i, i);
|
|
195
194
|
})
|
|
196
195
|
);
|
|
197
|
-
const
|
|
196
|
+
const c = ["v-pagination__next", { disabled: L.value }];
|
|
198
197
|
if (a.push(
|
|
199
|
-
|
|
198
|
+
y(c, l.value + 1, g.value.next)
|
|
200
199
|
), e.last) {
|
|
201
200
|
const i = ["v-pagination__last", { disabled: L.value }];
|
|
202
201
|
a.push(
|
|
203
|
-
|
|
202
|
+
y(i, p.value, g.value.last)
|
|
204
203
|
);
|
|
205
204
|
}
|
|
206
|
-
return u("div", { class:
|
|
205
|
+
return u("div", { class: j.value }, [u("ul", a)]);
|
|
207
206
|
};
|
|
208
207
|
}
|
|
209
208
|
});
|
|
@@ -215,15 +214,15 @@ R.install = (e, s = {}) => {
|
|
|
215
214
|
info: o,
|
|
216
215
|
border: l,
|
|
217
216
|
pageNumber: f,
|
|
218
|
-
first:
|
|
217
|
+
first: _,
|
|
219
218
|
last: g,
|
|
220
|
-
pageSizeMenu:
|
|
219
|
+
pageSizeMenu: m
|
|
221
220
|
} = s;
|
|
222
|
-
v && (t.language.default = v), n && (t.align.default = n), typeof o == "boolean" && (t.info.default = o), typeof l == "boolean" && (t.border.default = l), typeof f == "boolean" && (t.pageNumber.default = f), typeof
|
|
221
|
+
v && (t.language.default = v), n && (t.align.default = n), typeof o == "boolean" && (t.info.default = o), typeof l == "boolean" && (t.border.default = l), typeof f == "boolean" && (t.pageNumber.default = f), typeof _ == "boolean" && (t.first.default = _), typeof g == "boolean" && (t.last.default = g), typeof m < "u" && (t.pageSizeMenu.default = m);
|
|
223
222
|
}
|
|
224
223
|
e.component(R.name, R);
|
|
225
224
|
};
|
|
226
225
|
export {
|
|
227
|
-
R as
|
|
226
|
+
R as PaginationBar,
|
|
228
227
|
R as default
|
|
229
228
|
};
|
package/dist/v-page.umd.cjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
(function(){"use strict";try{if(typeof document
|
|
2
|
-
(function(p,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(p=typeof globalThis<"u"?globalThis:p||self,e(p.VPage={},p.Vue))})(this,function(p,e){"use strict";const Z="",[R,x,
|
|
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:#999!important}.v-pagination.v-pagination--disabled.v-pagination--border a,.v-pagination.v-pagination--disabled.v-pagination--border a:hover{background-color:#fafafa}.v-pagination ul{margin:0;padding:0;display:flex}.v-pagination ul li{list-style:none;display:flex}.v-pagination ul li.v-pagination__info a,.v-pagination ul li.v-pagination__list a{cursor:default;color:#333}.v-pagination ul li a{padding:.3rem .6rem;text-decoration:none;line-height:1.3;font-size:14px;margin:0;outline:0;color:#333;border-radius:.25rem;display:inline-flex;align-items:center}.v-pagination ul li:not(.active):not(.disabled):not(.v-pagination__list):not(.v-pagination__info):not(.v-pagination__slot) a:hover{background-color:#fafafa}.v-pagination ul li.active a{background-color:#eee;color:#aaa}.v-pagination ul li.disabled a{color:#999!important;cursor:default}.v-pagination ul li select{width:auto!important;font-size:12px;padding:0;outline:0;margin:0 0 0 5px;border:1px solid #ccc;color:#333;border-radius:.3rem}.v-pagination.v-pagination--border ul{box-shadow:0 1px 2px #0000000d;border-radius:.25rem}.v-pagination.v-pagination--border ul li:not(:first-child) a{margin-left:-1px}.v-pagination.v-pagination--border ul li a{border:1px solid #DEE2E6;border-radius:0}.v-pagination.v-pagination--border ul li:first-child>a{border-bottom-left-radius:.25rem;border-top-left-radius:.25rem}.v-pagination.v-pagination--border ul li:last-child>a{border-top-right-radius:.25rem;border-bottom-right-radius:.25rem}.v-pagination.v-pagination--border ul li.active a{color:#999;background-color:#eee}")),document.head.appendChild(i)}}catch(a){console.error("vite-plugin-css-injected-by-js",a)}})();
|
|
2
|
+
(function(p,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(p=typeof globalThis<"u"?globalThis:p||self,e(p.VPage={},p.Vue))})(this,function(p,e){"use strict";const Z="",[M,R,x,j,V]=["cn","en","de","jp","pt"],z={[M]:{pageLength:"每页记录数 ",pageInfo:"当前显示第 #pageNumber# / #totalPage# 页（共#totalRow#条记录）",first:"首页",previous:"«",next:"»",last:"尾页",all:"全部"},[R]:{pageLength:"Page length ",pageInfo:"Current #pageNumber# / #totalPage# (total #totalRow# records)",first:"First",previous:"«",next:"»",last:"Last",all:"All"},[x]:{pageLength:"Seitenlänge ",pageInfo:"Aktuell #pageNumber# / #totalPage# (gesamt #totalRow# Aufzeichnungen)",first:"Zuerst",previous:"«",next:"»",last:"Letzte",all:"Alle"},[j]:{pageLength:"ページごとの記録数",pageInfo:"現在の第 #pageNumber# / #totalPage# ページ（全部で #totalRow# 条の記録）",first:"トップページ",previous:"«",next:"»",last:"尾のページ",all:"すべて"},[V]:{pageLength:"Resultados por página ",pageInfo:"#pageNumber# / #totalPage# (total de #totalRow#)",first:"Início",previous:"<",next:">",last:"Fim",all:"Todos"}},s=1,T=5,B=10,E=[B,20,50,100],C=0;function F(a,r,l){if(r<=l)return s;const c=Math.floor(l/2),o=r-l+1,u=a-c;return u<s?s:u>o?o:u}function O(a,r,l){const c=F(a,r,l);return Array.from({length:l}).map((o,u)=>c+u).filter(o=>o>=s&&o<=r)}const h=e.defineComponent({name:"PaginationBar",props:{modelValue:{type:Number,default:0},totalRow:{type:Number,default:0},language:{type:String,default:R},pageSizeMenu:{type:[Boolean,Array],default:()=>E},align:{type:String,default:"right"},disabled:{type:Boolean,default:!1},border:{type:Boolean,default:!1},info:{type:Boolean,default:!0},pageNumber:{type:Boolean,default:!0},first:{type:Boolean,default:!0},last:{type:Boolean,default:!0},displayAll:{type:Boolean,default:!1}},emits:["update:modelValue","change"],setup(a,{emit:r,slots:l,expose:c}){const{pageSizeMenu:o,totalRow:u}=e.toRefs(a),n=e.ref(0),f=e.ref(o.value===!1?B:o.value[0]),N=e.ref(T),g=e.ref(z[a.language]||z[R]),m=e.ref(-1),d=e.computed(()=>f.value===C?s:Math.ceil(u.value/f.value)),w=e.computed(()=>O(n.value,d.value,N.value)),k=e.computed(()=>g.value.pageInfo.replace("#pageNumber#",n.value).replace("#totalPage#",d.value).replace("#totalRow#",u.value)),D=e.computed(()=>({"v-pagination":!0,"v-pagination--border":a.border,"v-pagination--right":a.align==="right","v-pagination--center":a.align==="center","v-pagination--disabled":a.disabled})),A=e.computed(()=>n.value===s),L=e.computed(()=>n.value===d.value);e.watch(()=>a.modelValue,t=>{typeof t=="number"&&t>0&&y(t,!1)});function y(t=s,_=!0){if(a.disabled||typeof t!="number")return;let v=t<s?s:t;t>d.value&&d.value>0&&(v=d.value),!(v===n.value&&f.value===m.value)&&(n.value=v,_&&r("update:modelValue",n.value),m.value=f.value,I())}function I(){r("change",{pageNumber:n.value,pageSize:Number(f.value)})}function P(t,_,v){const i={href:"javascript:void(0)",onClick:()=>y(_)};return e.h("li",{class:t},[e.h("a",i,v)])}return e.onMounted(()=>{y(a.modelValue||s)}),c({current:n,totalPage:d,pageNumbers:w,goPage:y,reload:I}),()=>{const t=[];if(Array.isArray(o.value)&&o.value.length){const i={disabled:a.disabled,onChange:S=>{f.value=Number(S.target.value),y()}},b=o.value.map(S=>e.h("option",{value:S},S));a.displayAll&&b.push(e.h("option",{value:C},g.value.all));const G=e.h("li",{class:"v-pagination__list"},[e.h("a",{href:"javascript:void(0)"},[e.h("span",g.value.pageLength),e.h("select",i,b)])]);t.push(G)}if(a.info&&t.push(e.h("li",{class:"v-pagination__info"},[e.h("a",{href:"javascript:void(0)"},k.value)])),"default"in l){const i={pageNumber:n.value,pageSize:f.value,totalPage:d.value,totalRow:u.value,isFirst:A.value,isLast:L.value},b=e.h("li",{class:"v-pagination__slot"},[e.h("a",l.default(i))]);t.push(b)}if(a.first){const i=["v-pagination__first",{disabled:A.value}];t.push(P(i,s,g.value.first))}const _=["v-pagination__previous",{disabled:A.value}];t.push(P(_,n.value-1,g.value.previous)),a.pageNumber&&t.push(...w.value.map(i=>{const b={active:i===n.value};return P(b,i,i)}));const v=["v-pagination__next",{disabled:L.value}];if(t.push(P(v,n.value+1,g.value.next)),a.last){const i=["v-pagination__last",{disabled:L.value}];t.push(P(i,d.value,g.value.last))}return e.h("div",{class:D.value},[e.h("ul",t)])}}});h.install=(a,r={})=>{if(Object.keys(r).length){const{props:l}=h,{language:c,align:o,info:u,border:n,pageNumber:f,first:N,last:g,pageSizeMenu:m}=r;c&&(l.language.default=c),o&&(l.align.default=o),typeof u=="boolean"&&(l.info.default=u),typeof n=="boolean"&&(l.border.default=n),typeof f=="boolean"&&(l.pageNumber.default=f),typeof N=="boolean"&&(l.first.default=N),typeof g=="boolean"&&(l.last.default=g),typeof m<"u"&&(l.pageSizeMenu.default=m)}a.component(h.name,h)},p.PaginationBar=h,p.default=h,Object.defineProperties(p,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "v-page",
|
|
3
3
|
"description": "A simple pagination bar",
|
|
4
|
-
"version": "3.0.0
|
|
4
|
+
"version": "3.0.0",
|
|
5
5
|
"author": "TerryZ <terry5@foxmail.com>",
|
|
6
6
|
"type": "module",
|
|
7
7
|
"files": [
|
|
@@ -17,6 +17,11 @@
|
|
|
17
17
|
"default": "./dist/v-page.js"
|
|
18
18
|
},
|
|
19
19
|
"require": "./dist/v-page.umd.cjs"
|
|
20
|
+
},
|
|
21
|
+
"./types": {
|
|
22
|
+
"import": {
|
|
23
|
+
"types": "./types/index.d.ts"
|
|
24
|
+
}
|
|
20
25
|
}
|
|
21
26
|
},
|
|
22
27
|
"typings": "./types/index.d.ts",
|
|
@@ -45,24 +50,24 @@
|
|
|
45
50
|
"vue": "^3.2.0"
|
|
46
51
|
},
|
|
47
52
|
"dependencies": {
|
|
48
|
-
"vue": "^3.
|
|
53
|
+
"vue": "^3.3.4"
|
|
49
54
|
},
|
|
50
55
|
"devDependencies": {
|
|
51
|
-
"@rushstack/eslint-patch": "^1.
|
|
52
|
-
"@vitejs/plugin-vue": "^4.
|
|
53
|
-
"@vitejs/plugin-vue-jsx": "^3.0.
|
|
56
|
+
"@rushstack/eslint-patch": "^1.3.3",
|
|
57
|
+
"@vitejs/plugin-vue": "^4.3.4",
|
|
58
|
+
"@vitejs/plugin-vue-jsx": "^3.0.2",
|
|
54
59
|
"@vue/eslint-config-standard": "^8.0.1",
|
|
55
|
-
"@vue/test-utils": "^2.
|
|
56
|
-
"bootstrap": "^5.
|
|
57
|
-
"c8": "^
|
|
58
|
-
"eslint": "^8.
|
|
59
|
-
"eslint-plugin-vue": "^9.
|
|
60
|
-
"jsdom": "^
|
|
61
|
-
"sass": "^1.
|
|
62
|
-
"sass-loader": "^13.2
|
|
63
|
-
"typescript": "^
|
|
64
|
-
"vite": "^4.
|
|
65
|
-
"vite-plugin-css-injected-by-js": "^
|
|
66
|
-
"vitest": "^0.
|
|
60
|
+
"@vue/test-utils": "^2.4.1",
|
|
61
|
+
"bootstrap": "^5.3.1",
|
|
62
|
+
"c8": "^8.0.1",
|
|
63
|
+
"eslint": "^8.49.0",
|
|
64
|
+
"eslint-plugin-vue": "^9.17.0",
|
|
65
|
+
"jsdom": "^22.1.0",
|
|
66
|
+
"sass": "^1.66.1",
|
|
67
|
+
"sass-loader": "^13.3.2",
|
|
68
|
+
"typescript": "^5.2.2",
|
|
69
|
+
"vite": "^4.4.9",
|
|
70
|
+
"vite-plugin-css-injected-by-js": "^3.3.0",
|
|
71
|
+
"vitest": "^0.34.4"
|
|
67
72
|
}
|
|
68
73
|
}
|
package/types/index.d.ts
CHANGED
|
@@ -1,81 +1,112 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import {
|
|
2
|
+
AllowedComponentProps,
|
|
3
|
+
ComponentCustomProps,
|
|
4
|
+
VNodeProps,
|
|
5
|
+
VNode
|
|
6
|
+
} from 'vue'
|
|
2
7
|
|
|
3
|
-
|
|
8
|
+
export declare interface PageInfo {
|
|
9
|
+
pageNumber: number
|
|
10
|
+
pageSize: number
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
export declare interface PageSlotData {
|
|
14
|
+
pageNumber: number
|
|
15
|
+
pageSize: number
|
|
16
|
+
totalPage: number
|
|
17
|
+
totalRow: number
|
|
18
|
+
isFirst: boolean
|
|
19
|
+
isLast: boolean
|
|
20
|
+
}
|
|
4
21
|
|
|
5
22
|
/**
|
|
6
23
|
* Pagination plugin for Vue
|
|
7
24
|
*/
|
|
8
25
|
declare interface Props {
|
|
9
26
|
/**
|
|
10
|
-
*
|
|
27
|
+
* The number of current page
|
|
11
28
|
*/
|
|
12
|
-
|
|
29
|
+
modelValue?: number
|
|
13
30
|
/**
|
|
14
|
-
*
|
|
31
|
+
* The number of total record
|
|
15
32
|
*/
|
|
16
33
|
totalRow: number
|
|
17
34
|
/**
|
|
18
|
-
* v-page language
|
|
35
|
+
* v-page language
|
|
36
|
+
* @default `en`
|
|
19
37
|
*/
|
|
20
38
|
language?: string
|
|
21
39
|
/**
|
|
22
|
-
*
|
|
40
|
+
* Page size list
|
|
41
|
+
* @default [10, 20, 50, 100]
|
|
23
42
|
*/
|
|
24
43
|
pageSizeMenu?: boolean|number[]
|
|
25
44
|
/**
|
|
26
|
-
*
|
|
45
|
+
* Alignment direction
|
|
46
|
+
* @default `right`
|
|
27
47
|
*/
|
|
28
48
|
align?: string
|
|
29
49
|
/**
|
|
30
|
-
*
|
|
50
|
+
* Disabled the pagination
|
|
51
|
+
* @default false
|
|
31
52
|
*/
|
|
32
53
|
disabled?: boolean
|
|
33
54
|
/**
|
|
34
|
-
*
|
|
55
|
+
* Whether to display the border
|
|
56
|
+
* @default true
|
|
35
57
|
*/
|
|
36
58
|
border?: boolean
|
|
37
59
|
/**
|
|
38
|
-
*
|
|
60
|
+
* Whether to display page info bar
|
|
61
|
+
* @default true
|
|
39
62
|
*/
|
|
40
63
|
info?: boolean
|
|
41
64
|
/**
|
|
42
|
-
*
|
|
65
|
+
* Whether to display page number buttons
|
|
66
|
+
* @default true
|
|
43
67
|
*/
|
|
44
68
|
pageNumber?: boolean
|
|
45
69
|
/**
|
|
46
|
-
*
|
|
70
|
+
* Whether to display first page button
|
|
71
|
+
* @default true
|
|
47
72
|
*/
|
|
48
73
|
first?: boolean
|
|
49
74
|
/**
|
|
50
|
-
*
|
|
75
|
+
* Whether to display last page button
|
|
76
|
+
* @default true
|
|
51
77
|
*/
|
|
52
78
|
last?: boolean
|
|
53
79
|
/**
|
|
54
|
-
*
|
|
80
|
+
* Whether add `All` item in page length list
|
|
81
|
+
* @default false
|
|
55
82
|
*/
|
|
56
83
|
displayAll?: boolean
|
|
57
84
|
}
|
|
58
85
|
|
|
59
|
-
declare interface
|
|
60
|
-
/**
|
|
61
|
-
|
|
62
|
-
/**
|
|
63
|
-
|
|
86
|
+
declare interface Emits {
|
|
87
|
+
/** Update pageNumber value */
|
|
88
|
+
'onUpdate:modelValue'?: (pageNumber: number) => void
|
|
89
|
+
/** The event respond pageNumber or pageSize change */
|
|
90
|
+
onChange?: (data: PageInfo) => void
|
|
64
91
|
}
|
|
65
92
|
|
|
66
|
-
declare
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
93
|
+
// declare interface Methods extends MethodOptions {
|
|
94
|
+
// /** Go to the specified page */
|
|
95
|
+
// goPage: (pageNumber: number) => void
|
|
96
|
+
// /** Re-emit `change` event and output pagination states data */
|
|
97
|
+
// reload: () => void
|
|
98
|
+
// }
|
|
99
|
+
|
|
100
|
+
declare interface PaginationBar {
|
|
101
|
+
new (): {
|
|
102
|
+
$props: AllowedComponentProps & ComponentCustomProps & VNodeProps & Props & Emits
|
|
103
|
+
$slots: {
|
|
104
|
+
default?: (defaultSlotData: PageSlotData) => VNode[]
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
declare const PaginationBar: PaginationBar
|
|
78
109
|
|
|
79
|
-
export {
|
|
110
|
+
export { PaginationBar }
|
|
80
111
|
|
|
81
|
-
export default
|
|
112
|
+
export default PaginationBar
|