Skip to content

Commit ce8051b

Browse files
author
Tenny
committed
Squashed commit of the following:
commit 6f14af4 Author: Tenny <tenny.shu@foxmail.com> Date: Wed Jul 31 11:46:46 2024 +0800 feat(Pagination): 分页 commit 12dd6c1 Author: Tenny <joel.shu@qq.com> Date: Tue Jul 30 22:54:44 2024 +0800 Pagination: 简单分页完成 Signed-off-by: Tenny <joel.shu@qq.com> commit 7705e18 Author: Tenny <tenny.shu@foxmail.com> Date: Tue Jul 30 17:57:41 2024 +0800 Pagination Signed-off-by: Tenny <tenny.shu@foxmail.com> commit 1be8bcb Author: Tenny <joel.shu@qq.com> Date: Mon Jul 29 23:05:23 2024 +0800 Pagination: 基本功能、对齐方式功能完成 Signed-off-by: Tenny <joel.shu@qq.com> commit 4f3f351 Author: Tenny <tenny.shu@foxmail.com> Date: Mon Jul 29 18:01:58 2024 +0800 Pagination Signed-off-by: Tenny <tenny.shu@foxmail.com> commit 4d50cc6 Author: Tenny <tenny.shu@foxmail.com> Date: Mon Jul 29 15:52:12 2024 +0800 uv: 构建工具
1 parent f9644ae commit ce8051b

File tree

21 files changed

+722
-313
lines changed

21 files changed

+722
-313
lines changed

‎.github/workflows/release-please.yml‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,9 @@ jobs:
2323
release:
2424
runs-on: ubuntu-latest
2525
outputs:
26-
release_created: ${{ steps.output-release-created.outputs.release_created }}
26+
release_created: ${{ steps.release-output.outputs.release_created }}
27+
prs_created: ${{ steps.release-output.outputs.prs_created }}
28+
is_published: ${{ steps.release-output.outputs.is_published }}
2729
steps:
2830
- name: Check event type
2931
id: check_event
@@ -43,8 +45,8 @@ jobs:
4345
# for more options
4446
release-type: node
4547

46-
- name: Output Release Created
47-
id: output-release-created
48+
- name: Release Output
49+
id: release-output
4850
# prs_created 是否拉取, pull-request 没有拉取
4951
run: |
5052
echo "release_created=${{ steps.release.outputs.release_created }}" >> "$GITHUB_OUTPUT"

