@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.
Files changed (15) hide show
  1. package/README.md +4 -0
  2. package/display/Label.svelte +27 -0
  3. package/display/Label.svelte.d.ts +20 -0
  4. package/display/Progress.svelte +141 -143
  5. package/index.d.ts +3 -1
  6. package/index.js +3 -1
  7. package/inputs/Checkbox.svelte +129 -126
  8. package/inputs/Input.svelte +108 -150
  9. package/inputs/Radio.svelte +129 -122
  10. package/inputs/Select.svelte +190 -195
  11. package/inputs/Slider.svelte +40 -74
  12. package/inputs/Switch.svelte +219 -0
  13. package/inputs/Switch.svelte.d.ts +58 -0
  14. package/lists/List.svelte +147 -223
  15. package/package.json +20 -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/display/Label.svelte ADDED
@@ -0,0 +1,27 @@
1
+ <script>export let disabled = false;
2
+ </script>
3
+
4
+ <label class="sterling-label" class:disabled {...$$restProps}>
5
+ <slot />
6
+ </label>
7
+
8
+ <!--
9
+ @component
10
+ A styled HTML label element
11
+ -->
12
+ <style>
13
+ label {
14
+ transition: opacity 250ms;
15
+ font: inherit;
16
+ }
17
+
18
+ label.disabled {
19
+ opacity: 0.5;
20
+ }
21
+
22
+ @media (prefers-reduced-motion) {
23
+ label {
24
+ transition: none;
25
+ }
26
+ }
27
+ </style>
package/display/Label.svelte.d.ts ADDED
@@ -0,0 +1,20 @@
1
+ import { SvelteComponentTyped } from "svelte";
2
+ declare const __propDef: {
3
+ props: {
4
+ [x: string]: any;
5
+ disabled?: boolean | undefined;
6
+ };
7
+ events: {
8
+ [evt: string]: CustomEvent<any>;
9
+ };
10
+ slots: {
11
+ default: {};
12
+ };
13
+ };
14
+ export type LabelProps = typeof __propDef.props;
15
+ export type LabelEvents = typeof __propDef.events;
16
+ export type LabelSlots = typeof __propDef.slots;
17
+ /** A styled HTML label element */
18
+ export default class Label extends SvelteComponentTyped<LabelProps, LabelEvents, LabelSlots> {
19
+ }
20
+ export {};
package/display/Progress.svelte CHANGED
@@ -1,9 +1,12 @@
1
- <script>export let value = 0;
1
+ <script>import { v4 as uuid } from "uuid";
2
+ import Label from "../display/Label.svelte";
3
+ export let value = 0;
2
4
  export let max = 100;
3
5
  export let percent = 0;
4
6
  export let vertical = false;
5
7
  export let colorful = "none";
6
8
  export let disabled = false;
9
+ const inputId = uuid();
7
10
  let clientHeight;
8
11
  let clientWidth;
9
12
  $:
@@ -33,150 +36,145 @@ $:
33
36
  <!-- svelte-ignore a11y-label-has-associated-control -->
34
37
 
35
38
  <div
36
- class="sterling-progress"
37
- class:disabled
38
- class:vertical
39
- on:click
40
- on:dblclick
41
- on:focus
42
- on:blur
43
- on:mousedown
44
- on:mouseenter
45
- on:mouseleave
46
- on:mousemove
47
- on:mouseover
48
- on:mouseout
49
- on:mouseup
50
- on:wheel
51
- {...$$restProps}
39
+ class="sterling-progress"
40
+ class:disabled
41
+ class:vertical
42
+ on:click
43
+ on:dblclick
44
+ on:focus
45
+ on:blur
46
+ on:mousedown
47
+ on:mouseenter
48
+ on:mouseleave
49
+ on:mousemove
50
+ on:mouseover
51
+ on:mouseout
52
+ on:mouseup
53
+ on:wheel
54
+ {...$$restProps}
52
55
  >
