前端初始化
This commit is contained in:
“hsc”
+13
@@ -0,0 +1,13 @@
|
||||
import { UploadRequestHandler } from "./upload.js";
|
||||
|
||||
//#region ../../packages/components/upload/src/ajax.d.ts
|
||||
declare class UploadAjaxError extends Error {
|
||||
name: string;
|
||||
status: number;
|
||||
method: string;
|
||||
url: string;
|
||||
constructor(message: string, status: number, method: string, url: string);
|
||||
}
|
||||
declare const ajaxUpload: UploadRequestHandler;
|
||||
//#endregion
|
||||
export { UploadAjaxError, ajaxUpload };
|
||||
+68
@@ -0,0 +1,68 @@
|
||||
import { isArray, isString } from "../../../utils/types.mjs";
|
||||
import { throwError } from "../../../utils/error.mjs";
|
||||
import { isNil } from "lodash-unified";
|
||||
//#region ../../packages/components/upload/src/ajax.ts
|
||||
const SCOPE = "ElUpload";
|
||||
var UploadAjaxError = class extends Error {
|
||||
constructor(message, status, method, url) {
|
||||
super(message);
|
||||
this.name = "UploadAjaxError";
|
||||
this.status = status;
|
||||
this.method = method;
|
||||
this.url = url;
|
||||
}
|
||||
};
|
||||
function getError(action, option, xhr) {
|
||||
let msg;
|
||||
if (xhr.response) msg = `${xhr.response.error || xhr.response}`;
|
||||
else if (xhr.responseText) msg = `${xhr.responseText}`;
|
||||
else msg = `fail to ${option.method} ${action} ${xhr.status}`;
|
||||
return new UploadAjaxError(msg, xhr.status, option.method, action);
|
||||
}
|
||||
function getBody(xhr) {
|
||||
const text = xhr.responseText || xhr.response;
|
||||
if (!text) return text;
|
||||
try {
|
||||
return JSON.parse(text);
|
||||
} catch {
|
||||
return text;
|
||||
}
|
||||
}
|
||||
const ajaxUpload = (option) => {
|
||||
if (typeof XMLHttpRequest === "undefined") throwError(SCOPE, "XMLHttpRequest is undefined");
|
||||
const xhr = new XMLHttpRequest();
|
||||
const action = option.action;
|
||||
if (xhr.upload) xhr.upload.addEventListener("progress", (evt) => {
|
||||
const progressEvt = evt;
|
||||
progressEvt.percent = evt.total > 0 ? evt.loaded / evt.total * 100 : 0;
|
||||
option.onProgress(progressEvt);
|
||||
});
|
||||
const formData = new FormData();
|
||||
if (option.data) for (const [key, value] of Object.entries(option.data)) if (isArray(value)) if (value.length === 2 && value[0] instanceof Blob && isString(value[1])) formData.append(key, value[0], value[1]);
|
||||
else value.forEach((item) => {
|
||||
formData.append(key, item);
|
||||
});
|
||||
else formData.append(key, value);
|
||||
formData.append(option.filename, option.file, option.file.name);
|
||||
xhr.addEventListener("error", () => {
|
||||
option.onError(getError(action, option, xhr));
|
||||
});
|
||||
xhr.addEventListener("load", () => {
|
||||
if (xhr.status < 200 || xhr.status >= 300) return option.onError(getError(action, option, xhr));
|
||||
option.onSuccess(getBody(xhr));
|
||||
});
|
||||
xhr.open(option.method, action, true);
|
||||
if (option.withCredentials && "withCredentials" in xhr) xhr.withCredentials = true;
|
||||
const headers = option.headers || {};
|
||||
if (headers instanceof Headers) headers.forEach((value, key) => xhr.setRequestHeader(key, value));
|
||||
else for (const [key, value] of Object.entries(headers)) {
|
||||
if (isNil(value)) continue;
|
||||
xhr.setRequestHeader(key, String(value));
|
||||
}
|
||||
xhr.send(formData);
|
||||
return xhr;
|
||||
};
|
||||
//#endregion
|
||||
export { UploadAjaxError, ajaxUpload };
|
||||
|
||||
//# sourceMappingURL=ajax.mjs.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"ajax.mjs","names":[],"sources":["../../../../../../packages/components/upload/src/ajax.ts"],"sourcesContent":["import { isNil } from 'lodash-unified'\nimport { isArray, isString, throwError } from '@element-plus/utils'\n\nimport type {\n UploadProgressEvent,\n UploadRequestHandler,\n UploadRequestOptions,\n} from './upload'\n\nconst SCOPE = 'ElUpload'\n\nexport class UploadAjaxError extends Error {\n name = 'UploadAjaxError'\n status: number\n method: string\n url: string\n\n constructor(message: string, status: number, method: string, url: string) {\n super(message)\n this.status = status\n this.method = method\n this.url = url\n }\n}\n\nfunction getError(\n action: string,\n option: UploadRequestOptions,\n xhr: XMLHttpRequest\n) {\n let msg: string\n if (xhr.response) {\n msg = `${xhr.response.error || xhr.response}`\n } else if (xhr.responseText) {\n msg = `${xhr.responseText}`\n } else {\n msg = `fail to ${option.method} ${action} ${xhr.status}`\n }\n\n return new UploadAjaxError(msg, xhr.status, option.method, action)\n}\n\nfunction getBody(xhr: XMLHttpRequest): XMLHttpRequestResponseType {\n const text = xhr.responseText || xhr.response\n if (!text) {\n return text\n }\n\n try {\n return JSON.parse(text)\n } catch {\n return text\n }\n}\n\nexport const ajaxUpload: UploadRequestHandler = (option) => {\n if (typeof XMLHttpRequest === 'undefined')\n throwError(SCOPE, 'XMLHttpRequest is undefined')\n\n const xhr = new XMLHttpRequest()\n const action = option.action\n\n if (xhr.upload) {\n xhr.upload.addEventListener('progress', (evt) => {\n const progressEvt = evt as UploadProgressEvent\n progressEvt.percent = evt.total > 0 ? (evt.loaded / evt.total) * 100 : 0\n option.onProgress(progressEvt)\n })\n }\n\n const formData = new FormData()\n if (option.data) {\n for (const [key, value] of Object.entries(option.data)) {\n if (isArray(value)) {\n if (\n value.length === 2 &&\n value[0] instanceof Blob &&\n isString(value[1])\n ) {\n formData.append(key, value[0], value[1])\n } else {\n value.forEach((item) => {\n formData.append(key, item)\n })\n }\n } else formData.append(key, value)\n }\n }\n formData.append(option.filename, option.file, option.file.name)\n\n xhr.addEventListener('error', () => {\n option.onError(getError(action, option, xhr))\n })\n\n xhr.addEventListener('load', () => {\n if (xhr.status < 200 || xhr.status >= 300) {\n return option.onError(getError(action, option, xhr))\n }\n option.onSuccess(getBody(xhr))\n })\n\n xhr.open(option.method, action, true)\n\n if (option.withCredentials && 'withCredentials' in xhr) {\n xhr.withCredentials = true\n }\n\n const headers = option.headers || {}\n if (headers instanceof Headers) {\n headers.forEach((value, key) => xhr.setRequestHeader(key, value))\n } else {\n for (const [key, value] of Object.entries(headers)) {\n if (isNil(value)) continue\n xhr.setRequestHeader(key, String(value))\n }\n }\n\n xhr.send(formData)\n return xhr\n}\n"],"mappings":";;;;AASA,MAAM,QAAQ;AAEd,IAAa,kBAAb,cAAqC,MAAM;CAMzC,YAAY,SAAiB,QAAgB,QAAgB,KAAa;EACxE,MAAM,QAAQ;cANT;EAOL,KAAK,SAAS;EACd,KAAK,SAAS;EACd,KAAK,MAAM;;;AAIf,SAAS,SACP,QACA,QACA,KACA;CACA,IAAI;CACJ,IAAI,IAAI,UACN,MAAM,GAAG,IAAI,SAAS,SAAS,IAAI;MAC9B,IAAI,IAAI,cACb,MAAM,GAAG,IAAI;MAEb,MAAM,WAAW,OAAO,OAAO,GAAG,OAAO,GAAG,IAAI;CAGlD,OAAO,IAAI,gBAAgB,KAAK,IAAI,QAAQ,OAAO,QAAQ,OAAO;;AAGpE,SAAS,QAAQ,KAAiD;CAChE,MAAM,OAAO,IAAI,gBAAgB,IAAI;CACrC,IAAI,CAAC,MACH,OAAO;CAGT,IAAI;EACF,OAAO,KAAK,MAAM,KAAK;SACjB;EACN,OAAO;;;AAIX,MAAa,cAAoC,WAAW;CAC1D,IAAI,OAAO,mBAAmB,aAC5B,WAAW,OAAO,8BAA8B;CAElD,MAAM,MAAM,IAAI,gBAAgB;CAChC,MAAM,SAAS,OAAO;CAEtB,IAAI,IAAI,QACN,IAAI,OAAO,iBAAiB,aAAa,QAAQ;EAC/C,MAAM,cAAc;EACpB,YAAY,UAAU,IAAI,QAAQ,IAAK,IAAI,SAAS,IAAI,QAAS,MAAM;EACvE,OAAO,WAAW,YAAY;GAC9B;CAGJ,MAAM,WAAW,IAAI,UAAU;CAC/B,IAAI,OAAO,MACT,KAAK,MAAM,CAAC,KAAK,UAAU,OAAO,QAAQ,OAAO,KAAK,EACpD,IAAI,QAAQ,MAAM,EAChB,IACE,MAAM,WAAW,KACjB,MAAM,cAAc,QACpB,SAAS,MAAM,GAAG,EAElB,SAAS,OAAO,KAAK,MAAM,IAAI,MAAM,GAAG;MAExC,MAAM,SAAS,SAAS;EACtB,SAAS,OAAO,KAAK,KAAK;GAC1B;MAEC,SAAS,OAAO,KAAK,MAAM;CAGtC,SAAS,OAAO,OAAO,UAAU,OAAO,MAAM,OAAO,KAAK,KAAK;CAE/D,IAAI,iBAAiB,eAAe;EAClC,OAAO,QAAQ,SAAS,QAAQ,QAAQ,IAAI,CAAC;GAC7C;CAEF,IAAI,iBAAiB,cAAc;EACjC,IAAI,IAAI,SAAS,OAAO,IAAI,UAAU,KACpC,OAAO,OAAO,QAAQ,SAAS,QAAQ,QAAQ,IAAI,CAAC;EAEtD,OAAO,UAAU,QAAQ,IAAI,CAAC;GAC9B;CAEF,IAAI,KAAK,OAAO,QAAQ,QAAQ,KAAK;CAErC,IAAI,OAAO,mBAAmB,qBAAqB,KACjD,IAAI,kBAAkB;CAGxB,MAAM,UAAU,OAAO,WAAW,EAAE;CACpC,IAAI,mBAAmB,SACrB,QAAQ,SAAS,OAAO,QAAQ,IAAI,iBAAiB,KAAK,MAAM,CAAC;MAEjE,KAAK,MAAM,CAAC,KAAK,UAAU,OAAO,QAAQ,QAAQ,EAAE;EAClD,IAAI,MAAM,MAAM,EAAE;EAClB,IAAI,iBAAiB,KAAK,OAAO,MAAM,CAAC;;CAI5C,IAAI,KAAK,SAAS;CAClB,OAAO"}
|
||||
+9
@@ -0,0 +1,9 @@
|
||||
import { InjectionKey, Ref } from "vue";
|
||||
|
||||
//#region ../../packages/components/upload/src/constants.d.ts
|
||||
interface UploadContext {
|
||||
accept: Ref<string>;
|
||||
}
|
||||
declare const uploadContextKey: InjectionKey<UploadContext>;
|
||||
//#endregion
|
||||
export { UploadContext, uploadContextKey };
|
||||
+6
@@ -0,0 +1,6 @@
|
||||
//#region ../../packages/components/upload/src/constants.ts
|
||||
const uploadContextKey = Symbol("uploadContextKey");
|
||||
//#endregion
|
||||
export { uploadContextKey };
|
||||
|
||||
//# sourceMappingURL=constants.mjs.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"constants.mjs","names":[],"sources":["../../../../../../packages/components/upload/src/constants.ts"],"sourcesContent":["import type { InjectionKey, Ref } from 'vue'\n\nexport interface UploadContext {\n accept: Ref<string>\n}\n\nexport const uploadContextKey: InjectionKey<UploadContext> =\n Symbol('uploadContextKey')\n"],"mappings":";AAMA,MAAa,mBACX,OAAO,mBAAmB"}
|
||||
+143
@@ -0,0 +1,143 @@
|
||||
import { EpPropFinalized, EpPropMergeType } from "../../../utils/vue/props/types.js";
|
||||
import { Awaitable, Mutable } from "../../../utils/typescript.js";
|
||||
import { UploadAjaxError } from "./ajax.js";
|
||||
import { UploadBaseProps, UploadData, UploadFile, UploadHooks, UploadProgressEvent, UploadRawFile, UploadRequestHandler, UploadUserFile } from "./upload.js";
|
||||
import _default from "./upload-content.vue.js";
|
||||
import * as _$vue from "vue";
|
||||
import { ExtractPublicPropTypes } from "vue";
|
||||
|
||||
//#region ../../packages/components/upload/src/upload-content.d.ts
|
||||
interface UploadContentProps extends UploadBaseProps {
|
||||
beforeUpload?: UploadHooks['beforeUpload'];
|
||||
onRemove?: (file: UploadFile | UploadRawFile) => void;
|
||||
onStart?: (rawFile: UploadRawFile) => void;
|
||||
onSuccess?: (response: any, rawFile: UploadRawFile) => unknown;
|
||||
onProgress?: (evt: UploadProgressEvent, rawFile: UploadRawFile) => void;
|
||||
onError?: (err: UploadAjaxError, rawFile: UploadRawFile) => void;
|
||||
onExceed?: UploadHooks['onExceed'];
|
||||
}
|
||||
/**
|
||||
* @deprecated Removed after 3.0.0, Use `UploadContentProps` instead.
|
||||
*/
|
||||
declare const uploadContentProps: {
|
||||
readonly beforeUpload: EpPropFinalized<(new (...args: any[]) => (rawFile: UploadRawFile) => Awaitable<void | undefined | null | boolean | File | Blob>) | (() => (rawFile: UploadRawFile) => Awaitable<void | undefined | null | boolean | File | Blob>) | {
|
||||
(): (rawFile: UploadRawFile) => Awaitable<void | undefined | null | boolean | File | Blob>;
|
||||
new (): any;
|
||||
readonly prototype: any;
|
||||
} | (((new (...args: any[]) => (rawFile: UploadRawFile) => Awaitable<void | undefined | null | boolean | File | Blob>) | (() => (rawFile: UploadRawFile) => Awaitable<void | undefined | null | boolean | File | Blob>) | {
|
||||
(): (rawFile: UploadRawFile) => Awaitable<void | undefined | null | boolean | File | Blob>;
|
||||
new (): any;
|
||||
readonly prototype: any;
|
||||
}) | null)[], unknown, unknown, () => void, boolean>;
|
||||
readonly onRemove: EpPropFinalized<(new (...args: any[]) => (file: UploadFile | UploadRawFile) => void) | (() => (file: UploadFile | UploadRawFile) => void) | {
|
||||
(): (file: UploadFile | UploadRawFile) => void;
|
||||
new (): any;
|
||||
readonly prototype: any;
|
||||
} | (((new (...args: any[]) => (file: UploadFile | UploadRawFile) => void) | (() => (file: UploadFile | UploadRawFile) => void) | {
|
||||
(): (file: UploadFile | UploadRawFile) => void;
|
||||
new (): any;
|
||||
readonly prototype: any;
|
||||
}) | null)[], unknown, unknown, () => void, boolean>;
|
||||
readonly onStart: EpPropFinalized<(new (...args: any[]) => (rawFile: UploadRawFile) => void) | (() => (rawFile: UploadRawFile) => void) | {
|
||||
(): (rawFile: UploadRawFile) => void;
|
||||
new (): any;
|
||||
readonly prototype: any;
|
||||
} | (((new (...args: any[]) => (rawFile: UploadRawFile) => void) | (() => (rawFile: UploadRawFile) => void) | {
|
||||
(): (rawFile: UploadRawFile) => void;
|
||||
new (): any;
|
||||
readonly prototype: any;
|
||||
}) | null)[], unknown, unknown, () => void, boolean>;
|
||||
readonly onSuccess: EpPropFinalized<(new (...args: any[]) => (response: any, rawFile: UploadRawFile) => unknown) | (() => (response: any, rawFile: UploadRawFile) => unknown) | {
|
||||
(): (response: any, rawFile: UploadRawFile) => unknown;
|
||||
new (): any;
|
||||
readonly prototype: any;
|
||||
} | (((new (...args: any[]) => (response: any, rawFile: UploadRawFile) => unknown) | (() => (response: any, rawFile: UploadRawFile) => unknown) | {
|
||||
(): (response: any, rawFile: UploadRawFile) => unknown;
|
||||
new (): any;
|
||||
readonly prototype: any;
|
||||
}) | null)[], unknown, unknown, () => void, boolean>;
|
||||
readonly onProgress: EpPropFinalized<(new (...args: any[]) => (evt: UploadProgressEvent, rawFile: UploadRawFile) => void) | (() => (evt: UploadProgressEvent, rawFile: UploadRawFile) => void) | {
|
||||
(): (evt: UploadProgressEvent, rawFile: UploadRawFile) => void;
|
||||
new (): any;
|
||||
readonly prototype: any;
|
||||
} | (((new (...args: any[]) => (evt: UploadProgressEvent, rawFile: UploadRawFile) => void) | (() => (evt: UploadProgressEvent, rawFile: UploadRawFile) => void) | {
|
||||
(): (evt: UploadProgressEvent, rawFile: UploadRawFile) => void;
|
||||
new (): any;
|
||||
readonly prototype: any;
|
||||
}) | null)[], unknown, unknown, () => void, boolean>;
|
||||
readonly onError: EpPropFinalized<(new (...args: any[]) => (err: UploadAjaxError, rawFile: UploadRawFile) => void) | (() => (err: UploadAjaxError, rawFile: UploadRawFile) => void) | {
|
||||
(): (err: UploadAjaxError, rawFile: UploadRawFile) => void;
|
||||
new (): any;
|
||||
readonly prototype: any;
|
||||
} | (((new (...args: any[]) => (err: UploadAjaxError, rawFile: UploadRawFile) => void) | (() => (err: UploadAjaxError, rawFile: UploadRawFile) => void) | {
|
||||
(): (err: UploadAjaxError, rawFile: UploadRawFile) => void;
|
||||
new (): any;
|
||||
readonly prototype: any;
|
||||
}) | null)[], unknown, unknown, () => void, boolean>;
|
||||
readonly onExceed: EpPropFinalized<(new (...args: any[]) => (files: File[], uploadFiles: UploadUserFile[]) => void) | (() => (files: File[], uploadFiles: UploadUserFile[]) => void) | {
|
||||
(): (files: File[], uploadFiles: UploadUserFile[]) => void;
|
||||
new (): any;
|
||||
readonly prototype: any;
|
||||
} | (((new (...args: any[]) => (files: File[], uploadFiles: UploadUserFile[]) => void) | (() => (files: File[], uploadFiles: UploadUserFile[]) => void) | {
|
||||
(): (files: File[], uploadFiles: UploadUserFile[]) => void;
|
||||
new (): any;
|
||||
readonly prototype: any;
|
||||
}) | null)[], unknown, unknown, () => void, boolean>;
|
||||
readonly action: EpPropFinalized<StringConstructor, unknown, unknown, "#", boolean>;
|
||||
readonly headers: {
|
||||
readonly type: _$vue.PropType<EpPropMergeType<(new (...args: any[]) => Record<string, any> | Headers) | (() => Record<string, any> | Headers) | (((new (...args: any[]) => Record<string, any> | Headers) | (() => Record<string, any> | Headers)) | null)[], unknown, unknown>>;
|
||||
readonly required: false;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
__epPropKey: true;
|
||||
};
|
||||
readonly method: EpPropFinalized<StringConstructor, unknown, unknown, "post", boolean>;
|
||||
readonly data: EpPropFinalized<(new (...args: any[]) => Mutable<Record<string, any>> | Promise<Mutable<Record<string, any>>> | ((rawFile: UploadRawFile) => Awaitable<UploadData>)) | (() => Awaitable<Mutable<Record<string, any>>> | ((rawFile: UploadRawFile) => Awaitable<UploadData>)) | (((new (...args: any[]) => Mutable<Record<string, any>> | Promise<Mutable<Record<string, any>>> | ((rawFile: UploadRawFile) => Awaitable<UploadData>)) | (() => Awaitable<Mutable<Record<string, any>>> | ((rawFile: UploadRawFile) => Awaitable<UploadData>))) | null)[], unknown, unknown, () => Mutable<{}>, boolean>;
|
||||
readonly multiple: BooleanConstructor;
|
||||
readonly name: EpPropFinalized<StringConstructor, unknown, unknown, "file", boolean>;
|
||||
readonly drag: BooleanConstructor;
|
||||
readonly withCredentials: BooleanConstructor;
|
||||
readonly showFileList: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
|
||||
readonly accept: EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
|
||||
readonly fileList: EpPropFinalized<(new (...args: any[]) => UploadUserFile[]) | (() => UploadUserFile[]) | (((new (...args: any[]) => UploadUserFile[]) | (() => UploadUserFile[])) | null)[], unknown, unknown, () => [], boolean>;
|
||||
readonly autoUpload: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
|
||||
readonly listType: EpPropFinalized<StringConstructor, "picture" | "text" | "picture-card", unknown, "text", boolean>;
|
||||
readonly httpRequest: EpPropFinalized<(new (...args: any[]) => UploadRequestHandler) | (() => UploadRequestHandler) | {
|
||||
(): UploadRequestHandler;
|
||||
new (): any;
|
||||
readonly prototype: any;
|
||||
} | (((new (...args: any[]) => UploadRequestHandler) | (() => UploadRequestHandler) | {
|
||||
(): UploadRequestHandler;
|
||||
new (): any;
|
||||
readonly prototype: any;
|
||||
}) | null)[], unknown, unknown, UploadRequestHandler, boolean>;
|
||||
readonly disabled: EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, boolean>;
|
||||
readonly limit: NumberConstructor;
|
||||
readonly directory: BooleanConstructor;
|
||||
};
|
||||
/**
|
||||
* @deprecated Removed after 3.0.0, Use `UploadContentProps` instead.
|
||||
*/
|
||||
type UploadContentPropsPublic = ExtractPublicPropTypes<typeof uploadContentProps>;
|
||||
type UploadContentInstance = InstanceType<typeof _default> & unknown;
|
||||
declare const uploadContentPropsDefaults: {
|
||||
readonly beforeUpload: () => void;
|
||||
readonly onRemove: () => void;
|
||||
readonly onStart: () => void;
|
||||
readonly onSuccess: () => void;
|
||||
readonly onProgress: () => void;
|
||||
readonly onError: () => void;
|
||||
readonly onExceed: () => void;
|
||||
readonly action: "#";
|
||||
readonly method: "post";
|
||||
readonly data: () => Mutable<{}>;
|
||||
readonly name: "file";
|
||||
readonly showFileList: true;
|
||||
readonly accept: "";
|
||||
readonly fileList: () => never[];
|
||||
readonly autoUpload: true;
|
||||
readonly listType: "text";
|
||||
readonly httpRequest: UploadRequestHandler;
|
||||
readonly disabled: undefined;
|
||||
};
|
||||
//#endregion
|
||||
export { UploadContentInstance, UploadContentProps, UploadContentPropsPublic, uploadContentProps, uploadContentPropsDefaults };
|
||||
+52
@@ -0,0 +1,52 @@
|
||||
import { buildProps, definePropType } from "../../../utils/vue/props/runtime.mjs";
|
||||
import { NOOP } from "../../../utils/functions.mjs";
|
||||
import { uploadBaseProps, uploadBasePropsDefaults } from "./upload.mjs";
|
||||
//#region ../../packages/components/upload/src/upload-content.ts
|
||||
/**
|
||||
* @deprecated Removed after 3.0.0, Use `UploadContentProps` instead.
|
||||
*/
|
||||
const uploadContentProps = buildProps({
|
||||
...uploadBaseProps,
|
||||
beforeUpload: {
|
||||
type: definePropType(Function),
|
||||
default: NOOP
|
||||
},
|
||||
onRemove: {
|
||||
type: definePropType(Function),
|
||||
default: NOOP
|
||||
},
|
||||
onStart: {
|
||||
type: definePropType(Function),
|
||||
default: NOOP
|
||||
},
|
||||
onSuccess: {
|
||||
type: definePropType(Function),
|
||||
default: NOOP
|
||||
},
|
||||
onProgress: {
|
||||
type: definePropType(Function),
|
||||
default: NOOP
|
||||
},
|
||||
onError: {
|
||||
type: definePropType(Function),
|
||||
default: NOOP
|
||||
},
|
||||
onExceed: {
|
||||
type: definePropType(Function),
|
||||
default: NOOP
|
||||
}
|
||||
});
|
||||
const uploadContentPropsDefaults = {
|
||||
...uploadBasePropsDefaults,
|
||||
beforeUpload: NOOP,
|
||||
onRemove: NOOP,
|
||||
onStart: NOOP,
|
||||
onSuccess: NOOP,
|
||||
onProgress: NOOP,
|
||||
onError: NOOP,
|
||||
onExceed: NOOP
|
||||
};
|
||||
//#endregion
|
||||
export { uploadContentProps, uploadContentPropsDefaults };
|
||||
|
||||
//# sourceMappingURL=upload-content.mjs.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"upload-content.mjs","names":[],"sources":["../../../../../../packages/components/upload/src/upload-content.ts"],"sourcesContent":["import { NOOP, buildProps, definePropType } from '@element-plus/utils'\nimport { uploadBaseProps, uploadBasePropsDefaults } from './upload'\n\nimport type { ExtractPublicPropTypes } from 'vue'\nimport type {\n UploadBaseProps,\n UploadFile,\n UploadHooks,\n UploadProgressEvent,\n UploadRawFile,\n} from './upload'\nimport type UploadContent from './upload-content.vue'\nimport type { UploadAjaxError } from './ajax'\n\nexport interface UploadContentProps extends UploadBaseProps {\n beforeUpload?: UploadHooks['beforeUpload']\n onRemove?: (file: UploadFile | UploadRawFile) => void\n onStart?: (rawFile: UploadRawFile) => void\n onSuccess?: (response: any, rawFile: UploadRawFile) => unknown\n onProgress?: (evt: UploadProgressEvent, rawFile: UploadRawFile) => void\n onError?: (err: UploadAjaxError, rawFile: UploadRawFile) => void\n onExceed?: UploadHooks['onExceed']\n}\n\n/**\n * @deprecated Removed after 3.0.0, Use `UploadContentProps` instead.\n */\nexport const uploadContentProps = buildProps({\n ...uploadBaseProps,\n\n beforeUpload: {\n type: definePropType<UploadHooks['beforeUpload']>(Function),\n default: NOOP,\n },\n onRemove: {\n type: definePropType<(file: UploadFile | UploadRawFile) => void>(Function),\n default: NOOP,\n },\n onStart: {\n type: definePropType<(rawFile: UploadRawFile) => void>(Function),\n default: NOOP,\n },\n onSuccess: {\n type: definePropType<(response: any, rawFile: UploadRawFile) => unknown>(\n Function\n ),\n default: NOOP,\n },\n onProgress: {\n type: definePropType<\n (evt: UploadProgressEvent, rawFile: UploadRawFile) => void\n >(Function),\n default: NOOP,\n },\n onError: {\n type: definePropType<\n (err: UploadAjaxError, rawFile: UploadRawFile) => void\n >(Function),\n default: NOOP,\n },\n onExceed: {\n type: definePropType<UploadHooks['onExceed']>(Function),\n default: NOOP,\n },\n} as const)\n\n/**\n * @deprecated Removed after 3.0.0, Use `UploadContentProps` instead.\n */\nexport type UploadContentPropsPublic = ExtractPublicPropTypes<\n typeof uploadContentProps\n>\n\nexport type UploadContentInstance = InstanceType<typeof UploadContent> & unknown\n\nexport const uploadContentPropsDefaults = {\n ...uploadBasePropsDefaults,\n beforeUpload: NOOP,\n onRemove: NOOP,\n onStart: NOOP,\n onSuccess: NOOP,\n onProgress: NOOP,\n onError: NOOP,\n onExceed: NOOP,\n} as const\n"],"mappings":";;;;;;;AA2BA,MAAa,qBAAqB,WAAW;CAC3C,GAAG;CAEH,cAAc;EACZ,MAAM,eAA4C,SAAS;EAC3D,SAAS;EACV;CACD,UAAU;EACR,MAAM,eAA2D,SAAS;EAC1E,SAAS;EACV;CACD,SAAS;EACP,MAAM,eAAiD,SAAS;EAChE,SAAS;EACV;CACD,WAAW;EACT,MAAM,eACJ,SACD;EACD,SAAS;EACV;CACD,YAAY;EACV,MAAM,eAEJ,SAAS;EACX,SAAS;EACV;CACD,SAAS;EACP,MAAM,eAEJ,SAAS;EACX,SAAS;EACV;CACD,UAAU;EACR,MAAM,eAAwC,SAAS;EACvD,SAAS;EACV;CACF,CAAU;AAWX,MAAa,6BAA6B;CACxC,GAAG;CACH,cAAc;CACd,UAAU;CACV,SAAS;CACT,WAAW;CACX,YAAY;CACZ,SAAS;CACT,UAAU;CACX"}
|
||||
+45
@@ -0,0 +1,45 @@
|
||||
import { Awaitable } from "../../../utils/typescript.js";
|
||||
import { UploadAjaxError } from "./ajax.js";
|
||||
import { ListType, UploadData, UploadFile, UploadHooks, UploadProgressEvent, UploadRawFile, UploadRequestHandler, UploadUserFile } from "./upload.js";
|
||||
import { UploadContentProps } from "./upload-content.js";
|
||||
import * as _$vue from "vue";
|
||||
|
||||
//#region ../../packages/components/upload/src/upload-content.vue.d.ts
|
||||
declare var __VLS_9: {}, __VLS_11: {};
|
||||
type __VLS_Slots = {} & {
|
||||
default?: (props: typeof __VLS_9) => any;
|
||||
} & {
|
||||
default?: (props: typeof __VLS_11) => any;
|
||||
};
|
||||
declare const __VLS_base: _$vue.DefineComponent<UploadContentProps, {
|
||||
abort: (file?: UploadFile) => void;
|
||||
upload: (rawFile: UploadRawFile) => Promise<void>;
|
||||
}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, _$vue.PublicProps, Readonly<UploadContentProps> & Readonly<{}>, {
|
||||
disabled: boolean;
|
||||
name: string;
|
||||
data: Awaitable<UploadData> | ((rawFile: UploadRawFile) => Awaitable<UploadData>);
|
||||
onError: (err: UploadAjaxError, rawFile: UploadRawFile) => void;
|
||||
onProgress: (evt: UploadProgressEvent, rawFile: UploadRawFile) => void;
|
||||
beforeUpload: UploadHooks["beforeUpload"];
|
||||
onRemove: (file: UploadFile | UploadRawFile) => void;
|
||||
onStart: (rawFile: UploadRawFile) => void;
|
||||
onSuccess: (response: any, rawFile: UploadRawFile) => unknown;
|
||||
onExceed: UploadHooks["onExceed"];
|
||||
action: string;
|
||||
method: string;
|
||||
showFileList: boolean;
|
||||
accept: string;
|
||||
fileList: UploadUserFile[];
|
||||
autoUpload: boolean;
|
||||
listType: ListType;
|
||||
httpRequest: UploadRequestHandler;
|
||||
}, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
|
||||
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
||||
declare const _default: typeof __VLS_export;
|
||||
type __VLS_WithSlots<T, S> = T & {
|
||||
new (): {
|
||||
$slots: S;
|
||||
};
|
||||
};
|
||||
//#endregion
|
||||
export { _default as default };
|
||||
Generated
Vendored
+173
@@ -0,0 +1,173 @@
|
||||
import { isFunction, isPlainObject as isPlainObject$1 } from "../../../utils/types.mjs";
|
||||
import { entriesOf } from "../../../utils/objects.mjs";
|
||||
import { useNamespace } from "../../../hooks/use-namespace/index.mjs";
|
||||
import { useFormDisabled } from "../../form/src/hooks/use-form-common-props.mjs";
|
||||
import { genFileId } from "./upload.mjs";
|
||||
import { uploadContentProps } from "./upload-content.mjs";
|
||||
import upload_dragger_default from "./upload-dragger2.mjs";
|
||||
import { cloneDeep, isEqual } from "lodash-unified";
|
||||
import { createBlock, createElementBlock, createElementVNode, defineComponent, normalizeClass, openBlock, renderSlot, shallowRef, unref, withCtx, withKeys, withModifiers } from "vue";
|
||||
//#region ../../packages/components/upload/src/upload-content.vue?vue&type=script&setup=true&lang.ts
|
||||
const _hoisted_1 = [
|
||||
"tabindex",
|
||||
"aria-disabled",
|
||||
"onKeydown"
|
||||
];
|
||||
const _hoisted_2 = [
|
||||
"name",
|
||||
"disabled",
|
||||
"multiple",
|
||||
"accept",
|
||||
"webkitdirectory"
|
||||
];
|
||||
var upload_content_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
|
||||
name: "ElUploadContent",
|
||||
inheritAttrs: false,
|
||||
__name: "upload-content",
|
||||
props: uploadContentProps,
|
||||
setup(__props, { expose: __expose }) {
|
||||
const props = __props;
|
||||
const ns = useNamespace("upload");
|
||||
const disabled = useFormDisabled();
|
||||
const requests = shallowRef({});
|
||||
const inputRef = shallowRef();
|
||||
const uploadFiles = (files) => {
|
||||
if (files.length === 0) return;
|
||||
const { autoUpload, limit, fileList, multiple, onStart, onExceed } = props;
|
||||
if (limit && fileList.length + files.length > limit) {
|
||||
onExceed(files, fileList);
|
||||
return;
|
||||
}
|
||||
if (!multiple) files = files.slice(0, 1);
|
||||
for (const file of files) {
|
||||
const rawFile = file;
|
||||
rawFile.uid = genFileId();
|
||||
onStart(rawFile);
|
||||
if (autoUpload) upload(rawFile);
|
||||
}
|
||||
};
|
||||
const upload = async (rawFile) => {
|
||||
inputRef.value.value = "";
|
||||
if (!props.beforeUpload) return doUpload(rawFile);
|
||||
let hookResult;
|
||||
let beforeData = {};
|
||||
try {
|
||||
const originData = props.data;
|
||||
const beforeUploadPromise = props.beforeUpload(rawFile);
|
||||
beforeData = isPlainObject$1(props.data) ? cloneDeep(props.data) : props.data;
|
||||
hookResult = await beforeUploadPromise;
|
||||
if (isPlainObject$1(props.data) && isEqual(originData, beforeData)) beforeData = cloneDeep(props.data);
|
||||
} catch {
|
||||
hookResult = false;
|
||||
}
|
||||
if (hookResult === false) {
|
||||
props.onRemove(rawFile);
|
||||
return;
|
||||
}
|
||||
let file = rawFile;
|
||||
if (hookResult instanceof Blob) if (hookResult instanceof File) file = hookResult;
|
||||
else file = new File([hookResult], rawFile.name, { type: rawFile.type });
|
||||
doUpload(Object.assign(file, { uid: rawFile.uid }), beforeData);
|
||||
};
|
||||
const resolveData = async (data, rawFile) => {
|
||||
if (isFunction(data)) return data(rawFile);
|
||||
return data;
|
||||
};
|
||||
const doUpload = async (rawFile, beforeData) => {
|
||||
const { headers, data, method, withCredentials, name: filename, action, onProgress, onSuccess, onError, httpRequest } = props;
|
||||
try {
|
||||
beforeData = await resolveData(beforeData ?? data, rawFile);
|
||||
} catch {
|
||||
props.onRemove(rawFile);
|
||||
return;
|
||||
}
|
||||
const { uid } = rawFile;
|
||||
const options = {
|
||||
headers: headers || {},
|
||||
withCredentials,
|
||||
file: rawFile,
|
||||
data: beforeData,
|
||||
method,
|
||||
filename,
|
||||
action,
|
||||
onProgress: (evt) => {
|
||||
onProgress(evt, rawFile);
|
||||
},
|
||||
onSuccess: (res) => {
|
||||
onSuccess(res, rawFile);
|
||||
delete requests.value[uid];
|
||||
},
|
||||
onError: (err) => {
|
||||
onError(err, rawFile);
|
||||
delete requests.value[uid];
|
||||
}
|
||||
};
|
||||
const request = httpRequest(options);
|
||||
requests.value[uid] = request;
|
||||
if (request instanceof Promise) request.then(options.onSuccess, options.onError);
|
||||
};
|
||||
const handleChange = (e) => {
|
||||
const files = e.target.files;
|
||||
if (!files) return;
|
||||
uploadFiles(Array.from(files));
|
||||
};
|
||||
const handleClick = () => {
|
||||
if (!disabled.value) {
|
||||
inputRef.value.value = "";
|
||||
inputRef.value.click();
|
||||
}
|
||||
};
|
||||
const handleKeydown = () => {
|
||||
handleClick();
|
||||
};
|
||||
const abort = (file) => {
|
||||
entriesOf(requests.value).filter(file ? ([uid]) => String(file.uid) === uid : () => true).forEach(([uid, req]) => {
|
||||
if (req instanceof XMLHttpRequest) req.abort();
|
||||
delete requests.value[uid];
|
||||
});
|
||||
};
|
||||
__expose({
|
||||
abort,
|
||||
upload
|
||||
});
|
||||
return (_ctx, _cache) => {
|
||||
return openBlock(), createElementBlock("div", {
|
||||
class: normalizeClass([
|
||||
unref(ns).b(),
|
||||
unref(ns).m(__props.listType),
|
||||
unref(ns).is("drag", __props.drag),
|
||||
unref(ns).is("disabled", unref(disabled))
|
||||
]),
|
||||
tabindex: unref(disabled) ? void 0 : 0,
|
||||
"aria-disabled": unref(disabled),
|
||||
role: "button",
|
||||
onClick: handleClick,
|
||||
onKeydown: withKeys(withModifiers(handleKeydown, ["self"]), ["enter", "space"])
|
||||
}, [__props.drag ? (openBlock(), createBlock(upload_dragger_default, {
|
||||
key: 0,
|
||||
disabled: unref(disabled),
|
||||
directory: __props.directory,
|
||||
onFile: uploadFiles
|
||||
}, {
|
||||
default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
|
||||
_: 3
|
||||
}, 8, ["disabled", "directory"])) : renderSlot(_ctx.$slots, "default", { key: 1 }), createElementVNode("input", {
|
||||
ref_key: "inputRef",
|
||||
ref: inputRef,
|
||||
class: normalizeClass(unref(ns).e("input")),
|
||||
name: __props.name,
|
||||
disabled: unref(disabled),
|
||||
multiple: __props.multiple,
|
||||
accept: __props.accept,
|
||||
webkitdirectory: __props.directory || void 0,
|
||||
type: "file",
|
||||
onChange: handleChange,
|
||||
onClick: _cache[0] || (_cache[0] = withModifiers(() => {}, ["stop"]))
|
||||
}, null, 42, _hoisted_2)], 42, _hoisted_1);
|
||||
};
|
||||
}
|
||||
});
|
||||
//#endregion
|
||||
export { upload_content_vue_vue_type_script_setup_true_lang_default as default };
|
||||
|
||||
//# sourceMappingURL=upload-content.vue_vue_type_script_setup_true_lang.mjs.map
|
||||
Generated
Vendored
+1
File diff suppressed because one or more lines are too long
+7
@@ -0,0 +1,7 @@
|
||||
import upload_content_vue_vue_type_script_setup_true_lang_default from "./upload-content.vue_vue_type_script_setup_true_lang.mjs";
|
||||
//#region ../../packages/components/upload/src/upload-content.vue
|
||||
var upload_content_default = upload_content_vue_vue_type_script_setup_true_lang_default;
|
||||
//#endregion
|
||||
export { upload_content_default as default };
|
||||
|
||||
//# sourceMappingURL=upload-content2.mjs.map
|
||||
+1
File diff suppressed because one or more lines are too long
+27
@@ -0,0 +1,27 @@
|
||||
import { EpPropFinalized } from "../../../utils/vue/props/types.js";
|
||||
import _default from "./upload-dragger.vue.js";
|
||||
import { ExtractPublicPropTypes } from "vue";
|
||||
|
||||
//#region ../../packages/components/upload/src/upload-dragger.d.ts
|
||||
interface UploadDraggerProps {
|
||||
disabled?: boolean;
|
||||
directory?: boolean;
|
||||
}
|
||||
/**
|
||||
* @deprecated Removed after 3.0.0, Use `UploadDraggerProps` instead.
|
||||
*/
|
||||
declare const uploadDraggerProps: {
|
||||
readonly disabled: EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, boolean>;
|
||||
readonly directory: BooleanConstructor;
|
||||
};
|
||||
/**
|
||||
* @deprecated Removed after 3.0.0, Use `UploadDraggerProps` instead.
|
||||
*/
|
||||
type UploadDraggerPropsPublic = ExtractPublicPropTypes<typeof uploadDraggerProps>;
|
||||
declare const uploadDraggerEmits: {
|
||||
file: (file: File[]) => boolean;
|
||||
};
|
||||
type UploadDraggerEmits = typeof uploadDraggerEmits;
|
||||
type UploadDraggerInstance = InstanceType<typeof _default> & unknown;
|
||||
//#endregion
|
||||
export { UploadDraggerEmits, UploadDraggerInstance, UploadDraggerProps, UploadDraggerPropsPublic, uploadDraggerEmits, uploadDraggerProps };
|
||||
+18
@@ -0,0 +1,18 @@
|
||||
import { isArray } from "../../../utils/types.mjs";
|
||||
import { buildProps } from "../../../utils/vue/props/runtime.mjs";
|
||||
//#region ../../packages/components/upload/src/upload-dragger.ts
|
||||
/**
|
||||
* @deprecated Removed after 3.0.0, Use `UploadDraggerProps` instead.
|
||||
*/
|
||||
const uploadDraggerProps = buildProps({
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: void 0
|
||||
},
|
||||
directory: Boolean
|
||||
});
|
||||
const uploadDraggerEmits = { file: (file) => isArray(file) };
|
||||
//#endregion
|
||||
export { uploadDraggerEmits, uploadDraggerProps };
|
||||
|
||||
//# sourceMappingURL=upload-dragger.mjs.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"upload-dragger.mjs","names":[],"sources":["../../../../../../packages/components/upload/src/upload-dragger.ts"],"sourcesContent":["import { buildProps, isArray } from '@element-plus/utils'\n\nimport type { ExtractPublicPropTypes } from 'vue'\nimport type UploadDragger from './upload-dragger.vue'\n\nexport interface UploadDraggerProps {\n disabled?: boolean\n directory?: boolean\n}\n\n/**\n * @deprecated Removed after 3.0.0, Use `UploadDraggerProps` instead.\n */\nexport const uploadDraggerProps = buildProps({\n disabled: {\n type: Boolean,\n default: undefined,\n },\n directory: Boolean,\n} as const)\n\n/**\n * @deprecated Removed after 3.0.0, Use `UploadDraggerProps` instead.\n */\nexport type UploadDraggerPropsPublic = ExtractPublicPropTypes<\n typeof uploadDraggerProps\n>\n\nexport const uploadDraggerEmits = {\n file: (file: File[]) => isArray(file),\n}\nexport type UploadDraggerEmits = typeof uploadDraggerEmits\n\nexport type UploadDraggerInstance = InstanceType<typeof UploadDragger> & unknown\n"],"mappings":";;;;;;AAaA,MAAa,qBAAqB,WAAW;CAC3C,UAAU;EACR,MAAM;EACN,SAAS,KAAA;EACV;CACD,WAAW;CACZ,CAAU;AASX,MAAa,qBAAqB,EAChC,OAAO,SAAiB,QAAQ,KAAK,EACtC"}
|
||||
+24
@@ -0,0 +1,24 @@
|
||||
import { UploadDraggerProps } from "./upload-dragger.js";
|
||||
import * as _$vue from "vue";
|
||||
|
||||
//#region ../../packages/components/upload/src/upload-dragger.vue.d.ts
|
||||
declare var __VLS_1: {};
|
||||
type __VLS_Slots = {} & {
|
||||
default?: (props: typeof __VLS_1) => any;
|
||||
};
|
||||
declare const __VLS_base: _$vue.DefineComponent<UploadDraggerProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
|
||||
file: (file: File[]) => void;
|
||||
}, string, _$vue.PublicProps, Readonly<UploadDraggerProps> & Readonly<{
|
||||
onFile?: ((file: File[]) => any) | undefined;
|
||||
}>, {
|
||||
disabled: boolean;
|
||||
}, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
|
||||
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
||||
declare const _default: typeof __VLS_export;
|
||||
type __VLS_WithSlots<T, S> = T & {
|
||||
new (): {
|
||||
$slots: S;
|
||||
};
|
||||
};
|
||||
//#endregion
|
||||
export { _default as default };
|
||||
Generated
Vendored
+91
@@ -0,0 +1,91 @@
|
||||
import { throwError } from "../../../utils/error.mjs";
|
||||
import { useNamespace } from "../../../hooks/use-namespace/index.mjs";
|
||||
import { useFormDisabled } from "../../form/src/hooks/use-form-common-props.mjs";
|
||||
import { uploadContextKey } from "./constants.mjs";
|
||||
import { uploadDraggerEmits, uploadDraggerProps } from "./upload-dragger.mjs";
|
||||
import { flatten } from "lodash-unified";
|
||||
import { createElementBlock, defineComponent, inject, normalizeClass, openBlock, ref, renderSlot, unref, withModifiers } from "vue";
|
||||
//#region ../../packages/components/upload/src/upload-dragger.vue?vue&type=script&setup=true&lang.ts
|
||||
const COMPONENT_NAME = "ElUploadDrag";
|
||||
var upload_dragger_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
|
||||
name: COMPONENT_NAME,
|
||||
__name: "upload-dragger",
|
||||
props: uploadDraggerProps,
|
||||
emits: uploadDraggerEmits,
|
||||
setup(__props, { emit: __emit }) {
|
||||
const props = __props;
|
||||
const emit = __emit;
|
||||
if (!inject(uploadContextKey)) throwError(COMPONENT_NAME, "usage: <el-upload><el-upload-dragger /></el-upload>");
|
||||
const ns = useNamespace("upload");
|
||||
const dragover = ref(false);
|
||||
const disabled = useFormDisabled();
|
||||
const getFile = (entry) => {
|
||||
return new Promise((resolve, reject) => entry.file(resolve, reject));
|
||||
};
|
||||
const getAllFiles = async (entry) => {
|
||||
try {
|
||||
if (entry.isFile) {
|
||||
const file = await getFile(entry);
|
||||
file.isDirectory = false;
|
||||
return [file];
|
||||
}
|
||||
if (entry.isDirectory) {
|
||||
const dirReader = entry.createReader();
|
||||
const getEntries = () => {
|
||||
return new Promise((resolve, reject) => dirReader.readEntries(resolve, reject));
|
||||
};
|
||||
const entries = [];
|
||||
let readEntries = await getEntries();
|
||||
/**
|
||||
* In Chromium-based browsers, readEntries() will only return the first 100 FileSystemEntry instances.
|
||||
* https://developer.mozilla.org/en-US/docs/Web/API/FileSystemDirectoryReader/readEntries#:~:text=In%20Chromium%2Dbased%20browsers%2C%20readEntries()%20will%20only%20return%20the%20first%20100%20FileSystemEntry%20instances.%20In%20order%20to%20obtain%20all%20of%20the%20instances%2C%20readEntries()%20must%20be%20called%20multiple%20times.
|
||||
*/
|
||||
while (readEntries.length > 0) {
|
||||
entries.push(...readEntries);
|
||||
readEntries = await getEntries();
|
||||
}
|
||||
const filePromises = entries.map((entry) => getAllFiles(entry).catch(() => []));
|
||||
return flatten(await Promise.all(filePromises));
|
||||
}
|
||||
} catch {
|
||||
return [];
|
||||
}
|
||||
return [];
|
||||
};
|
||||
const onDrop = async (e) => {
|
||||
if (disabled.value) return;
|
||||
dragover.value = false;
|
||||
e.stopPropagation();
|
||||
const files = Array.from(e.dataTransfer.files);
|
||||
const items = e.dataTransfer.items || [];
|
||||
if (props.directory) {
|
||||
const entries = Array.from(items).map((item) => item?.webkitGetAsEntry?.()).filter((entry) => entry);
|
||||
emit("file", flatten(await Promise.all(entries.map(getAllFiles))));
|
||||
return;
|
||||
}
|
||||
files.forEach((file, index) => {
|
||||
const entry = items[index]?.webkitGetAsEntry?.();
|
||||
if (entry) file.isDirectory = entry.isDirectory;
|
||||
});
|
||||
emit("file", files);
|
||||
};
|
||||
const onDragover = () => {
|
||||
if (!disabled.value) dragover.value = true;
|
||||
};
|
||||
const onDragleave = (e) => {
|
||||
if (!e.currentTarget.contains(e.relatedTarget)) dragover.value = false;
|
||||
};
|
||||
return (_ctx, _cache) => {
|
||||
return openBlock(), createElementBlock("div", {
|
||||
class: normalizeClass([unref(ns).b("dragger"), unref(ns).is("dragover", dragover.value)]),
|
||||
onDrop: withModifiers(onDrop, ["prevent"]),
|
||||
onDragover: withModifiers(onDragover, ["prevent"]),
|
||||
onDragleave: withModifiers(onDragleave, ["prevent"])
|
||||
}, [renderSlot(_ctx.$slots, "default")], 34);
|
||||
};
|
||||
}
|
||||
});
|
||||
//#endregion
|
||||
export { upload_dragger_vue_vue_type_script_setup_true_lang_default as default };
|
||||
|
||||
//# sourceMappingURL=upload-dragger.vue_vue_type_script_setup_true_lang.mjs.map
|
||||
Generated
Vendored
+1
File diff suppressed because one or more lines are too long
+7
@@ -0,0 +1,7 @@
|
||||
import upload_dragger_vue_vue_type_script_setup_true_lang_default from "./upload-dragger.vue_vue_type_script_setup_true_lang.mjs";
|
||||
//#region ../../packages/components/upload/src/upload-dragger.vue
|
||||
var upload_dragger_default = upload_dragger_vue_vue_type_script_setup_true_lang_default;
|
||||
//#endregion
|
||||
export { upload_dragger_default as default };
|
||||
|
||||
//# sourceMappingURL=upload-dragger2.mjs.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"upload-dragger2.mjs","names":[],"sources":["../../../../../../packages/components/upload/src/upload-dragger.vue"],"sourcesContent":["<template>\n <div\n :class=\"[ns.b('dragger'), ns.is('dragover', dragover)]\"\n @drop.prevent=\"onDrop\"\n @dragover.prevent=\"onDragover\"\n @dragleave.prevent=\"onDragleave\"\n >\n <slot />\n </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { inject, ref } from 'vue'\nimport { useNamespace } from '@element-plus/hooks'\nimport { useFormDisabled } from '@element-plus/components/form'\nimport { throwError } from '@element-plus/utils/error'\nimport { flatten } from 'lodash-unified'\nimport { uploadContextKey } from './constants'\nimport { uploadDraggerEmits } from './upload-dragger'\n\nimport type { UploadDraggerProps } from './upload-dragger'\nimport type { UploadRawFile } from './upload'\n\nconst COMPONENT_NAME = 'ElUploadDrag'\n\ndefineOptions({\n name: COMPONENT_NAME,\n})\n\nconst props = withDefaults(defineProps<UploadDraggerProps>(), {\n disabled: undefined,\n})\nconst emit = defineEmits(uploadDraggerEmits)\n\nconst uploaderContext = inject(uploadContextKey)\nif (!uploaderContext) {\n throwError(\n COMPONENT_NAME,\n 'usage: <el-upload><el-upload-dragger /></el-upload>'\n )\n}\n\nconst ns = useNamespace('upload')\nconst dragover = ref(false)\nconst disabled = useFormDisabled()\n\nconst getFile = (entry: FileSystemFileEntry): Promise<File> => {\n return new Promise((resolve, reject) => entry.file(resolve, reject))\n}\n\nconst getAllFiles = async (\n entry: FileSystemEntry\n): Promise<UploadRawFile[]> => {\n try {\n if (entry.isFile) {\n const file = (await getFile(\n entry as FileSystemFileEntry\n )) as UploadRawFile\n file.isDirectory = false\n return [file]\n }\n if (entry.isDirectory) {\n const dirReader = (entry as FileSystemDirectoryEntry).createReader()\n const getEntries = (): Promise<FileSystemEntry[]> => {\n return new Promise((resolve, reject) =>\n dirReader.readEntries(resolve, reject)\n )\n }\n\n const entries: FileSystemEntry[] = []\n let readEntries = await getEntries()\n /**\n * In Chromium-based browsers, readEntries() will only return the first 100 FileSystemEntry instances.\n * https://developer.mozilla.org/en-US/docs/Web/API/FileSystemDirectoryReader/readEntries#:~:text=In%20Chromium%2Dbased%20browsers%2C%20readEntries()%20will%20only%20return%20the%20first%20100%20FileSystemEntry%20instances.%20In%20order%20to%20obtain%20all%20of%20the%20instances%2C%20readEntries()%20must%20be%20called%20multiple%20times.\n */\n while (readEntries.length > 0) {\n entries.push(...readEntries)\n readEntries = await getEntries()\n }\n\n const filePromises = entries.map((entry) =>\n getAllFiles(entry).catch(() => [])\n )\n\n const files = await Promise.all(filePromises)\n return flatten(files)\n }\n } catch {\n return []\n }\n return []\n}\n\nconst onDrop = async (e: DragEvent) => {\n if (disabled.value) return\n dragover.value = false\n\n e.stopPropagation()\n\n const files = Array.from(e.dataTransfer!.files) as UploadRawFile[]\n const items = e.dataTransfer!.items || []\n\n if (props.directory) {\n const entries = Array.from(items)\n .map((item) => item?.webkitGetAsEntry?.())\n .filter((entry) => entry) as FileSystemEntry[]\n\n const allFiles = await Promise.all(entries.map(getAllFiles))\n emit('file', flatten(allFiles))\n return\n }\n\n files.forEach((file, index) => {\n const item = items[index]\n const entry = item?.webkitGetAsEntry?.()\n if (entry) {\n file.isDirectory = entry.isDirectory\n }\n })\n emit('file', files)\n}\n\nconst onDragover = () => {\n if (!disabled.value) dragover.value = true\n}\n\nconst onDragleave = (e: DragEvent) => {\n if (!(e.currentTarget as Element).contains(e.relatedTarget as Element))\n dragover.value = false\n}\n</script>\n"],"mappings":""}
|
||||
+51
@@ -0,0 +1,51 @@
|
||||
import { EpPropFinalized, EpPropMergeType } from "../../../utils/vue/props/types.js";
|
||||
import { Crossorigin, ListType, UploadFile, UploadFiles, UploadHooks } from "./upload.js";
|
||||
import _default from "./upload-list.vue.js";
|
||||
import * as _$vue from "vue";
|
||||
import { ExtractPublicPropTypes } from "vue";
|
||||
|
||||
//#region ../../packages/components/upload/src/upload-list.d.ts
|
||||
interface UploadListProps {
|
||||
files?: UploadFiles;
|
||||
disabled?: boolean;
|
||||
handlePreview?: UploadHooks['onPreview'];
|
||||
listType?: ListType;
|
||||
/**
|
||||
* @description set HTML attribute: crossorigin.
|
||||
*/
|
||||
crossorigin?: Crossorigin;
|
||||
}
|
||||
/**
|
||||
* @deprecated Removed after 3.0.0, Use `UploadListProps` instead.
|
||||
*/
|
||||
declare const uploadListProps: {
|
||||
readonly files: EpPropFinalized<(new (...args: any[]) => UploadFiles) | (() => UploadFiles) | (((new (...args: any[]) => UploadFiles) | (() => UploadFiles)) | null)[], unknown, unknown, () => never[], boolean>;
|
||||
readonly disabled: EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, boolean>;
|
||||
readonly handlePreview: EpPropFinalized<(new (...args: any[]) => (uploadFile: UploadFile) => void) | (() => (uploadFile: UploadFile) => void) | {
|
||||
(): (uploadFile: UploadFile) => void;
|
||||
new (): any;
|
||||
readonly prototype: any;
|
||||
} | (((new (...args: any[]) => (uploadFile: UploadFile) => void) | (() => (uploadFile: UploadFile) => void) | {
|
||||
(): (uploadFile: UploadFile) => void;
|
||||
new (): any;
|
||||
readonly prototype: any;
|
||||
}) | null)[], unknown, unknown, () => void, boolean>;
|
||||
readonly listType: EpPropFinalized<StringConstructor, "picture" | "text" | "picture-card", unknown, "text", boolean>;
|
||||
readonly crossorigin: {
|
||||
readonly type: _$vue.PropType<EpPropMergeType<(new (...args: any[]) => "" | "anonymous" | "use-credentials") | (() => "" | "anonymous" | "use-credentials") | (((new (...args: any[]) => "" | "anonymous" | "use-credentials") | (() => "" | "anonymous" | "use-credentials")) | null)[], unknown, unknown>>;
|
||||
readonly required: false;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
__epPropKey: true;
|
||||
};
|
||||
};
|
||||
/**
|
||||
* @deprecated Removed after 3.0.0, Use `UploadListProps` instead.
|
||||
*/
|
||||
type UploadListPropsPublic = ExtractPublicPropTypes<typeof uploadListProps>;
|
||||
declare const uploadListEmits: {
|
||||
remove: (file: UploadFile) => boolean;
|
||||
};
|
||||
type UploadListEmits = typeof uploadListEmits;
|
||||
type UploadListInstance = InstanceType<typeof _default> & unknown;
|
||||
//#endregion
|
||||
export { UploadListEmits, UploadListInstance, UploadListProps, UploadListPropsPublic, uploadListEmits, uploadListProps };
|
||||
+36
@@ -0,0 +1,36 @@
|
||||
import { buildProps, definePropType } from "../../../utils/vue/props/runtime.mjs";
|
||||
import { NOOP } from "../../../utils/functions.mjs";
|
||||
import { mutable } from "../../../utils/typescript.mjs";
|
||||
import { uploadListTypes } from "./upload.mjs";
|
||||
//#region ../../packages/components/upload/src/upload-list.ts
|
||||
/**
|
||||
* @deprecated Removed after 3.0.0, Use `UploadListProps` instead.
|
||||
*/
|
||||
const uploadListProps = buildProps({
|
||||
files: {
|
||||
type: definePropType(Array),
|
||||
default: () => mutable([])
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: void 0
|
||||
},
|
||||
handlePreview: {
|
||||
type: definePropType(Function),
|
||||
default: NOOP
|
||||
},
|
||||
listType: {
|
||||
type: String,
|
||||
values: uploadListTypes,
|
||||
default: "text"
|
||||
},
|
||||
/**
|
||||
* @description set HTML attribute: crossorigin.
|
||||
*/
|
||||
crossorigin: { type: definePropType(String) }
|
||||
});
|
||||
const uploadListEmits = { remove: (file) => !!file };
|
||||
//#endregion
|
||||
export { uploadListEmits, uploadListProps };
|
||||
|
||||
//# sourceMappingURL=upload-list.mjs.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"upload-list.mjs","names":[],"sources":["../../../../../../packages/components/upload/src/upload-list.ts"],"sourcesContent":["import { NOOP, buildProps, definePropType, mutable } from '@element-plus/utils'\nimport { uploadListTypes } from './upload'\n\nimport type { ExtractPublicPropTypes } from 'vue'\nimport type {\n Crossorigin,\n ListType,\n UploadFile,\n UploadFiles,\n UploadHooks,\n} from './upload'\nimport type UploadList from './upload-list.vue'\n\nexport interface UploadListProps {\n files?: UploadFiles\n disabled?: boolean\n handlePreview?: UploadHooks['onPreview']\n listType?: ListType\n /**\n * @description set HTML attribute: crossorigin.\n */\n crossorigin?: Crossorigin\n}\n\n/**\n * @deprecated Removed after 3.0.0, Use `UploadListProps` instead.\n */\nexport const uploadListProps = buildProps({\n files: {\n type: definePropType<UploadFiles>(Array),\n default: () => mutable([]),\n },\n disabled: {\n type: Boolean,\n default: undefined,\n },\n handlePreview: {\n type: definePropType<UploadHooks['onPreview']>(Function),\n default: NOOP,\n },\n listType: {\n type: String,\n values: uploadListTypes,\n default: 'text',\n },\n /**\n * @description set HTML attribute: crossorigin.\n */\n crossorigin: {\n type: definePropType<'anonymous' | 'use-credentials' | ''>(String),\n },\n} as const)\n\n/**\n * @deprecated Removed after 3.0.0, Use `UploadListProps` instead.\n */\nexport type UploadListPropsPublic = ExtractPublicPropTypes<\n typeof uploadListProps\n>\nexport const uploadListEmits = {\n remove: (file: UploadFile) => !!file,\n}\nexport type UploadListEmits = typeof uploadListEmits\nexport type UploadListInstance = InstanceType<typeof UploadList> & unknown\n"],"mappings":";;;;;;;;AA2BA,MAAa,kBAAkB,WAAW;CACxC,OAAO;EACL,MAAM,eAA4B,MAAM;EACxC,eAAe,QAAQ,EAAE,CAAC;EAC3B;CACD,UAAU;EACR,MAAM;EACN,SAAS,KAAA;EACV;CACD,eAAe;EACb,MAAM,eAAyC,SAAS;EACxD,SAAS;EACV;CACD,UAAU;EACR,MAAM;EACN,QAAQ;EACR,SAAS;EACV;;;;CAID,aAAa,EACX,MAAM,eAAqD,OAAO,EACnE;CACF,CAAU;AAQX,MAAa,kBAAkB,EAC7B,SAAS,SAAqB,CAAC,CAAC,MACjC"}
|
||||
+33
@@ -0,0 +1,33 @@
|
||||
import { ListType, UploadFile, UploadFiles, UploadHooks } from "./upload.js";
|
||||
import { UploadListProps } from "./upload-list.js";
|
||||
import * as _$vue from "vue";
|
||||
|
||||
//#region ../../packages/components/upload/src/upload-list.vue.d.ts
|
||||
declare var __VLS_8: {
|
||||
file: UploadFile;
|
||||
index: number;
|
||||
}, __VLS_84: {};
|
||||
type __VLS_Slots = {} & {
|
||||
default?: (props: typeof __VLS_8) => any;
|
||||
} & {
|
||||
append?: (props: typeof __VLS_84) => any;
|
||||
};
|
||||
declare const __VLS_base: _$vue.DefineComponent<UploadListProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
|
||||
remove: (file: UploadFile) => void;
|
||||
}, string, _$vue.PublicProps, Readonly<UploadListProps> & Readonly<{
|
||||
onRemove?: ((file: UploadFile) => any) | undefined;
|
||||
}>, {
|
||||
disabled: boolean;
|
||||
listType: ListType;
|
||||
files: UploadFiles;
|
||||
handlePreview: UploadHooks["onPreview"];
|
||||
}, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
|
||||
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
||||
declare const _default: typeof __VLS_export;
|
||||
type __VLS_WithSlots<T, S> = T & {
|
||||
new (): {
|
||||
$slots: S;
|
||||
};
|
||||
};
|
||||
//#endregion
|
||||
export { _default as default };
|
||||
Generated
Vendored
+164
@@ -0,0 +1,164 @@
|
||||
import { useLocale } from "../../../hooks/use-locale/index.mjs";
|
||||
import { useNamespace } from "../../../hooks/use-namespace/index.mjs";
|
||||
import { ElIcon } from "../../icon/index.mjs";
|
||||
import { useFormDisabled } from "../../form/src/hooks/use-form-common-props.mjs";
|
||||
import { ElProgress } from "../../progress/index.mjs";
|
||||
import { uploadListEmits, uploadListProps } from "./upload-list.mjs";
|
||||
import { Check, CircleCheck, Close, Delete, Document, ZoomIn } from "@element-plus/icons-vue";
|
||||
import { Fragment, TransitionGroup, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, nextTick, normalizeClass, normalizeStyle, openBlock, ref, renderList, renderSlot, toDisplayString, unref, withCtx, withKeys, withModifiers } from "vue";
|
||||
//#region ../../packages/components/upload/src/upload-list.vue?vue&type=script&setup=true&lang.ts
|
||||
const _hoisted_1 = [
|
||||
"tabindex",
|
||||
"aria-disabled",
|
||||
"onKeydown"
|
||||
];
|
||||
const _hoisted_2 = ["src", "crossorigin"];
|
||||
const _hoisted_3 = ["onClick"];
|
||||
const _hoisted_4 = ["title"];
|
||||
const _hoisted_5 = ["onClick"];
|
||||
const _hoisted_6 = ["onClick"];
|
||||
var upload_list_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
|
||||
name: "ElUploadList",
|
||||
__name: "upload-list",
|
||||
props: uploadListProps,
|
||||
emits: uploadListEmits,
|
||||
setup(__props, { emit: __emit }) {
|
||||
const props = __props;
|
||||
const emit = __emit;
|
||||
const { t } = useLocale();
|
||||
const nsUpload = useNamespace("upload");
|
||||
const nsIcon = useNamespace("icon");
|
||||
const nsList = useNamespace("list");
|
||||
const disabled = useFormDisabled();
|
||||
const focusing = ref(false);
|
||||
const containerKls = computed(() => [
|
||||
nsUpload.b("list"),
|
||||
nsUpload.bm("list", props.listType),
|
||||
nsUpload.is("disabled", disabled.value)
|
||||
]);
|
||||
const handleBlur = async (event) => {
|
||||
const nextTarget = event.relatedTarget;
|
||||
await nextTick();
|
||||
if (!nextTarget?.classList.contains(nsUpload.be("list", "item"))) focusing.value = false;
|
||||
};
|
||||
const handleRemove = (file) => {
|
||||
emit("remove", file);
|
||||
};
|
||||
return (_ctx, _cache) => {
|
||||
return openBlock(), createBlock(TransitionGroup, {
|
||||
tag: "ul",
|
||||
class: normalizeClass(containerKls.value),
|
||||
name: unref(nsList).b()
|
||||
}, {
|
||||
default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.files, (file, index) => {
|
||||
return openBlock(), createElementBlock("li", {
|
||||
key: file.uid || file.name,
|
||||
class: normalizeClass([
|
||||
unref(nsUpload).be("list", "item"),
|
||||
unref(nsUpload).is(file.status),
|
||||
{ focusing: focusing.value }
|
||||
]),
|
||||
tabindex: unref(disabled) ? void 0 : 0,
|
||||
"aria-disabled": unref(disabled),
|
||||
role: "button",
|
||||
onKeydown: withKeys(($event) => !unref(disabled) && handleRemove(file), ["delete"]),
|
||||
onFocus: _cache[0] || (_cache[0] = ($event) => focusing.value = true),
|
||||
onBlur: handleBlur,
|
||||
onClick: _cache[1] || (_cache[1] = ($event) => focusing.value = false)
|
||||
}, [renderSlot(_ctx.$slots, "default", {
|
||||
file,
|
||||
index
|
||||
}, () => [
|
||||
__props.listType === "picture" || file.status !== "uploading" && __props.listType === "picture-card" ? (openBlock(), createElementBlock("img", {
|
||||
key: 0,
|
||||
class: normalizeClass(unref(nsUpload).be("list", "item-thumbnail")),
|
||||
src: file.url,
|
||||
crossorigin: __props.crossorigin,
|
||||
alt: ""
|
||||
}, null, 10, _hoisted_2)) : createCommentVNode("v-if", true),
|
||||
file.status === "uploading" || __props.listType !== "picture-card" ? (openBlock(), createElementBlock("div", {
|
||||
key: 1,
|
||||
class: normalizeClass(unref(nsUpload).be("list", "item-info"))
|
||||
}, [createElementVNode("a", {
|
||||
class: normalizeClass(unref(nsUpload).be("list", "item-name")),
|
||||
onClick: withModifiers(($event) => __props.handlePreview(file), ["prevent"])
|
||||
}, [createVNode(unref(ElIcon), { class: normalizeClass(unref(nsIcon).m("document")) }, {
|
||||
default: withCtx(() => [createVNode(unref(Document))]),
|
||||
_: 1
|
||||
}, 8, ["class"]), createElementVNode("span", {
|
||||
class: normalizeClass(unref(nsUpload).be("list", "item-file-name")),
|
||||
title: file.name
|
||||
}, toDisplayString(file.name), 11, _hoisted_4)], 10, _hoisted_3), file.status === "uploading" ? (openBlock(), createBlock(unref(ElProgress), {
|
||||
key: 0,
|
||||
type: __props.listType === "picture-card" ? "circle" : "line",
|
||||
"stroke-width": __props.listType === "picture-card" ? 6 : 2,
|
||||
percentage: Number(file.percentage),
|
||||
style: normalizeStyle(__props.listType === "picture-card" ? "" : "margin-top: 0.5rem")
|
||||
}, null, 8, [
|
||||
"type",
|
||||
"stroke-width",
|
||||
"percentage",
|
||||
"style"
|
||||
])) : createCommentVNode("v-if", true)], 2)) : createCommentVNode("v-if", true),
|
||||
createElementVNode("label", { class: normalizeClass(unref(nsUpload).be("list", "item-status-label")) }, [__props.listType === "text" ? (openBlock(), createBlock(unref(ElIcon), {
|
||||
key: 0,
|
||||
class: normalizeClass([unref(nsIcon).m("upload-success"), unref(nsIcon).m("circle-check")])
|
||||
}, {
|
||||
default: withCtx(() => [createVNode(unref(CircleCheck))]),
|
||||
_: 1
|
||||
}, 8, ["class"])) : ["picture-card", "picture"].includes(__props.listType) ? (openBlock(), createBlock(unref(ElIcon), {
|
||||
key: 1,
|
||||
class: normalizeClass([unref(nsIcon).m("upload-success"), unref(nsIcon).m("check")])
|
||||
}, {
|
||||
default: withCtx(() => [createVNode(unref(Check))]),
|
||||
_: 1
|
||||
}, 8, ["class"])) : createCommentVNode("v-if", true)], 2),
|
||||
!unref(disabled) ? (openBlock(), createBlock(unref(ElIcon), {
|
||||
key: 2,
|
||||
class: normalizeClass(unref(nsIcon).m("close")),
|
||||
"aria-label": unref(t)("el.upload.delete"),
|
||||
role: "button",
|
||||
tabindex: "0",
|
||||
onClick: ($event) => handleRemove(file),
|
||||
onKeydown: withKeys(withModifiers(($event) => handleRemove(file), ["prevent"]), ["enter", "space"])
|
||||
}, {
|
||||
default: withCtx(() => [createVNode(unref(Close))]),
|
||||
_: 1
|
||||
}, 8, [
|
||||
"class",
|
||||
"aria-label",
|
||||
"onClick",
|
||||
"onKeydown"
|
||||
])) : createCommentVNode("v-if", true),
|
||||
!unref(disabled) ? (openBlock(), createElementBlock("i", {
|
||||
key: 3,
|
||||
class: normalizeClass(unref(nsIcon).m("close-tip"))
|
||||
}, toDisplayString(unref(t)("el.upload.deleteTip")), 3)) : createCommentVNode("v-if", true),
|
||||
__props.listType === "picture-card" ? (openBlock(), createElementBlock("span", {
|
||||
key: 4,
|
||||
class: normalizeClass(unref(nsUpload).be("list", "item-actions"))
|
||||
}, [createElementVNode("span", {
|
||||
class: normalizeClass(unref(nsUpload).be("list", "item-preview")),
|
||||
onClick: ($event) => __props.handlePreview(file)
|
||||
}, [createVNode(unref(ElIcon), { class: normalizeClass(unref(nsIcon).m("zoom-in")) }, {
|
||||
default: withCtx(() => [createVNode(unref(ZoomIn))]),
|
||||
_: 1
|
||||
}, 8, ["class"])], 10, _hoisted_5), !unref(disabled) ? (openBlock(), createElementBlock("span", {
|
||||
key: 0,
|
||||
class: normalizeClass(unref(nsUpload).be("list", "item-delete")),
|
||||
onClick: ($event) => handleRemove(file)
|
||||
}, [createVNode(unref(ElIcon), { class: normalizeClass(unref(nsIcon).m("delete")) }, {
|
||||
default: withCtx(() => [createVNode(unref(Delete))]),
|
||||
_: 1
|
||||
}, 8, ["class"])], 10, _hoisted_6)) : createCommentVNode("v-if", true)], 2)) : createCommentVNode("v-if", true)
|
||||
])], 42, _hoisted_1);
|
||||
}), 128)), renderSlot(_ctx.$slots, "append")]),
|
||||
_: 3
|
||||
}, 8, ["class", "name"]);
|
||||
};
|
||||
}
|
||||
});
|
||||
//#endregion
|
||||
export { upload_list_vue_vue_type_script_setup_true_lang_default as default };
|
||||
|
||||
//# sourceMappingURL=upload-list.vue_vue_type_script_setup_true_lang.mjs.map
|
||||
Generated
Vendored
+1
File diff suppressed because one or more lines are too long
+7
@@ -0,0 +1,7 @@
|
||||
import upload_list_vue_vue_type_script_setup_true_lang_default from "./upload-list.vue_vue_type_script_setup_true_lang.mjs";
|
||||
//#region ../../packages/components/upload/src/upload-list.vue
|
||||
var upload_list_default = upload_list_vue_vue_type_script_setup_true_lang_default;
|
||||
//#endregion
|
||||
export { upload_list_default as default };
|
||||
|
||||
//# sourceMappingURL=upload-list2.mjs.map
|
||||
+1
File diff suppressed because one or more lines are too long
+367
@@ -0,0 +1,367 @@
|
||||
import { EpPropFinalized, EpPropMergeType } from "../../../utils/vue/props/types.js";
|
||||
import { Awaitable, Mutable } from "../../../utils/typescript.js";
|
||||
import { UploadAjaxError } from "./ajax.js";
|
||||
import _default from "./upload.vue.js";
|
||||
import * as _$vue from "vue";
|
||||
import { ExtractPublicPropTypes } from "vue";
|
||||
|
||||
//#region ../../packages/components/upload/src/upload.d.ts
|
||||
/**
|
||||
* @deprecated Removed after 3.0.0, Use `UploadProps` instead.
|
||||
*/
|
||||
declare const uploadListTypes: readonly ["text", "picture", "picture-card"];
|
||||
declare const genFileId: () => number;
|
||||
type UploadStatus = 'ready' | 'uploading' | 'success' | 'fail';
|
||||
interface UploadProgressEvent extends ProgressEvent {
|
||||
percent: number;
|
||||
}
|
||||
interface UploadRequestOptions {
|
||||
action: string;
|
||||
method: string;
|
||||
data: Record<string, string | Blob | [string | Blob, string] | string[]>;
|
||||
filename: string;
|
||||
file: UploadRawFile;
|
||||
headers: Headers | Record<string, string | number | null | undefined>;
|
||||
onError: (evt: UploadAjaxError) => void;
|
||||
onProgress: (evt: UploadProgressEvent) => void;
|
||||
onSuccess: (response: any) => void;
|
||||
withCredentials: boolean;
|
||||
}
|
||||
interface UploadFile {
|
||||
name: string;
|
||||
percentage?: number;
|
||||
status: UploadStatus;
|
||||
size?: number;
|
||||
response?: unknown;
|
||||
uid: number;
|
||||
url?: string;
|
||||
raw?: UploadRawFile;
|
||||
}
|
||||
type UploadUserFile = Omit<UploadFile, 'status' | 'uid'> & Partial<Pick<UploadFile, 'status' | 'uid'>>;
|
||||
type UploadFiles = UploadFile[];
|
||||
interface UploadRawFile extends File {
|
||||
uid: number;
|
||||
isDirectory?: boolean;
|
||||
}
|
||||
type UploadRequestHandler = (options: UploadRequestOptions) => XMLHttpRequest | Promise<unknown>;
|
||||
interface UploadHooks {
|
||||
beforeUpload: (rawFile: UploadRawFile) => Awaitable<void | undefined | null | boolean | File | Blob>;
|
||||
beforeRemove: (uploadFile: UploadFile, uploadFiles: UploadFiles) => Awaitable<boolean>;
|
||||
onRemove: (uploadFile: UploadFile, uploadFiles: UploadFiles) => void;
|
||||
onChange: (uploadFile: UploadFile, uploadFiles: UploadFiles) => void;
|
||||
onPreview: (uploadFile: UploadFile) => void;
|
||||
onSuccess: (response: any, uploadFile: UploadFile, uploadFiles: UploadFiles) => void;
|
||||
onProgress: (evt: UploadProgressEvent, uploadFile: UploadFile, uploadFiles: UploadFiles) => void;
|
||||
onError: (error: Error, uploadFile: UploadFile, uploadFiles: UploadFiles) => void;
|
||||
onExceed: (files: File[], uploadFiles: UploadUserFile[]) => void;
|
||||
}
|
||||
type UploadData = Mutable<Record<string, any>>;
|
||||
type ListType = 'text' | 'picture' | 'picture-card';
|
||||
type Crossorigin = 'anonymous' | 'use-credentials' | '';
|
||||
interface UploadBaseProps {
|
||||
/**
|
||||
* @description request URL
|
||||
*/
|
||||
action?: string;
|
||||
/**
|
||||
* @description request headers
|
||||
*/
|
||||
headers?: Headers | Record<string, any>;
|
||||
/**
|
||||
* @description set upload request method
|
||||
*/
|
||||
method?: string;
|
||||
/**
|
||||
* @description additions options of request
|
||||
*/
|
||||
data?: Awaitable<UploadData> | ((rawFile: UploadRawFile) => Awaitable<UploadData>);
|
||||
/**
|
||||
* @description whether uploading multiple files is permitted
|
||||
*/
|
||||
multiple?: boolean;
|
||||
/**
|
||||
* @description key name for uploaded file
|
||||
*/
|
||||
name?: string;
|
||||
/**
|
||||
* @description whether to activate drag and drop mode
|
||||
*/
|
||||
drag?: boolean;
|
||||
/**
|
||||
* @description whether cookies are sent
|
||||
*/
|
||||
withCredentials?: boolean;
|
||||
/**
|
||||
* @description whether to show the uploaded file list
|
||||
*/
|
||||
showFileList?: boolean;
|
||||
/**
|
||||
* @description accepted [file types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept), will not work when `thumbnail-mode === true`
|
||||
*/
|
||||
accept?: string;
|
||||
/**
|
||||
* @description default uploaded files
|
||||
*/
|
||||
fileList?: UploadUserFile[];
|
||||
/**
|
||||
* @description whether to auto upload file
|
||||
*/
|
||||
autoUpload?: boolean;
|
||||
/**
|
||||
* @description type of file list
|
||||
*/
|
||||
listType?: ListType;
|
||||
/**
|
||||
* @description override default xhr behavior, allowing you to implement your own upload-file's request
|
||||
*/
|
||||
httpRequest?: UploadRequestHandler;
|
||||
/**
|
||||
* @description whether to disable upload
|
||||
*/
|
||||
disabled?: boolean;
|
||||
/**
|
||||
* @description maximum number of uploads allowed
|
||||
*/
|
||||
limit?: number;
|
||||
/**
|
||||
* @description whether to support uploading directory
|
||||
*/
|
||||
directory?: boolean;
|
||||
}
|
||||
interface UploadProps extends UploadBaseProps {
|
||||
/**
|
||||
* @description hook function before uploading with the file to be uploaded as its parameter. If `false` is returned or a `Promise` is returned and then is rejected, uploading will be aborted
|
||||
*/
|
||||
beforeUpload?: UploadHooks['beforeUpload'];
|
||||
/**
|
||||
* @description hook function before removing a file with the file and file list as its parameters. If `false` is returned or a `Promise` is returned and then is rejected, removing will be aborted
|
||||
*/
|
||||
beforeRemove?: UploadHooks['beforeRemove'];
|
||||
/**
|
||||
* @description hook function when files are removed
|
||||
*/
|
||||
onRemove?: UploadHooks['onRemove'];
|
||||
/**
|
||||
* @description hook function when select file or upload file success or upload file fail
|
||||
*/
|
||||
onChange?: UploadHooks['onChange'];
|
||||
/**
|
||||
* @description hook function when clicking the uploaded files
|
||||
*/
|
||||
onPreview?: UploadHooks['onPreview'];
|
||||
/**
|
||||
* @description hook function when uploaded successfully
|
||||
*/
|
||||
onSuccess?: UploadHooks['onSuccess'];
|
||||
/**
|
||||
* @description hook function when some progress occurs
|
||||
*/
|
||||
onProgress?: UploadHooks['onProgress'];
|
||||
/**
|
||||
* @description hook function when some errors occurs
|
||||
*/
|
||||
onError?: UploadHooks['onError'];
|
||||
/**
|
||||
* @description hook function when limit is exceeded
|
||||
*/
|
||||
onExceed?: UploadHooks['onExceed'];
|
||||
/**
|
||||
* @description set HTML attribute: crossorigin.
|
||||
*/
|
||||
crossorigin?: Crossorigin;
|
||||
}
|
||||
/**
|
||||
* @deprecated Removed after 3.0.0, Use `UploadBaseProps` instead.
|
||||
*/
|
||||
declare const uploadBaseProps: {
|
||||
readonly action: EpPropFinalized<StringConstructor, unknown, unknown, "#", boolean>;
|
||||
readonly headers: {
|
||||
readonly type: _$vue.PropType<EpPropMergeType<(new (...args: any[]) => Record<string, any> | Headers) | (() => Record<string, any> | Headers) | (((new (...args: any[]) => Record<string, any> | Headers) | (() => Record<string, any> | Headers)) | null)[], unknown, unknown>>;
|
||||
readonly required: false;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
__epPropKey: true;
|
||||
};
|
||||
readonly method: EpPropFinalized<StringConstructor, unknown, unknown, "post", boolean>;
|
||||
readonly data: EpPropFinalized<(new (...args: any[]) => Mutable<Record<string, any>> | Promise<Mutable<Record<string, any>>> | ((rawFile: UploadRawFile) => Awaitable<UploadData>)) | (() => Awaitable<Mutable<Record<string, any>>> | ((rawFile: UploadRawFile) => Awaitable<UploadData>)) | (((new (...args: any[]) => Mutable<Record<string, any>> | Promise<Mutable<Record<string, any>>> | ((rawFile: UploadRawFile) => Awaitable<UploadData>)) | (() => Awaitable<Mutable<Record<string, any>>> | ((rawFile: UploadRawFile) => Awaitable<UploadData>))) | null)[], unknown, unknown, () => Mutable<{}>, boolean>;
|
||||
readonly multiple: BooleanConstructor;
|
||||
readonly name: EpPropFinalized<StringConstructor, unknown, unknown, "file", boolean>;
|
||||
readonly drag: BooleanConstructor;
|
||||
readonly withCredentials: BooleanConstructor;
|
||||
readonly showFileList: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
|
||||
readonly accept: EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
|
||||
readonly fileList: EpPropFinalized<(new (...args: any[]) => UploadUserFile[]) | (() => UploadUserFile[]) | (((new (...args: any[]) => UploadUserFile[]) | (() => UploadUserFile[])) | null)[], unknown, unknown, () => [], boolean>;
|
||||
readonly autoUpload: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
|
||||
readonly listType: EpPropFinalized<StringConstructor, "picture" | "text" | "picture-card", unknown, "text", boolean>;
|
||||
readonly httpRequest: EpPropFinalized<(new (...args: any[]) => UploadRequestHandler) | (() => UploadRequestHandler) | {
|
||||
(): UploadRequestHandler;
|
||||
new (): any;
|
||||
readonly prototype: any;
|
||||
} | (((new (...args: any[]) => UploadRequestHandler) | (() => UploadRequestHandler) | {
|
||||
(): UploadRequestHandler;
|
||||
new (): any;
|
||||
readonly prototype: any;
|
||||
}) | null)[], unknown, unknown, UploadRequestHandler, boolean>;
|
||||
readonly disabled: EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, boolean>;
|
||||
readonly limit: NumberConstructor;
|
||||
readonly directory: BooleanConstructor;
|
||||
};
|
||||
/**
|
||||
* @deprecated Removed after 3.0.0, Use `UploadProps` instead.
|
||||
*/
|
||||
declare const uploadProps: {
|
||||
readonly beforeUpload: EpPropFinalized<(new (...args: any[]) => (rawFile: UploadRawFile) => Awaitable<void | undefined | null | boolean | File | Blob>) | (() => (rawFile: UploadRawFile) => Awaitable<void | undefined | null | boolean | File | Blob>) | {
|
||||
(): (rawFile: UploadRawFile) => Awaitable<void | undefined | null | boolean | File | Blob>;
|
||||
new (): any;
|
||||
readonly prototype: any;
|
||||
} | (((new (...args: any[]) => (rawFile: UploadRawFile) => Awaitable<void | undefined | null | boolean | File | Blob>) | (() => (rawFile: UploadRawFile) => Awaitable<void | undefined | null | boolean | File | Blob>) | {
|
||||
(): (rawFile: UploadRawFile) => Awaitable<void | undefined | null | boolean | File | Blob>;
|
||||
new (): any;
|
||||
readonly prototype: any;
|
||||
}) | null)[], unknown, unknown, () => void, boolean>;
|
||||
readonly beforeRemove: {
|
||||
readonly type: _$vue.PropType<(uploadFile: UploadFile, uploadFiles: UploadFiles) => Awaitable<boolean>>;
|
||||
readonly required: false;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
__epPropKey: true;
|
||||
};
|
||||
readonly onRemove: EpPropFinalized<(new (...args: any[]) => (uploadFile: UploadFile, uploadFiles: UploadFiles) => void) | (() => (uploadFile: UploadFile, uploadFiles: UploadFiles) => void) | {
|
||||
(): (uploadFile: UploadFile, uploadFiles: UploadFiles) => void;
|
||||
new (): any;
|
||||
readonly prototype: any;
|
||||
} | (((new (...args: any[]) => (uploadFile: UploadFile, uploadFiles: UploadFiles) => void) | (() => (uploadFile: UploadFile, uploadFiles: UploadFiles) => void) | {
|
||||
(): (uploadFile: UploadFile, uploadFiles: UploadFiles) => void;
|
||||
new (): any;
|
||||
readonly prototype: any;
|
||||
}) | null)[], unknown, unknown, () => void, boolean>;
|
||||
readonly onChange: EpPropFinalized<(new (...args: any[]) => (uploadFile: UploadFile, uploadFiles: UploadFiles) => void) | (() => (uploadFile: UploadFile, uploadFiles: UploadFiles) => void) | {
|
||||
(): (uploadFile: UploadFile, uploadFiles: UploadFiles) => void;
|
||||
new (): any;
|
||||
readonly prototype: any;
|
||||
} | (((new (...args: any[]) => (uploadFile: UploadFile, uploadFiles: UploadFiles) => void) | (() => (uploadFile: UploadFile, uploadFiles: UploadFiles) => void) | {
|
||||
(): (uploadFile: UploadFile, uploadFiles: UploadFiles) => void;
|
||||
new (): any;
|
||||
readonly prototype: any;
|
||||
}) | null)[], unknown, unknown, () => void, boolean>;
|
||||
readonly onPreview: EpPropFinalized<(new (...args: any[]) => (uploadFile: UploadFile) => void) | (() => (uploadFile: UploadFile) => void) | {
|
||||
(): (uploadFile: UploadFile) => void;
|
||||
new (): any;
|
||||
readonly prototype: any;
|
||||
} | (((new (...args: any[]) => (uploadFile: UploadFile) => void) | (() => (uploadFile: UploadFile) => void) | {
|
||||
(): (uploadFile: UploadFile) => void;
|
||||
new (): any;
|
||||
readonly prototype: any;
|
||||
}) | null)[], unknown, unknown, () => void, boolean>;
|
||||
readonly onSuccess: EpPropFinalized<(new (...args: any[]) => (response: any, uploadFile: UploadFile, uploadFiles: UploadFiles) => void) | (() => (response: any, uploadFile: UploadFile, uploadFiles: UploadFiles) => void) | {
|
||||
(): (response: any, uploadFile: UploadFile, uploadFiles: UploadFiles) => void;
|
||||
new (): any;
|
||||
readonly prototype: any;
|
||||
} | (((new (...args: any[]) => (response: any, uploadFile: UploadFile, uploadFiles: UploadFiles) => void) | (() => (response: any, uploadFile: UploadFile, uploadFiles: UploadFiles) => void) | {
|
||||
(): (response: any, uploadFile: UploadFile, uploadFiles: UploadFiles) => void;
|
||||
new (): any;
|
||||
readonly prototype: any;
|
||||
}) | null)[], unknown, unknown, () => void, boolean>;
|
||||
readonly onProgress: EpPropFinalized<(new (...args: any[]) => (evt: UploadProgressEvent, uploadFile: UploadFile, uploadFiles: UploadFiles) => void) | (() => (evt: UploadProgressEvent, uploadFile: UploadFile, uploadFiles: UploadFiles) => void) | {
|
||||
(): (evt: UploadProgressEvent, uploadFile: UploadFile, uploadFiles: UploadFiles) => void;
|
||||
new (): any;
|
||||
readonly prototype: any;
|
||||
} | (((new (...args: any[]) => (evt: UploadProgressEvent, uploadFile: UploadFile, uploadFiles: UploadFiles) => void) | (() => (evt: UploadProgressEvent, uploadFile: UploadFile, uploadFiles: UploadFiles) => void) | {
|
||||
(): (evt: UploadProgressEvent, uploadFile: UploadFile, uploadFiles: UploadFiles) => void;
|
||||
new (): any;
|
||||
readonly prototype: any;
|
||||
}) | null)[], unknown, unknown, () => void, boolean>;
|
||||
readonly onError: EpPropFinalized<(new (...args: any[]) => (error: Error, uploadFile: UploadFile, uploadFiles: UploadFiles) => void) | (() => (error: Error, uploadFile: UploadFile, uploadFiles: UploadFiles) => void) | {
|
||||
(): (error: Error, uploadFile: UploadFile, uploadFiles: UploadFiles) => void;
|
||||
new (): any;
|
||||
readonly prototype: any;
|
||||
} | (((new (...args: any[]) => (error: Error, uploadFile: UploadFile, uploadFiles: UploadFiles) => void) | (() => (error: Error, uploadFile: UploadFile, uploadFiles: UploadFiles) => void) | {
|
||||
(): (error: Error, uploadFile: UploadFile, uploadFiles: UploadFiles) => void;
|
||||
new (): any;
|
||||
readonly prototype: any;
|
||||
}) | null)[], unknown, unknown, () => void, boolean>;
|
||||
readonly onExceed: EpPropFinalized<(new (...args: any[]) => (files: File[], uploadFiles: UploadUserFile[]) => void) | (() => (files: File[], uploadFiles: UploadUserFile[]) => void) | {
|
||||
(): (files: File[], uploadFiles: UploadUserFile[]) => void;
|
||||
new (): any;
|
||||
readonly prototype: any;
|
||||
} | (((new (...args: any[]) => (files: File[], uploadFiles: UploadUserFile[]) => void) | (() => (files: File[], uploadFiles: UploadUserFile[]) => void) | {
|
||||
(): (files: File[], uploadFiles: UploadUserFile[]) => void;
|
||||
new (): any;
|
||||
readonly prototype: any;
|
||||
}) | null)[], unknown, unknown, () => void, boolean>;
|
||||
readonly crossorigin: {
|
||||
readonly type: _$vue.PropType<EpPropMergeType<(new (...args: any[]) => "" | "anonymous" | "use-credentials") | (() => "" | "anonymous" | "use-credentials") | (((new (...args: any[]) => "" | "anonymous" | "use-credentials") | (() => "" | "anonymous" | "use-credentials")) | null)[], unknown, unknown>>;
|
||||
readonly required: false;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
__epPropKey: true;
|
||||
};
|
||||
readonly action: EpPropFinalized<StringConstructor, unknown, unknown, "#", boolean>;
|
||||
readonly headers: {
|
||||
readonly type: _$vue.PropType<EpPropMergeType<(new (...args: any[]) => Record<string, any> | Headers) | (() => Record<string, any> | Headers) | (((new (...args: any[]) => Record<string, any> | Headers) | (() => Record<string, any> | Headers)) | null)[], unknown, unknown>>;
|
||||
readonly required: false;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
__epPropKey: true;
|
||||
};
|
||||
readonly method: EpPropFinalized<StringConstructor, unknown, unknown, "post", boolean>;
|
||||
readonly data: EpPropFinalized<(new (...args: any[]) => Mutable<Record<string, any>> | Promise<Mutable<Record<string, any>>> | ((rawFile: UploadRawFile) => Awaitable<UploadData>)) | (() => Awaitable<Mutable<Record<string, any>>> | ((rawFile: UploadRawFile) => Awaitable<UploadData>)) | (((new (...args: any[]) => Mutable<Record<string, any>> | Promise<Mutable<Record<string, any>>> | ((rawFile: UploadRawFile) => Awaitable<UploadData>)) | (() => Awaitable<Mutable<Record<string, any>>> | ((rawFile: UploadRawFile) => Awaitable<UploadData>))) | null)[], unknown, unknown, () => Mutable<{}>, boolean>;
|
||||
readonly multiple: BooleanConstructor;
|
||||
readonly name: EpPropFinalized<StringConstructor, unknown, unknown, "file", boolean>;
|
||||
readonly drag: BooleanConstructor;
|
||||
readonly withCredentials: BooleanConstructor;
|
||||
readonly showFileList: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
|
||||
readonly accept: EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
|
||||
readonly fileList: EpPropFinalized<(new (...args: any[]) => UploadUserFile[]) | (() => UploadUserFile[]) | (((new (...args: any[]) => UploadUserFile[]) | (() => UploadUserFile[])) | null)[], unknown, unknown, () => [], boolean>;
|
||||
readonly autoUpload: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
|
||||
readonly listType: EpPropFinalized<StringConstructor, "picture" | "text" | "picture-card", unknown, "text", boolean>;
|
||||
readonly httpRequest: EpPropFinalized<(new (...args: any[]) => UploadRequestHandler) | (() => UploadRequestHandler) | {
|
||||
(): UploadRequestHandler;
|
||||
new (): any;
|
||||
readonly prototype: any;
|
||||
} | (((new (...args: any[]) => UploadRequestHandler) | (() => UploadRequestHandler) | {
|
||||
(): UploadRequestHandler;
|
||||
new (): any;
|
||||
readonly prototype: any;
|
||||
}) | null)[], unknown, unknown, UploadRequestHandler, boolean>;
|
||||
readonly disabled: EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, boolean>;
|
||||
readonly limit: NumberConstructor;
|
||||
readonly directory: BooleanConstructor;
|
||||
};
|
||||
/**
|
||||
* @deprecated Removed after 3.0.0, Use `UploadProps` instead.
|
||||
*/
|
||||
type UploadPropsPublic = ExtractPublicPropTypes<typeof uploadProps>;
|
||||
type UploadInstance = InstanceType<typeof _default> & unknown;
|
||||
declare const uploadBasePropsDefaults: {
|
||||
readonly action: "#";
|
||||
readonly method: "post";
|
||||
readonly data: () => Mutable<{}>;
|
||||
readonly name: "file";
|
||||
readonly showFileList: true;
|
||||
readonly accept: "";
|
||||
readonly fileList: () => never[];
|
||||
readonly autoUpload: true;
|
||||
readonly listType: "text";
|
||||
readonly httpRequest: UploadRequestHandler;
|
||||
readonly disabled: undefined;
|
||||
};
|
||||
declare const uploadPropsDefaults: {
|
||||
readonly beforeUpload: () => void;
|
||||
readonly onRemove: () => void;
|
||||
readonly onChange: () => void;
|
||||
readonly onPreview: () => void;
|
||||
readonly onSuccess: () => void;
|
||||
readonly onProgress: () => void;
|
||||
readonly onError: () => void;
|
||||
readonly onExceed: () => void;
|
||||
readonly action: "#";
|
||||
readonly method: "post";
|
||||
readonly data: () => Mutable<{}>;
|
||||
readonly name: "file";
|
||||
readonly showFileList: true;
|
||||
readonly accept: "";
|
||||
readonly fileList: () => never[];
|
||||
readonly autoUpload: true;
|
||||
readonly listType: "text";
|
||||
readonly httpRequest: UploadRequestHandler;
|
||||
readonly disabled: undefined;
|
||||
};
|
||||
//#endregion
|
||||
export { Crossorigin, ListType, UploadBaseProps, UploadData, UploadFile, UploadFiles, UploadHooks, UploadInstance, UploadProgressEvent, UploadProps, UploadPropsPublic, UploadRawFile, UploadRequestHandler, UploadRequestOptions, UploadStatus, UploadUserFile, genFileId, uploadBaseProps, uploadBasePropsDefaults, uploadListTypes, uploadProps, uploadPropsDefaults };
|
||||
+224
@@ -0,0 +1,224 @@
|
||||
import { buildProps, definePropType } from "../../../utils/vue/props/runtime.mjs";
|
||||
import { NOOP } from "../../../utils/functions.mjs";
|
||||
import { mutable } from "../../../utils/typescript.mjs";
|
||||
import { ajaxUpload } from "./ajax.mjs";
|
||||
//#region ../../packages/components/upload/src/upload.ts
|
||||
/**
|
||||
* @deprecated Removed after 3.0.0, Use `UploadProps` instead.
|
||||
*/
|
||||
const uploadListTypes = [
|
||||
"text",
|
||||
"picture",
|
||||
"picture-card"
|
||||
];
|
||||
let fileId = 1;
|
||||
const genFileId = () => Date.now() + fileId++;
|
||||
/**
|
||||
* @deprecated Removed after 3.0.0, Use `UploadBaseProps` instead.
|
||||
*/
|
||||
const uploadBaseProps = buildProps({
|
||||
/**
|
||||
* @description request URL
|
||||
*/
|
||||
action: {
|
||||
type: String,
|
||||
default: "#"
|
||||
},
|
||||
/**
|
||||
* @description request headers
|
||||
*/
|
||||
headers: { type: definePropType(Object) },
|
||||
/**
|
||||
* @description set upload request method
|
||||
*/
|
||||
method: {
|
||||
type: String,
|
||||
default: "post"
|
||||
},
|
||||
/**
|
||||
* @description additions options of request
|
||||
*/
|
||||
data: {
|
||||
type: definePropType([
|
||||
Object,
|
||||
Function,
|
||||
Promise
|
||||
]),
|
||||
default: () => mutable({})
|
||||
},
|
||||
/**
|
||||
* @description whether uploading multiple files is permitted
|
||||
*/
|
||||
multiple: Boolean,
|
||||
/**
|
||||
* @description key name for uploaded file
|
||||
*/
|
||||
name: {
|
||||
type: String,
|
||||
default: "file"
|
||||
},
|
||||
/**
|
||||
* @description whether to activate drag and drop mode
|
||||
*/
|
||||
drag: Boolean,
|
||||
/**
|
||||
* @description whether cookies are sent
|
||||
*/
|
||||
withCredentials: Boolean,
|
||||
/**
|
||||
* @description whether to show the uploaded file list
|
||||
*/
|
||||
showFileList: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
/**
|
||||
* @description accepted [file types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept), will not work when `thumbnail-mode === true`
|
||||
*/
|
||||
accept: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
/**
|
||||
* @description default uploaded files
|
||||
*/
|
||||
fileList: {
|
||||
type: definePropType(Array),
|
||||
default: () => mutable([])
|
||||
},
|
||||
/**
|
||||
* @description whether to auto upload file
|
||||
*/
|
||||
autoUpload: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
/**
|
||||
* @description type of file list
|
||||
*/
|
||||
listType: {
|
||||
type: String,
|
||||
values: uploadListTypes,
|
||||
default: "text"
|
||||
},
|
||||
/**
|
||||
* @description override default xhr behavior, allowing you to implement your own upload-file's request
|
||||
*/
|
||||
httpRequest: {
|
||||
type: definePropType(Function),
|
||||
default: ajaxUpload
|
||||
},
|
||||
/**
|
||||
* @description whether to disable upload
|
||||
*/
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: void 0
|
||||
},
|
||||
/**
|
||||
* @description maximum number of uploads allowed
|
||||
*/
|
||||
limit: Number,
|
||||
/**
|
||||
* @description whether to support uploading directory
|
||||
*/
|
||||
directory: Boolean
|
||||
});
|
||||
/**
|
||||
* @deprecated Removed after 3.0.0, Use `UploadProps` instead.
|
||||
*/
|
||||
const uploadProps = buildProps({
|
||||
...uploadBaseProps,
|
||||
/**
|
||||
* @description hook function before uploading with the file to be uploaded as its parameter. If `false` is returned or a `Promise` is returned and then is rejected, uploading will be aborted
|
||||
*/
|
||||
beforeUpload: {
|
||||
type: definePropType(Function),
|
||||
default: NOOP
|
||||
},
|
||||
/**
|
||||
* @description hook function before removing a file with the file and file list as its parameters. If `false` is returned or a `Promise` is returned and then is rejected, removing will be aborted
|
||||
*/
|
||||
beforeRemove: { type: definePropType(Function) },
|
||||
/**
|
||||
* @description hook function when files are removed
|
||||
*/
|
||||
onRemove: {
|
||||
type: definePropType(Function),
|
||||
default: NOOP
|
||||
},
|
||||
/**
|
||||
* @description hook function when select file or upload file success or upload file fail
|
||||
*/
|
||||
onChange: {
|
||||
type: definePropType(Function),
|
||||
default: NOOP
|
||||
},
|
||||
/**
|
||||
* @description hook function when clicking the uploaded files
|
||||
*/
|
||||
onPreview: {
|
||||
type: definePropType(Function),
|
||||
default: NOOP
|
||||
},
|
||||
/**
|
||||
* @description hook function when uploaded successfully
|
||||
*/
|
||||
onSuccess: {
|
||||
type: definePropType(Function),
|
||||
default: NOOP
|
||||
},
|
||||
/**
|
||||
* @description hook function when some progress occurs
|
||||
*/
|
||||
onProgress: {
|
||||
type: definePropType(Function),
|
||||
default: NOOP
|
||||
},
|
||||
/**
|
||||
* @description hook function when some errors occurs
|
||||
*/
|
||||
onError: {
|
||||
type: definePropType(Function),
|
||||
default: NOOP
|
||||
},
|
||||
/**
|
||||
* @description hook function when limit is exceeded
|
||||
*/
|
||||
onExceed: {
|
||||
type: definePropType(Function),
|
||||
default: NOOP
|
||||
},
|
||||
/**
|
||||
* @description set HTML attribute: crossorigin.
|
||||
*/
|
||||
crossorigin: { type: definePropType(String) }
|
||||
});
|
||||
const uploadBasePropsDefaults = {
|
||||
action: "#",
|
||||
method: "post",
|
||||
data: () => mutable({}),
|
||||
name: "file",
|
||||
showFileList: true,
|
||||
accept: "",
|
||||
fileList: () => mutable([]),
|
||||
autoUpload: true,
|
||||
listType: "text",
|
||||
httpRequest: ajaxUpload,
|
||||
disabled: void 0
|
||||
};
|
||||
const uploadPropsDefaults = {
|
||||
...uploadBasePropsDefaults,
|
||||
beforeUpload: NOOP,
|
||||
onRemove: NOOP,
|
||||
onChange: NOOP,
|
||||
onPreview: NOOP,
|
||||
onSuccess: NOOP,
|
||||
onProgress: NOOP,
|
||||
onError: NOOP,
|
||||
onExceed: NOOP
|
||||
};
|
||||
//#endregion
|
||||
export { genFileId, uploadBaseProps, uploadBasePropsDefaults, uploadListTypes, uploadProps, uploadPropsDefaults };
|
||||
|
||||
//# sourceMappingURL=upload.mjs.map
|
||||
+1
File diff suppressed because one or more lines are too long
+65
@@ -0,0 +1,65 @@
|
||||
import { Awaitable } from "../../../utils/typescript.js";
|
||||
import { ListType, UploadData, UploadFile, UploadHooks, UploadProps, UploadRawFile, UploadRequestHandler, UploadStatus, UploadUserFile } from "./upload.js";
|
||||
import * as _$vue from "vue";
|
||||
|
||||
//#region ../../packages/components/upload/src/upload.vue.d.ts
|
||||
declare var __VLS_10: {
|
||||
file: UploadFile;
|
||||
index: number;
|
||||
}, __VLS_21: {}, __VLS_23: {}, __VLS_33: {}, __VLS_35: {}, __VLS_37: {}, __VLS_39: {}, __VLS_50: {
|
||||
file: UploadFile;
|
||||
index: number;
|
||||
};
|
||||
type __VLS_Slots = {} & {
|
||||
file?: (props: typeof __VLS_10) => any;
|
||||
} & {
|
||||
trigger?: (props: typeof __VLS_21) => any;
|
||||
} & {
|
||||
default?: (props: typeof __VLS_23) => any;
|
||||
} & {
|
||||
trigger?: (props: typeof __VLS_33) => any;
|
||||
} & {
|
||||
default?: (props: typeof __VLS_35) => any;
|
||||
} & {
|
||||
default?: (props: typeof __VLS_37) => any;
|
||||
} & {
|
||||
tip?: (props: typeof __VLS_39) => any;
|
||||
} & {
|
||||
file?: (props: typeof __VLS_50) => any;
|
||||
};
|
||||
declare const __VLS_base: _$vue.DefineComponent<UploadProps, {
|
||||
/** @description cancel upload request */abort: (file?: UploadFile) => void; /** @description upload the file list manually */
|
||||
submit: () => void; /** @description clear the file list */
|
||||
clearFiles: (states?: UploadStatus[]) => void; /** @description select the file manually */
|
||||
handleStart: (rawFile: UploadRawFile) => void; /** @description remove the file manually */
|
||||
handleRemove: (file: UploadFile | UploadRawFile) => void;
|
||||
}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, _$vue.PublicProps, Readonly<UploadProps> & Readonly<{}>, {
|
||||
disabled: boolean;
|
||||
name: string;
|
||||
data: Awaitable<UploadData> | ((rawFile: UploadRawFile) => Awaitable<UploadData>);
|
||||
onChange: UploadHooks["onChange"];
|
||||
onError: UploadHooks["onError"];
|
||||
onProgress: UploadHooks["onProgress"];
|
||||
beforeUpload: UploadHooks["beforeUpload"];
|
||||
onRemove: UploadHooks["onRemove"];
|
||||
onSuccess: UploadHooks["onSuccess"];
|
||||
onExceed: UploadHooks["onExceed"];
|
||||
action: string;
|
||||
method: string;
|
||||
showFileList: boolean;
|
||||
accept: string;
|
||||
fileList: UploadUserFile[];
|
||||
autoUpload: boolean;
|
||||
listType: ListType;
|
||||
httpRequest: UploadRequestHandler;
|
||||
onPreview: UploadHooks["onPreview"];
|
||||
}, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
|
||||
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
||||
declare const _default: typeof __VLS_export;
|
||||
type __VLS_WithSlots<T, S> = T & {
|
||||
new (): {
|
||||
$slots: S;
|
||||
};
|
||||
};
|
||||
//#endregion
|
||||
export { _default as default };
|
||||
Generated
Vendored
+118
@@ -0,0 +1,118 @@
|
||||
import { useFormDisabled } from "../../form/src/hooks/use-form-common-props.mjs";
|
||||
import { uploadProps } from "./upload.mjs";
|
||||
import { uploadContextKey } from "./constants.mjs";
|
||||
import upload_list_default from "./upload-list2.mjs";
|
||||
import upload_content_default from "./upload-content2.mjs";
|
||||
import { useHandlers } from "./use-handlers.mjs";
|
||||
import { computed, createBlock, createCommentVNode, createElementBlock, createSlots, createVNode, defineComponent, mergeProps, onBeforeUnmount, openBlock, provide, renderSlot, shallowRef, toRef, unref, withCtx } from "vue";
|
||||
//#region ../../packages/components/upload/src/upload.vue?vue&type=script&setup=true&lang.ts
|
||||
var upload_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
|
||||
name: "ElUpload",
|
||||
__name: "upload",
|
||||
props: uploadProps,
|
||||
setup(__props, { expose: __expose }) {
|
||||
const props = __props;
|
||||
const disabled = useFormDisabled();
|
||||
const uploadRef = shallowRef();
|
||||
const { abort, submit, clearFiles, uploadFiles, handleStart, handleError, handleRemove, handleSuccess, handleProgress, revokeFileObjectURL } = useHandlers(props, uploadRef);
|
||||
const isPictureCard = computed(() => props.listType === "picture-card");
|
||||
const uploadContentProps = computed(() => ({
|
||||
...props,
|
||||
fileList: uploadFiles.value,
|
||||
onStart: handleStart,
|
||||
onProgress: handleProgress,
|
||||
onSuccess: handleSuccess,
|
||||
onError: handleError,
|
||||
onRemove: handleRemove
|
||||
}));
|
||||
onBeforeUnmount(() => {
|
||||
uploadFiles.value.forEach(revokeFileObjectURL);
|
||||
});
|
||||
provide(uploadContextKey, { accept: toRef(props, "accept") });
|
||||
__expose({
|
||||
/** @description cancel upload request */
|
||||
abort,
|
||||
/** @description upload the file list manually */
|
||||
submit,
|
||||
/** @description clear the file list */
|
||||
clearFiles,
|
||||
/** @description select the file manually */
|
||||
handleStart,
|
||||
/** @description remove the file manually */
|
||||
handleRemove
|
||||
});
|
||||
return (_ctx, _cache) => {
|
||||
return openBlock(), createElementBlock("div", null, [
|
||||
isPictureCard.value && __props.showFileList ? (openBlock(), createBlock(upload_list_default, {
|
||||
key: 0,
|
||||
disabled: unref(disabled),
|
||||
"list-type": __props.listType,
|
||||
files: unref(uploadFiles),
|
||||
crossorigin: __props.crossorigin,
|
||||
"handle-preview": __props.onPreview,
|
||||
onRemove: unref(handleRemove)
|
||||
}, createSlots({
|
||||
append: withCtx(() => [createVNode(upload_content_default, mergeProps({
|
||||
ref_key: "uploadRef",
|
||||
ref: uploadRef
|
||||
}, uploadContentProps.value), {
|
||||
default: withCtx(() => [_ctx.$slots.trigger ? renderSlot(_ctx.$slots, "trigger", { key: 0 }) : createCommentVNode("v-if", true), !_ctx.$slots.trigger && _ctx.$slots.default ? renderSlot(_ctx.$slots, "default", { key: 1 }) : createCommentVNode("v-if", true)]),
|
||||
_: 3
|
||||
}, 16)]),
|
||||
_: 2
|
||||
}, [_ctx.$slots.file ? {
|
||||
name: "default",
|
||||
fn: withCtx(({ file, index }) => [renderSlot(_ctx.$slots, "file", {
|
||||
file,
|
||||
index
|
||||
})]),
|
||||
key: "0"
|
||||
} : void 0]), 1032, [
|
||||
"disabled",
|
||||
"list-type",
|
||||
"files",
|
||||
"crossorigin",
|
||||
"handle-preview",
|
||||
"onRemove"
|
||||
])) : createCommentVNode("v-if", true),
|
||||
!isPictureCard.value || isPictureCard.value && !__props.showFileList ? (openBlock(), createBlock(upload_content_default, mergeProps({
|
||||
key: 1,
|
||||
ref_key: "uploadRef",
|
||||
ref: uploadRef
|
||||
}, uploadContentProps.value), {
|
||||
default: withCtx(() => [_ctx.$slots.trigger ? renderSlot(_ctx.$slots, "trigger", { key: 0 }) : createCommentVNode("v-if", true), !_ctx.$slots.trigger && _ctx.$slots.default ? renderSlot(_ctx.$slots, "default", { key: 1 }) : createCommentVNode("v-if", true)]),
|
||||
_: 3
|
||||
}, 16)) : createCommentVNode("v-if", true),
|
||||
_ctx.$slots.trigger ? renderSlot(_ctx.$slots, "default", { key: 2 }) : createCommentVNode("v-if", true),
|
||||
renderSlot(_ctx.$slots, "tip"),
|
||||
!isPictureCard.value && __props.showFileList ? (openBlock(), createBlock(upload_list_default, {
|
||||
key: 3,
|
||||
disabled: unref(disabled),
|
||||
"list-type": __props.listType,
|
||||
files: unref(uploadFiles),
|
||||
crossorigin: __props.crossorigin,
|
||||
"handle-preview": __props.onPreview,
|
||||
onRemove: unref(handleRemove)
|
||||
}, createSlots({ _: 2 }, [_ctx.$slots.file ? {
|
||||
name: "default",
|
||||
fn: withCtx(({ file, index }) => [renderSlot(_ctx.$slots, "file", {
|
||||
file,
|
||||
index
|
||||
})]),
|
||||
key: "0"
|
||||
} : void 0]), 1032, [
|
||||
"disabled",
|
||||
"list-type",
|
||||
"files",
|
||||
"crossorigin",
|
||||
"handle-preview",
|
||||
"onRemove"
|
||||
])) : createCommentVNode("v-if", true)
|
||||
]);
|
||||
};
|
||||
}
|
||||
});
|
||||
//#endregion
|
||||
export { upload_vue_vue_type_script_setup_true_lang_default as default };
|
||||
|
||||
//# sourceMappingURL=upload.vue_vue_type_script_setup_true_lang.mjs.map
|
||||
Generated
Vendored
+1
File diff suppressed because one or more lines are too long
+7
@@ -0,0 +1,7 @@
|
||||
import upload_vue_vue_type_script_setup_true_lang_default from "./upload.vue_vue_type_script_setup_true_lang.mjs";
|
||||
//#region ../../packages/components/upload/src/upload.vue
|
||||
var upload_default = upload_vue_vue_type_script_setup_true_lang_default;
|
||||
//#endregion
|
||||
export { upload_default as default };
|
||||
|
||||
//# sourceMappingURL=upload2.mjs.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"upload2.mjs","names":[],"sources":["../../../../../../packages/components/upload/src/upload.vue"],"sourcesContent":["<template>\n <div>\n <upload-list\n v-if=\"isPictureCard && showFileList\"\n :disabled=\"disabled\"\n :list-type=\"listType\"\n :files=\"uploadFiles\"\n :crossorigin=\"crossorigin\"\n :handle-preview=\"onPreview\"\n @remove=\"handleRemove\"\n >\n <template v-if=\"$slots.file\" #default=\"{ file, index }\">\n <slot name=\"file\" :file=\"file\" :index=\"index\" />\n </template>\n <template #append>\n <upload-content ref=\"uploadRef\" v-bind=\"uploadContentProps\">\n <slot v-if=\"$slots.trigger\" name=\"trigger\" />\n <slot v-if=\"!$slots.trigger && $slots.default\" />\n </upload-content>\n </template>\n </upload-list>\n\n <upload-content\n v-if=\"!isPictureCard || (isPictureCard && !showFileList)\"\n ref=\"uploadRef\"\n v-bind=\"uploadContentProps\"\n >\n <slot v-if=\"$slots.trigger\" name=\"trigger\" />\n <slot v-if=\"!$slots.trigger && $slots.default\" />\n </upload-content>\n\n <slot v-if=\"$slots.trigger\" />\n <slot name=\"tip\" />\n <upload-list\n v-if=\"!isPictureCard && showFileList\"\n :disabled=\"disabled\"\n :list-type=\"listType\"\n :files=\"uploadFiles\"\n :crossorigin=\"crossorigin\"\n :handle-preview=\"onPreview\"\n @remove=\"handleRemove\"\n >\n <template v-if=\"$slots.file\" #default=\"{ file, index }\">\n <slot name=\"file\" :file=\"file\" :index=\"index\" />\n </template>\n </upload-list>\n </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, onBeforeUnmount, provide, shallowRef, toRef } from 'vue'\nimport { useFormDisabled } from '@element-plus/components/form'\nimport { uploadContextKey } from './constants'\nimport UploadList from './upload-list.vue'\nimport UploadContent from './upload-content.vue'\nimport { useHandlers } from './use-handlers'\nimport { uploadPropsDefaults } from './upload'\n\nimport type { UploadProps } from './upload'\nimport type {\n UploadContentInstance,\n UploadContentProps,\n} from './upload-content'\n\ndefineOptions({\n name: 'ElUpload',\n})\n\nconst props = withDefaults(defineProps<UploadProps>(), uploadPropsDefaults)\n\nconst disabled = useFormDisabled()\n\nconst uploadRef = shallowRef<UploadContentInstance>()\nconst {\n abort,\n submit,\n clearFiles,\n uploadFiles,\n handleStart,\n handleError,\n handleRemove,\n handleSuccess,\n handleProgress,\n revokeFileObjectURL,\n} = useHandlers(props, uploadRef)\n\nconst isPictureCard = computed(() => props.listType === 'picture-card')\n\nconst uploadContentProps = computed<UploadContentProps>(() => ({\n ...props,\n fileList: uploadFiles.value,\n onStart: handleStart,\n onProgress: handleProgress,\n onSuccess: handleSuccess,\n onError: handleError,\n onRemove: handleRemove,\n}))\n\nonBeforeUnmount(() => {\n uploadFiles.value.forEach(revokeFileObjectURL)\n})\n\nprovide(uploadContextKey, {\n accept: toRef(props, 'accept'),\n})\n\ndefineExpose({\n /** @description cancel upload request */\n abort,\n /** @description upload the file list manually */\n submit,\n /** @description clear the file list */\n clearFiles,\n /** @description select the file manually */\n handleStart,\n /** @description remove the file manually */\n handleRemove,\n})\n</script>\n"],"mappings":""}
|
||||
+65
@@ -0,0 +1,65 @@
|
||||
import { UploadAjaxError } from "./ajax.js";
|
||||
import { UploadFile, UploadProgressEvent, UploadProps, UploadRawFile, UploadStatus } from "./upload.js";
|
||||
import { UploadContentInstance } from "./upload-content.js";
|
||||
import * as _$vue from "vue";
|
||||
import { ShallowRef } from "vue";
|
||||
|
||||
//#region ../../packages/components/upload/src/use-handlers.d.ts
|
||||
declare const useHandlers: (props: UploadProps & Required<Pick<UploadProps, "listType" | "onChange" | "onError" | "onProgress" | "onSuccess" | "onRemove">>, uploadRef: ShallowRef<UploadContentInstance | undefined>) => {
|
||||
/** @description two-way binding ref from props `fileList` */uploadFiles: _$vue.Ref<{
|
||||
name: string;
|
||||
percentage?: number | undefined;
|
||||
status: UploadStatus;
|
||||
size?: number | undefined;
|
||||
response?: unknown;
|
||||
uid: number;
|
||||
url?: string | undefined;
|
||||
raw?: {
|
||||
uid: number;
|
||||
isDirectory?: boolean | undefined;
|
||||
readonly lastModified: number;
|
||||
readonly name: string;
|
||||
readonly webkitRelativePath: string;
|
||||
readonly size: number;
|
||||
readonly type: string;
|
||||
arrayBuffer: () => Promise<ArrayBuffer>;
|
||||
bytes: () => Promise<Uint8Array<ArrayBuffer>>;
|
||||
slice: (start?: number, end?: number, contentType?: string) => Blob;
|
||||
stream: () => ReadableStream<Uint8Array<ArrayBuffer>>;
|
||||
text: () => Promise<string>;
|
||||
} | undefined;
|
||||
}[], {
|
||||
name: string;
|
||||
percentage?: number | undefined;
|
||||
status: UploadStatus;
|
||||
size?: number | undefined;
|
||||
response?: unknown;
|
||||
uid: number;
|
||||
url?: string | undefined;
|
||||
raw?: {
|
||||
uid: number;
|
||||
isDirectory?: boolean | undefined;
|
||||
readonly lastModified: number;
|
||||
readonly name: string;
|
||||
readonly webkitRelativePath: string;
|
||||
readonly size: number;
|
||||
readonly type: string;
|
||||
arrayBuffer: () => Promise<ArrayBuffer>;
|
||||
bytes: () => Promise<Uint8Array<ArrayBuffer>>;
|
||||
slice: (start?: number, end?: number, contentType?: string) => Blob;
|
||||
stream: () => ReadableStream<Uint8Array<ArrayBuffer>>;
|
||||
text: () => Promise<string>;
|
||||
} | undefined;
|
||||
}[]>;
|
||||
abort: (file?: UploadFile) => void;
|
||||
clearFiles: (states?: UploadStatus[]) => void;
|
||||
handleError: (err: UploadAjaxError, rawFile: UploadRawFile) => void;
|
||||
handleProgress: (evt: UploadProgressEvent, rawFile: UploadRawFile) => void;
|
||||
handleStart: (rawFile: UploadRawFile) => void;
|
||||
handleSuccess: (response: any, rawFile: UploadRawFile) => unknown;
|
||||
handleRemove: (file: UploadFile | UploadRawFile) => void;
|
||||
submit: () => void;
|
||||
revokeFileObjectURL: (file: UploadFile) => void;
|
||||
};
|
||||
//#endregion
|
||||
export { useHandlers };
|
||||
+128
@@ -0,0 +1,128 @@
|
||||
import { debugWarn, throwError } from "../../../utils/error.mjs";
|
||||
import { genFileId } from "./upload.mjs";
|
||||
import { useVModel } from "@vueuse/core";
|
||||
import { isNil } from "lodash-unified";
|
||||
import { nextTick, watch } from "vue";
|
||||
//#region ../../packages/components/upload/src/use-handlers.ts
|
||||
const SCOPE = "ElUpload";
|
||||
const revokeFileObjectURL = (file) => {
|
||||
if (file.url?.startsWith("blob:")) URL.revokeObjectURL(file.url);
|
||||
};
|
||||
const useHandlers = (props, uploadRef) => {
|
||||
const uploadFiles = useVModel(props, "fileList", void 0, { passive: true });
|
||||
const getFile = (rawFile) => uploadFiles.value.find((file) => file.uid === rawFile.uid);
|
||||
function abort(file) {
|
||||
uploadRef.value?.abort(file);
|
||||
}
|
||||
function clearFiles(states = [
|
||||
"ready",
|
||||
"uploading",
|
||||
"success",
|
||||
"fail"
|
||||
]) {
|
||||
uploadFiles.value = uploadFiles.value.filter((row) => !states.includes(row.status));
|
||||
}
|
||||
function removeFile(file) {
|
||||
uploadFiles.value = uploadFiles.value.filter((uploadFile) => uploadFile.uid !== file.uid);
|
||||
}
|
||||
const emitChange = (file) => {
|
||||
nextTick(() => props.onChange(file, uploadFiles.value));
|
||||
};
|
||||
const handleError = (err, rawFile) => {
|
||||
const file = getFile(rawFile);
|
||||
if (!file) return;
|
||||
console.error(err);
|
||||
file.status = "fail";
|
||||
removeFile(file);
|
||||
props.onError(err, file, uploadFiles.value);
|
||||
emitChange(file);
|
||||
};
|
||||
const handleProgress = (evt, rawFile) => {
|
||||
const file = getFile(rawFile);
|
||||
if (!file) return;
|
||||
props.onProgress(evt, file, uploadFiles.value);
|
||||
file.status = "uploading";
|
||||
file.percentage = Math.round(evt.percent);
|
||||
};
|
||||
const handleSuccess = (response, rawFile) => {
|
||||
const file = getFile(rawFile);
|
||||
if (!file) return;
|
||||
file.status = "success";
|
||||
file.response = response;
|
||||
props.onSuccess(response, file, uploadFiles.value);
|
||||
emitChange(file);
|
||||
};
|
||||
const handleStart = (file) => {
|
||||
if (isNil(file.uid)) file.uid = genFileId();
|
||||
const uploadFile = {
|
||||
name: file.name,
|
||||
percentage: 0,
|
||||
status: "ready",
|
||||
size: file.size,
|
||||
raw: file,
|
||||
uid: file.uid
|
||||
};
|
||||
if (props.listType === "picture-card" || props.listType === "picture") try {
|
||||
uploadFile.url = URL.createObjectURL(file);
|
||||
} catch (err) {
|
||||
debugWarn(SCOPE, err.message);
|
||||
props.onError(err, uploadFile, uploadFiles.value);
|
||||
}
|
||||
uploadFiles.value = [...uploadFiles.value, uploadFile];
|
||||
emitChange(uploadFile);
|
||||
};
|
||||
const handleRemove = async (file) => {
|
||||
const uploadFile = file instanceof File ? getFile(file) : file;
|
||||
if (!uploadFile) throwError(SCOPE, "file to be removed not found");
|
||||
const doRemove = (file) => {
|
||||
abort(file);
|
||||
removeFile(file);
|
||||
props.onRemove(file, uploadFiles.value);
|
||||
revokeFileObjectURL(file);
|
||||
};
|
||||
if (props.beforeRemove) {
|
||||
if (await props.beforeRemove(uploadFile, uploadFiles.value) !== false) doRemove(uploadFile);
|
||||
} else doRemove(uploadFile);
|
||||
};
|
||||
function submit() {
|
||||
uploadFiles.value.filter(({ status }) => status === "ready").forEach(({ raw }) => raw && uploadRef.value?.upload(raw));
|
||||
}
|
||||
watch(() => props.listType, (val) => {
|
||||
if (val !== "picture-card" && val !== "picture") return;
|
||||
uploadFiles.value = uploadFiles.value.map((file) => {
|
||||
const { raw, url } = file;
|
||||
if (!url && raw) try {
|
||||
file.url = URL.createObjectURL(raw);
|
||||
} catch (err) {
|
||||
props.onError(err, file, uploadFiles.value);
|
||||
}
|
||||
return file;
|
||||
});
|
||||
});
|
||||
watch(uploadFiles, (files) => {
|
||||
for (const file of files) {
|
||||
file.uid ||= genFileId();
|
||||
file.status ||= "success";
|
||||
}
|
||||
}, {
|
||||
immediate: true,
|
||||
deep: true
|
||||
});
|
||||
return {
|
||||
/** @description two-way binding ref from props `fileList` */
|
||||
uploadFiles,
|
||||
abort,
|
||||
clearFiles,
|
||||
handleError,
|
||||
handleProgress,
|
||||
handleStart,
|
||||
handleSuccess,
|
||||
handleRemove,
|
||||
submit,
|
||||
revokeFileObjectURL
|
||||
};
|
||||
};
|
||||
//#endregion
|
||||
export { useHandlers };
|
||||
|
||||
//# sourceMappingURL=use-handlers.mjs.map
|
||||
+1
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user