free-astro-components 1.1.0 → 1.1.2

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 (3) hide show
  1. package/package.json +1 -1
  2. package/src/components/ThemeSwitch.astro +15 -13
  3. package/src/utils/utils.ts +11 -7
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "description": "A collection of free Astro components",
4
4
  "author": "Denis Ventura",
5
5
  "type": "module",
6
- "version": "1.1.0",
6
+ "version": "1.1.2",
7
7
  "exports": {
8
8
  ".": {
9
9
  "import": {
package/src/components/ThemeSwitch.astro CHANGED
@@ -52,18 +52,6 @@ const { label, class: className } = Astro.props
52
52
  color: rgb(var(--ac-color-700));
53
53
  font-size: var(--ac-text-sm);
54
54
 
55
- &:has([aria-checked='true']) {
56
- .ac-theme-switch-icon--dark {
57
- display: none;
58
- }
59
- }
60
-
61
- &:has([aria-checked='false']) {
62
- .ac-theme-switch-icon--light {
63
- display: none;
64
- }
65
- }
66
-
67
55
  &:hover {
68
56
  .ac-theme-switch-icon {
69
57
  color: var(--ac-primary-hover);
@@ -85,6 +73,14 @@ const { label, class: className } = Astro.props
85
73
  }
86
74
  }
87
75
 
76
+ :global(html[data-theme="dark"]) .ac-theme-switch-icon--light {
77
+ display: none;
78
+ }
79
+
80
+ :global(html[data-theme="light"]) .ac-theme-switch-icon--dark {
81
+ display: none;
82
+ }
83
+
88
84
  .ac-theme-switch {
89
85
  height: 0;
90
86
  opacity: 0;
@@ -112,6 +108,13 @@ const { label, class: className } = Astro.props
112
108
  }
113
109
  </style>
114
110
 
111
+ <script is:inline>
112
+ (() => {
113
+ const theme = localStorage.getItem('theme') || 'light'
114
+ document.documentElement.setAttribute('data-theme', theme)
115
+ })();
116
+ </script>
117
+
115
118
  <script>
116
119
  import { DOMLoaded } from '../utils/utils'
117
120
 
@@ -121,7 +124,6 @@ const { label, class: className } = Astro.props
121
124
  ) as NodeListOf<HTMLInputElement>
122
125
 
123
126
  const theme = localStorage.getItem('theme') || 'light'
124
- document.documentElement.setAttribute('data-theme', theme)
125
127
 
126
128
  const isLight = theme === 'light'
127
129
  themeSwitches.forEach((themeSwitch) => {
package/src/utils/utils.ts CHANGED
@@ -1,4 +1,4 @@
1
- let lastWidth = window.innerWidth
1
+ let lastWidth: number;
2
2
 
3
3
  export const DOMLoaded = (callback: () => void) => {
4
4
  if (document.readyState === 'loading') {
@@ -31,12 +31,16 @@ export const isTouchDevice = () => {
31
31
  }
32
32
 
33
33
  export const hasViewportWidthChanged = (): boolean => {
34
- const currentWidth = window.innerWidth
35
- const widthChanged = currentWidth !== lastWidth
34
+ if (typeof window !== 'undefined') {
35
+ const currentWidth = window.innerWidth;
36
+ const widthChanged = currentWidth !== lastWidth;
36
37
 
37
- if (widthChanged) {
38
- lastWidth = currentWidth
38
+ if (widthChanged) {
39
+ lastWidth = currentWidth;
40
+ }
41
+
42
+ return widthChanged;
39
43
  }
40
44
 
41
- return widthChanged
42
- }
45
+ return false;
46
+ };