srcdev-nuxt-forms 0.0.21 → 0.0.22
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/index.css +2 -1
- package/assets/styles/forms/themes/_primary.css +3 -0
- package/assets/styles/forms/themes/index.css +1 -0
- package/assets/styles/forms/variables/_theme.css +2 -21
- package/components/forms/input-text/variants/InputTextMaterial.vue +42 -27
- package/components/forms/ui/FormField.vue +1 -1
- package/package.json +1 -1
|
@@ -1 +1,2 @@
|
|
|
1
|
-
@import
|
|
1
|
+
@import './variables/_theme.css';
|
|
2
|
+
@import './themes/index.css';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@import './_primary.css';
|
|
@@ -1,27 +1,8 @@
|
|
|
1
1
|
:root {
|
|
2
|
-
--form-bg-color: #f9f9f9; /* Background color for form */
|
|
3
|
-
--form-border-color: #cccccc; /* Border color for form elements */
|
|
4
|
-
--form-text-color: #333333; /* Text color for form elements */
|
|
5
|
-
--form-placeholder-color: #888888; /* Placeholder text color */
|
|
6
|
-
--form-focus-border-color: #0076c6; /* Border color on focus */
|
|
7
|
-
--form-button-bg-color: #0076c6; /* Button background color */
|
|
8
|
-
--form-button-text-color: #ffffff; /* Button text color */
|
|
9
|
-
--form-error-color: #ce0606; /* Error message color */
|
|
10
|
-
--form-success-color: #008000; /* Success message color */
|
|
11
|
-
--form-warning-color: #ffcc00; /* Warning message color */
|
|
12
|
-
--form-info-color: #0076c6; /* Info message color */
|
|
13
|
-
--form-required-color: #ce0606; /* Required field color */
|
|
14
|
-
--form-disabled-color: #cccccc; /* Disabled field color */
|
|
15
|
-
--form-disabled-bg-color: #f9f9f9; /* Disabled field background color */
|
|
16
|
-
--form-disabled-border-color: #cccccc; /* Disabled field border color */
|
|
17
|
-
--form-disabled-text-color: #999999; /* Disabled field text color */
|
|
18
|
-
|
|
19
|
-
--input-border: #121212;
|
|
20
|
-
|
|
21
2
|
--input-border-radius: 4px;
|
|
22
|
-
|
|
23
3
|
--input-border-width-thin: 1px;
|
|
24
|
-
--input-border-width-
|
|
4
|
+
--input-border-width-default: 2px;
|
|
5
|
+
--input-border-width-thick: 3px;
|
|
25
6
|
|
|
26
7
|
--font-family: futura-pt, Seravek, 'Gill Sans Nova', Ubuntu, Calibri,
|
|
27
8
|
'DejaVu Sans', source-sans-pro, sans-serif;
|
|
@@ -1,9 +1,12 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div class="input-text-material">
|
|
3
|
-
<label
|
|
4
|
-
|
|
3
|
+
<label
|
|
4
|
+
class="label"
|
|
5
|
+
:class="[{ active: isFocused }, { dirty: isDirty }]"
|
|
6
|
+
:for="id"
|
|
7
|
+
>{{ c12.label }}</label
|
|
5
8
|
>
|
|
6
|
-
<div class="input-
|
|
9
|
+
<div class="input-text-container">
|
|
7
10
|
<InputTextCore
|
|
8
11
|
:id
|
|
9
12
|
:name
|
|
@@ -70,58 +73,70 @@ const styleClassPassthrough = computed(() => {
|
|
|
70
73
|
|
|
71
74
|
const modelValue = defineModel() as Ref<IFormData>;
|
|
72
75
|
const isFocused = ref(false);
|
|
76
|
+
const isDirty = computed(() => {
|
|
77
|
+
return modelValue.value.data[name.value] !== '';
|
|
78
|
+
});
|
|
73
79
|
</script>
|
|
74
80
|
|
|
75
81
|
<style lang="css">
|
|
76
82
|
.input-text-material {
|
|
83
|
+
input {
|
|
84
|
+
background-color: transparent;
|
|
85
|
+
&:focus {
|
|
86
|
+
outline: none;
|
|
87
|
+
box-shadow: none;
|
|
88
|
+
border: none;
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
|
|
77
92
|
--_gutter: 12px;
|
|
93
|
+
--_border-default: var(--primary-border-default);
|
|
94
|
+
--_border-width: var(--input-border-width-default);
|
|
78
95
|
|
|
79
96
|
display: grid;
|
|
80
|
-
grid-template-columns: 1fr;
|
|
81
|
-
/* grid-template-rows: var(--_gutter) 1fr var(--_gutter); */
|
|
82
|
-
grid-template-rows: var(--_gutter) 1fr var(--_gutter);
|
|
83
|
-
gap: calc(var(--_gutter) / 2);
|
|
84
|
-
|
|
85
|
-
border: 1px solid red;
|
|
86
97
|
border-radius: 2px;
|
|
98
|
+
outline: var(--_border-width) solid var(--_border-default);
|
|
87
99
|
|
|
88
100
|
margin-bottom: 20px;
|
|
89
|
-
|
|
101
|
+
overflow: hidden;
|
|
102
|
+
|
|
103
|
+
&:focus-within {
|
|
104
|
+
outline: calc(var(--_border-width) * 2) solid var(--_border-default);
|
|
105
|
+
background-color: hsl(from var(--_border-default) h s 95%);
|
|
106
|
+
}
|
|
90
107
|
|
|
91
108
|
.label {
|
|
92
|
-
grid-row:
|
|
109
|
+
grid-row: 1;
|
|
93
110
|
grid-column: 1;
|
|
94
111
|
|
|
95
112
|
font-family: var(--font-family);
|
|
96
|
-
font-size:
|
|
113
|
+
font-size: 20px;
|
|
97
114
|
font-weight: 700;
|
|
98
115
|
padding: var(--_gutter);
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
z-index: 2;
|
|
102
|
-
|
|
116
|
+
transform: translateY(10px);
|
|
103
117
|
transition: all linear 0.2s;
|
|
118
|
+
background-color: transparent;
|
|
104
119
|
|
|
105
|
-
&.active
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
transform: translateY(-10px);
|
|
120
|
+
&.active,
|
|
121
|
+
&.dirty {
|
|
122
|
+
font-size: 14px;
|
|
123
|
+
transform: translateY(0);
|
|
110
124
|
}
|
|
111
125
|
}
|
|
112
126
|
|
|
113
|
-
.input-
|
|
114
|
-
|
|
127
|
+
.input-text-container {
|
|
128
|
+
display: grid;
|
|
129
|
+
grid-row: 1;
|
|
115
130
|
grid-column: 1;
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
transform: translateY(12px);
|
|
131
|
+
margin-top: 2rem;
|
|
132
|
+
background-color: transparent;
|
|
119
133
|
|
|
120
134
|
.input-text {
|
|
121
135
|
font-family: var(--font-family);
|
|
122
136
|
border: 0px solid green;
|
|
123
|
-
padding: var(--_gutter);
|
|
137
|
+
padding: calc(var(--_gutter) / 2) var(--_gutter);
|
|
124
138
|
font-size: 16px;
|
|
139
|
+
margin: 0;
|
|
125
140
|
|
|
126
141
|
/* &::placeholder,
|
|
127
142
|
&:-ms-input-placeholder,
|