{"version":3,"file":"main.vue.mjs","sources":["../../../../../packages/components/carousel/src/main.vue"],"sourcesContent":["<template>\n  <div\n    ref=\"root\"\n    :class=\"carouselClasses\"\n    @mouseenter.stop=\"handleMouseEnter\"\n    @mouseleave.stop=\"handleMouseLeave\"\n  >\n    <div :class=\"ns.e('container')\" :style=\"{ height: height }\">\n      <transition v-if=\"arrowDisplay\" name=\"carousel-arrow-left\">\n        <button\n          v-show=\"\n            (arrow === 'always' || data.hover) &&\n            (props.loop || data.activeIndex > 0)\n          \"\n          type=\"button\"\n          :class=\"[ns.e('arrow'), ns.em('arrow', 'left')]\"\n          @mouseenter=\"handleButtonEnter('left')\"\n          @mouseleave=\"handleButtonLeave\"\n          @click.stop=\"throttledArrowClick(data.activeIndex - 1)\"\n        >\n          <el-icon>\n            <arrow-left />\n          </el-icon>\n        </button>\n      </transition>\n      <transition v-if=\"arrowDisplay\" name=\"carousel-arrow-right\">\n        <button\n          v-show=\"\n            (arrow === 'always' || data.hover) &&\n            (props.loop || data.activeIndex < items.length - 1)\n          \"\n          type=\"button\"\n          :class=\"[ns.e('arrow'), ns.em('arrow', 'right')]\"\n          @mouseenter=\"handleButtonEnter('right')\"\n          @mouseleave=\"handleButtonLeave\"\n          @click.stop=\"throttledArrowClick(data.activeIndex + 1)\"\n        >\n          <el-icon>\n            <arrow-right />\n          </el-icon>\n        </button>\n      </transition>\n      <slot></slot>\n    </div>\n    <ul v-if=\"indicatorPosition !== 'none'\" :class=\"indicatorsClasses\">\n      <li\n        v-for=\"(item, index) in items\"\n        :key=\"index\"\n        :class=\"[\n          ns.e('indicator'),\n          ns.em('indicator', direction),\n          ns.is('active', index === data.activeIndex),\n        ]\"\n        @mouseenter=\"throttledIndicatorHover(index)\"\n        @click.stop=\"handleIndicatorClick(index)\"\n      >\n        <button :class=\"ns.e('button')\">\n          <span v-if=\"hasLabel\">{{ item.label }}</span>\n        </button>\n      </li>\n    </ul>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport {\n  defineComponent,\n  reactive,\n  computed,\n  ref,\n  provide,\n  onMounted,\n  onBeforeUnmount,\n  watch,\n  nextTick,\n} from 'vue'\nimport { throttle } from 'lodash-unified'\nimport {\n  addResizeListener,\n  removeResizeListener,\n  debugWarn,\n} from '@element-ultra/utils'\nimport { ElIcon } from '@element-ultra/components/icon'\nimport { ArrowLeft, ArrowRight } from 'icon-ultra'\nimport { useNamespace } from '@element-ultra/hooks'\n\nimport type {\n  ICarouselProps,\n  CarouselItem,\n  InjectCarouselScope,\n} from './carousel'\n\nexport default defineComponent({\n  name: 'ElCarousel',\n  components: {\n    ElIcon,\n    ArrowLeft,\n    ArrowRight,\n  },\n  props: {\n    initialIndex: {\n      type: Number,\n      default: 0,\n    },\n    height: { type: String, default: '' },\n    trigger: {\n      type: String,\n      default: 'hover',\n    },\n    autoplay: {\n      type: Boolean,\n      default: true,\n    },\n    interval: {\n      type: Number,\n      default: 3000,\n    },\n    indicatorPosition: { type: String, default: '' },\n    indicator: {\n      type: Boolean,\n      default: true,\n    },\n    arrow: {\n      type: String,\n      default: 'hover',\n    },\n    type: { type: String, default: '' },\n    loop: {\n      type: Boolean,\n      default: true,\n    },\n    direction: {\n      type: String,\n      default: 'horizontal',\n      validator(val: string) {\n        return ['horizontal', 'vertical'].includes(val)\n      },\n    },\n    pauseOnHover: {\n      type: Boolean,\n      default: true,\n    },\n  },\n  emits: ['change'],\n  setup(props: ICarouselProps, { emit }) {\n    const ns = useNamespace('carousel')\n    // data\n    const data = reactive<{\n      activeIndex: number\n      containerWidth: number\n      timer: null | ReturnType<typeof setInterval>\n      hover: boolean\n    }>({\n      activeIndex: -1,\n      containerWidth: 0,\n      timer: null,\n      hover: false,\n    })\n\n    // refs\n    const root = ref(null)\n    const items = ref<CarouselItem[]>([])\n\n    // computed\n    const arrowDisplay = computed(\n      () => props.arrow !== 'never' && props.direction !== 'vertical'\n    )\n\n    const hasLabel = computed(() => {\n      return items.value.some((item) => item.label.toString().length > 0)\n    })\n\n    const carouselClasses = computed(() => {\n      const classes = [ns.b(), ns.m(props.direction)]\n      if (props.type === 'card') {\n        classes.push(ns.m('card'))\n      }\n      return classes\n    })\n\n    const indicatorsClasses = computed(() => {\n      const classes = [ns.e('indicators'), ns.em('indicators', props.direction)]\n      if (hasLabel.value) {\n        classes.push(ns.em('indicators', 'labels'))\n      }\n      if (props.indicatorPosition === 'outside' || props.type === 'card') {\n        classes.push(ns.em('indicators', 'outside'))\n      }\n      return classes\n    })\n\n    // methods\n    const throttledArrowClick = throttle(\n      (index) => {\n        setActiveItem(index)\n      },\n      300,\n      { trailing: true }\n    )\n\n    const throttledIndicatorHover = throttle((index) => {\n      handleIndicatorHover(index)\n    }, 300)\n\n    function pauseTimer() {\n      if (data.timer) {\n        clearInterval(data.timer)\n        data.timer = null\n      }\n    }\n\n    function startTimer() {\n      if (props.interval <= 0 || !props.autoplay || data.timer) return\n      data.timer = setInterval(() => playSlides(), props.interval)\n    }\n\n    const playSlides = () => {\n      if (data.activeIndex < items.value.length - 1) {\n        data.activeIndex = data.activeIndex + 1\n      } else if (props.loop) {\n        data.activeIndex = 0\n      }\n    }\n\n    function setActiveItem(index: number | string) {\n      if (typeof index === 'string') {\n        const filteredItems = items.value.filter((item) => item.name === index)\n        if (filteredItems.length > 0) {\n          index = items.value.indexOf(filteredItems[0])\n        }\n      }\n      index = Number(index)\n      if (isNaN(index) || index !== Math.floor(index)) {\n        debugWarn('Carousel', 'index must be an integer.')\n        return\n      }\n      const length = items.value.length\n      const oldIndex = data.activeIndex\n      if (index < 0) {\n        data.activeIndex = props.loop ? length - 1 : 0\n      } else if (index >= length) {\n        data.activeIndex = props.loop ? 0 : length - 1\n      } else {\n        data.activeIndex = index\n      }\n      if (oldIndex === data.activeIndex) {\n        resetItemPosition(oldIndex)\n      }\n    }\n\n    function resetItemPosition(oldIndex: number) {\n      items.value.forEach((item, index) => {\n        item.translateItem(index, data.activeIndex, oldIndex)\n      })\n    }\n\n    function addItem(item) {\n      items.value.push(item)\n    }\n\n    function removeItem(uid: number) {\n      const index = items.value.findIndex((item) => item.uid === uid)\n      if (index !== -1) {\n        items.value.splice(index, 1)\n        if (data.activeIndex === index) next()\n      }\n    }\n\n    function itemInStage(item, index) {\n      const length = items.value.length\n      if (\n        (index === length - 1 && item.inStage && items.value[0].active) ||\n        (item.inStage &&\n          items.value[index + 1] &&\n          items.value[index + 1].active)\n      ) {\n        return 'left'\n      } else if (\n        (index === 0 && item.inStage && items.value[length - 1].active) ||\n        (item.inStage &&\n          items.value[index - 1] &&\n          items.value[index - 1].active)\n      ) {\n        return 'right'\n      }\n      return false\n    }\n\n    function handleMouseEnter() {\n      data.hover = true\n      if (props.pauseOnHover) {\n        pauseTimer()\n      }\n    }\n\n    function handleMouseLeave() {\n      data.hover = false\n      startTimer()\n    }\n\n    function handleButtonEnter(arrow) {\n      if (props.direction === 'vertical') return\n      items.value.forEach((item, index) => {\n        if (arrow === itemInStage(item, index)) {\n          item.hover = true\n        }\n      })\n    }\n\n    function handleButtonLeave() {\n      if (props.direction === 'vertical') return\n      items.value.forEach((item) => {\n        item.hover = false\n      })\n    }\n\n    function handleIndicatorClick(index) {\n      data.activeIndex = index\n    }\n\n    function handleIndicatorHover(index) {\n      if (props.trigger === 'hover' && index !== data.activeIndex) {\n        data.activeIndex = index\n      }\n    }\n\n    function prev() {\n      setActiveItem(data.activeIndex - 1)\n    }\n\n    function next() {\n      setActiveItem(data.activeIndex + 1)\n    }\n\n    // watch\n    watch(\n      () => data.activeIndex,\n      (current, prev) => {\n        resetItemPosition(prev)\n        if (prev > -1) {\n          emit('change', current, prev)\n        }\n      }\n    )\n    watch(\n      () => props.autoplay,\n      (current) => {\n        current ? startTimer() : pauseTimer()\n      }\n    )\n    watch(\n      () => props.loop,\n      () => {\n        setActiveItem(data.activeIndex)\n      }\n    )\n\n    // lifecycle\n    onMounted(() => {\n      nextTick(() => {\n        addResizeListener(root.value, resetItemPosition)\n        if (\n          props.initialIndex < items.value.length &&\n          props.initialIndex >= 0\n        ) {\n          data.activeIndex = props.initialIndex\n        }\n        startTimer()\n      })\n    })\n\n    onBeforeUnmount(() => {\n      if (root.value) removeResizeListener(root.value, resetItemPosition)\n      pauseTimer()\n    })\n\n    // provide\n    provide<InjectCarouselScope>('injectCarouselScope', {\n      root,\n      direction: props.direction,\n      type: props.type,\n      items,\n      loop: props.loop,\n      addItem,\n      removeItem,\n      setActiveItem,\n    })\n\n    return {\n      data,\n      props,\n      items,\n\n      arrowDisplay,\n      carouselClasses,\n      indicatorsClasses,\n      hasLabel,\n\n      handleMouseEnter,\n      handleMouseLeave,\n      handleIndicatorClick,\n      throttledArrowClick,\n      throttledIndicatorHover,\n      handleButtonEnter,\n      handleButtonLeave,\n\n      prev,\n      next,\n      setActiveItem,\n\n      root,\n      ns,\n    }\n  },\n})\n</script>\n"],"names":["_resolveComponent","_openBlock","_createElementBlock","_normalizeClass","_withModifiers","_normalizeStyle","_createBlock","_Transition","_withCtx","_withDirectives","_createElementVNode","_vShow","_createCommentVNode","_renderSlot","_Fragment","_renderList"],"mappings":"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"}