srcdev-nuxt-forms 6.1.8 → 6.1.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.
@@ -1,7 +1,5 @@
1
1
  <template>
2
2
  <div class="colour-scheme-select" :data-size="size" :data-theme="theme">
3
- <p>Color Scheme select</p>
4
-
5
3
  <form class="colour-scheme-select-form mbe-20" ref="colourSchemeWrapper">
6
4
  <div class="select-scheme-marker-wrapper">
7
5
  <div class="select-scheme-marker" :class="[{ show: showMarker }]"></div>
@@ -9,18 +7,18 @@
9
7
  <div class="select-scheme-group-wrapper">
10
8
  <div class="select-scheme-group">
11
9
  <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="currentColourScheme" value="auto" />
13
- <label for="auto" class="sr-only">Auto</label>
10
+ <input type="radio" id="auto" name="colour-scheme" class="scheme-input" v-model="colourMode" value="auto" />
11
+ <label for="auto" class="sr-only">{{ labels.auto }}</label>
14
12
  </div>
15
13
  <div class="select-scheme-group">
16
14
  <LazyIcon name="radix-icons:sun" class="scheme-icon" />
17
- <input type="radio" id="light" name="colour-scheme" class="scheme-input" v-model="currentColourScheme" value="light" />
18
- <label for="light" class="sr-only">Light</label>
15
+ <input type="radio" id="light" name="colour-scheme" class="scheme-input" v-model="colourMode" value="light" />
16
+ <label for="light" class="sr-only">{{ labels.light }}</label>
19
17
  </div>
20
18
  <div class="select-scheme-group">
21
19
  <LazyIcon name="radix-icons:moon" class="scheme-icon" />
22
- <input type="radio" id="dark" name="colour-scheme" class="scheme-input" v-model="currentColourScheme" value="dark" />
23
- <label for="dark" class="sr-only">Dark</label>
20
+ <input type="radio" id="dark" name="colour-scheme" class="scheme-input" v-model="colourMode" value="dark" />
21
+ <label for="dark" class="sr-only">{{ labels.dark }}</label>
24
22
  </div>
25
23
  </div>
26
24
  </form>
@@ -28,25 +26,33 @@
28
26
  </template>
29
27
 
30
28
  <script setup lang="ts">
31
- import propValidators from '../../forms/c12/prop-validators';
29
+ import propValidators from "../../forms/c12/prop-validators"
32
30
 
33
31
  const props = defineProps({
34
32
  name: {
35
33
  type: String,
36
- defaul: 'colour-scheme-select',
34
+ defaul: "colour-scheme-select",
35
+ },
36
+ labels: {
37
+ type: Object as PropType<{ [key: string]: string }>,
38
+ default: () => ({
39
+ auto: "Auto",
40
+ light: "Light",
41
+ dark: "Dark",
42
+ }),
37
43
  },
38
44
  size: {
39
45
  type: String as PropType<string>,
40
- default: 'medium',
46
+ default: "medium",
41
47
  validator(value: string) {
42
- return propValidators.size.includes(value);
48
+ return propValidators.size.includes(value)
43
49
  },
44
50
  },
45
51
  theme: {
46
52
  type: String as PropType<string>,
47
- default: 'primary',
53
+ default: "primary",
48
54
  validator(value: string) {
49
- return propValidators.theme.includes(value);
55
+ return propValidators.theme.includes(value)
50
56
  },
51
57
  },
52
58
  stepAnimationDuration: {
@@ -57,77 +63,96 @@ const props = defineProps({
57
63
  type: Array as PropType<string[]>,
58
64
  default: () => [],
59
65
  },
60
- });
66
+ })
61
67
 
62
- const duration = ref(props.stepAnimationDuration);
68
+ const duration = ref(props.stepAnimationDuration)
63
69
 
64
- const { currentColourScheme } = useColourScheme();
70
+ const colourMode = ref<"light" | "dark" | "auto">("dark")
71
+ const { setColourScheme } = useSettingsStore()
65
72
 
