vxe-design/lib/form-design/src/default-style-form.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.DefaultPCStyleFormComponent=exports.DefaultMobileStyleFormComponent=void 0;var _vue=require("vue"),_comp=require("../../ui/src/comp"),_core=require("@vxe-ui/core");let getI18n=_core.VxeUI.getI18n,getBoldOptions=()=>[{label:getI18n("vxe.formDesign.styleSetting.fontNormal"),value:!1},{label:getI18n("vxe.formDesign.styleSetting.fontBold"),value:!0}],getColonOptions=()=>[{label:getI18n("vxe.formDesign.styleSetting.colonVisible"),value:!0},{label:getI18n("vxe.formDesign.styleSetting.colonHidden"),value:!1}],getAlignOptions=()=>[{label:getI18n("vxe.formDesign.styleSetting.alignLeft"),value:""},{label:getI18n("vxe.formDesign.styleSetting.alignRight"),value:"right"}],getWidthUnitOptions=()=>[{label:getI18n("vxe.formDesign.styleSetting.unitPx"),value:""},{label:getI18n("vxe.formDesign.styleSetting.unitPct"),value:"%"}],getWidthAutoOptions=()=>[{label:"自适应",value:!0},{label:"固定",value:!1}],renderLayoutOption=(e,t,o,i)=>{let l="vertical"===o;return(0,_vue.h)("div",{class:["vxe-form-design--widget-form-item-option","is--"+o,{"is--active":l?e[t]:!e[t]}],onClick(){e[t]=l,i()}},[(0,_vue.h)("div",{class:"vxe-form-design--widget-form-item-option-row"}),(0,_vue.h)("div",{class:"vxe-form-design--widget-form-item-option-row"}),(0,_vue.h)("div",{},l?getI18n("vxe.formDesign.styleSetting.verticalLayout"):getI18n("vxe.formDesign.styleSetting.horizontalLayout"))])},DefaultPCStyleFormComponent=exports.DefaultPCStyleFormComponent=(0,_comp.defineVxeComponent)({name:"DefaultPCStyleForm",props:{formData:{type:Object,default:()=>({})}},emits:[],setup(o){let e=_core.VxeUI.getComponent("vxe-form"),i=_core.VxeUI.getComponent("vxe-form-item"),l=_core.VxeUI.getComponent("vxe-number-input"),n=_core.VxeUI.getComponent("vxe-radio-group"),r=_core.VxeUI.getComponent("vxe-select"),t=(0,_vue.inject)("$xeFormDesign",null),a="pcVertical",s=(0,_vue.ref)(getBoldOptions()),u=(0,_vue.ref)(getColonOptions()),m=(0,_vue.ref)(getAlignOptions()),g=(0,_vue.ref)(getWidthAutoOptions()),v=(0,_vue.ref)(getWidthUnitOptions()),d=()=>{t&&t.refreshPreviewView()},p=()=>{var e=o.formData;e.pcTitleWidth||(e.pcTitleWidth=100),d()};return()=>{let t=o.formData;return(0,_vue.h)(e,{data:t,span:24,vertical:!0,titleBold:!0},{default(){return[(0,_vue.h)(i,{title:getI18n("vxe.formDesign.styleSetting.layoutTitle"),field:a},{default(){return[(0,_vue.h)("div",{class:"vxe-form-design--widget-form-item-layout"},[renderLayoutOption(t,a,"vertical",p),renderLayoutOption(t,a,"horizontal",p)])]}}),(0,_vue.h)(i,{title:getI18n("vxe.formDesign.styleSetting.styleTitle")},{default(){var e=[(0,_vue.h)("div",{key:"tb",class:"vxe-form-design--widget-form-item-prop-list"},[(0,_vue.h)("span",{},getI18n("vxe.formDesign.styleSetting.boldTitle")),(0,_vue.h)(n,{modelValue:t.pcTitleBold,options:s.value,onChange:d,"onUpdate:modelValue"(e){t.pcTitleBold=e}})]),(0,_vue.h)("div",{key:"tc",class:"vxe-form-design--widget-form-item-prop-list"},[(0,_vue.h)("span",{},getI18n("vxe.formDesign.styleSetting.colonTitle")),(0,_vue.h)(n,{modelValue:t.pcTitleColon,options:u.value,onChange:d,"onUpdate:modelValue"(e){t.pcTitleColon=e}})])];return t.pcVertical||(e.push((0,_vue.h)("div",{key:"ta",class:"vxe-form-design--widget-form-item-prop-list"},[(0,_vue.h)("span",{},getI18n("vxe.formDesign.styleSetting.alignTitle")),(0,_vue.h)(n,{modelValue:t.pcTitleAlign,options:m.value,onChange:d,"onUpdate:modelValue"(e){t.pcTitleAlign=e}})]),(0,_vue.h)("div",{key:"twa",class:"vxe-form-design--widget-form-item-prop-list"},[(0,_vue.h)("span",{},getI18n("vxe.formDesign.styleSetting.widthTitle")),(0,_vue.h)(n,{modelValue:t.pcTitleAutoWidth,options:g.value,onChange:d,"onUpdate:modelValue"(e){t.pcTitleAutoWidth=e}})])),t.pcTitleAutoWidth)||e.push((0,_vue.h)("div",{key:"tw",class:"vxe-form-design--widget-form-item-prop-list"},[(0,_vue.h)(l,{class:"vxe-form-design--widget-form-item-prop-width",modelValue:t.pcTitleWidth,type:"integer",onChange:d,"onUpdate:modelValue"(e){t.pcTitleWidth=e}}),(0,_vue.h)(r,{class:"vxe-form-design--widget-form-item-prop-unit",modelValue:t.pcTitleWidthUnit,options:v.value,transfer:!0,onChange:d,"onUpdate:modelValue"(e){t.pcTitleWidthUnit=e}})])),e}})]}})}}}),DefaultMobileStyleFormComponent=exports.DefaultMobileStyleFormComponent=(0,_comp.defineVxeComponent)({name:"DefaultMobileStyleForm",props:{formData:{type:Object,default:()=>({})}},emits:[],setup(o){let e=_core.VxeUI.getComponent("vxe-form"),i=_core.VxeUI.getComponent("vxe-form-item"),l=_core.VxeUI.getComponent("vxe-number-input"),n=_core.VxeUI.getComponent("vxe-radio-group"),r=_core.VxeUI.getComponent("vxe-select"),t=(0,_vue.inject)("$xeFormDesign",null),a="mobileVertical",s=(0,_vue.ref)(getBoldOptions()),u=(0,_vue.ref)(getColonOptions()),m=(0,_vue.ref)(getAlignOptions()),g=(0,_vue.ref)(getWidthAutoOptions()),v=(0,_vue.ref)(getWidthUnitOptions()),d=()=>{t&&t.refreshPreviewView()},p=()=>{var e=o.formData;e.mobileTitleWidth||(e.mobileTitleWidth=100),d()};return()=>{let t=o.formData;return(0,_vue.h)(e,{data:t,span:24,vertical:!0,titleBold:!0},{default(){return[(0,_vue.h)(i,{title:getI18n("vxe.formDesign.styleSetting.layoutTitle"),field:a},{default(){return[(0,_vue.h)("div",{class:"vxe-form-design--widget-form-item-layout"},[renderLayoutOption(t,a,"vertical",p),renderLayoutOption(t,a,"horizontal",p)])]}}),(0,_vue.h)(i,{title:getI18n("vxe.formDesign.styleSetting.styleTitle")},{default(){var e=[(0,_vue.h)("div",{key:"tb",class:"vxe-form-design--widget-form-item-prop-list"},[(0,_vue.h)("span",{},getI18n("vxe.formDesign.styleSetting.boldTitle")),(0,_vue.h)(n,{modelValue:t.mobileTitleBold,options:s.value,onChange:d,"onUpdate:modelValue"(e){t.mobileTitleBold=e}})]),(0,_vue.h)("div",{key:"tc",class:"vxe-form-design--widget-form-item-prop-list"},[(0,_vue.h)("span",{},getI18n("vxe.formDesign.styleSetting.colonTitle")),(0,_vue.h)(n,{modelValue:t.mobileTitleColon,options:u.value,onChange:d,"onUpdate:modelValue"(e){t.mobileTitleColon=e}})])];return t.mobileVertical||(e.push((0,_vue.h)("div",{key:"ta",class:"vxe-form-design--widget-form-item-prop-list"},[(0,_vue.h)("span",{},getI18n("vxe.formDesign.styleSetting.alignTitle")),(0,_vue.h)(n,{modelValue:t.mobileTitleAlign,options:m.value,onChange:d,"onUpdate:modelValue"(e){t.mobileTitleAlign=e}})]),(0,_vue.h)("div",{key:"twa",class:"vxe-form-design--widget-form-item-prop-list"},[(0,_vue.h)("span",{},getI18n("vxe.formDesign.styleSetting.widthTitle")),(0,_vue.h)(n,{modelValue:t.mobileTitleAutoWidth,options:g.value,onChange:d,"onUpdate:modelValue"(e){t.mobileTitleAutoWidth=e}})])),t.mobileTitleAutoWidth)||e.push((0,_vue.h)("div",{key:"wt",class:"vxe-form-design--widget-form-item-prop-list"},[(0,_vue.h)(l,{class:"vxe-form-design--widget-form-item-prop-width",modelValue:t.mobileTitleWidth,type:"integer",onChange:d,"onUpdate:modelValue"(e){t.mobileTitleWidth=e}}),(0,_vue.h)(r,{class:"vxe-form-design--widget-form-item-prop-unit",modelValue:t.mobileTitleWidthUnit,options:v.value,transfer:!0,onChange:d,"onUpdate:modelValue"(e){t.mobileTitleWidthUnit=e}})])),e}})]}})}}});