@humandialog/forms.svelte 0.4.36 → 0.4.37
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 +0 -0
- package/components/Fab.svelte +100 -43
- package/components/Fab.svelte.d.ts +14 -14
- package/components/Fab2.svelte +89 -0
- package/components/Fab2.svelte.d.ts +14 -0
- package/components/Floating_container.svelte +21 -20
- package/components/Floating_container.svelte.d.ts +21 -21
- package/components/Grid.menu.svelte.d.ts +25 -25
- package/components/button.svelte.d.ts +24 -24
- package/components/checkbox.svelte.d.ts +25 -25
- package/components/combo/combo.d.ts +17 -17
- package/components/combo/combo.item.svelte.d.ts +19 -19
- package/components/combo/combo.js +17 -17
- package/components/combo/combo.source.svelte.d.ts +22 -22
- package/components/combo/combo.svelte +1 -1
- package/components/combo/combo.svelte.d.ts +39 -39
- package/components/contextmenu.svelte +49 -18
- package/components/contextmenu.svelte.d.ts +26 -26
- package/components/date.svelte.d.ts +30 -30
- package/components/delayed.spinner.svelte.d.ts +19 -19
- package/components/document/internal/Document_command.d.ts +9 -9
- package/components/document/internal/Document_command.js +9 -9
- package/components/document/internal/Selection_helper.d.ts +7 -7
- package/components/document/internal/Selection_helper.js +133 -133
- package/components/document/internal/Selection_range.d.ts +26 -26
- package/components/document/internal/Selection_range.js +58 -58
- package/components/document/internal/palette.row.svelte.d.ts +36 -36
- package/components/document/internal/palette.svelte +1 -1
- package/components/document/internal/palette.svelte.d.ts +67 -67
- package/components/document/rich.edit.svelte.d.ts +23 -23
- package/components/edit.field.svelte.d.ts +27 -27
- package/components/file.loader.svelte.d.ts +25 -25
- package/components/icon.svelte.d.ts +62 -62
- package/components/input.text.svelte.d.ts +29 -29
- package/components/inputbox.ltop.svelte.d.ts +50 -50
- package/components/list/List.d.ts +34 -34
- package/components/list/List.js +40 -40
- package/components/list/internal/list.element.svelte.d.ts +29 -29
- package/components/list/internal/list.inserter.svelte.d.ts +19 -19
- package/components/list/list.combo.svelte.d.ts +21 -21
- package/components/list/list.date.svelte.d.ts +18 -18
- package/components/list/list.inserter.svelte.d.ts +17 -17
- package/components/list/list.static.svelte.d.ts +17 -17
- package/components/list/list.summary.svelte.d.ts +19 -19
- package/components/list/list.svelte.d.ts +42 -42
- package/components/list/list.title.svelte.d.ts +19 -19
- package/components/menu.d.ts +4 -3
- package/components/menu.js +54 -48
- package/components/radio.svelte.d.ts +25 -25
- package/components/sidebar/sidebar.brand.svelte.d.ts +29 -29
- package/components/sidebar/sidebar.group.svelte.d.ts +31 -31
- package/components/sidebar/sidebar.item.svelte +51 -5
- package/components/sidebar/sidebar.item.svelte.d.ts +28 -28
- package/components/sidebar/sidebar.svelte.d.ts +27 -27
- package/components/simple.table.svelte.d.ts +41 -41
- package/components/table/_template.table.svelte.d.ts +57 -57
- package/components/table/column.svelte.d.ts +19 -19
- package/components/table/item.svelte.d.ts +17 -17
- package/components/table/table.d.ts +11 -11
- package/components/table/table.js +11 -11
- package/components/table/table.svelte.d.ts +75 -75
- package/components/textarea.ltop.svelte.d.ts +35 -35
- package/components/tile.title.svelte.d.ts +29 -29
- package/desk.svelte +57 -58
- package/desk.svelte.d.ts +23 -23
- package/form.box.svelte.d.ts +35 -35
- package/horizontal.toolbar.svelte +10 -13
- package/horizontal.toolbar.svelte.d.ts +23 -23
- package/index.d.ts +43 -43
- package/index.js +49 -49
- package/internal/configurable.content.svelte.d.ts +27 -27
- package/internal/loading.svelte.d.ts +23 -23
- package/modal.svelte +2 -2
- package/modal.svelte.d.ts +35 -35
- package/operations.svelte +0 -2
- package/operations.svelte.d.ts +16 -16
- package/package.json +8 -7
- package/page.row.svelte.d.ts +31 -31
- package/page.svelte.d.ts +43 -43
- package/stores.d.ts +33 -33
- package/stores.js +0 -0
- package/tenant.members.svelte.d.ts +33 -33
- package/tile.svelte.d.ts +33 -33
- package/tiles.row.svelte.d.ts +31 -31
- package/tiles.vertical.row.svelte.d.ts +29 -29
- package/updates.d.ts +3 -3
- package/updates.js +0 -0
- package/utils.d.ts +26 -26
- package/utils.js +0 -0
- package/vertical.toolbar.svelte +2 -1
- package/vertical.toolbar.svelte.d.ts +25 -25
package/README.md
CHANGED
|
File without changes
|
package/components/Fab.svelte
CHANGED
|
@@ -1,4 +1,7 @@
|
|
|
1
1
|
<script>import { context_toolbar_operations, page_toolbar_operations, context_items_store } from "../stores.js";
|
|
2
|
+
import { show_floating_toolbar, show_menu, show_grid_menu } from "./menu.js";
|
|
3
|
+
import FaChevronUp from "svelte-icons/fa/FaChevronUp.svelte";
|
|
4
|
+
import FaChevronDown from "svelte-icons/fa/FaChevronDown.svelte";
|
|
2
5
|
let expanded = false;
|
|
3
6
|
$:
|
|
4
7
|
update($page_toolbar_operations, $context_toolbar_operations);
|
|
@@ -9,16 +12,32 @@ function update(...args) {
|
|
|
9
12
|
else
|
|
10
13
|
operations = $page_toolbar_operations;
|
|
11
14
|
}
|
|
12
|
-
function on_click(operation) {
|
|
13
|
-
expanded = false;
|
|
15
|
+
function on_click(e, operation) {
|
|
14
16
|
if (!operation)
|
|
15
17
|
return;
|
|
16
|
-
if (
|
|
18
|
+
if (operation.action) {
|
|
19
|
+
let focused_item = null;
|
|
20
|
+
if ($context_items_store.focused)
|
|
21
|
+
focused_item = $context_items_store[$context_items_store.focused];
|
|
22
|
+
operation.action(focused_item);
|
|
23
|
+
}
|
|
24
|
+
let owner = e.target;
|
|
25
|
+
while (owner && owner.tagName != "BUTTON")
|
|
26
|
+
owner = owner.parentElement;
|
|
27
|
+
if (!owner)
|
|
17
28
|
return;
|
|
18
|
-
let
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
29
|
+
let rect = owner.getBoundingClientRect();
|
|
30
|
+
const margin = 15;
|
|
31
|
+
rect.x -= margin;
|
|
32
|
+
rect.y -= margin;
|
|
33
|
+
rect.width += 2 * margin;
|
|
34
|
+
rect.height += 2 * margin;
|
|
35
|
+
if (operation.menu)
|
|
36
|
+
show_menu(rect, operation.menu);
|
|
37
|
+
else if (operation.toolbar)
|
|
38
|
+
show_floating_toolbar(rect, operation.toolbar);
|
|
39
|
+
else if (operation.grid)
|
|
40
|
+
show_grid_menu(rect, operation.grid);
|
|
22
41
|
}
|
|
23
42
|
function toggle_expand(e) {
|
|
24
43
|
expanded = !expanded;
|
|
@@ -26,57 +45,95 @@ function toggle_expand(e) {
|
|
|
26
45
|
</script>
|
|
27
46
|
|
|
28
47
|
{#if operations && operations.length > 0}
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
48
|
+
|
|
49
|
+
{@const main_operation = operations[0]}
|
|
50
|
+
<button class="text-white bg-blue-700 hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300
|
|
51
|
+
font-medium rounded-full text-sm text-center shadow-md
|
|
52
|
+
w-[55px] h-[55px]
|
|
53
|
+
fixed m-0 absolute bottom-[10px] right-[0px]
|
|
54
|
+
dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800
|
|
55
|
+
flex items-center justify-center
|
|
56
|
+
disable-dbl-tap-zoom"
|
|
57
|
+
on:click|stopPropagation={(e) => {on_click(e, main_operation)}} >
|
|
58
|
+
<div class="w-7 h-7"><svelte:component this={main_operation.icon}/></div>
|
|
59
|
+
</button>
|
|
60
|
+
|
|
61
|
+
{#if operations.length > 1}
|
|
62
|
+
{@const secondary_operation = operations[1]}
|
|
63
|
+
<button class=" bg-transparent
|
|
64
|
+
w-[55px] h-[55px]
|
|
65
|
+
fixed m-0 absolute bottom-[10px] right-[60px]
|
|
66
|
+
flex items-center justify-center
|
|
67
|
+
disable-dbl-tap-zoom"
|
|
68
|
+
on:click|stopPropagation={(e) => {on_click(e, secondary_operation)}} >
|
|
69
|
+
<div class=" w-10 h-10
|
|
70
|
+
text-white bg-zinc-500 hover:bg-zinc-500
|
|
71
|
+
dark:bg-zinc-500 dark:hover:bg-zinc-500
|
|
33
72
|
font-medium rounded-full text-sm text-center shadow-md
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
73
|
+
flex items-center justify-center">
|
|
74
|
+
<div class="w-5 h-5">
|
|
75
|
+
<svelte:component this={secondary_operation.icon}/>
|
|
76
|
+
</div>
|
|
77
|
+
</div>
|
|
78
|
+
</button>
|
|
79
|
+
|
|
80
|
+
{#if operations.length == 3}
|
|
81
|
+
<small>todo</small>
|
|
40
82
|
{:else}
|
|
41
|
-
<button class="
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
flex items-center justify-center
|
|
83
|
+
<button class=" bg-transparent
|
|
84
|
+
w-[55px] h-[55px]
|
|
85
|
+
fixed m-0 absolute bottom-[70px] right-[0px]
|
|
86
|
+
|
|
87
|
+
flex items-center justify-center
|
|
88
|
+
disable-dbl-tap-zoom"
|
|
46
89
|
on:click|stopPropagation={toggle_expand}>
|
|
90
|
+
<div class=" w-10 h-10
|
|
91
|
+
text-white bg-zinc-500 hover:bg-zinc-500
|
|
92
|
+
font-medium rounded-full text-sm text-center shadow-md
|
|
93
|
+
dark:bg-zinc-500 dark:hover:bg-zinc-500
|
|
94
|
+
flex items-center justify-center">
|
|
47
95
|
<div class="w-5 h-5">
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
width: 100%;
|
|
54
|
-
height: auto;
|
|
55
|
-
max-height: 100%;">
|
|
56
|
-
<path d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z" />
|
|
57
|
-
</svg>
|
|
96
|
+
{#if expanded}
|
|
97
|
+
<FaChevronDown/>
|
|
98
|
+
{:else}
|
|
99
|
+
<FaChevronUp/>
|
|
100
|
+
{/if}
|
|
58
101
|
</div>
|
|
102
|
+
</div>
|
|
59
103
|
</button>
|
|
60
104
|
{#if expanded}
|
|
61
|
-
|
|
62
|
-
|
|
105
|
+
{@const operations_to_expand = operations.slice(2)}
|
|
106
|
+
<ul class="list-none m-0 absolute bottom-[125px] right-0">
|
|
107
|
+
{#each operations_to_expand as operation}
|
|
63
108
|
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
|
64
|
-
<li class="flex flex-row px-
|
|
65
|
-
on:click|stopPropagation={(e) => {on_click(operation)}}>
|
|
109
|
+
<li class="flex flex-row px-0 py-0 justify-end group"
|
|
110
|
+
on:click|stopPropagation={(e) => {on_click(e, operation)}}>
|
|
66
111
|
<div>
|
|
67
|
-
<span class="block whitespace-nowrap text-sm mt-3 font-semibold text-white mr-3
|
|
112
|
+
<span class="block whitespace-nowrap text-sm mt-3 font-semibold text-white mr-3 select-none bg-slate-700 group-hover:bg-slate-800 px-1 shadow-lg rounded">{operation.caption}</span>
|
|
68
113
|
</div>
|
|
69
|
-
<button class="
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
114
|
+
<button class=" bg-transparent
|
|
115
|
+
mx-0 mb-4 w-[55px] h-[55px]
|
|
116
|
+
flex items-center justify-center
|
|
117
|
+
disable-dbl-tap-zoom">
|
|
118
|
+
<div class=" w-[55px] h-[55px]
|
|
119
|
+
text-white bg-zinc-500 group-hover:bg-zinc-500
|
|
120
|
+
dark:bg-zinc-500 dark:group-hover:bg-blue-700
|
|
121
|
+
font-medium rounded-full text-sm text-center shadow-md
|
|
122
|
+
flex items-center justify-center">
|
|
123
|
+
<div class="w-5 h-5"><svelte:component this={operation.icon}/></div>
|
|
124
|
+
</div>
|
|
75
125
|
</button>
|
|
76
126
|
</li>
|
|
77
127
|
{/each}
|
|
78
128
|
</ul>
|
|
79
129
|
{/if}
|
|
80
130
|
{/if}
|
|
131
|
+
{/if}
|
|
81
132
|
{/if}
|
|
82
133
|
|
|
134
|
+
<style>
|
|
135
|
+
|
|
136
|
+
.disable-dbl-tap-zoom {
|
|
137
|
+
touch-action: manipulation;
|
|
138
|
+
}
|
|
139
|
+
</style>
|
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
import { SvelteComponentTyped } from "svelte";
|
|
2
|
-
declare const __propDef: {
|
|
3
|
-
props: Record<string, never>;
|
|
4
|
-
events: {
|
|
5
|
-
[evt: string]: CustomEvent<any>;
|
|
6
|
-
};
|
|
7
|
-
slots: {};
|
|
8
|
-
};
|
|
9
|
-
export type FabProps = typeof __propDef.props;
|
|
10
|
-
export type FabEvents = typeof __propDef.events;
|
|
11
|
-
export type FabSlots = typeof __propDef.slots;
|
|
12
|
-
export default class Fab extends SvelteComponentTyped<FabProps, FabEvents, FabSlots> {
|
|
13
|
-
}
|
|
14
|
-
export {};
|
|
1
|
+
import { SvelteComponentTyped } from "svelte";
|
|
2
|
+
declare const __propDef: {
|
|
3
|
+
props: Record<string, never>;
|
|
4
|
+
events: {
|
|
5
|
+
[evt: string]: CustomEvent<any>;
|
|
6
|
+
};
|
|
7
|
+
slots: {};
|
|
8
|
+
};
|
|
9
|
+
export type FabProps = typeof __propDef.props;
|
|
10
|
+
export type FabEvents = typeof __propDef.events;
|
|
11
|
+
export type FabSlots = typeof __propDef.slots;
|
|
12
|
+
export default class Fab extends SvelteComponentTyped<FabProps, FabEvents, FabSlots> {
|
|
13
|
+
}
|
|
14
|
+
export {};
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
<script>import { context_toolbar_operations, page_toolbar_operations, context_items_store } from "../stores.js";
|
|
2
|
+
let expanded = false;
|
|
3
|
+
$:
|
|
4
|
+
update($page_toolbar_operations, $context_toolbar_operations);
|
|
5
|
+
let operations = [];
|
|
6
|
+
function update(...args) {
|
|
7
|
+
if ($context_toolbar_operations && $context_toolbar_operations.length > 0)
|
|
8
|
+
operations = $context_toolbar_operations;
|
|
9
|
+
else
|
|
10
|
+
operations = $page_toolbar_operations;
|
|
11
|
+
}
|
|
12
|
+
function on_click(operation) {
|
|
13
|
+
if (!operation)
|
|
14
|
+
return;
|
|
15
|
+
if (!operation.action)
|
|
16
|
+
return;
|
|
17
|
+
let focused_item = null;
|
|
18
|
+
if ($context_items_store.focused)
|
|
19
|
+
focused_item = $context_items_store[$context_items_store.focused];
|
|
20
|
+
operation.action(focused_item);
|
|
21
|
+
}
|
|
22
|
+
function toggle_expand(e) {
|
|
23
|
+
expanded = !expanded;
|
|
24
|
+
}
|
|
25
|
+
</script>
|
|
26
|
+
|
|
27
|
+
{#if operations && operations.length > 0}
|
|
28
|
+
{#if operations.length == 1}
|
|
29
|
+
{@const operation = operations[0]}
|
|
30
|
+
<button class="text-white bg-blue-700 hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300
|
|
31
|
+
font-medium rounded-full text-sm text-center shadow-md
|
|
32
|
+
mr-2 mb-2 w-10 h-10
|
|
33
|
+
dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800
|
|
34
|
+
flex items-center justify-center
|
|
35
|
+
disable-dbl-tap-zoom"
|
|
36
|
+
on:click|stopPropagation={(e) => {on_click(operation)}} >
|
|
37
|
+
<div class="w-5 h-5"><svelte:component this={operation.icon}/></div>
|
|
38
|
+
</button>
|
|
39
|
+
{:else}
|
|
40
|
+
<button class="text-white bg-blue-700 hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300
|
|
41
|
+
font-medium rounded-full text-sm text-center shadow-md
|
|
42
|
+
mr-2 mb-2 w-10 h-10
|
|
43
|
+
dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800
|
|
44
|
+
flex items-center justify-center
|
|
45
|
+
disable-dbl-tap-zoom"
|
|
46
|
+
on:click|stopPropagation={toggle_expand}>
|
|
47
|
+
<div class="w-5 h-5">
|
|
48
|
+
<svg xmlns="http://www.w3.org/2000/svg"
|
|
49
|
+
viewBox="0 0 192 512"
|
|
50
|
+
style=" stroke: currentColor;
|
|
51
|
+
fill: currentColor;
|
|
52
|
+
stroke-width: 0;
|
|
53
|
+
width: 100%;
|
|
54
|
+
height: auto;
|
|
55
|
+
max-height: 100%;">
|
|
56
|
+
<path d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z" />
|
|
57
|
+
</svg>
|
|
58
|
+
</div>
|
|
59
|
+
</button>
|
|
60
|
+
{#if expanded}
|
|
61
|
+
<ul class="list-none m-0 absolute bottom-[60px] right-0">
|
|
62
|
+
{#each operations as operation}
|
|
63
|
+
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
|
64
|
+
<li class="flex flex-row px-1 py-0 justify-end group"
|
|
65
|
+
on:click|stopPropagation={(e) => {on_click(operation)}}>
|
|
66
|
+
<div>
|
|
67
|
+
<span class="block whitespace-nowrap text-sm mt-3 font-semibold text-white mr-3 select-none bg-slate-700 group-hover:bg-slate-800 px-1 shadow-lg rounded">{operation.caption}</span>
|
|
68
|
+
</div>
|
|
69
|
+
<button class=" text-white bg-blue-700 group-hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300
|
|
70
|
+
font-medium rounded-full text-sm text-center shadow-md
|
|
71
|
+
mr-1 mb-2 w-10 h-10
|
|
72
|
+
dark:bg-blue-600 dark:group-hover:bg-blue-700 dark:focus:ring-blue-800
|
|
73
|
+
flex items-center justify-center
|
|
74
|
+
disable-dbl-tap-zoom">
|
|
75
|
+
<div class="w-5 h-5"><svelte:component this={operation.icon}/></div>
|
|
76
|
+
</button>
|
|
77
|
+
</li>
|
|
78
|
+
{/each}
|
|
79
|
+
</ul>
|
|
80
|
+
{/if}
|
|
81
|
+
{/if}
|
|
82
|
+
{/if}
|
|
83
|
+
|
|
84
|
+
<style>
|
|
85
|
+
|
|
86
|
+
.disable-dbl-tap-zoom {
|
|
87
|
+
touch-action: manipulation;
|
|
88
|
+
}
|
|
89
|
+
</style>
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { SvelteComponentTyped } from "svelte";
|
|
2
|
+
declare const __propDef: {
|
|
3
|
+
props: Record<string, never>;
|
|
4
|
+
events: {
|
|
5
|
+
[evt: string]: CustomEvent<any>;
|
|
6
|
+
};
|
|
7
|
+
slots: {};
|
|
8
|
+
};
|
|
9
|
+
export type Fab2Props = typeof __propDef.props;
|
|
10
|
+
export type Fab2Events = typeof __propDef.events;
|
|
11
|
+
export type Fab2Slots = typeof __propDef.slots;
|
|
12
|
+
export default class Fab2 extends SvelteComponentTyped<Fab2Props, Fab2Events, Fab2Slots> {
|
|
13
|
+
}
|
|
14
|
+
export {};
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
<script>import { tick, afterUpdate } from "svelte";
|
|
2
|
-
import { is_device_smaller_than } from "../utils";
|
|
3
2
|
let x;
|
|
4
3
|
let y;
|
|
5
4
|
let visible = false;
|
|
@@ -7,7 +6,6 @@ let toolbar;
|
|
|
7
6
|
let props = {};
|
|
8
7
|
let around_rect;
|
|
9
8
|
let root_element;
|
|
10
|
-
let invisible_button;
|
|
11
9
|
$:
|
|
12
10
|
display = visible ? "fixed" : "hidden";
|
|
13
11
|
export async function show(around, _toolbar, _props = {}) {
|
|
@@ -20,20 +18,39 @@ export async function show(around, _toolbar, _props = {}) {
|
|
|
20
18
|
y = around.y;
|
|
21
19
|
around_rect = new DOMRect(x, y, 0, 0);
|
|
22
20
|
}
|
|
21
|
+
const was_visible = visible;
|
|
23
22
|
visible = true;
|
|
24
23
|
toolbar = _toolbar;
|
|
25
24
|
props = _props;
|
|
26
25
|
props.onhide = () => {
|
|
27
26
|
hide();
|
|
28
27
|
};
|
|
28
|
+
hide_window_indicator = 0;
|
|
29
|
+
window.addEventListener("click", on_before_window_click, true);
|
|
29
30
|
await tick();
|
|
30
|
-
|
|
31
|
+
if (!was_visible)
|
|
32
|
+
root_element.addEventListener("click", on_before_container_click, true);
|
|
31
33
|
}
|
|
32
34
|
export function is_visible() {
|
|
33
35
|
return visible;
|
|
34
36
|
}
|
|
35
37
|
export function hide() {
|
|
36
38
|
visible = false;
|
|
39
|
+
window.removeEventListener("click", on_before_window_click, true);
|
|
40
|
+
root_element.removeEventListener("click", on_before_container_click, true);
|
|
41
|
+
}
|
|
42
|
+
let hide_window_indicator = 0;
|
|
43
|
+
function on_before_window_click() {
|
|
44
|
+
hide_window_indicator++;
|
|
45
|
+
setTimeout(() => {
|
|
46
|
+
if (hide_window_indicator != 0) {
|
|
47
|
+
hide_window_indicator = 0;
|
|
48
|
+
hide();
|
|
49
|
+
}
|
|
50
|
+
}, 0);
|
|
51
|
+
}
|
|
52
|
+
function on_before_container_click() {
|
|
53
|
+
hide_window_indicator--;
|
|
37
54
|
}
|
|
38
55
|
afterUpdate(() => {
|
|
39
56
|
if (!root_element)
|
|
@@ -51,28 +68,12 @@ afterUpdate(() => {
|
|
|
51
68
|
if (rect.top < container_rect.top)
|
|
52
69
|
y = container_rect.top;
|
|
53
70
|
});
|
|
54
|
-
function focus_first_element() {
|
|
55
|
-
invisible_button.focus();
|
|
56
|
-
return;
|
|
57
|
-
let focusable = root_element.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
|
|
58
|
-
focusable.focus();
|
|
59
|
-
}
|
|
60
|
-
function on_focus_out(e) {
|
|
61
|
-
if (!is_device_smaller_than("sm")) {
|
|
62
|
-
if (e.relatedTarget && root_element?.contains(e.relatedTarget)) {
|
|
63
|
-
} else
|
|
64
|
-
hide();
|
|
65
|
-
} else {
|
|
66
|
-
}
|
|
67
|
-
}
|
|
68
71
|
</script>
|
|
69
72
|
|
|
70
73
|
<div id="__hd_svelte_floating_container"
|
|
71
|
-
class="p-2 bg-slate-100 dark:bg-slate-800 rounded-lg shadow {display}"
|
|
74
|
+
class="p-2 bg-slate-100 dark:bg-slate-800 rounded-lg shadow {display} z-30"
|
|
72
75
|
style="left:{x}px; top:{y}px; width: max-content; height:max-content"
|
|
73
|
-
on:focusout={on_focus_out}
|
|
74
76
|
bind:this={root_element}>
|
|
75
|
-
<button class="w-0 h-0 fixed bg-transparent " bind:this={invisible_button}></button>
|
|
76
77
|
<svelte:component this={toolbar} {...props} />
|
|
77
78
|
</div>
|
|
78
79
|
|
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
import { SvelteComponentTyped } from "svelte";
|
|
2
|
-
declare const __propDef: {
|
|
3
|
-
props: {
|
|
4
|
-
show?: ((around: DOMRect | DOMPoint, _toolbar: any, _props?: {}) => Promise<void>) | undefined;
|
|
5
|
-
is_visible?: (() => boolean) | undefined;
|
|
6
|
-
hide?: (() => void) | undefined;
|
|
7
|
-
};
|
|
8
|
-
events: {
|
|
9
|
-
[evt: string]: CustomEvent<any>;
|
|
10
|
-
};
|
|
11
|
-
slots: {};
|
|
12
|
-
};
|
|
13
|
-
export type FloatingContainerProps = typeof __propDef.props;
|
|
14
|
-
export type FloatingContainerEvents = typeof __propDef.events;
|
|
15
|
-
export type FloatingContainerSlots = typeof __propDef.slots;
|
|
16
|
-
export default class FloatingContainer extends SvelteComponentTyped<FloatingContainerProps, FloatingContainerEvents, FloatingContainerSlots> {
|
|
17
|
-
get show(): (around: DOMRect | DOMPoint, _toolbar: any, _props?: {}) => Promise<void>;
|
|
18
|
-
get is_visible(): () => boolean;
|
|
19
|
-
get hide(): () => void;
|
|
20
|
-
}
|
|
21
|
-
export {};
|
|
1
|
+
import { SvelteComponentTyped } from "svelte";
|
|
2
|
+
declare const __propDef: {
|
|
3
|
+
props: {
|
|
4
|
+
show?: ((around: DOMRect | DOMPoint, _toolbar: any, _props?: {}) => Promise<void>) | undefined;
|
|
5
|
+
is_visible?: (() => boolean) | undefined;
|
|
6
|
+
hide?: (() => void) | undefined;
|
|
7
|
+
};
|
|
8
|
+
events: {
|
|
9
|
+
[evt: string]: CustomEvent<any>;
|
|
10
|
+
};
|
|
11
|
+
slots: {};
|
|
12
|
+
};
|
|
13
|
+
export type FloatingContainerProps = typeof __propDef.props;
|
|
14
|
+
export type FloatingContainerEvents = typeof __propDef.events;
|
|
15
|
+
export type FloatingContainerSlots = typeof __propDef.slots;
|
|
16
|
+
export default class FloatingContainer extends SvelteComponentTyped<FloatingContainerProps, FloatingContainerEvents, FloatingContainerSlots> {
|
|
17
|
+
get show(): (around: DOMRect | DOMPoint, _toolbar: any, _props?: {}) => Promise<void>;
|
|
18
|
+
get is_visible(): () => boolean;
|
|
19
|
+
get hide(): () => void;
|
|
20
|
+
}
|
|
21
|
+
export {};
|
|
@@ -1,25 +1,25 @@
|
|
|
1
|
-
/** @typedef {typeof __propDef.props} GridProps */
|
|
2
|
-
/** @typedef {typeof __propDef.events} GridEvents */
|
|
3
|
-
/** @typedef {typeof __propDef.slots} GridSlots */
|
|
4
|
-
export default class Grid extends SvelteComponentTyped<{
|
|
5
|
-
onhide?: any;
|
|
6
|
-
operations?: any[] | undefined;
|
|
7
|
-
}, {
|
|
8
|
-
[evt: string]: CustomEvent<any>;
|
|
9
|
-
}, {}> {
|
|
10
|
-
}
|
|
11
|
-
export type GridProps = typeof __propDef.props;
|
|
12
|
-
export type GridEvents = typeof __propDef.events;
|
|
13
|
-
export type GridSlots = typeof __propDef.slots;
|
|
14
|
-
import { SvelteComponentTyped } from "svelte";
|
|
15
|
-
declare const __propDef: {
|
|
16
|
-
props: {
|
|
17
|
-
onhide?: any;
|
|
18
|
-
operations?: any[] | undefined;
|
|
19
|
-
};
|
|
20
|
-
events: {
|
|
21
|
-
[evt: string]: CustomEvent<any>;
|
|
22
|
-
};
|
|
23
|
-
slots: {};
|
|
24
|
-
};
|
|
25
|
-
export {};
|
|
1
|
+
/** @typedef {typeof __propDef.props} GridProps */
|
|
2
|
+
/** @typedef {typeof __propDef.events} GridEvents */
|
|
3
|
+
/** @typedef {typeof __propDef.slots} GridSlots */
|
|
4
|
+
export default class Grid extends SvelteComponentTyped<{
|
|
5
|
+
onhide?: any;
|
|
6
|
+
operations?: any[] | undefined;
|
|
7
|
+
}, {
|
|
8
|
+
[evt: string]: CustomEvent<any>;
|
|
9
|
+
}, {}> {
|
|
10
|
+
}
|
|
11
|
+
export type GridProps = typeof __propDef.props;
|
|
12
|
+
export type GridEvents = typeof __propDef.events;
|
|
13
|
+
export type GridSlots = typeof __propDef.slots;
|
|
14
|
+
import { SvelteComponentTyped } from "svelte";
|
|
15
|
+
declare const __propDef: {
|
|
16
|
+
props: {
|
|
17
|
+
onhide?: any;
|
|
18
|
+
operations?: any[] | undefined;
|
|
19
|
+
};
|
|
20
|
+
events: {
|
|
21
|
+
[evt: string]: CustomEvent<any>;
|
|
22
|
+
};
|
|
23
|
+
slots: {};
|
|
24
|
+
};
|
|
25
|
+
export {};
|
|
@@ -1,24 +1,24 @@
|
|
|
1
|
-
import { SvelteComponentTyped } from "svelte";
|
|
2
|
-
declare const __propDef: {
|
|
3
|
-
props: {
|
|
4
|
-
[x: string]: any;
|
|
5
|
-
self?: null | undefined;
|
|
6
|
-
operation?: string | undefined;
|
|
7
|
-
params?: null | undefined;
|
|
8
|
-
context?: string | undefined;
|
|
9
|
-
typename?: string | undefined;
|
|
10
|
-
action?: null | undefined;
|
|
11
|
-
};
|
|
12
|
-
events: {
|
|
13
|
-
[evt: string]: CustomEvent<any>;
|
|
14
|
-
};
|
|
15
|
-
slots: {
|
|
16
|
-
default: {};
|
|
17
|
-
};
|
|
18
|
-
};
|
|
19
|
-
export type ButtonProps = typeof __propDef.props;
|
|
20
|
-
export type ButtonEvents = typeof __propDef.events;
|
|
21
|
-
export type ButtonSlots = typeof __propDef.slots;
|
|
22
|
-
export default class Button extends SvelteComponentTyped<ButtonProps, ButtonEvents, ButtonSlots> {
|
|
23
|
-
}
|
|
24
|
-
export {};
|
|
1
|
+
import { SvelteComponentTyped } from "svelte";
|
|
2
|
+
declare const __propDef: {
|
|
3
|
+
props: {
|
|
4
|
+
[x: string]: any;
|
|
5
|
+
self?: null | undefined;
|
|
6
|
+
operation?: string | undefined;
|
|
7
|
+
params?: null | undefined;
|
|
8
|
+
context?: string | undefined;
|
|
9
|
+
typename?: string | undefined;
|
|
10
|
+
action?: null | undefined;
|
|
11
|
+
};
|
|
12
|
+
events: {
|
|
13
|
+
[evt: string]: CustomEvent<any>;
|
|
14
|
+
};
|
|
15
|
+
slots: {
|
|
16
|
+
default: {};
|
|
17
|
+
};
|
|
18
|
+
};
|
|
19
|
+
export type ButtonProps = typeof __propDef.props;
|
|
20
|
+
export type ButtonEvents = typeof __propDef.events;
|
|
21
|
+
export type ButtonSlots = typeof __propDef.slots;
|
|
22
|
+
export default class Button extends SvelteComponentTyped<ButtonProps, ButtonEvents, ButtonSlots> {
|
|
23
|
+
}
|
|
24
|
+
export {};
|
|
@@ -1,25 +1,25 @@
|
|
|
1
|
-
import { SvelteComponentTyped } from "svelte";
|
|
2
|
-
declare const __propDef: {
|
|
3
|
-
props: {
|
|
4
|
-
[x: string]: any;
|
|
5
|
-
checked?: boolean | undefined;
|
|
6
|
-
disabled?: boolean | undefined;
|
|
7
|
-
self?: null | undefined;
|
|
8
|
-
a?: string | undefined;
|
|
9
|
-
context?: string | undefined;
|
|
10
|
-
typename?: string | undefined;
|
|
11
|
-
c?: string | undefined;
|
|
12
|
-
};
|
|
13
|
-
events: {
|
|
14
|
-
[evt: string]: CustomEvent<any>;
|
|
15
|
-
};
|
|
16
|
-
slots: {
|
|
17
|
-
default: {};
|
|
18
|
-
};
|
|
19
|
-
};
|
|
20
|
-
export type CheckboxProps = typeof __propDef.props;
|
|
21
|
-
export type CheckboxEvents = typeof __propDef.events;
|
|
22
|
-
export type CheckboxSlots = typeof __propDef.slots;
|
|
23
|
-
export default class Checkbox extends SvelteComponentTyped<CheckboxProps, CheckboxEvents, CheckboxSlots> {
|
|
24
|
-
}
|
|
25
|
-
export {};
|
|
1
|
+
import { SvelteComponentTyped } from "svelte";
|
|
2
|
+
declare const __propDef: {
|
|
3
|
+
props: {
|
|
4
|
+
[x: string]: any;
|
|
5
|
+
checked?: boolean | undefined;
|
|
6
|
+
disabled?: boolean | undefined;
|
|
7
|
+
self?: null | undefined;
|
|
8
|
+
a?: string | undefined;
|
|
9
|
+
context?: string | undefined;
|
|
10
|
+
typename?: string | undefined;
|
|
11
|
+
c?: string | undefined;
|
|
12
|
+
};
|
|
13
|
+
events: {
|
|
14
|
+
[evt: string]: CustomEvent<any>;
|
|
15
|
+
};
|
|
16
|
+
slots: {
|
|
17
|
+
default: {};
|
|
18
|
+
};
|
|
19
|
+
};
|
|
20
|
+
export type CheckboxProps = typeof __propDef.props;
|
|
21
|
+
export type CheckboxEvents = typeof __propDef.events;
|
|
22
|
+
export type CheckboxSlots = typeof __propDef.slots;
|
|
23
|
+
export default class Checkbox extends SvelteComponentTyped<CheckboxProps, CheckboxEvents, CheckboxSlots> {
|
|
24
|
+
}
|
|
25
|
+
export {};
|
|
@@ -1,17 +1,17 @@
|
|
|
1
|
-
export declare class rCombo_item {
|
|
2
|
-
Key: any | undefined;
|
|
3
|
-
Name: string | undefined;
|
|
4
|
-
Avatar: string | undefined;
|
|
5
|
-
Color: string | undefined;
|
|
6
|
-
}
|
|
7
|
-
export declare class rCombo_definition {
|
|
8
|
-
source: rCombo_item[];
|
|
9
|
-
collection_expr: string | undefined;
|
|
10
|
-
collection_path: string | undefined;
|
|
11
|
-
collection: object[] | undefined;
|
|
12
|
-
on_collect: undefined;
|
|
13
|
-
element_key: string | undefined;
|
|
14
|
-
element_name: string | undefined;
|
|
15
|
-
element_avatar: string | undefined;
|
|
16
|
-
}
|
|
17
|
-
export declare const cached_sources: Map<string, Promise<object>>;
|
|
1
|
+
export declare class rCombo_item {
|
|
2
|
+
Key: any | undefined;
|
|
3
|
+
Name: string | undefined;
|
|
4
|
+
Avatar: string | undefined;
|
|
5
|
+
Color: string | undefined;
|
|
6
|
+
}
|
|
7
|
+
export declare class rCombo_definition {
|
|
8
|
+
source: rCombo_item[];
|
|
9
|
+
collection_expr: string | undefined;
|
|
10
|
+
collection_path: string | undefined;
|
|
11
|
+
collection: object[] | undefined;
|
|
12
|
+
on_collect: undefined;
|
|
13
|
+
element_key: string | undefined;
|
|
14
|
+
element_name: string | undefined;
|
|
15
|
+
element_avatar: string | undefined;
|
|
16
|
+
}
|
|
17
|
+
export declare const cached_sources: Map<string, Promise<object>>;
|