@form-create/iview 2.5.9

package/package.json

@@ -0,0 +1,69 @@
+{
+    "name": "@form-create/iview",
+    "version": "2.5.9",
+    "description": "iview动态表单|form-create is a form generation component that can generate dynamic rendering, data collection, verification and submission functions through JSON. Supports 3 UI frameworks, and supports the generation of any Vue components. Built-in 20 kinds of commonly used form components and custom components, no matter how complex forms can be easily handled.",
+    "main": "./dist/form-create.min.js",
+    "module": "./dist/form-create.min.js",
+    "unpkg": "./dist/form-create.min.js",
+    "jsdelivr": "./dist/form-create.min.js",
+    "typings": "./types/index.d.ts",
+    "scripts": {
+        "clean": "rimraf dist/",
+        "dev:iview": "vue-cli-service serve",
+        "bili": "cross-env UI_LIB=iview bili",
+        "build": "npm-run-all clean bili"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/xaboy/form-create.git"
+    },
+    "keywords": [
+        "动态表单",
+        "@form-create",
+        "form-builder",
+        "form",
+        "components",
+        "vue.js",
+        "iview",
+        "json-form",
+        "dynamic-form"
+    ],
+    "files": [
+        "README.md",
+        "package.json",
+        "LICENSE",
+        "src",
+        "types",
+        "dist"
+    ],
+    "author": "xaboy",
+    "license": "MIT",
+    "bugs": {
+        "url": "https://github.com/xaboy/form-create/issues"
+    },
+    "homepage": "http://www.form-create.com",
+    "dependencies": {
+        "@form-create/component-ivu-checkbox": "^2.5.9",
+        "@form-create/component-ivu-frame": "^2.5.9",
+        "@form-create/component-ivu-group": "^2.5.9",
+        "@form-create/component-ivu-radio": "^2.5.9",
+        "@form-create/component-ivu-select": "^2.5.9",
+        "@form-create/component-ivu-tree": "^2.5.9",
+        "@form-create/component-ivu-upload": "^2.5.9",
+        "@form-create/component-subform": "^2.5.9",
+        "@form-create/core": "^2.5.9",
+        "@form-create/utils": "^2.5.9"
+    },
+    "publishConfig": {
+        "access": "public"
+    },
+    "devDependencies": {
+        "@form-create/component-wangeditor": "^2.5.5",
+        "@vue/cli-plugin-babel": "^4.5.9",
+        "@vue/cli-service": "^4.5.3",
+        "@vue/composition-api": "^1.0.0-beta.22",
+        "iview": "^3.3.3",
+        "v-jsoneditor": "^1.4.2"
+    },
+    "gitHead": "b4e39524136df76ad16c92a3697fdfe94ac296a7"
+}

package/src/components/index.js

@@ -0,0 +1,19 @@
+import checkbox from '@form-create/component-ivu-checkbox/src/index';
+import frame from '@form-create/component-ivu-frame/src/index';
+import radio from '@form-create/component-ivu-radio/src/index';
+import select from '@form-create/component-ivu-select/src/index';
+import tree from '@form-create/component-ivu-tree/src/index';
+import upload from '@form-create/component-ivu-upload/src/index';
+import group from '@form-create/component-ivu-group/src/index';
+import subForm from '@form-create/component-subform/src/index';
+
+export default [
+    checkbox,
+    radio,
+    select,
+    tree,
+    subForm,
+    frame,
+    upload,
+    group
+];

package/src/core/alias.js

