vxe-pc-ui
Version:
A vue based PC component library
282 lines (281 loc) • 11.3 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.DefaultPCStyleFormComponent = exports.DefaultMobileStyleFormComponent = void 0;
var _vue = require("vue");
var _core = require("@vxe-ui/core");
var _form = _interopRequireDefault(require("../../form/src/form"));
var _formItem = _interopRequireDefault(require("../../form/src/form-item"));
var _input = _interopRequireDefault(require("../../input/src/input"));
var _group = _interopRequireDefault(require("../../radio/src/group"));
var _select = _interopRequireDefault(require("../../select/src/select"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
const getBoldOptions = () => {
return [{
label: (0, _core.getI18n)('vxe.formDesign.styleSetting.fontNormal'),
value: false
}, {
label: (0, _core.getI18n)('vxe.formDesign.styleSetting.fontBold'),
value: true
}];
};
const getColonOptions = () => {
return [{
label: (0, _core.getI18n)('vxe.formDesign.styleSetting.colonVisible'),
value: true
}, {
label: (0, _core.getI18n)('vxe.formDesign.styleSetting.colonHidden'),
value: false
}];
};
const getAlignOptions = () => {
return [{
label: (0, _core.getI18n)('vxe.formDesign.styleSetting.alignLeft'),
value: ''
}, {
label: (0, _core.getI18n)('vxe.formDesign.styleSetting.alignRight'),
value: 'right'
}];
};
const getWidthUnitOptions = () => {
return [{
label: (0, _core.getI18n)('vxe.formDesign.styleSetting.unitPx'),
value: ''
}, {
label: (0, _core.getI18n)('vxe.formDesign.styleSetting.unitPct'),
value: '%'
}];
};
const renderLayoutOption = (formData, field, type, changeEvent) => {
const isVertical = type === 'vertical';
return (0, _vue.h)('div', {
class: ['vxe-form-design--widget-form-item-option', `is--${type}`, {
'is--active': isVertical ? formData[field] : !formData[field]
}],
onClick() {
formData[field] = isVertical;
changeEvent();
}
}, [(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', {}, isVertical ? (0, _core.getI18n)('vxe.formDesign.styleSetting.verticalLayout') : (0, _core.getI18n)('vxe.formDesign.styleSetting.horizontalLayout'))]);
};
const DefaultPCStyleFormComponent = exports.DefaultPCStyleFormComponent = (0, _vue.defineComponent)({
name: 'DefaultPCStyleForm',
props: {
formData: {
type: Object,
default: () => ({})
}
},
emits: [],
setup(props) {
const $xeFormDesign = (0, _vue.inject)('$xeFormDesign', null);
const verticalField = 'pcVertical';
const refBoldOpts = (0, _vue.ref)(getBoldOptions());
const refColonOpts = (0, _vue.ref)(getColonOptions());
const refAlignOpts = (0, _vue.ref)(getAlignOptions());
const refWidthUnitOpts = (0, _vue.ref)(getWidthUnitOptions());
const refreshPreview = () => {
if ($xeFormDesign) {
$xeFormDesign.refreshPreviewView();
}
};
const changeLayoutEvent = () => {
const {
formData
} = props;
if (!formData.pcTitleWidth) {
formData.pcTitleWidth = 100;
}
refreshPreview();
};
return () => {
const {
formData
} = props;
return (0, _vue.h)(_form.default, {
data: formData,
span: 24,
vertical: true,
titleBold: true
}, {
default() {
return [(0, _vue.h)(_formItem.default, {
title: (0, _core.getI18n)('vxe.formDesign.styleSetting.layoutTitle'),
field: verticalField
}, {
default() {
return [(0, _vue.h)('div', {
class: 'vxe-form-design--widget-form-item-layout'
}, [renderLayoutOption(formData, verticalField, 'vertical', changeLayoutEvent), renderLayoutOption(formData, verticalField, 'horizontal', changeLayoutEvent)])];
}
}), (0, _vue.h)(_formItem.default, {
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)(_group.default, {
modelValue: formData.pcTitleBold,
options: refBoldOpts.value,
onChange: refreshPreview,
'onUpdate:modelValue'(val) {
formData.pcTitleBold = val;
}
})]), (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)(_group.default, {
modelValue: formData.pcTitleColon,
options: refColonOpts.value,
onChange: refreshPreview,
'onUpdate:modelValue'(val) {
formData.pcTitleColon = val;
}
})]), formData.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)(_group.default, {
modelValue: formData.pcTitleAlign,
options: refAlignOpts.value,
onChange: refreshPreview,
'onUpdate:modelValue'(val) {
formData.pcTitleAlign = val;
}
})]), formData.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)(_input.default, {
class: 'vxe-form-design--widget-form-item-prop-width',
modelValue: formData.pcTitleWidth,
type: 'integer',
onChange: refreshPreview,
'onUpdate:modelValue'(val) {
formData.pcTitleWidth = val;
}
}), (0, _vue.h)(_select.default, {
class: 'vxe-form-design--widget-form-item-prop-unit',
modelValue: formData.pcTitleWidthUnit,
options: refWidthUnitOpts.value,
transfer: true,
onChange: refreshPreview,
'onUpdate:modelValue'(val) {
formData.pcTitleWidthUnit = val;
}
})])];
}
})];
}
});
};
}
});
const DefaultMobileStyleFormComponent = exports.DefaultMobileStyleFormComponent = (0, _vue.defineComponent)({
name: 'DefaultMobileStyleForm',
props: {
formData: {
type: Object,
default: () => ({})
}
},
emits: [],
setup(props) {
const $xeFormDesign = (0, _vue.inject)('$xeFormDesign', null);
const verticalField = 'mobileVertical';
const refBoldOpts = (0, _vue.ref)(getBoldOptions());
const refColonOpts = (0, _vue.ref)(getColonOptions());
const refAlignOpts = (0, _vue.ref)(getAlignOptions());
const refWidthUnitOpts = (0, _vue.ref)(getWidthUnitOptions());
const refreshPreview = () => {
if ($xeFormDesign) {
$xeFormDesign.refreshPreviewView();
}
};
const changeLayoutEvent = () => {
const {
formData
} = props;
if (!formData.mobileTitleWidth) {
formData.mobileTitleWidth = 100;
}
refreshPreview();
};
return () => {
const {
formData
} = props;
return (0, _vue.h)(_form.default, {
data: formData,
span: 24,
vertical: true,
titleBold: true
}, {
default() {
return [(0, _vue.h)(_formItem.default, {
title: (0, _core.getI18n)('vxe.formDesign.styleSetting.layoutTitle'),
field: verticalField
}, {
default() {
return [(0, _vue.h)('div', {
class: 'vxe-form-design--widget-form-item-layout'
}, [renderLayoutOption(formData, verticalField, 'vertical', changeLayoutEvent), renderLayoutOption(formData, verticalField, 'horizontal', changeLayoutEvent)])];
}
}), (0, _vue.h)(_formItem.default, {
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)(_group.default, {
modelValue: formData.mobileTitleBold,
options: refBoldOpts.value,
onChange: refreshPreview,
'onUpdate:modelValue'(val) {
formData.mobileTitleBold = val;
}
})]), (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)(_group.default, {
modelValue: formData.mobileTitleColon,
options: refColonOpts.value,
onChange: refreshPreview,
'onUpdate:modelValue'(val) {
formData.mobileTitleColon = val;
}
})]), formData.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)(_group.default, {
modelValue: formData.mobileTitleAlign,
options: refAlignOpts.value,
onChange: refreshPreview,
'onUpdate:modelValue'(val) {
formData.mobileTitleAlign = val;
}
})]), formData.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)(_input.default, {
class: 'vxe-form-design--widget-form-item-prop-width',
modelValue: formData.mobileTitleWidth,
type: 'integer',
onChange: refreshPreview,
'onUpdate:modelValue'(val) {
formData.mobileTitleWidth = val;
}
}), (0, _vue.h)(_select.default, {
class: 'vxe-form-design--widget-form-item-prop-unit',
modelValue: formData.mobileTitleWidthUnit,
options: refWidthUnitOpts.value,
transfer: true,
onChange: refreshPreview,
'onUpdate:modelValue'(val) {
formData.mobileTitleWidthUnit = val;
}
})])];
}
})];
}
});
};
}
});