element-plus
Version:
A Component Library for Vue 3
1 lines • 7.8 kB
Source Map (JSON)
{"version":3,"file":"carousel2.mjs","sources":["../../../../../../packages/components/carousel/src/carousel.vue"],"sourcesContent":["<template>\n <div\n ref=\"root\"\n :class=\"carouselClasses\"\n @mouseenter.stop=\"handleMouseEnter\"\n @mouseleave.stop=\"handleMouseLeave\"\n >\n <transition v-if=\"arrowDisplay\" name=\"carousel-arrow-left\">\n <button\n v-show=\"\n (arrow === 'always' || hover) && (props.loop || activeIndex > 0)\n \"\n type=\"button\"\n :class=\"[ns.e('arrow'), ns.em('arrow', 'left')]\"\n :aria-label=\"t('el.carousel.leftArrow')\"\n @mouseenter=\"handleButtonEnter('left')\"\n @mouseleave=\"handleButtonLeave\"\n @click.stop=\"throttledArrowClick(activeIndex - 1)\"\n >\n <ElIcon>\n <ArrowLeft />\n </ElIcon>\n </button>\n </transition>\n <transition v-if=\"arrowDisplay\" name=\"carousel-arrow-right\">\n <button\n v-show=\"\n (arrow === 'always' || hover) &&\n (props.loop || activeIndex < items.length - 1)\n \"\n type=\"button\"\n :class=\"[ns.e('arrow'), ns.em('arrow', 'right')]\"\n :aria-label=\"t('el.carousel.rightArrow')\"\n @mouseenter=\"handleButtonEnter('right')\"\n @mouseleave=\"handleButtonLeave\"\n @click.stop=\"throttledArrowClick(activeIndex + 1)\"\n >\n <ElIcon>\n <ArrowRight />\n </ElIcon>\n </button>\n </transition>\n <div\n :class=\"carouselContainer\"\n :style=\"containerStyle\"\n @transitionend=\"handleTransitionEnd\"\n >\n <PlaceholderItem />\n <slot />\n </div>\n <ul v-if=\"indicatorPosition !== 'none'\" :class=\"indicatorsClasses\">\n <li\n v-for=\"(item, index) in items\"\n v-show=\"isTwoLengthShow(index)\"\n :key=\"index\"\n :class=\"[\n ns.e('indicator'),\n ns.em('indicator', direction),\n ns.is('active', index === activeIndex),\n ]\"\n @mouseenter=\"throttledIndicatorHover(index)\"\n @click.stop=\"handleIndicatorClick(index)\"\n >\n <button\n :class=\"ns.e('button')\"\n :aria-label=\"t('el.carousel.indicator', { index: index + 1 })\"\n >\n <span v-if=\"hasLabel\">{{ item.props.label }}</span>\n </button>\n </li>\n </ul>\n <svg\n v-if=\"props.motionBlur\"\n xmlns=\"http://www.w3.org/2000/svg\"\n version=\"1.1\"\n style=\"display: none\"\n >\n <defs>\n <filter id=\"elCarouselHorizontal\">\n <feGaussianBlur in=\"SourceGraphic\" stdDeviation=\"12,0\" />\n </filter>\n <filter id=\"elCarouselVertical\">\n <feGaussianBlur in=\"SourceGraphic\" stdDeviation=\"0,10\" />\n </filter>\n </defs>\n </svg>\n </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, unref } from 'vue'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { ArrowLeft, ArrowRight } from '@element-plus/icons-vue'\nimport { useLocale, useNamespace } from '@element-plus/hooks'\nimport { carouselEmits, carouselProps } from './carousel'\nimport { useCarousel } from './use-carousel'\n\nconst COMPONENT_NAME = 'ElCarousel'\ndefineOptions({\n name: COMPONENT_NAME,\n})\n\nconst props = defineProps(carouselProps)\nconst emit = defineEmits(carouselEmits)\nconst {\n root,\n activeIndex,\n arrowDisplay,\n hasLabel,\n hover,\n isCardType,\n items,\n isVertical,\n containerStyle,\n handleButtonEnter,\n handleButtonLeave,\n isTransitioning,\n handleIndicatorClick,\n handleMouseEnter,\n handleMouseLeave,\n handleTransitionEnd,\n setActiveItem,\n prev,\n next,\n PlaceholderItem,\n isTwoLengthShow,\n throttledArrowClick,\n throttledIndicatorHover,\n} = useCarousel(props, emit, COMPONENT_NAME)\nconst ns = useNamespace('carousel')\n\nconst { t } = useLocale()\n\nconst carouselClasses = computed(() => {\n const classes = [ns.b(), ns.m(props.direction)]\n if (unref(isCardType)) {\n classes.push(ns.m('card'))\n }\n return classes\n})\n\nconst carouselContainer = computed(() => {\n const classes = [ns.e('container')]\n if (props.motionBlur && unref(isTransitioning) && items.value.length > 1) {\n classes.push(\n unref(isVertical)\n ? `${ns.namespace.value}-transitioning-vertical`\n : `${ns.namespace.value}-transitioning`\n )\n }\n return classes\n})\n\nconst indicatorsClasses = computed(() => {\n const classes = [ns.e('indicators'), ns.em('indicators', props.direction)]\n if (unref(hasLabel)) {\n classes.push(ns.em('indicators', 'labels'))\n }\n if (props.indicatorPosition === 'outside') {\n classes.push(ns.em('indicators', 'outside'))\n }\n if (unref(isVertical)) {\n classes.push(ns.em('indicators', 'right'))\n }\n return classes\n})\n\ndefineExpose({\n /** @description active slide index */\n activeIndex,\n /** @description manually switch slide, index of the slide to be switched to, starting from 0; or the `name` of corresponding `el-carousel-item` */\n setActiveItem,\n /** @description switch to the previous slide */\n prev,\n /** @description switch to the next slide */\n next,\n})\n</script>\n"],"names":["_openBlock","_createElementBlock","_normalizeClass","_unref","_withModifiers"],"mappings":"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"}