@element-plus/nightly 0.0.20220108 → 0.0.20220112

package/es/components/date-picker/src/date-picker-com/panel-date-pick.vue_vue_type_template_id_78e07aa7_lang.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"panel-date-pick.vue_vue_type_template_id_78e07aa7_lang.mjs","sources":["../../../../../../../packages/components/date-picker/src/date-picker-com/panel-date-pick.vue?vue&type=template&id=78e07aa7&lang.js"],"sourcesContent":["<template>\n  <div\n    class=\"el-picker-panel el-date-picker\"\n    :class=\"[\n      {\n        'has-sidebar': $slots.sidebar || hasShortcuts,\n        'has-time': showTime,\n      },\n    ]\"\n  >\n    <div class=\"el-picker-panel__body-wrapper\">\n      <slot name=\"sidebar\" class=\"el-picker-panel__sidebar\"></slot>\n      <div v-if=\"hasShortcuts\" class=\"el-picker-panel__sidebar\">\n        <button\n          v-for=\"(shortcut, key) in shortcuts\"\n          :key=\"key\"\n          type=\"button\"\n          class=\"el-picker-panel__shortcut\"\n          @click=\"handleShortcutClick(shortcut)\"\n        >\n          {{ shortcut.text }}\n        </button>\n      </div>\n      <div class=\"el-picker-panel__body\">\n        <div v-if=\"showTime\" class=\"el-date-picker__time-header\">\n          <span class=\"el-date-picker__editor-wrap\">\n            <el-input\n              :placeholder=\"t('el.datepicker.selectDate')\"\n              :model-value=\"visibleDate\"\n              size=\"small\"\n              @input=\"(val) => (userInputDate = val)\"\n              @change=\"handleVisibleDateChange\"\n            />\n          </span>\n          <span\n            v-clickoutside=\"handleTimePickClose\"\n            class=\"el-date-picker__editor-wrap\"\n          >\n            <el-input\n              :placeholder=\"t('el.datepicker.selectTime')\"\n              :model-value=\"visibleTime\"\n              size=\"small\"\n              @focus=\"onTimePickerInputFocus\"\n              @input=\"(val) => (userInputTime = val)\"\n              @change=\"handleVisibleTimeChange\"\n            />\n            <time-pick-panel\n              :visible=\"timePickerVisible\"\n              :format=\"timeFormat\"\n              :time-arrow-control=\"arrowControl\"\n              :parsed-value=\"innerDate\"\n              @pick=\"handleTimePick\"\n            />\n          </span>\n        </div>\n        <div\n          v-show=\"currentView !== 'time'\"\n          class=\"el-date-picker__header\"\n          :class=\"{\n            'el-date-picker__header--bordered':\n              currentView === 'year' || currentView === 'month',\n          }\"\n        >\n          <button\n            type=\"button\"\n            :aria-label=\"t(`el.datepicker.prevYear`)\"\n            class=\"el-picker-panel__icon-btn el-date-picker__prev-btn d-arrow-left\"\n            @click=\"prevYear_\"\n          >\n            <el-icon><d-arrow-left /></el-icon>\n          </button>\n          <button\n            v-show=\"currentView === 'date'\"\n            type=\"button\"\n            :aria-label=\"t(`el.datepicker.prevMonth`)\"\n            class=\"el-picker-panel__icon-btn el-date-picker__prev-btn arrow-left\"\n            @click=\"prevMonth_\"\n          >\n            <el-icon><arrow-left /></el-icon>\n          </button>\n          <span\n            role=\"button\"\n            class=\"el-date-picker__header-label\"\n            @click=\"showYearPicker\"\n            >{{ yearLabel }}</span\n          >\n          <span\n            v-show=\"currentView === 'date'\"\n            role=\"button\"\n            class=\"el-date-picker__header-label\"\n            :class=\"{ active: currentView === 'month' }\"\n            @click=\"showMonthPicker\"\n            >{{ t(`el.datepicker.month${month + 1}`) }}</span\n          >\n          <button\n            type=\"button\"\n            :aria-label=\"t(`el.datepicker.nextYear`)\"\n            class=\"el-picker-panel__icon-btn el-date-picker__next-btn d-arrow-right\"\n            @click=\"nextYear_\"\n          >\n            <el-icon><d-arrow-right /></el-icon>\n          </button>\n          <button\n            v-show=\"currentView === 'date'\"\n            type=\"button\"\n            :aria-label=\"t(`el.datepicker.nextMonth`)\"\n            class=\"el-picker-panel__icon-btn el-date-picker__next-btn arrow-right\"\n            @click=\"nextMonth_\"\n          >\n            <el-icon><arrow-right /></el-icon>\n          </button>\n        </div>\n        <div class=\"el-picker-panel__content\">\n          <date-table\n            v-if=\"currentView === 'date'\"\n            :selection-mode=\"selectionMode\"\n            :date=\"innerDate\"\n            :parsed-value=\"parsedValue\"\n            :disabled-date=\"disabledDate\"\n            @pick=\"handleDatePick\"\n          />\n          <year-table\n            v-if=\"currentView === 'year'\"\n            :date=\"innerDate\"\n            :disabled-date=\"disabledDate\"\n            :parsed-value=\"parsedValue\"\n            @pick=\"handleYearPick\"\n          />\n          <month-table\n            v-if=\"currentView === 'month'\"\n            :date=\"innerDate\"\n            :parsed-value=\"parsedValue\"\n            :disabled-date=\"disabledDate\"\n            @pick=\"handleMonthPick\"\n          />\n        </div>\n      </div>\n    </div>\n    <div\n      v-show=\"footerVisible && currentView === 'date'\"\n      class=\"el-picker-panel__footer\"\n    >\n      <el-button\n        v-show=\"selectionMode !== 'dates'\"\n        size=\"small\"\n        type=\"text\"\n        class=\"el-picker-panel__link-btn\"\n        @click=\"changeToNow\"\n      >\n        {{ t('el.datepicker.now') }}\n      </el-button>\n      <el-button\n        plain\n        size=\"small\"\n        class=\"el-picker-panel__link-btn\"\n        @click=\"onConfirm\"\n      >\n        {{ t('el.datepicker.confirm') }}\n      </el-button>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, inject, ref, watch } from 'vue'\nimport dayjs from 'dayjs'\nimport ElButton from '@element-plus/components/button'\nimport { ClickOutside } from '@element-plus/directives'\nimport { useLocale } from '@element-plus/hooks'\nimport ElInput from '@element-plus/components/input'\nimport {\n  extractDateFormat,\n  extractTimeFormat,\n  TimePickPanel,\n} from '@element-plus/components/time-picker'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { EVENT_CODE } from '@element-plus/utils/aria'\nimport { isValidDatePickType } from '@element-plus/utils/validators'\nimport {\n  DArrowLeft,\n  ArrowLeft,\n  DArrowRight,\n  ArrowRight,\n} from '@element-plus/icons-vue'\nimport DateTable from './basic-date-table.vue'\nimport MonthTable from './basic-month-table.vue'\nimport YearTable from './basic-year-table.vue'\n\nimport type { PropType } from 'vue'\nimport type { ConfigType, Dayjs } from 'dayjs'\nimport type { IDatePickerType } from '../date-picker.type'\n\n// todo\n/* eslint-disable-next-line */\nconst timeWithinRange = (_: ConfigType, __: any, ___: string) => true\n\nexport default defineComponent({\n  components: {\n    DateTable,\n    ElInput,\n    ElButton,\n    ElIcon,\n    TimePickPanel,\n    MonthTable,\n    YearTable,\n    DArrowLeft,\n    ArrowLeft,\n    DArrowRight,\n    ArrowRight,\n  },\n\n  directives: { clickoutside: ClickOutside },\n  props: {\n    visible: {\n      type: Boolean,\n      default: false,\n    },\n    parsedValue: {\n      type: [Object, Array] as PropType<Dayjs | Dayjs[]>,\n    },\n    format: {\n      type: String,\n      default: '',\n    },\n    type: {\n      type: String as PropType<IDatePickerType>,\n      required: true,\n      validator: isValidDatePickType,\n    },\n  },\n  emits: ['pick', 'set-picker-option'],\n  setup(props, ctx) {\n    const { t, lang } = useLocale()\n    const pickerBase = inject('EP_PICKER_BASE') as any\n\n    const {\n      shortcuts,\n      disabledDate,\n      cellClassName,\n      defaultTime,\n      defaultValue,\n      arrowControl,\n    } = pickerBase.props\n\n    const innerDate = ref(dayjs().locale(lang.value))\n\n    const defaultTimeD = computed(() => {\n      return dayjs(defaultTime).locale(lang.value)\n    })\n\n    const month = computed(() => {\n      return innerDate.value.month()\n    })\n\n    const year = computed(() => {\n      return innerDate.value.year()\n    })\n\n    const selectableRange = ref([])\n    const userInputDate = ref(null)\n    const userInputTime = ref(null)\n    // todo update to disableHour\n    const checkDateWithinRange = (date: ConfigType) => {\n      return selectableRange.value.length > 0\n        ? timeWithinRange(\n            date,\n            selectableRange.value,\n            props.format || 'HH:mm:ss'\n          )\n        : true\n    }\n    const formatEmit = (emitDayjs: Dayjs) => {\n      if (defaultTime && !visibleTime.value) {\n        return defaultTimeD.value\n          .year(emitDayjs.year())\n          .month(emitDayjs.month())\n          .date(emitDayjs.date())\n      }\n      if (showTime.value) return emitDayjs.millisecond(0)\n      return emitDayjs.startOf('day')\n    }\n    const emit = (value, ...args) => {\n      if (!value) {\n        ctx.emit('pick', value, ...args)\n      } else if (Array.isArray(value)) {\n        const dates = value.map(formatEmit)\n        ctx.emit('pick', dates, ...args)\n      } else {\n        ctx.emit('pick', formatEmit(value), ...args)\n      }\n      userInputDate.value = null\n      userInputTime.value = null\n    }\n    const handleDatePick = (value: Dayjs) => {\n      if (selectionMode.value === 'day') {\n        let newDate = props.parsedValue\n          ? (props.parsedValue as Dayjs)\n              .year(value.year())\n              .month(value.month())\n              .date(value.date())\n          : value\n        // change default time while out of selectableRange\n        if (!checkDateWithinRange(newDate)) {\n          newDate = (selectableRange.value[0][0] as Dayjs)\n            .year(value.year())\n            .month(value.month())\n            .date(value.date())\n        }\n        innerDate.value = newDate\n        emit(newDate, showTime.value)\n      } else if (selectionMode.value === 'week') {\n        emit(value.date)\n      } else if (selectionMode.value === 'dates') {\n        emit(value, true) // set false to keep panel open\n      }\n    }\n    const prevMonth_ = () => {\n      innerDate.value = innerDate.value.subtract(1, 'month')\n    }\n\n    const nextMonth_ = () => {\n      innerDate.value = innerDate.value.add(1, 'month')\n    }\n\n    const prevYear_ = () => {\n      if (currentView.value === 'year') {\n        innerDate.value = innerDate.value.subtract(10, 'year')\n      } else {\n        innerDate.value = innerDate.value.subtract(1, 'year')\n      }\n    }\n\n    const nextYear_ = () => {\n      if (currentView.value === 'year') {\n        innerDate.value = innerDate.value.add(10, 'year')\n      } else {\n        innerDate.value = innerDate.value.add(1, 'year')\n      }\n    }\n\n    const currentView = ref('date')\n\n    const yearLabel = computed(() => {\n      const yearTranslation = t('el.datepicker.year')\n      if (currentView.value === 'year') {\n        const startYear = Math.floor(year.value / 10) * 10\n        if (yearTranslation) {\n          return `${startYear} ${yearTranslation} - ${\n            startYear + 9\n          } ${yearTranslation}`\n        }\n        return `${startYear} - ${startYear + 9}`\n      }\n      return `${year.value} ${yearTranslation}`\n    })\n\n    const handleShortcutClick = (shortcut) => {\n      const shortcutValue =\n        typeof shortcut.value === 'function' ? shortcut.value() : shortcut.value\n      if (shortcutValue) {\n        emit(dayjs(shortcutValue).locale(lang.value))\n        return\n      }\n      if (shortcut.onClick) {\n        shortcut.onClick(ctx)\n      }\n    }\n\n    const selectionMode = computed(() => {\n      if (['week', 'month', 'year', 'dates'].includes(props.type)) {\n        return props.type\n      }\n      return 'day'\n    })\n\n    watch(\n      () => selectionMode.value,\n      (val) => {\n        if (['month', 'year'].includes(val)) {\n          currentView.value = val\n          return\n        }\n        currentView.value = 'date'\n      },\n      { immediate: true }\n    )\n\n    const hasShortcuts = computed(() => !!shortcuts.length)\n\n    const handleMonthPick = (month) => {\n      innerDate.value = innerDate.value.startOf('month').month(month)\n      if (selectionMode.value === 'month') {\n        emit(innerDate.value)\n      } else {\n        currentView.value = 'date'\n      }\n    }\n\n    const handleYearPick = (year) => {\n      if (selectionMode.value === 'year') {\n        innerDate.value = innerDate.value.startOf('year').year(year)\n        emit(innerDate.value)\n      } else {\n        innerDate.value = innerDate.value.year(year)\n        currentView.value = 'month'\n      }\n    }\n\n    const showMonthPicker = () => {\n      currentView.value = 'month'\n    }\n\n    const showYearPicker = () => {\n      currentView.value = 'year'\n    }\n\n    const showTime = computed(\n      () => props.type === 'datetime' || props.type === 'datetimerange'\n    )\n\n    const footerVisible = computed(() => {\n      return showTime.value || selectionMode.value === 'dates'\n    })\n\n    const onConfirm = () => {\n      if (selectionMode.value === 'dates') {\n        emit(props.parsedValue)\n      } else {\n        // deal with the scenario where: user opens the date time picker, then confirm without doing anything\n        let result = props.parsedValue as Dayjs\n        if (!result) {\n          const defaultTimeD = dayjs(defaultTime).locale(lang.value)\n          const defaultValueD = getDefaultValue()\n          result = defaultTimeD\n            .year(defaultValueD.year())\n            .month(defaultValueD.month())\n            .date(defaultValueD.date())\n        }\n        innerDate.value = result\n        emit(result)\n      }\n    }\n\n    const changeToNow = () => {\n      // NOTE: not a permanent solution\n      //       consider disable \"now\" button in the future\n      const now = dayjs().locale(lang.value)\n      const nowDate = now.toDate()\n      if (\n        (!disabledDate || !disabledDate(nowDate)) &&\n        checkDateWithinRange(nowDate)\n      ) {\n        innerDate.value = dayjs().locale(lang.value)\n        emit(innerDate.value)\n      }\n    }\n\n    const timeFormat = computed(() => {\n      return extractTimeFormat(props.format)\n    })\n\n    const dateFormat = computed(() => {\n      return extractDateFormat(props.format)\n    })\n\n    const visibleTime = computed(() => {\n      if (userInputTime.value) return userInputTime.value\n      if (!props.parsedValue && !defaultValue) return\n      return ((props.parsedValue || innerDate.value) as Dayjs).format(\n        timeFormat.value\n      )\n    })\n\n    const visibleDate = computed(() => {\n      if (userInputDate.value) return userInputDate.value\n      if (!props.parsedValue && !defaultValue) return\n      return ((props.parsedValue || innerDate.value) as Dayjs).format(\n        dateFormat.value\n      )\n    })\n\n    const timePickerVisible = ref(false)\n    const onTimePickerInputFocus = () => {\n      timePickerVisible.value = true\n    }\n    const handleTimePickClose = () => {\n      timePickerVisible.value = false\n    }\n\n    const handleTimePick = (value, visible, first) => {\n      const newDate = props.parsedValue\n        ? (props.parsedValue as Dayjs)\n            .hour(value.hour())\n            .minute(value.minute())\n            .second(value.second())\n        : value\n      innerDate.value = newDate\n      emit(innerDate.value, true)\n      if (!first) {\n        timePickerVisible.value = visible\n      }\n    }\n\n    const handleVisibleTimeChange = (value) => {\n      const newDate = dayjs(value, timeFormat.value).locale(lang.value)\n      if (newDate.isValid() && checkDateWithinRange(newDate)) {\n        innerDate.value = newDate\n          .year(innerDate.value.year())\n          .month(innerDate.value.month())\n          .date(innerDate.value.date())\n        userInputTime.value = null\n        timePickerVisible.value = false\n        emit(innerDate.value, true)\n      }\n    }\n\n    const handleVisibleDateChange = (value) => {\n      const newDate = dayjs(value, dateFormat.value).locale(lang.value)\n      if (newDate.isValid()) {\n        if (disabledDate && disabledDate(newDate.toDate())) {\n          return\n        }\n        innerDate.value = newDate\n          .hour(innerDate.value.hour())\n          .minute(innerDate.value.minute())\n          .second(innerDate.value.second())\n        userInputDate.value = null\n        emit(innerDate.value, true)\n      }\n    }\n\n    const isValidValue = (date: unknown) => {\n      return (\n        dayjs.isDayjs(date) &&\n        date.isValid() &&\n        (disabledDate ? !disabledDate(date.toDate()) : true)\n      )\n    }\n\n    const formatToString = (value) => {\n      if (selectionMode.value === 'dates') {\n        return value.map((_) => _.format(props.format))\n      }\n      return value.format(props.format)\n    }\n\n    const parseUserInput = (value) => {\n      return dayjs(value, props.format).locale(lang.value)\n    }\n\n    const getDefaultValue = () => {\n      const parseDate = dayjs(defaultValue).locale(lang.value)\n      if (!defaultValue) {\n        const defaultTimeDValue = defaultTimeD.value\n        return dayjs()\n          .hour(defaultTimeDValue.hour())\n          .minute(defaultTimeDValue.minute())\n          .second(defaultTimeDValue.second())\n          .locale(lang.value)\n      }\n      return parseDate\n    }\n\n    const handleKeydown = (event) => {\n      const { code, keyCode } = event\n      const list = [\n        EVENT_CODE.up,\n        EVENT_CODE.down,\n        EVENT_CODE.left,\n        EVENT_CODE.right,\n      ]\n      if (props.visible && !timePickerVisible.value) {\n        if (list.includes(code)) {\n          handleKeyControl(keyCode)\n          event.stopPropagation()\n          event.preventDefault()\n        }\n        if (\n          code === EVENT_CODE.enter &&\n          userInputDate.value === null &&\n          userInputTime.value === null\n        ) {\n          // Enter\n          emit(innerDate, false)\n        }\n      }\n    }\n\n    const handleKeyControl = (keyCode) => {\n      const mapping = {\n        year: {\n          38: -4,\n          40: 4,\n          37: -1,\n          39: 1,\n          offset: (date, step) => date.setFullYear(date.getFullYear() + step),\n        },\n        month: {\n          38: -4,\n          40: 4,\n          37: -1,\n          39: 1,\n          offset: (date, step) => date.setMonth(date.getMonth() + step),\n        },\n        week: {\n          38: -1,\n          40: 1,\n          37: -1,\n          39: 1,\n          offset: (date, step) => date.setDate(date.getDate() + step * 7),\n        },\n        day: {\n          38: -7,\n          40: 7,\n          37: -1,\n          39: 1,\n          offset: (date, step) => date.setDate(date.getDate() + step),\n        },\n      }\n\n      const newDate = innerDate.value.toDate()\n      while (Math.abs(innerDate.value.diff(newDate, 'year', true)) < 1) {\n        const map = mapping[selectionMode.value]\n        map.offset(newDate, map[keyCode])\n        if (disabledDate && disabledDate(newDate)) {\n          continue\n        }\n        const result = dayjs(newDate).locale(lang.value)\n        innerDate.value = result\n        ctx.emit('pick', result, true)\n        break\n      }\n    }\n\n    ctx.emit('set-picker-option', ['isValidValue', isValidValue])\n    ctx.emit('set-picker-option', ['formatToString', formatToString])\n    ctx.emit('set-picker-option', ['parseUserInput', parseUserInput])\n    ctx.emit('set-picker-option', ['handleKeydown', handleKeydown])\n\n    watch(\n      () => props.parsedValue,\n      (val) => {\n        if (val) {\n          if (selectionMode.value === 'dates') return\n          if (Array.isArray(val)) return\n          innerDate.value = val\n        } else {\n          innerDate.value = getDefaultValue()\n        }\n      },\n      { immediate: true }\n    )\n\n    return {\n      handleTimePick,\n      handleTimePickClose,\n      onTimePickerInputFocus,\n      timePickerVisible,\n      visibleTime,\n      visibleDate,\n      showTime,\n      changeToNow,\n      onConfirm,\n      footerVisible,\n      handleYearPick,\n      showMonthPicker,\n      showYearPicker,\n      handleMonthPick,\n      hasShortcuts,\n      shortcuts,\n      arrowControl,\n      disabledDate,\n      cellClassName,\n      selectionMode,\n      handleShortcutClick,\n      prevYear_,\n      nextYear_,\n      prevMonth_,\n      nextMonth_,\n      innerDate,\n      t,\n      yearLabel,\n      currentView,\n      month,\n      handleDatePick,\n      handleVisibleTimeChange,\n      handleVisibleDateChange,\n      timeFormat,\n      userInputTime,\n      userInputDate,\n    }\n  },\n})\n</script>\n"],"names":["_createElementVNode"],"mappings":";;;;;;EAY+B;;;;;;EAYF;;qBACb,KAAK,EAAC,6BAA6B;;;;;;sBAuFtC,KAAK,EAAC;eA4Bb,KAAK,EAAC;;;;;;;;;;;;;;;;;;;;;;;;;iDAjIqB;;;;;;gBAKvB;;;;;;;iCAOJ;;;cAEI;;;;uBAIS;yBACC;;;;6CAIV;;;;;2BAQY;;4BAEC;;;;;;iCAMM;uBACVA;;;;;;;wBAIX;;;;;;;gBASQ;;;;;YAKJ;gCAAS,CAAgB;;;;;;;gBAIrB;;;;;YAKJ;;gBAAS;;;;;;;;;YAIT,MAAM;YACL;6BACG;0BAEN;YAEE;YACA,KAAK;YAEJ,OAAK;;;;;gBAIF;;;;;YAKJ;gCAAS,CAAiB;;;;;;;gBAItB;;;;;YAKJ;;;;;;;;;;;;;;;;kCAMiB;;;+BAGH;;;;;6BAGhB;;oBAEO,EAAE;;;;;;;;;sBAOA;;;0CAGe;;;;;;;;QAW1B,IAAI,EAAC;QACL;QACA,OAAM;;;yBAGN;;;;;;;MAEF;;;;;"}
+{"version":3,"file":"panel-date-pick.vue_vue_type_template_id_78e07aa7_lang.mjs","sources":["../../../../../../../packages/components/date-picker/src/date-picker-com/panel-date-pick.vue?vue&type=template&id=78e07aa7&lang.js"],"sourcesContent":["<template>\n  <div\n    class=\"el-picker-panel el-date-picker\"\n    :class=\"[\n      {\n        'has-sidebar': $slots.sidebar || hasShortcuts,\n        'has-time': showTime,\n      },\n    ]\"\n  >\n    <div class=\"el-picker-panel__body-wrapper\">\n      <slot name=\"sidebar\" class=\"el-picker-panel__sidebar\"></slot>\n      <div v-if=\"hasShortcuts\" class=\"el-picker-panel__sidebar\">\n        <button\n          v-for=\"(shortcut, key) in shortcuts\"\n          :key=\"key\"\n          type=\"button\"\n          class=\"el-picker-panel__shortcut\"\n          @click=\"handleShortcutClick(shortcut)\"\n        >\n          {{ shortcut.text }}\n        </button>\n      </div>\n      <div class=\"el-picker-panel__body\">\n        <div v-if=\"showTime\" class=\"el-date-picker__time-header\">\n          <span class=\"el-date-picker__editor-wrap\">\n            <el-input\n              :placeholder=\"t('el.datepicker.selectDate')\"\n              :model-value=\"visibleDate\"\n              size=\"small\"\n              @input=\"(val) => (userInputDate = val)\"\n              @change=\"handleVisibleDateChange\"\n            />\n          </span>\n          <span\n            v-clickoutside=\"handleTimePickClose\"\n            class=\"el-date-picker__editor-wrap\"\n          >\n            <el-input\n              :placeholder=\"t('el.datepicker.selectTime')\"\n              :model-value=\"visibleTime\"\n              size=\"small\"\n              @focus=\"onTimePickerInputFocus\"\n              @input=\"(val) => (userInputTime = val)\"\n              @change=\"handleVisibleTimeChange\"\n            />\n            <time-pick-panel\n              :visible=\"timePickerVisible\"\n              :format=\"timeFormat\"\n              :time-arrow-control=\"arrowControl\"\n              :parsed-value=\"innerDate\"\n              @pick=\"handleTimePick\"\n            />\n          </span>\n        </div>\n        <div\n          v-show=\"currentView !== 'time'\"\n          class=\"el-date-picker__header\"\n          :class=\"{\n            'el-date-picker__header--bordered':\n              currentView === 'year' || currentView === 'month',\n          }\"\n        >\n          <button\n            type=\"button\"\n            :aria-label=\"t(`el.datepicker.prevYear`)\"\n            class=\"el-picker-panel__icon-btn el-date-picker__prev-btn d-arrow-left\"\n            @click=\"prevYear_\"\n          >\n            <el-icon><d-arrow-left /></el-icon>\n          </button>\n          <button\n            v-show=\"currentView === 'date'\"\n            type=\"button\"\n            :aria-label=\"t(`el.datepicker.prevMonth`)\"\n            class=\"el-picker-panel__icon-btn el-date-picker__prev-btn arrow-left\"\n            @click=\"prevMonth_\"\n          >\n            <el-icon><arrow-left /></el-icon>\n          </button>\n          <span\n            role=\"button\"\n            class=\"el-date-picker__header-label\"\n            @click=\"showYearPicker\"\n            >{{ yearLabel }}</span\n          >\n          <span\n            v-show=\"currentView === 'date'\"\n            role=\"button\"\n            class=\"el-date-picker__header-label\"\n            :class=\"{ active: currentView === 'month' }\"\n            @click=\"showMonthPicker\"\n            >{{ t(`el.datepicker.month${month + 1}`) }}</span\n          >\n          <button\n            type=\"button\"\n            :aria-label=\"t(`el.datepicker.nextYear`)\"\n            class=\"el-picker-panel__icon-btn el-date-picker__next-btn d-arrow-right\"\n            @click=\"nextYear_\"\n          >\n            <el-icon><d-arrow-right /></el-icon>\n          </button>\n          <button\n            v-show=\"currentView === 'date'\"\n            type=\"button\"\n            :aria-label=\"t(`el.datepicker.nextMonth`)\"\n            class=\"el-picker-panel__icon-btn el-date-picker__next-btn arrow-right\"\n            @click=\"nextMonth_\"\n          >\n            <el-icon><arrow-right /></el-icon>\n          </button>\n        </div>\n        <div class=\"el-picker-panel__content\">\n          <date-table\n            v-if=\"currentView === 'date'\"\n            :selection-mode=\"selectionMode\"\n            :date=\"innerDate\"\n            :parsed-value=\"parsedValue\"\n            :disabled-date=\"disabledDate\"\n            @pick=\"handleDatePick\"\n          />\n          <year-table\n            v-if=\"currentView === 'year'\"\n            :date=\"innerDate\"\n            :disabled-date=\"disabledDate\"\n            :parsed-value=\"parsedValue\"\n            @pick=\"handleYearPick\"\n          />\n          <month-table\n            v-if=\"currentView === 'month'\"\n            :date=\"innerDate\"\n            :parsed-value=\"parsedValue\"\n            :disabled-date=\"disabledDate\"\n            @pick=\"handleMonthPick\"\n          />\n        </div>\n      </div>\n    </div>\n    <div\n      v-show=\"footerVisible && currentView === 'date'\"\n      class=\"el-picker-panel__footer\"\n    >\n      <el-button\n        v-show=\"selectionMode !== 'dates'\"\n        size=\"small\"\n        type=\"text\"\n        class=\"el-picker-panel__link-btn\"\n        @click=\"changeToNow\"\n      >\n        {{ t('el.datepicker.now') }}\n      </el-button>\n      <el-button\n        plain\n        size=\"small\"\n        class=\"el-picker-panel__link-btn\"\n        @click=\"onConfirm\"\n      >\n        {{ t('el.datepicker.confirm') }}\n      </el-button>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, inject, ref, watch } from 'vue'\nimport dayjs from 'dayjs'\nimport ElButton from '@element-plus/components/button'\nimport { ClickOutside } from '@element-plus/directives'\nimport { useLocale } from '@element-plus/hooks'\nimport ElInput from '@element-plus/components/input'\nimport {\n  extractDateFormat,\n  extractTimeFormat,\n  TimePickPanel,\n} from '@element-plus/components/time-picker'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { EVENT_CODE } from '@element-plus/utils/aria'\nimport { isValidDatePickType } from '@element-plus/utils/validators'\nimport {\n  DArrowLeft,\n  ArrowLeft,\n  DArrowRight,\n  ArrowRight,\n} from '@element-plus/icons-vue'\nimport { TOOLTIP_INJECTION_KEY } from '@element-plus/components/tooltip'\nimport DateTable from './basic-date-table.vue'\nimport MonthTable from './basic-month-table.vue'\nimport YearTable from './basic-year-table.vue'\n\nimport type { PropType } from 'vue'\nimport type { ConfigType, Dayjs } from 'dayjs'\nimport type { IDatePickerType } from '../date-picker.type'\n\n// todo\n/* eslint-disable-next-line */\nconst timeWithinRange = (_: ConfigType, __: any, ___: string) => true\n\nexport default defineComponent({\n  components: {\n    DateTable,\n    ElInput,\n    ElButton,\n    ElIcon,\n    TimePickPanel,\n    MonthTable,\n    YearTable,\n    DArrowLeft,\n    ArrowLeft,\n    DArrowRight,\n    ArrowRight,\n  },\n\n  directives: { clickoutside: ClickOutside },\n  props: {\n    visible: {\n      type: Boolean,\n      default: false,\n    },\n    parsedValue: {\n      type: [Object, Array] as PropType<Dayjs | Dayjs[]>,\n    },\n    format: {\n      type: String,\n      default: '',\n    },\n    type: {\n      type: String as PropType<IDatePickerType>,\n      required: true,\n      validator: isValidDatePickType,\n    },\n  },\n  emits: ['pick', 'set-picker-option'],\n  setup(props, ctx) {\n    const { t, lang } = useLocale()\n    const pickerBase = inject('EP_PICKER_BASE') as any\n    const popper = inject(TOOLTIP_INJECTION_KEY)\n    const {\n      shortcuts,\n      disabledDate,\n      cellClassName,\n      defaultTime,\n      defaultValue,\n      arrowControl,\n    } = pickerBase.props\n\n    const innerDate = ref(dayjs().locale(lang.value))\n\n    const defaultTimeD = computed(() => {\n      return dayjs(defaultTime).locale(lang.value)\n    })\n\n    const month = computed(() => {\n      return innerDate.value.month()\n    })\n\n    const year = computed(() => {\n      return innerDate.value.year()\n    })\n\n    const selectableRange = ref([])\n    const userInputDate = ref(null)\n    const userInputTime = ref(null)\n    // todo update to disableHour\n    const checkDateWithinRange = (date: ConfigType) => {\n      return selectableRange.value.length > 0\n        ? timeWithinRange(\n            date,\n            selectableRange.value,\n            props.format || 'HH:mm:ss'\n          )\n        : true\n    }\n    const formatEmit = (emitDayjs: Dayjs) => {\n      if (defaultTime && !visibleTime.value) {\n        return defaultTimeD.value\n          .year(emitDayjs.year())\n          .month(emitDayjs.month())\n          .date(emitDayjs.date())\n      }\n      if (showTime.value) return emitDayjs.millisecond(0)\n      return emitDayjs.startOf('day')\n    }\n    const emit = (value, ...args) => {\n      if (!value) {\n        ctx.emit('pick', value, ...args)\n      } else if (Array.isArray(value)) {\n        const dates = value.map(formatEmit)\n        ctx.emit('pick', dates, ...args)\n      } else {\n        ctx.emit('pick', formatEmit(value), ...args)\n      }\n      userInputDate.value = null\n      userInputTime.value = null\n    }\n    const handleDatePick = (value: Dayjs) => {\n      if (selectionMode.value === 'day') {\n        let newDate = props.parsedValue\n          ? (props.parsedValue as Dayjs)\n              .year(value.year())\n              .month(value.month())\n              .date(value.date())\n          : value\n        // change default time while out of selectableRange\n        if (!checkDateWithinRange(newDate)) {\n          newDate = (selectableRange.value[0][0] as Dayjs)\n            .year(value.year())\n            .month(value.month())\n            .date(value.date())\n        }\n        innerDate.value = newDate\n        emit(newDate, showTime.value)\n      } else if (selectionMode.value === 'week') {\n        emit(value.date)\n      } else if (selectionMode.value === 'dates') {\n        emit(value, true) // set false to keep panel open\n      }\n    }\n    const prevMonth_ = () => {\n      innerDate.value = innerDate.value.subtract(1, 'month')\n    }\n\n    const nextMonth_ = () => {\n      innerDate.value = innerDate.value.add(1, 'month')\n    }\n\n    const prevYear_ = () => {\n      if (currentView.value === 'year') {\n        innerDate.value = innerDate.value.subtract(10, 'year')\n      } else {\n        innerDate.value = innerDate.value.subtract(1, 'year')\n      }\n    }\n\n    const nextYear_ = () => {\n      if (currentView.value === 'year') {\n        innerDate.value = innerDate.value.add(10, 'year')\n      } else {\n        innerDate.value = innerDate.value.add(1, 'year')\n      }\n    }\n\n    const currentView = ref('date')\n\n    const yearLabel = computed(() => {\n      const yearTranslation = t('el.datepicker.year')\n      if (currentView.value === 'year') {\n        const startYear = Math.floor(year.value / 10) * 10\n        if (yearTranslation) {\n          return `${startYear} ${yearTranslation} - ${\n            startYear + 9\n          } ${yearTranslation}`\n        }\n        return `${startYear} - ${startYear + 9}`\n      }\n      return `${year.value} ${yearTranslation}`\n    })\n\n    const handleShortcutClick = (shortcut) => {\n      const shortcutValue =\n        typeof shortcut.value === 'function' ? shortcut.value() : shortcut.value\n      if (shortcutValue) {\n        emit(dayjs(shortcutValue).locale(lang.value))\n        return\n      }\n      if (shortcut.onClick) {\n        shortcut.onClick(ctx)\n      }\n    }\n\n    const selectionMode = computed(() => {\n      if (['week', 'month', 'year', 'dates'].includes(props.type)) {\n        return props.type\n      }\n      return 'day'\n    })\n\n    watch(\n      () => selectionMode.value,\n      (val) => {\n        if (['month', 'year'].includes(val)) {\n          currentView.value = val\n          return\n        }\n        currentView.value = 'date'\n      },\n      { immediate: true }\n    )\n\n    watch(\n      () => currentView.value,\n      () => {\n        popper?.updatePopper()\n      }\n    )\n\n    const hasShortcuts = computed(() => !!shortcuts.length)\n\n    const handleMonthPick = (month) => {\n      innerDate.value = innerDate.value.startOf('month').month(month)\n      if (selectionMode.value === 'month') {\n        emit(innerDate.value)\n      } else {\n        currentView.value = 'date'\n      }\n    }\n\n    const handleYearPick = (year) => {\n      if (selectionMode.value === 'year') {\n        innerDate.value = innerDate.value.startOf('year').year(year)\n        emit(innerDate.value)\n      } else {\n        innerDate.value = innerDate.value.year(year)\n        currentView.value = 'month'\n      }\n    }\n\n    const showMonthPicker = () => {\n      currentView.value = 'month'\n    }\n\n    const showYearPicker = () => {\n      currentView.value = 'year'\n    }\n\n    const showTime = computed(\n      () => props.type === 'datetime' || props.type === 'datetimerange'\n    )\n\n    const footerVisible = computed(() => {\n      return showTime.value || selectionMode.value === 'dates'\n    })\n\n    const onConfirm = () => {\n      if (selectionMode.value === 'dates') {\n        emit(props.parsedValue)\n      } else {\n        // deal with the scenario where: user opens the date time picker, then confirm without doing anything\n        let result = props.parsedValue as Dayjs\n        if (!result) {\n          const defaultTimeD = dayjs(defaultTime).locale(lang.value)\n          const defaultValueD = getDefaultValue()\n          result = defaultTimeD\n            .year(defaultValueD.year())\n            .month(defaultValueD.month())\n            .date(defaultValueD.date())\n        }\n        innerDate.value = result\n        emit(result)\n      }\n    }\n\n    const changeToNow = () => {\n      // NOTE: not a permanent solution\n      //       consider disable \"now\" button in the future\n      const now = dayjs().locale(lang.value)\n      const nowDate = now.toDate()\n      if (\n        (!disabledDate || !disabledDate(nowDate)) &&\n        checkDateWithinRange(nowDate)\n      ) {\n        innerDate.value = dayjs().locale(lang.value)\n        emit(innerDate.value)\n      }\n    }\n\n    const timeFormat = computed(() => {\n      return extractTimeFormat(props.format)\n    })\n\n    const dateFormat = computed(() => {\n      return extractDateFormat(props.format)\n    })\n\n    const visibleTime = computed(() => {\n      if (userInputTime.value) return userInputTime.value\n      if (!props.parsedValue && !defaultValue) return\n      return ((props.parsedValue || innerDate.value) as Dayjs).format(\n        timeFormat.value\n      )\n    })\n\n    const visibleDate = computed(() => {\n      if (userInputDate.value) return userInputDate.value\n      if (!props.parsedValue && !defaultValue) return\n      return ((props.parsedValue || innerDate.value) as Dayjs).format(\n        dateFormat.value\n      )\n    })\n\n    const timePickerVisible = ref(false)\n    const onTimePickerInputFocus = () => {\n      timePickerVisible.value = true\n    }\n    const handleTimePickClose = () => {\n      timePickerVisible.value = false\n    }\n\n    const handleTimePick = (value, visible, first) => {\n      const newDate = props.parsedValue\n        ? (props.parsedValue as Dayjs)\n            .hour(value.hour())\n            .minute(value.minute())\n            .second(value.second())\n        : value\n      innerDate.value = newDate\n      emit(innerDate.value, true)\n      if (!first) {\n        timePickerVisible.value = visible\n      }\n    }\n\n    const handleVisibleTimeChange = (value) => {\n      const newDate = dayjs(value, timeFormat.value).locale(lang.value)\n      if (newDate.isValid() && checkDateWithinRange(newDate)) {\n        innerDate.value = newDate\n          .year(innerDate.value.year())\n          .month(innerDate.value.month())\n          .date(innerDate.value.date())\n        userInputTime.value = null\n        timePickerVisible.value = false\n        emit(innerDate.value, true)\n      }\n    }\n\n    const handleVisibleDateChange = (value) => {\n      const newDate = dayjs(value, dateFormat.value).locale(lang.value)\n      if (newDate.isValid()) {\n        if (disabledDate && disabledDate(newDate.toDate())) {\n          return\n        }\n        innerDate.value = newDate\n          .hour(innerDate.value.hour())\n          .minute(innerDate.value.minute())\n          .second(innerDate.value.second())\n        userInputDate.value = null\n        emit(innerDate.value, true)\n      }\n    }\n\n    const isValidValue = (date: unknown) => {\n      return (\n        dayjs.isDayjs(date) &&\n        date.isValid() &&\n        (disabledDate ? !disabledDate(date.toDate()) : true)\n      )\n    }\n\n    const formatToString = (value) => {\n      if (selectionMode.value === 'dates') {\n        return value.map((_) => _.format(props.format))\n      }\n      return value.format(props.format)\n    }\n\n    const parseUserInput = (value) => {\n      return dayjs(value, props.format).locale(lang.value)\n    }\n\n    const getDefaultValue = () => {\n      const parseDate = dayjs(defaultValue).locale(lang.value)\n      if (!defaultValue) {\n        const defaultTimeDValue = defaultTimeD.value\n        return dayjs()\n          .hour(defaultTimeDValue.hour())\n          .minute(defaultTimeDValue.minute())\n          .second(defaultTimeDValue.second())\n          .locale(lang.value)\n      }\n      return parseDate\n    }\n\n    const handleKeydown = (event) => {\n      const { code, keyCode } = event\n      const list = [\n        EVENT_CODE.up,\n        EVENT_CODE.down,\n        EVENT_CODE.left,\n        EVENT_CODE.right,\n      ]\n      if (props.visible && !timePickerVisible.value) {\n        if (list.includes(code)) {\n          handleKeyControl(keyCode)\n          event.stopPropagation()\n          event.preventDefault()\n        }\n        if (\n          code === EVENT_CODE.enter &&\n          userInputDate.value === null &&\n          userInputTime.value === null\n        ) {\n          // Enter\n          emit(innerDate, false)\n        }\n      }\n    }\n\n    const handleKeyControl = (keyCode) => {\n      const mapping = {\n        year: {\n          38: -4,\n          40: 4,\n          37: -1,\n          39: 1,\n          offset: (date, step) => date.setFullYear(date.getFullYear() + step),\n        },\n        month: {\n          38: -4,\n          40: 4,\n          37: -1,\n          39: 1,\n          offset: (date, step) => date.setMonth(date.getMonth() + step),\n        },\n        week: {\n          38: -1,\n          40: 1,\n          37: -1,\n          39: 1,\n          offset: (date, step) => date.setDate(date.getDate() + step * 7),\n        },\n        day: {\n          38: -7,\n          40: 7,\n          37: -1,\n          39: 1,\n          offset: (date, step) => date.setDate(date.getDate() + step),\n        },\n      }\n\n      const newDate = innerDate.value.toDate()\n      while (Math.abs(innerDate.value.diff(newDate, 'year', true)) < 1) {\n        const map = mapping[selectionMode.value]\n        map.offset(newDate, map[keyCode])\n        if (disabledDate && disabledDate(newDate)) {\n          continue\n        }\n        const result = dayjs(newDate).locale(lang.value)\n        innerDate.value = result\n        ctx.emit('pick', result, true)\n        break\n      }\n    }\n\n    ctx.emit('set-picker-option', ['isValidValue', isValidValue])\n    ctx.emit('set-picker-option', ['formatToString', formatToString])\n    ctx.emit('set-picker-option', ['parseUserInput', parseUserInput])\n    ctx.emit('set-picker-option', ['handleKeydown', handleKeydown])\n\n    watch(\n      () => props.parsedValue,\n      (val) => {\n        if (val) {\n          if (selectionMode.value === 'dates') return\n          if (Array.isArray(val)) return\n          innerDate.value = val\n        } else {\n          innerDate.value = getDefaultValue()\n        }\n      },\n      { immediate: true }\n    )\n\n    return {\n      handleTimePick,\n      handleTimePickClose,\n      onTimePickerInputFocus,\n      timePickerVisible,\n      visibleTime,\n      visibleDate,\n      showTime,\n      changeToNow,\n      onConfirm,\n      footerVisible,\n      handleYearPick,\n      showMonthPicker,\n      showYearPicker,\n      handleMonthPick,\n      hasShortcuts,\n      shortcuts,\n      arrowControl,\n      disabledDate,\n      cellClassName,\n      selectionMode,\n      handleShortcutClick,\n      prevYear_,\n      nextYear_,\n      prevMonth_,\n      nextMonth_,\n      innerDate,\n      t,\n      yearLabel,\n      currentView,\n      month,\n      handleDatePick,\n      handleVisibleTimeChange,\n      handleVisibleDateChange,\n      timeFormat,\n      userInputTime,\n      userInputDate,\n    }\n  },\n})\n</script>\n"],"names":["_createElementVNode"],"mappings":";;;;;;EAY+B;;;;;;EAYF;;qBACb,KAAK,EAAC,6BAA6B;;;;;;sBAuFtC,KAAK,EAAC;eA4Bb,KAAK,EAAC;;;;;;;;;;;;;;;;;;;;;;;;;iDAjIqB;;;;;;gBAKvB;;;;;;;iCAOJ;;;cAEI;;;;uBAIS;yBACC;;;;6CAIV;;;;;2BAQY;;4BAEC;;;;;;iCAMM;uBACVA;;;;;;;wBAIX;;;;;;;gBASQ;;;;;YAKJ;gCAAS,CAAgB;;;;;;;gBAIrB;;;;;YAKJ;;gBAAS;;;;;;;;;YAIT,MAAM;YACL;6BACG;0BAEN;YAEE;YACA,KAAK;YAEJ,OAAK;;;;;gBAIF;;;;;YAKJ;gCAAS,CAAiB;;;;;;;gBAItB;;;;;YAKJ;;;;;;;;;;;;;;;;kCAMiB;;;+BAGH;;;;;6BAGhB;;oBAEO,EAAE;;;;;;;;;sBAOA;;;0CAGe;;;;;;;;QAW1B,IAAI,EAAC;QACL;QACA,OAAM;;;yBAGN;;;;;;;MAEF;;;;;"}

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

