@element-plus/nightly 0.0.20220117 → 0.0.20220118

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=\"typeof time === 'number'\">\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":["_withCtx","_createTextVNode"],"mappings":";;;;;4CAmDyC;;;;;;;;;;;;;2BAhDnC;;;;;iBAIO;;;;eAIF,EAACA;uDACyB;YAC5B;;;kFAG2B;;kBACzB,KAAK;2EAEY,yBAAoB,CAAC,IAAI;mEACR;;;;;;;;;;;;;;;;;;;;;yDAiBT;;;;;;;;wCAGV;;;;;;;;;;;gGAaoB;;kBACjCC;uBACI;;;;;;;yBAOa;;;;;;;"}
+{"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=\"(scollbar) => setRef(scollbar, 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=\"typeof time === 'number'\">\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 && el.$el) {\n        el.$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.$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].$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].$el.offsetHeight\n    }\n\n    const bindScrollEvent = () => {\n      const bindFuntion = (type) => {\n        if (listRefsMap[type] && listRefsMap[type].$el) {\n          listRefsMap[type].$el.querySelector('.el-scrollbar__wrap').onscroll =\n            () => {\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 setRef = (scrollbar, type) => {\n      listRefsMap[type] = scrollbar\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      setRef,\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":["_withCtx","_createTextVNode"],"mappings":";;;;;4CAmDyC;;;;;;;;;;;;;2BAhDnC;;;;kBAGS;iBACF;;;;eAIF,EAACA;uDACyB;YAC5B;;;kFAG2B;;kBACzB,KAAK;2EAEY,yBAAoB,CAAC,IAAI;mEACR;;;;;;;;;;;;;;;;;;;;;yDAiBT;;;;;;;;wCAGV;;;;;;;;;;;gGAaoB;;kBACjCC;uBACI;;;;;;;yBAOa;;;;;;;"}

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

