feat(comp:transfer): label slot renders source and target seperately (#…

…1006) BREAKING CHANGE: label slot params change to { item, isSource }
IDuxFE · Jul 11, 2022 · 604e8d9 · 604e8d9
1 parent 036a691
commit 604e8d9
Show file tree

Hide file tree

Showing 13 changed files with 227 additions and 12 deletions.
diff --git a/packages/components/transfer/demo/CustomHeaderFooter.vue b/packages/components/transfer/demo/CustomHeaderFooter.vue
@@ -1,7 +1,14 @@
 <template>
-  <IxTransfer v-model:value="targetKeys" :data-source="dataSource" :disabled="disabled" show-list-footer>
-    <template #headerLabel>
-      <span> Custom header </span>
+  <IxTransfer
+    v-model:value="targetKeys"
+    :data-source="dataSource"
+    mode="immediate"
+    :disabled="disabled"
+    show-list-footer
+  >
+    <template #headerLabel="{ data, isSource }">
+      <span v-if="isSource"> Custom header ({{ data.length }}) </span>
+      <span v-else> Target ({{ data.length }}) </span>
     </template>
     <template #headerSuffix>
       <IxIcon name="plus" :onClick="handleSuffixClick" />

diff --git a/packages/components/transfer/demo/CustomLabel.vue b/packages/components/transfer/demo/CustomLabel.vue
@@ -1,6 +1,6 @@
 <template>
   <IxTransfer v-model:value="selectedKeys" :data-source="dataSource" :disabled="disabled">
-    <template #label="item">
+    <template #label="{ item }">
       <span style="display: flex; align-items: center">
         <span style="margin-right: 8px">{{ item.label }}</span>
         <IxIcon name="desktop" />

