srcdev-nuxt-forms 2.4.5 → 2.4.7

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 (4) hide show
  1. package/components/utils/colour-scheme-select/ColourSchemeSelect.vue +96 -34
  2. package/components/utils/dark-mode-switcher/DarkModeSwitcher.vue +3 -3
  3. package/composables/useColourScheme.ts +42 -25
  4. package/package.json +1 -1
package/components/utils/colour-scheme-select/ColourSchemeSelect.vue CHANGED
@@ -2,24 +2,24 @@
2
2
  <div class="colour-scheme-select" :data-size="size" :data-form-theme="theme">
3
3
  <p>Color Scheme select</p>
4
4
 
5
- <form class="colour-scheme-select-form mbe-20">
5
+ <form class="colour-scheme-select-form mbe-20" ref="colourSchemeWrapper">
6
6
  <div class="select-scheme-marker-wrapper">
7
- <div class="select-scheme-marker"></div>
7
+ <div class="select-scheme-marker" :class="[{ show: showMarker }]"></div>
8
8
  </div>
9
9
  <div class="select-scheme-group-wrapper">
10
10
  <div class="select-scheme-group">
11
11
  <LazyIcon name="material-symbols:night-sight-auto-sharp" class="scheme-icon" />
12
- <input type="radio" id="auto" name="colour-scheme" class="scheme-input" v-model="colourScheme" value="auto" />
12
+ <input type="radio" id="auto" name="colour-scheme" class="scheme-input" v-model="currentColourScheme" value="auto" />
13
13
  <label for="auto" class="sr-only">Auto</label>
14
14
  </div>
15
15
  <div class="select-scheme-group">
16
16
  <LazyIcon name="radix-icons:sun" class="scheme-icon" />
17
- <input type="radio" id="light" name="colour-scheme" class="scheme-input" v-model="colourScheme" value="light" />
17
+ <input type="radio" id="light" name="colour-scheme" class="scheme-input" v-model="currentColourScheme" value="light" />
18
18
  <label for="light" class="sr-only">Light</label>
19
19
  </div>
20
20
  <div class="select-scheme-group">
21
21
  <LazyIcon name="radix-icons:moon" class="scheme-icon" />
22
- <input type="radio" id="dark" name="colour-scheme" class="scheme-input" v-model="colourScheme" value="dark" />
22
+ <input type="radio" id="dark" name="colour-scheme" class="scheme-input" v-model="currentColourScheme" value="dark" />
23
23
  <label for="dark" class="sr-only">Dark</label>
24
24
  </div>
25
25
  </div>
@@ -55,9 +55,56 @@ defineProps({
55
55
  },
56
56
  });
57
57
 
58
- const colourScheme = ref<'auto' | 'dark' | 'light'>('auto');
58
+ const { currentColourScheme } = useColourScheme();
59
59
 
60
- useColourScheme(colourScheme);
60
+ const colourSchemeWrapper = ref<HTMLFormElement | null>(null);
61
+ const colourSchemeInputElements = ref<HTMLDivElement[]>([]);
62
+ const showMarker = ref(false);
63
+
64
+ // console.log('colourSchemeInputElements');
65
+ // console.log(colourSchemeInputElements);
66
+
67
+ const findIndexOfInputValueFromCurrentColourScheme = () => {
68
+ if (currentColourScheme.value === 'auto') return 1;
69
+ if (currentColourScheme.value === 'light') return 2;
70
+ if (currentColourScheme.value === 'dark') return 3;
71
+ return undefined;
72
+ };
73
+
74
+ // const findLeftOffsetOfInputValueFromCurrentColourScheme = (index: number) => {
75
+ // const normalisedIndex = index - 1;
76
+
77
+ // console.log(`findLeftOffsetOfInputValueFromCurrentColourScheme: ${normalisedIndex}`);
78
+ // console.log(colourSchemeInputElements.value[normalisedIndex].offsetLeft);
79
+
80
+ // return colourSchemeInputElements.value?.[normalisedIndex]?.getBoundingClientRect().left;
81
+ // };
82
+
83
+ const setColourSchemeAttr = () => {
84
+ const index = findIndexOfInputValueFromCurrentColourScheme() ?? 0;
85
+ const wrapperLeftPosition = colourSchemeWrapper.value?.getBoundingClientRect().left ?? 0;
86
+ const parentLeftPosition = colourSchemeWrapper.value?.parentElement?.getBoundingClientRect().left ?? 0;
87
+ const relativeLeftPosition = wrapperLeftPosition - parentLeftPosition;
88
+
89
+ colourSchemeWrapper.value?.style.setProperty('--_select-scheme-marker-position', index !== undefined ? index.toString() : '0');
90
+ colourSchemeWrapper.value?.style.setProperty('--_select-scheme-marker-left-offset', colourSchemeInputElements.value?.[index - 1]?.offsetLeft - relativeLeftPosition + 'px');
91
+ colourSchemeWrapper.value?.style.setProperty('--_select-scheme-marker-width', colourSchemeInputElements.value?.[index - 1]?.getBoundingClientRect().width + 'px');
92
+ };
93
+
94
+ onMounted(() => {
95
+ colourSchemeInputElements.value = Array.from(colourSchemeWrapper.value?.querySelectorAll('.select-scheme-group') || []) as HTMLInputElement[];
96
+
97
+ if (colourSchemeWrapper.value !== null) {
98
+ setColourSchemeAttr();
99
+ setTimeout(() => {
100
+ showMarker.value = true;
101
+ }, 300);
102
+ }
103
+ });
104
+
105
+ watch(currentColourScheme, () => {
106
+ setColourSchemeAttr();
107
+ });
61
108
  </script>
