vxe-design 4.1.0 → 4.1.2

package/lib/form-design/src/form-design.min.js

@@ -1 +1 @@
-Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_comp=require("../../ui/src/comp"),_core=require("@vxe-ui/core"),_dom=require("../../ui/src/dom"),_utils=require("../../ui/src/utils"),_widgetInfo=require("./widget-info"),_xeUtils=_interopRequireDefault(require("xe-utils")),_layoutWidget=_interopRequireDefault(require("./layout-widget")),_layoutPreview=_interopRequireDefault(require("./layout-preview")),_layoutSetting=_interopRequireDefault(require("./layout-setting")),_layoutStyle=_interopRequireDefault(require("./layout-style")),_defaultSettingData=require("./default-setting-data");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}let{menus,getConfig,getIcon,getI18n,renderer,createEvent,renderEmptyElement,useFns}=_core.VxeUI,useSize=useFns.useSize;var _default=exports.default=(0,_comp.defineVxeComponent)({name:"VxeFormDesign",props:{size:{type:String,default:()=>getConfig().formDesign.size||getConfig().size},config:Object,height:{type:[String,Number],default:()=>getConfig().formDesign.height},widgets:{type:Array,default:()=>_xeUtils.default.clone(getConfig().formDesign.widgets)||[]},showHeader:{type:Boolean,default:()=>getConfig().formDesign.showHeader},showPc:{type:Boolean,default:()=>getConfig().formDesign.showPc},showMobile:{type:Boolean,default:()=>getConfig().formDesign.showMobile},showStyleSetting:{type:Boolean,default:()=>getConfig().formDesign.showStyleSetting},formRender:Object,menuConfig:Object},emits:["widget-click","widget-add","widget-copy","widget-remove","widget-drag","widget-menu","menu-click","click-widget","add-widget","copy-widget","remove-widget","drag-widget"],setup(l,e){let o=_core.VxeUI.getComponent("vxe-button"),{emit:r,slots:d}=e;var t=_xeUtils.default.uniqueId();let g=(0,_vue.ref)(),a=(0,_vue.ref)(),u=useSize(l).computeSize,s=(0,_vue.reactive)({formData:{},widgetConfigs:[],widgetObjList:[],dragWidget:null,sortWidget:null,activeWidget:null});var i=(0,_vue.reactive)({});let n={refElem:g},f=(0,_vue.computed)(()=>Object.assign({},getConfig().calendar.menuConfig,l.menuConfig)),c={computeSize:u},v={xID:t,props:l,context:e,reactData:s,internalData:i,getRefMaps:()=>n,getComputeMaps:()=>c},m=e=>new _widgetInfo.FormDesignWidgetInfo(v,e,s.widgetObjList),h=()=>new _widgetInfo.FormDesignWidgetInfo(v,"",s.widgetObjList),p=e=>{var t;e&&({formConfig:e,widgetData:t}=e,e&&_(e),t)&&y(t);let{activeWidget:i,widgetObjList:r}=s;return i?(e=_xeUtils.default.findTree(r,e=>e.id===i.id,{children:"children"}),s.activeWidget=e?e.item:r[0]||null):s.activeWidget=r[0]||null,(0,_vue.nextTick)()};let w=()=>_xeUtils.default.clone(s.formData,!0),_=e=>(s.formData=Object.assign({},I(),e),(0,_vue.nextTick)());let x=()=>{var e=_xeUtils.default.clone(s.widgetObjList,!0);return _xeUtils.default.eachTree(e,e=>{e.model.value=null},{children:"children"}),e},y=e=>(s.widgetObjList=(e||[]).map(e=>(0,_widgetInfo.configToWidget)(e)),(0,_vue.nextTick)()),D=()=>{var e=a.value;return e&&e.openStylePreview(),(0,_vue.nextTick)()},C=()=>(s.widgetObjList=[],O(),(0,_vue.nextTick)()),b=(e,t,i)=>{r(e,createEvent(i,{$formDesign:v},t))};t={dispatchEvent:b,createWidget:m,createEmptyWidget:h,getConfig(){return{formConfig:w(),widgetData:x()}},clearConfig:C,loadConfig:p,reloadConfig:e=>(C(),p(e)),getFormConfig:w,loadFormConfig:_,getWidgetById:e=>{var i=s.widgetObjList;if(e){let t=_xeUtils.default.toNumber(e);e=_xeUtils.default.findTree(i,e=>e&&e.id===t,{children:"children"});if(e)return e.item}return null},getFormData(){var e=s.widgetObjList;let t={};return _xeUtils.default.eachTree(e,e=>{t[e.field]=null},{children:"children"}),t},getWidgetData:x,loadWidgetData:y,refreshPreviewView(){var e=a.value;return e&&e.updatePreviewView(),(0,_vue.nextTick)()},openStyleSetting:D};let W=()=>{var e=l.widgets,t=[];let n=[],o=[],d=[],g=[];renderer.forEach((e,i)=>{e=e.createFormDesignWidgetConfig;if(e){var r=m(i),e=(0,_widgetInfo.getWidgetConfig)(i);let t=(0,_widgetInfo.getWidgetConfigCustomGroup)(i,v);if(t){i=g.find(e=>e.title===t);i?i.children.push(r):g.push({title:t,children:[r]})}else switch(e.group){case"layout":o.push(r);break;case"advanced":d.push(r);break;default:["title"].includes(r.name)||n.push(r)}}}),n.length&&t.push({group:"base",children:n}),o.length&&t.push({group:"layout",children:o}),d.length&&t.push({group:"advanced",children:d}),g.length&&t.push(...g),e&&e.length?s.widgetConfigs=l.widgets.map(e=>({title:e.customGroup,group:e.group,children:e.children?e.children.map(e=>m(e)):[]})):s.widgetConfigs=t},S=i=>{var e=s.widgetObjList;if((0,_widgetInfo.getWidgetConfig)(i).unique){let t=[];_xeUtils.default.eachTree(e,e=>{e.name===i&&t.push(e)},{children:"children"});e=t.length<1;return e||_core.VxeUI.modal&&_core.VxeUI.modal.message({content:getI18n("vxe.formDesign.error.wdFormUni"),status:"error",id:"wdFormUni"}),e}return!0};e={validWidgetUnique:S,handleContextmenuWidget(r,n){var e=l.menuConfig,t=f.value;(e?(0,_utils.isEnableConf)(t):t.enabled)&&({options:e,visibleMethod:t}=t,t&&!t({$formDesign:v,widget:n,options:e})||_core.VxeUI.contextMenu&&_core.VxeUI.contextMenu.openByEvent(r,{options:e,events:{optionClick(e){var t=e.option,i=menus.get(t.code),i=i?i.formDesignMenuMethod:null,t={menu:t,widget:n,$event:r,$formDesign:v};i&&i(t,r),b("menu-click",t,e.$event)}}})),b("widget-menu",{widget:n},r)},handleClickWidget(e,t){t&&t.name&&(e.stopPropagation(),s.activeWidget=t,b("widget-click",{widget:t},e),b("click-widget",{widget:t},e))},handleCopyWidget(e,t){var i,r=s.widgetObjList,n=_xeUtils.default.findTree(r,e=>e.id===t.id,{children:"children"});n&&(e.stopPropagation(),S(t.name))&&(n=n.path,n=Number(n[0]),(i=m(t.name)).title&&(i.title=getI18n("vxe.formDesign.widget.copyTitle",[(""+t.title).replace(getI18n("vxe.formDesign.widget.copyTitle",[""]),"")])),n>=r.length-1?r.push(i):r.splice(n+1,0,i),s.activeWidget=i,s.widgetObjList=[...r],b("widget-copy",{widget:t,newWidget:i},e),b("copy-widget",{widget:i},e))},handleRemoveWidget(e,t){var i,r,n=s.widgetObjList,o=_xeUtils.default.findTree(n,e=>e.id===t.id,{children:"children"});o&&({index:o,parent:i,items:r}=o,e.stopPropagation(),o>=r.length-1?s.activeWidget=r[o-1]:s.activeWidget=r[o+1]||null,i&&"row"===i.name?r[o]=h():r.splice(o,1),s.widgetObjList=[...n],b("widget-remove",{widget:t},e),b("remove-widget",{widget:t},e))}};let I=()=>{var{formRender:e,showPc:t,showMobile:i}=l,t=(0,_defaultSettingData.getDefaultSettingFormData)({pcVisible:t,mobileVisible:i});let r={};return e&&(e=(i=renderer.get(e.name))?i.createFormDesignSettingFormConfig:null,r=(e?e({}):{})||{}),Object.assign({},t,r)},O=()=>{s.formData=I()},U=()=>{D()};Object.assign(v,t,e);return v.renderVN=()=>{var{height:e,showHeader:t}=l,i=u.value,r=d.header,n=d.footer;return(0,_vue.h)("div",{ref:g,class:["vxe-form-design",{["size--"+i]:i}],style:e?{height:(0,_dom.toCssUnit)(e)}:null},[t||r?(0,_vue.h)("div",{class:"vxe-form-design--header"},r?r({}):(i=l.showStyleSetting,e=d.title,t=d.titlePrefix||d["title-prefix"],r=d.titleSuffix||d["title-suffix"]||d.extra,(0,_vue.h)("div",{class:"vxe-form-design--header-wrapper"},[(0,_vue.h)("div",{class:"vxe-form-design--header-left"},t?t({}):[]),(0,_vue.h)("div",{class:"vxe-form-design--header-middle"},e?e({}):[]),(0,_vue.h)("div",{class:"vxe-form-design--header-right"},[r?(0,_vue.h)("div",{class:"vxe-form-design--header-extra"},r({})):renderEmptyElement(v),i?(0,_vue.h)("div",{class:"vxe-form-design--header-setting"},[(0,_vue.h)(o,{mode:"text",status:"primary",icon:getIcon().FORM_DESIGN_STYLE_SETTING,content:getI18n("vxe.formDesign.styleSetting.btn"),onClick:U})]):renderEmptyElement(v)])]))):(0,_vue.createCommentVNode)(),(0,_vue.h)("div",{class:"vxe-form-design--body"},[(0,_vue.h)(_layoutWidget.default),(0,_vue.h)(_layoutPreview.default),(0,_vue.h)(_layoutSetting.default),(0,_vue.h)(_layoutStyle.default,{ref:a})]),n?(0,_vue.h)("div",{class:"vxe-form-design--footer"},n?n({}):[]):(0,_vue.createCommentVNode)()])},(0,_vue.watch)(()=>l.widgets,()=>{W()}),(0,_vue.watch)(()=>l.widgets,()=>{W()}),(0,_vue.watch)(()=>l.config,e=>{p(e||{})}),O(),W(),l.config&&p(l.config),(0,_vue.provide)("$xeFormDesign",v),v},render(){return this.renderVN()}});
+Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_comp=require("../../ui/src/comp"),_core=require("@vxe-ui/core"),_dom=require("../../ui/src/dom"),_utils=require("../../ui/src/utils"),_widgetInfo=require("./widget-info"),_xeUtils=_interopRequireDefault(require("xe-utils")),_layoutWidget=_interopRequireDefault(require("./layout-widget")),_layoutPreview=_interopRequireDefault(require("./layout-preview")),_layoutSetting=_interopRequireDefault(require("./layout-setting")),_layoutStyle=_interopRequireDefault(require("./layout-style")),_defaultSettingData=require("./default-setting-data");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}let{menus,getConfig,getIcon,getI18n,renderer,createEvent,renderEmptyElement,useFns}=_core.VxeUI,useSize=useFns.useSize;var _default=exports.default=(0,_comp.defineVxeComponent)({name:"VxeFormDesign",props:{size:{type:String,default:()=>getConfig().formDesign.size||getConfig().size},config:Object,height:{type:[String,Number],default:()=>getConfig().formDesign.height},widgets:{type:Array,default:()=>_xeUtils.default.clone(getConfig().formDesign.widgets)||[]},showHeader:{type:Boolean,default:()=>getConfig().formDesign.showHeader},showPc:{type:Boolean,default:()=>getConfig().formDesign.showPc},showMobile:{type:Boolean,default:()=>getConfig().formDesign.showMobile},showStyleSetting:{type:Boolean,default:()=>getConfig().formDesign.showStyleSetting},formRender:Object,menuConfig:Object},emits:["widget-click","widget-add","widget-copy","widget-remove","widget-drag","widget-menu","menu-click","click-widget","add-widget","copy-widget","remove-widget","drag-widget"],setup(l,e){let d=_core.VxeUI.getComponent("vxe-button"),{emit:r,slots:o}=e;var t=_xeUtils.default.uniqueId();let g=(0,_vue.ref)(),a=(0,_vue.ref)(),u=useSize(l).computeSize,s=(0,_vue.reactive)({formData:{},widgetConfigs:[],widgetObjList:[],dragWidget:null,sortWidget:null,activeWidget:null});var i=(0,_vue.reactive)({});let n={refElem:g},f=(0,_vue.computed)(()=>Object.assign({},getConfig().calendar.menuConfig,l.menuConfig)),c={computeSize:u},v={xID:t,props:l,context:e,reactData:s,internalData:i,getRefMaps:()=>n,getComputeMaps:()=>c},m=e=>new _widgetInfo.FormDesignWidgetInfo(v,e,s.widgetObjList),h=()=>new _widgetInfo.FormDesignWidgetInfo(v,"",s.widgetObjList),p=e=>{var t;e&&({formConfig:e,widgetData:t}=e,e&&_(e),t)&&y(t);let{activeWidget:i,widgetObjList:r}=s;return i?(e=_xeUtils.default.findTree(r,e=>e.id===i.id,{children:"children"}),s.activeWidget=e?e.item:r[0]||null):s.activeWidget=r[0]||null,(0,_vue.nextTick)()};let w=()=>_xeUtils.default.clone(s.formData,!0),_=e=>(s.formData=Object.assign({},I(),e),(0,_vue.nextTick)());let x=()=>{var e=_xeUtils.default.clone(s.widgetObjList,!0);return _xeUtils.default.eachTree(e,e=>{e.model.value=null},{children:"children"}),e},y=e=>(s.widgetObjList=(e||[]).map(e=>(0,_widgetInfo.configToWidget)(e)),(0,_vue.nextTick)()),D=()=>{var e=a.value;return e&&e.openStylePreview(),(0,_vue.nextTick)()},C=()=>(s.widgetObjList=[],O(),(0,_vue.nextTick)()),b=(e,t,i)=>{r(e,createEvent(i,{$formDesign:v},t))};t={dispatchEvent:b,createWidget:m,createEmptyWidget:h,getConfig(){return{formConfig:w(),widgetData:x()}},clearConfig:C,loadConfig:p,reloadConfig:e=>(C(),p(e)),getFormConfig:w,loadFormConfig:_,getWidgetById:e=>{var i=s.widgetObjList;if(e){let t=_xeUtils.default.toNumber(e);e=_xeUtils.default.findTree(i,e=>e&&e.id===t,{children:"children"});if(e)return e.item}return null},getFormData(){var e=s.widgetObjList;let t={};return _xeUtils.default.eachTree(e,e=>{t[e.field]=null},{children:"children"}),t},getWidgetData:x,loadWidgetData:y,refreshPreviewView(){var e=a.value;return e&&e.updatePreviewView(),(0,_vue.nextTick)()},openStyleSetting:D};let W=()=>{var e=l.widgets,t=[];let n=[],d=[],o=[],g=[];renderer.forEach((e,i)=>{e=e.createFormDesignWidgetConfig;if(e){var r=m(i),e=(0,_widgetInfo.getWidgetConfig)(i);let t=(0,_widgetInfo.getWidgetConfigCustomGroup)(i,v);if(t){i=g.find(e=>e.title===t);i?i.children.push(r):g.push({title:t,children:[r]})}else switch(e.group){case"layout":d.push(r);break;case"advanced":o.push(r);break;default:["title"].includes(r.name)||n.push(r)}}}),n.length&&t.push({group:"base",children:n}),d.length&&t.push({group:"layout",children:d}),o.length&&t.push({group:"advanced",children:o}),g.length&&t.push(...g),e&&e.length?s.widgetConfigs=l.widgets.map(e=>({title:e.customGroup,group:e.group,children:e.children?e.children.map(e=>m(e)):[]})):s.widgetConfigs=t},S=i=>{var e=s.widgetObjList;if((0,_widgetInfo.getWidgetConfig)(i).unique){let t=[];_xeUtils.default.eachTree(e,e=>{e.name===i&&t.push(e)},{children:"children"});e=t.length<1;return e||_core.VxeUI.modal&&_core.VxeUI.modal.message({content:getI18n("vxe.formDesign.error.wdFormUni"),status:"error",id:"wdFormUni"}),e}return!0};e={validWidgetUnique:S,handleContextmenuWidget(r,n){var e=l.menuConfig,t=f.value;(e?(0,_utils.isEnableConf)(t):t.enabled)&&({options:e,visibleMethod:t}=t,t&&!t({$formDesign:v,widget:n,options:e})||_core.VxeUI.contextMenu&&_core.VxeUI.contextMenu.openByEvent(r,{options:e,events:{optionClick(e){var t=e.option,i=menus.get(t.code),i=i?i.formDesignMenuMethod:null,t={menu:t,widget:n,$event:r,$formDesign:v};i&&i(t,r),b("menu-click",t,e.$event)}}})),b("widget-menu",{widget:n},r)},handleClickWidget(e,t){t&&t.name&&(e.stopPropagation(),s.activeWidget=t,b("widget-click",{widget:t},e),b("click-widget",{widget:t},e))},handleCopyWidget(e,t){var i,r=s.widgetObjList,n=_xeUtils.default.findTree(r,e=>e.id===t.id,{children:"children"});n&&(e.stopPropagation(),S(t.name))&&(n=n.path,n=Number(n[0]),(i=m(t.name)).title&&(i.title=getI18n("vxe.formDesign.widget.copyTitle",[(""+t.title).replace(getI18n("vxe.formDesign.widget.copyTitle",[""]),"")])),n>=r.length-1?r.push(i):r.splice(n+1,0,i),s.activeWidget=i,s.widgetObjList=[...r],b("widget-copy",{widget:t,newWidget:i},e),b("copy-widget",{widget:i},e))},handleRemoveWidget(e,t){var i,r,n=s.widgetObjList,d=_xeUtils.default.findTree(n,e=>e.id===t.id,{children:"children"});d&&({index:d,parent:i,items:r}=d,e.stopPropagation(),d>=r.length-1?s.activeWidget=r[d-1]:s.activeWidget=r[d+1]||null,i&&"row"===i.name?r[d]=h():r.splice(d,1),s.widgetObjList=[...n],b("widget-remove",{widget:t},e),b("remove-widget",{widget:t},e))}};let I=()=>{var{formRender:e,showPc:t,showMobile:i}=l,t=(0,_defaultSettingData.getDefaultSettingFormData)({pcVisible:t,mobileVisible:i});let r={};return e&&(e=(i=renderer.get(e.name))?i.createFormDesignSettingFormConfig:null,r=(e?e({}):{})||{}),Object.assign({},t,r)},O=()=>{s.formData=I()},U=()=>{D()};Object.assign(v,t,e);return v.renderVN=()=>{var{height:e,showHeader:t}=l,i=u.value,r=o.header,n=o.footer;return(0,_vue.h)("div",{ref:g,class:["vxe-form-design",{["size--"+i]:i}],style:e?{height:(0,_dom.toCssUnit)(e)}:null},[t||r?(0,_vue.h)("div",{class:"vxe-form-design--header"},r?r({}):(i=l.showStyleSetting,e=o.title,t=o.titlePrefix||o["title-prefix"],r=o.titleSuffix||o["title-suffix"]||o.extra,t||e||r||i?(0,_vue.h)("div",{class:"vxe-form-design--header-wrapper"},[(0,_vue.h)("div",{class:"vxe-form-design--header-left"},t?t({}):[]),(0,_vue.h)("div",{class:"vxe-form-design--header-middle"},e?e({}):[]),(0,_vue.h)("div",{class:"vxe-form-design--header-right"},[r?(0,_vue.h)("div",{class:"vxe-form-design--header-extra"},r({})):renderEmptyElement(v),i?(0,_vue.h)("div",{class:"vxe-form-design--header-setting"},[(0,_vue.h)(d,{mode:"text",status:"primary",icon:getIcon().FORM_DESIGN_STYLE_SETTING,content:getI18n("vxe.formDesign.styleSetting.btn"),onClick:U})]):renderEmptyElement(v)])]):renderEmptyElement(v))):(0,_vue.createCommentVNode)(),(0,_vue.h)("div",{class:"vxe-form-design--body"},[(0,_vue.h)(_layoutWidget.default),(0,_vue.h)(_layoutPreview.default),(0,_vue.h)(_layoutSetting.default),(0,_vue.h)(_layoutStyle.default,{ref:a})]),n?(0,_vue.h)("div",{class:"vxe-form-design--footer"},n?n({}):[]):(0,_vue.createCommentVNode)()])},(0,_vue.watch)(()=>l.widgets,()=>{W()}),(0,_vue.watch)(()=>l.widgets,()=>{W()}),(0,_vue.watch)(()=>l.config,e=>{p(e||{})}),O(),W(),l.config&&p(l.config),(0,_vue.provide)("$xeFormDesign",v),v},render(){return this.renderVN()}});

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