@@ -2,140 +2,112 @@ export declare const ElTimeline: import("../../utils/types").SFCWithInstall<impo
     [key: string]: any;
 }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{} & {} & {}>, {}>> & {
     TimelineItem: import("vue").DefineComponent<{
-        timestamp: {
-            type: StringConstructor;
-            default: string;
+        readonly timestamp: import("../../utils/props").BuildPropReturn<StringConstructor, "", unknown, unknown, unknown>;
+        readonly hideTimestamp: import("../../utils/props").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
+        readonly center: import("../../utils/props").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
+        readonly placement: import("../../utils/props").BuildPropReturn<StringConstructor, "bottom", unknown, unknown, unknown>;
+        readonly type: import("../../utils/props").BuildPropReturn<StringConstructor, "", unknown, unknown, unknown>;
+        readonly color: import("../../utils/props").BuildPropReturn<StringConstructor, "", unknown, unknown, unknown>;
+        readonly size: import("../../utils/props").BuildPropReturn<StringConstructor, "normal", unknown, unknown, unknown>;
+        readonly icon: import("../../utils/props").BuildPropReturn<import("../../utils/props").PropWrapper<string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>>, "", unknown, unknown, unknown>;
+        readonly hollow: import("../../utils/props").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
+    }, {
+        ns: {
+            namespace: import("vue").ComputedRef<string>;
+            b: (blockSuffix?: string) => string;
+            e: (element?: string | undefined) => string;
+            m: (modifier?: string | undefined) => string;
+            be: (blockSuffix?: string | undefined, element?: string | undefined) => string;
+            em: (element?: string | undefined, modifier?: string | undefined) => string;
+            bm: (blockSuffix?: string | undefined, modifier?: string | undefined) => string;
+            bem: (blockSuffix?: string | undefined, element?: string | undefined, modifier?: string | undefined) => string;
+            is: (name: string, state?: boolean) => string;
         };
-        hideTimestamp: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        center: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        placement: {
-            type: StringConstructor;
-            default: string;
-        };
-        type: {
-            type: StringConstructor;
-            default: string;
-        };
-        color: {
-            type: StringConstructor;
-            default: string;
-        };
-        size: {
-            type: StringConstructor;
-            default: string;
-        };
-        icon: {
-            type: import("vue").PropType<string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>>;
-            default: string;
-        };
-        hollow: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-    }, void, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-        timestamp?: unknown;
-        hideTimestamp?: unknown;
-        center?: unknown;
-        placement?: unknown;
-        type?: unknown;
-        color?: unknown;
-        size?: unknown;
-        icon?: unknown;
-        hollow?: unknown;
+    }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+        readonly timestamp?: unknown;
+        readonly hideTimestamp?: unknown;
+        readonly center?: unknown;
+        readonly placement?: unknown;
+        readonly type?: unknown;
+        readonly color?: unknown;
+        readonly size?: unknown;
+        readonly icon?: unknown;
+        readonly hollow?: unknown;
     } & {
         type: string;
-        icon: string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>;
+        icon: import("../../utils/props").BuildPropType<import("../../utils/props").PropWrapper<string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>>, unknown, unknown>;
         size: string;
         color: string;
-        center: boolean;
+        center: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
         placement: string;
         timestamp: string;
-        hideTimestamp: boolean;
-        hollow: boolean;
+        hideTimestamp: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
+        hollow: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     } & {}>, {
         type: string;
-        icon: string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>;
+        icon: import("../../utils/props").BuildPropType<import("../../utils/props").PropWrapper<string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>>, unknown, unknown>;
         size: string;
         color: string;
-        center: boolean;
+        center: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
         placement: string;
         timestamp: string;
-        hideTimestamp: boolean;
-        hollow: boolean;
+        hideTimestamp: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
+        hollow: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     }>;
 };
 export default ElTimeline;
 export declare const ElTimelineItem: import("../../utils/types").SFCWithInstall<import("vue").DefineComponent<{
-    timestamp: {
-        type: StringConstructor;
-        default: string;
-    };
-    hideTimestamp: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    center: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    placement: {
-        type: StringConstructor;
-        default: string;
-    };
-    type: {
-        type: StringConstructor;
-        default: string;
-    };
-    color: {
-        type: StringConstructor;
-        default: string;
-    };
-    size: {
-        type: StringConstructor;
-        default: string;
-    };
-    icon: {
-        type: import("vue").PropType<string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>>;
-        default: string;
-    };
-    hollow: {
-        type: BooleanConstructor;
-        default: boolean;
+    readonly timestamp: import("../../utils/props").BuildPropReturn<StringConstructor, "", unknown, unknown, unknown>;
+    readonly hideTimestamp: import("../../utils/props").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
+    readonly center: import("../../utils/props").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
+    readonly placement: import("../../utils/props").BuildPropReturn<StringConstructor, "bottom", unknown, unknown, unknown>;
+    readonly type: import("../../utils/props").BuildPropReturn<StringConstructor, "", unknown, unknown, unknown>;
+    readonly color: import("../../utils/props").BuildPropReturn<StringConstructor, "", unknown, unknown, unknown>;
+    readonly size: import("../../utils/props").BuildPropReturn<StringConstructor, "normal", unknown, unknown, unknown>;
+    readonly icon: import("../../utils/props").BuildPropReturn<import("../../utils/props").PropWrapper<string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>>, "", unknown, unknown, unknown>;
+    readonly hollow: import("../../utils/props").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
+}, {
+    ns: {
+        namespace: import("vue").ComputedRef<string>;
+        b: (blockSuffix?: string) => string;
+        e: (element?: string | undefined) => string;
+        m: (modifier?: string | undefined) => string;
+        be: (blockSuffix?: string | undefined, element?: string | undefined) => string;
+        em: (element?: string | undefined, modifier?: string | undefined) => string;
+        bm: (blockSuffix?: string | undefined, modifier?: string | undefined) => string;
+        bem: (blockSuffix?: string | undefined, element?: string | undefined, modifier?: string | undefined) => string;
+        is: (name: string, state?: boolean) => string;
     };
-}, void, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    timestamp?: unknown;
-    hideTimestamp?: unknown;
-    center?: unknown;
-    placement?: unknown;
-    type?: unknown;
-    color?: unknown;
-    size?: unknown;
-    icon?: unknown;
-    hollow?: unknown;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+    readonly timestamp?: unknown;
+    readonly hideTimestamp?: unknown;
+    readonly center?: unknown;
+    readonly placement?: unknown;
+    readonly type?: unknown;
+    readonly color?: unknown;
+    readonly size?: unknown;
+    readonly icon?: unknown;
+    readonly hollow?: unknown;
 } & {
     type: string;
-    icon: string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>;
+    icon: import("../../utils/props").BuildPropType<import("../../utils/props").PropWrapper<string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>>, unknown, unknown>;
     size: string;
     color: string;
-    center: boolean;
+    center: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     placement: string;
     timestamp: string;
-    hideTimestamp: boolean;
-    hollow: boolean;
+    hideTimestamp: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
+    hollow: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
 } & {}>, {
     type: string;
-    icon: string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>;
+    icon: import("../../utils/props").BuildPropType<import("../../utils/props").PropWrapper<string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>>, unknown, unknown>;
     size: string;
     color: string;
-    center: boolean;
+    center: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     placement: string;
     timestamp: string;
-    hideTimestamp: boolean;
-    hollow: boolean;
+    hideTimestamp: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
+    hollow: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
 }>>;
