8c14db982ccc1abdf1eebee2e3448e3b5dca963d7b092a5a8e70f274991a55ed8fc673b6f9ab2baecb3b4d6ec33c1221cfc761cf4d0632af2d6ce016b56407 9.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230
  1. import { defineComponent, ref, computed, watch, nextTick, openBlock, createElementBlock, unref, normalizeClass, createElementVNode, Fragment, renderList, withKeys, withModifiers, createVNode } from 'vue';
  2. import dayjs from 'dayjs';
  3. import { basicYearTableProps } from '../props/basic-year-table.mjs';
  4. import { getValidDateOfYear } from '../utils.mjs';
  5. import ElDatePickerCell from './basic-cell-render.mjs';
  6. import _export_sfc from '../../../../_virtual/plugin-vue_export-helper.mjs';
  7. import { useNamespace } from '../../../../hooks/use-namespace/index.mjs';
  8. import { useLocale } from '../../../../hooks/use-locale/index.mjs';
  9. import { castArray } from '../../../../utils/arrays.mjs';
  10. import { rangeArr } from '../../../time-picker/src/utils.mjs';
  11. import { hasClass } from '../../../../utils/dom/style.mjs';
  12. const _sfc_main = /* @__PURE__ */ defineComponent({
  13. __name: "basic-year-table",
  14. props: basicYearTableProps,
  15. emits: ["changerange", "pick", "select"],
  16. setup(__props, { expose, emit }) {
  17. const props = __props;
  18. const datesInYear = (year, lang2) => {
  19. const firstDay = dayjs(String(year)).locale(lang2).startOf("year");
  20. const lastDay = firstDay.endOf("year");
  21. const numOfDays = lastDay.dayOfYear();
  22. return rangeArr(numOfDays).map((n) => firstDay.add(n, "day").toDate());
  23. };
  24. const ns = useNamespace("year-table");
  25. const { t, lang } = useLocale();
  26. const tbodyRef = ref();
  27. const currentCellRef = ref();
  28. const startYear = computed(() => {
  29. return Math.floor(props.date.year() / 10) * 10;
  30. });
  31. const tableRows = ref([[], [], []]);
  32. const lastRow = ref();
  33. const lastColumn = ref();
  34. const rows = computed(() => {
  35. var _a, _b, _c;
  36. const rows2 = tableRows.value;
  37. const now = dayjs().locale(lang.value).startOf("year");
  38. for (let i = 0; i < 3; i++) {
  39. const row = rows2[i];
  40. for (let j = 0; j < 4; j++) {
  41. if (i * 4 + j >= 10) {
  42. break;
  43. }
  44. let cell = row[j];
  45. if (!cell) {
  46. cell = {
  47. row: i,
  48. column: j,
  49. type: "normal",
  50. inRange: false,
  51. start: false,
  52. end: false,
  53. text: -1,
  54. disabled: false,
  55. isSelected: false,
  56. customClass: void 0,
  57. date: void 0,
  58. dayjs: void 0,
  59. isCurrent: void 0,
  60. selected: void 0,
  61. renderText: void 0,
  62. timestamp: void 0
  63. };
  64. }
  65. cell.type = "normal";
  66. const index = i * 4 + j + startYear.value;
  67. const calTime = dayjs().year(index);
  68. const calEndDate = props.rangeState.endDate || props.maxDate || props.rangeState.selecting && props.minDate || null;
  69. cell.inRange = !!(props.minDate && calTime.isSameOrAfter(props.minDate, "year") && calEndDate && calTime.isSameOrBefore(calEndDate, "year")) || !!(props.minDate && calTime.isSameOrBefore(props.minDate, "year") && calEndDate && calTime.isSameOrAfter(calEndDate, "year"));
  70. if ((_a = props.minDate) == null ? void 0 : _a.isSameOrAfter(calEndDate)) {
  71. cell.start = !!(calEndDate && calTime.isSame(calEndDate, "year"));
  72. cell.end = !!(props.minDate && calTime.isSame(props.minDate, "year"));
  73. } else {
  74. cell.start = !!(props.minDate && calTime.isSame(props.minDate, "year"));
  75. cell.end = !!(calEndDate && calTime.isSame(calEndDate, "year"));
  76. }
  77. const isToday = now.isSame(calTime);
  78. if (isToday) {
  79. cell.type = "today";
  80. }
  81. cell.text = index;
  82. const cellDate = calTime.toDate();
  83. cell.disabled = ((_b = props.disabledDate) == null ? void 0 : _b.call(props, cellDate)) || false;
  84. cell.date = cellDate;
  85. cell.customClass = (_c = props.cellClassName) == null ? void 0 : _c.call(props, cellDate);
  86. cell.dayjs = calTime;
  87. cell.timestamp = calTime.valueOf();
  88. cell.isSelected = isSelectedCell(cell);
  89. row[j] = cell;
  90. }
  91. }
  92. return rows2;
  93. });
  94. const focus = () => {
  95. var _a;
  96. (_a = currentCellRef.value) == null ? void 0 : _a.focus();
  97. };
  98. const getCellKls = (cell) => {
  99. const kls = {};
  100. const today = dayjs().locale(lang.value);
  101. const year = cell.text;
  102. kls.disabled = props.disabled || (props.disabledDate ? datesInYear(year, lang.value).every(props.disabledDate) : false);
  103. kls.today = today.year() === year;
  104. kls.current = castArray(props.parsedValue).findIndex((d) => d.year() === year) >= 0;
  105. if (cell.customClass) {
  106. kls[cell.customClass] = true;
  107. }
  108. if (cell.inRange) {
  109. kls["in-range"] = true;
  110. if (cell.start) {
  111. kls["start-date"] = true;
  112. }
  113. if (cell.end) {
  114. kls["end-date"] = true;
  115. }
  116. }
  117. return kls;
  118. };
  119. const isSelectedCell = (cell) => {
  120. const year = cell.text;
  121. return castArray(props.date).findIndex((date) => date.year() === year) >= 0;
  122. };
  123. const handleYearTableClick = (event) => {
  124. var _a;
  125. if (props.disabled)
  126. return;
  127. const target = (_a = event.target) == null ? void 0 : _a.closest("td");
  128. if (!target || !target.textContent || hasClass(target, "disabled"))
  129. return;
  130. const column = target.cellIndex;
  131. const row = target.parentNode.rowIndex;
  132. const selectedYear = row * 4 + column + startYear.value;
  133. const newDate = dayjs().year(selectedYear);
  134. if (props.selectionMode === "range") {
  135. if (!props.rangeState.selecting) {
  136. emit("pick", { minDate: newDate, maxDate: null });
  137. emit("select", true);
  138. } else {
  139. if (props.minDate && newDate >= props.minDate) {
  140. emit("pick", { minDate: props.minDate, maxDate: newDate });
  141. } else {
  142. emit("pick", { minDate: newDate, maxDate: props.minDate });
  143. }
  144. emit("select", false);
  145. }
  146. } else if (props.selectionMode === "years") {
  147. if (event.type === "keydown") {
  148. emit("pick", castArray(props.parsedValue), false);
  149. return;
  150. }
  151. const vaildYear = getValidDateOfYear(newDate.startOf("year"), lang.value, props.disabledDate);
  152. const newValue = hasClass(target, "current") ? castArray(props.parsedValue).filter((d) => (d == null ? void 0 : d.year()) !== selectedYear) : castArray(props.parsedValue).concat([vaildYear]);
  153. emit("pick", newValue);
  154. } else {
  155. emit("pick", selectedYear);
  156. }
  157. };
  158. const handleMouseMove = (event) => {
  159. var _a;
  160. if (!props.rangeState.selecting)
  161. return;
  162. const target = (_a = event.target) == null ? void 0 : _a.closest("td");
  163. if (!target)
  164. return;
  165. const row = target.parentNode.rowIndex;
  166. const column = target.cellIndex;
  167. if (rows.value[row][column].disabled)
  168. return;
  169. if (row !== lastRow.value || column !== lastColumn.value) {
  170. lastRow.value = row;
  171. lastColumn.value = column;
  172. emit("changerange", {
  173. selecting: true,
  174. endDate: dayjs().year(startYear.value).add(row * 4 + column, "year")
  175. });
  176. }
  177. };
  178. watch(() => props.date, async () => {
  179. var _a, _b;
  180. if ((_a = tbodyRef.value) == null ? void 0 : _a.contains(document.activeElement)) {
  181. await nextTick();
  182. (_b = currentCellRef.value) == null ? void 0 : _b.focus();
  183. }
  184. });
  185. expose({
  186. focus
  187. });
  188. return (_ctx, _cache) => {
  189. return openBlock(), createElementBlock("table", {
  190. role: "grid",
  191. "aria-label": unref(t)("el.datepicker.yearTablePrompt"),
  192. class: normalizeClass(unref(ns).b()),
  193. onClick: handleYearTableClick,
  194. onMousemove: handleMouseMove
  195. }, [
  196. createElementVNode("tbody", {
  197. ref_key: "tbodyRef",
  198. ref: tbodyRef
  199. }, [
  200. (openBlock(true), createElementBlock(Fragment, null, renderList(unref(rows), (row, rowKey) => {
  201. return openBlock(), createElementBlock("tr", { key: rowKey }, [
  202. (openBlock(true), createElementBlock(Fragment, null, renderList(row, (cell, cellKey) => {
  203. return openBlock(), createElementBlock("td", {
  204. key: `${rowKey}_${cellKey}`,
  205. ref_for: true,
  206. ref: (el) => cell.isSelected && (currentCellRef.value = el),
  207. class: normalizeClass(["available", getCellKls(cell)]),
  208. "aria-selected": cell.isSelected,
  209. "aria-label": String(cell.text),
  210. tabindex: cell.isSelected ? 0 : -1,
  211. onKeydown: [
  212. withKeys(withModifiers(handleYearTableClick, ["prevent", "stop"]), ["space"]),
  213. withKeys(withModifiers(handleYearTableClick, ["prevent", "stop"]), ["enter"])
  214. ]
  215. }, [
  216. createVNode(unref(ElDatePickerCell), { cell }, null, 8, ["cell"])
  217. ], 42, ["aria-selected", "aria-label", "tabindex", "onKeydown"]);
  218. }), 128))
  219. ]);
  220. }), 128))
  221. ], 512)
  222. ], 42, ["aria-label"]);
  223. };
  224. }
  225. });
  226. var YearTable = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "basic-year-table.vue"]]);
  227. export { YearTable as default };
  228. //# sourceMappingURL=basic-year-table.mjs.map