62
109
 
63
110
  <style lang="css">
@@ -77,14 +124,14 @@ useColourScheme(colourScheme);
77
124
  --_form-items-gap: 1rem;
78
125
  --_form-padding: 0.6rem;
79
126
 
80
- --_select-scheme-marker-position: 1;
127
+ /* --_select-scheme-marker-position: 1; */
81
128
 
82
129
  --_select-scheme-group-background-color: red;
83
130
  --_select-scheme-group-padding: 0.5rem;
84
- --_select-scheme-group-border-width: 0.1rem;
85
- --_select-scheme-group-border-colour: var(--theme-form-radio-border);
86
- --_select-scheme-group-outline-width: 0.1rem;
87
- --_select-scheme-group-outline-colour: var(--theme-form-radio-outline);
131
+ --_select-scheme-group-border-width: 0.2rem;
132
+ --_select-scheme-group-border-colour: transparent;
133
+ --_select-scheme-group-outline-width: 0.2rem;
134
+ --_select-scheme-group-outline-colour: transparent;
88
135
  --_select-scheme-group-width: calc(
89
136
  var(--_scheme-icon-font-size) + (var(--_select-scheme-group-padding) * 2) + (var(--_select-scheme-group-border-width) * 2) + (var(--_select-scheme-group-outline-width) * 2)
90
137
  );
@@ -101,30 +148,44 @@ useColourScheme(colourScheme);
101
148
  border: var(--_form-border-width) solid var(--_form-border-colour);
102
149
  outline: var(--_form-outline-width) solid var(--_form-outline-colour);
103
150
  border-radius: var(--_form-border-radius);
104
- padding: var(--_form-padding);
105
151
 
106
152
  .select-scheme-marker-wrapper {
107
153
  grid-area: select-stack;
108
- display: grid;
154
+ /* display: grid; */
109
155
  /* grid-template-columns: repeat(3, 1fr); */
110
- grid-template-columns: repeat(3, 1fr);
111
156
  z-index: 1;
112
- grid-area: select-stack;
113
- gap: var(--_form-items-gap);
114
- transition: all 200ms;
115
- transition-behavior: allow-discrete;
157
+ /* grid-area: select-stack; */
158
+ /* gap: var(--_form-items-gap); */
159
+ /* transition: all 200ms; */
160
+ /* transition-behavior: allow-discrete; */
161
+
162
+ /* display: none; */
116
163
 
117
- display: none;
164
+ display: flex;
165
+ align-items: center;
166
+ position: relative;
118
167
 
119
168
  .select-scheme-marker {
120
- grid-column: var(--_select-scheme-marker-position);
169
+ /* grid-column: var(--_select-scheme-marker-position); */
121
170
  aspect-ratio: 1;
122
171
  /* width: calc(var(--_select-scheme-group-width) + (var(--_form-outline-width) * 2)); */
123
172
  /* translate: -1px 0; */
124
173
  width: var(--_select-scheme-group-width);
125
- transition: all 200ms;
126
- transition-behavior: allow-discrete;
127
- background-color: purple;
174
+ /* translate: calc(var(--_select-scheme-marker-left-offset) - var(--_form-items-gap) - (var(--_select-scheme-group-outline-width) * 1) - (var(--_select-scheme-group-border-width) * 1)) 0; */
175
+ /* translate: calc(var(--_select-scheme-marker-left-offset) - (var(--_select-scheme-group-outline-width) * 1) - (var(--_select-scheme-group-border-width) * 1)) 0; */
176
+ transition: all 300ms ease-in-out;
177
+ background-color: var(--theme-form-radio-border);
178
+ border-radius: 50%;
179
+
180
+ position: absolute;
181
+ /* left: calc(var(--_select-scheme-marker-left-offset) - var(--_form-border-width) - var(--_form-outline-width) - 1px); */
182
+ left: calc(var(--_select-scheme-marker-left-offset) - calc(var(--_select-scheme-group-border-width) * 1.5) - var(--_scheme-icon-font-size));
183
+
184
+ opacity: 0;
185
+
186
+ &.show {
187
+ opacity: 1;
188
+ }
128
189
  }
129
190
  }
