vxe-pc-ui 4.6.49 → 4.7.0

package/es/form-design/src/form-view.js

@@ -1,327 +0,0 @@
-import { ref, h, reactive, nextTick, inject, provide, watch } from 'vue';
-import { defineVxeComponent } from '../../ui/src/comp';
-import XEUtils from 'xe-utils';
-import { getConfig, renderer, useSize, createEvent, renderEmptyElement } from '../../ui';
-import { getSlotVNs } from '../../ui/src/vn';
-import { createDefaultFormViewPCFormConfig } from './default-setting-data';
-import VxeFormComponent from '../../form/src/form';
-import VxeFormGroupComponent from '../../form/src/form-group';
-import VxeFormItemComponent from '../../form/src/form-item';
-import { configToWidget } from './widget-info';
-import { warnLog } from '../../ui/src/log';
-export default defineVxeComponent({
-    name: 'VxeFormView',
-    props: {
-        modelValue: Object,
-        config: Object,
-        readonly: Boolean,
-        disabled: Boolean,
-        viewRender: Object,
-        formOptions: Object,
-        createFormConfig: Function,
-        size: {
-            type: String,
-            default: () => getConfig().formView.size || getConfig().size
-        }
-    },
-    emits: [
-        'update:modelValue',
-        'submit',
-        'reset'
-    ],
-    setup(props, context) {
-        const { emit, slots } = context;
-        const xID = XEUtils.uniqueId();
-        const refElem = ref();
-        const formRef = ref();
-        const { computeSize } = useSize(props);
-        const $xeFormDesignLayoutStyle = inject('$xeFormDesignLayoutStyle', null);
-        const reactData = reactive({
-            formConfig: {},
-            formRules: {},
-            widgetObjList: []
-        });
-        const refMaps = {
-            refElem
-        };
-        const computeMaps = {
-            computeSize
-        };
-        const $xeFormView = {
-            xID,
-            props,
-            context,
-            reactData,
-            getRefMaps: () => refMaps,
-            getComputeMaps: () => computeMaps
-        };
-        const clearConfig = () => {
-            return loadConfig({
-                formConfig: {},
-                widgetData: []
-            });
-        };
-        const loadConfig = (config) => {
-            if (config) {
-                const { formConfig, widgetData } = config;
-                loadFormConfig(formConfig || {});
-                loadWidgetData(widgetData || []);
-            }
-            return nextTick();
-        };
-        const parseConfig = (config) => {
-            const { formConfig, widgetData } = config || {};
-            const widgetObjList = parseWidgetData(widgetData || []);
-            return Object.assign(Object.assign({}, parseForm(widgetObjList)), { formConfig: parseFormConfig(formConfig || {}), widgetData: widgetObjList });
-        };
-        const parseFormConfig = (formConfig) => {
-            const { viewRender, createFormConfig, formOptions } = props;
-            const params = { viewRender, formConfig };
-            if (createFormConfig) {
-                return createFormConfig(params);
-            }
-            const { name } = viewRender || {};
-            const compConf = renderer.get(name) || {};
-            const createPCFormConfig = compConf ? compConf.createFormViewFormConfig : null;
-            return Object.assign({}, createPCFormConfig ? createPCFormConfig(params) : createDefaultFormViewPCFormConfig(params), formOptions);
-        };
-        const loadFormConfig = (formConfig) => {
-            reactData.formConfig = parseFormConfig(formConfig);
-            return nextTick();
-        };
-        const parseForm = (widgetObjList) => {
-            const formData = {};
-            const formRules = {};
-            XEUtils.eachTree(widgetObjList, widget => {
-                const { name, field, required } = widget;
-                const compConf = renderer.get(name) || {};
-                const createWidgetFieldValue = compConf.createFormDesignWidgetFieldValue;
-                const createWidgetFieldRules = compConf.createFormDesignWidgetFieldRules;
-                formData[field] = createWidgetFieldValue ? createWidgetFieldValue({ widget, $formView: $xeFormView }) : getWidgetDefaultValue(widget);
-                if (createWidgetFieldRules) {
-                    const rules = createWidgetFieldRules({ widget, $formView: $xeFormView });
-                    if (rules && rules.length) {
-                        formRules[field] = rules;
-                    }
-                }
-                else if (required) {
-                    formRules[field] = getWidgetDefaultRule();
-                }
-            }, { children: 'children' });
-            return {
-                formData,
-                formRules
-            };
-        };
-        const parseWidgetData = (widgetData) => {
-            return (widgetData || []).map(item => configToWidget(item));
-        };
-        const loadWidgetData = (widgetData) => {
-            const widgetObjList = parseWidgetData(widgetData);
-            reactData.widgetObjList = widgetObjList;
-            const { formData, formRules } = parseForm(widgetObjList);
-            reactData.formRules = formRules;
-            emit('update:modelValue', Object.assign(formData, props.modelValue));
-            return nextTick();
-        };
-        const getWidgetDefaultValue = (widget) => {
-            switch (widget.name) {
-                case 'subtable':
-                    return [];
-            }
-            return null;
-        };
-        const getWidgetDefaultRule = () => {
-            return [
-                { required: true, content: '该填写该字段！' }
-            ];
-        };
-        const updateWidgetStatus = (widget, value) => {
-            const { field } = widget;
-            const $form = formRef.value;
-            if ($form) {
-                $form.updateStatus({ field }, value);
-            }
-            return nextTick();
-        };
-        const setItemValue = (widget, value) => {
-            const { modelValue } = props;
-            const { field } = widget;
-            const $form = formRef.value;
-            if (modelValue) {
-                modelValue[field] = value;
-            }
-            if ($form) {
-                $form.updateStatus({ field }, value);
-            }
-            return nextTick();
-        };
-        const getItemValue = (widget) => {
-            const { modelValue } = props;
-            if (modelValue) {
-                return modelValue[widget.field];
-            }
-            return null;
-        };
-        const dispatchEvent = (type, params, evnt) => {
-            emit(type, createEvent(evnt, { $formView: $xeFormView }, params));
-        };
-        const toWidgetFields = (widget) => {
-            if (widget) {
-                if (XEUtils.isArray(widget)) {
-                    return widget.map(item => item.name);
-                }
-                else {
-                    return [widget.name];
-                }
-            }
-            return null;
-        };
-        const formViewMethods = {
-            dispatchEvent,
-            clearConfig,
-            loadConfig,
-            parseConfig,
-            loadFormConfig,
-            loadWidgetData,
-            updateWidgetStatus,
-            setItemValue,
-            getItemValue,
-            validate() {
-                const $form = formRef.value;
-                if ($form) {
-                    return $form.validate();
-                }
-                return nextTick();
-            },
-            validateWidget(widget) {
-                const $form = formRef.value;
-                if ($form) {
-                    return $form.validateField(toWidgetFields(widget));
-                }
-                return nextTick();
-            },
-            clearValidate(widget) {
-                const $form = formRef.value;
-                if ($form) {
-                    return $form.clearValidate(toWidgetFields(widget));
-                }
-                return nextTick();
-            },
-            reset() {
-                const { widgetObjList } = reactData;
-                const { formData } = parseForm(widgetObjList);
-                emit('update:modelValue', Object.assign({}, formData));
-                return nextTick();
-            },
-            /**
-             * 已废弃
-             * @deprecated
-             */
-            updateItemStatus(widget, value) {
-                warnLog('vxe.error.delFunc', ['updateItemStatus', 'updateWidgetStatus']);
-                return updateWidgetStatus(widget, value);
-            }
-        };
-        const handleSubmit = (params) => {
-            dispatchEvent('submit', params, params.$event);
-        };
-        const handleReset = (params) => {
-            dispatchEvent('reset', params, params.$event);
-        };
-        const formViewPrivateMethods = {};
-        Object.assign($xeFormView, formViewMethods, formViewPrivateMethods);
-        const renderVN = () => {
-            const { readonly, disabled, modelValue } = props;
-            const { formConfig, formRules, widgetObjList } = reactData;
-            const vSize = computeSize.value;
-            const topSlot = slots.top;
-            const bottomSlot = slots.bottom;
-            const headerSlot = slots.header;
-            const footerSlot = slots.footer;
-            return h('div', {
-                ref: refElem,
-                class: ['vxe-form-view', {
-                        [`size--${vSize}`]: vSize
-                    }]
-            }, [
-                topSlot
-                    ? h('div', {
-                        class: 'vxe-form-view--top'
-                    }, getSlotVNs(topSlot({ $formView: $xeFormView })))
-                    : renderEmptyElement($xeFormView),
-                h(VxeFormComponent, Object.assign(Object.assign({ ref: formRef }, formConfig), { data: modelValue, customLayout: true, readonly,
-                    disabled, span: 24, rules: formRules, onSubmit: handleSubmit, onReset: handleReset }), {
-                    default() {
-                        const { readonly, disabled } = props;
-                        return [
-                            headerSlot
-                                ? h(VxeFormItemComponent, {}, {
-                                    default() {
-                                        return headerSlot({});
-                                    }
-                                })
-                                : renderEmptyElement($xeFormView),
-                            ...widgetObjList.map(widget => {
-                                const { name } = widget;
-                                const compConf = renderer.get(name) || {};
-                                const renderWidgetDesignView = compConf.renderFormDesignWidgetView;
-                                const renderWidgetDesignPreview = compConf.renderFormDesignWidgetPreview;
-                                const renderWidgetDesignMobilePreview = compConf.renderFormDesignWidgetMobilePreview;
-                                const isEditMode = !!$xeFormDesignLayoutStyle;
-                                const renderOpts = widget;
-                                const params = { widget, readonly: !!readonly, disabled: !!disabled, isEditMode, isViewMode: !isEditMode, $formDesign: null, $formView: $xeFormView };
-                                return h(VxeFormGroupComponent, {
-                                    key: widget.id
-                                }, {
-                                    default() {
-                                        // 如果处于表单设计器-样式设置-预览模式下
-                                        if ($xeFormDesignLayoutStyle) {
-                                            if ($xeFormDesignLayoutStyle.reactData.activeTab === 2) {
-                                                if (renderWidgetDesignMobilePreview) {
-                                                    return getSlotVNs(renderWidgetDesignMobilePreview(renderOpts, params));
-                                                }
-                                            }
-                                            else {
-                                                if (renderWidgetDesignPreview) {
-                                                    return getSlotVNs(renderWidgetDesignPreview(renderOpts, params));
-                                                }
-                                            }
-                                        }
-                                        return renderWidgetDesignView ? getSlotVNs(renderWidgetDesignView(renderOpts, params)) : [];
-                                    }
-                                });
-                            }),
-                            footerSlot
-                                ? h(VxeFormGroupComponent, {
-                                    span: 24
-                                }, {
-                                    default() {
-                                        return footerSlot({});
-                                    }
-                                })
-                                : renderEmptyElement($xeFormView)
-                        ];
-                    }
-                }),
-                bottomSlot
-                    ? h('div', {
-                        class: 'vxe-form-view--bottom'
-                    }, getSlotVNs(bottomSlot({ $formView: $xeFormView })))
-                    : renderEmptyElement($xeFormView)
-            ]);
-        };
-        $xeFormView.renderVN = renderVN;
-        watch(() => props.config, (value) => {
-            loadConfig(value || {});
-        });
-        if (props.config) {
-            loadConfig(props.config);
-        }
-        provide('$xeFormView', $xeFormView);
-        return $xeFormView;
-    },
-    render() {
-        return this.renderVN();
-    }
-});