@@ -0,0 +1,27 @@
+export default {
+    button: 'iButton',
+    icon: 'Icon',
+    slider: 'Slider',
+    rate: 'Rate',
+    upload: 'fcUpload',
+    cascader: 'Cascader',
+    colorPicker: 'ColorPicker',
+    timePicker: 'TimePicker',
+    datePicker: 'DatePicker',
+    'switch': 'iSwitch',
+    select: 'fcSelect',
+    checkbox: 'fcCheckbox',
+    radio: 'fcRadio',
+    inputNumber: 'InputNumber',
+    input: 'iInput',
+    formItem: 'FormItem',
+    form: 'iForm',
+    frame: 'fcFrame',
+    col: 'iCol',
+    row: 'row',
+    tree: 'fcTree',
+    autoComplete: 'AutoComplete',
+    group: 'fcGroup',
+    subForm: 'fcSubForm',
+    object: 'fcSubForm',
+}

package/src/core/api.js

@@ -0,0 +1,159 @@
+import extend from '@form-create/utils/lib/extend';
+import is from '@form-create/utils/lib/type';
+import {invoke} from '@form-create/core/src/frame/util';
+import toArray from '@form-create/utils/lib/toarray';
+
+function tidyBtnProp(btn, def) {
+    if (is.Boolean(btn))
+        btn = {show: btn};
+    else if (!is.Undef(btn) && !is.Object(btn)) btn = {show: def};
+    return btn;
+}
+
+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();
+            }
+        },
+        validateField: (field, callback) => {
+            if (!h.fieldCtx[field])
+                return;
+            const sub = h.subForm[field];
+            let len = 0;
+            let flag;
+            const validate = () => {
+                h.$manager.validateField(field, (...args) => {
+                    if (args[0]) {
+                        flag = args;
+                    } else if (flag) {
+                        return callback && callback('子表单验证未通过');
+                    }
+                    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))
+            });
+
+            if (!len) {
+                validate();
+            }
+        },
+        clearValidateState(fields, clearSub = true) {
+            api.helper.tidyFields(fields).forEach(field => {
+                if (clearSub) this.clearSubValidateState(field);
+                const ctx = h.fieldCtx[field];
+                if (!ctx) return;
+                h.$manager.clearValidateState(ctx);
+            });
+        },
+        clearSubValidateState(fields) {
+            api.helper.tidyFields(fields).forEach(field => {
+                const subForm = h.subForm[field];
+                if (!subForm) return;
+                if (Array.isArray(subForm)) {
+                    subForm.forEach(form => {
+                        form.clearValidateState();
+                    })
+                } else if (subForm) {
+                    subForm.clearValidateState();
+                }
+            })
+        },
+        btn: {
+            loading: (loading = true) => {
+                api.submitBtnProps({loading: !!loading});
+            },
+            disabled: (disabled = true) => {
+                api.submitBtnProps({disabled: !!disabled});
+            },
+            show: (isShow = true) => {
+                api.submitBtnProps({show: !!isShow});
+            }
+        },
+        resetBtn: {
+            loading: (loading = true) => {
+                api.resetBtnProps({loading: !!loading});
+            },
+            disabled: (disabled = true) => {
+                api.resetBtnProps({disabled: !!disabled});
+            },
+            show: (isShow = true) => {
+                api.resetBtnProps({show: !!isShow});
+            }
+        },
+        submitBtnProps: (props = {}) => {
+            let btn = tidyBtnProp(h.options.submitBtn, true);
+            extend(btn, props);
+            h.options.submitBtn = btn;
+            api.refreshOptions();
+        },
+        resetBtnProps: (props = {}) => {
+            let btn = tidyBtnProp(h.options.resetBtn, false);
+            extend(btn, props);
+            h.options.resetBtn = btn;
+            api.refreshOptions();
+        },
+        submit(successFn, failFn) {
+            api.validate((valid) => {
+                if (valid) {
+                    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));
+                }
+            });
+        },
+    });
+
+    return api;
+}

package/src/core/config.js