+export * from './src/timeline';
+export * from './src/timeline-item';

package/es/components/timeline/index.mjs

@@ -1,13 +1,13 @@
 import { withInstall, withNoopInstall } from '../../utils/with-install.mjs';
-import './src/index.mjs';
-import './src/item.mjs';
-import script from './src/index.vue_vue_type_script_lang.mjs';
-import script$1 from './src/item.vue_vue_type_script_lang.mjs';
+import Timeline from './src/timeline.mjs';
+import './src/timeline-item2.mjs';
+export { timelineItemProps } from './src/timeline-item.mjs';
+import script from './src/timeline-item.vue_vue_type_script_lang.mjs';
 
-const ElTimeline = withInstall(script, {
-  TimelineItem: script$1
+const ElTimeline = withInstall(Timeline, {
+  TimelineItem: script
 });
-const ElTimelineItem = withNoopInstall(script$1);
+const ElTimelineItem = withNoopInstall(script);
 
 export { ElTimeline, ElTimelineItem, ElTimeline as default };
 //# sourceMappingURL=index.mjs.map

package/es/components/timeline/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../../../packages/components/timeline/index.ts"],"sourcesContent":["import { withInstall, withNoopInstall } from '@element-plus/utils/with-install'\nimport Timeline from './src/index.vue'\nimport TimelineItem from './src/item.vue'\n\nexport const ElTimeline = withInstall(Timeline, {\n  TimelineItem,\n})\nexport default ElTimeline\nexport const ElTimelineItem = withNoopInstall(TimelineItem)\n"],"names":["Timeline","TimelineItem"],"mappings":";;;;;;AAGY,MAAC,UAAU,GAAG,WAAW,CAACA,MAAQ,EAAE;AAChD,gBAAEC,QAAY;AACd,CAAC,EAAE;AAES,MAAC,cAAc,GAAG,eAAe,CAACA,QAAY;;;;"}
+{"version":3,"file":"index.mjs","sources":["../../../../../packages/components/timeline/index.ts"],"sourcesContent":["import { withInstall, withNoopInstall } from '@element-plus/utils/with-install'\nimport Timeline from './src/timeline'\nimport TimelineItem from './src/timeline-item.vue'\n\nexport const ElTimeline = withInstall(Timeline, {\n  TimelineItem,\n})\nexport default ElTimeline\nexport const ElTimelineItem = withNoopInstall(TimelineItem)\n\nexport * from './src/timeline'\nexport * from './src/timeline-item'\n"],"names":["TimelineItem"],"mappings":";;;;;;AAGY,MAAC,UAAU,GAAG,WAAW,CAAC,QAAQ,EAAE;AAChD,gBAAEA,MAAY;AACd,CAAC,EAAE;AAES,MAAC,cAAc,GAAG,eAAe,CAACA,MAAY;;;;"}

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

@@ -0,0 +1,15 @@
+import type { Component, ExtractPropTypes } from 'vue';
+import type TimelineItem from './timeline-item.vue';
+export declare const timelineItemProps: {
+    readonly timestamp: import("element-plus/es/utils/props").BuildPropReturn<StringConstructor, "", unknown, unknown, unknown>;
+    readonly hideTimestamp: import("element-plus/es/utils/props").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
+    readonly center: import("element-plus/es/utils/props").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
+    readonly placement: import("element-plus/es/utils/props").BuildPropReturn<StringConstructor, "bottom", unknown, unknown, unknown>;
+    readonly type: import("element-plus/es/utils/props").BuildPropReturn<StringConstructor, "", unknown, unknown, unknown>;
+    readonly color: import("element-plus/es/utils/props").BuildPropReturn<StringConstructor, "", unknown, unknown, unknown>;
+    readonly size: import("element-plus/es/utils/props").BuildPropReturn<StringConstructor, "normal", unknown, unknown, unknown>;
+    readonly icon: import("element-plus/es/utils/props").BuildPropReturn<import("element-plus/es/utils/props").PropWrapper<string | Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>>, "", unknown, unknown, unknown>;
+    readonly hollow: import("element-plus/es/utils/props").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
+};
+export declare type TimelineItemProps = ExtractPropTypes<typeof timelineItemProps>;
+export declare type TimelineItemInstance = InstanceType<typeof TimelineItem>;

package/es/components/timeline/src/timeline-item.mjs

@@ -0,0 +1,43 @@
+import { buildProps, definePropType } from '../../../utils/props.mjs';
+
+const timelineItemProps = buildProps({
+  timestamp: {
+    type: String,
+    default: ""
+  },
+  hideTimestamp: {
+    type: Boolean,
+    default: false
+  },
+  center: {
+    type: Boolean,
+    default: false
+  },
+  placement: {
+    type: String,
+    default: "bottom"
+  },
+  type: {
+    type: String,
+    default: ""
+  },
+  color: {
+    type: String,
+    default: ""
+  },
+  size: {
+    type: String,
+    default: "normal"
+  },
+  icon: {
+    type: definePropType([String, Object]),
+    default: ""
+  },
+  hollow: {
+    type: Boolean,
+    default: false
+  }
+});
+
+export { timelineItemProps };
+//# sourceMappingURL=timeline-item.mjs.map

package/es/components/timeline/src/timeline-item.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"timeline-item.mjs","sources":["../../../../../../packages/components/timeline/src/timeline-item.ts"],"sourcesContent":["import { definePropType, buildProps } from '@element-plus/utils/props'\nimport type { Component, ExtractPropTypes } from 'vue'\nimport type TimelineItem from './timeline-item.vue'\n\nexport const timelineItemProps = buildProps({\n  timestamp: {\n    type: String,\n    default: '',\n  },\n  hideTimestamp: {\n    type: Boolean,\n    default: false,\n  },\n  center: {\n    type: Boolean,\n    default: false,\n  },\n  placement: {\n    type: String,\n    default: 'bottom',\n  },\n  type: {\n    type: String,\n    default: '',\n  },\n  color: {\n    type: String,\n    default: '',\n  },\n  size: {\n    type: String,\n    default: 'normal',\n  },\n  icon: {\n    type: definePropType<string | Component>([String, Object]),\n    default: '',\n  },\n  hollow: {\n    type: Boolean,\n    default: false,\n  },\n} as const)\nexport type TimelineItemProps = ExtractPropTypes<typeof timelineItemProps>\n\nexport type TimelineItemInstance = InstanceType<typeof TimelineItem>\n"],"names":[],"mappings":";;AACY,MAAC,iBAAiB,GAAG,UAAU,CAAC;AAC5C,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,aAAa,EAAE;AACjB,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,KAAK;AAClB,GAAG;AACH,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,KAAK;AAClB,GAAG;AACH,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,QAAQ;AACrB,GAAG;AACH,EAAE,IAAI,EAAE;AACR,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,KAAK,EAAE;AACT,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,IAAI,EAAE;AACR,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,QAAQ;AACrB,GAAG;AACH,EAAE,IAAI,EAAE;AACR,IAAI,IAAI,EAAE,cAAc,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAC1C,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,KAAK;AAClB,GAAG;AACH,CAAC;;;;"}

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

@@ -0,0 +1,54 @@
+declare const _default: import("vue").DefineComponent<{
+    readonly timestamp: import("../../../utils/props").BuildPropReturn<StringConstructor, "", unknown, unknown, unknown>;
+    readonly hideTimestamp: import("../../../utils/props").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
+    readonly center: import("../../../utils/props").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
+    readonly placement: import("../../../utils/props").BuildPropReturn<StringConstructor, "bottom", unknown, unknown, unknown>;
+    readonly type: import("../../../utils/props").BuildPropReturn<StringConstructor, "", unknown, unknown, unknown>;
+    readonly color: import("../../../utils/props").BuildPropReturn<StringConstructor, "", unknown, unknown, unknown>;
+    readonly size: import("../../../utils/props").BuildPropReturn<StringConstructor, "normal", unknown, unknown, unknown>;
+    readonly icon: import("../../../utils/props").BuildPropReturn<import("../../../utils/props").PropWrapper<string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>>, "", unknown, unknown, unknown>;
+    readonly hollow: import("../../../utils/props").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
+}, {
+    ns: {
+        namespace: import("vue").ComputedRef<string>;
+        b: (blockSuffix?: string) => string;
+        e: (element?: string | undefined) => string;
+        m: (modifier?: string | undefined) => string;
+        be: (blockSuffix?: string | undefined, element?: string | undefined) => string;
+        em: (element?: string | undefined, modifier?: string | undefined) => string;
+        bm: (blockSuffix?: string | undefined, modifier?: string | undefined) => string;
+        bem: (blockSuffix?: string | undefined, element?: string | undefined, modifier?: string | undefined) => string;
+        is: (name: string, state?: boolean) => string;
+    };
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+    readonly timestamp?: unknown;
+    readonly hideTimestamp?: unknown;
+    readonly center?: unknown;
+    readonly placement?: unknown;
+    readonly type?: unknown;
+    readonly color?: unknown;
+    readonly size?: unknown;
+    readonly icon?: unknown;
+    readonly hollow?: unknown;
+} & {
+    type: string;
+    icon: import("../../../utils/props").BuildPropType<import("../../../utils/props").PropWrapper<string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>>, unknown, unknown>;
+    size: string;
+    color: string;
+    center: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
+    placement: string;
+    timestamp: string;
+    hideTimestamp: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
+    hollow: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
+} & {}>, {
+    type: string;
+    icon: import("../../../utils/props").BuildPropType<import("../../../utils/props").PropWrapper<string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>>, unknown, unknown>;
+    size: string;
+    color: string;
+    center: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
+    placement: string;
+    timestamp: string;
+    hideTimestamp: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
+    hollow: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
+}>;
+export default _default;

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

@@ -0,0 +1,22 @@
+import { defineComponent } from 'vue';
+import { ElIcon } from '../../icon/index.mjs';
+import '../../../hooks/index.mjs';
+import { timelineItemProps } from './timeline-item.mjs';
+import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
+
+var script = defineComponent({
+  name: "ElTimelineItem",
+  components: {
+    ElIcon
+  },
+  props: timelineItemProps,
+  setup() {
+    const ns = useNamespace("timeline-item");
+    return {
+      ns
+    };
+  }
+});
+
+export { script as default };
+//# sourceMappingURL=timeline-item.vue_vue_type_script_lang.mjs.map

package/es/components/timeline/src/timeline-item.vue_vue_type_script_lang.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"timeline-item.vue_vue_type_script_lang.mjs","sources":["../../../../../../packages/components/timeline/src/timeline-item.vue"],"sourcesContent":["<template>\n  <li :class=\"[ns.b(), { [ns.e('center')]: center }]\">\n    <div :class=\"ns.e('tail')\"></div>\n    <div\n      v-if=\"!$slots.dot\"\n      :class=\"[\n        ns.e('node'),\n        ns.em('node', size || ''),\n        ns.em('node', type || ''),\n        hollow ? 'is-hollow' : '',\n      ]\"\n      :style=\"{\n        backgroundColor: color,\n      }\"\n    >\n      <el-icon v-if=\"icon\" :class=\"ns.e('icon')\">\n        <component :is=\"icon\" />\n      </el-icon>\n    </div>\n    <div v-if=\"$slots.dot\" :class=\"ns.e('dot')\">\n      <slot name=\"dot\"></slot>\n    </div>\n\n    <div :class=\"ns.e('wrapper')\">\n      <div\n        v-if=\"!hideTimestamp && placement === 'top'\"\n        :class=\"[ns.e('timestamp'), 'is-top']\"\n      >\n        {{ timestamp }}\n      </div>\n\n      <div :class=\"ns.e('content')\">\n        <slot></slot>\n      </div>\n\n      <div\n        v-if=\"!hideTimestamp && placement === 'bottom'\"\n        :class=\"[ns.e('timestamp'), 'is-bottom']\"\n      >\n        {{ timestamp }}\n      </div>\n    </div>\n  </li>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { useNamespace } from '@element-plus/hooks'\nimport { timelineItemProps } from './timeline-item'\n\nexport default defineComponent({\n  name: 'ElTimelineItem',\n  components: {\n    ElIcon,\n  },\n  props: timelineItemProps,\n  setup() {\n    const ns = useNamespace('timeline-item')\n    return {\n      ns,\n    }\n  },\n})\n</script>\n"],"names":[],"mappings":";;;;;;AAiDA,aAAe,eAAe,CAAC;;AAE/B,EAAE,UAAU;IACR,MAAM;GACP;OACI,EAAE;EACP;IACE,MAAM,EAAE,GAAG;IACX;MACE,EAAE;KACH,CAAC;;;;;;"}