package/es/form-design/src/layout-preview.js

@@ -1,147 +0,0 @@
-import { h, inject, TransitionGroup } from 'vue';
-import { defineVxeComponent } from '../../ui/src/comp';
-import { renderer } from '@vxe-ui/core';
-import { getSlotVNs } from '../../ui/src/vn';
-import { ViewItemComponent } from './layout-view-item';
-import { hasFormDesignLayoutType } from '../src/util';
-import VxeFormComponent from '../../form/src/form';
-import XEUtils from 'xe-utils';
-export default defineVxeComponent({
-    name: 'FormDesignLayoutPreview',
-    props: {},
-    emits: [],
-    setup() {
-        const $xeFormDesign = inject('$xeFormDesign', null);
-        if (!$xeFormDesign) {
-            return () => [];
-        }
-        const { reactData: formDesignReactData } = $xeFormDesign;
-        const dragenterEvent = (evnt) => {
-            const { widgetObjList, dragWidget } = formDesignReactData;
-            if (dragWidget) {
-                evnt.preventDefault();
-                const rest = XEUtils.findTree(widgetObjList, item => item && item.id === dragWidget.id, { children: 'children' });
-                if (!rest) {
-                    formDesignReactData.sortWidget = dragWidget;
-                    widgetObjList.push(dragWidget);
-                    $xeFormDesign.dispatchEvent('drag-widget', { widget: dragWidget }, evnt);
-                }
-            }
-        };
-        const dragoverEvent = (evnt) => {
-            evnt.preventDefault();
-        };
-        let lastDragTime = Date.now();
-        const handleDragenterTopPlaceEvent = (evnt) => {
-            const { widgetObjList, sortWidget } = formDesignReactData;
-            evnt.stopPropagation();
-            if (lastDragTime > Date.now() - 300) {
-                evnt.preventDefault();
-                return;
-            }
-            if (sortWidget) {
-                if (hasFormDesignLayoutType(sortWidget)) {
-                    return;
-                }
-                // const targetRest = XEUtils.findTree(widgetObjList, item => item && item.id === widgetId, { children: 'children' })
-                const currRest = XEUtils.findTree(widgetObjList, item => item.id === sortWidget.id, { children: 'children' });
-                if (currRest) {
-                    const { item, index, items, parent } = currRest;
-                    if (parent && parent.name === 'row') {
-                        // 如是是从 row 移出
-                        currRest.items[currRest.index] = $xeFormDesign.createEmptyWidget();
-                    }
-                    else {
-                        items.splice(index, 1);
-                    }
-                    widgetObjList.unshift(item);
-                    lastDragTime = Date.now();
-                    $xeFormDesign.dispatchEvent('drag-widget', { widget: item }, evnt);
-                }
-            }
-        };
-        const handleDragenterBottomPlaceEvent = (evnt) => {
-            const { widgetObjList, sortWidget } = formDesignReactData;
-            evnt.stopPropagation();
-            if (lastDragTime > Date.now() - 300) {
-                evnt.preventDefault();
-                return;
-            }
-            if (sortWidget) {
-                if (hasFormDesignLayoutType(sortWidget)) {
-                    return;
-                }
-                // const targetRest = XEUtils.findTree(widgetObjList, item => item && item.id === widgetId, { children: 'children' })
-                const currRest = XEUtils.findTree(widgetObjList, item => item.id === sortWidget.id, { children: 'children' });
-                if (currRest) {
-                    const { item, index, items, parent } = currRest;
-                    if (parent && parent.name === 'row') {
-                        // 如是是从 row 移出
-                        currRest.items[currRest.index] = $xeFormDesign.createEmptyWidget();
-                    }
-                    else {
-                        items.splice(index, 1);
-                    }
-                    widgetObjList.push(item);
-                    lastDragTime = Date.now();
-                    $xeFormDesign.dispatchEvent('drag-widget', { widget: item }, evnt);
-                }
-            }
-        };
-        return () => {
-            const { widgetObjList } = formDesignReactData;
-            return h('div', {
-                class: 'vxe-form-design--preview',
-                onDragenter: dragenterEvent,
-                onDragover: dragoverEvent
-            }, [
-                h('div', {
-                    class: 'vxe-form-design--preview-wrapper'
-                }, [
-                    h('div', {
-                        class: 'vxe-form-design--preview-place-widget',
-                        onDragenter: handleDragenterTopPlaceEvent
-                    }),
-                    h(VxeFormComponent, {
-                        customLayout: true,
-                        span: 24,
-                        vertical: true
-                    }, {
-                        default() {
-                            return h(TransitionGroup, {
-                                class: 'vxe-form-design--preview-list',
-                                tag: 'div',
-                                name: 'vxe-form-design--preview-list'
-                            }, {
-                                default: () => {
-                                    return widgetObjList.map((widget, widgetIndex) => {
-                                        return h(ViewItemComponent, {
-                                            key: widget.id,
-                                            item: widget,
-                                            itemIndex: widgetIndex,
-                                            items: widgetObjList
-                                        }, {
-                                            default() {
-                                                const { name } = widget;
-                                                const compConf = renderer.get(name) || {};
-                                                const renderWidgetDesignView = compConf.renderFormDesignWidgetEdit || compConf.renderFormDesignWidgetView;
-                                                const renderOpts = widget;
-                                                const isEditMode = true;
-                                                const params = { widget, readonly: false, disabled: false, isEditMode, isViewMode: !isEditMode, $formDesign: $xeFormDesign, $formView: null };
-                                                return renderWidgetDesignView ? getSlotVNs(renderWidgetDesignView(renderOpts, params)) : [];
-                                            }
-                                        });
-                                    });
-                                }
-                            });
-                        }
-                    }),
-                    h('div', {
-                        class: 'vxe-form-design--preview-place-widget',
-                        onDragenter: handleDragenterBottomPlaceEvent
-                    })
-                ])
-            ]);
-        };
-    }
-});

