sveltacular 0.0.23 → 0.0.26
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 +9 -8
- 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/modals/prompt.svelte +0 -1
- 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") {
|
|
@@ -67,11 +69,9 @@ const onInputKeyPress = (e) => {
|
|
|
67
69
|
const triggerSearch = debounce(async () => {
|
|
68
70
|
if (search) {
|
|
69
71
|
items = await search(text);
|
|
70
|
-
console.log(items);
|
|
71
72
|
}
|
|
72
73
|
updateText();
|
|
73
74
|
applyFilter();
|
|
74
|
-
open = true;
|
|
75
75
|
}, 300);
|
|
76
76
|
const applyFilter = () => {
|
|
77
77
|
const searchText = text.trim().toLowerCase();
|
|
@@ -88,7 +88,6 @@ const updateText = async () => {
|
|
|
88
88
|
const textBox = document.getElementById(id);
|
|
89
89
|
if (document.activeElement != textBox)
|
|
90
90
|
text = getText();
|
|
91
|
-
open = true;
|
|
92
91
|
}
|
|
93
92
|
};
|
|
94
93
|
triggerSearch();
|
|
@@ -111,10 +110,12 @@ triggerSearch();
|
|
|
111
110
|
data-value={value}
|
|
112
111
|
data-text={text}
|
|
113
112
|
/>
|
|
114
|
-
<button type="button" class="icon" on:click={
|
|
113
|
+
<button type="button" class="icon" on:click={clickArrow} on:keydown={clickArrow}>
|
|
115
114
|
<AngleUpIcon />
|
|
116
115
|
</button>
|
|
117
|
-
|
|
116
|
+
{#if text}
|
|
117
|
+
<button type="button" class="clear" on:click={clear} on:keydown={clear}> X </button>
|
|
118
|
+
{/if}
|
|
118
119
|
<div class="dropdown">
|
|
119
120
|
<Menu
|
|
120
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>;
|