naive-ui 2.31.0 → 2.32.0

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

@@ -1,8 +1,7 @@
+import { PropType } from 'vue';
+import { Option } from './interface';
 declare const _default: import("vue").DefineComponent<{
-    source: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
+    source: BooleanConstructor;
     label: {
         type: StringConstructor;
         required: true;
@@ -11,9 +10,10 @@ declare const _default: import("vue").DefineComponent<{
         type: (StringConstructor | NumberConstructor)[];
         required: true;
     };
-    disabled: {
-        type: BooleanConstructor;
-        default: boolean;
+    disabled: BooleanConstructor;
+    option: {
+        type: PropType<Option>;
+        required: true;
     };
 }, {
     mergedClsPrefix: import("vue").Ref<string>;
@@ -131,21 +131,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", {
@@ -489,11 +502,10 @@ declare const _default: import("vue").DefineComponent<{
     }>;
     checked: import("vue").ComputedRef<boolean>;
     handleClick: () => void;
+    renderSourceLabel: import("vue").Ref<import("./interface").TransferRenderSourceLabel | undefined>;
+    renderTargetLabel: import("vue").Ref<import("./interface").TransferRenderTargetLabel | undefined>;
 }, 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;
-    };
+    source: BooleanConstructor;
     label: {
         type: StringConstructor;
         required: true;
@@ -502,9 +514,10 @@ declare const _default: import("vue").DefineComponent<{
         type: (StringConstructor | NumberConstructor)[];
         required: true;
     };
-    disabled: {
-        type: BooleanConstructor;
-        default: boolean;
+    disabled: BooleanConstructor;
+    option: {
+        type: PropType<Option>;
+        required: true;
     };
 }>>, {
     source: boolean;

package/es/transfer/src/TransferListItem.js

@@ -1,15 +1,13 @@
 import { h, inject, defineComponent } from 'vue';
 import { useMemo } from 'vooks';
 import { NCheckbox } from '../../checkbox';
-import { transferInjectionKey } from './interface';
 import { getTitleAttribute } from '../../_utils';
+import { NBaseClose } from '../../_internal';
+import { transferInjectionKey } from './interface';
 export default defineComponent({
     name: 'NTransferListItem',
     props: {
-        source: {
-            type: Boolean,
-            default: false
-        },
+        source: Boolean,
         label: {
             type: String,
             required: true
@@ -18,48 +16,54 @@ export default defineComponent({
             type: [String, Number],
             required: true
         },
-        disabled: {
-            type: Boolean,
-            default: false
+        disabled: Boolean,
+        option: {
+            type: Object,
+            required: true
         }
     },
     setup(props) {
-        const { source } = props;
-        const { mergedClsPrefixRef, mergedThemeRef, srcCheckedValuesRef, tgtCheckedValuesRef, handleSrcCheckboxClick, handleTgtCheckboxClick
+        const { targetValueSetRef, mergedClsPrefixRef, mergedThemeRef, handleItemCheck, renderSourceLabelRef, renderTargetLabelRef
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
          } = inject(transferInjectionKey);
-        const checkedRef = source
-            ? useMemo(() => srcCheckedValuesRef.value.includes(props.value))
-            : useMemo(() => tgtCheckedValuesRef.value.includes(props.value));
-        const handleClick = source
-            ? () => {
-                if (!props.disabled) {
-                    handleSrcCheckboxClick(!checkedRef.value, props.value);
-                }
+        const checkedRef = useMemo(() => targetValueSetRef.value.has(props.value));
+        function handleClick() {
+            if (!props.disabled) {
+                handleItemCheck(!checkedRef.value, props.value);
             }
-            : () => {
-                if (!props.disabled) {
-                    handleTgtCheckboxClick(!checkedRef.value, props.value);
-                }
-            };
+        }
         return {
             mergedClsPrefix: mergedClsPrefixRef,
             mergedTheme: mergedThemeRef,
             checked: checkedRef,
-            handleClick
+            handleClick,
+            renderSourceLabel: renderSourceLabelRef,
+            renderTargetLabel: renderTargetLabelRef
         };
     },
     render() {
-        const { disabled, mergedTheme, mergedClsPrefix, label, checked, source } = this;
+        const { disabled, mergedTheme, mergedClsPrefix, label, checked, source, renderSourceLabel, renderTargetLabel } = this;
         return (h("div", { class: [
                 `${mergedClsPrefix}-transfer-list-item`,
                 disabled && `${mergedClsPrefix}-transfer-list-item--disabled`,
                 source
                     ? `${mergedClsPrefix}-transfer-list-item--source`
                     : `${mergedClsPrefix}-transfer-list-item--target`
-            ], onClick: this.handleClick },
-            h("div", { class: `${mergedClsPrefix}-transfer-list-item__checkbox` },
-                h(NCheckbox, { theme: mergedTheme.peers.Checkbox, themeOverrides: mergedTheme.peerOverrides.Checkbox, disabled: disabled, checked: checked })),
-            h("div", { class: `${mergedClsPrefix}-transfer-list-item__label`, title: getTitleAttribute(label) }, label)));
+            ], onClick: source ? this.handleClick : undefined },
+            h("div", { class: `${mergedClsPrefix}-transfer-list-item__background` }),
+            source && (h("div", { class: `${mergedClsPrefix}-transfer-list-item__checkbox` },
+                h(NCheckbox, { theme: mergedTheme.peers.Checkbox, themeOverrides: mergedTheme.peerOverrides.Checkbox, disabled: disabled, checked: checked }))),
+            h("div", { class: `${mergedClsPrefix}-transfer-list-item__label`, title: getTitleAttribute(label) }, source
+                ? renderSourceLabel
+                    ? renderSourceLabel({
+                        option: this.option
+                    })
+                    : label
+                : renderTargetLabel
+                    ? renderTargetLabel({
+                        option: this.option
+                    })
+                    : label),
+            !source && !disabled && (h(NBaseClose, { focusable: false, class: `${mergedClsPrefix}-transfer-list-item__close`, clsPrefix: mergedClsPrefix, onClick: this.handleClick }))));
     }
 });

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

@@ -1,4 +1,4 @@
-import { Ref } from 'vue';
+import { Ref, VNodeChild } from 'vue';
 import type { MergedTheme } from '../../_mixins';
 import type { TransferTheme } from '../styles';
 export declare type OptionValue = string | number;
@@ -7,25 +7,31 @@ export interface Option {
     value: OptionValue;
     disabled?: boolean;
 }
-export interface CheckedStatus {
-    checked: boolean;
-    indeterminate: boolean;
-    disabled?: boolean;
+export declare type Filter = (pattern: string, option: Option) => boolean;
+export interface RenderLabelProps {
+    option: Option;
+}
+export declare type TransferRenderTargetLabel = (props: RenderLabelProps) => VNodeChild;
+export declare type TransferRenderSourceLabel = (props: RenderLabelProps) => VNodeChild;
+export interface RenderListProps {
+    onCheck: (checkedValueList: OptionValue[]) => void;
+    checkedOptions: Option[];
+    pattern: string;
 }
-export declare type Filter = (pattern: string, option: Option, from: 'source' | 'target') => boolean;
+export declare type TransferRenderSourceList = (props: RenderListProps) => VNodeChild;
 export interface TransferInjection {
+    targetValueSetRef: Ref<Set<OptionValue>>;
     mergedClsPrefixRef: Ref<string>;
-    mergedSizeRef: Ref<'small' | 'medium' | 'large'>;
     disabledRef: Ref<boolean>;
     mergedThemeRef: Ref<MergedTheme<TransferTheme>>;
-    srcCheckedValuesRef: Ref<OptionValue[]>;
-    tgtCheckedValuesRef: Ref<OptionValue[]>;
-    srcOptsRef: Ref<Option[]>;
-    tgtOptsRef: Ref<Option[]>;
-    srcCheckedStatusRef: Ref<CheckedStatus>;
-    tgtCheckedStatusRef: Ref<CheckedStatus>;
-    handleSrcCheckboxClick: (checked: boolean, value: OptionValue) => void;
-    handleTgtCheckboxClick: (checked: boolean, value: OptionValue) => void;
+    targetOptionsRef: Ref<Option[]>;
+    canNotSelectAnythingRef: Ref<boolean>;
+    canBeClearedRef: Ref<boolean>;
+    allCheckedRef: Ref<boolean>;
+    srcOptionsLengthRef: Ref<number>;
+    handleItemCheck: (checked: boolean, value: OptionValue) => void;
+    renderSourceLabelRef: Ref<TransferRenderSourceLabel | undefined>;
+    renderTargetLabelRef: Ref<TransferRenderTargetLabel | undefined>;
 }
 export declare const transferInjectionKey: import("vue").InjectionKey<TransferInjection>;
 export declare type OnUpdateValue = (value: OptionValue[]) => void;

package/es/transfer/src/styles/index.cssr.js

@@ -1,71 +1,40 @@
-import { c, cB, cE, cM, cNotM } from '../../../_utils/cssr';
-import { fadeInTransition } from '../../../_styles/transitions/fade-in.cssr';
-const animation = c([c('@keyframes transfer-slide-in-from-left', `
- 0% {
- transform: translateX(-150%);
- }
- 100% {
- transform: translateX(0);
- }
- `), c('@keyframes transfer-slide-out-to-right', `
- 0% {
- transform: translateX(0);
- }
- 100% {
- transform: translateX(150%);
- }
- `), c('@keyframes transfer-slide-in-from-right', `
- 0% {
- transform: translateX(150%);
- }
- 100% {
- transform: translateX(0);
- }
- `), c('@keyframes transfer-slide-out-to-left', `
- 0% {
- transform: translateX(0);
- }
- 100% {
- transform: translateX(-150%);
- }
- `), c('@keyframes transfer-height-collapse', `
- 0% {
- max-height: var(--n-item-height);
- }
- 100% {
- max-height: 0;
- }
- `), c('@keyframes transfer-height-expand', `
- 0% {
- max-height: 0;
- }
- 100% {
- max-height: var(--n-item-height);
- }
- `)]);
-export default c([cB('transfer', `
- display: flex;
- width: var(--n-width);
+import { c, cB, cE, cM, cNotM } from '../../../_utils/cssr'; // --n-close-size
+// --n-close-icon-size
+// --n-close-color-hover
+// --n-close-color-pressed
+// --n-close-icon-color
+// --n-close-icon-color-hover
+// --n-close-icon-color-pressed
+
+export default cB('transfer', `
+ width: 100%;
  font-size: var(--n-font-size);
- height: 240px;
+ height: 300px;
  display: flex;
  flex-wrap: nowrap;
- `, [cB('transfer-icon', `
- color: var(--n-icon-color);
- transition: color .3s var(--n-bezier);
- `), cM('disabled', [cB('transfer-icon', {
-  color: 'var(--n-icon-color-disabled)'
-})]), cB('transfer-list', `
+ word-break: break-word;
+`, [cM('disabled', [cB('transfer-list', [cB('transfer-list-header', [cE('title', `
+ color: var(--n-header-text-color-disabled);
+ `), cE('extra', `
+ color: var(--n-header-extra-text-color-disabled);
+ `)])])]), cB('transfer-list', `
+ flex: 1;
+ min-width: 0;
  height: inherit;
  display: flex;
  flex-direction: column;
  background-clip: padding-box;
- width: calc(50% - 36px);
  position: relative;
  transition: background-color .3s var(--n-bezier);
- border-radius: var(--n-border-radius);
  background-color: var(--n-list-color);
- `, [cE('border', `
+ `, [cM('source', `
+ border-top-left-radius: var(--n-border-radius);
+ border-bottom-left-radius: var(--n-border-radius);
+ `, [cE('border', 'border-right: 1px solid var(--n-divider-color);')]), cM('target', `
+ border-top-right-radius: var(--n-border-radius);
+ border-bottom-right-radius: var(--n-border-radius);
+ `, [cE('border', 'border-left: none;')]), cE('border', `
+ padding: 0 12px;
  border: 1px solid var(--n-border-color);
  transition: border-color .3s var(--n-bezier);
  pointer-events: none;
@@ -76,36 +45,35 @@ export default c([cB('transfer', `
  top: 0;
  bottom: 0;
  `), cB('transfer-list-header', `
- height: calc(var(--n-item-height) + 4px);
+ min-height: var(--n-header-height);
  box-sizing: border-box;
  display: flex;
+ padding: 12px 12px 10px 12px;
  align-items: center;
  background-clip: padding-box;
  border-radius: inherit;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
- background-color: var(--n-header-color);
+ line-height: 1.5;
  transition:
  border-color .3s var(--n-bezier),
  background-color .3s var(--n-bezier);
- `, [cE('checkbox', `
- display: flex;
- align-items: center;
- position: relative;
- padding: 0 9px 0 14px;
- `), cE('header', `
+ `, [c('> *:not(:first-child)', `
+ margin-left: 8px;
+ `), cE('title', `
  flex: 1;
- line-height: 1;
+ min-width: 0;
+ line-height: 1.5;
+ font-size: var(--n-header-font-size);
  font-weight: var(--n-header-font-weight);
  transition: color .3s var(--n-bezier);
  color: var(--n-header-text-color);
- `, [cM('disabled', {
-  color: 'var(--n-header-text-color-disabled)'
-})]), cE('extra', `
+ `), cE('button', `
+ position: relative;
+ `), cE('extra', `
  transition: color .3s var(--n-bezier);
  font-size: var(--n-extra-font-size);
- justify-self: flex-end;
- margin-right: 14px;
+ margin-right: 0;
  white-space: nowrap;
  color: var(--n-header-extra-text-color);
  `)]), cB('transfer-list-body', `
@@ -119,13 +87,11 @@ export default c([cB('transfer', `
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  `, [cB('transfer-filter', `
- padding: 0 8px 8px 8px;
+ padding: 4px 12px 8px 12px;
  box-sizing: border-box;
- background-color: var(--n-header-color);
  transition:
  border-color .3s var(--n-bezier),
  background-color .3s var(--n-bezier);
- border-bottom: 1px solid var(--n-filter-divider-color);
  `), cB('transfer-list-flex-container', `
  flex: 1;
  position: relative;
@@ -136,80 +102,50 @@ export default c([cB('transfer', `
  top: 0;
  bottom: 0;
  height: unset;
- `, [cB('scrollbar-content', {
-  width: '100%'
-})]), cB('empty', `
+ `), cB('empty', `
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateY(-50%) translateX(-50%);
- `, [fadeInTransition()]), cB('transfer-list-content', `
+ `), cB('transfer-list-content', `
  padding: 0;
  margin: 0;
  position: relative;
- `, [cM('transition-disabled', [cB('transfer-list-item', {
-  animation: 'none !important'
-})]), cB('transfer-list-item', `
- height: var(--n-item-height);
- max-height: var(--n-item-height);
- transition:
- background-color .3s var(--n-bezier),
- color .3s var(--n-bezier);
- position: relative;
- cursor: pointer;
+ `, [cB('transfer-list-item', `
+ padding: 0 12px;
+ min-height: var(--n-item-height);
  display: flex;
  align-items: center;
  color: var(--n-item-text-color);
- `, [cNotM('disabled', [c('&:hover', {
-  backgroundColor: 'var(--n-item-color-pending)'
-})]), cE('extra', `
- text-overflow: ellipsis;
- overflow: hidden;
- white-space: nowrap;
- padding-right: 4px;
+ position: relative;
+ transition: color .3s var(--n-bezier);
+ `, [cE('background', `
+ position: absolute;
+ left: 4px;
+ right: 4px;
+ top: 0;
+ bottom: 0;
+ border-radius: var(--n-border-radius);
+ transition: background-color .3s var(--n-bezier);
  `), cE('checkbox', `
- display: flex;
- align-items: center;
  position: relative;
- padding: 0 9px 0 14px;
- `), cM('disabled', `
- cursor: not-allowed
- background-color: #0000;
+ margin-right: 8px;
+ `), cE('close', `
+ opacity: 0;
+ pointer-events: none;
+ position: relative;
+ transition:
+ opacity .3s var(--n-bezier),
+ background-color .3s var(--n-bezier),
+ color .3s var(--n-bezier);
+ `), cE('label', `
+ position: relative;
+ min-width: 0;
+ flex-grow: 1;
+ `), cM('source', 'cursor: pointer;'), cM('disabled', `
+ cursor: not-allowed;
  color: var(--n-item-text-color-disabled);
- `), cM('source', {
-  animationFillMode: 'forwards'
-}, [c('&.item-enter-active', `
- transform: translateX(150%);
- animation-duration: .25s, .25s;
- animation-timing-function: var(--n-bezier), var(--n-bezier-ease-out);
- animation-delay: 0s, .25s;
- animation-name: transfer-height-expand, transfer-slide-in-from-right;
- `), c('&.item-leave-active', `
- transform: translateX(-150%);
- animation-duration: .25s, .25s;
- animation-timing-function: var(--n-bezier), var(--n-bezier-ease-in);
- animation-delay: .25s, 0s;
- animation-name: transfer-height-collapse, transfer-slide-out-to-right;
- `)]), cM('target', {
-  animationFillMode: 'forwards'
-}, [c('&.item-enter-active', `
- transform: translateX(-150%);
- animation-duration: .25s, .25s;
- animation-timing-function: var(--n-bezier), var(--n-bezier-ease-out);
- animation-delay: 0s, .25s;
- animation-name: transfer-height-expand, transfer-slide-in-from-left;
- `), c('&.item-leave-active', `
- transform: translateX(150%);
- animation-duration: .25s, .25s;
- animation-timing-function: var(--n-bezier), var(--n-bezier-ease-in);
- animation-delay: .25s, 0s;
- animation-name: transfer-height-collapse, transfer-slide-out-to-left;
- `)])])])])])]), cB('transfer-gap', {
-  width: '72px',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  flexDirection: 'column'
-}), cB('button', [c('&:first-child', {
-  marginBottom: '12px'
-})])]), animation]);
+ `), cNotM('disabled', [c('&:hover', [cE('background', 'background-color: var(--n-item-color-pending);'), cE('close', `
+ opacity: 1;
+ pointer-events: all;
+ `)])])])])])])])]);

package/es/transfer/src/use-transfer-data.d.ts

@@ -1,5 +1,4 @@
-import { Ref } from 'vue';
-import type { Option, OptionValue, Filter, CheckedStatus } from './interface';
+import type { Option, OptionValue, Filter } from './interface';
 interface UseTransferDataProps {
     defaultValue: OptionValue[] | null;
     value?: OptionValue[] | null;
@@ -7,35 +6,18 @@ interface UseTransferDataProps {
     filterable: boolean;
     filter: Filter;
 }
-export declare function useTransferData(props: UseTransferDataProps, mergedDisabledRef: Ref<boolean>): {
-    uncontrolledValue: Ref<OptionValue[] | null>;
-    mergedValue: import("vue").ComputedRef<OptionValue[] | null>;
-    avlSrcValueSet: import("vue").ComputedRef<Set<OptionValue>>;
-    avlTgtValueSet: import("vue").ComputedRef<Set<any>>;
-    tgtOpts: import("vue").ComputedRef<any[]>;
-    srcOpts: import("vue").ComputedRef<Option[]>;
-    filteredSrcOpts: import("vue").ComputedRef<Option[]>;
-    filteredTgtOpts: import("vue").ComputedRef<any[]>;
-    srcCheckedValues: Ref<OptionValue[]>;
-    tgtCheckedValues: Ref<OptionValue[]>;
-    srcCheckedStatus: import("vue").ComputedRef<CheckedStatus>;
-    tgtCheckedStatus: import("vue").ComputedRef<{
-        checked: boolean;
-        indeterminate: boolean;
-        disabled: boolean;
-    } | {
-        checked: boolean;
-        indeterminate: boolean;
-        disabled?: undefined;
-    }>;
-    srcPattern: Ref<string>;
-    tgtPattern: Ref<string>;
-    isInputing: Ref<boolean>;
-    fromButtonDisabled: import("vue").ComputedRef<boolean>;
-    toButtonDisabled: import("vue").ComputedRef<boolean>;
-    handleInputFocus: () => void;
-    handleInputBlur: () => void;
-    handleTgtFilterUpdateValue: (value: string | null) => void;
+export declare function useTransferData(props: UseTransferDataProps): {
+    uncontrolledValueRef: import("vue").Ref<OptionValue[] | null>;
+    mergedValueRef: import("vue").ComputedRef<OptionValue[] | null>;
+    targetValueSetRef: import("vue").ComputedRef<Set<OptionValue>>;
+    valueSetForSelectAllRef: import("vue").ComputedRef<Set<OptionValue>>;
+    valueSetForUnselectAllRef: import("vue").ComputedRef<Set<OptionValue>>;
+    targetOptionsRef: import("vue").ComputedRef<Option[]>;
+    filteredSrcOptionsRef: import("vue").ComputedRef<Option[]>;
+    canNotSelectAnythingRef: import("vue").ComputedRef<boolean>;
+    canBeClearedRef: import("vue").ComputedRef<boolean>;
+    allCheckedRef: import("vue").ComputedRef<boolean>;
+    srcPatternRef: import("vue").Ref<string>;
     handleSrcFilterUpdateValue: (value: string | null) => void;
 };
 export {};