@geoffcox/sterling-svelte 0.0.10 → 0.0.12
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/index.d.ts +2 -1
- package/index.js +2 -1
- package/inputs/Checkbox.svelte +0 -1
- package/inputs/Radio.svelte +0 -1
- package/inputs/Switch.svelte +219 -0
- package/inputs/Switch.svelte.d.ts +58 -0
- package/lists/List.svelte +8 -4
- package/package.json +18 -1
package/README.md
CHANGED
|
@@ -12,3 +12,7 @@ npm install @geoffcox/sterling-svelte
|
|
|
12
12
|
|
|
13
13
|
The project builds the documentation for the library as a SvelteKit application.
|
|
14
14
|
See the published version of the [documentation](https://geoffcox.github.io/demos/sterling-svelte/).
|
|
15
|
+
|
|
16
|
+
## Repository
|
|
17
|
+
|
|
18
|
+
https://github.com/GeoffCox/sterling-svelte
|
package/index.d.ts
CHANGED
|
@@ -19,4 +19,5 @@ import Progress from './display/Progress.svelte';
|
|
|
19
19
|
import Radio from './inputs/Radio.svelte';
|
|
20
20
|
import Select from './inputs/Select.svelte';
|
|
21
21
|
import Slider from './inputs/Slider.svelte';
|
|
22
|
-
|
|
22
|
+
import Switch from './inputs/Switch.svelte';
|
|
23
|
+
export { Button, Checkbox, Dialog, Input, Label, List, Progress, Radio, Select, Slider, Switch };
|
package/index.js
CHANGED
|
@@ -19,4 +19,5 @@ import Progress from './display/Progress.svelte';
|
|
|
19
19
|
import Radio from './inputs/Radio.svelte';
|
|
20
20
|
import Select from './inputs/Select.svelte';
|
|
21
21
|
import Slider from './inputs/Slider.svelte';
|
|
22
|
-
|
|
22
|
+
import Switch from './inputs/Switch.svelte';
|
|
23
|
+
export { Button, Checkbox, Dialog, Input, Label, List, Progress, Radio, Select, Slider, Switch };
|
package/inputs/Checkbox.svelte
CHANGED
package/inputs/Radio.svelte
CHANGED
|
@@ -0,0 +1,219 @@
|
|
|
1
|
+
<script>import { v4 as uuid } from "uuid";
|
|
2
|
+
import Label from "../display/Label.svelte";
|
|
3
|
+
export let checked = false;
|
|
4
|
+
export let disabled = false;
|
|
5
|
+
export let vertical = false;
|
|
6
|
+
export let onText = "";
|
|
7
|
+
export let offText = "";
|
|
8
|
+
const inputId = uuid();
|
|
9
|
+
let switchWidth = 0;
|
|
10
|
+
let switchHeight = 0;
|
|
11
|
+
let thumbWidth = 0;
|
|
12
|
+
let thumbHeight = 0;
|
|
13
|
+
$:
|
|
14
|
+
switchSize = vertical ? switchHeight : switchWidth;
|
|
15
|
+
$:
|
|
16
|
+
thumbSize = vertical ? thumbHeight : thumbWidth;
|
|
17
|
+
$:
|
|
18
|
+
ratio = vertical ? checked ? 0 : 1 : checked ? 1 : 0;
|
|
19
|
+
$:
|
|
20
|
+
valueOffset = (switchSize - thumbSize) * ratio;
|
|
21
|
+
</script>
|
|
22
|
+
|
|
23
|
+
<!--
|
|
24
|
+
@component
|
|
25
|
+
A styled HTML input type=checkbox element.
|
|
26
|
+
-->
|
|
27
|
+
<div class="sterling-switch" class:vertical class:disabled>
|
|
28
|
+
<input
|
|
29
|
+
type="checkbox"
|
|
30
|
+
on:blur
|
|
31
|
+
on:click
|
|
32
|
+
on:change
|
|
33
|
+
on:dblclick
|
|
34
|
+
on:focus
|
|
35
|
+
on:focusin
|
|
36
|
+
on:focusout
|
|
37
|
+
on:keydown
|
|
38
|
+
on:keypress
|
|
39
|
+
on:keyup
|
|
40
|
+
on:input
|
|
41
|
+
on:mousedown
|
|
42
|
+
on:mouseenter
|
|
43
|
+
on:mouseleave
|
|
44
|
+
on:mousemove
|
|
45
|
+
on:mouseover
|
|
46
|
+
on:mouseout
|
|
47
|
+
on:mouseup
|
|
48
|
+
on:toggle
|
|
49
|
+
on:wheel
|
|
50
|
+
bind:checked
|
|
51
|
+
id={inputId}
|
|
52
|
+
{disabled}
|
|
53
|
+
{...$$restProps}
|
|
54
|
+
/>
|
|
55
|
+
<div class="off-label">
|
|
56
|
+
<slot name="off-label" {checked} {disabled} {inputId} {offText} {vertical}>
|
|
57
|
+
{#if offText}
|
|
58
|
+
<Label for={inputId} {disabled}>{offText}</Label>
|
|
59
|
+
{/if}
|
|
60
|
+
</slot>
|
|
61
|
+
</div>
|
|
62
|
+
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
|
63
|
+
<div class="switch" bind:offsetWidth={switchWidth} bind:offsetHeight={switchHeight}>
|
|
64
|
+
<div
|
|
65
|
+
class="thumb"
|
|
66
|
+
bind:offsetWidth={thumbWidth}
|
|
67
|
+
bind:offsetHeight={thumbHeight}
|
|
68
|
+
style={`--thumb-offset: ${valueOffset}px`}
|
|
69
|
+
/>
|
|
70
|
+
</div>
|
|
71
|
+
<div class="on-label">
|
|
72
|
+
<slot name="on-label" {checked} {disabled} {inputId} {onText} {vertical}>
|
|
73
|
+
{#if onText}
|
|
74
|
+
<Label for={inputId} {disabled}>{onText}</Label>
|
|
75
|
+
{/if}
|
|
76
|
+
</slot>
|
|
77
|
+
</div>
|
|
78
|
+
</div>
|
|
79
|
+
|
|
80
|
+
<style>
|
|
81
|
+
.sterling-switch {
|
|
82
|
+
cursor: pointer;
|
|
83
|
+
display: grid;
|
|
84
|
+
position: relative;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
.sterling-switch:not(.vertical) {
|
|
88
|
+
align-items: center;
|
|
89
|
+
column-gap: 0.5em;
|
|
90
|
+
grid-template-columns: auto auto auto;
|
|
91
|
+
grid-template-rows: auto;
|
|
92
|
+
justify-items: stretch;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
.sterling-switch.vertical {
|
|
96
|
+
align-items: stretch;
|
|
97
|
+
grid-template-columns: auto;
|
|
98
|
+
grid-template-rows: auto auto auto;
|
|
99
|
+
justify-items: center;
|
|
100
|
+
row-gap: 0.5em;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
.sterling-switch.vertical .off-label {
|
|
104
|
+
grid-row: 3 / span 1;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
.sterling-switch.vertical .on-label {
|
|
108
|
+
grid-row: 1 / span 1;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
input {
|
|
112
|
+
font: inherit;
|
|
113
|
+
margin: 0;
|
|
114
|
+
padding: 0;
|
|
115
|
+
position: absolute;
|
|
116
|
+
left: 0;
|
|
117
|
+
right: 0;
|
|
118
|
+
bottom: 0;
|
|
119
|
+
top: 0;
|
|
120
|
+
opacity: 0;
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
.switch {
|
|
124
|
+
background-color: var(--Input__background-color);
|
|
125
|
+
border-color: var(--Input__border-color);
|
|
126
|
+
border-radius: 10000px;
|
|
127
|
+
border-style: var(--Input__border-style);
|
|
128
|
+
border-width: var(--Input__border-width);
|
|
129
|
+
box-sizing: border-box;
|
|
130
|
+
color: var(--Input__color);
|
|
131
|
+
font: inherit;
|
|
132
|
+
pointer-events: none;
|
|
133
|
+
position: relative;
|
|
134
|
+
transition: background-color 250ms, color 250ms, border-color 250ms;
|
|
135
|
+
user-select: none;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
.sterling-switch:hover .switch {
|
|
139
|
+
background-color: var(--Input__background-color--hover);
|
|
140
|
+
border-color: var(--Input__border-color--hover);
|
|
141
|
+
color: var(--Input__color--hover);
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
input:focus-visible ~ .switch {
|
|
145
|
+
background-color: var(--Input__background-color--focus);
|
|
146
|
+
border-color: var(--Input__border-color--focus);
|
|
147
|
+
color: var(--Common__color--focux);
|
|
148
|
+
outline-color: var(--Common__outline-color);
|
|
149
|
+
outline-offset: var(--Common__outline-offset);
|
|
150
|
+
outline-style: var(--Common__outline-style);
|
|
151
|
+
outline-width: var(--Common__outline-width);
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
.sterling-switch.disabled .switch {
|
|
155
|
+
background-color: var(--Input__background-color--disabled);
|
|
156
|
+
border-color: var(--Input__border-color--disabled);
|
|
157
|
+
color: var(--Input__color--disabled);
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
.sterling-switch:not(.vertical) .switch {
|
|
161
|
+
width: 2em;
|
|
162
|
+
height: 1.25em;
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
.sterling-switch.vertical .switch {
|
|
166
|
+
width: 1.25em;
|
|
167
|
+
height: 2em;
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
.off-label,
|
|
171
|
+
.on-label {
|
|
172
|
+
padding-top: var(--Button__border-width);
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
.thumb {
|
|
176
|
+
background-color: var(--Button__background-color);
|
|
177
|
+
border-color: var(--Button__border-color);
|
|
178
|
+
border-radius: 10000px;
|
|
179
|
+
border-style: var(--Button__border-style);
|
|
180
|
+
border-width: var(--Button__border-width);
|
|
181
|
+
box-sizing: border-box;
|
|
182
|
+
color: var(--Button__color);
|
|
183
|
+
cursor: pointer;
|
|
184
|
+
display: block;
|
|
185
|
+
font: inherit;
|
|
186
|
+
height: 1.25em;
|
|
187
|
+
position: absolute;
|
|
188
|
+
transition: background-color 250ms, color 250ms, border-color 250ms, transform 250ms;
|
|
189
|
+
width: 1.25em;
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
.sterling-switch:hover .thumb {
|
|
193
|
+
background-color: var(--Button__background-color--hover);
|
|
194
|
+
border-color: var(--Button__border-color--hover);
|
|
195
|
+
color: var(--Button__color--hover);
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
.sterling-switch:active .thumb {
|
|
199
|
+
background-color: var(--Button__background-color--active);
|
|
200
|
+
border-color: var(--Button__border-color--active);
|
|
201
|
+
color: var(--Button__color--hover);
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
.sterling-switch.disabled .thumb {
|
|
205
|
+
background-color: var(--Button__background-color--disabled);
|
|
206
|
+
border-color: var(--Button__border-color--disabled);
|
|
207
|
+
color: var(--Button__color--disabled);
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
.sterling-switch:not(.vertical) .thumb {
|
|
211
|
+
top: calc(-1 * var(--Button__border-width));
|
|
212
|
+
transform: translateX(calc(var(--thumb-offset) - var(--Button__border-width)));
|
|
213
|
+
}
|
|
214
|
+
|
|
215
|
+
.sterling-switch.vertical .thumb {
|
|
216
|
+
left: calc(-1 * var(--Button__border-width));
|
|
217
|
+
transform: translateY(calc(var(--thumb-offset) - var(--Button__border-width)));
|
|
218
|
+
}
|
|
219
|
+
</style>
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
import { SvelteComponentTyped } from "svelte";
|
|
2
|
+
declare const __propDef: {
|
|
3
|
+
props: {
|
|
4
|
+
[x: string]: any;
|
|
5
|
+
checked?: boolean | undefined;
|
|
6
|
+
disabled?: boolean | undefined;
|
|
7
|
+
vertical?: boolean | undefined;
|
|
8
|
+
onText?: string | undefined;
|
|
9
|
+
offText?: string | undefined;
|
|
10
|
+
};
|
|
11
|
+
events: {
|
|
12
|
+
blur: FocusEvent;
|
|
13
|
+
click: MouseEvent;
|
|
14
|
+
change: Event;
|
|
15
|
+
dblclick: MouseEvent;
|
|
16
|
+
focus: FocusEvent;
|
|
17
|
+
focusin: FocusEvent;
|
|
18
|
+
focusout: FocusEvent;
|
|
19
|
+
keydown: KeyboardEvent;
|
|
20
|
+
keypress: KeyboardEvent;
|
|
21
|
+
keyup: KeyboardEvent;
|
|
22
|
+
input: Event;
|
|
23
|
+
mousedown: MouseEvent;
|
|
24
|
+
mouseenter: MouseEvent;
|
|
25
|
+
mouseleave: MouseEvent;
|
|
26
|
+
mousemove: MouseEvent;
|
|
27
|
+
mouseover: MouseEvent;
|
|
28
|
+
mouseout: MouseEvent;
|
|
29
|
+
mouseup: MouseEvent;
|
|
30
|
+
toggle: Event;
|
|
31
|
+
wheel: WheelEvent;
|
|
32
|
+
} & {
|
|
33
|
+
[evt: string]: CustomEvent<any>;
|
|
34
|
+
};
|
|
35
|
+
slots: {
|
|
36
|
+
'off-label': {
|
|
37
|
+
checked: boolean;
|
|
38
|
+
disabled: boolean;
|
|
39
|
+
inputId: string;
|
|
40
|
+
offText: string;
|
|
41
|
+
vertical: boolean;
|
|
42
|
+
};
|
|
43
|
+
'on-label': {
|
|
44
|
+
checked: boolean;
|
|
45
|
+
disabled: boolean;
|
|
46
|
+
inputId: string;
|
|
47
|
+
onText: string;
|
|
48
|
+
vertical: boolean;
|
|
49
|
+
};
|
|
50
|
+
};
|
|
51
|
+
};
|
|
52
|
+
export type SwitchProps = typeof __propDef.props;
|
|
53
|
+
export type SwitchEvents = typeof __propDef.events;
|
|
54
|
+
export type SwitchSlots = typeof __propDef.slots;
|
|
55
|
+
/** A styled HTML input type=checkbox element. */
|
|
56
|
+
export default class Switch extends SvelteComponentTyped<SwitchProps, SwitchEvents, SwitchSlots> {
|
|
57
|
+
}
|
|
58
|
+
export {};
|
package/lists/List.svelte
CHANGED
|
@@ -103,7 +103,7 @@ A list of items where a single item can be selected.
|
|
|
103
103
|
{/if}
|
|
104
104
|
<div
|
|
105
105
|
bind:this={listRef}
|
|
106
|
-
class="list
|
|
106
|
+
class="list"
|
|
107
107
|
class:disabled
|
|
108
108
|
class:focus-visible={focusVisible}
|
|
109
109
|
class:horizontal
|
|
@@ -163,9 +163,9 @@ A list of items where a single item can be selected.
|
|
|
163
163
|
border-width: var(--Common__border-width);
|
|
164
164
|
box-sizing: border-box;
|
|
165
165
|
color: var(--Common__color);
|
|
166
|
-
display:
|
|
167
|
-
|
|
168
|
-
|
|
166
|
+
display: grid;
|
|
167
|
+
grid-template-columns: 1fr;
|
|
168
|
+
grid-template-rows: auto 1fr;
|
|
169
169
|
height: 100%;
|
|
170
170
|
margin: 0;
|
|
171
171
|
padding: 0;
|
|
@@ -200,6 +200,10 @@ A list of items where a single item can be selected.
|
|
|
200
200
|
}
|
|
201
201
|
|
|
202
202
|
.list {
|
|
203
|
+
display: flex;
|
|
204
|
+
flex-direction: column;
|
|
205
|
+
flex-wrap: nowrap;
|
|
206
|
+
grid-row: 2 / span 1;
|
|
203
207
|
overflow-x: hidden;
|
|
204
208
|
overflow-y: scroll;
|
|
205
209
|
position: relative;
|
package/package.json
CHANGED
|
@@ -1,6 +1,22 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@geoffcox/sterling-svelte",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.12",
|
|
4
|
+
"author": "Geoff Cox",
|
|
5
|
+
"description": "A modern, accessible, and lightweight component library for Svelte.",
|
|
6
|
+
"license": "MIT",
|
|
7
|
+
"bugs": {
|
|
8
|
+
"url": "https://github.com/GeoffCox/sterling-svelte/issues"
|
|
9
|
+
},
|
|
10
|
+
"homepage": "https://github.com/GeoffCox/sterling-svelte/blob/main/README.md",
|
|
11
|
+
"keywords": [
|
|
12
|
+
"svelte",
|
|
13
|
+
"design system",
|
|
14
|
+
"component",
|
|
15
|
+
"controls",
|
|
16
|
+
"sveltekit",
|
|
17
|
+
"typescript",
|
|
18
|
+
"javascript"
|
|
19
|
+
],
|
|
4
20
|
"devDependencies": {
|
|
5
21
|
"@fontsource/fira-mono": "^4.5.10",
|
|
6
22
|
"@fontsource/overpass": "^4.5.10",
|
|
@@ -46,6 +62,7 @@
|
|
|
46
62
|
"./inputs/Radio.svelte": "./inputs/Radio.svelte",
|
|
47
63
|
"./inputs/Select.svelte": "./inputs/Select.svelte",
|
|
48
64
|
"./inputs/Slider.svelte": "./inputs/Slider.svelte",
|
|
65
|
+
"./inputs/Switch.svelte": "./inputs/Switch.svelte",
|
|
49
66
|
"./lists/List.svelte": "./lists/List.svelte",
|
|
50
67
|
"./surfaces/CloseX.svelte": "./surfaces/CloseX.svelte",
|
|
51
68
|
"./surfaces/Dialog.svelte": "./surfaces/Dialog.svelte",
|