icarys-form-create-vant 1.0.3 → 1.0.4

package/src/vant/src/components/uploader.jsx

@@ -0,0 +1,99 @@
+import {defineComponent, ref, toRef, watch} from 'vue';
+import toArray from '@form-create/utils/lib/toarray';
+
+const NAME = 'fcUploader';
+
+function parseFile(file, i) {
+    if (typeof file === 'object') {
+        return file;
+    }
+    return {
+        url: file,
+        is_string: true,
+        name: getFileName(file),
+        uid: i
+    };
+}
+
+function parseUpload(file) {
+    return {...file, file, value: file};
+}
+
+function getFileName(file) {
+    return ('' + file).split('/').pop()
+}
+
+export default defineComponent({
+    name: NAME,
+    inheritAttrs: false,
+    props: {
+        formCreateInject: Object,
+        modelValue: [Array, String, Object],
+        afterRead: Function,
+        action: String,
+        headers: Object,
+        method: String,
+        data: Object,
+        uploadName: String,
+        onSuccess: Function,
+        onError: Function,
+        maxCount: Number,
+    },
+    emits: ['update:modelValue', 'delete'],
+    setup(props, _) {
+
+        const afterRead = toRef(props, 'afterRead');
+        const modelValue = toRef(props, 'modelValue', []);
+
+        const fileList = ref(toArray(modelValue.value).map(parseFile).map(parseUpload));
+
+        watch(() => modelValue.value, (n) => {
+            fileList.value = toArray(n).map(parseFile).map(parseUpload);
+        })
+
+        const uploadValue = () => {
+            let files = fileList.value.map((v) => v.is_string ? v.url : (v.value || v.url)).filter((url) => url !== undefined);
+            _.emit('update:modelValue', props.maxCount === 1 ? (files[0] || '') : files);
+        };
+
+        return {
+            fileList,
+            modelValue,
+            onDelete(file) {
+                uploadValue();
+                _.emit('delete', file);
+            },
+            uploadFile(file) {
+                file.status = 'uploading';
+                if (afterRead.value) {
+                    return afterRead.value(file);
+                } else {
+                    const data = props.data || {};
+                    data[props.uploadName || 'file'] = file.file;
+                    props.formCreateInject.api.fetch({
+                        action: props.action,
+                        dataType: 'formData',
+                        source: 'upload',
+                        headers: props.headers || {},
+                        method: props.method || 'post',
+                        data
+                    }).then(res => {
+                        file.status = 'success';
+                        props.onSuccess && props.onSuccess(res, file);
+                        uploadValue();
+                    }).catch(e => {
+                        file.status = 'failed';
+                        file.message = this.formCreateInject.t('uploadFail') || '上传失败';
+                        props.onError && props.onError(e, file);
+                    });
+                }
+            }
+        }
+    },
+    render() {
+        return <van-uploader {...this.$attrs} model-value={this.fileList} maxCount={this.maxCount}
+            onUpdate:model-value={(v) => this.fileList = v}
+            afterRead={this.uploadFile} onDelete={this.onDelete} v-slots={this.$slots}/>
+    }
+
+});

package/src/vant/src/core/alias.js

@@ -0,0 +1,31 @@
+const PRE = 'van';
+export default {
+    button: PRE + '-button',
+    icon: PRE + '-icon',
+    slider: PRE + '-slider',
+    stepper: PRE + '-stepper',
+    inputNumber: PRE + '-stepper',
+    rate: PRE + '-rate',
+    uploader: 'fc-uploader',
+    upload: 'fc-uploader',
+    cell: PRE + '-cell',
+    timePicker: 'fc-time-picker',
+    datePicker: 'fc-date-picker',
+    'switch': PRE + '-switch',
+    select: 'fc-select',
+    cascader: 'fc-cascader',
+    calendar: 'fc-calendar',
+    checkbox: 'fc-checkbox',
+    radio: 'fc-radio',
+    input: PRE + '-field',
+    textarea: PRE + '-field',
+    field: PRE + '-field',
+    formItem: PRE + '-field',
+    form: PRE + '-form',
+    col: PRE + '-col',
+    row: PRE + '-row',
+    group: 'fc-group',
+    array: 'fc-group',
+    object: 'fc-sub-form',
+    subForm: 'fc-sub-form',
+}

