@geoffcox/sterling-svelte 0.0.9 → 0.0.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/display/Label.svelte +27 -0
- package/display/Label.svelte.d.ts +20 -0
- package/display/Progress.svelte +141 -143
- package/index.d.ts +2 -1
- package/index.js +2 -1
- package/inputs/Checkbox.svelte +129 -125
- package/inputs/Input.svelte +108 -150
- package/inputs/Radio.svelte +129 -121
- package/inputs/Select.svelte +190 -195
- package/inputs/Slider.svelte +40 -74
- package/lists/List.svelte +143 -223
- package/package.json +3 -1
package/inputs/Input.svelte
CHANGED
|
@@ -1,169 +1,127 @@
|
|
|
1
|
-
<script>
|
|
1
|
+
<script>import { v4 as uuid } from "uuid";
|
|
2
|
+
import Label from "../display/Label.svelte";
|
|
3
|
+
export let value = "";
|
|
2
4
|
export let disabled = false;
|
|
5
|
+
const inputId = uuid();
|
|
3
6
|
</script>
|
|
4
7
|
|
|
5
8
|
<!--
|
|
6
9
|
@component
|
|
7
10
|
A styled HTML input element with optional label.
|
|
8
11
|
-->
|
|
9
|
-
|
|
10
|
-
{#if $$slots.label}
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
class="sterling-input"
|
|
51
|
-
bind:value
|
|
52
|
-
on:blur
|
|
53
|
-
on:click
|
|
54
|
-
on:change
|
|
55
|
-
on:copy
|
|
56
|
-
on:cut
|
|
57
|
-
on:paste
|
|
58
|
-
on:dblclick
|
|
59
|
-
on:focus
|
|
60
|
-
on:focusin
|
|
61
|
-
on:focusout
|
|
62
|
-
on:input
|
|
63
|
-
on:invalid
|
|
64
|
-
on:keydown
|
|
65
|
-
on:keypress
|
|
66
|
-
on:keyup
|
|
67
|
-
on:mousedown
|
|
68
|
-
on:mouseenter
|
|
69
|
-
on:mouseleave
|
|
70
|
-
on:mousemove
|
|
71
|
-
on:mouseover
|
|
72
|
-
on:mouseout
|
|
73
|
-
on:mouseup
|
|
74
|
-
on:select
|
|
75
|
-
on:submit
|
|
76
|
-
on:reset
|
|
77
|
-
on:wheel
|
|
78
|
-
{...$$restProps}
|
|
79
|
-
{disabled}
|
|
80
|
-
/>
|
|
81
|
-
{/if}
|
|
12
|
+
<div class="sterling-input">
|
|
13
|
+
{#if $$slots.label}
|
|
14
|
+
<div class="label">
|
|
15
|
+
<Label {disabled} for={inputId}>
|
|
16
|
+
<slot name="label" />
|
|
17
|
+
</Label>
|
|
18
|
+
</div>
|
|
19
|
+
{/if}
|
|
20
|
+
<input
|
|
21
|
+
bind:value
|
|
22
|
+
on:blur
|
|
23
|
+
on:click
|
|
24
|
+
on:change
|
|
25
|
+
on:copy
|
|
26
|
+
on:cut
|
|
27
|
+
on:paste
|
|
28
|
+
on:dblclick
|
|
29
|
+
on:focus
|
|
30
|
+
on:focusin
|
|
31
|
+
on:focusout
|
|
32
|
+
on:input
|
|
33
|
+
on:invalid
|
|
34
|
+
on:keydown
|
|
35
|
+
on:keypress
|
|
36
|
+
on:keyup
|
|
37
|
+
on:mousedown
|
|
38
|
+
on:mouseenter
|
|
39
|
+
on:mouseleave
|
|
40
|
+
on:mousemove
|
|
41
|
+
on:mouseover
|
|
42
|
+
on:mouseout
|
|
43
|
+
on:mouseup
|
|
44
|
+
on:select
|
|
45
|
+
on:submit
|
|
46
|
+
on:reset
|
|
47
|
+
on:wheel
|
|
48
|
+
{...$$restProps}
|
|
49
|
+
{disabled}
|
|
50
|
+
id={inputId}
|
|
51
|
+
/>
|
|
52
|
+
</div>
|
|
82
53
|
|
|
83
54
|
<style>
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
55
|
+
.sterling-input {
|
|
56
|
+
display: flex;
|
|
57
|
+
flex-direction: column;
|
|
58
|
+
background-color: var(--Input__background-color);
|
|
59
|
+
border-color: var(--Input__border-color);
|
|
60
|
+
border-radius: var(--Input__border-radius);
|
|
61
|
+
border-style: var(--Input__border-style);
|
|
62
|
+
border-width: var(--Input__border-width);
|
|
63
|
+
color: var(--Input__color);
|
|
64
|
+
font: inherit;
|
|
65
|
+
margin: 0;
|
|
66
|
+
transition: background-color 250ms, color 250ms, border-color 250ms;
|
|
67
|
+
}
|
|
88
68
|
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
}
|
|
69
|
+
.sterling-input:hover {
|
|
70
|
+
background-color: var(--Input__background-color--hover);
|
|
71
|
+
border-color: var(--Input__border-color--hover);
|
|
72
|
+
color: var(--Input__color--hover);
|
|
73
|
+
}
|
|
95
74
|
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
75
|
+
.sterling-input:focus-within {
|
|
76
|
+
background-color: var(--Input__background-color--focus);
|
|
77
|
+
border-color: var(--Input__border-color--focus);
|
|
78
|
+
color: var(--Input__color--focus);
|
|
79
|
+
outline-color: var(--Common__outline-color);
|
|
80
|
+
outline-offset: var(--Common__outline-offset);
|
|
81
|
+
outline-style: var(--Common__outline-style);
|
|
82
|
+
outline-width: var(--Common__outline-width);
|
|
83
|
+
}
|
|
99
84
|
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
border-width: var(--Input__border-width);
|
|
107
|
-
color: var(--Input__color);
|
|
108
|
-
font: inherit;
|
|
109
|
-
margin: 0;
|
|
110
|
-
transition: background-color 250ms, color 250ms, border-color 250ms;
|
|
111
|
-
}
|
|
85
|
+
.sterling-input:disabled {
|
|
86
|
+
background-color: var(--Input__background-color--disabled);
|
|
87
|
+
border-color: var(---Input__border-color--disabled);
|
|
88
|
+
color: var(--Input__color--disabled);
|
|
89
|
+
cursor: not-allowed;
|
|
90
|
+
}
|
|
112
91
|
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
}
|
|
92
|
+
.sterling-input input {
|
|
93
|
+
font: inherit;
|
|
94
|
+
color: inherit;
|
|
95
|
+
padding: 0.5em 0.5em;
|
|
96
|
+
}
|
|
119
97
|
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
outline-width: var(--Common__outline-width);
|
|
129
|
-
}
|
|
98
|
+
.sterling-input input,
|
|
99
|
+
.sterling-input input:hover,
|
|
100
|
+
.sterling-input input:focus-within,
|
|
101
|
+
.sterling-input input:disabled {
|
|
102
|
+
background-color: transparent;
|
|
103
|
+
border: none;
|
|
104
|
+
outline: none;
|
|
105
|
+
}
|
|
130
106
|
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
color: var(--Input__color--disabled);
|
|
136
|
-
cursor: not-allowed;
|
|
137
|
-
}
|
|
107
|
+
.sterling-input input::placeholder {
|
|
108
|
+
color: var(--Display__color--faint);
|
|
109
|
+
transition: background-color 250ms, color 250ms, border-color 250ms;
|
|
110
|
+
}
|
|
138
111
|
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
112
|
+
.sterling-input input:disabled::placeholder {
|
|
113
|
+
color: var(--Display__color--disabled);
|
|
114
|
+
}
|
|
142
115
|
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
background-color: transparent;
|
|
148
|
-
border: none;
|
|
149
|
-
outline: none;
|
|
150
|
-
}
|
|
116
|
+
.label {
|
|
117
|
+
font-size: 0.7em;
|
|
118
|
+
margin: 0.5em 0 0 0.7em;
|
|
119
|
+
}
|
|
151
120
|
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
color: var(--Display__color--disabled);
|
|
159
|
-
}
|
|
160
|
-
|
|
161
|
-
@media (prefers-reduced-motion) {
|
|
162
|
-
.sterling-input-label,
|
|
163
|
-
.sterling-input,
|
|
164
|
-
.label-content,
|
|
165
|
-
.sterling-input::placeholder {
|
|
166
|
-
transition: none;
|
|
167
|
-
}
|
|
168
|
-
}
|
|
121
|
+
@media (prefers-reduced-motion) {
|
|
122
|
+
.sterling-input,
|
|
123
|
+
.sterling-input input::placeholder {
|
|
124
|
+
transition: none;
|
|
125
|
+
}
|
|
126
|
+
}
|
|
169
127
|
</style>
|
package/inputs/Radio.svelte
CHANGED
|
@@ -1,7 +1,10 @@
|
|
|
1
1
|
<script>import { onMount } from "svelte";
|
|
2
|
+
import { v4 as uuid } from "uuid";
|
|
3
|
+
import Label from "../display/Label.svelte";
|
|
2
4
|
export let checked = false;
|
|
3
5
|
export let group = void 0;
|
|
4
6
|
export let disabled = false;
|
|
7
|
+
const inputId = uuid();
|
|
5
8
|
const onChange = (e) => {
|
|
6
9
|
if (e.currentTarget.checked) {
|
|
7
10
|
group = $$restProps.value;
|
|
@@ -26,148 +29,153 @@ $: {
|
|
|
26
29
|
A styled HTML input type=radio element with optional label.
|
|
27
30
|
-->
|
|
28
31
|
<!-- svelte-ignore a11y-label-has-associated-control -->
|
|
29
|
-
<
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
32
|
+
<div class="sterling-radio">
|
|
33
|
+
<div class="container">
|
|
34
|
+
<input
|
|
35
|
+
type="radio"
|
|
36
|
+
on:blur
|
|
37
|
+
on:click
|
|
38
|
+
on:change
|
|
39
|
+
on:change={onChange}
|
|
40
|
+
on:dblclick
|
|
41
|
+
on:focus
|
|
42
|
+
on:focusin
|
|
43
|
+
on:focusout
|
|
44
|
+
on:keydown
|
|
45
|
+
on:keypress
|
|
46
|
+
on:keyup
|
|
47
|
+
on:input
|
|
48
|
+
on:mousedown
|
|
49
|
+
on:mouseenter
|
|
50
|
+
on:mouseleave
|
|
51
|
+
on:mousemove
|
|
52
|
+
on:mouseover
|
|
53
|
+
on:mouseout
|
|
54
|
+
on:mouseup
|
|
55
|
+
on:toggle
|
|
56
|
+
on:wheel
|
|
57
|
+
checked={group === $$restProps.value}
|
|
58
|
+
{...$$restProps}
|
|
59
|
+
{disabled}
|
|
60
|
+
id={inputId}
|
|
61
|
+
/>
|
|
62
|
+
<div class="indicator" />
|
|
63
|
+
</div>
|
|
64
|
+
{#if $$slots.label}
|
|
65
|
+
<div class="label">
|
|
66
|
+
<Label {disabled} for={inputId}>
|
|
67
|
+
<slot name="label" />
|
|
68
|
+
</Label>
|
|
69
|
+
</div>
|
|
70
|
+
{/if}
|
|
71
|
+
</div>
|
|
64
72
|
|
|
65
73
|
<style>
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
74
|
+
.sterling-radio {
|
|
75
|
+
display: inline-flex;
|
|
76
|
+
align-content: stretch;
|
|
77
|
+
align-items: stretch;
|
|
78
|
+
box-sizing: border-box;
|
|
79
|
+
font: inherit;
|
|
80
|
+
gap: 0.4em;
|
|
81
|
+
outline: none;
|
|
82
|
+
padding: 0;
|
|
83
|
+
margin: 0;
|
|
84
|
+
}
|
|
85
|
+
/*
|
|
76
86
|
The container
|
|
77
87
|
- allows the input to be hidden
|
|
78
88
|
- avoids input participating in layout
|
|
79
89
|
- prevents collisions with surrounding slots
|
|
80
90
|
*/
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
91
|
+
.container {
|
|
92
|
+
box-sizing: border-box;
|
|
93
|
+
position: relative;
|
|
94
|
+
font: inherit;
|
|
95
|
+
display: flex;
|
|
96
|
+
align-items: center;
|
|
97
|
+
}
|
|
88
98
|
|
|
89
|
-
|
|
99
|
+
/*
|
|
90
100
|
The input is hidden since the built-in browser radio cannot be customized
|
|
91
101
|
*/
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
102
|
+
input {
|
|
103
|
+
font: inherit;
|
|
104
|
+
margin: 0;
|
|
105
|
+
padding: 0;
|
|
106
|
+
position: absolute;
|
|
107
|
+
opacity: 0;
|
|
108
|
+
height: 21px;
|
|
109
|
+
width: 21px;
|
|
110
|
+
}
|
|
99
111
|
|
|
100
|
-
|
|
112
|
+
/*
|
|
101
113
|
The indicator handles both the radio box and circle mark.
|
|
102
114
|
The box cannot be on the container since the adjacent sibling selector is needed
|
|
103
115
|
and there is not a parent CSS selector.
|
|
104
116
|
*/
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
input:checked + .indicator {
|
|
120
|
-
background-color: var(--Input__background-color);
|
|
121
|
-
border-color: var(--Input__border-color);
|
|
122
|
-
}
|
|
117
|
+
.indicator {
|
|
118
|
+
background-color: var(--Input__background-color);
|
|
119
|
+
border-color: var(--Input__border-color);
|
|
120
|
+
border-style: var(--Input__border-style);
|
|
121
|
+
border-width: var(--Input__border-width);
|
|
122
|
+
border-radius: 10000px;
|
|
123
|
+
box-sizing: border-box;
|
|
124
|
+
display: inline-block;
|
|
125
|
+
height: 21px;
|
|
126
|
+
position: relative;
|
|
127
|
+
pointer-events: none;
|
|
128
|
+
transition: background-color 250ms, color 250ms, border-color 250ms;
|
|
129
|
+
width: 21px;
|
|
130
|
+
}
|
|
123
131
|
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
outline-width: var(--Common__outline-width);
|
|
129
|
-
}
|
|
132
|
+
input:checked + .indicator {
|
|
133
|
+
background-color: var(--Input__background-color);
|
|
134
|
+
border-color: var(--Input__border-color);
|
|
135
|
+
}
|
|
130
136
|
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
137
|
+
input:focus-visible + .indicator {
|
|
138
|
+
outline-color: var(--Common__outline-color);
|
|
139
|
+
outline-offset: var(--Common__outline-offset);
|
|
140
|
+
outline-style: var(--Common__outline-style);
|
|
141
|
+
outline-width: var(--Common__outline-width);
|
|
142
|
+
}
|
|
135
143
|
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
height: 9px;
|
|
141
|
-
left: 50%;
|
|
142
|
-
position: absolute;
|
|
143
|
-
top: 50%;
|
|
144
|
-
transform: translate(-50%, -50%);
|
|
145
|
-
transition: background-color 250ms;
|
|
146
|
-
width: 9px;
|
|
147
|
-
}
|
|
144
|
+
input:disabled + .indicator {
|
|
145
|
+
background-color: var(--Input__background-color--disabled);
|
|
146
|
+
border-color: var(--Input__border-color--disabled);
|
|
147
|
+
}
|
|
148
148
|
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
149
|
+
.indicator::after {
|
|
150
|
+
background-color: transparent;
|
|
151
|
+
border-radius: 10000px;
|
|
152
|
+
content: '';
|
|
153
|
+
height: 9px;
|
|
154
|
+
left: 50%;
|
|
155
|
+
position: absolute;
|
|
156
|
+
top: 50%;
|
|
157
|
+
transform: translate(-50%, -50%);
|
|
158
|
+
transition: background-color 250ms;
|
|
159
|
+
width: 9px;
|
|
160
|
+
}
|
|
152
161
|
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
162
|
+
input:checked + .indicator::after {
|
|
163
|
+
background-color: var(--Input__color);
|
|
164
|
+
}
|
|
156
165
|
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
}
|
|
166
|
+
input:checked:disabled + .indicator::after {
|
|
167
|
+
background-color: var(--Input__color--disabled);
|
|
168
|
+
}
|
|
161
169
|
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
170
|
+
.label {
|
|
171
|
+
user-select: none;
|
|
172
|
+
margin-top: 0.25em;
|
|
173
|
+
}
|
|
165
174
|
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
}
|
|
175
|
+
@media (prefers-reduced-motion) {
|
|
176
|
+
.indicator,
|
|
177
|
+
.indicator::after {
|
|
178
|
+
transition: none;
|
|
179
|
+
}
|
|
180
|
+
}
|
|
173
181
|
</style>
|