vxe-design/lib/form-design/widget-row/row-view.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.WidgetRowViewComponent=exports.WidgetRowEditComponent=void 0;var _vue=require("vue"),_comp=require("../../ui/src/comp"),_util=require("../src/util"),_core=require("@vxe-ui/core"),_vn=require("../../ui/src/vn"),_xeUtils=_interopRequireDefault(require("xe-utils"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}const ViewColItemComponent=(0,_comp.defineVxeComponent)({name:"ViewColItem",props:{parentWidget:{type:Object,default:()=>({})},widget:{type:Object,default:()=>({})},span:Number,colItemIndex:{type:Number,default:0}},emits:[],setup(l){const t=_core.VxeUI.getComponent("vxe-form-item"),u=_core.VxeUI.getComponent("vxe-button"),p=(0,_vue.inject)("$xeFormDesign",null);if(!p)return()=>[];const c=p["reactData"],m=e=>{e.stopPropagation();var t=e.currentTarget,e=e.dataTransfer,t=t.getAttribute("data-widget-id")||"",i=p.getWidgetById(t);e&&e.setData("text/plain",t),c.sortWidget=i,c.dragWidget=null},g=e=>{const{parentWidget:t,colItemIndex:i}=l,{widgetObjList:r,sortWidget:n}=c;var o=t.children[i],d=p.internalData;if(e.stopPropagation(),n&&t&&n.id!==t.id&&!(0,_util.hasFormDesignLayoutType)(n)&&!(0,_util.hasFormDesignLayoutType)(o)){var a=_xeUtils.default.findTree(r,e=>e&&e.id===n.id,{children:"children"});if(a){var{item:a,index:s,items:u,parent:m}=a;if(t.children.length!==t.options.colSize&&(t.children=_xeUtils.default.range(0,t.options.colSize).map(e=>t.children[e]||p.createEmptyWidget())),m&&m.id===t.id)t.children[i]=a,t.children[s]=o;else{if(o&&o.name)return;t.children[i]=a,u.splice(s,1)}e.preventDefault(),d.lastDragTime=Date.now(),p.dispatchEvent("drag-widget",{widget:a},e)}}};return()=>{const{widget:o,span:e}=l,{dragWidget:d,activeWidget:a,sortWidget:s}=c;return(0,_vue.h)(t,{span:e,padding:!1},{default(){var e=o?o.name:"",t=_core.renderer.get(e)||{},t=t.renderFormDesignWidgetEdit||t.renderFormDesignWidgetView,e=o||{name:e},i={widget:o,readonly:!1,disabled:!1,isEditMode:!0,isViewMode:!1,$formDesign:p,$formView:null},r=a&&o&&a.id===o.id,n=!t;return(0,_vue.h)("div",{class:"vxe-form-design--widget-row-view","data-widget-id":o.id,draggable:!n,onDragstart:m,onDragenter:g,onClick(e){o&&p.handleClickWidget(e,o)}},[(0,_vue.h)("div",{class:["vxe-form-design--widget-row-view-item-inner",{"is--empty":n,"is--active":r,"is--sort":s&&o&&s.id===o.id,"is--drag":d&&o&&d.id===o.id}]},[t?(0,_vue.h)("div",{class:"vxe-form-design--widget-row-view-item-wrapper"},[(0,_vue.h)("div",{class:"vxe-form-design--widget-row-view-item-box vxe-form--item-row"},(0,_vn.getSlotVNs)(t(e,i))),r?(0,_vue.h)("div",{class:"vxe-form-design--preview-item-operate"},[(0,_vue.h)(u,{icon:(0,_core.getIcon)().FORM_DESIGN_WIDGET_COPY,status:"primary",size:"mini",circle:!0,onClick(e){p.handleCopyWidget(e.$event,o)}}),(0,_vue.h)(u,{icon:(0,_core.getIcon)().FORM_DESIGN_WIDGET_DELETE,status:"danger",size:"mini",circle:!0,onClick(e){p.handleRemoveWidget(e.$event,o)}})]):(0,_vue.createCommentVNode)()]):(0,_vue.h)("div",{class:"vxe-form-design--widget-row-view-empty"},"控件位置")])])}})}}}),WidgetRowEditComponent=exports.WidgetRowEditComponent=(0,_comp.defineVxeComponent)({name:"WidgetRowEdit",props:{renderOpts:{type:Object,default:()=>({})},renderParams:{type:Object,default:()=>({})}},emits:[],setup(t){const r=_core.VxeUI.getComponent("vxe-form-group"),n=(0,_vue.computed)(()=>{var e=t["renderParams"],e=e["widget"],e=e["options"],e=e["colSpan"];return(e?(""+e).split(","):[]).map(e=>Number(e))});return()=>{var e=t["renderParams"];const i=e["widget"];return(0,_vue.h)(r,{field:i.field},{default(){return n.value.map((e,t)=>(0,_vue.h)(ViewColItemComponent,{key:t,parentWidget:i,widget:i.children[t],span:e,colItemIndex:t}))}})}}}),WidgetRowViewComponent=exports.WidgetRowViewComponent=(0,_comp.defineVxeComponent)({name:"WidgetRowView",props:{renderOpts:{type:Object,default:()=>({})},renderParams:{type:Object,default:()=>({})}},emits:[],setup(i){const r=_core.VxeUI.getComponent("vxe-row"),d=_core.VxeUI.getComponent("vxe-col"),a=(0,_vue.inject)("$xeFormDesign",null),s=(0,_vue.inject)("$xeFormView",null),n=(0,_vue.computed)(()=>{var e=i["renderParams"],e=e["widget"],e=e["options"],e=e["colSpan"];return(e?(""+e).split(","):[]).map(e=>Number(e))});return()=>{var e=i["renderParams"];const o=e["widget"],t=n.value;return(0,_vue.h)(r,{},{default(){return t.map((e,n)=>(0,_vue.h)(d,{key:n,class:"vxe-form--item-row",span:e},{default(){var e=o.children[n];if(e){var t=e["name"],t=(_core.renderer.get(t)||{}).renderFormDesignWidgetView,i=e,r=!!a,e={widget:e,readonly:!1,disabled:!1,isEditMode:r,isViewMode:!r,$formDesign:a,$formView:s};if(t)return(0,_vn.getSlotVNs)(t(i,e))}return(0,_vue.createCommentVNode)()}}))}})}}});