UNPKG

element-plus

Version:

A Component Library for Vue 3

1 lines 9.47 kB
{"version":3,"file":"carousel-item2.mjs","sources":["../../../../../../packages/components/carousel/src/carousel-item.vue"],"sourcesContent":["<template>\n <div\n v-show=\"ready\"\n :class=\"[\n ns.e('item'),\n ns.is('active', active),\n ns.is('in-stage', inStage),\n ns.is('hover', hover),\n ns.is('animating', animating),\n { [ns.em('item', 'card')]: isCardType },\n ]\"\n :style=\"itemStyle\"\n @click=\"handleItemClick\"\n >\n <div v-if=\"isCardType\" v-show=\"!active\" :class=\"ns.e('mask')\" />\n <slot />\n </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport {\n computed,\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 { useNamespace } from '@element-plus/hooks'\nimport { carouselContextKey } from '@element-plus/tokens'\nimport { carouselItemProps } from './carousel-item'\n\nimport type { CSSProperties } from 'vue'\n\ndefineOptions({\n name: 'ElCarouselItem',\n})\n\nconst props = defineProps(carouselItemProps)\nconst ns = useNamespace('carousel')\nconst COMPONENT_NAME = 'ElCarouselItem'\n// inject\nconst carouselContext = inject(carouselContextKey)!\n// instance\nconst instance = getCurrentInstance()!\nif (!carouselContext) {\n debugWarn(\n COMPONENT_NAME,\n 'usage: <el-carousel></el-carousel-item></el-carousel>'\n )\n}\n\nif (!instance) {\n debugWarn(\n COMPONENT_NAME,\n 'compositional hook can only be invoked inside setups'\n )\n}\n\nconst CARD_SCALE = 0.83\n\nconst hover = ref(false)\nconst translate = ref(0)\nconst scale = ref(1)\nconst active = ref(false)\nconst ready = ref(false)\nconst inStage = ref(false)\nconst animating = ref(false)\n\n// computed\nconst { isCardType, isVertical } = carouselContext\n\nconst itemStyle = computed<CSSProperties>(() => {\n const translateType = `translate${unref(isVertical) ? 'Y' : 'X'}`\n const _translate = `${translateType}(${unref(translate)}px)`\n const _scale = `scale(${unref(scale)})`\n const transform = [_translate, _scale].join(' ')\n\n return {\n transform,\n }\n})\n\n// methods\n\nfunction 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\nfunction calcCardTranslate(index: number, activeIndex: number) {\n const parentWidth = carouselContext.root.value?.offsetWidth || 0\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\nfunction 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 = (isVertical ? rootEl.offsetHeight : rootEl.offsetWidth) || 0\n return distance * (index - activeIndex)\n}\n\nconst 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 if (_isVertical) {\n debugWarn('Carousel', 'vertical direction is not supported for card mode')\n }\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\nfunction 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// lifecycle\nonMounted(() => {\n carouselContext.addItem({\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 translateItem,\n })\n})\n\nonUnmounted(() => {\n carouselContext.removeItem(instance.uid)\n})\n</script>\n"],"names":[],"mappings":"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"}