vxe-pc-ui 4.6.46 → 4.6.48

package/lib/index.umd.js

@@ -3798,6 +3798,7 @@ setTheme();
       overCountErr: '最多只能选择{0}个文件！',
       overCountExtraErr: '已超出最大数量{0}个，超出的{1}个文件将被忽略！',
       overSizeErr: '文件大小最大不能超过{0}！',
+      manualUpload: '点击上传',
       reUpload: '重新上传',
       uploadProgress: '上传中 {0}%',
       uploadErr: '上传失败',
@@ -4243,14 +4244,14 @@ function checkDynamic() {
 }
 ;// CONCATENATED MODULE: ./packages/ui/src/log.ts
 
-const log_version = `ui v${"4.6.46"}`;
+const log_version = `ui v${"4.6.48"}`;
 const warnLog = log.create('warn', log_version);
 const errLog = log.create('error', log_version);
 ;// CONCATENATED MODULE: ./packages/ui/index.ts
 
 
 
-const ui_version = "4.6.46";
+const ui_version = "4.6.48";
 index_esm_VxeUI.uiVersion = ui_version;
 index_esm_VxeUI.dynamicApp = dynamicApp;
 function config(options) {
@@ -4621,7 +4622,9 @@ setConfig({
     dragToUpload: true,
     // imageConfig: {},
     showLimitSize: true,
-    showLimitCount: true
+    showLimitCount: true,
+    autoSubmit: true,
+    maxSimultaneousUploads: 5
   },
   watermark: {
     rotate: -30,
@@ -4724,6 +4727,7 @@ setIcon({
   UPLOAD_FILE_ADD: iconPrefix + 'upload',
   UPLOAD_FILE_REMOVE: iconPrefix + 'delete',
   UPLOAD_FILE_DOWNLOAD: iconPrefix + 'download',
+  UPLOAD_IMAGE_UPLOAD: iconPrefix + 'upload',
   UPLOAD_IMAGE_RE_UPLOAD: iconPrefix + 'repeat',
   UPLOAD_IMAGE_ADD: iconPrefix + 'add',
   UPLOAD_IMAGE_REMOVE: iconPrefix + 'close',
@@ -10876,6 +10880,7 @@ function toFloatValueFixed(inputValue, digitsValue) {
       default: true
     },
     name: String,
+    title: String,
     type: {
       type: String,
       default: 'text'
@@ -13478,6 +13483,7 @@ function toFloatValueFixed(inputValue, digitsValue) {
         className,
         controls,
         type,
+        title,
         align,
         showWordCount,
         countMethod,
@@ -13525,7 +13531,8 @@ function toFloatValueFixed(inputValue, digitsValue) {
         }],
         spellcheck: false
       }, [prefix || (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createCommentVNode)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-        class: 'vxe-input--wrapper'
+        class: 'vxe-input--wrapper',
+        title: title || null
       }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('input', {
         ref: refInputTarget,
         class: 'vxe-input--inner',
@@ -27953,7 +27960,16 @@ function getOptUniqueId() {
           group: null,
           $select: $xeSelect
         };
-        const optVNs = optionSlot ? callSlot(optionSlot, optParams) : defaultSlot ? callSlot(defaultSlot, optParams) : getFuncText(option[isOptGroup ? groupLabelField : labelField]);
+        let optLabel = '';
+        let optVNs = [];
+        if (optionSlot) {
+          optVNs = callSlot(optionSlot, optParams);
+        } else if (defaultSlot) {
+          optVNs = callSlot(defaultSlot, optParams);
+        } else {
+          optLabel = getFuncText(option[isOptGroup ? groupLabelField : labelField]);
+          optVNs = optLabel;
+        }
         return isVisible ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
           key: useKey || optionKey ? optid : cIndex,
           class: ['vxe-select-option', className ? external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isFunction(className) ? className(optParams) : className : '', {
@@ -27963,9 +27979,8 @@ function getOptUniqueId() {
             'is--add': isAdd,
             'is--hover': currentOption && getOptId(currentOption) === optid
           }],
-          // attrs
           optid: optid,
-          // event
+          title: optLabel || null,
           onMousedown: evnt => {
             const isLeftBtn = evnt.button === 0;
             if (isLeftBtn) {
@@ -28075,6 +28090,7 @@ function getOptUniqueId() {
         prefixIcon: props.prefixIcon,
         suffixIcon: loading ? getIcon().SELECT_LOADED : visiblePanel ? getIcon().SELECT_OPEN : getIcon().SELECT_CLOSE,
         autoFocus: false,
+        title: selectLabel,
         modelValue: selectLabel,
         onClear: clearEvent,
         onClick: clickEvent,
@@ -37120,6 +37136,10 @@ const saveLocalFile = options => {
       type: Boolean,
       default: null
     },
+    autoSubmit: {
+      type: Boolean,
+      default: () => getConfig().upload.autoSubmit
+    },
     mode: {
       type: String,
       default: () => getConfig().upload.mode
@@ -37209,6 +37229,7 @@ const saveLocalFile = options => {
       type: [String, Number, Function],
       default: () => getConfig().upload.progressText
     },
+    showSubmitButton: Boolean,
     autoHiddenButton: {
       type: Boolean,
       default: () => getConfig().upload.autoHiddenButton
@@ -37249,6 +37270,10 @@ const saveLocalFile = options => {
       type: Boolean,
       default: () => null
     },
+    maxSimultaneousUploads: {
+      type: Number,
+      default: () => getConfig().upload.maxSimultaneousUploads
+    },
     tipText: [String, Number, Function],
     hintText: String,
     previewMethod: Function,
@@ -37652,6 +37677,7 @@ const saveLocalFile = options => {
           const cacheItem = fileCacheMaps[fileKey];
           if (cacheItem) {
             cacheItem.percent = 100;
+            cacheItem.status = 'success';
           }
           Object.assign(item, res);
           dispatchEvent('upload-success', {
@@ -37709,7 +37735,7 @@ const saveLocalFile = options => {
       if (uploadFn && cacheItem) {
         const file = cacheItem.file;
         cacheItem.loading = true;
-        cacheItem.status = '';
+        cacheItem.status = 'pending';
         cacheItem.percent = 0;
         handleUploadResult(item, file).then(() => {
           if (urlMode) {
@@ -37718,14 +37744,15 @@ const saveLocalFile = options => {
         });
       }
     };
-    const uploadFile = (files, evnt) => {
+    const handleUploadFile = (files, evnt) => {
       const {
         multiple,
         urlMode,
         showLimitSize,
         limitSizeText,
         showLimitCount,
-        limitCountText
+        limitCountText,
+        autoSubmit
       } = props;
       const {
         fileList
@@ -37825,13 +37852,13 @@ const saveLocalFile = options => {
         if (uploadFn) {
           cacheMaps[fileKey] = {
             file: file,
-            loading: true,
-            status: '',
+            loading: !!autoSubmit,
+            status: 'pending',
             percent: 0
           };
         }
         const item = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.reactive)(fileObj);
-        if (uploadFn) {
+        if (uploadFn && autoSubmit) {
           uploadPromiseRests.push(handleUploadResult(item, file));
         }
         newFileList.push(item);
@@ -37868,7 +37895,7 @@ const saveLocalFile = options => {
         multiple,
         types: isImage ? imageTypes : fileTypes
       }).then(params => {
-        uploadFile(params.files, evnt);
+        handleUploadFile(params.files, evnt);
         return params;
       });
     };
@@ -38025,7 +38052,7 @@ const saveLocalFile = options => {
         }
         return;
       }
-      uploadFile(files, evnt);
+      handleUploadFile(files, evnt);
     };
     const handleUploadDropEvent = evnt => {
       const dataTransfer = evnt.dataTransfer;
@@ -38294,6 +38321,45 @@ const saveLocalFile = options => {
       dispatchEvent,
       choose() {
         return handleChoose(null);
+      },
+      submit(isFull) {
+        const {
+          maxSimultaneousUploads
+        } = props;
+        const msNum = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toNumber(maxSimultaneousUploads || 1) || 1;
+        const {
+          fileList,
+          fileCacheMaps
+        } = reactData;
+        const allPendingList = fileList.filter(item => {
+          const fileKey = getFieldKey(item);
+          const cacheItem = fileCacheMaps[fileKey];
+          return cacheItem && (cacheItem.status === 'pending' || isFull && cacheItem.status === 'error');
+        });
+        const handleSubmit = item => {
+          const fileKey = getFieldKey(item);
+          const cacheItem = fileCacheMaps[fileKey];
+          if (cacheItem) {
+            const file = cacheItem.file;
+            if (file && (cacheItem.status === 'pending' || isFull && cacheItem.status === 'error')) {
+              cacheItem.loading = true;
+              cacheItem.percent = 0;
+              return handleUploadResult(item, file).then(handleNextSubmit);
+            }
+          }
+          return handleNextSubmit();
+        };
+        const handleNextSubmit = () => {
+          if (allPendingList.length) {
+            const item = allPendingList[0];
+            allPendingList.splice(0, 1);
+            return handleSubmit(item).then(handleNextSubmit);
+          }
+          return Promise.resolve();
+        };
+        return Promise.all(allPendingList.splice(0, msNum).map(handleSubmit)).then(() => {
+          // 完成
+        });
       }
     };
     const uploadPrivateMethods = {};
@@ -38306,7 +38372,9 @@ const saveLocalFile = options => {
         progressText,
         showPreview,
         showErrorStatus,
-        dragSort
+        dragSort,
+        autoSubmit,
+        showSubmitButton
       } = props;
       const {
         fileCacheMaps
@@ -38325,13 +38393,21 @@ const saveLocalFile = options => {
       return currList.map((item, index) => {
         const fileKey = getFieldKey(item);
         const cacheItem = fileCacheMaps[fileKey];
-        const isLoading = cacheItem && cacheItem.loading;
-        const isError = cacheItem && cacheItem.status === 'error';
+        let isLoading = false;
+        let isError = false;
+        let isPending = false;
+        const fileName = `${item[nameProp] || ''}`;
+        if (cacheItem) {
+          isLoading = cacheItem.loading;
+          isError = cacheItem.status === 'error';
+          isPending = cacheItem.status === 'pending';
+        }
         return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
           key: dragSort ? fileKey : index,
           class: ['vxe-upload--file-item', {
             'is--preview': showPreview,
             'is--loading': isLoading,
+            'is--pending': isPending,
             'is--error': isError
           }],
           fileid: fileKey,
@@ -38343,12 +38419,13 @@ const saveLocalFile = options => {
           class: getIcon()[`UPLOAD_FILE_TYPE_${`${item[typeProp]}`.toLocaleUpperCase()}`] || getIcon().UPLOAD_FILE_TYPE_DEFAULT
         })]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
           class: 'vxe-upload--file-item-name',
+          title: fileName,
           onClick(evnt) {
             if (!isLoading && !isError) {
               handlePreviewFileEvent(evnt, item);
             }
           }
-        }, `${item[nameProp] || ''}`), isLoading ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        }, fileName), isLoading ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
           class: 'vxe-upload--file-item-loading-icon'
         }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('i', {
           class: getIcon().UPLOAD_LOADING
@@ -38356,13 +38433,13 @@ const saveLocalFile = options => {
           class: 'vxe-upload--file-item-loading-text'
         }, progressText ? external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toFormatString(`${external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isFunction(progressText) ? progressText({}) : progressText}`, {
           percent: cacheItem.percent
-        }) : i18n_getI18n('vxe.upload.uploadProgress', [cacheItem.percent])) : renderEmptyElement($xeUpload), showErrorStatus && isError ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-          class: 'vxe-upload--image-item-error'
+        }) : i18n_getI18n('vxe.upload.uploadProgress', [cacheItem.percent])) : renderEmptyElement($xeUpload), !isLoading && (isError && showErrorStatus || isPending && showSubmitButton && !autoSubmit) ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+          class: 'vxe-upload--file-item-rebtn'
         }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(src_button, {
-          icon: getIcon().UPLOAD_IMAGE_RE_UPLOAD,
+          icon: isError ? getIcon().UPLOAD_IMAGE_RE_UPLOAD : getIcon().UPLOAD_IMAGE_UPLOAD,
           mode: 'text',
           status: 'primary',
-          content: i18n_getI18n('vxe.upload.reUpload'),
+          content: isError ? i18n_getI18n('vxe.upload.reUpload') : i18n_getI18n('vxe.upload.manualUpload'),
           onClick() {
             handleReUpload(item);
           }
@@ -38374,7 +38451,7 @@ const saveLocalFile = options => {
           option: item,
           isMoreView,
           readonly: formReadonly
-        }))) : renderEmptyElement($xeUpload), showDownloadButton && !isLoading ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        }))) : renderEmptyElement($xeUpload), showDownloadButton && !(isLoading || isPending) ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
           class: 'vxe-upload--file-item-download-btn',
           onClick(evnt) {
             downloadFileEvent(evnt, item);
@@ -38482,7 +38559,9 @@ const saveLocalFile = options => {
         progressText,
         showPreview,
         showErrorStatus,
-        dragSort
+        dragSort,
+        autoSubmit,
+        showSubmitButton
       } = props;
       const {
         fileCacheMaps
@@ -38503,14 +38582,21 @@ const saveLocalFile = options => {
       return currList.map((item, index) => {
         const fileKey = getFieldKey(item);
         const cacheItem = fileCacheMaps[fileKey];
-        const isLoading = cacheItem && cacheItem.loading;
-        const isError = cacheItem && cacheItem.status === 'error';
+        let isLoading = false;
+        let isError = false;
+        let isPending = false;
+        if (cacheItem) {
+          isLoading = cacheItem.loading;
+          isError = cacheItem.status === 'error';
+          isPending = cacheItem.status === 'pending';
+        }
         return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
           key: dragSort ? fileKey : index,
           class: ['vxe-upload--image-item', {
             'is--preview': showPreview,
             'is--circle': imageOpts.circle,
             'is--loading': isLoading,
+            'is--pending': isPending,
             'is--error': isError
           }],
           fileid: fileKey,
@@ -38519,7 +38605,6 @@ const saveLocalFile = options => {
         }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
           class: 'vxe-upload--image-item-box',
           style: isMoreView ? null : imgStyle,
-          title: i18n_getI18n('vxe.upload.viewItemTitle'),
           onClick(evnt) {
             if (!isLoading && !isError) {
               handlePreviewImageEvent(evnt, item, index);
@@ -38535,21 +38620,22 @@ const saveLocalFile = options => {
           class: 'vxe-upload--image-item-loading-text'
         }, progressText ? external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toFormatString(`${external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isFunction(progressText) ? progressText({}) : progressText}`, {
           percent: cacheItem.percent
-        }) : i18n_getI18n('vxe.upload.uploadProgress', [cacheItem.percent])) : renderEmptyElement($xeUpload)]) : renderEmptyElement($xeUpload), !isLoading ? isError && showErrorStatus ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-          class: 'vxe-upload--image-item-error'
+        }) : i18n_getI18n('vxe.upload.uploadProgress', [cacheItem.percent])) : renderEmptyElement($xeUpload)]) : renderEmptyElement($xeUpload), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+          class: 'vxe-upload--image-item-img-wrapper',
+          title: i18n_getI18n('vxe.upload.viewItemTitle')
+        }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('img', {
+          class: 'vxe-upload--image-item-img',
+          src: getThumbnailFileUrl(item)
+        })]), !isLoading && (isError && showErrorStatus || isPending && showSubmitButton && !autoSubmit) ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+          class: 'vxe-upload--image-item-rebtn'
         }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(src_button, {
-          icon: getIcon().UPLOAD_IMAGE_RE_UPLOAD,
+          icon: isError ? getIcon().UPLOAD_IMAGE_RE_UPLOAD : getIcon().UPLOAD_IMAGE_UPLOAD,
           mode: 'text',
           status: 'primary',
-          content: i18n_getI18n('vxe.upload.reUpload'),
+          content: isError ? i18n_getI18n('vxe.upload.reUpload') : i18n_getI18n('vxe.upload.manualUpload'),
           onClick() {
             handleReUpload(item);
           }
-        })]) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-          class: 'vxe-upload--image-item-img-wrapper'
-        }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('img', {
-          class: 'vxe-upload--image-item-img',
-          src: getThumbnailFileUrl(item)
         })]) : renderEmptyElement($xeUpload), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
           class: 'vxe-upload--image-item-btn-wrapper',
           onClick(evnt) {
@@ -46997,7 +47083,7 @@ function createHtmlPage(opts, printHtml) {
   const footStyOpts = pageStyObj.header;
   const pnStyOpts = pageStyObj.pageNumber;
   const isPbMode = opts._pageBreaks || opts.pageBreaks && opts.pageBreaks.length;
-  return ['<!DOCTYPE html><html>', '<head>', '<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui">', `<title>${opts.title || ''}</title>`, '<style media="print">@page{size:auto;margin: 0mm;}</style>', `<style>body{font-size:${pageStyObj.fontSize || '14px'};color:${pageStyObj.color || defaultFontColor};text-align:${pageStyObj.textAlign || 'left'};}</style>`, '<style>', '.vxe-print-slots{display:none;}', '.vxe-print-page-break.align--center{text-align:center;}', '.vxe-print-page-break.align--left{text-align:left;}', '.vxe-print-page-break.align--right{text-align:right;}', '.vxe-print-page-break{break-before:always;page-break-before:always;display:flex;flex-direction:column;height:100vh;overflow:hidden;}', '.vxe-print-page-break--body{display:flex;flex-direction:row;flex-grow:1;overflow:hidden;}', '.vxe-print-page-break--left,.vxe-print-page-break--right{flex-shrink:0;height:100%;}', `.vxe-print-page-break--left{width:${pageStyObj.marginLeft};}`, `.vxe-print-page-break--right{width:${pageStyObj.marginRight};}`, '.vxe-print-page-break--header,.vxe-print-page-break--footer{display:flex;justify-content:center;flex-direction:column;flex-shrink:0;width:100%;}', `.vxe-print-page-break--header{height:${headStyOpts.height || pageStyObj.marginTop};padding:0 ${pageStyObj.marginLeft} 0 ${pageStyObj.marginRight};text-align:${headStyOpts.textAlign || 'left'};}`, `.vxe-print-page-break--header-title{font-size:${titStyOpts.fontSize || '1.6em'};color:${titStyOpts.color || defaultFontColor};text-align:${opts.headerAlign || pnStyOpts.textAlign || 'center'};}`, `.vxe-print-page-break--footer{height:${footStyOpts.height || pageStyObj.marginBottom};padding:0 ${pageStyObj.marginLeft} 0 ${pageStyObj.marginRight};text-align:${footStyOpts.textAlign || 'left'};}`, '.vxe-print-page-break--content{flex-grow:1;overflow:hidden;}', `.vxe-print-page-break--footer-page-number{font-size:${pnStyOpts.fontSize || '1.2em'};color:${pnStyOpts.color || defaultFontColor};text-align:${opts.footerAlign || pnStyOpts.textAlign || 'center'};}`, '</style>', '<style>.vxe-table{white-space:pre;}</style>', `<style>${defaultHtmlStyle}</style>`, isPbMode ? '<style>body{margin:0;}</style>' : `<style>body{margin:${pageStyObj.marginTop} ${pageStyObj.marginRight} ${pageStyObj.marginBottom} ${pageStyObj.marginLeft};}</style>`, customStyle ? `<style>${customStyle}</style>` : '', '</head>', '<body>', `${printHtml}`, '</body>', '</html>'].join('');
+  return ['<!DOCTYPE html><html>', '<head>', '<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui">', `<title>${opts.title || ''}</title>`, `<style media="print">@page{size:auto;${isPbMode ? 'margin: 0mm;' : ''}}</style>`, `<style>body{font-size:${pageStyObj.fontSize || '14px'};color:${pageStyObj.color || defaultFontColor};text-align:${pageStyObj.textAlign || 'left'};}</style>`, '<style>', '.vxe-print-slots{display:none;}', '.vxe-print-page-break.align--center{text-align:center;}', '.vxe-print-page-break.align--left{text-align:left;}', '.vxe-print-page-break.align--right{text-align:right;}', '.vxe-print-page-break{break-before:always;page-break-before:always;display:flex;flex-direction:column;height:100vh;overflow:hidden;}', '.vxe-print-page-break--body{display:flex;flex-direction:row;flex-grow:1;overflow:hidden;}', '.vxe-print-page-break--left,.vxe-print-page-break--right{flex-shrink:0;height:100%;}', `.vxe-print-page-break--left{width:${pageStyObj.marginLeft};}`, `.vxe-print-page-break--right{width:${pageStyObj.marginRight};}`, '.vxe-print-page-break--header,.vxe-print-page-break--footer{display:flex;justify-content:center;flex-direction:column;flex-shrink:0;width:100%;}', `.vxe-print-page-break--header{height:${headStyOpts.height || pageStyObj.marginTop};padding:0 ${pageStyObj.marginLeft} 0 ${pageStyObj.marginRight};text-align:${headStyOpts.textAlign || 'left'};}`, `.vxe-print-page-break--header-title{font-size:${titStyOpts.fontSize || '1.6em'};color:${titStyOpts.color || defaultFontColor};text-align:${opts.headerAlign || pnStyOpts.textAlign || 'center'};}`, `.vxe-print-page-break--footer{height:${footStyOpts.height || pageStyObj.marginBottom};padding:0 ${pageStyObj.marginLeft} 0 ${pageStyObj.marginRight};text-align:${footStyOpts.textAlign || 'left'};}`, '.vxe-print-page-break--content{flex-grow:1;overflow:hidden;}', `.vxe-print-page-break--footer-page-number{font-size:${pnStyOpts.fontSize || '1.2em'};color:${pnStyOpts.color || defaultFontColor};text-align:${opts.footerAlign || pnStyOpts.textAlign || 'center'};}`, '</style>', '<style>.vxe-table{white-space:pre;}</style>', `<style>${defaultHtmlStyle}</style>`, isPbMode ? '<style>body{margin:0;}</style>' : '', customStyle ? `<style>${customStyle}</style>` : '', '</head>', '<body>', `${printHtml}`, '</body>', '</html>'].join('');
 }
 function handlePrint(opts, printHtml = '') {
   const {