element-plus 1.2.0-beta.3 → 1.2.0-beta.4

package/es/components/date-picker/src/date-picker-com/basic-month-table.vue_vue&type=template&id=2f6fcbf2&lang.mjs

@@ -1,30 +0,0 @@
-import { openBlock, createElementBlock, createElementVNode, Fragment, renderList, normalizeClass, toDisplayString } from 'vue';
-
-const _hoisted_1 = { class: "cell" };
-function render(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), 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))
-  }, [
-    createElementVNode("tbody", null, [
-      (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.rows, (row, key) => {
-        return openBlock(), createElementBlock("tr", { key }, [
-          (openBlock(true), createElementBlock(Fragment, null, renderList(row, (cell, key_) => {
-            return openBlock(), createElementBlock("td", {
-              key: key_,
-              class: normalizeClass(_ctx.getCellStyle(cell))
-            }, [
-              createElementVNode("div", null, [
-                createElementVNode("a", _hoisted_1, toDisplayString(_ctx.t("el.datepicker.months." + _ctx.months[cell.text])), 1)
-              ])
-            ], 2);
-          }), 128))
-        ]);
-      }), 128))
-    ])
-  ], 32);
-}
-
-export { render };
-//# sourceMappingURL=basic-month-table.vue_vue&type=template&id=2f6fcbf2&lang.mjs.map

package/es/components/date-picker/src/date-picker-com/basic-month-table.vue_vue&type=template&id=2f6fcbf2&lang.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"basic-month-table.vue_vue&type=template&id=2f6fcbf2&lang.mjs","sources":["../../../../../../../packages/components/date-picker/src/date-picker-com/basic-month-table.vue?vue&type=template&id=2f6fcbf2&lang.js"],"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 { useLocaleInject } 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 } = useLocaleInject()\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":["_createElementBlock","_createElementVNode"],"mappings":";;qBAUe,OAAM;;sBATnBA;IACE,OAAM;AAAA,IACL,gDAAO;IACP,oDAAW;;IAEZC;wBACED,8CAAyB,YAAb,KAAK;4BAAjBA,2BAAgC;4BAC9BA,8CAA2B,MAAf,MAAM;gCAAlBA;cAAiC,KAAK;AAAA,cAAO,sBAAO,kBAAa;AAAA;cAC/DC;gBACEA,wBAAA,4BACE,iCAA4B,YAAO,KAAK;;;;;;;;;;;;"}

package/es/components/date-picker/src/date-picker-com/basic-year-table.vue_vue&type=script&lang.mjs

@@ -1,60 +0,0 @@
-import { defineComponent, computed } from 'vue';
-import dayjs from 'dayjs';
-import '../../../../hooks/index.mjs';
-import '../../../time-picker/index.mjs';
-import { hasClass } from '../../../../utils/dom.mjs';
-import { coerceTruthyValueToArray } from '../../../../utils/util.mjs';
-import { rangeArr } from '../../../time-picker/src/common/date-utils.mjs';
-import { useLocaleInject } from '../../../../hooks/use-locale/index.mjs';
-
-const datesInYear = (year, lang) => {
-  const firstDay = dayjs(String(year)).locale(lang).startOf("year");
-  const lastDay = firstDay.endOf("year");
-  const numOfDays = lastDay.dayOfYear();
-  return rangeArr(numOfDays).map((n) => firstDay.add(n, "day").toDate());
-};
-var script = defineComponent({
-  props: {
-    disabledDate: {
-      type: Function
-    },
-    parsedValue: {
-      type: Object
-    },
-    date: {
-      type: Object
-    }
-  },
-  emits: ["pick"],
-  setup(props, ctx) {
-    const { lang } = useLocaleInject();
-    const startYear = computed(() => {
-      return Math.floor(props.date.year() / 10) * 10;
-    });
-    const getCellStyle = (year) => {
-      const style = {};
-      const today = dayjs().locale(lang.value);
-      style.disabled = props.disabledDate ? datesInYear(year, lang.value).every(props.disabledDate) : false;
-      style.current = coerceTruthyValueToArray(props.parsedValue).findIndex((_) => _.year() === year) >= 0;
-      style.today = today.year() === year;
-      return style;
-    };
-    const handleYearTableClick = (event) => {
-      const target = event.target;
-      if (target.tagName === "A") {
-        if (hasClass(target.parentNode, "disabled"))
-          return;
-        const year = target.textContent || target.innerText;
-        ctx.emit("pick", Number(year));
-      }
-    };
-    return {
-      startYear,
-      getCellStyle,
-      handleYearTableClick
-    };
-  }
-});
-
-export { script as default };
-//# sourceMappingURL=basic-year-table.vue_vue&type=script&lang.mjs.map

