@element-plus/nightly 0.0.20220119 → 0.0.20220123

package/lib/components/date-picker/src/date-picker-com/basic-date-table.js

@@ -2,11 +2,341 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var basicDateTable_vue_vue_type_script_lang = require('./basic-date-table.vue_vue_type_script_lang.js');
-var basicDateTable_vue_vue_type_template_id_0572814e_lang = require('./basic-date-table.vue_vue_type_template_id_0572814e_lang.js');
+var vue = require('vue');
+var dayjs = require('dayjs');
+require('../../../../hooks/index.js');
+var util = require('../../../../utils/util.js');
+var basicCellRender = require('./basic-cell-render.js');
+var pluginVue_exportHelper = require('../../../../_virtual/plugin-vue_export-helper.js');
+var index = require('../../../../hooks/use-locale/index.js');
 
-basicDateTable_vue_vue_type_script_lang["default"].render = basicDateTable_vue_vue_type_template_id_0572814e_lang.render;
-basicDateTable_vue_vue_type_script_lang["default"].__file = "packages/components/date-picker/src/date-picker-com/basic-date-table.vue";
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-exports["default"] = basicDateTable_vue_vue_type_script_lang["default"];
+var dayjs__default = /*#__PURE__*/_interopDefaultLegacy(dayjs);
+
+const _sfc_main = vue.defineComponent({
+  components: {
+    ElDatePickerCell: basicCellRender["default"]
+  },
+  props: {
+    date: {
+      type: Object
+    },
+    minDate: {
+      type: Object
+    },
+    maxDate: {
+      type: Object
+    },
+    parsedValue: {
+      type: [Object, Array]
+    },
+    selectionMode: {
+      type: String,
+      default: "day"
+    },
+    showWeekNumber: {
+      type: Boolean,
+      default: false
+    },
+    disabledDate: {
+      type: Function
+    },
+    cellClassName: {
+      type: Function
+    },
+    rangeState: {
+      type: Object,
+      default: () => ({
+        endDate: null,
+        selecting: false
+      })
+    }
+  },
+  emits: ["changerange", "pick", "select"],
+  setup(props, ctx) {
+    const { t, lang } = index.useLocale();
+    const lastRow = vue.ref(null);
+    const lastColumn = vue.ref(null);
+    const tableRows = vue.ref([[], [], [], [], [], []]);
+    const firstDayOfWeek = props.date.$locale().weekStart || 7;
+    const WEEKS_CONSTANT = props.date.locale("en").localeData().weekdaysShort().map((_) => _.toLowerCase());
+    const offsetDay = vue.computed(() => {
+      return firstDayOfWeek > 3 ? 7 - firstDayOfWeek : -firstDayOfWeek;
+    });
+    const startDate = vue.computed(() => {
+      const startDayOfMonth = props.date.startOf("month");
+      return startDayOfMonth.subtract(startDayOfMonth.day() || 7, "day");
+    });
+    const WEEKS = vue.computed(() => {
+      return WEEKS_CONSTANT.concat(WEEKS_CONSTANT).slice(firstDayOfWeek, firstDayOfWeek + 7);
+    });
+    const rows = vue.computed(() => {
+      const startOfMonth = props.date.startOf("month");
+      const startOfMonthDay = startOfMonth.day() || 7;
+      const dateCountOfMonth = startOfMonth.daysInMonth();
+      const dateCountOfLastMonth = startOfMonth.subtract(1, "month").daysInMonth();
+      const offset = offsetDay.value;
+      const rows_ = tableRows.value;
+      let count = 1;
+      const selectedDate = props.selectionMode === "dates" ? util.coerceTruthyValueToArray(props.parsedValue) : [];
+      const calNow = dayjs__default["default"]().locale(lang.value).startOf("day");
+      for (let i = 0; i < 6; i++) {
+        const row = rows_[i];
+        if (props.showWeekNumber) {
+          if (!row[0]) {
+            row[0] = {
+              type: "week",
+              text: startDate.value.add(i * 7 + 1, "day").week()
+            };
+          }
+        }
+        for (let j = 0; j < 7; j++) {
+          let cell = row[props.showWeekNumber ? j + 1 : j];
+          if (!cell) {
+            cell = {
+              row: i,
+              column: j,
+              type: "normal",
+              inRange: false,
+              start: false,
+              end: false
+            };
+          }
+          const index = i * 7 + j;
+          const calTime = startDate.value.add(index - offset, "day");
+          cell.dayjs = calTime;
+          cell.date = calTime.toDate();
+          cell.timestamp = calTime.valueOf();
+          cell.type = "normal";
+          const calEndDate = props.rangeState.endDate || props.maxDate || props.rangeState.selecting && props.minDate;
+          cell.inRange = props.minDate && calTime.isSameOrAfter(props.minDate, "day") && calEndDate && calTime.isSameOrBefore(calEndDate, "day") || props.minDate && calTime.isSameOrBefore(props.minDate, "day") && calEndDate && calTime.isSameOrAfter(calEndDate, "day");
+          if (props.minDate?.isSameOrAfter(calEndDate)) {
+            cell.start = calEndDate && calTime.isSame(calEndDate, "day");
+            cell.end = props.minDate && calTime.isSame(props.minDate, "day");
+          } else {
+            cell.start = props.minDate && calTime.isSame(props.minDate, "day");
+            cell.end = calEndDate && calTime.isSame(calEndDate, "day");
+          }
+          const isToday = calTime.isSame(calNow, "day");
+          if (isToday) {
+            cell.type = "today";
+          }
+          if (i >= 0 && i <= 1) {
+            const numberOfDaysFromPreviousMonth = startOfMonthDay + offset < 0 ? 7 + startOfMonthDay + offset : startOfMonthDay + offset;
+            if (j + i * 7 >= numberOfDaysFromPreviousMonth) {
+              cell.text = count++;
+            } else {
+              cell.text = dateCountOfLastMonth - (numberOfDaysFromPreviousMonth - j % 7) + 1 + i * 7;
+              cell.type = "prev-month";
+            }
+          } else {
+            if (count <= dateCountOfMonth) {
+              cell.text = count++;
+            } else {
+              cell.text = count++ - dateCountOfMonth;
+              cell.type = "next-month";
+            }
+          }
+          const cellDate = calTime.toDate();
+          cell.selected = selectedDate.find((_) => _.valueOf() === calTime.valueOf());
+          cell.isSelected = !!cell.selected;
+          cell.isCurrent = isCurrent(cell);
+          cell.disabled = props.disabledDate && props.disabledDate(cellDate);
+          cell.customClass = props.cellClassName && props.cellClassName(cellDate);
+          row[props.showWeekNumber ? j + 1 : j] = cell;
+        }
+        if (props.selectionMode === "week") {
+          const start = props.showWeekNumber ? 1 : 0;
+          const end = props.showWeekNumber ? 7 : 6;
+          const isActive = isWeekActive(row[start + 1]);
+          row[start].inRange = isActive;
+          row[start].start = isActive;
+          row[end].inRange = isActive;
+          row[end].end = isActive;
+        }
+      }
+      return rows_;
+    });
+    const isCurrent = (cell) => {
+      return props.selectionMode === "day" && (cell.type === "normal" || cell.type === "today") && cellMatchesDate(cell, props.parsedValue);
+    };
+    const cellMatchesDate = (cell, date) => {
+      if (!date)
+        return false;
+      return dayjs__default["default"](date).locale(lang.value).isSame(props.date.date(Number(cell.text)), "day");
+    };
+    const getCellClasses = (cell) => {
+      const classes = [];
+      if ((cell.type === "normal" || cell.type === "today") && !cell.disabled) {
+        classes.push("available");
+        if (cell.type === "today") {
+          classes.push("today");
+        }
+      } else {
+        classes.push(cell.type);
+      }
+      if (isCurrent(cell)) {
+        classes.push("current");
+      }
+      if (cell.inRange && (cell.type === "normal" || cell.type === "today" || props.selectionMode === "week")) {
+        classes.push("in-range");
+        if (cell.start) {
+          classes.push("start-date");
+        }
+        if (cell.end) {
+          classes.push("end-date");
+        }
+      }
+      if (cell.disabled) {
+        classes.push("disabled");
+      }
+      if (cell.selected) {
+        classes.push("selected");
+      }
+      if (cell.customClass) {
+        classes.push(cell.customClass);
+      }
+      return classes.join(" ");
+    };
+    const getDateOfCell = (row, column) => {
+      const offsetFromStart = row * 7 + (column - (props.showWeekNumber ? 1 : 0)) - offsetDay.value;
+      return startDate.value.add(offsetFromStart, "day");
+    };
+    const handleMouseMove = (event) => {
+      if (!props.rangeState.selecting)
+        return;
+      let target = event.target;
+      if (target.tagName === "SPAN") {
+        target = target.parentNode.parentNode;
+      }
+      if (target.tagName === "DIV") {
+        target = target.parentNode;
+      }
+      if (target.tagName !== "TD")
+        return;
+      const row = target.parentNode.rowIndex - 1;
+      const column = target.cellIndex;
+      if (rows.value[row][column].disabled)
+        return;
+      if (row !== lastRow.value || column !== lastColumn.value) {
+        lastRow.value = row;
+        lastColumn.value = column;
+        ctx.emit("changerange", {
+          selecting: true,
+          endDate: getDateOfCell(row, column)
+        });
+      }
+    };
+    const handleClick = (event) => {
+      let target = event.target;
+      while (target) {
+        if (target.tagName === "TD") {
+          break;
+        }
+        target = target.parentNode;
+      }
+      if (!target || target.tagName !== "TD")
+        return;
+      const row = target.parentNode.rowIndex - 1;
+      const column = target.cellIndex;
+      const cell = rows.value[row][column];
+      if (cell.disabled || cell.type === "week")
+        return;
+      const newDate = getDateOfCell(row, column);
+      if (props.selectionMode === "range") {
+        if (!props.rangeState.selecting) {
+          ctx.emit("pick", { minDate: newDate, maxDate: null });
+          ctx.emit("select", true);
+        } else {
+          if (newDate >= props.minDate) {
+            ctx.emit("pick", { minDate: props.minDate, maxDate: newDate });
+          } else {
+            ctx.emit("pick", { minDate: newDate, maxDate: props.minDate });
+          }
+          ctx.emit("select", false);
+        }
+      } else if (props.selectionMode === "day") {
+        ctx.emit("pick", newDate);
+      } else if (props.selectionMode === "week") {
+        const weekNumber = newDate.week();
+        const value = `${newDate.year()}w${weekNumber}`;
+        ctx.emit("pick", {
+          year: newDate.year(),
+          week: weekNumber,
+          value,
+          date: newDate.startOf("week")
+        });
+      } else if (props.selectionMode === "dates") {
+        const newValue = cell.selected ? util.coerceTruthyValueToArray(props.parsedValue).filter((_) => _.valueOf() !== newDate.valueOf()) : util.coerceTruthyValueToArray(props.parsedValue).concat([newDate]);
+        ctx.emit("pick", newValue);
+      }
+    };
+    const isWeekActive = (cell) => {
+      if (props.selectionMode !== "week")
+        return false;
+      let newDate = props.date.startOf("day");
+      if (cell.type === "prev-month") {
+        newDate = newDate.subtract(1, "month");
+      }
+      if (cell.type === "next-month") {
+        newDate = newDate.add(1, "month");
+      }
+      newDate = newDate.date(parseInt(cell.text, 10));
+      if (props.parsedValue && !Array.isArray(props.parsedValue)) {
+        const dayOffset = (props.parsedValue.day() - firstDayOfWeek + 7) % 7 - 1;
+        const weekDate = props.parsedValue.subtract(dayOffset, "day");
+        return weekDate.isSame(newDate, "day");
+      }
+      return false;
+    };
+    return {
+      handleMouseMove,
+      t,
+      rows,
+      isWeekActive,
+      getCellClasses,
+      WEEKS,
+      handleClick
+    };
+  }
+});
+const _hoisted_1 = { key: 0 };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_el_date_picker_cell = vue.resolveComponent("el-date-picker-cell");
+  return vue.openBlock(), vue.createElementBlock("table", {
+    cellspacing: "0",
+    cellpadding: "0",
+    class: vue.normalizeClass(["el-date-table", { "is-week-mode": _ctx.selectionMode === "week" }]),
+    onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleClick && _ctx.handleClick(...args)),
+    onMousemove: _cache[1] || (_cache[1] = (...args) => _ctx.handleMouseMove && _ctx.handleMouseMove(...args))
+  }, [
+    vue.createElementVNode("tbody", null, [
+      vue.createElementVNode("tr", null, [
+        _ctx.showWeekNumber ? (vue.openBlock(), vue.createElementBlock("th", _hoisted_1, vue.toDisplayString(_ctx.t("el.datepicker.week")), 1)) : vue.createCommentVNode("v-if", true),
+        (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.WEEKS, (week, key) => {
+          return vue.openBlock(), vue.createElementBlock("th", { key }, vue.toDisplayString(_ctx.t("el.datepicker.weeks." + week)), 1);
+        }), 128))
+      ]),
+      (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.rows, (row, key) => {
+        return vue.openBlock(), vue.createElementBlock("tr", {
+          key,
+          class: vue.normalizeClass(["el-date-table__row", { current: _ctx.isWeekActive(row[1]) }])
+        }, [
+          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(row, (cell, key_) => {
+            return vue.openBlock(), vue.createElementBlock("td", {
+              key: key_,
+              class: vue.normalizeClass(_ctx.getCellClasses(cell))
+            }, [
+              vue.createVNode(_component_el_date_picker_cell, { cell }, null, 8, ["cell"])
+            ], 2);
+          }), 128))
+        ], 2);
+      }), 128))
+    ])
+  ], 34);
+}
+var DateTable = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["render", _sfc_render]]);
+
+exports["default"] = DateTable;
 //# sourceMappingURL=basic-date-table.js.map

