UNPKG

tdesign-vue

Version:
605 lines (601 loc) 25.5 kB
/** * tdesign v1.12.1 * (c) 2025 tdesign * @license MIT */ import { h as helper } from '../../_chunks/dep-323b993c.js'; import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray'; import _defineProperty from '@babel/runtime/helpers/defineProperty'; import { defineComponent, toRefs, ref, computed } from '@vue/composition-api'; import { BrowseIcon, DeleteIcon, CheckCircleFilledIcon, ErrorCircleFilledIcon, TimeFilledIcon, FileExcelIcon, FilePdfIcon, FileWordIcon, FilePowerpointIcon, FileIcon, VideoIcon } from 'tdesign-icons-vue'; import { isFunction, isObject } from 'lodash-es'; import { useGlobalIcon } from '../../hooks/useGlobalIcon.js'; import { ImageViewer } from '../../image-viewer/index.js'; import { commonProps } from '../constants.js'; import { Button } from '../../button/index.js'; import useDrag from '../hooks/useDrag.js'; import { abridgeName, returnFileSize, FILE_PDF_REGEXP, FILE_EXCEL_REGEXP, FILE_WORD_REGEXP, FILE_PPT_REGEXP, VIDEO_REGEXP, IMAGE_REGEXP } from '../../_common/js/upload/utils.js'; import { Loading } from '../../loading/index.js'; import { Link } from '../../link/index.js'; import { renderTNodeJSX } from '../../utils/render-tnode.js'; import { Image } from '../../image/index.js'; import '../../hooks/useConfig.js'; import '../../config-provider/useConfig.js'; import '../../config-provider/context.js'; import '../../_common/js/global-config/default-config.js'; import '../../_common/js/global-config/locale/zh_CN.js'; import '../../_chunks/dep-c44a474d.js'; import '@babel/runtime/helpers/typeof'; import '../../_chunks/dep-d639fbd7.js'; import 'dayjs'; import '../../_chunks/dep-3c66615e.js'; import '../../config-provider/type.js'; import '../../_common/js/global-config/t.js'; import '@babel/runtime/helpers/slicedToArray'; import '../../image-viewer/image-viewer.js'; import '../../image-viewer/props.js'; import '../../image-viewer/base/Container.js'; import 'vue'; import '../../utils/dom.js'; import 'raf'; import '../../utils/easing.js'; import '../../image-viewer/base/ImageModalIcon.js'; import '../../hooks/tnode.js'; import '../../hooks/render-tnode.js'; import '../../image-viewer/base/ImageViewerUtils.js'; import '../../tooltip/index.js'; import '../../tooltip/tooltip.js'; import '../../tooltip/props.js'; import '../../popup/props.js'; import '../../popup/popup.js'; import '@popperjs/core'; import '../../utils/helper.js'; import '@babel/runtime/helpers/objectWithoutProperties'; import '../../_common/js/utils/setStyle.js'; import '../../popup/container.js'; import '../../config-provider/config-receiver.js'; import '../../utils/mixins.js'; import '../../utils/event.js'; import '../../popup/utils.js'; import '@babel/runtime/helpers/readOnlyError'; import '../../utils/map-props.js'; import '../../utils/withInstall.js'; import './style/css.js'; import '../../tooltip/type.js'; import '../../hooks/index.js'; import '../../hooks/slots.js'; import '../../hooks/useCommonClassName.js'; import '../../hooks/useDefaultValue.js'; import '../../hooks/useDestroyOnClose.js'; import '../../hooks/useElementLazyRender.js'; import '../../_common/js/utils/observe.js'; import '../../hooks/useFormDisabled.js'; import '../../hooks/useLazyLoad.js'; import '../../hooks/useResizeObserver.js'; import '../../hooks/useVirtualScrollNew.js'; import '../../hooks/useVModel.js'; import '../../hooks/useImagePreviewUrl.js'; import '../../_common/js/log/log.js'; import '../../_common/js/input-number/large-number.js'; import '../../image-viewer/base/ImageItem.js'; import '../../image-viewer/hooks.js'; import '../../image-viewer/const.js'; import '../../image-viewer/base/ImageViewerModal.js'; import '../../dialog/index.js'; import '../../dialog/dialog.js'; import '../../dialog/actions.js'; import '../../button/button.js'; import '../../button/props.js'; import '../../utils/ripple.js'; import '../../config.js'; import '../../loading/directive.js'; import '../../loading/plugin.js'; import '../../loading/loading.js'; import '../../loading/icon/gradient.js'; import '../../_common/js/loading/circle-adapter.js'; import '../../_common/js/utils/helper.js'; import '../../utils/transfer-dom.js'; import '../../loading/props.js'; import '../../loading/type.js'; import '../../button/type.js'; import '../../dialog/props.js'; import '../../dialog/stack.js'; import '../../_common/js/utils/getScrollbarWidth.js'; import '../../dialog/type.js'; import '../../dialog/plugin.js'; import '../../config-provider/config-provider.js'; import '../../config-provider/props.js'; import '../../image-viewer/utils.js'; import '../../image/image.js'; import '../../image/props.js'; import '../../space/index.js'; import '../../space/space.js'; import '../../space/props.js'; import '../../space/type.js'; import '../../image/type.js'; import '../../image-viewer/type.js'; import '../../link/link.js'; import '../../link/props.js'; import '../../link/type.js'; function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; } function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } var MultipleFlowList = defineComponent({ name: "UploadMultipleFlowList", props: _objectSpread(_objectSpread({}, commonProps), {}, { uploadFiles: Function, cancelUpload: Function, dragEvents: Object, disabled: Boolean, isBatchUpload: Boolean, draggable: Boolean, showThumbnail: Boolean, showImageFileName: Boolean, uploadButton: Object, cancelUploadButton: Object }), setup: function setup(props, context) { var _toRefs = toRefs(props), locale = _toRefs.locale, uploading = _toRefs.uploading, classPrefix = _toRefs.classPrefix, accept = _toRefs.accept; var uploadPrefix = "".concat(classPrefix.value, "-upload"); var icons = useGlobalIcon({ BrowseIcon: BrowseIcon, DeleteIcon: DeleteIcon, CheckCircleFilledIcon: CheckCircleFilledIcon, ErrorCircleFilledIcon: ErrorCircleFilledIcon, TimeFilledIcon: TimeFilledIcon, FileExcelIcon: FileExcelIcon, FilePdfIcon: FilePdfIcon, FileWordIcon: FileWordIcon, FilePowerpointIcon: FilePowerpointIcon, FileIcon: FileIcon, VideoIcon: VideoIcon }); var drag = useDrag(props.dragEvents, accept); var currentPreviewFile = ref([]); var previewIndex = ref(0); var uploadText = computed(function () { if (uploading.value) return "".concat(locale.value.progress.uploadingText); return locale.value.triggerUploadText.normal; }); var innerDragEvents = computed(function () { var draggable = props.draggable === void 0 ? true : props.draggable; return draggable ? { drop: drag.handleDrop, dragenter: drag.handleDragenter, dragover: drag.handleDragover, dragleave: drag.handleDragleave } : {}; }); var browseIconClick = function browseIconClick(_ref) { var e = _ref.e, index = _ref.index, file = _ref.file, viewFiles = _ref.viewFiles; previewIndex.value = index; currentPreviewFile.value = viewFiles; context.emit("preview", { file: file, index: index, e: e }); }; var previewIndexChange = function previewIndexChange(index) { previewIndex.value = index; }; var closePreview = function closePreview() { currentPreviewFile.value = []; }; var onVue2Preview = function onVue2Preview(params) { context.emit("preview", params); }; return { icons: icons, dragActive: drag.dragActive, uploadPrefix: uploadPrefix, uploadText: uploadText, innerDragEvents: innerDragEvents, currentPreviewFile: currentPreviewFile, previewIndex: previewIndex, onVue2Preview: onVue2Preview, browseIconClick: browseIconClick, closePreview: closePreview, previewIndexChange: previewIndexChange }; }, methods: { getStatusMap: function getStatusMap() { var h = this.$createElement; var _this$icons = this.icons, CheckCircleFilledIcon = _this$icons.CheckCircleFilledIcon, ErrorCircleFilledIcon = _this$icons.ErrorCircleFilledIcon, TimeFilledIcon = _this$icons.TimeFilledIcon; var iconMap = { success: h(CheckCircleFilledIcon), fail: h(ErrorCircleFilledIcon), progress: h(Loading), waiting: h(TimeFilledIcon) }; var progress = this.locale.progress; var textMap = { success: progress === null || progress === void 0 ? void 0 : progress.successText, fail: progress === null || progress === void 0 ? void 0 : progress.failText, progress: progress === null || progress === void 0 ? void 0 : progress.uploadingText, waiting: progress === null || progress === void 0 ? void 0 : progress.waitingText }; return { iconMap: iconMap, textMap: textMap }; }, renderEmpty: function renderEmpty() { var h = this.$createElement; return h("div", { "class": "".concat(this.uploadPrefix, "__flow-empty") }, [this.dragActive ? this.locale.dragger.dragDropText : this.locale.dragger.clickAndDragText]); }, renderImgItem: function renderImgItem(file, index) { var _file$response, _this = this; var h = this.$createElement; var _this$getStatusMap = this.getStatusMap(), iconMap = _this$getStatusMap.iconMap, textMap = _this$getStatusMap.textMap; var _this$icons2 = this.icons, BrowseIcon = _this$icons2.BrowseIcon, DeleteIcon = _this$icons2.DeleteIcon; var fileName = this.abridgeName && file.name ? abridgeName.apply(void 0, [file.name].concat(_toConsumableArray(this.abridgeName))) : file.name; return h("li", { "class": "".concat(this.uploadPrefix, "__card-item"), "key": file.name + index + file.percent + file.status }, [h("div", { "class": ["".concat(this.uploadPrefix, "__card-content"), _defineProperty({}, "".concat(this.classPrefix, "-is-bordered"), file.status !== "waiting")] }, [file.status === "progress" && h("div", { "class": "".concat(this.uploadPrefix, "__card-status-wrap ").concat(this.uploadPrefix, "__").concat(this.theme, "-progress") }, [iconMap[file.status], h("p", [textMap[file.status], this.showUploadProgress && " ".concat(file.percent, "%")])]), file.status === "fail" && h("div", { "class": "".concat(this.uploadPrefix, "__card-status-wrap ").concat(this.uploadPrefix, "__").concat(this.theme, "-fail") }, [iconMap[file.status], h("p", [((_file$response = file.response) === null || _file$response === void 0 ? void 0 : _file$response.error) || textMap[file.status]])]), (["waiting", "success"].includes(file.status) || !file.status && file.url) && h(Image, { "class": "".concat(this.uploadPrefix, "__card-image"), "attrs": { "src": file.url || file.raw, "error": "", "loading": "", "fit": "contain" } }), h("div", { "class": "".concat(this.uploadPrefix, "__card-mask") }, [(file.url || file.raw) && !["progress", "fail"].includes(file.status) && h("span", { "class": "".concat(this.uploadPrefix, "__card-mask-item") }, [h(BrowseIcon, { "on": { "click": function click(_ref3) { var e = _ref3.e; _this.browseIconClick({ e: e, index: index, file: file, viewFiles: _this.displayFiles }); } } }), h("span", { "class": "".concat(this.uploadPrefix, "__card-mask-item-divider") })]), !this.disabled && h("span", { "class": "".concat(this.uploadPrefix, "__card-mask-item ").concat(this.uploadPrefix, "__delete"), "on": { "click": function click(e) { return _this.onRemove({ e: e, index: index, file: file }); } } }, [h(DeleteIcon)])])]), this.showImageFileName && h("p", { "class": ["".concat(this.uploadPrefix, "__card-name"), "".concat(this.uploadPrefix, "__flow-status")] }, [["success", "waiting"].includes(file.status) && iconMap[file.status], fileName])]); }, renderStatus: function renderStatus(file) { var _file$response2, _file$response3; var h = this.$createElement; var _this$getStatusMap2 = this.getStatusMap(), iconMap = _this$getStatusMap2.iconMap, textMap = _this$getStatusMap2.textMap; return h("div", { "class": "".concat(this.uploadPrefix, "__flow-status") }, [iconMap[file.status], h("span", { "class": "".concat(this.uploadPrefix, "__").concat(this.theme, "-").concat(file.status) }, [(_file$response2 = file.response) !== null && _file$response2 !== void 0 && _file$response2.error ? ((_file$response3 = file.response) === null || _file$response3 === void 0 ? void 0 : _file$response3.error) || textMap[file.status] : textMap[file.status], this.showUploadProgress && file.status === "progress" ? " ".concat(file.percent || 0, "%") : ""])]); }, renderNormalActionCol: function renderNormalActionCol(file, index) { var _this$locale, _this2 = this; var h = this.$createElement; return h("td", [h(Button, { "attrs": { "theme": "primary", "variant": "text", "content": (_this$locale = this.locale) === null || _this$locale === void 0 || (_this$locale = _this$locale.triggerUploadText) === null || _this$locale === void 0 ? void 0 : _this$locale["delete"] }, "class": "".concat(this.uploadPrefix, "__delete"), "on": { "click": function click(e) { return _this2.onRemove({ e: e, index: index, file: file }); } } })]); }, renderBatchActionCol: function renderBatchActionCol(index) { var _this$locale2, _this3 = this; var h = this.$createElement; return index === 0 ? h("td", { "attrs": { "rowSpan": this.displayFiles.length }, "class": "".concat(this.uploadPrefix, "__flow-table__batch-row") }, [h(Button, { "attrs": { "theme": "primary", "variant": "text", "content": (_this$locale2 = this.locale) === null || _this$locale2 === void 0 || (_this$locale2 = _this$locale2.triggerUploadText) === null || _this$locale2 === void 0 ? void 0 : _this$locale2["delete"] }, "class": "".concat(this.uploadPrefix, "__delete"), "on": { "click": function click(e) { return _this3.onRemove({ e: e, index: -1, file: void 0 }); } } })]) : null; }, renderFileList: function renderFileList() { var _this$locale$file, _this$locale$file2, _this$locale$file3, _this$locale$file4, _this4 = this; var h = this.$createElement; var list = renderTNodeJSX(this, "fileListDisplay", { params: { cancelUpload: this.cancelUpload, uploadFiles: this.uploadFiles, onRemove: this.onRemove, toUploadFiles: this.toUploadFiles, sizeOverLimitMessage: this.sizeOverLimitMessage, locale: this.locale, files: this.displayFiles, dragEvents: this.innerDragEvents } }); if (list) return list; return h("table", helper([{ "class": "".concat(this.uploadPrefix, "__flow-table") }, { "on": this.innerDragEvents }]), [h("thead", [h("tr", [h("th", [(_this$locale$file = this.locale.file) === null || _this$locale$file === void 0 ? void 0 : _this$locale$file.fileNameText]), h("th", { "style": { minWidth: "120px" } }, [(_this$locale$file2 = this.locale.file) === null || _this$locale$file2 === void 0 ? void 0 : _this$locale$file2.fileSizeText]), h("th", { "style": { minWidth: "120px" } }, [(_this$locale$file3 = this.locale.file) === null || _this$locale$file3 === void 0 ? void 0 : _this$locale$file3.fileStatusText]), this.disabled ? null : h("th", [(_this$locale$file4 = this.locale.file) === null || _this$locale$file4 === void 0 ? void 0 : _this$locale$file4.fileOperationText])])]), h("tbody", [!this.displayFiles.length && h("tr", [h("td", { "attrs": { "colSpan": 4 } }, [this.renderEmpty()])]), this.displayFiles.map(function (file, index) { var _this4$abridgeName; var showBatchUploadAction = _this4.isBatchUpload; var deleteNode = showBatchUploadAction && _this4.displayFiles.every(function (item) { return item.status === "success" || !item.status; }) ? _this4.renderBatchActionCol(index) : _this4.renderNormalActionCol(file, index); var fileName = (_this4$abridgeName = _this4.abridgeName) !== null && _this4$abridgeName !== void 0 && _this4$abridgeName.length ? abridgeName.apply(void 0, [file.name].concat(_toConsumableArray(_this4.abridgeName))) : file.name; var thumbnailNode = _this4.showThumbnail ? h("div", { "class": "".concat(_this4.uploadPrefix, "__file-info") }, [_this4.renderFileThumbnail(file), fileName]) : fileName; var fileNameNode = file.url ? h(Link, { "attrs": { "href": file.url, "target": "_blank", "hover": "color" } }, [thumbnailNode]) : thumbnailNode; return h("tr", { "key": file.name + index }, [h("td", { "class": "".concat(_this4.uploadPrefix, "__file-name") }, [fileNameNode]), h("td", [returnFileSize(file.size)]), h("td", [_this4.renderStatus(file)]), _this4.disabled ? null : deleteNode]); })])]); }, renderImageList: function renderImageList() { var _this5 = this; var h = this.$createElement; var customList = renderTNodeJSX(this, "fileListDisplay", { params: { cancelUpload: this.cancelUpload, uploadFiles: this.uploadFiles, onRemove: this.onRemove, onPreview: this.onVue2Preview, toUploadFiles: this.toUploadFiles, sizeOverLimitMessage: this.sizeOverLimitMessage, locale: this.locale, files: this.displayFiles, dragEvents: this.innerDragEvents } }); if (customList) return customList; return h("ul", { "class": "".concat(this.uploadPrefix, "__card clearfix") }, [this.displayFiles.map(function (file, index) { return _this5.renderImgItem(file, index); })]); }, getFileThumbnailIcon: function getFileThumbnailIcon(fileType) { var h = this.$createElement; var _this$icons3 = this.icons, FilePdfIcon = _this$icons3.FilePdfIcon, FileExcelIcon = _this$icons3.FileExcelIcon, FileWordIcon = _this$icons3.FileWordIcon, FilePowerpointIcon = _this$icons3.FilePowerpointIcon, VideoIcon = _this$icons3.VideoIcon, FileIcon = _this$icons3.FileIcon; if (FILE_PDF_REGEXP.test(fileType)) { return h(FilePdfIcon); } if (FILE_EXCEL_REGEXP.test(fileType)) { return h(FileExcelIcon); } if (FILE_WORD_REGEXP.test(fileType)) { return h(FileWordIcon); } if (FILE_PPT_REGEXP.test(fileType)) { return h(FilePowerpointIcon); } if (VIDEO_REGEXP.test(fileType)) { return h(VideoIcon); } return h(FileIcon); }, renderFileThumbnail: function renderFileThumbnail(file) { var _this6 = this; var h = this.$createElement; if (!file || !file.raw && file.url) return null; var fileType = file.raw.type; var className = "".concat(this.uploadPrefix, "__file-thumbnail"); if (IMAGE_REGEXP.test(fileType)) { return h(Image, { "class": className, "attrs": { "src": file.url || file.raw, "fit": "scale-down", "error": "", "loading": "" }, "on": { "click": function click(e) { e.preventDefault(); _this6.browseIconClick({ e: e, index: 0, file: file, viewFiles: [file] }); } } }); } return h("div", { "class": className }, [this.getFileThumbnailIcon(fileType)]); } }, render: function render() { var _this$$scopedSlots$de, _this$$scopedSlots, _this$locale3, _this$locale4, _this7 = this; var h = arguments[0]; var cardClassName = "".concat(this.uploadPrefix, "__flow-card-area"); var isShowBottomButton = !this.autoUpload && (this.uploadButton !== null || this.cancelUploadButton !== null); var cancelUploadDisabled = this.disabled || !this.uploading; var hasCancelUploadTNode = this.$scopedSlots.uploadButton || isFunction(this.uploadButton); var uploadButtonDisabled = Boolean(this.disabled || this.uploading || !this.displayFiles.length); var hasUploadButtonTNode = this.$scopedSlots.cancelUploadButton || isFunction(this.cancelUploadButton); return h("div", { "class": "".concat(this.uploadPrefix, "__flow ").concat(this.uploadPrefix, "__flow-").concat(this.theme) }, [h("div", { "class": "".concat(this.uploadPrefix, "__flow-op") }, [(_this$$scopedSlots$de = (_this$$scopedSlots = this.$scopedSlots)["default"]) === null || _this$$scopedSlots$de === void 0 ? void 0 : _this$$scopedSlots$de.call(_this$$scopedSlots, null), this.placeholder && h("small", { "class": "".concat(this.uploadPrefix, "__flow-placeholder ").concat(this.uploadPrefix, "__placeholder") }, [this.placeholder])]), this.theme === "image-flow" && h("div", helper([{ "class": cardClassName }, { "on": this.innerDragEvents }]), [this.displayFiles.length ? this.renderImageList() : this.renderEmpty()]), this.theme === "file-flow" && (this.displayFiles.length ? this.renderFileList() : h("div", helper([{ "class": cardClassName }, { "on": this.innerDragEvents }]), [this.renderEmpty()])), isShowBottomButton && h("div", { "class": "".concat(this.uploadPrefix, "__flow-bottom") }, [this.cancelUploadButton !== null && (hasCancelUploadTNode ? renderTNodeJSX(this, "cancelUploadButton", { params: { disabled: cancelUploadDisabled, cancelUploadText: (_this$locale3 = this.locale) === null || _this$locale3 === void 0 ? void 0 : _this$locale3.cancelUploadText, cancelUpload: this.cancelUpload } }) : h(Button, helper([{ "attrs": { "theme": "default", "disabled": this.disabled || !this.uploading, "content": (_this$locale4 = this.locale) === null || _this$locale4 === void 0 ? void 0 : _this$locale4.cancelUploadText }, "class": "".concat(this.uploadPrefix, "__cancel") }, { "props": isObject(this.cancelUploadButton) ? this.cancelUploadButton : {} }, { "on": { "click": function click(e) { var _this7$cancelUpload; return (_this7$cancelUpload = _this7.cancelUpload) === null || _this7$cancelUpload === void 0 ? void 0 : _this7$cancelUpload.call(_this7, { e: e }); } } }]))), this.uploadButton !== null && (hasUploadButtonTNode ? renderTNodeJSX(this, "uploadButton", { params: { disabled: uploadButtonDisabled, uploading: this.uploading, uploadText: this.uploadText, uploadFiles: this.uploadFiles } }) : h(Button, helper([{ "attrs": { "disabled": this.disabled || this.uploading || !this.displayFiles.length, "theme": "primary", "loading": this.uploading, "content": this.uploadText }, "class": "".concat(this.uploadPrefix, "__continue") }, { "props": isObject(this.uploadButton) ? this.uploadButton : {} }, { "on": { "click": function click() { var _this7$uploadFiles; return (_this7$uploadFiles = _this7.uploadFiles) === null || _this7$uploadFiles === void 0 ? void 0 : _this7$uploadFiles.call(_this7); } } }])))]), h(ImageViewer, helper([{ "attrs": { "images": this.currentPreviewFile.map(function (t) { return t.url || t.raw; }), "visible": !!this.currentPreviewFile.length, "index": this.previewIndex }, "on": { "close": this.closePreview } }, { "on": { "index-change": this.previewIndexChange } }, {}, { "props": this.imageViewerProps }]))]); } }); export { MultipleFlowList as default }; //# sourceMappingURL=multiple-flow-list.js.map