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

package/es/components/time-picker/src/time-picker-com/basic-time-spinner.vue_vue_type_template_id_4fb3c576_lang.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"basic-time-spinner.vue_vue_type_template_id_4fb3c576_lang.mjs","sources":["../../../../../../../packages/components/time-picker/src/time-picker-com/basic-time-spinner.vue?vue&type=template&id=4fb3c576&lang.js"],"sourcesContent":["<template>\n  <div class=\"el-time-spinner\" :class=\"{ 'has-seconds': showSeconds }\">\n    <template v-if=\"!arrowControl\">\n      <el-scrollbar\n        v-for=\"item in spinnerItems\"\n        :key=\"item\"\n        :ref=\"getRefId(item)\"\n        class=\"el-time-spinner__wrapper\"\n        wrap-style=\"max-height: inherit;\"\n        view-class=\"el-time-spinner__list\"\n        noresize\n        tag=\"ul\"\n        @mouseenter=\"emitSelectRange(item)\"\n        @mousemove=\"adjustCurrentSpinner(item)\"\n      >\n        <li\n          v-for=\"(disabled, key) in listMap[item].value\"\n          :key=\"key\"\n          class=\"el-time-spinner__item\"\n          :class=\"{ active: key === timePartsMap[item].value, disabled }\"\n          @click=\"handleClick(item, { value: key, disabled })\"\n        >\n          <template v-if=\"item === 'hours'\">\n            {{ ('0' + (amPmMode ? key % 12 || 12 : key)).slice(-2)\n            }}{{ getAmPmFlag(key) }}\n          </template>\n          <template v-else>\n            {{ ('0' + key).slice(-2) }}\n          </template>\n        </li>\n      </el-scrollbar>\n    </template>\n    <template v-if=\"arrowControl\">\n      <div\n        v-for=\"item in spinnerItems\"\n        :key=\"item\"\n        class=\"el-time-spinner__wrapper is-arrow\"\n        @mouseenter=\"emitSelectRange(item)\"\n      >\n        <el-icon\n          v-repeat-click=\"onDecreaseClick\"\n          class=\"el-time-spinner__arrow arrow-up\"\n        >\n          <arrow-up />\n        </el-icon>\n        <el-icon\n          v-repeat-click=\"onIncreaseClick\"\n          class=\"el-time-spinner__arrow arrow-down\"\n        >\n          <arrow-down />\n        </el-icon>\n        <ul class=\"el-time-spinner__list\">\n          <li\n            v-for=\"(time, key) in arrowListMap[item].value\"\n            :key=\"key\"\n            class=\"el-time-spinner__item\"\n            :class=\"{\n              active: time === timePartsMap[item].value,\n              disabled: listMap[item].value[time],\n            }\"\n          >\n            <template v-if=\"time\">\n              <template v-if=\"item === 'hours'\">\n                {{ ('0' + (amPmMode ? time % 12 || 12 : time)).slice(-2)\n                }}{{ getAmPmFlag(time) }}\n              </template>\n              <template v-else>\n                {{ ('0' + time).slice(-2) }}\n              </template>\n            </template>\n          </li>\n        </ul>\n      </div>\n    </template>\n  </div>\n</template>\n<script lang=\"ts\">\nimport { defineComponent, ref, nextTick, computed, onMounted, watch } from 'vue'\nimport debounce from 'lodash/debounce'\nimport { RepeatClick } from '@element-plus/directives'\nimport ElScrollbar from '@element-plus/components/scrollbar'\nimport ElIcon from '@element-plus/components/icon'\nimport { ArrowUp, ArrowDown } from '@element-plus/icons'\nimport { getTimeLists } from './useTimePicker'\n\nimport type { PropType, Ref } from 'vue'\nimport type { Dayjs } from 'dayjs'\nimport type { Nullable } from '@element-plus/utils/types'\n\nexport default defineComponent({\n  directives: {\n    repeatClick: RepeatClick,\n  },\n\n  components: {\n    ElScrollbar,\n    ElIcon,\n    ArrowUp,\n    ArrowDown,\n  },\n\n  props: {\n    role: {\n      type: String,\n      required: true,\n    },\n    spinnerDate: {\n      type: Object as PropType<Dayjs>,\n      required: true,\n    },\n    showSeconds: {\n      type: Boolean,\n      default: true,\n    },\n    arrowControl: Boolean,\n    amPmMode: {\n      type: String,\n      default: '', // 'a': am/pm; 'A': AM/PM\n    },\n    disabledHours: {\n      type: Function,\n    },\n    disabledMinutes: {\n      type: Function,\n    },\n    disabledSeconds: {\n      type: Function,\n    },\n  },\n\n  emits: ['change', 'select-range', 'set-option'],\n\n  setup(props, ctx) {\n    // data\n    let isScrolling = false\n    const debouncedResetScroll = debounce((type) => {\n      isScrolling = false\n      adjustCurrentSpinner(type)\n    }, 200)\n    const currentScrollbar = ref(null)\n    const listHoursRef: Ref<Nullable<HTMLElement>> = ref(null)\n    const listMinutesRef: Ref<Nullable<HTMLElement>> = ref(null)\n    const listSecondsRef: Ref<Nullable<HTMLElement>> = ref(null)\n    const listRefsMap = {\n      hours: listHoursRef,\n      minutes: listMinutesRef,\n      seconds: listSecondsRef,\n    }\n\n    // computed\n    const spinnerItems = computed(() => {\n      const arr = ['hours', 'minutes', 'seconds']\n      return props.showSeconds ? arr : arr.slice(0, 2)\n    })\n    const hours = computed(() => {\n      return props.spinnerDate.hour()\n    })\n    const minutes = computed(() => {\n      return props.spinnerDate.minute()\n    })\n    const seconds = computed(() => {\n      return props.spinnerDate.second()\n    })\n    const timePartsMap = computed(() => ({\n      hours,\n      minutes,\n      seconds,\n    }))\n    const hoursList = computed(() => {\n      return getHoursList(props.role)\n    })\n    const minutesList = computed(() => {\n      return getMinutesList(hours.value, props.role)\n    })\n    const secondsList = computed(() => {\n      return getSecondsList(hours.value, minutes.value, props.role)\n    })\n    const listMap = computed(() => ({\n      hours: hoursList,\n      minutes: minutesList,\n      seconds: secondsList,\n    }))\n    const arrowHourList = computed(() => {\n      const hour = hours.value\n      return [\n        hour > 0 ? hour - 1 : undefined,\n        hour,\n        hour < 23 ? hour + 1 : undefined,\n      ]\n    })\n    const arrowMinuteList = computed(() => {\n      const minute = minutes.value\n      return [\n        minute > 0 ? minute - 1 : undefined,\n        minute,\n        minute < 59 ? minute + 1 : undefined,\n      ]\n    })\n    const arrowSecondList = computed(() => {\n      const second = seconds.value\n      return [\n        second > 0 ? second - 1 : undefined,\n        second,\n        second < 59 ? second + 1 : undefined,\n      ]\n    })\n    const arrowListMap = computed(() => ({\n      hours: arrowHourList,\n      minutes: arrowMinuteList,\n      seconds: arrowSecondList,\n    }))\n    const getAmPmFlag = (hour) => {\n      const shouldShowAmPm = !!props.amPmMode\n      if (!shouldShowAmPm) return ''\n      const isCapital = props.amPmMode === 'A'\n      // todo locale\n      let content = hour < 12 ? ' am' : ' pm'\n      if (isCapital) content = content.toUpperCase()\n      return content\n    }\n\n    const emitSelectRange = (type) => {\n      if (type === 'hours') {\n        ctx.emit('select-range', 0, 2)\n      } else if (type === 'minutes') {\n        ctx.emit('select-range', 3, 5)\n      } else if (type === 'seconds') {\n        ctx.emit('select-range', 6, 8)\n      }\n      currentScrollbar.value = type\n    }\n\n    const adjustCurrentSpinner = (type) => {\n      adjustSpinner(type, timePartsMap.value[type].value)\n    }\n\n    // NOTE: used by datetime / date-range panel\n    //       renamed from adjustScrollTop\n    //       should try to refactory it\n    const adjustSpinners = () => {\n      adjustCurrentSpinner('hours')\n      adjustCurrentSpinner('minutes')\n      adjustCurrentSpinner('seconds')\n    }\n\n    const adjustSpinner = (type, value) => {\n      if (props.arrowControl) return\n      const el = listRefsMap[type]\n      if (el.value) {\n        el.value.$el.querySelector('.el-scrollbar__wrap').scrollTop = Math.max(\n          0,\n          value * typeItemHeight(type)\n        )\n      }\n    }\n\n    const typeItemHeight = (type) => {\n      const el = listRefsMap[type]\n      return el.value.$el.querySelector('li').offsetHeight\n    }\n\n    const onIncreaseClick = () => {\n      scrollDown(1)\n    }\n\n    const onDecreaseClick = () => {\n      scrollDown(-1)\n    }\n\n    const scrollDown = (step) => {\n      if (!currentScrollbar.value) {\n        emitSelectRange('hours')\n      }\n\n      const label = currentScrollbar.value\n      let now = timePartsMap.value[label].value\n      const total = currentScrollbar.value === 'hours' ? 24 : 60\n      now = (now + step + total) % total\n\n      modifyDateField(label, now)\n      adjustSpinner(label, now)\n      nextTick(() => emitSelectRange(currentScrollbar.value))\n    }\n\n    const modifyDateField = (type, value) => {\n      const list = listMap.value[type].value\n      const isDisabled = list[value]\n      if (isDisabled) return\n      switch (type) {\n        case 'hours':\n          ctx.emit(\n            'change',\n            props.spinnerDate\n              .hour(value)\n              .minute(minutes.value)\n              .second(seconds.value)\n          )\n          break\n        case 'minutes':\n          ctx.emit(\n            'change',\n            props.spinnerDate\n              .hour(hours.value)\n              .minute(value)\n              .second(seconds.value)\n          )\n          break\n        case 'seconds':\n          ctx.emit(\n            'change',\n            props.spinnerDate\n              .hour(hours.value)\n              .minute(minutes.value)\n              .second(value)\n          )\n          break\n      }\n    }\n\n    const handleClick = (type, { value, disabled }) => {\n      if (!disabled) {\n        modifyDateField(type, value)\n        emitSelectRange(type)\n        adjustSpinner(type, value)\n      }\n    }\n\n    const handleScroll = (type) => {\n      isScrolling = true\n      debouncedResetScroll(type)\n      const value = Math.min(\n        Math.round(\n          (listRefsMap[type].value.$el.querySelector('.el-scrollbar__wrap')\n            .scrollTop -\n            (scrollBarHeight(type) * 0.5 - 10) / typeItemHeight(type) +\n            3) /\n            typeItemHeight(type)\n        ),\n        type === 'hours' ? 23 : 59\n      )\n      modifyDateField(type, value)\n    }\n\n    const scrollBarHeight = (type) => {\n      return listRefsMap[type].value.$el.offsetHeight\n    }\n\n    const bindScrollEvent = () => {\n      const bindFuntion = (type) => {\n        if (listRefsMap[type].value) {\n          listRefsMap[type].value.$el.querySelector(\n            '.el-scrollbar__wrap'\n          ).onscroll = () => {\n            // TODO: scroll is emitted when set scrollTop programatically\n            // should find better solutions in the future!\n            handleScroll(type)\n          }\n        }\n      }\n      bindFuntion('hours')\n      bindFuntion('minutes')\n      bindFuntion('seconds')\n    }\n\n    onMounted(() => {\n      nextTick(() => {\n        !props.arrowControl && bindScrollEvent()\n        adjustSpinners()\n        // set selection on the first hour part\n        if (props.role === 'start') emitSelectRange('hours')\n      })\n    })\n\n    const getRefId = (item) => {\n      return `list${item.charAt(0).toUpperCase() + item.slice(1)}Ref`\n    }\n\n    ctx.emit('set-option', [`${props.role}_scrollDown`, scrollDown])\n    ctx.emit('set-option', [`${props.role}_emitSelectRange`, emitSelectRange])\n\n    const { getHoursList, getMinutesList, getSecondsList } = getTimeLists(\n      props.disabledHours,\n      props.disabledMinutes,\n      props.disabledSeconds\n    )\n\n    watch(\n      () => props.spinnerDate,\n      () => {\n        if (isScrolling) return\n        adjustSpinners()\n      }\n    )\n\n    return {\n      getRefId,\n      spinnerItems,\n      currentScrollbar,\n      hours,\n      minutes,\n      seconds,\n      hoursList,\n      minutesList,\n      arrowHourList,\n      arrowMinuteList,\n      arrowSecondList,\n      getAmPmFlag,\n      emitSelectRange,\n      adjustCurrentSpinner,\n      typeItemHeight,\n      listHoursRef,\n      listMinutesRef,\n      listSecondsRef,\n      onIncreaseClick,\n      onDecreaseClick,\n      handleClick,\n      secondsList,\n      timePartsMap,\n      arrowListMap,\n      listMap,\n    }\n  },\n})\n</script>\n"],"names":["_createElementBlock","_createBlock","_createVNode","_createElementVNode"],"mappings":";;;;qBAmDY,OAAM;;;;;;;sBAlDhBA;IAAK,uBAAM,oCAA2C;;KACnC,sCACfA,oDACiB,oBAAR;0BADTC;QAEG,KAAK;AAAA,QACL,KAAK,cAAS;AAAA,QACf,OAAM;AAAA,QACN,cAAW;AAAA,QACX,cAAW;AAAA,QACX,UAAA;AAAA,QACA,KAAI;AAAA,QACH,0BAAY,qBAAgB;AAAA,QAC5B,yBAAW,0BAAqB;AAAA;yBAG/B;4BADFD,8CAC4B,aAAQ,MAAM,QAAhC,UAAU;gCADpBA;cAEG;AAAA,cACD,uBAAM,mCACY,QAAQ,kBAAa,MAAM,OAAO;AAAA,cACnD,qBAAO,iBAAY,eAAe,KAAK;AAAA;cAExB,iCAAhBA;wEACwB,iBAAiB,MAAM,6BACxC,iBAAY;wCAEnBA;uDACY,KAAK;;;;;;;;IAKP,sCACdA,oDACiB,oBAAR;0BADTA;QAEG,KAAK;AAAA,QACN,OAAM;AAAA,QACL,0BAAY,qBAAgB;AAAA;uBAE7BE,kCAEE,OAAM;2BAEN;YAAAA;;;;oCAHgB;;uBAKlBA,kCAEE,OAAM;2BAEN;YAAAA;;;;oCAHgB;;QAKlBC,yBAAA;4BACEH,8CACwB,kBAAa,MAAM,QAAjC,MAAM;gCADhBA;cAEG;AAAA,cACD,uBAAM;;;;;cAMU,qBAAhBA;gBACkB,iCAAhBA;0EACwB,kBAAkB,OAAO,6BAC1C,iBAAY;0CAEnBA;yDACY,MAAM;;;;;;;;;;;;;"}
+{"version":3,"file":"basic-time-spinner.vue_vue_type_template_id_4fb3c576_lang.mjs","sources":["../../../../../../../packages/components/time-picker/src/time-picker-com/basic-time-spinner.vue?vue&type=template&id=4fb3c576&lang.js"],"sourcesContent":["<template>\n  <div class=\"el-time-spinner\" :class=\"{ 'has-seconds': showSeconds }\">\n    <template v-if=\"!arrowControl\">\n      <el-scrollbar\n        v-for=\"item in spinnerItems\"\n        :key=\"item\"\n        :ref=\"getRefId(item)\"\n        class=\"el-time-spinner__wrapper\"\n        wrap-style=\"max-height: inherit;\"\n        view-class=\"el-time-spinner__list\"\n        noresize\n        tag=\"ul\"\n        @mouseenter=\"emitSelectRange(item)\"\n        @mousemove=\"adjustCurrentSpinner(item)\"\n      >\n        <li\n          v-for=\"(disabled, key) in listMap[item].value\"\n          :key=\"key\"\n          class=\"el-time-spinner__item\"\n          :class=\"{ active: key === timePartsMap[item].value, disabled }\"\n          @click=\"handleClick(item, { value: key, disabled })\"\n        >\n          <template v-if=\"item === 'hours'\">\n            {{ ('0' + (amPmMode ? key % 12 || 12 : key)).slice(-2)\n            }}{{ getAmPmFlag(key) }}\n          </template>\n          <template v-else>\n            {{ ('0' + key).slice(-2) }}\n          </template>\n        </li>\n      </el-scrollbar>\n    </template>\n    <template v-if=\"arrowControl\">\n      <div\n        v-for=\"item in spinnerItems\"\n        :key=\"item\"\n        class=\"el-time-spinner__wrapper is-arrow\"\n        @mouseenter=\"emitSelectRange(item)\"\n      >\n        <el-icon\n          v-repeat-click=\"onDecreaseClick\"\n          class=\"el-time-spinner__arrow arrow-up\"\n        >\n          <arrow-up />\n        </el-icon>\n        <el-icon\n          v-repeat-click=\"onIncreaseClick\"\n          class=\"el-time-spinner__arrow arrow-down\"\n        >\n          <arrow-down />\n        </el-icon>\n        <ul class=\"el-time-spinner__list\">\n          <li\n            v-for=\"(time, key) in arrowListMap[item].value\"\n            :key=\"key\"\n            class=\"el-time-spinner__item\"\n            :class=\"{\n              active: time === timePartsMap[item].value,\n              disabled: listMap[item].value[time],\n            }\"\n          >\n            <template v-if=\"time\">\n              <template v-if=\"item === 'hours'\">\n                {{ ('0' + (amPmMode ? time % 12 || 12 : time)).slice(-2)\n                }}{{ getAmPmFlag(time) }}\n              </template>\n              <template v-else>\n                {{ ('0' + time).slice(-2) }}\n              </template>\n            </template>\n          </li>\n        </ul>\n      </div>\n    </template>\n  </div>\n</template>\n<script lang=\"ts\">\nimport { defineComponent, ref, nextTick, computed, onMounted, watch } from 'vue'\nimport debounce from 'lodash/debounce'\nimport { RepeatClick } from '@element-plus/directives'\nimport ElScrollbar from '@element-plus/components/scrollbar'\nimport ElIcon from '@element-plus/components/icon'\nimport { ArrowUp, ArrowDown } from '@element-plus/icons-vue'\nimport { getTimeLists } from './useTimePicker'\n\nimport type { PropType, Ref } from 'vue'\nimport type { Dayjs } from 'dayjs'\nimport type { Nullable } from '@element-plus/utils/types'\n\nexport default defineComponent({\n  directives: {\n    repeatClick: RepeatClick,\n  },\n\n  components: {\n    ElScrollbar,\n    ElIcon,\n    ArrowUp,\n    ArrowDown,\n  },\n\n  props: {\n    role: {\n      type: String,\n      required: true,\n    },\n    spinnerDate: {\n      type: Object as PropType<Dayjs>,\n      required: true,\n    },\n    showSeconds: {\n      type: Boolean,\n      default: true,\n    },\n    arrowControl: Boolean,\n    amPmMode: {\n      type: String,\n      default: '', // 'a': am/pm; 'A': AM/PM\n    },\n    disabledHours: {\n      type: Function,\n    },\n    disabledMinutes: {\n      type: Function,\n    },\n    disabledSeconds: {\n      type: Function,\n    },\n  },\n\n  emits: ['change', 'select-range', 'set-option'],\n\n  setup(props, ctx) {\n    // data\n    let isScrolling = false\n    const debouncedResetScroll = debounce((type) => {\n      isScrolling = false\n      adjustCurrentSpinner(type)\n    }, 200)\n    const currentScrollbar = ref(null)\n    const listHoursRef: Ref<Nullable<HTMLElement>> = ref(null)\n    const listMinutesRef: Ref<Nullable<HTMLElement>> = ref(null)\n    const listSecondsRef: Ref<Nullable<HTMLElement>> = ref(null)\n    const listRefsMap = {\n      hours: listHoursRef,\n      minutes: listMinutesRef,\n      seconds: listSecondsRef,\n    }\n\n    // computed\n    const spinnerItems = computed(() => {\n      const arr = ['hours', 'minutes', 'seconds']\n      return props.showSeconds ? arr : arr.slice(0, 2)\n    })\n    const hours = computed(() => {\n      return props.spinnerDate.hour()\n    })\n    const minutes = computed(() => {\n      return props.spinnerDate.minute()\n    })\n    const seconds = computed(() => {\n      return props.spinnerDate.second()\n    })\n    const timePartsMap = computed(() => ({\n      hours,\n      minutes,\n      seconds,\n    }))\n    const hoursList = computed(() => {\n      return getHoursList(props.role)\n    })\n    const minutesList = computed(() => {\n      return getMinutesList(hours.value, props.role)\n    })\n    const secondsList = computed(() => {\n      return getSecondsList(hours.value, minutes.value, props.role)\n    })\n    const listMap = computed(() => ({\n      hours: hoursList,\n      minutes: minutesList,\n      seconds: secondsList,\n    }))\n    const arrowHourList = computed(() => {\n      const hour = hours.value\n      return [\n        hour > 0 ? hour - 1 : undefined,\n        hour,\n        hour < 23 ? hour + 1 : undefined,\n      ]\n    })\n    const arrowMinuteList = computed(() => {\n      const minute = minutes.value\n      return [\n        minute > 0 ? minute - 1 : undefined,\n        minute,\n        minute < 59 ? minute + 1 : undefined,\n      ]\n    })\n    const arrowSecondList = computed(() => {\n      const second = seconds.value\n      return [\n        second > 0 ? second - 1 : undefined,\n        second,\n        second < 59 ? second + 1 : undefined,\n      ]\n    })\n    const arrowListMap = computed(() => ({\n      hours: arrowHourList,\n      minutes: arrowMinuteList,\n      seconds: arrowSecondList,\n    }))\n    const getAmPmFlag = (hour) => {\n      const shouldShowAmPm = !!props.amPmMode\n      if (!shouldShowAmPm) return ''\n      const isCapital = props.amPmMode === 'A'\n      // todo locale\n      let content = hour < 12 ? ' am' : ' pm'\n      if (isCapital) content = content.toUpperCase()\n      return content\n    }\n\n    const emitSelectRange = (type) => {\n      if (type === 'hours') {\n        ctx.emit('select-range', 0, 2)\n      } else if (type === 'minutes') {\n        ctx.emit('select-range', 3, 5)\n      } else if (type === 'seconds') {\n        ctx.emit('select-range', 6, 8)\n      }\n      currentScrollbar.value = type\n    }\n\n    const adjustCurrentSpinner = (type) => {\n      adjustSpinner(type, timePartsMap.value[type].value)\n    }\n\n    // NOTE: used by datetime / date-range panel\n    //       renamed from adjustScrollTop\n    //       should try to refactory it\n    const adjustSpinners = () => {\n      adjustCurrentSpinner('hours')\n      adjustCurrentSpinner('minutes')\n      adjustCurrentSpinner('seconds')\n    }\n\n    const adjustSpinner = (type, value) => {\n      if (props.arrowControl) return\n      const el = listRefsMap[type]\n      if (el.value) {\n        el.value.$el.querySelector('.el-scrollbar__wrap').scrollTop = Math.max(\n          0,\n          value * typeItemHeight(type)\n        )\n      }\n    }\n\n    const typeItemHeight = (type) => {\n      const el = listRefsMap[type]\n      return el.value.$el.querySelector('li').offsetHeight\n    }\n\n    const onIncreaseClick = () => {\n      scrollDown(1)\n    }\n\n    const onDecreaseClick = () => {\n      scrollDown(-1)\n    }\n\n    const scrollDown = (step) => {\n      if (!currentScrollbar.value) {\n        emitSelectRange('hours')\n      }\n\n      const label = currentScrollbar.value\n      let now = timePartsMap.value[label].value\n      const total = currentScrollbar.value === 'hours' ? 24 : 60\n      now = (now + step + total) % total\n\n      modifyDateField(label, now)\n      adjustSpinner(label, now)\n      nextTick(() => emitSelectRange(currentScrollbar.value))\n    }\n\n    const modifyDateField = (type, value) => {\n      const list = listMap.value[type].value\n      const isDisabled = list[value]\n      if (isDisabled) return\n      switch (type) {\n        case 'hours':\n          ctx.emit(\n            'change',\n            props.spinnerDate\n              .hour(value)\n              .minute(minutes.value)\n              .second(seconds.value)\n          )\n          break\n        case 'minutes':\n          ctx.emit(\n            'change',\n            props.spinnerDate\n              .hour(hours.value)\n              .minute(value)\n              .second(seconds.value)\n          )\n          break\n        case 'seconds':\n          ctx.emit(\n            'change',\n            props.spinnerDate\n              .hour(hours.value)\n              .minute(minutes.value)\n              .second(value)\n          )\n          break\n      }\n    }\n\n    const handleClick = (type, { value, disabled }) => {\n      if (!disabled) {\n        modifyDateField(type, value)\n        emitSelectRange(type)\n        adjustSpinner(type, value)\n      }\n    }\n\n    const handleScroll = (type) => {\n      isScrolling = true\n      debouncedResetScroll(type)\n      const value = Math.min(\n        Math.round(\n          (listRefsMap[type].value.$el.querySelector('.el-scrollbar__wrap')\n            .scrollTop -\n            (scrollBarHeight(type) * 0.5 - 10) / typeItemHeight(type) +\n            3) /\n            typeItemHeight(type)\n        ),\n        type === 'hours' ? 23 : 59\n      )\n      modifyDateField(type, value)\n    }\n\n    const scrollBarHeight = (type) => {\n      return listRefsMap[type].value.$el.offsetHeight\n    }\n\n    const bindScrollEvent = () => {\n      const bindFuntion = (type) => {\n        if (listRefsMap[type].value) {\n          listRefsMap[type].value.$el.querySelector(\n            '.el-scrollbar__wrap'\n          ).onscroll = () => {\n            // TODO: scroll is emitted when set scrollTop programatically\n            // should find better solutions in the future!\n            handleScroll(type)\n          }\n        }\n      }\n      bindFuntion('hours')\n      bindFuntion('minutes')\n      bindFuntion('seconds')\n    }\n\n    onMounted(() => {\n      nextTick(() => {\n        !props.arrowControl && bindScrollEvent()\n        adjustSpinners()\n        // set selection on the first hour part\n        if (props.role === 'start') emitSelectRange('hours')\n      })\n    })\n\n    const getRefId = (item) => {\n      return `list${item.charAt(0).toUpperCase() + item.slice(1)}Ref`\n    }\n\n    ctx.emit('set-option', [`${props.role}_scrollDown`, scrollDown])\n    ctx.emit('set-option', [`${props.role}_emitSelectRange`, emitSelectRange])\n\n    const { getHoursList, getMinutesList, getSecondsList } = getTimeLists(\n      props.disabledHours,\n      props.disabledMinutes,\n      props.disabledSeconds\n    )\n\n    watch(\n      () => props.spinnerDate,\n      () => {\n        if (isScrolling) return\n        adjustSpinners()\n      }\n    )\n\n    return {\n      getRefId,\n      spinnerItems,\n      currentScrollbar,\n      hours,\n      minutes,\n      seconds,\n      hoursList,\n      minutesList,\n      arrowHourList,\n      arrowMinuteList,\n      arrowSecondList,\n      getAmPmFlag,\n      emitSelectRange,\n      adjustCurrentSpinner,\n      typeItemHeight,\n      listHoursRef,\n      listMinutesRef,\n      listSecondsRef,\n      onIncreaseClick,\n      onDecreaseClick,\n      handleClick,\n      secondsList,\n      timePartsMap,\n      arrowListMap,\n      listMap,\n    }\n  },\n})\n</script>\n"],"names":["_createElementBlock","_createBlock","_createVNode","_createElementVNode"],"mappings":";;;;qBAmDY,OAAM;;;;;;;sBAlDhBA;IAAK,uBAAM,oCAA2C;;KACnC,sCACfA,oDACiB,oBAAR;0BADTC;QAEG,KAAK;AAAA,QACL,KAAK,cAAS;AAAA,QACf,OAAM;AAAA,QACN,cAAW;AAAA,QACX,cAAW;AAAA,QACX,UAAA;AAAA,QACA,KAAI;AAAA,QACH,0BAAY,qBAAgB;AAAA,QAC5B,yBAAW,0BAAqB;AAAA;yBAG/B;4BADFD,8CAC4B,aAAQ,MAAM,QAAhC,UAAU;gCADpBA;cAEG;AAAA,cACD,uBAAM,mCACY,QAAQ,kBAAa,MAAM,OAAO;AAAA,cACnD,qBAAO,iBAAY,eAAe,KAAK;AAAA;cAExB,iCAAhBA;wEACwB,iBAAiB,MAAM,6BACxC,iBAAY;wCAEnBA;uDACY,KAAK;;;;;;;;IAKP,sCACdA,oDACiB,oBAAR;0BADTA;QAEG,KAAK;AAAA,QACN,OAAM;AAAA,QACL,0BAAY,qBAAgB;AAAA;uBAE7BE,kCAEE,OAAM;2BAEN;YAAAA;;;;oCAHgB;;uBAKlBA,kCAEE,OAAM;2BAEN;YAAAA;;;;oCAHgB;;QAKlBC,yBAAA;4BACEH,8CACwB,kBAAa,MAAM,QAAjC,MAAM;gCADhBA;cAEG;AAAA,cACD,uBAAM;;;;;cAMU,qBAAhBA;gBACkB,iCAAhBA;0EACwB,kBAAkB,OAAO,6BAC1C,iBAAY;0CAEnBA;yDACY,MAAM;;;;;;;;;;;;;"}

