vxe-table 4.7.42 → 4.7.43

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 (40) hide show
  1. package/es/style.css +1 -1
  2. package/es/style.min.css +1 -1
  3. package/es/table/module/custom/panel.js +163 -141
  4. package/es/table/render/index.js +16 -2
  5. package/es/table/style.css +3 -0
  6. package/es/table/style.min.css +1 -1
  7. package/es/toolbar/src/toolbar.js +1 -1
  8. package/es/ui/index.js +2 -2
  9. package/es/ui/src/log.js +1 -1
  10. package/es/vxe-table/style.css +3 -0
  11. package/es/vxe-table/style.min.css +1 -1
  12. package/lib/index.umd.js +76 -30
  13. package/lib/index.umd.min.js +1 -1
  14. package/lib/style.css +1 -1
  15. package/lib/style.min.css +1 -1
  16. package/lib/table/module/custom/panel.js +47 -24
  17. package/lib/table/module/custom/panel.min.js +1 -1
  18. package/lib/table/render/index.js +21 -2
  19. package/lib/table/render/index.min.js +1 -1
  20. package/lib/table/style/style.css +3 -0
  21. package/lib/table/style/style.min.css +1 -1
  22. package/lib/toolbar/src/toolbar.js +3 -1
  23. package/lib/toolbar/src/toolbar.min.js +1 -1
  24. package/lib/ui/index.js +2 -2
  25. package/lib/ui/index.min.js +1 -1
  26. package/lib/ui/src/log.js +1 -1
  27. package/lib/ui/src/log.min.js +1 -1
  28. package/lib/vxe-table/style/style.css +3 -0
  29. package/lib/vxe-table/style/style.min.css +1 -1
  30. package/package.json +2 -2
  31. package/packages/table/module/custom/panel.ts +164 -142
  32. package/packages/table/render/index.ts +36 -17
  33. package/packages/toolbar/src/toolbar.ts +1 -1
  34. package/styles/components/table-module/custom.scss +4 -1
  35. /package/es/{iconfont.1720011186898.ttf → iconfont.1720061363684.ttf} +0 -0
  36. /package/es/{iconfont.1720011186898.woff → iconfont.1720061363684.woff} +0 -0
  37. /package/es/{iconfont.1720011186898.woff2 → iconfont.1720061363684.woff2} +0 -0
  38. /package/lib/{iconfont.1720011186898.ttf → iconfont.1720061363684.ttf} +0 -0
  39. /package/lib/{iconfont.1720011186898.woff → iconfont.1720061363684.woff} +0 -0
  40. /package/lib/{iconfont.1720011186898.woff2 → iconfont.1720061363684.woff2} +0 -0
