@form-create/element-ui 2.6.3 → 2.7.0

package/src/core/api.js

@@ -11,7 +11,7 @@ function tidyBtnProp(btn, def) {
 }
 
 export default function extendApi(api, h) {
-    extend(api, {
+    return {
         formEl() {
             return h.$manager.form();
         },
@@ -32,21 +32,19 @@ export default function extendApi(api, h) {
                     callback && callback(true);
                 }).catch((e) => {
                     reject(e);
-                    callback && callback(false, e);
+                    callback && callback(e);
                     h.vm.$emit('validate-fail', e, {api});
                 })
             });
         },
-        validateField: (field, callback) => {
+        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().catch(() => {
-                        return Promise.reject('子表单验证未通过');
-                    }));
+                    all.push(v.validate());
                 })
                 Promise.all(all).then(() => {
                     resolve(null);
@@ -116,21 +114,18 @@ 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));
-                }
-            }).catch(e=>{});
+                    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)
+                })
+            });
         },
-    });
-
-    return api;
+    };
 }

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 required from './provider';
 
 function install(FormCreate) {
     FormCreate.componentAlias(alias);
@@ -14,6 +15,8 @@ function install(FormCreate) {
         FormCreate.component(component.name, component);
     });
 
+    FormCreate.register(required);
+
     parsers.forEach((parser) => {
         FormCreate.parser(parser);
     });

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])) {
@@ -31,30 +25,37 @@ function tidyBool(opt, name) {
     }
 }
 
