@deot/vc-components 1.0.9 → 1.0.11

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 (7) hide show
  1. package/dist/index.cjs +3270 -312
  2. package/dist/index.d.ts +549 -14
  3. package/dist/index.iife.js +21302 -390
  4. package/dist/index.js +3271 -315
  5. package/dist/index.style.css +1 -1
  6. package/dist/index.umd.cjs +21302 -390
  7. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -1,11 +1,11 @@
1
1
  import { reactive, defineComponent, createVNode, ref, watch, getCurrentInstance, computed, TransitionGroup, Transition as Transition$1, h, inject, onMounted, provide, shallowRef, onUnmounted, withDirectives, vShow, createApp, onBeforeUnmount, Fragment as Fragment$1, Teleport, withModifiers, nextTick, isVNode, onBeforeMount, mergeProps, createTextVNode, toRaw, onUpdated } from 'vue';
2
- import { debounce, isEqualWith, pick, startCase, throttle, cloneDeep, kebabCase } from 'lodash-es';
2
+ import { debounce, isEqualWith, pick, startCase, throttle, cloneDeep, max, merge as merge$1, isEmpty as isEmpty$1, kebabCase } from 'lodash-es';
3
3
  import { Resize } from '@deot/helper-resize';
4
4
  import { Utils as Utils$1, IS_SERVER as IS_SERVER$1 } from '@deot/vc-shared';
5
5
  import * as Utils from '@deot/helper-utils';
6
- import { getUid, preZero, raf, getPropByPath, throttle as throttle$1 } from '@deot/helper-utils';
6
+ import { getUid, preZero, raf, getPropByPath, throttle as throttle$1, hasOwn } from '@deot/helper-utils';
7
7
  import * as $ from '@deot/helper-dom';
8
- import { composedPath, scrollIntoView, prefixStyle, getStyle } from '@deot/helper-dom';
8
+ import { composedPath, scrollIntoView, prefixStyle, removeClass, addClass, hasClass, getStyle } from '@deot/helper-dom';
9
9
  import { useAttrs, useScrollbar, getInstance } from '@deot/vc-hooks';
10
10
  import { Wheel } from '@deot/helper-wheel';
11
11
  import { Validator } from '@deot/helper-validator';
@@ -13,6 +13,8 @@ import { Storage } from '@deot/helper-cache';
13
13
  import * as Load from '@deot/helper-load';
14
14
  import { style } from '@deot/helper-load';
15
15
  import { Interrupter } from '@deot/helper-scheduler';
16
+ import { concat, merge, debounce as debounce$1 } from 'lodash';
17
+ import { compose } from '@deot/helper-fp';
16
18
 
