VDateRangePickerMonth.mjs 2.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
  1. import { mergeProps as _mergeProps, createVNode as _createVNode, Fragment as _Fragment } from "vue";
  2. // Styles
  3. import "./VDateRangePickerMonth.css";
  4. // Components
  5. import { makeVDatePickerMonthProps, VDatePickerMonth } from "../VDatePicker/VDatePickerMonth.mjs"; // Composables
  6. import { useDatePicker } from "../VDatePicker/composables.mjs"; // Utilities
  7. import { computed, onMounted, ref } from 'vue';
  8. import { useDate } from "../date/index.mjs";
  9. import { createRange, genericComponent, propsFactory, useRender } from "../../util/index.mjs";
  10. export const makeVDateRangePickerMonthProps = propsFactory({
  11. ...makeVDatePickerMonthProps({
  12. hideWeekdays: true,
  13. multiple: true
  14. })
  15. }, 'VDateRangePickerMonth');
  16. export const VDateRangePickerMonth = genericComponent()({
  17. name: 'VDateRangePickerMonth',
  18. props: makeVDateRangePickerMonthProps(),
  19. emits: {
  20. 'update:modelValue': date => true
  21. },
  22. setup(props, _ref) {
  23. let {
  24. emit
  25. } = _ref;
  26. const adapter = useDate();
  27. const {
  28. hasScrolled
  29. } = useDatePicker();
  30. const months = computed(() => {
  31. const range = createRange(6, -3);
  32. return range.map(offset => adapter.addMonths(props.displayDate, offset));
  33. });
  34. const monthRef = ref();
  35. onMounted(() => {
  36. monthRef.value?.$el.scrollIntoView({
  37. block: 'center'
  38. });
  39. });
  40. function handleScroll() {
  41. hasScrolled.value = true;
  42. }
  43. useRender(() => {
  44. const [datePickerMonthProps] = VDatePickerMonth.filterProps(props);
  45. return _createVNode("div", {
  46. "class": "v-date-range-picker-month",
  47. "onScrollPassive": handleScroll
  48. }, [months.value.map(month => _createVNode(_Fragment, null, [_createVNode("div", {
  49. "class": "v-date-range-picker-month__header"
  50. }, [adapter.format(month, 'monthAndYear')]), _createVNode(VDatePickerMonth, _mergeProps({
  51. "ref": adapter.isSameMonth(month, props.displayDate) ? monthRef : undefined
  52. }, datePickerMonthProps, {
  53. "modelValue": props.modelValue,
  54. "onUpdate:modelValue": modelValue => emit('update:modelValue', modelValue),
  55. "displayDate": month
  56. }), null)]))]);
  57. });
  58. }
  59. });
  60. //# sourceMappingURL=VDateRangePickerMonth.mjs.map