docs(pagination): vue3

demo/documentation/components/pagination/enUS/basic.demo.md

@@ -1,7 +1,7 @@
 # Basic
 ```html
 <n-pagination
-  v-model="page"
+  v-model:page="page"
   :page-count="100"
 />
 ```

demo/documentation/components/pagination/enUS/disabled.demo.md

@@ -1,17 +1,17 @@
 # Disabled
 ```html
-<n-pagination
-  v-model="page"
-  :page-count="100"
-  show-size-picker
-  :page-size="pageSize"
-  :page-sizes="[10, 20, 30, 40]"
-  show-quick-jumper
-  :disabled="disabled"
-  @page-size-change="handlePageSizeChange"
-  :style="{ marginBottom: '12px' }"
-/>
-<n-switch v-model="disabled" />
+<n-space vertical>
+  <n-pagination
+    v-model:page="page"
+    v-model:page-size="pageSize"
+    :page-count="100"
+    show-size-picker
+    :page-sizes="[10, 20, 30, 40]"
+    show-quick-jumper
+    :disabled="disabled"
+  />
+  <n-switch v-model:value="disabled" />
+</n-space>
 ```
 
 ```js
@@ -22,17 +22,6 @@ export default {
       pageSize: 20,
       disabled: true
     }
-  },
-  methods: {
-    handlePageSizeChange (pageSize) {
-      this.pageSize = pageSize
-      this.$NMessage.info(`Page size is set to ${pageSize}`)
-    }
   }
 }
 ```
-```css
-.n-switch {
-  margin-left: 12px;
-}
-```

demo/documentation/components/pagination/enUS/index.demo-entry.md

@@ -9,27 +9,17 @@ quick-jumper
 size-picker
 disabled
 ```
-## V-model
-|Prop|Event|
-|-|-|
-|page|change|
 
 ## Props
 |Name|Type|Default|Description|
 |-|-|-|-|
-|theme|`'light' \| 'dark' \| null \| string`|`null`||
-|page|`number`|`null`||
-|page-count|`number`|`null`||
-|page-size|`number`|`null`||
+|page-count|`number`|required||
 |page-sizes|`Array<number>`|`[]`||
-|show-size-picker|`boolean`|`false`||
-|show-quick-jumper|`boolean`|`false`||
+|page-size|`number`|`undefined`||
 |page-slot|`number`|`9`||
-|on-page-size-change|`(pageSize: number) => any`|`null`||
-|on-change|`(page: number) => any`|`null`||
-
-## Events
-|Name|Parameters|Description|
-|-|-|-|
-|change|`(page: number)`||
-|page-size-chagne|`(pageSize: number)`||
+|page|`number`|required||
+|show-quick-jumper|`boolean`|`false`||
+|show-size-picker|`boolean`|`false`||
+|theme|`'light' \| 'dark' \| null \| string`|`null`||
+|on-update:page|`(page: number) => any`|`undefined`||
+|on-update:page-size|`(pageSize: number) => any`|`undefined`||

demo/documentation/components/pagination/enUS/quick-jumper.demo.md

@@ -1,7 +1,7 @@
 # Quick Jumper
 ```html
 <n-pagination
-  v-model="page"
+  v-model:page="page"
   :page-count="100"
   show-quick-jumper
 />

demo/documentation/components/pagination/enUS/size-picker.demo.md

@@ -1,12 +1,11 @@
 # Size Picker
 ```html
 <n-pagination
-  v-model="page"
+  v-model:page="page"
+  v-model:page-size="pageSize"
   :page-count="100"
   show-size-picker
-  :page-size="pageSize"
   :page-sizes="[10, 20, 30, 40]"
-  @page-size-change="handlePageSizeChange"
 />
 ```
 
@@ -17,12 +16,6 @@ export default {
       page: 2,
       pageSize: 20
     }
-  },
-  methods: {
-    handlePageSizeChange (pageSize) {
-      this.pageSize = pageSize
-      this.$NMessage.info(`Page size is set to ${pageSize}`)
-    }
   }
 }
 ```

demo/documentation/components/pagination/enUS/slot.demo.md

@@ -1,20 +1,22 @@
 # Page Slot
 The pagination has a property `page-slot`, try it and you will understand. It aims to solving misclicks caused by the length changing of pagination.
 ```html
-<n-pagination
-  v-model="page"
-  :page-count="100"
-/>
-<n-pagination
-  v-model="page"
-  :page-count="100"
-  :page-slot="8"
-/>
-<n-pagination
-  v-model="page"
-  :page-count="100"
-  :page-slot="7"
-/>
+<n-space vertical>
+  <n-pagination
+    v-model:page="page"
+    :page-count="100"
+  />
+  <n-pagination
+    v-model:page="page"
+    :page-count="100"
+    :page-slot="8"
+  />
+  <n-pagination
+    v-model:page="page"
+    :page-count="100"
+    :page-slot="7"
+  />
+</n-space>
 ```
 
 ```js

demo/documentation/components/pagination/zhCN/disabled.demo.md

