@humandialog/forms.svelte 0.4.37 → 0.4.38
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/Fab.svelte
CHANGED
|
@@ -78,8 +78,25 @@ function toggle_expand(e) {
|
|
|
78
78
|
</button>
|
|
79
79
|
|
|
80
80
|
{#if operations.length == 3}
|
|
81
|
-
|
|
82
|
-
|
|
81
|
+
{@const thrid_operation = operations[2]}
|
|
82
|
+
<button class=" bg-transparent
|
|
83
|
+
w-[55px] h-[55px]
|
|
84
|
+
fixed m-0 absolute bottom-[70px] right-[0px]
|
|
85
|
+
|
|
86
|
+
flex items-center justify-center
|
|
87
|
+
disable-dbl-tap-zoom"
|
|
88
|
+
on:click|stopPropagation={(e) => {on_click(e, thrid_operation)}} >
|
|
89
|
+
<div class=" w-10 h-10
|
|
90
|
+
text-white bg-zinc-500 hover:bg-zinc-500
|
|
91
|
+
font-medium rounded-full text-sm text-center shadow-md
|
|
92
|
+
dark:bg-zinc-500 dark:hover:bg-zinc-500
|
|
93
|
+
flex items-center justify-center">
|
|
94
|
+
<div class="w-5 h-5">
|
|
95
|
+
<svelte:component this={thrid_operation.icon}/>
|
|
96
|
+
</div>
|
|
97
|
+
</div>
|
|
98
|
+
</button>
|
|
99
|
+
{:else if operations.length > 3}
|
|
83
100
|
<button class=" bg-transparent
|
|
84
101
|
w-[55px] h-[55px]
|
|
85
102
|
fixed m-0 absolute bottom-[70px] right-[0px]
|
|
@@ -94,6 +94,7 @@ function activate_row(e, item2) {
|
|
|
94
94
|
}
|
|
95
95
|
n = n.parentElement;
|
|
96
96
|
}
|
|
97
|
+
can_show_context_menu = false;
|
|
97
98
|
if (can_show_context_menu && context_menu) {
|
|
98
99
|
const pt = new DOMPoint(e.clientX, e.clientY);
|
|
99
100
|
let context_operations = context_menu(item2);
|
|
@@ -213,7 +214,7 @@ async function edit_date(field, prop_idx) {
|
|
|
213
214
|
|
|
214
215
|
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
|
215
216
|
{#if item}
|
|
216
|
-
<section class="flex flex-row my-0 w-full text-sm text-slate-700 dark:text-slate-400 cursor-default rounded-md border
|
|
217
|
+
<section class="flex flex-row my-0 w-full text-sm text-slate-700 dark:text-slate-400 cursor-default rounded-md border border-transparent {selected_class} {focused_class}"
|
|
217
218
|
on:contextmenu={on_contextmenu}
|
|
218
219
|
role="menu"
|
|
219
220
|
tabindex="-1">
|
|
@@ -239,7 +240,7 @@ async function edit_date(field, prop_idx) {
|
|
|
239
240
|
<!--div class="flex flex-row justify-between text-xs flex-none w-1/2 sm:w-2/3"-->
|
|
240
241
|
<div class="text-xs flex-none w-1/2 sm:w-2/3 grid-{definition.properties.length}">
|
|
241
242
|
{#each definition.properties as prop, prop_index}
|
|
242
|
-
<p class="col-span-1 w-full mr-auto">
|
|
243
|
+
<p class="col-span-1 w-full mr-auto mt-0.5">
|
|
243
244
|
{#if item[prop.a] || placeholder == prop.name}
|
|
244
245
|
<span role="gridcell" tabindex="0">
|
|
245
246
|
{#if prop.type == rList_property_type.Date}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@humandialog/forms.svelte",
|
|
3
|
-
"version": "0.4.
|
|
3
|
+
"version": "0.4.38",
|
|
4
4
|
"description": "Basic Svelte UI components for Object Reef applications",
|
|
5
5
|
"devDependencies": {
|
|
6
6
|
"@playwright/test": "^1.28.1",
|
|
@@ -52,7 +52,6 @@
|
|
|
52
52
|
"exports": {
|
|
53
53
|
"./package.json": "./package.json",
|
|
54
54
|
"./components/Fab.svelte": "./components/Fab.svelte",
|
|
55
|
-
"./components/Fab2.svelte": "./components/Fab2.svelte",
|
|
56
55
|
"./components/Floating_container.svelte": "./components/Floating_container.svelte",
|
|
57
56
|
"./components/Grid.menu.svelte": "./components/Grid.menu.svelte",
|
|
58
57
|
"./components/button.svelte": "./components/button.svelte",
|
package/components/Fab2.svelte
DELETED
|
@@ -1,89 +0,0 @@
|
|
|
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>
|
|
@@ -1,14 +0,0 @@
|
|
|
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 {};
|