@opentiny/vue-renderless 3.18.5 → 3.19.0
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/action-menu/index.js +2 -2
- package/action-menu/vue.js +2 -2
- package/anchor/index.js +8 -6
- package/anchor/vue.js +1 -1
- package/badge/index.js +4 -3
- package/base-select/index.js +3 -3
- package/breadcrumb-item/vue.js +1 -1
- package/bulletin-board/index.js +1 -1
- package/button/index.js +1 -1
- package/button-group/index.js +6 -1
- package/carousel-item/index.js +1 -1
- package/cascader/vue.js +17 -4
- package/chart-core/deps/utils.js +1 -1
- package/checkbox/index.js +1 -1
- package/common/deps/dom.js +9 -1
- package/common/deps/useWindowSize.js +23 -0
- package/common/deps/vue-popper.js +1 -1
- package/common/index.js +2 -2
- package/common/prop-util.js +43 -0
- package/common/runtime.js +1 -1
- package/crop/index.js +14 -22
- package/crop/vue.js +33 -29
- package/date-panel/index.js +13 -2
- package/date-panel/vue.js +16 -10
- package/dialog-select/index.js +78 -0
- package/dialog-select/vue.js +28 -6
- package/drawer/index.js +14 -1
- package/drawer/vue.js +4 -3
- package/dropdown-item/index.js +2 -2
- package/dropdown-item/vue.js +9 -6
- package/espace/index.js +1 -1
- package/fall-menu/index.js +5 -1
- package/fall-menu/vue.js +15 -2
- package/filter-box/vue.js +5 -2
- package/floatbar/index.js +1 -1
- package/fluent-editor/options.js +26 -24
- package/form/index.js +7 -4
- package/form/vue.js +1 -1
- package/grid/plugins/export.js +1 -1
- package/grid/utils/dom.js +3 -1
- package/guide/index.js +17 -2
- package/guide/vue.js +5 -3
- package/image-viewer/vue.js +1 -1
- package/input/index.js +6 -7
- package/input/vue.js +10 -11
- package/ip-address/index.js +0 -10
- package/ip-address/vue.js +2 -5
- package/load-list/index.js +43 -0
- package/load-list/vue.js +69 -0
- package/locales/index.js +1 -5
- package/logout/index.js +1 -1
- package/milestone/index.js +55 -8
- package/milestone/vue.js +16 -3
- package/modal/index.js +6 -6
- package/modal/vue.js +4 -3
- package/nav-menu/index.js +1 -1
- package/package.json +1 -1
- package/pager/index.js +25 -0
- package/pager/vue.js +18 -4
- package/picker/index.js +3 -3
- package/picker/vue.js +1 -1
- package/popeditor/index.js +12 -1
- package/popeditor/vue.js +9 -5
- package/rich-text/table-module.js +4 -3
- package/roles/index.js +1 -1
- package/select/index.js +6 -6
- package/select/vue.js +2 -1
- package/selected-box/vue.js +2 -1
- package/slider/index.js +2 -2
- package/slider-button-group/vue.js +3 -2
- package/split/vue.js +4 -2
- package/sticky/index.js +89 -0
- package/sticky/vue.js +74 -0
- package/tabbar-item/vue.js +1 -1
- package/tall-storage/index.js +1 -1
- package/time/vue.js +2 -1
- package/time-range/vue.js +4 -1
- package/time-spinner/index.js +4 -1
- package/toggle-menu/index.js +1 -1
- package/transfer-panel/vue.js +7 -6
- package/tree/index.js +17 -7
- package/tree/vue.js +10 -6
- package/tree-node/index.js +2 -2
- package/tree-node/vue.js +6 -2
- package/types/action-menu.type.d.ts +1 -1
- package/types/alert.type.d.ts +2 -0
- package/types/anchor.type.d.ts +5 -1
- package/types/badge.type.d.ts +1 -1
- package/types/button-group.type.d.ts +3 -0
- package/types/button.type.d.ts +1 -1
- package/types/date-picker.type.d.ts +3 -0
- package/types/drawer.type.d.ts +5 -1
- package/types/{dropdown-item.type-16d59fd0.d.ts → dropdown-item.type-c9badbc1.d.ts} +2 -2
- package/types/dropdown-item.type.d.ts +1 -1
- package/types/dropdown-menu.type.d.ts +1 -1
- package/types/fall-menu.type.d.ts +1 -0
- package/types/file-upload.type.d.ts +1 -1
- package/types/image.type.d.ts +4 -0
- package/types/input.type.d.ts +8 -4
- package/types/load-list.type.d.ts +58 -0
- package/types/milestone.type.d.ts +27 -1
- package/types/modal.type.d.ts +3 -2
- package/types/pager.type.d.ts +5 -1
- package/types/picker.type.d.ts +3 -0
- package/types/popover.type.d.ts +1 -1
- package/types/search.type.d.ts +0 -3
- package/types/steps.type.d.ts +1 -0
- package/types/tag.type.d.ts +1 -0
- package/types/tooltip.type.d.ts +3 -0
- package/types/transfer.type.d.ts +3 -3
- package/types/tree-menu.type.d.ts +8 -0
- package/types/upload-dragger.type.d.ts +1 -1
- package/types/{upload-list.type-4194f534.d.ts → upload-list.type-26173587.d.ts} +11 -3
- package/types/upload-list.type.d.ts +1 -1
- package/types/upload.type.d.ts +1 -1
- package/types/user-contact.type.d.ts +127 -1
- package/types/user-head.type.d.ts +1 -4
- package/upload-list/vue.js +7 -7
- package/virtual-scroll-box/index.js +294 -0
- package/virtual-scroll-box/vue.js +43 -0
- package/virtual-tree/index.js +168 -0
- package/virtual-tree/vue.js +53 -0
|
@@ -1,2 +1,128 @@
|
|
|
1
|
+
import { ExtractPropTypes, ref } from 'vue';
|
|
2
|
+
import { ISharedRenderlessFunctionParams, ISharedRenderlessParamUtils } from './shared.type.js';
|
|
1
3
|
|
|
2
|
-
|
|
4
|
+
/**
|
|
5
|
+
* Copyright (c) 2022 - present TinyVue Authors.
|
|
6
|
+
* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
|
|
7
|
+
*
|
|
8
|
+
* Use of this source code is governed by an MIT-style license.
|
|
9
|
+
*
|
|
10
|
+
* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
|
|
11
|
+
* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
|
|
12
|
+
* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
|
|
13
|
+
*
|
|
14
|
+
*/
|
|
15
|
+
declare const userContactProps: {
|
|
16
|
+
showName: {
|
|
17
|
+
type: BooleanConstructor;
|
|
18
|
+
default: boolean;
|
|
19
|
+
};
|
|
20
|
+
showArrow: {
|
|
21
|
+
type: BooleanConstructor;
|
|
22
|
+
default: boolean;
|
|
23
|
+
};
|
|
24
|
+
/**
|
|
25
|
+
* 是否显示 roleNumber, colType 为 false 时生效
|
|
26
|
+
*/
|
|
27
|
+
showNumber: {
|
|
28
|
+
type: BooleanConstructor;
|
|
29
|
+
default: boolean;
|
|
30
|
+
};
|
|
31
|
+
/**
|
|
32
|
+
* 是否显示 头像
|
|
33
|
+
*/
|
|
34
|
+
showImg: {
|
|
35
|
+
type: BooleanConstructor;
|
|
36
|
+
default: boolean;
|
|
37
|
+
};
|
|
38
|
+
placement: StringConstructor;
|
|
39
|
+
/**
|
|
40
|
+
* 数据
|
|
41
|
+
*/
|
|
42
|
+
data: {
|
|
43
|
+
type: PropType<{
|
|
44
|
+
userName: string;
|
|
45
|
+
imgUrl: string;
|
|
46
|
+
roleNumber: string;
|
|
47
|
+
tools?: any;
|
|
48
|
+
values: undefined | {
|
|
49
|
+
text: string;
|
|
50
|
+
value: string;
|
|
51
|
+
}[];
|
|
52
|
+
}>;
|
|
53
|
+
};
|
|
54
|
+
espace: ArrayConstructor;
|
|
55
|
+
popperClass: StringConstructor;
|
|
56
|
+
popperAppendToBody: {
|
|
57
|
+
type: BooleanConstructor;
|
|
58
|
+
default: boolean;
|
|
59
|
+
};
|
|
60
|
+
isNewImMode: {
|
|
61
|
+
type: BooleanConstructor;
|
|
62
|
+
default: boolean;
|
|
63
|
+
};
|
|
64
|
+
tiny_mode: StringConstructor;
|
|
65
|
+
tiny_mode_root: BooleanConstructor;
|
|
66
|
+
tiny_template: (FunctionConstructor | ObjectConstructor)[];
|
|
67
|
+
tiny_renderless: FunctionConstructor;
|
|
68
|
+
tiny_theme: StringConstructor;
|
|
69
|
+
tiny_chart_theme: ObjectConstructor;
|
|
70
|
+
};
|
|
71
|
+
|
|
72
|
+
/**
|
|
73
|
+
* Copyright (c) 2022 - present TinyVue Authors.
|
|
74
|
+
* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
|
|
75
|
+
*
|
|
76
|
+
* Use of this source code is governed by an MIT-style license.
|
|
77
|
+
*
|
|
78
|
+
* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
|
|
79
|
+
* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
|
|
80
|
+
* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
|
|
81
|
+
*
|
|
82
|
+
*/
|
|
83
|
+
declare const getUserHref: ({ api, props }: {
|
|
84
|
+
api: any;
|
|
85
|
+
props: any;
|
|
86
|
+
}) => () => any;
|
|
87
|
+
declare const doUserAction: ({ api, props, state, eSpaceCtrl }: {
|
|
88
|
+
api: any;
|
|
89
|
+
props: any;
|
|
90
|
+
state: any;
|
|
91
|
+
eSpaceCtrl: any;
|
|
92
|
+
}) => () => void;
|
|
93
|
+
declare const initEspaceLink: ({ api, props, state, eSpaceCtrl, eSpaceCtrlDisabled }: {
|
|
94
|
+
api: any;
|
|
95
|
+
props: any;
|
|
96
|
+
state: any;
|
|
97
|
+
eSpaceCtrl: any;
|
|
98
|
+
eSpaceCtrlDisabled: any;
|
|
99
|
+
}) => () => void;
|
|
100
|
+
declare const openEspace: ({ api, props, eSpaceCtrl }: {
|
|
101
|
+
api: any;
|
|
102
|
+
props: any;
|
|
103
|
+
eSpaceCtrl: any;
|
|
104
|
+
}) => () => void;
|
|
105
|
+
|
|
106
|
+
declare const testUID: (uid: any) => boolean;
|
|
107
|
+
|
|
108
|
+
type IUserContactProps = ExtractPropTypes<typeof userContactProps>;
|
|
109
|
+
interface IUserContactState {
|
|
110
|
+
initialized: boolean;
|
|
111
|
+
}
|
|
112
|
+
type IUserContactRenderlessParams = ISharedRenderlessFunctionParams<never> & {
|
|
113
|
+
api: IUserContactApi;
|
|
114
|
+
state: IUserContactState;
|
|
115
|
+
props: IUserContactProps;
|
|
116
|
+
};
|
|
117
|
+
interface IUserContactApi {
|
|
118
|
+
state: IUserContactState;
|
|
119
|
+
testUID: ReturnType<typeof testUID>;
|
|
120
|
+
show: ReturnType<typeof ref>;
|
|
121
|
+
getUserHref: ReturnType<typeof getUserHref>;
|
|
122
|
+
initEspaceLink: ReturnType<typeof initEspaceLink>;
|
|
123
|
+
doUserAction: ReturnType<typeof doUserAction>;
|
|
124
|
+
openEspace: ReturnType<typeof openEspace>;
|
|
125
|
+
}
|
|
126
|
+
type IUserContactRenderlessParamUtils = ISharedRenderlessParamUtils<never>;
|
|
127
|
+
|
|
128
|
+
export { IUserContactApi, IUserContactProps, IUserContactRenderlessParamUtils, IUserContactRenderlessParams, IUserContactState };
|
|
@@ -83,10 +83,7 @@ declare const userHeadProps: {
|
|
|
83
83
|
tiny_mode: StringConstructor;
|
|
84
84
|
tiny_mode_root: BooleanConstructor;
|
|
85
85
|
tiny_template: (FunctionConstructor | ObjectConstructor)[];
|
|
86
|
-
tiny_renderless: FunctionConstructor;
|
|
87
|
-
* @property {String} - 头像资源
|
|
88
|
-
* type=icon 时为图标类名,type=label时为字体串,type=image时为资源路径
|
|
89
|
-
*/
|
|
86
|
+
tiny_renderless: FunctionConstructor;
|
|
90
87
|
tiny_theme: StringConstructor;
|
|
91
88
|
tiny_chart_theme: ObjectConstructor;
|
|
92
89
|
};
|
package/upload-list/vue.js
CHANGED
|
@@ -48,7 +48,7 @@ const api = [
|
|
|
48
48
|
"formatFileSize"
|
|
49
49
|
];
|
|
50
50
|
const renderless = (props, { reactive, onMounted, onUnmounted, watch, inject, computed }, { t, parent, mode, emit, service, vm, nextTick, designConfig, useBreakpoint }, { Modal }) => {
|
|
51
|
-
var _a, _b, _c, _d, _e
|
|
51
|
+
var _a, _b, _c, _d, _e;
|
|
52
52
|
const api2 = { getApi };
|
|
53
53
|
parent = inject("uploader").$children[0];
|
|
54
54
|
const constants = parent.$constants;
|
|
@@ -58,12 +58,12 @@ const renderless = (props, { reactive, onMounted, onUnmounted, watch, inject, co
|
|
|
58
58
|
focusing: false,
|
|
59
59
|
shows: false,
|
|
60
60
|
currentBreakpoint: current,
|
|
61
|
-
progressType: ((_a = designConfig == null ? void 0 : designConfig.state) == null ? void 0 : _a.progressType) || "
|
|
62
|
-
progressWidth: (
|
|
63
|
-
progressStrokeWidth: ((
|
|
64
|
-
tooltipDisabled: (
|
|
65
|
-
closeComponent: ((_e = designConfig == null ? void 0 : designConfig.icons) == null ? void 0 : _e.closeComponent) || "icon-
|
|
66
|
-
preViewComponent: (
|
|
61
|
+
progressType: ((_a = designConfig == null ? void 0 : designConfig.state) == null ? void 0 : _a.progressType) || "line",
|
|
62
|
+
progressWidth: (designConfig == null ? void 0 : designConfig.state) && Object.hasOwnProperty.call(designConfig.state, "progressWidth") ? designConfig.state.progressWidth : "68",
|
|
63
|
+
progressStrokeWidth: ((_b = designConfig == null ? void 0 : designConfig.state) == null ? void 0 : _b.progressStrokeWidth) || 4,
|
|
64
|
+
tooltipDisabled: (_d = (_c = designConfig == null ? void 0 : designConfig.state) == null ? void 0 : _c.tooltipDisabled) != null ? _d : false,
|
|
65
|
+
closeComponent: ((_e = designConfig == null ? void 0 : designConfig.icons) == null ? void 0 : _e.closeComponent) || "icon-del",
|
|
66
|
+
preViewComponent: (designConfig == null ? void 0 : designConfig.icons) && Object.hasOwnProperty.call(designConfig.icons, "preViewComponent") ? designConfig.icons.preViewComponent : "icon-fullscreen-left",
|
|
67
67
|
failUploadFileCount: computed(
|
|
68
68
|
() => props.files.reduce((total, item) => total += item.status === "fail" ? 1 : 0, 0)
|
|
69
69
|
),
|
|
@@ -0,0 +1,294 @@
|
|
|
1
|
+
import {
|
|
2
|
+
__spreadValues
|
|
3
|
+
} from "../chunk-G2ADBYYC.js";
|
|
4
|
+
import getScrollbarSize from "../common/deps/scrollbar-width";
|
|
5
|
+
const computedBarSize = (props) => () => {
|
|
6
|
+
let barSize = +props.scrollbarSize;
|
|
7
|
+
if (isNaN(barSize) || barSize < 0) {
|
|
8
|
+
barSize = getScrollbarSize();
|
|
9
|
+
}
|
|
10
|
+
return barSize;
|
|
11
|
+
};
|
|
12
|
+
const analyzeScrolling = ({ props, state }) => () => {
|
|
13
|
+
const width = +props.width;
|
|
14
|
+
const height = +props.height;
|
|
15
|
+
const scrollbarSize = state.scrollbarSize;
|
|
16
|
+
const columnSizes = props.columnSizes;
|
|
17
|
+
const rowSizes = props.rowSizes;
|
|
18
|
+
const columnTotal = columnSizes.reduce((p, c) => p + c, 0);
|
|
19
|
+
const rowTotal = rowSizes.reduce((p, r) => p + r, 0);
|
|
20
|
+
const result = {
|
|
21
|
+
isScrollX: false,
|
|
22
|
+
isScrollY: false,
|
|
23
|
+
columnTotal,
|
|
24
|
+
rowTotal
|
|
25
|
+
};
|
|
26
|
+
if (columnTotal > width && rowTotal > height) {
|
|
27
|
+
result.isScrollX = true;
|
|
28
|
+
result.isScrollY = true;
|
|
29
|
+
} else if (columnTotal <= width && rowTotal <= height) {
|
|
30
|
+
result.isScrollX = false;
|
|
31
|
+
result.isScrollY = false;
|
|
32
|
+
} else if (columnTotal <= width && rowTotal > height) {
|
|
33
|
+
result.isScrollX = columnTotal + scrollbarSize > width;
|
|
34
|
+
result.isScrollY = true;
|
|
35
|
+
} else if (columnTotal > width && rowTotal <= height) {
|
|
36
|
+
result.isScrollX = true;
|
|
37
|
+
result.isScrollY = rowTotal + scrollbarSize > height;
|
|
38
|
+
}
|
|
39
|
+
return result;
|
|
40
|
+
};
|
|
41
|
+
const preprocessVirtualScrollSlice = ({ items, itemSizes, fixedItems }) => {
|
|
42
|
+
const hasStart = fixedItems[0].length > 0;
|
|
43
|
+
const hasEnd = fixedItems[1].length > 0;
|
|
44
|
+
const startInfos = [];
|
|
45
|
+
const infos = [];
|
|
46
|
+
const endInfos = [];
|
|
47
|
+
let startSize = 0;
|
|
48
|
+
let endSize = 0;
|
|
49
|
+
items.forEach((item, i) => {
|
|
50
|
+
const raw = item;
|
|
51
|
+
const size = itemSizes[i];
|
|
52
|
+
const info = {
|
|
53
|
+
raw,
|
|
54
|
+
size,
|
|
55
|
+
start: 0,
|
|
56
|
+
end: 0,
|
|
57
|
+
index: i,
|
|
58
|
+
fixed: void 0,
|
|
59
|
+
offset: void 0,
|
|
60
|
+
startLast: void 0,
|
|
61
|
+
endFirst: void 0,
|
|
62
|
+
isLast: void 0
|
|
63
|
+
};
|
|
64
|
+
if (hasStart && fixedItems[0].includes(i)) {
|
|
65
|
+
startInfos.push(info);
|
|
66
|
+
startSize += size;
|
|
67
|
+
info.fixed = "start";
|
|
68
|
+
} else if (hasEnd && fixedItems[1].includes(i)) {
|
|
69
|
+
endInfos.push(info);
|
|
70
|
+
endSize += size;
|
|
71
|
+
info.fixed = "end";
|
|
72
|
+
} else {
|
|
73
|
+
infos.push(info);
|
|
74
|
+
}
|
|
75
|
+
});
|
|
76
|
+
let allInfos = [...infos];
|
|
77
|
+
if (hasStart || hasEnd) {
|
|
78
|
+
allInfos = [...startInfos, ...infos, ...endInfos];
|
|
79
|
+
if (hasStart && startInfos[startInfos.length - 1]) {
|
|
80
|
+
startInfos[startInfos.length - 1].startLast = true;
|
|
81
|
+
}
|
|
82
|
+
if (hasEnd && endInfos[0]) {
|
|
83
|
+
endInfos[0].endFirst = true;
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
if (allInfos[allInfos.length - 1]) {
|
|
87
|
+
allInfos[allInfos.length - 1].isLast = true;
|
|
88
|
+
}
|
|
89
|
+
let reverseAllInfos = [...allInfos].reverse();
|
|
90
|
+
let total = 0;
|
|
91
|
+
allInfos.forEach((info) => {
|
|
92
|
+
info.start = total;
|
|
93
|
+
total += info.size;
|
|
94
|
+
});
|
|
95
|
+
total = 0;
|
|
96
|
+
reverseAllInfos.forEach((info) => {
|
|
97
|
+
info.end = total;
|
|
98
|
+
total += info.size;
|
|
99
|
+
});
|
|
100
|
+
return { startSize, endSize, startInfos, infos, endInfos };
|
|
101
|
+
};
|
|
102
|
+
const virtualScrollSlice = ({
|
|
103
|
+
size,
|
|
104
|
+
buffer,
|
|
105
|
+
startSize,
|
|
106
|
+
endSize,
|
|
107
|
+
startInfos,
|
|
108
|
+
infos,
|
|
109
|
+
endInfos,
|
|
110
|
+
pos,
|
|
111
|
+
isScroll,
|
|
112
|
+
barSize
|
|
113
|
+
}) => {
|
|
114
|
+
const list = [];
|
|
115
|
+
const viewStart = pos + startSize - buffer;
|
|
116
|
+
const viewEnd = pos + size - endSize + buffer - (isScroll ? barSize : 0);
|
|
117
|
+
startInfos.forEach((info) => list.push(info));
|
|
118
|
+
let firstInfo, firstOffset;
|
|
119
|
+
for (let i = 0; i < infos.length; i++) {
|
|
120
|
+
const info = infos[i];
|
|
121
|
+
const itemStart = info.start;
|
|
122
|
+
const itemEnd = itemStart + info.size;
|
|
123
|
+
if (itemEnd < viewStart) {
|
|
124
|
+
continue;
|
|
125
|
+
}
|
|
126
|
+
if (itemStart >= viewStart && itemStart < viewEnd || itemEnd > viewStart && itemEnd <= viewEnd) {
|
|
127
|
+
list.push(info);
|
|
128
|
+
if (!firstInfo) {
|
|
129
|
+
firstInfo = info;
|
|
130
|
+
firstOffset = itemStart - (pos + startSize);
|
|
131
|
+
}
|
|
132
|
+
info.offset = firstOffset;
|
|
133
|
+
} else if (firstInfo) {
|
|
134
|
+
break;
|
|
135
|
+
}
|
|
136
|
+
}
|
|
137
|
+
endInfos.forEach((info) => list.push(info));
|
|
138
|
+
return list;
|
|
139
|
+
};
|
|
140
|
+
const createVirtualScroll = ({ api, props, state }) => () => {
|
|
141
|
+
let { width, height, columns, columnSizes, rows, rowSizes, columnBuffer, rowBuffer, fixedColumns, fixedRows } = props;
|
|
142
|
+
let { scrollbarSize } = state;
|
|
143
|
+
width = +width;
|
|
144
|
+
height = +height;
|
|
145
|
+
columnBuffer = +columnBuffer;
|
|
146
|
+
rowBuffer = +rowBuffer;
|
|
147
|
+
const { isScrollX, isScrollY, columnTotal, rowTotal } = api.analyzeScrolling();
|
|
148
|
+
const boxStyle = { width: `${width}px`, height: `${height}px`, position: "relative", overflow: "auto" };
|
|
149
|
+
const xAxisStyle = { width: `${columnTotal}px`, height: "1px" };
|
|
150
|
+
const yAxisStyle = { height: `${rowTotal - 1}px`, width: "1px" };
|
|
151
|
+
const viewBaseStyle = { width: "100%", height: "100%", position: "absolute", overflow: "clip" };
|
|
152
|
+
const {
|
|
153
|
+
startSize: colStartSize,
|
|
154
|
+
endSize: colEndSize,
|
|
155
|
+
startInfos: colStartInfos,
|
|
156
|
+
infos: colInfos,
|
|
157
|
+
endInfos: colEndInfos
|
|
158
|
+
} = preprocessVirtualScrollSlice({ items: columns, itemSizes: columnSizes, fixedItems: fixedColumns });
|
|
159
|
+
const {
|
|
160
|
+
startSize: rowStartSize,
|
|
161
|
+
endSize: rowEndSize,
|
|
162
|
+
startInfos: rowStartInfos,
|
|
163
|
+
infos: rowInfos,
|
|
164
|
+
endInfos: rowEndInfos
|
|
165
|
+
} = preprocessVirtualScrollSlice({ items: rows, itemSizes: rowSizes, fixedItems: fixedRows });
|
|
166
|
+
return {
|
|
167
|
+
sliceColumn: (scrollLeft) => virtualScrollSlice({
|
|
168
|
+
pos: scrollLeft,
|
|
169
|
+
size: width,
|
|
170
|
+
buffer: columnBuffer,
|
|
171
|
+
startSize: colStartSize,
|
|
172
|
+
endSize: colEndSize,
|
|
173
|
+
startInfos: colStartInfos,
|
|
174
|
+
infos: colInfos,
|
|
175
|
+
endInfos: colEndInfos,
|
|
176
|
+
isScroll: isScrollY,
|
|
177
|
+
barSize: scrollbarSize
|
|
178
|
+
}),
|
|
179
|
+
sliceRow: (scrollTop) => virtualScrollSlice({
|
|
180
|
+
pos: scrollTop,
|
|
181
|
+
size: height,
|
|
182
|
+
buffer: rowBuffer,
|
|
183
|
+
startSize: rowStartSize,
|
|
184
|
+
endSize: rowEndSize,
|
|
185
|
+
startInfos: rowStartInfos,
|
|
186
|
+
infos: rowInfos,
|
|
187
|
+
endInfos: rowEndInfos,
|
|
188
|
+
isScroll: isScrollX,
|
|
189
|
+
barSize: scrollbarSize
|
|
190
|
+
}),
|
|
191
|
+
buildView: ({ slicedCols, slicedRows, scrollLeft, scrollTop }) => {
|
|
192
|
+
const viewRows = [];
|
|
193
|
+
const viewCols = [];
|
|
194
|
+
const result = {
|
|
195
|
+
isScrollX,
|
|
196
|
+
isScrollY,
|
|
197
|
+
boxStyle,
|
|
198
|
+
xAxisStyle,
|
|
199
|
+
yAxisStyle,
|
|
200
|
+
viewStyle: __spreadValues({ left: `${scrollLeft}px`, top: `${scrollTop}px` }, viewBaseStyle),
|
|
201
|
+
viewRows,
|
|
202
|
+
viewCols
|
|
203
|
+
};
|
|
204
|
+
let rowWidth = 0;
|
|
205
|
+
slicedCols.forEach((info) => {
|
|
206
|
+
rowWidth += info.size;
|
|
207
|
+
viewCols.push({
|
|
208
|
+
info,
|
|
209
|
+
key: `c-${info.index}`,
|
|
210
|
+
style: {
|
|
211
|
+
width: `${info.size}px`,
|
|
212
|
+
position: info.fixed ? "sticky" : void 0,
|
|
213
|
+
zIndex: info.fixed ? 1 : void 0,
|
|
214
|
+
left: info.fixed === "start" ? `${info.start}px` : void 0,
|
|
215
|
+
right: info.fixed === "end" ? `${info.end}px` : void 0,
|
|
216
|
+
transform: info.offset === void 0 ? void 0 : `translateX(${info.offset}px)`
|
|
217
|
+
}
|
|
218
|
+
});
|
|
219
|
+
});
|
|
220
|
+
slicedRows.forEach((info) => {
|
|
221
|
+
viewRows.push({
|
|
222
|
+
info,
|
|
223
|
+
key: `r-${info.index}`,
|
|
224
|
+
style: {
|
|
225
|
+
width: `${rowWidth}px`,
|
|
226
|
+
height: `${info.size}px`,
|
|
227
|
+
position: info.fixed ? "sticky" : void 0,
|
|
228
|
+
top: info.fixed === "start" ? `${info.start}px` : void 0,
|
|
229
|
+
bottom: info.fixed === "end" ? `${info.end}px` : void 0,
|
|
230
|
+
zIndex: info.fixed ? 2 : void 0,
|
|
231
|
+
transform: info.offset === void 0 ? void 0 : `translateY(${info.offset}px)`
|
|
232
|
+
}
|
|
233
|
+
});
|
|
234
|
+
});
|
|
235
|
+
return result;
|
|
236
|
+
}
|
|
237
|
+
};
|
|
238
|
+
};
|
|
239
|
+
const onScroll = ({ emit, state }) => (e, force = false) => {
|
|
240
|
+
const sLeft = e ? e.target.scrollLeft : 0;
|
|
241
|
+
const sTop = e ? e.target.scrollTop : 0;
|
|
242
|
+
const rangeThreshold = 5;
|
|
243
|
+
if (state.scrollLeft !== sLeft || force) {
|
|
244
|
+
state.scrollLeft = sLeft;
|
|
245
|
+
state.slicedCols = state.vs.sliceColumn(sLeft);
|
|
246
|
+
}
|
|
247
|
+
if (state.scrollTop !== sTop || force) {
|
|
248
|
+
state.scrollTop = sTop;
|
|
249
|
+
state.slicedRows = state.vs.sliceRow(sTop);
|
|
250
|
+
}
|
|
251
|
+
state.ctx = state.vs.buildView({
|
|
252
|
+
slicedCols: state.slicedCols,
|
|
253
|
+
slicedRows: state.slicedRows,
|
|
254
|
+
scrollLeft: sLeft,
|
|
255
|
+
scrollTop: sTop
|
|
256
|
+
});
|
|
257
|
+
if (state.isReady) {
|
|
258
|
+
state.isTop = sTop < rangeThreshold;
|
|
259
|
+
state.isBottom = sTop > state.maxTop - rangeThreshold;
|
|
260
|
+
state.isLeft = sLeft < rangeThreshold;
|
|
261
|
+
state.isRight = sLeft > state.maxLeft - rangeThreshold;
|
|
262
|
+
}
|
|
263
|
+
state.slotParams = {
|
|
264
|
+
viewRows: state.ctx.viewRows,
|
|
265
|
+
viewCols: state.ctx.viewCols,
|
|
266
|
+
isScrollX: state.ctx.isScrollX,
|
|
267
|
+
isScrollY: state.ctx.isScrollY,
|
|
268
|
+
isTop: state.isTop,
|
|
269
|
+
isBottom: state.isBottom,
|
|
270
|
+
isLeft: state.isLeft,
|
|
271
|
+
isRight: state.isRight
|
|
272
|
+
};
|
|
273
|
+
emit("change", state.slotParams);
|
|
274
|
+
};
|
|
275
|
+
const refresh = ({ api, state, vm, nextTick }) => (options = {}) => {
|
|
276
|
+
const { isKeepScrollTop = false, isKeepScrollLeft = false } = options || {};
|
|
277
|
+
const lastTop = isKeepScrollTop ? state.scrollTop : 0;
|
|
278
|
+
const lastLeft = isKeepScrollLeft ? state.scrollLeft : 0;
|
|
279
|
+
state.vs = api.createVirtualScroll();
|
|
280
|
+
api.onScroll({ target: { scrollLeft: lastLeft, scrollTop: lastTop } }, true);
|
|
281
|
+
nextTick(() => {
|
|
282
|
+
state.maxTop = vm.$el.scrollHeight - vm.$el.offsetHeight;
|
|
283
|
+
state.maxLeft = vm.$el.scrollWidth - vm.$el.offsetWidth;
|
|
284
|
+
vm.$el.scrollTop = lastTop;
|
|
285
|
+
vm.$el.scrollLeft = lastLeft;
|
|
286
|
+
});
|
|
287
|
+
};
|
|
288
|
+
export {
|
|
289
|
+
analyzeScrolling,
|
|
290
|
+
computedBarSize,
|
|
291
|
+
createVirtualScroll,
|
|
292
|
+
onScroll,
|
|
293
|
+
refresh
|
|
294
|
+
};
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import "../chunk-G2ADBYYC.js";
|
|
2
|
+
import { computedBarSize, analyzeScrolling, createVirtualScroll, onScroll, refresh } from "./index";
|
|
3
|
+
const api = ["state", "onScroll", "refresh"];
|
|
4
|
+
const renderless = (props, { reactive, computed, onMounted }, { emit, vm, nextTick }) => {
|
|
5
|
+
const api2 = {};
|
|
6
|
+
const state = reactive({
|
|
7
|
+
scrollbarSize: computed(() => api2.computedBarSize()),
|
|
8
|
+
vs: null,
|
|
9
|
+
scrollLeft: -1,
|
|
10
|
+
scrollTop: -1,
|
|
11
|
+
slicedCols: [],
|
|
12
|
+
slicedRows: [],
|
|
13
|
+
ctx: {},
|
|
14
|
+
isReady: false,
|
|
15
|
+
maxLeft: 0,
|
|
16
|
+
maxTop: 0,
|
|
17
|
+
isTop: true,
|
|
18
|
+
isBottom: false,
|
|
19
|
+
isLeft: true,
|
|
20
|
+
isRight: false,
|
|
21
|
+
slotParams: {}
|
|
22
|
+
});
|
|
23
|
+
Object.assign(api2, {
|
|
24
|
+
state,
|
|
25
|
+
computedBarSize: computedBarSize(props),
|
|
26
|
+
analyzeScrolling: analyzeScrolling({ props, state }),
|
|
27
|
+
createVirtualScroll: createVirtualScroll({ api: api2, props, state }),
|
|
28
|
+
onScroll: onScroll({ emit, state }),
|
|
29
|
+
refresh: refresh({ api: api2, state, vm, nextTick })
|
|
30
|
+
});
|
|
31
|
+
state.vs = api2.createVirtualScroll();
|
|
32
|
+
api2.onScroll();
|
|
33
|
+
onMounted(() => {
|
|
34
|
+
state.maxTop = vm.$el.scrollHeight - vm.$el.offsetHeight;
|
|
35
|
+
state.maxLeft = vm.$el.scrollWidth - vm.$el.offsetWidth;
|
|
36
|
+
state.isReady = true;
|
|
37
|
+
});
|
|
38
|
+
return api2;
|
|
39
|
+
};
|
|
40
|
+
export {
|
|
41
|
+
api,
|
|
42
|
+
renderless
|
|
43
|
+
};
|
|
@@ -0,0 +1,168 @@
|
|
|
1
|
+
import {
|
|
2
|
+
__objRest,
|
|
3
|
+
__spreadProps,
|
|
4
|
+
__spreadValues
|
|
5
|
+
} from "../chunk-G2ADBYYC.js";
|
|
6
|
+
const kebab = (key) => String(key).replace(/\B([A-Z])/g, "-$1").toLowerCase();
|
|
7
|
+
const fromProps = (props) => {
|
|
8
|
+
const treeOp = props.treeOp || {};
|
|
9
|
+
const { nodeKey: treeNodeKey, props: treeProps, data = [], defaultExpandedKeys } = treeOp;
|
|
10
|
+
const _a = treeOp, { defaultExpandAll, events = {} } = _a, others = __objRest(_a, ["defaultExpandAll", "events"]);
|
|
11
|
+
const nodeKey = treeNodeKey || "id";
|
|
12
|
+
const childrenKey = treeProps && treeProps.children || "children";
|
|
13
|
+
return { data, nodeKey, childrenKey, defaultExpandedKeys, defaultExpandAll, events, others };
|
|
14
|
+
};
|
|
15
|
+
const flattenTreeData = ({ expandeds, data, nodeKey, childrenKey }) => {
|
|
16
|
+
const chart = [];
|
|
17
|
+
const stack = [];
|
|
18
|
+
const flatChart = (treeData) => {
|
|
19
|
+
if (Array.isArray(treeData) && treeData.length > 0) {
|
|
20
|
+
treeData.forEach((item) => {
|
|
21
|
+
chart.push([...stack, item]);
|
|
22
|
+
if (expandeds.includes(item[nodeKey])) {
|
|
23
|
+
stack.push(item);
|
|
24
|
+
flatChart(item[childrenKey]);
|
|
25
|
+
stack.pop(item);
|
|
26
|
+
}
|
|
27
|
+
});
|
|
28
|
+
}
|
|
29
|
+
};
|
|
30
|
+
flatChart(data);
|
|
31
|
+
return chart;
|
|
32
|
+
};
|
|
33
|
+
const computeVsBoxOptions = ({ props, expandeds, data, nodeKey, childrenKey }) => {
|
|
34
|
+
const width = +props.width;
|
|
35
|
+
const height = +props.height;
|
|
36
|
+
const rowHeight = +props.rowHeight;
|
|
37
|
+
const scrollbarSize = +props.scrollbarSize;
|
|
38
|
+
const rows = flattenTreeData({ expandeds, data, nodeKey, childrenKey });
|
|
39
|
+
const rowSizes = rows.map(() => rowHeight);
|
|
40
|
+
const vsBoxOptions = {
|
|
41
|
+
width,
|
|
42
|
+
height,
|
|
43
|
+
columns: ["c-1"],
|
|
44
|
+
columnSizes: [width - scrollbarSize],
|
|
45
|
+
rows,
|
|
46
|
+
rowSizes,
|
|
47
|
+
fixedColumns: [[], []],
|
|
48
|
+
fixedRows: [[], []],
|
|
49
|
+
spanConfig: [[]],
|
|
50
|
+
scrollbarSize: props.scrollbarSize
|
|
51
|
+
};
|
|
52
|
+
return vsBoxOptions;
|
|
53
|
+
};
|
|
54
|
+
const computeState = ({ props, state }) => () => {
|
|
55
|
+
const { data, nodeKey, childrenKey, defaultExpandedKeys, defaultExpandAll, events, others } = fromProps(props);
|
|
56
|
+
let expandeds = [];
|
|
57
|
+
if (!state._expandedsInited) {
|
|
58
|
+
if (defaultExpandAll) {
|
|
59
|
+
const traverse = (arr) => {
|
|
60
|
+
arr.forEach((item) => {
|
|
61
|
+
const key = item[nodeKey];
|
|
62
|
+
const children = item[childrenKey];
|
|
63
|
+
if (Array.isArray(children) && children.length) {
|
|
64
|
+
expandeds.push(key);
|
|
65
|
+
traverse(children);
|
|
66
|
+
}
|
|
67
|
+
});
|
|
68
|
+
};
|
|
69
|
+
if (Array.isArray(data) && data.length) {
|
|
70
|
+
traverse(data);
|
|
71
|
+
}
|
|
72
|
+
} else if (Array.isArray(defaultExpandedKeys) && defaultExpandedKeys.length) {
|
|
73
|
+
expandeds = [...defaultExpandedKeys];
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
expandeds = state._expandedsInited ? state.expandeds : expandeds;
|
|
77
|
+
const defaultProps = { showCheckEasily: false, willChangeView: false };
|
|
78
|
+
const treeOptions = __spreadValues(__spreadProps(__spreadValues({}, others), { nodeKey, defaultExpandedKeys: expandeds }), defaultProps);
|
|
79
|
+
const treeEvents = {};
|
|
80
|
+
for (let key in events) {
|
|
81
|
+
const eventKey = kebab(key);
|
|
82
|
+
treeEvents[eventKey] = events[key];
|
|
83
|
+
}
|
|
84
|
+
const vsBoxOptions = computeVsBoxOptions({ props, expandeds, data, nodeKey, childrenKey });
|
|
85
|
+
state.expandeds = expandeds;
|
|
86
|
+
state.treeOptions = treeOptions;
|
|
87
|
+
state.treeEvents = treeEvents;
|
|
88
|
+
state.vsBoxOptions = vsBoxOptions;
|
|
89
|
+
if (!state._expandedsInited) {
|
|
90
|
+
state._expandedsInited = true;
|
|
91
|
+
}
|
|
92
|
+
};
|
|
93
|
+
const shouldRender = (state) => (node) => {
|
|
94
|
+
return node && node.data && state.renderRows.includes(node.data);
|
|
95
|
+
};
|
|
96
|
+
const onVsBoxChange = ({ props, state }) => ({ viewRows }) => {
|
|
97
|
+
const rowHeight = +props.rowHeight;
|
|
98
|
+
const renderRows = [];
|
|
99
|
+
viewRows.forEach((viewRow) => {
|
|
100
|
+
viewRow.info.raw.forEach((treeRow) => {
|
|
101
|
+
if (!renderRows.includes(treeRow)) {
|
|
102
|
+
renderRows.push(treeRow);
|
|
103
|
+
}
|
|
104
|
+
});
|
|
105
|
+
});
|
|
106
|
+
state.renderRows = renderRows;
|
|
107
|
+
const firstViewRow = viewRows[0];
|
|
108
|
+
if (firstViewRow) {
|
|
109
|
+
const translateYValue = firstViewRow.info.offset - (firstViewRow.info.raw.length - 1) * rowHeight;
|
|
110
|
+
state.treeStyle = { transform: `translateY(${translateYValue}px)` };
|
|
111
|
+
}
|
|
112
|
+
};
|
|
113
|
+
const onTreeChange = ({ nextTick, props, state, vm }) => () => {
|
|
114
|
+
const vsBoxVm = vm.$refs.vsBox;
|
|
115
|
+
const treeVm = vm.$refs.tree;
|
|
116
|
+
const { data, nodeKey, childrenKey } = fromProps(props);
|
|
117
|
+
nextTick(() => {
|
|
118
|
+
const expandeds = [];
|
|
119
|
+
const traverse = (childNodes) => {
|
|
120
|
+
if (Array.isArray(childNodes) && childNodes.length > 0) {
|
|
121
|
+
childNodes.forEach((node) => {
|
|
122
|
+
if (node.expanded) {
|
|
123
|
+
expandeds.push(node.data[nodeKey]);
|
|
124
|
+
traverse(node.childNodes);
|
|
125
|
+
}
|
|
126
|
+
});
|
|
127
|
+
}
|
|
128
|
+
};
|
|
129
|
+
traverse(treeVm.state.root.childNodes);
|
|
130
|
+
state.expandeds = expandeds;
|
|
131
|
+
state.treeOptions = __spreadProps(__spreadValues({}, state.treeOptions), { defaultExpandedKeys: expandeds });
|
|
132
|
+
state.vsBoxOptions = computeVsBoxOptions({ props, expandeds, data, nodeKey, childrenKey });
|
|
133
|
+
setTimeout(() => vsBoxVm.refresh({ isKeepScrollTop: true }));
|
|
134
|
+
});
|
|
135
|
+
};
|
|
136
|
+
const getTreeInstance = (vm) => () => vm.$refs.tree;
|
|
137
|
+
const keepExpandStatus = (state) => () => {
|
|
138
|
+
state._keepExpandStatus = true;
|
|
139
|
+
};
|
|
140
|
+
const keepScrollTop = (state) => () => {
|
|
141
|
+
state._keepScrollTop = true;
|
|
142
|
+
};
|
|
143
|
+
const refresh = ({ api, state, vm }) => () => {
|
|
144
|
+
const isKeepExpandStatus = state._keepExpandStatus || false;
|
|
145
|
+
const isKeepScrollTop = state._keepScrollTop || false;
|
|
146
|
+
if (!isKeepExpandStatus) {
|
|
147
|
+
state._expandedsInited = false;
|
|
148
|
+
}
|
|
149
|
+
api.computeState();
|
|
150
|
+
const vsBoxVm = vm.$refs.vsBox;
|
|
151
|
+
if (vsBoxVm) {
|
|
152
|
+
setTimeout(() => vsBoxVm.refresh({ isKeepScrollTop }));
|
|
153
|
+
}
|
|
154
|
+
if (state._keepExpandStatus)
|
|
155
|
+
state._keepExpandStatus = false;
|
|
156
|
+
if (state._keepScrollTop)
|
|
157
|
+
state._keepScrollTop = false;
|
|
158
|
+
};
|
|
159
|
+
export {
|
|
160
|
+
computeState,
|
|
161
|
+
getTreeInstance,
|
|
162
|
+
keepExpandStatus,
|
|
163
|
+
keepScrollTop,
|
|
164
|
+
onTreeChange,
|
|
165
|
+
onVsBoxChange,
|
|
166
|
+
refresh,
|
|
167
|
+
shouldRender
|
|
168
|
+
};
|