vxe-pc-ui 4.10.22 → 4.10.24

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (41) hide show
  1. package/es/date-panel/src/date-panel.js +1 -1
  2. package/es/date-range-picker/src/date-range-picker.js +6 -0
  3. package/es/icon/style.css +1 -1
  4. package/es/style.css +1 -1
  5. package/es/style.min.css +1 -1
  6. package/es/ui/index.js +1 -1
  7. package/es/ui/src/log.js +1 -1
  8. package/es/upload/src/upload.js +250 -203
  9. package/lib/date-panel/src/date-panel.js +1 -1
  10. package/lib/date-panel/src/date-panel.min.js +1 -1
  11. package/lib/date-range-picker/src/date-range-picker.js +6 -0
  12. package/lib/date-range-picker/src/date-range-picker.min.js +1 -1
  13. package/lib/icon/style/style.css +1 -1
  14. package/lib/icon/style/style.min.css +1 -1
  15. package/lib/index.umd.js +99 -13
  16. package/lib/index.umd.min.js +1 -1
  17. package/lib/style.css +1 -1
  18. package/lib/style.min.css +1 -1
  19. package/lib/ui/index.js +1 -1
  20. package/lib/ui/index.min.js +1 -1
  21. package/lib/ui/src/log.js +1 -1
  22. package/lib/ui/src/log.min.js +1 -1
  23. package/lib/upload/src/upload.js +90 -10
  24. package/lib/upload/src/upload.min.js +1 -1
  25. package/package.json +1 -1
  26. package/packages/date-panel/src/date-panel.ts +1 -1
  27. package/packages/date-range-picker/src/date-range-picker.ts +6 -0
  28. package/packages/upload/src/upload.ts +265 -219
  29. package/types/components/upload.d.ts +54 -4
  30. /package/es/icon/{iconfont.1762936771626.ttf → iconfont.1763014441538.ttf} +0 -0
  31. /package/es/icon/{iconfont.1762936771626.woff → iconfont.1763014441538.woff} +0 -0
  32. /package/es/icon/{iconfont.1762936771626.woff2 → iconfont.1763014441538.woff2} +0 -0
  33. /package/es/{iconfont.1762936771626.ttf → iconfont.1763014441538.ttf} +0 -0
  34. /package/es/{iconfont.1762936771626.woff → iconfont.1763014441538.woff} +0 -0
  35. /package/es/{iconfont.1762936771626.woff2 → iconfont.1763014441538.woff2} +0 -0
  36. /package/lib/icon/style/{iconfont.1762936771626.ttf → iconfont.1763014441538.ttf} +0 -0
  37. /package/lib/icon/style/{iconfont.1762936771626.woff → iconfont.1763014441538.woff} +0 -0
  38. /package/lib/icon/style/{iconfont.1762936771626.woff2 → iconfont.1763014441538.woff2} +0 -0
  39. /package/lib/{iconfont.1762936771626.ttf → iconfont.1763014441538.ttf} +0 -0
  40. /package/lib/{iconfont.1762936771626.woff → iconfont.1763014441538.woff} +0 -0
  41. /package/lib/{iconfont.1762936771626.woff2 → iconfont.1763014441538.woff2} +0 -0
package/es/upload/src/upload.js CHANGED
@@ -1,4 +1,4 @@
1
- import { ref, h, reactive, watch, computed, TransitionGroup, inject, onUnmounted, onMounted } from 'vue';
1
+ import { ref, h, reactive, watch, computed, TransitionGroup, inject, onUnmounted, onMounted, nextTick } from 'vue';
2
2
  import { defineVxeComponent } from '../../ui/src/comp';
3
3
  import XEUtils from 'xe-utils';
4
4
  import { VxeUI, getConfig, getI18n, getIcon, useSize, createEvent, globalEvents, renderEmptyElement } from '../../ui';
