@humandialog/forms.svelte 1.3.8 → 1.3.10
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/combo/combo.svelte +18 -3
- package/components/date.svelte +13 -3
- package/components/icon.ex.svelte +114 -0
- package/components/icon.ex.svelte.d.ts +62 -0
- package/components/inputbox.ltop.svelte +8 -0
- package/components/inputbox.ltop.svelte.d.ts +5 -0
- package/components/kanban/internal/kanban.card.svelte +9 -10
- package/components/kanban/internal/kanban.column.svelte +1 -1
- package/components/kanban/internal/kanban.props.svelte +6 -6
- package/components/list/internal/list.element.props.svelte +4 -4
- package/components/list/internal/list.element.svelte +18 -32
- package/components/sidebar/sidebar.item.svelte +3 -3
- package/components/tag.svelte +2 -2
- package/index.d.ts +1 -0
- package/index.js +1 -0
- package/package.json +2 -1
- package/tenant.members.svelte +41 -7
|
@@ -54,7 +54,7 @@ switch (s) {
|
|
|
54
54
|
label_mb = "mb-2";
|
|
55
55
|
input_pt = "pt-2.5";
|
|
56
56
|
input_pb = "pb-2.5";
|
|
57
|
-
font_size = "text-lg
|
|
57
|
+
font_size = "text-lg";
|
|
58
58
|
line_h = "h-7 sm:h-5";
|
|
59
59
|
chevron_mt = "mt-2 sm:mt-1";
|
|
60
60
|
break;
|
|
@@ -62,10 +62,25 @@ switch (s) {
|
|
|
62
62
|
label_mb = "mb-0.5";
|
|
63
63
|
input_pt = "pt-0.5";
|
|
64
64
|
input_pb = "pb-0.5";
|
|
65
|
-
font_size = "text-
|
|
66
|
-
line_h = "h-6
|
|
65
|
+
font_size = "text-xs";
|
|
66
|
+
line_h = "h-6 ";
|
|
67
67
|
chevron_mt = "";
|
|
68
68
|
break;
|
|
69
|
+
case "sm":
|
|
70
|
+
label_mb = "mb-0.5";
|
|
71
|
+
input_pt = "pt-0.5";
|
|
72
|
+
input_pb = "pb-0.5";
|
|
73
|
+
font_size = "text-sm";
|
|
74
|
+
line_h = "h-6 ";
|
|
75
|
+
chevron_mt = "";
|
|
76
|
+
break;
|
|
77
|
+
default:
|
|
78
|
+
label_mb = "mb-0.5";
|
|
79
|
+
input_pt = "pt-0.5";
|
|
80
|
+
input_pb = "pb-0.5";
|
|
81
|
+
font_size = "text-base";
|
|
82
|
+
line_h = "h-6";
|
|
83
|
+
chevron_mt = "";
|
|
69
84
|
}
|
|
70
85
|
let background_class = is_compact && !icon ? "" : "";
|
|
71
86
|
let appearance_class;
|
package/components/date.svelte
CHANGED
|
@@ -39,14 +39,24 @@ export function show(event, hide_callback) {
|
|
|
39
39
|
let is_compact = getContext("rIs-table-component") || compact;
|
|
40
40
|
let input_pt = "pt-0.5";
|
|
41
41
|
let input_pb = "pb-1";
|
|
42
|
-
let font_size = "text-
|
|
42
|
+
let font_size = "text-base";
|
|
43
43
|
let line_h = "h-7 sm:h-5";
|
|
44
44
|
let chevron_mt = "mt-2 sm:mt-1";
|
|
45
45
|
switch (s) {
|
|
46
46
|
case "md":
|
|
47
47
|
input_pt = "pt-2.5";
|
|
48
48
|
input_pb = "pb-2.5";
|
|
49
|
-
font_size = "text-
|
|
49
|
+
font_size = "text-md";
|
|
50
|
+
if (!is_compact)
|
|
51
|
+
line_h = "h-12 sm:h-10";
|
|
52
|
+
else
|
|
53
|
+
line_h = "h-7 sm:h-5";
|
|
54
|
+
chevron_mt = "mt-2 sm:mt-1";
|
|
55
|
+
break;
|
|
56
|
+
case "sm":
|
|
57
|
+
input_pt = "pt-2.5";
|
|
58
|
+
input_pb = "pb-2.5";
|
|
59
|
+
font_size = "text-sm";
|
|
50
60
|
if (!is_compact)
|
|
51
61
|
line_h = "h-12 sm:h-10";
|
|
52
62
|
else
|
|
@@ -56,7 +66,7 @@ switch (s) {
|
|
|
56
66
|
case "xs":
|
|
57
67
|
input_pt = "pt-0.5";
|
|
58
68
|
input_pb = "pb-0.5";
|
|
59
|
-
font_size = "text-
|
|
69
|
+
font_size = "text-xs";
|
|
60
70
|
if (!is_compact)
|
|
61
71
|
line_h = "h-7 sm:h-7";
|
|
62
72
|
else
|
|
@@ -0,0 +1,114 @@
|
|
|
1
|
+
<svelte:options accessors={true}/>
|
|
2
|
+
<script>import { icons } from "../utils.js";
|
|
3
|
+
export let component = null;
|
|
4
|
+
export let moduleName = "fa/FaQuestion";
|
|
5
|
+
export let img = "";
|
|
6
|
+
export let label = "";
|
|
7
|
+
export let symbol = "";
|
|
8
|
+
export let color = "";
|
|
9
|
+
export let size = void 0;
|
|
10
|
+
export let bg = "";
|
|
11
|
+
export let circle = false;
|
|
12
|
+
let additional_class = $$restProps.class ?? "";
|
|
13
|
+
let id = $$restProps.id ?? "";
|
|
14
|
+
let _bg;
|
|
15
|
+
let txt = "";
|
|
16
|
+
let symbol_html = "";
|
|
17
|
+
$: {
|
|
18
|
+
if (symbol) {
|
|
19
|
+
if (symbol.startsWith("label:"))
|
|
20
|
+
label = symbol.substring(6);
|
|
21
|
+
else if (symbol.startsWith("color:"))
|
|
22
|
+
color = symbol.substring(6);
|
|
23
|
+
else if (symbol.startsWith("img:"))
|
|
24
|
+
img = symbol.substring(4);
|
|
25
|
+
else if (icons && icons.symbols && icons.symbols.has(symbol))
|
|
26
|
+
symbol_html = icons.symbols.get(symbol);
|
|
27
|
+
}
|
|
28
|
+
if (img) {
|
|
29
|
+
img = img;
|
|
30
|
+
txt = "";
|
|
31
|
+
_bg = bg;
|
|
32
|
+
} else if (label) {
|
|
33
|
+
label = label;
|
|
34
|
+
bg = bg;
|
|
35
|
+
if (!bg) {
|
|
36
|
+
let saturation = 100;
|
|
37
|
+
let lightness = 75;
|
|
38
|
+
let hash = 0;
|
|
39
|
+
for (let i = 0; i < label.length; i++) {
|
|
40
|
+
hash = label.charCodeAt(i) + ((hash << 5) - hash);
|
|
41
|
+
hash = hash & hash;
|
|
42
|
+
}
|
|
43
|
+
_bg = `hsl(${hash % 360}, ${saturation}%, ${lightness}%)`;
|
|
44
|
+
} else
|
|
45
|
+
_bg = bg;
|
|
46
|
+
let arr = label.split(" ");
|
|
47
|
+
if (arr.length > 0) {
|
|
48
|
+
txt = arr[0].substring(0, 1).toUpperCase();
|
|
49
|
+
if (arr.length > 1)
|
|
50
|
+
txt += arr[arr.length - 1].substring(0, 1).toUpperCase();
|
|
51
|
+
}
|
|
52
|
+
} else if (color) {
|
|
53
|
+
_bg = color;
|
|
54
|
+
} else if (symbol) {
|
|
55
|
+
} else if (!component) {
|
|
56
|
+
} else
|
|
57
|
+
component = component;
|
|
58
|
+
}
|
|
59
|
+
let style;
|
|
60
|
+
$: {
|
|
61
|
+
if (size == void 0) {
|
|
62
|
+
if (!additional_class) {
|
|
63
|
+
size = 5;
|
|
64
|
+
let icon_size = `${size * 0.25}rem`;
|
|
65
|
+
style = `width: ${icon_size}; height: ${icon_size}`;
|
|
66
|
+
} else
|
|
67
|
+
style = "";
|
|
68
|
+
} else {
|
|
69
|
+
let icon_size = `${size * 0.25}rem`;
|
|
70
|
+
style = `width: ${icon_size}; height: ${icon_size}`;
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
</script>
|
|
74
|
+
|
|
75
|
+
<div class=" {additional_class}"
|
|
76
|
+
style="{style}"
|
|
77
|
+
style:background-color={_bg}
|
|
78
|
+
style:border-radius={ circle ? '50%' : ''}
|
|
79
|
+
{id}
|
|
80
|
+
on:blur
|
|
81
|
+
on:click
|
|
82
|
+
on:focus
|
|
83
|
+
on:keydown
|
|
84
|
+
on:keypress
|
|
85
|
+
on:keyup
|
|
86
|
+
on:mouseenter
|
|
87
|
+
on:mouseleave
|
|
88
|
+
on:mouseover >
|
|
89
|
+
{#if component != null}
|
|
90
|
+
<svelte:component this={component} />
|
|
91
|
+
{:else if txt}
|
|
92
|
+
<div class="m-0 p-0 font-sans font-bold flex flex-col justify-center text-center w-full h-full text-stone-900"
|
|
93
|
+
style:font-size={`${size/8}rem`}
|
|
94
|
+
>
|
|
95
|
+
<div>{txt}</div>
|
|
96
|
+
</div>
|
|
97
|
+
{:else if img}
|
|
98
|
+
<img src={img} class="w-full max-w-full h-full max-h-full" alt='img'/>
|
|
99
|
+
{:else if symbol_html}
|
|
100
|
+
{@html symbol_html}
|
|
101
|
+
{/if}
|
|
102
|
+
</div>
|
|
103
|
+
|
|
104
|
+
<!--style>
|
|
105
|
+
svg {
|
|
106
|
+
stroke: currentColor;
|
|
107
|
+
fill: currentColor;
|
|
108
|
+
stroke-width: 0;
|
|
109
|
+
width: 100%;
|
|
110
|
+
height: auto;
|
|
111
|
+
max-height: 100%;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
</style-->
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
import { SvelteComponentTyped } from "svelte";
|
|
2
|
+
declare const __propDef: {
|
|
3
|
+
props: {
|
|
4
|
+
[x: string]: any;
|
|
5
|
+
component?: null | undefined;
|
|
6
|
+
moduleName?: string | undefined;
|
|
7
|
+
img?: string | undefined;
|
|
8
|
+
label?: string | undefined;
|
|
9
|
+
symbol?: string | undefined;
|
|
10
|
+
color?: string | undefined;
|
|
11
|
+
size?: number | undefined;
|
|
12
|
+
bg?: string | undefined;
|
|
13
|
+
circle?: boolean | undefined;
|
|
14
|
+
};
|
|
15
|
+
events: {
|
|
16
|
+
blur: FocusEvent;
|
|
17
|
+
click: MouseEvent;
|
|
18
|
+
focus: FocusEvent;
|
|
19
|
+
keydown: KeyboardEvent;
|
|
20
|
+
keypress: KeyboardEvent;
|
|
21
|
+
keyup: KeyboardEvent;
|
|
22
|
+
mouseenter: MouseEvent;
|
|
23
|
+
mouseleave: MouseEvent;
|
|
24
|
+
mouseover: MouseEvent;
|
|
25
|
+
} & {
|
|
26
|
+
[evt: string]: CustomEvent<any>;
|
|
27
|
+
};
|
|
28
|
+
slots: {};
|
|
29
|
+
};
|
|
30
|
+
export type IconProps = typeof __propDef.props;
|
|
31
|
+
export type IconEvents = typeof __propDef.events;
|
|
32
|
+
export type IconSlots = typeof __propDef.slots;
|
|
33
|
+
export default class Icon extends SvelteComponentTyped<IconProps, IconEvents, IconSlots> {
|
|
34
|
+
get component(): null | undefined;
|
|
35
|
+
/**accessor*/
|
|
36
|
+
set component(_: null | undefined);
|
|
37
|
+
get moduleName(): string | undefined;
|
|
38
|
+
/**accessor*/
|
|
39
|
+
set moduleName(_: string | undefined);
|
|
40
|
+
get img(): string | undefined;
|
|
41
|
+
/**accessor*/
|
|
42
|
+
set img(_: string | undefined);
|
|
43
|
+
get label(): string | undefined;
|
|
44
|
+
/**accessor*/
|
|
45
|
+
set label(_: string | undefined);
|
|
46
|
+
get symbol(): string | undefined;
|
|
47
|
+
/**accessor*/
|
|
48
|
+
set symbol(_: string | undefined);
|
|
49
|
+
get color(): string | undefined;
|
|
50
|
+
/**accessor*/
|
|
51
|
+
set color(_: string | undefined);
|
|
52
|
+
get size(): number | undefined;
|
|
53
|
+
/**accessor*/
|
|
54
|
+
set size(_: number | undefined);
|
|
55
|
+
get bg(): string | undefined;
|
|
56
|
+
/**accessor*/
|
|
57
|
+
set bg(_: string | undefined);
|
|
58
|
+
get circle(): boolean | undefined;
|
|
59
|
+
/**accessor*/
|
|
60
|
+
set circle(_: boolean | undefined);
|
|
61
|
+
}
|
|
62
|
+
export {};
|
|
@@ -21,6 +21,7 @@
|
|
|
21
21
|
export let pushChangesImmediately = true;
|
|
22
22
|
|
|
23
23
|
export let required = false;
|
|
24
|
+
export let readonly = false;
|
|
24
25
|
|
|
25
26
|
export let s = 'sm'
|
|
26
27
|
export let c = ''
|
|
@@ -45,6 +46,12 @@
|
|
|
45
46
|
return !invalid;
|
|
46
47
|
}
|
|
47
48
|
|
|
49
|
+
export function setReadonly(val)
|
|
50
|
+
{
|
|
51
|
+
readonly = val;
|
|
52
|
+
itype = itype;
|
|
53
|
+
}
|
|
54
|
+
|
|
48
55
|
|
|
49
56
|
let item = null
|
|
50
57
|
|
|
@@ -128,6 +135,7 @@
|
|
|
128
135
|
on:change={()=> (value_changed())}
|
|
129
136
|
on:blur={() => { accept_change();} }
|
|
130
137
|
on:keydown={(e)=>{check_validity();}}
|
|
138
|
+
{readonly}
|
|
131
139
|
|
|
132
140
|
class=" bg-stone-50 dark:bg-stone-700
|
|
133
141
|
border {border_style} rounded-lg
|
|
@@ -16,12 +16,15 @@ export default class Inputbox extends SvelteComponentTyped<{
|
|
|
16
16
|
itype?: string | undefined;
|
|
17
17
|
val?: string | undefined;
|
|
18
18
|
required?: boolean | undefined;
|
|
19
|
+
readonly?: boolean | undefined;
|
|
19
20
|
validation?: any;
|
|
20
21
|
validate?: (() => boolean) | undefined;
|
|
22
|
+
setReadonly?: ((val: any) => void) | undefined;
|
|
21
23
|
}, {
|
|
22
24
|
[evt: string]: CustomEvent<any>;
|
|
23
25
|
}, {}> {
|
|
24
26
|
get validate(): () => boolean;
|
|
27
|
+
get setReadonly(): (val: any) => void;
|
|
25
28
|
}
|
|
26
29
|
export type InputboxProps = typeof __propDef.props;
|
|
27
30
|
export type InputboxEvents = typeof __propDef.events;
|
|
@@ -43,8 +46,10 @@ declare const __propDef: {
|
|
|
43
46
|
itype?: string | undefined;
|
|
44
47
|
val?: string | undefined;
|
|
45
48
|
required?: boolean | undefined;
|
|
49
|
+
readonly?: boolean | undefined;
|
|
46
50
|
validation?: any;
|
|
47
51
|
validate?: (() => boolean) | undefined;
|
|
52
|
+
setReadonly?: ((val: any) => void) | undefined;
|
|
48
53
|
};
|
|
49
54
|
events: {
|
|
50
55
|
[evt: string]: CustomEvent<any>;
|
|
@@ -208,8 +208,7 @@ function showAttachementIcon() {
|
|
|
208
208
|
{@const canOpen = isLinkLike || hasOpen}
|
|
209
209
|
{@const openableClass = canOpen ? "sm:hover:cursor-pointer underline" : ""}
|
|
210
210
|
{@const showIcon = showAttachementIcon()}
|
|
211
|
-
<h3 class=" text-
|
|
212
|
-
sm:text-sm sm:font-semibold sm:min-h-[1.25rem]
|
|
211
|
+
<h3 class=" text-base font-semibold pb-1
|
|
213
212
|
whitespace-nowrap overflow-clip truncate w-full sm:flex-none
|
|
214
213
|
relative {openableClass}"
|
|
215
214
|
use:editable={{
|
|
@@ -237,8 +236,8 @@ function showAttachementIcon() {
|
|
|
237
236
|
|
|
238
237
|
|
|
239
238
|
{:else}
|
|
240
|
-
<h3 class=" text-
|
|
241
|
-
sm:text-
|
|
239
|
+
<h3 class=" text-base font-semibold pb-1
|
|
240
|
+
sm:text-base sm:font-semibold
|
|
242
241
|
whitespace-nowrap overflow-clip truncate w-full sm:flex-none
|
|
243
242
|
relative">
|
|
244
243
|
{item[definition.titleAttrib]}
|
|
@@ -258,10 +257,10 @@ function showAttachementIcon() {
|
|
|
258
257
|
{#if item[definition.summaryAttrib] || summaryPlaceholder}
|
|
259
258
|
{#key item[definition.summaryAttrib]}
|
|
260
259
|
{#if isCardActive}
|
|
261
|
-
<p class="
|
|
262
|
-
|
|
260
|
+
<p class=" text-sm sm:text-sm
|
|
261
|
+
|
|
263
262
|
text-stone-400
|
|
264
|
-
|
|
263
|
+
|
|
265
264
|
overflow-hidden"
|
|
266
265
|
use:editable={{
|
|
267
266
|
action: (text) => onSummaryChanged(text),
|
|
@@ -272,10 +271,10 @@ function showAttachementIcon() {
|
|
|
272
271
|
{item[definition.summaryAttrib]}
|
|
273
272
|
</p>
|
|
274
273
|
{:else}
|
|
275
|
-
<p class=" sm:text-
|
|
276
|
-
|
|
274
|
+
<p class=" text-sm sm:text-sm
|
|
275
|
+
|
|
277
276
|
text-stone-400
|
|
278
|
-
|
|
277
|
+
|
|
279
278
|
overflow-hidden">
|
|
280
279
|
{item[definition.summaryAttrib]}
|
|
281
280
|
</p>
|
|
@@ -241,7 +241,7 @@ async function dblclick(e) {
|
|
|
241
241
|
on:click={activate}
|
|
242
242
|
on:dblclick={dblclick}>
|
|
243
243
|
<header class:cursor-pointer={!is_row_active && columnDef.operations} bind:this={headerElement}>
|
|
244
|
-
<h2 class="mt-2 mb-2 text-
|
|
244
|
+
<h2 class="mt-2 mb-2 text-base sm:text-base uppercase w-full min-h-[1rem] text-center whitespace-nowrap relative">
|
|
245
245
|
<span
|
|
246
246
|
use:editable={{
|
|
247
247
|
action: (text) => onTitleChanged(text),
|
|
@@ -96,7 +96,7 @@ async function editTags(field, propIdx) {
|
|
|
96
96
|
self={item}
|
|
97
97
|
a={prop.a}
|
|
98
98
|
compact={true}
|
|
99
|
-
s="
|
|
99
|
+
s="sm"
|
|
100
100
|
inContext="props"
|
|
101
101
|
bind:this={propElements[idx]}/>
|
|
102
102
|
{:else if prop.type == rList_property_type.Combo}
|
|
@@ -110,14 +110,14 @@ async function editTags(field, propIdx) {
|
|
|
110
110
|
hasNone={prop.hasNone}
|
|
111
111
|
icon={false}
|
|
112
112
|
definition={prop.combo_definition}
|
|
113
|
-
s="
|
|
113
|
+
s="sm"
|
|
114
114
|
changed={(k,n) => { /*fake assignment for component rer-ender*/ item[prop.a] = item[prop.a]; }}
|
|
115
115
|
bind:this={propElements[idx]}/>
|
|
116
116
|
{:else if prop.type == rList_property_type.Static}
|
|
117
117
|
<p
|
|
118
118
|
class=" h-6
|
|
119
|
-
|
|
120
|
-
text-base min-h-[1.5rem]
|
|
119
|
+
text-sm sm:min-h-[1rem]
|
|
120
|
+
text-base-sm min-h-[1.5rem]
|
|
121
121
|
text-stone-400
|
|
122
122
|
text-right"
|
|
123
123
|
bind:this={propElements[idx]}>
|
|
@@ -125,13 +125,13 @@ async function editTags(field, propIdx) {
|
|
|
125
125
|
</p>
|
|
126
126
|
{:else if prop.type == rList_property_type.Tags}
|
|
127
127
|
<Tags
|
|
128
|
-
class="mt-
|
|
128
|
+
class="mt-1"
|
|
129
129
|
compact
|
|
130
130
|
inContext="props"
|
|
131
131
|
self={item}
|
|
132
132
|
a={prop.a}
|
|
133
133
|
getGlobalTags={prop.getAllTags}
|
|
134
|
-
s="
|
|
134
|
+
s="sm"
|
|
135
135
|
onSelect={prop.onSelect}
|
|
136
136
|
onUpdateAllTags={prop.onUpdateAllTags}
|
|
137
137
|
canChangeColor={prop.canChangeColor}
|
|
@@ -68,7 +68,7 @@ async function edit_date(field, prop_idx) {
|
|
|
68
68
|
}
|
|
69
69
|
</script>
|
|
70
70
|
|
|
71
|
-
<div class="text-
|
|
71
|
+
<div class="text-base grid-{definition.properties.length}">
|
|
72
72
|
{#each definition.properties as prop, prop_index}
|
|
73
73
|
<p class="col-span-1 w-full mr-auto mt-0.5">
|
|
74
74
|
{#if item[prop.a] || placeholder == prop.name}
|
|
@@ -78,7 +78,7 @@ async function edit_date(field, prop_idx) {
|
|
|
78
78
|
a={prop.a}
|
|
79
79
|
compact={true}
|
|
80
80
|
onSelect={prop.onSelect}
|
|
81
|
-
s="
|
|
81
|
+
s=""
|
|
82
82
|
inContext="props sel"
|
|
83
83
|
bind:this={props[prop_index]}
|
|
84
84
|
changed={(value)=>{on_date_changed(value, prop.a)}}
|
|
@@ -95,9 +95,9 @@ async function edit_date(field, prop_idx) {
|
|
|
95
95
|
bind:this={props[prop_index]}
|
|
96
96
|
definition={prop.combo_definition}
|
|
97
97
|
changed={(key,name)=>{on_combo_changed(key, name, prop)}}
|
|
98
|
-
s=
|
|
98
|
+
s=""/>
|
|
99
99
|
{:else if prop.type == rList_property_type.Static}
|
|
100
|
-
<span class="dark:text-white text-stone-400 truncate
|
|
100
|
+
<span class="dark:text-white text-stone-400 truncate bg-stone-900/10 dark:bg-stone-100/10 rounded-lg">
|
|
101
101
|
{item[prop.a]}
|
|
102
102
|
</span>
|
|
103
103
|
{/if}
|
|
@@ -238,7 +238,7 @@ export function scrollToView() {
|
|
|
238
238
|
{#if item}
|
|
239
239
|
{@const element_title = item[title]}
|
|
240
240
|
|
|
241
|
-
<section class="
|
|
241
|
+
<section class="my-1 flex flex-row my-0 w-full text-stone-700 dark:text-stone-300 cursor-default rounded-md border border-transparent {selected_class} {focused_class} scroll-mt-[50px] sm:scroll-mt-[40px]"
|
|
242
242
|
on:contextmenu={on_contextmenu}
|
|
243
243
|
role="menu"
|
|
244
244
|
tabindex="-1"
|
|
@@ -248,7 +248,7 @@ export function scrollToView() {
|
|
|
248
248
|
|
|
249
249
|
<i class="hidden sm:w-1/2 sm:w-2/3 sm:w-1/3"></i> <!-- just to force tailwind classes including -->
|
|
250
250
|
|
|
251
|
-
<div class="ml-3 w-full py-
|
|
251
|
+
<div class="ml-3 w-full py-0"
|
|
252
252
|
use:selectable={item}
|
|
253
253
|
on:click={(e) => {activate_row(e, item)}}
|
|
254
254
|
role="row"
|
|
@@ -258,8 +258,8 @@ export function scrollToView() {
|
|
|
258
258
|
{#if is_row_active}
|
|
259
259
|
{#key item[title]} <!-- Wymusza pełne wyrenderowanie zwłasza po zmiane z pustego na tekst -->
|
|
260
260
|
{#if is_link_like}
|
|
261
|
-
<p class=" text-
|
|
262
|
-
|
|
261
|
+
<p class=" text-base font-semibold
|
|
262
|
+
|
|
263
263
|
whitespace-nowrap overflow-clip w-full sm:flex-none sm:{name_w}
|
|
264
264
|
sm:hover:cursor-pointer underline"
|
|
265
265
|
id="__hd_list_ctrl_{item[item_key]}_Title"
|
|
@@ -271,11 +271,11 @@ export function scrollToView() {
|
|
|
271
271
|
onSoftEnter: (text) => {change_name(text); editProperty('Summary')}
|
|
272
272
|
}}
|
|
273
273
|
>
|
|
274
|
-
{element_title}
|
|
274
|
+
{element_title} (1)
|
|
275
275
|
</p>
|
|
276
276
|
{:else}
|
|
277
|
-
<p class=" text-
|
|
278
|
-
|
|
277
|
+
<p class=" text-base font-semibold
|
|
278
|
+
|
|
279
279
|
whitespace-nowrap overflow-clip w-full sm:flex-none sm:{name_w}"
|
|
280
280
|
id="__hd_list_ctrl_{item[item_key]}_Title"
|
|
281
281
|
use:editable={{
|
|
@@ -283,7 +283,7 @@ export function scrollToView() {
|
|
|
283
283
|
active: true,
|
|
284
284
|
readonly: definition.title_readonly,
|
|
285
285
|
}}>
|
|
286
|
-
{element_title}
|
|
286
|
+
{element_title} (2)
|
|
287
287
|
|
|
288
288
|
{#if definition.onOpen}
|
|
289
289
|
<button class="ml-3 w-5 h-5 sm:w-3 sm:h-3"
|
|
@@ -295,11 +295,11 @@ export function scrollToView() {
|
|
|
295
295
|
{/if}
|
|
296
296
|
{/key}
|
|
297
297
|
{:else}
|
|
298
|
-
<p class=" text-
|
|
299
|
-
|
|
298
|
+
<p class=" text-base font-semibold
|
|
299
|
+
|
|
300
300
|
whitespace-nowrap overflow-clip w-full sm:flex-none sm:{name_w}"
|
|
301
301
|
id="__hd_list_ctrl_{item[item_key]}_Title">
|
|
302
|
-
{element_title}
|
|
302
|
+
{element_title} (3)
|
|
303
303
|
</p>
|
|
304
304
|
{/if}
|
|
305
305
|
|
|
@@ -311,46 +311,32 @@ export function scrollToView() {
|
|
|
311
311
|
|
|
312
312
|
{#if summary && (item[summary] || placeholder=='Summary')}
|
|
313
313
|
{@const element_id = `__hd_list_ctrl_${item[item_key]}_Summary`}
|
|
314
|
-
{#key item[summary]}
|
|
315
|
-
|
|
316
|
-
<!--Summary
|
|
317
|
-
id={element_id}
|
|
318
|
-
on:click={(e) => on_active_row_clicked(e, 'bottom')}
|
|
319
|
-
text={item[summary]}
|
|
320
|
-
readonly={definition.summary_readonly}
|
|
321
|
-
placeholder={placeholder == 'Summary'}
|
|
322
|
-
editable={(text) => {change_summary(text)}}
|
|
323
|
-
active={is_row_active}
|
|
324
|
-
/-->
|
|
325
|
-
|
|
326
|
-
|
|
314
|
+
{#key item[summary] }
|
|
327
315
|
{#if is_row_active}
|
|
328
316
|
<p id={element_id}
|
|
329
|
-
class="
|
|
330
|
-
|
|
331
|
-
text-stone-400"
|
|
317
|
+
class=" text-sm mt-1 mb-2
|
|
318
|
+
text-stone-400"
|
|
332
319
|
use:editable={{
|
|
333
320
|
action: (text) => {change_summary(text)},
|
|
334
321
|
readonly: definition.summary_readonly,
|
|
335
322
|
onFinish: (d) => {placeholder='';},
|
|
336
323
|
active: true
|
|
337
324
|
}}>
|
|
338
|
-
{item[summary]}
|
|
325
|
+
{item[summary]} (I)
|
|
339
326
|
</p>
|
|
340
327
|
{:else}
|
|
341
328
|
<p id={element_id}
|
|
342
|
-
class="
|
|
343
|
-
text-base min-h-[1.5rem]
|
|
329
|
+
class=" text-sm mt-1 mb-2
|
|
344
330
|
text-stone-400"
|
|
345
331
|
on:click={(e) => on_active_row_clicked(e, 'bottom')}>
|
|
346
|
-
{item[summary]}
|
|
332
|
+
{item[summary]} (II)
|
|
347
333
|
</p>
|
|
348
334
|
{/if}
|
|
349
335
|
{/key}
|
|
350
336
|
|
|
351
337
|
{/if}
|
|
352
338
|
|
|
353
|
-
<section class="block sm:hidden w-full
|
|
339
|
+
<section class="block sm:hidden w-full">
|
|
354
340
|
<Properties {definition} {item} {placeholder} bind:this={props_sm}/>
|
|
355
341
|
</section>
|
|
356
342
|
|
|
@@ -178,7 +178,7 @@ function activateRow(e) {
|
|
|
178
178
|
{#if href}
|
|
179
179
|
<a href={href}
|
|
180
180
|
on:click={on_link_clicked}
|
|
181
|
-
class="flex-1 ml-2 mt-
|
|
181
|
+
class="flex-1 ml-2 mt-1 sm:mt-1 inline-flex items-center group"
|
|
182
182
|
class:mb-3={!summary}
|
|
183
183
|
class:sm:mb-2={!summary}
|
|
184
184
|
>
|
|
@@ -191,12 +191,12 @@ function activateRow(e) {
|
|
|
191
191
|
</span>
|
|
192
192
|
</a>
|
|
193
193
|
{:else}
|
|
194
|
-
<p class="flex-1 ml-2 mt-
|
|
194
|
+
<p class="flex-1 ml-2 mt-1 sm:mt-1 inline-flex items-center group cursor-default"
|
|
195
195
|
class:mb-3={!summary}
|
|
196
196
|
class:sm:mb-2={!summary}
|
|
197
197
|
use:selectable_if_needed={selectable}>
|
|
198
198
|
{#if icon}
|
|
199
|
-
<Icon size={
|
|
199
|
+
<Icon size={2} component={icon}/>
|
|
200
200
|
{/if}
|
|
201
201
|
<span class="ml-3"
|
|
202
202
|
use:editable_if_needed={editable}>
|
package/components/tag.svelte
CHANGED
|
@@ -24,8 +24,8 @@ switch (s) {
|
|
|
24
24
|
x_size = "mt-1 w-3 h-3";
|
|
25
25
|
break;
|
|
26
26
|
case "sm":
|
|
27
|
-
font = "mt-0
|
|
28
|
-
x_size = "ml-3
|
|
27
|
+
font = "mt-0 text-xs mb-0.5 font-semibold";
|
|
28
|
+
x_size = "ml-3 mt-1 w-3 w-2 h-3 ";
|
|
29
29
|
break;
|
|
30
30
|
case "xs":
|
|
31
31
|
font = "mt-0 sm:mt-0 text-xs sm:text-[0.65rem] font-semibold sm:font-normal";
|
package/index.d.ts
CHANGED
|
@@ -6,6 +6,7 @@ export { default as Operations } from './operations.svelte';
|
|
|
6
6
|
export { default as Layout } from './desk.svelte';
|
|
7
7
|
export { default as VerticalToolbar } from './vertical.toolbar.svelte';
|
|
8
8
|
export { default as Icon } from "./components/icon.svelte";
|
|
9
|
+
export { default as IconT } from "./components/icon.ex.svelte";
|
|
9
10
|
export { default as Button } from './components/button.svelte';
|
|
10
11
|
export { default as Checkbox } from './components/checkbox.svelte';
|
|
11
12
|
export { default as DatePicker } from './components/date.svelte';
|
package/index.js
CHANGED
|
@@ -11,6 +11,7 @@ export { default as Layout } from './desk.svelte';
|
|
|
11
11
|
export { default as VerticalToolbar } from './vertical.toolbar.svelte';
|
|
12
12
|
// @ts-ignore
|
|
13
13
|
export { default as Icon } from "./components/icon.svelte";
|
|
14
|
+
export { default as IconT } from "./components/icon.ex.svelte";
|
|
14
15
|
export { default as Button } from './components/button.svelte';
|
|
15
16
|
export { default as Checkbox } from './components/checkbox.svelte';
|
|
16
17
|
export { default as DatePicker } from './components/date.svelte';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@humandialog/forms.svelte",
|
|
3
|
-
"version": "1.3.
|
|
3
|
+
"version": "1.3.10",
|
|
4
4
|
"description": "Basic Svelte UI components for Object Reef applications",
|
|
5
5
|
"devDependencies": {
|
|
6
6
|
"@playwright/test": "^1.28.1",
|
|
@@ -94,6 +94,7 @@
|
|
|
94
94
|
"./components/file.loader.svelte": "./components/file.loader.svelte",
|
|
95
95
|
"./components/Floating_container.svelte": "./components/Floating_container.svelte",
|
|
96
96
|
"./components/Grid.menu.svelte": "./components/Grid.menu.svelte",
|
|
97
|
+
"./components/icon.ex.svelte": "./components/icon.ex.svelte",
|
|
97
98
|
"./components/icon.svelte": "./components/icon.svelte",
|
|
98
99
|
"./components/input.text.svelte": "./components/input.text.svelte",
|
|
99
100
|
"./components/inputbox.ltop.svelte": "./components/inputbox.ltop.svelte",
|
package/tenant.members.svelte
CHANGED
|
@@ -23,6 +23,7 @@
|
|
|
23
23
|
import { ComboSource } from './';
|
|
24
24
|
import {showMenu} from './components/menu'
|
|
25
25
|
import {onErrorShowAlert} from './stores'
|
|
26
|
+
import {randomString} from './utils'
|
|
26
27
|
|
|
27
28
|
|
|
28
29
|
// ==============================================================================
|
|
@@ -54,7 +55,7 @@
|
|
|
54
55
|
const authAccessKinds = [
|
|
55
56
|
{ name: 'No auth access', key: 0 },
|
|
56
57
|
{ name: 'Read auth access', key: 1 },
|
|
57
|
-
{ name: 'Can invite others', key: 3 },
|
|
58
|
+
//{ name: 'Can invite others', key: 3 },
|
|
58
59
|
{ name: 'Full auth access', key: 7 },
|
|
59
60
|
]
|
|
60
61
|
|
|
@@ -169,7 +170,8 @@
|
|
|
169
170
|
email: '',
|
|
170
171
|
auth_group: 0,
|
|
171
172
|
files_group: 0,
|
|
172
|
-
acc_role: ''
|
|
173
|
+
acc_role: '',
|
|
174
|
+
silently: false
|
|
173
175
|
}
|
|
174
176
|
|
|
175
177
|
let name_input;
|
|
@@ -271,12 +273,14 @@
|
|
|
271
273
|
return false;
|
|
272
274
|
}
|
|
273
275
|
|
|
276
|
+
let inviteUserIdempotencyToken = ''
|
|
274
277
|
function create_new_user()
|
|
275
278
|
{
|
|
276
279
|
if(showAccessRoles && access_roles.length > 0)
|
|
277
280
|
new_user.acc_role = access_roles[0].name ?? ""
|
|
278
281
|
|
|
279
282
|
create_new_user_enabled = true;
|
|
283
|
+
inviteUserIdempotencyToken = randomString(8);
|
|
280
284
|
|
|
281
285
|
}
|
|
282
286
|
|
|
@@ -336,7 +340,13 @@
|
|
|
336
340
|
let operations = [];
|
|
337
341
|
|
|
338
342
|
if(user.removed)
|
|
339
|
-
return [
|
|
343
|
+
return [
|
|
344
|
+
{
|
|
345
|
+
icon: FaUserPlus,
|
|
346
|
+
caption: '',
|
|
347
|
+
action: (f) => askToAddAgain(user),
|
|
348
|
+
}
|
|
349
|
+
];
|
|
340
350
|
|
|
341
351
|
let edit_operations = get_edit_operations(user)
|
|
342
352
|
if(edit_operations.length == 1)
|
|
@@ -494,6 +504,8 @@
|
|
|
494
504
|
client_id: $session.configuration.client_id,
|
|
495
505
|
redirect_uri: `${window.location.origin}/#/auth/cb`,
|
|
496
506
|
state: `${window.location.origin}/#/auth/signin`,
|
|
507
|
+
idempotency_token: inviteUserIdempotencyToken,
|
|
508
|
+
silently: new_user.silently ?? false,
|
|
497
509
|
set:
|
|
498
510
|
{
|
|
499
511
|
[nameAttrib]: new_user.name,
|
|
@@ -545,6 +557,7 @@
|
|
|
545
557
|
new_user.auth_group = 0;
|
|
546
558
|
new_user.files_group = 0;
|
|
547
559
|
new_user.acc_role = ''
|
|
560
|
+
new_user.silently = false;
|
|
548
561
|
|
|
549
562
|
create_new_user_enabled = false;
|
|
550
563
|
}
|
|
@@ -556,15 +569,18 @@
|
|
|
556
569
|
new_user.auth_group = 0;
|
|
557
570
|
new_user.files_group = 0;
|
|
558
571
|
new_user.acc_role = ''
|
|
572
|
+
new_user.silently = false;
|
|
559
573
|
|
|
560
574
|
create_new_user_enabled = false;
|
|
561
575
|
}
|
|
562
576
|
|
|
563
577
|
let removeModal;
|
|
564
578
|
let userToRemove;
|
|
579
|
+
let removeUserIdempotencyToken = ''
|
|
565
580
|
function askToRemove(user)
|
|
566
581
|
{
|
|
567
582
|
userToRemove = user;
|
|
583
|
+
removeUserIdempotencyToken = randomString(8);
|
|
568
584
|
removeModal.show()
|
|
569
585
|
}
|
|
570
586
|
|
|
@@ -576,7 +592,7 @@
|
|
|
576
592
|
let email = userToRemove[emailAttrib];
|
|
577
593
|
try{
|
|
578
594
|
|
|
579
|
-
const res = await reef.fetch(
|
|
595
|
+
const res = await reef.fetch(`/json/anyv/sys/kick_out_user?email=${email}&idempotency_token=${removeUserIdempotencyToken}`)
|
|
580
596
|
removeModal.hide();
|
|
581
597
|
|
|
582
598
|
if(res.ok)
|
|
@@ -599,9 +615,11 @@
|
|
|
599
615
|
}
|
|
600
616
|
|
|
601
617
|
let deleteAccountModal;
|
|
618
|
+
let deleteAccountIdempotencyToken = ''
|
|
602
619
|
function askToDeleteApplicationAccount()
|
|
603
620
|
{
|
|
604
621
|
deleteAccountModal.show()
|
|
622
|
+
deleteAccountIdempotencyToken = randomString(8)
|
|
605
623
|
}
|
|
606
624
|
|
|
607
625
|
async function deleteApplicationAccount()
|
|
@@ -612,7 +630,7 @@
|
|
|
612
630
|
|
|
613
631
|
try{
|
|
614
632
|
|
|
615
|
-
const res = await reef.fetch(`json/anyv/sys/unregister_user?email=${my_email}`)
|
|
633
|
+
const res = await reef.fetch(`json/anyv/sys/unregister_user?email=${my_email}&idempotency_token=${deleteAccountIdempotencyToken}`)
|
|
616
634
|
deleteAccountModal.hide();
|
|
617
635
|
|
|
618
636
|
if(res.ok)
|
|
@@ -634,6 +652,20 @@
|
|
|
634
652
|
onErrorShowAlert(err);
|
|
635
653
|
}
|
|
636
654
|
}
|
|
655
|
+
|
|
656
|
+
function askToAddAgain(user)
|
|
657
|
+
{
|
|
658
|
+
new_user.email = user[emailAttrib];
|
|
659
|
+
new_user.name = user[nameAttrib];
|
|
660
|
+
new_user.silently = true;
|
|
661
|
+
|
|
662
|
+
//name_input?.setReadonly(true)
|
|
663
|
+
//email_input?.setReadonly(true)
|
|
664
|
+
|
|
665
|
+
create_new_user();
|
|
666
|
+
}
|
|
667
|
+
|
|
668
|
+
|
|
637
669
|
|
|
638
670
|
</script>
|
|
639
671
|
|
|
@@ -697,13 +729,15 @@
|
|
|
697
729
|
self={new_user}
|
|
698
730
|
a="email"
|
|
699
731
|
validation={is_valid_email_address}
|
|
700
|
-
bind:this={email_input}
|
|
732
|
+
bind:this={email_input}
|
|
733
|
+
readonly={new_user.silently}/>
|
|
701
734
|
|
|
702
735
|
<Input label='Name'
|
|
703
736
|
placeholder='Optional'
|
|
704
737
|
self={new_user}
|
|
705
738
|
a="name"
|
|
706
|
-
bind:this={name_input}
|
|
739
|
+
bind:this={name_input}
|
|
740
|
+
readonly={new_user.silently}/>
|
|
707
741
|
|
|
708
742
|
<!--Checkbox class="mt-2 text-xs font-normal" self={new_user} a="maintainer">
|
|
709
743
|
<div class="flex flex-row items-center">
|