53
- {#if $$slots.label}
54
- <div class="label-content" class:disabled>
55
- <slot name="label" />
56
- </div>
57
- {/if}
58
- <div class="progress-bar">
59
- <div class="container" bind:clientWidth bind:clientHeight>
60
- <div
61
- class="indicator"
62
- class:progress={indicatorColor === 'progress'}
63
- class:success={indicatorColor === 'success'}
64
- class:warning={indicatorColor === 'warning'}
65
- class:error={indicatorColor === 'error'}
66
- style={indicatorStyle}
67
- />
68
- </div>
69
- </div>
56
+ {#if $$slots.label}
57
+ <div class="label">
58
+ <Label {disabled} for={inputId}>
59
+ <slot name="label" />
60
+ </Label>
61
+ </div>
62
+ {/if}
63
+ <div class="progress-bar" id={inputId}>
64
+ <div class="container" bind:clientWidth bind:clientHeight>
65
+ <div
66
+ class="indicator"
67
+ class:progress={indicatorColor === 'progress'}
68
+ class:success={indicatorColor === 'success'}
69
+ class:warning={indicatorColor === 'warning'}
70
+ class:error={indicatorColor === 'error'}
71
+ style={indicatorStyle}
72
+ />
73
+ </div>
74
+ </div>
70
75
  </div>
71
76
 
72
77
  <style>
73
- .sterling-progress {
74
- display: flex;
75
- flex-direction: column;
76
- align-content: flex-start;
77
- align-items: flex-start;
78
- }
79
-
80
- .label-content {
81
- font-size: 0.7em;
82
- margin: 0.5em 0;
83
- color: var(--Display__color--subtle);
84
- transition: background-color 250ms, color 250ms, border-color 250ms;
85
- }
86
-
87
- .progress-bar {
88
- display: block;
89
- background: var(--Common__background-color);
90
- box-sizing: border-box;
91
- height: 1em;
92
- padding: 0.2em;
93
- border-width: var(--Common__border-width);
94
- border-style: var(--Common__border-style);
95
- border-color: var(--Common__border-color);
96
- border-radius: var(--Common__border-radius);
97
- transition: background-color 250ms, color 250ms, border-color 250ms;
98
- }
99
-
100
- .container {
101
- display: flex;
102
- justify-content: flex-start;
103
- width: 100%;
104
- height: 100%;
105
- min-width: 100px;
106
- }
107
-
108
- .indicator {
109
- background-color: var(--Display__color);
110
- box-sizing: border-box;
111
- height: 100%;
112
- min-height: 1px;
113
- transition: background-color 250ms, color 250ms, border-color 250ms;
114
- }
115
-
116
- /* ----- Vertical ----- */
117
-
118
- .sterling-progress.vertical {
119
- align-items: center;
120
- align-content: center;
121
- }
122
-
123
- .sterling-progress.vertical .progress-bar {
124
- height: unset;
125
- width: 1em;
126
- }
127
-
128
- .sterling-progress.vertical .container {
129
- flex-direction: column;
130
- justify-content: flex-end;
131
- min-width: unset;
132
- min-height: 100px;
133
- }
134
-
135
- .sterling-progress.vertical .indicator {
136
- height: unset;
137
- min-height: unset;
138
- min-width: 1px;
139
- width: 100%;
140
- }
141
-
142
- /* ----- Colorful ----- */
143
-
144
- .indicator.progress {
145
- background-color: var(--Display__color--progress);
146
- }
147
-
148
- .indicator.success {
149
- background-color: var(--Display__color--success);
150
- }
151
-
152
- .indicator.warning {
153
- background-color: var(--Display__color--warning);
154
- }
155
-
156
- .indicator.error {
157
- background-color: var(--Display__color--error);
158
- }
159
-
160
- /* ----- Disabled ----- */
161
-
162
- .label-content.disabled {
163
- color: var(--Display__color--disabled);
164
- }
165
-
166
- .sterling-progress.disabled .progress-bar {
167
- background: var(--Common__background-color--disabled);
168
- border-color: var(--Common__border-color--disabled);
169
- }
170
-
171
- .sterling-progress.disabled .indicator {
172
- background-color: var(--Display__color--disabled);
173
- }
174
-
175
- @media (prefers-reduced-motion) {
176
- .progress-bar,
177
- .indicator,
178
- .label-content {
179
- transition: none;
180
- }
181
- }
78
+ .sterling-progress {
79
+ display: flex;
80
+ flex-direction: column;
81
+ align-content: flex-start;
82
+ align-items: flex-start;
83
+ }
84
+
85
+ .label {
86
+ font-size: 0.7em;
87
+ margin: 0.5em 0;
88
+ }
89
+
90
+ .progress-bar {
91
+ display: block;
92
+ background: var(--Common__background-color);
93
+ box-sizing: border-box;
94
+ height: 1em;
95
+ padding: 0.2em;
96
+ border-width: var(--Common__border-width);
97
+ border-style: var(--Common__border-style);
98
+ border-color: var(--Common__border-color);
99
+ border-radius: var(--Common__border-radius);
100
+ transition: background-color 250ms, color 250ms, border-color 250ms;
101
+ }
102
+
103
+ .container {
104
+ display: flex;
105
+ justify-content: flex-start;
106
+ width: 100%;
107
+ height: 100%;
108
+ min-width: 100px;
109
+ }
110
+
111
+ .indicator {
112
+ background-color: var(--Display__color);
113
+ box-sizing: border-box;
114
+ height: 100%;
115
+ min-height: 1px;
116
+ transition: background-color 250ms, color 250ms, border-color 250ms;
117
+ }
118
+
119
+ /* ----- Vertical ----- */
120
+
121
+ .sterling-progress.vertical {
122
+ align-items: center;
123
+ align-content: center;
124
+ }
125
+
126
+ .sterling-progress.vertical .progress-bar {
127
+ height: unset;
128
+ width: 1em;
129
+ }
130
+
131
+ .sterling-progress.vertical .container {
132
+ flex-direction: column;
133
+ justify-content: flex-end;
134
+ min-width: unset;
135
+ min-height: 100px;
136
+ }
137
+
138
+ .sterling-progress.vertical .indicator {
139
+ height: unset;
140
+ min-height: unset;
141
+ min-width: 1px;
142
+ width: 100%;
143
+ }
144
+
145
+ /* ----- Colorful ----- */
146
+
147
+ .indicator.progress {
148
+ background-color: var(--Display__color--progress);
149
+ }
150
+
151
+ .indicator.success {
152
+ background-color: var(--Display__color--success);
153
+ }
154
+
155
+ .indicator.warning {
156
+ background-color: var(--Display__color--warning);
157
+ }
158
+
159
+ .indicator.error {
160
+ background-color: var(--Display__color--error);
161
+ }
162
+
163
+ /* ----- Disabled ----- */
164
+
165
+ .sterling-progress.disabled .progress-bar {
166
+ background: var(--Common__background-color--disabled);
167
+ border-color: var(--Common__border-color--disabled);
168
+ }
169
+
170
+ .sterling-progress.disabled .indicator {
171
+ background-color: var(--Display__color--disabled);
172
+ }
173
+
174
+ @media (prefers-reduced-motion) {
175
+ .progress-bar,
176
+ .indicator {
177
+ transition: none;
178
+ }
179
+ }
182
180
  </style>
package/index.d.ts CHANGED
@@ -13,9 +13,11 @@ import Button from './buttons/Button.svelte';
13
13
  import Checkbox from './inputs/Checkbox.svelte';
14
14
  import Dialog from './surfaces/Dialog.svelte';
15
15
  import Input from './inputs/Input.svelte';
16
+ import Label from './display/Label.svelte';
16
17
  import List from './lists/List.svelte';
17
18
  import Progress from './display/Progress.svelte';
18
19
  import Radio from './inputs/Radio.svelte';
19
20
  import Select from './inputs/Select.svelte';
20
21
  import Slider from './inputs/Slider.svelte';
21
- export { Button, Checkbox, Dialog, Input, List, Progress, Radio, Select, Slider };
22
+ import Switch from './inputs/Switch.svelte';
23
+ export { Button, Checkbox, Dialog, Input, Label, List, Progress, Radio, Select, Slider, Switch };
package/index.js CHANGED
@@ -13,9 +13,11 @@ import Button from './buttons/Button.svelte';
13
13
  import Checkbox from './inputs/Checkbox.svelte';
14
14
  import Dialog from './surfaces/Dialog.svelte';
15
15
  import Input from './inputs/Input.svelte';
16
+ import Label from './display/Label.svelte';
16
17
  import List from './lists/List.svelte';
17
18
  import Progress from './display/Progress.svelte';
18
19
  import Radio from './inputs/Radio.svelte';
19
20
  import Select from './inputs/Select.svelte';
20
21
  import Slider from './inputs/Slider.svelte';
21
- export { Button, Checkbox, Dialog, Input, List, Progress, Radio, Select, Slider };
22
+ import Switch from './inputs/Switch.svelte';
23
+ export { Button, Checkbox, Dialog, Input, Label, List, Progress, Radio, Select, Slider, Switch };