@xizs/nuxt-antui 0.0.2 → 0.0.3

package/app/components/global/Form.tsx

@@ -1,4 +1,4 @@
-import { AForm, AFormItem, AInput, ASelect,AInputNumber, LineOutlined, ASwitch, ATextarea, ARadio } from "#components"
+import { AForm, AFormItem, AInput, ASelect,AInputNumber, LineOutlined, ASwitch, ATextarea, ARadio, ARadioGroup, AButton } from "#components"
 
 export type FormItemType = {
     label:string,
@@ -16,10 +16,14 @@ export type FormPropsType = {
     showSubmit?:boolean
 }
 
-const FormComs  = {
+const FormComs = {
     input:(form:any,item:FormItemType)=>{
         return <AInput v-model:value={form[item.key]}></AInput>
     },
+    button:(form:any,item:FormItemType)=>{
+        console.log(item.bind)
+        return <AButton {...item.bind}>{ item.bind.content}</AButton>
+    },
     textarea:(form:any,item:FormItemType)=>{
         return <ATextarea v-model:value={form[item.key]}></ATextarea>
     },
@@ -43,7 +47,10 @@ const FormComs  = {
         return <ASwitch v-model:checked={form[item.key]} {...item.bind}></ASwitch>
     },
     radio: (form: any, item: FormItemType) => {
-        return <ARadio v-model:checked={form[item.key]} {...item.bind}></ARadio>
+        return <ARadioGroup v-model:value={form[item.key]} {...item.bind}></ARadioGroup>
+    },
+    uploadImg: (form: any, item: FormItemType) => { 
+        return <UploadImg v-model:value={form[item.key]} {...item.bind}></UploadImg>
     }
 }
 
@@ -65,13 +72,18 @@ export default defineComponent({
             type:Boolean,
             default:true
         },
+        defaultFormData: {
+            type: Object,
+            default: () => ({})
+        }
     },
     setup(props,{expose}){
 
         let thisRef = ref(null)
-        let formData = ref({}) 
+        let formData = ref(props.defaultFormData) 
         let rules = ref({})
-        props.form.forEach(item=>{
+        ADParse(props.form,formData.value).forEach(item=>{
+            if(item.key==null) return
             if(Array.isArray(item.key)){
                 item.key.forEach(key=>{
                     formData.value[key] = item.value??''
@@ -115,9 +127,16 @@ export default defineComponent({
         return ()=><AForm ref={thisRef} model={formData.value} rules={rules.value} label-col={{ span: 6 }} wrapper-col={{ span: 16 }}>
             {/* {JSON.stringify(formData.value)} */}
             {
-                props.form.map(item=>{
-                    return <AFormItem label={item.label} name={item.key}>
-                        {FormComs[item.is](formData.value,item)}
+                ADParse(props.form, formData.value).map(item => {
+                    if (item.label == null) {
+                        return  typeof item.is === 'function'? item.is(formData.value) :
+                        FormComs[item.is](formData.value,item)
+                    }
+                    return <AFormItem label={item.label} key={item.key} name={item.key} {...item.bind} class={{'hidden':item.show===false}}>
+                        {
+                            typeof item.is === 'function'? item.is(formData.value) :
+                            FormComs[item.is](formData.value,item)
+                        }
                     </AFormItem>
                 })
             }

package/app/components/global/FormTable.tsx

@@ -46,7 +46,7 @@ let dateRange = defineComponent({
 
 const FormItems = {
     input:(form:any,item:TableFormItemType)=>{
-        return <AInput size="middle" v-model:value={form[item.key]} placeholder={`please input ${item.label}`}></AInput>
+        return <AInput size="middle" v-model:value={form[item.key]} placeholder={`请输入 ${item.label}`}></AInput>
     },
     select:(form:any,item:TableFormItemType)=>{
         return <ASelect allowClear class="min-w-[150px]" v-model:value={form[item.key]} options={item.bind?.options} placeholder={`please select ${item.label}`}></ASelect>

package/app/composables/form.ts

@@ -1 +1,77 @@
-export const FormItem = {}
+// import type { FormItemType } from "../components/global/Form";
+// import { AForm, AFormItem, AInput, ASelect, AInputNumber, LineOutlined, ASwitch, ATextarea, ARadio } from "#components"
+
+// export const FormComs = {
+//     input: (form: any, item: FormItemType) =>
+//         h(AInput, {
+//             value: form[item.key as string],
+//             'onUpdate:value': (val: any) => (form[item.key as string] = val)
+//         }),
+
+//     textarea: (form: any, item: FormItemType) =>
+//         h(ATextarea, {
+//             value: form[item.key as string],
+//             'onUpdate:value': (val: any) => (form[item.key as string] = val)
+//         }),
+
+//     inputNumber: (form: any, item: FormItemType) =>
+//         h(AInputNumber, {
+//             ...item.bind,
+//             value: form[item.key as string],
+//             'onUpdate:value': (val: any) => (form[item.key as string] = val)
+//         }),
+
+//     inputNumberRange: (form: any, item: FormItemType) =>
+//         h(
+//             'div',
+//             { class: 'flex items-center gap-2' },
+//             [
+//                 h(AInputNumber, {
+//                     class: 'flex-1',
+//                     ...item.bind[0],
+//                     value: form[item.key[0] as string],
+//                     'onUpdate:value': (val: any) => (form[item.key[0] as string] = val)
+//                 }),
+//                 h(LineOutlined),
+//                 h(AInputNumber, {
+//                     class: 'flex-1',
+//                     ...item.bind[1],
+//                     value: form[item.key[1] as string],
+//                     'onUpdate:value': (val: any) => (form[item.key[1] as string] = val)
+//                 })
+//             ]
+//         ),
+
+//     select: (form: any, item: FormItemType) =>
+//         h(ASelect, {
+//             value: form[item.key as string],
+//             options: item.bind.options,
+//             'onUpdate:value': (val: any) => (form[item.key as string] = val)
+//         }),
+
+//     countrySelect: (form: any, item: FormItemType) =>
+//         h(ASelect, {
+//             value: form[item.key as string],
+//             options: Const.CountrySelectList(),
+//             'onUpdate:value': (val: any) => (form[item.key as string] = val)
+//         }),
+
+//     switch: (form: any, item: FormItemType) =>
+//         h(ASwitch, {
+//             ...item.bind,
+//             checked: form[item.key as string],
+//             'onUpdate:checked': (val: any) => (form[item.key as string] = val)
+//         }),
+
+//     radio: (form: any, item: FormItemType) =>
+//         h(ARadio, {
+//             ...item.bind,
+//             checked: form[item.key as string],
+//             'onUpdate:checked': (val: any) => (form[item.key as string] = val)
+//         }),
+
+//     // upload: (form: any, item: FormItemType) =>
+//     //   h(UploadImg, {
+//     //     ...item.bind
+//     //   })
+// }

package/app/composables/modal.ts

@@ -102,6 +102,7 @@ export const FormModal = (params: FormModalParamsType) => {
 
             return () => h(AModal, {
                 title: params.title,
+                width: params.width,
                 okText: '提交',
                 cancelText: '取消',
                 confirmLoading: loading.value,
@@ -113,6 +114,7 @@ export const FormModal = (params: FormModalParamsType) => {
             }, h(Form, {
                 ref: formRef,
                 form: params.form,
+                defaultFormData: params.defaultFormData,
                 submit: params.submit,
                 showSubmit: false
             }))

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@xizs/nuxt-antui",
   "type": "module",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "main": "./nuxt.config.ts",
   "scripts": {
     "dev": "nuxi dev .playground",