package/es/form-design/src/layout-setting.js

@@ -1,94 +0,0 @@
-import { h, inject, createCommentVNode, watch, ref } from 'vue';
-import { defineVxeComponent } from '../../ui/src/comp';
-import { getI18n, renderer } from '@vxe-ui/core';
-import { getSlotVNs } from '../../ui/src/vn';
-import VxeTabsComponent from '../../tabs/src/tabs';
-import VxeTabPaneComponent from '../../tabs/src/tab-pane';
-import { DefaultSettingFormComponent } from './default-setting-form';
-export default defineVxeComponent({
-    name: 'FormDesignLayoutSetting',
-    props: {},
-    emits: [],
-    setup() {
-        const $xeFormDesign = inject('$xeFormDesign', null);
-        if (!$xeFormDesign) {
-            return () => [];
-        }
-        const { props: formDesignProps, reactData: formDesignReactData } = $xeFormDesign;
-        const activeTab = ref(1);
-        const renderSettingWidgetForm = () => {
-            const { activeWidget } = formDesignReactData;
-            if (activeWidget) {
-                const compConf = renderer.get(activeWidget.name);
-                const renderWidgetFormView = compConf ? compConf.renderFormDesignWidgetFormView : null;
-                if (renderWidgetFormView) {
-                    const isEditMode = true;
-                    return h('div', {
-                        class: 'vxe-form-design--custom-widget-form-view'
-                    }, getSlotVNs(renderWidgetFormView(activeWidget, { isEditMode, isViewMode: !isEditMode, widget: activeWidget, $formDesign: $xeFormDesign, $formView: null })));
-                }
-            }
-            return createCommentVNode();
-        };
-        const renderSettingConfigForm = () => {
-            const { formRender } = formDesignProps;
-            const { formData } = formDesignReactData;
-            if (formRender) {
-                const compConf = renderer.get(formRender.name);
-                const renderSettingView = compConf ? compConf.renderFormDesignSettingFormView : null;
-                if (renderSettingView) {
-                    return h('div', {
-                        class: 'vxe-form-design--custom-setting-form-view'
-                    }, getSlotVNs(renderSettingView({}, { $formDesign: $xeFormDesign })));
-                }
-            }
-            return h(DefaultSettingFormComponent, {
-                formData
-            });
-        };
-        watch(() => formDesignReactData.activeWidget, () => {
-            activeTab.value = 1;
-        });
-        return () => {
-            return h('div', {
-                class: 'vxe-form-design--setting'
-            }, [
-                h('div', {
-                    class: 'vxe-form-design--setting-form'
-                }, [
-                    h(VxeTabsComponent, {
-                        modelValue: activeTab.value,
-                        titleWidth: '50%',
-                        titleAlign: 'center',
-                        padding: true,
-                        class: 'vxe-form-design--setting-form-tabs',
-                        'onUpdate:modelValue'(val) {
-                            activeTab.value = val;
-                        }
-                    }, {
-                        default() {
-                            return [
-                                h(VxeTabPaneComponent, {
-                                    title: getI18n('vxe.formDesign.widgetPropTab'),
-                                    name: 1
-                                }, {
-                                    default() {
-                                        return renderSettingWidgetForm();
-                                    }
-                                }),
-                                h(VxeTabPaneComponent, {
-                                    title: getI18n('vxe.formDesign.widgetFormTab'),
-                                    name: 2
-                                }, {
-                                    default() {
-                                        return renderSettingConfigForm();
-                                    }
-                                })
-                            ];
-                        }
-                    })
-                ])
-            ]);
-        };
-    }
-});