@form-create/element-ui 2.5.12 → 3.0.0-alpha.2

package/src/core/alias.js

@@ -1,33 +1,33 @@
 const PRE = 'el';
 export default {
-    button: PRE + 'Button',
+    button: PRE + '-button',
     icon: 'i',
-    slider: PRE + 'Slider',
-    rate: PRE + 'Rate',
-    upload: 'fcUpload',
-    cascader: PRE + 'Cascader',
-    popover: PRE + 'Popover',
-    tooltip: PRE + 'Tooltip',
-    colorPicker: PRE + 'ColorPicker',
-    timePicker: PRE + 'TimePicker',
-    timeSelect: PRE + 'TimeSelect',
-    datePicker: PRE + 'DatePicker',
-    'switch': PRE + 'Switch',
-    select: 'fcSelect',
-    checkbox: 'fcCheckbox',
-    radio: 'fcRadio',
-    inputNumber: PRE + 'InputNumber',
-    number: PRE + 'InputNumber',
-    input: PRE + 'Input',
-    formItem: PRE + 'FormItem',
-    form: PRE + 'Form',
-    frame: 'fcFrame',
-    col: PRE + 'Col',
-    row: PRE + 'Row',
-    tree: 'fcTree',
-    autoComplete: PRE + 'Autocomplete',
-    auto: PRE + 'Autocomplete',
-    group: 'fcGroup',
-    object: 'fcSubForm',
-    subForm: 'fcSubForm',
+    slider: PRE + '-slider',
+    rate: PRE + '-rate',
+    upload: 'fc-upload',
+    cascader: PRE + '-cascader',
+    popover: PRE + '-popover',
+    tooltip: PRE + '-tooltip',
+    colorPicker: PRE + '-colorPicker',
+    timePicker: PRE + '-time-picker',
+    timeSelect: PRE + '-time-select',
+    datePicker: PRE + '-date-picker',
+    'switch': PRE + '-switch',
+    select: 'fc-select',
+    checkbox: 'fc-checkbox',
+    radio: 'fc-radio',
+    inputNumber: PRE + '-input-number',
+    number: PRE + '-input-number',
+    input: PRE + '-input',
+    formItem: PRE + '-form-item',
+    form: PRE + '-form',
+    frame: 'fc-frame',
+    col: PRE + '-col',
+    row: PRE + '-row',
+    tree: 'fc-tree',
+    autoComplete: PRE + '-autocomplete',
+    auto: PRE + '-autocomplete',
+    group: 'fc-group',
+    object: 'fc-sub-form',
+    subForm: 'fc-sub-form',
 }

package/src/core/api.js