package/lib/components/date-picker/src/date-picker-com/basic-date-table.js.map

@@ -1 +1 @@
-{"version":3,"file":"basic-date-table.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}
+{"version":3,"file":"basic-date-table.js","sources":["../../../../../../../packages/components/date-picker/src/date-picker-com/basic-date-table.vue"],"sourcesContent":["<template>\n  <table\n    cellspacing=\"0\"\n    cellpadding=\"0\"\n    class=\"el-date-table\"\n    :class=\"{ 'is-week-mode': selectionMode === 'week' }\"\n    @click=\"handleClick\"\n    @mousemove=\"handleMouseMove\"\n  >\n    <tbody>\n      <tr>\n        <th v-if=\"showWeekNumber\">{{ t('el.datepicker.week') }}</th>\n        <th v-for=\"(week, key) in WEEKS\" :key=\"key\">\n          {{ t('el.datepicker.weeks.' + week) }}\n        </th>\n      </tr>\n      <tr\n        v-for=\"(row, key) in rows\"\n        :key=\"key\"\n        class=\"el-date-table__row\"\n        :class=\"{ current: isWeekActive(row[1]) }\"\n      >\n        <td\n          v-for=\"(cell, key_) in row\"\n          :key=\"key_\"\n          :class=\"getCellClasses(cell)\"\n        >\n          <el-date-picker-cell :cell=\"cell\" />\n        </td>\n      </tr>\n    </tbody>\n  </table>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, computed, ref } from 'vue'\nimport dayjs from 'dayjs'\nimport { useLocale } from '@element-plus/hooks'\nimport { coerceTruthyValueToArray } from '@element-plus/utils/util'\nimport ElDatePickerCell from './basic-cell-render'\nimport type { PropType } from 'vue'\n\nimport type { Dayjs } from 'dayjs'\nimport type { DateCell } from '../date-picker.type'\n\nexport default defineComponent({\n  components: {\n    ElDatePickerCell,\n  },\n  props: {\n    date: {\n      type: Object as PropType<Dayjs>,\n    },\n    minDate: {\n      type: Object as PropType<Dayjs>,\n    },\n    maxDate: {\n      type: Object as PropType<Dayjs>,\n    },\n    parsedValue: {\n      type: [Object, Array] as PropType<Dayjs | Dayjs[]>,\n    },\n    selectionMode: {\n      type: String,\n      default: 'day',\n    },\n    showWeekNumber: {\n      type: Boolean,\n      default: false,\n    },\n    disabledDate: {\n      type: Function,\n    },\n    cellClassName: {\n      type: Function,\n    },\n    rangeState: {\n      type: Object,\n      default: () => ({\n        endDate: null,\n        selecting: false,\n      }),\n    },\n  },\n  emits: ['changerange', 'pick', 'select'],\n\n  setup(props, ctx) {\n    const { t, lang } = useLocale()\n    // data\n    const lastRow = ref(null)\n    const lastColumn = ref(null)\n    const tableRows = ref<DateCell[][]>([[], [], [], [], [], []])\n\n    // todo better way to get Day.js locale object\n    const firstDayOfWeek = (props.date as any).$locale().weekStart || 7\n    const WEEKS_CONSTANT = props.date\n      .locale('en')\n      .localeData()\n      .weekdaysShort()\n      .map((_) => _.toLowerCase())\n\n    const offsetDay = computed(() => {\n      // Sunday 7(0), cal the left and right offset days, 3217654, such as Monday is -1, the is to adjust the position of the first two rows of dates\n      return firstDayOfWeek > 3 ? 7 - firstDayOfWeek : -firstDayOfWeek\n    })\n\n    const startDate = computed(() => {\n      const startDayOfMonth = props.date.startOf('month')\n      return startDayOfMonth.subtract(startDayOfMonth.day() || 7, 'day')\n    })\n\n    const WEEKS = computed(() => {\n      return WEEKS_CONSTANT.concat(WEEKS_CONSTANT).slice(\n        firstDayOfWeek,\n        firstDayOfWeek + 7\n      )\n    })\n\n    const rows = computed(() => {\n      // TODO: refactory rows / getCellClasses\n      const startOfMonth = props.date.startOf('month')\n      const startOfMonthDay = startOfMonth.day() || 7 // day of first day\n      const dateCountOfMonth = startOfMonth.daysInMonth()\n      const dateCountOfLastMonth = startOfMonth\n        .subtract(1, 'month')\n        .daysInMonth()\n\n      const offset = offsetDay.value\n      const rows_ = tableRows.value\n      let count = 1\n\n      const selectedDate: Dayjs[] =\n        props.selectionMode === 'dates'\n          ? coerceTruthyValueToArray(props.parsedValue)\n          : []\n\n      const calNow = dayjs().locale(lang.value).startOf('day')\n\n      for (let i = 0; i < 6; i++) {\n        const row = rows_[i]\n\n        if (props.showWeekNumber) {\n          if (!row[0]) {\n            row[0] = {\n              type: 'week',\n              text: startDate.value.add(i * 7 + 1, 'day').week(),\n            }\n          }\n        }\n\n        for (let j = 0; j < 7; j++) {\n          let cell = row[props.showWeekNumber ? j + 1 : j]\n          if (!cell) {\n            cell = {\n              row: i,\n              column: j,\n              type: 'normal',\n              inRange: false,\n              start: false,\n              end: false,\n            }\n          }\n          const index = i * 7 + j\n          const calTime = startDate.value.add(index - offset, 'day')\n          cell.dayjs = calTime\n          cell.date = calTime.toDate()\n          cell.timestamp = calTime.valueOf()\n          cell.type = 'normal'\n\n          const calEndDate =\n            props.rangeState.endDate ||\n            props.maxDate ||\n            (props.rangeState.selecting && props.minDate)\n\n          cell.inRange =\n            (props.minDate &&\n              calTime.isSameOrAfter(props.minDate, 'day') &&\n              calEndDate &&\n              calTime.isSameOrBefore(calEndDate, 'day')) ||\n            (props.minDate &&\n              calTime.isSameOrBefore(props.minDate, 'day') &&\n              calEndDate &&\n              calTime.isSameOrAfter(calEndDate, 'day'))\n\n          if (props.minDate?.isSameOrAfter(calEndDate)) {\n            cell.start = calEndDate && calTime.isSame(calEndDate, 'day')\n            cell.end = props.minDate && calTime.isSame(props.minDate, 'day')\n          } else {\n            cell.start = props.minDate && calTime.isSame(props.minDate, 'day')\n            cell.end = calEndDate && calTime.isSame(calEndDate, 'day')\n          }\n\n          const isToday = calTime.isSame(calNow, 'day')\n\n          if (isToday) {\n            cell.type = 'today'\n          }\n\n          if (i >= 0 && i <= 1) {\n            const numberOfDaysFromPreviousMonth =\n              startOfMonthDay + offset < 0\n                ? 7 + startOfMonthDay + offset\n                : startOfMonthDay + offset\n\n            if (j + i * 7 >= numberOfDaysFromPreviousMonth) {\n              cell.text = count++\n            } else {\n              cell.text =\n                dateCountOfLastMonth -\n                (numberOfDaysFromPreviousMonth - (j % 7)) +\n                1 +\n                i * 7\n              cell.type = 'prev-month'\n            }\n          } else {\n            if (count <= dateCountOfMonth) {\n              cell.text = count++\n            } else {\n              cell.text = count++ - dateCountOfMonth\n              cell.type = 'next-month'\n            }\n          }\n\n          const cellDate = calTime.toDate()\n          cell.selected = selectedDate.find(\n            (_) => _.valueOf() === calTime.valueOf()\n          )\n          cell.isSelected = !!cell.selected\n          cell.isCurrent = isCurrent(cell)\n          cell.disabled = props.disabledDate && props.disabledDate(cellDate)\n          cell.customClass =\n            props.cellClassName && props.cellClassName(cellDate)\n          row[props.showWeekNumber ? j + 1 : j] = cell\n        }\n\n        if (props.selectionMode === 'week') {\n          const start = props.showWeekNumber ? 1 : 0\n          const end = props.showWeekNumber ? 7 : 6\n          const isActive = isWeekActive(row[start + 1])\n          row[start].inRange = isActive\n          row[start].start = isActive\n          row[end].inRange = isActive\n          row[end].end = isActive\n        }\n      }\n      return rows_\n    })\n\n    const isCurrent = (cell): boolean => {\n      return (\n        props.selectionMode === 'day' &&\n        (cell.type === 'normal' || cell.type === 'today') &&\n        cellMatchesDate(cell, props.parsedValue)\n      )\n    }\n\n    const cellMatchesDate = (cell, date) => {\n      if (!date) return false\n      return dayjs(date)\n        .locale(lang.value)\n        .isSame(props.date.date(Number(cell.text)), 'day')\n    }\n\n    const getCellClasses = (cell) => {\n      const classes: string[] = []\n      if ((cell.type === 'normal' || cell.type === 'today') && !cell.disabled) {\n        classes.push('available')\n        if (cell.type === 'today') {\n          classes.push('today')\n        }\n      } else {\n        classes.push(cell.type)\n      }\n\n      if (isCurrent(cell)) {\n        classes.push('current')\n      }\n\n      if (\n        cell.inRange &&\n        (cell.type === 'normal' ||\n          cell.type === 'today' ||\n          props.selectionMode === 'week')\n      ) {\n        classes.push('in-range')\n\n        if (cell.start) {\n          classes.push('start-date')\n        }\n\n        if (cell.end) {\n          classes.push('end-date')\n        }\n      }\n\n      if (cell.disabled) {\n        classes.push('disabled')\n      }\n\n      if (cell.selected) {\n        classes.push('selected')\n      }\n\n      if (cell.customClass) {\n        classes.push(cell.customClass)\n      }\n\n      return classes.join(' ')\n    }\n\n    const getDateOfCell = (row, column) => {\n      const offsetFromStart =\n        row * 7 + (column - (props.showWeekNumber ? 1 : 0)) - offsetDay.value\n      return startDate.value.add(offsetFromStart, 'day')\n    }\n\n    const handleMouseMove = (event) => {\n      if (!props.rangeState.selecting) return\n\n      let target = event.target\n      if (target.tagName === 'SPAN') {\n        target = target.parentNode.parentNode\n      }\n      if (target.tagName === 'DIV') {\n        target = target.parentNode\n      }\n      if (target.tagName !== 'TD') return\n\n      const row = target.parentNode.rowIndex - 1\n      const column = target.cellIndex\n\n      // can not select disabled date\n      if (rows.value[row][column].disabled) return\n\n      // only update rangeState when mouse moves to a new cell\n      // this avoids frequent Date object creation and improves performance\n      if (row !== lastRow.value || column !== lastColumn.value) {\n        lastRow.value = row\n        lastColumn.value = column\n        ctx.emit('changerange', {\n          selecting: true,\n          endDate: getDateOfCell(row, column),\n        })\n      }\n    }\n\n    const handleClick = (event) => {\n      let target = event.target\n\n      while (target) {\n        if (target.tagName === 'TD') {\n          break\n        }\n        target = target.parentNode\n      }\n\n      if (!target || target.tagName !== 'TD') return\n\n      const row = target.parentNode.rowIndex - 1\n      const column = target.cellIndex\n      const cell = rows.value[row][column]\n\n      if (cell.disabled || cell.type === 'week') return\n\n      const newDate = getDateOfCell(row, column)\n\n      if (props.selectionMode === 'range') {\n        if (!props.rangeState.selecting) {\n          ctx.emit('pick', { minDate: newDate, maxDate: null })\n          ctx.emit('select', true)\n        } else {\n          if (newDate >= props.minDate) {\n            ctx.emit('pick', { minDate: props.minDate, maxDate: newDate })\n          } else {\n            ctx.emit('pick', { minDate: newDate, maxDate: props.minDate })\n          }\n          ctx.emit('select', false)\n        }\n      } else if (props.selectionMode === 'day') {\n        ctx.emit('pick', newDate)\n      } else if (props.selectionMode === 'week') {\n        const weekNumber = newDate.week()\n        const value = `${newDate.year()}w${weekNumber}`\n        ctx.emit('pick', {\n          year: newDate.year(),\n          week: weekNumber,\n          value,\n          date: newDate.startOf('week'),\n        })\n      } else if (props.selectionMode === 'dates') {\n        const newValue = cell.selected\n          ? coerceTruthyValueToArray(props.parsedValue).filter(\n              (_) => _.valueOf() !== newDate.valueOf()\n            )\n          : coerceTruthyValueToArray(props.parsedValue).concat([newDate])\n        ctx.emit('pick', newValue)\n      }\n    }\n\n    const isWeekActive = (cell) => {\n      if (props.selectionMode !== 'week') return false\n      let newDate = props.date.startOf('day')\n\n      if (cell.type === 'prev-month') {\n        newDate = newDate.subtract(1, 'month')\n      }\n\n      if (cell.type === 'next-month') {\n        newDate = newDate.add(1, 'month')\n      }\n\n      newDate = newDate.date(parseInt(cell.text, 10))\n\n      if (props.parsedValue && !Array.isArray(props.parsedValue)) {\n        const dayOffset =\n          ((props.parsedValue.day() - firstDayOfWeek + 7) % 7) - 1\n        const weekDate = props.parsedValue.subtract(dayOffset, 'day')\n        return weekDate.isSame(newDate, 'day')\n      }\n      return false\n    }\n\n    return {\n      handleMouseMove,\n      t,\n      rows,\n      isWeekActive,\n      getCellClasses,\n      WEEKS,\n      handleClick,\n    }\n  },\n})\n</script>\n"],"names":["defineComponent","ElDatePickerCell","useLocale","ref","computed","coerceTruthyValueToArray","dayjs","_openBlock","_createElementBlock","_normalizeClass","_renderList","_Fragment"],"mappings":"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"}

package/lib/components/date-picker/src/date-picker-com/basic-month-table.js

@@ -2,11 +2,214 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var basicMonthTable_vue_vue_type_script_lang = require('./basic-month-table.vue_vue_type_script_lang.js');
-var basicMonthTable_vue_vue_type_template_id_2f6fcbf2_lang = require('./basic-month-table.vue_vue_type_template_id_2f6fcbf2_lang.js');
+var vue = require('vue');
+var dayjs = require('dayjs');
+require('../../../../hooks/index.js');
+require('../../../time-picker/index.js');
+var dom = require('../../../../utils/dom.js');
+var util = require('../../../../utils/util.js');
+var pluginVue_exportHelper = require('../../../../_virtual/plugin-vue_export-helper.js');
+var dateUtils = require('../../../time-picker/src/common/date-utils.js');
+var index = require('../../../../hooks/use-locale/index.js');
 
-basicMonthTable_vue_vue_type_script_lang["default"].render = basicMonthTable_vue_vue_type_template_id_2f6fcbf2_lang.render;
-basicMonthTable_vue_vue_type_script_lang["default"].__file = "packages/components/date-picker/src/date-picker-com/basic-month-table.vue";
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-exports["default"] = basicMonthTable_vue_vue_type_script_lang["default"];
+var dayjs__default = /*#__PURE__*/_interopDefaultLegacy(dayjs);
+
+const datesInMonth = (year, month, lang) => {
+  const firstDay = dayjs__default["default"]().locale(lang).startOf("month").month(month).year(year);
+  const numOfDays = firstDay.daysInMonth();
+  return dateUtils.rangeArr(numOfDays).map((n) => firstDay.add(n, "day").toDate());
+};
+const _sfc_main = vue.defineComponent({
+  props: {
+    disabledDate: {
+      type: Function
+    },
+    selectionMode: {
+      type: String,
+      default: "month"
+    },
+    minDate: {
+      type: Object
+    },
+    maxDate: {
+      type: Object
+    },
+    date: {
+      type: Object
+    },
+    parsedValue: {
+      type: Object
+    },
+    rangeState: {
+      type: Object,
+      default: () => ({
+        endDate: null,
+        selecting: false
+      })
+    }
+  },
+  emits: ["changerange", "pick", "select"],
+  setup(props, ctx) {
+    const { t, lang } = index.useLocale();
+    const months = vue.ref(props.date.locale("en").localeData().monthsShort().map((_) => _.toLowerCase()));
+    const tableRows = vue.ref([[], [], []]);
+    const lastRow = vue.ref(null);
+    const lastColumn = vue.ref(null);
+    const rows = vue.computed(() => {
+      const rows2 = tableRows.value;
+      const now = dayjs__default["default"]().locale(lang.value).startOf("month");
+      for (let i = 0; i < 3; i++) {
+        const row = rows2[i];
+        for (let j = 0; j < 4; j++) {
+          let cell = row[j];
+          if (!cell) {
+            cell = {
+              row: i,
+              column: j,
+              type: "normal",
+              inRange: false,
+              start: false,
+              end: false
+            };
+          }
+          cell.type = "normal";
+          const index = i * 4 + j;
+          const calTime = props.date.startOf("year").month(index);
+          const calEndDate = props.rangeState.endDate || props.maxDate || props.rangeState.selecting && props.minDate;
+          cell.inRange = props.minDate && calTime.isSameOrAfter(props.minDate, "month") && calEndDate && calTime.isSameOrBefore(calEndDate, "month") || props.minDate && calTime.isSameOrBefore(props.minDate, "month") && calEndDate && calTime.isSameOrAfter(calEndDate, "month");
+          if (props.minDate?.isSameOrAfter(calEndDate)) {
+            cell.start = calEndDate && calTime.isSame(calEndDate, "month");
+            cell.end = props.minDate && calTime.isSame(props.minDate, "month");
+          } else {
+            cell.start = props.minDate && calTime.isSame(props.minDate, "month");
+            cell.end = calEndDate && calTime.isSame(calEndDate, "month");
+          }
+          const isToday = now.isSame(calTime);
+          if (isToday) {
+            cell.type = "today";
+          }
+          cell.text = index;
+          const cellDate = calTime.toDate();
+          cell.disabled = props.disabledDate && props.disabledDate(cellDate);
+          row[j] = cell;
+        }
+      }
+      return rows2;
+    });
+    const getCellStyle = (cell) => {
+      const style = {};
+      const year = props.date.year();
+      const today = new Date();
+      const month = cell.text;
+      style.disabled = props.disabledDate ? datesInMonth(year, month, lang.value).every(props.disabledDate) : false;
+      style.current = util.coerceTruthyValueToArray(props.parsedValue).findIndex((date) => date.year() === year && date.month() === month) >= 0;
+      style.today = today.getFullYear() === year && today.getMonth() === month;
+      if (cell.inRange) {
+        style["in-range"] = true;
+        if (cell.start) {
+          style["start-date"] = true;
+        }
+        if (cell.end) {
+          style["end-date"] = true;
+        }
+      }
+      return style;
+    };
+    const handleMouseMove = (event) => {
+      if (!props.rangeState.selecting)
+        return;
+      let target = event.target;
+      if (target.tagName === "A") {
+        target = target.parentNode.parentNode;
+      }
+      if (target.tagName === "DIV") {
+        target = target.parentNode;
+      }
+      if (target.tagName !== "TD")
+        return;
+      const row = target.parentNode.rowIndex;
+      const column = target.cellIndex;
+      if (rows.value[row][column].disabled)
+        return;
+      if (row !== lastRow.value || column !== lastColumn.value) {
+        lastRow.value = row;
+        lastColumn.value = column;
+        ctx.emit("changerange", {
+          selecting: true,
+          endDate: props.date.startOf("year").month(row * 4 + column)
+        });
+      }
+    };
+    const handleMonthTableClick = (event) => {
+      let target = event.target;
+      if (target.tagName === "A") {
+        target = target.parentNode.parentNode;
+      }
+      if (target.tagName === "DIV") {
+        target = target.parentNode;
+      }
+      if (target.tagName !== "TD")
+        return;
+      if (dom.hasClass(target, "disabled"))
+        return;
+      const column = target.cellIndex;
+      const row = target.parentNode.rowIndex;
+      const month = row * 4 + column;
+      const newDate = props.date.startOf("year").month(month);
+      if (props.selectionMode === "range") {
+        if (!props.rangeState.selecting) {
+          ctx.emit("pick", { minDate: newDate, maxDate: null });
+          ctx.emit("select", true);
+        } else {
+          if (newDate >= props.minDate) {
+            ctx.emit("pick", { minDate: props.minDate, maxDate: newDate });
+          } else {
+            ctx.emit("pick", { minDate: newDate, maxDate: props.minDate });
+          }
+          ctx.emit("select", false);
+        }
+      } else {
+        ctx.emit("pick", month);
+      }
+    };
+    return {
+      handleMouseMove,
+      handleMonthTableClick,
+      rows,
+      getCellStyle,
+      t,
+      months
+    };
+  }
+});
+const _hoisted_1 = { class: "cell" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return vue.openBlock(), vue.createElementBlock("table", {
+    class: "el-month-table",
+    onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleMonthTableClick && _ctx.handleMonthTableClick(...args)),
+    onMousemove: _cache[1] || (_cache[1] = (...args) => _ctx.handleMouseMove && _ctx.handleMouseMove(...args))
+  }, [
+    vue.createElementVNode("tbody", null, [
+      (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.rows, (row, key) => {
+        return vue.openBlock(), vue.createElementBlock("tr", { key }, [
+          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(row, (cell, key_) => {
+            return vue.openBlock(), vue.createElementBlock("td", {
+              key: key_,
+              class: vue.normalizeClass(_ctx.getCellStyle(cell))
+            }, [
+              vue.createElementVNode("div", null, [
+                vue.createElementVNode("a", _hoisted_1, vue.toDisplayString(_ctx.t("el.datepicker.months." + _ctx.months[cell.text])), 1)
+              ])
+            ], 2);
+          }), 128))
+        ]);
+      }), 128))
+    ])
+  ], 32);
+}
+var MonthTable = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["render", _sfc_render]]);
+
+exports["default"] = MonthTable;
 //# sourceMappingURL=basic-month-table.js.map

