vxe-pc-ui 4.1.8 → 4.1.9

package/es/form/src/form.js

@@ -638,6 +638,7 @@ export default defineComponent({
                 ref: refElem,
                 class: ['vxe-form', className ? (XEUtils.isFunction(className) ? className({ items: formItems, data, $form: $xeForm }) : className) : '', {
                         [`size--${vSize}`]: vSize,
+                        'custom--layout': customLayout,
                         'is--loading': loading
                     }],
                 onSubmit: submitEvent,

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

@@ -57,8 +57,7 @@ export default defineComponent({
             widgetObjList: [],
             dragWidget: null,
             sortWidget: null,
-            activeWidget: null,
-            sortSubWidget: null
+            activeWidget: null
         });
         const internalData = reactive({});
         const refMaps = {
@@ -116,6 +115,17 @@ export default defineComponent({
             reactData.formData = Object.assign({}, createSettingForm(), data);
             return nextTick();
         };
+        const getWidgetById = (id) => {
+            const { widgetObjList } = reactData;
+            if (id) {
+                const widgetId = XEUtils.toNumber(id);
+                const rest = XEUtils.findTree(widgetObjList, item => item && item.id === widgetId, { children: 'children' });
+                if (rest) {
+                    return rest.item;
+                }
+            }
+            return null;
+        };
         const getWidgetData = () => {
             const objList = XEUtils.clone(reactData.widgetObjList, true);
             XEUtils.eachTree(objList, item => {
@@ -156,6 +166,7 @@ export default defineComponent({
             reloadConfig,
             getFormConfig,
             loadFormConfig,
+            getWidgetById,
             getFormData() {
                 const { widgetObjList } = reactData;
                 const formData = {};

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

@@ -2,6 +2,7 @@ import { defineComponent, h, inject, TransitionGroup } from 'vue';
 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 defineComponent({
@@ -14,7 +15,7 @@ export default defineComponent({
             return () => [];
         }
         const { reactData: formDesignReactData } = $xeFormDesign;
-        const dragoverEvent = (evnt) => {
+        const dragenterEvent = (evnt) => {
             const { widgetObjList, dragWidget } = formDesignReactData;
             if (dragWidget) {
                 evnt.preventDefault();
@@ -26,11 +27,40 @@ export default defineComponent({
                 }
             }
         };
+        let lastDragTime = Date.now();
+        const handleDragenterPlaceEvent = (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',
-                onDragover: dragoverEvent
+                onDragenter: dragenterEvent
             }, [
                 h('div', {
                     class: 'vxe-form-design--preview-wrapper'
@@ -68,6 +98,10 @@ export default defineComponent({
                                 }
                             });
                         }
+                    }),
+                    h('div', {
+                        class: 'vxe-form-design--preview-place-widget',
+                        onDragenter: handleDragenterPlaceEvent
                     })
                 ])
             ]);

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

@@ -26,28 +26,23 @@ export const ViewItemComponent = defineComponent({
         }
         const { reactData: formDesignReactData } = $xeFormDesign;
         const sortDragstartEvent = (evnt) => {
-            const { widgetObjList, sortSubWidget } = formDesignReactData;
-            if (sortSubWidget) {
-                evnt.preventDefault();
-                return;
-            }
+            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;
-                formDesignReactData.sortSubWidget = null;
             }
         };
         const sortDragendEvent = () => {
             formDesignReactData.activeWidget = formDesignReactData.sortWidget;
             formDesignReactData.sortWidget = null;
         };
-        let isDragAnimate = false;
+        let lastDragTime = Date.now();
         const sortDragenterEvent = (evnt) => {
-            const { widgetObjList, sortWidget, sortSubWidget } = formDesignReactData;
-            if (isDragAnimate || sortSubWidget) {
+            const { widgetObjList, sortWidget } = formDesignReactData;
+            if (lastDragTime > Date.now() - 200) {
                 evnt.preventDefault();
                 return;
             }
@@ -61,27 +56,29 @@ export const ViewItemComponent = defineComponent({
                         const currRest = XEUtils.findTree(widgetObjList, item => item && item.id === sortWidget.id, { children: 'children' });
                         if (currRest) {
                             // 控件换位置
-                            currRest.items.splice(currRest.index, 1);
+                            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);
                             $xeFormDesign.dispatchEvent('drag-widget', { widget: currRest.item }, evnt);
-                            isDragAnimate = true;
-                            setTimeout(() => {
-                                isDragAnimate = false;
-                            }, 150);
+                            lastDragTime = Date.now();
                         }
                     }
                 }
             }
         };
-        const dragoverItemEvent = (evnt) => {
-            const { sortWidget, dragWidget, sortSubWidget } = formDesignReactData;
-            if (sortWidget || dragWidget || sortSubWidget) {
-                evnt.preventDefault();
-            }
-        };
+        // const dragoverItemEvent = (evnt: DragEvent) => {
+        //   // const { sortWidget, dragWidget } = formDesignReactData
+        //   // if (sortWidget || dragWidget) {
+        //   //   evnt.preventDefault()
+        //   // }
+        // }
         const handleClickEvent = (evnt, item) => {
             $xeFormDesign.handleClickWidget(evnt, item);
-            formDesignReactData.sortSubWidget = null;
         };
         return () => {
             const { dragWidget, activeWidget, sortWidget } = formDesignReactData;
@@ -101,7 +98,7 @@ export const ViewItemComponent = defineComponent({
                 onDragstart: sortDragstartEvent,
                 onDragend: sortDragendEvent,
                 onDragenter: sortDragenterEvent,
-                onDragover: dragoverItemEvent,
+                // onDragover: dragoverItemEvent,
                 onClick(evnt) {
                     handleClickEvent(evnt, item);
                 }

package/es/form-design/style.css

@@ -36,12 +36,17 @@
 .vxe-form-design--widget-row-view {
   position: relative;
   height: 100%;
+}
+
+.vxe-form-design--widget-row-view-item-inner {
+  position: relative;
+  height: 100%;
   min-height: 78px;
   padding: var(--vxe-ui-layout-padding-default);
   border: 1px solid transparent;
   cursor: grabbing;
 }
-.vxe-form-design--widget-row-view::before {
+.vxe-form-design--widget-row-view-item-inner::before {
   content: "";
   position: absolute;
   top: 0;
@@ -50,17 +55,17 @@
   height: 100%;
   z-index: 1;
 }
-.vxe-form-design--widget-row-view:hover {
+.vxe-form-design--widget-row-view-item-inner:not(.is--empty):hover {
   background-color: var(--vxe-ui-form-design-sub-widget-hover-background-color);
 }
-.vxe-form-design--widget-row-view:hover .vxe-form-design--widget-row-view-empty {
+.vxe-form-design--widget-row-view-item-inner:not(.is--empty):hover .vxe-form-design--widget-row-view-empty {
   background-color: transparent;
 }
-.vxe-form-design--widget-row-view.is--active {
+.vxe-form-design--widget-row-view-item-inner.is--active {
   border: 1px dashed var(--vxe-ui-font-primary-color);
   background-color: var(--vxe-ui-base-active-background-color);
 }
-.vxe-form-design--widget-row-view.is--drag, .vxe-form-design--widget-row-view.is--sort {
+.vxe-form-design--widget-row-view-item-inner.is--drag, .vxe-form-design--widget-row-view-item-inner.is--sort {
   background-color: var(--vxe-ui-base-drag-background-color);
 }
 
@@ -78,11 +83,11 @@
   background-color: var(--vxe-ui-layout-background-color);
 }
 
-.vxe-form-design--preview-item.widget-row::after, .vxe-form-design--preview-item.widget-subtable::after {
-  display: none;
-}
 .vxe-form-design--preview-item.widget-row {
-  padding: var(--vxe-ui-layout-padding-default) 0;
+  padding: 0 var(--vxe-ui-layout-padding-default);
+}
+.vxe-form-design--preview-item.widget-row::after {
+  display: none;
 }
 
 .vxe-form-design--widget-subtable-view {
@@ -92,6 +97,7 @@
   border-radius: var(--vxe-ui-base-border-radius);
   overflow-y: hidden;
   overflow-x: auto;
+  padding-top: var(--vxe-ui-layout-padding-default);
 }
 
 .vxe-form-design--widget-subtable-view-box {
@@ -108,7 +114,6 @@
   top: 0;
   display: flex;
   flex-shrink: 0;
-  padding-top: var(--vxe-ui-layout-padding-default);
   box-shadow: 8px 0px 10px -5px rgba(0, 0, 0, 0.12);
   border-radius: var(--vxe-ui-base-border-radius) 0 0 var(--vxe-ui-base-border-radius);
   z-index: 5;
@@ -116,7 +121,6 @@
 
 .vxe-form-design--widget-subtable-view-right {
   flex-grow: 1;
-  padding-top: var(--vxe-ui-layout-padding-default);
 }
 
 .vxe-form-design--widget-subtable-col {
@@ -177,13 +181,23 @@
 }
 
 .vxe-form-design--widget-subtable-view-wrapper {
+  position: relative;
   display: flex;
   flex-direction: row;
-  border: 1px solid var(--vxe-ui-input-border-color);
-  border-left: 0;
   background-color: var(--vxe-ui-layout-background-color);
   border-radius: 0 var(--vxe-ui-base-border-radius) var(--vxe-ui-base-border-radius) 0;
 }
+.vxe-form-design--widget-subtable-view-wrapper::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border: 1px solid var(--vxe-ui-input-border-color);
+  z-index: 1;
+  pointer-events: none;
+}
 
 .vxe-form-design--widget-subtable-view-list {
   display: flex;
@@ -204,7 +218,7 @@
   cursor: grabbing;
 }
 .vxe-form-design--widget-subtable-view-item:hover {
-  background: var(--vxe-ui-base-active-background-color);
+  background-color: var(--vxe-ui-form-design-sub-widget-hover-background-color);
 }
 .vxe-form-design--widget-subtable-view-item.is--active {
   background: var(--vxe-ui-base-active-background-color);
@@ -239,7 +253,7 @@
   color: var(--vxe-ui-font-placeholder-color);
   padding: 0 var(--vxe-ui-layout-padding-threefold);
   min-height: 78px;
-  min-width: 260px;
+  min-width: 200px;
   cursor: default;
 }
 
@@ -275,6 +289,16 @@
   border-bottom: 1px solid var(--vxe-ui-input-border-color);
 }
 
+.vxe-form-design--preview-item.widget-subtable {
+  padding: 0 var(--vxe-ui-layout-padding-double);
+}
+.vxe-form-design--preview-item.widget-subtable::after {
+  display: none;
+}
+.vxe-form-design--preview-item .vxe-form-design--preview-item-view .vxe-form-design--widget-subtable-form-item {
+  padding: 0;
+}
+
 .vxe-form-design--widget-form-item-devices {
   display: flex;
   flex-direction: column;
@@ -633,6 +657,10 @@
   border: 1px solid var(--vxe-ui-input-border-color);
 }
 
+.vxe-form-design--preview-place-widget {
+  height: 5.6em;
+}
+
 .vxe-form-design--widget-list {
   display: flex;
   flex-direction: row;
@@ -714,7 +742,7 @@
 .vxe-form-design--preview-item {
   position: relative;
   display: block;
-  padding: var(--vxe-ui-layout-padding-default);
+  padding: var(--vxe-ui-layout-padding-default) var(--vxe-ui-layout-padding-double);
   border: 1px solid transparent;
   cursor: grabbing;
 }

package/es/form-design/style.min.css

@@ -1 +1 @@
-.vxe-form-design--widget-form-empty-data{text-align:center;color:var(--vxe-ui-input-placeholder-color);border:1px solid var(--vxe-ui-input-border-color);border-radius:var(--vxe-ui-base-border-radius);padding:var(--vxe-ui-layout-padding-double)}.vxe-form-design--widget-row-form-row{border:1px solid var(--vxe-ui-input-border-color);margin-bottom:var(--vxe-ui-layout-padding-default);border-radius:var(--vxe-ui-base-border-radius);cursor:pointer}.vxe-form-design--widget-row-form-row:hover{border-color:var(--vxe-ui-font-primary-color)}.vxe-form-design--widget-row-form-row.is--active{border-color:var(--vxe-ui-font-primary-color);color:var(--vxe-ui-layout-background-color)}.vxe-form-design--widget-row-form-row.is--active .vxe-form-design--widget-row-form-col div{background:var(--vxe-ui-font-primary-color)}.vxe-form-design--widget-row-form-col{padding:var(--vxe-ui-layout-padding-default)}.vxe-form-design--widget-row-form-col>div{line-height:24px;background:var(--vxe-ui-font-tinge-color);text-align:center;border-radius:var(--vxe-ui-base-border-radius)}.vxe-form-design--widget-row-view{position:relative;height:100%;min-height:78px;padding:var(--vxe-ui-layout-padding-default);border:1px solid transparent;cursor:grabbing}.vxe-form-design--widget-row-view::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}.vxe-form-design--widget-row-view:hover{background-color:var(--vxe-ui-form-design-sub-widget-hover-background-color)}.vxe-form-design--widget-row-view:hover .vxe-form-design--widget-row-view-empty{background-color:transparent}.vxe-form-design--widget-row-view.is--active{border:1px dashed var(--vxe-ui-font-primary-color);background-color:var(--vxe-ui-base-active-background-color)}.vxe-form-design--widget-row-view.is--drag,.vxe-form-design--widget-row-view.is--sort{background-color:var(--vxe-ui-base-drag-background-color)}.vxe-form-design--widget-row-view-empty{display:flex;flex-direction:row;align-items:center;justify-content:center;height:100%;width:100%;padding:var(--vxe-ui-layout-padding-default);color:var(--vxe-ui-font-placeholder-color);border:2px dashed var(--vxe-ui-input-border-color);font-size:.95em;background-color:var(--vxe-ui-layout-background-color)}.vxe-form-design--preview-item.widget-row::after,.vxe-form-design--preview-item.widget-subtable::after{display:none}.vxe-form-design--preview-item.widget-row{padding:var(--vxe-ui-layout-padding-default) 0}.vxe-form-design--widget-subtable-view{display:flex;flex-direction:row;max-width:100%;border-radius:var(--vxe-ui-base-border-radius);overflow-y:hidden;overflow-x:auto}.vxe-form-design--widget-subtable-view-box{border:1px solid var(--vxe-ui-input-border-color);border-width:1px 1px 1px 0;display:inline-flex;flex-direction:row;flex-wrap:nowrap}.vxe-form-design--widget-subtable-view-left{position:sticky;left:0;top:0;display:flex;flex-shrink:0;padding-top:var(--vxe-ui-layout-padding-default);box-shadow:8px 0 10px -5px rgba(0,0,0,.12);border-radius:var(--vxe-ui-base-border-radius) 0 0 var(--vxe-ui-base-border-radius);z-index:5}.vxe-form-design--widget-subtable-view-right{flex-grow:1;padding-top:var(--vxe-ui-layout-padding-default)}.vxe-form-design--widget-subtable-col{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;flex-shrink:0;min-width:54px;text-align:center;border-top:1px solid var(--vxe-ui-input-border-color);border-right:1px solid var(--vxe-ui-input-border-color);border-bottom:1px solid var(--vxe-ui-input-border-color);background-color:var(--vxe-ui-layout-background-color)}.vxe-form-design--widget-subtable-col:first-child{border-left:1px solid var(--vxe-ui-input-border-color);border-radius:var(--vxe-ui-base-border-radius) 0 0 var(--vxe-ui-base-border-radius)}.vxe-form-design--widget-subtable-col::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}.vxe-form-design--widget-subtable-head{flex-shrink:0;height:2.8em;line-height:2.8em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 var(--vxe-ui-layout-padding-default);border-bottom:1px solid var(--vxe-ui-input-border-color)}.vxe-form-design--widget-subtable-body{flex-grow:1;padding:var(--vxe-ui-layout-padding-default)}.vxe-form-design--widget-subtable-body,.vxe-form-design--widget-subtable-head{width:100%}.vxe-form-design--widget-subtable-body,.vxe-form-design--widget-subtable-view-empty{display:flex;flex-direction:row;align-items:center;justify-content:center}.vxe-form-design--widget-subtable-view-wrapper{display:flex;flex-direction:row;border:1px solid var(--vxe-ui-input-border-color);border-left:0;background-color:var(--vxe-ui-layout-background-color);border-radius:0 var(--vxe-ui-base-border-radius) var(--vxe-ui-base-border-radius) 0}.vxe-form-design--widget-subtable-view-list{display:flex;flex-direction:row;flex-wrap:nowrap}.vxe-form-design--widget-subtable-view-list>.vxe-form-design--widget-subtable-view-item{border-right:1px solid var(--vxe-ui-input-border-color)}.vxe-form-design--widget-subtable-view-list-move{transition:transform .35s ease-in-out}.vxe-form-design--widget-subtable-view-item{position:relative;min-width:200px;cursor:grabbing}.vxe-form-design--widget-subtable-view-item:hover{background:var(--vxe-ui-base-active-background-color)}.vxe-form-design--widget-subtable-view-item.is--active{background:var(--vxe-ui-base-active-background-color)}.vxe-form-design--widget-subtable-view-item.is--active::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;border:1px dashed var(--vxe-ui-font-primary-color);pointer-events:none;z-index:2}.vxe-form-design--widget-subtable-view-item-box{height:100%}.vxe-form-design--widget-subtable-view-item-box::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}.vxe-form-design--widget-subtable-view-empty{flex-grow:1;color:var(--vxe-ui-font-placeholder-color);padding:0 var(--vxe-ui-layout-padding-threefold);min-height:78px;min-width:260px;cursor:default}.vxe-form-design--widget-subtable-form-item{overflow:hidden}.vxe-form-design--widget-subtable-form-item>.vxe-form--item-inner{overflow:hidden}.vxe-form-design--widget-subtable-form-item>.vxe-form--item-inner>.vxe-form--item-content{overflow:hidden}.vxe-form-design--widget-subtable-view-item-wrapper{height:100%}.vxe-form-design--widget-subtable-view-item-wrapper .vxe-form--item.is--vertical{padding:0}.vxe-form-design--widget-subtable-view-item-wrapper .vxe-form--item.is--vertical .vxe-form--item-title{height:2.8em;line-height:2.8em;padding:0 var(--vxe-ui-layout-padding-default)}.vxe-form-design--widget-subtable-view-item-wrapper .vxe-form--item.is--vertical .vxe-form--item-content{display:flex;flex-direction:row;align-items:center;justify-content:center;padding:var(--vxe-ui-layout-padding-default)}.vxe-form-design--widget-subtable-view-item-wrapper .vxe-form--item-title{border-bottom:1px solid var(--vxe-ui-input-border-color)}.vxe-form-design--widget-form-item-devices{display:flex;flex-direction:column}.vxe-form-design--widget-form-item-layout{display:flex;flex-direction:row}.vxe-form-design--widget-form-item-option{width:50%;text-align:center;padding:var(--vxe-ui-layout-padding-default);margin:0 var(--vxe-ui-layout-padding-default);border:1px solid var(--vxe-ui-input-border-color);border-radius:var(--vxe-ui-base-border-radius);cursor:pointer}.vxe-form-design--widget-form-item-option.is--vertical .vxe-form-design--widget-form-item-option-row{display:flex;flex-direction:column}.vxe-form-design--widget-form-item-option.is--vertical .vxe-form-design--widget-form-item-option-row:nth-child(1)::before{content:"";display:block;width:30%;height:1.2em;margin:2px;background-color:var(--vxe-ui-font-tinge-color);border-radius:var(--vxe-ui-base-border-radius)}.vxe-form-design--widget-form-item-option.is--vertical .vxe-form-design--widget-form-item-option-row:nth-child(2)::before{content:"";display:block;width:100%;height:1.2em;margin:2px;background-color:var(--vxe-ui-font-tinge-color);border-radius:var(--vxe-ui-base-border-radius)}.vxe-form-design--widget-form-item-option.is--horizontal .vxe-form-design--widget-form-item-option-row{display:flex;flex-direction:row}.vxe-form-design--widget-form-item-option.is--horizontal .vxe-form-design--widget-form-item-option-row:nth-child(1)::before,.vxe-form-design--widget-form-item-option.is--horizontal .vxe-form-design--widget-form-item-option-row:nth-child(2)::before{content:"";display:block;width:30%;height:1.2em;margin:2px;background-color:var(--vxe-ui-font-tinge-color);border-radius:var(--vxe-ui-base-border-radius)}.vxe-form-design--widget-form-item-option.is--horizontal .vxe-form-design--widget-form-item-option-row:nth-child(1)::after,.vxe-form-design--widget-form-item-option.is--horizontal .vxe-form-design--widget-form-item-option-row:nth-child(2)::after{content:"";display:block;width:70%;height:1.2em;margin:2px;background-color:var(--vxe-ui-font-tinge-color);border-radius:var(--vxe-ui-base-border-radius)}.vxe-form-design--widget-form-item-option:hover{border-color:var(--vxe-ui-font-primary-color)}.vxe-form-design--widget-form-item-option.is--active{color:var(--vxe-ui-font-primary-color);border-color:var(--vxe-ui-font-primary-color)}.vxe-form-design--widget-form-item-option.is--active .vxe-form-design--widget-form-item-option-row:nth-child(1)::after,.vxe-form-design--widget-form-item-option.is--active .vxe-form-design--widget-form-item-option-row:nth-child(1)::before,.vxe-form-design--widget-form-item-option.is--active .vxe-form-design--widget-form-item-option-row:nth-child(2)::after,.vxe-form-design--widget-form-item-option.is--active .vxe-form-design--widget-form-item-option-row:nth-child(2)::before{background-color:var(--vxe-ui-font-primary-color)}.vxe-form-design--widget-form-item-option-row{margin-bottom:.2em}.vxe-form-design--widget-form-item-data-source-wrapper{max-height:30vh;min-height:140px;overflow:auto}.vxe-form-design--widget-form-item-data-source-type{margin-bottom:16px}.vxe-form-design--widget-form-item-data-source-option{position:relative;display:flex;flex-direction:row;padding:var(--vxe-ui-layout-padding-half) 0}.vxe-form-design--widget-form-item-data-source-option::before{content:"";position:absolute;top:0;left:var(--vxe-ui-layout-padding-half);width:var(--vxe-ui-layout-padding-default);height:100%;border:1px dotted var(--vxe-ui-base-popup-border-color);border-width:0 0 0 1px}.vxe-form-design--widget-form-item-data-source-option::after{content:"";position:absolute;top:50%;left:var(--vxe-ui-layout-padding-half);width:var(--vxe-ui-layout-padding-default);height:0;border-top:1px dotted var(--vxe-ui-base-popup-border-color)}.vxe-form-design--widget-form-item-data-source-option.is--first::before{top:50%;height:50%}.vxe-form-design--widget-form-item-data-source-option.is--last::before{height:50%}.vxe-form-design--widget-form-item-data-source-option .vxe-button{flex-shrink:0}.vxe-form-design--widget-form-item-data-source-option .vxe-form-design--widget-expand-btn{display:flex;flex-direction:row;align-items:center;width:2em}.vxe-form-design--widget-form-item-data-source-option .vxe-form-design--widget-expand-btn i{cursor:pointer;background-color:var(--vxe-ui-layout-background-color);transition:transform .1s ease-in-out;z-index:2}.vxe-form-design--widget-form-item-data-source-sub-option{position:relative}.vxe-form-design--widget-form-item-data-source-sub-option::before{content:"";position:absolute;top:0;left:var(--vxe-ui-layout-padding-half);width:var(--vxe-ui-layout-padding-default);height:100%;border:1px dotted var(--vxe-ui-base-popup-border-color);border-width:0 0 0 1px}.vxe-form-design--widget-form-item-data-source-sub-option:last-child::before{display:none}.vxe-form-design--widget-form-item-data-source-sub-option .vxe-form-design--widget-form-item-data-source-option{padding-left:var(--vxe-ui-layout-padding-double)}.vxe-form-design--widget-form-item-data-source-sub-option .vxe-form-design--widget-form-item-data-source-option:first-child::before{top:0;height:50%}.vxe-form-design--widget-form-item-data-source-sub-option .vxe-form-design--widget-form-item-data-source-option::before{top:-50%;left:calc(var(--vxe-ui-layout-padding-double) + .5em);width:var(--vxe-ui-layout-padding-default);height:100%}.vxe-form-design--widget-form-item-data-source-sub-option .vxe-form-design--widget-form-item-data-source-option::after{left:calc(var(--vxe-ui-layout-padding-double) + .5em)}.vxe-form-design--widget-form-item-data-source-popup{height:100%;display:flex;flex-direction:column;overflow:auto}.vxe-form-design--widget-form-item-data-source-popup>.vxe-textarea{flex-grow:1}.vxe-form-design--widget-form-item-data-source-popup>.vxe-textarea .vxe-textarea--inner{height:100%}.vxe-form-design--widget-form-item-prop-list{margin-bottom:var(--vxe-ui-layout-padding-double);padding:0 var(--vxe-ui-layout-padding-default)}.vxe-form-design--widget-form-item-prop-list:first-child{margin-top:var(--vxe-ui-layout-padding-default)}.vxe-form-design--widget-form-item-prop-list>span{padding:0 .5em}.vxe-form-design--widget-form-item-prop-list>span:first-child{padding:0;padding-right:var(--vxe-ui-layout-padding-default)}.vxe-form-design--widget-form-item-prop-list .vxe-form-design--widget-form-item-prop-unit,.vxe-form-design--widget-form-item-prop-list .vxe-form-design--widget-form-item-prop-width,.vxe-form-design--widget-form-item-prop-list>span:first-child{display:inline-flex;vertical-align:middle}.vxe-form-design--widget-form-item-prop-list .vxe-form-design--widget-form-item-prop-width{width:90px}.vxe-form-design--widget-form-item-prop-list .vxe-form-design--widget-form-item-prop-unit{width:90px}.vxe-list-design--widget-form-item-prop-list{margin-bottom:var(--vxe-ui-layout-padding-double);padding:0 var(--vxe-ui-layout-padding-default)}.vxe-list-design--widget-form-item-prop-list:first-child{margin-top:var(--vxe-ui-layout-padding-default)}.vxe-list-design--widget-form-item-prop-list:last-child{margin-bottom:0}.vxe-list-design--widget-form-item-prop-list>span{padding:0 .5em}.vxe-list-design--widget-form-item-prop-list>span:first-child{padding:0;padding-right:var(--vxe-ui-layout-padding-default)}.vxe-form-design{display:flex;flex-direction:column;color:var(--vxe-ui-font-color);font-family:var(--vxe-ui-font-family)}.vxe-form-design{font-size:var(--vxe-ui-font-size-default)}.vxe-form-design.size--medium{font-size:var(--vxe-ui-font-size-medium)}.vxe-form-design.size--small{font-size:var(--vxe-ui-font-size-small)}.vxe-form-design.size--mini{font-size:var(--vxe-ui-font-size-mini)}.vxe-form-design--body{display:flex;flex-direction:row;flex-grow:1;overflow:hidden}.vxe-form-design--header{flex-shrink:0;padding:0 var(--vxe-ui-layout-padding-default)}.vxe-form-design--header-wrapper{display:flex;flex-direction:row;align-items:center;width:100%;min-height:3em;border:1px solid var(--vxe-ui-input-border-color);border-radius:var(--vxe-ui-base-border-radius)}.vxe-form-design--header-left,.vxe-form-design--header-right{flex-shrink:0}.vxe-form-design--header-middle{flex-grow:1}.vxe-form-design--layout-style{display:flex;flex-direction:row;height:100%;overflow:hidden}.vxe-form-design--layout-style-preview{flex-grow:1;padding-right:var(--vxe-ui-layout-padding-default);overflow:hidden}.vxe-form-design--layout-style-preview>.vxe-form-view{height:100%;width:100%;border:1px solid var(--vxe-ui-input-border-color);border-radius:var(--vxe-ui-base-border-radius);overflow:auto}.vxe-form-design--layout-style-preview.is--mobile>.vxe-form-view{width:400px;margin:0 auto}.vxe-form-design--layout-style-preview .vxe-form--item-content::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}.vxe-form-design--layout-style-setting{flex-shrink:0;width:300px;border:1px solid var(--vxe-ui-input-border-color);border-radius:var(--vxe-ui-base-border-radius);background-color:var(--vxe-ui-layout-background-color);z-index:1;overflow:auto}.vxe-form-design--widget{width:280px;flex-shrink:0;overflow:auto}.vxe-form-design--setting,.vxe-form-design--widget{padding:var(--vxe-ui-layout-padding-default);border-radius:var(--vxe-ui-base-border-radius)}.vxe-form-design--setting{width:300px;flex-shrink:0;overflow:auto}.vxe-form-design--preview{flex-grow:1;overflow:auto;padding:var(--vxe-ui-layout-padding-default) var(--vxe-ui-layout-padding-half);-webkit-user-select:none;-moz-user-select:none;user-select:none}.vxe-form-design--preview-wrapper{width:100%;height:100%;overflow:auto;padding:var(--vxe-ui-layout-padding-default) 0;background-color:var(--vxe-ui-layout-background-color);border-radius:var(--vxe-ui-base-border-radius);border:1px solid var(--vxe-ui-input-border-color)}.vxe-form-design--widget-list{display:flex;flex-direction:row;flex-wrap:wrap}.vxe-form-design--widget-title{font-weight:700;padding:var(--vxe-ui-layout-padding-half) 0 var(--vxe-ui-layout-padding-half) var(--vxe-ui-layout-padding-half)}.vxe-form-design--widget-group{border-radius:var(--vxe-ui-base-border-radius);padding:var(--vxe-ui-layout-padding-default);margin-bottom:var(--vxe-ui-layout-padding-default);background-color:var(--vxe-ui-layout-background-color);border:1px solid var(--vxe-ui-input-border-color)}.vxe-form-design--widget-item{width:50%;padding:var(--vxe-ui-layout-padding-half)}.vxe-form-design--widget-box{position:relative;height:32px;line-height:32px;font-size:var(--vxe-ui-form-design-widget-item-font-size);padding:0 var(--vxe-ui-layout-padding-half);border-radius:var(--vxe-ui-base-border-radius);border:1px solid var(--vxe-ui-input-border-color);background-color:var(--vxe-ui-layout-background-color);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:grabbing;-webkit-user-select:none;-moz-user-select:none;user-select:none}.vxe-form-design--widget-box:hover{border-color:var(--vxe-ui-font-primary-lighten-color);background-color:var(--vxe-ui-base-active-background-color)}.vxe-form-design--widget-box:hover .vxe-form-design--widget-item-add{display:block}.vxe-form-design--widget-item-icon{padding:0 .2em}.vxe-form-design--widget-item-name{padding-left:var(--vxe-ui-layout-padding-half)}.vxe-form-design--widget-item-add{display:none;position:absolute;top:0;right:var(--vxe-ui-layout-padding-default);width:1em;height:100%;cursor:pointer}.vxe-form-design--widget-item-add:hover{color:var(--vxe-ui-font-primary-color)}.vxe-form-design--preview-list{width:100%}.vxe-form-design--preview-list-move{transition:transform .35s ease-in-out}.vxe-form-design--preview-item{position:relative;display:block;padding:var(--vxe-ui-layout-padding-default);border:1px solid transparent;cursor:grabbing}.vxe-form-design--preview-item::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}.vxe-form-design--preview-item:hover{background-color:var(--vxe-ui-form-design-widget-hover-background-color)}.vxe-form-design--preview-item.is--active{border:1px dashed var(--vxe-ui-font-primary-color);background-color:var(--vxe-ui-base-active-background-color)}.vxe-form-design--preview-item.is--drag,.vxe-form-design--preview-item.is--sort{background-color:var(--vxe-ui-base-drag-background-color)}.vxe-form-design--preview-item-view{width:100%}.vxe-form-design--preview-item-operate{position:absolute;top:calc(var(--vxe-ui-layout-padding-default) * -1);right:var(--vxe-ui-layout-padding-default);z-index:3}.vxe-form-design--setting-form{height:100%;background-color:var(--vxe-ui-layout-background-color);border:1px solid var(--vxe-ui-input-border-color)}.vxe-form-design--setting-form-tabs{height:100%}.vxe-form-design .vxe-form--item.vxe-form-design--widget-render-form-item{padding:0}
+.vxe-form-design--widget-form-empty-data{text-align:center;color:var(--vxe-ui-input-placeholder-color);border:1px solid var(--vxe-ui-input-border-color);border-radius:var(--vxe-ui-base-border-radius);padding:var(--vxe-ui-layout-padding-double)}.vxe-form-design--widget-row-form-row{border:1px solid var(--vxe-ui-input-border-color);margin-bottom:var(--vxe-ui-layout-padding-default);border-radius:var(--vxe-ui-base-border-radius);cursor:pointer}.vxe-form-design--widget-row-form-row:hover{border-color:var(--vxe-ui-font-primary-color)}.vxe-form-design--widget-row-form-row.is--active{border-color:var(--vxe-ui-font-primary-color);color:var(--vxe-ui-layout-background-color)}.vxe-form-design--widget-row-form-row.is--active .vxe-form-design--widget-row-form-col div{background:var(--vxe-ui-font-primary-color)}.vxe-form-design--widget-row-form-col{padding:var(--vxe-ui-layout-padding-default)}.vxe-form-design--widget-row-form-col>div{line-height:24px;background:var(--vxe-ui-font-tinge-color);text-align:center;border-radius:var(--vxe-ui-base-border-radius)}.vxe-form-design--widget-row-view{position:relative;height:100%}.vxe-form-design--widget-row-view-item-inner{position:relative;height:100%;min-height:78px;padding:var(--vxe-ui-layout-padding-default);border:1px solid transparent;cursor:grabbing}.vxe-form-design--widget-row-view-item-inner::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}.vxe-form-design--widget-row-view-item-inner:not(.is--empty):hover{background-color:var(--vxe-ui-form-design-sub-widget-hover-background-color)}.vxe-form-design--widget-row-view-item-inner:not(.is--empty):hover .vxe-form-design--widget-row-view-empty{background-color:transparent}.vxe-form-design--widget-row-view-item-inner.is--active{border:1px dashed var(--vxe-ui-font-primary-color);background-color:var(--vxe-ui-base-active-background-color)}.vxe-form-design--widget-row-view-item-inner.is--drag,.vxe-form-design--widget-row-view-item-inner.is--sort{background-color:var(--vxe-ui-base-drag-background-color)}.vxe-form-design--widget-row-view-empty{display:flex;flex-direction:row;align-items:center;justify-content:center;height:100%;width:100%;padding:var(--vxe-ui-layout-padding-default);color:var(--vxe-ui-font-placeholder-color);border:2px dashed var(--vxe-ui-input-border-color);font-size:.95em;background-color:var(--vxe-ui-layout-background-color)}.vxe-form-design--preview-item.widget-row{padding:0 var(--vxe-ui-layout-padding-default)}.vxe-form-design--preview-item.widget-row::after{display:none}.vxe-form-design--widget-subtable-view{display:flex;flex-direction:row;max-width:100%;border-radius:var(--vxe-ui-base-border-radius);overflow-y:hidden;overflow-x:auto;padding-top:var(--vxe-ui-layout-padding-default)}.vxe-form-design--widget-subtable-view-box{border:1px solid var(--vxe-ui-input-border-color);border-width:1px 1px 1px 0;display:inline-flex;flex-direction:row;flex-wrap:nowrap}.vxe-form-design--widget-subtable-view-left{position:sticky;left:0;top:0;display:flex;flex-shrink:0;box-shadow:8px 0 10px -5px rgba(0,0,0,.12);border-radius:var(--vxe-ui-base-border-radius) 0 0 var(--vxe-ui-base-border-radius);z-index:5}.vxe-form-design--widget-subtable-view-right{flex-grow:1}.vxe-form-design--widget-subtable-col{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;flex-shrink:0;min-width:54px;text-align:center;border-top:1px solid var(--vxe-ui-input-border-color);border-right:1px solid var(--vxe-ui-input-border-color);border-bottom:1px solid var(--vxe-ui-input-border-color);background-color:var(--vxe-ui-layout-background-color)}.vxe-form-design--widget-subtable-col:first-child{border-left:1px solid var(--vxe-ui-input-border-color);border-radius:var(--vxe-ui-base-border-radius) 0 0 var(--vxe-ui-base-border-radius)}.vxe-form-design--widget-subtable-col::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}.vxe-form-design--widget-subtable-head{flex-shrink:0;height:2.8em;line-height:2.8em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 var(--vxe-ui-layout-padding-default);border-bottom:1px solid var(--vxe-ui-input-border-color)}.vxe-form-design--widget-subtable-body{flex-grow:1;padding:var(--vxe-ui-layout-padding-default)}.vxe-form-design--widget-subtable-body,.vxe-form-design--widget-subtable-head{width:100%}.vxe-form-design--widget-subtable-body,.vxe-form-design--widget-subtable-view-empty{display:flex;flex-direction:row;align-items:center;justify-content:center}.vxe-form-design--widget-subtable-view-wrapper{position:relative;display:flex;flex-direction:row;background-color:var(--vxe-ui-layout-background-color);border-radius:0 var(--vxe-ui-base-border-radius) var(--vxe-ui-base-border-radius) 0}.vxe-form-design--widget-subtable-view-wrapper::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;border:1px solid var(--vxe-ui-input-border-color);z-index:1;pointer-events:none}.vxe-form-design--widget-subtable-view-list{display:flex;flex-direction:row;flex-wrap:nowrap}.vxe-form-design--widget-subtable-view-list>.vxe-form-design--widget-subtable-view-item{border-right:1px solid var(--vxe-ui-input-border-color)}.vxe-form-design--widget-subtable-view-list-move{transition:transform .35s ease-in-out}.vxe-form-design--widget-subtable-view-item{position:relative;min-width:200px;cursor:grabbing}.vxe-form-design--widget-subtable-view-item:hover{background-color:var(--vxe-ui-form-design-sub-widget-hover-background-color)}.vxe-form-design--widget-subtable-view-item.is--active{background:var(--vxe-ui-base-active-background-color)}.vxe-form-design--widget-subtable-view-item.is--active::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;border:1px dashed var(--vxe-ui-font-primary-color);pointer-events:none;z-index:2}.vxe-form-design--widget-subtable-view-item-box{height:100%}.vxe-form-design--widget-subtable-view-item-box::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}.vxe-form-design--widget-subtable-view-empty{flex-grow:1;color:var(--vxe-ui-font-placeholder-color);padding:0 var(--vxe-ui-layout-padding-threefold);min-height:78px;min-width:200px;cursor:default}.vxe-form-design--widget-subtable-form-item{overflow:hidden}.vxe-form-design--widget-subtable-form-item>.vxe-form--item-inner{overflow:hidden}.vxe-form-design--widget-subtable-form-item>.vxe-form--item-inner>.vxe-form--item-content{overflow:hidden}.vxe-form-design--widget-subtable-view-item-wrapper{height:100%}.vxe-form-design--widget-subtable-view-item-wrapper .vxe-form--item.is--vertical{padding:0}.vxe-form-design--widget-subtable-view-item-wrapper .vxe-form--item.is--vertical .vxe-form--item-title{height:2.8em;line-height:2.8em;padding:0 var(--vxe-ui-layout-padding-default)}.vxe-form-design--widget-subtable-view-item-wrapper .vxe-form--item.is--vertical .vxe-form--item-content{display:flex;flex-direction:row;align-items:center;justify-content:center;padding:var(--vxe-ui-layout-padding-default)}.vxe-form-design--widget-subtable-view-item-wrapper .vxe-form--item-title{border-bottom:1px solid var(--vxe-ui-input-border-color)}.vxe-form-design--preview-item.widget-subtable{padding:0 var(--vxe-ui-layout-padding-double)}.vxe-form-design--preview-item.widget-subtable::after{display:none}.vxe-form-design--preview-item .vxe-form-design--preview-item-view .vxe-form-design--widget-subtable-form-item{padding:0}.vxe-form-design--widget-form-item-devices{display:flex;flex-direction:column}.vxe-form-design--widget-form-item-layout{display:flex;flex-direction:row}.vxe-form-design--widget-form-item-option{width:50%;text-align:center;padding:var(--vxe-ui-layout-padding-default);margin:0 var(--vxe-ui-layout-padding-default);border:1px solid var(--vxe-ui-input-border-color);border-radius:var(--vxe-ui-base-border-radius);cursor:pointer}.vxe-form-design--widget-form-item-option.is--vertical .vxe-form-design--widget-form-item-option-row{display:flex;flex-direction:column}.vxe-form-design--widget-form-item-option.is--vertical .vxe-form-design--widget-form-item-option-row:nth-child(1)::before{content:"";display:block;width:30%;height:1.2em;margin:2px;background-color:var(--vxe-ui-font-tinge-color);border-radius:var(--vxe-ui-base-border-radius)}.vxe-form-design--widget-form-item-option.is--vertical .vxe-form-design--widget-form-item-option-row:nth-child(2)::before{content:"";display:block;width:100%;height:1.2em;margin:2px;background-color:var(--vxe-ui-font-tinge-color);border-radius:var(--vxe-ui-base-border-radius)}.vxe-form-design--widget-form-item-option.is--horizontal .vxe-form-design--widget-form-item-option-row{display:flex;flex-direction:row}.vxe-form-design--widget-form-item-option.is--horizontal .vxe-form-design--widget-form-item-option-row:nth-child(1)::before,.vxe-form-design--widget-form-item-option.is--horizontal .vxe-form-design--widget-form-item-option-row:nth-child(2)::before{content:"";display:block;width:30%;height:1.2em;margin:2px;background-color:var(--vxe-ui-font-tinge-color);border-radius:var(--vxe-ui-base-border-radius)}.vxe-form-design--widget-form-item-option.is--horizontal .vxe-form-design--widget-form-item-option-row:nth-child(1)::after,.vxe-form-design--widget-form-item-option.is--horizontal .vxe-form-design--widget-form-item-option-row:nth-child(2)::after{content:"";display:block;width:70%;height:1.2em;margin:2px;background-color:var(--vxe-ui-font-tinge-color);border-radius:var(--vxe-ui-base-border-radius)}.vxe-form-design--widget-form-item-option:hover{border-color:var(--vxe-ui-font-primary-color)}.vxe-form-design--widget-form-item-option.is--active{color:var(--vxe-ui-font-primary-color);border-color:var(--vxe-ui-font-primary-color)}.vxe-form-design--widget-form-item-option.is--active .vxe-form-design--widget-form-item-option-row:nth-child(1)::after,.vxe-form-design--widget-form-item-option.is--active .vxe-form-design--widget-form-item-option-row:nth-child(1)::before,.vxe-form-design--widget-form-item-option.is--active .vxe-form-design--widget-form-item-option-row:nth-child(2)::after,.vxe-form-design--widget-form-item-option.is--active .vxe-form-design--widget-form-item-option-row:nth-child(2)::before{background-color:var(--vxe-ui-font-primary-color)}.vxe-form-design--widget-form-item-option-row{margin-bottom:.2em}.vxe-form-design--widget-form-item-data-source-wrapper{max-height:30vh;min-height:140px;overflow:auto}.vxe-form-design--widget-form-item-data-source-type{margin-bottom:16px}.vxe-form-design--widget-form-item-data-source-option{position:relative;display:flex;flex-direction:row;padding:var(--vxe-ui-layout-padding-half) 0}.vxe-form-design--widget-form-item-data-source-option::before{content:"";position:absolute;top:0;left:var(--vxe-ui-layout-padding-half);width:var(--vxe-ui-layout-padding-default);height:100%;border:1px dotted var(--vxe-ui-base-popup-border-color);border-width:0 0 0 1px}.vxe-form-design--widget-form-item-data-source-option::after{content:"";position:absolute;top:50%;left:var(--vxe-ui-layout-padding-half);width:var(--vxe-ui-layout-padding-default);height:0;border-top:1px dotted var(--vxe-ui-base-popup-border-color)}.vxe-form-design--widget-form-item-data-source-option.is--first::before{top:50%;height:50%}.vxe-form-design--widget-form-item-data-source-option.is--last::before{height:50%}.vxe-form-design--widget-form-item-data-source-option .vxe-button{flex-shrink:0}.vxe-form-design--widget-form-item-data-source-option .vxe-form-design--widget-expand-btn{display:flex;flex-direction:row;align-items:center;width:2em}.vxe-form-design--widget-form-item-data-source-option .vxe-form-design--widget-expand-btn i{cursor:pointer;background-color:var(--vxe-ui-layout-background-color);transition:transform .1s ease-in-out;z-index:2}.vxe-form-design--widget-form-item-data-source-sub-option{position:relative}.vxe-form-design--widget-form-item-data-source-sub-option::before{content:"";position:absolute;top:0;left:var(--vxe-ui-layout-padding-half);width:var(--vxe-ui-layout-padding-default);height:100%;border:1px dotted var(--vxe-ui-base-popup-border-color);border-width:0 0 0 1px}.vxe-form-design--widget-form-item-data-source-sub-option:last-child::before{display:none}.vxe-form-design--widget-form-item-data-source-sub-option .vxe-form-design--widget-form-item-data-source-option{padding-left:var(--vxe-ui-layout-padding-double)}.vxe-form-design--widget-form-item-data-source-sub-option .vxe-form-design--widget-form-item-data-source-option:first-child::before{top:0;height:50%}.vxe-form-design--widget-form-item-data-source-sub-option .vxe-form-design--widget-form-item-data-source-option::before{top:-50%;left:calc(var(--vxe-ui-layout-padding-double) + .5em);width:var(--vxe-ui-layout-padding-default);height:100%}.vxe-form-design--widget-form-item-data-source-sub-option .vxe-form-design--widget-form-item-data-source-option::after{left:calc(var(--vxe-ui-layout-padding-double) + .5em)}.vxe-form-design--widget-form-item-data-source-popup{height:100%;display:flex;flex-direction:column;overflow:auto}.vxe-form-design--widget-form-item-data-source-popup>.vxe-textarea{flex-grow:1}.vxe-form-design--widget-form-item-data-source-popup>.vxe-textarea .vxe-textarea--inner{height:100%}.vxe-form-design--widget-form-item-prop-list{margin-bottom:var(--vxe-ui-layout-padding-double);padding:0 var(--vxe-ui-layout-padding-default)}.vxe-form-design--widget-form-item-prop-list:first-child{margin-top:var(--vxe-ui-layout-padding-default)}.vxe-form-design--widget-form-item-prop-list>span{padding:0 .5em}.vxe-form-design--widget-form-item-prop-list>span:first-child{padding:0;padding-right:var(--vxe-ui-layout-padding-default)}.vxe-form-design--widget-form-item-prop-list .vxe-form-design--widget-form-item-prop-unit,.vxe-form-design--widget-form-item-prop-list .vxe-form-design--widget-form-item-prop-width,.vxe-form-design--widget-form-item-prop-list>span:first-child{display:inline-flex;vertical-align:middle}.vxe-form-design--widget-form-item-prop-list .vxe-form-design--widget-form-item-prop-width{width:90px}.vxe-form-design--widget-form-item-prop-list .vxe-form-design--widget-form-item-prop-unit{width:90px}.vxe-list-design--widget-form-item-prop-list{margin-bottom:var(--vxe-ui-layout-padding-double);padding:0 var(--vxe-ui-layout-padding-default)}.vxe-list-design--widget-form-item-prop-list:first-child{margin-top:var(--vxe-ui-layout-padding-default)}.vxe-list-design--widget-form-item-prop-list:last-child{margin-bottom:0}.vxe-list-design--widget-form-item-prop-list>span{padding:0 .5em}.vxe-list-design--widget-form-item-prop-list>span:first-child{padding:0;padding-right:var(--vxe-ui-layout-padding-default)}.vxe-form-design{display:flex;flex-direction:column;color:var(--vxe-ui-font-color);font-family:var(--vxe-ui-font-family)}.vxe-form-design{font-size:var(--vxe-ui-font-size-default)}.vxe-form-design.size--medium{font-size:var(--vxe-ui-font-size-medium)}.vxe-form-design.size--small{font-size:var(--vxe-ui-font-size-small)}.vxe-form-design.size--mini{font-size:var(--vxe-ui-font-size-mini)}.vxe-form-design--body{display:flex;flex-direction:row;flex-grow:1;overflow:hidden}.vxe-form-design--header{flex-shrink:0;padding:0 var(--vxe-ui-layout-padding-default)}.vxe-form-design--header-wrapper{display:flex;flex-direction:row;align-items:center;width:100%;min-height:3em;border:1px solid var(--vxe-ui-input-border-color);border-radius:var(--vxe-ui-base-border-radius)}.vxe-form-design--header-left,.vxe-form-design--header-right{flex-shrink:0}.vxe-form-design--header-middle{flex-grow:1}.vxe-form-design--layout-style{display:flex;flex-direction:row;height:100%;overflow:hidden}.vxe-form-design--layout-style-preview{flex-grow:1;padding-right:var(--vxe-ui-layout-padding-default);overflow:hidden}.vxe-form-design--layout-style-preview>.vxe-form-view{height:100%;width:100%;border:1px solid var(--vxe-ui-input-border-color);border-radius:var(--vxe-ui-base-border-radius);overflow:auto}.vxe-form-design--layout-style-preview.is--mobile>.vxe-form-view{width:400px;margin:0 auto}.vxe-form-design--layout-style-preview .vxe-form--item-content::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}.vxe-form-design--layout-style-setting{flex-shrink:0;width:300px;border:1px solid var(--vxe-ui-input-border-color);border-radius:var(--vxe-ui-base-border-radius);background-color:var(--vxe-ui-layout-background-color);z-index:1;overflow:auto}.vxe-form-design--widget{width:280px;flex-shrink:0;overflow:auto}.vxe-form-design--setting,.vxe-form-design--widget{padding:var(--vxe-ui-layout-padding-default);border-radius:var(--vxe-ui-base-border-radius)}.vxe-form-design--setting{width:300px;flex-shrink:0;overflow:auto}.vxe-form-design--preview{flex-grow:1;overflow:auto;padding:var(--vxe-ui-layout-padding-default) var(--vxe-ui-layout-padding-half);-webkit-user-select:none;-moz-user-select:none;user-select:none}.vxe-form-design--preview-wrapper{width:100%;height:100%;overflow:auto;padding:var(--vxe-ui-layout-padding-default) 0;background-color:var(--vxe-ui-layout-background-color);border-radius:var(--vxe-ui-base-border-radius);border:1px solid var(--vxe-ui-input-border-color)}.vxe-form-design--preview-place-widget{height:5.6em}.vxe-form-design--widget-list{display:flex;flex-direction:row;flex-wrap:wrap}.vxe-form-design--widget-title{font-weight:700;padding:var(--vxe-ui-layout-padding-half) 0 var(--vxe-ui-layout-padding-half) var(--vxe-ui-layout-padding-half)}.vxe-form-design--widget-group{border-radius:var(--vxe-ui-base-border-radius);padding:var(--vxe-ui-layout-padding-default);margin-bottom:var(--vxe-ui-layout-padding-default);background-color:var(--vxe-ui-layout-background-color);border:1px solid var(--vxe-ui-input-border-color)}.vxe-form-design--widget-item{width:50%;padding:var(--vxe-ui-layout-padding-half)}.vxe-form-design--widget-box{position:relative;height:32px;line-height:32px;font-size:var(--vxe-ui-form-design-widget-item-font-size);padding:0 var(--vxe-ui-layout-padding-half);border-radius:var(--vxe-ui-base-border-radius);border:1px solid var(--vxe-ui-input-border-color);background-color:var(--vxe-ui-layout-background-color);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:grabbing;-webkit-user-select:none;-moz-user-select:none;user-select:none}.vxe-form-design--widget-box:hover{border-color:var(--vxe-ui-font-primary-lighten-color);background-color:var(--vxe-ui-base-active-background-color)}.vxe-form-design--widget-box:hover .vxe-form-design--widget-item-add{display:block}.vxe-form-design--widget-item-icon{padding:0 .2em}.vxe-form-design--widget-item-name{padding-left:var(--vxe-ui-layout-padding-half)}.vxe-form-design--widget-item-add{display:none;position:absolute;top:0;right:var(--vxe-ui-layout-padding-default);width:1em;height:100%;cursor:pointer}.vxe-form-design--widget-item-add:hover{color:var(--vxe-ui-font-primary-color)}.vxe-form-design--preview-list{width:100%}.vxe-form-design--preview-list-move{transition:transform .35s ease-in-out}.vxe-form-design--preview-item{position:relative;display:block;padding:var(--vxe-ui-layout-padding-default) var(--vxe-ui-layout-padding-double);border:1px solid transparent;cursor:grabbing}.vxe-form-design--preview-item::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}.vxe-form-design--preview-item:hover{background-color:var(--vxe-ui-form-design-widget-hover-background-color)}.vxe-form-design--preview-item.is--active{border:1px dashed var(--vxe-ui-font-primary-color);background-color:var(--vxe-ui-base-active-background-color)}.vxe-form-design--preview-item.is--drag,.vxe-form-design--preview-item.is--sort{background-color:var(--vxe-ui-base-drag-background-color)}.vxe-form-design--preview-item-view{width:100%}.vxe-form-design--preview-item-operate{position:absolute;top:calc(var(--vxe-ui-layout-padding-default) * -1);right:var(--vxe-ui-layout-padding-default);z-index:3}.vxe-form-design--setting-form{height:100%;background-color:var(--vxe-ui-layout-background-color);border:1px solid var(--vxe-ui-input-border-color)}.vxe-form-design--setting-form-tabs{height:100%}.vxe-form-design .vxe-form--item.vxe-form-design--widget-render-form-item{padding:0}

package/es/form-design/widget-row/row-view.js

@@ -31,27 +31,46 @@ const ViewColItemComponent = defineComponent({
             return () => [];
         }
         const { reactData: formDesignReactData } = $xeFormDesign;
-        const handleDragoverColItem = (evnt) => {
+        const handleDragstartColItemEvent = (evnt) => {
+            evnt.stopPropagation();
+            const divEl = evnt.currentTarget;
+            const dataTransfer = evnt.dataTransfer;
+            const widgetId = divEl.getAttribute('data-widget-id') || '';
+            const dragWidget = $xeFormDesign.getWidgetById(widgetId);
+            if (dataTransfer) {
+                dataTransfer.setData('text/plain', widgetId);
+            }
+            formDesignReactData.sortWidget = dragWidget;
+            formDesignReactData.dragWidget = null;
+        };
+        const sortDragenterColItemEvent = (evnt) => {
             const { parentWidget, colItemIndex } = props;
             const { widgetObjList, sortWidget } = formDesignReactData;
-            const currWidget = parentWidget.children[colItemIndex];
+            const targetWidget = parentWidget.children[colItemIndex];
             evnt.stopPropagation();
             if (sortWidget && parentWidget && sortWidget.id !== parentWidget.id) {
                 if (hasFormDesignLayoutType(sortWidget)) {
                     return;
                 }
-                if ((!currWidget || !currWidget.name) && !hasFormDesignLayoutType(currWidget)) {
-                    const rest = XEUtils.findTree(widgetObjList, item => item.id === sortWidget.id, { children: 'children' });
-                    if (rest) {
-                        const { item, index, items } = rest;
+                if (!hasFormDesignLayoutType(targetWidget)) {
+                    const currRest = XEUtils.findTree(widgetObjList, item => item.id === sortWidget.id, { children: 'children' });
+                    if (currRest) {
+                        const { item, index, items, parent } = currRest;
                         // 如果数据异常，动态修复
-                        if (!parentWidget.children.length) {
-                            parentWidget.children = XEUtils.range(0, parentWidget.options.colSize).map(() => {
-                                return $xeFormDesign.createEmptyWidget();
+                        if (parentWidget.children.length !== parentWidget.options.colSize) {
+                            parentWidget.children = XEUtils.range(0, parentWidget.options.colSize).map((index) => {
+                                return parentWidget.children[index] || $xeFormDesign.createEmptyWidget();
                             });
                         }
-                        parentWidget.children[colItemIndex] = item;
-                        items.splice(index, 1);
+                        // 如果是 row 内移动
+                        if (parent && parent.id === parentWidget.id) {
+                            parentWidget.children[colItemIndex] = item;
+                            parentWidget.children[index] = targetWidget;
+                        }
+                        else {
+                            parentWidget.children[colItemIndex] = item;
+                            items.splice(index, 1);
+                        }
                         $xeFormDesign.dispatchEvent('drag-widget', { widget: item }, evnt);
                     }
                 }
@@ -71,55 +90,63 @@ const ViewColItemComponent = defineComponent({
                     const renderOpts = widget || { name };
                     const params = { widget, readonly: false, disabled: false, isEditMode: true, isViewMode: false, $formDesign: $xeFormDesign, $formView: null };
                     const isActive = activeWidget && widget && activeWidget.id === widget.id;
+                    const isEmptyWidget = !renderWidgetDesignView;
                     return h('div', {
-                        class: ['vxe-form-design--widget-row-view', {
-                                'is--active': isActive,
-                                'is--sort': sortWidget && widget && sortWidget.id === widget.id,
-                                'is--drag': dragWidget && widget && dragWidget.id === widget.id
-                            }],
+                        class: 'vxe-form-design--widget-row-view',
                         'data-widget-id': widget.id,
-                        onDragover: handleDragoverColItem,
+                        draggable: !isEmptyWidget,
+                        onDragstart: handleDragstartColItemEvent,
+                        onDragenter: sortDragenterColItemEvent,
                         onClick(evnt) {
                             if (widget) {
                                 $xeFormDesign.handleClickWidget(evnt, widget);
                             }
                         }
                     }, [
-                        renderWidgetDesignView
-                            ? h('div', {
-                                class: 'vxe-form-design--widget-row-view-item-wrapper'
-                            }, [
-                                h('div', {
-                                    class: 'vxe-form-design--widget-row-view-item-box vxe-form--item-row'
-                                }, getSlotVNs(renderWidgetDesignView(renderOpts, params))),
-                                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, widget);
-                                            }
-                                        }),
-                                        h(VxeButtonComponent, {
-                                            icon: getIcon().FORM_DESIGN_WIDGET_DELETE,
-                                            status: 'danger',
-                                            size: 'mini',
-                                            circle: true,
-                                            onClick(params) {
-                                                $xeFormDesign.handleRemoveWidget(params.$event, widget);
-                                            }
-                                        })
-                                    ])
-                                    : createCommentVNode()
-                            ])
-                            : h('div', {
-                                class: 'vxe-form-design--widget-row-view-empty'
-                            }, '控件位置')
+                        h('div', {
+                            class: ['vxe-form-design--widget-row-view-item-inner', {
+                                    'is--empty': isEmptyWidget,
+                                    'is--active': isActive,
+                                    'is--sort': sortWidget && widget && sortWidget.id === widget.id,
+                                    'is--drag': dragWidget && widget && dragWidget.id === widget.id
+                                }]
+                        }, [
+                            renderWidgetDesignView
+                                ? h('div', {
+                                    class: 'vxe-form-design--widget-row-view-item-wrapper'
+                                }, [
+                                    h('div', {
+                                        class: 'vxe-form-design--widget-row-view-item-box vxe-form--item-row'
+                                    }, getSlotVNs(renderWidgetDesignView(renderOpts, params))),
+                                    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, widget);
+                                                }
+                                            }),
+                                            h(VxeButtonComponent, {
+                                                icon: getIcon().FORM_DESIGN_WIDGET_DELETE,
+                                                status: 'danger',
+                                                size: 'mini',
+                                                circle: true,
+                                                onClick(params) {
+                                                    $xeFormDesign.handleRemoveWidget(params.$event, widget);
+                                                }
+                                            })
+                                        ])
+                                        : createCommentVNode()
+                                ])
+                                : h('div', {
+                                    class: 'vxe-form-design--widget-row-view-empty'
+                                }, '控件位置')
+                        ])
                     ]);
                 }
             });