You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1 line
9.1 KiB
1 line
9.1 KiB
2 years ago
|
{"version":3,"file":"use-carousel-item.mjs","sources":["../../../../../../packages/components/carousel/src/use-carousel-item.ts"],"sourcesContent":["import {\n getCurrentInstance,\n inject,\n onMounted,\n onUnmounted,\n reactive,\n ref,\n unref,\n} from 'vue'\nimport { debugWarn, isUndefined } from '@element-plus/utils'\nimport { carouselContextKey } from './constants'\n\nimport type { CarouselItemProps } from './carousel-item'\n\nexport const useCarouselItem = (\n props: CarouselItemProps,\n componentName: string\n) => {\n const carouselContext = inject(carouselContextKey)!\n // instance\n const instance = getCurrentInstance()!\n if (!carouselContext) {\n debugWarn(\n componentName,\n 'usage: <el-carousel></el-carousel-item></el-carousel>'\n )\n }\n\n if (!instance) {\n debugWarn(\n componentName,\n 'compositional hook can only be invoked inside setups'\n )\n }\n\n const CARD_SCALE = 0.83\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 } = 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 - CARD_SCALE) * (index - activeIndex) + 1)) / 4\n } else if (index < activeIndex) {\n return (-(1 + CARD_SCALE) * parentWidth) / 4\n } else {\n return ((3 + CARD_SCALE) * 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 : CARD_SCALE\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 // lifecyc
|