@leiyin/v-form-renderer 0.1.3-alpha.3 → 0.1.3-alpha.4

package/dist/index.cjs.js

@@ -3,18 +3,787 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var vue = require('vue');
+var lodashEs = require('lodash-es');
 
-const _hoisted_1 = { class: "red-text" };
+const vFormProps = {
+    content: {
+        type: Array,
+        required: true,
+        default: () => []
+    },
+    /** 统一label宽度 */
+    labelWidth: {
+        type: String,
+        default: '98px'
+    },
+    disabled: {
+        type: Boolean,
+        default: false
+    },
+    inline: {
+        type: Boolean,
+        default: true
+    },
+    readonly: {
+        type: Boolean,
+        default: false
+    }
+};
 
-function render(_ctx, _cache) {
-  return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, "222"))
+const renderFormItemProps = {
+    data: {
+        type: Object,
+        default: () => { }
+    },
+    value: {
+        type: Object,
+        default: () => { }
+    },
+    disabled: {
+        type: Boolean,
+        default: false
+    },
+    readonly: {
+        type: Boolean,
+        default: false
+    },
+    id: {
+        type: String,
+        default: ''
+    }
+};
+
+var RenderComponent = vue.defineComponent({
+    name: 'RenderComponent',
+    setup(_, context) {
+        if (!context.attrs.componentType) {
+            return () => null;
+        }
+        const plusComponent = vue.resolveComponent(`el-${context.attrs.componentType}`);
+        const buildSlots = () => {
+            const result = {};
+            // cascader 极联不使用默认插槽
+            if (context.attrs.componentType === 'cascader') {
+                return {};
+            }
+            // 如果用户定义了插槽对象，例如 { suffix: '元', default: '内容' }
+            if (context.attrs.slots && typeof context.attrs.slots === 'object') {
+                Object.entries(context.attrs.slots).forEach(([key, value]) => {
+                    result[key] = () => (typeof value === 'function' ? value() : value);
+                });
+            }
+            else {
+                return context.slots;
+            }
+            return result;
+        };
+        return () => vue.h(plusComponent, context.attrs, buildSlots());
+    }
+});
+
+function noop() { }
+function collect(content, key) {
+    return lodashEs.fromPairs(content
+        .map((item) => ({
+        id: item.id,
+        type: item.type,
+        value: item.type === 'group' && item.items ? collect(item.items, key) : item[key]
+    }))
+        .filter(({ type, value }) => value !== undefined || (type === 'group' && Object.keys(value).length))
+        .map(({ id, value }) => [id, value]));
+}
+/**
+ * 根据 content 中的 outputFormat 来处理 value；
+ * 如果 outputFormat 处理后的值是对象类型，会覆盖（Object.assign）到 value 上
+ */
+function transformOutputValue(value, content) {
+    const newVal = {};
+    Object.keys(value).forEach((id) => {
+        const item = content.find((item) => item.id === id);
+        if (!item) {
+            return;
+        }
+        if (item.type !== 'group') {
+            if (item.outputFormat) {
+                const v = item.outputFormat(value[id], value);
+                if (lodashEs.isPlainObject(v)) {
+                    Object.assign(newVal, v);
+                }
+                else {
+                    newVal[id] = v;
+                }
+            }
+            else {
+                newVal[id] = value[id];
+            }
+        }
+        else {
+            newVal[id] = transformOutputValue(value[id], item.items || []);
+        }
+    });
+    return newVal;
+}
+/**
+ * 根据 content 中的 inputFormat 来处理 value
+ * inputFormat 接受的是当前层级的 value
+ * 复杂点在于，不管传入的 value 是否包含某表单项的 key，所有使用了 inputFormat 的项都有可能在这次 update 中被更新
+ */
+function transformInputValue(value, content) {
+    const newVal = {};
+    content.forEach((item) => {
+        const { id } = item;
+        if (item.inputFormat) {
+            const v = item.inputFormat(value);
+            if (v !== undefined) {
+                newVal[id] = v;
+            }
+        }
+        else if (id in value) {
+            if (item.type !== 'group') {
+                newVal[id] = value[id];
+            }
+            else {
+                newVal[id] = transformInputValue(value[id], item.items || []);
+            }
+        }
+    });
+    return newVal;
+}
+/**
+ * 递归合并 oldV & newV，策略如下：
+ * 1. 过滤掉 newV 中不存在于 content 中的项
+ * 2. 如果该项的 type 不是 GROUP，直接覆盖合并到 oldV
+ * 3. 如果是，则递归执行步骤 1 到 3
+ */
+function mergeValue(oldV, newV, content) {
+    Object.keys(newV).forEach((k) => {
+        const item = content.find((item) => item.id === k);
+        if (!item) {
+            return;
+        }
+        if (item.type !== 'group') {
+            oldV[k] = newV[k];
+        }
+        else {
+            mergeValue(oldV[k], newV[k], item.items || []);
+        }
+    });
+}
+/**
+ * 格式化树状结构数据
+ *
+ * @param {Array} orignData 数据
+ * @param {Object} params 配置项
+ * @param {String} params.label 按orignData，label取值设置label
+ * @param {String} params.value 按orignData，value取值设置value
+ * @param {String} params.children 按orignData，children取值设置children
+ * @returns {Array}
+ */
+function transformTreeValue(orignData, params = {
+    label: 'label',
+    value: 'value',
+    children: 'children'
+}) {
+    const { label, value, children } = params;
+    orignData.forEach((item) => {
+        let displayLabel;
+        let displayValue;
+        if (typeof label === 'function') {
+            displayLabel = label(item);
+        }
+        else {
+            displayLabel = item[label];
+        }
+        if (typeof value === 'function') {
+            displayValue = value(item);
+        }
+        else {
+            displayValue = item[value];
+        }
+        item.label = displayLabel;
+        item.value = displayValue;
+        const childrenData = transformTreeValue(item[children], params);
+        if (childrenData && childrenData.length) {
+            item.children = childrenData;
+        }
+    });
+    return orignData;
+}
+
+const useFormState = ({ props }) => {
+    const formPropsRef = vue.ref(lodashEs.cloneDeep(props));
+    /** 表单项数据 */
+    const formModel = vue.reactive({});
+    /** 表单默认数据 */
+    const defaultFormValues = vue.reactive({});
+    /** 表单options集合对象 */
+    const options = vue.ref({});
+    /** 表单实例 */
+    const elFormRef = vue.ref();
+    // 收集options
+    vue.watch(() => props.content, (val) => {
+        if (val) {
+            options.value = { ...options.value, ...collect(val, 'options') };
+        }
+    }, {
+        immediate: true,
+        deep: true
+    });
+    return {
+        elFormRef,
+        formModel,
+        defaultFormValues,
+        options,
+        formPropsRef,
+        contentRef: vue.computed(() => vue.unref(formPropsRef).content || [])
+    };
+};
+
+const useFormMethods = (formMethodsContext) => {
+    const { formModel, defaultFormValues, contentRef } = formMethodsContext;
+    /**
+     * 更新表单数据
+     * @param  {String} options.id 表单ID
+     * @param  {All} options.val 表单数据
+     */
+    const updateFormValue = ({ id, val }) => {
+        formModel[id] = val;
+    };
+    /**
+     * 初始化数据
+     * 没使用 v-model 时才从 default 采集数据
+     * default值没法考虑 inputFormat
+     */
+    const initFormValues = () => {
+        if (!contentRef.value.length) {
+            return;
+        }
+        const newValue = collect(contentRef.value, 'default');
+        if (!lodashEs.isEqual(formModel, newValue)) {
+            Object.entries(newValue).forEach(([key, value]) => {
+                formModel[key] = value;
+                defaultFormValues[key] = lodashEs.cloneDeep(value);
+            });
+        }
+    };
+    return {
+        updateFormValue,
+        initFormValues
+    };
+};
+
+const useFormEvents = (useFormEventsContext) => {
+    const { formModel, defaultFormValues, elFormRef, contentRef, options } = useFormEventsContext;
+    /**
+     * 返回表单结果
+     * @return {object}
+     */
+    function getFormValue() {
+        return transformOutputValue(formModel, contentRef.value);
+    }
+    /**
+     * 对整个表单的内容进行验证。 返回 Promise。
+     * @return {Promise}
+     */
+    async function validate() {
+        var _a;
+        return await ((_a = elFormRef.value) === null || _a === void 0 ? void 0 : _a.validate());
+    }
+    /**
+     * 之所以不用 el-form 的 resetFields 机制，有以下原因：
+     * - el-form 的 resetFields 无视 el-form-renderer 的自定义组件
+     * - el-form 的 resetFields 不会触发 input & change 事件，无法监听
+     *   0. 建议先在监听器 watch.value 里 console.log(v.name, oldV.name)
+     *   1. 打开 basic 示例
+     *   2. 在 label 为 name 的输入框里输入 1，此时 log：'1' ''
+     *   3. 点击 reset 按钮，此时 log 两条数据： '1' '1', '' ''
+     *   4. 因为 _isequal(v, oldV)，所以没有触发 v-model 更新
+     */
+    async function resetFields() {
+        var _a;
+        Object.keys(formModel).forEach((key) => {
+            formModel[key] = lodashEs.cloneDeep(defaultFormValues[key]);
+        });
+        await vue.nextTick();
+        (_a = elFormRef.value) === null || _a === void 0 ? void 0 : _a.clearValidate();
+    }
+    /**
+     *  更新表单值
+     */
+    function updateForm(newValue) {
+        newValue = transformInputValue(newValue, contentRef.value);
+        const cloneFormModel = lodashEs.cloneDeep(formModel);
+        mergeValue(cloneFormModel, newValue, contentRef.value);
+        Object.keys(cloneFormModel).forEach((key) => {
+            formModel[key] = cloneFormModel[key];
+        });
+    }
+    /**
+     * 更新 options值
+     * @param {string} id
+     * @param {array} data
+     * @public
+     */
+    function setOptions(id, data) {
+        options.value[id] = data;
+    }
+    return {
+        getFormValue,
+        validate,
+        resetFields,
+        updateForm,
+        setOptions
+    };
+};
+
+const key = Symbol('v-form-renderer');
+function createFormContext(instance) {
+    vue.provide(key, instance);
+}
+function useFormContext(formProps = {}) {
+    return vue.inject(key, formProps);
 }
 