diff --git a/packages/components/transfer/docs/Index.zh.md b/packages/components/transfer/docs/Index.zh.md
@@ -74,12 +74,12 @@ export interface TransferPaginationProps {
 | 名称 | 说明 | 参数类型 | 备注 |
 | --- | --- | --- | --- |
 | `clearIcon` | 清除按钮 | - | - |
-| `default` | 穿梭框列表主体 | `TransferBindings & { isSource: boolean }` | - |
+| `default` | 穿梭框列表主体 | `TransferListSlotParams` | - |
 | `empty` | 穿梭框列表空状态 | `EmptyProps` | 仅在使用默认列表时生效 |
-| `footer` | 穿梭框列表底部 | `TransferBindings & { isSource: boolean }` | - |
+| `footer` | 穿梭框列表底部 | `TransferListSlotParams` | - |
 | `headerLabel` | 穿梭框列表头部标签 | `{ data: TransferData[], isSource: boolean }` | - |
 | `headerSuffix` | 穿梭框列表头部后缀 | `{ isSource: boolean }` | - |
-| `label` | 穿梭框列表label | `TransferData` | 仅在使用默认列表时生效 |
+| `label` | 穿梭框列表label | `{ item: TransferData, isSource: boolean }` | 仅在使用默认列表时生效 |
 | `operations` | 穿梭框操作按钮区域 | `TransferOperationsContext` | - |
 
 ```ts

diff --git a/packages/components/transfer/src/list/TransferListBody.tsx b/packages/components/transfer/src/list/TransferListBody.tsx
@@ -72,6 +72,10 @@ export default defineComponent({
         triggerRemove([key])
       }
 
+      const listSlots = {
+        label: slots.label && ((item: TransferData) => slots.label?.({ item, isSource: props.isSource })),
+      }
+
       return (
         <ɵCheckableList
           ref={checkableListRef}
@@ -83,7 +87,7 @@ export default defineComponent({
           removable={!props.isSource && transferProps.mode === 'immediate'}
           virtual={transferProps.virtual}
           scroll={transferProps.scroll}
-          v-slots={{ label: slots.label }}
+          v-slots={listSlots}
           onCheckChange={onCheckChange}
           onRemove={onRemove}
           onScroll={handleScroll}

diff --git a/packages/components/transfer/src/types.ts b/packages/components/transfer/src/types.ts
@@ -81,7 +81,7 @@ export interface TransferSlots<T extends TransferData = TransferData> extends Sl
   headerLabel?: (params: { data: T[]; isSource: boolean }) => VNode[]
   headerSuffix?: (params: { isSource: boolean }) => VNode[]
   operations?: (operations: TransferOperationsSlotParams) => VNode[]
-  label?: (item: T) => VNode[]
+  label?: (params: { item: T; isSource: boolean }) => VNode[]
   empty?: (params: EmptyProps) => VNode[]
   clearIcon?: () => VNode[]
 }

diff --git a/packages/pro/transfer/demo/TableCustomLabel.md b/packages/pro/transfer/demo/TableCustomLabel.md
@@ -0,0 +1,14 @@
+---
+title:
+  zh: 表格穿梭框自定义表格列渲染
+  en: Customize Table Transfer Column Render
+order: 11
+---
+
+## zh
+
+使用表格 `TableColumn` 中的 `customCell` 以及 `customTitle` 自定义表格列。
+
+## en
+
+Customize table column render using `customCell` and `customTitle` of `TableColumn` options.
diff --git a/packages/pro/transfer/demo/TableCustomLabel.vue b/packages/pro/transfer/demo/TableCustomLabel.vue
@@ -0,0 +1,72 @@
+<template>
+  <IxProTransfer
+    v-model:value="targetKeys"
+    type="table"
+    :data-source="dataSource"
+    :table-props="tableProps"
+    :scroll="{ height: 300, width: { source: 600 }, fullHeight: true }"
+  >
+    <template #nameTitle> Name </template>
+    <template #sourceNameCell="{ record }">
+      <IxIcon name="user" />
+      {{ record.name }}
+    </template>
+    <template #targetNameCell="{ record }">
+      <IxIcon name="user" />
+      {{ record.name }} ({{ record.age }})
+    </template>
+  </IxProTransfer>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+import { TableColumn } from '@idux/components/table'
+
+interface Data {
+  key: number
+  disabled: boolean
+  name: string
+  age: number
+  address: string
+}
+
+const sourceColumns: TableColumn<Data>[] = [
+  {
+    dataKey: 'name',
+    customTitle: 'nameTitle',
+    customCell: 'sourceNameCell',
+  },
+  {
+    title: 'Age',
+    dataKey: 'age',
+  },
+  {
+    title: 'Address',
+    dataKey: 'address',
+  },
+]
+
+const targetColumns: TableColumn<Data>[] = [
+  {
+    dataKey: 'name',
+    customTitle: 'nameTitle',
+    customCell: 'targetNameCell',
+  },
+]
+
+const tableProps = {
+  sourceColumns,
+  targetColumns,
+}
+
+const targetKeys = ref<number[]>(Array.from(new Array(10)).map((_, idx) => idx))
+
+const dataSource: Data[] = Array.from(new Array(20)).map((_, idx) => ({
+  key: idx,
+  disabled: [1, 6, 12, 16].includes(idx),
+  name: 'Candidate' + idx,
+  age: idx,
+  address: 'London No.1 Lake Park',
+}))
+</script>
diff --git a/packages/pro/transfer/demo/TreeCustomLabel.md b/packages/pro/transfer/demo/TreeCustomLabel.md
@@ -0,0 +1,14 @@
+---
+order: 12
+title:
+  zh: 树穿梭框自定义标签渲染
+  en: Customize Tree Transfer Label Render
+---
+
+## zh
+
+使用表格 `label` 插槽自定义标签渲染。
+
+## en
+
+Customize label render using `label` slot.
diff --git a/packages/pro/transfer/demo/TreeCustomLabel.vue b/packages/pro/transfer/demo/TreeCustomLabel.vue
@@ -0,0 +1,97 @@
+<template>
+  <IxProTransfer
+    v-model:value="targetKeys"
+    type="tree"
+    :data-source="dataSource"
+    :scroll="{ height: 300, fullHeight: true }"
+  >
+    <template #label="{ item, isSource }">
+      <span v-if="isSource">{{ item.label }}</span>
+      <span v-else>{{ item.key }}</span>
+    </template>
+  </IxProTransfer>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+interface Data {
+  key: string
+  disabled: boolean
+  label: string
+  children?: Data[]
+}
+
+const targetKeys = ref<string[]>(['1-2', '1-2-1', '1-2-2', '1-3-2-1', '2'])
+
+const dataSource: Data[] = [
+  {
+    key: '1',
+    disabled: false,
+    label: 'Selection-1',
+    children: [
+      {
+        key: '1-1',
+        disabled: false,
+        label: 'Selection-1-1',
+      },
+      {
+        key: '1-2',
+        disabled: false,
+        label: 'Selection-1-2',
+        children: [
+          {
+            key: '1-2-1',
+            disabled: false,
+            label: 'Selection-1-2-1',
+          },
+          {
+            key: '1-2-2',
+            disabled: false,
+            label: 'Selection-1-2-2',
+          },
+        ],
+      },
+      {
+        key: '1-3',
+        disabled: false,
+        label: 'Selection-1-3',
+        children: [
+          {
+            key: '1-3-1',
+            disabled: false,
+            label: 'Selection-1-3-1',
+          },
+          {
+            key: '1-3-2',
+            disabled: false,
+            label: 'Selection-1-3-2',
+            children: [
+              {
+                key: '1-3-2-1',
+                disabled: true,
+                label: 'Selection-1-3-2-1',
+              },
+              {
+                key: '1-3-2-2',
+                disabled: false,
+                label: 'Selection-1-3-2-2',
+              },
+            ],
+          },
+        ],
+      },
+      {
+        key: '1-4',
+        disabled: false,
+        label: 'Selection-1-4',
+      },
+    ],
+  },
+  {
+    key: '2',
+    disabled: false,
+    label: 'Selection-2',
+  },
+]
+</script>
diff --git a/packages/pro/transfer/docs/Index.zh.md b/packages/pro/transfer/docs/Index.zh.md
@@ -99,6 +99,7 @@ export interface ProTransferTreeProps {
 | `headerLabel` | 穿梭框列表头部标签 | `{ data: TransferData[], isSource: boolean }` | 详情参考基础穿梭框组件 |
 | `headerSuffix` | 穿梭框列表头部后缀 | `{ isSource: boolean }` | 详情参考基础穿梭框组件  |
 | `operations` | 穿梭框列表底部 | `TransferOperationsContext` | 详情参考基础穿梭框组件  |
+| `label` | 树穿梭框label | `{ item: TransferData, isSource: boolean }` | 仅在 `type` 为 `'tree'` 下生效 |
 | `prefix` | 树节点前缀图标 | `string` | - | 仅在 `type` 为 `'tree'` 下生效  |
 | `suffix` | 树节点后缀图标 | `string` | - | 仅在 `type` 为 `'tree'` 下生效 |
 

diff --git a/packages/pro/transfer/src/content/ProTransferList.tsx b/packages/pro/transfer/src/content/ProTransferList.tsx
@@ -80,6 +80,10 @@ export default defineComponent({
 
       const contentRef = props.isSource ? sourceContentRef : targetContentRef
 
+      const listSlots = {
+        label: slots.label && ((item: TreeTransferData) => slots.label?.({ item, isSource: props.isSource })),
+      }
+
       return (
         <ɵCheckableList
           ref={contentRef}
@@ -92,7 +96,7 @@ export default defineComponent({
           removable={!props.isSource && proTransferProps.mode === 'immediate'}
           virtual={proTransferProps.virtual}
           scroll={proTransferProps.scroll}
-          v-slots={{ label: slots.label }}
+          v-slots={listSlots}
           onCheckChange={onCheckChange}
           onRemove={onRemove}
           onScroll={handleScroll}

diff --git a/packages/pro/transfer/src/content/ProTransferTable.tsx b/packages/pro/transfer/src/content/ProTransferTable.tsx
@@ -43,7 +43,7 @@ export default defineComponent({
 
       if (dataSource && dataSource.length > 0) {
         const contentRef = props.isSource ? sourceContentRef : targetContentRef
-        return <IxTable ref={contentRef} class={prefixCls} {...tableProps.value} />
+        return <IxTable ref={contentRef} v-slots={slots} class={prefixCls} {...tableProps.value} />
       }
 
       return (

diff --git a/packages/pro/transfer/src/content/ProTransferTree.tsx b/packages/pro/transfer/src/content/ProTransferTree.tsx
@@ -79,7 +79,9 @@ export default defineComponent({
 
       const treeSlots = {
         prefix: slots.prefix,
-        label: slots.label,
+        label:
+          slots.label &&
+          ((params: { node: TreeTransferData }) => slots.label?.({ item: params.node, isSource: props.isSource })),
         suffix: showRemovableSuffix ? renderTreeRemovableSuffix : slots.suffix,
       }