package/lib/components/date-picker/src/date-picker-com/basic-month-table.js.map

@@ -1 +1 @@
-{"version":3,"file":"basic-month-table.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}
+{"version":3,"file":"basic-month-table.js","sources":["../../../../../../../packages/components/date-picker/src/date-picker-com/basic-month-table.vue"],"sourcesContent":["<template>\n  <table\n    class=\"el-month-table\"\n    @click=\"handleMonthTableClick\"\n    @mousemove=\"handleMouseMove\"\n  >\n    <tbody>\n      <tr v-for=\"(row, key) in rows\" :key=\"key\">\n        <td v-for=\"(cell, key_) in row\" :key=\"key_\" :class=\"getCellStyle(cell)\">\n          <div>\n            <a class=\"cell\">{{\n              t('el.datepicker.months.' + months[cell.text])\n            }}</a>\n          </div>\n        </td>\n      </tr>\n    </tbody>\n  </table>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, computed, ref } from 'vue'\nimport dayjs from 'dayjs'\nimport { useLocale } from '@element-plus/hooks'\nimport { rangeArr } from '@element-plus/components/time-picker'\nimport { hasClass } from '@element-plus/utils/dom'\nimport { coerceTruthyValueToArray } from '@element-plus/utils/util'\n\nimport type { PropType } from 'vue'\nimport type { Dayjs } from 'dayjs'\n\nconst datesInMonth = (year: number, month: number, lang: string) => {\n  const firstDay = dayjs().locale(lang).startOf('month').month(month).year(year)\n  const numOfDays = firstDay.daysInMonth()\n  return rangeArr(numOfDays).map((n) => firstDay.add(n, 'day').toDate())\n}\n\nexport default defineComponent({\n  props: {\n    disabledDate: {\n      type: Function as PropType<(_: Date) => void>,\n    },\n    selectionMode: {\n      type: String,\n      default: 'month',\n    },\n    minDate: {\n      type: Object as PropType<Dayjs>,\n    },\n    maxDate: {\n      type: Object as PropType<Dayjs>,\n    },\n    date: {\n      type: Object as PropType<Dayjs>,\n    },\n    parsedValue: {\n      type: Object as PropType<Dayjs>,\n    },\n    rangeState: {\n      type: Object,\n      default: () => ({\n        endDate: null,\n        selecting: false,\n      }),\n    },\n  },\n\n  emits: ['changerange', 'pick', 'select'],\n\n  setup(props, ctx) {\n    const { t, lang } = useLocale()\n    const months = ref(\n      props.date\n        .locale('en')\n        .localeData()\n        .monthsShort()\n        .map((_) => _.toLowerCase())\n    )\n    const tableRows = ref([[], [], []])\n    const lastRow = ref(null)\n    const lastColumn = ref(null)\n    const rows = computed(() => {\n      // TODO: refactory rows / getCellClasses\n      const rows = tableRows.value\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          let cell = row[j]\n          if (!cell) {\n            cell = {\n              row: i,\n              column: j,\n              type: 'normal',\n              inRange: false,\n              start: false,\n              end: false,\n            }\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\n          cell.inRange =\n            (props.minDate &&\n              calTime.isSameOrAfter(props.minDate, 'month') &&\n              calEndDate &&\n              calTime.isSameOrBefore(calEndDate, 'month')) ||\n            (props.minDate &&\n              calTime.isSameOrBefore(props.minDate, 'month') &&\n              calEndDate &&\n              calTime.isSameOrAfter(calEndDate, 'month'))\n\n          if (props.minDate?.isSameOrAfter(calEndDate)) {\n            cell.start = calEndDate && calTime.isSame(calEndDate, 'month')\n            cell.end = props.minDate && calTime.isSame(props.minDate, 'month')\n          } else {\n            cell.start = props.minDate && calTime.isSame(props.minDate, 'month')\n            cell.end = calEndDate && calTime.isSame(calEndDate, 'month')\n          }\n\n          const isToday = now.isSame(calTime)\n\n          if (isToday) {\n            cell.type = 'today'\n          }\n          cell.text = index\n          const cellDate = calTime.toDate()\n          cell.disabled = props.disabledDate && props.disabledDate(cellDate)\n          row[j] = cell\n        }\n      }\n      return rows\n    })\n    const getCellStyle = (cell) => {\n      const style = {} as any\n      const year = props.date.year()\n      const today = new Date()\n      const month = cell.text\n\n      style.disabled = props.disabledDate\n        ? datesInMonth(year, month, lang.value).every(props.disabledDate)\n        : false\n      style.current =\n        coerceTruthyValueToArray(props.parsedValue).findIndex(\n          (date) => date.year() === year && date.month() === month\n        ) >= 0\n      style.today = today.getFullYear() === year && today.getMonth() === month\n\n      if (cell.inRange) {\n        style['in-range'] = true\n\n        if (cell.start) {\n          style['start-date'] = true\n        }\n\n        if (cell.end) {\n          style['end-date'] = true\n        }\n      }\n      return style\n    }\n\n    const handleMouseMove = (event) => {\n      if (!props.rangeState.selecting) return\n\n      let target = event.target\n      if (target.tagName === 'A') {\n        target = target.parentNode.parentNode\n      }\n      if (target.tagName === 'DIV') {\n        target = target.parentNode\n      }\n      if (target.tagName !== 'TD') return\n\n      const row = target.parentNode.rowIndex\n      const column = target.cellIndex\n      // can not select disabled date\n      if (rows.value[row][column].disabled) return\n\n      // only update rangeState when mouse moves to a new cell\n      // this avoids frequent Date object creation and improves performance\n      if (row !== lastRow.value || column !== lastColumn.value) {\n        lastRow.value = row\n        lastColumn.value = column\n        ctx.emit('changerange', {\n          selecting: true,\n          endDate: props.date.startOf('year').month(row * 4 + column),\n        })\n      }\n    }\n    const handleMonthTableClick = (event) => {\n      let target = event.target\n      if (target.tagName === 'A') {\n        target = target.parentNode.parentNode\n      }\n      if (target.tagName === 'DIV') {\n        target = target.parentNode\n      }\n      if (target.tagName !== 'TD') return\n      if (hasClass(target, 'disabled')) return\n      const column = target.cellIndex\n      const row = target.parentNode.rowIndex\n      const month = row * 4 + column\n      const newDate = props.date.startOf('year').month(month)\n      if (props.selectionMode === 'range') {\n        if (!props.rangeState.selecting) {\n          ctx.emit('pick', { minDate: newDate, maxDate: null })\n          ctx.emit('select', true)\n        } else {\n          if (newDate >= props.minDate) {\n            ctx.emit('pick', { minDate: props.minDate, maxDate: newDate })\n          } else {\n            ctx.emit('pick', { minDate: newDate, maxDate: props.minDate })\n          }\n          ctx.emit('select', false)\n        }\n      } else {\n        ctx.emit('pick', month)\n      }\n    }\n\n    return {\n      handleMouseMove,\n      handleMonthTableClick,\n      rows,\n      getCellStyle,\n      t,\n      months,\n    }\n  },\n})\n</script>\n"],"names":["dayjs","rangeArr","defineComponent","useLocale","ref","computed","coerceTruthyValueToArray","hasClass","_openBlock","_createElementBlock","_renderList","_Fragment"],"mappings":"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"}