feat(components): [carousel] height is adaptive when height is auto

docs/en-US/component/carousel.md

@@ -35,6 +35,16 @@ carousel/arrows
 
 :::
 
+## Auto height
+
+When the `height` of `carousel` is set to `auto`, the `carousel` height will be automatically set according to the height of the `carousel item`
+
+:::demo
+
+carousel/auto-height
+
+:::
+
 ## Card mode
 
 When a page is wide enough but has limited height, you can activate card mode for carousels

docs/examples/carousel/auto-height.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="block text-center" style="height: 300px">
+    <span class="demonstration">each carousel-item has a different height</span>
+    <el-carousel height="auto" autoplay style="overflow: hidden">
+      <el-carousel-item style="height: 100px">
+        <h3 class="small justify-center" text="2xl">height 100px</h3>
+      </el-carousel-item>
+      <el-carousel-item style="height: 200px">
+        <h3 class="small justify-center" text="2xl">height 200px</h3>
+      </el-carousel-item>
+      <el-carousel-item style="height: 300px">
+        <h3 class="small justify-center" text="2xl">height 300px</h3>
+      </el-carousel-item>
+    </el-carousel>
+  </div>
+</template>
+
+<style scoped>
+.carousel-item {
+  color: #475669;
+  opacity: 0.75;
+  margin: 0;
+  text-align: center;
+}
+
+.el-carousel__item h3 {
+  color: #475669;
+  opacity: 0.75;
+  display: flex;
+  align-items: center;
+  margin: 0;
+  text-align: center;
+  height: 100%;
+}
+
+.el-carousel__item:nth-child(2n) {
+  background-color: #99a9bf;
+}
+
+.el-carousel__item:nth-child(2n + 1) {
+  background-color: #d3dce6;
+}
+</style>

packages/components/carousel/src/carousel-item.vue

@@ -1,6 +1,7 @@
 <template>
   <div
     v-show="ready"
+    ref="carouselItemRef"
     :class="[
       ns.e('item'),
       ns.is('active', active),
@@ -34,6 +35,7 @@ const ns = useNamespace('carousel')
 const COMPONENT_NAME = 'ElCarouselItem'
 // inject
 const {
+  carouselItemRef,
   active,
   animating,
   hover,

packages/components/carousel/src/carousel.vue

@@ -5,7 +5,7 @@
     @mouseenter.stop="handleMouseEnter"
     @mouseleave.stop="handleMouseLeave"
   >
-    <div :class="ns.e('container')" :style="{ height: height }">
+    <div :class="ns.e('container')" :style="containerStyle">
       <transition v-if="arrowDisplay" name="carousel-arrow-left">
         <button
           v-show="
@@ -84,6 +84,7 @@ const {
   hover,
   isCardType,
   items,
+  containerStyle,
   handleButtonEnter,
   handleButtonLeave,
   handleIndicatorClick,

packages/components/carousel/src/use-carousel-item.ts

@@ -35,6 +35,7 @@ export const useCarouselItem = (
 
   const CARD_SCALE = 0.83
 
+  const carouselItemRef = ref<HTMLElement>()
   const hover = ref(false)
   const translate = ref(0)
   const scale = ref(1)
@@ -125,6 +126,10 @@ export const useCarouselItem = (
     }
 
     ready.value = true
+
+    if (isActive && carouselItemRef.value) {
+      carouselContext.setContainerHeight(carouselItemRef.value.offsetHeight)
+    }
   }
 
   function handleItemClick() {
@@ -159,6 +164,7 @@ export const useCarouselItem = (
   })
 
   return {
+    carouselItemRef,
     active,
     animating,
     hover,

packages/components/carousel/src/use-carousel.ts

@@ -40,6 +40,7 @@ export const useCarousel = (
   const timer = ref<ReturnType<typeof setInterval> | null>(null)
   const hover = ref(false)
   const root = ref<HTMLDivElement>()
+  const containerHeight = ref<number>(0)
 
   // computed
   const arrowDisplay = computed(
@@ -52,6 +53,16 @@ export const useCarousel = (
 
   const isCardType = computed(() => props.type === 'card')
   const isVertical = computed(() => props.direction === 'vertical')
+  const containerStyle = computed(() => {
+    if (props.height === 'auto') {
+      return {
+        height: `${containerHeight.value}px`,
+      }
+    }
+    return {
+      height: props.height,
+    }
+  })
 
   // methods
   const throttledArrowClick = throttle(
@@ -192,6 +203,12 @@ export const useCarousel = (
     startTimer()
   }
 
+  function setContainerHeight(height: number) {
+    if (props.height === 'auto') {
+      containerHeight.value = height
+    }
+  }
+
   // watch
   watch(
     () => activeIndex.value,
@@ -253,6 +270,7 @@ export const useCarousel = (
     addItem,
     removeItem,
     setActiveItem,
+    setContainerHeight,
   })
 
   return {
@@ -263,6 +281,7 @@ export const useCarousel = (
     hover,
     isCardType,
     items,
+    containerStyle,
     handleButtonEnter,
     handleButtonLeave,
     handleIndicatorClick,

packages/tokens/carousel.ts

@@ -28,6 +28,7 @@ export type CarouselContext = {
   addItem: (item: CarouselItemContext) => void
   removeItem: (uid: number) => void
   setActiveItem: (index: number) => void
+  setContainerHeight: (height: number) => void
 }
 
 export const carouselContextKey: InjectionKey<CarouselContext> =