diff --git a/packages/components/_private/checkable-list/__tests__/__snapshots__/checkableList.spec.ts.snap b/packages/components/_private/checkable-list/__tests__/__snapshots__/checkableList.spec.ts.snap
index b5de56fb4..2e1ce0c8a 100644
--- a/packages/components/_private/checkable-list/__tests__/__snapshots__/checkableList.spec.ts.snap
+++ b/packages/components/_private/checkable-list/__tests__/__snapshots__/checkableList.spec.ts.snap
@@ -5,104 +5,64 @@ exports[`CheckableList > render work 1`] = `
"
`;
diff --git a/packages/components/_private/checkable-list/src/CheckableList.tsx b/packages/components/_private/checkable-list/src/CheckableList.tsx
index e82d3a45d..b1b656081 100644
--- a/packages/components/_private/checkable-list/src/CheckableList.tsx
+++ b/packages/components/_private/checkable-list/src/CheckableList.tsx
@@ -5,11 +5,9 @@
* found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
*/
-import type { VirtualScrollInstance } from '@idux/cdk/scroll'
-
import { computed, defineComponent, normalizeClass, provide, ref } from 'vue'
-import { CdkVirtualScroll } from '@idux/cdk/scroll'
+import { CdkVirtualScroll, type VirtualItemRenderFn, type VirtualScrollInstance } from '@idux/cdk/scroll'
import { callEmit } from '@idux/cdk/utils'
import { useGlobalConfig } from '@idux/components/config'
@@ -47,7 +45,7 @@ export default defineComponent({
callEmit(props.onScrolledChange, startIndex, endIndex, visibleData)
}
- const renderListItem = (item: CheckableListData) => {
+ const renderListItem: VirtualItemRenderFn = ({ item, index }) => {
const key = getRowKey(item)
const onCheckChange = (checked: boolean) => {
callEmit(props.onCheckChange, item, checked)
@@ -56,6 +54,8 @@ export default defineComponent({
callEmit(props.onRemove, item)
}
+ const customAdditional = props.customAdditional ? props.customAdditional({ data: item, index }) : undefined
+
return (
slots.label?.(item)) }}
onCheckChange={onCheckChange}
onRemove={onRemove}
- {...(item.additional ?? {})}
+ {...item.additional}
+ {...customAdditional}
/>
)
}
@@ -91,7 +92,7 @@ export default defineComponent({
getKey={getRowKey}
height={height as number}
itemHeight={32}
- itemRender={({ item }) => renderListItem(item)}
+ itemRender={renderListItem}
virtual
onScroll={handleScroll}
onScrolledBottom={handleScrolledBottom}
@@ -102,7 +103,7 @@ export default defineComponent({
return (
- {data.map(item => renderListItem(item))}
+ {data.map((item, index) => renderListItem({ item, index }))}
)
}
diff --git a/packages/components/_private/checkable-list/src/CheckableListItem.tsx b/packages/components/_private/checkable-list/src/CheckableListItem.tsx
index b808fc2be..10a4e2638 100644
--- a/packages/components/_private/checkable-list/src/CheckableListItem.tsx
+++ b/packages/components/_private/checkable-list/src/CheckableListItem.tsx
@@ -5,11 +5,12 @@
* found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
*/
-import { computed, defineComponent, inject, normalizeClass } from 'vue'
+import { VNodeChild, computed, defineComponent, inject, normalizeClass } from 'vue'
import { callEmit } from '@idux/cdk/utils'
import { IxCheckbox } from '@idux/components/checkbox'
import { IxIcon } from '@idux/components/icon'
+import { convertStringVNode } from '@idux/components/utils'
import { checkableListContext } from './token'
import { checkableListItemProps } from './types'
@@ -26,26 +27,6 @@ export default defineComponent({
callEmit(props.onRemove)
}
- const renderLabel = (prefixCls: string) => {
- const { checked, value, disabled, checkable } = props
-
- if (checkable) {
- return (
-
- )
- }
-
- return
- }
-
const classes = computed(() => {
const prefixCls = `${mergedPrefixCls.value}-item`
@@ -58,14 +39,29 @@ export default defineComponent({
return () => {
const prefixCls = `${mergedPrefixCls.value}-item`
- return (
-
- {renderLabel(prefixCls)}
- {props.removable && !props.disabled && (
-
- )}
-
- )
+ const children: VNodeChild[] = []
+ if (props.checkable) {
+ children.push(
+ ,
+ )
+ } else {
+ const labelNode = convertStringVNode(slots.default, props.label)
+ children.push()
+ }
+
+ if (props.removable && !props.disabled) {
+ children.push()
+ }
+
+ return {children}
}
},
})
diff --git a/packages/components/_private/checkable-list/src/types.ts b/packages/components/_private/checkable-list/src/types.ts
index ceae14e97..1a5c5080d 100644
--- a/packages/components/_private/checkable-list/src/types.ts
+++ b/packages/components/_private/checkable-list/src/types.ts
@@ -7,22 +7,15 @@
import type { VirtualScrollToFn } from '@idux/cdk/scroll'
import type { ExtractInnerPropTypes, ExtractPublicPropTypes } from '@idux/cdk/utils'
-import type { DefineComponent, HTMLAttributes } from 'vue'
+import type { DefineComponent, HTMLAttributes, PropType } from 'vue'
import { IxPropTypes, type VKey } from '@idux/cdk/utils'
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export interface CheckableListData extends Record {
+export interface CheckableListData {
key?: VKey
label?: string
disabled?: boolean
- additional?: {
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
- class?: any
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
- style?: any
- [key: string]: unknown
- }
+ [key: string]: unknown
}
export interface CheckableListScroll {
@@ -35,6 +28,7 @@ export const checkableListProps = {
checkable: IxPropTypes.bool.def(true),
removable: IxPropTypes.bool.def(false),
checked: IxPropTypes.func<(item: CheckableListData) => boolean>(),
+ customAdditional: { type: Object as PropType, default: undefined },
disabled: IxPropTypes.func<(item: CheckableListData) => boolean>(),
getRowKey: IxPropTypes.func<(item: CheckableListData) => VKey>(),
virtual: IxPropTypes.bool,
@@ -69,3 +63,9 @@ export type CheckableListComponent = DefineComponent<
CheckableListApi
>
export type CheckableListInstance = InstanceType>
+
+export type CheckableListCustomAdditional = (options: {
+ data: CheckableListData
+ index: number
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+}) => Record | undefined
diff --git a/packages/components/transfer/__tests__/__snapshots__/transfer.spec.ts.snap b/packages/components/transfer/__tests__/__snapshots__/transfer.spec.ts.snap
index a6d22d6f4..28f4a9079 100644
--- a/packages/components/transfer/__tests__/__snapshots__/transfer.spec.ts.snap
+++ b/packages/components/transfer/__tests__/__snapshots__/transfer.spec.ts.snap
@@ -19,123 +19,83 @@ exports[`Transfer > render work 1`] = `
-
-
+
-
-
+
-
-
+
-
-
+
-
-
+
-
-
+
-
-
+
-
-
+
-
-
+
-
-
+
-
-
+
-
-
+
-
-
+
-
-
+
-
-
+
-
-
+
-
-
+
-
-
+
-
-
+
-
-
+
diff --git a/packages/components/transfer/__tests__/__snapshots__/transferSlots.spec.ts.snap b/packages/components/transfer/__tests__/__snapshots__/transferSlots.spec.ts.snap
index 857f3abbb..52ebc4094 100644
--- a/packages/components/transfer/__tests__/__snapshots__/transferSlots.spec.ts.snap
+++ b/packages/components/transfer/__tests__/__snapshots__/transferSlots.spec.ts.snap
@@ -58,6 +58,7 @@ exports[`Transfer > clearIcon slot work 1`] = `
+
-
+
+
-
+
+
-
+
+
-
+
+
-
+
+
-
+
+
-
+
+
-
+
+
-
+
+
-
+
+
-
+
+
-
+
+
-
+
+
-
+
+
-
+
+
-
+
+
-
+
+
-
+
+
-
+
+
-
+
@@ -1137,6 +1157,7 @@ exports[`Transfer > empty slot work 1`] = `
+
-
+
+
-
+
+
-
+
+
-
+
+
-
+
+
-
+
+
-
+
+
-
+
+
-
+
+
-
+
+
-
+
+
-
+
+
-
+
+
-
+
+
-
+
+
-
+
+
-
+
+
-
+
+
-
+
+
-
+
@@ -1867,6 +1907,7 @@ exports[`Transfer > footer slot work 1`] = `
+
-
+
+
-
+
+
-
+
+
-
+
+
-
+
+
-
+
+
-
+
+
-
+
+
-
+
+
-
+
+
-
+
+
-
+
+
-
+
+
-
+
+
-
+
+
-
+
+
-
+
+
-
+
+
-
+
+
-
+
@@ -2791,6 +2851,7 @@ exports[`Transfer > headerLabel slot work 1`] = `
+
-
+
+
-
+
+
-
+
+
-
+
+
-
+
+
-
+
+
-
+
+
-
+
+
-
+
+
-
+
+
-
+
+
-
+
+
-
+
+
-
+
+
-
+
+
-
+
+
-
+
+
-
+
+
-
+
+
-
+
@@ -3520,6 +3600,7 @@ exports[`Transfer > label slot work 1`] = `
+
-
+
+
-
+
+
-
+
+
-
+
+
-
+
+
-
+
+
-
+
+
-
+
+
-
+
+
-
+
+
-
+
+
-
+
+
-
+
+
-
+
+
-
+
+
-
+
+
-
+
+
-
+
+
-
+
+
-
+
diff --git a/packages/components/transfer/docs/Index.zh.md b/packages/components/transfer/docs/Index.zh.md
index c4e18600d..21d11cf82 100644
--- a/packages/components/transfer/docs/Index.zh.md
+++ b/packages/components/transfer/docs/Index.zh.md
@@ -8,25 +8,6 @@ subtitle: 穿梭框
## API
-### 数据说明
-
-#### TransferData
-
-穿梭框源数据类型
-
-```ts
-export interface TransferData extends Record {
- key?: VKey
- label?: string
- disabled?: boolean
- additional?: {
- class?: any
- style?: any
- [key: string]: unknown
- }
-}
-```
-
### IxTransfer
#### TransferProps
@@ -38,6 +19,7 @@ export interface TransferData extends Record {
| `v-model:targetSelectedKeys` | 目标数据列表勾选的keys | `VKey[]` | - | - | - |
| `clearable` | 是否可清除 | `boolean` | `true` | ✅ | - |
| `clearIcon` | 清除图标 | `string \| #clearIcon` | `clear` | ✅ | - |
+| `customAdditional` | 自定义选项的额外属性 | `TransferCustomAdditional` | - | - | 例如 `class`, 或者原生事件 |
| `dataSource` | 源数据数组 | `TransferData[]` | `[]` | - | - |
| `disabled` | 是否禁用穿梭框 | `boolean` | `false` | - | - |
| `empty` | 空状态的配置 | `string \| EmptyProps` | - | - | - |
@@ -59,6 +41,13 @@ export interface TransferData extends Record {
| `onClear` | 已选数据清除的回调函数 | `(isSource: boolean) => void` | - | - | - |
```ts
+export interface TransferData {
+ key?: VKey
+ label?: string
+ disabled?: boolean
+ [key: string]: unknown
+}
+
export interface TransferScroll {
height?: string | number
width?: string | number | { source?: string | number; target?: string | number }
diff --git a/packages/components/transfer/src/types.ts b/packages/components/transfer/src/types.ts
index 953d23fac..430f1c717 100644
--- a/packages/components/transfer/src/types.ts
+++ b/packages/components/transfer/src/types.ts
@@ -10,15 +10,12 @@ import type { TransferOperationsContext } from './composables/useTransferOperati
import type { ConvertToSlotParams } from './utils'
import type { VirtualScrollToFn } from '@idux/cdk/scroll'
import type { ExtractInnerPropTypes, ExtractPublicPropTypes, VKey } from '@idux/cdk/utils'
-import type { ɵCheckableListData } from '@idux/components/_private/checkable-list'
import type { EmptyProps } from '@idux/components/empty'
import type { PaginationProps } from '@idux/components/pagination'
-import type { ComputedRef, DefineComponent, HTMLAttributes, Slots, VNode } from 'vue'
+import type { ComputedRef, DefineComponent, HTMLAttributes, PropType, Slots, VNode } from 'vue'
import { IxPropTypes } from '@idux/cdk/utils'
-export type TransferData = ɵCheckableListData
-
export interface SeparatedData {
sourceData: T[]
targetData: T[]
@@ -111,25 +108,25 @@ export type SearchFn = (
searchValue: string,
) => boolean
export const transferProps = {
- dataSource: IxPropTypes.array().def(() => []),
value: IxPropTypes.array(),
sourceSelectedKeys: IxPropTypes.array(),
targetSelectedKeys: IxPropTypes.array(),
+
+ clearable: IxPropTypes.bool,
+ clearIcon: IxPropTypes.string,
+ customAdditional: { type: Object as PropType, default: undefined },
+ dataSource: IxPropTypes.array().def(() => []),
disabled: IxPropTypes.bool.def(false),
+ empty: IxPropTypes.oneOfType([String, IxPropTypes.object()]),
getKey: IxPropTypes.oneOfType([String, IxPropTypes.func<(item: TransferData) => number | string>()]),
- virtual: IxPropTypes.bool.def(false),
+ mode: IxPropTypes.oneOf(['default', 'immediate']).def('default'),
+ pagination: IxPropTypes.oneOfType([Boolean, IxPropTypes.object()]),
scroll: IxPropTypes.object(),
searchable: IxPropTypes.oneOfType([Boolean, IxPropTypes.object<{ source: boolean; target: boolean }>()]),
searchFn: IxPropTypes.func(),
- pagination: IxPropTypes.oneOfType([Boolean, IxPropTypes.object()]),
-
- mode: IxPropTypes.oneOf(['default', 'immediate']).def('default'),
- showSelectAll: IxPropTypes.bool,
-
spin: IxPropTypes.oneOfType([Boolean, IxPropTypes.object<{ source: boolean; target: boolean }>()]),
- clearable: IxPropTypes.bool,
- clearIcon: IxPropTypes.string,
- empty: IxPropTypes.oneOfType([String, IxPropTypes.object()]),
+ showSelectAll: IxPropTypes.bool,
+ virtual: IxPropTypes.bool.def(false),
//Events
'onUpdate:value': IxPropTypes.emit<(keys: VKey[]) => void>(),
@@ -144,7 +141,7 @@ export const transferProps = {
onScrolledChange:
IxPropTypes.emit<(isSource: boolean, startIndex: number, endIndex: number, visibleData: unknown[]) => void>(),
onScrolledBottom: IxPropTypes.emit<(isSource: boolean) => void>(),
-}
+} as const
export const transferListProps = {
isSource: IxPropTypes.bool.isRequired,
@@ -174,3 +171,16 @@ export type TransferComponent = DefineComponent<
TransferApis
>
export type TransferInstance = InstanceType>
+
+export type TransferCustomAdditional = (options: {
+ data: TransferData
+ index: number
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+}) => Record | undefined
+
+export interface TransferData {
+ key?: VKey
+ label?: string
+ disabled?: boolean
+ [key: string]: unknown
+}
diff --git a/packages/pro/transfer/docs/Index.zh.md b/packages/pro/transfer/docs/Index.zh.md
index 117318d26..63b79ac64 100644
--- a/packages/pro/transfer/docs/Index.zh.md
+++ b/packages/pro/transfer/docs/Index.zh.md
@@ -76,8 +76,6 @@ export interface ProTransferTableProps {
tableLayout?: 'auto' | 'fixed'
ellipsis?: boolean
borderless?: boolean
- tags?: TableTags
- rowClassName?: (record: unknown, rowIndex: number) => string
}
export interface ProTransferTreeProps {
diff --git a/packages/pro/transfer/src/types.ts b/packages/pro/transfer/src/types.ts
index c9eb4e412..1e153cb71 100644
--- a/packages/pro/transfer/src/types.ts
+++ b/packages/pro/transfer/src/types.ts
@@ -8,7 +8,7 @@
import type { VirtualScrollToFn } from '@idux/cdk/scroll'
import type { ExtractInnerPropTypes, ExtractPublicPropTypes, MaybeArray, VKey } from '@idux/cdk/utils'
import type { EmptyProps } from '@idux/components/empty'
-import type { TableColumn, TableTags } from '@idux/components/table'
+import type { TableColumn } from '@idux/components/table'
import type {
SearchFn,
TransferData,
@@ -32,8 +32,6 @@ export interface ProTransferTableProps {
tableLayout?: 'auto' | 'fixed'
ellipsis?: boolean
borderless?: boolean
- tags?: TableTags
- rowClassName?: (record: unknown, rowIndex: number) => string
}
export interface ProTransferTreeProps {