srcdev-nuxt-forms 2.4.9 → 2.4.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 (2) hide show
  1. package/components/utils/colour-scheme-select/ColourSchemeSelect.vue +63 -60
  2. package/package.json +1 -1
package/components/utils/colour-scheme-select/ColourSchemeSelect.vue CHANGED
@@ -30,7 +30,7 @@
30
30
  <script setup lang="ts">
31
31
  import propValidators from '../../forms/c12/prop-validators';
32
32
 
33
- defineProps({
33
+ const props = defineProps({
34
34
  name: {
35
35
  type: String,
36
36
  defaul: 'colour-scheme-select',
@@ -49,21 +49,25 @@ defineProps({
49
49
  return propValidators.theme.includes(value);
50
50
  },
51
51
  },
52
+ stepAnimationDuration: {
53
+ type: Number as PropType<number>,
54
+ default: 100,
55
+ },
52
56
  styleClassPassthrough: {
53
57
  type: Array as PropType<string[]>,
54
58
  default: () => [],
55
59
  },
56
60
  });
57
61
 
62
+ const duration = ref(props.stepAnimationDuration);
63
+
58
64
  const { currentColourScheme } = useColourScheme();
59
65
 
60
66
  const colourSchemeWrapper = ref<HTMLFormElement | null>(null);
61
- const colourSchemeInputElements = ref<HTMLDivElement[]>([]);
67
+ const colourSchemeGroupElements = ref<HTMLDivElement[]>([]);
68
+ const colourSchemeInputElements = ref<HTMLInputElement[]>([]);
62
69
  const showMarker = ref(false);
63
70
 
64
- // console.log('colourSchemeInputElements');
65
- // console.log(colourSchemeInputElements);
66
-
67
71
  const findIndexOfInputValueFromCurrentColourScheme = () => {
68
72
  if (currentColourScheme.value === 'auto') return 1;
69
73
  if (currentColourScheme.value === 'light') return 2;
@@ -71,41 +75,60 @@ const findIndexOfInputValueFromCurrentColourScheme = () => {
71
75
  return undefined;
72
76
  };
73
77
 
74
- // const findLeftOffsetOfInputValueFromCurrentColourScheme = (index: number) => {
75
- // const normalisedIndex = index - 1;
76
-
77
- // console.log(`findLeftOffsetOfInputValueFromCurrentColourScheme: ${normalisedIndex}`);
78
- // console.log(colourSchemeInputElements.value[normalisedIndex].offsetLeft);
78
+ const findIndexOfCheckedInput = () => {
79
+ return colourSchemeInputElements.value.findIndex((input) => input.checked);
80
+ };
79
81
 
80
- // return colourSchemeInputElements.value?.[normalisedIndex]?.getBoundingClientRect().left;
81
- // };
82
+ const currentActiveIndex = ref(findIndexOfCheckedInput());
82
83
 
83
- const setColourSchemeAttr = () => {
84
+ const setColourSchemeAttr = async () => {
84
85
  const index = findIndexOfInputValueFromCurrentColourScheme() ?? 0;
86
+
87
+ await nextTick();
88
+ currentActiveIndex.value = findIndexOfCheckedInput();
89
+
85
90
  const wrapperLeftPosition = colourSchemeWrapper.value?.getBoundingClientRect().left ?? 0;
86
91
  const parentLeftPosition = colourSchemeWrapper.value?.parentElement?.getBoundingClientRect().left ?? 0;
87
92
  const relativeLeftPosition = wrapperLeftPosition - parentLeftPosition;
88
- // const relativeLeftPosition = 0;
93
+
94
+ colourSchemeWrapper.value?.style.setProperty('--_select-scheme-marker-step-animation-duration', colourSchemeGroupElements.value?.length * duration.value + 'ms');
89
95
 
90
96
  colourSchemeWrapper.value?.style.setProperty('--_select-scheme-marker-position', index !== undefined ? index.toString() : '0');
91
- colourSchemeWrapper.value?.style.setProperty('--_select-scheme-marker-left-offset', colourSchemeInputElements.value?.[index - 1]?.offsetLeft - relativeLeftPosition + 'px');
92
- colourSchemeWrapper.value?.style.setProperty('--_select-scheme-marker-width', colourSchemeInputElements.value?.[index - 1]?.getBoundingClientRect().width + 'px');
97
+ colourSchemeWrapper.value?.style.setProperty('--_select-scheme-marker-left-offset', colourSchemeGroupElements.value?.[index - 1]?.offsetLeft - relativeLeftPosition + 'px');
98
+ colourSchemeWrapper.value?.style.setProperty('--_select-scheme-marker-width', colourSchemeGroupElements.value?.[index - 1]?.getBoundingClientRect().width + 'px');
99
+ };
100
+
101
+ const handleInputActiveClass = () => {
102
+ console.log(`handleInputActiveClass`, currentActiveIndex.value);
103
+ colourSchemeInputElements.value.forEach((element) => {
104
+ element.classList.remove('active');
105
+ });
106
+
107
+ setTimeout(() => {
108
+ colourSchemeInputElements.value?.[currentActiveIndex.value].classList.add('active');
109
+ }, duration.value);
93
110
  };
94
111
 
95
112
  onMounted(() => {
96
- colourSchemeInputElements.value = Array.from(colourSchemeWrapper.value?.querySelectorAll('.select-scheme-group') || []) as HTMLInputElement[];
113
+ colourSchemeGroupElements.value = Array.from(colourSchemeWrapper.value?.querySelectorAll('.select-scheme-group') || []) as HTMLInputElement[];
114
+ colourSchemeInputElements.value = Array.from(colourSchemeWrapper.value?.querySelectorAll('.scheme-input') || []) as HTMLInputElement[];
97
115
 
98
116
  if (colourSchemeWrapper.value !== null) {
99
117
  setColourSchemeAttr();
100
118
  setTimeout(() => {
101
119
  showMarker.value = true;
102
- }, 300);
120
+ handleInputActiveClass();
121
+ }, duration.value);
103
122
  }
104
123
  });
105
124
 
106
125
  watch(currentColourScheme, () => {
107
126
  setColourSchemeAttr();
108
127
  });
128
+
129
+ watch(currentActiveIndex, () => {
130
+ handleInputActiveClass();
131
+ });
109
132
  </script>
110
133
 
111
134
  <style lang="css">
@@ -125,9 +148,7 @@ watch(currentColourScheme, () => {
125
148
  --_form-items-gap: 1rem;
126
149
  --_form-padding: 0.6rem;
127
150
 
128
- /* --_select-scheme-marker-position: 1; */
129
-
130
- --_select-scheme-group-background-color: red;
151
+ --_select-scheme-group-background-color: var(--theme-form-checkbox-bg);
131
152
  --_select-scheme-group-padding: 0.5rem;
132
153
  --_select-scheme-group-border-width: 0.2rem;
133
154
  --_select-scheme-group-border-colour: transparent;
@@ -138,7 +159,7 @@ watch(currentColourScheme, () => {
138
159
  );
139
160
 
140
161
  --_scheme-icon-font-size: 2rem;
141
- --_scheme-icon-colour: white;
162
+ --_scheme-icon-colour: black;
142
163
 
143
164
  .colour-scheme-select-form {
144
165
  display: inline-grid;
@@ -153,36 +174,19 @@ watch(currentColourScheme, () => {
153
174
 
154
175
  .select-scheme-marker-wrapper {
155
176
  grid-area: select-stack;
156
- /* display: grid; */
157
- /* grid-template-columns: repeat(3, 1fr); */
158
177
  z-index: 1;
159
- /* grid-area: select-stack; */
160
- /* gap: var(--_form-items-gap); */
161
- /* transition: all 200ms; */
162
- /* transition-behavior: allow-discrete; */
163
-
164
- /* display: none; */
165
-
166
178
  display: flex;
167
179
  align-items: center;
168
180
  position: relative;
169
181
 
170
182
  .select-scheme-marker {
171
- /* grid-column: var(--_select-scheme-marker-position); */
172
183
  aspect-ratio: 1;
173
- /* width: calc(var(--_select-scheme-group-width) + (var(--_form-outline-width) * 2)); */
174
- /* translate: -1px 0; */
175
184
  width: var(--_select-scheme-group-width);
176
- /* 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; */
177
- /* translate: calc(var(--_select-scheme-marker-left-offset) - (var(--_select-scheme-group-outline-width) * 1) - (var(--_select-scheme-group-border-width) * 1)) 0; */
178
- transition: all 300ms ease-in-out;
185
+ transition: all var(--_select-scheme-marker-step-animation-duration) ease-in-out;
179
186
  background-color: var(--theme-form-radio-border);
180
187
  border-radius: 50%;
181
188
 
182
189
  position: absolute;
183
- /* left: calc(var(--_select-scheme-marker-left-offset) - var(--_form-border-width) - var(--_form-outline-width) - 1px); */
184
- /* left: calc(var(--_select-scheme-marker-left-offset) - calc(var(--_select-scheme-group-border-width) * 1.5) - var(--_scheme-icon-font-size)); */
185
- /* left: calc(var(--_select-scheme-marker-left-offset) - var(--_form-items-gap) - var(--_scheme-icon-font-size) + var(--_select-scheme-group-border-width) - 1px); */
186
190
  left: calc(var(--_select-scheme-marker-left-offset) - var(--_select-scheme-group-border-width));
187
191
 
188
192
  opacity: 0;
@@ -199,7 +203,6 @@ watch(currentColourScheme, () => {
199
203
  grid-template-columns: repeat(3, 1fr);
200
204
  align-items: center;
201
205
  width: fit-content;
202
- /* padding: var(--_form-padding); */
203
206
  z-index: 2;
204
207
  gap: var(--_form-items-gap);
205
208
  position: relative;
@@ -208,19 +211,24 @@ watch(currentColourScheme, () => {
208
211
  aspect-ratio: 1;
209
212
  display: grid;
210
213
  grid-template-areas: 'icon-stack';
211
- /* width: var(--_select-scheme-marker-width); */
212
214
  place-content: center;
213
- background-color: var(--_select-scheme-group-background-color);
215
+ background: var(--_select-scheme-group-background-color);
214
216
  border: var(--_select-scheme-group-border-width) solid var(--_select-scheme-group-border-colour);
215
217
  outline: var(--_select-scheme-group-outline-width) solid var(--_select-scheme-group-outline-colour);
216
218
  border-radius: 50%;
217
219
  padding: var(--_select-scheme-group-padding);
218
220
 
221
+ transition: background calc(var(--_select-scheme-marker-step-animation-duration) / 3);
222
+
219
223
  .scheme-icon {
220
224
  grid-area: icon-stack;
221
225
  display: block;
222
226
  color: var(--_scheme-icon-colour);
223
227
  font-size: var(--_scheme-icon-font-size);
228
+
229
+ &:hover {
230
+ cursor: pointer;
231
+ }
224
232
  }
225
233
 
226
234
  .scheme-input {
@@ -233,32 +241,27 @@ watch(currentColourScheme, () => {
233
241
  }
234
242
 
235
243
  &:has(input[value='auto']) {
236
- --_select-scheme-group-background-color: green;
237
-
238
- &:has(input[value='auto']:checked) {
239
- /* --_select-scheme-marker-position: 1; */
240
- /* --_select-scheme-group-border-colour: var(--theme-form-radio-border); */
241
- /* --_select-scheme-group-outline-colour: var(--theme-form-radio-outline); */
244
+ &:has(.active) {
245
+ --_select-scheme-group-background-color: green;
246
+ --_scheme-icon-colour: white;
242
247
  }
243
248
  }
244
249
 
245
250
  &:has(input[value='light']) {
246
- --_select-scheme-group-background-color: orange;
251
+ &:has(.active) {
252
+ /* background: rgb(180, 58, 91);
253
+ background: linear-gradient(90deg, rgba(180, 58, 91, 1) 0%, rgba(253, 29, 29, 1) 50%, rgba(252, 176, 69, 1) 100%); */
254
+ --_select-scheme-group-background-color: radial-gradient(circle, rgba(180, 58, 91, 1) 0%, rgba(253, 29, 29, 1) 27%, rgba(252, 176, 69, 1) 100%);
255
+ /* --_select-scheme-group-background-color: radial-gradient(circle, rgba(63, 94, 251, 1) 70%, rgba(63, 94, 251, 0.5550814075630253) 90%, rgba(255, 255, 255, 0.42622986694677867) 100%); */
247
256
 
248
- &:has(input[value='light']:checked) {
249
- /* --_select-scheme-marker-position: 2; */
250
- /* --_select-scheme-group-border-colour: var(--theme-form-radio-border); */
251
- /* --_select-scheme-group-outline-colour: var(--theme-form-radio-outline); */
257
+ --_scheme-icon-colour: white;
252
258
  }
253
259
  }
254
260
 
255
261
  &:has(input[value='dark']) {
256
- --_select-scheme-group-background-color: black;
257
-
258
- &:has(input[value='dark']:checked) {
259
- /* --_select-scheme-marker-position: 3; */
260
- /* --_select-scheme-group-border-colour: var(--theme-form-radio-border); */
261
- /* --_select-scheme-group-outline-colour: var(--theme-form-radio-outline); */
262
+ &:has(.active) {
263
+ --_select-scheme-group-background-color: black;
264
+ --_scheme-icon-colour: white;
262
265
  }
263
266
  }
264
267
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "srcdev-nuxt-forms",
3
3
  "type": "module",
4
- "version": "2.4.9",
4
+ "version": "2.4.11",
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",