vxe-design
Version:
A PC-based visual designer based on Vxe UI, used for building zero-code and low-code platforms
1 lines • 2.54 kB
JavaScript
Object.defineProperty(exports,"__esModule",{value:!0}),exports.ViewItemComponent=void 0;var _vue=require("vue"),_comp=require("../../ui/src/comp"),_core=require("@vxe-ui/core"),_xeUtils=_interopRequireDefault(require("xe-utils"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}let ViewItemComponent=exports.ViewItemComponent=(0,_comp.defineVxeComponent)({name:"FormDesignLayoutViewItem",props:{item:{type:Object,default:()=>({})},itemIndex:{type:Number,default:0},items:{type:Array,default:()=>[]}},emits:[],setup(a,{slots:o}){let l=_core.VxeUI.getComponent("vxe-button"),s=(0,_vue.inject)("$xeFormDesign",null);if(!s)return()=>[];let u=s.reactData,m=e=>{var t=u.widgetObjList,e=e.currentTarget;let i=Number(e.getAttribute("data-widget-id"));e=_xeUtils.default.findTree(t,e=>e&&e.id===i,{children:"children"});e&&(u.dragWidget=null,u.sortWidget=e.item)},g=()=>{u.activeWidget=u.sortWidget,u.sortWidget=null},c=e=>{let{widgetObjList:i,sortWidget:r}=u;var d=s.internalData,n=d.lastDragTime;if(n&&n>Date.now()-300)e.preventDefault();else if(r){var a,n=e.currentTarget;e.preventDefault();let t=Number(n.getAttribute("data-widget-id"));t!==r.id&&(n=_xeUtils.default.findTree(i,e=>e&&e.id===t,{children:"children"}))&&(a=_xeUtils.default.findTree(i,e=>e&&e.id===r.id,{children:"children"}))&&(a.parent&&"row"===a.parent.name?a.items[a.index]=s.createEmptyWidget():a.items.splice(a.index,1),n.items.splice(n.index,0,a.item),d.lastDragTime=Date.now(),s.dispatchEvent("widget-drag",{widget:a.item},e),s.dispatchEvent("drag-widget",{widget:a.item},e))}};return()=>{var{dragWidget:e,activeWidget:t,sortWidget:i}=u;let r=a.item;var d=r.name,t=t&&t.id===r.id,n=o.default;return(0,_vue.h)("div",{key:r.id,"data-widget-id":r.id,draggable:!0,class:["vxe-form-design--preview-item","widget-"+_xeUtils.default.kebabCase(d),{"is--active":t,"is--sort":i&&i.id===r.id,"is--drag":e&&e.id===r.id}],onDragstart:m,onDragend:g,onDragenter:c,onContextmenu(e){s.handleContextmenuWidget(e,r)},onClick(e){var t;e=e,t=r,s.handleClickWidget(e,t)}},[(0,_vue.h)("div",{class:"vxe-form-design--preview-item-view vxe-form--item-row"},n?n({}):[]),t?(0,_vue.h)("div",{class:"vxe-form-design--preview-item-operate"},[(0,_vue.h)(l,{icon:(0,_core.getIcon)().FORM_DESIGN_WIDGET_COPY,status:"primary",size:"mini",circle:!0,onClick(e){s.handleCopyWidget(e.$event,r)}}),(0,_vue.h)(l,{icon:(0,_core.getIcon)().FORM_DESIGN_WIDGET_DELETE,status:"danger",size:"mini",circle:!0,onClick(e){s.handleRemoveWidget(e.$event,r)}})]):(0,_vue.createCommentVNode)()])}}});