naive-ui 2.30.7 → 2.32.0

package/lib/transfer/src/Transfer.js

@@ -3,12 +3,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.transferProps = void 0;
 const vue_1 = require("vue");
 const vooks_1 = require("vooks");
 const seemly_1 = require("seemly");
-const icons_1 = require("../../_internal/icons");
 const _internal_1 = require("../../_internal");
-const button_1 = require("../../button");
 const _mixins_1 = require("../../_mixins");
 const cssr_1 = require("../../_utils/cssr");
 const _utils_1 = require("../../_utils");
@@ -17,9 +16,9 @@ const TransferHeader_1 = __importDefault(require("./TransferHeader"));
 const TransferList_1 = __importDefault(require("./TransferList"));
 const TransferFilter_1 = __importDefault(require("./TransferFilter"));
 const use_transfer_data_1 = require("./use-transfer-data");
-const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
 const interface_1 = require("./interface");
-const transferProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { value: Array, defaultValue: {
+const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
+exports.transferProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { value: Array, defaultValue: {
         type: Array,
         default: null
     }, options: {
@@ -37,20 +36,18 @@ const transferProps = Object.assign(Object.assign({}, _mixins_1.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') {
-                (0, _utils_1.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] });
 exports.default = (0, vue_1.defineComponent)({
     name: 'Transfer',
-    props: transferProps,
+    props: exports.transferProps,
     setup(props) {
+        if (process.env.NODE_ENV !== 'production') {
+            (0, vue_1.watchEffect)(() => {
+                if (props.onChange !== undefined) {
+                    (0, _utils_1.warnOnce)('transfer', '`on-change` is deprecated, please use `on-update:value` instead.');
+                }
+            });
+        }
         const { mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
         const themeRef = (0, _mixins_1.useTheme)('Transfer', '-transfer', index_cssr_1.default, styles_1.transferLight, props, mergedClsPrefixRef);
         const formItem = (0, _mixins_1.useFormItem)(props);
@@ -60,7 +57,7 @@ exports.default = (0, vue_1.defineComponent)({
             const { self: { [(0, cssr_1.createKey)('itemHeight', size)]: itemSize } } = themeRef.value;
             return (0, seemly_1.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 } = (0, use_transfer_data_1.useTransferData)(props, mergedDisabledRef);
+        const { uncontrolledValueRef, mergedValueRef, targetValueSetRef, valueSetForSelectAllRef, valueSetForUnselectAllRef, targetOptionsRef, filteredSrcOptionsRef, canNotSelectAnythingRef, canBeClearedRef, allCheckedRef, srcPatternRef, handleSrcFilterUpdateValue } = (0, use_transfer_data_1.useTransferData)(props);
         function doUpdateValue(value) {
             const { onUpdateValue, 'onUpdate:value': _onUpdateValue, onChange } = props;
             const { nTriggerFormInput, nTriggerFormChange } = formItem;
@@ -74,106 +71,68 @@ exports.default = (0, vue_1.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);
         }
         (0, vue_1.provide)(interface_1.transferInjectionKey, {
+            targetValueSetRef,
             mergedClsPrefixRef,
-            mergedSizeRef,
             disabledRef: mergedDisabledRef,
             mergedThemeRef: themeRef,
-            srcCheckedValuesRef,
-            tgtCheckedValuesRef,
-            srcOptsRef,
-            tgtOptsRef,
-            srcCheckedStatusRef,
-            tgtCheckedStatusRef,
-            handleSrcCheckboxClick,
-            handleTgtCheckboxClick
+            targetOptionsRef,
+            canNotSelectAnythingRef,
+            canBeClearedRef,
+            allCheckedRef,
+            srcOptionsLengthRef: (0, vue_1.computed)(() => props.options.length),
+            handleItemCheck,
+            renderSourceLabelRef: (0, vue_1.toRef)(props, 'renderSourceLabel'),
+            renderTargetLabelRef: (0, vue_1.toRef)(props, 'renderTargetLabel')
         });
-        const { localeRef } = (0, _mixins_1.useLocale)('Transfer');
         return {
-            locale: localeRef,
             mergedClsPrefix: mergedClsPrefixRef,
             mergedDisabled: mergedDisabledRef,
             itemSize: itemSizeRef,
             isMounted: (0, vooks_1.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: (0, vue_1.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, [(0, cssr_1.createKey)('fontSize', size)]: fontSize, [(0, cssr_1.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, [(0, cssr_1.createKey)('extraFontSize', size)]: extraFontSize, [(0, cssr_1.createKey)('fontSize', size)]: fontSize, [(0, cssr_1.createKey)('titleFontSize', size)]: titleFontSize, [(0, cssr_1.createKey)('itemHeight', size)]: itemHeight, [(0, cssr_1.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,
@@ -182,40 +141,43 @@ exports.default = (0, vue_1.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 ((0, vue_1.h)("div", { class: [
                 `${mergedClsPrefix}-transfer`,
                 this.mergedDisabled && `${mergedClsPrefix}-transfer--disabled`,
                 this.filterable && `${mergedClsPrefix}-transfer--filterable`
             ], style: this.cssVars },
-            (0, vue_1.h)("div", { class: `${mergedClsPrefix}-transfer-list` },
-                (0, vue_1.h)(TransferHeader_1.default, { source: true, onChange: this.handleSrcHeaderCheck, title: this.sourceTitle || this.locale.sourceTitle }),
+            (0, vue_1.h)("div", { class: `${mergedClsPrefix}-transfer-list ${mergedClsPrefix}-transfer-list--source` },
+                (0, vue_1.h)(TransferHeader_1.default, { source: true, title: this.sourceTitle, onCheckedAll: this.handleCheckedAll, onClearAll: this.handleClearAll, size: this.mergedSize }),
                 (0, vue_1.h)("div", { class: `${mergedClsPrefix}-transfer-list-body` },
-                    this.filterable ? ((0, vue_1.h)(TransferFilter_1.default, { onUpdateValue: this.handleSrcFilterUpdateValue, value: this.srcPattern, disabled: this.mergedDisabled, placeholder: this.sourceFilterPlaceholder, onFocus: this.handleInputFocus, onBlur: this.handleInputBlur })) : null,
-                    (0, vue_1.h)("div", { class: `${mergedClsPrefix}-transfer-list-flex-container` },
-                        (0, vue_1.h)(TransferList_1.default, { source: true, options: this.filteredSrcOpts, disabled: this.mergedDisabled, virtualScroll: this.virtualScroll, isMounted: this.isMounted, isInputing: this.isInputing, itemSize: this.itemSize }))),
+                    this.filterable ? ((0, vue_1.h)(TransferFilter_1.default, { onUpdateValue: this.handleSrcFilterUpdateValue, value: this.srcPattern, disabled: this.mergedDisabled, placeholder: this.sourceFilterPlaceholder })) : null,
+                    (0, vue_1.h)("div", { class: `${mergedClsPrefix}-transfer-list-flex-container` }, renderSourceList ? ((0, vue_1.h)(_internal_1.NScrollbar, { theme: mergedTheme.peers.Scrollbar, themeOverrides: mergedTheme.peerOverrides.Scrollbar }, {
+                        default: () => renderSourceList({
+                            onCheck: this.handleChecked,
+                            checkedOptions: this.tgtOpts,
+                            pattern: this.srcPattern
+                        })
+                    })) : ((0, vue_1.h)(TransferList_1.default, { source: true, options: this.filteredSrcOpts, disabled: this.mergedDisabled, virtualScroll: this.virtualScroll, itemSize: this.itemSize })))),
                 (0, vue_1.h)("div", { class: `${mergedClsPrefix}-transfer-list__border` })),
-            (0, vue_1.h)("div", { class: `${mergedClsPrefix}-transfer-gap` },
-                (0, vue_1.h)(button_1.NButton, { disabled: this.toButtonDisabled || this.mergedDisabled, theme: this.mergedTheme.peers.Button, themeOverrides: this.mergedTheme.peerOverrides.Button, onClick: this.handleToTgtClick }, {
-                    icon: () => ((0, vue_1.h)(_internal_1.NBaseIcon, { clsPrefix: mergedClsPrefix }, { default: () => (0, vue_1.h)(icons_1.ChevronRightIcon, null) }))
-                }),
-                (0, vue_1.h)(button_1.NButton, { disabled: this.fromButtonDisabled || this.mergedDisabled, theme: this.mergedTheme.peers.Button, themeOverrides: this.mergedTheme.peerOverrides.Button, onClick: this.handleToSrcClick }, {
-                    icon: () => ((0, vue_1.h)(_internal_1.NBaseIcon, { clsPrefix: mergedClsPrefix }, { default: () => (0, vue_1.h)(icons_1.ChevronLeftIcon, null) }))
-                })),
-            (0, vue_1.h)("div", { class: `${mergedClsPrefix}-transfer-list` },
-                (0, vue_1.h)(TransferHeader_1.default, { onChange: this.handleTgtHeaderCheck, title: this.targetTitle || this.locale.targetTitle }),
+            (0, vue_1.h)("div", { class: `${mergedClsPrefix}-transfer-list ${mergedClsPrefix}-transfer-list--target` },
+                (0, vue_1.h)(TransferHeader_1.default, { onClearAll: this.handleClearAll, size: this.mergedSize, title: this.targetTitle }),
                 (0, vue_1.h)("div", { class: `${mergedClsPrefix}-transfer-list-body` },
-                    this.filterable ? ((0, vue_1.h)(TransferFilter_1.default, { onUpdateValue: this.handleTgtFilterUpdateValue, value: this.tgtPattern, disabled: this.mergedDisabled, placeholder: this.targetFilterPlaceholder, onFocus: this.handleInputFocus, onBlur: this.handleInputBlur })) : null,
                     (0, vue_1.h)("div", { class: `${mergedClsPrefix}-transfer-list-flex-container` },
-                        (0, vue_1.h)(TransferList_1.default, { options: this.filteredTgtOpts, disabled: this.mergedDisabled, virtualScroll: this.virtualScroll, isMounted: this.isMounted, isInputing: this.isInputing, itemSize: this.itemSize }))),
+                        (0, vue_1.h)(TransferList_1.default, { options: this.tgtOpts, disabled: this.mergedDisabled, virtualScroll: this.virtualScroll, itemSize: this.itemSize }))),
                 (0, vue_1.h)("div", { class: `${mergedClsPrefix}-transfer-list__border` }))));
     }
 });

package/lib/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/lib/transfer/src/TransferFilter.js

@@ -11,14 +11,6 @@ exports.default = (0, vue_1.defineComponent)({
         value: String,
         placeholder: String,
         disabled: Boolean,
-        onFocus: {
-            type: Function,
-            required: true
-        },
-        onBlur: {
-            type: Function,
-            required: true
-        },
         onUpdateValue: {
             type: Function,
             required: true
@@ -35,8 +27,8 @@ exports.default = (0, vue_1.defineComponent)({
     render() {
         const { mergedTheme, mergedClsPrefix } = this;
         return ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-transfer-filter` },
-            (0, vue_1.h)(input_1.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': () => ((0, vue_1.h)(_internal_1.NBaseIcon, { clsPrefix: mergedClsPrefix, class: `${mergedClsPrefix}-transfer-icon` }, { default: () => (0, vue_1.h)(icons_1.SearchIcon, null) }))
+            (0, vue_1.h)(input_1.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': () => ((0, vue_1.h)(_internal_1.NBaseIcon, { clsPrefix: mergedClsPrefix }, { default: () => (0, vue_1.h)(icons_1.SearchIcon, null) }))
             })));
     }
 });

package/lib/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/lib/transfer/src/TransferHeader.js

@@ -1,49 +1,44 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const vue_1 = require("vue");
-const checkbox_1 = require("../../checkbox");
+const button_1 = require("../../button");
+const _mixins_1 = require("../../_mixins");
 const interface_1 = require("./interface");
 exports.default = (0, vue_1.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
          } = (0, vue_1.inject)(interface_1.transferInjectionKey);
-        const checkboxPropsRef = (0, vue_1.computed)(() => {
-            const { source } = props;
-            if (source) {
-                return srcCheckedStatusRef.value;
-            }
-            else {
-                return tgtCheckedStatusRef.value;
-            }
-        });
+        const { localeRef } = (0, _mixins_1.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 ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-transfer-list-header` },
-                (0, vue_1.h)("div", { class: `${mergedClsPrefix}-transfer-list-header__checkbox` },
-                    (0, vue_1.h)(checkbox_1.NCheckbox, { theme: mergedTheme.peers.Checkbox, themeOverrides: mergedTheme.peerOverrides.Checkbox, checked: checkboxProps.checked, indeterminate: checkboxProps.indeterminate, disabled: checkboxProps.disabled || disabledRef.value, onUpdateChecked: props.onChange })),
-                (0, vue_1.h)("div", { class: `${mergedClsPrefix}-transfer-list-header__header` }, props.title),
-                (0, vue_1.h)("div", { class: `${mergedClsPrefix}-transfer-list-header__extra` },
-                    source
-                        ? srcCheckedValuesRef.value.length
-                        : tgtCheckedValuesRef.value.length,
-                    "/",
-                    source ? srcOptsRef.value.length : tgtOptsRef.value.length)));
+                title && ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-transfer-list-header__title` }, title)),
+                source && ((0, vue_1.h)(button_1.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 && ((0, vue_1.h)(button_1.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
+                })),
+                (0, vue_1.h)("div", { class: `${mergedClsPrefix}-transfer-list-header__extra` }, source
+                    ? locale.total(srcOptionsLengthRef.value)
+                    : locale.selected(targetOptionsRef.value.length))));
         };
     }
 });

package/lib/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/lib/transfer/src/TransferList.js

@@ -28,18 +28,7 @@ exports.default = (0, vue_1.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
@@ -75,24 +64,18 @@ exports.default = (0, vue_1.defineComponent)({
         };
     },
     render() {
-        const { mergedTheme, mergedClsPrefix, virtualScroll, syncVLScroller } = this;
-        return ((0, vue_1.h)(vue_1.Fragment, null,
-            (0, vue_1.h)(_internal_1.NScrollbar, { ref: "scrollerInstRef", theme: mergedTheme.peers.Scrollbar, themeOverrides: mergedTheme.peerOverrides.Scrollbar, container: virtualScroll ? this.scrollContainer : undefined, content: virtualScroll ? this.scrollContent : undefined }, {
-                default: () => virtualScroll ? ((0, vue_1.h)(vueuc_1.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 ((0, vue_1.h)(TransferListItem_1.default, { source: source, key: item.value, value: item.value, disabled: item.disabled || disabled, label: item.label }));
-                    }
-                })) : ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-transfer-list-content` },
-                    (0, vue_1.h)(vue_1.TransitionGroup, { name: "item", appear: this.isMounted, css: !this.isInputing }, {
-                        default: () => {
-                            const { source, disabled } = this;
-                            return this.options.map((option) => ((0, vue_1.h)(TransferListItem_1.default, { source: source, key: option.value, value: option.value, disabled: option.disabled || disabled, label: option.label })));
-                        }
-                    })))
-            }),
-            (0, vue_1.h)(vue_1.Transition, { name: "fade-in-transition", appear: this.isMounted, css: !this.isInputing }, {
-                default: () => this.options.length ? null : ((0, vue_1.h)(empty_1.NEmpty, { theme: mergedTheme.peers.Empty, themeOverrides: mergedTheme.peerOverrides.Empty }))
-            })));
+        const { mergedTheme, options } = this;
+        if (options.length === 0) {
+            return ((0, vue_1.h)(empty_1.NEmpty, { theme: mergedTheme.peers.Empty, themeOverrides: mergedTheme.peerOverrides.Empty }));
+        }
+        const { mergedClsPrefix, virtualScroll, source, disabled, syncVLScroller } = this;
+        return ((0, vue_1.h)(_internal_1.NScrollbar, { ref: "scrollerInstRef", theme: mergedTheme.peers.Scrollbar, themeOverrides: mergedTheme.peerOverrides.Scrollbar, container: virtualScroll ? this.scrollContainer : undefined, content: virtualScroll ? this.scrollContent : undefined }, {
+            default: () => virtualScroll ? ((0, vue_1.h)(vueuc_1.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 ((0, vue_1.h)(TransferListItem_1.default, { source: source, key: item.value, value: item.value, disabled: item.disabled || disabled, label: item.label, option: item }));
+                }
+            })) : ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-transfer-list-content` }, this.options.map((option) => ((0, vue_1.h)(TransferListItem_1.default, { source: source, key: option.value, value: option.value, disabled: option.disabled || disabled, label: option.label, option: option })))))
+        }));
     }
 });