@element-plus/nightly 0.0.20240807 → 0.0.20240808

package/es/components/date-picker/src/date-picker-com/basic-year-table.mjs

@@ -12,13 +12,12 @@ import { castArray } from '../../../../utils/arrays.mjs';
 import { hasClass } from '../../../../utils/dom/style.mjs';
 
 const _hoisted_1 = ["aria-label"];
-const _hoisted_2 = ["aria-selected", "tabindex", "onKeydown"];
+const _hoisted_2 = ["aria-selected", "aria-label", "tabindex", "onKeydown"];
 const _hoisted_3 = { class: "cell" };
-const _hoisted_4 = { key: 1 };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "basic-year-table",
   props: basicYearTableProps,
-  emits: ["pick"],
+  emits: ["changerange", "pick", "select"],
   setup(__props, { expose, emit }) {
     const props = __props;
     const datesInYear = (year, lang2) => {
@@ -34,38 +33,132 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const startYear = computed(() => {
       return Math.floor(props.date.year() / 10) * 10;
     });
+    const tableRows = ref([[], [], []]);
+    const lastRow = ref();
+    const lastColumn = ref();
+    const rows = computed(() => {
+      var _a;
+      const rows2 = tableRows.value;
+      const now = dayjs().locale(lang.value).startOf("year");
+      for (let i = 0; i < 3; i++) {
+        const row = rows2[i];
+        for (let j = 0; j < 4; j++) {
+          if (i * 4 + j >= 10) {
+            break;
+          }
+          let cell = row[j];
+          if (!cell) {
+            cell = {
+              row: i,
+              column: j,
+              type: "normal",
+              inRange: false,
+              start: false,
+              end: false,
+              text: -1,
+              disabled: false
+            };
+          }
+          cell.type = "normal";
+          const index = i * 4 + j + startYear.value;
+          const calTime = dayjs().year(index);
+          const calEndDate = props.rangeState.endDate || props.maxDate || props.rangeState.selecting && props.minDate || null;
+          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"));
+          if ((_a = props.minDate) == null ? void 0 : _a.isSameOrAfter(calEndDate)) {
+            cell.start = !!(calEndDate && calTime.isSame(calEndDate, "year"));
+            cell.end = !!(props.minDate && calTime.isSame(props.minDate, "year"));
+          } else {
+            cell.start = !!(props.minDate && calTime.isSame(props.minDate, "year"));
+            cell.end = !!(calEndDate && calTime.isSame(calEndDate, "year"));
+          }
+          const isToday = now.isSame(calTime);
+          if (isToday) {
+            cell.type = "today";
+          }
+          cell.text = index;
+          const cellDate = calTime.toDate();
+          cell.disabled = props.disabledDate && props.disabledDate(cellDate) || false;
+          row[j] = cell;
+        }
+      }
+      return rows2;
+    });
     const focus = () => {
       var _a;
       (_a = currentCellRef.value) == null ? void 0 : _a.focus();
     };
-    const getCellKls = (year) => {
+    const getCellKls = (cell) => {
       const kls = {};
       const today = dayjs().locale(lang.value);
+      const year = cell.text;
       kls.disabled = props.disabledDate ? datesInYear(year, lang.value).every(props.disabledDate) : false;
-      kls.current = castArray(props.parsedValue).findIndex((d) => d.year() === year) >= 0;
       kls.today = today.year() === year;
+      kls.current = castArray(props.parsedValue).findIndex((d) => d.year() === year) >= 0;
+      if (cell.inRange) {
+        kls["in-range"] = true;
+        if (cell.start) {
+          kls["start-date"] = true;
+        }
+        if (cell.end) {
+          kls["end-date"] = true;
+        }
+      }
       return kls;
     };
-    const isSelectedCell = (year) => {
-      return year === startYear.value && props.date.year() < startYear.value && props.date.year() > startYear.value + 9 || castArray(props.date).findIndex((date) => date.year() === year) >= 0 || castArray(props.parsedValue).findIndex((date) => (date == null ? void 0 : date.year()) === year) >= 0;
+    const isSelectedCell = (cell) => {
+      const year = cell.text;
+      return castArray(props.date).findIndex((date) => date.year() === year) >= 0;
     };
     const handleYearTableClick = (event) => {
-      const clickTarget = event.target;
-      const target = clickTarget.closest("td");
-      if (target && target.textContent) {
-        if (hasClass(target, "disabled"))
-          return;
-        const year = target.textContent || target.innerText;
-        if (props.selectionMode === "years") {
-          if (event.type === "keydown") {
-            emit("pick", castArray(props.parsedValue), false);
-            return;
-          }
-          const newValue = hasClass(target, "current") ? castArray(props.parsedValue).filter((d) => (d == null ? void 0 : d.year()) !== Number(year)) : castArray(props.parsedValue).concat([dayjs(year)]);
-          emit("pick", newValue);
+      var _a;
+      const target = (_a = event.target) == null ? void 0 : _a.closest("td");
+      if (!target || !target.textContent || hasClass(target, "disabled"))
+        return;
+      const column = target.cellIndex;
+      const row = target.parentNode.rowIndex;
+      const selectedYear = row * 4 + column + startYear.value;
+      const newDate = dayjs().year(selectedYear);
+      if (props.selectionMode === "range") {
+        if (!props.rangeState.selecting) {
+          emit("pick", { minDate: newDate, maxDate: null });
+          emit("select", true);
         } else {
-          emit("pick", Number(year));
+          if (props.minDate && newDate >= props.minDate) {
+            emit("pick", { minDate: props.minDate, maxDate: newDate });
+          } else {
+            emit("pick", { minDate: newDate, maxDate: props.minDate });
+          }
+          emit("select", false);
         }
+      } else if (props.selectionMode === "years") {
+        if (event.type === "keydown") {
+          emit("pick", castArray(props.parsedValue), false);
+          return;
+        }
+        const newValue = hasClass(target, "current") ? castArray(props.parsedValue).filter((d) => (d == null ? void 0 : d.year()) !== selectedYear) : castArray(props.parsedValue).concat([newDate]);
+        emit("pick", newValue);
+      } else {
+        emit("pick", selectedYear);
+      }
+    };
+    const handleMouseMove = (event) => {
+      var _a;
+      if (!props.rangeState.selecting)
+        return;
+      const target = (_a = event.target) == null ? void 0 : _a.closest("td");
+      if (!target)
+        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;
+        emit("changerange", {
+          selecting: true,
+          endDate: dayjs().year(startYear.value).add(row * 4 + column, "year")
+        });
       }
     };
     watch(() => props.date, async () => {
@@ -83,40 +176,38 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         role: "grid",
         "aria-label": unref(t)("el.datepicker.yearTablePrompt"),
         class: normalizeClass(unref(ns).b()),
-        onClick: handleYearTableClick
+        onClick: handleYearTableClick,
+        onMousemove: handleMouseMove
       }, [
         createElementVNode("tbody", {
           ref_key: "tbodyRef",
           ref: tbodyRef
         }, [
-          (openBlock(), createElementBlock(Fragment, null, renderList(3, (_, i) => {
-            return createElementVNode("tr", { key: i }, [
-              (openBlock(), createElementBlock(Fragment, null, renderList(4, (__, j) => {
-                return openBlock(), createElementBlock(Fragment, {
-                  key: i + "_" + j
+          (openBlock(true), createElementBlock(Fragment, null, renderList(unref(rows), (row, rowKey) => {
+            return openBlock(), createElementBlock("tr", { key: rowKey }, [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(row, (cell, cellKey) => {
+                return openBlock(), createElementBlock("td", {
+                  key: `${rowKey}_${cellKey}`,
+                  ref_for: true,
+                  ref: (el) => isSelectedCell(cell) && (currentCellRef.value = el),
+                  class: normalizeClass(["available", getCellKls(cell)]),
+                  "aria-selected": isSelectedCell(cell),
+                  "aria-label": String(cell.text),
+                  tabindex: isSelectedCell(cell) ? 0 : -1,
+                  onKeydown: [
+                    withKeys(withModifiers(handleYearTableClick, ["prevent", "stop"]), ["space"]),
+                    withKeys(withModifiers(handleYearTableClick, ["prevent", "stop"]), ["enter"])
+                  ]
                 }, [
-                  i * 4 + j < 10 ? (openBlock(), createElementBlock("td", {
-                    key: 0,
-                    ref_for: true,
-                    ref: (el) => isSelectedCell(unref(startYear) + i * 4 + j) && (currentCellRef.value = el),
-                    class: normalizeClass(["available", getCellKls(unref(startYear) + i * 4 + j)]),
-                    "aria-selected": `${isSelectedCell(unref(startYear) + i * 4 + j)}`,
-                    tabindex: isSelectedCell(unref(startYear) + i * 4 + j) ? 0 : -1,
-                    onKeydown: [
-                      withKeys(withModifiers(handleYearTableClick, ["prevent", "stop"]), ["space"]),
-                      withKeys(withModifiers(handleYearTableClick, ["prevent", "stop"]), ["enter"])
-                    ]
-                  }, [
-                    createElementVNode("div", null, [
-                      createElementVNode("span", _hoisted_3, toDisplayString(unref(startYear) + i * 4 + j), 1)
-                    ])
-                  ], 42, _hoisted_2)) : (openBlock(), createElementBlock("td", _hoisted_4))
-                ], 64);
-              }), 64))
+                  createElementVNode("div", null, [
+                    createElementVNode("span", _hoisted_3, toDisplayString(cell.text), 1)
+                  ])
+                ], 42, _hoisted_2);
+              }), 128))
             ]);
-          }), 64))
+          }), 128))
         ], 512)
-      ], 10, _hoisted_1);
+      ], 42, _hoisted_1);
     };
   }
 });

