naive-ui 2.30.7 → 2.32.0

package/es/transfer/src/use-transfer-data.js

@@ -1,145 +1,69 @@
 import { ref, computed, toRef } from 'vue';
-import { useMemo, useMergedState } from 'vooks';
+import { useMergedState } from 'vooks';
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
-export function useTransferData(props, mergedDisabledRef) {
+export function useTransferData(props) {
     const uncontrolledValueRef = ref(props.defaultValue);
-    const controlledValueRef = toRef(props, 'value');
-    const mergedValueRef = useMergedState(controlledValueRef, uncontrolledValueRef);
-    const optMapRef = computed(() => {
+    const mergedValueRef = useMergedState(toRef(props, 'value'), uncontrolledValueRef);
+    const optionsMapRef = computed(() => {
         const map = new Map();
         (props.options || []).forEach((opt) => map.set(opt.value, opt));
         return map;
     });
-    const tgtValueSetRef = computed(() => new Set(mergedValueRef.value || []));
-    const srcOptsRef = computed(() => props.options.filter((option) => !tgtValueSetRef.value.has(option.value)));
-    const tgtOptsRef = computed(() => {
-        const optMap = optMapRef.value;
-        return (mergedValueRef.value || []).map((v) => optMap.get(v));
+    const targetValueSetRef = computed(() => new Set(mergedValueRef.value || []));
+    const targetOptionsRef = computed(() => {
+        const optionMap = optionsMapRef.value;
+        return (mergedValueRef.value || []).map((v) => optionMap.get(v));
     });
     const srcPatternRef = ref('');
-    const tgtPatternRef = ref('');
-    const filteredSrcOptsRef = computed(() => {
+    const filteredSrcOptionsRef = computed(() => {
         if (!props.filterable)
-            return srcOptsRef.value;
+            return props.options;
         const { filter } = props;
-        return srcOptsRef.value.filter((opt) => filter(srcPatternRef.value, opt, 'source'));
+        return props.options.filter((opt) => filter(srcPatternRef.value, opt));
     });
-    const filteredTgtOptsRef = computed(() => {
-        if (!props.filterable)
-            return tgtOptsRef.value;
-        const { filter } = props;
-        return tgtOptsRef.value.filter((opt) => filter(tgtPatternRef.value, opt, 'target'));
+    const mergedValueSetRef = computed(() => {
+        const { value } = mergedValueRef;
+        if (value === null)
+            return new Set();
+        return new Set(value);
     });
-    const avlSrcValueSetRef = computed(() => new Set(filteredSrcOptsRef.value
-        .filter((opt) => !opt.disabled)
-        .map((opt) => opt.value)));
-    const avlTgtValueSetRef = computed(() => new Set(filteredTgtOptsRef.value
-        .filter((opt) => !opt.disabled)
-        .map((opt) => opt.value)));
-    const srcCheckedValuesRef = ref([]);
-    const tgtCheckedValuesRef = ref([]);
-    const srcCheckedStatusRef = computed(() => {
-        const srcCheckedLength = srcCheckedValuesRef.value.filter((v) => avlSrcValueSetRef.value.has(v)).length;
-        const avlValueCount = avlSrcValueSetRef.value.size;
-        if (avlValueCount === 0) {
-            return {
-                checked: false,
-                indeterminate: false,
-                disabled: true
-            };
-        }
-        else if (srcCheckedLength === 0) {
-            return {
-                checked: false,
-                indeterminate: false
-            };
-        }
-        else if (srcCheckedLength === avlValueCount) {
-            return {
-                checked: true,
-                indeterminate: false
-            };
-        }
-        else {
-            return {
-                checked: false,
-                indeterminate: true
-            };
-        }
+    const valueSetForSelectAllRef = computed(() => {
+        const mergedValueSet = mergedValueSetRef.value;
+        return new Set(filteredSrcOptionsRef.value
+            .filter((option) => !option.disabled || mergedValueSet.has(option.value))
+            .map((option) => option.value));
     });
-    const tgtCheckedStatusRef = computed(() => {
-        const tgtCheckedLength = tgtCheckedValuesRef.value.filter((v) => avlTgtValueSetRef.value.has(v)).length;
-        const avlValueCount = avlTgtValueSetRef.value.size;
-        if (avlValueCount === 0) {
-            return {
-                checked: false,
-                indeterminate: false,
-                disabled: true
-            };
-        }
-        else if (tgtCheckedLength === 0) {
-            return {
-                checked: false,
-                indeterminate: false
-            };
-        }
-        else if (tgtCheckedLength === avlValueCount) {
-            return {
-                checked: true,
-                indeterminate: false
-            };
-        }
-        else {
-            return {
-                checked: false,
-                indeterminate: true
-            };
-        }
+    const valueSetForUnselectAllRef = computed(() => new Set(targetOptionsRef.value
+        .filter((option) => option.disabled)
+        .map((option) => option.value)));
+    const canNotSelectAnythingRef = computed(() => {
+        return filteredSrcOptionsRef.value.every((option) => option.disabled);
     });
-    const fromButtonDisabledRef = useMemo(() => {
-        if (mergedDisabledRef.value)
-            return true;
-        return tgtCheckedValuesRef.value.length === 0;
+    const allCheckedRef = computed(() => {
+        if (!filteredSrcOptionsRef.value.length) {
+            return false;
+        }
+        const mergedValueSet = mergedValueSetRef.value;
+        return filteredSrcOptionsRef.value.every((option) => option.disabled || mergedValueSet.has(option.value));
     });
-    const toButtonDisabledRef = useMemo(() => {
-        if (mergedDisabledRef.value)
-            return true;
-        return srcCheckedValuesRef.value.length === 0;
+    const canBeClearedRef = computed(() => {
+        return targetOptionsRef.value.some((option) => !option.disabled);
     });
-    const isInputingRef = ref(false);
-    function handleInputFocus() {
-        isInputingRef.value = true;
-    }
-    function handleInputBlur() {
-        isInputingRef.value = false;
-    }
     function handleSrcFilterUpdateValue(value) {
         srcPatternRef.value = value !== null && value !== void 0 ? value : '';
     }
-    function handleTgtFilterUpdateValue(value) {
-        tgtPatternRef.value = value !== null && value !== void 0 ? value : '';
-    }
     return {
-        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,
+        uncontrolledValueRef,
+        mergedValueRef,
+        targetValueSetRef,
+        valueSetForSelectAllRef,
+        valueSetForUnselectAllRef,
+        targetOptionsRef,
+        filteredSrcOptionsRef,
+        canNotSelectAnythingRef,
+        canBeClearedRef,
+        allCheckedRef,
+        srcPatternRef,
         handleSrcFilterUpdateValue
     };
 }

package/es/transfer/styles/_common.d.ts

@@ -1,5 +1,14 @@
 declare const _default: {
-    extraFontSize: string;
-    width: string;
+    extraFontSizeSmall: string;
+    extraFontSizeMedium: string;
+    extraFontSizeLarge: string;
+    titleFontSizeSmall: string;
+    titleFontSizeMedium: string;
+    titleFontSizeLarge: string;
+    closeSize: string;
+    closeIconSize: string;
+    headerHeightSmall: string;
+    headerHeightMedium: string;
+    headerHeightLarge: string;
 };
 export default _default;

package/es/transfer/styles/_common.js

@@ -1,4 +1,13 @@
 export default {
-    extraFontSize: '12px',
-    width: '440px'
+    extraFontSizeSmall: '12px',
+    extraFontSizeMedium: '12px',
+    extraFontSizeLarge: '14px',
+    titleFontSizeSmall: '14px',
+    titleFontSizeMedium: '16px',
+    titleFontSizeLarge: '16px',
+    closeSize: '20px',
+    closeIconSize: '16px',
+    headerHeightSmall: '44px',
+    headerHeightMedium: '44px',
+    headerHeightLarge: '50px'
 };

package/es/transfer/styles/dark.js

@@ -16,12 +16,16 @@ const transferDark = {
         Button: buttonDark
     },
     self(vars) {
-        const { iconColorDisabled, iconColor, fontWeight, fontSizeLarge, fontSizeMedium, fontSizeSmall, heightLarge, heightMedium, heightSmall, borderRadius, inputColor, tableHeaderColor, textColor1, textColorDisabled, textColor2, hoverColor } = vars;
-        return Object.assign(Object.assign({}, commonVariables), { itemHeightSmall: heightSmall, itemHeightMedium: heightMedium, itemHeightLarge: heightLarge, fontSizeSmall,
+        const { fontWeight, fontSizeLarge, fontSizeMedium, fontSizeSmall, heightLarge, heightMedium, borderRadius, inputColor, tableHeaderColor, textColor1, textColorDisabled, textColor2, textColor3, hoverColor, closeColorHover, closeColorPressed, closeIconColor, closeIconColorHover, closeIconColorPressed, dividerColor } = vars;
+        return Object.assign(Object.assign({}, commonVariables), { itemHeightSmall: heightMedium, itemHeightMedium: heightMedium, itemHeightLarge: heightLarge, fontSizeSmall,
             fontSizeMedium,
             fontSizeLarge,
-            borderRadius, borderColor: '#0000', listColor: inputColor, headerColor: tableHeaderColor, titleTextColor: textColor1, titleTextColorDisabled: textColorDisabled, extraTextColor: textColor2, filterDividerColor: '#0000', itemTextColor: textColor2, itemTextColorDisabled: textColorDisabled, itemColorPending: hoverColor, titleFontWeight: fontWeight, iconColor,
-            iconColorDisabled });
+            borderRadius,
+            dividerColor, borderColor: '#0000', listColor: inputColor, headerColor: tableHeaderColor, titleTextColor: textColor1, titleTextColorDisabled: textColorDisabled, extraTextColor: textColor3, extraTextColorDisabled: textColorDisabled, itemTextColor: textColor2, itemTextColorDisabled: textColorDisabled, itemColorPending: hoverColor, titleFontWeight: fontWeight, closeColorHover,
+            closeColorPressed,
+            closeIconColor,
+            closeIconColorHover,
+            closeIconColorPressed });
     }
 };
 export default transferDark;

package/es/transfer/styles/light.d.ts

@@ -7,21 +7,34 @@ declare const self: (vars: ThemeCommonVars) => {
     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;
 };
 export declare type TransferThemeVars = ReturnType<typeof self>;
 declare const transferLight: import("../../_mixins").Theme<"Transfer", {
@@ -32,21 +45,34 @@ declare const transferLight: import("../../_mixins").Theme<"Transfer", {
     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;
 }, {
     Checkbox: import("../../_mixins").Theme<"Checkbox", {
         labelLineHeight: string;

package/es/transfer/styles/light.js

@@ -8,13 +8,15 @@ import { emptyLight } from '../../empty/styles';
 import { buttonLight } from '../../button/styles';
 import { createTheme } from '../../_mixins';
 const self = (vars) => {
-    const { fontWeight, iconColorDisabled, iconColor, fontSizeLarge, fontSizeMedium, fontSizeSmall, heightLarge, heightMedium, heightSmall, borderRadius, cardColor, tableHeaderColor, textColor1, textColorDisabled, textColor2, borderColor, hoverColor } = vars;
-    return Object.assign(Object.assign({}, commonVariables), { itemHeightSmall: heightSmall, itemHeightMedium: heightMedium, itemHeightLarge: heightLarge, fontSizeSmall,
+    const { fontWeight, fontSizeLarge, fontSizeMedium, fontSizeSmall, heightLarge, heightMedium, borderRadius, cardColor, tableHeaderColor, textColor1, textColorDisabled, textColor2, textColor3, borderColor, hoverColor, closeColorHover, closeColorPressed, closeIconColor, closeIconColorHover, closeIconColorPressed } = vars;
+    return Object.assign(Object.assign({}, commonVariables), { itemHeightSmall: heightMedium, itemHeightMedium: heightMedium, itemHeightLarge: heightLarge, fontSizeSmall,
         fontSizeMedium,
         fontSizeLarge,
-        borderRadius,
-        borderColor, listColor: cardColor, headerColor: composite(cardColor, tableHeaderColor), titleTextColor: textColor1, titleTextColorDisabled: textColorDisabled, extraTextColor: textColor2, filterDividerColor: borderColor, itemTextColor: textColor2, itemTextColorDisabled: textColorDisabled, itemColorPending: hoverColor, titleFontWeight: fontWeight, iconColor,
-        iconColorDisabled });
+        borderRadius, dividerColor: borderColor, borderColor, listColor: cardColor, headerColor: composite(cardColor, tableHeaderColor), titleTextColor: textColor1, titleTextColorDisabled: textColorDisabled, extraTextColor: textColor3, extraTextColorDisabled: textColorDisabled, itemTextColor: textColor2, itemTextColorDisabled: textColorDisabled, itemColorPending: hoverColor, titleFontWeight: fontWeight, closeColorHover,
+        closeColorPressed,
+        closeIconColor,
+        closeIconColorHover,
+        closeIconColorPressed });
 };
 const transferLight = createTheme({
     name: 'Transfer',

package/es/tree/index.d.ts

@@ -1,3 +1,3 @@
-export { default as NTree } from './src/Tree';
+export { default as NTree, treeProps } from './src/Tree';
 export type { TreeProps } from './src/Tree';
 export type { TreeOption, TreeDragInfo, TreeDropInfo } from './src/interface';

package/es/tree/index.js

@@ -1 +1 @@
-export { default as NTree } from './src/Tree';
+export { default as NTree, treeProps } from './src/Tree';

package/es/tree/src/Tree.d.ts

@@ -1,7 +1,7 @@
 import { PropType, VNodeChild } from 'vue';
 import { TreeMateOptions, CheckStrategy } from 'treemate';
 import type { ExtractPublicPropTypes, MaybeArray } from '../../_utils';
-import type { TreeDragInfo, TreeDropInfo, TreeOptions, Key, TreeOption, AllowDrop, RenderSwitcherIcon, TreeNodeProps } from './interface';
+import type { TreeDragInfo, TreeDropInfo, TreeOptions, Key, TreeOption, AllowDrop, RenderSwitcherIcon, TreeNodeProps, CheckOnClick } from './interface';
 import { defaultAllowDrop } from './dnd';
 export declare function createTreeMateOptions<T>(keyField: string, childrenField: string): TreeMateOptions<T, T, T>;
 export declare type OnUpdateKeys = (value: Array<string & number>, option: Array<TreeOption | null>) => void;
@@ -35,7 +35,7 @@ export declare const treeSharedProps: {
     readonly onUpdateExpandedKeys: PropType<MaybeArray<OnUpdateKeys>>;
     readonly 'onUpdate:expandedKeys': PropType<MaybeArray<OnUpdateKeys>>;
 };
-declare const treeProps: {
+export declare const treeProps: {
     readonly internalTreeSelect: BooleanConstructor;
     readonly internalScrollable: BooleanConstructor;
     readonly internalScrollablePadding: StringConstructor;
@@ -84,6 +84,7 @@ declare const treeProps: {
     readonly 'onUpdate:indeterminateKeys': PropType<MaybeArray<OnUpdateKeys>>;
     readonly onUpdateExpandedKeys: PropType<MaybeArray<OnUpdateKeys>>;
     readonly 'onUpdate:expandedKeys': PropType<MaybeArray<OnUpdateKeys>>;
+    readonly accordion: BooleanConstructor;
     readonly showIrrelevantNodes: {
         readonly type: BooleanConstructor;
         readonly default: true;
@@ -97,6 +98,10 @@ declare const treeProps: {
         readonly default: true;
     };
     readonly expandOnClick: BooleanConstructor;
+    readonly checkOnClick: {
+        readonly type: PropType<boolean | CheckOnClick>;
+        readonly default: false;
+    };
     readonly cancelable: {
         readonly type: BooleanConstructor;
         readonly default: true;
@@ -387,6 +392,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly 'onUpdate:indeterminateKeys': PropType<MaybeArray<OnUpdateKeys>>;
     readonly onUpdateExpandedKeys: PropType<MaybeArray<OnUpdateKeys>>;
     readonly 'onUpdate:expandedKeys': PropType<MaybeArray<OnUpdateKeys>>;
+    readonly accordion: BooleanConstructor;
     readonly showIrrelevantNodes: {
         readonly type: BooleanConstructor;
         readonly default: true;
@@ -400,6 +406,10 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: true;
     };
     readonly expandOnClick: BooleanConstructor;
+    readonly checkOnClick: {
+        readonly type: PropType<boolean | CheckOnClick>;
+        readonly default: false;
+    };
     readonly cancelable: {
         readonly type: BooleanConstructor;
         readonly default: true;
@@ -825,6 +835,7 @@ declare const _default: import("vue").DefineComponent<{
             } | undefined;
         };
     }>;
+    rtlEnabled: import("vue").Ref<import("../../config-provider/src/internal-interface").RtlItem | undefined> | undefined;
     fNodes: import("vue").ComputedRef<({
         key: import("treemate").Key;
         rawNode: {
@@ -1162,6 +1173,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly 'onUpdate:indeterminateKeys': PropType<MaybeArray<OnUpdateKeys>>;
     readonly onUpdateExpandedKeys: PropType<MaybeArray<OnUpdateKeys>>;
     readonly 'onUpdate:expandedKeys': PropType<MaybeArray<OnUpdateKeys>>;
+    readonly accordion: BooleanConstructor;
     readonly showIrrelevantNodes: {
         readonly type: BooleanConstructor;
         readonly default: true;
@@ -1175,6 +1187,10 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: true;
     };
     readonly expandOnClick: BooleanConstructor;
+    readonly checkOnClick: {
+        readonly type: PropType<boolean | CheckOnClick>;
+        readonly default: false;
+    };
     readonly cancelable: {
         readonly type: BooleanConstructor;
         readonly default: true;
@@ -1434,6 +1450,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly internalScrollable: boolean;
     readonly checkStrategy: CheckStrategy;
     readonly leafOnly: boolean;
+    readonly accordion: boolean;
     readonly defaultExpandedKeys: Key[];
     readonly selectable: boolean;
     readonly expandOnClick: boolean;
@@ -1447,6 +1464,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly internalFocusable: boolean;
     readonly showIrrelevantNodes: boolean;
     readonly expandOnDragenter: boolean;
+    readonly checkOnClick: boolean | CheckOnClick;
     readonly blockNode: boolean;
     readonly allowDrop: AllowDrop;
 }>;