+function tidyRule(rule) {
+    const _rule = {...rule};
+    delete _rule.children;
+    return _rule;
+}
+
 export default {
     validate() {
         const form = this.form();
         if (form) {
             return form.validate();
+        } else {
+            return new Promise(v => v());
         }
-        return new Promise(v => v());
     },
     validateField(field) {
-        const form = this.form();
-        if (form) {
-            return new Promise((resolve, reject) => {
-                form.validateField(field, e => {
-                    e ? reject(e) : resolve(null);
+        return new Promise((resolve, reject) => {
+            const form = this.form();
+            if (form) {
+                form.validateField(field, (res, err) => {
+                    err ? reject(err) : resolve(res);
                 });
-            })
-        }
-        return new Promise(v => v());
+            } else {
+                resolve();
+            }
+        });
     },
     clearValidateState(ctx) {
         const fItem = this.vm.$refs[ctx.wrapRef];
         if (fItem) {
-            fItem.validateMessage = '';
-            fItem.validateState = '';
+            fItem.clearValidate();
         }
     },
     tidyOptions(options) {
@@ -69,18 +70,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 || {},
-            title: this.options.title || {},
-        }, ctx.prop], {
+        const def = {
             info: {
                 trigger: 'hover',
                 placement: 'top-start',
@@ -89,7 +79,10 @@ export default {
             title: {},
             col: {span: 24},
             wrap: {},
-        }, {normal: ['title', 'info', 'col', 'wrap']});
+        };
+        ['info', 'wrap', 'col', 'title'].forEach(name => {
+            ctx.prop[name] = mergeProps([this.options[name] || {}, ctx.prop[name] || {}], def[name]);
+        });
     },
     getDefaultOptions() {
         return getConfig();
@@ -103,7 +96,7 @@ export default {
                     e.preventDefault();
                 }
             },
-            class: [form.className, form.class, 'form-create'],
+            class: [form.className, form.class, 'form-create', this.$handle.preview ? 'is-preview' : ''],
             style: form.style,
             type: 'form',
         };
@@ -113,35 +106,35 @@ 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() && !this.$handle.preview) {
+            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;
         const uni = `${this.key}${ctx.key}`;
         const col = rule.col;
-        const isTitle = this.isTitle(rule);
+        const isTitle = this.isTitle(rule) && rule.wrap.title !== false;
         const labelWidth = (!col.labelWidth && !isTitle) ? 0 : col.labelWidth;
         const {inline, col: _col} = this.rule.props;
+        delete rule.wrap.title;
         const item = isFalse(rule.wrap.show) ? children : this.$r(mergeProps([rule.wrap, {
             props: {
                 labelWidth: labelWidth === void 0 ? labelWidth : toString(labelWidth),
                 label: isTitle ? rule.title.title : undefined,
-                ...(rule.wrap || {}),
+                ...tidyRule(rule.wrap || {}),
                 prop: ctx.id,
                 rules: ctx.injectValidate(),
             },
-            class: rule.className,
+            class: this.$render.mergeClass(rule.className, 'fc-form-item'),
             key: `${uni}fi`,
             ref: ctx.wrapRef,
             type: 'formItem',
-        }]), [children, isTitle ? this.makeInfo(rule, uni, ctx) : null]);
+        }]), {default: () => children, ...(isTitle ? {label: () => this.makeInfo(rule, uni, ctx)} : {})});
         return (inline === true || isFalse(_col) || isFalse(col.show)) ? item : this.makeCol(rule, uni, [item]);
     },
     isTitle(rule) {
@@ -150,23 +143,34 @@ export default {
         return !((!title.title && !title.native) || isFalse(title.show))
     },
     makeInfo(rule, uni, ctx) {
-        const titleProp = rule.title;
-        const infoProp = rule.info;
+        const titleProp = {...rule.title};
+        const infoProp = {...rule.info};
         const isTip = isTooltip(infoProp);
         const form = this.options.form;
         const titleSlot = this.getSlot('title');
-        const children = [titleSlot ? titleSlot({title: titleProp.title || '', rule: ctx.rule, options: this.options}) : ((titleProp.title || '') + (form.labelSuffix || form['label-suffix'] || ''))];
+        const children = [titleSlot ? titleSlot({
+            title: ctx.refRule.__$title.value,
+            rule: ctx.rule,
+            options: this.options
+        }) : ((ctx.refRule.__$title.value) + (form.labelSuffix || form['label-suffix'] || ''))];
 
         if (!isFalse(infoProp.show) && (infoProp.info || infoProp.native) && !isFalse(infoProp.icon)) {
             const prop = {
                 type: infoProp.type || 'popover',
-                props: {...infoProp},
-                key: `${uni}pop`,
-                slot: 'label'
+                slot: 'label',
+                props: tidyRule(infoProp),
+                key: `${uni}pop`
             };
+
+            delete prop.props.icon;
+            delete prop.props.show;
+            delete prop.props.info;
+            delete prop.props.align;
+            delete prop.props.native;
+
             const field = 'content';
             if (infoProp.info && !hasProperty(prop.props, field)) {
-                prop.props[field] = infoProp.info;
+                prop.props[field] = ctx.refRule.__$info.value;
             }
             children[infoProp.align !== 'left' ? 'unshift' : 'push'](this.$r(mergeProps([infoProp, prop]), [
                 this.$r({
@@ -177,17 +181,24 @@ export default {
                 })
             ]));
         }
-        return this.$r(mergeProps([titleProp, {
-            props: titleProp,
-            slot: titleProp.slot || 'label',
+        const _prop = mergeProps([titleProp, {
+            props: tidyRule(titleProp),
             key: `${uni}tit`,
+            class: 'fc-form-title',
+            slot: titleProp.slot || 'label',
             type: titleProp.type || 'span',
-        }]), children);
+        }]);
+
+        delete _prop.props.show;
+        delete _prop.props.title;
+        delete _prop.props.native;
+
+        return this.$r(_prop, children);
     },
     makeCol(rule, uni, children) {
         const col = rule.col;
         return this.$r({
-            class: col.class,
+            class: this.$render.mergeClass(col.class, 'fc-form-col'),
             type: 'col',
             props: col || {span: 24},
             key: `${uni}col`
@@ -198,7 +209,7 @@ export default {
         return this.$r({
             type: 'row',
             props: row,
-            class: row.class,
+            class: this.$render.mergeClass(row.class, 'fc-form-row'),
             key: `${this.key}row`
         }, children)
     },
@@ -215,6 +226,7 @@ export default {
         }
         const item = this.$r({
             type: 'formItem',
+            class: 'fc-form-item',
             key: `${this.key}fb`
         }, vn);
 
@@ -222,43 +234,57 @@ export default {
             ? item
             : this.$r({
                 type: 'col',
+                class: 'fc-form-col fc-form-footer',
                 props: {span: 24},
                 key: `${this.key}fc`
             }, [item]);
     },
+
     makeResetBtn() {
-        const resetBtn = this.options.resetBtn;
+        const resetBtn = {...this.options.resetBtn};
+        const innerText = resetBtn.innerText;
+        delete resetBtn.innerText;
+        delete resetBtn.click;
+        delete resetBtn.col;
+        delete resetBtn.show;
         return this.$r({
             type: 'button',
             props: resetBtn,
+            class: 'fc-reset-btn',
             style: {width: resetBtn.width},
             on: {
                 click: () => {
                     const fApi = this.$handle.api;
-                    resetBtn.click
-                        ? resetBtn.click(fApi)
+                    this.options.resetBtn.click
+                        ? this.options.resetBtn.click(fApi)
                         : fApi.resetFields();
                 }
             },
             key: `${this.key}b2`,
-        }, [resetBtn.innerText]);
+        }, [innerText]);
     },
     makeSubmitBtn() {
-        const submitBtn = this.options.submitBtn;
-
+        const submitBtn = {...this.options.submitBtn};
+        const innerText = submitBtn.innerText;
+        delete submitBtn.innerText;
+        delete submitBtn.click;
+        delete submitBtn.col;
+        delete submitBtn.show;
         return this.$r({
             type: 'button',
             props: submitBtn,
+            class: 'fc-submit-btn',
             style: {width: submitBtn.width},
             on: {
                 click: () => {
                     const fApi = this.$handle.api;
-                    submitBtn.click
-                        ? submitBtn.click(fApi)
-                        : fApi.submit();
+                    this.options.submitBtn.click
+                        ? this.options.submitBtn.click(fApi)
+                        : fApi.submit().catch(() => {
+                        });
                 }
             },
             key: `${this.key}b1`,
-        }, [submitBtn.innerText]);
+        }, [innerText]);
     }
 }

