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