66
- const colourSchemeWrapper = ref<HTMLFormElement | null>(null);
67
- const colourSchemeGroupElements = ref<HTMLDivElement[]>([]);
68
- const colourSchemeInputElements = ref<HTMLInputElement[]>([]);
69
- const showMarker = ref(false);
73
+ const colourSchemeWrapper = ref<HTMLFormElement | null>(null)
74
+ const colourSchemeGroupElements = ref<HTMLDivElement[]>([])
75
+ const colourSchemeInputElements = ref<HTMLInputElement[]>([])
76
+ const showMarker = ref(false)
70
77
 
71
78
  const findIndexOfInputValueFromCurrentColourScheme = () => {
72
- if (currentColourScheme.value === 'auto') return 1;
73
- if (currentColourScheme.value === 'light') return 2;
74
- if (currentColourScheme.value === 'dark') return 3;
75
- return undefined;
76
- };
79
+ if (colourMode.value === "auto") return 1
80
+ if (colourMode.value === "light") return 2
81
+ if (colourMode.value === "dark") return 3
82
+ return undefined
83
+ }
77
84
 
78
85
  const findIndexOfCheckedInput = () => {
79
- return colourSchemeInputElements.value.findIndex((input) => input.checked);
80
- };
86
+ return colourSchemeInputElements.value.findIndex((input) => input.checked)
87
+ }
81
88
 
82
- const currentActiveIndex = ref(findIndexOfCheckedInput());
89
+ const currentActiveIndex = ref(findIndexOfCheckedInput())
83
90
 
84
91
  const setColourSchemeAttr = async () => {
85
- const index = findIndexOfInputValueFromCurrentColourScheme() ?? 0;
86
-
87
- await nextTick();
88
- currentActiveIndex.value = findIndexOfCheckedInput();
89
-
90
- const wrapperLeftPosition = colourSchemeWrapper.value?.getBoundingClientRect().left ?? 0;
91
- const parentLeftPosition = colourSchemeWrapper.value?.parentElement?.getBoundingClientRect().left ?? 0;
92
- const relativeLeftPosition = wrapperLeftPosition - parentLeftPosition;
93
-
94
- colourSchemeWrapper.value?.style.setProperty('--_select-scheme-marker-step-animation-duration', colourSchemeGroupElements.value?.length * duration.value + 'ms');
95
-
96
- colourSchemeWrapper.value?.style.setProperty('--_select-scheme-marker-position', index !== undefined ? index.toString() : '0');
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
- };
92
+ const index = findIndexOfInputValueFromCurrentColourScheme() ?? 0
93
+
94
+ await nextTick()
95
+ currentActiveIndex.value = findIndexOfCheckedInput()
96
+
97
+ const wrapperLeftPosition = colourSchemeWrapper.value?.getBoundingClientRect().left ?? 0
98
+ const parentLeftPosition = colourSchemeWrapper.value?.parentElement?.getBoundingClientRect().left ?? 0
99
+ const relativeLeftPosition = wrapperLeftPosition - parentLeftPosition
100
+
101
+ colourSchemeWrapper.value?.style.setProperty(
102
+ "--_select-scheme-marker-step-animation-duration",
103
+ colourSchemeGroupElements.value?.length * duration.value + "ms"
104
+ )
105
+
106
+ colourSchemeWrapper.value?.style.setProperty(
107
+ "--_select-scheme-marker-position",
108
+ index !== undefined ? index.toString() : "0"
109
+ )
110
+ const leftOffset = (colourSchemeGroupElements.value?.[index - 1]?.offsetLeft ?? 0) - relativeLeftPosition
111
+ colourSchemeWrapper.value?.style.setProperty("--_select-scheme-marker-left-offset", leftOffset + "px")
112
+ colourSchemeWrapper.value?.style.setProperty(
113
+ "--_select-scheme-marker-width",
114
+ colourSchemeGroupElements.value?.[index - 1]?.getBoundingClientRect().width + "px"
115
+ )
116
+ }
100
117
 
101
118
  const handleInputActiveClass = () => {
102
119
  colourSchemeInputElements.value.forEach((element) => {
103
- element.classList.remove('active');
104
- });
120
+ element.classList.remove("active")
121
+ })
105
122
 