-const script = {};
+var script$2 = /*@__PURE__*/ vue.defineComponent({
+    __name: 'RenderFormItem',
+    props: /*@__PURE__*/ vue.mergeModels(renderFormItemProps, {
+        "itemValue": { type: null },
+        "itemValueModifiers": {},
+    }),
+    emits: /*@__PURE__*/ vue.mergeModels(['updateValue'], ["update:itemValue"]),
+    setup(__props, { emit: __emit }) {
+        const props = __props;
+        const itemValue = vue.useModel(__props, 'itemValue');
+        const emit = __emit;
+        const formContext = useFormContext();
+        const { data, value } = props;
+        const { hidden = () => false, disabled = () => false } = data;
+        const propsInner = vue.ref({});
+        // label标签是否为str
+        const _isLabelTypeStr = vue.computed(() => typeof data.label === 'string');
+        // 是否显示
+        const _show = vue.computed(() => !hidden(value, data));
+        // 是否禁用
+        const disabledStatus = vue.computed(() => disabled(value, data));
+        // 组件内options
+        const _options = vue.computed(() => {
+            // type类型为group时，需遍历索引获取到options数据
+            const keys = props.id.split('.');
+            let optionData = lodashEs.cloneDeep(formContext.options.value);
+            for (const k in keys) {
+                optionData = optionData[keys[k]];
+                if (!optionData) {
+                    break;
+                }
+            }
+            return optionData || [];
+        });
+        // 只读
+        const readonly = vue.computed(() => props.readonly);
+        // 是否显示只读内容
+        const hasReadonlyContent = vue.computed(() => ['input', 'select'].includes(data.type || ''));
+        // 规则是否有失去焦点的触发
+        const isBlurTrigger = vue.computed(() => {
+            if (!data.rules) {
+                return false;
+            }
+            return data.rules.some((rule) => {
+                return rule.required && rule.trigger === 'blur';
+            });
+        });
+        // 组件属性
+        const componentProps = vue.computed(() => {
+            var _a;
+            return ({
+                options: _options.value || [], // 兼容cascader
+                formData: value, // 保存表单对象值
+                componentType: (_a = data.type) !== null && _a !== void 0 ? _a : '',
+                ...data.el,
+                ...propsInner.value
+            });
+        });
+        // 多选时，只读回显值
+        const multipleValue = vue.computed(() => {
+            const itemVals = vue.unref(itemValue);
+            const multipleSelectValue = lodashEs.get(data, 'el.multiple') && Array.isArray(itemVals) ? itemVals : [itemVals];
+            const multipleSelect = multipleSelectValue
+                .map((val) => (_options.value.find((op) => op.value === val) || {}).label)
+                .filter((item) => typeof item !== 'undefined');
+            return multipleSelect.length ? multipleSelect.join() : itemValue;
+        });
+        // 事件监听
+        const listeners = vue.computed(() => {
+            const { id, on = {}, on: { input: originOnInput = noop, change: originOnChange = noop } = {}, trim = true } = data;
+            return {
+                ...lodashEs.fromPairs(lodashEs.toPairs(on).map(([eName, handler]) => [eName, (...args) => handler(args, formContext.updateForm)])),
+                // 手动更新表单数据
+                input: (val, ...rest) => {
+                    // 调用自定义input事件
+                    originOnInput([val, ...rest], formContext.updateForm, formContext.setOptions);
+                    // element 以下组件没有input事件，当调用原生input事件时，取值有问题，直接return
+                    if (['radio-group', 'checkbox-group', 'select', 'tree-select'].includes(data.type || '')) {
+                        return;
+                    }
+                    emit('updateValue', { id, val });
+                    // 触发校验
+                    triggerValidate();
+                },
+                change: (val, ...rest) => {
+                    // 调用自定义change事件
+                    originOnChange([val, ...rest], formContext.updateForm, formContext.setOptions);
+                    // element 以下组件没有change事件，当调用原生change事件时，取值有问题，直接return
+                    if (['tree-select'].includes(data.type || '')) {
+                        return;
+                    }
+                    if (typeof val === 'string' && trim) {
+                        val = val.trim();
+                    }
+                    emit('updateValue', { id, val });
+                    // 触发校验
+                    triggerValidate();
+                }
+            };
+        });
+        const triggerValidate = async () => {
+            var _a;
+            if (!data.rules || !data.rules.length) {
+                return;
+            }
+            if (isBlurTrigger.value) {
+                return;
+            }
+            (_a = formContext.elFormRef.value) === null || _a === void 0 ? void 0 : _a.validateField(props.id).catch(() => { });
+        };
+        const optionKey = (opt) => {
+            if (opt.value instanceof Object) {
+                if (!data.el || !data.el.valueKey) {
+                    return;
+                }
+                return opt.value[data.el.valueKey];
+            }
+            else {
+                return opt.value;
+            }
+        };
+        // 收集options
+        vue.watch(() => data.remote, (v, oldV) => {
+            if (!v || !v.url) {
+                return;
+            }
+            if (oldV) {
+                if (v.url === oldV.url || v.request === oldV.request) {
+                    return;
+                }
+            }
+            // 需要options的type类型组件
+            const isOptionsCase = ['select', 'checkbox-group', 'radio-group'].includes(data.type || '');
+            // 级联选择
+            const isCascader = data.type === 'cascader';
+            // 支持post
+            const { url, request = () => url(v.params || {}).then((resp) => resp), prop = 'options', // 默认处理 el-cascader 的情况
+            dataPath = '', onResponse = (resp) => {
+                // 根据索引找到数据
+                if (dataPath) {
+                    resp = lodashEs.get(resp, dataPath);
+                }
+                if (isOptionsCase) {
+                    return resp.map((item) => {
+                        let displayLabel;
+                        let displayValue;
+                        if (typeof label === 'function') {
+                            displayLabel = label(item);
+                        }
+                        else {
+                            displayLabel = item[label];
+                        }
+                        if (typeof value === 'function') {
+                            displayValue = value(item);
+                        }
+                        else {
+                            displayValue = item[value];
+                        }
+                        return {
+                            label: displayLabel,
+                            value: displayValue
+                        };
+                    });
+                }
+                else if (isCascader) {
+                    return transformTreeValue(resp, {
+                        label,
+                        value,
+                        children
+                    });
+                }
+                else {
+                    return resp;
+                }
+            }, onError = (error) => console.error(error.message), label = 'label', value = 'value', children = 'children' } = v;
+            Promise.resolve(request())
+                .then(onResponse, onError)
+                .then((resp) => {
+                if (isOptionsCase) {
+                    formContext.setOptions(props.id, resp);
+                }
+                else {
+                    propsInner.value = {
+                        [prop]: resp
+                    };
+                }
+            });
+        }, {
+            immediate: true
+        });
+        return (_ctx, _cache) => {
+            const _component_el_input = vue.resolveComponent("el-input");
+            const _component_el_option = vue.resolveComponent("el-option");
+            const _component_el_checkbox = vue.resolveComponent("el-checkbox");
+            const _component_el_radio_button = vue.resolveComponent("el-radio-button");
+            const _component_el_radio = vue.resolveComponent("el-radio");
+            const _component_el_form_item = vue.resolveComponent("el-form-item");
+            return (_show.value)
+                ? (vue.openBlock(), vue.createBlock(_component_el_form_item, vue.mergeProps({ key: 0 }, vue.unref(data), {
+                    label: _isLabelTypeStr.value ? vue.unref(data).label : '',
+                    prop: props.id
+                }), vue.createSlots({
+                    default: vue.withCtx(() => [
+                        (readonly.value && hasReadonlyContent.value)
+                            ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
+                                (vue.unref(data).type === 'input')
+                                    ? (vue.openBlock(), vue.createBlock(_component_el_input, vue.mergeProps({ key: 0 }, componentProps.value, {
+                                        value: itemValue.value,
+                                        readonly: "",
+                                        placeholder: "--"
+                                    }), null, 16 /* FULL_PROPS */, ["value"]))
+                                    : (vue.unref(data).type === 'select')
+                                        ? (vue.openBlock(), vue.createBlock(_component_el_input, {
+                                            key: 1,
+                                            value: multipleValue.value,
+                                            readonly: "",
+                                            placeholder: "--"
+                                        }, null, 8 /* PROPS */, ["value"]))
+                                        : vue.createCommentVNode("v-if", true)
+                            ], 64 /* STABLE_FRAGMENT */))
+                            : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(data).component || vue.unref(RenderComponent)), vue.mergeProps({ key: 1 }, componentProps.value, {
+                                modelValue: itemValue.value,
+                                "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => ((itemValue).value = $event)),
+                                disabled: props.disabled || disabledStatus.value || readonly.value
+                            }, vue.toHandlers(listeners.value)), {
+                                default: vue.withCtx(() => [
+                                    (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_options.value, (opt, index) => {
+                                        var _a, _b;
+                                        return (vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
+                                            (vue.unref(data).type === 'select')
+                                                ? (vue.openBlock(), vue.createBlock(_component_el_option, vue.mergeProps({
+                                                    key: optionKey(opt) || index
+                                                }, { ref_for: true }, opt), null, 16 /* FULL_PROPS */))
+                                                : (vue.unref(data).type === 'checkbox-group')
+                                                    ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
+                                                        vue.createCommentVNode(" el-checkbox "),
+                                                        (vue.openBlock(), vue.createBlock(_component_el_checkbox, vue.mergeProps({
+                                                            key: opt.value
+                                                        }, { ref_for: true }, opt, {
+                                                            label: 'value' in opt ? opt.value : opt.label
+                                                        }), {
+                                                            default: vue.withCtx(() => [
+                                                                vue.createTextVNode(vue.toDisplayString(opt.label), 1 /* TEXT */)
+                                                            ]),
+                                                            _: 2 /* DYNAMIC */
+                                                        }, 1040 /* FULL_PROPS, DYNAMIC_SLOTS */, ["label"]))
+                                                    ], 2112 /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */))
+                                                    : (vue.unref(data).type === 'radio-group')
+                                                        ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
+                                                            vue.createCommentVNode(" WARNING: radio 用 label 属性来表示 value 的含义 "),
+                                                            vue.createCommentVNode(" FYI: radio 的 value 属性可以在没有 radio-group 时用来关联到同一个 v-model "),
+                                                            (((_b = (_a = vue.unref(data)) === null || _a === void 0 ? void 0 : _a.el) === null || _b === void 0 ? void 0 : _b.type) === 'button')
+                                                                ? (vue.openBlock(), vue.createBlock(_component_el_radio_button, vue.mergeProps({ key: index }, { ref_for: true }, opt, {
+                                                                    label: 'value' in opt ? opt.value : opt.label
+                                                                }), {
+                                                                    default: vue.withCtx(() => [
+                                                                        vue.createTextVNode(vue.toDisplayString(opt.label), 1 /* TEXT */)
+                                                                    ]),
+                                                                    _: 2 /* DYNAMIC */
+                                                                }, 1040 /* FULL_PROPS, DYNAMIC_SLOTS */, ["label"]))
+                                                                : (vue.openBlock(), vue.createBlock(_component_el_radio, vue.mergeProps({
+                                                                    key: opt.label
+                                                                }, { ref_for: true }, opt, {
+                                                                    label: 'value' in opt ? opt.value : opt.label
+                                                                }), {
+                                                                    default: vue.withCtx(() => [
+                                                                        vue.createTextVNode(vue.toDisplayString(opt.label), 1 /* TEXT */)
+                                                                    ]),
+                                                                    _: 2 /* DYNAMIC */
+                                                                }, 1040 /* FULL_PROPS, DYNAMIC_SLOTS */, ["label"]))
+                                                        ], 64 /* STABLE_FRAGMENT */))
+                                                        : vue.createCommentVNode("v-if", true)
+                                        ], 64 /* STABLE_FRAGMENT */));
+                                    }), 256 /* UNKEYED_FRAGMENT */))
+                                ]),
+                                _: 1 /* STABLE */
+                            }, 16 /* FULL_PROPS */, ["modelValue", "disabled"]))
+                    ]),
+                    _: 2 /* DYNAMIC */
+                }, [
+                    (!_isLabelTypeStr.value)
+                        ? {
+                            name: "label",
+                            fn: vue.withCtx(() => [
+                                (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(data).label)))
+                            ]),
+                            key: "0"
+                        }
+                        : undefined
+                ]), 1040 /* FULL_PROPS, DYNAMIC_SLOTS */, ["label", "prop"]))
+                : vue.createCommentVNode("v-if", true);
+        };
+    }
+});
+
+script$2.__file = "src/components/RenderFormItem.vue";
+
+var script$1 = /*@__PURE__*/ vue.defineComponent({
+    __name: 'RenderFormGroup',
+    props: /*@__PURE__*/ vue.mergeModels(renderFormItemProps, {
+        "itemValue": { type: null },
+        "itemValueModifiers": {},
+    }),
+    emits: /*@__PURE__*/ vue.mergeModels(['updateValue'], ["update:itemValue"]),
+    setup(__props, { emit: __emit }) {
+        const props = __props;
+        const itemValue = vue.useModel(__props, 'itemValue');
+        const emit = __emit;
+        const { data, value } = props;
+        const { hidden = () => false } = data;
+        // 是否显示
+        const _show = vue.computed(() => !hidden(value, data));
+        const updateValue = ({ id, val }) => {
+            emit('updateValue', {
+                id: data.id,
+                val: {
+                    ...itemValue.value,
+                    [id]: val
+                }
+            });
+        };
+        return (_ctx, _cache) => {
+            return (_show.value)
+                ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 0 }, vue.renderList(vue.unref(data).items, (item, index) => {
+                    return (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: index }, [
+                        vue.renderSlot(_ctx.$slots, `id:${item.id}`),
+                        vue.createVNode(script$2, {
+                            itemValue: itemValue.value[item.id],
+                            "onUpdate:itemValue": ($event) => ((itemValue.value[item.id]) = $event),
+                            ref_for: true,
+                            ref: `formItem-${item.id}`,
+                            id: `${vue.unref(data).id}.${item.id}`,
+                            data: item,
+                            value: vue.unref(value),
+                            disabled: _ctx.disabled,
+                            readonly: _ctx.readonly,
+                            zindex: index,
+                            onUpdateValue: updateValue
+                        }, null, 8 /* PROPS */, ["itemValue", "onUpdate:itemValue", "id", "data", "value", "disabled", "readonly", "zindex"])
+                    ], 64 /* STABLE_FRAGMENT */));
+                }), 128 /* KEYED_FRAGMENT */))
+                : vue.createCommentVNode("v-if", true);
+        };
+    }
+});
+
+script$1.__file = "src/components/RenderFormGroup.vue";
+
+const GROUP = 'group'; // 表单嵌套组
+// 表单内部状态
+var script = /*@__PURE__*/ vue.defineComponent({
+    ...{
+        name: 'VFormRenderer'
+    },
+    __name: 'v-form-renderer',
+    props: /*@__PURE__*/ vue.mergeModels(vFormProps, {
+        "model": {},
+        "modelModifiers": {},
+    }),
+    emits: /*@__PURE__*/ vue.mergeModels(['enter'], ["update:model"]),
+    setup(__props, { expose: __expose }) {
+        // 定义v-model指令
+        const model = vue.useModel(__props, 'model');
+        const props = __props;
+        const { labelWidth, content, disabled, readonly, inline } = vue.toRefs(props);
+        const formState = useFormState({ props });
+        const { formModel, elFormRef } = formState;
+        // 表单内部方法
+        const formMethods = useFormMethods({ ...formState });
+        const { updateFormValue, initFormValues } = formMethods;
+        // 表单事件
+        const formEvents = useFormEvents({ ...formState });
+        // 初始化表单默认值
+        initFormValues();
+        // 当前组件所有的状态和方法
+        const instance = {
+            ...formState,
+            ...formMethods,
+            ...formEvents
+        };
+        createFormContext(instance);
+        __expose({ ...formEvents });
+        vue.watch(formModel, (val) => {
+            // 如果表单未绑定v-model则不更新model的值
+            if (!model.value) {
+                return;
+            }
+            model.value = val;
+        }, { immediate: true });
+        vue.watch(model, (v, oldV) => {
+            if (!v || lodashEs.isEqual(v, oldV)) {
+                return;
+            }
+            formEvents.updateForm(lodashEs.cloneDeep(v));
+        }, { immediate: true });
+        return (_ctx, _cache) => {
+            const _component_el_form = vue.resolveComponent("el-form");
+            return (vue.openBlock(), vue.createElementBlock("div", null, [
+                vue.createVNode(_component_el_form, vue.mergeProps({
+                    ref_key: "elFormRef",
+                    ref: elFormRef,
+                    inline: vue.unref(inline),
+                    "label-width": vue.unref(labelWidth)
+                }, _ctx.$attrs, {
+                    model: vue.unref(formModel),
+                    class: "el-form-renderer",
+                    onSubmit: _cache[0] || (_cache[0] = vue.withModifiers(() => { }, ["prevent"])),
+                    onKeyup: _cache[1] || (_cache[1] = vue.withKeys(($event) => (_ctx.$emit('enter')), ["enter"]))
+                }), {
+                    default: vue.withCtx(() => [
+                        (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(content), (item) => {
+                            return (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
+                                key: item.id
+                            }, [
+                                vue.renderSlot(_ctx.$slots, `id:${item.id}`),
+                                (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(item.type === GROUP ? script$1 : script$2), {
+                                    itemValue: vue.unref(formModel)[item.id],
+                                    "onUpdate:itemValue": ($event) => ((vue.unref(formModel)[item.id]) = $event),
+                                    ref_for: true,
+                                    ref: item.id,
+                                    data: item,
+                                    id: item.id,
+                                    value: vue.unref(formModel),
+                                    disabled: vue.unref(disabled),
+                                    readonly: vue.unref(readonly) || item.readonly,
+                                    onUpdateValue: vue.unref(updateFormValue)
+                                }, null, 40 /* PROPS, NEED_HYDRATION */, ["itemValue", "onUpdate:itemValue", "data", "id", "value", "disabled", "readonly", "onUpdateValue"]))
+                            ], 64 /* STABLE_FRAGMENT */));
+                        }), 128 /* KEYED_FRAGMENT */)),
+                        vue.renderSlot(_ctx.$slots, "default")
+                    ]),
+                    _: 3 /* FORWARDED */
+                }, 16 /* FULL_PROPS */, ["inline", "label-width", "model"])
+            ]));
+        };
+    }
+});
 
-script.render = render;
 script.__scopeId = "data-v-3f4b8568";
 script.__file = "src/v-form-renderer.vue";
 
 exports.default = script;
-//# sourceMappingURL=index.cjs.js.map
+exports.vFormProps = vFormProps;