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

"use strict";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}}const WidgetRowFormComponent=exports.WidgetRowFormComponent=(0,_comp.defineVxeComponent)({props:{renderOpts:{type:Object,default:()=>({})},renderParams:{type:Object,default:()=>({})}},emits:[],setup(l){const o=_core.VxeUI.getComponent("vxe-form"),n=_core.VxeUI.getComponent("vxe-form-item"),i=_core.VxeUI.getComponent("vxe-row"),s=_core.VxeUI.getComponent("vxe-col"),u=(0,_vue.inject)("$xeFormDesign",null);if(!u)return()=>[];const a=(0,_use.useWidgetName)(l)["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"},c=(0,_vue.computed)(()=>{var e=l["renderParams"],e=e["widget"];const r=e["options"];return p.value.find(e=>e.value===r.colSize)});return()=>{var e=l["renderParams"];const r=e["widget"],t=a.value;return(0,_vue.h)(o,{class:`vxe-form-design--widget-${t}-form`,vertical:!0,span:24,titleBold:!0,titleOverflow:!0,data:r.options},{default(){return[(0,_vue.h)(n,{title:(0,_core.getI18n)("vxe.formDesign.widgetProp.rowProp.colSize"),field:"colSize",itemRender:{name:"VxeRadioGroup",options:p.value,props:{type:"button"}}}),(0,_vue.h)(n,{title:(0,_core.getI18n)("vxe.formDesign.widgetProp.rowProp.layout")},{default(){var e=c.value;return e?e.list.map((a,o)=>(0,_vue.h)(i,{key:o,class:[`vxe-form-design--widget-${t}-form-row`,{"is--active":a.value===r.options.colSpan}],onClick(){{var e=a,r;const i=(r=l["renderParams"])["widget"];var r=i["options"],o,o=(o=u["reactData"])["widgetObjList"];const s=i.children.filter(e=>e.name);var t,n=s.slice(r.colSize);n.length&&(o=_xeUtils.default.findTree(o,e=>e.id===i.id,{children:"children"}))&&({items:o,index:t}=o,t>=o.length-1?o.push(...n):o.splice(t+1,0,...n)),r.colSpan=e.value,i.children=_xeUtils.default.range(0,r.colSize).map((e,r)=>s[r]||u.createEmptyWidget())}}},{default(){return a.spans.map((e,r)=>(0,_vue.h)(s,{key:""+o+r,class:`vxe-form-design--widget-${t}-form-col`,span:e},{default(){return(0,_vue.h)("div",{},""+v[e])}}))}})):[]}})]}})}}});