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

"use strict";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(){const e=_core.VxeUI.getComponent("vxe-form"),a=(0,_vue.inject)("$xeFormDesign",null);if(!a)return()=>[];const u=a["reactData"],i=e=>{const{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),a.dispatchEvent("drag-widget",{widget:i},e)))},r=e=>{e.preventDefault()};let l=Date.now();const n=e=>{const{widgetObjList:t,sortWidget:i}=u;var r,n,d,o,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:n,index:d,items:o,parent:s}=r,s&&"row"===s.name?r.items[r.index]=a.createEmptyWidget():o.splice(d,1),t.unshift(n),l=Date.now(),a.dispatchEvent("drag-widget",{widget:n},e))},d=e=>{const{widgetObjList:t,sortWidget:i}=u;var r,n,d,o,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:n,index:d,items:o,parent:s}=r,s&&"row"===s.name?r.items[r.index]=a.createEmptyWidget():o.splice(d,1),t.push(n),l=Date.now(),a.dispatchEvent("drag-widget",{widget:n},e))};return()=>{const 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:n}),(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:a,$formView:null};return e?(0,_vn.getSlotVNs)(e(t,i)):[]}}))})}}),(0,_vue.h)("div",{class:"vxe-form-design--preview-place-widget",onDragenter:d})])])}}});