@meethive/components 0.0.3 → 0.0.5
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/es/AutoComplete/AutoComplete.js +71 -80
- package/es/BadgeStatus/Badge.js +38 -47
- package/es/CardSelect/CardSelect.js +115 -137
- package/es/CheckButton/CheckButton.js +102 -118
- package/es/ConfigProvider/ConfigProvider.js +44 -68
- package/es/DragModal/DragModal.js +191 -212
- package/es/EditTable/Body.js +158 -189
- package/es/EditTable/CellRender.js +10 -12
- package/es/EditTable/EditTable.js +385 -434
- package/es/EditTable/FormItem.js +140 -169
- package/es/EditTable/Group.js +171 -204
- package/es/EditTable/Header.js +57 -63
- package/es/EditTable/HeaderRender.js +10 -12
- package/es/EditTable/components/ContextMenu/Menu.js +78 -86
- package/es/EditTable/components/Search/Search.js +151 -163
- package/es/EditTable/components/Search/Sort.js +104 -119
- package/es/Ellipsis/Ellipsis.js +144 -148
- package/es/Empty/Empty.js +51 -57
- package/es/FullPage/FullPage.js +20 -19
- package/es/Icon/Icon.js +42 -49
- package/es/LocaleProvider/LocaleProvider.js +32 -38
- package/es/Markdown/Markdown.js +101 -118
- package/es/PermissionButton/PermissionButton.js +118 -118
- package/es/ProLayout/Basic/BasicLayout.js +361 -418
- package/es/ProLayout/Basic/Header.js +97 -111
- package/es/ProLayout/PageContainer/index.js +298 -344
- package/es/ProLayout/SiderMenu/BaseMenu.js +233 -240
- package/es/ProTable/Alert.js +39 -40
- package/es/ProTable/Content.js +84 -97
- package/es/ProTable/Header.js +32 -33
- package/es/ProTable/Pagination.js +56 -55
- package/es/ProTable/ProTable.js +256 -276
- package/es/RadioButton/RadioButton.js +48 -53
- package/es/Scrollbar/Bar.js +65 -76
- package/es/Scrollbar/Scrollbar.js +129 -161
- package/es/Scrollbar/Thumb.js +101 -150
- package/es/Search/Item.js +208 -236
- package/es/Search/Search.js +90 -90
- package/es/Skeleton/Skeleton.js +26 -27
- package/es/Skeleton/components/DashBoardCard.js +26 -27
- package/es/Skeleton/components/DashBoardChart.js +26 -27
- package/es/Skeleton/components/Detail.js +26 -27
- package/es/Skeleton/components/Drawer.js +26 -27
- package/es/Skeleton/components/Item.js +55 -54
- package/es/Skeleton/components/List.js +29 -27
- package/es/Skeleton/components/ListCard.js +28 -28
- package/es/Skeleton/components/ListCardItem.js +20 -20
- package/es/Skeleton/components/ListTable.js +26 -27
- package/es/Skeleton/components/Page.js +27 -26
- package/es/Skeleton/components/Search.js +16 -16
- package/es/Skeleton/components/Tree.js +26 -27
- package/es/TimeFormat/TimeFormat.js +32 -36
- package/es/Title/Title.js +23 -26
- package/es/ValueItem/ValueItem.js +100 -113
- package/es/VirtualTable/VirtualTable.js +235 -271
- package/lib/AutoComplete/AutoComplete.js +71 -80
- package/lib/BadgeStatus/Badge.js +38 -47
- package/lib/CardSelect/CardSelect.js +115 -137
- package/lib/CheckButton/CheckButton.js +102 -118
- package/lib/ConfigProvider/ConfigProvider.js +44 -68
- package/lib/DragModal/DragModal.js +191 -212
- package/lib/EditTable/Body.js +158 -189
- package/lib/EditTable/CellRender.js +10 -12
- package/lib/EditTable/EditTable.js +385 -434
- package/lib/EditTable/FormItem.js +140 -169
- package/lib/EditTable/Group.js +171 -204
- package/lib/EditTable/Header.js +57 -63
- package/lib/EditTable/HeaderRender.js +10 -12
- package/lib/EditTable/components/ContextMenu/Menu.js +78 -86
- package/lib/EditTable/components/Search/Search.js +151 -163
- package/lib/EditTable/components/Search/Sort.js +104 -119
- package/lib/Ellipsis/Ellipsis.js +144 -148
- package/lib/Empty/Empty.js +51 -57
- package/lib/FullPage/FullPage.js +20 -19
- package/lib/Icon/Icon.js +42 -49
- package/lib/LocaleProvider/LocaleProvider.js +32 -38
- package/lib/Markdown/Markdown.js +101 -118
- package/lib/PermissionButton/PermissionButton.js +118 -118
- package/lib/ProLayout/Basic/BasicLayout.js +361 -418
- package/lib/ProLayout/Basic/Header.js +97 -111
- package/lib/ProLayout/PageContainer/index.js +298 -344
- package/lib/ProLayout/SiderMenu/BaseMenu.js +233 -240
- package/lib/ProTable/Alert.js +39 -40
- package/lib/ProTable/Content.js +84 -97
- package/lib/ProTable/Header.js +32 -33
- package/lib/ProTable/Pagination.js +56 -55
- package/lib/ProTable/ProTable.js +256 -276
- package/lib/RadioButton/RadioButton.js +48 -53
- package/lib/Scrollbar/Bar.js +65 -76
- package/lib/Scrollbar/Scrollbar.js +129 -161
- package/lib/Scrollbar/Thumb.js +101 -150
- package/lib/Search/Item.js +208 -236
- package/lib/Search/Search.js +90 -90
- package/lib/Skeleton/Skeleton.js +26 -27
- package/lib/Skeleton/components/DashBoardCard.js +26 -27
- package/lib/Skeleton/components/DashBoardChart.js +26 -27
- package/lib/Skeleton/components/Detail.js +26 -27
- package/lib/Skeleton/components/Drawer.js +26 -27
- package/lib/Skeleton/components/Item.js +55 -54
- package/lib/Skeleton/components/List.js +29 -27
- package/lib/Skeleton/components/ListCard.js +28 -28
- package/lib/Skeleton/components/ListCardItem.js +20 -20
- package/lib/Skeleton/components/ListTable.js +26 -27
- package/lib/Skeleton/components/Page.js +27 -26
- package/lib/Skeleton/components/Search.js +16 -16
- package/lib/Skeleton/components/Tree.js +26 -27
- package/lib/TimeFormat/TimeFormat.js +32 -36
- package/lib/Title/Title.js +23 -26
- package/lib/ValueItem/ValueItem.js +100 -113
- package/lib/VirtualTable/VirtualTable.js +235 -271
- package/package.json +1 -1
package/es/EditTable/Body.js
CHANGED
|
@@ -1,189 +1,158 @@
|
|
|
1
|
-
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
import
|
|
7
|
-
import
|
|
8
|
-
import
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
const
|
|
35
|
-
|
|
36
|
-
const viewScrollRef = ref()
|
|
37
|
-
const tableCenterRef = ref()
|
|
38
|
-
const virtualRang = reactive({
|
|
39
|
-
start: 0,
|
|
40
|
-
end: 15
|
|
41
|
-
})
|
|
42
|
-
const containerStyle = ref(0)
|
|
43
|
-
const context = useRightMenuContext()
|
|
44
|
-
const hScroll = useHScroll()
|
|
45
|
-
|
|
46
|
-
let
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
const
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
})
|
|
120
|
-
}
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
(
|
|
130
|
-
|
|
131
|
-
}
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
watch(
|
|
136
|
-
()
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
)
|
|
160
|
-
|
|
161
|
-
watch(
|
|
162
|
-
() => props.groupKey,
|
|
163
|
-
() => {
|
|
164
|
-
if (props.openGroup) {
|
|
165
|
-
scrollTo(0)
|
|
166
|
-
}
|
|
167
|
-
}
|
|
168
|
-
)
|
|
169
|
-
|
|
170
|
-
expose({
|
|
171
|
-
scrollTo,
|
|
172
|
-
updateSelectedKeys
|
|
173
|
-
})
|
|
174
|
-
|
|
175
|
-
return {
|
|
176
|
-
hashId,
|
|
177
|
-
viewScrollRef,
|
|
178
|
-
tableCenterRef,
|
|
179
|
-
virtualRang,
|
|
180
|
-
containerStyle,
|
|
181
|
-
hScroll,
|
|
182
|
-
selectedRowKeys,
|
|
183
|
-
virtualData,
|
|
184
|
-
onScroll,
|
|
185
|
-
showContextMenu,
|
|
186
|
-
rowClick
|
|
187
|
-
}
|
|
188
|
-
}
|
|
189
|
-
})
|
|
1
|
+
import { defineComponent, ref, reactive, computed, watch, onMounted, onBeforeUnmount, nextTick } from 'vue';
|
|
2
|
+
import ContextMenu from './components/ContextMenu';
|
|
3
|
+
import { useHScroll, useRightMenuContext } from './hooks';
|
|
4
|
+
import { randomString } from '@meethive/utils';
|
|
5
|
+
import { bodyProps } from './props';
|
|
6
|
+
import Empty from '../Empty/Empty.js';
|
|
7
|
+
import CellRender from './CellRender.js';
|
|
8
|
+
import genEditTableStyle from './style';
|
|
9
|
+
export default defineComponent({
|
|
10
|
+
name: 'JEditTableBody',
|
|
11
|
+
components: {
|
|
12
|
+
Empty,
|
|
13
|
+
CellRender
|
|
14
|
+
},
|
|
15
|
+
props: {
|
|
16
|
+
...bodyProps(),
|
|
17
|
+
groupKey: {
|
|
18
|
+
type: [String, Number],
|
|
19
|
+
default: undefined
|
|
20
|
+
},
|
|
21
|
+
width: {
|
|
22
|
+
type: Number
|
|
23
|
+
},
|
|
24
|
+
readonly: {
|
|
25
|
+
type: Boolean,
|
|
26
|
+
default: false
|
|
27
|
+
}
|
|
28
|
+
},
|
|
29
|
+
emits: ['update:dataSource', 'scrollDown'],
|
|
30
|
+
setup(props, {
|
|
31
|
+
emit,
|
|
32
|
+
expose
|
|
33
|
+
}) {
|
|
34
|
+
const prefixCls = computed(() => 'jetlinks-edit-table');
|
|
35
|
+
const [wrapSSR, hashId] = genEditTableStyle(prefixCls);
|
|
36
|
+
const viewScrollRef = ref();
|
|
37
|
+
const tableCenterRef = ref();
|
|
38
|
+
const virtualRang = reactive({
|
|
39
|
+
start: 0,
|
|
40
|
+
end: 15
|
|
41
|
+
});
|
|
42
|
+
const containerStyle = ref(0);
|
|
43
|
+
const context = useRightMenuContext();
|
|
44
|
+
const hScroll = useHScroll();
|
|
45
|
+
let scrollLock = ref(false);
|
|
46
|
+
let menuInstance;
|
|
47
|
+
const maxLen = computed(() => {
|
|
48
|
+
return Math.trunc(props.height / props.cellHeight);
|
|
49
|
+
});
|
|
50
|
+
const selectedRowKeys = ref([]);
|
|
51
|
+
const virtualData = computed(() => {
|
|
52
|
+
return props.dataSource.slice(virtualRang.start, virtualRang.end);
|
|
53
|
+
});
|
|
54
|
+
const onScroll = () => {
|
|
55
|
+
if (!viewScrollRef.value) return;
|
|
56
|
+
const height = viewScrollRef.value.scrollTop;
|
|
57
|
+
const clientHeight = viewScrollRef.value.clientHeight;
|
|
58
|
+
const _index = Math.round(height / props.cellHeight) - 1;
|
|
59
|
+
const start = _index < 0 ? 0 : _index;
|
|
60
|
+
const end = start + maxLen.value + 4;
|
|
61
|
+
if (height + clientHeight >= props.dataSource.length * props.cellHeight && !scrollLock.value) {
|
|
62
|
+
emit('scrollDown');
|
|
63
|
+
scrollLock.value = true;
|
|
64
|
+
}
|
|
65
|
+
virtualRang.start = start;
|
|
66
|
+
virtualRang.end = end;
|
|
67
|
+
};
|
|
68
|
+
const scrollTo = index => {
|
|
69
|
+
if (viewScrollRef.value) {
|
|
70
|
+
viewScrollRef.value.scrollTop = index * props.cellHeight;
|
|
71
|
+
}
|
|
72
|
+
};
|
|
73
|
+
const showContextMenu = (e, record, _index) => {
|
|
74
|
+
e.preventDefault();
|
|
75
|
+
if (props.disableMenu) {
|
|
76
|
+
const newRecord = {
|
|
77
|
+
...record,
|
|
78
|
+
__index: _index
|
|
79
|
+
};
|
|
80
|
+
menuInstance = ContextMenu(e, newRecord, context);
|
|
81
|
+
}
|
|
82
|
+
};
|
|
83
|
+
const rowClick = record => {
|
|
84
|
+
if (props.rowSelection?.selectedRowKeys) {
|
|
85
|
+
const rowSet = new Set(selectedRowKeys.value);
|
|
86
|
+
const key = record[props.rowKey];
|
|
87
|
+
const selected = !rowSet.has(key);
|
|
88
|
+
if (selected) {
|
|
89
|
+
rowSet.delete(key);
|
|
90
|
+
} else {
|
|
91
|
+
rowSet.add(key);
|
|
92
|
+
}
|
|
93
|
+
props.rowSelection.onSelect?.(record, selected);
|
|
94
|
+
selectedRowKeys.value = [...rowSet.values()];
|
|
95
|
+
}
|
|
96
|
+
};
|
|
97
|
+
const updateSelectedKeys = keys => {
|
|
98
|
+
selectedRowKeys.value = keys;
|
|
99
|
+
};
|
|
100
|
+
onMounted(() => {
|
|
101
|
+
nextTick(() => {
|
|
102
|
+
onScroll();
|
|
103
|
+
});
|
|
104
|
+
});
|
|
105
|
+
onBeforeUnmount(() => {
|
|
106
|
+
menuInstance?.destroy?.();
|
|
107
|
+
menuInstance?.cleanCopy?.();
|
|
108
|
+
});
|
|
109
|
+
watch(() => JSON.stringify(props.rowSelection?.selectedRowKeys), val => {
|
|
110
|
+
selectedRowKeys.value = JSON.parse(val || '[]');
|
|
111
|
+
}, {
|
|
112
|
+
immediate: true
|
|
113
|
+
});
|
|
114
|
+
watch(() => props.dataSource, () => {
|
|
115
|
+
props.dataSource.forEach(item => {
|
|
116
|
+
if (!item.__key) {
|
|
117
|
+
item.__key = randomString();
|
|
118
|
+
}
|
|
119
|
+
});
|
|
120
|
+
}, {
|
|
121
|
+
immediate: true,
|
|
122
|
+
deep: true
|
|
123
|
+
});
|
|
124
|
+
watch(() => props.dataSource.length, () => {
|
|
125
|
+
scrollLock.value = false;
|
|
126
|
+
containerStyle.value = {
|
|
127
|
+
height: props.dataSource.length * props.cellHeight + 'px'
|
|
128
|
+
};
|
|
129
|
+
if (props.dataSource.length <= maxLen.value || props.dataSource.length === 0) {
|
|
130
|
+
emit('scrollDown', maxLen.value - props.dataSource.length + 3);
|
|
131
|
+
}
|
|
132
|
+
}, {
|
|
133
|
+
immediate: true
|
|
134
|
+
});
|
|
135
|
+
watch(() => props.groupKey, () => {
|
|
136
|
+
if (props.openGroup) {
|
|
137
|
+
scrollTo(0);
|
|
138
|
+
}
|
|
139
|
+
});
|
|
140
|
+
expose({
|
|
141
|
+
scrollTo,
|
|
142
|
+
updateSelectedKeys
|
|
143
|
+
});
|
|
144
|
+
return {
|
|
145
|
+
hashId,
|
|
146
|
+
viewScrollRef,
|
|
147
|
+
tableCenterRef,
|
|
148
|
+
virtualRang,
|
|
149
|
+
containerStyle,
|
|
150
|
+
hScroll,
|
|
151
|
+
selectedRowKeys,
|
|
152
|
+
virtualData,
|
|
153
|
+
onScroll,
|
|
154
|
+
showContextMenu,
|
|
155
|
+
rowClick
|
|
156
|
+
};
|
|
157
|
+
}
|
|
158
|
+
});
|
|
@@ -1,12 +1,10 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
}
|
|
12
|
-
})
|
|
1
|
+
import { defineComponent } from 'vue';
|
|
2
|
+
export default defineComponent({
|
|
3
|
+
name: 'CellRender',
|
|
4
|
+
props: ['renderFn', 'value', 'record', 'index'],
|
|
5
|
+
setup(props) {
|
|
6
|
+
return () => {
|
|
7
|
+
return props.renderFn(props.value, props.record, props.index);
|
|
8
|
+
};
|
|
9
|
+
}
|
|
10
|
+
});
|