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 ( ) } 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 {