665a6154dcc8ff97ea38297c63dc42eb10264fb47910be6f8a3c50f3f0d36286b93f1896fbdf3441cc1e7cf428f64c7020e924bee882ba44bf19bb68cf0df1 9.7 KB

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