naive-ui 2.31.0 → 2.32.0

package/es/transfer/src/Transfer.js

@@ -1,19 +1,17 @@
-import { computed, defineComponent, h, provide } from 'vue';
+import { computed, defineComponent, h, provide, watchEffect, toRef } from 'vue';
 import { useIsMounted } from 'vooks';
 import { depx } from 'seemly';
-import { ChevronLeftIcon, ChevronRightIcon } from '../../_internal/icons';
-import { NBaseIcon } from '../../_internal';
-import { NButton } from '../../button';
-import { useLocale, useFormItem, useTheme, useConfig } from '../../_mixins';
+import { NScrollbar } from '../../_internal';
+import { useFormItem, useTheme, useConfig } from '../../_mixins';
 import { createKey } from '../../_utils/cssr';
-import { warn, call } from '../../_utils';
+import { call, warnOnce } from '../../_utils';
 import { transferLight } from '../styles';
 import NTransferHeader from './TransferHeader';
 import NTransferList from './TransferList';
 import NTransferFilter from './TransferFilter';
 import { useTransferData } from './use-transfer-data';
-import style from './styles/index.cssr';
 import { transferInjectionKey } from './interface';
+import style from './styles/index.cssr';
 export const transferProps = Object.assign(Object.assign({}, useTheme.props), { value: Array, defaultValue: {
         type: Array,
         default: null
@@ -32,20 +30,18 @@ export const transferProps = Object.assign(Object.assign({}, useTheme.props), {
                 .toLowerCase()
                 .indexOf(('' + pattern).toLowerCase());
         }
-    }, size: String, 'onUpdate:value': [Function, Array], onUpdateValue: [Function, Array], onChange: {
-        type: [Function, Array],
-        validator: () => {
-            if (process.env.NODE_ENV !== 'production') {
-                warn('transfer', '`on-change` is deprecated, please use `on-update:value` instead.');
-            }
-            return true;
-        },
-        default: undefined
-    } });
+    }, size: String, renderSourceLabel: Function, renderTargetLabel: Function, renderSourceList: Function, 'onUpdate:value': [Function, Array], onUpdateValue: [Function, Array], onChange: [Function, Array] });
 export default defineComponent({
     name: 'Transfer',
     props: transferProps,
     setup(props) {
+        if (process.env.NODE_ENV !== 'production') {
+            watchEffect(() => {
+                if (props.onChange !== undefined) {
+                    warnOnce('transfer', '`on-change` is deprecated, please use `on-update:value` instead.');
+                }
+            });
+        }
         const { mergedClsPrefixRef } = useConfig(props);
         const themeRef = useTheme('Transfer', '-transfer', style, transferLight, props, mergedClsPrefixRef);
         const formItem = useFormItem(props);
@@ -55,7 +51,7 @@ export default defineComponent({
             const { self: { [createKey('itemHeight', size)]: itemSize } } = themeRef.value;
             return depx(itemSize);
         });
-        const { uncontrolledValue: uncontrolledValueRef, mergedValue: mergedValueRef, avlSrcValueSet: avlSrcValueSetRef, avlTgtValueSet: avlTgtValueSetRef, tgtOpts: tgtOptsRef, srcOpts: srcOptsRef, filteredSrcOpts: filteredSrcOptsRef, filteredTgtOpts: filteredTgtOptsRef, srcCheckedValues: srcCheckedValuesRef, tgtCheckedValues: tgtCheckedValuesRef, srcCheckedStatus: srcCheckedStatusRef, tgtCheckedStatus: tgtCheckedStatusRef, srcPattern: srcPatternRef, tgtPattern: tgtPatternRef, isInputing: isInputingRef, fromButtonDisabled: fromButtonDisabledRef, toButtonDisabled: toButtonDisabledRef, handleInputFocus, handleInputBlur, handleTgtFilterUpdateValue, handleSrcFilterUpdateValue } = useTransferData(props, mergedDisabledRef);
+        const { uncontrolledValueRef, mergedValueRef, targetValueSetRef, valueSetForSelectAllRef, valueSetForUnselectAllRef, targetOptionsRef, filteredSrcOptionsRef, canNotSelectAnythingRef, canBeClearedRef, allCheckedRef, srcPatternRef, handleSrcFilterUpdateValue } = useTransferData(props);
         function doUpdateValue(value) {
             const { onUpdateValue, 'onUpdate:value': _onUpdateValue, onChange } = props;
             const { nTriggerFormInput, nTriggerFormChange } = formItem;
@@ -69,106 +65,68 @@ export default defineComponent({
             nTriggerFormInput();
             nTriggerFormChange();
         }
-        function handleSrcHeaderCheck(value) {
-            const { value: { checked, indeterminate } } = srcCheckedStatusRef;
-            if (indeterminate || checked) {
-                srcCheckedValuesRef.value = [];
-            }
-            else {
-                srcCheckedValuesRef.value = Array.from(avlSrcValueSetRef.value);
-            }
+        function handleClearAll() {
+            doUpdateValue([...valueSetForUnselectAllRef.value]);
         }
-        function handleTgtHeaderCheck() {
-            const { value: { checked, indeterminate } } = tgtCheckedStatusRef;
-            if (indeterminate || checked) {
-                tgtCheckedValuesRef.value = [];
-            }
-            else {
-                tgtCheckedValuesRef.value = Array.from(avlTgtValueSetRef.value);
-            }
-        }
-        function handleTgtCheckboxClick(checked, optionValue) {
-            if (checked) {
-                tgtCheckedValuesRef.value.push(optionValue);
-            }
-            else {
-                const index = tgtCheckedValuesRef.value.findIndex((v) => v === optionValue);
-                if (~index) {
-                    tgtCheckedValuesRef.value.splice(index, 1);
-                }
-            }
+        function handleCheckedAll() {
+            doUpdateValue([...valueSetForSelectAllRef.value]);
         }
-        function handleSrcCheckboxClick(checked, optionValue) {
+        function handleItemCheck(checked, optionValue) {
             if (checked) {
-                srcCheckedValuesRef.value.push(optionValue);
+                doUpdateValue([...(mergedValueRef.value || []), optionValue]);
             }
             else {
-                const index = srcCheckedValuesRef.value.findIndex((v) => v === optionValue);
+                const index = (mergedValueRef.value || []).findIndex((v) => v === optionValue);
                 if (~index) {
-                    srcCheckedValuesRef.value.splice(index, 1);
+                    ;
+                    (mergedValueRef.value || []).splice(index, 1);
                 }
             }
         }
-        function handleToTgtClick() {
-            doUpdateValue(srcCheckedValuesRef.value.concat(mergedValueRef.value || []));
-            srcCheckedValuesRef.value = [];
-        }
-        function handleToSrcClick() {
-            const tgtCheckedValueSet = new Set(tgtCheckedValuesRef.value);
-            doUpdateValue((mergedValueRef.value || []).filter((v) => !tgtCheckedValueSet.has(v)));
-            tgtCheckedValuesRef.value = [];
+        function handleChecked(optionValueList) {
+            doUpdateValue(optionValueList);
         }
         provide(transferInjectionKey, {
+            targetValueSetRef,
             mergedClsPrefixRef,
-            mergedSizeRef,
             disabledRef: mergedDisabledRef,
             mergedThemeRef: themeRef,
-            srcCheckedValuesRef,
-            tgtCheckedValuesRef,
-            srcOptsRef,
-            tgtOptsRef,
-            srcCheckedStatusRef,
-            tgtCheckedStatusRef,
-            handleSrcCheckboxClick,
-            handleTgtCheckboxClick
+            targetOptionsRef,
+            canNotSelectAnythingRef,
+            canBeClearedRef,
+            allCheckedRef,
+            srcOptionsLengthRef: computed(() => props.options.length),
+            handleItemCheck,
+            renderSourceLabelRef: toRef(props, 'renderSourceLabel'),
+            renderTargetLabelRef: toRef(props, 'renderTargetLabel')
         });
-        const { localeRef } = useLocale('Transfer');
         return {
-            locale: localeRef,
             mergedClsPrefix: mergedClsPrefixRef,
             mergedDisabled: mergedDisabledRef,
             itemSize: itemSizeRef,
             isMounted: useIsMounted(),
-            isInputing: isInputingRef,
             mergedTheme: themeRef,
-            filteredSrcOpts: filteredSrcOptsRef,
-            filteredTgtOpts: filteredTgtOptsRef,
+            filteredSrcOpts: filteredSrcOptionsRef,
+            tgtOpts: targetOptionsRef,
             srcPattern: srcPatternRef,
-            tgtPattern: tgtPatternRef,
-            toButtonDisabled: toButtonDisabledRef,
-            fromButtonDisabled: fromButtonDisabledRef,
-            handleSrcHeaderCheck,
-            handleTgtHeaderCheck,
-            handleToSrcClick,
-            handleToTgtClick,
-            handleInputFocus,
-            handleInputBlur,
-            handleTgtFilterUpdateValue,
+            mergedSize: mergedSizeRef,
             handleSrcFilterUpdateValue,
+            handleCheckedAll,
+            handleClearAll,
+            handleItemCheck,
+            handleChecked,
             cssVars: computed(() => {
                 const { value: size } = mergedSizeRef;
-                const { common: { cubicBezierEaseInOut, cubicBezierEaseIn, cubicBezierEaseOut }, self: { width, borderRadius, borderColor, listColor, headerColor, titleTextColor, titleTextColorDisabled, extraTextColor, filterDividerColor, itemTextColor, itemColorPending, itemTextColorDisabled, extraFontSize, titleFontWeight, iconColor, iconColorDisabled, [createKey('fontSize', size)]: fontSize, [createKey('itemHeight', size)]: itemHeight } } = themeRef.value;
+                const { common: { cubicBezierEaseInOut }, self: { borderRadius, borderColor, listColor, titleTextColor, titleTextColorDisabled, extraTextColor, itemTextColor, itemColorPending, itemTextColorDisabled, titleFontWeight, closeColorHover, closeColorPressed, closeIconColor, closeIconColorHover, closeIconColorPressed, closeIconSize, closeSize, dividerColor, extraTextColorDisabled, [createKey('extraFontSize', size)]: extraFontSize, [createKey('fontSize', size)]: fontSize, [createKey('titleFontSize', size)]: titleFontSize, [createKey('itemHeight', size)]: itemHeight, [createKey('headerHeight', size)]: headerHeight } } = themeRef.value;
                 return {
                     '--n-bezier': cubicBezierEaseInOut,
-                    '--n-bezier-ease-in': cubicBezierEaseIn,
-                    '--n-bezier-ease-out': cubicBezierEaseOut,
                     '--n-border-color': borderColor,
                     '--n-border-radius': borderRadius,
                     '--n-extra-font-size': extraFontSize,
-                    '--n-filter-divider-color': filterDividerColor,
                     '--n-font-size': fontSize,
-                    '--n-header-color': headerColor,
+                    '--n-header-font-size': titleFontSize,
                     '--n-header-extra-text-color': extraTextColor,
+                    '--n-header-extra-text-color-disabled': extraTextColorDisabled,
                     '--n-header-font-weight': titleFontWeight,
                     '--n-header-text-color': titleTextColor,
                     '--n-header-text-color-disabled': titleTextColorDisabled,
@@ -177,40 +135,43 @@ export default defineComponent({
                     '--n-item-text-color': itemTextColor,
                     '--n-item-text-color-disabled': itemTextColorDisabled,
                     '--n-list-color': listColor,
-                    '--n-width': width,
-                    '--n-icon-color': iconColor,
-                    '--n-icon-color-disabled': iconColorDisabled
+                    '--n-header-height': headerHeight,
+                    '--n-close-size': closeSize,
+                    '--n-close-icon-size': closeIconSize,
+                    '--n-close-color-hover': closeColorHover,
+                    '--n-close-color-pressed': closeColorPressed,
+                    '--n-close-icon-color': closeIconColor,
+                    '--n-close-icon-color-hover': closeIconColorHover,
+                    '--n-close-icon-color-pressed': closeIconColorPressed,
+                    '--n-divider-color': dividerColor
                 };
             })
         };
     },
     render() {
-        const { mergedClsPrefix } = this;
+        const { mergedClsPrefix, renderSourceList, mergedTheme } = this;
         return (h("div", { class: [
                 `${mergedClsPrefix}-transfer`,
                 this.mergedDisabled && `${mergedClsPrefix}-transfer--disabled`,
                 this.filterable && `${mergedClsPrefix}-transfer--filterable`
             ], style: this.cssVars },
-            h("div", { class: `${mergedClsPrefix}-transfer-list` },
-                h(NTransferHeader, { source: true, onChange: this.handleSrcHeaderCheck, title: this.sourceTitle || this.locale.sourceTitle }),
+            h("div", { class: `${mergedClsPrefix}-transfer-list ${mergedClsPrefix}-transfer-list--source` },
+                h(NTransferHeader, { source: true, title: this.sourceTitle, onCheckedAll: this.handleCheckedAll, onClearAll: this.handleClearAll, size: this.mergedSize }),
                 h("div", { class: `${mergedClsPrefix}-transfer-list-body` },
-                    this.filterable ? (h(NTransferFilter, { onUpdateValue: this.handleSrcFilterUpdateValue, value: this.srcPattern, disabled: this.mergedDisabled, placeholder: this.sourceFilterPlaceholder, onFocus: this.handleInputFocus, onBlur: this.handleInputBlur })) : null,
-                    h("div", { class: `${mergedClsPrefix}-transfer-list-flex-container` },
-                        h(NTransferList, { source: true, options: this.filteredSrcOpts, disabled: this.mergedDisabled, virtualScroll: this.virtualScroll, isMounted: this.isMounted, isInputing: this.isInputing, itemSize: this.itemSize }))),
+                    this.filterable ? (h(NTransferFilter, { onUpdateValue: this.handleSrcFilterUpdateValue, value: this.srcPattern, disabled: this.mergedDisabled, placeholder: this.sourceFilterPlaceholder })) : null,
+                    h("div", { class: `${mergedClsPrefix}-transfer-list-flex-container` }, renderSourceList ? (h(NScrollbar, { theme: mergedTheme.peers.Scrollbar, themeOverrides: mergedTheme.peerOverrides.Scrollbar }, {
+                        default: () => renderSourceList({
+                            onCheck: this.handleChecked,
+                            checkedOptions: this.tgtOpts,
+                            pattern: this.srcPattern
+                        })
+                    })) : (h(NTransferList, { source: true, options: this.filteredSrcOpts, disabled: this.mergedDisabled, virtualScroll: this.virtualScroll, itemSize: this.itemSize })))),
                 h("div", { class: `${mergedClsPrefix}-transfer-list__border` })),
-            h("div", { class: `${mergedClsPrefix}-transfer-gap` },
-                h(NButton, { disabled: this.toButtonDisabled || this.mergedDisabled, theme: this.mergedTheme.peers.Button, themeOverrides: this.mergedTheme.peerOverrides.Button, onClick: this.handleToTgtClick }, {
-                    icon: () => (h(NBaseIcon, { clsPrefix: mergedClsPrefix }, { default: () => h(ChevronRightIcon, null) }))
-                }),
-                h(NButton, { disabled: this.fromButtonDisabled || this.mergedDisabled, theme: this.mergedTheme.peers.Button, themeOverrides: this.mergedTheme.peerOverrides.Button, onClick: this.handleToSrcClick }, {
-                    icon: () => (h(NBaseIcon, { clsPrefix: mergedClsPrefix }, { default: () => h(ChevronLeftIcon, null) }))
-                })),
-            h("div", { class: `${mergedClsPrefix}-transfer-list` },
-                h(NTransferHeader, { onChange: this.handleTgtHeaderCheck, title: this.targetTitle || this.locale.targetTitle }),
+            h("div", { class: `${mergedClsPrefix}-transfer-list ${mergedClsPrefix}-transfer-list--target` },
+                h(NTransferHeader, { onClearAll: this.handleClearAll, size: this.mergedSize, title: this.targetTitle }),
                 h("div", { class: `${mergedClsPrefix}-transfer-list-body` },
-                    this.filterable ? (h(NTransferFilter, { onUpdateValue: this.handleTgtFilterUpdateValue, value: this.tgtPattern, disabled: this.mergedDisabled, placeholder: this.targetFilterPlaceholder, onFocus: this.handleInputFocus, onBlur: this.handleInputBlur })) : null,
                     h("div", { class: `${mergedClsPrefix}-transfer-list-flex-container` },
-                        h(NTransferList, { options: this.filteredTgtOpts, disabled: this.mergedDisabled, virtualScroll: this.virtualScroll, isMounted: this.isMounted, isInputing: this.isInputing, itemSize: this.itemSize }))),
+                        h(NTransferList, { options: this.tgtOpts, disabled: this.mergedDisabled, virtualScroll: this.virtualScroll, itemSize: this.itemSize }))),
                 h("div", { class: `${mergedClsPrefix}-transfer-list__border` }))));
     }
 });

package/es/transfer/src/TransferFilter.d.ts

@@ -3,14 +3,6 @@ declare const _default: import("vue").DefineComponent<{
     value: StringConstructor;
     placeholder: StringConstructor;
     disabled: BooleanConstructor;
-    onFocus: {
-        type: PropType<() => void>;
-        required: true;
-    };
-    onBlur: {
-        type: PropType<() => void>;
-        required: true;
-    };
     onUpdateValue: {
         type: PropType<(value: string | null) => void>;
         required: true;
@@ -131,21 +123,34 @@ declare const _default: import("vue").DefineComponent<{
             fontSizeMedium: string;
             fontSizeLarge: string;
             borderRadius: string;
+            dividerColor: string;
             borderColor: string;
             listColor: string;
             headerColor: string;
             titleTextColor: string;
             titleTextColorDisabled: string;
             extraTextColor: string;
-            filterDividerColor: string;
+            extraTextColorDisabled: string;
             itemTextColor: string;
             itemTextColorDisabled: string;
             itemColorPending: string;
             titleFontWeight: string;
-            iconColor: string;
-            iconColorDisabled: string;
-            extraFontSize: string;
-            width: string;
+            closeColorHover: string;
+            closeColorPressed: string;
+            closeIconColor: string;
+            closeIconColorHover: string;
+            closeIconColorPressed: string;
+            extraFontSizeSmall: string;
+            extraFontSizeMedium: string;
+            extraFontSizeLarge: string;
+            titleFontSizeSmall: string;
+            titleFontSizeMedium: string;
+            titleFontSizeLarge: string;
+            closeSize: string;
+            closeIconSize: string;
+            headerHeightSmall: string;
+            headerHeightMedium: string;
+            headerHeightLarge: string;
         };
         peers: {
             Checkbox: import("../../_mixins").Theme<"Checkbox", {
@@ -491,14 +496,6 @@ declare const _default: import("vue").DefineComponent<{
     value: StringConstructor;
     placeholder: StringConstructor;
     disabled: BooleanConstructor;
-    onFocus: {
-        type: PropType<() => void>;
-        required: true;
-    };
-    onBlur: {
-        type: PropType<() => void>;
-        required: true;
-    };
     onUpdateValue: {
         type: PropType<(value: string | null) => void>;
         required: true;

package/es/transfer/src/TransferFilter.js

@@ -9,14 +9,6 @@ export default defineComponent({
         value: String,
         placeholder: String,
         disabled: Boolean,
-        onFocus: {
-            type: Function,
-            required: true
-        },
-        onBlur: {
-            type: Function,
-            required: true
-        },
         onUpdateValue: {
             type: Function,
             required: true
@@ -33,8 +25,8 @@ export default defineComponent({
     render() {
         const { mergedTheme, mergedClsPrefix } = this;
         return (h("div", { class: `${mergedClsPrefix}-transfer-filter` },
-            h(NInput, { value: this.value, onUpdateValue: this.onUpdateValue, disabled: this.disabled, theme: mergedTheme.peers.Input, themeOverrides: mergedTheme.peerOverrides.Input, clearable: true, size: "small", placeholder: this.placeholder, onFocus: this.onFocus, onBlur: this.onBlur }, {
-                'clear-icon-placeholder': () => (h(NBaseIcon, { clsPrefix: mergedClsPrefix, class: `${mergedClsPrefix}-transfer-icon` }, { default: () => h(SearchIcon, null) }))
+            h(NInput, { value: this.value, onUpdateValue: this.onUpdateValue, disabled: this.disabled, placeholder: this.placeholder, theme: mergedTheme.peers.Input, themeOverrides: mergedTheme.peerOverrides.Input, clearable: true, size: "small" }, {
+                'clear-icon-placeholder': () => (h(NBaseIcon, { clsPrefix: mergedClsPrefix }, { default: () => h(SearchIcon, null) }))
             })));
     }
 });

package/es/transfer/src/TransferHeader.d.ts

@@ -1,23 +1,21 @@
 import { PropType } from 'vue';
 declare const _default: import("vue").DefineComponent<{
-    source: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    onChange: {
-        type: PropType<(value: boolean) => void>;
+    size: {
+        type: PropType<"small" | "medium" | "large">;
         required: true;
     };
+    source: BooleanConstructor;
+    onCheckedAll: PropType<() => void>;
+    onClearAll: PropType<() => void>;
     title: StringConstructor;
 }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    source: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    onChange: {
-        type: PropType<(value: boolean) => void>;
+    size: {
+        type: PropType<"small" | "medium" | "large">;
         required: true;
     };
+    source: BooleanConstructor;
+    onCheckedAll: PropType<() => void>;
+    onClearAll: PropType<() => void>;
     title: StringConstructor;
 }>>, {
     source: boolean;

package/es/transfer/src/TransferHeader.js

@@ -1,47 +1,42 @@
-import { h, computed, defineComponent, inject } from 'vue';
-import { NCheckbox } from '../../checkbox';
+import { h, defineComponent, inject } from 'vue';
+import { NButton } from '../../button';
+import { useLocale } from '../../_mixins';
 import { transferInjectionKey } from './interface';
 export default defineComponent({
     name: 'TransferHeader',
     props: {
-        source: {
-            type: Boolean,
-            default: false
-        },
-        onChange: {
-            type: Function,
+        size: {
+            type: String,
             required: true
         },
+        source: Boolean,
+        onCheckedAll: Function,
+        onClearAll: Function,
         title: String
     },
     setup(props) {
-        const { srcOptsRef, tgtOptsRef, srcCheckedStatusRef, tgtCheckedStatusRef, srcCheckedValuesRef, tgtCheckedValuesRef, mergedThemeRef, disabledRef, mergedClsPrefixRef
+        const { targetOptionsRef, canNotSelectAnythingRef, canBeClearedRef, allCheckedRef, mergedThemeRef, disabledRef, mergedClsPrefixRef, srcOptionsLengthRef
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
          } = inject(transferInjectionKey);
-        const checkboxPropsRef = computed(() => {
-            const { source } = props;
-            if (source) {
-                return srcCheckedStatusRef.value;
-            }
-            else {
-                return tgtCheckedStatusRef.value;
-            }
-        });
+        const { localeRef } = useLocale('Transfer');
         return () => {
-            const { source } = props;
-            const { value: checkboxProps } = checkboxPropsRef;
+            const { source, onClearAll, onCheckedAll } = props;
             const { value: mergedTheme } = mergedThemeRef;
             const { value: mergedClsPrefix } = mergedClsPrefixRef;
+            const { value: locale } = localeRef;
+            const buttonSize = props.size === 'large' ? 'small' : 'tiny';
+            const { title } = props;
             return (h("div", { class: `${mergedClsPrefix}-transfer-list-header` },
-                h("div", { class: `${mergedClsPrefix}-transfer-list-header__checkbox` },
-                    h(NCheckbox, { theme: mergedTheme.peers.Checkbox, themeOverrides: mergedTheme.peerOverrides.Checkbox, checked: checkboxProps.checked, indeterminate: checkboxProps.indeterminate, disabled: checkboxProps.disabled || disabledRef.value, onUpdateChecked: props.onChange })),
-                h("div", { class: `${mergedClsPrefix}-transfer-list-header__header` }, props.title),
-                h("div", { class: `${mergedClsPrefix}-transfer-list-header__extra` },
-                    source
-                        ? srcCheckedValuesRef.value.length
-                        : tgtCheckedValuesRef.value.length,
-                    "/",
-                    source ? srcOptsRef.value.length : tgtOptsRef.value.length)));
+                title && (h("div", { class: `${mergedClsPrefix}-transfer-list-header__title` }, title)),
+                source && (h(NButton, { class: `${mergedClsPrefix}-transfer-list-header__button`, theme: mergedTheme.peers.Button, themeOverrides: mergedTheme.peerOverrides.Button, size: buttonSize, tertiary: true, onClick: allCheckedRef.value ? onClearAll : onCheckedAll, disabled: canNotSelectAnythingRef.value || disabledRef.value }, {
+                    default: () => allCheckedRef.value ? locale.unselectAll : locale.selectAll
+                })),
+                !source && canBeClearedRef.value && (h(NButton, { class: `${mergedClsPrefix}-transfer-list-header__button`, theme: mergedTheme.peers.Button, themeOverrides: mergedTheme.peerOverrides.Button, size: buttonSize, tertiary: true, onClick: onClearAll, disabled: disabledRef.value }, {
+                    default: () => locale.clearAll
+                })),
+                h("div", { class: `${mergedClsPrefix}-transfer-list-header__extra` }, source
+                    ? locale.total(srcOptionsLengthRef.value)
+                    : locale.selected(targetOptionsRef.value.length))));
         };
     }
 });

package/es/transfer/src/TransferList.d.ts

@@ -17,18 +17,7 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         required: true;
     };
-    isMounted: {
-        type: BooleanConstructor;
-        required: true;
-    };
-    isInputing: {
-        type: BooleanConstructor;
-        required: true;
-    };
-    source: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
+    source: BooleanConstructor;
 }, {
     mergedTheme: import("vue").Ref<{
         common: {
@@ -144,21 +133,34 @@ declare const _default: import("vue").DefineComponent<{
             fontSizeMedium: string;
             fontSizeLarge: string;
             borderRadius: string;
+            dividerColor: string;
             borderColor: string;
             listColor: string;
             headerColor: string;
             titleTextColor: string;
             titleTextColorDisabled: string;
             extraTextColor: string;
-            filterDividerColor: string;
+            extraTextColorDisabled: string;
             itemTextColor: string;
             itemTextColorDisabled: string;
             itemColorPending: string;
             titleFontWeight: string;
-            iconColor: string;
-            iconColorDisabled: string;
-            extraFontSize: string;
-            width: string;
+            closeColorHover: string;
+            closeColorPressed: string;
+            closeIconColor: string;
+            closeIconColorHover: string;
+            closeIconColorPressed: string;
+            extraFontSizeSmall: string;
+            extraFontSizeMedium: string;
+            extraFontSizeLarge: string;
+            titleFontSizeSmall: string;
+            titleFontSizeMedium: string;
+            titleFontSizeLarge: string;
+            closeSize: string;
+            closeIconSize: string;
+            headerHeightSmall: string;
+            headerHeightMedium: string;
+            headerHeightLarge: string;
         };
         peers: {
             Checkbox: import("../../_mixins").Theme<"Checkbox", {
@@ -538,18 +540,7 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         required: true;
     };
-    isMounted: {
-        type: BooleanConstructor;
-        required: true;
-    };
-    isInputing: {
-        type: BooleanConstructor;
-        required: true;
-    };
-    source: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
+    source: BooleanConstructor;
 }>>, {
     source: boolean;
 }>;

package/es/transfer/src/TransferList.js

@@ -1,4 +1,4 @@
-import { h, defineComponent, ref, inject, TransitionGroup, Transition, Fragment } from 'vue';
+import { h, defineComponent, ref, inject } from 'vue';
 import { VirtualList } from 'vueuc';
 import { NEmpty } from '../../empty';
 import { NScrollbar } from '../../_internal';
@@ -23,18 +23,7 @@ export default defineComponent({
             type: Boolean,
             required: true
         },
-        isMounted: {
-            type: Boolean,
-            required: true
-        },
-        isInputing: {
-            type: Boolean,
-            required: true
-        },
-        source: {
-            type: Boolean,
-            default: false
-        }
+        source: Boolean
     },
     setup() {
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
@@ -70,24 +59,18 @@ export default defineComponent({
         };
     },
     render() {
-        const { mergedTheme, mergedClsPrefix, virtualScroll, syncVLScroller } = this;
-        return (h(Fragment, null,
-            h(NScrollbar, { ref: "scrollerInstRef", theme: mergedTheme.peers.Scrollbar, themeOverrides: mergedTheme.peerOverrides.Scrollbar, container: virtualScroll ? this.scrollContainer : undefined, content: virtualScroll ? this.scrollContent : undefined }, {
-                default: () => virtualScroll ? (h(VirtualList, { ref: "vlInstRef", style: { height: '100%' }, class: `${mergedClsPrefix}-transfer-list-content`, items: this.options, itemSize: this.itemSize, showScrollbar: false, onResize: syncVLScroller, onScroll: syncVLScroller, keyField: "value" }, {
-                    default: ({ item }) => {
-                        const { source, disabled } = this;
-                        return (h(NTransferListItem, { source: source, key: item.value, value: item.value, disabled: item.disabled || disabled, label: item.label }));
-                    }
-                })) : (h("div", { class: `${mergedClsPrefix}-transfer-list-content` },
-                    h(TransitionGroup, { name: "item", appear: this.isMounted, css: !this.isInputing }, {
-                        default: () => {
-                            const { source, disabled } = this;
-                            return this.options.map((option) => (h(NTransferListItem, { source: source, key: option.value, value: option.value, disabled: option.disabled || disabled, label: option.label })));
-                        }
-                    })))
-            }),
-            h(Transition, { name: "fade-in-transition", appear: this.isMounted, css: !this.isInputing }, {
-                default: () => this.options.length ? null : (h(NEmpty, { theme: mergedTheme.peers.Empty, themeOverrides: mergedTheme.peerOverrides.Empty }))
-            })));
+        const { mergedTheme, options } = this;
+        if (options.length === 0) {
+            return (h(NEmpty, { theme: mergedTheme.peers.Empty, themeOverrides: mergedTheme.peerOverrides.Empty }));
+        }
+        const { mergedClsPrefix, virtualScroll, source, disabled, syncVLScroller } = this;
+        return (h(NScrollbar, { ref: "scrollerInstRef", theme: mergedTheme.peers.Scrollbar, themeOverrides: mergedTheme.peerOverrides.Scrollbar, container: virtualScroll ? this.scrollContainer : undefined, content: virtualScroll ? this.scrollContent : undefined }, {
+            default: () => virtualScroll ? (h(VirtualList, { ref: "vlInstRef", style: { height: '100%' }, class: `${mergedClsPrefix}-transfer-list-content`, items: this.options, itemSize: this.itemSize, showScrollbar: false, onResize: syncVLScroller, onScroll: syncVLScroller, keyField: "value" }, {
+                default: ({ item }) => {
+                    const { source, disabled } = this;
+                    return (h(NTransferListItem, { source: source, key: item.value, value: item.value, disabled: item.disabled || disabled, label: item.label, option: item }));
+                }
+            })) : (h("div", { class: `${mergedClsPrefix}-transfer-list-content` }, this.options.map((option) => (h(NTransferListItem, { source: source, key: option.value, value: option.value, disabled: option.disabled || disabled, label: option.label, option: option })))))
+        }));
     }
 });