form-radio-check-group.js
6.07 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
var _watch;
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : 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; }
import { extend } from '../vue';
import { PROP_TYPE_BOOLEAN, PROP_TYPE_BOOLEAN_STRING, PROP_TYPE_STRING } from '../constants/props';
import { SLOT_NAME_FIRST } from '../constants/slots';
import { htmlOrText } from '../utils/html';
import { looseEqual } from '../utils/loose-equal';
import { makeModelMixin } from '../utils/model';
import { omit, pick, sortKeys } from '../utils/object';
import { makeProp, makePropsConfigurable } from '../utils/props';
import { BFormCheckbox } from '../components/form-checkbox/form-checkbox';
import { BFormRadio } from '../components/form-radio/form-radio';
import { formControlMixin, props as formControlProps } from './form-control';
import { formCustomMixin, props as formCustomProps } from './form-custom';
import { formOptionsMixin, props as formOptionsProps } from './form-options';
import { formSizeMixin, props as formSizeProps } from './form-size';
import { formStateMixin, props as formStateProps } from './form-state';
import { idMixin, props as idProps } from './id';
import { normalizeSlotMixin } from './normalize-slot'; // --- Constants ---
// Attributes to pass down to checks/radios instead of applying them to the group
var PASS_DOWN_ATTRS = ['aria-describedby', 'aria-labelledby'];
var _makeModelMixin = makeModelMixin('checked'),
modelMixin = _makeModelMixin.mixin,
modelProps = _makeModelMixin.props,
MODEL_PROP_NAME = _makeModelMixin.prop,
MODEL_EVENT_NAME = _makeModelMixin.event;
export { MODEL_PROP_NAME, MODEL_EVENT_NAME }; // --- Props ---
export var props = makePropsConfigurable(sortKeys(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, idProps), modelProps), formControlProps), formOptionsProps), formSizeProps), formStateProps), formCustomProps), {}, {
ariaInvalid: makeProp(PROP_TYPE_BOOLEAN_STRING, false),
// Only applicable when rendered with button style
buttonVariant: makeProp(PROP_TYPE_STRING),
// Render as button style
buttons: makeProp(PROP_TYPE_BOOLEAN, false),
stacked: makeProp(PROP_TYPE_BOOLEAN, false),
validated: makeProp(PROP_TYPE_BOOLEAN, false)
})), 'formRadioCheckGroups'); // --- Mixin ---
// @vue/component
export var formRadioCheckGroupMixin = extend({
mixins: [idMixin, modelMixin, normalizeSlotMixin, formControlMixin, formOptionsMixin, formSizeMixin, formStateMixin, formCustomMixin],
inheritAttrs: false,
props: props,
data: function data() {
return {
localChecked: this[MODEL_PROP_NAME]
};
},
computed: {
inline: function inline() {
return !this.stacked;
},
groupName: function groupName() {
// Checks/Radios tied to the same model must have the same name,
// especially for ARIA accessibility
return this.name || this.safeId();
},
groupClasses: function groupClasses() {
var inline = this.inline,
size = this.size,
validated = this.validated;
var classes = {
'was-validated': validated
};
if (this.buttons) {
classes = [classes, 'btn-group-toggle', _defineProperty({
'btn-group': inline,
'btn-group-vertical': !inline
}, "btn-group-".concat(size), size)];
}
return classes;
}
},
watch: (_watch = {}, _defineProperty(_watch, MODEL_PROP_NAME, function (newValue) {
if (!looseEqual(newValue, this.localChecked)) {
this.localChecked = newValue;
}
}), _defineProperty(_watch, "localChecked", function localChecked(newValue, oldValue) {
if (!looseEqual(newValue, oldValue)) {
this.$emit(MODEL_EVENT_NAME, newValue);
}
}), _watch),
render: function render(h) {
var _this = this;
var isRadioGroup = this.isRadioGroup;
var attrs = pick(this.$attrs, PASS_DOWN_ATTRS);
var optionComponent = isRadioGroup ? BFormRadio : BFormCheckbox;
var $inputs = this.formOptions.map(function (option, index) {
var key = "BV_option_".concat(index);
return h(optionComponent, {
props: {
// Individual radios or checks can be disabled in a group
disabled: option.disabled || false,
id: _this.safeId(key),
value: option.value // We don't need to include these, since the input's will know they are inside here
// form: this.form || null,
// name: this.groupName,
// required: Boolean(this.name && this.required),
// state: this.state
},
attrs: attrs,
key: key
}, [h('span', {
domProps: htmlOrText(option.html, option.text)
})]);
});
return h('div', {
class: [this.groupClasses, 'bv-no-focus-ring'],
attrs: _objectSpread(_objectSpread({}, omit(this.$attrs, PASS_DOWN_ATTRS)), {}, {
'aria-invalid': this.computedAriaInvalid,
'aria-required': this.required ? 'true' : null,
id: this.safeId(),
role: isRadioGroup ? 'radiogroup' : 'group',
// Add `tabindex="-1"` to allow group to be focused if needed by screen readers
tabindex: '-1'
})
}, [this.normalizeSlot(SLOT_NAME_FIRST), $inputs, this.normalizeSlot()]);
}
});