srcdev-nuxt-forms 6.1.7 → 6.1.9
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.
|
@@ -135,6 +135,11 @@ const toggleSwitchValue = () => {
|
|
|
135
135
|
align-items: center;
|
|
136
136
|
justify-content: start;
|
|
137
137
|
position: relative;
|
|
138
|
+
transition: background-color var(--theme-form-transition-duration);
|
|
139
|
+
|
|
140
|
+
&:hover {
|
|
141
|
+
cursor: pointer;
|
|
142
|
+
}
|
|
138
143
|
|
|
139
144
|
.symbol {
|
|
140
145
|
display: inline-grid;
|
|
@@ -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,39 @@
|
|
|
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
|
|
13
|
-
|
|
10
|
+
<input
|
|
11
|
+
type="radio"
|
|
12
|
+
id="auto"
|
|
13
|
+
name="colour-scheme"
|
|
14
|
+
class="scheme-input"
|
|
15
|
+
v-model="currentColourScheme"
|
|
16
|
+
value="auto"
|
|
17
|
+
/>
|
|
18
|
+
<label for="auto" class="sr-only">{{ labels.auto }}</label>
|
|
14
19
|
</div>
|
|
15
20
|
<div class="select-scheme-group">
|
|
16
21
|
<LazyIcon name="radix-icons:sun" class="scheme-icon" />
|
|
17
|
-
<input
|
|
18
|
-
|
|
22
|
+
<input
|
|
23
|
+
type="radio"
|
|
24
|
+
id="light"
|
|
25
|
+
name="colour-scheme"
|
|
26
|
+
class="scheme-input"
|
|
27
|
+
v-model="currentColourScheme"
|
|
28
|
+
value="light"
|
|
29
|
+
/>
|
|
30
|
+
<label for="light" class="sr-only">{{ labels.light }}</label>
|
|
19
31
|
</div>
|
|
20
32
|
<div class="select-scheme-group">
|
|
21
33
|
<LazyIcon name="radix-icons:moon" class="scheme-icon" />
|
|
22
|
-
<input
|
|
23
|
-
|
|
34
|
+
<input
|
|
35
|
+
type="radio"
|
|
36
|
+
id="dark"
|
|
37
|
+
name="colour-scheme"
|
|
38
|
+
class="scheme-input"
|
|
39
|
+
v-model="currentColourScheme"
|
|
40
|
+
value="dark"
|
|
41
|
+
/>
|
|
42
|
+
<label for="dark" class="sr-only">{{ labels.dark }}</label>
|
|
24
43
|
</div>
|
|
25
44
|
</div>
|
|
26
45
|
</form>
|
|
@@ -28,25 +47,33 @@
|
|
|
28
47
|
</template>
|
|
29
48
|
|
|
30
49
|
<script setup lang="ts">
|
|
31
|
-
import propValidators from
|
|
50
|
+
import propValidators from "../../forms/c12/prop-validators"
|
|
32
51
|
|
|
33
52
|
const props = defineProps({
|
|
34
53
|
name: {
|
|
35
54
|
type: String,
|
|
36
|
-
defaul:
|
|
55
|
+
defaul: "colour-scheme-select",
|
|
56
|
+
},
|
|
57
|
+
labels: {
|
|
58
|
+
type: Object as PropType<{ [key: string]: string }>,
|
|
59
|
+
default: () => ({
|
|
60
|
+
auto: "Auto",
|
|
61
|
+
light: "Light",
|
|
62
|
+
dark: "Dark",
|
|
63
|
+
}),
|
|
37
64
|
},
|
|
38
65
|
size: {
|
|
39
66
|
type: String as PropType<string>,
|
|
40
|
-
default:
|
|
67
|
+
default: "medium",
|
|
41
68
|
validator(value: string) {
|
|
42
|
-
return propValidators.size.includes(value)
|
|
69
|
+
return propValidators.size.includes(value)
|
|
43
70
|
},
|
|
44
71
|
},
|
|
45
72
|
theme: {
|
|
46
73
|
type: String as PropType<string>,
|
|
47
|
-
default:
|
|
74
|
+
default: "primary",
|
|
48
75
|
validator(value: string) {
|
|
49
|
-
return propValidators.theme.includes(value)
|
|
76
|
+
return propValidators.theme.includes(value)
|
|
50
77
|
},
|
|
51
78
|
},
|
|
52
79
|
stepAnimationDuration: {
|
|
@@ -57,77 +84,94 @@ const props = defineProps({
|
|
|
57
84
|
type: Array as PropType<string[]>,
|
|
58
85
|
default: () => [],
|
|
59
86
|
},
|
|
60
|
-
})
|
|
87
|
+
})
|
|
61
88
|
|
|
62
|
-
const duration = ref(props.stepAnimationDuration)
|
|
89
|
+
const duration = ref(props.stepAnimationDuration)
|
|
63
90
|
|
|
64
|
-
const { currentColourScheme } = useColourScheme()
|
|
91
|
+
const { currentColourScheme } = useColourScheme()
|
|
65
92
|
|
|
66
|
-
const colourSchemeWrapper = ref<HTMLFormElement | null>(null)
|
|
67
|
-
const colourSchemeGroupElements = ref<HTMLDivElement[]>([])
|
|
68
|
-
const colourSchemeInputElements = ref<HTMLInputElement[]>([])
|
|
69
|
-
const showMarker = ref(false)
|
|
93
|
+
const colourSchemeWrapper = ref<HTMLFormElement | null>(null)
|
|
94
|
+
const colourSchemeGroupElements = ref<HTMLDivElement[]>([])
|
|
95
|
+
const colourSchemeInputElements = ref<HTMLInputElement[]>([])
|
|
96
|
+
const showMarker = ref(false)
|
|
70
97
|
|
|
71
98
|
const findIndexOfInputValueFromCurrentColourScheme = () => {
|
|
72
|
-
if (currentColourScheme.value ===
|
|
73
|
-
if (currentColourScheme.value ===
|
|
74
|
-
if (currentColourScheme.value ===
|
|
75
|
-
return undefined
|
|
76
|
-
}
|
|
99
|
+
if (currentColourScheme.value === "auto") return 1
|
|
100
|
+
if (currentColourScheme.value === "light") return 2
|
|
101
|
+
if (currentColourScheme.value === "dark") return 3
|
|
102
|
+
return undefined
|
|
103
|
+
}
|
|
77
104
|
|
|
78
105
|
const findIndexOfCheckedInput = () => {
|
|
79
|
-
return colourSchemeInputElements.value.findIndex((input) => input.checked)
|
|
80
|
-
}
|
|
106
|
+
return colourSchemeInputElements.value.findIndex((input) => input.checked)
|
|
107
|
+
}
|
|
81
108
|
|
|
82
|
-
const currentActiveIndex = ref(findIndexOfCheckedInput())
|
|
109
|
+
const currentActiveIndex = ref(findIndexOfCheckedInput())
|
|
83
110
|
|
|
84
111
|
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(
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
112
|
+
const index = findIndexOfInputValueFromCurrentColourScheme() ?? 0
|
|
113
|
+
|
|
114
|
+
await nextTick()
|
|
115
|
+
currentActiveIndex.value = findIndexOfCheckedInput()
|
|
116
|
+
|
|
117
|
+
const wrapperLeftPosition = colourSchemeWrapper.value?.getBoundingClientRect().left ?? 0
|
|
118
|
+
const parentLeftPosition = colourSchemeWrapper.value?.parentElement?.getBoundingClientRect().left ?? 0
|
|
119
|
+
const relativeLeftPosition = wrapperLeftPosition - parentLeftPosition
|
|
120
|
+
|
|
121
|
+
colourSchemeWrapper.value?.style.setProperty(
|
|
122
|
+
"--_select-scheme-marker-step-animation-duration",
|
|
123
|
+
colourSchemeGroupElements.value?.length * duration.value + "ms"
|
|
124
|
+
)
|
|
125
|
+
|
|
126
|
+
colourSchemeWrapper.value?.style.setProperty(
|
|
127
|
+
"--_select-scheme-marker-position",
|
|
128
|
+
index !== undefined ? index.toString() : "0"
|
|
129
|
+
)
|
|
130
|
+
const leftOffset = (colourSchemeGroupElements.value?.[index - 1]?.offsetLeft ?? 0) - relativeLeftPosition
|
|
131
|
+
colourSchemeWrapper.value?.style.setProperty("--_select-scheme-marker-left-offset", leftOffset + "px")
|
|
132
|
+
colourSchemeWrapper.value?.style.setProperty(
|
|
133
|
+
"--_select-scheme-marker-width",
|
|
134
|
+
colourSchemeGroupElements.value?.[index - 1]?.getBoundingClientRect().width + "px"
|
|
135
|
+
)
|
|
136
|
+
}
|
|
100
137
|
|
|
101
138
|
const handleInputActiveClass = () => {
|
|
102
139
|
colourSchemeInputElements.value.forEach((element) => {
|
|
103
|
-
element.classList.remove(
|
|
104
|
-
})
|
|
140
|
+
element.classList.remove("active")
|
|
141
|
+
})
|
|
105
142
|
|
|
106
143
|
setTimeout(() => {
|
|
107
|
-
colourSchemeInputElements.value?.[currentActiveIndex.value]
|
|
108
|
-
|
|
109
|
-
|
|
144
|
+
const activeElement = colourSchemeInputElements.value?.[currentActiveIndex.value]
|
|
145
|
+
if (activeElement) {
|
|
146
|
+
activeElement.classList.add("active")
|
|
147
|
+
}
|
|
148
|
+
}, duration.value)
|
|
149
|
+
}
|
|
110
150
|
|
|
111
151
|
onMounted(() => {
|
|
112
|
-
colourSchemeGroupElements.value = Array.from(
|
|
113
|
-
|
|
152
|
+
colourSchemeGroupElements.value = Array.from(
|
|
153
|
+
colourSchemeWrapper.value?.querySelectorAll(".select-scheme-group") || []
|
|
154
|
+
) as HTMLInputElement[]
|
|
155
|
+
colourSchemeInputElements.value = Array.from(
|
|
156
|
+
colourSchemeWrapper.value?.querySelectorAll(".scheme-input") || []
|
|
157
|
+
) as HTMLInputElement[]
|
|
114
158
|
|
|
115
159
|
if (colourSchemeWrapper.value !== null) {
|
|
116
|
-
setColourSchemeAttr()
|
|
160
|
+
setColourSchemeAttr()
|
|
117
161
|
setTimeout(() => {
|
|
118
|
-
showMarker.value = true
|
|
119
|
-
handleInputActiveClass()
|
|
120
|
-
}, duration.value)
|
|
162
|
+
showMarker.value = true
|
|
163
|
+
handleInputActiveClass()
|
|
164
|
+
}, duration.value)
|
|
121
165
|
}
|
|
122
|
-
})
|
|
166
|
+
})
|
|
123
167
|
|
|
124
168
|
watch(currentColourScheme, () => {
|
|
125
|
-
setColourSchemeAttr()
|
|
126
|
-
})
|
|
169
|
+
setColourSchemeAttr()
|
|
170
|
+
})
|
|
127
171
|
|
|
128
172
|
watch(currentActiveIndex, () => {
|
|
129
|
-
handleInputActiveClass()
|
|
130
|
-
})
|
|
173
|
+
handleInputActiveClass()
|
|
174
|
+
})
|
|
131
175
|
</script>
|
|
132
176
|
|
|
133
177
|
<style lang="css">
|
|
@@ -140,7 +184,8 @@ watch(currentActiveIndex, () => {
|
|
|
140
184
|
--_form-outline-colour: var(--theme-form-radio-outline);
|
|
141
185
|
|
|
142
186
|
--_form-border-radius: calc(
|
|
143
|
-
(var(--_scheme-icon-font-size) / 2) + var(--_form-border-width) + var(--_form-outline-width) + var(--_form-padding) +
|
|
187
|
+
(var(--_scheme-icon-font-size) / 2) + var(--_form-border-width) + var(--_form-outline-width) + var(--_form-padding) +
|
|
188
|
+
var(--_select-scheme-group-padding) + var(--_select-scheme-group-border-width) +
|
|
144
189
|
var(--_select-scheme-group-outline-width)
|
|
145
190
|
);
|
|
146
191
|
|
|
@@ -154,7 +199,8 @@ watch(currentActiveIndex, () => {
|
|
|
154
199
|
--_select-scheme-group-outline-width: 0.2rem;
|
|
155
200
|
--_select-scheme-group-outline-colour: transparent;
|
|
156
201
|
--_select-scheme-group-width: calc(
|
|
157
|
-
var(--_scheme-icon-font-size) + (var(--_select-scheme-group-padding) * 2) +
|
|
202
|
+
var(--_scheme-icon-font-size) + (var(--_select-scheme-group-padding) * 2) +
|
|
203
|
+
(var(--_select-scheme-group-border-width) * 2) + (var(--_select-scheme-group-outline-width) * 2)
|
|
158
204
|
);
|
|
159
205
|
|
|
160
206
|
--_scheme-icon-font-size: 2rem;
|
|
@@ -162,7 +208,7 @@ watch(currentActiveIndex, () => {
|
|
|
162
208
|
|
|
163
209
|
.colour-scheme-select-form {
|
|
164
210
|
display: inline-grid;
|
|
165
|
-
grid-template-areas:
|
|
211
|
+
grid-template-areas: "select-stack";
|
|
166
212
|
width: fit-content;
|
|
167
213
|
|
|
168
214
|
background-color: var(--_form-background-color);
|
|
@@ -209,7 +255,7 @@ watch(currentActiveIndex, () => {
|
|
|
209
255
|
.select-scheme-group {
|
|
210
256
|
aspect-ratio: 1;
|
|
211
257
|
display: grid;
|
|
212
|
-
grid-template-areas:
|
|
258
|
+
grid-template-areas: "icon-stack";
|
|
213
259
|
place-content: center;
|
|
214
260
|
background: var(--_select-scheme-group-background-color);
|
|
215
261
|
border: var(--_select-scheme-group-border-width) solid var(--_select-scheme-group-border-colour);
|
|
@@ -239,25 +285,30 @@ watch(currentActiveIndex, () => {
|
|
|
239
285
|
}
|
|
240
286
|
}
|
|
241
287
|
|
|
242
|
-
&:has(input[value=
|
|
288
|
+
&:has(input[value="auto"]) {
|
|
243
289
|
&:has(.active) {
|
|
244
290
|
--_select-scheme-group-background-color: green;
|
|
245
291
|
--_scheme-icon-colour: white;
|
|
246
292
|
}
|
|
247
293
|
}
|
|
248
294
|
|
|
249
|
-
&:has(input[value=
|
|
295
|
+
&:has(input[value="light"]) {
|
|
250
296
|
&:has(.active) {
|
|
251
297
|
/* background: rgb(180, 58, 91);
|
|
252
298
|
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(
|
|
299
|
+
--_select-scheme-group-background-color: radial-gradient(
|
|
300
|
+
circle,
|
|
301
|
+
rgba(180, 58, 91, 1) 0%,
|
|
302
|
+
rgba(253, 29, 29, 1) 27%,
|
|
303
|
+
rgba(252, 176, 69, 1) 100%
|
|
304
|
+
);
|
|
254
305
|
/* --_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
306
|
|
|
256
307
|
--_scheme-icon-colour: white;
|
|
257
308
|
}
|
|
258
309
|
}
|
|
259
310
|
|
|
260
|
-
&:has(input[value=
|
|
311
|
+
&:has(input[value="dark"]) {
|
|
261
312
|
&:has(.active) {
|
|
262
313
|
--_select-scheme-group-background-color: black;
|
|
263
314
|
--_scheme-icon-colour: white;
|
package/nuxt.config.ts
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
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
6
|
alias: {
|
|
7
7
|
"#shared": "./shared",
|
|
8
8
|
},
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "srcdev-nuxt-forms",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "6.1.
|
|
4
|
+
"version": "6.1.9",
|
|
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.
|
|
27
|
-
"@iconify-json/
|
|
28
|
-
"@iconify-json/material-symbols
|
|
29
|
-
"@
|
|
30
|
-
"@
|
|
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.
|
|
34
|
-
"happy-dom": "
|
|
35
|
+
"eslint": "9.34.0",
|
|
36
|
+
"happy-dom": "18.0.1",
|
|
35
37
|
"nuxt": "4.0.3",
|
|
36
|
-
"release-it": "
|
|
37
|
-
"typescript": "5.
|
|
38
|
+
"release-it": "19.0.4",
|
|
39
|
+
"typescript": "5.9.2",
|
|
38
40
|
"vitest": "3.2.4",
|
|
39
|
-
"vue": "3.5.
|
|
40
|
-
"zod": "4.
|
|
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
|
-
"
|
|
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",
|