@type-dom/ui 0.1.0 → 0.1.2

package/src/components/form/td-upload/ajax.js

@@ -0,0 +1,100 @@
+"use strict";
+// import { isNil } from 'lodash-unified'
+// import { isArray, throwError } from '@element-plus/utils'
+// import type {
+//   UploadProgressEvent,
+//   UploadRequestHandler,
+//   UploadRequestOptions,
+// } from './upload'
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ajaxUpload = exports.UploadAjaxError = void 0;
+const utils_1 = require("@type-dom/utils");
+const SCOPE = 'TdUpload';
+class UploadAjaxError extends Error {
+    constructor(message, status, method, url) {
+        super(message);
+        this.name = 'UploadAjaxError';
+        this.status = status;
+        this.method = method;
+        this.url = url;
+    }
+}
+exports.UploadAjaxError = UploadAjaxError;
+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 (_a) {
+        return text;
+    }
+}
+const ajaxUpload = (option) => {
+    if (typeof XMLHttpRequest === 'undefined')
+        (0, utils_1.throwError)(SCOPE, 'XMLHttpRequest is undefined');
+    const xhr = new XMLHttpRequest();
+    const action = option.action;
+    if (xhr.upload) {
+        xhr.upload.addEventListener('progress', (evt) => {
+            var _a;
+            const progressEvt = evt;
+            progressEvt.percent = evt.total > 0 ? (evt.loaded / evt.total) * 100 : 0;
+            (_a = option.onProgress) === null || _a === void 0 ? void 0 : _a.call(option, progressEvt);
+        });
+    }
+    const formData = new FormData();
+    if (option.data) {
+        for (const [key, value] of Object.entries(option.data)) {
+            if ((0, utils_1.isArray)(value) && value.length)
+                formData.append(key, ...value);
+            else
+                formData.append(key, value);
+        }
+    }
+    formData.append(option.filename, option.file, option.file.name);
+    xhr.addEventListener('error', () => {
+        var _a;
+        (_a = option.onError) === null || _a === void 0 ? void 0 : _a.call(option, getError(action, option, xhr));
+    });
+    xhr.addEventListener('load', () => {
+        var _a, _b;
+        if (xhr.status < 200 || xhr.status >= 300) {
+            return (_a = option.onError) === null || _a === void 0 ? void 0 : _a.call(option, getError(action, option, xhr));
+        }
+        (_b = option.onSuccess) === null || _b === void 0 ? void 0 : _b.call(option, 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 ((0, utils_1.isNil)(value))
+                continue;
+            xhr.setRequestHeader(key, String(value));
+        }
+    }
+    xhr.send(formData);
+    return xhr;
+};
+exports.ajaxUpload = ajaxUpload;

package/src/components/form/td-upload/constants.d.ts

@@ -0,0 +1,6 @@
+import { InjectionKey } from '@type-dom/framework';
+import { Ref } from '@type-dom/signals';
+export interface UploadContext {
+    accept: Ref<string | undefined>;
+}
+export declare const uploadContextKey: InjectionKey<UploadContext>;

package/src/components/form/td-upload/constants.js

@@ -0,0 +1,5 @@
+"use strict";
+// import type { ComputedRef, InjectionKey } from 'vue'
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.uploadContextKey = void 0;
+exports.uploadContextKey = Symbol('uploadContextKey');

package/src/components/form/td-upload/style/css.d.ts

@@ -0,0 +1,3 @@
+import '../../../base/style/css';
+import '@element-plus/theme-chalk/el-upload.css';
+import '@element-plus/components/progress/style/css';

package/src/components/form/td-upload/style/css.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("../../../base/style/css");
+require("@element-plus/theme-chalk/el-upload.css");
+require("@element-plus/components/progress/style/css");

package/src/components/form/td-upload/style/index.d.ts

@@ -0,0 +1,3 @@
+import '../../../../components/base/style';
+import '../../../../theme-chalk/upload.scss';
+import '../../../../components/data/td-progress/style';

package/src/components/form/td-upload/style/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("../../../../components/base/style");
+require("../../../../theme-chalk/upload.scss");
+require("../../../../components/data/td-progress/style");

package/src/components/form/td-upload/td-upload.class.d.ts

@@ -0,0 +1,15 @@
+import { TypeDiv } from '@type-dom/framework';
+import { UploadContentProps } from './upload-content/upload-content.interface';
+import { ITdUpload, UploadFile, UploadProps, UploadStatus } from './td-upload.interface';
+import './style/index';
+export declare class TdUpload extends TypeDiv implements ITdUpload {
+    className: 'TdUpload';
+    props: UploadProps;
+    abort?: (file: UploadFile) => void;
+    submit?: () => void;
+    clearFiles?: (states?: UploadStatus[]) => void;
+    handleStart?: UploadContentProps['onStart'];
+    handleRemove?: UploadContentProps['onRemove'];
+    constructor(params?: UploadProps);
+    setup(): void;
+}

package/src/components/form/td-upload/td-upload.class.js

@@ -1 +1,108 @@
 "use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdUpload = void 0;
+const framework_1 = require("@type-dom/framework");
+const signals_1 = require("@type-dom/signals");
+const utils_1 = require("@type-dom/utils");
+const use_form_common_props_1 = require("../td-form/hooks/use-form-common-props");
+const upload_content_class_1 = require("./upload-content/upload-content.class");
+const upload_list_class_1 = require("./upload-list/upload-list.class");
+const use_handlers_1 = require("./use-handlers");
+const constants_1 = require("./constants");
+const td_upload_const_1 = require("./td-upload.const");
+require("./style/index");
+class TdUpload extends framework_1.TypeDiv {
+    constructor(params = {}) {
+        super();
+        this.className = 'TdUpload';
+        this.assignProps(td_upload_const_1.uploadProps);
+        this.props = this.useParams(params);
+    }
+    setup() {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+        const props = this.props;
+        const disabled = (0, use_form_common_props_1.useFormDisabled)();
+        const uploadRef = (0, signals_1.signal)();
+        const { abort, submit, clearFiles, revokeFileObjectURL, uploadFiles, handleStart, handleError, handleRemove, handleSuccess, handleProgress, } = (0, use_handlers_1.useHandlers)(props, uploadRef);
+        const isPictureCard = (0, signals_1.computed)(() => props.listType === 'picture-card');
+        const uploadContentProps = (0, signals_1.computed)(() => (Object.assign(Object.assign({}, props), { fileList: uploadFiles, onStart: handleStart, onProgress: handleProgress, onSuccess: handleSuccess, onError: handleError, onRemove: handleRemove })));
+        console.log('uploadContentProps.get() is ', uploadContentProps.get());
+        (0, framework_1.onBeforeUnmount)(() => {
+            console.warn('uploadFiles is ', uploadFiles);
+            (0, signals_1.toRaw)(uploadFiles).forEach(revokeFileObjectURL);
+        });
+        (0, framework_1.provide)(constants_1.uploadContextKey, {
+            accept: (0, signals_1.toRef)(props, 'accept'),
+        });
+        (0, framework_1.defineExpose)({
+            /** @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,
+        });
+        if (isPictureCard.get() && props.showFileList) {
+            this.addChild(new upload_list_class_1.TdUploadList({
+                disabled: disabled.get(),
+                listType: props.listType,
+                files: uploadFiles,
+                crossorigin: props.crossorigin,
+                handlePreview: props.onPreview,
+                emits: {
+                    remove: handleRemove,
+                },
+                slots: {
+                    default: (file, index) => {
+                        var _a, _b;
+                        return (0, utils_1.isFunction)((_a = props.slots) === null || _a === void 0 ? void 0 : _a.file) ? (_b = props.slots) === null || _b === void 0 ? void 0 : _b.file(file, index) : undefined;
+                    },
+                    append: new upload_content_class_1.TdUploadContent(Object.assign(Object.assign({}, uploadContentProps.get()), { refEl: uploadRef, slot: ((_a = props.slots) === null || _a === void 0 ? void 0 : _a.trigger)
+                            ? (_b = props.slots) === null || _b === void 0 ? void 0 : _b.trigger
+                            : (_c = props.slot) !== null && _c !== void 0 ? _c : (_d = props.slots) === null || _d === void 0 ? void 0 : _d.default })),
+                }
+            }));
+        }
+        if (!isPictureCard.get() || (isPictureCard.get() && !props.showFileList)) {
+            console.error('!isPictureCard.get() || (isPictureCard.get() && !props.showFileList)');
+            this.addChild(new upload_content_class_1.TdUploadContent(Object.assign(Object.assign({}, uploadContentProps.get()), { refEl: uploadRef, slot: (_g = (_f = (_e = props.slots) === null || _e === void 0 ? void 0 : _e.trigger) !== null && _f !== void 0 ? _f : props.slot) !== null && _g !== void 0 ? _g : (_h = props.slots) === null || _h === void 0 ? void 0 : _h.default })));
+        }
+        if ((_j = props.slots) === null || _j === void 0 ? void 0 : _j.trigger) {
+            this.addChild(new framework_1.Fragment({
+                slot: (_k = props.slot) !== null && _k !== void 0 ? _k : (_l = props.slots) === null || _l === void 0 ? void 0 : _l.default, // props.slot 如果上面props.slot已经被使用了，这里如果vIf会被remove掉
+            }));
+        }
+        this.addChildren(new framework_1.Fragment({
+            slot: (_m = props.slots) === null || _m === void 0 ? void 0 : _m.tip,
+        }));
+        if (!isPictureCard.get() && props.showFileList) {
+            console.error('!isPictureCard.get() && props.showFileList');
+            this.addChild(new upload_list_class_1.TdUploadList({
+                disabled: disabled.get(),
+                listType: props.listType,
+                files: uploadFiles,
+                crossorigin: props.crossorigin,
+                handlePreview: props.onPreview,
+                emits: {
+                    remove: handleRemove,
+                },
+                slots: {
+                    default: (file, index) => {
+                        var _a, _b;
+                        return (0, utils_1.isFunction)((_a = props.slots) === null || _a === void 0 ? void 0 : _a.file) ? (_b = props.slots) === null || _b === void 0 ? void 0 : _b.file(file, index) : undefined;
+                    },
+                },
+                // slot: props.slots?.file
+                //   ? (file, index) => isFunction(props.slots?.file)
+                //     ? props.slots?.file(file, index)
+                //     : undefined
+                //   : undefined,
+            }));
+        }
+    }
+}
+exports.TdUpload = TdUpload;

package/src/components/form/td-upload/td-upload.const.d.ts

@@ -0,0 +1,5 @@
+import { UploadBaseProps, UploadProps } from './td-upload.interface';
+export declare const uploadListTypes: readonly ["text", "picture", "picture-card"];
+export declare const genFileId: () => number;
+export declare const uploadBaseProps: UploadBaseProps;
+export declare const uploadProps: UploadProps;

package/src/components/form/td-upload/td-upload.const.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.uploadProps = exports.uploadBaseProps = exports.genFileId = exports.uploadListTypes = void 0;
+const utils_1 = require("@type-dom/utils");
+const signals_1 = require("@type-dom/signals");
+const ajax_1 = require("./ajax");
+exports.uploadListTypes = ['text', 'picture', 'picture-card'];
+let fileId = 1;
+const genFileId = () => Date.now() + fileId++;
+exports.genFileId = genFileId;
+exports.uploadBaseProps = {
+    action: '#',
+    method: 'post',
+    name: 'file',
+    showFileList: true,
+    accept: '',
+    fileList: (0, signals_1.signal)([]),
+    autoUpload: true,
+    listType: 'text',
+    httpRequest: ajax_1.ajaxUpload
+};
+exports.uploadProps = Object.assign(Object.assign({}, exports.uploadBaseProps), { beforeUpload: utils_1.NOOP, onRemove: utils_1.NOOP, onChange: utils_1.NOOP, onPreview: utils_1.NOOP, onSuccess: utils_1.NOOP, onProgress: utils_1.NOOP, onError: utils_1.NOOP, onExceed: utils_1.NOOP });

package/src/components/form/td-upload/td-upload.interface.d.ts

@@ -0,0 +1,160 @@
+import { Awaitable, Mutable } from '@type-dom/utils';
+import { ITypeDiv, TypeDivProps } from '@type-dom/framework';
+import { MaybeRef } from '@type-dom/signals';
+import { UploadAjaxError } from './ajax';
+export interface ITdUpload extends ITypeDiv {
+    className: 'TdUpload';
+}
+export interface UploadBaseProps extends TypeDivProps {
+    /**
+     * @description request URL
+     */
+    action?: string;
+    /**
+     * @description request headers
+     */
+    headers?: Headers | Record<string, unknown>;
+    /**
+     * @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?: MaybeRef<UploadFiles>;
+    /**
+     * @description whether to auto upload file
+     */
+    autoUpload?: boolean;
+    /**
+     * @description type of file list
+     */
+    listType?: string;
+    /**
+     * @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;
+}
+export 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?: 'anonymous' | 'use-credentials' | '';
+}
+export type UploadStatus = 'ready' | 'uploading' | 'success' | 'fail';
+export interface UploadProgressEvent extends ProgressEvent {
+    percent: number;
+}
+export interface UploadRequestOptions {
+    action?: string;
+    method?: string;
+    data?: Record<string, string | Blob | [Blob, string] | unknown>;
+    filename?: string;
+    file?: UploadRawFile;
+    headers?: Headers | Record<string, string | number | null | undefined | unknown>;
+    onError?: (evt: UploadAjaxError) => void;
+    onProgress?: (evt: UploadProgressEvent) => void;
+    onSuccess?: (response: unknown) => void;
+    withCredentials?: boolean;
+}
+export interface UploadFile {
+    name?: string;
+    percentage?: number;
+    status?: UploadStatus;
+    size?: number;
+    response?: unknown;
+    uid?: number;
+    url?: string;
+    raw?: UploadRawFile;
+}
+export type UploadUserFile = Omit<UploadFile, 'status' | 'uid'> & Partial<Pick<UploadFile, 'status' | 'uid'>>;
+export type UploadFiles = UploadFile[];
+export interface UploadRawFile extends File {
+    uid: number;
+    isDirectory?: boolean;
+}
+export type UploadRequestHandler = (options: UploadRequestOptions) => XMLHttpRequest | Promise<unknown>;
+export 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;
+}
+export type UploadData = Mutable<Record<string, unknown>>;

package/src/components/form/td-upload/td-upload.interface.js

@@ -1 +1,2 @@
 "use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/src/components/form/td-upload/upload-content/upload-content.class.d.ts

@@ -0,0 +1,11 @@
+import { TypeDiv } from '@type-dom/framework';
+import { ITdUploadContent, UploadContentProps } from './upload-content.interface';
+import { UploadFile, UploadRawFile } from '../td-upload.interface';
+export declare class TdUploadContent extends TypeDiv implements ITdUploadContent {
+    className: 'TdUploadContent';
+    props: UploadContentProps;
+    abort?: (file?: UploadFile) => void;
+    upload?: (rawFile: UploadRawFile) => Promise<void>;
+    constructor(params?: UploadContentProps);
+    setup(): void;
+}