naive-ui 2.21.2 → 2.22.0

package/lib/tree/src/Tree.js

@@ -104,7 +104,7 @@ const treeProps = Object.assign(Object.assign(Object.assign(Object.assign({}, _m
     }, animated: {
         type: Boolean,
         default: true
-    }, virtualScroll: Boolean, renderLabel: Function, renderPrefix: Function, renderSuffix: Function, onDragenter: [Function, Array], onDragleave: [Function, Array], onDragend: [Function, Array], onDragstart: [Function, Array], onDragover: [Function, Array], onDrop: [Function, Array], onUpdateCheckedKeys: [Function, Array], 'onUpdate:checkedKeys': [Function, Array], onUpdateSelectedKeys: [Function, Array], 'onUpdate:selectedKeys': [Function, Array] }), exports.treeSharedProps), { 
+    }, virtualScroll: Boolean, watchProps: Array, renderLabel: Function, renderPrefix: Function, renderSuffix: Function, onDragenter: [Function, Array], onDragleave: [Function, Array], onDragend: [Function, Array], onDragstart: [Function, Array], onDragover: [Function, Array], onDrop: [Function, Array], onUpdateCheckedKeys: [Function, Array], 'onUpdate:checkedKeys': [Function, Array], onUpdateSelectedKeys: [Function, Array], 'onUpdate:selectedKeys': [Function, Array] }), exports.treeSharedProps), { 
     // internal props for tree-select
     internalScrollable: Boolean, internalScrollablePadding: String, 
     // use it to do check
@@ -145,7 +145,16 @@ exports.default = (0, vue_1.defineComponent)({
         const dataTreeMateRef = props.internalDataTreeMate
             ? (0, vue_1.toRef)(props, 'internalDataTreeMate')
             : displayTreeMateRef;
-        const uncontrolledCheckedKeysRef = (0, vue_1.ref)(props.defaultCheckedKeys || props.checkedKeys);
+        const { watchProps } = props;
+        const uncontrolledCheckedKeysRef = (0, vue_1.ref)([]);
+        if (watchProps === null || watchProps === void 0 ? void 0 : watchProps.includes('defaultCheckedKeys')) {
+            (0, vue_1.watchEffect)(() => {
+                uncontrolledCheckedKeysRef.value = props.defaultCheckedKeys;
+            });
+        }
+        else {
+            uncontrolledCheckedKeysRef.value = props.defaultCheckedKeys;
+        }
         const controlledCheckedKeysRef = (0, vue_1.toRef)(props, 'checkedKeys');
         const mergedCheckedKeysRef = (0, vooks_1.useMergedState)(controlledCheckedKeysRef, uncontrolledCheckedKeysRef);
         const checkedStatusRef = (0, vue_1.computed)(() => {
@@ -164,12 +173,29 @@ exports.default = (0, vue_1.defineComponent)({
                 return indeterminateKeys;
             return checkedStatusRef.value.indeterminateKeys;
         });
-        const uncontrolledSelectedKeysRef = (0, vue_1.ref)(props.defaultSelectedKeys || props.selectedKeys);
+        const uncontrolledSelectedKeysRef = (0, vue_1.ref)([]);
+        if (watchProps === null || watchProps === void 0 ? void 0 : watchProps.includes('defaultSelectedKeys')) {
+            (0, vue_1.watchEffect)(() => {
+                uncontrolledSelectedKeysRef.value = props.defaultSelectedKeys;
+            });
+        }
+        else {
+            uncontrolledSelectedKeysRef.value = props.defaultSelectedKeys;
+        }
         const controlledSelectedKeysRef = (0, vue_1.toRef)(props, 'selectedKeys');
         const mergedSelectedKeysRef = (0, vooks_1.useMergedState)(controlledSelectedKeysRef, uncontrolledSelectedKeysRef);
-        const uncontrolledExpandedKeysRef = (0, vue_1.ref)(props.defaultExpandAll
-            ? dataTreeMateRef.value.getNonLeafKeys()
-            : props.defaultExpandedKeys);
+        const uncontrolledExpandedKeysRef = (0, vue_1.ref)([]);
+        const initUncontrolledExpandedKeys = () => {
+            uncontrolledExpandedKeysRef.value = props.defaultExpandAll
+                ? dataTreeMateRef.value.getNonLeafKeys()
+                : props.defaultExpandedKeys;
+        };
+        if (watchProps === null || watchProps === void 0 ? void 0 : watchProps.includes('defaultExpandedKeys')) {
+            (0, vue_1.watchEffect)(initUncontrolledExpandedKeys);
+        }
+        else {
+            initUncontrolledExpandedKeys();
+        }
         const controlledExpandedKeysRef = (0, vue_1.toRef)(props, 'expandedKeys');
         const mergedExpandedKeysRef = (0, vooks_1.useMergedState)(controlledExpandedKeysRef, uncontrolledExpandedKeysRef);
         const fNodesRef = (0, vue_1.computed)(() => displayTreeMateRef.value.getFlattenedNodes(mergedExpandedKeysRef.value));

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

@@ -1,4 +1,4 @@
-import { PropType } from 'vue';
+import { PropType, HTMLAttributes } from 'vue';
 import { FollowerPlacement } from 'vueuc';
 import { CheckStrategy } from 'treemate';
 import { Key } from '../../tree/src/interface';
@@ -94,6 +94,7 @@ declare const props: {
         type: PropType<string | boolean | HTMLElement>;
         default: undefined;
     };
+    readonly menuProps: PropType<HTMLAttributes>;
     readonly virtualScroll: {
         readonly type: BooleanConstructor;
         readonly default: true;
@@ -104,6 +105,9 @@ declare const props: {
         menuBoxShadow: string;
         menuBorderRadius: string;
         menuHeight: string;
+        actionDividerColor: string;
+        actionTextColor: string;
+        actionPadding: string;
     }, {
         Tree: import("../../_mixins").Theme<"Tree", {
             fontSize: string;
@@ -238,6 +242,9 @@ declare const props: {
         menuBoxShadow: string;
         menuBorderRadius: string;
         menuHeight: string;
+        actionDividerColor: string;
+        actionTextColor: string;
+        actionPadding: string;
     }, {
         Tree: import("../../_mixins").Theme<"Tree", {
             fontSize: string;
@@ -372,6 +379,9 @@ declare const props: {
         menuBoxShadow: string;
         menuBorderRadius: string;
         menuHeight: string;
+        actionDividerColor: string;
+        actionTextColor: string;
+        actionPadding: string;
     }, {
         Tree: import("../../_mixins").Theme<"Tree", {
             fontSize: string;
@@ -591,6 +601,7 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<string | boolean | HTMLElement>;
         default: undefined;
     };
+    readonly menuProps: PropType<HTMLAttributes>;
     readonly virtualScroll: {
         readonly type: BooleanConstructor;
         readonly default: true;
@@ -601,6 +612,9 @@ declare const _default: import("vue").DefineComponent<{
         menuBoxShadow: string;
         menuBorderRadius: string;
         menuHeight: string;
+        actionDividerColor: string;
+        actionTextColor: string;
+        actionPadding: string;
     }, {
         Tree: import("../../_mixins").Theme<"Tree", {
             fontSize: string;
@@ -735,6 +749,9 @@ declare const _default: import("vue").DefineComponent<{
         menuBoxShadow: string;
         menuBorderRadius: string;
         menuHeight: string;
+        actionDividerColor: string;
+        actionTextColor: string;
+        actionPadding: string;
     }, {
         Tree: import("../../_mixins").Theme<"Tree", {
             fontSize: string;
@@ -869,6 +886,9 @@ declare const _default: import("vue").DefineComponent<{
         menuBoxShadow: string;
         menuBorderRadius: string;
         menuHeight: string;
+        actionDividerColor: string;
+        actionTextColor: string;
+        actionPadding: string;
     }, {
         Tree: import("../../_mixins").Theme<"Tree", {
             fontSize: string;
@@ -1060,6 +1080,9 @@ declare const _default: import("vue").DefineComponent<{
         '--menu-color': string;
         '--menu-height': string;
         '--bezier': string;
+        '--action-padding': string;
+        '--action-text-color': string;
+        '--action-divider-color': string;
     }>;
     mergedTheme: import("vue").ComputedRef<{
         common: {
@@ -1171,6 +1194,9 @@ declare const _default: import("vue").DefineComponent<{
             menuBoxShadow: string;
             menuBorderRadius: string;
             menuHeight: string;
+            actionDividerColor: string;
+            actionTextColor: string;
+            actionPadding: string;
         };
         peers: {
             Tree: import("../../_mixins").Theme<"Tree", {
@@ -1403,6 +1429,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly size?: unknown;
     readonly value?: unknown;
     readonly to?: unknown;
+    readonly menuProps?: unknown;
     readonly virtualScroll?: unknown;
     readonly theme?: unknown;
     readonly themeOverrides?: unknown;
@@ -1444,6 +1471,9 @@ declare const _default: import("vue").DefineComponent<{
         menuBoxShadow: string;
         menuBorderRadius: string;
         menuHeight: string;
+        actionDividerColor: string;
+        actionTextColor: string;
+        actionPadding: string;
     }, {
         Tree: import("../../_mixins").Theme<"Tree", {
             fontSize: string;
@@ -1578,6 +1608,9 @@ declare const _default: import("vue").DefineComponent<{
         menuBoxShadow: string;
         menuBorderRadius: string;
         menuHeight: string;
+        actionDividerColor: string;
+        actionTextColor: string;
+        actionPadding: string;
     }, {
         Tree: import("../../_mixins").Theme<"Tree", {
             fontSize: string;
@@ -1712,6 +1745,9 @@ declare const _default: import("vue").DefineComponent<{
         menuBoxShadow: string;
         menuBorderRadius: string;
         menuHeight: string;
+        actionDividerColor: string;
+        actionTextColor: string;
+        actionPadding: string;
     }, {
         Tree: import("../../_mixins").Theme<"Tree", {
             fontSize: string;
@@ -1843,6 +1879,7 @@ declare const _default: import("vue").DefineComponent<{
     "onUpdate:show"?: MaybeArray<(show: boolean) => void> | undefined;
     onUpdateShow?: MaybeArray<(show: boolean) => void> | undefined;
     maxTagCount?: number | "responsive" | undefined;
+    menuProps?: HTMLAttributes | undefined;
     "onUpdate:value"?: MaybeArray<OnUpdateValue> | undefined;
     onUpdateValue?: MaybeArray<OnUpdateValue> | undefined;
     leafOnly?: boolean | undefined;

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

@@ -8,6 +8,7 @@ const vueuc_1 = require("vueuc");
 const vooks_1 = require("vooks");
 const vdirs_1 = require("vdirs");
 const treemate_1 = require("treemate");
+const seemly_1 = require("seemly");
 const Tree_1 = require("../../tree/src/Tree");
 const _internal_1 = require("../../_internal");
 const tree_1 = require("../../tree");
@@ -45,7 +46,7 @@ const props = Object.assign(Object.assign(Object.assign(Object.assign({}, _mixin
     }, show: {
         type: Boolean,
         default: undefined
-    }, size: String, value: [String, Number, Array], to: _utils_1.useAdjustedTo.propTo, virtualScroll: {
+    }, size: String, value: [String, Number, Array], to: _utils_1.useAdjustedTo.propTo, menuProps: Object, virtualScroll: {
         type: Boolean,
         default: true
     } }), Tree_1.treeSharedProps), { onBlur: Function, onFocus: Function, onUpdateShow: [Function, Array], onUpdateValue: [Function, Array], 'onUpdate:value': [Function, Array], 'onUpdate:show': [Function, Array], 
@@ -442,7 +443,8 @@ exports.default = (0, vue_1.defineComponent)({
         function handleMenuMousedown(e) {
             // If there's an action slot later, we need to check if mousedown happens
             // in action panel
-            e.preventDefault();
+            if (!(0, seemly_1.happensIn)(e, 'action'))
+                e.preventDefault();
         }
         (0, vue_1.provide)(interface_1.treeSelectInjectionKey, {
             pendingNodeKeyRef
@@ -519,20 +521,23 @@ exports.default = (0, vue_1.defineComponent)({
             handleTabOut,
             handleMenuMousedown,
             cssVars: (0, vue_1.computed)(() => {
-                const { common: { cubicBezierEaseInOut }, self: { menuBoxShadow, menuBorderRadius, menuColor, menuHeight } } = themeRef.value;
+                const { common: { cubicBezierEaseInOut }, self: { menuBoxShadow, menuBorderRadius, menuColor, menuHeight, actionPadding, actionDividerColor, actionTextColor } } = themeRef.value;
                 return {
                     '--menu-box-shadow': menuBoxShadow,
                     '--menu-border-radius': menuBorderRadius,
                     '--menu-color': menuColor,
                     '--menu-height': menuHeight,
-                    '--bezier': cubicBezierEaseInOut
+                    '--bezier': cubicBezierEaseInOut,
+                    '--action-padding': actionPadding,
+                    '--action-text-color': actionTextColor,
+                    '--action-divider-color': actionDividerColor
                 };
             }),
             mergedTheme: themeRef
         };
     },
     render() {
-        const { mergedTheme, mergedClsPrefix } = this;
+        const { mergedTheme, mergedClsPrefix, $slots } = this;
         return ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-tree-select` },
             (0, vue_1.h)(vueuc_1.VBinder, null, {
                 default: () => [
@@ -544,11 +549,21 @@ exports.default = (0, vue_1.defineComponent)({
                             default: () => {
                                 if (!this.mergedShow)
                                     return null;
-                                const { mergedClsPrefix, filteredTreeInfo, checkable, multiple } = this;
-                                return (0, vue_1.withDirectives)((0, vue_1.h)("div", { class: `${mergedClsPrefix}-tree-select-menu`, ref: "menuElRef", style: this.cssVars, tabindex: 0, onMousedown: this.handleMenuMousedown, onKeyup: this.handleKeyup, onKeydown: this.handleKeydown, onFocusin: this.handleMenuFocusin, onFocusout: this.handleMenuFocusout },
+                                const { mergedClsPrefix, filteredTreeInfo, checkable, multiple, menuProps } = this;
+                                return (0, vue_1.withDirectives)((0, vue_1.h)("div", Object.assign({}, menuProps, { class: [
+                                        `${mergedClsPrefix}-tree-select-menu`,
+                                        menuProps === null || menuProps === void 0 ? void 0 : menuProps.class
+                                    ], ref: "menuElRef", style: [
+                                        (menuProps === null || menuProps === void 0 ? void 0 : menuProps.style) || '',
+                                        this.cssVars
+                                    ], tabindex: 0, onMousedown: this.handleMenuMousedown, onKeyup: this.handleKeyup, onKeydown: this.handleKeydown, onFocusin: this.handleMenuFocusin, onFocusout: this.handleMenuFocusout }),
                                     filteredTreeInfo.filteredTree.length ? ((0, vue_1.h)(tree_1.NTree, { ref: "treeInstRef", blockLine: true, animated: false, data: filteredTreeInfo.filteredTree, cancelable: multiple, labelField: this.labelField, theme: mergedTheme.peers.Tree, themeOverrides: mergedTheme.peerOverrides.Tree, defaultExpandAll: this.defaultExpandAll, defaultExpandedKeys: this.defaultExpandedKeys, expandedKeys: this.mergedExpandedKeys, checkedKeys: this.treeCheckedKeys, selectedKeys: this.treeSelectedKeys, checkable: checkable, checkStrategy: this.checkStrategy, cascade: this.mergedCascade, leafOnly: this.leafOnly, multiple: this.multiple, virtualScroll: this.consistentMenuWidth &&
-                                            this.virtualScroll, internalDataTreeMate: this.dataTreeMate, internalDisplayTreeMate: this.displayTreeMate, internalHighlightKeySet: filteredTreeInfo.highlightKeySet, internalUnifySelectCheck: true, internalScrollable: true, internalScrollablePadding: this.menuPadding, internalFocusable: false, internalCheckboxFocusable: false, onUpdateCheckedKeys: this.handleUpdateCheckedKeys, onUpdateIndeterminateKeys: this.handleUpdateIndeterminateKeys, onUpdateExpandedKeys: this.doUpdateExpandedKeys })) : ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-tree-select-menu__empty` },
-                                        (0, vue_1.h)(empty_1.NEmpty, { theme: mergedTheme.peers.Empty, themeOverrides: mergedTheme.peerOverrides.Empty }))),
+                                            this.virtualScroll, internalDataTreeMate: this.dataTreeMate, internalDisplayTreeMate: this.displayTreeMate, internalHighlightKeySet: filteredTreeInfo.highlightKeySet, internalUnifySelectCheck: true, internalScrollable: true, internalScrollablePadding: this.menuPadding, internalFocusable: false, internalCheckboxFocusable: false, onUpdateCheckedKeys: this.handleUpdateCheckedKeys, onUpdateIndeterminateKeys: this.handleUpdateIndeterminateKeys, onUpdateExpandedKeys: this.doUpdateExpandedKeys })) : ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-tree-select-menu__empty` }, (0, vue_1.renderSlot)($slots, 'empty', undefined, () => [
+                                        (0, vue_1.h)(empty_1.NEmpty, { theme: mergedTheme.peers.Empty, themeOverrides: mergedTheme.peerOverrides.Empty })
+                                    ]))),
+                                    $slots.action && ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-tree-select-menu__action`, "data-action": true }, {
+                                        default: $slots.action
+                                    })),
                                     (0, vue_1.h)(_internal_1.NBaseFocusDetector, { onFocus: this.handleTabOut })), [[vdirs_1.clickoutside, this.handleMenuClickoutside]]);
                             }
                         }))

package/lib/tree-select/src/styles/index.cssr.js

@@ -18,6 +18,9 @@ const cssr_1 = require("../../../_utils/cssr"); // vars:
 // --menu-border-radius
 // --menu-box-shadow
 // --menu-color
+// --action-padding
+// --action-text-color
+// --action-divider-color
 
 
 exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('tree-select', `
@@ -29,15 +32,21 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('tree-select', `
  position: relative;
  overflow: hidden;
  margin: 4px 0;
- max-height: var(--menu-height);
  transition: box-shadow .3s var(--bezier), background-color .3s var(--bezier);
  border-radius: var(--menu-border-radius);
  box-shadow: var(--menu-box-shadow);
  background-color: var(--menu-color);
  outline: none;
- `, [(0, cssr_1.cB)('tree', 'max-height: inherit;'), (0, cssr_1.cE)('empty', `
+ `, [(0, cssr_1.cB)('tree', 'max-height: var(--menu-height);'), (0, cssr_1.cE)('empty', `
  display: flex;
  padding: 12px 32px;
  flex: 1;
  justify-content: center;
+ `), (0, cssr_1.cE)('action', `
+ padding: var(--action-padding);
+ transition: 
+ color .3s var(--bezier);
+ border-color .3s var(--bezier);
+ border-top: 1px solid var(--action-divider-color);
+ color: var(--action-text-color);
  `), (0, fade_in_scale_up_cssr_1.default)()])]);

package/lib/tree-select/styles/light.d.ts

@@ -5,6 +5,9 @@ export declare const self: (vars: ThemeCommonVars) => {
     menuBoxShadow: string;
     menuBorderRadius: string;
     menuHeight: string;
+    actionDividerColor: string;
+    actionTextColor: string;
+    actionPadding: string;
 };
 export declare type TreeSelectThemeVars = ReturnType<typeof self>;
 declare const treeSelectLight: import("../../_mixins/use-theme").Theme<"TreeSelect", {
@@ -13,6 +16,9 @@ declare const treeSelectLight: import("../../_mixins/use-theme").Theme<"TreeSele
     menuBoxShadow: string;
     menuBorderRadius: string;
     menuHeight: string;
+    actionDividerColor: string;
+    actionTextColor: string;
+    actionPadding: string;
 }, {
     Tree: import("../../_mixins/use-theme").Theme<"Tree", {
         fontSize: string;

package/lib/tree-select/styles/light.js

@@ -7,13 +7,16 @@ const styles_1 = require("../../tree/styles");
 const styles_2 = require("../../empty/styles");
 const styles_3 = require("../../_internal/selection/styles");
 const self = (vars) => {
-    const { popoverColor, boxShadow2, borderRadius, heightMedium } = vars;
+    const { popoverColor, boxShadow2, borderRadius, heightMedium, dividerColor, textColor2 } = vars;
     return {
         menuPadding: '4px',
         menuColor: popoverColor,
         menuBoxShadow: boxShadow2,
         menuBorderRadius: borderRadius,
-        menuHeight: `calc(${heightMedium} * 7.6)`
+        menuHeight: `calc(${heightMedium} * 7.6)`,
+        actionDividerColor: dividerColor,
+        actionTextColor: textColor2,
+        actionPadding: '8px 12px'
     };
 };
 exports.self = self;

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

@@ -68,6 +68,10 @@ declare const uploadProps: {
     readonly createThumbnailUrl: PropType<CreateThumbnailUrl>;
     readonly abstract: BooleanConstructor;
     readonly max: NumberConstructor;
+    readonly showTrigger: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
     readonly theme: PropType<import("../../_mixins").Theme<"Upload", {
         fontSize: string;
         lineHeight: string;
@@ -99,9 +103,9 @@ declare const uploadProps: {
             fontSizeMedium: string;
             fontSizeLarge: string;
             opacityDisabled: string;
-            colorOpacitySecondary: number;
-            colorOpacitySecondaryHover: number;
-            colorOpacitySecondaryPressed: number;
+            colorOpacitySecondary: string;
+            colorOpacitySecondaryHover: string;
+            colorOpacitySecondaryPressed: string;
             colorSecondary: string;
             colorSecondaryHover: string;
             colorSecondaryPressed: string;
@@ -344,9 +348,9 @@ declare const uploadProps: {
             fontSizeMedium: string;
             fontSizeLarge: string;
             opacityDisabled: string;
-            colorOpacitySecondary: number;
-            colorOpacitySecondaryHover: number;
-            colorOpacitySecondaryPressed: number;
+            colorOpacitySecondary: string;
+            colorOpacitySecondaryHover: string;
+            colorOpacitySecondaryPressed: string;
             colorSecondary: string;
             colorSecondaryHover: string;
             colorSecondaryPressed: string;
@@ -589,9 +593,9 @@ declare const uploadProps: {
             fontSizeMedium: string;
             fontSizeLarge: string;
             opacityDisabled: string;
-            colorOpacitySecondary: number;
-            colorOpacitySecondaryHover: number;
-            colorOpacitySecondaryPressed: number;
+            colorOpacitySecondary: string;
+            colorOpacitySecondaryHover: string;
+            colorOpacitySecondaryPressed: string;
             colorSecondary: string;
             colorSecondaryHover: string;
             colorSecondaryPressed: string;
@@ -872,6 +876,10 @@ declare const _default: import("vue").DefineComponent<{
     readonly createThumbnailUrl: PropType<CreateThumbnailUrl>;
     readonly abstract: BooleanConstructor;
     readonly max: NumberConstructor;
+    readonly showTrigger: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
     readonly theme: PropType<import("../../_mixins").Theme<"Upload", {
         fontSize: string;
         lineHeight: string;
@@ -903,9 +911,9 @@ declare const _default: import("vue").DefineComponent<{
             fontSizeMedium: string;
             fontSizeLarge: string;
             opacityDisabled: string;
-            colorOpacitySecondary: number;
-            colorOpacitySecondaryHover: number;
-            colorOpacitySecondaryPressed: number;
+            colorOpacitySecondary: string;
+            colorOpacitySecondaryHover: string;
+            colorOpacitySecondaryPressed: string;
             colorSecondary: string;
             colorSecondaryHover: string;
             colorSecondaryPressed: string;
@@ -1148,9 +1156,9 @@ declare const _default: import("vue").DefineComponent<{
             fontSizeMedium: string;
             fontSizeLarge: string;
             opacityDisabled: string;
-            colorOpacitySecondary: number;
-            colorOpacitySecondaryHover: number;
-            colorOpacitySecondaryPressed: number;
+            colorOpacitySecondary: string;
+            colorOpacitySecondaryHover: string;
+            colorOpacitySecondaryPressed: string;
             colorSecondary: string;
             colorSecondaryHover: string;
             colorSecondaryPressed: string;
@@ -1393,9 +1401,9 @@ declare const _default: import("vue").DefineComponent<{
             fontSizeMedium: string;
             fontSizeLarge: string;
             opacityDisabled: string;
-            colorOpacitySecondary: number;
-            colorOpacitySecondaryHover: number;
-            colorOpacitySecondaryPressed: number;
+            colorOpacitySecondary: string;
+            colorOpacitySecondaryHover: string;
+            colorOpacitySecondaryPressed: string;
             colorSecondary: string;
             colorSecondaryHover: string;
             colorSecondaryPressed: string;
@@ -1751,9 +1759,9 @@ declare const _default: import("vue").DefineComponent<{
                 fontSizeMedium: string;
                 fontSizeLarge: string;
                 opacityDisabled: string;
-                colorOpacitySecondary: number;
-                colorOpacitySecondaryHover: number;
-                colorOpacitySecondaryPressed: number;
+                colorOpacitySecondary: string;
+                colorOpacitySecondaryHover: string;
+                colorOpacitySecondaryPressed: string;
                 colorSecondary: string;
                 colorSecondaryHover: string;
                 colorSecondaryPressed: string;
@@ -2014,6 +2022,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly createThumbnailUrl?: unknown;
     readonly abstract?: unknown;
     readonly max?: unknown;
+    readonly showTrigger?: unknown;
     readonly theme?: unknown;
     readonly themeOverrides?: unknown;
     readonly builtinThemeOverrides?: unknown;
@@ -2022,6 +2031,7 @@ declare const _default: import("vue").DefineComponent<{
     abstract: boolean;
     name: string;
     multiple: boolean;
+    showTrigger: boolean;
     listType: listType;
     showCancelButton: boolean;
     showRemoveButton: boolean;
@@ -2071,9 +2081,9 @@ declare const _default: import("vue").DefineComponent<{
             fontSizeMedium: string;
             fontSizeLarge: string;
             opacityDisabled: string;
-            colorOpacitySecondary: number;
-            colorOpacitySecondaryHover: number;
-            colorOpacitySecondaryPressed: number;
+            colorOpacitySecondary: string;
+            colorOpacitySecondaryHover: string;
+            colorOpacitySecondaryPressed: string;
             colorSecondary: string;
             colorSecondaryHover: string;
             colorSecondaryPressed: string;
@@ -2316,9 +2326,9 @@ declare const _default: import("vue").DefineComponent<{
             fontSizeMedium: string;
             fontSizeLarge: string;
             opacityDisabled: string;
-            colorOpacitySecondary: number;
-            colorOpacitySecondaryHover: number;
-            colorOpacitySecondaryPressed: number;
+            colorOpacitySecondary: string;
+            colorOpacitySecondaryHover: string;
+            colorOpacitySecondaryPressed: string;
             colorSecondary: string;
             colorSecondaryHover: string;
             colorSecondaryPressed: string;
@@ -2561,9 +2571,9 @@ declare const _default: import("vue").DefineComponent<{
             fontSizeMedium: string;
             fontSizeLarge: string;
             opacityDisabled: string;
-            colorOpacitySecondary: number;
-            colorOpacitySecondaryHover: number;
-            colorOpacitySecondaryPressed: number;
+            colorOpacitySecondary: string;
+            colorOpacitySecondaryHover: string;
+            colorOpacitySecondaryPressed: string;
             colorSecondary: string;
             colorSecondaryHover: string;
             colorSecondaryPressed: string;
@@ -2792,6 +2802,7 @@ declare const _default: import("vue").DefineComponent<{
     name: string;
     multiple: boolean;
     disabled: boolean | undefined;
+    showTrigger: boolean;
     listType: listType;
     showCancelButton: boolean;
     showRemoveButton: boolean;

package/lib/upload/src/Upload.js

@@ -30,19 +30,33 @@ const UploadFileList_1 = __importDefault(require("./UploadFileList"));
 function createXhrHandlers(inst, file, XHR) {
     const { doChange, XhrMap } = inst;
     let percentage = 0;
+    function handleXHRError(e) {
+        const fileAfterChange = Object.assign({}, file, {
+            status: 'error',
+            percentage
+        });
+        XhrMap.delete(file.id);
+        doChange(fileAfterChange, e);
+    }
+    function handleXHRLoad(e) {
+        var _a;
+        if (XHR.status !== 200) {
+            handleXHRError(e);
+            return;
+        }
+        let fileAfterChange = Object.assign({}, file, {
+            status: 'finished',
+            percentage,
+            file: null
+        });
+        XhrMap.delete(file.id);
+        fileAfterChange =
+            ((_a = inst.onFinish) === null || _a === void 0 ? void 0 : _a.call(inst, { file: fileAfterChange, event: e })) || fileAfterChange;
+        doChange(fileAfterChange, e);
+    }
     return {
-        handleXHRLoad(e) {
-            var _a;
-            let fileAfterChange = Object.assign({}, file, {
-                status: 'finished',
-                percentage,
-                file: null
-            });
-            XhrMap.delete(file.id);
-            fileAfterChange =
-                ((_a = inst.onFinish) === null || _a === void 0 ? void 0 : _a.call(inst, { file: fileAfterChange, event: e })) || fileAfterChange;
-            doChange(fileAfterChange, e);
-        },
+        handleXHRLoad,
+        handleXHRError,
         handleXHRAbort(e) {
             const fileAfterChange = Object.assign({}, file, {
                 status: 'removed',
@@ -52,14 +66,6 @@ function createXhrHandlers(inst, file, XHR) {
             XhrMap.delete(file.id);
             doChange(fileAfterChange, e);
         },
-        handleXHRError(e) {
-            const fileAfterChange = Object.assign({}, file, {
-                status: 'error',
-                percentage
-            });
-            XhrMap.delete(file.id);
-            doChange(fileAfterChange, e);
-        },
         handleXHRProgress(e) {
             const fileAfterChange = Object.assign({}, file, {
                 status: 'uploading'
@@ -202,7 +208,10 @@ const uploadProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), {
     }, listType: {
         type: String,
         default: 'text'
-    }, onPreview: Function, createThumbnailUrl: Function, abstract: Boolean, max: Number });
+    }, onPreview: Function, createThumbnailUrl: Function, abstract: Boolean, max: Number, showTrigger: {
+        type: Boolean,
+        default: true
+    } });
 exports.default = (0, vue_1.defineComponent)({
     name: 'Upload',
     props: uploadProps,
@@ -421,7 +430,8 @@ exports.default = (0, vue_1.defineComponent)({
             maxReachedRef,
             fileListStyleRef: (0, vue_1.toRef)(props, 'fileListStyle'),
             abstractRef: (0, vue_1.toRef)(props, 'abstract'),
-            cssVarsRef
+            cssVarsRef,
+            showTriggerRef: (0, vue_1.toRef)(props, 'showTrigger')
         });
         const exposedMethods = {
             submit,
@@ -448,7 +458,7 @@ exports.default = (0, vue_1.defineComponent)({
                 this.dragOver && `${mergedClsPrefix}-upload--drag-over`
             ], style: this.cssVars },
             inputNode,
-            this.listType !== 'image-card' && ((0, vue_1.h)(UploadTrigger_1.default, null, $slots)),
+            this.showTrigger && this.listType !== 'image-card' && ((0, vue_1.h)(UploadTrigger_1.default, null, $slots)),
             this.showFileList && (0, vue_1.h)(UploadFileList_1.default, null, $slots)));
     }
 });

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

@@ -150,9 +150,9 @@ declare const _default: import("vue").DefineComponent<{
                 fontSizeMedium: string;
                 fontSizeLarge: string;
                 opacityDisabled: string;
-                colorOpacitySecondary: number;
-                colorOpacitySecondaryHover: number;
-                colorOpacitySecondaryPressed: number;
+                colorOpacitySecondary: string;
+                colorOpacitySecondaryHover: string;
+                colorOpacitySecondaryPressed: string;
                 colorSecondary: string;
                 colorSecondaryHover: string;
                 colorSecondaryPressed: string;
@@ -219,7 +219,7 @@ declare const _default: import("vue").DefineComponent<{
                 colorHoverInfo: string;
                 colorPressedInfo: string;
                 colorFocusInfo: string;
-                colorDisabledInfo: string; /** I haven't figure out its usage, so just leave it here */
+                colorDisabledInfo: string;
                 textColorInfo: string;
                 textColorHoverInfo: string;
                 textColorPressedInfo: string;