naive-ui 2.18.0 → 2.19.1

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

@@ -1,4 +1,3 @@
-/// <reference types="node" />
 import { PropType, CSSProperties } from 'vue';
 import { ExtractPublicPropTypes, MaybeArray } from '../../_utils';
 import { FileInfo, FuncOrRecordOrUndef, OnFinish, OnRemove, OnDownload, OnChange, OnUpdateFileList, OnBeforeUpload, listType, OnPreview, CreateThumbnailUrl } from './interface';
@@ -69,6 +68,7 @@ declare const uploadProps: {
     };
     readonly onPreview: PropType<OnPreview>;
     readonly createThumbnailUrl: PropType<CreateThumbnailUrl>;
+    readonly abstract: BooleanConstructor;
     readonly theme: PropType<import("../../_mixins").Theme<"Upload", {
         fontSize: string;
         lineHeight: string;
@@ -192,7 +192,7 @@ declare const uploadProps: {
             textColorFocusSuccess: string;
             textColorDisabledSuccess: string;
             textColorTextSuccess: string;
-            textColorTextHoverSuccess: string;
+            textColorTextHoverSuccess: string; /** currently of no usage */
             textColorTextPressedSuccess: string;
             textColorTextFocusSuccess: string;
             textColorTextDisabledSuccess: string;
@@ -428,7 +428,7 @@ declare const uploadProps: {
             textColorFocusSuccess: string;
             textColorDisabledSuccess: string;
             textColorTextSuccess: string;
-            textColorTextHoverSuccess: string;
+            textColorTextHoverSuccess: string; /** currently of no usage */
             textColorTextPressedSuccess: string;
             textColorTextFocusSuccess: string;
             textColorTextDisabledSuccess: string;
@@ -664,7 +664,7 @@ declare const uploadProps: {
             textColorFocusSuccess: string;
             textColorDisabledSuccess: string;
             textColorTextSuccess: string;
-            textColorTextHoverSuccess: string;
+            textColorTextHoverSuccess: string; /** currently of no usage */
             textColorTextPressedSuccess: string;
             textColorTextFocusSuccess: string;
             textColorTextDisabledSuccess: string;
@@ -846,6 +846,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     readonly onPreview: PropType<OnPreview>;
     readonly createThumbnailUrl: PropType<CreateThumbnailUrl>;
+    readonly abstract: BooleanConstructor;
     readonly theme: PropType<import("../../_mixins").Theme<"Upload", {
         fontSize: string;
         lineHeight: string;
@@ -969,7 +970,7 @@ declare const _default: import("vue").DefineComponent<{
             textColorFocusSuccess: string;
             textColorDisabledSuccess: string;
             textColorTextSuccess: string;
-            textColorTextHoverSuccess: string;
+            textColorTextHoverSuccess: string; /** currently of no usage */
             textColorTextPressedSuccess: string;
             textColorTextFocusSuccess: string;
             textColorTextDisabledSuccess: string;
@@ -1205,7 +1206,7 @@ declare const _default: import("vue").DefineComponent<{
             textColorFocusSuccess: string;
             textColorDisabledSuccess: string;
             textColorTextSuccess: string;
-            textColorTextHoverSuccess: string;
+            textColorTextHoverSuccess: string; /** currently of no usage */
             textColorTextPressedSuccess: string;
             textColorTextFocusSuccess: string;
             textColorTextDisabledSuccess: string;
@@ -1441,7 +1442,7 @@ declare const _default: import("vue").DefineComponent<{
             textColorFocusSuccess: string;
             textColorDisabledSuccess: string;
             textColorTextSuccess: string;
-            textColorTextHoverSuccess: string;
+            textColorTextHoverSuccess: string; /** currently of no usage */
             textColorTextPressedSuccess: string;
             textColorTextFocusSuccess: string;
             textColorTextDisabledSuccess: string;
@@ -1560,39 +1561,6 @@ declare const _default: import("vue").DefineComponent<{
         value: boolean;
     };
     inputElRef: import("vue").Ref<HTMLInputElement | null>;
-    mergedFileList: import("vue").ComputedRef<{
-        id: string;
-        name: string;
-        percentage: number;
-        status: "error" | "pending" | "uploading" | "finished" | "removed";
-        url?: string | null | undefined;
-        file?: {
-            readonly lastModified: number;
-            readonly name: string;
-            readonly webkitRelativePath: string;
-            readonly size: number;
-            readonly type: string;
-            arrayBuffer: {
-                (): Promise<ArrayBuffer>;
-                (): Promise<ArrayBuffer>;
-            };
-            slice: {
-                (start?: number | undefined, end?: number | undefined, contentType?: string | undefined): Blob;
-                (start?: number | undefined, end?: number | undefined, contentType?: string | undefined): Blob;
-            };
-            stream: {
-                (): ReadableStream<any>;
-                (): NodeJS.ReadableStream;
-            };
-            text: {
-                (): Promise<string>;
-                (): Promise<string>;
-            };
-        } | null | undefined;
-        thumbnailUrl?: string | null | undefined;
-        type?: string | null | undefined;
-    }[]>;
-    mergedDisabled: import("vue").ComputedRef<boolean>;
     mergedTheme: import("vue").ComputedRef<{
         common: {
             baseColor: string;
@@ -1817,7 +1785,7 @@ declare const _default: import("vue").DefineComponent<{
                 textColorFocusSuccess: string;
                 textColorDisabledSuccess: string;
                 textColorTextSuccess: string;
-                textColorTextHoverSuccess: string;
+                textColorTextHoverSuccess: string; /** currently of no usage */
                 textColorTextPressedSuccess: string;
                 textColorTextFocusSuccess: string;
                 textColorTextDisabledSuccess: string;
@@ -1944,32 +1912,9 @@ declare const _default: import("vue").DefineComponent<{
         };
     }>;
     dragOver: import("vue").Ref<boolean>;
-    handleTriggerDrop: (e: DragEvent) => void;
-    handleTriggerDragLeave: (e: DragEvent) => void;
-    handleTriggerDragEnter: (e: DragEvent) => void;
-    handleTriggerDragOver: (e: DragEvent) => void;
-    handleTriggerClick: () => void;
     handleFileInputChange: (e: Event) => void;
     submit: (fileId?: string | undefined) => void;
-    openFileDialog: () => void;
-    cssVars: import("vue").ComputedRef<{
-        '--bezier': string;
-        '--border-radius': string;
-        '--dragger-border': string;
-        '--dragger-border-hover': string;
-        '--dragger-color': string;
-        '--font-size': string;
-        '--item-color-hover': string;
-        '--item-color-hover-error': string;
-        '--item-disabled-opacity': string;
-        '--item-icon-color': string;
-        '--item-text-color': string;
-        '--item-text-color-error': string;
-        '--item-text-color-success': string;
-        '--line-height': string;
-        '--item-border-image-card-error': string;
-        '--item-border-image-card': string;
-    }>;
+    cssVars: import("vue").ComputedRef<any>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     readonly name?: unknown;
     readonly accept?: unknown;
@@ -2000,11 +1945,13 @@ declare const _default: import("vue").DefineComponent<{
     readonly listType?: unknown;
     readonly onPreview?: unknown;
     readonly createThumbnailUrl?: unknown;
+    readonly abstract?: unknown;
     readonly theme?: unknown;
     readonly themeOverrides?: unknown;
     readonly builtinThemeOverrides?: unknown;
 } & {
     method: string;
+    abstract: boolean;
     name: string;
     multiple: boolean;
     listType: listType;
@@ -2147,7 +2094,7 @@ declare const _default: import("vue").DefineComponent<{
             textColorFocusSuccess: string;
             textColorDisabledSuccess: string;
             textColorTextSuccess: string;
-            textColorTextHoverSuccess: string;
+            textColorTextHoverSuccess: string; /** currently of no usage */
             textColorTextPressedSuccess: string;
             textColorTextFocusSuccess: string;
             textColorTextDisabledSuccess: string;
@@ -2383,7 +2330,7 @@ declare const _default: import("vue").DefineComponent<{
             textColorFocusSuccess: string;
             textColorDisabledSuccess: string;
             textColorTextSuccess: string;
-            textColorTextHoverSuccess: string;
+            textColorTextHoverSuccess: string; /** currently of no usage */
             textColorTextPressedSuccess: string;
             textColorTextFocusSuccess: string;
             textColorTextDisabledSuccess: string;
@@ -2619,7 +2566,7 @@ declare const _default: import("vue").DefineComponent<{
             textColorFocusSuccess: string;
             textColorDisabledSuccess: string;
             textColorTextSuccess: string;
-            textColorTextHoverSuccess: string;
+            textColorTextHoverSuccess: string; /** currently of no usage */
             textColorTextPressedSuccess: string;
             textColorTextFocusSuccess: string;
             textColorTextDisabledSuccess: string;
@@ -2744,6 +2691,7 @@ declare const _default: import("vue").DefineComponent<{
     createThumbnailUrl?: CreateThumbnailUrl | undefined;
 }>, {
     method: string;
+    abstract: boolean;
     name: string;
     multiple: boolean;
     disabled: boolean | undefined;

package/es/upload/src/Upload.js

@@ -7,19 +7,18 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { h, defineComponent, computed, provide, toRef, ref } from 'vue';
+import { h, defineComponent, computed, provide, toRef, ref, Fragment, Teleport, nextTick } from 'vue';
 import { createId } from 'seemly';
 import { useMergedState } from 'vooks';
 import { useConfig, useTheme, useFormItem } from '../../_mixins';
-import { getFirstSlotVNode, warn, call } from '../../_utils';
-import { NFadeInExpandTransition } from '../../_internal';
+import { warn, call, throwError } from '../../_utils';
 import { uploadLight } from '../styles';
-import NUploadFile from './UploadFile';
-import NUploadDragger, { uploadDraggerKey } from './UploadDragger';
+import { uploadDraggerKey } from './UploadDragger';
 import style from './styles/index.cssr';
 import { uploadInjectionKey } from './interface';
 import { createImageDataUrl } from './utils';
-import { NImageGroup } from '../../image';
+import NUploadTrigger from './UploadTrigger';
+import NUploadFileList from './UploadFileList';
 /**
  * fils status ['pending', 'uploading', 'finished', 'removed', 'error']
  */
@@ -163,11 +162,14 @@ const uploadProps = Object.assign(Object.assign({}, useTheme.props), { name: {
     }, listType: {
         type: String,
         default: 'text'
-    }, onPreview: Function, createThumbnailUrl: Function });
+    }, onPreview: Function, createThumbnailUrl: Function, abstract: Boolean });
 export default defineComponent({
     name: 'Upload',
     props: uploadProps,
     setup(props) {
+        if (props.abstract && props.listType === 'image-card') {
+            throwError('upload', 'when the list-type is image-card, abstract is not supported.');
+        }
         const { mergedClsPrefixRef } = useConfig(props);
         const themeRef = useTheme('Upload', 'Upload', style, uploadLight, props, mergedClsPrefixRef);
         const formItem = useFormItem(props);
@@ -185,34 +187,6 @@ export default defineComponent({
             var _a;
             (_a = inputElRef.value) === null || _a === void 0 ? void 0 : _a.click();
         }
-        function handleTriggerClick() {
-            if (mergedDisabledRef.value)
-                return;
-            openFileDialog();
-        }
-        function handleTriggerDragOver(e) {
-            e.preventDefault();
-            dragOverRef.value = true;
-        }
-        function handleTriggerDragEnter(e) {
-            e.preventDefault();
-            dragOverRef.value = true;
-        }
-        function handleTriggerDragLeave(e) {
-            e.preventDefault();
-            dragOverRef.value = false;
-        }
-        function handleTriggerDrop(e) {
-            e.preventDefault();
-            if (!draggerInsideRef.value || mergedDisabledRef.value)
-                return;
-            const dataTransfer = e.dataTransfer;
-            const files = dataTransfer === null || dataTransfer === void 0 ? void 0 : dataTransfer.files;
-            if (files) {
-                handleFileAddition(files);
-            }
-            dragOverRef.value = false;
-        }
         function handleFileInputChange(e) {
             const target = e.target;
             handleFileAddition(target.files, e);
@@ -248,11 +222,23 @@ export default defineComponent({
                         file: fileInfo,
                         fileList: mergedFileListRef.value
                     })) !== false) {
-                    doChange(fileInfo, e, {
-                        append: true
-                    });
+                    return fileInfo;
                 }
-            }))).then(() => {
+                return null;
+            })))
+                .then((fileInfos) => __awaiter(this, void 0, void 0, function* () {
+                let nextTickChain = Promise.resolve();
+                fileInfos.forEach((fileInfo) => {
+                    nextTickChain = nextTickChain.then(nextTick).then(() => {
+                        fileInfo &&
+                            doChange(fileInfo, e, {
+                                append: true
+                            });
+                    });
+                });
+                return yield nextTickChain;
+            }))
+                .then(() => {
                 if (props.defaultUpload) {
                     submit();
                 }
@@ -322,6 +308,27 @@ export default defineComponent({
                     : yield createImageDataUrl(file.file);
             });
         }
+        const cssVarsRef = computed(() => {
+            const { common: { cubicBezierEaseInOut }, self: { draggerColor, draggerBorder, draggerBorderHover, itemColorHover, itemColorHoverError, itemTextColorError, itemTextColorSuccess, itemTextColor, itemIconColor, itemDisabledOpacity, lineHeight, borderRadius, fontSize, itemBorderImageCardError, itemBorderImageCard } } = themeRef.value;
+            return {
+                '--bezier': cubicBezierEaseInOut,
+                '--border-radius': borderRadius,
+                '--dragger-border': draggerBorder,
+                '--dragger-border-hover': draggerBorderHover,
+                '--dragger-color': draggerColor,
+                '--font-size': fontSize,
+                '--item-color-hover': itemColorHover,
+                '--item-color-hover-error': itemColorHoverError,
+                '--item-disabled-opacity': itemDisabledOpacity,
+                '--item-icon-color': itemIconColor,
+                '--item-text-color': itemTextColor,
+                '--item-text-color-error': itemTextColorError,
+                '--item-text-color-success': itemTextColorSuccess,
+                '--line-height': lineHeight,
+                '--item-border-image-card-error': itemBorderImageCardError,
+                '--item-border-image-card': itemBorderImageCard
+            };
+        });
         provide(uploadInjectionKey, {
             mergedClsPrefixRef,
             mergedThemeRef: themeRef,
@@ -338,81 +345,47 @@ export default defineComponent({
             doChange,
             showPreivewButtonRef: toRef(props, 'showPreivewButton'),
             onPreviewRef: toRef(props, 'onPreview'),
-            getFileThumbnailUrl
+            getFileThumbnailUrl,
+            listTypeRef: toRef(props, 'listType'),
+            dragOverRef,
+            openFileDialog,
+            draggerInsideRef,
+            handleFileAddition,
+            mergedDisabledRef,
+            fileListStyleRef: toRef(props, 'fileListStyle'),
+            abstractRef: toRef(props, 'abstract'),
+            cssVarsRef
         });
         return {
             mergedClsPrefix: mergedClsPrefixRef,
             draggerInsideRef,
             inputElRef,
-            mergedFileList: mergedFileListRef,
-            mergedDisabled: mergedDisabledRef,
             mergedTheme: themeRef,
             dragOver: dragOverRef,
-            handleTriggerDrop,
-            handleTriggerDragLeave,
-            handleTriggerDragEnter,
-            handleTriggerDragOver,
-            handleTriggerClick,
             handleFileInputChange,
             submit,
-            openFileDialog,
-            cssVars: computed(() => {
-                const { common: { cubicBezierEaseInOut }, self: { draggerColor, draggerBorder, draggerBorderHover, itemColorHover, itemColorHoverError, itemTextColorError, itemTextColorSuccess, itemTextColor, itemIconColor, itemDisabledOpacity, lineHeight, borderRadius, fontSize, itemBorderImageCardError, itemBorderImageCard } } = themeRef.value;
-                return {
-                    '--bezier': cubicBezierEaseInOut,
-                    '--border-radius': borderRadius,
-                    '--dragger-border': draggerBorder,
-                    '--dragger-border-hover': draggerBorderHover,
-                    '--dragger-color': draggerColor,
-                    '--font-size': fontSize,
-                    '--item-color-hover': itemColorHover,
-                    '--item-color-hover-error': itemColorHoverError,
-                    '--item-disabled-opacity': itemDisabledOpacity,
-                    '--item-icon-color': itemIconColor,
-                    '--item-text-color': itemTextColor,
-                    '--item-text-color-error': itemTextColorError,
-                    '--item-text-color-success': itemTextColorSuccess,
-                    '--line-height': lineHeight,
-                    '--item-border-image-card-error': itemBorderImageCardError,
-                    '--item-border-image-card': itemBorderImageCard
-                };
-            })
+            cssVars: cssVarsRef
         };
     },
     render() {
-        var _a;
-        const { draggerInsideRef, mergedClsPrefix, listType, $slots } = this;
-        if ($slots.default) {
-            const firstChild = getFirstSlotVNode($slots, 'default');
-            // @ts-expect-error
-            if ((_a = firstChild === null || firstChild === void 0 ? void 0 : firstChild.type) === null || _a === void 0 ? void 0 : _a[uploadDraggerKey]) {
+        var _a, _b, _c;
+        const { draggerInsideRef, mergedClsPrefix, $slots } = this;
+        if ($slots.default && !this.abstract) {
+            const firstChild = $slots.default()[0];
+            if ((_b = (_a = firstChild) === null || _a === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _b[uploadDraggerKey]) {
                 draggerInsideRef.value = true;
             }
         }
-        const isImageCardType = listType === 'image-card';
-        const uploadTrigger = (h("div", { class: [
-                `${mergedClsPrefix}-upload__trigger`,
-                isImageCardType && `${mergedClsPrefix}-upload__trigger--image-card`
-            ], onClick: this.handleTriggerClick, onDrop: this.handleTriggerDrop, onDragover: this.handleTriggerDragOver, onDragenter: this.handleTriggerDragEnter, onDragleave: this.handleTriggerDragLeave }, isImageCardType ? (h(NUploadDragger, null, this.$slots)) : (this.$slots)));
-        const createFileList = () => this.mergedFileList.map((file) => (h(NUploadFile, { clsPrefix: mergedClsPrefix, key: file.id, file: file, listType: listType })));
-        const uploadFileList = isImageCardType ? (h(NImageGroup, null, { default: createFileList })) : (h(NFadeInExpandTransition, { group: true }, {
-            default: createFileList
-        }));
-        return (h("div", { class: [
+        const inputNode = (h("input", { ref: "inputElRef", type: "file", class: `${mergedClsPrefix}-upload-file-input`, accept: this.accept, multiple: this.multiple, onChange: this.handleFileInputChange }));
+        return this.abstract ? (h(Fragment, null, (_c = $slots.default) === null || _c === void 0 ? void 0 :
+            _c.call($slots),
+            h(Teleport, { to: "body" }, inputNode))) : (h("div", { class: [
                 `${mergedClsPrefix}-upload`,
-                {
-                    [`${mergedClsPrefix}-upload--dragger-inside`]: draggerInsideRef.value,
-                    [`${mergedClsPrefix}-upload--drag-over`]: this.dragOver,
-                    [`${mergedClsPrefix}-upload--disabled`]: this.mergedDisabled
-                }
+                draggerInsideRef.value && `${mergedClsPrefix}-upload--dragger-inside`,
+                this.dragOver && `${mergedClsPrefix}-upload--drag-over`
             ], style: this.cssVars },
-            h("input", { ref: "inputElRef", type: "file", class: `${mergedClsPrefix}-upload__file-input`, accept: this.accept, multiple: this.multiple, onChange: this.handleFileInputChange }),
-            this.listType !== 'image-card' && uploadTrigger,
-            this.showFileList && (h("div", { class: [
-                    `${mergedClsPrefix}-upload-file-list`,
-                    isImageCardType && `${mergedClsPrefix}-upload-file-list--grid`
-                ], style: this.fileListStyle },
-                uploadFileList,
-                isImageCardType && uploadTrigger))));
+            inputNode,
+            this.listType !== 'image-card' && (h(NUploadTrigger, null, $slots)),
+            this.showFileList && h(NUploadFileList, null, $slots)));
     }
 });

package/es/upload/src/UploadDragger.js

@@ -10,6 +10,12 @@ export default defineComponent({
         if (!NUpload) {
             throwError('upload-dragger', '`n-upload-dragger` must be placed inside `n-upload`.');
         }
-        return () => (h("div", { class: `${NUpload.mergedClsPrefixRef.value}-upload-dragger` }, slots));
+        return () => {
+            const { mergedClsPrefixRef: { value: mergedClsPrefix }, mergedDisabledRef: { value: mergedDisabled } } = NUpload;
+            return (h("div", { class: [
+                    `${mergedClsPrefix}-upload-dragger`,
+                    mergedDisabled && `${mergedClsPrefix}-upload-dragger--disabled`
+                ] }, slots));
+        };
     }
 });

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

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, () => JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{} & {} & {}>, {}>;
+export default _default;

package/es/upload/src/UploadFileList.js

@@ -0,0 +1,34 @@
+import { h, defineComponent, inject, computed } from 'vue';
+import { throwError } from '../../_utils';
+import { uploadInjectionKey } from './interface';
+import NUploadFile from './UploadFile';
+import { NImageGroup } from '../../image';
+import { NFadeInExpandTransition } from '../../_internal';
+import NUploadTrigger from './UploadTrigger';
+export default defineComponent({
+    name: 'UploadFileList',
+    setup(_, { slots }) {
+        const NUpload = inject(uploadInjectionKey, null);
+        if (!NUpload) {
+            throwError('upload-file-list', '`n-upload-file-list` must be placed inside `n-upload`.');
+        }
+        const { mergedClsPrefixRef, listTypeRef, mergedFileListRef, fileListStyleRef, cssVarsRef, mergedDisabledRef } = NUpload;
+        const isImageCardTypeRef = computed(() => listTypeRef.value === 'image-card');
+        const renderFileList = () => mergedFileListRef.value.map((file) => (h(NUploadFile, { clsPrefix: mergedClsPrefixRef.value, key: file.id, file: file, listType: listTypeRef.value })));
+        const renderUploadFileList = () => isImageCardTypeRef.value ? (h(NImageGroup, null, { default: renderFileList })) : (h(NFadeInExpandTransition, { group: true }, {
+            default: renderFileList
+        }));
+        return () => {
+            const { value: mergedClsPrefix } = mergedClsPrefixRef;
+            return (h("div", { class: [
+                    `${mergedClsPrefix}-upload-file-list`,
+                    mergedDisabledRef.value &&
+                        `${mergedClsPrefix}-upload-file-list--disabled`,
+                    isImageCardTypeRef.value &&
+                        `${mergedClsPrefix}-upload-file-list--grid`
+                ], style: [cssVarsRef.value, fileListStyleRef.value] },
+                renderUploadFileList(),
+                isImageCardTypeRef.value && h(NUploadTrigger, null, slots)));
+        };
+    }
+});

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

@@ -9,10 +9,6 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<"error" | "info" | "success">;
         required: true;
     };
-    delay: {
-        type: NumberConstructor;
-        default: number;
-    };
 }, {
     mergedTheme: import("vue").Ref<{
         common: {
@@ -368,14 +364,11 @@ declare const _default: import("vue").DefineComponent<{
     show?: unknown;
     percentage?: unknown;
     status?: unknown;
-    delay?: unknown;
 } & {
     show: boolean;
-    delay: number;
     percentage: number;
     status: "error" | "info" | "success";
 } & {}>, {
     show: boolean;
-    delay: number;
 }>;
 export default _default;

package/es/upload/src/UploadProgress.js

@@ -13,13 +13,9 @@ export default defineComponent({
         status: {
             type: String,
             required: true
-        },
-        delay: {
-            type: Number,
-            default: 900
         }
     },
-    setup(props) {
+    setup() {
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         const NUpload = inject(uploadInjectionKey);
         return {

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

@@ -0,0 +1,12 @@
+declare const _default: import("vue").DefineComponent<{
+    abstract: BooleanConstructor;
+}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>[] | JSX.Element | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+    abstract?: unknown;
+} & {
+    abstract: boolean;
+} & {}>, {
+    abstract: boolean;
+}>;
+export default _default;

package/es/upload/src/UploadTrigger.js

@@ -0,0 +1,63 @@
+import { h, defineComponent, inject, computed } from 'vue';
+import { throwError } from '../../_utils';
+import { uploadInjectionKey } from './interface';
+import NUploadDragger from './UploadDragger';
+export default defineComponent({
+    name: 'UploadTrigger',
+    props: {
+        abstract: Boolean
+    },
+    setup(props, { slots }) {
+        const NUpload = inject(uploadInjectionKey, null);
+        if (!NUpload) {
+            throwError('upload-trigger', '`n-upload-trigger` must be placed inside `n-upload`.');
+        }
+        const { mergedClsPrefixRef, mergedDisabledRef, listTypeRef, disabledRef, dragOverRef, openFileDialog, draggerInsideRef, handleFileAddition } = NUpload;
+        const isImageCardTypeRef = computed(() => listTypeRef.value === 'image-card');
+        function handleTriggerClick() {
+            if (disabledRef.value)
+                return;
+            openFileDialog();
+        }
+        function handleTriggerDragOver(e) {
+            e.preventDefault();
+            dragOverRef.value = true;
+        }
+        function handleTriggerDragEnter(e) {
+            e.preventDefault();
+            dragOverRef.value = true;
+        }
+        function handleTriggerDragLeave(e) {
+            e.preventDefault();
+            dragOverRef.value = false;
+        }
+        function handleTriggerDrop(e) {
+            e.preventDefault();
+            if (!draggerInsideRef.value || disabledRef.value)
+                return;
+            const dataTransfer = e.dataTransfer;
+            const files = dataTransfer === null || dataTransfer === void 0 ? void 0 : dataTransfer.files;
+            if (files) {
+                handleFileAddition(files);
+            }
+            dragOverRef.value = false;
+        }
+        return () => {
+            var _a;
+            const { value: mergedClsPrefix } = mergedClsPrefixRef;
+            return props.abstract ? ((_a = slots.default) === null || _a === void 0 ? void 0 : _a.call(slots, {
+                handleClick: handleTriggerClick,
+                handleDrop: handleTriggerDrop,
+                handleDragOver: handleTriggerDragOver,
+                handleDragEnter: handleTriggerDragEnter,
+                handleDragLeave: handleTriggerDragLeave
+            })) : (h("div", { class: [
+                    `${mergedClsPrefix}-upload-trigger`,
+                    mergedDisabledRef.value &&
+                        `${mergedClsPrefix}-upload-trigger--disabled`,
+                    isImageCardTypeRef.value &&
+                        `${mergedClsPrefix}-upload-trigger--image-card`
+                ], onClick: handleTriggerClick, onDrop: handleTriggerDrop, onDragover: handleTriggerDragOver, onDragenter: handleTriggerDragEnter, onDragleave: handleTriggerDragLeave }, isImageCardTypeRef.value ? (h(NUploadDragger, null, slots)) : (slots)));
+        };
+    }
+});

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

@@ -1,4 +1,4 @@
-import { Ref, InjectionKey } from 'vue';
+import { Ref, InjectionKey, CSSProperties } from 'vue';
 import type { MergedTheme } from '../../_mixins';
 import type { UploadTheme } from '../styles';
 export interface FileInfo {
@@ -50,11 +50,22 @@ export interface UploadInjection {
     onRemoveRef: Ref<OnRemove | undefined>;
     onDownloadRef: Ref<OnDownload | undefined>;
     XhrMap: Map<string, XMLHttpRequest>;
-    submit: (fileId?: string) => void;
     doChange: DoChange;
     showPreivewButtonRef: Ref<boolean>;
     onPreviewRef: Ref<OnPreview | undefined>;
+    listTypeRef: Ref<listType>;
+    dragOverRef: Ref<boolean>;
+    draggerInsideRef: {
+        value: boolean;
+    };
+    fileListStyleRef: Ref<string | CSSProperties | undefined>;
+    mergedDisabledRef: Ref<boolean>;
+    abstractRef: Ref<boolean>;
+    cssVarsRef: Ref<CSSProperties>;
+    submit: (fileId?: string) => void;
     getFileThumbnailUrl: (file: FileInfo) => Promise<string>;
+    handleFileAddition: (files: FileList | null, e?: Event) => void;
+    openFileDialog: () => void;
 }
 export declare const uploadInjectionKey: InjectionKey<UploadInjection>;
 export interface XhrHandlers {