@@ -13,75 +13,38 @@ function tidyBtnProp(btn, def) {
 export default function extendApi(api, h) {
     extend(api, {
         validate(callback) {
-            let flag;
-            const forms = api.children;
-            let len = forms.length;
-            const validate = () => {
-                h.$manager.validate((...args) => {
-                    if (!args[0] || !flag) {
-                        flag = args;
-                    }
-                    callback && callback(...flag);
-                });
-            };
-
-            const validFn = (args) => {
-                setTimeout(() => {
-                    if (!args[0]) {
-                        if (!flag) {
-                            flag = args;
-                        }
-                    }
-                    if (!--len) {
-                        validate();
-                    }
-                });
-            };
-
-            forms.forEach(form => {
-                form.validate((...args) => validFn(args))
-            })
-
-            if (!len) {
-                validate();
-            }
+            return new Promise((resolve, reject) => {
+                const forms = api.children;
+                const all = [h.$manager.validate()];
+                forms.forEach(v => {
+                    all.push(v.validate());
+                })
+                Promise.all(all).then(() => {
+                    resolve(true);
+                    callback && callback(true);
+                }).catch((e) => {
+                    reject(e);
+                    callback && callback(e);
+                })
+            });
         },
-        validateField: (field, callback) => {
-            const ctx = h.getFieldCtx(field);
-            if (!ctx) return;
-            const sub = h.subForm[ctx.id];
-            let len = 0;
-            let flag;
-            const validate = () => {
-                h.$manager.validateField(ctx.id, (...args) => {
-                    if (args[0]) {
-                        flag = args;
-                    } else if (flag) {
-                        return callback && callback('子表单验证未通过', flag[1]);
-                    }
-                    callback && callback(...flag || args);
-                });
-            };
-            const validFn = (args) => {
-                setTimeout(() => {
-                    if (!args[0]) {
-                        if (!flag) {
-                            flag = args;
-                        }
-                    }
-                    if (!--len) {
-                        validate();
-                    }
-                });
-            };
-            sub && toArray(sub).forEach(form => {
-                len++;
-                form.validate((...args) => validFn(args))
+        validateField(field, callback) {
+            return new Promise((resolve, reject) => {
+                const ctx = h.getFieldCtx(field);
+                if (!ctx) return;
+                const sub = h.subForm[ctx.id];
+                const all = [h.$manager.validateField(ctx.id)];
+                toArray(sub).forEach(v => {
+                    all.push(v.validate());
+                })
+                Promise.all(all).then(() => {
+                    resolve(null);
+                    callback && callback(null);
+                }).catch((e) => {
+                    reject(e);
+                    callback && callback(e);
+                })
             });
-
-            if (!len) {
-                validate();
-            }
         },
         clearValidateState(fields, clearSub = true) {
             api.helper.tidyFields(fields).forEach(field => {
@@ -141,18 +104,17 @@ export default function extendApi(api, h) {
             api.refreshOptions();
         },
         submit(successFn, failFn) {
-            api.validate((valid) => {
-                if (valid) {
+            return new Promise((resolve, reject) => {
+                api.validate().then(() => {
                     let formData = api.formData();
-                    if (is.Function(successFn))
-                        invoke(() => successFn(formData, this));
-                    else {
-                        is.Function(h.options.onSubmit) && invoke(() => h.options.onSubmit(formData, this));
-                        h.vm.$emit('submit', formData, this);
-                    }
-                } else {
-                    is.Function(failFn) && invoke(() => failFn(this, ...arguments));
-                }
+                    is.Function(successFn) && invoke(() => successFn(formData, api));
+                    is.Function(h.options.onSubmit) && invoke(() => h.options.onSubmit(formData, api));
+                    h.vm.emit('submit', formData, api);
+                    resolve(formData);
+                }).catch((...args) => {
+                    is.Function(failFn) && invoke(() => failFn(api, ...args));
+                    reject(...args)
+                })
             });
         },
     });

package/src/core/index.js

@@ -6,6 +6,7 @@ import FormCreateFactory from '@form-create/core/src/index';
 import makers from './maker';
 import '../style/index.css';
 import extendApi from './api';
+import ElementPlus from 'element-plus';
 
 function install(FormCreate) {
     FormCreate.componentAlias(alias);
@@ -23,11 +24,17 @@ function install(FormCreate) {
     });
 }
 
+function appUse(app)
+{
+    app.use(ElementPlus);
+}
+
 export default function elmFormCreate() {
     return FormCreateFactory({
-        ui: `${process.env.UI}`,
-        version: `${process.env.VERSION}`,
+        ui:'process.env.UI',
+        version: 'process.env.VERSION',
         manager,
+        appUse,
         extendApi,
         install,
         attrs: {

package/src/core/manager.js

@@ -8,12 +8,6 @@ function isTooltip(info) {
     return info.type === 'tooltip';
 }
 
-const upperCaseReg = /[A-Z]/;
-
-export function isAttr(name, value) {
-    return (!upperCaseReg.test(name) && (is.String(value) || is.Number(value)))
-}
-
 function tidy(props, name) {
     if (!hasProperty(props, name)) return;
     if (is.String(props[name])) {
@@ -32,17 +26,20 @@ function tidyBool(opt, name) {
 }
 
 export default {
-    validate(call) {
-        this.form().validate(call);
-    },
-    validateField(field, call) {
-        this.form().validateField(field, call);
+    validate() {
+        return this.form().validate();
+    },
+    validateField(field) {
+        return new Promise((resolve, reject) => {
+            this.form().validateField(field, (res) => {
+                res ? reject(res) : resolve(null);
+            });
+        });
     },
     clearValidateState(ctx) {
-        const fItem = this.vm.$refs[ctx.wrapRef];
+        const fItem = this.vm.refs[ctx.wrapRef];
         if (fItem) {
-            fItem.validateMessage = '';
-            fItem.validateState = '';
+            fItem.clearValidate();
         }
     },
     tidyOptions(options) {
@@ -57,13 +54,7 @@ export default {
         return prop;
     },
     mergeProp(ctx) {
-        let props = ctx.prop.props;
         ctx.prop = mergeProps([{
-            attrs: Object.keys(props).reduce((initial, val) => {
-                if (isAttr(val, props[val]))
-                    initial[val] = props[val];
-                return initial;
-            }, {}),
             info: this.options.info || {},
             wrap: this.options.wrap || {},
             col: this.options.col || {},
@@ -85,7 +76,7 @@ export default {
         const form = this.options.form;
         this.rule = {
             props: {...form},
-            nativeOn: {
+            on: {
                 submit: (e) => {
                     e.preventDefault();
                 }
@@ -100,14 +91,13 @@ export default {
         extend(this.rule, {key, ref});
         extend(this.rule.props, {
             model: $handle.formData,
-            rules: $handle.validate(),
         });
     },
     render(children) {
-        if (children.length) {
-            children.push(this.makeFormBtn());
+        if (children.slotLen()) {
+            children.setSlot(undefined, () => this.makeFormBtn());
         }
-        return this.$r(this.rule, isFalse(this.options.row.show) ? children : [this.makeRow(children)]);
+        return this.$r(this.rule, isFalse(this.options.row.show) ? children.getSlots() : [this.makeRow(children)]);
     },
     makeWrap(ctx, children) {
         const rule = ctx.prop;
@@ -128,11 +118,11 @@ export default {
             key: `${uni}fi`,
             ref: ctx.wrapRef,
             type: 'formItem',
-        }]), [children, isTitle ? this.makeInfo(rule, uni) : null]);
+        }]), {default: () => children, ...(isTitle ? {label: () => this.makeInfo(rule, uni)} : {})});
         return (inline === true || isFalse(_col) || isFalse(col.show)) ? item : this.makeCol(rule, uni, [item]);
     },
     isTitle(rule) {
-        if(this.options.form.title === false) return false;
+        if (this.options.form.title === false) return false;
         const title = rule.title;
         return !((!title.title && !title.native) || isFalse(title.show))
     },
@@ -142,9 +132,8 @@ export default {
         const isTip = isTooltip(infoProp);
         const form = this.options.form;
         const children = [(titleProp.title || '') + (form.labelSuffix || form['label-suffix'] || '')];
-        const titleFn = (pop) => this.$r(mergeProps([titleProp, {
+        const titleFn = () => this.$r(mergeProps([titleProp, {
             props: titleProp,
-            slot: titleProp.slot || (pop ? (isTip ? 'default' : 'reference') : 'label'),
             key: `${uni}tit`,
             type: titleProp.type || 'span',
         }]), children);
@@ -155,13 +144,12 @@ export default {
                     type: 'i',
                     class: infoProp.icon === true ? 'el-icon-warning' : infoProp.icon,
                     key: `${uni}i`
-                }));
+                }, {}, true));
             }
             const prop = {
                 type: infoProp.type || 'popover',
                 props: {...infoProp},
-                key: `${uni}pop`,
-                slot: 'label'
+                key: `${uni}pop`
             };
 
             const field = 'content';
@@ -169,9 +157,9 @@ export default {
                 prop.props[field] = infoProp.info;
             }
 
-            return this.$r(mergeProps([infoProp, prop]), [
-                titleFn(true)
-            ])
+            return this.$r(mergeProps([infoProp, prop]), {
+                [titleProp.slot || (isTip ? 'default' : 'reference')]: () => titleFn()
+            })
         }
         return titleFn();
     },
@@ -218,7 +206,9 @@ export default {
             }, [item]);
     },
     makeResetBtn() {
-        const resetBtn = this.options.resetBtn;
+        const resetBtn = {...this.options.resetBtn};
+        const text = resetBtn.innerText;
+        delete resetBtn.innerText;
         return this.$r({
             type: 'button',
             props: resetBtn,
@@ -232,10 +222,12 @@ export default {
                 }
             },
             key: `${this.key}b2`,
-        }, [resetBtn.innerText]);
+        }, [text]);
     },
     makeSubmitBtn() {
-        const submitBtn = this.options.submitBtn;
+        const submitBtn = {...this.options.submitBtn};
+        const text = submitBtn.innerText;
+        delete submitBtn.innerText;
 
         return this.$r({
             type: 'button',
@@ -250,6 +242,6 @@ export default {
                 }
             },
             key: `${this.key}b1`,
-        }, [submitBtn.innerText]);
+        }, [text]);
     }
 }

package/src/index.js

@@ -4,9 +4,6 @@ const FormCreate = elmFormCreate();
 
 if (typeof window !== 'undefined') {
     window.formCreate = FormCreate;
-    if (window.Vue) {
-        FormCreate.install(window.Vue);
-    }
 }
 
 const maker = FormCreate.maker;

package/src/parsers/datePicker.js

@@ -1,15 +1,14 @@
 import {creatorFactory} from '@form-create/core/src/index';
 
 const DEFAULT_FORMATS = {
-    date: 'yyyy-MM-dd',
-    month: 'yyyy-MM',
-    datetime: 'yyyy-MM-dd HH:mm:ss',
-    week: 'yyyywWW',
+    date: 'YYYY-MM-DD',
+    month: 'YYYY-MM',
+    datetime: 'YYYY-MM-DD HH:mm:ss',
     timerange: 'HH:mm:ss',
-    daterange: 'yyyy-MM-dd',
-    monthrange: 'yyyy-MM',
-    datetimerange: 'yyyy-MM-dd HH:mm:ss',
-    year: 'yyyy'
+    daterange: 'YYYY-MM-DD',
+    monthrange: 'YYYY-MM',
+    datetimerange: 'YYYY-MM-DD HH:mm:ss',
+    year: 'YYYY'
 };
 
 const name = 'datePicker';

package/src/parsers/row.js

@@ -1,8 +1,10 @@
 export default {
     name: 'FcRow',
     render(_, ctx) {
-        return ctx.vNode.col({props: {span: 24}}, [
-            ctx.vNode.row(ctx.prop, _)
-        ])
+        return ctx.vNode.col({props: {span: 24}}, {
+            default:()=>[
+                ctx.vNode.row(ctx.prop, _)
+            ]
+        })
     }
-}
+}