refactor(carousel): clean code

CHANGELOG.en-US.md

@@ -5,6 +5,7 @@
 ### Feats
 
 - `n-rate` add `allow-half` prop.
+- `n-carousel` add `show-arrow` prop.
 
 ### Fixes
 
@@ -19,7 +20,6 @@
 - `n-tree` exports `TreeDragInfo` & `TreeDropInfo` type.
 - `n-empty` export `icon` slot.
 - `useDialog` option add `maskClosable` prop, closes [#420](https://github.com/TuSimple/naive-ui/issues/420).
-- `n-carousel` add `show-arrow` prop.
 
 ### Fixes
 

CHANGELOG.zh-CN.md

@@ -5,6 +5,7 @@
 ### Feats
 
 - `n-rate` 新增 `allow-half` 属性
+- `n-carousel` 新增 `show-arrow` 属性
 
 ### Fixes
 
@@ -19,7 +20,6 @@
 - `n-tree` 导出 `TreeDragInfo` & `TreeDropInfo` 类型
 - `n-empty` 导出 `icon` slot
 - `useDialog` 选项增加 `maskClosable` 属性，关闭 [#420](https://github.com/TuSimple/naive-ui/issues/420)
-- `n-carousel` 新增 `show-arrow` 属性
 
 ### Fixes
 

src/carousel/demos/enUS/index.demo-entry.md

@@ -18,10 +18,10 @@ show-arrow
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| show-arrow | `boolean` | `false` | Whether to show arrow button. |
 | autoplay | `boolean` | `false` | Whether to scroll automatically. |
 | interval | `number` | `5000` | Auto play interval. |
 | dot-placement | `'top' \| 'bottom' \| 'left' \| 'right'` | `'bottom'` | Dot placement in the panel. |
+| show-arrow | `boolean` | `false` | Whether to show arrow button. |
 | trigger | `'click' \| 'hover'` | `'click'` | The way to trigger the switch. |
 
 ### Carousel Slots

src/carousel/demos/zhCN/index.demo-entry.md

@@ -18,10 +18,10 @@ show-arrow
 
 | 名称 | 类型 | 默认值 | 说明 |
 | --- | --- | --- | --- |
-| show-arrow | `boolean` | `false` | 是否显示箭头按钮 |
 | autoplay | `boolean` | `false` | 是否自动播放 |
 | dot-placement | `'top' \| 'bottom' \| 'left' \| 'right'` | `'bottom'` | 轮播指示点位置 |
 | interval | `number` | `5000` | 自动播放的间隔 |
+| show-arrow | `boolean` | `false` | 是否显示箭头按钮 |
 | trigger | `'click' \| 'hover'` | `'click'` | 触发切换的方式 |
 
 ### Carousel Slots

src/carousel/src/Carousel.tsx

@@ -14,11 +14,11 @@ import {
 } from 'vue'
 import { indexMap } from 'seemly'
 import { on, off } from 'evtd'
+import { BackwardIcon, ForwardIcon } from '../../_internal/icons'
 import { useConfig, useTheme } from '../../_mixins'
 import type { ThemeProps } from '../../_mixins'
 import { flatten } from '../../_utils'
 import type { ExtractPublicPropTypes } from '../../_utils'
-import { BackwardIcon, ForwardIcon } from '../../_internal/icons'
 import { carouselLight } from '../styles'
 import type { CarouselTheme } from '../styles'
 import style from './styles/index.cssr'
@@ -260,13 +260,14 @@ export default defineComponent({
       cssVars: computed(() => {
         const {
           common: { cubicBezierEaseInOut },
-          self: { dotColor, dotColorActive, dotSize }
+          self: { dotColor, dotColorActive, dotSize, arrowColor }
         } = themeRef.value
         return {
           '--bezier': cubicBezierEaseInOut,
           '--dot-color': dotColor,
           '--dot-color-active': dotColorActive,
-          '--dot-size': dotSize
+          '--dot-size': dotSize,
+          '--arrow-color': arrowColor
         }
       })
     }

src/carousel/src/styles/index.cssr.ts

@@ -5,6 +5,7 @@ import { c, cB, cE, cM } from '../../../_utils/cssr'
 // --dot-color
 // --dot-color-active
 // --dot-size
+// --arrow-color
 export default cB('carousel', `
   overflow: hidden;
   position: relative;
@@ -49,15 +50,15 @@ export default cB('carousel', `
   ]),
   cE('arrow', `
     position: absolute;
-    transition: transform .1s var(--bezier);
+    transition: transform .3s var(--bezier);
     transform: scale(1);
     cursor: pointer;
-    height: 50px;
-    width: 50px;
+    height: 48px;
+    width: 48px;
     display: flex;
     align-items: center;
     justify-content: center;
-    color: var(--dot-color-active);
+    color: var(--arrow-color);
   `, [
     cM('right', `
       transform: translateY(-50%);
@@ -66,6 +67,9 @@ export default cB('carousel', `
     `, [
       c('&:hover', {
         transform: 'translateY(-50%) scale(1.1)'
+      }),
+      c('&:active', {
+        transform: 'translateY(-50%) scale(1)'
       })
     ]),
     cM('left', `

src/carousel/styles/light.ts

@@ -6,7 +6,8 @@ export const self = (vars: ThemeCommonVars) => {
   return {
     dotSize: '8px',
     dotColor: 'rgba(255, 255, 255, .3)',
-    dotColorActive: 'rgba(255, 255, 255, 1)'
+    dotColorActive: 'rgba(255, 255, 255, 1)',
+    arrowColor: 'rgba(255, 255, 255, .6)'
   }
 }