vxe-design
Version:
A PC-based visual designer based on Vxe UI, used for building zero-code and low-code platforms
92 lines (91 loc) • 4.89 kB
JavaScript
import { h, inject, createCommentVNode } from 'vue';
import { defineVxeComponent } from '../../ui/src/comp';
import { VxeUI } from '@vxe-ui/core';
const { getIcon, getI18n } = VxeUI;
export const DefaultSettingFormComponent = defineVxeComponent({
name: 'DefaultSettingForm',
props: {
formData: {
type: Object,
default: () => ({})
}
},
emits: [],
setup(props) {
const VxeUIFormComponent = VxeUI.getComponent('vxe-form');
const VxeUIFormItemComponent = VxeUI.getComponent('vxe-form-item');
const VxeUISwitchComponent = VxeUI.getComponent('vxe-switch');
const VxeUITextComponent = VxeUI.getComponent('vxe-text');
const $xeFormDesign = inject('$xeFormDesign', null);
if (!$xeFormDesign) {
return () => [];
}
const { props: formDesignProps } = $xeFormDesign;
return () => {
const { formData } = props;
return h(VxeUIFormComponent, {
data: formData,
span: 24,
vertical: true,
titleBold: true
}, {
default() {
const { showPc, showMobile } = formDesignProps;
return [
h(VxeUIFormItemComponent, {
title: getI18n('vxe.formDesign.formName'),
field: 'title',
itemRender: { name: 'VxeInput', props: { placeholder: getI18n('vxe.formDesign.defFormTitle') } }
}),
showPc && showMobile
? h(VxeUIFormItemComponent, {
title: getI18n('vxe.formDesign.widgetProp.displaySetting.name')
}, {
default() {
return [
h('div', {
class: 'vxe-form-design--widget-form-item-devices'
}, [
h('div', {
class: 'vxe-form-design--widget-form-item-pc'
}, [
h(VxeUITextComponent, {
icon: getIcon().FORM_DESIGN_PROPS_PC,
content: getI18n('vxe.formDesign.widgetProp.displaySetting.pc')
}),
h(VxeUISwitchComponent, {
modelValue: formData.pcVisible,
openLabel: getI18n('vxe.formDesign.widgetProp.displaySetting.visible'),
closeLabel: getI18n('vxe.formDesign.widgetProp.displaySetting.hidden'),
'onUpdate:modelValue'(val) {
formData.pcVisible = val;
}
})
]),
h('div', {
class: 'vxe-form-design--widget-form-item-mobile'
}, [
h(VxeUITextComponent, {
icon: getIcon().FORM_DESIGN_PROPS_MOBILE,
content: getI18n('vxe.formDesign.widgetProp.displaySetting.mobile')
}),
h(VxeUISwitchComponent, {
modelValue: formData.mobileVisible,
openLabel: getI18n('vxe.formDesign.widgetProp.displaySetting.visible'),
closeLabel: getI18n('vxe.formDesign.widgetProp.displaySetting.hidden'),
'onUpdate:modelValue'(val) {
formData.mobileVisible = val;
}
})
])
])
];
}
})
: createCommentVNode()
];
}
});
};
}
});