sveltacular 0.0.24 → 0.0.27
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/dist/forms/list-box/list-box.svelte +11 -7
- package/dist/forms/number-box/number-box.svelte +43 -35
- package/dist/forms/number-box/number-box.svelte.d.ts +2 -2
- package/dist/forms/text-box/text-box.svelte +70 -30
- package/dist/forms/text-box/text-box.svelte.d.ts +6 -1
- package/dist/navigation/breadcrumbs/breadcrumbs.svelte +18 -23
- package/dist/navigation/breadcrumbs/breadcrumbs.svelte.d.ts +1 -0
- package/package.json +1 -1
|
@@ -31,9 +31,11 @@ const focusOnInput = () => {
|
|
|
31
31
|
if (browser)
|
|
32
32
|
document.getElementById(id)?.focus();
|
|
33
33
|
};
|
|
34
|
-
const toggle = () =>
|
|
35
|
-
|
|
36
|
-
|
|
34
|
+
const toggle = () => open = !open;
|
|
35
|
+
const clickArrow = () => {
|
|
36
|
+
toggle();
|
|
37
|
+
if (open)
|
|
38
|
+
focusOnInput();
|
|
37
39
|
};
|
|
38
40
|
const onInputKeyPress = (e) => {
|
|
39
41
|
if (e.key == "Escape") {
|
|
@@ -65,7 +67,7 @@ const onInputKeyPress = (e) => {
|
|
|
65
67
|
}
|
|
66
68
|
};
|
|
67
69
|
const triggerSearch = debounce(async () => {
|
|
68
|
-
if (search) {
|
|
70
|
+
if (search && searchable) {
|
|
69
71
|
items = await search(text);
|
|
70
72
|
}
|
|
71
73
|
updateText();
|
|
@@ -73,7 +75,7 @@ const triggerSearch = debounce(async () => {
|
|
|
73
75
|
}, 300);
|
|
74
76
|
const applyFilter = () => {
|
|
75
77
|
const searchText = text.trim().toLowerCase();
|
|
76
|
-
filteredItems = searchText ? items.map((item, index) => ({ ...item, index })).filter((item) => item.name.toLowerCase().includes(searchText)) : items.map((item, index) => ({ ...item, index }));
|
|
78
|
+
filteredItems = searchText && searchable ? items.map((item, index) => ({ ...item, index })).filter((item) => item.name.toLowerCase().includes(searchText)) : items.map((item, index) => ({ ...item, index }));
|
|
77
79
|
};
|
|
78
80
|
const clear = () => {
|
|
79
81
|
text = "";
|
|
@@ -108,10 +110,12 @@ triggerSearch();
|
|
|
108
110
|
data-value={value}
|
|
109
111
|
data-text={text}
|
|
110
112
|
/>
|
|
111
|
-
<button type="button" class="icon" on:click={
|
|
113
|
+
<button type="button" class="icon" on:click={clickArrow} on:keydown={clickArrow}>
|
|
112
114
|
<AngleUpIcon />
|
|
113
115
|
</button>
|
|
114
|
-
|
|
116
|
+
{#if text}
|
|
117
|
+
<button type="button" class="clear" on:click={clear} on:keydown={clear}> X </button>
|
|
118
|
+
{/if}
|
|
115
119
|
<div class="dropdown">
|
|
116
120
|
<Menu
|
|
117
121
|
items={filteredItems}
|
|
@@ -11,10 +11,8 @@ export let step = 1;
|
|
|
11
11
|
export let min = 0;
|
|
12
12
|
export let max = 1e6;
|
|
13
13
|
export let decimals = 0;
|
|
14
|
-
export let
|
|
15
|
-
export let
|
|
16
|
-
$:
|
|
17
|
-
hasSymbol = symbol !== null;
|
|
14
|
+
export let prefix = null;
|
|
15
|
+
export let suffix = null;
|
|
18
16
|
const valueChanged = () => {
|
|
19
17
|
value = roundToDecimals(value, decimals);
|
|
20
18
|
};
|
|
@@ -24,7 +22,11 @@ const valueChanged = () => {
|
|
|
24
22
|
{#if $$slots.default}
|
|
25
23
|
<FormLabel {id}><slot /></FormLabel>
|
|
26
24
|
{/if}
|
|
27
|
-
<div class={type}
|
|
25
|
+
<div class="input {type}">
|
|
26
|
+
{#if prefix}
|
|
27
|
+
<span class="prefix">{prefix}</span>
|
|
28
|
+
{/if}
|
|
29
|
+
|
|
28
30
|
<input
|
|
29
31
|
{id}
|
|
30
32
|
{placeholder}
|
|
@@ -35,49 +37,55 @@ const valueChanged = () => {
|
|
|
35
37
|
{max}
|
|
36
38
|
on:change={valueChanged}
|
|
37
39
|
/>
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
{#if units}
|
|
42
|
-
<span class="units">{units}</span>
|
|
40
|
+
|
|
41
|
+
{#if suffix}
|
|
42
|
+
<span class="suffix">{suffix}</span>
|
|
43
43
|
{/if}
|
|
44
44
|
</div>
|
|
45
45
|
</FormField>
|
|
46
46
|
|
|
47
|
-
<style
|
|
47
|
+
<style>.input {
|
|
48
|
+
display: flex;
|
|
49
|
+
align-items: center;
|
|
50
|
+
justify-content: flex-start;
|
|
48
51
|
position: relative;
|
|
49
|
-
}
|
|
50
|
-
div .symbol {
|
|
51
|
-
position: absolute;
|
|
52
|
-
top: 0.32rem;
|
|
53
|
-
left: 0.5rem;
|
|
54
|
-
color: var(--form-input-fg, black);
|
|
55
|
-
font-size: 1.125rem;
|
|
56
|
-
line-height: 1.75rem;
|
|
57
|
-
}
|
|
58
|
-
div .units {
|
|
59
|
-
position: absolute;
|
|
60
|
-
top: 0.32rem;
|
|
61
|
-
right: 2.5rem;
|
|
62
|
-
color: var(--form-input-fg, black);
|
|
63
|
-
font-size: 1rem;
|
|
64
|
-
line-height: 1.75rem;
|
|
65
|
-
text-align: right;
|
|
66
|
-
}
|
|
67
|
-
div input {
|
|
68
52
|
width: 100%;
|
|
69
|
-
|
|
53
|
+
height: 100%;
|
|
70
54
|
border-radius: 0.25rem;
|
|
71
55
|
border: 1px solid var(--form-input-border, black);
|
|
72
56
|
background-color: var(--form-input-bg, white);
|
|
73
57
|
color: var(--form-input-fg, black);
|
|
74
|
-
font-size:
|
|
58
|
+
font-size: 1rem;
|
|
75
59
|
font-weight: 500;
|
|
76
|
-
line-height:
|
|
60
|
+
line-height: 2rem;
|
|
77
61
|
transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, fill 0.2s ease-in-out, stroke 0.2s ease-in-out;
|
|
78
62
|
user-select: none;
|
|
79
63
|
white-space: nowrap;
|
|
80
64
|
}
|
|
81
|
-
|
|
82
|
-
|
|
65
|
+
.input input {
|
|
66
|
+
background-color: transparent;
|
|
67
|
+
border: none;
|
|
68
|
+
line-height: 2rem;
|
|
69
|
+
font-size: 1rem;
|
|
70
|
+
width: 100%;
|
|
71
|
+
flex-grow: 1;
|
|
72
|
+
padding-left: 1rem;
|
|
73
|
+
}
|
|
74
|
+
.input input:focus {
|
|
75
|
+
outline: none;
|
|
76
|
+
}
|
|
77
|
+
.input .prefix,
|
|
78
|
+
.input .suffix {
|
|
79
|
+
font-size: 1rem;
|
|
80
|
+
line-height: 2rem;
|
|
81
|
+
padding-left: 1rem;
|
|
82
|
+
padding-right: 1rem;
|
|
83
|
+
background-color: var(--base-accent-bg, #ccc);
|
|
84
|
+
color: var(--base-accent-fg, black);
|
|
85
|
+
}
|
|
86
|
+
.input .prefix {
|
|
87
|
+
border-right: 1px solid var(--form-input-border, black);
|
|
88
|
+
}
|
|
89
|
+
.input .suffix {
|
|
90
|
+
border-left: 1px solid var(--form-input-border, black);
|
|
83
91
|
}</style>
|
|
@@ -10,8 +10,8 @@ declare const __propDef: {
|
|
|
10
10
|
min?: number | undefined;
|
|
11
11
|
max?: number | undefined;
|
|
12
12
|
decimals?: number | undefined;
|
|
13
|
-
|
|
14
|
-
|
|
13
|
+
prefix?: string | null | undefined;
|
|
14
|
+
suffix?: string | null | undefined;
|
|
15
15
|
};
|
|
16
16
|
events: {
|
|
17
17
|
[evt: string]: CustomEvent<any>;
|
|
@@ -13,14 +13,40 @@ export let readonly = false;
|
|
|
13
13
|
export let maxlength = void 0;
|
|
14
14
|
export let minlength = void 0;
|
|
15
15
|
export let pattern = void 0;
|
|
16
|
-
export let
|
|
16
|
+
export let prefix = void 0;
|
|
17
|
+
export let suffix = void 0;
|
|
18
|
+
export let allowSpaces = true;
|
|
19
|
+
export let allowNumbers = true;
|
|
20
|
+
export let allowLetters = true;
|
|
21
|
+
export let textCase = void 0;
|
|
22
|
+
const onKeyPress = (e) => {
|
|
23
|
+
if (!allowSpaces && e.key === " ") {
|
|
24
|
+
e.preventDefault();
|
|
25
|
+
}
|
|
26
|
+
if (!allowNumbers && !isNaN(Number(e.key))) {
|
|
27
|
+
e.preventDefault();
|
|
28
|
+
}
|
|
29
|
+
if (!allowLetters && /^[a-zA-Z]$/.test(e.key)) {
|
|
30
|
+
e.preventDefault();
|
|
31
|
+
}
|
|
32
|
+
};
|
|
33
|
+
const onInput = (e) => {
|
|
34
|
+
if (textCase === "lower") {
|
|
35
|
+
value = value.toLowerCase();
|
|
36
|
+
} else if (textCase === "upper") {
|
|
37
|
+
value = value.toUpperCase();
|
|
38
|
+
}
|
|
39
|
+
};
|
|
17
40
|
</script>
|
|
18
41
|
|
|
19
42
|
<FormField {size}>
|
|
20
43
|
{#if $$slots.default}
|
|
21
44
|
<FormLabel {id} {required}><slot /></FormLabel>
|
|
22
45
|
{/if}
|
|
23
|
-
<div>
|
|
46
|
+
<div class="input">
|
|
47
|
+
{#if prefix}
|
|
48
|
+
<div class="prefix">{prefix}</div>
|
|
49
|
+
{/if}
|
|
24
50
|
<input
|
|
25
51
|
{id}
|
|
26
52
|
{placeholder}
|
|
@@ -32,52 +58,66 @@ export let units = void 0;
|
|
|
32
58
|
{maxlength}
|
|
33
59
|
{minlength}
|
|
34
60
|
{pattern}
|
|
61
|
+
on:keypress={onKeyPress}
|
|
62
|
+
on:input={onInput}
|
|
35
63
|
/>
|
|
36
|
-
{#if
|
|
37
|
-
<div class="
|
|
38
|
-
{/if}
|
|
39
|
-
{#if units}
|
|
40
|
-
<div class="units">{units}</div>
|
|
64
|
+
{#if suffix}
|
|
65
|
+
<div class="suffix">{suffix}</div>
|
|
41
66
|
{/if}
|
|
42
67
|
</div>
|
|
68
|
+
{#if helperText}
|
|
69
|
+
<div class="helper-text">{helperText}</div>
|
|
70
|
+
{/if}
|
|
43
71
|
</FormField>
|
|
44
72
|
|
|
45
|
-
<style
|
|
73
|
+
<style>.input {
|
|
74
|
+
display: flex;
|
|
75
|
+
align-items: center;
|
|
76
|
+
justify-content: flex-start;
|
|
46
77
|
position: relative;
|
|
47
|
-
}
|
|
48
|
-
div input {
|
|
49
78
|
width: 100%;
|
|
50
|
-
|
|
79
|
+
height: 100%;
|
|
51
80
|
border-radius: 0.25rem;
|
|
52
81
|
border: 1px solid var(--form-input-border, black);
|
|
53
82
|
background-color: var(--form-input-bg, white);
|
|
54
83
|
color: var(--form-input-fg, black);
|
|
55
|
-
font-size:
|
|
84
|
+
font-size: 1rem;
|
|
56
85
|
font-weight: 500;
|
|
57
|
-
line-height:
|
|
86
|
+
line-height: 2rem;
|
|
58
87
|
transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, fill 0.2s ease-in-out, stroke 0.2s ease-in-out;
|
|
59
88
|
user-select: none;
|
|
60
89
|
white-space: nowrap;
|
|
61
90
|
}
|
|
62
|
-
|
|
63
|
-
color:
|
|
64
|
-
|
|
91
|
+
.input input {
|
|
92
|
+
background-color: transparent;
|
|
93
|
+
border: none;
|
|
94
|
+
line-height: 2rem;
|
|
95
|
+
font-size: 1rem;
|
|
96
|
+
width: 100%;
|
|
97
|
+
flex-grow: 1;
|
|
98
|
+
padding-left: 1rem;
|
|
65
99
|
}
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
100
|
+
.input input:focus {
|
|
101
|
+
outline: none;
|
|
102
|
+
}
|
|
103
|
+
.input .prefix,
|
|
104
|
+
.input .suffix {
|
|
71
105
|
font-size: 1rem;
|
|
72
|
-
line-height:
|
|
73
|
-
|
|
106
|
+
line-height: 2rem;
|
|
107
|
+
padding-left: 1rem;
|
|
108
|
+
padding-right: 1rem;
|
|
109
|
+
background-color: var(--base-accent-bg, #ccc);
|
|
110
|
+
color: var(--base-accent-fg, black);
|
|
74
111
|
}
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
112
|
+
.input .prefix {
|
|
113
|
+
border-right: 1px solid var(--form-input-border, black);
|
|
114
|
+
}
|
|
115
|
+
.input .suffix {
|
|
116
|
+
border-left: 1px solid var(--form-input-border, black);
|
|
80
117
|
}
|
|
81
|
-
|
|
82
|
-
|
|
118
|
+
|
|
119
|
+
.helper-text {
|
|
120
|
+
font-size: 0.75rem;
|
|
121
|
+
line-height: 1.25rem;
|
|
122
|
+
padding: 0.25rem;
|
|
83
123
|
}</style>
|
|
@@ -13,7 +13,12 @@ declare const __propDef: {
|
|
|
13
13
|
maxlength?: number | undefined;
|
|
14
14
|
minlength?: number | undefined;
|
|
15
15
|
pattern?: string | undefined;
|
|
16
|
-
|
|
16
|
+
prefix?: string | undefined;
|
|
17
|
+
suffix?: string | undefined;
|
|
18
|
+
allowSpaces?: boolean | undefined;
|
|
19
|
+
allowNumbers?: boolean | undefined;
|
|
20
|
+
allowLetters?: boolean | undefined;
|
|
21
|
+
textCase?: 'lower' | 'upper' | undefined;
|
|
17
22
|
};
|
|
18
23
|
events: {
|
|
19
24
|
[evt: string]: CustomEvent<any>;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
<script>import
|
|
2
|
-
import HomeIcon from "../../icons/home-icon.svelte";
|
|
1
|
+
<script>import HomeIcon from "../../icons/home-icon.svelte";
|
|
3
2
|
export let homeUrl = null;
|
|
4
3
|
export let crumbs = [];
|
|
5
4
|
export let size = "md";
|
|
5
|
+
export let separator = "/";
|
|
6
6
|
const getCrumLabel = (crumb) => {
|
|
7
7
|
if (typeof crumb === "string")
|
|
8
8
|
return crumb;
|
|
@@ -12,8 +12,8 @@ const getCrumLabel = (crumb) => {
|
|
|
12
12
|
|
|
13
13
|
<nav class={size}>
|
|
14
14
|
{#if homeUrl}
|
|
15
|
-
<li class="
|
|
16
|
-
<a href={homeUrl}
|
|
15
|
+
<li class="home">
|
|
16
|
+
<a href={homeUrl}><HomeIcon /></a>
|
|
17
17
|
</li>
|
|
18
18
|
{/if}
|
|
19
19
|
{#each crumbs as crumb, i}
|
|
@@ -27,9 +27,7 @@ const getCrumLabel = (crumb) => {
|
|
|
27
27
|
</li>
|
|
28
28
|
{/if}
|
|
29
29
|
{#if i < crumbs.length - 1}
|
|
30
|
-
<li class="
|
|
31
|
-
<AngleRightIcon />
|
|
32
|
-
</li>
|
|
30
|
+
<li class="separator">{separator}</li>
|
|
33
31
|
{/if}
|
|
34
32
|
{/each}
|
|
35
33
|
</nav>
|
|
@@ -38,44 +36,41 @@ const getCrumLabel = (crumb) => {
|
|
|
38
36
|
display: flex;
|
|
39
37
|
align-items: center;
|
|
40
38
|
list-style: none;
|
|
39
|
+
gap: 0.5rem;
|
|
41
40
|
padding: 0;
|
|
42
41
|
margin: 0;
|
|
43
42
|
line-height: 1.5rem;
|
|
44
43
|
font-family: var(--breadcrumbs-font-family, sans-serif);
|
|
45
44
|
}
|
|
46
45
|
nav li {
|
|
47
|
-
display: flex;
|
|
48
|
-
align-items: center;
|
|
49
|
-
vertical-align: middle;
|
|
50
|
-
margin-left: 0.5rem;
|
|
51
46
|
color: var(--breadcrumbs-fg, #333);
|
|
47
|
+
padding: 0;
|
|
48
|
+
margin: 0;
|
|
52
49
|
}
|
|
53
50
|
nav li a {
|
|
54
51
|
color: var(--breadcrumbs-link-fg, #333);
|
|
55
52
|
text-decoration: none;
|
|
53
|
+
width: 100%;
|
|
56
54
|
}
|
|
57
55
|
nav li a:hover {
|
|
58
56
|
color: var(--breadcrumbs-link-hover-fg, black);
|
|
59
57
|
text-decoration: underline;
|
|
60
58
|
}
|
|
61
|
-
nav li a.home {
|
|
62
|
-
width: 100%;
|
|
63
|
-
}
|
|
64
|
-
nav li:first-child {
|
|
65
|
-
margin-left: 0;
|
|
66
|
-
}
|
|
67
|
-
nav li.icon {
|
|
68
|
-
padding-top: 2px;
|
|
69
|
-
}
|
|
70
59
|
nav.sm li {
|
|
71
60
|
font-size: 0.75rem;
|
|
72
|
-
|
|
61
|
+
}
|
|
62
|
+
nav.sm li.home {
|
|
63
|
+
width: 12px;
|
|
73
64
|
}
|
|
74
65
|
nav.md li {
|
|
75
66
|
font-size: 0.875rem;
|
|
76
|
-
|
|
67
|
+
}
|
|
68
|
+
nav.md li.home {
|
|
69
|
+
width: 14px;
|
|
77
70
|
}
|
|
78
71
|
nav.lg li {
|
|
79
72
|
font-size: 1rem;
|
|
80
|
-
|
|
73
|
+
}
|
|
74
|
+
nav.lg li.home {
|
|
75
|
+
width: 16px;
|
|
81
76
|
}</style>
|