@@ -95,8 +95,8 @@ export declare const ElDescriptions: import("../../utils/types").SFCWithInstall<
         span: number;
         width: string | number;
         align: string;
-        minWidth: string | number;
         className: string;
+        minWidth: string | number;
         labelAlign: string;
         labelClassName: string;
     } & {}>, {
@@ -104,8 +104,8 @@ export declare const ElDescriptions: import("../../utils/types").SFCWithInstall<
         span: number;
         width: string | number;
         align: string;
-        minWidth: string | number;
         className: string;
+        minWidth: string | number;
         labelAlign: string;
         labelClassName: string;
     }>;
@@ -158,8 +158,8 @@ export declare const ElDescriptionsItem: import("../../utils/types").SFCWithInst
     span: number;
     width: string | number;
     align: string;
-    minWidth: string | number;
     className: string;
+    minWidth: string | number;
     labelAlign: string;
     labelClassName: string;
 } & {}>, {
@@ -167,8 +167,8 @@ export declare const ElDescriptionsItem: import("../../utils/types").SFCWithInst
     span: number;
     width: string | number;
     align: string;
-    minWidth: string | number;
     className: string;
+    minWidth: string | number;
     labelAlign: string;
     labelClassName: string;
 }>>;

package/es/components/descriptions/src/description-item.d.ts

