Comparing version 3.0.0-beta.4 to 3.0.0
@@ -1,11 +0,11 @@ | ||
(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 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;pointer-events:none;line-height:1.3;font-size:14px;margin:0;outline:0;color:#333;border-radius:.25rem}.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;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:2px}.v-pagination ul li select:hover[disabled]{color:#999}.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(o){console.error("vite-plugin-css-injected-by-js",o)}})(); | ||
import { defineComponent as F, toRefs as j, ref as P, computed as c, watch as k, onMounted as O, h as u } from "vue"; | ||
(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)}})(); | ||
import { defineComponent as F, toRefs as V, ref as N, computed as b, watch as k, onMounted as D, h as u } from "vue"; | ||
const [ | ||
O, | ||
z, | ||
T, | ||
D, | ||
G, | ||
Z | ||
] = ["cn", "en", "de", "jp", "pt"], I = { | ||
[z]: { | ||
] = ["cn", "en", "de", "jp", "pt"], B = { | ||
[O]: { | ||
pageLength: "每页记录数 ", | ||
@@ -19,3 +19,3 @@ pageInfo: "当前显示第 #pageNumber# / #totalPage# 页(共#totalRow#条记录)", | ||
}, | ||
[T]: { | ||
[z]: { | ||
pageLength: "Page length ", | ||
@@ -29,3 +29,3 @@ pageInfo: "Current #pageNumber# / #totalPage# (total #totalRow# records)", | ||
}, | ||
[D]: { | ||
[T]: { | ||
pageLength: "Seitenlänge ", | ||
@@ -57,3 +57,3 @@ pageInfo: "Aktuell #pageNumber# / #totalPage# (gesamt #totalRow# Aufzeichnungen)", | ||
} | ||
}, r = 1, J = 5, B = 10, q = [B, 20, 50, 100], x = 0; | ||
}, r = 1, J = 5, x = 10, q = [x, 20, 50, 100], I = 0; | ||
function H(e, s, t) { | ||
@@ -70,3 +70,3 @@ if (s <= t) | ||
const R = F({ | ||
name: "VPage", | ||
name: "PaginationBar", | ||
props: { | ||
@@ -103,9 +103,9 @@ modelValue: { type: Number, default: 0 }, | ||
setup(e, { emit: s, slots: t, expose: v }) { | ||
const { pageSizeMenu: n, totalRow: o } = j(e), l = P(0), f = P( | ||
n.value === !1 ? B : n.value[0] | ||
), N = P(J), g = P(I[e.language] || I[z]), b = P(-1), p = c(() => f.value === x ? r : Math.ceil(o.value / f.value)), C = c(() => K( | ||
const { pageSizeMenu: n, totalRow: o } = V(e), l = N(0), f = N( | ||
n.value === !1 ? x : n.value[0] | ||
), _ = 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( | ||
l.value, | ||
p.value, | ||
N.value | ||
)), M = c(() => g.value.pageInfo.replace("#pageNumber#", l.value).replace("#totalPage#", p.value).replace("#totalRow#", o.value)), V = c(() => ({ | ||
_.value | ||
)), M = b(() => g.value.pageInfo.replace("#pageNumber#", l.value).replace("#totalPage#", p.value).replace("#totalRow#", o.value)), j = b(() => ({ | ||
"v-pagination": !0, | ||
@@ -116,14 +116,14 @@ "v-pagination--border": e.border, | ||
"v-pagination--disabled": e.disabled | ||
})), A = c(() => l.value === r), L = c(() => l.value === p.value); | ||
})), A = b(() => l.value === r), L = b(() => l.value === p.value); | ||
k( | ||
() => e.modelValue, | ||
(a) => { | ||
typeof a == "number" && a > 0 && m(a, !1); | ||
typeof a == "number" && a > 0 && h(a, !1); | ||
} | ||
); | ||
function m(a = r, y = !0) { | ||
function h(a = r, P = !0) { | ||
if (e.disabled || typeof a != "number") | ||
return; | ||
let d = a < r ? r : a; | ||
a > p.value && p.value > 0 && (d = p.value), !(d === l.value && f.value === b.value) && (l.value = d, y && s("update:modelValue", l.value), b.value = f.value, w()); | ||
let c = a < r ? r : a; | ||
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()); | ||
} | ||
@@ -136,10 +136,10 @@ function w() { | ||
} | ||
function h(a, y, d) { | ||
function y(a, P, c) { | ||
return u("li", { class: a }, [u("a", { | ||
href: "javascript:void(0)", | ||
onClick: () => m(y) | ||
}, d)]); | ||
onClick: () => h(P) | ||
}, c)]); | ||
} | ||
return O(() => { | ||
m(e.modelValue || r); | ||
return D(() => { | ||
h(e.modelValue || r); | ||
}), v({ | ||
@@ -149,3 +149,3 @@ current: l, | ||
pageNumbers: C, | ||
goPage: m, | ||
goPage: h, | ||
reload: w | ||
@@ -158,14 +158,14 @@ }), () => { | ||
onChange: (S) => { | ||
f.value = Number(S.target.value), m(); | ||
f.value = Number(S.target.value), h(); | ||
} | ||
}, _ = n.value.map( | ||
}, d = n.value.map( | ||
(S) => u("option", { value: S }, S) | ||
); | ||
e.displayAll && _.push( | ||
u("option", { value: x }, g.value.all) | ||
e.displayAll && d.push( | ||
u("option", { value: I }, g.value.all) | ||
); | ||
const E = u("li", { class: "v-pagination__list" }, [ | ||
u("a", [ | ||
u("a", { href: "javascript:void(0)" }, [ | ||
u("span", g.value.pageLength), | ||
u("select", i, _) | ||
u("select", i, d) | ||
]) | ||
@@ -176,42 +176,41 @@ ]); | ||
if (e.info && a.push( | ||
u("li", { class: "v-pagination__info" }, [u("a", M.value)]) | ||
u("li", { class: "v-pagination__info" }, [ | ||
u("a", { href: "javascript:void(0)" }, M.value) | ||
]) | ||
), "default" in t) { | ||
const i = u("li", { class: "v-pagination__slot" }, [ | ||
u( | ||
"a", | ||
t.default({ | ||
pageNumber: l.value, | ||
pageSize: f.value, | ||
totalPage: p.value, | ||
totalRow: o.value, | ||
isFirst: A.value, | ||
isLast: L.value | ||
}) | ||
) | ||
const i = { | ||
pageNumber: l.value, | ||
pageSize: f.value, | ||
totalPage: p.value, | ||
totalRow: o.value, | ||
isFirst: A.value, | ||
isLast: L.value | ||
}, d = u("li", { class: "v-pagination__slot" }, [ | ||
u("a", t.default(i)) | ||
]); | ||
a.push(i); | ||
a.push(d); | ||
} | ||
if (e.first) { | ||
const i = ["v-pagination__first", { disabled: A.value }]; | ||
a.push(h(i, r, g.value.first)); | ||
a.push(y(i, r, g.value.first)); | ||
} | ||
const y = ["v-pagination__previous", { disabled: A.value }]; | ||
const P = ["v-pagination__previous", { disabled: A.value }]; | ||
a.push( | ||
h(y, l.value - 1, g.value.previous) | ||
y(P, l.value - 1, g.value.previous) | ||
), e.pageNumber && a.push( | ||
...C.value.map((i) => { | ||
const _ = { active: i === l.value }; | ||
return h(_, i, i); | ||
const d = { active: i === l.value }; | ||
return y(d, i, i); | ||
}) | ||
); | ||
const d = ["v-pagination__next", { disabled: L.value }]; | ||
const c = ["v-pagination__next", { disabled: L.value }]; | ||
if (a.push( | ||
h(d, l.value + 1, g.value.next) | ||
y(c, l.value + 1, g.value.next) | ||
), e.last) { | ||
const i = ["v-pagination__last", { disabled: L.value }]; | ||
a.push( | ||
h(i, p.value, g.value.last) | ||
y(i, p.value, g.value.last) | ||
); | ||
} | ||
return u("div", { class: V.value }, [u("ul", a)]); | ||
return u("div", { class: j.value }, [u("ul", a)]); | ||
}; | ||
@@ -228,7 +227,7 @@ } | ||
pageNumber: f, | ||
first: N, | ||
first: _, | ||
last: g, | ||
pageSizeMenu: b | ||
pageSizeMenu: m | ||
} = s; | ||
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 N == "boolean" && (t.first.default = N), typeof g == "boolean" && (t.last.default = g), typeof b < "u" && (t.pageSizeMenu.default = b); | ||
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); | ||
} | ||
@@ -238,4 +237,4 @@ e.component(R.name, R); | ||
export { | ||
R as Page, | ||
R as PaginationBar, | ||
R as default | ||
}; |
{ | ||
"name": "v-page", | ||
"description": "A simple pagination bar", | ||
"version": "3.0.0-beta.4", | ||
"version": "3.0.0", | ||
"author": "TerryZ <terry5@foxmail.com>", | ||
@@ -20,2 +20,7 @@ "type": "module", | ||
"require": "./dist/v-page.umd.cjs" | ||
}, | ||
"./types": { | ||
"import": { | ||
"types": "./types/index.d.ts" | ||
} | ||
} | ||
@@ -22,0 +27,0 @@ }, |
# [v-page](https://terryz.github.io/vue/#/page) · [![CircleCI](https://dl.circleci.com/status-badge/img/gh/TerryZ/v-page/tree/master.svg?style=svg)](https://dl.circleci.com/status-badge/redirect/gh/TerryZ/v-page/tree/master) [![code coverage](https://codecov.io/gh/TerryZ/v-page/branch/master/graph/badge.svg)](https://codecov.io/gh/TerryZ/v-page) [![npm version](https://img.shields.io/npm/v/v-page.svg)](https://www.npmjs.com/package/v-page) [![license](https://img.shields.io/badge/license-MIT-brightgreen.svg)](https://mit-license.org/) [![npm download](https://img.shields.io/npm/dy/v-page.svg)](https://www.npmjs.com/package/v-page) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com) | ||
A simple pagination bar for vue3, including size Menu, i18n support | ||
A simple pagination bar for vue3, including size Menu, i18n support features | ||
@@ -9,2 +9,9 @@ <img src="https://terryz.github.io/image/v-page/v-page.png" alt="v-page" height="54px"> | ||
<!-- ## Features | ||
- Simple interface style | ||
- I18n supported | ||
- Modularization of Pagination bar features | ||
- --> | ||
## Examples and Documentation | ||
@@ -32,9 +39,9 @@ | ||
```js | ||
// add component in global scope as plugin | ||
import { createApp } from 'vue' | ||
import App from './app.vue' | ||
import Page from 'v-page' | ||
import { PaginationBar } from 'v-page' | ||
const app = createApp(App) | ||
app.use(Page, { | ||
// install component globally | ||
app.use(PaginationBar, { | ||
// globally config options | ||
@@ -45,11 +52,11 @@ }) | ||
You also can use `v-page` in local component | ||
You can also use `v-page` as a locally component | ||
```vue | ||
<template> | ||
<Page /> | ||
<PaginationBar /> | ||
</template> | ||
<script setup> | ||
import { Page } from 'v-page' | ||
import { PaginationBar } from 'v-page' | ||
</script> | ||
@@ -62,6 +69,6 @@ ``` | ||
<template> | ||
<v-page | ||
<PaginationBar | ||
v-model="pageNumber" | ||
:total-row="totalRow" | ||
@change="pageChange" | ||
@change="paginationChange" | ||
/> | ||
@@ -72,10 +79,11 @@ </template> | ||
import { ref } from 'vue' | ||
import { PaginationBar } from 'v-page' | ||
// set default page to 3 | ||
const pageNumber = ref(3) | ||
const totalRow = ref(100) | ||
// respond for pagination change | ||
function pageChange (data) { | ||
console.log(pInfo) // { pageNumber: 1, pageSize: 10 } | ||
function paginationChange (data) { | ||
console.log(data) // { pageNumber: 1, pageSize: 10 } | ||
} | ||
</script> | ||
``` |
import { | ||
DefineComponent, | ||
ComputedOptions, | ||
MethodOptions, | ||
ComponentOptionsMixin, | ||
ObjectEmitsOptions, | ||
SlotsType | ||
AllowedComponentProps, | ||
ComponentCustomProps, | ||
VNodeProps, | ||
VNode | ||
} from 'vue' | ||
@@ -15,20 +13,11 @@ | ||
declare interface EmitEvents extends ObjectEmitsOptions { | ||
/** Update pageNumber value */ | ||
'update:modelValue': (pageNumber: number) => void | ||
/** The event respond pageNumber or pageSize change */ | ||
change: (data: PageInfo) => void | ||
export declare interface PageSlotData { | ||
pageNumber: number | ||
pageSize: number | ||
totalPage: number | ||
totalRow: number | ||
isFirst: boolean | ||
isLast: boolean | ||
} | ||
declare interface Slots extends SlotsType { | ||
default: { | ||
pageNumber: number | ||
pageSize: number | ||
totalPage: number | ||
totalRow: number | ||
isFirst: boolean | ||
isLast: boolean | ||
} | ||
} | ||
/** | ||
@@ -48,3 +37,3 @@ * Pagination plugin for Vue | ||
* v-page language | ||
* @default `cn` | ||
* @default `en` | ||
*/ | ||
@@ -99,27 +88,28 @@ language?: string | ||
declare interface Methods extends MethodOptions { | ||
/** Go to the specified page */ | ||
goPage: (pageNumber: number) => void | ||
/** Re-emit `change` event and output pagination states data */ | ||
reload: () => void | ||
declare interface Emits { | ||
/** Update pageNumber value */ | ||
'onUpdate:modelValue'?: (pageNumber: number) => void | ||
/** The event respond pageNumber or pageSize change */ | ||
onChange?: (data: PageInfo) => void | ||
} | ||
declare const Page: DefineComponent< | ||
Props, | ||
{}, | ||
{}, | ||
ComputedOptions, | ||
Methods, | ||
ComponentOptionsMixin, | ||
ComponentOptionsMixin, | ||
EmitEvents, | ||
'', | ||
{}, | ||
{}, | ||
{}, | ||
Slots | ||
> | ||
// declare interface Methods extends MethodOptions { | ||
// /** Go to the specified page */ | ||
// goPage: (pageNumber: number) => void | ||
// /** Re-emit `change` event and output pagination states data */ | ||
// reload: () => void | ||
// } | ||
export { Page } | ||
declare interface PaginationBar { | ||
new (): { | ||
$props: AllowedComponentProps & ComponentCustomProps & VNodeProps & Props & Emits | ||
$slots: { | ||
default?: (defaultSlotData: PageSlotData) => VNode[] | ||
} | ||
} | ||
} | ||
declare const PaginationBar: PaginationBar | ||
export default Page | ||
export { PaginationBar } | ||
export default PaginationBar |
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
23679
2
85
367