package/es/components/date-picker/src/date-picker-com/basic-year-table.vue_vue&type=script&lang.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"basic-year-table.vue_vue&type=script&lang.mjs","sources":["../../../../../../../packages/components/date-picker/src/date-picker-com/basic-year-table.vue"],"sourcesContent":["<template>\n  <table class=\"el-year-table\" @click=\"handleYearTableClick\">\n    <tbody>\n      <tr>\n        <td class=\"available\" :class=\"getCellStyle(startYear + 0)\">\n          <a class=\"cell\">{{ startYear }}</a>\n        </td>\n        <td class=\"available\" :class=\"getCellStyle(startYear + 1)\">\n          <a class=\"cell\">{{ startYear + 1 }}</a>\n        </td>\n        <td class=\"available\" :class=\"getCellStyle(startYear + 2)\">\n          <a class=\"cell\">{{ startYear + 2 }}</a>\n        </td>\n        <td class=\"available\" :class=\"getCellStyle(startYear + 3)\">\n          <a class=\"cell\">{{ startYear + 3 }}</a>\n        </td>\n      </tr>\n      <tr>\n        <td class=\"available\" :class=\"getCellStyle(startYear + 4)\">\n          <a class=\"cell\">{{ startYear + 4 }}</a>\n        </td>\n        <td class=\"available\" :class=\"getCellStyle(startYear + 5)\">\n          <a class=\"cell\">{{ startYear + 5 }}</a>\n        </td>\n        <td class=\"available\" :class=\"getCellStyle(startYear + 6)\">\n          <a class=\"cell\">{{ startYear + 6 }}</a>\n        </td>\n        <td class=\"available\" :class=\"getCellStyle(startYear + 7)\">\n          <a class=\"cell\">{{ startYear + 7 }}</a>\n        </td>\n      </tr>\n      <tr>\n        <td class=\"available\" :class=\"getCellStyle(startYear + 8)\">\n          <a class=\"cell\">{{ startYear + 8 }}</a>\n        </td>\n        <td class=\"available\" :class=\"getCellStyle(startYear + 9)\">\n          <a class=\"cell\">{{ startYear + 9 }}</a>\n        </td>\n        <td></td>\n        <td></td>\n      </tr>\n    </tbody>\n  </table>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, computed } from 'vue'\nimport dayjs from 'dayjs'\nimport { useLocaleInject } 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 datesInYear = (year: Dayjs, 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\nexport default defineComponent({\n  props: {\n    disabledDate: {\n      type: Function as PropType<(_: Date) => void>,\n    },\n    parsedValue: {\n      type: Object as PropType<Dayjs>,\n    },\n    date: {\n      type: Object as PropType<Dayjs>,\n    },\n  },\n\n  emits: ['pick'],\n\n  setup(props, ctx) {\n    const { lang } = useLocaleInject()\n    const startYear = computed(() => {\n      return Math.floor(props.date.year() / 10) * 10\n    })\n    const getCellStyle = (year) => {\n      const style = {} as any\n      const today = dayjs().locale(lang.value)\n\n      style.disabled = props.disabledDate\n        ? datesInYear(year, lang.value).every(props.disabledDate)\n        : false\n\n      style.current =\n        coerceTruthyValueToArray(props.parsedValue).findIndex(\n          (_) => _.year() === year\n        ) >= 0\n\n      style.today = today.year() === year\n\n      return style\n    }\n\n    const handleYearTableClick = (event: MouseEvent) => {\n      const target = event.target as HTMLDivElement\n      if (target.tagName === 'A') {\n        if (hasClass((target as any).parentNode, 'disabled')) return\n        const year = target.textContent || target.innerText\n        ctx.emit('pick', Number(year))\n      }\n    }\n    return {\n      startYear,\n      getCellStyle,\n      handleYearTableClick,\n    }\n  },\n})\n</script>\n"],"names":[],"mappings":";;;;;;;;;AAwDA,MAAM,cAAc,CAAC,MAAa,SAAiB;AACjD,QAAM,WAAW,MAAM,OAAO,OAAO,OAAO,MAAM,QAAQ;AAC1D,QAAM,UAAU,SAAS,MAAM;AAC/B,QAAM,YAAY,QAAQ;AAC1B,SAAO,SAAS,WAAW,IAAI,CAAC,MAAM,SAAS,IAAI,GAAG,OAAO;AAAA;AAG/D,aAAe,gBAAgB;AAAA,EAC7B,OAAO;AAAA,IACL,cAAc;AAAA,MACZ,MAAM;AAAA;AAAA,IAER,aAAa;AAAA,MACX,MAAM;AAAA;AAAA,IAER,MAAM;AAAA,MACJ,MAAM;AAAA;AAAA;AAAA,EAIV,OAAO,CAAC;AAAA,EAER,MAAM,OAAO,KAAK;AAChB,UAAM,EAAE,SAAS;AACjB,UAAM,YAAY,SAAS,MAAM;AAC/B,aAAO,KAAK,MAAM,MAAM,KAAK,SAAS,MAAM;AAAA;AAE9C,UAAM,eAAe,CAAC,SAAS;AAC7B,YAAM,QAAQ;AACd,YAAM,QAAQ,QAAQ,OAAO,KAAK;AAElC,YAAM,WAAW,MAAM,eACnB,YAAY,MAAM,KAAK,OAAO,MAAM,MAAM,gBAC1C;AAEJ,YAAM,UACJ,yBAAyB,MAAM,aAAa,UAC1C,CAAC,MAAM,EAAE,WAAW,SACjB;AAEP,YAAM,QAAQ,MAAM,WAAW;AAE/B,aAAO;AAAA;AAGT,UAAM,uBAAuB,CAAC,UAAsB;AAClD,YAAM,SAAS,MAAM;AACrB,UAAI,OAAO,YAAY,KAAK;AAC1B,YAAI,SAAU,OAAe,YAAY;AAAa;AACtD,cAAM,OAAO,OAAO,eAAe,OAAO;AAC1C,YAAI,KAAK,QAAQ,OAAO;AAAA;AAAA;AAG5B,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA;AAAA;AAAA;;;;"}

