release: v3.0.0

TerryZ · Sep 11, 2023 · c116aae · c116aae
1 parent d7d2a7d
commit c116aae
Show file tree

Hide file tree

Showing 10 changed files with 99 additions and 107 deletions.
diff --git a/CHANGELOG-CN.md b/CHANGELOG-CN.md
@@ -2,6 +2,13 @@
 
 英文 changelog 内容请访问 [CHANGELOG](CHANGELOG.md)
 
+## [3.0.0](https://github.com/TerryZ/v-page/compare/v3.0.0-beta.4...v3.0.0) (2023-09-11)
+
+- 完善 `.d.ts` 文档 `default slot` 内容
+- 优化组件样式
+- 组件默认语言从 `cn` 修改为 `en`
+- 组件导出的模块名称从 `Page` 修改为 `PaginationBar`
+
 ## [3.0.0-beta.4](https://github.com/TerryZ/v-page/compare/v3.0.0-beta.3...v3.0.0-beta.4) (2023-09-10)
 
 - 更新 `.d.ts` 文档

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,13 @@
 
 Please refer to [CHANGELOG-CN](CHANGELOG-CN.md) for Chinese changelog
 
+## [3.0.0](https://github.com/TerryZ/v-page/compare/v3.0.0-beta.4...v3.0.0) (2023-09-11)
+
+- Complete `.d.ts` document `default slot` content
+- Optimize component styles
+- The component default language is changed from `cn` to `en`
+- The module name exported by the component is changed from `Page` to `PaginationBar`
+
 ## [3.0.0-beta.4](https://github.com/TerryZ/v-page/compare/v3.0.0-beta.3...v3.0.0-beta.4) (2023-09-10)
 
 - Update `.d.ts` document

diff --git a/README.md b/README.md
@@ -1,11 +1,18 @@
 # [v-page](https://terryz.github.io/vue/#/page) &middot; [![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
 
 <img src="https://terryz.github.io/image/v-page/v-page.png" alt="v-page" height="54px">
 
 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
 
+<!-- ## Features
+
+- Simple interface style
+- I18n supported
+- Modularization of Pagination bar features
+-  -->
+
 ## Examples and Documentation
 
 Documentation and examples and please visit below sites
@@ -28,49 +35,50 @@ pnpm add v-page
 Include and install plugin in your `main.js` file
 
 ```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
 })
 app.mount('#app')
 ```
 
-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>
 ```
 
 ## Usage
 
 ```vue
 <template>
-  <v-page
+  <PaginationBar
     v-model="pageNumber"
     :total-row="totalRow"
