bootstrap-view
Version:
With more than 85 components, over 45 available plugins, several directives, and 1000+ icons, BootstrapVue provides one of the most comprehensive implementations of the Bootstrap v4 component and grid system available for Vue.js v2.6, complete with extens
280 lines (271 loc) • 12 kB
JavaScript
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
import { extend } from '../vue';
import { PROP_TYPE_ANY, PROP_TYPE_BOOLEAN, PROP_TYPE_STRING } from '../constants/props';
import { EVENT_NAME_CHANGE } from '../constants/events';
import { attemptBlur, attemptFocus } from '../utils/dom';
import { isBoolean } from '../utils/inspect';
import { looseEqual } from '../utils/loose-equal';
import { makeModelMixin } from '../utils/model';
import { sortKeys } from '../utils/object';
import { makeProp, makePropsConfigurable } from '../utils/props';
import { attrsMixin } from './attrs';
import { formControlMixin, props as formControlProps } from './form-control';
import { formCustomMixin, props as formCustomProps } from './form-custom';
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 ---
var _makeModelMixin = makeModelMixin('checked', {
defaultValue: null
}),
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({}, idProps), modelProps), formControlProps), formSizeProps), formStateProps), formCustomProps), {}, {
ariaLabel: makeProp(PROP_TYPE_STRING),
ariaLabelledby: makeProp(PROP_TYPE_STRING),
// Only applicable in standalone mode (non group)
button: makeProp(PROP_TYPE_BOOLEAN, false),
// Only applicable when rendered with button style
buttonVariant: makeProp(PROP_TYPE_STRING),
inline: makeProp(PROP_TYPE_BOOLEAN, false),
value: makeProp(PROP_TYPE_ANY)
})), 'formRadioCheckControls');
// --- Mixin ---
// @vue/component
export var formRadioCheckMixin = extend({
mixins: [attrsMixin, idMixin, modelMixin, normalizeSlotMixin, formControlMixin, formSizeMixin, formStateMixin, formCustomMixin],
inheritAttrs: false,
props: props,
data: function data() {
return {
localChecked: this.isGroup ? this.bvGroup[MODEL_PROP_NAME] : this[MODEL_PROP_NAME],
hasFocus: false
};
},
computed: {
computedLocalChecked: {
get: function get() {
return this.isGroup ? this.bvGroup.localChecked : this.localChecked;
},
set: function set(value) {
if (this.isGroup) {
this.bvGroup.localChecked = value;
} else {
this.localChecked = value;
}
}
},
isChecked: function isChecked() {
return looseEqual(this.value, this.computedLocalChecked);
},
isRadio: function isRadio() {
return true;
},
isGroup: function isGroup() {
// Is this check/radio a child of check-group or radio-group?
return !!this.bvGroup;
},
isBtnMode: function isBtnMode() {
// Support button style in single input mode
return this.isGroup ? this.bvGroup.buttons : this.button;
},
isPlain: function isPlain() {
return this.isBtnMode ? false : this.isGroup ? this.bvGroup.plain : this.plain;
},
isCustom: function isCustom() {
return this.isBtnMode ? false : !this.isPlain;
},
isSwitch: function isSwitch() {
// Custom switch styling (checkboxes only)
return this.isBtnMode || this.isRadio || this.isPlain ? false : this.isGroup ? this.bvGroup.switches : this.switch;
},
isInline: function isInline() {
return this.isGroup ? this.bvGroup.inline : this.inline;
},
isDisabled: function isDisabled() {
// Child can be disabled while parent isn't, but is always disabled if group is
return this.isGroup ? this.bvGroup.disabled || this.disabled : this.disabled;
},
isRequired: function isRequired() {
// Required only works when a name is provided for the input(s)
// Child can only be required when parent is
// Groups will always have a name (either user supplied or auto generated)
return this.computedName && (this.isGroup ? this.bvGroup.required : this.required);
},
computedName: function computedName() {
// Group name preferred over local name
return (this.isGroup ? this.bvGroup.groupName : this.name) || null;
},
computedForm: function computedForm() {
return (this.isGroup ? this.bvGroup.form : this.form) || null;
},
computedSize: function computedSize() {
return (this.isGroup ? this.bvGroup.size : this.size) || '';
},
computedState: function computedState() {
return this.isGroup ? this.bvGroup.computedState : isBoolean(this.state) ? this.state : null;
},
computedButtonVariant: function computedButtonVariant() {
// Local variant preferred over group variant
var buttonVariant = this.buttonVariant;
if (buttonVariant) {
return buttonVariant;
}
if (this.isGroup && this.bvGroup.buttonVariant) {
return this.bvGroup.buttonVariant;
}
return 'secondary';
},
buttonClasses: function buttonClasses() {
var computedSize = this.computedSize;
return ['btn', "btn-".concat(this.computedButtonVariant), _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "btn-".concat(computedSize), computedSize), "disabled", this.isDisabled), "active", this.isChecked), "focus", this.hasFocus)];
},
computedAttrs: function computedAttrs() {
var disabled = this.isDisabled,
required = this.isRequired;
return _objectSpread(_objectSpread({}, this.bvAttrs), {}, {
id: this.safeId(),
type: this.isRadio ? 'radio' : 'checkbox',
name: this.computedName,
form: this.computedForm,
disabled: disabled,
required: required,
'aria-required': required || null,
'aria-label': this.ariaLabel || null,
'aria-labelledby': this.ariaLabelledby || null
});
}
},
watch: _defineProperty(_defineProperty({}, MODEL_PROP_NAME, function () {
this["".concat(MODEL_PROP_NAME, "Watcher")].apply(this, arguments);
}), "computedLocalChecked", function computedLocalChecked() {
this.computedLocalCheckedWatcher.apply(this, arguments);
}),
methods: _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(MODEL_PROP_NAME, "Watcher"), function Watcher(newValue) {
if (!looseEqual(newValue, this.computedLocalChecked)) {
this.computedLocalChecked = newValue;
}
}), "computedLocalCheckedWatcher", function computedLocalCheckedWatcher(newValue, oldValue) {
if (!looseEqual(newValue, oldValue)) {
this.$emit(MODEL_EVENT_NAME, newValue);
}
}), "handleChange", function handleChange(_ref2) {
var _this = this;
var checked = _ref2.target.checked;
var value = this.value;
var localChecked = checked ? value : null;
this.computedLocalChecked = value;
// Fire events in a `$nextTick()` to ensure the `v-model` is updated
this.$nextTick(function () {
// Change is only emitted on user interaction
_this.$emit(EVENT_NAME_CHANGE, localChecked);
// If this is a child of a group, we emit a change event on it as well
if (_this.isGroup) {
_this.bvGroup.$emit(EVENT_NAME_CHANGE, localChecked);
}
});
}), "handleFocus", function handleFocus(event) {
// When in buttons mode, we need to add 'focus' class to label when input focused
// As it is the hidden input which has actual focus
if (event.target) {
if (event.type === 'focus') {
this.hasFocus = true;
} else if (event.type === 'blur') {
this.hasFocus = false;
}
}
}), "focus", function focus() {
if (!this.isDisabled) {
attemptFocus(this.$refs.input);
}
}), "blur", function blur() {
if (!this.isDisabled) {
attemptBlur(this.$refs.input);
}
}),
render: function render(h) {
var isRadio = this.isRadio,
isBtnMode = this.isBtnMode,
isPlain = this.isPlain,
isCustom = this.isCustom,
isInline = this.isInline,
isSwitch = this.isSwitch,
computedSize = this.computedSize,
bvAttrs = this.bvAttrs;
var $content = this.normalizeSlot();
var $input = h('input', {
class: [{
'form-check-input': isPlain,
'custom-control-input': isCustom,
// https://github.com/bootstrap-vue/bootstrap-vue/issues/2911
'position-static': isPlain && !$content
}, isBtnMode ? '' : this.stateClass],
directives: [{
name: 'model',
value: this.computedLocalChecked
}],
attrs: this.computedAttrs,
domProps: {
value: this.value,
checked: this.isChecked
},
on: _objectSpread({
change: this.handleChange
}, isBtnMode ? {
focus: this.handleFocus,
blur: this.handleFocus
} : {}),
key: 'input',
ref: 'input'
});
if (isBtnMode) {
var $button = h('label', {
class: this.buttonClasses
}, [$input, $content]);
if (!this.isGroup) {
// Standalone button mode, so wrap in 'btn-group-toggle'
// and flag it as inline-block to mimic regular buttons
$button = h('div', {
class: ['btn-group-toggle', 'd-inline-block']
}, [$button]);
}
return $button;
}
// If no label content in plain mode we dont render the label
// See: https://github.com/bootstrap-vue/bootstrap-vue/issues/2911
var $label = h();
if (!(isPlain && !$content)) {
$label = h('label', {
class: {
'form-check-label': isPlain,
'custom-control-label': isCustom
},
attrs: {
for: this.safeId()
}
}, $content);
}
return h('div', {
class: [_defineProperty({
'form-check': isPlain,
'form-check-inline': isPlain && isInline,
'custom-control': isCustom,
'custom-control-inline': isCustom && isInline,
'custom-checkbox': isCustom && !isRadio && !isSwitch,
'custom-switch': isSwitch,
'custom-radio': isCustom && isRadio
}, "b-custom-control-".concat(computedSize), computedSize && !isBtnMode), bvAttrs.class],
style: bvAttrs.style
}, [$input, $label]);
}
});