srcdev-nuxt-forms 2.4.8 → 2.4.10

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 +65 -61
  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,37 +174,20 @@ 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
- left: calc(var(--_select-scheme-marker-left-offset) - 29px);
190
+ left: calc(var(--_select-scheme-marker-left-offset) - var(--_select-scheme-group-border-width));
187
191
 
188
192
  opacity: 0;
189
193
 
@@ -199,27 +203,32 @@ 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);
208
+ position: relative;
205
209
 
206
210
  .select-scheme-group {
207
211
  aspect-ratio: 1;
208
212
  display: grid;
209
213
  grid-template-areas: 'icon-stack';
210
- /* width: var(--_select-scheme-marker-width); */
211
214
  place-content: center;
212
- background-color: var(--_select-scheme-group-background-color);
215
+ background: var(--_select-scheme-group-background-color);
213
216
  border: var(--_select-scheme-group-border-width) solid var(--_select-scheme-group-border-colour);
214
217
  outline: var(--_select-scheme-group-outline-width) solid var(--_select-scheme-group-outline-colour);
215
218
  border-radius: 50%;
216
219
  padding: var(--_select-scheme-group-padding);
217
220
 
221
+ transition: background calc(var(--_select-scheme-marker-step-animation-duration) / 3);
222
+
218
223
  .scheme-icon {
219
224
  grid-area: icon-stack;
220
225
  display: block;
221
226
  color: var(--_scheme-icon-colour);
222
227
  font-size: var(--_scheme-icon-font-size);
228
+
229
+ &:hover {
230
+ cursor: pointer;
231
+ }
223
232
  }
224
233
 
225
234
  .scheme-input {
@@ -232,32 +241,27 @@ watch(currentColourScheme, () => {
232
241
  }
233
242
 
234
243
  &:has(input[value='auto']) {
235
- --_select-scheme-group-background-color: green;
236
-
237
- &:has(input[value='auto']:checked) {
238
- /* --_select-scheme-marker-position: 1; */
239
- /* --_select-scheme-group-border-colour: var(--theme-form-radio-border); */
240
- /* --_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;
241
247
  }
242
248
  }
243
249
 
244
250
  &:has(input[value='light']) {
245
- --_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%); */
246
256
 
247
- &:has(input[value='light']:checked) {
248
- /* --_select-scheme-marker-position: 2; */
249
- /* --_select-scheme-group-border-colour: var(--theme-form-radio-border); */
250
- /* --_select-scheme-group-outline-colour: var(--theme-form-radio-outline); */
257
+ --_scheme-icon-colour: white;
251
258
  }
252
259
  }
253
260
 
254
261
  &:has(input[value='dark']) {
255
- --_select-scheme-group-background-color: black;
256
-
257
- &:has(input[value='dark']:checked) {
258
- /* --_select-scheme-marker-position: 3; */
259
- /* --_select-scheme-group-border-colour: var(--theme-form-radio-border); */
260
- /* --_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;
261
265
  }
262
266
  }
263
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.8",
4
+ "version": "2.4.10",
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",