v-page - npm Package Compare versions

Comparing version 3.0.0-beta.4 to 3.0.0

dist/v-page.js

@@ -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
 };

package.json

 {
   "name": "v-page",
   "description": "A simple pagination bar",
-  "version": "3.0.0-beta.4",
+  "version": "3.0.0",
   "author": "TerryZ <[e-mail]>",
@@ -20,2 +20,7 @@ "type": "module",
       "require": "./dist/v-page.umd.cjs"
+    },
+    "./types": {
+      "import": {
+        "types": "./types/index.d.ts"
+      }
     }
@@ -22,0 +27,0 @@ },

README.md

 # [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>
 ```

types/index.d.ts

 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

New alerts

License Policy Violation

License

This 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 risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This 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 risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

23679

increased by4.99%

Number of low quality alerts

2

decreased by-33.33%

Number of lines in readme file

85

increased by10.39%

Worsened metrics

Lines of code

367

decreased by-2.13%

No dependency changes