package/es/components/time-picker/src/time-picker-com/panel-time-pick.vue.d.ts

@@ -31,7 +31,7 @@ declare const _default: import("vue").DefineComponent<{
     disabledHours: any;
     disabledMinutes: any;
     disabledSeconds: any;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("pick" | "select-range" | "set-picker-option")[], "pick" | "select-range" | "set-picker-option", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("select-range" | "pick" | "set-picker-option")[], "pick" | "select-range" | "set-picker-option", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     visible?: unknown;
     actualVisible?: unknown;
     datetimeRole?: unknown;

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

@@ -30,7 +30,7 @@ declare const _default: import("vue").DefineComponent<{
     disabledHours_: (role: any, compare: any) => never[];
     disabledMinutes_: (hour: any, role: any, compare: any) => any;
     disabledSeconds_: (hour: any, minute: any, role: any, compare: any) => any;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("pick" | "select-range" | "set-picker-option")[], "pick" | "select-range" | "set-picker-option", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("select-range" | "pick" | "set-picker-option")[], "pick" | "select-range" | "set-picker-option", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     visible?: unknown;
     actualVisible?: unknown;
     parsedValue?: unknown;

package/es/components/time-picker/src/time-picker-com/useTimePicker.d.ts

@@ -54,7 +54,7 @@ export declare const useOldValue: (props: {
     startOf: (unit: import("dayjs").OpUnitType) => Dayjs;
     endOf: (unit: import("dayjs").OpUnitType) => Dayjs;
     format: (template?: string | undefined) => string;
-    diff: (date?: string | number | Date | Dayjs | null | undefined, unit?: "week" | "year" | "weeks" | "months" | "M" | "s" | "y" | "month" | "date" | "dates" | "millisecond" | "second" | "minute" | "hour" | "day" | "milliseconds" | "seconds" | "minutes" | "hours" | "days" | "years" | "d" | "h" | "m" | "ms" | "w" | "quarter" | "quarters" | "Q" | undefined, float?: boolean | undefined) => number;
+    diff: (date?: string | number | Date | Dayjs | null | undefined, unit?: "M" | "s" | "y" | "year" | "month" | "date" | "dates" | "week" | "weeks" | "months" | "hours" | "minutes" | "seconds" | "h" | "day" | "millisecond" | "second" | "minute" | "hour" | "milliseconds" | "days" | "years" | "d" | "m" | "ms" | "w" | "quarter" | "quarters" | "Q" | undefined, float?: boolean | undefined) => number;
     valueOf: () => number;
     unix: () => number;
     daysInMonth: () => number;
@@ -124,7 +124,7 @@ export declare const useOldValue: (props: {
     startOf: (unit: import("dayjs").OpUnitType) => Dayjs;
     endOf: (unit: import("dayjs").OpUnitType) => Dayjs;
     format: (template?: string | undefined) => string;
-    diff: (date?: string | number | Date | Dayjs | null | undefined, unit?: "week" | "year" | "weeks" | "months" | "M" | "s" | "y" | "month" | "date" | "dates" | "millisecond" | "second" | "minute" | "hour" | "day" | "milliseconds" | "seconds" | "minutes" | "hours" | "days" | "years" | "d" | "h" | "m" | "ms" | "w" | "quarter" | "quarters" | "Q" | undefined, float?: boolean | undefined) => number;
+    diff: (date?: string | number | Date | Dayjs | null | undefined, unit?: "M" | "s" | "y" | "year" | "month" | "date" | "dates" | "week" | "weeks" | "months" | "hours" | "minutes" | "seconds" | "h" | "day" | "millisecond" | "second" | "minute" | "hour" | "milliseconds" | "days" | "years" | "d" | "m" | "ms" | "w" | "quarter" | "quarters" | "Q" | undefined, float?: boolean | undefined) => number;
     valueOf: () => number;
     unix: () => number;
     daysInMonth: () => number;

package/es/components/time-picker/src/time-picker.d.ts

@@ -58,7 +58,7 @@ declare const _default: import("vue").DefineComponent<{
         default: () => {};
     };
     modelValue: {
-        type: import("vue").PropType<string | Date | Date[]>;
+        type: import("vue").PropType<string | Date | (number | Date)[]>;
         default: string;
     };
     rangeSeparator: {
@@ -135,14 +135,14 @@ declare const _default: import("vue").DefineComponent<{
     validateEvent?: unknown;
     unlinkPanels?: unknown;
 } & {
-    placeholder: string;
     type: string;
     disabled: boolean;
-    modelValue: string | Date | Date[];
     name: string | unknown[];
+    modelValue: string | Date | (number | Date)[];
     editable: boolean;
     popperClass: string;
     popperOptions: Partial<import("@popperjs/core").Options>;
+    placeholder: string;
     readonly: boolean;
     clearable: boolean;
     prefixIcon: string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>;
@@ -169,14 +169,14 @@ declare const _default: import("vue").DefineComponent<{
 }> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
-    placeholder: string;
     type: string;
     disabled: boolean;
-    modelValue: string | Date | Date[];
     name: string | unknown[];
+    modelValue: string | Date | (number | Date)[];
     editable: boolean;
     popperClass: string;
     popperOptions: Partial<import("@popperjs/core").Options>;
+    placeholder: string;
     readonly: boolean;
     clearable: boolean;
     prefixIcon: string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>;

package/es/components/time-select/index.d.ts

@@ -76,13 +76,13 @@ declare const _TimeSelect: SFCWithInstall<import("vue").DefineComponent<{
     prefixIcon?: unknown;
     clearIcon?: unknown;
 } & {
-    placeholder: string;
     size: import("element-plus/es/utils/types").ComponentSize;
     disabled: boolean;
     name: string;
     editable: boolean;
     end: string;
     start: string;
+    placeholder: string;
     clearable: boolean;
     prefixIcon: string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>;
     clearIcon: string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>;
@@ -97,13 +97,13 @@ declare const _TimeSelect: SFCWithInstall<import("vue").DefineComponent<{
     onBlur?: ((...args: any[]) => any) | undefined;
     onFocus?: ((...args: any[]) => any) | undefined;
 }, {
-    placeholder: string;
     size: import("element-plus/es/utils/types").ComponentSize;
     disabled: boolean;
     name: string;
     editable: boolean;
     end: string;
     start: string;
+    placeholder: string;
     clearable: boolean;
     prefixIcon: string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>;
     clearIcon: string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>;
@@ -189,13 +189,13 @@ export declare const ElTimeSelect: SFCWithInstall<import("vue").DefineComponent<
     prefixIcon?: unknown;
     clearIcon?: unknown;
 } & {
-    placeholder: string;
     size: import("element-plus/es/utils/types").ComponentSize;
     disabled: boolean;
     name: string;
     editable: boolean;
     end: string;
     start: string;
+    placeholder: string;
     clearable: boolean;
     prefixIcon: string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>;
     clearIcon: string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>;
@@ -210,13 +210,13 @@ export declare const ElTimeSelect: SFCWithInstall<import("vue").DefineComponent<
     onBlur?: ((...args: any[]) => any) | undefined;
     onFocus?: ((...args: any[]) => any) | undefined;
 }, {
-    placeholder: string;
     size: import("element-plus/es/utils/types").ComponentSize;
     disabled: boolean;
     name: string;
     editable: boolean;
     end: string;
     start: string;
+    placeholder: string;
     clearable: boolean;
     prefixIcon: string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>;
     clearIcon: string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>;

package/es/components/time-select/src/time-select.vue.d.ts

@@ -77,13 +77,13 @@ declare const _default: import("vue").DefineComponent<{
     prefixIcon?: unknown;
     clearIcon?: unknown;
 } & {
-    placeholder: string;
     size: ComponentSize;
     disabled: boolean;
     name: string;
     editable: boolean;
     end: string;
     start: string;
+    placeholder: string;
     clearable: boolean;
     prefixIcon: string | Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>;
     clearIcon: string | Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>;
@@ -98,13 +98,13 @@ declare const _default: import("vue").DefineComponent<{
     onBlur?: ((...args: any[]) => any) | undefined;
     onFocus?: ((...args: any[]) => any) | undefined;
 }, {
-    placeholder: string;
     size: ComponentSize;
     disabled: boolean;
     name: string;
     editable: boolean;
     end: string;
     start: string;
+    placeholder: string;
     clearable: boolean;
     prefixIcon: string | Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>;
     clearIcon: string | Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>;

package/es/components/time-select/src/time-select.vue_vue_type_script_lang.mjs

@@ -1,7 +1,7 @@
 import { defineComponent, ref, computed } from 'vue';
 import { ElSelect } from '../../select/index.mjs';
 import { ElIcon } from '../../icon/index.mjs';
-import { Clock, CircleClose } from '@element-plus/icons';
+import { Clock, CircleClose } from '@element-plus/icons-vue';
 
 const { Option: ElOption } = ElSelect;
 const parseTime = (time) => {

package/es/components/time-select/src/time-select.vue_vue_type_script_lang.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"time-select.vue_vue_type_script_lang.mjs","sources":["../../../../../../packages/components/time-select/src/time-select.vue"],"sourcesContent":["<template>\n  <el-select\n    ref=\"select\"\n    :model-value=\"value\"\n    :disabled=\"disabled\"\n    :clearable=\"clearable\"\n    :clear-icon=\"clearIcon\"\n    :size=\"size\"\n    :placeholder=\"placeholder\"\n    default-first-option\n    :filterable=\"editable\"\n    @update:model-value=\"(event) => $emit('update:modelValue', event)\"\n    @change=\"(event) => $emit('change', event)\"\n    @blur=\"(event) => $emit('blur', event)\"\n    @focus=\"(event) => $emit('focus', event)\"\n  >\n    <el-option\n      v-for=\"item in items\"\n      :key=\"item.value\"\n      :label=\"item.value\"\n      :value=\"item.value\"\n      :disabled=\"item.disabled\"\n    />\n    <template #prefix>\n      <el-icon v-if=\"prefixIcon\" class=\"el-input__prefix-icon\">\n        <component :is=\"prefixIcon\" />\n      </el-icon>\n    </template>\n  </el-select>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, computed, ref } from 'vue'\nimport ElSelect from '@element-plus/components/select'\nimport ElIcon from '@element-plus/components/icon'\nimport { CircleClose, Clock } from '@element-plus/icons'\n\nimport type { PropType, Component } from 'vue'\nimport type { ComponentSize } from '@element-plus/utils/types'\n\nconst { Option: ElOption } = ElSelect\n\ninterface Time {\n  hours: number\n  minutes: number\n}\n\nconst parseTime = (time: string): null | Time => {\n  const values = (time || '').split(':')\n  if (values.length >= 2) {\n    const hours = parseInt(values[0], 10)\n    const minutes = parseInt(values[1], 10)\n    return {\n      hours,\n      minutes,\n    }\n  }\n  return null\n}\nconst compareTime = (time1: string, time2: string): number => {\n  const value1 = parseTime(time1)\n  const value2 = parseTime(time2)\n  const minutes1 = value1.minutes + value1.hours * 60\n  const minutes2 = value2.minutes + value2.hours * 60\n  if (minutes1 === minutes2) {\n    return 0\n  }\n  return minutes1 > minutes2 ? 1 : -1\n}\nconst formatTime = (time: Time): string => {\n  return `${time.hours < 10 ? `0${time.hours}` : time.hours}:${\n    time.minutes < 10 ? `0${time.minutes}` : time.minutes\n  }`\n}\nconst nextTime = (time: string, step: string): string => {\n  const timeValue = parseTime(time)\n  const stepValue = parseTime(step)\n  const next = {\n    hours: timeValue.hours,\n    minutes: timeValue.minutes,\n  }\n  next.minutes += stepValue.minutes\n  next.hours += stepValue.hours\n  next.hours += Math.floor(next.minutes / 60)\n  next.minutes = next.minutes % 60\n  return formatTime(next)\n}\n\nexport default defineComponent({\n  name: 'ElTimeSelect',\n  components: { ElSelect, ElOption, ElIcon },\n  model: {\n    prop: 'value',\n    event: 'change',\n  },\n  props: {\n    modelValue: String,\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n    editable: {\n      type: Boolean,\n      default: true,\n    },\n    clearable: {\n      type: Boolean,\n      default: true,\n    },\n    size: {\n      type: String as PropType<ComponentSize>,\n      default: '',\n      validator: (value: string) =>\n        !value || ['medium', 'small', 'mini'].indexOf(value) !== -1,\n    },\n    placeholder: {\n      type: String,\n      default: '',\n    },\n    start: {\n      type: String,\n      default: '09:00',\n    },\n    end: {\n      type: String,\n      default: '18:00',\n    },\n    step: {\n      type: String,\n      default: '00:30',\n    },\n    minTime: {\n      type: String,\n      default: '',\n    },\n    maxTime: {\n      type: String,\n      default: '',\n    },\n    name: {\n      type: String,\n      default: '',\n    },\n    prefixIcon: {\n      type: [String, Object] as PropType<string | Component>,\n      default: Clock,\n    },\n    clearIcon: {\n      type: [String, Object] as PropType<string | Component>,\n      default: CircleClose,\n    },\n  },\n  emits: ['change', 'blur', 'focus', 'update:modelValue'],\n  setup(props) {\n    // computed\n    const select = ref(null)\n    const value = computed(() => props.modelValue)\n    const items = computed(() => {\n      const result = []\n      if (props.start && props.end && props.step) {\n        let current = props.start\n        while (compareTime(current, props.end) <= 0) {\n          result.push({\n            value: current,\n            disabled:\n              compareTime(current, props.minTime || '-1:-1') <= 0 ||\n              compareTime(current, props.maxTime || '100:100') >= 0,\n          })\n          current = nextTime(current, props.step)\n        }\n      }\n      return result\n    })\n    const blur = () => {\n      select.value?.blur?.()\n    }\n    const focus = () => {\n      select.value?.focus?.()\n    }\n\n    return {\n      select,\n      value,\n      items,\n      blur,\n      focus,\n    }\n  },\n})\n</script>\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"time-select.vue_vue_type_script_lang.mjs","sources":["../../../../../../packages/components/time-select/src/time-select.vue"],"sourcesContent":["<template>\n  <el-select\n    ref=\"select\"\n    :model-value=\"value\"\n    :disabled=\"disabled\"\n    :clearable=\"clearable\"\n    :clear-icon=\"clearIcon\"\n    :size=\"size\"\n    :placeholder=\"placeholder\"\n    default-first-option\n    :filterable=\"editable\"\n    @update:model-value=\"(event) => $emit('update:modelValue', event)\"\n    @change=\"(event) => $emit('change', event)\"\n    @blur=\"(event) => $emit('blur', event)\"\n    @focus=\"(event) => $emit('focus', event)\"\n  >\n    <el-option\n      v-for=\"item in items\"\n      :key=\"item.value\"\n      :label=\"item.value\"\n      :value=\"item.value\"\n      :disabled=\"item.disabled\"\n    />\n    <template #prefix>\n      <el-icon v-if=\"prefixIcon\" class=\"el-input__prefix-icon\">\n        <component :is=\"prefixIcon\" />\n      </el-icon>\n    </template>\n  </el-select>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, computed, ref } from 'vue'\nimport ElSelect from '@element-plus/components/select'\nimport ElIcon from '@element-plus/components/icon'\nimport { CircleClose, Clock } from '@element-plus/icons-vue'\n\nimport type { PropType, Component } from 'vue'\nimport type { ComponentSize } from '@element-plus/utils/types'\n\nconst { Option: ElOption } = ElSelect\n\ninterface Time {\n  hours: number\n  minutes: number\n}\n\nconst parseTime = (time: string): null | Time => {\n  const values = (time || '').split(':')\n  if (values.length >= 2) {\n    const hours = parseInt(values[0], 10)\n    const minutes = parseInt(values[1], 10)\n    return {\n      hours,\n      minutes,\n    }\n  }\n  return null\n}\nconst compareTime = (time1: string, time2: string): number => {\n  const value1 = parseTime(time1)\n  const value2 = parseTime(time2)\n  const minutes1 = value1.minutes + value1.hours * 60\n  const minutes2 = value2.minutes + value2.hours * 60\n  if (minutes1 === minutes2) {\n    return 0\n  }\n  return minutes1 > minutes2 ? 1 : -1\n}\nconst formatTime = (time: Time): string => {\n  return `${time.hours < 10 ? `0${time.hours}` : time.hours}:${\n    time.minutes < 10 ? `0${time.minutes}` : time.minutes\n  }`\n}\nconst nextTime = (time: string, step: string): string => {\n  const timeValue = parseTime(time)\n  const stepValue = parseTime(step)\n  const next = {\n    hours: timeValue.hours,\n    minutes: timeValue.minutes,\n  }\n  next.minutes += stepValue.minutes\n  next.hours += stepValue.hours\n  next.hours += Math.floor(next.minutes / 60)\n  next.minutes = next.minutes % 60\n  return formatTime(next)\n}\n\nexport default defineComponent({\n  name: 'ElTimeSelect',\n  components: { ElSelect, ElOption, ElIcon },\n  model: {\n    prop: 'value',\n    event: 'change',\n  },\n  props: {\n    modelValue: String,\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n    editable: {\n      type: Boolean,\n      default: true,\n    },\n    clearable: {\n      type: Boolean,\n      default: true,\n    },\n    size: {\n      type: String as PropType<ComponentSize>,\n      default: '',\n      validator: (value: string) =>\n        !value || ['medium', 'small', 'mini'].indexOf(value) !== -1,\n    },\n    placeholder: {\n      type: String,\n      default: '',\n    },\n    start: {\n      type: String,\n      default: '09:00',\n    },\n    end: {\n      type: String,\n      default: '18:00',\n    },\n    step: {\n      type: String,\n      default: '00:30',\n    },\n    minTime: {\n      type: String,\n      default: '',\n    },\n    maxTime: {\n      type: String,\n      default: '',\n    },\n    name: {\n      type: String,\n      default: '',\n    },\n    prefixIcon: {\n      type: [String, Object] as PropType<string | Component>,\n      default: Clock,\n    },\n    clearIcon: {\n      type: [String, Object] as PropType<string | Component>,\n      default: CircleClose,\n    },\n  },\n  emits: ['change', 'blur', 'focus', 'update:modelValue'],\n  setup(props) {\n    // computed\n    const select = ref(null)\n    const value = computed(() => props.modelValue)\n    const items = computed(() => {\n      const result = []\n      if (props.start && props.end && props.step) {\n        let current = props.start\n        while (compareTime(current, props.end) <= 0) {\n          result.push({\n            value: current,\n            disabled:\n              compareTime(current, props.minTime || '-1:-1') <= 0 ||\n              compareTime(current, props.maxTime || '100:100') >= 0,\n          })\n          current = nextTime(current, props.step)\n        }\n      }\n      return result\n    })\n    const blur = () => {\n      select.value?.blur?.()\n    }\n    const focus = () => {\n      select.value?.focus?.()\n    }\n\n    return {\n      select,\n      value,\n      items,\n      blur,\n      focus,\n    }\n  },\n})\n</script>\n"],"names":[],"mappings":"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"}

package/es/components/time-select/src/time-select.vue_vue_type_template_id_5beb6389_lang.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"time-select.vue_vue_type_template_id_5beb6389_lang.mjs","sources":["../../../../../../packages/components/time-select/src/time-select.vue?vue&type=template&id=5beb6389&lang.js"],"sourcesContent":["<template>\n  <el-select\n    ref=\"select\"\n    :model-value=\"value\"\n    :disabled=\"disabled\"\n    :clearable=\"clearable\"\n    :clear-icon=\"clearIcon\"\n    :size=\"size\"\n    :placeholder=\"placeholder\"\n    default-first-option\n    :filterable=\"editable\"\n    @update:model-value=\"(event) => $emit('update:modelValue', event)\"\n    @change=\"(event) => $emit('change', event)\"\n    @blur=\"(event) => $emit('blur', event)\"\n    @focus=\"(event) => $emit('focus', event)\"\n  >\n    <el-option\n      v-for=\"item in items\"\n      :key=\"item.value\"\n      :label=\"item.value\"\n      :value=\"item.value\"\n      :disabled=\"item.disabled\"\n    />\n    <template #prefix>\n      <el-icon v-if=\"prefixIcon\" class=\"el-input__prefix-icon\">\n        <component :is=\"prefixIcon\" />\n      </el-icon>\n    </template>\n  </el-select>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, computed, ref } from 'vue'\nimport ElSelect from '@element-plus/components/select'\nimport ElIcon from '@element-plus/components/icon'\nimport { CircleClose, Clock } from '@element-plus/icons'\n\nimport type { PropType, Component } from 'vue'\nimport type { ComponentSize } from '@element-plus/utils/types'\n\nconst { Option: ElOption } = ElSelect\n\ninterface Time {\n  hours: number\n  minutes: number\n}\n\nconst parseTime = (time: string): null | Time => {\n  const values = (time || '').split(':')\n  if (values.length >= 2) {\n    const hours = parseInt(values[0], 10)\n    const minutes = parseInt(values[1], 10)\n    return {\n      hours,\n      minutes,\n    }\n  }\n  return null\n}\nconst compareTime = (time1: string, time2: string): number => {\n  const value1 = parseTime(time1)\n  const value2 = parseTime(time2)\n  const minutes1 = value1.minutes + value1.hours * 60\n  const minutes2 = value2.minutes + value2.hours * 60\n  if (minutes1 === minutes2) {\n    return 0\n  }\n  return minutes1 > minutes2 ? 1 : -1\n}\nconst formatTime = (time: Time): string => {\n  return `${time.hours < 10 ? `0${time.hours}` : time.hours}:${\n    time.minutes < 10 ? `0${time.minutes}` : time.minutes\n  }`\n}\nconst nextTime = (time: string, step: string): string => {\n  const timeValue = parseTime(time)\n  const stepValue = parseTime(step)\n  const next = {\n    hours: timeValue.hours,\n    minutes: timeValue.minutes,\n  }\n  next.minutes += stepValue.minutes\n  next.hours += stepValue.hours\n  next.hours += Math.floor(next.minutes / 60)\n  next.minutes = next.minutes % 60\n  return formatTime(next)\n}\n\nexport default defineComponent({\n  name: 'ElTimeSelect',\n  components: { ElSelect, ElOption, ElIcon },\n  model: {\n    prop: 'value',\n    event: 'change',\n  },\n  props: {\n    modelValue: String,\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n    editable: {\n      type: Boolean,\n      default: true,\n    },\n    clearable: {\n      type: Boolean,\n      default: true,\n    },\n    size: {\n      type: String as PropType<ComponentSize>,\n      default: '',\n      validator: (value: string) =>\n        !value || ['medium', 'small', 'mini'].indexOf(value) !== -1,\n    },\n    placeholder: {\n      type: String,\n      default: '',\n    },\n    start: {\n      type: String,\n      default: '09:00',\n    },\n    end: {\n      type: String,\n      default: '18:00',\n    },\n    step: {\n      type: String,\n      default: '00:30',\n    },\n    minTime: {\n      type: String,\n      default: '',\n    },\n    maxTime: {\n      type: String,\n      default: '',\n    },\n    name: {\n      type: String,\n      default: '',\n    },\n    prefixIcon: {\n      type: [String, Object] as PropType<string | Component>,\n      default: Clock,\n    },\n    clearIcon: {\n      type: [String, Object] as PropType<string | Component>,\n      default: CircleClose,\n    },\n  },\n  emits: ['change', 'blur', 'focus', 'update:modelValue'],\n  setup(props) {\n    // computed\n    const select = ref(null)\n    const value = computed(() => props.modelValue)\n    const items = computed(() => {\n      const result = []\n      if (props.start && props.end && props.step) {\n        let current = props.start\n        while (compareTime(current, props.end) <= 0) {\n          result.push({\n            value: current,\n            disabled:\n              compareTime(current, props.minTime || '-1:-1') <= 0 ||\n              compareTime(current, props.maxTime || '100:100') >= 0,\n          })\n          current = nextTime(current, props.step)\n        }\n      }\n      return result\n    })\n    const blur = () => {\n      select.value?.blur?.()\n    }\n    const focus = () => {\n      select.value?.focus?.()\n    }\n\n    return {\n      select,\n      value,\n      items,\n      blur,\n      focus,\n    }\n  },\n})\n</script>\n"],"names":["_createBlock","_createElementBlock"],"mappings":";;;;;;sBACEA;IACE,KAAI;AAAA,IACH,eAAa;IACb,UAAU;IACV,WAAW;IACX,cAAY;IACZ,MAAM;IACN,aAAa;IACd,wBAAA;AAAA,IACC,YAAY;IACZ,kDAAqB,UAAU,gCAA2B;AAAA,IAC1D,qCAAS,UAAU,qBAAgB;AAAA,IACnC,mCAAO,UAAU,mBAAc;AAAA,IAC/B,oCAAQ,UAAU,oBAAe;AAAA;IASvB,gBACT;MAAe,gCAAfA;;QAA2B,OAAM;AAAA;yBAC/B;wBAAAA,oCAAgB;;;;;qBARlB;wBADFC,8CACiB,aAAR;4BADTD;UAEG,KAAK,KAAK;AAAA,UACV,OAAO,KAAK;AAAA,UACZ,OAAO,KAAK;AAAA,UACZ,UAAU,KAAK;AAAA;;;;;;;;;"}
+{"version":3,"file":"time-select.vue_vue_type_template_id_5beb6389_lang.mjs","sources":["../../../../../../packages/components/time-select/src/time-select.vue?vue&type=template&id=5beb6389&lang.js"],"sourcesContent":["<template>\n  <el-select\n    ref=\"select\"\n    :model-value=\"value\"\n    :disabled=\"disabled\"\n    :clearable=\"clearable\"\n    :clear-icon=\"clearIcon\"\n    :size=\"size\"\n    :placeholder=\"placeholder\"\n    default-first-option\n    :filterable=\"editable\"\n    @update:model-value=\"(event) => $emit('update:modelValue', event)\"\n    @change=\"(event) => $emit('change', event)\"\n    @blur=\"(event) => $emit('blur', event)\"\n    @focus=\"(event) => $emit('focus', event)\"\n  >\n    <el-option\n      v-for=\"item in items\"\n      :key=\"item.value\"\n      :label=\"item.value\"\n      :value=\"item.value\"\n      :disabled=\"item.disabled\"\n    />\n    <template #prefix>\n      <el-icon v-if=\"prefixIcon\" class=\"el-input__prefix-icon\">\n        <component :is=\"prefixIcon\" />\n      </el-icon>\n    </template>\n  </el-select>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, computed, ref } from 'vue'\nimport ElSelect from '@element-plus/components/select'\nimport ElIcon from '@element-plus/components/icon'\nimport { CircleClose, Clock } from '@element-plus/icons-vue'\n\nimport type { PropType, Component } from 'vue'\nimport type { ComponentSize } from '@element-plus/utils/types'\n\nconst { Option: ElOption } = ElSelect\n\ninterface Time {\n  hours: number\n  minutes: number\n}\n\nconst parseTime = (time: string): null | Time => {\n  const values = (time || '').split(':')\n  if (values.length >= 2) {\n    const hours = parseInt(values[0], 10)\n    const minutes = parseInt(values[1], 10)\n    return {\n      hours,\n      minutes,\n    }\n  }\n  return null\n}\nconst compareTime = (time1: string, time2: string): number => {\n  const value1 = parseTime(time1)\n  const value2 = parseTime(time2)\n  const minutes1 = value1.minutes + value1.hours * 60\n  const minutes2 = value2.minutes + value2.hours * 60\n  if (minutes1 === minutes2) {\n    return 0\n  }\n  return minutes1 > minutes2 ? 1 : -1\n}\nconst formatTime = (time: Time): string => {\n  return `${time.hours < 10 ? `0${time.hours}` : time.hours}:${\n    time.minutes < 10 ? `0${time.minutes}` : time.minutes\n  }`\n}\nconst nextTime = (time: string, step: string): string => {\n  const timeValue = parseTime(time)\n  const stepValue = parseTime(step)\n  const next = {\n    hours: timeValue.hours,\n    minutes: timeValue.minutes,\n  }\n  next.minutes += stepValue.minutes\n  next.hours += stepValue.hours\n  next.hours += Math.floor(next.minutes / 60)\n  next.minutes = next.minutes % 60\n  return formatTime(next)\n}\n\nexport default defineComponent({\n  name: 'ElTimeSelect',\n  components: { ElSelect, ElOption, ElIcon },\n  model: {\n    prop: 'value',\n    event: 'change',\n  },\n  props: {\n    modelValue: String,\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n    editable: {\n      type: Boolean,\n      default: true,\n    },\n    clearable: {\n      type: Boolean,\n      default: true,\n    },\n    size: {\n      type: String as PropType<ComponentSize>,\n      default: '',\n      validator: (value: string) =>\n        !value || ['medium', 'small', 'mini'].indexOf(value) !== -1,\n    },\n    placeholder: {\n      type: String,\n      default: '',\n    },\n    start: {\n      type: String,\n      default: '09:00',\n    },\n    end: {\n      type: String,\n      default: '18:00',\n    },\n    step: {\n      type: String,\n      default: '00:30',\n    },\n    minTime: {\n      type: String,\n      default: '',\n    },\n    maxTime: {\n      type: String,\n      default: '',\n    },\n    name: {\n      type: String,\n      default: '',\n    },\n    prefixIcon: {\n      type: [String, Object] as PropType<string | Component>,\n      default: Clock,\n    },\n    clearIcon: {\n      type: [String, Object] as PropType<string | Component>,\n      default: CircleClose,\n    },\n  },\n  emits: ['change', 'blur', 'focus', 'update:modelValue'],\n  setup(props) {\n    // computed\n    const select = ref(null)\n    const value = computed(() => props.modelValue)\n    const items = computed(() => {\n      const result = []\n      if (props.start && props.end && props.step) {\n        let current = props.start\n        while (compareTime(current, props.end) <= 0) {\n          result.push({\n            value: current,\n            disabled:\n              compareTime(current, props.minTime || '-1:-1') <= 0 ||\n              compareTime(current, props.maxTime || '100:100') >= 0,\n          })\n          current = nextTime(current, props.step)\n        }\n      }\n      return result\n    })\n    const blur = () => {\n      select.value?.blur?.()\n    }\n    const focus = () => {\n      select.value?.focus?.()\n    }\n\n    return {\n      select,\n      value,\n      items,\n      blur,\n      focus,\n    }\n  },\n})\n</script>\n"],"names":["_createBlock","_createElementBlock"],"mappings":";;;;;;sBACEA;IACE,KAAI;AAAA,IACH,eAAa;IACb,UAAU;IACV,WAAW;IACX,cAAY;IACZ,MAAM;IACN,aAAa;IACd,wBAAA;AAAA,IACC,YAAY;IACZ,kDAAqB,UAAU,gCAA2B;AAAA,IAC1D,qCAAS,UAAU,qBAAgB;AAAA,IACnC,mCAAO,UAAU,mBAAc;AAAA,IAC/B,oCAAQ,UAAU,oBAAe;AAAA;IASvB,gBACT;MAAe,gCAAfA;;QAA2B,OAAM;AAAA;yBAC/B;wBAAAA,oCAAgB;;;;;qBARlB;wBADFC,8CACiB,aAAR;4BADTD;UAEG,KAAK,KAAK;AAAA,UACV,OAAO,KAAK;AAAA,UACZ,OAAO,KAAK;AAAA,UACZ,UAAU,KAAK;AAAA;;;;;;;;;"}

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

@@ -50,8 +50,8 @@ export declare const ElTimeline: import("../../utils/types").SFCWithInstall<impo
         hollow?: unknown;
     } & {
         type: string;
-        size: string;
         icon: string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>;
+        size: string;
         color: string;
         center: boolean;
         placement: string;
@@ -60,8 +60,8 @@ export declare const ElTimeline: import("../../utils/types").SFCWithInstall<impo
         hollow: boolean;
     } & {}>, {
         type: string;
-        size: string;
         icon: string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>;
+        size: string;
         color: string;
         center: boolean;
         placement: string;
@@ -120,8 +120,8 @@ export declare const ElTimelineItem: import("../../utils/types").SFCWithInstall<
     hollow?: unknown;
 } & {
     type: string;
-    size: string;
     icon: string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>;
+    size: string;
     color: string;
     center: boolean;
     placement: string;
@@ -130,8 +130,8 @@ export declare const ElTimelineItem: import("../../utils/types").SFCWithInstall<
     hollow: boolean;
 } & {}>, {
     type: string;
-    size: string;
     icon: string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>;
+    size: string;
     color: string;
     center: boolean;
     placement: string;

package/es/components/timeline/src/item.vue.d.ts

@@ -48,8 +48,8 @@ declare const _default: import("vue").DefineComponent<{
     hollow?: unknown;
 } & {
     type: string;
-    size: string;
     icon: string | Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>;
+    size: string;
     color: string;
     center: boolean;
     placement: string;
@@ -58,8 +58,8 @@ declare const _default: import("vue").DefineComponent<{
     hollow: boolean;
 } & {}>, {
     type: string;
-    size: string;
     icon: string | Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>;
+    size: string;
     color: string;
     center: boolean;
     placement: string;

package/es/components/tooltip/src/index.mjs

@@ -64,7 +64,8 @@ var Tooltip = defineComponent({
       showAfter,
       visibleArrow,
       modelValue,
-      tabindex
+      tabindex,
+      fallbackPlacements
     } = this;
     const throwErrorTip = () => {
       throwError("[ElTooltip]", "you need to provide a valid default slot.");
@@ -78,7 +79,8 @@ var Tooltip = defineComponent({
       showAfter: openDelay || showAfter,
       showArrow: visibleArrow,
       visible: modelValue,
-      "onUpdate:visible": onUpdateVisible
+      "onUpdate:visible": onUpdateVisible,
+      fallbackPlacements: fallbackPlacements.length ? fallbackPlacements : ["bottom-start", "top-start", "right", "left"]
     }, {
       default: () => $slots.content ? $slots.content() : content,
       trigger: () => {

package/es/components/tooltip/src/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../../../../packages/components/tooltip/src/index.ts"],"sourcesContent":["import { defineComponent, h, ref, cloneVNode } from 'vue'\nimport {\n  default as ElPopper,\n  popperDefaultProps,\n} from '@element-plus/components/popper'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'\nimport { throwError } from '@element-plus/utils/error'\nimport { getFirstValidNode } from '@element-plus/utils/vnode'\n\n/**\n * ElTooltip\n * Tooltip is essentially an upper layer for Popper, due to popper has already implemented so many functionalities and Popper is essentially a component shared internally\n * Tooltip also does the API translation work for popper.\n * Tooltip shares the exact same API which v2 has, so that the user should be able to\n */\nexport default defineComponent({\n  name: 'ElTooltip',\n  components: {\n    ElPopper,\n  },\n  props: {\n    ...popperDefaultProps,\n    manual: {\n      type: Boolean,\n      default: false,\n    },\n    modelValue: {\n      type: Boolean,\n      validator: (val: unknown) => {\n        return typeof val === 'boolean'\n      },\n      default: undefined,\n    },\n    // This API should be decaprecate since it's confusing with close-delay\n    openDelay: {\n      type: Number,\n      default: 0,\n    },\n    visibleArrow: {\n      type: Boolean,\n      default: true,\n    },\n    tabindex: {\n      type: [String, Number],\n      default: '0',\n    },\n  },\n  emits: [UPDATE_MODEL_EVENT],\n  setup(props, ctx) {\n    // when manual mode is true, v-model must be passed down\n    if (props.manual && typeof props.modelValue === 'undefined') {\n      throwError(\n        '[ElTooltip]',\n        'You need to pass a v-model to el-tooltip when `manual` is true'\n      )\n    }\n\n    const popper = ref(null)\n\n    const onUpdateVisible = (val) => {\n      ctx.emit(UPDATE_MODEL_EVENT, val)\n    }\n\n    const updatePopper = () => {\n      return popper.value.update()\n    }\n\n    return {\n      popper,\n      onUpdateVisible,\n      updatePopper,\n    }\n  },\n  render() {\n    const {\n      $slots,\n      content,\n      manual,\n      openDelay,\n      onUpdateVisible,\n      showAfter,\n      visibleArrow,\n      modelValue,\n      tabindex,\n    } = this\n\n    const throwErrorTip = () => {\n      throwError('[ElTooltip]', 'you need to provide a valid default slot.')\n    }\n\n    const popper = h(\n      ElPopper,\n      {\n        ...Object.keys(popperDefaultProps).reduce((result, key) => {\n          return { ...result, [key]: this[key] }\n        }, {}),\n        ref: 'popper',\n        manualMode: manual,\n        showAfter: openDelay || showAfter, // this is for mapping API due to we decided to rename the current openDelay API to showAfter for better readability,\n        showArrow: visibleArrow,\n        visible: modelValue,\n        'onUpdate:visible': onUpdateVisible,\n      },\n      {\n        default: () => ($slots.content ? $slots.content() : content),\n        trigger: () => {\n          if ($slots.default) {\n            const firstVnode = getFirstValidNode($slots.default(), 1)\n            if (!firstVnode) throwErrorTip()\n            return cloneVNode(firstVnode, { tabindex }, true)\n          }\n          throwErrorTip()\n        },\n      }\n    )\n\n    return popper\n  },\n})\n"],"names":["ElPopper"],"mappings":";;;;;;;AAeA,cAAe,gBAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,cACVA;AAAA;AAAA,EAEF,OAAO;AAAA,OACF;AAAA,IACH,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAA;AAAA,IAEX,YAAY;AAAA,MACV,MAAM;AAAA,MACN,WAAW,CAAC,QAAiB;AAC3B,eAAO,OAAO,QAAQ;AAAA;AAAA,MAExB,SAAS;AAAA;AAAA,IAGX,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA;AAAA,IAEX,cAAc;AAAA,MACZ,MAAM;AAAA,MACN,SAAS;AAAA;AAAA,IAEX,UAAU;AAAA,MACR,MAAM,CAAC,QAAQ;AAAA,MACf,SAAS;AAAA;AAAA;AAAA,EAGb,OAAO,CAAC;AAAA,EACR,MAAM,OAAO,KAAK;AAEhB,QAAI,MAAM,UAAU,OAAO,MAAM,eAAe,aAAa;AAC3D,iBACE,eACA;AAAA;AAIJ,UAAM,SAAS,IAAI;AAEnB,UAAM,kBAAkB,CAAC,QAAQ;AAC/B,UAAI,KAAK,oBAAoB;AAAA;AAG/B,UAAM,eAAe,MAAM;AACzB,aAAO,OAAO,MAAM;AAAA;AAGtB,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA;AAAA;AAAA,EAGJ,SAAS;AACP,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,QACE;AAEJ,UAAM,gBAAgB,MAAM;AAC1B,iBAAW,eAAe;AAAA;AAG5B,UAAM,SAAS,EACbA,SACA;AAAA,SACK,OAAO,KAAK,oBAAoB,OAAO,CAAC,QAAQ,QAAQ;AACzD,eAAO,KAAK,SAAS,MAAM,KAAK;AAAA,SAC/B;AAAA,MACH,KAAK;AAAA,MACL,YAAY;AAAA,MACZ,WAAW,aAAa;AAAA,MACxB,WAAW;AAAA,MACX,SAAS;AAAA,MACT,oBAAoB;AAAA,OAEtB;AAAA,MACE,SAAS,MAAO,OAAO,UAAU,OAAO,YAAY;AAAA,MACpD,SAAS,MAAM;AACb,YAAI,OAAO,SAAS;AAClB,gBAAM,aAAa,kBAAkB,OAAO,WAAW;AACvD,cAAI,CAAC;AAAY;AACjB,iBAAO,WAAW,YAAY,EAAE,YAAY;AAAA;AAE9C;AAAA;AAAA;AAKN,WAAO;AAAA;AAAA;;;;"}
+{"version":3,"file":"index.mjs","sources":["../../../../../../packages/components/tooltip/src/index.ts"],"sourcesContent":["import { defineComponent, h, ref, cloneVNode } from 'vue'\nimport {\n  default as ElPopper,\n  popperDefaultProps,\n} from '@element-plus/components/popper'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'\nimport { throwError } from '@element-plus/utils/error'\nimport { getFirstValidNode } from '@element-plus/utils/vnode'\n\n/**\n * ElTooltip\n * Tooltip is essentially an upper layer for Popper, due to popper has already implemented so many functionalities and Popper is essentially a component shared internally\n * Tooltip also does the API translation work for popper.\n * Tooltip shares the exact same API which v2 has, so that the user should be able to\n */\nexport default defineComponent({\n  name: 'ElTooltip',\n  components: {\n    ElPopper,\n  },\n  props: {\n    ...popperDefaultProps,\n    manual: {\n      type: Boolean,\n      default: false,\n    },\n    modelValue: {\n      type: Boolean,\n      validator: (val: unknown) => {\n        return typeof val === 'boolean'\n      },\n      default: undefined,\n    },\n    // This API should be decaprecate since it's confusing with close-delay\n    openDelay: {\n      type: Number,\n      default: 0,\n    },\n    visibleArrow: {\n      type: Boolean,\n      default: true,\n    },\n    tabindex: {\n      type: [String, Number],\n      default: '0',\n    },\n  },\n  emits: [UPDATE_MODEL_EVENT],\n  setup(props, ctx) {\n    // when manual mode is true, v-model must be passed down\n    if (props.manual && typeof props.modelValue === 'undefined') {\n      throwError(\n        '[ElTooltip]',\n        'You need to pass a v-model to el-tooltip when `manual` is true'\n      )\n    }\n\n    const popper = ref(null)\n\n    const onUpdateVisible = (val) => {\n      ctx.emit(UPDATE_MODEL_EVENT, val)\n    }\n\n    const updatePopper = () => {\n      return popper.value.update()\n    }\n\n    return {\n      popper,\n      onUpdateVisible,\n      updatePopper,\n    }\n  },\n  render() {\n    const {\n      $slots,\n      content,\n      manual,\n      openDelay,\n      onUpdateVisible,\n      showAfter,\n      visibleArrow,\n      modelValue,\n      tabindex,\n      fallbackPlacements,\n    } = this\n\n    const throwErrorTip = () => {\n      throwError('[ElTooltip]', 'you need to provide a valid default slot.')\n    }\n\n    const popper = h(\n      ElPopper,\n      {\n        ...Object.keys(popperDefaultProps).reduce((result, key) => {\n          return { ...result, [key]: this[key] }\n        }, {}),\n        ref: 'popper',\n        manualMode: manual,\n        showAfter: openDelay || showAfter, // this is for mapping API due to we decided to rename the current openDelay API to showAfter for better readability,\n        showArrow: visibleArrow,\n        visible: modelValue,\n        'onUpdate:visible': onUpdateVisible,\n        fallbackPlacements: fallbackPlacements.length\n          ? fallbackPlacements\n          : ['bottom-start', 'top-start', 'right', 'left'],\n      },\n      {\n        default: () => ($slots.content ? $slots.content() : content),\n        trigger: () => {\n          if ($slots.default) {\n            const firstVnode = getFirstValidNode($slots.default(), 1)\n            if (!firstVnode) throwErrorTip()\n            return cloneVNode(firstVnode, { tabindex }, true)\n          }\n          throwErrorTip()\n        },\n      }\n    )\n\n    return popper\n  },\n})\n"],"names":["ElPopper"],"mappings":";;;;;;;AAeA,cAAe,gBAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,cACVA;AAAA;AAAA,EAEF,OAAO;AAAA,OACF;AAAA,IACH,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAA;AAAA,IAEX,YAAY;AAAA,MACV,MAAM;AAAA,MACN,WAAW,CAAC,QAAiB;AAC3B,eAAO,OAAO,QAAQ;AAAA;AAAA,MAExB,SAAS;AAAA;AAAA,IAGX,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA;AAAA,IAEX,cAAc;AAAA,MACZ,MAAM;AAAA,MACN,SAAS;AAAA;AAAA,IAEX,UAAU;AAAA,MACR,MAAM,CAAC,QAAQ;AAAA,MACf,SAAS;AAAA;AAAA;AAAA,EAGb,OAAO,CAAC;AAAA,EACR,MAAM,OAAO,KAAK;AAEhB,QAAI,MAAM,UAAU,OAAO,MAAM,eAAe,aAAa;AAC3D,iBACE,eACA;AAAA;AAIJ,UAAM,SAAS,IAAI;AAEnB,UAAM,kBAAkB,CAAC,QAAQ;AAC/B,UAAI,KAAK,oBAAoB;AAAA;AAG/B,UAAM,eAAe,MAAM;AACzB,aAAO,OAAO,MAAM;AAAA;AAGtB,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA;AAAA;AAAA,EAGJ,SAAS;AACP,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,QACE;AAEJ,UAAM,gBAAgB,MAAM;AAC1B,iBAAW,eAAe;AAAA;AAG5B,UAAM,SAAS,EACbA,SACA;AAAA,SACK,OAAO,KAAK,oBAAoB,OAAO,CAAC,QAAQ,QAAQ;AACzD,eAAO,KAAK,SAAS,MAAM,KAAK;AAAA,SAC/B;AAAA,MACH,KAAK;AAAA,MACL,YAAY;AAAA,MACZ,WAAW,aAAa;AAAA,MACxB,WAAW;AAAA,MACX,SAAS;AAAA,MACT,oBAAoB;AAAA,MACpB,oBAAoB,mBAAmB,SACnC,qBACA,CAAC,gBAAgB,aAAa,SAAS;AAAA,OAE7C;AAAA,MACE,SAAS,MAAO,OAAO,UAAU,OAAO,YAAY;AAAA,MACpD,SAAS,MAAM;AACb,YAAI,OAAO,SAAS;AAClB,gBAAM,aAAa,kBAAkB,OAAO,WAAW;AACvD,cAAI,CAAC;AAAY;AACjB,iBAAO,WAAW,YAAY,EAAE,YAAY;AAAA;AAE9C;AAAA;AAAA;AAKN,WAAO;AAAA;AAAA;;;;"}

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

@@ -87,11 +87,11 @@ declare const _Transfer: SFCWithInstall<import("vue").DefineComponent<{
     props?: unknown;
     targetOrder?: unknown;
 } & {
-    titles: [string, string];
-    filterPlaceholder: string;
     modelValue: import("./src/transfer").Key[];
     props: import("./src/transfer").Props;
     data: import("./src/transfer").DataItem[];
+    titles: [string, string];
+    filterPlaceholder: string;
     filterable: boolean;
     format: import("./src/transfer").Format;
     buttonTexts: [string, string];
@@ -109,11 +109,11 @@ declare const _Transfer: SFCWithInstall<import("vue").DefineComponent<{
     "onLeft-check-change"?: ((...args: any[]) => any) | undefined;
     "onRight-check-change"?: ((...args: any[]) => any) | undefined;
 }, {
-    titles: [string, string];
-    filterPlaceholder: string;
     modelValue: import("./src/transfer").Key[];
     props: import("./src/transfer").Props;
     data: import("./src/transfer").DataItem[];
+    titles: [string, string];
+    filterPlaceholder: string;
     filterable: boolean;
     format: import("./src/transfer").Format;
     buttonTexts: [string, string];
@@ -210,11 +210,11 @@ export declare const ElTransfer: SFCWithInstall<import("vue").DefineComponent<{
     props?: unknown;
     targetOrder?: unknown;
 } & {
-    titles: [string, string];
-    filterPlaceholder: string;
     modelValue: import("./src/transfer").Key[];
     props: import("./src/transfer").Props;
     data: import("./src/transfer").DataItem[];
+    titles: [string, string];
+    filterPlaceholder: string;
     filterable: boolean;
     format: import("./src/transfer").Format;
     buttonTexts: [string, string];
@@ -232,11 +232,11 @@ export declare const ElTransfer: SFCWithInstall<import("vue").DefineComponent<{
     "onLeft-check-change"?: ((...args: any[]) => any) | undefined;
     "onRight-check-change"?: ((...args: any[]) => any) | undefined;
 }, {
-    titles: [string, string];
-    filterPlaceholder: string;
     modelValue: import("./src/transfer").Key[];
     props: import("./src/transfer").Props;
     data: import("./src/transfer").DataItem[];
+    titles: [string, string];
+    filterPlaceholder: string;
     filterable: boolean;
     format: import("./src/transfer").Format;
     buttonTexts: [string, string];

package/es/components/transfer/src/index.vue.d.ts

@@ -86,11 +86,11 @@ declare const _default: import("vue").DefineComponent<{
     props?: unknown;
     targetOrder?: unknown;
 } & {
-    titles: [string, string];
-    filterPlaceholder: string;
     modelValue: Key[];
     props: Props;
     data: DataItem[];
+    titles: [string, string];
+    filterPlaceholder: string;
     filterable: boolean;
     format: Format;
     buttonTexts: [string, string];
@@ -106,11 +106,11 @@ declare const _default: import("vue").DefineComponent<{
     "onLeft-check-change"?: ((...args: any[]) => any) | undefined;
     "onRight-check-change"?: ((...args: any[]) => any) | undefined;
 }, {
-    titles: [string, string];
-    filterPlaceholder: string;
     modelValue: Key[];
     props: Props;
     data: DataItem[];
+    titles: [string, string];
+    filterPlaceholder: string;
     filterable: boolean;
     format: Format;
     buttonTexts: [string, string];

package/es/components/transfer/src/index.vue_vue_type_script_lang.mjs

@@ -4,7 +4,7 @@ import { ElIcon } from '../../icon/index.mjs';
 import '../../../tokens/index.mjs';
 import '../../../hooks/index.mjs';
 import { UPDATE_MODEL_EVENT, CHANGE_EVENT } from '../../../utils/constants.mjs';
-import { ArrowLeft, ArrowRight } from '@element-plus/icons';
+import { ArrowLeft, ArrowRight } from '@element-plus/icons-vue';
 import './transfer-panel.mjs';
 import { useComputedData } from './useComputedData.mjs';
 import { LEFT_CHECK_CHANGE_EVENT, RIGHT_CHECK_CHANGE_EVENT, useCheckedChange } from './useCheckedChange.mjs';

package/es/components/transfer/src/index.vue_vue_type_script_lang.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.vue_vue_type_script_lang.mjs","sources":["../../../../../../packages/components/transfer/src/index.vue"],"sourcesContent":["<template>\n  <div class=\"el-transfer\">\n    <transfer-panel\n      ref=\"leftPanel\"\n      :data=\"sourceData\"\n      :option-render=\"optionRender\"\n      :placeholder=\"panelFilterPlaceholder\"\n      :title=\"leftPanelTitle\"\n      :filterable=\"filterable\"\n      :format=\"format\"\n      :filter-method=\"filterMethod\"\n      :default-checked=\"leftDefaultChecked\"\n      :props=\"props\"\n      @checked-change=\"onSourceCheckedChange\"\n    >\n      <slot name=\"left-footer\"></slot>\n    </transfer-panel>\n    <div class=\"el-transfer__buttons\">\n      <el-button\n        type=\"primary\"\n        :class=\"['el-transfer__button', hasButtonTexts ? 'is-with-texts' : '']\"\n        :disabled=\"rightChecked.length === 0\"\n        @click=\"addToLeft\"\n      >\n        <el-icon><arrow-left /></el-icon>\n        <span v-if=\"buttonTexts[0] !== undefined\">{{ buttonTexts[0] }}</span>\n      </el-button>\n      <el-button\n        type=\"primary\"\n        :class=\"['el-transfer__button', hasButtonTexts ? 'is-with-texts' : '']\"\n        :disabled=\"leftChecked.length === 0\"\n        @click=\"addToRight\"\n      >\n        <span v-if=\"buttonTexts[1] !== undefined\">{{ buttonTexts[1] }}</span>\n        <el-icon><arrow-right /></el-icon>\n      </el-button>\n    </div>\n    <transfer-panel\n      ref=\"rightPanel\"\n      :data=\"targetData\"\n      :option-render=\"optionRender\"\n      :placeholder=\"panelFilterPlaceholder\"\n      :filterable=\"filterable\"\n      :format=\"format\"\n      :filter-method=\"filterMethod\"\n      :title=\"rightPanelTitle\"\n      :default-checked=\"rightDefaultChecked\"\n      :props=\"props\"\n      @checked-change=\"onTargetCheckedChange\"\n    >\n      <slot name=\"right-footer\"></slot>\n    </transfer-panel>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  inject,\n  h,\n  reactive,\n  ref,\n  toRefs,\n  watch,\n} from 'vue'\nimport ElButton from '@element-plus/components/button'\nimport ElIcon from '@element-plus/components/icon'\nimport { elFormItemKey } from '@element-plus/tokens'\nimport { useLocale } from '@element-plus/hooks'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'\nimport { ArrowLeft, ArrowRight } from '@element-plus/icons'\nimport TransferPanel from './transfer-panel.vue'\nimport { useComputedData } from './useComputedData'\nimport {\n  useCheckedChange,\n  LEFT_CHECK_CHANGE_EVENT,\n  RIGHT_CHECK_CHANGE_EVENT,\n} from './useCheckedChange'\nimport { useMove } from './useMove'\nimport { CHANGE_EVENT } from './transfer'\n\nimport type { PropType, VNode } from 'vue'\nimport type { ElFormItemContext } from '@element-plus/tokens'\nimport type { DataItem, Format, Key, Props, TargetOrder } from './transfer'\n\nexport default defineComponent({\n  name: 'ElTransfer',\n\n  components: {\n    TransferPanel,\n    ElButton,\n    ElIcon,\n    ArrowLeft,\n    ArrowRight,\n  },\n\n  props: {\n    data: {\n      type: Array as PropType<DataItem[]>,\n      default: () => [],\n    },\n    titles: {\n      type: Array as PropType<any> as PropType<[string, string]>,\n      default: () => [],\n    },\n    buttonTexts: {\n      type: Array as PropType<any> as PropType<[string, string]>,\n      default: () => [],\n    },\n    filterPlaceholder: {\n      type: String,\n      default: '',\n    },\n    filterMethod: Function as PropType<\n      (query: string, item: DataItem) => boolean\n    >,\n    leftDefaultChecked: {\n      type: Array as PropType<Key[]>,\n      default: () => [],\n    },\n    rightDefaultChecked: {\n      type: Array as PropType<Key[]>,\n      default: () => [],\n    },\n    renderContent: Function as PropType<(h, option) => VNode>,\n    modelValue: {\n      type: Array as PropType<Key[]>,\n      default: () => [],\n    },\n    format: {\n      type: Object as PropType<Format>,\n      default: () => ({}),\n    },\n    filterable: {\n      type: Boolean,\n      default: false,\n    },\n    props: {\n      type: Object as PropType<Props>,\n      default: () => ({\n        label: 'label',\n        key: 'key',\n        disabled: 'disabled',\n      }),\n    },\n    targetOrder: {\n      type: String as PropType<TargetOrder>,\n      default: 'original',\n      validator: (val: string) => {\n        return ['original', 'push', 'unshift'].includes(val)\n      },\n    },\n  },\n\n  emits: [\n    UPDATE_MODEL_EVENT,\n    CHANGE_EVENT,\n    LEFT_CHECK_CHANGE_EVENT,\n    RIGHT_CHECK_CHANGE_EVENT,\n  ],\n\n  setup(props, { emit, slots }) {\n    const { t } = useLocale()\n    const elFormItem = inject(elFormItemKey, {} as ElFormItemContext)\n\n    const checkedState = reactive({\n      leftChecked: [],\n      rightChecked: [],\n    })\n\n    const { propsKey, sourceData, targetData } = useComputedData(props)\n\n    const { onSourceCheckedChange, onTargetCheckedChange } = useCheckedChange(\n      checkedState,\n      emit\n    )\n\n    const { addToLeft, addToRight } = useMove(\n      props,\n      checkedState,\n      propsKey,\n      emit\n    )\n\n    const leftPanel = ref(null)\n    const rightPanel = ref(null)\n\n    const clearQuery = (which: 'left' | 'right') => {\n      if (which === 'left') {\n        leftPanel.value.query = ''\n      } else if (which === 'right') {\n        rightPanel.value.query = ''\n      }\n    }\n\n    const hasButtonTexts = computed(() => props.buttonTexts.length === 2)\n\n    const leftPanelTitle = computed(\n      () => props.titles[0] || t('el.transfer.titles.0')\n    )\n\n    const rightPanelTitle = computed(\n      () => props.titles[1] || t('el.transfer.titles.1')\n    )\n\n    const panelFilterPlaceholder = computed(\n      () => props.filterPlaceholder || t('el.transfer.filterPlaceholder')\n    )\n\n    watch(\n      () => props.modelValue,\n      () => {\n        elFormItem.validate?.('change')\n      }\n    )\n\n    const optionRender = computed(() => (option) => {\n      if (props.renderContent) return props.renderContent(h, option)\n\n      if (slots.default) return slots.default({ option })\n\n      return h('span', option[props.props.label] || option[props.props.key])\n    })\n\n    return {\n      sourceData,\n      targetData,\n      onSourceCheckedChange,\n      onTargetCheckedChange,\n      addToLeft,\n      addToRight,\n\n      ...toRefs(checkedState),\n\n      hasButtonTexts,\n      leftPanelTitle,\n      rightPanelTitle,\n      panelFilterPlaceholder,\n      clearQuery,\n\n      optionRender,\n    }\n  },\n})\n</script>\n"],"names":["TransferPanel"],"mappings":";;;;;;;;;;;;;;;;AAsFA,aAAe,gBAAgB;AAAA,EAC7B,MAAM;AAAA,EAEN,YAAY;AAAA,mBACVA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,EAGF,OAAO;AAAA,IACL,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS,MAAM;AAAA;AAAA,IAEjB,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,SAAS,MAAM;AAAA;AAAA,IAEjB,aAAa;AAAA,MACX,MAAM;AAAA,MACN,SAAS,MAAM;AAAA;AAAA,IAEjB,mBAAmB;AAAA,MACjB,MAAM;AAAA,MACN,SAAS;AAAA;AAAA,IAEX,cAAc;AAAA,IAGd,oBAAoB;AAAA,MAClB,MAAM;AAAA,MACN,SAAS,MAAM;AAAA;AAAA,IAEjB,qBAAqB;AAAA,MACnB,MAAM;AAAA,MACN,SAAS,MAAM;AAAA;AAAA,IAEjB,eAAe;AAAA,IACf,YAAY;AAAA,MACV,MAAM;AAAA,MACN,SAAS,MAAM;AAAA;AAAA,IAEjB,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAO;AAAA,IAElB,YAAY;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA;AAAA,IAEX,OAAO;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAO,QACd,OAAO;AAAA,QACP,KAAK;AAAA,QACL,UAAU;AAAA;AAAA;AAAA,IAGd,aAAa;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,CAAC,QAAgB;AAC1B,eAAO,CAAC,YAAY,QAAQ,WAAW,SAAS;AAAA;AAAA;AAAA;AAAA,EAKtD,OAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,EAGF,MAAM,OAAO,EAAE,MAAM,SAAS;AAC5B,UAAM,EAAE,MAAM;AACd,UAAM,aAAa,OAAO,eAAe;AAEzC,UAAM,eAAe,SAAS;AAAA,MAC5B,aAAa;AAAA,MACb,cAAc;AAAA;AAGhB,UAAM,EAAE,UAAU,YAAY,eAAe,gBAAgB;AAE7D,UAAM,EAAE,uBAAuB,0BAA0B,iBACvD,cACA;AAGF,UAAM,EAAE,WAAW,eAAe,QAChC,OACA,cACA,UACA;AAGF,UAAM,YAAY,IAAI;AACtB,UAAM,aAAa,IAAI;AAEvB,UAAM,aAAa,CAAC,UAA4B;AAC9C,UAAI,UAAU,QAAQ;AACpB,kBAAU,MAAM,QAAQ;AAAA,iBACf,UAAU,SAAS;AAC5B,mBAAW,MAAM,QAAQ;AAAA;AAAA;AAI7B,UAAM,iBAAiB,SAAS,MAAM,MAAM,YAAY,WAAW;AAEnE,UAAM,iBAAiB,SACrB,MAAM,MAAM,OAAO,MAAM,EAAE;AAG7B,UAAM,kBAAkB,SACtB,MAAM,MAAM,OAAO,MAAM,EAAE;AAG7B,UAAM,yBAAyB,SAC7B,MAAM,MAAM,qBAAqB,EAAE;AAGrC,UACE,MAAM,MAAM,YACZ,MAAM;;AACJ,uBAAW,aAAX,oCAAsB;AAAA;AAI1B,UAAM,eAAe,SAAS,MAAM,CAAC,WAAW;AAC9C,UAAI,MAAM;AAAe,eAAO,MAAM,cAAc,GAAG;AAEvD,UAAI,MAAM;AAAS,eAAO,MAAM,QAAQ,EAAE;AAE1C,aAAO,EAAE,QAAQ,OAAO,MAAM,MAAM,UAAU,OAAO,MAAM,MAAM;AAAA;AAGnE,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,SAEG,OAAO;AAAA,MAEV;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA;AAAA;AAAA;;;;"}
+{"version":3,"file":"index.vue_vue_type_script_lang.mjs","sources":["../../../../../../packages/components/transfer/src/index.vue"],"sourcesContent":["<template>\n  <div class=\"el-transfer\">\n    <transfer-panel\n      ref=\"leftPanel\"\n      :data=\"sourceData\"\n      :option-render=\"optionRender\"\n      :placeholder=\"panelFilterPlaceholder\"\n      :title=\"leftPanelTitle\"\n      :filterable=\"filterable\"\n      :format=\"format\"\n      :filter-method=\"filterMethod\"\n      :default-checked=\"leftDefaultChecked\"\n      :props=\"props\"\n      @checked-change=\"onSourceCheckedChange\"\n    >\n      <slot name=\"left-footer\"></slot>\n    </transfer-panel>\n    <div class=\"el-transfer__buttons\">\n      <el-button\n        type=\"primary\"\n        :class=\"['el-transfer__button', hasButtonTexts ? 'is-with-texts' : '']\"\n        :disabled=\"rightChecked.length === 0\"\n        @click=\"addToLeft\"\n      >\n        <el-icon><arrow-left /></el-icon>\n        <span v-if=\"buttonTexts[0] !== undefined\">{{ buttonTexts[0] }}</span>\n      </el-button>\n      <el-button\n        type=\"primary\"\n        :class=\"['el-transfer__button', hasButtonTexts ? 'is-with-texts' : '']\"\n        :disabled=\"leftChecked.length === 0\"\n        @click=\"addToRight\"\n      >\n        <span v-if=\"buttonTexts[1] !== undefined\">{{ buttonTexts[1] }}</span>\n        <el-icon><arrow-right /></el-icon>\n      </el-button>\n    </div>\n    <transfer-panel\n      ref=\"rightPanel\"\n      :data=\"targetData\"\n      :option-render=\"optionRender\"\n      :placeholder=\"panelFilterPlaceholder\"\n      :filterable=\"filterable\"\n      :format=\"format\"\n      :filter-method=\"filterMethod\"\n      :title=\"rightPanelTitle\"\n      :default-checked=\"rightDefaultChecked\"\n      :props=\"props\"\n      @checked-change=\"onTargetCheckedChange\"\n    >\n      <slot name=\"right-footer\"></slot>\n    </transfer-panel>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  inject,\n  h,\n  reactive,\n  ref,\n  toRefs,\n  watch,\n} from 'vue'\nimport ElButton from '@element-plus/components/button'\nimport ElIcon from '@element-plus/components/icon'\nimport { elFormItemKey } from '@element-plus/tokens'\nimport { useLocale } from '@element-plus/hooks'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'\nimport { ArrowLeft, ArrowRight } from '@element-plus/icons-vue'\nimport TransferPanel from './transfer-panel.vue'\nimport { useComputedData } from './useComputedData'\nimport {\n  useCheckedChange,\n  LEFT_CHECK_CHANGE_EVENT,\n  RIGHT_CHECK_CHANGE_EVENT,\n} from './useCheckedChange'\nimport { useMove } from './useMove'\nimport { CHANGE_EVENT } from './transfer'\n\nimport type { PropType, VNode } from 'vue'\nimport type { ElFormItemContext } from '@element-plus/tokens'\nimport type { DataItem, Format, Key, Props, TargetOrder } from './transfer'\n\nexport default defineComponent({\n  name: 'ElTransfer',\n\n  components: {\n    TransferPanel,\n    ElButton,\n    ElIcon,\n    ArrowLeft,\n    ArrowRight,\n  },\n\n  props: {\n    data: {\n      type: Array as PropType<DataItem[]>,\n      default: () => [],\n    },\n    titles: {\n      type: Array as PropType<any> as PropType<[string, string]>,\n      default: () => [],\n    },\n    buttonTexts: {\n      type: Array as PropType<any> as PropType<[string, string]>,\n      default: () => [],\n    },\n    filterPlaceholder: {\n      type: String,\n      default: '',\n    },\n    filterMethod: Function as PropType<\n      (query: string, item: DataItem) => boolean\n    >,\n    leftDefaultChecked: {\n      type: Array as PropType<Key[]>,\n      default: () => [],\n    },\n    rightDefaultChecked: {\n      type: Array as PropType<Key[]>,\n      default: () => [],\n    },\n    renderContent: Function as PropType<(h, option) => VNode>,\n    modelValue: {\n      type: Array as PropType<Key[]>,\n      default: () => [],\n    },\n    format: {\n      type: Object as PropType<Format>,\n      default: () => ({}),\n    },\n    filterable: {\n      type: Boolean,\n      default: false,\n    },\n    props: {\n      type: Object as PropType<Props>,\n      default: () => ({\n        label: 'label',\n        key: 'key',\n        disabled: 'disabled',\n      }),\n    },\n    targetOrder: {\n      type: String as PropType<TargetOrder>,\n      default: 'original',\n      validator: (val: string) => {\n        return ['original', 'push', 'unshift'].includes(val)\n      },\n    },\n  },\n\n  emits: [\n    UPDATE_MODEL_EVENT,\n    CHANGE_EVENT,\n    LEFT_CHECK_CHANGE_EVENT,\n    RIGHT_CHECK_CHANGE_EVENT,\n  ],\n\n  setup(props, { emit, slots }) {\n    const { t } = useLocale()\n    const elFormItem = inject(elFormItemKey, {} as ElFormItemContext)\n\n    const checkedState = reactive({\n      leftChecked: [],\n      rightChecked: [],\n    })\n\n    const { propsKey, sourceData, targetData } = useComputedData(props)\n\n    const { onSourceCheckedChange, onTargetCheckedChange } = useCheckedChange(\n      checkedState,\n      emit\n    )\n\n    const { addToLeft, addToRight } = useMove(\n      props,\n      checkedState,\n      propsKey,\n      emit\n    )\n\n    const leftPanel = ref(null)\n    const rightPanel = ref(null)\n\n    const clearQuery = (which: 'left' | 'right') => {\n      if (which === 'left') {\n        leftPanel.value.query = ''\n      } else if (which === 'right') {\n        rightPanel.value.query = ''\n      }\n    }\n\n    const hasButtonTexts = computed(() => props.buttonTexts.length === 2)\n\n    const leftPanelTitle = computed(\n      () => props.titles[0] || t('el.transfer.titles.0')\n    )\n\n    const rightPanelTitle = computed(\n      () => props.titles[1] || t('el.transfer.titles.1')\n    )\n\n    const panelFilterPlaceholder = computed(\n      () => props.filterPlaceholder || t('el.transfer.filterPlaceholder')\n    )\n\n    watch(\n      () => props.modelValue,\n      () => {\n        elFormItem.validate?.('change')\n      }\n    )\n\n    const optionRender = computed(() => (option) => {\n      if (props.renderContent) return props.renderContent(h, option)\n\n      if (slots.default) return slots.default({ option })\n\n      return h('span', option[props.props.label] || option[props.props.key])\n    })\n\n    return {\n      sourceData,\n      targetData,\n      onSourceCheckedChange,\n      onTargetCheckedChange,\n      addToLeft,\n      addToRight,\n\n      ...toRefs(checkedState),\n\n      hasButtonTexts,\n      leftPanelTitle,\n      rightPanelTitle,\n      panelFilterPlaceholder,\n      clearQuery,\n\n      optionRender,\n    }\n  },\n})\n</script>\n"],"names":["TransferPanel"],"mappings":";;;;;;;;;;;;;;;;AAsFA,aAAe,gBAAgB;AAAA,EAC7B,MAAM;AAAA,EAEN,YAAY;AAAA,mBACVA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,EAGF,OAAO;AAAA,IACL,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS,MAAM;AAAA;AAAA,IAEjB,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,SAAS,MAAM;AAAA;AAAA,IAEjB,aAAa;AAAA,MACX,MAAM;AAAA,MACN,SAAS,MAAM;AAAA;AAAA,IAEjB,mBAAmB;AAAA,MACjB,MAAM;AAAA,MACN,SAAS;AAAA;AAAA,IAEX,cAAc;AAAA,IAGd,oBAAoB;AAAA,MAClB,MAAM;AAAA,MACN,SAAS,MAAM;AAAA;AAAA,IAEjB,qBAAqB;AAAA,MACnB,MAAM;AAAA,MACN,SAAS,MAAM;AAAA;AAAA,IAEjB,eAAe;AAAA,IACf,YAAY;AAAA,MACV,MAAM;AAAA,MACN,SAAS,MAAM;AAAA;AAAA,IAEjB,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAO;AAAA,IAElB,YAAY;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA;AAAA,IAEX,OAAO;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAO,QACd,OAAO;AAAA,QACP,KAAK;AAAA,QACL,UAAU;AAAA;AAAA;AAAA,IAGd,aAAa;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,CAAC,QAAgB;AAC1B,eAAO,CAAC,YAAY,QAAQ,WAAW,SAAS;AAAA;AAAA;AAAA;AAAA,EAKtD,OAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,EAGF,MAAM,OAAO,EAAE,MAAM,SAAS;AAC5B,UAAM,EAAE,MAAM;AACd,UAAM,aAAa,OAAO,eAAe;AAEzC,UAAM,eAAe,SAAS;AAAA,MAC5B,aAAa;AAAA,MACb,cAAc;AAAA;AAGhB,UAAM,EAAE,UAAU,YAAY,eAAe,gBAAgB;AAE7D,UAAM,EAAE,uBAAuB,0BAA0B,iBACvD,cACA;AAGF,UAAM,EAAE,WAAW,eAAe,QAChC,OACA,cACA,UACA;AAGF,UAAM,YAAY,IAAI;AACtB,UAAM,aAAa,IAAI;AAEvB,UAAM,aAAa,CAAC,UAA4B;AAC9C,UAAI,UAAU,QAAQ;AACpB,kBAAU,MAAM,QAAQ;AAAA,iBACf,UAAU,SAAS;AAC5B,mBAAW,MAAM,QAAQ;AAAA;AAAA;AAI7B,UAAM,iBAAiB,SAAS,MAAM,MAAM,YAAY,WAAW;AAEnE,UAAM,iBAAiB,SACrB,MAAM,MAAM,OAAO,MAAM,EAAE;AAG7B,UAAM,kBAAkB,SACtB,MAAM,MAAM,OAAO,MAAM,EAAE;AAG7B,UAAM,yBAAyB,SAC7B,MAAM,MAAM,qBAAqB,EAAE;AAGrC,UACE,MAAM,MAAM,YACZ,MAAM;;AACJ,uBAAW,aAAX,oCAAsB;AAAA;AAI1B,UAAM,eAAe,SAAS,MAAM,CAAC,WAAW;AAC9C,UAAI,MAAM;AAAe,eAAO,MAAM,cAAc,GAAG;AAEvD,UAAI,MAAM;AAAS,eAAO,MAAM,QAAQ,EAAE;AAE1C,aAAO,EAAE,QAAQ,OAAO,MAAM,MAAM,UAAU,OAAO,MAAM,MAAM;AAAA;AAGnE,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,SAEG,OAAO;AAAA,MAEV;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA;AAAA;AAAA;;;;"}