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/VCalendar/VCalendarDaily.js
2019-08-11 20:48:02 +02:00

241 lines
No EOL
6.3 KiB
JavaScript

// Styles
import "../../../src/components/VCalendar/VCalendarDaily.sass"; // Directives
import Resize from '../../directives/resize'; // Components
import VBtn from '../VBtn'; // Mixins
import CalendarWithIntervals from './mixins/calendar-with-intervals'; // Util
import { convertToUnit } from '../../util/helpers';
/* @vue/component */
export default CalendarWithIntervals.extend({
name: 'v-calendar-daily',
directives: {
Resize
},
data: () => ({
scrollPush: 0
}),
computed: {
classes() {
return {
'v-calendar-daily': true,
...this.themeClasses
};
}
},
mounted() {
this.init();
},
methods: {
init() {
this.$nextTick(this.onResize);
},
onResize() {
this.scrollPush = this.getScrollPush();
},
getScrollPush() {
const area = this.$refs.scrollArea;
const pane = this.$refs.pane;
return area && pane ? area.offsetWidth - pane.offsetWidth : 0;
},
genHead() {
return this.$createElement('div', {
staticClass: 'v-calendar-daily__head',
style: {
marginRight: this.scrollPush + 'px'
}
}, [this.genHeadIntervals(), ...this.genHeadDays()]);
},
genHeadIntervals() {
return this.$createElement('div', {
staticClass: 'v-calendar-daily__intervals-head'
});
},
genHeadDays() {
return this.days.map(this.genHeadDay);
},
genHeadDay(day, index) {
const slot = this.$scopedSlots['day-header'];
return this.$createElement('div', {
key: day.date,
staticClass: 'v-calendar-daily_head-day',
class: this.getRelativeClasses(day),
on: this.getDefaultMouseEventHandlers(':day', _e => {
return this.getSlotScope(day);
})
}, [this.genHeadWeekday(day), this.genHeadDayLabel(day), slot ? slot({ ...day,
index
}) : '']);
},
genHeadWeekday(day) {
const color = day.present ? this.color : undefined;
return this.$createElement('div', this.setTextColor(color, {
staticClass: 'v-calendar-daily_head-weekday'
}), this.weekdayFormatter(day, this.shortWeekdays));
},
genHeadDayLabel(day) {
return this.$createElement('div', {
staticClass: 'v-calendar-daily_head-day-label'
}, [this.genHeadDayButton(day)]);
},
genHeadDayButton(day) {
const color = day.present ? this.color : 'transparent';
return this.$createElement(VBtn, {
props: {
color,
fab: true,
depressed: true
},
on: this.getMouseEventHandlers({
'click:date': {
event: 'click',
stop: true
},
'contextmenu:date': {
event: 'contextmenu',
stop: true,
prevent: true,
result: false
}
}, _e => {
return day;
})
}, this.dayFormatter(day, false));
},
genBody() {
return this.$createElement('div', {
staticClass: 'v-calendar-daily__body'
}, [this.genScrollArea()]);
},
genScrollArea() {
return this.$createElement('div', {
ref: 'scrollArea',
staticClass: 'v-calendar-daily__scroll-area'
}, [this.genPane()]);
},
genPane() {
return this.$createElement('div', {
ref: 'pane',
staticClass: 'v-calendar-daily__pane',
style: {
height: convertToUnit(this.bodyHeight)
}
}, [this.genDayContainer()]);
},
genDayContainer() {
return this.$createElement('div', {
staticClass: 'v-calendar-daily__day-container'
}, [this.genBodyIntervals(), ...this.genDays()]);
},
genDays() {
return this.days.map(this.genDay);
},
genDay(day, index) {
const slot = this.$scopedSlots['day-body'];
const scope = this.getSlotScope(day);
return this.$createElement('div', {
key: day.date,
staticClass: 'v-calendar-daily__day',
class: this.getRelativeClasses(day),
on: this.getDefaultMouseEventHandlers(':time', e => {
return this.getSlotScope(this.getTimestampAtEvent(e, day));
})
}, [...this.genDayIntervals(index), slot ? slot(scope) : '']);
},
genDayIntervals(index) {
return this.intervals[index].map(this.genDayInterval);
},
genDayInterval(interval) {
const height = convertToUnit(this.intervalHeight);
const styler = this.intervalStyle || this.intervalStyleDefault;
const slot = this.$scopedSlots.interval;
const scope = this.getSlotScope(interval);
const data = {
key: interval.time,
staticClass: 'v-calendar-daily__day-interval',
style: {
height,
...styler(interval)
}
};
const children = slot ? slot(scope) : undefined;
return this.$createElement('div', data, children);
},
genBodyIntervals() {
const data = {
staticClass: 'v-calendar-daily__intervals-body',
on: this.getDefaultMouseEventHandlers(':interval', e => {
return this.getTimestampAtEvent(e, this.parsedStart);
})
};
return this.$createElement('div', data, this.genIntervalLabels());
},
genIntervalLabels() {
if (!this.intervals.length) return null;
return this.intervals[0].map(this.genIntervalLabel);
},
genIntervalLabel(interval) {
const height = convertToUnit(this.intervalHeight);
const short = this.shortIntervals;
const shower = this.showIntervalLabel || this.showIntervalLabelDefault;
const show = shower(interval);
const label = show ? this.intervalFormatter(interval, short) : undefined;
return this.$createElement('div', {
key: interval.time,
staticClass: 'v-calendar-daily__interval',
style: {
height
}
}, [this.$createElement('div', {
staticClass: 'v-calendar-daily__interval-text'
}, label)]);
}
},
render(h) {
return h('div', {
class: this.classes,
nativeOn: {
dragstart: e => {
e.preventDefault();
}
},
directives: [{
modifiers: {
quiet: true
},
name: 'resize',
value: this.onResize
}]
}, [!this.hideHeader ? this.genHead() : '', this.genBody()]);
}
});
//# sourceMappingURL=VCalendarDaily.js.map