@@ -45,8 +45,8 @@ declare const _default: import("vue").DefineComponent<{
     span: number;
     width: string | number;
     align: string;
-    minWidth: string | number;
     className: string;
+    minWidth: string | number;
     labelAlign: string;
     labelClassName: string;
 } & {}>, {
@@ -54,8 +54,8 @@ declare const _default: import("vue").DefineComponent<{
     span: number;
     width: string | number;
     align: string;
-    minWidth: string | number;
     className: string;
+    minWidth: string | number;
     labelAlign: string;
     labelClassName: string;
 }>;

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

@@ -107,6 +107,7 @@ export declare const ElDropdown: import("../../utils/types").SFCWithInstall<impo
             stopPopperMouseEvent: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
             showAfter: number;
             hideAfter: number;
+            appendTo: import("../../utils/props").BuildPropType<import("../../utils/props").PropWrapper<string | HTMLElement>, unknown, unknown>;
             rawContent: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
             persistent: boolean;
             teleported: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
@@ -126,6 +127,7 @@ export declare const ElDropdown: import("../../utils/types").SFCWithInstall<impo
             trigger?: unknown;
             virtualRef?: unknown;
             virtualTriggering?: unknown;
+            appendTo?: unknown;
             content?: unknown;
             rawContent?: unknown;
             persistent?: unknown;
@@ -223,6 +225,7 @@ export declare const ElDropdown: import("../../utils/types").SFCWithInstall<impo
             stopPopperMouseEvent: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
             showAfter: number;
             hideAfter: number;
+            appendTo: import("../../utils/props").BuildPropType<import("../../utils/props").PropWrapper<string | HTMLElement>, unknown, unknown>;
             rawContent: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
             persistent: boolean;
             teleported: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
@@ -237,7 +240,7 @@ export declare const ElDropdown: import("../../utils/types").SFCWithInstall<impo
             virtualTriggering?: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown> | undefined;
         }> & {
             [x: string & `on${string}`]: ((...args: any[]) => any) | undefined;
-        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "disabled" | "style" | "transition" | "offset" | "visible" | "content" | "effect" | "arrowOffset" | "boundariesPadding" | "fallbackPlacements" | "gpuAcceleration" | "placement" | "popperOptions" | "strategy" | "className" | "enterable" | "pure" | "popperClass" | "popperStyle" | "referenceEl" | "stopPopperMouseEvent" | "showAfter" | "hideAfter" | "rawContent" | "persistent" | "teleported" | "trigger" | "virtualRef" | "virtualTriggering" | "openDelay" | "visibleArrow" | "showArrow">;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "disabled" | "style" | "transition" | "offset" | "visible" | "content" | "effect" | "arrowOffset" | "boundariesPadding" | "fallbackPlacements" | "gpuAcceleration" | "placement" | "popperOptions" | "strategy" | "className" | "enterable" | "pure" | "popperClass" | "popperStyle" | "referenceEl" | "stopPopperMouseEvent" | "showAfter" | "hideAfter" | "appendTo" | "rawContent" | "persistent" | "teleported" | "trigger" | "virtualRef" | "virtualTriggering" | "openDelay" | "visibleArrow" | "showArrow">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -261,6 +264,7 @@ export declare const ElDropdown: import("../../utils/types").SFCWithInstall<impo
             trigger?: unknown;
             virtualRef?: unknown;
             virtualTriggering?: unknown;
+            appendTo?: unknown;
             content?: unknown;
             rawContent?: unknown;
             persistent?: unknown;
@@ -358,6 +362,7 @@ export declare const ElDropdown: import("../../utils/types").SFCWithInstall<impo
             stopPopperMouseEvent: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
             showAfter: number;
             hideAfter: number;
+            appendTo: import("../../utils/props").BuildPropType<import("../../utils/props").PropWrapper<string | HTMLElement>, unknown, unknown>;
             rawContent: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
             persistent: boolean;
             teleported: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
@@ -489,6 +494,7 @@ export declare const ElDropdown: import("../../utils/types").SFCWithInstall<impo
             stopPopperMouseEvent: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
             showAfter: number;
             hideAfter: number;
+            appendTo: import("../../utils/props").BuildPropType<import("../../utils/props").PropWrapper<string | HTMLElement>, unknown, unknown>;
             rawContent: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
             persistent: boolean;
             teleported: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
@@ -528,6 +534,7 @@ export declare const ElDropdown: import("../../utils/types").SFCWithInstall<impo
         trigger?: unknown;
         virtualRef?: unknown;
         virtualTriggering?: unknown;
+        appendTo?: unknown;
         content?: unknown;
         rawContent?: unknown;
         persistent?: unknown;
@@ -625,6 +632,7 @@ export declare const ElDropdown: import("../../utils/types").SFCWithInstall<impo
         stopPopperMouseEvent: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
         showAfter: number;
         hideAfter: number;
+        appendTo: import("../../utils/props").BuildPropType<import("../../utils/props").PropWrapper<string | HTMLElement>, unknown, unknown>;
         rawContent: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
         persistent: boolean;
         teleported: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
@@ -704,9 +712,9 @@ export declare const ElDropdown: import("../../utils/types").SFCWithInstall<impo
 } & {
     size: string;
     effect: string;
-    maxHeight: import("../../utils/props").BuildPropType<import("../../utils/props").PropWrapper<string | number>, unknown, unknown>;
     placement: import("../../utils/props").BuildPropType<import("../../utils/props").PropWrapper<import("@popperjs/core").Placement>, unknown, unknown>;
     popperClass: string;
+    maxHeight: import("../../utils/props").BuildPropType<import("../../utils/props").PropWrapper<string | number>, unknown, unknown>;
     trigger: "click" | "contextmenu" | "focus" | "hover" | ("click" | "contextmenu" | "focus" | "hover")[];
     tabindex: import("../../utils/props").BuildPropType<import("../../utils/props").PropWrapper<string | number>, unknown, unknown>;
     hideOnClick: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
@@ -724,9 +732,9 @@ export declare const ElDropdown: import("../../utils/types").SFCWithInstall<impo
     type: import("../../utils/props").BuildPropType<import("../../utils/props").PropWrapper<import("../../utils/props").BuildPropType<StringConstructor, "" | "default" | "primary" | "success" | "warning" | "info" | "danger" | "text", unknown>>, unknown, unknown>;
     size: string;
     effect: string;
-    maxHeight: import("../../utils/props").BuildPropType<import("../../utils/props").PropWrapper<string | number>, unknown, unknown>;
     placement: import("../../utils/props").BuildPropType<import("../../utils/props").PropWrapper<import("@popperjs/core").Placement>, unknown, unknown>;
     popperClass: string;
+    maxHeight: import("../../utils/props").BuildPropType<import("../../utils/props").PropWrapper<string | number>, unknown, unknown>;
     trigger: "click" | "contextmenu" | "focus" | "hover" | ("click" | "contextmenu" | "focus" | "hover")[];
     tabindex: import("../../utils/props").BuildPropType<import("../../utils/props").PropWrapper<string | number>, unknown, unknown>;
     loop: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
@@ -742,11 +750,11 @@ export declare const ElDropdown: import("../../utils/types").SFCWithInstall<impo
         readonly textValue: StringConstructor;
         readonly icon: import("../../utils/props").BuildPropReturn<import("../../utils/props").PropWrapper<string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>>, unknown, unknown, unknown, unknown>;
     }, {
-        handleClick: (e: UIEvent) => void;
+        handleClick: (event: PointerEvent) => void;
         handlePointerMove: (event: PointerEvent) => void;
         handlePointerLeave: (event: PointerEvent) => void;
         textContent: import("vue").ComputedRef<string>;
-    }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("pointerleave" | "pointermove")[], "pointerleave" | "pointermove", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+    }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("click" | "pointerleave" | "pointermove")[], "click" | "pointerleave" | "pointermove", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
         readonly command?: unknown;
         readonly disabled?: unknown;
         readonly divided?: unknown;
