icarys-form-create-vant 1.0.2 → 1.0.4

package/src/core/bili.config.js

@@ -0,0 +1,34 @@
+const {join} = require('path');
+const {author, license, name, version} = require('./package.json');
+const cwd = __dirname;
+
+const {UI_LIB} = process.env;
+
+module.exports = {
+    plugins: {
+        commonjs: true,
+    },
+    banner: {
+        author: `2018-${new Date().getFullYear()} ${author}\n * Github https://github.com/xaboy/form-create`,
+        license,
+        name,
+        version
+    },
+    globals: {
+        vue: 'Vue'
+    },
+    externals: ['vue', 'Vue'],
+    output: {
+        format: ['esm','esm-min'],
+        moduleName: 'formCreateFactory',
+        fileName: 'index[min].js',
+        target: 'browser',
+        extractCSS: false,
+    },
+    input: join(cwd, '/src/index.js'),
+    env: {
+        'NODE_ENV': 'production',
+        'VERSION': version,
+        'UI': UI_LIB,
+    }
+};

package/src/core/package-lock.json

@@ -0,0 +1,13 @@
+{
+	"name": "@form-create/core",
+	"version": "3.2.37",
+	"lockfileVersion": 1,
+	"requires": true,
+	"dependencies": {
+		"mitt": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/mitt/-/mitt-2.1.0.tgz",
+			"integrity": "sha512-ILj2TpLiysu2wkBbWjAmww7TkZb65aiQO+DkVdUTBpBXq+MHYiETENkKFMtsJZX1Lf4pe4QOrTSjIfUwN5lRdg=="
+		}
+	}
+}

package/src/core/package.json

