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

"use strict";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");const getBoldOptions=()=>[{label:(0,_core.getI18n)("vxe.formDesign.styleSetting.fontNormal"),value:!1},{label:(0,_core.getI18n)("vxe.formDesign.styleSetting.fontBold"),value:!0}],getColonOptions=()=>[{label:(0,_core.getI18n)("vxe.formDesign.styleSetting.colonVisible"),value:!0},{label:(0,_core.getI18n)("vxe.formDesign.styleSetting.colonHidden"),value:!1}],getAlignOptions=()=>[{label:(0,_core.getI18n)("vxe.formDesign.styleSetting.alignLeft"),value:""},{label:(0,_core.getI18n)("vxe.formDesign.styleSetting.alignRight"),value:"right"}],getWidthUnitOptions=()=>[{label:(0,_core.getI18n)("vxe.formDesign.styleSetting.unitPx"),value:""},{label:(0,_core.getI18n)("vxe.formDesign.styleSetting.unitPct"),value:"%"}],renderLayoutOption=(e,t,o,i)=>{const 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?(0,_core.getI18n)("vxe.formDesign.styleSetting.verticalLayout"):(0,_core.getI18n)("vxe.formDesign.styleSetting.horizontalLayout"))])},DefaultPCStyleFormComponent=exports.DefaultPCStyleFormComponent=(0,_comp.defineVxeComponent)({name:"DefaultPCStyleForm",props:{formData:{type:Object,default:()=>({})}},emits:[],setup(o){const e=_core.VxeUI.getComponent("vxe-form"),i=_core.VxeUI.getComponent("vxe-form-item"),l=_core.VxeUI.getComponent("VxeInput"),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()),m=(0,_vue.ref)(getColonOptions()),g=(0,_vue.ref)(getAlignOptions()),u=(0,_vue.ref)(getWidthUnitOptions()),v=()=>{t&&t.refreshPreviewView()},d=()=>{var e=o["formData"];e.pcTitleWidth||(e.pcTitleWidth=100),v()};return()=>{const t=o["formData"];return(0,_vue.h)(e,{data:t,span:24,vertical:!0,titleBold:!0},{default(){return[(0,_vue.h)(i,{title:(0,_core.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",d),renderLayoutOption(t,a,"horizontal",d)])]}}),(0,_vue.h)(i,{title:(0,_core.getI18n)("vxe.formDesign.styleSetting.styleTitle")},{default(){return[(0,_vue.h)("div",{class:"vxe-form-design--widget-form-item-prop-list"},[(0,_vue.h)("span",{},(0,_core.getI18n)("vxe.formDesign.styleSetting.boldTitle")),(0,_vue.h)(n,{modelValue:t.pcTitleBold,options:s.value,onChange:v,"onUpdate:modelValue"(e){t.pcTitleBold=e}})]),(0,_vue.h)("div",{class:"vxe-form-design--widget-form-item-prop-list"},[(0,_vue.h)("span",{},(0,_core.getI18n)("vxe.formDesign.styleSetting.colonTitle")),(0,_vue.h)(n,{modelValue:t.pcTitleColon,options:m.value,onChange:v,"onUpdate:modelValue"(e){t.pcTitleColon=e}})]),t.pcVertical?(0,_vue.createCommentVNode)():(0,_vue.h)("div",{class:"vxe-form-design--widget-form-item-prop-list"},[(0,_vue.h)("span",{},(0,_core.getI18n)("vxe.formDesign.styleSetting.alignTitle")),(0,_vue.h)(n,{modelValue:t.pcTitleAlign,options:g.value,onChange:v,"onUpdate:modelValue"(e){t.pcTitleAlign=e}})]),t.pcVertical?(0,_vue.createCommentVNode)():(0,_vue.h)("div",{class:"vxe-form-design--widget-form-item-prop-list"},[(0,_vue.h)("span",{},(0,_core.getI18n)("vxe.formDesign.styleSetting.widthTitle")),(0,_vue.h)(l,{class:"vxe-form-design--widget-form-item-prop-width",modelValue:t.pcTitleWidth,type:"integer",onChange:v,"onUpdate:modelValue"(e){t.pcTitleWidth=e}}),(0,_vue.h)(r,{class:"vxe-form-design--widget-form-item-prop-unit",modelValue:t.pcTitleWidthUnit,options:u.value,transfer:!0,onChange:v,"onUpdate:modelValue"(e){t.pcTitleWidthUnit=e}})])]}})]}})}}}),DefaultMobileStyleFormComponent=exports.DefaultMobileStyleFormComponent=(0,_comp.defineVxeComponent)({name:"DefaultMobileStyleForm",props:{formData:{type:Object,default:()=>({})}},emits:[],setup(o){const e=_core.VxeUI.getComponent("vxe-form"),i=_core.VxeUI.getComponent("vxe-form-item"),l=_core.VxeUI.getComponent("VxeInput"),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()),m=(0,_vue.ref)(getColonOptions()),g=(0,_vue.ref)(getAlignOptions()),u=(0,_vue.ref)(getWidthUnitOptions()),v=()=>{t&&t.refreshPreviewView()},d=()=>{var e=o["formData"];e.mobileTitleWidth||(e.mobileTitleWidth=100),v()};return()=>{const t=o["formData"];return(0,_vue.h)(e,{data:t,span:24,vertical:!0,titleBold:!0},{default(){return[(0,_vue.h)(i,{title:(0,_core.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",d),renderLayoutOption(t,a,"horizontal",d)])]}}),(0,_vue.h)(i,{title:(0,_core.getI18n)("vxe.formDesign.styleSetting.styleTitle")},{default(){return[(0,_vue.h)("div",{class:"vxe-form-design--widget-form-item-prop-list"},[(0,_vue.h)("span",{},(0,_core.getI18n)("vxe.formDesign.styleSetting.boldTitle")),(0,_vue.h)(n,{modelValue:t.mobileTitleBold,options:s.value,onChange:v,"onUpdate:modelValue"(e){t.mobileTitleBold=e}})]),(0,_vue.h)("div",{class:"vxe-form-design--widget-form-item-prop-list"},[(0,_vue.h)("span",{},(0,_core.getI18n)("vxe.formDesign.styleSetting.colonTitle")),(0,_vue.h)(n,{modelValue:t.mobileTitleColon,options:m.value,onChange:v,"onUpdate:modelValue"(e){t.mobileTitleColon=e}})]),t.mobileVertical?(0,_vue.createCommentVNode)():(0,_vue.h)("div",{class:"vxe-form-design--widget-form-item-prop-list"},[(0,_vue.h)("span",{},(0,_core.getI18n)("vxe.formDesign.styleSetting.alignTitle")),(0,_vue.h)(n,{modelValue:t.mobileTitleAlign,options:g.value,onChange:v,"onUpdate:modelValue"(e){t.mobileTitleAlign=e}})]),t.mobileVertical?(0,_vue.createCommentVNode)():(0,_vue.h)("div",{class:"vxe-form-design--widget-form-item-prop-list"},[(0,_vue.h)("span",{},(0,_core.getI18n)("vxe.formDesign.styleSetting.widthTitle")),(0,_vue.h)(l,{class:"vxe-form-design--widget-form-item-prop-width",modelValue:t.mobileTitleWidth,type:"integer",onChange:v,"onUpdate:modelValue"(e){t.mobileTitleWidth=e}}),(0,_vue.h)(r,{class:"vxe-form-design--widget-form-item-prop-unit",modelValue:t.mobileTitleWidthUnit,options:u.value,transfer:!0,onChange:v,"onUpdate:modelValue"(e){t.mobileTitleWidthUnit=e}})])]}})]}})}}});