vxe-pc-ui 4.6.49 → 4.7.0

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

@@ -1,191 +0,0 @@
-import { createCommentVNode, h, inject, ref, reactive, provide } from 'vue';
-import { defineVxeComponent } from '../../ui/src/comp';
-import { getIcon, getI18n, renderer } from '@vxe-ui/core';
-import { getSlotVNs } from '../../ui/src/vn';
-import VxeModalComponent from '../../modal/src/modal';
-import VxeTabsComponent from '../../tabs/src/tabs';
-import VxeTabPaneComponent from '../../tabs/src/tab-pane';
-import VxeFormViewComponent from './form-view';
-import { DefaultPCStyleFormComponent, DefaultMobileStyleFormComponent } from './default-style-form';
-import { createDefaultFormViewPCFormConfig, createDefaultFormViewMobileFormConfig } from './default-setting-data';
-export default defineVxeComponent({
-    name: 'FormDesignLayoutStyle',
-    props: {},
-    emits: [],
-    setup() {
-        const $xeFormDesign = inject('$xeFormDesign', null);
-        const reactData = reactive({
-            activeTab: 1
-        });
-        const $xeFormDesignLayoutStyle = {
-            reactData,
-            renderVN() {
-                return [];
-            }
-        };
-        if (!$xeFormDesign) {
-            return $xeFormDesignLayoutStyle;
-        }
-        const { props: formDesignProps, reactData: formDesignReactData } = $xeFormDesign;
-        const settingVisible = ref(false);
-        const settingConfig = ref(null);
-        const settingFormData = ref({});
-        const updatePreviewView = () => {
-            settingConfig.value = $xeFormDesign.getConfig();
-        };
-        const createFormViewFormConfig = (params) => {
-            const { viewRender } = params;
-            const { activeTab } = reactData;
-            const { name } = viewRender || {};
-            const compConf = renderer.get(name) || {};
-            const createPCFormConfig = compConf ? compConf.createFormViewFormConfig : null;
-            const createMobileFormConfig = compConf ? compConf.createFormViewMobileFormConfig : null;
-            if (activeTab === 2) {
-                if (createMobileFormConfig) {
-                    return createMobileFormConfig(params);
-                }
-                return createDefaultFormViewMobileFormConfig(params);
-            }
-            if (createPCFormConfig) {
-                return createPCFormConfig(params);
-            }
-            return createDefaultFormViewPCFormConfig(params);
-        };
-        const formDesignLayoutStyleMethod = {
-            updatePreviewView,
-            openStylePreview() {
-                const { showPc } = formDesignProps;
-                updatePreviewView();
-                reactData.activeTab = showPc ? 1 : 2;
-                settingVisible.value = true;
-            }
-        };
-        Object.assign($xeFormDesignLayoutStyle, formDesignLayoutStyleMethod);
-        const renderStylePreview = () => {
-            const { activeTab } = reactData;
-            return h('div', {
-                class: ['vxe-form-design--layout-style-preview', `is--${activeTab === 2 ? 'mobile' : 'pc'}`]
-            }, [
-                h(VxeFormViewComponent, {
-                    modelValue: settingFormData.value,
-                    config: settingConfig.value,
-                    createFormConfig: createFormViewFormConfig,
-                    'onUpdate:modelValue'(val) {
-                        settingFormData.value = val;
-                    }
-                })
-            ]);
-        };
-        const renderMobileStyle = () => {
-            const { formRender } = formDesignProps;
-            const { formData } = formDesignReactData;
-            if (formRender) {
-                const compConf = renderer.get(formRender.name);
-                const renderSettingMobileFormView = compConf ? compConf.renderFormDesignMobileStyleFormView : null;
-                if (renderSettingMobileFormView) {
-                    return h('div', {
-                        class: 'vxe-form-design--custom-setting-mobile-form-view'
-                    }, getSlotVNs(renderSettingMobileFormView({}, { $formDesign: $xeFormDesign, formConfig: formData })));
-                }
-            }
-            return h(DefaultMobileStyleFormComponent, {
-                formData
-            });
-        };
-        const renderPCStyle = () => {
-            const { formRender } = formDesignProps;
-            const { formData } = formDesignReactData;
-            if (formRender) {
-                const compConf = renderer.get(formRender.name);
-                const renderStylePCFormView = compConf ? compConf.renderFormDesignStyleFormView : null;
-                if (renderStylePCFormView) {
-                    return h('div', {
-                        class: 'vxe-form-design--custom-setting-pc-form-view'
-                    }, getSlotVNs(renderStylePCFormView({}, { $formDesign: $xeFormDesign, formConfig: formData })));
-                }
-            }
-            return h(DefaultPCStyleFormComponent, {
-                formData
-            });
-        };
-        const renderStyleSetting = () => {
-            const { showPc, showMobile } = formDesignProps;
-            const { activeTab } = reactData;
-            return h('div', {
-                class: 'vxe-form-design--layout-style-setting'
-            }, [
-                h(VxeTabsComponent, {
-                    modelValue: activeTab,
-                    titleWidth: showPc && showMobile ? '50%' : '100%',
-                    titleAlign: 'center',
-                    padding: true,
-                    onChange: updatePreviewView,
-                    'onUpdate:modelValue'(val) {
-                        reactData.activeTab = val;
-                    }
-                }, {
-                    default() {
-                        const tabVNs = [];
-                        if (showPc) {
-                            tabVNs.push(h(VxeTabPaneComponent, {
-                                title: getI18n('vxe.formDesign.widgetProp.displaySetting.pc'),
-                                icon: getIcon().FORM_DESIGN_PROPS_PC,
-                                k: 1,
-                                name: 1
-                            }, {
-                                default() {
-                                    return renderPCStyle();
-                                }
-                            }));
-                        }
-                        if (showMobile) {
-                            tabVNs.push(h(VxeTabPaneComponent, {
-                                title: getI18n('vxe.formDesign.widgetProp.displaySetting.mobile'),
-                                icon: getIcon().FORM_DESIGN_PROPS_MOBILE,
-                                key: 2,
-                                name: 2
-                            }, {
-                                default() {
-                                    return renderMobileStyle();
-                                }
-                            }));
-                        }
-                        return tabVNs;
-                    }
-                })
-            ]);
-        };
-        const renderVN = () => {
-            const { showPc, showMobile } = formDesignProps;
-            return h(VxeModalComponent, {
-                modelValue: settingVisible.value,
-                title: getI18n('vxe.formDesign.styleSetting.title'),
-                height: '90vh',
-                width: '90vw',
-                escClosable: true,
-                maskClosable: true,
-                destroyOnClose: true,
-                showMaximize: true,
-                transfer: true,
-                'onUpdate:modelValue'(val) {
-                    settingVisible.value = val;
-                }
-            }, {
-                default() {
-                    return h('div', {
-                        class: 'vxe-form-design--layout-style'
-                    }, [
-                        renderStylePreview(),
-                        showPc || showMobile ? renderStyleSetting() : createCommentVNode()
-                    ]);
-                }
-            });
-        };
-        $xeFormDesignLayoutStyle.renderVN = renderVN;
-        provide('$xeFormDesignLayoutStyle', $xeFormDesignLayoutStyle);
-        return $xeFormDesignLayoutStyle;
-    },
-    render() {
-        return this.renderVN();
-    }
-});

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