130
191
 
@@ -134,6 +195,7 @@ useColourScheme(colourScheme);
134
195
  grid-template-columns: repeat(3, 1fr);
135
196
  align-items: center;
136
197
  width: fit-content;
198
+ padding: var(--_form-padding);
137
199
  z-index: 2;
138
200
  gap: var(--_form-items-gap);
139
201
 
@@ -141,7 +203,7 @@ useColourScheme(colourScheme);
141
203
  aspect-ratio: 1;
142
204
  display: grid;
143
205
  grid-template-areas: 'icon-stack';
144
- width: var(--_select-scheme-group-width);
206
+ /* width: var(--_select-scheme-marker-width); */
145
207
  place-content: center;
146
208
  background-color: var(--_select-scheme-group-background-color);
147
209
  border: var(--_select-scheme-group-border-width) solid var(--_select-scheme-group-border-colour);
@@ -169,9 +231,9 @@ useColourScheme(colourScheme);
169
231
  --_select-scheme-group-background-color: green;
170
232
 
171
233
  &:has(input[value='auto']:checked) {
172
- --_select-scheme-marker-position: 1;
173
- --_select-scheme-group-border-colour: var(--theme-form-radio-border);
174
- --_select-scheme-group-outline-colour: var(--theme-form-radio-outline);
234
+ /* --_select-scheme-marker-position: 1; */
235
+ /* --_select-scheme-group-border-colour: var(--theme-form-radio-border); */
236
+ /* --_select-scheme-group-outline-colour: var(--theme-form-radio-outline); */
175
237
  }
176
238
  }
177
239
 
@@ -179,9 +241,9 @@ useColourScheme(colourScheme);
179
241
  --_select-scheme-group-background-color: orange;
180
242
 
181
243
  &:has(input[value='light']:checked) {
182
- --_select-scheme-marker-position: 2;
183
- --_select-scheme-group-border-colour: var(--theme-form-radio-border);
184
- --_select-scheme-group-outline-colour: var(--theme-form-radio-outline);
244
+ /* --_select-scheme-marker-position: 2; */
245
+ /* --_select-scheme-group-border-colour: var(--theme-form-radio-border); */
246
+ /* --_select-scheme-group-outline-colour: var(--theme-form-radio-outline); */
185
247
  }
186
248
  }
187
249
 
@@ -189,9 +251,9 @@ useColourScheme(colourScheme);
189
251
  --_select-scheme-group-background-color: black;
190
252
 
191
253
  &:has(input[value='dark']:checked) {
192
- --_select-scheme-marker-position: 3;
193
- --_select-scheme-group-border-colour: var(--theme-form-radio-border);
194
- --_select-scheme-group-outline-colour: var(--theme-form-radio-outline);
254
+ /* --_select-scheme-marker-position: 3; */
255
+ /* --_select-scheme-group-border-colour: var(--theme-form-radio-border); */
256
+ /* --_select-scheme-group-outline-colour: var(--theme-form-radio-outline); */
195
257
  }
196
258
  }
197
259
  }
package/components/utils/dark-mode-switcher/DarkModeSwitcher.vue CHANGED
@@ -1,5 +1,5 @@
1
1
  <template>
2
- <ToggleSwitchWithLabelInline v-model="displayMode" :name :label labelWeight="normal" :size trueValue="dark" falseValue="light" :style-class-passthrough>
2
+ <ToggleSwitchWithLabelInline v-model="currentColourScheme" :name :label labelWeight="normal" :size trueValue="dark" falseValue="light" :style-class-passthrough>
3
3
  <template #iconOn>
