@form-create/element-ui 2.5.17 → 3.0.1

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

@@ -25,8 +25,8 @@ function install(FormCreate) {
 
 export default function elmFormCreate() {
     return FormCreateFactory({
-        ui: `${process.env.UI}`,
-        version: `${process.env.VERSION}`,
+        ui:'process.env.UI',
+        version: 'process.env.VERSION',
         manager,
         extendApi,
         install,

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,30 @@ function tidyBool(opt, name) {
 }
 
 export default {
-    validate(call) {
-        this.form().validate(call);
+    validate() {
+        const form = this.form();
+        if (form) {
+            return form.validate();
+        } else {
+            return new Promise(v => v());
+        }
     },
-    validateField(field, call) {
-        this.form().validateField(field, call);
+    validateField(field) {
+        return new Promise((resolve, reject) => {
+            const form = this.form();
+            if (form) {
+                form.validateField(field, (res) => {
+                    res ? reject(res) : resolve(null);
+                });
+            } else {
+                resolve();
+            }
+        });
     },
     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 +64,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 +86,7 @@ export default {
         const form = this.options.form;
         this.rule = {
             props: {...form},
-            nativeOn: {
+            on: {
                 submit: (e) => {
                     e.preventDefault();
                 }
@@ -100,14 +101,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,7 +128,7 @@ 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) {
@@ -147,25 +147,29 @@ export default {
             const prop = {
                 type: infoProp.type || 'popover',
                 props: {...infoProp},
-                key: `${uni}pop`,
-                slot: 'label'
+                key: `${uni}pop`
             };
+
+            delete prop.props.icon;
+            delete prop.props.show;
+            delete prop.props.info;
+
             const field = 'content';
             if (infoProp.info && !hasProperty(prop.props, field)) {
                 prop.props[field] = infoProp.info;
             }
-            children[infoProp.align !== 'left' ? 'unshift' : 'push'](this.$r(mergeProps([infoProp, prop]), [
-                this.$r({
+
+            children[infoProp.align !== 'left' ? 'unshift' : 'push'](this.$r(mergeProps([infoProp, prop]), {
+                [titleProp.slot || (isTip ? 'default' : 'reference')]: () => this.$r({
                     type: 'i',
-                    slot: isTip ? 'default' : 'reference',
                     class: infoProp.icon === true ? 'el-icon-warning' : infoProp.icon,
                     key: `${uni}i`
-                })
-            ]));
+                }, {}, true)
+            }));
         }
+
         return this.$r(mergeProps([titleProp, {
             props: titleProp,
-            slot: titleProp.slot || 'label',
             key: `${uni}tit`,
             type: titleProp.type || 'span',
         }]), children);
@@ -213,7 +217,9 @@ export default {
             }, [item]);
     },
     makeResetBtn() {
-        const resetBtn = this.options.resetBtn;
+        const resetBtn = {...this.options.resetBtn};
+        const innerText = resetBtn.innerText;
+        delete resetBtn.innerText;
         return this.$r({
             type: 'button',
             props: resetBtn,
@@ -227,11 +233,12 @@ export default {
                 }
             },
             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;
         return this.$r({
             type: 'button',
             props: submitBtn,
@@ -245,6 +252,6 @@ export default {
                 }
             },
             key: `${this.key}b1`,
-        }, [submitBtn.innerText]);
+        }, [innerText]);
     }
 }

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, _)
+            ]
+        })
     }
-}
+}

package/src/style/index.css

@@ -7,5 +7,5 @@
 }
 
 .form-create{
-    transform: rotateZ(0);
+    width: 100%;
 }

package/types/config.d.ts

@@ -1,18 +1,43 @@
-import {Button, Col, Popover, Row, Tooltip} from "element-ui";
 import {FormData, VNodeData} from "@form-create/core";
-import {ElementUIComponentSize} from "element-ui/types/component";
-import {FormItemLabelPosition, ValidateCallback, ValidateFieldCallback} from "element-ui/types/form";
+import {ButtonProps, ValidateFieldCallback} from "element-plus";
 import {Api} from "./index";
 