@@ -190,7 +190,8 @@ export default defineVxeComponent({
190
190
  'download-fail',
191
191
  'upload-success',
192
192
  'upload-error',
193
- 'sort-dragend'
193
+ 'sort-dragend',
194
+ 'more-visible'
194
195
  ],
195
196
  setup(props, context) {
196
197
  const { emit, slots } = context;
@@ -214,6 +215,7 @@ export default defineVxeComponent({
214
215
  dragTipText: ''
215
216
  });
216
217
  const internalData = {
218
+ moreId: XEUtils.uniqueId('upload'),
217
219
  imagePreviewTypes: ['jpg', 'jpeg', 'png', 'gif'],
218
220
  prevDragIndex: -1
219
221
  // prevDragPos: ''
@@ -895,11 +897,13 @@ export default defineVxeComponent({
895
897
  });
896
898
  return files;
897
899
  };
898
- const handleMoreEvent = () => {
900
+ const handleMoreEvent = (evntParams) => {
899
901
  const formReadonly = computeFormReadonly.value;
900
902
  const isImage = computeIsImage.value;
903
+ const evnt = evntParams.$event;
901
904
  if (VxeUI.modal) {
902
905
  VxeUI.modal.open({
906
+ id: internalData.moreId,
903
907
  title: formReadonly ? getI18n('vxe.upload.morePopup.readTitle') : getI18n(`vxe.upload.morePopup.${isImage ? 'imageTitle' : 'fileTitle'}`),
904
908
  width: 660,
905
909
  height: 500,
@@ -913,6 +917,7 @@ export default defineVxeComponent({
913
917
  const { isActivated, isDragMove, isDragUploadStatus, dragIndex } = reactData;
914
918
  const { fileList } = reactData;
915
919
  const isDisabled = computeIsDisabled.value;
920
+ const moreContSlot = slots.moreContent || slots['more-content'];
916
921
  const ons = {};
917
922
  if (dragToUpload && dragIndex === -1) {
918
923
  ons.onDragover = handleUploadDragoverEvent;
@@ -925,56 +930,64 @@ export default defineVxeComponent({
925
930
  'is--active': isActivated,
926
931
  'show--error': showErrorStatus,
927
932
  'is--drag': isDragUploadStatus
928
- }] }, ons), [
929
- isImage
930
- ? (dragSort
931
- ? h(TransitionGroup, {
932
- name: `vxe-upload--drag-list${isDragMove ? '' : '-disabled'}`,
933
- tag: 'div',
934
- class: 'vxe-upload--image-more-list'
935
- }, {
936
- default: () => renderImageItemList(fileList, true).concat(renderImageAction(true))
937
- })
938
- : h('div', {
939
- class: 'vxe-upload--image-more-list'
940
- }, renderImageItemList(fileList, true).concat(renderImageAction(true))))
941
- : h('div', {
942
- class: 'vxe-upload--file-more-list'
943
- }, [
944
- renderFileAction(true),
945
- dragSort
933
+ }] }, ons), moreContSlot
934
+ ? getSlotVNs(moreContSlot({ options: fileList }))
935
+ : [
936
+ isImage
937
+ ? (dragSort
946
938
  ? h(TransitionGroup, {
947
939
  name: `vxe-upload--drag-list${isDragMove ? '' : '-disabled'}`,
948
940
  tag: 'div',
949
- class: 'vxe-upload--file-list'
941
+ class: 'vxe-upload--image-more-list'
950
942
  }, {
951
- default: () => renderFileItemList(fileList, false)
943
+ default: () => renderImageItemList(fileList, true).concat(renderImageAction(true))
952
944
  })
953
945
  : h('div', {
954
- class: 'vxe-upload--file-list'
955
- }, renderFileItemList(fileList, true))
956
- ]),
957
- dragSort
958
- ? h('div', {
959
- ref: refModalDragLineElem,
960
- class: 'vxe-upload--drag-line'
961
- })
962
- : renderEmptyElement($xeUpload),
963
- isDragUploadStatus
964
- ? h('div', {
965
- class: 'vxe-upload--drag-placeholder'
966
- }, getI18n('vxe.upload.dragPlaceholder'))
967
- : renderEmptyElement($xeUpload)
968
- ]);
946
+ class: 'vxe-upload--image-more-list'
947
+ }, renderImageItemList(fileList, true).concat(renderImageAction(true))))
948
+ : h('div', {
949
+ class: 'vxe-upload--file-more-list'
950
+ }, [
951
+ renderFileAction(true),
952
+ dragSort
953
+ ? h(TransitionGroup, {
954
+ name: `vxe-upload--drag-list${isDragMove ? '' : '-disabled'}`,
955
+ tag: 'div',
956
+ class: 'vxe-upload--file-list'
957
+ }, {
958
+ default: () => renderFileItemList(fileList, false)
959
+ })
960
+ : h('div', {
961
+ class: 'vxe-upload--file-list'
962
+ }, renderFileItemList(fileList, true))
963
+ ]),
964
+ dragSort
965
+ ? h('div', {
966
+ ref: refModalDragLineElem,
967
+ class: 'vxe-upload--drag-line'
968
+ })
969
+ : renderEmptyElement($xeUpload),
970
+ isDragUploadStatus
971
+ ? h('div', {
972
+ class: 'vxe-upload--drag-placeholder'
973
+ }, getI18n('vxe.upload.dragPlaceholder'))
974
+ : renderEmptyElement($xeUpload)
975
+ ]);
969
976
  }
