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

package/lib/components/date-picker/src/date-picker-com/panel-date-pick.vue_vue_type_template_id_78e07aa7_lang.js

@@ -0,0 +1,224 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+
+const _hoisted_1 = { class: "el-picker-panel__body-wrapper" };
+const _hoisted_2 = {
+  key: 0,
+  class: "el-picker-panel__sidebar"
+};
+const _hoisted_3 = ["onClick"];
+const _hoisted_4 = { class: "el-picker-panel__body" };
+const _hoisted_5 = {
+  key: 0,
+  class: "el-date-picker__time-header"
+};
+const _hoisted_6 = { class: "el-date-picker__editor-wrap" };
+const _hoisted_7 = { class: "el-date-picker__editor-wrap" };
+const _hoisted_8 = ["aria-label"];
+const _hoisted_9 = ["aria-label"];
+const _hoisted_10 = ["aria-label"];
+const _hoisted_11 = ["aria-label"];
+const _hoisted_12 = { class: "el-picker-panel__content" };
+const _hoisted_13 = { class: "el-picker-panel__footer" };
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_el_input = vue.resolveComponent("el-input");
+  const _component_time_pick_panel = vue.resolveComponent("time-pick-panel");
+  const _component_d_arrow_left = vue.resolveComponent("d-arrow-left");
+  const _component_el_icon = vue.resolveComponent("el-icon");
+  const _component_arrow_left = vue.resolveComponent("arrow-left");
+  const _component_d_arrow_right = vue.resolveComponent("d-arrow-right");
+  const _component_arrow_right = vue.resolveComponent("arrow-right");
+  const _component_date_table = vue.resolveComponent("date-table");
+  const _component_year_table = vue.resolveComponent("year-table");
+  const _component_month_table = vue.resolveComponent("month-table");
+  const _component_el_button = vue.resolveComponent("el-button");
+  const _directive_clickoutside = vue.resolveDirective("clickoutside");
+  return vue.openBlock(), vue.createElementBlock("div", {
+    class: vue.normalizeClass(["el-picker-panel el-date-picker", [
+      {
+        "has-sidebar": _ctx.$slots.sidebar || _ctx.hasShortcuts,
+        "has-time": _ctx.showTime
+      }
+    ]])
+  }, [
+    vue.createElementVNode("div", _hoisted_1, [
+      vue.renderSlot(_ctx.$slots, "sidebar", { class: "el-picker-panel__sidebar" }),
+      _ctx.hasShortcuts ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
+        (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.shortcuts, (shortcut, key) => {
+          return vue.openBlock(), vue.createElementBlock("button", {
+            key,
+            type: "button",
+            class: "el-picker-panel__shortcut",
+            onClick: ($event) => _ctx.handleShortcutClick(shortcut)
+          }, vue.toDisplayString(shortcut.text), 9, _hoisted_3);
+        }), 128))
+      ])) : vue.createCommentVNode("v-if", true),
+      vue.createElementVNode("div", _hoisted_4, [
+        _ctx.showTime ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5, [
+          vue.createElementVNode("span", _hoisted_6, [
+            vue.createVNode(_component_el_input, {
+              placeholder: _ctx.t("el.datepicker.selectDate"),
+              "model-value": _ctx.visibleDate,
+              size: "small",
+              onInput: _cache[0] || (_cache[0] = (val) => _ctx.userInputDate = val),
+              onChange: _ctx.handleVisibleDateChange
+            }, null, 8, ["placeholder", "model-value", "onChange"])
+          ]),
+          vue.withDirectives(vue.createElementVNode("span", _hoisted_7, [
+            vue.createVNode(_component_el_input, {
+              placeholder: _ctx.t("el.datepicker.selectTime"),
+              "model-value": _ctx.visibleTime,
+              size: "small",
+              onFocus: _ctx.onTimePickerInputFocus,
+              onInput: _cache[1] || (_cache[1] = (val) => _ctx.userInputTime = val),
+              onChange: _ctx.handleVisibleTimeChange
+            }, null, 8, ["placeholder", "model-value", "onFocus", "onChange"]),
+            vue.createVNode(_component_time_pick_panel, {
+              visible: _ctx.timePickerVisible,
+              format: _ctx.timeFormat,
+              "time-arrow-control": _ctx.arrowControl,
+              "parsed-value": _ctx.innerDate,
+              onPick: _ctx.handleTimePick
+            }, null, 8, ["visible", "format", "time-arrow-control", "parsed-value", "onPick"])
+          ], 512), [
+            [_directive_clickoutside, _ctx.handleTimePickClose]
+          ])
+        ])) : vue.createCommentVNode("v-if", true),
+        vue.withDirectives(vue.createElementVNode("div", {
+          class: vue.normalizeClass(["el-date-picker__header", {
+            "el-date-picker__header--bordered": _ctx.currentView === "year" || _ctx.currentView === "month"
+          }])
+        }, [
+          vue.createElementVNode("button", {
+            type: "button",
+            "aria-label": _ctx.t(`el.datepicker.prevYear`),
+            class: "el-picker-panel__icon-btn el-date-picker__prev-btn d-arrow-left",
+            onClick: _cache[2] || (_cache[2] = (...args) => _ctx.prevYear_ && _ctx.prevYear_(...args))
+          }, [
+            vue.createVNode(_component_el_icon, null, {
+              default: vue.withCtx(() => [
+                vue.createVNode(_component_d_arrow_left)
+              ]),
+              _: 1
+            })
+          ], 8, _hoisted_8),
+          vue.withDirectives(vue.createElementVNode("button", {
+            type: "button",
+            "aria-label": _ctx.t(`el.datepicker.prevMonth`),
+            class: "el-picker-panel__icon-btn el-date-picker__prev-btn arrow-left",
+            onClick: _cache[3] || (_cache[3] = (...args) => _ctx.prevMonth_ && _ctx.prevMonth_(...args))
+          }, [
+            vue.createVNode(_component_el_icon, null, {
+              default: vue.withCtx(() => [
+                vue.createVNode(_component_arrow_left)
+              ]),
+              _: 1
+            })
+          ], 8, _hoisted_9), [
+            [vue.vShow, _ctx.currentView === "date"]
+          ]),
+          vue.createElementVNode("span", {
+            role: "button",
+            class: "el-date-picker__header-label",
+            onClick: _cache[4] || (_cache[4] = (...args) => _ctx.showYearPicker && _ctx.showYearPicker(...args))
+          }, vue.toDisplayString(_ctx.yearLabel), 1),
+          vue.withDirectives(vue.createElementVNode("span", {
+            role: "button",
+            class: vue.normalizeClass(["el-date-picker__header-label", { active: _ctx.currentView === "month" }]),
+            onClick: _cache[5] || (_cache[5] = (...args) => _ctx.showMonthPicker && _ctx.showMonthPicker(...args))
+          }, vue.toDisplayString(_ctx.t(`el.datepicker.month${_ctx.month + 1}`)), 3), [
+            [vue.vShow, _ctx.currentView === "date"]
+          ]),
+          vue.createElementVNode("button", {
+            type: "button",
+            "aria-label": _ctx.t(`el.datepicker.nextYear`),
+            class: "el-picker-panel__icon-btn el-date-picker__next-btn d-arrow-right",
+            onClick: _cache[6] || (_cache[6] = (...args) => _ctx.nextYear_ && _ctx.nextYear_(...args))
+          }, [
+            vue.createVNode(_component_el_icon, null, {
+              default: vue.withCtx(() => [
+                vue.createVNode(_component_d_arrow_right)
+              ]),
+              _: 1
+            })
+          ], 8, _hoisted_10),
+          vue.withDirectives(vue.createElementVNode("button", {
+            type: "button",
+            "aria-label": _ctx.t(`el.datepicker.nextMonth`),
+            class: "el-picker-panel__icon-btn el-date-picker__next-btn arrow-right",
+            onClick: _cache[7] || (_cache[7] = (...args) => _ctx.nextMonth_ && _ctx.nextMonth_(...args))
+          }, [
+            vue.createVNode(_component_el_icon, null, {
+              default: vue.withCtx(() => [
+                vue.createVNode(_component_arrow_right)
+              ]),
+              _: 1
+            })
+          ], 8, _hoisted_11), [
+            [vue.vShow, _ctx.currentView === "date"]
+          ])
+        ], 2), [
+          [vue.vShow, _ctx.currentView !== "time"]
+        ]),
+        vue.createElementVNode("div", _hoisted_12, [
+          _ctx.currentView === "date" ? (vue.openBlock(), vue.createBlock(_component_date_table, {
+            key: 0,
+            "selection-mode": _ctx.selectionMode,
+            date: _ctx.innerDate,
+            "parsed-value": _ctx.parsedValue,
+            "disabled-date": _ctx.disabledDate,
+            onPick: _ctx.handleDatePick
+          }, null, 8, ["selection-mode", "date", "parsed-value", "disabled-date", "onPick"])) : vue.createCommentVNode("v-if", true),
+          _ctx.currentView === "year" ? (vue.openBlock(), vue.createBlock(_component_year_table, {
+            key: 1,
+            date: _ctx.innerDate,
+            "disabled-date": _ctx.disabledDate,
+            "parsed-value": _ctx.parsedValue,
+            onPick: _ctx.handleYearPick
+          }, null, 8, ["date", "disabled-date", "parsed-value", "onPick"])) : vue.createCommentVNode("v-if", true),
+          _ctx.currentView === "month" ? (vue.openBlock(), vue.createBlock(_component_month_table, {
+            key: 2,
+            date: _ctx.innerDate,
+            "parsed-value": _ctx.parsedValue,
+            "disabled-date": _ctx.disabledDate,
+            onPick: _ctx.handleMonthPick
+          }, null, 8, ["date", "parsed-value", "disabled-date", "onPick"])) : vue.createCommentVNode("v-if", true)
+        ])
+      ])
+    ]),
+    vue.withDirectives(vue.createElementVNode("div", _hoisted_13, [
+      vue.withDirectives(vue.createVNode(_component_el_button, {
+        size: "mini",
+        type: "text",
+        class: "el-picker-panel__link-btn",
+        onClick: _ctx.changeToNow
+      }, {
+        default: vue.withCtx(() => [
+          vue.createTextVNode(vue.toDisplayString(_ctx.t("el.datepicker.now")), 1)
+        ]),
+        _: 1
+      }, 8, ["onClick"]), [
+        [vue.vShow, _ctx.selectionMode !== "dates"]
+      ]),
+      vue.createVNode(_component_el_button, {
+        plain: "",
+        size: "mini",
+        class: "el-picker-panel__link-btn",
+        onClick: _ctx.onConfirm
+      }, {
+        default: vue.withCtx(() => [
+          vue.createTextVNode(vue.toDisplayString(_ctx.t("el.datepicker.confirm")), 1)
+        ]),
+        _: 1
+      }, 8, ["onClick"])
+    ], 512), [
+      [vue.vShow, _ctx.footerVisible && _ctx.currentView === "date"]
+    ])
+  ], 2);
+}
+
+exports.render = render;
+//# sourceMappingURL=panel-date-pick.vue_vue_type_template_id_78e07aa7_lang.js.map

