This repository has been archived on 2024-07-27. You can view files and clone it, but cannot push or open issues or pull requests.
keksAccountGUI/node_modulesOLD/vuetify/lib/components/VDatePicker/mixins/date-picker-table.js
2019-08-11 20:48:02 +02:00

188 lines
No EOL
5.6 KiB
JavaScript

import "../../../../src/components/VDatePicker/VDatePickerTable.sass"; // Directives
import Touch from '../../../directives/touch'; // Mixins
import Colorable from '../../../mixins/colorable';
import Localable from '../../../mixins/localable';
import Themeable from '../../../mixins/themeable'; // Utils
import isDateAllowed from '../util/isDateAllowed';
import mixins from '../../../util/mixins';
export default mixins(Colorable, Localable, Themeable
/* @vue/component */
).extend({
directives: {
Touch
},
props: {
allowedDates: Function,
current: String,
disabled: Boolean,
format: Function,
events: {
type: [Array, Function, Object],
default: () => null
},
eventColor: {
type: [Array, Function, Object, String],
default: () => 'warning'
},
min: String,
max: String,
readonly: Boolean,
scrollable: Boolean,
tableDate: {
type: String,
required: true
},
value: [String, Array]
},
data: () => ({
isReversing: false
}),
computed: {
computedTransition() {
return this.isReversing === !this.$vuetify.rtl ? 'tab-reverse-transition' : 'tab-transition';
},
displayedMonth() {
return Number(this.tableDate.split('-')[1]) - 1;
},
displayedYear() {
return Number(this.tableDate.split('-')[0]);
}
},
watch: {
tableDate(newVal, oldVal) {
this.isReversing = newVal < oldVal;
}
},
methods: {
genButtonClasses(isAllowed, isFloating, isSelected, isCurrent) {
return {
'v-size--default': !isFloating,
'v-btn--active': isSelected,
'v-btn--flat': !isAllowed || this.disabled,
'v-btn--text': isSelected === isCurrent,
'v-btn--rounded': isFloating,
'v-btn--disabled': !isAllowed || this.disabled,
'v-btn--outlined': isCurrent && !isSelected,
...this.themeClasses
};
},
genButtonEvents(value, isAllowed, mouseEventType) {
if (this.disabled) return undefined;
return {
click: () => {
isAllowed && !this.readonly && this.$emit('input', value);
this.$emit(`click:${mouseEventType}`, value);
},
dblclick: () => this.$emit(`dblclick:${mouseEventType}`, value)
};
},
genButton(value, isFloating, mouseEventType, formatter) {
const isAllowed = isDateAllowed(value, this.min, this.max, this.allowedDates);
const isSelected = value === this.value || Array.isArray(this.value) && this.value.indexOf(value) !== -1;
const isCurrent = value === this.current;
const setColor = isSelected ? this.setBackgroundColor : this.setTextColor;
const color = (isSelected || isCurrent) && (this.color || 'accent');
return this.$createElement('button', setColor(color, {
staticClass: 'v-btn',
class: this.genButtonClasses(isAllowed, isFloating, isSelected, isCurrent),
attrs: {
type: 'button'
},
domProps: {
disabled: this.disabled || !isAllowed
},
on: this.genButtonEvents(value, isAllowed, mouseEventType)
}), [this.$createElement('div', {
staticClass: 'v-btn__content'
}, [formatter(value)]), this.genEvents(value)]);
},
getEventColors(date) {
const arrayize = v => Array.isArray(v) ? v : [v];
let eventData;
let eventColors = [];
if (Array.isArray(this.events)) {
eventData = this.events.includes(date);
} else if (this.events instanceof Function) {
eventData = this.events(date) || false;
} else if (this.events) {
eventData = this.events[date] || false;
} else {
eventData = false;
}
if (!eventData) {
return [];
} else if (eventData !== true) {
eventColors = arrayize(eventData);
} else if (typeof this.eventColor === 'string') {
eventColors = [this.eventColor];
} else if (typeof this.eventColor === 'function') {
eventColors = arrayize(this.eventColor(date));
} else if (Array.isArray(this.eventColor)) {
eventColors = this.eventColor;
} else {
eventColors = arrayize(this.eventColor[date]);
}
return eventColors.filter(v => v);
},
genEvents(date) {
const eventColors = this.getEventColors(date);
return eventColors.length ? this.$createElement('div', {
staticClass: 'v-date-picker-table__events'
}, eventColors.map(color => this.$createElement('div', this.setBackgroundColor(color)))) : null;
},
wheel(e, calculateTableDate) {
e.preventDefault();
this.$emit('update:table-date', calculateTableDate(e.deltaY));
},
touch(value, calculateTableDate) {
this.$emit('update:table-date', calculateTableDate(value));
},
genTable(staticClass, children, calculateTableDate) {
const transition = this.$createElement('transition', {
props: {
name: this.computedTransition
}
}, [this.$createElement('table', {
key: this.tableDate
}, children)]);
const touchDirective = {
name: 'touch',
value: {
left: e => e.offsetX < -15 && this.touch(1, calculateTableDate),
right: e => e.offsetX > 15 && this.touch(-1, calculateTableDate)
}
};
return this.$createElement('div', {
staticClass,
class: {
'v-date-picker-table--disabled': this.disabled,
...this.themeClasses
},
on: !this.disabled && this.scrollable ? {
wheel: e => this.wheel(e, calculateTableDate)
} : undefined,
directives: [touchDirective]
}, [transition]);
}
}
});
//# sourceMappingURL=date-picker-table.js.map