@@ -760,6 +768,7 @@ export declare const ElDropdown: import("../../utils/types").SFCWithInstall<impo
         icon?: import("../../utils/props").BuildPropType<import("../../utils/props").PropWrapper<string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>>, unknown, unknown> | undefined;
         textValue?: string | undefined;
     }> & {
+        onClick?: ((...args: any[]) => any) | undefined;
         onPointermove?: ((...args: any[]) => any) | undefined;
         onPointerleave?: ((...args: any[]) => any) | undefined;
     }, {
@@ -774,6 +783,7 @@ export declare const ElDropdown: import("../../utils/types").SFCWithInstall<impo
         size: import("vue").ComputedRef<string> | undefined;
         rovingFocusGroupRootStyle: import("vue").Ref<import("vue").StyleValue>;
         tabIndex: import("vue").Ref<number>;
+        dropdownKls: import("vue").ComputedRef<string[]>;
         dropdownListWrapperRef: (el: Element | import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null) => void;
         handleKeydown: (e: KeyboardEvent) => void;
         onBlur: (e: Event) => void;
@@ -795,11 +805,11 @@ export declare const ElDropdownItem: import("../../utils/types").SFCWithInstall<
     readonly textValue: StringConstructor;
     readonly icon: import("../../utils/props").BuildPropReturn<import("../../utils/props").PropWrapper<string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>>, unknown, unknown, unknown, unknown>;
 }, {
-    handleClick: (e: UIEvent) => void;
+    handleClick: (event: PointerEvent) => void;
     handlePointerMove: (event: PointerEvent) => void;
     handlePointerLeave: (event: PointerEvent) => void;
     textContent: import("vue").ComputedRef<string>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("pointerleave" | "pointermove")[], "pointerleave" | "pointermove", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("click" | "pointerleave" | "pointermove")[], "click" | "pointerleave" | "pointermove", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     readonly command?: unknown;
     readonly disabled?: unknown;
     readonly divided?: unknown;
@@ -813,6 +823,7 @@ export declare const ElDropdownItem: import("../../utils/types").SFCWithInstall<
     icon?: import("../../utils/props").BuildPropType<import("../../utils/props").PropWrapper<string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>>, unknown, unknown> | undefined;
     textValue?: string | undefined;
 }> & {
+    onClick?: ((...args: any[]) => any) | undefined;
     onPointermove?: ((...args: any[]) => any) | undefined;
     onPointerleave?: ((...args: any[]) => any) | undefined;
 }, {
@@ -827,6 +838,7 @@ export declare const ElDropdownMenu: import("../../utils/types").SFCWithInstall<
     size: import("vue").ComputedRef<string> | undefined;
     rovingFocusGroupRootStyle: import("vue").Ref<import("vue").StyleValue>;
     tabIndex: import("vue").Ref<number>;
+    dropdownKls: import("vue").ComputedRef<string[]>;
     dropdownListWrapperRef: (el: Element | import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null) => void;
     handleKeydown: (e: KeyboardEvent) => void;
     onBlur: (e: Event) => void;

package/es/components/dropdown/src/dropdown-item-impl.vue_vue_type_script_lang.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-item-impl.vue_vue_type_script_lang.mjs","sources":["../../../../../../packages/components/dropdown/src/dropdown-item-impl.vue"],"sourcesContent":["<template>\n  <div\n    :ref=\"itemRef\"\n    v-bind=\"dataset\"\n    :aria-disabled=\"disabled\"\n    :class=\"{\n      'el-dropdown-menu__item': true,\n      'is-disabled': disabled,\n      'el-dropdown-menu__item--divided': divided,\n    }\"\n    :tabindex=\"tabIndex\"\n    role=\"menuitem\"\n    @click=\"(e) => $emit('click', e)\"\n    @focus=\"handleFocus\"\n    @keydown=\"handleKeydown\"\n    @mousedown=\"handleMousedown\"\n    @pointermove=\"(e) => $emit('pointermove', e)\"\n    @pointerleave=\"(e) => $emit('pointerleave', e)\"\n  >\n    <el-icon v-if=\"icon\"><component :is=\"icon\" /></el-icon>\n    <slot />\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, inject } from 'vue'\nimport {\n  ROVING_FOCUS_GROUP_ITEM_INJECTION_KEY,\n  ROVING_FOCUS_ITEM_COLLECTION_INJECTION_KEY,\n} from '@element-plus/components/roving-focus-group'\nimport { COLLECTION_ITEM_SIGN } from '@element-plus/components/collection'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { EVENT_CODE } from '@element-plus/utils/aria'\nimport { composeEventHandlers, composeRefs } from '@element-plus/utils/dom'\nimport {\n  DROPDOWN_COLLECTION_ITEM_INJECTION_KEY,\n  dropdownItemProps,\n} from './dropdown'\n\nexport default defineComponent({\n  name: 'DropdownItemImpl',\n  components: {\n    ElIcon,\n  },\n  props: dropdownItemProps,\n  emits: ['pointermove', 'pointerleave', 'click'],\n  setup(_, { emit }) {\n    const { collectionItemRef: dropdownCollectionItemRef } = inject(\n      DROPDOWN_COLLECTION_ITEM_INJECTION_KEY,\n      undefined\n    )!\n\n    const { collectionItemRef: rovingFocusCollectionItemRef } = inject(\n      ROVING_FOCUS_ITEM_COLLECTION_INJECTION_KEY,\n      undefined\n    )!\n\n    const {\n      rovingFocusGroupItemRef,\n      tabIndex,\n      handleFocus,\n      handleKeydown: handleItemKeydown,\n      handleMousedown,\n    } = inject(ROVING_FOCUS_GROUP_ITEM_INJECTION_KEY, undefined)!\n\n    const itemRef = composeRefs(\n      dropdownCollectionItemRef,\n      rovingFocusCollectionItemRef,\n      rovingFocusGroupItemRef\n    )\n\n    const handleKeydown = composeEventHandlers((e: KeyboardEvent) => {\n      const { code } = e\n      if (code === EVENT_CODE.enter || code === EVENT_CODE.space) {\n        e.preventDefault()\n        e.stopImmediatePropagation()\n        emit('click', e)\n        return true\n      }\n    }, handleItemKeydown)\n\n    return {\n      itemRef,\n      dataset: {\n        [COLLECTION_ITEM_SIGN]: '',\n      },\n      tabIndex,\n      handleFocus,\n      handleKeydown,\n      handleMousedown,\n    }\n  },\n})\n</script>\n"],"names":[],"mappings":";;;;;;;;;;;AAqCA,aAAe;;AAEf,EAAE,UAAU;IACR,MAAM;GACP;OACI,EAAE;EACP;EACA,KAAK,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE;IACjB,MAAM,EAAE,iBAAiB,EAAE;IAC3B;IACA,MAAM;MACJ,uBAAuB;MACvB,QAAQ;;;MAGR,eAAe;QACb,MAAM,CAAC;UACL;IACN;;MAEE,IAAI;QACF,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,CAAC,CAAC;QACF,IAAI,CAAC;QACL,OAAO,IAAI;OACZ;wBACiB,CAAC,CAAC;;MAEpB,OAAO;MACP,OAAO,EAAE;QACP,CAAC,oBAAoB,GAAG,EAAE;OAC3B;;;MAGD,aAAa;MACb,eAAe;MACf;;;;;;"}
+{"version":3,"file":"dropdown-item-impl.vue_vue_type_script_lang.mjs","sources":["../../../../../../packages/components/dropdown/src/dropdown-item-impl.vue"],"sourcesContent":["<template>\n  <div v-if=\"divided\" class=\"el-dropdown-menu__item--divided\"></div>\n  <div\n    :ref=\"itemRef\"\n    v-bind=\"dataset\"\n    :aria-disabled=\"disabled\"\n    :class=\"{\n      'el-dropdown-menu__item': true,\n      'is-disabled': disabled,\n    }\"\n    :tabindex=\"tabIndex\"\n    role=\"menuitem\"\n    @click=\"(e) => $emit('click', e)\"\n    @focus=\"handleFocus\"\n    @keydown=\"handleKeydown\"\n    @mousedown=\"handleMousedown\"\n    @pointermove=\"(e) => $emit('pointermove', e)\"\n    @pointerleave=\"(e) => $emit('pointerleave', e)\"\n  >\n    <el-icon v-if=\"icon\"><component :is=\"icon\" /></el-icon>\n    <slot />\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, inject } from 'vue'\nimport {\n  ROVING_FOCUS_GROUP_ITEM_INJECTION_KEY,\n  ROVING_FOCUS_ITEM_COLLECTION_INJECTION_KEY,\n} from '@element-plus/components/roving-focus-group'\nimport { COLLECTION_ITEM_SIGN } from '@element-plus/components/collection'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { EVENT_CODE } from '@element-plus/utils/aria'\nimport { composeEventHandlers, composeRefs } from '@element-plus/utils/dom'\nimport {\n  DROPDOWN_COLLECTION_ITEM_INJECTION_KEY,\n  dropdownItemProps,\n} from './dropdown'\n\nexport default defineComponent({\n  name: 'DropdownItemImpl',\n  components: {\n    ElIcon,\n  },\n  props: dropdownItemProps,\n  emits: ['pointermove', 'pointerleave', 'click'],\n  setup(_, { emit }) {\n    const { collectionItemRef: dropdownCollectionItemRef } = inject(\n      DROPDOWN_COLLECTION_ITEM_INJECTION_KEY,\n      undefined\n    )!\n\n    const { collectionItemRef: rovingFocusCollectionItemRef } = inject(\n      ROVING_FOCUS_ITEM_COLLECTION_INJECTION_KEY,\n      undefined\n    )!\n\n    const {\n      rovingFocusGroupItemRef,\n      tabIndex,\n      handleFocus,\n      handleKeydown: handleItemKeydown,\n      handleMousedown,\n    } = inject(ROVING_FOCUS_GROUP_ITEM_INJECTION_KEY, undefined)!\n\n    const itemRef = composeRefs(\n      dropdownCollectionItemRef,\n      rovingFocusCollectionItemRef,\n      rovingFocusGroupItemRef\n    )\n\n    const handleKeydown = composeEventHandlers((e: KeyboardEvent) => {\n      const { code } = e\n      if (code === EVENT_CODE.enter || code === EVENT_CODE.space) {\n        e.preventDefault()\n        e.stopImmediatePropagation()\n        emit('click', e)\n        return true\n      }\n    }, handleItemKeydown)\n\n    return {\n      itemRef,\n      dataset: {\n        [COLLECTION_ITEM_SIGN]: '',\n      },\n      tabIndex,\n      handleFocus,\n      handleKeydown,\n      handleMousedown,\n    }\n  },\n})\n</script>\n"],"names":[],"mappings":";;;;;;;;;;;AAqCA,aAAe;;AAEf,EAAE,UAAU;IACR,MAAM;GACP;OACI,EAAE;EACP;EACA,KAAK,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE;IACjB,MAAM,EAAE,iBAAiB,EAAE;IAC3B;IACA,MAAM;MACJ,uBAAuB;MACvB,QAAQ;;;MAGR,eAAe;QACb,MAAM,CAAC;UACL;IACN;;MAEE,IAAI;QACF,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,CAAC,CAAC;QACF,IAAI,CAAC;QACL,OAAO,IAAI;OACZ;wBACiB,CAAC,CAAC;;MAEpB,OAAO;MACP,OAAO,EAAE;QACP,CAAC,oBAAoB,GAAG,EAAE;OAC3B;;;MAGD,aAAa;MACb,eAAe;MACf;;;;;;"}

