@type-dom/ui 0.1.1 → 0.1.2

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

@@ -0,0 +1,218 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdUploadContent = void 0;
+const tslib_1 = require("tslib");
+const framework_1 = require("@type-dom/framework");
+const upload_content_const_1 = require("./upload-content.const");
+const use_namespace_1 = require("../../../../hooks/use-namespace");
+const use_form_common_props_1 = require("../../td-form/hooks/use-form-common-props");
+const signals_1 = require("@type-dom/signals");
+const td_upload_const_1 = require("../td-upload.const");
+const utils_1 = require("@type-dom/utils");
+const lodash_1 = require("lodash");
+const upload_dragger_class_1 = require("../upload-dragger/upload-dragger.class");
+class TdUploadContent extends framework_1.TypeDiv {
+    constructor(params = {}) {
+        super();
+        this.className = 'TdUploadContent';
+        this.assignProps(upload_content_const_1.uploadContentProps);
+        this.props = this.useParams(params);
+    }
+    setup() {
+        var _a, _b, _c, _d;
+        console.log('TdUploadContent setup');
+        const props = this.props;
+        const emit = this.emit;
+        const ns = (0, use_namespace_1.useNamespace)('upload');
+        const disabled = (0, use_form_common_props_1.useFormDisabled)();
+        const requests = (0, signals_1.signal)({});
+        const inputRef = (0, signals_1.signal)();
+        const uploadFiles = (files) => {
+            console.log('uploadFiles, files is ', files);
+            if (files.length === 0)
+                return;
+            const { autoUpload, limit, fileList, multiple, onStart, onExceed } = props;
+            console.warn('uploadFiles, limit is ', limit);
+            if (limit && (0, signals_1.unref)(fileList).length + files.length > limit) {
+                onExceed === null || onExceed === void 0 ? void 0 : onExceed(files, (0, signals_1.unref)(fileList));
+                return;
+            }
+            if (!multiple) {
+                files = files.slice(0, 1);
+            }
+            for (const file of files) {
+                const rawFile = file;
+                rawFile.uid = (0, td_upload_const_1.genFileId)();
+                onStart === null || onStart === void 0 ? void 0 : onStart(rawFile);
+                if (autoUpload)
+                    upload(rawFile);
+            }
+        };
+        const upload = (rawFile) => tslib_1.__awaiter(this, void 0, void 0, function* () {
+            var _a;
+            console.warn('upload, rawFile is ', rawFile);
+            inputRef.get().value = '';
+            if (!props.beforeUpload) {
+                return doUpload(rawFile);
+            }
+            let hookResult;
+            let beforeData = {};
+            try {
+                // origin data: Handle data changes after synchronization tasks are executed
+                const originData = props.data;
+                const beforeUploadPromise = props.beforeUpload(rawFile);
+                beforeData = (0, utils_1.isPlainObject)(props.data) ? (0, lodash_1.cloneDeep)(props.data) : props.data;
+                hookResult = yield beforeUploadPromise;
+                if ((0, utils_1.isPlainObject)(props.data) && (0, lodash_1.isEqual)(originData, beforeData)) {
+                    beforeData = (0, lodash_1.cloneDeep)(props.data);
+                }
+            }
+            catch (_b) {
+                hookResult = false;
+            }
+            if (hookResult === false) {
+                (_a = props.onRemove) === null || _a === void 0 ? void 0 : _a.call(props, 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 = (data, rawFile) => tslib_1.__awaiter(this, void 0, void 0, function* () {
+            if ((0, utils_1.isFunction)(data)) {
+                return data(rawFile);
+            }
+            return data;
+        });
+        const doUpload = (rawFile, beforeData) => tslib_1.__awaiter(this, void 0, void 0, function* () {
+            var _a;
+            console.warn('doUpload, rawFile is ', rawFile);
+            const { headers, data, method, withCredentials, name: filename, action, onProgress, onSuccess, onError, httpRequest, } = props;
+            try {
+                beforeData = yield resolveData(beforeData !== null && beforeData !== void 0 ? beforeData : data, rawFile);
+            }
+            catch (_b) {
+                (_a = props.onRemove) === null || _a === void 0 ? void 0 : _a.call(props, rawFile);
+                return;
+            }
+            const { uid } = rawFile;
+            const options = {
+                headers: headers || {},
+                withCredentials,
+                file: rawFile,
+                data: beforeData,
+                method,
+                filename,
+                action,
+                onProgress: (evt) => {
+                    onProgress === null || onProgress === void 0 ? void 0 : onProgress(evt, rawFile);
+                },
+                onSuccess: (res) => {
+                    onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(res, rawFile);
+                    delete requests.get()[uid];
+                },
+                onError: (err) => {
+                    onError === null || onError === void 0 ? void 0 : onError(err, rawFile);
+                    delete requests.get()[uid];
+                },
+            };
+            const request = httpRequest === null || httpRequest === void 0 ? void 0 : httpRequest(options);
+            requests.get()[uid] = request;
+            if (request instanceof Promise) {
+                request.then(options.onSuccess, options.onError);
+            }
+        });
+        const handleChange = (e) => {
+            const files = (e === null || e === void 0 ? void 0 : e.target).files;
+            if (!files)
+                return;
+            uploadFiles(Array.from(files));
+        };
+        const handleClick = () => {
+            if (!disabled.get()) {
+                inputRef.get().value = '';
+                inputRef.get().click();
+            }
+        };
+        const handleKeydown = () => {
+            handleClick();
+        };
+        const abort = (file) => {
+            const _reqs = (0, utils_1.entriesOf)(requests.get()).filter(file ? ([uid]) => String(file.uid) === uid : () => true);
+            _reqs.forEach(([uid, req]) => {
+                if (req instanceof XMLHttpRequest)
+                    req.abort();
+                delete requests.get()[uid];
+            });
+        };
+        (0, framework_1.defineExpose)({
+            abort,
+            upload,
+        });
+        this.attr.addClass([
+            ns.b(),
+            ns.m(props.listType),
+            ns.is('drag', props.drag),
+            ns.is('disabled', disabled.get()),
+        ]);
+        this.attr.addObj({
+            tabindex: disabled.get() ? '-1' : '0',
+        });
+        this.addEvents({
+            click: handleClick,
+            keydown: (evt) => {
+                if ((evt === null || evt === void 0 ? void 0 : evt.target) === this.dom) { // 确保事件是从该元素本身触发的
+                    // 处理 Enter 或 Space 键按下的逻辑
+                    console.log('Enter 或 Space 键被按下');
+                    if ((evt === null || evt === void 0 ? void 0 : evt.key) === 'Enter' || (evt === null || evt === void 0 ? void 0 : evt.key) === ' ') {
+                        evt === null || evt === void 0 ? void 0 : evt.preventDefault();
+                        handleKeydown();
+                    }
+                }
+            },
+        });
+        console.warn('TdUploadContent drag is ', props.drag);
+        if (props.drag) {
+            this.addChild(new upload_dragger_class_1.TdUploadDrag({
+                disabled: disabled.get(),
+                emits: {
+                    file: uploadFiles
+                },
+                slot: (_a = props.slot) !== null && _a !== void 0 ? _a : (_b = props.slots) === null || _b === void 0 ? void 0 : _b.default,
+            }));
+        }
+        else {
+            this.addChild(new framework_1.Fragment({
+                slot: (_c = props.slot) !== null && _c !== void 0 ? _c : (_d = props.slots) === null || _d === void 0 ? void 0 : _d.default,
+            }));
+        }
+        this.addChild(new framework_1.Input({
+            refDom: inputRef,
+            class: ns.e('input'),
+            attrObj: {
+                name: props.name,
+                multiple: props.multiple,
+                accept: props.accept,
+                disabled: disabled,
+                type: 'file',
+            },
+            events: {
+                change: handleChange,
+                click: evt => evt === null || evt === void 0 ? void 0 : evt.stopPropagation()
+            },
+        }));
+        console.warn('this is uploadContent ', this);
+    }
+}
+exports.TdUploadContent = TdUploadContent;

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

@@ -0,0 +1,2 @@
+import { UploadContentProps } from './upload-content.interface';
+export declare const uploadContentProps: UploadContentProps;

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

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.uploadContentProps = void 0;
+const utils_1 = require("@type-dom/utils");
+const td_upload_const_1 = require("../td-upload.const");
+exports.uploadContentProps = Object.assign(Object.assign({}, td_upload_const_1.uploadBaseProps), { beforeUpload: utils_1.NOOP, onRemove: utils_1.NOOP, onStart: 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/upload-content/upload-content.interface.d.ts

@@ -0,0 +1,15 @@
+import { UploadBaseProps, UploadFile, UploadHooks, UploadProgressEvent, UploadRawFile } from '../td-upload.interface';
+import { UploadAjaxError } from '../ajax';
+import { ITypeDiv } from '@type-dom/framework';
+export interface ITdUploadContent extends ITypeDiv {
+    className: 'TdUploadContent';
+}
+export interface UploadContentProps extends UploadBaseProps {
+    beforeUpload?: UploadHooks['beforeUpload'];
+    onRemove?: (file: UploadFile | UploadRawFile, rawFile?: 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'];
+}

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

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

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

@@ -0,0 +1,8 @@
+import { TypeDiv } from '@type-dom/framework';
+import { ITdUploadDrag, UploadDragProps } from './upload-dragger.interface';
+export declare class TdUploadDrag extends TypeDiv implements ITdUploadDrag {
+    className: 'TdUploadDrag';
+    props: UploadDragProps;
+    constructor(params?: UploadDragProps);
+    setup(): void;
+}

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

@@ -0,0 +1,73 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdUploadDrag = void 0;
+const framework_1 = require("@type-dom/framework");
+const utils_1 = require("@type-dom/utils");
+const signals_1 = require("@type-dom/signals");
+const use_namespace_1 = require("../../../../hooks/use-namespace");
+const use_form_common_props_1 = require("../../td-form/hooks/use-form-common-props");
+const constants_1 = require("../constants");
+const upload_dragger_const_1 = require("./upload-dragger.const");
+class TdUploadDrag extends framework_1.TypeDiv {
+    constructor(params = {}) {
+        super();
+        this.className = 'TdUploadDrag';
+        this.addEmits(upload_dragger_const_1.uploadDragEmits);
+        this.assignProps(upload_dragger_const_1.uploadDragProps);
+        this.props = this.useParams(params);
+    }
+    setup() {
+        var _a, _b;
+        const props = this.props;
+        const emit = this.emit;
+        const COMPONENT_NAME = 'TdUploadDrag';
+        const uploaderContext = (0, framework_1.inject)(constants_1.uploadContextKey);
+        if (!uploaderContext) {
+            (0, utils_1.throwError)(COMPONENT_NAME, 'usage: <td-upload><td-upload-dragger /></td-upload>');
+        }
+        const ns = (0, use_namespace_1.useNamespace)('upload');
+        const dragover = (0, signals_1.signal)(false);
+        const disabled = (0, use_form_common_props_1.useFormDisabled)();
+        const onDrop = (e) => {
+            if (disabled.get())
+                return;
+            dragover.set(false);
+            e === null || e === void 0 ? void 0 : e.stopPropagation();
+            const files = Array.from(e.dataTransfer.files);
+            const items = (e === null || e === void 0 ? void 0 : e.dataTransfer.items) || [];
+            files.forEach((file, index) => {
+                var _a;
+                const item = items[index];
+                const entry = (_a = item === null || item === void 0 ? void 0 : item.webkitGetAsEntry) === null || _a === void 0 ? void 0 : _a.call(item);
+                if (entry) {
+                    file.isDirectory = entry.isDirectory;
+                }
+            });
+            emit('file', files);
+        };
+        const onDragover = () => {
+            if (!disabled.get())
+                dragover.set(true);
+        };
+        this.attr.addClass([
+            ns.b('dragger'),
+            ns.is('dragover', dragover.get())
+        ]);
+        this.addEvents({
+            drop: (evt) => {
+                onDrop(evt);
+                evt === null || evt === void 0 ? void 0 : evt.preventDefault();
+            },
+            dragover: (evt) => {
+                onDragover();
+                evt === null || evt === void 0 ? void 0 : evt.preventDefault();
+            },
+            dragleave: (evt) => {
+                dragover.set(false);
+                evt === null || evt === void 0 ? void 0 : evt.preventDefault();
+            }
+        });
+        this.slotChildren((_a = props.slot) !== null && _a !== void 0 ? _a : (_b = props.slots) === null || _b === void 0 ? void 0 : _b.default);
+    }
+}
+exports.TdUploadDrag = TdUploadDrag;

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

@@ -0,0 +1,5 @@
+import { UploadDragProps } from './upload-dragger.interface';
+export declare const uploadDragProps: UploadDragProps;
+export declare const uploadDragEmits: {
+    file: (file: File[]) => boolean;
+};

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

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.uploadDragEmits = exports.uploadDragProps = void 0;
+const utils_1 = require("@type-dom/utils");
+exports.uploadDragProps = {
+    disabled: false,
+};
+exports.uploadDragEmits = {
+    file: (file) => (0, utils_1.isArray)(file),
+};

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

@@ -0,0 +1,7 @@
+import { ITypeDiv, TypeDivProps } from '@type-dom/framework';
+export interface ITdUploadDrag extends ITypeDiv {
+    className: 'TdUploadDrag';
+}
+export interface UploadDragProps extends TypeDivProps {
+    disabled?: boolean;
+}

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

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

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

@@ -0,0 +1,8 @@
+import { TypeFragment } from '@type-dom/framework';
+import { ITdUploadList, UploadListProps } from './upload-list.interface';
+export declare class TdUploadList extends TypeFragment implements ITdUploadList {
+    className: 'TdUploadList';
+    props: UploadListProps;
+    constructor(params?: UploadListProps);
+    setup(): void;
+}

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

@@ -0,0 +1,196 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdUploadList = void 0;
+const framework_1 = require("@type-dom/framework");
+const signals_1 = require("@type-dom/signals");
+const utils_1 = require("@type-dom/utils");
+const svgs_1 = require("@type-dom/svgs");
+const use_locale_1 = require("../../../../hooks/use-locale");
+const use_namespace_1 = require("../../../../hooks/use-namespace");
+const td_icon_class_1 = require("../../../basic/td-icon/td-icon.class");
+const td_progress_class_1 = require("../../../data/td-progress/td-progress.class");
+const use_form_common_props_1 = require("../../td-form/hooks/use-form-common-props");
+const upload_list_const_1 = require("./upload-list.const");
+class TdUploadList extends framework_1.TypeFragment {
+    constructor(params = {}) {
+        super();
+        this.className = 'TdUploadList';
+        this.addEmits(upload_list_const_1.uploadListEmits);
+        this.assignProps(upload_list_const_1.uploadListProps);
+        this.props = this.useParams(params);
+    }
+    setup() {
+        var _a;
+        // console.error('setup . ');
+        const props = this.props;
+        const emit = this.emit;
+        const { t } = (0, use_locale_1.useLocale)();
+        const nsUpload = (0, use_namespace_1.useNamespace)('upload');
+        const nsIcon = (0, use_namespace_1.useNamespace)('icon');
+        // console.log('nsIcon.m(close) is ', nsIcon.m('close'));
+        const nsList = (0, use_namespace_1.useNamespace)('list');
+        const disabled = (0, use_form_common_props_1.useFormDisabled)();
+        const focusing = (0, signals_1.signal)(false);
+        const containerKls = (0, signals_1.computed)(() => [
+            nsUpload.b('list'),
+            nsUpload.bm('list', props.listType),
+            nsUpload.is('disabled', props.disabled),
+        ]);
+        const handleRemove = (file) => {
+            console.error('file is ', file);
+            emit('remove', file);
+        };
+        this.addChild(new framework_1.TransitionGroup({
+            tag: 'ul',
+            class: containerKls,
+            name: nsList.b(),
+            slot: [
+                new framework_1.For({
+                    data: props.files,
+                    getter: (file, index) => {
+                        var _a, _b, _c, _d;
+                        return new framework_1.LI({
+                            class: [
+                                nsUpload.be('list', 'item'),
+                                nsUpload.is(file.status),
+                                { focusing },
+                            ],
+                            attrObj: {
+                                tabindex: 0,
+                            },
+                            events: {
+                                keydown: (e) => {
+                                    if ((e === null || e === void 0 ? void 0 : e.code) === 'Delete') {
+                                        !disabled.get() && handleRemove(file);
+                                    }
+                                },
+                                focus: () => {
+                                    focusing.set(true);
+                                },
+                                blur: () => {
+                                    focusing.set(false);
+                                },
+                                click: () => {
+                                    focusing.set(false);
+                                }
+                            },
+                            slot: (0, utils_1.isFunction)((_a = props.slots) === null || _a === void 0 ? void 0 : _a.default)
+                                ? (_d = (_c = (_b = props.slots) === null || _b === void 0 ? void 0 : _b.default) === null || _c === void 0 ? void 0 : _c.call(_b, file, index)) !== null && _d !== void 0 ? _d : [
+                                    new framework_1.Img({
+                                        vIf: props.listType === 'picture' ||
+                                            (file.status !== 'uploading' && props.listType === 'picture-card'),
+                                        attrObj: {
+                                            src: file.url,
+                                            class: nsUpload.be('list', 'item-thumbnail'),
+                                            crossorigin: 'crossorigin',
+                                            alt: '',
+                                        }
+                                    }),
+                                    new framework_1.Div({
+                                        vIf: file.status === 'uploading' || props.listType !== 'picture-card',
+                                        class: nsUpload.be('list', 'item-info'),
+                                        slot: [
+                                            new framework_1.A({
+                                                class: nsUpload.be('list', 'item-name'),
+                                                events: {
+                                                    click: (e) => {
+                                                        var _a;
+                                                        e === null || e === void 0 ? void 0 : e.preventDefault();
+                                                        (_a = props.handlePreview) === null || _a === void 0 ? void 0 : _a.call(props, file);
+                                                    }
+                                                },
+                                                slot: [
+                                                    new td_icon_class_1.TdIcon({
+                                                        class: [nsIcon.m('document')],
+                                                        slot: new svgs_1.ElDocumentSvg(),
+                                                    }),
+                                                    new framework_1.Span({
+                                                        class: nsUpload.be('list', 'item-file-name'),
+                                                        slot: file.name
+                                                    })
+                                                ]
+                                            }),
+                                            new td_progress_class_1.TdProgress({
+                                                vIf: file.status === 'uploading',
+                                                type: props.listType === 'picture-card' ? 'circle' : 'line',
+                                                strokeWidth: props.listType === 'picture-card' ? 6 : 2,
+                                                percentage: Number(file.percentage),
+                                                styleObj: props.listType === 'picture-card' ? undefined : { marginTop: '0.5rem' }
+                                            }),
+                                        ]
+                                    }),
+                                    new framework_1.Label({
+                                        class: nsUpload.be('list', 'item-status-label'),
+                                        slot: props.listType === 'text'
+                                            ? new td_icon_class_1.TdIcon({
+                                                class: [nsIcon.m('upload-success'), nsIcon.m('circle-check')],
+                                                slot: new svgs_1.ElCircleCheckSvg(),
+                                            })
+                                            : ['picture-card', 'picture'].includes(props.listType)
+                                                ? new td_icon_class_1.TdIcon({
+                                                    class: [nsIcon.m('upload-success'), nsIcon.m('check')],
+                                                    slot: new svgs_1.ElCheckSvg(),
+                                                })
+                                                : undefined
+                                    }),
+                                    new td_icon_class_1.TdIcon({
+                                        vIf: (0, signals_1.computed)(() => !disabled.get()),
+                                        class: [nsIcon.m('close')],
+                                        events: {
+                                            click: () => handleRemove(file)
+                                        },
+                                        slot: new svgs_1.ElCloseSvg()
+                                    }),
+                                    // <!-- Due to close btn only appears when li gets focused disappears after li gets blurred, thus keyboard navigation can never reach close btn-->
+                                    // <!-- This is a bug which needs to be fixed -->
+                                    // <!-- TODO: Fix the incorrect navigation interaction -->
+                                    new framework_1.I({
+                                        vIf: (0, signals_1.computed)(() => !disabled.get()),
+                                        class: nsIcon.m('close-tip'),
+                                        slot: t('el.upload.deleteTip'),
+                                    }),
+                                    new framework_1.Span({
+                                        vIf: props.listType === 'picture-card',
+                                        class: nsUpload.be('list', 'item-actions'),
+                                        slot: [
+                                            new framework_1.Span({
+                                                class: nsUpload.be('list', 'item-preview'),
+                                                events: {
+                                                    click: () => {
+                                                        var _a;
+                                                        (_a = props.handlePreview) === null || _a === void 0 ? void 0 : _a.call(props, file);
+                                                    }
+                                                },
+                                                slot: [
+                                                    new td_icon_class_1.TdIcon({
+                                                        class: nsIcon.m('zoom-in'),
+                                                        slot: new svgs_1.ElZoomInSvg(),
+                                                    })
+                                                ]
+                                            }),
+                                            new framework_1.Span({
+                                                vIf: (0, signals_1.computed)(() => !disabled.get()),
+                                                class: nsUpload.be('list', 'item-delete'),
+                                                events: {
+                                                    click: () => handleRemove(file)
+                                                },
+                                                slot: new td_icon_class_1.TdIcon({
+                                                    class: nsIcon.m('download'),
+                                                    slot: new svgs_1.ElDeleteSvg(),
+                                                })
+                                            })
+                                        ]
+                                    })
+                                ]
+                                : undefined,
+                        });
+                    },
+                }),
+                new framework_1.Fragment({
+                    slot: (_a = props.slots) === null || _a === void 0 ? void 0 : _a.append
+                })
+            ],
+        }));
+    }
+}
+exports.TdUploadList = TdUploadList;

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

@@ -0,0 +1,3 @@
+import { UploadListEmits, UploadListProps } from './upload-list.interface';
+export declare const uploadListProps: UploadListProps;
+export declare const uploadListEmits: UploadListEmits;

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

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.uploadListEmits = exports.uploadListProps = void 0;
+const utils_1 = require("@type-dom/utils");
+exports.uploadListProps = {
+    files: [],
+    disabled: false,
+    handlePreview: utils_1.NOOP,
+    listType: 'text',
+};
+exports.uploadListEmits = {
+    remove: (file) => !!file,
+};

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

@@ -0,0 +1,19 @@
+import { IEmits, ITypeFragment, TypeFragmentProps } from '@type-dom/framework';
+import { MaybeRef } from '@type-dom/signals';
+import { UploadFile, UploadFiles, UploadHooks } from '../td-upload.interface';
+export interface ITdUploadList extends ITypeFragment {
+    className: 'TdUploadList';
+}
+export interface UploadListProps extends TypeFragmentProps {
+    files?: MaybeRef<UploadFiles>;
+    disabled?: boolean;
+    handlePreview?: UploadHooks['onPreview'];
+    listType?: string;
+    /**
+     * @description set HTML attribute: crossorigin.
+     */
+    crossorigin?: 'anonymous' | 'use-credentials' | '';
+}
+export interface UploadListEmits extends IEmits {
+    remove: (file: UploadFile) => boolean;
+}

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

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

package/src/components/form/td-upload/use-handlers.d.ts

@@ -0,0 +1,16 @@
+import { Ref, Signal } from '@type-dom/signals';
+import { UploadFile, UploadFiles, UploadProps, UploadRawFile, UploadStatus } from './td-upload.interface';
+import { TdUploadContent } from './upload-content/upload-content.class';
+export declare const useHandlers: (props: UploadProps, uploadRef: Signal<TdUploadContent | undefined>) => {
+    /** @description two-way binding ref from props `fileList` */
+    uploadFiles: Ref<UploadFiles>;
+    abort: (file: UploadFile) => void;
+    clearFiles: (states?: UploadStatus[]) => void;
+    handleError: (err: import("./ajax").UploadAjaxError, rawFile: UploadRawFile) => void;
+    handleProgress: (evt: import("./td-upload.interface").UploadProgressEvent, rawFile: UploadRawFile) => void;
+    handleStart: (rawFile: UploadRawFile) => void;
+    handleSuccess: (response: any, rawFile: UploadRawFile) => unknown;
+    handleRemove: (file: UploadFile | UploadRawFile, rawFile?: UploadRawFile) => void;
+    submit: () => void;
+    revokeFileObjectURL: (file: UploadFile) => void;
+};