@@ -0,0 +1,61 @@
+{
+    "name": "@form-create/core",
+    "version": "3.2.37",
+    "description": "FormCreate低代码表单渲染引擎，可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的低代码表单。支持6个UI框架，适配移动端，并且支持生成任何 Vue 组件。",
+    "main": "./dist/index.min.js",
+    "module": "./dist/index.esm.js",
+    "unpkg": "./dist/form-create.min.js",
+    "jsdelivr": "./dist/form-create.min.js",
+    "typings": "./types/index.d.ts",
+    "scripts": {
+        "clean": "rimraf dist/",
+        "bili": "cross-env UI_LIB=core 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",
+        "vue3",
+        "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/v3/",
+    "peerDependencies": {
+        "vue": "^3.1.0"
+    },
+    "dependencies": {
+        "@form-create/utils": "^3.2.31"
+    },
+    "publishConfig": {
+        "access": "public"
+    },
+    "buildFormCreateOptions": {
+        "name": "@form-create/core",
+        "exportName": "formCreateFactory",
+        "fileName": "index",
+        "formats": [
+            "esm"
+        ]
+    },
+    "gitHead": "3d024534b3ee103a96da1d3629582c0cdf19d9a8"
+}

package/src/core/src/components/formCreate.js

@@ -0,0 +1,287 @@
+import {
+    defineComponent,
+    getCurrentInstance,
+    inject,
+    markRaw,
+    nextTick,
+    onBeforeMount,
+    onBeforeUnmount,
+    onMounted,
+    onUpdated,
+    provide,
+    reactive,
+    toRefs,
+    watch, watchEffect
+} from 'vue';
+import toArray from '@form-create/utils/lib/toarray';
+import debounce from '@form-create/utils/lib/debounce';
+import toLine from '@form-create/utils/lib/toline';
+import {toJson} from '../frame/util';
+
+const getGroupInject = (vm, parent) => {
+    if (!vm || vm === parent) {
+        return;
+    }
+    if (vm.props.formCreateInject) {
+        return vm.props.formCreateInject
+    }
+    if (vm.parent) {
+        return getGroupInject(vm.parent, parent);
+    }
+}
+
+export default function $FormCreate(FormCreate, components, directives) {
+    return defineComponent({
+        name: 'FormCreate' + (FormCreate.isMobile ? 'Mobile' : ''),
+        components,
+        directives,
+        props: {
+            rule: {
+                type: Array,
+                required: true,
+                default: () => []
+            },
+            option: {
+                type: Object,
+                default: () => ({})
+            },
+            extendOption: Boolean,
+            driver: [String, Object],
+            modelValue: Object,
+            disabled: {
+                type: Boolean,
+                default: undefined,
+            },
+            preview: {
+                type: Boolean,
+                default: undefined,
+            },
+            index: [String, Number],
+            api: Object,
+            locale: [String, Object],
+            t: Function,
+            name: String,
+            subForm: {
+                type: Boolean,
+                default: true
+            },
+            inFor: Boolean,
+        },
+        emits: ['update:api', 'update:modelValue', 'mounted', 'submit', 'reset', 'change', 'emit-event', 'control', 'remove-rule', 'remove-field', 'sync', 'reload', 'repeat-field', 'update', 'validate-field-fail', 'validate-fail', 'created'],
+        render() {
+            return this.fc.render();
+        },
+        setup(props) {
+            const vm = getCurrentInstance();
+            provide('parentFC', vm);
+            const parent = inject('parentFC', null);
+            let top = parent;
+
+            if (parent) {
+                while (top.setupState.parent) {
+                    top = top.setupState.parent;
+                }
+            } else {
+                top = vm;
+            }
+
+            const {rule, modelValue, subForm, inFor} = toRefs(props);
+
+            const data = reactive({
+                ctxInject: {},
+                destroyed: false,
+                isShow: true,
+                unique: 1,
+                renderRule: [...rule.value || []],
+                updateValue: JSON.stringify(modelValue.value || {}),
+            });
+
+            const fc = new FormCreate(vm);
+            const fapi = fc.api();
+
+            const isMore = inFor.value;
+
+            const addSubForm = () => {
+                if (parent) {
+                    const inject = getGroupInject(vm, parent);
+                    if (inject) {
+                        let sub;
+                        if (isMore) {
+                            sub = toArray(inject.getSubForm());
+                            sub.push(fapi);
+
+                        } else {
+                            sub = fapi;
+                        }
+                        inject.subForm(sub);
+                    }
+                }
+            };
+
+            const rmSubForm = () => {
+                const inject = getGroupInject(vm, parent);
+                if (inject) {
+                    if (isMore) {
+                        const sub = toArray(inject.getSubForm());
+                        const idx = sub.indexOf(fapi);
+                        if (idx > -1) {
+                            sub.splice(idx, 1);
+                        }
+                    } else {
+                        inject.subForm();
+                    }
+                }
+            };
+
+            let styleEl = null;
+
+            onBeforeMount(() => {
+                watchEffect(() => {
+                    let content = '';
+                    const globalClass = (props.option && props.option.globalClass) || {};
+                    Object.keys(globalClass).forEach(k => {
+                        let subCss = '';
+                        globalClass[k].style && Object.keys(globalClass[k].style).forEach(key => {
+                            subCss += toLine(key) + ':' + globalClass[k].style[key] + ';';
+                        });
+                        if (globalClass[k].content) {
+                            subCss += globalClass[k].content + ';';
+                        }
+                        if (subCss) {
+                            content += `.${k}{${subCss}}`;
+                        }
+                    });
+                    if (props.option && props.option.style) {
+                        content += props.option.style;
+                    }
+                    if (!styleEl) {
+                        styleEl = document.createElement('style');
+                        styleEl.type = 'text/css';
+                        document.head.appendChild(styleEl);
+                    }
+                    styleEl.innerHTML = content || '';
+                })
+            });
+
+            const emit$topForm = debounce(() => {
+                fc.bus.$emit('$loadData.$topForm');
+            }, 100);
+
+            const emit$scopeForm = debounce(function () {
+                fc.bus.$emit('$loadData.$scopeForm');
+            }, 100);
+
+            const emit$form = debounce(() => {
+                fc.bus.$emit('$loadData.$form');
+            }, 100);
+
+            const emit$change = (field) => {
+                fc.bus.$emit('change-$form.' + field);
+            };
+
+            onMounted(() => {
+                if (parent) {
+                    fapi.top.bus.$on('$loadData.$form', emit$topForm);
+                    fapi.top.bus.$on('change', emit$change);
+                }
+                if (fapi !== fapi.scope) {
+                    fapi.scope.bus.$on('$loadData.$scopeForm', emit$scopeForm);
+                }
+                fc.mounted();
+            });
+
+            onBeforeUnmount(() => {
+                if (parent) {
+                    fapi.top.bus.$off('$loadData.$form', emit$topForm);
+                    fapi.top.bus.$off('change', emit$change);
+                }
+                if (fapi !== fapi.scope) {
+                    fapi.scope.bus.$off('$loadData.$scopeForm', emit$scopeForm);
+                }
+                rmSubForm();
+                data.destroyed = true;
+                fc.unmount();
+                styleEl && (styleEl.parentNode || styleEl.parentElement) && document.head.removeChild(styleEl);
+            })
+
+            onUpdated(() => {
+                fc.updated();
+            });
+
+            addSubForm();
+
+            watch(() => props.option, () => {
+                fc.initOptions();
+                fapi.refresh();
+            }, {deep: true, flush: 'sync'});
+
+            watch(() => [...rule.value], (n) => {
+                if (fc.$handle.isBreakWatch() || n.length === data.renderRule.length && n.every(v => data.renderRule.indexOf(v) > -1)) return;
+                fc.$handle.updateAppendData();
+                fc.$handle.reloadRule(rule.value);
+                vm.setupState.renderRule();
+            })
+
+            watch(() => [props.disabled, props.preview], () => {
+                fapi.refresh();
+            });
+
+            watch(modelValue, (n) => {
+                if (toJson(n || {}) === data.updateValue) return;
+                if (fapi.config.forceCoverValue) {
+                    fapi.coverValue(n || {});
+                } else {
+                    fapi.setValue(n || {});
+                }
+            }, {deep: true, flush: 'post'});
+
+            watch(() => props.index, () => {
+                fapi.coverValue({});
+                fc.$handle.updateAppendData();
+                nextTick(() => {
+                    nextTick(() => {
+                        fapi.clearValidateState();
+                    });
+                });
+            }, {flush: 'sync'});
+
+            return {
+                fc: markRaw(fc),
+                parent: parent ? markRaw(parent) : parent,
+                top: markRaw(top),
+                fapi: markRaw(fapi),
+                ...toRefs(data),
+                getGroupInject: () => getGroupInject(vm, parent),
+                refresh() {
+                    ++data.unique;
+                },
+                renderRule() {
+                    data.renderRule = [...rule.value || []];
+                },
+                updateValue(value) {
+                    if (data.destroyed) return;
+                    const json = toJson(value);
+                    if (data.updateValue === json) {
+                        return;
+                    }
+                    data.updateValue = json;
+                    vm.emit('update:modelValue', value);
+                    nextTick(() => {
+                        emit$form();
+                        if (!parent) {
+                            emit$topForm();
+                            emit$scopeForm();
+                        } else if (!subForm.value) {
+                            emit$scopeForm();
+                        }
+                    });
+                }
+            }
+        },
+        created() {
+            const vm = getCurrentInstance();
+            vm.emit('update:api', vm.setupState.fapi);
+            vm.setupState.fc.init();
+        },
+    })
+}

package/src/core/src/components/fragment.js

@@ -0,0 +1,12 @@
+import {defineComponent} from 'vue';
+
+const NAME = 'fcFragment';
+
+export default defineComponent({
+    name: NAME,
+    inheritAttrs: false,
+    props: ['vnode'],
+    render() {
+        return this.vnode;
+    }
+})

package/src/core/src/factory/context.js

@@ -0,0 +1,264 @@
+import unique from '@form-create/utils/lib/unique';
+import toCase from '@form-create/utils/lib/tocase';
+import extend from '@form-create/utils/lib/extend';
+import {enumerable, invoke, mergeRule} from '../frame/util';
+import {deepCopy} from '@form-create/utils/lib/deepextend';
+import {markRaw, reactive} from 'vue';
+import is from '@form-create/utils/lib/type';
+import toArray from '@form-create/utils/lib/toarray';
+
+function bind(ctx) {
+    Object.defineProperties(ctx.origin, {
+        __fc__: enumerable(markRaw(ctx), true)
+    });
+    if(ctx.rule !== ctx.origin) {
+        Object.defineProperties(ctx.rule, {
+            __fc__: enumerable(markRaw(ctx), true)
+        });
+    }
+}
+
+export default function RuleContext(handle, rule, defaultValue) {
+    const id = unique();
+    const isInput = !!rule.field;
+    extend(this, {
+        id,
+        ref: id,
+        wrapRef: id + 'fi',
+        rule,
+        origin: rule.__origin__ || rule,
+        name: rule.name,
+        pending: {},
+        none: false,
+        watch: [],
+        linkOn: [],
+        root: [],
+        ctrlRule: [],
+        children: [],
+        parent: null,
+        group: rule.subRule ? this : null,
+        cacheConfig: null,
+        prop: {...rule},
+        computed: {},
+        payload: {},
+        refRule: {},
+        input: isInput,
+        el: undefined,
+        exportEl: undefined,
+        defaultValue: isInput ? deepCopy(defaultValue) : undefined,
+        field: rule.field || undefined
+    })
+
+    this.updateKey();
+    bind(this);
+    this.update(handle, true);
+}
+
+extend(RuleContext.prototype, {
+    getParentGroup() {
+        let ctx = this.parent;
+        while (ctx) {
+            if (ctx.group) {
+                return ctx;
+            }
+            ctx = ctx.parent;
+        }
+    },
+    loadChildrenPending() {
+        const children = this.rule.children || [];
+        if (Array.isArray(children))
+            return children;
+        return this.loadPending({
+            key: 'children', origin: children, def: [],
+            onLoad: (data) => {
+                this.$handle && this.$handle.loadChildren(data, this);
+            }, onUpdate: (value, oldValue) => {
+                if (this.$handle) {
+                    value === oldValue ? this.$handle.loadChildren(value, this) : this.$handle.updateChildren(this, value, oldValue);
+                }
+            }, onReload: (value) => {
+                if (this.$handle) {
+                    this.$handle.updateChildren(this, [], value);
+                } else {
+                    delete this.pending.children;
+                }
+            }
+        });
+    },
+    loadPending(config) {
+        const {key, origin, def, onLoad, onReload, onUpdate} = config;
+
+        if (this.pending[key] && this.pending[key].origin === origin) {
+            return this.getPending(key, def);
+        }
+
+        delete this.pending[key];
+
+        let value = origin;
+        if (is.Function(origin)) {
+            let source = invoke(() => origin({
+                rule: this.rule, api: this.$api, update: (data) => {
+                    const value = data || def;
+                    const oldValue = this.getPending(key, def);
+                    this.setPending(key, origin, value);
+                    onUpdate && onUpdate(value, oldValue);
+                }, reload: () => {
+                    const oldValue = this.getPending(key, def);
+                    delete this.pending[key];
+                    onReload && onReload(oldValue);
+                    this.$api && this.$api.sync(this.rule);
+                }
+            }));
+            if (source && is.Function(source.then)) {
+                source.then((data) => {
+                    const value = data || def;
+                    this.setPending(key, origin, value);
+                    onLoad && onLoad(value);
+                    this.$api && this.$api.sync(this.rule);
+                }).catch(e => {
+                    console.error(e);
+                })
+                value = def;
+                this.setPending(key, origin, value);
+            } else {
+                value = source || def;
+                this.setPending(key, origin, value);
+                onLoad && onLoad(value);
+            }
+        }
+        return value;
+    },
+    getPending(key, def) {
+        return (this.pending[key] && this.pending[key].value) || def;
+    },
+    setPending(key, origin, value) {
+        this.pending[key] = {
+            origin,
+            value: reactive(value)
+        };
+    },
+    effectData(name) {
+        if (!this.payload[name]) {
+            this.payload[name] = {};
+        }
+        return this.payload[name];
+    },
+    clearEffectData(name) {
+        if (name === undefined) {
+            this.payload = {};
+        } else {
+            delete this.payload[name];
+        }
+    },
+    updateKey(flag) {
+        this.key = unique();
+        flag && this.parent && this.parent.updateKey(flag);
+    },
+    updateType() {
+        this.originType = this.rule.type;
+        this.type = toCase(this.rule.type);
+        this.trueType = this.$handle.getType(this.originType);
+    },
+    setParser(parser) {
+        this.parser = parser;
+        parser.init(this);
+    },
+    initProp() {
+        const rule = {...this.rule};
+        delete rule.children;
+        delete rule.validate;
+        this.prop = mergeRule({}, [rule, ...Object.keys(this.payload).map(k => this.payload[k]), this.computed]);
+        this.prop.validate = [...this.refRule?.__$validate?.value || [], ...this.prop.validate || []]
+    },
+    initNone() {
+        this.none = !(is.Undef(this.prop.display) || !!this.prop.display)
+    },
+    hasHidden() {
+        return (!!this.rule.hidden) || (this.parent ? this.parent.hasHidden() : false);
+    },
+    injectValidate() {
+        return this.prop.validate;
+    },
+    check(handle) {
+        return this.vm === handle.vm
+    },
+    unwatch() {
+        this.watch.forEach(un => un());
+        this.watch = [];
+        Object.keys(this.refRule).forEach(key => {
+            if (key.indexOf('__$') !== 0) {
+                delete this.refRule[key];
+            }
+        })
+    },
+    unlink() {
+        this.linkOn.forEach(un => un());
+        this.linkOn = [];
+    },
+    link() {
+        this.unlink();
+        this.$handle.appendLink(this);
+    },
+    watchTo() {
+        this.$handle.watchCtx(this);
+    },
+    delete() {
+        this.unwatch();
+        this.unlink();
+        this.rmCtrl();
+        if (this.parent) {
+            this.parent.children.splice(this.parent.children.indexOf(this) >>> 0, 1);
+        }
+        extend(this, {
+            deleted: true,
+            computed: {},
+            parent: null,
+            children: [],
+            cacheConfig: null,
+            none: false,
+        })
+    },
+    rmCtrl() {
+        this.ctrlRule.forEach(ctrl => ctrl.__fc__ && ctrl.__fc__.rm());
+        this.ctrlRule = [];
+    },
+    rm() {
+        const _rm = () => {
+            let index = this.root.indexOf(this.origin);
+            if (index > -1) {
+                this.root.splice(index, 1);
+                this.$handle && this.$handle.refresh();
+            }
+        }
+        if (this.deleted) {
+            _rm();
+            return;
+        }
+        this.$handle.noWatch(() => {
+            this.$handle.deferSyncValue(() => {
+                this.rmCtrl();
+                _rm();
+                this.$handle.rmCtx(this);
+                extend(this, {
+                    root: []
+                });
+            }, this.input);
+        });
+    },
+    update(handle, init) {
+        extend(this, {
+            deleted: false,
+            $handle: handle,
+            $render: handle.$render,
+            $api: handle.api,
+            vm: handle.vm,
+            vNode: handle.$render.vNode,
+            updated: false,
+            cacheValue: this.rule.value
+        });
+        !init && this.unwatch();
+        this.watchTo();
+        this.link();
+        this.updateType();
+    }
+})