package/es/components/dropdown/src/dropdown-item-impl.vue_vue_type_template_id_6daab4f2_lang.mjs

@@ -1,32 +1,38 @@
-import { resolveComponent, openBlock, createElementBlock, mergeProps, createBlock, withCtx, resolveDynamicComponent, createCommentVNode, renderSlot } from 'vue';
+import { resolveComponent, openBlock, createElementBlock, Fragment, createCommentVNode, createElementVNode, mergeProps, createBlock, withCtx, resolveDynamicComponent, renderSlot } from 'vue';
 
-const _hoisted_1 = ["aria-disabled", "tabindex"];
+const _hoisted_1 = {
+  key: 0,
+  class: "el-dropdown-menu__item--divided"
+};
+const _hoisted_2 = ["aria-disabled", "tabindex"];
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_el_icon = resolveComponent("el-icon");
-  return openBlock(), createElementBlock("div", mergeProps({ ref: _ctx.itemRef }, _ctx.dataset, {
-    "aria-disabled": _ctx.disabled,
-    class: {
-      "el-dropdown-menu__item": true,
-      "is-disabled": _ctx.disabled,
-      "el-dropdown-menu__item--divided": _ctx.divided
-    },
-    tabindex: _ctx.tabIndex,
-    role: "menuitem",
-    onClick: _cache[0] || (_cache[0] = (e) => _ctx.$emit("click", e)),
-    onFocus: _cache[1] || (_cache[1] = (...args) => _ctx.handleFocus && _ctx.handleFocus(...args)),
-    onKeydown: _cache[2] || (_cache[2] = (...args) => _ctx.handleKeydown && _ctx.handleKeydown(...args)),
-    onMousedown: _cache[3] || (_cache[3] = (...args) => _ctx.handleMousedown && _ctx.handleMousedown(...args)),
-    onPointermove: _cache[4] || (_cache[4] = (e) => _ctx.$emit("pointermove", e)),
-    onPointerleave: _cache[5] || (_cache[5] = (e) => _ctx.$emit("pointerleave", e))
-  }), [
-    _ctx.icon ? (openBlock(), createBlock(_component_el_icon, { key: 0 }, {
-      default: withCtx(() => [
-        (openBlock(), createBlock(resolveDynamicComponent(_ctx.icon)))
-      ]),
-      _: 1
-    })) : createCommentVNode("v-if", true),
-    renderSlot(_ctx.$slots, "default")
-  ], 16, _hoisted_1);
+  return openBlock(), createElementBlock(Fragment, null, [
+    _ctx.divided ? (openBlock(), createElementBlock("div", _hoisted_1)) : createCommentVNode("v-if", true),
+    createElementVNode("div", mergeProps({ ref: _ctx.itemRef }, _ctx.dataset, {
+      "aria-disabled": _ctx.disabled,
+      class: {
+        "el-dropdown-menu__item": true,
+        "is-disabled": _ctx.disabled
+      },
+      tabindex: _ctx.tabIndex,
+      role: "menuitem",
+      onClick: _cache[0] || (_cache[0] = (e) => _ctx.$emit("click", e)),
+      onFocus: _cache[1] || (_cache[1] = (...args) => _ctx.handleFocus && _ctx.handleFocus(...args)),
+      onKeydown: _cache[2] || (_cache[2] = (...args) => _ctx.handleKeydown && _ctx.handleKeydown(...args)),
+      onMousedown: _cache[3] || (_cache[3] = (...args) => _ctx.handleMousedown && _ctx.handleMousedown(...args)),
+      onPointermove: _cache[4] || (_cache[4] = (e) => _ctx.$emit("pointermove", e)),
+      onPointerleave: _cache[5] || (_cache[5] = (e) => _ctx.$emit("pointerleave", e))
+    }), [
+      _ctx.icon ? (openBlock(), createBlock(_component_el_icon, { key: 0 }, {
+        default: withCtx(() => [
+          (openBlock(), createBlock(resolveDynamicComponent(_ctx.icon)))
+        ]),
+        _: 1
+      })) : createCommentVNode("v-if", true),
+      renderSlot(_ctx.$slots, "default")
+    ], 16, _hoisted_2)
+  ], 64);
 }
 
 export { render };

