element-plus/es/components/date-picker-panel/src/date-picker-com/panel-date-range.mjs.map

A Component Library for Vue 3

{"version":3,"file":"panel-date-range.mjs","names":[],"sources":["../../../../../../../packages/components/date-picker-panel/src/date-picker-com/panel-date-range.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[\n      ppNs.b(),\n      drpNs.b(),\n      ppNs.is('border', border),\n      ppNs.is('disabled', dateRangeDisabled),\n      {\n        'has-sidebar': $slots.sidebar || hasShortcuts,\n        'has-time': showTime,\n      },\n    ]\"\n  >\n    <div :class=\"ppNs.e('body-wrapper')\">\n      <slot name=\"sidebar\" :class=\"ppNs.e('sidebar')\" />\n      <div v-if=\"hasShortcuts\" :class=\"ppNs.e('sidebar')\">\n        <button\n          v-for=\"(shortcut, key) in shortcuts\"\n          :key=\"key\"\n          type=\"button\"\n          :disabled=\"dateRangeDisabled\"\n          :class=\"ppNs.e('shortcut')\"\n          @click=\"handleShortcutClick(shortcut)\"\n        >\n          {{ shortcut.text }}\n        </button>\n      </div>\n      <div :class=\"ppNs.e('body')\">\n        <div v-if=\"showTime\" :class=\"drpNs.e('time-header')\">\n          <span :class=\"drpNs.e('editors-wrap')\">\n            <span :class=\"drpNs.e('time-picker-wrap')\">\n              <el-input\n                size=\"small\"\n                :disabled=\"rangeState.selecting || dateRangeDisabled\"\n                :placeholder=\"t('el.datepicker.startDate')\"\n                :class=\"drpNs.e('editor')\"\n                :model-value=\"minVisibleDate\"\n                :validate-event=\"false\"\n                :readonly=\"!editable\"\n                @input=\"(val) => handleDateInput(val, 'min')\"\n                @change=\"(val) => handleDateChange(val, 'min')\"\n              />\n            </span>\n            <span\n              v-clickoutside=\"handleMinTimeClose\"\n              :class=\"drpNs.e('time-picker-wrap')\"\n            >\n              <el-input\n                size=\"small\"\n                :class=\"drpNs.e('editor')\"\n                :disabled=\"rangeState.selecting || dateRangeDisabled\"\n                :placeholder=\"t('el.datepicker.startTime')\"\n                :model-value=\"minVisibleTime\"\n                :validate-event=\"false\"\n                :readonly=\"!editable\"\n                @focus=\"minTimePickerVisible = true\"\n                @input=\"(val) => handleTimeInput(val, 'min')\"\n                @change=\"(val) => handleTimeChange(val, 'min')\"\n              />\n              <time-pick-panel\n                :visible=\"minTimePickerVisible\"\n                :format=\"timeFormat\"\n                datetime-role=\"start\"\n                :parsed-value=\"minDate || leftDate\"\n                @pick=\"handleMinTimePick\"\n              />\n            </span>\n          </span>\n          <span>\n            <el-icon><arrow-right /></el-icon>\n          </span>\n          <span :class=\"drpNs.e('editors-wrap')\" class=\"is-right\">\n            <span :class=\"drpNs.e('time-picker-wrap')\">\n              <el-input\n                size=\"small\"\n                :class=\"drpNs.e('editor')\"\n                :disabled=\"rangeState.selecting || dateRangeDisabled\"\n                :placeholder=\"t('el.datepicker.endDate')\"\n                :model-value=\"maxVisibleDate\"\n                :readonly=\"!minDate || !editable\"\n                :validate-event=\"false\"\n                @input=\"(val) => handleDateInput(val, 'max')\"\n                @change=\"(val) => handleDateChange(val, 'max')\"\n              />\n            </span>\n            <span\n              v-clickoutside=\"handleMaxTimeClose\"\n              :class=\"drpNs.e('time-picker-wrap')\"\n            >\n              <el-input\n                size=\"small\"\n                :class=\"drpNs.e('editor')\"\n                :disabled=\"rangeState.selecting || dateRangeDisabled\"\n                :placeholder=\"t('el.datepicker.endTime')\"\n                :model-value=\"maxVisibleTime\"\n                :readonly=\"!minDate || !editable\"\n                :validate-event=\"false\"\n                @focus=\"minDate && (maxTimePickerVisible = true)\"\n                @input=\"(val) => handleTimeInput(val, 'max')\"\n                @change=\"(val) => handleTimeChange(val, 'max')\"\n              />\n              <time-pick-panel\n                datetime-role=\"end\"\n                :visible=\"maxTimePickerVisible\"\n                :format=\"timeFormat\"\n                :parsed-value=\"maxDate || rightDate\"\n                @pick=\"handleMaxTimePick\"\n              />\n            </span>\n          </span>\n        </div>\n        <div :class=\"[ppNs.e('content'), drpNs.e('content')]\" class=\"is-left\">\n          <div :class=\"drpNs.e('header')\">\n            <button\n              type=\"button\"\n              :class=\"ppNs.e('icon-btn')\"\n              :aria-label=\"t(`el.datepicker.prevYear`)\"\n              class=\"d-arrow-left\"\n              :disabled=\"dateRangeDisabled\"\n              @click=\"leftPrevYear\"\n            >\n              <slot name=\"prev-year\">\n                <el-icon>\n                  <d-arrow-left />\n                </el-icon>\n              </slot>\n            </button>\n            <button\n              v-show=\"leftCurrentView === 'date'\"\n              type=\"button\"\n              :class=\"ppNs.e('icon-btn')\"\n              :aria-label=\"t(`el.datepicker.prevMonth`)\"\n              class=\"arrow-left\"\n              :disabled=\"dateRangeDisabled\"\n              @click=\"leftPrevMonth\"\n            >\n              <slot name=\"prev-month\">\n                <el-icon>\n                  <arrow-left />\n                </el-icon>\n              </slot>\n            </button>\n            <button\n              v-if=\"unlinkPanels\"\n              type=\"button\"\n              :disabled=\"!enableYearArrow || dateRangeDisabled\"\n              :class=\"[\n                ppNs.e('icon-btn'),\n                ppNs.is('disabled', !enableYearArrow || dateRangeDisabled),\n              ]\"\n              :aria-label=\"t(`el.datepicker.nextYear`)\"\n              class=\"d-arrow-right\"\n              @click=\"leftNextYear\"\n            >\n              <slot name=\"next-year\">\n                <el-icon>\n                  <d-arrow-right />\n                </el-icon>\n              </slot>\n            </button>\n            <button\n              v-if=\"unlinkPanels && leftCurrentView === 'date'\"\n              type=\"button\"\n              :disabled=\"!enableMonthArrow || dateRangeDisabled\"\n              :class=\"[\n                ppNs.e('icon-btn'),\n                ppNs.is('disabled', !enableMonthArrow || dateRangeDisabled),\n              ]\"\n              :aria-label=\"t(`el.datepicker.nextMonth`)\"\n              class=\"arrow-right\"\n              @click=\"leftNextMonth\"\n            >\n              <slot name=\"next-month\">\n                <el-icon>\n                  <arrow-right />\n                </el-icon>\n              </slot>\n            </button>\n            <div>\n              <span\n                role=\"button\"\n                :class=\"drpNs.e('header-label')\"\n                aria-live=\"polite\"\n                :tabindex=\"disabled ? undefined : 0\"\n                :aria-disabled=\"disabled\"\n                @keydown.enter=\"showLeftPicker('year')\"\n                @click=\"showLeftPicker('year')\"\n              >\n                {{ leftYearLabel }}\n              </span>\n              <span\n                v-show=\"leftCurrentView === 'date'\"\n                role=\"button\"\n                aria-live=\"polite\"\n                :tabindex=\"disabled ? undefined : 0\"\n                :aria-disabled=\"disabled\"\n                :class=\"[\n                  drpNs.e('header-label'),\n                  { active: leftCurrentView === 'month' },\n                ]\"\n                @keydown.enter=\"showLeftPicker('month')\"\n                @click=\"showLeftPicker('month')\"\n              >\n                {{ t(`el.datepicker.month${leftDate.month() + 1}`) }}\n              </span>\n            </div>\n          </div>\n          <date-table\n            v-if=\"leftCurrentView === 'date'\"\n            ref=\"leftCurrentViewRef\"\n            selection-mode=\"range\"\n            :date=\"leftDate\"\n            :min-date=\"minDate\"\n            :max-date=\"maxDate\"\n            :range-state=\"rangeState\"\n            :disabled-date=\"disabledDate\"\n            :cell-class-name=\"cellClassName\"\n            :show-week-number=\"showWeekNumber\"\n            :disabled=\"dateRangeDisabled\"\n            @changerange=\"handleChangeRange\"\n            @pick=\"handleRangePick\"\n            @select=\"onSelect\"\n          />\n          <year-table\n            v-if=\"leftCurrentView === 'year'\"\n            ref=\"leftCurrentViewRef\"\n            selection-mode=\"year\"\n            :date=\"leftDate\"\n            :disabled-date=\"disabledDate\"\n            :parsed-value=\"parsedValue\"\n            :disabled=\"dateRangeDisabled\"\n            @pick=\"handleLeftYearPick\"\n          />\n          <month-table\n            v-if=\"leftCurrentView === 'month'\"\n            ref=\"leftCurrentViewRef\"\n            selection-mode=\"month\"\n            :date=\"leftDate\"\n            :parsed-value=\"parsedValue\"\n            :disabled-date=\"disabledDate\"\n            :disabled=\"dateRangeDisabled\"\n            @pick=\"handleLeftMonthPick\"\n          />\n        </div>\n        <div :class=\"[ppNs.e('content'), drpNs.e('content')]\" class=\"is-right\">\n          <div :class=\"drpNs.e('header')\">\n            <button\n              v-if=\"unlinkPanels\"\n              type=\"button\"\n              :disabled=\"!enableYearArrow || dateRangeDisabled\"\n              :class=\"[\n                ppNs.e('icon-btn'),\n                ppNs.is('disabled', !enableYearArrow || dateRangeDisabled),\n              ]\"\n              :aria-label=\"t(`el.datepicker.prevYear`)\"\n              class=\"d-arrow-left\"\n              @click=\"rightPrevYear\"\n            >\n              <slot name=\"prev-year\">\n                <el-icon>\n                  <d-arrow-left />\n                </el-icon>\n              </slot>\n            </button>\n            <button\n              v-if=\"unlinkPanels && rightCurrentView === 'date'\"\n              type=\"button\"\n              :disabled=\"!enableMonthArrow || dateRangeDisabled\"\n              :class=\"[\n                ppNs.e('icon-btn'),\n                ppNs.is('disabled', !enableMonthArrow || dateRangeDisabled),\n              ]\"\n              :aria-label=\"t(`el.datepicker.prevMonth`)\"\n              class=\"arrow-left\"\n              @click=\"rightPrevMonth\"\n            >\n              <slot name=\"prev-month\">\n                <el-icon>\n                  <arrow-left />\n                </el-icon>\n              </slot>\n            </button>\n            <button\n              type=\"button\"\n              :aria-label=\"t(`el.datepicker.nextYear`)\"\n              :class=\"ppNs.e('icon-btn')\"\n              :disabled=\"dateRangeDisabled\"\n              class=\"d-arrow-right\"\n              @click=\"rightNextYear\"\n            >\n              <slot name=\"next-year\">\n                <el-icon>\n                  <d-arrow-right />\n                </el-icon>\n              </slot>\n            </button>\n            <button\n              v-show=\"rightCurrentView === 'date'\"\n              type=\"button\"\n              :class=\"ppNs.e('icon-btn')\"\n              :disabled=\"dateRangeDisabled\"\n              :aria-label=\"t(`el.datepicker.nextMonth`)\"\n              class=\"arrow-right\"\n              @click=\"rightNextMonth\"\n            >\n              <slot name=\"next-month\">\n                <el-icon>\n                  <arrow-right />\n                </el-icon>\n              </slot>\n            </button>\n            <div>\n              <span\n                role=\"button\"\n                :class=\"drpNs.e('header-label')\"\n                aria-live=\"polite\"\n                :tabindex=\"disabled ? undefined : 0\"\n                :aria-disabled=\"disabled\"\n                @keydown.enter=\"showRightPicker('year')\"\n                @click=\"showRightPicker('year')\"\n              >\n                {{ rightYearLabel }}\n              </span>\n              <span\n                v-show=\"rightCurrentView === 'date'\"\n                role=\"button\"\n                aria-live=\"polite\"\n                :tabindex=\"disabled ? undefined : 0\"\n                :aria-disabled=\"disabled\"\n                :class=\"[\n                  drpNs.e('header-label'),\n                  { active: rightCurrentView === 'month' },\n                ]\"\n                @keydown.enter=\"showRightPicker('month')\"\n                @click=\"showRightPicker('month')\"\n              >\n                {{ t(`el.datepicker.month${rightDate.month() + 1}`) }}\n              </span>\n            </div>\n          </div>\n          <date-table\n            v-if=\"rightCurrentView === 'date'\"\n            ref=\"rightCurrentViewRef\"\n            selection-mode=\"range\"\n            :date=\"rightDate\"\n            :min-date=\"minDate\"\n            :max-date=\"maxDate\"\n            :range-state=\"rangeState\"\n            :disabled-date=\"disabledDate\"\n            :cell-class-name=\"cellClassName\"\n            :show-week-number=\"showWeekNumber\"\n            :disabled=\"dateRangeDisabled\"\n            @changerange=\"handleChangeRange\"\n            @pick=\"handleRangePick\"\n            @select=\"onSelect\"\n          />\n          <year-table\n            v-if=\"rightCurrentView === 'year'\"\n            ref=\"rightCurrentViewRef\"\n            selection-mode=\"year\"\n            :date=\"rightDate\"\n            :disabled-date=\"disabledDate\"\n            :parsed-value=\"parsedValue\"\n            :disabled=\"dateRangeDisabled\"\n            @pick=\"handleRightYearPick\"\n          />\n          <month-table\n            v-if=\"rightCurrentView === 'month'\"\n            ref=\"rightCurrentViewRef\"\n            selection-mode=\"month\"\n            :date=\"rightDate\"\n            :parsed-value=\"parsedValue\"\n            :disabled-date=\"disabledDate\"\n            :disabled=\"dateRangeDisabled\"\n            @pick=\"handleRightMonthPick\"\n          />\n        </div>\n      </div>\n    </div>\n    <div\n      v-if=\"showFooter && showTime && (showConfirm || clearable)\"\n      :class=\"ppNs.e('footer')\"\n    >\n      <el-button\n        v-if=\"clearable\"\n        text\n        size=\"small\"\n        :class=\"ppNs.e('link-btn')\"\n        @click=\"onClear\"\n      >\n        {{ t('el.datepicker.clear') }}\n      </el-button>\n      <el-button\n        v-if=\"showConfirm\"\n        plain\n        size=\"small\"\n        :class=\"ppNs.e('link-btn')\"\n        :disabled=\"btnDisabled\"\n        @click=\"handleRangeConfirm(false)\"\n      >\n        {{ t('el.datepicker.confirm') }}\n      </el-button>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, inject, nextTick, ref, toRef, unref, watch } from 'vue'\nimport dayjs from 'dayjs'\nimport { ClickOutside as vClickoutside } from '@element-plus/directives'\nimport { useLocale } from '@element-plus/hooks'\nimport ElButton from '@element-plus/components/button'\nimport ElInput from '@element-plus/components/input'\nimport {\n  DEFAULT_FORMATS_DATE,\n  DEFAULT_FORMATS_TIME,\n  PICKER_BASE_INJECTION_KEY,\n  TimePickPanel,\n  extractDateFormat,\n  extractTimeFormat,\n} from '@element-plus/components/time-picker'\nimport ElIcon from '@element-plus/components/icon'\nimport {\n  ArrowLeft,\n  ArrowRight,\n  DArrowLeft,\n  DArrowRight,\n} from '@element-plus/icons-vue'\nimport { panelDateRangeProps } from '../props/panel-date-range'\nimport { useRangePicker } from '../composables/use-range-picker'\nimport {\n  correctlyParseUserInput,\n  getDefaultValue,\n  isValidRange,\n} from '../utils'\nimport { usePanelDateRange } from '../composables/use-panel-date-range'\nimport { ROOT_PICKER_IS_DEFAULT_FORMAT_INJECTION_KEY } from '../constants'\nimport YearTable from './basic-year-table.vue'\nimport MonthTable from './basic-month-table.vue'\nimport DateTable from './basic-date-table.vue'\nimport { useFormDisabled } from '@element-plus/components/form'\n\nimport type { Ref } from 'vue'\nimport type { Dayjs } from 'dayjs'\n\ntype ChangeType = 'min' | 'max'\ntype UserInput = {\n  min: string | null\n  max: string | null\n}\n\nconst props = defineProps(panelDateRangeProps)\nconst emit = defineEmits([\n  'pick',\n  'set-picker-option',\n  'calendar-change',\n  'panel-change',\n  'clear',\n])\n\nconst unit = 'month'\n// FIXME: fix the type for ep picker\nconst pickerBase = inject(PICKER_BASE_INJECTION_KEY) as any\nconst isDefaultFormat = inject(\n  ROOT_PICKER_IS_DEFAULT_FORMAT_INJECTION_KEY,\n  undefined\n) as any\nconst { disabledDate, cellClassName, defaultTime, clearable } = pickerBase.props\nconst format: Ref<string | undefined> = toRef(pickerBase.props, 'format')\nconst shortcuts = toRef(pickerBase.props, 'shortcuts')\nconst defaultValue = toRef(pickerBase.props, 'defaultValue')\nconst { lang } = useLocale()\nconst leftDate = ref<Dayjs>(dayjs().locale(lang.value))\nconst rightDate = ref<Dayjs>(dayjs().locale(lang.value).add(1, unit))\n\nconst {\n  minDate,\n  maxDate,\n  rangeState,\n  ppNs,\n  drpNs,\n  handleChangeRange,\n  handleRangeConfirm,\n  handleShortcutClick,\n  onSelect,\n  parseValue,\n  t,\n} = useRangePicker(props, {\n  defaultValue,\n  defaultTime,\n  leftDate,\n  rightDate,\n  unit,\n  sortDates,\n})\n\nwatch(\n  () => props.visible,\n  (visible) => {\n    if (!visible && rangeState.value.selecting) {\n      parseValue(props.parsedValue)\n      onSelect(false)\n    }\n  }\n)\n\nconst dateUserInput = ref<UserInput>({\n  min: null,\n  max: null,\n})\n\nconst timeUserInput = ref<UserInput>({\n  min: null,\n  max: null,\n})\n\nconst {\n  leftCurrentView,\n  rightCurrentView,\n  leftCurrentViewRef,\n  rightCurrentViewRef,\n  leftYear,\n  rightYear,\n  leftMonth,\n  rightMonth,\n  leftYearLabel,\n  rightYearLabel,\n  showLeftPicker,\n  showRightPicker,\n  handleLeftYearPick,\n  handleRightYearPick,\n  handleLeftMonthPick,\n  handleRightMonthPick,\n  handlePanelChange,\n  adjustDateByView,\n} = usePanelDateRange(props, emit, leftDate, rightDate)\n\nconst hasShortcuts = computed(() => !!shortcuts.value.length)\n\nconst minVisibleDate = computed(() => {\n  if (dateUserInput.value.min !== null) return dateUserInput.value.min\n  if (minDate.value) return minDate.value.format(dateFormat.value)\n  return ''\n})\n\nconst maxVisibleDate = computed(() => {\n  if (dateUserInput.value.max !== null) return dateUserInput.value.max\n  if (maxDate.value || minDate.value)\n    return (maxDate.value || minDate.value)!.format(dateFormat.value)\n  return ''\n})\n\nconst minVisibleTime = computed(() => {\n  if (timeUserInput.value.min !== null) return timeUserInput.value.min\n  if (minDate.value) return minDate.value.format(timeFormat.value)\n  return ''\n})\n\nconst maxVisibleTime = computed(() => {\n  if (timeUserInput.value.max !== null) return timeUserInput.value.max\n  if (maxDate.value || minDate.value)\n    return (maxDate.value || minDate.value)!.format(timeFormat.value)\n  return ''\n})\n\nconst timeFormat = computed(() => {\n  return (\n    props.timeFormat ||\n    extractTimeFormat(format.value || '') ||\n    DEFAULT_FORMATS_TIME\n  )\n})\n\nconst dateFormat = computed(() => {\n  return (\n    props.dateFormat ||\n    extractDateFormat(format.value || '') ||\n    DEFAULT_FORMATS_DATE\n  )\n})\n\nconst isValidValue = (date: [Dayjs, Dayjs]) => {\n  return (\n    isValidRange(date) &&\n    (disabledDate\n      ? !disabledDate(date[0].toDate()) && !disabledDate(date[1].toDate())\n      : true)\n  )\n}\n\nconst leftPrevYear = () => {\n  leftDate.value = adjustDateByView(\n    leftCurrentView.value,\n    leftDate.value,\n    false\n  )\n\n  if (!props.unlinkPanels) {\n    rightDate.value = leftDate.value.add(1, 'month')\n  }\n  handlePanelChange('year')\n}\n\nconst leftPrevMonth = () => {\n  leftDate.value = leftDate.value.subtract(1, 'month')\n  if (!props.unlinkPanels) {\n    rightDate.value = leftDate.value.add(1, 'month')\n  }\n  handlePanelChange('month')\n}\n\nconst rightNextYear = () => {\n  if (!props.unlinkPanels) {\n    leftDate.value = adjustDateByView(\n      rightCurrentView.value,\n      leftDate.value,\n      true\n    )\n\n    rightDate.value = leftDate.value.add(1, 'month')\n  } else {\n    rightDate.value = adjustDateByView(\n      rightCurrentView.value,\n      rightDate.value,\n      true\n    )\n  }\n  handlePanelChange('year')\n}\n\nconst rightNextMonth = () => {\n  if (!props.unlinkPanels) {\n    leftDate.value = leftDate.value.add(1, 'month')\n    rightDate.value = leftDate.value.add(1, 'month')\n  } else {\n    rightDate.value = rightDate.value.add(1, 'month')\n  }\n  handlePanelChange('month')\n}\n\nconst leftNextYear = () => {\n  leftDate.value = adjustDateByView(leftCurrentView.value, leftDate.value, true)\n\n  handlePanelChange('year')\n}\n\nconst leftNextMonth = () => {\n  leftDate.value = leftDate.value.add(1, 'month')\n  handlePanelChange('month')\n}\n\nconst rightPrevYear = () => {\n  rightDate.value = adjustDateByView(\n    rightCurrentView.value,\n    rightDate.value,\n    false\n  )\n\n  handlePanelChange('year')\n}\n\nconst rightPrevMonth = () => {\n  rightDate.value = rightDate.value.subtract(1, 'month')\n  handlePanelChange('month')\n}\n\nconst enableMonthArrow = computed(() => {\n  const nextMonth = (leftMonth.value + 1) % 12\n  const yearOffset = leftMonth.value + 1 >= 12 ? 1 : 0\n  return (\n    props.unlinkPanels &&\n    new Date(leftYear.value + yearOffset, nextMonth) <\n      new Date(rightYear.value, rightMonth.value)\n  )\n})\n\nconst enableYearArrow = computed(() => {\n  return (\n    props.unlinkPanels &&\n    rightYear.value * 12 +\n      rightMonth.value -\n      (leftYear.value * 12 + leftMonth.value + 1) >=\n      12\n  )\n})\n\nconst dateRangeDisabled = useFormDisabled()\n\nconst btnDisabled = computed(() => {\n  return !(\n    minDate.value &&\n    maxDate.value &&\n    !rangeState.value.selecting &&\n    isValidRange([minDate.value, maxDate.value]) &&\n    !dateRangeDisabled.value\n  )\n})\n\nconst showTime = computed(\n  () => props.type === 'datetime' || props.type === 'datetimerange'\n)\n\nconst formatEmit = (emitDayjs: Dayjs | null, index?: number) => {\n  if (!emitDayjs) return\n  if (defaultTime) {\n    const defaultTimeD = dayjs(\n      defaultTime[index as number] || defaultTime\n    ).locale(lang.value)\n    return defaultTimeD\n      .year(emitDayjs.year())\n      .month(emitDayjs.month())\n      .date(emitDayjs.date())\n  }\n  return emitDayjs\n}\n\nconst handleRangePick = (\n  val: {\n    minDate: Dayjs\n    maxDate: Dayjs | null\n  },\n  close = true\n) => {\n  const min_ = val.minDate\n  const max_ = val.maxDate\n  const minDate_ = formatEmit(min_, 0)\n  const maxDate_ = formatEmit(max_, 1)\n\n  if (maxDate.value === maxDate_ && minDate.value === minDate_) {\n    return\n  }\n  emit('calendar-change', [min_.toDate(), max_ && max_.toDate()])\n  maxDate.value = maxDate_\n  minDate.value = minDate_\n\n  if (!showTime.value && close) {\n    close = !minDate_ || !maxDate_\n  }\n  handleRangeConfirm(close)\n}\n\nconst minTimePickerVisible = ref(false)\nconst maxTimePickerVisible = ref(false)\n\nconst handleMinTimeClose = () => {\n  minTimePickerVisible.value = false\n}\n\nconst handleMaxTimeClose = () => {\n  maxTimePickerVisible.value = false\n}\n\nconst handleDateInput = (value: string | null, type: ChangeType) => {\n  dateUserInput.value[type] = value\n  const parsedValueD = dayjs(value, dateFormat.value).locale(lang.value)\n  if (parsedValueD.isValid()) {\n    if (disabledDate && disabledDate(parsedValueD.toDate())) {\n      return\n    }\n    if (type === 'min') {\n      leftDate.value = parsedValueD\n      minDate.value = (minDate.value || leftDate.value)\n        .year(parsedValueD.year())\n        .month(parsedValueD.month())\n        .date(parsedValueD.date())\n      if (\n        !props.unlinkPanels &&\n        (!maxDate.value || maxDate.value.isBefore(minDate.value))\n      ) {\n        rightDate.value = parsedValueD.add(1, 'month')\n        maxDate.value = minDate.value.add(1, 'month')\n      }\n    } else {\n      rightDate.value = parsedValueD\n      maxDate.value = (maxDate.value || rightDate.value)\n        .year(parsedValueD.year())\n        .month(parsedValueD.month())\n        .date(parsedValueD.date())\n      if (\n        !props.unlinkPanels &&\n        (!minDate.value || minDate.value.isAfter(maxDate.value))\n      ) {\n        leftDate.value = parsedValueD.subtract(1, 'month')\n        minDate.value = maxDate.value.subtract(1, 'month')\n      }\n    }\n    sortDates(minDate.value, maxDate.value)\n    handleRangeConfirm(true)\n  }\n}\n\nconst handleDateChange = (_: unknown, type: ChangeType) => {\n  dateUserInput.value[type] = null\n}\n\nconst handleTimeInput = (value: string | null, type: ChangeType) => {\n  timeUserInput.value[type] = value\n  const parsedValueD = dayjs(value, timeFormat.value).locale(lang.value)\n\n  if (parsedValueD.isValid()) {\n    if (type === 'min') {\n      minTimePickerVisible.value = true\n      minDate.value = (minDate.value || leftDate.value)\n        .hour(parsedValueD.hour())\n        .minute(parsedValueD.minute())\n        .second(parsedValueD.second())\n      leftDate.value = minDate.value\n    } else {\n      maxTimePickerVisible.value = true\n      maxDate.value = (maxDate.value || rightDate.value)\n        .hour(parsedValueD.hour())\n        .minute(parsedValueD.minute())\n        .second(parsedValueD.second())\n      rightDate.value = maxDate.value\n    }\n  }\n}\n\nconst handleTimeChange = (_value: string | null, type: ChangeType) => {\n  timeUserInput.value[type] = null\n  if (type === 'min') {\n    leftDate.value = minDate.value!\n    minTimePickerVisible.value = false\n    if (!maxDate.value || maxDate.value.isBefore(minDate.value)) {\n      maxDate.value = minDate.value\n    }\n  } else {\n    rightDate.value = maxDate.value!\n    maxTimePickerVisible.value = false\n    if (maxDate.value && maxDate.value.isBefore(minDate.value)) {\n      minDate.value = maxDate.value\n    }\n  }\n  handleRangeConfirm(true)\n}\n\nconst handleMinTimePick = (value: Dayjs, visible: boolean, first: boolean) => {\n  if (timeUserInput.value.min) return\n  if (value) {\n    minDate.value = (minDate.value || leftDate.value)\n      .hour(value.hour())\n      .minute(value.minute())\n      .second(value.second())\n  }\n\n  if (!first) {\n    minTimePickerVisible.value = visible\n  }\n\n  if (!maxDate.value || maxDate.value.isBefore(minDate.value)) {\n    maxDate.value = minDate.value\n    rightDate.value = value\n    nextTick(() => {\n      parseValue(props.parsedValue)\n    })\n  }\n  handleRangeConfirm(true)\n}\n\nconst handleMaxTimePick = (\n  value: Dayjs | null,\n  visible: boolean,\n  first: boolean\n) => {\n  if (timeUserInput.value.max) return\n  if (value) {\n    maxDate.value = (maxDate.value || rightDate.value)\n      .hour(value.hour())\n      .minute(value.minute())\n      .second(value.second())\n  }\n\n  if (!first) {\n    maxTimePickerVisible.value = visible\n  }\n\n  if (maxDate.value && maxDate.value.isBefore(minDate.value)) {\n    minDate.value = maxDate.value\n  }\n  handleRangeConfirm(true)\n}\n\nconst onClear = () => {\n  handleClear()\n  emit('clear')\n}\n\nconst handleClear = () => {\n  let valueOnClear = null\n  if (pickerBase?.emptyValues) {\n    valueOnClear = pickerBase.emptyValues.valueOnClear.value\n  }\n  leftDate.value = getDefaultValue(unref(defaultValue), {\n    lang: unref(lang),\n    unit: 'month',\n    unlinkPanels: props.unlinkPanels,\n  })[0]\n  rightDate.value = leftDate.value.add(1, 'month')\n  maxDate.value = undefined\n  minDate.value = undefined\n\n  handleRangeConfirm(true)\n  emit('pick', valueOnClear)\n}\n\nconst parseUserInput = (value: Dayjs | Dayjs[]) => {\n  return correctlyParseUserInput(\n    value,\n    format.value || '',\n    lang.value,\n    isDefaultFormat\n  )\n}\nfunction sortDates(minDate: Dayjs | undefined, maxDate: Dayjs | undefined) {\n  if (props.unlinkPanels && maxDate) {\n    const minDateYear = minDate?.year() || 0\n    const minDateMonth = minDate?.month() || 0\n    const maxDateYear = maxDate.year()\n    const maxDateMonth = maxDate.month()\n    rightDate.value =\n      minDateYear === maxDateYear && minDateMonth === maxDateMonth\n        ? maxDate.add(1, unit)\n        : maxDate\n  } else {\n    rightDate.value = leftDate.value.add(1, unit)\n    if (maxDate) {\n      rightDate.value = rightDate.value\n        .hour(maxDate.hour())\n        .minute(maxDate.minute())\n        .second(maxDate.second())\n    }\n  }\n}\n\nemit('set-picker-option', ['isValidValue', isValidValue])\nemit('set-picker-option', ['parseUserInput', parseUserInput])\nemit('set-picker-option', ['handleClear', handleClear])\n</script>\n"],"mappings":""}