@humandialog/forms.svelte 0.4.6 → 0.4.8
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/components/Floating_container.svelte +43 -0
- package/components/Floating_container.svelte.d.ts +19 -0
- package/components/Grid.menu.svelte +131 -0
- package/components/Grid.menu.svelte.d.ts +23 -0
- package/components/inputbox.ltop.svelte.d.ts +2 -2
- package/components/menu.d.ts +2 -0
- package/components/menu.js +21 -0
- package/form.box.svelte.d.ts +2 -2
- package/horizontal.toolbar.svelte +4 -8
- package/index.d.ts +1 -1
- package/index.js +1 -1
- package/operations.svelte +22 -8
- package/package.json +3 -1
- package/page.row.svelte.d.ts +2 -2
- package/page.svelte +9 -3
- package/page.svelte.d.ts +6 -6
- package/tile.svelte.d.ts +2 -2
- package/tiles.row.svelte.d.ts +2 -2
- package/tiles.vertical.row.svelte.d.ts +2 -2
- package/vertical.toolbar.svelte +4 -8
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
<script>import { tick } from "svelte";
|
|
2
|
+
let x;
|
|
3
|
+
let y;
|
|
4
|
+
let visible = false;
|
|
5
|
+
let toolbar;
|
|
6
|
+
let props = {};
|
|
7
|
+
let root_element;
|
|
8
|
+
let invisible_button;
|
|
9
|
+
$:
|
|
10
|
+
display = visible ? "fixed" : "hidden";
|
|
11
|
+
export async function show(_x, _y, _toolbar, _props = {}) {
|
|
12
|
+
x = _x;
|
|
13
|
+
y = _y;
|
|
14
|
+
visible = true;
|
|
15
|
+
toolbar = _toolbar;
|
|
16
|
+
props = _props;
|
|
17
|
+
await tick();
|
|
18
|
+
focus_first_element();
|
|
19
|
+
}
|
|
20
|
+
export function hide() {
|
|
21
|
+
visible = false;
|
|
22
|
+
}
|
|
23
|
+
function focus_first_element() {
|
|
24
|
+
invisible_button.focus();
|
|
25
|
+
return;
|
|
26
|
+
let focusable = root_element.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
|
|
27
|
+
console.log(focusable);
|
|
28
|
+
focusable.focus();
|
|
29
|
+
}
|
|
30
|
+
function on_focus_out() {
|
|
31
|
+
hide();
|
|
32
|
+
}
|
|
33
|
+
</script>
|
|
34
|
+
|
|
35
|
+
<div id="__hd_svelte_floating_container"
|
|
36
|
+
class="p-2 bg-slate-100 dark:bg-slate-800 rounded-lg shadow {display}"
|
|
37
|
+
style="left:{x}px; top:{y}px"
|
|
38
|
+
on:focusout={on_focus_out}
|
|
39
|
+
bind:this={root_element}>
|
|
40
|
+
<button class="w-0 h-0 fixed bg-transparent " bind:this={invisible_button}></button>
|
|
41
|
+
<svelte:component this={toolbar} {...props}/>
|
|
42
|
+
</div>
|
|
43
|
+
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { SvelteComponentTyped } from "svelte";
|
|
2
|
+
declare const __propDef: {
|
|
3
|
+
props: {
|
|
4
|
+
show?: ((_x: number, _y: number, _toolbar: any, _props?: {}) => Promise<void>) | undefined;
|
|
5
|
+
hide?: (() => void) | undefined;
|
|
6
|
+
};
|
|
7
|
+
events: {
|
|
8
|
+
[evt: string]: CustomEvent<any>;
|
|
9
|
+
};
|
|
10
|
+
slots: {};
|
|
11
|
+
};
|
|
12
|
+
export type FloatingContainerProps = typeof __propDef.props;
|
|
13
|
+
export type FloatingContainerEvents = typeof __propDef.events;
|
|
14
|
+
export type FloatingContainerSlots = typeof __propDef.slots;
|
|
15
|
+
export default class FloatingContainer extends SvelteComponentTyped<FloatingContainerProps, FloatingContainerEvents, FloatingContainerSlots> {
|
|
16
|
+
get show(): (_x: number, _y: number, _toolbar: any, _props?: {}) => Promise<void>;
|
|
17
|
+
get hide(): () => void;
|
|
18
|
+
}
|
|
19
|
+
export {};
|
|
@@ -0,0 +1,131 @@
|
|
|
1
|
+
<script>
|
|
2
|
+
import {context_items_store} from '..'
|
|
3
|
+
|
|
4
|
+
export let operations = []
|
|
5
|
+
|
|
6
|
+
$: grid_cols = init(operations);
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
function init(operations)
|
|
10
|
+
{
|
|
11
|
+
let cols_no = 0;
|
|
12
|
+
let current_row_cols_no = 0;
|
|
13
|
+
|
|
14
|
+
for(let i=0; i<operations.length; i++)
|
|
15
|
+
{
|
|
16
|
+
let operation = operations[i];
|
|
17
|
+
if(operation.separator)
|
|
18
|
+
{
|
|
19
|
+
if(current_row_cols_no > cols_no)
|
|
20
|
+
cols_no = current_row_cols_no;
|
|
21
|
+
|
|
22
|
+
current_row_cols_no = 0;
|
|
23
|
+
}
|
|
24
|
+
else
|
|
25
|
+
{
|
|
26
|
+
let cols = operation.columns ?? 1;
|
|
27
|
+
current_row_cols_no += cols;
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
if(current_row_cols_no > cols_no)
|
|
32
|
+
cols_no = current_row_cols_no;
|
|
33
|
+
|
|
34
|
+
switch(cols_no)
|
|
35
|
+
{
|
|
36
|
+
case 1:
|
|
37
|
+
return "grid-cols-1";
|
|
38
|
+
|
|
39
|
+
case 2:
|
|
40
|
+
return "grid-cols-2";
|
|
41
|
+
|
|
42
|
+
case 3:
|
|
43
|
+
return "grid-cols-3";
|
|
44
|
+
|
|
45
|
+
case 4:
|
|
46
|
+
return "grid-cols-4";
|
|
47
|
+
|
|
48
|
+
case 5:
|
|
49
|
+
return "grid-cols-5";
|
|
50
|
+
|
|
51
|
+
case 6:
|
|
52
|
+
return "grid-cols-6";
|
|
53
|
+
|
|
54
|
+
case 7:
|
|
55
|
+
return "grid-cols-7";
|
|
56
|
+
|
|
57
|
+
case 8:
|
|
58
|
+
return "grid-cols-8";
|
|
59
|
+
|
|
60
|
+
case 9:
|
|
61
|
+
return "grid-cols-9";
|
|
62
|
+
|
|
63
|
+
case 10:
|
|
64
|
+
return "grid-cols-10";
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
function col_span(n)
|
|
69
|
+
{
|
|
70
|
+
switch(n)
|
|
71
|
+
{
|
|
72
|
+
case 1:
|
|
73
|
+
return "col-span-1";
|
|
74
|
+
case 2:
|
|
75
|
+
return "col-span-2";
|
|
76
|
+
case 3:
|
|
77
|
+
return "col-span-3";
|
|
78
|
+
case 4:
|
|
79
|
+
return "col-span-4";
|
|
80
|
+
case 5:
|
|
81
|
+
return "col-span-5";
|
|
82
|
+
case 6:
|
|
83
|
+
return "col-span-6";
|
|
84
|
+
case 7:
|
|
85
|
+
return "col-span-7";
|
|
86
|
+
case 8:
|
|
87
|
+
return "col-span-8";
|
|
88
|
+
case 9:
|
|
89
|
+
return "col-span-9";
|
|
90
|
+
case 10:
|
|
91
|
+
return "col-span-10";
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
function execute_action(e, operation)
|
|
96
|
+
{
|
|
97
|
+
|
|
98
|
+
if(!operation)
|
|
99
|
+
return;
|
|
100
|
+
|
|
101
|
+
if(!operation.action)
|
|
102
|
+
return;
|
|
103
|
+
|
|
104
|
+
let context_item = null
|
|
105
|
+
if($context_items_store.focused)
|
|
106
|
+
context_item = $context_items_store[$context_items_store.focused]
|
|
107
|
+
|
|
108
|
+
|
|
109
|
+
operation.action(context_item);
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
</script>
|
|
113
|
+
|
|
114
|
+
|
|
115
|
+
<div class="grid gap-2 {grid_cols}">
|
|
116
|
+
{#each operations as operation}
|
|
117
|
+
{#if !operation.separator}
|
|
118
|
+
{@const col=col_span(operation.columns ?? 1)}
|
|
119
|
+
|
|
120
|
+
<button class=" py-2.5 px-5 {col}
|
|
121
|
+
text-xs font-medium text-gray-900 dark:text-gray-400 dark:hover:text-white
|
|
122
|
+
bg-slate-100 hover:bg-slate-200 dark:bg-gray-800 dark:hover:bg-gray-700
|
|
123
|
+
border rounded border-gray-200 dark:border-gray-600 focus:outline-none
|
|
124
|
+
inline-flex items-center justify-center"
|
|
125
|
+
on:click={(e) => {execute_action(e, operation)}}>
|
|
126
|
+
<div>{operation.caption}</div>
|
|
127
|
+
</button>
|
|
128
|
+
{/if}
|
|
129
|
+
{/each}
|
|
130
|
+
</div>
|
|
131
|
+
|
|
@@ -0,0 +1,23 @@
|
|
|
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
|
+
operations?: any[] | undefined;
|
|
6
|
+
}, {
|
|
7
|
+
[evt: string]: CustomEvent<any>;
|
|
8
|
+
}, {}> {
|
|
9
|
+
}
|
|
10
|
+
export type GridProps = typeof __propDef.props;
|
|
11
|
+
export type GridEvents = typeof __propDef.events;
|
|
12
|
+
export type GridSlots = typeof __propDef.slots;
|
|
13
|
+
import { SvelteComponentTyped } from "svelte";
|
|
14
|
+
declare const __propDef: {
|
|
15
|
+
props: {
|
|
16
|
+
operations?: any[] | undefined;
|
|
17
|
+
};
|
|
18
|
+
events: {
|
|
19
|
+
[evt: string]: CustomEvent<any>;
|
|
20
|
+
};
|
|
21
|
+
slots: {};
|
|
22
|
+
};
|
|
23
|
+
export {};
|
|
@@ -6,8 +6,8 @@ export default class Inputbox extends SvelteComponentTyped<{
|
|
|
6
6
|
label?: string | undefined;
|
|
7
7
|
context?: string | undefined;
|
|
8
8
|
self?: null | undefined;
|
|
9
|
-
c?: string | undefined;
|
|
10
9
|
typename?: string | undefined;
|
|
10
|
+
c?: string | undefined;
|
|
11
11
|
a?: string | undefined;
|
|
12
12
|
s?: string | undefined;
|
|
13
13
|
placeholder?: string | undefined;
|
|
@@ -28,8 +28,8 @@ declare const __propDef: {
|
|
|
28
28
|
label?: string | undefined;
|
|
29
29
|
context?: string | undefined;
|
|
30
30
|
self?: null | undefined;
|
|
31
|
-
c?: string | undefined;
|
|
32
31
|
typename?: string | undefined;
|
|
32
|
+
c?: string | undefined;
|
|
33
33
|
a?: string | undefined;
|
|
34
34
|
s?: string | undefined;
|
|
35
35
|
placeholder?: string | undefined;
|
package/components/menu.d.ts
CHANGED
package/components/menu.js
CHANGED
|
@@ -1,5 +1,8 @@
|
|
|
1
1
|
import Menu from './contextmenu.svelte';
|
|
2
|
+
import Floating_container from './Floating_container.svelte';
|
|
3
|
+
import Grid from './Grid.menu.svelte';
|
|
2
4
|
let menu_comopnent = null;
|
|
5
|
+
let toolbar_component = null;
|
|
3
6
|
export function show_menu(x, y, operations) {
|
|
4
7
|
let menu_element = document.getElementById("__hd_svelte_contextmenu");
|
|
5
8
|
if (!!!menu_element) {
|
|
@@ -14,3 +17,21 @@ export function show_menu(x, y, operations) {
|
|
|
14
17
|
else
|
|
15
18
|
console.error('what now?');
|
|
16
19
|
}
|
|
20
|
+
export function show_floating_toolbar(x, y, toolbar, props = {}) {
|
|
21
|
+
let floating_container = document.getElementById("__hd_svelte_floating_container");
|
|
22
|
+
if (!!!floating_container) {
|
|
23
|
+
toolbar_component = new Floating_container({
|
|
24
|
+
target: document.body,
|
|
25
|
+
props: {}
|
|
26
|
+
});
|
|
27
|
+
toolbar_component.show(x, y, toolbar, props);
|
|
28
|
+
}
|
|
29
|
+
else if (toolbar_component)
|
|
30
|
+
toolbar_component.show(x, y, toolbar, props);
|
|
31
|
+
else
|
|
32
|
+
console.error('what now?');
|
|
33
|
+
}
|
|
34
|
+
export function show_grid_menu(x, y, operations) {
|
|
35
|
+
console.log('show_grid_menu', operations);
|
|
36
|
+
show_floating_toolbar(x, y, Grid, { operations: operations });
|
|
37
|
+
}
|
package/form.box.svelte.d.ts
CHANGED
|
@@ -4,8 +4,8 @@
|
|
|
4
4
|
export default class Form extends SvelteComponentTyped<{
|
|
5
5
|
context?: string | undefined;
|
|
6
6
|
self?: null | undefined;
|
|
7
|
-
c?: string | undefined;
|
|
8
7
|
cl?: string | undefined;
|
|
8
|
+
c?: string | undefined;
|
|
9
9
|
fit?: boolean | undefined;
|
|
10
10
|
}, {
|
|
11
11
|
[evt: string]: CustomEvent<any>;
|
|
@@ -21,8 +21,8 @@ declare const __propDef: {
|
|
|
21
21
|
props: {
|
|
22
22
|
context?: string | undefined;
|
|
23
23
|
self?: null | undefined;
|
|
24
|
-
c?: string | undefined;
|
|
25
24
|
cl?: string | undefined;
|
|
25
|
+
c?: string | undefined;
|
|
26
26
|
fit?: boolean | undefined;
|
|
27
27
|
};
|
|
28
28
|
events: {
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
import FaBars from 'svelte-icons/fa/FaBars.svelte'
|
|
10
10
|
import FaToggleOn from 'svelte-icons/fa/FaToggleOn.svelte'
|
|
11
11
|
import FaToggleOff from 'svelte-icons/fa/FaToggleOff.svelte'
|
|
12
|
-
import {show_menu} from './components/menu
|
|
12
|
+
import {show_menu} from './components/menu'
|
|
13
13
|
//import Menu from './components/contextmenu.svelte'
|
|
14
14
|
|
|
15
15
|
import {
|
|
@@ -81,12 +81,9 @@
|
|
|
81
81
|
}
|
|
82
82
|
}
|
|
83
83
|
|
|
84
|
-
|
|
85
|
-
let options_owner;
|
|
86
|
-
|
|
87
|
-
function show_options()
|
|
84
|
+
function show_options(e)
|
|
88
85
|
{
|
|
89
|
-
let rect =
|
|
86
|
+
let rect = e.target.getBoundingClientRect();
|
|
90
87
|
let x = rect.left;
|
|
91
88
|
let y = rect.bottom;
|
|
92
89
|
let options = [];
|
|
@@ -167,8 +164,7 @@
|
|
|
167
164
|
|
|
168
165
|
<button
|
|
169
166
|
class="h-full w-16 px-0 flex justify-center items-center text-slate-300 hover:text-slate-100"
|
|
170
|
-
on:click={
|
|
171
|
-
bind:this={options_owner}>
|
|
167
|
+
on:click={show_options}>
|
|
172
168
|
|
|
173
169
|
<Icon size={6} component={FaEllipsisH} />
|
|
174
170
|
</button>
|
package/index.d.ts
CHANGED
|
@@ -22,7 +22,7 @@ export { default as ComboSource } from './components/combo/combo.source.svelte';
|
|
|
22
22
|
export { default as ComboItem } from './components/combo/combo.item.svelte';
|
|
23
23
|
export { default as RichEdit } from './components/document/rich.edit.svelte';
|
|
24
24
|
export { default as Spinner } from './components/delayed.spinner.svelte';
|
|
25
|
-
export { show_menu } from './components/menu';
|
|
25
|
+
export { show_menu, show_grid_menu, show_floating_toolbar } from './components/menu';
|
|
26
26
|
export { default as Fab } from './components/Fab.svelte';
|
|
27
27
|
export { data_tick_store, has_selected_item, has_data_item } from "./stores";
|
|
28
28
|
export { context_toolbar_operations, page_toolbar_operations, context_items_store } from './stores';
|
package/index.js
CHANGED
|
@@ -27,7 +27,7 @@ export { default as ComboItem } from './components/combo/combo.item.svelte';
|
|
|
27
27
|
export { default as RichEdit } from './components/document/rich.edit.svelte';
|
|
28
28
|
export { default as Spinner } from './components/delayed.spinner.svelte';
|
|
29
29
|
//export { default as Menu } from './components/contextmenu.svelte'
|
|
30
|
-
export { show_menu } from './components/menu';
|
|
30
|
+
export { show_menu, show_grid_menu, show_floating_toolbar } from './components/menu';
|
|
31
31
|
export { default as Fab } from './components/Fab.svelte';
|
|
32
32
|
export { data_tick_store, has_selected_item, has_data_item } from "./stores";
|
|
33
33
|
export { context_toolbar_operations, page_toolbar_operations, context_items_store } from './stores'; // tmp
|
package/operations.svelte
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
<script>import {
|
|
1
|
+
<script>import { show_floating_toolbar, show_menu, show_grid_menu } from "./components/menu.js";
|
|
2
|
+
import { context_toolbar_operations, page_toolbar_operations, context_items_store } from "./stores.js";
|
|
2
3
|
$:
|
|
3
4
|
update($page_toolbar_operations, $context_toolbar_operations);
|
|
4
5
|
let operations = [];
|
|
@@ -8,15 +9,28 @@ function update(...args) {
|
|
|
8
9
|
else
|
|
9
10
|
operations = $page_toolbar_operations;
|
|
10
11
|
}
|
|
11
|
-
function on_click(operation) {
|
|
12
|
+
function on_click(e, operation) {
|
|
12
13
|
if (!operation)
|
|
13
14
|
return;
|
|
14
|
-
if (
|
|
15
|
+
if (operation.action) {
|
|
16
|
+
let focused_item = null;
|
|
17
|
+
if ($context_items_store.focused)
|
|
18
|
+
focused_item = $context_items_store[$context_items_store.focused];
|
|
19
|
+
operation.action(focused_item);
|
|
15
20
|
return;
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
21
|
+
}
|
|
22
|
+
let owner = e.target;
|
|
23
|
+
while (owner && owner.tagName != "BUTTON")
|
|
24
|
+
owner = owner.parentElement;
|
|
25
|
+
if (!owner)
|
|
26
|
+
return;
|
|
27
|
+
let rect = owner.getBoundingClientRect();
|
|
28
|
+
if (operation.menu)
|
|
29
|
+
show_menu(rect.left, rect.bottom, operation.menu);
|
|
30
|
+
else if (operation.toolbar)
|
|
31
|
+
show_floating_toolbar(rect.left, rect.bottom, operation.toolbar);
|
|
32
|
+
else if (operation.grid)
|
|
33
|
+
show_grid_menu(rect.left, rect.bottom, operation.grid);
|
|
20
34
|
}
|
|
21
35
|
</script>
|
|
22
36
|
|
|
@@ -24,7 +38,7 @@ function on_click(operation) {
|
|
|
24
38
|
|
|
25
39
|
{#each operations as operation}
|
|
26
40
|
<button type="button" class="py-2.5 px-5 text-xs font-medium text-gray-900 bg-slate-100 hover:bg-slate-200 border-r border-gray-200 focus:outline-none dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 inline-flex items-center"
|
|
27
|
-
on:click={(e) => {on_click(operation)}}>
|
|
41
|
+
on:click={(e) => {on_click(e, operation)}}>
|
|
28
42
|
<div class="w-3 h-3"><svelte:component this={operation.icon}/></div>
|
|
29
43
|
<span class="ml-1">{operation.caption}</span>
|
|
30
44
|
</button>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@humandialog/forms.svelte",
|
|
3
|
-
"version": "0.4.
|
|
3
|
+
"version": "0.4.8",
|
|
4
4
|
"description": "Basic Svelte UI components for Object Reef applications",
|
|
5
5
|
"devDependencies": {
|
|
6
6
|
"@playwright/test": "^1.28.1",
|
|
@@ -69,6 +69,8 @@
|
|
|
69
69
|
"./components/edit.field.svelte": "./components/edit.field.svelte",
|
|
70
70
|
"./components/Fab.svelte": "./components/Fab.svelte",
|
|
71
71
|
"./components/file.loader.svelte": "./components/file.loader.svelte",
|
|
72
|
+
"./components/Floating_container.svelte": "./components/Floating_container.svelte",
|
|
73
|
+
"./components/Grid.menu.svelte": "./components/Grid.menu.svelte",
|
|
72
74
|
"./components/icon.svelte": "./components/icon.svelte",
|
|
73
75
|
"./components/input.text.svelte": "./components/input.text.svelte",
|
|
74
76
|
"./components/inputbox.ltop.svelte": "./components/inputbox.ltop.svelte",
|
package/page.row.svelte.d.ts
CHANGED
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
/** @typedef {typeof __propDef.events} PageEvents */
|
|
3
3
|
/** @typedef {typeof __propDef.slots} PageSlots */
|
|
4
4
|
export default class Page extends SvelteComponentTyped<{
|
|
5
|
-
c?: string | undefined;
|
|
6
5
|
cl?: string | undefined;
|
|
6
|
+
c?: string | undefined;
|
|
7
7
|
w?: string | undefined;
|
|
8
8
|
}, {
|
|
9
9
|
[evt: string]: CustomEvent<any>;
|
|
@@ -17,8 +17,8 @@ export type PageSlots = typeof __propDef.slots;
|
|
|
17
17
|
import { SvelteComponentTyped } from "svelte";
|
|
18
18
|
declare const __propDef: {
|
|
19
19
|
props: {
|
|
20
|
-
c?: string | undefined;
|
|
21
20
|
cl?: string | undefined;
|
|
21
|
+
c?: string | undefined;
|
|
22
22
|
w?: string | undefined;
|
|
23
23
|
};
|
|
24
24
|
events: {
|
package/page.svelte
CHANGED
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
"w-full h-full flex flex-col dark:bg-slate-800 overflow-y-hidden overflow-x-hidden py-1 px-1 border-0" // border-green-500
|
|
19
19
|
export let c = ''
|
|
20
20
|
|
|
21
|
-
export let toolbar_operations =
|
|
21
|
+
export let toolbar_operations = undefined;
|
|
22
22
|
export let clears_context = '';
|
|
23
23
|
|
|
24
24
|
|
|
@@ -34,8 +34,13 @@
|
|
|
34
34
|
}
|
|
35
35
|
|
|
36
36
|
onMount(() => {
|
|
37
|
-
|
|
38
|
-
|
|
37
|
+
if(toolbar_operations != undefined && Array.isArray(toolbar_operations))
|
|
38
|
+
{
|
|
39
|
+
$page_toolbar_operations = [...toolbar_operations]
|
|
40
|
+
return () => { $page_toolbar_operations = [] }
|
|
41
|
+
}
|
|
42
|
+
else
|
|
43
|
+
return () => {}
|
|
39
44
|
})
|
|
40
45
|
|
|
41
46
|
setContext('ctx', context)
|
|
@@ -87,6 +92,7 @@
|
|
|
87
92
|
|
|
88
93
|
function clear_selection(e)
|
|
89
94
|
{
|
|
95
|
+
console.log(e, clears_context)
|
|
90
96
|
if(!clears_context)
|
|
91
97
|
return;
|
|
92
98
|
|
package/page.svelte.d.ts
CHANGED
|
@@ -4,12 +4,12 @@
|
|
|
4
4
|
export default class Page extends SvelteComponentTyped<{
|
|
5
5
|
context?: string | undefined;
|
|
6
6
|
self?: null | undefined;
|
|
7
|
-
c?: string | undefined;
|
|
8
|
-
cl?: string | undefined;
|
|
9
7
|
typename?: string | undefined;
|
|
10
8
|
focused_only?: boolean | undefined;
|
|
11
9
|
in_context?: string | undefined;
|
|
12
|
-
|
|
10
|
+
cl?: string | undefined;
|
|
11
|
+
c?: string | undefined;
|
|
12
|
+
toolbar_operations?: any;
|
|
13
13
|
clears_context?: string | undefined;
|
|
14
14
|
}, {
|
|
15
15
|
[evt: string]: CustomEvent<any>;
|
|
@@ -25,12 +25,12 @@ declare const __propDef: {
|
|
|
25
25
|
props: {
|
|
26
26
|
context?: string | undefined;
|
|
27
27
|
self?: null | undefined;
|
|
28
|
-
c?: string | undefined;
|
|
29
|
-
cl?: string | undefined;
|
|
30
28
|
typename?: string | undefined;
|
|
31
29
|
focused_only?: boolean | undefined;
|
|
32
30
|
in_context?: string | undefined;
|
|
33
|
-
|
|
31
|
+
cl?: string | undefined;
|
|
32
|
+
c?: string | undefined;
|
|
33
|
+
toolbar_operations?: any;
|
|
34
34
|
clears_context?: string | undefined;
|
|
35
35
|
};
|
|
36
36
|
events: {
|
package/tile.svelte.d.ts
CHANGED
|
@@ -4,8 +4,8 @@
|
|
|
4
4
|
export default class Tile extends SvelteComponentTyped<{
|
|
5
5
|
context?: string | undefined;
|
|
6
6
|
self?: null | undefined;
|
|
7
|
-
c?: string | undefined;
|
|
8
7
|
cl?: string | undefined;
|
|
8
|
+
c?: string | undefined;
|
|
9
9
|
}, {
|
|
10
10
|
[evt: string]: CustomEvent<any>;
|
|
11
11
|
}, {
|
|
@@ -20,8 +20,8 @@ declare const __propDef: {
|
|
|
20
20
|
props: {
|
|
21
21
|
context?: string | undefined;
|
|
22
22
|
self?: null | undefined;
|
|
23
|
-
c?: string | undefined;
|
|
24
23
|
cl?: string | undefined;
|
|
24
|
+
c?: string | undefined;
|
|
25
25
|
};
|
|
26
26
|
events: {
|
|
27
27
|
[evt: string]: CustomEvent<any>;
|
package/tiles.row.svelte.d.ts
CHANGED
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
/** @typedef {typeof __propDef.events} TilesEvents */
|
|
3
3
|
/** @typedef {typeof __propDef.slots} TilesSlots */
|
|
4
4
|
export default class Tiles extends SvelteComponentTyped<{
|
|
5
|
-
c?: string | undefined;
|
|
6
5
|
cl?: string | undefined;
|
|
6
|
+
c?: string | undefined;
|
|
7
7
|
w?: string | undefined;
|
|
8
8
|
}, {
|
|
9
9
|
[evt: string]: CustomEvent<any>;
|
|
@@ -17,8 +17,8 @@ export type TilesSlots = typeof __propDef.slots;
|
|
|
17
17
|
import { SvelteComponentTyped } from "svelte";
|
|
18
18
|
declare const __propDef: {
|
|
19
19
|
props: {
|
|
20
|
-
c?: string | undefined;
|
|
21
20
|
cl?: string | undefined;
|
|
21
|
+
c?: string | undefined;
|
|
22
22
|
w?: string | undefined;
|
|
23
23
|
};
|
|
24
24
|
events: {
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
/** @typedef {typeof __propDef.events} TilesEvents */
|
|
3
3
|
/** @typedef {typeof __propDef.slots} TilesSlots */
|
|
4
4
|
export default class Tiles extends SvelteComponentTyped<{
|
|
5
|
-
c?: string | undefined;
|
|
6
5
|
cl?: string | undefined;
|
|
6
|
+
c?: string | undefined;
|
|
7
7
|
}, {
|
|
8
8
|
[evt: string]: CustomEvent<any>;
|
|
9
9
|
}, {
|
|
@@ -16,8 +16,8 @@ export type TilesSlots = typeof __propDef.slots;
|
|
|
16
16
|
import { SvelteComponentTyped } from "svelte";
|
|
17
17
|
declare const __propDef: {
|
|
18
18
|
props: {
|
|
19
|
-
c?: string | undefined;
|
|
20
19
|
cl?: string | undefined;
|
|
20
|
+
c?: string | undefined;
|
|
21
21
|
};
|
|
22
22
|
events: {
|
|
23
23
|
[evt: string]: CustomEvent<any>;
|
package/vertical.toolbar.svelte
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
import GoPrimitiveDot from 'svelte-icons/go/GoPrimitiveDot.svelte'
|
|
7
7
|
import FaSignInAlt from 'svelte-icons/fa/FaSignInAlt.svelte'
|
|
8
8
|
import FaSignOutAlt from 'svelte-icons/fa/FaSignOutAlt.svelte'
|
|
9
|
-
import {show_menu} from './components/menu
|
|
9
|
+
import {show_menu} from './components/menu'
|
|
10
10
|
//import Menu from './components/contextmenu.svelte'
|
|
11
11
|
|
|
12
12
|
import {dark_mode_store,
|
|
@@ -74,12 +74,9 @@
|
|
|
74
74
|
show_sidebar(key);
|
|
75
75
|
}
|
|
76
76
|
|
|
77
|
-
|
|
78
|
-
let options_owner;
|
|
79
|
-
|
|
80
|
-
function show_options()
|
|
77
|
+
function show_options(e)
|
|
81
78
|
{
|
|
82
|
-
let rect =
|
|
79
|
+
let rect = e.target.getBoundingClientRect();
|
|
83
80
|
let x = rect.right;
|
|
84
81
|
let y = rect.top;
|
|
85
82
|
let options = [];
|
|
@@ -170,8 +167,7 @@
|
|
|
170
167
|
|
|
171
168
|
<button
|
|
172
169
|
class="h-16 px-0 flex justify-center items-center w-full text-slate-300 hover:text-slate-100"
|
|
173
|
-
on:click={
|
|
174
|
-
bind:this={options_owner}>
|
|
170
|
+
on:click={show_options}>
|
|
175
171
|
|
|
176
172
|
<Icon size={6} component={FaEllipsisH} />
|
|
177
173
|
</button>
|