package/src/core/provider.js

@@ -0,0 +1,52 @@
+import is from '@form-create/utils/lib/type';
+
+const required = {
+    name: 'required',
+    load(inject, rule, api) {
+        const val = parseVal(inject.getValue());
+        if (val.required === false) {
+            inject.clearProp();
+            api.clearValidateState([rule.field]);
+        } else {
+            const validate = {
+                required: true,
+                validator(_, v, call) {
+                    is.empty(v) ? call(validate.message) : call();
+                },
+                ...val,
+            };
+            if (!validate.message) {
+                validate.message = rule.__fc__.refRule.__$title.value + (api.getLocale() === 'en' ? ' is required' : '不能为空');
+            } else {
+                const match = validate.message.match(/^\{\{\s*\$t\.(.+)\s*\}\}$/);
+                if (match) {
+                    validate.message = api.t(match[1], {title: rule.__fc__.refRule.__$title.value});
+                }
+            }
+            inject.getProp().validate = [validate];
+        }
+        api.sync(rule);
+    },
+    watch(...args) {
+        required.load(...args);
+    }
+}
+
+function parseVal(val) {
+    if (is.Boolean(val)) {
+        return {required: val}
+    } else if (is.String(val)) {
+        return {message: val};
+    } else if (is.Undef(val)) {
+        return {required: false};
+    } else if (is.Function(val)) {
+        return {validator: val};
+    } else if (!is.Object(val)) {
+        return {};
+    } else {
+        return val;
+    }
+}
+
+
+export default required

package/src/style/index.css

@@ -2,6 +2,62 @@
     margin-bottom: 22px;
 }
 
-.form-create .form-create .el-form-item .el-form-item {
-    margin-bottom: 0px;
+.form-create {
+    width: 100%;
+}
+
+.fc-form-row {
+    box-sizing: border-box;
+    display: flex;
+    flex-wrap: wrap;
+    position: relative;
+}
+
+.form-create.is-preview .fc-clock, .form-create .fc-none, .form-create.is-preview .el-form-item.is-required > .el-form-item__label-wrap > .el-form-item__label:before, .form-create.is-preview .el-form-item.is-required > .el-form-item__label:before {
+    display: none !important;
+}
+
+.fc-wrap-right > .el-form-item__label {
+    display: flex;
+    justify-content: flex-end;
+}
+
+.fc-wrap-left > .el-form-item__label {
+    display: flex;
+    justify-content: flex-start;
+}
+
+.fc-wrap-top.el-form-item {
+    display: block;
+}
+
+.fc-wrap-top.el-form-item > .el-form-item__label {
+    display: block;
+    height: auto;
+    line-height: 22px;
+    margin-bottom: 8px;
+    text-align: left;
+}
+
+.fc-wrap-top.el-form-item > .el-form-item__content {
+    margin-left: 0 !important;
+}
+
+.el-form--large .fc-wrap-top.el-form-item > .el-form-item__label {
+    line-height: 22px;
+    margin-bottom: 12px;
+}
+
+.el-form--default .fc-wrap-top.el-form-item > .el-form-item__label {
+    line-height: 22px;
+    margin-bottom: 8px;
+}
+
+.el-form--small .fc-wrap-top.el-form-item > .el-form-item__label {
+    line-height: 20px;
+    margin-bottom: 4px;
+}
+
+.fc-form-footer {
+    margin-top: 12px;
 }

package/types/config.d.ts

@@ -103,7 +103,7 @@ export interface ApiAttrs {
 
     wrapEl(id: string): undefined | ElFormItem;
 
-    submit(success: (formData: FormData, api: Api) => void, fail: (api: Api) => void): void;
+    submit(success: (formData: FormData, $f: Api) => void, fail: ($f: Api) => void): Promise<any>;
 
     clearValidateState(fields?: string | string[], clearSub?: Boolean): void;