react-validate-component 0.4.0 → 0.5.0

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.
Files changed (26) hide show
  1. package/README.md +10 -333
  2. package/dist/react-validate-component.cjs.development.js +102 -48
  3. package/dist/react-validate-component.cjs.development.js.map +1 -1
  4. package/dist/react-validate-component.cjs.production.min.js +1 -1
  5. package/dist/react-validate-component.cjs.production.min.js.map +1 -1
  6. package/dist/react-validate-component.esm.js +102 -48
  7. package/dist/react-validate-component.esm.js.map +1 -1
  8. package/dist/vEmail/index.d.ts +2 -2
  9. package/dist/vEmail/vEmail.d.ts +1 -1
  10. package/dist/vRadio/index.d.ts +2 -1
  11. package/dist/vRadio/vRadio.d.ts +16 -0
  12. package/dist/vURL/index.d.ts +2 -2
  13. package/dist/vURL/vURL.d.ts +1 -1
  14. package/package.json +1 -1
  15. package/src/vCheckbox/index.tsx +1 -1
  16. package/src/vEmail/index.tsx +9 -9
  17. package/src/vEmail/vEmail.ts +1 -1
  18. package/src/vRadio/index.tsx +106 -2
  19. package/src/vRadio/vRadio.ts +27 -0
  20. package/src/vText/index.tsx +7 -7
  21. package/src/vURL/index.tsx +9 -9
  22. package/src/vURL/vURL.ts +1 -1
  23. package/src/vCheckbox/index.module.css +0 -34
  24. package/src/vText/index.module.css +0 -210
  25. package/src/vURL/index.module.css +0 -210
  26. /package/src/{vEmail/index.module.css → index.module.css} +0 -0