‎docs/.vitepress/config.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -168,6 +168,10 @@ export default defineConfig({
168168
text: 'Tag 标签',
169169
link: '/components/tag',
170170
},
171+
{
172+
text: 'Pagination 分页',
173+
link: '/components/pagination',
174+
},
171175
],
172176
},
173177
{

‎docs/.vitepress/theme/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ import '../../../style/select-ori';
3737
import '../../../style/date-picker-ori';
3838
import '../../../style/page-header';
3939
import '../../../style/tag';
40+
import '../../../style/pagination';
4041

4142
export default {
4243
extends: DefaultTheme,

‎docs/components/form.md‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -136,6 +136,20 @@
136136
</CodePreview>
137137
</ClientOnly>
138138

139+
### 只使用 FormItem
140+
141+
`FormItem` 可以不放在 `Form` 里面，从而进行单独使用。
142+
143+
<ClientOnly>
144+
<CodePreview>
145+
<textarea lang="vue-html">
146+
<nt-form-item label="开关">
147+
<nt-switch />
148+
</nt-form-item>
149+
</textarea>
150+
</CodePreview>
151+
</ClientOnly>`
152+
139153
## API
140154

141155
### Form Props

‎docs/components/input.md‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,25 @@
44

55
## 基础用法
66

7+
<script setup lang="ts">
8+
import { Input } from '../../src'
9+
import { ref } from 'vue'
10+
11+
const inputInt = ref('')
12+
13+
function numericParse(value: string) {
14+
let val = parseInt(value, 10)
15+
if (Number.isNaN(val)) {
16+
val = ''
17+
} else {
18+
val = Math.abs(val)
19+
}
20+
return String(val);
21+
}
22+
</script>
23+
24+
### 基本使用
25+
726
文本输入的基础用法。
827

928
<ClientOnly><CodePreview>
@@ -12,6 +31,39 @@
1231
</textarea>
1332
</CodePreview></ClientOnly>
1433

34+
### 输入解析
35+
36+
通过传递 `parser` 在接受到输入值的时候进行解析，例如：只允许输入正整数
37+
38+
<ClientOnly>
39+
<CodePreview>
40+
<textarea lang="vue">
41+
<script setup lang="ts">
42+
import { Input } from '../../src';
43+
import { ref } from 'vue';
44+
//-
45+
const inputInt = ref('')
46+
//-
47+
function numericParse(value: string) {
48+
let val = parseInt(value, 10)
49+
if (Number.isNaN(val)) {
50+
val = ''
51+
} else {
52+
val = Math.abs(val)
53+
}
54+
return String(val);
55+
}
56+
</script>
57+
<template>
58+
<nt-input v-model="inputInt" placeholder="请输入正整数" :parser="numericParse"></nt-input>
59+
</template>
60+
</textarea>
61+
<template #preview>
62+
<Input v-model="inputInt" placeholder="请输入正整数" :parser="numericParse" />
63+
</template>
64+
</CodePreview>
65+
</ClientOnly>
66+
1567
## API
1668

1769
### Input Props
@@ -22,6 +74,7 @@
2274
| `html-type` | 原始的 [type](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input#input_%E7%B1%BB%E5%9E%8B) | `string` | `text` |
2375
| `model-value` / `v-model` | 绑定值 | `string` | — |
2476
| `placeholder` | 占位文本 | `string` | — |
77+
| `parser` | 输入时解析值 | `(value: string) => string` | — |
2578

2679
### Input Exposes
2780

‎docs/components/pagination.md‎

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
# Pagination 分页
2+
3+
当数据量过多时，使用分页分批次加载数据。
4+
5+
## 演示
6+
7+
<script setup>
8+
import { Pagination, Switch, FormItem } from "../../src"
9+
import { ref, watch } from 'vue'
10+
11+
const singleHide = ref(false)
12+
</script>
13+
14+
### 基础用法
15+
16+
只需要传递 `total` 或者 `page-count` 就能显示一个分页组件. 在 `change` 事件中进行分页处理.
17+
18+
<ClientOnly>
19+
<CodePreview>
20+
<textarea lang="vue">
21+
<script setup lang="ts">
22+
function handlePageChange(currentPage: number) {
23+
console.log(currentPage)
24+
}
25+
</script>
26+
<template>
27+
<nt-pagination :total="100" @change="handlePageChange"></nt-pagination>
28+
</template>
29+
</textarea>
30+
<template #preview>
31+
<Pagination :total="100"></Pagination>
32+
</template>
33+
</CodePreview>
34+
</ClientOnly>
35+
36+
### 对齐方式
37+
38+
通过 `align` 可以设置对齐方式，取值有: `start`**默认**、`center`、`end`
39+
40+
<ClientOnly>
41+
<CodePreview>
42+
<textarea lang="vue-html">
43+
<nt-pagination :total="100" align="start"></nt-pagination>
44+
<hr />
45+
<nt-pagination :total="100" align="center"></nt-pagination>
46+
<hr />
47+
<nt-pagination :total="100" align="end"></nt-pagination>
48+
</textarea>
49+
<template #preview>
50+
<Pagination :total="100" align="start"></Pagination>
51+
<hr />
52+
<Pagination :total="100" align="center"></Pagination>
53+
<hr />
54+
<Pagination :total="100" align="end"></Pagination>
55+
</template>
56+
</CodePreview>
57+
</ClientOnly>
58+
59+
### 单页隐藏
60+
61+
当只有一页时，通过 `single-hide` 配置隐藏分页
62+
63+
<ClientOnly>
64+
<CodePreview>
65+
<textarea lang="vue">
66+
<script setup lang="ts">
67+
const singleHide = ref(false)
68+
</script>
69+
<template>
70+
<nt-form-item label="单页隐藏">
71+
<nt-switch v-model="singleHide" />
72+
</nt-form-item>
73+
<hr />
74+
<nt-pagination :page-count="1" :hide-on-single-page="singleHide"></nt-pagination>
75+
</template>
76+
</textarea>
77+
<template #preview>
78+
<FormItem label="单页隐藏">
79+
<Switch v-model="singleHide" />
80+
</FormItem>
81+
<hr />
82+
<Pagination :page-count="1" :hide-on-single-page="singleHide"></Pagination>
83+
</template>
84+
</CodePreview>
85+
</ClientOnly>
86+
87+
### 简单分页
88+
89+
简单的分页，在空间有限的情况下，可以使用简单分页。
90+
91+
<ClientOnly>
92+
<CodePreview>
93+
<textarea lang="vue-html">
94+
<nt-pagination :page-count="100" simple></nt-pagination>
95+
</textarea>
96+
<template #preview>
97+
<Pagination :page-count="100" simple></Pagination>
98+
</template>
99+
</CodePreview>
100+
</ClientOnly>
101+
102+
## API
103+
104+
### Pagination Props
105+
106+
<!-- prettier-ignore -->
107+
| 参数 | 说明 | 类型 | 默认值 |
108+
| --- | --- | --- | --- |
109+
| `total` | 数据总数 | `number` | - |
110+
| `page-count` | 页码总数, `total` 和 `page-count` 设置任意一个就可以达到显示页码的功能 | `number` | - |
111+
| `page-size` | 每页的数据条数 | `number` | `10` |
112+
| `default-current-page` | 当前页数的默认初始值，不设置时默认为 1 | `number` | `1` |
113+
| `align` | 对齐方式 | `start \| center \| end` | `start` |
114+
| `hide-on-single-page` | 只有一页时是否隐藏分页器 | `boolean` | `false` |
115+
| `simple` | 简单分页 | `boolean` | `false` |
116+
| `page \| v-model:page` | 当前页数[受控模式] | `number` | - |
117+
118+
### Pagination Emits
119+
120+
<!-- prettier-ignore -->
121+
| 事件名 | 说明 | 回调参数 |
122+
| --- | --- | --- |
123+
| `change` | 当前页改变时触发 | `currentPage: number` |

‎docs/components/tag.md‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,4 +28,14 @@
2828
<!-- prettier-ignore -->
2929
| 参数 | 说明 | 类型 | 默认值 |
3030
| --- | --- | --- | --- |
31-
| x | x | x | x |
31+
| `type` | 类型 | `primary` | `primary` |
32+
| `color` | 颜色, 自定义颜色 | `string` | - |
33+
34+
### Css Variables
35+
36+
<!-- prettier-ignore -->
37+
| 变量 | 默认值 | 说明 |
38+
| --- | --- | --- |
39+
| `--nt-tag-bg` | `var(--nt-primary-color-light5, #f6ffed)` | 标签背景色 |
40+
| `--nt-tag-color` | `var(--nt-primary-color, #52c41a)` | 标签文本颜色 |
41+
| `--nt-tag-border-color` | `var(--nt-primary-color-light3, #b7eb8f)` | 标签边框颜色 |

‎package.json‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,15 +12,15 @@
1212
"inspect:eslint": "eslint --inspect-config"
1313
},
1414
"devDependencies": {
15-
"@types/node": "^20.14.12",
15+
"@types/node": "^22.0.0",
1616
"@typescript-eslint/eslint-plugin": "^7.17.0",
1717
"@typescript-eslint/parser": "^7.17.0",
18-
"@vitejs/plugin-vue": "^5.1.0",
19-
"eslint": "^9.7.0",
18+
"@vitejs/plugin-vue": "^5.1.1",
19+
"eslint": "^9.8.0",
2020
"eslint-plugin-vue": "^9.27.0",
2121
"globals": "^15.8.0",
2222
"prettier": "^3.3.3",
23-
"shiki": "^1.11.1",
23+
"shiki": "^1.12.0",
2424
"typescript": "^5.5.4",
2525
"vite": "^5.3.5",
2626
"vite-plugin-dts": "4.0.0-beta.1",

0 commit comments

Comments
 (0)