element-plus/es/components/carousel/src/use-carousel-item.mjs.map

A Component Library for Vue 3

{"version":3,"file":"use-carousel-item.mjs","names":[],"sources":["../../../../../../packages/components/carousel/src/use-carousel-item.ts"],"sourcesContent":["import {\n  getCurrentInstance,\n  inject,\n  onBeforeUnmount,\n  reactive,\n  ref,\n  unref,\n} from 'vue'\nimport { debugWarn, isUndefined } from '@element-plus/utils'\nimport { CAROUSEL_ITEM_NAME, carouselContextKey } from './constants'\n\nimport type { CarouselItemProps } from './carousel-item'\n\nexport const useCarouselItem = (props: Required<CarouselItemProps>) => {\n  const carouselContext = inject(carouselContextKey)!\n  // instance\n  const instance = getCurrentInstance()!\n  if (!carouselContext) {\n    debugWarn(\n      CAROUSEL_ITEM_NAME,\n      'usage: <el-carousel></el-carousel-item></el-carousel>'\n    )\n  }\n\n  if (!instance) {\n    debugWarn(\n      CAROUSEL_ITEM_NAME,\n      'compositional hook can only be invoked inside setups'\n    )\n  }\n\n  const carouselItemRef = ref<HTMLElement>()\n  const hover = ref(false)\n  const translate = ref(0)\n  const scale = ref(1)\n  const active = ref(false)\n  const ready = ref(false)\n  const inStage = ref(false)\n  const animating = ref(false)\n\n  // computed\n  const { isCardType, isVertical, cardScale } = carouselContext\n\n  // methods\n\n  function processIndex(index: number, activeIndex: number, length: number) {\n    const lastItemIndex = length - 1\n    const prevItemIndex = activeIndex - 1\n    const nextItemIndex = activeIndex + 1\n    const halfItemIndex = length / 2\n\n    if (activeIndex === 0 && index === lastItemIndex) {\n      return -1\n    } else if (activeIndex === lastItemIndex && index === 0) {\n      return length\n    } else if (index < prevItemIndex && activeIndex - index >= halfItemIndex) {\n      return length + 1\n    } else if (index > nextItemIndex && index - activeIndex >= halfItemIndex) {\n      return -2\n    }\n    return index\n  }\n\n  function calcCardTranslate(index: number, activeIndex: number) {\n    const parentWidth = unref(isVertical)\n      ? carouselContext.root.value?.offsetHeight || 0\n      : carouselContext.root.value?.offsetWidth || 0\n\n    if (inStage.value) {\n      return (parentWidth * ((2 - cardScale) * (index - activeIndex) + 1)) / 4\n    } else if (index < activeIndex) {\n      return (-(1 + cardScale) * parentWidth) / 4\n    } else {\n      return ((3 + cardScale) * parentWidth) / 4\n    }\n  }\n\n  function calcTranslate(\n    index: number,\n    activeIndex: number,\n    isVertical: boolean\n  ) {\n    const rootEl = carouselContext.root.value\n    if (!rootEl) return 0\n\n    const distance =\n      (isVertical ? rootEl.offsetHeight : rootEl.offsetWidth) || 0\n    return distance * (index - activeIndex)\n  }\n\n  const translateItem = (\n    index: number,\n    activeIndex: number,\n    oldIndex?: number\n  ) => {\n    const _isCardType = unref(isCardType)\n    const carouselItemLength = carouselContext.items.value.length ?? Number.NaN\n\n    const isActive = index === activeIndex\n    if (!_isCardType && !isUndefined(oldIndex)) {\n      animating.value = isActive || index === oldIndex\n    }\n\n    if (!isActive && carouselItemLength > 2 && carouselContext.loop) {\n      index = processIndex(index, activeIndex, carouselItemLength)\n    }\n\n    const _isVertical = unref(isVertical)\n    active.value = isActive\n\n    if (_isCardType) {\n      inStage.value = Math.round(Math.abs(index - activeIndex)) <= 1\n      translate.value = calcCardTranslate(index, activeIndex)\n      scale.value = unref(active) ? 1 : cardScale\n    } else {\n      translate.value = calcTranslate(index, activeIndex, _isVertical)\n    }\n\n    ready.value = true\n\n    if (isActive && carouselItemRef.value) {\n      carouselContext.setContainerHeight(carouselItemRef.value.offsetHeight)\n    }\n  }\n\n  function handleItemClick() {\n    if (carouselContext && unref(isCardType)) {\n      const index = carouselContext.items.value.findIndex(\n        ({ uid }) => uid === instance.uid\n      )\n      carouselContext.setActiveItem(index)\n    }\n  }\n\n  const carouselItemContext = {\n    props,\n    states: reactive({\n      hover,\n      translate,\n      scale,\n      active,\n      ready,\n      inStage,\n      animating,\n    }),\n    uid: instance.uid,\n    getVnode: () => instance.vnode,\n    translateItem,\n  }\n\n  carouselContext.addItem(carouselItemContext)\n\n  onBeforeUnmount(() => {\n    carouselContext.removeItem(carouselItemContext)\n  })\n\n  return {\n    carouselItemRef,\n    active,\n    animating,\n    hover,\n    inStage,\n    isVertical,\n    translate,\n    isCardType,\n    scale,\n    ready,\n    handleItemClick,\n  }\n}\n"],"mappings":"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"}