package/es/components/date-picker/src/date-picker-com/basic-year-table.mjs.map

@@ -1 +1 @@
-{"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            <div>\n              <span class=\"cell\">{{ startYear + i * 4 + j }}</span>\n            </div>\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    castArray(props.parsedValue).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    if (props.selectionMode === 'years') {\n      if (event.type === 'keydown') {\n        emit('pick', castArray(props.parsedValue), false)\n        return\n      }\n      const newValue = hasClass(target, 'current')\n        ? castArray(props.parsedValue).filter((d) => d?.year() !== Number(year))\n        : castArray(props.parsedValue).concat([dayjs(year)])\n      emit('pick', newValue)\n    } else {\n      emit('pick', Number(year))\n    }\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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"}
+{"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    @mousemove=\"handleMouseMove\"\n  >\n    <tbody ref=\"tbodyRef\">\n      <tr v-for=\"(row, rowKey) in rows\" :key=\"rowKey\">\n        <td\n          v-for=\"(cell, cellKey) in row\"\n          :key=\"`${rowKey}_${cellKey}`\"\n          :ref=\"(el) => isSelectedCell(cell) && (currentCellRef = el as HTMLElement)\"\n          class=\"available\"\n          :class=\"getCellKls(cell)\"\n          :aria-selected=\"isSelectedCell(cell)\"\n          :aria-label=\"String(cell.text)\"\n          :tabindex=\"isSelectedCell(cell) ? 0 : -1\"\n          @keydown.space.prevent.stop=\"handleYearTableClick\"\n          @keydown.enter.prevent.stop=\"handleYearTableClick\"\n        >\n          <div>\n            <span class=\"cell\">{{ cell.text }}</span>\n          </div>\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 { rangeArr } from '@element-plus/components/time-picker'\nimport { castArray, hasClass } from '@element-plus/utils'\nimport { basicYearTableProps } from '../props/basic-year-table'\n\ntype YearCell = {\n  column: number\n  row: number\n  disabled: boolean\n  start: boolean\n  end: boolean\n  text: number\n  type: 'normal' | 'today'\n  inRange: boolean\n}\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(['changerange', 'pick', 'select'])\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 tableRows = ref<YearCell[][]>([[], [], []])\nconst lastRow = ref<number>()\nconst lastColumn = ref<number>()\nconst rows = computed(() => {\n  const rows = tableRows.value\n  const now = dayjs().locale(lang.value).startOf('year')\n\n  for (let i = 0; i < 3; i++) {\n    const row = rows[i]\n    for (let j = 0; j < 4; j++) {\n      if (i * 4 + j >= 10) {\n        break\n      }\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          text: -1,\n          disabled: false,\n        }\n      }\n      cell.type = 'normal'\n      const index = i * 4 + j + startYear.value\n      const calTime = dayjs().year(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, 'year') &&\n          calEndDate &&\n          calTime.isSameOrBefore(calEndDate, 'year')\n        ) ||\n        !!(\n          props.minDate &&\n          calTime.isSameOrBefore(props.minDate, 'year') &&\n          calEndDate &&\n          calTime.isSameOrAfter(calEndDate, 'year')\n        )\n\n      if (props.minDate?.isSameOrAfter(calEndDate)) {\n        cell.start = !!(calEndDate && calTime.isSame(calEndDate, 'year'))\n        cell.end = !!(props.minDate && calTime.isSame(props.minDate, 'year'))\n      } else {\n        cell.start = !!(props.minDate && calTime.isSame(props.minDate, 'year'))\n        cell.end = !!(calEndDate && calTime.isSame(calEndDate, 'year'))\n      }\n\n      const isToday = now.isSame(calTime)\n      if (isToday) {\n        cell.type = 'today'\n      }\n      cell.text = index\n      const cellDate = calTime.toDate()\n      cell.disabled =\n        (props.disabledDate && props.disabledDate(cellDate)) || false\n      row[j] = cell\n    }\n  }\n  return rows\n})\n\nconst focus = () => {\n  currentCellRef.value?.focus()\n}\n\nconst getCellKls = (cell: YearCell) => {\n  const kls: Record<string, boolean> = {}\n  const today = dayjs().locale(lang.value)\n  const year = cell.text\n\n  kls.disabled = props.disabledDate\n    ? datesInYear(year, lang.value).every(props.disabledDate)\n    : false\n\n  kls.today = today.year() === year\n  kls.current =\n    castArray(props.parsedValue).findIndex((d) => d!.year() === year) >= 0\n\n  if (cell.inRange) {\n    kls['in-range'] = true\n\n    if (cell.start) {\n      kls['start-date'] = true\n    }\n\n    if (cell.end) {\n      kls['end-date'] = true\n    }\n  }\n  return kls\n}\n\nconst isSelectedCell = (cell: YearCell) => {\n  const year = cell.text\n  return castArray(props.date).findIndex((date) => date.year() === year) >= 0\n}\n\nconst handleYearTableClick = (event: MouseEvent | KeyboardEvent) => {\n  const target = (event.target as HTMLElement)?.closest(\n    'td'\n  ) as HTMLTableCellElement\n  if (!target || !target.textContent || hasClass(target, 'disabled')) return\n\n  const column = target.cellIndex\n  const row = (target.parentNode as HTMLTableRowElement).rowIndex\n  const selectedYear = row * 4 + column + startYear.value\n  const newDate = dayjs().year(selectedYear)\n  if (props.selectionMode === 'range') {\n    if (!props.rangeState.selecting) {\n      emit('pick', { minDate: newDate, maxDate: null })\n      emit('select', true)\n    } else {\n      if (props.minDate && newDate >= props.minDate) {\n        emit('pick', { minDate: props.minDate, maxDate: newDate })\n      } else {\n        emit('pick', { minDate: newDate, maxDate: props.minDate })\n      }\n      emit('select', false)\n    }\n  } else if (props.selectionMode === 'years') {\n    if (event.type === 'keydown') {\n      emit('pick', castArray(props.parsedValue), false)\n      return\n    }\n    const newValue = hasClass(target, 'current')\n      ? castArray(props.parsedValue).filter((d) => d?.year() !== selectedYear)\n      : castArray(props.parsedValue).concat([newDate])\n    emit('pick', newValue)\n  } else {\n    emit('pick', selectedYear)\n  }\n}\n\nconst handleMouseMove = (event: MouseEvent) => {\n  if (!props.rangeState.selecting) return\n  const target = (event.target as HTMLElement)?.closest(\n    'td'\n  ) as HTMLTableCellElement\n  if (!target) return\n\n  const row = (target.parentNode as HTMLTableRowElement).rowIndex\n  const column = (target as HTMLTableCellElement).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    emit('changerange', {\n      selecting: true,\n      endDate: dayjs()\n        .year(startYear.value)\n        .add(row * 4 + column, 'year'),\n    })\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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"}

