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

package/es/components/date-picker/src/date-picker-com/panel-date-range.vue_vue_type_template_id_62b45ab2_lang.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"panel-date-range.vue_vue_type_template_id_62b45ab2_lang.mjs","sources":["../../../../../../../packages/components/date-picker/src/date-picker-com/panel-date-range.vue?vue&type=template&id=62b45ab2&lang.js"],"sourcesContent":["<template>\n  <div\n    class=\"el-picker-panel el-date-range-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-range-picker__time-header\">\n          <span class=\"el-date-range-picker__editors-wrap\">\n            <span class=\"el-date-range-picker__time-picker-wrap\">\n              <el-input\n                size=\"small\"\n                :disabled=\"rangeState.selecting\"\n                :placeholder=\"t('el.datepicker.startDate')\"\n                class=\"el-date-range-picker__editor\"\n                :model-value=\"minVisibleDate\"\n                @input=\"(val) => handleDateInput(val, 'min')\"\n                @change=\"(val) => handleDateChange(val, 'min')\"\n              />\n            </span>\n            <span\n              v-clickoutside=\"handleMinTimeClose\"\n              class=\"el-date-range-picker__time-picker-wrap\"\n            >\n              <el-input\n                size=\"small\"\n                class=\"el-date-range-picker__editor\"\n                :disabled=\"rangeState.selecting\"\n                :placeholder=\"t('el.datepicker.startTime')\"\n                :model-value=\"minVisibleTime\"\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                :time-arrow-control=\"arrowControl\"\n                :parsed-value=\"leftDate\"\n                @pick=\"handleMinTimePick\"\n              />\n            </span>\n          </span>\n          <span>\n            <el-icon><arrow-right /></el-icon>\n          </span>\n          <span class=\"el-date-range-picker__editors-wrap is-right\">\n            <span class=\"el-date-range-picker__time-picker-wrap\">\n              <el-input\n                size=\"small\"\n                class=\"el-date-range-picker__editor\"\n                :disabled=\"rangeState.selecting\"\n                :placeholder=\"t('el.datepicker.endDate')\"\n                :model-value=\"maxVisibleDate\"\n                :readonly=\"!minDate\"\n                @input=\"(val) => handleDateInput(val, 'max')\"\n                @change=\"(val) => handleDateChange(val, 'max')\"\n              />\n            </span>\n            <span\n              v-clickoutside=\"handleMaxTimeClose\"\n              class=\"el-date-range-picker__time-picker-wrap\"\n            >\n              <el-input\n                size=\"small\"\n                class=\"el-date-range-picker__editor\"\n                :disabled=\"rangeState.selecting\"\n                :placeholder=\"t('el.datepicker.endTime')\"\n                :model-value=\"maxVisibleTime\"\n                :readonly=\"!minDate\"\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                :time-arrow-control=\"arrowControl\"\n                :parsed-value=\"rightDate\"\n                @pick=\"handleMaxTimePick\"\n              />\n            </span>\n          </span>\n        </div>\n        <div\n          class=\"el-picker-panel__content el-date-range-picker__content is-left\"\n        >\n          <div class=\"el-date-range-picker__header\">\n            <button\n              type=\"button\"\n              class=\"el-picker-panel__icon-btn d-arrow-left\"\n              @click=\"leftPrevYear\"\n            >\n              <el-icon><d-arrow-left /></el-icon>\n            </button>\n            <button\n              type=\"button\"\n              class=\"el-picker-panel__icon-btn arrow-left\"\n              @click=\"leftPrevMonth\"\n            >\n              <el-icon><arrow-left /></el-icon>\n            </button>\n            <button\n              v-if=\"unlinkPanels\"\n              type=\"button\"\n              :disabled=\"!enableYearArrow\"\n              :class=\"{ 'is-disabled': !enableYearArrow }\"\n              class=\"el-picker-panel__icon-btn d-arrow-right\"\n              @click=\"leftNextYear\"\n            >\n              <el-icon><d-arrow-right /></el-icon>\n            </button>\n            <button\n              v-if=\"unlinkPanels\"\n              type=\"button\"\n              :disabled=\"!enableMonthArrow\"\n              :class=\"{ 'is-disabled': !enableMonthArrow }\"\n              class=\"el-picker-panel__icon-btn arrow-right\"\n              @click=\"leftNextMonth\"\n            >\n              <el-icon><arrow-right /></el-icon>\n            </button>\n            <div>{{ leftLabel }}</div>\n          </div>\n          <date-table\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            @changerange=\"handleChangeRange\"\n            @pick=\"handleRangePick\"\n            @select=\"onSelect\"\n          />\n        </div>\n        <div\n          class=\"\n            el-picker-panel__content\n            el-date-range-picker__content\n            is-right\n          \"\n        >\n          <div class=\"el-date-range-picker__header\">\n            <button\n              v-if=\"unlinkPanels\"\n              type=\"button\"\n              :disabled=\"!enableYearArrow\"\n              :class=\"{ 'is-disabled': !enableYearArrow }\"\n              class=\"el-picker-panel__icon-btn d-arrow-left\"\n              @click=\"rightPrevYear\"\n            >\n              <el-icon><d-arrow-left /></el-icon>\n            </button>\n            <button\n              v-if=\"unlinkPanels\"\n              type=\"button\"\n              :disabled=\"!enableMonthArrow\"\n              :class=\"{ 'is-disabled': !enableMonthArrow }\"\n              class=\"el-picker-panel__icon-btn arrow-left\"\n              @click=\"rightPrevMonth\"\n            >\n              <el-icon><arrow-left /></el-icon>\n            </button>\n            <button\n              type=\"button\"\n              class=\"el-picker-panel__icon-btn d-arrow-right\"\n              @click=\"rightNextYear\"\n            >\n              <el-icon><d-arrow-right /></el-icon>\n            </button>\n            <button\n              type=\"button\"\n              class=\"el-picker-panel__icon-btn arrow-right\"\n              @click=\"rightNextMonth\"\n            >\n              <el-icon><arrow-right /></el-icon>\n            </button>\n            <div>{{ rightLabel }}</div>\n          </div>\n          <date-table\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            @changerange=\"handleChangeRange\"\n            @pick=\"handleRangePick\"\n            @select=\"onSelect\"\n          />\n        </div>\n      </div>\n    </div>\n    <div v-if=\"showTime\" class=\"el-picker-panel__footer\">\n      <el-button\n        v-if=\"clearable\"\n        size=\"mini\"\n        type=\"text\"\n        class=\"el-picker-panel__link-btn\"\n        @click=\"handleClear\"\n      >\n        {{ t('el.datepicker.clear') }}\n      </el-button>\n      <el-button\n        plain\n        size=\"mini\"\n        class=\"el-picker-panel__link-btn\"\n        :disabled=\"btnDisabled\"\n        @click=\"handleConfirm(false)\"\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 { 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'\n\nimport type { PropType } from 'vue'\nimport type { Dayjs } from 'dayjs'\nimport type { IDatePickerType } from '../date-picker.type'\n\nexport default defineComponent({\n  directives: { clickoutside: ClickOutside },\n\n  components: {\n    TimePickPanel,\n    DateTable,\n    ElInput,\n    ElButton,\n    ElIcon,\n    DArrowLeft,\n    ArrowLeft,\n    DArrowRight,\n    ArrowRight,\n  },\n\n  props: {\n    unlinkPanels: Boolean,\n    parsedValue: {\n      type: Array as PropType<Dayjs[]>,\n    },\n    type: {\n      type: String as PropType<IDatePickerType>,\n      required: true,\n      validator: isValidDatePickType,\n    },\n  },\n\n  emits: ['pick', 'set-picker-option', 'calendar-change'],\n\n  setup(props, ctx) {\n    const { t, lang } = useLocaleInject()\n    const leftDate = ref(dayjs().locale(lang.value))\n    const rightDate = ref(dayjs().locale(lang.value).add(1, 'month'))\n    const minDate = ref(null)\n    const maxDate = ref(null)\n    const dateUserInput = ref({\n      min: null,\n      max: null,\n    })\n\n    const timeUserInput = ref({\n      min: null,\n      max: null,\n    })\n\n    const leftLabel = computed(() => {\n      return `${leftDate.value.year()} ${t('el.datepicker.year')} ${t(\n        `el.datepicker.month${leftDate.value.month() + 1}`\n      )}`\n    })\n\n    const rightLabel = computed(() => {\n      return `${rightDate.value.year()} ${t('el.datepicker.year')} ${t(\n        `el.datepicker.month${rightDate.value.month() + 1}`\n      )}`\n    })\n\n    const leftYear = computed(() => {\n      return leftDate.value.year()\n    })\n\n    const leftMonth = computed(() => {\n      return leftDate.value.month()\n    })\n\n    const rightYear = computed(() => {\n      return rightDate.value.year()\n    })\n\n    const rightMonth = computed(() => {\n      return rightDate.value.month()\n    })\n\n    const hasShortcuts = computed(() => !!shortcuts.length)\n\n    const 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\n    const 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\n    const 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\n    const 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\n    const timeFormat = computed(() => {\n      return extractTimeFormat(format)\n    })\n\n    const dateFormat = computed(() => {\n      return extractDateFormat(format)\n    })\n\n    const leftPrevYear = () => {\n      leftDate.value = leftDate.value.subtract(1, 'year')\n      if (!props.unlinkPanels) {\n        rightDate.value = leftDate.value.add(1, 'month')\n      }\n    }\n\n    const leftPrevMonth = () => {\n      leftDate.value = leftDate.value.subtract(1, 'month')\n      if (!props.unlinkPanels) {\n        rightDate.value = leftDate.value.add(1, 'month')\n      }\n    }\n\n    const rightNextYear = () => {\n      if (!props.unlinkPanels) {\n        leftDate.value = leftDate.value.add(1, 'year')\n        rightDate.value = leftDate.value.add(1, 'month')\n      } else {\n        rightDate.value = rightDate.value.add(1, 'year')\n      }\n    }\n\n    const 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    }\n\n    const leftNextYear = () => {\n      leftDate.value = leftDate.value.add(1, 'year')\n    }\n\n    const leftNextMonth = () => {\n      leftDate.value = leftDate.value.add(1, 'month')\n    }\n\n    const rightPrevYear = () => {\n      rightDate.value = rightDate.value.subtract(1, 'year')\n    }\n\n    const rightPrevMonth = () => {\n      rightDate.value = rightDate.value.subtract(1, 'month')\n    }\n\n    const 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\n    const 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\n    const isValidValue = (value) => {\n      return (\n        Array.isArray(value) &&\n        value[0] &&\n        value[1] &&\n        value[0].valueOf() <= value[1].valueOf()\n      )\n    }\n\n    const rangeState = ref({\n      endDate: null,\n      selecting: false,\n    })\n\n    const btnDisabled = computed(() => {\n      return !(\n        minDate.value &&\n        maxDate.value &&\n        !rangeState.value.selecting &&\n        isValidValue([minDate.value, maxDate.value])\n      )\n    })\n\n    const handleChangeRange = (val) => {\n      rangeState.value = val\n    }\n\n    const onSelect = (selecting) => {\n      rangeState.value.selecting = selecting\n      if (!selecting) {\n        rangeState.value.endDate = null\n      }\n    }\n\n    const showTime = computed(\n      () => props.type === 'datetime' || props.type === 'datetimerange'\n    )\n\n    const handleConfirm = (visible = false) => {\n      if (isValidValue([minDate.value, maxDate.value])) {\n        ctx.emit('pick', [minDate.value, maxDate.value], visible)\n      }\n    }\n\n    const formatEmit = (emitDayjs: Dayjs, index?) => {\n      if (!emitDayjs) return\n      if (defaultTime) {\n        const defaultTimeD = dayjs(defaultTime[index] || defaultTime).locale(\n          lang.value\n        )\n        return defaultTimeD\n          .year(emitDayjs.year())\n          .month(emitDayjs.month())\n          .date(emitDayjs.date())\n      }\n      return emitDayjs\n    }\n\n    const handleRangePick = (val, close = true) => {\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      ctx.emit('calendar-change', [min_.toDate(), max_ && max_.toDate()])\n      maxDate.value = maxDate_\n      minDate.value = minDate_\n\n      if (!close || showTime.value) return\n      handleConfirm()\n    }\n\n    const handleShortcutClick = (shortcut) => {\n      const shortcutValues =\n        typeof shortcut.value === 'function' ? shortcut.value() : shortcut.value\n      if (shortcutValues) {\n        ctx.emit('pick', [\n          dayjs(shortcutValues[0]).locale(lang.value),\n          dayjs(shortcutValues[1]).locale(lang.value),\n        ])\n        return\n      }\n      if (shortcut.onClick) {\n        shortcut.onClick(ctx)\n      }\n    }\n\n    const minTimePickerVisible = ref(false)\n    const maxTimePickerVisible = ref(false)\n\n    const handleMinTimeClose = () => {\n      minTimePickerVisible.value = false\n    }\n\n    const handleMaxTimeClose = () => {\n      maxTimePickerVisible.value = false\n    }\n\n    const handleDateInput = (value, type) => {\n      dateUserInput.value[type] = value\n      const parsedValueD = dayjs(value, dateFormat.value).locale(lang.value)\n\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 (!props.unlinkPanels) {\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 (!props.unlinkPanels) {\n            leftDate.value = parsedValueD.subtract(1, 'month')\n            minDate.value = maxDate.value.subtract(1, 'month')\n          }\n        }\n      }\n    }\n\n    const handleDateChange = (_, type) => {\n      dateUserInput.value[type] = null\n    }\n\n    const handleTimeInput = (value, type) => {\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          if (!maxDate.value || maxDate.value.isBefore(minDate.value)) {\n            maxDate.value = minDate.value\n          }\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          if (maxDate.value && maxDate.value.isBefore(minDate.value)) {\n            minDate.value = maxDate.value\n          }\n        }\n      }\n    }\n\n    const handleTimeChange = (value, type) => {\n      timeUserInput.value[type] = null\n      if (type === 'min') {\n        leftDate.value = minDate.value\n        minTimePickerVisible.value = false\n      } else {\n        rightDate.value = maxDate.value\n        maxTimePickerVisible.value = false\n      }\n    }\n\n    const handleMinTimePick = (value, visible, first) => {\n      if (timeUserInput.value.min) return\n      if (value) {\n        leftDate.value = 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      }\n    }\n\n    const handleMaxTimePick = (value, visible, first) => {\n      if (timeUserInput.value.max) return\n      if (value) {\n        rightDate.value = 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    }\n\n    const handleClear = () => {\n      leftDate.value = getDefaultValue()[0]\n      rightDate.value = leftDate.value.add(1, 'month')\n      ctx.emit('pick', null)\n    }\n\n    const formatToString = (value: Dayjs | Dayjs[]) => {\n      return Array.isArray(value)\n        ? value.map((_) => _.format(format))\n        : value.format(format)\n    }\n\n    const parseUserInput = (value: Dayjs | Dayjs[]) => {\n      return Array.isArray(value)\n        ? value.map((_) => dayjs(_, format).locale(lang.value))\n        : dayjs(value, format).locale(lang.value)\n    }\n\n    const getDefaultValue = () => {\n      let start: Dayjs\n      if (Array.isArray(defaultValue)) {\n        const left = dayjs(defaultValue[0])\n        let right = dayjs(defaultValue[1])\n        if (!props.unlinkPanels) {\n          right = left.add(1, 'month')\n        }\n        return [left, right]\n      } else if (defaultValue) {\n        start = dayjs(defaultValue)\n      } else {\n        start = dayjs()\n      }\n\n      start = start.locale(lang.value)\n      return [start, start.add(1, 'month')]\n    }\n\n    ctx.emit('set-picker-option', ['isValidValue', isValidValue])\n    ctx.emit('set-picker-option', ['parseUserInput', parseUserInput])\n    ctx.emit('set-picker-option', ['formatToString', formatToString])\n    ctx.emit('set-picker-option', ['handleClear', handleClear])\n\n    const pickerBase = inject('EP_PICKER_BASE') as any\n    const {\n      shortcuts,\n      disabledDate,\n      cellClassName,\n      format,\n      defaultTime,\n      defaultValue,\n      arrowControl,\n      clearable,\n    } = pickerBase.props\n\n    watch(\n      () => props.parsedValue,\n      (newVal) => {\n        if (newVal && newVal.length === 2) {\n          minDate.value = newVal[0]\n          maxDate.value = newVal[1]\n          leftDate.value = minDate.value\n          if (props.unlinkPanels && maxDate.value) {\n            const minDateYear = minDate.value.year()\n            const minDateMonth = minDate.value.month()\n            const maxDateYear = maxDate.value.year()\n            const maxDateMonth = maxDate.value.month()\n            rightDate.value =\n              minDateYear === maxDateYear && minDateMonth === maxDateMonth\n                ? maxDate.value.add(1, 'month')\n                : maxDate.value\n          } else {\n            rightDate.value = leftDate.value.add(1, 'month')\n            if (maxDate.value) {\n              rightDate.value = rightDate.value\n                .hour(maxDate.value.hour())\n                .minute(maxDate.value.minute())\n                .second(maxDate.value.second())\n            }\n          }\n        } else {\n          const defaultArr = getDefaultValue()\n          minDate.value = null\n          maxDate.value = null\n          leftDate.value = defaultArr[0]\n          rightDate.value = defaultArr[1]\n        }\n      },\n      { immediate: true }\n    )\n\n    return {\n      shortcuts,\n      disabledDate,\n      cellClassName,\n      minTimePickerVisible,\n      maxTimePickerVisible,\n      handleMinTimeClose,\n      handleMaxTimeClose,\n      handleShortcutClick,\n      rangeState,\n      minDate,\n      maxDate,\n      handleRangePick,\n      onSelect,\n      handleChangeRange,\n      btnDisabled,\n      enableYearArrow,\n      enableMonthArrow,\n      rightPrevMonth,\n      rightPrevYear,\n      rightNextMonth,\n      rightNextYear,\n      leftPrevMonth,\n      leftPrevYear,\n      leftNextMonth,\n      leftNextYear,\n      hasShortcuts,\n      leftLabel,\n      rightLabel,\n      leftDate,\n      rightDate,\n      showTime,\n      t,\n      minVisibleDate,\n      maxVisibleDate,\n      minVisibleTime,\n      maxVisibleTime,\n      arrowControl,\n      handleDateInput,\n      handleDateChange,\n      handleTimeInput,\n      handleTimeChange,\n      handleMinTimePick,\n      handleMaxTimePick,\n      handleClear,\n      handleConfirm,\n      timeFormat,\n      clearable,\n    }\n  },\n})\n</script>\n"],"names":["_createElementBlock","_createElementVNode","_renderSlot","_createVNode","_createBlock"],"mappings":"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"}
+{"version":3,"file":"panel-date-range.vue_vue_type_template_id_62b45ab2_lang.mjs","sources":["../../../../../../../packages/components/date-picker/src/date-picker-com/panel-date-range.vue?vue&type=template&id=62b45ab2&lang.js"],"sourcesContent":["<template>\n  <div\n    class=\"el-picker-panel el-date-range-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-range-picker__time-header\">\n          <span class=\"el-date-range-picker__editors-wrap\">\n            <span class=\"el-date-range-picker__time-picker-wrap\">\n              <el-input\n                size=\"small\"\n                :disabled=\"rangeState.selecting\"\n                :placeholder=\"t('el.datepicker.startDate')\"\n                class=\"el-date-range-picker__editor\"\n                :model-value=\"minVisibleDate\"\n                @input=\"(val) => handleDateInput(val, 'min')\"\n                @change=\"(val) => handleDateChange(val, 'min')\"\n              />\n            </span>\n            <span\n              v-clickoutside=\"handleMinTimeClose\"\n              class=\"el-date-range-picker__time-picker-wrap\"\n            >\n              <el-input\n                size=\"small\"\n                class=\"el-date-range-picker__editor\"\n                :disabled=\"rangeState.selecting\"\n                :placeholder=\"t('el.datepicker.startTime')\"\n                :model-value=\"minVisibleTime\"\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                :time-arrow-control=\"arrowControl\"\n                :parsed-value=\"leftDate\"\n                @pick=\"handleMinTimePick\"\n              />\n            </span>\n          </span>\n          <span>\n            <el-icon><arrow-right /></el-icon>\n          </span>\n          <span class=\"el-date-range-picker__editors-wrap is-right\">\n            <span class=\"el-date-range-picker__time-picker-wrap\">\n              <el-input\n                size=\"small\"\n                class=\"el-date-range-picker__editor\"\n                :disabled=\"rangeState.selecting\"\n                :placeholder=\"t('el.datepicker.endDate')\"\n                :model-value=\"maxVisibleDate\"\n                :readonly=\"!minDate\"\n                @input=\"(val) => handleDateInput(val, 'max')\"\n                @change=\"(val) => handleDateChange(val, 'max')\"\n              />\n            </span>\n            <span\n              v-clickoutside=\"handleMaxTimeClose\"\n              class=\"el-date-range-picker__time-picker-wrap\"\n            >\n              <el-input\n                size=\"small\"\n                class=\"el-date-range-picker__editor\"\n                :disabled=\"rangeState.selecting\"\n                :placeholder=\"t('el.datepicker.endTime')\"\n                :model-value=\"maxVisibleTime\"\n                :readonly=\"!minDate\"\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                :time-arrow-control=\"arrowControl\"\n                :parsed-value=\"rightDate\"\n                @pick=\"handleMaxTimePick\"\n              />\n            </span>\n          </span>\n        </div>\n        <div\n          class=\"el-picker-panel__content el-date-range-picker__content is-left\"\n        >\n          <div class=\"el-date-range-picker__header\">\n            <button\n              type=\"button\"\n              class=\"el-picker-panel__icon-btn d-arrow-left\"\n              @click=\"leftPrevYear\"\n            >\n              <el-icon><d-arrow-left /></el-icon>\n            </button>\n            <button\n              type=\"button\"\n              class=\"el-picker-panel__icon-btn arrow-left\"\n              @click=\"leftPrevMonth\"\n            >\n              <el-icon><arrow-left /></el-icon>\n            </button>\n            <button\n              v-if=\"unlinkPanels\"\n              type=\"button\"\n              :disabled=\"!enableYearArrow\"\n              :class=\"{ 'is-disabled': !enableYearArrow }\"\n              class=\"el-picker-panel__icon-btn d-arrow-right\"\n              @click=\"leftNextYear\"\n            >\n              <el-icon><d-arrow-right /></el-icon>\n            </button>\n            <button\n              v-if=\"unlinkPanels\"\n              type=\"button\"\n              :disabled=\"!enableMonthArrow\"\n              :class=\"{ 'is-disabled': !enableMonthArrow }\"\n              class=\"el-picker-panel__icon-btn arrow-right\"\n              @click=\"leftNextMonth\"\n            >\n              <el-icon><arrow-right /></el-icon>\n            </button>\n            <div>{{ leftLabel }}</div>\n          </div>\n          <date-table\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            @changerange=\"handleChangeRange\"\n            @pick=\"handleRangePick\"\n            @select=\"onSelect\"\n          />\n        </div>\n        <div\n          class=\"el-picker-panel__content el-date-range-picker__content is-right\"\n        >\n          <div class=\"el-date-range-picker__header\">\n            <button\n              v-if=\"unlinkPanels\"\n              type=\"button\"\n              :disabled=\"!enableYearArrow\"\n              :class=\"{ 'is-disabled': !enableYearArrow }\"\n              class=\"el-picker-panel__icon-btn d-arrow-left\"\n              @click=\"rightPrevYear\"\n            >\n              <el-icon><d-arrow-left /></el-icon>\n            </button>\n            <button\n              v-if=\"unlinkPanels\"\n              type=\"button\"\n              :disabled=\"!enableMonthArrow\"\n              :class=\"{ 'is-disabled': !enableMonthArrow }\"\n              class=\"el-picker-panel__icon-btn arrow-left\"\n              @click=\"rightPrevMonth\"\n            >\n              <el-icon><arrow-left /></el-icon>\n            </button>\n            <button\n              type=\"button\"\n              class=\"el-picker-panel__icon-btn d-arrow-right\"\n              @click=\"rightNextYear\"\n            >\n              <el-icon><d-arrow-right /></el-icon>\n            </button>\n            <button\n              type=\"button\"\n              class=\"el-picker-panel__icon-btn arrow-right\"\n              @click=\"rightNextMonth\"\n            >\n              <el-icon><arrow-right /></el-icon>\n            </button>\n            <div>{{ rightLabel }}</div>\n          </div>\n          <date-table\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            @changerange=\"handleChangeRange\"\n            @pick=\"handleRangePick\"\n            @select=\"onSelect\"\n          />\n        </div>\n      </div>\n    </div>\n    <div v-if=\"showTime\" class=\"el-picker-panel__footer\">\n      <el-button\n        v-if=\"clearable\"\n        size=\"mini\"\n        type=\"text\"\n        class=\"el-picker-panel__link-btn\"\n        @click=\"handleClear\"\n      >\n        {{ t('el.datepicker.clear') }}\n      </el-button>\n      <el-button\n        plain\n        size=\"mini\"\n        class=\"el-picker-panel__link-btn\"\n        :disabled=\"btnDisabled\"\n        @click=\"handleConfirm(false)\"\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 { 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 { 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'\n\nimport type { PropType } from 'vue'\nimport type { Dayjs } from 'dayjs'\nimport type { IDatePickerType } from '../date-picker.type'\n\nexport default defineComponent({\n  directives: { clickoutside: ClickOutside },\n\n  components: {\n    TimePickPanel,\n    DateTable,\n    ElInput,\n    ElButton,\n    ElIcon,\n    DArrowLeft,\n    ArrowLeft,\n    DArrowRight,\n    ArrowRight,\n  },\n\n  props: {\n    unlinkPanels: Boolean,\n    parsedValue: {\n      type: Array as PropType<Dayjs[]>,\n    },\n    type: {\n      type: String as PropType<IDatePickerType>,\n      required: true,\n      validator: isValidDatePickType,\n    },\n  },\n\n  emits: ['pick', 'set-picker-option', 'calendar-change'],\n\n  setup(props, ctx) {\n    const { t, lang } = useLocale()\n    const leftDate = ref(dayjs().locale(lang.value))\n    const rightDate = ref(dayjs().locale(lang.value).add(1, 'month'))\n    const minDate = ref(null)\n    const maxDate = ref(null)\n    const dateUserInput = ref({\n      min: null,\n      max: null,\n    })\n\n    const timeUserInput = ref({\n      min: null,\n      max: null,\n    })\n\n    const leftLabel = computed(() => {\n      return `${leftDate.value.year()} ${t('el.datepicker.year')} ${t(\n        `el.datepicker.month${leftDate.value.month() + 1}`\n      )}`\n    })\n\n    const rightLabel = computed(() => {\n      return `${rightDate.value.year()} ${t('el.datepicker.year')} ${t(\n        `el.datepicker.month${rightDate.value.month() + 1}`\n      )}`\n    })\n\n    const leftYear = computed(() => {\n      return leftDate.value.year()\n    })\n\n    const leftMonth = computed(() => {\n      return leftDate.value.month()\n    })\n\n    const rightYear = computed(() => {\n      return rightDate.value.year()\n    })\n\n    const rightMonth = computed(() => {\n      return rightDate.value.month()\n    })\n\n    const hasShortcuts = computed(() => !!shortcuts.length)\n\n    const 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\n    const 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\n    const 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\n    const 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\n    const timeFormat = computed(() => {\n      return extractTimeFormat(format)\n    })\n\n    const dateFormat = computed(() => {\n      return extractDateFormat(format)\n    })\n\n    const leftPrevYear = () => {\n      leftDate.value = leftDate.value.subtract(1, 'year')\n      if (!props.unlinkPanels) {\n        rightDate.value = leftDate.value.add(1, 'month')\n      }\n    }\n\n    const leftPrevMonth = () => {\n      leftDate.value = leftDate.value.subtract(1, 'month')\n      if (!props.unlinkPanels) {\n        rightDate.value = leftDate.value.add(1, 'month')\n      }\n    }\n\n    const rightNextYear = () => {\n      if (!props.unlinkPanels) {\n        leftDate.value = leftDate.value.add(1, 'year')\n        rightDate.value = leftDate.value.add(1, 'month')\n      } else {\n        rightDate.value = rightDate.value.add(1, 'year')\n      }\n    }\n\n    const 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    }\n\n    const leftNextYear = () => {\n      leftDate.value = leftDate.value.add(1, 'year')\n    }\n\n    const leftNextMonth = () => {\n      leftDate.value = leftDate.value.add(1, 'month')\n    }\n\n    const rightPrevYear = () => {\n      rightDate.value = rightDate.value.subtract(1, 'year')\n    }\n\n    const rightPrevMonth = () => {\n      rightDate.value = rightDate.value.subtract(1, 'month')\n    }\n\n    const 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\n    const 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\n    const isValidValue = (value) => {\n      return (\n        Array.isArray(value) &&\n        value[0] &&\n        value[1] &&\n        value[0].valueOf() <= value[1].valueOf()\n      )\n    }\n\n    const rangeState = ref({\n      endDate: null,\n      selecting: false,\n    })\n\n    const btnDisabled = computed(() => {\n      return !(\n        minDate.value &&\n        maxDate.value &&\n        !rangeState.value.selecting &&\n        isValidValue([minDate.value, maxDate.value])\n      )\n    })\n\n    const handleChangeRange = (val) => {\n      rangeState.value = val\n    }\n\n    const onSelect = (selecting) => {\n      rangeState.value.selecting = selecting\n      if (!selecting) {\n        rangeState.value.endDate = null\n      }\n    }\n\n    const showTime = computed(\n      () => props.type === 'datetime' || props.type === 'datetimerange'\n    )\n\n    const handleConfirm = (visible = false) => {\n      if (isValidValue([minDate.value, maxDate.value])) {\n        ctx.emit('pick', [minDate.value, maxDate.value], visible)\n      }\n    }\n\n    const formatEmit = (emitDayjs: Dayjs, index?) => {\n      if (!emitDayjs) return\n      if (defaultTime) {\n        const defaultTimeD = dayjs(defaultTime[index] || defaultTime).locale(\n          lang.value\n        )\n        return defaultTimeD\n          .year(emitDayjs.year())\n          .month(emitDayjs.month())\n          .date(emitDayjs.date())\n      }\n      return emitDayjs\n    }\n\n    const handleRangePick = (val, close = true) => {\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      ctx.emit('calendar-change', [min_.toDate(), max_ && max_.toDate()])\n      maxDate.value = maxDate_\n      minDate.value = minDate_\n\n      if (!close || showTime.value) return\n      handleConfirm()\n    }\n\n    const handleShortcutClick = (shortcut) => {\n      const shortcutValues =\n        typeof shortcut.value === 'function' ? shortcut.value() : shortcut.value\n      if (shortcutValues) {\n        ctx.emit('pick', [\n          dayjs(shortcutValues[0]).locale(lang.value),\n          dayjs(shortcutValues[1]).locale(lang.value),\n        ])\n        return\n      }\n      if (shortcut.onClick) {\n        shortcut.onClick(ctx)\n      }\n    }\n\n    const minTimePickerVisible = ref(false)\n    const maxTimePickerVisible = ref(false)\n\n    const handleMinTimeClose = () => {\n      minTimePickerVisible.value = false\n    }\n\n    const handleMaxTimeClose = () => {\n      maxTimePickerVisible.value = false\n    }\n\n    const handleDateInput = (value, type) => {\n      dateUserInput.value[type] = value\n      const parsedValueD = dayjs(value, dateFormat.value).locale(lang.value)\n\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 (!props.unlinkPanels) {\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 (!props.unlinkPanels) {\n            leftDate.value = parsedValueD.subtract(1, 'month')\n            minDate.value = maxDate.value.subtract(1, 'month')\n          }\n        }\n      }\n    }\n\n    const handleDateChange = (_, type) => {\n      dateUserInput.value[type] = null\n    }\n\n    const handleTimeInput = (value, type) => {\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          if (!maxDate.value || maxDate.value.isBefore(minDate.value)) {\n            maxDate.value = minDate.value\n          }\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          if (maxDate.value && maxDate.value.isBefore(minDate.value)) {\n            minDate.value = maxDate.value\n          }\n        }\n      }\n    }\n\n    const handleTimeChange = (value, type) => {\n      timeUserInput.value[type] = null\n      if (type === 'min') {\n        leftDate.value = minDate.value\n        minTimePickerVisible.value = false\n      } else {\n        rightDate.value = maxDate.value\n        maxTimePickerVisible.value = false\n      }\n    }\n\n    const handleMinTimePick = (value, visible, first) => {\n      if (timeUserInput.value.min) return\n      if (value) {\n        leftDate.value = 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      }\n    }\n\n    const handleMaxTimePick = (value, visible, first) => {\n      if (timeUserInput.value.max) return\n      if (value) {\n        rightDate.value = 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    }\n\n    const handleClear = () => {\n      leftDate.value = getDefaultValue()[0]\n      rightDate.value = leftDate.value.add(1, 'month')\n      ctx.emit('pick', null)\n    }\n\n    const formatToString = (value: Dayjs | Dayjs[]) => {\n      return Array.isArray(value)\n        ? value.map((_) => _.format(format))\n        : value.format(format)\n    }\n\n    const parseUserInput = (value: Dayjs | Dayjs[]) => {\n      return Array.isArray(value)\n        ? value.map((_) => dayjs(_, format).locale(lang.value))\n        : dayjs(value, format).locale(lang.value)\n    }\n\n    const getDefaultValue = () => {\n      let start: Dayjs\n      if (Array.isArray(defaultValue)) {\n        const left = dayjs(defaultValue[0])\n        let right = dayjs(defaultValue[1])\n        if (!props.unlinkPanels) {\n          right = left.add(1, 'month')\n        }\n        return [left, right]\n      } else if (defaultValue) {\n        start = dayjs(defaultValue)\n      } else {\n        start = dayjs()\n      }\n\n      start = start.locale(lang.value)\n      return [start, start.add(1, 'month')]\n    }\n\n    ctx.emit('set-picker-option', ['isValidValue', isValidValue])\n    ctx.emit('set-picker-option', ['parseUserInput', parseUserInput])\n    ctx.emit('set-picker-option', ['formatToString', formatToString])\n    ctx.emit('set-picker-option', ['handleClear', handleClear])\n\n    const pickerBase = inject('EP_PICKER_BASE') as any\n    const {\n      shortcuts,\n      disabledDate,\n      cellClassName,\n      format,\n      defaultTime,\n      defaultValue,\n      arrowControl,\n      clearable,\n    } = pickerBase.props\n\n    watch(\n      () => props.parsedValue,\n      (newVal) => {\n        if (newVal && newVal.length === 2) {\n          minDate.value = newVal[0]\n          maxDate.value = newVal[1]\n          leftDate.value = minDate.value\n          if (props.unlinkPanels && maxDate.value) {\n            const minDateYear = minDate.value.year()\n            const minDateMonth = minDate.value.month()\n            const maxDateYear = maxDate.value.year()\n            const maxDateMonth = maxDate.value.month()\n            rightDate.value =\n              minDateYear === maxDateYear && minDateMonth === maxDateMonth\n                ? maxDate.value.add(1, 'month')\n                : maxDate.value\n          } else {\n            rightDate.value = leftDate.value.add(1, 'month')\n            if (maxDate.value) {\n              rightDate.value = rightDate.value\n                .hour(maxDate.value.hour())\n                .minute(maxDate.value.minute())\n                .second(maxDate.value.second())\n            }\n          }\n        } else {\n          const defaultArr = getDefaultValue()\n          minDate.value = null\n          maxDate.value = null\n          leftDate.value = defaultArr[0]\n          rightDate.value = defaultArr[1]\n        }\n      },\n      { immediate: true }\n    )\n\n    return {\n      shortcuts,\n      disabledDate,\n      cellClassName,\n      minTimePickerVisible,\n      maxTimePickerVisible,\n      handleMinTimeClose,\n      handleMaxTimeClose,\n      handleShortcutClick,\n      rangeState,\n      minDate,\n      maxDate,\n      handleRangePick,\n      onSelect,\n      handleChangeRange,\n      btnDisabled,\n      enableYearArrow,\n      enableMonthArrow,\n      rightPrevMonth,\n      rightPrevYear,\n      rightNextMonth,\n      rightNextYear,\n      leftPrevMonth,\n      leftPrevYear,\n      leftNextMonth,\n      leftNextYear,\n      hasShortcuts,\n      leftLabel,\n      rightLabel,\n      leftDate,\n      rightDate,\n      showTime,\n      t,\n      minVisibleDate,\n      maxVisibleDate,\n      minVisibleTime,\n      maxVisibleTime,\n      arrowControl,\n      handleDateInput,\n      handleDateChange,\n      handleTimeInput,\n      handleTimeChange,\n      handleMinTimePick,\n      handleMaxTimePick,\n      handleClear,\n      handleConfirm,\n      timeFormat,\n      clearable,\n    }\n  },\n})\n</script>\n"],"names":["_createElementBlock","_createElementVNode","_renderSlot","_createVNode","_createBlock"],"mappings":"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"}

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

