@humandialog/forms.svelte 1.4.1 → 1.4.3
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.
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<script>import { getContext, tick } from "svelte";
|
|
2
|
-
import { push } from "svelte-spa-router";
|
|
2
|
+
import { push, link } from "svelte-spa-router";
|
|
3
3
|
import {
|
|
4
4
|
contextItemsStore,
|
|
5
5
|
isActive,
|
|
@@ -137,9 +137,9 @@ export async function editProperty(field) {
|
|
|
137
137
|
}
|
|
138
138
|
}
|
|
139
139
|
function followDefinedHRef() {
|
|
140
|
-
let
|
|
141
|
-
if (
|
|
142
|
-
push(
|
|
140
|
+
let link2 = getHRef();
|
|
141
|
+
if (link2)
|
|
142
|
+
push(link2);
|
|
143
143
|
}
|
|
144
144
|
function getHRef() {
|
|
145
145
|
if (definition.titleHref)
|
|
@@ -221,12 +221,18 @@ function showAttachementIcon() {
|
|
|
221
221
|
onSoftEnter: async (text) => { onTitleChanged(text); await editProperty('Summary') }
|
|
222
222
|
}}
|
|
223
223
|
use:conditionalClick={{
|
|
224
|
-
condition:
|
|
224
|
+
condition: hasOpen,
|
|
225
225
|
callback: performOpen}}
|
|
226
226
|
bind:this={titleElement}>
|
|
227
|
-
|
|
227
|
+
|
|
228
|
+
{#if isLinkLike}
|
|
229
|
+
<a href={getHRef()} use:link>
|
|
230
|
+
{item[definition.titleAttrib]}
|
|
231
|
+
</a>
|
|
232
|
+
{:else}
|
|
228
233
|
{item[definition.titleAttrib]}
|
|
229
|
-
|
|
234
|
+
{/if}
|
|
235
|
+
|
|
230
236
|
|
|
231
237
|
{#if showIcon}
|
|
232
238
|
<span id="attachement" class="absolute top-1 right-0 w-5 h-5 sm:w-3 sm:h-3">
|
|
@@ -15,7 +15,7 @@ import Summary from "./list.element.summary.svelte";
|
|
|
15
15
|
import Properties from "./list.element.props.svelte";
|
|
16
16
|
import { isDeviceSmallerThan } from "../../../utils";
|
|
17
17
|
import { rList_definition, rList_property_type } from "../List";
|
|
18
|
-
import { push } from "svelte-spa-router";
|
|
18
|
+
import { push, link } from "svelte-spa-router";
|
|
19
19
|
import { FaExternalLinkAlt } from "svelte-icons/fa/";
|
|
20
20
|
import Tags from "../../tags.svelte";
|
|
21
21
|
export let item;
|
|
@@ -151,9 +151,9 @@ function on_active_row_clicked(e, part) {
|
|
|
151
151
|
}
|
|
152
152
|
}
|
|
153
153
|
function followDefinedHRef() {
|
|
154
|
-
let
|
|
155
|
-
if (
|
|
156
|
-
push(
|
|
154
|
+
let link2 = getHRef();
|
|
155
|
+
if (link2)
|
|
156
|
+
push(link2);
|
|
157
157
|
}
|
|
158
158
|
function getHRef() {
|
|
159
159
|
if (definition.title_href)
|
|
@@ -273,18 +273,19 @@ export function scrollToView() {
|
|
|
273
273
|
{#if is_link_like}
|
|
274
274
|
<p class=" text-base font-semibold
|
|
275
275
|
|
|
276
|
-
whitespace-nowrap overflow-clip w-full sm:flex-none sm:{name_w}
|
|
277
|
-
sm:hover:cursor-pointer underline"
|
|
276
|
+
whitespace-nowrap overflow-clip w-full sm:flex-none sm:{name_w}"
|
|
278
277
|
id="__hd_list_ctrl_{getItemKey(item)}_Title"
|
|
279
|
-
on:click|stopPropagation={followDefinedHRef}
|
|
280
278
|
use:editable={{
|
|
281
279
|
action: (text) => {change_name(text)},
|
|
282
280
|
active: false,
|
|
283
281
|
readonly: definition.title_readonly,
|
|
284
282
|
onSoftEnter: (text) => {change_name(text); editProperty('Summary')}
|
|
285
283
|
}}
|
|
286
|
-
>
|
|
287
|
-
|
|
284
|
+
> <!--on:click|stopPropagation={followDefinedHRef}-->
|
|
285
|
+
<a class="sm:hover:cursor-pointer underline"
|
|
286
|
+
href={getHRef()} use:link>
|
|
287
|
+
{element_title}
|
|
288
|
+
</a>
|
|
288
289
|
</p>
|
|
289
290
|
{:else}
|
|
290
291
|
<p class=" text-base font-semibold
|
|
@@ -218,19 +218,52 @@ function activateRow(e) {
|
|
|
218
218
|
<div class="flex flex-row justify-between
|
|
219
219
|
text-base font-semibold">
|
|
220
220
|
{#if href}
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
221
|
+
{#if isOnPage}
|
|
222
|
+
{#if isRowActive}
|
|
223
|
+
<a on:click={on_link_clicked}
|
|
224
|
+
href={href}
|
|
225
|
+
use:link
|
|
226
|
+
class="flex-1 ml-2 inline-flex items-center underline"
|
|
227
|
+
>
|
|
228
|
+
{#if icon}
|
|
229
|
+
<Icon class="w-5 h-5 mt-0.5 ml-2 mr-1" component={icon}/>
|
|
230
|
+
|
|
231
|
+
{/if}
|
|
232
|
+
<span class="ml-3"
|
|
233
|
+
use:editable_if_needed={editable}>
|
|
234
|
+
<slot/>
|
|
235
|
+
</span>
|
|
236
|
+
</a>
|
|
237
|
+
{:else}
|
|
238
|
+
<span on:click={on_link_clicked}
|
|
239
|
+
class="flex-1 ml-2 inline-flex items-center"
|
|
240
|
+
>
|
|
241
|
+
{#if icon}
|
|
242
|
+
<Icon class="w-5 h-5 mt-0.5 ml-2 mr-1" component={icon}/>
|
|
243
|
+
|
|
244
|
+
{/if}
|
|
245
|
+
<span class="ml-3"
|
|
246
|
+
use:editable_if_needed={editable}>
|
|
247
|
+
<slot/>
|
|
248
|
+
</span>
|
|
249
|
+
</span>
|
|
228
250
|
{/if}
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
251
|
+
{:else}
|
|
252
|
+
<a on:click={on_link_clicked}
|
|
253
|
+
href={href}
|
|
254
|
+
use:link
|
|
255
|
+
class="flex-1 ml-2 inline-flex items-center group"
|
|
256
|
+
>
|
|
257
|
+
{#if icon}
|
|
258
|
+
<Icon class="w-5 h-5 mt-0.5 ml-2 mr-1" component={icon}/>
|
|
259
|
+
|
|
260
|
+
{/if}
|
|
261
|
+
<span class="ml-3 group-hover:underline"
|
|
262
|
+
use:editable_if_needed={editable}>
|
|
263
|
+
<slot/>
|
|
264
|
+
</span>
|
|
265
|
+
</a>
|
|
266
|
+
{/if}
|
|
234
267
|
{:else}
|
|
235
268
|
<p class="flex-1 ml-2 inline-flex items-center group cursor-default"
|
|
236
269
|
use:selectable_if_needed={selectable}>
|
package/operations.svelte
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
<script>import { showFloatingToolbar, showMenu, showGridMenu } from "./components/menu.js";
|
|
2
2
|
import { contextToolbarOperations, pageToolbarOperations, contextItemsStore } from "./stores.js";
|
|
3
|
+
import { FaEllipsisV } from "svelte-icons/fa";
|
|
3
4
|
export let mobile = false;
|
|
4
5
|
$:
|
|
5
6
|
update($pageToolbarOperations, $contextToolbarOperations);
|
|
@@ -9,17 +10,20 @@ let rightOperations = [];
|
|
|
9
10
|
let hasOperations = false;
|
|
10
11
|
function update(...args) {
|
|
11
12
|
let opVer = 0;
|
|
13
|
+
let operationsRoot = null;
|
|
12
14
|
if ($contextToolbarOperations && Array.isArray($contextToolbarOperations) && $contextToolbarOperations.length > 0) {
|
|
13
15
|
operations = $contextToolbarOperations;
|
|
14
16
|
} else if ($contextToolbarOperations && $contextToolbarOperations.operations && $contextToolbarOperations.operations.length > 0) {
|
|
15
17
|
operations = $contextToolbarOperations.operations;
|
|
16
18
|
opVer = $contextToolbarOperations.opver ?? 0;
|
|
19
|
+
operationsRoot = $contextToolbarOperations;
|
|
17
20
|
} else {
|
|
18
21
|
if (Array.isArray($pageToolbarOperations))
|
|
19
22
|
operations = $pageToolbarOperations;
|
|
20
23
|
else {
|
|
21
24
|
operations = $pageToolbarOperations.operations;
|
|
22
25
|
opVer = $pageToolbarOperations.opver ?? 0;
|
|
26
|
+
operationsRoot = $pageToolbarOperations;
|
|
23
27
|
}
|
|
24
28
|
}
|
|
25
29
|
leftOperations = [];
|
|
@@ -38,6 +42,35 @@ function update(...args) {
|
|
|
38
42
|
leftOperations = [...AOperations, ...BOperations];
|
|
39
43
|
rightOperations = [...COperations];
|
|
40
44
|
} else if (opVer == 2) {
|
|
45
|
+
if (operationsRoot && operationsRoot.tbr) {
|
|
46
|
+
let allFlatOperations = [];
|
|
47
|
+
operationsRoot.operations.forEach(
|
|
48
|
+
(g) => allFlatOperations = [
|
|
49
|
+
...allFlatOperations,
|
|
50
|
+
{
|
|
51
|
+
separator: true
|
|
52
|
+
},
|
|
53
|
+
...g.operations
|
|
54
|
+
]
|
|
55
|
+
);
|
|
56
|
+
const allOperationsMenu = {
|
|
57
|
+
caption: operationsRoot.caption ?? "",
|
|
58
|
+
icon: operationsRoot.icon ?? FaEllipsisV,
|
|
59
|
+
menu: allFlatOperations,
|
|
60
|
+
tbr: operationsRoot.tbr
|
|
61
|
+
};
|
|
62
|
+
switch (operationsRoot.tbr) {
|
|
63
|
+
case "A":
|
|
64
|
+
AOperations.push(allOperationsMenu);
|
|
65
|
+
break;
|
|
66
|
+
case "B":
|
|
67
|
+
BOperations.push(allOperationsMenu);
|
|
68
|
+
break;
|
|
69
|
+
case "C":
|
|
70
|
+
COperations.push(allOperationsMenu);
|
|
71
|
+
break;
|
|
72
|
+
}
|
|
73
|
+
}
|
|
41
74
|
operations.forEach((group) => {
|
|
42
75
|
if (group.tbr) {
|
|
43
76
|
const expandOperation = {
|