@aoao-y33/ui 0.0.3 → 0.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +0 -11
- package/dist/index.d.ts +0 -5
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +2 -5
- package/package.json +9 -3
- package/dist/global.d.ts +0 -33
- package/dist/global.d.ts.map +0 -1
- package/src/button/components/button/button.vue +0 -64
- package/src/button/components/button/index.ts +0 -2
- package/src/button/components/button/props.ts +0 -75
- package/src/button/components/fields/index.ts +0 -6
- package/src/button/hoc/index.ts +0 -1
- package/src/button/hoc/useButton.ts +0 -27
- package/src/button/index.ts +0 -4
- package/src/button/utils/index.ts +0 -32
- package/src/common/index.ts +0 -1
- package/src/common/utils/iconUtils.ts +0 -21
- package/src/common/utils/index.ts +0 -1
- package/src/form/components/fields/index.ts +0 -35
- package/src/form/components/form/form.vue +0 -130
- package/src/form/components/form/index.ts +0 -6
- package/src/form/components/form/props.ts +0 -73
- package/src/form/components/form-item/form-item.vue +0 -90
- package/src/form/components/form-item/index.ts +0 -6
- package/src/form/components/form-item/props.ts +0 -50
- package/src/form/hoc/index.ts +0 -3
- package/src/form/hoc/useForm.ts +0 -106
- package/src/form/hoc/useFormExpose.ts +0 -97
- package/src/form/hoc/useFormFetch.ts +0 -103
- package/src/form/index.ts +0 -5
- package/src/form/utils/index.ts +0 -149
- package/src/global.ts +0 -40
- package/src/index.ts +0 -37
- package/src/layout/components/fields/basic/basic.vue +0 -18
- package/src/layout/components/fields/index.ts +0 -10
- package/src/layout/components/fields/side/side.vue +0 -26
- package/src/layout/components/fields/top/top.vue +0 -13
- package/src/layout/components/layout/index.ts +0 -6
- package/src/layout/components/layout/layout.vue +0 -19
- package/src/layout/components/layout/props.ts +0 -3
- package/src/layout/hoc/index.ts +0 -1
- package/src/layout/hoc/useLayout.ts +0 -32
- package/src/layout/index.ts +0 -4
- package/src/layout/utils/index.ts +0 -31
- package/src/modal/components/form-modal/form-modal.vue +0 -158
- package/src/modal/components/form-modal/index.ts +0 -5
- package/src/modal/components/form-modal/props.ts +0 -61
- package/src/modal/components/modal/index.ts +0 -6
- package/src/modal/components/modal/modal.vue +0 -127
- package/src/modal/components/modal/props.ts +0 -78
- package/src/modal/hoc/index.ts +0 -3
- package/src/modal/hoc/useFormModal.ts +0 -140
- package/src/modal/hoc/useModal.ts +0 -151
- package/src/modal/hoc/useModalExpose.ts +0 -52
- package/src/modal/index.ts +0 -3
- package/src/style/index.css +0 -21
- package/src/table/components/fields/action-column/action-column.vue +0 -34
- package/src/table/components/fields/action-column/props.ts +0 -8
- package/src/table/components/fields/index.ts +0 -6
- package/src/table/components/table/index.ts +0 -6
- package/src/table/components/table/props.ts +0 -148
- package/src/table/components/table/table.vue +0 -77
- package/src/table/components/table-column/index.ts +0 -6
- package/src/table/components/table-column/props.ts +0 -26
- package/src/table/components/table-column/table-column.vue +0 -31
- package/src/table/components/table-page/index.ts +0 -6
- package/src/table/components/table-page/props.ts +0 -48
- package/src/table/components/table-page/table-page.vue +0 -51
- package/src/table/components/table-select/index.ts +0 -6
- package/src/table/components/table-select/props.ts +0 -79
- package/src/table/components/table-select/table-select.vue +0 -70
- package/src/table/hoc/index.ts +0 -2
- package/src/table/hoc/useTable.ts +0 -206
- package/src/table/hoc/useTableExpose.ts +0 -46
- package/src/table/index.ts +0 -7
- package/src/table/utils/index.ts +0 -37
- package/tsconfig.json +0 -30
- package/vite.config.ts +0 -49
package/README.md
CHANGED
|
@@ -27,17 +27,6 @@ yarn add @aoao-y33/ui
|
|
|
27
27
|
|
|
28
28
|
## 🚀 快速开始
|
|
29
29
|
|
|
30
|
-
### 全局引入
|
|
31
|
-
|
|
32
|
-
````typescript
|
|
33
|
-
import { createApp } from 'vue'
|
|
34
|
-
import AoaoUI from '@aoao-y33/ui'
|
|
35
|
-
import App from './App.vue'
|
|
36
|
-
const app = createApp(App)
|
|
37
|
-
app.use(AoaoUI)
|
|
38
|
-
app.mount('#app')
|
|
39
|
-
````
|
|
40
|
-
|
|
41
30
|
### 按需引入
|
|
42
31
|
|
|
43
32
|
```typescript
|
package/dist/index.d.ts
CHANGED
|
@@ -1,12 +1,7 @@
|
|
|
1
|
-
import { App } from 'vue';
|
|
2
1
|
export * from './modal';
|
|
3
2
|
export * from './button';
|
|
4
3
|
export * from './form';
|
|
5
4
|
export * from './layout';
|
|
6
5
|
export * from './table';
|
|
7
6
|
export * from './common';
|
|
8
|
-
declare const _default: {
|
|
9
|
-
install(app: App): void;
|
|
10
|
-
};
|
|
11
|
-
export default _default;
|
|
12
7
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,mBAAmB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,mBAAmB,CAAC;AAM3B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC"}
|
package/dist/index.js
CHANGED
|
@@ -49375,9 +49375,6 @@ function JG(e) {
|
|
|
49375
49375
|
getModal: () => e.value.getModal()
|
|
49376
49376
|
};
|
|
49377
49377
|
}
|
|
49378
|
-
|
|
49379
|
-
var YG = { install(e) {
|
|
49380
|
-
NB(), gV(), TG(), AB(), e.component("ax-button", Tu), e.component("ax-form", jB), e.component("ax-form-item", MB), e.component("ax-layout", UB), e.component("ax-modal", HG), e.component("ax-table", MG), e.component("ax-table-page", PG), e.component("ax-table-select", FG), e.component("ax-table-column", NG);
|
|
49381
|
-
} };
|
|
49378
|
+
NB(), gV(), TG(), AB();
|
|
49382
49379
|
//#endregion
|
|
49383
|
-
export { Tu as AxButton, jB as AxForm, MB as AxFormItem, GG as AxFormModal, UB as AxLayout, HG as AxModal, MG as AxTable, NG as AxTableColumn, PG as AxTablePage, FG as AxTableSelect, ea as addButtonField, IB as addFormField, LB as addFormRules, xG as addLayoutField, zG as addTableColumnField, $i as buttonFields,
|
|
49380
|
+
export { Tu as AxButton, jB as AxForm, MB as AxFormItem, GG as AxFormModal, UB as AxLayout, HG as AxModal, MG as AxTable, NG as AxTableColumn, PG as AxTablePage, FG as AxTableSelect, ea as addButtonField, IB as addFormField, LB as addFormRules, xG as addLayoutField, zG as addTableColumnField, $i as buttonFields, PB as formFields, FB as formRules, Cu as getIcons, AB as initButtonFields, NB as initFormFields, gV as initLayoutFields, TG as initTableColumns, RB as isTip, bG as layoutFields, RG as tableColumnFields, Qi as useButton, BB as useForm, VB as useFormExpose, HB as useFormFetch, qG as useFormModal, yG as useLayout, KG as useModal, JG as useModalExpose, IG as useTable, LG as useTableExpose };
|
package/package.json
CHANGED
|
@@ -1,31 +1,37 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@aoao-y33/ui",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.5",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "elementPlus二次封装组件",
|
|
6
6
|
|
|
7
7
|
"main": "./dist/index.js",
|
|
8
8
|
"module": "./dist/index.js",
|
|
9
|
-
"types": "./dist/index.d.ts",
|
|
10
9
|
"exports": {
|
|
11
10
|
".": {
|
|
12
11
|
"types": "./dist/index.d.ts",
|
|
13
12
|
"import": "./dist/index.js"
|
|
14
13
|
},
|
|
14
|
+
"./global": {
|
|
15
|
+
"types": "./global.d.ts"
|
|
16
|
+
},
|
|
15
17
|
"./dist/index.css": {
|
|
16
18
|
"import": "./dist/index.css"
|
|
17
19
|
}
|
|
18
20
|
},
|
|
21
|
+
"types": "./dist/index.d.ts",
|
|
19
22
|
"sideEffects": [
|
|
20
23
|
"*.css",
|
|
21
24
|
"*.less",
|
|
22
25
|
"*.scss"
|
|
23
26
|
],
|
|
24
27
|
"scripts": {
|
|
25
|
-
"build":
|
|
28
|
+
"build":"vue-tsc && vite build",
|
|
26
29
|
"ins": "pnpm install",
|
|
27
30
|
"pub": "npm publish --access public"
|
|
28
31
|
},
|
|
32
|
+
"files": [
|
|
33
|
+
"dist"
|
|
34
|
+
],
|
|
29
35
|
"keywords": [],
|
|
30
36
|
"author": "",
|
|
31
37
|
"license": "ISC",
|
package/dist/global.d.ts
DELETED
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
import { AxButton } from './button';
|
|
2
|
-
import { AxForm, AxFormItem } from './form';
|
|
3
|
-
import { AxLayout } from './layout';
|
|
4
|
-
import { AxModal } from './modal';
|
|
5
|
-
import { AxTable, AxTablePage, AxTableSelect, AxTableColumn } from './table';
|
|
6
|
-
declare module 'vue' {
|
|
7
|
-
interface GlobalComponents {
|
|
8
|
-
AxButton: typeof AxButton;
|
|
9
|
-
AxForm: typeof AxForm;
|
|
10
|
-
AxFormItem: typeof AxFormItem;
|
|
11
|
-
AxLayout: typeof AxLayout;
|
|
12
|
-
AxModal: typeof AxModal;
|
|
13
|
-
AxTable: typeof AxTable;
|
|
14
|
-
AxTablePage: typeof AxTablePage;
|
|
15
|
-
AxTableSelect: typeof AxTableSelect;
|
|
16
|
-
AxTableColumn: typeof AxTableColumn;
|
|
17
|
-
}
|
|
18
|
-
}
|
|
19
|
-
declare module 'vue' {
|
|
20
|
-
interface GlobalComponents {
|
|
21
|
-
'ax-button': typeof AxButton;
|
|
22
|
-
'ax-form': typeof AxForm;
|
|
23
|
-
'ax-form-item': typeof AxFormItem;
|
|
24
|
-
'ax-layout': typeof AxLayout;
|
|
25
|
-
'ax-modal': typeof AxModal;
|
|
26
|
-
'ax-table': typeof AxTable;
|
|
27
|
-
'ax-table-page': typeof AxTablePage;
|
|
28
|
-
'ax-table-select': typeof AxTableSelect;
|
|
29
|
-
'ax-table-column': typeof AxTableColumn;
|
|
30
|
-
}
|
|
31
|
-
}
|
|
32
|
-
export {};
|
|
33
|
-
//# sourceMappingURL=global.d.ts.map
|
package/dist/global.d.ts.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"global.d.ts","sourceRoot":"","sources":["../src/global.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAA;AACxC,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAA;AACpC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAA;AACxC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAA;AACxC,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,SAAS,CAAA;AACtC,OAAO,KAAK,EAAE,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAEjF,OAAO,QAAQ,KAAK,CAAC;IACjB,UAAiB,gBAAgB;QAC7B,QAAQ,EAAE,OAAO,QAAQ,CAAA;QACzB,MAAM,EAAE,OAAO,MAAM,CAAA;QACrB,UAAU,EAAE,OAAO,UAAU,CAAA;QAC7B,QAAQ,EAAE,OAAO,QAAQ,CAAA;QACzB,OAAO,EAAE,OAAO,OAAO,CAAA;QACvB,OAAO,EAAE,OAAO,OAAO,CAAA;QACvB,WAAW,EAAE,OAAO,WAAW,CAAA;QAC/B,aAAa,EAAE,OAAO,aAAa,CAAA;QACnC,aAAa,EAAE,OAAO,aAAa,CAAA;KACtC;CACJ;AAGD,OAAO,QAAQ,KAAK,CAAC;IACjB,UAAiB,gBAAgB;QAC7B,WAAW,EAAE,OAAO,QAAQ,CAAA;QAC5B,SAAS,EAAE,OAAO,MAAM,CAAA;QACxB,cAAc,EAAE,OAAO,UAAU,CAAA;QACjC,WAAW,EAAE,OAAO,QAAQ,CAAA;QAC5B,UAAU,EAAE,OAAO,OAAO,CAAA;QAC1B,UAAU,EAAE,OAAO,OAAO,CAAA;QAC1B,eAAe,EAAE,OAAO,WAAW,CAAA;QACnC,iBAAiB,EAAE,OAAO,aAAa,CAAA;QACvC,iBAAiB,EAAE,OAAO,aAAa,CAAA;KAC1C;CACJ;AAED,OAAO,EAAE,CAAA"}
|
|
@@ -1,64 +0,0 @@
|
|
|
1
|
-
<script setup lang="ts">
|
|
2
|
-
import {buttonFields} from "@/button/utils";
|
|
3
|
-
import type {AxButtonProps, AxButtonEmits} from "./props";
|
|
4
|
-
import {computed, inject, useSlots} from "vue";
|
|
5
|
-
import {getIcons} from "@/common";
|
|
6
|
-
defineOptions({name: 'AxButton'})
|
|
7
|
-
const {
|
|
8
|
-
type = 'default',
|
|
9
|
-
text = '',
|
|
10
|
-
className = '',
|
|
11
|
-
disabled = false,
|
|
12
|
-
hidden = false,
|
|
13
|
-
icon='',
|
|
14
|
-
isMl=true,
|
|
15
|
-
componentProps = {}
|
|
16
|
-
} = defineProps<AxButtonProps>()
|
|
17
|
-
const emits = defineEmits<AxButtonEmits>()
|
|
18
|
-
const slots = useSlots();
|
|
19
|
-
const clickData = inject('clickData', null);
|
|
20
|
-
const ButtonField = computed(() => {
|
|
21
|
-
return buttonFields[type]
|
|
22
|
-
})
|
|
23
|
-
const onClick = (e: Event) => {
|
|
24
|
-
emits('click', clickData ? clickData : e)
|
|
25
|
-
}
|
|
26
|
-
const onDblClick = (e: Event) => {
|
|
27
|
-
emits('dblClick', clickData ? clickData : e)
|
|
28
|
-
}
|
|
29
|
-
const getDisabled = () => {
|
|
30
|
-
if (typeof disabled === "function") {
|
|
31
|
-
return disabled(clickData)
|
|
32
|
-
}
|
|
33
|
-
return disabled
|
|
34
|
-
}
|
|
35
|
-
const getHidden = () => {
|
|
36
|
-
if (typeof hidden === "function") {
|
|
37
|
-
return hidden(clickData)
|
|
38
|
-
}
|
|
39
|
-
return hidden
|
|
40
|
-
}
|
|
41
|
-
const Icon = computed(()=>{
|
|
42
|
-
if(typeof icon === 'string'){
|
|
43
|
-
return getIcons(icon)
|
|
44
|
-
}
|
|
45
|
-
return icon||null;
|
|
46
|
-
})
|
|
47
|
-
</script>
|
|
48
|
-
<template>
|
|
49
|
-
<ButtonField v-bind="componentProps"
|
|
50
|
-
@click="onClick"
|
|
51
|
-
@dblclick="onDblClick"
|
|
52
|
-
:class="[className,{'ml-0!':!isMl}]"
|
|
53
|
-
:disabled="getDisabled()"
|
|
54
|
-
v-if="!getHidden()"
|
|
55
|
-
:icon="Icon"
|
|
56
|
-
>
|
|
57
|
-
<template v-if="!slots.default">
|
|
58
|
-
<span>{{ text }}</span>
|
|
59
|
-
</template>
|
|
60
|
-
<template v-else>
|
|
61
|
-
<slot></slot>
|
|
62
|
-
</template>
|
|
63
|
-
</ButtonField>
|
|
64
|
-
</template>
|
|
@@ -1,75 +0,0 @@
|
|
|
1
|
-
import {buttonFields} from "@/button";
|
|
2
|
-
import type {ButtonProps} from "element-plus";
|
|
3
|
-
import type {EmitsToEventProps} from '@aoao-y33/utils';
|
|
4
|
-
import type {Component} from "vue";
|
|
5
|
-
|
|
6
|
-
/**
|
|
7
|
-
* AxButton 按钮组件属性接口
|
|
8
|
-
* @template E - 事件数据类型,用于控制按钮显示/隐藏的上下文数据
|
|
9
|
-
* @template T - Element Plus ButtonProps 类型扩展
|
|
10
|
-
*/
|
|
11
|
-
export interface AxButtonProps<E = any, T = ButtonProps> {
|
|
12
|
-
/** 按钮显示的文本内容 */
|
|
13
|
-
text?: string
|
|
14
|
-
|
|
15
|
-
/**
|
|
16
|
-
* 按钮类型,对应预定义的按钮样式配置
|
|
17
|
-
* @see buttonFields - 预定义的按钮类型映射表
|
|
18
|
-
*/
|
|
19
|
-
type?: keyof typeof buttonFields
|
|
20
|
-
|
|
21
|
-
/** Element Plus 按钮的额外属性配置 */
|
|
22
|
-
componentProps?: T
|
|
23
|
-
|
|
24
|
-
/** 自定义 CSS 类名 */
|
|
25
|
-
className?: string,
|
|
26
|
-
|
|
27
|
-
/**
|
|
28
|
-
* 按钮图标,支持字符串(图标类名)或 Vue 组件形式
|
|
29
|
-
* @example "el-icon-search" | IconComponent
|
|
30
|
-
*/
|
|
31
|
-
icon?:string|Component,
|
|
32
|
-
|
|
33
|
-
/**
|
|
34
|
-
* 按钮禁用状态控制
|
|
35
|
-
* - 布尔值:直接设置禁用状态
|
|
36
|
-
* - 函数:根据上下文数据动态计算禁用状态
|
|
37
|
-
* @param data - 传入的上下文数据
|
|
38
|
-
* @returns 是否禁用
|
|
39
|
-
*/
|
|
40
|
-
disabled?: ((data: E) => boolean) | (boolean)
|
|
41
|
-
|
|
42
|
-
/**
|
|
43
|
-
* 按钮隐藏状态控制
|
|
44
|
-
* - 布尔值:直接设置隐藏状态
|
|
45
|
-
* - 函数:根据上下文数据动态计算隐藏状态
|
|
46
|
-
* @param data - 传入的上下文数据
|
|
47
|
-
* @returns 是否隐藏
|
|
48
|
-
*/
|
|
49
|
-
hidden?: ((data: E) => boolean) | (boolean)
|
|
50
|
-
|
|
51
|
-
/** 是否添加左边距,用于按钮间距控制 */
|
|
52
|
-
isMl?:boolean
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
/**
|
|
56
|
-
* AxButton 按钮组件事件发射接口
|
|
57
|
-
* @template T - 事件携带的数据类型
|
|
58
|
-
*/
|
|
59
|
-
export interface AxButtonEmits<T = any> {
|
|
60
|
-
/** 单击事件 */
|
|
61
|
-
"click": [data: T]
|
|
62
|
-
/** 双击事件 */
|
|
63
|
-
"dblClick": [data: T]
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
/**
|
|
67
|
-
* AxButton 按钮配置选项接口
|
|
68
|
-
* 继承自 AxButtonProps 并合并事件处理属性
|
|
69
|
-
* @template E - 事件数据类型
|
|
70
|
-
* @template T - Element Plus ButtonProps 类型扩展
|
|
71
|
-
*/
|
|
72
|
-
export interface AxButtonOptions<E = any, T = ButtonProps>
|
|
73
|
-
extends AxButtonProps<E, T>,
|
|
74
|
-
Partial<EmitsToEventProps<AxButtonEmits<E>>> {
|
|
75
|
-
}
|
package/src/button/hoc/index.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './useButton';
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
import {AxButton, type AxButtonOptions} from "@/button";
|
|
2
|
-
import {useState} from "@aoao-y33/hooks";
|
|
3
|
-
import {defineComponent, h} from "vue";
|
|
4
|
-
import type {ButtonProps} from "element-plus";
|
|
5
|
-
|
|
6
|
-
/**
|
|
7
|
-
* 按钮高阶函数 - 用于创建可动态配置的按钮组件
|
|
8
|
-
*
|
|
9
|
-
* @template E - 事件类型,默认为 any
|
|
10
|
-
* @template T - 按钮属性类型,默认为 ButtonProps
|
|
11
|
-
* @param options - 按钮初始配置选项
|
|
12
|
-
* @returns 返回一个元组 [Button组件, setButton更新函数]
|
|
13
|
-
*
|
|
14
|
-
* @example
|
|
15
|
-
* const [MyButton, setButton] = useButton({ text: '点击' });
|
|
16
|
-
* // 后续可以通过 setButton 动态更新按钮属性
|
|
17
|
-
* setButton({ text: '新文本', disabled: true });
|
|
18
|
-
*/
|
|
19
|
-
export function useButton<E=any,T=ButtonProps>(options:AxButtonOptions<E,T>={}){
|
|
20
|
-
const [props,setButton] = useState(options);
|
|
21
|
-
const Button = defineComponent({
|
|
22
|
-
setup(){
|
|
23
|
-
return ()=>h(AxButton as any,{...props.value})
|
|
24
|
-
}
|
|
25
|
-
})
|
|
26
|
-
return [Button,setButton] as const;
|
|
27
|
-
}
|
package/src/button/index.ts
DELETED
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
import type {Component} from "vue";
|
|
2
|
-
|
|
3
|
-
/**
|
|
4
|
-
* 按钮类型注册表
|
|
5
|
-
* 存储自定义按钮类型与对应组件的映射关系
|
|
6
|
-
* @example
|
|
7
|
-
* // 注册自定义按钮
|
|
8
|
-
* addButtonField('primary', CustomButtonComponent)
|
|
9
|
-
*/
|
|
10
|
-
export const buttonFields:Record<string, Component>= {};
|
|
11
|
-
|
|
12
|
-
/**
|
|
13
|
-
* 注册新的按钮类型
|
|
14
|
-
* 将自定义按钮组件添加到按钮类型注册表中
|
|
15
|
-
*
|
|
16
|
-
* @param type - 按钮类型标识符(唯一)
|
|
17
|
-
* @param component - 对应的 Vue 组件
|
|
18
|
-
*
|
|
19
|
-
* @warning 如果类型已存在,会输出警告信息但不会阻止注册
|
|
20
|
-
*
|
|
21
|
-
* @example
|
|
22
|
-
* import CustomButton from './CustomButton.vue'
|
|
23
|
-
* addButtonField('custom', CustomButton)
|
|
24
|
-
*/
|
|
25
|
-
export const addButtonField =(type:string,component:Component)=>{
|
|
26
|
-
// 检查是否已存在相同类型的按钮
|
|
27
|
-
for (type in buttonFields){
|
|
28
|
-
console.warn(`[AxButton] Button type ${type} already exists`)
|
|
29
|
-
}
|
|
30
|
-
// 注册新的按钮类型
|
|
31
|
-
buttonFields[type] = component;
|
|
32
|
-
}
|
package/src/common/index.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './utils';
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
import * as Icons from '@element-plus/icons-vue';
|
|
2
|
-
|
|
3
|
-
/**
|
|
4
|
-
* 根据图标名称获取 Element Plus 图标组件
|
|
5
|
-
*
|
|
6
|
-
* @param icon - 图标名称(需与 Element Plus Icons 中的导出名称一致)
|
|
7
|
-
* @returns 对应的图标组件,如果不存在则返回 undefined
|
|
8
|
-
*
|
|
9
|
-
* @example
|
|
10
|
-
* // 获取搜索图标
|
|
11
|
-
* const SearchIcon = getIcons('Search')
|
|
12
|
-
*
|
|
13
|
-
* @example
|
|
14
|
-
* // 在模板中使用
|
|
15
|
-
* <component :is="getIcons('HomeFilled')" />
|
|
16
|
-
*
|
|
17
|
-
* @see {@link https://element-plus.org/zh-CN/component/icon.html Element Plus Icons}
|
|
18
|
-
*/
|
|
19
|
-
export const getIcons = (icon: string) => {
|
|
20
|
-
return (Icons as any)[icon];
|
|
21
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './iconUtils';
|
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
import {
|
|
2
|
-
ElInput,
|
|
3
|
-
ElSelect,
|
|
4
|
-
ElCascader,
|
|
5
|
-
ElRadioGroup,
|
|
6
|
-
ElCheckboxGroup,
|
|
7
|
-
ElColorPicker,
|
|
8
|
-
ElColorPickerPanel,
|
|
9
|
-
ElDatePicker, ElTimePicker, ElInputNumber,
|
|
10
|
-
ElInputOtp,
|
|
11
|
-
ElSwitch, ElRate, ElSlider, ElUpload,
|
|
12
|
-
ElSelectV2, ElTransfer, ElTreeSelect,
|
|
13
|
-
} from "element-plus";
|
|
14
|
-
import {addFormField} from "@/form";
|
|
15
|
-
|
|
16
|
-
export const initFormFields = () => {
|
|
17
|
-
addFormField('text', ElInput);
|
|
18
|
-
addFormField('select', ElSelect);
|
|
19
|
-
addFormField('cascade', ElCascader);
|
|
20
|
-
addFormField('radio', ElRadioGroup);
|
|
21
|
-
addFormField('checkbox', ElCheckboxGroup);
|
|
22
|
-
addFormField("color", ElColorPicker);
|
|
23
|
-
addFormField("date", ElDatePicker);
|
|
24
|
-
addFormField("time", ElTimePicker);
|
|
25
|
-
addFormField("number", ElInputNumber);
|
|
26
|
-
addFormField("color-panel", ElColorPickerPanel);
|
|
27
|
-
addFormField("otp", ElInputOtp);
|
|
28
|
-
addFormField("rate", ElRate);
|
|
29
|
-
addFormField("switch", ElSwitch);
|
|
30
|
-
addFormField("slider", ElSlider);
|
|
31
|
-
addFormField("upload", ElUpload);
|
|
32
|
-
addFormField("transfer", ElTransfer);
|
|
33
|
-
addFormField("select-v2", ElSelectV2);
|
|
34
|
-
addFormField("tree", ElTreeSelect);
|
|
35
|
-
}
|
|
@@ -1,130 +0,0 @@
|
|
|
1
|
-
<script setup lang="ts">
|
|
2
|
-
import {ElForm, ElFormItem, vLoading, type FormInstance} from "element-plus";
|
|
3
|
-
import {AxButton} from "@/button";
|
|
4
|
-
import type {AxFormEmits, AxFormProps} from "./props";
|
|
5
|
-
import {useDefineProps, useFetch} from "@aoao-y33/hooks";
|
|
6
|
-
import {computed, provide, reactive, type Ref, ref, useSlots, watch} from "vue";
|
|
7
|
-
|
|
8
|
-
defineOptions({name: 'AxForm'})
|
|
9
|
-
const {
|
|
10
|
-
isDefault = true,
|
|
11
|
-
submitButton = {},
|
|
12
|
-
loading = false,
|
|
13
|
-
api = null,
|
|
14
|
-
apiConfig = {},
|
|
15
|
-
...props
|
|
16
|
-
} = defineProps<AxFormProps>();
|
|
17
|
-
|
|
18
|
-
const emits = defineEmits<AxFormEmits>()
|
|
19
|
-
|
|
20
|
-
const slots = useSlots();
|
|
21
|
-
|
|
22
|
-
const formProps = useDefineProps(props);
|
|
23
|
-
|
|
24
|
-
const defaultButton = useDefineProps(submitButton, {
|
|
25
|
-
text: "提交",
|
|
26
|
-
icon: "CircleCheckFilled",
|
|
27
|
-
componentProps: {
|
|
28
|
-
type: "primary",
|
|
29
|
-
nativeType: "submit",
|
|
30
|
-
}
|
|
31
|
-
})
|
|
32
|
-
|
|
33
|
-
const formData = reactive({});
|
|
34
|
-
|
|
35
|
-
provide("formData", formData);
|
|
36
|
-
|
|
37
|
-
provide("clickData", formData);
|
|
38
|
-
|
|
39
|
-
const defaultData = reactive({});
|
|
40
|
-
|
|
41
|
-
provide("defaultData", defaultData);
|
|
42
|
-
|
|
43
|
-
const [, requestApi] = useFetch(api, apiConfig)
|
|
44
|
-
|
|
45
|
-
watch(() => formData, () => {
|
|
46
|
-
emits("change", formData);
|
|
47
|
-
}, {immediate: true})
|
|
48
|
-
|
|
49
|
-
const formRef = ref<FormInstance>() as Ref<FormInstance>;
|
|
50
|
-
|
|
51
|
-
const _loading = computed(() => {
|
|
52
|
-
return Boolean(loading || requestApi.getConfig().loading);
|
|
53
|
-
})
|
|
54
|
-
|
|
55
|
-
const onSubmit = () => {
|
|
56
|
-
formRef.value?.validate().then(async (res) => {
|
|
57
|
-
if (res) {
|
|
58
|
-
if (requestApi.getReady()) {
|
|
59
|
-
await requestApi.load(formData);
|
|
60
|
-
} else {
|
|
61
|
-
emits("submit", formData);
|
|
62
|
-
}
|
|
63
|
-
}
|
|
64
|
-
})
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
const getElForm = () => {
|
|
69
|
-
return formRef.value
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
const getValues = () => {
|
|
73
|
-
return Object.assign({}, formData);
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
const getValue = (fieldName: string) => {
|
|
77
|
-
return (formData as Record<string, any>)[fieldName]
|
|
78
|
-
}
|
|
79
|
-
const getFields = () => {
|
|
80
|
-
return Object.keys(formData);
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
const getDefaultValues = () => {
|
|
84
|
-
return Object.assign({}, defaultData);
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
const setValues = (values: Record<string, any>) => {
|
|
88
|
-
Object.assign(formData, values);
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
const resetValues = () => {
|
|
92
|
-
Object.assign(formData, defaultData);
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
const clearValues = () => {
|
|
96
|
-
Object.keys(formData).forEach(fieldName => {
|
|
97
|
-
(formData as Record<string, any>)[fieldName] = undefined;
|
|
98
|
-
})
|
|
99
|
-
}
|
|
100
|
-
|
|
101
|
-
defineExpose({
|
|
102
|
-
getElForm,
|
|
103
|
-
getValues,
|
|
104
|
-
getValue,
|
|
105
|
-
getFields,
|
|
106
|
-
getDefaultValues,
|
|
107
|
-
setValues,
|
|
108
|
-
resetValues,
|
|
109
|
-
clearValues,
|
|
110
|
-
...requestApi
|
|
111
|
-
})
|
|
112
|
-
|
|
113
|
-
</script>
|
|
114
|
-
<template>
|
|
115
|
-
<ElForm v-bind="formProps"
|
|
116
|
-
:model="formData"
|
|
117
|
-
ref="formRef"
|
|
118
|
-
@submit.prevent
|
|
119
|
-
v-loading="_loading">
|
|
120
|
-
<slot></slot>
|
|
121
|
-
<ElFormItem
|
|
122
|
-
v-if="slots.button||isDefault"
|
|
123
|
-
:label="labelWidth=='auto'?' ':''">
|
|
124
|
-
<ax-button v-if="isDefault"
|
|
125
|
-
v-bind="defaultButton"
|
|
126
|
-
@click="onSubmit"></ax-button>
|
|
127
|
-
<slot name="button"/>
|
|
128
|
-
</ElFormItem>
|
|
129
|
-
</ElForm>
|
|
130
|
-
</template>
|
|
@@ -1,73 +0,0 @@
|
|
|
1
|
-
import type {FormProps} from "element-plus";
|
|
2
|
-
import type {AxButtonOptions, AxButtonProps} from "@/button";
|
|
3
|
-
import type {FetchOptions, FieldsConfig, RequestFetch} from "@aoao-y33/hooks";
|
|
4
|
-
import type {EmitsToEventProps} from "@aoao-y33/utils";
|
|
5
|
-
import type {AxFormItemOptions} from "@/form";
|
|
6
|
-
|
|
7
|
-
/**
|
|
8
|
-
* AxForm 表单组件属性接口
|
|
9
|
-
* 继承自 Element Plus FormProps,扩展了自定义功能
|
|
10
|
-
* @template T - 表单数据类型,必须是对象类型
|
|
11
|
-
*/
|
|
12
|
-
export interface AxFormProps<T extends Record<string, any> = any> extends Omit<FormProps, 'model'> {
|
|
13
|
-
/** 是否使用默认配置,启用后将自动应用预设的表单样式和行为 */
|
|
14
|
-
isDefault?:boolean;
|
|
15
|
-
|
|
16
|
-
/** 提交按钮的配置项,用于自定义表单提交按钮的外观和行为 */
|
|
17
|
-
submitButton?: AxButtonProps;
|
|
18
|
-
|
|
19
|
-
/** 表单提交时的加载状态,通常在异步请求期间显示 */
|
|
20
|
-
loading?:boolean,
|
|
21
|
-
|
|
22
|
-
/**
|
|
23
|
-
* API 请求函数,用于表单数据提交
|
|
24
|
-
* @see RequestFetch - 请求函数类型定义
|
|
25
|
-
*/
|
|
26
|
-
api?:RequestFetch<T,any>;
|
|
27
|
-
|
|
28
|
-
/**
|
|
29
|
-
* API 请求配置项,包含请求参数、拦截器等配置
|
|
30
|
-
* @see FetchOptions - 请求配置选项类型
|
|
31
|
-
*/
|
|
32
|
-
apiConfig?:FetchOptions<T, any>;
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
/**
|
|
36
|
-
* AxForm 表单组件事件发射接口
|
|
37
|
-
* @template T - 表单数据类型
|
|
38
|
-
*/
|
|
39
|
-
export interface AxFormEmits<T extends Record<string, any> = Record<string, any>> {
|
|
40
|
-
/**
|
|
41
|
-
* 表单提交事件
|
|
42
|
-
* @param data - 表单提交的数据
|
|
43
|
-
*/
|
|
44
|
-
'submit':[data:T];
|
|
45
|
-
|
|
46
|
-
/**
|
|
47
|
-
* 表单数据变化事件
|
|
48
|
-
* @param data - 变化后的表单数据
|
|
49
|
-
*/
|
|
50
|
-
'change':[data:T];
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
/**
|
|
54
|
-
* AxForm 表单配置选项接口
|
|
55
|
-
* 继承自 AxFormProps 并合并事件处理属性和字段配置
|
|
56
|
-
* @template T - 表单数据类型
|
|
57
|
-
*/
|
|
58
|
-
export interface AxFormOptions<T extends Record<string, any> = any>
|
|
59
|
-
extends AxFormProps<T>,Partial<EmitsToEventProps<AxFormEmits<T>>>{
|
|
60
|
-
/**
|
|
61
|
-
* 按钮配置映射表,用于配置表单中的各种按钮(提交、重置等)
|
|
62
|
-
* @see FieldsConfig - 字段配置类型
|
|
63
|
-
* @see AxButtonOptions - 按钮选项类型
|
|
64
|
-
*/
|
|
65
|
-
buttonConfig?:FieldsConfig<AxButtonOptions>
|
|
66
|
-
|
|
67
|
-
/**
|
|
68
|
-
* 表单项配置映射表,用于配置表单中各个字段的属性、验证规则等
|
|
69
|
-
* @see FieldsConfig - 字段配置类型
|
|
70
|
-
* @see AxFormItemOptions - 表单项选项类型
|
|
71
|
-
*/
|
|
72
|
-
fieldConfig?:FieldsConfig<AxFormItemOptions>
|
|
73
|
-
}
|