package/es/components/date-picker/src/date-picker-com/basic-year-table.vue_vue&type=template&id=441df31d&lang.mjs

@@ -1,84 +0,0 @@
-import { createElementVNode, openBlock, createElementBlock, normalizeClass, toDisplayString } from 'vue';
-
-const _hoisted_1 = { class: "cell" };
-const _hoisted_2 = { class: "cell" };
-const _hoisted_3 = { class: "cell" };
-const _hoisted_4 = { class: "cell" };
-const _hoisted_5 = { class: "cell" };
-const _hoisted_6 = { class: "cell" };
-const _hoisted_7 = { class: "cell" };
-const _hoisted_8 = { class: "cell" };
-const _hoisted_9 = { class: "cell" };
-const _hoisted_10 = { class: "cell" };
-const _hoisted_11 = /* @__PURE__ */ createElementVNode("td", null, null, -1);
-const _hoisted_12 = /* @__PURE__ */ createElementVNode("td", null, null, -1);
-function render(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("table", {
-    class: "el-year-table",
-    onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleYearTableClick && _ctx.handleYearTableClick(...args))
-  }, [
-    createElementVNode("tbody", null, [
-      createElementVNode("tr", null, [
-        createElementVNode("td", {
-          class: normalizeClass(["available", _ctx.getCellStyle(_ctx.startYear + 0)])
-        }, [
-          createElementVNode("a", _hoisted_1, toDisplayString(_ctx.startYear), 1)
-        ], 2),
-        createElementVNode("td", {
-          class: normalizeClass(["available", _ctx.getCellStyle(_ctx.startYear + 1)])
-        }, [
-          createElementVNode("a", _hoisted_2, toDisplayString(_ctx.startYear + 1), 1)
-        ], 2),
-        createElementVNode("td", {
-          class: normalizeClass(["available", _ctx.getCellStyle(_ctx.startYear + 2)])
-        }, [
-          createElementVNode("a", _hoisted_3, toDisplayString(_ctx.startYear + 2), 1)
-        ], 2),
-        createElementVNode("td", {
-          class: normalizeClass(["available", _ctx.getCellStyle(_ctx.startYear + 3)])
-        }, [
-          createElementVNode("a", _hoisted_4, toDisplayString(_ctx.startYear + 3), 1)
-        ], 2)
-      ]),
-      createElementVNode("tr", null, [
-        createElementVNode("td", {
-          class: normalizeClass(["available", _ctx.getCellStyle(_ctx.startYear + 4)])
-        }, [
-          createElementVNode("a", _hoisted_5, toDisplayString(_ctx.startYear + 4), 1)
-        ], 2),
-        createElementVNode("td", {
-          class: normalizeClass(["available", _ctx.getCellStyle(_ctx.startYear + 5)])
-        }, [
-          createElementVNode("a", _hoisted_6, toDisplayString(_ctx.startYear + 5), 1)
-        ], 2),
-        createElementVNode("td", {
-          class: normalizeClass(["available", _ctx.getCellStyle(_ctx.startYear + 6)])
-        }, [
-          createElementVNode("a", _hoisted_7, toDisplayString(_ctx.startYear + 6), 1)
-        ], 2),
-        createElementVNode("td", {
-          class: normalizeClass(["available", _ctx.getCellStyle(_ctx.startYear + 7)])
-        }, [
-          createElementVNode("a", _hoisted_8, toDisplayString(_ctx.startYear + 7), 1)
-        ], 2)
-      ]),
-      createElementVNode("tr", null, [
-        createElementVNode("td", {
-          class: normalizeClass(["available", _ctx.getCellStyle(_ctx.startYear + 8)])
-        }, [
-          createElementVNode("a", _hoisted_9, toDisplayString(_ctx.startYear + 8), 1)
-        ], 2),
-        createElementVNode("td", {
-          class: normalizeClass(["available", _ctx.getCellStyle(_ctx.startYear + 9)])
-        }, [
-          createElementVNode("a", _hoisted_10, toDisplayString(_ctx.startYear + 9), 1)
-        ], 2),
-        _hoisted_11,
-        _hoisted_12
-      ])
-    ])
-  ]);
-}
-
-export { render };
-//# sourceMappingURL=basic-year-table.vue_vue&type=template&id=441df31d&lang.mjs.map

