@element-plus/nightly 0.0.20220121 → 0.0.20220122

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

@@ -1,224 +0,0 @@
-'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.openBlock(), vue.createElementBlock("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"])
-          ])), [
-            [_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: "small",
-        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: "small",
-        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

@@ -1 +0,0 @@
-{"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=\"el-picker-panel__icon-btn el-date-picker__prev-btn d-arrow-left\"\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=\"el-picker-panel__icon-btn el-date-picker__prev-btn arrow-left\"\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=\"el-picker-panel__icon-btn el-date-picker__next-btn d-arrow-right\"\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=\"el-picker-panel__icon-btn el-date-picker__next-btn arrow-right\"\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=\"small\"\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=\"small\"\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, toRef } from 'vue'\nimport dayjs from 'dayjs'\nimport ElButton from '@element-plus/components/button'\nimport { ClickOutside } from '@element-plus/directives'\nimport { useLocale } 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-vue'\nimport { TOOLTIP_INJECTION_KEY } from '@element-plus/components/tooltip'\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', 'panel-change'],\n  setup(props, ctx) {\n    const { t, lang } = useLocale()\n    const pickerBase = inject('EP_PICKER_BASE') as any\n    const popper = inject(TOOLTIP_INJECTION_KEY)\n    const {\n      shortcuts,\n      disabledDate,\n      cellClassName,\n      defaultTime,\n      arrowControl,\n    } = pickerBase.props\n    const defaultValue = toRef(pickerBase.props, 'defaultValue')\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      handlePanelChange('month')\n    }\n\n    const nextMonth_ = () => {\n      innerDate.value = innerDate.value.add(1, 'month')\n      handlePanelChange('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      handlePanelChange('year')\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      handlePanelChange('year')\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    watch(\n      () => currentView.value,\n      () => {\n        popper?.updatePopper()\n      }\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      handlePanelChange('month')\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      handlePanelChange('year')\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.value) 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.value) 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.value).locale(lang.value)\n      if (!defaultValue.value) {\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    const handlePanelChange = (mode: 'month' | 'year') => {\n      ctx.emit(\n        'panel-change',\n        innerDate.value.toDate(),\n        mode,\n        currentView.value\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      () => defaultValue.value,\n      (val) => {\n        if (val) {\n          innerDate.value = getDefaultValue()\n        }\n      },\n      { immediate: true }\n    )\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":["_createElementVNode"],"mappings":";;;;;;;;;;EAY+B;;;;;;EAYF;;qBACb,KAAK,EAAC,6BAA6B;;;;;;sBAuFtC,KAAK,EAAC;eA4Bb,KAAK,EAAC;;;;;;;;;;;;;;;;;;;;;;;;;yDAjIqB;;;;;;gBAKvB;;;;;;;iCAOJ;;;cAEI;;;;2BAIS;yBACC;;;;6CAIV;;;;;2BAQY;;4BAEC;;;;;;qCAMM;2BACVA;;;;;;;wBAIX;;;;;;;gBASQ;;;;;YAKJ;gCAAS,CAAgB;;;;;;;gBAIrB;;;;;YAKJ;;gBAAS;;;;;;;;;YAIT,UAAM;YACL;iCACG;0BAEN;YAEE;YACA,KAAK;YAEJ,OAAK;;;;;gBAIF;;;;;YAKJ;gCAAS,CAAiB;;;;;;;gBAItB;;;;;YAKJ;;;;;;;;;;;;;;;;kCAMiB;;;+BAGH;;;;;6BAGhB;;oBAEO,EAAE;;;;;;;;;sBAOA;;;kDAGe;;;;;;;;QAW1B,IAAI,EAAC;QACL;QACA,OAAM;;;6BAGN;;;;;;;MAEF;;;;;"}