@@ -1,39 +1,27 @@
 # 禁用
 ```html
-<n-pagination
-  v-model:page="page"
-  :page-count="100"
-  show-size-picker
-  :page-size="pageSize"
-  :page-sizes="[10, 20, 30, 40]"
-  show-quick-jumper
-  :disabled="disabled"
-  @update:page-size="handlePageSizeChange"
-  :style="{ marginBottom: '12px' }"
-/>
-<n-switch v-model="disabled" />
+<n-space vertical>
+  <n-pagination
+    v-model:page="page"
+    v-model:page-size="pageSize"
+    :page-count="100"
+    show-size-picker
+    :page-sizes="[10, 20, 30, 40]"
+    show-quick-jumper
+    :disabled="disabled"
+  />
+  <n-switch v-model:value="disabled" />
+</n-space>
 ```
 
 ```js
 export default {
-  inject: ['message'],
   data () {
     return {
       page: 2,
       pageSize: 20,
       disabled: true
     }
-  },
-  methods: {
-    handlePageSizeChange (pageSize) {
-      this.pageSize = pageSize
-      this.message.info(`Page size is set to ${pageSize}`)
-    }
   }
 }
-```
-```css
-.n-switch {
-  margin-left: 12px;
-}
 ```

demo/documentation/components/pagination/zhCN/index.demo-entry.md

@@ -1,6 +1,7 @@
 # 分页 Pagination
 <!--single-column-->
 长数据之友。
+
 ## 演示
 ```demo
 basic
@@ -13,13 +14,13 @@ disabled
 ## Props
 |名称|类型|默认值|说明|
 |-|-|-|-|
-|page-count|`number`|`null`||
+|page-count|`number`|required||
 |page-sizes|`Array<number>`|`[]`||
-|page-size|`number`|`null`||
+|page-size|`number`|`undefined`||
 |page-slot|`number`|`9`||
-|page|`number`|`null`||
+|page|`number`|required||
 |show-quick-jumper|`boolean`|`false`||
 |show-size-picker|`boolean`|`false`||
 |theme|`'light' \| 'dark' \| null \| string`|`null`||
-|on-update:page-size|`(pageSize: number) => any`|`null`||
-|on-update:page|`(page: number) => any`|`null`||
+|on-update:page|`(page: number) => any`|`undefined`||
+|on-update:page-size|`(pageSize: number) => any`|`undefined`||

demo/documentation/components/pagination/zhCN/size-picker.demo.md

@@ -2,28 +2,20 @@
 ```html
 <n-pagination
   v-model:page="page"
+  v-model:page-size="pageSize"
   :page-count="100"
   show-size-picker
-  :page-size="pageSize"
   :page-sizes="[10, 20, 30, 40]"
-  @page-size-change="handlePageSizeChange"
 />
 ```
 
 ```js
 export default {
-  inject: ['message'],
   data () {
     return {
       page: 2,
       pageSize: 20
     }
-  },
-  methods: {
-    handlePageSizeChange (pageSize) {
-      this.pageSize = pageSize
-      this.message.info(`Page size is set to ${pageSize}`)
-    }
   }
 }
 ```

demo/documentation/components/pagination/zhCN/slot.demo.md

@@ -1,20 +1,22 @@
 # 页面槽位
 分页有一个属性 `page-slot`，试一下你就能理解它在做什么了。这个概念主要是为了解决由于分页长度变化导致的误点击问题。
 ```html
-<n-pagination
-  v-model:page="page"
-  :page-count="100"
-/>
-<n-pagination
-  v-model:page="page"
-  :page-count="100"
-  :page-slot="8"
-/>
-<n-pagination
-  v-model:page="page"
-  :page-count="100"
-  :page-slot="7"
-/>
+<n-space vertical>
+  <n-pagination
+    v-model:page="page"
+    :page-count="100"
+  />
+  <n-pagination
+    v-model:page="page"
+    :page-count="100"
+    :page-slot="8"
+  />
+  <n-pagination
+    v-model:page="page"
+    :page-count="100"
+    :page-slot="7"
+  />
+</n-space>
 ```
 
 ```js
@@ -25,10 +27,4 @@ export default {
     }
   }
 }
-```
-
-```css
-.n-pagination {
-  margin-bottom: 12px;
-}
 ```

src/pagination/src/Pagination.vue

@@ -74,7 +74,7 @@
       class="n-pagination-quick-jumper"
     >
       {{ localeNs.goto }} <n-input
-        v-model="quickJumperValue"
+        v-model:value="quickJumperValue"
         size="small"
         :disabled="disabled"
         @keyup="handleQuickJumperKeyUp"
@@ -135,7 +135,7 @@ export default {
     },
     pageSize: {
       type: Number,
-      default: null
+      default: undefined
     },
     pageSizes: {
       type: Array,
@@ -156,21 +156,21 @@ export default {
     // eslint-disable-next-line vue/prop-name-casing
     'onUpdate:page': {
       type: Function,
-      default: null
+      default: undefined
     },
     // eslint-disable-next-line vue/prop-name-casing
     'onUpdate:pageSize': {
       type: Function,
-      default: null
+      default: undefined
     },
     // deprecated
     onPageSizeChange: {
       type: Function,
-      default: null
+      default: undefined
     },
     onChange: {
       type: Function,
-      default: null
+      default: undefined
     },
     total: {
       validator (value) {