@@ -1,138 +0,0 @@
-import { h, inject, createCommentVNode } from 'vue';
-import { defineVxeComponent } from '../../ui/src/comp';
-import XEUtils from 'xe-utils';
-import { getIcon } from '@vxe-ui/core';
-import VxeButtonComponent from '../../button/src/button';
-export const ViewItemComponent = defineVxeComponent({
-    name: 'FormDesignLayoutViewItem',
-    props: {
-        item: {
-            type: Object,
-            default: () => ({})
-        },
-        itemIndex: {
-            type: Number,
-            default: 0
-        },
-        items: {
-            type: Array,
-            default: () => []
-        }
-    },
-    emits: [],
-    setup(props, { slots }) {
-        const $xeFormDesign = inject('$xeFormDesign', null);
-        if (!$xeFormDesign) {
-            return () => [];
-        }
-        const { reactData: formDesignReactData } = $xeFormDesign;
-        const sortDragstartEvent = (evnt) => {
-            const { widgetObjList } = formDesignReactData;
-            const divEl = evnt.currentTarget;
-            const widgetId = Number(divEl.getAttribute('data-widget-id'));
-            const currRest = XEUtils.findTree(widgetObjList, item => item && item.id === widgetId, { children: 'children' });
-            if (currRest) {
-                formDesignReactData.dragWidget = null;
-                formDesignReactData.sortWidget = currRest.item;
-            }
-        };
-        const sortDragendEvent = () => {
-            formDesignReactData.activeWidget = formDesignReactData.sortWidget;
-            formDesignReactData.sortWidget = null;
-        };
-        const sortDragenterEvent = (evnt) => {
-            const { widgetObjList, sortWidget } = formDesignReactData;
-            const formDesignInternalData = $xeFormDesign.internalData;
-            const { lastDragTime } = formDesignInternalData;
-            if (lastDragTime && lastDragTime > Date.now() - 300) {
-                evnt.preventDefault();
-                return;
-            }
-            if (sortWidget) {
-                const divEl = evnt.currentTarget;
-                evnt.preventDefault();
-                const widgetId = Number(divEl.getAttribute('data-widget-id'));
-                if (widgetId !== sortWidget.id) {
-                    const targetRest = XEUtils.findTree(widgetObjList, item => item && item.id === widgetId, { children: 'children' });
-                    if (targetRest) {
-                        const currRest = XEUtils.findTree(widgetObjList, item => item && item.id === sortWidget.id, { children: 'children' });
-                        if (currRest) {
-                            // 控件换位置
-                            if (currRest.parent && currRest.parent.name === 'row') {
-                                // 如是是从 row 移出
-                                currRest.items[currRest.index] = $xeFormDesign.createEmptyWidget();
-                            }
-                            else {
-                                currRest.items.splice(currRest.index, 1);
-                            }
-                            targetRest.items.splice(targetRest.index, 0, currRest.item);
-                            formDesignInternalData.lastDragTime = Date.now();
-                            $xeFormDesign.dispatchEvent('drag-widget', { widget: currRest.item }, evnt);
-                        }
-                    }
-                }
-            }
-        };
-        // const dragoverItemEvent = (evnt: DragEvent) => {
-        //   // const { sortWidget, dragWidget } = formDesignReactData
-        //   // if (sortWidget || dragWidget) {
-        //   //   evnt.preventDefault()
-        //   // }
-        // }
-        const handleClickEvent = (evnt, item) => {
-            $xeFormDesign.handleClickWidget(evnt, item);
-        };
-        return () => {
-            const { dragWidget, activeWidget, sortWidget } = formDesignReactData;
-            const { item } = props;
-            const { name } = item;
-            const isActive = activeWidget && activeWidget.id === item.id;
-            const defaultSlot = slots.default;
-            return h('div', {
-                key: item.id,
-                'data-widget-id': item.id,
-                draggable: true,
-                class: ['vxe-form-design--preview-item', `widget-${XEUtils.kebabCase(name)}`, {
-                        'is--active': isActive,
-                        'is--sort': sortWidget && sortWidget.id === item.id,
-                        'is--drag': dragWidget && dragWidget.id === item.id
-                    }],
-                onDragstart: sortDragstartEvent,
-                onDragend: sortDragendEvent,
-                onDragenter: sortDragenterEvent,
-                // onDragover: dragoverItemEvent,
-                onClick(evnt) {
-                    handleClickEvent(evnt, item);
-                }
-            }, [
-                h('div', {
-                    class: 'vxe-form-design--preview-item-view vxe-form--item-row'
-                }, defaultSlot ? defaultSlot({}) : []),
-                isActive
-                    ? h('div', {
-                        class: 'vxe-form-design--preview-item-operate'
-                    }, [
-                        h(VxeButtonComponent, {
-                            icon: getIcon().FORM_DESIGN_WIDGET_COPY,
-                            status: 'primary',
-                            size: 'mini',
-                            circle: true,
-                            onClick(params) {
-                                $xeFormDesign.handleCopyWidget(params.$event, item);
-                            }
-                        }),
-                        h(VxeButtonComponent, {
-                            icon: getIcon().FORM_DESIGN_WIDGET_DELETE,
-                            status: 'danger',
-                            size: 'mini',
-                            circle: true,
-                            onClick(params) {
-                                $xeFormDesign.handleRemoveWidget(params.$event, item);
-                            }
-                        })
-                    ])
-                    : createCommentVNode()
-            ]);
-        };
-    }
-});

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

