diff --git a/docs/en-US/component/transfer.md b/docs/en-US/component/transfer.md index d93fc74156..d8113f6c10 100644 --- a/docs/en-US/component/transfer.md +++ b/docs/en-US/component/transfer.md @@ -43,43 +43,78 @@ transfer/prop-alias ::: -## Attributes +## API -| Name | Description | Type | Accepted Values | Default | -| --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------- | ------------------------- | ------------------------------------------------------------------------- | -| model-value / v-model | binding value | array | — | — | -| data | data source | `Array<{ key, label, disabled }>` | — | [ ] | -| filterable | whether Transfer is filterable | boolean | — | false | -| filter-placeholder | placeholder for the filter input | string | — | Enter keyword | -| filter-method | custom filter method | function | — | — | -| target-order | order strategy for elements in the target list. If set to `original`, the elements will keep the same order as the data source. If set to `push`, the newly added elements will be pushed to the bottom. If set to `unshift`, the newly added elements will be inserted on the top | string | original / push / unshift | original | -| titles | custom list titles | array | — | ['List 1', 'List 2'] | -| button-texts | custom button texts | array | — | [ ] | -| render-content | custom render function for data items | function(h, option) | — | — | -| format | texts for checking status in list header | `{ noChecked, hasChecked }` | — | `{ noChecked: '${checked}/${total}', hasChecked: '${checked}/${total}' }` | -| props | prop aliases for data source | `{ key, label, disabled }` | — | — | -| left-default-checked | key array of initially checked data items of the left list | array | — | [ ] | -| right-default-checked | key array of initially checked data items of the right list | array | — | [ ] | -| validate-event | whether to trigger form validation | boolean | - | true | +### Attributes -## Slots +| Name | Description | Type | Default | +| --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------- | -------- | +| model-value / v-model | binding value | ^[object]`Array` | [] | +| data | data source | ^[object]`Record[]` | [] | +| filterable | whether Transfer is filterable | ^[boolean] | false | +| filter-placeholder | placeholder for the filter input | ^[string] | — | +| filter-method | custom filter method | ^[Function]`(query: string, item: Record) => boolean` | — | +| target-order | order strategy for elements in the target list. If set to `original`, the elements will keep the same order as the data source. If set to `push`, the newly added elements will be pushed to the bottom. If set to `unshift`, the newly added elements will be inserted on the top | ^[enum]`'original' \| 'push' \| 'unshift'` | original | +| titles | custom list titles | ^[object]`[string, string]` | [] | +| button-texts | custom button texts | ^[object]`[string, string]` | [] | +| render-content | custom render function for data items | ^[object]`renderContent` | — | +| format | texts for checking status in list header | ^[object]`TransferFormat` | {} | +| props | prop aliases for data source | ^[object]`TransferPropsAlias` | — | +| left-default-checked | key array of initially checked data items of the left list | ^[object]`Array` | [] | +| right-default-checked | key array of initially checked data items of the right list | ^[object]`Array` | [] | +| validate-event | whether to trigger form validation | ^[boolean] | true | + +### Events + +| Name | Description | Type | +| ------------------ | ----------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------- | +| change | triggers when data items change in the right list | ^[Function]`(value: TransferKey[], direction: TransferDirection, movedKeys: TransferKey[]) => void` | +| left-check-change | triggers when end user changes the checked state of any data item in the left list | ^[Function]`(value: TransferKey[], movedKeys?: TransferKey[]) => void` | +| right-check-change | triggers when end user changes the checked state of any data item in the right list | ^[Function]`(value: TransferKey[], movedKeys?: TransferKey[]) => void` | + +### Slots | Name | Description | | ------------ | ---------------------------------------------------------------- | -| — | Custom content for data items. The scope parameter is { option } | +| default | Custom content for data items. The scope parameter is { option } | | left-footer | content of left list footer | | right-footer | content of right list footer | -## Methods +### Exposes -| Method | Description | Parameters | -| ---------- | ------------------------------------------- | ---------------- | -| clearQuery | clear the filter keyword of a certain panel | 'left' / 'right' | +| Method | Description | Type | +| ---------- | ------------------------------------------- | ----------------------------------------------- | +| clearQuery | clear the filter keyword of a certain panel | ^[Function]`(which: TransferDirection) => void` | -## Events +## Type Declarations -| Name | Description | Parameters | -| ------------------ | ----------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------ | -| change | triggers when data items change in the right list | key array of current data items in the right list, transfer direction (left or right), moved item keys | -| left-check-change | triggers when end user changes the checked state of any data item in the left list | key array of currently checked items, key array of items whose checked state have changed | -| right-check-change | triggers when end user changes the checked state of any data item in the right list | key array of currently checked items, key array of items whose checked state have changed | +
+ Show declarations + +```ts +import type { h as H, VNode } from 'vue' + +type TransferKey = string | number + +type TransferDirection = 'left' | 'right' + +type TransferDataItem = Record + +type renderContent = ( + h: typeof H, + option: TransferDataItem +) => VNode | VNode[] + +interface TransferFormat { + noChecked?: string + hasChecked?: string +} + +interface TransferPropsAlias { + label?: string + key?: string + disabled?: string +} +``` + +
diff --git a/packages/components/transfer/src/transfer.ts b/packages/components/transfer/src/transfer.ts index f4d5cbda8a..f5493490b9 100644 --- a/packages/components/transfer/src/transfer.ts +++ b/packages/components/transfer/src/transfer.ts @@ -40,44 +40,80 @@ export const LEFT_CHECK_CHANGE_EVENT = 'left-check-change' export const RIGHT_CHECK_CHANGE_EVENT = 'right-check-change' export const transferProps = buildProps({ + /** + * @description data source + */ data: { type: definePropType(Array), default: () => [], }, + /** + * @description custom list titles + */ titles: { type: definePropType<[string, string]>(Array), default: () => [], }, + /** + * @description custom button texts + */ buttonTexts: { type: definePropType<[string, string]>(Array), default: () => [], }, + /** + * @description placeholder for the filter input + */ filterPlaceholder: String, + /** + * @description custom filter method + */ filterMethod: { type: definePropType<(query: string, item: TransferDataItem) => boolean>( Function ), }, + /** + * @description key array of initially checked data items of the left list + */ leftDefaultChecked: { type: definePropType(Array), default: () => [], }, + /** + * @description key array of initially checked data items of the right list + */ rightDefaultChecked: { type: definePropType(Array), default: () => [], }, + /** + * @description custom render function for data items + */ renderContent: { type: definePropType(Function), }, + /** + * @description binding value + */ modelValue: { type: definePropType(Array), default: () => [], }, + /** + * @description texts for checking status in list header + */ format: { type: definePropType(Object), default: () => ({}), }, + /** + * @description whether Transfer is filterable + */ filterable: Boolean, + /** + * @description prop aliases for data source + */ props: { type: definePropType(Object), default: () => @@ -87,11 +123,17 @@ export const transferProps = buildProps({ disabled: 'disabled', } as const), }, + /** + * @description order strategy for elements in the target list. If set to `original`, the elements will keep the same order as the data source. If set to `push`, the newly added elements will be pushed to the bottom. If set to `unshift`, the newly added elements will be inserted on the top + */ targetOrder: { type: String, values: ['original', 'push', 'unshift'], default: 'original', }, + /** + * @description whether to trigger form validation + */ validateEvent: { type: Boolean, default: true,