vuetify/lib/components/VDatePicker/VDatePickerMonth.mjs

Vue Material Component Framework

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 { ref } from 'vue';
import { genericComponent, propsFactory } from "../../util/index.mjs";
export const makeVDatePickerMonthProps = propsFactory({
  color: String,
  hideWeekdays: Boolean,
  multiple: Boolean,
  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); // TODO: fix typing
    const adapter = useDate();
    function onClick(value) {
      if (props.multiple) {
        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;
        }
      } 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
      };
      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