package/es/components/dropdown/src/dropdown-item-impl.vue_vue_type_template_id_6daab4f2_lang.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-item-impl.vue_vue_type_template_id_6daab4f2_lang.mjs","sources":["../../../../../../packages/components/dropdown/src/dropdown-item-impl.vue?vue&type=template&id=6daab4f2&lang.js"],"sourcesContent":["<template>\n  <div\n    :ref=\"itemRef\"\n    v-bind=\"dataset\"\n    :aria-disabled=\"disabled\"\n    :class=\"{\n      'el-dropdown-menu__item': true,\n      'is-disabled': disabled,\n      'el-dropdown-menu__item--divided': divided,\n    }\"\n    :tabindex=\"tabIndex\"\n    role=\"menuitem\"\n    @click=\"(e) => $emit('click', e)\"\n    @focus=\"handleFocus\"\n    @keydown=\"handleKeydown\"\n    @mousedown=\"handleMousedown\"\n    @pointermove=\"(e) => $emit('pointermove', e)\"\n    @pointerleave=\"(e) => $emit('pointerleave', e)\"\n  >\n    <el-icon v-if=\"icon\"><component :is=\"icon\" /></el-icon>\n    <slot />\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, inject } from 'vue'\nimport {\n  ROVING_FOCUS_GROUP_ITEM_INJECTION_KEY,\n  ROVING_FOCUS_ITEM_COLLECTION_INJECTION_KEY,\n} from '@element-plus/components/roving-focus-group'\nimport { COLLECTION_ITEM_SIGN } from '@element-plus/components/collection'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { EVENT_CODE } from '@element-plus/utils/aria'\nimport { composeEventHandlers, composeRefs } from '@element-plus/utils/dom'\nimport {\n  DROPDOWN_COLLECTION_ITEM_INJECTION_KEY,\n  dropdownItemProps,\n} from './dropdown'\n\nexport default defineComponent({\n  name: 'DropdownItemImpl',\n  components: {\n    ElIcon,\n  },\n  props: dropdownItemProps,\n  emits: ['pointermove', 'pointerleave', 'click'],\n  setup(_, { emit }) {\n    const { collectionItemRef: dropdownCollectionItemRef } = inject(\n      DROPDOWN_COLLECTION_ITEM_INJECTION_KEY,\n      undefined\n    )!\n\n    const { collectionItemRef: rovingFocusCollectionItemRef } = inject(\n      ROVING_FOCUS_ITEM_COLLECTION_INJECTION_KEY,\n      undefined\n    )!\n\n    const {\n      rovingFocusGroupItemRef,\n      tabIndex,\n      handleFocus,\n      handleKeydown: handleItemKeydown,\n      handleMousedown,\n    } = inject(ROVING_FOCUS_GROUP_ITEM_INJECTION_KEY, undefined)!\n\n    const itemRef = composeRefs(\n      dropdownCollectionItemRef,\n      rovingFocusCollectionItemRef,\n      rovingFocusGroupItemRef\n    )\n\n    const handleKeydown = composeEventHandlers((e: KeyboardEvent) => {\n      const { code } = e\n      if (code === EVENT_CODE.enter || code === EVENT_CODE.space) {\n        e.preventDefault()\n        e.stopImmediatePropagation()\n        emit('click', e)\n        return true\n      }\n    }, handleItemKeydown)\n\n    return {\n      itemRef,\n      dataset: {\n        [COLLECTION_ITEM_SIGN]: '',\n      },\n      tabIndex,\n      handleFocus,\n      handleKeydown,\n      handleMousedown,\n    }\n  },\n})\n</script>\n"],"names":["_openBlock"],"mappings":";;;;;;;;;mBAIkB,EAAE,aAAQ;;;;;;IAMvB,uBAAkB;IACnB;IACC,oCAAQ,gBAAW;IACnB;IACA;IACA;IACA,aAAWA,2CAAc;;;;;4BAGmB;0BAAxB;;;;;;"}
+{"version":3,"file":"dropdown-item-impl.vue_vue_type_template_id_6daab4f2_lang.mjs","sources":["../../../../../../packages/components/dropdown/src/dropdown-item-impl.vue?vue&type=template&id=6daab4f2&lang.js"],"sourcesContent":["<template>\n  <div v-if=\"divided\" class=\"el-dropdown-menu__item--divided\"></div>\n  <div\n    :ref=\"itemRef\"\n    v-bind=\"dataset\"\n    :aria-disabled=\"disabled\"\n    :class=\"{\n      'el-dropdown-menu__item': true,\n      'is-disabled': disabled,\n    }\"\n    :tabindex=\"tabIndex\"\n    role=\"menuitem\"\n    @click=\"(e) => $emit('click', e)\"\n    @focus=\"handleFocus\"\n    @keydown=\"handleKeydown\"\n    @mousedown=\"handleMousedown\"\n    @pointermove=\"(e) => $emit('pointermove', e)\"\n    @pointerleave=\"(e) => $emit('pointerleave', e)\"\n  >\n    <el-icon v-if=\"icon\"><component :is=\"icon\" /></el-icon>\n    <slot />\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, inject } from 'vue'\nimport {\n  ROVING_FOCUS_GROUP_ITEM_INJECTION_KEY,\n  ROVING_FOCUS_ITEM_COLLECTION_INJECTION_KEY,\n} from '@element-plus/components/roving-focus-group'\nimport { COLLECTION_ITEM_SIGN } from '@element-plus/components/collection'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { EVENT_CODE } from '@element-plus/utils/aria'\nimport { composeEventHandlers, composeRefs } from '@element-plus/utils/dom'\nimport {\n  DROPDOWN_COLLECTION_ITEM_INJECTION_KEY,\n  dropdownItemProps,\n} from './dropdown'\n\nexport default defineComponent({\n  name: 'DropdownItemImpl',\n  components: {\n    ElIcon,\n  },\n  props: dropdownItemProps,\n  emits: ['pointermove', 'pointerleave', 'click'],\n  setup(_, { emit }) {\n    const { collectionItemRef: dropdownCollectionItemRef } = inject(\n      DROPDOWN_COLLECTION_ITEM_INJECTION_KEY,\n      undefined\n    )!\n\n    const { collectionItemRef: rovingFocusCollectionItemRef } = inject(\n      ROVING_FOCUS_ITEM_COLLECTION_INJECTION_KEY,\n      undefined\n    )!\n\n    const {\n      rovingFocusGroupItemRef,\n      tabIndex,\n      handleFocus,\n      handleKeydown: handleItemKeydown,\n      handleMousedown,\n    } = inject(ROVING_FOCUS_GROUP_ITEM_INJECTION_KEY, undefined)!\n\n    const itemRef = composeRefs(\n      dropdownCollectionItemRef,\n      rovingFocusCollectionItemRef,\n      rovingFocusGroupItemRef\n    )\n\n    const handleKeydown = composeEventHandlers((e: KeyboardEvent) => {\n      const { code } = e\n      if (code === EVENT_CODE.enter || code === EVENT_CODE.space) {\n        e.preventDefault()\n        e.stopImmediatePropagation()\n        emit('click', e)\n        return true\n      }\n    }, handleItemKeydown)\n\n    return {\n      itemRef,\n      dataset: {\n        [COLLECTION_ITEM_SIGN]: '',\n      },\n      tabIndex,\n      handleFocus,\n      handleKeydown,\n      handleMousedown,\n    }\n  },\n})\n</script>\n"],"names":["_withCtx"],"mappings":";;;;;EACsB;;;;;;;;;;;;MAIjB,eAAa;MACb;;;;MAIA;MACD;MACC,oCAAQ,CAAC,KAAK;MACd;MACA,SAAO;iBACEA;;;;OAIK;;;;;;;;"}

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

