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

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