vxe-design/lib/form-design/widget-row/row-form.min.js

A PC-based visual designer based on Vxe UI, used for building zero-code and low-code platforms

Object.defineProperty(exports,"__esModule",{value:!0}),exports.WidgetRowFormComponent=void 0;var _vue=require("vue"),_comp=require("../../ui/src/comp"),_core=require("@vxe-ui/core"),_use=require("../../form-design/src/use"),_xeUtils=_interopRequireDefault(require("xe-utils"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}let WidgetRowFormComponent=exports.WidgetRowFormComponent=(0,_comp.defineVxeComponent)({props:{renderOpts:{type:Object,default:()=>({})},renderParams:{type:Object,default:()=>({})}},emits:[],setup(n){let t=_core.VxeUI.getComponent("vxe-form"),l=_core.VxeUI.getComponent("vxe-form-item"),i=_core.VxeUI.getComponent("vxe-row"),a=_core.VxeUI.getComponent("vxe-col"),s=(0,_vue.inject)("$xeFormDesign",null);if(!s)return()=>[];let u=(0,_use.useWidgetName)(n).computeKebabCaseName,p=(0,_vue.ref)([{label:(0,_core.getI18n)("vxe.formDesign.widgetProp.rowProp.col2"),value:2,list:[{value:"12,12",spans:[12,12]},{value:"8,16",spans:[8,16]},{value:"16,8",spans:[16,8]},{value:"6,18",spans:[6,18]},{value:"18,6",spans:[18,6]}]},{label:(0,_core.getI18n)("vxe.formDesign.widgetProp.rowProp.col3"),value:3,list:[{value:"8,8,8",spans:[8,8,8]},{value:"6,6,12",spans:[6,6,12]},{value:"12,6,6",spans:[12,6,6]},{value:"6,12,6",spans:[6,12,6]}]},{label:(0,_core.getI18n)("vxe.formDesign.widgetProp.rowProp.col4"),value:4,list:[{value:"6,6,6,6",spans:[6,6,6,6]}]},{label:(0,_core.getI18n)("vxe.formDesign.widgetProp.rowProp.col6"),value:6,list:[{value:"4,4,4,4,4,4",spans:[4,4,4,4,4,4]}]}]),v={18:"3/4",16:"2/3",12:"1/2",8:"1/3",6:"1/4",4:"1/6"},d=(0,_vue.computed)(()=>{var e=n.renderParams,e=e.widget;let r=e.options;return p.value.find(e=>e.value===r.colSize)});return()=>{var e=n.renderParams;let r=e.widget,o=u.value;return(0,_vue.h)(t,{class:`vxe-form-design--widget-${o}-form`,vertical:!0,span:24,titleBold:!0,titleOverflow:!0,data:r.options},{default(){return[(0,_vue.h)(l,{title:(0,_core.getI18n)("vxe.formDesign.widgetProp.rowProp.colSize"),field:"colSize",itemRender:{name:"VxeRadioGroup",options:p.value,props:{type:"button"}}}),(0,_vue.h)(l,{title:(0,_core.getI18n)("vxe.formDesign.widgetProp.rowProp.layout")},{default(){var e=d.value;return e?e.list.map((e,t)=>(0,_vue.h)(i,{key:t,class:[`vxe-form-design--widget-${o}-form-row`,{"is--active":e.value===r.options.colSpan}],onClick(){(e=>{var r=n.renderParams;let t=r.widget;var r=t.options,o=s.reactData,o=o.widgetObjList;let l=t.children.filter(e=>e.name);var i,a=l.slice(r.colSize);a.length&&(o=_xeUtils.default.findTree(o,e=>e.id===t.id,{children:"children"}))&&({items:o,index:i}=o,i>=o.length-1?o.push(...a):o.splice(i+1,0,...a)),r.colSpan=e.value,t.children=_xeUtils.default.range(0,r.colSize).map((e,r)=>l[r]||s.createEmptyWidget())})(e)}},{default(){return e.spans.map((e,r)=>(0,_vue.h)(a,{key:""+t+r,class:`vxe-form-design--widget-${o}-form-col`,span:e},{default(){return(0,_vue.h)("div",{},""+v[e])}}))}})):[]}})]}})}}});