@deot/vc-components 1.0.10 → 1.0.12
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.
- package/dist/index.cjs +3184 -289
- package/dist/index.d.ts +509 -10
- package/dist/index.iife.js +21201 -352
- package/dist/index.js +3185 -292
- package/dist/index.style.css +1 -1
- package/dist/index.umd.cjs +21201 -352
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -14,6 +14,8 @@ const helperValidator = require('@deot/helper-validator');
|
|
|
14
14
|
const helperCache = require('@deot/helper-cache');
|
|
15
15
|
const Load = require('@deot/helper-load');
|
|
16
16
|
const helperScheduler = require('@deot/helper-scheduler');
|
|
17
|
+
const lodash = require('lodash');
|
|
18
|
+
const helperFp = require('@deot/helper-fp');
|
|
17
19
|
|
|
18
20
|
function _interopNamespaceDefault(e) {
|
|
19
21
|
const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
|
|
@@ -89,9 +91,9 @@ const props$1q = {
|
|
|
89
91
|
|
|
90
92
|
/** @jsxImportSource vue */
|
|
91
93
|
|
|
92
|
-
const COMPONENT_NAME$
|
|
94
|
+
const COMPONENT_NAME$1$ = 'vc-action-sheet';
|
|
93
95
|
const ActionSheet = /* @__PURE__ */ vue.defineComponent({
|
|
94
|
-
name: COMPONENT_NAME$
|
|
96
|
+
name: COMPONENT_NAME$1$,
|
|
95
97
|
props: props$1q,
|
|
96
98
|
setup(props, {
|
|
97
99
|
slots
|
|
@@ -278,9 +280,9 @@ const IconManager = new Manager();
|
|
|
278
280
|
|
|
279
281
|
/** @jsxImportSource vue */
|
|
280
282
|
|
|
281
|
-
const COMPONENT_NAME$
|
|
283
|
+
const COMPONENT_NAME$1_ = 'vc-icon';
|
|
282
284
|
const Icon = /* @__PURE__ */ vue.defineComponent({
|
|
283
|
-
name: COMPONENT_NAME$
|
|
285
|
+
name: COMPONENT_NAME$1_,
|
|
284
286
|
props: props$1o,
|
|
285
287
|
setup(props) {
|
|
286
288
|
const viewBox = vue.ref('0 0 1024 1024');
|
|
@@ -479,9 +481,9 @@ const useTransition = () => {
|
|
|
479
481
|
};
|
|
480
482
|
};
|
|
481
483
|
|
|
482
|
-
const COMPONENT_NAME$
|
|
484
|
+
const COMPONENT_NAME$1Z = "vc-transition";
|
|
483
485
|
const Transition = vue.defineComponent({
|
|
484
|
-
name: COMPONENT_NAME$
|
|
486
|
+
name: COMPONENT_NAME$1Z,
|
|
485
487
|
props: props$1n,
|
|
486
488
|
// 当不声明emits的情况下,事件存在于attrs中
|
|
487
489
|
inheritAttrs: false,
|
|
@@ -502,9 +504,9 @@ const Transition = vue.defineComponent({
|
|
|
502
504
|
}
|
|
503
505
|
});
|
|
504
506
|
|
|
505
|
-
const COMPONENT_NAME$
|
|
507
|
+
const COMPONENT_NAME$1Y = "vc-transition-collapse";
|
|
506
508
|
const TransitionCollapse = vue.defineComponent({
|
|
507
|
-
name: COMPONENT_NAME$
|
|
509
|
+
name: COMPONENT_NAME$1Y,
|
|
508
510
|
props: props$1n,
|
|
509
511
|
// 当不声明emits的情况下,事件存在于attrs中
|
|
510
512
|
inheritAttrs: false,
|
|
@@ -623,9 +625,9 @@ const TransitionCollapse = vue.defineComponent({
|
|
|
623
625
|
}
|
|
624
626
|
});
|
|
625
627
|
|
|
626
|
-
const COMPONENT_NAME$
|
|
628
|
+
const COMPONENT_NAME$1X = "vc-transition-fade";
|
|
627
629
|
const TransitionFade = vue.defineComponent({
|
|
628
|
-
name: COMPONENT_NAME$
|
|
630
|
+
name: COMPONENT_NAME$1X,
|
|
629
631
|
props: {
|
|
630
632
|
...props$1n,
|
|
631
633
|
// inheritAttrs必须是false
|
|
@@ -660,9 +662,9 @@ const TransitionFade = vue.defineComponent({
|
|
|
660
662
|
}
|
|
661
663
|
});
|
|
662
664
|
|
|
663
|
-
const COMPONENT_NAME$
|
|
665
|
+
const COMPONENT_NAME$1W = "vc-transition-scale";
|
|
664
666
|
const TransitionScale = vue.defineComponent({
|
|
665
|
-
name: COMPONENT_NAME$
|
|
667
|
+
name: COMPONENT_NAME$1W,
|
|
666
668
|
props: {
|
|
667
669
|
...props$1n,
|
|
668
670
|
mode: {
|
|
@@ -702,9 +704,9 @@ const TransitionScale = vue.defineComponent({
|
|
|
702
704
|
}
|
|
703
705
|
});
|
|
704
706
|
|
|
705
|
-
const COMPONENT_NAME$
|
|
707
|
+
const COMPONENT_NAME$1V = "vc-transition-slide";
|
|
706
708
|
const TransitionSlide = vue.defineComponent({
|
|
707
|
-
name: COMPONENT_NAME$
|
|
709
|
+
name: COMPONENT_NAME$1V,
|
|
708
710
|
props: {
|
|
709
711
|
...props$1n,
|
|
710
712
|
mode: {
|
|
@@ -744,9 +746,9 @@ const TransitionSlide = vue.defineComponent({
|
|
|
744
746
|
}
|
|
745
747
|
});
|
|
746
748
|
|
|
747
|
-
const COMPONENT_NAME$
|
|
749
|
+
const COMPONENT_NAME$1U = "vc-transition-zoom";
|
|
748
750
|
const TransitionZoom = vue.defineComponent({
|
|
749
|
-
name: COMPONENT_NAME$
|
|
751
|
+
name: COMPONENT_NAME$1U,
|
|
750
752
|
props: {
|
|
751
753
|
...props$1n,
|
|
752
754
|
mode: {
|
|
@@ -788,7 +790,7 @@ const TransitionZoom = vue.defineComponent({
|
|
|
788
790
|
|
|
789
791
|
/** @jsxImportSource vue */
|
|
790
792
|
|
|
791
|
-
const COMPONENT_NAME$
|
|
793
|
+
const COMPONENT_NAME$1T = 'vc-alert';
|
|
792
794
|
|
|
793
795
|
// [color, borderColor, backgroundColor], -> CSS
|
|
794
796
|
const THEME_MAP = {
|
|
@@ -798,7 +800,7 @@ const THEME_MAP = {
|
|
|
798
800
|
warning: ['#ffbf00', '#ffe58f', '#fffbe6']
|
|
799
801
|
};
|
|
800
802
|
const Alert = /* @__PURE__ */ vue.defineComponent({
|
|
801
|
-
name: COMPONENT_NAME$
|
|
803
|
+
name: COMPONENT_NAME$1T,
|
|
802
804
|
props: props$1p,
|
|
803
805
|
setup(props, {
|
|
804
806
|
slots,
|
|
@@ -897,9 +899,9 @@ const props$1m = {
|
|
|
897
899
|
|
|
898
900
|
/** @jsxImportSource vue */
|
|
899
901
|
|
|
900
|
-
const COMPONENT_NAME$
|
|
902
|
+
const COMPONENT_NAME$1S = 'vc-artboard';
|
|
901
903
|
const Artboard = /* @__PURE__ */ vue.defineComponent({
|
|
902
|
-
name: COMPONENT_NAME$
|
|
904
|
+
name: COMPONENT_NAME$1S,
|
|
903
905
|
props: props$1m,
|
|
904
906
|
setup(props, {
|
|
905
907
|
slots
|
|
@@ -938,9 +940,9 @@ const props$1l = {
|
|
|
938
940
|
|
|
939
941
|
/** @jsxImportSource vue */
|
|
940
942
|
|
|
941
|
-
const COMPONENT_NAME$
|
|
943
|
+
const COMPONENT_NAME$1R = 'vc-spin';
|
|
942
944
|
const Spin = /* @__PURE__ */ vue.defineComponent({
|
|
943
|
-
name: COMPONENT_NAME$
|
|
945
|
+
name: COMPONENT_NAME$1R,
|
|
944
946
|
props: props$1l,
|
|
945
947
|
setup(props, {
|
|
946
948
|
slots
|
|
@@ -991,9 +993,9 @@ const props$1k = {
|
|
|
991
993
|
exclude: RegExp
|
|
992
994
|
};
|
|
993
995
|
|
|
994
|
-
const COMPONENT_NAME$
|
|
996
|
+
const COMPONENT_NAME$1Q = "vc-debounce";
|
|
995
997
|
const Debounce = vue.defineComponent({
|
|
996
|
-
name: COMPONENT_NAME$
|
|
998
|
+
name: COMPONENT_NAME$1Q,
|
|
997
999
|
props: props$1k,
|
|
998
1000
|
/**
|
|
999
1001
|
* 不声明emits使得事件被透传放入attrs中, 这样可以让所有的事件透传
|
|
@@ -1065,9 +1067,9 @@ const props$1j = {
|
|
|
1065
1067
|
|
|
1066
1068
|
/** @jsxImportSource vue */
|
|
1067
1069
|
|
|
1068
|
-
const COMPONENT_NAME$
|
|
1070
|
+
const COMPONENT_NAME$1P = 'vc-button';
|
|
1069
1071
|
const Button = /* @__PURE__ */ vue.defineComponent({
|
|
1070
|
-
name: COMPONENT_NAME$
|
|
1072
|
+
name: COMPONENT_NAME$1P,
|
|
1071
1073
|
emits: ['click'],
|
|
1072
1074
|
props: props$1j,
|
|
1073
1075
|
setup(props, {
|
|
@@ -1147,9 +1149,9 @@ const props$1i = {
|
|
|
1147
1149
|
|
|
1148
1150
|
/** @jsxImportSource vue */
|
|
1149
1151
|
|
|
1150
|
-
const COMPONENT_NAME$
|
|
1152
|
+
const COMPONENT_NAME$1O = 'vc-button-group';
|
|
1151
1153
|
const ButtonGroup = /* @__PURE__ */ vue.defineComponent({
|
|
1152
|
-
name: COMPONENT_NAME$
|
|
1154
|
+
name: COMPONENT_NAME$1O,
|
|
1153
1155
|
props: props$1i,
|
|
1154
1156
|
setup(props, {
|
|
1155
1157
|
slots
|
|
@@ -1183,9 +1185,9 @@ const props$1h = {
|
|
|
1183
1185
|
|
|
1184
1186
|
/** @jsxImportSource vue */
|
|
1185
1187
|
|
|
1186
|
-
const COMPONENT_NAME$
|
|
1188
|
+
const COMPONENT_NAME$1N = 'vc-calendar';
|
|
1187
1189
|
const Calendar = /* @__PURE__ */ vue.defineComponent({
|
|
1188
|
-
name: COMPONENT_NAME$
|
|
1190
|
+
name: COMPONENT_NAME$1N,
|
|
1189
1191
|
props: props$1h,
|
|
1190
1192
|
setup(props, {
|
|
1191
1193
|
slots
|
|
@@ -1223,9 +1225,9 @@ const props$1g = {
|
|
|
1223
1225
|
|
|
1224
1226
|
/** @jsxImportSource vue */
|
|
1225
1227
|
|
|
1226
|
-
const COMPONENT_NAME$
|
|
1228
|
+
const COMPONENT_NAME$1M = 'vc-card';
|
|
1227
1229
|
const Card = /* @__PURE__ */ vue.defineComponent({
|
|
1228
|
-
name: COMPONENT_NAME$
|
|
1230
|
+
name: COMPONENT_NAME$1M,
|
|
1229
1231
|
props: props$1g,
|
|
1230
1232
|
setup(props, {
|
|
1231
1233
|
slots
|
|
@@ -1261,9 +1263,9 @@ const props$1f = {
|
|
|
1261
1263
|
|
|
1262
1264
|
/** @jsxImportSource vue */
|
|
1263
1265
|
|
|
1264
|
-
const COMPONENT_NAME$
|
|
1266
|
+
const COMPONENT_NAME$1L = 'vc-carousel';
|
|
1265
1267
|
const Carousel = /* @__PURE__ */ vue.defineComponent({
|
|
1266
|
-
name: COMPONENT_NAME$
|
|
1268
|
+
name: COMPONENT_NAME$1L,
|
|
1267
1269
|
props: props$1f,
|
|
1268
1270
|
setup(props, {
|
|
1269
1271
|
slots
|
|
@@ -1287,9 +1289,9 @@ const props$1e = {
|
|
|
1287
1289
|
|
|
1288
1290
|
/** @jsxImportSource vue */
|
|
1289
1291
|
|
|
1290
|
-
const COMPONENT_NAME$
|
|
1292
|
+
const COMPONENT_NAME$1K = 'vc-cascader';
|
|
1291
1293
|
const Cascader = /* @__PURE__ */ vue.defineComponent({
|
|
1292
|
-
name: COMPONENT_NAME$
|
|
1294
|
+
name: COMPONENT_NAME$1K,
|
|
1293
1295
|
props: props$1e,
|
|
1294
1296
|
setup(props, {
|
|
1295
1297
|
slots
|
|
@@ -1358,9 +1360,9 @@ const props$1d = {
|
|
|
1358
1360
|
|
|
1359
1361
|
/** @jsxImportSource vue */
|
|
1360
1362
|
|
|
1361
|
-
const COMPONENT_NAME$
|
|
1363
|
+
const COMPONENT_NAME$1J = 'vc-chart';
|
|
1362
1364
|
const Chart = /* @__PURE__ */ vue.defineComponent({
|
|
1363
|
-
name: COMPONENT_NAME$
|
|
1365
|
+
name: COMPONENT_NAME$1J,
|
|
1364
1366
|
props: props$1d,
|
|
1365
1367
|
emits: [...EVENTS, 'ready'],
|
|
1366
1368
|
setup(props, {
|
|
@@ -1591,9 +1593,9 @@ const useCheckbox = () => {
|
|
|
1591
1593
|
|
|
1592
1594
|
/** @jsxImportSource vue */
|
|
1593
1595
|
|
|
1594
|
-
const COMPONENT_NAME$
|
|
1596
|
+
const COMPONENT_NAME$1I = 'vc-checkbox';
|
|
1595
1597
|
const Checkbox = /* @__PURE__ */ vue.defineComponent({
|
|
1596
|
-
name: COMPONENT_NAME$
|
|
1598
|
+
name: COMPONENT_NAME$1I,
|
|
1597
1599
|
props: props$1c,
|
|
1598
1600
|
emits: ['update:modelValue', 'change'],
|
|
1599
1601
|
setup(props, {
|
|
@@ -1680,9 +1682,9 @@ const useCheckboxGroup = () => {
|
|
|
1680
1682
|
|
|
1681
1683
|
/** @jsxImportSource vue */
|
|
1682
1684
|
|
|
1683
|
-
const COMPONENT_NAME$
|
|
1685
|
+
const COMPONENT_NAME$1H = 'vc-checkbox-group';
|
|
1684
1686
|
const CheckboxGroup = /* @__PURE__ */ vue.defineComponent({
|
|
1685
|
-
name: COMPONENT_NAME$
|
|
1687
|
+
name: COMPONENT_NAME$1H,
|
|
1686
1688
|
props: props$1b,
|
|
1687
1689
|
emits: ['update:modelValue', 'change'],
|
|
1688
1690
|
setup(props, {
|
|
@@ -1700,9 +1702,9 @@ const CheckboxGroup = /* @__PURE__ */ vue.defineComponent({
|
|
|
1700
1702
|
|
|
1701
1703
|
/** @jsxImportSource vue */
|
|
1702
1704
|
|
|
1703
|
-
const COMPONENT_NAME$
|
|
1705
|
+
const COMPONENT_NAME$1G = 'vcm-checkbox';
|
|
1704
1706
|
const MCheckbox = /* @__PURE__ */ vue.defineComponent({
|
|
1705
|
-
name: COMPONENT_NAME$
|
|
1707
|
+
name: COMPONENT_NAME$1G,
|
|
1706
1708
|
props: props$1c,
|
|
1707
1709
|
emits: ['update:modelValue', 'change'],
|
|
1708
1710
|
setup(props, {
|
|
@@ -1742,9 +1744,9 @@ const MCheckbox = /* @__PURE__ */ vue.defineComponent({
|
|
|
1742
1744
|
|
|
1743
1745
|
/** @jsxImportSource vue */
|
|
1744
1746
|
|
|
1745
|
-
const COMPONENT_NAME$
|
|
1747
|
+
const COMPONENT_NAME$1F = 'vcm-checkbox-group';
|
|
1746
1748
|
const MCheckboxGroup = /* @__PURE__ */ vue.defineComponent({
|
|
1747
|
-
name: COMPONENT_NAME$
|
|
1749
|
+
name: COMPONENT_NAME$1F,
|
|
1748
1750
|
props: props$1b,
|
|
1749
1751
|
emits: ['update:modelValue', 'change'],
|
|
1750
1752
|
setup(props, {
|
|
@@ -1803,9 +1805,9 @@ const props$19 = {
|
|
|
1803
1805
|
}
|
|
1804
1806
|
};
|
|
1805
1807
|
|
|
1806
|
-
const COMPONENT_NAME$
|
|
1808
|
+
const COMPONENT_NAME$1E = "vc-customer";
|
|
1807
1809
|
const Customer = vue.defineComponent({
|
|
1808
|
-
name: COMPONENT_NAME$
|
|
1810
|
+
name: COMPONENT_NAME$1E,
|
|
1809
1811
|
props: props$19,
|
|
1810
1812
|
setup(props, context) {
|
|
1811
1813
|
return () => vue.h(() => {
|
|
@@ -1816,9 +1818,9 @@ const Customer = vue.defineComponent({
|
|
|
1816
1818
|
|
|
1817
1819
|
/** @jsxImportSource vue */
|
|
1818
1820
|
|
|
1819
|
-
const COMPONENT_NAME$
|
|
1821
|
+
const COMPONENT_NAME$1D = 'vc-message';
|
|
1820
1822
|
const MessageView = /* @__PURE__ */ vue.defineComponent({
|
|
1821
|
-
name: COMPONENT_NAME$
|
|
1823
|
+
name: COMPONENT_NAME$1D,
|
|
1822
1824
|
emits: ['before-close', 'close', 'portal-fulfilled'],
|
|
1823
1825
|
props: props$1a,
|
|
1824
1826
|
setup(props, {
|
|
@@ -1965,7 +1967,7 @@ class PortalLeaf {
|
|
|
1965
1967
|
}
|
|
1966
1968
|
}
|
|
1967
1969
|
|
|
1968
|
-
const COMPONENT_NAME$
|
|
1970
|
+
const COMPONENT_NAME$1C = "vc-portal";
|
|
1969
1971
|
class Portal {
|
|
1970
1972
|
/**
|
|
1971
1973
|
* 清理Portals类型组件
|
|
@@ -2017,7 +2019,7 @@ class Portal {
|
|
|
2017
2019
|
this.wrapper = wrapper;
|
|
2018
2020
|
this.globalOptions = {
|
|
2019
2021
|
...options,
|
|
2020
|
-
name: options?.name || wrapper.name || Utils__namespace.getUid(COMPONENT_NAME$
|
|
2022
|
+
name: options?.name || wrapper.name || Utils__namespace.getUid(COMPONENT_NAME$1C)
|
|
2021
2023
|
};
|
|
2022
2024
|
}
|
|
2023
2025
|
popup(propsData, options) {
|
|
@@ -2116,7 +2118,7 @@ class Portal {
|
|
|
2116
2118
|
...rest
|
|
2117
2119
|
} = options;
|
|
2118
2120
|
let useAllNodes = fragment;
|
|
2119
|
-
const name = multiple ? `${name$}__${Utils__namespace.getUid(COMPONENT_NAME$
|
|
2121
|
+
const name = multiple ? `${name$}__${Utils__namespace.getUid(COMPONENT_NAME$1C)}` : name$;
|
|
2120
2122
|
const container = document.createElement(tag);
|
|
2121
2123
|
const root = typeof el === "object" ? el : document.querySelector(el || "body");
|
|
2122
2124
|
!alive && Portal.leafs.get(name)?.destroy();
|
|
@@ -2150,7 +2152,7 @@ class Portal {
|
|
|
2150
2152
|
} else {
|
|
2151
2153
|
const wrapper = this.wrapper;
|
|
2152
2154
|
const app = vue.createApp({
|
|
2153
|
-
name: COMPONENT_NAME$
|
|
2155
|
+
name: COMPONENT_NAME$1C,
|
|
2154
2156
|
parent,
|
|
2155
2157
|
setup() {
|
|
2156
2158
|
if (alive) {
|
|
@@ -2262,13 +2264,13 @@ const props$18 = {
|
|
|
2262
2264
|
}
|
|
2263
2265
|
};
|
|
2264
2266
|
|
|
2265
|
-
const COMPONENT_NAME$
|
|
2267
|
+
const COMPONENT_NAME$1B = 'vc-portal-view';
|
|
2266
2268
|
|
|
2267
2269
|
/**
|
|
2268
2270
|
* 写法不同,但与vue@2.x 保持一致
|
|
2269
2271
|
*/
|
|
2270
2272
|
const PortalView = /* @__PURE__ */ vue.defineComponent({
|
|
2271
|
-
name: COMPONENT_NAME$
|
|
2273
|
+
name: COMPONENT_NAME$1B,
|
|
2272
2274
|
props: props$18,
|
|
2273
2275
|
setup(props, {
|
|
2274
2276
|
slots
|
|
@@ -2439,9 +2441,9 @@ const useClipboard = (done) => {
|
|
|
2439
2441
|
return () => vue.h(props.tag, { onClick: handleClick, class: "vc-clipboard" }, slots?.default?.());
|
|
2440
2442
|
};
|
|
2441
2443
|
|
|
2442
|
-
const COMPONENT_NAME$
|
|
2444
|
+
const COMPONENT_NAME$1A = "vc-clipboard";
|
|
2443
2445
|
const Clipboard$1 = vue.defineComponent({
|
|
2444
|
-
name: COMPONENT_NAME$
|
|
2446
|
+
name: COMPONENT_NAME$1A,
|
|
2445
2447
|
props: props$17,
|
|
2446
2448
|
setup() {
|
|
2447
2449
|
return useClipboard((content) => Message.success({ content }));
|
|
@@ -2481,9 +2483,9 @@ const MTransitionZoom = TransitionZoom;
|
|
|
2481
2483
|
|
|
2482
2484
|
/** @jsxImportSource vue */
|
|
2483
2485
|
|
|
2484
|
-
const COMPONENT_NAME$
|
|
2486
|
+
const COMPONENT_NAME$1z = 'vcm-toast';
|
|
2485
2487
|
const MToastView = /* @__PURE__ */ vue.defineComponent({
|
|
2486
|
-
name: COMPONENT_NAME$
|
|
2488
|
+
name: COMPONENT_NAME$1z,
|
|
2487
2489
|
emits: ['close', 'portal-fulfilled'],
|
|
2488
2490
|
props: props$16,
|
|
2489
2491
|
setup(props, {
|
|
@@ -2585,9 +2587,9 @@ const warning$2 = create$3({ mode: "warning" });
|
|
|
2585
2587
|
const error$2 = create$3({ mode: "error" });
|
|
2586
2588
|
const MToast = Object.assign(MToastView, { destroy: destroy$4, info: info$2, success: success$2, loading, warning: warning$2, error: error$2 });
|
|
2587
2589
|
|
|
2588
|
-
const COMPONENT_NAME$
|
|
2590
|
+
const COMPONENT_NAME$1y = "vcm-clipboard";
|
|
2589
2591
|
const MClipboard$1 = vue.defineComponent({
|
|
2590
|
-
name: COMPONENT_NAME$
|
|
2592
|
+
name: COMPONENT_NAME$1y,
|
|
2591
2593
|
props: props$17,
|
|
2592
2594
|
setup() {
|
|
2593
2595
|
return useClipboard((content) => MToast.info({ content }));
|
|
@@ -2619,9 +2621,9 @@ const props$15 = {
|
|
|
2619
2621
|
}
|
|
2620
2622
|
};
|
|
2621
2623
|
|
|
2622
|
-
const COMPONENT_NAME$
|
|
2624
|
+
const COMPONENT_NAME$1x = "vc-collapse";
|
|
2623
2625
|
const Collapse = vue.defineComponent({
|
|
2624
|
-
name: COMPONENT_NAME$
|
|
2626
|
+
name: COMPONENT_NAME$1x,
|
|
2625
2627
|
props: props$15,
|
|
2626
2628
|
emits: ["update:moodelValue", "change"],
|
|
2627
2629
|
setup(props, { slots, emit }) {
|
|
@@ -2738,9 +2740,9 @@ const props$13 = {
|
|
|
2738
2740
|
function _isSlot$3(s) {
|
|
2739
2741
|
return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
|
|
2740
2742
|
}
|
|
2741
|
-
const COMPONENT_NAME$
|
|
2742
|
-
const Expand = /* @__PURE__ */ vue.defineComponent({
|
|
2743
|
-
name: COMPONENT_NAME$
|
|
2743
|
+
const COMPONENT_NAME$1w = 'vc-expand';
|
|
2744
|
+
const Expand$1 = /* @__PURE__ */ vue.defineComponent({
|
|
2745
|
+
name: COMPONENT_NAME$1w,
|
|
2744
2746
|
props: props$13,
|
|
2745
2747
|
setup(props, {
|
|
2746
2748
|
slots
|
|
@@ -2770,9 +2772,9 @@ const Expand = /* @__PURE__ */ vue.defineComponent({
|
|
|
2770
2772
|
|
|
2771
2773
|
/** @jsxImportSource vue */
|
|
2772
2774
|
|
|
2773
|
-
const COMPONENT_NAME$
|
|
2775
|
+
const COMPONENT_NAME$1v = 'vc-collapse-item';
|
|
2774
2776
|
const CollapseItem = /* @__PURE__ */ vue.defineComponent({
|
|
2775
|
-
name: COMPONENT_NAME$
|
|
2777
|
+
name: COMPONENT_NAME$1v,
|
|
2776
2778
|
props: props$14,
|
|
2777
2779
|
setup(props, {
|
|
2778
2780
|
slots,
|
|
@@ -2819,7 +2821,7 @@ const CollapseItem = /* @__PURE__ */ vue.defineComponent({
|
|
|
2819
2821
|
"onClick": handleToggle
|
|
2820
2822
|
}, [slots.default?.(), slots.icon?.({
|
|
2821
2823
|
visible: isActive.value
|
|
2822
|
-
})]), vue.createVNode(Expand, {
|
|
2824
|
+
})]), vue.createVNode(Expand$1, {
|
|
2823
2825
|
"modelValue": isActive.value,
|
|
2824
2826
|
"alive": alive.value,
|
|
2825
2827
|
"onChange": v => isActive.value = v
|
|
@@ -2847,9 +2849,9 @@ const props$12 = {
|
|
|
2847
2849
|
|
|
2848
2850
|
/** @jsxImportSource vue */
|
|
2849
2851
|
|
|
2850
|
-
const COMPONENT_NAME$
|
|
2852
|
+
const COMPONENT_NAME$1u = 'vc-color-picker';
|
|
2851
2853
|
const ColorPicker = /* @__PURE__ */ vue.defineComponent({
|
|
2852
|
-
name: COMPONENT_NAME$
|
|
2854
|
+
name: COMPONENT_NAME$1u,
|
|
2853
2855
|
props: props$12,
|
|
2854
2856
|
setup(props, {
|
|
2855
2857
|
slots
|
|
@@ -2873,9 +2875,9 @@ const props$11 = {
|
|
|
2873
2875
|
|
|
2874
2876
|
/** @jsxImportSource vue */
|
|
2875
2877
|
|
|
2876
|
-
const COMPONENT_NAME$
|
|
2878
|
+
const COMPONENT_NAME$1t = 'vc-countdown';
|
|
2877
2879
|
const Countdown = /* @__PURE__ */ vue.defineComponent({
|
|
2878
|
-
name: COMPONENT_NAME$
|
|
2880
|
+
name: COMPONENT_NAME$1t,
|
|
2879
2881
|
props: props$11,
|
|
2880
2882
|
setup(props, {
|
|
2881
2883
|
slots
|
|
@@ -3324,9 +3326,9 @@ const useNativeEmitter = (input, expose) => {
|
|
|
3324
3326
|
|
|
3325
3327
|
/** @jsxImportSource vue */
|
|
3326
3328
|
|
|
3327
|
-
const COMPONENT_NAME$
|
|
3329
|
+
const COMPONENT_NAME$1s = 'vc-input';
|
|
3328
3330
|
const Input = /* @__PURE__ */ vue.defineComponent({
|
|
3329
|
-
name: COMPONENT_NAME$
|
|
3331
|
+
name: COMPONENT_NAME$1s,
|
|
3330
3332
|
inheritAttrs: false,
|
|
3331
3333
|
props: {
|
|
3332
3334
|
...props$$,
|
|
@@ -3660,9 +3662,9 @@ const useInputNumber = () => {
|
|
|
3660
3662
|
|
|
3661
3663
|
/** @jsxImportSource vue */
|
|
3662
3664
|
|
|
3663
|
-
const COMPONENT_NAME$
|
|
3665
|
+
const COMPONENT_NAME$1r = 'vc-input-number';
|
|
3664
3666
|
const InputNumber = /* @__PURE__ */ vue.defineComponent({
|
|
3665
|
-
name: COMPONENT_NAME$
|
|
3667
|
+
name: COMPONENT_NAME$1r,
|
|
3666
3668
|
props: props$X,
|
|
3667
3669
|
inheritAttrs: false,
|
|
3668
3670
|
setup(props, {
|
|
@@ -3726,9 +3728,9 @@ const props$W = {
|
|
|
3726
3728
|
|
|
3727
3729
|
/** @jsxImportSource vue */
|
|
3728
3730
|
|
|
3729
|
-
const COMPONENT_NAME$
|
|
3731
|
+
const COMPONENT_NAME$1q = 'vc-input-search';
|
|
3730
3732
|
const InputSearch = /* @__PURE__ */ vue.defineComponent({
|
|
3731
|
-
name: COMPONENT_NAME$
|
|
3733
|
+
name: COMPONENT_NAME$1q,
|
|
3732
3734
|
props: props$W,
|
|
3733
3735
|
inheritAttrs: false,
|
|
3734
3736
|
setup(props, {
|
|
@@ -4019,9 +4021,9 @@ const usePos = () => {
|
|
|
4019
4021
|
function _isSlot$2(s) {
|
|
4020
4022
|
return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
|
|
4021
4023
|
}
|
|
4022
|
-
const COMPONENT_NAME$
|
|
4024
|
+
const COMPONENT_NAME$1p = 'vc-popover-wrapper';
|
|
4023
4025
|
const PopoverWrapper = /* @__PURE__ */ vue.defineComponent({
|
|
4024
|
-
name: COMPONENT_NAME$
|
|
4026
|
+
name: COMPONENT_NAME$1p,
|
|
4025
4027
|
props: props$_,
|
|
4026
4028
|
emits: ['portal-fulfilled', 'close'],
|
|
4027
4029
|
setup(props, {
|
|
@@ -4273,9 +4275,9 @@ const PopoverPortal = new Portal(PopoverWrapper);
|
|
|
4273
4275
|
|
|
4274
4276
|
/** @jsxImportSource vue */
|
|
4275
4277
|
|
|
4276
|
-
const COMPONENT_NAME$
|
|
4278
|
+
const COMPONENT_NAME$1o = 'vc-popover';
|
|
4277
4279
|
const Popover$1 = /* @__PURE__ */ vue.defineComponent({
|
|
4278
|
-
name: COMPONENT_NAME$
|
|
4280
|
+
name: COMPONENT_NAME$1o,
|
|
4279
4281
|
props: props$Z,
|
|
4280
4282
|
emits: ['update:modelValue', 'visible-change', 'ready', 'close'],
|
|
4281
4283
|
setup(props, {
|
|
@@ -5150,9 +5152,8 @@ const useBase = () => {
|
|
|
5150
5152
|
|
|
5151
5153
|
/** @jsxImportSource vue */
|
|
5152
5154
|
|
|
5153
|
-
const
|
|
5154
|
-
|
|
5155
|
-
name: COMPONENT_NAME$1l,
|
|
5155
|
+
const createPicker = (name, pickerProps, usePicker) => /* @__PURE__ */ vue.defineComponent({
|
|
5156
|
+
name,
|
|
5156
5157
|
props: Object.assign(props$Y, pickerProps),
|
|
5157
5158
|
inheritAttrs: false,
|
|
5158
5159
|
emits: ['update:modelValue', 'change', 'clear', 'error', 'close', 'input', 'ready', 'visible-change', 'ok'],
|
|
@@ -5377,9 +5378,9 @@ const getTimeType = type => {
|
|
|
5377
5378
|
}
|
|
5378
5379
|
return view;
|
|
5379
5380
|
};
|
|
5380
|
-
const COMPONENT_NAME$
|
|
5381
|
+
const COMPONENT_NAME$1n = 'vc-date-confirm';
|
|
5381
5382
|
const Confirm = /* @__PURE__ */ vue.defineComponent({
|
|
5382
|
-
name: COMPONENT_NAME$
|
|
5383
|
+
name: COMPONENT_NAME$1n,
|
|
5383
5384
|
props: {
|
|
5384
5385
|
showTime: {
|
|
5385
5386
|
type: Boolean,
|
|
@@ -5443,9 +5444,9 @@ const Confirm = /* @__PURE__ */ vue.defineComponent({
|
|
|
5443
5444
|
|
|
5444
5445
|
/** @jsxImportSource vue */
|
|
5445
5446
|
|
|
5446
|
-
const COMPONENT_NAME$
|
|
5447
|
+
const COMPONENT_NAME$1m = 'vc-date-header';
|
|
5447
5448
|
const DateHeader = /* @__PURE__ */ vue.defineComponent({
|
|
5448
|
-
name: COMPONENT_NAME$
|
|
5449
|
+
name: COMPONENT_NAME$1m,
|
|
5449
5450
|
props: {
|
|
5450
5451
|
panelDate: Date,
|
|
5451
5452
|
showNext: {
|
|
@@ -5529,9 +5530,9 @@ const DateHeader = /* @__PURE__ */ vue.defineComponent({
|
|
|
5529
5530
|
|
|
5530
5531
|
/** @jsxImportSource vue */
|
|
5531
5532
|
|
|
5532
|
-
const COMPONENT_NAME$
|
|
5533
|
+
const COMPONENT_NAME$1l = 'vc-date-table';
|
|
5533
5534
|
const DateTable = /* @__PURE__ */ vue.defineComponent({
|
|
5534
|
-
name: COMPONENT_NAME$
|
|
5535
|
+
name: COMPONENT_NAME$1l,
|
|
5535
5536
|
props: {
|
|
5536
5537
|
value: Array,
|
|
5537
5538
|
firstDayOfWeek: {
|
|
@@ -5740,9 +5741,9 @@ const DateTable = /* @__PURE__ */ vue.defineComponent({
|
|
|
5740
5741
|
|
|
5741
5742
|
/** @jsxImportSource vue */
|
|
5742
5743
|
|
|
5743
|
-
const COMPONENT_NAME$
|
|
5744
|
+
const COMPONENT_NAME$1k = 'vc-month-table';
|
|
5744
5745
|
const MonthTable = /* @__PURE__ */ vue.defineComponent({
|
|
5745
|
-
name: COMPONENT_NAME$
|
|
5746
|
+
name: COMPONENT_NAME$1k,
|
|
5746
5747
|
props: {
|
|
5747
5748
|
value: Array,
|
|
5748
5749
|
panelDate: Date,
|
|
@@ -5874,7 +5875,7 @@ const MonthTable = /* @__PURE__ */ vue.defineComponent({
|
|
|
5874
5875
|
|
|
5875
5876
|
/** @jsxImportSource vue */
|
|
5876
5877
|
|
|
5877
|
-
const COMPONENT_NAME$
|
|
5878
|
+
const COMPONENT_NAME$1j = 'vc-quarter-table';
|
|
5878
5879
|
|
|
5879
5880
|
/**
|
|
5880
5881
|
* 获取季度对应的月份范围
|
|
@@ -5908,7 +5909,7 @@ const getQuarterRangeByMonth = value => {
|
|
|
5908
5909
|
}
|
|
5909
5910
|
};
|
|
5910
5911
|
const QuarterTable = /* @__PURE__ */ vue.defineComponent({
|
|
5911
|
-
name: COMPONENT_NAME$
|
|
5912
|
+
name: COMPONENT_NAME$1j,
|
|
5912
5913
|
props: {
|
|
5913
5914
|
value: Array,
|
|
5914
5915
|
panelDate: Date,
|
|
@@ -6031,9 +6032,9 @@ const QuarterTable = /* @__PURE__ */ vue.defineComponent({
|
|
|
6031
6032
|
|
|
6032
6033
|
/** @jsxImportSource vue */
|
|
6033
6034
|
|
|
6034
|
-
const COMPONENT_NAME$
|
|
6035
|
+
const COMPONENT_NAME$1i = 'vc-shortcuts-select';
|
|
6035
6036
|
const ShortcutsSelect = /* @__PURE__ */ vue.defineComponent({
|
|
6036
|
-
name: COMPONENT_NAME$
|
|
6037
|
+
name: COMPONENT_NAME$1i,
|
|
6037
6038
|
props: {
|
|
6038
6039
|
panelDate: Date,
|
|
6039
6040
|
config: Array,
|
|
@@ -6073,9 +6074,9 @@ const ShortcutsSelect = /* @__PURE__ */ vue.defineComponent({
|
|
|
6073
6074
|
|
|
6074
6075
|
/** @jsxImportSource vue */
|
|
6075
6076
|
|
|
6076
|
-
const COMPONENT_NAME$
|
|
6077
|
+
const COMPONENT_NAME$1h = 'vc-time-select';
|
|
6077
6078
|
const TimeSelect = /* @__PURE__ */ vue.defineComponent({
|
|
6078
|
-
name: COMPONENT_NAME$
|
|
6079
|
+
name: COMPONENT_NAME$1h,
|
|
6079
6080
|
props: {
|
|
6080
6081
|
hours: {
|
|
6081
6082
|
type: [Number, String],
|
|
@@ -6354,9 +6355,9 @@ const TimeSelect = /* @__PURE__ */ vue.defineComponent({
|
|
|
6354
6355
|
|
|
6355
6356
|
/** @jsxImportSource vue */
|
|
6356
6357
|
|
|
6357
|
-
const COMPONENT_NAME$
|
|
6358
|
+
const COMPONENT_NAME$1g = 'vc-year-table';
|
|
6358
6359
|
const YearTable = /* @__PURE__ */ vue.defineComponent({
|
|
6359
|
-
name: COMPONENT_NAME$
|
|
6360
|
+
name: COMPONENT_NAME$1g,
|
|
6360
6361
|
props: {
|
|
6361
6362
|
value: Array,
|
|
6362
6363
|
panelDate: Date,
|
|
@@ -6479,9 +6480,9 @@ const getDateIsInRange = (value, type, leftPanelDate, rightPanelDate) => {
|
|
|
6479
6480
|
}
|
|
6480
6481
|
return true;
|
|
6481
6482
|
};
|
|
6482
|
-
const COMPONENT_NAME$
|
|
6483
|
+
const COMPONENT_NAME$1f = 'vc-date-range-panel';
|
|
6483
6484
|
const DateRangePanel = /* @__PURE__ */ vue.defineComponent({
|
|
6484
|
-
name: COMPONENT_NAME$
|
|
6485
|
+
name: COMPONENT_NAME$1f,
|
|
6485
6486
|
props: {
|
|
6486
6487
|
...props$V,
|
|
6487
6488
|
confirm: {
|
|
@@ -6860,9 +6861,9 @@ const DateRangePanel = /* @__PURE__ */ vue.defineComponent({
|
|
|
6860
6861
|
|
|
6861
6862
|
/** @jsxImportSource vue */
|
|
6862
6863
|
|
|
6863
|
-
const COMPONENT_NAME$
|
|
6864
|
+
const COMPONENT_NAME$1e = 'vc-date-panel';
|
|
6864
6865
|
const DatePanel = /* @__PURE__ */ vue.defineComponent({
|
|
6865
|
-
name: COMPONENT_NAME$
|
|
6866
|
+
name: COMPONENT_NAME$1e,
|
|
6866
6867
|
props: {
|
|
6867
6868
|
...props$V,
|
|
6868
6869
|
type: String,
|
|
@@ -7070,9 +7071,9 @@ const isEqualYear$1 = value => {
|
|
|
7070
7071
|
const endYear = value[1].getFullYear();
|
|
7071
7072
|
return startYear === endYear;
|
|
7072
7073
|
};
|
|
7073
|
-
const COMPONENT_NAME$
|
|
7074
|
+
const COMPONENT_NAME$1d = 'vc-monthrange-panel';
|
|
7074
7075
|
const MonthRangePanel = /* @__PURE__ */ vue.defineComponent({
|
|
7075
|
-
name: COMPONENT_NAME$
|
|
7076
|
+
name: COMPONENT_NAME$1d,
|
|
7076
7077
|
props: {
|
|
7077
7078
|
...props$V,
|
|
7078
7079
|
confirm: {
|
|
@@ -7247,9 +7248,9 @@ const isEqualYear = value => {
|
|
|
7247
7248
|
const endYear = value[1].getFullYear();
|
|
7248
7249
|
return startYear === endYear;
|
|
7249
7250
|
};
|
|
7250
|
-
const COMPONENT_NAME$
|
|
7251
|
+
const COMPONENT_NAME$1c = 'vc-quarterrange-panel';
|
|
7251
7252
|
const QuarterRangePanel = /* @__PURE__ */ vue.defineComponent({
|
|
7252
|
-
name: COMPONENT_NAME$
|
|
7253
|
+
name: COMPONENT_NAME$1c,
|
|
7253
7254
|
props: {
|
|
7254
7255
|
...props$V,
|
|
7255
7256
|
confirm: {
|
|
@@ -7488,9 +7489,9 @@ const getComparedDate = (leftDate, rightDate) => {
|
|
|
7488
7489
|
seconds
|
|
7489
7490
|
};
|
|
7490
7491
|
};
|
|
7491
|
-
const COMPONENT_NAME$
|
|
7492
|
+
const COMPONENT_NAME$1b = 'vc-timerange-panel';
|
|
7492
7493
|
const TimeRangePanel = /* @__PURE__ */ vue.defineComponent({
|
|
7493
|
-
name: COMPONENT_NAME$
|
|
7494
|
+
name: COMPONENT_NAME$1b,
|
|
7494
7495
|
props: props$U,
|
|
7495
7496
|
emits: ['pick', 'clear', 'ok'],
|
|
7496
7497
|
setup(props, {
|
|
@@ -7589,9 +7590,9 @@ const TimeRangePanel = /* @__PURE__ */ vue.defineComponent({
|
|
|
7589
7590
|
|
|
7590
7591
|
/** @jsxImportSource vue */
|
|
7591
7592
|
|
|
7592
|
-
const COMPONENT_NAME$
|
|
7593
|
+
const COMPONENT_NAME$1a = 'vc-time-panel';
|
|
7593
7594
|
const TimePanel = /* @__PURE__ */ vue.defineComponent({
|
|
7594
|
-
name: COMPONENT_NAME$
|
|
7595
|
+
name: COMPONENT_NAME$1a,
|
|
7595
7596
|
props: props$U,
|
|
7596
7597
|
emits: ['pick', 'clear', 'ok'],
|
|
7597
7598
|
setup(props, {
|
|
@@ -7646,6 +7647,7 @@ const TimePanel = /* @__PURE__ */ vue.defineComponent({
|
|
|
7646
7647
|
|
|
7647
7648
|
/** @jsxImportSource vue */
|
|
7648
7649
|
|
|
7650
|
+
const COMPONENT_NAME$19 = 'vc-date-picker';
|
|
7649
7651
|
const getPanel$1 = type => {
|
|
7650
7652
|
if (['daterange', 'datetimerange'].includes(type)) {
|
|
7651
7653
|
return DateRangePanel;
|
|
@@ -7656,7 +7658,7 @@ const getPanel$1 = type => {
|
|
|
7656
7658
|
}
|
|
7657
7659
|
return DatePanel;
|
|
7658
7660
|
};
|
|
7659
|
-
const DatePicker = createPicker(props$10, () => {
|
|
7661
|
+
const DatePicker = createPicker(COMPONENT_NAME$19, props$10, () => {
|
|
7660
7662
|
const props = vue.getCurrentInstance().props;
|
|
7661
7663
|
const icon = vue.ref('date');
|
|
7662
7664
|
const panel = vue.shallowRef({});
|
|
@@ -7689,9 +7691,9 @@ const props$T = {
|
|
|
7689
7691
|
|
|
7690
7692
|
/** @jsxImportSource vue */
|
|
7691
7693
|
|
|
7692
|
-
const COMPONENT_NAME$
|
|
7694
|
+
const COMPONENT_NAME$18 = 'vc-divider';
|
|
7693
7695
|
const Divider = /* @__PURE__ */ vue.defineComponent({
|
|
7694
|
-
name: COMPONENT_NAME$
|
|
7696
|
+
name: COMPONENT_NAME$18,
|
|
7695
7697
|
props: props$T,
|
|
7696
7698
|
setup(props, {
|
|
7697
7699
|
slots
|
|
@@ -7846,7 +7848,7 @@ const props$Q = {
|
|
|
7846
7848
|
|
|
7847
7849
|
/** @jsxImportSource vue */
|
|
7848
7850
|
|
|
7849
|
-
const COMPONENT_NAME$
|
|
7851
|
+
const COMPONENT_NAME$17 = 'vc-scroller-track';
|
|
7850
7852
|
const BAR_MAP = {
|
|
7851
7853
|
vertical: {
|
|
7852
7854
|
scroll: 'scrollTop',
|
|
@@ -7866,12 +7868,14 @@ const BAR_MAP = {
|
|
|
7866
7868
|
}
|
|
7867
7869
|
};
|
|
7868
7870
|
const Track = /* @__PURE__ */ vue.defineComponent({
|
|
7869
|
-
name: COMPONENT_NAME$
|
|
7871
|
+
name: COMPONENT_NAME$17,
|
|
7870
7872
|
props: props$S,
|
|
7871
7873
|
emits: ['change'],
|
|
7874
|
+
inheritAttrs: false,
|
|
7872
7875
|
setup(props, {
|
|
7873
7876
|
emit,
|
|
7874
|
-
expose
|
|
7877
|
+
expose,
|
|
7878
|
+
attrs
|
|
7875
7879
|
}) {
|
|
7876
7880
|
const instance = vue.getCurrentInstance();
|
|
7877
7881
|
const track = vue.ref();
|
|
@@ -8004,6 +8008,7 @@ const Track = /* @__PURE__ */ vue.defineComponent({
|
|
|
8004
8008
|
isVisible.value = cursorDown.value;
|
|
8005
8009
|
};
|
|
8006
8010
|
const refreshThumb = () => Utils.raf(() => {
|
|
8011
|
+
if (!thumb.value) return;
|
|
8007
8012
|
thumb.value.style[$__namespace.prefixStyle('transform').camel] = `translate${barOptions.value.axis}(${thumbMove.value}px)`;
|
|
8008
8013
|
});
|
|
8009
8014
|
const refreshThrottleThumb = lodashEs.throttle(refreshThumb, 10);
|
|
@@ -8038,6 +8043,7 @@ const Track = /* @__PURE__ */ vue.defineComponent({
|
|
|
8038
8043
|
default: () => [vue.withDirectives(vue.createVNode("div", {
|
|
8039
8044
|
"ref": track,
|
|
8040
8045
|
"class": ['is-' + barOptions.value.key, 'vc-scroller-track'],
|
|
8046
|
+
"style": attrs.style,
|
|
8041
8047
|
"onMousedown": handleClickTrack
|
|
8042
8048
|
}, [vue.createVNode("div", {
|
|
8043
8049
|
"ref": thumb,
|
|
@@ -8052,9 +8058,9 @@ const Track = /* @__PURE__ */ vue.defineComponent({
|
|
|
8052
8058
|
|
|
8053
8059
|
/** @jsxImportSource vue */
|
|
8054
8060
|
|
|
8055
|
-
const COMPONENT_NAME$
|
|
8061
|
+
const COMPONENT_NAME$16 = 'vc-scroller-bar';
|
|
8056
8062
|
const Bar = /* @__PURE__ */ vue.defineComponent({
|
|
8057
|
-
name: COMPONENT_NAME$
|
|
8063
|
+
name: COMPONENT_NAME$16,
|
|
8058
8064
|
props: props$R,
|
|
8059
8065
|
emits: ['change'],
|
|
8060
8066
|
setup(props, {
|
|
@@ -8269,7 +8275,7 @@ const useScroller = (expose) => {
|
|
|
8269
8275
|
|
|
8270
8276
|
/** @jsxImportSource vue */
|
|
8271
8277
|
|
|
8272
|
-
const COMPONENT_NAME$
|
|
8278
|
+
const COMPONENT_NAME$15 = 'vc-scroller';
|
|
8273
8279
|
|
|
8274
8280
|
/**
|
|
8275
8281
|
* 作为备选方案,目前推荐使用ScrollerWheel
|
|
@@ -8280,7 +8286,7 @@ const COMPONENT_NAME$13 = 'vc-scroller';
|
|
|
8280
8286
|
* 2. 增加了一层嵌套
|
|
8281
8287
|
*/
|
|
8282
8288
|
const Scroller = /* @__PURE__ */ vue.defineComponent({
|
|
8283
|
-
name: COMPONENT_NAME$
|
|
8289
|
+
name: COMPONENT_NAME$15,
|
|
8284
8290
|
props: props$Q,
|
|
8285
8291
|
emits: ['scroll'],
|
|
8286
8292
|
setup(props, {
|
|
@@ -8341,7 +8347,7 @@ const Scroller = /* @__PURE__ */ vue.defineComponent({
|
|
|
8341
8347
|
|
|
8342
8348
|
/** @jsxImportSource vue */
|
|
8343
8349
|
|
|
8344
|
-
const COMPONENT_NAME$
|
|
8350
|
+
const COMPONENT_NAME$14 = 'vc-scroller-wheel';
|
|
8345
8351
|
|
|
8346
8352
|
/**
|
|
8347
8353
|
* 为减少一层嵌套,为去除滚动bar的抖动,使用wheel模拟
|
|
@@ -8363,8 +8369,13 @@ const COMPONENT_NAME$12 = 'vc-scroller-wheel';
|
|
|
8363
8369
|
* 设置scrollTop不会reflow和repaint,不需要考虑transfrom来改变content(transform也只在draw完成)
|
|
8364
8370
|
*/
|
|
8365
8371
|
const ScrollerWheel = /* @__PURE__ */ vue.defineComponent({
|
|
8366
|
-
name: COMPONENT_NAME$
|
|
8367
|
-
props: props$Q,
|
|
8372
|
+
name: COMPONENT_NAME$14,
|
|
8373
|
+
props: Object.assign(props$Q, {
|
|
8374
|
+
stopPropagation: {
|
|
8375
|
+
type: Boolean,
|
|
8376
|
+
default: true
|
|
8377
|
+
}
|
|
8378
|
+
}),
|
|
8368
8379
|
emits: ['scroll'],
|
|
8369
8380
|
setup(props, {
|
|
8370
8381
|
slots,
|
|
@@ -8424,7 +8435,10 @@ const ScrollerWheel = /* @__PURE__ */ vue.defineComponent({
|
|
|
8424
8435
|
vue.onMounted(() => {
|
|
8425
8436
|
wheel = new helperWheel.Wheel(wrapper.value, {
|
|
8426
8437
|
shouldWheelX,
|
|
8427
|
-
shouldWheelY
|
|
8438
|
+
shouldWheelY,
|
|
8439
|
+
stopPropagation: () => {
|
|
8440
|
+
return props.stopPropagation;
|
|
8441
|
+
}
|
|
8428
8442
|
});
|
|
8429
8443
|
wheel.on(handleWheel);
|
|
8430
8444
|
});
|
|
@@ -8534,9 +8548,9 @@ const props$P = {
|
|
|
8534
8548
|
|
|
8535
8549
|
/** @jsxImportSource vue */
|
|
8536
8550
|
|
|
8537
|
-
const COMPONENT_NAME$
|
|
8551
|
+
const COMPONENT_NAME$13 = 'vc-drawer';
|
|
8538
8552
|
const DrawerView = /* @__PURE__ */ vue.defineComponent({
|
|
8539
|
-
name: COMPONENT_NAME$
|
|
8553
|
+
name: COMPONENT_NAME$13,
|
|
8540
8554
|
props: props$P,
|
|
8541
8555
|
emits: ['close', 'update:modelValue', 'visible-change'],
|
|
8542
8556
|
setup(props, {
|
|
@@ -8709,9 +8723,9 @@ const props$O = {
|
|
|
8709
8723
|
|
|
8710
8724
|
/** @jsxImportSource vue */
|
|
8711
8725
|
|
|
8712
|
-
const COMPONENT_NAME$
|
|
8726
|
+
const COMPONENT_NAME$12 = 'vc-dropdown';
|
|
8713
8727
|
const Dropdown = /* @__PURE__ */ vue.defineComponent({
|
|
8714
|
-
name: COMPONENT_NAME$
|
|
8728
|
+
name: COMPONENT_NAME$12,
|
|
8715
8729
|
props: props$O,
|
|
8716
8730
|
setup(props, {
|
|
8717
8731
|
slots
|
|
@@ -8735,9 +8749,9 @@ const props$N = {
|
|
|
8735
8749
|
|
|
8736
8750
|
/** @jsxImportSource vue */
|
|
8737
8751
|
|
|
8738
|
-
const COMPONENT_NAME
|
|
8752
|
+
const COMPONENT_NAME$11 = 'vc-editor';
|
|
8739
8753
|
const Editor = /* @__PURE__ */ vue.defineComponent({
|
|
8740
|
-
name: COMPONENT_NAME
|
|
8754
|
+
name: COMPONENT_NAME$11,
|
|
8741
8755
|
props: props$N,
|
|
8742
8756
|
setup(props, {
|
|
8743
8757
|
slots
|
|
@@ -8752,7 +8766,7 @@ const Editor = /* @__PURE__ */ vue.defineComponent({
|
|
|
8752
8766
|
|
|
8753
8767
|
const MEditor = Editor;
|
|
8754
8768
|
|
|
8755
|
-
const MExpand = Expand;
|
|
8769
|
+
const MExpand = Expand$1;
|
|
8756
8770
|
|
|
8757
8771
|
const props$M = {
|
|
8758
8772
|
tag: {
|
|
@@ -8881,9 +8895,9 @@ const useForm = (expose, options = {}) => {
|
|
|
8881
8895
|
});
|
|
8882
8896
|
};
|
|
8883
8897
|
|
|
8884
|
-
const COMPONENT_NAME$
|
|
8898
|
+
const COMPONENT_NAME$10 = "vc-form";
|
|
8885
8899
|
const Form = vue.defineComponent({
|
|
8886
|
-
name: COMPONENT_NAME$
|
|
8900
|
+
name: COMPONENT_NAME$10,
|
|
8887
8901
|
props: props$M,
|
|
8888
8902
|
setup(props, { slots, expose }) {
|
|
8889
8903
|
useForm(expose);
|
|
@@ -9203,9 +9217,9 @@ const useFormItem = (expose) => {
|
|
|
9203
9217
|
|
|
9204
9218
|
/** @jsxImportSource vue */
|
|
9205
9219
|
|
|
9206
|
-
const COMPONENT_NAME
|
|
9220
|
+
const COMPONENT_NAME$$ = 'vc-form-item';
|
|
9207
9221
|
const FormItem = /* @__PURE__ */ vue.defineComponent({
|
|
9208
|
-
name: COMPONENT_NAME
|
|
9222
|
+
name: COMPONENT_NAME$$,
|
|
9209
9223
|
props: props$L,
|
|
9210
9224
|
setup(props, {
|
|
9211
9225
|
slots,
|
|
@@ -9270,9 +9284,9 @@ const props$K = {
|
|
|
9270
9284
|
}
|
|
9271
9285
|
};
|
|
9272
9286
|
|
|
9273
|
-
const COMPONENT_NAME$
|
|
9287
|
+
const COMPONENT_NAME$_ = "vcm-form";
|
|
9274
9288
|
const MForm = vue.defineComponent({
|
|
9275
|
-
name: COMPONENT_NAME$
|
|
9289
|
+
name: COMPONENT_NAME$_,
|
|
9276
9290
|
props: props$K,
|
|
9277
9291
|
setup(props, { slots, expose }) {
|
|
9278
9292
|
useForm(expose, {
|
|
@@ -9303,9 +9317,9 @@ const props$J = {
|
|
|
9303
9317
|
|
|
9304
9318
|
/** @jsxImportSource vue */
|
|
9305
9319
|
|
|
9306
|
-
const COMPONENT_NAME$
|
|
9320
|
+
const COMPONENT_NAME$Z = 'vcm-form-item';
|
|
9307
9321
|
const MFormItem = /* @__PURE__ */ vue.defineComponent({
|
|
9308
|
-
name: COMPONENT_NAME$
|
|
9322
|
+
name: COMPONENT_NAME$Z,
|
|
9309
9323
|
props: props$J,
|
|
9310
9324
|
setup(props, {
|
|
9311
9325
|
slots,
|
|
@@ -9359,9 +9373,9 @@ const MFormItem = /* @__PURE__ */ vue.defineComponent({
|
|
|
9359
9373
|
}
|
|
9360
9374
|
});
|
|
9361
9375
|
|
|
9362
|
-
const COMPONENT_NAME$
|
|
9376
|
+
const COMPONENT_NAME$Y = "vc-fragment";
|
|
9363
9377
|
const Fragment = vue.defineComponent({
|
|
9364
|
-
name: COMPONENT_NAME$
|
|
9378
|
+
name: COMPONENT_NAME$Y,
|
|
9365
9379
|
setup(_, { slots }) {
|
|
9366
9380
|
return () => vue.h(vue.Fragment, slots.default?.());
|
|
9367
9381
|
}
|
|
@@ -9378,9 +9392,9 @@ const props$I = {
|
|
|
9378
9392
|
|
|
9379
9393
|
/** @jsxImportSource vue */
|
|
9380
9394
|
|
|
9381
|
-
const COMPONENT_NAME$
|
|
9395
|
+
const COMPONENT_NAME$X = 'vc-html-to-image';
|
|
9382
9396
|
const HTMLToImage = /* @__PURE__ */ vue.defineComponent({
|
|
9383
|
-
name: COMPONENT_NAME$
|
|
9397
|
+
name: COMPONENT_NAME$X,
|
|
9384
9398
|
props: props$I,
|
|
9385
9399
|
setup(props, {
|
|
9386
9400
|
slots
|
|
@@ -9456,7 +9470,7 @@ const IMGStore$1 = new IMGStore();
|
|
|
9456
9470
|
|
|
9457
9471
|
/** @jsxImportSource vue */
|
|
9458
9472
|
|
|
9459
|
-
const COMPONENT_NAME$
|
|
9473
|
+
const COMPONENT_NAME$W = 'vc-image';
|
|
9460
9474
|
let isSupportObjectFit = false;
|
|
9461
9475
|
window.addEventListener('DOMContentLoaded', () => {
|
|
9462
9476
|
isSupportObjectFit = !vcShared.IS_SERVER && document.documentElement.style.objectFit !== undefined;
|
|
@@ -9469,7 +9483,7 @@ const ObjectFit = {
|
|
|
9469
9483
|
SCALE_DOWN: 'scale-down'
|
|
9470
9484
|
};
|
|
9471
9485
|
const Image = /* @__PURE__ */ vue.defineComponent({
|
|
9472
|
-
name: COMPONENT_NAME$
|
|
9486
|
+
name: COMPONENT_NAME$W,
|
|
9473
9487
|
inheritAttrs: false,
|
|
9474
9488
|
props: props$H,
|
|
9475
9489
|
setup(props, {
|
|
@@ -9674,9 +9688,9 @@ const props$G = {
|
|
|
9674
9688
|
|
|
9675
9689
|
/** @jsxImportSource vue */
|
|
9676
9690
|
|
|
9677
|
-
const COMPONENT_NAME$
|
|
9691
|
+
const COMPONENT_NAME$V = 'vc-image-crop';
|
|
9678
9692
|
const ImageCrop = /* @__PURE__ */ vue.defineComponent({
|
|
9679
|
-
name: COMPONENT_NAME$
|
|
9693
|
+
name: COMPONENT_NAME$V,
|
|
9680
9694
|
props: props$G,
|
|
9681
9695
|
setup(props, {
|
|
9682
9696
|
slots
|
|
@@ -9700,9 +9714,9 @@ const props$F = {
|
|
|
9700
9714
|
|
|
9701
9715
|
/** @jsxImportSource vue */
|
|
9702
9716
|
|
|
9703
|
-
const COMPONENT_NAME$
|
|
9717
|
+
const COMPONENT_NAME$U = 'vc-image-preview';
|
|
9704
9718
|
const ImagePreview = /* @__PURE__ */ vue.defineComponent({
|
|
9705
|
-
name: COMPONENT_NAME$
|
|
9719
|
+
name: COMPONENT_NAME$U,
|
|
9706
9720
|
props: props$F,
|
|
9707
9721
|
setup(props, {
|
|
9708
9722
|
slots
|
|
@@ -9726,9 +9740,9 @@ const props$E = {
|
|
|
9726
9740
|
|
|
9727
9741
|
/** @jsxImportSource vue */
|
|
9728
9742
|
|
|
9729
|
-
const COMPONENT_NAME$
|
|
9743
|
+
const COMPONENT_NAME$T = 'vc-image-processing';
|
|
9730
9744
|
const ImageProcessing = /* @__PURE__ */ vue.defineComponent({
|
|
9731
|
-
name: COMPONENT_NAME$
|
|
9745
|
+
name: COMPONENT_NAME$T,
|
|
9732
9746
|
props: props$E,
|
|
9733
9747
|
setup(props, {
|
|
9734
9748
|
slots
|
|
@@ -9745,9 +9759,9 @@ const MImageProcessing = ImageProcessing;
|
|
|
9745
9759
|
|
|
9746
9760
|
/** @jsxImportSource vue */
|
|
9747
9761
|
|
|
9748
|
-
const COMPONENT_NAME$
|
|
9762
|
+
const COMPONENT_NAME$S = 'vcm-input';
|
|
9749
9763
|
const MInput = /* @__PURE__ */ vue.defineComponent({
|
|
9750
|
-
name: COMPONENT_NAME$
|
|
9764
|
+
name: COMPONENT_NAME$S,
|
|
9751
9765
|
inheritAttrs: false,
|
|
9752
9766
|
props: {
|
|
9753
9767
|
...props$$,
|
|
@@ -9836,9 +9850,9 @@ const MInput = /* @__PURE__ */ vue.defineComponent({
|
|
|
9836
9850
|
|
|
9837
9851
|
/** @jsxImportSource vue */
|
|
9838
9852
|
|
|
9839
|
-
const COMPONENT_NAME$
|
|
9853
|
+
const COMPONENT_NAME$R = 'vcm-input-number';
|
|
9840
9854
|
const MInputNumber = /* @__PURE__ */ vue.defineComponent({
|
|
9841
|
-
name: COMPONENT_NAME$
|
|
9855
|
+
name: COMPONENT_NAME$R,
|
|
9842
9856
|
props: props$X,
|
|
9843
9857
|
inheritAttrs: false,
|
|
9844
9858
|
setup(props, {
|
|
@@ -9887,9 +9901,9 @@ const MInputNumber = /* @__PURE__ */ vue.defineComponent({
|
|
|
9887
9901
|
|
|
9888
9902
|
/** @jsxImportSource vue */
|
|
9889
9903
|
|
|
9890
|
-
const COMPONENT_NAME$
|
|
9904
|
+
const COMPONENT_NAME$Q = 'vcm-input-search';
|
|
9891
9905
|
const MInputSearch = /* @__PURE__ */ vue.defineComponent({
|
|
9892
|
-
name: COMPONENT_NAME$
|
|
9906
|
+
name: COMPONENT_NAME$Q,
|
|
9893
9907
|
props: {
|
|
9894
9908
|
...props$W,
|
|
9895
9909
|
cancelText: {
|
|
@@ -9966,9 +9980,9 @@ const props$D = {
|
|
|
9966
9980
|
}
|
|
9967
9981
|
};
|
|
9968
9982
|
|
|
9969
|
-
const COMPONENT_NAME$
|
|
9983
|
+
const COMPONENT_NAME$P = "vcm-list";
|
|
9970
9984
|
const MList = vue.defineComponent({
|
|
9971
|
-
name: COMPONENT_NAME$
|
|
9985
|
+
name: COMPONENT_NAME$P,
|
|
9972
9986
|
props: props$D,
|
|
9973
9987
|
setup(props, { slots }) {
|
|
9974
9988
|
vue.provide("vc-list", { props });
|
|
@@ -10023,10 +10037,10 @@ const props$C = {
|
|
|
10023
10037
|
|
|
10024
10038
|
/** @jsxImportSource vue */
|
|
10025
10039
|
|
|
10026
|
-
const COMPONENT_NAME$
|
|
10040
|
+
const COMPONENT_NAME$O = 'vcm-list-item';
|
|
10027
10041
|
const HTTP_REGEX = /[a-zA-z]+:\/\/[^\s]*/;
|
|
10028
10042
|
const MListItem = /* @__PURE__ */ vue.defineComponent({
|
|
10029
|
-
name: COMPONENT_NAME$
|
|
10043
|
+
name: COMPONENT_NAME$O,
|
|
10030
10044
|
props: props$C,
|
|
10031
10045
|
emits: ['click'],
|
|
10032
10046
|
setup(props, {
|
|
@@ -10120,11 +10134,11 @@ const props$B = {
|
|
|
10120
10134
|
|
|
10121
10135
|
/** @jsxImportSource vue */
|
|
10122
10136
|
|
|
10123
|
-
const COMPONENT_NAME$
|
|
10137
|
+
const COMPONENT_NAME$N = 'vc-marquee';
|
|
10124
10138
|
const ANIMATION = $.prefixStyle('animation').camel;
|
|
10125
10139
|
const TRANSFORM_KEBAB = $.prefixStyle('transform').kebab;
|
|
10126
10140
|
const Marquee = /* @__PURE__ */ vue.defineComponent({
|
|
10127
|
-
name: COMPONENT_NAME$
|
|
10141
|
+
name: COMPONENT_NAME$N,
|
|
10128
10142
|
props: props$B,
|
|
10129
10143
|
setup(props, {
|
|
10130
10144
|
slots
|
|
@@ -10188,9 +10202,9 @@ const props$A = {
|
|
|
10188
10202
|
}
|
|
10189
10203
|
};
|
|
10190
10204
|
|
|
10191
|
-
const COMPONENT_NAME$
|
|
10205
|
+
const COMPONENT_NAME$M = "vc-resizer";
|
|
10192
10206
|
const Resizer = vue.defineComponent({
|
|
10193
|
-
name: COMPONENT_NAME$
|
|
10207
|
+
name: COMPONENT_NAME$M,
|
|
10194
10208
|
props: props$A,
|
|
10195
10209
|
emit: ["resize", "change"],
|
|
10196
10210
|
setup(props, { emit, slots, expose }) {
|
|
@@ -10333,10 +10347,10 @@ const props$z = {
|
|
|
10333
10347
|
|
|
10334
10348
|
/** @jsxImportSource vue */
|
|
10335
10349
|
|
|
10336
|
-
const COMPONENT_NAME$
|
|
10350
|
+
const COMPONENT_NAME$L = 'vc-modal';
|
|
10337
10351
|
let zIndexNumber = 1002;
|
|
10338
10352
|
const ModalView = /* @__PURE__ */ vue.defineComponent({
|
|
10339
|
-
name: COMPONENT_NAME$
|
|
10353
|
+
name: COMPONENT_NAME$L,
|
|
10340
10354
|
emits: ['update:modelValue', 'close', 'portal-fulfilled', 'visible-change', 'ok', 'cancel'],
|
|
10341
10355
|
props: props$z,
|
|
10342
10356
|
setup(props, {
|
|
@@ -10762,9 +10776,9 @@ const props$y = {
|
|
|
10762
10776
|
|
|
10763
10777
|
/** @jsxImportSource vue */
|
|
10764
10778
|
|
|
10765
|
-
const COMPONENT_NAME$
|
|
10779
|
+
const COMPONENT_NAME$K = 'vc-modal';
|
|
10766
10780
|
const MModalView = /* @__PURE__ */ vue.defineComponent({
|
|
10767
|
-
name: COMPONENT_NAME$
|
|
10781
|
+
name: COMPONENT_NAME$K,
|
|
10768
10782
|
emits: ['update:modelValue', 'portal-fulfilled', 'close', 'ok', 'cancel'],
|
|
10769
10783
|
props: props$y,
|
|
10770
10784
|
setup(props, {
|
|
@@ -10976,9 +10990,9 @@ const props$x = {
|
|
|
10976
10990
|
|
|
10977
10991
|
/** @jsxImportSource vue */
|
|
10978
10992
|
|
|
10979
|
-
const COMPONENT_NAME$
|
|
10993
|
+
const COMPONENT_NAME$J = 'vc-notice';
|
|
10980
10994
|
const NoticeView = /* @__PURE__ */ vue.defineComponent({
|
|
10981
|
-
name: COMPONENT_NAME$
|
|
10995
|
+
name: COMPONENT_NAME$J,
|
|
10982
10996
|
props: props$x,
|
|
10983
10997
|
emits: ['portal-fulfilled', 'close', 'before-close'],
|
|
10984
10998
|
setup(props, {
|
|
@@ -11151,9 +11165,9 @@ const props$w = {
|
|
|
11151
11165
|
|
|
11152
11166
|
/** @jsxImportSource vue */
|
|
11153
11167
|
|
|
11154
|
-
const COMPONENT_NAME$
|
|
11168
|
+
const COMPONENT_NAME$I = 'vc-option';
|
|
11155
11169
|
const Option$1 = /* @__PURE__ */ vue.defineComponent({
|
|
11156
|
-
name: COMPONENT_NAME$
|
|
11170
|
+
name: COMPONENT_NAME$I,
|
|
11157
11171
|
props: props$w,
|
|
11158
11172
|
setup(props, {
|
|
11159
11173
|
slots
|
|
@@ -11220,12 +11234,12 @@ const getLabel = (data, v) => {
|
|
|
11220
11234
|
const { label = "" } = data.find((i) => i.value == v) || {};
|
|
11221
11235
|
return label;
|
|
11222
11236
|
};
|
|
11223
|
-
const flattenData = (data, options = {}) => {
|
|
11237
|
+
const flattenData$1 = (data, options = {}) => {
|
|
11224
11238
|
let result = [];
|
|
11225
11239
|
data.forEach((item) => {
|
|
11226
11240
|
if (item.children) {
|
|
11227
11241
|
const { children, ...rest } = item;
|
|
11228
|
-
const items = flattenData(children, options);
|
|
11242
|
+
const items = flattenData$1(children, options);
|
|
11229
11243
|
result = result.concat(
|
|
11230
11244
|
options.parent ? [options.cascader ? item : rest].concat(items) : items
|
|
11231
11245
|
);
|
|
@@ -11266,9 +11280,9 @@ const props$u = {
|
|
|
11266
11280
|
|
|
11267
11281
|
/** @jsxImportSource vue */
|
|
11268
11282
|
|
|
11269
|
-
const COMPONENT_NAME$
|
|
11283
|
+
const COMPONENT_NAME$H = 'vc-tag';
|
|
11270
11284
|
const Tag = /* @__PURE__ */ vue.defineComponent({
|
|
11271
|
-
name: COMPONENT_NAME$
|
|
11285
|
+
name: COMPONENT_NAME$H,
|
|
11272
11286
|
props: props$u,
|
|
11273
11287
|
emits: ['close', 'change'],
|
|
11274
11288
|
setup(props, {
|
|
@@ -11337,9 +11351,9 @@ const props$t = {
|
|
|
11337
11351
|
|
|
11338
11352
|
/** @jsxImportSource vue */
|
|
11339
11353
|
|
|
11340
|
-
const COMPONENT_NAME$
|
|
11354
|
+
const COMPONENT_NAME$G = 'vc-select-option';
|
|
11341
11355
|
const Option = /* @__PURE__ */ vue.defineComponent({
|
|
11342
|
-
name: COMPONENT_NAME$
|
|
11356
|
+
name: COMPONENT_NAME$G,
|
|
11343
11357
|
props: props$t,
|
|
11344
11358
|
setup(props, {
|
|
11345
11359
|
slots
|
|
@@ -11412,9 +11426,9 @@ const props$s = {
|
|
|
11412
11426
|
|
|
11413
11427
|
/** @jsxImportSource vue */
|
|
11414
11428
|
|
|
11415
|
-
const COMPONENT_NAME$
|
|
11429
|
+
const COMPONENT_NAME$F = 'vc-select-option-group';
|
|
11416
11430
|
const OptionGroup = /* @__PURE__ */ vue.defineComponent({
|
|
11417
|
-
name: COMPONENT_NAME$
|
|
11431
|
+
name: COMPONENT_NAME$F,
|
|
11418
11432
|
props: props$s,
|
|
11419
11433
|
setup(props, {
|
|
11420
11434
|
slots
|
|
@@ -11512,9 +11526,9 @@ const props$r = {
|
|
|
11512
11526
|
function _isSlot$1(s) {
|
|
11513
11527
|
return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
|
|
11514
11528
|
}
|
|
11515
|
-
const COMPONENT_NAME$
|
|
11529
|
+
const COMPONENT_NAME$E = 'vc-select';
|
|
11516
11530
|
const Select = /* @__PURE__ */ vue.defineComponent({
|
|
11517
|
-
name: COMPONENT_NAME$
|
|
11531
|
+
name: COMPONENT_NAME$E,
|
|
11518
11532
|
props: props$r,
|
|
11519
11533
|
emits: ['ready', 'close', 'visible-change', 'clear', 'change', 'update:modelValue'],
|
|
11520
11534
|
setup(props, {
|
|
@@ -11535,7 +11549,7 @@ const Select = /* @__PURE__ */ vue.defineComponent({
|
|
|
11535
11549
|
const searchRegex = vue.ref(new RegExp(''));
|
|
11536
11550
|
const currentValue = vue.ref([]);
|
|
11537
11551
|
const source = vue.computed(() => {
|
|
11538
|
-
return flattenData(props.data, {
|
|
11552
|
+
return flattenData$1(props.data, {
|
|
11539
11553
|
parent: true,
|
|
11540
11554
|
cascader: true
|
|
11541
11555
|
});
|
|
@@ -11758,9 +11772,9 @@ const Select = /* @__PURE__ */ vue.defineComponent({
|
|
|
11758
11772
|
|
|
11759
11773
|
/** @jsxImportSource vue */
|
|
11760
11774
|
|
|
11761
|
-
const COMPONENT_NAME$
|
|
11775
|
+
const COMPONENT_NAME$D = 'vc-pagination';
|
|
11762
11776
|
const Pagination = /* @__PURE__ */ vue.defineComponent({
|
|
11763
|
-
name: COMPONENT_NAME$
|
|
11777
|
+
name: COMPONENT_NAME$D,
|
|
11764
11778
|
props: props$v,
|
|
11765
11779
|
emits: ['update:current', 'change', 'page-size-change'],
|
|
11766
11780
|
setup(props, {
|
|
@@ -11958,9 +11972,9 @@ const props$q = {
|
|
|
11958
11972
|
|
|
11959
11973
|
/** @jsxImportSource vue */
|
|
11960
11974
|
|
|
11961
|
-
const COMPONENT_NAME$
|
|
11975
|
+
const COMPONENT_NAME$C = 'vc-picker';
|
|
11962
11976
|
const Picker = /* @__PURE__ */ vue.defineComponent({
|
|
11963
|
-
name: COMPONENT_NAME$
|
|
11977
|
+
name: COMPONENT_NAME$C,
|
|
11964
11978
|
props: props$q,
|
|
11965
11979
|
setup(props, {
|
|
11966
11980
|
slots
|
|
@@ -11984,9 +11998,9 @@ const props$p = {
|
|
|
11984
11998
|
|
|
11985
11999
|
/** @jsxImportSource vue */
|
|
11986
12000
|
|
|
11987
|
-
const COMPONENT_NAME$
|
|
12001
|
+
const COMPONENT_NAME$B = 'vc-popconfirm';
|
|
11988
12002
|
const Popconfirm = /* @__PURE__ */ vue.defineComponent({
|
|
11989
|
-
name: COMPONENT_NAME$
|
|
12003
|
+
name: COMPONENT_NAME$B,
|
|
11990
12004
|
props: props$p,
|
|
11991
12005
|
setup(props, {
|
|
11992
12006
|
slots
|
|
@@ -12012,9 +12026,9 @@ const props$o = {
|
|
|
12012
12026
|
|
|
12013
12027
|
/** @jsxImportSource vue */
|
|
12014
12028
|
|
|
12015
|
-
const COMPONENT_NAME$
|
|
12029
|
+
const COMPONENT_NAME$A = 'vc-popup';
|
|
12016
12030
|
const Popup = /* @__PURE__ */ vue.defineComponent({
|
|
12017
|
-
name: COMPONENT_NAME$
|
|
12031
|
+
name: COMPONENT_NAME$A,
|
|
12018
12032
|
props: props$o,
|
|
12019
12033
|
setup(props, {
|
|
12020
12034
|
slots
|
|
@@ -12041,9 +12055,9 @@ const props$n = {
|
|
|
12041
12055
|
|
|
12042
12056
|
/** @jsxImportSource vue */
|
|
12043
12057
|
|
|
12044
|
-
const COMPONENT_NAME$
|
|
12058
|
+
const COMPONENT_NAME$z = 'vc-print';
|
|
12045
12059
|
const Print = /* @__PURE__ */ vue.defineComponent({
|
|
12046
|
-
name: COMPONENT_NAME$
|
|
12060
|
+
name: COMPONENT_NAME$z,
|
|
12047
12061
|
props: props$n,
|
|
12048
12062
|
setup(props, {
|
|
12049
12063
|
expose,
|
|
@@ -12139,9 +12153,9 @@ const props$m = {
|
|
|
12139
12153
|
|
|
12140
12154
|
/** @jsxImportSource vue */
|
|
12141
12155
|
|
|
12142
|
-
const COMPONENT_NAME$
|
|
12156
|
+
const COMPONENT_NAME$y = 'vc-progress-circle';
|
|
12143
12157
|
const Circle = /* @__PURE__ */ vue.defineComponent({
|
|
12144
|
-
name: COMPONENT_NAME$
|
|
12158
|
+
name: COMPONENT_NAME$y,
|
|
12145
12159
|
props: props$m,
|
|
12146
12160
|
setup(props, {
|
|
12147
12161
|
slots
|
|
@@ -12198,9 +12212,9 @@ const Circle = /* @__PURE__ */ vue.defineComponent({
|
|
|
12198
12212
|
|
|
12199
12213
|
/** @jsxImportSource vue */
|
|
12200
12214
|
|
|
12201
|
-
const COMPONENT_NAME$
|
|
12215
|
+
const COMPONENT_NAME$x = 'vc-progress-line';
|
|
12202
12216
|
const Line = /* @__PURE__ */ vue.defineComponent({
|
|
12203
|
-
name: COMPONENT_NAME$
|
|
12217
|
+
name: COMPONENT_NAME$x,
|
|
12204
12218
|
props: props$m,
|
|
12205
12219
|
setup(props) {
|
|
12206
12220
|
const colorStyle = vue.computed(() => {
|
|
@@ -12244,9 +12258,9 @@ const Line = /* @__PURE__ */ vue.defineComponent({
|
|
|
12244
12258
|
function _isSlot(s) {
|
|
12245
12259
|
return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
|
|
12246
12260
|
}
|
|
12247
|
-
const COMPONENT_NAME$
|
|
12261
|
+
const COMPONENT_NAME$w = 'vc-progress';
|
|
12248
12262
|
const Progress = /* @__PURE__ */ vue.defineComponent({
|
|
12249
|
-
name: COMPONENT_NAME$
|
|
12263
|
+
name: COMPONENT_NAME$w,
|
|
12250
12264
|
props: props$m,
|
|
12251
12265
|
setup(props, {
|
|
12252
12266
|
slots
|
|
@@ -12398,9 +12412,9 @@ const useRadio = () => {
|
|
|
12398
12412
|
|
|
12399
12413
|
/** @jsxImportSource vue */
|
|
12400
12414
|
|
|
12401
|
-
const COMPONENT_NAME$
|
|
12415
|
+
const COMPONENT_NAME$v = 'vc-radio';
|
|
12402
12416
|
const Radio = /* @__PURE__ */ vue.defineComponent({
|
|
12403
|
-
name: COMPONENT_NAME$
|
|
12417
|
+
name: COMPONENT_NAME$v,
|
|
12404
12418
|
props: props$l,
|
|
12405
12419
|
emits: ['update:modelValue', 'change'],
|
|
12406
12420
|
setup(props, {
|
|
@@ -12511,9 +12525,9 @@ const useRadioGroup = () => {
|
|
|
12511
12525
|
|
|
12512
12526
|
/** @jsxImportSource vue */
|
|
12513
12527
|
|
|
12514
|
-
const COMPONENT_NAME$
|
|
12528
|
+
const COMPONENT_NAME$u = 'vc-radio-group';
|
|
12515
12529
|
const RadioGroup = /* @__PURE__ */ vue.defineComponent({
|
|
12516
|
-
name: COMPONENT_NAME$
|
|
12530
|
+
name: COMPONENT_NAME$u,
|
|
12517
12531
|
props: props$k,
|
|
12518
12532
|
emits: ['update:modelValue', 'change'],
|
|
12519
12533
|
setup(props, {
|
|
@@ -12535,9 +12549,9 @@ const RadioGroup = /* @__PURE__ */ vue.defineComponent({
|
|
|
12535
12549
|
|
|
12536
12550
|
/** @jsxImportSource vue */
|
|
12537
12551
|
|
|
12538
|
-
const COMPONENT_NAME$
|
|
12552
|
+
const COMPONENT_NAME$t = 'vcm-radio';
|
|
12539
12553
|
const MRadio = /* @__PURE__ */ vue.defineComponent({
|
|
12540
|
-
name: COMPONENT_NAME$
|
|
12554
|
+
name: COMPONENT_NAME$t,
|
|
12541
12555
|
props: props$l,
|
|
12542
12556
|
emits: ['update:modelValue', 'change'],
|
|
12543
12557
|
setup(props, {
|
|
@@ -12578,9 +12592,9 @@ const MRadio = /* @__PURE__ */ vue.defineComponent({
|
|
|
12578
12592
|
|
|
12579
12593
|
/** @jsxImportSource vue */
|
|
12580
12594
|
|
|
12581
|
-
const COMPONENT_NAME$
|
|
12595
|
+
const COMPONENT_NAME$s = 'vcm-radio-group';
|
|
12582
12596
|
const MRadioGroup = /* @__PURE__ */ vue.defineComponent({
|
|
12583
|
-
name: COMPONENT_NAME$
|
|
12597
|
+
name: COMPONENT_NAME$s,
|
|
12584
12598
|
props: props$k,
|
|
12585
12599
|
emits: ['update:modelValue', 'change'],
|
|
12586
12600
|
setup(props, {
|
|
@@ -12609,9 +12623,9 @@ const props$j = {
|
|
|
12609
12623
|
|
|
12610
12624
|
/** @jsxImportSource vue */
|
|
12611
12625
|
|
|
12612
|
-
const COMPONENT_NAME$
|
|
12626
|
+
const COMPONENT_NAME$r = 'vc-rate';
|
|
12613
12627
|
const Rate = /* @__PURE__ */ vue.defineComponent({
|
|
12614
|
-
name: COMPONENT_NAME$
|
|
12628
|
+
name: COMPONENT_NAME$r,
|
|
12615
12629
|
props: props$j,
|
|
12616
12630
|
setup(props, {
|
|
12617
12631
|
slots
|
|
@@ -12679,9 +12693,9 @@ const props$i = {
|
|
|
12679
12693
|
|
|
12680
12694
|
/** @jsxImportSource vue */
|
|
12681
12695
|
|
|
12682
|
-
const COMPONENT_NAME$
|
|
12696
|
+
const COMPONENT_NAME$q = 'vc-recycle-list-scroll-state';
|
|
12683
12697
|
const ScrollState = /* @__PURE__ */ vue.defineComponent({
|
|
12684
|
-
name: COMPONENT_NAME$
|
|
12698
|
+
name: COMPONENT_NAME$q,
|
|
12685
12699
|
setup(_, {
|
|
12686
12700
|
slots
|
|
12687
12701
|
}) {
|
|
@@ -12811,12 +12825,12 @@ const useDirectionKeys = () => {
|
|
|
12811
12825
|
|
|
12812
12826
|
/** @jsxImportSource vue */
|
|
12813
12827
|
|
|
12814
|
-
const COMPONENT_NAME$
|
|
12828
|
+
const COMPONENT_NAME$p = 'vc-recycle-list-container';
|
|
12815
12829
|
|
|
12816
12830
|
// TODO: 抽离
|
|
12817
12831
|
const transformKey = $__namespace.prefixStyle('transform').camel;
|
|
12818
12832
|
const Container = /* @__PURE__ */ vue.defineComponent({
|
|
12819
|
-
name: COMPONENT_NAME$
|
|
12833
|
+
name: COMPONENT_NAME$p,
|
|
12820
12834
|
props: props$h,
|
|
12821
12835
|
emits: ['refresh'],
|
|
12822
12836
|
setup(props, {
|
|
@@ -12914,9 +12928,9 @@ const Container = /* @__PURE__ */ vue.defineComponent({
|
|
|
12914
12928
|
|
|
12915
12929
|
/** @jsxImportSource vue */
|
|
12916
12930
|
|
|
12917
|
-
const COMPONENT_NAME$
|
|
12931
|
+
const COMPONENT_NAME$o = 'vc-recycle-list-item';
|
|
12918
12932
|
const Item = /* @__PURE__ */ vue.defineComponent({
|
|
12919
|
-
name: COMPONENT_NAME$
|
|
12933
|
+
name: COMPONENT_NAME$o,
|
|
12920
12934
|
props: {
|
|
12921
12935
|
vertical: {
|
|
12922
12936
|
type: Boolean,
|
|
@@ -12959,11 +12973,11 @@ const Item = /* @__PURE__ */ vue.defineComponent({
|
|
|
12959
12973
|
|
|
12960
12974
|
/** @jsxImportSource vue */
|
|
12961
12975
|
|
|
12962
|
-
const COMPONENT_NAME$
|
|
12976
|
+
const COMPONENT_NAME$n = 'vc-recycle-list';
|
|
12963
12977
|
const RecycleList = /* @__PURE__ */ vue.defineComponent({
|
|
12964
|
-
name: COMPONENT_NAME$
|
|
12978
|
+
name: COMPONENT_NAME$n,
|
|
12965
12979
|
props: props$i,
|
|
12966
|
-
emits: ['scroll'],
|
|
12980
|
+
emits: ['scroll', 'row-resize'],
|
|
12967
12981
|
setup(props, {
|
|
12968
12982
|
slots,
|
|
12969
12983
|
expose,
|
|
@@ -13062,7 +13076,7 @@ const RecycleList = /* @__PURE__ */ vue.defineComponent({
|
|
|
13062
13076
|
const isLoading = vue.computed(() => {
|
|
13063
13077
|
return loadings.value.length;
|
|
13064
13078
|
});
|
|
13065
|
-
const scrollTo = options => {
|
|
13079
|
+
const scrollTo = (options, force) => {
|
|
13066
13080
|
let options$ = {
|
|
13067
13081
|
x: 0,
|
|
13068
13082
|
y: 0
|
|
@@ -13073,10 +13087,9 @@ const RecycleList = /* @__PURE__ */ vue.defineComponent({
|
|
|
13073
13087
|
options$ = Object.assign(options$, options);
|
|
13074
13088
|
}
|
|
13075
13089
|
const el = wrapper.value;
|
|
13076
|
-
|
|
13077
|
-
|
|
13078
|
-
|
|
13079
|
-
y !== options$.y && (el.scrollTop = options$.y);
|
|
13090
|
+
(force || el.scrollLeft !== options$.x) && (el.scrollLeft = options$.x);
|
|
13091
|
+
(force || el.scrollLeft !== options$.y) && (el.scrollTop = options$.y);
|
|
13092
|
+
scroller.value.scrollTo(options);
|
|
13080
13093
|
};
|
|
13081
13094
|
const scrollToIndex = (index, offset = 0) => {
|
|
13082
13095
|
const item = rebuildData.value[index];
|
|
@@ -13109,12 +13122,21 @@ const RecycleList = /* @__PURE__ */ vue.defineComponent({
|
|
|
13109
13122
|
const current = props.inverted ? rebuildData.value[rebuildDataIndexMap.value[index]] : rebuildData.value[index];
|
|
13110
13123
|
if (!current) return; // 受到`removeUnusedPlaceholders`影响,无效的会被回收
|
|
13111
13124
|
|
|
13125
|
+
const oldSize = current.size;
|
|
13112
13126
|
const dom = preloads.value[index] || curloads.value[props.inverted ? index : index - firstItemIndex.value];
|
|
13113
13127
|
if (dom) {
|
|
13114
13128
|
current.size = dom[K.offsetSize] || placeholderSize.value;
|
|
13115
13129
|
} else if (current) {
|
|
13116
13130
|
current.size = placeholderSize.value;
|
|
13117
13131
|
}
|
|
13132
|
+
|
|
13133
|
+
// 这样的考虑欠佳,待优化
|
|
13134
|
+
if (oldSize !== current.size) {
|
|
13135
|
+
emit('row-resize', {
|
|
13136
|
+
index: current.id,
|
|
13137
|
+
size: current.size
|
|
13138
|
+
});
|
|
13139
|
+
}
|
|
13118
13140
|
};
|
|
13119
13141
|
const refreshItemPosition = () => {
|
|
13120
13142
|
const sizes = Array.from({
|
|
@@ -13147,6 +13169,7 @@ const RecycleList = /* @__PURE__ */ vue.defineComponent({
|
|
|
13147
13169
|
|
|
13148
13170
|
// 设置data首个元素的在originalData索引值
|
|
13149
13171
|
const setFirstItemIndex = () => {
|
|
13172
|
+
if (!wrapper.value) return;
|
|
13150
13173
|
const position = wrapper.value[K.scrollAxis];
|
|
13151
13174
|
let item;
|
|
13152
13175
|
for (let i = 0; i < rebuildData.value.length; i++) {
|
|
@@ -13327,6 +13350,7 @@ const RecycleList = /* @__PURE__ */ vue.defineComponent({
|
|
|
13327
13350
|
|
|
13328
13351
|
// 图片撑开时,会影响布局, 节流结束后调用
|
|
13329
13352
|
const handleResize = Utils.throttle(async () => {
|
|
13353
|
+
if (!wrapper.value) return;
|
|
13330
13354
|
const isNeedRefreshLayout = rebuildData.value.some(i => !i.isPlaceholder);
|
|
13331
13355
|
if (isNeedRefreshLayout) {
|
|
13332
13356
|
const oldFirstItemIndex = firstItemIndex.value;
|
|
@@ -13521,9 +13545,9 @@ const props$g = {
|
|
|
13521
13545
|
|
|
13522
13546
|
/** @jsxImportSource vue */
|
|
13523
13547
|
|
|
13524
|
-
const COMPONENT_NAME$
|
|
13548
|
+
const COMPONENT_NAME$m = 'vc-slider';
|
|
13525
13549
|
const Slider = /* @__PURE__ */ vue.defineComponent({
|
|
13526
|
-
name: COMPONENT_NAME$
|
|
13550
|
+
name: COMPONENT_NAME$m,
|
|
13527
13551
|
props: props$g,
|
|
13528
13552
|
setup(props, {
|
|
13529
13553
|
slots
|
|
@@ -13547,9 +13571,9 @@ const props$f = {
|
|
|
13547
13571
|
|
|
13548
13572
|
/** @jsxImportSource vue */
|
|
13549
13573
|
|
|
13550
|
-
const COMPONENT_NAME$
|
|
13574
|
+
const COMPONENT_NAME$l = 'vc-sort-list';
|
|
13551
13575
|
const SortList = /* @__PURE__ */ vue.defineComponent({
|
|
13552
|
-
name: COMPONENT_NAME$
|
|
13576
|
+
name: COMPONENT_NAME$l,
|
|
13553
13577
|
props: props$f,
|
|
13554
13578
|
setup(props, {
|
|
13555
13579
|
slots
|
|
@@ -13573,9 +13597,9 @@ const props$e = {
|
|
|
13573
13597
|
|
|
13574
13598
|
/** @jsxImportSource vue */
|
|
13575
13599
|
|
|
13576
|
-
const COMPONENT_NAME$
|
|
13600
|
+
const COMPONENT_NAME$k = 'vc-steps';
|
|
13577
13601
|
const Steps = /* @__PURE__ */ vue.defineComponent({
|
|
13578
|
-
name: COMPONENT_NAME$
|
|
13602
|
+
name: COMPONENT_NAME$k,
|
|
13579
13603
|
props: props$e,
|
|
13580
13604
|
setup(props, {
|
|
13581
13605
|
slots
|
|
@@ -13688,9 +13712,9 @@ const useSwitch = (expose) => {
|
|
|
13688
13712
|
|
|
13689
13713
|
/** @jsxImportSource vue */
|
|
13690
13714
|
|
|
13691
|
-
const COMPONENT_NAME$
|
|
13715
|
+
const COMPONENT_NAME$j = 'vc-switch';
|
|
13692
13716
|
const Switch = /* @__PURE__ */ vue.defineComponent({
|
|
13693
|
-
name: COMPONENT_NAME$
|
|
13717
|
+
name: COMPONENT_NAME$j,
|
|
13694
13718
|
props: props$d,
|
|
13695
13719
|
// click -> onClick要被拦截,此处不能放置
|
|
13696
13720
|
emits: ['update:modelValue', 'change', 'click'],
|
|
@@ -13727,9 +13751,9 @@ const Switch = /* @__PURE__ */ vue.defineComponent({
|
|
|
13727
13751
|
|
|
13728
13752
|
/** @jsxImportSource vue */
|
|
13729
13753
|
|
|
13730
|
-
const COMPONENT_NAME$
|
|
13754
|
+
const COMPONENT_NAME$i = 'vcm-switch';
|
|
13731
13755
|
const MSwitch = /* @__PURE__ */ vue.defineComponent({
|
|
13732
|
-
name: COMPONENT_NAME$
|
|
13756
|
+
name: COMPONENT_NAME$i,
|
|
13733
13757
|
props: props$d,
|
|
13734
13758
|
// click -> onClick要被拦截,此处不能放置
|
|
13735
13759
|
emits: ['update:modelValue', 'change', 'click'],
|
|
@@ -13764,37 +13788,2905 @@ const MSwitch = /* @__PURE__ */ vue.defineComponent({
|
|
|
13764
13788
|
}
|
|
13765
13789
|
});
|
|
13766
13790
|
|
|
13767
|
-
const
|
|
13768
|
-
|
|
13769
|
-
|
|
13770
|
-
|
|
13791
|
+
const parseHeight = (v) => {
|
|
13792
|
+
if (typeof v === "number") {
|
|
13793
|
+
return v;
|
|
13794
|
+
}
|
|
13795
|
+
if (v && typeof v === "string") {
|
|
13796
|
+
if (/^\d+(?:px)?/.test(v)) {
|
|
13797
|
+
return parseInt(v, 10);
|
|
13798
|
+
}
|
|
13799
|
+
throw new VcError("table", "Invalid Height");
|
|
13771
13800
|
}
|
|
13801
|
+
return null;
|
|
13772
13802
|
};
|
|
13773
|
-
|
|
13774
|
-
|
|
13775
|
-
|
|
13776
|
-
|
|
13777
|
-
|
|
13778
|
-
|
|
13779
|
-
|
|
13780
|
-
|
|
13781
|
-
|
|
13782
|
-
|
|
13783
|
-
return () => {
|
|
13784
|
-
return vue.createVNode("div", {
|
|
13785
|
-
"class": "vc-table"
|
|
13786
|
-
}, [slots?.default?.()]);
|
|
13787
|
-
};
|
|
13803
|
+
const parseWidth = (v) => {
|
|
13804
|
+
if (typeof v === "number") {
|
|
13805
|
+
return v;
|
|
13806
|
+
}
|
|
13807
|
+
let v1;
|
|
13808
|
+
if (typeof v !== "undefined") {
|
|
13809
|
+
v1 = parseInt(v, 10);
|
|
13810
|
+
if (isNaN(v1)) {
|
|
13811
|
+
v1 = null;
|
|
13812
|
+
}
|
|
13788
13813
|
}
|
|
13789
|
-
|
|
13790
|
-
|
|
13791
|
-
const
|
|
13792
|
-
|
|
13793
|
-
|
|
13794
|
-
|
|
13795
|
-
|
|
13796
|
-
|
|
13797
|
-
|
|
13814
|
+
return v1;
|
|
13815
|
+
};
|
|
13816
|
+
const parseMinWidth = (v) => {
|
|
13817
|
+
if (typeof v === "number") {
|
|
13818
|
+
return v;
|
|
13819
|
+
}
|
|
13820
|
+
let v1;
|
|
13821
|
+
if (typeof v !== "undefined") {
|
|
13822
|
+
v1 = parseWidth(v);
|
|
13823
|
+
if (isNaN(v1)) {
|
|
13824
|
+
v = 80;
|
|
13825
|
+
}
|
|
13826
|
+
}
|
|
13827
|
+
return v1;
|
|
13828
|
+
};
|
|
13829
|
+
const getRowValue = (row, primaryKey) => {
|
|
13830
|
+
if (row.__KEY__) return row.__KEY__;
|
|
13831
|
+
if (!row) throw new VcError("table", "row is required when get row identity");
|
|
13832
|
+
if (typeof primaryKey === "string") {
|
|
13833
|
+
if (!primaryKey.includes(".")) {
|
|
13834
|
+
return row[primaryKey];
|
|
13835
|
+
}
|
|
13836
|
+
const key = primaryKey.split(".");
|
|
13837
|
+
let current = row;
|
|
13838
|
+
for (let i = 0; i < key.length; i++) {
|
|
13839
|
+
current = current[key[i]];
|
|
13840
|
+
}
|
|
13841
|
+
return current;
|
|
13842
|
+
} else if (typeof primaryKey === "function") {
|
|
13843
|
+
return primaryKey.call(null, row);
|
|
13844
|
+
}
|
|
13845
|
+
};
|
|
13846
|
+
const getValuesMap = (array = [], primaryKey) => {
|
|
13847
|
+
const arrayMap = {};
|
|
13848
|
+
array.forEach((row, index) => {
|
|
13849
|
+
arrayMap[getRowValue(row, primaryKey)] = { row, index };
|
|
13850
|
+
});
|
|
13851
|
+
return arrayMap;
|
|
13852
|
+
};
|
|
13853
|
+
const getColumnById = (columns, columnId) => {
|
|
13854
|
+
let column = null;
|
|
13855
|
+
columns.forEach((item) => {
|
|
13856
|
+
if (item.id === columnId) {
|
|
13857
|
+
column = item;
|
|
13858
|
+
}
|
|
13859
|
+
});
|
|
13860
|
+
return column;
|
|
13861
|
+
};
|
|
13862
|
+
const getColumnByCell = (columns, cell) => {
|
|
13863
|
+
const matches = (cell.className || "").match(/vc-table_[^\s]+/gm);
|
|
13864
|
+
if (matches) {
|
|
13865
|
+
return getColumnById(columns, matches[0]);
|
|
13866
|
+
}
|
|
13867
|
+
return null;
|
|
13868
|
+
};
|
|
13869
|
+
const getCell = (e) => {
|
|
13870
|
+
let cell = e.target;
|
|
13871
|
+
while (cell && cell.tagName.toUpperCase() !== "HTML") {
|
|
13872
|
+
if (cell.classList.contains("vc-table__td")) {
|
|
13873
|
+
return cell;
|
|
13874
|
+
}
|
|
13875
|
+
cell = cell.parentNode;
|
|
13876
|
+
}
|
|
13877
|
+
return null;
|
|
13878
|
+
};
|
|
13879
|
+
|
|
13880
|
+
const getAllColumns = (columns) => {
|
|
13881
|
+
const result = [];
|
|
13882
|
+
columns.forEach((column) => {
|
|
13883
|
+
if (column.children) {
|
|
13884
|
+
result.push(column);
|
|
13885
|
+
result.push(...getAllColumns(column.children));
|
|
13886
|
+
} else {
|
|
13887
|
+
result.push(column);
|
|
13888
|
+
}
|
|
13889
|
+
});
|
|
13890
|
+
return result;
|
|
13891
|
+
};
|
|
13892
|
+
const columnsToRowsEffect = (v) => {
|
|
13893
|
+
let maxLevel = 1;
|
|
13894
|
+
const traverse = (column, parent) => {
|
|
13895
|
+
if (parent) {
|
|
13896
|
+
column.level = parent.level + 1;
|
|
13897
|
+
if (maxLevel < column.level) {
|
|
13898
|
+
maxLevel = column.level;
|
|
13899
|
+
}
|
|
13900
|
+
}
|
|
13901
|
+
if (column.children) {
|
|
13902
|
+
let colSpan = 0;
|
|
13903
|
+
column.children.forEach((subColumn) => {
|
|
13904
|
+
traverse(subColumn, column);
|
|
13905
|
+
colSpan += subColumn.colSpan;
|
|
13906
|
+
});
|
|
13907
|
+
column.colSpan = colSpan;
|
|
13908
|
+
} else {
|
|
13909
|
+
column.colSpan = 1;
|
|
13910
|
+
}
|
|
13911
|
+
};
|
|
13912
|
+
v.forEach((column) => {
|
|
13913
|
+
column.level = 1;
|
|
13914
|
+
traverse(column);
|
|
13915
|
+
});
|
|
13916
|
+
const rows = [];
|
|
13917
|
+
for (let i = 0; i < maxLevel; i++) {
|
|
13918
|
+
rows.push([]);
|
|
13919
|
+
}
|
|
13920
|
+
const allColumns = getAllColumns(v);
|
|
13921
|
+
allColumns.forEach((column) => {
|
|
13922
|
+
if (!column.children) {
|
|
13923
|
+
column.rowSpan = maxLevel - column.level + 1;
|
|
13924
|
+
} else {
|
|
13925
|
+
column.rowSpan = 1;
|
|
13926
|
+
}
|
|
13927
|
+
rows[column.level - 1].push(column);
|
|
13928
|
+
});
|
|
13929
|
+
return rows;
|
|
13930
|
+
};
|
|
13931
|
+
const flattenData = (data, opts = {}) => {
|
|
13932
|
+
const result = [];
|
|
13933
|
+
data.forEach((item) => {
|
|
13934
|
+
if (item.children) {
|
|
13935
|
+
const { children, ...rest } = item;
|
|
13936
|
+
opts.parent ? result.push(...[opts.cascader ? item : rest, ...flattenData(children, opts)]) : result.push(...flattenData(children));
|
|
13937
|
+
} else {
|
|
13938
|
+
result.push(item);
|
|
13939
|
+
}
|
|
13940
|
+
});
|
|
13941
|
+
return result;
|
|
13942
|
+
};
|
|
13943
|
+
const walkTreeNode = (root, cb, opts = {}) => {
|
|
13944
|
+
const {
|
|
13945
|
+
childrenKey = "children",
|
|
13946
|
+
lazyKey = "hasChildren",
|
|
13947
|
+
level: baseLevel = 0
|
|
13948
|
+
} = opts;
|
|
13949
|
+
const isNil = (array) => !(Array.isArray(array) && array.length);
|
|
13950
|
+
function _walker(parent, children, level) {
|
|
13951
|
+
cb(parent, children, level);
|
|
13952
|
+
children.forEach((item) => {
|
|
13953
|
+
if (item[lazyKey]) {
|
|
13954
|
+
cb(item, null, level + 1);
|
|
13955
|
+
return;
|
|
13956
|
+
}
|
|
13957
|
+
const $children = item[childrenKey];
|
|
13958
|
+
if (!isNil($children)) {
|
|
13959
|
+
_walker(item, $children, level + 1);
|
|
13960
|
+
}
|
|
13961
|
+
});
|
|
13962
|
+
}
|
|
13963
|
+
root.forEach((item) => {
|
|
13964
|
+
if (item[lazyKey]) {
|
|
13965
|
+
cb(item, null, baseLevel);
|
|
13966
|
+
return;
|
|
13967
|
+
}
|
|
13968
|
+
const children = item[childrenKey];
|
|
13969
|
+
if (!isNil(children)) {
|
|
13970
|
+
_walker(item, children, baseLevel);
|
|
13971
|
+
}
|
|
13972
|
+
});
|
|
13973
|
+
};
|
|
13974
|
+
|
|
13975
|
+
class BaseWatcher {
|
|
13976
|
+
states = vue.reactive({
|
|
13977
|
+
// 渲染的数据来源,是对 table 中的 data 过滤排序后的结果
|
|
13978
|
+
_data: [],
|
|
13979
|
+
data: [],
|
|
13980
|
+
list: [],
|
|
13981
|
+
// 表头数据
|
|
13982
|
+
headerRows: [],
|
|
13983
|
+
// 列 动态收集vc-table-column中的columnConfig
|
|
13984
|
+
_columns: [],
|
|
13985
|
+
originColumns: [],
|
|
13986
|
+
notFixedColumns: [],
|
|
13987
|
+
leftFixedColumns: [],
|
|
13988
|
+
rightFixedColumns: [],
|
|
13989
|
+
// 选择
|
|
13990
|
+
isAllSelected: false,
|
|
13991
|
+
selection: [],
|
|
13992
|
+
reserveSelection: false,
|
|
13993
|
+
selectable: null,
|
|
13994
|
+
hoverRowIndex: null,
|
|
13995
|
+
// Current
|
|
13996
|
+
currentRow: null,
|
|
13997
|
+
// Expand
|
|
13998
|
+
defaultExpandAll: false,
|
|
13999
|
+
expandRows: [],
|
|
14000
|
+
// Tree
|
|
14001
|
+
treeExpandRowValue: [],
|
|
14002
|
+
treeData: {},
|
|
14003
|
+
// item的状态,比如loading, loaded
|
|
14004
|
+
treeLazy: false,
|
|
14005
|
+
treelazyNodeMap: {},
|
|
14006
|
+
// 源数据
|
|
14007
|
+
treeLazyData: [],
|
|
14008
|
+
// 源数据展开
|
|
14009
|
+
treeLazyColumnIdentifier: "hasChildren",
|
|
14010
|
+
treeChildrenColumnName: "children",
|
|
14011
|
+
// compputeds
|
|
14012
|
+
isComplex: vue.computed(() => this.states.leftFixedColumns.length > 0 || this.states.rightFixedColumns.length > 0),
|
|
14013
|
+
isGroup: vue.computed(() => this.states.columns.length > this.states.originColumns.length),
|
|
14014
|
+
columns: vue.computed(() => lodash.concat(this.states.leftFixedLeafColumns, this.states.leafColumns, this.states.rightFixedLeafColumns)),
|
|
14015
|
+
leafColumns: vue.computed(() => flattenData(this.states.notFixedColumns)),
|
|
14016
|
+
leftFixedLeafColumns: vue.computed(() => flattenData(this.states.leftFixedColumns)),
|
|
14017
|
+
rightFixedLeafColumns: vue.computed(() => flattenData(this.states.rightFixedColumns)),
|
|
14018
|
+
leafColumnsLength: vue.computed(() => this.states.leafColumns.length),
|
|
14019
|
+
leftFixedLeafColumnsLength: vue.computed(() => this.states.leftFixedLeafColumns.length),
|
|
14020
|
+
rightFixedLeafColumnsLength: vue.computed(() => this.states.rightFixedLeafColumns.length)
|
|
14021
|
+
});
|
|
14022
|
+
}
|
|
14023
|
+
|
|
14024
|
+
class Expand {
|
|
14025
|
+
store;
|
|
14026
|
+
constructor(store) {
|
|
14027
|
+
this.store = store;
|
|
14028
|
+
}
|
|
14029
|
+
update() {
|
|
14030
|
+
const store = this.store;
|
|
14031
|
+
const { primaryKey, defaultExpandAll } = this.store.table.props;
|
|
14032
|
+
const { data = [], expandRows } = store.states;
|
|
14033
|
+
if (defaultExpandAll) {
|
|
14034
|
+
store.states.expandRows = data.slice();
|
|
14035
|
+
} else if (primaryKey) {
|
|
14036
|
+
const expandRowsMap = getValuesMap(expandRows, primaryKey);
|
|
14037
|
+
store.states.expandRows = data.reduce((prev, row) => {
|
|
14038
|
+
const rowId = getRowValue(row, primaryKey);
|
|
14039
|
+
const rowInfo = expandRowsMap[rowId];
|
|
14040
|
+
if (rowInfo) {
|
|
14041
|
+
prev.push(row);
|
|
14042
|
+
}
|
|
14043
|
+
return prev;
|
|
14044
|
+
}, []);
|
|
14045
|
+
} else {
|
|
14046
|
+
store.states.expandRows = [];
|
|
14047
|
+
}
|
|
14048
|
+
}
|
|
14049
|
+
toggle(row, expanded) {
|
|
14050
|
+
const store = this.store;
|
|
14051
|
+
const { expandRows } = store.states;
|
|
14052
|
+
const changed = store.toggleRowStatus(expandRows, row, expanded);
|
|
14053
|
+
if (changed) {
|
|
14054
|
+
store.table.emit("expand-change", row, expandRows.slice());
|
|
14055
|
+
store.scheduleLayout();
|
|
14056
|
+
}
|
|
14057
|
+
}
|
|
14058
|
+
reset(ids) {
|
|
14059
|
+
const store = this.store;
|
|
14060
|
+
store.checkPrimaryKey();
|
|
14061
|
+
const { primaryKey } = store.table.props;
|
|
14062
|
+
const { data } = store.states;
|
|
14063
|
+
const keysMap = getValuesMap(data, primaryKey);
|
|
14064
|
+
store.states.expandRows = ids.reduce((prev, cur) => {
|
|
14065
|
+
const info = keysMap[cur];
|
|
14066
|
+
if (info) {
|
|
14067
|
+
prev.push(info.row);
|
|
14068
|
+
}
|
|
14069
|
+
return prev;
|
|
14070
|
+
}, []);
|
|
14071
|
+
}
|
|
14072
|
+
isExpanded(row) {
|
|
14073
|
+
const { primaryKey } = this.store.table.props;
|
|
14074
|
+
const { expandRows = [] } = this.store.states;
|
|
14075
|
+
if (primaryKey) {
|
|
14076
|
+
const expandMap = getValuesMap(expandRows, primaryKey);
|
|
14077
|
+
return !!expandMap[getRowValue(row, primaryKey)];
|
|
14078
|
+
}
|
|
14079
|
+
return expandRows.indexOf(row) !== -1;
|
|
14080
|
+
}
|
|
14081
|
+
}
|
|
14082
|
+
|
|
14083
|
+
class Current {
|
|
14084
|
+
store;
|
|
14085
|
+
constructor(store) {
|
|
14086
|
+
this.store = store;
|
|
14087
|
+
}
|
|
14088
|
+
reset(id) {
|
|
14089
|
+
const store = this.store;
|
|
14090
|
+
const { primaryKey } = store.table.props;
|
|
14091
|
+
store.checkPrimaryKey();
|
|
14092
|
+
const { data = [] } = store.states;
|
|
14093
|
+
const currentRow = data.find((item) => getRowValue(item, primaryKey) === id);
|
|
14094
|
+
store.states.currentRow = currentRow || null;
|
|
14095
|
+
}
|
|
14096
|
+
update() {
|
|
14097
|
+
const store = this.store;
|
|
14098
|
+
const { primaryKey } = store.table.props;
|
|
14099
|
+
const { data = [], currentRow } = store.states;
|
|
14100
|
+
const oldCurrentRow = currentRow;
|
|
14101
|
+
if (oldCurrentRow && !data.includes(oldCurrentRow)) {
|
|
14102
|
+
let newCurrentRow = null;
|
|
14103
|
+
if (primaryKey) {
|
|
14104
|
+
newCurrentRow = data.find((item) => {
|
|
14105
|
+
return getRowValue(item, primaryKey) === getRowValue(oldCurrentRow, primaryKey);
|
|
14106
|
+
});
|
|
14107
|
+
}
|
|
14108
|
+
store.states.currentRow = newCurrentRow;
|
|
14109
|
+
if (newCurrentRow !== oldCurrentRow) {
|
|
14110
|
+
store.table.emit("current-change", null, oldCurrentRow);
|
|
14111
|
+
}
|
|
14112
|
+
}
|
|
14113
|
+
}
|
|
14114
|
+
}
|
|
14115
|
+
|
|
14116
|
+
let Tree$1 = class Tree {
|
|
14117
|
+
store;
|
|
14118
|
+
/**
|
|
14119
|
+
* 解决问题嵌入型的数据,watch 无法是检测到变化
|
|
14120
|
+
* TODO: 是否会造成性能问题?同base-watcher flattenData
|
|
14121
|
+
* { id: { level, children } }
|
|
14122
|
+
*/
|
|
14123
|
+
normalizedData = vue.computed(() => {
|
|
14124
|
+
const { primaryKey } = this.store.table.props;
|
|
14125
|
+
if (!primaryKey) return {};
|
|
14126
|
+
return this.normalize(this.store.states.data || []);
|
|
14127
|
+
});
|
|
14128
|
+
/**
|
|
14129
|
+
* 针对懒加载的情形,不处理嵌套数据
|
|
14130
|
+
* { id: { children } }
|
|
14131
|
+
*/
|
|
14132
|
+
normalizedLazyNode = vue.computed(() => {
|
|
14133
|
+
const { primaryKey } = this.store.table.props;
|
|
14134
|
+
const { treelazyNodeMap, treeLazyColumnIdentifier, treeChildrenColumnName } = this.store.states;
|
|
14135
|
+
const keys = Object.keys(treelazyNodeMap);
|
|
14136
|
+
const res = {};
|
|
14137
|
+
if (!keys.length) return res;
|
|
14138
|
+
keys.forEach((key) => {
|
|
14139
|
+
if (treelazyNodeMap[key].length) {
|
|
14140
|
+
const item = { children: [] };
|
|
14141
|
+
treelazyNodeMap[key].forEach((row) => {
|
|
14142
|
+
const id = getRowValue(row, primaryKey);
|
|
14143
|
+
item.children.push(id);
|
|
14144
|
+
const hasChildren = row[treeLazyColumnIdentifier] || row[treeChildrenColumnName] && row[treeChildrenColumnName].length === 0;
|
|
14145
|
+
if (hasChildren && !res[id]) {
|
|
14146
|
+
res[id] = { children: [] };
|
|
14147
|
+
}
|
|
14148
|
+
});
|
|
14149
|
+
res[key] = item;
|
|
14150
|
+
}
|
|
14151
|
+
});
|
|
14152
|
+
return res;
|
|
14153
|
+
});
|
|
14154
|
+
constructor(store) {
|
|
14155
|
+
this.store = store;
|
|
14156
|
+
vue.watch(
|
|
14157
|
+
() => [this.normalizedData.value, this.normalizedLazyNode.value],
|
|
14158
|
+
() => this.update()
|
|
14159
|
+
);
|
|
14160
|
+
}
|
|
14161
|
+
normalize(data) {
|
|
14162
|
+
const { primaryKey } = this.store.table.props;
|
|
14163
|
+
const { treeChildrenColumnName, treeLazyColumnIdentifier, treeLazy } = this.store.states;
|
|
14164
|
+
const res = {};
|
|
14165
|
+
walkTreeNode(
|
|
14166
|
+
data,
|
|
14167
|
+
(parent, children, level) => {
|
|
14168
|
+
const parentId = getRowValue(parent, primaryKey);
|
|
14169
|
+
if (Array.isArray(children)) {
|
|
14170
|
+
res[parentId] = {
|
|
14171
|
+
children: children.map((row) => getRowValue(row, primaryKey)),
|
|
14172
|
+
level
|
|
14173
|
+
};
|
|
14174
|
+
} else if (treeLazy) {
|
|
14175
|
+
res[parentId] = {
|
|
14176
|
+
children: [],
|
|
14177
|
+
lazy: true,
|
|
14178
|
+
level
|
|
14179
|
+
};
|
|
14180
|
+
}
|
|
14181
|
+
},
|
|
14182
|
+
{
|
|
14183
|
+
childrenKey: treeChildrenColumnName,
|
|
14184
|
+
lazyKey: treeLazyColumnIdentifier
|
|
14185
|
+
}
|
|
14186
|
+
);
|
|
14187
|
+
return res;
|
|
14188
|
+
}
|
|
14189
|
+
// 获取当前展开最大的level
|
|
14190
|
+
getMaxLevel() {
|
|
14191
|
+
const { primaryKey } = this.store.table.props;
|
|
14192
|
+
const { data, treeData } = this.store.states;
|
|
14193
|
+
const levels = data.map((item) => {
|
|
14194
|
+
const traverse = (source) => {
|
|
14195
|
+
if (!source) return 0;
|
|
14196
|
+
if (source.expanded && source.children.length > 0) {
|
|
14197
|
+
return lodashEs.max([source.level, ...source.children.map((key) => traverse(treeData[key]))]);
|
|
14198
|
+
} else {
|
|
14199
|
+
return source.level;
|
|
14200
|
+
}
|
|
14201
|
+
};
|
|
14202
|
+
const id = getRowValue(item, primaryKey);
|
|
14203
|
+
return traverse(treeData[id]);
|
|
14204
|
+
});
|
|
14205
|
+
return lodashEs.max(levels) || 0;
|
|
14206
|
+
}
|
|
14207
|
+
update() {
|
|
14208
|
+
const nested = this.normalizedData.value;
|
|
14209
|
+
const normalizedLazyNode = this.normalizedLazyNode.value;
|
|
14210
|
+
const keys = Object.keys(nested);
|
|
14211
|
+
const newTreeData = {};
|
|
14212
|
+
if (keys.length) {
|
|
14213
|
+
const { defaultExpandAll } = this.store.table.props;
|
|
14214
|
+
const { treeData: oldTreeData, treeExpandRowValue, treeLazy } = this.store.states;
|
|
14215
|
+
const rootLazyRowValue = [];
|
|
14216
|
+
const getExpanded = (oldValue, key) => {
|
|
14217
|
+
const included = defaultExpandAll || treeExpandRowValue && treeExpandRowValue.indexOf(key) !== -1;
|
|
14218
|
+
return !!(oldValue && oldValue.expanded || included);
|
|
14219
|
+
};
|
|
14220
|
+
keys.forEach((key) => {
|
|
14221
|
+
const oldValue = oldTreeData[key];
|
|
14222
|
+
const newValue = { ...nested[key] };
|
|
14223
|
+
newValue.expanded = getExpanded(oldValue, key);
|
|
14224
|
+
if (newValue.lazy) {
|
|
14225
|
+
const { loaded = false, loading = false } = oldValue || {};
|
|
14226
|
+
newValue.loaded = !!loaded;
|
|
14227
|
+
newValue.loading = !!loading;
|
|
14228
|
+
rootLazyRowValue.push(key);
|
|
14229
|
+
}
|
|
14230
|
+
newTreeData[key] = newValue;
|
|
14231
|
+
});
|
|
14232
|
+
const lazyKeys = Object.keys(normalizedLazyNode);
|
|
14233
|
+
if (treeLazy && lazyKeys.length && rootLazyRowValue.length) {
|
|
14234
|
+
lazyKeys.forEach((key) => {
|
|
14235
|
+
const oldValue = oldTreeData[key];
|
|
14236
|
+
const lazyNodeChildren = normalizedLazyNode[key].children;
|
|
14237
|
+
if (rootLazyRowValue.includes(key)) {
|
|
14238
|
+
if (newTreeData[key].children.length !== 0) {
|
|
14239
|
+
throw new VcError("table", "children需要为空数组");
|
|
14240
|
+
}
|
|
14241
|
+
newTreeData[key].children = lazyNodeChildren;
|
|
14242
|
+
} else {
|
|
14243
|
+
const { loaded = false, loading = false } = oldValue || {};
|
|
14244
|
+
newTreeData[key] = vue.reactive({
|
|
14245
|
+
lazy: true,
|
|
14246
|
+
loaded: !!loaded,
|
|
14247
|
+
loading: !!loading,
|
|
14248
|
+
expanded: getExpanded(oldValue, key),
|
|
14249
|
+
children: lazyNodeChildren,
|
|
14250
|
+
level: ""
|
|
14251
|
+
});
|
|
14252
|
+
}
|
|
14253
|
+
});
|
|
14254
|
+
}
|
|
14255
|
+
}
|
|
14256
|
+
this.store.states.treeData = newTreeData;
|
|
14257
|
+
this.store.updateTableScrollY();
|
|
14258
|
+
}
|
|
14259
|
+
expand(ids) {
|
|
14260
|
+
this.store.states.treeExpandRowValue = ids;
|
|
14261
|
+
this.update();
|
|
14262
|
+
}
|
|
14263
|
+
toggle(row, expanded) {
|
|
14264
|
+
this.store.checkPrimaryKey();
|
|
14265
|
+
const { primaryKey } = this.store.table.props;
|
|
14266
|
+
const { treeData } = this.store.states;
|
|
14267
|
+
const id = getRowValue(row, primaryKey);
|
|
14268
|
+
const data = id && treeData[id];
|
|
14269
|
+
if (id && data && "expanded" in data) {
|
|
14270
|
+
const oldExpanded = data.expanded;
|
|
14271
|
+
expanded = typeof expanded === "undefined" ? !data.expanded : expanded;
|
|
14272
|
+
this.store.states.treeData[id].expanded = expanded;
|
|
14273
|
+
if (oldExpanded !== expanded) {
|
|
14274
|
+
this.store.table.emit("expand-change", row, expanded, this.getMaxLevel());
|
|
14275
|
+
}
|
|
14276
|
+
this.store.updateTableScrollY();
|
|
14277
|
+
}
|
|
14278
|
+
}
|
|
14279
|
+
loadOrToggle(row) {
|
|
14280
|
+
this.store.checkPrimaryKey();
|
|
14281
|
+
const { primaryKey } = this.store.table.props;
|
|
14282
|
+
const { treeLazy, treeData } = this.store.states;
|
|
14283
|
+
const id = getRowValue(row, primaryKey);
|
|
14284
|
+
const data = treeData[id];
|
|
14285
|
+
if (treeLazy && data && "loaded" in data && !data.loaded) {
|
|
14286
|
+
this.loadData(row, id, data);
|
|
14287
|
+
} else {
|
|
14288
|
+
this.toggle(row);
|
|
14289
|
+
}
|
|
14290
|
+
}
|
|
14291
|
+
loadData(row, key, treeNode) {
|
|
14292
|
+
this.store.checkPrimaryKey();
|
|
14293
|
+
const { table } = this.store;
|
|
14294
|
+
const { primaryKey } = table.props;
|
|
14295
|
+
const { treelazyNodeMap, treeData, treeChildrenColumnName, treeLazyColumnIdentifier } = this.store.states;
|
|
14296
|
+
if (table.props.loadExpand && !treeData[key].loaded) {
|
|
14297
|
+
this.store.states.treeData[key].loading = true;
|
|
14298
|
+
const promise = table.props.loadExpand(row, treeNode);
|
|
14299
|
+
const fn = (data) => {
|
|
14300
|
+
if (!Array.isArray(data)) {
|
|
14301
|
+
throw new VcError("table", "data必须是数组");
|
|
14302
|
+
}
|
|
14303
|
+
this.store.states.treeData[key].loading = false;
|
|
14304
|
+
this.store.states.treeData[key].loaded = true;
|
|
14305
|
+
this.store.states.treeData[key].expanded = true;
|
|
14306
|
+
walkTreeNode(
|
|
14307
|
+
data,
|
|
14308
|
+
(parent, _, level) => {
|
|
14309
|
+
const id = getRowValue(parent, primaryKey);
|
|
14310
|
+
Object.defineProperty(parent, "__KEY__", {
|
|
14311
|
+
value: `${level}__${id}`,
|
|
14312
|
+
writable: false
|
|
14313
|
+
});
|
|
14314
|
+
},
|
|
14315
|
+
{
|
|
14316
|
+
childrenKey: treeChildrenColumnName,
|
|
14317
|
+
lazyKey: treeLazyColumnIdentifier,
|
|
14318
|
+
level: treeNode.level
|
|
14319
|
+
}
|
|
14320
|
+
);
|
|
14321
|
+
if (data.length) {
|
|
14322
|
+
this.store.states.treelazyNodeMap[key] = data;
|
|
14323
|
+
if (table.props.expandSelectable) {
|
|
14324
|
+
this.store.states.treeLazyData = Object.keys(treelazyNodeMap).reduce((pre, cur) => {
|
|
14325
|
+
return pre.concat(treelazyNodeMap[cur]);
|
|
14326
|
+
}, []);
|
|
14327
|
+
}
|
|
14328
|
+
}
|
|
14329
|
+
if (this.store.isSelected(row)) {
|
|
14330
|
+
data.forEach((i) => {
|
|
14331
|
+
this.store.toggleRowSelection(i);
|
|
14332
|
+
});
|
|
14333
|
+
}
|
|
14334
|
+
this.store.updateAllSelected();
|
|
14335
|
+
vue.nextTick(() => {
|
|
14336
|
+
table.emit("expand-change", row, true, this.getMaxLevel());
|
|
14337
|
+
});
|
|
14338
|
+
};
|
|
14339
|
+
if (promise && promise.then) {
|
|
14340
|
+
promise.then((data) => fn(data)).catch((e) => {
|
|
14341
|
+
throw new VcError("table", e);
|
|
14342
|
+
});
|
|
14343
|
+
} else if (Array.isArray(promise)) {
|
|
14344
|
+
fn(promise);
|
|
14345
|
+
}
|
|
14346
|
+
}
|
|
14347
|
+
}
|
|
14348
|
+
};
|
|
14349
|
+
|
|
14350
|
+
class Layout {
|
|
14351
|
+
table;
|
|
14352
|
+
store;
|
|
14353
|
+
states = vue.reactive({
|
|
14354
|
+
height: null,
|
|
14355
|
+
scrollX: false,
|
|
14356
|
+
scrollY: false,
|
|
14357
|
+
bodyWidth: null,
|
|
14358
|
+
leftFixedWidth: null,
|
|
14359
|
+
rightFixedWidth: null,
|
|
14360
|
+
tableHeight: null,
|
|
14361
|
+
headerHeight: 44,
|
|
14362
|
+
// Table Header Height
|
|
14363
|
+
appendHeight: 0,
|
|
14364
|
+
// Append Slot Height
|
|
14365
|
+
footerHeight: 44,
|
|
14366
|
+
// Table Footer Height
|
|
14367
|
+
bodyHeight: null
|
|
14368
|
+
// Table Height - Table Header Height
|
|
14369
|
+
});
|
|
14370
|
+
constructor(store) {
|
|
14371
|
+
this.store = store;
|
|
14372
|
+
this.table = store.table;
|
|
14373
|
+
if (!this.table) {
|
|
14374
|
+
throw new VcError("table", "Table Layout 必须包含table实例");
|
|
14375
|
+
}
|
|
14376
|
+
if (!this.store) {
|
|
14377
|
+
throw new VcError("table", "Table Layout 必须包含store实例");
|
|
14378
|
+
}
|
|
14379
|
+
}
|
|
14380
|
+
updateScrollY() {
|
|
14381
|
+
const { height, bodyHeight } = this.states;
|
|
14382
|
+
if (height === null || bodyHeight === null) return;
|
|
14383
|
+
const bodyYWrapper = this.table.exposed.bodyYWrapper.value;
|
|
14384
|
+
if (this.table.vnode.el && bodyYWrapper) {
|
|
14385
|
+
this.states.scrollY = bodyYWrapper.offsetHeight > bodyHeight;
|
|
14386
|
+
}
|
|
14387
|
+
}
|
|
14388
|
+
setHeight(value, prop = "height") {
|
|
14389
|
+
if (vcShared.IS_SERVER) return;
|
|
14390
|
+
const el = this.table.vnode.el;
|
|
14391
|
+
value = parseHeight(value);
|
|
14392
|
+
this.states.height = value;
|
|
14393
|
+
if (!el && (value || value === 0)) return vue.nextTick(() => this.setHeight(value, prop));
|
|
14394
|
+
if (value) {
|
|
14395
|
+
el.style[prop] = `${value}px`;
|
|
14396
|
+
this.updateElsHeight();
|
|
14397
|
+
}
|
|
14398
|
+
}
|
|
14399
|
+
setMaxHeight(value) {
|
|
14400
|
+
this.setHeight(value, "max-height");
|
|
14401
|
+
}
|
|
14402
|
+
updateElsHeight() {
|
|
14403
|
+
if (!this.table.exposed.isReady.value) return vue.nextTick(() => this.updateElsHeight());
|
|
14404
|
+
const table = this.table.exposed;
|
|
14405
|
+
const headerWrapper = table.headerWrapper.value;
|
|
14406
|
+
const appendWrapper = table.appendWrapper.value;
|
|
14407
|
+
const footerWrapper = table.footerWrapper.value;
|
|
14408
|
+
const { showHeader } = this.table.props;
|
|
14409
|
+
this.states.appendHeight = appendWrapper ? appendWrapper.offsetHeight : 0;
|
|
14410
|
+
if (showHeader && !headerWrapper) return;
|
|
14411
|
+
const headerHeight = !showHeader ? 0 : headerWrapper.offsetHeight;
|
|
14412
|
+
this.states.headerHeight = headerHeight;
|
|
14413
|
+
if (showHeader && headerWrapper.offsetWidth > 0 && (this.store.states.columns || []).length > 0 && headerHeight < 2) {
|
|
14414
|
+
return vue.nextTick(() => this.updateElsHeight());
|
|
14415
|
+
}
|
|
14416
|
+
const tableHeight = this.table.vnode.el.clientHeight;
|
|
14417
|
+
this.states.tableHeight = tableHeight;
|
|
14418
|
+
const footerHeight = footerWrapper ? footerWrapper.offsetHeight : 0;
|
|
14419
|
+
this.states.footerHeight = footerHeight;
|
|
14420
|
+
if (this.states.height !== null) {
|
|
14421
|
+
this.states.bodyHeight = tableHeight - headerHeight - footerHeight + (footerWrapper ? 1 : 0);
|
|
14422
|
+
}
|
|
14423
|
+
this.updateScrollY();
|
|
14424
|
+
}
|
|
14425
|
+
updateColumnsWidth() {
|
|
14426
|
+
if (vcShared.IS_SERVER) return;
|
|
14427
|
+
const bodyWidth = this.table.vnode.el.clientWidth;
|
|
14428
|
+
let bodyMinWidth = 0;
|
|
14429
|
+
const flattenColumns = this.store.states.columns;
|
|
14430
|
+
const flexColumns = flattenColumns.filter((column) => typeof column.width !== "number");
|
|
14431
|
+
const { fit } = this.table.props;
|
|
14432
|
+
if (flexColumns.length > 0 && fit) {
|
|
14433
|
+
flattenColumns.forEach((column) => {
|
|
14434
|
+
bodyMinWidth += column.width || column.minWidth || 80;
|
|
14435
|
+
});
|
|
14436
|
+
if (bodyMinWidth <= bodyWidth) {
|
|
14437
|
+
this.states.scrollX = false;
|
|
14438
|
+
const totalFlexWidth = bodyWidth - bodyMinWidth;
|
|
14439
|
+
if (flexColumns.length === 1) {
|
|
14440
|
+
flexColumns[0].realWidth = (flexColumns[0].minWidth || 80) + totalFlexWidth;
|
|
14441
|
+
} else {
|
|
14442
|
+
const allColumnsWidth = flexColumns.reduce((prev, column) => prev + (column.minWidth || 80), 0);
|
|
14443
|
+
const flexWidthPerPixel = totalFlexWidth / allColumnsWidth;
|
|
14444
|
+
let noneFirstWidth = 0;
|
|
14445
|
+
flexColumns.forEach((column, index) => {
|
|
14446
|
+
if (index === 0) return;
|
|
14447
|
+
const flexWidth = Math.floor((column.minWidth || 80) * flexWidthPerPixel);
|
|
14448
|
+
noneFirstWidth += flexWidth;
|
|
14449
|
+
column.realWidth = (column.minWidth || 80) + flexWidth;
|
|
14450
|
+
});
|
|
14451
|
+
flexColumns[0].realWidth = (flexColumns[0].minWidth || 80) + totalFlexWidth - noneFirstWidth;
|
|
14452
|
+
}
|
|
14453
|
+
} else {
|
|
14454
|
+
this.states.scrollX = true;
|
|
14455
|
+
flexColumns.forEach((column) => {
|
|
14456
|
+
column.realWidth = column.width || column.minWidth;
|
|
14457
|
+
});
|
|
14458
|
+
}
|
|
14459
|
+
this.states.bodyWidth = Math.max(bodyMinWidth, bodyWidth);
|
|
14460
|
+
this.table.exposed.resizeState.value.width = this.states.bodyWidth;
|
|
14461
|
+
} else {
|
|
14462
|
+
flattenColumns.forEach((column) => {
|
|
14463
|
+
if (!column.width && !column.minWidth) {
|
|
14464
|
+
column.realWidth = 80;
|
|
14465
|
+
} else {
|
|
14466
|
+
column.realWidth = column.width || column.minWidth;
|
|
14467
|
+
}
|
|
14468
|
+
bodyMinWidth += column.realWidth;
|
|
14469
|
+
});
|
|
14470
|
+
this.states.scrollX = bodyMinWidth > bodyWidth;
|
|
14471
|
+
this.states.bodyWidth = bodyMinWidth;
|
|
14472
|
+
}
|
|
14473
|
+
const leftFixedColumns = this.store.states.leftFixedColumns;
|
|
14474
|
+
if (leftFixedColumns.length > 0) {
|
|
14475
|
+
let leftFixedWidth = 0;
|
|
14476
|
+
leftFixedColumns.forEach(function(column) {
|
|
14477
|
+
leftFixedWidth += column.realWidth || column.width;
|
|
14478
|
+
});
|
|
14479
|
+
this.states.leftFixedWidth = leftFixedWidth;
|
|
14480
|
+
}
|
|
14481
|
+
const rightFixedColumns = this.store.states.rightFixedColumns;
|
|
14482
|
+
if (rightFixedColumns.length > 0) {
|
|
14483
|
+
let rightFixedWidth = 0;
|
|
14484
|
+
rightFixedColumns.forEach(function(column) {
|
|
14485
|
+
rightFixedWidth += column.realWidth || column.width;
|
|
14486
|
+
});
|
|
14487
|
+
this.states.rightFixedWidth = rightFixedWidth;
|
|
14488
|
+
}
|
|
14489
|
+
}
|
|
14490
|
+
}
|
|
14491
|
+
|
|
14492
|
+
class Store extends BaseWatcher {
|
|
14493
|
+
table;
|
|
14494
|
+
current;
|
|
14495
|
+
expand;
|
|
14496
|
+
tree;
|
|
14497
|
+
layout;
|
|
14498
|
+
flatData = vue.computed(() => {
|
|
14499
|
+
if (this.table.props.expandSelectable) {
|
|
14500
|
+
return lodash.concat(
|
|
14501
|
+
flattenData(this.states.data, { parent: true, cascader: true }),
|
|
14502
|
+
this.states.treeLazyData
|
|
14503
|
+
);
|
|
14504
|
+
} else {
|
|
14505
|
+
return this.states.data;
|
|
14506
|
+
}
|
|
14507
|
+
});
|
|
14508
|
+
constructor(options) {
|
|
14509
|
+
super();
|
|
14510
|
+
if (!options.table) {
|
|
14511
|
+
throw new VcError("table", "table必传");
|
|
14512
|
+
}
|
|
14513
|
+
this.table = options.table;
|
|
14514
|
+
this.current = new Current(this);
|
|
14515
|
+
this.expand = new Expand(this);
|
|
14516
|
+
this.tree = new Tree$1(this);
|
|
14517
|
+
this.layout = new Layout(this);
|
|
14518
|
+
const { props } = options.table;
|
|
14519
|
+
lodash.merge(this.states, {
|
|
14520
|
+
treeLazy: props.lazy || false,
|
|
14521
|
+
treeLazyColumnIdentifier: props.treeMap.hasChildren || "hasChildren",
|
|
14522
|
+
treeChildrenColumnName: props.treeMap.children || "children"
|
|
14523
|
+
});
|
|
14524
|
+
}
|
|
14525
|
+
setData(data) {
|
|
14526
|
+
const dataInstanceChanged = this.states._data !== data;
|
|
14527
|
+
this.states._data = data;
|
|
14528
|
+
this.states.data = data;
|
|
14529
|
+
this.states.list = data.reduce((pre, row, index) => {
|
|
14530
|
+
pre.push({
|
|
14531
|
+
rows: [
|
|
14532
|
+
{
|
|
14533
|
+
index,
|
|
14534
|
+
data: row,
|
|
14535
|
+
height: "",
|
|
14536
|
+
heightMap: {
|
|
14537
|
+
left: "",
|
|
14538
|
+
main: "",
|
|
14539
|
+
right: ""
|
|
14540
|
+
}
|
|
14541
|
+
}
|
|
14542
|
+
],
|
|
14543
|
+
expand: false
|
|
14544
|
+
});
|
|
14545
|
+
return pre;
|
|
14546
|
+
}, []);
|
|
14547
|
+
this.current.update();
|
|
14548
|
+
this.expand.update();
|
|
14549
|
+
if (!this.states.reserveSelection) {
|
|
14550
|
+
if (dataInstanceChanged) {
|
|
14551
|
+
this.clearSelection();
|
|
14552
|
+
} else {
|
|
14553
|
+
this.cleanSelection();
|
|
14554
|
+
}
|
|
14555
|
+
} else {
|
|
14556
|
+
this.checkPrimaryKey();
|
|
14557
|
+
this.updateSelectionByRowKey();
|
|
14558
|
+
}
|
|
14559
|
+
this.updateAllSelected();
|
|
14560
|
+
this.updateTableScrollY();
|
|
14561
|
+
}
|
|
14562
|
+
rowSelectedChanged(row) {
|
|
14563
|
+
this.toggleRowSelection(row);
|
|
14564
|
+
this.updateAllSelected();
|
|
14565
|
+
}
|
|
14566
|
+
// TODO: 合并的多行管理
|
|
14567
|
+
setHoverRow(index) {
|
|
14568
|
+
this.states.hoverRowIndex = index;
|
|
14569
|
+
}
|
|
14570
|
+
setCurrentRow(row) {
|
|
14571
|
+
const oldCurrentRow = this.states.currentRow;
|
|
14572
|
+
this.states.currentRow = row;
|
|
14573
|
+
if (oldCurrentRow !== row) {
|
|
14574
|
+
this.table.emit("current-change", row, oldCurrentRow);
|
|
14575
|
+
}
|
|
14576
|
+
}
|
|
14577
|
+
/**
|
|
14578
|
+
* 检查 primaryKey 是否存在
|
|
14579
|
+
*/
|
|
14580
|
+
checkPrimaryKey() {
|
|
14581
|
+
const { primaryKey } = this.table.props;
|
|
14582
|
+
}
|
|
14583
|
+
/**
|
|
14584
|
+
* states
|
|
14585
|
+
* -> _columns
|
|
14586
|
+
* -> selectable
|
|
14587
|
+
* -> reserveSelection
|
|
14588
|
+
* @param column ~
|
|
14589
|
+
* @param index ~
|
|
14590
|
+
* @param parent ~
|
|
14591
|
+
*/
|
|
14592
|
+
insertColumn(column, index, parent) {
|
|
14593
|
+
let array = this.states._columns;
|
|
14594
|
+
if (parent) {
|
|
14595
|
+
array = parent.children;
|
|
14596
|
+
if (!array) {
|
|
14597
|
+
array = [];
|
|
14598
|
+
parent.children = array;
|
|
14599
|
+
}
|
|
14600
|
+
}
|
|
14601
|
+
if (typeof index !== "undefined") {
|
|
14602
|
+
array.splice(index, 0, column);
|
|
14603
|
+
} else {
|
|
14604
|
+
array.push(column);
|
|
14605
|
+
}
|
|
14606
|
+
if (column.type === "selection") {
|
|
14607
|
+
this.states.selectable = column.selectable;
|
|
14608
|
+
this.states.reserveSelection = column.reserveSelection;
|
|
14609
|
+
}
|
|
14610
|
+
if (this.table.exposed.isReady.value) {
|
|
14611
|
+
this.updateColumns();
|
|
14612
|
+
this.scheduleLayout();
|
|
14613
|
+
}
|
|
14614
|
+
}
|
|
14615
|
+
removeColumn(column, parent) {
|
|
14616
|
+
let array = this.states._columns;
|
|
14617
|
+
if (parent) {
|
|
14618
|
+
array = parent.children || [];
|
|
14619
|
+
}
|
|
14620
|
+
if (array) {
|
|
14621
|
+
array.splice(array.indexOf(column), 1);
|
|
14622
|
+
}
|
|
14623
|
+
if (this.table.exposed.isReady.value) {
|
|
14624
|
+
this.updateColumns();
|
|
14625
|
+
this.scheduleLayout();
|
|
14626
|
+
}
|
|
14627
|
+
}
|
|
14628
|
+
/**
|
|
14629
|
+
* 更新列
|
|
14630
|
+
* leftFixedColumns: 左fixed
|
|
14631
|
+
* rightFixedColumns: 右fixed
|
|
14632
|
+
* originColumns: 中(包括左右)
|
|
14633
|
+
* columns: 展开以上
|
|
14634
|
+
* leafColumnsLength
|
|
14635
|
+
* leftFixedLeafColumnsLength
|
|
14636
|
+
* rightFixedLeafColumnsLength
|
|
14637
|
+
* isComplex: 是否包含固定列
|
|
14638
|
+
*/
|
|
14639
|
+
updateColumns() {
|
|
14640
|
+
const { states } = this;
|
|
14641
|
+
const _columns = states._columns || [];
|
|
14642
|
+
const leftFixedColumns = _columns.filter((column) => column.fixed === true || column.fixed === "left");
|
|
14643
|
+
const rightFixedColumns = _columns.filter((column) => column.fixed === "right");
|
|
14644
|
+
if (leftFixedColumns.length > 0 && _columns[0] && _columns[0].type === "selection" && !_columns[0].fixed) {
|
|
14645
|
+
_columns[0].fixed = true;
|
|
14646
|
+
leftFixedColumns.unshift(_columns[0]);
|
|
14647
|
+
}
|
|
14648
|
+
const notFixedColumns = _columns.filter((column) => !column.fixed);
|
|
14649
|
+
const originColumns = lodash.concat(leftFixedColumns, notFixedColumns, rightFixedColumns);
|
|
14650
|
+
const headerRows = columnsToRowsEffect(originColumns);
|
|
14651
|
+
states.leftFixedColumns = leftFixedColumns;
|
|
14652
|
+
states.notFixedColumns = notFixedColumns;
|
|
14653
|
+
states.rightFixedColumns = rightFixedColumns;
|
|
14654
|
+
states.originColumns = originColumns;
|
|
14655
|
+
states.headerRows = headerRows;
|
|
14656
|
+
}
|
|
14657
|
+
// 选择
|
|
14658
|
+
isSelected(row) {
|
|
14659
|
+
const { selection = [] } = this.states;
|
|
14660
|
+
return selection.includes(row);
|
|
14661
|
+
}
|
|
14662
|
+
/**
|
|
14663
|
+
* 清除选择
|
|
14664
|
+
*/
|
|
14665
|
+
clearSelection() {
|
|
14666
|
+
this.states.isAllSelected = false;
|
|
14667
|
+
const oldSelection = this.states.selection;
|
|
14668
|
+
if (this.states.selection.length) {
|
|
14669
|
+
this.states.selection = [];
|
|
14670
|
+
}
|
|
14671
|
+
if (oldSelection.length > 0) {
|
|
14672
|
+
this.table.emit("selection-change", []);
|
|
14673
|
+
}
|
|
14674
|
+
}
|
|
14675
|
+
/**
|
|
14676
|
+
* 清理选择
|
|
14677
|
+
*/
|
|
14678
|
+
cleanSelection() {
|
|
14679
|
+
const { primaryKey } = this.table.props;
|
|
14680
|
+
const { selection = [] } = this.states;
|
|
14681
|
+
let deleted;
|
|
14682
|
+
if (primaryKey) {
|
|
14683
|
+
deleted = [];
|
|
14684
|
+
const selectedMap = getValuesMap(selection, primaryKey);
|
|
14685
|
+
const dataMap = getValuesMap(selection, primaryKey);
|
|
14686
|
+
for (const key in selectedMap) {
|
|
14687
|
+
if (Utils.hasOwn(selectedMap, key) && !dataMap[key]) {
|
|
14688
|
+
deleted.push(selectedMap[key].row);
|
|
14689
|
+
}
|
|
14690
|
+
}
|
|
14691
|
+
} else {
|
|
14692
|
+
deleted = selection.filter((item) => {
|
|
14693
|
+
return !this.flatData.value.includes(item);
|
|
14694
|
+
});
|
|
14695
|
+
}
|
|
14696
|
+
deleted.forEach((deletedItem) => {
|
|
14697
|
+
selection.splice(selection.indexOf(deletedItem), 1);
|
|
14698
|
+
});
|
|
14699
|
+
if (deleted.length) {
|
|
14700
|
+
const newSelection = selection.filter((item) => !deleted.includes(item));
|
|
14701
|
+
this.states.selection = newSelection;
|
|
14702
|
+
this.table.emit("selection-change", newSelection.slice());
|
|
14703
|
+
}
|
|
14704
|
+
}
|
|
14705
|
+
/**
|
|
14706
|
+
* 存在副作用
|
|
14707
|
+
* 对statusArr做添加和删除的操作
|
|
14708
|
+
* 如 this.states.selection
|
|
14709
|
+
* @param statusArr ~
|
|
14710
|
+
* @param row ~
|
|
14711
|
+
* @param newVal ~
|
|
14712
|
+
* @returns ~
|
|
14713
|
+
*/
|
|
14714
|
+
toggleRowStatus(statusArr, row, newVal) {
|
|
14715
|
+
let changed = false;
|
|
14716
|
+
const index = statusArr.indexOf(row);
|
|
14717
|
+
const included = index !== -1;
|
|
14718
|
+
const addRow = () => {
|
|
14719
|
+
statusArr.push(row);
|
|
14720
|
+
changed = true;
|
|
14721
|
+
};
|
|
14722
|
+
const removeRow = () => {
|
|
14723
|
+
statusArr.splice(index, 1);
|
|
14724
|
+
changed = true;
|
|
14725
|
+
};
|
|
14726
|
+
if (typeof newVal === "boolean") {
|
|
14727
|
+
if (newVal && !included) {
|
|
14728
|
+
addRow();
|
|
14729
|
+
} else if (!newVal && included) {
|
|
14730
|
+
removeRow();
|
|
14731
|
+
}
|
|
14732
|
+
} else {
|
|
14733
|
+
included ? removeRow() : addRow();
|
|
14734
|
+
}
|
|
14735
|
+
return changed;
|
|
14736
|
+
}
|
|
14737
|
+
toggleRowSelection(row, selected, emitChange = true) {
|
|
14738
|
+
const { selection } = this.states;
|
|
14739
|
+
const changed = this.toggleRowStatus(selection, row, selected);
|
|
14740
|
+
if (changed) {
|
|
14741
|
+
const newSelection = (this.states.selection || []).slice();
|
|
14742
|
+
if (emitChange) {
|
|
14743
|
+
this.table.emit("select", newSelection, row);
|
|
14744
|
+
}
|
|
14745
|
+
this.table.emit("selection-change", newSelection);
|
|
14746
|
+
}
|
|
14747
|
+
}
|
|
14748
|
+
toggleAllSelection = lodash.debounce(() => {
|
|
14749
|
+
const { indeterminate } = this.table.props;
|
|
14750
|
+
const { selection, isAllSelected, selectable } = this.states;
|
|
14751
|
+
const value = indeterminate ? !isAllSelected : !(isAllSelected || selection.length);
|
|
14752
|
+
this.states.isAllSelected = value;
|
|
14753
|
+
let selectionChanged = false;
|
|
14754
|
+
this.flatData.value.forEach((row, index) => {
|
|
14755
|
+
if (selectable) {
|
|
14756
|
+
if (selectable.call(null, row, index) && this.toggleRowStatus(selection, row, value)) {
|
|
14757
|
+
selectionChanged = true;
|
|
14758
|
+
}
|
|
14759
|
+
} else if (this.toggleRowStatus(selection, row, value)) {
|
|
14760
|
+
selectionChanged = true;
|
|
14761
|
+
}
|
|
14762
|
+
});
|
|
14763
|
+
if (selectionChanged) {
|
|
14764
|
+
this.table.emit("selection-change", selection ? selection.slice() : []);
|
|
14765
|
+
}
|
|
14766
|
+
this.table.emit("select-all", selection);
|
|
14767
|
+
}, 10);
|
|
14768
|
+
// 展开行与 TreeTable 都要使用
|
|
14769
|
+
toggleRowExpansionAdapter(row, expanded) {
|
|
14770
|
+
const { columns } = this.states;
|
|
14771
|
+
const hasExpandColumn = columns.some(({ type }) => type === "expand");
|
|
14772
|
+
if (hasExpandColumn) {
|
|
14773
|
+
this.expand.toggle(row, expanded);
|
|
14774
|
+
} else {
|
|
14775
|
+
this.tree.toggle(row, expanded);
|
|
14776
|
+
}
|
|
14777
|
+
}
|
|
14778
|
+
// 适配层,expand-primary-keys 在 Expand 与 TreeTable 中都有使用
|
|
14779
|
+
// 这里会触发额外的计算,但为了兼容性,暂时这么做
|
|
14780
|
+
setExpandRowValueAdapter(val) {
|
|
14781
|
+
this.expand.reset(val);
|
|
14782
|
+
this.tree.expand(val);
|
|
14783
|
+
}
|
|
14784
|
+
updateSelectionByRowKey() {
|
|
14785
|
+
const { primaryKey } = this.table.props;
|
|
14786
|
+
const { selection } = this.states;
|
|
14787
|
+
const selectedMap = getValuesMap(selection, primaryKey);
|
|
14788
|
+
this.states.selection = this.flatData.value.reduce((prev, row) => {
|
|
14789
|
+
const rowId = getRowValue(row, primaryKey);
|
|
14790
|
+
const rowInfo = selectedMap[rowId];
|
|
14791
|
+
if (rowInfo) {
|
|
14792
|
+
prev.push(row);
|
|
14793
|
+
}
|
|
14794
|
+
return prev;
|
|
14795
|
+
}, []);
|
|
14796
|
+
}
|
|
14797
|
+
updateAllSelected() {
|
|
14798
|
+
const { selectable, data = [] } = this.states;
|
|
14799
|
+
if (data.length === 0) {
|
|
14800
|
+
this.states.isAllSelected = false;
|
|
14801
|
+
return;
|
|
14802
|
+
}
|
|
14803
|
+
let isAllSelected = true;
|
|
14804
|
+
let selectedCount = 0;
|
|
14805
|
+
const temp = this.flatData.value;
|
|
14806
|
+
for (let i = 0, j = temp.length; i < j; i++) {
|
|
14807
|
+
const row = temp[i];
|
|
14808
|
+
const isRowSelectable = selectable && selectable.call(null, row, i);
|
|
14809
|
+
if (!this.isSelected(row)) {
|
|
14810
|
+
if (!selectable || isRowSelectable) {
|
|
14811
|
+
isAllSelected = false;
|
|
14812
|
+
break;
|
|
14813
|
+
}
|
|
14814
|
+
} else {
|
|
14815
|
+
selectedCount++;
|
|
14816
|
+
}
|
|
14817
|
+
}
|
|
14818
|
+
if (selectedCount === 0) isAllSelected = false;
|
|
14819
|
+
this.states.isAllSelected = isAllSelected;
|
|
14820
|
+
}
|
|
14821
|
+
updateTableScrollY() {
|
|
14822
|
+
vue.nextTick(() => this.table.exposed.updateScrollY());
|
|
14823
|
+
}
|
|
14824
|
+
// 更新 DOM
|
|
14825
|
+
scheduleLayout(needUpdateColumns) {
|
|
14826
|
+
if (needUpdateColumns) {
|
|
14827
|
+
this.updateColumns();
|
|
14828
|
+
}
|
|
14829
|
+
this.table.exposed.debouncedUpdateLayout();
|
|
14830
|
+
}
|
|
14831
|
+
}
|
|
14832
|
+
|
|
14833
|
+
const useStates = (mapper, $store) => {
|
|
14834
|
+
const instance = vue.getCurrentInstance();
|
|
14835
|
+
const store = $store || instance.proxy?.store;
|
|
14836
|
+
const states = vue.reactive({});
|
|
14837
|
+
Object.keys(mapper).forEach((key) => {
|
|
14838
|
+
const value = mapper[key];
|
|
14839
|
+
if (typeof value === "string") {
|
|
14840
|
+
states[key] = vue.computed(() => {
|
|
14841
|
+
return store.states[value];
|
|
14842
|
+
});
|
|
14843
|
+
} else if (typeof value === "function") {
|
|
14844
|
+
states[key] = vue.computed(() => {
|
|
14845
|
+
return value(store.states);
|
|
14846
|
+
});
|
|
14847
|
+
} else {
|
|
14848
|
+
console.error("invalid value type");
|
|
14849
|
+
}
|
|
14850
|
+
});
|
|
14851
|
+
return states;
|
|
14852
|
+
};
|
|
14853
|
+
|
|
14854
|
+
/** @jsxImportSource vue */
|
|
14855
|
+
|
|
14856
|
+
const COMPONENT_NAME$h = 'vc-table-normal-list';
|
|
14857
|
+
const NormalList = /* @__PURE__ */ vue.defineComponent({
|
|
14858
|
+
name: COMPONENT_NAME$h,
|
|
14859
|
+
props: {
|
|
14860
|
+
data: Array,
|
|
14861
|
+
default: () => []
|
|
14862
|
+
},
|
|
14863
|
+
emits: ['row-resize'],
|
|
14864
|
+
setup(props, {
|
|
14865
|
+
emit,
|
|
14866
|
+
slots
|
|
14867
|
+
}) {
|
|
14868
|
+
const handleResize = (size, index) => {
|
|
14869
|
+
emit('row-resize', {
|
|
14870
|
+
index,
|
|
14871
|
+
size
|
|
14872
|
+
});
|
|
14873
|
+
};
|
|
14874
|
+
return () => {
|
|
14875
|
+
return props.data.map((row, index) => {
|
|
14876
|
+
return vue.createVNode(Item, {
|
|
14877
|
+
"vertical": false,
|
|
14878
|
+
"onChange": e => handleResize(e, index)
|
|
14879
|
+
}, {
|
|
14880
|
+
default: () => [slots.default?.({
|
|
14881
|
+
row,
|
|
14882
|
+
index
|
|
14883
|
+
})]
|
|
14884
|
+
});
|
|
14885
|
+
});
|
|
14886
|
+
};
|
|
14887
|
+
}
|
|
14888
|
+
});
|
|
14889
|
+
|
|
14890
|
+
const TableBody = /* @__PURE__ */ vue.defineComponent({
|
|
14891
|
+
name: 'vc-table-body',
|
|
14892
|
+
props: {
|
|
14893
|
+
store: Object,
|
|
14894
|
+
fixed: String,
|
|
14895
|
+
heightStyle: [Object, Array, String]
|
|
14896
|
+
},
|
|
14897
|
+
emits: ['scroll'],
|
|
14898
|
+
setup(props, {
|
|
14899
|
+
emit,
|
|
14900
|
+
expose
|
|
14901
|
+
}) {
|
|
14902
|
+
const instance = vue.getCurrentInstance();
|
|
14903
|
+
const table = vcHooks.getInstance('table', 'tableId');
|
|
14904
|
+
const states = useStates({
|
|
14905
|
+
data: 'data',
|
|
14906
|
+
list: 'list',
|
|
14907
|
+
columns: 'columns',
|
|
14908
|
+
leftFixedLeafCount: 'leftFixedLeafColumnsLength',
|
|
14909
|
+
rightFixedLeafCount: 'rightFixedLeafColumnsLength',
|
|
14910
|
+
columnsCount: states$ => states$.columns.length,
|
|
14911
|
+
leftFixedCount: states$ => states$.leftFixedColumns.length,
|
|
14912
|
+
rightFixedCount: states$ => states$.rightFixedColumns.length,
|
|
14913
|
+
hasExpandColumn: states$ => states$.columns.some(({
|
|
14914
|
+
type
|
|
14915
|
+
}) => type === 'expand'),
|
|
14916
|
+
firstDefaultColumnIndex: states$ => states$.columns.findIndex(({
|
|
14917
|
+
type
|
|
14918
|
+
}) => type === 'default')
|
|
14919
|
+
});
|
|
14920
|
+
const wrapper = vue.ref();
|
|
14921
|
+
vue.watch(() => props.store.states.hoverRowIndex, (v, oldV) => {
|
|
14922
|
+
if (!props.store.states.isComplex || vcShared.IS_SERVER) return;
|
|
14923
|
+
Utils.raf(() => {
|
|
14924
|
+
const rows = instance.vnode.el.querySelectorAll('.vc-table__row');
|
|
14925
|
+
const oldRow = rows[oldV];
|
|
14926
|
+
const newRow = rows[v];
|
|
14927
|
+
oldRow && $.removeClass(oldRow, 'hover-row');
|
|
14928
|
+
newRow && $.addClass(newRow, 'hover-row');
|
|
14929
|
+
});
|
|
14930
|
+
});
|
|
14931
|
+
const getValueOfRow = (row, index) => {
|
|
14932
|
+
const {
|
|
14933
|
+
primaryKey
|
|
14934
|
+
} = table.props;
|
|
14935
|
+
if (primaryKey) {
|
|
14936
|
+
return getRowValue(row, primaryKey);
|
|
14937
|
+
}
|
|
14938
|
+
return index;
|
|
14939
|
+
};
|
|
14940
|
+
const isColumnHidden = index => {
|
|
14941
|
+
if (props.fixed === 'left') {
|
|
14942
|
+
return index >= states.leftFixedLeafCount;
|
|
14943
|
+
} else if (props.fixed === 'right') {
|
|
14944
|
+
return index < states.columnsCount - states.rightFixedLeafCount;
|
|
14945
|
+
} else {
|
|
14946
|
+
return index < states.leftFixedLeafCount || index >= states.columnsCount - states.rightFixedLeafCount;
|
|
14947
|
+
}
|
|
14948
|
+
};
|
|
14949
|
+
const columnsHidden = vue.computed(() => {
|
|
14950
|
+
return states.columns.map((_, index) => isColumnHidden(index));
|
|
14951
|
+
});
|
|
14952
|
+
const getRowStyle = (row, rowIndex) => {
|
|
14953
|
+
const {
|
|
14954
|
+
rowStyle
|
|
14955
|
+
} = table.props;
|
|
14956
|
+
if (typeof rowStyle === 'function') {
|
|
14957
|
+
return rowStyle.call(null, {
|
|
14958
|
+
row,
|
|
14959
|
+
rowIndex
|
|
14960
|
+
});
|
|
14961
|
+
}
|
|
14962
|
+
return rowStyle || null;
|
|
14963
|
+
};
|
|
14964
|
+
const getRowClass = (row, rowIndex) => {
|
|
14965
|
+
const classes = ['vc-table__row'];
|
|
14966
|
+
if (table.props.highlight && row === props.store.states.currentRow) {
|
|
14967
|
+
classes.push('current-row');
|
|
14968
|
+
}
|
|
14969
|
+
if (table.props.stripe && rowIndex % 2 === 1) {
|
|
14970
|
+
classes.push('vc-table__row--striped');
|
|
14971
|
+
}
|
|
14972
|
+
const rowClass = table.props.rowClass;
|
|
14973
|
+
if (typeof rowClass === 'string') {
|
|
14974
|
+
classes.push(rowClass);
|
|
14975
|
+
} else if (typeof rowClass === 'function') {
|
|
14976
|
+
classes.push(rowClass.call(null, {
|
|
14977
|
+
row,
|
|
14978
|
+
rowIndex
|
|
14979
|
+
}));
|
|
14980
|
+
}
|
|
14981
|
+
if (props.store.states.expandRows.indexOf(row) > -1) {
|
|
14982
|
+
classes.push('expanded');
|
|
14983
|
+
}
|
|
14984
|
+
return classes;
|
|
14985
|
+
};
|
|
14986
|
+
const getCellStyle = (rowIndex, columnIndex, row, column) => {
|
|
14987
|
+
const {
|
|
14988
|
+
cellStyle
|
|
14989
|
+
} = table.props;
|
|
14990
|
+
if (typeof cellStyle === 'function') {
|
|
14991
|
+
return cellStyle.call(null, {
|
|
14992
|
+
rowIndex,
|
|
14993
|
+
columnIndex,
|
|
14994
|
+
row,
|
|
14995
|
+
column
|
|
14996
|
+
});
|
|
14997
|
+
}
|
|
14998
|
+
return cellStyle;
|
|
14999
|
+
};
|
|
15000
|
+
const getCellClass = (rowIndex, columnIndex, row, column) => {
|
|
15001
|
+
const classes = [column.realAlign, column.className];
|
|
15002
|
+
if (isColumnHidden(columnIndex)) {
|
|
15003
|
+
classes.push('is-hidden');
|
|
15004
|
+
}
|
|
15005
|
+
const cellClass = table.props.cellClass;
|
|
15006
|
+
if (typeof cellClass === 'string') {
|
|
15007
|
+
classes.push(cellClass);
|
|
15008
|
+
} else if (typeof cellClass === 'function') {
|
|
15009
|
+
classes.push(cellClass.call(null, {
|
|
15010
|
+
rowIndex,
|
|
15011
|
+
columnIndex,
|
|
15012
|
+
row,
|
|
15013
|
+
column
|
|
15014
|
+
}));
|
|
15015
|
+
}
|
|
15016
|
+
return classes.join(' ');
|
|
15017
|
+
};
|
|
15018
|
+
const handleCellMouseEnter = (e, row) => {
|
|
15019
|
+
const cell = getCell(e);
|
|
15020
|
+
if (cell) {
|
|
15021
|
+
const column = getColumnByCell(states.columns, cell);
|
|
15022
|
+
const hoverState = {
|
|
15023
|
+
cell,
|
|
15024
|
+
column,
|
|
15025
|
+
row
|
|
15026
|
+
};
|
|
15027
|
+
table.exposed.hoverState.value = hoverState;
|
|
15028
|
+
table.emit('cell-mouse-enter', hoverState.row, hoverState.column, hoverState.cell, e);
|
|
15029
|
+
}
|
|
15030
|
+
|
|
15031
|
+
// 判断是否text-overflow, 如果是就显示tooltip
|
|
15032
|
+
const cellChild = e.target.querySelector('.vc-table__cell');
|
|
15033
|
+
if (!($.hasClass(cellChild, 'vc-popover') && cellChild.childNodes.length)) {
|
|
15034
|
+
return;
|
|
15035
|
+
}
|
|
15036
|
+
// 使用范围宽度而不是滚动宽度来确定文本是否溢出,以解决潜在的FireFox bug
|
|
15037
|
+
// https://bugzilla.mozilla.org/show_bug.cgi?id=1074543#c3
|
|
15038
|
+
const range = document.createRange();
|
|
15039
|
+
range.setStart(cellChild, 0);
|
|
15040
|
+
range.setEnd(cellChild, cellChild.childNodes.length);
|
|
15041
|
+
const rangeWidth = range.getBoundingClientRect().width;
|
|
15042
|
+
const padding = (parseInt(cellChild.style.paddingLeft, 10) || 0) + (parseInt(cellChild.style.paddingRight, 10) || 0);
|
|
15043
|
+
if (rangeWidth + padding > cellChild.offsetWidth || cellChild.scrollWidth > cellChild.offsetWidth) {
|
|
15044
|
+
Popover.open({
|
|
15045
|
+
el: document.body,
|
|
15046
|
+
name: 'vc-table-popover',
|
|
15047
|
+
// 确保不重复创建
|
|
15048
|
+
triggerEl: cell,
|
|
15049
|
+
hover: true,
|
|
15050
|
+
theme: 'dark',
|
|
15051
|
+
placement: 'top',
|
|
15052
|
+
content: cell.innerText || cell.textContent,
|
|
15053
|
+
alone: true
|
|
15054
|
+
});
|
|
15055
|
+
}
|
|
15056
|
+
};
|
|
15057
|
+
const handleCellMouseLeave = e => {
|
|
15058
|
+
const cell = getCell(e);
|
|
15059
|
+
if (!cell) return;
|
|
15060
|
+
const oldHoverState = table.exposed.hoverState.value || {};
|
|
15061
|
+
table.emit('cell-mouse-leave', oldHoverState.row, oldHoverState.column, oldHoverState.cell, e);
|
|
15062
|
+
};
|
|
15063
|
+
const handleMouseEnter = lodashEs.debounce(index => {
|
|
15064
|
+
props.store.setHoverRow(index);
|
|
15065
|
+
}, 30);
|
|
15066
|
+
const handleMouseLeave = lodashEs.debounce(() => {
|
|
15067
|
+
props.store.setHoverRow(null);
|
|
15068
|
+
}, 30);
|
|
15069
|
+
const handleEvent = (e, row, name) => {
|
|
15070
|
+
const cell = getCell(e);
|
|
15071
|
+
let column;
|
|
15072
|
+
if (cell) {
|
|
15073
|
+
column = getColumnByCell(states.columns, cell);
|
|
15074
|
+
if (column) {
|
|
15075
|
+
table.emit(`cell-${name}`, row, column, cell, e);
|
|
15076
|
+
}
|
|
15077
|
+
}
|
|
15078
|
+
table.emit(`row-${name}`, row, column, e);
|
|
15079
|
+
};
|
|
15080
|
+
const handleContextMenu = (e, row) => {
|
|
15081
|
+
handleEvent(e, row, 'contextmenu');
|
|
15082
|
+
};
|
|
15083
|
+
const handleDoubleClick = (e, row) => {
|
|
15084
|
+
handleEvent(e, row, 'dblclick');
|
|
15085
|
+
};
|
|
15086
|
+
const handleClick = (e, row) => {
|
|
15087
|
+
props.store.setCurrentRow(row);
|
|
15088
|
+
handleEvent(e, row, 'click');
|
|
15089
|
+
};
|
|
15090
|
+
const renderRow = (rowData, rowIndex) => {
|
|
15091
|
+
const {
|
|
15092
|
+
data: row
|
|
15093
|
+
} = rowData;
|
|
15094
|
+
const {
|
|
15095
|
+
columns
|
|
15096
|
+
} = states;
|
|
15097
|
+
const key = getValueOfRow(row, rowIndex);
|
|
15098
|
+
return vue.createVNode("div", {
|
|
15099
|
+
"key": key,
|
|
15100
|
+
"class": [getRowClass(row, rowIndex), 'vc-table__tr'],
|
|
15101
|
+
"style": getRowStyle(row, rowIndex),
|
|
15102
|
+
"onDblclick": e => handleDoubleClick(e, row),
|
|
15103
|
+
"onClick": e => handleClick(e, row),
|
|
15104
|
+
"onContextmenu": e => handleContextMenu(e, row),
|
|
15105
|
+
"onMouseenter": () => handleMouseEnter(rowIndex),
|
|
15106
|
+
"onMouseleave": () => handleMouseLeave()
|
|
15107
|
+
}, [columns.map((column, columnIndex) => {
|
|
15108
|
+
const {
|
|
15109
|
+
realWidth,
|
|
15110
|
+
renderCell
|
|
15111
|
+
} = column;
|
|
15112
|
+
const sizeStyle = {
|
|
15113
|
+
width: `${realWidth}px`,
|
|
15114
|
+
height: `${rowData.height ? `${rowData.height}px` : 'auto'}`
|
|
15115
|
+
};
|
|
15116
|
+
if (columnsHidden.value[columnIndex]) {
|
|
15117
|
+
return vue.createVNode("div", {
|
|
15118
|
+
"style": [sizeStyle]
|
|
15119
|
+
}, null);
|
|
15120
|
+
}
|
|
15121
|
+
return vue.createVNode("div", {
|
|
15122
|
+
"style": [getCellStyle(rowIndex, columnIndex, row, column), sizeStyle],
|
|
15123
|
+
"class": [getCellClass(rowIndex, columnIndex, row, column), 'vc-table__td'],
|
|
15124
|
+
"onMouseenter": e => handleCellMouseEnter(e, row),
|
|
15125
|
+
"onMouseleave": e => handleCellMouseLeave(e)
|
|
15126
|
+
}, [renderCell({
|
|
15127
|
+
row,
|
|
15128
|
+
column,
|
|
15129
|
+
rowIndex,
|
|
15130
|
+
columnIndex,
|
|
15131
|
+
store: props.store
|
|
15132
|
+
})]);
|
|
15133
|
+
})]);
|
|
15134
|
+
};
|
|
15135
|
+
const renderMergeRow = (mergeData, mergeIndex) => {
|
|
15136
|
+
const {
|
|
15137
|
+
rows
|
|
15138
|
+
} = mergeData;
|
|
15139
|
+
return vue.createVNode("div", {
|
|
15140
|
+
"class": "vc-table__merge-row",
|
|
15141
|
+
"key": mergeIndex
|
|
15142
|
+
}, [rows.map(row => {
|
|
15143
|
+
return renderRow(row, row.index);
|
|
15144
|
+
})]);
|
|
15145
|
+
};
|
|
15146
|
+
const handleMergeRowResize = v => {
|
|
15147
|
+
states.list[v.index].rows.forEach(row => {
|
|
15148
|
+
row.heightMap[props.fixed || 'main'] = v.size;
|
|
15149
|
+
const heights = [row.heightMap.main];
|
|
15150
|
+
if (states.leftFixedCount) {
|
|
15151
|
+
heights.push(row.heightMap.left);
|
|
15152
|
+
}
|
|
15153
|
+
if (states.rightFixedCount) {
|
|
15154
|
+
heights.push(row.heightMap.right);
|
|
15155
|
+
}
|
|
15156
|
+
if (heights.every(i => !!i)) {
|
|
15157
|
+
row.height = Math.max(row.heightMap.left, row.heightMap.main, row.heightMap.right) || '';
|
|
15158
|
+
}
|
|
15159
|
+
});
|
|
15160
|
+
};
|
|
15161
|
+
expose({
|
|
15162
|
+
wrapper,
|
|
15163
|
+
getRootElement: () => instance.vnode.el
|
|
15164
|
+
});
|
|
15165
|
+
const layout = table.exposed.layout;
|
|
15166
|
+
return () => {
|
|
15167
|
+
return vue.createVNode("div", {
|
|
15168
|
+
"class": "vc-table__body"
|
|
15169
|
+
}, [table.props.height ? vue.createVNode(RecycleList, {
|
|
15170
|
+
"ref": wrapper,
|
|
15171
|
+
"data": states.list,
|
|
15172
|
+
"disabled": true,
|
|
15173
|
+
"class": "vc-table__tbody",
|
|
15174
|
+
"scrollerOptions": {
|
|
15175
|
+
barTo: `.${table.exposed.tableId}`,
|
|
15176
|
+
native: false,
|
|
15177
|
+
always: false,
|
|
15178
|
+
showBar: !props.fixed,
|
|
15179
|
+
stopPropagation: !props.fixed,
|
|
15180
|
+
trackOffsetY: [layout.states.headerHeight, 0, -layout.states.headerHeight - layout.states.footerHeight + 2,
|
|
15181
|
+
// 2为上下border的高度
|
|
15182
|
+
0]
|
|
15183
|
+
},
|
|
15184
|
+
"pageSize": table.props.rows,
|
|
15185
|
+
"onScroll": e => emit('scroll', e),
|
|
15186
|
+
"onRowResize": handleMergeRowResize,
|
|
15187
|
+
"style": props.heightStyle
|
|
15188
|
+
}, {
|
|
15189
|
+
default: ({
|
|
15190
|
+
row,
|
|
15191
|
+
index
|
|
15192
|
+
}) => renderMergeRow(row, index)
|
|
15193
|
+
}) : vue.createVNode(NormalList, {
|
|
15194
|
+
"data": states.list,
|
|
15195
|
+
"onRowResize": handleMergeRowResize
|
|
15196
|
+
}, {
|
|
15197
|
+
default: ({
|
|
15198
|
+
row,
|
|
15199
|
+
index
|
|
15200
|
+
}) => renderMergeRow(row, index)
|
|
15201
|
+
})]);
|
|
15202
|
+
};
|
|
15203
|
+
}
|
|
15204
|
+
});
|
|
15205
|
+
|
|
15206
|
+
// import TableSort from './table-sort';
|
|
15207
|
+
// import TableFilter from './table-filter';
|
|
15208
|
+
|
|
15209
|
+
const TableSort = 'div';
|
|
15210
|
+
const TableFilter = 'div';
|
|
15211
|
+
const TableHeader = /* @__PURE__ */ vue.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 = vcHooks.getInstance('table', 'tableId');
|
|
15228
|
+
const instance = vue.getCurrentInstance();
|
|
15229
|
+
const draggingColumn = vue.ref(null);
|
|
15230
|
+
const dragging = vue.ref(false);
|
|
15231
|
+
const dragState = vue.ref({});
|
|
15232
|
+
const states = useStates({
|
|
15233
|
+
columns: 'columns',
|
|
15234
|
+
isAllSelected: 'isAllSelected',
|
|
15235
|
+
leftFixedLeafCount: 'leftFixedLeafColumnsLength',
|
|
15236
|
+
rightFixedLeafCount: 'rightFixedLeafColumnsLength',
|
|
15237
|
+
isGroup: 'isGroup',
|
|
15238
|
+
headerRows: 'headerRows',
|
|
15239
|
+
columnsCount: $states => $states.columns.length,
|
|
15240
|
+
leftFixedCount: $states => $states.leftFixedColumns.length,
|
|
15241
|
+
rightFixedCount: $states => $states.rightFixedColumns.length
|
|
15242
|
+
});
|
|
15243
|
+
const isColumnHidden = index => {
|
|
15244
|
+
let start = 0;
|
|
15245
|
+
for (let i = 0; i < index; i++) {
|
|
15246
|
+
start += states.columns[i].colSpan;
|
|
15247
|
+
}
|
|
15248
|
+
const after = start + states.columns[index].colSpan - 1;
|
|
15249
|
+
if (props.fixed === true || props.fixed === 'left') {
|
|
15250
|
+
return after >= states.leftFixedLeafCount;
|
|
15251
|
+
} else if (props.fixed === 'right') {
|
|
15252
|
+
return start < states.columnsCount - states.rightFixedLeafCount;
|
|
15253
|
+
} else {
|
|
15254
|
+
return after < states.leftFixedLeafCount || start >= states.columnsCount - states.rightFixedLeafCount;
|
|
15255
|
+
}
|
|
15256
|
+
};
|
|
15257
|
+
const columnsHidden = vue.computed(() => {
|
|
15258
|
+
return states.columns.map((_, index) => isColumnHidden(index));
|
|
15259
|
+
});
|
|
15260
|
+
const getHeaderRowStyle = rowIndex => {
|
|
15261
|
+
const {
|
|
15262
|
+
headerRowStyle
|
|
15263
|
+
} = table.props;
|
|
15264
|
+
if (typeof headerRowStyle === 'function') {
|
|
15265
|
+
return headerRowStyle.call(null, {
|
|
15266
|
+
rowIndex
|
|
15267
|
+
});
|
|
15268
|
+
}
|
|
15269
|
+
return headerRowStyle;
|
|
15270
|
+
};
|
|
15271
|
+
const getHeaderRowClass = rowIndex => {
|
|
15272
|
+
const classes = [];
|
|
15273
|
+
const {
|
|
15274
|
+
headerRowClass
|
|
15275
|
+
} = table.props;
|
|
15276
|
+
if (typeof headerRowClass === 'string') {
|
|
15277
|
+
classes.push(headerRowClass);
|
|
15278
|
+
} else if (typeof headerRowClass === 'function') {
|
|
15279
|
+
classes.push(headerRowClass.call(null, {
|
|
15280
|
+
rowIndex
|
|
15281
|
+
}));
|
|
15282
|
+
}
|
|
15283
|
+
return classes.join(' ');
|
|
15284
|
+
};
|
|
15285
|
+
const getHeaderCellStyle = (rowIndex, columnIndex, row, column) => {
|
|
15286
|
+
const {
|
|
15287
|
+
headerCellStyle
|
|
15288
|
+
} = table.props;
|
|
15289
|
+
if (typeof headerCellStyle === 'function') {
|
|
15290
|
+
return headerCellStyle.call(null, {
|
|
15291
|
+
rowIndex,
|
|
15292
|
+
columnIndex,
|
|
15293
|
+
row,
|
|
15294
|
+
column
|
|
15295
|
+
});
|
|
15296
|
+
}
|
|
15297
|
+
return headerCellStyle;
|
|
15298
|
+
};
|
|
15299
|
+
const getHeaderCellClass = (rowIndex, columnIndex, row, column) => {
|
|
15300
|
+
const classes = [column.id, column.order, column.realHeaderAlign, column.className, column.labelClass];
|
|
15301
|
+
if (rowIndex === 0 && columnsHidden.value[columnIndex]) {
|
|
15302
|
+
classes.push('is-hidden');
|
|
15303
|
+
}
|
|
15304
|
+
if (!column.children) {
|
|
15305
|
+
classes.push('is-leaf');
|
|
15306
|
+
}
|
|
15307
|
+
const {
|
|
15308
|
+
headerCellClass
|
|
15309
|
+
} = table.props;
|
|
15310
|
+
if (typeof headerCellClass === 'string') {
|
|
15311
|
+
classes.push(headerCellClass);
|
|
15312
|
+
} else if (typeof headerCellClass === 'function') {
|
|
15313
|
+
classes.push(headerCellClass.call(null, {
|
|
15314
|
+
rowIndex,
|
|
15315
|
+
columnIndex,
|
|
15316
|
+
row,
|
|
15317
|
+
column
|
|
15318
|
+
}));
|
|
15319
|
+
}
|
|
15320
|
+
return classes.join(' ');
|
|
15321
|
+
};
|
|
15322
|
+
const handleHeaderClick = (e, column) => {
|
|
15323
|
+
table.emit('header-click', column, e);
|
|
15324
|
+
};
|
|
15325
|
+
const handleHeaderContextMenu = (e, column) => {
|
|
15326
|
+
table.emit('header-contextmenu', column, e);
|
|
15327
|
+
};
|
|
15328
|
+
const handleMouseDown = (e, column) => {
|
|
15329
|
+
if (vcShared.IS_SERVER) return;
|
|
15330
|
+
if (column.children && column.children.length > 0) return;
|
|
15331
|
+
/* istanbul ignore if */
|
|
15332
|
+
if (draggingColumn.value && props.border) {
|
|
15333
|
+
dragging.value = true;
|
|
15334
|
+
table.exposed.resizeProxyVisible.value = true;
|
|
15335
|
+
const tableEl = table.vnode.el;
|
|
15336
|
+
const tableLeft = tableEl.getBoundingClientRect().left;
|
|
15337
|
+
const columnEl = instance.vnode.el.querySelector(`.vc-table__th.${column.id}`);
|
|
15338
|
+
const columnRect = columnEl.getBoundingClientRect();
|
|
15339
|
+
const minLeft = columnRect.left - tableLeft + 30;
|
|
15340
|
+
$.addClass(columnEl, 'noclick');
|
|
15341
|
+
dragState.value = {
|
|
15342
|
+
startMouseLeft: e.clientX,
|
|
15343
|
+
startLeft: columnRect.right - tableLeft,
|
|
15344
|
+
startColumnLeft: columnRect.left - tableLeft,
|
|
15345
|
+
tableLeft
|
|
15346
|
+
};
|
|
15347
|
+
const resizeProxy = table.exposed.resizeProxy.value;
|
|
15348
|
+
resizeProxy.style.left = dragState.value.startLeft + 'px';
|
|
15349
|
+
document.onselectstart = () => false;
|
|
15350
|
+
document.ondragstart = () => false;
|
|
15351
|
+
const handleMouseMove = $e => {
|
|
15352
|
+
const deltaLeft = $e.clientX - dragState.value.startMouseLeft;
|
|
15353
|
+
const proxyLeft = dragState.value.startLeft + deltaLeft;
|
|
15354
|
+
resizeProxy.style.left = Math.max(minLeft, proxyLeft) + 'px';
|
|
15355
|
+
};
|
|
15356
|
+
const handleMouseUp = () => {
|
|
15357
|
+
if (dragging.value) {
|
|
15358
|
+
const {
|
|
15359
|
+
startColumnLeft,
|
|
15360
|
+
startLeft
|
|
15361
|
+
} = dragState.value;
|
|
15362
|
+
const finalLeft = parseInt(resizeProxy.style.left, 10);
|
|
15363
|
+
const columnWidth = finalLeft - startColumnLeft;
|
|
15364
|
+
column.width = columnWidth;
|
|
15365
|
+
column.realWidth = column.width;
|
|
15366
|
+
table.$emit('header-dragend', column.width, startLeft - startColumnLeft, column, event);
|
|
15367
|
+
props.store.scheduleLayout();
|
|
15368
|
+
document.body.style.cursor = '';
|
|
15369
|
+
dragging.value = false;
|
|
15370
|
+
draggingColumn.value = null;
|
|
15371
|
+
dragState.value = {};
|
|
15372
|
+
table.resizeProxyVisible = false;
|
|
15373
|
+
}
|
|
15374
|
+
document.removeEventListener('mousemove', handleMouseMove);
|
|
15375
|
+
document.removeEventListener('mouseup', handleMouseUp);
|
|
15376
|
+
document.onselectstart = null;
|
|
15377
|
+
document.ondragstart = null;
|
|
15378
|
+
setTimeout(function () {
|
|
15379
|
+
$.removeClass(columnEl, 'noclick');
|
|
15380
|
+
}, 0);
|
|
15381
|
+
};
|
|
15382
|
+
document.addEventListener('mousemove', handleMouseMove);
|
|
15383
|
+
document.addEventListener('mouseup', handleMouseUp);
|
|
15384
|
+
}
|
|
15385
|
+
};
|
|
15386
|
+
const handleMouseMove = (event, column) => {
|
|
15387
|
+
if (column.children && column.children.length > 0) return;
|
|
15388
|
+
let target = event.target;
|
|
15389
|
+
while (target && !target.classList?.contains?.('vc-table__th')) {
|
|
15390
|
+
target = target.parentNode;
|
|
15391
|
+
}
|
|
15392
|
+
if (!column || !column.resizable) return;
|
|
15393
|
+
if (!dragging.value && props.border) {
|
|
15394
|
+
const rect = target.getBoundingClientRect();
|
|
15395
|
+
const bodyStyle = document.body.style;
|
|
15396
|
+
if (rect.width > 12 && rect.right - event.pageX < 8) {
|
|
15397
|
+
bodyStyle.cursor = 'col-resize';
|
|
15398
|
+
if ($.hasClass(target, 'is-sortable')) {
|
|
15399
|
+
target.style.cursor = 'col-resize';
|
|
15400
|
+
}
|
|
15401
|
+
draggingColumn.value = column;
|
|
15402
|
+
} else if (!dragging.value) {
|
|
15403
|
+
bodyStyle.cursor = '';
|
|
15404
|
+
if ($.hasClass(target, 'is-sortable')) {
|
|
15405
|
+
target.style.cursor = 'pointer';
|
|
15406
|
+
}
|
|
15407
|
+
draggingColumn.value = null;
|
|
15408
|
+
}
|
|
15409
|
+
}
|
|
15410
|
+
};
|
|
15411
|
+
const handleMouseOut = () => {
|
|
15412
|
+
if (vcShared.IS_SERVER) return;
|
|
15413
|
+
document.body.style.cursor = '';
|
|
15414
|
+
};
|
|
15415
|
+
const handleSort = (prop, order) => {
|
|
15416
|
+
table.emit('sort-change', {
|
|
15417
|
+
prop,
|
|
15418
|
+
order
|
|
15419
|
+
});
|
|
15420
|
+
};
|
|
15421
|
+
const handleFilter = (column, value) => {
|
|
15422
|
+
const {
|
|
15423
|
+
filter
|
|
15424
|
+
} = column;
|
|
15425
|
+
filter && filter(value);
|
|
15426
|
+
};
|
|
15427
|
+
const handleCellMouseEnter = (e, column) => {
|
|
15428
|
+
Popover.open({
|
|
15429
|
+
el: document.body,
|
|
15430
|
+
name: 'vc-table-header-popover',
|
|
15431
|
+
// 确保不重复创建
|
|
15432
|
+
triggerEl: e.currentTarget,
|
|
15433
|
+
hover: true,
|
|
15434
|
+
theme: 'dark',
|
|
15435
|
+
placement: 'top',
|
|
15436
|
+
content: column.tooltip,
|
|
15437
|
+
alone: true
|
|
15438
|
+
});
|
|
15439
|
+
};
|
|
15440
|
+
return () => {
|
|
15441
|
+
return vue.createVNode("div", {
|
|
15442
|
+
"class": "vc-table__header"
|
|
15443
|
+
}, [vue.createVNode("div", {
|
|
15444
|
+
"class": [{
|
|
15445
|
+
'is-group': states.isGroup
|
|
15446
|
+
}, 'vc-table__thead']
|
|
15447
|
+
}, [
|
|
15448
|
+
// renderList
|
|
15449
|
+
states.headerRows.map((columns, rowIndex) => vue.createVNode("div", {
|
|
15450
|
+
"style": getHeaderRowStyle(rowIndex),
|
|
15451
|
+
"class": [getHeaderRowClass(rowIndex), 'vc-table__tr']
|
|
15452
|
+
}, [columns.map((column, columnIndex) => vue.createVNode("div", {
|
|
15453
|
+
"onMousemove": e => handleMouseMove(e, column),
|
|
15454
|
+
"onMouseout": handleMouseOut,
|
|
15455
|
+
"onMousedown": e => handleMouseDown(e, column),
|
|
15456
|
+
"onClick": e => handleHeaderClick(e, column),
|
|
15457
|
+
"onContextmenu": e => handleHeaderContextMenu(e, column),
|
|
15458
|
+
"style": [getHeaderCellStyle(rowIndex, columnIndex, columns, column), {
|
|
15459
|
+
width: `${column.realWidth}px`
|
|
15460
|
+
}],
|
|
15461
|
+
"class": [getHeaderCellClass(rowIndex, columnIndex, columns, column), 'vc-table__th'],
|
|
15462
|
+
"key": column.id
|
|
15463
|
+
}, [vue.createVNode("div", {
|
|
15464
|
+
"class": ['vc-table__cell',
|
|
15465
|
+
// {
|
|
15466
|
+
// "highlight": column.filteredValue && column.filteredValue.length > 0
|
|
15467
|
+
// },
|
|
15468
|
+
column.labelClass]
|
|
15469
|
+
}, [column.renderHeader ? column.renderHeader({
|
|
15470
|
+
column,
|
|
15471
|
+
columnIndex,
|
|
15472
|
+
store: props.store
|
|
15473
|
+
}) : column.label, column.tooltip ? vue.createVNode(Icon, {
|
|
15474
|
+
"type": "o-info",
|
|
15475
|
+
"onMouseenter": e => handleCellMouseEnter(e, column)
|
|
15476
|
+
}, null) : null, column.sortable ? vue.createVNode(TableSort, {
|
|
15477
|
+
"order": column.prop === props.defaultSort.prop ? props.defaultSort.order : '',
|
|
15478
|
+
"onClick": order => handleSort(column.prop, order)
|
|
15479
|
+
}, null) : null, column.filters ? vue.createVNode(TableFilter, {
|
|
15480
|
+
"data": column.filters,
|
|
15481
|
+
"value": column.filteredValue,
|
|
15482
|
+
"icon": column.filterIcon,
|
|
15483
|
+
"portalClass": column.filterPopupClass,
|
|
15484
|
+
"multiple": column.filterMultiple,
|
|
15485
|
+
"onChange": v => handleFilter(column, v)
|
|
15486
|
+
}, null) : null])]))]))])]);
|
|
15487
|
+
};
|
|
15488
|
+
}
|
|
15489
|
+
});
|
|
15490
|
+
|
|
15491
|
+
const TableFooter = /* @__PURE__ */ vue.defineComponent({
|
|
15492
|
+
name: 'vc-table-footer',
|
|
15493
|
+
props: {
|
|
15494
|
+
fixed: [String, Boolean],
|
|
15495
|
+
store: {
|
|
15496
|
+
type: Object,
|
|
15497
|
+
required: true
|
|
15498
|
+
},
|
|
15499
|
+
getSummary: Function,
|
|
15500
|
+
sumText: String,
|
|
15501
|
+
border: Boolean
|
|
15502
|
+
},
|
|
15503
|
+
setup(props) {
|
|
15504
|
+
const states = useStates({
|
|
15505
|
+
data: 'data',
|
|
15506
|
+
columns: 'columns',
|
|
15507
|
+
isAllSelected: 'isAllSelected',
|
|
15508
|
+
leftFixedLeafCount: 'leftFixedLeafColumnsLength',
|
|
15509
|
+
rightFixedLeafCount: 'rightFixedLeafColumnsLength',
|
|
15510
|
+
columnsCount: $states => $states.columns.length,
|
|
15511
|
+
leftFixedCount: $states => $states.leftFixedColumns.length,
|
|
15512
|
+
rightFixedCount: $states => $states.rightFixedColumns.length
|
|
15513
|
+
});
|
|
15514
|
+
const isColumnHidden = (column, index) => {
|
|
15515
|
+
if (props.fixed === true || props.fixed === 'left') {
|
|
15516
|
+
return index >= states.leftFixedLeafCount;
|
|
15517
|
+
} else if (props.fixed === 'right') {
|
|
15518
|
+
let before = 0;
|
|
15519
|
+
for (let i = 0; i < index; i++) {
|
|
15520
|
+
before += states.columns[i].colSpan;
|
|
15521
|
+
}
|
|
15522
|
+
return before < states.columnsCount - states.rightFixedLeafCount;
|
|
15523
|
+
} else if (!props.fixed && column.fixed) {
|
|
15524
|
+
return true;
|
|
15525
|
+
} else {
|
|
15526
|
+
return index < states.leftFixedCount || index >= states.columnsCount - states.rightFixedCount;
|
|
15527
|
+
}
|
|
15528
|
+
};
|
|
15529
|
+
const columnsHidden = vue.computed(() => states.columns.map(isColumnHidden));
|
|
15530
|
+
const getRowClasses = (column, columnIndex) => {
|
|
15531
|
+
const classes = [column.realAlign, column.labelClass];
|
|
15532
|
+
if (column.className) {
|
|
15533
|
+
classes.push(column.className);
|
|
15534
|
+
}
|
|
15535
|
+
if (columnsHidden.value[columnIndex]) {
|
|
15536
|
+
classes.push('is-hidden');
|
|
15537
|
+
}
|
|
15538
|
+
if (!column.children) {
|
|
15539
|
+
classes.push('is-leaf');
|
|
15540
|
+
}
|
|
15541
|
+
return classes;
|
|
15542
|
+
};
|
|
15543
|
+
const sums = vue.computed(() => {
|
|
15544
|
+
let v = [];
|
|
15545
|
+
if (props.getSummary) {
|
|
15546
|
+
v = props.getSummary({
|
|
15547
|
+
columns: states.columns,
|
|
15548
|
+
data: states.data
|
|
15549
|
+
});
|
|
15550
|
+
} else {
|
|
15551
|
+
states.columns.forEach((column, index) => {
|
|
15552
|
+
if (index === 0) {
|
|
15553
|
+
v[index] = props.sumText;
|
|
15554
|
+
return;
|
|
15555
|
+
}
|
|
15556
|
+
const values = states.data.map(item => Number(item[column.prop]));
|
|
15557
|
+
const precisions = [];
|
|
15558
|
+
let notNumber = true;
|
|
15559
|
+
values.forEach(value => {
|
|
15560
|
+
if (!isNaN(value)) {
|
|
15561
|
+
notNumber = false;
|
|
15562
|
+
const decimal = ('' + value).split('.')[1];
|
|
15563
|
+
precisions.push(decimal ? decimal.length : 0);
|
|
15564
|
+
}
|
|
15565
|
+
});
|
|
15566
|
+
const precision = Math.max.apply(null, precisions);
|
|
15567
|
+
if (!notNumber) {
|
|
15568
|
+
v[index] = values.reduce((prev, curr) => {
|
|
15569
|
+
const value = Number(curr);
|
|
15570
|
+
if (!isNaN(value)) {
|
|
15571
|
+
return parseFloat((prev + curr).toFixed(Math.min(precision, 20)));
|
|
15572
|
+
} else {
|
|
15573
|
+
return prev;
|
|
15574
|
+
}
|
|
15575
|
+
}, 0);
|
|
15576
|
+
} else {
|
|
15577
|
+
v[index] = '';
|
|
15578
|
+
}
|
|
15579
|
+
});
|
|
15580
|
+
}
|
|
15581
|
+
return v;
|
|
15582
|
+
});
|
|
15583
|
+
return () => {
|
|
15584
|
+
return vue.createVNode("div", {
|
|
15585
|
+
"class": "vc-table__footer",
|
|
15586
|
+
"cellspacing": "0",
|
|
15587
|
+
"cellpadding": "0",
|
|
15588
|
+
"border": "0"
|
|
15589
|
+
}, [vue.createVNode("div", {
|
|
15590
|
+
"class": "vc-table__tbody"
|
|
15591
|
+
}, [vue.createVNode("div", {
|
|
15592
|
+
"class": "vc-table__tr"
|
|
15593
|
+
}, [states.columns.map((column, columnIndex) => vue.createVNode("div", {
|
|
15594
|
+
"key": columnIndex,
|
|
15595
|
+
"class": [getRowClasses(column, columnIndex), 'vc-table__td'],
|
|
15596
|
+
"style": [{
|
|
15597
|
+
width: `${column.realWidth}px`
|
|
15598
|
+
}]
|
|
15599
|
+
}, [vue.createVNode("div", {
|
|
15600
|
+
"class": ['vc-table__cell', column.labelClass]
|
|
15601
|
+
}, [sums.value[columnIndex]])]))])])]);
|
|
15602
|
+
};
|
|
15603
|
+
}
|
|
15604
|
+
});
|
|
15605
|
+
|
|
15606
|
+
const props$c = {
|
|
15607
|
+
data: {
|
|
15608
|
+
type: Array,
|
|
15609
|
+
default: () => []
|
|
15610
|
+
},
|
|
15611
|
+
width: [String, Number],
|
|
15612
|
+
height: [String, Number],
|
|
15613
|
+
maxHeight: [String, Number],
|
|
15614
|
+
// 列的宽度是否自撑开
|
|
15615
|
+
fit: {
|
|
15616
|
+
type: Boolean,
|
|
15617
|
+
default: true
|
|
15618
|
+
},
|
|
15619
|
+
// 是否为斑马纹 table
|
|
15620
|
+
stripe: Boolean,
|
|
15621
|
+
// 是否带有纵向边框
|
|
15622
|
+
border: Boolean,
|
|
15623
|
+
// 非常影响表格虚拟滚动的性能,按容器的高度手动优化该值
|
|
15624
|
+
// 后续考虑移除,动态计算
|
|
15625
|
+
rows: {
|
|
15626
|
+
type: Number,
|
|
15627
|
+
default: 10
|
|
15628
|
+
},
|
|
15629
|
+
primaryKey: [String, Function],
|
|
15630
|
+
// 是否显示表头
|
|
15631
|
+
showHeader: {
|
|
15632
|
+
type: Boolean,
|
|
15633
|
+
default: true
|
|
15634
|
+
},
|
|
15635
|
+
showSummary: Boolean,
|
|
15636
|
+
sumText: String,
|
|
15637
|
+
getSummary: Function,
|
|
15638
|
+
rowClass: [String, Function],
|
|
15639
|
+
rowStyle: [Object, Function],
|
|
15640
|
+
cellClass: [String, Function],
|
|
15641
|
+
cellStyle: [Object, Function],
|
|
15642
|
+
headerRowClass: [String, Function],
|
|
15643
|
+
headerRowStyle: [Object, Function],
|
|
15644
|
+
headerCellClass: [String, Function],
|
|
15645
|
+
headerCellStyle: [Object, Function],
|
|
15646
|
+
// 当前对应的currentRow是否可高亮
|
|
15647
|
+
highlight: Boolean,
|
|
15648
|
+
// TODO: 支持数组
|
|
15649
|
+
currentRowValue: [String, Number],
|
|
15650
|
+
emptyText: [String, Function],
|
|
15651
|
+
expandRowValue: Array,
|
|
15652
|
+
defaultExpandAll: Boolean,
|
|
15653
|
+
/**
|
|
15654
|
+
* 在多选表格中,当仅有部分行被选中时,点击表头的多选框时的行为。
|
|
15655
|
+
* 若为 true,则选中所有行;若为 false,则取消选择所有行
|
|
15656
|
+
*/
|
|
15657
|
+
indeterminate: {
|
|
15658
|
+
type: Boolean,
|
|
15659
|
+
default: true
|
|
15660
|
+
},
|
|
15661
|
+
lazy: Boolean,
|
|
15662
|
+
// 展示树形数据时,树节点的缩进
|
|
15663
|
+
indent: {
|
|
15664
|
+
type: Number,
|
|
15665
|
+
default: 16
|
|
15666
|
+
},
|
|
15667
|
+
treeMap: {
|
|
15668
|
+
type: Object,
|
|
15669
|
+
default: () => {
|
|
15670
|
+
return {
|
|
15671
|
+
hasChildren: "hasChildren",
|
|
15672
|
+
children: "children"
|
|
15673
|
+
};
|
|
15674
|
+
}
|
|
15675
|
+
},
|
|
15676
|
+
// 树形表格子集是否需要显示选择按钮
|
|
15677
|
+
expandSelectable: {
|
|
15678
|
+
type: Boolean,
|
|
15679
|
+
default: true
|
|
15680
|
+
},
|
|
15681
|
+
loadExpand: Function,
|
|
15682
|
+
getSpan: Function,
|
|
15683
|
+
placeholder: {
|
|
15684
|
+
type: [String, Function],
|
|
15685
|
+
default: "--"
|
|
15686
|
+
},
|
|
15687
|
+
/**
|
|
15688
|
+
* 排序全部交给外部处理,内部不处理数据,只做交互
|
|
15689
|
+
* 列与列之间互斥
|
|
15690
|
+
*/
|
|
15691
|
+
defaultSort: {
|
|
15692
|
+
type: Object,
|
|
15693
|
+
default: () => ({})
|
|
15694
|
+
}
|
|
15695
|
+
};
|
|
15696
|
+
|
|
15697
|
+
/** @jsxImportSource vue */
|
|
15698
|
+
|
|
15699
|
+
const COMPONENT_NAME$g = 'vc-table';
|
|
15700
|
+
const Table = /* @__PURE__ */ vue.defineComponent({
|
|
15701
|
+
name: COMPONENT_NAME$g,
|
|
15702
|
+
props: props$c,
|
|
15703
|
+
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'],
|
|
15704
|
+
setup(props, {
|
|
15705
|
+
slots,
|
|
15706
|
+
expose
|
|
15707
|
+
}) {
|
|
15708
|
+
const instance = vue.getCurrentInstance();
|
|
15709
|
+
const store = new Store({
|
|
15710
|
+
table: instance
|
|
15711
|
+
});
|
|
15712
|
+
const {
|
|
15713
|
+
layout
|
|
15714
|
+
} = store;
|
|
15715
|
+
|
|
15716
|
+
// 由table-column控制
|
|
15717
|
+
const renderExpanded = vue.ref(null);
|
|
15718
|
+
const resizeProxyVisible = vue.ref(false);
|
|
15719
|
+
const resizeState = vue.ref({
|
|
15720
|
+
width: null,
|
|
15721
|
+
height: null
|
|
15722
|
+
});
|
|
15723
|
+
|
|
15724
|
+
// refs
|
|
15725
|
+
const hiddenColumns = vue.ref(null);
|
|
15726
|
+
const headerWrapper = vue.ref(null);
|
|
15727
|
+
const tableHeader = vue.ref(null);
|
|
15728
|
+
const scroller = vue.ref(null);
|
|
15729
|
+
const body = vue.ref();
|
|
15730
|
+
const emptyBlock = vue.ref(null);
|
|
15731
|
+
const appendWrapper = vue.ref(null);
|
|
15732
|
+
const footerWrapper = vue.ref(null);
|
|
15733
|
+
const leftFixedWrapper = vue.ref(null);
|
|
15734
|
+
const leftFixedHeaderWrapper = vue.ref(null);
|
|
15735
|
+
const leftFixedTableHeader = vue.ref(null);
|
|
15736
|
+
const leftFixedBodyWrapper = vue.ref(null);
|
|
15737
|
+
const leftFixedBody = vue.ref(null);
|
|
15738
|
+
const leftFixedFooterWrapper = vue.ref(null);
|
|
15739
|
+
const rightFixedWrapper = vue.ref(null);
|
|
15740
|
+
const rightFixedHeaderWrapper = vue.ref(null);
|
|
15741
|
+
const rightFixedTableHeader = vue.ref(null);
|
|
15742
|
+
const rightFixedBodyWrapper = vue.ref(null);
|
|
15743
|
+
const rightFixedBody = vue.ref(null);
|
|
15744
|
+
const rightFixedFooterWrapper = vue.ref(null);
|
|
15745
|
+
const resizeProxy = vue.ref(null);
|
|
15746
|
+
const scrollPosition = vue.ref('left');
|
|
15747
|
+
const hoverState = vue.ref(null);
|
|
15748
|
+
const isReady = vue.ref(false);
|
|
15749
|
+
const states = useStates({
|
|
15750
|
+
columns: 'columns',
|
|
15751
|
+
leftFixedColumns: 'leftFixedColumns',
|
|
15752
|
+
rightFixedColumns: 'rightFixedColumns',
|
|
15753
|
+
isGroup: 'isGroup'
|
|
15754
|
+
}, store);
|
|
15755
|
+
const classes = vue.computed(() => {
|
|
15756
|
+
return {
|
|
15757
|
+
'vc-table--fit': props.fit,
|
|
15758
|
+
'vc-table--striped': props.stripe,
|
|
15759
|
+
'vc-table--border': props.border || states.isGroup,
|
|
15760
|
+
'vc-table--group': states.isGroup,
|
|
15761
|
+
'vc-table--fluid-height': props.maxHeight,
|
|
15762
|
+
'vc-table--scrollable-x': layout.states.scrollX,
|
|
15763
|
+
'vc-table--scrollable-y': layout.states.scrollY,
|
|
15764
|
+
'vc-table--enable-row-hover': !store.states.isComplex,
|
|
15765
|
+
'vc-table--enable-row-transition': (store.states.data || []).length !== 0 && (store.states.data || []).length < 100
|
|
15766
|
+
};
|
|
15767
|
+
});
|
|
15768
|
+
const bodyXWrapper = vue.computed(() => {
|
|
15769
|
+
return scroller.value?.wrapper;
|
|
15770
|
+
});
|
|
15771
|
+
const bodyYWrapper = vue.computed(() => {
|
|
15772
|
+
return !props.height ? bodyXWrapper.value : body.value.getRootElement().querySelector('.vc-scroller__wrapper');
|
|
15773
|
+
});
|
|
15774
|
+
const shouldUpdateHeight = vue.computed(() => {
|
|
15775
|
+
return props.height || props.maxHeight || states.leftFixedColumns.length > 0 || states.rightFixedColumns.length > 0;
|
|
15776
|
+
});
|
|
15777
|
+
const bodyWidthStyle = vue.computed(() => {
|
|
15778
|
+
const {
|
|
15779
|
+
bodyWidth: $bodyWidth
|
|
15780
|
+
} = layout.states;
|
|
15781
|
+
return {
|
|
15782
|
+
width: $bodyWidth ? $bodyWidth + 'px' : ''
|
|
15783
|
+
};
|
|
15784
|
+
});
|
|
15785
|
+
const bodyHeightStyle = vue.computed(() => {
|
|
15786
|
+
const {
|
|
15787
|
+
headerHeight,
|
|
15788
|
+
bodyHeight: $bodyHeight,
|
|
15789
|
+
footerHeight
|
|
15790
|
+
} = layout.states;
|
|
15791
|
+
if (props.height) {
|
|
15792
|
+
return {
|
|
15793
|
+
height: $bodyHeight ? $bodyHeight + 'px' : ''
|
|
15794
|
+
};
|
|
15795
|
+
} else if (props.maxHeight) {
|
|
15796
|
+
const maxHeight = parseHeight(props.maxHeight);
|
|
15797
|
+
if (maxHeight) {
|
|
15798
|
+
return {
|
|
15799
|
+
'max-height': maxHeight - (footerHeight || 0) - (props.showHeader ? headerHeight || 0 : 0) + 'px'
|
|
15800
|
+
};
|
|
15801
|
+
}
|
|
15802
|
+
}
|
|
15803
|
+
return {};
|
|
15804
|
+
});
|
|
15805
|
+
const fixedHeightStyle = vue.computed(() => {
|
|
15806
|
+
if (props.maxHeight) {
|
|
15807
|
+
if (props.showSummary) {
|
|
15808
|
+
return {
|
|
15809
|
+
bottom: 0
|
|
15810
|
+
};
|
|
15811
|
+
}
|
|
15812
|
+
return {
|
|
15813
|
+
bottom: layout.states.scrollX && props.data.length ? 0 : ''
|
|
15814
|
+
};
|
|
15815
|
+
} else {
|
|
15816
|
+
if (props.showSummary) {
|
|
15817
|
+
return {
|
|
15818
|
+
height: layout.states.tableHeight ? layout.states.tableHeight + 'px' : ''
|
|
15819
|
+
};
|
|
15820
|
+
}
|
|
15821
|
+
return {
|
|
15822
|
+
height: layout.states.viewportHeight ? layout.states.viewportHeight + 'px' : ''
|
|
15823
|
+
};
|
|
15824
|
+
}
|
|
15825
|
+
});
|
|
15826
|
+
let isUnMount = false;
|
|
15827
|
+
const updateScrollY = () => {
|
|
15828
|
+
if (isUnMount) return;
|
|
15829
|
+
layout.updateScrollY();
|
|
15830
|
+
layout.updateColumnsWidth();
|
|
15831
|
+
};
|
|
15832
|
+
|
|
15833
|
+
/**
|
|
15834
|
+
* 对 Table 进行重新布局。
|
|
15835
|
+
* 当 Table 或其祖先元素由隐藏切换为显示时,可能需要调用此方法
|
|
15836
|
+
*/
|
|
15837
|
+
const refreshLayout = () => {
|
|
15838
|
+
if (isUnMount) return;
|
|
15839
|
+
layout.updateColumnsWidth();
|
|
15840
|
+
if (shouldUpdateHeight.value) {
|
|
15841
|
+
layout.updateElsHeight();
|
|
15842
|
+
}
|
|
15843
|
+
scroller.value?.refresh?.();
|
|
15844
|
+
};
|
|
15845
|
+
// 用于多选表格,切换所有行的选中状态
|
|
15846
|
+
const toggleAllSelection = () => {
|
|
15847
|
+
store.toggleAllSelection();
|
|
15848
|
+
};
|
|
15849
|
+
|
|
15850
|
+
// 用于单选表格,设定某一行为选中行,如果调用时不加参数,则会取消目前高亮行的选中状态。
|
|
15851
|
+
const setCurrentRow = row => {
|
|
15852
|
+
store.setCurrentRow(row);
|
|
15853
|
+
};
|
|
15854
|
+
|
|
15855
|
+
// 用于多选表格,切换某一行的选中状态,如果使用了第二个参数,则是设置这一行选中与否(selected 为 true 则选中)
|
|
15856
|
+
const toggleRowSelection = (row, selected, emitChange) => {
|
|
15857
|
+
store.toggleRowSelection(row, selected, emitChange);
|
|
15858
|
+
store.updateAllSelected();
|
|
15859
|
+
};
|
|
15860
|
+
|
|
15861
|
+
// 用于可展开表格与树形表格,切换某一行的展开状态;如果使用了第二个参数,则是设置这一行展开与否(expanded 为 true 则展开)
|
|
15862
|
+
const toggleRowExpansion = (row, expanded) => {
|
|
15863
|
+
store.toggleRowExpansionAdapter(row, expanded);
|
|
15864
|
+
};
|
|
15865
|
+
|
|
15866
|
+
// 用于多选表格,清空用户的选择
|
|
15867
|
+
const clearSelection = () => {
|
|
15868
|
+
store.clearSelection();
|
|
15869
|
+
};
|
|
15870
|
+
|
|
15871
|
+
// 同步滚动
|
|
15872
|
+
const handleScollX = lodashEs.throttle(() => {
|
|
15873
|
+
if (!bodyXWrapper.value) return;
|
|
15874
|
+
const {
|
|
15875
|
+
scrollLeft,
|
|
15876
|
+
offsetWidth,
|
|
15877
|
+
scrollWidth
|
|
15878
|
+
} = bodyXWrapper.value;
|
|
15879
|
+
if (headerWrapper.value) headerWrapper.value.scrollLeft = scrollLeft;
|
|
15880
|
+
if (footerWrapper.value) footerWrapper.value.scrollLeft = scrollLeft;
|
|
15881
|
+
const maxScrollLeftPosition = scrollWidth - offsetWidth - 1;
|
|
15882
|
+
if (scrollLeft >= maxScrollLeftPosition) {
|
|
15883
|
+
scrollPosition.value = 'right';
|
|
15884
|
+
} else if (scrollLeft === 0) {
|
|
15885
|
+
scrollPosition.value = 'left';
|
|
15886
|
+
} else {
|
|
15887
|
+
scrollPosition.value = 'middle';
|
|
15888
|
+
}
|
|
15889
|
+
if (!props.height) {
|
|
15890
|
+
leftFixedBody.value.getRootElement().scrollTop = bodyXWrapper.value.scrollTop;
|
|
15891
|
+
rightFixedBody.value.getRootElement().scrollTop = bodyXWrapper.value.scrollTop;
|
|
15892
|
+
}
|
|
15893
|
+
}, 20);
|
|
15894
|
+
const handleScollY = e => {
|
|
15895
|
+
const v = {
|
|
15896
|
+
x: e.target.scrollLeft,
|
|
15897
|
+
y: e.target.scrollTop
|
|
15898
|
+
};
|
|
15899
|
+
rightFixedBody.value?.wrapper.scrollTo(v, true);
|
|
15900
|
+
leftFixedBody.value?.wrapper.scrollTo(v, true);
|
|
15901
|
+
};
|
|
15902
|
+
const handleResize = () => {
|
|
15903
|
+
if (!isReady.value) return;
|
|
15904
|
+
let shouldUpdateLayout = false;
|
|
15905
|
+
const el = instance.vnode.el;
|
|
15906
|
+
const {
|
|
15907
|
+
width: oldWidth,
|
|
15908
|
+
height: oldHeight
|
|
15909
|
+
} = resizeState.value;
|
|
15910
|
+
const width = el.offsetWidth;
|
|
15911
|
+
if (oldWidth !== width) {
|
|
15912
|
+
shouldUpdateLayout = true;
|
|
15913
|
+
}
|
|
15914
|
+
const height = el.offsetHeight;
|
|
15915
|
+
if ((props.height || shouldUpdateHeight.value) && oldHeight !== height) {
|
|
15916
|
+
shouldUpdateLayout = true;
|
|
15917
|
+
}
|
|
15918
|
+
if (shouldUpdateLayout) {
|
|
15919
|
+
resizeState.value = {
|
|
15920
|
+
width,
|
|
15921
|
+
height
|
|
15922
|
+
};
|
|
15923
|
+
refreshLayout();
|
|
15924
|
+
}
|
|
15925
|
+
};
|
|
15926
|
+
const handleMouseLeave = () => {
|
|
15927
|
+
store.setHoverRow(null);
|
|
15928
|
+
if (hoverState.value) hoverState.value = null;
|
|
15929
|
+
};
|
|
15930
|
+
const handleMousewheel = (deltaX, deltaY) => {
|
|
15931
|
+
const {
|
|
15932
|
+
scrollWidth: contentW,
|
|
15933
|
+
clientWidth: wrapperW,
|
|
15934
|
+
scrollLeft: scrollX
|
|
15935
|
+
} = bodyXWrapper.value;
|
|
15936
|
+
const {
|
|
15937
|
+
scrollHeight: contentH,
|
|
15938
|
+
clientHeight: wrapperH,
|
|
15939
|
+
scrollTop: scrollY
|
|
15940
|
+
} = bodyYWrapper.value;
|
|
15941
|
+
if (Math.abs(deltaY) > Math.abs(deltaX) && contentH > wrapperH) {
|
|
15942
|
+
// 虚拟滚动
|
|
15943
|
+
if (props.height) {
|
|
15944
|
+
body.value.wrapper?.scrollTo({
|
|
15945
|
+
y: scrollY + deltaY
|
|
15946
|
+
});
|
|
15947
|
+
} else {
|
|
15948
|
+
scroller.value.scrollTo({
|
|
15949
|
+
y: scrollY + deltaY
|
|
15950
|
+
});
|
|
15951
|
+
}
|
|
15952
|
+
} else if (deltaX && contentW > wrapperW) {
|
|
15953
|
+
scroller.value.scrollTo({
|
|
15954
|
+
x: scrollX + deltaX
|
|
15955
|
+
});
|
|
15956
|
+
}
|
|
15957
|
+
};
|
|
15958
|
+
let wheels = [];
|
|
15959
|
+
const bindEvents = () => {
|
|
15960
|
+
if (props.fit) {
|
|
15961
|
+
helperResize.Resize.on(instance.vnode.el, handleResize);
|
|
15962
|
+
}
|
|
15963
|
+
vue.nextTick(() => {
|
|
15964
|
+
wheels = [headerWrapper, footerWrapper, leftFixedWrapper, rightFixedWrapper].map(wrapper => {
|
|
15965
|
+
if (!wrapper.value) return;
|
|
15966
|
+
const wheel = new helperWheel.Wheel(wrapper.value, {
|
|
15967
|
+
shouldWheelX: delta => {
|
|
15968
|
+
const {
|
|
15969
|
+
scrollWidth: contentW,
|
|
15970
|
+
clientWidth: wrapperW,
|
|
15971
|
+
scrollLeft: scrollX
|
|
15972
|
+
} = bodyXWrapper.value;
|
|
15973
|
+
if (wrapperW === contentW) {
|
|
15974
|
+
return false;
|
|
15975
|
+
}
|
|
15976
|
+
delta = Math.round(delta);
|
|
15977
|
+
if (delta === 0) {
|
|
15978
|
+
return false;
|
|
15979
|
+
}
|
|
15980
|
+
return delta < 0 && scrollX > 0 || delta >= 0 && scrollX < contentW - wrapperW;
|
|
15981
|
+
},
|
|
15982
|
+
shouldWheelY: delta => {
|
|
15983
|
+
const {
|
|
15984
|
+
scrollHeight: contentH,
|
|
15985
|
+
clientHeight: wrapperH,
|
|
15986
|
+
scrollTop: scrollY
|
|
15987
|
+
} = bodyYWrapper.value;
|
|
15988
|
+
if (wrapperH === contentH) {
|
|
15989
|
+
return false;
|
|
15990
|
+
}
|
|
15991
|
+
delta = Math.round(delta);
|
|
15992
|
+
if (delta === 0) {
|
|
15993
|
+
return false;
|
|
15994
|
+
}
|
|
15995
|
+
return delta < 0 && scrollY > 0 || delta >= 0 && scrollY < contentH - wrapperH;
|
|
15996
|
+
}
|
|
15997
|
+
});
|
|
15998
|
+
wheel.on(handleMousewheel);
|
|
15999
|
+
return wheel;
|
|
16000
|
+
});
|
|
16001
|
+
});
|
|
16002
|
+
};
|
|
16003
|
+
const unbindEvents = () => {
|
|
16004
|
+
if (props.fit) {
|
|
16005
|
+
helperResize.Resize.off(instance.vnode.el, handleResize);
|
|
16006
|
+
}
|
|
16007
|
+
wheels.forEach(wheel => wheel && wheel.off(handleMousewheel));
|
|
16008
|
+
};
|
|
16009
|
+
const debouncedUpdateLayout = lodashEs.debounce(() => refreshLayout(), 50);
|
|
16010
|
+
vue.watch(() => props.height, v => {
|
|
16011
|
+
layout.setHeight(v);
|
|
16012
|
+
}, {
|
|
16013
|
+
immediate: true
|
|
16014
|
+
});
|
|
16015
|
+
vue.watch(() => props.maxHeight, v => {
|
|
16016
|
+
layout.setMaxHeight(v);
|
|
16017
|
+
}, {
|
|
16018
|
+
immediate: true
|
|
16019
|
+
});
|
|
16020
|
+
vue.watch(() => props.currentRowValue, v => {
|
|
16021
|
+
if (!props.primaryKey) return;
|
|
16022
|
+
store.current.reset(v);
|
|
16023
|
+
}, {
|
|
16024
|
+
immediate: true
|
|
16025
|
+
});
|
|
16026
|
+
vue.watch(() => props.data, v => {
|
|
16027
|
+
store.setData(v);
|
|
16028
|
+
isReady.value && vue.nextTick(refreshLayout);
|
|
16029
|
+
}, {
|
|
16030
|
+
immediate: true
|
|
16031
|
+
});
|
|
16032
|
+
vue.watch(() => props.expandRowValue, v => {
|
|
16033
|
+
if (v) {
|
|
16034
|
+
store.setExpandRowValueAdapter(v);
|
|
16035
|
+
}
|
|
16036
|
+
}, {
|
|
16037
|
+
immediate: true
|
|
16038
|
+
});
|
|
16039
|
+
|
|
16040
|
+
// 直接修改className(不使用render函数), 解决临界值设置修改className时的顿挫
|
|
16041
|
+
vue.watch(() => scrollPosition.value, v => {
|
|
16042
|
+
Utils.raf(() => {
|
|
16043
|
+
const className = `is-scrolling-${layout.states.scrollX ? v : 'none'}`;
|
|
16044
|
+
const el = bodyXWrapper.value;
|
|
16045
|
+
el && el.classList.replace(el.classList.item(el.classList.length - 1), className);
|
|
16046
|
+
});
|
|
16047
|
+
}, {
|
|
16048
|
+
immediate: true
|
|
16049
|
+
});
|
|
16050
|
+
const tableId = Utils.getUid('table');
|
|
16051
|
+
vue.onMounted(() => {
|
|
16052
|
+
bindEvents();
|
|
16053
|
+
store.updateColumns();
|
|
16054
|
+
refreshLayout();
|
|
16055
|
+
resizeState.value = {
|
|
16056
|
+
width: instance.vnode.el.offsetWidth,
|
|
16057
|
+
height: instance.vnode.el.offsetHeight
|
|
16058
|
+
};
|
|
16059
|
+
isReady.value = true;
|
|
16060
|
+
});
|
|
16061
|
+
vue.onUnmounted(() => {
|
|
16062
|
+
isUnMount = true;
|
|
16063
|
+
unbindEvents();
|
|
16064
|
+
});
|
|
16065
|
+
expose({
|
|
16066
|
+
bodyXWrapper,
|
|
16067
|
+
bodyYWrapper,
|
|
16068
|
+
tableId,
|
|
16069
|
+
store,
|
|
16070
|
+
layout,
|
|
16071
|
+
updateScrollY,
|
|
16072
|
+
refreshLayout,
|
|
16073
|
+
toggleAllSelection,
|
|
16074
|
+
setCurrentRow,
|
|
16075
|
+
toggleRowSelection,
|
|
16076
|
+
toggleRowExpansion,
|
|
16077
|
+
clearSelection,
|
|
16078
|
+
scroller,
|
|
16079
|
+
headerWrapper,
|
|
16080
|
+
appendWrapper,
|
|
16081
|
+
footerWrapper,
|
|
16082
|
+
resizeState,
|
|
16083
|
+
debouncedUpdateLayout,
|
|
16084
|
+
isReady,
|
|
16085
|
+
hoverState,
|
|
16086
|
+
renderExpanded,
|
|
16087
|
+
hiddenColumns
|
|
16088
|
+
});
|
|
16089
|
+
return () => {
|
|
16090
|
+
return vue.createVNode("div", {
|
|
16091
|
+
"class": [classes.value, tableId, 'vc-table'],
|
|
16092
|
+
"onMouseleave": handleMouseLeave
|
|
16093
|
+
}, [vue.createVNode("div", {
|
|
16094
|
+
"ref": hiddenColumns,
|
|
16095
|
+
"class": "vc-table__hidden"
|
|
16096
|
+
}, [slots.default?.()]), props.showHeader && vue.createVNode("div", {
|
|
16097
|
+
"ref": headerWrapper,
|
|
16098
|
+
"class": "vc-table__header-wrapper"
|
|
16099
|
+
}, [vue.createVNode(TableHeader, {
|
|
16100
|
+
"ref": tableHeader,
|
|
16101
|
+
"store": store,
|
|
16102
|
+
"border": props.border,
|
|
16103
|
+
"default-sort": props.defaultSort,
|
|
16104
|
+
"style": bodyWidthStyle.value
|
|
16105
|
+
}, null)]), states.columns.length > 0 && vue.createVNode(ScrollerWheel, {
|
|
16106
|
+
"ref": scroller,
|
|
16107
|
+
"class": ['vc-table__body-wrapper is-scrolling-none'],
|
|
16108
|
+
"barTo": `.${tableId}`,
|
|
16109
|
+
"native": false,
|
|
16110
|
+
"always": false,
|
|
16111
|
+
"track-offset-y": [layout.states.headerHeight, 0, -layout.states.headerHeight - layout.states.footerHeight, 0],
|
|
16112
|
+
"style": [bodyHeightStyle.value],
|
|
16113
|
+
"onScroll": handleScollX
|
|
16114
|
+
}, {
|
|
16115
|
+
default: () => [vue.createVNode(TableBody, {
|
|
16116
|
+
"ref": body,
|
|
16117
|
+
"store": store,
|
|
16118
|
+
"style": [bodyWidthStyle.value],
|
|
16119
|
+
"height-style": [bodyHeightStyle.value],
|
|
16120
|
+
"onScroll": handleScollY
|
|
16121
|
+
}, null), props.data.length === 0 && vue.createVNode("div", {
|
|
16122
|
+
"ref": emptyBlock,
|
|
16123
|
+
"style": bodyWidthStyle.value,
|
|
16124
|
+
"class": "vc-table__empty-block"
|
|
16125
|
+
}, [vue.createVNode("span", {
|
|
16126
|
+
"class": "vc-table__empty-text"
|
|
16127
|
+
}, [slots.empty ? slots.empty() : props.emptyText || '暂无数据'])]), slots.append && vue.createVNode("div", {
|
|
16128
|
+
"ref": appendWrapper,
|
|
16129
|
+
"class": "vc-table__append-wrapper"
|
|
16130
|
+
}, [slots.append()])]
|
|
16131
|
+
}), props.showSummary && vue.withDirectives(vue.createVNode("div", {
|
|
16132
|
+
"ref": footerWrapper,
|
|
16133
|
+
"class": "vc-table__footer-wrapper"
|
|
16134
|
+
}, [vue.createVNode(TableFooter, {
|
|
16135
|
+
"store": store,
|
|
16136
|
+
"border": props.border,
|
|
16137
|
+
"sum-text": props.sumText || '合计',
|
|
16138
|
+
"get-summary": props.getSummary,
|
|
16139
|
+
"style": bodyWidthStyle.value
|
|
16140
|
+
}, null)]), [[vue.vShow, props.data && props.data.length > 0]]), states.leftFixedColumns.length > 0 && states.columns.length > 0 && vue.createVNode("div", {
|
|
16141
|
+
"ref": leftFixedWrapper,
|
|
16142
|
+
"style": [{
|
|
16143
|
+
width: layout.states.leftFixedWidth ? layout.states.leftFixedWidth + 'px' : ''
|
|
16144
|
+
}, fixedHeightStyle.value],
|
|
16145
|
+
"class": "vc-table__fixed"
|
|
16146
|
+
}, [props.showHeader && vue.createVNode("div", {
|
|
16147
|
+
"ref": leftFixedHeaderWrapper,
|
|
16148
|
+
"class": "vc-table__fixed-header-wrapper"
|
|
16149
|
+
}, [vue.createVNode(TableHeader, {
|
|
16150
|
+
"ref": leftFixedTableHeader,
|
|
16151
|
+
"store": store,
|
|
16152
|
+
"border": props.border,
|
|
16153
|
+
"default-sort": props.defaultSort,
|
|
16154
|
+
"style": bodyWidthStyle.value,
|
|
16155
|
+
"fixed": "left"
|
|
16156
|
+
}, null)]), vue.createVNode("div", {
|
|
16157
|
+
"ref": leftFixedBodyWrapper,
|
|
16158
|
+
"style": [{
|
|
16159
|
+
top: layout.states.headerHeight + 'px'
|
|
16160
|
+
}],
|
|
16161
|
+
"class": "vc-table__fixed-body-wrapper"
|
|
16162
|
+
}, [vue.createVNode(TableBody, {
|
|
16163
|
+
"ref": leftFixedBody,
|
|
16164
|
+
"store": store,
|
|
16165
|
+
"style": [bodyWidthStyle.value, bodyHeightStyle.value],
|
|
16166
|
+
"fixed": "left"
|
|
16167
|
+
}, null), slots.append && vue.createVNode("div", {
|
|
16168
|
+
"style": [{
|
|
16169
|
+
height: layout.states.appendHeight + 'px'
|
|
16170
|
+
}],
|
|
16171
|
+
"class": "vc-table__append-gutter"
|
|
16172
|
+
}, [slots.append()])]), props.showSummary && vue.withDirectives(vue.createVNode("div", {
|
|
16173
|
+
"ref": leftFixedFooterWrapper,
|
|
16174
|
+
"class": "vc-table__fixed-footer-wrapper"
|
|
16175
|
+
}, [vue.createVNode(TableFooter, {
|
|
16176
|
+
"store": store,
|
|
16177
|
+
"border": props.border,
|
|
16178
|
+
"sum-text": props.sumText || '合计',
|
|
16179
|
+
"get-summary": props.getSummary,
|
|
16180
|
+
"style": bodyWidthStyle.value,
|
|
16181
|
+
"fixed": "left"
|
|
16182
|
+
}, null)]), [[vue.vShow, props.data && props.data.length > 0]])]), states.rightFixedColumns.length > 0 && vue.createVNode("div", {
|
|
16183
|
+
"ref": rightFixedWrapper,
|
|
16184
|
+
"style": [{
|
|
16185
|
+
width: layout.states.rightFixedWidth ? layout.states.rightFixedWidth + 'px' : ''
|
|
16186
|
+
}, fixedHeightStyle.value],
|
|
16187
|
+
"class": "vc-table__fixed-right"
|
|
16188
|
+
}, [props.showHeader && vue.createVNode("div", {
|
|
16189
|
+
"ref": rightFixedHeaderWrapper,
|
|
16190
|
+
"class": "vc-table__fixed-header-wrapper"
|
|
16191
|
+
}, [vue.createVNode(TableHeader, {
|
|
16192
|
+
"ref": rightFixedTableHeader,
|
|
16193
|
+
"store": store,
|
|
16194
|
+
"border": props.border,
|
|
16195
|
+
"default-sort": props.defaultSort,
|
|
16196
|
+
"style": bodyWidthStyle.value,
|
|
16197
|
+
"fixed": "right"
|
|
16198
|
+
}, null)]), vue.createVNode("div", {
|
|
16199
|
+
"ref": rightFixedBodyWrapper,
|
|
16200
|
+
"style": [{
|
|
16201
|
+
top: layout.states.headerHeight + 'px'
|
|
16202
|
+
}],
|
|
16203
|
+
"class": "vc-table__fixed-body-wrapper"
|
|
16204
|
+
}, [vue.createVNode(TableBody, {
|
|
16205
|
+
"ref": rightFixedBody,
|
|
16206
|
+
"store": store,
|
|
16207
|
+
"style": [bodyWidthStyle.value, bodyHeightStyle.value],
|
|
16208
|
+
"fixed": "right"
|
|
16209
|
+
}, null), slots.append && vue.createVNode("div", {
|
|
16210
|
+
"style": [{
|
|
16211
|
+
height: layout.states.appendHeight + 'px'
|
|
16212
|
+
}],
|
|
16213
|
+
"class": "vc-table__append-gutter"
|
|
16214
|
+
}, [slots.append()])]), props.showSummary && vue.withDirectives(vue.createVNode("div", {
|
|
16215
|
+
"ref": rightFixedFooterWrapper,
|
|
16216
|
+
"class": "vc-table__fixed-footer-wrapper"
|
|
16217
|
+
}, [vue.createVNode(TableFooter, {
|
|
16218
|
+
"store": store,
|
|
16219
|
+
"border": props.border,
|
|
16220
|
+
"sum-text": props.sumText || '合计',
|
|
16221
|
+
"get-summary": props.getSummary,
|
|
16222
|
+
"style": bodyWidthStyle.value,
|
|
16223
|
+
"fixed": "right"
|
|
16224
|
+
}, null)]), [[vue.vShow, props.data && props.data.length > 0]])]), vue.withDirectives(vue.createVNode("div", {
|
|
16225
|
+
"ref": resizeProxy,
|
|
16226
|
+
"class": "vc-table__column-resize-proxy"
|
|
16227
|
+
}, null), [[vue.vShow, resizeProxyVisible.value]])]);
|
|
16228
|
+
};
|
|
16229
|
+
}
|
|
16230
|
+
});
|
|
16231
|
+
|
|
16232
|
+
const cellStarts = {
|
|
16233
|
+
default: {
|
|
16234
|
+
order: ''
|
|
16235
|
+
},
|
|
16236
|
+
selection: {
|
|
16237
|
+
width: 60,
|
|
16238
|
+
minWidth: 60,
|
|
16239
|
+
order: '',
|
|
16240
|
+
className: 'vc-table-column--selection'
|
|
16241
|
+
},
|
|
16242
|
+
expand: {
|
|
16243
|
+
width: 60,
|
|
16244
|
+
minWidth: 60,
|
|
16245
|
+
order: ''
|
|
16246
|
+
},
|
|
16247
|
+
index: {
|
|
16248
|
+
width: 60,
|
|
16249
|
+
minWidth: 60,
|
|
16250
|
+
order: ''
|
|
16251
|
+
}
|
|
16252
|
+
};
|
|
16253
|
+
|
|
16254
|
+
// 这些选项不应该被覆盖
|
|
16255
|
+
const cellForced = {
|
|
16256
|
+
selection: {
|
|
16257
|
+
renderHeader({
|
|
16258
|
+
store
|
|
16259
|
+
}) {
|
|
16260
|
+
return vue.createVNode(Checkbox, {
|
|
16261
|
+
"modelValue": store.states.isAllSelected,
|
|
16262
|
+
"disabled": store.states.data && store.states.data.length === 0,
|
|
16263
|
+
"indeterminate": store.states.selection.length > 0 && !store.states.isAllSelected,
|
|
16264
|
+
"onClick": e => {
|
|
16265
|
+
e.stopPropagation();
|
|
16266
|
+
store.toggleAllSelection();
|
|
16267
|
+
}
|
|
16268
|
+
}, null);
|
|
16269
|
+
},
|
|
16270
|
+
renderCell({
|
|
16271
|
+
row,
|
|
16272
|
+
column,
|
|
16273
|
+
store,
|
|
16274
|
+
rowIndex,
|
|
16275
|
+
level
|
|
16276
|
+
}) {
|
|
16277
|
+
return vue.withDirectives(vue.createVNode(Checkbox, {
|
|
16278
|
+
"modelValue": store.isSelected(row),
|
|
16279
|
+
"disabled": column.selectable ? !column.selectable.call(null, row, rowIndex) : false,
|
|
16280
|
+
"onChange": () => store.rowSelectedChanged(row),
|
|
16281
|
+
"onClick": e => e.stopPropagation()
|
|
16282
|
+
}, null), [[vue.vShow, store.table.props.expandSelectable || level === 0]]);
|
|
16283
|
+
},
|
|
16284
|
+
sortable: false,
|
|
16285
|
+
resizable: false
|
|
16286
|
+
},
|
|
16287
|
+
index: {
|
|
16288
|
+
renderHeader(h, {
|
|
16289
|
+
column
|
|
16290
|
+
}) {
|
|
16291
|
+
return column.label || '#';
|
|
16292
|
+
},
|
|
16293
|
+
renderCell({
|
|
16294
|
+
rowIndex,
|
|
16295
|
+
column
|
|
16296
|
+
}) {
|
|
16297
|
+
let i = rowIndex + 1;
|
|
16298
|
+
const index = column.index;
|
|
16299
|
+
if (typeof index === 'number') {
|
|
16300
|
+
i = rowIndex + index;
|
|
16301
|
+
} else if (typeof index === 'function') {
|
|
16302
|
+
i = index(rowIndex);
|
|
16303
|
+
}
|
|
16304
|
+
return vue.createVNode("div", null, [i]);
|
|
16305
|
+
},
|
|
16306
|
+
sortable: false
|
|
16307
|
+
},
|
|
16308
|
+
expand: {
|
|
16309
|
+
renderHeader({
|
|
16310
|
+
column
|
|
16311
|
+
}) {
|
|
16312
|
+
return column.label || '';
|
|
16313
|
+
},
|
|
16314
|
+
renderCell({
|
|
16315
|
+
row,
|
|
16316
|
+
store
|
|
16317
|
+
}) {
|
|
16318
|
+
const classes = ['vc-table__expand-icon'];
|
|
16319
|
+
if (store.states.expandRows.includes(row)) {
|
|
16320
|
+
classes.push('is-expand');
|
|
16321
|
+
}
|
|
16322
|
+
const handleClick = e => {
|
|
16323
|
+
e.stopPropagation();
|
|
16324
|
+
store.expand.toggle(row);
|
|
16325
|
+
};
|
|
16326
|
+
return vue.createVNode("div", {
|
|
16327
|
+
"class": classes,
|
|
16328
|
+
"onClick": handleClick
|
|
16329
|
+
}, [vue.createVNode(Icon, {
|
|
16330
|
+
"type": "triangle-up"
|
|
16331
|
+
}, null)]);
|
|
16332
|
+
},
|
|
16333
|
+
sortable: false,
|
|
16334
|
+
resizable: false,
|
|
16335
|
+
className: 'vc-table__expand-column'
|
|
16336
|
+
}
|
|
16337
|
+
};
|
|
16338
|
+
|
|
16339
|
+
// Cell默认渲染value 或 formatter
|
|
16340
|
+
const defaultRenderCell = ({
|
|
16341
|
+
row,
|
|
16342
|
+
column = {},
|
|
16343
|
+
rowIndex
|
|
16344
|
+
}) => {
|
|
16345
|
+
const {
|
|
16346
|
+
prop,
|
|
16347
|
+
formatter
|
|
16348
|
+
} = column;
|
|
16349
|
+
let value;
|
|
16350
|
+
if (prop) {
|
|
16351
|
+
value = Utils.getPropByPath(row, prop).v;
|
|
16352
|
+
}
|
|
16353
|
+
if (formatter) {
|
|
16354
|
+
return column.formatter({
|
|
16355
|
+
row,
|
|
16356
|
+
column,
|
|
16357
|
+
value,
|
|
16358
|
+
rowIndex
|
|
16359
|
+
});
|
|
16360
|
+
}
|
|
16361
|
+
return value;
|
|
16362
|
+
};
|
|
16363
|
+
|
|
16364
|
+
// Cell渲染前缀,如loading, expand
|
|
16365
|
+
const treeCellPrefix = ({
|
|
16366
|
+
row,
|
|
16367
|
+
treeNode,
|
|
16368
|
+
store
|
|
16369
|
+
}) => {
|
|
16370
|
+
if (!treeNode) return null;
|
|
16371
|
+
const ele = [];
|
|
16372
|
+
const handleClick = e => {
|
|
16373
|
+
e.stopPropagation();
|
|
16374
|
+
store.tree.loadOrToggle(row);
|
|
16375
|
+
};
|
|
16376
|
+
if (treeNode.indent) {
|
|
16377
|
+
ele.push(vue.createVNode("span", {
|
|
16378
|
+
"class": "vc-table__indent",
|
|
16379
|
+
"style": {
|
|
16380
|
+
'padding-left': treeNode.indent + 'px'
|
|
16381
|
+
}
|
|
16382
|
+
}, null));
|
|
16383
|
+
}
|
|
16384
|
+
if (typeof treeNode.expanded === 'boolean' && !treeNode.noLazyChildren) {
|
|
16385
|
+
const expandClasses = {
|
|
16386
|
+
'vc-table__expand-icon': true,
|
|
16387
|
+
'is-expand': treeNode.expanded
|
|
16388
|
+
};
|
|
16389
|
+
ele.push(vue.createVNode("span", {
|
|
16390
|
+
"class": expandClasses,
|
|
16391
|
+
"onClick": handleClick
|
|
16392
|
+
}, [treeNode.loading ? vue.createVNode(Spin, {
|
|
16393
|
+
"size": 12
|
|
16394
|
+
}, null) : vue.createVNode(Icon, {
|
|
16395
|
+
"type": "triangle-up"
|
|
16396
|
+
}, null)]));
|
|
16397
|
+
} else {
|
|
16398
|
+
ele.push(vue.createVNode("span", {
|
|
16399
|
+
"class": "vc-table__placeholder"
|
|
16400
|
+
}, null));
|
|
16401
|
+
}
|
|
16402
|
+
return ele;
|
|
16403
|
+
};
|
|
16404
|
+
|
|
16405
|
+
const TableColumn = /* @__PURE__ */ vue.defineComponent({
|
|
16406
|
+
name: 'vc-table-column',
|
|
16407
|
+
props: {
|
|
16408
|
+
type: {
|
|
16409
|
+
type: String,
|
|
16410
|
+
default: 'default'
|
|
16411
|
+
},
|
|
16412
|
+
label: String,
|
|
16413
|
+
customClass: String,
|
|
16414
|
+
labelClass: String,
|
|
16415
|
+
prop: String,
|
|
16416
|
+
width: Number,
|
|
16417
|
+
minWidth: Number,
|
|
16418
|
+
renderHeader: Function,
|
|
16419
|
+
resizable: {
|
|
16420
|
+
type: Boolean,
|
|
16421
|
+
default: true
|
|
16422
|
+
},
|
|
16423
|
+
columnKey: String,
|
|
16424
|
+
align: String,
|
|
16425
|
+
headerAlign: String,
|
|
16426
|
+
showPopover: Boolean,
|
|
16427
|
+
fixed: [Boolean, String],
|
|
16428
|
+
formatter: Function,
|
|
16429
|
+
selectable: Function,
|
|
16430
|
+
reserveSelection: Boolean,
|
|
16431
|
+
index: [Number, Function],
|
|
16432
|
+
// 头部是否展示排序
|
|
16433
|
+
sortable: Boolean,
|
|
16434
|
+
// 数据过滤的选项
|
|
16435
|
+
filters: Array,
|
|
16436
|
+
// 是否支持多选
|
|
16437
|
+
filterMultiple: {
|
|
16438
|
+
type: Boolean,
|
|
16439
|
+
default: true
|
|
16440
|
+
},
|
|
16441
|
+
filterIcon: String,
|
|
16442
|
+
// 选中的数据过滤项
|
|
16443
|
+
filteredValue: Array,
|
|
16444
|
+
// 筛选弹层的样式
|
|
16445
|
+
filterPopupClass: String,
|
|
16446
|
+
// 筛选的方法
|
|
16447
|
+
filter: Function,
|
|
16448
|
+
tooltip: [String, Function]
|
|
16449
|
+
},
|
|
16450
|
+
setup(props, {
|
|
16451
|
+
slots,
|
|
16452
|
+
expose
|
|
16453
|
+
}) {
|
|
16454
|
+
const instance = vue.getCurrentInstance();
|
|
16455
|
+
const table = vcHooks.getInstance('table', 'tableId');
|
|
16456
|
+
const parent = vcHooks.getInstance('table-column', 'columnId') || table;
|
|
16457
|
+
const isSubColumn = table !== parent; // 用于多久表头
|
|
16458
|
+
|
|
16459
|
+
const columnId = vue.ref((parent.exposed.tableId || parent.exposed.columnId) + Utils.getUid('column'));
|
|
16460
|
+
const realWidth = vue.computed(() => {
|
|
16461
|
+
return parseWidth(props.width);
|
|
16462
|
+
});
|
|
16463
|
+
const realMinWidth = vue.computed(() => {
|
|
16464
|
+
return parseMinWidth(props.minWidth);
|
|
16465
|
+
});
|
|
16466
|
+
const realAlign = vue.computed(() => {
|
|
16467
|
+
return props.align ? 'is-' + props.align : null;
|
|
16468
|
+
});
|
|
16469
|
+
const realHeaderAlign = vue.computed(() => {
|
|
16470
|
+
return props.headerAlign ? 'is-' + props.headerAlign : realAlign.value;
|
|
16471
|
+
});
|
|
16472
|
+
const columnConfig = vue.reactive({});
|
|
16473
|
+
/**
|
|
16474
|
+
* 获取当前值情况,this[key]
|
|
16475
|
+
* @param args ~
|
|
16476
|
+
* @returns ~
|
|
16477
|
+
*/
|
|
16478
|
+
const getPropsData = (...args) => {
|
|
16479
|
+
const result = args.reduce((prev, cur) => {
|
|
16480
|
+
if (Array.isArray(cur)) {
|
|
16481
|
+
cur.forEach(key => {
|
|
16482
|
+
prev[key] = props[key];
|
|
16483
|
+
});
|
|
16484
|
+
}
|
|
16485
|
+
return prev;
|
|
16486
|
+
}, {});
|
|
16487
|
+
return result;
|
|
16488
|
+
};
|
|
16489
|
+
/**
|
|
16490
|
+
* compose 1
|
|
16491
|
+
* 对于特定类型的 column,某些属性不允许设置
|
|
16492
|
+
* 如 type: selection | index | expand
|
|
16493
|
+
* @param column ~
|
|
16494
|
+
* @returns ~
|
|
16495
|
+
*/
|
|
16496
|
+
const setColumnForcedProps = column => {
|
|
16497
|
+
const type = column.type;
|
|
16498
|
+
const source = cellForced[type] || {};
|
|
16499
|
+
Object.keys(source).forEach(prop => {
|
|
16500
|
+
const value = source[prop];
|
|
16501
|
+
if (value !== undefined) {
|
|
16502
|
+
column[prop] = prop === 'customClass' ? `${column[prop]} ${value}` : value;
|
|
16503
|
+
}
|
|
16504
|
+
});
|
|
16505
|
+
return column;
|
|
16506
|
+
};
|
|
16507
|
+
|
|
16508
|
+
/**
|
|
16509
|
+
* compose 2
|
|
16510
|
+
* column
|
|
16511
|
+
* -> width
|
|
16512
|
+
* -> minWidth
|
|
16513
|
+
* @param column ~
|
|
16514
|
+
* @returns ~
|
|
16515
|
+
*/
|
|
16516
|
+
const setColumnWidth = column => {
|
|
16517
|
+
if (realWidth.value) {
|
|
16518
|
+
column.width = realWidth.value;
|
|
16519
|
+
}
|
|
16520
|
+
if (realMinWidth.value) {
|
|
16521
|
+
column.minWidth = realMinWidth.value;
|
|
16522
|
+
}
|
|
16523
|
+
if (!column.minWidth) {
|
|
16524
|
+
column.minWidth = 80;
|
|
16525
|
+
}
|
|
16526
|
+
column.realWidth = column.width === undefined ? column.minWidth : column.width;
|
|
16527
|
+
return column;
|
|
16528
|
+
};
|
|
16529
|
+
|
|
16530
|
+
/**
|
|
16531
|
+
* compose 3
|
|
16532
|
+
* column
|
|
16533
|
+
* -> renderHeader: 渲染头部
|
|
16534
|
+
* -> renderCell: 渲染单元格
|
|
16535
|
+
* owner
|
|
16536
|
+
* -> renderExpanded: 展开
|
|
16537
|
+
* @param column ~
|
|
16538
|
+
* @returns ~
|
|
16539
|
+
*/
|
|
16540
|
+
const setColumnRenders = column => {
|
|
16541
|
+
const specialTypes = Object.keys(cellForced);
|
|
16542
|
+
// renderHeader 属性不推荐使用。
|
|
16543
|
+
if (props.renderHeader) {
|
|
16544
|
+
column.renderHeader = props.renderHeader;
|
|
16545
|
+
} else if (specialTypes.indexOf(column.type) === -1) {
|
|
16546
|
+
column.renderHeader = data => {
|
|
16547
|
+
const renderHeader = slots.header;
|
|
16548
|
+
return renderHeader ? renderHeader(data) : data?.column?.label;
|
|
16549
|
+
};
|
|
16550
|
+
}
|
|
16551
|
+
let originRenderCell = column.renderCell;
|
|
16552
|
+
// TODO: 这里的实现调整
|
|
16553
|
+
if (column.type === 'expand') {
|
|
16554
|
+
// 对于展开行,renderCell 不允许配置的。在上一步中已经设置过,这里需要简单封装一下。
|
|
16555
|
+
column.renderCell = data => vue.createVNode("div", {
|
|
16556
|
+
"class": "vc-table__cell"
|
|
16557
|
+
}, [originRenderCell(data)]);
|
|
16558
|
+
table.exposed.renderExpanded.value = data => {
|
|
16559
|
+
return slots.default ? slots.default(data) : slots.default;
|
|
16560
|
+
};
|
|
16561
|
+
} else {
|
|
16562
|
+
originRenderCell = originRenderCell || defaultRenderCell;
|
|
16563
|
+
// 对 renderCell 进行包装
|
|
16564
|
+
column.renderCell = data => {
|
|
16565
|
+
let children = null;
|
|
16566
|
+
if (slots.default) {
|
|
16567
|
+
children = slots?.default?.(data);
|
|
16568
|
+
} else {
|
|
16569
|
+
children = originRenderCell(data);
|
|
16570
|
+
}
|
|
16571
|
+
let prefix = treeCellPrefix(data);
|
|
16572
|
+
const $props = {
|
|
16573
|
+
class: 'vc-table__cell',
|
|
16574
|
+
style: {}
|
|
16575
|
+
};
|
|
16576
|
+
// 存在树形数组,且当前行无箭头图标且处于当前展开列,表格对齐
|
|
16577
|
+
if (!lodashEs.isEmpty(table.exposed.store.states.treeData) && !prefix && data.isExpandColumn) {
|
|
16578
|
+
prefix = vue.createVNode("span", {
|
|
16579
|
+
"class": "vc-table-un-expand__indent"
|
|
16580
|
+
}, null);
|
|
16581
|
+
}
|
|
16582
|
+
if (data.column.showPopover) {
|
|
16583
|
+
$props.class += ' vc-popover';
|
|
16584
|
+
$props.style = {
|
|
16585
|
+
width: (data.column.realWidth || data.column.width) - 1 + 'px'
|
|
16586
|
+
};
|
|
16587
|
+
}
|
|
16588
|
+
const {
|
|
16589
|
+
placeholder
|
|
16590
|
+
} = table.props;
|
|
16591
|
+
const contentPlaceholder = typeof placeholder === 'function' ? placeholder() : placeholder;
|
|
16592
|
+
return vue.createVNode("div", $props, [prefix, children === undefined || children === '' || children === null ? contentPlaceholder : children]);
|
|
16593
|
+
};
|
|
16594
|
+
}
|
|
16595
|
+
return column;
|
|
16596
|
+
};
|
|
16597
|
+
const registerColumn = () => {
|
|
16598
|
+
const defaults = {
|
|
16599
|
+
...cellStarts[props.type],
|
|
16600
|
+
id: columnId.value,
|
|
16601
|
+
realAlign,
|
|
16602
|
+
realHeaderAlign
|
|
16603
|
+
};
|
|
16604
|
+
let column = lodashEs.merge(defaults, getPropsData(Object.keys(props)));
|
|
16605
|
+
|
|
16606
|
+
// minWidth/realWidth/renderHeader
|
|
16607
|
+
column = helperFp.compose(setColumnRenders, setColumnWidth, setColumnForcedProps)(column);
|
|
16608
|
+
for (const key in column) {
|
|
16609
|
+
if (Utils.hasOwn(column, key)) {
|
|
16610
|
+
columnConfig[key] = column[key];
|
|
16611
|
+
}
|
|
16612
|
+
}
|
|
16613
|
+
};
|
|
16614
|
+
const registerWatchers = () => {
|
|
16615
|
+
// 赋值
|
|
16616
|
+
Object.keys(props).forEach(k => vue.watch(() => props[k], v => columnConfig[k] = v));
|
|
16617
|
+
|
|
16618
|
+
// 影响布局
|
|
16619
|
+
vue.watch(() => props.fixed, () => {
|
|
16620
|
+
table.exposed.store.scheduleLayout(true);
|
|
16621
|
+
});
|
|
16622
|
+
vue.watch(() => realWidth.value, v => {
|
|
16623
|
+
columnConfig['width'] = v;
|
|
16624
|
+
columnConfig['realWidth'] = v;
|
|
16625
|
+
table.exposed.store.scheduleLayout(false);
|
|
16626
|
+
});
|
|
16627
|
+
vue.watch(() => realMinWidth.value, () => {
|
|
16628
|
+
table.exposed.store.scheduleLayout(false);
|
|
16629
|
+
});
|
|
16630
|
+
};
|
|
16631
|
+
vue.onBeforeMount(() => {
|
|
16632
|
+
registerColumn();
|
|
16633
|
+
registerWatchers();
|
|
16634
|
+
});
|
|
16635
|
+
vue.onMounted(() => {
|
|
16636
|
+
const children = isSubColumn ? parent.vnode.el.children : parent.exposed.hiddenColumns.value.children;
|
|
16637
|
+
|
|
16638
|
+
// DOM上
|
|
16639
|
+
const columnIndex = [...children].indexOf(instance.vnode.el);
|
|
16640
|
+
table.exposed.store.insertColumn(columnConfig, columnIndex, isSubColumn && parent.exposed.columnConfig);
|
|
16641
|
+
});
|
|
16642
|
+
vue.onUnmounted(() => {
|
|
16643
|
+
if (!instance.parent) return;
|
|
16644
|
+
table.exposed.store.removeColumn(columnConfig, isSubColumn && parent.exposed.columnConfig);
|
|
16645
|
+
});
|
|
16646
|
+
expose({
|
|
16647
|
+
columnId,
|
|
16648
|
+
columnConfig
|
|
16649
|
+
});
|
|
16650
|
+
|
|
16651
|
+
/**
|
|
16652
|
+
* 可以计算 columnIndex(外层需要标签元素), 即h('div')
|
|
16653
|
+
* this.$slots?.default?.() 用于多级表头
|
|
16654
|
+
* @returns ~
|
|
16655
|
+
*/
|
|
16656
|
+
return () => {
|
|
16657
|
+
let children = [];
|
|
16658
|
+
try {
|
|
16659
|
+
const renderDefault = slots?.default?.({
|
|
16660
|
+
row: {},
|
|
16661
|
+
column: {},
|
|
16662
|
+
columnIndex: -1,
|
|
16663
|
+
rowIndex: -1
|
|
16664
|
+
});
|
|
16665
|
+
if (renderDefault instanceof Array) {
|
|
16666
|
+
for (const childNode of renderDefault) {
|
|
16667
|
+
if (/^vcm?-table-column$/.test(childNode.type?.name)) {
|
|
16668
|
+
children.push(childNode);
|
|
16669
|
+
} else if (childNode.type === vue.Fragment && childNode.children instanceof Array) {
|
|
16670
|
+
renderDefault.push(...childNode.children);
|
|
16671
|
+
}
|
|
16672
|
+
}
|
|
16673
|
+
}
|
|
16674
|
+
} catch {
|
|
16675
|
+
children = [];
|
|
16676
|
+
}
|
|
16677
|
+
return vue.h('div', children);
|
|
16678
|
+
};
|
|
16679
|
+
}
|
|
16680
|
+
});
|
|
16681
|
+
|
|
16682
|
+
const MTable = Table;
|
|
16683
|
+
const MTableColumn = TableColumn;
|
|
16684
|
+
|
|
16685
|
+
const props$b = {
|
|
16686
|
+
type: {
|
|
16687
|
+
type: String,
|
|
16688
|
+
validator: (v) => /^(line|card)$/.test(v),
|
|
16689
|
+
default: "line"
|
|
13798
16690
|
},
|
|
13799
16691
|
modelValue: {
|
|
13800
16692
|
type: [String, Number]
|
|
@@ -13945,9 +16837,9 @@ const useTabs = (options = {}) => {
|
|
|
13945
16837
|
|
|
13946
16838
|
/** @jsxImportSource vue */
|
|
13947
16839
|
|
|
13948
|
-
const COMPONENT_NAME$
|
|
16840
|
+
const COMPONENT_NAME$f = 'vc-tabs';
|
|
13949
16841
|
const Tabs = /* @__PURE__ */ vue.defineComponent({
|
|
13950
|
-
name: COMPONENT_NAME$
|
|
16842
|
+
name: COMPONENT_NAME$f,
|
|
13951
16843
|
props: props$b,
|
|
13952
16844
|
emits: ['update:modelValue', 'change', 'click'],
|
|
13953
16845
|
setup(props, {
|
|
@@ -14195,9 +17087,9 @@ const useTabsPane = () => {
|
|
|
14195
17087
|
|
|
14196
17088
|
/** @jsxImportSource vue */
|
|
14197
17089
|
|
|
14198
|
-
const COMPONENT_NAME$
|
|
17090
|
+
const COMPONENT_NAME$e = 'vc-tabs-pane';
|
|
14199
17091
|
const TabsPane = /* @__PURE__ */ vue.defineComponent({
|
|
14200
|
-
name: COMPONENT_NAME$
|
|
17092
|
+
name: COMPONENT_NAME$e,
|
|
14201
17093
|
props: props$a,
|
|
14202
17094
|
setup(_, {
|
|
14203
17095
|
slots
|
|
@@ -14252,9 +17144,9 @@ const props$9 = {
|
|
|
14252
17144
|
|
|
14253
17145
|
/** @jsxImportSource vue */
|
|
14254
17146
|
|
|
14255
|
-
const COMPONENT_NAME$
|
|
17147
|
+
const COMPONENT_NAME$d = 'vcm-tabs';
|
|
14256
17148
|
const MTabs = /* @__PURE__ */ vue.defineComponent({
|
|
14257
|
-
name: COMPONENT_NAME$
|
|
17149
|
+
name: COMPONENT_NAME$d,
|
|
14258
17150
|
props: props$9,
|
|
14259
17151
|
emits: ['update:modelValue', 'change', 'click'],
|
|
14260
17152
|
setup(props, {
|
|
@@ -14519,9 +17411,9 @@ const MTabs = /* @__PURE__ */ vue.defineComponent({
|
|
|
14519
17411
|
|
|
14520
17412
|
/** @jsxImportSource vue */
|
|
14521
17413
|
|
|
14522
|
-
const COMPONENT_NAME$
|
|
17414
|
+
const COMPONENT_NAME$c = 'vcm-tabs-pane';
|
|
14523
17415
|
const MTabsPane = /* @__PURE__ */ vue.defineComponent({
|
|
14524
|
-
name: COMPONENT_NAME$
|
|
17416
|
+
name: COMPONENT_NAME$c,
|
|
14525
17417
|
props: props$a,
|
|
14526
17418
|
setup(_, {
|
|
14527
17419
|
slots
|
|
@@ -14645,9 +17537,9 @@ const getFitIndex = (options = {}) => {
|
|
|
14645
17537
|
|
|
14646
17538
|
/** @jsxImportSource vue */
|
|
14647
17539
|
|
|
14648
|
-
const COMPONENT_NAME$
|
|
17540
|
+
const COMPONENT_NAME$b = 'vc-text';
|
|
14649
17541
|
const Text = /* @__PURE__ */ vue.defineComponent({
|
|
14650
|
-
name: COMPONENT_NAME$
|
|
17542
|
+
name: COMPONENT_NAME$b,
|
|
14651
17543
|
props: props$8,
|
|
14652
17544
|
setup(props, {
|
|
14653
17545
|
emit
|
|
@@ -14740,9 +17632,9 @@ const props$7 = {
|
|
|
14740
17632
|
|
|
14741
17633
|
/** @jsxImportSource vue */
|
|
14742
17634
|
|
|
14743
|
-
const COMPONENT_NAME$
|
|
17635
|
+
const COMPONENT_NAME$a = 'vc-textarea';
|
|
14744
17636
|
const Textarea = /* @__PURE__ */ vue.defineComponent({
|
|
14745
|
-
name: COMPONENT_NAME$
|
|
17637
|
+
name: COMPONENT_NAME$a,
|
|
14746
17638
|
props: props$7,
|
|
14747
17639
|
setup(props, {
|
|
14748
17640
|
slots
|
|
@@ -14800,9 +17692,9 @@ const props$6 = {
|
|
|
14800
17692
|
}
|
|
14801
17693
|
};
|
|
14802
17694
|
|
|
14803
|
-
const COMPONENT_NAME$
|
|
17695
|
+
const COMPONENT_NAME$9 = "vc-theme";
|
|
14804
17696
|
const Theme = vue.defineComponent({
|
|
14805
|
-
name: COMPONENT_NAME$
|
|
17697
|
+
name: COMPONENT_NAME$9,
|
|
14806
17698
|
props: props$6,
|
|
14807
17699
|
setup(props, { slots }) {
|
|
14808
17700
|
const themeId = Utils__namespace.getUid("vc-theme");
|
|
@@ -14888,9 +17780,9 @@ const Theme = vue.defineComponent({
|
|
|
14888
17780
|
}
|
|
14889
17781
|
});
|
|
14890
17782
|
|
|
14891
|
-
const COMPONENT_NAME$
|
|
17783
|
+
const COMPONENT_NAME$8 = "vc-theme-view";
|
|
14892
17784
|
const ThemeView = vue.defineComponent({
|
|
14893
|
-
name: COMPONENT_NAME$
|
|
17785
|
+
name: COMPONENT_NAME$8,
|
|
14894
17786
|
props: props$6,
|
|
14895
17787
|
setup(props, { slots }) {
|
|
14896
17788
|
return () => {
|
|
@@ -14906,9 +17798,9 @@ const ThemeView = vue.defineComponent({
|
|
|
14906
17798
|
}
|
|
14907
17799
|
});
|
|
14908
17800
|
|
|
14909
|
-
const COMPONENT_NAME$
|
|
17801
|
+
const COMPONENT_NAME$7 = "vc-theme-text";
|
|
14910
17802
|
const ThemeText = vue.defineComponent({
|
|
14911
|
-
name: COMPONENT_NAME$
|
|
17803
|
+
name: COMPONENT_NAME$7,
|
|
14912
17804
|
props: props$6,
|
|
14913
17805
|
setup(props, { slots }) {
|
|
14914
17806
|
return () => {
|
|
@@ -14924,9 +17816,9 @@ const ThemeText = vue.defineComponent({
|
|
|
14924
17816
|
}
|
|
14925
17817
|
});
|
|
14926
17818
|
|
|
14927
|
-
const COMPONENT_NAME$
|
|
17819
|
+
const COMPONENT_NAME$6 = "vc-theme-image";
|
|
14928
17820
|
const ThemeImage = vue.defineComponent({
|
|
14929
|
-
name: COMPONENT_NAME$
|
|
17821
|
+
name: COMPONENT_NAME$6,
|
|
14930
17822
|
props: props$6,
|
|
14931
17823
|
setup(props, { slots }) {
|
|
14932
17824
|
return () => {
|
|
@@ -14974,11 +17866,12 @@ const props$5 = {
|
|
|
14974
17866
|
|
|
14975
17867
|
/** @jsxImportSource vue */
|
|
14976
17868
|
|
|
17869
|
+
const COMPONENT_NAME$5 = 'vc-time-picker';
|
|
14977
17870
|
const getPanel = type => {
|
|
14978
17871
|
const isRange = type === 'timerange';
|
|
14979
17872
|
return isRange ? TimeRangePanel : TimePanel;
|
|
14980
17873
|
};
|
|
14981
|
-
const TimePicker = createPicker(props$5, () => {
|
|
17874
|
+
const TimePicker = createPicker(COMPONENT_NAME$5, props$5, () => {
|
|
14982
17875
|
const props = vue.getCurrentInstance().props;
|
|
14983
17876
|
const icon = vue.ref('icon');
|
|
14984
17877
|
const panel = vue.shallowRef({});
|
|
@@ -15525,7 +18418,7 @@ exports.Drawer = Drawer;
|
|
|
15525
18418
|
exports.DrawerView = DrawerView;
|
|
15526
18419
|
exports.Dropdown = Dropdown;
|
|
15527
18420
|
exports.Editor = Editor;
|
|
15528
|
-
exports.Expand = Expand;
|
|
18421
|
+
exports.Expand = Expand$1;
|
|
15529
18422
|
exports.Form = Form;
|
|
15530
18423
|
exports.FormItem = FormItem;
|
|
15531
18424
|
exports.Fragment = Fragment;
|
|
@@ -15608,6 +18501,7 @@ exports.MSpin = MSpin;
|
|
|
15608
18501
|
exports.MSteps = MSteps;
|
|
15609
18502
|
exports.MSwitch = MSwitch;
|
|
15610
18503
|
exports.MTable = MTable;
|
|
18504
|
+
exports.MTableColumn = MTableColumn;
|
|
15611
18505
|
exports.MTabs = MTabs;
|
|
15612
18506
|
exports.MTabsPane = MTabsPane;
|
|
15613
18507
|
exports.MTag = MTag;
|
|
@@ -15658,6 +18552,7 @@ exports.Spin = Spin;
|
|
|
15658
18552
|
exports.Steps = Steps;
|
|
15659
18553
|
exports.Switch = Switch;
|
|
15660
18554
|
exports.Table = Table;
|
|
18555
|
+
exports.TableColumn = TableColumn;
|
|
15661
18556
|
exports.Tabs = Tabs;
|
|
15662
18557
|
exports.TabsPane = TabsPane;
|
|
15663
18558
|
exports.Tag = Tag;
|