package/es/components/timeline/src/timeline-item.vue_vue_type_template_id_1db6c36b_lang.mjs

@@ -0,0 +1,60 @@
+import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, normalizeStyle, createBlock, withCtx, resolveDynamicComponent, createCommentVNode, renderSlot, toDisplayString } from 'vue';
+
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_el_icon = resolveComponent("el-icon");
+  return openBlock(), createElementBlock("li", {
+    class: normalizeClass([_ctx.ns.b(), { [_ctx.ns.e("center")]: _ctx.center }])
+  }, [
+    createElementVNode("div", {
+      class: normalizeClass(_ctx.ns.e("tail"))
+    }, null, 2),
+    !_ctx.$slots.dot ? (openBlock(), createElementBlock("div", {
+      key: 0,
+      class: normalizeClass([
+        _ctx.ns.e("node"),
+        _ctx.ns.em("node", _ctx.size || ""),
+        _ctx.ns.em("node", _ctx.type || ""),
+        _ctx.hollow ? "is-hollow" : ""
+      ]),
+      style: normalizeStyle({
+        backgroundColor: _ctx.color
+      })
+    }, [
+      _ctx.icon ? (openBlock(), createBlock(_component_el_icon, {
+        key: 0,
+        class: normalizeClass(_ctx.ns.e("icon"))
+      }, {
+        default: withCtx(() => [
+          (openBlock(), createBlock(resolveDynamicComponent(_ctx.icon)))
+        ]),
+        _: 1
+      }, 8, ["class"])) : createCommentVNode("v-if", true)
+    ], 6)) : createCommentVNode("v-if", true),
+    _ctx.$slots.dot ? (openBlock(), createElementBlock("div", {
+      key: 1,
+      class: normalizeClass(_ctx.ns.e("dot"))
+    }, [
+      renderSlot(_ctx.$slots, "dot")
+    ], 2)) : createCommentVNode("v-if", true),
+    createElementVNode("div", {
+      class: normalizeClass(_ctx.ns.e("wrapper"))
+    }, [
+      !_ctx.hideTimestamp && _ctx.placement === "top" ? (openBlock(), createElementBlock("div", {
+        key: 0,
+        class: normalizeClass([_ctx.ns.e("timestamp"), "is-top"])
+      }, toDisplayString(_ctx.timestamp), 3)) : createCommentVNode("v-if", true),
+      createElementVNode("div", {
+        class: normalizeClass(_ctx.ns.e("content"))
+      }, [
+        renderSlot(_ctx.$slots, "default")
+      ], 2),
+      !_ctx.hideTimestamp && _ctx.placement === "bottom" ? (openBlock(), createElementBlock("div", {
+        key: 1,
+        class: normalizeClass([_ctx.ns.e("timestamp"), "is-bottom"])
+      }, toDisplayString(_ctx.timestamp), 3)) : createCommentVNode("v-if", true)
+    ], 2)
+  ], 2);
+}
+
+export { render };
+//# sourceMappingURL=timeline-item.vue_vue_type_template_id_1db6c36b_lang.mjs.map

