vxe-design/lib/form-design/src/form-design.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.default=void 0;var _vue=require("vue"),_comp=require("../../ui/src/comp"),_core=require("@vxe-ui/core"),_dom=require("../../ui/src/dom"),_widgetInfo=require("./widget-info"),_xeUtils=_interopRequireDefault(require("xe-utils")),_layoutWidget=_interopRequireDefault(require("./layout-widget")),_layoutPreview=_interopRequireDefault(require("./layout-preview")),_layoutSetting=_interopRequireDefault(require("./layout-setting")),_layoutStyle=_interopRequireDefault(require("./layout-style")),_defaultSettingData=require("./default-setting-data");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}var _default=exports.default=(0,_comp.defineVxeComponent)({name:"VxeFormDesign",props:{size:{type:String,default:()=>(0,_core.getConfig)().formDesign.size||(0,_core.getConfig)().size},config:Object,height:{type:[String,Number],default:()=>(0,_core.getConfig)().formDesign.height},widgets:{type:Array,default:()=>_xeUtils.default.clone((0,_core.getConfig)().formDesign.widgets)||[]},showHeader:{type:Boolean,default:()=>(0,_core.getConfig)().formDesign.showHeader},showPc:{type:Boolean,default:()=>(0,_core.getConfig)().formDesign.showPc},showMobile:{type:Boolean,default:()=>(0,_core.getConfig)().formDesign.showMobile},formRender:Object},emits:["click-widget","add-widget","copy-widget","remove-widget","drag-widget"],setup(g,e){const o=_core.VxeUI.getComponent("vxe-button"),{emit:r,slots:d}=e;var t=_xeUtils.default.uniqueId();const a=(0,_vue.ref)(),l=(0,_vue.ref)(),u=(0,_core.useSize)(g)["computeSize"],s=(0,_vue.reactive)({formData:{},widgetConfigs:[],widgetObjList:[],dragWidget:null,sortWidget:null,activeWidget:null});var i=(0,_vue.reactive)({});const n={refElem:a},c={computeSize:u},f={xID:t,props:g,context:e,reactData:s,internalData:i,getRefMaps:()=>n,getComputeMaps:()=>c},v=e=>new _widgetInfo.FormDesignWidgetInfo(f,e,s.widgetObjList),_=()=>new _widgetInfo.FormDesignWidgetInfo(f,"",s.widgetObjList),h=e=>{var t;e&&({formConfig:e,widgetData:t}=e,e&&p(e),t)&&x(t);const{activeWidget:i,widgetObjList:r}=s;return i?(e=_xeUtils.default.findTree(r,e=>e.id===i.id,{children:"children"}),s.activeWidget=e?e.item:r[0]||null):s.activeWidget=r[0]||null,(0,_vue.nextTick)()};const m=()=>_xeUtils.default.clone(s.formData,!0),p=e=>(s.formData=Object.assign({},I(),e),(0,_vue.nextTick)());const w=()=>{var e=_xeUtils.default.clone(s.widgetObjList,!0);return _xeUtils.default.eachTree(e,e=>{e.model.value=null},{children:"children"}),e},x=e=>(s.widgetObjList=(e||[]).map(e=>(0,_widgetInfo.configToWidget)(e)),(0,_vue.nextTick)()),D=()=>{var e=l.value;return e&&e.openStylePreview(),(0,_vue.nextTick)()},y=()=>(s.widgetObjList=[],S(),(0,_vue.nextTick)()),b={dispatchEvent(e,t,i){r(e,(0,_core.createEvent)(i,{$xeFormDesign:f},t))},createWidget:v,createEmptyWidget:_,getConfig(){return{formConfig:m(),widgetData:w()}},clearConfig:y,loadConfig:h,reloadConfig:e=>(y(),h(e)),getFormConfig:m,loadFormConfig:p,getWidgetById:e=>{var t=s["widgetObjList"];if(e){const i=_xeUtils.default.toNumber(e);e=_xeUtils.default.findTree(t,e=>e&&e.id===i,{children:"children"});if(e)return e.item}return null},getFormData(){var e=s["widgetObjList"];const t={};return _xeUtils.default.eachTree(e,e=>{t[e.field]=null},{children:"children"}),t},getWidgetData:w,loadWidgetData:x,refreshPreviewView(){var e=l.value;return e&&e.updatePreviewView(),(0,_vue.nextTick)()},openStyleSetting:D},C=()=>{var e=g["widgets"],t=[];const n=[],o=[],d=[],a=[];_core.renderer.forEach((e,t)=>{e=e.createFormDesignWidgetConfig;if(e){var i=v(t),e=(0,_widgetInfo.getWidgetConfig)(t);const r=(0,_widgetInfo.getWidgetConfigCustomGroup)(t,f);if(r){t=a.find(e=>e.title===r);t?t.children.push(i):a.push({title:r,children:[i]})}else switch(e.group){case"layout":o.push(i);break;case"advanced":d.push(i);break;default:["title"].includes(i.name)||n.push(i)}}}),n.length&&t.push({group:"base",children:n}),o.length&&t.push({group:"layout",children:o}),d.length&&t.push({group:"advanced",children:d}),a.length&&t.push(...a),e&&e.length?s.widgetConfigs=g.widgets.map(e=>({title:e.customGroup,group:e.group,children:e.children?e.children.map(e=>{return v(e)}):[]})):s.widgetConfigs=t},W=t=>{var e=s["widgetObjList"];if((0,_widgetInfo.getWidgetConfig)(t).unique){const i=[];_xeUtils.default.eachTree(e,e=>{e.name===t&&i.push(e)},{children:"children"});e=i.length<1;return e||_core.VxeUI.modal&&_core.VxeUI.modal.message({content:(0,_core.getI18n)("vxe.formDesign.error.wdFormUni"),status:"error",id:"wdFormUni"}),e}return!0};t={validWidgetUnique:W,handleClickWidget(e,t){t&&t.name&&(e.stopPropagation(),s.activeWidget=t,b.dispatchEvent("click-widget",{widget:t},e))},handleCopyWidget(e,t){var i,r=s["widgetObjList"],n=_xeUtils.default.findTree(r,e=>e.id===t.id,{children:"children"});n&&(e.stopPropagation(),W(t.name))&&(n=n["path"],n=Number(n[0]),(i=v(t.name)).title&&(i.title=(0,_core.getI18n)("vxe.formDesign.widget.copyTitle",[(""+t.title).replace((0,_core.getI18n)("vxe.formDesign.widget.copyTitle",[""]),"")])),n>=r.length-1?r.push(i):r.splice(n+1,0,i),s.activeWidget=i,s.widgetObjList=[...r],b.dispatchEvent("copy-widget",{widget:t,newWidget:i},e))},handleRemoveWidget(e,t){var i,r,n=s["widgetObjList"],o=_xeUtils.default.findTree(n,e=>e.id===t.id,{children:"children"});o&&({index:o,parent:i,items:r}=o,e.stopPropagation(),o>=r.length-1?s.activeWidget=r[o-1]:s.activeWidget=r[o+1]||null,i&&"row"===i.name?r[o]=_():r.splice(o,1),s.widgetObjList=[...n],b.dispatchEvent("remove-widget",{widget:t},e))}};const I=()=>{var{formRender:e,showPc:t,showMobile:i}=g;let r=(0,_defaultSettingData.getDefaultSettingFormData)({pcVisible:t,mobileVisible:i});return e&&(i=(t=_core.renderer.get(e.name))?t.createFormDesignSettingFormConfig:null,r=(i?i({}):{})||{}),r},S=()=>{s.formData=I()},q=()=>{D()};Object.assign(f,b,t);return f.renderVN=()=>{var{height:e,showHeader:t}=g,i=u.value,r=d.header,n=d.footer;return(0,_vue.h)("div",{ref:a,class:["vxe-form-design",{["size--"+i]:i}],style:e?{height:(0,_dom.toCssUnit)(e)}:null},[t||r?(0,_vue.h)("div",{class:"vxe-form-design--header"},r?r({}):(i=d.title,e=d.titlePrefix||d["title-prefix"],t=d.titleSuffix||d["title-suffix"]||d.extra,(0,_vue.h)("div",{class:"vxe-form-design--header-wrapper"},[(0,_vue.h)("div",{class:"vxe-form-design--header-left"},e?e({}):[]),(0,_vue.h)("div",{class:"vxe-form-design--header-middle"},i?i({}):[]),(0,_vue.h)("div",{class:"vxe-form-design--header-right"},[t?(0,_vue.h)("div",{class:"vxe-form-design--header-extra"},t({})):(0,_core.renderEmptyElement)(f),(0,_vue.h)("div",{class:"vxe-form-design--header-setting"},[(0,_vue.h)(o,{mode:"text",status:"primary",icon:(0,_core.getIcon)().FORM_DESIGN_STYLE_SETTING,content:(0,_core.getI18n)("vxe.formDesign.styleSetting.btn"),onClick:q})])])]))):(0,_vue.createCommentVNode)(),(0,_vue.h)("div",{class:"vxe-form-design--body"},[(0,_vue.h)(_layoutWidget.default),(0,_vue.h)(_layoutPreview.default),(0,_vue.h)(_layoutSetting.default),(0,_vue.h)(_layoutStyle.default,{ref:l})]),n?(0,_vue.h)("div",{class:"vxe-form-design--footer"},n?n({}):[]):(0,_vue.createCommentVNode)()])},(0,_vue.watch)(()=>g.widgets,()=>{C()}),(0,_vue.watch)(()=>g.widgets,()=>{C()}),(0,_vue.watch)(()=>g.config,e=>{h(e||{})}),S(),C(),g.config&&h(g.config),(0,_vue.provide)("$xeFormDesign",f),f},render(){return this.renderVN()}});