vxe-design/lib/form-design/src/layout-view-item.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.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}}const 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}){const s=_core.VxeUI.getComponent("vxe-button"),u=(0,_vue.inject)("$xeFormDesign",null);if(!u)return()=>[];const l=u["reactData"],c=e=>{var t=l["widgetObjList"],e=e.currentTarget;const i=Number(e.getAttribute("data-widget-id"));e=_xeUtils.default.findTree(t,e=>e&&e.id===i,{children:"children"});e&&(l.dragWidget=null,l.sortWidget=e.item)},m=()=>{l.activeWidget=l.sortWidget,l.sortWidget=null},g=e=>{const{widgetObjList:t,sortWidget:i}=l;var r=u.internalData,d=r["lastDragTime"];if(d&&d>Date.now()-300)e.preventDefault();else if(i){var n,d=e.currentTarget;e.preventDefault();const a=Number(d.getAttribute("data-widget-id"));a!==i.id&&(d=_xeUtils.default.findTree(t,e=>e&&e.id===a,{children:"children"}))&&(n=_xeUtils.default.findTree(t,e=>e&&e.id===i.id,{children:"children"}))&&(n.parent&&"row"===n.parent.name?n.items[n.index]=u.createEmptyWidget():n.items.splice(n.index,1),d.items.splice(d.index,0,n.item),r.lastDragTime=Date.now(),u.dispatchEvent("drag-widget",{widget:n.item},e))}};return()=>{var{dragWidget:e,activeWidget:t,sortWidget:i}=l;const 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:c,onDragend:m,onDragenter:g,onClick(e){var t;e=e,t=r,u.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)(s,{icon:(0,_core.getIcon)().FORM_DESIGN_WIDGET_COPY,status:"primary",size:"mini",circle:!0,onClick(e){u.handleCopyWidget(e.$event,r)}}),(0,_vue.h)(s,{icon:(0,_core.getIcon)().FORM_DESIGN_WIDGET_DELETE,status:"danger",size:"mini",circle:!0,onClick(e){u.handleRemoveWidget(e.$event,r)}})]):(0,_vue.createCommentVNode)()])}}});