stk-table-vue 0.11.5 → 0.11.7
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/README.md +172 -172
- package/lib/{index-t5SJ6KNv.js → index-C40Rz-HL.js} +53 -7
- package/lib/src/StkTable/StkTable.vue.d.ts +8 -2
- package/lib/src/StkTable/components/Filter/Dropdown/index.d.ts +4 -2
- package/lib/src/StkTable/components/Filter/Dropdown/index.vue.d.ts +2 -1
- package/lib/src/StkTable/features/const.d.ts +1 -0
- package/lib/src/StkTable/features/index.d.ts +1 -1
- package/lib/src/StkTable/features/useAreaSelection.d.ts +3 -1
- package/lib/src/StkTable/registerFeature.d.ts +5 -1
- package/lib/src/StkTable/types/index.d.ts +2 -0
- package/lib/src/StkTable/useKeyboardArrowScroll.d.ts +2 -2
- package/lib/src/StkTable/useVirtualScroll.d.ts +1 -1
- package/lib/stk-table-vue.js +232 -209
- package/lib/style.css +1 -1
- package/lib/test/defaultSort.test.d.ts +1 -0
- package/package.json +75 -75
- package/src/StkTable/StkTable.vue +1742 -1736
- package/src/StkTable/components/DragHandle.vue +9 -9
- package/src/StkTable/components/Filter/Dropdown/index.ts +16 -16
- package/src/StkTable/components/Filter/Dropdown/index.vue +185 -123
- package/src/StkTable/components/Filter/Filter.less +129 -129
- package/src/StkTable/components/Filter/Filter.vue +61 -48
- package/src/StkTable/components/Filter/index.ts +6 -6
- package/src/StkTable/components/Filter/types.ts +18 -18
- package/src/StkTable/components/Filter/useFilter.ts +90 -90
- package/src/StkTable/components/SortIcon.vue +6 -6
- package/src/StkTable/components/TreeNodeCell.vue +19 -19
- package/src/StkTable/components/TriangleIcon.vue +3 -3
- package/src/StkTable/const.ts +50 -50
- package/src/StkTable/features/const.ts +1 -0
- package/src/StkTable/features/index.ts +1 -1
- package/src/StkTable/features/useAreaSelection.ts +780 -765
- package/src/StkTable/index.ts +9 -9
- package/src/StkTable/registerFeature.ts +35 -29
- package/src/StkTable/style.less +723 -723
- package/src/StkTable/types/highlightDimOptions.ts +26 -26
- package/src/StkTable/types/index.ts +391 -389
- package/src/StkTable/useAutoResize.ts +87 -87
- package/src/StkTable/useColResize.ts +200 -200
- package/src/StkTable/useFixedCol.ts +139 -139
- package/src/StkTable/useFixedStyle.ts +74 -74
- package/src/StkTable/useGetFixedColPosition.ts +63 -63
- package/src/StkTable/useHighlight.ts +247 -247
- package/src/StkTable/useKeyboardArrowScroll.ts +112 -112
- package/src/StkTable/useMaxRowSpan.ts +50 -50
- package/src/StkTable/useMergeCells.ts +131 -131
- package/src/StkTable/useRowExpand.ts +80 -80
- package/src/StkTable/useScrollRowByRow.ts +96 -96
- package/src/StkTable/useScrollbar.ts +159 -159
- package/src/StkTable/useSorter.ts +259 -262
- package/src/StkTable/useTableColumns.ts +129 -129
- package/src/StkTable/useThDrag.ts +96 -96
- package/src/StkTable/useTrDrag.ts +100 -100
- package/src/StkTable/useTree.ts +151 -151
- package/src/StkTable/useVirtualScroll.ts +511 -511
- package/src/StkTable/useWheeling.ts +23 -23
- package/src/StkTable/utils/constRefUtils.ts +29 -29
- package/src/StkTable/utils/index.ts +314 -314
- package/src/StkTable/utils/useTriggerRef.ts +33 -33
- package/src/VirtualTree.vue +622 -622
- package/src/VirtualTreeSelect.vue +367 -367
- package/src/vite-env.d.ts +10 -10
package/README.md
CHANGED
|
@@ -1,172 +1,172 @@
|
|
|
1
|
-
<p align="center">
|
|
2
|
-
<a href="https://ja-plus.github.io/stk-table-vue/">
|
|
3
|
-
<img src="./docs-src/public/assets/logo.svg" width="152">
|
|
4
|
-
</a>
|
|
5
|
-
<h3 align='center'>Stk Table Vue</h3>
|
|
6
|
-
<p align="center">
|
|
7
|
-
<a href="https://www.npmjs.com/package/stk-table-vue"><img src="https://img.shields.io/npm/v/stk-table-vue"></a>
|
|
8
|
-
<a href="https://www.npmjs.com/package/stk-table-vue"><img src="https://img.shields.io/npm/dw/stk-table-vue"></a>
|
|
9
|
-
<a href="https://github.com/ja-plus/stk-table-vue/stargazers"><img src="https://img.shields.io/github/stars/ja-plus/stk-table-vue.svg"></a>
|
|
10
|
-
<a href="https://raw.githubusercontent.com/ja-plus/stk-table-vue/master/LICENSE"><img src="https://img.shields.io/npm/l/stk-table-vue"></a>
|
|
11
|
-
<a href="https://github.com/ja-plus/stk-table-vue"><img src="https://img.shields.io/npm/types/stk-table-vue"></a>
|
|
12
|
-
</p>
|
|
13
|
-
</p>
|
|
14
|
-
|
|
15
|
-
> Stk Table Vue(Sticky Table) is a high-performance virtual list component based on Vue.
|
|
16
|
-
>
|
|
17
|
-
> Used for real-time data display, with data highlighting and dynamic effects
|
|
18
|
-
>
|
|
19
|
-
> Support Vue3 and Vue2.7
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
## Documentation
|
|
23
|
-
### [Stk Table Vue Official en](https://ja-plus.github.io/stk-table-vue/en/)
|
|
24
|
-
### [Stk Table Vue Official zh-CN](https://ja-plus.github.io/stk-table-vue/)
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
## Repo:
|
|
28
|
-
- [Github](https://github.com/ja-plus/stk-table-vue)
|
|
29
|
-
- [Gitee](https://gitee.com/japlus/stk-table-vue) 🇨🇳
|
|
30
|
-
|
|
31
|
-
## Demo
|
|
32
|
-
[<span style="font-size: 16px;font-weight: bold;">Online Demo in stackblitz</span>](https://stackblitz.com/edit/vitejs-vite-ad91hh?file=src%2FDemo%2Findex.vue)
|
|
33
|
-
|
|
34
|
-
## Usage
|
|
35
|
-
> npm install stk-table-vue
|
|
36
|
-
|
|
37
|
-
```html
|
|
38
|
-
<script setup>
|
|
39
|
-
import { StkTable } from 'stk-table-vue'
|
|
40
|
-
import { ref, useTemplateRef } from 'vue'
|
|
41
|
-
const stkTableRef = ref<InstanceType<typeof StkTable>>();
|
|
42
|
-
// or Vue 3.5 useTemplateRef
|
|
43
|
-
const stkTableRef = useTemplateRef('stkTableRef');
|
|
44
|
-
|
|
45
|
-
// highlight row
|
|
46
|
-
stkTableRef.value.setHighlightDimRow([rowKey],{
|
|
47
|
-
method: 'css'|'animation',// default animation。
|
|
48
|
-
className: 'custom-class-name', // method css。
|
|
49
|
-
keyframe: [{backgroundColor:'#aaa'}, {backgroundColor: '#222'}],//same as https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Animations_API/Keyframe_Formats
|
|
50
|
-
duration: 2000,。
|
|
51
|
-
});
|
|
52
|
-
// highlight cell
|
|
53
|
-
stkTableRef.value.setHighlightDimCell(rowKey, colDataIndex, {
|
|
54
|
-
method: 'css'|'animation',
|
|
55
|
-
className:'custom-class-name', // method css。
|
|
56
|
-
keyframe: [{backgroundColor:'#aaa'}, {backgroundColor: '#222'}], // method animation。
|
|
57
|
-
duration: 2000,。
|
|
58
|
-
});
|
|
59
|
-
|
|
60
|
-
const columns = [
|
|
61
|
-
{title: 'name', dataIndex: 'name'},
|
|
62
|
-
{title: 'age', dataIndex: 'age'},
|
|
63
|
-
{title: 'address', dataIndex: 'address'},
|
|
64
|
-
];
|
|
65
|
-
|
|
66
|
-
const dataSource = [
|
|
67
|
-
{id: 1, name: 'John', age: 32, address: 'New York'},
|
|
68
|
-
{id: 2, name: 'Jim', age: 42, address: 'London'},
|
|
69
|
-
{id: 3, name: 'Joe', age: 52, address: 'Tokyo'},
|
|
70
|
-
{id: 4, name: 'Jack', age: 62, address: 'Sydney'},
|
|
71
|
-
{id: 5, name: 'Jill', age: 72, address: 'Paris'},
|
|
72
|
-
]
|
|
73
|
-
|
|
74
|
-
</script>
|
|
75
|
-
|
|
76
|
-
<template>
|
|
77
|
-
<StkTable ref='stkTableRef' row-key="id" :data-source="dataSource" :columns="columns"></StkTable>
|
|
78
|
-
</template>
|
|
79
|
-
|
|
80
|
-
```
|
|
81
|
-
|
|
82
|
-
### Vue2.7 Usage
|
|
83
|
-
[Vue2.7 Usage](https://ja-plus.github.io/stk-table-vue/main/start/vue2-usage.html)
|
|
84
|
-
|
|
85
|
-
## API
|
|
86
|
-
* [Props](https://ja-plus.github.io/stk-table-vue/main/api/table-props.html)
|
|
87
|
-
|
|
88
|
-
* [Emits](https://ja-plus.github.io/stk-table-vue/main/api/emits.html)
|
|
89
|
-
|
|
90
|
-
* [Slots](https://ja-plus.github.io/stk-table-vue/main/api/slots.html)
|
|
91
|
-
|
|
92
|
-
* [Expose](https://ja-plus.github.io/stk-table-vue/main/api/expose.html)
|
|
93
|
-
|
|
94
|
-
* [StkTableColumn: Define column type](https://ja-plus.github.io/stk-table-vue/main/api/stk-table-column.html)
|
|
95
|
-
|
|
96
|
-
* [Highlight: setHighlightDimCell & setHighlightDimRow](https://ja-plus.github.io/stk-table-vue/main/api/expose.html#sethighlightdimcell)
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
### Example
|
|
100
|
-
```vue
|
|
101
|
-
<template>
|
|
102
|
-
<StkTable
|
|
103
|
-
ref="stkTable"
|
|
104
|
-
row-key="name"
|
|
105
|
-
v-model:columns="columns"
|
|
106
|
-
:style="{height:props.height}"
|
|
107
|
-
theme='dark'
|
|
108
|
-
height='200px'
|
|
109
|
-
bordered="h"
|
|
110
|
-
:row-height="28"
|
|
111
|
-
:show-overflow="false"
|
|
112
|
-
:show-header-overflow="false"
|
|
113
|
-
:sort-remote="false"
|
|
114
|
-
col-resizable
|
|
115
|
-
header-drag
|
|
116
|
-
virtual
|
|
117
|
-
virtual-x
|
|
118
|
-
no-data-full
|
|
119
|
-
col-resizable
|
|
120
|
-
auto-resize
|
|
121
|
-
fixed-col-shadow
|
|
122
|
-
:col-min-width="10"
|
|
123
|
-
:headless="false"
|
|
124
|
-
:data-source="dataSource"
|
|
125
|
-
@current-change="onCurrentChange"
|
|
126
|
-
@row-menu="onRowMenu"
|
|
127
|
-
@header-row-menu="onHeaderRowMenu"
|
|
128
|
-
@row-click="onRowClick"
|
|
129
|
-
@row-dblclick="onRowDblclick"
|
|
130
|
-
@sort-change="handleSortChange"
|
|
131
|
-
@cell-click="onCellClick"
|
|
132
|
-
@header-cell-click="onHeaderCellClick"
|
|
133
|
-
@scroll="onTableScroll"
|
|
134
|
-
@scroll-x="onTableScrollX"
|
|
135
|
-
@col-order-change="onColOrderChange"
|
|
136
|
-
/>
|
|
137
|
-
</template>
|
|
138
|
-
<script setup>
|
|
139
|
-
import { h, defineComponent } from 'vue';
|
|
140
|
-
const columns = [
|
|
141
|
-
{
|
|
142
|
-
title: 'Name',
|
|
143
|
-
dataIndex: 'name',
|
|
144
|
-
fixed: 'left',
|
|
145
|
-
width: '200px',
|
|
146
|
-
headerClassName: 'my-th',
|
|
147
|
-
className: 'my-td',
|
|
148
|
-
sorter: true,
|
|
149
|
-
customHeaderCell: function FunctionalComponent(props){
|
|
150
|
-
return h(
|
|
151
|
-
'span',
|
|
152
|
-
{ style: 'overflow:hidden;text-overflow:ellipsis;white-space:nowrap' },
|
|
153
|
-
props.col.title + '(render) text-overflow,',
|
|
154
|
-
);
|
|
155
|
-
},
|
|
156
|
-
customCell: defineComponent({
|
|
157
|
-
setup(){
|
|
158
|
-
//...
|
|
159
|
-
return () => <div></div> // vue jsx
|
|
160
|
-
}
|
|
161
|
-
})
|
|
162
|
-
},
|
|
163
|
-
]
|
|
164
|
-
</script>
|
|
165
|
-
```
|
|
166
|
-
|
|
167
|
-
## Compare
|
|
168
|
-
Compare performance with other vue table [vue-table-compare](https://github.com/ja-plus/vue-table-compare)
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
## Other
|
|
172
|
-
* `$*$`
|
|
1
|
+
<p align="center">
|
|
2
|
+
<a href="https://ja-plus.github.io/stk-table-vue/">
|
|
3
|
+
<img src="./docs-src/public/assets/logo.svg" width="152">
|
|
4
|
+
</a>
|
|
5
|
+
<h3 align='center'>Stk Table Vue</h3>
|
|
6
|
+
<p align="center">
|
|
7
|
+
<a href="https://www.npmjs.com/package/stk-table-vue"><img src="https://img.shields.io/npm/v/stk-table-vue"></a>
|
|
8
|
+
<a href="https://www.npmjs.com/package/stk-table-vue"><img src="https://img.shields.io/npm/dw/stk-table-vue"></a>
|
|
9
|
+
<a href="https://github.com/ja-plus/stk-table-vue/stargazers"><img src="https://img.shields.io/github/stars/ja-plus/stk-table-vue.svg"></a>
|
|
10
|
+
<a href="https://raw.githubusercontent.com/ja-plus/stk-table-vue/master/LICENSE"><img src="https://img.shields.io/npm/l/stk-table-vue"></a>
|
|
11
|
+
<a href="https://github.com/ja-plus/stk-table-vue"><img src="https://img.shields.io/npm/types/stk-table-vue"></a>
|
|
12
|
+
</p>
|
|
13
|
+
</p>
|
|
14
|
+
|
|
15
|
+
> Stk Table Vue(Sticky Table) is a high-performance virtual list component based on Vue.
|
|
16
|
+
>
|
|
17
|
+
> Used for real-time data display, with data highlighting and dynamic effects
|
|
18
|
+
>
|
|
19
|
+
> Support Vue3 and Vue2.7
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
## Documentation
|
|
23
|
+
### [Stk Table Vue Official en](https://ja-plus.github.io/stk-table-vue/en/)
|
|
24
|
+
### [Stk Table Vue Official zh-CN](https://ja-plus.github.io/stk-table-vue/)
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
## Repo:
|
|
28
|
+
- [Github](https://github.com/ja-plus/stk-table-vue)
|
|
29
|
+
- [Gitee](https://gitee.com/japlus/stk-table-vue) 🇨🇳
|
|
30
|
+
|
|
31
|
+
## Demo
|
|
32
|
+
[<span style="font-size: 16px;font-weight: bold;">Online Demo in stackblitz</span>](https://stackblitz.com/edit/vitejs-vite-ad91hh?file=src%2FDemo%2Findex.vue)
|
|
33
|
+
|
|
34
|
+
## Usage
|
|
35
|
+
> npm install stk-table-vue
|
|
36
|
+
|
|
37
|
+
```html
|
|
38
|
+
<script setup>
|
|
39
|
+
import { StkTable } from 'stk-table-vue'
|
|
40
|
+
import { ref, useTemplateRef } from 'vue'
|
|
41
|
+
const stkTableRef = ref<InstanceType<typeof StkTable>>();
|
|
42
|
+
// or Vue 3.5 useTemplateRef
|
|
43
|
+
const stkTableRef = useTemplateRef('stkTableRef');
|
|
44
|
+
|
|
45
|
+
// highlight row
|
|
46
|
+
stkTableRef.value.setHighlightDimRow([rowKey],{
|
|
47
|
+
method: 'css'|'animation',// default animation。
|
|
48
|
+
className: 'custom-class-name', // method css。
|
|
49
|
+
keyframe: [{backgroundColor:'#aaa'}, {backgroundColor: '#222'}],//same as https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Animations_API/Keyframe_Formats
|
|
50
|
+
duration: 2000,。
|
|
51
|
+
});
|
|
52
|
+
// highlight cell
|
|
53
|
+
stkTableRef.value.setHighlightDimCell(rowKey, colDataIndex, {
|
|
54
|
+
method: 'css'|'animation',
|
|
55
|
+
className:'custom-class-name', // method css。
|
|
56
|
+
keyframe: [{backgroundColor:'#aaa'}, {backgroundColor: '#222'}], // method animation。
|
|
57
|
+
duration: 2000,。
|
|
58
|
+
});
|
|
59
|
+
|
|
60
|
+
const columns = [
|
|
61
|
+
{title: 'name', dataIndex: 'name'},
|
|
62
|
+
{title: 'age', dataIndex: 'age'},
|
|
63
|
+
{title: 'address', dataIndex: 'address'},
|
|
64
|
+
];
|
|
65
|
+
|
|
66
|
+
const dataSource = [
|
|
67
|
+
{id: 1, name: 'John', age: 32, address: 'New York'},
|
|
68
|
+
{id: 2, name: 'Jim', age: 42, address: 'London'},
|
|
69
|
+
{id: 3, name: 'Joe', age: 52, address: 'Tokyo'},
|
|
70
|
+
{id: 4, name: 'Jack', age: 62, address: 'Sydney'},
|
|
71
|
+
{id: 5, name: 'Jill', age: 72, address: 'Paris'},
|
|
72
|
+
]
|
|
73
|
+
|
|
74
|
+
</script>
|
|
75
|
+
|
|
76
|
+
<template>
|
|
77
|
+
<StkTable ref='stkTableRef' row-key="id" :data-source="dataSource" :columns="columns"></StkTable>
|
|
78
|
+
</template>
|
|
79
|
+
|
|
80
|
+
```
|
|
81
|
+
|
|
82
|
+
### Vue2.7 Usage
|
|
83
|
+
[Vue2.7 Usage](https://ja-plus.github.io/stk-table-vue/main/start/vue2-usage.html)
|
|
84
|
+
|
|
85
|
+
## API
|
|
86
|
+
* [Props](https://ja-plus.github.io/stk-table-vue/main/api/table-props.html)
|
|
87
|
+
|
|
88
|
+
* [Emits](https://ja-plus.github.io/stk-table-vue/main/api/emits.html)
|
|
89
|
+
|
|
90
|
+
* [Slots](https://ja-plus.github.io/stk-table-vue/main/api/slots.html)
|
|
91
|
+
|
|
92
|
+
* [Expose](https://ja-plus.github.io/stk-table-vue/main/api/expose.html)
|
|
93
|
+
|
|
94
|
+
* [StkTableColumn: Define column type](https://ja-plus.github.io/stk-table-vue/main/api/stk-table-column.html)
|
|
95
|
+
|
|
96
|
+
* [Highlight: setHighlightDimCell & setHighlightDimRow](https://ja-plus.github.io/stk-table-vue/main/api/expose.html#sethighlightdimcell)
|
|
97
|
+
|
|
98
|
+
|
|
99
|
+
### Example
|
|
100
|
+
```vue
|
|
101
|
+
<template>
|
|
102
|
+
<StkTable
|
|
103
|
+
ref="stkTable"
|
|
104
|
+
row-key="name"
|
|
105
|
+
v-model:columns="columns"
|
|
106
|
+
:style="{height:props.height}"
|
|
107
|
+
theme='dark'
|
|
108
|
+
height='200px'
|
|
109
|
+
bordered="h"
|
|
110
|
+
:row-height="28"
|
|
111
|
+
:show-overflow="false"
|
|
112
|
+
:show-header-overflow="false"
|
|
113
|
+
:sort-remote="false"
|
|
114
|
+
col-resizable
|
|
115
|
+
header-drag
|
|
116
|
+
virtual
|
|
117
|
+
virtual-x
|
|
118
|
+
no-data-full
|
|
119
|
+
col-resizable
|
|
120
|
+
auto-resize
|
|
121
|
+
fixed-col-shadow
|
|
122
|
+
:col-min-width="10"
|
|
123
|
+
:headless="false"
|
|
124
|
+
:data-source="dataSource"
|
|
125
|
+
@current-change="onCurrentChange"
|
|
126
|
+
@row-menu="onRowMenu"
|
|
127
|
+
@header-row-menu="onHeaderRowMenu"
|
|
128
|
+
@row-click="onRowClick"
|
|
129
|
+
@row-dblclick="onRowDblclick"
|
|
130
|
+
@sort-change="handleSortChange"
|
|
131
|
+
@cell-click="onCellClick"
|
|
132
|
+
@header-cell-click="onHeaderCellClick"
|
|
133
|
+
@scroll="onTableScroll"
|
|
134
|
+
@scroll-x="onTableScrollX"
|
|
135
|
+
@col-order-change="onColOrderChange"
|
|
136
|
+
/>
|
|
137
|
+
</template>
|
|
138
|
+
<script setup>
|
|
139
|
+
import { h, defineComponent } from 'vue';
|
|
140
|
+
const columns = [
|
|
141
|
+
{
|
|
142
|
+
title: 'Name',
|
|
143
|
+
dataIndex: 'name',
|
|
144
|
+
fixed: 'left',
|
|
145
|
+
width: '200px',
|
|
146
|
+
headerClassName: 'my-th',
|
|
147
|
+
className: 'my-td',
|
|
148
|
+
sorter: true,
|
|
149
|
+
customHeaderCell: function FunctionalComponent(props){
|
|
150
|
+
return h(
|
|
151
|
+
'span',
|
|
152
|
+
{ style: 'overflow:hidden;text-overflow:ellipsis;white-space:nowrap' },
|
|
153
|
+
props.col.title + '(render) text-overflow,',
|
|
154
|
+
);
|
|
155
|
+
},
|
|
156
|
+
customCell: defineComponent({
|
|
157
|
+
setup(){
|
|
158
|
+
//...
|
|
159
|
+
return () => <div></div> // vue jsx
|
|
160
|
+
}
|
|
161
|
+
})
|
|
162
|
+
},
|
|
163
|
+
]
|
|
164
|
+
</script>
|
|
165
|
+
```
|
|
166
|
+
|
|
167
|
+
## Compare
|
|
168
|
+
Compare performance with other vue table [vue-table-compare](https://github.com/ja-plus/vue-table-compare)
|
|
169
|
+
|
|
170
|
+
|
|
171
|
+
## Other
|
|
172
|
+
* `$*$`
|
|
@@ -1,13 +1,16 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* name: stk-table-vue
|
|
3
|
-
* version: v0.11.
|
|
3
|
+
* version: v0.11.6
|
|
4
4
|
* description: High performance realtime virtual table for vue3 and vue2.7
|
|
5
5
|
* author: japlus
|
|
6
6
|
* homepage: https://ja-plus.github.io/stk-table-vue/
|
|
7
7
|
* license: MIT
|
|
8
8
|
*/
|
|
9
|
-
import { defineComponent, ref, reactive, h, onMounted, onUnmounted, createElementBlock, openBlock, withModifiers, normalizeStyle, normalizeClass, createElementVNode, createVNode } from "vue";
|
|
9
|
+
import { defineComponent, ref, reactive, h, onMounted, onUnmounted, createElementBlock, openBlock, withModifiers, normalizeStyle, normalizeClass, createElementVNode, createVNode, nextTick } from "vue";
|
|
10
10
|
import { StkTable as _sfc_main$1 } from "./stk-table-vue.js";
|
|
11
|
+
const DROPDOWN_DEFAULT_WIDTH = 300;
|
|
12
|
+
const DROPDOWN_DEFAULT_HEIGHT = 400;
|
|
13
|
+
const PADDING = 6;
|
|
11
14
|
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
12
15
|
__name: "index",
|
|
13
16
|
setup(__props, { expose: __expose }) {
|
|
@@ -21,8 +24,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
21
24
|
className: "stk-filter-dropdown-checkbox",
|
|
22
25
|
customCell: ({ row }) => h("input", {
|
|
23
26
|
type: "checkbox",
|
|
24
|
-
checked: checkedTempValueSet.has(row.value)
|
|
25
|
-
onClick: (e) => e.preventDefault()
|
|
27
|
+
checked: checkedTempValueSet.has(row.value)
|
|
26
28
|
})
|
|
27
29
|
},
|
|
28
30
|
{ title: "", dataIndex: "label", customCell: ({ row }) => h("span", [row.label]) }
|
|
@@ -38,12 +40,51 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
38
40
|
document.removeEventListener("click", handleClickOutside);
|
|
39
41
|
});
|
|
40
42
|
let onConfirmFn;
|
|
41
|
-
function
|
|
43
|
+
function getDropdownSize() {
|
|
44
|
+
if (!dropdownEl.value) {
|
|
45
|
+
return [DROPDOWN_DEFAULT_WIDTH, DROPDOWN_DEFAULT_HEIGHT];
|
|
46
|
+
}
|
|
47
|
+
const rect = dropdownEl.value.getBoundingClientRect();
|
|
48
|
+
return [rect.width || DROPDOWN_DEFAULT_WIDTH, rect.height || DROPDOWN_DEFAULT_HEIGHT];
|
|
49
|
+
}
|
|
50
|
+
function calculatePosition(docPos) {
|
|
51
|
+
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
|
|
52
|
+
const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
|
|
53
|
+
const viewportWidth = document.documentElement.clientWidth;
|
|
54
|
+
const viewportHeight = document.documentElement.clientHeight;
|
|
55
|
+
const [dropdownWidth, dropdownHeight] = getDropdownSize();
|
|
56
|
+
let finalX = docPos.x;
|
|
57
|
+
let finalY = docPos.y;
|
|
58
|
+
const relativeX = docPos.x - scrollLeft;
|
|
59
|
+
if (relativeX + dropdownWidth > viewportWidth - PADDING) {
|
|
60
|
+
finalX = viewportWidth - dropdownWidth - PADDING + scrollLeft;
|
|
61
|
+
}
|
|
62
|
+
const relativeY = docPos.y - scrollTop;
|
|
63
|
+
if (relativeY + dropdownHeight > viewportHeight - PADDING) {
|
|
64
|
+
const triggerHeight = docPos.height || 30;
|
|
65
|
+
if (relativeY - triggerHeight >= dropdownHeight + PADDING) {
|
|
66
|
+
finalY = docPos.y - triggerHeight - dropdownHeight - PADDING;
|
|
67
|
+
} else {
|
|
68
|
+
finalY = PADDING + scrollTop;
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
finalX = Math.max(PADDING + scrollLeft, finalX);
|
|
72
|
+
finalY = Math.max(PADDING + scrollTop, finalY);
|
|
73
|
+
return { x: finalX, y: finalY };
|
|
74
|
+
}
|
|
75
|
+
async function show(pos, opt, onConfirm) {
|
|
76
|
+
if (dropdownEl.value) {
|
|
77
|
+
dropdownEl.value.style.visibility = "hidden";
|
|
78
|
+
}
|
|
42
79
|
visible.value = true;
|
|
43
|
-
position.value = pos;
|
|
44
80
|
options.value = opt || [];
|
|
45
81
|
initChecked();
|
|
46
82
|
onConfirmFn = onConfirm;
|
|
83
|
+
await nextTick();
|
|
84
|
+
position.value = calculatePosition(pos);
|
|
85
|
+
if (dropdownEl.value) {
|
|
86
|
+
dropdownEl.value.style.visibility = "visible";
|
|
87
|
+
}
|
|
47
88
|
}
|
|
48
89
|
async function handleClickOutside(e) {
|
|
49
90
|
var _a;
|
|
@@ -83,6 +124,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
83
124
|
}
|
|
84
125
|
function handleClear() {
|
|
85
126
|
checkedTempValueSet.clear();
|
|
127
|
+
confirm();
|
|
86
128
|
}
|
|
87
129
|
__expose({ visible, show, hide, setTheme });
|
|
88
130
|
return (_ctx, _cache) => {
|
|
@@ -90,7 +132,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
90
132
|
ref_key: "dropdownEl",
|
|
91
133
|
ref: dropdownEl,
|
|
92
134
|
class: normalizeClass(["stk-filter-dropdown", [`stk-filter-dropdown--${theme.value}`]]),
|
|
93
|
-
style: normalizeStyle({
|
|
135
|
+
style: normalizeStyle({
|
|
136
|
+
top: position.value.y + "px",
|
|
137
|
+
left: position.value.x + "px",
|
|
138
|
+
display: visible.value ? void 0 : "none"
|
|
139
|
+
}),
|
|
94
140
|
onClick: _cache[0] || (_cache[0] = withModifiers(() => {
|
|
95
141
|
}, ["stop"]))
|
|
96
142
|
}, [
|
|
@@ -418,7 +418,13 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
|
|
|
418
418
|
})) | (UniqKey | (PrivateRowDT & {
|
|
419
419
|
children?: (PrivateRowDT & /*elided*/ any)[];
|
|
420
420
|
}))[], option?: {
|
|
421
|
-
expand
|
|
421
|
+
expand
|
|
422
|
+
/**
|
|
423
|
+
* props cannot be placed in a separate file. It will cause compilation errors with vue 2.7 compiler.
|
|
424
|
+
*/
|
|
425
|
+
? /**
|
|
426
|
+
* props cannot be placed in a separate file. It will cause compilation errors with vue 2.7 compiler.
|
|
427
|
+
*/: boolean;
|
|
422
428
|
}) => void;
|
|
423
429
|
/**
|
|
424
430
|
* 获取拖选选中的单元格信息
|
|
@@ -745,6 +751,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
|
|
|
745
751
|
row: DT;
|
|
746
752
|
col: StkTableColumn<DT> | null;
|
|
747
753
|
}) => any) | undefined;
|
|
754
|
+
"onSort-change"?: ((col: StkTableColumn<any> | null, order: Order, data: any[], sortConfig: SortConfig<any>) => any) | undefined;
|
|
748
755
|
"onTh-drag-start"?: ((dragStartKey: string) => any) | undefined;
|
|
749
756
|
"onTh-drop"?: ((targetColKey: string) => any) | undefined;
|
|
750
757
|
"onCol-order-change"?: ((dragStartKey: string, targetColKey: string) => any) | undefined;
|
|
@@ -754,7 +761,6 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
|
|
|
754
761
|
row: DT;
|
|
755
762
|
col: StkTableColumn<DT> | null;
|
|
756
763
|
}) => any) | undefined;
|
|
757
|
-
"onSort-change"?: ((col: StkTableColumn<any> | null, order: Order, data: any[], sortConfig: SortConfig<any>) => any) | undefined;
|
|
758
764
|
"onRow-click"?: ((ev: MouseEvent, row: any, data: {
|
|
759
765
|
rowIndex: number;
|
|
760
766
|
}) => any) | undefined;
|
|
@@ -3,7 +3,8 @@ export declare function getDropdownIns(): Promise<import('vue').CreateComponentP
|
|
|
3
3
|
show: (pos: {
|
|
4
4
|
x: number;
|
|
5
5
|
y: number;
|
|
6
|
-
|
|
6
|
+
height?: number;
|
|
7
|
+
}, opt: import('../types').FilterOption[], onConfirm: (values: import('../types').FilterOption["value"][]) => void) => Promise<void>;
|
|
7
8
|
hide: () => void;
|
|
8
9
|
setTheme: (t: "light" | "dark") => void;
|
|
9
10
|
}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {}, true, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, any, import('vue').ComponentProvideOptions, {
|
|
@@ -18,7 +19,8 @@ export declare function getDropdownIns(): Promise<import('vue').CreateComponentP
|
|
|
18
19
|
show: (pos: {
|
|
19
20
|
x: number;
|
|
20
21
|
y: number;
|
|
21
|
-
|
|
22
|
+
height?: number;
|
|
23
|
+
}, opt: import('../types').FilterOption[], onConfirm: (values: import('../types').FilterOption["value"][]) => void) => Promise<void>;
|
|
22
24
|
hide: () => void;
|
|
23
25
|
setTheme: (t: "light" | "dark") => void;
|
|
24
26
|
}, {}, {}, {}, {}>>;
|
|
@@ -3,7 +3,8 @@ import { FilterOption } from '../types';
|
|
|
3
3
|
declare function show(pos: {
|
|
4
4
|
x: number;
|
|
5
5
|
y: number;
|
|
6
|
-
|
|
6
|
+
height?: number;
|
|
7
|
+
}, opt: FilterOption[], onConfirm: (values: FilterOption['value'][]) => void): Promise<void>;
|
|
7
8
|
declare function hide(): void;
|
|
8
9
|
declare function setTheme(t: 'light' | 'dark'): void;
|
|
9
10
|
declare const _default: import('vue').DefineComponent<{}, {
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const MY_FN_NAME = "stkName";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export { useAreaSelection } from './useAreaSelection';
|
|
1
|
+
export { useAreaSelection, useAreaSelectionName } from './useAreaSelection';
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { Ref, ShallowRef } from 'vue';
|
|
2
|
-
import { CellKeyGen, ColKeyGen, StkTableColumn, UniqKey } from '../types';
|
|
2
|
+
import { AreaSelectionConfig, CellKeyGen, ColKeyGen, StkTableColumn, UniqKey } from '../types';
|
|
3
3
|
import { VirtualScrollStore, VirtualScrollXStore } from '../useVirtualScroll';
|
|
4
4
|
|
|
5
5
|
/**
|
|
@@ -8,6 +8,7 @@ import { VirtualScrollStore, VirtualScrollXStore } from '../useVirtualScroll';
|
|
|
8
8
|
* en: Cell area selection feature with mouse drag, keyboard navigation, copy-paste, etc.
|
|
9
9
|
*/
|
|
10
10
|
export declare function useAreaSelection<DT extends Record<string, any>>(props: any, emits: any, tableContainerRef: Ref<HTMLDivElement | undefined>, dataSourceCopy: ShallowRef<DT[]>, tableHeaderLast: ShallowRef<StkTableColumn<DT>[]>, colKeyGen: ColKeyGen, cellKeyGen: CellKeyGen, scrollTo: (top: number | null, left: number | null) => void, virtualScroll: Ref<VirtualScrollStore>, virtualScrollX: Ref<VirtualScrollXStore>): {
|
|
11
|
+
config: import('vue').ComputedRef<AreaSelectionConfig>;
|
|
11
12
|
isSelecting: Ref<boolean, boolean>;
|
|
12
13
|
getClass: (cellKey: string, absoluteRowIndex: number, colKey: UniqKey) => string[];
|
|
13
14
|
get: () => {
|
|
@@ -28,3 +29,4 @@ export declare function useAreaSelection<DT extends Record<string, any>>(props:
|
|
|
28
29
|
copy: () => string;
|
|
29
30
|
onMD: (e: MouseEvent) => void;
|
|
30
31
|
};
|
|
32
|
+
export declare const useAreaSelectionName = "useAreaSelection";
|
|
@@ -1,4 +1,8 @@
|
|
|
1
|
-
|
|
1
|
+
import { useAreaSelection, useAreaSelectionName } from './features';
|
|
2
|
+
|
|
3
|
+
type OnDemandFeature = {
|
|
4
|
+
[useAreaSelectionName]: typeof useAreaSelection<any>;
|
|
5
|
+
};
|
|
2
6
|
export declare const ON_DEMAND_FEATURE: OnDemandFeature;
|
|
3
7
|
type Feature = OnDemandFeature[keyof OnDemandFeature];
|
|
4
8
|
export declare function registerFeature(feature: Feature | Feature[]): void;
|
|
@@ -325,6 +325,8 @@ export type AreaSelectionRange = {
|
|
|
325
325
|
};
|
|
326
326
|
/** 单元格选区配置 */
|
|
327
327
|
export type AreaSelectionConfig<T extends Record<string, any> = any> = {
|
|
328
|
+
/** default: true */
|
|
329
|
+
enabled?: boolean;
|
|
328
330
|
/**
|
|
329
331
|
* 复制时的单元格文本格式化回调。
|
|
330
332
|
* 如果你使用了 customCell 自定义渲染,应该提供此回调以确保复制内容与展示内容一致。
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { ComputedRef, Ref, ShallowRef } from 'vue';
|
|
2
|
-
import { StkTableColumn } from './types';
|
|
2
|
+
import { AreaSelectionConfig, StkTableColumn } from './types';
|
|
3
3
|
import { VirtualScrollStore, VirtualScrollXStore } from './useVirtualScroll';
|
|
4
4
|
|
|
5
5
|
/**
|
|
@@ -7,4 +7,4 @@ import { VirtualScrollStore, VirtualScrollXStore } from './useVirtualScroll';
|
|
|
7
7
|
*
|
|
8
8
|
* 在低版本浏览器中,虚拟滚动时,使用键盘滚动,等选中的行消失在视口外时,滚动会失效。
|
|
9
9
|
*/
|
|
10
|
-
export declare function useKeyboardArrowScroll<DT extends Record<string, any>>(targetElement: Ref<HTMLElement | undefined>, props: any, scrollTo: (y: number | null, x: number | null) => void, virtualScroll: Ref<VirtualScrollStore>, virtualScrollX: Ref<VirtualScrollXStore>, tableHeaders: ShallowRef<StkTableColumn<DT>[][]>, virtual_on: ComputedRef<boolean>): void;
|
|
10
|
+
export declare function useKeyboardArrowScroll<DT extends Record<string, any>>(targetElement: Ref<HTMLElement | undefined>, props: any, scrollTo: (y: number | null, x: number | null) => void, virtualScroll: Ref<VirtualScrollStore>, virtualScrollX: Ref<VirtualScrollXStore>, tableHeaders: ShallowRef<StkTableColumn<DT>[][]>, virtual_on: ComputedRef<boolean>, areaSelectionConfig: ComputedRef<AreaSelectionConfig>): void;
|
|
@@ -41,7 +41,7 @@ export type VirtualScrollXStore = {
|
|
|
41
41
|
* virtual scroll
|
|
42
42
|
* @returns
|
|
43
43
|
*/
|
|
44
|
-
export declare function useVirtualScroll
|
|
44
|
+
export declare function useVirtualScroll(props: any, tableContainerRef: Ref<HTMLElement | undefined>, trRef: Ref<HTMLTableRowElement[] | undefined>, dataSourceCopy: ShallowRef<PrivateRowDT[]>, tableHeaderLast: ShallowRef<PrivateStkTableColumn<PrivateRowDT>[]>, tableHeaders: ShallowRef<PrivateStkTableColumn<PrivateRowDT>[][]>, rowKeyGen: RowKeyGen, maxRowSpan: Map<UniqKey, number>, scrollbarOptions: Ref<Required<ScrollbarOptions>>, isExperimentalScrollY: Ref<boolean | undefined>): readonly [Ref<{
|
|
45
45
|
containerHeight: number;
|
|
46
46
|
pageSize: number;
|
|
47
47
|
startIndex: number;
|