@geoffcox/sterling-svelte 0.0.3 → 0.0.4
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/clickOutside.d.ts +3 -0
- package/clickOutside.js +14 -0
- package/index.d.ts +2 -1
- package/index.js +2 -1
- package/inputs/Checkbox.svelte +140 -0
- package/inputs/Checkbox.svelte.d.ts +40 -0
- package/inputs/Input.svelte +148 -0
- package/inputs/Input.svelte.d.ts +46 -0
- package/inputs/Radio.svelte +154 -0
- package/inputs/Radio.svelte.d.ts +41 -0
- package/inputs/Select.svelte +360 -0
- package/inputs/Select.svelte.d.ts +59 -0
- package/inputs/Slider.svelte +280 -0
- package/inputs/Slider.svelte.d.ts +26 -0
- package/lists/List.svelte +313 -0
- package/lists/List.svelte.d.ts +59 -0
- package/package.json +1 -1
- package/theme/darkTheme.js +8 -10
- package/theme/lightTheme.js +7 -9
package/clickOutside.js
ADDED
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
export const clickOutside = (node) => {
|
|
2
|
+
const handleClick = (event) => {
|
|
3
|
+
const targetNode = event?.target;
|
|
4
|
+
if (targetNode && !node.contains(targetNode)) {
|
|
5
|
+
node.dispatchEvent(new CustomEvent('click_outside'));
|
|
6
|
+
}
|
|
7
|
+
};
|
|
8
|
+
document.addEventListener('click', handleClick, true);
|
|
9
|
+
return {
|
|
10
|
+
destroy() {
|
|
11
|
+
document.removeEventListener('click', handleClick, true);
|
|
12
|
+
}
|
|
13
|
+
};
|
|
14
|
+
};
|
package/index.d.ts
CHANGED
|
@@ -8,4 +8,5 @@ export { neutrals } from './theme/colors';
|
|
|
8
8
|
export { toggleDarkTheme } from './theme/toggleDarkTheme';
|
|
9
9
|
export { type ButtonVariant, type ButtonShape } from './buttons/types';
|
|
10
10
|
import Button from './buttons/Button.svelte';
|
|
11
|
-
|
|
11
|
+
import Input from './inputs/Input.svelte';
|
|
12
|
+
export { Button, Input };
|
package/index.js
CHANGED
|
@@ -8,4 +8,5 @@ export { neutrals } from './theme/colors';
|
|
|
8
8
|
export { toggleDarkTheme } from './theme/toggleDarkTheme';
|
|
9
9
|
export {} from './buttons/types';
|
|
10
10
|
import Button from './buttons/Button.svelte';
|
|
11
|
-
|
|
11
|
+
import Input from './inputs/Input.svelte';
|
|
12
|
+
export { Button, Input };
|
|
@@ -0,0 +1,140 @@
|
|
|
1
|
+
<script>export let checked = false;
|
|
2
|
+
</script>
|
|
3
|
+
|
|
4
|
+
<!-- svelte-ignore a11y-label-has-associated-control -->
|
|
5
|
+
<label class="sterling-checkbox">
|
|
6
|
+
<div class="container">
|
|
7
|
+
<input
|
|
8
|
+
type="checkbox"
|
|
9
|
+
on:blur
|
|
10
|
+
on:click
|
|
11
|
+
on:change
|
|
12
|
+
on:dblclick
|
|
13
|
+
on:focus
|
|
14
|
+
on:focusin
|
|
15
|
+
on:focusout
|
|
16
|
+
on:keydown
|
|
17
|
+
on:keypress
|
|
18
|
+
on:keyup
|
|
19
|
+
on:input
|
|
20
|
+
on:mousedown
|
|
21
|
+
on:mouseenter
|
|
22
|
+
on:mouseleave
|
|
23
|
+
on:mousemove
|
|
24
|
+
on:mouseover
|
|
25
|
+
on:mouseout
|
|
26
|
+
on:mouseup
|
|
27
|
+
on:toggle
|
|
28
|
+
on:wheel
|
|
29
|
+
bind:checked
|
|
30
|
+
{...$$restProps}
|
|
31
|
+
/>
|
|
32
|
+
<div class="indicator" />
|
|
33
|
+
</div>
|
|
34
|
+
<div class="label-content">
|
|
35
|
+
<slot />
|
|
36
|
+
</div>
|
|
37
|
+
</label>
|
|
38
|
+
|
|
39
|
+
<style>
|
|
40
|
+
.sterling-checkbox {
|
|
41
|
+
display: inline-flex;
|
|
42
|
+
align-content: stretch;
|
|
43
|
+
align-items: stretch;
|
|
44
|
+
box-sizing: border-box;
|
|
45
|
+
font: inherit;
|
|
46
|
+
gap: 0.4em;
|
|
47
|
+
outline: none;
|
|
48
|
+
padding: 0;
|
|
49
|
+
margin: 0;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
/*
|
|
53
|
+
The container
|
|
54
|
+
- allows the input to be hidden
|
|
55
|
+
- avoids input participating in layout
|
|
56
|
+
- prevents collisions with surrounding slots
|
|
57
|
+
*/
|
|
58
|
+
.container {
|
|
59
|
+
font: inherit;
|
|
60
|
+
position: relative;
|
|
61
|
+
display: grid;
|
|
62
|
+
align-items: center;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
/*
|
|
66
|
+
The input is hidden since the built-in browser checkbox cannot be customized
|
|
67
|
+
*/
|
|
68
|
+
input {
|
|
69
|
+
font: inherit;
|
|
70
|
+
margin: 0;
|
|
71
|
+
padding: 0;
|
|
72
|
+
position: absolute;
|
|
73
|
+
opacity: 0;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
/*
|
|
77
|
+
The indicator handles both the box and the checkmark.
|
|
78
|
+
The box cannot be on the container since the adjacent sibling selector is needed
|
|
79
|
+
and there is not a parent CSS selector.
|
|
80
|
+
*/
|
|
81
|
+
.indicator {
|
|
82
|
+
background-color: var(--Input__background-color);
|
|
83
|
+
border-color: var(--Input__border-color);
|
|
84
|
+
border-style: var(--Input__border-style);
|
|
85
|
+
border-width: var(--Input__border-width);
|
|
86
|
+
box-sizing: border-box;
|
|
87
|
+
display: inline-block;
|
|
88
|
+
height: 20px;
|
|
89
|
+
position: relative;
|
|
90
|
+
transition: background-color 250ms, color 250ms, border-color 250ms;
|
|
91
|
+
width: 20px;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
input:checked + .indicator {
|
|
95
|
+
background-color: var(--Input__background-color);
|
|
96
|
+
border-color: var(--Input__border-color);
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
input:focus-visible + .indicator {
|
|
100
|
+
outline-color: var(--Common__outline-color);
|
|
101
|
+
outline-offset: var(--Common__outline-offset);
|
|
102
|
+
outline-style: var(--Common__outline-style);
|
|
103
|
+
outline-width: var(--Common__outline-width);
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
input:disabled + .indicator {
|
|
107
|
+
background-color: var(--Input__background-color--disabled);
|
|
108
|
+
border-color: var(--Input__border-color--disabled);
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
/*
|
|
112
|
+
The checkmark is a rotated L centered in the box.
|
|
113
|
+
*/
|
|
114
|
+
input:checked + .indicator::after {
|
|
115
|
+
border-color: var(--Input__color);
|
|
116
|
+
border-style: solid;
|
|
117
|
+
border-width: 0 3px 3px 0;
|
|
118
|
+
box-sizing: border-box;
|
|
119
|
+
content: '';
|
|
120
|
+
height: 14px;
|
|
121
|
+
left: 50%;
|
|
122
|
+
position: absolute;
|
|
123
|
+
top: 50%;
|
|
124
|
+
transform: translate(-50%, -50%) rotate(45deg);
|
|
125
|
+
transform-origin: center;
|
|
126
|
+
transition: border-color 250ms;
|
|
127
|
+
width: 7px;
|
|
128
|
+
visibility: visible;
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
input:checked:disabled + .indicator::after {
|
|
132
|
+
border-color: var(--Input__color--disabled);
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
.label-content {
|
|
136
|
+
color: var(--Common__color);
|
|
137
|
+
user-select: none;
|
|
138
|
+
margin-top: 0.25em;
|
|
139
|
+
}
|
|
140
|
+
</style>
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import { SvelteComponentTyped } from "svelte";
|
|
2
|
+
declare const __propDef: {
|
|
3
|
+
props: {
|
|
4
|
+
[x: string]: any;
|
|
5
|
+
checked?: boolean | undefined;
|
|
6
|
+
};
|
|
7
|
+
events: {
|
|
8
|
+
blur: FocusEvent;
|
|
9
|
+
click: MouseEvent;
|
|
10
|
+
change: Event;
|
|
11
|
+
dblclick: MouseEvent;
|
|
12
|
+
focus: FocusEvent;
|
|
13
|
+
focusin: FocusEvent;
|
|
14
|
+
focusout: FocusEvent;
|
|
15
|
+
keydown: KeyboardEvent;
|
|
16
|
+
keypress: KeyboardEvent;
|
|
17
|
+
keyup: KeyboardEvent;
|
|
18
|
+
input: Event;
|
|
19
|
+
mousedown: MouseEvent;
|
|
20
|
+
mouseenter: MouseEvent;
|
|
21
|
+
mouseleave: MouseEvent;
|
|
22
|
+
mousemove: MouseEvent;
|
|
23
|
+
mouseover: MouseEvent;
|
|
24
|
+
mouseout: MouseEvent;
|
|
25
|
+
mouseup: MouseEvent;
|
|
26
|
+
toggle: Event;
|
|
27
|
+
wheel: WheelEvent;
|
|
28
|
+
} & {
|
|
29
|
+
[evt: string]: CustomEvent<any>;
|
|
30
|
+
};
|
|
31
|
+
slots: {
|
|
32
|
+
default: {};
|
|
33
|
+
};
|
|
34
|
+
};
|
|
35
|
+
export type CheckboxProps = typeof __propDef.props;
|
|
36
|
+
export type CheckboxEvents = typeof __propDef.events;
|
|
37
|
+
export type CheckboxSlots = typeof __propDef.slots;
|
|
38
|
+
export default class Checkbox extends SvelteComponentTyped<CheckboxProps, CheckboxEvents, CheckboxSlots> {
|
|
39
|
+
}
|
|
40
|
+
export {};
|
|
@@ -0,0 +1,148 @@
|
|
|
1
|
+
<script>export let value = "";
|
|
2
|
+
</script>
|
|
3
|
+
|
|
4
|
+
<!-- svelte-ignore a11y-label-has-associated-control -->
|
|
5
|
+
{#if $$slots.label}
|
|
6
|
+
<label class="sterling-input-label">
|
|
7
|
+
<div class="label-content">
|
|
8
|
+
<slot name="label" />
|
|
9
|
+
</div>
|
|
10
|
+
<input
|
|
11
|
+
class="sterling-input labeled"
|
|
12
|
+
bind:value
|
|
13
|
+
on:blur
|
|
14
|
+
on:click
|
|
15
|
+
on:change
|
|
16
|
+
on:copy
|
|
17
|
+
on:cut
|
|
18
|
+
on:paste
|
|
19
|
+
on:dblclick
|
|
20
|
+
on:focus
|
|
21
|
+
on:focusin
|
|
22
|
+
on:focusout
|
|
23
|
+
on:input
|
|
24
|
+
on:invalid
|
|
25
|
+
on:keydown
|
|
26
|
+
on:keypress
|
|
27
|
+
on:keyup
|
|
28
|
+
on:mousedown
|
|
29
|
+
on:mouseenter
|
|
30
|
+
on:mouseleave
|
|
31
|
+
on:mousemove
|
|
32
|
+
on:mouseover
|
|
33
|
+
on:mouseout
|
|
34
|
+
on:mouseup
|
|
35
|
+
on:select
|
|
36
|
+
on:submit
|
|
37
|
+
on:reset
|
|
38
|
+
on:wheel
|
|
39
|
+
{...$$restProps}
|
|
40
|
+
/>
|
|
41
|
+
</label>
|
|
42
|
+
{:else}
|
|
43
|
+
<input
|
|
44
|
+
class="sterling-input"
|
|
45
|
+
bind:value
|
|
46
|
+
on:blur
|
|
47
|
+
on:click
|
|
48
|
+
on:change
|
|
49
|
+
on:copy
|
|
50
|
+
on:cut
|
|
51
|
+
on:paste
|
|
52
|
+
on:dblclick
|
|
53
|
+
on:focus
|
|
54
|
+
on:focusin
|
|
55
|
+
on:focusout
|
|
56
|
+
on:input
|
|
57
|
+
on:invalid
|
|
58
|
+
on:keydown
|
|
59
|
+
on:keypress
|
|
60
|
+
on:keyup
|
|
61
|
+
on:mousedown
|
|
62
|
+
on:mouseenter
|
|
63
|
+
on:mouseleave
|
|
64
|
+
on:mousemove
|
|
65
|
+
on:mouseover
|
|
66
|
+
on:mouseout
|
|
67
|
+
on:mouseup
|
|
68
|
+
on:select
|
|
69
|
+
on:submit
|
|
70
|
+
on:reset
|
|
71
|
+
on:wheel
|
|
72
|
+
{...$$restProps}
|
|
73
|
+
/>
|
|
74
|
+
{/if}
|
|
75
|
+
|
|
76
|
+
<style>
|
|
77
|
+
.sterling-input-label {
|
|
78
|
+
display: flex;
|
|
79
|
+
flex-direction: column;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.sterling-input-label > .label-content {
|
|
83
|
+
font-size: 0.7em;
|
|
84
|
+
margin: 0.5em 0 0 0.7em;
|
|
85
|
+
color: var(--Display__color--subtle);
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.sterling-input-label,
|
|
89
|
+
.sterling-input {
|
|
90
|
+
background-color: var(--Input__background-color);
|
|
91
|
+
border-color: var(--Input__border-color);
|
|
92
|
+
border-radius: var(--Input__border-radius);
|
|
93
|
+
border-style: var(--Input__border-style);
|
|
94
|
+
border-width: var(--Input__border-width);
|
|
95
|
+
color: var(--Input__color);
|
|
96
|
+
font: inherit;
|
|
97
|
+
margin: 0;
|
|
98
|
+
transition: background-color 250ms, color 250ms, border-color 250ms;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
.sterling-input-label:hover,
|
|
102
|
+
.sterling-input:hover {
|
|
103
|
+
background-color: var(--Input__background-color--hover);
|
|
104
|
+
border-color: var(--Input__border-color--hover);
|
|
105
|
+
color: var(--Input__color--hover);
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
.sterling-input-label:focus-within,
|
|
109
|
+
.sterling-input:focus-within {
|
|
110
|
+
background-color: var(--Input__background-color--focus);
|
|
111
|
+
border-color: var(--Input__border-color--focus);
|
|
112
|
+
color: var(--Input__color--focus);
|
|
113
|
+
outline-color: var(--Common__outline-color);
|
|
114
|
+
outline-offset: var(--Common__outline-offset);
|
|
115
|
+
outline-style: var(--Common__outline-style);
|
|
116
|
+
outline-width: var(--Common__outline-width);
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
.sterling-input-label:disabled,
|
|
120
|
+
.sterling-input:disabled {
|
|
121
|
+
background-color: var(--Input__background-color--disabled);
|
|
122
|
+
border-color: var(---Input__border-color--disabled);
|
|
123
|
+
color: var(--Input__color--disabled);
|
|
124
|
+
cursor: not-allowed;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
.sterling-input {
|
|
128
|
+
padding: 0.5em 0.5em;
|
|
129
|
+
transition: background-color 250ms, color 250ms, border-color 250ms;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
.sterling-input.labeled,
|
|
133
|
+
.sterling-input.labeled:hover,
|
|
134
|
+
.sterling-input.labeled:focus-within,
|
|
135
|
+
.sterling-input.labeled:disabled {
|
|
136
|
+
background-color: transparent;
|
|
137
|
+
border: none;
|
|
138
|
+
outline: none;
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
.sterling-input::placeholder {
|
|
142
|
+
color: var(--Display__color--faint);
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
.sterling-input:disabled::placeholder {
|
|
146
|
+
color: var(--Display__color--disabled);
|
|
147
|
+
}
|
|
148
|
+
</style>
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import { SvelteComponentTyped } from "svelte";
|
|
2
|
+
declare const __propDef: {
|
|
3
|
+
props: {
|
|
4
|
+
[x: string]: any;
|
|
5
|
+
value?: string | undefined;
|
|
6
|
+
};
|
|
7
|
+
events: {
|
|
8
|
+
blur: FocusEvent;
|
|
9
|
+
click: MouseEvent;
|
|
10
|
+
change: Event;
|
|
11
|
+
copy: ClipboardEvent;
|
|
12
|
+
cut: ClipboardEvent;
|
|
13
|
+
paste: ClipboardEvent;
|
|
14
|
+
dblclick: MouseEvent;
|
|
15
|
+
focus: FocusEvent;
|
|
16
|
+
focusin: FocusEvent;
|
|
17
|
+
focusout: FocusEvent;
|
|
18
|
+
input: Event;
|
|
19
|
+
invalid: Event;
|
|
20
|
+
keydown: KeyboardEvent;
|
|
21
|
+
keypress: KeyboardEvent;
|
|
22
|
+
keyup: KeyboardEvent;
|
|
23
|
+
mousedown: MouseEvent;
|
|
24
|
+
mouseenter: MouseEvent;
|
|
25
|
+
mouseleave: MouseEvent;
|
|
26
|
+
mousemove: MouseEvent;
|
|
27
|
+
mouseover: MouseEvent;
|
|
28
|
+
mouseout: MouseEvent;
|
|
29
|
+
mouseup: MouseEvent;
|
|
30
|
+
select: Event;
|
|
31
|
+
submit: SubmitEvent;
|
|
32
|
+
reset: Event;
|
|
33
|
+
wheel: WheelEvent;
|
|
34
|
+
} & {
|
|
35
|
+
[evt: string]: CustomEvent<any>;
|
|
36
|
+
};
|
|
37
|
+
slots: {
|
|
38
|
+
label: {};
|
|
39
|
+
};
|
|
40
|
+
};
|
|
41
|
+
export type InputProps = typeof __propDef.props;
|
|
42
|
+
export type InputEvents = typeof __propDef.events;
|
|
43
|
+
export type InputSlots = typeof __propDef.slots;
|
|
44
|
+
export default class Input extends SvelteComponentTyped<InputProps, InputEvents, InputSlots> {
|
|
45
|
+
}
|
|
46
|
+
export {};
|
|
@@ -0,0 +1,154 @@
|
|
|
1
|
+
<script>import { onMount } from "svelte";
|
|
2
|
+
export let checked = false;
|
|
3
|
+
export let group = void 0;
|
|
4
|
+
const onChange = (e) => {
|
|
5
|
+
if (e.currentTarget.checked) {
|
|
6
|
+
group = $$restProps.value;
|
|
7
|
+
}
|
|
8
|
+
};
|
|
9
|
+
let mounted = false;
|
|
10
|
+
onMount(() => {
|
|
11
|
+
if (checked) {
|
|
12
|
+
group = $$restProps.value;
|
|
13
|
+
}
|
|
14
|
+
mounted = true;
|
|
15
|
+
});
|
|
16
|
+
$: {
|
|
17
|
+
if (mounted) {
|
|
18
|
+
checked = group === $$restProps.value;
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
</script>
|
|
22
|
+
|
|
23
|
+
<!-- svelte-ignore a11y-label-has-associated-control -->
|
|
24
|
+
<label class="sterling-radio">
|
|
25
|
+
<div class="container">
|
|
26
|
+
<input
|
|
27
|
+
type="radio"
|
|
28
|
+
on:blur
|
|
29
|
+
on:click
|
|
30
|
+
on:change
|
|
31
|
+
on:change={onChange}
|
|
32
|
+
on:dblclick
|
|
33
|
+
on:focus
|
|
34
|
+
on:focusin
|
|
35
|
+
on:focusout
|
|
36
|
+
on:keydown
|
|
37
|
+
on:keypress
|
|
38
|
+
on:keyup
|
|
39
|
+
on:input
|
|
40
|
+
on:mousedown
|
|
41
|
+
on:mouseenter
|
|
42
|
+
on:mouseleave
|
|
43
|
+
on:mousemove
|
|
44
|
+
on:mouseover
|
|
45
|
+
on:mouseout
|
|
46
|
+
on:mouseup
|
|
47
|
+
on:toggle
|
|
48
|
+
on:wheel
|
|
49
|
+
checked={group === $$restProps.value}
|
|
50
|
+
{...$$restProps}
|
|
51
|
+
/>
|
|
52
|
+
<div class="indicator" />
|
|
53
|
+
</div>
|
|
54
|
+
<div class="label-content">
|
|
55
|
+
<slot />
|
|
56
|
+
</div>
|
|
57
|
+
</label>
|
|
58
|
+
|
|
59
|
+
<style>
|
|
60
|
+
label {
|
|
61
|
+
display: inline-flex;
|
|
62
|
+
align-items: center;
|
|
63
|
+
gap: 0.4em;
|
|
64
|
+
outline: none;
|
|
65
|
+
padding: 0;
|
|
66
|
+
margin: 0;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
/*
|
|
70
|
+
The container
|
|
71
|
+
- allows the input to be hidden
|
|
72
|
+
- avoids input participating in layout
|
|
73
|
+
- prevents collisions with surrounding slots
|
|
74
|
+
*/
|
|
75
|
+
.container {
|
|
76
|
+
box-sizing: border-box;
|
|
77
|
+
position: relative;
|
|
78
|
+
font: inherit;
|
|
79
|
+
display: flex;
|
|
80
|
+
align-items: center;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
/*
|
|
84
|
+
The input is hidden since the built-in browser radio cannot be customized
|
|
85
|
+
*/
|
|
86
|
+
input {
|
|
87
|
+
font: inherit;
|
|
88
|
+
margin: 0;
|
|
89
|
+
padding: 0;
|
|
90
|
+
position: absolute;
|
|
91
|
+
opacity: 0;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
/*
|
|
95
|
+
The indicator handles both the radio box and circle mark.
|
|
96
|
+
The box cannot be on the container since the adjacent sibling selector is needed
|
|
97
|
+
and there is not a parent CSS selector.
|
|
98
|
+
*/
|
|
99
|
+
.indicator {
|
|
100
|
+
background-color: var(--Input__background-color);
|
|
101
|
+
border-color: var(--Input__border-color);
|
|
102
|
+
border-style: var(--Input__border-style);
|
|
103
|
+
border-width: var(--Input__border-width);
|
|
104
|
+
border-radius: 10000px;
|
|
105
|
+
box-sizing: border-box;
|
|
106
|
+
display: inline-block;
|
|
107
|
+
height: 21px;
|
|
108
|
+
position: relative;
|
|
109
|
+
transition: background-color 250ms, color 250ms, border-color 250ms;
|
|
110
|
+
width: 21px;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
input:checked + .indicator {
|
|
114
|
+
background-color: var(--Input__background-color);
|
|
115
|
+
border-color: var(--Input__border-color);
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
input:focus-visible + .indicator {
|
|
119
|
+
outline-color: var(--Common__outline-color);
|
|
120
|
+
outline-offset: var(--Common__outline-offset);
|
|
121
|
+
outline-style: var(--Common__outline-style);
|
|
122
|
+
outline-width: var(--Common__outline-width);
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
input:disabled + .indicator {
|
|
126
|
+
background-color: var(--Input__background-color--disabled);
|
|
127
|
+
border-color: var(--Input__border-color--disabled);
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
.indicator::after {
|
|
131
|
+
background-color: transparent;
|
|
132
|
+
border-radius: 10000px;
|
|
133
|
+
content: '';
|
|
134
|
+
height: 9px;
|
|
135
|
+
left: 50%;
|
|
136
|
+
position: absolute;
|
|
137
|
+
top: 50%;
|
|
138
|
+
transform: translate(-50%, -50%);
|
|
139
|
+
transition: background-color 250ms;
|
|
140
|
+
width: 9px;
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
input:checked + .indicator::after {
|
|
144
|
+
background-color: var(--Input__color);
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
input:checked:disabled + .indicator::after {
|
|
148
|
+
background-color: var(--Input__color--disabled);
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
.label-content {
|
|
152
|
+
color: var(--Common__color);
|
|
153
|
+
}
|
|
154
|
+
</style>
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import { SvelteComponentTyped } from "svelte";
|
|
2
|
+
declare const __propDef: {
|
|
3
|
+
props: {
|
|
4
|
+
[x: string]: any;
|
|
5
|
+
checked?: boolean | undefined;
|
|
6
|
+
group?: any | undefined | null;
|
|
7
|
+
};
|
|
8
|
+
events: {
|
|
9
|
+
blur: FocusEvent;
|
|
10
|
+
click: MouseEvent;
|
|
11
|
+
change: Event;
|
|
12
|
+
dblclick: MouseEvent;
|
|
13
|
+
focus: FocusEvent;
|
|
14
|
+
focusin: FocusEvent;
|
|
15
|
+
focusout: FocusEvent;
|
|
16
|
+
keydown: KeyboardEvent;
|
|
17
|
+
keypress: KeyboardEvent;
|
|
18
|
+
keyup: KeyboardEvent;
|
|
19
|
+
input: Event;
|
|
20
|
+
mousedown: MouseEvent;
|
|
21
|
+
mouseenter: MouseEvent;
|
|
22
|
+
mouseleave: MouseEvent;
|
|
23
|
+
mousemove: MouseEvent;
|
|
24
|
+
mouseover: MouseEvent;
|
|
25
|
+
mouseout: MouseEvent;
|
|
26
|
+
mouseup: MouseEvent;
|
|
27
|
+
toggle: Event;
|
|
28
|
+
wheel: WheelEvent;
|
|
29
|
+
} & {
|
|
30
|
+
[evt: string]: CustomEvent<any>;
|
|
31
|
+
};
|
|
32
|
+
slots: {
|
|
33
|
+
default: {};
|
|
34
|
+
};
|
|
35
|
+
};
|
|
36
|
+
export type RadioProps = typeof __propDef.props;
|
|
37
|
+
export type RadioEvents = typeof __propDef.events;
|
|
38
|
+
export type RadioSlots = typeof __propDef.slots;
|
|
39
|
+
export default class Radio extends SvelteComponentTyped<RadioProps, RadioEvents, RadioSlots> {
|
|
40
|
+
}
|
|
41
|
+
export {};
|