refactor:carousel (#6262)

* refactor:carousel

* docs:update & refactor: carousel type

---------

Co-authored-by: tangjinzhou <[email protected]>

Author: shifeng1993

components/carousel/demo/autoplay.vue

@@ -26,15 +26,14 @@ Timing of scrolling to the next card/picture.
 </template>
 <style scoped>
 /* For demo */
-.ant-carousel :deep(.slick-slide) {
+:deep(.slick-slide) {
   text-align: center;
   height: 160px;
   line-height: 160px;
   background: #364d79;
   overflow: hidden;
 }
-
-.ant-carousel :deep(.slick-slide h3) {
+:deep(.slick-slide h3) {
   color: #fff;
 }
 </style>

components/carousel/demo/basic.vue

@@ -41,15 +41,15 @@ export default defineComponent({
 </script>
 <style scoped>
 /* For demo */
-.ant-carousel :deep(.slick-slide) {
+:deep(.slick-slide) {
   text-align: center;
   height: 160px;
   line-height: 160px;
   background: #364d79;
   overflow: hidden;
 }
 
-.ant-carousel :deep(.slick-slide h3) {
+:deep(.slick-slide h3) {
   color: #fff;
 }
 </style>

components/carousel/demo/customArrows.vue

@@ -46,31 +46,33 @@ export default defineComponent({
 </script>
 <style scoped>
 /* For demo */
-.ant-carousel :deep(.slick-slide) {
+:deep(.slick-slide) {
   text-align: center;
   height: 160px;
   line-height: 160px;
   background: #364d79;
   overflow: hidden;
 }
 
-.ant-carousel :deep(.slick-arrow.custom-slick-arrow) {
+:deep(.slick-arrow.custom-slick-arrow) {
   width: 25px;
   height: 25px;
   font-size: 25px;
   color: #fff;
   background-color: rgba(31, 45, 61, 0.11);
+  transition: ease all 0.3s;
   opacity: 0.3;
   z-index: 1;
 }
-.ant-carousel :deep(.custom-slick-arrow:before) {
+:deep(.slick-arrow.custom-slick-arrow:before) {
   display: none;
 }
-.ant-carousel :deep(.custom-slick-arrow:hover) {
+:deep(.slick-arrow.custom-slick-arrow:hover) {
+  color: #fff;
   opacity: 0.5;
 }
 
-.ant-carousel :deep(.slick-slide h3) {
+:deep(.slick-slide h3) {
   color: #fff;
 }
 </style>

components/carousel/demo/customPaging.vue

@@ -46,33 +46,33 @@ export default defineComponent({
 </script>
 <style scoped>
 /* For demo */
-.ant-carousel :deep(.slick-dots) {
+:deep(.slick-dots) {
   position: relative;
   height: auto;
 }
-.ant-carousel :deep(.slick-slide img) {
+:deep(.slick-slide img) {
   border: 5px solid #fff;
   display: block;
   margin: auto;
   max-width: 80%;
 }
-.ant-carousel :deep(.slick-arrow) {
+:deep(.slick-arrow) {
   display: none !important;
 }
-.ant-carousel :deep(.slick-thumb) {
+:deep(.slick-thumb) {
   bottom: 0px;
 }
-.ant-carousel :deep(.slick-thumb li) {
+:deep(.slick-thumb li) {
   width: 60px;
   height: 45px;
 }
-.ant-carousel :deep(.slick-thumb li img) {
+:deep(.slick-thumb li img) {
   width: 100%;
   height: 100%;
   filter: grayscale(100%);
   display: block;
 }
-.ant-carousel :deep .slick-thumb li.slick-active img {
+:deep .slick-thumb li.slick-active img {
   filter: grayscale(0%);
 }
 </style>

components/carousel/demo/fade.vue

@@ -26,15 +26,15 @@ Slides use fade for transition.
 </template>
 <style scoped>
 /* For demo */
-.ant-carousel :deep(.slick-slide) {
+:deep(.slick-slide) {
   text-align: center;
   height: 160px;
   line-height: 160px;
   background: #364d79;
   overflow: hidden;
 }
 
-.ant-carousel :deep(.slick-slide h3) {
+:deep(.slick-slide h3) {
   color: #fff;
 }
 </style>

components/carousel/demo/position.vue

@@ -43,15 +43,15 @@ export default defineComponent({
 </script>
 <style scoped>
 /* For demo */
-.ant-carousel :deep(.slick-slide) {
+:deep(.slick-slide) {
   text-align: center;
   height: 160px;
   line-height: 160px;
   background: #364d79;
   overflow: hidden;
 }
 
-.ant-carousel :deep(.slick-slide h3) {
+:deep(.slick-slide h3) {
   color: #fff;
 }
 </style>

components/carousel/index.en-US.md

@@ -2,7 +2,7 @@
 category: Components
 type: Data Display
 title: Carousel
-cover: https://gw.alipayobjects.com/zos/antfincdn/%24C9tmj978R/Carousel.svg
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*bPMSSqbaTMkAAAAAAAAAAAAADrJ8AQ/original
 ---
 
 A carousel component. Scales with its container.

components/carousel/index.tsx

@@ -1,12 +1,15 @@
-import type { CSSProperties, ExtractPropTypes, PropType } from 'vue';
+import type { CSSProperties, ExtractPropTypes } from 'vue';
 import { ref, computed, watchEffect, defineComponent } from 'vue';
 import PropTypes from '../_util/vue-types';
 import warning from '../_util/warning';
 import classNames from '../_util/classNames';
 import SlickCarousel from '../vc-slick';
-import { withInstall } from '../_util/type';
+import { withInstall, booleanType, functionType, stringType } from '../_util/type';
 import useConfigInject from '../config-provider/hooks/useConfigInject';
 
+// CSSINJS
+import useStyle from './style';
+
 export type SwipeDirection = 'left' | 'down' | 'right' | 'up' | string;
 
 export type LazyLoadTypes = 'ondemand' | 'progressive';
@@ -24,49 +27,49 @@ export interface CarouselRef {
 
 // Carousel
 export const carouselProps = () => ({
-  effect: String as PropType<CarouselEffect>,
-  dots: { type: Boolean, default: true },
-  vertical: { type: Boolean, default: undefined },
-  autoplay: { type: Boolean, default: undefined },
+  effect: stringType<CarouselEffect>(),
+  dots: booleanType(true),
+  vertical: booleanType(),
+  autoplay: booleanType(),
   easing: String,
-  beforeChange: Function as PropType<(currentSlide: number, nextSlide: number) => void>,
-  afterChange: Function as PropType<(currentSlide: number) => void>,
+  beforeChange: functionType<(currentSlide: number, nextSlide: number) => void>(),
+  afterChange: functionType<(currentSlide: number) => void>(),
   // style: PropTypes.React.CSSProperties,
   prefixCls: String,
-  accessibility: { type: Boolean, default: undefined },
+  accessibility: booleanType(),
   nextArrow: PropTypes.any,
   prevArrow: PropTypes.any,
-  pauseOnHover: { type: Boolean, default: undefined },
+  pauseOnHover: booleanType(),
   // className: String,
-  adaptiveHeight: { type: Boolean, default: undefined },
-  arrows: { type: Boolean, default: false },
+  adaptiveHeight: booleanType(),
+  arrows: booleanType(false),
   autoplaySpeed: Number,
-  centerMode: { type: Boolean, default: undefined },
+  centerMode: booleanType(),
   centerPadding: String,
   cssEase: String,
   dotsClass: String,
-  draggable: { type: Boolean, default: false },
-  fade: { type: Boolean, default: undefined },
-  focusOnSelect: { type: Boolean, default: undefined },
-  infinite: { type: Boolean, default: undefined },
+  draggable: booleanType(false),
+  fade: booleanType(),
+  focusOnSelect: booleanType(),
+  infinite: booleanType(),
   initialSlide: Number,
-  lazyLoad: String as PropType<LazyLoadTypes>,
-  rtl: { type: Boolean, default: undefined },
+  lazyLoad: stringType<LazyLoadTypes>(),
+  rtl: booleanType(),
   slide: String,
   slidesToShow: Number,
   slidesToScroll: Number,
   speed: Number,
-  swipe: { type: Boolean, default: undefined },
-  swipeToSlide: { type: Boolean, default: undefined },
-  swipeEvent: Function as PropType<(swipeDirection: SwipeDirection) => void>,
-  touchMove: { type: Boolean, default: undefined },
+  swipe: booleanType(),
+  swipeToSlide: booleanType(),
+  swipeEvent: functionType<(swipeDirection: SwipeDirection) => void>(),
+  touchMove: booleanType(),
   touchThreshold: Number,
-  variableWidth: { type: Boolean, default: undefined },
-  useCSS: { type: Boolean, default: undefined },
+  variableWidth: booleanType(),
+  useCSS: booleanType(),
   slickGoTo: Number,
   responsive: Array,
-  dotPosition: { type: String as PropType<DotPosition>, default: undefined },
-  verticalSwiping: { type: Boolean, default: false },
+  dotPosition: stringType<DotPosition>(),
+  verticalSwiping: booleanType(false),
 });
 export type CarouselProps = Partial<ExtractPropTypes<ReturnType<typeof carouselProps>>>;
 const Carousel = defineComponent({
@@ -104,6 +107,10 @@ const Carousel = defineComponent({
       );
     });
     const { prefixCls, direction } = useConfigInject('carousel', props);
+
+    // style
+    const [wrapSSR, hashId] = useStyle(prefixCls);
+
     const dotPosition = computed(() => {
       if (props.dotPosition) return props.dotPosition;
       if (props.vertical !== undefined) return props.vertical ? 'right' : 'bottom';
@@ -122,12 +129,16 @@ const Carousel = defineComponent({
       const { dots, arrows, draggable, effect } = props;
       const { class: cls, style, ...restAttrs } = attrs;
       const fade = effect === 'fade' ? true : props.fade;
-      const className = classNames(prefixCls.value, {
-        [`${prefixCls.value}-rtl`]: direction.value === 'rtl',
-        [`${prefixCls.value}-vertical`]: vertical.value,
-        [`${cls}`]: !!cls,
-      });
-      return (
+      const className = classNames(
+        prefixCls.value,
+        {
+          [`${prefixCls.value}-rtl`]: direction.value === 'rtl',
+          [`${prefixCls.value}-vertical`]: vertical.value,
+          [`${cls}`]: !!cls,
+        },
+        hashId.value,
+      );
+      return wrapSSR(
         <div class={className} style={style as CSSProperties}>
           <SlickCarousel
             ref={slickRef}
@@ -141,7 +152,7 @@ const Carousel = defineComponent({
             vertical={vertical.value}
             v-slots={slots}
           />
-        </div>
+        </div>,
       );
     };
   },

components/carousel/index.zh-CN.md

@@ -3,7 +3,7 @@ category: Components
 type: 数据展示
 title: Carousel
 subtitle: 走马灯
-cover: https://gw.alipayobjects.com/zos/antfincdn/%24C9tmj978R/Carousel.svg
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*bPMSSqbaTMkAAAAAAAAAAAAADrJ8AQ/original
 ---
 
 旋转木马，一组轮播的区域。