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

A vue based PC component library

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