feat(transfer): add back-icon and forward-icon slots

CHANGELOG.en-US.md

@@ -5,6 +5,9 @@
 ### Fixes
 - Fix `n-color-picker` can't set alpha value correctly by hand
 
+### Feats
+- `n-transfer` adds `back-icon` and `forward-icon` slots, closes [#2668](https://github.com/TuSimple/naive-ui/issues/2668).
+
 ## 2.30.5
 
 ### Fixes
@@ -2412,7 +2415,7 @@ Update package.json & README.md.
 - `n-popover` adds `get-disabled` prop.
 - adds `n-ellipsis` component.
 - `n-popover`'s `width` prop adds `'trigger'` option.
-- `n-data-table`'s columns's `ellipsis` prop can be set as props of `n-ellipsis`. x
+- `n-data-table`'s columns's `ellipsis` prop can be set as props of `n-ellipsis`.
 
 ### Fixes
 

CHANGELOG.zh-CN.md

@@ -5,6 +5,9 @@
 ### Fixes
 - 修复 `n-color-picker` 手动输入alpha值时不生效的问题
 
+### Feats
+- `n-transfer` 新增 `back-icon` and `forward-icon` 插槽, 关闭 [#2668](https://github.com/TuSimple/naive-ui/issues/2668).
+
 ## 2.30.5
 
 ### Fixes

src/transfer/demos/enUS/icon.demo.vue

@@ -0,0 +1,42 @@
+<markdown>
+# Custom Icon
+</markdown>
+
+<template>
+  <n-transfer ref="transfer" v-model:value="value" :options="options">
+    <template #forward-icon>
+      <n-icon :size="16" :component="ArrowForward" />
+    </template>
+    <template #back-icon>
+      <n-icon :size="16" :component="ArrowBack" />
+    </template>
+  </n-transfer>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue'
+import { ArrowBack, ArrowForward } from '@vicons/ionicons5'
+
+function createOptions () {
+  return Array.from({ length: 100 }).map((v, i) => ({
+    label: 'Option ' + i,
+    value: i,
+    disabled: i % 5 === 0
+  }))
+}
+
+function createValues () {
+  return Array.from({ length: 50 }).map((v, i) => i)
+}
+
+export default defineComponent({
+  setup () {
+    return {
+      options: createOptions(),
+      value: ref(createValues()),
+      ArrowForward,
+      ArrowBack
+    }
+  }
+})
+</script>

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

@@ -11,6 +11,7 @@ basic.vue
 large-data.vue
 size.vue
 filterable.vue
+icon.vue
 ```
 
 ## API
@@ -40,3 +41,10 @@ filterable.vue
 | label    | `string`           | The option's label to display. |
 | value    | `string \| number` | The option's unique value.     |
 | disabled | `boolean`          | The option's disabled state.   |
+
+### TransferOption Slots
+
+| Name         | Parameters | Description           | Version      |
+| ------------ | ---------- | --------------------- | ------------ |
+| back-icon    | `()`       | icon of arrow back    | NEXT_VERSION |
+| forward-icon | `()`       | icon of arrow forward | NEXT_VERSION |

src/transfer/demos/zhCN/icon.demo.vue

@@ -0,0 +1,42 @@
+<markdown>
+# 自定义图标
+</markdown>
+
+<template>
+  <n-transfer ref="transfer" v-model:value="value" :options="options">
+    <template #forward-icon>
+      <n-icon :size="16" :component="ArrowForward" />
+    </template>
+    <template #back-icon>
+      <n-icon :size="16" :component="ArrowBack" />
+    </template>
+  </n-transfer>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue'
+import { ArrowBack, ArrowForward } from '@vicons/ionicons5'
+
+function createOptions () {
+  return Array.from({ length: 100 }).map((v, i) => ({
+    label: 'Option ' + i,
+    value: i,
+    disabled: i % 5 === 0
+  }))
+}
+
+function createValues () {
+  return Array.from({ length: 50 }).map((v, i) => i)
+}
+
+export default defineComponent({
+  setup () {
+    return {
+      options: createOptions(),
+      value: ref(createValues()),
+      ArrowForward,
+      ArrowBack
+    }
+  }
+})
+</script>

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

@@ -11,6 +11,7 @@ basic.vue
 large-data.vue
 size.vue
 filterable.vue
+icon.vue
 ```
 
 ## API
@@ -40,3 +41,10 @@ filterable.vue
 | label    | `string`           | 选项中用以页面显示的名称 |
 | value    | `string \| number` | 所有选项中唯一的 `value` |
 | disabled | `boolean`          | 是否禁用这个选项         |
+
+### TransferOption Slots
+
+| 名称         | 参数 | 说明           | 版本         |
+| ------------ | ---- | -------------- | ------------ |
+| back-icon    | `()` | 左箭头图标插槽 | NEXT_VERSION |
+| forward-icon | `()` | 右箭头图标插槽 | NEXT_VERSION |

src/transfer/src/Transfer.tsx

@@ -14,7 +14,7 @@ import { NButton } from '../../button'
 import { useLocale, useFormItem, useTheme, useConfig } from '../../_mixins'
 import type { ThemeProps } from '../../_mixins'
 import { createKey } from '../../_utils/cssr'
-import { warn, call, ExtractPublicPropTypes } from '../../_utils'
+import { warn, call, ExtractPublicPropTypes, resolveSlot } from '../../_utils'
 import type { MaybeArray } from '../../_utils'
 import { transferLight } from '../styles'
 import type { TransferTheme } from '../styles'
@@ -296,7 +296,7 @@ export default defineComponent({
     }
   },
   render () {
-    const { mergedClsPrefix } = this
+    const { mergedClsPrefix, $slots } = this
     return (
       <div
         class={[
@@ -347,7 +347,12 @@ export default defineComponent({
             {{
               icon: () => (
                 <NBaseIcon clsPrefix={mergedClsPrefix}>
-                  {{ default: () => <ChevronRightIcon /> }}
+                  {{
+                    default: () =>
+                      resolveSlot($slots['forward-icon'], () => [
+                        <ChevronRightIcon />
+                      ])
+                  }}
                 </NBaseIcon>
               )
             }}
@@ -361,7 +366,12 @@ export default defineComponent({
             {{
               icon: () => (
                 <NBaseIcon clsPrefix={mergedClsPrefix}>
-                  {{ default: () => <ChevronLeftIcon /> }}
+                  {{
+                    default: () =>
+                      resolveSlot($slots['back-icon'], () => [
+                        <ChevronLeftIcon />
+                      ])
+                  }}
                 </NBaseIcon>
               )
             }}