package/es/components/date-picker/src/date-picker-com/basic-year-table.vue_vue&type=template&id=441df31d&lang.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"basic-year-table.vue_vue&type=template&id=441df31d&lang.mjs","sources":["../../../../../../../packages/components/date-picker/src/date-picker-com/basic-year-table.vue?vue&type=template&id=441df31d&lang.js"],"sourcesContent":["<template>\n  <table class=\"el-year-table\" @click=\"handleYearTableClick\">\n    <tbody>\n      <tr>\n        <td class=\"available\" :class=\"getCellStyle(startYear + 0)\">\n          <a class=\"cell\">{{ startYear }}</a>\n        </td>\n        <td class=\"available\" :class=\"getCellStyle(startYear + 1)\">\n          <a class=\"cell\">{{ startYear + 1 }}</a>\n        </td>\n        <td class=\"available\" :class=\"getCellStyle(startYear + 2)\">\n          <a class=\"cell\">{{ startYear + 2 }}</a>\n        </td>\n        <td class=\"available\" :class=\"getCellStyle(startYear + 3)\">\n          <a class=\"cell\">{{ startYear + 3 }}</a>\n        </td>\n      </tr>\n      <tr>\n        <td class=\"available\" :class=\"getCellStyle(startYear + 4)\">\n          <a class=\"cell\">{{ startYear + 4 }}</a>\n        </td>\n        <td class=\"available\" :class=\"getCellStyle(startYear + 5)\">\n          <a class=\"cell\">{{ startYear + 5 }}</a>\n        </td>\n        <td class=\"available\" :class=\"getCellStyle(startYear + 6)\">\n          <a class=\"cell\">{{ startYear + 6 }}</a>\n        </td>\n        <td class=\"available\" :class=\"getCellStyle(startYear + 7)\">\n          <a class=\"cell\">{{ startYear + 7 }}</a>\n        </td>\n      </tr>\n      <tr>\n        <td class=\"available\" :class=\"getCellStyle(startYear + 8)\">\n          <a class=\"cell\">{{ startYear + 8 }}</a>\n        </td>\n        <td class=\"available\" :class=\"getCellStyle(startYear + 9)\">\n          <a class=\"cell\">{{ startYear + 9 }}</a>\n        </td>\n        <td></td>\n        <td></td>\n      </tr>\n    </tbody>\n  </table>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, computed } from 'vue'\nimport dayjs from 'dayjs'\nimport { useLocaleInject } 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 datesInYear = (year: Dayjs, 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\nexport default defineComponent({\n  props: {\n    disabledDate: {\n      type: Function as PropType<(_: Date) => void>,\n    },\n    parsedValue: {\n      type: Object as PropType<Dayjs>,\n    },\n    date: {\n      type: Object as PropType<Dayjs>,\n    },\n  },\n\n  emits: ['pick'],\n\n  setup(props, ctx) {\n    const { lang } = useLocaleInject()\n    const startYear = computed(() => {\n      return Math.floor(props.date.year() / 10) * 10\n    })\n    const getCellStyle = (year) => {\n      const style = {} as any\n      const today = dayjs().locale(lang.value)\n\n      style.disabled = props.disabledDate\n        ? datesInYear(year, lang.value).every(props.disabledDate)\n        : false\n\n      style.current =\n        coerceTruthyValueToArray(props.parsedValue).findIndex(\n          (_) => _.year() === year\n        ) >= 0\n\n      style.today = today.year() === year\n\n      return style\n    }\n\n    const handleYearTableClick = (event: MouseEvent) => {\n      const target = event.target as HTMLDivElement\n      if (target.tagName === 'A') {\n        if (hasClass((target as any).parentNode, 'disabled')) return\n        const year = target.textContent || target.innerText\n        ctx.emit('pick', Number(year))\n      }\n    }\n    return {\n      startYear,\n      getCellStyle,\n      handleYearTableClick,\n    }\n  },\n})\n</script>\n"],"names":["_createElementBlock","_createElementVNode"],"mappings":";;qBAKa,OAAM;qBAGN,OAAM;qBAGN,OAAM;qBAGN,OAAM;qBAKN,OAAM;qBAGN,OAAM;qBAGN,OAAM;qBAGN,OAAM;qBAKN,OAAM;sBAGN,OAAM;;;;sBAnCjBA;IAAO,OAAM;AAAA,IAAiB,gDAAO;;IACnCC;MACEA;QACEA;UAAI,uBAAM,aAAoB,kBAAa;;UACzCA,wBAAA,4BAAmB;;QAErBA;UAAI,uBAAM,aAAoB,kBAAa;;UACzCA,wBAAA,4BAAmB;;QAErBA;UAAI,uBAAM,aAAoB,kBAAa;;UACzCA,wBAAA,4BAAmB;;QAErBA;UAAI,uBAAM,aAAoB,kBAAa;;UACzCA,wBAAA,4BAAmB;;;MAGvBA;QACEA;UAAI,uBAAM,aAAoB,kBAAa;;UACzCA,wBAAA,4BAAmB;;QAErBA;UAAI,uBAAM,aAAoB,kBAAa;;UACzCA,wBAAA,4BAAmB;;QAErBA;UAAI,uBAAM,aAAoB,kBAAa;;UACzCA,wBAAA,4BAAmB;;QAErBA;UAAI,uBAAM,aAAoB,kBAAa;;UACzCA,wBAAA,4BAAmB;;;MAGvBA;QACEA;UAAI,uBAAM,aAAoB,kBAAa;;UACzCA,wBAAA,4BAAmB;;QAErBA;UAAI,uBAAM,aAAoB,kBAAa;;UACzCA,wBAAA,6BAAmB;;QAErB;AAAA,QACA;AAAA;AAAA;AAAA;AAAA;;;;"}