@@ -88,6 +88,26 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         }, evnt);
       }
     };
+    const renderWidgetIcon = widgetConf => {
+      const {
+        icon
+      } = widgetConf;
+      let icVns = [];
+      if (icon) {
+        if (_xeUtils.default.isFunction(icon)) {
+          icVns = (0, _vn.getSlotVNs)(icon({
+            widget: widgetConf
+          }));
+        } else {
+          icVns.push((0, _vue.h)('i', {
+            class: icon
+          }));
+        }
+      }
+      return (0, _vue.h)('div', {
+        class: 'vxe-form-design--widget-item-icon'
+      }, icVns);
+    };
     const renderWidgetList = group => {
       const widgetVNs = [];
       if (group.children) {
@@ -111,11 +131,9 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
             onDragend: dragendEvent
           }, renderWidgetItem ? (0, _vn.getSlotVNs)(renderWidgetItem({}, {
             $formDesign: $xeFormDesign
-          })) : [(0, _vue.h)('i', {
-            class: ['vxe-form-design--widget-item-icon', widgetConf ? widgetConf.icon || '' : '']
-          }), (0, _vue.h)('span', {
+          })) : [renderWidgetIcon(widgetConf), (0, _vue.h)('div', {
             class: 'vxe-form-design--widget-item-name'
-          }, configTitle), (0, _vue.h)('span', {
+          }, configTitle), (0, _vue.h)('div', {
             class: 'vxe-form-design--widget-item-add',
             onClick(evnt) {
               addNewWidget(evnt, name);

package/lib/form-design/src/layout-widget.min.js

@@ -1 +1 @@
-Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_comp=require("../../ui/src/comp"),_xeUtils=_interopRequireDefault(require("xe-utils")),_core=require("@vxe-ui/core"),_vn=require("../../ui/src/vn"),_widgetInfo=require("./widget-info");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}var _default=exports.default=(0,_comp.defineVxeComponent)({props:{},emits:[],setup(){let g=(0,_vue.inject)("$xeFormDesign",null);if(!g)return()=>[];let r=g.reactData,a=e=>{var t,i=e.currentTarget,d=e.dataTransfer,i=i.getAttribute("data-widget-name")||"";g.validWidgetUnique(i)?(t=g.createWidget(i),d&&d.setData("text/plain",i),r.sortWidget=null,r.dragWidget=t):e.preventDefault()},s=e=>{var t;e.preventDefault(),r.dragWidget&&(t=r.dragWidget,r.activeWidget=t,g.dispatchEvent("widget-add",{newWidget:t},e),g.dispatchEvent("add-widget",{newWidget:t},e)),r.dragWidget=null,r.sortWidget=null},u=(e,t)=>{var i;g.validWidgetUnique(t)&&(i=r.widgetObjList,t=g.createWidget(t),i.push(t),r.activeWidget=t,r.sortWidget=null,r.dragWidget=null,g.dispatchEvent("widget-add",{newWidget:t},e),g.dispatchEvent("add-widget",{newWidget:t},e))},e=()=>{var e=r.widgetConfigs;return e.map((t,e)=>{var{title:i,group:d}=t;return(0,_vue.h)("div",{key:e,class:"vxe-form-design--widget-group"},[(0,_vue.h)("div",{class:"vxe-form-design--widget-title"},d?(0,_core.getI18n)("vxe.formDesign.widget.group."+d):""+(i||"")),(0,_vue.h)("div",{class:"vxe-form-design--widget-list",onDragover(e){(e=>{let{widgetObjList:t,dragWidget:i}=r;i&&e.children.some(e=>e.name===i.name)&&(e=_xeUtils.default.findTree(t,e=>e&&e.id===i.id,{children:"children"}))&&e.items.splice(e.index,1)})(t)}},(e=>{let n=[];return e.children&&e.children.forEach((e,t)=>{let i=e.name;var e=(0,_widgetInfo.getWidgetConfigTitle)(i,g),d=_core.renderer.get(i)||{},r=(0,_widgetInfo.getWidgetConfig)(i),d=d.renderFormDesignWidgetItem;n.push((0,_vue.h)("div",{key:t,class:"vxe-form-design--widget-item"},(0,_vue.h)("div",{class:"vxe-form-design--widget-box","data-widget-name":i,title:e,draggable:!0,onDragstart:a,onDragend:s},d?(0,_vn.getSlotVNs)(d({},{$formDesign:g})):[(0,_vue.h)("i",{class:["vxe-form-design--widget-item-icon",r&&r.icon||""]}),(0,_vue.h)("span",{class:"vxe-form-design--widget-item-name"},e),(0,_vue.h)("span",{class:"vxe-form-design--widget-item-add",onClick(e){u(e,i)}},[(0,_vue.h)("i",{class:(0,_core.getIcon)().FORM_DESIGN_WIDGET_ADD})])])))}),n})(t))])})};return()=>(0,_vue.h)("div",{class:"vxe-form-design--widget"},e())}});
+Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_comp=require("../../ui/src/comp"),_xeUtils=_interopRequireDefault(require("xe-utils")),_core=require("@vxe-ui/core"),_vn=require("../../ui/src/vn"),_widgetInfo=require("./widget-info");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}var _default=exports.default=(0,_comp.defineVxeComponent)({props:{},emits:[],setup(){let g=(0,_vue.inject)("$xeFormDesign",null);if(!g)return()=>[];let r=g.reactData,a=e=>{var t,i=e.currentTarget,d=e.dataTransfer,i=i.getAttribute("data-widget-name")||"";g.validWidgetUnique(i)?(t=g.createWidget(i),d&&d.setData("text/plain",i),r.sortWidget=null,r.dragWidget=t):e.preventDefault()},s=e=>{var t;e.preventDefault(),r.dragWidget&&(t=r.dragWidget,r.activeWidget=t,g.dispatchEvent("widget-add",{newWidget:t},e),g.dispatchEvent("add-widget",{newWidget:t},e)),r.dragWidget=null,r.sortWidget=null},u=(e,t)=>{var i;g.validWidgetUnique(t)&&(i=r.widgetObjList,t=g.createWidget(t),i.push(t),r.activeWidget=t,r.sortWidget=null,r.dragWidget=null,g.dispatchEvent("widget-add",{newWidget:t},e),g.dispatchEvent("add-widget",{newWidget:t},e))},l=e=>{var t=e.icon;let i=[];return t&&(_xeUtils.default.isFunction(t)?i=(0,_vn.getSlotVNs)(t({widget:e})):i.push((0,_vue.h)("i",{class:t}))),(0,_vue.h)("div",{class:"vxe-form-design--widget-item-icon"},i)},e=()=>{var e=r.widgetConfigs;return e.map((t,e)=>{var{title:i,group:d}=t;return(0,_vue.h)("div",{key:e,class:"vxe-form-design--widget-group"},[(0,_vue.h)("div",{class:"vxe-form-design--widget-title"},d?(0,_core.getI18n)("vxe.formDesign.widget.group."+d):""+(i||"")),(0,_vue.h)("div",{class:"vxe-form-design--widget-list",onDragover(e){(e=>{let{widgetObjList:t,dragWidget:i}=r;i&&e.children.some(e=>e.name===i.name)&&(e=_xeUtils.default.findTree(t,e=>e&&e.id===i.id,{children:"children"}))&&e.items.splice(e.index,1)})(t)}},(e=>{let n=[];return e.children&&e.children.forEach((e,t)=>{let i=e.name;var e=(0,_widgetInfo.getWidgetConfigTitle)(i,g),d=_core.renderer.get(i)||{},r=(0,_widgetInfo.getWidgetConfig)(i),d=d.renderFormDesignWidgetItem;n.push((0,_vue.h)("div",{key:t,class:"vxe-form-design--widget-item"},(0,_vue.h)("div",{class:"vxe-form-design--widget-box","data-widget-name":i,title:e,draggable:!0,onDragstart:a,onDragend:s},d?(0,_vn.getSlotVNs)(d({},{$formDesign:g})):[l(r),(0,_vue.h)("div",{class:"vxe-form-design--widget-item-name"},e),(0,_vue.h)("div",{class:"vxe-form-design--widget-item-add",onClick(e){u(e,i)}},[(0,_vue.h)("i",{class:(0,_core.getIcon)().FORM_DESIGN_WIDGET_ADD})])])))}),n})(t))])})};return()=>(0,_vue.h)("div",{class:"vxe-form-design--widget"},e())}});

package/lib/form-design/style/style.css

@@ -710,6 +710,9 @@
 
 .vxe-form-design--widget-box {
   position: relative;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
   height: 32px;
   line-height: 32px;
   font-size: var(--vxe-ui-form-design-widget-item-font-size);
@@ -718,8 +721,6 @@
   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;
@@ -734,11 +735,15 @@
 }
 
 .vxe-form-design--widget-item-icon {
+  flex-shrink: 0;
   padding: 0 0.2em;
 }
 
 .vxe-form-design--widget-item-name {
-  padding-left: var(--vxe-ui-layout-padding-half);
+  padding: 0 var(--vxe-ui-layout-padding-half);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .vxe-form-design--widget-item-add {
@@ -746,8 +751,9 @@
   position: absolute;
   top: 0;
   right: var(--vxe-ui-layout-padding-default);
-  width: 1em;
+  width: 1.2em;
   height: 100%;
+  text-align: center;
   cursor: pointer;
 }
 .vxe-form-design--widget-item-add:hover {

package/lib/form-design/style/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%;padding:var(--vxe-ui-layout-padding-default)}.vxe-form-design--widget-row-view-item-inner{position:relative;height:100%;min-height:78px;padding:0;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}.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>.vxe-form-design--widget-subtable-view-item .vxe-form-design--preview-item-operate{top:.4em}.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-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;padding:0 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>.vxe-form--item-content{padding:0}.vxe-form-design--preview-item .vxe-form-design--preview-item-view .vxe-form--group-content{align-items:unset}.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 .vxe-form-design--widget-form-item-prop-list>.vxe-form-design--widget-form-item-prop-width{width:90px}.vxe-form .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);overflow:hidden}.vxe-form-design--header-left,.vxe-form-design--header-right{flex-shrink:0}.vxe-form-design--header-middle{flex-grow:1;overflow:auto}.vxe-form-design--header-right{display:flex;flex-direction:row;align-items:center}.vxe-form-design--header-right .vxe-form-design--header-extra,.vxe-form-design--header-right .vxe-form-design--header-setting{flex-shrink:0}.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-design--widget-render-form-item.widget-subtable>.vxe-form--item-content::after{display:none}.vxe-form-design--layout-style-preview .vxe-form-design--widget-render-form-item.widget-subtable .vxe-body--column .vxe-cell::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;z-index:3}.vxe-form-design--layout-style-preview .vxe-form-design--widget-render-form-item>.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;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:1em}.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}.vxe-form-design .vxe-form--item-inner{height:100%}.vxe-form-design .vxe-form--item-title-content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.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%;padding:var(--vxe-ui-layout-padding-default)}.vxe-form-design--widget-row-view-item-inner{position:relative;height:100%;min-height:78px;padding:0;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}.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>.vxe-form-design--widget-subtable-view-item .vxe-form-design--preview-item-operate{top:.4em}.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-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;padding:0 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>.vxe-form--item-content{padding:0}.vxe-form-design--preview-item .vxe-form-design--preview-item-view .vxe-form--group-content{align-items:unset}.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 .vxe-form-design--widget-form-item-prop-list>.vxe-form-design--widget-form-item-prop-width{width:90px}.vxe-form .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);overflow:hidden}.vxe-form-design--header-left,.vxe-form-design--header-right{flex-shrink:0}.vxe-form-design--header-middle{flex-grow:1;overflow:auto}.vxe-form-design--header-right{display:flex;flex-direction:row;align-items:center}.vxe-form-design--header-right .vxe-form-design--header-extra,.vxe-form-design--header-right .vxe-form-design--header-setting{flex-shrink:0}.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-design--widget-render-form-item.widget-subtable>.vxe-form--item-content::after{display:none}.vxe-form-design--layout-style-preview .vxe-form-design--widget-render-form-item.widget-subtable .vxe-body--column .vxe-cell::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;z-index:3}.vxe-form-design--layout-style-preview .vxe-form-design--widget-render-form-item>.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;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:1em}.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;display:flex;flex-direction:row;align-items:center;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;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{flex-shrink:0;padding:0 .2em}.vxe-form-design--widget-item-name{padding:0 var(--vxe-ui-layout-padding-half);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vxe-form-design--widget-item-add{display:none;position:absolute;top:0;right:var(--vxe-ui-layout-padding-default);width:1.2em;height:100%;text-align:center;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}.vxe-form-design .vxe-form--item-inner{height:100%}.vxe-form-design .vxe-form--item-title-content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

package/lib/index.umd.js

@@ -2872,7 +2872,7 @@ const {
   setConfig,
   setIcon
 } = core_.VxeUI;
-core_.VxeUI.designVersion = "4.1.0";
+core_.VxeUI.designVersion = "4.1.2";
 setConfig({
   formDesign: {
     height: 400,
@@ -2915,7 +2915,7 @@ setIcon({
 const {
   log
 } = core_.VxeUI;
-const version = `design v${"4.1.0"}`;
+const version = `design v${"4.1.2"}`;
 const warnLog = log.create('warn', version);
 const errLog = log.create('error', version);
 ;// ./packages/ui/src/depend.ts
@@ -3814,6 +3814,26 @@ function getSlotVNs(vns) {
         }, evnt);
       }
     };
+    const renderWidgetIcon = widgetConf => {
+      const {
+        icon
+      } = widgetConf;
+      let icVns = [];
+      if (icon) {
+        if (external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isFunction(icon)) {
+          icVns = getSlotVNs(icon({
+            widget: widgetConf
+          }));
+        } else {
+          icVns.push((0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('i', {
+            class: icon
+          }));
+        }
+      }
+      return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        class: 'vxe-form-design--widget-item-icon'
+      }, icVns);
+    };
     const renderWidgetList = group => {
       const widgetVNs = [];
       if (group.children) {
@@ -3837,11 +3857,9 @@ function getSlotVNs(vns) {
             onDragend: dragendEvent
           }, renderWidgetItem ? getSlotVNs(renderWidgetItem({}, {
             $formDesign: $xeFormDesign
-          })) : [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('i', {
-            class: ['vxe-form-design--widget-item-icon', widgetConf ? widgetConf.icon || '' : '']
-          }), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', {
+          })) : [renderWidgetIcon(widgetConf), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
             class: 'vxe-form-design--widget-item-name'
-          }, configTitle), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', {
+          }, configTitle), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
             class: 'vxe-form-design--widget-item-add',
             onClick(evnt) {
               addNewWidget(evnt, name);
@@ -5971,6 +5989,9 @@ const {
       const titleSlot = slots.title;
       const titlePrefixSlot = slots.titlePrefix || slots['title-prefix'];
       const titleSuffixSlot = slots.titleSuffix || slots['title-suffix'] || slots.extra;
+      if (!(titlePrefixSlot || titleSlot || titleSuffixSlot || showStyleSetting)) {
+        return renderEmptyElement($xeFormDesign);
+      }
       return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
         class: 'vxe-form-design--header-wrapper'
       }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {