167 lines
4.0 KiB
JavaScript
167 lines
4.0 KiB
JavaScript
// Styles
|
|
import "../../../src/components/VRadioGroup/VRadio.sass";
|
|
import VLabel from '../VLabel';
|
|
import VIcon from '../VIcon';
|
|
import VInput from '../VInput'; // Mixins
|
|
|
|
import BindsAttrs from '../../mixins/binds-attrs';
|
|
import Colorable from '../../mixins/colorable';
|
|
import { factory as GroupableFactory } from '../../mixins/groupable';
|
|
import Rippleable from '../../mixins/rippleable';
|
|
import Themeable from '../../mixins/themeable';
|
|
import Selectable from '../../mixins/selectable'; // Utilities
|
|
|
|
import { getSlot } from '../../util/helpers';
|
|
import mixins from '../../util/mixins';
|
|
const baseMixins = mixins(BindsAttrs, Colorable, Rippleable, GroupableFactory('radioGroup'), Themeable);
|
|
/* @vue/component */
|
|
|
|
export default baseMixins.extend().extend({
|
|
name: 'v-radio',
|
|
inheritAttrs: false,
|
|
props: {
|
|
disabled: Boolean,
|
|
id: String,
|
|
label: String,
|
|
name: String,
|
|
offIcon: {
|
|
type: String,
|
|
default: '$radioOff'
|
|
},
|
|
onIcon: {
|
|
type: String,
|
|
default: '$radioOn'
|
|
},
|
|
readonly: Boolean,
|
|
value: {
|
|
default: null
|
|
}
|
|
},
|
|
data: () => ({
|
|
isFocused: false
|
|
}),
|
|
computed: {
|
|
classes() {
|
|
return {
|
|
'v-radio--is-disabled': this.isDisabled,
|
|
'v-radio--is-focused': this.isFocused,
|
|
...this.themeClasses,
|
|
...this.groupClasses
|
|
};
|
|
},
|
|
|
|
computedColor() {
|
|
return Selectable.options.computed.computedColor.call(this);
|
|
},
|
|
|
|
computedIcon() {
|
|
return this.isActive ? this.onIcon : this.offIcon;
|
|
},
|
|
|
|
computedId() {
|
|
return VInput.options.computed.computedId.call(this);
|
|
},
|
|
|
|
hasLabel: VInput.options.computed.hasLabel,
|
|
|
|
hasState() {
|
|
return (this.radioGroup || {}).hasState;
|
|
},
|
|
|
|
isDisabled() {
|
|
return this.disabled || !!this.radioGroup && this.radioGroup.isDisabled;
|
|
},
|
|
|
|
isReadonly() {
|
|
return this.readonly || !!this.radioGroup && this.radioGroup.isReadonly;
|
|
},
|
|
|
|
computedName() {
|
|
if (this.name || !this.radioGroup) {
|
|
return this.name;
|
|
}
|
|
|
|
return this.radioGroup.name || `radio-${this.radioGroup._uid}`;
|
|
},
|
|
|
|
rippleState() {
|
|
return Selectable.options.computed.rippleState.call(this);
|
|
},
|
|
|
|
validationState() {
|
|
return (this.radioGroup || {}).validationState || this.computedColor;
|
|
}
|
|
|
|
},
|
|
methods: {
|
|
genInput(args) {
|
|
// We can't actually use the mixin directly because
|
|
// it's made for standalone components, but its
|
|
// genInput method is exactly what we need
|
|
return Selectable.options.methods.genInput.call(this, 'radio', args);
|
|
},
|
|
|
|
genLabel() {
|
|
if (!this.hasLabel) return null;
|
|
return this.$createElement(VLabel, {
|
|
on: {
|
|
click: e => {
|
|
// Prevent label from
|
|
// causing the input
|
|
// to focus
|
|
e.preventDefault();
|
|
this.onChange();
|
|
}
|
|
},
|
|
attrs: {
|
|
for: this.computedId
|
|
},
|
|
props: {
|
|
color: this.validationState,
|
|
focused: this.hasState
|
|
}
|
|
}, getSlot(this, 'label') || this.label);
|
|
},
|
|
|
|
genRadio() {
|
|
return this.$createElement('div', {
|
|
staticClass: 'v-input--selection-controls__input'
|
|
}, [this.$createElement(VIcon, this.setTextColor(this.validationState, {
|
|
props: {
|
|
dense: this.radioGroup && this.radioGroup.dense
|
|
}
|
|
}), this.computedIcon), this.genInput({
|
|
name: this.computedName,
|
|
value: this.value,
|
|
...this.attrs$
|
|
}), this.genRipple(this.setTextColor(this.rippleState))]);
|
|
},
|
|
|
|
onFocus(e) {
|
|
this.isFocused = true;
|
|
this.$emit('focus', e);
|
|
},
|
|
|
|
onBlur(e) {
|
|
this.isFocused = false;
|
|
this.$emit('blur', e);
|
|
},
|
|
|
|
onChange() {
|
|
if (this.isDisabled || this.isReadonly || this.isActive) return;
|
|
this.toggle();
|
|
},
|
|
|
|
onKeydown: () => {}
|
|
},
|
|
|
|
render(h) {
|
|
const data = {
|
|
staticClass: 'v-radio',
|
|
class: this.classes
|
|
};
|
|
return h('div', data, [this.genRadio(), this.genLabel()]);
|
|
}
|
|
|
|
});
|
|
//# sourceMappingURL=VRadio.js.map
|