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

"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"),_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(){const e=_core.VxeUI.getComponent("vxe-modal"),o=_core.VxeUI.getComponent("vxe-tabs"),a=_core.VxeUI.getComponent("vxe-tab-pane"),r=(0,_vue.inject)("$xeFormDesign",null),n=(0,_vue.reactive)({activeTab:1});var t={reactData:n,renderVN(){return[]}};if(r){const{props:l,reactData:u}=r,v=(0,_vue.ref)(!1),s=(0,_vue.ref)(null),m=(0,_vue.ref)({}),f=()=>{s.value=r.getConfig()},d=e=>{var t=e["viewRender"],r=n["activeTab"],t=(t||{})["name"],t=_core.renderer.get(t)||{},o=t?t.createFormViewFormConfig:null,t=t?t.createFormViewMobileFormConfig:null;return(2===r?t||_defaultSettingData.createDefaultFormViewMobileFormConfig:o||_defaultSettingData.createDefaultFormViewPCFormConfig)(e)};var i={updatePreviewView:f,openStylePreview(){var e=l["showPc"];f(),n.activeTab=e?1:2,v.value=!0}};Object.assign(t,i);const c=()=>{var e=l["formRender"],t=u["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:r,formConfig:t})))}return(0,_vue.h)(_defaultStyleForm.DefaultMobileStyleFormComponent,{formData:t})},_=()=>{var e=l["formRender"],t=u["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:r,formConfig:t})))}return(0,_vue.h)(_defaultStyleForm.DefaultPCStyleFormComponent,{formData:t})};t.renderVN=()=>{const{showPc:t,showMobile:r}=l;return(0,_vue.h)(e,{modelValue:v.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){v.value=e}},{default(){return(0,_vue.h)("div",{class:"vxe-form-design--layout-style"},[(e=n.activeTab,(0,_vue.h)("div",{class:["vxe-form-design--layout-style-preview","is--"+(2===e?"mobile":"pc")]},[(0,_vue.h)(_formView.default,{modelValue:m.value,config:s.value,createFormConfig:d,"onUpdate:modelValue"(e){m.value=e}})])),(t||r?()=>{const{showPc:t,showMobile:r}=l;var e=n["activeTab"];return(0,_vue.h)("div",{class:"vxe-form-design--layout-style-setting"},[(0,_vue.h)(o,{modelValue:e,titleWidth:t&&r?"50%":"100%",titleAlign:"center",padding:!0,onChange:f,"onUpdate:modelValue"(e){n.activeTab=e}},{default(){var e=[];return t&&e.push((0,_vue.h)(a,{title:(0,_core.getI18n)("vxe.formDesign.widgetProp.displaySetting.pc"),icon:(0,_core.getIcon)().FORM_DESIGN_PROPS_PC,k:1,name:1},{default(){return _()}})),r&&e.push((0,_vue.h)(a,{title:(0,_core.getI18n)("vxe.formDesign.widgetProp.displaySetting.mobile"),icon:(0,_core.getIcon)().FORM_DESIGN_PROPS_MOBILE,key:2,name:2},{default(){return c()}})),e}})])}:(0,_vue.createCommentVNode))()]);var e}})},(0,_vue.provide)("$xeFormDesignLayoutStyle",t)}return t},render(){return this.renderVN()}});