@@ -15,6 +15,7 @@ export default defineComponent({
15
15
  },
16
16
  setup(props) {
17
17
  const VxeUIModalComponent = VxeUI.getComponent('VxeModal');
18
+ const VxeUIDrawerComponent = VxeUI.getComponent('VxeDrawer');
18
19
  const VxeUIButtonComponent = VxeUI.getComponent('VxeButton');
19
20
  const VxeUIInputComponent = VxeUI.getComponent('VxeInput');
20
21
  const VxeUITooltipComponent = VxeUI.getComponent('VxeTooltip');
@@ -459,10 +460,12 @@ export default defineComponent({
459
460
  const { customStore } = props;
460
461
  const { customColumnList } = reactData;
461
462
  const customOpts = computeCustomOpts.value;
462
- const { modalOptions, allowVisible, allowSort, allowFixed, allowResizable, checkMethod, visibleMethod } = customOpts;
463
+ const { modalOptions, drawerOptions, allowVisible, allowSort, allowFixed, allowResizable, checkMethod, visibleMethod } = customOpts;
463
464
  const columnOpts = computeColumnOpts.value;
464
465
  const { maxFixedSize } = columnOpts;
466
+ const { mode } = customOpts;
465
467
  const modalOpts = Object.assign({}, modalOptions);
468
+ const drawerOpts = Object.assign({}, drawerOptions);
466
469
  const isMaxFixedColumn = computeIsMaxFixedColumn.value;
467
470
  const trVNs = [];
468
471
  XEUtils.eachTree(customColumnList, (column, index, items, path, parent) => {
@@ -581,15 +584,168 @@ export default defineComponent({
581
584
  });
582
585
  const isAllChecked = customStore.isAll;
583
586
  const isAllIndeterminate = customStore.isIndeterminate;
587
+ const scopedSlots = {
588
+ default: () => {
589
+ return h('div', {
590
+ ref: bodyElemRef,
591
+ class: 'vxe-table-custom-popup--body'
592
+ }, [
593
+ h('div', {
594
+ class: 'vxe-table-custom-popup--table-wrapper'
595
+ }, [
596
+ h('table', {}, [
597
+ h('colgroup', {}, [
598
+ allowVisible
599
+ ? h('col', {
600
+ style: {
601
+ width: '80px'
602
+ }
603
+ })
604
+ : createCommentVNode(),
605
+ allowSort
606
+ ? h('col', {
607
+ style: {
608
+ width: '80px'
609
+ }
610
+ })
611
+ : createCommentVNode(),
612
+ h('col', {
613
+ style: {
614
+ minWidth: '120px'
615
+ }
616
+ }),
617
+ allowResizable
618
+ ? h('col', {
619
+ style: {
620
+ width: '140px'
621
+ }
622
+ })
623
+ : createCommentVNode(),
624
+ allowFixed
625
+ ? h('col', {
626
+ style: {
627
+ width: '200px'
628
+ }
629
+ })
630
+ : createCommentVNode()
631
+ ]),
632
+ h('thead', {}, [
633
+ h('tr', {}, [
634
+ allowVisible
635
+ ? h('th', {}, [
636
+ h('div', {
637
+ class: ['vxe-table-custom--checkbox-option', {
638
+ 'is--checked': isAllChecked,
639
+ 'is--indeterminate': isAllIndeterminate
640
+ }],
641
+ title: getI18n('vxe.table.allTitle'),
642
+ onClick: allCustomEvent
643
+ }, [
644
+ h('span', {
645
+ class: ['vxe-checkbox--icon', isAllIndeterminate ? getIcon().TABLE_CHECKBOX_INDETERMINATE : (isAllChecked ? getIcon().TABLE_CHECKBOX_CHECKED : getIcon().TABLE_CHECKBOX_UNCHECKED)]
646
+ }),
647
+ h('span', {
648
+ class: 'vxe-checkbox--label'
649
+ }, getI18n('vxe.toolbar.customAll'))
650
+ ])
651
+ ])
652
+ : createCommentVNode(),
653
+ allowSort
654
+ ? h('th', {}, [
655
+ h('span', {
656
+ class: 'vxe-table-custom-popup--table-sort-help-title'
657
+ }, getI18n('vxe.custom.setting.colSort')),
658
+ VxeUITooltipComponent
659
+ ? h(VxeUITooltipComponent, {
660
+ enterable: true,
661
+ content: getI18n('vxe.custom.setting.sortHelpTip')
662
+ }, {
663
+ default: () => {
664
+ return h('i', {
665
+ class: 'vxe-table-custom-popup--table-sort-help-icon vxe-icon-question-circle-fill'
666
+ });
667
+ }
668
+ })
669
+ : createCommentVNode()
670
+ ])
671
+ : createCommentVNode(),
672
+ h('th', {}, getI18n('vxe.custom.setting.colTitle')),
673
+ allowResizable
674
+ ? h('th', {}, getI18n('vxe.custom.setting.colResizable'))
675
+ : createCommentVNode(),
676
+ allowFixed
677
+ ? h('th', {}, getI18n(`vxe.custom.setting.${maxFixedSize ? 'colFixedMax' : 'colFixed'}`, [maxFixedSize]))
678
+ : createCommentVNode()
679
+ ])
680
+ ]),
681
+ h(TransitionGroup, {
682
+ class: 'vxe-table-custom--body',
683
+ tag: 'tbody',
684
+ name: 'vxe-table-custom--list'
685
+ }, {
686
+ default: () => trVNs
687
+ })
688
+ ])
689
+ ]),
690
+ h('div', {
691
+ ref: dragHintElemRef,
692
+ class: 'vxe-table-custom-popup--drag-hint'
693
+ }, getI18n('vxe.custom.cstmDragTarget', [dragColumn.value ? dragColumn.value.getTitle() : '']))
694
+ ]);
695
+ },
696
+ footer: () => {
697
+ return h('div', {
698
+ class: 'vxe-table-custom-popup--footer'
699
+ }, [
700
+ VxeUIButtonComponent
701
+ ? h(VxeUIButtonComponent, {
702
+ content: customOpts.resetButtonText || getI18n('vxe.custom.cstmRestore'),
703
+ onClick: resetCustomEvent
704
+ })
705
+ : createCommentVNode(),
706
+ VxeUIButtonComponent
707
+ ? h(VxeUIButtonComponent, {
708
+ content: customOpts.resetButtonText || getI18n('vxe.custom.cstmCancel'),
709
+ onClick: cancelCustomEvent
710
+ })
711
+ : createCommentVNode(),
712
+ VxeUIButtonComponent
713
+ ? h(VxeUIButtonComponent, {
714
+ status: 'primary',
715
+ content: customOpts.confirmButtonText || getI18n('vxe.custom.cstmConfirm'),
716
+ onClick: confirmCustomEvent
717
+ })
718
+ : createCommentVNode()
719
+ ]);
720
+ }
721
+ };
722
+ if (mode === 'drawer') {
723
+ return VxeUIDrawerComponent
724
+ ? h(VxeUIDrawerComponent, {
725
+ key: 'drawer',
726
+ className: ['vxe-table-custom-drawer-wrapper', 'vxe-table--ignore-clear', drawerOpts.className || ''].join(' '),
727
+ modelValue: customStore.visible,
728
+ title: drawerOpts.title || getI18n('vxe.custom.cstmTitle'),
729
+ width: drawerOpts.width || Math.min(880, document.documentElement.clientWidth),
730
+ position: drawerOpts.position,
731
+ escClosable: !!drawerOpts.escClosable,
732
+ destroyOnClose: true,
733
+ showFooter: true,
734
+ 'onUpdate:modelValue'(value) {
735
+ customStore.visible = value;
736
+ }
737
+ }, scopedSlots)
738
+ : createCommentVNode();
739
+ }
584
740
  return VxeUIModalComponent
585
741
  ? h(VxeUIModalComponent, {
586
- key: 'popup',
587
- className: ['vxe-table-custom-popup-wrapper', 'vxe-table--ignore-clear', modalOpts.className || ''].join(' '),
742
+ key: 'modal',
743
+ className: ['vxe-table-custom-modal-wrapper', 'vxe-table--ignore-clear', modalOpts.className || ''].join(' '),
588
744
  modelValue: customStore.visible,
589
745
  title: modalOpts.title || getI18n('vxe.custom.cstmTitle'),
590
- width: modalOpts.width || '50vw',
746
+ width: modalOpts.width || Math.min(880, document.documentElement.clientWidth),
591
747
  minWidth: modalOpts.minWidth || 700,
592
- height: modalOpts.height || '50vh',
748
+ height: modalOpts.height || Math.min(680, document.documentElement.clientHeight),
593
749
  minHeight: modalOpts.minHeight || 400,
594
750
  showZoom: modalOpts.showZoom,
595
751
  showMaximize: modalOpts.showMaximize,
@@ -603,146 +759,12 @@ export default defineComponent({
603
759
  'onUpdate:modelValue'(value) {
604
760
  customStore.visible = value;
605
761
  }
606
- }, {
607
- default: () => {
608
- return h('div', {
609
- ref: bodyElemRef,
610
- class: 'vxe-table-custom-popup--body'
611
- }, [
612
- h('div', {
613
- class: 'vxe-table-custom-popup--table-wrapper'
614
- }, [
615
- h('table', {}, [
616
- h('colgroup', {}, [
617
- allowVisible
618
- ? h('col', {
619
- style: {
620
- width: '80px'
621
- }
622
- })
623
- : createCommentVNode(),
624
- allowSort
625
- ? h('col', {
626
- style: {
627
- width: '80px'
628
- }
629
- })
630
- : createCommentVNode(),
631
- h('col', {
632
- style: {
633
- minWidth: '120px'
634
- }
635
- }),
636
- allowResizable
637
- ? h('col', {
638
- style: {
639
- width: '140px'
640
- }
641
- })
642
- : createCommentVNode(),
643
- allowFixed
644
- ? h('col', {
645
- style: {
646
- width: '200px'
647
- }
648
- })
649
- : createCommentVNode()
650
- ]),
651
- h('thead', {}, [
652
- h('tr', {}, [
653
- allowVisible
654
- ? h('th', {}, [
655
- h('div', {
656
- class: ['vxe-table-custom--checkbox-option', {
657
- 'is--checked': isAllChecked,
658
- 'is--indeterminate': isAllIndeterminate
659
- }],
660
- title: getI18n('vxe.table.allTitle'),
661
- onClick: allCustomEvent
662
- }, [
663
- h('span', {
664
- class: ['vxe-checkbox--icon', isAllIndeterminate ? getIcon().TABLE_CHECKBOX_INDETERMINATE : (isAllChecked ? getIcon().TABLE_CHECKBOX_CHECKED : getIcon().TABLE_CHECKBOX_UNCHECKED)]
665
- }),
666
- h('span', {
667
- class: 'vxe-checkbox--label'
668
- }, getI18n('vxe.toolbar.customAll'))
669
- ])
670
- ])
671
- : createCommentVNode(),
672
- allowSort
673
- ? h('th', {}, [
674
- h('span', {
675
- class: 'vxe-table-custom-popup--table-sort-help-title'
676
- }, getI18n('vxe.custom.setting.colSort')),
677
- VxeUITooltipComponent
678
- ? h(VxeUITooltipComponent, {
679
- enterable: true,
680
- content: getI18n('vxe.custom.setting.sortHelpTip')
681
- }, {
682
- default: () => {
683
- return h('i', {
684
- class: 'vxe-table-custom-popup--table-sort-help-icon vxe-icon-question-circle-fill'
685
- });
686
- }
687
- })
688
- : createCommentVNode()
689
- ])
690
- : createCommentVNode(),
691
- h('th', {}, getI18n('vxe.custom.setting.colTitle')),
692
- allowResizable
693
- ? h('th', {}, getI18n('vxe.custom.setting.colResizable'))
694
- : createCommentVNode(),
695
- allowFixed
696
- ? h('th', {}, getI18n(`vxe.custom.setting.${maxFixedSize ? 'colFixedMax' : 'colFixed'}`, [maxFixedSize]))
697
- : createCommentVNode()
698
- ])
699
- ]),
700
- h(TransitionGroup, {
701
- class: 'vxe-table-custom--body',
702
- tag: 'tbody',
703
- name: 'vxe-table-custom--list'
704
- }, {
705
- default: () => trVNs
706
- })
707
- ])
708
- ]),
709
- h('div', {
710
- ref: dragHintElemRef,
711
- class: 'vxe-table-custom-popup--drag-hint'
712
- }, getI18n('vxe.custom.cstmDragTarget', [dragColumn.value ? dragColumn.value.getTitle() : '']))
713
- ]);
714
- },
715
- footer: () => {
716
- return h('div', {
717
- class: 'vxe-table-custom-popup--footer'
718
- }, [
719
- VxeUIButtonComponent
720
- ? h(VxeUIButtonComponent, {
721
- content: customOpts.resetButtonText || getI18n('vxe.custom.cstmRestore'),
722
- onClick: resetCustomEvent
723
- })
724
- : createCommentVNode(),
725
- VxeUIButtonComponent
726
- ? h(VxeUIButtonComponent, {
727
- content: customOpts.resetButtonText || getI18n('vxe.custom.cstmCancel'),
728
- onClick: cancelCustomEvent
729
- })
730
- : createCommentVNode(),
731
- VxeUIButtonComponent
732
- ? h(VxeUIButtonComponent, {
733
- status: 'primary',
734
- content: customOpts.confirmButtonText || getI18n('vxe.custom.cstmConfirm'),
735
- onClick: confirmCustomEvent
736
- })
737
- : createCommentVNode()
738
- ]);
739
- }
740
- })
762
+ }, scopedSlots)
741
763
  : createCommentVNode();
742
764
  };
743
765
  const renderVN = () => {
744
766
  const customOpts = computeCustomOpts.value;
745
- if (customOpts.mode === 'popup') {
767
+ if (['modal', 'drawer', 'popup'].includes(`${customOpts.mode}`)) {
746
768
  return renderPopupPanel();
747
769
  }
748
770
  return renderSimplePanel();
@@ -258,7 +258,7 @@ function nativeEditRender(renderOpts, params) {
258
258
  h(name, Object.assign(Object.assign(Object.assign({ class: `vxe-default-${name}` }, getNativeAttrs(renderOpts)), { value: cellValue }), getNativeEditOns(renderOpts, params)))
259
259
  ];
260
260
  }
261
- function defaultCellRender(renderOpts, params) {
261
+ function buttonCellRender(renderOpts, params) {
262
262
  return [
263
263
  h(getDefaultComponent(renderOpts), Object.assign(Object.assign({}, getCellEditProps(renderOpts, params, null)), getComponentOns(renderOpts, params)))
264
264
  ];
@@ -270,6 +270,14 @@ function defaultEditRender(renderOpts, params) {
270
270
  h(getDefaultComponent(renderOpts), Object.assign(Object.assign({}, getCellEditProps(renderOpts, params, cellValue)), getEditOns(renderOpts, params)))
271
271
  ];
272
272
  }
273
+ function radioAndCheckboxEditRender(renderOpts, params) {
274
+ const { options } = renderOpts;
275
+ const { row, column } = params;
276
+ const cellValue = getCellValue(row, column);
277
+ return [
278
+ h(getDefaultComponent(renderOpts), Object.assign(Object.assign({ options }, getCellEditProps(renderOpts, params, cellValue)), getEditOns(renderOpts, params)))
279
+ ];
280
+ }
273
281
  /**
274
282
  * 已废弃
275
283
  * @deprecated
@@ -525,7 +533,7 @@ renderer.mixin({
525
533
  autofocus: '.vxe-textarea--inner'
526
534
  },
527
535
  VxeButton: {
528
- renderDefault: defaultCellRender
536
+ renderDefault: buttonCellRender
529
537
  },
530
538
  VxeButtonGroup: {
531
539
  renderDefault(renderOpts, params) {
@@ -553,6 +561,12 @@ renderer.mixin({
553
561
  defaultFilterMethod: handleFilterMethod,
554
562
  exportMethod: handleExportSelectMethod
555
563
  },
564
+ VxeRadioGroup: {
565
+ renderDefault: radioAndCheckboxEditRender
566
+ },
567
+ VxeCheckboxGroup: {
568
+ renderDefault: radioAndCheckboxEditRender
569
+ },
556
570
  VxeSwitch: {
557
571
  autofocus: '.vxe-switch--button',
558
572
  renderEdit: defaultEditRender,
@@ -352,6 +352,9 @@
352
352
  outline: none;
353
353
  }
354
354
  .vxe-table-custom--footer button:hover {
355
+ color: var(--vxe-ui-font-primary-lighten-color);
356
+ }
357
+ .vxe-table-custom--footer .btn--confirm {
355
358
  color: var(--vxe-ui-font-primary-color);
356
359
  }
357
360