@@ -5,11 +5,11 @@ declare const _default: import("vue").DefineComponent<{
     readonly textValue: StringConstructor;
     readonly icon: import("../../../utils/props").BuildPropReturn<import("../../../utils/props").PropWrapper<string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>>, unknown, unknown, unknown, unknown>;
 }, {
-    handleClick: (e: UIEvent) => void;
+    handleClick: (event: PointerEvent) => void;
     handlePointerMove: (event: PointerEvent) => void;
     handlePointerLeave: (event: PointerEvent) => void;
     textContent: import("vue").ComputedRef<string>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("pointerleave" | "pointermove")[], "pointerleave" | "pointermove", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("click" | "pointerleave" | "pointermove")[], "click" | "pointerleave" | "pointermove", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     readonly command?: unknown;
     readonly disabled?: unknown;
     readonly divided?: unknown;
@@ -23,6 +23,7 @@ declare const _default: import("vue").DefineComponent<{
     icon?: import("../../../utils/props").BuildPropType<import("../../../utils/props").PropWrapper<string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>>, unknown, unknown> | undefined;
     textValue?: string | undefined;
 }> & {
+    onClick?: ((...args: any[]) => any) | undefined;
     onPointermove?: ((...args: any[]) => any) | undefined;
     onPointerleave?: ((...args: any[]) => any) | undefined;
 }, {

package/es/components/dropdown/src/dropdown-item.vue_vue_type_script_lang.mjs

@@ -16,7 +16,7 @@ var script = defineComponent({
     ElDropdownItemImpl: script$2
   },
   props: dropdownItemProps,
-  emits: ["pointermove", "pointerleave"],
+  emits: ["pointermove", "pointerleave", "click"],
   setup(props, { emit }) {
     const { elDropdown } = useDropdown();
     const _instance = getCurrentInstance();
@@ -47,7 +47,10 @@ var script = defineComponent({
     }, whenMouse((e) => {
       onItemLeave(e);
     }));
-    function handleClick(e) {
+    const handleClick = composeEventHandlers((e) => {
+      emit("click", e);
+      return e.defaultPrevented;
+    }, (e) => {
       var _a, _b, _c;
       if (props.disabled) {
         e.stopImmediatePropagation();
@@ -57,7 +60,7 @@ var script = defineComponent({
         (_b = elDropdown.handleClick) == null ? void 0 : _b.call(elDropdown);
       }
       (_c = elDropdown.commandHandler) == null ? void 0 : _c.call(elDropdown, props.command, _instance, e);
-    }
+    });
     return {
       handleClick,
       handlePointerMove,

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  <el-dropdown-collection-item\n    :disabled=\"disabled\"\n    :text-value=\"textValue ?? textContent\"\n  >\n    <el-roving-focus-item :focusable=\"!disabled\">\n      <el-dropdown-item-impl\n        v-bind=\"$props\"\n        @pointerleave=\"handlePointerLeave\"\n        @pointermove=\"handlePointerMove\"\n        @click=\"handleClick\"\n      >\n        <slot />\n      </el-dropdown-item-impl>\n    </el-roving-focus-item>\n  </el-dropdown-collection-item>\n</template>\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  getCurrentInstance,\n  inject,\n  ref,\n  unref,\n} from 'vue'\nimport { ElRovingFocusItem } from '@element-plus/components/roving-focus-group'\nimport { composeEventHandlers, whenMouse } from '@element-plus/utils/dom'\nimport ElDropdownItemImpl from './dropdown-item-impl.vue'\nimport { useDropdown } from './useDropdown'\nimport {\n  ElCollectionItem as ElDropdownCollectionItem,\n  dropdownItemProps,\n} from './dropdown'\nimport { DROPDOWN_INJECTION_KEY } from './tokens'\n\nexport default defineComponent({\n  name: 'ElDropdownItem',\n  components: {\n    ElDropdownCollectionItem,\n    ElRovingFocusItem,\n    ElDropdownItemImpl,\n  },\n  props: dropdownItemProps,\n  emits: ['pointermove', 'pointerleave'],\n  setup(props, { emit }) {\n    const { elDropdown } = useDropdown()\n    const _instance = getCurrentInstance()\n    const itemRef = ref<HTMLElement | null>(null)\n    const textContent = computed(() => unref(itemRef)?.textContent ?? '')\n    const { onItemEnter, onItemLeave } = inject(\n      DROPDOWN_INJECTION_KEY,\n      undefined\n    )!\n\n    const handlePointerMove = composeEventHandlers(\n      (e: PointerEvent) => {\n        emit('pointermove', e)\n        return e.defaultPrevented\n      },\n      whenMouse((e) => {\n        if (props.disabled) {\n          onItemLeave(e)\n        } else {\n          onItemEnter(e)\n          if (!e.defaultPrevented) {\n            ;(e.currentTarget as HTMLElement)?.focus()\n          }\n        }\n      })\n    )\n\n    const handlePointerLeave = composeEventHandlers(\n      (e: PointerEvent) => {\n        emit('pointerleave', e)\n        return e.defaultPrevented\n      },\n      whenMouse((e) => {\n        onItemLeave(e)\n      })\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      handlePointerMove,\n      handlePointerLeave,\n      textContent,\n    }\n  },\n})\n</script>\n"],"names":["ElDropdownCollectionItem","ElRovingFocusItem","ElDropdownItemImpl"],"mappings":";;;;;;;;;;AAkCA,aAAe,eAAe;;AAE9B,EAAE,UAAU;8BACRA;uBACAC;wBACAC,QAAkB;;OAEf,EAAE;EACP;EACA,KAAK,MAAM,EAAE,EAAE,IAAI,EAAE,EAAE;IACrB,MAAM,EAAE,UAAU,KAAK,WAAW,EAAE;IACpC,MAAM,SAAS,GAAG;IAClB,MAAM,OAAO,GAAG,GAAG,KAAK,CAAC,CAAC;IAC1B,MAAM,cAAc,QAAQ,CAAC,MAAM;MACjC,IAAI,EAAE,EAAE,EAAE;MACV,OAAO,CAAC,EAAE,GAAG,CAAC,EAAE,GAAG,KAAK,CAAC,QAAQ,KAAK,IAAI,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC;KAC1D,CAAC,CAAC;UACG,EAAE,WAAW,EAAE;UACf;;;KAGL,EAAE,SAAS,CAAC,CAAC,CAAC,KAAK;MAClB,IAAI,EAAE,CAAC;UACH,KAAK,CAAC,QAAQ,EAAE;QAClB,WAAW,CAAC,CAAC,CAAC,CAAC;OAChB;QACC,YAAY,CAAC,EAAE;QACf,IAAI,CAAC,CAAC,CAAC;UACL,CAAC;UACD,CAAC,EAAE;;;;UAIH;;MAEJ;;;KAGD,CAAC,CAAC,CAAC;aACK,WAAW,CAAC;UACf,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC;UACX,KAAK,CAAC,QAAQ,EAAE;;QAElB,OAAO;;MAET;;OAEC;MACD,CAAC,EAAE,GAAG,UAAU,CAAC,cAAc,KAAK,IAAI;;WAEnC;;MAEL;MACA,kBAAkB;iBACP;MACX;;;;;;"}
+{"version":3,"file":"dropdown-item.vue_vue_type_script_lang.mjs","sources":["../../../../../../packages/components/dropdown/src/dropdown-item.vue"],"sourcesContent":["<template>\n  <el-dropdown-collection-item\n    :disabled=\"disabled\"\n    :text-value=\"textValue ?? textContent\"\n  >\n    <el-roving-focus-item :focusable=\"!disabled\">\n      <el-dropdown-item-impl\n        v-bind=\"$props\"\n        @pointerleave=\"handlePointerLeave\"\n        @pointermove=\"handlePointerMove\"\n        @click=\"handleClick\"\n      >\n        <slot />\n      </el-dropdown-item-impl>\n    </el-roving-focus-item>\n  </el-dropdown-collection-item>\n</template>\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  getCurrentInstance,\n  inject,\n  ref,\n  unref,\n} from 'vue'\nimport { ElRovingFocusItem } from '@element-plus/components/roving-focus-group'\nimport { composeEventHandlers, whenMouse } from '@element-plus/utils/dom'\nimport ElDropdownItemImpl from './dropdown-item-impl.vue'\nimport { useDropdown } from './useDropdown'\nimport {\n  ElCollectionItem as ElDropdownCollectionItem,\n  dropdownItemProps,\n} from './dropdown'\nimport { DROPDOWN_INJECTION_KEY } from './tokens'\n\nexport default defineComponent({\n  name: 'ElDropdownItem',\n  components: {\n    ElDropdownCollectionItem,\n    ElRovingFocusItem,\n    ElDropdownItemImpl,\n  },\n  props: dropdownItemProps,\n  emits: ['pointermove', 'pointerleave', 'click'],\n  setup(props, { emit }) {\n    const { elDropdown } = useDropdown()\n    const _instance = getCurrentInstance()\n    const itemRef = ref<HTMLElement | null>(null)\n    const textContent = computed(() => unref(itemRef)?.textContent ?? '')\n    const { onItemEnter, onItemLeave } = inject(\n      DROPDOWN_INJECTION_KEY,\n      undefined\n    )!\n\n    const handlePointerMove = composeEventHandlers(\n      (e: PointerEvent) => {\n        emit('pointermove', e)\n        return e.defaultPrevented\n      },\n      whenMouse((e) => {\n        if (props.disabled) {\n          onItemLeave(e)\n        } else {\n          onItemEnter(e)\n          if (!e.defaultPrevented) {\n            ;(e.currentTarget as HTMLElement)?.focus()\n          }\n        }\n      })\n    )\n\n    const handlePointerLeave = composeEventHandlers(\n      (e: PointerEvent) => {\n        emit('pointerleave', e)\n        return e.defaultPrevented\n      },\n      whenMouse((e) => {\n        onItemLeave(e)\n      })\n    )\n\n    const handleClick = composeEventHandlers(\n      (e: PointerEvent) => {\n        emit('click', e)\n        return e.defaultPrevented\n      },\n      (e) => {\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\n    return {\n      handleClick,\n      handlePointerMove,\n      handlePointerLeave,\n      textContent,\n    }\n  },\n})\n</script>\n"],"names":["ElDropdownCollectionItem","ElRovingFocusItem","ElDropdownItemImpl"],"mappings":";;;;;;;;;;AAkCA,aAAe,eAAe;;AAE9B,EAAE,UAAU;8BACRA;uBACAC;wBACAC,QAAkB;;OAEf,EAAE;EACP;EACA,KAAK,MAAM,EAAE,EAAE,IAAI,EAAE,EAAE;IACrB,MAAM,EAAE,UAAU,KAAK,WAAW,GAAG;IACrC,MAAM,SAAS,GAAG;IAClB,MAAM,OAAO,GAAG,GAAG,KAAK,CAAC,CAAC;IAC1B,MAAM,cAAc,QAAQ,CAAC,MAAM;MACjC,IAAI,EAAE,EAAE,EAAE;MACV,OAAO,CAAC,EAAE,GAAG,CAAC,EAAE,GAAG,KAAK,CAAC,QAAQ,KAAK,IAAI,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC;KAC1D,CAAC,CAAC;UACG,EAAE,WAAW,EAAE;UACf;;;KAGL,EAAE,SAAS,CAAC,CAAC,CAAC,KAAK;MAClB,IAAI,EAAE,CAAC;UACH,KAAK,CAAC,QAAQ,EAAE;QAClB,WAAW,CAAC,CAAC,CAAC,CAAC;OAChB;QACC,YAAY,CAAC,EAAE;QACf,IAAI,CAAC,CAAC,CAAC;UACL,CAAC;UACD,CAAC,EAAE;;;;UAIH;;MAEJ;;;KAGD,CAAC,CAAC,CAAC;UACE,WAAW,GAAG;UACd,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC;aACV,EAAE,gBAAgB,CAAC;OACzB;MACD,IAAI,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC;UACX,KAAK,CAAC;;;;MAIV,IAAI,CAAC,EAAE,GAAG,UAAU,IAAI,IAAI,GAAG,KAAK,CAAC;QACnC,GAAG,GAAG,UAAU,CAAC;;SAEhB,GAAG,UAAU,CAAC;MACjB,CAAC;WACI;iBACM;uBACM;;;;;;;;;"}

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  <el-dropdown-collection-item\n    :disabled=\"disabled\"\n    :text-value=\"textValue ?? textContent\"\n  >\n    <el-roving-focus-item :focusable=\"!disabled\">\n      <el-dropdown-item-impl\n        v-bind=\"$props\"\n        @pointerleave=\"handlePointerLeave\"\n        @pointermove=\"handlePointerMove\"\n        @click=\"handleClick\"\n      >\n        <slot />\n      </el-dropdown-item-impl>\n    </el-roving-focus-item>\n  </el-dropdown-collection-item>\n</template>\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  getCurrentInstance,\n  inject,\n  ref,\n  unref,\n} from 'vue'\nimport { ElRovingFocusItem } from '@element-plus/components/roving-focus-group'\nimport { composeEventHandlers, whenMouse } from '@element-plus/utils/dom'\nimport ElDropdownItemImpl from './dropdown-item-impl.vue'\nimport { useDropdown } from './useDropdown'\nimport {\n  ElCollectionItem as ElDropdownCollectionItem,\n  dropdownItemProps,\n} from './dropdown'\nimport { DROPDOWN_INJECTION_KEY } from './tokens'\n\nexport default defineComponent({\n  name: 'ElDropdownItem',\n  components: {\n    ElDropdownCollectionItem,\n    ElRovingFocusItem,\n    ElDropdownItemImpl,\n  },\n  props: dropdownItemProps,\n  emits: ['pointermove', 'pointerleave'],\n  setup(props, { emit }) {\n    const { elDropdown } = useDropdown()\n    const _instance = getCurrentInstance()\n    const itemRef = ref<HTMLElement | null>(null)\n    const textContent = computed(() => unref(itemRef)?.textContent ?? '')\n    const { onItemEnter, onItemLeave } = inject(\n      DROPDOWN_INJECTION_KEY,\n      undefined\n    )!\n\n    const handlePointerMove = composeEventHandlers(\n      (e: PointerEvent) => {\n        emit('pointermove', e)\n        return e.defaultPrevented\n      },\n      whenMouse((e) => {\n        if (props.disabled) {\n          onItemLeave(e)\n        } else {\n          onItemEnter(e)\n          if (!e.defaultPrevented) {\n            ;(e.currentTarget as HTMLElement)?.focus()\n          }\n        }\n      })\n    )\n\n    const handlePointerLeave = composeEventHandlers(\n      (e: PointerEvent) => {\n        emit('pointerleave', e)\n        return e.defaultPrevented\n      },\n      whenMouse((e) => {\n        onItemLeave(e)\n      })\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      handlePointerMove,\n      handlePointerLeave,\n      textContent,\n    }\n  },\n})\n</script>\n"],"names":[],"mappings":";;;;;;;;;IAEK;;;;;;;;;YAMI;YACA,aAAW;YACX;;6BAED;cAAA;;;;;;;;;;;;;"}
+{"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  <el-dropdown-collection-item\n    :disabled=\"disabled\"\n    :text-value=\"textValue ?? textContent\"\n  >\n    <el-roving-focus-item :focusable=\"!disabled\">\n      <el-dropdown-item-impl\n        v-bind=\"$props\"\n        @pointerleave=\"handlePointerLeave\"\n        @pointermove=\"handlePointerMove\"\n        @click=\"handleClick\"\n      >\n        <slot />\n      </el-dropdown-item-impl>\n    </el-roving-focus-item>\n  </el-dropdown-collection-item>\n</template>\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  getCurrentInstance,\n  inject,\n  ref,\n  unref,\n} from 'vue'\nimport { ElRovingFocusItem } from '@element-plus/components/roving-focus-group'\nimport { composeEventHandlers, whenMouse } from '@element-plus/utils/dom'\nimport ElDropdownItemImpl from './dropdown-item-impl.vue'\nimport { useDropdown } from './useDropdown'\nimport {\n  ElCollectionItem as ElDropdownCollectionItem,\n  dropdownItemProps,\n} from './dropdown'\nimport { DROPDOWN_INJECTION_KEY } from './tokens'\n\nexport default defineComponent({\n  name: 'ElDropdownItem',\n  components: {\n    ElDropdownCollectionItem,\n    ElRovingFocusItem,\n    ElDropdownItemImpl,\n  },\n  props: dropdownItemProps,\n  emits: ['pointermove', 'pointerleave', 'click'],\n  setup(props, { emit }) {\n    const { elDropdown } = useDropdown()\n    const _instance = getCurrentInstance()\n    const itemRef = ref<HTMLElement | null>(null)\n    const textContent = computed(() => unref(itemRef)?.textContent ?? '')\n    const { onItemEnter, onItemLeave } = inject(\n      DROPDOWN_INJECTION_KEY,\n      undefined\n    )!\n\n    const handlePointerMove = composeEventHandlers(\n      (e: PointerEvent) => {\n        emit('pointermove', e)\n        return e.defaultPrevented\n      },\n      whenMouse((e) => {\n        if (props.disabled) {\n          onItemLeave(e)\n        } else {\n          onItemEnter(e)\n          if (!e.defaultPrevented) {\n            ;(e.currentTarget as HTMLElement)?.focus()\n          }\n        }\n      })\n    )\n\n    const handlePointerLeave = composeEventHandlers(\n      (e: PointerEvent) => {\n        emit('pointerleave', e)\n        return e.defaultPrevented\n      },\n      whenMouse((e) => {\n        onItemLeave(e)\n      })\n    )\n\n    const handleClick = composeEventHandlers(\n      (e: PointerEvent) => {\n        emit('click', e)\n        return e.defaultPrevented\n      },\n      (e) => {\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\n    return {\n      handleClick,\n      handlePointerMove,\n      handlePointerLeave,\n      textContent,\n    }\n  },\n})\n</script>\n"],"names":[],"mappings":";;;;;;;;;IAEK;;;;;;;;;YAMI;YACA,aAAW;YACX;;6BAED;cAAA;;;;;;;;;;;;;"}

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

@@ -4,6 +4,7 @@ declare const _default: import("vue").DefineComponent<{
     size: import("vue").ComputedRef<string> | undefined;
     rovingFocusGroupRootStyle: import("vue").Ref<import("vue").StyleValue>;
     tabIndex: import("vue").Ref<number>;
+    dropdownKls: import("vue").ComputedRef<string[]>;
     dropdownListWrapperRef: (el: Element | import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null) => void;
     handleKeydown: (e: KeyboardEvent) => void;
     onBlur: (e: Event) => void;

package/es/components/dropdown/src/dropdown-menu.vue_vue_type_script_lang.mjs

@@ -1,5 +1,4 @@
-import { defineComponent, inject, unref } from 'vue';
-import '../../../directives/index.mjs';
+import { defineComponent, inject, computed, unref } from 'vue';
 import { EVENT_CODE } from '../../../utils/aria.mjs';
 import '../../focus-trap/index.mjs';
 import '../../roving-focus-group/index.mjs';
@@ -7,7 +6,6 @@ import { composeRefs, composeEventHandlers } from '../../../utils/dom.mjs';
 import { DROPDOWN_INJECTION_KEY } from './tokens.mjs';
 import { dropdownMenuProps, DROPDOWN_COLLECTION_INJECTION_KEY as COLLECTION_INJECTION_KEY, FIRST_LAST_KEYS, LAST_KEYS } from './dropdown.mjs';
 import { useDropdown } from './useDropdown.mjs';
-import ClickOutside from '../../../directives/click-outside/index.mjs';
 import { FOCUS_TRAP_INJECTION_KEY } from '../../focus-trap/src/tokens.mjs';
 import { ROVING_FOCUS_GROUP_INJECTION_KEY } from '../../roving-focus-group/src/tokens.mjs';
 import { ROVING_FOCUS_COLLECTION_INJECTION_KEY as COLLECTION_INJECTION_KEY$1 } from '../../roving-focus-group/src/roving-focus-group.mjs';
@@ -15,10 +13,6 @@ import { focusFirst } from '../../roving-focus-group/src/utils.mjs';
 
 var script = defineComponent({
   name: "ElDropdownMenu",
-  directives: {
-    ClickOutside
-  },
-  inheritAttrs: false,
   props: dropdownMenuProps,
   setup(props) {
     const { _elDropdownSize } = useDropdown();
@@ -35,6 +29,12 @@ var script = defineComponent({
       onMousedown
     } = inject(ROVING_FOCUS_GROUP_INJECTION_KEY, void 0);
     const { collectionRef: rovingFocusGroupCollectionRef } = inject(COLLECTION_INJECTION_KEY$1, void 0);
+    const dropdownKls = computed(() => {
+      return [
+        "el-dropdown-menu",
+        size.value && `el-dropdown-menu--${size.value}`
+      ];
+    });
     const dropdownListWrapperRef = composeRefs(contentRef, dropdownCollectionRef, focusTrapRef, rovingFocusGroupRef, rovingFocusGroupCollectionRef);
     const composedKeydown = composeEventHandlers((e) => {
       var _a;
@@ -67,6 +67,7 @@ var script = defineComponent({
       size,
       rovingFocusGroupRootStyle,
       tabIndex,
+      dropdownKls,
       dropdownListWrapperRef,
       handleKeydown,
       onBlur,