element-plus
Version:
A Component Library for Vue 3
1 lines • 6.24 kB
Source Map (JSON)
{"version":3,"file":"basic-year-table.mjs","sources":["../../../../../../../packages/components/date-picker/src/date-picker-com/basic-year-table.vue"],"sourcesContent":["<template>\n <table\n role=\"grid\"\n :aria-label=\"t('el.datepicker.yearTablePrompt')\"\n :class=\"ns.b()\"\n @click=\"handleYearTableClick\"\n >\n <tbody ref=\"tbodyRef\">\n <tr v-for=\"(_, i) in 3\" :key=\"i\">\n <template v-for=\"(__, j) in 4\" :key=\"i + '_' + j\">\n <td\n v-if=\"i * 4 + j < 10\"\n :ref=\"\n (el) =>\n isSelectedCell(startYear + i * 4 + j) && (currentCellRef = el as HTMLElement)\n \"\n class=\"available\"\n :class=\"getCellKls(startYear + i * 4 + j)\"\n :aria-selected=\"`${isSelectedCell(startYear + i * 4 + j)}`\"\n :tabindex=\"isSelectedCell(startYear + i * 4 + j) ? 0 : -1\"\n @keydown.space.prevent.stop=\"handleYearTableClick\"\n @keydown.enter.prevent.stop=\"handleYearTableClick\"\n >\n <span class=\"cell\">{{ startYear + i * 4 + j }}</span>\n </td>\n <td v-else />\n </template>\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 { rangeArr } from '@element-plus/components/time-picker'\nimport { castArray, hasClass } from '@element-plus/utils'\nimport { basicYearTableProps } from '../props/basic-year-table'\n\nconst datesInYear = (year: number, lang: string) => {\n const firstDay = dayjs(String(year)).locale(lang).startOf('year')\n const lastDay = firstDay.endOf('year')\n const numOfDays = lastDay.dayOfYear()\n return rangeArr(numOfDays).map((n) => firstDay.add(n, 'day').toDate())\n}\n\nconst props = defineProps(basicYearTableProps)\nconst emit = defineEmits(['pick'])\n\nconst ns = useNamespace('year-table')\n\nconst { t, lang } = useLocale()\nconst tbodyRef = ref<HTMLElement>()\nconst currentCellRef = ref<HTMLElement>()\nconst startYear = computed(() => {\n return Math.floor(props.date.year() / 10) * 10\n})\n\nconst focus = () => {\n currentCellRef.value?.focus()\n}\n\nconst getCellKls = (year: number) => {\n const kls: Record<string, boolean> = {}\n const today = dayjs().locale(lang.value)\n\n kls.disabled = props.disabledDate\n ? datesInYear(year, lang.value).every(props.disabledDate)\n : false\n\n kls.current =\n castArray(props.parsedValue).findIndex((d) => d!.year() === year) >= 0\n\n kls.today = today.year() === year\n\n return kls\n}\n\nconst isSelectedCell = (year: number) => {\n return (\n (year === startYear.value &&\n props.date.year() < startYear.value &&\n props.date.year() > startYear.value + 9) ||\n castArray(props.date).findIndex((date) => date.year() === year) >= 0\n )\n}\n\nconst handleYearTableClick = (event: MouseEvent | KeyboardEvent) => {\n const clickTarget = event.target as HTMLDivElement\n const target = clickTarget.closest('td')\n if (target && target.textContent) {\n if (hasClass(target, 'disabled')) return\n const year = target.textContent || target.innerText\n emit('pick', Number(year))\n }\n}\n\nwatch(\n () => props.date,\n async () => {\n if (tbodyRef.value?.contains(document.activeElement)) {\n await nextTick()\n currentCellRef.value?.focus()\n }\n }\n)\n\ndefineExpose({\n /**\n * @description focus on the current cell\n */\n focus,\n})\n</script>\n"],"names":[],"mappings":"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"}