@@ -1,133 +0,0 @@
-import { h, inject } from 'vue';
-import { defineVxeComponent } from '../../ui/src/comp';
-import XEUtils from 'xe-utils';
-import { getIcon, getI18n, renderer } from '@vxe-ui/core';
-import { getSlotVNs } from '../../ui/src/vn';
-import { getWidgetConfig, getWidgetConfigTitle } from './widget-info';
-export default defineVxeComponent({
-    props: {},
-    emits: [],
-    setup() {
-        const $xeFormDesign = inject('$xeFormDesign', null);
-        if (!$xeFormDesign) {
-            return () => [];
-        }
-        const { reactData: formDesignReactData } = $xeFormDesign;
-        const dragstartEvent = (evnt) => {
-            const divEl = evnt.currentTarget;
-            const dataTransfer = evnt.dataTransfer;
-            const widgetName = divEl.getAttribute('data-widget-name') || '';
-            if ($xeFormDesign.validWidgetUnique(widgetName)) {
-                const dragWidget = $xeFormDesign.createWidget(widgetName);
-                if (dataTransfer) {
-                    dataTransfer.setData('text/plain', widgetName);
-                }
-                formDesignReactData.sortWidget = null;
-                formDesignReactData.dragWidget = dragWidget;
-            }
-            else {
-                evnt.preventDefault();
-            }
-        };
-        const dragendEvent = (evnt) => {
-            evnt.preventDefault();
-            if (formDesignReactData.dragWidget) {
-                const newWidget = formDesignReactData.dragWidget;
-                formDesignReactData.activeWidget = newWidget;
-                $xeFormDesign.dispatchEvent('add-widget', { newWidget }, evnt);
-            }
-            formDesignReactData.dragWidget = null;
-            formDesignReactData.sortWidget = null;
-        };
-        const cancelDragoverItem = (evnt, group) => {
-            const { widgetObjList, dragWidget } = formDesignReactData;
-            if (dragWidget) {
-                if (group.children.some(widget => widget.name === dragWidget.name)) {
-                    const rest = XEUtils.findTree(widgetObjList, item => item && item.id === dragWidget.id, { children: 'children' });
-                    if (rest) {
-                        rest.items.splice(rest.index, 1);
-                    }
-                }
-            }
-        };
-        const addNewWidget = (evnt, widgetName) => {
-            if ($xeFormDesign.validWidgetUnique(widgetName)) {
-                const { widgetObjList } = formDesignReactData;
-                const dragWidget = $xeFormDesign.createWidget(widgetName);
-                widgetObjList.push(dragWidget);
-                formDesignReactData.activeWidget = dragWidget;
-                formDesignReactData.sortWidget = null;
-                formDesignReactData.dragWidget = null;
-                $xeFormDesign.dispatchEvent('add-widget', { newWidget: dragWidget }, evnt);
-            }
-        };
-        const renderWidgetList = (group) => {
-            const widgetVNs = [];
-            if (group.children) {
-                group.children.forEach((widget, index) => {
-                    const { name } = widget;
-                    const configTitle = getWidgetConfigTitle(name, $xeFormDesign);
-                    const compConf = renderer.get(name) || {};
-                    const widgetConf = getWidgetConfig(name);
-                    const renderWidgetItem = compConf.renderFormDesignWidgetItem;
-                    widgetVNs.push(h('div', {
-                        key: index,
-                        class: 'vxe-form-design--widget-item'
-                    }, h('div', {
-                        class: 'vxe-form-design--widget-box',
-                        'data-widget-name': name,
-                        title: configTitle,
-                        draggable: true,
-                        onDragstart: dragstartEvent,
-                        onDragend: dragendEvent
-                    }, renderWidgetItem
-                        ? getSlotVNs(renderWidgetItem({}, { $formDesign: $xeFormDesign }))
-                        : [
-                            h('i', {
-                                class: ['vxe-form-design--widget-item-icon', widgetConf ? (widgetConf.icon || '') : '']
-                            }),
-                            h('span', {
-                                class: 'vxe-form-design--widget-item-name'
-                            }, configTitle),
-                            h('span', {
-                                class: 'vxe-form-design--widget-item-add',
-                                onClick(evnt) {
-                                    addNewWidget(evnt, name);
-                                }
-                            }, [
-                                h('i', {
-                                    class: getIcon().FORM_DESIGN_WIDGET_ADD
-                                })
-                            ])
-                        ])));
-                });
-            }
-            return widgetVNs;
-        };
-        const renderWidgetGroups = () => {
-            const { widgetConfigs } = formDesignReactData;
-            return widgetConfigs.map((config, gIndex) => {
-                const { title, group } = config;
-                return h('div', {
-                    key: gIndex,
-                    class: 'vxe-form-design--widget-group'
-                }, [
-                    h('div', {
-                        class: 'vxe-form-design--widget-title'
-                    }, group ? getI18n(`vxe.formDesign.widget.group.${group}`) : `${title || ''}`),
-                    h('div', {
-                        class: 'vxe-form-design--widget-list',
-                        onDragover(evnt) {
-                            cancelDragoverItem(evnt, config);
-                        }
-                    }, renderWidgetList(config))
-                ]);
-            });
-        };
-        return () => {
-            return h('div', {
-                class: 'vxe-form-design--widget'
-            }, renderWidgetGroups());
-        };
-    }
-});

package/es/form-design/src/use/index.js

@@ -1,5 +0,0 @@
-export * from './widget-name';
-export * from './widget-view';
-export * from './widget-subtable-view';
-export * from './widget-prop-data-source';
-export * from './widget-prop-default-value';

package/es/form-design/src/use/widget-name.js

@@ -1,11 +0,0 @@
-import { computed } from 'vue';
-import XEUtils from 'xe-utils';
-export function useWidgetName(props) {
-    const computeKebabCaseName = computed(() => {
-        const { renderOpts } = props;
-        return renderOpts ? XEUtils.kebabCase(renderOpts.name) : '';
-    });
-    return {
-        computeKebabCaseName
-    };
-}