srcdev-nuxt-forms 2.4.11 → 2.4.13
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 -2
- package/assets/styles/forms/themes/_ghost.css +10 -2
- package/assets/styles/forms/themes/_input-action.css +1 -1
- package/assets/styles/forms/themes/_primary.css +11 -3
- package/assets/styles/forms/themes/_secondary.css +10 -2
- package/assets/styles/forms/themes/_success.css +10 -2
- package/assets/styles/forms/themes/_tertiary.css +10 -2
- package/assets/styles/forms/themes/_warning.css +10 -2
- package/assets/styles/forms/variables/_sizes.css +1 -0
- package/assets/styles/utils/_margin-helpers.css +26 -0
- package/components/forms/c12/prop-validators/index.ts +1 -0
- package/components/forms/input-number/InputNumberCore.vue +3 -3
- package/components/forms/input-text/InputTextCore.vue +85 -24
- package/components/forms/input-text/variants/InputPasswordWithLabel.vue +25 -3
- package/components/forms/input-text/variants/InputTextAsNumberWithLabel.vue +8 -0
- package/components/forms/input-text/variants/InputTextWithLabel.vue +158 -33
- package/components/forms/input-textarea/InputTextareaCore.vue +3 -3
- package/components/utils/colour-scheme-select/ColourSchemeSelect.vue +0 -1
- package/composables/useColourScheme.ts +0 -33
- package/package.json +12 -12
|
@@ -1,13 +1,21 @@
|
|
|
1
1
|
:root {
|
|
2
2
|
[data-form-theme='error'] {
|
|
3
|
-
--theme-form-input-bg: light-dark(var(--gray-1), var(--gray-4));
|
|
3
|
+
--theme-form-input-bg-normal: light-dark(var(--gray-1), var(--gray-4));
|
|
4
|
+
--theme-form-input-bg-outlined: light-dark(var(--gray-1), var(--gray-4));
|
|
5
|
+
--theme-form-input-bg-underlined: light-dark(var(--gray-1), var(--gray-4));
|
|
4
6
|
--theme-form-input-border: var(--red-8);
|
|
5
7
|
--theme-form-input-border-active: var(--red-2);
|
|
6
8
|
--theme-form-input-border-focus: var(--red-2);
|
|
7
9
|
--theme-form-input-outline: white;
|
|
8
10
|
--theme-form-input-outline-active: var(--red-6);
|
|
9
11
|
--theme-form-input-outline-focus: var(--red-6);
|
|
10
|
-
--theme-form-input-text: light-dark(var(--gray-10), var(--gray-11));
|
|
12
|
+
--theme-form-input-text-color-normal: light-dark(var(--gray-10), var(--gray-11));
|
|
13
|
+
--theme-form-input-text-color-outlined: light-dark(var(--gray-10), var(--gray-1));
|
|
14
|
+
--theme-form-input-text-color-underlined: light-dark(var(--gray-11), var(--gray-1));
|
|
15
|
+
|
|
16
|
+
--theme-form-input-text-label-color-normal: light-dark(var(--gray-11), var(--gray-1));
|
|
17
|
+
--theme-form-input-text-label-color-outlined: light-dark(var(--gray-10), var(--gray-11));
|
|
18
|
+
--theme-form-input-text-label-color-underlined: light-dark(var(--gray-11), var(--gray-1));
|
|
11
19
|
|
|
12
20
|
--theme-form-focus-box-shadow: light-dark(var(--red-12), var(--red-2));
|
|
13
21
|
|
|
@@ -1,13 +1,21 @@
|
|
|
1
1
|
:root {
|
|
2
2
|
[data-form-theme='ghost'] {
|
|
3
|
-
--theme-form-input-bg: light-dark(var(--gray-1), var(--gray-4));
|
|
3
|
+
--theme-form-input-bg-normal: light-dark(var(--gray-1), var(--gray-4));
|
|
4
|
+
--theme-form-input-bg-outlined: light-dark(var(--gray-1), var(--gray-4));
|
|
5
|
+
--theme-form-input-bg-underlined: light-dark(var(--gray-1), var(--gray-4));
|
|
4
6
|
--theme-form-input-border: var(--gray-8);
|
|
5
7
|
--theme-form-input-border-active: var(--gray-2);
|
|
6
8
|
--theme-form-input-border-focus: var(--gray-2);
|
|
7
9
|
--theme-form-input-outline: white;
|
|
8
10
|
--theme-form-input-outline-active: var(--gray-6);
|
|
9
11
|
--theme-form-input-outline-focus: var(--gray-6);
|
|
10
|
-
--theme-form-input-text: light-dark(var(--gray-10), var(--gray-11));
|
|
12
|
+
--theme-form-input-text-color-normal: light-dark(var(--gray-10), var(--gray-11));
|
|
13
|
+
--theme-form-input-text-color-outlined: light-dark(var(--gray-10), var(--gray-1));
|
|
14
|
+
--theme-form-input-text-color-underlined: light-dark(var(--gray-11), var(--gray-1));
|
|
15
|
+
|
|
16
|
+
--theme-form-input-text-label-color-normal: light-dark(var(--gray-11), var(--gray-1));
|
|
17
|
+
--theme-form-input-text-label-color-outlined: light-dark(var(--gray-10), var(--gray-11));
|
|
18
|
+
--theme-form-input-text-label-color-underlined: light-dark(var(--gray-11), var(--gray-1));
|
|
11
19
|
|
|
12
20
|
--theme-form-focus-box-shadow: light-dark(var(--gray-12), var(--gray-2));
|
|
13
21
|
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
--theme-btn-bg: transparent;
|
|
4
4
|
--theme-btn-border: transparent;
|
|
5
5
|
--theme-btn-outline: transparent;
|
|
6
|
-
--theme-btn-text: var(--theme-form-input-text);
|
|
6
|
+
--theme-btn-text: var(--theme-form-input-text-color-normal);
|
|
7
7
|
|
|
8
8
|
--theme-btn-bg-hover: var(--blue-8);
|
|
9
9
|
--theme-btn-border-hover: var(--blue-8);
|
|
@@ -1,13 +1,21 @@
|
|
|
1
1
|
:root {
|
|
2
2
|
[data-form-theme='primary'] {
|
|
3
|
-
--theme-form-input-bg: light-dark(var(--gray-1), var(--gray-4));
|
|
3
|
+
--theme-form-input-bg-normal: light-dark(var(--gray-1), var(--gray-4));
|
|
4
|
+
--theme-form-input-bg-outlined: light-dark(var(--gray-1), var(--gray-4));
|
|
5
|
+
--theme-form-input-bg-underlined: light-dark(var(--gray-0), var(--gray-9));
|
|
4
6
|
--theme-form-input-border: var(--blue-8);
|
|
5
7
|
--theme-form-input-border-active: var(--blue-2);
|
|
6
8
|
--theme-form-input-border-focus: var(--blue-2);
|
|
7
9
|
--theme-form-input-outline: white;
|
|
8
10
|
--theme-form-input-outline-active: var(--blue-6);
|
|
9
11
|
--theme-form-input-outline-focus: var(--blue-6);
|
|
10
|
-
--theme-form-input-text: light-dark(var(--gray-
|
|
12
|
+
--theme-form-input-text-color-normal: light-dark(var(--gray-11), var(--gray-11));
|
|
13
|
+
--theme-form-input-text-color-outlined: light-dark(var(--gray-10), var(--gray-11));
|
|
14
|
+
--theme-form-input-text-color-underlined: light-dark(var(--gray-11), var(--gray-1));
|
|
15
|
+
|
|
16
|
+
--theme-form-input-text-label-color-normal: light-dark(var(--gray-11), var(--gray-1));
|
|
17
|
+
--theme-form-input-text-label-color-outlined: light-dark(var(--gray-10), var(--gray-11));
|
|
18
|
+
--theme-form-input-text-label-color-underlined: light-dark(var(--gray-11), var(--gray-1));
|
|
11
19
|
|
|
12
20
|
/* --theme-form-focus-box-shadow: light-dark(var(--blue-12), var(--blue-2)); */
|
|
13
21
|
--theme-form-focus-box-shadow: light-dark(red, yellowgreen);
|
|
@@ -26,7 +34,7 @@
|
|
|
26
34
|
--theme-form-radio-shadow-focus: var(--blue-6);
|
|
27
35
|
--theme-form-radio-symbol: var(--blue-12);
|
|
28
36
|
|
|
29
|
-
--theme-form-range-accent-color: light-dark(var(--blue-12), var(--blue-));
|
|
37
|
+
--theme-form-range-accent-color: light-dark(var(--blue-12), var(--blue-1));
|
|
30
38
|
|
|
31
39
|
/*
|
|
32
40
|
* ToggleSwitch
|
|
@@ -1,13 +1,21 @@
|
|
|
1
1
|
:root {
|
|
2
2
|
[data-form-theme='secondary'] {
|
|
3
|
-
--theme-form-input-bg: light-dark(var(--gray-1), var(--gray-4));
|
|
3
|
+
--theme-form-input-bg-normal: light-dark(var(--gray-1), var(--gray-4));
|
|
4
|
+
--theme-form-input-bg-outlined: light-dark(var(--gray-1), var(--gray-4));
|
|
5
|
+
--theme-form-input-bg-underlined: light-dark(var(--gray-1), var(--gray-4));
|
|
4
6
|
--theme-form-input-border: var(--gray-8);
|
|
5
7
|
--theme-form-input-border-active: var(--gray-2);
|
|
6
8
|
--theme-form-input-border-focus: var(--gray-2);
|
|
7
9
|
--theme-form-input-outline: white;
|
|
8
10
|
--theme-form-input-outline-active: var(--gray-6);
|
|
9
11
|
--theme-form-input-outline-focus: var(--gray-6);
|
|
10
|
-
--theme-form-input-text: light-dark(var(--gray-10), var(--gray-11));
|
|
12
|
+
--theme-form-input-text-color-normal: light-dark(var(--gray-10), var(--gray-11));
|
|
13
|
+
--theme-form-input-text-color-outlined: light-dark(var(--gray-10), var(--gray-1));
|
|
14
|
+
--theme-form-input-text-color-underlined: light-dark(var(--gray-11), var(--gray-1));
|
|
15
|
+
|
|
16
|
+
--theme-form-input-text-label-color-normal: light-dark(var(--gray-11), var(--gray-1));
|
|
17
|
+
--theme-form-input-text-label-color-outlined: light-dark(var(--gray-10), var(--gray-11));
|
|
18
|
+
--theme-form-input-text-label-color-underlined: light-dark(var(--gray-11), var(--gray-1));
|
|
11
19
|
|
|
12
20
|
--theme-form-focus-box-shadow: light-dark(var(--gray-12), var(--gray-2));
|
|
13
21
|
|
|
@@ -1,13 +1,21 @@
|
|
|
1
1
|
:root {
|
|
2
2
|
[data-form-theme='success'] {
|
|
3
|
-
--theme-form-input-bg: light-dark(var(--gray-1), var(--gray-4));
|
|
3
|
+
--theme-form-input-bg-normal: light-dark(var(--gray-1), var(--gray-4));
|
|
4
|
+
--theme-form-input-bg-outlined: light-dark(var(--gray-1), var(--gray-4));
|
|
5
|
+
--theme-form-input-bg-underlined: light-dark(var(--gray-1), var(--gray-4));
|
|
4
6
|
--theme-form-input-border: var(--green-8);
|
|
5
7
|
--theme-form-input-border-active: var(--green-2);
|
|
6
8
|
--theme-form-input-border-focus: var(--green-2);
|
|
7
9
|
--theme-form-input-outline: white;
|
|
8
10
|
--theme-form-input-outline-active: var(--green-6);
|
|
9
11
|
--theme-form-input-outline-focus: var(--green-6);
|
|
10
|
-
--theme-form-input-text: light-dark(var(--gray-10), var(--gray-11));
|
|
12
|
+
--theme-form-input-text-color-normal: light-dark(var(--gray-10), var(--gray-11));
|
|
13
|
+
--theme-form-input-text-color-outlined: light-dark(var(--gray-10), var(--gray-1));
|
|
14
|
+
--theme-form-input-text-color-underlined: light-dark(var(--gray-11), var(--gray-1));
|
|
15
|
+
|
|
16
|
+
--theme-form-input-text-label-color-normal: light-dark(var(--gray-11), var(--gray-1));
|
|
17
|
+
--theme-form-input-text-label-color-outlined: light-dark(var(--gray-10), var(--gray-11));
|
|
18
|
+
--theme-form-input-text-label-color-underlined: light-dark(var(--gray-11), var(--gray-1));
|
|
11
19
|
|
|
12
20
|
--theme-form-focus-box-shadow: light-dark(var(--green-12), var(--green-2));
|
|
13
21
|
|
|
@@ -1,13 +1,21 @@
|
|
|
1
1
|
:root {
|
|
2
2
|
[data-form-theme='tertiary'] {
|
|
3
|
-
--theme-form-input-bg: light-dark(var(--gray-1), var(--gray-4));
|
|
3
|
+
--theme-form-input-bg-normal: light-dark(var(--gray-1), var(--gray-4));
|
|
4
|
+
--theme-form-input-bg-outlined: light-dark(var(--gray-1), var(--gray-4));
|
|
5
|
+
--theme-form-input-bg-underlined: light-dark(var(--gray-1), var(--gray-4));
|
|
4
6
|
--theme-form-input-border: var(--gray-8);
|
|
5
7
|
--theme-form-input-border-active: var(--gray-2);
|
|
6
8
|
--theme-form-input-border-focus: var(--gray-2);
|
|
7
9
|
--theme-form-input-outline: white;
|
|
8
10
|
--theme-form-input-outline-active: var(--gray-6);
|
|
9
11
|
--theme-form-input-outline-focus: var(--gray-6);
|
|
10
|
-
--theme-form-input-text: light-dark(var(--gray-10), var(--gray-11));
|
|
12
|
+
--theme-form-input-text-color-normal: light-dark(var(--gray-10), var(--gray-11));
|
|
13
|
+
--theme-form-input-text-color-outlined: light-dark(var(--gray-10), var(--gray-1));
|
|
14
|
+
--theme-form-input-text-color-underlined: light-dark(var(--gray-11), var(--gray-1));
|
|
15
|
+
|
|
16
|
+
--theme-form-input-text-label-color-normal: light-dark(var(--gray-11), var(--gray-1));
|
|
17
|
+
--theme-form-input-text-label-color-outlined: light-dark(var(--gray-10), var(--gray-11));
|
|
18
|
+
--theme-form-input-text-label-color-underlined: light-dark(var(--gray-11), var(--gray-1));
|
|
11
19
|
|
|
12
20
|
--theme-form-focus-box-shadow: light-dark(var(--gray-12), var(--gray-2));
|
|
13
21
|
|
|
@@ -1,13 +1,21 @@
|
|
|
1
1
|
:root {
|
|
2
2
|
[data-form-theme='warning'] {
|
|
3
|
-
--theme-form-input-bg: light-dark(var(--gray-1), var(--gray-4));
|
|
3
|
+
--theme-form-input-bg-normal: light-dark(var(--gray-1), var(--gray-4));
|
|
4
|
+
--theme-form-input-bg-outlined: light-dark(var(--gray-1), var(--gray-4));
|
|
5
|
+
--theme-form-input-bg-underlined: light-dark(var(--gray-1), var(--gray-4));
|
|
4
6
|
--theme-form-input-border: var(--orange-8);
|
|
5
7
|
--theme-form-input-border-active: var(--orange-2);
|
|
6
8
|
--theme-form-input-border-focus: var(--orange-2);
|
|
7
9
|
--theme-form-input-outline: white;
|
|
8
10
|
--theme-form-input-outline-active: var(--orange-6);
|
|
9
11
|
--theme-form-input-outline-focus: var(--orange-6);
|
|
10
|
-
--theme-form-input-text: light-dark(var(--gray-10), var(--gray-11));
|
|
12
|
+
--theme-form-input-text-color-normal: light-dark(var(--gray-10), var(--gray-11));
|
|
13
|
+
--theme-form-input-text-color-outlined: light-dark(var(--gray-10), var(--gray-1));
|
|
14
|
+
--theme-form-input-text-color-underlined: light-dark(var(--gray-11), var(--gray-1));
|
|
15
|
+
|
|
16
|
+
--theme-form-input-text-label-color-normal: light-dark(var(--gray-11), var(--gray-1));
|
|
17
|
+
--theme-form-input-text-label-color-outlined: light-dark(var(--gray-10), var(--gray-11));
|
|
18
|
+
--theme-form-input-text-label-color-underlined: light-dark(var(--gray-11), var(--gray-1));
|
|
11
19
|
|
|
12
20
|
--theme-form-focus-box-shadow: light-dark(var(--orange-12), var(--orange-2));
|
|
13
21
|
|
|
@@ -1,4 +1,30 @@
|
|
|
1
1
|
/* Margin */
|
|
2
|
+
.mi-auto {
|
|
3
|
+
margin-inline: auto;
|
|
4
|
+
}
|
|
5
|
+
.mis-auto {
|
|
6
|
+
margin-inline-start: auto;
|
|
7
|
+
}
|
|
8
|
+
.mie-auto {
|
|
9
|
+
margin-inline-end: auto;
|
|
10
|
+
}
|
|
11
|
+
.mb-auto {
|
|
12
|
+
margin-block: auto;
|
|
13
|
+
}
|
|
14
|
+
.mbs-auto {
|
|
15
|
+
margin-block-start: auto;
|
|
16
|
+
}
|
|
17
|
+
.mbe-auto {
|
|
18
|
+
margin-block-end: auto;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.mb-0 {
|
|
22
|
+
margin-block: 0;
|
|
23
|
+
}
|
|
24
|
+
.mi-0 {
|
|
25
|
+
margin-inline: 0;
|
|
26
|
+
}
|
|
27
|
+
|
|
2
28
|
.m-0 {
|
|
3
29
|
margin: 0;
|
|
4
30
|
}
|
|
@@ -29,6 +29,7 @@ export const propValidators = {
|
|
|
29
29
|
radioAppearance: [null, 'with-decorator'],
|
|
30
30
|
optionsLayout: ['block', 'inline', 'equal-widths'],
|
|
31
31
|
labelWeight: ['normal', 'semi-bold', 'bold'],
|
|
32
|
+
inputVariant: ['normal', 'outlined', 'underlined'],
|
|
32
33
|
inputTypesButton: ['button', 'cancel', 'reset', 'submit'],
|
|
33
34
|
inputTypesText: ['text', 'email', 'password', 'number', 'tel', 'url'],
|
|
34
35
|
inputMode: ['text', 'email', 'tel', 'url', 'search', 'numeric', 'none', 'decimal'],
|
|
@@ -113,7 +113,7 @@ const minLength = computed(() => `${props.max.toString().length + 1}em`);
|
|
|
113
113
|
|
|
114
114
|
width: fit-content;
|
|
115
115
|
|
|
116
|
-
background-color: var(--theme-form-input-bg);
|
|
116
|
+
background-color: var(--theme-form-input-bg-normal);
|
|
117
117
|
border-radius: var(--form-element-border-width);
|
|
118
118
|
border: var(--form-element-border-width) solid var(--theme-form-input-border);
|
|
119
119
|
outline: var(--form-element-outline-width) solid var(--theme-form-input-outline);
|
|
@@ -147,8 +147,8 @@ const minLength = computed(() => `${props.max.toString().length + 1}em`);
|
|
|
147
147
|
outline: none;
|
|
148
148
|
box-shadow: none;
|
|
149
149
|
|
|
150
|
-
background-color: var(--theme-form-input-bg);
|
|
151
|
-
color: var(--theme-form-input-text);
|
|
150
|
+
background-color: var(--theme-form-input-bg-normal);
|
|
151
|
+
color: var(--theme-form-input-text-color-normal);
|
|
152
152
|
font-family: var(--font-family);
|
|
153
153
|
font-size: var(--form-element-font-size);
|
|
154
154
|
line-height: var(--form-element-line-height);
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
class="input-text-wrapper"
|
|
4
4
|
:data-form-theme="formTheme"
|
|
5
5
|
:data-size="size"
|
|
6
|
-
:class="[{ dirty: isDirty }, { active: isActive }, { error: fieldHasError }, { 'has-left-slot': hasLeftSlot }, { 'has-right-slot': hasRightSlot }]"
|
|
6
|
+
:class="[inputVariant, { dirty: isDirty }, { active: isActive }, { error: fieldHasError }, { 'has-left-slot': hasLeftSlot }, { 'has-right-slot': hasRightSlot }]"
|
|
7
7
|
>
|
|
8
8
|
<span v-if="hasLeftSlot" class="slot left-slot">
|
|
9
9
|
<slot name="left"></slot>
|
|
@@ -98,6 +98,13 @@ const props = defineProps({
|
|
|
98
98
|
return propValidators.size.includes(value);
|
|
99
99
|
},
|
|
100
100
|
},
|
|
101
|
+
inputVariant: {
|
|
102
|
+
type: String as PropType<string>,
|
|
103
|
+
default: 'normal',
|
|
104
|
+
validator(value: string) {
|
|
105
|
+
return propValidators.inputVariant.includes(value);
|
|
106
|
+
},
|
|
107
|
+
},
|
|
101
108
|
});
|
|
102
109
|
|
|
103
110
|
const slots = useSlots();
|
|
@@ -151,22 +158,88 @@ onMounted(() => {
|
|
|
151
158
|
<style lang="css">
|
|
152
159
|
.input-text-wrapper {
|
|
153
160
|
--_focus-box-shadow: var(--box-shadow-off);
|
|
161
|
+
--_input-text-core-color: var(--theme-form-input-text-color-normal);
|
|
162
|
+
|
|
163
|
+
--_input-text-wrapper-background-color: var(--theme-form-input-bg-normal);
|
|
164
|
+
|
|
165
|
+
--_input-text-wrapper-border: var(--form-element-border-width) solid var(--theme-form-input-border);
|
|
166
|
+
--_input-text-wrapper-border-radius: var(--form-input-border-radius);
|
|
167
|
+
|
|
168
|
+
--_input-text-wrapper-outline: var(--form-element-outline-width) solid var(--theme-form-input-outline);
|
|
169
|
+
--_input-text-wrapper-opacity: 1;
|
|
170
|
+
--_input-text-wrapper-box-shadow: var(--_focus-box-shadow);
|
|
171
|
+
--_input-text-wrapper-margin-inline: 0;
|
|
172
|
+
|
|
173
|
+
&.underlined {
|
|
174
|
+
--_input-text-core-color: var(--theme-form-input-text-color-underlined);
|
|
175
|
+
--_input-text-wrapper-background-color: var(--theme-form-input-bg-underlined);
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
&.outlined {
|
|
179
|
+
--_input-text-wrapper-margin-inline: 1px;
|
|
180
|
+
--_input-text-wrapper-background-color: var(--theme-form-input-bg-outlined);
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
&.normal {
|
|
184
|
+
&:focus-within {
|
|
185
|
+
--_input-text-wrapper-box-shadow: var(--box-shadow-on);
|
|
186
|
+
--_input-text-wrapper-outline: var(--form-element-outline-width) solid hsl(from var(--theme-form-input-outline-focus) h s 90%);
|
|
187
|
+
}
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
&:not(.normal) {
|
|
191
|
+
--_input-text-wrapper-border: none;
|
|
192
|
+
--_input-text-wrapper-box-shadow: none;
|
|
193
|
+
--_input-text-wrapper-outline: none;
|
|
194
|
+
--_input-text-wrapper-opacity: 0;
|
|
195
|
+
|
|
196
|
+
&:focus {
|
|
197
|
+
--_input-text-wrapper-border: none;
|
|
198
|
+
--_input-text-wrapper-box-shadow: none;
|
|
199
|
+
--_input-text-wrapper-outline: none;
|
|
200
|
+
--_input-text-wrapper-background-color: transparent;
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
&:focus-within {
|
|
204
|
+
--_input-text-wrapper-border: none;
|
|
205
|
+
--_input-text-wrapper-box-shadow: none;
|
|
206
|
+
--_input-text-wrapper-outline: none;
|
|
207
|
+
--_input-text-wrapper-background-color: transparent;
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
&.active,
|
|
211
|
+
&.dirty {
|
|
212
|
+
--_input-text-wrapper-border: none;
|
|
213
|
+
--_input-text-wrapper-box-shadow: none;
|
|
214
|
+
--_input-text-wrapper-outline: none;
|
|
215
|
+
--_input-text-wrapper-background-color: transparent;
|
|
216
|
+
|
|
217
|
+
--_input-text-wrapper-opacity: 1;
|
|
218
|
+
}
|
|
219
|
+
}
|
|
154
220
|
|
|
155
221
|
display: flex;
|
|
156
222
|
align-items: center;
|
|
157
223
|
|
|
158
|
-
background-color: var(--
|
|
159
|
-
border-radius: var(--
|
|
160
|
-
border: var(--
|
|
161
|
-
outline: var(--
|
|
162
|
-
box-shadow: var(--
|
|
224
|
+
background-color: var(--_input-text-wrapper-background-color);
|
|
225
|
+
border-radius: var(--_input-text-wrapper-border-radius);
|
|
226
|
+
border: var(--_input-text-wrapper-border);
|
|
227
|
+
outline: var(--_input-text-wrapper-outline);
|
|
228
|
+
box-shadow: var(--_input-text-wrapper-box-shadow);
|
|
229
|
+
opacity: var(--_input-text-wrapper-opacity);
|
|
230
|
+
|
|
231
|
+
margin-inline: var(--_input-text-wrapper-margin-inline);
|
|
232
|
+
|
|
233
|
+
&:not(.normal) {
|
|
234
|
+
transition: opacity 0.2s ease-in-out;
|
|
235
|
+
}
|
|
163
236
|
|
|
164
237
|
&:not(:has(.input-button-core)) {
|
|
165
238
|
.slot {
|
|
166
239
|
display: inline-block;
|
|
167
240
|
|
|
168
241
|
.icon {
|
|
169
|
-
color: var(--
|
|
242
|
+
color: var(--_input-text-core-color);
|
|
170
243
|
aspect-ratio: 1;
|
|
171
244
|
height: var(--form-icon-size);
|
|
172
245
|
width: var(--form-icon-size);
|
|
@@ -192,11 +265,6 @@ onMounted(() => {
|
|
|
192
265
|
}
|
|
193
266
|
}
|
|
194
267
|
|
|
195
|
-
&:focus-within {
|
|
196
|
-
box-shadow: var(--box-shadow-on);
|
|
197
|
-
outline: var(--form-element-outline-width) solid hsl(from var(--theme-form-input-outline-focus) h s 90%);
|
|
198
|
-
}
|
|
199
|
-
|
|
200
268
|
.input-text-core {
|
|
201
269
|
background-color: transparent;
|
|
202
270
|
border: none;
|
|
@@ -204,7 +272,7 @@ onMounted(() => {
|
|
|
204
272
|
box-shadow: none;
|
|
205
273
|
flex-grow: 1;
|
|
206
274
|
|
|
207
|
-
color: var(--
|
|
275
|
+
color: var(--_input-text-core-color);
|
|
208
276
|
font-family: var(--font-family);
|
|
209
277
|
font-size: var(--form-element-font-size);
|
|
210
278
|
line-height: var(--form-element-line-height);
|
|
@@ -220,13 +288,6 @@ onMounted(() => {
|
|
|
220
288
|
font-style: italic;
|
|
221
289
|
font-weight: 400;
|
|
222
290
|
}
|
|
223
|
-
|
|
224
|
-
/* WTH is --_focus-box-shadow undefined when attempting update here?? */
|
|
225
|
-
/*
|
|
226
|
-
&:focus-visible {
|
|
227
|
-
--_focus-box-shadow: var(--box-shadow-on);
|
|
228
|
-
:has(:has( }
|
|
229
|
-
*/
|
|
230
291
|
}
|
|
231
292
|
|
|
232
293
|
&:has(.has-left-button),
|
|
@@ -257,11 +318,11 @@ input:-internal-autofill-selected,
|
|
|
257
318
|
input:-webkit-autofill-strong-password,
|
|
258
319
|
input:-webkit-autofill-strong-password-viewable,
|
|
259
320
|
input:-webkit-autofill-and-obscured {
|
|
260
|
-
background-color: var(--theme-form-input-bg) !important;
|
|
321
|
+
background-color: var(--theme-form-input-bg-normal) !important;
|
|
261
322
|
background-image: none !important;
|
|
262
|
-
color: var(--theme-form-input-text) !important;
|
|
263
|
-
-webkit-box-shadow: 0 0 0rem 1000px var(--theme-form-input-bg) inset;
|
|
264
|
-
-webkit-text-fill-color: var(--theme-form-input-text);
|
|
323
|
+
color: var(--theme-form-input-text-color-normal) !important;
|
|
324
|
+
-webkit-box-shadow: 0 0 0rem 1000px var(--theme-form-input-bg-normal) inset;
|
|
325
|
+
-webkit-text-fill-color: var(--theme-form-input-text-color-normal);
|
|
265
326
|
transition: background-color 5000s ease-in-out 0s;
|
|
266
327
|
}
|
|
267
328
|
</style>
|
|
@@ -1,5 +1,20 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<InputTextWithLabel
|
|
2
|
+
<InputTextWithLabel
|
|
3
|
+
v-model="modelValue"
|
|
4
|
+
:data-form-theme="formTheme"
|
|
5
|
+
:type="inputType"
|
|
6
|
+
:maxlength
|
|
7
|
+
:name
|
|
8
|
+
:placeholder
|
|
9
|
+
:label
|
|
10
|
+
:errorMessage
|
|
11
|
+
:fieldHasError
|
|
12
|
+
:required
|
|
13
|
+
:styleClassPassthrough
|
|
14
|
+
:theme
|
|
15
|
+
:size
|
|
16
|
+
:inputVariant
|
|
17
|
+
>
|
|
3
18
|
<template #right>
|
|
4
19
|
<InputButtonCore
|
|
5
20
|
type="button"
|
|
@@ -25,7 +40,7 @@ import propValidators from '../../c12/prop-validators';
|
|
|
25
40
|
|
|
26
41
|
const props = defineProps({
|
|
27
42
|
type: {
|
|
28
|
-
type: String
|
|
43
|
+
type: String as PropType<'text' | 'password'>,
|
|
29
44
|
default: 'password',
|
|
30
45
|
},
|
|
31
46
|
maxlength: {
|
|
@@ -74,6 +89,13 @@ const props = defineProps({
|
|
|
74
89
|
return propValidators.size.includes(value);
|
|
75
90
|
},
|
|
76
91
|
},
|
|
92
|
+
inputVariant: {
|
|
93
|
+
type: String as PropType<string>,
|
|
94
|
+
default: 'normal',
|
|
95
|
+
validator(value: string) {
|
|
96
|
+
return propValidators.inputVariant.includes(value);
|
|
97
|
+
},
|
|
98
|
+
},
|
|
77
99
|
});
|
|
78
100
|
|
|
79
101
|
const formTheme = computed(() => {
|
|
@@ -89,7 +111,7 @@ const updateFocus = (name: string, isFocused: boolean) => {
|
|
|
89
111
|
// modelValue.value.focusedField = isFocused ? name : '';
|
|
90
112
|
};
|
|
91
113
|
|
|
92
|
-
const inputType = ref(props.type);
|
|
114
|
+
const inputType = ref<'text' | 'password'>(props.type);
|
|
93
115
|
|
|
94
116
|
const displayPassword = ref(false);
|
|
95
117
|
const buttonText = computed(() => {
|
|
@@ -24,6 +24,7 @@
|
|
|
24
24
|
inputmode="numeric"
|
|
25
25
|
:ariaDescribedby
|
|
26
26
|
:size
|
|
27
|
+
:inputVariant
|
|
27
28
|
>
|
|
28
29
|
<template v-if="hasLeftSlot" #left>
|
|
29
30
|
<InputButtonCore
|
|
@@ -121,6 +122,13 @@ const props = defineProps({
|
|
|
121
122
|
return propValidators.size.includes(value);
|
|
122
123
|
},
|
|
123
124
|
},
|
|
125
|
+
inputVariant: {
|
|
126
|
+
type: String as PropType<string>,
|
|
127
|
+
default: 'normal',
|
|
128
|
+
validator(value: string) {
|
|
129
|
+
return propValidators.inputVariant.includes(value);
|
|
130
|
+
},
|
|
131
|
+
},
|
|
124
132
|
});
|
|
125
133
|
|
|
126
134
|
const slots = useSlots();
|
|
@@ -1,38 +1,46 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div
|
|
3
|
-
<
|
|
2
|
+
<div>
|
|
3
|
+
<div class="input-text-with-label" :data-form-theme="formTheme" :class="[elementClasses, inputVariant, { dirty: isDirty }, { active: isActive }]">
|
|
4
|
+
<label :for="id" class="input-text-label">{{ label }}</label>
|
|
4
5
|
|
|
5
|
-
|
|
6
|
-
|
|
6
|
+
<div v-if="inputVariant === 'normal' && hasDescriptionSlot" :id="`${id}-description`">
|
|
7
|
+
<slot name="description"></slot>
|
|
8
|
+
</div>
|
|
9
|
+
|
|
10
|
+
<InputTextCore
|
|
11
|
+
v-model="modelValue"
|
|
12
|
+
v-model:isDirty="isDirty"
|
|
13
|
+
v-model:isActive="isActive"
|
|
14
|
+
:type
|
|
15
|
+
:inputmode
|
|
16
|
+
:maxlength
|
|
17
|
+
:id
|
|
18
|
+
:name
|
|
19
|
+
:placeholder
|
|
20
|
+
:label
|
|
21
|
+
:errorMessage
|
|
22
|
+
:fieldHasError
|
|
23
|
+
:required
|
|
24
|
+
:styleClassPassthrough
|
|
25
|
+
:theme
|
|
26
|
+
:ariaDescribedby
|
|
27
|
+
:size
|
|
28
|
+
:inputVariant
|
|
29
|
+
>
|
|
30
|
+
<template v-if="hasLeftSlot" #left>
|
|
31
|
+
<slot name="left"></slot>
|
|
32
|
+
</template>
|
|
33
|
+
<template v-if="hasRightSlot" #right>
|
|
34
|
+
<slot name="right"></slot>
|
|
35
|
+
</template>
|
|
36
|
+
</InputTextCore>
|
|
37
|
+
|
|
38
|
+
<InputError :errorMessage="errorMessage" :showError="fieldHasError" :id="errorId" :isDetached="false" />
|
|
7
39
|
</div>
|
|
8
40
|
|
|
9
|
-
<
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
v-model:isActive="isActive"
|
|
13
|
-
:type
|
|
14
|
-
:inputmode
|
|
15
|
-
:maxlength
|
|
16
|
-
:id
|
|
17
|
-
:name
|
|
18
|
-
:placeholder
|
|
19
|
-
:label
|
|
20
|
-
:errorMessage
|
|
21
|
-
:fieldHasError
|
|
22
|
-
:required
|
|
23
|
-
:styleClassPassthrough
|
|
24
|
-
:theme
|
|
25
|
-
:ariaDescribedby
|
|
26
|
-
:size
|
|
27
|
-
>
|
|
28
|
-
<template v-if="hasLeftSlot" #left>
|
|
29
|
-
<slot name="left"></slot>
|
|
30
|
-
</template>
|
|
31
|
-
<template v-if="hasRightSlot" #right>
|
|
32
|
-
<slot name="right"></slot>
|
|
33
|
-
</template>
|
|
34
|
-
</InputTextCore>
|
|
35
|
-
<InputError :errorMessage="errorMessage" :showError="fieldHasError" :id="errorId" :isDetached="false" />
|
|
41
|
+
<div v-if="inputVariant !== 'normal' && hasDescriptionSlot" :id="`${id}-description`">
|
|
42
|
+
<slot name="description"></slot>
|
|
43
|
+
</div>
|
|
36
44
|
</div>
|
|
37
45
|
</template>
|
|
38
46
|
|
|
@@ -44,7 +52,7 @@ const props = defineProps({
|
|
|
44
52
|
default: 255,
|
|
45
53
|
},
|
|
46
54
|
type: {
|
|
47
|
-
type: String
|
|
55
|
+
type: String as PropType<'text' | 'email' | 'password' | 'number' | 'tel' | 'url'>,
|
|
48
56
|
required: true,
|
|
49
57
|
},
|
|
50
58
|
inputmode: {
|
|
@@ -96,6 +104,13 @@ const props = defineProps({
|
|
|
96
104
|
return propValidators.size.includes(value);
|
|
97
105
|
},
|
|
98
106
|
},
|
|
107
|
+
inputVariant: {
|
|
108
|
+
type: String as PropType<string>,
|
|
109
|
+
default: 'normal',
|
|
110
|
+
validator(value: string) {
|
|
111
|
+
return propValidators.inputVariant.includes(value);
|
|
112
|
+
},
|
|
113
|
+
},
|
|
99
114
|
});
|
|
100
115
|
|
|
101
116
|
const slots = useSlots();
|
|
@@ -142,9 +157,119 @@ watch(
|
|
|
142
157
|
|
|
143
158
|
<style lang="css">
|
|
144
159
|
.input-text-with-label {
|
|
160
|
+
--_input-text-with-label-margin-block-start: 0;
|
|
161
|
+
--_input-text-with-label-background-color: transparent;
|
|
162
|
+
|
|
163
|
+
--_input-text-wrapper-border: var(--form-element-border-width) solid var(--theme-form-input-border);
|
|
164
|
+
--_input-text-wrapper-border-radius: var(--form-input-border-radius);
|
|
165
|
+
--_input-text-wrapper-border-underlined: var(--form-element-border-width-underlined) solid var(--theme-form-input-border);
|
|
166
|
+
--_input-text-wrapper-outline: var(--form-element-outline-width) solid var(--theme-form-input-outline);
|
|
167
|
+
--_input-text-wrapper-box-shadow: var(--_focus-box-shadow);
|
|
168
|
+
--_input-text-wrapper-padding-block: 0;
|
|
169
|
+
|
|
170
|
+
--_focus-box-shadow: var(--box-shadow-off);
|
|
171
|
+
|
|
172
|
+
/* Label vars */
|
|
173
|
+
--_label-text-color: var(--theme-form-input-text-label-color-normal);
|
|
174
|
+
--_label-text-margin-block: 0.8rem;
|
|
175
|
+
--_label-text-size: var(--step-1);
|
|
176
|
+
--_label-text-weight: normal;
|
|
177
|
+
--_label-text-line-height: 1.5;
|
|
178
|
+
|
|
179
|
+
&.underlined {
|
|
180
|
+
--_label-text-color: var(--theme-form-input-text-label-color-underlined);
|
|
181
|
+
--_label-offset: 0 0;
|
|
182
|
+
--_input-text-with-label-background-color: var(--theme-form-input-bg-underlined);
|
|
183
|
+
--_input-text-wrapper-border-radius: 0;
|
|
184
|
+
|
|
185
|
+
&:has(.input-text-wrapper.active),
|
|
186
|
+
&:has(.input-text-wrapper.dirty) {
|
|
187
|
+
--_label-offset: 0 -2.8rem;
|
|
188
|
+
/* font-size: var(--step-1); */
|
|
189
|
+
/* line-height: 1.5; */
|
|
190
|
+
/* padding: 0.2rem 1.2rem; */
|
|
191
|
+
}
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
&.outlined {
|
|
195
|
+
--_label-text-color: var(--theme-form-input-text-label-color-outlined);
|
|
196
|
+
|
|
197
|
+
--_label-offset: 1rem 0;
|
|
198
|
+
--_input-text-with-label-background-color: var(--theme-form-input-bg-normal);
|
|
199
|
+
|
|
200
|
+
--_input-text-wrapper-padding-block: 0.4em;
|
|
201
|
+
|
|
202
|
+
&:has(.input-text-wrapper.active),
|
|
203
|
+
&:has(.input-text-wrapper.dirty) {
|
|
204
|
+
--_label-offset: 1rem -2.8rem;
|
|
205
|
+
/* font-size: var(--step-1); */
|
|
206
|
+
/* line-height: 1.5; */
|
|
207
|
+
/* padding: 0.2rem 1.2rem; */
|
|
208
|
+
}
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
&:not(.normal) {
|
|
212
|
+
--_input-text-with-label-margin-block-start: 2em;
|
|
213
|
+
|
|
214
|
+
&:has(.input-text-wrapper.active),
|
|
215
|
+
&:has(.input-text-wrapper.dirty) {
|
|
216
|
+
/* --_label-offset: 1rem -2.8rem; */
|
|
217
|
+
/* font-size: var(--step-1); */
|
|
218
|
+
/* line-height: 1.5; */
|
|
219
|
+
/* padding: 0.2rem 1.2rem; */
|
|
220
|
+
}
|
|
221
|
+
|
|
222
|
+
&:focus-within {
|
|
223
|
+
--_input-text-wrapper-box-shadow: var(--box-shadow-on);
|
|
224
|
+
--_input-text-wrapper-outline: var(--form-element-outline-width) solid hsl(from var(--theme-form-input-outline-focus) h s 90%);
|
|
225
|
+
}
|
|
226
|
+
}
|
|
227
|
+
|
|
228
|
+
/*
|
|
229
|
+
* Apply generic styles
|
|
230
|
+
**/
|
|
231
|
+
|
|
232
|
+
background-color: var(--_input-text-with-label-background-color);
|
|
233
|
+
border-radius: var(--_input-text-wrapper-border-radius);
|
|
234
|
+
|
|
235
|
+
&.underlined {
|
|
236
|
+
border-bottom: var(--_input-text-wrapper-border-underlined);
|
|
237
|
+
}
|
|
238
|
+
|
|
239
|
+
&.outlined {
|
|
240
|
+
border: var(--_input-text-wrapper-border);
|
|
241
|
+
outline: var(--_input-text-wrapper-outline);
|
|
242
|
+
box-shadow: var(--_input-text-wrapper-box-shadow);
|
|
243
|
+
padding-block: var(--_input-text-wrapper-padding-block);
|
|
244
|
+
}
|
|
245
|
+
|
|
246
|
+
&:not(.normal) {
|
|
247
|
+
display: grid;
|
|
248
|
+
grid-template-columns: 1fr;
|
|
249
|
+
grid-template-rows: 1fr;
|
|
250
|
+
grid-template-areas: 'underlined-text-stack';
|
|
251
|
+
|
|
252
|
+
margin-block-start: var(--_input-text-with-label-margin-block-start);
|
|
253
|
+
|
|
254
|
+
.input-text-label {
|
|
255
|
+
grid-area: underlined-text-stack;
|
|
256
|
+
z-index: 2;
|
|
257
|
+
}
|
|
258
|
+
.input-text-wrapper {
|
|
259
|
+
grid-area: underlined-text-stack;
|
|
260
|
+
z-index: 1;
|
|
261
|
+
}
|
|
262
|
+
}
|
|
263
|
+
|
|
145
264
|
.input-text-label {
|
|
146
265
|
display: block;
|
|
147
|
-
|
|
266
|
+
color: var(--_label-text-color);
|
|
267
|
+
margin-block: var(--_label-text-margin-block);
|
|
268
|
+
font-size: var(--_label-text-size);
|
|
269
|
+
font-weight: var(--_label-text-weight);
|
|
270
|
+
line-height: var(--_label-text-line-height);
|
|
271
|
+
translate: var(--_label-offset);
|
|
272
|
+
transition: font-size 0.2s ease-in-out, translate 0.2s ease-in-out;
|
|
148
273
|
}
|
|
149
274
|
}
|
|
150
275
|
</style>
|
|
@@ -107,7 +107,7 @@ const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
|
|
|
107
107
|
display: flex;
|
|
108
108
|
align-items: center;
|
|
109
109
|
|
|
110
|
-
background-color: var(--theme-form-input-bg);
|
|
110
|
+
background-color: var(--theme-form-input-bg-normal);
|
|
111
111
|
border-radius: var(--form-element-border-width);
|
|
112
112
|
border: var(--_border-width) solid var(--theme-form-input-border);
|
|
113
113
|
|
|
@@ -122,7 +122,7 @@ const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
|
|
|
122
122
|
padding-inline: 0.8rem;
|
|
123
123
|
|
|
124
124
|
.icon {
|
|
125
|
-
color: var(--theme-form-input-text);
|
|
125
|
+
color: var(--theme-form-input-text-color-normal);
|
|
126
126
|
}
|
|
127
127
|
}
|
|
128
128
|
|
|
@@ -147,7 +147,7 @@ const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
|
|
|
147
147
|
box-shadow: none;
|
|
148
148
|
flex-grow: 1;
|
|
149
149
|
|
|
150
|
-
color: var(--theme-form-input-text);
|
|
150
|
+
color: var(--theme-form-input-text-color-normal);
|
|
151
151
|
font-family: var(--font-family);
|
|
152
152
|
font-size: var(--form-element-font-size);
|
|
153
153
|
line-height: var(--form-element-line-height);
|
|
@@ -99,7 +99,6 @@ const setColourSchemeAttr = async () => {
|
|
|
99
99
|
};
|
|
100
100
|
|
|
101
101
|
const handleInputActiveClass = () => {
|
|
102
|
-
console.log(`handleInputActiveClass`, currentActiveIndex.value);
|
|
103
102
|
colourSchemeInputElements.value.forEach((element) => {
|
|
104
103
|
element.classList.remove('active');
|
|
105
104
|
});
|
|
@@ -1,24 +1,6 @@
|
|
|
1
1
|
export const useColourScheme = () => {
|
|
2
|
-
// const currentColourScheme = computed(() => {
|
|
3
|
-
// return colourScheme.value;
|
|
4
|
-
// });
|
|
5
|
-
|
|
6
2
|
const currentColourScheme = ref<'auto' | 'dark' | 'light' | null>(null);
|
|
7
3
|
|
|
8
|
-
// const updateColourScheme = (newColourScheme: 'auto' | 'dark' | 'light') => {
|
|
9
|
-
// colourScheme.value = newColourScheme;
|
|
10
|
-
// };
|
|
11
|
-
|
|
12
|
-
// const getSetPrefereredColourScheme = () => {
|
|
13
|
-
// if (import.meta.client) {
|
|
14
|
-
// if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches && !document.documentElement.dataset.colorScheme) {
|
|
15
|
-
// colourScheme.value = 'dark';
|
|
16
|
-
// } else {
|
|
17
|
-
// colourScheme.value = 'light';
|
|
18
|
-
// }
|
|
19
|
-
// }
|
|
20
|
-
// };
|
|
21
|
-
|
|
22
4
|
const returnSavedColourPreferenceFromLocalStorage = () => {
|
|
23
5
|
if (import.meta.client) {
|
|
24
6
|
return localStorage.getItem('colourScheme') as 'auto' | 'dark' | 'light' | null;
|
|
@@ -27,18 +9,6 @@ export const useColourScheme = () => {
|
|
|
27
9
|
|
|
28
10
|
onMounted(() => {
|
|
29
11
|
currentColourScheme.value = returnSavedColourPreferenceFromLocalStorage() || 'auto';
|
|
30
|
-
// colourScheme.value = currentColourScheme.value;
|
|
31
|
-
//
|
|
32
|
-
// if (import.meta.client) {
|
|
33
|
-
// const savedColourScheme = localStorage.getItem('colourScheme');
|
|
34
|
-
// if (savedColourScheme) {
|
|
35
|
-
// colourScheme.value = savedColourScheme as 'dark' | 'light';
|
|
36
|
-
// } else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
|
37
|
-
// colourScheme.value = 'dark';
|
|
38
|
-
// } else {
|
|
39
|
-
// colourScheme.value = 'light';
|
|
40
|
-
// }
|
|
41
|
-
// }
|
|
42
12
|
});
|
|
43
13
|
|
|
44
14
|
watch(currentColourScheme, (newVal) => {
|
|
@@ -51,8 +21,5 @@ export const useColourScheme = () => {
|
|
|
51
21
|
|
|
52
22
|
return {
|
|
53
23
|
currentColourScheme,
|
|
54
|
-
// colourScheme,
|
|
55
|
-
// updateColourScheme,
|
|
56
|
-
// getSetPrefereredColourScheme,
|
|
57
24
|
};
|
|
58
25
|
};
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "srcdev-nuxt-forms",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "2.4.
|
|
4
|
+
"version": "2.4.13",
|
|
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",
|
|
@@ -24,28 +24,28 @@
|
|
|
24
24
|
"types/"
|
|
25
25
|
],
|
|
26
26
|
"devDependencies": {
|
|
27
|
-
"@nuxt/eslint-config": "1.
|
|
28
|
-
"@nuxt/icon": "1.
|
|
29
|
-
"@nuxt/test-utils": "3.
|
|
27
|
+
"@nuxt/eslint-config": "1.2.0",
|
|
28
|
+
"@nuxt/icon": "1.11.0",
|
|
29
|
+
"@nuxt/test-utils": "3.17.2",
|
|
30
30
|
"@vue/test-utils": "2.4.6",
|
|
31
|
-
"eslint": "9.
|
|
31
|
+
"eslint": "9.22.0",
|
|
32
32
|
"happy-dom": "16.8.1",
|
|
33
|
-
"nuxt": "3.
|
|
33
|
+
"nuxt": "3.16.0",
|
|
34
34
|
"release-it": "18.1.2",
|
|
35
|
-
"typescript": "5.
|
|
36
|
-
"vitest": "3.0.
|
|
35
|
+
"typescript": "5.8.2",
|
|
36
|
+
"vitest": "3.0.8",
|
|
37
37
|
"vue": "3.5.13"
|
|
38
38
|
},
|
|
39
39
|
"dependencies": {
|
|
40
|
-
"@iconify-json/carbon": "1.2.
|
|
40
|
+
"@iconify-json/carbon": "1.2.8",
|
|
41
41
|
"@iconify-json/gridicons": "1.2.2",
|
|
42
|
-
"@iconify-json/material-symbols": "1.2.
|
|
43
|
-
"@iconify-json/material-symbols-light": "1.2.
|
|
42
|
+
"@iconify-json/material-symbols": "1.2.16",
|
|
43
|
+
"@iconify-json/material-symbols-light": "1.2.16",
|
|
44
44
|
"@iconify-json/ph": "1.2.2",
|
|
45
45
|
"@iconify-json/radix-icons": "1.2.2",
|
|
46
46
|
"@iconify-json/ri": "1.2.5",
|
|
47
47
|
"modern-normalize": "3.0.1",
|
|
48
|
-
"zod": "3.24.
|
|
48
|
+
"zod": "3.24.2"
|
|
49
49
|
},
|
|
50
50
|
"release-it": {
|
|
51
51
|
"$schema": "https://unpkg.com/release-it/schema/release-it.json",
|