package/es/components/timeline/src/timeline-item.vue_vue_type_template_id_1db6c36b_lang.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"timeline-item.vue_vue_type_template_id_1db6c36b_lang.mjs","sources":["../../../../../../packages/components/timeline/src/timeline-item.vue?vue&type=template&id=1db6c36b&lang.js"],"sourcesContent":["<template>\n  <li :class=\"[ns.b(), { [ns.e('center')]: center }]\">\n    <div :class=\"ns.e('tail')\"></div>\n    <div\n      v-if=\"!$slots.dot\"\n      :class=\"[\n        ns.e('node'),\n        ns.em('node', size || ''),\n        ns.em('node', type || ''),\n        hollow ? 'is-hollow' : '',\n      ]\"\n      :style=\"{\n        backgroundColor: color,\n      }\"\n    >\n      <el-icon v-if=\"icon\" :class=\"ns.e('icon')\">\n        <component :is=\"icon\" />\n      </el-icon>\n    </div>\n    <div v-if=\"$slots.dot\" :class=\"ns.e('dot')\">\n      <slot name=\"dot\"></slot>\n    </div>\n\n    <div :class=\"ns.e('wrapper')\">\n      <div\n        v-if=\"!hideTimestamp && placement === 'top'\"\n        :class=\"[ns.e('timestamp'), 'is-top']\"\n      >\n        {{ timestamp }}\n      </div>\n\n      <div :class=\"ns.e('content')\">\n        <slot></slot>\n      </div>\n\n      <div\n        v-if=\"!hideTimestamp && placement === 'bottom'\"\n        :class=\"[ns.e('timestamp'), 'is-bottom']\"\n      >\n        {{ timestamp }}\n      </div>\n    </div>\n  </li>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { useNamespace } from '@element-plus/hooks'\nimport { timelineItemProps } from './timeline-item'\n\nexport default defineComponent({\n  name: 'ElTimelineItem',\n  components: {\n    ElIcon,\n  },\n  props: timelineItemProps,\n  setup() {\n    const ns = useNamespace('timeline-item')\n    return {\n      ns,\n    }\n  },\n})\n</script>\n"],"names":["_createElementVNode","_createElementBlock"],"mappings":";;;;;;;IACOA;;;mCACY,EAAEC;;MAER;;;eACD;;;;;;;;;;;;;;;;gCAWJ;;;;;;;;;;iCAG2B;;;;;;;;;yBAK7B;;mCAEW;6BAEN;;MAGL;;;;;"}