106
123
  setTimeout(() => {
107
- colourSchemeInputElements.value?.[currentActiveIndex.value].classList.add('active');
108
- }, duration.value);
109
- };
124
+ const activeElement = colourSchemeInputElements.value?.[currentActiveIndex.value]
125
+ if (activeElement) {
126
+ activeElement.classList.add("active")
127
+ }
128
+ }, duration.value)
129
+ }
110
130
 
111
131
  onMounted(() => {
112
- colourSchemeGroupElements.value = Array.from(colourSchemeWrapper.value?.querySelectorAll('.select-scheme-group') || []) as HTMLInputElement[];
113
- colourSchemeInputElements.value = Array.from(colourSchemeWrapper.value?.querySelectorAll('.scheme-input') || []) as HTMLInputElement[];
132
+ colourSchemeGroupElements.value = Array.from(
133
+ colourSchemeWrapper.value?.querySelectorAll(".select-scheme-group") || []
134
+ ) as HTMLInputElement[]
135
+ colourSchemeInputElements.value = Array.from(
136
+ colourSchemeWrapper.value?.querySelectorAll(".scheme-input") || []
137
+ ) as HTMLInputElement[]
114
138
 
115
139
  if (colourSchemeWrapper.value !== null) {
116
- setColourSchemeAttr();
140
+ setColourSchemeAttr()
117
141
  setTimeout(() => {
118
- showMarker.value = true;
119
- handleInputActiveClass();
120
- }, duration.value);
142
+ showMarker.value = true
143
+ handleInputActiveClass()
144
+ }, duration.value)
121
145
  }
122
- });
146
+ })
123
147
 
124
- watch(currentColourScheme, () => {
125
- setColourSchemeAttr();
126
- });
148
+ watch(colourMode, (newVal) => {
149
+ console.log("Colour mode changed:", newVal)
150
+ setColourScheme(newVal)
151
+ })
127
152
 
128
153
  watch(currentActiveIndex, () => {
129
- handleInputActiveClass();
130
- });
154
+ handleInputActiveClass()
155
+ })
131
156
  </script>
132
157
 
133
158
  <style lang="css">
