@humandialog/forms.svelte 1.3.9 → 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/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
|
@@ -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 {};
|
|
@@ -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",
|