-    @change="pageChange"
+    @change="paginationChange"
   />
 </template>
 
 <script setup>
 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>
 ```
diff --git a/examples/ExamplesIndex.vue b/examples/ExamplesIndex.vue
@@ -1,6 +1,6 @@
 <script setup>
 import { ref } from 'vue'
-import { Page as VPage } from '../src'
+import { PaginationBar as VPage } from '../src'
 
 const arr = Array(108)
   .fill(0)
@@ -218,7 +218,9 @@ function displayAllPageChange (data) {
     <div class="bg-white border p-3 rounded-3">
       <v-page
         :total-row="100"
+        :disabled="disabled"
         align="left"
+        language="cn"
         border
       />
     </div>

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "v-page",
   "description": "A simple pagination bar",
-  "version": "3.0.0-beta.4",
+  "version": "3.0.0",
   "author": "TerryZ <terry5@foxmail.com>",
   "type": "module",
   "files": [
@@ -17,6 +17,11 @@
         "default": "./dist/v-page.js"
       },
       "require": "./dist/v-page.umd.cjs"
+    },
+    "./types": {
+      "import": {
+        "types": "./types/index.d.ts"
+      }
     }
   },
   "typings": "./types/index.d.ts",

diff --git a/src/Page.js b/src/Page.js
@@ -1,6 +1,6 @@
 import { h, ref, computed, watch, toRefs, onMounted, defineComponent } from 'vue'
 import './page.sass'
-import languages, { CN } from './language'
+import languages, { EN } from './language'
 import {
   FIRST,
   defaultPageSize,
@@ -11,11 +11,11 @@ import {
 } from './helper'
 
 export default defineComponent({
-  name: 'VPage',
+  name: 'PaginationBar',
   props: {
     modelValue: { type: Number, default: 0 },
     totalRow: { type: Number, default: 0 },
-    language: { type: String, default: CN },
+    language: { type: String, default: EN },
     /**
      * Page size list
      * false: close page size list
@@ -49,7 +49,7 @@ export default defineComponent({
       pageSizeMenu.value === false ? defaultPageSize : pageSizeMenu.value[0]
     )
     const pageNumberSize = ref(defaultPageNumberSize)
-    const i18n = ref(languages[props.language] || languages[CN])
+    const i18n = ref(languages[props.language] || languages[EN])
     const lastPageSize = ref(-1)
 
     const totalPage = computed(() => {
@@ -162,7 +162,7 @@ export default defineComponent({
         }
 
         const li = h('li', { class: 'v-pagination__list' }, [
-          h('a', [
+          h('a', { href: 'javascript:void(0)' }, [
             h('span', i18n.value.pageLength),
             h('select', selectOption, options)
           ])
@@ -172,23 +172,23 @@ export default defineComponent({
       // page info
       if (props.info) {
         items.push(
-          h('li', { class: 'v-pagination__info' }, [h('a', pageInfo.value)])
+          h('li', { class: 'v-pagination__info' }, [
+            h('a', { href: 'javascript:void(0)' }, pageInfo.value)
+          ])
         )
       }
       // scoped slot
       if ('default' in slots) {
+        const slotData = {
+          pageNumber: current.value,
+          pageSize: pageSize.value,
+          totalPage: totalPage.value,
+          totalRow: totalRow.value,
+          isFirst: isFirst.value,
+          isLast: isLast.value
+        }
         const li = h('li', { class: 'v-pagination__slot' }, [
-          h(
-            'a',
-            slots.default({
-              pageNumber: current.value,
-              pageSize: pageSize.value,
-              totalPage: totalPage.value,
-              totalRow: totalRow.value,
-              isFirst: isFirst.value,
-              isLast: isLast.value
-            })
-          )
+          h('a', slots.default(slotData))
         ])
         // build scoped slot with named slot
         items.push(li)

diff --git a/src/index.js b/src/index.js
@@ -1,8 +1,8 @@
-import Page from './Page'
+import PaginationBar from './Page'
 
-Page.install = (app, options = {}) => {
+PaginationBar.install = (app, options = {}) => {
   if (Object.keys(options).length) {
-    const { props } = Page
+    const { props } = PaginationBar
     const {
       language,
       align,
@@ -25,8 +25,8 @@ Page.install = (app, options = {}) => {
       props.pageSizeMenu.default = pageSizeMenu
     }
   }
-  app.component(Page.name, Page)
+  app.component(PaginationBar.name, PaginationBar)
 }
 
-export { Page }
-export default Page
+export { PaginationBar }
+export default PaginationBar
diff --git a/src/page.sass b/src/page.sass
@@ -10,23 +10,37 @@ $color-muted: #999
     justify-content: flex-end
   &--center
     justify-content: center
+  &#{&}--disabled
+    a,
+    select
+      color: $color-muted !important
+  &#{&}--disabled#{&}--border
+    a,
+    a:hover
+      background-color: #fafafa
   ul
     margin: 0
     padding: 0
     display: flex
     li
       list-style: none
       display: flex
+      &.v-pagination__info,
+      &.v-pagination__list
+        a
+          cursor: default
+          color: $color-text
       a
         padding: .3rem .6rem
         text-decoration: none
-        pointer-events: none
         line-height: 1.3
         font-size: 14px
         margin: 0
         outline: 0
         color: $color-text
         border-radius: $border-radius
+        display: inline-flex
+        align-items: center
       &:not(.active):not(.disabled):not(.v-pagination__list):not(.v-pagination__info):not(.v-pagination__slot) a:hover
         background-color: #fafafa
       &.active
@@ -35,7 +49,7 @@ $color-muted: #999
           color: #aaa
       &.disabled
         a
-          color: $color-muted
+          color: $color-muted !important
           cursor: default
       select
         width: auto !important
@@ -45,10 +59,7 @@ $color-muted: #999
         margin: 0 0 0 5px
         border: 1px solid #ccc
         color: $color-text
-        border-radius: 2px
-        &:hover
-          &[disabled]
-            color: $color-muted
+        border-radius: .3rem
 
   &#{&}--border
     ul

diff --git a/tests/v-page.spec.js b/tests/v-page.spec.js
@@ -25,7 +25,8 @@ describe('v-page', function () {
     const wrapper = mount(page, {
       props: {
         modelValue: 3,
-        totalRow: 101
+        totalRow: 101,
+        language: 'cn'
       }
     })
 
@@ -67,7 +68,8 @@ describe('v-page', function () {
     const wrapper = mount(page, {
       props: {
         modelValue: 5,
-        totalRow: 100
+        totalRow: 100,
+        language: 'cn'
       }
     })
     it('initialize v-page with props: { modelValue: 5, totalRow: 100 }', () => {