package/src/vant/src/core/api.js

@@ -0,0 +1,135 @@
+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) {
+    return {
+        formEl() {
+            return h.$manager.form();
+        },
+        wrapEl(id) {
+            const ctx = h.getFieldCtx(id);
+            if (!ctx) return;
+            return h.vm.refs[ctx.wrapRef];
+        },
+        validate(callback) {
+            return new Promise((resolve, reject) => {
+                const forms = api.children;
+                const all = [h.$manager.validate()];
+                forms.filter(v=>!v.isScope).forEach(v => {
+                    all.push(v.validate());
+                })
+                Promise.all(all).then(() => {
+                    resolve(true);
+                    callback && callback(true);
+                }).catch((e) => {
+                    reject(e);
+                    callback && callback(e);
+                    h.vm.emit('validate-fail', e, {api});
+                    h.emitEvent('validate-fail', e, {api});
+                })
+            });
+        },
+        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).filter(v=>!v.isScope).forEach(v => {
+                    all.push(v.validate());
+                })
+                Promise.all(all).then(() => {
+                    resolve(null);
+                    callback && callback(null);
+                }).catch((e) => {
+                    reject(e);
+                    callback && callback(e);
+                    h.vm.emit('validate-field-fail', e, {field, api});
+                })
+            });
+        },
+        clearValidateState(fields, clearSub = true) {
+            api.helper.tidyFields(fields).forEach(field => {
+                if (clearSub) this.clearSubValidateState(field);
+                h.getCtxs(field).forEach(ctx => {
+                    h.$manager.clearValidateState(ctx);
+                });
+            });
+        },
+        clearSubValidateState(fields) {
+            api.helper.tidyFields(fields).forEach(field => {
+                h.getCtxs(field).forEach(ctx => {
+                    const subForm = h.subForm[ctx.id];
+                    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) {
+            return new Promise((resolve, reject) => {
+                const promise = h.options.validateOnSubmit === false ? Promise.resolve() : api.validate();
+                promise.then(() => {
+                    let formData = api.formData();
+                    h.beforeSubmit(formData).then(() => {
+                        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((e) => {})
+                }).catch((...args) => {
+                    is.Function(failFn) && invoke(() => failFn(api, ...args));
+                    reject(...args)
+                })
+            });
+        },
+    };
+}

package/src/vant/src/core/config.js

@@ -0,0 +1,35 @@
+export default function getConfig() {
+    return {
+        form: {
+            required: 'auto',
+            labelAlign: 'right',
+            inputAlign: 'right',
+        },
+        row: {
+            show: true,
+            gutter: 0,
+        },
+        submitBtn: {
+            type: 'primary',
+            loading: false,
+            disabled: false,
+            block: true,
+            innerText: '',
+            size: 'small',
+            show: true,
+            col: undefined,
+            click: undefined,
+        },
+        resetBtn: {
+            type: 'default',
+            loading: false,
+            disabled: false,
+            block: true,
+            innerText: '',
+            size: 'small',
+            show: false,
+            col: undefined,
+            click: undefined,
+        },
+    };
+}

package/src/vant/src/core/index.js

@@ -0,0 +1,45 @@
+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 '../style/index.css';
+import extendApi from './api';
+import required from './provider';
+import {Field} from 'vant';
+
+function install(FormCreate) {
+    FormCreate.componentAlias(alias);
+
+    components.forEach(component => {
+        FormCreate.component(component.name, component);
+    });
+
+    FormCreate.register(required);
+
+    parsers.forEach((parser) => {
+        FormCreate.parser(parser);
+    });
+
+    if (Field.props) {
+        Field.props.modelValue = {
+            type: [String, Number, Array, Object, Boolean, Function],
+            default: '',
+        };
+    }
+}
+
+export default function VantFormCreate() {
+    return FormCreateFactory({
+        ui: 'process.env.UI',
+        version: 'process.env.VERSION',
+        manager,
+        extendApi,
+        install,
+        isMobile: true,
+        attrs: {
+            normal: ['col', 'wrap'],
+            key: ['title', 'info'],
+        }
+    });
+}

package/src/vant/src/core/manager.js

@@ -0,0 +1,282 @@
+import getConfig 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';
+import {showNotify} from 'vant';
+
+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]};
+    }
+}
+
+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());
+        }
+    },
+    validateField(field) {
+        return new Promise((resolve, reject) => {
+            const form = this.form();
+            if (form) {
+                form.validate(field).then(resolve).catch(reject);
+            } else {
+                resolve();
+            }
+        });
+    },
+    clearValidateState(ctx) {
+        const form = this.form();
+        if (form) {
+            return form.resetValidation(ctx.id);
+        }
+    },
+    tidyOptions(options) {
+        ['submitBtn', 'resetBtn', 'row', 'info', 'wrap', 'col', 'title'].forEach(name => {
+            tidyBool(options, name);
+        })
+        return options;
+    },
+    tidyRule({prop}) {
+        tidy(prop, 'title');
+        tidy(prop, 'info');
+        prop.validate && prop.validate.forEach(item => {
+            if (is.String(item.pattern)) {
+                item.pattern = new RegExp(item.pattern);
+            }
+        });
+        return prop;
+    },
+    mergeProp(ctx) {
+        const def = {
+            info: {
+                icon: true,
+            },
+            title: {},
+            col: {span: 24},
+            wrap: {},
+        };
+        ['info', 'wrap', 'col', 'title'].forEach(name => {
+            ctx.prop[name] = mergeProps([this.options[name] || {}, ctx.prop[name] || {}], def[name]);
+        });
+    },
+    getDefaultOptions() {
+        return getConfig();
+    },
+    adapterValidate(validate, validator) {
+        if (validate.trigger === 'change') {
+            validate.trigger = 'onChange';
+        } else if (validate.trigger === 'blur') {
+            validate.trigger = 'onBlur';
+        }
+        validate.validator = (value) => {
+            return new Promise((resolve) => {
+                const callback = (err) => {
+                    validate.message = err;
+                    if (err) {
+                        resolve(false);
+                    } else {
+                        resolve();
+                    }
+                }
+                return validator(value, callback);
+            })
+        }
+        return validate;
+    },
+    update() {
+        const form = this.options.form;
+        this.rule = {
+            props: {...form},
+            on: {
+                submit: (e) => {
+                    e.preventDefault();
+                }
+            },
+            style: form.style,
+            type: 'form',
+        };
+    },
+    beforeRender() {
+        const {key, ref} = this;
+        const form = this.options.form;
+        extend(this.rule, {key, ref, class: [form.className, form.class, 'form-create-m', this.$handle.preview ? 'is-preview' : '']});
+    },
+    render(children) {
+        if (children.slotLen() && !this.$handle.preview) {
+            children.setSlot(undefined, () => this.makeFormBtn());
+        }
+        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) && rule.wrap.title !== false;
+        const {col: _col} = this.rule.props;
+        const cls = rule.wrap.class;
+        delete rule.wrap.class;
+        delete rule.wrap.title;
+        const item = isFalse(rule.wrap.show) ? children : this.$r(mergeProps([rule.wrap, {
+            props: {
+                modelValue: ctx.rule.value,
+                label: isTitle ? rule.title.title : undefined,
+                ...tidyRule(rule.wrap || {}),
+                name: ctx.id,
+                rules: ctx.injectValidate(),
+            },
+            class: this.$render.mergeClass(cls || rule.className, 'fc-form-item'),
+            key: `${uni}fi`,
+            ref: ctx.wrapRef,
+            type: 'formItem',
+        }]), {input: () => children, ...(isTitle ? {label: () => this.makeInfo(rule, uni, ctx)} : {})});
+        return (isFalse(_col) || isFalse(col.show)) ? item : this.makeCol(rule, uni, [item]);
+    },
+    isTitle(rule) {
+        if (this.options.form.title === false) return false;
+        const title = rule.title;
+        return !((!title.title && !title.native) || isFalse(title.show))
+    },
+    makeInfo(rule, uni, ctx) {
+        const titleProp = {...rule.title};
+        const infoProp = {...rule.info};
+        const titleSlot = this.getSlot('title');
+        const children = [titleSlot ? titleSlot({
+            title: ctx.refRule?.__$title?.value,
+            rule: ctx.rule,
+            options: this.options
+        }) : ctx.refRule?.__$title?.value];
+        const flag = !isFalse(infoProp.show) && (infoProp.info || infoProp.native) && !isFalse(infoProp.icon);
+        if (flag) {
+            children[infoProp.align !== 'left' ? 'unshift' : 'push'](this.$r({
+                type: infoProp.icon === true ? 'icon-warning' : infoProp.icon,
+                style: 'width:1em;',
+            }));
+        }
+
+        const _prop = mergeProps([titleProp, {
+            props: tidyRule(titleProp),
+            key: `${uni}tit`,
+            class: 'fc-form-title',
+            type: titleProp.type || 'span',
+            on: {
+                click: (...args) => {
+                    if (flag && infoProp.info) {
+                        showNotify({type: 'warning', message: ctx.refRule?.__$info?.value, duration: 1000});
+                    }
+                    this.$handle.targetHook(ctx, 'titleClick', {args});
+                }
+            }
+        }]);
+
+        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: this.$render.mergeClass(col.class, 'fc-form-col'),
+            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: this.$render.mergeClass(row.class, 'fc-form-row'),
+            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;
+        }
+        return this.$r({
+            type: 'cell',
+            class: 'fc-form-cell fc-form-footer',
+            key: `${this.key}fb`
+        }, vn);
+    },
+
+    makeResetBtn() {
+        const resetBtn = {...this.options.resetBtn};
+        const innerText = resetBtn.innerText || this.$handle.api.t('reset') || '重置';
+        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;
+                    this.options.resetBtn.click
+                        ? this.options.resetBtn.click(fApi)
+                        : fApi.resetFields();
+                }
+            },
+            key: `${this.key}b2`,
+        }, [innerText]);
+    },
+    makeSubmitBtn() {
+        const submitBtn = {...this.options.submitBtn};
+        const innerText = submitBtn.innerText || this.$handle.api.t('submit') || '提交';
+        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;
+                    this.options.submitBtn.click
+                        ? this.options.submitBtn.click(fApi)
+                        : fApi.submit().catch(() => {
+                        });
+                }
+            },
+            key: `${this.key}b1`,
+        }, [innerText]);
+    }
+}

package/src/vant/src/core/provider.js

@@ -0,0 +1,63 @@
+import is from '@form-create/utils/lib/type';
+
+const required = {
+    name: 'required',
+    load(inject, rule, api) {
+        const val = parseVal(inject.getValue());
+        let _title = undefined;
+        if (val.required === false) {
+            inject.clearProp();
+            api.clearValidateState([rule.field]);
+        } else {
+            const validate = {
+                required: true,
+                validator(v) {
+                    updateMessage();
+                    return !is.empty(v);
+                },
+                trigger: ['onChange', 'onSubmit'],
+                ...val,
+            };
+            const updateMessage = () => {
+                const title = rule.__fc__.refRule.__$title?.value;
+                if (_title === title) {
+                    return;
+                }
+                _title = title;
+                if (!val.message) {
+                    validate.message = api.t('required', {title}) || (title + (api.getLocale() === 'en' ? ' is required' : '不能为空'));
+                } else {
+                    const match = val.message.match(/^\{\{\s*\$t\.(.+)\s*\}\}$/);
+                    if (match) {
+                        validate.message = api.t(match[1], {title});
+                    }
+                }
+            }
+            updateMessage();
+            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