@fe6/water-pro
Version:
An enterprise-class UI design language and Vue-based implementation
235 lines (208 loc) • 9.01 kB
JavaScript
import { createVNode as _createVNode } from "vue";
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
import { isNaN } from '@fe6/shared';
import { isNumber } from 'lodash';
import { defineComponent, computed, toRefs } from 'vue';
import AButton from '../../../button';
import { Col, Row } from '../../../grid';
import BasicArrow from '../../../basic-arrow';
import PropTypes from '../../../_util/vue-types';
import useConfigInject from '../../../_util/hooks/useConfigInject';
import { useActionLabelWidth } from '../hooks/use-label-width';
import { useFormContext } from '../hooks/use-form-context';
import { getSlot } from '../../../_util/props-util';
export default defineComponent({
name: 'AFormProAction',
props: {
schemas: {
type: Array,
default: function _default() {
return [];
}
},
formProps: {
type: Object,
default: {}
},
layout: PropTypes.oneOf(['horizontal', 'vertical', 'inline']).def('horizontal'),
actionAffix: PropTypes.looseBool,
actionTarget: PropTypes.func,
showActionButtonGroup: PropTypes.bool.def(true),
showResetButton: PropTypes.bool.def(true),
showSubmitButton: PropTypes.bool.def(true),
showAdvancedButton: PropTypes.bool.def(true),
resetButtonOptions: {
type: Object,
default: function _default() {
return {};
}
},
submitButtonOptions: {
type: Object,
default: function _default() {
return {};
}
},
actionColOptions: {
type: Object,
default: function _default() {
return {};
}
},
actionSpan: PropTypes.number.def(6),
isAdvanced: PropTypes.bool,
hideAdvanceBtn: PropTypes.bool,
actionAlgin: PropTypes.oneOf(['left', 'right', 'center', 'space-between']).def('left'),
resetText: PropTypes.string,
okText: PropTypes.string,
prefixCls: PropTypes.string,
labelWidth: {
type: [Number, String]
}
},
emits: ['toggle-advanced'],
setup: function setup(props, _ref) {
var emit = _ref.emit;
var _useConfigInject = useConfigInject('form-pro', props),
prefixClsNew = _useConfigInject.prefixCls,
configProvider = _useConfigInject.configProvider;
var _toRefs = toRefs(props),
formProps = _toRefs.formProps,
schemas = _toRefs.schemas;
var itemLabelWidthProp = useActionLabelWidth(schemas, formProps);
var hasLabel = computed(function () {
return !!props.schemas.filter(function (sItem) {
return sItem.label || sItem.subLabel;
}).length;
});
var actionColOpt = computed(function () {
var showAdvancedButton = props.showAdvancedButton,
span = props.actionSpan,
actionColOptions = props.actionColOptions;
var actionSpan = 24 - span;
var advancedSpanObj = showAdvancedButton ? {
span: actionSpan < 6 ? 24 : actionSpan
} : {};
var actionInnerColOpt = _extends(_extends({
span: showAdvancedButton ? 6 : 4
}, advancedSpanObj), actionColOptions);
if (props.layout !== 'vertical' && (!hasLabel.value || !isNaN(parseFloat(props.labelWidth)))) {
actionInnerColOpt = {};
}
return actionInnerColOpt;
});
var getResetBtnOptions = computed(function () {
var _a;
return _extends({
text: props.resetText || ((_a = configProvider.locale) === null || _a === void 0 ? void 0 : _a.FormPro.resetText) || '重置'
}, props.resetButtonOptions);
});
var getSubmitBtnOptions = computed(function () {
var _a;
return _extends({
text: props.okText || ((_a = configProvider.locale) === null || _a === void 0 ? void 0 : _a.FormPro.okText) || '查询'
}, props.submitButtonOptions);
});
function toggleAdvanced() {
emit('toggle-advanced');
}
var _useFormContext = useFormContext(),
resetAction = _useFormContext.resetAction,
submitAction = _useFormContext.submitAction;
var hasChildrenInSchemas = schemas.value.some(function (sItem) {
return sItem.children && sItem.children.length > 0;
});
return {
hasLabel: hasLabel,
hasChildrenInSchemas: hasChildrenInSchemas,
actionColOpt: actionColOpt,
getResetBtnOptions: getResetBtnOptions,
getSubmitBtnOptions: getSubmitBtnOptions,
toggleAdvanced: toggleAdvanced,
prefixClsNew: prefixClsNew,
resetAction: resetAction,
submitAction: submitAction,
itemLabelWidthProp: itemLabelWidthProp
};
},
render: function render() {
var _this = this;
var rootNode = null;
if (this.showActionButtonGroup) {
var widthStyle = isNaN(parseFloat(this.labelWidth)) ? '' : "padding-left: ".concat(isNumber(this.labelWidth) ? "".concat(this.labelWidth, "px") : this.labelWidth, ";");
var rootProps = _extends(_extends({}, this.itemLabelWidthProp || this.actionColOpt), {
style: "".concat(this.hasLabel && !this.actionAffix ? widthStyle : '', "textAlign: ").concat(this.actionAlgin)
});
var childColProps = {
span: 24
};
var resetButtonNode = null;
if (this.showResetButton) {
resetButtonNode = _createVNode(AButton, _objectSpread(_objectSpread({
"type": "default",
"class": "".concat(this.prefixClsNew, "-action-button")
}, this.getResetBtnOptions), {}, {
"style": {
marginRight: this.showSubmitButton ? '12px' : 0
},
"onClick": this.resetAction
}), {
default: function _default() {
return [_this.getResetBtnOptions.text];
}
});
}
var submitButtonNode = null;
if (this.showSubmitButton) {
submitButtonNode = _createVNode(AButton, _objectSpread(_objectSpread({
"type": "primary",
"class": "".concat(this.prefixClsNew, "-action-button")
}, this.getSubmitBtnOptions), {}, {
"onClick": this.submitAction
}), {
default: function _default() {
return [_this.getSubmitBtnOptions.text];
}
});
}
var advancedButtonNode = null;
if (this.showAdvancedButton && !this.hideAdvanceBtn) {
advancedButtonNode = _createVNode(AButton, {
"type": "link",
"size": "small",
"onClick": this.toggleAdvanced
}, {
default: function _default() {
return [_this.isAdvanced ? '收起' : '展开', _createVNode(BasicArrow, {
"expand": !_this.isAdvanced,
"top": _this.isAdvanced,
"style": "margin-left: 4px"
}, null)];
}
});
}
rootNode = _createVNode(Col, rootProps, {
default: function _default() {
return [_createVNode(Row, {
"class": "".concat(_this.prefixClsNew, "-item-action")
}, {
default: function _default() {
return [_createVNode(Col, childColProps, {
default: function _default() {
return [_createVNode("div", {
"class": _this.actionAlgin === 'space-between' ? '' : 'ant-form-item-control',
"style": _this.actionAlgin === 'space-between' ? 'display: flex; justify-content: space-between;' : ''
}, [getSlot(_this, 'resetBefore'), resetButtonNode, getSlot(_this, 'submitBefore'), submitButtonNode, getSlot(_this, 'advanceBefore'), advancedButtonNode, getSlot(_this, 'advanceAfter')])];
}
})];
}
})];
}
});
}
return rootNode;
}
});