@skyfox2000/webui 1.6.6 → 1.6.8

package/lib/src/components/form/upload/uploadList.vue.js

@@ -0,0 +1,713 @@
+import { Button, ToolIcon, Tooltip } from '../../common';
+import { computed, ref, watch } from 'vue';
+import message from 'vue-m-message';
+import { Upload, Progress, Tag, Popconfirm } from 'ant-design-vue';
+import { UploadStatus, donwloadFromMinio, path, Switch, previewFromMinio } from '@/index';
+import { useInputFactory } from '@/utils/form-validate';
+import { httpPost, ResStatus } from '@skyfox2000/fapi';
+import { fastUpload } from '@/utils/file-upload';
+import { $t } from '@/locales/index';
+const props = withDefaults(defineProps(), {
+    autoUpload: false,
+    fileList: () => [],
+    placeholder: '',
+    maxFileSize: 20,
+    maxCount: 5,
+    maxCountTip: false,
+    maxFileSizeTip: true,
+    fileExtTip: true,
+    showActionText: true,
+    showOnlineSwitch: false,
+    showDelete: true,
+    showFolderUpload: false,
+});
+const inputFactory = useInputFactory();
+const { errInfo } = inputFactory;
+const displayList = ref(props.fileList);
+const uploadList = ref([]);
+const emit = defineEmits(['update:file-list']);
+const acceptString = computed(() => (props.fileExt?.length ? props.fileExt.map((ext) => `.${ext}`).join(',') : ''));
+const validateFile = (file) => {
+    if (props.fileExt && props.fileExt.length > 0) {
+        const extension = file.name.split('.').pop()?.toLowerCase() || '';
+        if (!props.fileExt.includes(extension)) {
+            message.error($t('webui.components.form.upload.unsupportedFileType'));
+            return false;
+        }
+    }
+    if (file.size / 1024 / 1024 > props.maxFileSize) {
+        message.error($t('webui.components.form.upload.fileSizeExceeded', [props.maxFileSize]));
+        return false;
+    }
+    return true;
+};
+const isMaxCountReached = () => {
+    return props.maxCount > 1 && displayList.value.length >= props.maxCount;
+};
+const prepareFileInfo = (file) => {
+    const fileInfo = file;
+    if (!fileInfo.params)
+        fileInfo.params = {};
+    let relativePath = fileInfo.name;
+    if (fileInfo.webkitRelativePath) {
+        relativePath = fileInfo.webkitRelativePath;
+    }
+    if (fileInfo.webkitRelativePath) {
+        fileInfo.name = fileInfo.webkitRelativePath;
+        fileInfo.fileName = fileInfo.webkitRelativePath.split('/').pop();
+    }
+    fileInfo.params.FileKey = fileInfo.name;
+    if (props.parentPath) {
+        fileInfo.params.FileKey = path.join('/', props.parentPath, fileInfo.name);
+    }
+    fileInfo.status = UploadStatus.Pending;
+    if (fileInfo.webkitRelativePath) {
+        fileInfo.relativePath = relativePath;
+    }
+    return fileInfo;
+};
+const beforeUpload = (file) => {
+    return validateFile(file) && props.autoUpload;
+};
+const handleFileSelect = async (newFiles) => {
+    if (newFiles.length === 0)
+        return;
+    const tempFiles = [...displayList.value];
+    let hasError = false;
+    for (const file of newFiles) {
+        if (!validateFile(file)) {
+            hasError = true;
+            continue;
+        }
+        const fileInfo = prepareFileInfo(file);
+        if (props.maxCount === 1) {
+            tempFiles.length = 0;
+            tempFiles.push(fileInfo);
+            break;
+        }
+        if (isMaxCountReached()) {
+            message.error($t('webui.components.form.upload.maxFileCount', [props.maxCount]));
+            hasError = true;
+            break;
+        }
+        const existingIndex = tempFiles.findIndex(f => (f.name === fileInfo.name));
+        if (existingIndex > -1) {
+            tempFiles[existingIndex] = fileInfo;
+        }
+        else {
+            tempFiles.push(fileInfo);
+        }
+    }
+    if (!hasError || tempFiles.length > 0) {
+        displayList.value = tempFiles;
+    }
+    uploadList.value = [];
+};
+const updateUploadList = (newFiles) => {
+    uploadList.value = newFiles;
+    handleFileSelect(newFiles);
+};
+const uploadProps = computed(() => ({
+    accept: acceptString.value,
+    multiple: props.maxCount !== 1,
+    fileList: uploadList.value,
+    'onUpdate:fileList': updateUploadList,
+    beforeUpload: beforeUpload,
+    listType: 'text',
+    showUploadList: false,
+    customRequest: async () => {
+        if (props.autoUpload && props.uploadUrl) {
+            for (const file of displayList.value) {
+                if (file.percent === 0 && file.status === UploadStatus.Pending) {
+                    await fastUpload(props.uploadUrl, file);
+                }
+            }
+        }
+    },
+}));
+const folderUploadProps = computed(() => ({
+    accept: acceptString.value,
+    multiple: true,
+    directory: true,
+    webkitdirectory: true,
+    fileList: [],
+    'onUpdate:fileList': (newFiles) => handleFileSelect(newFiles),
+    beforeUpload: () => false,
+    listType: 'text',
+    showUploadList: false,
+    customRequest: () => { },
+}));
+watch(() => props.fileList, (newVal) => {
+    displayList.value = newVal;
+}, { deep: true, immediate: true });
+watch(() => displayList.value, (newVal) => {
+    emit('update:file-list', newVal);
+}, { deep: true });
+watch(() => props.parentPath, (newVal) => {
+    if (newVal) {
+        displayList.value.forEach((file) => {
+            file.params.FileKey = path.join('/', newVal, file.fileName);
+        });
+    }
+});
+const downloadFile = (index) => {
+    const minioFile = displayList.value[index].minioFile;
+    const url = {
+        api: props.downloadUrl.api,
+        authorize: props.downloadUrl.authorize,
+        url: props.downloadUrl.url,
+        params: {
+            Query: {
+                FileKey: minioFile.Key,
+            },
+        },
+    };
+    donwloadFromMinio(url);
+};
+const onlineOrOffline = (file) => {
+    if (file.minioFile) {
+        file.minioFile.Status = file.status;
+    }
+};
+const previewFile = (index) => {
+    const minioFile = displayList.value[index].minioFile;
+    const url = {
+        api: props.previewUrl.api,
+        authorize: props.previewUrl.authorize,
+        url: props.previewUrl.url,
+        params: {
+            Query: {
+                FileKey: minioFile.Key,
+            },
+        },
+    };
+    previewFromMinio(url, minioFile.FileName);
+};
+const removeFile = (index) => {
+    const file = displayList.value[index];
+    if (props.deleteUrl && file.minioFile && file.minioFile.Key) {
+        httpPost(props.deleteUrl, {
+            Query: {
+                FileKey: file.minioFile.Key,
+            },
+        }).then((res) => {
+            if (res && res.status === ResStatus.SUCCESS) {
+                message.success($t('webui.components.form.upload.deleteSuccess'));
+                displayList.value.splice(index, 1);
+            }
+        });
+    }
+    else {
+        displayList.value.splice(index, 1);
+    }
+    delIndex.value = -1;
+};
+const delIndex = ref(-1);
+const confirmDelFile = (index, status) => {
+    delIndex.value = index;
+    if (status === UploadStatus.Pending) {
+        removeFile(index);
+        return;
+    }
+};
+const confirmIndex = (index) => {
+    return index === delIndex.value;
+};
+const getPlaceholder = () => {
+    const typeMsg = props.fileExt && props.fileExt.length && props.fileExtTip ? $t('webui.components.form.upload.fileTypeRequired', [props.fileExt.join('/')]) : '';
+    const sizeMsg = props.maxFileSize !== 0 && props.maxFileSizeTip ? $t('webui.components.form.upload.singleFileMax', [props.maxFileSize]) : '';
+    const countMsg = props.maxCount !== 0 && props.maxCountTip ? $t('webui.components.form.upload.maxFiles', [props.maxCount]) : '';
+    return [sizeMsg, typeMsg, countMsg].filter(Boolean).join('，');
+};
+const getStatusColor = (status) => {
+    switch (status) {
+        case UploadStatus.Uploading:
+            return 'blue';
+        case UploadStatus.Success:
+            return 'green';
+        case UploadStatus.Error:
+            return 'red';
+        case UploadStatus.Online:
+            return 'green';
+        case UploadStatus.Offline:
+            return 'pink';
+        default:
+            return 'cyan';
+    }
+};
+const getStatus = (status) => {
+    switch (status) {
+        case UploadStatus.Uploading:
+            return $t('webui.components.form.upload.uploading');
+        case UploadStatus.Success:
+            return $t('webui.components.form.upload.uploadComplete');
+        case UploadStatus.Error:
+            return $t('webui.components.form.upload.uploadFailed');
+        case UploadStatus.Online:
+            return $t('webui.common.online');
+        case UploadStatus.Offline:
+            return $t('webui.common.offline');
+        default:
+            return $t('webui.components.form.upload.pendingUpload');
+    }
+};
+const __VLS_defaults = {
+    autoUpload: false,
+    fileList: () => [],
+    placeholder: '',
+    maxFileSize: 20,
+    maxCount: 5,
+    maxCountTip: false,
+    maxFileSizeTip: true,
+    fileExtTip: true,
+    showActionText: true,
+    showOnlineSwitch: false,
+    showDelete: true,
+    showFolderUpload: false,
+};
+const __VLS_ctx = {
+    ...{},
+    ...{},
+    ...{},
+    ...{},
+    ...{},
+};
+let __VLS_components;
+let __VLS_intrinsics;
+let __VLS_directives;
+__VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
+    ...{ class: "w-full border border-solid border-gray-100 mt-1 rounded-md py-5" },
+    ...{ class: ([__VLS_ctx.errInfo?.errClass]) },
+});
+;
+;
+;
+;
+;
+;
+;
+__VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
+    ...{ class: "flex items-center justify-between w-full" },
+});
+;
+;
+;
+;
+__VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
+    ...{ class: "w-35 mx-3 flex gap-2" },
+});
+;
+;
+;
+;
+let __VLS_0;
+Upload;
+const __VLS_1 = __VLS_asFunctionalComponent1(__VLS_0, new __VLS_0({
+    ref: "fileUploader",
+    ...(__VLS_ctx.uploadProps),
+}));
+const __VLS_2 = __VLS_1({
+    ref: "fileUploader",
+    ...(__VLS_ctx.uploadProps),
+}, ...__VLS_functionalComponentArgsRest(__VLS_1));
+__VLS_asFunctionalDirective(__VLS_directives.vAuth, {})(null, { ...__VLS_directiveBindingRestFields, value: ({ role: ['Super', 'Admin'], permit: ':uploadlist:upload' }) }, null, null);
+var __VLS_5 = {};
+const { default: __VLS_7 } = __VLS_3.slots;
+let __VLS_8;
+Button;
+const __VLS_9 = __VLS_asFunctionalComponent1(__VLS_8, new __VLS_8({
+    ...{ class: ([__VLS_ctx.errInfo?.errClass + '-text']) },
+}));
+const __VLS_10 = __VLS_9({
+    ...{ class: ([__VLS_ctx.errInfo?.errClass + '-text']) },
+}, ...__VLS_functionalComponentArgsRest(__VLS_9));
+const { default: __VLS_13 } = __VLS_11.slots;
+(__VLS_ctx.$t('webui.components.form.upload.selectFile'));
+[errInfo, errInfo, uploadProps, vAuth, $t,];
+var __VLS_11;
+[];
+var __VLS_3;
+if (__VLS_ctx.showFolderUpload) {
+    let __VLS_14;
+    Upload;
+    const __VLS_15 = __VLS_asFunctionalComponent1(__VLS_14, new __VLS_14({
+        ref: "fileFolderUploader",
+        webkitdirectory: (true),
+        directory: (true),
+        ...(__VLS_ctx.folderUploadProps),
+    }));
+    const __VLS_16 = __VLS_15({
+        ref: "fileFolderUploader",
+        webkitdirectory: (true),
+        directory: (true),
+        ...(__VLS_ctx.folderUploadProps),
+    }, ...__VLS_functionalComponentArgsRest(__VLS_15));
+    __VLS_asFunctionalDirective(__VLS_directives.vAuth, {})(null, { ...__VLS_directiveBindingRestFields, value: ({ role: ['Super', 'Admin'], permit: ':uploadlist:upload' }) }, null, null);
+    var __VLS_19 = {};
+    const { default: __VLS_21 } = __VLS_17.slots;
+    let __VLS_22;
+    Button;
+    const __VLS_23 = __VLS_asFunctionalComponent1(__VLS_22, new __VLS_22({
+        ...{ class: ([__VLS_ctx.errInfo?.errClass + '-text']) },
+    }));
+    const __VLS_24 = __VLS_23({
+        ...{ class: ([__VLS_ctx.errInfo?.errClass + '-text']) },
+    }, ...__VLS_functionalComponentArgsRest(__VLS_23));
+    const { default: __VLS_27 } = __VLS_25.slots;
+    (__VLS_ctx.$t('webui.components.form.upload.selectDirectory'));
+    [errInfo, vAuth, $t, showFolderUpload, folderUploadProps,];
+    var __VLS_25;
+    [];
+    var __VLS_17;
+}
+__VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
+    ...{ class: "flex-1 text-sm text-gray-500" },
+    ...{ class: ([__VLS_ctx.errInfo?.errClass + '-text']) },
+});
+;
+;
+;
+(__VLS_ctx.getPlaceholder());
+__VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
+    ...{ class: "mt-4 px-3" },
+});
+;
+;
+for (const [file, index] of __VLS_vFor((__VLS_ctx.displayList))) {
+    __VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
+        key: ((props.parentPath || '') + (file.relativePath || file.name || index)),
+        ...{ class: "mb-2 pb-1" },
+    });
+    ;
+    ;
+    __VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
+        ...{ class: "flex items-center justify-between" },
+    });
+    ;
+    ;
+    ;
+    __VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
+        ...{ class: "flex items-center" },
+    });
+    ;
+    ;
+    __VLS_asFunctionalElement1(__VLS_intrinsics.span, __VLS_intrinsics.span)({
+        ...{ class: "text-gray-700 mr-2" },
+        ...{ class: ([file.status == __VLS_ctx.UploadStatus.Offline ? 'line-through' : '']) },
+        title: (file.relativePath || file.fileName || file.name),
+    });
+    ;
+    ;
+    (file.fileName ?? file.name);
+    __VLS_asFunctionalElement1(__VLS_intrinsics.span, __VLS_intrinsics.span)({});
+    let __VLS_28;
+    Tag;
+    const __VLS_29 = __VLS_asFunctionalComponent1(__VLS_28, new __VLS_28({
+        color: (__VLS_ctx.getStatusColor(file.status)),
+    }));
+    const __VLS_30 = __VLS_29({
+        color: (__VLS_ctx.getStatusColor(file.status)),
+    }, ...__VLS_functionalComponentArgsRest(__VLS_29));
+    const { default: __VLS_33 } = __VLS_31.slots;
+    (__VLS_ctx.getStatus(file.status));
+    [errInfo, getPlaceholder, displayList, UploadStatus, getStatusColor, getStatus,];
+    var __VLS_31;
+    __VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
+        ...{ class: "flex items-center" },
+    });
+    ;
+    ;
+    if (__VLS_ctx.showOnlineSwitch && (file.status == __VLS_ctx.UploadStatus.Online || file.status == __VLS_ctx.UploadStatus.Offline)) {
+        __VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
+            ...{ class: "mr-2" },
+        });
+        ;
+        let __VLS_34;
+        Tooltip;
+        const __VLS_35 = __VLS_asFunctionalComponent1(__VLS_34, new __VLS_34({
+            title: (__VLS_ctx.$t('webui.components.form.upload.onlineOrOffline')),
+        }));
+        const __VLS_36 = __VLS_35({
+            title: (__VLS_ctx.$t('webui.components.form.upload.onlineOrOffline')),
+        }, ...__VLS_functionalComponentArgsRest(__VLS_35));
+        const { default: __VLS_39 } = __VLS_37.slots;
+        let __VLS_40;
+        Switch;
+        const __VLS_41 = __VLS_asFunctionalComponent1(__VLS_40, new __VLS_40({
+            ...{ 'onChange': {} },
+            checked: (file.status),
+            data: ([
+                { label: __VLS_ctx.$t('webui.common.online'), value: __VLS_ctx.UploadStatus.Online },
+                { label: __VLS_ctx.$t('webui.common.offline'), value: __VLS_ctx.UploadStatus.Offline },
+            ]),
+        }));
+        const __VLS_42 = __VLS_41({
+            ...{ 'onChange': {} },
+            checked: (file.status),
+            data: ([
+                { label: __VLS_ctx.$t('webui.common.online'), value: __VLS_ctx.UploadStatus.Online },
+                { label: __VLS_ctx.$t('webui.common.offline'), value: __VLS_ctx.UploadStatus.Offline },
+            ]),
+        }, ...__VLS_functionalComponentArgsRest(__VLS_41));
+        let __VLS_45;
+        const __VLS_46 = ({ change: {} },
+            { onChange: (...[$event]) => {
+                    if (!(__VLS_ctx.showOnlineSwitch && (file.status == __VLS_ctx.UploadStatus.Online || file.status == __VLS_ctx.UploadStatus.Offline)))
+                        return;
+                    __VLS_ctx.onlineOrOffline(file);
+                    [$t, $t, $t, UploadStatus, UploadStatus, UploadStatus, UploadStatus, showOnlineSwitch, onlineOrOffline,];
+                } });
+        __VLS_asFunctionalDirective(__VLS_directives.vAuth, {})(null, { ...__VLS_directiveBindingRestFields, value: ({ role: ['Super', 'Admin'], permit: ':uploadlist:online' }) }, null, null);
+        var __VLS_43;
+        var __VLS_44;
+        [vAuth,];
+        var __VLS_37;
+    }
+    if (__VLS_ctx.downloadUrl && (file.status == __VLS_ctx.UploadStatus.Online || file.status == __VLS_ctx.UploadStatus.Offline)) {
+        __VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
+            ...{ class: "flex items-center text-blue-500 hover:text-blue-700 mr-1 cursor-pointer" },
+        });
+        ;
+        ;
+        ;
+        ;
+        ;
+        ;
+        let __VLS_47;
+        Tooltip;
+        const __VLS_48 = __VLS_asFunctionalComponent1(__VLS_47, new __VLS_47({
+            title: (__VLS_ctx.$t('webui.common.download')),
+        }));
+        const __VLS_49 = __VLS_48({
+            title: (__VLS_ctx.$t('webui.common.download')),
+        }, ...__VLS_functionalComponentArgsRest(__VLS_48));
+        const { default: __VLS_52 } = __VLS_50.slots;
+        let __VLS_53;
+        ToolIcon;
+        const __VLS_54 = __VLS_asFunctionalComponent1(__VLS_53, new __VLS_53({
+            ...{ 'onClick': {} },
+            icon: "icon-download",
+            clickable: true,
+        }));
+        const __VLS_55 = __VLS_54({
+            ...{ 'onClick': {} },
+            icon: "icon-download",
+            clickable: true,
+        }, ...__VLS_functionalComponentArgsRest(__VLS_54));
+        let __VLS_58;
+        const __VLS_59 = ({ click: {} },
+            { onClick: (...[$event]) => {
+                    if (!(__VLS_ctx.downloadUrl && (file.status == __VLS_ctx.UploadStatus.Online || file.status == __VLS_ctx.UploadStatus.Offline)))
+                        return;
+                    __VLS_ctx.downloadFile(index);
+                    [$t, UploadStatus, UploadStatus, downloadUrl, downloadFile,];
+                } });
+        __VLS_asFunctionalDirective(__VLS_directives.vAuth, {})(null, { ...__VLS_directiveBindingRestFields, value: ({ role: ['Super', 'Admin'], permit: ':uploadlist:download' }) }, null, null);
+        var __VLS_56;
+        var __VLS_57;
+        if (__VLS_ctx.showActionText) {
+            __VLS_asFunctionalElement1(__VLS_intrinsics.span, __VLS_intrinsics.span)({
+                ...{ onClick: (...[$event]) => {
+                        if (!(__VLS_ctx.downloadUrl && (file.status == __VLS_ctx.UploadStatus.Online || file.status == __VLS_ctx.UploadStatus.Offline)))
+                            return;
+                        if (!(__VLS_ctx.showActionText))
+                            return;
+                        __VLS_ctx.downloadFile(index);
+                        [vAuth, downloadFile, showActionText,];
+                    } },
+                ...{ class: "mr-2 text-sm text-nowrap" },
+            });
+            __VLS_asFunctionalDirective(__VLS_directives.vAuth, {})(null, { ...__VLS_directiveBindingRestFields, value: ({ role: ['Super', 'Admin'], permit: ':uploadlist:download' }) }, null, null);
+            ;
+            ;
+            ;
+            (__VLS_ctx.$t('webui.common.download'));
+        }
+        [vAuth, $t,];
+        var __VLS_50;
+    }
+    if (__VLS_ctx.previewUrl && (file.status == __VLS_ctx.UploadStatus.Online || file.status == __VLS_ctx.UploadStatus.Offline)) {
+        __VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
+            ...{ class: "flex items-center text-blue-500 hover:text-blue-700 mr-1 cursor-pointer" },
+        });
+        ;
+        ;
+        ;
+        ;
+        ;
+        ;
+        let __VLS_60;
+        Tooltip;
+        const __VLS_61 = __VLS_asFunctionalComponent1(__VLS_60, new __VLS_60({
+            title: (__VLS_ctx.$t('webui.common.preview')),
+        }));
+        const __VLS_62 = __VLS_61({
+            title: (__VLS_ctx.$t('webui.common.preview')),
+        }, ...__VLS_functionalComponentArgsRest(__VLS_61));
+        const { default: __VLS_65 } = __VLS_63.slots;
+        let __VLS_66;
+        ToolIcon;
+        const __VLS_67 = __VLS_asFunctionalComponent1(__VLS_66, new __VLS_66({
+            ...{ 'onClick': {} },
+            icon: "icon-eye",
+            clickable: true,
+        }));
+        const __VLS_68 = __VLS_67({
+            ...{ 'onClick': {} },
+            icon: "icon-eye",
+            clickable: true,
+        }, ...__VLS_functionalComponentArgsRest(__VLS_67));
+        let __VLS_71;
+        const __VLS_72 = ({ click: {} },
+            { onClick: (...[$event]) => {
+                    if (!(__VLS_ctx.previewUrl && (file.status == __VLS_ctx.UploadStatus.Online || file.status == __VLS_ctx.UploadStatus.Offline)))
+                        return;
+                    __VLS_ctx.previewFile(index);
+                    [$t, UploadStatus, UploadStatus, previewUrl, previewFile,];
+                } });
+        __VLS_asFunctionalDirective(__VLS_directives.vAuth, {})(null, { ...__VLS_directiveBindingRestFields, value: ({ role: ['Super', 'Admin'], permit: ':uploadlist:preview' }) }, null, null);
+        var __VLS_69;
+        var __VLS_70;
+        if (__VLS_ctx.showActionText) {
+            __VLS_asFunctionalElement1(__VLS_intrinsics.span, __VLS_intrinsics.span)({
+                ...{ onClick: (...[$event]) => {
+                        if (!(__VLS_ctx.previewUrl && (file.status == __VLS_ctx.UploadStatus.Online || file.status == __VLS_ctx.UploadStatus.Offline)))
+                            return;
+                        if (!(__VLS_ctx.showActionText))
+                            return;
+                        __VLS_ctx.previewFile(index);
+                        [vAuth, showActionText, previewFile,];
+                    } },
+                ...{ class: "mr-2 text-sm text-nowrap" },
+            });
+            __VLS_asFunctionalDirective(__VLS_directives.vAuth, {})(null, { ...__VLS_directiveBindingRestFields, value: ({ role: ['Super', 'Admin'], permit: ':uploadlist:preview' }) }, null, null);
+            ;
+            ;
+            ;
+            (__VLS_ctx.$t('webui.common.preview'));
+        }
+        [vAuth, $t,];
+        var __VLS_63;
+    }
+    if (__VLS_ctx.showDelete !== false) {
+        __VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
+            ...{ class: "flex items-center text-red-500 hover:text-red-700 cursor-pointer" },
+        });
+        ;
+        ;
+        ;
+        ;
+        ;
+        let __VLS_73;
+        Popconfirm;
+        const __VLS_74 = __VLS_asFunctionalComponent1(__VLS_73, new __VLS_73({
+            ...{ 'onConfirm': {} },
+            ...{ 'onCancel': {} },
+            open: (__VLS_ctx.confirmIndex(index)),
+            cancelText: (__VLS_ctx.$t('webui.common.no')),
+            okText: (__VLS_ctx.$t('webui.common.yes')),
+            title: (__VLS_ctx.$t('webui.components.form.upload.deleteConfirm')),
+            okButtonProps: ({ size: 'small' }),
+            cancelButtonProps: ({ size: 'small' }),
+        }));
+        const __VLS_75 = __VLS_74({
+            ...{ 'onConfirm': {} },
+            ...{ 'onCancel': {} },
+            open: (__VLS_ctx.confirmIndex(index)),
+            cancelText: (__VLS_ctx.$t('webui.common.no')),
+            okText: (__VLS_ctx.$t('webui.common.yes')),
+            title: (__VLS_ctx.$t('webui.components.form.upload.deleteConfirm')),
+            okButtonProps: ({ size: 'small' }),
+            cancelButtonProps: ({ size: 'small' }),
+        }, ...__VLS_functionalComponentArgsRest(__VLS_74));
+        let __VLS_78;
+        const __VLS_79 = ({ confirm: {} },
+            { onConfirm: (...[$event]) => {
+                    if (!(__VLS_ctx.showDelete !== false))
+                        return;
+                    __VLS_ctx.removeFile(index);
+                    [$t, $t, $t, showDelete, confirmIndex, removeFile,];
+                } });
+        const __VLS_80 = ({ cancel: {} },
+            { onCancel: (...[$event]) => {
+                    if (!(__VLS_ctx.showDelete !== false))
+                        return;
+                    __VLS_ctx.delIndex = -1;
+                    [delIndex,];
+                } });
+        const { default: __VLS_81 } = __VLS_76.slots;
+        let __VLS_82;
+        Tooltip;
+        const __VLS_83 = __VLS_asFunctionalComponent1(__VLS_82, new __VLS_82({
+            title: (__VLS_ctx.$t('webui.common.delete')),
+        }));
+        const __VLS_84 = __VLS_83({
+            title: (__VLS_ctx.$t('webui.common.delete')),
+        }, ...__VLS_functionalComponentArgsRest(__VLS_83));
+        const { default: __VLS_87 } = __VLS_85.slots;
+        __VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
+            ...{ onClick: (...[$event]) => {
+                    if (!(__VLS_ctx.showDelete !== false))
+                        return;
+                    __VLS_ctx.confirmDelFile(index, file.status);
+                    [$t, confirmDelFile,];
+                } },
+        });
+        let __VLS_88;
+        ToolIcon;
+        const __VLS_89 = __VLS_asFunctionalComponent1(__VLS_88, new __VLS_88({
+            icon: "icon-new",
+            angle: (45),
+            clickable: true,
+        }));
+        const __VLS_90 = __VLS_89({
+            icon: "icon-new",
+            angle: (45),
+            clickable: true,
+        }, ...__VLS_functionalComponentArgsRest(__VLS_89));
+        __VLS_asFunctionalDirective(__VLS_directives.vAuth, {})(null, { ...__VLS_directiveBindingRestFields, value: ({ role: ['Super', 'Admin'], permit: ':uploadlist:delete' }) }, null, null);
+        if (__VLS_ctx.showActionText) {
+            __VLS_asFunctionalElement1(__VLS_intrinsics.span, __VLS_intrinsics.span)({
+                ...{ class: "text-sm text-nowrap" },
+            });
+            __VLS_asFunctionalDirective(__VLS_directives.vAuth, {})(null, { ...__VLS_directiveBindingRestFields, value: ({ role: ['Super', 'Admin'], permit: ':uploadlist:delete' }) }, null, null);
+            ;
+            ;
+            (__VLS_ctx.$t('webui.common.delete'));
+        }
+        [vAuth, vAuth, $t, showActionText,];
+        var __VLS_85;
+        [];
+        var __VLS_76;
+        var __VLS_77;
+    }
+    if (file.status !== __VLS_ctx.UploadStatus.Online &&
+        file.status !== __VLS_ctx.UploadStatus.Offline &&
+        file.status !== __VLS_ctx.UploadStatus.Success) {
+        __VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({});
+        let __VLS_93;
+        Progress;
+        const __VLS_94 = __VLS_asFunctionalComponent1(__VLS_93, new __VLS_93({
+            percent: (file.percent),
+            strokeWidth: (2),
+            showInfo: (false),
+            ...{ style: {} },
+        }));
+        const __VLS_95 = __VLS_94({
+            percent: (file.percent),
+            strokeWidth: (2),
+            showInfo: (false),
+            ...{ style: {} },
+        }, ...__VLS_functionalComponentArgsRest(__VLS_94));
+    }
+    [UploadStatus, UploadStatus, UploadStatus,];
+}
+var __VLS_6 = __VLS_5, __VLS_20 = __VLS_19;
+[];
+const __VLS_export = (await import('vue')).defineComponent({
+    emits: {},
+    __typeProps: {},
+    props: {},
+});
+export default {};
+//# sourceMappingURL=uploadList.vue.js.map