@type-dom/ui 0.1.3 → 0.2.1

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

@@ -1,100 +0,0 @@
-"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

@@ -1,6 +0,0 @@
-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

@@ -1,5 +0,0 @@
-"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

@@ -1,3 +0,0 @@
-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

@@ -1,5 +0,0 @@
-"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

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

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

@@ -1,5 +0,0 @@
-"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

@@ -1,15 +0,0 @@
-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,108 +0,0 @@
-"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

@@ -1,5 +0,0 @@
-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

@@ -1,22 +0,0 @@
-"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

@@ -1,160 +0,0 @@
-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,2 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -1,11 +0,0 @@
-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;
-}