4
4
  <LazyIcon name="radix-icons:moon" class="icon" />
5
5
  </template>
@@ -41,7 +41,7 @@ defineProps({
41
41
  },
42
42
  });
43
43
 
44
- const displayMode = ref<'auto' | 'dark' | 'light'>('auto');
44
+ // const displayMode = ref<'auto' | 'dark' | 'light'>('auto');
45
45
 
46
- useColourScheme(displayMode);
46
+ const { currentColourScheme } = useColourScheme();
47
47
  </script>
package/composables/useColourScheme.ts CHANGED
@@ -1,41 +1,58 @@
1
- export const useColourScheme = (colourScheme: Ref<'auto' | 'dark' | 'light'> = ref('light')) => {
2
- const updateColourScheme = (newColourScheme: 'auto' | 'dark' | 'light') => {
3
- colourScheme.value = newColourScheme;
4
- };
1
+ export const useColourScheme = () => {
2
+ // const currentColourScheme = computed(() => {
3
+ // return colourScheme.value;
4
+ // });
5
+
6
+ const currentColourScheme = ref<'auto' | 'dark' | 'light' | null>(null);
7
+
8
+ // const updateColourScheme = (newColourScheme: 'auto' | 'dark' | 'light') => {
9
+ // colourScheme.value = newColourScheme;
10
+ // };
11
+
12
+ // const getSetPrefereredColourScheme = () => {
13
+ // if (import.meta.client) {
14
+ // if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches && !document.documentElement.dataset.colorScheme) {
15
+ // colourScheme.value = 'dark';
16
+ // } else {
17
+ // colourScheme.value = 'light';
18
+ // }
19
+ // }
20
+ // };
5
21
 
6
- const getSetPrefereredColourScheme = () => {
22
+ const returnSavedColourPreferenceFromLocalStorage = () => {
7
23
  if (import.meta.client) {
8
- if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches && !document.documentElement.dataset.colorScheme) {
9
- colourScheme.value = 'dark';
10
- } else {
11
- colourScheme.value = 'light';
12
- }
24
+ return localStorage.getItem('colourScheme') as 'auto' | 'dark' | 'light' | null;
13
25
  }
14
26
  };
15
27
 
16
28
  onMounted(() => {
17
- if (import.meta.client) {
18
- const storedMode = localStorage.getItem('colourScheme');
19
- if (storedMode) {
20
- colourScheme.value = storedMode as 'dark' | 'light';
21
- } else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
22
- colourScheme.value = 'dark';
23
- } else {
24
- colourScheme.value = 'light';
25
- }
26
- }
29
+ currentColourScheme.value = returnSavedColourPreferenceFromLocalStorage() || 'auto';
30
+ // colourScheme.value = currentColourScheme.value;
31
+ //
32
+ // if (import.meta.client) {
33
+ // const savedColourScheme = localStorage.getItem('colourScheme');
34
+ // if (savedColourScheme) {
35
+ // colourScheme.value = savedColourScheme as 'dark' | 'light';
36
+ // } else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
37
+ // colourScheme.value = 'dark';
38
+ // } else {
39
+ // colourScheme.value = 'light';
40
+ // }
41
+ // }
27
42
  });
28
43
 
29
- watch(colourScheme, (newVal) => {
30
- if (import.meta.client) {
44
+ watch(currentColourScheme, (newVal) => {
45
+ if (import.meta.client && newVal !== null) {
31
46
  localStorage.setItem('colourScheme', newVal);
32
47
  document.documentElement.dataset.colorScheme = newVal;
48
+ currentColourScheme.value = newVal;
33
49
  }
34
50
  });
35
51
 
36
52
  return {
37
- colourScheme,
38
- updateColourScheme,
39
- getSetPrefereredColourScheme,
53
+ currentColourScheme,
54
+ // colourScheme,
55
+ // updateColourScheme,
56
+ // getSetPrefereredColourScheme,
40
57
  };
41
58
  };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "srcdev-nuxt-forms",
3
3
  "type": "module",
4
- "version": "2.4.5",
4
+ "version": "2.4.7",
5
5
  "main": "nuxt.config.ts",
6
6
  "scripts": {
7
7
  "clean": "rm -rf .nuxt && rm -rf .output && rm -rf .playground/.nuxt && rm -rf .playground/.output",