Vulture/VApp/node_modules/vuetify/lib/components/VDatePicker/VDatePickerMonth.mjs

147 lines
5.2 KiB
JavaScript

import { createVNode as _createVNode, createTextVNode as _createTextVNode } from "vue";
// Styles
import "./VDatePickerMonth.css";
// Components
import { VBtn } from "../VBtn/index.mjs";
import { VDefaultsProvider } from "../VDefaultsProvider/index.mjs"; // Composables
import { makeCalendarProps, useCalendar } from "../../composables/calendar.mjs";
import { useDate } from "../../composables/date/date.mjs"; // Utilities
import { computed, ref, shallowRef } from 'vue';
import { genericComponent, propsFactory } from "../../util/index.mjs"; // Types
export const makeVDatePickerMonthProps = propsFactory({
color: String,
hideWeekdays: Boolean,
multiple: [Boolean, Number, String],
showWeek: Boolean,
...makeCalendarProps()
}, 'VDatePickerMonth');
export const VDatePickerMonth = genericComponent()({
name: 'VDatePickerMonth',
props: makeVDatePickerMonthProps(),
emits: {
'update:modelValue': date => true,
'update:month': date => true,
'update:year': date => true
},
setup(props, _ref) {
let {
emit,
slots
} = _ref;
const daysRef = ref();
const {
daysInMonth,
model,
weekNumbers
} = useCalendar(props);
const adapter = useDate();
const rangeStart = shallowRef();
const rangeStop = shallowRef();
const atMax = computed(() => {
const max = ['number', 'string'].includes(typeof props.multiple) ? Number(props.multiple) : Infinity;
return model.value.length >= max;
});
function onRangeClick(value) {
const _value = adapter.startOfDay(value);
if (!rangeStart.value) {
rangeStart.value = _value;
model.value = [rangeStart.value];
} else if (!rangeStop.value) {
if (adapter.isSameDay(value, rangeStart.value)) {
rangeStart.value = undefined;
model.value = [];
return;
} else if (adapter.isBefore(value, rangeStart.value)) {
rangeStop.value = rangeStart.value;
rangeStart.value = _value;
} else {
rangeStop.value = _value;
}
const diff = adapter.getDiff(rangeStop.value, rangeStart.value);
const datesInRange = [rangeStart.value];
for (let i = 1; i < diff; i++) {
const nextDate = adapter.addDays(rangeStart.value, i);
datesInRange.push(nextDate);
}
datesInRange.push(rangeStop.value);
model.value = datesInRange;
} else {
rangeStart.value = value;
rangeStop.value = undefined;
model.value = [rangeStart.value];
}
}
function onMultipleClick(value) {
const index = model.value.findIndex(selection => adapter.isSameDay(selection, value));
if (index === -1) {
model.value = [...model.value, value];
} else {
const value = [...model.value];
value.splice(index, 1);
model.value = value;
}
}
function onClick(value) {
if (props.multiple === 'range') {
onRangeClick(value);
} else if (props.multiple) {
onMultipleClick(value);
} else {
model.value = [value];
}
}
return () => _createVNode("div", {
"class": "v-date-picker-month"
}, [props.showWeek && _createVNode("div", {
"key": "weeks",
"class": "v-date-picker-month__weeks"
}, [!props.hideWeekdays && _createVNode("div", {
"key": "hide-week-days",
"class": "v-date-picker-month__day"
}, [_createTextVNode("\xA0")]), weekNumbers.value.map(week => _createVNode("div", {
"class": ['v-date-picker-month__day', 'v-date-picker-month__day--adjacent']
}, [week]))]), _createVNode("div", {
"ref": daysRef,
"class": "v-date-picker-month__days"
}, [!props.hideWeekdays && adapter.getWeekdays().map(weekDay => _createVNode("div", {
"class": ['v-date-picker-month__day', 'v-date-picker-month__weekday']
}, [weekDay])), daysInMonth.value.map((item, i) => {
const slotProps = {
props: {
onClick: () => onClick(item.date)
},
item,
i
};
if (atMax.value && !item.isSelected) {
item.isDisabled = true;
}
return _createVNode("div", {
"class": ['v-date-picker-month__day', {
'v-date-picker-month__day--adjacent': item.isAdjacent,
'v-date-picker-month__day--hide-adjacent': item.isHidden,
'v-date-picker-month__day--selected': item.isSelected,
'v-date-picker-month__day--week-end': item.isWeekEnd,
'v-date-picker-month__day--week-start': item.isWeekStart
}],
"data-v-date": !item.isDisabled ? item.isoDate : undefined
}, [(props.showAdjacentMonths || !item.isAdjacent) && _createVNode(VDefaultsProvider, {
"defaults": {
VBtn: {
color: (item.isSelected || item.isToday) && !item.isDisabled ? props.color : undefined,
disabled: item.isDisabled,
icon: true,
ripple: false,
text: item.localized,
variant: item.isDisabled ? 'text' : item.isToday && !item.isSelected ? 'outlined' : 'flat',
onClick: () => onClick(item.date)
}
}
}, {
default: () => [slots.day?.(slotProps) ?? _createVNode(VBtn, slotProps.props, null)]
})]);
})])]);
}
});
//# sourceMappingURL=VDatePickerMonth.mjs.map