vxe-design/lib/form-design/src/layout-style.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"),_vn=require("../../ui/src/vn"),_formView=_interopRequireDefault(require("./form-view")),_defaultStyleForm=require("./default-style-form"),_defaultSettingData=require("./default-setting-data");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}var _default=exports.default=(0,_comp.defineVxeComponent)({name:"FormDesignLayoutStyle",props:{},emits:[],setup(){let e=_core.VxeUI.getComponent("vxe-modal"),s=_core.VxeUI.getComponent("vxe-tabs"),f=_core.VxeUI.getComponent("vxe-tab-pane"),d=(0,_vue.inject)("$xeFormDesign",null),_=(0,_vue.reactive)({activeTab:1});var r={reactData:_,renderVN(){return[]}};if(d){let{props:o,reactData:t}=d,a=(0,_vue.ref)(!1),i=(0,_vue.ref)(null),n=(0,_vue.ref)({}),l=()=>{i.value=d.getConfig()},u=e=>{var r=e.viewRender,t=_.activeTab,r=(r||{}).name,r=_core.renderer.get(r)||{},o=r?r.createFormViewFormConfig:null,r=r?r.createFormViewMobileFormConfig:null;return(2===t?r||_defaultSettingData.createDefaultFormViewMobileFormConfig:o||_defaultSettingData.createDefaultFormViewPCFormConfig)(e)};var c={updatePreviewView:l,openStylePreview(){var e=o.showPc;l(),_.activeTab=e?1:2,a.value=!0}};Object.assign(r,c);let v=()=>{var e=o.formRender,r=t.formData;if(e){e=_core.renderer.get(e.name),e=e?e.renderFormDesignMobileStyleFormView:null;if(e)return(0,_vue.h)("div",{class:"vxe-form-design--custom-setting-mobile-form-view"},(0,_vn.getSlotVNs)(e({},{$formDesign:d,formConfig:r})))}return(0,_vue.h)(_defaultStyleForm.DefaultMobileStyleFormComponent,{formData:r})},m=()=>{var e=o.formRender,r=t.formData;if(e){e=_core.renderer.get(e.name),e=e?e.renderFormDesignStyleFormView:null;if(e)return(0,_vue.h)("div",{class:"vxe-form-design--custom-setting-pc-form-view"},(0,_vn.getSlotVNs)(e({},{$formDesign:d,formConfig:r})))}return(0,_vue.h)(_defaultStyleForm.DefaultPCStyleFormComponent,{formData:r})};r.renderVN=()=>{let{showPc:r,showMobile:t}=o;return(0,_vue.h)(e,{modelValue:a.value,title:(0,_core.getI18n)("vxe.formDesign.styleSetting.title"),height:"90vh",width:"90vw",escClosable:!0,maskClosable:!0,destroyOnClose:!0,showMaximize:!0,transfer:!0,"onUpdate:modelValue"(e){a.value=e}},{default(){return(0,_vue.h)("div",{class:"vxe-form-design--layout-style"},[(e=2===(e=_.activeTab),(0,_vue.h)("div",{class:["vxe-form-design--layout-style-preview","is--"+(e?"mobile":"pc")]},[e?(0,_vue.h)("div",{class:"vxe-form-view"},"暂不支持"):(0,_vue.h)(_formView.default,{modelValue:n.value,config:i.value,createFormConfig:u,"onUpdate:modelValue"(e){n.value=e}})])),(r||t?()=>{let{showPc:r,showMobile:t}=o;var e=_.activeTab;return(0,_vue.h)("div",{class:"vxe-form-design--layout-style-setting"},[(0,_vue.h)(s,{modelValue:e,titleWidth:r&&t?"50%":"100%",titleAlign:"center",padding:!0,onChange:l,"onUpdate:modelValue"(e){_.activeTab=e}},{default(){var e=[];return r&&e.push((0,_vue.h)(f,{title:(0,_core.getI18n)("vxe.formDesign.widgetProp.displaySetting.pc"),icon:(0,_core.getIcon)().FORM_DESIGN_PROPS_PC,k:1,name:1},{default(){return m()}})),t&&e.push((0,_vue.h)(f,{title:(0,_core.getI18n)("vxe.formDesign.widgetProp.displaySetting.mobile"),icon:(0,_core.getIcon)().FORM_DESIGN_PROPS_MOBILE,key:2,name:2},{default(){return v()}})),e}})])}:(0,_vue.createCommentVNode))()]);var e}})},(0,_vue.provide)("$xeFormDesignLayoutStyle",r)}return r},render(){return this.renderVN()}});