@@ -24,7 +24,7 @@ declare const _default: import("vue").DefineComponent<{
     leftPrevYear: () => void;
     rightNextYear: () => void;
     rightPrevYear: () => void;
-    t: (...args: any[]) => string;
+    t: import("element-plus/es/hooks").Translator;
     leftDate: import("vue").Ref<{
         clone: () => dayjs.Dayjs;
         isValid: () => boolean;

package/es/components/date-picker/src/date-picker-com/panel-month-range.vue_vue_type_script_lang.mjs

@@ -5,7 +5,7 @@ import '../../../../hooks/index.mjs';
 import { DArrowLeft, DArrowRight } from '@element-plus/icons';
 import './basic-month-table.mjs';
 import script$1 from './basic-month-table.vue_vue_type_script_lang.mjs';
-import { useLocaleInject } from '../../../../hooks/use-locale/index.mjs';
+import { useLocale } from '../../../../hooks/use-locale/index.mjs';
 
 var script = defineComponent({
   components: { MonthTable: script$1, ElIcon, DArrowLeft, DArrowRight },
@@ -17,7 +17,7 @@ var script = defineComponent({
   },
   emits: ["pick", "set-picker-option"],
   setup(props, ctx) {
-    const { t, lang } = useLocaleInject();
+    const { t, lang } = useLocale();
     const leftDate = ref(dayjs().locale(lang.value));
     const rightDate = ref(dayjs().locale(lang.value).add(1, "year"));
     const hasShortcuts = computed(() => !!shortcuts.length);

package/es/components/date-picker/src/date-picker-com/panel-month-range.vue_vue_type_script_lang.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"panel-month-range.vue_vue_type_script_lang.mjs","sources":["../../../../../../../packages/components/date-picker/src/date-picker-com/panel-month-range.vue"],"sourcesContent":["<template>\n  <div\n    class=\"el-picker-panel el-date-range-picker\"\n    :class=\"[\n      {\n        'has-sidebar': $slots.sidebar || hasShortcuts,\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\n          class=\"el-picker-panel__content el-date-range-picker__content is-left\"\n        >\n          <div class=\"el-date-range-picker__header\">\n            <button\n              type=\"button\"\n              class=\"el-picker-panel__icon-btn d-arrow-left\"\n              @click=\"leftPrevYear\"\n            >\n              <el-icon><d-arrow-left /></el-icon>\n            </button>\n            <button\n              v-if=\"unlinkPanels\"\n              type=\"button\"\n              :disabled=\"!enableYearArrow\"\n              :class=\"{ 'is-disabled': !enableYearArrow }\"\n              class=\"el-picker-panel__icon-btn d-arrow-right\"\n              @click=\"leftNextYear\"\n            >\n              <el-icon><d-arrow-right /></el-icon>\n            </button>\n            <div>{{ leftLabel }}</div>\n          </div>\n          <month-table\n            selection-mode=\"range\"\n            :date=\"leftDate\"\n            :min-date=\"minDate\"\n            :max-date=\"maxDate\"\n            :range-state=\"rangeState\"\n            :disabled-date=\"disabledDate\"\n            @changerange=\"handleChangeRange\"\n            @pick=\"handleRangePick\"\n            @select=\"onSelect\"\n          />\n        </div>\n        <div\n          class=\"\n            el-picker-panel__content\n            el-date-range-picker__content\n            is-right\n          \"\n        >\n          <div class=\"el-date-range-picker__header\">\n            <button\n              v-if=\"unlinkPanels\"\n              type=\"button\"\n              :disabled=\"!enableYearArrow\"\n              :class=\"{ 'is-disabled': !enableYearArrow }\"\n              class=\"el-picker-panel__icon-btn d-arrow-left\"\n              @click=\"rightPrevYear\"\n            >\n              <el-icon><d-arrow-left /></el-icon>\n            </button>\n            <button\n              type=\"button\"\n              class=\"el-picker-panel__icon-btn d-arrow-right\"\n              @click=\"rightNextYear\"\n            >\n              <el-icon><d-arrow-right /></el-icon>\n            </button>\n            <div>{{ rightLabel }}</div>\n          </div>\n          <month-table\n            selection-mode=\"range\"\n            :date=\"rightDate\"\n            :min-date=\"minDate\"\n            :max-date=\"maxDate\"\n            :range-state=\"rangeState\"\n            :disabled-date=\"disabledDate\"\n            @changerange=\"handleChangeRange\"\n            @pick=\"handleRangePick\"\n            @select=\"onSelect\"\n          />\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, computed, ref, watch, inject } from 'vue'\nimport dayjs from 'dayjs'\nimport ElIcon from '@element-plus/components/icon'\nimport { useLocaleInject } from '@element-plus/hooks'\nimport { DArrowLeft, DArrowRight } from '@element-plus/icons'\nimport MonthTable from './basic-month-table.vue'\n\nimport type { PropType } from 'vue'\nimport type { Dayjs } from 'dayjs'\n\nexport default defineComponent({\n  components: { MonthTable, ElIcon, DArrowLeft, DArrowRight },\n\n  props: {\n    unlinkPanels: Boolean,\n    parsedValue: {\n      type: Array as PropType<Dayjs[]>,\n    },\n  },\n\n  emits: ['pick', 'set-picker-option'],\n\n  setup(props, ctx) {\n    const { t, lang } = useLocaleInject()\n    const leftDate = ref(dayjs().locale(lang.value))\n    const rightDate = ref(dayjs().locale(lang.value).add(1, 'year'))\n\n    const hasShortcuts = computed(() => !!shortcuts.length)\n\n    const handleShortcutClick = (shortcut) => {\n      const shortcutValues =\n        typeof shortcut.value === 'function' ? shortcut.value() : shortcut.value\n      if (shortcutValues) {\n        ctx.emit('pick', [\n          dayjs(shortcutValues[0]).locale(lang.value),\n          dayjs(shortcutValues[1]).locale(lang.value),\n        ])\n        return\n      }\n      if (shortcut.onClick) {\n        shortcut.onClick(ctx)\n      }\n    }\n\n    const leftPrevYear = () => {\n      leftDate.value = leftDate.value.subtract(1, 'year')\n      if (!props.unlinkPanels) {\n        rightDate.value = rightDate.value.subtract(1, 'year')\n      }\n    }\n\n    const rightNextYear = () => {\n      if (!props.unlinkPanels) {\n        leftDate.value = leftDate.value.add(1, 'year')\n      }\n      rightDate.value = rightDate.value.add(1, 'year')\n    }\n\n    const leftNextYear = () => {\n      leftDate.value = leftDate.value.add(1, 'year')\n    }\n\n    const rightPrevYear = () => {\n      rightDate.value = rightDate.value.subtract(1, 'year')\n    }\n    const leftLabel = computed(() => {\n      return `${leftDate.value.year()} ${t('el.datepicker.year')}`\n    })\n\n    const rightLabel = computed(() => {\n      return `${rightDate.value.year()} ${t('el.datepicker.year')}`\n    })\n\n    const leftYear = computed(() => {\n      return leftDate.value.year()\n    })\n\n    const rightYear = computed(() => {\n      return rightDate.value.year() === leftDate.value.year()\n        ? leftDate.value.year() + 1\n        : rightDate.value.year()\n    })\n\n    const enableYearArrow = computed(() => {\n      return props.unlinkPanels && rightYear.value > leftYear.value + 1\n    })\n\n    const minDate = ref(null)\n    const maxDate = ref(null)\n\n    const rangeState = ref({\n      endDate: null,\n      selecting: false,\n    })\n\n    const handleChangeRange = (val) => {\n      rangeState.value = val\n    }\n\n    const handleRangePick = (val, close = true) => {\n      // const defaultTime = props.defaultTime || []\n      // const minDate_ = modifyWithTimeString(val.minDate, defaultTime[0])\n      // const maxDate_ = modifyWithTimeString(val.maxDate, defaultTime[1])\n      // todo\n      const minDate_ = val.minDate\n      const maxDate_ = val.maxDate\n      if (maxDate.value === maxDate_ && minDate.value === minDate_) {\n        return\n      }\n      maxDate.value = maxDate_\n      minDate.value = minDate_\n\n      if (!close) return\n      handleConfirm()\n    }\n\n    const isValidValue = (value) => {\n      return (\n        Array.isArray(value) &&\n        value &&\n        value[0] &&\n        value[1] &&\n        value[0].valueOf() <= value[1].valueOf()\n      )\n    }\n\n    const handleConfirm = (visible = false) => {\n      if (isValidValue([minDate.value, maxDate.value])) {\n        ctx.emit('pick', [minDate.value, maxDate.value], visible)\n      }\n    }\n\n    const onSelect = (selecting) => {\n      rangeState.value.selecting = selecting\n      if (!selecting) {\n        rangeState.value.endDate = null\n      }\n    }\n\n    const formatToString = (value) => {\n      return value.map((_) => _.format(format))\n    }\n\n    const getDefaultValue = () => {\n      let start: Dayjs\n      if (Array.isArray(defaultValue)) {\n        const left = dayjs(defaultValue[0])\n        let right = dayjs(defaultValue[1])\n        if (!props.unlinkPanels) {\n          right = left.add(1, 'year')\n        }\n        return [left, right]\n      } else if (defaultValue) {\n        start = dayjs(defaultValue)\n      } else {\n        start = dayjs()\n      }\n      start = start.locale(lang.value)\n      return [start, start.add(1, 'year')]\n    }\n\n    // pickerBase.hub.emit('SetPickerOption', ['isValidValue', isValidValue])\n    ctx.emit('set-picker-option', ['formatToString', formatToString])\n    const pickerBase = inject('EP_PICKER_BASE') as any\n    const { shortcuts, disabledDate, format, defaultValue } = pickerBase.props\n\n    watch(\n      () => props.parsedValue,\n      (newVal) => {\n        if (newVal && newVal.length === 2) {\n          minDate.value = newVal[0]\n          maxDate.value = newVal[1]\n          leftDate.value = minDate.value\n          if (props.unlinkPanels && maxDate.value) {\n            const minDateYear = minDate.value.year()\n            const maxDateYear = maxDate.value.year()\n            rightDate.value =\n              minDateYear === maxDateYear\n                ? maxDate.value.add(1, 'year')\n                : maxDate.value\n          } else {\n            rightDate.value = leftDate.value.add(1, 'year')\n          }\n        } else {\n          const defaultArr = getDefaultValue()\n          leftDate.value = defaultArr[0]\n          rightDate.value = defaultArr[1]\n        }\n      },\n      { immediate: true }\n    )\n\n    return {\n      shortcuts,\n      disabledDate,\n      onSelect,\n      handleRangePick,\n      rangeState,\n      handleChangeRange,\n      minDate,\n      maxDate,\n      enableYearArrow,\n      leftLabel,\n      rightLabel,\n      leftNextYear,\n      leftPrevYear,\n      rightNextYear,\n      rightPrevYear,\n      t,\n      leftDate,\n      rightDate,\n      hasShortcuts,\n      handleShortcutClick,\n    }\n  },\n})\n</script>\n"],"names":["MonthTable"],"mappings":"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"}
+{"version":3,"file":"panel-month-range.vue_vue_type_script_lang.mjs","sources":["../../../../../../../packages/components/date-picker/src/date-picker-com/panel-month-range.vue"],"sourcesContent":["<template>\n  <div\n    class=\"el-picker-panel el-date-range-picker\"\n    :class=\"[\n      {\n        'has-sidebar': $slots.sidebar || hasShortcuts,\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\n          class=\"el-picker-panel__content el-date-range-picker__content is-left\"\n        >\n          <div class=\"el-date-range-picker__header\">\n            <button\n              type=\"button\"\n              class=\"el-picker-panel__icon-btn d-arrow-left\"\n              @click=\"leftPrevYear\"\n            >\n              <el-icon><d-arrow-left /></el-icon>\n            </button>\n            <button\n              v-if=\"unlinkPanels\"\n              type=\"button\"\n              :disabled=\"!enableYearArrow\"\n              :class=\"{ 'is-disabled': !enableYearArrow }\"\n              class=\"el-picker-panel__icon-btn d-arrow-right\"\n              @click=\"leftNextYear\"\n            >\n              <el-icon><d-arrow-right /></el-icon>\n            </button>\n            <div>{{ leftLabel }}</div>\n          </div>\n          <month-table\n            selection-mode=\"range\"\n            :date=\"leftDate\"\n            :min-date=\"minDate\"\n            :max-date=\"maxDate\"\n            :range-state=\"rangeState\"\n            :disabled-date=\"disabledDate\"\n            @changerange=\"handleChangeRange\"\n            @pick=\"handleRangePick\"\n            @select=\"onSelect\"\n          />\n        </div>\n        <div\n          class=\"el-picker-panel__content el-date-range-picker__content is-right\"\n        >\n          <div class=\"el-date-range-picker__header\">\n            <button\n              v-if=\"unlinkPanels\"\n              type=\"button\"\n              :disabled=\"!enableYearArrow\"\n              :class=\"{ 'is-disabled': !enableYearArrow }\"\n              class=\"el-picker-panel__icon-btn d-arrow-left\"\n              @click=\"rightPrevYear\"\n            >\n              <el-icon><d-arrow-left /></el-icon>\n            </button>\n            <button\n              type=\"button\"\n              class=\"el-picker-panel__icon-btn d-arrow-right\"\n              @click=\"rightNextYear\"\n            >\n              <el-icon><d-arrow-right /></el-icon>\n            </button>\n            <div>{{ rightLabel }}</div>\n          </div>\n          <month-table\n            selection-mode=\"range\"\n            :date=\"rightDate\"\n            :min-date=\"minDate\"\n            :max-date=\"maxDate\"\n            :range-state=\"rangeState\"\n            :disabled-date=\"disabledDate\"\n            @changerange=\"handleChangeRange\"\n            @pick=\"handleRangePick\"\n            @select=\"onSelect\"\n          />\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, computed, ref, watch, inject } from 'vue'\nimport dayjs from 'dayjs'\nimport ElIcon from '@element-plus/components/icon'\nimport { useLocale } from '@element-plus/hooks'\nimport { DArrowLeft, DArrowRight } from '@element-plus/icons'\nimport MonthTable from './basic-month-table.vue'\n\nimport type { PropType } from 'vue'\nimport type { Dayjs } from 'dayjs'\n\nexport default defineComponent({\n  components: { MonthTable, ElIcon, DArrowLeft, DArrowRight },\n\n  props: {\n    unlinkPanels: Boolean,\n    parsedValue: {\n      type: Array as PropType<Dayjs[]>,\n    },\n  },\n\n  emits: ['pick', 'set-picker-option'],\n\n  setup(props, ctx) {\n    const { t, lang } = useLocale()\n    const leftDate = ref(dayjs().locale(lang.value))\n    const rightDate = ref(dayjs().locale(lang.value).add(1, 'year'))\n\n    const hasShortcuts = computed(() => !!shortcuts.length)\n\n    const handleShortcutClick = (shortcut) => {\n      const shortcutValues =\n        typeof shortcut.value === 'function' ? shortcut.value() : shortcut.value\n      if (shortcutValues) {\n        ctx.emit('pick', [\n          dayjs(shortcutValues[0]).locale(lang.value),\n          dayjs(shortcutValues[1]).locale(lang.value),\n        ])\n        return\n      }\n      if (shortcut.onClick) {\n        shortcut.onClick(ctx)\n      }\n    }\n\n    const leftPrevYear = () => {\n      leftDate.value = leftDate.value.subtract(1, 'year')\n      if (!props.unlinkPanels) {\n        rightDate.value = rightDate.value.subtract(1, 'year')\n      }\n    }\n\n    const rightNextYear = () => {\n      if (!props.unlinkPanels) {\n        leftDate.value = leftDate.value.add(1, 'year')\n      }\n      rightDate.value = rightDate.value.add(1, 'year')\n    }\n\n    const leftNextYear = () => {\n      leftDate.value = leftDate.value.add(1, 'year')\n    }\n\n    const rightPrevYear = () => {\n      rightDate.value = rightDate.value.subtract(1, 'year')\n    }\n    const leftLabel = computed(() => {\n      return `${leftDate.value.year()} ${t('el.datepicker.year')}`\n    })\n\n    const rightLabel = computed(() => {\n      return `${rightDate.value.year()} ${t('el.datepicker.year')}`\n    })\n\n    const leftYear = computed(() => {\n      return leftDate.value.year()\n    })\n\n    const rightYear = computed(() => {\n      return rightDate.value.year() === leftDate.value.year()\n        ? leftDate.value.year() + 1\n        : rightDate.value.year()\n    })\n\n    const enableYearArrow = computed(() => {\n      return props.unlinkPanels && rightYear.value > leftYear.value + 1\n    })\n\n    const minDate = ref(null)\n    const maxDate = ref(null)\n\n    const rangeState = ref({\n      endDate: null,\n      selecting: false,\n    })\n\n    const handleChangeRange = (val) => {\n      rangeState.value = val\n    }\n\n    const handleRangePick = (val, close = true) => {\n      // const defaultTime = props.defaultTime || []\n      // const minDate_ = modifyWithTimeString(val.minDate, defaultTime[0])\n      // const maxDate_ = modifyWithTimeString(val.maxDate, defaultTime[1])\n      // todo\n      const minDate_ = val.minDate\n      const maxDate_ = val.maxDate\n      if (maxDate.value === maxDate_ && minDate.value === minDate_) {\n        return\n      }\n      maxDate.value = maxDate_\n      minDate.value = minDate_\n\n      if (!close) return\n      handleConfirm()\n    }\n\n    const isValidValue = (value) => {\n      return (\n        Array.isArray(value) &&\n        value &&\n        value[0] &&\n        value[1] &&\n        value[0].valueOf() <= value[1].valueOf()\n      )\n    }\n\n    const handleConfirm = (visible = false) => {\n      if (isValidValue([minDate.value, maxDate.value])) {\n        ctx.emit('pick', [minDate.value, maxDate.value], visible)\n      }\n    }\n\n    const onSelect = (selecting) => {\n      rangeState.value.selecting = selecting\n      if (!selecting) {\n        rangeState.value.endDate = null\n      }\n    }\n\n    const formatToString = (value) => {\n      return value.map((_) => _.format(format))\n    }\n\n    const getDefaultValue = () => {\n      let start: Dayjs\n      if (Array.isArray(defaultValue)) {\n        const left = dayjs(defaultValue[0])\n        let right = dayjs(defaultValue[1])\n        if (!props.unlinkPanels) {\n          right = left.add(1, 'year')\n        }\n        return [left, right]\n      } else if (defaultValue) {\n        start = dayjs(defaultValue)\n      } else {\n        start = dayjs()\n      }\n      start = start.locale(lang.value)\n      return [start, start.add(1, 'year')]\n    }\n\n    // pickerBase.hub.emit('SetPickerOption', ['isValidValue', isValidValue])\n    ctx.emit('set-picker-option', ['formatToString', formatToString])\n    const pickerBase = inject('EP_PICKER_BASE') as any\n    const { shortcuts, disabledDate, format, defaultValue } = pickerBase.props\n\n    watch(\n      () => props.parsedValue,\n      (newVal) => {\n        if (newVal && newVal.length === 2) {\n          minDate.value = newVal[0]\n          maxDate.value = newVal[1]\n          leftDate.value = minDate.value\n          if (props.unlinkPanels && maxDate.value) {\n            const minDateYear = minDate.value.year()\n            const maxDateYear = maxDate.value.year()\n            rightDate.value =\n              minDateYear === maxDateYear\n                ? maxDate.value.add(1, 'year')\n                : maxDate.value\n          } else {\n            rightDate.value = leftDate.value.add(1, 'year')\n          }\n        } else {\n          const defaultArr = getDefaultValue()\n          leftDate.value = defaultArr[0]\n          rightDate.value = defaultArr[1]\n        }\n      },\n      { immediate: true }\n    )\n\n    return {\n      shortcuts,\n      disabledDate,\n      onSelect,\n      handleRangePick,\n      rangeState,\n      handleChangeRange,\n      minDate,\n      maxDate,\n      enableYearArrow,\n      leftLabel,\n      rightLabel,\n      leftNextYear,\n      leftPrevYear,\n      rightNextYear,\n      rightPrevYear,\n      t,\n      leftDate,\n      rightDate,\n      hasShortcuts,\n      handleShortcutClick,\n    }\n  },\n})\n</script>\n"],"names":["MonthTable"],"mappings":"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"}

package/es/components/date-picker/src/date-picker-com/panel-month-range.vue_vue_type_template_id_2e377892_lang.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"panel-month-range.vue_vue_type_template_id_2e377892_lang.mjs","sources":["../../../../../../../packages/components/date-picker/src/date-picker-com/panel-month-range.vue?vue&type=template&id=2e377892&lang.js"],"sourcesContent":["<template>\n  <div\n    class=\"el-picker-panel el-date-range-picker\"\n    :class=\"[\n      {\n        'has-sidebar': $slots.sidebar || hasShortcuts,\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\n          class=\"el-picker-panel__content el-date-range-picker__content is-left\"\n        >\n          <div class=\"el-date-range-picker__header\">\n            <button\n              type=\"button\"\n              class=\"el-picker-panel__icon-btn d-arrow-left\"\n              @click=\"leftPrevYear\"\n            >\n              <el-icon><d-arrow-left /></el-icon>\n            </button>\n            <button\n              v-if=\"unlinkPanels\"\n              type=\"button\"\n              :disabled=\"!enableYearArrow\"\n              :class=\"{ 'is-disabled': !enableYearArrow }\"\n              class=\"el-picker-panel__icon-btn d-arrow-right\"\n              @click=\"leftNextYear\"\n            >\n              <el-icon><d-arrow-right /></el-icon>\n            </button>\n            <div>{{ leftLabel }}</div>\n          </div>\n          <month-table\n            selection-mode=\"range\"\n            :date=\"leftDate\"\n            :min-date=\"minDate\"\n            :max-date=\"maxDate\"\n            :range-state=\"rangeState\"\n            :disabled-date=\"disabledDate\"\n            @changerange=\"handleChangeRange\"\n            @pick=\"handleRangePick\"\n            @select=\"onSelect\"\n          />\n        </div>\n        <div\n          class=\"\n            el-picker-panel__content\n            el-date-range-picker__content\n            is-right\n          \"\n        >\n          <div class=\"el-date-range-picker__header\">\n            <button\n              v-if=\"unlinkPanels\"\n              type=\"button\"\n              :disabled=\"!enableYearArrow\"\n              :class=\"{ 'is-disabled': !enableYearArrow }\"\n              class=\"el-picker-panel__icon-btn d-arrow-left\"\n              @click=\"rightPrevYear\"\n            >\n              <el-icon><d-arrow-left /></el-icon>\n            </button>\n            <button\n              type=\"button\"\n              class=\"el-picker-panel__icon-btn d-arrow-right\"\n              @click=\"rightNextYear\"\n            >\n              <el-icon><d-arrow-right /></el-icon>\n            </button>\n            <div>{{ rightLabel }}</div>\n          </div>\n          <month-table\n            selection-mode=\"range\"\n            :date=\"rightDate\"\n            :min-date=\"minDate\"\n            :max-date=\"maxDate\"\n            :range-state=\"rangeState\"\n            :disabled-date=\"disabledDate\"\n            @changerange=\"handleChangeRange\"\n            @pick=\"handleRangePick\"\n            @select=\"onSelect\"\n          />\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, computed, ref, watch, inject } from 'vue'\nimport dayjs from 'dayjs'\nimport ElIcon from '@element-plus/components/icon'\nimport { useLocaleInject } from '@element-plus/hooks'\nimport { DArrowLeft, DArrowRight } from '@element-plus/icons'\nimport MonthTable from './basic-month-table.vue'\n\nimport type { PropType } from 'vue'\nimport type { Dayjs } from 'dayjs'\n\nexport default defineComponent({\n  components: { MonthTable, ElIcon, DArrowLeft, DArrowRight },\n\n  props: {\n    unlinkPanels: Boolean,\n    parsedValue: {\n      type: Array as PropType<Dayjs[]>,\n    },\n  },\n\n  emits: ['pick', 'set-picker-option'],\n\n  setup(props, ctx) {\n    const { t, lang } = useLocaleInject()\n    const leftDate = ref(dayjs().locale(lang.value))\n    const rightDate = ref(dayjs().locale(lang.value).add(1, 'year'))\n\n    const hasShortcuts = computed(() => !!shortcuts.length)\n\n    const handleShortcutClick = (shortcut) => {\n      const shortcutValues =\n        typeof shortcut.value === 'function' ? shortcut.value() : shortcut.value\n      if (shortcutValues) {\n        ctx.emit('pick', [\n          dayjs(shortcutValues[0]).locale(lang.value),\n          dayjs(shortcutValues[1]).locale(lang.value),\n        ])\n        return\n      }\n      if (shortcut.onClick) {\n        shortcut.onClick(ctx)\n      }\n    }\n\n    const leftPrevYear = () => {\n      leftDate.value = leftDate.value.subtract(1, 'year')\n      if (!props.unlinkPanels) {\n        rightDate.value = rightDate.value.subtract(1, 'year')\n      }\n    }\n\n    const rightNextYear = () => {\n      if (!props.unlinkPanels) {\n        leftDate.value = leftDate.value.add(1, 'year')\n      }\n      rightDate.value = rightDate.value.add(1, 'year')\n    }\n\n    const leftNextYear = () => {\n      leftDate.value = leftDate.value.add(1, 'year')\n    }\n\n    const rightPrevYear = () => {\n      rightDate.value = rightDate.value.subtract(1, 'year')\n    }\n    const leftLabel = computed(() => {\n      return `${leftDate.value.year()} ${t('el.datepicker.year')}`\n    })\n\n    const rightLabel = computed(() => {\n      return `${rightDate.value.year()} ${t('el.datepicker.year')}`\n    })\n\n    const leftYear = computed(() => {\n      return leftDate.value.year()\n    })\n\n    const rightYear = computed(() => {\n      return rightDate.value.year() === leftDate.value.year()\n        ? leftDate.value.year() + 1\n        : rightDate.value.year()\n    })\n\n    const enableYearArrow = computed(() => {\n      return props.unlinkPanels && rightYear.value > leftYear.value + 1\n    })\n\n    const minDate = ref(null)\n    const maxDate = ref(null)\n\n    const rangeState = ref({\n      endDate: null,\n      selecting: false,\n    })\n\n    const handleChangeRange = (val) => {\n      rangeState.value = val\n    }\n\n    const handleRangePick = (val, close = true) => {\n      // const defaultTime = props.defaultTime || []\n      // const minDate_ = modifyWithTimeString(val.minDate, defaultTime[0])\n      // const maxDate_ = modifyWithTimeString(val.maxDate, defaultTime[1])\n      // todo\n      const minDate_ = val.minDate\n      const maxDate_ = val.maxDate\n      if (maxDate.value === maxDate_ && minDate.value === minDate_) {\n        return\n      }\n      maxDate.value = maxDate_\n      minDate.value = minDate_\n\n      if (!close) return\n      handleConfirm()\n    }\n\n    const isValidValue = (value) => {\n      return (\n        Array.isArray(value) &&\n        value &&\n        value[0] &&\n        value[1] &&\n        value[0].valueOf() <= value[1].valueOf()\n      )\n    }\n\n    const handleConfirm = (visible = false) => {\n      if (isValidValue([minDate.value, maxDate.value])) {\n        ctx.emit('pick', [minDate.value, maxDate.value], visible)\n      }\n    }\n\n    const onSelect = (selecting) => {\n      rangeState.value.selecting = selecting\n      if (!selecting) {\n        rangeState.value.endDate = null\n      }\n    }\n\n    const formatToString = (value) => {\n      return value.map((_) => _.format(format))\n    }\n\n    const getDefaultValue = () => {\n      let start: Dayjs\n      if (Array.isArray(defaultValue)) {\n        const left = dayjs(defaultValue[0])\n        let right = dayjs(defaultValue[1])\n        if (!props.unlinkPanels) {\n          right = left.add(1, 'year')\n        }\n        return [left, right]\n      } else if (defaultValue) {\n        start = dayjs(defaultValue)\n      } else {\n        start = dayjs()\n      }\n      start = start.locale(lang.value)\n      return [start, start.add(1, 'year')]\n    }\n\n    // pickerBase.hub.emit('SetPickerOption', ['isValidValue', isValidValue])\n    ctx.emit('set-picker-option', ['formatToString', formatToString])\n    const pickerBase = inject('EP_PICKER_BASE') as any\n    const { shortcuts, disabledDate, format, defaultValue } = pickerBase.props\n\n    watch(\n      () => props.parsedValue,\n      (newVal) => {\n        if (newVal && newVal.length === 2) {\n          minDate.value = newVal[0]\n          maxDate.value = newVal[1]\n          leftDate.value = minDate.value\n          if (props.unlinkPanels && maxDate.value) {\n            const minDateYear = minDate.value.year()\n            const maxDateYear = maxDate.value.year()\n            rightDate.value =\n              minDateYear === maxDateYear\n                ? maxDate.value.add(1, 'year')\n                : maxDate.value\n          } else {\n            rightDate.value = leftDate.value.add(1, 'year')\n          }\n        } else {\n          const defaultArr = getDefaultValue()\n          leftDate.value = defaultArr[0]\n          rightDate.value = defaultArr[1]\n        }\n      },\n      { immediate: true }\n    )\n\n    return {\n      shortcuts,\n      disabledDate,\n      onSelect,\n      handleRangePick,\n      rangeState,\n      handleChangeRange,\n      minDate,\n      maxDate,\n      enableYearArrow,\n      leftLabel,\n      rightLabel,\n      leftNextYear,\n      leftPrevYear,\n      rightNextYear,\n      rightPrevYear,\n      t,\n      leftDate,\n      rightDate,\n      hasShortcuts,\n      handleShortcutClick,\n    }\n  },\n})\n</script>\n"],"names":["_createElementBlock","_createElementVNode","_renderSlot","_createVNode"],"mappings":";;qBASS,OAAM;;;EAEgB,OAAM;AAAA;;qBAW1B,OAAM;qBAEP,OAAM;qBAED,OAAM;;qBAiCX,OAAM;qBAMD,OAAM;;;;;;;sBAhEnBA;IACE,uBAAM;;;;;;IAONC,0BAAA;MACEC,qCAAqB,OAAM;AAAA,MAChB,kCAAXF,0BAAA;0BACEA,8CAC4B,iBAAlB,UAAU;8BADpBA;YAEG;AAAA,YACD,MAAK;AAAA,YACL,OAAM;AAAA,YACL,qBAAO,yBAAoB;AAAA,6BAEzB,SAAS;;;MAGhBC,0BAAA;QACEA,0BAAA;UAGEA,0BAAA;YACEA;cACE,MAAK;AAAA,cACL,OAAM;AAAA,cACL,gDAAO;;cAERE;iCAAS;kBAAAA,YAAgB;AAAA;AAAA;;;YAGnB,kCADRH;;cAEE,MAAK;AAAA,cACJ,WAAW;cACX,yCAAyB,wBACpB;AAAA,cACL,gDAAO;;cAERG;iCAAS;kBAAAA,YAAiB;AAAA;AAAA;;;YAE5BF,gDAAQ;;UAEVE;YACE,kBAAe;AAAA,YACd,MAAM;YACN,YAAU;YACV,YAAU;YACV,eAAa;YACb,iBAAe;YACf,eAAa;YACb,QAAM;YACN,UAAQ;;;QAGbF,0BAAA;UAOEA,0BAAA;YAEU,kCADRD;;cAEE,MAAK;AAAA,cACJ,WAAW;cACX,yCAAyB,wBACpB;AAAA,cACL,gDAAO;;cAERG;iCAAS;kBAAAA,YAAgB;AAAA;AAAA;;;YAE3BF;cACE,MAAK;AAAA,cACL,OAAM;AAAA,cACL,gDAAO;;cAERE;iCAAS;kBAAAA,YAAiB;AAAA;AAAA;;;YAE5BF,gDAAQ;;UAEVE;YACE,kBAAe;AAAA,YACd,MAAM;YACN,YAAU;YACV,YAAU;YACV,eAAa;YACb,iBAAe;YACf,eAAa;YACb,QAAM;YACN,UAAQ;;;;;;;;;;"}
+{"version":3,"file":"panel-month-range.vue_vue_type_template_id_2e377892_lang.mjs","sources":["../../../../../../../packages/components/date-picker/src/date-picker-com/panel-month-range.vue?vue&type=template&id=2e377892&lang.js"],"sourcesContent":["<template>\n  <div\n    class=\"el-picker-panel el-date-range-picker\"\n    :class=\"[\n      {\n        'has-sidebar': $slots.sidebar || hasShortcuts,\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\n          class=\"el-picker-panel__content el-date-range-picker__content is-left\"\n        >\n          <div class=\"el-date-range-picker__header\">\n            <button\n              type=\"button\"\n              class=\"el-picker-panel__icon-btn d-arrow-left\"\n              @click=\"leftPrevYear\"\n            >\n              <el-icon><d-arrow-left /></el-icon>\n            </button>\n            <button\n              v-if=\"unlinkPanels\"\n              type=\"button\"\n              :disabled=\"!enableYearArrow\"\n              :class=\"{ 'is-disabled': !enableYearArrow }\"\n              class=\"el-picker-panel__icon-btn d-arrow-right\"\n              @click=\"leftNextYear\"\n            >\n              <el-icon><d-arrow-right /></el-icon>\n            </button>\n            <div>{{ leftLabel }}</div>\n          </div>\n          <month-table\n            selection-mode=\"range\"\n            :date=\"leftDate\"\n            :min-date=\"minDate\"\n            :max-date=\"maxDate\"\n            :range-state=\"rangeState\"\n            :disabled-date=\"disabledDate\"\n            @changerange=\"handleChangeRange\"\n            @pick=\"handleRangePick\"\n            @select=\"onSelect\"\n          />\n        </div>\n        <div\n          class=\"el-picker-panel__content el-date-range-picker__content is-right\"\n        >\n          <div class=\"el-date-range-picker__header\">\n            <button\n              v-if=\"unlinkPanels\"\n              type=\"button\"\n              :disabled=\"!enableYearArrow\"\n              :class=\"{ 'is-disabled': !enableYearArrow }\"\n              class=\"el-picker-panel__icon-btn d-arrow-left\"\n              @click=\"rightPrevYear\"\n            >\n              <el-icon><d-arrow-left /></el-icon>\n            </button>\n            <button\n              type=\"button\"\n              class=\"el-picker-panel__icon-btn d-arrow-right\"\n              @click=\"rightNextYear\"\n            >\n              <el-icon><d-arrow-right /></el-icon>\n            </button>\n            <div>{{ rightLabel }}</div>\n          </div>\n          <month-table\n            selection-mode=\"range\"\n            :date=\"rightDate\"\n            :min-date=\"minDate\"\n            :max-date=\"maxDate\"\n            :range-state=\"rangeState\"\n            :disabled-date=\"disabledDate\"\n            @changerange=\"handleChangeRange\"\n            @pick=\"handleRangePick\"\n            @select=\"onSelect\"\n          />\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, computed, ref, watch, inject } from 'vue'\nimport dayjs from 'dayjs'\nimport ElIcon from '@element-plus/components/icon'\nimport { useLocale } from '@element-plus/hooks'\nimport { DArrowLeft, DArrowRight } from '@element-plus/icons'\nimport MonthTable from './basic-month-table.vue'\n\nimport type { PropType } from 'vue'\nimport type { Dayjs } from 'dayjs'\n\nexport default defineComponent({\n  components: { MonthTable, ElIcon, DArrowLeft, DArrowRight },\n\n  props: {\n    unlinkPanels: Boolean,\n    parsedValue: {\n      type: Array as PropType<Dayjs[]>,\n    },\n  },\n\n  emits: ['pick', 'set-picker-option'],\n\n  setup(props, ctx) {\n    const { t, lang } = useLocale()\n    const leftDate = ref(dayjs().locale(lang.value))\n    const rightDate = ref(dayjs().locale(lang.value).add(1, 'year'))\n\n    const hasShortcuts = computed(() => !!shortcuts.length)\n\n    const handleShortcutClick = (shortcut) => {\n      const shortcutValues =\n        typeof shortcut.value === 'function' ? shortcut.value() : shortcut.value\n      if (shortcutValues) {\n        ctx.emit('pick', [\n          dayjs(shortcutValues[0]).locale(lang.value),\n          dayjs(shortcutValues[1]).locale(lang.value),\n        ])\n        return\n      }\n      if (shortcut.onClick) {\n        shortcut.onClick(ctx)\n      }\n    }\n\n    const leftPrevYear = () => {\n      leftDate.value = leftDate.value.subtract(1, 'year')\n      if (!props.unlinkPanels) {\n        rightDate.value = rightDate.value.subtract(1, 'year')\n      }\n    }\n\n    const rightNextYear = () => {\n      if (!props.unlinkPanels) {\n        leftDate.value = leftDate.value.add(1, 'year')\n      }\n      rightDate.value = rightDate.value.add(1, 'year')\n    }\n\n    const leftNextYear = () => {\n      leftDate.value = leftDate.value.add(1, 'year')\n    }\n\n    const rightPrevYear = () => {\n      rightDate.value = rightDate.value.subtract(1, 'year')\n    }\n    const leftLabel = computed(() => {\n      return `${leftDate.value.year()} ${t('el.datepicker.year')}`\n    })\n\n    const rightLabel = computed(() => {\n      return `${rightDate.value.year()} ${t('el.datepicker.year')}`\n    })\n\n    const leftYear = computed(() => {\n      return leftDate.value.year()\n    })\n\n    const rightYear = computed(() => {\n      return rightDate.value.year() === leftDate.value.year()\n        ? leftDate.value.year() + 1\n        : rightDate.value.year()\n    })\n\n    const enableYearArrow = computed(() => {\n      return props.unlinkPanels && rightYear.value > leftYear.value + 1\n    })\n\n    const minDate = ref(null)\n    const maxDate = ref(null)\n\n    const rangeState = ref({\n      endDate: null,\n      selecting: false,\n    })\n\n    const handleChangeRange = (val) => {\n      rangeState.value = val\n    }\n\n    const handleRangePick = (val, close = true) => {\n      // const defaultTime = props.defaultTime || []\n      // const minDate_ = modifyWithTimeString(val.minDate, defaultTime[0])\n      // const maxDate_ = modifyWithTimeString(val.maxDate, defaultTime[1])\n      // todo\n      const minDate_ = val.minDate\n      const maxDate_ = val.maxDate\n      if (maxDate.value === maxDate_ && minDate.value === minDate_) {\n        return\n      }\n      maxDate.value = maxDate_\n      minDate.value = minDate_\n\n      if (!close) return\n      handleConfirm()\n    }\n\n    const isValidValue = (value) => {\n      return (\n        Array.isArray(value) &&\n        value &&\n        value[0] &&\n        value[1] &&\n        value[0].valueOf() <= value[1].valueOf()\n      )\n    }\n\n    const handleConfirm = (visible = false) => {\n      if (isValidValue([minDate.value, maxDate.value])) {\n        ctx.emit('pick', [minDate.value, maxDate.value], visible)\n      }\n    }\n\n    const onSelect = (selecting) => {\n      rangeState.value.selecting = selecting\n      if (!selecting) {\n        rangeState.value.endDate = null\n      }\n    }\n\n    const formatToString = (value) => {\n      return value.map((_) => _.format(format))\n    }\n\n    const getDefaultValue = () => {\n      let start: Dayjs\n      if (Array.isArray(defaultValue)) {\n        const left = dayjs(defaultValue[0])\n        let right = dayjs(defaultValue[1])\n        if (!props.unlinkPanels) {\n          right = left.add(1, 'year')\n        }\n        return [left, right]\n      } else if (defaultValue) {\n        start = dayjs(defaultValue)\n      } else {\n        start = dayjs()\n      }\n      start = start.locale(lang.value)\n      return [start, start.add(1, 'year')]\n    }\n\n    // pickerBase.hub.emit('SetPickerOption', ['isValidValue', isValidValue])\n    ctx.emit('set-picker-option', ['formatToString', formatToString])\n    const pickerBase = inject('EP_PICKER_BASE') as any\n    const { shortcuts, disabledDate, format, defaultValue } = pickerBase.props\n\n    watch(\n      () => props.parsedValue,\n      (newVal) => {\n        if (newVal && newVal.length === 2) {\n          minDate.value = newVal[0]\n          maxDate.value = newVal[1]\n          leftDate.value = minDate.value\n          if (props.unlinkPanels && maxDate.value) {\n            const minDateYear = minDate.value.year()\n            const maxDateYear = maxDate.value.year()\n            rightDate.value =\n              minDateYear === maxDateYear\n                ? maxDate.value.add(1, 'year')\n                : maxDate.value\n          } else {\n            rightDate.value = leftDate.value.add(1, 'year')\n          }\n        } else {\n          const defaultArr = getDefaultValue()\n          leftDate.value = defaultArr[0]\n          rightDate.value = defaultArr[1]\n        }\n      },\n      { immediate: true }\n    )\n\n    return {\n      shortcuts,\n      disabledDate,\n      onSelect,\n      handleRangePick,\n      rangeState,\n      handleChangeRange,\n      minDate,\n      maxDate,\n      enableYearArrow,\n      leftLabel,\n      rightLabel,\n      leftNextYear,\n      leftPrevYear,\n      rightNextYear,\n      rightPrevYear,\n      t,\n      leftDate,\n      rightDate,\n      hasShortcuts,\n      handleShortcutClick,\n    }\n  },\n})\n</script>\n"],"names":["_createElementBlock","_createElementVNode","_renderSlot","_createVNode"],"mappings":";;qBASS,OAAM;;;EAEgB,OAAM;AAAA;;qBAW1B,OAAM;qBAEP,OAAM;qBAED,OAAM;;qBAiCX,OAAM;qBAED,OAAM;;;;;;;sBA5DnBA;IACE,uBAAM;;;;;;IAONC,0BAAA;MACEC,qCAAqB,OAAM;AAAA,MAChB,kCAAXF,0BAAA;0BACEA,8CAC4B,iBAAlB,UAAU;8BADpBA;YAEG;AAAA,YACD,MAAK;AAAA,YACL,OAAM;AAAA,YACL,qBAAO,yBAAoB;AAAA,6BAEzB,SAAS;;;MAGhBC,0BAAA;QACEA,0BAAA;UAGEA,0BAAA;YACEA;cACE,MAAK;AAAA,cACL,OAAM;AAAA,cACL,gDAAO;;cAERE;iCAAS;kBAAAA,YAAgB;AAAA;AAAA;;;YAGnB,kCADRH;;cAEE,MAAK;AAAA,cACJ,WAAW;cACX,yCAAyB,wBACpB;AAAA,cACL,gDAAO;;cAERG;iCAAS;kBAAAA,YAAiB;AAAA;AAAA;;;YAE5BF,gDAAQ;;UAEVE;YACE,kBAAe;AAAA,YACd,MAAM;YACN,YAAU;YACV,YAAU;YACV,eAAa;YACb,iBAAe;YACf,eAAa;YACb,QAAM;YACN,UAAQ;;;QAGbF,0BAAA;UAGEA,0BAAA;YAEU,kCADRD;;cAEE,MAAK;AAAA,cACJ,WAAW;cACX,yCAAyB,wBACpB;AAAA,cACL,gDAAO;;cAERG;iCAAS;kBAAAA,YAAgB;AAAA;AAAA;;;YAE3BF;cACE,MAAK;AAAA,cACL,OAAM;AAAA,cACL,gDAAO;;cAERE;iCAAS;kBAAAA,YAAiB;AAAA;AAAA;;;YAE5BF,gDAAQ;;UAEVE;YACE,kBAAe;AAAA,YACd,MAAM;YACN,YAAU;YACV,YAAU;YACV,eAAa;YACb,iBAAe;YACf,eAAa;YACb,QAAM;YACN,UAAQ;;;;;;;;;;"}

package/es/components/dialog/src/use-dialog.mjs

@@ -5,9 +5,9 @@ import { UPDATE_MODEL_EVENT } from '../../../utils/constants.mjs';
 import isServer from '../../../utils/isServer.mjs';
 import PopupManager from '../../../utils/popup-manager.mjs';
 import { isNumber } from '../../../utils/util.mjs';
-import useLockScreen from '../../../hooks/use-lockscreen/index.mjs';
-import useModal from '../../../hooks/use-modal/index.mjs';
-import useRestoreActive from '../../../hooks/use-restore-active/index.mjs';
+import { useLockscreen } from '../../../hooks/use-lockscreen/index.mjs';
+import { useModal } from '../../../hooks/use-modal/index.mjs';
+import { useRestoreActive } from '../../../hooks/use-restore-active/index.mjs';
 
 const useDialog = (props, { emit }, targetRef) => {
   const visible = ref(false);
@@ -91,7 +91,7 @@ const useDialog = (props, { emit }, targetRef) => {
     visible.value = false;
   }
   if (props.lockScroll) {
-    useLockScreen(visible);
+    useLockscreen(visible);
   }
   if (props.closeOnPressEscape) {
     useModal({

package/es/components/dialog/src/use-dialog.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-dialog.mjs","sources":["../../../../../../packages/components/dialog/src/use-dialog.ts"],"sourcesContent":["import { computed, ref, watch, nextTick, onMounted } from 'vue'\nimport { useTimeoutFn } from '@vueuse/core'\n\nimport { useLockScreen, useRestoreActive, useModal } from '@element-plus/hooks'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'\nimport isServer from '@element-plus/utils/isServer'\nimport PopupManager from '@element-plus/utils/popup-manager'\nimport { isNumber } from '@element-plus/utils/util'\n\nimport type { CSSProperties, Ref, SetupContext } from 'vue'\nimport type { DialogEmits, DialogProps } from './dialog'\n\nexport const useDialog = (\n  props: DialogProps,\n  { emit }: SetupContext<DialogEmits>,\n  targetRef: Ref<HTMLElement | undefined>\n) => {\n  const visible = ref(false)\n  const closed = ref(false)\n  const rendered = ref(false) // when desctroyOnClose is true, we initialize it as false vise versa\n  const zIndex = ref(props.zIndex || PopupManager.nextZIndex())\n\n  let openTimer: (() => void) | undefined = undefined\n  let closeTimer: (() => void) | undefined = undefined\n\n  const normalizeWidth = computed(() =>\n    isNumber(props.width) ? `${props.width}px` : props.width\n  )\n\n  const style = computed<CSSProperties>(() => {\n    const style: CSSProperties = {}\n    const varPrefix = `--el-dialog`\n    if (!props.fullscreen) {\n      if (props.top) {\n        style[`${varPrefix}-margin-top`] = props.top\n      }\n      if (props.width) {\n        style[`${varPrefix}-width`] = normalizeWidth.value\n      }\n    }\n    return style\n  })\n\n  function afterEnter() {\n    emit('opened')\n  }\n\n  function afterLeave() {\n    emit('closed')\n    emit(UPDATE_MODEL_EVENT, false)\n    if (props.destroyOnClose) {\n      rendered.value = false\n    }\n  }\n\n  function beforeLeave() {\n    emit('close')\n  }\n\n  function open() {\n    closeTimer?.()\n    openTimer?.()\n\n    if (props.openDelay && props.openDelay > 0) {\n      ;({ stop: openTimer } = useTimeoutFn(() => doOpen(), props.openDelay))\n    } else {\n      doOpen()\n    }\n  }\n\n  function close() {\n    // if (this.willClose && !this.willClose()) return;\n    openTimer?.()\n    closeTimer?.()\n\n    if (props.closeDelay && props.closeDelay > 0) {\n      ;({ stop: closeTimer } = useTimeoutFn(() => doClose(), props.closeDelay))\n    } else {\n      doClose()\n    }\n  }\n\n  function hide(shouldCancel: boolean) {\n    if (shouldCancel) return\n    closed.value = true\n    visible.value = false\n  }\n\n  function handleClose() {\n    if (props.beforeClose) {\n      props.beforeClose(hide)\n    } else {\n      close()\n    }\n  }\n\n  function onModalClick() {\n    if (props.closeOnClickModal) {\n      handleClose()\n    }\n  }\n\n  function doOpen() {\n    if (isServer) {\n      return\n    }\n\n    // if (props.willOpen?.()) {\n    //  return\n    // }\n    visible.value = true\n  }\n\n  function doClose() {\n    visible.value = false\n  }\n\n  if (props.lockScroll) {\n    useLockScreen(visible)\n  }\n\n  if (props.closeOnPressEscape) {\n    useModal(\n      {\n        handleClose,\n      },\n      visible\n    )\n  }\n\n  useRestoreActive(visible)\n\n  watch(\n    () => props.modelValue,\n    (val) => {\n      if (val) {\n        closed.value = false\n        open()\n        rendered.value = true // enables lazy rendering\n        emit('open')\n        zIndex.value = props.zIndex ? zIndex.value++ : PopupManager.nextZIndex()\n        // this.$el.addEventListener('scroll', this.updatePopper)\n        nextTick(() => {\n          if (targetRef.value) {\n            targetRef.value.scrollTop = 0\n          }\n        })\n      } else {\n        // this.$el.removeEventListener('scroll', this.updatePopper\n        if (visible.value) {\n          close()\n        }\n      }\n    }\n  )\n\n  onMounted(() => {\n    if (props.modelValue) {\n      visible.value = true\n      rendered.value = true // enables lazy rendering\n      open()\n    }\n  })\n\n  return {\n    afterEnter,\n    afterLeave,\n    beforeLeave,\n    handleClose,\n    onModalClick,\n    closed,\n    style,\n    rendered,\n    visible,\n    zIndex,\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;MAYa,YAAY,CACvB,OACA,EAAE,QACF,cACG;AACH,QAAM,UAAU,IAAI;AACpB,QAAM,SAAS,IAAI;AACnB,QAAM,WAAW,IAAI;AACrB,QAAM,SAAS,IAAI,MAAM,UAAU,aAAa;AAEhD,MAAI,YAAsC;AAC1C,MAAI,aAAuC;AAE3C,QAAM,iBAAiB,SAAS,MAC9B,SAAS,MAAM,SAAS,GAAG,MAAM,YAAY,MAAM;AAGrD,QAAM,QAAQ,SAAwB,MAAM;AAC1C,UAAM,SAAuB;AAC7B,UAAM,YAAY;AAClB,QAAI,CAAC,MAAM,YAAY;AACrB,UAAI,MAAM,KAAK;AACb,eAAM,GAAG,0BAA0B,MAAM;AAAA;AAE3C,UAAI,MAAM,OAAO;AACf,eAAM,GAAG,qBAAqB,eAAe;AAAA;AAAA;AAGjD,WAAO;AAAA;AAGT,wBAAsB;AACpB,SAAK;AAAA;AAGP,wBAAsB;AACpB,SAAK;AACL,SAAK,oBAAoB;AACzB,QAAI,MAAM,gBAAgB;AACxB,eAAS,QAAQ;AAAA;AAAA;AAIrB,yBAAuB;AACrB,SAAK;AAAA;AAGP,kBAAgB;AACd;AACA;AAEA,QAAI,MAAM,aAAa,MAAM,YAAY,GAAG;AAC1C;AAAC,MAAC,GAAE,MAAM,cAAc,aAAa,MAAM,UAAU,MAAM;AAAA,WACtD;AACL;AAAA;AAAA;AAIJ,mBAAiB;AAEf;AACA;AAEA,QAAI,MAAM,cAAc,MAAM,aAAa,GAAG;AAC5C;AAAC,MAAC,GAAE,MAAM,eAAe,aAAa,MAAM,WAAW,MAAM;AAAA,WACxD;AACL;AAAA;AAAA;AAIJ,gBAAc,cAAuB;AACnC,QAAI;AAAc;AAClB,WAAO,QAAQ;AACf,YAAQ,QAAQ;AAAA;AAGlB,yBAAuB;AACrB,QAAI,MAAM,aAAa;AACrB,YAAM,YAAY;AAAA,WACb;AACL;AAAA;AAAA;AAIJ,0BAAwB;AACtB,QAAI,MAAM,mBAAmB;AAC3B;AAAA;AAAA;AAIJ,oBAAkB;AAChB,QAAI,UAAU;AACZ;AAAA;AAMF,YAAQ,QAAQ;AAAA;AAGlB,qBAAmB;AACjB,YAAQ,QAAQ;AAAA;AAGlB,MAAI,MAAM,YAAY;AACpB,kBAAc;AAAA;AAGhB,MAAI,MAAM,oBAAoB;AAC5B,aACE;AAAA,MACE;AAAA,OAEF;AAAA;AAIJ,mBAAiB;AAEjB,QACE,MAAM,MAAM,YACZ,CAAC,QAAQ;AACP,QAAI,KAAK;AACP,aAAO,QAAQ;AACf;AACA,eAAS,QAAQ;AACjB,WAAK;AACL,aAAO,QAAQ,MAAM,SAAS,OAAO,UAAU,aAAa;AAE5D,eAAS,MAAM;AACb,YAAI,UAAU,OAAO;AACnB,oBAAU,MAAM,YAAY;AAAA;AAAA;AAAA,WAG3B;AAEL,UAAI,QAAQ,OAAO;AACjB;AAAA;AAAA;AAAA;AAMR,YAAU,MAAM;AACd,QAAI,MAAM,YAAY;AACpB,cAAQ,QAAQ;AAChB,eAAS,QAAQ;AACjB;AAAA;AAAA;AAIJ,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA;;;;"}
+{"version":3,"file":"use-dialog.mjs","sources":["../../../../../../packages/components/dialog/src/use-dialog.ts"],"sourcesContent":["import { computed, ref, watch, nextTick, onMounted } from 'vue'\nimport { useTimeoutFn } from '@vueuse/core'\n\nimport { useLockscreen, useRestoreActive, useModal } from '@element-plus/hooks'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'\nimport isServer from '@element-plus/utils/isServer'\nimport PopupManager from '@element-plus/utils/popup-manager'\nimport { isNumber } from '@element-plus/utils/util'\n\nimport type { CSSProperties, Ref, SetupContext } from 'vue'\nimport type { DialogEmits, DialogProps } from './dialog'\n\nexport const useDialog = (\n  props: DialogProps,\n  { emit }: SetupContext<DialogEmits>,\n  targetRef: Ref<HTMLElement | undefined>\n) => {\n  const visible = ref(false)\n  const closed = ref(false)\n  const rendered = ref(false) // when desctroyOnClose is true, we initialize it as false vise versa\n  const zIndex = ref(props.zIndex || PopupManager.nextZIndex())\n\n  let openTimer: (() => void) | undefined = undefined\n  let closeTimer: (() => void) | undefined = undefined\n\n  const normalizeWidth = computed(() =>\n    isNumber(props.width) ? `${props.width}px` : props.width\n  )\n\n  const style = computed<CSSProperties>(() => {\n    const style: CSSProperties = {}\n    const varPrefix = `--el-dialog`\n    if (!props.fullscreen) {\n      if (props.top) {\n        style[`${varPrefix}-margin-top`] = props.top\n      }\n      if (props.width) {\n        style[`${varPrefix}-width`] = normalizeWidth.value\n      }\n    }\n    return style\n  })\n\n  function afterEnter() {\n    emit('opened')\n  }\n\n  function afterLeave() {\n    emit('closed')\n    emit(UPDATE_MODEL_EVENT, false)\n    if (props.destroyOnClose) {\n      rendered.value = false\n    }\n  }\n\n  function beforeLeave() {\n    emit('close')\n  }\n\n  function open() {\n    closeTimer?.()\n    openTimer?.()\n\n    if (props.openDelay && props.openDelay > 0) {\n      ;({ stop: openTimer } = useTimeoutFn(() => doOpen(), props.openDelay))\n    } else {\n      doOpen()\n    }\n  }\n\n  function close() {\n    // if (this.willClose && !this.willClose()) return;\n    openTimer?.()\n    closeTimer?.()\n\n    if (props.closeDelay && props.closeDelay > 0) {\n      ;({ stop: closeTimer } = useTimeoutFn(() => doClose(), props.closeDelay))\n    } else {\n      doClose()\n    }\n  }\n\n  function hide(shouldCancel: boolean) {\n    if (shouldCancel) return\n    closed.value = true\n    visible.value = false\n  }\n\n  function handleClose() {\n    if (props.beforeClose) {\n      props.beforeClose(hide)\n    } else {\n      close()\n    }\n  }\n\n  function onModalClick() {\n    if (props.closeOnClickModal) {\n      handleClose()\n    }\n  }\n\n  function doOpen() {\n    if (isServer) {\n      return\n    }\n\n    // if (props.willOpen?.()) {\n    //  return\n    // }\n    visible.value = true\n  }\n\n  function doClose() {\n    visible.value = false\n  }\n\n  if (props.lockScroll) {\n    useLockscreen(visible)\n  }\n\n  if (props.closeOnPressEscape) {\n    useModal(\n      {\n        handleClose,\n      },\n      visible\n    )\n  }\n\n  useRestoreActive(visible)\n\n  watch(\n    () => props.modelValue,\n    (val) => {\n      if (val) {\n        closed.value = false\n        open()\n        rendered.value = true // enables lazy rendering\n        emit('open')\n        zIndex.value = props.zIndex ? zIndex.value++ : PopupManager.nextZIndex()\n        // this.$el.addEventListener('scroll', this.updatePopper)\n        nextTick(() => {\n          if (targetRef.value) {\n            targetRef.value.scrollTop = 0\n          }\n        })\n      } else {\n        // this.$el.removeEventListener('scroll', this.updatePopper\n        if (visible.value) {\n          close()\n        }\n      }\n    }\n  )\n\n  onMounted(() => {\n    if (props.modelValue) {\n      visible.value = true\n      rendered.value = true // enables lazy rendering\n      open()\n    }\n  })\n\n  return {\n    afterEnter,\n    afterLeave,\n    beforeLeave,\n    handleClose,\n    onModalClick,\n    closed,\n    style,\n    rendered,\n    visible,\n    zIndex,\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;MAYa,YAAY,CACvB,OACA,EAAE,QACF,cACG;AACH,QAAM,UAAU,IAAI;AACpB,QAAM,SAAS,IAAI;AACnB,QAAM,WAAW,IAAI;AACrB,QAAM,SAAS,IAAI,MAAM,UAAU,aAAa;AAEhD,MAAI,YAAsC;AAC1C,MAAI,aAAuC;AAE3C,QAAM,iBAAiB,SAAS,MAC9B,SAAS,MAAM,SAAS,GAAG,MAAM,YAAY,MAAM;AAGrD,QAAM,QAAQ,SAAwB,MAAM;AAC1C,UAAM,SAAuB;AAC7B,UAAM,YAAY;AAClB,QAAI,CAAC,MAAM,YAAY;AACrB,UAAI,MAAM,KAAK;AACb,eAAM,GAAG,0BAA0B,MAAM;AAAA;AAE3C,UAAI,MAAM,OAAO;AACf,eAAM,GAAG,qBAAqB,eAAe;AAAA;AAAA;AAGjD,WAAO;AAAA;AAGT,wBAAsB;AACpB,SAAK;AAAA;AAGP,wBAAsB;AACpB,SAAK;AACL,SAAK,oBAAoB;AACzB,QAAI,MAAM,gBAAgB;AACxB,eAAS,QAAQ;AAAA;AAAA;AAIrB,yBAAuB;AACrB,SAAK;AAAA;AAGP,kBAAgB;AACd;AACA;AAEA,QAAI,MAAM,aAAa,MAAM,YAAY,GAAG;AAC1C;AAAC,MAAC,GAAE,MAAM,cAAc,aAAa,MAAM,UAAU,MAAM;AAAA,WACtD;AACL;AAAA;AAAA;AAIJ,mBAAiB;AAEf;AACA;AAEA,QAAI,MAAM,cAAc,MAAM,aAAa,GAAG;AAC5C;AAAC,MAAC,GAAE,MAAM,eAAe,aAAa,MAAM,WAAW,MAAM;AAAA,WACxD;AACL;AAAA;AAAA;AAIJ,gBAAc,cAAuB;AACnC,QAAI;AAAc;AAClB,WAAO,QAAQ;AACf,YAAQ,QAAQ;AAAA;AAGlB,yBAAuB;AACrB,QAAI,MAAM,aAAa;AACrB,YAAM,YAAY;AAAA,WACb;AACL;AAAA;AAAA;AAIJ,0BAAwB;AACtB,QAAI,MAAM,mBAAmB;AAC3B;AAAA;AAAA;AAIJ,oBAAkB;AAChB,QAAI,UAAU;AACZ;AAAA;AAMF,YAAQ,QAAQ;AAAA;AAGlB,qBAAmB;AACjB,YAAQ,QAAQ;AAAA;AAGlB,MAAI,MAAM,YAAY;AACpB,kBAAc;AAAA;AAGhB,MAAI,MAAM,oBAAoB;AAC5B,aACE;AAAA,MACE;AAAA,OAEF;AAAA;AAIJ,mBAAiB;AAEjB,QACE,MAAM,MAAM,YACZ,CAAC,QAAQ;AACP,QAAI,KAAK;AACP,aAAO,QAAQ;AACf;AACA,eAAS,QAAQ;AACjB,WAAK;AACL,aAAO,QAAQ,MAAM,SAAS,OAAO,UAAU,aAAa;AAE5D,eAAS,MAAM;AACb,YAAI,UAAU,OAAO;AACnB,oBAAU,MAAM,YAAY;AAAA;AAAA;AAAA,WAG3B;AAEL,UAAI,QAAQ,OAAO;AACjB;AAAA;AAAA;AAAA;AAMR,YAAU,MAAM;AACd,QAAI,MAAM,YAAY;AACpB,cAAQ,QAAQ;AAChB,eAAS,QAAQ;AACjB;AAAA;AAAA;AAIJ,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA;;;;"}

package/es/components/dropdown/index.d.ts

@@ -68,7 +68,7 @@ export declare const ElDropdown: import("../../utils/types").SFCWithInstall<impo
     showTimeout: number;
     hideTimeout: number;
 } & {
-    type?: unknown;
+    type?: any;
 }> & {
     onClick?: ((...args: any[]) => any) | undefined;
     "onVisible-change"?: ((...args: any[]) => any) | undefined;

package/es/components/dropdown/src/dropdown.vue.d.ts

@@ -73,7 +73,7 @@ declare const _default: import("vue").DefineComponent<{
     showTimeout: number;
     hideTimeout: number;
 } & {
-    type?: unknown;
+    type?: any;
 }> & {
     onClick?: ((...args: any[]) => any) | undefined;
     "onVisible-change"?: ((...args: any[]) => any) | undefined;

package/es/components/empty/src/empty.vue_vue_type_script_lang.mjs

@@ -3,7 +3,7 @@ import '../../../hooks/index.mjs';
 import './img-empty.mjs';
 import { emptyProps } from './empty.mjs';
 import script$1 from './img-empty.vue_vue_type_script_lang.mjs';
-import { useLocaleInject } from '../../../hooks/use-locale/index.mjs';
+import { useLocale } from '../../../hooks/use-locale/index.mjs';
 
 var script = defineComponent({
   name: "ElEmpty",
@@ -12,7 +12,7 @@ var script = defineComponent({
   },
   props: emptyProps,
   setup(props) {
-    const { t } = useLocaleInject();
+    const { t } = useLocale();
     const emptyDescription = computed(() => props.description || t("el.table.emptyText"));
     const imageStyle = computed(() => ({
       width: props.imageSize ? `${props.imageSize}px` : ""

package/es/components/empty/src/empty.vue_vue_type_script_lang.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"empty.vue_vue_type_script_lang.mjs","sources":["../../../../../../packages/components/empty/src/empty.vue"],"sourcesContent":["<template>\n  <div class=\"el-empty\">\n    <div class=\"el-empty__image\" :style=\"imageStyle\">\n      <img v-if=\"image\" :src=\"image\" ondragstart=\"return false\" />\n      <slot v-else name=\"image\">\n        <img-empty />\n      </slot>\n    </div>\n    <div class=\"el-empty__description\">\n      <slot v-if=\"$slots.description\" name=\"description\"></slot>\n      <p v-else>{{ emptyDescription }}</p>\n    </div>\n    <div v-if=\"$slots.default\" class=\"el-empty__bottom\">\n      <slot></slot>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent } from 'vue'\nimport { useLocaleInject } from '@element-plus/hooks'\nimport ImgEmpty from './img-empty.vue'\nimport { emptyProps } from './empty'\n\nimport type { CSSProperties } from 'vue'\n\nexport default defineComponent({\n  name: 'ElEmpty',\n  components: {\n    ImgEmpty,\n  },\n\n  props: emptyProps,\n\n  setup(props) {\n    const { t } = useLocaleInject()\n    const emptyDescription = computed(\n      () => props.description || t('el.table.emptyText')\n    )\n    const imageStyle = computed<CSSProperties>(() => ({\n      width: props.imageSize ? `${props.imageSize}px` : '',\n    }))\n\n    return {\n      emptyDescription,\n      imageStyle,\n    }\n  },\n})\n</script>\n"],"names":["ImgEmpty"],"mappings":";;;;;;;AA0BA,aAAe,gBAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,cACVA;AAAA;AAAA,EAGF,OAAO;AAAA,EAEP,MAAM,OAAO;AACX,UAAM,EAAE,MAAM;AACd,UAAM,mBAAmB,SACvB,MAAM,MAAM,eAAe,EAAE;AAE/B,UAAM,aAAa,SAAwB;AAAO,MAChD,OAAO,MAAM,YAAY,GAAG,MAAM,gBAAgB;AAAA;AAGpD,WAAO;AAAA,MACL;AAAA,MACA;AAAA;AAAA;AAAA;;;;"}
+{"version":3,"file":"empty.vue_vue_type_script_lang.mjs","sources":["../../../../../../packages/components/empty/src/empty.vue"],"sourcesContent":["<template>\n  <div class=\"el-empty\">\n    <div class=\"el-empty__image\" :style=\"imageStyle\">\n      <img v-if=\"image\" :src=\"image\" ondragstart=\"return false\" />\n      <slot v-else name=\"image\">\n        <img-empty />\n      </slot>\n    </div>\n    <div class=\"el-empty__description\">\n      <slot v-if=\"$slots.description\" name=\"description\"></slot>\n      <p v-else>{{ emptyDescription }}</p>\n    </div>\n    <div v-if=\"$slots.default\" class=\"el-empty__bottom\">\n      <slot></slot>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent } from 'vue'\nimport { useLocale } from '@element-plus/hooks'\nimport ImgEmpty from './img-empty.vue'\nimport { emptyProps } from './empty'\n\nimport type { CSSProperties } from 'vue'\n\nexport default defineComponent({\n  name: 'ElEmpty',\n  components: {\n    ImgEmpty,\n  },\n\n  props: emptyProps,\n\n  setup(props) {\n    const { t } = useLocale()\n    const emptyDescription = computed(\n      () => props.description || t('el.table.emptyText')\n    )\n    const imageStyle = computed<CSSProperties>(() => ({\n      width: props.imageSize ? `${props.imageSize}px` : '',\n    }))\n\n    return {\n      emptyDescription,\n      imageStyle,\n    }\n  },\n})\n</script>\n"],"names":["ImgEmpty"],"mappings":";;;;;;;AA0BA,aAAe,gBAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,cACVA;AAAA;AAAA,EAGF,OAAO;AAAA,EAEP,MAAM,OAAO;AACX,UAAM,EAAE,MAAM;AACd,UAAM,mBAAmB,SACvB,MAAM,MAAM,eAAe,EAAE;AAE/B,UAAM,aAAa,SAAwB;AAAO,MAChD,OAAO,MAAM,YAAY,GAAG,MAAM,gBAAgB;AAAA;AAGpD,WAAO;AAAA,MACL;AAAA,MACA;AAAA;AAAA;AAAA;;;;"}

package/es/components/empty/src/empty.vue_vue_type_template_id_10d211eb_lang.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"empty.vue_vue_type_template_id_10d211eb_lang.mjs","sources":["../../../../../../packages/components/empty/src/empty.vue?vue&type=template&id=10d211eb&lang.js"],"sourcesContent":["<template>\n  <div class=\"el-empty\">\n    <div class=\"el-empty__image\" :style=\"imageStyle\">\n      <img v-if=\"image\" :src=\"image\" ondragstart=\"return false\" />\n      <slot v-else name=\"image\">\n        <img-empty />\n      </slot>\n    </div>\n    <div class=\"el-empty__description\">\n      <slot v-if=\"$slots.description\" name=\"description\"></slot>\n      <p v-else>{{ emptyDescription }}</p>\n    </div>\n    <div v-if=\"$slots.default\" class=\"el-empty__bottom\">\n      <slot></slot>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent } from 'vue'\nimport { useLocaleInject } from '@element-plus/hooks'\nimport ImgEmpty from './img-empty.vue'\nimport { emptyProps } from './empty'\n\nimport type { CSSProperties } from 'vue'\n\nexport default defineComponent({\n  name: 'ElEmpty',\n  components: {\n    ImgEmpty,\n  },\n\n  props: emptyProps,\n\n  setup(props) {\n    const { t } = useLocaleInject()\n    const emptyDescription = computed(\n      () => props.description || t('el.table.emptyText')\n    )\n    const imageStyle = computed<CSSProperties>(() => ({\n      width: props.imageSize ? `${props.imageSize}px` : '',\n    }))\n\n    return {\n      emptyDescription,\n      imageStyle,\n    }\n  },\n})\n</script>\n"],"names":["_createElementBlock","_createElementVNode","_renderSlot","_createVNode"],"mappings":";;qBACO,OAAM;;qBAOJ,OAAM;;;;EAIgB,OAAM;AAAA;;;sBAXnCA,0BAAA;IACEC;MAAK,OAAM;AAAA,MAAmB,sBAAO;;MACxB,2BAAXD;;QAAmB,KAAK;QAAO,aAAY;AAAA,iCAC3CE,6CAAA;QACEC;;;IAGJF,0BAAA;MACc,YAAO,cAAnBC,mEACAF,oDAAa;;IAEJ,YAAO,wBAAlBA,0BAAA;MACEE;;;;;;;"}
+{"version":3,"file":"empty.vue_vue_type_template_id_10d211eb_lang.mjs","sources":["../../../../../../packages/components/empty/src/empty.vue?vue&type=template&id=10d211eb&lang.js"],"sourcesContent":["<template>\n  <div class=\"el-empty\">\n    <div class=\"el-empty__image\" :style=\"imageStyle\">\n      <img v-if=\"image\" :src=\"image\" ondragstart=\"return false\" />\n      <slot v-else name=\"image\">\n        <img-empty />\n      </slot>\n    </div>\n    <div class=\"el-empty__description\">\n      <slot v-if=\"$slots.description\" name=\"description\"></slot>\n      <p v-else>{{ emptyDescription }}</p>\n    </div>\n    <div v-if=\"$slots.default\" class=\"el-empty__bottom\">\n      <slot></slot>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent } from 'vue'\nimport { useLocale } from '@element-plus/hooks'\nimport ImgEmpty from './img-empty.vue'\nimport { emptyProps } from './empty'\n\nimport type { CSSProperties } from 'vue'\n\nexport default defineComponent({\n  name: 'ElEmpty',\n  components: {\n    ImgEmpty,\n  },\n\n  props: emptyProps,\n\n  setup(props) {\n    const { t } = useLocale()\n    const emptyDescription = computed(\n      () => props.description || t('el.table.emptyText')\n    )\n    const imageStyle = computed<CSSProperties>(() => ({\n      width: props.imageSize ? `${props.imageSize}px` : '',\n    }))\n\n    return {\n      emptyDescription,\n      imageStyle,\n    }\n  },\n})\n</script>\n"],"names":["_createElementBlock","_createElementVNode","_renderSlot","_createVNode"],"mappings":";;qBACO,OAAM;;qBAOJ,OAAM;;;;EAIgB,OAAM;AAAA;;;sBAXnCA,0BAAA;IACEC;MAAK,OAAM;AAAA,MAAmB,sBAAO;;MACxB,2BAAXD;;QAAmB,KAAK;QAAO,aAAY;AAAA,iCAC3CE,6CAAA;QACEC;;;IAGJF,0BAAA;MACc,YAAO,cAAnBC,mEACAF,oDAAa;;IAEJ,YAAO,wBAAlBA,0BAAA;MACEE;;;;;;;"}

package/es/components/image/index.d.ts

@@ -21,7 +21,7 @@ export declare const ElImage: import("../../utils/types").SFCWithInstall<import(
     clickHandler: () => void;
     closeViewer: () => void;
     switchViewer: (val: number) => void;
-    t: (...args: any[]) => string;
+    t: import("../..").Translator;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     error: (evt: Event) => boolean;
     switch: (val: number) => boolean;

package/es/components/image/src/image.vue.d.ts

@@ -22,7 +22,7 @@ declare const _default: import("vue").DefineComponent<{
     clickHandler: () => void;
     closeViewer: () => void;
     switchViewer: (val: number) => void;
-    t: (...args: any[]) => string;
+    t: import("element-plus/es/hooks").Translator;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     error: (evt: Event) => boolean;
     switch: (val: number) => boolean;

package/es/components/image/src/image.vue_vue_type_script_lang.mjs

@@ -6,8 +6,8 @@ import { ElImageViewer } from '../../image-viewer/index.mjs';
 import isServer from '../../../utils/isServer.mjs';
 import { isInContainer, getScrollContainer } from '../../../utils/dom.mjs';
 import { imageProps, imageEmits } from './image.mjs';
-import { useLocaleInject } from '../../../hooks/use-locale/index.mjs';
-import useAttrs from '../../../hooks/use-attrs/index.mjs';
+import { useLocale } from '../../../hooks/use-locale/index.mjs';
+import { useAttrs } from '../../../hooks/use-attrs/index.mjs';
 
 const isHtmlElement = (e) => e && e.nodeType === Node.ELEMENT_NODE;
 let prevOverflow = "";
@@ -20,7 +20,7 @@ var script = defineComponent({
   props: imageProps,
   emits: imageEmits,
   setup(props, { emit, attrs: rawAttrs }) {
-    const { t } = useLocaleInject();
+    const { t } = useLocale();
     const attrs = useAttrs();
     const hasLoadError = ref(false);
     const loading = ref(true);

package/es/components/image/src/image.vue_vue_type_script_lang.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"image.vue_vue_type_script_lang.mjs","sources":["../../../../../../packages/components/image/src/image.vue"],"sourcesContent":["<template>\n  <div\n    ref=\"container\"\n    :class=\"['el-image', $attrs.class]\"\n    :style=\"containerStyle\"\n  >\n    <slot v-if=\"loading\" name=\"placeholder\">\n      <div class=\"el-image__placeholder\"></div>\n    </slot>\n    <slot v-else-if=\"hasLoadError\" name=\"error\">\n      <div class=\"el-image__error\">{{ t('el.image.error') }}</div>\n    </slot>\n    <img\n      v-else\n      class=\"el-image__inner\"\n      v-bind=\"attrs\"\n      :src=\"src\"\n      :style=\"imageStyle\"\n      :class=\"{\n        'el-image__preview': preview,\n      }\"\n      @click=\"clickHandler\"\n    />\n    <teleport to=\"body\" :disabled=\"!appendToBody\">\n      <template v-if=\"preview\">\n        <image-viewer\n          v-if=\"showViewer\"\n          :z-index=\"zIndex\"\n          :initial-index=\"imageIndex\"\n          :url-list=\"previewSrcList\"\n          :hide-on-click-modal=\"hideOnClickModal\"\n          @close=\"closeViewer\"\n          @switch=\"switchViewer\"\n        >\n          <div v-if=\"$slots.viewer\">\n            <slot name=\"viewer\" />\n          </div>\n        </image-viewer>\n      </template>\n    </teleport>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, computed, ref, onMounted, watch, nextTick } from 'vue'\nimport { isString } from '@vue/shared'\nimport { useEventListener, useThrottleFn } from '@vueuse/core'\nimport { useAttrs, useLocaleInject } from '@element-plus/hooks'\nimport ImageViewer from '@element-plus/components/image-viewer'\nimport isServer from '@element-plus/utils/isServer'\nimport { getScrollContainer, isInContainer } from '@element-plus/utils/dom'\nimport { imageEmits, imageProps } from './image'\n\nimport type { CSSProperties, StyleValue } from 'vue'\n\nconst isHtmlElement = (e: any): e is Element =>\n  e && e.nodeType === Node.ELEMENT_NODE\n\nlet prevOverflow = ''\n\nexport default defineComponent({\n  name: 'ElImage',\n  components: {\n    ImageViewer,\n  },\n  inheritAttrs: false,\n\n  props: imageProps,\n  emits: imageEmits,\n\n  setup(props, { emit, attrs: rawAttrs }) {\n    const { t } = useLocaleInject()\n\n    const attrs = useAttrs()\n    const hasLoadError = ref(false)\n    const loading = ref(true)\n    const imgWidth = ref(0)\n    const imgHeight = ref(0)\n    const showViewer = ref(false)\n    const container = ref<HTMLElement>()\n\n    const _scrollContainer = ref<HTMLElement | Window>()\n    let stopScrollListener: () => void\n    let stopWheelListener: () => void\n\n    const containerStyle = computed(() => rawAttrs.style as StyleValue)\n\n    const imageStyle = computed<CSSProperties>(() => {\n      const { fit } = props\n      if (!isServer && fit) {\n        return { objectFit: fit }\n      }\n      return {}\n    })\n\n    const preview = computed(() => {\n      const { previewSrcList } = props\n      return Array.isArray(previewSrcList) && previewSrcList.length > 0\n    })\n\n    const imageIndex = computed(() => {\n      const { src, previewSrcList, initialIndex } = props\n      let previewIndex = initialIndex\n      const srcIndex = previewSrcList.indexOf(src)\n      if (srcIndex >= 0) {\n        previewIndex = srcIndex\n      }\n      return previewIndex\n    })\n\n    const loadImage = () => {\n      if (isServer) return\n\n      // reset status\n      loading.value = true\n      hasLoadError.value = false\n\n      const img = new Image()\n      img.addEventListener('load', (e) => handleLoad(e, img))\n      img.addEventListener('error', handleError)\n\n      // bind html attrs\n      // so it can behave consistently\n      Object.entries(attrs.value).forEach(([key, value]) => {\n        // avoid onload to be overwritten\n        if (key.toLowerCase() === 'onload') return\n        img.setAttribute(key, value as string)\n      })\n      img.src = props.src\n    }\n\n    function handleLoad(e: Event, img: HTMLImageElement) {\n      imgWidth.value = img.width\n      imgHeight.value = img.height\n      loading.value = false\n      hasLoadError.value = false\n    }\n\n    function handleError(event: Event) {\n      loading.value = false\n      hasLoadError.value = true\n      emit('error', event)\n    }\n\n    function handleLazyLoad() {\n      if (isInContainer(container.value, _scrollContainer.value)) {\n        loadImage()\n        removeLazyLoadListener()\n      }\n    }\n    const lazyLoadHandler = useThrottleFn(handleLazyLoad, 200)\n\n    async function addLazyLoadListener() {\n      if (isServer) return\n\n      await nextTick()\n\n      const { scrollContainer } = props\n      if (isHtmlElement(scrollContainer)) {\n        _scrollContainer.value = scrollContainer\n      } else if (isString(scrollContainer) && scrollContainer !== '') {\n        _scrollContainer.value =\n          document.querySelector<HTMLElement>(scrollContainer) ?? undefined\n      } else if (container.value) {\n        _scrollContainer.value = getScrollContainer(container.value)\n      }\n\n      if (_scrollContainer.value) {\n        stopScrollListener = useEventListener(\n          _scrollContainer,\n          'scroll',\n          lazyLoadHandler\n        )\n        setTimeout(() => handleLazyLoad(), 100)\n      }\n    }\n\n    function removeLazyLoadListener() {\n      if (isServer || !_scrollContainer.value || !lazyLoadHandler) return\n\n      stopScrollListener()\n      _scrollContainer.value = undefined\n    }\n\n    function wheelHandler(e: WheelEvent) {\n      if (!e.ctrlKey) return\n\n      if (e.deltaY < 0) {\n        e.preventDefault()\n        return false\n      } else if (e.deltaY > 0) {\n        e.preventDefault()\n        return false\n      }\n    }\n\n    function clickHandler() {\n      // don't show viewer when preview is false\n      if (!preview.value) return\n\n      stopWheelListener = useEventListener('wheel', wheelHandler, {\n        passive: false,\n      })\n\n      // prevent body scroll\n      prevOverflow = document.body.style.overflow\n      document.body.style.overflow = 'hidden'\n      showViewer.value = true\n    }\n\n    function closeViewer() {\n      stopWheelListener?.()\n      document.body.style.overflow = prevOverflow\n      showViewer.value = false\n      emit('close')\n    }\n\n    function switchViewer(val: number) {\n      emit('switch', val)\n    }\n\n    watch(\n      () => props.src,\n      () => {\n        if (props.lazy) {\n          // reset status\n          loading.value = true\n          hasLoadError.value = false\n          removeLazyLoadListener()\n          addLazyLoadListener()\n        } else {\n          loadImage()\n        }\n      }\n    )\n\n    onMounted(() => {\n      if (props.lazy) {\n        addLazyLoadListener()\n      } else {\n        loadImage()\n      }\n    })\n\n    return {\n      attrs,\n      loading,\n      hasLoadError,\n      showViewer,\n      containerStyle,\n      imageStyle,\n      preview,\n      imageIndex,\n      container,\n\n      clickHandler,\n      closeViewer,\n      switchViewer,\n      t,\n    }\n  },\n})\n</script>\n"],"names":["ImageViewer"],"mappings":";;;;;;;;;;;AAuDA,MAAM,gBAAgB,CAAC,MACrB,KAAK,EAAE,aAAa,KAAK;AAE3B,IAAI,eAAe;AAEnB,aAAe,gBAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,iBACVA;AAAA;AAAA,EAEF,cAAc;AAAA,EAEd,OAAO;AAAA,EACP,OAAO;AAAA,EAEP,MAAM,OAAO,EAAE,MAAM,OAAO,YAAY;AACtC,UAAM,EAAE,MAAM;AAEd,UAAM,QAAQ;AACd,UAAM,eAAe,IAAI;AACzB,UAAM,UAAU,IAAI;AACpB,UAAM,WAAW,IAAI;AACrB,UAAM,YAAY,IAAI;AACtB,UAAM,aAAa,IAAI;AACvB,UAAM,YAAY;AAElB,UAAM,mBAAmB;AACzB,QAAI;AACJ,QAAI;AAEJ,UAAM,iBAAiB,SAAS,MAAM,SAAS;AAE/C,UAAM,aAAa,SAAwB,MAAM;AAC/C,YAAM,EAAE,QAAQ;AAChB,UAAI,CAAC,YAAY,KAAK;AACpB,eAAO,EAAE,WAAW;AAAA;AAEtB,aAAO;AAAA;AAGT,UAAM,UAAU,SAAS,MAAM;AAC7B,YAAM,EAAE,mBAAmB;AAC3B,aAAO,MAAM,QAAQ,mBAAmB,eAAe,SAAS;AAAA;AAGlE,UAAM,aAAa,SAAS,MAAM;AAChC,YAAM,EAAE,KAAK,gBAAgB,iBAAiB;AAC9C,UAAI,eAAe;AACnB,YAAM,WAAW,eAAe,QAAQ;AACxC,UAAI,YAAY,GAAG;AACjB,uBAAe;AAAA;AAEjB,aAAO;AAAA;AAGT,UAAM,YAAY,MAAM;AACtB,UAAI;AAAU;AAGd,cAAQ,QAAQ;AAChB,mBAAa,QAAQ;AAErB,YAAM,MAAM,IAAI;AAChB,UAAI,iBAAiB,QAAQ,CAAC,MAAM,WAAW,GAAG;AAClD,UAAI,iBAAiB,SAAS;AAI9B,aAAO,QAAQ,MAAM,OAAO,QAAQ,CAAC,CAAC,KAAK,WAAW;AAEpD,YAAI,IAAI,kBAAkB;AAAU;AACpC,YAAI,aAAa,KAAK;AAAA;AAExB,UAAI,MAAM,MAAM;AAAA;AAGlB,wBAAoB,GAAU,KAAuB;AACnD,eAAS,QAAQ,IAAI;AACrB,gBAAU,QAAQ,IAAI;AACtB,cAAQ,QAAQ;AAChB,mBAAa,QAAQ;AAAA;AAGvB,yBAAqB,OAAc;AACjC,cAAQ,QAAQ;AAChB,mBAAa,QAAQ;AACrB,WAAK,SAAS;AAAA;AAGhB,8BAA0B;AACxB,UAAI,cAAc,UAAU,OAAO,iBAAiB,QAAQ;AAC1D;AACA;AAAA;AAAA;AAGJ,UAAM,kBAAkB,cAAc,gBAAgB;AAEtD,yCAAqC;;AACnC,UAAI;AAAU;AAEd,YAAM;AAEN,YAAM,EAAE,oBAAoB;AAC5B,UAAI,cAAc,kBAAkB;AAClC,yBAAiB,QAAQ;AAAA,iBAChB,SAAS,oBAAoB,oBAAoB,IAAI;AAC9D,yBAAiB,QACf,eAAS,cAA2B,qBAApC,YAAwD;AAAA,iBACjD,UAAU,OAAO;AAC1B,yBAAiB,QAAQ,mBAAmB,UAAU;AAAA;AAGxD,UAAI,iBAAiB,OAAO;AAC1B,6BAAqB,iBACnB,kBACA,UACA;AAEF,mBAAW,MAAM,kBAAkB;AAAA;AAAA;AAIvC,sCAAkC;AAChC,UAAI,YAAY,CAAC,iBAAiB,SAAS,CAAC;AAAiB;AAE7D;AACA,uBAAiB,QAAQ;AAAA;AAG3B,0BAAsB,GAAe;AACnC,UAAI,CAAC,EAAE;AAAS;AAEhB,UAAI,EAAE,SAAS,GAAG;AAChB,UAAE;AACF,eAAO;AAAA,iBACE,EAAE,SAAS,GAAG;AACvB,UAAE;AACF,eAAO;AAAA;AAAA;AAIX,4BAAwB;AAEtB,UAAI,CAAC,QAAQ;AAAO;AAEpB,0BAAoB,iBAAiB,SAAS,cAAc;AAAA,QAC1D,SAAS;AAAA;AAIX,qBAAe,SAAS,KAAK,MAAM;AACnC,eAAS,KAAK,MAAM,WAAW;AAC/B,iBAAW,QAAQ;AAAA;AAGrB,2BAAuB;AACrB;AACA,eAAS,KAAK,MAAM,WAAW;AAC/B,iBAAW,QAAQ;AACnB,WAAK;AAAA;AAGP,0BAAsB,KAAa;AACjC,WAAK,UAAU;AAAA;AAGjB,UACE,MAAM,MAAM,KACZ,MAAM;AACJ,UAAI,MAAM,MAAM;AAEd,gBAAQ,QAAQ;AAChB,qBAAa,QAAQ;AACrB;AACA;AAAA,aACK;AACL;AAAA;AAAA;AAKN,cAAU,MAAM;AACd,UAAI,MAAM,MAAM;AACd;AAAA,aACK;AACL;AAAA;AAAA;AAIJ,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA;AAAA;;;;"}
+{"version":3,"file":"image.vue_vue_type_script_lang.mjs","sources":["../../../../../../packages/components/image/src/image.vue"],"sourcesContent":["<template>\n  <div\n    ref=\"container\"\n    :class=\"['el-image', $attrs.class]\"\n    :style=\"containerStyle\"\n  >\n    <slot v-if=\"loading\" name=\"placeholder\">\n      <div class=\"el-image__placeholder\"></div>\n    </slot>\n    <slot v-else-if=\"hasLoadError\" name=\"error\">\n      <div class=\"el-image__error\">{{ t('el.image.error') }}</div>\n    </slot>\n    <img\n      v-else\n      class=\"el-image__inner\"\n      v-bind=\"attrs\"\n      :src=\"src\"\n      :style=\"imageStyle\"\n      :class=\"{\n        'el-image__preview': preview,\n      }\"\n      @click=\"clickHandler\"\n    />\n    <teleport to=\"body\" :disabled=\"!appendToBody\">\n      <template v-if=\"preview\">\n        <image-viewer\n          v-if=\"showViewer\"\n          :z-index=\"zIndex\"\n          :initial-index=\"imageIndex\"\n          :url-list=\"previewSrcList\"\n          :hide-on-click-modal=\"hideOnClickModal\"\n          @close=\"closeViewer\"\n          @switch=\"switchViewer\"\n        >\n          <div v-if=\"$slots.viewer\">\n            <slot name=\"viewer\" />\n          </div>\n        </image-viewer>\n      </template>\n    </teleport>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, computed, ref, onMounted, watch, nextTick } from 'vue'\nimport { isString } from '@vue/shared'\nimport { useEventListener, useThrottleFn } from '@vueuse/core'\nimport { useAttrs, useLocale } from '@element-plus/hooks'\nimport ImageViewer from '@element-plus/components/image-viewer'\nimport isServer from '@element-plus/utils/isServer'\nimport { getScrollContainer, isInContainer } from '@element-plus/utils/dom'\nimport { imageEmits, imageProps } from './image'\n\nimport type { CSSProperties, StyleValue } from 'vue'\n\nconst isHtmlElement = (e: any): e is Element =>\n  e && e.nodeType === Node.ELEMENT_NODE\n\nlet prevOverflow = ''\n\nexport default defineComponent({\n  name: 'ElImage',\n  components: {\n    ImageViewer,\n  },\n  inheritAttrs: false,\n\n  props: imageProps,\n  emits: imageEmits,\n\n  setup(props, { emit, attrs: rawAttrs }) {\n    const { t } = useLocale()\n\n    const attrs = useAttrs()\n    const hasLoadError = ref(false)\n    const loading = ref(true)\n    const imgWidth = ref(0)\n    const imgHeight = ref(0)\n    const showViewer = ref(false)\n    const container = ref<HTMLElement>()\n\n    const _scrollContainer = ref<HTMLElement | Window>()\n    let stopScrollListener: () => void\n    let stopWheelListener: () => void\n\n    const containerStyle = computed(() => rawAttrs.style as StyleValue)\n\n    const imageStyle = computed<CSSProperties>(() => {\n      const { fit } = props\n      if (!isServer && fit) {\n        return { objectFit: fit }\n      }\n      return {}\n    })\n\n    const preview = computed(() => {\n      const { previewSrcList } = props\n      return Array.isArray(previewSrcList) && previewSrcList.length > 0\n    })\n\n    const imageIndex = computed(() => {\n      const { src, previewSrcList, initialIndex } = props\n      let previewIndex = initialIndex\n      const srcIndex = previewSrcList.indexOf(src)\n      if (srcIndex >= 0) {\n        previewIndex = srcIndex\n      }\n      return previewIndex\n    })\n\n    const loadImage = () => {\n      if (isServer) return\n\n      // reset status\n      loading.value = true\n      hasLoadError.value = false\n\n      const img = new Image()\n      img.addEventListener('load', (e) => handleLoad(e, img))\n      img.addEventListener('error', handleError)\n\n      // bind html attrs\n      // so it can behave consistently\n      Object.entries(attrs.value).forEach(([key, value]) => {\n        // avoid onload to be overwritten\n        if (key.toLowerCase() === 'onload') return\n        img.setAttribute(key, value as string)\n      })\n      img.src = props.src\n    }\n\n    function handleLoad(e: Event, img: HTMLImageElement) {\n      imgWidth.value = img.width\n      imgHeight.value = img.height\n      loading.value = false\n      hasLoadError.value = false\n    }\n\n    function handleError(event: Event) {\n      loading.value = false\n      hasLoadError.value = true\n      emit('error', event)\n    }\n\n    function handleLazyLoad() {\n      if (isInContainer(container.value, _scrollContainer.value)) {\n        loadImage()\n        removeLazyLoadListener()\n      }\n    }\n    const lazyLoadHandler = useThrottleFn(handleLazyLoad, 200)\n\n    async function addLazyLoadListener() {\n      if (isServer) return\n\n      await nextTick()\n\n      const { scrollContainer } = props\n      if (isHtmlElement(scrollContainer)) {\n        _scrollContainer.value = scrollContainer\n      } else if (isString(scrollContainer) && scrollContainer !== '') {\n        _scrollContainer.value =\n          document.querySelector<HTMLElement>(scrollContainer) ?? undefined\n      } else if (container.value) {\n        _scrollContainer.value = getScrollContainer(container.value)\n      }\n\n      if (_scrollContainer.value) {\n        stopScrollListener = useEventListener(\n          _scrollContainer,\n          'scroll',\n          lazyLoadHandler\n        )\n        setTimeout(() => handleLazyLoad(), 100)\n      }\n    }\n\n    function removeLazyLoadListener() {\n      if (isServer || !_scrollContainer.value || !lazyLoadHandler) return\n\n      stopScrollListener()\n      _scrollContainer.value = undefined\n    }\n\n    function wheelHandler(e: WheelEvent) {\n      if (!e.ctrlKey) return\n\n      if (e.deltaY < 0) {\n        e.preventDefault()\n        return false\n      } else if (e.deltaY > 0) {\n        e.preventDefault()\n        return false\n      }\n    }\n\n    function clickHandler() {\n      // don't show viewer when preview is false\n      if (!preview.value) return\n\n      stopWheelListener = useEventListener('wheel', wheelHandler, {\n        passive: false,\n      })\n\n      // prevent body scroll\n      prevOverflow = document.body.style.overflow\n      document.body.style.overflow = 'hidden'\n      showViewer.value = true\n    }\n\n    function closeViewer() {\n      stopWheelListener?.()\n      document.body.style.overflow = prevOverflow\n      showViewer.value = false\n      emit('close')\n    }\n\n    function switchViewer(val: number) {\n      emit('switch', val)\n    }\n\n    watch(\n      () => props.src,\n      () => {\n        if (props.lazy) {\n          // reset status\n          loading.value = true\n          hasLoadError.value = false\n          removeLazyLoadListener()\n          addLazyLoadListener()\n        } else {\n          loadImage()\n        }\n      }\n    )\n\n    onMounted(() => {\n      if (props.lazy) {\n        addLazyLoadListener()\n      } else {\n        loadImage()\n      }\n    })\n\n    return {\n      attrs,\n      loading,\n      hasLoadError,\n      showViewer,\n      containerStyle,\n      imageStyle,\n      preview,\n      imageIndex,\n      container,\n\n      clickHandler,\n      closeViewer,\n      switchViewer,\n      t,\n    }\n  },\n})\n</script>\n"],"names":["ImageViewer"],"mappings":"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"}

package/es/components/image/src/image.vue_vue_type_template_id_34467287_lang.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"image.vue_vue_type_template_id_34467287_lang.mjs","sources":["../../../../../../packages/components/image/src/image.vue?vue&type=template&id=34467287&lang.js"],"sourcesContent":["<template>\n  <div\n    ref=\"container\"\n    :class=\"['el-image', $attrs.class]\"\n    :style=\"containerStyle\"\n  >\n    <slot v-if=\"loading\" name=\"placeholder\">\n      <div class=\"el-image__placeholder\"></div>\n    </slot>\n    <slot v-else-if=\"hasLoadError\" name=\"error\">\n      <div class=\"el-image__error\">{{ t('el.image.error') }}</div>\n    </slot>\n    <img\n      v-else\n      class=\"el-image__inner\"\n      v-bind=\"attrs\"\n      :src=\"src\"\n      :style=\"imageStyle\"\n      :class=\"{\n        'el-image__preview': preview,\n      }\"\n      @click=\"clickHandler\"\n    />\n    <teleport to=\"body\" :disabled=\"!appendToBody\">\n      <template v-if=\"preview\">\n        <image-viewer\n          v-if=\"showViewer\"\n          :z-index=\"zIndex\"\n          :initial-index=\"imageIndex\"\n          :url-list=\"previewSrcList\"\n          :hide-on-click-modal=\"hideOnClickModal\"\n          @close=\"closeViewer\"\n          @switch=\"switchViewer\"\n        >\n          <div v-if=\"$slots.viewer\">\n            <slot name=\"viewer\" />\n          </div>\n        </image-viewer>\n      </template>\n    </teleport>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, computed, ref, onMounted, watch, nextTick } from 'vue'\nimport { isString } from '@vue/shared'\nimport { useEventListener, useThrottleFn } from '@vueuse/core'\nimport { useAttrs, useLocaleInject } from '@element-plus/hooks'\nimport ImageViewer from '@element-plus/components/image-viewer'\nimport isServer from '@element-plus/utils/isServer'\nimport { getScrollContainer, isInContainer } from '@element-plus/utils/dom'\nimport { imageEmits, imageProps } from './image'\n\nimport type { CSSProperties, StyleValue } from 'vue'\n\nconst isHtmlElement = (e: any): e is Element =>\n  e && e.nodeType === Node.ELEMENT_NODE\n\nlet prevOverflow = ''\n\nexport default defineComponent({\n  name: 'ElImage',\n  components: {\n    ImageViewer,\n  },\n  inheritAttrs: false,\n\n  props: imageProps,\n  emits: imageEmits,\n\n  setup(props, { emit, attrs: rawAttrs }) {\n    const { t } = useLocaleInject()\n\n    const attrs = useAttrs()\n    const hasLoadError = ref(false)\n    const loading = ref(true)\n    const imgWidth = ref(0)\n    const imgHeight = ref(0)\n    const showViewer = ref(false)\n    const container = ref<HTMLElement>()\n\n    const _scrollContainer = ref<HTMLElement | Window>()\n    let stopScrollListener: () => void\n    let stopWheelListener: () => void\n\n    const containerStyle = computed(() => rawAttrs.style as StyleValue)\n\n    const imageStyle = computed<CSSProperties>(() => {\n      const { fit } = props\n      if (!isServer && fit) {\n        return { objectFit: fit }\n      }\n      return {}\n    })\n\n    const preview = computed(() => {\n      const { previewSrcList } = props\n      return Array.isArray(previewSrcList) && previewSrcList.length > 0\n    })\n\n    const imageIndex = computed(() => {\n      const { src, previewSrcList, initialIndex } = props\n      let previewIndex = initialIndex\n      const srcIndex = previewSrcList.indexOf(src)\n      if (srcIndex >= 0) {\n        previewIndex = srcIndex\n      }\n      return previewIndex\n    })\n\n    const loadImage = () => {\n      if (isServer) return\n\n      // reset status\n      loading.value = true\n      hasLoadError.value = false\n\n      const img = new Image()\n      img.addEventListener('load', (e) => handleLoad(e, img))\n      img.addEventListener('error', handleError)\n\n      // bind html attrs\n      // so it can behave consistently\n      Object.entries(attrs.value).forEach(([key, value]) => {\n        // avoid onload to be overwritten\n        if (key.toLowerCase() === 'onload') return\n        img.setAttribute(key, value as string)\n      })\n      img.src = props.src\n    }\n\n    function handleLoad(e: Event, img: HTMLImageElement) {\n      imgWidth.value = img.width\n      imgHeight.value = img.height\n      loading.value = false\n      hasLoadError.value = false\n    }\n\n    function handleError(event: Event) {\n      loading.value = false\n      hasLoadError.value = true\n      emit('error', event)\n    }\n\n    function handleLazyLoad() {\n      if (isInContainer(container.value, _scrollContainer.value)) {\n        loadImage()\n        removeLazyLoadListener()\n      }\n    }\n    const lazyLoadHandler = useThrottleFn(handleLazyLoad, 200)\n\n    async function addLazyLoadListener() {\n      if (isServer) return\n\n      await nextTick()\n\n      const { scrollContainer } = props\n      if (isHtmlElement(scrollContainer)) {\n        _scrollContainer.value = scrollContainer\n      } else if (isString(scrollContainer) && scrollContainer !== '') {\n        _scrollContainer.value =\n          document.querySelector<HTMLElement>(scrollContainer) ?? undefined\n      } else if (container.value) {\n        _scrollContainer.value = getScrollContainer(container.value)\n      }\n\n      if (_scrollContainer.value) {\n        stopScrollListener = useEventListener(\n          _scrollContainer,\n          'scroll',\n          lazyLoadHandler\n        )\n        setTimeout(() => handleLazyLoad(), 100)\n      }\n    }\n\n    function removeLazyLoadListener() {\n      if (isServer || !_scrollContainer.value || !lazyLoadHandler) return\n\n      stopScrollListener()\n      _scrollContainer.value = undefined\n    }\n\n    function wheelHandler(e: WheelEvent) {\n      if (!e.ctrlKey) return\n\n      if (e.deltaY < 0) {\n        e.preventDefault()\n        return false\n      } else if (e.deltaY > 0) {\n        e.preventDefault()\n        return false\n      }\n    }\n\n    function clickHandler() {\n      // don't show viewer when preview is false\n      if (!preview.value) return\n\n      stopWheelListener = useEventListener('wheel', wheelHandler, {\n        passive: false,\n      })\n\n      // prevent body scroll\n      prevOverflow = document.body.style.overflow\n      document.body.style.overflow = 'hidden'\n      showViewer.value = true\n    }\n\n    function closeViewer() {\n      stopWheelListener?.()\n      document.body.style.overflow = prevOverflow\n      showViewer.value = false\n      emit('close')\n    }\n\n    function switchViewer(val: number) {\n      emit('switch', val)\n    }\n\n    watch(\n      () => props.src,\n      () => {\n        if (props.lazy) {\n          // reset status\n          loading.value = true\n          hasLoadError.value = false\n          removeLazyLoadListener()\n          addLazyLoadListener()\n        } else {\n          loadImage()\n        }\n      }\n    )\n\n    onMounted(() => {\n      if (props.lazy) {\n        addLazyLoadListener()\n      } else {\n        loadImage()\n      }\n    })\n\n    return {\n      attrs,\n      loading,\n      hasLoadError,\n      showViewer,\n      containerStyle,\n      imageStyle,\n      preview,\n      imageIndex,\n      container,\n\n      clickHandler,\n      closeViewer,\n      switchViewer,\n      t,\n    }\n  },\n})\n</script>\n"],"names":["_createElementBlock","_renderSlot","_createElementVNode","_mergeProps","_createBlock"],"mappings":";;+DAOW,OAAM;qBAGN,OAAM;;;;;sBATfA;IACE,KAAI;AAAA,IACH,mCAAoB,YAAO;AAAA,IAC3B,sBAAO;;IAEI,eAAZC,mDAAA;MACE;AAAA,SAEe,oBAAjBA,6CAAA;MACEC,0BAAA,4BAAgC;uBAElCF,0BAAAG;;MAEE,OAAM;AAAA,OACE;MACP,KAAK;MACL,OAAO;MACP;;;MAGA,gDAAO;;kBAEVC;MAAU,IAAG;AAAA,MAAQ,WAAW;;MACd,6BAAhBJ;QAEU,gCADRI;;UAEG,WAAS;UACT,iBAAe;UACf,YAAU;UACV,uBAAqB;UACrB,SAAO;UACP,UAAQ;;2BAET;YAAW,YAAO,uBAAlBJ;cACEC;;;;;;;;;;;;"}
+{"version":3,"file":"image.vue_vue_type_template_id_34467287_lang.mjs","sources":["../../../../../../packages/components/image/src/image.vue?vue&type=template&id=34467287&lang.js"],"sourcesContent":["<template>\n  <div\n    ref=\"container\"\n    :class=\"['el-image', $attrs.class]\"\n    :style=\"containerStyle\"\n  >\n    <slot v-if=\"loading\" name=\"placeholder\">\n      <div class=\"el-image__placeholder\"></div>\n    </slot>\n    <slot v-else-if=\"hasLoadError\" name=\"error\">\n      <div class=\"el-image__error\">{{ t('el.image.error') }}</div>\n    </slot>\n    <img\n      v-else\n      class=\"el-image__inner\"\n      v-bind=\"attrs\"\n      :src=\"src\"\n      :style=\"imageStyle\"\n      :class=\"{\n        'el-image__preview': preview,\n      }\"\n      @click=\"clickHandler\"\n    />\n    <teleport to=\"body\" :disabled=\"!appendToBody\">\n      <template v-if=\"preview\">\n        <image-viewer\n          v-if=\"showViewer\"\n          :z-index=\"zIndex\"\n          :initial-index=\"imageIndex\"\n          :url-list=\"previewSrcList\"\n          :hide-on-click-modal=\"hideOnClickModal\"\n          @close=\"closeViewer\"\n          @switch=\"switchViewer\"\n        >\n          <div v-if=\"$slots.viewer\">\n            <slot name=\"viewer\" />\n          </div>\n        </image-viewer>\n      </template>\n    </teleport>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, computed, ref, onMounted, watch, nextTick } from 'vue'\nimport { isString } from '@vue/shared'\nimport { useEventListener, useThrottleFn } from '@vueuse/core'\nimport { useAttrs, useLocale } from '@element-plus/hooks'\nimport ImageViewer from '@element-plus/components/image-viewer'\nimport isServer from '@element-plus/utils/isServer'\nimport { getScrollContainer, isInContainer } from '@element-plus/utils/dom'\nimport { imageEmits, imageProps } from './image'\n\nimport type { CSSProperties, StyleValue } from 'vue'\n\nconst isHtmlElement = (e: any): e is Element =>\n  e && e.nodeType === Node.ELEMENT_NODE\n\nlet prevOverflow = ''\n\nexport default defineComponent({\n  name: 'ElImage',\n  components: {\n    ImageViewer,\n  },\n  inheritAttrs: false,\n\n  props: imageProps,\n  emits: imageEmits,\n\n  setup(props, { emit, attrs: rawAttrs }) {\n    const { t } = useLocale()\n\n    const attrs = useAttrs()\n    const hasLoadError = ref(false)\n    const loading = ref(true)\n    const imgWidth = ref(0)\n    const imgHeight = ref(0)\n    const showViewer = ref(false)\n    const container = ref<HTMLElement>()\n\n    const _scrollContainer = ref<HTMLElement | Window>()\n    let stopScrollListener: () => void\n    let stopWheelListener: () => void\n\n    const containerStyle = computed(() => rawAttrs.style as StyleValue)\n\n    const imageStyle = computed<CSSProperties>(() => {\n      const { fit } = props\n      if (!isServer && fit) {\n        return { objectFit: fit }\n      }\n      return {}\n    })\n\n    const preview = computed(() => {\n      const { previewSrcList } = props\n      return Array.isArray(previewSrcList) && previewSrcList.length > 0\n    })\n\n    const imageIndex = computed(() => {\n      const { src, previewSrcList, initialIndex } = props\n      let previewIndex = initialIndex\n      const srcIndex = previewSrcList.indexOf(src)\n      if (srcIndex >= 0) {\n        previewIndex = srcIndex\n      }\n      return previewIndex\n    })\n\n    const loadImage = () => {\n      if (isServer) return\n\n      // reset status\n      loading.value = true\n      hasLoadError.value = false\n\n      const img = new Image()\n      img.addEventListener('load', (e) => handleLoad(e, img))\n      img.addEventListener('error', handleError)\n\n      // bind html attrs\n      // so it can behave consistently\n      Object.entries(attrs.value).forEach(([key, value]) => {\n        // avoid onload to be overwritten\n        if (key.toLowerCase() === 'onload') return\n        img.setAttribute(key, value as string)\n      })\n      img.src = props.src\n    }\n\n    function handleLoad(e: Event, img: HTMLImageElement) {\n      imgWidth.value = img.width\n      imgHeight.value = img.height\n      loading.value = false\n      hasLoadError.value = false\n    }\n\n    function handleError(event: Event) {\n      loading.value = false\n      hasLoadError.value = true\n      emit('error', event)\n    }\n\n    function handleLazyLoad() {\n      if (isInContainer(container.value, _scrollContainer.value)) {\n        loadImage()\n        removeLazyLoadListener()\n      }\n    }\n    const lazyLoadHandler = useThrottleFn(handleLazyLoad, 200)\n\n    async function addLazyLoadListener() {\n      if (isServer) return\n\n      await nextTick()\n\n      const { scrollContainer } = props\n      if (isHtmlElement(scrollContainer)) {\n        _scrollContainer.value = scrollContainer\n      } else if (isString(scrollContainer) && scrollContainer !== '') {\n        _scrollContainer.value =\n          document.querySelector<HTMLElement>(scrollContainer) ?? undefined\n      } else if (container.value) {\n        _scrollContainer.value = getScrollContainer(container.value)\n      }\n\n      if (_scrollContainer.value) {\n        stopScrollListener = useEventListener(\n          _scrollContainer,\n          'scroll',\n          lazyLoadHandler\n        )\n        setTimeout(() => handleLazyLoad(), 100)\n      }\n    }\n\n    function removeLazyLoadListener() {\n      if (isServer || !_scrollContainer.value || !lazyLoadHandler) return\n\n      stopScrollListener()\n      _scrollContainer.value = undefined\n    }\n\n    function wheelHandler(e: WheelEvent) {\n      if (!e.ctrlKey) return\n\n      if (e.deltaY < 0) {\n        e.preventDefault()\n        return false\n      } else if (e.deltaY > 0) {\n        e.preventDefault()\n        return false\n      }\n    }\n\n    function clickHandler() {\n      // don't show viewer when preview is false\n      if (!preview.value) return\n\n      stopWheelListener = useEventListener('wheel', wheelHandler, {\n        passive: false,\n      })\n\n      // prevent body scroll\n      prevOverflow = document.body.style.overflow\n      document.body.style.overflow = 'hidden'\n      showViewer.value = true\n    }\n\n    function closeViewer() {\n      stopWheelListener?.()\n      document.body.style.overflow = prevOverflow\n      showViewer.value = false\n      emit('close')\n    }\n\n    function switchViewer(val: number) {\n      emit('switch', val)\n    }\n\n    watch(\n      () => props.src,\n      () => {\n        if (props.lazy) {\n          // reset status\n          loading.value = true\n          hasLoadError.value = false\n          removeLazyLoadListener()\n          addLazyLoadListener()\n        } else {\n          loadImage()\n        }\n      }\n    )\n\n    onMounted(() => {\n      if (props.lazy) {\n        addLazyLoadListener()\n      } else {\n        loadImage()\n      }\n    })\n\n    return {\n      attrs,\n      loading,\n      hasLoadError,\n      showViewer,\n      containerStyle,\n      imageStyle,\n      preview,\n      imageIndex,\n      container,\n\n      clickHandler,\n      closeViewer,\n      switchViewer,\n      t,\n    }\n  },\n})\n</script>\n"],"names":["_createElementBlock","_renderSlot","_createElementVNode","_mergeProps","_createBlock"],"mappings":";;+DAOW,OAAM;qBAGN,OAAM;;;;;sBATfA;IACE,KAAI;AAAA,IACH,mCAAoB,YAAO;AAAA,IAC3B,sBAAO;;IAEI,eAAZC,mDAAA;MACE;AAAA,SAEe,oBAAjBA,6CAAA;MACEC,0BAAA,4BAAgC;uBAElCF,0BAAAG;;MAEE,OAAM;AAAA,OACE;MACP,KAAK;MACL,OAAO;MACP;;;MAGA,gDAAO;;kBAEVC;MAAU,IAAG;AAAA,MAAQ,WAAW;;MACd,6BAAhBJ;QAEU,gCADRI;;UAEG,WAAS;UACT,iBAAe;UACf,YAAU;UACV,uBAAqB;UACrB,SAAO;UACP,UAAQ;;2BAET;YAAW,YAAO,uBAAlBJ;cACEC;;;;;;;;;;;;"}

package/es/components/image-viewer/src/image-viewer.vue_vue_type_script_lang.mjs

@@ -6,7 +6,7 @@ import { EVENT_CODE } from '../../../utils/aria.mjs';
 import { isFirefox, rafThrottle } from '../../../utils/util.mjs';
 import { FullScreen, ScaleToOriginal, Close, ArrowLeft, ArrowRight, ZoomOut, ZoomIn, RefreshLeft, RefreshRight } from '@element-plus/icons';
 import { imageViewerProps, imageViewerEmits } from './image-viewer.mjs';
-import { useLocaleInject } from '../../../hooks/use-locale/index.mjs';
+import { useLocale } from '../../../hooks/use-locale/index.mjs';
 
 const Mode = {
   CONTAIN: {
@@ -34,7 +34,7 @@ var script = defineComponent({
   props: imageViewerProps,
   emits: imageViewerEmits,
   setup(props, { emit }) {
-    const { t } = useLocaleInject();
+    const { t } = useLocale();
     const wrapper = ref();
     const img = ref();
     const scopeEventListener = effectScope();