ant-design-vue
Version:
An enterprise-class UI design language and Vue-based implementation
138 lines (125 loc) • 4.52 kB
JavaScript
import { createVNode as _createVNode, isVNode as _isVNode } from "vue";
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; }
import { provide, inject, nextTick, defineComponent } from 'vue';
import classNames from '../_util/classNames';
import PropTypes from '../_util/vue-types';
import Radio from './Radio';
import { getOptionProps, filterEmpty, hasProp, getSlot } from '../_util/props-util';
import { defaultConfigProvider } from '../config-provider';
import { tuple } from '../_util/type';
function _isSlot(s) {
return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !_isVNode(s);
}
export default defineComponent({
name: 'ARadioGroup',
props: {
prefixCls: PropTypes.string,
defaultValue: PropTypes.any,
value: PropTypes.any,
size: PropTypes.oneOf(tuple('large', 'default', 'small')).def('default'),
options: PropTypes.array,
disabled: PropTypes.looseBool,
name: PropTypes.string,
buttonStyle: PropTypes.string.def('outline'),
onChange: PropTypes.func
},
emits: ['update:value', 'change'],
setup: function setup() {
return {
updatingValue: false,
configProvider: inject('configProvider', defaultConfigProvider),
radioGroupContext: null
};
},
data: function data() {
var value = this.value,
defaultValue = this.defaultValue;
return {
stateValue: value === undefined ? defaultValue : value
};
},
watch: {
value: function value(val) {
this.updatingValue = false;
this.stateValue = val;
}
},
// computed: {
// radioOptions() {
// const { disabled } = this;
// return this.options.map(option => {
// return typeof option === 'string'
// ? { label: option, value: option }
// : { ...option, disabled: option.disabled === undefined ? disabled : option.disabled };
// });
// },
// },
created: function created() {
this.radioGroupContext = provide('radioGroupContext', this);
},
methods: {
onRadioChange: function onRadioChange(ev) {
var _this = this;
var lastValue = this.stateValue;
var value = ev.target.value;
if (!hasProp(this, 'value')) {
this.stateValue = value;
} // nextTick for https://github.com/vueComponent/ant-design-vue/issues/1280
if (!this.updatingValue && value !== lastValue) {
this.updatingValue = true;
this.$emit('update:value', value);
this.$emit('change', ev);
}
nextTick(function () {
_this.updatingValue = false;
});
}
},
render: function render() {
var _this2 = this;
var props = getOptionProps(this);
var customizePrefixCls = props.prefixCls,
options = props.options,
buttonStyle = props.buttonStyle;
var getPrefixCls = this.configProvider.getPrefixCls;
var prefixCls = getPrefixCls('radio', customizePrefixCls);
var groupPrefixCls = "".concat(prefixCls, "-group");
var classString = classNames(groupPrefixCls, "".concat(groupPrefixCls, "-").concat(buttonStyle), _defineProperty({}, "".concat(groupPrefixCls, "-").concat(props.size), props.size));
var children = filterEmpty(getSlot(this)); // 如果存在 options, 优先使用
if (options && options.length > 0) {
children = options.map(function (option) {
if (typeof option === 'string') {
return _createVNode(Radio, {
"key": option,
"prefixCls": prefixCls,
"disabled": props.disabled,
"value": option,
"checked": _this2.stateValue === option
}, _isSlot(option) ? option : {
default: function _default() {
return [option];
}
});
}
return _createVNode(Radio, {
"key": "radio-group-value-options-".concat(option.value),
"prefixCls": prefixCls,
"disabled": option.disabled || props.disabled,
"value": option.value,
"checked": _this2.stateValue === option.value
}, {
default: function _default() {
return [option.label];
}
});
});
}
return _createVNode("div", {
"class": classString
}, _isSlot(children) ? children : {
default: function _default() {
return [children];
}
});
}
});