@geoffcox/sterling-svelte 1.0.3 → 1.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.
Files changed (9) hide show
  1. package/Callout.svelte +2 -2
  2. package/Checkbox.svelte +1 -1
  3. package/ColorPicker.svelte +115 -83
  4. package/Label.svelte +9 -4
  5. package/Popover.svelte +5 -2
  6. package/mediaQueries/prefersColorSchemeDark.js +8 -4
  7. package/mediaQueries/prefersReducedMotion.js +8 -4
  8. package/mediaQueries/usingKeyboard.js +9 -5
  9. package/package.json +1 -1
package/Callout.svelte CHANGED
@@ -30,7 +30,7 @@ let bodyHeight = 0;
30
30
  let resizeObserver = undefined;
31
31
  // ----- Portal Host ----- //
32
32
  const ensurePortalHost = () => {
33
- if (document) {
33
+ if (globalThis?.document) {
34
34
  if (portalHost) {
35
35
  return portalHost;
36
36
  }
@@ -142,7 +142,7 @@ ensurePortalHost();
142
142
 
143
143
  {#if open || !conditionalRender}
144
144
  <div
145
- use:portal={{ target: portalHost ?? document.body }}
145
+ use:portal={{ target: portalHost ?? globalThis?.document?.body }}
146
146
  class="sterling-callout-portal"
147
147
  transition:fadeMotion|global={{ duration: 250 }}
148
148
  >
package/Checkbox.svelte CHANGED
@@ -28,7 +28,7 @@ export const focus = (options) => {
28
28
  @component
29
29
  A styled HTML input type=checkbox element.
30
30
  -->
31
- <div class={`sterling-checkbox ${variant}`} class:disabled>
31
+ <div class={`sterling-checkbox ${variant}`} class:checked class:disabled>
32
32
  <div class="container">
33
33
  <input
34
34
  bind:this={inputRef}
package/ColorPicker.svelte CHANGED
@@ -36,107 +36,139 @@ let tabListRef;
36
36
  let tabsRef;
37
37
  // ----- Update HSL, RGB, Text ----- //
38
38
  const updateFromRgb = async () => {
39
- if (!updating && (colorFormat === 'hex' || colorFormat === 'rgb')) {
40
- updating = true;
41
- const newAlpha = colorFormat === 'hex' ? hexAlpha / 255 : alpha;
42
- const color = tinycolor({ r: red, g: green, b: blue, a: newAlpha });
43
- const hsl = color.toHsl();
44
- hue = Math.round(hsl.h);
45
- saturation = Math.round(hsl.s * 100);
46
- lightness = Math.round(hsl.l * 100);
47
- switch (colorFormat) {
48
- case 'rgb':
49
- colorText = color.toRgbString();
50
- hexAlpha = Math.round(alpha * 255);
51
- break;
52
- case 'hex':
53
- colorText = alpha === 100 ? color.toHexString() : color.toHex8String();
54
- alpha = round(hexAlpha / 255, 2);
55
- break;
56
- }
57
- await tick();
58
- updating = false;
59
- }
60
- };
61
- const updateFromHsl = async () => {
62
- if (!updating && colorFormat === 'hsl') {
63
- updating = true;
64
- const color = tinycolor({ h: hue, s: saturation / 100, l: lightness / 100, a: alpha });
65
- const rgb = color.toRgb();
66
- red = rgb.r;
67
- green = rgb.g;
68
- blue = rgb.b;
69
- colorText = color.toHslString();
70
- hexAlpha = Math.round(alpha * 255);
71
- await tick();
72
- updating = false;
73
- }
74
- };
75
- const updateColorsFromText = async () => {
76
- const color = tinycolor(colorText);
77
- if (color.isValid) {
78
- if (!updating) {
39
+ // tinycolor requires window
40
+ if (globalThis.window) {
41
+ if (!updating && (colorFormat === 'hex' || colorFormat === 'rgb')) {
79
42
  updating = true;
80
- switch (color.format) {
81
- case 'hsl':
82
- colorFormat = 'hsl';
83
- break;
43
+ const newAlpha = colorFormat === 'hex' ? hexAlpha / 255 : alpha;
44
+ const color = tinycolor({ r: red, g: green, b: blue, a: newAlpha });
45
+ const hsl = color.toHsl();
46
+ hue = Math.round(hsl.h);
47
+ saturation = Math.round(hsl.s * 100);
48
+ lightness = Math.round(hsl.l * 100);
49
+ switch (colorFormat) {
84
50
  case 'rgb':
85
- colorFormat = 'rgb';
51
+ colorText = color.toRgbString();
52
+ hexAlpha = Math.round(alpha * 255);
86
53
  break;
87
54
  case 'hex':
88
- case 'hex4':
89
- case 'hex8':
90
- colorFormat = 'hex';
91
- break;
92
- default:
55
+ colorText = alpha === 100 ? color.toHexString() : color.toHex8String();
56
+ alpha = round(hexAlpha / 255, 2);
93
57
  break;
94
58
  }
95
- const hsl = color.toHsl();
96
- hue = Math.round(hsl.h);
97
- saturation = Math.round(hsl.s * 100);
98
- lightness = Math.round(hsl.l * 100);
59
+ await tick();
60
+ updating = false;
61
+ }
62
+ }
63
+ };
64
+ const updateFromHsl = async () => {
65
+ // tinycolor requires window
66
+ if (globalThis.window) {
67
+ if (!updating && colorFormat === 'hsl') {
68
+ updating = true;
69
+ const color = tinycolor({ h: hue, s: saturation / 100, l: lightness / 100, a: alpha });
99
70
  const rgb = color.toRgb();
100
71
  red = rgb.r;
101
72
  green = rgb.g;
102
73
  blue = rgb.b;
103
- if (rgb.a) {
104
- alpha = hsl.a;
105
- hexAlpha = Math.round(alpha * 255);
106
- }
74
+ colorText = color.toHslString();
75
+ hexAlpha = Math.round(alpha * 255);
107
76
  await tick();
108
77
  updating = false;
109
78
  }
110
79
  }
111
80
  };
112
- $: colorText, updateColorsFromText();
113
- $: colorFormat, hue, saturation, lightness, alpha, updateFromHsl();
114
- $: colorFormat, red, green, blue, alpha, hexAlpha, updateFromRgb();
115
- // ----- Event handlers ----- //
116
- const onInputBlur = async () => {
117
- if (!updating) {
118
- if (colorText.trim().length === 0) {
119
- colorText = defaultColorText;
120
- return;
121
- }
81
+ const updateColorsFromText = async () => {
82
+ // tinycolor requires window
83
+ if (globalThis.window) {
122
84
  const color = tinycolor(colorText);
123
85
  if (color.isValid) {
124
- updating = true;
125
- switch (colorFormat) {
126
- case 'hsl':
127
- colorText = color.toHslString();
128
- break;
129
- case 'rgb':
130
- colorText = color.toRgbString();
131
- break;
132
- case 'hex':
133
- colorText = alpha === 1 ? color.toHexString() : color.toHex8String();
134
- break;
135
- default:
136
- break;
86
+ if (!updating) {
87
+ updating = true;
88
+ switch (color.format) {
89
+ case 'hsl':
90
+ colorFormat = 'hsl';
91
+ break;
92
+ case 'rgb':
93
+ colorFormat = 'rgb';
94
+ break;
95
+ case 'hex':
96
+ case 'hex4':
97
+ case 'hex8':
98
+ colorFormat = 'hex';
99
+ break;
100
+ default:
101
+ break;
102
+ }
103
+ const hsl = color.toHsl();
104
+ hue = Math.round(hsl.h);
105
+ saturation = Math.round(hsl.s * 100);
106
+ lightness = Math.round(hsl.l * 100);
107
+ const rgb = color.toRgb();
108
+ red = rgb.r;
109
+ green = rgb.g;
110
+ blue = rgb.b;
111
+ if (rgb.a) {
112
+ alpha = hsl.a;
113
+ hexAlpha = Math.round(alpha * 255);
114
+ }
115
+ await tick();
116
+ updating = false;
117
+ }
118
+ }
119
+ }
120
+ };
121
+ $: {
122
+ globalThis.window;
123
+ colorText;
124
+ updateColorsFromText();
125
+ }
126
+ $: {
127
+ globalThis.window;
128
+ colorFormat;
129
+ hue;
130
+ saturation;
131
+ lightness;
132
+ alpha;
133
+ updateFromHsl();
134
+ }
135
+ $: {
136
+ globalThis.window;
137
+ colorFormat;
138
+ red;
139
+ green;
140
+ blue;
141
+ alpha;
142
+ hexAlpha;
143
+ updateFromRgb();
144
+ }
145
+ // ----- Event handlers ----- //
146
+ const onInputBlur = async () => {
147
+ if (globalThis.window && tinycolor) {
148
+ if (!updating) {
149
+ if (colorText.trim().length === 0) {
150
+ colorText = defaultColorText;
151
+ return;
152
+ }
153
+ const color = tinycolor(colorText);
154
+ if (color.isValid) {
155
+ updating = true;
156
+ switch (colorFormat) {
157
+ case 'hsl':
158
+ colorText = color.toHslString();
159
+ break;
160
+ case 'rgb':
161
+ colorText = color.toRgbString();
162
+ break;
163
+ case 'hex':
164
+ colorText = alpha === 1 ? color.toHexString() : color.toHex8String();
165
+ break;
166
+ default:
167
+ break;
168
+ }
169
+ await tick();
170
+ updating = false;
137
171
  }
138
- await tick();
139
- updating = false;
140
172
  }
141
173
  }
142
174
  };
package/Label.svelte CHANGED
@@ -1,4 +1,5 @@
1
- <script>import Tooltip from './Tooltip.svelte';
1
+ <script>import { onMount } from 'svelte';
2
+ import Tooltip from './Tooltip.svelte';
2
3
  import { usingKeyboard } from './mediaQueries/usingKeyboard';
3
4
  // ----- Props ----- //
4
5
  let htmlFor = undefined;
@@ -82,11 +83,15 @@ const mutationCallback = (mutations) => {
82
83
  targetDisabled = disabled;
83
84
  }
84
85
  };
85
- let mutationObserver = new MutationObserver(mutationCallback);
86
+ let mutationObserver;
87
+ onMount(() => {
88
+ mutationObserver = new MutationObserver(mutationCallback);
89
+ return () => mutationObserver?.disconnect();
90
+ });
86
91
  $: {
87
- mutationObserver.disconnect();
92
+ mutationObserver?.disconnect();
88
93
  if (targetRef) {
89
- mutationObserver.observe(targetRef, {
94
+ mutationObserver?.observe(targetRef, {
90
95
  attributes: true
91
96
  });
92
97
  }
package/Popover.svelte CHANGED
@@ -27,7 +27,7 @@ let bodyHeight = 0;
27
27
  let resizeObserver = undefined;
28
28
  // ----- Portal Host ----- //
29
29
  const ensurePortalHost = () => {
30
- if (document) {
30
+ if (globalThis?.document) {
31
31
  if (portalHost) {
32
32
  return portalHost;
33
33
  }
@@ -87,7 +87,10 @@ ensurePortalHost();
87
87
  </script>
88
88
 
89
89
  {#if open || !conditionalRender}
90
- <div use:portal={{ target: portalHost ?? document.body }} class="sterling-popover-portal">
90
+ <div
91
+ use:portal={{ target: portalHost ?? globalThis?.document?.body }}
92
+ class="sterling-popover-portal"
93
+ >
91
94
  <!-- svelte-ignore a11y-no-static-element-interactions -->
92
95
  <div
93
96
  bind:this={popupRef}
package/mediaQueries/prefersColorSchemeDark.js CHANGED
@@ -1,10 +1,14 @@
1
+ import { onMount } from 'svelte';
1
2
  import { writable } from 'svelte/store';
2
3
  export const prefersColorSchemeDark = writable(false, (set) => {
3
- const matchMedia = window.matchMedia('(prefers-color-scheme: dark)');
4
- set(matchMedia.matches);
4
+ let matchMedia = undefined;
5
5
  const mediaChangeHandler = (e) => set(e.matches);
6
- matchMedia.addEventListener('change', mediaChangeHandler);
6
+ onMount(() => {
7
+ matchMedia = window.matchMedia('(prefers-color-scheme: dark)');
8
+ set(matchMedia.matches);
9
+ matchMedia.addEventListener('change', mediaChangeHandler);
10
+ });
7
11
  return () => {
8
- matchMedia.removeEventListener('change', mediaChangeHandler);
12
+ matchMedia?.removeEventListener('change', mediaChangeHandler);
9
13
  };
10
14
  });
package/mediaQueries/prefersReducedMotion.js CHANGED
@@ -1,10 +1,14 @@
1
+ import { onMount } from 'svelte';
1
2
  import { writable } from 'svelte/store';
2
3
  export const prefersReducedMotion = writable(false, (set) => {
3
- const matchMedia = window.matchMedia('(prefers-reduced-motion: reduce)');
4
- set(matchMedia.matches);
4
+ let matchMedia = undefined;
5
5
  const mediaChangeHandler = (e) => set(e.matches);
6
- matchMedia.addEventListener('change', mediaChangeHandler);
6
+ onMount(() => {
7
+ matchMedia = window.matchMedia('(prefers-reduced-motion: reduce)');
8
+ set(matchMedia.matches);
9
+ matchMedia.addEventListener('change', mediaChangeHandler);
10
+ });
7
11
  return () => {
8
- matchMedia.removeEventListener('change', mediaChangeHandler);
12
+ matchMedia?.removeEventListener('change', mediaChangeHandler);
9
13
  };
10
14
  });
package/mediaQueries/usingKeyboard.js CHANGED
@@ -1,13 +1,17 @@
1
- import { createKeyborg } from 'keyborg';
1
+ import { onMount } from 'svelte';
2
2
  import { writable } from 'svelte/store';
3
+ import { createKeyborg } from 'keyborg';
3
4
  export const usingKeyboard = writable(false, (set) => {
4
- let keyborg = createKeyborg(window);
5
- set(keyborg.isNavigatingWithKeyboard());
5
+ let keyborg = undefined;
6
6
  const keyborgHandler = (value) => {
7
7
  set(value);
8
8
  };
9
- keyborg.subscribe(keyborgHandler);
9
+ onMount(() => {
10
+ keyborg = createKeyborg(window);
11
+ set(keyborg.isNavigatingWithKeyboard());
12
+ keyborg.subscribe(keyborgHandler);
13
+ });
10
14
  return () => {
11
- keyborg.unsubscribe(keyborgHandler);
15
+ keyborg?.unsubscribe(keyborgHandler);
12
16
  };
13
17
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@geoffcox/sterling-svelte",
3
- "version": "1.0.3",
3
+ "version": "1.0.4",
4
4
  "author": "Geoff Cox",
5
5
  "description": "A modern, accessible, and lightweight component library for Svelte.",
6
6
  "license": "MIT",