@ticatec/uniface-element 0.2.1 → 0.2.2
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 +62 -15
- package/README_CN.md +52 -1
- package/dist/accordion/Accordion.svelte +1 -1
- package/dist/action-bar/ActionBar.svelte +7 -1
- package/dist/attachment-files/FileRender.svelte +1 -1
- package/dist/attachment-files/FileUploadBar.svelte +7 -6
- package/dist/attachment-files/FileUploadPanel.svelte +2 -2
- package/dist/base-calendar/DateContext.js +5 -4
- package/dist/base-calendar/YearPickupPanel.svelte +4 -4
- package/dist/card/Card.svelte +1 -1
- package/dist/card/Card.svelte.d.ts +1 -1
- package/dist/cascade-options-select/CascadeOptionSelect.svelte +2 -3
- package/dist/cascade-options-select/CascadeOptionSelect.svelte.d.ts +46 -1
- package/dist/cascade-options-select/CascadePanel.svelte +1 -1
- package/dist/checkbox/CheckBox.svelte +1 -1
- package/dist/color-picker/ColorPicker.svelte +9 -9
- package/dist/color-picker/ColorPicker.svelte.d.ts +0 -2
- package/dist/color-picker/ColorPickerPanel.svelte +11 -15
- package/dist/color-picker/ColorPickerPanel.svelte.d.ts +1 -1
- package/dist/common/CommonPicker.svelte +2 -2
- package/dist/common/CommonPicker.svelte.d.ts +1 -1
- package/dist/common/Popover.svelte +28 -6
- package/dist/common/Popover.svelte.d.ts +9 -3
- package/dist/common/uniface-utils.js +6 -4
- package/dist/common-editor/CommonEditor.svelte +1 -1
- package/dist/common-editor/CommonEditor.svelte.d.ts +1 -1
- package/dist/common-editor/NumberInput.svelte +1 -1
- package/dist/common-editor/NumberInput.svelte.d.ts +1 -1
- package/dist/concise-data-table/ConciseListTable.svelte +7 -2
- package/dist/concise-data-table/ConciseListTable.svelte.d.ts +1 -0
- package/dist/concise-data-table/DataRow.svelte +1 -1
- package/dist/concise-data-table/TableOptions.d.ts +1 -1
- package/dist/data-table/DataTable.svelte +1 -1
- package/dist/data-table/parts/ActionsPanel.svelte +4 -3
- package/dist/data-table/parts/ActionsRow.svelte +3 -3
- package/dist/data-table/parts/ContentPanel.svelte +3 -2
- package/dist/data-table/parts/FixedColumnsPanel.svelte +0 -1
- package/dist/data-table/parts/FixedColumnsPanel.svelte.d.ts +1 -2
- package/dist/data-table/parts/FixedHeaderPanel.svelte +2 -2
- package/dist/data-table/parts/FixedRow.svelte +2 -1
- package/dist/data-table/parts/FixedRow.svelte.d.ts +1 -1
- package/dist/data-table/parts/HrefCell.svelte +23 -2
- package/dist/data-table/parts/PopupMenu.svelte +25 -2
- package/dist/data-table/parts/PopupMenu.svelte.d.ts +8 -1
- package/dist/date-picker/DatePicker.svelte +0 -1
- package/dist/date-picker/DateTimePicker.svelte +3 -3
- package/dist/date-picker/ScrollBar.svelte +4 -7
- package/dist/date-range/DateRangeEditor.svelte +1 -1
- package/dist/dialog/CommonDialog.svelte +2 -2
- package/dist/dialog/Dialog.svelte +2 -3
- package/dist/drawer/Drawer.svelte +1 -1
- package/dist/form-field/FormField.svelte +2 -1
- package/dist/form-field/FormField.svelte.d.ts +1 -0
- package/dist/form-panel/flex-row-form/FormContainer.svelte +1 -1
- package/dist/form-panel/grid-form/EmptyCell.svelte +8 -7
- package/dist/form-panel/grid-form/EmptyCell.svelte.d.ts +2 -2
- package/dist/form-panel/grid-form/GridField.svelte +1 -1
- package/dist/i18nRes/i18nRes.d.ts +2 -0
- package/dist/i18nRes/i18nRes.js +44 -0
- package/dist/i18nRes/index.d.ts +2 -0
- package/dist/i18nRes/index.js +2 -0
- package/dist/image-files/ImageFilesField.svelte +1 -1
- package/dist/indicator/IndicatorBoard.svelte +1 -1
- package/dist/inline-cell-editor/InvalidEditor.svelte +1 -0
- package/dist/input-options-select/InputOptionsSelect.svelte +6 -6
- package/dist/input-options-select/InputOptionsSelect.svelte.d.ts +1 -1
- package/dist/layout/flex/FlexBlock.svelte +1 -1
- package/dist/lookup-editor/LookupEditor.svelte +1 -1
- package/dist/memo-editor/MemoEditor.svelte +2 -2
- package/dist/message-box/IMessageBox.d.ts +2 -4
- package/dist/message-box/IMessageBox.js +4 -6
- package/dist/message-box/MessageBoxBoard.svelte +1 -3
- package/dist/options-multi-select/OptionsMultiSelect.svelte +1 -1
- package/dist/prompts-text-editor/PromptsTextEditor.svelte +2 -2
- package/dist/prompts-text-editor/PromptsTextEditor.svelte.d.ts +1 -1
- package/dist/property-editor/PropertyEditor.svelte +3 -3
- package/dist/text-editor/PasswordEditor.svelte +1 -1
- package/dist/transfer/Transfer.svelte +17 -12
- package/dist/transfer/Transfer.svelte.d.ts +0 -1
- package/dist/unit-number-editor/UnitNumberEditor.svelte +2 -2
- package/package.json +20 -13
- package/dist/common-editor/DateInput.svelte +0 -27
- package/dist/common-editor/DateInput.svelte.d.ts +0 -29
- package/dist/i18n_resources/index.d.ts +0 -3
- package/dist/i18n_resources/index.js +0 -3
- /package/dist/{i18n_resources → i18nRes}/uniface_cn_resource.d.ts +0 -0
- /package/dist/{i18n_resources → i18nRes}/uniface_cn_resource.js +0 -0
- /package/dist/{i18n_resources → i18nRes}/uniface_en_resource.d.ts +0 -0
- /package/dist/{i18n_resources → i18nRes}/uniface_en_resource.js +0 -0
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
export function clickOutside(node) {
|
|
2
2
|
const handleClick = (event) => {
|
|
3
|
-
// @ts-ignore
|
|
3
|
+
// @ts-ignore 因为 event.target 是 EventTarget,不能直接传给 contains
|
|
4
4
|
if (node && !node.contains(event.target) && !event.defaultPrevented) {
|
|
5
|
-
node.dispatchEvent(
|
|
6
|
-
|
|
7
|
-
|
|
5
|
+
node.dispatchEvent(new CustomEvent('outerClick', {
|
|
6
|
+
bubbles: true, // 通常自定义事件要冒泡,方便捕获
|
|
7
|
+
cancelable: true, // 可取消
|
|
8
|
+
detail: { originalEvent: event } // 可选:传递原始事件信息
|
|
9
|
+
}));
|
|
8
10
|
event.stopPropagation();
|
|
9
11
|
event.preventDefault();
|
|
10
12
|
}
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
export let input$class: string = null as unknown as string;
|
|
18
18
|
export let displayMode: DisplayMode = DisplayMode.Edit;
|
|
19
19
|
export let showActionIcon: boolean = false;
|
|
20
|
-
export let clean: () => void;
|
|
20
|
+
export let clean: (() => void) | null = null;
|
|
21
21
|
|
|
22
22
|
export let hasLeadingIcon: boolean = true;
|
|
23
23
|
export let hasTrailingIcon: boolean = true;
|
|
@@ -31,7 +31,7 @@ declare const CommonEditor: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_Pr
|
|
|
31
31
|
input$class?: string;
|
|
32
32
|
displayMode?: DisplayMode;
|
|
33
33
|
showActionIcon?: boolean;
|
|
34
|
-
clean
|
|
34
|
+
clean?: (() => void) | null;
|
|
35
35
|
hasLeadingIcon?: boolean;
|
|
36
36
|
hasTrailingIcon?: boolean;
|
|
37
37
|
}, {
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
export let max: number | null = null;
|
|
15
15
|
export let min: number | null = null;
|
|
16
16
|
export let onChange: OnChangeHandler<number | null> = null as unknown as OnChangeHandler<number | null>;
|
|
17
|
-
export let textValue: string;
|
|
17
|
+
export let textValue: string = '';
|
|
18
18
|
export const focus = () => {
|
|
19
19
|
editor.focus();
|
|
20
20
|
}
|
|
@@ -23,7 +23,7 @@ declare const NumberInput: $$__sveltets_2_IsomorphicComponent<{
|
|
|
23
23
|
max?: number | null;
|
|
24
24
|
min?: number | null;
|
|
25
25
|
onChange?: OnChangeHandler<number | null>;
|
|
26
|
-
textValue
|
|
26
|
+
textValue?: string;
|
|
27
27
|
focus?: () => void;
|
|
28
28
|
}, {
|
|
29
29
|
[evt: string]: CustomEvent<any>;
|
|
@@ -4,6 +4,7 @@
|
|
|
4
4
|
import DataRow from "./DataRow.svelte";
|
|
5
5
|
import {type RowClickHandler, type TableOptions} from "./TableOptions";
|
|
6
6
|
import utils from "./utils";
|
|
7
|
+
import type Column from "./Column";
|
|
7
8
|
|
|
8
9
|
// list array to display
|
|
9
10
|
export let list: Array<any>;
|
|
@@ -120,6 +121,10 @@
|
|
|
120
121
|
|
|
121
122
|
$: tableStyle = utils.generateTableStyle(id, columns, tabOptions, viewWidth);
|
|
122
123
|
|
|
124
|
+
const handleRowClick = (row: any) => (event: MouseEvent) => {
|
|
125
|
+
rowClickHandler?.(row)
|
|
126
|
+
}
|
|
127
|
+
|
|
123
128
|
|
|
124
129
|
</script>
|
|
125
130
|
|
|
@@ -141,11 +146,11 @@
|
|
|
141
146
|
<div class="table-body-container" bind:this={viewPanel} class:auto-scroll={autoScroll}>
|
|
142
147
|
<div class="table-body" style="transition: transform {autoScroll ? '2s' : '0s'} ease;">
|
|
143
148
|
{#each list as row, rowIndex}
|
|
144
|
-
<DataRow data={row} {columns} showAlternative={rowIndex % 2 == 1} on:click={
|
|
149
|
+
<DataRow data={row} {columns} showAlternative={rowIndex % 2 == 1} on:click={handleRowClick(row)}/>
|
|
145
150
|
{/each}
|
|
146
151
|
{#if autoScroll && list.length > visibleRowCount}
|
|
147
152
|
{#each list.slice(0, visibleRowCount) as row, rowIndex}
|
|
148
|
-
<DataRow data={row} {columns} showAlternative={rowIndex % 2 == 1} on:click={
|
|
153
|
+
<DataRow data={row} {columns} showAlternative={rowIndex % 2 == 1} on:click={handleRowClick(row)}/>
|
|
149
154
|
{/each}
|
|
150
155
|
{/if}
|
|
151
156
|
</div>
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { type RowClickHandler, type TableOptions } from "./TableOptions";
|
|
2
|
+
import type Column from "./Column";
|
|
2
3
|
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> {
|
|
3
4
|
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
|
4
5
|
$$bindings?: Bindings;
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
export let showAlternative: boolean;
|
|
9
9
|
</script>
|
|
10
10
|
|
|
11
|
-
<div class="table-row" class:alternative={showAlternative} on:click>
|
|
11
|
+
<div class="table-row" class:alternative={showAlternative} aria-hidden="true" on:click>
|
|
12
12
|
{#each columns as column, idx}
|
|
13
13
|
<DataCell {idx} {column} {data}/>
|
|
14
14
|
{/each}
|
|
@@ -106,7 +106,7 @@
|
|
|
106
106
|
{#if table && dataColumns && fixedCols}
|
|
107
107
|
{#if indicatorColumn || fixedCols.length > 0}
|
|
108
108
|
<FixedColumnsPanel {handleRowExpand} bind:selectedRows {orderDirection} {orderColumn} {handleCellClick} {indicatorColumn}
|
|
109
|
-
bind:expandRow
|
|
109
|
+
bind:expandRow
|
|
110
110
|
{rowHeight} {fixedCols} {inlineRowHeight} {rows} {handleWidthChange} width={frozenWidth}
|
|
111
111
|
bind:scrollTop/>
|
|
112
112
|
{/if}
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
import type ActionsColumn from "../lib/ActionsColumn";
|
|
5
5
|
import type TableRow from "./TableRow";
|
|
6
6
|
import {onDestroy, onMount} from "svelte";
|
|
7
|
-
import
|
|
7
|
+
import i18nRes from "../../i18nRes";
|
|
8
8
|
|
|
9
9
|
export let actionsColumn: ActionsColumn;
|
|
10
10
|
export let scrollTop: number = 0;
|
|
@@ -17,7 +17,8 @@
|
|
|
17
17
|
export let rowHeight: number;
|
|
18
18
|
|
|
19
19
|
const handleActionPanelScroll = (e: Event) => {
|
|
20
|
-
|
|
20
|
+
const target = e.target as HTMLDivElement;
|
|
21
|
+
scrollTop = target.scrollTop;
|
|
21
22
|
}
|
|
22
23
|
|
|
23
24
|
let scrollPanel: any;
|
|
@@ -43,7 +44,7 @@
|
|
|
43
44
|
resizeObserver.disconnect();
|
|
44
45
|
});
|
|
45
46
|
|
|
46
|
-
let actionText =
|
|
47
|
+
let actionText = i18nRes.dataTable.actions;
|
|
47
48
|
|
|
48
49
|
</script>
|
|
49
50
|
|
|
@@ -96,7 +96,7 @@
|
|
|
96
96
|
onClick={()=>action.callback(row.data)}/>
|
|
97
97
|
{:else}
|
|
98
98
|
<TextButton style="flex-shrink: 0; top: 0" size="mini" type="{action.type ?? 'primary'}" label={action.label}
|
|
99
|
-
onClick={()=>action.callback(row.data)}/>
|
|
99
|
+
onClick={async ()=>action.callback(row.data)}/>
|
|
100
100
|
{/if}
|
|
101
101
|
{/each}
|
|
102
102
|
{#if popupList.length > 0}
|
|
@@ -111,10 +111,10 @@
|
|
|
111
111
|
<div class="action-popover" style="padding: 4px 6px; text-align: center">
|
|
112
112
|
{#if action.icon}
|
|
113
113
|
<IconButton style="flex-shrink: 0; top: 0" size="mini" type="{action.type ?? 'primary'}" icon={action.icon}
|
|
114
|
-
onClick={()=>{action.callback(row.data); showPopup=false}}/>
|
|
114
|
+
onClick={async ()=>{action.callback(row.data); showPopup=false}}/>
|
|
115
115
|
{:else}
|
|
116
116
|
<TextButton style="flex-shrink: 0; top: 0" size="mini" type="{action.type ?? 'primary'}" label={action.label}
|
|
117
|
-
onClick={()=>{action.callback(row.data); showPopup=false}}/>
|
|
117
|
+
onClick={async ()=>{action.callback(row.data); showPopup=false}}/>
|
|
118
118
|
{/if}
|
|
119
119
|
</div>
|
|
120
120
|
{/each}
|
|
@@ -57,10 +57,11 @@
|
|
|
57
57
|
})
|
|
58
58
|
|
|
59
59
|
const handleDataTableScroll = (e: Event) => {
|
|
60
|
+
const target = e.target as HTMLElement;
|
|
60
61
|
if (showVerticalScroll) {
|
|
61
|
-
scrollTop =
|
|
62
|
+
scrollTop = target.scrollTop;
|
|
62
63
|
}
|
|
63
|
-
scrollLeft =
|
|
64
|
+
scrollLeft = target.scrollLeft;
|
|
64
65
|
}
|
|
65
66
|
|
|
66
67
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import type TableRow from "./TableRow";
|
|
2
2
|
import type { IndicatorColumn } from "..";
|
|
3
|
-
import
|
|
3
|
+
import { type RowEventHandler, type TableEventHandler } from "../UniDataTable";
|
|
4
4
|
import type DataColumn from "../lib/DataColumn";
|
|
5
5
|
import { OrderDirection } from "../lib/OrderDirection";
|
|
6
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> {
|
|
@@ -22,7 +22,6 @@ declare const FixedColumnsPanel: $$__sveltets_2_IsomorphicComponent<{
|
|
|
22
22
|
width: number;
|
|
23
23
|
scrollTop?: number;
|
|
24
24
|
rows: Array<TableRow>;
|
|
25
|
-
table: UniDataTable;
|
|
26
25
|
handleWidthChange: TableEventHandler;
|
|
27
26
|
handleRowExpand: RowEventHandler;
|
|
28
27
|
handleCellClick: (col: DataColumn) => any;
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
import {type SelectionEventHandler, SelectionMode, type TableEventHandler} from "../UniDataTable";
|
|
6
6
|
import utils from "../../common/utils";
|
|
7
7
|
import {OrderDirection} from "../lib/OrderDirection";
|
|
8
|
-
import
|
|
8
|
+
import i18nRes from "../../i18nRes";
|
|
9
9
|
|
|
10
10
|
export let columns: Array<DataColumn>;
|
|
11
11
|
export let indicatorColumn: IndicatorColumn | null;
|
|
@@ -84,7 +84,7 @@
|
|
|
84
84
|
{:else }
|
|
85
85
|
<div style="text-align: center" class="vertical-center">
|
|
86
86
|
{#if indicatorColumn.displayNo}
|
|
87
|
-
<span>{
|
|
87
|
+
<span>{i18nRes.dataTable.rowNo}</span>
|
|
88
88
|
{/if}
|
|
89
89
|
</div>
|
|
90
90
|
{/if}
|
|
@@ -4,7 +4,8 @@
|
|
|
4
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
|
+
import type {IndicatorColumn} from "..";
|
|
8
|
+
|
|
8
9
|
|
|
9
10
|
export let selectable: boolean = false;
|
|
10
11
|
export let rowNo: number;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import type TableRow from "./TableRow";
|
|
2
2
|
import type { RowEventHandler, RowSelectEventHandler } from "../UniDataTable";
|
|
3
3
|
import type DataColumn from "../lib/DataColumn";
|
|
4
|
-
import type { IndicatorColumn } from "
|
|
4
|
+
import type { IndicatorColumn } from "..";
|
|
5
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> {
|
|
6
6
|
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
|
7
7
|
$$bindings?: Bindings;
|
|
@@ -15,6 +15,27 @@
|
|
|
15
15
|
</script>
|
|
16
16
|
<div style="display: flex; flex-direction: row; gap: 8px; justify-content: center">
|
|
17
17
|
{#each list as item, idx}
|
|
18
|
-
<
|
|
18
|
+
<button class="link-style" on:click|preventDefault={()=>item.action()}>{item.text}</button>
|
|
19
19
|
{/each}
|
|
20
|
-
</div>
|
|
20
|
+
</div>
|
|
21
|
+
|
|
22
|
+
<style>
|
|
23
|
+
button.link-style {
|
|
24
|
+
background: none;
|
|
25
|
+
border: none;
|
|
26
|
+
color: blue;
|
|
27
|
+
text-decoration: underline;
|
|
28
|
+
cursor: pointer;
|
|
29
|
+
font: inherit;
|
|
30
|
+
padding: 0;
|
|
31
|
+
}
|
|
32
|
+
button.link-style:focus {
|
|
33
|
+
outline: none;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
button.link-style:active {
|
|
37
|
+
/* 取消默认的active边框或者阴影 */
|
|
38
|
+
outline: none;
|
|
39
|
+
box-shadow: none;
|
|
40
|
+
}
|
|
41
|
+
</style>
|
|
@@ -24,6 +24,30 @@
|
|
|
24
24
|
}
|
|
25
25
|
}
|
|
26
26
|
|
|
27
|
+
export function outerClick(node: HTMLElement, callback: () => void) {
|
|
28
|
+
const handleClick = (event: MouseEvent) => {
|
|
29
|
+
// 如果点击目标不在node内,则触发回调
|
|
30
|
+
if (!node.contains(event.target as Node)) {
|
|
31
|
+
callback();
|
|
32
|
+
}
|
|
33
|
+
};
|
|
34
|
+
|
|
35
|
+
// 监听全局点击事件(useCapture=true,避免事件冒泡造成的问题)
|
|
36
|
+
document.addEventListener('click', handleClick, true);
|
|
37
|
+
|
|
38
|
+
// 清理事件监听器
|
|
39
|
+
onDestroy(() => {
|
|
40
|
+
document.removeEventListener('click', handleClick, true);
|
|
41
|
+
});
|
|
42
|
+
|
|
43
|
+
// action 必须返回一个对象,可以选实现 update 和 destroy
|
|
44
|
+
return {
|
|
45
|
+
destroy() {
|
|
46
|
+
document.removeEventListener('click', handleClick, true);
|
|
47
|
+
}
|
|
48
|
+
};
|
|
49
|
+
}
|
|
50
|
+
|
|
27
51
|
onMount(async () => {
|
|
28
52
|
resizeObserver = new ResizeObserver(() => {
|
|
29
53
|
checkPosition();
|
|
@@ -38,8 +62,7 @@
|
|
|
38
62
|
|
|
39
63
|
</script>
|
|
40
64
|
|
|
41
|
-
|
|
42
65
|
<div bind:this={panel} style="position: absolute; right: 8px; {style}; background-color: #FFFFFF; border: 1px solid #e1e1e1; z-index: 5"
|
|
43
|
-
use:clickOutside
|
|
66
|
+
use:clickOutside use:outerClick={close}>
|
|
44
67
|
<slot></slot>
|
|
45
68
|
</div>
|
|
@@ -19,12 +19,19 @@ type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
|
|
|
19
19
|
declare const PopupMenu: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
|
|
20
20
|
closeCallback: () => void;
|
|
21
21
|
parentRect: DOMRect;
|
|
22
|
+
outerClick?: (node: HTMLElement, callback: () => void) => {
|
|
23
|
+
destroy(): void;
|
|
24
|
+
};
|
|
22
25
|
}, {
|
|
23
26
|
default: {};
|
|
24
27
|
}>, {
|
|
25
28
|
[evt: string]: CustomEvent<any>;
|
|
26
29
|
}, {
|
|
27
30
|
default: {};
|
|
28
|
-
}, {
|
|
31
|
+
}, {
|
|
32
|
+
outerClick: (node: HTMLElement, callback: () => void) => {
|
|
33
|
+
destroy(): void;
|
|
34
|
+
};
|
|
35
|
+
}, string>;
|
|
29
36
|
type PopupMenu = InstanceType<typeof PopupMenu>;
|
|
30
37
|
export default PopupMenu;
|
|
@@ -2,7 +2,6 @@
|
|
|
2
2
|
|
|
3
3
|
import {onMount, tick} from "svelte";
|
|
4
4
|
import {DisplayMode} from "../common/DisplayMode";
|
|
5
|
-
import Popover from "../common/Popover.svelte";
|
|
6
5
|
import dayjs from "dayjs";
|
|
7
6
|
import Calendar from "../base-calendar";
|
|
8
7
|
import type {OnChangeHandler} from "../common/OnChangeHandler";
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
import {TextButton} from "../button";
|
|
10
10
|
import type {OnChangeHandler} from "../common/OnChangeHandler";
|
|
11
11
|
import CommonPicker from "../common/CommonPicker.svelte";
|
|
12
|
-
import
|
|
12
|
+
import i18nRes from "../i18nRes";
|
|
13
13
|
|
|
14
14
|
export let disabled: boolean = false;
|
|
15
15
|
export let readonly: boolean = false;
|
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
}
|
|
32
32
|
|
|
33
33
|
|
|
34
|
-
let confirmText =
|
|
34
|
+
let confirmText = i18nRes.calendar.confirmText;
|
|
35
35
|
let textValue: string;
|
|
36
36
|
let editor: any;
|
|
37
37
|
|
|
@@ -76,7 +76,7 @@
|
|
|
76
76
|
}
|
|
77
77
|
}
|
|
78
78
|
|
|
79
|
-
const confirm = () => {
|
|
79
|
+
const confirm = async () => {
|
|
80
80
|
if (dateUtils.toDayjs(value)?.toDate() != currentValue.toDate()) {
|
|
81
81
|
value = currentValue;
|
|
82
82
|
onChange?.(currentValue.toDate());
|
|
@@ -71,19 +71,19 @@
|
|
|
71
71
|
$:resetList();
|
|
72
72
|
|
|
73
73
|
</script>
|
|
74
|
-
<div class="scroll-bar" tabindex="1" on:wheel={handleMouseWheel}>
|
|
74
|
+
<div class="scroll-bar" tabindex="-1" aria-hidden="true" on:wheel={handleMouseWheel}>
|
|
75
75
|
<div class="action-bar">
|
|
76
76
|
<div class="arrow-up" class:disabled={!enable}>
|
|
77
|
-
<i class="icon_google_keyboard_arrow_up" on:click={decValue} on:dragstart={(e)=>{e.preventDefault()}}
|
|
77
|
+
<i class="icon_google_keyboard_arrow_up" aria-hidden="true" on:click={decValue} on:dragstart={(e)=>{e.preventDefault()}}
|
|
78
78
|
on:mousedown={handleMouseDown(-1)} on:mouseup={handleMouseUp} on:mouseleave={handleMouseUp}></i>
|
|
79
79
|
</div>
|
|
80
80
|
</div>
|
|
81
81
|
{#each list as v}
|
|
82
|
-
<div style={!enable && v!= value ? "visibility: hidden; " : ""} class="digital-block" on:click={()=>{handleDigitalClick(v)}} class:inactive={v!=value}><span>{v}</span></div>
|
|
82
|
+
<div style={!enable && v!= value ? "visibility: hidden; " : ""} class="digital-block" aria-hidden="true" on:click={()=>{handleDigitalClick(v)}} class:inactive={v!=value}><span>{v}</span></div>
|
|
83
83
|
{/each}
|
|
84
84
|
<div class="action-bar">
|
|
85
85
|
<div class="arrow-down" class:disabled={!enable}>
|
|
86
|
-
<i class="icon_google_keyboard_arrow_downn" on:click={incValue} on:dragstart={(e)=>{e.preventDefault()}}
|
|
86
|
+
<i class="icon_google_keyboard_arrow_downn" aria-hidden="true" on:click={incValue} on:dragstart={(e)=>{e.preventDefault()}}
|
|
87
87
|
on:mousedown={handleMouseDown(1)} on:mouseup={handleMouseUp} on:mouseleave={handleMouseUp}></i>
|
|
88
88
|
</div>
|
|
89
89
|
</div>
|
|
@@ -94,9 +94,6 @@
|
|
|
94
94
|
width: 33%;
|
|
95
95
|
}
|
|
96
96
|
|
|
97
|
-
.top-bar {
|
|
98
|
-
text-align: center;
|
|
99
|
-
}
|
|
100
97
|
|
|
101
98
|
.digital-block {
|
|
102
99
|
padding: 3px 0;
|
|
@@ -71,7 +71,7 @@
|
|
|
71
71
|
</CommonRangeEditor>
|
|
72
72
|
|
|
73
73
|
{#if showPopup}
|
|
74
|
-
<Popover target={rootElement}
|
|
74
|
+
<Popover target={rootElement} onClose={()=>{showPopup=false}} style="width: 452px" autoFit={false}>
|
|
75
75
|
<div style="white-space: nowrap">
|
|
76
76
|
<Calendar style="border-right: 1px solid #f0f0f0" value={fromValue} onSelect={handleFormCalendarSelect} {min} max={maxFrom}/>
|
|
77
77
|
<Calendar value={toValue} onSelect={handleToCalendarSelect} min={minTo} {max}/>
|
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
|
|
3
3
|
import Dialog from "./Dialog.svelte";
|
|
4
4
|
import type {ButtonAction, ButtonActions} from "../action-bar";
|
|
5
|
-
import i18n from "@ticatec/i18n";
|
|
6
5
|
import type {DialogCloseConfirm} from "./DialogCloseConfirm";
|
|
7
6
|
import {ModalResult, type OnClose} from "./ModalResult";
|
|
7
|
+
import i18nRes from "../i18nRes";
|
|
8
8
|
|
|
9
9
|
export let title: string;
|
|
10
10
|
export let width: string = 'unset';
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
let dialog: any;
|
|
21
21
|
|
|
22
22
|
let confirmAction: ButtonAction = {
|
|
23
|
-
label: confirmText??
|
|
23
|
+
label: confirmText??i18nRes.btnConfirm,
|
|
24
24
|
type: "primary",
|
|
25
25
|
disabled: enableConfirm,
|
|
26
26
|
handler: async ()=> {
|
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
import {fade} from "svelte/transition";
|
|
3
3
|
import type {DialogCloseConfirm} from "./DialogCloseConfirm";
|
|
4
4
|
import ActionBar, {type ButtonAction, type ButtonActions} from "../action-bar";
|
|
5
|
-
import i18n from "@ticatec/i18n";
|
|
6
5
|
import {getContext, onMount} from "svelte";
|
|
7
6
|
import {ModalResult, type OnClose} from "./ModalResult";
|
|
7
|
+
import i18nRes from "../i18nRes";
|
|
8
8
|
|
|
9
9
|
export let title: string;
|
|
10
10
|
export let width: string = 'unset';
|
|
@@ -23,7 +23,6 @@
|
|
|
23
23
|
export const close = async (result: ModalResult) => {
|
|
24
24
|
let confirm = closeConfirm && result == ModalResult.Cancel ? await closeConfirm() : true;
|
|
25
25
|
if (confirm) {
|
|
26
|
-
console.log('关闭窗口')
|
|
27
26
|
closeDialog();
|
|
28
27
|
onClose?.(result);
|
|
29
28
|
}
|
|
@@ -53,7 +52,7 @@
|
|
|
53
52
|
|
|
54
53
|
onMount(async () => {
|
|
55
54
|
closeAction = closeAction ?? {
|
|
56
|
-
label:
|
|
55
|
+
label: i18nRes.common.btnClose,
|
|
57
56
|
type: 'secondary'
|
|
58
57
|
};
|
|
59
58
|
closeAction.handler = () => close(ModalResult.Cancel);
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
</script>
|
|
24
24
|
<div class="uniface-drawer" aria-hidden="true" style="display: {hidden ? 'none' : 'block'}" on:click={()=>{visible=false;}}>
|
|
25
25
|
{#if visible}
|
|
26
|
-
<div class={position} style="width: {width}px" transition:fly={{ x: xPos, duration: 1000, opacity: 0.5 }} aria-hidden="
|
|
26
|
+
<div class={position} style="width: {width}px" transition:fly={{ x: xPos, duration: 1000, opacity: 0.5 }} aria-hidden="true"
|
|
27
27
|
on:outroend={()=>{hidden = !visible}} on:click|stopPropagation>
|
|
28
28
|
<div>
|
|
29
29
|
<slot></slot>
|
|
@@ -11,6 +11,7 @@
|
|
|
11
11
|
export let labelSuffix: string = ':';
|
|
12
12
|
export let label$alignment: 'center' | 'top' = 'center';
|
|
13
13
|
|
|
14
|
+
export let height: string = null as unknown as string;
|
|
14
15
|
|
|
15
16
|
let className: string = '';
|
|
16
17
|
|
|
@@ -23,7 +24,7 @@
|
|
|
23
24
|
{/if}
|
|
24
25
|
<span>{label}{labelSuffix}</span>
|
|
25
26
|
</div>
|
|
26
|
-
<div class="field" style="">
|
|
27
|
+
<div class="field" style="height: {height??'auto'}">
|
|
27
28
|
<slot/>
|
|
28
29
|
</div>
|
|
29
30
|
{#if !utils.isEmpty(error)}
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
let className: string = "";
|
|
8
8
|
|
|
9
9
|
</script>
|
|
10
|
-
<div class="flex-row-form" class:field-layout-horizontal={fieldLayout=='horizontal'} {style}>
|
|
10
|
+
<div class="flex-row-form {className}" class:field-layout-horizontal={fieldLayout=='horizontal'} {style}>
|
|
11
11
|
<div>
|
|
12
12
|
<slot/>
|
|
13
13
|
</div>
|
|
@@ -2,19 +2,20 @@
|
|
|
2
2
|
|
|
3
3
|
export let rowSpan: number = 1;
|
|
4
4
|
export let colSpan: number = 1;
|
|
5
|
-
export let row: number
|
|
6
|
-
export let col: number
|
|
5
|
+
export let row: number;
|
|
6
|
+
export let col: number;
|
|
7
7
|
|
|
8
8
|
let style: string;
|
|
9
9
|
|
|
10
10
|
$: {
|
|
11
|
-
style =
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
11
|
+
style = '';
|
|
12
|
+
if (row != null) style += `grid-row-start: ${row};`;
|
|
13
|
+
if (col != null) style += `grid-column-start: ${col};`;
|
|
14
|
+
if (rowSpan > 1) style += `grid-row-end: span ${rowSpan};`;
|
|
15
|
+
if (colSpan > 1) style += `grid-column-end: span ${colSpan};`;
|
|
15
16
|
}
|
|
16
17
|
|
|
17
18
|
|
|
18
19
|
</script>
|
|
19
|
-
<div class="cell-field"
|
|
20
|
+
<div class="cell-field" {style}>
|
|
20
21
|
</div>
|
|
@@ -14,8 +14,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
|
|
|
14
14
|
declare const EmptyCell: $$__sveltets_2_IsomorphicComponent<{
|
|
15
15
|
rowSpan?: number;
|
|
16
16
|
colSpan?: number;
|
|
17
|
-
row
|
|
18
|
-
col
|
|
17
|
+
row: number;
|
|
18
|
+
col: number;
|
|
19
19
|
}, {
|
|
20
20
|
[evt: string]: CustomEvent<any>;
|
|
21
21
|
}, {}, {}, string>;
|
|
@@ -26,6 +26,6 @@
|
|
|
26
26
|
|
|
27
27
|
|
|
28
28
|
</script>
|
|
29
|
-
<FormField class="form-cell" {label$style} {labelSuffix} {style} {label} {required} {error} {
|
|
29
|
+
<FormField class="form-cell {arrangement}" {label$style} {labelSuffix} {style} {label} {required} {error} {height}>
|
|
30
30
|
<slot/>
|
|
31
31
|
</FormField>
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import { i18nUtils } from "@ticatec/i18n";
|
|
2
|
+
const langRes = {
|
|
3
|
+
common: {
|
|
4
|
+
btnClose: "Close",
|
|
5
|
+
btnCancel: 'Cancel',
|
|
6
|
+
btnConfirm: "OK",
|
|
7
|
+
textMore: "Load more",
|
|
8
|
+
},
|
|
9
|
+
colorPicker: "Pick up color",
|
|
10
|
+
calendar: {
|
|
11
|
+
months: [
|
|
12
|
+
'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'
|
|
13
|
+
],
|
|
14
|
+
monthsAbbr: [
|
|
15
|
+
'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
|
|
16
|
+
],
|
|
17
|
+
weekTitle: [
|
|
18
|
+
"Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"
|
|
19
|
+
],
|
|
20
|
+
weekTitleAbbr: [
|
|
21
|
+
"Sun", "Mon", "Tue", "Wed", "Thr", "Fri", "Sat"
|
|
22
|
+
],
|
|
23
|
+
confirmText: "OK"
|
|
24
|
+
},
|
|
25
|
+
upload: {
|
|
26
|
+
btnRetry: "Retry",
|
|
27
|
+
btnRemove: "Delete",
|
|
28
|
+
btnPickup: "Pickup files"
|
|
29
|
+
},
|
|
30
|
+
propertyEditor: {
|
|
31
|
+
colName: "Attribute",
|
|
32
|
+
colValue: "Value"
|
|
33
|
+
},
|
|
34
|
+
dataTable: {
|
|
35
|
+
rowNo: "#",
|
|
36
|
+
actions: "Actions",
|
|
37
|
+
emptyDataSet: 'Empty dataset'
|
|
38
|
+
},
|
|
39
|
+
transfer: {
|
|
40
|
+
selectIndicator: "Selected: {{selected}}/{{total}}"
|
|
41
|
+
}
|
|
42
|
+
};
|
|
43
|
+
const i18nRes = i18nUtils.createResourceProxy(langRes, 'uniface');
|
|
44
|
+
export default i18nRes;
|