vxe-design
Version:
A PC-based visual designer based on Vxe UI, used for building zero-code and low-code platforms
1 lines • 2.67 kB
JavaScript
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())}});