package/src/vText/index.module.css DELETED
@@ -1,210 +0,0 @@
1
- .invalid {
2
- border: 2px solid red;
3
- outline: none;
4
- }
5
- .invalid:focus,
6
- .invalid:focus-visible,
7
- .invalid:focus-within {
8
- border: 2px solid red;
9
- }
10
-
11
- /* vType === 'outer' */
12
- .vinput {
13
- display: flex;
14
- }
15
- .vinput-top-left {
16
- flex-direction: column-reverse;
17
- align-items: flex-start;
18
- justify-content: center;
19
- }
20
- .vinput-top {
21
- flex-direction: column-reverse;
22
- align-items: center;
23
- justify-content: center;
24
- }
25
- .vinput-top-right {
26
- flex-direction: column-reverse;
27
- align-items: flex-end;
28
- justify-content: center;
29
- }
30
- .vinput-center-left {
31
- flex-direction: row-reverse;
32
- align-items: center;
33
- justify-content: center;
34
- }
35
- .vinput-center-right {
36
- align-items: center;
37
- justify-content: center;
38
- }
39
- .vinput-bottom-left {
40
- flex-direction: column;
41
- align-items: flex-start;
42
- justify-content: center;
43
- }
44
- .vinput-bottom {
45
- flex-direction: column;
46
- align-items: center;
47
- justify-content: center;
48
- }
49
- .vinput-bottom-right {
50
- flex-direction: column;
51
- align-items: flex-end;
52
- justify-content: center;
53
- }
54
-
55
- /* vType === 'inner' */
56
- .innerMessage {
57
- position: absolute;
58
- font-size: 12px;
59
- margin: 0;
60
- padding: 2px 5px;
61
- display: flex;
62
- }
63
- .innerMessage-top-left {
64
- align-items: flex-start;
65
- justify-content: flex-start;
66
- }
67
- .innerMessage-top {
68
- align-items: flex-start;
69
- justify-content: center;
70
- }
71
- .innerMessage-top-right {
72
- align-items: flex-start;
73
- justify-content: flex-end;
74
- }
75
- .innerMessage-center-left {
76
- align-items: center;
77
- justify-content: flex-start;
78
- }
79
- .innerMessage-center {
80
- align-items: center;
81
- justify-content: center;
82
- }
83
- .innerMessage-center-right {
84
- align-items: center;
85
- justify-content: flex-end;
86
- }
87
- .innerMessage-bottom-left {
88
- align-items: flex-end;
89
- justify-content: flex-start;
90
- }
91
- .innerMessage-bottom {
92
- align-items: flex-end;
93
- justify-content: center;
94
- }
95
- .innerMessage-bottom-right {
96
- align-items: flex-end;
97
- justify-content: flex-end;
98
- }
99
-
100
- /* vType === 'tooltip' */
101
- .tooltipMessage {
102
- position: absolute;
103
- margin: 0;
104
- padding: 10px 20px;
105
- border: 1px solid transparent;
106
- border-radius: 10px;
107
- background-color: black;
108
- }
109
- p[class*='tooltipMessage-top'] {
110
- transform: translateY(calc(-100% - 10px));
111
- }
112
- p[class*='tooltipMessage-top']::after {
113
- content: '';
114
- position: absolute;
115
- bottom: 0;
116
- border: 10px solid transparent;
117
- border-top-color: black;
118
- border-bottom: 0;
119
- margin-bottom: -11px;
120
- }
121
- .vinput.tooltipMessage-top-left {
122
- justify-content: flex-start;
123
- }
124
- p.tooltipMessage-top-left::after {
125
- left: 3%;
126
- }
127
- .vinput.tooltipMessage-top {
128
- justify-content: center;
129
- }
130
- p.tooltipMessage-top::after {
131
- left: 44%;
132
- }
133
- .tooltipMessage-top-right {
134
- justify-content: flex-end;
135
- }
136
- p.tooltipMessage-top-right::after {
137
- left: 87%;
138
- }
139
- p[class*='tooltipMessage-center'] {
140
- /* transform: translateY(calc(-100% - 10px)); */
141
- }
142
- p[class*='tooltipMessage-center']::after {
143
- content: '';
144
- position: absolute;
145
- border: 10px solid transparent;
146
- }
147
- .vinput.tooltipMessage-center-right {
148
- justify-content: flex-end;
149
- }
150
- p.tooltipMessage-center-right {
151
- transform: translateX(calc(100% + 10px));
152
- }
153
- p.tooltipMessage-center-right::after {
154
- border-right-color: black;
155
- left: -10%;
156
- }
157
- .vinput.tooltipMessage-center-left {
158
- justify-content: flex-start;
159
- }
160
- p.tooltipMessage-center-left {
161
- transform: translateX(calc(-100% - 10px));
162
- }
163
- p.tooltipMessage-center-left::after {
164
- border-left-color: black;
165
- left: 100%;
166
- }
167
-
168
- p[class*='tooltipMessage-bottom'] {
169
- transform: translateY(calc(120% + 10px));
170
- }
171
- p[class*='tooltipMessage-bottom']::after {
172
- content: '';
173
- position: absolute;
174
- top: 0;
175
- border: 10px solid transparent;
176
- border-bottom-color: black;
177
- border-top: 0;
178
- margin-top: -11px;
179
- }
180
- .vinput.tooltipMessage-bottom-left {
181
- justify-content: flex-start;
182
- }
183
- p.tooltipMessage-bottom-left::after {
184
- left: 3%;
185
- }
186
- .vinput.tooltipMessage-bottom {
187
- justify-content: center;
188
- }
189
- p.tooltipMessage-bottom::after {
190
- left: 44%;
191
- }
192
- .tooltipMessage-bottom-right {
193
- justify-content: flex-end;
194
- }
195
- p.tooltipMessage-bottom-right::after {
196
- left: 87%;
197
- }
198
-
199
- .animateMessage {
200
- animation: fade-in 1s ease-in-out;
201
- }
202
-
203
- @keyframes fade-in {
204
- 0% {
205
- opacity: 0;
206
- }
207
- 100% {
208
- opacity: 1;
209
- }
210
- }
package/src/vURL/index.module.css DELETED
@@ -1,210 +0,0 @@
1
- .invalid {
2
- border: 2px solid red;
3
- outline: none;
4
- }
5
- .invalid:focus,
6
- .invalid:focus-visible,
7
- .invalid:focus-within {
8
- border: 2px solid red;
9
- }
10
-
11
- /* vType === 'outer' */
12
- .vinput {
13
- display: flex;
14
- }
15
- .vinput-top-left {
16
- flex-direction: column-reverse;
17
- align-items: flex-start;
18
- justify-content: center;
19
- }
20
- .vinput-top {
21
- flex-direction: column-reverse;
22
- align-items: center;
23
- justify-content: center;
24
- }
25
- .vinput-top-right {
26
- flex-direction: column-reverse;
27
- align-items: flex-end;
28
- justify-content: center;
29
- }
30
- .vinput-center-left {
31
- flex-direction: row-reverse;
32
- align-items: center;
33
- justify-content: center;
34
- }
35
- .vinput-center-right {
36
- align-items: center;
37
- justify-content: center;
38
- }
39
- .vinput-bottom-left {
40
- flex-direction: column;
41
- align-items: flex-start;
42
- justify-content: center;
43
- }
44
- .vinput-bottom {
45
- flex-direction: column;
46
- align-items: center;
47
- justify-content: center;
48
- }
49
- .vinput-bottom-right {
50
- flex-direction: column;
51
- align-items: flex-end;
52
- justify-content: center;
53
- }
54
-
55
- /* vType === 'inner' */
56
- .innerMessage {
57
- position: absolute;
58
- font-size: 12px;
59
- margin: 0;
60
- padding: 2px 5px;
61
- display: flex;
62
- }
63
- .innerMessage-top-left {
64
- align-items: flex-start;
65
- justify-content: flex-start;
66
- }
67
- .innerMessage-top {
68
- align-items: flex-start;
69
- justify-content: center;
70
- }
71
- .innerMessage-top-right {
72
- align-items: flex-start;
73
- justify-content: flex-end;
74
- }
75
- .innerMessage-center-left {
76
- align-items: center;
77
- justify-content: flex-start;
78
- }
79
- .innerMessage-center {
80
- align-items: center;
81
- justify-content: center;
82
- }
83
- .innerMessage-center-right {
84
- align-items: center;
85
- justify-content: flex-end;
86
- }
87
- .innerMessage-bottom-left {
88
- align-items: flex-end;
89
- justify-content: flex-start;
90
- }
91
- .innerMessage-bottom {
92
- align-items: flex-end;
93
- justify-content: center;
94
- }
95
- .innerMessage-bottom-right {
96
- align-items: flex-end;
97
- justify-content: flex-end;
98
- }
99
-
100
- /* vType === 'tooltip' */
101
- .tooltipMessage {
102
- position: absolute;
103
- margin: 0;
104
- padding: 10px 20px;
105
- border: 1px solid transparent;
106
- border-radius: 10px;
107
- background-color: black;
108
- }
109
- p[class*='tooltipMessage-top'] {
110
- transform: translateY(calc(-100% - 10px));
111
- }
112
- p[class*='tooltipMessage-top']::after {
113
- content: '';
114
- position: absolute;
115
- bottom: 0;
116
- border: 10px solid transparent;
117
- border-top-color: black;
118
- border-bottom: 0;
119
- margin-bottom: -11px;
120
- }
121
- .vinput.tooltipMessage-top-left {
122
- justify-content: flex-start;
123
- }
124
- p.tooltipMessage-top-left::after {
125
- left: 3%;
126
- }
127
- .vinput.tooltipMessage-top {
128
- justify-content: center;
129
- }
130
- p.tooltipMessage-top::after {
131
- left: 44%;
132
- }
133
- .tooltipMessage-top-right {
134
- justify-content: flex-end;
135
- }
136
- p.tooltipMessage-top-right::after {
137
- left: 87%;
138
- }
139
- p[class*='tooltipMessage-center'] {
140
- /* transform: translateY(calc(-100% - 10px)); */
141
- }
142
- p[class*='tooltipMessage-center']::after {
143
- content: '';
144
- position: absolute;
145
- border: 10px solid transparent;
146
- }
147
- .vinput.tooltipMessage-center-right {
148
- justify-content: flex-end;
149
- }
150
- p.tooltipMessage-center-right {
151
- transform: translateX(calc(100% + 10px));
152
- }
153
- p.tooltipMessage-center-right::after {
154
- border-right-color: black;
155
- left: -10%;
156
- }
157
- .vinput.tooltipMessage-center-left {
158
- justify-content: flex-start;
159
- }
160
- p.tooltipMessage-center-left {
161
- transform: translateX(calc(-100% - 10px));
162
- }
163
- p.tooltipMessage-center-left::after {
164
- border-left-color: black;
165
- left: 100%;
166
- }
167
-
168
- p[class*='tooltipMessage-bottom'] {
169
- transform: translateY(calc(120% + 10px));
170
- }
171
- p[class*='tooltipMessage-bottom']::after {
172
- content: '';
173
- position: absolute;
174
- top: 0;
175
- border: 10px solid transparent;
176
- border-bottom-color: black;
177
- border-top: 0;
178
- margin-top: -11px;
179
- }
180
- .vinput.tooltipMessage-bottom-left {
181
- justify-content: flex-start;
182
- }
183
- p.tooltipMessage-bottom-left::after {
184
- left: 3%;
185
- }
186
- .vinput.tooltipMessage-bottom {
187
- justify-content: center;
188
- }
189
- p.tooltipMessage-bottom::after {
190
- left: 44%;
191
- }
192
- .tooltipMessage-bottom-right {
193
- justify-content: flex-end;
194
- }
195
- p.tooltipMessage-bottom-right::after {
196
- left: 87%;
197
- }
198
-
199
- .animateMessage {
200
- animation: fade-in 1s ease-in-out;
201
- }
202
-
203
- @keyframes fade-in {
204
- 0% {
205
- opacity: 0;
206
- }
207
- 100% {
208
- opacity: 1;
209
- }
210
- }