123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134 |
- // Components
- import VInput from '../components/VInput';
- // Mixins
- import Rippleable from './rippleable';
- import Comparable from './comparable';
- /* @vue/component */
- export default VInput.extend({
- name: 'selectable',
- mixins: [Rippleable, Comparable],
- model: {
- prop: 'inputValue',
- event: 'change'
- },
- props: {
- color: {
- type: String,
- default: 'accent'
- },
- id: String,
- inputValue: null,
- falseValue: null,
- trueValue: null,
- multiple: {
- type: Boolean,
- default: null
- },
- label: String
- },
- data: function data(vm) {
- return {
- lazyValue: vm.inputValue
- };
- },
- computed: {
- computedColor: function computedColor() {
- return this.isActive ? this.color : this.validationState;
- },
- isMultiple: function isMultiple() {
- return this.multiple === true || this.multiple === null && Array.isArray(this.internalValue);
- },
- isActive: function isActive() {
- var _this = this;
-
- var value = this.value;
- var input = this.internalValue;
- if (this.isMultiple) {
- if (!Array.isArray(input)) return false;
- return input.some(function (item) {
- return _this.valueComparator(item, value);
- });
- }
- if (this.trueValue === undefined || this.falseValue === undefined) {
- return value ? this.valueComparator(value, input) : Boolean(input);
- }
- return this.valueComparator(input, this.trueValue);
- },
- isDirty: function isDirty() {
- return this.isActive;
- }
- },
- watch: {
- inputValue: function inputValue(val) {
- this.lazyValue = val;
- }
- },
- methods: {
- genLabel: function genLabel() {
- if (!this.hasLabel) return null;
- var label = VInput.options.methods.genLabel.call(this);
- label.data.on = { click: this.onChange };
- return label;
- },
- genInput: function genInput(type, attrs) {
- return this.$createElement('input', {
- attrs: Object.assign({
- 'aria-label': this.label,
- 'aria-checked': this.isActive.toString(),
- disabled: this.isDisabled,
- id: this.id,
- role: type,
- type: type
- }, attrs),
- domProps: {
- value: this.value,
- checked: this.isActive
- },
- on: {
- blur: this.onBlur,
- change: this.onChange,
- focus: this.onFocus,
- keydown: this.onKeydown
- },
- ref: 'input'
- });
- },
- onBlur: function onBlur() {
- this.isFocused = false;
- },
- onChange: function onChange() {
- var _this2 = this;
-
- if (this.isDisabled) return;
- var value = this.value;
- var input = this.internalValue;
- if (this.isMultiple) {
- if (!Array.isArray(input)) {
- input = [];
- }
- var length = input.length;
- input = input.filter(function (item) {
- return !_this2.valueComparator(item, value);
- });
- if (input.length === length) {
- input.push(value);
- }
- } else if (this.trueValue !== undefined && this.falseValue !== undefined) {
- input = this.valueComparator(input, this.trueValue) ? this.falseValue : this.trueValue;
- } else if (value) {
- input = this.valueComparator(input, value) ? null : value;
- } else {
- input = !input;
- }
- this.validate(true, input);
- this.internalValue = input;
- },
- onFocus: function onFocus() {
- this.isFocused = true;
- },
-
- /** @abstract */
- onKeydown: function onKeydown(e) {}
- }
- });
- //# sourceMappingURL=selectable.js.map
|