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

package/src/core/maker.js

@@ -20,8 +20,8 @@ function useAlias(maker) {
 function useSelect(maker) {
     const select = 'select';
     const multiple = 'multiple';
-    maker['selectMultiple'] = creatorFactory(select, {[multiple]:true});
-    maker['selectOne'] = creatorFactory(select, {[multiple]:false});
+    maker['selectMultiple'] = creatorFactory(select, {[multiple]: true});
+    maker['selectOne'] = creatorFactory(select, {[multiple]: false});
 }
 
 function useTree(maker) {
@@ -29,7 +29,7 @@ function useTree(maker) {
     const types = {'treeSelected': 'selected', 'treeChecked': 'checked'};
 
     Object.keys(types).reduce((m, key) => {
-        m[key] = creatorFactory(name, {type:types[key]});
+        m[key] = creatorFactory(name, {type: types[key]});
         return m;
     }, maker);
 }

package/src/core/manager.js

@@ -27,13 +27,23 @@ function tidyBool(opt, name) {
 
 export default {
     validate() {
-        return this.form().validate();
+        const form = this.form();
+        if (form) {
+            return form.validate();
+        } else {
+            return new Promise(v => v());
+        }
     },
     validateField(field) {
         return new Promise((resolve, reject) => {
-            this.form().validateField(field, (res) => {
-                res ? reject(res) : resolve(null);
-            });
+            const form = this.form();
+            if (form) {
+                form.validateField(field, (res) => {
+                    res ? reject(res) : resolve(null);
+                });
+            } else {
+                resolve();
+            }
         });
     },
     clearValidateState(ctx) {
@@ -62,7 +72,7 @@ export default {
             info: {
                 trigger: 'hover',
                 placement: 'top-start',
-                icon: 'el-icon-warning',
+                icon: true,
             },
             title: {},
             col: {span: 24},
@@ -132,36 +142,41 @@ export default {
         const isTip = isTooltip(infoProp);
         const form = this.options.form;
         const children = [(titleProp.title || '') + (form.labelSuffix || form['label-suffix'] || '')];
-        const titleFn = () => this.$r(mergeProps([titleProp, {
-            props: titleProp,
-            key: `${uni}tit`,
-            type: titleProp.type || 'span',
-        }]), children);
 
-        if (!isFalse(infoProp.show) && (infoProp.info || infoProp.native)) {
-            if (infoProp.icon !== false) {
-                children[infoProp.align !== 'left' ? 'unshift' : 'push'](this.$r({
-                    type: 'i',
-                    class: infoProp.icon === true ? 'el-icon-warning' : infoProp.icon,
-                    key: `${uni}i`
-                }, {}, true));
-            }
+        if (!isFalse(infoProp.show) && (infoProp.info || infoProp.native) && !isFalse(infoProp.icon)) {
             const prop = {
                 type: infoProp.type || 'popover',
                 props: {...infoProp},
                 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;
             }
 
-            return this.$r(mergeProps([infoProp, prop]), {
-                [titleProp.slot || (isTip ? 'default' : 'reference')]: () => titleFn()
-            })
+            children[infoProp.align !== 'left' ? 'unshift' : 'push'](this.$r(mergeProps([infoProp, prop]), {
+                [titleProp.slot || (isTip ? 'default' : 'reference')]: () => this.$r({
+                    type: 'ElIcon',
+                    style: 'top:2px',
+                    key: `${uni}i`
+                }, {
+                    default: () => this.$r({
+                        type: infoProp.icon === true ? 'warning' : infoProp.icon
+                    })
+                }, true)
+            }));
         }
-        return titleFn();
+
+        return this.$r(mergeProps([titleProp, {
+            props: titleProp,
+            key: `${uni}tit`,
+            type: titleProp.type || 'span',
+        }]), children);
     },
     makeCol(rule, uni, children) {
         const col = rule.col;
@@ -205,9 +220,10 @@ export default {
                 key: `${this.key}fc`
             }, [item]);
     },
+
     makeResetBtn() {
         const resetBtn = {...this.options.resetBtn};
-        const text = resetBtn.innerText;
+        const innerText = resetBtn.innerText;
         delete resetBtn.innerText;
         return this.$r({
             type: 'button',
@@ -222,13 +238,12 @@ export default {
                 }
             },
             key: `${this.key}b2`,
-        }, [text]);
+        }, [innerText]);
     },
     makeSubmitBtn() {
         const submitBtn = {...this.options.submitBtn};
-        const text = submitBtn.innerText;
+        const innerText = submitBtn.innerText;
         delete submitBtn.innerText;
-
         return this.$r({
             type: 'button',
             props: submitBtn,
@@ -242,6 +257,6 @@ export default {
                 }
             },
             key: `${this.key}b1`,
-        }, [text]);
+        }, [innerText]);
     }
 }

package/src/style/index.css

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

package/types/config.d.ts