@@ -0,0 +1,48 @@
+export const iviewConfig = {
+    resetBtnType: 'default',
+    resetBtnIcon: 'md-refresh',
+    infoIcon: 'ios-information-circle-outline',
+};
+
+export function info() {
+    return {
+        type: 'poptip',
+        trigger: 'hover',
+        placement: 'top-start',
+        wordWrap: true,
+        icon: iviewConfig.infoIcon
+    }
+}
+
+export default function getConfig() {
+    return {
+        form: {
+            inline: false,
+            labelPosition: 'right',
+            labelWidth: 125,
+            showMessage: true,
+            autocomplete: 'off',
+            size: undefined,
+        },
+        row: {
+            gutter: 0,
+        },
+        submitBtn: {
+            type: 'primary',
+            disabled: false,
+            innerText: '提交',
+            loading: false,
+            show: true,
+            click: undefined,
+        },
+        resetBtn: {
+            type: iviewConfig.resetBtnType,
+            disabled: false,
+            icon: iviewConfig.resetBtnIcon,
+            innerText: '重置',
+            loading: false,
+            show: false,
+            click: undefined,
+        },
+    };
+}

package/src/core/index.js

@@ -0,0 +1,39 @@
+import components from '../components';
+import parsers from '../parsers';
+import alias from './alias';
+import manager from './manager';
+import FormCreateFactory from '@form-create/core/src/index';
+import makers from './maker';
+import '../style/index.css';
+import extendApi from './api';
+
+function install(FormCreate) {
+    FormCreate.componentAlias(alias);
+
+    components.forEach(component => {
+        FormCreate.component(component.name, component);
+    });
+
+    parsers.forEach((parser) => {
+        FormCreate.parser(parser);
+    });
+
+    Object.keys(makers).forEach(name => {
+        FormCreate.maker[name] = makers[name];
+    });
+}
+
+export default function ivuFormCreate() {
+    return FormCreateFactory({
+        ui: `${process.env.UI}`,
+        version: `${process.env.VERSION}`,
+        manager,
+        install,
+        extendApi,
+        attrs: {
+            normal: ['col', 'wrap'],
+            array: ['className'],
+            key: ['title', 'info'],
+        }
+    });
+}

package/src/core/maker.js

@@ -0,0 +1,93 @@
+import {creatorFactory} from '@form-create/core/src/index';
+
+const maker = {};
+
+const names = ['upload', 'select', 'tree', 'checkbox', 'autoComplete', 'cascader', 'colorPicker', 'frame', 'inputNumber', 'radio', 'rate', 'timePicker', 'group'];
+
+function useAlias(maker) {
+    names.forEach(name => {
+        maker[name] = creatorFactory(name);
+    });
+    maker.auto = maker.autoComplete;
+    maker.number = maker.inputNumber;
+    maker.color = maker.colorPicker;
+}
+
+
+function useUpload(maker) {
+    const name = 'upload';
+
+    const types = {
+        image: ['image', 0],
+        file: ['file', 0],
+        uploadFileOne: ['file', 1],
+        uploadImageOne: ['image', 1],
+    };
+
+    Object.keys(types).reduce((maker, key) => {
+        maker[key] = creatorFactory(name, m => m.props({uploadType: types[key][0], maxLength: types[key][1]}));
+        return maker
+    }, maker);
+
+    maker.uploadImage = maker.image;
+    maker.uploadFile = maker.file;
+}
+
+function useTree(maker) {
+    const name = 'tree';
+
+    const types = {'treeSelected': 'selected', 'treeChecked': 'checked'};
+
+    Object.keys(types).reduce((maker, key) => {
+        maker[key] = creatorFactory(name, {type:types[key]});
+        return maker;
+    }, maker);
+}
+
+function useTimePicker(maker) {
+    const name = 'timePicker';
+
+    maker.time = creatorFactory(name, {type:'time'})
+    maker.timeRange = creatorFactory(name, {type:'timerange'})
+}
+
+
+function useSelect(maker) {
+    const name = 'select';
+
+    maker.selectMultiple = creatorFactory(name, {multiple:true})
+    maker.selectOne = creatorFactory(name, {multiple:false})
+}
+
+
+function useFrame(maker) {
+    const name = 'frame';
+
+    const types = {
+        frameInputs: ['input', 0],
+        frameFiles: ['file', 0],
+        frameImages: ['image', 0],
+        frameInputOne: ['input', 1],
+        frameFileOne: ['file', 1],
+        frameImageOne: ['image', 1]
+    };
+
+    Object.keys(types).reduce((maker, key) => {
+        maker[key] = creatorFactory(name, m => m.props({type: types[key][0], maxLength: types[key][1]}));
+        return maker
+    }, maker);
+
+
+    maker.frameInput = maker.frameInputs;
+    maker.frameFile = maker.frameFiles;
+    maker.frameImage = maker.frameImages;
+}
+
+useAlias(maker);
+useUpload(maker);
+useTree(maker);
+useSelect(maker);
+useFrame(maker);
+useTimePicker(maker);
+
+export default maker;

