srcdev-nuxt-forms 2.1.30 → 2.1.31
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.
- package/assets/styles/forms/themes/_error.css +10 -0
- package/assets/styles/forms/themes/_ghost.css +10 -0
- package/assets/styles/forms/themes/_primary.css +1 -1
- package/assets/styles/forms/themes/_secondary.css +10 -0
- package/assets/styles/forms/themes/_success.css +10 -0
- package/assets/styles/forms/themes/_tertiary.css +10 -0
- package/assets/styles/forms/themes/_warning.css +10 -0
- package/components/forms/toggle-switch/ToggleSwitchCore.vue +14 -3
- package/components/forms/toggle-switch/variants/ToggleSwitchWithLabel.vue +21 -2
- package/package.json +1 -1
|
@@ -27,6 +27,16 @@
|
|
|
27
27
|
|
|
28
28
|
--theme-form-range-accent-color: light-dark(var(--red-12), var(--red-3));
|
|
29
29
|
|
|
30
|
+
/*
|
|
31
|
+
* ToggleSwitch
|
|
32
|
+
**/
|
|
33
|
+
--theme-form-toggle-bg-off: light-dark(var(--gray-1), var(--gray-4));
|
|
34
|
+
--theme-form-toggle-bg-on: light-dark(var(--gray-1), var(--gray-6));
|
|
35
|
+
--theme-form-toggle-border: 1px solid light-dark(var(--red-12), var(--red-1));
|
|
36
|
+
--theme-form-toggle-outline: 1px solid light-dark(var(--red-12), var(--red-12));
|
|
37
|
+
--theme-form-toggle-symbol-off: var(--orange-12);
|
|
38
|
+
--theme-form-toggle-symbol-on: var(--gray-12);
|
|
39
|
+
|
|
30
40
|
/*
|
|
31
41
|
* Checkbox as button
|
|
32
42
|
**/
|
|
@@ -27,6 +27,16 @@
|
|
|
27
27
|
|
|
28
28
|
--theme-form-range-accent-color: light-dark(var(--gray-12), var(--gray-3));
|
|
29
29
|
|
|
30
|
+
/*
|
|
31
|
+
* ToggleSwitch
|
|
32
|
+
**/
|
|
33
|
+
--theme-form-toggle-bg-off: light-dark(var(--gray-1), var(--gray-4));
|
|
34
|
+
--theme-form-toggle-bg-on: light-dark(var(--gray-1), var(--gray-6));
|
|
35
|
+
--theme-form-toggle-border: 1px solid light-dark(var(--gray-12), var(--gray-1));
|
|
36
|
+
--theme-form-toggle-outline: 1px solid light-dark(var(--gray-12), var(--gray-12));
|
|
37
|
+
--theme-form-toggle-symbol-off: var(--gray-4);
|
|
38
|
+
--theme-form-toggle-symbol-on: var(--gray-12);
|
|
39
|
+
|
|
30
40
|
/*
|
|
31
41
|
* Checkbox as button
|
|
32
42
|
**/
|
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
--theme-form-toggle-bg-on: light-dark(var(--gray-1), var(--gray-6));
|
|
35
35
|
--theme-form-toggle-border: 1px solid light-dark(var(--blue-12), var(--blue-1));
|
|
36
36
|
--theme-form-toggle-outline: 1px solid light-dark(var(--blue-12), var(--blue-12));
|
|
37
|
-
--theme-form-toggle-symbol-off: var(--
|
|
37
|
+
--theme-form-toggle-symbol-off: var(--blue-7);
|
|
38
38
|
--theme-form-toggle-symbol-on: var(--gray-12);
|
|
39
39
|
|
|
40
40
|
/*
|
|
@@ -27,6 +27,16 @@
|
|
|
27
27
|
|
|
28
28
|
--theme-form-range-accent-color: light-dark(var(--gray-12), var(--gray-3));
|
|
29
29
|
|
|
30
|
+
/*
|
|
31
|
+
* ToggleSwitch
|
|
32
|
+
**/
|
|
33
|
+
--theme-form-toggle-bg-off: light-dark(var(--gray-1), var(--gray-4));
|
|
34
|
+
--theme-form-toggle-bg-on: light-dark(var(--gray-1), var(--gray-6));
|
|
35
|
+
--theme-form-toggle-border: 1px solid light-dark(var(--gray-12), var(--gray-1));
|
|
36
|
+
--theme-form-toggle-outline: 1px solid light-dark(var(--gray-12), var(--gray-12));
|
|
37
|
+
--theme-form-toggle-symbol-off: var(--gray-4);
|
|
38
|
+
--theme-form-toggle-symbol-on: var(--gray-12);
|
|
39
|
+
|
|
30
40
|
/*
|
|
31
41
|
* Checkbox as button
|
|
32
42
|
**/
|
|
@@ -27,6 +27,16 @@
|
|
|
27
27
|
|
|
28
28
|
--theme-form-range-accent-color: light-dark(var(--green-12), var(--green-3));
|
|
29
29
|
|
|
30
|
+
/*
|
|
31
|
+
* ToggleSwitch
|
|
32
|
+
**/
|
|
33
|
+
--theme-form-toggle-bg-off: light-dark(var(--gray-1), var(--gray-4));
|
|
34
|
+
--theme-form-toggle-bg-on: light-dark(var(--gray-1), var(--gray-6));
|
|
35
|
+
--theme-form-toggle-border: 1px solid light-dark(var(--green-12), var(--green-1));
|
|
36
|
+
--theme-form-toggle-outline: 1px solid light-dark(var(--green-12), var(--green-12));
|
|
37
|
+
--theme-form-toggle-symbol-off: var(--green-4);
|
|
38
|
+
--theme-form-toggle-symbol-on: var(--green-12);
|
|
39
|
+
|
|
30
40
|
/*
|
|
31
41
|
* Checkbox as button
|
|
32
42
|
**/
|
|
@@ -27,6 +27,16 @@
|
|
|
27
27
|
|
|
28
28
|
--theme-form-range-accent-color: light-dark(var(--gray-12), var(--gray-3));
|
|
29
29
|
|
|
30
|
+
/*
|
|
31
|
+
* ToggleSwitch
|
|
32
|
+
**/
|
|
33
|
+
--theme-form-toggle-bg-off: light-dark(var(--gray-1), var(--gray-4));
|
|
34
|
+
--theme-form-toggle-bg-on: light-dark(var(--gray-1), var(--gray-6));
|
|
35
|
+
--theme-form-toggle-border: 1px solid light-dark(var(--gray-12), var(--gray-1));
|
|
36
|
+
--theme-form-toggle-outline: 1px solid light-dark(var(--gray-12), var(--gray-12));
|
|
37
|
+
--theme-form-toggle-symbol-off: var(--gray-4);
|
|
38
|
+
--theme-form-toggle-symbol-on: var(--gray-12);
|
|
39
|
+
|
|
30
40
|
/*
|
|
31
41
|
* Checkbox as button
|
|
32
42
|
**/
|
|
@@ -27,6 +27,16 @@
|
|
|
27
27
|
|
|
28
28
|
--theme-form-range-accent-color: light-dark(var(--orange-12), var(--orange-3));
|
|
29
29
|
|
|
30
|
+
/*
|
|
31
|
+
* ToggleSwitch
|
|
32
|
+
**/
|
|
33
|
+
--theme-form-toggle-bg-off: light-dark(var(--gray-1), var(--gray-4));
|
|
34
|
+
--theme-form-toggle-bg-on: light-dark(var(--gray-1), var(--gray-6));
|
|
35
|
+
--theme-form-toggle-border: 1px solid light-dark(var(--orange-12), var(--orange-1));
|
|
36
|
+
--theme-form-toggle-outline: 1px solid light-dark(var(--orange-12), var(--orange-12));
|
|
37
|
+
--theme-form-toggle-symbol-off: var(--orange-12);
|
|
38
|
+
--theme-form-toggle-symbol-on: var(--gray-12);
|
|
39
|
+
|
|
30
40
|
/*
|
|
31
41
|
* Checkbox as button
|
|
32
42
|
**/
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div class="toggle-switch-core" :class="(elementClasses, size)" :data-form-theme="formTheme">
|
|
3
3
|
<label class="toggle-switch-input" :class="[{ round }]" :for="inputId">
|
|
4
|
-
<input type="checkbox" v-model="modelValue" :id="inputId" :aria-describedby="`${id}-description`" :name :required />
|
|
4
|
+
<input type="checkbox" v-model="modelValue" :true-value :false-value :id="inputId" :aria-describedby="`${id}-description`" :name :required />
|
|
5
5
|
<div class="symbol-wrapper" :class="[{ round }]">
|
|
6
6
|
<div class="symbol" :class="[{ round }]">
|
|
7
7
|
<div v-if="hasIconOnSlot" class="symbol-icon icon-on">
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
<script setup lang="ts">
|
|
21
21
|
import propValidators from '../c12/prop-validators';
|
|
22
22
|
|
|
23
|
-
const { id, name, required, fieldHasError, styleClassPassthrough, theme, round, size } = defineProps({
|
|
23
|
+
const { id, name, required, fieldHasError, trueValue, falseValue, styleClassPassthrough, theme, round, size, ariaDescribedby } = defineProps({
|
|
24
24
|
id: {
|
|
25
25
|
type: String,
|
|
26
26
|
required: true,
|
|
@@ -37,6 +37,14 @@ const { id, name, required, fieldHasError, styleClassPassthrough, theme, round,
|
|
|
37
37
|
type: Boolean,
|
|
38
38
|
default: false,
|
|
39
39
|
},
|
|
40
|
+
trueValue: {
|
|
41
|
+
type: [String, Number, Boolean],
|
|
42
|
+
default: true,
|
|
43
|
+
},
|
|
44
|
+
falseValue: {
|
|
45
|
+
type: [String, Number, Boolean],
|
|
46
|
+
default: false,
|
|
47
|
+
},
|
|
40
48
|
styleClassPassthrough: {
|
|
41
49
|
type: Array as PropType<string[]>,
|
|
42
50
|
default: () => [],
|
|
@@ -59,10 +67,13 @@ const { id, name, required, fieldHasError, styleClassPassthrough, theme, round,
|
|
|
59
67
|
return propValidators.size.includes(value);
|
|
60
68
|
},
|
|
61
69
|
},
|
|
70
|
+
ariaDescribedby: {
|
|
71
|
+
type: String,
|
|
72
|
+
default: null,
|
|
73
|
+
},
|
|
62
74
|
});
|
|
63
75
|
|
|
64
76
|
const slots = useSlots();
|
|
65
|
-
const hasDescriptionSlot = computed(() => slots.description !== undefined);
|
|
66
77
|
const hasIconOnSlot = computed(() => slots.iconOn !== undefined);
|
|
67
78
|
const hasIconOffSlot = computed(() => slots.iconOff !== undefined);
|
|
68
79
|
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
<div v-if="hasDescriptionSlot" :id="`${id}-description`">
|
|
5
5
|
<slot name="description"></slot>
|
|
6
6
|
</div>
|
|
7
|
-
<ToggleSwitchCore v-model="modelValue" :id :name :required :field-has-error :theme :round :size>
|
|
7
|
+
<ToggleSwitchCore v-model="modelValue" :id :name :required :field-has-error :true-value :false-value :theme :round :size :ariaDescribedby>
|
|
8
8
|
<template v-if="hasIconOnSlot" #iconOn>
|
|
9
9
|
<slot name="iconOn"></slot>
|
|
10
10
|
</template>
|
|
@@ -13,13 +13,14 @@
|
|
|
13
13
|
<slot name="iconOff"></slot>
|
|
14
14
|
</template>
|
|
15
15
|
</ToggleSwitchCore>
|
|
16
|
+
<InputError :errorMessage="errorMessage" :showError="fieldHasError" :id="errorId" :isDetached="true" />
|
|
16
17
|
</div>
|
|
17
18
|
</template>
|
|
18
19
|
|
|
19
20
|
<script setup lang="ts">
|
|
20
21
|
import propValidators from '../../c12/prop-validators';
|
|
21
22
|
|
|
22
|
-
const { id, name, label, required, fieldHasError, styleClassPassthrough, theme, round, size } = defineProps({
|
|
23
|
+
const { id, name, label, required, errorMessage, fieldHasError, trueValue, falseValue, styleClassPassthrough, theme, round, size } = defineProps({
|
|
23
24
|
id: {
|
|
24
25
|
type: String,
|
|
25
26
|
required: true,
|
|
@@ -36,10 +37,22 @@ const { id, name, label, required, fieldHasError, styleClassPassthrough, theme,
|
|
|
36
37
|
type: Boolean,
|
|
37
38
|
default: false,
|
|
38
39
|
},
|
|
40
|
+
errorMessage: {
|
|
41
|
+
type: [Object, String],
|
|
42
|
+
required: true,
|
|
43
|
+
},
|
|
39
44
|
fieldHasError: {
|
|
40
45
|
type: Boolean,
|
|
41
46
|
default: false,
|
|
42
47
|
},
|
|
48
|
+
trueValue: {
|
|
49
|
+
type: [String, Number, Boolean],
|
|
50
|
+
default: true,
|
|
51
|
+
},
|
|
52
|
+
falseValue: {
|
|
53
|
+
type: [String, Number, Boolean],
|
|
54
|
+
default: false,
|
|
55
|
+
},
|
|
43
56
|
styleClassPassthrough: {
|
|
44
57
|
type: Array as PropType<string[]>,
|
|
45
58
|
default: () => [],
|
|
@@ -73,6 +86,12 @@ const formTheme = computed(() => {
|
|
|
73
86
|
return fieldHasError ? 'error' : theme;
|
|
74
87
|
});
|
|
75
88
|
|
|
89
|
+
const errorId = `${id}-error-message`;
|
|
90
|
+
const ariaDescribedby = computed(() => {
|
|
91
|
+
const ariaDescribedbyId = hasDescriptionSlot.value ? `${id}-description` : null;
|
|
92
|
+
return fieldHasError ? errorId : ariaDescribedbyId;
|
|
93
|
+
});
|
|
94
|
+
|
|
76
95
|
const modelValue = defineModel();
|
|
77
96
|
const { elementClasses, updateElementClasses } = useStyleClassPassthrough(styleClassPassthrough);
|
|
78
97
|
</script>
|
package/package.json
CHANGED