@@ -0,0 +1,144 @@
+import {FormData, VNodeData} from "@form-create/core";
+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 | ColProps & {
+        labelWidth?: number | string;
+        show?: Boolean;
+    };
+    row?: Boolean | RowProps & {
+        show?: Boolean;
+    };
+    info?: Boolean | VNodeData & {
+        show?: Boolean;
+        native?: Boolean;
+        icon?: string;
+        align?: 'left' | 'right';
+        info?: string;
+    };
+    wrap?: Boolean | VNodeData & {
+        labelWidth?: string
+        required?: boolean
+        error?: string
+        showMessage?: boolean
+        inlineMessage?: boolean
+        size?: ComponentSize
+        show?: Boolean;
+    };
+    form?: {
+        inline?: boolean
+        disabled?: boolean
+        labelPosition?: string
+        labelWidth?: string
+        labelSuffix?: string
+        showMessage?: boolean
+        inlineMessage?: boolean
+        statusIcon?: boolean
+        validateOnRuleChange?: boolean
+        size?: ComponentSize
+        className?: any;
+        col?: Boolean;
+    };
+
+    submitBtn?: Boolean | ButtonProps & {
+        click?: Function;
+        innerText?: string;
+        show?: Boolean;
+    };
+
+    resetBtn?: Boolean | ButtonProps & {
+        click?: Function;
+        innerText?: string;
+        show?: Boolean;
+    };
+
+}
+
+declare const optionAttrs: OptionAttrs & {
+    title?: Boolean | VNodeData & {
+        show?: Boolean;
+        native?: Boolean;
+        title?: string;
+    };
+};
+
+interface children {
+    children?: VNodeData[]
+}
+
+export interface CreatorAttrs {
+    col(props: typeof optionAttrs.col): this;
+
+    wrap(props: typeof optionAttrs.wrap): this;
+
+    title(props: string | typeof optionAttrs.title & children): this;
+
+    info(props: string | typeof optionAttrs.info & children): this;
+
+    className(prop: string): this;
+
+}
+
+export interface RuleAttrs {
+    col?: typeof optionAttrs.col;
+    wrap?: typeof optionAttrs.wrap;
+    title?: string | typeof optionAttrs.title & children;
+    info?: string | typeof optionAttrs.info & children;
+    className?: string;
+}
+
+export interface ApiAttrs {
+    btn: {
+        loading(loading: boolean): void;
+        disabled(disabled: boolean): void;
+        show(show: boolean): void;
+    }
+    resetBtn: {
+        loading(loading: boolean): void;
+        disabled(disabled: boolean): void;
+        show(show: boolean): 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?: (callback?: (boolean: boolean, object: Object) => void) => void): Promise<any>;
+
+    validateField(field: string, callback?: ValidateFieldCallback): Promise<any>;
+
+    submitBtnProps(props: ButtonProps): void;
+
+    resetBtnProps(props: ButtonProps): void;
+
+}

package/types/index.d.ts

@@ -0,0 +1,28 @@
+import {
+    FormCreate,
+    FormCreateProps as $FormCreateProps,
+    FormRule as $FormRule,
+    Options as $Options,
+    Rule as $Rule,
+    Creator as $Creator,
+    Control as $Control,
+    Api as $Api,
+    Effect as $Effect,
+    Parser as $Parser,
+} from "@form-create/core";
+import Maker from "./maker";
+import {ApiAttrs, CreatorAttrs, OptionAttrs, RuleAttrs} from "./config";
+import {ExtractPropTypes} from "vue";
+
+declare const formCreate: FormCreate<Maker, OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs>;
+export default formCreate;
+export declare const maker: typeof formCreate.maker;
+export type FormRule = $FormRule<OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs>
+export type Options = $Options<OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs>
+export type Rule = $Rule<OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs>
+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

package/types/maker.d.ts

@@ -0,0 +1,14 @@
+import {CreatorHelper} from "@form-create/core";
+import {CreatorAttrs, OptionAttrs, RuleAttrs, ApiAttrs} from "./config";
+
+declare const makerFactory: CreatorHelper<OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs>
+
+declare enum MakerName {
+    "datePicker", "year", "month", "date", "dates", "week", "datetime", "datetimeRange", "dateRange", "monthRange", "hidden", "input", "password", "url", "email", "text", "textarea", "idate", "slider", "sliderRange", "timePicker", "time", "timeRange", "group", "tree", "switch", "upload", "autoComplete", "checkbox", "cascader", "colorPicker", "frame", "inputNumber", "radio", "rate", "select", "auto", "number", "color", "selectMultiple", "selectOne", "treeSelected", "treeChecked", "image", "file", "uploadFileOne", "uploadImageOne", "uploadImage", "uploadFile", "frameInputs", "frameFiles", "frameImages", "frameInputOne", "frameFileOne", "frameImageOne", "frameInput", "frameFile", "frameImage"
+}
+
+type Maker = {
+    [name in keyof typeof MakerName]: typeof makerFactory;
+}
+
+export default Maker;