970
977
  },
971
978
  onShow() {
972
979
  reactData.showMorePopup = true;
973
980
  },
974
- onHide() {
981
+ onHide({ $event }) {
975
982
  reactData.showMorePopup = false;
983
+ if ($event) {
984
+ dispatchEvent('more-visible', { visible: false }, $event);
985
+ }
976
986
  }
977
987
  });
988
+ if (evnt) {
989
+ dispatchEvent('more-visible', { visible: true }, evnt);
990
+ }
978
991
  }
979
992
  };
980
993
  const showDropTip = (evnt, dragEl, dragPos) => {
@@ -1157,18 +1170,37 @@ export default defineVxeComponent({
1157
1170
  return Promise.all(allPendingList.splice(0, msNum).map(handleSubmit)).then(() => {
1158
1171
  // 完成
1159
1172
  });
1173
+ },
1174
+ getMoreVisible() {
1175
+ return reactData.showMorePopup;
1176
+ },
1177
+ openMore() {
1178
+ handleMoreEvent({ $event: new Event('click') });
1179
+ return nextTick();
1180
+ },
1181
+ openMoreByEvent(evnt) {
1182
+ handleMoreEvent({ $event: evnt });
1183
+ return nextTick();
1184
+ },
1185
+ closeMore() {
1186
+ if (VxeUI.modal) {
1187
+ VxeUI.modal.close(internalData.moreId);
1188
+ }
1189
+ return nextTick();
1160
1190
  }
1161
1191
  };
1162
1192
  const uploadPrivateMethods = {};
1163
1193
  Object.assign($xeUpload, uploadMethods, uploadPrivateMethods);
1164
1194
  const renderFileItemList = (currList, isMoreView) => {
1165
1195
  const { showRemoveButton, showDownloadButton, showProgress, progressText, showPreview, showErrorStatus, dragSort, autoSubmit, showSubmitButton } = props;
1166
- const { fileCacheMaps } = reactData;
1196
+ const { fileList, fileCacheMaps } = reactData;
1167
1197
  const isDisabled = computeIsDisabled.value;
1168
1198
  const formReadonly = computeFormReadonly.value;
1169
1199
  const nameProp = computeNameProp.value;
1170
1200
  const typeProp = computeTypeProp.value;
1201
+ const optionSlot = slots.option;
1171
1202
  const cornerSlot = slots.corner;
1203
+ const nameSlot = slots.name;
1172
1204
  const ons = {};
1173
1205
  if (dragSort && currList.length > 1) {
1174
1206
  ons.onDragstart = handleDragSortDragstartEvent;
@@ -1192,90 +1224,93 @@ export default defineVxeComponent({
1192
1224
  'is--loading': isLoading,
1193
1225
  'is--pending': isPending,
1194
1226
  'is--error': isError
1195
- }], fileid: fileKey, draggable: dragSort ? true : null }, ons), [
1196
- h('div', {
1197
- class: 'vxe-upload--file-item-icon'
1198
- }, [
1199
- h('i', {
1200
- class: getIcon()[`UPLOAD_FILE_TYPE_${`${item[typeProp]}`.toLocaleUpperCase()}`] || getIcon().UPLOAD_FILE_TYPE_DEFAULT
1201
- })
1202
- ]),
1203
- h('div', {
1204
- class: 'vxe-upload--file-item-name',
1205
- title: fileName,
1206
- onClick(evnt) {
1207
- if (!isLoading && !isError) {
1208
- handlePreviewFileEvent(evnt, item);
1209
- }
1210
- }
1211
- }, fileName),
1212
- isLoading
1213
- ? h('div', {
1214
- class: 'vxe-upload--file-item-loading-icon'
1227
+ }], fileid: fileKey, draggable: dragSort ? true : null }, ons), optionSlot
1228
+ ? getSlotVNs(optionSlot({ option: item, isMoreView, options: fileList }))
1229
+ : [
1230
+ h('div', {
1231
+ class: 'vxe-upload--file-item-icon'
1215
1232
  }, [
1216
1233
  h('i', {
1217
- class: getIcon().UPLOAD_LOADING
1234
+ class: getIcon()[`UPLOAD_FILE_TYPE_${`${item[typeProp]}`.toLocaleUpperCase()}`] || getIcon().UPLOAD_FILE_TYPE_DEFAULT
1218
1235
  })
1219
- ])
1220
- : renderEmptyElement($xeUpload),
1221
- showProgress && isLoading && cacheItem
1222
- ? h('div', {
1223
- class: 'vxe-upload--file-item-loading-text'
1224
- }, progressText ? XEUtils.toFormatString(`${XEUtils.isFunction(progressText) ? progressText({}) : progressText}`, { percent: cacheItem.percent }) : getI18n('vxe.upload.uploadProgress', [cacheItem.percent]))
1225
- : renderEmptyElement($xeUpload),
1226
- !isLoading && ((isError && showErrorStatus) || (isPending && showSubmitButton && !autoSubmit))
1227
- ? h('div', {
1228
- class: 'vxe-upload--file-item-rebtn'
1229
- }, [
1230
- h(VxeButtonComponent, {
1231
- icon: isError ? getIcon().UPLOAD_IMAGE_RE_UPLOAD : getIcon().UPLOAD_IMAGE_UPLOAD,
1232
- mode: 'text',
1233
- status: 'primary',
1234
- content: isError ? getI18n('vxe.upload.reUpload') : getI18n('vxe.upload.manualUpload'),
1235
- onClick() {
1236
- handleReUpload(item);
1236
+ ]),
1237
+ h('div', {
1238
+ class: 'vxe-upload--file-item-name',
1239
+ title: fileName,
1240
+ onClick(evnt) {
1241
+ if (!isLoading && !isError) {
1242
+ handlePreviewFileEvent(evnt, item);
1237
1243
  }
1238
- })
1239
- ])
1240
- : renderEmptyElement($xeUpload),
1241
- h('div', {
1242
- class: 'vxe-upload--file-item-btn-wrapper'
1243
- }, [
1244
- cornerSlot
1245
- ? h('div', {
1246
- class: 'vxe-upload--file-item-corner'
1247
- }, getSlotVNs(cornerSlot({ option: item, isMoreView, readonly: formReadonly })))
1248
- : renderEmptyElement($xeUpload),
1249
- showDownloadButton && !(isLoading || isPending)
1244
+ }
1245
+ }, nameSlot ? getSlotVNs(nameSlot({ option: item, isMoreView, options: fileList })) : fileName),
1246
+ isLoading
1250
1247
  ? h('div', {
1251
- class: 'vxe-upload--file-item-download-btn',
1252
- onClick(evnt) {
1253
- downloadFileEvent(evnt, item);
1254
- }
1248
+ class: 'vxe-upload--file-item-loading-icon'
1255
1249
  }, [
1256
1250
  h('i', {
1257
- class: getIcon().UPLOAD_FILE_DOWNLOAD
1251
+ class: getIcon().UPLOAD_LOADING
1258
1252
  })
1259
1253
  ])
1260
1254
  : renderEmptyElement($xeUpload),
1261
- showRemoveButton && !formReadonly && !isDisabled && !isLoading
1255
+ showProgress && isLoading && cacheItem
1262
1256
  ? h('div', {
1263
- class: 'vxe-upload--file-item-remove-btn',
1264
- onClick(evnt) {
1265
- removeFileEvent(evnt, item, index);
1266
- }
1257
+ class: 'vxe-upload--file-item-loading-text'
1258
+ }, progressText ? XEUtils.toFormatString(`${XEUtils.isFunction(progressText) ? progressText({}) : progressText}`, { percent: cacheItem.percent }) : getI18n('vxe.upload.uploadProgress', [cacheItem.percent]))
1259
+ : renderEmptyElement($xeUpload),
1260
+ !isLoading && ((isError && showErrorStatus) || (isPending && showSubmitButton && !autoSubmit))
1261
+ ? h('div', {
1262
+ class: 'vxe-upload--file-item-rebtn'
1267
1263
  }, [
1268
- h('i', {
1269
- class: getIcon().UPLOAD_FILE_REMOVE
1264
+ h(VxeButtonComponent, {
1265
+ icon: isError ? getIcon().UPLOAD_IMAGE_RE_UPLOAD : getIcon().UPLOAD_IMAGE_UPLOAD,
1266
+ mode: 'text',
1267
+ status: 'primary',
1268
+ content: isError ? getI18n('vxe.upload.reUpload') : getI18n('vxe.upload.manualUpload'),
1269
+ onClick() {
1270
+ handleReUpload(item);
1271
+ }
1270
1272
  })
1271
1273
  ])
1272
- : renderEmptyElement($xeUpload)
1273
- ])
1274
- ]);
1274
+ : renderEmptyElement($xeUpload),
1275
+ h('div', {
1276
+ class: 'vxe-upload--file-item-btn-wrapper'
1277
+ }, [
1278
+ cornerSlot
1279
+ ? h('div', {
1280
+ class: 'vxe-upload--file-item-corner'
1281
+ }, getSlotVNs(cornerSlot({ option: item, isMoreView, options: fileList, readonly: formReadonly })))
1282
+ : renderEmptyElement($xeUpload),
1283
+ showDownloadButton && !(isLoading || isPending)
1284
+ ? h('div', {
1285
+ class: 'vxe-upload--file-item-download-btn',
1286
+ onClick(evnt) {
1287
+ downloadFileEvent(evnt, item);
1288
+ }
1289
+ }, [
1290
+ h('i', {
1291
+ class: getIcon().UPLOAD_FILE_DOWNLOAD
1292
+ })
1293
+ ])
1294
+ : renderEmptyElement($xeUpload),
1295
+ showRemoveButton && !formReadonly && !isDisabled && !isLoading
1296
+ ? h('div', {
1297
+ class: 'vxe-upload--file-item-remove-btn',
1298
+ onClick(evnt) {
1299
+ removeFileEvent(evnt, item, index);
1300
+ }
1301
+ }, [
1302
+ h('i', {
1303
+ class: getIcon().UPLOAD_FILE_REMOVE
1304
+ })
1305
+ ])
1306
+ : renderEmptyElement($xeUpload)
1307
+ ])
1308
+ ]);
1275
1309
  });