package/es/components/date-picker/src/date-picker-com/panel-date-pick.vue_vue&type=script&lang.mjs

@@ -1,419 +0,0 @@
-import { defineComponent, inject, ref, computed, watch } from 'vue';
-import dayjs from 'dayjs';
-import { ElButton } from '../../../button/index.mjs';
-import '../../../../directives/index.mjs';
-import '../../../../hooks/index.mjs';
-import { ElInput } from '../../../input/index.mjs';
-import '../../../time-picker/index.mjs';
-import { ElIcon } from '../../../icon/index.mjs';
-import { EVENT_CODE } from '../../../../utils/aria.mjs';
-import { isValidDatePickType } from '../../../../utils/validators.mjs';
-import { DArrowLeft, ArrowLeft, DArrowRight, ArrowRight } from '@element-plus/icons';
-import './basic-date-table.mjs';
-import './basic-month-table.mjs';
-import './basic-year-table.mjs';
-import script$1 from './basic-date-table.vue_vue&type=script&lang.mjs';
-import script$2 from '../../../time-picker/src/time-picker-com/panel-time-pick.vue_vue&type=script&lang.mjs';
-import script$3 from './basic-month-table.vue_vue&type=script&lang.mjs';
-import script$4 from './basic-year-table.vue_vue&type=script&lang.mjs';
-import ClickOutside from '../../../../directives/click-outside/index.mjs';
-import { useLocaleInject } from '../../../../hooks/use-locale/index.mjs';
-import { extractTimeFormat, extractDateFormat } from '../../../time-picker/src/common/date-utils.mjs';
-
-const timeWithinRange = (_, __, ___) => true;
-var script = defineComponent({
-  components: {
-    DateTable: script$1,
-    ElInput,
-    ElButton,
-    ElIcon,
-    TimePickPanel: script$2,
-    MonthTable: script$3,
-    YearTable: script$4,
-    DArrowLeft,
-    ArrowLeft,
-    DArrowRight,
-    ArrowRight
-  },
-  directives: { clickoutside: ClickOutside },
-  props: {
-    visible: {
-      type: Boolean,
-      default: false
-    },
-    parsedValue: {
-      type: [Object, Array]
-    },
-    format: {
-      type: String,
-      default: ""
-    },
-    type: {
-      type: String,
-      required: true,
-      validator: isValidDatePickType
-    }
-  },
-  emits: ["pick", "set-picker-option"],
-  setup(props, ctx) {
-    const { t, lang } = useLocaleInject();
-    const pickerBase = inject("EP_PICKER_BASE");
-    const {
-      shortcuts,
-      disabledDate,
-      cellClassName,
-      defaultTime,
-      defaultValue,
-      arrowControl
-    } = pickerBase.props;
-    const innerDate = ref(dayjs().locale(lang.value));
-    const defaultTimeD = computed(() => {
-      return dayjs(defaultTime).locale(lang.value);
-    });
-    const month = computed(() => {
-      return innerDate.value.month();
-    });
-    const year = computed(() => {
-      return innerDate.value.year();
-    });
-    const selectableRange = ref([]);
-    const userInputDate = ref(null);
-    const userInputTime = ref(null);
-    const checkDateWithinRange = (date) => {
-      return selectableRange.value.length > 0 ? timeWithinRange(date, selectableRange.value, props.format || "HH:mm:ss") : true;
-    };
-    const formatEmit = (emitDayjs) => {
-      if (defaultTime && !visibleTime.value) {
-        return defaultTimeD.value.year(emitDayjs.year()).month(emitDayjs.month()).date(emitDayjs.date());
-      }
-      if (showTime.value)
-        return emitDayjs.millisecond(0);
-      return emitDayjs.startOf("day");
-    };
-    const emit = (value, ...args) => {
-      if (!value) {
-        ctx.emit("pick", value, ...args);
-      } else if (Array.isArray(value)) {
-        const dates = value.map(formatEmit);
-        ctx.emit("pick", dates, ...args);
-      } else {
-        ctx.emit("pick", formatEmit(value), ...args);
-      }
-      userInputDate.value = null;
-      userInputTime.value = null;
-    };
-    const handleDatePick = (value) => {
-      if (selectionMode.value === "day") {
-        let newDate = props.parsedValue ? props.parsedValue.year(value.year()).month(value.month()).date(value.date()) : value;
-        if (!checkDateWithinRange(newDate)) {
-          newDate = selectableRange.value[0][0].year(value.year()).month(value.month()).date(value.date());
-        }
-        innerDate.value = newDate;
-        emit(newDate, showTime.value);
-      } else if (selectionMode.value === "week") {
-        emit(value.date);
-      } else if (selectionMode.value === "dates") {
-        emit(value, true);
-      }
-    };
-    const prevMonth_ = () => {
-      innerDate.value = innerDate.value.subtract(1, "month");
-    };
-    const nextMonth_ = () => {
-      innerDate.value = innerDate.value.add(1, "month");
-    };
-    const prevYear_ = () => {
-      if (currentView.value === "year") {
-        innerDate.value = innerDate.value.subtract(10, "year");
-      } else {
-        innerDate.value = innerDate.value.subtract(1, "year");
-      }
-    };
-    const nextYear_ = () => {
-      if (currentView.value === "year") {
-        innerDate.value = innerDate.value.add(10, "year");
-      } else {
-        innerDate.value = innerDate.value.add(1, "year");
-      }
-    };
-    const currentView = ref("date");
-    const yearLabel = computed(() => {
-      const yearTranslation = t("el.datepicker.year");
-      if (currentView.value === "year") {
-        const startYear = Math.floor(year.value / 10) * 10;
-        if (yearTranslation) {
-          return `${startYear} ${yearTranslation} - ${startYear + 9} ${yearTranslation}`;
-        }
-        return `${startYear} - ${startYear + 9}`;
-      }
-      return `${year.value} ${yearTranslation}`;
-    });
-    const handleShortcutClick = (shortcut) => {
-      const shortcutValue = typeof shortcut.value === "function" ? shortcut.value() : shortcut.value;
-      if (shortcutValue) {
-        emit(dayjs(shortcutValue).locale(lang.value));
-        return;
-      }
-      if (shortcut.onClick) {
-        shortcut.onClick(ctx);
-      }
-    };
-    const selectionMode = computed(() => {
-      if (["week", "month", "year", "dates"].includes(props.type)) {
-        return props.type;
-      }
-      return "day";
-    });
-    watch(() => selectionMode.value, (val) => {
-      if (["month", "year"].includes(val)) {
-        currentView.value = val;
-        return;
-      }
-      currentView.value = "date";
-    }, { immediate: true });
-    const hasShortcuts = computed(() => !!shortcuts.length);
-    const handleMonthPick = (month2) => {
-      innerDate.value = innerDate.value.startOf("month").month(month2);
-      if (selectionMode.value === "month") {
-        emit(innerDate.value);
-      } else {
-        currentView.value = "date";
-      }
-    };
-    const handleYearPick = (year2) => {
-      if (selectionMode.value === "year") {
-        innerDate.value = innerDate.value.startOf("year").year(year2);
-        emit(innerDate.value);
-      } else {
-        innerDate.value = innerDate.value.year(year2);
-        currentView.value = "month";
-      }
-    };
-    const showMonthPicker = () => {
-      currentView.value = "month";
-    };
-    const showYearPicker = () => {
-      currentView.value = "year";
-    };
-    const showTime = computed(() => props.type === "datetime" || props.type === "datetimerange");
-    const footerVisible = computed(() => {
-      return showTime.value || selectionMode.value === "dates";
-    });
-    const onConfirm = () => {
-      if (selectionMode.value === "dates") {
-        emit(props.parsedValue);
-      } else {
-        let result = props.parsedValue;
-        if (!result) {
-          const defaultTimeD2 = dayjs(defaultTime).locale(lang.value);
-          const defaultValueD = getDefaultValue();
-          result = defaultTimeD2.year(defaultValueD.year()).month(defaultValueD.month()).date(defaultValueD.date());
-        }
-        innerDate.value = result;
-        emit(result);
-      }
-    };
-    const changeToNow = () => {
-      const now = dayjs().locale(lang.value);
-      const nowDate = now.toDate();
-      if ((!disabledDate || !disabledDate(nowDate)) && checkDateWithinRange(nowDate)) {
-        innerDate.value = dayjs().locale(lang.value);
-        emit(innerDate.value);
-      }
-    };
-    const timeFormat = computed(() => {
-      return extractTimeFormat(props.format);
-    });
-    const dateFormat = computed(() => {
-      return extractDateFormat(props.format);
-    });
-    const visibleTime = computed(() => {
-      if (userInputTime.value)
-        return userInputTime.value;
-      if (!props.parsedValue && !defaultValue)
-        return;
-      return (props.parsedValue || innerDate.value).format(timeFormat.value);
-    });
-    const visibleDate = computed(() => {
-      if (userInputDate.value)
-        return userInputDate.value;
-      if (!props.parsedValue && !defaultValue)
-        return;
-      return (props.parsedValue || innerDate.value).format(dateFormat.value);
-    });
-    const timePickerVisible = ref(false);
-    const onTimePickerInputFocus = () => {
-      timePickerVisible.value = true;
-    };
-    const handleTimePickClose = () => {
-      timePickerVisible.value = false;
-    };
-    const handleTimePick = (value, visible, first) => {
-      const newDate = props.parsedValue ? props.parsedValue.hour(value.hour()).minute(value.minute()).second(value.second()) : value;
-      innerDate.value = newDate;
-      emit(innerDate.value, true);
-      if (!first) {
-        timePickerVisible.value = visible;
-      }
-    };
-    const handleVisibleTimeChange = (value) => {
-      const newDate = dayjs(value, timeFormat.value).locale(lang.value);
-      if (newDate.isValid() && checkDateWithinRange(newDate)) {
-        innerDate.value = newDate.year(innerDate.value.year()).month(innerDate.value.month()).date(innerDate.value.date());
-        userInputTime.value = null;
-        timePickerVisible.value = false;
-        emit(innerDate.value, true);
-      }
-    };
-    const handleVisibleDateChange = (value) => {
-      const newDate = dayjs(value, dateFormat.value).locale(lang.value);
-      if (newDate.isValid()) {
-        if (disabledDate && disabledDate(newDate.toDate())) {
-          return;
-        }
-        innerDate.value = newDate.hour(innerDate.value.hour()).minute(innerDate.value.minute()).second(innerDate.value.second());
-        userInputDate.value = null;
-        emit(innerDate.value, true);
-      }
-    };
-    const isValidValue = (date) => {
-      return dayjs.isDayjs(date) && date.isValid() && (disabledDate ? !disabledDate(date.toDate()) : true);
-    };
-    const formatToString = (value) => {
-      if (selectionMode.value === "dates") {
-        return value.map((_) => _.format(props.format));
-      }
-      return value.format(props.format);
-    };
-    const parseUserInput = (value) => {
-      return dayjs(value, props.format).locale(lang.value);
-    };
-    const getDefaultValue = () => {
-      const parseDate = dayjs(defaultValue).locale(lang.value);
-      if (!defaultValue) {
-        const defaultTimeDValue = defaultTimeD.value;
-        return dayjs().hour(defaultTimeDValue.hour()).minute(defaultTimeDValue.minute()).second(defaultTimeDValue.second()).locale(lang.value);
-      }
-      return parseDate;
-    };
-    const handleKeydown = (event) => {
-      const { code, keyCode } = event;
-      const list = [
-        EVENT_CODE.up,
-        EVENT_CODE.down,
-        EVENT_CODE.left,
-        EVENT_CODE.right
-      ];
-      if (props.visible && !timePickerVisible.value) {
-        if (list.includes(code)) {
-          handleKeyControl(keyCode);
-          event.stopPropagation();
-          event.preventDefault();
-        }
-        if (code === EVENT_CODE.enter && userInputDate.value === null && userInputTime.value === null) {
-          emit(innerDate, false);
-        }
-      }
-    };
-    const handleKeyControl = (keyCode) => {
-      const mapping = {
-        year: {
-          38: -4,
-          40: 4,
-          37: -1,
-          39: 1,
-          offset: (date, step) => date.setFullYear(date.getFullYear() + step)
-        },
-        month: {
-          38: -4,
-          40: 4,
-          37: -1,
-          39: 1,
-          offset: (date, step) => date.setMonth(date.getMonth() + step)
-        },
-        week: {
-          38: -1,
-          40: 1,
-          37: -1,
-          39: 1,
-          offset: (date, step) => date.setDate(date.getDate() + step * 7)
-        },
-        day: {
-          38: -7,
-          40: 7,
-          37: -1,
-          39: 1,
-          offset: (date, step) => date.setDate(date.getDate() + step)
-        }
-      };
-      const newDate = innerDate.value.toDate();
-      while (Math.abs(innerDate.value.diff(newDate, "year", true)) < 1) {
-        const map = mapping[selectionMode.value];
-        map.offset(newDate, map[keyCode]);
-        if (disabledDate && disabledDate(newDate)) {
-          continue;
-        }
-        const result = dayjs(newDate).locale(lang.value);
-        innerDate.value = result;
-        ctx.emit("pick", result, true);
-        break;
-      }
-    };
-    ctx.emit("set-picker-option", ["isValidValue", isValidValue]);
-    ctx.emit("set-picker-option", ["formatToString", formatToString]);
-    ctx.emit("set-picker-option", ["parseUserInput", parseUserInput]);
-    ctx.emit("set-picker-option", ["handleKeydown", handleKeydown]);
-    watch(() => props.parsedValue, (val) => {
-      if (val) {
-        if (selectionMode.value === "dates")
-          return;
-        if (Array.isArray(val))
-          return;
-        innerDate.value = val;
-      } else {
-        innerDate.value = getDefaultValue();
-      }
-    }, { immediate: true });
-    return {
-      handleTimePick,
-      handleTimePickClose,
-      onTimePickerInputFocus,
-      timePickerVisible,
-      visibleTime,
-      visibleDate,
-      showTime,
-      changeToNow,
-      onConfirm,
-      footerVisible,
-      handleYearPick,
-      showMonthPicker,
-      showYearPicker,
-      handleMonthPick,
-      hasShortcuts,
-      shortcuts,
-      arrowControl,
-      disabledDate,
-      cellClassName,
-      selectionMode,
-      handleShortcutClick,
-      prevYear_,
-      nextYear_,
-      prevMonth_,
-      nextMonth_,
-      innerDate,
-      t,
-      yearLabel,
-      currentView,
-      month,
-      handleDatePick,
-      handleVisibleTimeChange,
-      handleVisibleDateChange,
-      timeFormat,
-      userInputTime,
-      userInputDate
-    };
-  }
-});
-
-export { script as default };
-//# sourceMappingURL=panel-date-pick.vue_vue&type=script&lang.mjs.map