package/es/components/timeline/src/timeline-item2.mjs

@@ -0,0 +1,7 @@
+import script from './timeline-item.vue_vue_type_script_lang.mjs';
+export { default } from './timeline-item.vue_vue_type_script_lang.mjs';
+import { render } from './timeline-item.vue_vue_type_template_id_1db6c36b_lang.mjs';
+
+script.render = render;
+script.__file = "packages/components/timeline/src/timeline-item.vue";
+//# sourceMappingURL=timeline-item2.mjs.map

package/es/components/timeline/src/timeline-item2.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"timeline-item2.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}

package/es/components/timeline/src/{index.vue.d.ts → timeline.d.ts}

@@ -1,4 +1,5 @@
-declare const _default: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+declare const Timeline: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
     [key: string]: any;
 }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{} & {} & {}>, {}>;
-export default _default;
+export default Timeline;
+export declare type TimelineInstance = InstanceType<typeof Timeline>;

package/es/components/timeline/src/timeline.mjs

@@ -0,0 +1,17 @@
+import { defineComponent, provide, h, renderSlot } from 'vue';
+import '../../../hooks/index.mjs';
+import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
+
+const Timeline = defineComponent({
+  name: "ElTimeline",
+  setup(_, { slots }) {
+    const ns = useNamespace("timeline");
+    provide("timeline", slots);
+    return () => {
+      return h("ul", { class: [ns.b()] }, [renderSlot(slots, "default")]);
+    };
+  }
+});
+
+export { Timeline as default };
+//# sourceMappingURL=timeline.mjs.map