1276
1310
  };
1277
1311
  const renderFileAction = (isMoreView) => {
1278
1312
  const { showUploadButton, buttonText, buttonIcon, showButtonText, showButtonIcon, autoHiddenButton } = props;
1313
+ const { fileList } = reactData;
1279
1314
  const isDisabled = computeIsDisabled.value;
1280
1315
  const formReadonly = computeFormReadonly.value;
1281
1316
  const showTipText = computedShowTipText.value;
@@ -1295,7 +1330,7 @@ export default defineVxeComponent({
1295
1330
  class: 'vxe-upload--file-action-btn',
1296
1331
  onClick: clickEvent
1297
1332
  }, defaultSlot
1298
- ? getSlotVNs(defaultSlot({ $upload: $xeUpload }))
1333
+ ? getSlotVNs(defaultSlot({ isMoreView, options: fileList, $upload: $xeUpload }))
1299
1334
  : [
1300
1335
  h(VxeButtonComponent, {
1301
1336
  class: 'vxe-upload--file-action-button',
@@ -1307,7 +1342,7 @@ export default defineVxeComponent({
1307
1342
  showTipText && (defTipText || tipSlot)
1308
1343
  ? h('div', {
1309
1344
  class: 'vxe-upload--file-action-tip'
1310
- }, tipSlot ? getSlotVNs(tipSlot({ $upload: $xeUpload })) : `${defTipText}`)
1345
+ }, tipSlot ? getSlotVNs(tipSlot({ isMoreView, options: fileList, $upload: $xeUpload })) : `${defTipText}`)
1311
1346
  : renderEmptyElement($xeUpload)
1312
1347
  ]);
1313
1348
  };
@@ -1317,6 +1352,7 @@ export default defineVxeComponent({
1317
1352
  const moreOpts = computeMoreOpts.value;
1318
1353
  const { maxCount, showMoreButton, layout } = moreOpts;
1319
1354
  const isHorizontal = layout === 'horizontal';
1355
+ const moreBtnSlot = slots.moreButton || slots['more-button'];
1320
1356
  let currList = fileList;
1321
1357
  let overMaxNum = 0;
1322
1358
  if (maxCount && fileList.length > maxCount) {
@@ -1353,14 +1389,16 @@ export default defineVxeComponent({
1353
1389
  showMoreButton && overMaxNum
1354
1390
  ? h('div', {
1355
1391
  class: 'vxe-upload--file-over-more'
1356
- }, [
1357
- h(VxeButtonComponent, {
1358
- mode: 'text',
1359
- content: getI18n('vxe.upload.moreBtnText', [fileList.length]),
1360
- status: 'primary',
1361
- onClick: handleMoreEvent
1362
- })
1363
- ])
1392
+ }, moreBtnSlot
1393
+ ? getSlotVNs(moreBtnSlot({ options: fileList }))
1394
+ : [
1395
+ h(VxeButtonComponent, {
1396
+ mode: 'text',
1397
+ content: getI18n('vxe.upload.moreBtnText', [fileList.length]),
1398
+ status: 'primary',
1399
+ onClick: handleMoreEvent
1400
+ })
1401
+ ])
1364
1402
  : renderEmptyElement($xeUpload),
1365
1403
  showMoreButton && moreConfig && isHorizontal
1366
1404
  ? renderFileAction(false)
@@ -1374,11 +1412,12 @@ export default defineVxeComponent({
1374
1412
  };
1375
1413
  const renderImageItemList = (currList, isMoreView) => {
1376
1414
  const { showRemoveButton, showProgress, progressText, showPreview, showErrorStatus, dragSort, autoSubmit, showSubmitButton } = props;
1377
- const { fileCacheMaps } = reactData;
1415
+ const { fileList, fileCacheMaps } = reactData;
1378
1416
  const isDisabled = computeIsDisabled.value;
1379
1417
  const formReadonly = computeFormReadonly.value;
1380
1418
  const imageOpts = computeImageOpts.value;
1381
1419
  const imgStyle = computeImgStyle.value;
1420
+ const optionSlot = slots.option;
1382
1421
  const cornerSlot = slots.corner;
1383
1422
  const ons = {
1384
1423
  onMousedown: handleItemMousedownEvent
@@ -1405,89 +1444,92 @@ export default defineVxeComponent({
1405
1444
  'is--loading': isLoading,
1406
1445
  'is--pending': isPending,
1407
1446
  'is--error': isError
1408
- }], fileid: fileKey, draggable: dragSort ? true : null }, ons), [
1409
- h('div', {
1410
- class: 'vxe-upload--image-item-box',
1411
- style: isMoreView ? null : imgStyle,
1412
- onClick(evnt) {
1413
- if (!isLoading && !isError) {
1414
- handlePreviewImageEvent(evnt, item, index);
1415
- }
1416
- }
1417
- }, [
1418
- isLoading && cacheItem
1419
- ? h('div', {
1420
- class: 'vxe-upload--image-item-loading'
1421
- }, [
1422
- h('div', {
1423
- class: 'vxe-upload--image-item-loading-icon'
1424
- }, [
1425
- h('i', {
1426
- class: getIcon().UPLOAD_LOADING
1427
- })
1428
- ]),
1429
- showProgress
1430
- ? h('div', {
1431
- class: 'vxe-upload--image-item-loading-text'
1432
- }, progressText ? XEUtils.toFormatString(`${XEUtils.isFunction(progressText) ? progressText({}) : progressText}`, { percent: cacheItem.percent }) : getI18n('vxe.upload.uploadProgress', [cacheItem.percent]))
1433
- : renderEmptyElement($xeUpload)
1434
- ])
1435
- : renderEmptyElement($xeUpload),
1436
- h('div', {
1437
- class: 'vxe-upload--image-item-img-wrapper',
1438
- title: getI18n('vxe.upload.viewItemTitle')
1439
- }, [
1440
- h('img', {
1441
- class: 'vxe-upload--image-item-img',
1442
- src: getThumbnailFileUrl(item)
1443
- })
1444
- ]),
1445
- !isLoading && ((isError && showErrorStatus) || (isPending && showSubmitButton && !autoSubmit))
1446
- ? h('div', {
1447
- class: 'vxe-upload--image-item-rebtn'
1448
- }, [
1449
- h(VxeButtonComponent, {
1450
- icon: isError ? getIcon().UPLOAD_IMAGE_RE_UPLOAD : getIcon().UPLOAD_IMAGE_UPLOAD,
1451
- mode: 'text',
1452
- status: 'primary',
1453
- content: isError ? getI18n('vxe.upload.reUpload') : getI18n('vxe.upload.manualUpload'),
1454
- onClick() {
1455
- handleReUpload(item);
1456
- }
1457
- })
1458
- ])
1459
- : renderEmptyElement($xeUpload),
1447
+ }], fileid: fileKey, draggable: dragSort ? true : null }, ons), optionSlot
1448
+ ? getSlotVNs(optionSlot({ option: item, isMoreView, options: fileList }))
1449
+ : [
1460
1450
  h('div', {
1461
- class: 'vxe-upload--image-item-btn-wrapper',
1451
+ class: 'vxe-upload--image-item-box',
1452
+ style: isMoreView ? null : imgStyle,
1462
1453
  onClick(evnt) {
1463
- evnt.stopPropagation();
1454
+ if (!isLoading && !isError) {
1455
+ handlePreviewImageEvent(evnt, item, index);
1456
+ }
1464
1457
  }
1465
1458
  }, [
1466
- cornerSlot
1459
+ isLoading && cacheItem
1467
1460
  ? h('div', {
1468
- class: 'vxe-upload--file-item-corner'
1469
- }, getSlotVNs(cornerSlot({ option: item, isMoreView, readonly: formReadonly })))
1461
+ class: 'vxe-upload--image-item-loading'
1462
+ }, [
1463
+ h('div', {
1464
+ class: 'vxe-upload--image-item-loading-icon'
1465
+ }, [
1466
+ h('i', {
1467
+ class: getIcon().UPLOAD_LOADING
1468
+ })
1469
+ ]),
1470
+ showProgress
1471
+ ? h('div', {
1472
+ class: 'vxe-upload--image-item-loading-text'
1473
+ }, progressText ? XEUtils.toFormatString(`${XEUtils.isFunction(progressText) ? progressText({}) : progressText}`, { percent: cacheItem.percent }) : getI18n('vxe.upload.uploadProgress', [cacheItem.percent]))
1474
+ : renderEmptyElement($xeUpload)
1475
+ ])
1470
1476
  : renderEmptyElement($xeUpload),
1471
- showRemoveButton && !formReadonly && !isDisabled && !isLoading
1477
+ h('div', {
1478
+ class: 'vxe-upload--image-item-img-wrapper',
1479
+ title: getI18n('vxe.upload.viewItemTitle')
1480
+ }, [
1481
+ h('img', {
1482
+ class: 'vxe-upload--image-item-img',
1483
+ src: getThumbnailFileUrl(item)
1484
+ })
1485
+ ]),
1486
+ !isLoading && ((isError && showErrorStatus) || (isPending && showSubmitButton && !autoSubmit))
1472
1487
  ? h('div', {
1473
- class: 'vxe-upload--image-item-remove-btn',
1474
- onClick(evnt) {
1475
- evnt.stopPropagation();
1476
- removeFileEvent(evnt, item, index);
1477
- }
1488
+ class: 'vxe-upload--image-item-rebtn'
1478
1489
  }, [
1479
- h('i', {
1480
- class: getIcon().UPLOAD_IMAGE_REMOVE
1490
+ h(VxeButtonComponent, {
1491
+ icon: isError ? getIcon().UPLOAD_IMAGE_RE_UPLOAD : getIcon().UPLOAD_IMAGE_UPLOAD,
1492
+ mode: 'text',
1493
+ status: 'primary',
1494
+ content: isError ? getI18n('vxe.upload.reUpload') : getI18n('vxe.upload.manualUpload'),
1495
+ onClick() {
1496
+ handleReUpload(item);
1497
+ }
1481
1498
  })
1482
1499
  ])
1483
- : renderEmptyElement($xeUpload)
1500
+ : renderEmptyElement($xeUpload),
1501
+ h('div', {
1502
+ class: 'vxe-upload--image-item-btn-wrapper',
1503
+ onClick(evnt) {
1504
+ evnt.stopPropagation();
1505
+ }
1506
+ }, [
1507
+ cornerSlot
1508
+ ? h('div', {
1509
+ class: 'vxe-upload--file-item-corner'
1510
+ }, getSlotVNs(cornerSlot({ option: item, isMoreView, options: fileList, readonly: formReadonly })))
1511
+ : renderEmptyElement($xeUpload),
1512
+ showRemoveButton && !formReadonly && !isDisabled && !isLoading
1513
+ ? h('div', {
1514
+ class: 'vxe-upload--image-item-remove-btn',
1515
+ onClick(evnt) {
1516
+ evnt.stopPropagation();
1517
+ removeFileEvent(evnt, item, index);
1518
+ }
1519
+ }, [
1520
+ h('i', {
1521
+ class: getIcon().UPLOAD_IMAGE_REMOVE
1522
+ })
1523
+ ])
1524
+ : renderEmptyElement($xeUpload)
1525
+ ])
1484
1526
  ])
1485
- ])
1486
- ]);
1527
+ ]);
1487
1528
  });