+type SizeObject = {
+    span: number
+    offset: number
+}
+
+type ComponentSize = 'large' | 'default' | 'small'
+
+type ColProps = {
+    tag: string | 'div';
+    span: number | 24;
+    offset: number | 0;
+    pull: number | 0;
+    push: number | 0;
+    xs: number | SizeObject;
+    sm: number | SizeObject;
+    md: number | SizeObject;
+    lg: number | SizeObject;
+    xl: number | SizeObject;
+}
+
+type RowProps = {
+    tag: string | 'div',
+    gutter: number | 0,
+    justify: string | 'start',
+    align: string | 'top',
+}
+
 export interface OptionAttrs {
-    col?: Boolean | Col & {
+    col?: Boolean | ColProps & {
         labelWidth?: number | string;
         show?: Boolean;
     };
-    row?: Boolean | Row & {
+    row?: Boolean | RowProps & {
         show?: Boolean;
     };
-    info?: Boolean | (Tooltip | Popover) & VNodeData & {
+    info?: Boolean | VNodeData & {
         show?: Boolean;
         native?: Boolean;
         icon?: string;
@@ -25,31 +50,31 @@ export interface OptionAttrs {
         error?: string
         showMessage?: boolean
         inlineMessage?: boolean
-        size?: ElementUIComponentSize
+        size?: ComponentSize
         show?: Boolean;
     };
     form?: {
         inline?: boolean
         disabled?: boolean
-        labelPosition?: FormItemLabelPosition
+        labelPosition?: string
         labelWidth?: string
         labelSuffix?: string
         showMessage?: boolean
         inlineMessage?: boolean
         statusIcon?: boolean
         validateOnRuleChange?: boolean
-        size?: ElementUIComponentSize
+        size?: ComponentSize
         className?: any;
         col?: Boolean;
     };
 
-    submitBtn?: Boolean | Button & {
+    submitBtn?: Boolean | ButtonProps & {
         click?: Function;
         innerText?: string;
         show?: Boolean;
     };
 
-    resetBtn?: Boolean | Button & {
+    resetBtn?: Boolean | ButtonProps & {
         click?: Function;
         innerText?: string;
         show?: Boolean;
@@ -102,18 +127,18 @@ export interface ApiAttrs {
         show(show: boolean): void;
     }
 
-    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;
 
     clearSubValidateState(fields?: string | string[]): void;
 
-    validate(callback?: ValidateCallback): void;
+    validate(callback?: (callback?: (boolean: boolean, object: Object) => void) => void): Promise<any>;
 
-    validateField(field: string, callback?: ValidateFieldCallback): void;
+    validateField(field: string, callback?: ValidateFieldCallback): Promise<any>;
 
-    submitBtnProps(props: Button): void;
+    submitBtnProps(props: ButtonProps): void;
 
-    resetBtnProps(props: Button): void;
+    resetBtnProps(props: ButtonProps): void;
 
 }

package/types/index.d.ts

@@ -1,5 +1,6 @@
 import {
     FormCreate,
+    FormCreateProps as $FormCreateProps,
     FormRule as $FormRule,
     Options as $Options,
     Rule as $Rule,
@@ -7,16 +8,11 @@ import {
     Control as $Control,
     Api as $Api,
     Effect as $Effect,
-    Parser as $Parser
+    Parser as $Parser,
 } from "@form-create/core";
 import Maker from "./maker";
 import {ApiAttrs, CreatorAttrs, OptionAttrs, RuleAttrs} from "./config";
-
-declare module 'vue/types/vue' {
-    interface Vue {
-        $formCreate: FormCreate<Maker, OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs>;
-    }
-}
+import {ExtractPropTypes} from "vue";
 
 declare const formCreate: FormCreate<Maker, OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs>;
 export default formCreate;
@@ -28,4 +24,5 @@ export type Effect = $Effect<OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs>
 export type Creator = $Creator<OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs>
 export type Control = $Control<OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs>
 export type Api = $Api<OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs>
+export type FormCreateProps = ExtractPropTypes<$FormCreateProps<OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs>>
 export type Parser = $Parser