1 line
18 KiB
Plaintext
1 line
18 KiB
Plaintext
|
{"version":3,"file":"basic-month-table.mjs","sources":["../../../../../../../packages/components/date-picker-panel/src/date-picker-com/basic-month-table.vue"],"sourcesContent":["<template>\n <table\n role=\"grid\"\n :aria-label=\"t('el.datepicker.monthTablePrompt')\"\n :class=\"ns.b()\"\n @click=\"handleMonthTableClick\"\n @mousemove=\"handleMouseMove\"\n >\n <tbody ref=\"tbodyRef\">\n <tr v-for=\"(row, key) in rows\" :key=\"key\">\n <td\n v-for=\"(cell, key_) in row\"\n :key=\"key_\"\n :ref=\"(el) => cell.isSelected && (currentCellRef = el as HTMLElement)\"\n :class=\"getCellStyle(cell)\"\n :aria-selected=\"!!cell.isSelected\"\n :aria-label=\"t(`el.datepicker.month${+cell.text + 1}`)\"\n :tabindex=\"cell.isSelected ? 0 : -1\"\n @keydown.space.prevent.stop=\"handleMonthTableClick\"\n @keydown.enter.prevent.stop=\"handleMonthTableClick\"\n >\n <el-date-picker-cell\n :cell=\"{\n ...cell,\n renderText: t('el.datepicker.months.' + months[cell.text]),\n }\"\n />\n </td>\n </tr>\n </tbody>\n </table>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, nextTick, ref, watch } from 'vue'\nimport dayjs from 'dayjs'\nimport { useLocale, useNamespace } from '@element-plus/hooks'\nimport { castArray, hasClass } from '@element-plus/utils'\nimport { basicMonthTableProps } from '../props/basic-month-table'\nimport { datesInMonth, getValidDateOfMonth } from '../utils'\nimport ElDatePickerCell from './basic-cell-render'\n\nimport type { Dayjs } from 'dayjs'\n\ntype MonthCell = {\n column: number\n customClass: string | undefined\n disabled: boolean\n end: boolean\n inRange: boolean\n row: number\n selected: Dayjs | undefined\n isCurrent: boolean | undefined\n isSelected: boolean\n start: boolean\n text: number\n renderText: string | undefined\n timestamp: number | undefined\n date: Date | undefined\n dayjs: Dayjs | undefined\n type: 'normal' | 'today'\n}\n\nconst props = defineProps(basicMonthTableProps)\nconst emit = defineEmits(['changerange', 'pick', 'select'])\n\nconst ns = useNamespace('month-table')\n\nconst { t, lang } = useLocale()\nconst tbodyRef = ref<HTMLElement>()\nconst currentCellRef = ref<HTMLElement>()\nconst months = ref(\n props.date\n .locale('en')\n .localeData()\n .monthsShort()\n .map((_) => _.toLowerCase())\n)\nconst tableRows = ref<MonthCell[][]>([[], [], []])\nconst lastRow = ref<number>()\nconst lastColumn = ref<number>()\nconst rows = computed<MonthCell[][]>(() => {\n const rows = tableRows.value\n\n const now = dayjs().locale(lang.value).startOf('month')\n\n for (let i = 0; i < 3; i++) {\n const row = rows[i]\n for (let j = 0; j < 4; j++) {\n const cell = (row[j] ||= {\n row: i,\n column: j,\n type: 'normal',\n inRange: false,\n start: false,\n end: false,\n text: -1,\n disabled: false,\n isSelected: false,\n customClass: undefined,\n date: undefined,\n dayjs: undefined,\n isCurrent: undefined,\n selected: undefined,\n renderText: undefined,\n timestamp: undefined,\n })\n\n cell.type = 'normal'\n\n const index = i * 4 + j\n const calTime = props.date.startOf('year').month(index)\n\n const calEndDate =\n props.rangeState.endDate ||\n props.maxDate ||\n (props.rangeState.selecting && props.minDate) ||\n null\n\n cell.inRange =\n !!(\n props.minDate &&\n calTime.isSameOrAfter(props.minDate, 'month') &&\n calEndDate &&\n calTime.isSameOrBefore(calEndDate, 'month')\n ) ||\n !!(\n props.minDate &&\n calTime.isSameOrBefore(props.minDate, 'month') &&\n calEndDate &&\n calTime.isSameOrAfter(calEndDate, 'month')\n )\n\n if (props.minDate?.isSameOrAfter(calEndDate)) {\n cell.start = !!(calEndD
|