Skip to content

Commit 659e848

Browse files
author
殷亮亮
committed
Merge branch 'sunshineLixun-dev' into next; pr #244 
2 parents 0da3721 + fab4166 commit 659e848

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

79 files changed

+8766
-998
lines changed

‎README.en-US.md

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22

33
# Pro Components
44

5+
[Documentation](https://sunshinelixun.github.io/pro-components/)
6+
57
The Pro Series components are placed here to support heavy-duty components.
68

79
[![Vue Support](https://img.shields.io/badge/support-Vue3-green?style=flat)](./package.json) [![Vue Grammar Level](https://img.shields.io/badge/full-Composition%20API-blue?style=flat)](https://v3.vuejs.org/guide/composition-api-introduction.html) [![NPM downloads](http://img.shields.io/npm/dm/@ant-design-vue/pro-layout.svg?style=flat)](https://npmjs.org/package/@ant-design-vue/pro-layout) [![License](https://img.shields.io/github/license/vueComponent/pro-layout)](./LICENSE)
@@ -12,9 +14,8 @@ The Pro Series components are placed here to support heavy-duty components.
1214
- [Electron](https://www.electronjs.org/)
1315

1416
| [![edge](https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png)](http://godban.github.io/browsers-support-badges/) | [![Edge](https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png)](http://godban.github.io/browsers-support-badges/) | [![chrome](https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png)](http://godban.github.io/browsers-support-badges/) | [![safari](https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png)](http://godban.github.io/browsers-support-badges/) | [![electron_48x48](https://raw.githubusercontent.com/alrra/browser-logos/master/src/electron/electron_48x48.png)](http://godban.github.io/browsers-support-badges/) |
15-
| --- | --- | --- | --- | --- |
16-
| Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
17-
17+
| ------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
18+
| Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
1819

1920
## Contributing
2021

@@ -26,8 +27,8 @@ Any type of contribution is welcome, here are some examples of how you may contr
2627

2728
## Component Kanban
2829

29-
| Components | Downloads | Downloads a version |
30-
| --- | --- | --- |
30+
| Components | Downloads | Downloads a version |
31+
| ---------- | ----------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
3132
| pro-layout | [![layout](https://img.shields.io/npm/dw/@ant-design-vue/pro-layout.svg)](https://www.npmjs.com/package/@ant-design-vue/pro-layout) | [![npm package](https://img.shields.io/npm/v/@ant-design-vue/pro-layout.svg?style=flat-square?style=flat-square)](https://www.npmjs.com/package/@ant-design-vue/pro-layout) |
3233

3334
## LICENSE

‎README.md

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22

33
# Pro Components
44

5+
[文档](https://sunshinelixun.github.io/pro-components/)
6+
57
这里放置了 pro 系列组件，用于支撑重型组件
68

79
[![Vue Support](https://img.shields.io/badge/support-Vue3-green?style=flat)](./package.json) [![Vue Grammar Level](https://img.shields.io/badge/full-Composition%20API-blue?style=flat)](https://v3.vuejs.org/guide/composition-api-introduction.html) [![NPM downloads](http://img.shields.io/npm/dm/@ant-design-vue/pro-layout.svg?style=flat)](https://npmjs.org/package/@ant-design-vue/pro-layout) [![License](https://img.shields.io/github/license/vueComponent/pro-layout)](./LICENSE)
@@ -12,8 +14,8 @@
1214
- [Electron](https://www.electronjs.org/)
1315

1416
| [![edge](https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png)](http://godban.github.io/browsers-support-badges/) | [![Edge](https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png)](http://godban.github.io/browsers-support-badges/) | [![chrome](https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png)](http://godban.github.io/browsers-support-badges/) | [![safari](https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png)](http://godban.github.io/browsers-support-badges/) | [![electron_48x48](https://raw.githubusercontent.com/alrra/browser-logos/master/src/electron/electron_48x48.png)](http://godban.github.io/browsers-support-badges/) |
15-
| --- | --- | --- | --- | --- |
16-
| Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
17+
| ------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
18+
| Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
1719

1820
## 参与贡献
1921

@@ -25,8 +27,8 @@
2527

2628
## 组件看板
2729

28-
| 组件 | 下载量 | 版本 |
29-
| --- | --- | --- |
30+
| 组件 | 下载量 | 版本 |
31+
| ---------- | ----------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
3032
| pro-layout | [![layout](https://img.shields.io/npm/dw/@ant-design-vue/pro-layout.svg)](https://www.npmjs.com/package/@ant-design-vue/pro-layout) | [![npm package](https://img.shields.io/npm/v/@ant-design-vue/pro-layout.svg?style=flat-square?style=flat-square)](https://www.npmjs.com/package/@ant-design-vue/pro-layout) |
3133

3234
## LICENSE

‎docs/.vitepress/config.js

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
export default {
2+
base: "/pro-components/",
3+
description: "中后台重型组件",
4+
themeConfig: {
5+
logo: "./favicon.svg",
6+
siteTitle: "ProComponents-Vue",
7+
nav: [
8+
{
9+
text: "文档",
10+
link: "/intro/",
11+
},
12+
{
13+
text: "组件",
14+
link: "/components/pro-layout",
15+
},
16+
],
17+
sidebar: {
18+
"/intro/": [
19+
{
20+
text: "简介",
21+
items: [
22+
{
23+
text: "简介",
24+
link: "/intro/",
25+
},
26+
],
27+
},
28+
],
29+
"/components/": [
30+
{
31+
text: "布局",
32+
items: [
33+
{
34+
text: "ProLayout",
35+
link: "/components/pro-layout",
36+
},
37+
],
38+
},
39+
{
40+
text: "表单",
41+
collapsible: true,
42+
items: [
43+
{
44+
text: "ProForm",
45+
link: "/components/pro-form",
46+
},
47+
{
48+
text: "ProFormFields 表单项",
49+
link: "/components/pro-form-fields",
50+
},
51+
],
52+
},
53+
{
54+
text: "通用",
55+
items: [
56+
{
57+
text: "ProField",
58+
link: "/components/pro-field",
59+
},
60+
],
61+
},
62+
],
63+
},
64+
socialLinks: [
65+
{
66+
icon: "github",
67+
link: "https://github.com/vueComponent/pro-components",
68+
},
69+
],
70+
},
71+
};

‎docs/.vitepress/public/favicon.svg

Lines changed: 35 additions & 0 deletions
Loading

‎docs/.vitepress/theme/index.ts

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import DefaultTheme from 'vitepress/theme'
2+
import ProLayout, { PageContainer } from "../../../packages/pro-layout/";
3+
import {QueryFilter} from "../../../packages/pro-form";
4+
5+
export default {
6+
...DefaultTheme,
7+
enhanceApp({ app }) {
8+
app.component('ProLayout', ProLayout)
9+
app.component('PageContainer', PageContainer)
10+
app.component('QueryFilter', QueryFilter)
11+
}
12+
}

‎docs/components/pro-field.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
# 开发中...
2+
3+
内部底层原子化表单组件，业务中请勿使用
4+
5+
- [x] ProField
6+
- [ ] 更多原子组件...

‎docs/components/pro-form-fields.md

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<h1 align="center">
2+
ProFormFields 表单项
3+
</h1>
4+
5+
### ProFormText
6+
7+
ProFormText 是 FormItem + Input 的产物
8+
9+
```vue
10+
<ProFormItem>
11+
<Input v-model:value="value" />
12+
</ProFormItem>
13+
```
14+
15+
::: warning
16+
ProFormText 设置的 props 其实是 Form.Item 的，fieldProps 才是包含的组件的
17+
:::
18+
19+
demo
20+
21+
```vue
22+
<ProFormText
23+
v-model:value="formModel.name"
24+
name="name"
25+
label="应用名称"
26+
:field-props="{
27+
allowClear: true,
28+
placeholder: '请输入',
29+
}"
30+
required
31+
/>
32+
```
33+
34+
## 更多原子化组件开发中...

‎docs/components/pro-form.md

Lines changed: 143 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,143 @@
1+
<h1 align="center">
2+
Ant Design Pro Form
3+
</h1>
4+
5+
## Basic Usage
6+
7+
Demo [Examples](https://github.com/vueComponent/pro-components/tree/next/packages/pro-form/examples)
8+
9+
## Install
10+
11+
```bash
12+
# yarn
13+
yarn add @ant-design-vue/pro-form
14+
# npm
15+
npm i @ant-design-vue/pro-form -S
16+
```
17+
18+
### Simple Usage
19+
20+
::: details 显示代码
21+
22+
```html
23+
<template>
24+
<QueryFilter
25+
:model="formModel"
26+
@finish="handleSubmit"
27+
@collapsed="onCollapsed"
28+
>
29+
<FormItem name="name" label="应用名称" required>
30+
<input v-model:value="formModel.name" placeholder="请输入" allow-clear />
31+
</FormItem>
32+
<FormItem name="creater" label="创建人" required>
33+
<input v-model:value="formModel.creater" placeholder="请输入" />
34+
</FormItem>
35+
<FormItem name="sex" label="性别" required>
36+
<select v-model:value="formModel.sex">
37+
<SelectOption v-for="item in sex" :key="item.value" :value="item.value"
38+
>{{ item.label }}</SelectOption
39+
>
40+
</select>
41+
</FormItem>
42+
<FormItem name="status" label="应用状态">
43+
<input v-model:value="formModel.status" placeholder="请输入" />
44+
</FormItem>
45+
<FormItem name="startDate" label="响应日期">
46+
<DatePicker v-model:value="formModel.startDate" placeholder="请输入" />
47+
</FormItem>
48+
<FormItem name="create" label="创建时间">
49+
<RangePicker
50+
v-model:value="formModel.create"
51+
:placeholder="['开始时间', '结束时间']"
52+
/>
53+
</FormItem>
54+
</QueryFilter>
55+
</template>
56+
57+
<script lang="ts" setup>
58+
import { ref, reactive } from "vue";
59+
import { QueryFilter } from "@ant-design-vue/pro-form";
60+
import dayjs, { type Dayjs } from "dayjs";
61+
import {
62+
FormItem,
63+
Input,
64+
Select,
65+
SelectOption,
66+
RangePicker,
67+
DatePicker,
68+
} from "ant-design-vue";
69+
70+
// main.[js|ts]
71+
import "@ant-design-vue/pro-form/dist/style.css"; // pro-form css or style.less
72+
73+
const formModel = reactive({
74+
name: "123",
75+
creater: "11",
76+
sex: "男",
77+
status: "",
78+
startDate: "",
79+
create: [
80+
dayjs("2015/01/01", "YYYY/MM/DD"),
81+
dayjs("2016/01/01", "YYYY/MM/DD"),
82+
] as [Dayjs, Dayjs],
83+
});
84+
const sex = ref([
85+
{
86+
value: "男",
87+
label: "男",
88+
},
89+
{
90+
value: "女",
91+
label: "女",
92+
},
93+
]);
94+
95+
function handleSubmit(params: any) {
96+
console.log(params);
97+
}
98+
function onCollapsed(collapsed: boolean) {
99+
console.log(collapsed);
100+
}
101+
</script>
102+
```
103+
104+
:::
105+
106+
## API
107+
108+
### ProLayout
109+
110+
| Property | Description | Type | Default Value |
111+
| ----------------- | ------------------------------------------------------------------------------------------------------------ | ---------------------------- | ------------- |
112+
| formProps | antd 基础表单 props | object | |
113+
| searchGutter | 表单 gutter | number | 24 |
114+
| style | 自定义样式 | object | undefined |
115+
| defaultColsNumber | 自定义折叠状态下默认显示的表单控件数量，没有设置或小于 0，则显示一行控件; 数量大于等于控件数量则隐藏展开按钮 | Number | undefined |
116+
| collapsed | 是否折叠超出的表单项，用于受控模式 | Boolean | undefined |
117+
| defaultCollapsed | 默认状态下是否折叠超出的表单项 | Boolean | true |
118+
| preserve | 是否能够查询收起的数据，如果设置为 false，收起后的表单数据将会丢失 | Boolean | true |
119+
| split | 每一行是否有分割线 | Boolean | undefined |
120+
| submitButtonProps | 提交按钮的 props | Object | undefined |
121+
| submitter | 重置、查询、展开收起按钮 props | SubmitterProps | undefined |
122+
| onCollapsed | 切换表单折叠状态时的回调 | (collapsed: boolean) => void | undefined |
123+
| onFinish | 表单提交 | (fromModel: any) => void | undefined |
124+
| onSubmit | 表单提交 | (fromModel: any) => void | undefined |
125+
| onReset | 重置表单 | (fromModel: any) => void | undefined |
126+
127+
## Build project
128+
129+
```bash
130+
pnpm build # Build library and .d.ts
131+
```
132+
133+
## TODO:
134+
135+
- [x] BaseFrom
136+
- [x] QueryFilter
137+
- [x] ProForm
138+
- [x] ProField
139+
- [ ] 更多原子组件...
140+
- [ ] LoginFrom
141+
- [ ] ModalFrom
142+
- [ ] DrawerFrom
143+
- [ ] ProTable

0 commit comments

Comments
 (0)