naive-ui 2.32.0 → 2.32.2

package/es/thing/src/Thing.d.ts

@@ -1,26 +1,26 @@
+import { CSSProperties, PropType } from 'vue';
 import type { ExtractPublicPropTypes } from '../../_utils';
 export declare const thingProps: {
     title: StringConstructor;
     titleExtra: StringConstructor;
     description: StringConstructor;
+    descriptionStyle: PropType<string | CSSProperties>;
     content: StringConstructor;
-    contentIndented: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    theme: import("vue").PropType<import("../../_mixins").Theme<"Thing", {
+    contentStyle: PropType<string | CSSProperties>;
+    contentIndented: BooleanConstructor;
+    theme: PropType<import("../../_mixins").Theme<"Thing", {
         fontSize: string;
         titleTextColor: string;
         textColor: string;
         titleFontWeight: string;
     }, any>>;
-    themeOverrides: import("vue").PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Thing", {
+    themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Thing", {
         fontSize: string;
         titleTextColor: string;
         textColor: string;
         titleFontWeight: string;
     }, any>>>;
-    builtinThemeOverrides: import("vue").PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Thing", {
+    builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Thing", {
         fontSize: string;
         titleTextColor: string;
         textColor: string;
@@ -32,24 +32,23 @@ declare const _default: import("vue").DefineComponent<{
     title: StringConstructor;
     titleExtra: StringConstructor;
     description: StringConstructor;
+    descriptionStyle: PropType<string | CSSProperties>;
     content: StringConstructor;
-    contentIndented: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    theme: import("vue").PropType<import("../../_mixins").Theme<"Thing", {
+    contentStyle: PropType<string | CSSProperties>;
+    contentIndented: BooleanConstructor;
+    theme: PropType<import("../../_mixins").Theme<"Thing", {
         fontSize: string;
         titleTextColor: string;
         textColor: string;
         titleFontWeight: string;
     }, any>>;
-    themeOverrides: import("vue").PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Thing", {
+    themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Thing", {
         fontSize: string;
         titleTextColor: string;
         textColor: string;
         titleFontWeight: string;
     }, any>>>;
-    builtinThemeOverrides: import("vue").PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Thing", {
+    builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Thing", {
         fontSize: string;
         titleTextColor: string;
         textColor: string;
@@ -59,24 +58,23 @@ declare const _default: import("vue").DefineComponent<{
     title: StringConstructor;
     titleExtra: StringConstructor;
     description: StringConstructor;
+    descriptionStyle: PropType<string | CSSProperties>;
     content: StringConstructor;
-    contentIndented: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    theme: import("vue").PropType<import("../../_mixins").Theme<"Thing", {
+    contentStyle: PropType<string | CSSProperties>;
+    contentIndented: BooleanConstructor;
+    theme: PropType<import("../../_mixins").Theme<"Thing", {
         fontSize: string;
         titleTextColor: string;
         textColor: string;
         titleFontWeight: string;
     }, any>>;
-    themeOverrides: import("vue").PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Thing", {
+    themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Thing", {
         fontSize: string;
         titleTextColor: string;
         textColor: string;
         titleFontWeight: string;
     }, any>>>;
-    builtinThemeOverrides: import("vue").PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Thing", {
+    builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Thing", {
         fontSize: string;
         titleTextColor: string;
         textColor: string;

package/es/thing/src/Thing.js

@@ -2,10 +2,7 @@ import { h, defineComponent, computed, Fragment } from 'vue';
 import { useConfig, useTheme, useThemeClass, useRtl } from '../../_mixins';
 import { thingLight } from '../styles';
 import style from './styles/index.cssr';
-export const thingProps = Object.assign(Object.assign({}, useTheme.props), { title: String, titleExtra: String, description: String, content: String, contentIndented: {
-        type: Boolean,
-        default: false
-    } });
+export const thingProps = Object.assign(Object.assign({}, useTheme.props), { title: String, titleExtra: String, description: String, descriptionStyle: [String, Object], content: String, contentStyle: [String, Object], contentIndented: Boolean });
 export default defineComponent({
     name: 'Thing',
     props: thingProps,
@@ -56,7 +53,7 @@ export default defineComponent({
                                 slots['header-extra'] || props.titleExtra ? (h("div", { class: `${mergedClsPrefix}-thing-header__extra` }, slots['header-extra']
                                     ? slots['header-extra']()
                                     : props.titleExtra)) : null),
-                            slots.description || props.description ? (h("div", { class: `${mergedClsPrefix}-thing-main__description` }, slots.description
+                            slots.description || props.description ? (h("div", { class: `${mergedClsPrefix}-thing-main__description`, style: props.descriptionStyle }, slots.description
                                 ? slots.description()
                                 : props.description)) : null)) : null)) : (h(Fragment, null,
                         slots.header ||
@@ -67,10 +64,10 @@ export default defineComponent({
                             slots['header-extra'] || props.titleExtra ? (h("div", { class: `${mergedClsPrefix}-thing-header__extra` }, slots['header-extra']
                                 ? slots['header-extra']()
                                 : props.titleExtra)) : null)) : null,
-                        slots.description || props.description ? (h("div", { class: `${mergedClsPrefix}-thing-main__description` }, slots.description
+                        slots.description || props.description ? (h("div", { class: `${mergedClsPrefix}-thing-main__description`, style: props.descriptionStyle }, slots.description
                             ? slots.description()
                             : props.description)) : null)),
-                    slots.default || props.content ? (h("div", { class: `${mergedClsPrefix}-thing-main__content` }, slots.default ? slots.default() : props.content)) : null,
+                    slots.default || props.content ? (h("div", { class: `${mergedClsPrefix}-thing-main__content`, style: props.contentStyle }, slots.default ? slots.default() : props.content)) : null,
                     slots.footer ? (h("div", { class: `${mergedClsPrefix}-thing-main__footer` }, slots.footer())) : null,
                     slots.action ? (h("div", { class: `${mergedClsPrefix}-thing-main__action` }, slots.action())) : null)));
         };

package/es/time-picker/src/Panel.d.ts

@@ -409,6 +409,7 @@ declare const _default: import("vue").DefineComponent<{
                 rippleDuration: string;
             }, any>;
             Input: import("../../_mixins").Theme<"Input", {
+                countTextColorDisabled: string;
                 countTextColor: string;
                 heightTiny: string;
                 heightSmall: string;

package/es/time-picker/src/TimePicker.d.ts

@@ -304,6 +304,7 @@ export declare const timePickerProps: {
             rippleDuration: string;
         }, any>;
         Input: import("../../_mixins").Theme<"Input", {
+            countTextColorDisabled: string;
             countTextColor: string;
             heightTiny: string;
             heightSmall: string;
@@ -590,6 +591,7 @@ export declare const timePickerProps: {
             rippleDuration: string;
         }, any>;
         Input: import("../../_mixins").Theme<"Input", {
+            countTextColorDisabled: string;
             countTextColor: string;
             heightTiny: string;
             heightSmall: string;
@@ -876,6 +878,7 @@ export declare const timePickerProps: {
             rippleDuration: string;
         }, any>;
         Input: import("../../_mixins").Theme<"Input", {
+            countTextColorDisabled: string;
             countTextColor: string;
             heightTiny: string;
             heightSmall: string;
@@ -1239,6 +1242,7 @@ declare const _default: import("vue").DefineComponent<{
             rippleDuration: string;
         }, any>;
         Input: import("../../_mixins").Theme<"Input", {
+            countTextColorDisabled: string;
             countTextColor: string;
             heightTiny: string;
             heightSmall: string;
@@ -1525,6 +1529,7 @@ declare const _default: import("vue").DefineComponent<{
             rippleDuration: string;
         }, any>;
         Input: import("../../_mixins").Theme<"Input", {
+            countTextColorDisabled: string;
             countTextColor: string;
             heightTiny: string;
             heightSmall: string;
@@ -1811,6 +1816,7 @@ declare const _default: import("vue").DefineComponent<{
             rippleDuration: string;
         }, any>;
         Input: import("../../_mixins").Theme<"Input", {
+            countTextColorDisabled: string;
             countTextColor: string;
             heightTiny: string;
             heightSmall: string;
@@ -2318,6 +2324,7 @@ declare const _default: import("vue").DefineComponent<{
                 rippleDuration: string;
             }, any>;
             Input: import("../../_mixins").Theme<"Input", {
+                countTextColorDisabled: string;
                 countTextColor: string;
                 heightTiny: string;
                 heightSmall: string;
@@ -2397,8 +2404,8 @@ declare const _default: import("vue").DefineComponent<{
         };
     }>;
     triggerCssVars: import("vue").ComputedRef<{
-        '--n-icon-color': string;
-        '--n-icon-color-disabled': string;
+        '--n-icon-color-override': string;
+        '--n-icon-color-disabled-override': string;
         '--n-bezier': string;
     }> | undefined;
     triggerThemeClass: import("vue").Ref<string> | undefined;
@@ -2722,6 +2729,7 @@ declare const _default: import("vue").DefineComponent<{
             rippleDuration: string;
         }, any>;
         Input: import("../../_mixins").Theme<"Input", {
+            countTextColorDisabled: string;
             countTextColor: string;
             heightTiny: string;
             heightSmall: string;
@@ -3008,6 +3016,7 @@ declare const _default: import("vue").DefineComponent<{
             rippleDuration: string;
         }, any>;
         Input: import("../../_mixins").Theme<"Input", {
+            countTextColorDisabled: string;
             countTextColor: string;
             heightTiny: string;
             heightSmall: string;
@@ -3294,6 +3303,7 @@ declare const _default: import("vue").DefineComponent<{
             rippleDuration: string;
         }, any>;
         Input: import("../../_mixins").Theme<"Input", {
+            countTextColorDisabled: string;
             countTextColor: string;
             heightTiny: string;
             heightSmall: string;

package/es/time-picker/src/TimePicker.js

@@ -2,7 +2,7 @@ import { h, ref, toRef, defineComponent, computed, withDirectives, Transition, p
 import { useIsMounted, useKeyboard, useMergedState } from 'vooks';
 import { VBinder, VTarget, VFollower } from 'vueuc';
 import { clickoutside } from 'vdirs';
-import { happensIn } from 'seemly';
+import { getPreciseEventTarget, happensIn } from 'seemly';
 import { isValid, startOfSecond, startOfMinute, startOfHour, format, set, setHours, setMinutes, setSeconds, getTime, getMinutes, getHours, getSeconds } from 'date-fns/esm';
 import formatInTimeZone from 'date-fns-tz/esm/formatInTimeZone';
 import { strictParse } from '../../date-picker/src/utils';
@@ -472,7 +472,7 @@ export default defineComponent({
         function handleClickOutside(e) {
             var _a, _b;
             if (mergedShowRef.value &&
-                !((_b = (_a = inputInstRef.value) === null || _a === void 0 ? void 0 : _a.wrapperElRef) === null || _b === void 0 ? void 0 : _b.contains(e.target))) {
+                !((_b = (_a = inputInstRef.value) === null || _a === void 0 ? void 0 : _a.wrapperElRef) === null || _b === void 0 ? void 0 : _b.contains(getPreciseEventTarget(e)))) {
                 closePanel({
                     returnFocus: false
                 });
@@ -569,8 +569,8 @@ export default defineComponent({
         const triggerCssVarsRef = computed(() => {
             const { common: { cubicBezierEaseInOut }, self: { iconColor, iconColorDisabled } } = themeRef.value;
             return {
-                '--n-icon-color': iconColor,
-                '--n-icon-color-disabled': iconColorDisabled,
+                '--n-icon-color-override': iconColor,
+                '--n-icon-color-disabled-override': iconColorDisabled,
                 '--n-bezier': cubicBezierEaseInOut
             };
         });

package/es/time-picker/src/styles/index.cssr.js

@@ -1,7 +1,7 @@
 import { c, cE, cM, cB, cNotM } from '../../../_utils/cssr';
 import { fadeInScaleUpTransition } from '../../../_styles/transitions/fade-in-scale-up.cssr'; // vars:
-// --n-icon-color
-// --n-icon-color-disabled
+// --n-icon-color-override
+// --n-icon-color-disabled-override
 // --n-bezier
 // --n-border-radius
 // --n-item-color-hover
@@ -21,11 +21,11 @@ export default c([cB('time-picker', `
  z-index: auto;
  position: relative;
  `, [cB('time-picker-icon', `
- color: var(--n-icon-color);
+ color: var(--n-icon-color-override);
  transition: color .3s var(--n-bezier);
- `), cM('disabled', [cB('time-picker-icon', {
-  color: 'var(--n-icon-color-disabled)'
-})])]), cB('time-picker-panel', `
+ `), cM('disabled', [cB('time-picker-icon', `
+ color: var(--n-icon-color-disabled-override);
+ `)])]), cB('time-picker-panel', `
  transition:
  box-shadow .3s var(--n-bezier),
  background-color .3s var(--n-bezier);
@@ -54,9 +54,9 @@ export default c([cB('time-picker', `
  height: calc(var(--n-item-height) * 6);
  flex-direction: column;
  transition: box-shadow .3s var(--n-bezier);
- `, [cM('transition-disabled', [cE('item', 'transition: none;', [c('&::before', 'transition: none;')])]), cE('padding', {
-  height: 'calc(var(--n-item-height) * 5)'
-}), c('&:first-child', 'min-width: calc(var(--n-item-width) + 4px);', [cE('item', [c('&::before', 'left: 4px;')])]), cE('item', `
+ `, [cM('transition-disabled', [cE('item', 'transition: none;', [c('&::before', 'transition: none;')])]), cE('padding', `
+ height: calc(var(--n-item-height) * 5);
+ `), c('&:first-child', 'min-width: calc(var(--n-item-width) + 4px);', [cE('item', [c('&::before', 'left: 4px;')])]), cE('item', `
  cursor: pointer;
  height: var(--n-item-height);
  display: flex;
@@ -84,9 +84,9 @@ export default c([cB('time-picker', `
  top: 4px;
  bottom: 0;
  border-radius: var(--n-item-border-radius);
- `), cNotM('disabled', [c('&:hover::before', {
-  backgroundColor: 'var(--n-item-color-hover)'
-})]), cM('active', `
+ `), cNotM('disabled', [c('&:hover::before', `
+ background-color: var(--n-item-color-hover);
+ `)]), cM('active', `
  color: var(--n-item-text-color-active);
  `, [c('&::before', `
  background-color: var(--n-item-color-hover);

package/es/time-picker/styles/light.d.ts

@@ -243,6 +243,7 @@ declare const timePickerLight: import("../../_mixins").Theme<"TimePicker", {
         rippleDuration: string;
     }, any>;
     Input: import("../../_mixins").Theme<"Input", {
+        countTextColorDisabled: string;
         countTextColor: string;
         heightTiny: string;
         heightSmall: string;

package/es/timeline/src/TimelineItem.js

@@ -71,7 +71,7 @@ export default defineComponent({
             h("div", { class: `${mergedClsPrefix}-timeline-item-timeline` },
                 h("div", { class: `${mergedClsPrefix}-timeline-item-timeline__line` }),
                 resolveWrappedSlot($slots.icon, (children) => {
-                    return children ? (h("div", { class: `${mergedClsPrefix}-timeline-item-timeline__icon`, style: { color: color } }, children)) : (h("div", { class: `${mergedClsPrefix}-timeline-item-timeline__circle`, style: { borderColor: color } }));
+                    return children ? (h("div", { class: `${mergedClsPrefix}-timeline-item-timeline__icon`, style: { color } }, children)) : (h("div", { class: `${mergedClsPrefix}-timeline-item-timeline__circle`, style: { borderColor: color } }));
                 })),
             h("div", { class: `${mergedClsPrefix}-timeline-item-content` },
                 resolveWrappedSlot($slots.header, (children) => {

package/es/tooltip/styles/dark.js

@@ -9,7 +9,7 @@ const tooltipDark = {
     },
     self(vars) {
         const { borderRadius, boxShadow2, popoverColor, textColor2 } = vars;
-        return Object.assign(Object.assign({}, commonVars), { borderRadius: borderRadius, boxShadow: boxShadow2, color: popoverColor, textColor: textColor2 });
+        return Object.assign(Object.assign({}, commonVars), { borderRadius, boxShadow: boxShadow2, color: popoverColor, textColor: textColor2 });
     }
 };
 export default tooltipDark;

package/es/tooltip/styles/light.js

@@ -5,7 +5,7 @@ import { createTheme } from '../../_mixins/use-theme';
 import { composite } from 'seemly';
 const self = (vars) => {
     const { borderRadius, boxShadow2, baseColor } = vars;
-    return Object.assign(Object.assign({}, commonVars), { borderRadius: borderRadius, boxShadow: boxShadow2, color: composite(baseColor, 'rgba(0, 0, 0, .85)'), textColor: baseColor });
+    return Object.assign(Object.assign({}, commonVars), { borderRadius, boxShadow: boxShadow2, color: composite(baseColor, 'rgba(0, 0, 0, .85)'), textColor: baseColor });
 };
 const tooltipLight = createTheme({
     name: 'Tooltip',

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

@@ -19,7 +19,12 @@ export declare const transferProps: {
     readonly virtualScroll: BooleanConstructor;
     readonly sourceTitle: StringConstructor;
     readonly targetTitle: StringConstructor;
-    readonly filterable: BooleanConstructor;
+    readonly filterable: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
+    readonly sourceFilterable: BooleanConstructor;
+    readonly targetFilterable: BooleanConstructor;
     readonly sourceFilterPlaceholder: StringConstructor;
     readonly targetFilterPlaceholder: StringConstructor;
     readonly filter: {
@@ -104,6 +109,7 @@ export declare const transferProps: {
             colorHover: string;
         }, any>;
         Input: import("../../_mixins").Theme<"Input", {
+            countTextColorDisabled: string;
             countTextColor: string;
             heightTiny: string;
             heightSmall: string;
@@ -452,6 +458,7 @@ export declare const transferProps: {
             colorHover: string;
         }, any>;
         Input: import("../../_mixins").Theme<"Input", {
+            countTextColorDisabled: string;
             countTextColor: string;
             heightTiny: string;
             heightSmall: string;
@@ -800,6 +807,7 @@ export declare const transferProps: {
             colorHover: string;
         }, any>;
         Input: import("../../_mixins").Theme<"Input", {
+            countTextColorDisabled: string;
             countTextColor: string;
             heightTiny: string;
             heightSmall: string;
@@ -1096,7 +1104,12 @@ declare const _default: import("vue").DefineComponent<{
     readonly virtualScroll: BooleanConstructor;
     readonly sourceTitle: StringConstructor;
     readonly targetTitle: StringConstructor;
-    readonly filterable: BooleanConstructor;
+    readonly filterable: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
+    readonly sourceFilterable: BooleanConstructor;
+    readonly targetFilterable: BooleanConstructor;
     readonly sourceFilterPlaceholder: StringConstructor;
     readonly targetFilterPlaceholder: StringConstructor;
     readonly filter: {
@@ -1181,6 +1194,7 @@ declare const _default: import("vue").DefineComponent<{
             colorHover: string;
         }, any>;
         Input: import("../../_mixins").Theme<"Input", {
+            countTextColorDisabled: string;
             countTextColor: string;
             heightTiny: string;
             heightSmall: string;
@@ -1529,6 +1543,7 @@ declare const _default: import("vue").DefineComponent<{
             colorHover: string;
         }, any>;
         Input: import("../../_mixins").Theme<"Input", {
+            countTextColorDisabled: string;
             countTextColor: string;
             heightTiny: string;
             heightSmall: string;
@@ -1877,6 +1892,7 @@ declare const _default: import("vue").DefineComponent<{
             colorHover: string;
         }, any>;
         Input: import("../../_mixins").Theme<"Input", {
+            countTextColorDisabled: string;
             countTextColor: string;
             heightTiny: string;
             heightSmall: string;
@@ -2337,6 +2353,7 @@ declare const _default: import("vue").DefineComponent<{
                 colorHover: string;
             }, any>;
             Input: import("../../_mixins").Theme<"Input", {
+                countTextColorDisabled: string;
                 countTextColor: string;
                 heightTiny: string;
                 heightSmall: string;
@@ -2643,12 +2660,16 @@ declare const _default: import("vue").DefineComponent<{
         };
     }>;
     filteredSrcOpts: import("vue").ComputedRef<Option[]>;
-    tgtOpts: import("vue").ComputedRef<Option[]>;
+    filteredTgtOpts: import("vue").ComputedRef<Option[]>;
     srcPattern: import("vue").Ref<string>;
+    tgtPattern: import("vue").Ref<string>;
     mergedSize: import("vue").ComputedRef<"small" | "medium" | "large">;
+    mergedSrcFilterable: import("vue").ComputedRef<Boolean>;
     handleSrcFilterUpdateValue: (value: string | null) => void;
-    handleCheckedAll: () => void;
-    handleClearAll: () => void;
+    handleTgtFilterUpdateValue: (value: string | null) => void;
+    handleSourceCheckAll: () => void;
+    handleSourceUncheckAll: () => void;
+    handleTargetClearAll: () => void;
     handleItemCheck: (checked: boolean, optionValue: OptionValue) => void;
     handleChecked: (optionValueList: OptionValue[]) => void;
     cssVars: import("vue").ComputedRef<{
@@ -2695,7 +2716,12 @@ declare const _default: import("vue").DefineComponent<{
     readonly virtualScroll: BooleanConstructor;
     readonly sourceTitle: StringConstructor;
     readonly targetTitle: StringConstructor;
-    readonly filterable: BooleanConstructor;
+    readonly filterable: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
+    readonly sourceFilterable: BooleanConstructor;
+    readonly targetFilterable: BooleanConstructor;
     readonly sourceFilterPlaceholder: StringConstructor;
     readonly targetFilterPlaceholder: StringConstructor;
     readonly filter: {
@@ -2780,6 +2806,7 @@ declare const _default: import("vue").DefineComponent<{
             colorHover: string;
         }, any>;
         Input: import("../../_mixins").Theme<"Input", {
+            countTextColorDisabled: string;
             countTextColor: string;
             heightTiny: string;
             heightSmall: string;
@@ -3128,6 +3155,7 @@ declare const _default: import("vue").DefineComponent<{
             colorHover: string;
         }, any>;
         Input: import("../../_mixins").Theme<"Input", {
+            countTextColorDisabled: string;
             countTextColor: string;
             heightTiny: string;
             heightSmall: string;
@@ -3476,6 +3504,7 @@ declare const _default: import("vue").DefineComponent<{
             colorHover: string;
         }, any>;
         Input: import("../../_mixins").Theme<"Input", {
+            countTextColorDisabled: string;
             countTextColor: string;
             heightTiny: string;
             heightSmall: string;
@@ -3760,5 +3789,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly virtualScroll: boolean;
     readonly filterable: boolean;
     readonly defaultValue: OptionValue[] | null;
+    readonly sourceFilterable: boolean;
+    readonly targetFilterable: boolean;
 }>;
 export default _default;

package/es/transfer/src/Transfer.js

@@ -21,7 +21,10 @@ export const transferProps = Object.assign(Object.assign({}, useTheme.props), {
     }, disabled: {
         type: Boolean,
         default: undefined
-    }, virtualScroll: Boolean, sourceTitle: String, targetTitle: String, filterable: Boolean, sourceFilterPlaceholder: String, targetFilterPlaceholder: String, filter: {
+    }, virtualScroll: Boolean, sourceTitle: String, targetTitle: String, filterable: {
+        type: Boolean,
+        default: undefined
+    }, sourceFilterable: Boolean, targetFilterable: Boolean, sourceFilterPlaceholder: String, targetFilterPlaceholder: String, filter: {
         type: Function,
         default: (pattern, option) => {
             if (!pattern)
@@ -40,6 +43,9 @@ export default defineComponent({
                 if (props.onChange !== undefined) {
                     warnOnce('transfer', '`on-change` is deprecated, please use `on-update:value` instead.');
                 }
+                if (props.filterable !== undefined) {
+                    warnOnce('transfer', '`filterable` is deprecated, please use `source-filterable` or `target-filterable` instead.');
+                }
             });
         }
         const { mergedClsPrefixRef } = useConfig(props);
@@ -51,7 +57,7 @@ export default defineComponent({
             const { self: { [createKey('itemHeight', size)]: itemSize } } = themeRef.value;
             return depx(itemSize);
         });
-        const { uncontrolledValueRef, mergedValueRef, targetValueSetRef, valueSetForSelectAllRef, valueSetForUnselectAllRef, targetOptionsRef, filteredSrcOptionsRef, canNotSelectAnythingRef, canBeClearedRef, allCheckedRef, srcPatternRef, handleSrcFilterUpdateValue } = useTransferData(props);
+        const { uncontrolledValueRef, mergedValueRef, targetValueSetRef, valueSetForCheckAllRef, valueSetForUncheckAllRef, valueSetForClearRef, filteredTgtOptionsRef, filteredSrcOptionsRef, targetOptionsRef, canNotSelectAnythingRef, canBeClearedRef, allCheckedRef, srcPatternRef, tgtPatternRef, mergedSrcFilterableRef, handleSrcFilterUpdateValue, handleTgtFilterUpdateValue } = useTransferData(props);
         function doUpdateValue(value) {
             const { onUpdateValue, 'onUpdate:value': _onUpdateValue, onChange } = props;
             const { nTriggerFormInput, nTriggerFormChange } = formItem;
@@ -65,22 +71,21 @@ export default defineComponent({
             nTriggerFormInput();
             nTriggerFormChange();
         }
-        function handleClearAll() {
-            doUpdateValue([...valueSetForUnselectAllRef.value]);
+        function handleSourceCheckAll() {
+            doUpdateValue([...valueSetForCheckAllRef.value]);
         }
-        function handleCheckedAll() {
-            doUpdateValue([...valueSetForSelectAllRef.value]);
+        function handleSourceUncheckAll() {
+            doUpdateValue([...valueSetForUncheckAllRef.value]);
+        }
+        function handleTargetClearAll() {
+            doUpdateValue([...valueSetForClearRef.value]);
         }
         function handleItemCheck(checked, optionValue) {
             if (checked) {
-                doUpdateValue([...(mergedValueRef.value || []), optionValue]);
+                doUpdateValue((mergedValueRef.value || []).concat(optionValue));
             }
             else {
-                const index = (mergedValueRef.value || []).findIndex((v) => v === optionValue);
-                if (~index) {
-                    ;
-                    (mergedValueRef.value || []).splice(index, 1);
-                }
+                doUpdateValue((mergedValueRef.value || []).filter((v) => v !== optionValue));
             }
         }
         function handleChecked(optionValueList) {
@@ -107,12 +112,16 @@ export default defineComponent({
             isMounted: useIsMounted(),
             mergedTheme: themeRef,
             filteredSrcOpts: filteredSrcOptionsRef,
-            tgtOpts: targetOptionsRef,
+            filteredTgtOpts: filteredTgtOptionsRef,
             srcPattern: srcPatternRef,
+            tgtPattern: tgtPatternRef,
             mergedSize: mergedSizeRef,
+            mergedSrcFilterable: mergedSrcFilterableRef,
             handleSrcFilterUpdateValue,
-            handleCheckedAll,
-            handleClearAll,
+            handleTgtFilterUpdateValue,
+            handleSourceCheckAll,
+            handleSourceUncheckAll,
+            handleTargetClearAll,
             handleItemCheck,
             handleChecked,
             cssVars: computed(() => {
@@ -149,29 +158,29 @@ export default defineComponent({
         };
     },
     render() {
-        const { mergedClsPrefix, renderSourceList, mergedTheme } = this;
+        const { mergedClsPrefix, renderSourceList, mergedTheme, mergedSrcFilterable, targetFilterable } = this;
         return (h("div", { class: [
                 `${mergedClsPrefix}-transfer`,
-                this.mergedDisabled && `${mergedClsPrefix}-transfer--disabled`,
-                this.filterable && `${mergedClsPrefix}-transfer--filterable`
+                this.mergedDisabled && `${mergedClsPrefix}-transfer--disabled`
             ], style: this.cssVars },
             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(NTransferHeader, { source: true, title: this.sourceTitle, onCheckedAll: this.handleSourceCheckAll, onClearAll: this.handleSourceUncheckAll, 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 })) : null,
+                    mergedSrcFilterable ? (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,
+                            checkedOptions: this.filteredTgtOpts,
                             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-list ${mergedClsPrefix}-transfer-list--target` },
-                h(NTransferHeader, { onClearAll: this.handleClearAll, size: this.mergedSize, title: this.targetTitle }),
+                h(NTransferHeader, { onClearAll: this.handleTargetClearAll, size: this.mergedSize, title: this.targetTitle }),
                 h("div", { class: `${mergedClsPrefix}-transfer-list-body` },
+                    targetFilterable ? (h(NTransferFilter, { onUpdateValue: this.handleTgtFilterUpdateValue, value: this.tgtPattern, disabled: this.mergedDisabled, placeholder: this.sourceFilterPlaceholder })) : null,
                     h("div", { class: `${mergedClsPrefix}-transfer-list-flex-container` },
-                        h(NTransferList, { options: this.tgtOpts, disabled: this.mergedDisabled, virtualScroll: this.virtualScroll, itemSize: this.itemSize }))),
+                        h(NTransferList, { options: this.filteredTgtOpts, disabled: this.mergedDisabled, virtualScroll: this.virtualScroll, itemSize: this.itemSize }))),
                 h("div", { class: `${mergedClsPrefix}-transfer-list__border` }))));
     }
 });

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

@@ -187,6 +187,7 @@ declare const _default: import("vue").DefineComponent<{
                 colorHover: string;
             }, any>;
             Input: import("../../_mixins").Theme<"Input", {
+                countTextColorDisabled: string;
                 countTextColor: string;
                 heightTiny: string;
                 heightSmall: string;

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

@@ -197,6 +197,7 @@ declare const _default: import("vue").DefineComponent<{
                 colorHover: string;
             }, any>;
             Input: import("../../_mixins").Theme<"Input", {
+                countTextColorDisabled: string;
                 countTextColor: string;
                 heightTiny: string;
                 heightSmall: string;

package/es/transfer/src/TransferList.js

@@ -70,7 +70,7 @@ export default defineComponent({
                     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 })))))
+            })) : (h("div", { class: `${mergedClsPrefix}-transfer-list-content` }, options.map((option) => (h(NTransferListItem, { source: source, key: option.value, value: option.value, disabled: option.disabled || disabled, label: option.label, option: option })))))
         }));
     }
 });