vxe-design/lib/form-design/src/layout-preview.min.js

A PC-based visual designer based on Vxe UI, used for building zero-code and low-code platforms

Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_comp=require("../../ui/src/comp"),_core=require("@vxe-ui/core"),_vn=require("../../ui/src/vn"),_layoutViewItem=require("./layout-view-item"),_util=require("../src/util"),_xeUtils=_interopRequireDefault(require("xe-utils"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}var _default=exports.default=(0,_comp.defineVxeComponent)({name:"FormDesignLayoutPreview",props:{},emits:[],setup(){let e=_core.VxeUI.getComponent("vxe-form"),o=(0,_vue.inject)("$xeFormDesign",null);if(!o)return()=>[];let u=o.reactData,i=e=>{let{widgetObjList:t,dragWidget:i}=u;i&&(e.preventDefault(),_xeUtils.default.findTree(t,e=>e&&e.id===i.id,{children:"children"})||(u.sortWidget=i,t.push(i),o.dispatchEvent("widget-drag",{widget:i},e),o.dispatchEvent("drag-widget",{widget:i},e)))},r=e=>{e.preventDefault()},l=Date.now(),d=e=>{let{widgetObjList:t,sortWidget:i}=u;var r,d,n,a,s;e.stopPropagation(),l>Date.now()-300?e.preventDefault():i&&!(0,_util.hasFormDesignLayoutType)(i)&&(r=_xeUtils.default.findTree(t,e=>e.id===i.id,{children:"children"}))&&({item:d,index:n,items:a,parent:s}=r,s&&"row"===s.name?r.items[r.index]=o.createEmptyWidget():a.splice(n,1),t.unshift(d),l=Date.now(),o.dispatchEvent("widget-drag",{widget:d},e),o.dispatchEvent("drag-widget",{widget:d},e))},n=e=>{let{widgetObjList:t,sortWidget:i}=u;var r,d,n,a,s;e.stopPropagation(),l>Date.now()-300?e.preventDefault():i&&!(0,_util.hasFormDesignLayoutType)(i)&&(r=_xeUtils.default.findTree(t,e=>e.id===i.id,{children:"children"}))&&({item:d,index:n,items:a,parent:s}=r,s&&"row"===s.name?r.items[r.index]=o.createEmptyWidget():a.splice(n,1),t.push(d),l=Date.now(),o.dispatchEvent("widget-drag",{widget:d},e),o.dispatchEvent("drag-widget",{widget:d},e))};return()=>{let t=u.widgetObjList;return(0,_vue.h)("div",{class:"vxe-form-design--preview",onDragenter:i,onDragover:r},[(0,_vue.h)("div",{class:"vxe-form-design--preview-wrapper"},[(0,_vue.h)("div",{class:"vxe-form-design--preview-place-widget",onDragenter:d}),(0,_vue.h)(e,{customLayout:!0,span:24,vertical:!0},{default(){return(0,_vue.h)(_vue.TransitionGroup,{class:"vxe-form-design--preview-list",tag:"div",name:"vxe-form-design--preview-list"},{default:()=>t.map((r,e)=>(0,_vue.h)(_layoutViewItem.ViewItemComponent,{key:r.id,item:r,itemIndex:e,items:t},{default(){var e=r.name,e=_core.renderer.get(e)||{},e=e.renderFormDesignWidgetEdit||e.renderFormDesignWidgetView,t=r,i={widget:r,readonly:!1,disabled:!1,isEditMode:!0,isViewMode:!1,$formDesign:o,$formView:null};return e?(0,_vn.getSlotVNs)(e(t,i)):[]}}))})}}),(0,_vue.h)("div",{class:"vxe-form-design--preview-place-widget",onDragenter:n})])])}}});