vxe-pc-ui 4.0.23 → 4.0.25

package/es/button/src/button.js

@@ -65,7 +65,10 @@ export default defineComponent({
         /**
          * 是否将弹框容器插入于 body 内
          */
-        transfer: { type: Boolean, default: () => getConfig().button.transfer }
+        transfer: {
+            type: Boolean,
+            default: null
+        }
     },
     emits: [
         'click',
@@ -75,6 +78,8 @@ export default defineComponent({
     ],
     setup(props, context) {
         const { slots, emit } = context;
+        const $xeTable = inject('$xeTable', null);
+        const $xeButtonGroup = inject('$xeButtonGroup', null);
         const xID = XEUtils.uniqueId();
         const { computeSize } = useSize(props);
         const reactData = reactive({
@@ -102,8 +107,20 @@ export default defineComponent({
             internalData,
             getRefMaps: () => refMaps
         };
-        const $xeButtonGroup = inject('$xeButtonGroup', null);
         let buttonMethods = {};
+        const compTransfer = computed(() => {
+            const { transfer } = props;
+            if (transfer === null) {
+                const globalTransfer = getConfig().button.transfer;
+                if (XEUtils.isBoolean(globalTransfer)) {
+                    return globalTransfer;
+                }
+                if ($xeTable) {
+                    return true;
+                }
+            }
+            return transfer;
+        });
         const computeIsFormBtn = computed(() => {
             const { type } = props;
             if (type) {
@@ -155,10 +172,11 @@ export default defineComponent({
         };
         const updatePlacement = () => {
             return nextTick().then(() => {
-                const { transfer, placement } = props;
+                const { placement } = props;
                 const { panelIndex } = reactData;
                 const targetElem = refButton.value;
                 const panelElem = refBtnPanel.value;
+                const transfer = compTransfer.value;
                 if (panelElem && targetElem) {
                     const targetHeight = targetElem.offsetHeight;
                     const targetWidth = targetElem.offsetWidth;
@@ -391,13 +409,14 @@ export default defineComponent({
             globalEvents.off($xeButton, 'mousewheel');
         });
         const renderVN = () => {
-            const { className, popupClassName, transfer, title, type, destroyOnClose, name, disabled, loading } = props;
+            const { className, popupClassName, title, type, destroyOnClose, name, disabled, loading } = props;
             const { inited, showPanel } = reactData;
             const isFormBtn = computeIsFormBtn.value;
             const btnMode = computeBtnMode.value;
             const btnStatus = computeBtnStatus.value;
             const btnRound = computeBtnRound.value;
             const btnCircle = computeBtnCircle.value;
+            const transfer = compTransfer.value;
             const vSize = computeSize.value;
             if (slots.dropdowns) {
                 return h('div', {

package/es/date-picker/src/date-picker.js

@@ -54,39 +54,42 @@ export default defineComponent({
         immediate: { type: Boolean, default: true },
         name: String,
         type: { type: String, default: 'text' },
-        clearable: { type: Boolean, default: () => getConfig().input.clearable },
+        clearable: { type: Boolean, default: () => getConfig().datePicker.clearable },
         readonly: Boolean,
         disabled: Boolean,
         placeholder: {
             type: String,
-            default: () => XEUtils.eqNull(getConfig().input.placeholder) ? getI18n('vxe.base.pleaseDatePicker') : getConfig().input.placeholder
+            default: () => XEUtils.eqNull(getConfig().datePicker.placeholder) ? getI18n('vxe.base.pleaseSelect') : getConfig().datePicker.placeholder
         },
         maxlength: [String, Number],
         autocomplete: { type: String, default: 'off' },
         align: String,
         form: String,
         className: String,
-        size: { type: String, default: () => getConfig().input.size || getConfig().size },
+        size: { type: String, default: () => getConfig().datePicker.size || getConfig().size },
         multiple: Boolean,
         // date、week、month、quarter、year
-        startDate: { type: [String, Number, Date], default: () => getConfig().input.startDate },
-        endDate: { type: [String, Number, Date], default: () => getConfig().input.endDate },
+        startDate: { type: [String, Number, Date], default: () => getConfig().datePicker.startDate },
+        endDate: { type: [String, Number, Date], default: () => getConfig().datePicker.endDate },
         minDate: [String, Number, Date],
         maxDate: [String, Number, Date],
         // 已废弃 startWeek，被 startDay 替换
         startWeek: Number,
-        startDay: { type: [String, Number], default: () => getConfig().input.startDay },
-        labelFormat: { type: String, default: () => getConfig().input.labelFormat },
-        valueFormat: { type: String, default: () => getConfig().input.valueFormat },
+        startDay: { type: [String, Number], default: () => getConfig().datePicker.startDay },
+        labelFormat: { type: String, default: () => getConfig().datePicker.labelFormat },
+        valueFormat: { type: String, default: () => getConfig().datePicker.valueFormat },
         editable: { type: Boolean, default: true },
-        festivalMethod: { type: Function, default: () => getConfig().input.festivalMethod },
-        disabledMethod: { type: Function, default: () => getConfig().input.disabledMethod },
+        festivalMethod: { type: Function, default: () => getConfig().datePicker.festivalMethod },
+        disabledMethod: { type: Function, default: () => getConfig().datePicker.disabledMethod },
         // week
-        selectDay: { type: [String, Number], default: () => getConfig().input.selectDay },
+        selectDay: { type: [String, Number], default: () => getConfig().datePicker.selectDay },
         prefixIcon: String,
         suffixIcon: String,
         placement: String,
-        transfer: { type: Boolean, default: () => getConfig().input.transfer }
+        transfer: {
+            type: Boolean,
+            default: null
+        }
     },
     emits: [
         'update:modelValue',
@@ -107,6 +110,7 @@ export default defineComponent({
     ],
     setup(props, context) {
         const { slots, emit } = context;
+        const $xeTable = inject('$xeTable', null);
         const $xeForm = inject('$xeForm', null);
         const formItemInfo = inject('xeFormItemInfo', null);
         const xID = XEUtils.uniqueId();
@@ -151,6 +155,19 @@ export default defineComponent({
             }
             return XEUtils.toStringDate(value, format);
         };
+        const compTransfer = computed(() => {
+            const { transfer } = props;
+            if (transfer === null) {
+                const globalTransfer = getConfig().datePicker.transfer;
+                if (XEUtils.isBoolean(globalTransfer)) {
+                    return globalTransfer;
+                }
+                if ($xeTable) {
+                    return true;
+                }
+            }
+            return transfer;
+        });
         const computeIsDateTimeType = computed(() => {
             const { type } = props;
             return type === 'time' || type === 'datetime';
@@ -1151,10 +1168,11 @@ export default defineComponent({
         };
         const updatePlacement = () => {
             return nextTick().then(() => {
-                const { transfer, placement } = props;
+                const { placement } = props;
                 const { panelIndex } = reactData;
                 const targetElem = refInputTarget.value;
                 const panelElem = refDatePickerPanel.value;
+                const transfer = compTransfer.value;
                 if (targetElem && panelElem) {
                     const targetHeight = targetElem.offsetHeight;
                     const targetWidth = targetElem.offsetWidth;
@@ -1746,10 +1764,11 @@ export default defineComponent({
             ];
         };
         const renderPanel = () => {
-            const { type, transfer } = props;
+            const { type } = props;
             const { inited, animatVisible, visiblePanel, panelPlacement, panelStyle } = reactData;
             const vSize = computeSize.value;
             const isDatePickerType = computeIsDatePickerType.value;
+            const transfer = compTransfer.value;
             const renders = [];
             if (isDatePickerType) {
                 if (type === 'datetime') {

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

@@ -74,14 +74,26 @@ export default defineComponent({
             updateWidgetInfo();
             return nextTick();
         };
+        const getWidgetDefaultValue = (widget) => {
+            switch (widget.name) {
+                case 'subtable':
+                    return [];
+            }
+            return null;
+        };
+        const getWidgetDefaultRule = () => {
+            return [
+                { required: true, content: '该填写该字段！' }
+            ];
+        };
         const updateWidgetInfo = () => {
-            const formData = Object.assign({}, props.modelValue);
+            const formData = {};
             const formRules = {};
             XEUtils.eachTree(reactData.widgetObjList, widget => {
                 const { name, field, required } = widget;
                 const compConf = renderer.get(name) || {};
                 const createWidgetViewRules = compConf.createFormDesignWidgetRules;
-                formData[field] = null;
+                formData[field] = getWidgetDefaultValue(widget);
                 if (createWidgetViewRules) {
                     const rules = createWidgetViewRules({ widget });
                     if (rules && rules.length) {
@@ -89,13 +101,11 @@ export default defineComponent({
                     }
                 }
                 else if (required) {
-                    formRules[field] = [
-                        { required: true, content: '该填写该字段！' }
-                    ];
+                    formRules[field] = getWidgetDefaultRule();
                 }
             }, { children: 'children' });
             reactData.formRules = formRules;
-            emit('update:modelValue', formData);
+            emit('update:modelValue', Object.assign(formData, props.modelValue));
         };
         const updateItemStatus = (widget, value) => {
             const { field } = widget;
@@ -183,7 +193,7 @@ export default defineComponent({
                                 const renderWidgetDesignPreview = compConf.renderFormDesignWidgetPreview;
                                 const renderWidgetDesignMobilePreview = compConf.renderFormDesignWidgetMobilePreview;
                                 const renderOpts = widget;
-                                const params = { widget, isEditMode: false, isViewMode: true };
+                                const params = { widget, isEditMode: false, isViewMode: true, $formDesign: null, $formView: $xeFormView };
                                 return h(VxeFormGatherComponent, {
                                     key: widget.id
                                 }, {

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

@@ -58,7 +58,7 @@ export default defineComponent({
                                                 const compConf = renderer.get(name) || {};
                                                 const renderWidgetDesignView = compConf.renderFormDesignWidgetEdit || compConf.renderFormDesignWidgetView;
                                                 const renderOpts = widget;
-                                                const params = { widget, isEditMode: true, isViewMode: false };
+                                                const params = { widget, isEditMode: true, isViewMode: false, $formDesign: $xeFormDesign, $formView: null };
                                                 return renderWidgetDesignView ? getSlotVNs(renderWidgetDesignView(renderOpts, params)) : [];
                                             }
                                         });

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

@@ -23,7 +23,7 @@ export default defineComponent({
                 if (renderWidgetFormView) {
                     return h('div', {
                         class: 'vxe-form-design--custom-widget-form-view'
-                    }, getSlotVNs(renderWidgetFormView(activeWidget, { widget: activeWidget })));
+                    }, getSlotVNs(renderWidgetFormView(activeWidget, { widget: activeWidget, $formDesign: $xeFormDesign })));
                 }
             }
             return createCommentVNode();

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

@@ -58,7 +58,7 @@ export default defineComponent({
                     const { name } = widget;
                     const configTitle = getWidgetConfigTitle(name, $xeFormDesign);
                     const compConf = renderer.get(name) || {};
-                    const renderFormDesignWidgetItem = compConf.renderFormDesignWidgetItem;
+                    const renderWidgetItem = compConf.renderFormDesignWidgetItem;
                     widgetVNs.push(h('div', {
                         key: index,
                         class: 'vxe-form-design--widget-item'
@@ -72,8 +72,8 @@ export default defineComponent({
                         onDblclick(evnt) {
                             addNewWidget(evnt, name);
                         }
-                    }, renderFormDesignWidgetItem
-                        ? getSlotVNs(renderFormDesignWidgetItem({}, {}))
+                    }, renderWidgetItem
+                        ? getSlotVNs(renderWidgetItem({}, { $formDesign: $xeFormDesign }))
                         : [
                             h('i', {
                                 class: ['vxe-form-design--widget-item-icon', getWidgetConfigIcon(name)]

package/es/form-design/style.css

@@ -467,7 +467,7 @@
 .vxe-form-design .vxe-form-design--widget-form-item-prop-list > span:first-child,
 .vxe-form-design .vxe-form-design--widget-form-item-prop-list .vxe-form-design--widget-form-item-prop-width,
 .vxe-form-design .vxe-form-design--widget-form-item-prop-list .vxe-form-design--widget-form-item-prop-unit {
-  display: inline-block;
+  display: inline-flex;
   vertical-align: middle;
 }
 .vxe-form-design .vxe-form-design--widget-form-item-prop-list .vxe-form-design--widget-form-item-prop-width {

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

@@ -1 +1 @@
-.vxe-form-design--widget-form-empty-data,.vxe-list-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;min-height:100%;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:78px;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 .vxe-form-design--widget-form-item-devices{display:flex;flex-direction:column}.vxe-form-design .vxe-form-design--widget-form-item-layout{display:flex;flex-direction:row}.vxe-form-design .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 .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 .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 .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 .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 .vxe-form-design--widget-form-item-option.is--horizontal .vxe-form-design--widget-form-item-option-row:nth-child(1)::before,.vxe-form-design .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 .vxe-form-design--widget-form-item-option.is--horizontal .vxe-form-design--widget-form-item-option-row:nth-child(1)::after,.vxe-form-design .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 .vxe-form-design--widget-form-item-option:hover{border-color:var(--vxe-ui-font-primary-color)}.vxe-form-design .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 .vxe-form-design--widget-form-item-option.is--active .vxe-form-design--widget-form-item-option-row:nth-child(1)::after,.vxe-form-design .vxe-form-design--widget-form-item-option.is--active .vxe-form-design--widget-form-item-option-row:nth-child(1)::before,.vxe-form-design .vxe-form-design--widget-form-item-option.is--active .vxe-form-design--widget-form-item-option-row:nth-child(2)::after,.vxe-form-design .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 .vxe-form-design--widget-form-item-option-row{margin-bottom:.2em}.vxe-form-design--widget-form-item-data-source{max-height:30vh;min-height:140px;overflow:auto}.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 .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 .vxe-form-design--widget-form-item-prop-list:first-child{margin-top:var(--vxe-ui-layout-padding-default)}.vxe-form-design .vxe-form-design--widget-form-item-prop-list>span{padding:0 .5em}.vxe-form-design .vxe-form-design--widget-form-item-prop-list>span:first-child{padding:0;padding-right:var(--vxe-ui-layout-padding-default)}.vxe-form-design .vxe-form-design--widget-form-item-prop-list .vxe-form-design--widget-form-item-prop-unit,.vxe-form-design .vxe-form-design--widget-form-item-prop-list .vxe-form-design--widget-form-item-prop-width,.vxe-form-design .vxe-form-design--widget-form-item-prop-list>span:first-child{display:inline-block;vertical-align:middle}.vxe-form-design .vxe-form-design--widget-form-item-prop-list .vxe-form-design--widget-form-item-prop-width{width:90px}.vxe-form-design .vxe-form-design--widget-form-item-prop-list .vxe-form-design--widget-form-item-prop-unit{width:90px}.vxe-list-design .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 .vxe-list-design--widget-form-item-prop-list:first-child{margin-top:var(--vxe-ui-layout-padding-default)}.vxe-list-design .vxe-list-design--widget-form-item-prop-list:last-child{margin-bottom:0}.vxe-list-design .vxe-list-design--widget-form-item-prop-list>span{padding:0 .5em}.vxe-list-design .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-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--widget-form-empty-data,.vxe-list-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;min-height:100%;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:78px;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 .vxe-form-design--widget-form-item-devices{display:flex;flex-direction:column}.vxe-form-design .vxe-form-design--widget-form-item-layout{display:flex;flex-direction:row}.vxe-form-design .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 .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 .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 .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 .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 .vxe-form-design--widget-form-item-option.is--horizontal .vxe-form-design--widget-form-item-option-row:nth-child(1)::before,.vxe-form-design .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 .vxe-form-design--widget-form-item-option.is--horizontal .vxe-form-design--widget-form-item-option-row:nth-child(1)::after,.vxe-form-design .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 .vxe-form-design--widget-form-item-option:hover{border-color:var(--vxe-ui-font-primary-color)}.vxe-form-design .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 .vxe-form-design--widget-form-item-option.is--active .vxe-form-design--widget-form-item-option-row:nth-child(1)::after,.vxe-form-design .vxe-form-design--widget-form-item-option.is--active .vxe-form-design--widget-form-item-option-row:nth-child(1)::before,.vxe-form-design .vxe-form-design--widget-form-item-option.is--active .vxe-form-design--widget-form-item-option-row:nth-child(2)::after,.vxe-form-design .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 .vxe-form-design--widget-form-item-option-row{margin-bottom:.2em}.vxe-form-design--widget-form-item-data-source{max-height:30vh;min-height:140px;overflow:auto}.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 .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 .vxe-form-design--widget-form-item-prop-list:first-child{margin-top:var(--vxe-ui-layout-padding-default)}.vxe-form-design .vxe-form-design--widget-form-item-prop-list>span{padding:0 .5em}.vxe-form-design .vxe-form-design--widget-form-item-prop-list>span:first-child{padding:0;padding-right:var(--vxe-ui-layout-padding-default)}.vxe-form-design .vxe-form-design--widget-form-item-prop-list .vxe-form-design--widget-form-item-prop-unit,.vxe-form-design .vxe-form-design--widget-form-item-prop-list .vxe-form-design--widget-form-item-prop-width,.vxe-form-design .vxe-form-design--widget-form-item-prop-list>span:first-child{display:inline-flex;vertical-align:middle}.vxe-form-design .vxe-form-design--widget-form-item-prop-list .vxe-form-design--widget-form-item-prop-width{width:90px}.vxe-form-design .vxe-form-design--widget-form-item-prop-list .vxe-form-design--widget-form-item-prop-unit{width:90px}.vxe-list-design .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 .vxe-list-design--widget-form-item-prop-list:first-child{margin-top:var(--vxe-ui-layout-padding-default)}.vxe-list-design .vxe-list-design--widget-form-item-prop-list:last-child{margin-bottom:0}.vxe-list-design .vxe-list-design--widget-form-item-prop-list>span{padding:0 .5em}.vxe-list-design .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-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%}

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

@@ -67,7 +67,7 @@ const ViewColItemComponent = defineComponent({
                     const compConf = renderer.get(name) || {};
                     const renderWidgetDesignView = compConf.renderFormDesignWidgetEdit || compConf.renderFormDesignWidgetView;
                     const renderOpts = widget || { name };
-                    const params = { widget, isEditMode: true, isViewMode: false };
+                    const params = { widget, isEditMode: true, isViewMode: false, $formDesign: $xeFormDesign, $formView: null };
                     const isActive = activeWidget && widget && activeWidget.id === widget.id;
                     return h('div', {
                         class: ['vxe-form-design--widget-row-view', {
@@ -179,6 +179,7 @@ export const WidgetRowViewComponent = defineComponent({
     },
     emits: [],
     setup(props) {
+        const $xeFormDesign = inject('$xeFormDesign', null);
         const computedColObjList = computed(() => {
             const { renderParams } = props;
             const { widget } = renderParams;
@@ -209,7 +210,7 @@ export const WidgetRowViewComponent = defineComponent({
                                     const compConf = renderer.get(name) || {};
                                     const renderWidgetDesignView = compConf.renderFormDesignWidgetView;
                                     const renderOpts = subWidget;
-                                    const params = { widget: subWidget, isEditMode: false, isViewMode: true };
+                                    const params = { widget: subWidget, isEditMode: false, isViewMode: true, $formDesign: $xeFormDesign, $formView: null };
                                     if (renderWidgetDesignView) {
                                         return getSlotVNs(renderWidgetDesignView(renderOpts, params));
                                     }

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

@@ -1,8 +1,9 @@
-import { defineComponent, inject, h, createCommentVNode, TransitionGroup } from 'vue';
+import { defineComponent, inject, h, createCommentVNode, TransitionGroup, computed } from 'vue';
 import { VxeUI, renderer, getIcon, getI18n } from '@vxe-ui/core';
 import XEUtils from 'xe-utils';
 import { hasFormDesignLayoutType } from '../src/util';
 import { getSlotVNs } from '../../ui/src/vn';
+import { useKebabCaseName } from '../render/hooks';
 import VxeFormItemComponent from '../../form/src/form-item';
 import VxeButtonComponent from '../../button/src/button';
 import VxeCheckboxComponent from '../../checkbox/src/checkbox';
@@ -96,7 +97,7 @@ const ViewSubItemComponent = defineComponent({
             const compConf = renderer.get(name) || {};
             const renderWidgetDesignView = compConf.renderFormDesignWidgetEdit || compConf.renderFormDesignWidgetView;
             const renderOpts = widget || { name };
-            const params = { widget, isEditMode: true, isViewMode: false };
+            const params = { widget, isEditMode: true, isViewMode: false, $formDesign: $xeFormDesign, $formView: null };
             const isActive = activeWidget && widget && activeWidget.id === widget.id;
             return h('div', {
                 class: ['vxe-form-design--widget-subtable-view-item', {
@@ -284,9 +285,59 @@ export const WidgetSubtableViewComponent = defineComponent({
         }
     },
     emits: [],
-    setup() {
+    setup(props) {
+        const VxeTableGridComponent = VxeUI.getComponent('VxeGrid');
+        const $xeFormView = inject('$xeFormView', null);
+        const computeKebabCaseName = useKebabCaseName(props);
+        const computeSubtableColumns = computed(() => {
+            const { renderParams } = props;
+            const { widget } = renderParams;
+            const { children, options } = widget;
+            const columns = [];
+            if (options.showCheckbox) {
+                columns.push({
+                    type: 'checkbox',
+                    width: 60
+                });
+            }
+            columns.push({
+                type: 'seq',
+                width: 60
+            });
+            if (children) {
+                children.forEach(childWidget => {
+                    columns.push({
+                        field: childWidget.field,
+                        title: childWidget.title
+                    });
+                });
+            }
+            return columns;
+        });
         return () => {
-            return h('div', 'eeee');
+            const { renderParams } = props;
+            const { widget } = renderParams;
+            const kebabCaseName = computeKebabCaseName.value;
+            const subtableColumns = computeSubtableColumns.value;
+            return h(VxeFormItemComponent, {
+                class: ['vxe-form-design--widget-render-form-item', `widget-${kebabCaseName}`],
+                title: widget.title,
+                field: widget.field,
+                span: 24
+            }, {
+                default() {
+                    return VxeTableGridComponent
+                        ? h(VxeTableGridComponent, {
+                            border: true,
+                            columnConfig: {
+                                resizable: true
+                            },
+                            data: $xeFormView ? $xeFormView.getItemValue(widget) : null,
+                            columns: subtableColumns
+                        })
+                        : createCommentVNode();
+                }
+            });
         };
     }
 });