You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1 line
11 KiB
1 line
11 KiB
2 years ago
|
{"version":3,"file":"use-calendar.mjs","sources":["../../../../../../packages/components/calendar/src/use-calendar.ts"],"sourcesContent":["import { computed, ref, useSlots } from 'vue'\nimport dayjs from 'dayjs'\nimport { useDeprecated, useLocale } from '@element-plus/hooks'\nimport { debugWarn } from '@element-plus/utils'\nimport { INPUT_EVENT, UPDATE_MODEL_EVENT } from '@element-plus/constants'\n\nimport type { ComputedRef, SetupContext } from 'vue'\nimport type { Dayjs } from 'dayjs'\nimport type { CalendarDateType, CalendarEmits, CalendarProps } from './calendar'\n\nconst adjacentMonth = (start: Dayjs, end: Dayjs): [Dayjs, Dayjs][] => {\n const firstMonthLastDay = start.endOf('month')\n const lastMonthFirstDay = end.startOf('month')\n\n // Whether the last day of the first month and the first day of the last month is in the same week\n const isSameWeek = firstMonthLastDay.isSame(lastMonthFirstDay, 'week')\n const lastMonthStartDay = isSameWeek\n ? lastMonthFirstDay.add(1, 'week')\n : lastMonthFirstDay\n\n return [\n [start, firstMonthLastDay],\n [lastMonthStartDay.startOf('week'), end],\n ]\n}\n\nconst threeConsecutiveMonth = (start: Dayjs, end: Dayjs): [Dayjs, Dayjs][] => {\n const firstMonthLastDay = start.endOf('month')\n const secondMonthFirstDay = start.add(1, 'month').startOf('month')\n\n // Whether the last day of the first month and the second month is in the same week\n const secondMonthStartDay = firstMonthLastDay.isSame(\n secondMonthFirstDay,\n 'week'\n )\n ? secondMonthFirstDay.add(1, 'week')\n : secondMonthFirstDay\n\n const secondMonthLastDay = secondMonthStartDay.endOf('month')\n const lastMonthFirstDay = end.startOf('month')\n\n // Whether the last day of the second month and the last day of the last month is in the same week\n const lastMonthStartDay = secondMonthLastDay.isSame(lastMonthFirstDay, 'week')\n ? lastMonthFirstDay.add(1, 'week')\n : lastMonthFirstDay\n\n return [\n [start, firstMonthLastDay],\n [secondMonthStartDay.startOf('week'), secondMonthLastDay],\n [lastMonthStartDay.startOf('week'), end],\n ]\n}\n\nexport const useCalendar = (\n props: CalendarProps,\n emit: SetupContext<CalendarEmits>['emit'],\n componentName: string\n) => {\n const slots = useSlots()\n const { lang } = useLocale()\n\n const selectedDay = ref<Dayjs>()\n const now = dayjs().locale(lang.value)\n\n const realSelectedDay = computed<Dayjs | undefined>({\n get() {\n if (!props.modelValue) return selectedDay.value\n return date.value\n },\n set(val) {\n if (!val) return\n selectedDay.value = val\n const result = val.toDate()\n\n emit(INPUT_EVENT, result)\n emit(UPDATE_MODEL_EVENT, result)\n },\n })\n\n // if range is valid, we get a two-digit array\n const validatedRange = computed(() => {\n if (!props.range) return []\n const rangeArrDayjs = props.range.map((_) => dayjs(_).locale(lang.value))\n const [startDayjs, endDayjs] = rangeArrDayjs\n if (startDayjs.isAfter(endDayjs)) {\n debugWarn(componentName, 'end time should be greater than start time')\n return []\n }\n if (startDayjs.isSame(endDayjs, 'month')) {\n // same month\n return calculateValidatedDateRange(startDayjs, endDayjs)\n } else {\n // two months\n if (startDayjs.add(1, 'month').month() !== endDayjs.month()) {\n debugWarn(\n componentName,\n 'start time and end time interval must not exceed two months'\n )\n return []\n }\n return calculateValidatedDateRange(startDayjs, endDayjs)\n }\n })\n\n const date: ComputedRef<Dayjs> = computed(() => {\n if (!props.modelValue) {\n return (\n realSelectedDay.value ||\n (validatedRange.value.length ? validatedRange.value[0][0] : now)\n )\n } else {\n return dayjs(props.modelValue).locale(lang.value)\n }\n })\n const prevMonthDayjs = computed(() => date.value.subtract(1, 'month').date(1))\n const nextMonthDayjs = computed(() => date.value.add(1, 'month').date(1))\
|