package/es/components/timeline/src/timeline.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"timeline.mjs","sources":["../../../../../../packages/components/timeline/src/timeline.ts"],"sourcesContent":["import { h, provide, defineComponent, renderSlot } from 'vue'\nimport { useNamespace } from '@element-plus/hooks'\n\nconst Timeline = defineComponent({\n  name: 'ElTimeline',\n  setup(_, { slots }) {\n    const ns = useNamespace('timeline')\n\n    provide('timeline', slots)\n\n    /**\n     *  Maybe ,this component will not support prop 'reverse', why ?\n     *\n     *  Example 1:\n     *   <component-a>\n     *     <div>1</div>\n     *     <div>2</div>\n     *   </component-a>\n     *\n     *  Example 2:\n     *   <component-a>\n     *     <div v-for=\"i in 2\" :key=\"i\">{{ i }}</div>\n     *   </component-a>\n     *\n     *  'slots.default()' value in example 1 just like [Vnode, Vnode]\n     *  'slots.default()' value in example 2 just like [Vnode]\n     *\n     *   so i can't reverse the slots, when i use 'v-for' directive.\n     */\n\n    return () => {\n      return h('ul', { class: [ns.b()] }, [renderSlot(slots, 'default')])\n    }\n  },\n})\n\nexport default Timeline\nexport type TimelineInstance = InstanceType<typeof Timeline>\n"],"names":[],"mappings":";;;;AAEK,MAAC,QAAQ,GAAG,eAAe,CAAC;AACjC,EAAE,IAAI,EAAE,YAAY;AACpB,EAAE,KAAK,CAAC,CAAC,EAAE,EAAE,KAAK,EAAE,EAAE;AACtB,IAAI,MAAM,EAAE,GAAG,YAAY,CAAC,UAAU,CAAC,CAAC;AACxC,IAAI,OAAO,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC;AAC/B,IAAI,OAAO,MAAM;AACjB,MAAM,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,UAAU,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC;AAC1E,KAAK,CAAC;AACN,GAAG;AACH,CAAC;;;;"}