naive-ui 2.30.8 → 2.31.0

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;
@@ -1162,6 +1172,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 +1186,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 +1449,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 +1463,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;
 }>;

package/es/tree/src/Tree.js

@@ -71,13 +71,16 @@ export const treeSharedProps = {
     onUpdateExpandedKeys: [Function, Array],
     'onUpdate:expandedKeys': [Function, Array]
 };
-const treeProps = Object.assign(Object.assign(Object.assign(Object.assign({}, useTheme.props), { showIrrelevantNodes: { type: Boolean, default: true }, data: {
+export const treeProps = Object.assign(Object.assign(Object.assign(Object.assign({}, useTheme.props), { accordion: Boolean, showIrrelevantNodes: { type: Boolean, default: true }, data: {
         type: Array,
         default: () => []
     }, expandOnDragenter: {
         type: Boolean,
         default: true
-    }, expandOnClick: Boolean, cancelable: {
+    }, expandOnClick: Boolean, checkOnClick: {
+        type: [Boolean, Function],
+        default: false
+    }, cancelable: {
         type: Boolean,
         default: true
     }, checkable: Boolean, draggable: Boolean, blockNode: Boolean, blockLine: Boolean, disabled: Boolean, checkedKeys: Array, defaultCheckedKeys: {
@@ -362,7 +365,7 @@ export default defineComponent({
         // animation in progress
         const aipRef = ref(false);
         // animation flattened nodes
-        const afNodeRef = ref([]);
+        const afNodesRef = ref([]);
         // Note: Since the virtual list depends on min height, if there's a node
         // whose height starts from 0, the virtual list will have a wrong height
         // during animation. This will seldom cause wired scrollbar status. It is
@@ -391,8 +394,7 @@ export default defineComponent({
                     removedKey = expandedKey;
                 }
             }
-            if ((addedKey !== null && removedKey !== null) ||
-                (addedKey === null && removedKey === null)) {
+            if (addedKey === null && removedKey === null) {
                 // 1. multi action, not triggered by click
                 // 2. no action, don't know what happened
                 return;
@@ -400,16 +402,29 @@ export default defineComponent({
             const { virtualScroll } = props;
             const viewportHeight = (virtualScroll ? virtualListInstRef.value.listElRef : selfElRef.value).offsetHeight;
             const viewportItemCount = Math.ceil(viewportHeight / ITEM_SIZE) + 1;
+            // play add animation
+            let baseExpandedKeys;
             if (addedKey !== null) {
-                // play add animation
-                aipRef.value = true;
-                afNodeRef.value = displayTreeMateRef.value.getFlattenedNodes(prevValue);
-                const expandedNodeIndex = afNodeRef.value.findIndex((node) => node.key === addedKey);
+                baseExpandedKeys = prevValue;
+            }
+            if (removedKey !== null) {
+                if (baseExpandedKeys === undefined) {
+                    baseExpandedKeys = value;
+                }
+                else {
+                    baseExpandedKeys = baseExpandedKeys.filter((key) => key !== removedKey);
+                }
+            }
+            aipRef.value = true;
+            afNodesRef.value =
+                displayTreeMateRef.value.getFlattenedNodes(baseExpandedKeys);
+            if (addedKey !== null) {
+                const expandedNodeIndex = afNodesRef.value.findIndex((node) => node.key === addedKey);
                 if (~expandedNodeIndex) {
                     const expandedChildren = flatten(
                     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                    afNodeRef.value[expandedNodeIndex].children, value);
-                    afNodeRef.value.splice(expandedNodeIndex + 1, 0, {
+                    afNodesRef.value[expandedNodeIndex].children, value);
+                    afNodesRef.value.splice(expandedNodeIndex + 1, 0, {
                         __motion: true,
                         mode: 'expand',
                         height: virtualScroll
@@ -422,10 +437,9 @@ export default defineComponent({
                 }
             }
             if (removedKey !== null) {
-                afNodeRef.value = displayTreeMateRef.value.getFlattenedNodes(value);
-                const collapsedNodeIndex = afNodeRef.value.findIndex((node) => node.key === removedKey);
+                const collapsedNodeIndex = afNodesRef.value.findIndex((node) => node.key === removedKey);
                 if (~collapsedNodeIndex) {
-                    const collapsedNodeChildren = afNodeRef.value[collapsedNodeIndex].children;
+                    const collapsedNodeChildren = afNodesRef.value[collapsedNodeIndex].children;
                     // Sometime the whole tree is change, remove a key doesn't mean it is collapsed,
                     // but maybe children removed
                     if (!collapsedNodeChildren)
@@ -433,7 +447,7 @@ export default defineComponent({
                     // play remove animation
                     aipRef.value = true;
                     const collapsedChildren = flatten(collapsedNodeChildren, value);
-                    afNodeRef.value.splice(collapsedNodeIndex + 1, 0, {
+                    afNodesRef.value.splice(collapsedNodeIndex + 1, 0, {
                         __motion: true,
                         mode: 'collapse',
                         height: virtualScroll
@@ -451,7 +465,7 @@ export default defineComponent({
         });
         const mergedFNodesRef = computed(() => {
             if (aipRef.value)
-                return afNodeRef.value;
+                return afNodesRef.value;
             else
                 return fNodesRef.value;
         });
@@ -581,9 +595,10 @@ export default defineComponent({
             doUpdateCheckedKeys(checkedKeys, getOptionsByKeys(checkedKeys));
             doUpdateIndeterminateKeys(indeterminateKeys, getOptionsByKeys(indeterminateKeys));
         }
-        function toggleExpand(key) {
+        function toggleExpand(node) {
             if (props.disabled)
                 return;
+            const { key } = node;
             const { value: mergedExpandedKeys } = mergedExpandedKeysRef;
             const index = mergedExpandedKeys.findIndex((expandNodeId) => expandNodeId === key);
             if (~index) {
@@ -596,14 +611,24 @@ export default defineComponent({
                 if (!nodeToBeExpanded || nodeToBeExpanded.isLeaf) {
                     return;
                 }
-                const nextKeys = mergedExpandedKeys.concat(key);
+                let nextKeys;
+                if (props.accordion) {
+                    const siblingKeySet = new Set(node.siblings.map(({ key }) => key));
+                    nextKeys = mergedExpandedKeys.filter((expandedKey) => {
+                        return !siblingKeySet.has(expandedKey);
+                    });
+                    nextKeys.push(key);
+                }
+                else {
+                    nextKeys = mergedExpandedKeys.concat(key);
+                }
                 doUpdateExpandedKeys(nextKeys, getOptionsByKeys(nextKeys));
             }
         }
         function handleSwitcherClick(node) {
             if (props.disabled || aipRef.value)
                 return;
-            toggleExpand(node.key);
+            toggleExpand(node);
         }
         function handleSelect(node) {
             if (props.disabled || !props.selectable) {
@@ -1015,6 +1040,7 @@ export default defineComponent({
             blockLineRef: toRef(props, 'blockLine'),
             indentRef: toRef(props, 'indent'),
             cascadeRef: toRef(props, 'cascade'),
+            checkOnClickRef: toRef(props, 'checkOnClick'),
             checkboxPlacementRef: props.checkboxPlacement,
             droppingMouseNodeRef,
             droppingNodeParentRef,

package/es/tree/src/TreeNode.js

@@ -22,7 +22,7 @@ const TreeNode = defineComponent({
     setup(props) {
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         const NTree = inject(treeInjectionKey);
-        const { droppingNodeParentRef, droppingMouseNodeRef, draggingNodeRef, droppingPositionRef, droppingOffsetLevelRef, nodePropsRef, indentRef, blockLineRef, checkboxPlacementRef } = NTree;
+        const { droppingNodeParentRef, droppingMouseNodeRef, draggingNodeRef, droppingPositionRef, droppingOffsetLevelRef, nodePropsRef, indentRef, blockLineRef, checkboxPlacementRef, checkOnClickRef } = NTree;
         const disabledRef = computed(() => NTree.disabledRef.value || props.tmNode.disabled);
         const resolvedNodePropsRef = computed(() => {
             const { value: nodeProps } = nodePropsRef;
@@ -69,6 +69,21 @@ const TreeNode = defineComponent({
                     (NTree.multipleRef.value && NTree.cascadeRef.value) ||
                     props.tmNode.isLeaf
                 : true));
+        const checkableRef = useMemo(() => NTree.checkableRef.value &&
+            (NTree.cascadeRef.value ||
+                NTree.mergedCheckStrategyRef.value !== 'child' ||
+                props.tmNode.isLeaf));
+        const checkedRef = useMemo(() => NTree.displayedCheckedKeysRef.value.includes(props.tmNode.key));
+        const mergedCheckOnClickRef = useMemo(() => {
+            const { value: checkable } = checkableRef;
+            if (!checkable)
+                return false;
+            const { value: checkOnClick } = checkOnClickRef;
+            if (typeof checkOnClick === 'boolean') {
+                return checkOnClick;
+            }
+            return checkOnClick(props.tmNode.rawNode);
+        });
         function _handleClick(e) {
             const { value: expandOnClick } = NTree.expandOnClickRef;
             const { value: selectable } = selectableRef;
@@ -83,6 +98,9 @@ const TreeNode = defineComponent({
             if (expandOnClick && !tmNode.isLeaf) {
                 handleSwitcherClick();
             }
+            if (mergedCheckOnClickRef.value) {
+                handleCheck(!checkedRef.value);
+            }
         }
         function handleContentClick(e) {
             var _a, _b;
@@ -186,15 +204,12 @@ const TreeNode = defineComponent({
                 var _a;
                 return (_a = NTree.highlightKeySetRef.value) === null || _a === void 0 ? void 0 : _a.has(props.tmNode.key);
             }),
-            checked: useMemo(() => NTree.displayedCheckedKeysRef.value.includes(props.tmNode.key)),
+            checked: checkedRef,
             indeterminate: useMemo(() => NTree.displayedIndeterminateKeysRef.value.includes(props.tmNode.key)),
             selected: useMemo(() => NTree.mergedSelectedKeysRef.value.includes(props.tmNode.key)),
             expanded: useMemo(() => NTree.mergedExpandedKeysRef.value.includes(props.tmNode.key)),
             disabled: disabledRef,
-            checkable: computed(() => NTree.checkableRef.value &&
-                (NTree.cascadeRef.value ||
-                    NTree.mergedCheckStrategyRef.value !== 'child' ||
-                    props.tmNode.isLeaf)),
+            checkable: checkableRef,
             checkboxDisabled: computed(() => !!props.tmNode.rawNode.checkboxDisabled),
             selectable: selectableRef,
             expandOnClick: NTree.expandOnClickRef,

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

@@ -55,6 +55,7 @@ export interface InternalDropInfo {
     dropPosition: DropPosition;
 }
 export declare type RenderSwitcherIcon = () => VNodeChild;
+export declare type CheckOnClick = (option: TreeOption) => boolean;
 export interface TreeInjection {
     loadingKeysRef: Ref<Set<Key>>;
     highlightKeySetRef: Ref<Set<Key> | null>;
@@ -91,6 +92,7 @@ export interface TreeInjection {
     multipleRef: Ref<boolean>;
     checkboxPlacementRef: 'left' | 'right';
     internalTreeSelect: boolean;
+    checkOnClickRef: Ref<boolean | CheckOnClick>;
     handleSwitcherClick: (node: TreeNode<TreeOption>) => void;
     handleSelect: (node: TreeNode<TreeOption>) => void;
     handleCheck: (node: TreeNode<TreeOption>, checked: boolean) => void;

package/es/tree-select/index.d.ts

@@ -1,3 +1,3 @@
-export { default as NTreeSelect } from './src/TreeSelect';
+export { default as NTreeSelect, treeSelectProps } from './src/TreeSelect';
 export type { TreeSelectProps } from './src/TreeSelect';
 export type { TreeSelectOption, TreeSelectNodeProps, TreeSelectRenderLabel, TreeSelectRenderPrefix, TreeSelectRenderSuffix, TreeSelectRenderTag } from './src/interface';

package/es/tree-select/index.js

@@ -1 +1 @@
-export { default as NTreeSelect } from './src/TreeSelect';
+export { default as NTreeSelect, treeSelectProps } from './src/TreeSelect';

package/es/tree-select/src/TreeSelect.d.ts

@@ -7,7 +7,7 @@ import type { SelectBaseOption, SelectOption } from '../../select/src/interface'
 import { ExtractPublicPropTypes, MaybeArray } from '../../_utils';
 import type { OnUpdateValue, TreeSelectNodeProps, TreeSelectOption, TreeSelectRenderTag, Value } from './interface';
 declare type OnLoad = (node: TreeSelectOption) => Promise<void>;
-declare const props: {
+export declare const treeSelectProps: {
     readonly renderLabel: PropType<import("./interface").TreeSelectRenderTreePart>;
     readonly renderPrefix: PropType<import("./interface").TreeSelectRenderTreePart>;
     readonly renderSuffix: PropType<import("./interface").TreeSelectRenderTreePart>;
@@ -569,7 +569,7 @@ declare const props: {
         }>;
     }>>>;
 };
-export declare type TreeSelectProps = ExtractPublicPropTypes<typeof props>;
+export declare type TreeSelectProps = ExtractPublicPropTypes<typeof treeSelectProps>;
 declare const _default: import("vue").DefineComponent<{
     readonly renderLabel: PropType<import("./interface").TreeSelectRenderTreePart>;
     readonly renderPrefix: PropType<import("./interface").TreeSelectRenderTreePart>;

package/es/tree-select/src/TreeSelect.js

@@ -14,7 +14,7 @@ import { treeSelectLight } from '../styles';
 import { treeSelectInjectionKey } from './interface';
 import { treeOption2SelectOption, treeOption2SelectOptionWithPath } from './utils';
 import style from './styles/index.cssr';
-const props = Object.assign(Object.assign(Object.assign(Object.assign({}, useTheme.props), { bordered: {
+export const treeSelectProps = Object.assign(Object.assign(Object.assign(Object.assign({}, useTheme.props), { bordered: {
         type: Boolean,
         default: true
     }, cascade: Boolean, checkable: Boolean, clearable: Boolean, clearFilterAfterSelect: {
@@ -54,7 +54,7 @@ const props = Object.assign(Object.assign(Object.assign(Object.assign({}, useThe
     leafOnly: Boolean });
 export default defineComponent({
     name: 'TreeSelect',
-    props,
+    props: treeSelectProps,
     setup(props) {
         if (process.env.NODE_ENV !== 'production') {
             watchEffect(() => {

package/es/typography/index.d.ts

@@ -1,21 +1,22 @@
 export { NH1, NH2, NH3, NH4, NH5, NH6 } from './src/headers';
+export { headerProps as h1Props, headerProps as h2Props, headerProps as h3Props, headerProps as h4Props, headerProps as h5Props, headerProps as h6Props } from './src/create-header';
 export type { HeaderProps as H1Props } from './src/create-header';
 export type { HeaderProps as H2Props } from './src/create-header';
 export type { HeaderProps as H3Props } from './src/create-header';
 export type { HeaderProps as H4Props } from './src/create-header';
 export type { HeaderProps as H5Props } from './src/create-header';
 export type { HeaderProps as H6Props } from './src/create-header';
-export { default as NA } from './src/a';
+export { default as NA, aProps } from './src/a';
 export type { AProps } from './src/a';
-export { default as NP } from './src/p';
+export { default as NP, pProps } from './src/p';
 export type { PProps } from './src/p';
-export { default as NBlockquote } from './src/blockquote';
+export { default as NBlockquote, blockquoteProps } from './src/blockquote';
 export type { BlockquoteProps } from './src/blockquote';
 export { default as NHr } from './src/hr';
-export { default as NUl } from './src/ul';
+export { default as NUl, ulProps } from './src/ul';
 export type { UlProps } from './src/ul';
-export { default as NOl } from './src/ol';
+export { default as NOl, olProps } from './src/ol';
 export type { OlProps } from './src/ol';
 export { default as NLi } from './src/li';
-export { default as NText } from './src/text';
+export { default as NText, textProps } from './src/text';
 export type { TextProps } from './src/text';

package/es/typography/index.js

@@ -1,9 +1,10 @@
 export { NH1, NH2, NH3, NH4, NH5, NH6 } from './src/headers';
-export { default as NA } from './src/a';
-export { default as NP } from './src/p';
-export { default as NBlockquote } from './src/blockquote';
+export { headerProps as h1Props, headerProps as h2Props, headerProps as h3Props, headerProps as h4Props, headerProps as h5Props, headerProps as h6Props } from './src/create-header';
+export { default as NA, aProps } from './src/a';
+export { default as NP, pProps } from './src/p';
+export { default as NBlockquote, blockquoteProps } from './src/blockquote';
 export { default as NHr } from './src/hr';
-export { default as NUl } from './src/ul';
-export { default as NOl } from './src/ol';
+export { default as NUl, ulProps } from './src/ul';
+export { default as NOl, olProps } from './src/ol';
 export { default as NLi } from './src/li';
-export { default as NText } from './src/text';
+export { default as NText, textProps } from './src/text';

package/es/typography/src/a.d.ts

@@ -1,5 +1,5 @@
 import type { ExtractPublicPropTypes } from '../../_utils';
-declare const aProps: {
+export declare const aProps: {
     readonly theme: import("vue").PropType<import("../../_mixins").Theme<"Typography", {
         aTextColor: string;
         blockquoteTextColor: string;

package/es/typography/src/a.js

@@ -2,7 +2,7 @@ import { h, defineComponent, computed } from 'vue';
 import { useConfig, useTheme, useThemeClass } from '../../_mixins';
 import { typographyLight } from '../styles';
 import style from './styles/a.cssr';
-const aProps = Object.assign({}, useTheme.props);
+export const aProps = Object.assign({}, useTheme.props);
 export default defineComponent({
     name: 'A',
     props: aProps,

package/es/typography/src/blockquote.d.ts

@@ -1,5 +1,5 @@
 import type { ExtractPublicPropTypes } from '../../_utils';
-declare const blockquoteProps: {
+export declare const blockquoteProps: {
     readonly alignText: BooleanConstructor;
     readonly theme: import("vue").PropType<import("../../_mixins").Theme<"Typography", {
         aTextColor: string;

package/es/typography/src/blockquote.js

@@ -2,7 +2,7 @@ import { h, defineComponent, computed } from 'vue';
 import { useConfig, useTheme, useThemeClass } from '../../_mixins';
 import style from './styles/blockquote.cssr';
 import { typographyLight } from '../styles';
-const blockquoteProps = Object.assign(Object.assign({}, useTheme.props), { alignText: Boolean });
+export const blockquoteProps = Object.assign(Object.assign({}, useTheme.props), { alignText: Boolean });
 export default defineComponent({
     name: 'Blockquote',
     props: blockquoteProps,

package/es/typography/src/create-header.d.ts

@@ -1,6 +1,6 @@
 import { PropType } from 'vue';
 import { ExtractPublicPropTypes } from '../../_utils';
-declare const headerProps: {
+export declare const headerProps: {
     readonly type: {
         readonly type: PropType<"default" | "error" | "info" | "success" | "warning">;
         readonly default: "default";

package/es/typography/src/create-header.js

@@ -3,7 +3,7 @@ import { useConfig, useTheme, useThemeClass } from '../../_mixins';
 import { createKey } from '../../_utils';
 import { typographyLight } from '../styles';
 import style from './styles/header.cssr';
-const headerProps = Object.assign(Object.assign({}, useTheme.props), { type: {
+export const headerProps = Object.assign(Object.assign({}, useTheme.props), { type: {
         type: String,
         default: 'default'
     }, prefix: String, alignText: Boolean });

package/es/typography/src/ol.d.ts

@@ -1,5 +1,5 @@
 import type { ExtractPublicPropTypes } from '../../_utils';
-declare const olProps: {
+export declare const olProps: {
     alignText: BooleanConstructor;
     theme: import("vue").PropType<import("../../_mixins").Theme<"Typography", {
         aTextColor: string;

package/es/typography/src/ol.js

@@ -2,7 +2,7 @@ import { h, defineComponent, computed } from 'vue';
 import { useConfig, useTheme, useThemeClass } from '../../_mixins';
 import { typographyLight } from '../styles';
 import style from './styles/list.cssr';
-const olProps = Object.assign(Object.assign({}, useTheme.props), { alignText: Boolean });
+export const olProps = Object.assign(Object.assign({}, useTheme.props), { alignText: Boolean });
 export default defineComponent({
     name: 'Ol',
     props: olProps,

package/es/typography/src/p.d.ts

@@ -1,6 +1,6 @@
 import { PropType } from 'vue';
 import type { ExtractPublicPropTypes } from '../../_utils';
-declare const pProps: {
+export declare const pProps: {
     depth: PropType<2 | 1 | 3 | "1" | "2" | "3">;
     theme: PropType<import("../../_mixins").Theme<"Typography", {
         aTextColor: string;

package/es/typography/src/p.js

@@ -2,7 +2,7 @@ import { h, defineComponent, computed } from 'vue';
 import { useConfig, useTheme, useThemeClass } from '../../_mixins';
 import { typographyLight } from '../styles';
 import style from './styles/p.cssr';
-const pProps = Object.assign(Object.assign({}, useTheme.props), { depth: [String, Number] });
+export const pProps = Object.assign(Object.assign({}, useTheme.props), { depth: [String, Number] });
 export default defineComponent({
     name: 'P',
     props: pProps,

package/es/typography/src/text.d.ts

@@ -1,6 +1,6 @@
 import { PropType } from 'vue';
 import type { ExtractPublicPropTypes } from '../../_utils';
-declare const textProps: {
+export declare const textProps: {
     readonly code: BooleanConstructor;
     readonly type: {
         readonly type: StringConstructor;

package/es/typography/src/text.js

@@ -4,7 +4,7 @@ import { useConfig, useTheme, useThemeClass } from '../../_mixins';
 import { warn, createKey } from '../../_utils';
 import { typographyLight } from '../styles';
 import style from './styles/text.cssr';
-const textProps = Object.assign(Object.assign({}, useTheme.props), { code: Boolean, type: {
+export const textProps = Object.assign(Object.assign({}, useTheme.props), { code: Boolean, type: {
         type: String,
         default: 'default'
     }, delete: Boolean, strong: Boolean, italic: Boolean, underline: Boolean, depth: [String, Number], tag: String, 

package/es/typography/src/ul.d.ts

@@ -1,5 +1,5 @@
 import type { ExtractPublicPropTypes } from '../../_utils';
-declare const ulProps: {
+export declare const ulProps: {
     readonly alignText: BooleanConstructor;
     readonly theme: import("vue").PropType<import("../../_mixins").Theme<"Typography", {
         aTextColor: string;

package/es/typography/src/ul.js

@@ -2,7 +2,7 @@ import { h, defineComponent, computed } from 'vue';
 import { useConfig, useTheme, useThemeClass } from '../../_mixins';
 import { typographyLight } from '../styles';
 import style from './styles/list.cssr';
-const ulProps = Object.assign(Object.assign({}, useTheme.props), { alignText: Boolean });
+export const ulProps = Object.assign(Object.assign({}, useTheme.props), { alignText: Boolean });
 export default defineComponent({
     name: 'Ul',
     props: ulProps,

package/es/upload/index.d.ts

@@ -1,4 +1,4 @@
-export { default as NUpload } from './src/Upload';
+export { default as NUpload, uploadProps } from './src/Upload';
 export { default as NUploadDragger } from './src/UploadDragger';
 export { default as NUploadTrigger } from './src/UploadTrigger';
 export { default as NUploadFileList } from './src/UploadFileList';

package/es/upload/index.js

@@ -1,4 +1,4 @@
-export { default as NUpload } from './src/Upload';
+export { default as NUpload, uploadProps } from './src/Upload';
 export { default as NUploadDragger } from './src/UploadDragger';
 export { default as NUploadTrigger } from './src/UploadTrigger';
 export { default as NUploadFileList } from './src/UploadFileList';

package/es/upload/src/Upload.d.ts

@@ -2,7 +2,7 @@ import { PropType, CSSProperties, InputHTMLAttributes } from 'vue';
 import type { ExtractPublicPropTypes, MaybeArray } from '../../_utils';
 import type { ImageGroupProps } from '../../image';
 import type { FileInfo, FuncOrRecordOrUndef, OnFinish, OnRemove, OnDownload, OnChange, OnUpdateFileList, OnBeforeUpload, ListType, OnPreview, CreateThumbnailUrl, CustomRequest, OnError } from './interface';
-declare const uploadProps: {
+export declare const uploadProps: {
     readonly name: {
         readonly type: StringConstructor;
         readonly default: "file";

package/es/upload/src/Upload.js

@@ -174,7 +174,7 @@ function submitImpl(inst, fieldName, file, { method, action, withCredentials, he
         inst.doChange(fileAfterChange);
     }
 }
-const uploadProps = Object.assign(Object.assign({}, useTheme.props), { name: {
+export const uploadProps = Object.assign(Object.assign({}, useTheme.props), { name: {
         type: String,
         default: 'file'
     }, accept: String, action: String, customRequest: Function, directory: Boolean, directoryDnd: { type: Boolean, default: undefined }, method: {

package/es/upload/src/UploadFile.d.ts

@@ -387,8 +387,8 @@ declare const _default: import("vue").DefineComponent<{
     showRemoveButton: import("vue").ComputedRef<boolean>;
     showDownloadButton: import("vue").ComputedRef<boolean>;
     showRetryButton: import("vue").ComputedRef<boolean>;
-    showPreviewButton: import("vue").ComputedRef<boolean | "">;
-    thumbnailUrl: import("vue").Ref<string>;
+    showPreviewButton: import("vue").ComputedRef<boolean | "" | null>;
+    mergedThumbnailUrl: import("vue").ComputedRef<string | null>;
     imageRef: import("vue").Ref<{
         click: () => void;
     } | null>;

package/es/upload/src/UploadFile.js

@@ -8,6 +8,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { h, defineComponent, computed, inject, ref, watchEffect } from 'vue';
+import { useMemo } from 'vooks';
 import { CancelIcon, TrashIcon, AttachIcon, RetryIcon, DownloadIcon, EyeIcon } from '../../_internal/icons';
 import { NImage } from '../../image';
 import { NButton } from '../../button';
@@ -85,12 +86,15 @@ export default defineComponent({
             const { file } = props;
             return ['error'].includes(file.status);
         });
+        const mergedThumbnailUrlRef = useMemo(() => {
+            return thumbnailUrlRef.value || props.file.thumbnailUrl || props.file.url;
+        });
         const showPreviewButtonRef = computed(() => {
             if (!NUpload.showPreviewButtonRef.value)
                 return false;
-            const { file: { status, url }, listType } = props;
+            const { file: { status }, listType } = props;
             return (['finished'].includes(status) &&
-                (url || thumbnailUrlRef.value) &&
+                mergedThumbnailUrlRef.value &&
                 listType === 'image-card');
         });
         function handleRetryClick() {
@@ -180,7 +184,7 @@ export default defineComponent({
             showDownloadButton: showDownloadButtonRef,
             showRetryButton: showRetryButtonRef,
             showPreviewButton: showPreviewButtonRef,
-            thumbnailUrl: thumbnailUrlRef,
+            mergedThumbnailUrl: mergedThumbnailUrlRef,
             imageRef,
             handleRemoveOrCancelClick,
             handleDownloadClick,
@@ -196,7 +200,7 @@ export default defineComponent({
         const isImageCardType = listType === 'image-card';
         if (isImageType || isImageCardType) {
             icon = !isImageFile(file) ? (h("span", { class: `${clsPrefix}-upload-file-info__thumbnail` },
-                h(NBaseIcon, { clsPrefix: clsPrefix }, { default: () => documentIcon }))) : (file.url || this.thumbnailUrl) && file.status !== 'error' ? (h("a", { rel: "noopener noreferer", target: "_blank", href: file.url || undefined, class: `${clsPrefix}-upload-file-info__thumbnail`, onClick: this.handlePreviewClick }, listType === 'image-card' ? (h(NImage, { src: this.thumbnailUrl || file.thumbnailUrl || file.url || undefined, previewSrc: file.url || undefined, alt: file.name, ref: "imageRef" })) : (h("img", { src: this.thumbnailUrl || file.thumbnailUrl || file.url || undefined, alt: file.name })))) : (h("span", { class: `${clsPrefix}-upload-file-info__thumbnail` },
+                h(NBaseIcon, { clsPrefix: clsPrefix }, { default: () => documentIcon }))) : this.mergedThumbnailUrl && file.status !== 'error' ? (h("a", { rel: "noopener noreferer", target: "_blank", href: file.url || undefined, class: `${clsPrefix}-upload-file-info__thumbnail`, onClick: this.handlePreviewClick }, listType === 'image-card' ? (h(NImage, { src: this.mergedThumbnailUrl || undefined, previewSrc: file.url || undefined, alt: file.name, ref: "imageRef" })) : (h("img", { src: this.mergedThumbnailUrl || undefined, alt: file.name })))) : (h("span", { class: `${clsPrefix}-upload-file-info__thumbnail` },
                 h(NBaseIcon, { clsPrefix: clsPrefix }, { default: () => imageIcon })));
         }
         else {