package/es/components/date-picker/src/date-picker-com/basic-year-table.vue.d.ts

@@ -1,13 +1,26 @@
 import dayjs from 'dayjs';
 declare const _default: import("vue").DefineComponent<{
+    readonly selectionMode: import("@element-plus/nightly/es/utils").EpPropFinalized<StringConstructor, string, unknown, string, boolean>;
+    readonly disabledDate: {
+        readonly type: import("vue").PropType<(date: Date) => boolean>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
     readonly date: {
         readonly type: import("vue").PropType<dayjs.Dayjs>;
         readonly required: true;
         readonly validator: ((val: unknown) => boolean) | undefined;
         __epPropKey: true;
     };
-    readonly disabledDate: {
-        readonly type: import("vue").PropType<(date: Date) => boolean>;
+    readonly minDate: {
+        readonly type: import("vue").PropType<import("@element-plus/nightly/es/utils").EpPropMergeType<(new (...args: any[]) => dayjs.Dayjs) | (() => dayjs.Dayjs | null) | ((new (...args: any[]) => dayjs.Dayjs) | (() => dayjs.Dayjs | null))[], unknown, unknown>>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    readonly maxDate: {
+        readonly type: import("vue").PropType<import("@element-plus/nightly/es/utils").EpPropMergeType<(new (...args: any[]) => dayjs.Dayjs) | (() => dayjs.Dayjs | null) | ((new (...args: any[]) => dayjs.Dayjs) | (() => dayjs.Dayjs | null))[], unknown, unknown>>;
         readonly required: false;
         readonly validator: ((val: unknown) => boolean) | undefined;
         __epPropKey: true;
@@ -18,23 +31,41 @@ declare const _default: import("vue").DefineComponent<{
         readonly validator: ((val: unknown) => boolean) | undefined;
         __epPropKey: true;
     };
-    readonly selectionMode: import("@element-plus/nightly/es/utils").EpPropFinalized<StringConstructor, string, unknown, string, boolean>;
+    readonly rangeState: import("@element-plus/nightly/es/utils").EpPropFinalized<(new (...args: any[]) => import("../props/shared").RangeState) | (() => import("../props/shared").RangeState) | ((new (...args: any[]) => import("../props/shared").RangeState) | (() => import("../props/shared").RangeState))[], unknown, unknown, () => {
+        endDate: null;
+        selecting: boolean;
+    }, boolean>;
 }, {
     /**
      * @description focus on the current cell
      */
     focus: () => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (...args: any[]) => void;
     pick: (...args: any[]) => void;
+    changerange: (...args: any[]) => void;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    readonly selectionMode: import("@element-plus/nightly/es/utils").EpPropFinalized<StringConstructor, string, unknown, string, boolean>;
+    readonly disabledDate: {
+        readonly type: import("vue").PropType<(date: Date) => boolean>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
     readonly date: {
         readonly type: import("vue").PropType<dayjs.Dayjs>;
         readonly required: true;
         readonly validator: ((val: unknown) => boolean) | undefined;
         __epPropKey: true;
     };
-    readonly disabledDate: {
-        readonly type: import("vue").PropType<(date: Date) => boolean>;
+    readonly minDate: {
+        readonly type: import("vue").PropType<import("@element-plus/nightly/es/utils").EpPropMergeType<(new (...args: any[]) => dayjs.Dayjs) | (() => dayjs.Dayjs | null) | ((new (...args: any[]) => dayjs.Dayjs) | (() => dayjs.Dayjs | null))[], unknown, unknown>>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    readonly maxDate: {
+        readonly type: import("vue").PropType<import("@element-plus/nightly/es/utils").EpPropMergeType<(new (...args: any[]) => dayjs.Dayjs) | (() => dayjs.Dayjs | null) | ((new (...args: any[]) => dayjs.Dayjs) | (() => dayjs.Dayjs | null))[], unknown, unknown>>;
         readonly required: false;
         readonly validator: ((val: unknown) => boolean) | undefined;
         __epPropKey: true;
@@ -45,10 +76,16 @@ declare const _default: import("vue").DefineComponent<{
         readonly validator: ((val: unknown) => boolean) | undefined;
         __epPropKey: true;
     };
-    readonly selectionMode: import("@element-plus/nightly/es/utils").EpPropFinalized<StringConstructor, string, unknown, string, boolean>;
+    readonly rangeState: import("@element-plus/nightly/es/utils").EpPropFinalized<(new (...args: any[]) => import("../props/shared").RangeState) | (() => import("../props/shared").RangeState) | ((new (...args: any[]) => import("../props/shared").RangeState) | (() => import("../props/shared").RangeState))[], unknown, unknown, () => {
+        endDate: null;
+        selecting: boolean;
+    }, boolean>;
 }>> & {
+    onSelect?: ((...args: any[]) => any) | undefined;
     onPick?: ((...args: any[]) => any) | undefined;
+    onChangerange?: ((...args: any[]) => any) | undefined;
 }, {
+    readonly rangeState: import("../props/shared").RangeState;
     readonly selectionMode: string;
 }>;
 export default _default;

package/es/components/date-picker/src/date-picker-com/panel-date-pick.vue.d.ts

@@ -14,7 +14,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     };
     readonly format: import("@element-plus/nightly/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
     readonly type: {
-        readonly type: import("vue").PropType<import("@element-plus/nightly/es/utils").EpPropMergeType<(new (...args: any[]) => ("year" | "years" | "month" | "months" | "date" | "dates" | "week" | "datetime" | "datetimerange" | "daterange" | "monthrange") & {}) | (() => "year" | "years" | "month" | "months" | "date" | "dates" | "week" | "datetime" | "datetimerange" | "daterange" | "monthrange") | ((new (...args: any[]) => ("year" | "years" | "month" | "months" | "date" | "dates" | "week" | "datetime" | "datetimerange" | "daterange" | "monthrange") & {}) | (() => "year" | "years" | "month" | "months" | "date" | "dates" | "week" | "datetime" | "datetimerange" | "daterange" | "monthrange"))[], "year" | "years" | "month" | "months" | "date" | "dates" | "week" | "datetime" | "datetimerange" | "daterange" | "monthrange", unknown>>;
+        readonly type: import("vue").PropType<import("@element-plus/nightly/es/utils").EpPropMergeType<(new (...args: any[]) => ("year" | "years" | "month" | "months" | "date" | "dates" | "week" | "datetime" | "datetimerange" | "daterange" | "monthrange" | "yearrange") & {}) | (() => "year" | "years" | "month" | "months" | "date" | "dates" | "week" | "datetime" | "datetimerange" | "daterange" | "monthrange" | "yearrange") | ((new (...args: any[]) => ("year" | "years" | "month" | "months" | "date" | "dates" | "week" | "datetime" | "datetimerange" | "daterange" | "monthrange" | "yearrange") & {}) | (() => "year" | "years" | "month" | "months" | "date" | "dates" | "week" | "datetime" | "datetimerange" | "daterange" | "monthrange" | "yearrange"))[], "year" | "years" | "month" | "months" | "date" | "dates" | "week" | "datetime" | "datetimerange" | "daterange" | "monthrange" | "yearrange", unknown>>;
         readonly required: true;
         readonly validator: ((val: unknown) => boolean) | undefined;
         __epPropKey: true;
@@ -40,7 +40,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     };
     readonly format: import("@element-plus/nightly/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
     readonly type: {
-        readonly type: import("vue").PropType<import("@element-plus/nightly/es/utils").EpPropMergeType<(new (...args: any[]) => ("year" | "years" | "month" | "months" | "date" | "dates" | "week" | "datetime" | "datetimerange" | "daterange" | "monthrange") & {}) | (() => "year" | "years" | "month" | "months" | "date" | "dates" | "week" | "datetime" | "datetimerange" | "daterange" | "monthrange") | ((new (...args: any[]) => ("year" | "years" | "month" | "months" | "date" | "dates" | "week" | "datetime" | "datetimerange" | "daterange" | "monthrange") & {}) | (() => "year" | "years" | "month" | "months" | "date" | "dates" | "week" | "datetime" | "datetimerange" | "daterange" | "monthrange"))[], "year" | "years" | "month" | "months" | "date" | "dates" | "week" | "datetime" | "datetimerange" | "daterange" | "monthrange", unknown>>;
+        readonly type: import("vue").PropType<import("@element-plus/nightly/es/utils").EpPropMergeType<(new (...args: any[]) => ("year" | "years" | "month" | "months" | "date" | "dates" | "week" | "datetime" | "datetimerange" | "daterange" | "monthrange" | "yearrange") & {}) | (() => "year" | "years" | "month" | "months" | "date" | "dates" | "week" | "datetime" | "datetimerange" | "daterange" | "monthrange" | "yearrange") | ((new (...args: any[]) => ("year" | "years" | "month" | "months" | "date" | "dates" | "week" | "datetime" | "datetimerange" | "daterange" | "monthrange" | "yearrange") & {}) | (() => "year" | "years" | "month" | "months" | "date" | "dates" | "week" | "datetime" | "datetimerange" | "daterange" | "monthrange" | "yearrange"))[], "year" | "years" | "month" | "months" | "date" | "dates" | "week" | "datetime" | "datetimerange" | "daterange" | "monthrange" | "yearrange", unknown>>;
         readonly required: true;
         readonly validator: ((val: unknown) => boolean) | undefined;
         __epPropKey: true;

package/es/components/date-picker/src/date-picker-com/panel-date-range.vue.d.ts

@@ -8,7 +8,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         __epPropKey: true;
     };
     readonly type: {
-        readonly type: import("vue").PropType<import("@element-plus/nightly/es/utils").EpPropMergeType<(new (...args: any[]) => ("year" | "years" | "month" | "months" | "date" | "dates" | "week" | "datetime" | "datetimerange" | "daterange" | "monthrange") & {}) | (() => "year" | "years" | "month" | "months" | "date" | "dates" | "week" | "datetime" | "datetimerange" | "daterange" | "monthrange") | ((new (...args: any[]) => ("year" | "years" | "month" | "months" | "date" | "dates" | "week" | "datetime" | "datetimerange" | "daterange" | "monthrange") & {}) | (() => "year" | "years" | "month" | "months" | "date" | "dates" | "week" | "datetime" | "datetimerange" | "daterange" | "monthrange"))[], "year" | "years" | "month" | "months" | "date" | "dates" | "week" | "datetime" | "datetimerange" | "daterange" | "monthrange", unknown>>;
+        readonly type: import("vue").PropType<import("@element-plus/nightly/es/utils").EpPropMergeType<(new (...args: any[]) => ("year" | "years" | "month" | "months" | "date" | "dates" | "week" | "datetime" | "datetimerange" | "daterange" | "monthrange" | "yearrange") & {}) | (() => "year" | "years" | "month" | "months" | "date" | "dates" | "week" | "datetime" | "datetimerange" | "daterange" | "monthrange" | "yearrange") | ((new (...args: any[]) => ("year" | "years" | "month" | "months" | "date" | "dates" | "week" | "datetime" | "datetimerange" | "daterange" | "monthrange" | "yearrange") & {}) | (() => "year" | "years" | "month" | "months" | "date" | "dates" | "week" | "datetime" | "datetimerange" | "daterange" | "monthrange" | "yearrange"))[], "year" | "years" | "month" | "months" | "date" | "dates" | "week" | "datetime" | "datetimerange" | "daterange" | "monthrange" | "yearrange", unknown>>;
         readonly required: true;
         readonly validator: ((val: unknown) => boolean) | undefined;
         __epPropKey: true;
@@ -29,7 +29,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         __epPropKey: true;
     };
     readonly type: {
-        readonly type: import("vue").PropType<import("@element-plus/nightly/es/utils").EpPropMergeType<(new (...args: any[]) => ("year" | "years" | "month" | "months" | "date" | "dates" | "week" | "datetime" | "datetimerange" | "daterange" | "monthrange") & {}) | (() => "year" | "years" | "month" | "months" | "date" | "dates" | "week" | "datetime" | "datetimerange" | "daterange" | "monthrange") | ((new (...args: any[]) => ("year" | "years" | "month" | "months" | "date" | "dates" | "week" | "datetime" | "datetimerange" | "daterange" | "monthrange") & {}) | (() => "year" | "years" | "month" | "months" | "date" | "dates" | "week" | "datetime" | "datetimerange" | "daterange" | "monthrange"))[], "year" | "years" | "month" | "months" | "date" | "dates" | "week" | "datetime" | "datetimerange" | "daterange" | "monthrange", unknown>>;
+        readonly type: import("vue").PropType<import("@element-plus/nightly/es/utils").EpPropMergeType<(new (...args: any[]) => ("year" | "years" | "month" | "months" | "date" | "dates" | "week" | "datetime" | "datetimerange" | "daterange" | "monthrange" | "yearrange") & {}) | (() => "year" | "years" | "month" | "months" | "date" | "dates" | "week" | "datetime" | "datetimerange" | "daterange" | "monthrange" | "yearrange") | ((new (...args: any[]) => ("year" | "years" | "month" | "months" | "date" | "dates" | "week" | "datetime" | "datetimerange" | "daterange" | "monthrange" | "yearrange") & {}) | (() => "year" | "years" | "month" | "months" | "date" | "dates" | "week" | "datetime" | "datetimerange" | "daterange" | "monthrange" | "yearrange"))[], "year" | "years" | "month" | "months" | "date" | "dates" | "week" | "datetime" | "datetimerange" | "daterange" | "monthrange" | "yearrange", unknown>>;
         readonly required: true;
         readonly validator: ((val: unknown) => boolean) | undefined;
         __epPropKey: true;