@xizs/nuxt-antui 0.0.22 → 0.0.24
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/.playground/app.vue +31 -0
- package/.playground/nuxt.config.ts +3 -1
- package/app/app.vue +1 -0
- package/app/components/global/Form.tsx +113 -132
- package/app/components/global/Form2.tsx +163 -0
- package/package.json +1 -1
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="">
|
|
3
|
+
<!-- <Form
|
|
4
|
+
:form="[
|
|
5
|
+
{label:'ss',is:'input',key:'aa'},
|
|
6
|
+
{label:'ss',is:'input',key:'affa'}
|
|
7
|
+
]"
|
|
8
|
+
:submit="submit"
|
|
9
|
+
></Form> -->
|
|
10
|
+
<AButton @click="click"> aa</AButton>
|
|
11
|
+
</div>
|
|
12
|
+
</template>
|
|
13
|
+
|
|
14
|
+
<script setup lang="ts">
|
|
15
|
+
|
|
16
|
+
const click = ()=>{
|
|
17
|
+
|
|
18
|
+
MModal.Form({
|
|
19
|
+
title:"aaaa",
|
|
20
|
+
form:[
|
|
21
|
+
{label:'ss',is:'input',key:'aa'},
|
|
22
|
+
{label:'ss',is:'input',key:'affa'}
|
|
23
|
+
],
|
|
24
|
+
submit:()=>{
|
|
25
|
+
console.log('aaaa')
|
|
26
|
+
}
|
|
27
|
+
})
|
|
28
|
+
}
|
|
29
|
+
</script>
|
|
30
|
+
|
|
31
|
+
<style scoped></style>
|
package/app/app.vue
CHANGED
|
@@ -1,154 +1,135 @@
|
|
|
1
|
-
import { AForm, AFormItem, AInput, ASelect,AInputNumber, LineOutlined, ASwitch, ATextarea,
|
|
1
|
+
import { AForm, AFormItem, AInput, ASelect, AInputNumber, LineOutlined, ASwitch, ATextarea, ARadioGroup, AButton, AInputPassword } from '#components'
|
|
2
2
|
|
|
3
3
|
export type FormItemType = {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
4
|
+
label: string,
|
|
5
|
+
key: string | string[],
|
|
6
|
+
value: any,
|
|
7
|
+
is: string | ((formData: any) => VNode),
|
|
8
|
+
bind: any,
|
|
9
|
+
rules: any[],
|
|
10
|
+
show?: boolean
|
|
10
11
|
}
|
|
11
12
|
|
|
12
13
|
export type FormPropsType = {
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
showSubmit?:boolean
|
|
14
|
+
form: FormItemType[],
|
|
15
|
+
submit: (formData: any) => void,
|
|
16
|
+
showSubmit?: boolean,
|
|
17
|
+
defaultFormData?: Record<string, any>
|
|
18
18
|
}
|
|
19
19
|
|
|
20
|
-
export
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
},
|
|
39
|
-
inputNumberRange:(form:any,item:FormItemType)=>{
|
|
40
|
-
return <div class="flex items-center gap-2">
|
|
41
|
-
<AInputNumber class="flex-1" v-model:value={form[item.key[0] as string]} {...item.bind[0]}></AInputNumber>
|
|
42
|
-
<LineOutlined />
|
|
43
|
-
<AInputNumber class="flex-1" v-model:value={form[item.key[1] as string]} {...item.bind[1]}></AInputNumber>
|
|
44
|
-
</div>
|
|
45
|
-
},
|
|
46
|
-
select:(form:any,item:FormItemType)=>{
|
|
47
|
-
return <ASelect v-model:value={form[item.key as string]} options={item.bind.options}></ASelect>
|
|
48
|
-
},
|
|
49
|
-
switch:(form:any,item:FormItemType)=>{
|
|
50
|
-
return <ASwitch v-model:checked={form[item.key as string]} {...item.bind}></ASwitch>
|
|
51
|
-
},
|
|
52
|
-
radio: (form: any, item: FormItemType) => {
|
|
53
|
-
return <ARadioGroup v-model:value={form[item.key as string]} {...item.bind}></ARadioGroup>
|
|
54
|
-
},
|
|
20
|
+
export class Form {
|
|
21
|
+
static FormComs: Record<string, (form: any, item: FormItemType) => VNode> = {
|
|
22
|
+
input: (form, item) => <AInput v-model:value={form[item.key as string]} />,
|
|
23
|
+
password: (form, item) => <AInputPassword v-model:value={form[item.key as string]} />,
|
|
24
|
+
button: (form, item) => <AButton {...item.bind}>{item.bind?.content}</AButton>,
|
|
25
|
+
textarea: (form, item) => <ATextarea v-model:value={form[item.key as string]} />,
|
|
26
|
+
inputNumber: (form, item) => <AInputNumber v-model:value={form[item.key as string]} {...item.bind} />,
|
|
27
|
+
inputNumberRange: (form, item) => (
|
|
28
|
+
<div class="flex items-center gap-2">
|
|
29
|
+
<AInputNumber class="flex-1" v-model:value={form[item.key[0] as string]} {...item.bind[0]} />
|
|
30
|
+
<LineOutlined />
|
|
31
|
+
<AInputNumber class="flex-1" v-model:value={form[item.key[1] as string]} {...item.bind[1]} />
|
|
32
|
+
</div>
|
|
33
|
+
),
|
|
34
|
+
select: (form, item) => <ASelect v-model:value={form[item.key as string]} options={item.bind.options} />,
|
|
35
|
+
switch: (form, item) => <ASwitch v-model:checked={form[item.key as string]} {...item.bind} />,
|
|
36
|
+
radio: (form, item) => <ARadioGroup v-model:value={form[item.key as string]} {...item.bind} />
|
|
37
|
+
}
|
|
55
38
|
|
|
56
|
-
|
|
39
|
+
static addFormCom(name: string, comp: (form: any, item: FormItemType) => VNode) {
|
|
40
|
+
Form.FormComs[name] = comp
|
|
41
|
+
}
|
|
57
42
|
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
form:{
|
|
65
|
-
type:Array as ()=>FormPropsType['form'],
|
|
66
|
-
required:true
|
|
43
|
+
static createComponent() {
|
|
44
|
+
return defineComponent({
|
|
45
|
+
props: {
|
|
46
|
+
form: {
|
|
47
|
+
type: Array as () => FormPropsType['form'],
|
|
48
|
+
required: true
|
|
67
49
|
},
|
|
68
|
-
submit:{
|
|
69
|
-
|
|
70
|
-
|
|
50
|
+
submit: {
|
|
51
|
+
type: Function as unknown as () => FormPropsType['submit'],
|
|
52
|
+
required: true
|
|
71
53
|
},
|
|
72
|
-
showSubmit:{
|
|
73
|
-
|
|
74
|
-
|
|
54
|
+
showSubmit: {
|
|
55
|
+
type: Boolean,
|
|
56
|
+
default: true
|
|
75
57
|
},
|
|
76
58
|
defaultFormData: {
|
|
77
|
-
|
|
78
|
-
|
|
59
|
+
type: Object,
|
|
60
|
+
default: () => ({})
|
|
79
61
|
}
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
const
|
|
62
|
+
},
|
|
63
|
+
setup(props, { expose }) {
|
|
64
|
+
const { t: $t } = useI18n()
|
|
65
|
+
const thisRef = ref()
|
|
66
|
+
const formData = ref<Record<string, any>>({ ...props.defaultFormData })
|
|
67
|
+
const rules = ref<Record<string, any>>({})
|
|
84
68
|
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
}else{
|
|
97
|
-
formData.value[item.key] = item.value??''
|
|
98
|
-
rules.value[item.key] = item.rules??[]
|
|
99
|
-
}
|
|
100
|
-
|
|
101
|
-
// if(Array.isArray(item.rules)){
|
|
102
|
-
// item.rules.forEach(rule=>{
|
|
103
|
-
// rules.value
|
|
104
|
-
// })
|
|
105
|
-
// }
|
|
106
|
-
// rules.value[item.key] = item.rules??[]
|
|
69
|
+
props.form.forEach(item => {
|
|
70
|
+
if (item.key == null) return
|
|
71
|
+
if (Array.isArray(item.key)) {
|
|
72
|
+
item.key.forEach((key, idx) => {
|
|
73
|
+
formData.value[key] = item.value?.[idx] ?? ''
|
|
74
|
+
rules.value[key] = item.rules ?? []
|
|
75
|
+
})
|
|
76
|
+
} else {
|
|
77
|
+
formData.value[item.key] = item.value ?? ''
|
|
78
|
+
rules.value[item.key] = item.rules ?? []
|
|
79
|
+
}
|
|
107
80
|
})
|
|
108
81
|
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
}
|
|
82
|
+
const loading = ref(false)
|
|
83
|
+
|
|
84
|
+
const submit = async () => {
|
|
85
|
+
if (loading.value) throw new Error('loading')
|
|
86
|
+
loading.value = true
|
|
87
|
+
try {
|
|
88
|
+
await thisRef.value.validate()
|
|
89
|
+
await props.submit(formData.value)
|
|
90
|
+
} finally {
|
|
91
|
+
loading.value = false
|
|
92
|
+
}
|
|
121
93
|
}
|
|
122
94
|
|
|
123
|
-
expose({
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
95
|
+
expose({ submit, loading })
|
|
96
|
+
|
|
97
|
+
return () => (
|
|
98
|
+
<AForm
|
|
99
|
+
ref={thisRef}
|
|
100
|
+
model={formData.value}
|
|
101
|
+
rules={rules.value}
|
|
102
|
+
label-col={{ span: 8 }}
|
|
103
|
+
wrapper-col={{ span: 16 }}
|
|
104
|
+
>
|
|
105
|
+
{ADParse(props.form,formData.value).map(item => {
|
|
106
|
+
const node =
|
|
107
|
+
typeof item.is === 'function'
|
|
108
|
+
? item.is(formData.value)
|
|
109
|
+
: Form.FormComs[item.is]?.(formData.value, item)
|
|
128
110
|
|
|
111
|
+
if (item.label == null) return node
|
|
112
|
+
|
|
113
|
+
return (
|
|
114
|
+
<AFormItem
|
|
115
|
+
key={Array.isArray(item.key) ? item.key.join(',') : item.key}
|
|
116
|
+
name={item.key}
|
|
117
|
+
{...item.bind}
|
|
118
|
+
class={{ hidden: item.show === false }}
|
|
119
|
+
v-slots={{
|
|
120
|
+
label: () => <span class="whitespace-break-spaces">{$t(item.label)}</span>
|
|
121
|
+
}}
|
|
122
|
+
>
|
|
123
|
+
{node}
|
|
124
|
+
</AFormItem>
|
|
125
|
+
)
|
|
126
|
+
})}
|
|
127
|
+
</AForm>
|
|
128
|
+
)
|
|
129
|
+
}
|
|
130
|
+
})
|
|
131
|
+
}
|
|
132
|
+
}
|
|
129
133
|
|
|
130
|
-
return ()=><AForm ref={thisRef} model={formData.value} rules={rules.value} label-col={{ span: 8 }} wrapper-col={{ span: 16 }}>
|
|
131
|
-
{/* {JSON.stringify(formData.value)} */}
|
|
132
|
-
{
|
|
133
|
-
ADParse(props.form, formData.value).map(item => {
|
|
134
|
-
if (item.label == null) {
|
|
135
|
-
return typeof item.is === 'function'? item.is(formData.value) :
|
|
136
|
-
FormComs[item.is](formData.value,item)
|
|
137
|
-
}
|
|
138
|
-
return <AFormItem
|
|
139
|
-
key={item.key} name={item.key} {...item.bind} class={{ 'hidden': item.show === false }}
|
|
140
|
-
v-slots={{
|
|
141
|
-
label:()=><span class="whitespace-break-spaces">{$t(item.label)}</span>
|
|
142
|
-
}}
|
|
143
|
-
>
|
|
144
|
-
{
|
|
145
|
-
typeof item.is === 'function'? item.is(formData.value) :
|
|
146
|
-
FormComs[item.is](formData.value,item)
|
|
147
|
-
}
|
|
148
|
-
</AFormItem>
|
|
149
|
-
})
|
|
150
|
-
}
|
|
151
134
|
|
|
152
|
-
|
|
153
|
-
}
|
|
154
|
-
})
|
|
135
|
+
export default Form.createComponent()
|
|
@@ -0,0 +1,163 @@
|
|
|
1
|
+
import { AForm, AFormItem, AInput, ASelect,AInputNumber, LineOutlined, ASwitch, ATextarea, ARadio, ARadioGroup, AButton, AInputPassword } from "#components"
|
|
2
|
+
|
|
3
|
+
export type FormItemType = {
|
|
4
|
+
label:string,
|
|
5
|
+
key: string | string[],
|
|
6
|
+
value:any,
|
|
7
|
+
is:string,
|
|
8
|
+
bind:any,
|
|
9
|
+
rules:any[]
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
export type FormPropsType = {
|
|
13
|
+
form:FormItemType[],
|
|
14
|
+
submit:(formData:any)=>{
|
|
15
|
+
|
|
16
|
+
},
|
|
17
|
+
showSubmit?:boolean
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
export class Form2 {
|
|
21
|
+
static FormComs: Record<string, any> ={
|
|
22
|
+
input:(form:any,item:FormItemType)=>{
|
|
23
|
+
return <AInput v-model:value={form[item.key as string]}></AInput>
|
|
24
|
+
},
|
|
25
|
+
password:(form:any,item:FormItemType)=>{
|
|
26
|
+
return <AInputPassword v-model:value={form[item.key as string]}></AInputPassword>
|
|
27
|
+
},
|
|
28
|
+
button:(form:any,item:FormItemType)=>{
|
|
29
|
+
console.log(item.bind)
|
|
30
|
+
return <AButton {...item.bind}>{ item.bind.content}</AButton>
|
|
31
|
+
},
|
|
32
|
+
textarea:(form:any,item:FormItemType)=>{
|
|
33
|
+
return <ATextarea v-model:value={form[item.key as string]}></ATextarea>
|
|
34
|
+
},
|
|
35
|
+
inputNumber:(form:any,item:FormItemType)=>{
|
|
36
|
+
return <AInputNumber v-model:value={form[item.key as string]} {...item.bind}></AInputNumber>
|
|
37
|
+
},
|
|
38
|
+
inputNumberRange:(form:any,item:FormItemType)=>{
|
|
39
|
+
return <div class="flex items-center gap-2">
|
|
40
|
+
<AInputNumber class="flex-1" v-model:value={form[item.key[0] as string]} {...item.bind[0]}></AInputNumber>
|
|
41
|
+
<LineOutlined />
|
|
42
|
+
<AInputNumber class="flex-1" v-model:value={form[item.key[1] as string]} {...item.bind[1]}></AInputNumber>
|
|
43
|
+
</div>
|
|
44
|
+
},
|
|
45
|
+
select:(form:any,item:FormItemType)=>{
|
|
46
|
+
return <ASelect v-model:value={form[item.key as string]} options={item.bind.options}></ASelect>
|
|
47
|
+
},
|
|
48
|
+
switch:(form:any,item:FormItemType)=>{
|
|
49
|
+
return <ASwitch v-model:checked={form[item.key as string]} {...item.bind}></ASwitch>
|
|
50
|
+
},
|
|
51
|
+
radio: (form: any, item: FormItemType) => {
|
|
52
|
+
return <ARadioGroup v-model:value={form[item.key as string]} {...item.bind}></ARadioGroup>
|
|
53
|
+
},
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
static createComponent() {
|
|
57
|
+
return defineComponent({
|
|
58
|
+
props:{
|
|
59
|
+
// form: Array as () => FormType[],
|
|
60
|
+
// action: Array as () => JSX.Element[],
|
|
61
|
+
// table: Object as () => FormTableProps<any>["table"],
|
|
62
|
+
// control: Object
|
|
63
|
+
form:{
|
|
64
|
+
type:Array as ()=>FormPropsType['form'],
|
|
65
|
+
required:true
|
|
66
|
+
},
|
|
67
|
+
submit:{
|
|
68
|
+
type:Function as FormPropsType['submit'],
|
|
69
|
+
required:true
|
|
70
|
+
},
|
|
71
|
+
showSubmit:{
|
|
72
|
+
type:Boolean,
|
|
73
|
+
default:true
|
|
74
|
+
},
|
|
75
|
+
defaultFormData: {
|
|
76
|
+
type: Object,
|
|
77
|
+
default: () => ({})
|
|
78
|
+
}
|
|
79
|
+
},
|
|
80
|
+
setup(props, { expose }) {
|
|
81
|
+
|
|
82
|
+
const {t:$t} = useI18n()
|
|
83
|
+
|
|
84
|
+
let thisRef = ref(null)
|
|
85
|
+
let formData = ref(props.defaultFormData)
|
|
86
|
+
let rules = ref({})
|
|
87
|
+
ADParse(props.form,formData.value).forEach(item=>{
|
|
88
|
+
if(item.key==null) return
|
|
89
|
+
if(Array.isArray(item.key)){
|
|
90
|
+
item.key.forEach(key=>{
|
|
91
|
+
formData.value[key] = item.value??''
|
|
92
|
+
rules.value[item.key] = item.rules??[]
|
|
93
|
+
|
|
94
|
+
})
|
|
95
|
+
}else{
|
|
96
|
+
formData.value[item.key] = item.value??''
|
|
97
|
+
rules.value[item.key] = item.rules??[]
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
// if(Array.isArray(item.rules)){
|
|
101
|
+
// item.rules.forEach(rule=>{
|
|
102
|
+
// rules.value
|
|
103
|
+
// })
|
|
104
|
+
// }
|
|
105
|
+
// rules.value[item.key] = item.rules??[]
|
|
106
|
+
})
|
|
107
|
+
|
|
108
|
+
let loading = ref(false)
|
|
109
|
+
let submit = async ()=>{
|
|
110
|
+
if(loading.value){
|
|
111
|
+
throw new Error('loading')
|
|
112
|
+
}
|
|
113
|
+
loading.value = true
|
|
114
|
+
try{
|
|
115
|
+
await thisRef.value.validate()
|
|
116
|
+
await props.submit(formData.value)
|
|
117
|
+
}finally{
|
|
118
|
+
loading.value = false
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
expose({
|
|
123
|
+
submit,
|
|
124
|
+
loading
|
|
125
|
+
})
|
|
126
|
+
|
|
127
|
+
return ()=><div>slkdjflsdkjflj</div>
|
|
128
|
+
|
|
129
|
+
// return ()=><AForm ref={thisRef} model={formData.value} rules={rules.value} label-col={{ span: 8 }} wrapper-col={{ span: 16 }}>
|
|
130
|
+
// {
|
|
131
|
+
// ADParse(props.form, formData.value).map(item => {
|
|
132
|
+
// console.log(item.is)
|
|
133
|
+
// if (item.label == null) {
|
|
134
|
+
// return typeof item.is === 'function'? item.is(formData.value) :
|
|
135
|
+
// FormComs[item.is](formData.value,item)
|
|
136
|
+
// }
|
|
137
|
+
// return <AFormItem
|
|
138
|
+
// key={item.key} name={item.key} {...item.bind} class={{ 'hidden': item.show === false }}
|
|
139
|
+
// v-slots={{
|
|
140
|
+
// label:()=><span class="whitespace-break-spaces">{$t(item.label)}</span>
|
|
141
|
+
// }}
|
|
142
|
+
// >
|
|
143
|
+
// {
|
|
144
|
+
// typeof item.is === 'function'? item.is(formData.value) :
|
|
145
|
+
// FormComs[item.is](formData.value,item)
|
|
146
|
+
// }
|
|
147
|
+
// </AFormItem>
|
|
148
|
+
// })
|
|
149
|
+
// }
|
|
150
|
+
|
|
151
|
+
// </AForm>
|
|
152
|
+
}
|
|
153
|
+
})
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
static addFormCom(name: string, comp: any) {
|
|
157
|
+
Form2.FormComs[name] = comp
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
}
|
|
161
|
+
// let a = new Form2()
|
|
162
|
+
// console.log(a)
|
|
163
|
+
export default Form2.createComponent
|