@ticatec/uniface-element 0.1.13 → 0.1.14
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/data-table/DataTable.svelte +83 -54
- package/dist/data-table/DataTable.svelte.d.ts +7 -5
- package/dist/data-table/UniDataTable.d.ts +4 -2
- package/dist/data-table/UniDataTable.js +8 -7
- package/dist/data-table/lib/IndicatorColumn.d.ts +2 -11
- package/dist/data-table/parts/ActionsPanel.svelte +9 -2
- package/dist/data-table/parts/ActionsPanel.svelte.d.ts +1 -1
- package/dist/data-table/parts/ActionsRow.svelte +3 -3
- package/dist/data-table/parts/ContentPanel.svelte +64 -76
- package/dist/data-table/parts/ContentPanel.svelte.d.ts +15 -8
- package/dist/data-table/parts/DataCell.svelte +2 -2
- package/dist/data-table/parts/DataRow.svelte +2 -4
- package/dist/data-table/parts/FixedColumnsPanel.svelte +52 -13
- package/dist/data-table/parts/FixedColumnsPanel.svelte.d.ts +12 -5
- package/dist/data-table/parts/FixedHeaderPanel.svelte +74 -11
- package/dist/data-table/parts/FixedHeaderPanel.svelte.d.ts +8 -2
- package/dist/data-table/parts/FixedRow.svelte +30 -17
- package/dist/data-table/parts/FixedRow.svelte.d.ts +6 -3
- package/dist/data-table/parts/TableHeaderPanel.svelte +32 -63
- package/dist/data-table/parts/TableHeaderPanel.svelte.d.ts +6 -10
- package/dist/data-table/parts/TableRow.d.ts +0 -10
- package/dist/data-table/parts/TableRow.js +0 -29
- package/dist/data-table/parts/TableRows.d.ts +0 -2
- package/dist/data-table/parts/TableRows.js +0 -2
- package/dist/data-table/parts/TreeRootCell.svelte +3 -0
- package/dist/data-table/parts/TreeRootCell.svelte.d.ts +18 -0
- package/dist/pagination-panel/PaginationPanel.svelte +1 -1
- package/dist/pagination-panel/PaginationPanel.svelte.d.ts +1 -1
- package/dist/ticatec-uniface-web.css +142 -208
- package/package.json +1 -1
|
@@ -3,22 +3,33 @@
|
|
|
3
3
|
import FixedRow from "./FixedRow.svelte";
|
|
4
4
|
import type TableRow from "./TableRow";
|
|
5
5
|
import type {IndicatorColumn} from "..";
|
|
6
|
-
import type
|
|
6
|
+
import UniDataTable, {type RowEventHandler, SelectionMode, type TableEventHandler} from "../UniDataTable";
|
|
7
7
|
import type DataColumn from "../lib/DataColumn";
|
|
8
|
+
import FixedHeaderPanel from "./FixedHeaderPanel.svelte";
|
|
9
|
+
import {tick} from "svelte";
|
|
10
|
+
import {OrderDirection} from "../lib/OrderDirection";
|
|
8
11
|
|
|
9
12
|
|
|
10
|
-
export let fixedCols: Array<DataColumn
|
|
11
|
-
export let indicatorColumn: IndicatorColumn;
|
|
13
|
+
export let fixedCols: Array<DataColumn> = [];
|
|
14
|
+
export let indicatorColumn: IndicatorColumn | null;
|
|
15
|
+
export let width: number;
|
|
12
16
|
export let scrollTop: number = 0;
|
|
13
17
|
export let rows: Array<TableRow>;
|
|
18
|
+
export let table: UniDataTable;
|
|
19
|
+
export let handleWidthChange: TableEventHandler;
|
|
14
20
|
export let handleRowExpand: RowEventHandler;
|
|
15
|
-
export let handleRowSelectChange: TableEventHandler;
|
|
16
21
|
|
|
17
|
-
export let
|
|
22
|
+
export let handleCellClick: (col: DataColumn) => any;
|
|
23
|
+
export let orderColumn: DataColumn;
|
|
24
|
+
export let orderDirection: OrderDirection;
|
|
18
25
|
|
|
19
|
-
|
|
26
|
+
let selectionMode: SelectionMode = SelectionMode.None;
|
|
27
|
+
|
|
28
|
+
export let selectedRows: Array<any> = [];
|
|
20
29
|
|
|
21
|
-
let
|
|
30
|
+
export let expandRow: TableRow | null;
|
|
31
|
+
|
|
32
|
+
export let rowHeight: number;
|
|
22
33
|
|
|
23
34
|
export let inlineRowHeight: number = 0;
|
|
24
35
|
|
|
@@ -26,17 +37,45 @@
|
|
|
26
37
|
let selectable: boolean = false;
|
|
27
38
|
let expandable: boolean = false;
|
|
28
39
|
|
|
29
|
-
$: selectable = indicatorColumn
|
|
30
|
-
$: expandable = indicatorColumn
|
|
40
|
+
$: selectable = indicatorColumn?.selectable == true;
|
|
41
|
+
$: expandable = indicatorColumn?.buildInlineComponent != null;
|
|
42
|
+
|
|
43
|
+
const handleToggleSelectAll = async (value: boolean) => {
|
|
44
|
+
selectedRows = value ? rows.map(item => item.data) : [];
|
|
45
|
+
await tick();
|
|
46
|
+
selectionMode = value ? SelectionMode.All : SelectionMode.None;
|
|
47
|
+
rows = [...rows];
|
|
48
|
+
console.log('选中行', selectionMode)
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
const handleRowSelectChange = async (row: TableRow, value: boolean) => {
|
|
52
|
+
if (value) {
|
|
53
|
+
if (selectedRows.indexOf(row.data) < 0) {
|
|
54
|
+
selectedRows = [...selectedRows, row.data];
|
|
55
|
+
}
|
|
56
|
+
} else {
|
|
57
|
+
let pos = selectedRows.indexOf(row.data);
|
|
58
|
+
if (pos > -1) {
|
|
59
|
+
selectedRows.splice(pos, 1);
|
|
60
|
+
selectedRows = [...selectedRows];
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
selectionMode = selectedRows.length == rows.length ? SelectionMode.All : selectedRows.length == 0 ? SelectionMode.None : SelectionMode.Partial;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
|
|
67
|
+
$: console.log('选中行', selectionMode)
|
|
31
68
|
|
|
32
69
|
</script>
|
|
33
70
|
|
|
34
|
-
<div class="fixed-panel" style="width: {width}px">
|
|
35
|
-
<
|
|
71
|
+
<div class="left-fixed-panel" style="width: {width}px">
|
|
72
|
+
<FixedHeaderPanel {selectionMode} {orderColumn} {orderDirection} {handleCellClick} {handleWidthChange} columns={fixedCols} {indicatorColumn}
|
|
73
|
+
{handleToggleSelectAll} {rowHeight}/>
|
|
74
|
+
<div class="rows-container">
|
|
36
75
|
<div style="top: {-scrollTop}px">
|
|
37
76
|
{#each rows ?? [] as row, idx}
|
|
38
|
-
<FixedRow rowNo={idx+1} {row} selected={row.
|
|
39
|
-
{rowHeight} {expandable} {handleRowExpand} {handleRowSelectChange}/>
|
|
77
|
+
<FixedRow rowNo={idx+1} {row} selected={selectedRows.indexOf(row.data) > -1} alternative={idx % 2 == 1} {selectable}
|
|
78
|
+
cols={fixedCols} {expandRow} {rowHeight} {expandable} {handleRowExpand} {handleRowSelectChange} {indicatorColumn}/>
|
|
40
79
|
{#if row == expandRow}
|
|
41
80
|
<div class="inline-panel" style="height: {inlineRowHeight}px">
|
|
42
81
|
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import type TableRow from "./TableRow";
|
|
2
2
|
import type { IndicatorColumn } from "..";
|
|
3
|
-
import
|
|
3
|
+
import UniDataTable, { type RowEventHandler, type TableEventHandler } from "../UniDataTable";
|
|
4
4
|
import type DataColumn from "../lib/DataColumn";
|
|
5
|
+
import { OrderDirection } from "../lib/OrderDirection";
|
|
5
6
|
interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
|
|
6
7
|
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
|
7
8
|
$$bindings?: Bindings;
|
|
@@ -16,13 +17,19 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
|
|
|
16
17
|
z_$$bindings?: Bindings;
|
|
17
18
|
}
|
|
18
19
|
declare const FixedColumnsPanel: $$__sveltets_2_IsomorphicComponent<{
|
|
19
|
-
fixedCols
|
|
20
|
-
indicatorColumn: IndicatorColumn;
|
|
20
|
+
fixedCols?: Array<DataColumn>;
|
|
21
|
+
indicatorColumn: IndicatorColumn | null;
|
|
22
|
+
width: number;
|
|
21
23
|
scrollTop?: number;
|
|
22
24
|
rows: Array<TableRow>;
|
|
25
|
+
table: UniDataTable;
|
|
26
|
+
handleWidthChange: TableEventHandler;
|
|
23
27
|
handleRowExpand: RowEventHandler;
|
|
24
|
-
|
|
25
|
-
|
|
28
|
+
handleCellClick: (col: DataColumn) => any;
|
|
29
|
+
orderColumn: DataColumn;
|
|
30
|
+
orderDirection: OrderDirection;
|
|
31
|
+
selectedRows?: Array<any>;
|
|
32
|
+
expandRow: TableRow | null;
|
|
26
33
|
rowHeight: number;
|
|
27
34
|
inlineRowHeight?: number;
|
|
28
35
|
}, {
|
|
@@ -2,14 +2,18 @@
|
|
|
2
2
|
|
|
3
3
|
import type DataColumn from "../lib/DataColumn";
|
|
4
4
|
import type {IndicatorColumn} from "..";
|
|
5
|
-
import {type SelectionEventHandler, SelectionMode} from "../UniDataTable";
|
|
5
|
+
import {type SelectionEventHandler, SelectionMode, type TableEventHandler} from "../UniDataTable";
|
|
6
6
|
import utils from "../../common/utils";
|
|
7
|
+
import {OrderDirection} from "../lib/OrderDirection";
|
|
8
|
+
import i18n from "../../i18nContext";
|
|
7
9
|
|
|
8
10
|
export let columns: Array<DataColumn>;
|
|
9
|
-
export let indicatorColumn: IndicatorColumn;
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
11
|
+
export let indicatorColumn: IndicatorColumn | null;
|
|
12
|
+
export let handleWidthChange: TableEventHandler;
|
|
13
|
+
export let rowHeight;
|
|
14
|
+
export let handleCellClick: (col: DataColumn) => any;
|
|
15
|
+
export let orderColumn: DataColumn;
|
|
16
|
+
export let orderDirection: OrderDirection;
|
|
13
17
|
export let selectionMode: SelectionMode;
|
|
14
18
|
|
|
15
19
|
export let handleToggleSelectAll: SelectionEventHandler;
|
|
@@ -33,13 +37,72 @@
|
|
|
33
37
|
indeterminate = true;
|
|
34
38
|
}
|
|
35
39
|
|
|
40
|
+
let resizeCol: any;
|
|
41
|
+
let startX: number = 0;
|
|
42
|
+
let startWidth: number = 0;
|
|
43
|
+
const handleResizeMouseDown = (col: DataColumn) => (event: MouseEvent) => {
|
|
44
|
+
if (col.resizable) {
|
|
45
|
+
resizeCol = col;
|
|
46
|
+
startX = event.clientX;
|
|
47
|
+
startWidth = resizeCol.width;
|
|
48
|
+
|
|
49
|
+
document.body.style.cursor = 'col-resize';
|
|
50
|
+
// 绑定鼠标移动和松开事件
|
|
51
|
+
window.addEventListener('mousemove', onMouseMove);
|
|
52
|
+
window.addEventListener('mouseup', onMouseUp);
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
const onMouseMove = (event: MouseEvent) => {
|
|
56
|
+
if (resizeCol !== null) {
|
|
57
|
+
const diff = event.clientX - startX;
|
|
58
|
+
let w = startWidth + diff;
|
|
59
|
+
if (w > (resizeCol.minWidth ?? 50)) {
|
|
60
|
+
resizeCol.width = startWidth + diff;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
}
|
|
64
|
+
handleWidthChange?.();
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
// 结束拖动
|
|
68
|
+
function onMouseUp() {
|
|
69
|
+
resizeCol = null;
|
|
70
|
+
document.body.style.cursor = 'default';
|
|
71
|
+
window.removeEventListener('mousemove', onMouseMove);
|
|
72
|
+
window.removeEventListener('mouseup', onMouseUp);
|
|
73
|
+
}
|
|
36
74
|
|
|
37
75
|
</script>
|
|
38
76
|
|
|
39
|
-
<div class="header-
|
|
40
|
-
|
|
41
|
-
{
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
77
|
+
<div class="header-row" style="flex: 0 0 auto; {rowHeight}px">
|
|
78
|
+
{#if indicatorColumn}
|
|
79
|
+
<div class="data-cell" style="width: {indicatorColumn.width}px">
|
|
80
|
+
{#if indicatorColumn?.selectable === true}
|
|
81
|
+
<div style="text-align: center" class="vertical-center">
|
|
82
|
+
<input type="checkbox" tabindex="-1" bind:checked {indeterminate} on:click={handleHeaderCheckBoxClick}/>
|
|
83
|
+
</div>
|
|
84
|
+
{:else }
|
|
85
|
+
<div style="text-align: center" class="vertical-center">
|
|
86
|
+
{#if indicatorColumn.displayNo}
|
|
87
|
+
<span>{i18n.getText('uniface.dataTable.rowNo', '#No')}</span>
|
|
88
|
+
{/if}
|
|
89
|
+
</div>
|
|
90
|
+
{/if}
|
|
91
|
+
<div class="header-cell-divider"></div>
|
|
92
|
+
</div>
|
|
93
|
+
{/if}
|
|
94
|
+
{#each columns as column, index}
|
|
95
|
+
<div class="fz_col-{index} data-cell" class:sortable={column.compareFunction!=null} style="text-align: center">
|
|
96
|
+
<div class:sortable={column.compareFunction != null} on:click={handleCellClick(column)} aria-hidden="true" class="vertical-center">
|
|
97
|
+
<span>{column.text}</span>
|
|
98
|
+
{#if column === orderColumn}
|
|
99
|
+
<i style="margin-left: 2px; font-size: 12px; position: absolute; top: 0; right: 4px"
|
|
100
|
+
class={orderDirection===OrderDirection.Ascending ? 'uniface-icon-chevron-up' : 'uniface-icon-chevron-down'}></i>
|
|
101
|
+
{/if}
|
|
102
|
+
</div>
|
|
103
|
+
|
|
104
|
+
<div class="header-cell-divider" class:resizer={column.resizable} aria-hidden="true"
|
|
105
|
+
on:mousedown={handleResizeMouseDown(column)}></div>
|
|
106
|
+
</div>
|
|
107
|
+
{/each}
|
|
45
108
|
</div>
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import type DataColumn from "../lib/DataColumn";
|
|
2
2
|
import type { IndicatorColumn } from "..";
|
|
3
|
-
import { type SelectionEventHandler, SelectionMode } from "../UniDataTable";
|
|
3
|
+
import { type SelectionEventHandler, SelectionMode, type TableEventHandler } from "../UniDataTable";
|
|
4
|
+
import { OrderDirection } from "../lib/OrderDirection";
|
|
4
5
|
interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
|
|
5
6
|
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
|
6
7
|
$$bindings?: Bindings;
|
|
@@ -16,7 +17,12 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
|
|
|
16
17
|
}
|
|
17
18
|
declare const FixedHeaderPanel: $$__sveltets_2_IsomorphicComponent<{
|
|
18
19
|
columns: Array<DataColumn>;
|
|
19
|
-
indicatorColumn: IndicatorColumn;
|
|
20
|
+
indicatorColumn: IndicatorColumn | null;
|
|
21
|
+
handleWidthChange: TableEventHandler;
|
|
22
|
+
rowHeight: any;
|
|
23
|
+
handleCellClick: (col: DataColumn) => any;
|
|
24
|
+
orderColumn: DataColumn;
|
|
25
|
+
orderDirection: OrderDirection;
|
|
20
26
|
selectionMode: SelectionMode;
|
|
21
27
|
handleToggleSelectAll: SelectionEventHandler;
|
|
22
28
|
}, {
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
2
|
|
|
3
3
|
import type TableRow from "./TableRow";
|
|
4
|
-
import type {RowEventHandler} from "../UniDataTable";
|
|
4
|
+
import type {RowEventHandler, RowSelectEventHandler} from "../UniDataTable";
|
|
5
5
|
import DataCell from "./DataCell.svelte";
|
|
6
6
|
import type DataColumn from "../lib/DataColumn";
|
|
7
|
+
import type {IndicatorColumn} from "../..";
|
|
7
8
|
|
|
8
9
|
export let selectable: boolean = false;
|
|
9
10
|
export let rowNo: number;
|
|
@@ -12,11 +13,15 @@
|
|
|
12
13
|
export let row: TableRow;
|
|
13
14
|
export let alternative: boolean;
|
|
14
15
|
export let handleRowExpand: RowEventHandler;
|
|
15
|
-
export let handleRowSelectChange:
|
|
16
|
-
export let selected: boolean
|
|
16
|
+
export let handleRowSelectChange: RowSelectEventHandler;
|
|
17
|
+
export let selected: boolean;
|
|
18
|
+
|
|
19
|
+
export let expandRow: any = null;
|
|
17
20
|
|
|
18
21
|
export let rowHeight: number;
|
|
19
22
|
|
|
23
|
+
export let indicatorColumn: IndicatorColumn | null;
|
|
24
|
+
|
|
20
25
|
let style: string;
|
|
21
26
|
|
|
22
27
|
const showInlineData = (e: MouseEvent) => {
|
|
@@ -25,24 +30,32 @@
|
|
|
25
30
|
e.stopPropagation();
|
|
26
31
|
}
|
|
27
32
|
|
|
28
|
-
$:
|
|
29
|
-
row
|
|
30
|
-
handleRowSelectChange(row);
|
|
33
|
+
$: {
|
|
34
|
+
handleRowSelectChange(row, selected);
|
|
31
35
|
}
|
|
32
36
|
|
|
33
|
-
$: style = rowHeight== null ? '' : `height: ${rowHeight}px`
|
|
37
|
+
$: style = rowHeight == null ? '' : `height: ${rowHeight}px`
|
|
34
38
|
|
|
35
39
|
</script>
|
|
36
|
-
<div class="
|
|
37
|
-
|
|
38
|
-
{
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
40
|
+
<div class="data-row" class:alternative style="width: 100%; {style}">
|
|
41
|
+
{#if indicatorColumn}
|
|
42
|
+
<div class="data-cell indicator-cell" style="width: {indicatorColumn.width}px">
|
|
43
|
+
{#if selectable}
|
|
44
|
+
<input type="checkbox" bind:checked={selected}/>
|
|
45
|
+
{/if}
|
|
46
|
+
|
|
47
|
+
{#if expandable}
|
|
48
|
+
<div class="expand-icon" style="">
|
|
49
|
+
<i class={row == expandRow ? 'uniface-icon-folder' : "uniface-icon-folder-plus"} aria-hidden="true" on:click={showInlineData}></i>
|
|
50
|
+
</div>
|
|
51
|
+
{/if}
|
|
52
|
+
{#if indicatorColumn.displayNo}
|
|
53
|
+
<div style="margin-left: 4px; width: 20px; text-align: left">
|
|
54
|
+
<span>{rowNo}</span>
|
|
55
|
+
</div>
|
|
56
|
+
{/if}
|
|
57
|
+
</div>
|
|
58
|
+
{/if}
|
|
46
59
|
{#each cols as column, colIdx}
|
|
47
60
|
<DataCell frozen={true} {colIdx} {column} data={row.data}/>
|
|
48
61
|
{/each}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import type TableRow from "./TableRow";
|
|
2
|
-
import type { RowEventHandler } from "../UniDataTable";
|
|
2
|
+
import type { RowEventHandler, RowSelectEventHandler } from "../UniDataTable";
|
|
3
3
|
import type DataColumn from "../lib/DataColumn";
|
|
4
|
+
import type { IndicatorColumn } from "../..";
|
|
4
5
|
interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
|
|
5
6
|
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
|
6
7
|
$$bindings?: Bindings;
|
|
@@ -22,9 +23,11 @@ declare const FixedRow: $$__sveltets_2_IsomorphicComponent<{
|
|
|
22
23
|
row: TableRow;
|
|
23
24
|
alternative: boolean;
|
|
24
25
|
handleRowExpand: RowEventHandler;
|
|
25
|
-
handleRowSelectChange:
|
|
26
|
-
selected
|
|
26
|
+
handleRowSelectChange: RowSelectEventHandler;
|
|
27
|
+
selected: boolean;
|
|
28
|
+
expandRow?: any;
|
|
27
29
|
rowHeight: number;
|
|
30
|
+
indicatorColumn: IndicatorColumn | null;
|
|
28
31
|
}, {
|
|
29
32
|
[evt: string]: CustomEvent<any>;
|
|
30
33
|
}, {}, {}, string>;
|
|
@@ -1,41 +1,36 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
2
|
|
|
3
3
|
import {OrderDirection} from "../lib/OrderDirection";
|
|
4
|
-
import type
|
|
5
|
-
import type ActionsColumn from "../lib/ActionsColumn";
|
|
6
|
-
import type {CompareFunction} from "../lib/CompareFunction";
|
|
7
|
-
import {type SelectionEventHandler, SelectionMode, type TableEventHandler} from "../UniDataTable";
|
|
8
|
-
import FixedHeaderPanel from "./FixedHeaderPanel.svelte";
|
|
4
|
+
import {type TableEventHandler} from "../UniDataTable";
|
|
9
5
|
import type DataColumn from "../lib/DataColumn";
|
|
10
6
|
|
|
11
|
-
export let actionsColumn: ActionsColumn | null;
|
|
12
|
-
export let indicatorColumn: IndicatorColumn;
|
|
13
7
|
export let scrollLeft: number = 0;
|
|
14
|
-
export let handleToggleSelectAll: SelectionEventHandler;
|
|
15
8
|
export let handleWidthChange: TableEventHandler;
|
|
16
|
-
export let sortData: (compareFun: CompareFunction, descending: boolean) => void;
|
|
17
9
|
export let dataCols: Array<any>;
|
|
18
|
-
export let frozenCols: Array<DataColumn> = [];
|
|
19
|
-
export let selectionMode: SelectionMode;
|
|
20
|
-
|
|
21
10
|
export let width: number = 0;
|
|
11
|
+
export let hasWhitespace: boolean = false;
|
|
12
|
+
export let handleCellClick: (col: DataColumn) => any;
|
|
13
|
+
export let orderColumn: DataColumn ;
|
|
14
|
+
export let orderDirection: OrderDirection;
|
|
22
15
|
|
|
23
16
|
let resizeCol: any;
|
|
24
|
-
|
|
25
|
-
let orderDirection: OrderDirection = OrderDirection.Ascending;
|
|
17
|
+
|
|
26
18
|
|
|
27
19
|
let startX: number = 0;
|
|
28
20
|
let startWidth: number = 0;
|
|
29
21
|
|
|
30
22
|
|
|
31
23
|
const handleResizeMouseDown = (col: DataColumn) => (event: MouseEvent) => {
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
24
|
+
if (col.resizable) {
|
|
25
|
+
resizeCol = col;
|
|
26
|
+
startX = event.clientX;
|
|
27
|
+
startWidth = resizeCol.width;
|
|
28
|
+
|
|
29
|
+
document.body.style.cursor = 'col-resize';
|
|
30
|
+
// 绑定鼠标移动和松开事件
|
|
31
|
+
window.addEventListener('mousemove', onMouseMove);
|
|
32
|
+
window.addEventListener('mouseup', onMouseUp);
|
|
33
|
+
}
|
|
39
34
|
}
|
|
40
35
|
|
|
41
36
|
const onMouseMove = (event: MouseEvent) => {
|
|
@@ -53,57 +48,31 @@
|
|
|
53
48
|
// 结束拖动
|
|
54
49
|
function onMouseUp() {
|
|
55
50
|
resizeCol = null;
|
|
51
|
+
document.body.style.cursor = 'default';
|
|
56
52
|
window.removeEventListener('mousemove', onMouseMove);
|
|
57
53
|
window.removeEventListener('mouseup', onMouseUp);
|
|
58
54
|
}
|
|
59
55
|
|
|
60
56
|
|
|
61
|
-
|
|
62
|
-
if (col.compareFunction != null) {
|
|
63
|
-
if (col == orderColumn) {
|
|
64
|
-
orderDirection = orderDirection == OrderDirection.Ascending ? OrderDirection.Descending : OrderDirection.Ascending;
|
|
65
|
-
} else {
|
|
66
|
-
orderColumn = col;
|
|
67
|
-
orderDirection = OrderDirection.Ascending;
|
|
68
|
-
}
|
|
69
|
-
sortData?.(col.compareFunction, orderDirection == OrderDirection.Descending);
|
|
70
|
-
}
|
|
71
|
-
}
|
|
57
|
+
|
|
72
58
|
|
|
73
59
|
|
|
74
60
|
</script>
|
|
75
|
-
<div class="
|
|
76
|
-
<
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
<
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
class={orderDirection===OrderDirection.Ascending ? 'uniface-icon-chevron-up' : 'uniface-icon-chevron-down'}></i>
|
|
86
|
-
{/if}
|
|
87
|
-
</div>
|
|
88
|
-
<div class="header-cell-divider" class:resizer={col.resizable} aria-hidden="true"
|
|
89
|
-
on:mousedown={handleResizeMouseDown(col)}></div>
|
|
61
|
+
<div class="header-row">
|
|
62
|
+
<div style="left: {-scrollLeft}px; width: {width}px">
|
|
63
|
+
{#each dataCols ?? [] as col, index}
|
|
64
|
+
<div class="col-{index} data-cell" class:sortable={col.compareFunction!=null} class:whitespace={hasWhitespace}>
|
|
65
|
+
<div class:sortable={col.compareFunction != null} on:click={handleCellClick(col)} aria-hidden="true" class="vertical-center">
|
|
66
|
+
<span>{col.text}</span>
|
|
67
|
+
{#if col === orderColumn}
|
|
68
|
+
<i style="margin-left: 2px; font-size: 12px; position: absolute; top: 0; right: 4px"
|
|
69
|
+
class={orderDirection===OrderDirection.Ascending ? 'uniface-icon-chevron-up' : 'uniface-icon-chevron-down'}></i>
|
|
70
|
+
{/if}
|
|
90
71
|
</div>
|
|
91
|
-
|
|
92
|
-
|
|
72
|
+
<div class="header-cell-divider" class:resizer={col.resizable} aria-hidden="true"
|
|
73
|
+
on:mousedown={handleResizeMouseDown(col)}></div>
|
|
74
|
+
|
|
93
75
|
</div>
|
|
94
|
-
|
|
76
|
+
{/each}
|
|
95
77
|
</div>
|
|
96
|
-
{#if actionsColumn}
|
|
97
|
-
<div class="header-actions" style="width: {actionsColumn.width}px">
|
|
98
|
-
<div>
|
|
99
|
-
<span>{actionsColumn.title ?? ''}</span>
|
|
100
|
-
</div>
|
|
101
|
-
|
|
102
|
-
</div>
|
|
103
|
-
{/if}
|
|
104
78
|
</div>
|
|
105
|
-
|
|
106
|
-
<style>
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
</style>
|
|
@@ -1,7 +1,5 @@
|
|
|
1
|
-
import
|
|
2
|
-
import type
|
|
3
|
-
import type { CompareFunction } from "../lib/CompareFunction";
|
|
4
|
-
import { type SelectionEventHandler, SelectionMode, type TableEventHandler } from "../UniDataTable";
|
|
1
|
+
import { OrderDirection } from "../lib/OrderDirection";
|
|
2
|
+
import { type TableEventHandler } from "../UniDataTable";
|
|
5
3
|
import type DataColumn from "../lib/DataColumn";
|
|
6
4
|
interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
|
|
7
5
|
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
|
@@ -17,16 +15,14 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
|
|
|
17
15
|
z_$$bindings?: Bindings;
|
|
18
16
|
}
|
|
19
17
|
declare const TableHeaderPanel: $$__sveltets_2_IsomorphicComponent<{
|
|
20
|
-
actionsColumn: ActionsColumn | null;
|
|
21
|
-
indicatorColumn: IndicatorColumn;
|
|
22
18
|
scrollLeft?: number;
|
|
23
|
-
handleToggleSelectAll: SelectionEventHandler;
|
|
24
19
|
handleWidthChange: TableEventHandler;
|
|
25
|
-
sortData: (compareFun: CompareFunction, descending: boolean) => void;
|
|
26
20
|
dataCols: Array<any>;
|
|
27
|
-
frozenCols?: Array<DataColumn>;
|
|
28
|
-
selectionMode: SelectionMode;
|
|
29
21
|
width?: number;
|
|
22
|
+
hasWhitespace?: boolean;
|
|
23
|
+
handleCellClick: (col: DataColumn) => any;
|
|
24
|
+
orderColumn: DataColumn;
|
|
25
|
+
orderDirection: OrderDirection;
|
|
30
26
|
}, {
|
|
31
27
|
[evt: string]: CustomEvent<any>;
|
|
32
28
|
}, {}, {}, string>;
|
|
@@ -1,14 +1,4 @@
|
|
|
1
1
|
export default class TableRow {
|
|
2
|
-
private _expand;
|
|
3
|
-
private _height;
|
|
4
2
|
readonly data: any;
|
|
5
|
-
private _isBusy;
|
|
6
|
-
selected: boolean;
|
|
7
3
|
constructor(data: any);
|
|
8
|
-
get height(): number;
|
|
9
|
-
set height(value: number);
|
|
10
|
-
get expand(): boolean;
|
|
11
|
-
set expand(value: boolean);
|
|
12
|
-
get isBusy(): boolean;
|
|
13
|
-
set isBusy(value: boolean);
|
|
14
4
|
}
|
|
@@ -1,35 +1,6 @@
|
|
|
1
1
|
export default class TableRow {
|
|
2
|
-
_expand = false;
|
|
3
|
-
_height = 0;
|
|
4
2
|
data;
|
|
5
|
-
_isBusy = false;
|
|
6
|
-
selected = false;
|
|
7
3
|
constructor(data) {
|
|
8
4
|
this.data = data;
|
|
9
5
|
}
|
|
10
|
-
get height() {
|
|
11
|
-
return this._height;
|
|
12
|
-
}
|
|
13
|
-
set height(value) {
|
|
14
|
-
this._height = value;
|
|
15
|
-
}
|
|
16
|
-
get expand() {
|
|
17
|
-
return this._expand;
|
|
18
|
-
}
|
|
19
|
-
set expand(value) {
|
|
20
|
-
this._expand = value;
|
|
21
|
-
}
|
|
22
|
-
// get selected(): boolean {
|
|
23
|
-
// return this._selected;
|
|
24
|
-
// }
|
|
25
|
-
//
|
|
26
|
-
// set selected(value: boolean) {
|
|
27
|
-
// this._selected = value;
|
|
28
|
-
// }
|
|
29
|
-
get isBusy() {
|
|
30
|
-
return this._isBusy;
|
|
31
|
-
}
|
|
32
|
-
set isBusy(value) {
|
|
33
|
-
this._isBusy = value;
|
|
34
|
-
}
|
|
35
6
|
}
|
|
@@ -1,9 +1,7 @@
|
|
|
1
|
-
import type { CompareFunction } from "../lib/CompareFunction";
|
|
2
1
|
import TableRow from "./TableRow";
|
|
3
2
|
export default class TableRows {
|
|
4
3
|
private _rows;
|
|
5
4
|
constructor();
|
|
6
5
|
set data(list: Array<any>);
|
|
7
6
|
get rows(): Array<TableRow>;
|
|
8
|
-
sort(compareFun: CompareFunction, descending: boolean): void;
|
|
9
7
|
}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
|
|
2
|
+
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
|
3
|
+
$$bindings?: Bindings;
|
|
4
|
+
} & Exports;
|
|
5
|
+
(internal: unknown, props: {
|
|
6
|
+
$$events?: Events;
|
|
7
|
+
$$slots?: Slots;
|
|
8
|
+
}): Exports & {
|
|
9
|
+
$set?: any;
|
|
10
|
+
$on?: any;
|
|
11
|
+
};
|
|
12
|
+
z_$$bindings?: Bindings;
|
|
13
|
+
}
|
|
14
|
+
declare const TreeRootCell: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
|
|
15
|
+
[evt: string]: CustomEvent<any>;
|
|
16
|
+
}, {}, {}, string>;
|
|
17
|
+
type TreeRootCell = InstanceType<typeof TreeRootCell>;
|
|
18
|
+
export default TreeRootCell;
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
export let big: boolean = false;
|
|
14
14
|
export let rowsSet: Array<number> = [25, 50, 100];
|
|
15
15
|
export let total: number = null as unknown as number;
|
|
16
|
-
export let generateInfo: GenerateTotalInfo;
|
|
16
|
+
export let generateInfo: GenerateTotalInfo | null = null;
|
|
17
17
|
export let rowCount: number = 25;
|
|
18
18
|
export let rowCountLabel: string = 'Rows/Page';
|
|
19
19
|
export let align: 'left' | 'right' | '' = '';
|
|
@@ -22,7 +22,7 @@ declare const PaginationPanel: $$__sveltets_2_IsomorphicComponent<{
|
|
|
22
22
|
big?: boolean;
|
|
23
23
|
rowsSet?: Array<number>;
|
|
24
24
|
total?: number;
|
|
25
|
-
generateInfo
|
|
25
|
+
generateInfo?: GenerateTotalInfo | null;
|
|
26
26
|
rowCount?: number;
|
|
27
27
|
rowCountLabel?: string;
|
|
28
28
|
align?: "left" | "right" | "";
|