package/lib/components/date-picker/src/date-picker-com/panel-date-pick.vue_vue_type_template_id_78e07aa7_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"panel-date-pick.vue_vue_type_template_id_78e07aa7_lang.js","sources":["../../../../../../../packages/components/date-picker/src/date-picker-com/panel-date-pick.vue?vue&type=template&id=78e07aa7&lang.js"],"sourcesContent":["<template>\n  <div\n    class=\"el-picker-panel el-date-picker\"\n    :class=\"[\n      {\n        'has-sidebar': $slots.sidebar || hasShortcuts,\n        'has-time': showTime,\n      },\n    ]\"\n  >\n    <div class=\"el-picker-panel__body-wrapper\">\n      <slot name=\"sidebar\" class=\"el-picker-panel__sidebar\"></slot>\n      <div v-if=\"hasShortcuts\" class=\"el-picker-panel__sidebar\">\n        <button\n          v-for=\"(shortcut, key) in shortcuts\"\n          :key=\"key\"\n          type=\"button\"\n          class=\"el-picker-panel__shortcut\"\n          @click=\"handleShortcutClick(shortcut)\"\n        >\n          {{ shortcut.text }}\n        </button>\n      </div>\n      <div class=\"el-picker-panel__body\">\n        <div v-if=\"showTime\" class=\"el-date-picker__time-header\">\n          <span class=\"el-date-picker__editor-wrap\">\n            <el-input\n              :placeholder=\"t('el.datepicker.selectDate')\"\n              :model-value=\"visibleDate\"\n              size=\"small\"\n              @input=\"(val) => (userInputDate = val)\"\n              @change=\"handleVisibleDateChange\"\n            />\n          </span>\n          <span\n            v-clickoutside=\"handleTimePickClose\"\n            class=\"el-date-picker__editor-wrap\"\n          >\n            <el-input\n              :placeholder=\"t('el.datepicker.selectTime')\"\n              :model-value=\"visibleTime\"\n              size=\"small\"\n              @focus=\"onTimePickerInputFocus\"\n              @input=\"(val) => (userInputTime = val)\"\n              @change=\"handleVisibleTimeChange\"\n            />\n            <time-pick-panel\n              :visible=\"timePickerVisible\"\n              :format=\"timeFormat\"\n              :time-arrow-control=\"arrowControl\"\n              :parsed-value=\"innerDate\"\n              @pick=\"handleTimePick\"\n            />\n          </span>\n        </div>\n        <div\n          v-show=\"currentView !== 'time'\"\n          class=\"el-date-picker__header\"\n          :class=\"{\n            'el-date-picker__header--bordered':\n              currentView === 'year' || currentView === 'month',\n          }\"\n        >\n          <button\n            type=\"button\"\n            :aria-label=\"t(`el.datepicker.prevYear`)\"\n            class=\"\n              el-picker-panel__icon-btn\n              el-date-picker__prev-btn\n              d-arrow-left\n            \"\n            @click=\"prevYear_\"\n          >\n            <el-icon><d-arrow-left /></el-icon>\n          </button>\n          <button\n            v-show=\"currentView === 'date'\"\n            type=\"button\"\n            :aria-label=\"t(`el.datepicker.prevMonth`)\"\n            class=\"\n              el-picker-panel__icon-btn\n              el-date-picker__prev-btn\n              arrow-left\n            \"\n            @click=\"prevMonth_\"\n          >\n            <el-icon><arrow-left /></el-icon>\n          </button>\n          <span\n            role=\"button\"\n            class=\"el-date-picker__header-label\"\n            @click=\"showYearPicker\"\n            >{{ yearLabel }}</span\n          >\n          <span\n            v-show=\"currentView === 'date'\"\n            role=\"button\"\n            class=\"el-date-picker__header-label\"\n            :class=\"{ active: currentView === 'month' }\"\n            @click=\"showMonthPicker\"\n            >{{ t(`el.datepicker.month${month + 1}`) }}</span\n          >\n          <button\n            type=\"button\"\n            :aria-label=\"t(`el.datepicker.nextYear`)\"\n            class=\"\n              el-picker-panel__icon-btn\n              el-date-picker__next-btn\n              d-arrow-right\n            \"\n            @click=\"nextYear_\"\n          >\n            <el-icon><d-arrow-right /></el-icon>\n          </button>\n          <button\n            v-show=\"currentView === 'date'\"\n            type=\"button\"\n            :aria-label=\"t(`el.datepicker.nextMonth`)\"\n            class=\"\n              el-picker-panel__icon-btn\n              el-date-picker__next-btn\n              arrow-right\n            \"\n            @click=\"nextMonth_\"\n          >\n            <el-icon><arrow-right /></el-icon>\n          </button>\n        </div>\n        <div class=\"el-picker-panel__content\">\n          <date-table\n            v-if=\"currentView === 'date'\"\n            :selection-mode=\"selectionMode\"\n            :date=\"innerDate\"\n            :parsed-value=\"parsedValue\"\n            :disabled-date=\"disabledDate\"\n            @pick=\"handleDatePick\"\n          />\n          <year-table\n            v-if=\"currentView === 'year'\"\n            :date=\"innerDate\"\n            :disabled-date=\"disabledDate\"\n            :parsed-value=\"parsedValue\"\n            @pick=\"handleYearPick\"\n          />\n          <month-table\n            v-if=\"currentView === 'month'\"\n            :date=\"innerDate\"\n            :parsed-value=\"parsedValue\"\n            :disabled-date=\"disabledDate\"\n            @pick=\"handleMonthPick\"\n          />\n        </div>\n      </div>\n    </div>\n    <div\n      v-show=\"footerVisible && currentView === 'date'\"\n      class=\"el-picker-panel__footer\"\n    >\n      <el-button\n        v-show=\"selectionMode !== 'dates'\"\n        size=\"mini\"\n        type=\"text\"\n        class=\"el-picker-panel__link-btn\"\n        @click=\"changeToNow\"\n      >\n        {{ t('el.datepicker.now') }}\n      </el-button>\n      <el-button\n        plain\n        size=\"mini\"\n        class=\"el-picker-panel__link-btn\"\n        @click=\"onConfirm\"\n      >\n        {{ t('el.datepicker.confirm') }}\n      </el-button>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, inject, ref, watch } from 'vue'\nimport dayjs from 'dayjs'\nimport ElButton from '@element-plus/components/button'\nimport { ClickOutside } from '@element-plus/directives'\nimport { useLocaleInject } from '@element-plus/hooks'\nimport ElInput from '@element-plus/components/input'\nimport {\n  extractDateFormat,\n  extractTimeFormat,\n  TimePickPanel,\n} from '@element-plus/components/time-picker'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { EVENT_CODE } from '@element-plus/utils/aria'\nimport { isValidDatePickType } from '@element-plus/utils/validators'\nimport {\n  DArrowLeft,\n  ArrowLeft,\n  DArrowRight,\n  ArrowRight,\n} from '@element-plus/icons'\nimport DateTable from './basic-date-table.vue'\nimport MonthTable from './basic-month-table.vue'\nimport YearTable from './basic-year-table.vue'\n\nimport type { PropType } from 'vue'\nimport type { ConfigType, Dayjs } from 'dayjs'\nimport type { IDatePickerType } from '../date-picker.type'\n\n// todo\n/* eslint-disable-next-line */\nconst timeWithinRange = (_: ConfigType, __: any, ___: string) => true\n\nexport default defineComponent({\n  components: {\n    DateTable,\n    ElInput,\n    ElButton,\n    ElIcon,\n    TimePickPanel,\n    MonthTable,\n    YearTable,\n    DArrowLeft,\n    ArrowLeft,\n    DArrowRight,\n    ArrowRight,\n  },\n\n  directives: { clickoutside: ClickOutside },\n  props: {\n    visible: {\n      type: Boolean,\n      default: false,\n    },\n    parsedValue: {\n      type: [Object, Array] as PropType<Dayjs | Dayjs[]>,\n    },\n    format: {\n      type: String,\n      default: '',\n    },\n    type: {\n      type: String as PropType<IDatePickerType>,\n      required: true,\n      validator: isValidDatePickType,\n    },\n  },\n  emits: ['pick', 'set-picker-option'],\n  setup(props, ctx) {\n    const { t, lang } = useLocaleInject()\n    const pickerBase = inject('EP_PICKER_BASE') as any\n\n    const {\n      shortcuts,\n      disabledDate,\n      cellClassName,\n      defaultTime,\n      defaultValue,\n      arrowControl,\n    } = pickerBase.props\n\n    const innerDate = ref(dayjs().locale(lang.value))\n\n    const defaultTimeD = computed(() => {\n      return dayjs(defaultTime).locale(lang.value)\n    })\n\n    const month = computed(() => {\n      return innerDate.value.month()\n    })\n\n    const year = computed(() => {\n      return innerDate.value.year()\n    })\n\n    const selectableRange = ref([])\n    const userInputDate = ref(null)\n    const userInputTime = ref(null)\n    // todo update to disableHour\n    const checkDateWithinRange = (date: ConfigType) => {\n      return selectableRange.value.length > 0\n        ? timeWithinRange(\n            date,\n            selectableRange.value,\n            props.format || 'HH:mm:ss'\n          )\n        : true\n    }\n    const formatEmit = (emitDayjs: Dayjs) => {\n      if (defaultTime && !visibleTime.value) {\n        return defaultTimeD.value\n          .year(emitDayjs.year())\n          .month(emitDayjs.month())\n          .date(emitDayjs.date())\n      }\n      if (showTime.value) return emitDayjs.millisecond(0)\n      return emitDayjs.startOf('day')\n    }\n    const emit = (value, ...args) => {\n      if (!value) {\n        ctx.emit('pick', value, ...args)\n      } else if (Array.isArray(value)) {\n        const dates = value.map(formatEmit)\n        ctx.emit('pick', dates, ...args)\n      } else {\n        ctx.emit('pick', formatEmit(value), ...args)\n      }\n      userInputDate.value = null\n      userInputTime.value = null\n    }\n    const handleDatePick = (value: Dayjs) => {\n      if (selectionMode.value === 'day') {\n        let newDate = props.parsedValue\n          ? (props.parsedValue as Dayjs)\n              .year(value.year())\n              .month(value.month())\n              .date(value.date())\n          : value\n        // change default time while out of selectableRange\n        if (!checkDateWithinRange(newDate)) {\n          newDate = (selectableRange.value[0][0] as Dayjs)\n            .year(value.year())\n            .month(value.month())\n            .date(value.date())\n        }\n        innerDate.value = newDate\n        emit(newDate, showTime.value)\n      } else if (selectionMode.value === 'week') {\n        emit(value.date)\n      } else if (selectionMode.value === 'dates') {\n        emit(value, true) // set false to keep panel open\n      }\n    }\n    const prevMonth_ = () => {\n      innerDate.value = innerDate.value.subtract(1, 'month')\n    }\n\n    const nextMonth_ = () => {\n      innerDate.value = innerDate.value.add(1, 'month')\n    }\n\n    const prevYear_ = () => {\n      if (currentView.value === 'year') {\n        innerDate.value = innerDate.value.subtract(10, 'year')\n      } else {\n        innerDate.value = innerDate.value.subtract(1, 'year')\n      }\n    }\n\n    const nextYear_ = () => {\n      if (currentView.value === 'year') {\n        innerDate.value = innerDate.value.add(10, 'year')\n      } else {\n        innerDate.value = innerDate.value.add(1, 'year')\n      }\n    }\n\n    const currentView = ref('date')\n\n    const yearLabel = computed(() => {\n      const yearTranslation = t('el.datepicker.year')\n      if (currentView.value === 'year') {\n        const startYear = Math.floor(year.value / 10) * 10\n        if (yearTranslation) {\n          return `${startYear} ${yearTranslation} - ${\n            startYear + 9\n          } ${yearTranslation}`\n        }\n        return `${startYear} - ${startYear + 9}`\n      }\n      return `${year.value} ${yearTranslation}`\n    })\n\n    const handleShortcutClick = (shortcut) => {\n      const shortcutValue =\n        typeof shortcut.value === 'function' ? shortcut.value() : shortcut.value\n      if (shortcutValue) {\n        emit(dayjs(shortcutValue).locale(lang.value))\n        return\n      }\n      if (shortcut.onClick) {\n        shortcut.onClick(ctx)\n      }\n    }\n\n    const selectionMode = computed(() => {\n      if (['week', 'month', 'year', 'dates'].includes(props.type)) {\n        return props.type\n      }\n      return 'day'\n    })\n\n    watch(\n      () => selectionMode.value,\n      (val) => {\n        if (['month', 'year'].includes(val)) {\n          currentView.value = val\n          return\n        }\n        currentView.value = 'date'\n      },\n      { immediate: true }\n    )\n\n    const hasShortcuts = computed(() => !!shortcuts.length)\n\n    const handleMonthPick = (month) => {\n      innerDate.value = innerDate.value.startOf('month').month(month)\n      if (selectionMode.value === 'month') {\n        emit(innerDate.value)\n      } else {\n        currentView.value = 'date'\n      }\n    }\n\n    const handleYearPick = (year) => {\n      if (selectionMode.value === 'year') {\n        innerDate.value = innerDate.value.startOf('year').year(year)\n        emit(innerDate.value)\n      } else {\n        innerDate.value = innerDate.value.year(year)\n        currentView.value = 'month'\n      }\n    }\n\n    const showMonthPicker = () => {\n      currentView.value = 'month'\n    }\n\n    const showYearPicker = () => {\n      currentView.value = 'year'\n    }\n\n    const showTime = computed(\n      () => props.type === 'datetime' || props.type === 'datetimerange'\n    )\n\n    const footerVisible = computed(() => {\n      return showTime.value || selectionMode.value === 'dates'\n    })\n\n    const onConfirm = () => {\n      if (selectionMode.value === 'dates') {\n        emit(props.parsedValue)\n      } else {\n        // deal with the scenario where: user opens the date time picker, then confirm without doing anything\n        let result = props.parsedValue as Dayjs\n        if (!result) {\n          const defaultTimeD = dayjs(defaultTime).locale(lang.value)\n          const defaultValueD = getDefaultValue()\n          result = defaultTimeD\n            .year(defaultValueD.year())\n            .month(defaultValueD.month())\n            .date(defaultValueD.date())\n        }\n        innerDate.value = result\n        emit(result)\n      }\n    }\n\n    const changeToNow = () => {\n      // NOTE: not a permanent solution\n      //       consider disable \"now\" button in the future\n      const now = dayjs().locale(lang.value)\n      const nowDate = now.toDate()\n      if (\n        (!disabledDate || !disabledDate(nowDate)) &&\n        checkDateWithinRange(nowDate)\n      ) {\n        innerDate.value = dayjs().locale(lang.value)\n        emit(innerDate.value)\n      }\n    }\n\n    const timeFormat = computed(() => {\n      return extractTimeFormat(props.format)\n    })\n\n    const dateFormat = computed(() => {\n      return extractDateFormat(props.format)\n    })\n\n    const visibleTime = computed(() => {\n      if (userInputTime.value) return userInputTime.value\n      if (!props.parsedValue && !defaultValue) return\n      return ((props.parsedValue || innerDate.value) as Dayjs).format(\n        timeFormat.value\n      )\n    })\n\n    const visibleDate = computed(() => {\n      if (userInputDate.value) return userInputDate.value\n      if (!props.parsedValue && !defaultValue) return\n      return ((props.parsedValue || innerDate.value) as Dayjs).format(\n        dateFormat.value\n      )\n    })\n\n    const timePickerVisible = ref(false)\n    const onTimePickerInputFocus = () => {\n      timePickerVisible.value = true\n    }\n    const handleTimePickClose = () => {\n      timePickerVisible.value = false\n    }\n\n    const handleTimePick = (value, visible, first) => {\n      const newDate = props.parsedValue\n        ? (props.parsedValue as Dayjs)\n            .hour(value.hour())\n            .minute(value.minute())\n            .second(value.second())\n        : value\n      innerDate.value = newDate\n      emit(innerDate.value, true)\n      if (!first) {\n        timePickerVisible.value = visible\n      }\n    }\n\n    const handleVisibleTimeChange = (value) => {\n      const newDate = dayjs(value, timeFormat.value).locale(lang.value)\n      if (newDate.isValid() && checkDateWithinRange(newDate)) {\n        innerDate.value = newDate\n          .year(innerDate.value.year())\n          .month(innerDate.value.month())\n          .date(innerDate.value.date())\n        userInputTime.value = null\n        timePickerVisible.value = false\n        emit(innerDate.value, true)\n      }\n    }\n\n    const handleVisibleDateChange = (value) => {\n      const newDate = dayjs(value, dateFormat.value).locale(lang.value)\n      if (newDate.isValid()) {\n        if (disabledDate && disabledDate(newDate.toDate())) {\n          return\n        }\n        innerDate.value = newDate\n          .hour(innerDate.value.hour())\n          .minute(innerDate.value.minute())\n          .second(innerDate.value.second())\n        userInputDate.value = null\n        emit(innerDate.value, true)\n      }\n    }\n\n    const isValidValue = (date: unknown) => {\n      return (\n        dayjs.isDayjs(date) &&\n        date.isValid() &&\n        (disabledDate ? !disabledDate(date.toDate()) : true)\n      )\n    }\n\n    const formatToString = (value) => {\n      if (selectionMode.value === 'dates') {\n        return value.map((_) => _.format(props.format))\n      }\n      return value.format(props.format)\n    }\n\n    const parseUserInput = (value) => {\n      return dayjs(value, props.format).locale(lang.value)\n    }\n\n    const getDefaultValue = () => {\n      const parseDate = dayjs(defaultValue).locale(lang.value)\n      if (!defaultValue) {\n        const defaultTimeDValue = defaultTimeD.value\n        return dayjs()\n          .hour(defaultTimeDValue.hour())\n          .minute(defaultTimeDValue.minute())\n          .second(defaultTimeDValue.second())\n          .locale(lang.value)\n      }\n      return parseDate\n    }\n\n    const handleKeydown = (event) => {\n      const { code, keyCode } = event\n      const list = [\n        EVENT_CODE.up,\n        EVENT_CODE.down,\n        EVENT_CODE.left,\n        EVENT_CODE.right,\n      ]\n      if (props.visible && !timePickerVisible.value) {\n        if (list.includes(code)) {\n          handleKeyControl(keyCode)\n          event.stopPropagation()\n          event.preventDefault()\n        }\n        if (\n          code === EVENT_CODE.enter &&\n          userInputDate.value === null &&\n          userInputTime.value === null\n        ) {\n          // Enter\n          emit(innerDate, false)\n        }\n      }\n    }\n\n    const handleKeyControl = (keyCode) => {\n      const mapping = {\n        year: {\n          38: -4,\n          40: 4,\n          37: -1,\n          39: 1,\n          offset: (date, step) => date.setFullYear(date.getFullYear() + step),\n        },\n        month: {\n          38: -4,\n          40: 4,\n          37: -1,\n          39: 1,\n          offset: (date, step) => date.setMonth(date.getMonth() + step),\n        },\n        week: {\n          38: -1,\n          40: 1,\n          37: -1,\n          39: 1,\n          offset: (date, step) => date.setDate(date.getDate() + step * 7),\n        },\n        day: {\n          38: -7,\n          40: 7,\n          37: -1,\n          39: 1,\n          offset: (date, step) => date.setDate(date.getDate() + step),\n        },\n      }\n\n      const newDate = innerDate.value.toDate()\n      while (Math.abs(innerDate.value.diff(newDate, 'year', true)) < 1) {\n        const map = mapping[selectionMode.value]\n        map.offset(newDate, map[keyCode])\n        if (disabledDate && disabledDate(newDate)) {\n          continue\n        }\n        const result = dayjs(newDate).locale(lang.value)\n        innerDate.value = result\n        ctx.emit('pick', result, true)\n        break\n      }\n    }\n\n    ctx.emit('set-picker-option', ['isValidValue', isValidValue])\n    ctx.emit('set-picker-option', ['formatToString', formatToString])\n    ctx.emit('set-picker-option', ['parseUserInput', parseUserInput])\n    ctx.emit('set-picker-option', ['handleKeydown', handleKeydown])\n\n    watch(\n      () => props.parsedValue,\n      (val) => {\n        if (val) {\n          if (selectionMode.value === 'dates') return\n          if (Array.isArray(val)) return\n          innerDate.value = val\n        } else {\n          innerDate.value = getDefaultValue()\n        }\n      },\n      { immediate: true }\n    )\n\n    return {\n      handleTimePick,\n      handleTimePickClose,\n      onTimePickerInputFocus,\n      timePickerVisible,\n      visibleTime,\n      visibleDate,\n      showTime,\n      changeToNow,\n      onConfirm,\n      footerVisible,\n      handleYearPick,\n      showMonthPicker,\n      showYearPicker,\n      handleMonthPick,\n      hasShortcuts,\n      shortcuts,\n      arrowControl,\n      disabledDate,\n      cellClassName,\n      selectionMode,\n      handleShortcutClick,\n      prevYear_,\n      nextYear_,\n      prevMonth_,\n      nextMonth_,\n      innerDate,\n      t,\n      yearLabel,\n      currentView,\n      month,\n      handleDatePick,\n      handleVisibleTimeChange,\n      handleVisibleDateChange,\n      timeFormat,\n      userInputTime,\n      userInputDate,\n    }\n  },\n})\n</script>\n"],"names":["_createElementBlock","_createElementVNode","_renderSlot","_createVNode","_createBlock"],"mappings":";;;;;;qBAUS,OAAM;;;EAEgB,OAAM;AAAA;;qBAW1B,OAAM;;;EACY,OAAM;AAAA;qBACnB,OAAM;qBAWV,OAAM;;;;;sBA4FL,OAAM;sBA4Bb,OAAM;;;;;;;;;;;;;;0BA3JVA;IACE,2BAAM;;;;;;;IAQNC,8BAAA;MACEC,yCAAqB,OAAM;AAAA,MAChB,sCAAXF,8BAAA;8BACEA,0DAC4B,iBAAlB,UAAU;kCADpBA;YAEG;AAAA,YACD,MAAK;AAAA,YACL,OAAM;AAAA,YACL,qBAAO,yBAAoB;AAAA,iCAEzB,SAAS;;;MAGhBC,8BAAA;QACa,kCAAXD,8BAAA;UACEC,+BAAA;YACEE;cACG,aAAa;cACb,eAAa;cACd,MAAK;AAAA,cACJ,oCAAQ,QAAS,qBAAgB;AAAA,cACjC,UAAQ;;;6BAGbF,+BAAA;YAIEE;cACG,aAAa;cACb,eAAa;cACd,MAAK;AAAA,cACJ,SAAO;cACP,oCAAQ,QAAS,qBAAgB;AAAA,cACjC,UAAQ;;YAEXA;cACG,SAAS;cACT,QAAQ;cACR,sBAAoB;cACpB,gBAAc;cACd,QAAM;;;sCAhBO;;;2BAoBpBF;UAEE,2BAAM;;;;UAMNA;YACE,MAAK;AAAA,YACJ,cAAY;YACb,OAAM;AAAA,YAKL,gDAAO;;YAERE;mCAAS;gBAAAA,gBAAgB;AAAA;AAAA;;;6BAE3BF;YAEE,MAAK;AAAA,YACJ,cAAY;YACb,OAAM;AAAA,YAKL,gDAAO;;YAERE;mCAAS;gBAAAA,gBAAc;AAAA;AAAA;;;wBAVf;;UAYVF;YACE,MAAK;AAAA,YACL,OAAM;AAAA,YACL,gDAAO;iCACJ;6BAENA;YAEE,MAAK;AAAA,YACL,2BAAM,0CACY;YACjB,gDAAO;iCACJ,6BAAwB;wBALpB;;UAOVA;YACE,MAAK;AAAA,YACJ,cAAY;YACb,OAAM;AAAA,YAKL,gDAAO;;YAERE;mCAAS;gBAAAA,gBAAiB;AAAA;AAAA;;;6BAE5BF;YAEE,MAAK;AAAA,YACJ,cAAY;YACb,OAAM;AAAA,YAKL,gDAAO;;YAERE;mCAAS;gBAAAA,gBAAe;AAAA;AAAA;;;wBAVhB;;;sBA3DF;;QAwEVF,8BAAA;UAEU,gDADRG;;YAEG,kBAAgB;YAChB,MAAM;YACN,gBAAc;YACd,iBAAe;YACf,QAAM;;UAGD,gDADRA;;YAEG,MAAM;YACN,iBAAe;YACf,gBAAc;YACd,QAAM;;UAGD,iDADRA;;YAEG,MAAM;YACN,gBAAc;YACd,iBAAe;YACf,QAAM;;;;;uBAKfH,8BAAA;yBAIEE;QAEE,MAAK;AAAA,QACL,MAAK;AAAA,QACL,OAAM;AAAA,QACL,SAAO;;6BAER;kDAAG;;;;oBANK;;MAQVA;QACE,OAAA;AAAA,QACA,MAAK;AAAA,QACL,OAAM;AAAA,QACL,SAAO;;6BAER;kDAAG;;;;;kBAlBG,sBAAiB;;;;;;;"}

package/lib/components/date-picker/src/date-picker-com/panel-date-range.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var panelDateRange_vue_vue_type_script_lang = require('./panel-date-range.vue_vue&type=script&lang.js');
-var panelDateRange_vue_vue_type_template_id_62b45ab2_lang = require('./panel-date-range.vue_vue&type=template&id=62b45ab2&lang.js');
+var panelDateRange_vue_vue_type_script_lang = require('./panel-date-range.vue_vue_type_script_lang.js');
+var panelDateRange_vue_vue_type_template_id_62b45ab2_lang = require('./panel-date-range.vue_vue_type_template_id_62b45ab2_lang.js');
 
 panelDateRange_vue_vue_type_script_lang["default"].render = panelDateRange_vue_vue_type_template_id_62b45ab2_lang.render;
 panelDateRange_vue_vue_type_script_lang["default"].__file = "packages/components/date-picker/src/date-picker-com/panel-date-range.vue";