element-plus 1.2.0-beta.1 → 1.2.0-beta.2

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 { 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    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=\"\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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"}

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

@@ -1,5 +1,6 @@
 import { defineComponent, ref, computed, inject, watch } from 'vue';
 import dayjs from 'dayjs';
+import { ElIcon } from '../../../icon/index.mjs';
 import '../../../../hooks/index.mjs';
 import { DArrowLeft, DArrowRight } from '@element-plus/icons';
 import './basic-month-table.mjs';
@@ -7,7 +8,7 @@ import script$1 from './basic-month-table.vue_vue&type=script&lang.mjs';
 import { useLocaleInject } from '../../../../hooks/use-locale/index.mjs';
 
 var script = defineComponent({
-  components: { MonthTable: script$1, DArrowLeft, DArrowRight },
+  components: { MonthTable: script$1, ElIcon, DArrowLeft, DArrowRight },
   props: {
     unlinkPanels: Boolean,
     parsedValue: {

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 { 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, 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=\"\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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"}

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 { 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, 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=\"\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;;;;;;;;;;"}

package/es/components/dropdown/src/dropdown-item.vue_vue&type=script&lang.mjs

@@ -1,9 +1,11 @@
 import { defineComponent, getCurrentInstance } from 'vue';
+import { ElIcon } from '../../icon/index.mjs';
 import { buildProps, definePropType } from '../../../utils/props.mjs';
 import { useDropdown } from './useDropdown.mjs';
 
 var script = defineComponent({
   name: "ElDropdownItem",
+  components: { ElIcon },
   props: buildProps({
     command: {
       type: [Object, String, Number],

package/es/components/dropdown/src/dropdown-item.vue_vue&type=script&lang.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-item.vue_vue&type=script&lang.mjs","sources":["../../../../../../packages/components/dropdown/src/dropdown-item.vue"],"sourcesContent":["<template>\n  <li\n    class=\"el-dropdown-menu__item\"\n    :class=\"{\n      'is-disabled': disabled,\n      'el-dropdown-menu__item--divided': divided,\n    }\"\n    :aria-disabled=\"disabled\"\n    :tabindex=\"disabled ? null : -1\"\n    @click=\"handleClick\"\n  >\n    <el-icon v-if=\"icon\"><component :is=\"icon\" /></el-icon>\n    <slot></slot>\n  </li>\n</template>\n<script lang=\"ts\">\nimport { defineComponent, getCurrentInstance } from 'vue'\nimport { buildProps, definePropType } from '@element-plus/utils/props'\nimport { useDropdown } from './useDropdown'\nimport type { Component } from 'vue'\n\nexport default defineComponent({\n  name: 'ElDropdownItem',\n  props: buildProps({\n    command: {\n      type: [Object, String, Number],\n      default: () => ({}),\n    },\n    disabled: Boolean,\n    divided: Boolean,\n    icon: {\n      type: definePropType<string | Component>([String, Object]),\n    },\n  } as const),\n  setup(props) {\n    const { elDropdown } = useDropdown()\n    const _instance = getCurrentInstance()\n\n    function handleClick(e: UIEvent) {\n      // if disabled don't collapse the drop-down list\n      if (props.disabled) {\n        e.stopImmediatePropagation()\n        return\n      }\n      if (elDropdown.hideOnClick.value) {\n        elDropdown.handleClick?.()\n      }\n      elDropdown.commandHandler?.(props.command, _instance, e)\n    }\n\n    return {\n      handleClick,\n    }\n  },\n})\n</script>\n"],"names":[],"mappings":";;;;AAqBA,aAAe,gBAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,OAAO,WAAW;AAAA,IAChB,SAAS;AAAA,MACP,MAAM,CAAC,QAAQ,QAAQ;AAAA,MACvB,SAAS;AAAO;AAAA,IAElB,UAAU;AAAA,IACV,SAAS;AAAA,IACT,MAAM;AAAA,MACJ,MAAM,eAAmC,CAAC,QAAQ;AAAA;AAAA;AAAA,EAGtD,MAAM,OAAO;AACX,UAAM,EAAE,eAAe;AACvB,UAAM,YAAY;AAElB,yBAAqB,GAAY;;AAE/B,UAAI,MAAM,UAAU;AAClB,UAAE;AACF;AAAA;AAEF,UAAI,WAAW,YAAY,OAAO;AAChC,yBAAW,gBAAX;AAAA;AAEF,uBAAW,mBAAX,oCAA4B,MAAM,SAAS,WAAW;AAAA;AAGxD,WAAO;AAAA,MACL;AAAA;AAAA;AAAA;;;;"}
+{"version":3,"file":"dropdown-item.vue_vue&type=script&lang.mjs","sources":["../../../../../../packages/components/dropdown/src/dropdown-item.vue"],"sourcesContent":["<template>\n  <li\n    class=\"el-dropdown-menu__item\"\n    :class=\"{\n      'is-disabled': disabled,\n      'el-dropdown-menu__item--divided': divided,\n    }\"\n    :aria-disabled=\"disabled\"\n    :tabindex=\"disabled ? null : -1\"\n    @click=\"handleClick\"\n  >\n    <el-icon v-if=\"icon\"><component :is=\"icon\" /></el-icon>\n    <slot></slot>\n  </li>\n</template>\n<script lang=\"ts\">\nimport { defineComponent, getCurrentInstance } from 'vue'\nimport ElIcon from '@element-plus/components/icon'\nimport { buildProps, definePropType } from '@element-plus/utils/props'\nimport { useDropdown } from './useDropdown'\nimport type { Component } from 'vue'\n\nexport default defineComponent({\n  name: 'ElDropdownItem',\n  components: { ElIcon },\n  props: buildProps({\n    command: {\n      type: [Object, String, Number],\n      default: () => ({}),\n    },\n    disabled: Boolean,\n    divided: Boolean,\n    icon: {\n      type: definePropType<string | Component>([String, Object]),\n    },\n  } as const),\n  setup(props) {\n    const { elDropdown } = useDropdown()\n    const _instance = getCurrentInstance()\n\n    function handleClick(e: UIEvent) {\n      // if disabled don't collapse the drop-down list\n      if (props.disabled) {\n        e.stopImmediatePropagation()\n        return\n      }\n      if (elDropdown.hideOnClick.value) {\n        elDropdown.handleClick?.()\n      }\n      elDropdown.commandHandler?.(props.command, _instance, e)\n    }\n\n    return {\n      handleClick,\n    }\n  },\n})\n</script>\n"],"names":[],"mappings":";;;;;AAsBA,aAAe,gBAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY,EAAE;AAAA,EACd,OAAO,WAAW;AAAA,IAChB,SAAS;AAAA,MACP,MAAM,CAAC,QAAQ,QAAQ;AAAA,MACvB,SAAS;AAAO;AAAA,IAElB,UAAU;AAAA,IACV,SAAS;AAAA,IACT,MAAM;AAAA,MACJ,MAAM,eAAmC,CAAC,QAAQ;AAAA;AAAA;AAAA,EAGtD,MAAM,OAAO;AACX,UAAM,EAAE,eAAe;AACvB,UAAM,YAAY;AAElB,yBAAqB,GAAY;;AAE/B,UAAI,MAAM,UAAU;AAClB,UAAE;AACF;AAAA;AAEF,UAAI,WAAW,YAAY,OAAO;AAChC,yBAAW,gBAAX;AAAA;AAEF,uBAAW,mBAAX,oCAA4B,MAAM,SAAS,WAAW;AAAA;AAGxD,WAAO;AAAA,MACL;AAAA;AAAA;AAAA;;;;"}

package/es/components/dropdown/src/dropdown-item.vue_vue&type=template&id=396ed16b&lang.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-item.vue_vue&type=template&id=396ed16b&lang.mjs","sources":["../../../../../../packages/components/dropdown/src/dropdown-item.vue?vue&type=template&id=396ed16b&lang.js"],"sourcesContent":["<template>\n  <li\n    class=\"el-dropdown-menu__item\"\n    :class=\"{\n      'is-disabled': disabled,\n      'el-dropdown-menu__item--divided': divided,\n    }\"\n    :aria-disabled=\"disabled\"\n    :tabindex=\"disabled ? null : -1\"\n    @click=\"handleClick\"\n  >\n    <el-icon v-if=\"icon\"><component :is=\"icon\" /></el-icon>\n    <slot></slot>\n  </li>\n</template>\n<script lang=\"ts\">\nimport { defineComponent, getCurrentInstance } from 'vue'\nimport { buildProps, definePropType } from '@element-plus/utils/props'\nimport { useDropdown } from './useDropdown'\nimport type { Component } from 'vue'\n\nexport default defineComponent({\n  name: 'ElDropdownItem',\n  props: buildProps({\n    command: {\n      type: [Object, String, Number],\n      default: () => ({}),\n    },\n    disabled: Boolean,\n    divided: Boolean,\n    icon: {\n      type: definePropType<string | Component>([String, Object]),\n    },\n  } as const),\n  setup(props) {\n    const { elDropdown } = useDropdown()\n    const _instance = getCurrentInstance()\n\n    function handleClick(e: UIEvent) {\n      // if disabled don't collapse the drop-down list\n      if (props.disabled) {\n        e.stopImmediatePropagation()\n        return\n      }\n      if (elDropdown.hideOnClick.value) {\n        elDropdown.handleClick?.()\n      }\n      elDropdown.commandHandler?.(props.command, _instance, e)\n    }\n\n    return {\n      handleClick,\n    }\n  },\n})\n</script>\n"],"names":["_createElementBlock","_createBlock","_resolveDynamicComponent","_renderSlot"],"mappings":";;;;;sBACEA;IACE,uBAAM;;;;IAKL,iBAAe;IACf,UAAU;IACV,gDAAO;;IAEO,0BAAfC;uBAAqB;sBAAAA,YAAwBC,wBAAR;;;;IACrCC;;;;;;"}
+{"version":3,"file":"dropdown-item.vue_vue&type=template&id=396ed16b&lang.mjs","sources":["../../../../../../packages/components/dropdown/src/dropdown-item.vue?vue&type=template&id=396ed16b&lang.js"],"sourcesContent":["<template>\n  <li\n    class=\"el-dropdown-menu__item\"\n    :class=\"{\n      'is-disabled': disabled,\n      'el-dropdown-menu__item--divided': divided,\n    }\"\n    :aria-disabled=\"disabled\"\n    :tabindex=\"disabled ? null : -1\"\n    @click=\"handleClick\"\n  >\n    <el-icon v-if=\"icon\"><component :is=\"icon\" /></el-icon>\n    <slot></slot>\n  </li>\n</template>\n<script lang=\"ts\">\nimport { defineComponent, getCurrentInstance } from 'vue'\nimport ElIcon from '@element-plus/components/icon'\nimport { buildProps, definePropType } from '@element-plus/utils/props'\nimport { useDropdown } from './useDropdown'\nimport type { Component } from 'vue'\n\nexport default defineComponent({\n  name: 'ElDropdownItem',\n  components: { ElIcon },\n  props: buildProps({\n    command: {\n      type: [Object, String, Number],\n      default: () => ({}),\n    },\n    disabled: Boolean,\n    divided: Boolean,\n    icon: {\n      type: definePropType<string | Component>([String, Object]),\n    },\n  } as const),\n  setup(props) {\n    const { elDropdown } = useDropdown()\n    const _instance = getCurrentInstance()\n\n    function handleClick(e: UIEvent) {\n      // if disabled don't collapse the drop-down list\n      if (props.disabled) {\n        e.stopImmediatePropagation()\n        return\n      }\n      if (elDropdown.hideOnClick.value) {\n        elDropdown.handleClick?.()\n      }\n      elDropdown.commandHandler?.(props.command, _instance, e)\n    }\n\n    return {\n      handleClick,\n    }\n  },\n})\n</script>\n"],"names":["_createElementBlock","_createBlock","_resolveDynamicComponent","_renderSlot"],"mappings":";;;;;sBACEA;IACE,uBAAM;;;;IAKL,iBAAe;IACf,UAAU;IACV,gDAAO;;IAEO,0BAAfC;uBAAqB;sBAAAA,YAAwBC,wBAAR;;;;IACrCC;;;;;;"}

package/es/components/dropdown/src/dropdown.vue_vue&type=script&lang.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown.vue_vue&type=script&lang.mjs","sources":["../../../../../../packages/components/dropdown/src/dropdown.vue"],"sourcesContent":["<template>\n  <el-popper\n    ref=\"triggerVnode\"\n    v-model:visible=\"visible\"\n    :placement=\"placement\"\n    :fallback-placements=\"['bottom', 'top', 'right', 'left']\"\n    :effect=\"effect\"\n    pure\n    :manual-mode=\"true\"\n    :trigger=\"[trigger]\"\n    popper-class=\"el-dropdown__popper\"\n    append-to-body\n    transition=\"el-zoom-in-top\"\n    :stop-popper-mouse-event=\"false\"\n    :gpu-acceleration=\"false\"\n  >\n    <template #default>\n      <el-scrollbar\n        ref=\"scrollbar\"\n        tag=\"ul\"\n        :wrap-style=\"wrapStyle\"\n        view-class=\"el-dropdown__list\"\n      >\n        <slot name=\"dropdown\"></slot>\n      </el-scrollbar>\n    </template>\n    <template #trigger>\n      <div\n        :class=\"[\n          'el-dropdown',\n          dropdownSize ? 'el-dropdown--' + dropdownSize : '',\n        ]\"\n      >\n        <slot v-if=\"!splitButton\" name=\"default\"></slot>\n        <template v-else>\n          <el-button-group>\n            <el-button\n              :size=\"dropdownSize\"\n              :type=\"type\"\n              @click=\"handlerMainButtonClick\"\n            >\n              <slot name=\"default\"></slot>\n            </el-button>\n            <el-button\n              :size=\"dropdownSize\"\n              :type=\"type\"\n              class=\"el-dropdown__caret-button\"\n            >\n              <el-icon class=\"el-dropdown__icon\"><arrow-down /></el-icon>\n            </el-button>\n          </el-button-group>\n        </template>\n      </div>\n    </template>\n  </el-popper>\n</template>\n<script lang=\"ts\">\nimport {\n  defineComponent,\n  provide,\n  getCurrentInstance,\n  ref,\n  computed,\n  watch,\n  onMounted,\n} from 'vue'\nimport ElButton from '@element-plus/components/button'\nimport ElPopper, { Effect } from '@element-plus/components/popper'\nimport ElScrollbar from '@element-plus/components/scrollbar'\nimport ElIcon from '@element-plus/components/icon'\nimport { on, addClass, removeClass } from '@element-plus/utils/dom'\nimport { addUnit } from '@element-plus/utils/util'\nimport { ArrowDown } from '@element-plus/icons'\nimport { useDropdown } from './useDropdown'\n\nimport type { Placement } from '@element-plus/components/popper'\nimport type { PropType, ComponentPublicInstance } from 'vue'\nimport type { TriggerType } from '@element-plus/hooks/use-popper/use-target-events'\nimport type { ButtonType } from '@element-plus/components/button/src/types'\n\ntype Nullable<T> = null | T\nconst { ButtonGroup: ElButtonGroup } = ElButton\n\nexport default defineComponent({\n  name: 'ElDropdown',\n  components: {\n    ElButton,\n    ElButtonGroup,\n    ElScrollbar,\n    ElPopper,\n    ElIcon,\n    ArrowDown,\n  },\n  props: {\n    trigger: {\n      type: String as PropType<TriggerType | 'contextmenu'>,\n      default: 'hover',\n    },\n    type: String as PropType<ButtonType>,\n    size: {\n      type: String,\n      default: '',\n    },\n    splitButton: Boolean,\n    hideOnClick: {\n      type: Boolean,\n      default: true,\n    },\n    placement: {\n      type: String as PropType<Placement>,\n      default: 'bottom',\n    },\n    showTimeout: {\n      type: Number,\n      default: 150,\n    },\n    hideTimeout: {\n      type: Number,\n      default: 150,\n    },\n    tabindex: {\n      type: [Number, String],\n      default: 0,\n    },\n    effect: {\n      type: String as PropType<Effect>,\n      default: Effect.LIGHT,\n    },\n    maxHeight: {\n      type: [Number, String],\n      default: '',\n    },\n  },\n  emits: ['visible-change', 'click', 'command'],\n  setup(props, { emit }) {\n    const _instance = getCurrentInstance()\n    const { ELEMENT } = useDropdown()\n\n    const timeout = ref<Nullable<number>>(null)\n\n    const visible = ref(false)\n    const scrollbar = ref(null)\n    const wrapStyle = computed(() => `max-height: ${addUnit(props.maxHeight)}`)\n\n    watch(\n      () => visible.value,\n      (val) => {\n        if (val) triggerElmFocus()\n        if (!val) triggerElmBlur()\n        emit('visible-change', val)\n      }\n    )\n\n    const focusing = ref(false)\n    watch(\n      () => focusing.value,\n      (val) => {\n        const selfDefine = triggerElm.value\n        if (selfDefine) {\n          if (val) {\n            addClass(selfDefine, 'focusing')\n          } else {\n            removeClass(selfDefine, 'focusing')\n          }\n        }\n      }\n    )\n\n    const triggerVnode = ref<Nullable<ComponentPublicInstance>>(null)\n    const triggerElm = computed<Nullable<HTMLButtonElement>>(() => {\n      const _: any = (triggerVnode.value?.$refs.triggerRef as HTMLElement)\n        ?.children[0]\n      return !props.splitButton ? _ : _?.children?.[1]\n    })\n\n    function handleClick() {\n      if (triggerElm.value?.disabled) return\n      if (visible.value) {\n        hide()\n      } else {\n        show()\n      }\n    }\n\n    function show() {\n      if (triggerElm.value?.disabled) return\n      timeout.value && clearTimeout(timeout.value)\n      timeout.value = window.setTimeout(\n        () => {\n          visible.value = true\n        },\n        ['click', 'contextmenu'].includes(props.trigger) ? 0 : props.showTimeout\n      )\n    }\n\n    function hide() {\n      if (triggerElm.value?.disabled) return\n      removeTabindex()\n      if (props.tabindex >= 0) {\n        resetTabindex(triggerElm.value)\n      }\n      clearTimeout(timeout.value)\n      timeout.value = window.setTimeout(\n        () => {\n          visible.value = false\n        },\n        ['click', 'contextmenu'].includes(props.trigger) ? 0 : props.hideTimeout\n      )\n    }\n\n    function removeTabindex() {\n      triggerElm.value?.setAttribute('tabindex', '-1')\n    }\n\n    function resetTabindex(ele) {\n      removeTabindex()\n      ele?.setAttribute('tabindex', '0')\n    }\n\n    function triggerElmFocus() {\n      triggerElm.value?.focus?.()\n    }\n\n    function triggerElmBlur() {\n      triggerElm.value?.blur?.()\n    }\n\n    const dropdownSize = computed(() => props.size || ELEMENT.size)\n\n    function commandHandler(...args) {\n      emit('command', ...args)\n    }\n\n    provide('elDropdown', {\n      instance: _instance,\n      dropdownSize,\n      visible,\n      handleClick,\n      commandHandler,\n      show,\n      hide,\n      trigger: computed(() => props.trigger),\n      hideOnClick: computed(() => props.hideOnClick),\n      triggerElm,\n    })\n\n    onMounted(() => {\n      if (!props.splitButton) {\n        on(triggerElm.value, 'focus', () => {\n          focusing.value = true\n        })\n        on(triggerElm.value, 'blur', () => {\n          focusing.value = false\n        })\n        on(triggerElm.value, 'click', () => {\n          focusing.value = false\n        })\n      }\n      if (props.trigger === 'hover') {\n        on(triggerElm.value, 'mouseenter', show)\n        on(triggerElm.value, 'mouseleave', hide)\n      } else if (props.trigger === 'click') {\n        on(triggerElm.value, 'click', handleClick)\n      } else if (props.trigger === 'contextmenu') {\n        on(triggerElm.value, 'contextmenu', (e) => {\n          e.preventDefault()\n          handleClick()\n        })\n      }\n\n      Object.assign(_instance, {\n        handleClick,\n        hide,\n        resetTabindex,\n      })\n    })\n\n    const handlerMainButtonClick = (event) => {\n      emit('click', event)\n      hide()\n    }\n\n    return {\n      visible,\n      scrollbar,\n      wrapStyle,\n      dropdownSize,\n      handlerMainButtonClick,\n      triggerVnode,\n    }\n  },\n})\n</script>\n"],"names":["ElScrollbar","ElPopper"],"mappings":"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"}
+{"version":3,"file":"dropdown.vue_vue&type=script&lang.mjs","sources":["../../../../../../packages/components/dropdown/src/dropdown.vue"],"sourcesContent":["<template>\n  <div class=\"el-dropdown\">\n    <el-popper\n      ref=\"triggerVnode\"\n      v-model:visible=\"visible\"\n      :placement=\"placement\"\n      :fallback-placements=\"['bottom', 'top', 'right', 'left']\"\n      :effect=\"effect\"\n      pure\n      :manual-mode=\"true\"\n      :trigger=\"[trigger]\"\n      popper-class=\"el-dropdown__popper\"\n      append-to-body\n      transition=\"el-zoom-in-top\"\n      :stop-popper-mouse-event=\"false\"\n      :gpu-acceleration=\"false\"\n    >\n      <template #default>\n        <el-scrollbar\n          ref=\"scrollbar\"\n          tag=\"ul\"\n          :wrap-style=\"wrapStyle\"\n          view-class=\"el-dropdown__list\"\n        >\n          <slot name=\"dropdown\"></slot>\n        </el-scrollbar>\n      </template>\n      <template #trigger>\n        <div :class=\"[dropdownSize ? 'el-dropdown--' + dropdownSize : '']\">\n          <slot v-if=\"!splitButton\" name=\"default\"></slot>\n          <template v-else>\n            <el-button-group>\n              <el-button\n                :size=\"dropdownSize\"\n                :type=\"type\"\n                @click=\"handlerMainButtonClick\"\n              >\n                <slot name=\"default\"></slot>\n              </el-button>\n              <el-button\n                :size=\"dropdownSize\"\n                :type=\"type\"\n                class=\"el-dropdown__caret-button\"\n              >\n                <el-icon class=\"el-dropdown__icon\"><arrow-down /></el-icon>\n              </el-button>\n            </el-button-group>\n          </template>\n        </div>\n      </template>\n    </el-popper>\n  </div>\n</template>\n<script lang=\"ts\">\nimport {\n  defineComponent,\n  provide,\n  getCurrentInstance,\n  ref,\n  computed,\n  watch,\n  onMounted,\n} from 'vue'\nimport ElButton from '@element-plus/components/button'\nimport ElPopper, { Effect } from '@element-plus/components/popper'\nimport ElScrollbar from '@element-plus/components/scrollbar'\nimport ElIcon from '@element-plus/components/icon'\nimport { on, addClass, removeClass } from '@element-plus/utils/dom'\nimport { addUnit } from '@element-plus/utils/util'\nimport { ArrowDown } from '@element-plus/icons'\nimport { useDropdown } from './useDropdown'\n\nimport type { Placement } from '@element-plus/components/popper'\nimport type { PropType, ComponentPublicInstance } from 'vue'\nimport type { TriggerType } from '@element-plus/hooks/use-popper/use-target-events'\nimport type { ButtonType } from '@element-plus/components/button/src/types'\n\ntype Nullable<T> = null | T\nconst { ButtonGroup: ElButtonGroup } = ElButton\n\nexport default defineComponent({\n  name: 'ElDropdown',\n  components: {\n    ElButton,\n    ElButtonGroup,\n    ElScrollbar,\n    ElPopper,\n    ElIcon,\n    ArrowDown,\n  },\n  props: {\n    trigger: {\n      type: String as PropType<TriggerType | 'contextmenu'>,\n      default: 'hover',\n    },\n    type: String as PropType<ButtonType>,\n    size: {\n      type: String,\n      default: '',\n    },\n    splitButton: Boolean,\n    hideOnClick: {\n      type: Boolean,\n      default: true,\n    },\n    placement: {\n      type: String as PropType<Placement>,\n      default: 'bottom',\n    },\n    showTimeout: {\n      type: Number,\n      default: 150,\n    },\n    hideTimeout: {\n      type: Number,\n      default: 150,\n    },\n    tabindex: {\n      type: [Number, String],\n      default: 0,\n    },\n    effect: {\n      type: String as PropType<Effect>,\n      default: Effect.LIGHT,\n    },\n    maxHeight: {\n      type: [Number, String],\n      default: '',\n    },\n  },\n  emits: ['visible-change', 'click', 'command'],\n  setup(props, { emit }) {\n    const _instance = getCurrentInstance()\n    const { ELEMENT } = useDropdown()\n\n    const timeout = ref<Nullable<number>>(null)\n\n    const visible = ref(false)\n    const scrollbar = ref(null)\n    const wrapStyle = computed(() => `max-height: ${addUnit(props.maxHeight)}`)\n\n    watch(\n      () => visible.value,\n      (val) => {\n        if (val) triggerElmFocus()\n        if (!val) triggerElmBlur()\n        emit('visible-change', val)\n      }\n    )\n\n    const focusing = ref(false)\n    watch(\n      () => focusing.value,\n      (val) => {\n        const selfDefine = triggerElm.value\n        if (selfDefine) {\n          if (val) {\n            addClass(selfDefine, 'focusing')\n          } else {\n            removeClass(selfDefine, 'focusing')\n          }\n        }\n      }\n    )\n\n    const triggerVnode = ref<Nullable<ComponentPublicInstance>>(null)\n    const triggerElm = computed<Nullable<HTMLButtonElement>>(() => {\n      const _: any = (triggerVnode.value?.$refs.triggerRef as HTMLElement)\n        ?.children[0]\n      return !props.splitButton ? _ : _?.children?.[1]\n    })\n\n    function handleClick() {\n      if (triggerElm.value?.disabled) return\n      if (visible.value) {\n        hide()\n      } else {\n        show()\n      }\n    }\n\n    function show() {\n      if (triggerElm.value?.disabled) return\n      timeout.value && clearTimeout(timeout.value)\n      timeout.value = window.setTimeout(\n        () => {\n          visible.value = true\n        },\n        ['click', 'contextmenu'].includes(props.trigger) ? 0 : props.showTimeout\n      )\n    }\n\n    function hide() {\n      if (triggerElm.value?.disabled) return\n      removeTabindex()\n      if (props.tabindex >= 0) {\n        resetTabindex(triggerElm.value)\n      }\n      clearTimeout(timeout.value)\n      timeout.value = window.setTimeout(\n        () => {\n          visible.value = false\n        },\n        ['click', 'contextmenu'].includes(props.trigger) ? 0 : props.hideTimeout\n      )\n    }\n\n    function removeTabindex() {\n      triggerElm.value?.setAttribute('tabindex', '-1')\n    }\n\n    function resetTabindex(ele) {\n      removeTabindex()\n      ele?.setAttribute('tabindex', '0')\n    }\n\n    function triggerElmFocus() {\n      triggerElm.value?.focus?.()\n    }\n\n    function triggerElmBlur() {\n      triggerElm.value?.blur?.()\n    }\n\n    const dropdownSize = computed(() => props.size || ELEMENT.size)\n\n    function commandHandler(...args) {\n      emit('command', ...args)\n    }\n\n    provide('elDropdown', {\n      instance: _instance,\n      dropdownSize,\n      visible,\n      handleClick,\n      commandHandler,\n      show,\n      hide,\n      trigger: computed(() => props.trigger),\n      hideOnClick: computed(() => props.hideOnClick),\n      triggerElm,\n    })\n\n    onMounted(() => {\n      if (!props.splitButton) {\n        on(triggerElm.value, 'focus', () => {\n          focusing.value = true\n        })\n        on(triggerElm.value, 'blur', () => {\n          focusing.value = false\n        })\n        on(triggerElm.value, 'click', () => {\n          focusing.value = false\n        })\n      }\n      if (props.trigger === 'hover') {\n        on(triggerElm.value, 'mouseenter', show)\n        on(triggerElm.value, 'mouseleave', hide)\n      } else if (props.trigger === 'click') {\n        on(triggerElm.value, 'click', handleClick)\n      } else if (props.trigger === 'contextmenu') {\n        on(triggerElm.value, 'contextmenu', (e) => {\n          e.preventDefault()\n          handleClick()\n        })\n      }\n\n      Object.assign(_instance, {\n        handleClick,\n        hide,\n        resetTabindex,\n      })\n    })\n\n    const handlerMainButtonClick = (event) => {\n      emit('click', event)\n      hide()\n    }\n\n    return {\n      visible,\n      scrollbar,\n      wrapStyle,\n      dropdownSize,\n      handlerMainButtonClick,\n      triggerVnode,\n    }\n  },\n})\n</script>\n"],"names":["ElScrollbar","ElPopper"],"mappings":"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"}

package/es/components/dropdown/src/dropdown.vue_vue&type=template&id=3ed790a5&lang.mjs

@@ -1,5 +1,6 @@
-import { resolveComponent, openBlock, createBlock, withCtx, createVNode, renderSlot, createElementVNode, normalizeClass } from 'vue';
+import { resolveComponent, openBlock, createElementBlock, createVNode, withCtx, renderSlot, createElementVNode, normalizeClass, createBlock } from 'vue';
 
+const _hoisted_1 = { class: "el-dropdown" };
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_el_scrollbar = resolveComponent("el-scrollbar");
   const _component_el_button = resolveComponent("el-button");
@@ -7,76 +8,75 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_el_icon = resolveComponent("el-icon");
   const _component_el_button_group = resolveComponent("el-button-group");
   const _component_el_popper = resolveComponent("el-popper");
-  return openBlock(), createBlock(_component_el_popper, {
-    ref: "triggerVnode",
-    visible: _ctx.visible,
-    "onUpdate:visible": _cache[0] || (_cache[0] = ($event) => _ctx.visible = $event),
-    placement: _ctx.placement,
-    "fallback-placements": ["bottom", "top", "right", "left"],
-    effect: _ctx.effect,
-    pure: "",
-    "manual-mode": true,
-    trigger: [_ctx.trigger],
-    "popper-class": "el-dropdown__popper",
-    "append-to-body": "",
-    transition: "el-zoom-in-top",
-    "stop-popper-mouse-event": false,
-    "gpu-acceleration": false
-  }, {
-    default: withCtx(() => [
-      createVNode(_component_el_scrollbar, {
-        ref: "scrollbar",
-        tag: "ul",
-        "wrap-style": _ctx.wrapStyle,
-        "view-class": "el-dropdown__list"
-      }, {
-        default: withCtx(() => [
-          renderSlot(_ctx.$slots, "dropdown")
-        ]),
-        _: 3
-      }, 8, ["wrap-style"])
-    ]),
-    trigger: withCtx(() => [
-      createElementVNode("div", {
-        class: normalizeClass([
-          "el-dropdown",
-          _ctx.dropdownSize ? "el-dropdown--" + _ctx.dropdownSize : ""
-        ])
-      }, [
-        !_ctx.splitButton ? renderSlot(_ctx.$slots, "default", { key: 0 }) : (openBlock(), createBlock(_component_el_button_group, { key: 1 }, {
+  return openBlock(), createElementBlock("div", _hoisted_1, [
+    createVNode(_component_el_popper, {
+      ref: "triggerVnode",
+      visible: _ctx.visible,
+      "onUpdate:visible": _cache[0] || (_cache[0] = ($event) => _ctx.visible = $event),
+      placement: _ctx.placement,
+      "fallback-placements": ["bottom", "top", "right", "left"],
+      effect: _ctx.effect,
+      pure: "",
+      "manual-mode": true,
+      trigger: [_ctx.trigger],
+      "popper-class": "el-dropdown__popper",
+      "append-to-body": "",
+      transition: "el-zoom-in-top",
+      "stop-popper-mouse-event": false,
+      "gpu-acceleration": false
+    }, {
+      default: withCtx(() => [
+        createVNode(_component_el_scrollbar, {
+          ref: "scrollbar",
+          tag: "ul",
+          "wrap-style": _ctx.wrapStyle,
+          "view-class": "el-dropdown__list"
+        }, {
           default: withCtx(() => [
-            createVNode(_component_el_button, {
-              size: _ctx.dropdownSize,
-              type: _ctx.type,
-              onClick: _ctx.handlerMainButtonClick
-            }, {
-              default: withCtx(() => [
-                renderSlot(_ctx.$slots, "default")
-              ]),
-              _: 3
-            }, 8, ["size", "type", "onClick"]),
-            createVNode(_component_el_button, {
-              size: _ctx.dropdownSize,
-              type: _ctx.type,
-              class: "el-dropdown__caret-button"
-            }, {
-              default: withCtx(() => [
-                createVNode(_component_el_icon, { class: "el-dropdown__icon" }, {
-                  default: withCtx(() => [
-                    createVNode(_component_arrow_down)
-                  ]),
-                  _: 1
-                })
-              ]),
-              _: 1
-            }, 8, ["size", "type"])
+            renderSlot(_ctx.$slots, "dropdown")
           ]),
           _: 3
-        }))
-      ], 2)
-    ]),
-    _: 3
-  }, 8, ["visible", "placement", "effect", "trigger"]);
+        }, 8, ["wrap-style"])
+      ]),
+      trigger: withCtx(() => [
+        createElementVNode("div", {
+          class: normalizeClass([_ctx.dropdownSize ? "el-dropdown--" + _ctx.dropdownSize : ""])
+        }, [
+          !_ctx.splitButton ? renderSlot(_ctx.$slots, "default", { key: 0 }) : (openBlock(), createBlock(_component_el_button_group, { key: 1 }, {
+            default: withCtx(() => [
+              createVNode(_component_el_button, {
+                size: _ctx.dropdownSize,
+                type: _ctx.type,
+                onClick: _ctx.handlerMainButtonClick
+              }, {
+                default: withCtx(() => [
+                  renderSlot(_ctx.$slots, "default")
+                ]),
+                _: 3
+              }, 8, ["size", "type", "onClick"]),
+              createVNode(_component_el_button, {
+                size: _ctx.dropdownSize,
+                type: _ctx.type,
+                class: "el-dropdown__caret-button"
+              }, {
+                default: withCtx(() => [
+                  createVNode(_component_el_icon, { class: "el-dropdown__icon" }, {
+                    default: withCtx(() => [
+                      createVNode(_component_arrow_down)
+                    ]),
+                    _: 1
+                  })
+                ]),
+                _: 1
+              }, 8, ["size", "type"])
+            ]),
+            _: 3
+          }))
+        ], 2)
+      ]),
+      _: 3
+    }, 8, ["visible", "placement", "effect", "trigger"])
+  ]);
 }
 
 export { render };

package/es/components/dropdown/src/dropdown.vue_vue&type=template&id=3ed790a5&lang.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown.vue_vue&type=template&id=3ed790a5&lang.mjs","sources":["../../../../../../packages/components/dropdown/src/dropdown.vue?vue&type=template&id=3ed790a5&lang.js"],"sourcesContent":["<template>\n  <el-popper\n    ref=\"triggerVnode\"\n    v-model:visible=\"visible\"\n    :placement=\"placement\"\n    :fallback-placements=\"['bottom', 'top', 'right', 'left']\"\n    :effect=\"effect\"\n    pure\n    :manual-mode=\"true\"\n    :trigger=\"[trigger]\"\n    popper-class=\"el-dropdown__popper\"\n    append-to-body\n    transition=\"el-zoom-in-top\"\n    :stop-popper-mouse-event=\"false\"\n    :gpu-acceleration=\"false\"\n  >\n    <template #default>\n      <el-scrollbar\n        ref=\"scrollbar\"\n        tag=\"ul\"\n        :wrap-style=\"wrapStyle\"\n        view-class=\"el-dropdown__list\"\n      >\n        <slot name=\"dropdown\"></slot>\n      </el-scrollbar>\n    </template>\n    <template #trigger>\n      <div\n        :class=\"[\n          'el-dropdown',\n          dropdownSize ? 'el-dropdown--' + dropdownSize : '',\n        ]\"\n      >\n        <slot v-if=\"!splitButton\" name=\"default\"></slot>\n        <template v-else>\n          <el-button-group>\n            <el-button\n              :size=\"dropdownSize\"\n              :type=\"type\"\n              @click=\"handlerMainButtonClick\"\n            >\n              <slot name=\"default\"></slot>\n            </el-button>\n            <el-button\n              :size=\"dropdownSize\"\n              :type=\"type\"\n              class=\"el-dropdown__caret-button\"\n            >\n              <el-icon class=\"el-dropdown__icon\"><arrow-down /></el-icon>\n            </el-button>\n          </el-button-group>\n        </template>\n      </div>\n    </template>\n  </el-popper>\n</template>\n<script lang=\"ts\">\nimport {\n  defineComponent,\n  provide,\n  getCurrentInstance,\n  ref,\n  computed,\n  watch,\n  onMounted,\n} from 'vue'\nimport ElButton from '@element-plus/components/button'\nimport ElPopper, { Effect } from '@element-plus/components/popper'\nimport ElScrollbar from '@element-plus/components/scrollbar'\nimport ElIcon from '@element-plus/components/icon'\nimport { on, addClass, removeClass } from '@element-plus/utils/dom'\nimport { addUnit } from '@element-plus/utils/util'\nimport { ArrowDown } from '@element-plus/icons'\nimport { useDropdown } from './useDropdown'\n\nimport type { Placement } from '@element-plus/components/popper'\nimport type { PropType, ComponentPublicInstance } from 'vue'\nimport type { TriggerType } from '@element-plus/hooks/use-popper/use-target-events'\nimport type { ButtonType } from '@element-plus/components/button/src/types'\n\ntype Nullable<T> = null | T\nconst { ButtonGroup: ElButtonGroup } = ElButton\n\nexport default defineComponent({\n  name: 'ElDropdown',\n  components: {\n    ElButton,\n    ElButtonGroup,\n    ElScrollbar,\n    ElPopper,\n    ElIcon,\n    ArrowDown,\n  },\n  props: {\n    trigger: {\n      type: String as PropType<TriggerType | 'contextmenu'>,\n      default: 'hover',\n    },\n    type: String as PropType<ButtonType>,\n    size: {\n      type: String,\n      default: '',\n    },\n    splitButton: Boolean,\n    hideOnClick: {\n      type: Boolean,\n      default: true,\n    },\n    placement: {\n      type: String as PropType<Placement>,\n      default: 'bottom',\n    },\n    showTimeout: {\n      type: Number,\n      default: 150,\n    },\n    hideTimeout: {\n      type: Number,\n      default: 150,\n    },\n    tabindex: {\n      type: [Number, String],\n      default: 0,\n    },\n    effect: {\n      type: String as PropType<Effect>,\n      default: Effect.LIGHT,\n    },\n    maxHeight: {\n      type: [Number, String],\n      default: '',\n    },\n  },\n  emits: ['visible-change', 'click', 'command'],\n  setup(props, { emit }) {\n    const _instance = getCurrentInstance()\n    const { ELEMENT } = useDropdown()\n\n    const timeout = ref<Nullable<number>>(null)\n\n    const visible = ref(false)\n    const scrollbar = ref(null)\n    const wrapStyle = computed(() => `max-height: ${addUnit(props.maxHeight)}`)\n\n    watch(\n      () => visible.value,\n      (val) => {\n        if (val) triggerElmFocus()\n        if (!val) triggerElmBlur()\n        emit('visible-change', val)\n      }\n    )\n\n    const focusing = ref(false)\n    watch(\n      () => focusing.value,\n      (val) => {\n        const selfDefine = triggerElm.value\n        if (selfDefine) {\n          if (val) {\n            addClass(selfDefine, 'focusing')\n          } else {\n            removeClass(selfDefine, 'focusing')\n          }\n        }\n      }\n    )\n\n    const triggerVnode = ref<Nullable<ComponentPublicInstance>>(null)\n    const triggerElm = computed<Nullable<HTMLButtonElement>>(() => {\n      const _: any = (triggerVnode.value?.$refs.triggerRef as HTMLElement)\n        ?.children[0]\n      return !props.splitButton ? _ : _?.children?.[1]\n    })\n\n    function handleClick() {\n      if (triggerElm.value?.disabled) return\n      if (visible.value) {\n        hide()\n      } else {\n        show()\n      }\n    }\n\n    function show() {\n      if (triggerElm.value?.disabled) return\n      timeout.value && clearTimeout(timeout.value)\n      timeout.value = window.setTimeout(\n        () => {\n          visible.value = true\n        },\n        ['click', 'contextmenu'].includes(props.trigger) ? 0 : props.showTimeout\n      )\n    }\n\n    function hide() {\n      if (triggerElm.value?.disabled) return\n      removeTabindex()\n      if (props.tabindex >= 0) {\n        resetTabindex(triggerElm.value)\n      }\n      clearTimeout(timeout.value)\n      timeout.value = window.setTimeout(\n        () => {\n          visible.value = false\n        },\n        ['click', 'contextmenu'].includes(props.trigger) ? 0 : props.hideTimeout\n      )\n    }\n\n    function removeTabindex() {\n      triggerElm.value?.setAttribute('tabindex', '-1')\n    }\n\n    function resetTabindex(ele) {\n      removeTabindex()\n      ele?.setAttribute('tabindex', '0')\n    }\n\n    function triggerElmFocus() {\n      triggerElm.value?.focus?.()\n    }\n\n    function triggerElmBlur() {\n      triggerElm.value?.blur?.()\n    }\n\n    const dropdownSize = computed(() => props.size || ELEMENT.size)\n\n    function commandHandler(...args) {\n      emit('command', ...args)\n    }\n\n    provide('elDropdown', {\n      instance: _instance,\n      dropdownSize,\n      visible,\n      handleClick,\n      commandHandler,\n      show,\n      hide,\n      trigger: computed(() => props.trigger),\n      hideOnClick: computed(() => props.hideOnClick),\n      triggerElm,\n    })\n\n    onMounted(() => {\n      if (!props.splitButton) {\n        on(triggerElm.value, 'focus', () => {\n          focusing.value = true\n        })\n        on(triggerElm.value, 'blur', () => {\n          focusing.value = false\n        })\n        on(triggerElm.value, 'click', () => {\n          focusing.value = false\n        })\n      }\n      if (props.trigger === 'hover') {\n        on(triggerElm.value, 'mouseenter', show)\n        on(triggerElm.value, 'mouseleave', hide)\n      } else if (props.trigger === 'click') {\n        on(triggerElm.value, 'click', handleClick)\n      } else if (props.trigger === 'contextmenu') {\n        on(triggerElm.value, 'contextmenu', (e) => {\n          e.preventDefault()\n          handleClick()\n        })\n      }\n\n      Object.assign(_instance, {\n        handleClick,\n        hide,\n        resetTabindex,\n      })\n    })\n\n    const handlerMainButtonClick = (event) => {\n      emit('click', event)\n      hide()\n    }\n\n    return {\n      visible,\n      scrollbar,\n      wrapStyle,\n      dropdownSize,\n      handlerMainButtonClick,\n      triggerVnode,\n    }\n  },\n})\n</script>\n"],"names":["_createBlock","_createVNode","_renderSlot","_createElementVNode"],"mappings":";;;;;;;;;sBACEA;IACE,KAAI;AAAA,IACI,SAAS;8DAAA;IAChB,WAAW;IACX,uBAAqB;IACrB,QAAQ;IACT,MAAA;AAAA,IACC,eAAa;AAAA,IACb,UAAU;IACX,gBAAa;AAAA,IACb,kBAAA;AAAA,IACA,YAAW;AAAA,IACV,2BAAyB;AAAA,IACzB,oBAAkB;AAAA;IAER,iBACT;MAAAC;QACE,KAAI;AAAA,QACJ,KAAI;AAAA,QACH,cAAY;QACb,cAAW;AAAA;yBAEX;UAAAC;;;;;IAGO,iBACT;MAAAC;QACG;;;;;SAKY,mBAAbD,+DAEEF;2BACE;YAAAC;cACG,MAAM;cACN,MAAM;cACN,SAAO;;+BAER;gBAAAC;;;;YAEFD;cACG,MAAM;cACN,MAAM;cACP,OAAM;AAAA;+BAEN;gBAAAA,kCAAS,OAAM;mCAAoB;oBAAAA,YAAc;AAAA;AAAA;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"dropdown.vue_vue&type=template&id=3ed790a5&lang.mjs","sources":["../../../../../../packages/components/dropdown/src/dropdown.vue?vue&type=template&id=3ed790a5&lang.js"],"sourcesContent":["<template>\n  <div class=\"el-dropdown\">\n    <el-popper\n      ref=\"triggerVnode\"\n      v-model:visible=\"visible\"\n      :placement=\"placement\"\n      :fallback-placements=\"['bottom', 'top', 'right', 'left']\"\n      :effect=\"effect\"\n      pure\n      :manual-mode=\"true\"\n      :trigger=\"[trigger]\"\n      popper-class=\"el-dropdown__popper\"\n      append-to-body\n      transition=\"el-zoom-in-top\"\n      :stop-popper-mouse-event=\"false\"\n      :gpu-acceleration=\"false\"\n    >\n      <template #default>\n        <el-scrollbar\n          ref=\"scrollbar\"\n          tag=\"ul\"\n          :wrap-style=\"wrapStyle\"\n          view-class=\"el-dropdown__list\"\n        >\n          <slot name=\"dropdown\"></slot>\n        </el-scrollbar>\n      </template>\n      <template #trigger>\n        <div :class=\"[dropdownSize ? 'el-dropdown--' + dropdownSize : '']\">\n          <slot v-if=\"!splitButton\" name=\"default\"></slot>\n          <template v-else>\n            <el-button-group>\n              <el-button\n                :size=\"dropdownSize\"\n                :type=\"type\"\n                @click=\"handlerMainButtonClick\"\n              >\n                <slot name=\"default\"></slot>\n              </el-button>\n              <el-button\n                :size=\"dropdownSize\"\n                :type=\"type\"\n                class=\"el-dropdown__caret-button\"\n              >\n                <el-icon class=\"el-dropdown__icon\"><arrow-down /></el-icon>\n              </el-button>\n            </el-button-group>\n          </template>\n        </div>\n      </template>\n    </el-popper>\n  </div>\n</template>\n<script lang=\"ts\">\nimport {\n  defineComponent,\n  provide,\n  getCurrentInstance,\n  ref,\n  computed,\n  watch,\n  onMounted,\n} from 'vue'\nimport ElButton from '@element-plus/components/button'\nimport ElPopper, { Effect } from '@element-plus/components/popper'\nimport ElScrollbar from '@element-plus/components/scrollbar'\nimport ElIcon from '@element-plus/components/icon'\nimport { on, addClass, removeClass } from '@element-plus/utils/dom'\nimport { addUnit } from '@element-plus/utils/util'\nimport { ArrowDown } from '@element-plus/icons'\nimport { useDropdown } from './useDropdown'\n\nimport type { Placement } from '@element-plus/components/popper'\nimport type { PropType, ComponentPublicInstance } from 'vue'\nimport type { TriggerType } from '@element-plus/hooks/use-popper/use-target-events'\nimport type { ButtonType } from '@element-plus/components/button/src/types'\n\ntype Nullable<T> = null | T\nconst { ButtonGroup: ElButtonGroup } = ElButton\n\nexport default defineComponent({\n  name: 'ElDropdown',\n  components: {\n    ElButton,\n    ElButtonGroup,\n    ElScrollbar,\n    ElPopper,\n    ElIcon,\n    ArrowDown,\n  },\n  props: {\n    trigger: {\n      type: String as PropType<TriggerType | 'contextmenu'>,\n      default: 'hover',\n    },\n    type: String as PropType<ButtonType>,\n    size: {\n      type: String,\n      default: '',\n    },\n    splitButton: Boolean,\n    hideOnClick: {\n      type: Boolean,\n      default: true,\n    },\n    placement: {\n      type: String as PropType<Placement>,\n      default: 'bottom',\n    },\n    showTimeout: {\n      type: Number,\n      default: 150,\n    },\n    hideTimeout: {\n      type: Number,\n      default: 150,\n    },\n    tabindex: {\n      type: [Number, String],\n      default: 0,\n    },\n    effect: {\n      type: String as PropType<Effect>,\n      default: Effect.LIGHT,\n    },\n    maxHeight: {\n      type: [Number, String],\n      default: '',\n    },\n  },\n  emits: ['visible-change', 'click', 'command'],\n  setup(props, { emit }) {\n    const _instance = getCurrentInstance()\n    const { ELEMENT } = useDropdown()\n\n    const timeout = ref<Nullable<number>>(null)\n\n    const visible = ref(false)\n    const scrollbar = ref(null)\n    const wrapStyle = computed(() => `max-height: ${addUnit(props.maxHeight)}`)\n\n    watch(\n      () => visible.value,\n      (val) => {\n        if (val) triggerElmFocus()\n        if (!val) triggerElmBlur()\n        emit('visible-change', val)\n      }\n    )\n\n    const focusing = ref(false)\n    watch(\n      () => focusing.value,\n      (val) => {\n        const selfDefine = triggerElm.value\n        if (selfDefine) {\n          if (val) {\n            addClass(selfDefine, 'focusing')\n          } else {\n            removeClass(selfDefine, 'focusing')\n          }\n        }\n      }\n    )\n\n    const triggerVnode = ref<Nullable<ComponentPublicInstance>>(null)\n    const triggerElm = computed<Nullable<HTMLButtonElement>>(() => {\n      const _: any = (triggerVnode.value?.$refs.triggerRef as HTMLElement)\n        ?.children[0]\n      return !props.splitButton ? _ : _?.children?.[1]\n    })\n\n    function handleClick() {\n      if (triggerElm.value?.disabled) return\n      if (visible.value) {\n        hide()\n      } else {\n        show()\n      }\n    }\n\n    function show() {\n      if (triggerElm.value?.disabled) return\n      timeout.value && clearTimeout(timeout.value)\n      timeout.value = window.setTimeout(\n        () => {\n          visible.value = true\n        },\n        ['click', 'contextmenu'].includes(props.trigger) ? 0 : props.showTimeout\n      )\n    }\n\n    function hide() {\n      if (triggerElm.value?.disabled) return\n      removeTabindex()\n      if (props.tabindex >= 0) {\n        resetTabindex(triggerElm.value)\n      }\n      clearTimeout(timeout.value)\n      timeout.value = window.setTimeout(\n        () => {\n          visible.value = false\n        },\n        ['click', 'contextmenu'].includes(props.trigger) ? 0 : props.hideTimeout\n      )\n    }\n\n    function removeTabindex() {\n      triggerElm.value?.setAttribute('tabindex', '-1')\n    }\n\n    function resetTabindex(ele) {\n      removeTabindex()\n      ele?.setAttribute('tabindex', '0')\n    }\n\n    function triggerElmFocus() {\n      triggerElm.value?.focus?.()\n    }\n\n    function triggerElmBlur() {\n      triggerElm.value?.blur?.()\n    }\n\n    const dropdownSize = computed(() => props.size || ELEMENT.size)\n\n    function commandHandler(...args) {\n      emit('command', ...args)\n    }\n\n    provide('elDropdown', {\n      instance: _instance,\n      dropdownSize,\n      visible,\n      handleClick,\n      commandHandler,\n      show,\n      hide,\n      trigger: computed(() => props.trigger),\n      hideOnClick: computed(() => props.hideOnClick),\n      triggerElm,\n    })\n\n    onMounted(() => {\n      if (!props.splitButton) {\n        on(triggerElm.value, 'focus', () => {\n          focusing.value = true\n        })\n        on(triggerElm.value, 'blur', () => {\n          focusing.value = false\n        })\n        on(triggerElm.value, 'click', () => {\n          focusing.value = false\n        })\n      }\n      if (props.trigger === 'hover') {\n        on(triggerElm.value, 'mouseenter', show)\n        on(triggerElm.value, 'mouseleave', hide)\n      } else if (props.trigger === 'click') {\n        on(triggerElm.value, 'click', handleClick)\n      } else if (props.trigger === 'contextmenu') {\n        on(triggerElm.value, 'contextmenu', (e) => {\n          e.preventDefault()\n          handleClick()\n        })\n      }\n\n      Object.assign(_instance, {\n        handleClick,\n        hide,\n        resetTabindex,\n      })\n    })\n\n    const handlerMainButtonClick = (event) => {\n      emit('click', event)\n      hide()\n    }\n\n    return {\n      visible,\n      scrollbar,\n      wrapStyle,\n      dropdownSize,\n      handlerMainButtonClick,\n      triggerVnode,\n    }\n  },\n})\n</script>\n"],"names":["_createElementBlock","_createVNode","_renderSlot","_createElementVNode","_createBlock"],"mappings":";;qBACO,OAAM;;;;;;;;sBAAXA,0BAAA;IACEC;MACE,KAAI;AAAA,MACI,SAAS;gEAAA;MAChB,WAAW;MACX,uBAAqB;MACrB,QAAQ;MACT,MAAA;AAAA,MACC,eAAa;AAAA,MACb,UAAU;MACX,gBAAa;AAAA,MACb,kBAAA;AAAA,MACA,YAAW;AAAA,MACV,2BAAyB;AAAA,MACzB,oBAAkB;AAAA;MAER,iBACT;QAAAA;UACE,KAAI;AAAA,UACJ,KAAI;AAAA,UACH,cAAY;UACb,cAAW;AAAA;2BAEX;YAAAC;;;;;MAGO,iBACT;QAAAC;UAAM,uBAAQ,sCAAiC;;WAChC,mBAAbD,+DAEEE;6BACE;cAAAH;gBACG,MAAM;gBACN,MAAM;gBACN,SAAO;;iCAER;kBAAAC;;;;cAEFD;gBACG,MAAM;gBACN,MAAM;gBACP,OAAM;AAAA;iCAEN;kBAAAA,kCAAS,OAAM;qCAAoB;sBAAAA,YAAc;AAAA;AAAA;;;;;;;;;;;;;;;;;"}