package/src/core/manager.js

@@ -0,0 +1,241 @@
+import getConfig, {info, iviewConfig} from './config';
+import mergeProps from '@form-create/utils/lib/mergeprops';
+import is, {hasProperty} from '@form-create/utils/lib/type';
+import extend from '@form-create/utils/lib/extend';
+
+function tidy(props, name) {
+    if (!hasProperty(props, name)) return;
+    if (is.String(props[name])) {
+        props[name] = {[name]: props[name], show: true};
+    }
+}
+
+function isFalse(val) {
+    return val === false;
+}
+
+function tidyBool(opt, name) {
+    if (hasProperty(opt, name) && !is.Object(opt[name])) {
+        opt[name] = {show: !!opt[name]};
+    }
+}
+
+export default {
+    validate(call) {
+        this.form().validate(call);
+    },
+    validateField(field, call) {
+        this.form().validateField(field, call);
+    },
+    clearValidateState(ctx) {
+        const fItem = this.vm.$refs[ctx.wrapRef];
+        if (fItem) {
+            fItem.validateMessage = '';
+            fItem.validateState = '';
+        }
+    },
+    tidyOptions(options) {
+        ['submitBtn', 'resetBtn', 'row', 'info', 'wrap', 'col'].forEach(name => {
+            tidyBool(options, name);
+        })
+        return options;
+    },
+    tidyRule({prop}) {
+        tidy(prop, 'title');
+        tidy(prop, 'info');
+        return prop;
+    },
+    mergeProp(ctx) {
+        ctx.prop = mergeProps([{
+            info: this.options.info || {},
+            wrap: this.options.wrap || {},
+            col: this.options.col || {},
+        }, ctx.prop], {
+            info: info(),
+            title: {},
+            col: {span: 24},
+            wrap: {},
+        }, {normal: ['title', 'info', 'col', 'wrap']});
+        this.setSize(ctx.prop.props);
+    },
+    setSize(props) {
+        if (!props.size && this.options.form.size) {
+            props.size = this.options.form.size;
+        }
+    },
+    getDefaultOptions() {
+        return getConfig();
+    },
+    update() {
+        const form = this.options.form;
+        this.rule = {
+            props: {...form},
+            nativeOn: {
+                submit: (e) => {
+                    e.preventDefault();
+                }
+            },
+            class: [form.className, form.class, 'form-create'],
+            style: form.style,
+            type: 'form',
+        };
+    },
+    beforeRender() {
+        const {key, ref, $handle} = this;
+        extend(this.rule, {key, ref});
+        extend(this.rule.props, {
+            model: $handle.formData,
+            rules: $handle.validate(),
+        });
+    },
+    render(children) {
+        if (children.length) {
+            children.push(this.makeFormBtn());
+        }
+        return this.$r(this.rule, isFalse(this.options.row.show) ? children : [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 labelWidth = (!col.labelWidth && !isTitle) ? 0 : col.labelWidth;
+        const {inline, col: _col} = this.rule.props;
+        const item = isFalse(rule.wrap.show) ? children : this.$r(mergeProps([rule.wrap, {
+            props: {
+                label: rule.title.title,
+                labelWidth,
+                ...(rule.wrap || {}),
+                prop: ctx.field,
+                rules: rule.validate,
+            },
+            class: rule.className,
+            key: `${uni}fi`,
+            ref: ctx.wrapRef,
+            type: 'formItem',
+        }]), [children, isTitle ? this.makeInfo(rule, uni) : null]);
+        return (inline === true || isFalse(_col) || isFalse(col.show)) ? item : this.makeCol(rule, uni, [item]);
+    },
+    isTitle(rule) {
+        const title = rule.title;
+        return !((!title.title && !title.native) || isFalse(title.show))
+    },
+    makeInfo(rule, uni) {
+        const titleProp = rule.title;
+        const infoProp = rule.info;
+        const children = [titleProp.title];
+
+        const titleFn = (pop) => this.$r(mergeProps([titleProp, {
+            props: titleProp,
+            slot: titleProp.slot || (pop ? 'default' : 'label'),
+            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: 'icon',
+                    props: {type: infoProp.icon === true ? iviewConfig.infoIcon : infoProp.icon, size: 16},
+                    style: 'margin-top: -1px',
+                    key: `${uni}i`
+                }));
+            }
+
+            const prop = {
+                type: infoProp.type || 'poptip',
+                props: {...infoProp},
+                key: `${uni}pop`,
+                slot: 'label'
+            };
+
+            const field = 'content';
+            if (infoProp.info && !hasProperty(prop.props, field)) {
+                prop.props[field] = infoProp.info;
+            }
+
+            return this.$r(mergeProps([infoProp, prop]), [
+                titleFn(true)
+            ])
+        }
+        return titleFn();
+    },
+    makeCol(rule, uni, children) {
+        const col = rule.col;
+        return this.$r({
+            class: col.class,
+            type: 'col',
+            props: col || {span: 24},
+            key: `${uni}col`
+        }, children);
+    },
+    makeRow(children) {
+        const row = this.options.row || {};
+        return this.$r({
+            type: 'row',
+            props: row,
+            class: row.class,
+            key: `${this.key}row`
+        }, children)
+    },
+    makeFormBtn() {
+        let vn = [];
+        if (!isFalse(this.options.submitBtn.show)) {
+            vn.push(this.makeSubmitBtn())
+        }
+        if (!isFalse(this.options.resetBtn.show)) {
+            vn.push(this.makeResetBtn())
+        }
+        if (!vn.length) {
+            return;
+        }
+        const item = this.$r({
+            type: 'formItem',
+            key: `${this.key}fb`
+        }, vn);
+
+        return this.rule.props.inline === true
+            ? item
+            : this.$r({
+                type: 'col',
+                props: {span: 24},
+                key: `${this.key}fc`
+            }, [item]);
+    },
+    makeResetBtn() {
+        const resetBtn = this.options.resetBtn;
+        this.setSize(resetBtn);
+        return this.$r({
+            type: 'button',
+            props: resetBtn,
+            style: {width: resetBtn.width, marginLeft: '15px'},
+            on: {
+                click: () => {
+                    const fApi = this.$handle.api;
+                    resetBtn.click
+                        ? resetBtn.click(fApi)
+                        : fApi.resetFields();
+                }
+            },
+            key: `${this.key}b2`,
+        }, [resetBtn.innerText]);
+    },
+    makeSubmitBtn() {
+        const submitBtn = this.options.submitBtn;
+        this.setSize(submitBtn);
+        return this.$r({
+            type: 'button',
+            props: submitBtn,
+            style: {width: submitBtn.width},
+            on: {
+                click: () => {
+                    const fApi = this.$handle.api;
+                    submitBtn.click
+                        ? submitBtn.click(fApi)
+                        : fApi.submit();
+                }
+            },
+            key: `${this.key}b1`,
+        }, [submitBtn.innerText]);
+    }
+}