@@ -140,7 +165,8 @@ watch(currentActiveIndex, () => {
140
165
  --_form-outline-colour: var(--theme-form-radio-outline);
141
166
 
142
167
  --_form-border-radius: calc(
143
- (var(--_scheme-icon-font-size) / 2) + var(--_form-border-width) + var(--_form-outline-width) + var(--_form-padding) + var(--_select-scheme-group-padding) + var(--_select-scheme-group-border-width) +
168
+ (var(--_scheme-icon-font-size) / 2) + var(--_form-border-width) + var(--_form-outline-width) + var(--_form-padding) +
169
+ var(--_select-scheme-group-padding) + var(--_select-scheme-group-border-width) +
144
170
  var(--_select-scheme-group-outline-width)
145
171
  );
146
172
 
@@ -154,7 +180,8 @@ watch(currentActiveIndex, () => {
154
180
  --_select-scheme-group-outline-width: 0.2rem;
155
181
  --_select-scheme-group-outline-colour: transparent;
156
182
  --_select-scheme-group-width: calc(
157
- 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)
183
+ var(--_scheme-icon-font-size) + (var(--_select-scheme-group-padding) * 2) +
184
+ (var(--_select-scheme-group-border-width) * 2) + (var(--_select-scheme-group-outline-width) * 2)
158
185
  );
159
186
 
160
187
  --_scheme-icon-font-size: 2rem;
@@ -162,7 +189,7 @@ watch(currentActiveIndex, () => {
162
189
 
163
190
  .colour-scheme-select-form {
164
191
  display: inline-grid;
165
- grid-template-areas: 'select-stack';
192
+ grid-template-areas: "select-stack";
166
193
  width: fit-content;
167
194
 
168
195
  background-color: var(--_form-background-color);
@@ -209,7 +236,7 @@ watch(currentActiveIndex, () => {
209
236
  .select-scheme-group {
210
237
  aspect-ratio: 1;
211
238
  display: grid;
212
- grid-template-areas: 'icon-stack';
239
+ grid-template-areas: "icon-stack";
213
240
  place-content: center;
214
241
  background: var(--_select-scheme-group-background-color);
215
242
  border: var(--_select-scheme-group-border-width) solid var(--_select-scheme-group-border-colour);
@@ -239,25 +266,30 @@ watch(currentActiveIndex, () => {
239
266
  }
240
267
  }
241
268
 
242
- &:has(input[value='auto']) {
269
+ &:has(input[value="auto"]) {
243
270
  &:has(.active) {
244
271
  --_select-scheme-group-background-color: green;
245
272
  --_scheme-icon-colour: white;
246
273
  }
247
274
  }
248
275
 
249
- &:has(input[value='light']) {
276
+ &:has(input[value="light"]) {
250
277
  &:has(.active) {
251
278
  /* background: rgb(180, 58, 91);
252
279
  background: linear-gradient(90deg, rgba(180, 58, 91, 1) 0%, rgba(253, 29, 29, 1) 50%, rgba(252, 176, 69, 1) 100%); */
253
- --_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%);
280
+ --_select-scheme-group-background-color: radial-gradient(
281
+ circle,
282
+ rgba(180, 58, 91, 1) 0%,
283
+ rgba(253, 29, 29, 1) 27%,
284
+ rgba(252, 176, 69, 1) 100%
285
+ );
254
286
  /* --_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%); */
255
287
 
256
288
  --_scheme-icon-colour: white;
257
289
  }
258
290
  }
259
291
 
260
- &:has(input[value='dark']) {
292
+ &:has(input[value="dark"]) {
261
293
  &:has(.active) {
262
294
  --_select-scheme-group-background-color: black;
263
295
  --_scheme-icon-colour: white;
@@ -1,5 +1,14 @@
1
1
  <template>
2
- <ToggleSwitchWithLabelInline v-model="currentColourScheme" :name :label labelWeight="normal" :size trueValue="dark" falseValue="light" :style-class-passthrough>
2
+ <ToggleSwitchWithLabelInline
3
+ v-model="colourMode"
4
+ :name
5
+ :label
6
+ labelWeight="normal"
7
+ :size
8
+ trueValue="dark"
9
+ falseValue="light"
10
+ :style-class-passthrough
11
+ >
3
12
  <template #iconOn>
4
13
  <LazyIcon name="radix-icons:moon" class="icon" />
5
14
  </template>
@@ -10,7 +19,7 @@
10
19
  </template>
11
20
 
12
21
  <script setup lang="ts">
13
- import propValidators from '../../forms/c12/prop-validators';
22
+ import propValidators from "../../forms/c12/prop-validators"
14
23
 
15
24
  defineProps({
16
25
  name: {
@@ -23,25 +32,32 @@ defineProps({
23
32
  },
24
33
  labelWeight: {
25
34
  type: String as PropType<string>,
26
- default: 'semi-bold',
35
+ default: "semi-bold",
27
36
  validator(value: string) {
28
- return propValidators.labelWeight.includes(value);
37
+ return propValidators.labelWeight.includes(value)
29
38
  },
30
39
  },
31
40
  size: {
32
41
  type: String as PropType<string>,
33
- default: 'small',
42
+ default: "small",
34
43
  validator(value: string) {
35
- return propValidators.size.includes(value);
44
+ return propValidators.size.includes(value)
36
45
  },
37
46
  },
38
47
  styleClassPassthrough: {
39
48
  type: Array as PropType<string[]>,
40
49
  default: () => [],
41
50
  },
42
- });
51
+ })
43
52
 
44
53
  // const displayMode = ref<'auto' | 'dark' | 'light'>('auto');
45
54
 
46
- const { currentColourScheme } = useColourScheme();
55
+ const colourMode = ref<"light" | "dark" | "auto">("dark")
56
+
57
+ const { currentColourScheme, setColourScheme } = useSettingsStore()
58
+
59
+ watch(colourMode, (newVal) => {
60
+ console.log("Colour mode changed:", newVal)
61
+ setColourScheme(newVal)
62
+ })
47
63
  </script>
@@ -0,0 +1,28 @@
1
+ // const delay = (t: number) => new Promise((r) => setTimeout(r, t))
2
+
3
+ export const useSettingsStore = defineStore(
4
+ "settingsStore",
5
+ () => {
6
+ // State
7
+ const colourScheme = ref<"auto" | "dark" | "light" | null>(null)
8
+
9
+ // Getters
10
+ const currentColourScheme = computed(() => colourScheme.value)
11
+
12
+ // Actions
13
+ const setColourScheme = (state: "auto" | "dark" | "light" | null) => {
14
+ console.log("Setting colour scheme:", state)
15
+ colourScheme.value = state
16
+ }
17
+
18
+ return {
19
+ currentColourScheme,
20
+ setColourScheme,
21
+ }
22
+ },
23
+ {
24
+ persist: {
25
+ storage: piniaPluginPersistedstate.cookies(),
26
+ },
27
+ }
28
+ )
package/nuxt.config.ts CHANGED
@@ -2,7 +2,10 @@
2
2
 
3
3
  export default defineNuxtConfig({
4
4
  devtools: { enabled: true },
5
- modules: ["@nuxt/eslint", "@nuxt/icon", "@nuxt/test-utils/module"],
5
+ modules: ["@nuxt/eslint", "@nuxt/icon", "@pinia/nuxt", "pinia-plugin-persistedstate/nuxt", "@nuxt/test-utils/module"],
6
+ imports: {
7
+ dirs: ["./stores"],
8
+ },
6
9
  alias: {
7
10
  "#shared": "./shared",
8
11
  },
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "srcdev-nuxt-forms",
3
3
  "type": "module",
4
- "version": "6.1.8",
4
+ "version": "6.1.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",
@@ -23,28 +23,31 @@
23
23
  "nuxt.config.ts"
24
24
  ],
25
25
  "devDependencies": {
26
- "@iconify-json/carbon": "1.2.10",
27
- "@iconify-json/material-symbols": "1.2.29",
28
- "@iconify-json/material-symbols-light": "1.2.29",
29
- "@nuxt/eslint": "1.8.0",
30
- "@nuxt/icon": "1.15.0",
26
+ "@iconify-json/carbon": "1.2.13",
27
+ "@iconify-json/gridicons": "1.2.4",
28
+ "@iconify-json/material-symbols": "1.2.33",
29
+ "@iconify-json/material-symbols-light": "1.2.33",
30
+ "@iconify-json/radix-icons": "1.2.4",
31
+ "@nuxt/eslint": "1.9.0",
32
+ "@nuxt/icon": "2.0.0",
31
33
  "@nuxt/test-utils": "3.19.2",
32
34
  "@vue/test-utils": "2.4.6",
33
- "eslint": "9.31.0",
34
- "happy-dom": "16.8.1",
35
+ "eslint": "9.34.0",
36
+ "happy-dom": "18.0.1",
35
37
  "nuxt": "4.0.3",
36
- "release-it": "18.1.2",
37
- "typescript": "5.8.3",
38
+ "release-it": "19.0.4",
39
+ "typescript": "5.9.2",
38
40
  "vitest": "3.2.4",
39
- "vue": "3.5.18",
40
- "zod": "4.0.0"
41
+ "vue": "3.5.20",
42
+ "zod": "4.1.5"
41
43
  },
42
44
  "dependencies": {
43
- "@iconify-json/gridicons": "1.2.2",
44
45
  "@iconify-json/ph": "1.2.2",
45
- "@iconify-json/radix-icons": "1.2.2",
46
46
  "@iconify-json/ri": "1.2.5",
47
- "modern-normalize": "3.0.1"
47
+ "@pinia/nuxt": "0.11.2",
48
+ "modern-normalize": "3.0.1",
49
+ "pinia": "3.0.3",
50
+ "pinia-plugin-persistedstate": "4.5.0"
48
51
  },
49
52
  "release-it": {
50
53
  "$schema": "https://unpkg.com/release-it/schema/release-it.json",