1488
1529
  };
1489
1530
  const renderImageAction = (isMoreView) => {
1490
1531
  const { showUploadButton, buttonText, buttonIcon, showButtonText, showButtonIcon, autoHiddenButton } = props;
1532
+ const { fileList } = reactData;
1491
1533
  const formReadonly = computeFormReadonly.value;
1492
1534
  const showTipText = computedShowTipText.value;
1493
1535
  const defTipText = computedDefTipText.value;
@@ -1506,7 +1548,7 @@ export default defineVxeComponent({
1506
1548
  class: 'vxe-upload--image-action-btn',
1507
1549
  onClick: clickEvent
1508
1550
  }, defaultSlot
1509
- ? defaultSlot({ $upload: $xeUpload })
1551
+ ? defaultSlot({ isMoreView, options: fileList, $upload: $xeUpload })
1510
1552
  : [
1511
1553
  h('div', {
1512
1554
  class: 'vxe-upload--image-action-box',
@@ -1529,7 +1571,7 @@ export default defineVxeComponent({
1529
1571
  showTipText && (defTipText || tipSlot)
1530
1572
  ? h('div', {
1531
1573
  class: 'vxe-upload--image-action-hint'
1532
- }, tipSlot ? getSlotVNs(tipSlot({ $upload: $xeUpload })) : `${defTipText}`)
1574
+ }, tipSlot ? getSlotVNs(tipSlot({ isMoreView, options: fileList, $upload: $xeUpload })) : `${defTipText}`)
1533
1575
  : renderEmptyElement($xeUpload)
1534
1576
  ])
1535
1577
  ])
@@ -1539,6 +1581,7 @@ export default defineVxeComponent({
1539
1581
  const { showList, dragSort } = props;
1540
1582
  const { fileList, isDragMove } = reactData;
1541
1583
  const moreOpts = computeMoreOpts.value;
1584
+ const moreBtnSlot = slots.moreButton || slots['more-button'];
1542
1585
  const { maxCount, showMoreButton } = moreOpts;
1543
1586
  let currList = fileList;
1544
1587
  let overMaxNum = 0;
@@ -1562,14 +1605,16 @@ export default defineVxeComponent({
1562
1605
  ? h('div', {
1563
1606
  key: 'om',
1564
1607
  class: 'vxe-upload--image-over-more'
1565
- }, [
1566
- h(VxeButtonComponent, {
1567
- mode: 'text',
1568
- content: getI18n('vxe.upload.moreBtnText', [fileList.length]),
1569
- status: 'primary',
1570
- onClick: handleMoreEvent
1571
- })
1572
- ])
1608
+ }, moreBtnSlot
1609
+ ? getSlotVNs(moreBtnSlot({ options: fileList }))
1610
+ : [
1611
+ h(VxeButtonComponent, {
1612
+ mode: 'text',
1613
+ content: getI18n('vxe.upload.moreBtnText', [fileList.length]),
1614
+ status: 'primary',
1615
+ onClick: handleMoreEvent
1616
+ })
1617
+ ])
1573
1618
  : renderEmptyElement($xeUpload),
1574
1619
  renderImageAction(false)
1575
1620
  ])
@@ -1580,14 +1625,16 @@ export default defineVxeComponent({
1580
1625
  showMoreButton && overMaxNum
1581
1626
  ? h('div', {
1582
1627
  class: 'vxe-upload--image-over-more'
1583
- }, [
1584
- h(VxeButtonComponent, {
1585
- mode: 'text',
1586
- content: getI18n('vxe.upload.moreBtnText', [fileList.length]),
1587
- status: 'primary',
1588
- onClick: handleMoreEvent
1589
- })
1590
- ])
1628
+ }, moreBtnSlot
1629
+ ? getSlotVNs(moreBtnSlot({ options: fileList }))
1630
+ : [
1631
+ h(VxeButtonComponent, {
1632
+ mode: 'text',
1633
+ content: getI18n('vxe.upload.moreBtnText', [fileList.length]),
1634
+ status: 'primary',
1635
+ onClick: handleMoreEvent
1636
+ })
1637
+ ])
1591
1638
  : renderEmptyElement($xeUpload),
1592
1639
  renderImageAction(false)
1593
1640
  ]))