17
19
  class VcError {
18
20
  message;
@@ -67,9 +69,9 @@ const props$1q = {
67
69
 
68
70
  /** @jsxImportSource vue */
69
71
 
70
- const COMPONENT_NAME$1Z = 'vc-action-sheet';
72
+ const COMPONENT_NAME$1$ = 'vc-action-sheet';
71
73
  const ActionSheet = /* @__PURE__ */ defineComponent({
72
- name: COMPONENT_NAME$1Z,
74
+ name: COMPONENT_NAME$1$,
73
75
  props: props$1q,
74
76
  setup(props, {
75
77
  slots
@@ -256,9 +258,9 @@ const IconManager = new Manager();
256
258
 
257
259
  /** @jsxImportSource vue */
258
260
 
259
- const COMPONENT_NAME$1Y = 'vc-icon';
261
+ const COMPONENT_NAME$1_ = 'vc-icon';
260
262
  const Icon = /* @__PURE__ */ defineComponent({
261
- name: COMPONENT_NAME$1Y,
263
+ name: COMPONENT_NAME$1_,
262
264
  props: props$1o,
263
265
  setup(props) {
264
266
  const viewBox = ref('0 0 1024 1024');
@@ -457,9 +459,9 @@ const useTransition = () => {
457
459
  };
458
460
  };
459
461
 
460
- const COMPONENT_NAME$1X = "vc-transition";
462
+ const COMPONENT_NAME$1Z = "vc-transition";
461
463
  const Transition = defineComponent({
462
- name: COMPONENT_NAME$1X,
464
+ name: COMPONENT_NAME$1Z,
463
465
  props: props$1n,
464
466
  // 当不声明emits的情况下，事件存在于attrs中
465
467
  inheritAttrs: false,
@@ -480,9 +482,9 @@ const Transition = defineComponent({
480
482
  }
481
483
  });
482
484
 
483
- const COMPONENT_NAME$1W = "vc-transition-collapse";
485
+ const COMPONENT_NAME$1Y = "vc-transition-collapse";
484
486
  const TransitionCollapse = defineComponent({
485
- name: COMPONENT_NAME$1W,
487
+ name: COMPONENT_NAME$1Y,
486
488
  props: props$1n,
487
489
  // 当不声明emits的情况下，事件存在于attrs中
488
490
  inheritAttrs: false,
@@ -601,9 +603,9 @@ const TransitionCollapse = defineComponent({
601
603
  }
602
604
  });
603
605
 
604
- const COMPONENT_NAME$1V = "vc-transition-fade";
606
+ const COMPONENT_NAME$1X = "vc-transition-fade";
605
607
  const TransitionFade = defineComponent({
606
- name: COMPONENT_NAME$1V,
608
+ name: COMPONENT_NAME$1X,
607
609
  props: {
608
610
  ...props$1n,
609
611
  // inheritAttrs必须是false
@@ -638,9 +640,9 @@ const TransitionFade = defineComponent({
638
640
  }
639
641
  });
640
642
 
641
- const COMPONENT_NAME$1U = "vc-transition-scale";
643
+ const COMPONENT_NAME$1W = "vc-transition-scale";
642
644
  const TransitionScale = defineComponent({
643
- name: COMPONENT_NAME$1U,
645
+ name: COMPONENT_NAME$1W,
644
646
  props: {
645
647
  ...props$1n,
646
648
  mode: {
@@ -680,9 +682,9 @@ const TransitionScale = defineComponent({
680
682
  }
681
683
  });
682
684
 
683
- const COMPONENT_NAME$1T = "vc-transition-slide";
685
+ const COMPONENT_NAME$1V = "vc-transition-slide";
684
686
  const TransitionSlide = defineComponent({
685
- name: COMPONENT_NAME$1T,
687
+ name: COMPONENT_NAME$1V,
686
688
  props: {
687
689
  ...props$1n,
688
690
  mode: {
@@ -722,9 +724,9 @@ const TransitionSlide = defineComponent({
722
724
  }
723
725
  });
724
726
 
725
- const COMPONENT_NAME$1S = "vc-transition-zoom";
727
+ const COMPONENT_NAME$1U = "vc-transition-zoom";
726
728
  const TransitionZoom = defineComponent({
727
- name: COMPONENT_NAME$1S,
729
+ name: COMPONENT_NAME$1U,
728
730
  props: {
729
731
  ...props$1n,
730
732
  mode: {
@@ -766,7 +768,7 @@ const TransitionZoom = defineComponent({
766
768
 
767
769
  /** @jsxImportSource vue */
768
770
 
769
- const COMPONENT_NAME$1R = 'vc-alert';
771
+ const COMPONENT_NAME$1T = 'vc-alert';
770
772
 
771
773
  // [color, borderColor, backgroundColor], -> CSS
772
774
  const THEME_MAP = {
@@ -776,7 +778,7 @@ const THEME_MAP = {
776
778
  warning: ['#ffbf00', '#ffe58f', '#fffbe6']
777
779
  };
778
780
  const Alert = /* @__PURE__ */ defineComponent({
779
- name: COMPONENT_NAME$1R,
781
+ name: COMPONENT_NAME$1T,
780
782
  props: props$1p,
781
783
  setup(props, {
782
784
  slots,
@@ -875,9 +877,9 @@ const props$1m = {
875
877
 
876
878
  /** @jsxImportSource vue */
877
879
 
878
- const COMPONENT_NAME$1Q = 'vc-artboard';
880
+ const COMPONENT_NAME$1S = 'vc-artboard';
879
881
  const Artboard = /* @__PURE__ */ defineComponent({
880
- name: COMPONENT_NAME$1Q,
882
+ name: COMPONENT_NAME$1S,
881
883
  props: props$1m,
882
884
  setup(props, {
883
885
  slots
@@ -916,9 +918,9 @@ const props$1l = {
916
918
 
917
919
  /** @jsxImportSource vue */
918
920
 
919
- const COMPONENT_NAME$1P = 'vc-spin';
921
+ const COMPONENT_NAME$1R = 'vc-spin';
920
922
  const Spin = /* @__PURE__ */ defineComponent({
921
- name: COMPONENT_NAME$1P,
923
+ name: COMPONENT_NAME$1R,
922
924
  props: props$1l,
923
925
  setup(props, {
924
926
  slots
@@ -969,9 +971,9 @@ const props$1k = {
969
971
  exclude: RegExp
970
972
  };
971
973
 
972
- const COMPONENT_NAME$1O = "vc-debounce";
974
+ const COMPONENT_NAME$1Q = "vc-debounce";
973
975
  const Debounce = defineComponent({
974
- name: COMPONENT_NAME$1O,
976
+ name: COMPONENT_NAME$1Q,
975
977
  props: props$1k,
976
978
  /**
977
979
  * 不声明emits使得事件被透传放入attrs中, 这样可以让所有的事件透传
@@ -1043,9 +1045,9 @@ const props$1j = {
1043
1045
 
1044
1046
  /** @jsxImportSource vue */
1045
1047
 
1046
- const COMPONENT_NAME$1N = 'vc-button';
1048
+ const COMPONENT_NAME$1P = 'vc-button';
1047
1049
  const Button = /* @__PURE__ */ defineComponent({
1048
- name: COMPONENT_NAME$1N,
1050
+ name: COMPONENT_NAME$1P,
1049
1051
  emits: ['click'],
1050
1052
  props: props$1j,
1051
1053
  setup(props, {
@@ -1125,9 +1127,9 @@ const props$1i = {
1125
1127
 
1126
1128
  /** @jsxImportSource vue */
1127
1129
 
1128
- const COMPONENT_NAME$1M = 'vc-button-group';
1130
+ const COMPONENT_NAME$1O = 'vc-button-group';
1129
1131
  const ButtonGroup = /* @__PURE__ */ defineComponent({
1130
- name: COMPONENT_NAME$1M,
1132
+ name: COMPONENT_NAME$1O,
1131
1133
  props: props$1i,
1132
1134
  setup(props, {
1133
1135
  slots
@@ -1161,9 +1163,9 @@ const props$1h = {
1161
1163
 
1162
1164
  /** @jsxImportSource vue */
1163
1165
 
1164
- const COMPONENT_NAME$1L = 'vc-calendar';
1166
+ const COMPONENT_NAME$1N = 'vc-calendar';
1165
1167
  const Calendar = /* @__PURE__ */ defineComponent({
1166
- name: COMPONENT_NAME$1L,
1168
+ name: COMPONENT_NAME$1N,
1167
1169
  props: props$1h,
1168
1170
  setup(props, {
1169
1171
  slots
@@ -1201,9 +1203,9 @@ const props$1g = {
1201
1203
 
1202
1204
  /** @jsxImportSource vue */
1203
1205
 
1204
- const COMPONENT_NAME$1K = 'vc-card';
1206
+ const COMPONENT_NAME$1M = 'vc-card';
1205
1207
  const Card = /* @__PURE__ */ defineComponent({
1206
- name: COMPONENT_NAME$1K,
1208
+ name: COMPONENT_NAME$1M,
1207
1209
  props: props$1g,
1208
1210
  setup(props, {
1209
1211
  slots
@@ -1239,9 +1241,9 @@ const props$1f = {
1239
1241
 
1240
1242
  /** @jsxImportSource vue */
1241
1243
 
1242
- const COMPONENT_NAME$1J = 'vc-carousel';
1244
+ const COMPONENT_NAME$1L = 'vc-carousel';
1243
1245
  const Carousel = /* @__PURE__ */ defineComponent({
1244
- name: COMPONENT_NAME$1J,
1246
+ name: COMPONENT_NAME$1L,
1245
1247
  props: props$1f,
1246
1248
  setup(props, {
1247
1249
  slots
@@ -1265,9 +1267,9 @@ const props$1e = {
1265
1267
 
1266
1268
  /** @jsxImportSource vue */
1267
1269
 
1268
- const COMPONENT_NAME$1I = 'vc-cascader';
1270
+ const COMPONENT_NAME$1K = 'vc-cascader';
1269
1271
  const Cascader = /* @__PURE__ */ defineComponent({
1270
- name: COMPONENT_NAME$1I,
1272
+ name: COMPONENT_NAME$1K,
1271
1273
  props: props$1e,
1272
1274
  setup(props, {
1273
1275
  slots
@@ -1336,9 +1338,9 @@ const props$1d = {
1336
1338
 
1337
1339
  /** @jsxImportSource vue */
1338
1340
 
1339
- const COMPONENT_NAME$1H = 'vc-chart';
1341
+ const COMPONENT_NAME$1J = 'vc-chart';
1340
1342
  const Chart = /* @__PURE__ */ defineComponent({
1341
- name: COMPONENT_NAME$1H,
1343
+ name: COMPONENT_NAME$1J,
1342
1344
  props: props$1d,
1343
1345
  emits: [...EVENTS, 'ready'],
1344
1346
  setup(props, {
@@ -1569,9 +1571,9 @@ const useCheckbox = () => {
1569
1571
 
1570
1572
  /** @jsxImportSource vue */
1571
1573
 
1572
- const COMPONENT_NAME$1G = 'vc-checkbox';
1574
+ const COMPONENT_NAME$1I = 'vc-checkbox';
1573
1575
  const Checkbox = /* @__PURE__ */ defineComponent({
1574
- name: COMPONENT_NAME$1G,
1576
+ name: COMPONENT_NAME$1I,
1575
1577
  props: props$1c,
1576
1578
  emits: ['update:modelValue', 'change'],
1577
1579
  setup(props, {
@@ -1658,9 +1660,9 @@ const useCheckboxGroup = () => {
1658
1660
 
1659
1661
  /** @jsxImportSource vue */
1660
1662
 
1661
- const COMPONENT_NAME$1F = 'vc-checkbox-group';
1663
+ const COMPONENT_NAME$1H = 'vc-checkbox-group';
1662
1664
  const CheckboxGroup = /* @__PURE__ */ defineComponent({
1663
- name: COMPONENT_NAME$1F,
1665
+ name: COMPONENT_NAME$1H,
1664
1666
  props: props$1b,
1665
1667
  emits: ['update:modelValue', 'change'],
1666
1668
  setup(props, {
@@ -1678,9 +1680,9 @@ const CheckboxGroup = /* @__PURE__ */ defineComponent({
1678
1680
 
1679
1681
  /** @jsxImportSource vue */
1680
1682
 
1681
- const COMPONENT_NAME$1E = 'vcm-checkbox';
1683
+ const COMPONENT_NAME$1G = 'vcm-checkbox';
1682
1684
  const MCheckbox = /* @__PURE__ */ defineComponent({
1683
- name: COMPONENT_NAME$1E,
1685
+ name: COMPONENT_NAME$1G,
1684
1686
  props: props$1c,
1685
1687
  emits: ['update:modelValue', 'change'],
1686
1688
  setup(props, {
@@ -1720,9 +1722,9 @@ const MCheckbox = /* @__PURE__ */ defineComponent({
1720
1722
 
1721
1723
  /** @jsxImportSource vue */
1722
1724
 
1723
- const COMPONENT_NAME$1D = 'vcm-checkbox-group';
1725
+ const COMPONENT_NAME$1F = 'vcm-checkbox-group';
1724
1726
  const MCheckboxGroup = /* @__PURE__ */ defineComponent({
1725
- name: COMPONENT_NAME$1D,
1727
+ name: COMPONENT_NAME$1F,
1726
1728
  props: props$1b,
1727
1729
  emits: ['update:modelValue', 'change'],
1728
1730
  setup(props, {
@@ -1781,9 +1783,9 @@ const props$19 = {
1781
1783
  }
1782
1784
  };
1783
1785
 
1784
- const COMPONENT_NAME$1C = "vc-customer";
1786
+ const COMPONENT_NAME$1E = "vc-customer";
1785
1787
  const Customer = defineComponent({
1786
- name: COMPONENT_NAME$1C,
1788
+ name: COMPONENT_NAME$1E,
1787
1789
  props: props$19,
1788
1790
  setup(props, context) {
1789
1791
  return () => h(() => {
@@ -1794,9 +1796,9 @@ const Customer = defineComponent({
1794
1796
 
1795
1797
  /** @jsxImportSource vue */
1796
1798
 
1797
- const COMPONENT_NAME$1B = 'vc-message';
1799
+ const COMPONENT_NAME$1D = 'vc-message';
1798
1800
  const MessageView = /* @__PURE__ */ defineComponent({
1799
- name: COMPONENT_NAME$1B,
1801
+ name: COMPONENT_NAME$1D,
1800
1802
  emits: ['before-close', 'close', 'portal-fulfilled'],
1801
1803
  props: props$1a,
1802
1804
  setup(props, {
@@ -1943,7 +1945,7 @@ class PortalLeaf {
1943
1945
  }
1944
1946
  }
1945
1947
 
1946
- const COMPONENT_NAME$1A = "vc-portal";
1948
+ const COMPONENT_NAME$1C = "vc-portal";
1947
1949
  class Portal {
1948
1950
  /**
1949
1951
  * 清理Portals类型组件
@@ -1995,7 +1997,7 @@ class Portal {
1995
1997
  this.wrapper = wrapper;
1996
1998
  this.globalOptions = {
1997
1999
  ...options,
1998
- name: options?.name || wrapper.name || Utils.getUid(COMPONENT_NAME$1A)
2000
+ name: options?.name || wrapper.name || Utils.getUid(COMPONENT_NAME$1C)
1999
2001
  };
2000
2002
  }
2001
2003
  popup(propsData, options) {
@@ -2094,7 +2096,7 @@ class Portal {
2094
2096
  ...rest
2095
2097
  } = options;
2096
2098
  let useAllNodes = fragment;
2097
- const name = multiple ? `${name$}__${Utils.getUid(COMPONENT_NAME$1A)}` : name$;
2099
+ const name = multiple ? `${name$}__${Utils.getUid(COMPONENT_NAME$1C)}` : name$;
2098
2100
  const container = document.createElement(tag);
2099
2101
  const root = typeof el === "object" ? el : document.querySelector(el || "body");
2100
2102
  !alive && Portal.leafs.get(name)?.destroy();
@@ -2128,7 +2130,7 @@ class Portal {
2128
2130
  } else {
2129
2131
  const wrapper = this.wrapper;
2130
2132
  const app = createApp({
2131
- name: COMPONENT_NAME$1A,
2133
+ name: COMPONENT_NAME$1C,
2132
2134
  parent,
2133
2135
  setup() {
2134
2136
  if (alive) {
@@ -2240,13 +2242,13 @@ const props$18 = {
2240
2242
  }
2241
2243
  };
2242
2244
 
2243
- const COMPONENT_NAME$1z = 'vc-portal-view';
2245
+ const COMPONENT_NAME$1B = 'vc-portal-view';
2244
2246
 
2245
2247
  /**
2246
2248
  * 写法不同，但与vue@2.x 保持一致
2247
2249
  */
2248
2250
  const PortalView = /* @__PURE__ */ defineComponent({
2249
- name: COMPONENT_NAME$1z,
2251
+ name: COMPONENT_NAME$1B,
2250
2252
  props: props$18,
2251
2253
  setup(props, {
2252
2254
  slots
@@ -2417,9 +2419,9 @@ const useClipboard = (done) => {
2417
2419
  return () => h(props.tag, { onClick: handleClick, class: "vc-clipboard" }, slots?.default?.());
2418
2420
  };
2419
2421
 
2420
- const COMPONENT_NAME$1y = "vc-clipboard";
2422
+ const COMPONENT_NAME$1A = "vc-clipboard";
2421
2423
  const Clipboard$1 = defineComponent({
2422
- name: COMPONENT_NAME$1y,
2424
+ name: COMPONENT_NAME$1A,
2423
2425
  props: props$17,
2424
2426
  setup() {
2425
2427
  return useClipboard((content) => Message.success({ content }));
@@ -2459,9 +2461,9 @@ const MTransitionZoom = TransitionZoom;
2459
2461
 
2460
2462
  /** @jsxImportSource vue */
2461
2463
 
2462
- const COMPONENT_NAME$1x = 'vcm-toast';
2464
+ const COMPONENT_NAME$1z = 'vcm-toast';
2463
2465
  const MToastView = /* @__PURE__ */ defineComponent({
2464
- name: COMPONENT_NAME$1x,
2466
+ name: COMPONENT_NAME$1z,
2465
2467
  emits: ['close', 'portal-fulfilled'],
2466
2468
  props: props$16,
2467
2469
  setup(props, {
@@ -2563,9 +2565,9 @@ const warning$2 = create$3({ mode: "warning" });
2563
2565
  const error$2 = create$3({ mode: "error" });
2564
2566
  const MToast = Object.assign(MToastView, { destroy: destroy$4, info: info$2, success: success$2, loading, warning: warning$2, error: error$2 });
2565
2567
 
2566
- const COMPONENT_NAME$1w = "vcm-clipboard";
2568
+ const COMPONENT_NAME$1y = "vcm-clipboard";
2567
2569
  const MClipboard$1 = defineComponent({
2568
- name: COMPONENT_NAME$1w,
2570
+ name: COMPONENT_NAME$1y,
2569
2571
  props: props$17,
2570
2572
  setup() {
2571
2573
  return useClipboard((content) => MToast.info({ content }));
@@ -2597,9 +2599,9 @@ const props$15 = {
2597
2599
  }
2598
2600
  };
2599
2601
 
2600
- const COMPONENT_NAME$1v = "vc-collapse";
2602
+ const COMPONENT_NAME$1x = "vc-collapse";
2601
2603
  const Collapse = defineComponent({
2602
- name: COMPONENT_NAME$1v,
2604
+ name: COMPONENT_NAME$1x,
2603
2605
  props: props$15,
2604
2606
  emits: ["update:moodelValue", "change"],
2605
2607
  setup(props, { slots, emit }) {
@@ -2716,9 +2718,9 @@ const props$13 = {
2716
2718
  function _isSlot$3(s) {
2717
2719
  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
2718
2720
  }
2719
- const COMPONENT_NAME$1u = 'vc-expand';
2720
- const Expand = /* @__PURE__ */ defineComponent({
2721
- name: COMPONENT_NAME$1u,
2721
+ const COMPONENT_NAME$1w = 'vc-expand';
2722
+ const Expand$1 = /* @__PURE__ */ defineComponent({
2723
+ name: COMPONENT_NAME$1w,
2722
2724
  props: props$13,
2723
2725
  setup(props, {
2724
2726
  slots
@@ -2748,9 +2750,9 @@ const Expand = /* @__PURE__ */ defineComponent({
2748
2750
 
2749
2751
  /** @jsxImportSource vue */
2750
2752
 
2751
- const COMPONENT_NAME$1t = 'vc-collapse-item';
2753
+ const COMPONENT_NAME$1v = 'vc-collapse-item';
2752
2754
  const CollapseItem = /* @__PURE__ */ defineComponent({
2753
- name: COMPONENT_NAME$1t,
2755
+ name: COMPONENT_NAME$1v,
2754
2756
  props: props$14,
2755
2757
  setup(props, {
2756
2758
  slots,
@@ -2797,7 +2799,7 @@ const CollapseItem = /* @__PURE__ */ defineComponent({
2797
2799
  "onClick": handleToggle
2798
2800
  }, [slots.default?.(), slots.icon?.({
2799
2801
  visible: isActive.value
2800
- })]), createVNode(Expand, {
2802
+ })]), createVNode(Expand$1, {
2801
2803
  "modelValue": isActive.value,
2802
2804
  "alive": alive.value,
2803
2805
  "onChange": v => isActive.value = v
@@ -2825,9 +2827,9 @@ const props$12 = {
2825
2827
 
2826
2828
  /** @jsxImportSource vue */
2827
2829
 
2828
- const COMPONENT_NAME$1s = 'vc-color-picker';
2830
+ const COMPONENT_NAME$1u = 'vc-color-picker';
2829
2831
  const ColorPicker = /* @__PURE__ */ defineComponent({
2830
- name: COMPONENT_NAME$1s,
2832
+ name: COMPONENT_NAME$1u,
2831
2833
  props: props$12,
2832
2834
  setup(props, {
2833
2835
  slots
@@ -2851,9 +2853,9 @@ const props$11 = {
2851
2853
 
2852
2854
  /** @jsxImportSource vue */
2853
2855
 
2854
- const COMPONENT_NAME$1r = 'vc-countdown';
2856
+ const COMPONENT_NAME$1t = 'vc-countdown';
2855
2857
  const Countdown = /* @__PURE__ */ defineComponent({
2856
- name: COMPONENT_NAME$1r,
2858
+ name: COMPONENT_NAME$1t,
2857
2859
  props: props$11,
2858
2860
  setup(props, {
2859
2861
  slots
@@ -3104,6 +3106,10 @@ const props$Y = {
3104
3106
  changeOnSelect: {
3105
3107
  type: Boolean,
3106
3108
  default: false
3109
+ },
3110
+ nullValue: {
3111
+ type: [Number, String, Object],
3112
+ default: ""
3107
3113
  }
3108
3114
  };
3109
3115
 
@@ -3298,9 +3304,9 @@ const useNativeEmitter = (input, expose) => {
3298
3304
 
3299
3305
  /** @jsxImportSource vue */
3300
3306
 
3301
- const COMPONENT_NAME$1q = 'vc-input';
3307
+ const COMPONENT_NAME$1s = 'vc-input';
3302
3308
  const Input = /* @__PURE__ */ defineComponent({
3303
- name: COMPONENT_NAME$1q,
3309
+ name: COMPONENT_NAME$1s,
3304
3310
  inheritAttrs: false,
3305
3311
  props: {
3306
3312
  ...props$$,
@@ -3634,9 +3640,9 @@ const useInputNumber = () => {
3634
3640
 
3635
3641
  /** @jsxImportSource vue */
3636
3642
 
3637
- const COMPONENT_NAME$1p = 'vc-input-number';
3643
+ const COMPONENT_NAME$1r = 'vc-input-number';
3638
3644
  const InputNumber = /* @__PURE__ */ defineComponent({
3639
- name: COMPONENT_NAME$1p,
3645
+ name: COMPONENT_NAME$1r,
3640
3646
  props: props$X,
3641
3647
  inheritAttrs: false,
3642
3648
  setup(props, {
@@ -3700,9 +3706,9 @@ const props$W = {
3700
3706
 
3701
3707
  /** @jsxImportSource vue */
3702
3708
 
3703
- const COMPONENT_NAME$1o = 'vc-input-search';
3709
+ const COMPONENT_NAME$1q = 'vc-input-search';
3704
3710
  const InputSearch = /* @__PURE__ */ defineComponent({
3705
- name: COMPONENT_NAME$1o,
3711
+ name: COMPONENT_NAME$1q,
3706
3712
  props: props$W,
3707
3713
  inheritAttrs: false,
3708
3714
  setup(props, {
@@ -3993,9 +3999,9 @@ const usePos = () => {
3993
3999
  function _isSlot$2(s) {
3994
4000
  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
3995
4001
  }
3996
- const COMPONENT_NAME$1n = 'vc-popover-wrapper';
4002
+ const COMPONENT_NAME$1p = 'vc-popover-wrapper';
3997
4003
  const PopoverWrapper = /* @__PURE__ */ defineComponent({
3998
- name: COMPONENT_NAME$1n,
4004
+ name: COMPONENT_NAME$1p,
3999
4005
  props: props$_,
4000
4006
  emits: ['portal-fulfilled', 'close'],
4001
4007
  setup(props, {
@@ -4247,9 +4253,9 @@ const PopoverPortal = new Portal(PopoverWrapper);
4247
4253
 
4248
4254
  /** @jsxImportSource vue */
4249
4255
 
4250
- const COMPONENT_NAME$1m = 'vc-popover';
4256
+ const COMPONENT_NAME$1o = 'vc-popover';
4251
4257
  const Popover$1 = /* @__PURE__ */ defineComponent({
4252
- name: COMPONENT_NAME$1m,
4258
+ name: COMPONENT_NAME$1o,
4253
4259
  props: props$Z,
4254
4260
  emits: ['update:modelValue', 'visible-change', 'ready', 'close'],
4255
4261
  setup(props, {
@@ -4399,6 +4405,7 @@ const DEFAULT_FORMATS = {
4399
4405
  datetime: "YYYY-MM-DD HH:mm:ss",
4400
4406
  time: "HH:mm:ss",
4401
4407
  timerange: "HH:mm:ss",
4408
+ monthrange: "YYYY-MM",
4402
4409
  daterange: "YYYY-MM-DD",
4403
4410
  datetimerange: "YYYY-MM-DD HH:mm:ss"
4404
4411
  };
@@ -4946,8 +4953,8 @@ const useBase = () => {
4946
4953
  const props = instance.props;
4947
4954
  const isHover = ref(false);
4948
4955
  const isActive = ref(false);
4949
- const currentValue = ref("");
4950
- const focusedDate = ref(null);
4956
+ const currentValue = ref([]);
4957
+ const focusedDate = ref();
4951
4958
  const formItem = inject("vc-form-item", {});
4952
4959
  const its = useAttrs({ merge: false });
4953
4960
  const formatDateText = (value) => {
@@ -5012,23 +5019,22 @@ const useBase = () => {
5012
5019
  };
5013
5020
  const parseValue = (val) => {
5014
5021
  if (isEmpty(val)) {
5015
- return isRange.value ? [null, null] : [];
5022
+ return [];
5016
5023
  }
5017
5024
  return parserDate(val);
5018
5025
  };
5019
- const rest = (date) => {
5020
- currentValue.value = date;
5026
+ const reset = (v) => {
5027
+ currentValue.value = value2Array(v);
5021
5028
  };
5022
5029
  const sync = (eventName, value) => {
5023
- const date = isRange.value || isQuarter.value ? value : value[0];
5024
- const dateString = formatDate(value);
5025
- emit("input", date);
5026
- emit("update:modelValue", dateString);
5030
+ const formatValue = formatDate(isRange.value || isQuarter.value ? value : value[0]) || props.nullValue;
5031
+ emit("update:modelValue", formatValue);
5027
5032
  eventName = typeof eventName === "string" ? [eventName] : eventName;
5028
5033
  eventName.forEach((name) => {
5029
- emit(name, dateString, rest);
5034
+ emit(name, formatValue, reset);
5030
5035
  });
5031
- formItem?.change?.(date);
5036
+ formItem?.change?.();
5037
+ return formatValue;
5032
5038
  };
5033
5039
  const executePromise = (promiseFn, cb, param) => {
5034
5040
  try {
@@ -5058,11 +5064,9 @@ const useBase = () => {
5058
5064
  };
5059
5065
  const handleClear = () => {
5060
5066
  const clear = () => {
5061
- const date = isRange.value ? [] : "";
5062
5067
  isActive.value = false;
5063
- currentValue.value = date;
5064
- sync("change", date);
5065
- emit("clear", date);
5068
+ currentValue.value = [];
5069
+ emit("clear", sync("change", []));
5066
5070
  };
5067
5071
  executePromise(instance.vnode.props?.onBeforeClear, clear);
5068
5072
  };
@@ -5079,10 +5083,10 @@ const useBase = () => {
5079
5083
  executePromise(instance.vnode.props?.onBeforeOk, ok, value);
5080
5084
  };
5081
5085
  const handleClose = () => {
5082
- const val = parseValue(props.modelValue);
5083
- const isSetValueProp = instance.props.modelValue;
5084
- if (!isEqualWith(currentValue.value, val) && isSetValueProp) {
5085
- currentValue.value = value2Array(val);
5086
+ const v = parseValue(props.modelValue);
5087
+ const isSetValueProp = props.modelValue;
5088
+ if (!isEqualWith(currentValue.value, v) && isSetValueProp) {
5089
+ currentValue.value = value2Array(v);
5086
5090
  }
5087
5091
  emit("close");
5088
5092
  };
@@ -5090,7 +5094,7 @@ const useBase = () => {
5090
5094
  () => props.modelValue,
5091
5095
  (v) => {
5092
5096
  v = parseValue(v);
5093
- focusedDate.value = v[0] || props.startDate || /* @__PURE__ */ new Date();
5097
+ focusedDate.value = v?.[0] || props.startDate || /* @__PURE__ */ new Date();
5094
5098
  currentValue.value = value2Array(v);
5095
5099
  },
5096
5100
  { immediate: true }
@@ -5126,9 +5130,8 @@ const useBase = () => {
5126
5130
 
5127
5131
  /** @jsxImportSource vue */
5128
5132
 
5129
- const COMPONENT_NAME$1l = 'vc-picker';
5130
- const createPicker = (pickerProps, usePicker) => /* @__PURE__ */ defineComponent({
5131
- name: COMPONENT_NAME$1l,
5133
+ const createPicker = (name, pickerProps, usePicker) => /* @__PURE__ */ defineComponent({
5134
+ name,
5132
5135
  props: Object.assign(props$Y, pickerProps),
5133
5136
  inheritAttrs: false,
5134
5137
  emits: ['update:modelValue', 'change', 'clear', 'error', 'close', 'input', 'ready', 'visible-change', 'ok'],
@@ -5184,7 +5187,7 @@ const createPicker = (pickerProps, usePicker) => /* @__PURE__ */ defineComponent
5184
5187
  "disabled": props.disabled,
5185
5188
  "modelValue": visibleValue.value,
5186
5189
  "allowDispatch": false,
5187
- "class": "vc-picker__input",
5190
+ "class": "vc-date-picker__input",
5188
5191
  "readonly": true,
5189
5192
  "placeholder": props.placeholder || '请选择'
5190
5193
  }, {
@@ -5192,7 +5195,7 @@ const createPicker = (pickerProps, usePicker) => /* @__PURE__ */ defineComponent
5192
5195
  return createVNode("div", {
5193
5196
  "class": [{
5194
5197
  'is-clear': showClear
5195
- }, 'vc-picker__append']
5198
+ }, 'vc-date-picker__append']
5196
5199
  }, [createVNode(Icon, {
5197
5200
  "type": showClear.value ? 'clear' : icon.value,
5198
5201
  "onClick": handleIconClick
@@ -5353,9 +5356,9 @@ const getTimeType = type => {
5353
5356
  }
5354
5357
  return view;
5355
5358
  };
5356
- const COMPONENT_NAME$1k = 'vc-date-confirm';
5359
+ const COMPONENT_NAME$1n = 'vc-date-confirm';
5357
5360
  const Confirm = /* @__PURE__ */ defineComponent({
5358
- name: COMPONENT_NAME$1k,
5361
+ name: COMPONENT_NAME$1n,
5359
5362
  props: {
5360
5363
  showTime: {
5361
5364
  type: Boolean,
@@ -5419,9 +5422,9 @@ const Confirm = /* @__PURE__ */ defineComponent({
5419
5422
 
5420
5423
  /** @jsxImportSource vue */
5421
5424
 
5422
- const COMPONENT_NAME$1j = 'vc-date-header';
5425
+ const COMPONENT_NAME$1m = 'vc-date-header';
5423
5426
  const DateHeader = /* @__PURE__ */ defineComponent({
5424
- name: COMPONENT_NAME$1j,
5427
+ name: COMPONENT_NAME$1m,
5425
5428
  props: {
5426
5429
  panelDate: Date,
5427
5430
  showNext: {
@@ -5505,9 +5508,9 @@ const DateHeader = /* @__PURE__ */ defineComponent({
5505
5508
 
5506
5509
  /** @jsxImportSource vue */
5507
5510
 
5508
- const COMPONENT_NAME$1i = 'vc-date-table';
5511
+ const COMPONENT_NAME$1l = 'vc-date-table';
5509
5512
  const DateTable = /* @__PURE__ */ defineComponent({
5510
- name: COMPONENT_NAME$1i,
5513
+ name: COMPONENT_NAME$1l,
5511
5514
  props: {
5512
5515
  value: Array,
5513
5516
  firstDayOfWeek: {
@@ -5716,9 +5719,9 @@ const DateTable = /* @__PURE__ */ defineComponent({
5716
5719
 
5717
5720
  /** @jsxImportSource vue */
5718
5721
 
5719
- const COMPONENT_NAME$1h = 'vc-month-table';
5722
+ const COMPONENT_NAME$1k = 'vc-month-table';
5720
5723
  const MonthTable = /* @__PURE__ */ defineComponent({
5721
- name: COMPONENT_NAME$1h,
5724
+ name: COMPONENT_NAME$1k,
5722
5725
  props: {
5723
5726
  value: Array,
5724
5727
  panelDate: Date,
@@ -5850,7 +5853,7 @@ const MonthTable = /* @__PURE__ */ defineComponent({
5850
5853
 
5851
5854
  /** @jsxImportSource vue */
5852
5855
 
5853
- const COMPONENT_NAME$1g = 'vc-quarter-table';
5856
+ const COMPONENT_NAME$1j = 'vc-quarter-table';
5854
5857
 
5855
5858
  /**
5856
5859
  * 获取季度对应的月份范围
@@ -5884,7 +5887,7 @@ const getQuarterRangeByMonth = value => {
5884
5887
  }
5885
5888
  };
5886
5889
  const QuarterTable = /* @__PURE__ */ defineComponent({
5887
- name: COMPONENT_NAME$1g,
5890
+ name: COMPONENT_NAME$1j,
5888
5891
  props: {
5889
5892
  value: Array,
5890
5893
  panelDate: Date,
@@ -6007,9 +6010,9 @@ const QuarterTable = /* @__PURE__ */ defineComponent({
6007
6010
 
6008
6011
  /** @jsxImportSource vue */
6009
6012
 
6010
- const COMPONENT_NAME$1f = 'vc-shortcuts-select';
6013
+ const COMPONENT_NAME$1i = 'vc-shortcuts-select';
6011
6014
  const ShortcutsSelect = /* @__PURE__ */ defineComponent({
6012
- name: COMPONENT_NAME$1f,
6015
+ name: COMPONENT_NAME$1i,
6013
6016
  props: {
6014
6017
  panelDate: Date,
6015
6018
  config: Array,
@@ -6049,9 +6052,9 @@ const ShortcutsSelect = /* @__PURE__ */ defineComponent({
6049
6052
 
6050
6053
  /** @jsxImportSource vue */
6051
6054
 
6052
- const COMPONENT_NAME$1e = 'vc-time-select';
6055
+ const COMPONENT_NAME$1h = 'vc-time-select';
6053
6056
  const TimeSelect = /* @__PURE__ */ defineComponent({
6054
- name: COMPONENT_NAME$1e,
6057
+ name: COMPONENT_NAME$1h,
6055
6058
  props: {
6056
6059
  hours: {
6057
6060
  type: [Number, String],
@@ -6330,9 +6333,9 @@ const TimeSelect = /* @__PURE__ */ defineComponent({
6330
6333
 
6331
6334
  /** @jsxImportSource vue */
6332
6335
 
6333
- const COMPONENT_NAME$1d = 'vc-year-table';
6336
+ const COMPONENT_NAME$1g = 'vc-year-table';
6334
6337
  const YearTable = /* @__PURE__ */ defineComponent({
6335
- name: COMPONENT_NAME$1d,
6338
+ name: COMPONENT_NAME$1g,
6336
6339
  props: {
6337
6340
  value: Array,
6338
6341
  panelDate: Date,
@@ -6455,9 +6458,9 @@ const getDateIsInRange = (value, type, leftPanelDate, rightPanelDate) => {
6455
6458
  }
6456
6459
  return true;
6457
6460
  };
6458
- const COMPONENT_NAME$1c = 'vc-date-range-panel';
6461
+ const COMPONENT_NAME$1f = 'vc-date-range-panel';
6459
6462
  const DateRangePanel = /* @__PURE__ */ defineComponent({
6460
- name: COMPONENT_NAME$1c,
6463
+ name: COMPONENT_NAME$1f,
6461
6464
  props: {
6462
6465
  ...props$V,
6463
6466
  confirm: {
@@ -6836,9 +6839,9 @@ const DateRangePanel = /* @__PURE__ */ defineComponent({
6836
6839
 
6837
6840
  /** @jsxImportSource vue */
6838
6841
 
6839
- const COMPONENT_NAME$1b = 'vc-date-panel';
6842
+ const COMPONENT_NAME$1e = 'vc-date-panel';
6840
6843
  const DatePanel = /* @__PURE__ */ defineComponent({
6841
- name: COMPONENT_NAME$1b,
6844
+ name: COMPONENT_NAME$1e,
6842
6845
  props: {
6843
6846
  ...props$V,
6844
6847
  type: String,
@@ -7046,9 +7049,9 @@ const isEqualYear$1 = value => {
7046
7049
  const endYear = value[1].getFullYear();
7047
7050
  return startYear === endYear;
7048
7051
  };
7049
- const COMPONENT_NAME$1a = 'vc-monthrange-panel';
7052
+ const COMPONENT_NAME$1d = 'vc-monthrange-panel';
7050
7053
  const MonthRangePanel = /* @__PURE__ */ defineComponent({
7051
- name: COMPONENT_NAME$1a,
7054
+ name: COMPONENT_NAME$1d,
7052
7055
  props: {
7053
7056
  ...props$V,
7054
7057
  confirm: {
@@ -7223,9 +7226,9 @@ const isEqualYear = value => {
7223
7226
  const endYear = value[1].getFullYear();
7224
7227
  return startYear === endYear;
7225
7228
  };
7226
- const COMPONENT_NAME$19 = 'vc-quarterrange-panel';
7229
+ const COMPONENT_NAME$1c = 'vc-quarterrange-panel';
7227
7230
  const QuarterRangePanel = /* @__PURE__ */ defineComponent({
7228
- name: COMPONENT_NAME$19,
7231
+ name: COMPONENT_NAME$1c,
7229
7232
  props: {
7230
7233
  ...props$V,
7231
7234
  confirm: {
@@ -7464,9 +7467,9 @@ const getComparedDate = (leftDate, rightDate) => {
7464
7467
  seconds
7465
7468
  };
7466
7469
  };
7467
- const COMPONENT_NAME$18 = 'vc-timerange-panel';
7470
+ const COMPONENT_NAME$1b = 'vc-timerange-panel';
7468
7471
  const TimeRangePanel = /* @__PURE__ */ defineComponent({
7469
- name: COMPONENT_NAME$18,
7472
+ name: COMPONENT_NAME$1b,
7470
7473
  props: props$U,
7471
7474
  emits: ['pick', 'clear', 'ok'],
7472
7475
  setup(props, {
@@ -7565,9 +7568,9 @@ const TimeRangePanel = /* @__PURE__ */ defineComponent({
7565
7568
 
7566
7569
  /** @jsxImportSource vue */
7567
7570
 
7568
- const COMPONENT_NAME$17 = 'vc-time-panel';
7571
+ const COMPONENT_NAME$1a = 'vc-time-panel';
7569
7572
  const TimePanel = /* @__PURE__ */ defineComponent({
7570
- name: COMPONENT_NAME$17,
7573
+ name: COMPONENT_NAME$1a,
7571
7574
  props: props$U,
7572
7575
  emits: ['pick', 'clear', 'ok'],
7573
7576
  setup(props, {
@@ -7622,6 +7625,7 @@ const TimePanel = /* @__PURE__ */ defineComponent({
7622
7625
 
7623
7626
  /** @jsxImportSource vue */
7624
7627
 
7628
+ const COMPONENT_NAME$19 = 'vc-date-picker';
7625
7629
  const getPanel$1 = type => {
7626
7630
  if (['daterange', 'datetimerange'].includes(type)) {
7627
7631
  return DateRangePanel;
@@ -7632,7 +7636,7 @@ const getPanel$1 = type => {
7632
7636
  }
7633
7637
  return DatePanel;
7634
7638
  };
7635
- const DatePicker = createPicker(props$10, () => {
7639
+ const DatePicker = createPicker(COMPONENT_NAME$19, props$10, () => {
7636
7640
  const props = getCurrentInstance().props;
7637
7641
  const icon = ref('date');
7638
7642
  const panel = shallowRef({});
@@ -7665,9 +7669,9 @@ const props$T = {
7665
7669
 
7666
7670
  /** @jsxImportSource vue */
7667
7671
 
7668
- const COMPONENT_NAME$16 = 'vc-divider';
7672
+ const COMPONENT_NAME$18 = 'vc-divider';
7669
7673
  const Divider = /* @__PURE__ */ defineComponent({
7670
- name: COMPONENT_NAME$16,
7674
+ name: COMPONENT_NAME$18,
7671
7675
  props: props$T,
7672
7676
  setup(props, {
7673
7677
  slots
@@ -7822,7 +7826,7 @@ const props$Q = {
7822
7826
 
7823
7827
  /** @jsxImportSource vue */
7824
7828
 
7825
- const COMPONENT_NAME$15 = 'vc-scroller-track';
7829
+ const COMPONENT_NAME$17 = 'vc-scroller-track';
7826
7830
  const BAR_MAP = {
7827
7831
  vertical: {
7828
7832
  scroll: 'scrollTop',
@@ -7842,12 +7846,14 @@ const BAR_MAP = {
7842
7846
  }
7843
7847
  };
7844
7848
  const Track = /* @__PURE__ */ defineComponent({
7845
- name: COMPONENT_NAME$15,
7849
+ name: COMPONENT_NAME$17,
7846
7850
  props: props$S,
7847
7851
  emits: ['change'],
7852
+ inheritAttrs: false,
7848
7853
  setup(props, {
7849
7854
  emit,
7850
- expose
7855
+ expose,
7856
+ attrs
7851
7857
  }) {
7852
7858
  const instance = getCurrentInstance();
7853
7859
  const track = ref();
@@ -8014,6 +8020,7 @@ const Track = /* @__PURE__ */ defineComponent({
8014
8020
  default: () => [withDirectives(createVNode("div", {
8015
8021
  "ref": track,
8016
8022
  "class": ['is-' + barOptions.value.key, 'vc-scroller-track'],
8023
+ "style": attrs.style,
8017
8024
  "onMousedown": handleClickTrack
8018
8025
  }, [createVNode("div", {
8019
8026
  "ref": thumb,
@@ -8028,9 +8035,9 @@ const Track = /* @__PURE__ */ defineComponent({
8028
8035
 
8029
8036
  /** @jsxImportSource vue */
8030
8037
 
8031
- const COMPONENT_NAME$14 = 'vc-scroller-bar';
8038
+ const COMPONENT_NAME$16 = 'vc-scroller-bar';
8032
8039
  const Bar = /* @__PURE__ */ defineComponent({
8033
- name: COMPONENT_NAME$14,
8040
+ name: COMPONENT_NAME$16,
8034
8041
  props: props$R,
8035
8042
  emits: ['change'],
8036
8043
  setup(props, {
@@ -8245,7 +8252,7 @@ const useScroller = (expose) => {
8245
8252
 
8246
8253
  /** @jsxImportSource vue */
8247
8254
 
8248
- const COMPONENT_NAME$13 = 'vc-scroller';
8255
+ const COMPONENT_NAME$15 = 'vc-scroller';
8249
8256
 
8250
8257
  /**
8251
8258
  * 作为备选方案,目前推荐使用ScrollerWheel
@@ -8256,7 +8263,7 @@ const COMPONENT_NAME$13 = 'vc-scroller';
8256
8263
  * 2. 增加了一层嵌套
8257
8264
  */
8258
8265
  const Scroller = /* @__PURE__ */ defineComponent({
8259
- name: COMPONENT_NAME$13,
8266
+ name: COMPONENT_NAME$15,
8260
8267
  props: props$Q,
8261
8268
  emits: ['scroll'],
8262
8269
  setup(props, {
@@ -8317,7 +8324,7 @@ const Scroller = /* @__PURE__ */ defineComponent({
8317
8324
 
8318
8325
  /** @jsxImportSource vue */
8319
8326
 
8320
- const COMPONENT_NAME$12 = 'vc-scroller-wheel';
8327
+ const COMPONENT_NAME$14 = 'vc-scroller-wheel';
8321
8328
 
8322
8329
  /**
8323
8330
  * 为减少一层嵌套，为去除滚动bar的抖动，使用wheel模拟
@@ -8339,8 +8346,13 @@ const COMPONENT_NAME$12 = 'vc-scroller-wheel';
8339
8346
  * 设置scrollTop不会reflow和repaint，不需要考虑transfrom来改变content（transform也只在draw完成）
8340
8347
  */
8341
8348
  const ScrollerWheel = /* @__PURE__ */ defineComponent({
8342
- name: COMPONENT_NAME$12,
8343
- props: props$Q,
8349
+ name: COMPONENT_NAME$14,
8350
+ props: Object.assign(props$Q, {
8351
+ stopPropagation: {
8352
+ type: Boolean,
8353
+ default: true
8354
+ }
8355
+ }),
8344
8356
  emits: ['scroll'],
8345
8357
  setup(props, {
8346
8358
  slots,
@@ -8400,7 +8412,10 @@ const ScrollerWheel = /* @__PURE__ */ defineComponent({
8400
8412
  onMounted(() => {
8401
8413
  wheel = new Wheel(wrapper.value, {
8402
8414
  shouldWheelX,
8403
- shouldWheelY
8415
+ shouldWheelY,
8416
+ stopPropagation: () => {
8417
+ return props.stopPropagation;
8418
+ }
8404
8419
  });
8405
8420
  wheel.on(handleWheel);
8406
8421
  });
@@ -8510,9 +8525,9 @@ const props$P = {
8510
8525
 
8511
8526
  /** @jsxImportSource vue */
8512
8527
 
8513
- const COMPONENT_NAME$11 = 'vc-drawer';
8528
+ const COMPONENT_NAME$13 = 'vc-drawer';
8514
8529
  const DrawerView = /* @__PURE__ */ defineComponent({
8515
- name: COMPONENT_NAME$11,
8530
+ name: COMPONENT_NAME$13,
8516
8531
  props: props$P,
8517
8532
  emits: ['close', 'update:modelValue', 'visible-change'],
8518
8533
  setup(props, {
@@ -8685,9 +8700,9 @@ const props$O = {
8685
8700
 
8686
8701
  /** @jsxImportSource vue */
8687
8702
 
8688
- const COMPONENT_NAME$10 = 'vc-dropdown';
8703
+ const COMPONENT_NAME$12 = 'vc-dropdown';
8689
8704
  const Dropdown = /* @__PURE__ */ defineComponent({
8690
- name: COMPONENT_NAME$10,
8705
+ name: COMPONENT_NAME$12,
8691
8706
  props: props$O,
8692
8707
  setup(props, {
8693
8708
  slots
@@ -8711,9 +8726,9 @@ const props$N = {
8711
8726
 
8712
8727
  /** @jsxImportSource vue */
8713
8728
 
8714
- const COMPONENT_NAME$$ = 'vc-editor';
8729
+ const COMPONENT_NAME$11 = 'vc-editor';
8715
8730
  const Editor = /* @__PURE__ */ defineComponent({
8716
- name: COMPONENT_NAME$$,
8731
+ name: COMPONENT_NAME$11,
8717
8732
  props: props$N,
8718
8733
  setup(props, {
8719
8734
  slots
@@ -8728,7 +8743,7 @@ const Editor = /* @__PURE__ */ defineComponent({
8728
8743
 
8729
8744
  const MEditor = Editor;
8730
8745
 
8731
- const MExpand = Expand;
8746
+ const MExpand = Expand$1;
8732
8747
 
8733
8748
  const props$M = {
8734
8749
  tag: {
@@ -8857,9 +8872,9 @@ const useForm = (expose, options = {}) => {
8857
8872
  });
8858
8873
  };
8859
8874
 
8860
- const COMPONENT_NAME$_ = "vc-form";
8875
+ const COMPONENT_NAME$10 = "vc-form";
8861
8876
  const Form = defineComponent({
8862
- name: COMPONENT_NAME$_,
8877
+ name: COMPONENT_NAME$10,
8863
8878
  props: props$M,
8864
8879
  setup(props, { slots, expose }) {
8865
8880
  useForm(expose);
@@ -9179,9 +9194,9 @@ const useFormItem = (expose) => {
9179
9194
 
9180
9195
  /** @jsxImportSource vue */
9181
9196
 
9182
- const COMPONENT_NAME$Z = 'vc-form-item';
9197
+ const COMPONENT_NAME$$ = 'vc-form-item';
9183
9198
  const FormItem = /* @__PURE__ */ defineComponent({
9184
- name: COMPONENT_NAME$Z,
9199
+ name: COMPONENT_NAME$$,
9185
9200
  props: props$L,
9186
9201
  setup(props, {
9187
9202
  slots,
@@ -9246,9 +9261,9 @@ const props$K = {
9246
9261
  }
9247
9262
  };
9248
9263
 
9249
- const COMPONENT_NAME$Y = "vcm-form";
9264
+ const COMPONENT_NAME$_ = "vcm-form";
9250
9265
  const MForm = defineComponent({
9251
- name: COMPONENT_NAME$Y,
9266
+ name: COMPONENT_NAME$_,
9252
9267
  props: props$K,
9253
9268
  setup(props, { slots, expose }) {
9254
9269
  useForm(expose, {
@@ -9279,9 +9294,9 @@ const props$J = {
9279
9294
 
9280
9295
  /** @jsxImportSource vue */
9281
9296
 
9282
- const COMPONENT_NAME$X = 'vcm-form-item';
9297
+ const COMPONENT_NAME$Z = 'vcm-form-item';
9283
9298
  const MFormItem = /* @__PURE__ */ defineComponent({
9284
- name: COMPONENT_NAME$X,
9299
+ name: COMPONENT_NAME$Z,
9285
9300
  props: props$J,
9286
9301
  setup(props, {
9287
9302
  slots,
@@ -9335,9 +9350,9 @@ const MFormItem = /* @__PURE__ */ defineComponent({
9335
9350
  }
9336
9351
  });
9337
9352
 
9338
- const COMPONENT_NAME$W = "vc-fragment";
9353
+ const COMPONENT_NAME$Y = "vc-fragment";
9339
9354
  const Fragment = defineComponent({
9340
- name: COMPONENT_NAME$W,
9355
+ name: COMPONENT_NAME$Y,
9341
9356
  setup(_, { slots }) {
9342
9357
  return () => h(Fragment$1, slots.default?.());
9343
9358
  }
@@ -9354,9 +9369,9 @@ const props$I = {
9354
9369
 
9355
9370
  /** @jsxImportSource vue */
9356
9371
 
9357
- const COMPONENT_NAME$V = 'vc-html-to-image';
9372
+ const COMPONENT_NAME$X = 'vc-html-to-image';
9358
9373
  const HTMLToImage = /* @__PURE__ */ defineComponent({
9359
- name: COMPONENT_NAME$V,
9374
+ name: COMPONENT_NAME$X,
9360
9375
  props: props$I,
9361
9376
  setup(props, {
9362
9377
  slots
@@ -9432,7 +9447,7 @@ const IMGStore$1 = new IMGStore();
9432
9447
 
9433
9448
  /** @jsxImportSource vue */
9434
9449
 
9435
- const COMPONENT_NAME$U = 'vc-image';
9450
+ const COMPONENT_NAME$W = 'vc-image';
9436
9451
  let isSupportObjectFit = false;
9437
9452
  window.addEventListener('DOMContentLoaded', () => {
9438
9453
  isSupportObjectFit = !IS_SERVER$1 && document.documentElement.style.objectFit !== undefined;
@@ -9445,7 +9460,7 @@ const ObjectFit = {
9445
9460
  SCALE_DOWN: 'scale-down'
9446
9461
  };
9447
9462
  const Image = /* @__PURE__ */ defineComponent({
9448
- name: COMPONENT_NAME$U,
9463
+ name: COMPONENT_NAME$W,
9449
9464
  inheritAttrs: false,
9450
9465
  props: props$H,
9451
9466
  setup(props, {
@@ -9650,9 +9665,9 @@ const props$G = {
9650
9665
 
9651
9666
  /** @jsxImportSource vue */
9652
9667
 
9653
- const COMPONENT_NAME$T = 'vc-image-crop';
9668
+ const COMPONENT_NAME$V = 'vc-image-crop';
9654
9669
  const ImageCrop = /* @__PURE__ */ defineComponent({
9655
- name: COMPONENT_NAME$T,
9670
+ name: COMPONENT_NAME$V,
9656
9671
  props: props$G,
9657
9672
  setup(props, {
9658
9673
  slots
@@ -9676,9 +9691,9 @@ const props$F = {
9676
9691
 
9677
9692
  /** @jsxImportSource vue */
9678
9693
 
9679
- const COMPONENT_NAME$S = 'vc-image-preview';
9694
+ const COMPONENT_NAME$U = 'vc-image-preview';
9680
9695
  const ImagePreview = /* @__PURE__ */ defineComponent({
9681
- name: COMPONENT_NAME$S,
9696
+ name: COMPONENT_NAME$U,
9682
9697
  props: props$F,
9683
9698
  setup(props, {
9684
9699
  slots
@@ -9702,9 +9717,9 @@ const props$E = {
9702
9717
 
9703
9718
  /** @jsxImportSource vue */
9704
9719
 
9705
- const COMPONENT_NAME$R = 'vc-image-processing';
9720
+ const COMPONENT_NAME$T = 'vc-image-processing';
9706
9721
  const ImageProcessing = /* @__PURE__ */ defineComponent({
9707
- name: COMPONENT_NAME$R,
9722
+ name: COMPONENT_NAME$T,
9708
9723
  props: props$E,
9709
9724
  setup(props, {
9710
9725
  slots
@@ -9721,9 +9736,9 @@ const MImageProcessing = ImageProcessing;
9721
9736
 
9722
9737
  /** @jsxImportSource vue */
9723
9738
 
9724
- const COMPONENT_NAME$Q = 'vcm-input';
9739
+ const COMPONENT_NAME$S = 'vcm-input';
9725
9740
  const MInput = /* @__PURE__ */ defineComponent({
9726
- name: COMPONENT_NAME$Q,
9741
+ name: COMPONENT_NAME$S,
9727
9742
  inheritAttrs: false,
9728
9743
  props: {
9729
9744
  ...props$$,
@@ -9812,9 +9827,9 @@ const MInput = /* @__PURE__ */ defineComponent({
9812
9827
 
9813
9828
  /** @jsxImportSource vue */
9814
9829
 
9815
- const COMPONENT_NAME$P = 'vcm-input-number';
9830
+ const COMPONENT_NAME$R = 'vcm-input-number';
9816
9831
  const MInputNumber = /* @__PURE__ */ defineComponent({
9817
- name: COMPONENT_NAME$P,
9832
+ name: COMPONENT_NAME$R,
9818
9833
  props: props$X,
9819
9834
  inheritAttrs: false,
9820
9835
  setup(props, {
@@ -9863,9 +9878,9 @@ const MInputNumber = /* @__PURE__ */ defineComponent({
9863
9878
 
9864
9879
  /** @jsxImportSource vue */
9865
9880
 
9866
- const COMPONENT_NAME$O = 'vcm-input-search';
9881
+ const COMPONENT_NAME$Q = 'vcm-input-search';
9867
9882
  const MInputSearch = /* @__PURE__ */ defineComponent({
9868
- name: COMPONENT_NAME$O,
9883
+ name: COMPONENT_NAME$Q,
9869
9884
  props: {
9870
9885
  ...props$W,
9871
9886
  cancelText: {
@@ -9942,9 +9957,9 @@ const props$D = {
9942
9957
  }
9943
9958
  };
9944
9959
 
9945
- const COMPONENT_NAME$N = "vcm-list";
9960
+ const COMPONENT_NAME$P = "vcm-list";
9946
9961
  const MList = defineComponent({
9947
- name: COMPONENT_NAME$N,
9962
+ name: COMPONENT_NAME$P,
9948
9963
  props: props$D,
9949
9964
  setup(props, { slots }) {
9950
9965
  provide("vc-list", { props });
@@ -9999,10 +10014,10 @@ const props$C = {
9999
10014
 
10000
10015
  /** @jsxImportSource vue */
10001
10016
 
10002
- const COMPONENT_NAME$M = 'vcm-list-item';
10017
+ const COMPONENT_NAME$O = 'vcm-list-item';
10003
10018
  const HTTP_REGEX = /[a-zA-z]+:\/\/[^\s]*/;
10004
10019
  const MListItem = /* @__PURE__ */ defineComponent({
10005
- name: COMPONENT_NAME$M,
10020
+ name: COMPONENT_NAME$O,
10006
10021
  props: props$C,
10007
10022
  emits: ['click'],
10008
10023
  setup(props, {
@@ -10096,11 +10111,11 @@ const props$B = {
10096
10111
 
10097
10112
  /** @jsxImportSource vue */
10098
10113
 
10099
- const COMPONENT_NAME$L = 'vc-marquee';
10114
+ const COMPONENT_NAME$N = 'vc-marquee';
10100
10115
  const ANIMATION = prefixStyle('animation').camel;
10101
10116
  const TRANSFORM_KEBAB = prefixStyle('transform').kebab;
10102
10117
  const Marquee = /* @__PURE__ */ defineComponent({
10103
- name: COMPONENT_NAME$L,
10118
+ name: COMPONENT_NAME$N,
10104
10119
  props: props$B,
10105
10120
  setup(props, {
10106
10121
  slots
@@ -10164,9 +10179,9 @@ const props$A = {
10164
10179
  }
10165
10180
  };
10166
10181
 
10167
- const COMPONENT_NAME$K = "vc-resizer";
10182
+ const COMPONENT_NAME$M = "vc-resizer";
10168
10183
  const Resizer = defineComponent({
10169
- name: COMPONENT_NAME$K,
10184
+ name: COMPONENT_NAME$M,
10170
10185
  props: props$A,
10171
10186
  emit: ["resize", "change"],
10172
10187
  setup(props, { emit, slots, expose }) {
@@ -10309,10 +10324,10 @@ const props$z = {
10309
10324
 
10310
10325
  /** @jsxImportSource vue */
10311
10326
 
10312
- const COMPONENT_NAME$J = 'vc-modal';
10327
+ const COMPONENT_NAME$L = 'vc-modal';
10313
10328
  let zIndexNumber = 1002;
10314
10329
  const ModalView = /* @__PURE__ */ defineComponent({
10315
- name: COMPONENT_NAME$J,
10330
+ name: COMPONENT_NAME$L,
10316
10331
  emits: ['update:modelValue', 'close', 'portal-fulfilled', 'visible-change', 'ok', 'cancel'],
10317
10332
  props: props$z,
10318
10333
  setup(props, {
@@ -10370,11 +10385,6 @@ const ModalView = /* @__PURE__ */ defineComponent({
10370
10385
  };
10371
10386
  });
10372
10387
  useScrollbar(isActive);
10373
- watch(() => props.modelValue, v => {
10374
- isActive.value = v;
10375
- }, {
10376
- immediate: true
10377
- });
10378
10388
  let startX = 0;
10379
10389
  let startY = 0;
10380
10390
  // Portal调用时，可作为初始值
@@ -10401,7 +10411,17 @@ const ModalView = /* @__PURE__ */ defineComponent({
10401
10411
  }, 250, {
10402
10412
  leading: true
10403
10413
  });
10404
- const handleEnter = () => resetOrigin();
10414
+ const isTransitionEnd = ref(false);
10415
+ const handleBeforeEnter = () => {
10416
+ isTransitionEnd.value = false;
10417
+ };
10418
+ const handleEnter = () => {
10419
+ resetOrigin();
10420
+ };
10421
+ const handleAfterEnter = () => {
10422
+ isTransitionEnd.value = true;
10423
+ resizer.value.refresh();
10424
+ };
10405
10425
  /**
10406
10426
  * 动画执行后关闭, 关闭事件都会被执行
10407
10427
  * visible-change 由移除之后触发
@@ -10472,11 +10492,15 @@ const ModalView = /* @__PURE__ */ defineComponent({
10472
10492
  * 这里由于scroller的resize时，render会重置height(实际上就是保留height, 无法移除)
10473
10493
  * 1. 改用nextTick, 抖动严重
10474
10494
  * 2. resizer.value.refresh, 不抖动
10495
+ *
10496
+ * container在最大值时，需要移除，宽度才会缩回去
10475
10497
  */
10476
10498
  const handleContentResize = () => {
10477
- const has = !!scroller.value.wrapper.style.getPropertyValue('height');
10478
- has && scroller.value.wrapper.style.removeProperty('height');
10479
- has && resizer.value.refresh();
10499
+ const needRefreshScroller = !!scroller.value.wrapper.style.getPropertyValue('height');
10500
+ const needRefreshContainer = !!container.value.style.getPropertyValue('height');
10501
+ needRefreshContainer && container.value.style.removeProperty('height');
10502
+ needRefreshScroller && scroller.value.wrapper.style.removeProperty('height');
10503
+ needRefreshScroller && resizer.value.refresh();
10480
10504
  };
10481
10505
  const handleClick = e => {
10482
10506
  // isActive click先触发,后设置后
@@ -10541,6 +10565,11 @@ const ModalView = /* @__PURE__ */ defineComponent({
10541
10565
  document.removeEventListener('mousemove', handleMouseMove);
10542
10566
  document.removeEventListener('mouseup', handleMouseUp);
10543
10567
  });
10568
+ watch(() => props.modelValue, v => {
10569
+ isActive.value = v;
10570
+ }, {
10571
+ immediate: true
10572
+ });
10544
10573
  expose({
10545
10574
  isActive,
10546
10575
  // for portal
@@ -10569,7 +10598,9 @@ const ModalView = /* @__PURE__ */ defineComponent({
10569
10598
  "onClick": e => handleClose(e, false)
10570
10599
  }, [createVNode(TransitionScale, {
10571
10600
  "mode": "part",
10601
+ "onBeforeEnter": handleBeforeEnter,
10572
10602
  "onEnter": handleEnter,
10603
+ "onAfterEnter": handleAfterEnter,
10573
10604
  "onAfterLeave": handleRemove
10574
10605
  }, {
10575
10606
  default: () => [withDirectives(createVNode("div", {
@@ -10605,8 +10636,8 @@ const ModalView = /* @__PURE__ */ defineComponent({
10605
10636
  return createVNode(Scroller, {
10606
10637
  "ref": scroller,
10607
10638
  "native": false,
10608
- "always": true,
10609
- "height": row.height,
10639
+ "always": false,
10640
+ "height": isTransitionEnd.value ? row.height : void 0,
10610
10641
  "contentClass": [{
10611
10642
  'is-confirm': props.mode
10612
10643
  }, props.portalClass, 'vc-modal__content']
@@ -10722,9 +10753,9 @@ const props$y = {
10722
10753
 
10723
10754
  /** @jsxImportSource vue */
10724
10755
 
10725
- const COMPONENT_NAME$I = 'vc-modal';
10756
+ const COMPONENT_NAME$K = 'vc-modal';
10726
10757
  const MModalView = /* @__PURE__ */ defineComponent({
10727
- name: COMPONENT_NAME$I,
10758
+ name: COMPONENT_NAME$K,
10728
10759
  emits: ['update:modelValue', 'portal-fulfilled', 'close', 'ok', 'cancel'],
10729
10760
  props: props$y,
10730
10761
  setup(props, {
@@ -10936,9 +10967,9 @@ const props$x = {
10936
10967
 
10937
10968
  /** @jsxImportSource vue */
10938
10969
 
10939
- const COMPONENT_NAME$H = 'vc-notice';
10970
+ const COMPONENT_NAME$J = 'vc-notice';
10940
10971
  const NoticeView = /* @__PURE__ */ defineComponent({
10941
- name: COMPONENT_NAME$H,
10972
+ name: COMPONENT_NAME$J,
10942
10973
  props: props$x,
10943
10974
  emits: ['portal-fulfilled', 'close', 'before-close'],
10944
10975
  setup(props, {
@@ -11111,9 +11142,9 @@ const props$w = {
11111
11142
 
11112
11143
  /** @jsxImportSource vue */
11113
11144
 
11114
- const COMPONENT_NAME$G = 'vc-option';
11145
+ const COMPONENT_NAME$I = 'vc-option';
11115
11146
  const Option$1 = /* @__PURE__ */ defineComponent({
11116
- name: COMPONENT_NAME$G,
11147
+ name: COMPONENT_NAME$I,
11117
11148
  props: props$w,
11118
11149
  setup(props, {
11119
11150
  slots
@@ -11180,12 +11211,12 @@ const getLabel = (data, v) => {
11180
11211
  const { label = "" } = data.find((i) => i.value == v) || {};
11181
11212
  return label;
11182
11213
  };
11183
- const flattenData = (data, options = {}) => {
11214
+ const flattenData$1 = (data, options = {}) => {
11184
11215
  let result = [];
11185
11216
  data.forEach((item) => {
11186
11217
  if (item.children) {
11187
11218
  const { children, ...rest } = item;
11188
- const items = flattenData(children, options);
11219
+ const items = flattenData$1(children, options);
11189
11220
  result = result.concat(
11190
11221
  options.parent ? [options.cascader ? item : rest].concat(items) : items
11191
11222
  );
@@ -11226,9 +11257,9 @@ const props$u = {
11226
11257
 
11227
11258
  /** @jsxImportSource vue */
11228
11259
 
11229
- const COMPONENT_NAME$F = 'vc-tag';
11260
+ const COMPONENT_NAME$H = 'vc-tag';
11230
11261
  const Tag = /* @__PURE__ */ defineComponent({
11231
- name: COMPONENT_NAME$F,
11262
+ name: COMPONENT_NAME$H,
11232
11263
  props: props$u,
11233
11264
  emits: ['close', 'change'],
11234
11265
  setup(props, {
@@ -11297,9 +11328,9 @@ const props$t = {
11297
11328
 
11298
11329
  /** @jsxImportSource vue */
11299
11330
 
11300
- const COMPONENT_NAME$E = 'vc-select-option';
11331
+ const COMPONENT_NAME$G = 'vc-select-option';
11301
11332
  const Option = /* @__PURE__ */ defineComponent({
11302
- name: COMPONENT_NAME$E,
11333
+ name: COMPONENT_NAME$G,
11303
11334
  props: props$t,
11304
11335
  setup(props, {
11305
11336
  slots
@@ -11372,9 +11403,9 @@ const props$s = {
11372
11403
 
11373
11404
  /** @jsxImportSource vue */
11374
11405
 
11375
- const COMPONENT_NAME$D = 'vc-select-option-group';
11406
+ const COMPONENT_NAME$F = 'vc-select-option-group';
11376
11407
  const OptionGroup = /* @__PURE__ */ defineComponent({
11377
- name: COMPONENT_NAME$D,
11408
+ name: COMPONENT_NAME$F,
11378
11409
  props: props$s,
11379
11410
  setup(props, {
11380
11411
  slots
@@ -11472,9 +11503,9 @@ const props$r = {
11472
11503
  function _isSlot$1(s) {
11473
11504
  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
11474
11505
  }
11475
- const COMPONENT_NAME$C = 'vc-select';
11506
+ const COMPONENT_NAME$E = 'vc-select';
11476
11507
  const Select = /* @__PURE__ */ defineComponent({
11477
- name: COMPONENT_NAME$C,
11508
+ name: COMPONENT_NAME$E,
11478
11509
  props: props$r,
11479
11510
  emits: ['ready', 'close', 'visible-change', 'clear', 'change', 'update:modelValue'],
11480
11511
  setup(props, {
@@ -11495,7 +11526,7 @@ const Select = /* @__PURE__ */ defineComponent({
11495
11526
  const searchRegex = ref(new RegExp(''));
11496
11527
  const currentValue = ref([]);
11497
11528
  const source = computed(() => {
11498
- return flattenData(props.data, {
11529
+ return flattenData$1(props.data, {
11499
11530
  parent: true,
11500
11531
  cascader: true
11501
11532
  });
@@ -11718,9 +11749,9 @@ const Select = /* @__PURE__ */ defineComponent({
11718
11749
 
11719
11750
  /** @jsxImportSource vue */
11720
11751
 
11721
- const COMPONENT_NAME$B = 'vc-pagination';
11752
+ const COMPONENT_NAME$D = 'vc-pagination';
11722
11753
  const Pagination = /* @__PURE__ */ defineComponent({
11723
- name: COMPONENT_NAME$B,
11754
+ name: COMPONENT_NAME$D,
11724
11755
  props: props$v,
11725
11756
  emits: ['update:current', 'change', 'page-size-change'],
11726
11757
  setup(props, {
@@ -11918,9 +11949,9 @@ const props$q = {
11918
11949
 
11919
11950
  /** @jsxImportSource vue */
11920
11951
 
11921
- const COMPONENT_NAME$A = 'vc-picker';
11952
+ const COMPONENT_NAME$C = 'vc-picker';
11922
11953
  const Picker = /* @__PURE__ */ defineComponent({
11923
- name: COMPONENT_NAME$A,
11954
+ name: COMPONENT_NAME$C,
11924
11955
  props: props$q,
11925
11956
  setup(props, {
11926
11957
  slots
@@ -11944,9 +11975,9 @@ const props$p = {
11944
11975
 
11945
11976
  /** @jsxImportSource vue */
11946
11977
 
11947
- const COMPONENT_NAME$z = 'vc-popconfirm';
11978
+ const COMPONENT_NAME$B = 'vc-popconfirm';
11948
11979
  const Popconfirm = /* @__PURE__ */ defineComponent({
11949
- name: COMPONENT_NAME$z,
11980
+ name: COMPONENT_NAME$B,
11950
11981
  props: props$p,
11951
11982
  setup(props, {
11952
11983
  slots
@@ -11972,9 +12003,9 @@ const props$o = {
11972
12003
 
11973
12004
  /** @jsxImportSource vue */
11974
12005
 
11975
- const COMPONENT_NAME$y = 'vc-popup';
12006
+ const COMPONENT_NAME$A = 'vc-popup';
11976
12007
  const Popup = /* @__PURE__ */ defineComponent({
11977
- name: COMPONENT_NAME$y,
12008
+ name: COMPONENT_NAME$A,
11978
12009
  props: props$o,
11979
12010
  setup(props, {
11980
12011
  slots
@@ -12001,9 +12032,9 @@ const props$n = {
12001
12032
 
12002
12033
  /** @jsxImportSource vue */
12003
12034
 
12004
- const COMPONENT_NAME$x = 'vc-print';
12035
+ const COMPONENT_NAME$z = 'vc-print';
12005
12036
  const Print = /* @__PURE__ */ defineComponent({
12006
- name: COMPONENT_NAME$x,
12037
+ name: COMPONENT_NAME$z,
12007
12038
  props: props$n,
12008
12039
  setup(props, {
12009
12040
  expose,
@@ -12099,9 +12130,9 @@ const props$m = {
12099
12130
 
12100
12131
  /** @jsxImportSource vue */
12101
12132
 
12102
- const COMPONENT_NAME$w = 'vc-progress-circle';
12133
+ const COMPONENT_NAME$y = 'vc-progress-circle';
12103
12134
  const Circle = /* @__PURE__ */ defineComponent({
12104
- name: COMPONENT_NAME$w,
12135
+ name: COMPONENT_NAME$y,
12105
12136
  props: props$m,
12106
12137
  setup(props, {
12107
12138
  slots
@@ -12151,16 +12182,16 @@ const Circle = /* @__PURE__ */ defineComponent({
12151
12182
  "fill-opacity": "0"
12152
12183
  }, null)]), createVNode("div", {
12153
12184
  "class": "vc-progress-circle__inner"
12154
- }, [slots.default ? slots.default() : createVNode("span", null, [`${props.percent}%`])])])]);
12185
+ }, [slots.default ? slots.default() : props.showText && createVNode("span", null, [`${props.percent}%`])])])]);
12155
12186
  };
12156
12187
  }
12157
12188
  });
12158
12189
 
12159
12190
  /** @jsxImportSource vue */
12160
12191
 
12161
- const COMPONENT_NAME$v = 'vc-progress-line';
12192
+ const COMPONENT_NAME$x = 'vc-progress-line';
12162
12193
  const Line = /* @__PURE__ */ defineComponent({
12163
- name: COMPONENT_NAME$v,
12194
+ name: COMPONENT_NAME$x,
12164
12195
  props: props$m,
12165
12196
  setup(props) {
12166
12197
  const colorStyle = computed(() => {
@@ -12204,9 +12235,9 @@ const Line = /* @__PURE__ */ defineComponent({
12204
12235
  function _isSlot(s) {
12205
12236
  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
12206
12237
  }
12207
- const COMPONENT_NAME$u = 'vc-progress';
12238
+ const COMPONENT_NAME$w = 'vc-progress';
12208
12239
  const Progress = /* @__PURE__ */ defineComponent({
12209
- name: COMPONENT_NAME$u,
12240
+ name: COMPONENT_NAME$w,
12210
12241
  props: props$m,
12211
12242
  setup(props, {
12212
12243
  slots
@@ -12358,9 +12389,9 @@ const useRadio = () => {
12358
12389
 
12359
12390
  /** @jsxImportSource vue */
12360
12391
 
12361
- const COMPONENT_NAME$t = 'vc-radio';
12392
+ const COMPONENT_NAME$v = 'vc-radio';
12362
12393
  const Radio = /* @__PURE__ */ defineComponent({
12363
- name: COMPONENT_NAME$t,
12394
+ name: COMPONENT_NAME$v,
12364
12395
  props: props$l,
12365
12396
  emits: ['update:modelValue', 'change'],
12366
12397
  setup(props, {
@@ -12471,9 +12502,9 @@ const useRadioGroup = () => {
12471
12502
 
12472
12503
  /** @jsxImportSource vue */
12473
12504
 
12474
- const COMPONENT_NAME$s = 'vc-radio-group';
12505
+ const COMPONENT_NAME$u = 'vc-radio-group';
12475
12506
  const RadioGroup = /* @__PURE__ */ defineComponent({
12476
- name: COMPONENT_NAME$s,
12507
+ name: COMPONENT_NAME$u,
12477
12508
  props: props$k,
12478
12509
  emits: ['update:modelValue', 'change'],
12479
12510
  setup(props, {
@@ -12495,9 +12526,9 @@ const RadioGroup = /* @__PURE__ */ defineComponent({
12495
12526
 
12496
12527
  /** @jsxImportSource vue */
12497
12528
 
12498
- const COMPONENT_NAME$r = 'vcm-radio';
12529
+ const COMPONENT_NAME$t = 'vcm-radio';
12499
12530
  const MRadio = /* @__PURE__ */ defineComponent({
12500
- name: COMPONENT_NAME$r,
12531
+ name: COMPONENT_NAME$t,
12501
12532
  props: props$l,
12502
12533
  emits: ['update:modelValue', 'change'],
12503
12534
  setup(props, {
@@ -12538,9 +12569,9 @@ const MRadio = /* @__PURE__ */ defineComponent({
12538
12569
 
12539
12570
  /** @jsxImportSource vue */
12540
12571
 
12541
- const COMPONENT_NAME$q = 'vcm-radio-group';
12572
+ const COMPONENT_NAME$s = 'vcm-radio-group';
12542
12573
  const MRadioGroup = /* @__PURE__ */ defineComponent({
12543
- name: COMPONENT_NAME$q,
12574
+ name: COMPONENT_NAME$s,
12544
12575
  props: props$k,
12545
12576
  emits: ['update:modelValue', 'change'],
12546
12577
  setup(props, {
@@ -12569,9 +12600,9 @@ const props$j = {
12569
12600
 
12570
12601
  /** @jsxImportSource vue */
12571
12602
 
12572
- const COMPONENT_NAME$p = 'vc-rate';
12603
+ const COMPONENT_NAME$r = 'vc-rate';
12573
12604
  const Rate = /* @__PURE__ */ defineComponent({
12574
- name: COMPONENT_NAME$p,
12605
+ name: COMPONENT_NAME$r,
12575
12606
  props: props$j,
12576
12607
  setup(props, {
12577
12608
  slots
@@ -12639,9 +12670,9 @@ const props$i = {
12639
12670
 
12640
12671
  /** @jsxImportSource vue */
12641
12672
 
12642
- const COMPONENT_NAME$o = 'vc-recycle-list-scroll-state';
12673
+ const COMPONENT_NAME$q = 'vc-recycle-list-scroll-state';
12643
12674
  const ScrollState = /* @__PURE__ */ defineComponent({
12644
- name: COMPONENT_NAME$o,
12675
+ name: COMPONENT_NAME$q,
12645
12676
  setup(_, {
12646
12677
  slots
12647
12678
  }) {
@@ -12771,12 +12802,12 @@ const useDirectionKeys = () => {
12771
12802
 
12772
12803
  /** @jsxImportSource vue */
12773
12804
 
12774
- const COMPONENT_NAME$n = 'vc-recycle-list-container';
12805
+ const COMPONENT_NAME$p = 'vc-recycle-list-container';
12775
12806
 
12776
12807
  // TODO: 抽离
12777
12808
  const transformKey = $.prefixStyle('transform').camel;
12778
12809
  const Container = /* @__PURE__ */ defineComponent({
12779
- name: COMPONENT_NAME$n,
12810
+ name: COMPONENT_NAME$p,
12780
12811
  props: props$h,
12781
12812
  emits: ['refresh'],
12782
12813
  setup(props, {
@@ -12874,9 +12905,9 @@ const Container = /* @__PURE__ */ defineComponent({
12874
12905
 
12875
12906
  /** @jsxImportSource vue */
12876
12907
 
12877
- const COMPONENT_NAME$m = 'vc-recycle-list-item';
12908
+ const COMPONENT_NAME$o = 'vc-recycle-list-item';
12878
12909
  const Item = /* @__PURE__ */ defineComponent({
12879
- name: COMPONENT_NAME$m,
12910
+ name: COMPONENT_NAME$o,
12880
12911
  props: {
12881
12912
  vertical: {
12882
12913
  type: Boolean,
@@ -12919,11 +12950,11 @@ const Item = /* @__PURE__ */ defineComponent({
12919
12950
 
12920
12951
  /** @jsxImportSource vue */
12921
12952
 
12922
- const COMPONENT_NAME$l = 'vc-recycle-list';
12953
+ const COMPONENT_NAME$n = 'vc-recycle-list';
12923
12954
  const RecycleList = /* @__PURE__ */ defineComponent({
12924
- name: COMPONENT_NAME$l,
12955
+ name: COMPONENT_NAME$n,
12925
12956
  props: props$i,
12926
- emits: ['scroll'],
12957
+ emits: ['scroll', 'row-resize'],
12927
12958
  setup(props, {
12928
12959
  slots,
12929
12960
  expose,
@@ -13022,7 +13053,7 @@ const RecycleList = /* @__PURE__ */ defineComponent({
13022
13053
  const isLoading = computed(() => {
13023
13054
  return loadings.value.length;
13024
13055
  });
13025
- const scrollTo = options => {
13056
+ const scrollTo = (options, force) => {
13026
13057
  let options$ = {
13027
13058
  x: 0,
13028
13059
  y: 0
@@ -13033,10 +13064,9 @@ const RecycleList = /* @__PURE__ */ defineComponent({
13033
13064
  options$ = Object.assign(options$, options);
13034
13065
  }
13035
13066
  const el = wrapper.value;
13036
- const x = el.scrollLeft;
13037
- const y = el.scrollTop;
13038
- x !== options$.x && (el.scrollLeft = options$.x);
13039
- y !== options$.y && (el.scrollTop = options$.y);
13067
+ (force || el.scrollLeft !== options$.x) && (el.scrollLeft = options$.x);
13068
+ (force || el.scrollLeft !== options$.y) && (el.scrollTop = options$.y);
13069
+ scroller.value.scrollTo(options);
13040
13070
  };
13041
13071
  const scrollToIndex = (index, offset = 0) => {
13042
13072
  const item = rebuildData.value[index];
@@ -13069,12 +13099,21 @@ const RecycleList = /* @__PURE__ */ defineComponent({
13069
13099
  const current = props.inverted ? rebuildData.value[rebuildDataIndexMap.value[index]] : rebuildData.value[index];
13070
13100
  if (!current) return; // 受到`removeUnusedPlaceholders`影响，无效的会被回收
13071
13101
 
13102
+ const oldSize = current.size;
13072
13103
  const dom = preloads.value[index] || curloads.value[props.inverted ? index : index - firstItemIndex.value];
13073
13104
  if (dom) {
13074
13105
  current.size = dom[K.offsetSize] || placeholderSize.value;
13075
13106
  } else if (current) {
13076
13107
  current.size = placeholderSize.value;
13077
13108
  }
13109
+
13110
+ // 这样的考虑欠佳，待优化
13111
+ if (oldSize !== current.size) {
13112
+ emit('row-resize', {
13113
+ index: current.id,
13114
+ size: current.size
13115
+ });
13116
+ }
13078
13117
  };
13079
13118
  const refreshItemPosition = () => {
13080
13119
  const sizes = Array.from({
@@ -13481,9 +13520,9 @@ const props$g = {
13481
13520
 
13482
13521
  /** @jsxImportSource vue */
13483
13522
 
13484
- const COMPONENT_NAME$k = 'vc-slider';
13523
+ const COMPONENT_NAME$m = 'vc-slider';
13485
13524
  const Slider = /* @__PURE__ */ defineComponent({
13486
- name: COMPONENT_NAME$k,
13525
+ name: COMPONENT_NAME$m,
13487
13526
  props: props$g,
13488
13527
  setup(props, {
13489
13528
  slots
@@ -13507,9 +13546,9 @@ const props$f = {
13507
13546
 
13508
13547
  /** @jsxImportSource vue */
13509
13548
 
13510
- const COMPONENT_NAME$j = 'vc-sort-list';
13549
+ const COMPONENT_NAME$l = 'vc-sort-list';
13511
13550
  const SortList = /* @__PURE__ */ defineComponent({
13512
- name: COMPONENT_NAME$j,
13551
+ name: COMPONENT_NAME$l,
13513
13552
  props: props$f,
13514
13553
  setup(props, {
13515
13554
  slots
@@ -13533,9 +13572,9 @@ const props$e = {
13533
13572
 
13534
13573
  /** @jsxImportSource vue */
13535
13574
 
13536
- const COMPONENT_NAME$i = 'vc-steps';
13575
+ const COMPONENT_NAME$k = 'vc-steps';
13537
13576
  const Steps = /* @__PURE__ */ defineComponent({
13538
- name: COMPONENT_NAME$i,
13577
+ name: COMPONENT_NAME$k,
13539
13578
  props: props$e,
13540
13579
  setup(props, {
13541
13580
  slots
@@ -13648,9 +13687,9 @@ const useSwitch = (expose) => {
13648
13687
 
13649
13688
  /** @jsxImportSource vue */
13650
13689
 
13651
- const COMPONENT_NAME$h = 'vc-switch';
13690
+ const COMPONENT_NAME$j = 'vc-switch';
13652
13691
  const Switch = /* @__PURE__ */ defineComponent({
13653
- name: COMPONENT_NAME$h,
13692
+ name: COMPONENT_NAME$j,
13654
13693
  props: props$d,
13655
13694
  // click -> onClick要被拦截，此处不能放置
13656
13695
  emits: ['update:modelValue', 'change', 'click'],
@@ -13687,9 +13726,9 @@ const Switch = /* @__PURE__ */ defineComponent({
13687
13726
 
13688
13727
  /** @jsxImportSource vue */
13689
13728
 
13690
- const COMPONENT_NAME$g = 'vcm-switch';
13729
+ const COMPONENT_NAME$i = 'vcm-switch';
13691
13730
  const MSwitch = /* @__PURE__ */ defineComponent({
13692
- name: COMPONENT_NAME$g,
13731
+ name: COMPONENT_NAME$i,
13693
13732
  props: props$d,
13694
13733
  // click -> onClick要被拦截，此处不能放置
13695
13734
  emits: ['update:modelValue', 'change', 'click'],
@@ -13724,31 +13763,2938 @@ const MSwitch = /* @__PURE__ */ defineComponent({
13724
13763
  }
13725
13764
  });
13726
13765
 
13727
- const props$c = {
13728
- tag: {
13729
- type: String,
13730
- default: "div"
13766
+ const parseHeight = (height) => {
13767
+ if (typeof height === "number") {
13768
+ return height;
13769
+ }
13770
+ if (height && typeof height === "string") {
13771
+ if (/^\d+(?:px)?/.test(height)) {
13772
+ return parseInt(height, 10);
13773
+ }
13774
+ throw new VcError("table", "Invalid Height");
13775
+ }
13776
+ return null;
13777
+ };
13778
+ const parseWidth = (width) => {
13779
+ if (width !== void 0) {
13780
+ width = parseInt(width, 10);
13781
+ if (isNaN(width)) {
13782
+ width = null;
13783
+ }
13784
+ }
13785
+ return width;
13786
+ };
13787
+ const parseMinWidth = (minWidth) => {
13788
+ if (typeof minWidth !== "undefined") {
13789
+ minWidth = parseWidth(minWidth);
13790
+ if (isNaN(minWidth)) {
13791
+ minWidth = 80;
13792
+ }
13793
+ }
13794
+ return minWidth;
13795
+ };
13796
+ const getRowIdentity = (row, rowKey) => {
13797
+ if (row.__KEY__) return row.__KEY__;
13798
+ if (!row) throw new VcError("table", "row is required when get row identity");
13799
+ if (typeof rowKey === "string") {
13800
+ if (!rowKey.includes(".")) {
13801
+ return row[rowKey];
13802
+ }
13803
+ const key = rowKey.split(".");
13804
+ let current = row;
13805
+ for (let i = 0; i < key.length; i++) {
13806
+ current = current[key[i]];
13807
+ }
13808
+ return current;
13809
+ } else if (typeof rowKey === "function") {
13810
+ return rowKey.call(null, row);
13811
+ }
13812
+ };
13813
+ const walkTreeNode = (root, cb, opts = {}) => {
13814
+ const {
13815
+ childrenKey = "children",
13816
+ lazyKey = "hasChildren",
13817
+ level: baseLevel = 0
13818
+ } = opts;
13819
+ const isNil = (array) => !(Array.isArray(array) && array.length);
13820
+ function _walker(parent, children, level) {
13821
+ cb(parent, children, level);
13822
+ children.forEach((item) => {
13823
+ if (item[lazyKey]) {
13824
+ cb(item, null, level + 1);
13825
+ return;
13826
+ }
13827
+ const $children = item[childrenKey];
13828
+ if (!isNil($children)) {
13829
+ _walker(item, $children, level + 1);
13830
+ }
13831
+ });
13832
+ }
13833
+ root.forEach((item) => {
13834
+ if (item[lazyKey]) {
13835
+ cb(item, null, baseLevel);
13836
+ return;
13837
+ }
13838
+ const children = item[childrenKey];
13839
+ if (!isNil(children)) {
13840
+ _walker(item, children, baseLevel);
13841
+ }
13842
+ });
13843
+ };
13844
+ const getKeysMap = (array = [], rowKey) => {
13845
+ const arrayMap = {};
13846
+ array.forEach((row, index) => {
13847
+ arrayMap[getRowIdentity(row, rowKey)] = { row, index };
13848
+ });
13849
+ return arrayMap;
13850
+ };
13851
+ const getColumnById = (columns, columnId) => {
13852
+ let column = null;
13853
+ columns.forEach((item) => {
13854
+ if (item.id === columnId) {
13855
+ column = item;
13856
+ }
13857
+ });
13858
+ return column;
13859
+ };
13860
+ const getColumnByCell = (table, cell) => {
13861
+ const matches = (cell.className || "").match(/vc-table_[^\s]+/gm);
13862
+ if (matches) {
13863
+ return getColumnById(table, matches[0]);
13864
+ }
13865
+ return null;
13866
+ };
13867
+ const getCell = (event) => {
13868
+ let cell = event.target;
13869
+ while (cell && cell.tagName.toUpperCase() !== "HTML") {
13870
+ if (cell.tagName.toUpperCase() === "TD") {
13871
+ return cell;
13872
+ }
13873
+ cell = cell.parentNode;
13874
+ }
13875
+ return null;
13876
+ };
13877
+ const flattenData = (data, opts = {}) => {
13878
+ const result = [];
13879
+ data.forEach((item) => {
13880
+ if (item.children) {
13881
+ const { children, ...rest } = item;
13882
+ opts.parent ? result.push(...[opts.cascader ? item : rest, ...flattenData(children, opts)]) : result.push(...flattenData(children));
13883
+ } else {
13884
+ result.push(item);
13885
+ }
13886
+ });
13887
+ return result;
13888
+ };
13889
+
13890
+ class BaseWatcher {
13891
+ states = reactive({
13892
+ // 渲染的数据来源，是对 table 中的 data 过滤排序后的结果
13893
+ _data: [],
13894
+ data: [],
13895
+ list: [],
13896
+ // 是否包含固定列
13897
+ isComplex: false,
13898
+ // 列
13899
+ _columns: [],
13900
+ // 动态收集vc-table-column中的columnConfig
13901
+ originColumns: [],
13902
+ // leftFixedColumns, notFixedColumns, rightFixedColumns
13903
+ columns: [],
13904
+ // 包括 leftFixedLeafColumns，leafColumns，rightFixedLeafColumns
13905
+ leftFixedColumns: [],
13906
+ rightFixedColumns: [],
13907
+ leafColumns: [],
13908
+ leftFixedLeafColumns: [],
13909
+ rightFixedLeafColumns: [],
13910
+ leafColumnsLength: 0,
13911
+ leftFixedLeafColumnsLength: 0,
13912
+ rightFixedLeafColumnsLength: 0,
13913
+ // 选择
13914
+ isAllSelected: false,
13915
+ selection: [],
13916
+ reserveSelection: false,
13917
+ selectable: null,
13918
+ hoverRowIndex: null,
13919
+ // Current
13920
+ currentRow: null,
13921
+ // Expand
13922
+ defaultExpandAll: false,
13923
+ expandRows: [],
13924
+ // Tree
13925
+ treeExpandRowValue: [],
13926
+ treeData: {},
13927
+ // item的状态，比如loading, loaded
13928
+ treeLazy: false,
13929
+ treelazyNodeMap: {},
13930
+ // 源数据
13931
+ treeLazyData: [],
13932
+ // 源数据展开
13933
+ treeLazyColumnIdentifier: "hasChildren",
13934
+ treeChildrenColumnName: "children"
13935
+ });
13936
+ }
13937
+
13938
+ class Expand {
13939
+ store;
13940
+ constructor(store) {
13941
+ this.store = store;
13942
+ }
13943
+ update() {
13944
+ const store = this.store;
13945
+ const { rowKey, defaultExpandAll } = this.store.table.props;
13946
+ const { data = [], expandRows } = store.states;
13947
+ if (defaultExpandAll) {
13948
+ store.states.expandRows = data.slice();
13949
+ } else if (rowKey) {
13950
+ const expandRowsMap = getKeysMap(expandRows, rowKey);
13951
+ store.states.expandRows = data.reduce((prev, row) => {
13952
+ const rowId = getRowIdentity(row, rowKey);
13953
+ const rowInfo = expandRowsMap[rowId];
13954
+ if (rowInfo) {
13955
+ prev.push(row);
13956
+ }
13957
+ return prev;
13958
+ }, []);
13959
+ } else {
13960
+ store.states.expandRows = [];
13961
+ }
13962
+ }
13963
+ toggle(row, expanded) {
13964
+ const store = this.store;
13965
+ const { expandRows } = store.states;
13966
+ const changed = store.toggleRowStatus(expandRows, row, expanded);
13967
+ if (changed) {
13968
+ store.table.emit("expand-change", row, expandRows.slice());
13969
+ store.scheduleLayout();
13970
+ }
13971
+ }
13972
+ reset(ids) {
13973
+ const store = this.store;
13974
+ store.checkRowKey();
13975
+ const { rowKey } = store.table.props;
13976
+ const { data } = store.states;
13977
+ const keysMap = getKeysMap(data, rowKey);
13978
+ store.states.expandRows = ids.reduce((prev, cur) => {
13979
+ const info = keysMap[cur];
13980
+ if (info) {
13981
+ prev.push(info.row);
13982
+ }
13983
+ return prev;
13984
+ }, []);
13985
+ }
13986
+ isExpanded(row) {
13987
+ const { rowKey } = this.store.table.props;
13988
+ const { expandRows = [] } = this.store.states;
13989
+ if (rowKey) {
13990
+ const expandMap = getKeysMap(expandRows, rowKey);
13991
+ return !!expandMap[getRowIdentity(row, rowKey)];
13992
+ }
13993
+ return expandRows.indexOf(row) !== -1;
13994
+ }
13995
+ }
13996
+
13997
+ class Current {
13998
+ store;
13999
+ constructor(store) {
14000
+ this.store = store;
14001
+ }
14002
+ reset(id) {
14003
+ const store = this.store;
14004
+ const { rowKey } = store.table.props;
14005
+ store.checkRowKey();
14006
+ const { data = [] } = store.states;
14007
+ const currentRow = data.find((item) => getRowIdentity(item, rowKey) === id);
14008
+ store.states.currentRow = currentRow || null;
14009
+ }
14010
+ update() {
14011
+ const store = this.store;
14012
+ const { rowKey } = store.table.props;
14013
+ const { data = [], currentRow } = store.states;
14014
+ const oldCurrentRow = currentRow;
14015
+ if (oldCurrentRow && !data.includes(oldCurrentRow)) {
14016
+ let newCurrentRow = null;
14017
+ if (rowKey) {
14018
+ newCurrentRow = data.find((item) => {
14019
+ return getRowIdentity(item, rowKey) === getRowIdentity(oldCurrentRow, rowKey);
14020
+ });
14021
+ }
14022
+ store.states.currentRow = newCurrentRow;
14023
+ if (newCurrentRow !== oldCurrentRow) {
14024
+ store.table.emit("current-change", null, oldCurrentRow);
14025
+ }
14026
+ }
14027
+ }
14028
+ }
14029
+
14030
+ let Tree$1 = class Tree {
14031
+ store;
14032
+ /**
14033
+ * 解决问题嵌入型的数据，watch 无法是检测到变化
14034
+ * TODO: 是否会造成性能问题？同base-watcher flattenData
14035
+ * { id: { level, children } }
14036
+ */
14037
+ normalizedData = computed(() => {
14038
+ const { rowKey } = this.store.table.props;
14039
+ if (!rowKey) return {};
14040
+ return this.normalize(this.store.states.data || []);
14041
+ });
14042
+ /**
14043
+ * 针对懒加载的情形，不处理嵌套数据
14044
+ * { id: { children } }
14045
+ */
14046
+ normalizedLazyNode = computed(() => {
14047
+ const { rowKey } = this.store.table.props;
14048
+ const { treelazyNodeMap, treeLazyColumnIdentifier, treeChildrenColumnName } = this.store.states;
14049
+ const keys = Object.keys(treelazyNodeMap);
14050
+ const res = {};
14051
+ if (!keys.length) return res;
14052
+ keys.forEach((key) => {
14053
+ if (treelazyNodeMap[key].length) {
14054
+ const item = { children: [] };
14055
+ treelazyNodeMap[key].forEach((row) => {
14056
+ const id = getRowIdentity(row, rowKey);
14057
+ item.children.push(id);
14058
+ const hasChildren = row[treeLazyColumnIdentifier] || row[treeChildrenColumnName] && row[treeChildrenColumnName].length === 0;
14059
+ if (hasChildren && !res[id]) {
14060
+ res[id] = { children: [] };
14061
+ }
14062
+ });
14063
+ res[key] = item;
14064
+ }
14065
+ });
14066
+ return res;
14067
+ });
14068
+ constructor(store) {
14069
+ this.store = store;
14070
+ watch(
14071
+ () => [this.normalizedData.value, this.normalizedLazyNode.value],
14072
+ () => this.update()
14073
+ );
14074
+ }
14075
+ normalize(data) {
14076
+ const { rowKey } = this.store.table.props;
14077
+ const { treeChildrenColumnName, treeLazyColumnIdentifier, treeLazy } = this.store.states;
14078
+ const res = {};
14079
+ walkTreeNode(
14080
+ data,
14081
+ (parent, children, level) => {
14082
+ const parentId = getRowIdentity(parent, rowKey);
14083
+ if (Array.isArray(children)) {
14084
+ res[parentId] = {
14085
+ children: children.map((row) => getRowIdentity(row, rowKey)),
14086
+ level
14087
+ };
14088
+ } else if (treeLazy) {
14089
+ res[parentId] = {
14090
+ children: [],
14091
+ lazy: true,
14092
+ level
14093
+ };
14094
+ }
14095
+ },
14096
+ {
14097
+ childrenKey: treeChildrenColumnName,
14098
+ lazyKey: treeLazyColumnIdentifier
14099
+ }
14100
+ );
14101
+ return res;
14102
+ }
14103
+ // 获取当前展开最大的level
14104
+ getMaxLevel() {
14105
+ const { rowKey } = this.store.table.props;
14106
+ const { data, treeData } = this.store.states;
14107
+ const levels = data.map((item) => {
14108
+ const traverse = (source) => {
14109
+ if (!source) return 0;
14110
+ if (source.expanded && source.children.length > 0) {
14111
+ return max([source.level, ...source.children.map((key) => traverse(treeData[key]))]);
14112
+ } else {
14113
+ return source.level;
14114
+ }
14115
+ };
14116
+ const id = getRowIdentity(item, rowKey);
14117
+ return traverse(treeData[id]);
14118
+ });
14119
+ return max(levels) || 0;
14120
+ }
14121
+ update() {
14122
+ const nested = this.normalizedData.value;
14123
+ const normalizedLazyNode = this.normalizedLazyNode.value;
14124
+ const keys = Object.keys(nested);
14125
+ const newTreeData = {};
14126
+ if (keys.length) {
14127
+ const { defaultExpandAll } = this.store.table.props;
14128
+ const { treeData: oldTreeData, treeExpandRowValue, treeLazy } = this.store.states;
14129
+ const rootLazyRowValue = [];
14130
+ const getExpanded = (oldValue, key) => {
14131
+ const included = defaultExpandAll || treeExpandRowValue && treeExpandRowValue.indexOf(key) !== -1;
14132
+ return !!(oldValue && oldValue.expanded || included);
14133
+ };
14134
+ keys.forEach((key) => {
14135
+ const oldValue = oldTreeData[key];
14136
+ const newValue = { ...nested[key] };
14137
+ newValue.expanded = getExpanded(oldValue, key);
14138
+ if (newValue.lazy) {
14139
+ const { loaded = false, loading = false } = oldValue || {};
14140
+ newValue.loaded = !!loaded;
14141
+ newValue.loading = !!loading;
14142
+ rootLazyRowValue.push(key);
14143
+ }
14144
+ newTreeData[key] = newValue;
14145
+ });
14146
+ const lazyKeys = Object.keys(normalizedLazyNode);
14147
+ if (treeLazy && lazyKeys.length && rootLazyRowValue.length) {
14148
+ lazyKeys.forEach((key) => {
14149
+ const oldValue = oldTreeData[key];
14150
+ const lazyNodeChildren = normalizedLazyNode[key].children;
14151
+ if (rootLazyRowValue.includes(key)) {
14152
+ if (newTreeData[key].children.length !== 0) {
14153
+ throw new VcError("table", "children需要为空数组");
14154
+ }
14155
+ newTreeData[key].children = lazyNodeChildren;
14156
+ } else {
14157
+ const { loaded = false, loading = false } = oldValue || {};
14158
+ newTreeData[key] = reactive({
14159
+ lazy: true,
14160
+ loaded: !!loaded,
14161
+ loading: !!loading,
14162
+ expanded: getExpanded(oldValue, key),
14163
+ children: lazyNodeChildren,
14164
+ level: ""
14165
+ });
14166
+ }
14167
+ });
14168
+ }
14169
+ }
14170
+ this.store.states.treeData = newTreeData;
14171
+ this.store.updateTableScrollY();
14172
+ }
14173
+ expand(ids) {
14174
+ this.store.states.treeExpandRowValue = ids;
14175
+ this.update();
14176
+ }
14177
+ toggle(row, expanded) {
14178
+ this.store.checkRowKey();
14179
+ const { rowKey } = this.store.table.props;
14180
+ const { treeData } = this.store.states;
14181
+ const id = getRowIdentity(row, rowKey);
14182
+ const data = id && treeData[id];
14183
+ if (id && data && "expanded" in data) {
14184
+ const oldExpanded = data.expanded;
14185
+ expanded = typeof expanded === "undefined" ? !data.expanded : expanded;
14186
+ this.store.states.treeData[id].expanded = expanded;
14187
+ if (oldExpanded !== expanded) {
14188
+ this.store.table.emit("expand-change", row, expanded, this.getMaxLevel());
14189
+ }
14190
+ this.store.updateTableScrollY();
14191
+ }
14192
+ }
14193
+ loadOrToggle(row) {
14194
+ this.store.checkRowKey();
14195
+ const { rowKey } = this.store.table.props;
14196
+ const { treeLazy, treeData } = this.store.states;
14197
+ const id = getRowIdentity(row, rowKey);
14198
+ const data = treeData[id];
14199
+ if (treeLazy && data && "loaded" in data && !data.loaded) {
14200
+ this.loadData(row, id, data);
14201
+ } else {
14202
+ this.toggle(row);
14203
+ }
14204
+ }
14205
+ loadData(row, key, treeNode) {
14206
+ this.store.checkRowKey();
14207
+ const { table } = this.store;
14208
+ const { rowKey } = table.props;
14209
+ const { treelazyNodeMap, treeData, treeChildrenColumnName, treeLazyColumnIdentifier } = this.store.states;
14210
+ if (table.props.loadExpand && !treeData[key].loaded) {
14211
+ this.store.states.treeData[key].loading = true;
14212
+ const promise = table.props.loadExpand(row, treeNode);
14213
+ const fn = (data) => {
14214
+ if (!Array.isArray(data)) {
14215
+ throw new VcError("table", "data必须是数组");
14216
+ }
14217
+ this.store.states.treeData[key].loading = false;
14218
+ this.store.states.treeData[key].loaded = true;
14219
+ this.store.states.treeData[key].expanded = true;
14220
+ walkTreeNode(
14221
+ data,
14222
+ (parent, _, level) => {
14223
+ const id = getRowIdentity(parent, rowKey);
14224
+ Object.defineProperty(parent, "__KEY__", {
14225
+ value: `${level}__${id}`,
14226
+ writable: false
14227
+ });
14228
+ },
14229
+ {
14230
+ childrenKey: treeChildrenColumnName,
14231
+ lazyKey: treeLazyColumnIdentifier,
14232
+ level: treeNode.level
14233
+ }
14234
+ );
14235
+ if (data.length) {
14236
+ this.store.states.treelazyNodeMap[key] = data;
14237
+ if (table.props.expandSelectable) {
14238
+ this.store.states.treeLazyData = Object.keys(treelazyNodeMap).reduce((pre, cur) => {
14239
+ return pre.concat(treelazyNodeMap[cur]);
14240
+ }, []);
14241
+ }
14242
+ }
14243
+ if (this.store.isSelected(row)) {
14244
+ data.forEach((i) => {
14245
+ this.store.toggleRowSelection(i);
14246
+ });
14247
+ }
14248
+ this.store.updateAllSelected();
14249
+ nextTick(() => {
14250
+ table.emit("expand-change", row, true, this.getMaxLevel());
14251
+ });
14252
+ };
14253
+ if (promise && promise.then) {
14254
+ promise.then((data) => fn(data)).catch((e) => {
14255
+ throw new VcError("table", e);
14256
+ });
14257
+ } else if (Array.isArray(promise)) {
14258
+ fn(promise);
14259
+ }
14260
+ }
14261
+ }
14262
+ };
14263
+
14264
+ class Layout {
14265
+ table;
14266
+ store;
14267
+ states = reactive({
14268
+ height: null,
14269
+ scrollX: false,
14270
+ scrollY: false,
14271
+ bodyWidth: null,
14272
+ leftFixedWidth: null,
14273
+ rightFixedWidth: null,
14274
+ tableHeight: null,
14275
+ headerHeight: 44,
14276
+ // Table Header Height
14277
+ appendHeight: 0,
14278
+ // Append Slot Height
14279
+ footerHeight: 44,
14280
+ // Table Footer Height
14281
+ bodyHeight: null
14282
+ // Table Height - Table Header Height
14283
+ });
14284
+ constructor(store) {
14285
+ this.store = store;
14286
+ this.table = store.table;
14287
+ if (!this.table) {
14288
+ throw new VcError("table", "Table Layout 必须包含table实例");
14289
+ }
14290
+ if (!this.store) {
14291
+ throw new VcError("table", "Table Layout 必须包含store实例");
14292
+ }
14293
+ this.updateScroller = this.updateScroller.bind(this);
14294
+ this.updateColumns = this.updateColumns.bind(this);
14295
+ onMounted(() => {
14296
+ this.updateColumns();
14297
+ this.updateScroller();
14298
+ });
14299
+ let __updated__;
14300
+ onUpdated(() => {
14301
+ if (__updated__) return;
14302
+ this.updateColumns();
14303
+ this.updateScroller();
14304
+ __updated__ = true;
14305
+ });
14306
+ }
14307
+ updateScrollY() {
14308
+ const { height, bodyHeight } = this.states;
14309
+ if (height === null || bodyHeight === null) return;
14310
+ const scroller = this.table.exposed.scroller.value;
14311
+ if (this.table.vnode.el && scroller) {
14312
+ const body = scroller.$el.querySelector(".vc-table__body");
14313
+ this.states.scrollY = body.offsetHeight > bodyHeight;
14314
+ }
14315
+ }
14316
+ setHeight(value, prop = "height") {
14317
+ if (IS_SERVER$1) return;
14318
+ const el = this.table.vnode.el;
14319
+ value = parseHeight(value);
14320
+ this.states.height = value;
14321
+ if (!el && (value || value === 0)) return nextTick(() => this.setHeight(value, prop));
14322
+ if (value) {
14323
+ el.style[prop] = `${value}px`;
14324
+ this.updateElsHeight();
14325
+ }
14326
+ }
14327
+ setMaxHeight(value) {
14328
+ this.setHeight(value, "max-height");
14329
+ }
14330
+ getFlattenColumns() {
14331
+ const flattenColumns = [];
14332
+ const columns = this.store.states.columns;
14333
+ columns.forEach((column) => {
14334
+ if (column.isColumnGroup) {
14335
+ flattenColumns.push(...column.columns);
14336
+ } else {
14337
+ flattenColumns.push(column);
14338
+ }
14339
+ });
14340
+ return flattenColumns;
14341
+ }
14342
+ updateElsHeight() {
14343
+ if (!this.table.exposed.isReady.value) return nextTick(() => this.updateElsHeight());
14344
+ const table = this.table.exposed;
14345
+ const headerWrapper = table.headerWrapper.value;
14346
+ const appendWrapper = table.appendWrapper.value;
14347
+ const footerWrapper = table.footerWrapper.value;
14348
+ const { showHeader } = this.table.props;
14349
+ this.states.appendHeight = appendWrapper ? appendWrapper.offsetHeight : 0;
14350
+ if (showHeader && !headerWrapper) return;
14351
+ const headerHeight = !showHeader ? 0 : headerWrapper.offsetHeight;
14352
+ this.states.headerHeight = headerHeight;
14353
+ if (showHeader && headerWrapper.offsetWidth > 0 && (this.store.states.columns || []).length > 0 && headerHeight < 2) {
14354
+ return nextTick(() => this.updateElsHeight());
14355
+ }
14356
+ const tableHeight = this.table.vnode.el.clientHeight;
14357
+ this.states.tableHeight = tableHeight;
14358
+ const footerHeight = footerWrapper ? footerWrapper.offsetHeight : 0;
14359
+ this.states.footerHeight = footerHeight;
14360
+ if (this.states.height !== null) {
14361
+ this.states.bodyHeight = tableHeight - headerHeight - footerHeight + (footerWrapper ? 1 : 0);
14362
+ }
14363
+ this.updateScrollY();
14364
+ this.updateScroller();
14365
+ }
14366
+ updateColumnsWidth() {
14367
+ if (IS_SERVER$1) return;
14368
+ const bodyWidth = this.table.vnode.el.clientWidth;
14369
+ let bodyMinWidth = 0;
14370
+ const flattenColumns = this.getFlattenColumns();
14371
+ const flexColumns = flattenColumns.filter((column) => typeof column.width !== "number");
14372
+ const { fit } = this.table.props;
14373
+ if (flexColumns.length > 0 && fit) {
14374
+ flattenColumns.forEach((column) => {
14375
+ bodyMinWidth += column.width || column.minWidth || 80;
14376
+ });
14377
+ if (bodyMinWidth <= bodyWidth) {
14378
+ this.states.scrollX = false;
14379
+ const totalFlexWidth = bodyWidth - bodyMinWidth;
14380
+ if (flexColumns.length === 1) {
14381
+ flexColumns[0].realWidth = (flexColumns[0].minWidth || 80) + totalFlexWidth;
14382
+ } else {
14383
+ const allColumnsWidth = flexColumns.reduce((prev, column) => prev + (column.minWidth || 80), 0);
14384
+ const flexWidthPerPixel = totalFlexWidth / allColumnsWidth;
14385
+ let noneFirstWidth = 0;
14386
+ flexColumns.forEach((column, index) => {
14387
+ if (index === 0) return;
14388
+ const flexWidth = Math.floor((column.minWidth || 80) * flexWidthPerPixel);
14389
+ noneFirstWidth += flexWidth;
14390
+ column.realWidth = (column.minWidth || 80) + flexWidth;
14391
+ });
14392
+ flexColumns[0].realWidth = (flexColumns[0].minWidth || 80) + totalFlexWidth - noneFirstWidth;
14393
+ }
14394
+ } else {
14395
+ this.states.scrollX = true;
14396
+ flexColumns.forEach(function(column) {
14397
+ column.realWidth = column.width || column.minWidth;
14398
+ });
14399
+ }
14400
+ this.states.bodyWidth = Math.max(bodyMinWidth, bodyWidth);
14401
+ this.table.exposed.resizeState.value.width = this.states.bodyWidth;
14402
+ } else {
14403
+ flattenColumns.forEach((column) => {
14404
+ if (!column.width && !column.minWidth) {
14405
+ column.realWidth = 80;
14406
+ } else {
14407
+ column.realWidth = column.width || column.minWidth;
14408
+ }
14409
+ bodyMinWidth += column.realWidth;
14410
+ });
14411
+ this.states.scrollX = bodyMinWidth > bodyWidth;
14412
+ this.states.bodyWidth = bodyMinWidth;
14413
+ }
14414
+ const leftFixedColumns = this.store.states.leftFixedColumns;
14415
+ if (leftFixedColumns.length > 0) {
14416
+ let leftFixedWidth = 0;
14417
+ leftFixedColumns.forEach(function(column) {
14418
+ leftFixedWidth += column.realWidth || column.width;
14419
+ });
14420
+ this.states.leftFixedWidth = leftFixedWidth;
14421
+ }
14422
+ const rightFixedColumns = this.store.states.rightFixedColumns;
14423
+ if (rightFixedColumns.length > 0) {
14424
+ let rightFixedWidth = 0;
14425
+ rightFixedColumns.forEach(function(column) {
14426
+ rightFixedWidth += column.realWidth || column.width;
14427
+ });
14428
+ this.states.rightFixedWidth = rightFixedWidth;
14429
+ }
14430
+ this.updateColumns();
14431
+ }
14432
+ // v2.x中的 notifyObservers
14433
+ updateColumns() {
14434
+ }
14435
+ updateScroller() {
14436
+ }
14437
+ }
14438
+
14439
+ class Store extends BaseWatcher {
14440
+ table;
14441
+ current;
14442
+ expand;
14443
+ tree;
14444
+ layout;
14445
+ flattenData = computed(() => {
14446
+ if (this.table.props.expandSelectable) {
14447
+ return concat(
14448
+ flattenData(this.states.data, { parent: true, cascader: true }),
14449
+ this.states.treeLazyData
14450
+ );
14451
+ } else {
14452
+ return this.states.data;
14453
+ }
14454
+ });
14455
+ constructor(options) {
14456
+ super();
14457
+ if (!options.table) {
14458
+ throw new VcError("table", "table必传");
14459
+ }
14460
+ this.table = options.table;
14461
+ this.current = new Current(this);
14462
+ this.expand = new Expand(this);
14463
+ this.tree = new Tree$1(this);
14464
+ this.layout = new Layout(this);
14465
+ const { props } = options.table;
14466
+ merge(this.states, {
14467
+ treeLazy: props.lazy || false,
14468
+ treeLazyColumnIdentifier: props.treeMap.hasChildren || "hasChildren",
14469
+ treeChildrenColumnName: props.treeMap.children || "children"
14470
+ });
14471
+ }
14472
+ setData(data) {
14473
+ const dataInstanceChanged = this.states._data !== data;
14474
+ this.states._data = data;
14475
+ this.states.data = data;
14476
+ this.states.list = data.reduce((pre, row, index) => {
14477
+ pre.push({
14478
+ rows: [
14479
+ {
14480
+ index,
14481
+ data: row,
14482
+ height: "",
14483
+ heightMap: {
14484
+ left: "",
14485
+ main: "",
14486
+ right: ""
14487
+ }
14488
+ }
14489
+ ],
14490
+ expand: false
14491
+ });
14492
+ return pre;
14493
+ }, []);
14494
+ this.current.update();
14495
+ this.expand.update();
14496
+ if (!this.states.reserveSelection) {
14497
+ if (dataInstanceChanged) {
14498
+ this.clearSelection();
14499
+ } else {
14500
+ this.cleanSelection();
14501
+ }
14502
+ } else {
14503
+ this.checkRowKey();
14504
+ this.updateSelectionByRowKey();
14505
+ }
14506
+ this.updateAllSelected();
14507
+ this.updateTableScrollY();
14508
+ }
14509
+ rowSelectedChanged(row) {
14510
+ this.toggleRowSelection(row);
14511
+ this.updateAllSelected();
14512
+ }
14513
+ // TODO: 合并的多行管理
14514
+ setHoverRow(index) {
14515
+ this.states.hoverRowIndex = index;
14516
+ }
14517
+ setCurrentRow(row) {
14518
+ const oldCurrentRow = this.states.currentRow;
14519
+ this.states.currentRow = row;
14520
+ if (oldCurrentRow !== row) {
14521
+ this.table.emit("current-change", row, oldCurrentRow);
14522
+ }
14523
+ }
14524
+ /**
14525
+ * 检查 rowKey 是否存在
14526
+ */
14527
+ checkRowKey() {
14528
+ const { rowKey } = this.table.props;
14529
+ }
14530
+ /**
14531
+ * states
14532
+ * -> _columns
14533
+ * -> selectable
14534
+ * -> reserveSelection
14535
+ * @param column ~
14536
+ * @param index ~
14537
+ * @param parent ~
14538
+ */
14539
+ insertColumn(column, index, parent) {
14540
+ let array = this.states._columns;
14541
+ if (parent) {
14542
+ array = parent.children;
14543
+ if (!array) {
14544
+ array = [];
14545
+ parent.children = array;
14546
+ }
14547
+ }
14548
+ if (typeof index !== "undefined") {
14549
+ array.splice(index, 0, column);
14550
+ } else {
14551
+ array.push(column);
14552
+ }
14553
+ if (column.type === "selection") {
14554
+ this.states.selectable = column.selectable;
14555
+ this.states.reserveSelection = column.reserveSelection;
14556
+ }
14557
+ if (this.table.exposed.isReady.value) {
14558
+ this.updateColumns();
14559
+ this.scheduleLayout();
14560
+ }
14561
+ }
14562
+ removeColumn(column, parent) {
14563
+ let array = this.states._columns;
14564
+ if (parent) {
14565
+ array = parent.children || [];
14566
+ }
14567
+ if (array) {
14568
+ array.splice(array.indexOf(column), 1);
14569
+ }
14570
+ if (this.table.exposed.isReady.value) {
14571
+ this.updateColumns();
14572
+ this.scheduleLayout();
14573
+ }
14574
+ }
14575
+ /**
14576
+ * 更新列
14577
+ * leftFixedColumns: 左fixed
14578
+ * rightFixedColumns: 右fixed
14579
+ * originColumns: 中（包括左右）
14580
+ * columns: 展开以上
14581
+ * leafColumnsLength
14582
+ * leftFixedLeafColumnsLength
14583
+ * rightFixedLeafColumnsLength
14584
+ * isComplex: 是否包含固定列
14585
+ */
14586
+ updateColumns() {
14587
+ const { states } = this;
14588
+ const _columns = states._columns || [];
14589
+ states.leftFixedColumns = _columns.filter((column) => column.fixed === true || column.fixed === "left");
14590
+ states.rightFixedColumns = _columns.filter((column) => column.fixed === "right");
14591
+ if (states.leftFixedColumns.length > 0 && _columns[0] && _columns[0].type === "selection" && !_columns[0].fixed) {
14592
+ _columns[0].fixed = true;
14593
+ states.leftFixedColumns.unshift(_columns[0]);
14594
+ }
14595
+ const notFixedColumns = _columns.filter((column) => !column.fixed);
14596
+ states.originColumns = concat(states.leftFixedColumns, notFixedColumns, states.rightFixedColumns);
14597
+ const leafColumns = flattenData(notFixedColumns);
14598
+ const leftFixedLeafColumns = flattenData(states.leftFixedColumns);
14599
+ const rightFixedLeafColumns = flattenData(states.rightFixedColumns);
14600
+ states.leafColumnsLength = leafColumns.length;
14601
+ states.leftFixedLeafColumnsLength = leftFixedLeafColumns.length;
14602
+ states.rightFixedLeafColumnsLength = rightFixedLeafColumns.length;
14603
+ states.columns = concat(leftFixedLeafColumns, leafColumns, rightFixedLeafColumns);
14604
+ states.isComplex = states.leftFixedColumns.length > 0 || states.rightFixedColumns.length > 0;
14605
+ }
14606
+ // 选择
14607
+ isSelected(row) {
14608
+ const { selection = [] } = this.states;
14609
+ return selection.includes(row);
14610
+ }
14611
+ /**
14612
+ * 清除选择
14613
+ */
14614
+ clearSelection() {
14615
+ this.states.isAllSelected = false;
14616
+ const oldSelection = this.states.selection;
14617
+ if (this.states.selection.length) {
14618
+ this.states.selection = [];
14619
+ }
14620
+ if (oldSelection.length > 0) {
14621
+ this.table.emit("selection-change", []);
14622
+ }
14623
+ }
14624
+ /**
14625
+ * 清理选择
14626
+ */
14627
+ cleanSelection() {
14628
+ const { rowKey } = this.table.props;
14629
+ const { selection = [] } = this.states;
14630
+ let deleted;
14631
+ if (rowKey) {
14632
+ deleted = [];
14633
+ const selectedMap = getKeysMap(selection, rowKey);
14634
+ const dataMap = getKeysMap(selection, rowKey);
14635
+ for (const key in selectedMap) {
14636
+ if (hasOwn(selectedMap, key) && !dataMap[key]) {
14637
+ deleted.push(selectedMap[key].row);
14638
+ }
14639
+ }
14640
+ } else {
14641
+ deleted = selection.filter((item) => {
14642
+ return !this.flattenData.value.includes(item);
14643
+ });
14644
+ }
14645
+ deleted.forEach((deletedItem) => {
14646
+ selection.splice(selection.indexOf(deletedItem), 1);
14647
+ });
14648
+ if (deleted.length) {
14649
+ const newSelection = selection.filter((item) => !deleted.includes(item));
14650
+ this.states.selection = newSelection;
14651
+ this.table.emit("selection-change", newSelection.slice());
14652
+ }
14653
+ }
14654
+ /**
14655
+ * 存在副作用
14656
+ * 对statusArr做添加和删除的操作
14657
+ * 如 this.states.selection
14658
+ * @param statusArr ~
14659
+ * @param row ~
14660
+ * @param newVal ~
14661
+ * @returns ~
14662
+ */
14663
+ toggleRowStatus(statusArr, row, newVal) {
14664
+ let changed = false;
14665
+ const index = statusArr.indexOf(row);
14666
+ const included = index !== -1;
14667
+ const addRow = () => {
14668
+ statusArr.push(row);
14669
+ changed = true;
14670
+ };
14671
+ const removeRow = () => {
14672
+ statusArr.splice(index, 1);
14673
+ changed = true;
14674
+ };
14675
+ if (typeof newVal === "boolean") {
14676
+ if (newVal && !included) {
14677
+ addRow();
14678
+ } else if (!newVal && included) {
14679
+ removeRow();
14680
+ }
14681
+ } else {
14682
+ included ? removeRow() : addRow();
14683
+ }
14684
+ return changed;
14685
+ }
14686
+ toggleRowSelection(row, selected, emitChange = true) {
14687
+ const { selection } = this.states;
14688
+ const changed = this.toggleRowStatus(selection, row, selected);
14689
+ if (changed) {
14690
+ const newSelection = (this.states.selection || []).slice();
14691
+ if (emitChange) {
14692
+ this.table.emit("select", newSelection, row);
14693
+ }
14694
+ this.table.emit("selection-change", newSelection);
14695
+ }
14696
+ }
14697
+ toggleAllSelection = debounce$1(() => {
14698
+ const { indeterminate } = this.table.props;
14699
+ const { selection, isAllSelected, selectable } = this.states;
14700
+ const value = indeterminate ? !isAllSelected : !(isAllSelected || selection.length);
14701
+ this.states.isAllSelected = value;
14702
+ let selectionChanged = false;
14703
+ this.flattenData.value.forEach((row, index) => {
14704
+ if (selectable) {
14705
+ if (selectable.call(null, row, index) && this.toggleRowStatus(selection, row, value)) {
14706
+ selectionChanged = true;
14707
+ }
14708
+ } else if (this.toggleRowStatus(selection, row, value)) {
14709
+ selectionChanged = true;
14710
+ }
14711
+ });
14712
+ if (selectionChanged) {
14713
+ this.table.emit("selection-change", selection ? selection.slice() : []);
14714
+ }
14715
+ this.table.emit("select-all", selection);
14716
+ }, 10);
14717
+ // 展开行与 TreeTable 都要使用
14718
+ toggleRowExpansionAdapter(row, expanded) {
14719
+ const { columns } = this.states;
14720
+ const hasExpandColumn = columns.some(({ type }) => type === "expand");
14721
+ if (hasExpandColumn) {
14722
+ this.expand.toggle(row, expanded);
14723
+ } else {
14724
+ this.tree.toggle(row, expanded);
14725
+ }
14726
+ }
14727
+ // 适配层，expand-primary-keys 在 Expand 与 TreeTable 中都有使用
14728
+ // 这里会触发额外的计算，但为了兼容性，暂时这么做
14729
+ setExpandRowValueAdapter(val) {
14730
+ this.expand.reset(val);
14731
+ this.tree.expand(val);
14732
+ }
14733
+ updateSelectionByRowKey() {
14734
+ const { rowKey } = this.table.props;
14735
+ const { selection } = this.states;
14736
+ const selectedMap = getKeysMap(selection, rowKey);
14737
+ this.states.selection = this.flattenData.value.reduce((prev, row) => {
14738
+ const rowId = getRowIdentity(row, rowKey);
14739
+ const rowInfo = selectedMap[rowId];
14740
+ if (rowInfo) {
14741
+ prev.push(row);
14742
+ }
14743
+ return prev;
14744
+ }, []);
14745
+ }
14746
+ updateAllSelected() {
14747
+ const { selectable, data = [] } = this.states;
14748
+ if (data.length === 0) {
14749
+ this.states.isAllSelected = false;
14750
+ return;
14751
+ }
14752
+ let isAllSelected = true;
14753
+ let selectedCount = 0;
14754
+ const temp = this.flattenData.value;
14755
+ for (let i = 0, j = temp.length; i < j; i++) {
14756
+ const row = temp[i];
14757
+ const isRowSelectable = selectable && selectable.call(null, row, i);
14758
+ if (!this.isSelected(row)) {
14759
+ if (!selectable || isRowSelectable) {
14760
+ isAllSelected = false;
14761
+ break;
14762
+ }
14763
+ } else {
14764
+ selectedCount++;
14765
+ }
14766
+ }
14767
+ if (selectedCount === 0) isAllSelected = false;
14768
+ this.states.isAllSelected = isAllSelected;
14769
+ }
14770
+ updateTableScrollY() {
14771
+ nextTick(() => this.table.exposed.updateScrollY());
14772
+ }
14773
+ // 更新 DOM
14774
+ scheduleLayout(needUpdateColumns) {
14775
+ if (needUpdateColumns) {
14776
+ this.updateColumns();
14777
+ }
14778
+ this.table.exposed.debouncedUpdateLayout();
14779
+ }
14780
+ }
14781
+
14782
+ const useStates = (mapper, $store) => {
14783
+ const instance = getCurrentInstance();
14784
+ const store = $store || instance.proxy?.store;
14785
+ const states = reactive({});
14786
+ Object.keys(mapper).forEach((key) => {
14787
+ const value = mapper[key];
14788
+ if (typeof value === "string") {
14789
+ states[key] = computed(() => {
14790
+ return store.states[value];
14791
+ });
14792
+ } else if (typeof value === "function") {
14793
+ states[key] = computed(() => {
14794
+ return value(store.states);
14795
+ });
14796
+ } else {
14797
+ console.error("invalid value type");
14798
+ }
14799
+ });
14800
+ return states;
14801
+ };
14802
+
14803
+ /** @jsxImportSource vue */
14804
+
14805
+ const COMPONENT_NAME$h = 'vc-table-normal-list';
14806
+ const NormalList = /* @__PURE__ */ defineComponent({
14807
+ name: COMPONENT_NAME$h,
14808
+ props: {
14809
+ data: Array,
14810
+ default: () => []
14811
+ },
14812
+ emits: ['row-resize'],
14813
+ setup(props, {
14814
+ emit,
14815
+ slots
14816
+ }) {
14817
+ const handleResize = (size, index) => {
14818
+ emit('row-resize', {
14819
+ index,
14820
+ size
14821
+ });
14822
+ };
14823
+ return () => {
14824
+ return props.data.map((row, index) => {
14825
+ return createVNode(Item, {
14826
+ "vertical": false,
14827
+ "onChange": e => handleResize(e, index)
14828
+ }, {
14829
+ default: () => [slots.default?.({
14830
+ row,
14831
+ index
14832
+ })]
14833
+ });
14834
+ });
14835
+ };
14836
+ }
14837
+ });
14838
+
14839
+ const TableBody = /* @__PURE__ */ defineComponent({
14840
+ name: 'vc-table-body',
14841
+ props: {
14842
+ store: Object,
14843
+ fixed: String,
14844
+ heightStyle: [Object, Array, String]
14845
+ },
14846
+ emits: ['scroll'],
14847
+ setup(props, {
14848
+ emit,
14849
+ expose
14850
+ }) {
14851
+ const instance = getCurrentInstance();
14852
+ const table = getInstance('table', 'tableId');
14853
+ const states = useStates({
14854
+ data: 'data',
14855
+ list: 'list',
14856
+ columns: 'columns',
14857
+ leftFixedLeafCount: 'leftFixedLeafColumnsLength',
14858
+ rightFixedLeafCount: 'rightFixedLeafColumnsLength',
14859
+ columnsCount: states$ => states$.columns.length,
14860
+ leftFixedCount: states$ => states$.leftFixedColumns.length,
14861
+ rightFixedCount: states$ => states$.rightFixedColumns.length,
14862
+ hasExpandColumn: states$ => states$.columns.some(({
14863
+ type
14864
+ }) => type === 'expand'),
14865
+ firstDefaultColumnIndex: states$ => states$.columns.findIndex(({
14866
+ type
14867
+ }) => type === 'default')
14868
+ });
14869
+ watch(() => props.store.states.hoverRowIndex, (v, oldV) => {
14870
+ if (!props.store.states.isComplex || IS_SERVER$1) return;
14871
+ raf(() => {
14872
+ const rows = instance.vnode.el.querySelectorAll('.vc-table__row');
14873
+ const oldRow = rows[oldV];
14874
+ const newRow = rows[v];
14875
+ oldRow && removeClass(oldRow, 'hover-row');
14876
+ newRow && addClass(newRow, 'hover-row');
14877
+ });
14878
+ });
14879
+ const getKeyOfRow = (row, index) => {
14880
+ const {
14881
+ rowKey
14882
+ } = table.props;
14883
+ if (rowKey) {
14884
+ return getRowIdentity(row, rowKey);
14885
+ }
14886
+ return index;
14887
+ };
14888
+ const isColumnHidden = index => {
14889
+ if (props.fixed === 'left') {
14890
+ return index >= states.leftFixedLeafCount;
14891
+ } else if (props.fixed === 'right') {
14892
+ return index < states.columnsCount - states.rightFixedLeafCount;
14893
+ } else {
14894
+ return index < states.leftFixedLeafCount || index >= states.columnsCount - states.rightFixedLeafCount;
14895
+ }
14896
+ };
14897
+ const columnsHidden = computed(() => {
14898
+ return states.columns.map((_, index) => isColumnHidden(index));
14899
+ });
14900
+ const getRowStyle = (row, rowIndex) => {
14901
+ const {
14902
+ rowStyle
14903
+ } = table.props;
14904
+ if (typeof rowStyle === 'function') {
14905
+ return rowStyle.call(null, {
14906
+ row,
14907
+ rowIndex
14908
+ });
14909
+ }
14910
+ return rowStyle || null;
14911
+ };
14912
+ const getRowClass = (row, rowIndex) => {
14913
+ const classes = ['vc-table__row'];
14914
+ if (table.props.highlight && row === props.store.states.currentRow) {
14915
+ classes.push('current-row');
14916
+ }
14917
+ if (table.props.stripe && rowIndex % 2 === 1) {
14918
+ classes.push('vc-table__row--striped');
14919
+ }
14920
+ const rowClass = table.props.rowClass;
14921
+ if (typeof rowClass === 'string') {
14922
+ classes.push(rowClass);
14923
+ } else if (typeof rowClass === 'function') {
14924
+ classes.push(rowClass.call(null, {
14925
+ row,
14926
+ rowIndex
14927
+ }));
14928
+ }
14929
+ if (props.store.states.expandRows.indexOf(row) > -1) {
14930
+ classes.push('expanded');
14931
+ }
14932
+ return classes;
14933
+ };
14934
+ const getCellStyle = (rowIndex, columnIndex, row, column) => {
14935
+ const {
14936
+ cellStyle
14937
+ } = table.props;
14938
+ if (typeof cellStyle === 'function') {
14939
+ return cellStyle.call(null, {
14940
+ rowIndex,
14941
+ columnIndex,
14942
+ row,
14943
+ column
14944
+ });
14945
+ }
14946
+ return cellStyle;
14947
+ };
14948
+ const getCellClass = (rowIndex, columnIndex, row, column) => {
14949
+ const classes = [column.align, column.className];
14950
+ if (isColumnHidden(columnIndex)) {
14951
+ classes.push('is-hidden');
14952
+ }
14953
+ const cellClass = table.props.cellClass;
14954
+ if (typeof cellClass === 'string') {
14955
+ classes.push(cellClass);
14956
+ } else if (typeof cellClass === 'function') {
14957
+ classes.push(cellClass.call(null, {
14958
+ rowIndex,
14959
+ columnIndex,
14960
+ row,
14961
+ column
14962
+ }));
14963
+ }
14964
+ return classes.join(' ');
14965
+ };
14966
+ const handleCellMouseEnter = (e, row) => {
14967
+ const cell = getCell(e);
14968
+ if (cell) {
14969
+ const column = getColumnByCell(states.columns, cell);
14970
+ const hoverState = {
14971
+ cell,
14972
+ column,
14973
+ row
14974
+ };
14975
+ table.exposed.hoverState.value = hoverState;
14976
+ table.emit('cell-mouse-enter', hoverState.row, hoverState.column, hoverState.cell, e);
14977
+ }
14978
+
14979
+ // 判断是否text-overflow, 如果是就显示tooltip
14980
+ const cellChild = e.target.querySelector('.vc-table__cell');
14981
+ if (!(hasClass(cellChild, 'vc-popover') && cellChild.childNodes.length)) {
14982
+ return;
14983
+ }
14984
+ // 使用范围宽度而不是滚动宽度来确定文本是否溢出，以解决潜在的FireFox bug
14985
+ // https://bugzilla.mozilla.org/show_bug.cgi?id=1074543#c3
14986
+ const range = document.createRange();
14987
+ range.setStart(cellChild, 0);
14988
+ range.setEnd(cellChild, cellChild.childNodes.length);
14989
+ const rangeWidth = range.getBoundingClientRect().width;
14990
+ const padding = (parseInt(cellChild.style.paddingLeft, 10) || 0) + (parseInt(cellChild.style.paddingRight, 10) || 0);
14991
+ if (rangeWidth + padding > cellChild.offsetWidth || cellChild.scrollWidth > cellChild.offsetWidth) {
14992
+ Popover.open({
14993
+ el: document.body,
14994
+ name: 'vc-table-popover',
14995
+ // 确保不重复创建
14996
+ triggerEl: cell,
14997
+ hover: true,
14998
+ theme: 'dark',
14999
+ placement: 'top',
15000
+ content: cell.innerText || cell.textContent,
15001
+ alone: true
15002
+ });
15003
+ }
15004
+ };
15005
+ const handleCellMouseLeave = e => {
15006
+ const cell = getCell(e);
15007
+ if (!cell) return;
15008
+ const oldHoverState = table.exposed.hoverState.value || {};
15009
+ table.emit('cell-mouse-leave', oldHoverState.row, oldHoverState.column, oldHoverState.cell, event);
15010
+ };
15011
+ const handleMouseEnter = debounce(index => {
15012
+ props.store.setHoverRow(index);
15013
+ }, 30);
15014
+ const handleMouseLeave = debounce(() => {
15015
+ props.store.setHoverRow(null);
15016
+ }, 30);
15017
+ const handleEvent = (e, row, name) => {
15018
+ const cell = getCell(e);
15019
+ let column;
15020
+ if (cell) {
15021
+ column = getColumnByCell(states.columns, cell);
15022
+ if (column) {
15023
+ table.emit(`cell-${name}`, row, column, cell, e);
15024
+ }
15025
+ }
15026
+ table.emit(`row-${name}`, row, column, e);
15027
+ };
15028
+ const handleContextMenu = (e, row) => {
15029
+ handleEvent(e, row, 'contextmenu');
15030
+ };
15031
+ const handleDoubleClick = (e, row) => {
15032
+ handleEvent(e, row, 'dblclick');
15033
+ };
15034
+ const handleClick = (e, row) => {
15035
+ props.store.setCurrentRow(row);
15036
+ handleEvent(e, row, 'click');
15037
+ };
15038
+ const renderRow = (rowData, rowIndex) => {
15039
+ const {
15040
+ data: row
15041
+ } = rowData;
15042
+ const {
15043
+ columns
15044
+ } = states;
15045
+ const key = getKeyOfRow(row, rowIndex);
15046
+ return createVNode("div", {
15047
+ "key": key,
15048
+ "class": [getRowClass(row, rowIndex), 'vc-table__tr'],
15049
+ "style": getRowStyle(row, rowIndex),
15050
+ "onDblclick": e => handleDoubleClick(e, row),
15051
+ "onClick": e => handleClick(e, row),
15052
+ "onContextmenu": e => handleContextMenu(e, row),
15053
+ "onMouseenter": () => handleMouseEnter(rowIndex),
15054
+ "onMouseleave": () => handleMouseLeave()
15055
+ }, [columns.map((column, columnIndex) => {
15056
+ const {
15057
+ realWidth,
15058
+ renderCell
15059
+ } = column;
15060
+ const sizeStyle = {
15061
+ width: `${realWidth}px`,
15062
+ height: `${rowData.height ? `${rowData.height}px` : 'auto'}`
15063
+ };
15064
+ if (columnsHidden.value[columnIndex]) {
15065
+ return createVNode("div", {
15066
+ "style": [sizeStyle]
15067
+ }, null);
15068
+ }
15069
+ return createVNode("div", {
15070
+ "style": [getCellStyle(rowIndex, columnIndex, row, column), sizeStyle],
15071
+ "class": [getCellClass(rowIndex, columnIndex, row, column), 'vc-table__td'],
15072
+ "onMouseenter": e => handleCellMouseEnter(e, row),
15073
+ "onMouseleave": e => handleCellMouseLeave(e)
15074
+ }, [renderCell({
15075
+ row,
15076
+ column,
15077
+ rowIndex,
15078
+ columnIndex,
15079
+ store: props.store
15080
+ })]);
15081
+ })]);
15082
+ };
15083
+ const renderMergeRow = (mergeData, mergeIndex) => {
15084
+ const {
15085
+ rows
15086
+ } = mergeData;
15087
+ return createVNode("div", {
15088
+ "class": "vc-table__merge-row",
15089
+ "key": mergeIndex
15090
+ }, [rows.map(row => {
15091
+ return renderRow(row, row.index);
15092
+ })]);
15093
+ };
15094
+ const handleMergeRowResize = v => {
15095
+ states.list[v.index].rows.forEach(row => {
15096
+ row.heightMap[props.fixed || 'main'] = v.size;
15097
+ const heights = [row.heightMap.main];
15098
+ if (states.leftFixedCount) {
15099
+ heights.push(row.heightMap.left);
15100
+ }
15101
+ if (states.rightFixedCount) {
15102
+ heights.push(row.heightMap.right);
15103
+ }
15104
+ if (heights.every(i => !!i)) {
15105
+ row.height = Math.max(row.heightMap.left, row.heightMap.main, row.heightMap.right) || '';
15106
+ }
15107
+ });
15108
+ };
15109
+ const wrapper = ref();
15110
+ expose({
15111
+ wrapper,
15112
+ getRootElement: () => instance.vnode.el
15113
+ });
15114
+ return () => {
15115
+ const layout = table.exposed.layout;
15116
+ return createVNode("div", {
15117
+ "class": "vc-table__body"
15118
+ }, [table.props.height ? createVNode(RecycleList, {
15119
+ "ref": wrapper,
15120
+ "data": states.list,
15121
+ "disabled": true,
15122
+ "class": "vc-table__tbody",
15123
+ "scrollerOptions": {
15124
+ barTo: `.${table.exposed.tableId}`,
15125
+ native: false,
15126
+ always: false,
15127
+ showBar: !props.fixed,
15128
+ stopPropagation: !props.fixed,
15129
+ trackOffsetY: [layout.states.headerHeight, 0, -layout.states.headerHeight - layout.states.footerHeight + 2,
15130
+ // 2为上下border的高度
15131
+ 0]
15132
+ },
15133
+ "pageSize": table.props.rows,
15134
+ "onScroll": e => emit('scroll', e),
15135
+ "onRowResize": handleMergeRowResize,
15136
+ "style": props.heightStyle
15137
+ }, {
15138
+ default: ({
15139
+ row,
15140
+ index
15141
+ }) => renderMergeRow(row, index)
15142
+ }) : createVNode(NormalList, {
15143
+ "data": states.list,
15144
+ "onRowResize": handleMergeRowResize
15145
+ }, {
15146
+ default: ({
15147
+ row,
15148
+ index
15149
+ }) => renderMergeRow(row, index)
15150
+ })]);
15151
+ };
15152
+ }
15153
+ });
15154
+
15155
+ // import TableSort from './table-sort';
15156
+ // import TableFilter from './table-filter';
15157
+
15158
+ const TableSort = 'div';
15159
+ const TableFilter = 'div';
15160
+ const getAllColumns = columns => {
15161
+ const result = [];
15162
+ columns.forEach(column => {
15163
+ if (column.children) {
15164
+ result.push(column);
15165
+ result.push(...getAllColumns(column.children));
15166
+ } else {
15167
+ result.push(column);
15168
+ }
15169
+ });
15170
+ return result;
15171
+ };
15172
+ const convertToRows = originColumns => {
15173
+ let maxLevel = 1;
15174
+ const traverse = (column, parent) => {
15175
+ if (parent) {
15176
+ column.level = parent.level + 1;
15177
+ if (maxLevel < column.level) {
15178
+ maxLevel = column.level;
15179
+ }
15180
+ }
15181
+ if (column.children) {
15182
+ let colSpan = 0;
15183
+ column.children.forEach(subColumn => {
15184
+ traverse(subColumn, column);
15185
+ colSpan += subColumn.colSpan;
15186
+ });
15187
+ column.colSpan = colSpan;
15188
+ } else {
15189
+ column.colSpan = 1;
15190
+ }
15191
+ };
15192
+ originColumns.forEach(column => {
15193
+ column.level = 1;
15194
+ traverse(column);
15195
+ });
15196
+ const rows = [];
15197
+ for (let i = 0; i < maxLevel; i++) {
15198
+ rows.push([]);
15199
+ }
15200
+ const allColumns = getAllColumns(originColumns);
15201
+ allColumns.forEach(column => {
15202
+ if (!column.children) {
15203
+ column.rowSpan = maxLevel - column.level + 1;
15204
+ } else {
15205
+ column.rowSpan = 1;
15206
+ }
15207
+ rows[column.level - 1].push(column);
15208
+ });
15209
+ return rows;
15210
+ };
15211
+ const TableHeader = /* @__PURE__ */ defineComponent({
15212
+ name: 'vc-table-header',
15213
+ props: {
15214
+ fixed: [Boolean, String],
15215
+ store: {
15216
+ type: Object,
15217
+ required: true
15218
+ },
15219
+ border: Boolean,
15220
+ // 排序全部交给外部处理，内部不处理数据，只做交互
15221
+ defaultSort: {
15222
+ type: Object,
15223
+ default: () => ({})
15224
+ }
15225
+ },
15226
+ setup(props) {
15227
+ const table = getInstance('table', 'tableId');
15228
+ const instance = getCurrentInstance();
15229
+ const draggingColumn = ref(null);
15230
+ const dragging = ref(false);
15231
+ const dragState = ref({});
15232
+ const states = useStates({
15233
+ columns: 'columns',
15234
+ isAllSelected: 'isAllSelected',
15235
+ leftFixedLeafCount: 'leftFixedLeafColumnsLength',
15236
+ rightFixedLeafCount: 'rightFixedLeafColumnsLength',
15237
+ columnsCount: $states => $states.columns.length,
15238
+ leftFixedCount: $states => $states.leftFixedColumns.length,
15239
+ rightFixedCount: $states => $states.rightFixedColumns.length
15240
+ });
15241
+ const isCellHidden = (index, columns) => {
15242
+ let start = 0;
15243
+ for (let i = 0; i < index; i++) {
15244
+ start += columns[i].colSpan;
15245
+ }
15246
+ const after = start + columns[index].colSpan - 1;
15247
+ if (props.fixed === true || props.fixed === 'left') {
15248
+ return after >= states.leftFixedLeafCount;
15249
+ } else if (props.fixed === 'right') {
15250
+ return start < states.columnsCount - states.rightFixedLeafCount;
15251
+ } else {
15252
+ return after < states.leftFixedLeafCount || start >= states.columnsCount - states.rightFixedLeafCount;
15253
+ }
15254
+ };
15255
+ const getHeaderRowStyle = rowIndex => {
15256
+ const {
15257
+ headerRowStyle
15258
+ } = table.props;
15259
+ if (typeof headerRowStyle === 'function') {
15260
+ return headerRowStyle.call(null, {
15261
+ rowIndex
15262
+ });
15263
+ }
15264
+ return headerRowStyle;
15265
+ };
15266
+ const getHeaderRowClass = rowIndex => {
15267
+ const classes = [];
15268
+ const {
15269
+ headerRowClass
15270
+ } = table.props;
15271
+ if (typeof headerRowClass === 'string') {
15272
+ classes.push(headerRowClass);
15273
+ } else if (typeof headerRowClass === 'function') {
15274
+ classes.push(headerRowClass.call(null, {
15275
+ rowIndex
15276
+ }));
15277
+ }
15278
+ return classes.join(' ');
15279
+ };
15280
+ const getHeaderCellStyle = (rowIndex, columnIndex, row, column) => {
15281
+ const {
15282
+ headerCellStyle
15283
+ } = table.props;
15284
+ if (typeof headerCellStyle === 'function') {
15285
+ return headerCellStyle.call(null, {
15286
+ rowIndex,
15287
+ columnIndex,
15288
+ row,
15289
+ column
15290
+ });
15291
+ }
15292
+ return headerCellStyle;
15293
+ };
15294
+ const getHeaderCellClass = (rowIndex, columnIndex, row, column) => {
15295
+ const classes = [column.id, column.order, column.headerAlign, column.className, column.labelClass];
15296
+ if (rowIndex === 0 && isCellHidden(columnIndex, row)) {
15297
+ classes.push('is-hidden');
15298
+ }
15299
+ if (!column.children) {
15300
+ classes.push('is-leaf');
15301
+ }
15302
+ const {
15303
+ headerCellClass
15304
+ } = table.props;
15305
+ if (typeof headerCellClass === 'string') {
15306
+ classes.push(headerCellClass);
15307
+ } else if (typeof headerCellClass === 'function') {
15308
+ classes.push(headerCellClass.call(null, {
15309
+ rowIndex,
15310
+ columnIndex,
15311
+ row,
15312
+ column
15313
+ }));
15314
+ }
15315
+ return classes.join(' ');
15316
+ };
15317
+ const handleHeaderClick = (e, column) => {
15318
+ table.emit('header-click', column, e);
15319
+ };
15320
+ const handleHeaderContextMenu = (e, column) => {
15321
+ table.emit('header-contextmenu', column, e);
15322
+ };
15323
+ const handleMouseDown = (e, column) => {
15324
+ if (IS_SERVER$1) return;
15325
+ if (column.children && column.children.length > 0) return;
15326
+ /* istanbul ignore if */
15327
+ if (draggingColumn.value && props.border) {
15328
+ dragging.value = true;
15329
+ table.exposed.resizeProxyVisible.value = true;
15330
+ const tableEl = table.vnode.el;
15331
+ const tableLeft = tableEl.getBoundingClientRect().left;
15332
+ const columnEl = instance.vnode.el.querySelector(`.vc-table__th.${column.id}`);
15333
+ const columnRect = columnEl.getBoundingClientRect();
15334
+ const minLeft = columnRect.left - tableLeft + 30;
15335
+ addClass(columnEl, 'noclick');
15336
+ dragState.value = {
15337
+ startMouseLeft: e.clientX,
15338
+ startLeft: columnRect.right - tableLeft,
15339
+ startColumnLeft: columnRect.left - tableLeft,
15340
+ tableLeft
15341
+ };
15342
+ const resizeProxy = table.exposed.resizeProxy.value;
15343
+ resizeProxy.style.left = dragState.value.startLeft + 'px';
15344
+ document.onselectstart = () => false;
15345
+ document.ondragstart = () => false;
15346
+ const handleMouseMove = $e => {
15347
+ const deltaLeft = $e.clientX - dragState.value.startMouseLeft;
15348
+ const proxyLeft = dragState.value.startLeft + deltaLeft;
15349
+ resizeProxy.style.left = Math.max(minLeft, proxyLeft) + 'px';
15350
+ };
15351
+ const handleMouseUp = () => {
15352
+ if (dragging.value) {
15353
+ const {
15354
+ startColumnLeft,
15355
+ startLeft
15356
+ } = dragState.value;
15357
+ const finalLeft = parseInt(resizeProxy.style.left, 10);
15358
+ const columnWidth = finalLeft - startColumnLeft;
15359
+ column.width = columnWidth;
15360
+ column.realWidth = column.width;
15361
+ table.$emit('header-dragend', column.width, startLeft - startColumnLeft, column, event);
15362
+ props.store.scheduleLayout();
15363
+ document.body.style.cursor = '';
15364
+ dragging.value = false;
15365
+ draggingColumn.value = null;
15366
+ dragState.value = {};
15367
+ table.resizeProxyVisible = false;
15368
+ }
15369
+ document.removeEventListener('mousemove', handleMouseMove);
15370
+ document.removeEventListener('mouseup', handleMouseUp);
15371
+ document.onselectstart = null;
15372
+ document.ondragstart = null;
15373
+ setTimeout(function () {
15374
+ removeClass(columnEl, 'noclick');
15375
+ }, 0);
15376
+ };
15377
+ document.addEventListener('mousemove', handleMouseMove);
15378
+ document.addEventListener('mouseup', handleMouseUp);
15379
+ }
15380
+ };
15381
+ const handleMouseMove = (event, column) => {
15382
+ if (column.children && column.children.length > 0) return;
15383
+ let target = event.target;
15384
+ while (target && !target.classList?.contains?.('vc-table__th')) {
15385
+ target = target.parentNode;
15386
+ }
15387
+ if (!column || !column.resizable) return;
15388
+ if (!dragging.value && props.border) {
15389
+ const rect = target.getBoundingClientRect();
15390
+ const bodyStyle = document.body.style;
15391
+ if (rect.width > 12 && rect.right - event.pageX < 8) {
15392
+ bodyStyle.cursor = 'col-resize';
15393
+ if (hasClass(target, 'is-sortable')) {
15394
+ target.style.cursor = 'col-resize';
15395
+ }
15396
+ draggingColumn.value = column;
15397
+ } else if (!dragging.value) {
15398
+ bodyStyle.cursor = '';
15399
+ if (hasClass(target, 'is-sortable')) {
15400
+ target.style.cursor = 'pointer';
15401
+ }
15402
+ draggingColumn.value = null;
15403
+ }
15404
+ }
15405
+ };
15406
+ const handleMouseOut = () => {
15407
+ if (IS_SERVER$1) return;
15408
+ document.body.style.cursor = '';
15409
+ };
15410
+ const handleSort = (prop, order) => {
15411
+ table.emit('sort-change', {
15412
+ prop,
15413
+ order
15414
+ });
15415
+ };
15416
+ const handleFilter = (column, value) => {
15417
+ const {
15418
+ filter
15419
+ } = column;
15420
+ filter && filter(value);
15421
+ };
15422
+ const handleCellMouseEnter = (e, column) => {
15423
+ Popover.open({
15424
+ el: document.body,
15425
+ name: 'vc-table-header-popover',
15426
+ // 确保不重复创建
15427
+ triggerEl: e.currentTarget,
15428
+ hover: true,
15429
+ theme: 'dark',
15430
+ placement: 'top',
15431
+ content: column.tooltip,
15432
+ alone: true
15433
+ });
15434
+ };
15435
+ return () => {
15436
+ const {
15437
+ originColumns
15438
+ } = props.store.states;
15439
+ const columnRows = convertToRows(originColumns);
15440
+
15441
+ // 是否拥有多级表头
15442
+ const isGroup = columnRows.length > 1;
15443
+ if (isGroup) table.exposed.isGroup.value = true;
15444
+ return createVNode("div", {
15445
+ "class": "vc-table__header"
15446
+ }, [createVNode("div", {
15447
+ "class": [{
15448
+ 'is-group': isGroup
15449
+ }, 'vc-table__thead']
15450
+ }, [
15451
+ // renderList
15452
+ columnRows.map((columns, rowIndex) => createVNode("div", {
15453
+ "style": getHeaderRowStyle(rowIndex),
15454
+ "class": [getHeaderRowClass(rowIndex), 'vc-table__tr']
15455
+ }, [columns.map((column, cellIndex) => createVNode("div", {
15456
+ "colspan": column.colSpan,
15457
+ "rowspan": column.rowSpan,
15458
+ "onMousemove": $event => handleMouseMove($event, column),
15459
+ "onMouseout": handleMouseOut,
15460
+ "onMousedown": $event => handleMouseDown($event, column),
15461
+ "onClick": $event => handleHeaderClick($event, column),
15462
+ "onContextmenu": $event => handleHeaderContextMenu($event, column),
15463
+ "style": [getHeaderCellStyle(rowIndex, cellIndex, columns, column), {
15464
+ width: `${column.realWidth}px`
15465
+ }],
15466
+ "class": [getHeaderCellClass(rowIndex, cellIndex, columns, column), 'vc-table__th'],
15467
+ "key": column.id
15468
+ }, [createVNode("div", {
15469
+ "class": ['vc-table__cell',
15470
+ // {
15471
+ // "highlight": column.filteredValue && column.filteredValue.length > 0
15472
+ // },
15473
+ column.labelClass]
15474
+ }, [column.renderHeader ? column.renderHeader({
15475
+ column,
15476
+ $index: cellIndex,
15477
+ // index: cellIndex,
15478
+ store: props.store,
15479
+ _self: instance
15480
+ }) : column.label, column.tooltip ? createVNode(Icon, {
15481
+ "type": "o-info",
15482
+ "onMouseenter": e => handleCellMouseEnter(e, column)
15483
+ }, null) : null, column.sortable ? createVNode(TableSort, {
15484
+ "order": column.prop === props.defaultSort.prop ? props.defaultSort.order : '',
15485
+ "onClick": order => handleSort(column.prop, order)
15486
+ }, null) : null, column.filters ? createVNode(TableFilter, {
15487
+ "data": column.filters,
15488
+ "value": column.filteredValue,
15489
+ "icon": column.filterIcon,
15490
+ "portalClass": column.filterPopupClass,
15491
+ "multiple": column.filterMultiple,
15492
+ "onChange": v => handleFilter(column, v)
15493
+ }, null) : null])]))]))])]);
15494
+ };
15495
+ }
15496
+ });
15497
+
15498
+ const TableFooter = /* @__PURE__ */ defineComponent({
15499
+ name: 'vc-table-footer',
15500
+ props: {
15501
+ fixed: [String, Boolean],
15502
+ store: {
15503
+ type: Object,
15504
+ required: true
15505
+ },
15506
+ getSummary: Function,
15507
+ sumText: String,
15508
+ border: Boolean
15509
+ },
15510
+ setup(props) {
15511
+ const states = useStates({
15512
+ data: 'data',
15513
+ columns: 'columns',
15514
+ isAllSelected: 'isAllSelected',
15515
+ leftFixedLeafCount: 'leftFixedLeafColumnsLength',
15516
+ rightFixedLeafCount: 'rightFixedLeafColumnsLength',
15517
+ columnsCount: $states => $states.columns.length,
15518
+ leftFixedCount: $states => $states.leftFixedColumns.length,
15519
+ rightFixedCount: $states => $states.rightFixedColumns.length
15520
+ });
15521
+ const isCellHidden = (index, columns, column) => {
15522
+ if (props.fixed === true || props.fixed === 'left') {
15523
+ return index >= states.leftFixedLeafCount;
15524
+ } else if (props.fixed === 'right') {
15525
+ let before = 0;
15526
+ for (let i = 0; i < index; i++) {
15527
+ before += columns[i].colSpan;
15528
+ }
15529
+ return before < states.columnsCount - states.rightFixedLeafCount;
15530
+ } else if (!props.fixed && column.fixed) {
15531
+ // hide cell when footer instance is not fixed and column is fixed
15532
+ return true;
15533
+ } else {
15534
+ return index < states.leftFixedCount || index >= states.columnsCount - states.rightFixedCount;
15535
+ }
15536
+ };
15537
+ const getRowClasses = (column, cellIndex) => {
15538
+ const classes = [column.id, column.align, column.labelClass];
15539
+ if (column.className) {
15540
+ classes.push(column.className);
15541
+ }
15542
+ if (isCellHidden(cellIndex, states.columns, column)) {
15543
+ classes.push('is-hidden');
15544
+ }
15545
+ if (!column.children) {
15546
+ classes.push('is-leaf');
15547
+ }
15548
+ return classes;
15549
+ };
15550
+ return () => {
15551
+ let sums = [];
15552
+ if (props.getSummary) {
15553
+ sums = props.getSummary({
15554
+ columns: states.columns,
15555
+ data: states.data
15556
+ });
15557
+ } else {
15558
+ states.columns.forEach((column, index) => {
15559
+ if (index === 0) {
15560
+ sums[index] = props.sumText;
15561
+ return;
15562
+ }
15563
+ const values = states.data.map(item => Number(item[column.prop]));
15564
+ const precisions = [];
15565
+ let notNumber = true;
15566
+ values.forEach(value => {
15567
+ if (!isNaN(value)) {
15568
+ notNumber = false;
15569
+ const decimal = ('' + value).split('.')[1];
15570
+ precisions.push(decimal ? decimal.length : 0);
15571
+ }
15572
+ });
15573
+ const precision = Math.max.apply(null, precisions);
15574
+ if (!notNumber) {
15575
+ sums[index] = values.reduce((prev, curr) => {
15576
+ const value = Number(curr);
15577
+ if (!isNaN(value)) {
15578
+ return parseFloat((prev + curr).toFixed(Math.min(precision, 20)));
15579
+ } else {
15580
+ return prev;
15581
+ }
15582
+ }, 0);
15583
+ } else {
15584
+ sums[index] = '';
15585
+ }
15586
+ });
15587
+ }
15588
+ return createVNode("div", {
15589
+ "class": "vc-table__footer",
15590
+ "cellspacing": "0",
15591
+ "cellpadding": "0",
15592
+ "border": "0"
15593
+ }, [createVNode("div", {
15594
+ "class": "vc-table__tbody"
15595
+ }, [createVNode("div", {
15596
+ "class": "vc-table__tr"
15597
+ }, [states.columns.map((column, cellIndex) => createVNode("div", {
15598
+ "key": cellIndex,
15599
+ "colspan": column.colSpan,
15600
+ "rowspan": column.rowSpan,
15601
+ "class": [getRowClasses(column, cellIndex), 'vc-table__td'],
15602
+ "style": [{
15603
+ width: `${column.realWidth}px`
15604
+ }]
15605
+ }, [createVNode("div", {
15606
+ "class": ['vc-table__cell', column.labelClass]
15607
+ }, [sums[cellIndex]])]))])])]);
15608
+ };
15609
+ }
15610
+ });
15611
+
15612
+ const props$c = {
15613
+ data: {
15614
+ type: Array,
15615
+ default: () => []
15616
+ },
15617
+ width: [String, Number],
15618
+ height: [String, Number],
15619
+ maxHeight: [String, Number],
15620
+ // 列的宽度是否自撑开
15621
+ fit: {
15622
+ type: Boolean,
15623
+ default: true
15624
+ },
15625
+ // 是否为斑马纹 table
15626
+ stripe: Boolean,
15627
+ // 是否带有纵向边框
15628
+ border: Boolean,
15629
+ // 非常影响表格虚拟滚动的性能，按容器的高度手动优化该值
15630
+ // 后续考虑移除，动态计算
15631
+ rows: {
15632
+ type: Number,
15633
+ default: 10
15634
+ },
15635
+ rowKey: [String, Function],
15636
+ // 是否显示表头
15637
+ showHeader: {
15638
+ type: Boolean,
15639
+ default: true
15640
+ },
15641
+ showSummary: Boolean,
15642
+ sumText: String,
15643
+ getSummary: Function,
15644
+ rowClass: [String, Function],
15645
+ rowStyle: [Object, Function],
15646
+ cellClass: [String, Function],
15647
+ cellStyle: [Object, Function],
15648
+ headerRowClass: [String, Function],
15649
+ headerRowStyle: [Object, Function],
15650
+ headerCellClass: [String, Function],
15651
+ headerCellStyle: [Object, Function],
15652
+ // 当前对应的currentRow是否可高亮
15653
+ highlight: Boolean,
15654
+ // TODO: 支持数组
15655
+ currentRowValue: [String, Number],
15656
+ emptyText: [String, Function],
15657
+ expandRowValue: Array,
15658
+ defaultExpandAll: Boolean,
15659
+ /**
15660
+ * 在多选表格中，当仅有部分行被选中时，点击表头的多选框时的行为。
15661
+ * 若为 true，则选中所有行；若为 false，则取消选择所有行
15662
+ */
15663
+ indeterminate: {
15664
+ type: Boolean,
15665
+ default: true
15666
+ },
15667
+ lazy: Boolean,
15668
+ // 展示树形数据时，树节点的缩进
15669
+ indent: {
15670
+ type: Number,
15671
+ default: 16
15672
+ },
15673
+ treeMap: {
15674
+ type: Object,
15675
+ default: () => {
15676
+ return {
15677
+ hasChildren: "hasChildren",
15678
+ children: "children"
15679
+ };
15680
+ }
15681
+ },
15682
+ // 树形表格子集是否需要显示选择按钮
15683
+ expandSelectable: {
15684
+ type: Boolean,
15685
+ default: true
15686
+ },
15687
+ loadExpand: Function,
15688
+ getSpan: Function,
15689
+ placeholder: {
15690
+ type: [String, Function],
15691
+ default: "--"
15692
+ },
15693
+ /**
15694
+ * 排序全部交给外部处理，内部不处理数据，只做交互
15695
+ * 列与列之间互斥
15696
+ */
15697
+ defaultSort: {
15698
+ type: Object,
15699
+ default: () => ({})
15700
+ }
15701
+ };
15702
+
15703
+ /** @jsxImportSource vue */
15704
+
15705
+ const COMPONENT_NAME$g = 'vc-table';
15706
+ const Table = /* @__PURE__ */ defineComponent({
15707
+ name: COMPONENT_NAME$g,
15708
+ props: props$c,
15709
+ emits: ['select', 'select-all', 'selection-change', 'cell-mouse-enter', 'cell-mouse-leave', 'cell-click', 'cell-dblclick', 'row-click', 'row-contextmenu', 'row-dblclick', 'header-click', 'header-contextmenu', 'current-change', 'header-dragend ', 'expand-change', 'sort-change'],
15710
+ setup(props, {
15711
+ slots,
15712
+ expose
15713
+ }) {
15714
+ const instance = getCurrentInstance();
15715
+ const store = new Store({
15716
+ table: instance
15717
+ });
15718
+ const {
15719
+ layout
15720
+ } = store;
15721
+
15722
+ // 由table-column控制
15723
+ const renderExpanded = ref(null);
15724
+ const resizeProxyVisible = ref(false);
15725
+ const resizeState = ref({
15726
+ width: null,
15727
+ height: null
15728
+ });
15729
+
15730
+ // refs
15731
+ const hiddenColumns = ref(null);
15732
+ const headerWrapper = ref(null);
15733
+ const tableHeader = ref(null);
15734
+ const scroller = ref(null);
15735
+ const body = ref();
15736
+ const emptyBlock = ref(null);
15737
+ const appendWrapper = ref(null);
15738
+ const footerWrapper = ref(null);
15739
+ const leftFixedWrapper = ref(null);
15740
+ const leftFixedHeaderWrapper = ref(null);
15741
+ const leftFixedTableHeader = ref(null);
15742
+ const leftFixedBodyWrapper = ref(null);
15743
+ const leftFixedBody = ref(null);
15744
+ const leftFixedFooterWrapper = ref(null);
15745
+ const rightFixedWrapper = ref(null);
15746
+ const rightFixedHeaderWrapper = ref(null);
15747
+ const rightFixedTableHeader = ref(null);
15748
+ const rightFixedBodyWrapper = ref(null);
15749
+ const rightFixedBody = ref(null);
15750
+ const rightFixedFooterWrapper = ref(null);
15751
+ const resizeProxy = ref(null);
15752
+
15753
+ // 是否拥有多级表头, 由table-header控制
15754
+ const isGroup = ref(false);
15755
+ const scrollPosition = ref('left');
15756
+ const hoverState = ref(null);
15757
+ const isReady = ref(false);
15758
+ const states = useStates({
15759
+ columns: 'columns',
15760
+ leftFixedColumns: 'leftFixedColumns',
15761
+ rightFixedColumns: 'rightFixedColumns'
15762
+ }, store);
15763
+ const classes = computed(() => {
15764
+ return {
15765
+ 'vc-table--fit': props.fit,
15766
+ 'vc-table--striped': props.stripe,
15767
+ 'vc-table--border': props.border || isGroup.value,
15768
+ 'vc-table--group': isGroup.value,
15769
+ 'vc-table--fluid-height': props.maxHeight,
15770
+ 'vc-table--scrollable-x': layout.states.scrollX,
15771
+ 'vc-table--scrollable-y': layout.states.scrollY,
15772
+ 'vc-table--enable-row-hover': !store.states.isComplex,
15773
+ 'vc-table--enable-row-transition': (store.states.data || []).length !== 0 && (store.states.data || []).length < 100
15774
+ };
15775
+ });
15776
+ const bodyXWrapper = computed(() => {
15777
+ return scroller.value?.wrapper;
15778
+ });
15779
+ const bodyYWrapper = computed(() => {
15780
+ return !props.height ? bodyXWrapper.value : body.value.getRootElement().querySelector('.vc-scroller__wrapper');
15781
+ });
15782
+ const shouldUpdateHeight = computed(() => {
15783
+ return props.height || props.maxHeight || states.leftFixedColumns.length > 0 || states.rightFixedColumns.length > 0;
15784
+ });
15785
+ const bodyWidthStyle = computed(() => {
15786
+ const {
15787
+ bodyWidth: $bodyWidth
15788
+ } = layout.states;
15789
+ return {
15790
+ width: $bodyWidth ? $bodyWidth + 'px' : ''
15791
+ };
15792
+ });
15793
+ const bodyHeightStyle = computed(() => {
15794
+ const {
15795
+ headerHeight,
15796
+ bodyHeight: $bodyHeight,
15797
+ footerHeight
15798
+ } = layout.states;
15799
+ if (props.height) {
15800
+ return {
15801
+ height: $bodyHeight ? $bodyHeight + 'px' : ''
15802
+ };
15803
+ } else if (props.maxHeight) {
15804
+ const maxHeight = parseHeight(props.maxHeight);
15805
+ if (maxHeight) {
15806
+ return {
15807
+ 'max-height': maxHeight - (footerHeight || 0) - (props.showHeader ? headerHeight || 0 : 0) + 'px'
15808
+ };
15809
+ }
15810
+ }
15811
+ return {};
15812
+ });
15813
+ const fixedHeightStyle = computed(() => {
15814
+ if (props.maxHeight) {
15815
+ if (props.showSummary) {
15816
+ return {
15817
+ bottom: 0
15818
+ };
15819
+ }
15820
+ return {
15821
+ bottom: layout.states.scrollX && props.data.length ? 0 : ''
15822
+ };
15823
+ } else {
15824
+ if (props.showSummary) {
15825
+ return {
15826
+ height: layout.states.tableHeight ? layout.states.tableHeight + 'px' : ''
15827
+ };
15828
+ }
15829
+ return {
15830
+ height: layout.states.viewportHeight ? layout.states.viewportHeight + 'px' : ''
15831
+ };
15832
+ }
15833
+ });
15834
+ let isUnMount = false;
15835
+ const updateScrollY = () => {
15836
+ if (isUnMount) return;
15837
+ layout.updateScrollY();
15838
+ layout.updateColumnsWidth();
15839
+ };
15840
+
15841
+ /**
15842
+ * 对 Table 进行重新布局。
15843
+ * 当 Table 或其祖先元素由隐藏切换为显示时，可能需要调用此方法
15844
+ */
15845
+ const refreshLayout = () => {
15846
+ if (isUnMount) return;
15847
+ layout.updateColumnsWidth();
15848
+ if (shouldUpdateHeight.value) {
15849
+ layout.updateElsHeight();
15850
+ }
15851
+ scroller.value?.refresh?.();
15852
+ };
15853
+ // 用于多选表格，切换所有行的选中状态
15854
+ const toggleAllSelection = () => {
15855
+ store.toggleAllSelection();
15856
+ };
15857
+
15858
+ // 用于单选表格，设定某一行为选中行，如果调用时不加参数，则会取消目前高亮行的选中状态。
15859
+ const setCurrentRow = row => {
15860
+ store.setCurrentRow(row);
15861
+ };
15862
+
15863
+ // 用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）
15864
+ const toggleRowSelection = (row, selected, emitChange) => {
15865
+ store.toggleRowSelection(row, selected, emitChange);
15866
+ store.updateAllSelected();
15867
+ };
15868
+
15869
+ // 用于可展开表格与树形表格，切换某一行的展开状态;如果使用了第二个参数，则是设置这一行展开与否（expanded 为 true 则展开）
15870
+ const toggleRowExpansion = (row, expanded) => {
15871
+ store.toggleRowExpansionAdapter(row, expanded);
15872
+ };
15873
+
15874
+ // 用于多选表格，清空用户的选择
15875
+ const clearSelection = () => {
15876
+ store.clearSelection();
15877
+ };
15878
+
15879
+ // 同步滚动
15880
+ const handleScollX = throttle(() => {
15881
+ if (!bodyXWrapper.value) return;
15882
+ const {
15883
+ scrollLeft,
15884
+ offsetWidth,
15885
+ scrollWidth
15886
+ } = bodyXWrapper.value;
15887
+ if (headerWrapper.value) headerWrapper.value.scrollLeft = scrollLeft;
15888
+ if (footerWrapper.value) footerWrapper.value.scrollLeft = scrollLeft;
15889
+ const maxScrollLeftPosition = scrollWidth - offsetWidth - 1;
15890
+ if (scrollLeft >= maxScrollLeftPosition) {
15891
+ scrollPosition.value = 'right';
15892
+ } else if (scrollLeft === 0) {
15893
+ scrollPosition.value = 'left';
15894
+ } else {
15895
+ scrollPosition.value = 'middle';
15896
+ }
15897
+ if (!props.height) {
15898
+ leftFixedBody.value.getRootElement().scrollTop = bodyXWrapper.value.scrollTop;
15899
+ rightFixedBody.value.getRootElement().scrollTop = bodyXWrapper.value.scrollTop;
15900
+ }
15901
+ }, 20);
15902
+ const handleScollY = e => {
15903
+ const v = {
15904
+ x: e.target.scrollLeft,
15905
+ y: e.target.scrollTop
15906
+ };
15907
+ rightFixedBody.value?.wrapper.scrollTo(v, true);
15908
+ leftFixedBody.value?.wrapper.scrollTo(v, true);
15909
+ };
15910
+ const handleResize = () => {
15911
+ if (!isReady.value) return;
15912
+ let shouldUpdateLayout = false;
15913
+ const el = instance.vnode.el;
15914
+ const {
15915
+ width: oldWidth,
15916
+ height: oldHeight
15917
+ } = resizeState.value;
15918
+ const width = el.offsetWidth;
15919
+ if (oldWidth !== width) {
15920
+ shouldUpdateLayout = true;
15921
+ }
15922
+ const height = el.offsetHeight;
15923
+ if ((props.height || shouldUpdateHeight.value) && oldHeight !== height) {
15924
+ shouldUpdateLayout = true;
15925
+ }
15926
+ if (shouldUpdateLayout) {
15927
+ resizeState.value = {
15928
+ width,
15929
+ height
15930
+ };
15931
+ refreshLayout();
15932
+ }
15933
+ };
15934
+ const handleMouseLeave = () => {
15935
+ store.setHoverRow(null);
15936
+ if (hoverState.value) hoverState.value = null;
15937
+ };
15938
+ const handleMousewheel = (deltaX, deltaY) => {
15939
+ const {
15940
+ scrollWidth: contentW,
15941
+ clientWidth: wrapperW,
15942
+ scrollLeft: scrollX
15943
+ } = bodyXWrapper.value;
15944
+ const {
15945
+ scrollHeight: contentH,
15946
+ clientHeight: wrapperH,
15947
+ scrollTop: scrollY
15948
+ } = bodyYWrapper.value;
15949
+ if (Math.abs(deltaY) > Math.abs(deltaX) && contentH > wrapperH) {
15950
+ // 虚拟滚动
15951
+ if (props.height) {
15952
+ body.value.wrapper?.scrollTo({
15953
+ y: scrollY + deltaY
15954
+ });
15955
+ } else {
15956
+ scroller.value.scrollTo({
15957
+ y: scrollY + deltaY
15958
+ });
15959
+ }
15960
+ } else if (deltaX && contentW > wrapperW) {
15961
+ scroller.value.scrollTo({
15962
+ x: scrollX + deltaX
15963
+ });
15964
+ }
15965
+ };
15966
+ let wheels = [];
15967
+ const bindEvents = () => {
15968
+ if (props.fit) {
15969
+ Resize.on(instance.vnode.el, handleResize);
15970
+ }
15971
+ nextTick(() => {
15972
+ wheels = [headerWrapper, footerWrapper, leftFixedWrapper, rightFixedWrapper].map(wrapper => {
15973
+ if (!wrapper.value) return;
15974
+ const wheel = new Wheel(wrapper.value, {
15975
+ shouldWheelX: delta => {
15976
+ const {
15977
+ scrollWidth: contentW,
15978
+ clientWidth: wrapperW,
15979
+ scrollLeft: scrollX
15980
+ } = bodyXWrapper.value;
15981
+ if (wrapperW === contentW) {
15982
+ return false;
15983
+ }
15984
+ delta = Math.round(delta);
15985
+ if (delta === 0) {
15986
+ return false;
15987
+ }
15988
+ return delta < 0 && scrollX > 0 || delta >= 0 && scrollX < contentW - wrapperW;
15989
+ },
15990
+ shouldWheelY: delta => {
15991
+ const {
15992
+ scrollHeight: contentH,
15993
+ clientHeight: wrapperH,
15994
+ scrollTop: scrollY
15995
+ } = bodyYWrapper.value;
15996
+ if (wrapperH === contentH) {
15997
+ return false;
15998
+ }
15999
+ delta = Math.round(delta);
16000
+ if (delta === 0) {
16001
+ return false;
16002
+ }
16003
+ return delta < 0 && scrollY > 0 || delta >= 0 && scrollY < contentH - wrapperH;
16004
+ }
16005
+ });
16006
+ wheel.on(handleMousewheel);
16007
+ return wheel;
16008
+ });
16009
+ });
16010
+ };
16011
+ const unbindEvents = () => {
16012
+ if (props.fit) {
16013
+ Resize.off(instance.vnode.el, handleResize);
16014
+ }
16015
+ wheels.forEach(wheel => wheel && wheel.off(handleMousewheel));
16016
+ };
16017
+ const debouncedUpdateLayout = debounce(() => refreshLayout(), 50);
16018
+ watch(() => props.height, v => {
16019
+ layout.setHeight(v);
16020
+ }, {
16021
+ immediate: true
16022
+ });
16023
+ watch(() => props.maxHeight, v => {
16024
+ layout.setMaxHeight(v);
16025
+ }, {
16026
+ immediate: true
16027
+ });
16028
+ watch(() => props.currentRowValue, v => {
16029
+ if (!props.rowKey) return;
16030
+ store.current.reset(v);
16031
+ }, {
16032
+ immediate: true
16033
+ });
16034
+ watch(() => props.data, v => {
16035
+ store.setData(v);
16036
+ isReady.value && nextTick(refreshLayout);
16037
+ }, {
16038
+ immediate: true
16039
+ });
16040
+ watch(() => props.expandRowValue, v => {
16041
+ if (v) {
16042
+ store.setExpandRowValueAdapter(v);
16043
+ }
16044
+ }, {
16045
+ immediate: true
16046
+ });
16047
+
16048
+ // 直接修改className（不使用render函数）, 解决临界值设置修改className时的顿挫
16049
+ watch(() => scrollPosition.value, v => {
16050
+ raf(() => {
16051
+ const className = `is-scrolling-${layout.states.scrollX ? v : 'none'}`;
16052
+ const el = bodyXWrapper.value;
16053
+ el && el.classList.replace(el.classList.item(el.classList.length - 1), className);
16054
+ });
16055
+ }, {
16056
+ immediate: true
16057
+ });
16058
+ onMounted(() => {
16059
+ bindEvents();
16060
+ store.updateColumns();
16061
+ refreshLayout();
16062
+ resizeState.value = {
16063
+ width: instance.vnode.el.offsetWidth,
16064
+ height: instance.vnode.el.offsetHeight
16065
+ };
16066
+ isReady.value = true;
16067
+ });
16068
+ onBeforeUnmount(() => {
16069
+ isUnMount = true;
16070
+ unbindEvents();
16071
+ });
16072
+ const tableId = getUid('table');
16073
+ expose({
16074
+ tableId,
16075
+ store,
16076
+ layout,
16077
+ updateScrollY,
16078
+ refreshLayout,
16079
+ toggleAllSelection,
16080
+ setCurrentRow,
16081
+ toggleRowSelection,
16082
+ toggleRowExpansion,
16083
+ clearSelection,
16084
+ scroller,
16085
+ headerWrapper,
16086
+ appendWrapper,
16087
+ footerWrapper,
16088
+ resizeState,
16089
+ debouncedUpdateLayout,
16090
+ isReady,
16091
+ hoverState,
16092
+ renderExpanded,
16093
+ hiddenColumns
16094
+ });
16095
+ return () => {
16096
+ return createVNode("div", {
16097
+ "class": [classes.value, tableId, 'vc-table'],
16098
+ "onMouseleave": handleMouseLeave
16099
+ }, [createVNode("div", {
16100
+ "ref": hiddenColumns,
16101
+ "class": "vc-table__hidden"
16102
+ }, [slots.default?.()]), props.showHeader && createVNode("div", {
16103
+ "ref": headerWrapper,
16104
+ "class": "vc-table__header-wrapper"
16105
+ }, [createVNode(TableHeader, {
16106
+ "ref": tableHeader,
16107
+ "store": store,
16108
+ "border": props.border,
16109
+ "default-sort": props.defaultSort,
16110
+ "style": bodyWidthStyle.value
16111
+ }, null)]), states.columns.length > 0 && createVNode(ScrollerWheel, {
16112
+ "ref": scroller,
16113
+ "class": ['vc-table__body-wrapper is-scrolling-none'],
16114
+ "barTo": `.${tableId}`,
16115
+ "native": false,
16116
+ "always": false,
16117
+ "track-offset-y": [layout.states.headerHeight, 0, -layout.states.headerHeight - layout.states.footerHeight, 0],
16118
+ "style": [bodyHeightStyle.value],
16119
+ "onScroll": handleScollX
16120
+ }, {
16121
+ default: () => [createVNode(TableBody, {
16122
+ "ref": body,
16123
+ "store": store,
16124
+ "style": [bodyWidthStyle.value],
16125
+ "height-style": [bodyHeightStyle.value],
16126
+ "onScroll": handleScollY
16127
+ }, null), props.data.length === 0 && createVNode("div", {
16128
+ "ref": emptyBlock,
16129
+ "style": bodyWidthStyle.value,
16130
+ "class": "vc-table__empty-block"
16131
+ }, [createVNode("span", {
16132
+ "class": "vc-table__empty-text"
16133
+ }, [slots.empty ? slots.empty() : props.emptyText || '暂无数据'])]), slots.append && createVNode("div", {
16134
+ "ref": appendWrapper,
16135
+ "class": "vc-table__append-wrapper"
16136
+ }, [slots.append()])]
16137
+ }), props.showSummary && withDirectives(createVNode("div", {
16138
+ "ref": footerWrapper,
16139
+ "class": "vc-table__footer-wrapper"
16140
+ }, [createVNode(TableFooter, {
16141
+ "store": store,
16142
+ "border": props.border,
16143
+ "sum-text": props.sumText || '合计',
16144
+ "get-summary": props.getSummary,
16145
+ "style": bodyWidthStyle.value
16146
+ }, null)]), [[vShow, props.data && props.data.length > 0]]), states.leftFixedColumns.length > 0 && states.columns.length > 0 && createVNode("div", {
16147
+ "ref": leftFixedWrapper,
16148
+ "style": [{
16149
+ width: layout.states.leftFixedWidth ? layout.states.leftFixedWidth + 'px' : ''
16150
+ }, fixedHeightStyle.value],
16151
+ "class": "vc-table__fixed"
16152
+ }, [props.showHeader && createVNode("div", {
16153
+ "ref": leftFixedHeaderWrapper,
16154
+ "class": "vc-table__fixed-header-wrapper"
16155
+ }, [createVNode(TableHeader, {
16156
+ "ref": leftFixedTableHeader,
16157
+ "store": store,
16158
+ "border": props.border,
16159
+ "default-sort": props.defaultSort,
16160
+ "style": bodyWidthStyle.value,
16161
+ "fixed": "left"
16162
+ }, null)]), createVNode("div", {
16163
+ "ref": leftFixedBodyWrapper,
16164
+ "style": [{
16165
+ top: layout.states.headerHeight + 'px'
16166
+ }],
16167
+ "class": "vc-table__fixed-body-wrapper"
16168
+ }, [createVNode(TableBody, {
16169
+ "ref": leftFixedBody,
16170
+ "store": store,
16171
+ "style": [bodyWidthStyle.value, bodyHeightStyle.value],
16172
+ "fixed": "left"
16173
+ }, null), slots.append && createVNode("div", {
16174
+ "style": [{
16175
+ height: layout.states.appendHeight + 'px'
16176
+ }],
16177
+ "class": "vc-table__append-gutter"
16178
+ }, [slots.append()])]), props.showSummary && withDirectives(createVNode("div", {
16179
+ "ref": leftFixedFooterWrapper,
16180
+ "class": "vc-table__fixed-footer-wrapper"
16181
+ }, [createVNode(TableFooter, {
16182
+ "store": store,
16183
+ "border": props.border,
16184
+ "sum-text": props.sumText || '合计',
16185
+ "get-summary": props.getSummary,
16186
+ "style": bodyWidthStyle.value,
16187
+ "fixed": "left"
16188
+ }, null)]), [[vShow, props.data && props.data.length > 0]])]), states.rightFixedColumns.length > 0 && createVNode("div", {
16189
+ "ref": rightFixedWrapper,
16190
+ "style": [{
16191
+ width: layout.states.rightFixedWidth ? layout.states.rightFixedWidth + 'px' : ''
16192
+ }, fixedHeightStyle.value],
16193
+ "class": "vc-table__fixed-right"
16194
+ }, [props.showHeader && createVNode("div", {
16195
+ "ref": rightFixedHeaderWrapper,
16196
+ "class": "vc-table__fixed-header-wrapper"
16197
+ }, [createVNode(TableHeader, {
16198
+ "ref": rightFixedTableHeader,
16199
+ "store": store,
16200
+ "border": props.border,
16201
+ "default-sort": props.defaultSort,
16202
+ "style": bodyWidthStyle.value,
16203
+ "fixed": "right"
16204
+ }, null)]), createVNode("div", {
16205
+ "ref": rightFixedBodyWrapper,
16206
+ "style": [{
16207
+ top: layout.states.headerHeight + 'px'
16208
+ }],
16209
+ "class": "vc-table__fixed-body-wrapper"
16210
+ }, [createVNode(TableBody, {
16211
+ "ref": rightFixedBody,
16212
+ "store": store,
16213
+ "style": [bodyWidthStyle.value, bodyHeightStyle.value],
16214
+ "fixed": "right"
16215
+ }, null), slots.append && createVNode("div", {
16216
+ "style": [{
16217
+ height: layout.states.appendHeight + 'px'
16218
+ }],
16219
+ "class": "vc-table__append-gutter"
16220
+ }, [slots.append()])]), props.showSummary && withDirectives(createVNode("div", {
16221
+ "ref": rightFixedFooterWrapper,
16222
+ "class": "vc-table__fixed-footer-wrapper"
16223
+ }, [createVNode(TableFooter, {
16224
+ "store": store,
16225
+ "border": props.border,
16226
+ "sum-text": props.sumText || '合计',
16227
+ "get-summary": props.getSummary,
16228
+ "style": bodyWidthStyle.value,
16229
+ "fixed": "right"
16230
+ }, null)]), [[vShow, props.data && props.data.length > 0]])]), withDirectives(createVNode("div", {
16231
+ "ref": resizeProxy,
16232
+ "class": "vc-table__column-resize-proxy"
16233
+ }, null), [[vShow, resizeProxyVisible.value]])]);
16234
+ };
16235
+ }
16236
+ });
16237
+
16238
+ const cellStarts = {
16239
+ default: {
16240
+ order: ''
16241
+ },
16242
+ selection: {
16243
+ width: 48,
16244
+ minWidth: 48,
16245
+ realWidth: 48,
16246
+ order: '',
16247
+ className: 'vc-table-column--selection'
16248
+ },
16249
+ expand: {
16250
+ width: 48,
16251
+ minWidth: 48,
16252
+ realWidth: 48,
16253
+ order: ''
16254
+ },
16255
+ index: {
16256
+ width: 48,
16257
+ minWidth: 48,
16258
+ realWidth: 48,
16259
+ order: ''
13731
16260
  }
13732
16261
  };
13733
16262
 
13734
- /** @jsxImportSource vue */
16263
+ // 这些选项不应该被覆盖
16264
+ const cellForced = {
16265
+ selection: {
16266
+ renderHeader({
16267
+ store
16268
+ }) {
16269
+ return createVNode(Checkbox, {
16270
+ "modelValue": store.states.isAllSelected,
16271
+ "disabled": store.states.data && store.states.data.length === 0,
16272
+ "indeterminate": store.states.selection.length > 0 && !store.states.isAllSelected,
16273
+ "onClick": e => {
16274
+ e.stopPropagation();
16275
+ store.toggleAllSelection();
16276
+ }
16277
+ }, null);
16278
+ },
16279
+ renderCell({
16280
+ row,
16281
+ column,
16282
+ store,
16283
+ rowIndex,
16284
+ level
16285
+ }) {
16286
+ return withDirectives(createVNode(Checkbox, {
16287
+ "modelValue": store.isSelected(row),
16288
+ "disabled": column.selectable ? !column.selectable.call(null, row, rowIndex) : false,
16289
+ "onChange": () => store.rowSelectedChanged(row),
16290
+ "onClick": e => e.stopPropagation()
16291
+ }, null), [[vShow, store.table.props.expandSelectable || level === 0]]);
16292
+ },
16293
+ sortable: false,
16294
+ resizable: false
16295
+ },
16296
+ index: {
16297
+ renderHeader(h, {
16298
+ column
16299
+ }) {
16300
+ return column.label || '#';
16301
+ },
16302
+ renderCell({
16303
+ rowIndex,
16304
+ column
16305
+ }) {
16306
+ let i = rowIndex + 1;
16307
+ const index = column.index;
16308
+ if (typeof index === 'number') {
16309
+ i = rowIndex + index;
16310
+ } else if (typeof index === 'function') {
16311
+ i = index(rowIndex);
16312
+ }
16313
+ return createVNode("div", null, [i]);
16314
+ },
16315
+ sortable: false
16316
+ },
16317
+ expand: {
16318
+ renderHeader({
16319
+ column
16320
+ }) {
16321
+ return column.label || '';
16322
+ },
16323
+ renderCell({
16324
+ row,
16325
+ store
16326
+ }) {
16327
+ const classes = ['vc-table__expand-icon'];
16328
+ if (store.states.expandRows.includes(row)) {
16329
+ classes.push('is-expand');
16330
+ }
16331
+ const handleClick = e => {
16332
+ e.stopPropagation();
16333
+ store.expand.toggle(row);
16334
+ };
16335
+ return createVNode("div", {
16336
+ "class": classes,
16337
+ "onClick": handleClick
16338
+ }, [createVNode(Icon, {
16339
+ "type": "triangle-up"
16340
+ }, null)]);
16341
+ },
16342
+ sortable: false,
16343
+ resizable: false,
16344
+ className: 'vc-table__expand-column'
16345
+ }
16346
+ };
13735
16347
 
13736
- const COMPONENT_NAME$f = 'vc-table';
13737
- const Table = /* @__PURE__ */ defineComponent({
13738
- name: COMPONENT_NAME$f,
13739
- props: props$c,
16348
+ // Cell默认渲染value 或 formatter
16349
+ const defaultRenderCell = ({
16350
+ row,
16351
+ column = {},
16352
+ rowIndex
16353
+ }) => {
16354
+ const {
16355
+ prop,
16356
+ formatter
16357
+ } = column;
16358
+ let value;
16359
+ if (prop) {
16360
+ value = getPropByPath(row, prop).v;
16361
+ }
16362
+ if (formatter) {
16363
+ return column.formatter({
16364
+ row,
16365
+ column,
16366
+ value,
16367
+ rowIndex
16368
+ });
16369
+ }
16370
+ return value;
16371
+ };
16372
+
16373
+ // Cell渲染前缀，如loading, expand
16374
+ const treeCellPrefix = ({
16375
+ row,
16376
+ treeNode,
16377
+ store
16378
+ }) => {
16379
+ if (!treeNode) return null;
16380
+ const ele = [];
16381
+ const handleClick = e => {
16382
+ e.stopPropagation();
16383
+ store.tree.loadOrToggle(row);
16384
+ };
16385
+ if (treeNode.indent) {
16386
+ ele.push(createVNode("span", {
16387
+ "class": "vc-table__indent",
16388
+ "style": {
16389
+ 'padding-left': treeNode.indent + 'px'
16390
+ }
16391
+ }, null));
16392
+ }
16393
+ if (typeof treeNode.expanded === 'boolean' && !treeNode.noLazyChildren) {
16394
+ const expandClasses = {
16395
+ 'vc-table__expand-icon': true,
16396
+ 'is-expand': treeNode.expanded
16397
+ };
16398
+ ele.push(createVNode("span", {
16399
+ "class": expandClasses,
16400
+ "onClick": handleClick
16401
+ }, [treeNode.loading ? createVNode(Spin, {
16402
+ "size": 12
16403
+ }, null) : createVNode(Icon, {
16404
+ "type": "triangle-up"
16405
+ }, null)]));
16406
+ } else {
16407
+ ele.push(createVNode("span", {
16408
+ "class": "vc-table__placeholder"
16409
+ }, null));
16410
+ }
16411
+ return ele;
16412
+ };
16413
+
16414
+ const TableColumn = /* @__PURE__ */ defineComponent({
16415
+ name: 'vc-table-column',
16416
+ props: {
16417
+ type: {
16418
+ type: String,
16419
+ default: 'default'
16420
+ },
16421
+ label: String,
16422
+ customClass: String,
16423
+ labelClass: String,
16424
+ prop: String,
16425
+ width: [Number, String],
16426
+ minWidth: [Number, String],
16427
+ renderHeader: Function,
16428
+ resizable: {
16429
+ type: Boolean,
16430
+ default: true
16431
+ },
16432
+ columnKey: String,
16433
+ align: String,
16434
+ headerAlign: String,
16435
+ showPopover: Boolean,
16436
+ fixed: [Boolean, String],
16437
+ formatter: Function,
16438
+ selectable: Function,
16439
+ reserveSelection: Boolean,
16440
+ index: [Number, Function],
16441
+ // 头部是否展示排序
16442
+ sortable: Boolean,
16443
+ // 数据过滤的选项
16444
+ filters: Array,
16445
+ // 是否支持多选
16446
+ filterMultiple: {
16447
+ type: Boolean,
16448
+ default: true
16449
+ },
16450
+ filterIcon: String,
16451
+ // 选中的数据过滤项
16452
+ filteredValue: Array,
16453
+ // 筛选弹层的样式
16454
+ filterPopupClass: String,
16455
+ // 筛选的方法
16456
+ filter: Function,
16457
+ tooltip: [String, Function]
16458
+ },
13740
16459
  setup(props, {
13741
- slots
16460
+ slots,
16461
+ expose
13742
16462
  }) {
16463
+ const instance = getCurrentInstance();
16464
+ const table = getInstance('table', 'tableId');
16465
+ const parent = getInstance('table-column', 'columnId') || table;
16466
+ const isSubColumn = table !== parent; // 用于多久表头
16467
+
16468
+ const columnId = ref((parent.exposed.tableId || parent.exposed.columnId) + getUid('column'));
16469
+ const realWidth = computed(() => {
16470
+ return parseWidth(props.width);
16471
+ });
16472
+ const realMinWidth = computed(() => {
16473
+ return parseMinWidth(props.minWidth);
16474
+ });
16475
+ const realAlign = computed(() => {
16476
+ return props.align ? 'is-' + props.align : null;
16477
+ });
16478
+ const realHeaderAlign = computed(() => {
16479
+ return props.headerAlign ? 'is-' + props.headerAlign : realAlign.value;
16480
+ });
16481
+ const columnConfig = reactive({});
16482
+ /**
16483
+ * 获取当前值情况，this[key]
16484
+ * @param args ~
16485
+ * @returns ~
16486
+ */
16487
+ const getPropsData = (...args) => {
16488
+ const result = args.reduce((prev, cur) => {
16489
+ if (Array.isArray(cur)) {
16490
+ cur.forEach(key => {
16491
+ prev[key] = props[key];
16492
+ });
16493
+ }
16494
+ return prev;
16495
+ }, {});
16496
+ return result;
16497
+ };
16498
+
16499
+ /**
16500
+ * compose 1
16501
+ * 对于特定类型的 column，某些属性不允许设置
16502
+ * 如 type: selection | index | expand
16503
+ * @param column ~
16504
+ * @returns ~
16505
+ */
16506
+ const setColumnForcedProps = column => {
16507
+ const type = column.type;
16508
+ const source = cellForced[type] || {};
16509
+ Object.keys(source).forEach(prop => {
16510
+ const value = source[prop];
16511
+ if (value !== undefined) {
16512
+ column[prop] = prop === 'customClass' ? `${column[prop]} ${value}` : value;
16513
+ }
16514
+ });
16515
+ return column;
16516
+ };
16517
+
16518
+ /**
16519
+ * compose 2
16520
+ * column
16521
+ * -> width
16522
+ * -> minWidth
16523
+ * @param column ~
16524
+ * @returns ~
16525
+ */
16526
+ const setColumnWidth = column => {
16527
+ if (realWidth.value) {
16528
+ column.width = realWidth.value;
16529
+ }
16530
+ if (realMinWidth.value) {
16531
+ column.minWidth = realMinWidth.value;
16532
+ }
16533
+ if (!column.minWidth) {
16534
+ column.minWidth = 80;
16535
+ }
16536
+ column.realWidth = column.width === undefined ? column.minWidth : column.width;
16537
+ return column;
16538
+ };
16539
+
16540
+ /**
16541
+ * compose 3
16542
+ * column
16543
+ * -> renderHeader: 渲染头部
16544
+ * -> renderCell: 渲染单元格
16545
+ * owner
16546
+ * -> renderExpanded: 展开
16547
+ * @param column ~
16548
+ * @returns ~
16549
+ */
16550
+ const setColumnRenders = column => {
16551
+ const specialTypes = Object.keys(cellForced);
16552
+ // renderHeader 属性不推荐使用。
16553
+ if (props.renderHeader) {
16554
+ column.renderHeader = props.renderHeader;
16555
+ } else if (specialTypes.indexOf(column.type) === -1) {
16556
+ column.renderHeader = data => {
16557
+ const renderHeader = slots.header;
16558
+ return renderHeader ? renderHeader(data) : data?.column?.label;
16559
+ };
16560
+ }
16561
+ let originRenderCell = column.renderCell;
16562
+ // TODO: 这里的实现调整
16563
+ if (column.type === 'expand') {
16564
+ // 对于展开行，renderCell 不允许配置的。在上一步中已经设置过，这里需要简单封装一下。
16565
+ column.renderCell = data => createVNode("div", {
16566
+ "class": "vc-table__cell"
16567
+ }, [originRenderCell(data)]);
16568
+ table.exposed.renderExpanded.value = data => {
16569
+ return slots.default ? slots.default(data) : slots.default;
16570
+ };
16571
+ } else {
16572
+ originRenderCell = originRenderCell || defaultRenderCell;
16573
+ // 对 renderCell 进行包装
16574
+ column.renderCell = data => {
16575
+ let children = null;
16576
+ if (slots.default) {
16577
+ children = slots?.default?.(data);
16578
+ } else {
16579
+ children = originRenderCell(data);
16580
+ }
16581
+ let prefix = treeCellPrefix(data);
16582
+ const $props = {
16583
+ class: 'vc-table__cell',
16584
+ style: {}
16585
+ };
16586
+ // 存在树形数组，且当前行无箭头图标且处于当前展开列，表格对齐
16587
+ if (!isEmpty$1(table.exposed.store.states.treeData) && !prefix && data.isExpandColumn) {
16588
+ prefix = createVNode("span", {
16589
+ "class": "vc-table-un-expand__indent"
16590
+ }, null);
16591
+ }
16592
+ if (data.column.showPopover) {
16593
+ $props.class += ' vc-popover';
16594
+ $props.style = {
16595
+ width: (data.column.realWidth || data.column.width) - 1 + 'px'
16596
+ };
16597
+ }
16598
+ const {
16599
+ placeholder
16600
+ } = table.props;
16601
+ const contentPlaceholder = typeof placeholder === 'function' ? placeholder() : placeholder;
16602
+ return createVNode("div", $props, [prefix, children === undefined || children === '' || children === null ? contentPlaceholder : children]);
16603
+ };
16604
+ }
16605
+ return column;
16606
+ };
16607
+ const refreshColumnBasicConfig = () => {
16608
+ const defaults = {
16609
+ ...cellStarts[props.type],
16610
+ type: props.type,
16611
+ id: columnId.value,
16612
+ align: realAlign.value,
16613
+ headerAlign: realHeaderAlign.value,
16614
+ prop: props.prop,
16615
+ showPopover: props.showPopover,
16616
+ // index 列
16617
+ index: props.index
16618
+ };
16619
+ const basicProps = ['columnKey', 'label', 'customClass', 'labelClass', 'type', 'renderHeader', 'resizable', 'formatter', 'fixed', 'resizable']; // eslint-disable-line
16620
+ const selectProps = ['selectable', 'reserveSelection'];
16621
+ const sortProps = ['sortable'];
16622
+ const filterProps = ['filters', 'filteredValue', 'filterMultiple', 'filter', 'filterIcon', 'filterPopupClass'];
16623
+ let column = getPropsData(basicProps, selectProps, sortProps, filterProps);
16624
+ column = merge$1(defaults, column);
16625
+
16626
+ // 注意 compose 中函数执行的顺序是从右到左
16627
+ column = compose(setColumnRenders, setColumnWidth, setColumnForcedProps)(column);
16628
+ for (const key in column) {
16629
+ if (hasOwn(column, key)) {
16630
+ columnConfig[key] = column[key];
16631
+ }
16632
+ }
16633
+ };
16634
+ const registerComplexWatchers = () => {
16635
+ watch(() => props.fixed, () => {
16636
+ table.exposed.store.scheduleLayout(true);
16637
+ });
16638
+ watch(() => realWidth.value, () => {
16639
+ table.exposed.store.scheduleLayout(false);
16640
+ });
16641
+ watch(() => realMinWidth.value, () => {
16642
+ table.exposed.store.scheduleLayout(false);
16643
+ });
16644
+ };
16645
+ onBeforeMount(() => {
16646
+ refreshColumnBasicConfig();
16647
+ registerComplexWatchers();
16648
+ });
16649
+ onUpdated(refreshColumnBasicConfig);
16650
+ onMounted(() => {
16651
+ const children = isSubColumn ? parent.vnode.el.children : parent.exposed.hiddenColumns.value.children;
16652
+
16653
+ // DOM上
16654
+ const columnIndex = [...children].indexOf(instance.vnode.el);
16655
+ table.exposed.store.insertColumn(columnConfig, columnIndex, isSubColumn && parent.exposed.columnConfig);
16656
+ });
16657
+ onUnmounted(() => {
16658
+ if (!instance.parent) return;
16659
+ table.exposed.store.removeColumn(columnConfig, isSubColumn && parent.exposed.columnConfig);
16660
+ });
16661
+ expose({
16662
+ columnId,
16663
+ columnConfig
16664
+ });
16665
+
16666
+ /**
16667
+ * 可以计算 columnIndex(外层需要标签元素), 即h('div')
16668
+ * this.$slots?.default?.() 用于多级表头
16669
+ * @returns ~
16670
+ */
13743
16671
  return () => {
13744
- return createVNode("div", {
13745
- "class": "vc-table"
13746
- }, [slots?.default?.()]);
16672
+ let children = [];
16673
+ try {
16674
+ const renderDefault = slots?.default?.({
16675
+ row: {},
16676
+ column: {},
16677
+ $index: -1
16678
+ });
16679
+ if (renderDefault instanceof Array) {
16680
+ for (const childNode of renderDefault) {
16681
+ if (/^vcm?-table-column$/.test(childNode.type?.name)) {
16682
+ children.push(childNode);
16683
+ } else if (childNode.type === Fragment$1 && childNode.children instanceof Array) {
16684
+ renderDefault.push(...childNode.children);
16685
+ }
16686
+ }
16687
+ }
16688
+ } catch {
16689
+ children = [];
16690
+ }
16691
+ return h('div', children);
13747
16692
  };
13748
16693
  }
13749
16694
  });
13750
16695
 
13751
16696
  const MTable = Table;
16697
+ const MTableColumn = TableColumn;
13752
16698
 
13753
16699
  const props$b = {
13754
16700
  type: {
@@ -13905,9 +16851,9 @@ const useTabs = (options = {}) => {
13905
16851
 
13906
16852
  /** @jsxImportSource vue */
13907
16853
 
13908
- const COMPONENT_NAME$e = 'vc-tabs';
16854
+ const COMPONENT_NAME$f = 'vc-tabs';
13909
16855
  const Tabs = /* @__PURE__ */ defineComponent({
13910
- name: COMPONENT_NAME$e,
16856
+ name: COMPONENT_NAME$f,
13911
16857
  props: props$b,
13912
16858
  emits: ['update:modelValue', 'change', 'click'],
13913
16859
  setup(props, {
@@ -14155,9 +17101,9 @@ const useTabsPane = () => {
14155
17101
 
14156
17102
  /** @jsxImportSource vue */
14157
17103
 
14158
- const COMPONENT_NAME$d = 'vc-tabs-pane';
17104
+ const COMPONENT_NAME$e = 'vc-tabs-pane';
14159
17105
  const TabsPane = /* @__PURE__ */ defineComponent({
14160
- name: COMPONENT_NAME$d,
17106
+ name: COMPONENT_NAME$e,
14161
17107
  props: props$a,
14162
17108
  setup(_, {
14163
17109
  slots
@@ -14212,9 +17158,9 @@ const props$9 = {
14212
17158
 
14213
17159
  /** @jsxImportSource vue */
14214
17160
 
14215
- const COMPONENT_NAME$c = 'vcm-tabs';
17161
+ const COMPONENT_NAME$d = 'vcm-tabs';
14216
17162
  const MTabs = /* @__PURE__ */ defineComponent({
14217
- name: COMPONENT_NAME$c,
17163
+ name: COMPONENT_NAME$d,
14218
17164
  props: props$9,
14219
17165
  emits: ['update:modelValue', 'change', 'click'],
14220
17166
  setup(props, {
@@ -14479,9 +17425,9 @@ const MTabs = /* @__PURE__ */ defineComponent({
14479
17425
 
14480
17426
  /** @jsxImportSource vue */
14481
17427
 
14482
- const COMPONENT_NAME$b = 'vcm-tabs-pane';
17428
+ const COMPONENT_NAME$c = 'vcm-tabs-pane';
14483
17429
  const MTabsPane = /* @__PURE__ */ defineComponent({
14484
- name: COMPONENT_NAME$b,
17430
+ name: COMPONENT_NAME$c,
14485
17431
  props: props$a,
14486
17432
  setup(_, {
14487
17433
  slots
@@ -14605,9 +17551,9 @@ const getFitIndex = (options = {}) => {
14605
17551
 
14606
17552
  /** @jsxImportSource vue */
14607
17553
 
14608
- const COMPONENT_NAME$a = 'vc-text';
17554
+ const COMPONENT_NAME$b = 'vc-text';
14609
17555
  const Text = /* @__PURE__ */ defineComponent({
14610
- name: COMPONENT_NAME$a,
17556
+ name: COMPONENT_NAME$b,
14611
17557
  props: props$8,
14612
17558
  setup(props, {
14613
17559
  emit
@@ -14700,9 +17646,9 @@ const props$7 = {
14700
17646
 
14701
17647
  /** @jsxImportSource vue */
14702
17648
 
14703
- const COMPONENT_NAME$9 = 'vc-textarea';
17649
+ const COMPONENT_NAME$a = 'vc-textarea';
14704
17650
  const Textarea = /* @__PURE__ */ defineComponent({
14705
- name: COMPONENT_NAME$9,
17651
+ name: COMPONENT_NAME$a,
14706
17652
  props: props$7,
14707
17653
  setup(props, {
14708
17654
  slots
@@ -14760,9 +17706,9 @@ const props$6 = {
14760
17706
  }
14761
17707
  };
14762
17708
 
14763
- const COMPONENT_NAME$8 = "vc-theme";
17709
+ const COMPONENT_NAME$9 = "vc-theme";
14764
17710
  const Theme = defineComponent({
14765
- name: COMPONENT_NAME$8,
17711
+ name: COMPONENT_NAME$9,
14766
17712
  props: props$6,
14767
17713
  setup(props, { slots }) {
14768
17714
  const themeId = Utils.getUid("vc-theme");
@@ -14848,9 +17794,9 @@ const Theme = defineComponent({
14848
17794
  }
14849
17795
  });
14850
17796
 
14851
- const COMPONENT_NAME$7 = "vc-theme-view";
17797
+ const COMPONENT_NAME$8 = "vc-theme-view";
14852
17798
  const ThemeView = defineComponent({
14853
- name: COMPONENT_NAME$7,
17799
+ name: COMPONENT_NAME$8,
14854
17800
  props: props$6,
14855
17801
  setup(props, { slots }) {
14856
17802
  return () => {
@@ -14866,9 +17812,9 @@ const ThemeView = defineComponent({
14866
17812
  }
14867
17813
  });
14868
17814
 
14869
- const COMPONENT_NAME$6 = "vc-theme-text";
17815
+ const COMPONENT_NAME$7 = "vc-theme-text";
14870
17816
  const ThemeText = defineComponent({
14871
- name: COMPONENT_NAME$6,
17817
+ name: COMPONENT_NAME$7,
14872
17818
  props: props$6,
14873
17819
  setup(props, { slots }) {
14874
17820
  return () => {
@@ -14884,9 +17830,9 @@ const ThemeText = defineComponent({
14884
17830
  }
14885
17831
  });
14886
17832
 
14887
- const COMPONENT_NAME$5 = "vc-theme-image";
17833
+ const COMPONENT_NAME$6 = "vc-theme-image";
14888
17834
  const ThemeImage = defineComponent({
14889
- name: COMPONENT_NAME$5,
17835
+ name: COMPONENT_NAME$6,
14890
17836
  props: props$6,
14891
17837
  setup(props, { slots }) {
14892
17838
  return () => {
@@ -14934,11 +17880,12 @@ const props$5 = {
14934
17880
 
14935
17881
  /** @jsxImportSource vue */
14936
17882
 
17883
+ const COMPONENT_NAME$5 = 'vc-time-picker';
14937
17884
  const getPanel = type => {
14938
17885
  const isRange = type === 'timerange';
14939
17886
  return isRange ? TimeRangePanel : TimePanel;
14940
17887
  };
14941
- const TimePicker = createPicker(props$5, () => {
17888
+ const TimePicker = createPicker(COMPONENT_NAME$5, props$5, () => {
14942
17889
  const props = getCurrentInstance().props;
14943
17890
  const icon = ref('icon');
14944
17891
  const panel = shallowRef({});
@@ -15217,7 +18164,8 @@ const Upload = defineComponent({
15217
18164
  const { mode, size } = props;
15218
18165
  const onRequest = instance.vnode.props?.onRequest || VcInstance.options.Upload?.onRequest || (() => {
15219
18166
  });
15220
- const onResponse = instance.vnode.props?.onResponse || VcInstance.options.Upload?.onResponse;
18167
+ const onResponse = instance.vnode.props?.onResponse || VcInstance.options.Upload?.onResponse || (() => {
18168
+ });
15221
18169
  const $mode = mode.replace(/s$/, "");
15222
18170
  const onError = async (originalResponse, internalMessage) => {
15223
18171
  delete requests[vFile.uploadId];
@@ -15226,9 +18174,17 @@ const Upload = defineComponent({
15226
18174
  emitError(originalResponse, internalMessage);
15227
18175
  done(vFile);
15228
18176
  };
15229
- const onSuccess = async (originalResponse) => {
18177
+ const onSuccess = async (request) => {
15230
18178
  try {
15231
- const response = await onResponse(originalResponse, options) || originalResponse;
18179
+ let response = await onResponse(request, options) || request;
18180
+ if (response === request) {
18181
+ const text = request.responseType ? request.responseText : request.response;
18182
+ try {
18183
+ response = JSON.parse(text);
18184
+ } catch {
18185
+ response = text;
18186
+ }
18187
+ }
15232
18188
  delete requests[vFile.uploadId];
15233
18189
  cycle.success++;
15234
18190
  cycle.responses = [...cycle.responses, response];
@@ -15262,7 +18218,7 @@ const Upload = defineComponent({
15262
18218
  xhr.onreadystatechange = () => {
15263
18219
  if (xhr.readyState !== 4 || xhr.status === 0) return;
15264
18220
  if (xhr.status >= 200 && xhr.status < 300) {
15265
- onSuccess(!xhr.responseType ? xhr.responseText : xhr.response);
18221
+ onSuccess(xhr);
15266
18222
  } else {
15267
18223
  onError({}, `服务异常`);
15268
18224
  }
@@ -15451,4 +18407,4 @@ const UploadPicker = /* @__PURE__ */ defineComponent({
15451
18407
 
15452
18408
  const MUploadPicker = UploadPicker;
15453
18409
 
15454
- export { ActionSheet, Alert, Artboard, Button, ButtonGroup, Calendar, Card, Carousel, Cascader, Chart, Checkbox, CheckboxGroup, Clipboard, Collapse, CollapseItem, ColorPicker, Countdown, Customer, DatePicker, Debounce, Divider, Drawer, DrawerView, Dropdown, Editor, Expand, Form, FormItem, Fragment, HTMLToImage, Icon, IconManager, Image, ImageCrop, ImagePreview, ImageProcessing, Input, InputNumber, InputSearch, MList as List, MListItem as ListItem, MActionSheet, MAlert, MArtboard, MButton, MButtonGroup, MCalendar, MCard, MCarousel, MCascader, MChart, MCheckbox, MCheckboxGroup, MClipboard, MCollapse, MCollapseItem, MColorPicker, MCountdown, MCustomer, MDatePicker, Debounce as MDebounce, MDivider, MDrawer, MDrawerView, MDropdown, MEditor, MExpand, MForm, MFormItem, MFragment, MHTMLToImage, MIcon, MImage, MImageCrop, MImagePreview, MImageProcessing, MInput, MInputNumber, MInputSearch, MList, MListItem, MMarquee, MMessage, modal as MModal, MModalView, MNotice, MOption, MPagination, MPicker, MPopconfirm, MPopover, MPopup, MPortal, MPrint, MProgress, MRadio, MRadioGroup, MRate, MRecycleList, MResizer, MScroller, MSelect, MSlider, MSortList, MSpin, MSteps, MSwitch, MTable, MTabs, MTabsPane, MTag, MText, MTextarea, MTimePicker, MTimeline, MToast, MToastView, MTouch, MTransition, MTransitionCollapse, MTransitionFade, MTransitionScale, MTransitionSlide, MTransitionZoom, MTree, MUpload, MUploadPicker, Marquee, Message, MessageView, Modal, ModalView, Notice, NoticeView, Option$1 as Option, Pagination, Picker, Popconfirm, Popover, Popup, Portal, PortalView, Print, Progress, Radio, RadioGroup, Rate, RecycleList, Resizer, Scroller, ScrollerWheel, Select, Slider, SortList, Spin, Steps, Switch, Table, Tabs, TabsPane, Tag, Text, Textarea, Theme, ThemeImage, ThemeText, ThemeView, TimePicker, Timeline, Toast, ToastView, Touch, Transition, TransitionCollapse, TransitionFade, TransitionScale, TransitionSlide, TransitionZoom, Tree, Upload, UploadPicker, VcError, VcInstance };
18410
+ export { ActionSheet, Alert, Artboard, Button, ButtonGroup, Calendar, Card, Carousel, Cascader, Chart, Checkbox, CheckboxGroup, Clipboard, Collapse, CollapseItem, ColorPicker, Countdown, Customer, DatePicker, Debounce, Divider, Drawer, DrawerView, Dropdown, Editor, Expand$1 as Expand, Form, FormItem, Fragment, HTMLToImage, Icon, IconManager, Image, ImageCrop, ImagePreview, ImageProcessing, Input, InputNumber, InputSearch, MList as List, MListItem as ListItem, MActionSheet, MAlert, MArtboard, MButton, MButtonGroup, MCalendar, MCard, MCarousel, MCascader, MChart, MCheckbox, MCheckboxGroup, MClipboard, MCollapse, MCollapseItem, MColorPicker, MCountdown, MCustomer, MDatePicker, Debounce as MDebounce, MDivider, MDrawer, MDrawerView, MDropdown, MEditor, MExpand, MForm, MFormItem, MFragment, MHTMLToImage, MIcon, MImage, MImageCrop, MImagePreview, MImageProcessing, MInput, MInputNumber, MInputSearch, MList, MListItem, MMarquee, MMessage, modal as MModal, MModalView, MNotice, MOption, MPagination, MPicker, MPopconfirm, MPopover, MPopup, MPortal, MPrint, MProgress, MRadio, MRadioGroup, MRate, MRecycleList, MResizer, MScroller, MSelect, MSlider, MSortList, MSpin, MSteps, MSwitch, MTable, MTableColumn, MTabs, MTabsPane, MTag, MText, MTextarea, MTimePicker, MTimeline, MToast, MToastView, MTouch, MTransition, MTransitionCollapse, MTransitionFade, MTransitionScale, MTransitionSlide, MTransitionZoom, MTree, MUpload, MUploadPicker, Marquee, Message, MessageView, Modal, ModalView, Notice, NoticeView, Option$1 as Option, Pagination, Picker, Popconfirm, Popover, Popup, Portal, PortalView, Print, Progress, Radio, RadioGroup, Rate, RecycleList, Resizer, Scroller, ScrollerWheel, Select, Slider, SortList, Spin, Steps, Switch, Table, TableColumn, Tabs, TabsPane, Tag, Text, Textarea, Theme, ThemeImage, ThemeText, ThemeView, TimePicker, Timeline, Toast, ToastView, Touch, Transition, TransitionCollapse, TransitionFade, TransitionScale, TransitionSlide, TransitionZoom, Tree, Upload, UploadPicker, VcError, VcInstance };