react-validate-component 0.1.1 → 0.1.3
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/README.md +48 -18
- package/dist/index.d.ts +9 -10
- package/dist/react-validate-component.cjs.development.js +81 -55
- package/dist/react-validate-component.cjs.development.js.map +1 -1
- package/dist/react-validate-component.cjs.production.min.js +1 -1
- package/dist/react-validate-component.cjs.production.min.js.map +1 -1
- package/dist/react-validate-component.esm.js +76 -50
- package/dist/react-validate-component.esm.js.map +1 -1
- package/dist/vCheckbox/index.d.ts +2 -0
- package/dist/vColor/index.d.ts +2 -0
- package/dist/vDate/index.d.ts +2 -0
- package/dist/vEmail/index.d.ts +2 -0
- package/dist/vRadio/index.d.ts +2 -0
- package/dist/vRange/index.d.ts +2 -0
- package/dist/vText/index.d.ts +3 -0
- package/dist/{types/vinput.d.ts → vText/vText.d.ts} +3 -2
- package/dist/vURL/index.d.ts +2 -0
- package/package.json +36 -3
- package/src/index.ts +10 -0
- package/src/vCheckbox/index.tsx +5 -0
- package/src/vColor/index.tsx +5 -0
- package/src/vDate/index.tsx +5 -0
- package/src/vEmail/index.tsx +5 -0
- package/src/vRadio/index.tsx +5 -0
- package/src/vRange/index.tsx +5 -0
- package/src/vText/index.module.css +210 -0
- package/src/vText/index.tsx +93 -0
- package/src/{types/vinput.ts → vText/vText.ts} +3 -2
- package/src/vURL/index.tsx +5 -0
- package/src/index.module.css +0 -103
- package/src/index.tsx +0 -79
package/README.md
CHANGED
|
@@ -2,10 +2,14 @@
|
|
|
2
2
|
|
|
3
3
|
`react-validate-component`는 리액트 애플리케이션에서 입력 유효성 검사를 간편하게 처리할 수 있도록 도와주는 라이브러리입니다. 현재 `VText` 컴포넌트가 구현되어 있으며, 이 컴포넌트를 사용하여 간단하게 텍스트 입력의 유효성을 검사할 수 있습니다.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
`react-validate-component` is a library that helps simplify input validation in React applications. Currently, it includes the `VText` component, which allows for easy validation of text input.
|
|
6
|
+
|
|
7
|
+
## 설치, Install
|
|
6
8
|
|
|
7
9
|
`react-validate-component` 라이브러리는 npm 또는 yarn을 통해 설치할 수 있습니다.
|
|
8
10
|
|
|
11
|
+
The `react-validate-component` library can be installed via npm or yarn.
|
|
12
|
+
|
|
9
13
|
### npm
|
|
10
14
|
|
|
11
15
|
```bash
|
|
@@ -18,15 +22,19 @@ npm install react-validate-component
|
|
|
18
22
|
yarn add react-validate-component
|
|
19
23
|
```
|
|
20
24
|
|
|
21
|
-
##
|
|
25
|
+
## 사용법, How to use
|
|
26
|
+
|
|
27
|
+
현재 라이브러리에는 `VText` 컴포넌트가 구현되어 있습니다. 이 컴포넌트를 사용하여 텍스트 입력 필드의 유효성 검사를 쉽게 구현할 수 있습니다.
|
|
22
28
|
|
|
23
|
-
|
|
29
|
+
The library currently includes the `VText` component. You can use this component to easily implement validation for text input fields.
|
|
24
30
|
|
|
25
|
-
### VText
|
|
31
|
+
### VText Component
|
|
26
32
|
|
|
27
|
-
`VText` 컴포넌트는 기본적인 텍스트 입력
|
|
33
|
+
`VText` 컴포넌트는 기본적인 텍스트 입력 필드에 유효성 검사 문구를 출력해주는 기능을 제공합니다.
|
|
28
34
|
|
|
29
|
-
|
|
35
|
+
The `VText` component provides functionality to display validation messages for basic text input fields.
|
|
36
|
+
|
|
37
|
+
#### 사용 예제, Example
|
|
30
38
|
|
|
31
39
|
```jsx
|
|
32
40
|
import React from 'react';
|
|
@@ -40,7 +48,7 @@ const App = () => {
|
|
|
40
48
|
React.useEffect(() => {
|
|
41
49
|
if (/[\d]/gim.exec(message)) {
|
|
42
50
|
setVState(true);
|
|
43
|
-
setVMessage('
|
|
51
|
+
setVMessage('DO NOT INPUT NUMBER.');
|
|
44
52
|
} else {
|
|
45
53
|
setVState(false);
|
|
46
54
|
setVMessage('');
|
|
@@ -52,15 +60,16 @@ const App = () => {
|
|
|
52
60
|
<h1>React-Validate-Component</h1>
|
|
53
61
|
<div>
|
|
54
62
|
<h2>VText</h2>
|
|
63
|
+
<h3>DO NOT INPUT NUMBER.</h3>
|
|
55
64
|
<VText
|
|
56
65
|
vState={vState}
|
|
57
|
-
|
|
66
|
+
vType={'outer'}
|
|
67
|
+
vClassName={'test'}
|
|
58
68
|
vShowMessage={true}
|
|
59
69
|
vMessage={vMessage}
|
|
60
|
-
|
|
61
|
-
vLocateMessage={'top-left'}
|
|
70
|
+
vLocateMessage={'bottom-left'}
|
|
62
71
|
vMessageClass={styles.validation_message}
|
|
63
|
-
vIsAnimate={
|
|
72
|
+
vIsAnimate={true}
|
|
64
73
|
props={{
|
|
65
74
|
onChange: (e: { target: { value: string } }) => {
|
|
66
75
|
setMessage(e.target.value);
|
|
@@ -81,30 +90,51 @@ export default App;
|
|
|
81
90
|
#### Props
|
|
82
91
|
|
|
83
92
|
- `vState` (boolean): 유효성 상태 값입니다.
|
|
93
|
+
- `vType` (`inner`, `outer`, `tooltip`): 유효성 메시지를 띄우는 타입입니다.
|
|
84
94
|
- `vClassName` (string): 유효성 입힐 class 명입니다.
|
|
85
95
|
- `vShowMessage` (boolean): 유효성 메시지 출력 여부값입니다.
|
|
86
96
|
- `vMessage` (string): 유효성 검사 실패 시 표시할 에러 메시지입니다.
|
|
87
|
-
- `vIsInnerMessage` (boolean): 유효성 메시지를 element 안에 넣을지 (absolute 형태) 여부입니다.
|
|
88
97
|
- `vLocateMessage` (`top-left`, `top`, `top-right`, `center-left`, `center`, `center-right`, `bottom-left`, `bottom`, `bottom-right`): 유효성 메시지를 element 어디에 붙일지 위치값입니다.
|
|
89
98
|
- `vMessageClass` (string): 유효성 메시지에 입힐 class 명입니다.
|
|
90
|
-
- `vIsAnimate` (boolean): 유효성 메시지 출력 시 애니메이션 적용할지 여부입니다. (
|
|
99
|
+
- `vIsAnimate` (boolean): 유효성 메시지 출력 시 애니메이션 적용할지 여부입니다. (현재는 opacity만 적용되어있습니다.)
|
|
91
100
|
- `props` (object): 기타 옵션입니다. 기본 input 태그에 attribute로 넣을 값들을 입력하시면 됩니다.
|
|
92
101
|
|
|
93
|
-
|
|
102
|
+
- `vState` (boolean): The validity status value.
|
|
103
|
+
- `vType` (`inner`, `outer`, `tooltip`): The type of validation message display.
|
|
104
|
+
- `vClassName` (string): The class name to apply for validation styling.
|
|
105
|
+
- `vShowMessage` (boolean): Whether to display the validation message.
|
|
106
|
+
- `vMessage` (string): The error message to display when validation fails.
|
|
107
|
+
- `vLocateMessage` (`top-left`, `top`, `top-right`, `center-left`, `center`, `center-right`, `bottom-left`, `bottom`, `bottom-right`): The position where the validation message should be displayed relative to the element.
|
|
108
|
+
- `vMessageClass` (string): The class name to apply to the validation message.
|
|
109
|
+
- `vIsAnimate` (boolean): Whether to apply animation when displaying the validation message (currently, only opacity animation is supported).
|
|
110
|
+
- `props` (object): Other options. Enter values for attributes that can be added to the basic input tag.
|
|
111
|
+
|
|
112
|
+
### 유효성 검사 규칙, Validation Rules
|
|
94
113
|
|
|
95
114
|
- 지금은 사용자가 정규식 혹은 함수를 이용해 작성한 유효성검사 로직을 토대로 element에 출력하고 있습니다.
|
|
96
115
|
- 상단에 예시를 확인하여 주시기 바랍니다.
|
|
97
116
|
|
|
98
|
-
|
|
117
|
+
- Currently, validation messages are displayed based on validation logic written by the user using regular expressions or functions.
|
|
118
|
+
- Please refer to the examples provided above.
|
|
119
|
+
|
|
120
|
+
## 개발중인 기능, Features in Development
|
|
99
121
|
|
|
100
122
|
- 현재 `VText` 컴포넌트만 구현되어 있으며, 다른 입력 유형에 대한 컴포넌트도 개발할 예정입니다.
|
|
101
123
|
- 추가적인 유효성 검사 규칙 및 에러 메시지 처리 기능이 계획되어 있습니다.
|
|
102
|
-
- 현재 문서에 이미지를 추가한 문서
|
|
124
|
+
- 현재 문서에 이미지를 추가한 문서 업데이트도 예정되어있습니다.
|
|
125
|
+
|
|
126
|
+
- Currently, only the `VText` component is implemented, but components for other input types are planned for development.
|
|
127
|
+
- Additional validation rules and error message handling features are also in the pipeline.
|
|
128
|
+
- Updates to the documentation, including the addition of images, are also planned.
|
|
103
129
|
|
|
104
|
-
##
|
|
130
|
+
## 기여, Contributions
|
|
105
131
|
|
|
106
132
|
기여를 원하시는 분은 언제든지 pull request를 제출하거나 이슈를 제기해 주세요. 코드 기여 및 피드백을 환영합니다!
|
|
107
133
|
|
|
108
|
-
|
|
134
|
+
If you would like to contribute, please feel free to submit a pull request or open an issue at any time. We welcome code contributions and feedback!
|
|
135
|
+
|
|
136
|
+
## 라이센스, License
|
|
109
137
|
|
|
110
138
|
이 라이브러리는 [MIT 라이센스](LICENSE) 하에 배포됩니다.
|
|
139
|
+
|
|
140
|
+
This library is distributed under the [MIT License](LICENSE).
|
package/dist/index.d.ts
CHANGED
|
@@ -1,10 +1,9 @@
|
|
|
1
|
-
import
|
|
2
|
-
import {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
export
|
|
10
|
-
export declare const VUrl: () => React.JSX.Element;
|
|
1
|
+
import { VText } from './vText';
|
|
2
|
+
import { VCheckbox } from './vCheckbox';
|
|
3
|
+
import { vColor } from './vColor';
|
|
4
|
+
import { vDate } from './vDate';
|
|
5
|
+
import { vEmail } from './vEmail';
|
|
6
|
+
import { vRadio } from './vRadio';
|
|
7
|
+
import { vRange } from './vRange';
|
|
8
|
+
import { vURL } from './vURL';
|
|
9
|
+
export { VText, VCheckbox, vColor, vDate, vEmail, vRadio, vRange, vURL };
|
|
@@ -33,23 +33,23 @@ function styleInject(css, ref) {
|
|
|
33
33
|
}
|
|
34
34
|
}
|
|
35
35
|
|
|
36
|
-
var css_248z = ".index-
|
|
37
|
-
var styles = {"invalid":"index-
|
|
36
|
+
var css_248z = ".index-module_invalid__iPosr {\r\n border: 2px solid red;\r\n outline: none;\r\n}\r\n.index-module_invalid__iPosr:focus,\r\n.index-module_invalid__iPosr:focus-visible,\r\n.index-module_invalid__iPosr:focus-within {\r\n border: 2px solid red;\r\n}\r\n\r\n/* vType === 'outer' */\r\n.index-module_vinput__Xz53v {\r\n display: flex;\r\n}\r\n.index-module_vinput-top-left__UFNRe {\r\n flex-direction: column-reverse;\r\n align-items: flex-start;\r\n justify-content: center;\r\n}\r\n.index-module_vinput-top__Gor3M {\r\n flex-direction: column-reverse;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n.index-module_vinput-top-right__wexyT {\r\n flex-direction: column-reverse;\r\n align-items: flex-end;\r\n justify-content: center;\r\n}\r\n.index-module_vinput-center-left__oTbXC {\r\n flex-direction: row-reverse;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n.index-module_vinput-center-right__wz--8 {\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n.index-module_vinput-bottom-left__9gm8q {\r\n flex-direction: column;\r\n align-items: flex-start;\r\n justify-content: center;\r\n}\r\n.index-module_vinput-bottom__bxp6x {\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n.index-module_vinput-bottom-right__ihiB0 {\r\n flex-direction: column;\r\n align-items: flex-end;\r\n justify-content: center;\r\n}\r\n\r\n/* vType === 'inner' */\r\n.index-module_innerMessage__cnS6N {\r\n position: absolute;\r\n font-size: 12px;\r\n margin: 0;\r\n padding: 2px 5px;\r\n display: flex;\r\n}\r\n.index-module_innerMessage-top-left__3804h {\r\n align-items: flex-start;\r\n justify-content: flex-start;\r\n}\r\n.index-module_innerMessage-top__MRmrS {\r\n align-items: flex-start;\r\n justify-content: center;\r\n}\r\n.index-module_innerMessage-top-right__4ejsZ {\r\n align-items: flex-start;\r\n justify-content: flex-end;\r\n}\r\n.index-module_innerMessage-center-left__t2SwR {\r\n align-items: center;\r\n justify-content: flex-start;\r\n}\r\n.index-module_innerMessage-center__gT4X6 {\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n.index-module_innerMessage-center-right__FzHy2 {\r\n align-items: center;\r\n justify-content: flex-end;\r\n}\r\n.index-module_innerMessage-bottom-left__gI2z5 {\r\n align-items: flex-end;\r\n justify-content: flex-start;\r\n}\r\n.index-module_innerMessage-bottom__Zb48i {\r\n align-items: flex-end;\r\n justify-content: center;\r\n}\r\n.index-module_innerMessage-bottom-right__OlaLD {\r\n align-items: flex-end;\r\n justify-content: flex-end;\r\n}\r\n\r\n/* vType === 'tooltip' */\r\n.index-module_tooltipMessage__BG3C0 {\r\n position: absolute;\r\n margin: 0;\r\n padding: 10px 20px;\r\n border: 1px solid transparent;\r\n border-radius: 10px;\r\n background-color: black;\r\n}\r\np[class*='tooltipMessage-top'] {\r\n transform: translateY(calc(-100% - 10px));\r\n}\r\np[class*='tooltipMessage-top']::after {\r\n content: '';\r\n position: absolute;\r\n bottom: 0;\r\n border: 10px solid transparent;\r\n border-top-color: black;\r\n border-bottom: 0;\r\n margin-bottom: -11px;\r\n}\r\n.index-module_vinput__Xz53v.index-module_tooltipMessage-top-left__EExDe {\r\n justify-content: flex-start;\r\n}\r\np.index-module_tooltipMessage-top-left__EExDe::after {\r\n left: 3%;\r\n}\r\n.index-module_vinput__Xz53v.index-module_tooltipMessage-top__L7c5- {\r\n justify-content: center;\r\n}\r\np.index-module_tooltipMessage-top__L7c5-::after {\r\n left: 44%;\r\n}\r\n.index-module_tooltipMessage-top-right__iVHO9 {\r\n justify-content: flex-end;\r\n}\r\np.index-module_tooltipMessage-top-right__iVHO9::after {\r\n left: 87%;\r\n}\r\np[class*='tooltipMessage-center'] {\r\n /* transform: translateY(calc(-100% - 10px)); */\r\n}\r\np[class*='tooltipMessage-center']::after {\r\n content: '';\r\n position: absolute;\r\n border: 10px solid transparent;\r\n}\r\n.index-module_vinput__Xz53v.index-module_tooltipMessage-center-right__nL7jv {\r\n justify-content: flex-end;\r\n}\r\np.index-module_tooltipMessage-center-right__nL7jv {\r\n transform: translateX(calc(100% + 10px));\r\n}\r\np.index-module_tooltipMessage-center-right__nL7jv::after {\r\n border-right-color: black;\r\n left: -10%;\r\n}\r\n.index-module_vinput__Xz53v.index-module_tooltipMessage-center-left__C2dwc {\r\n justify-content: flex-start;\r\n}\r\np.index-module_tooltipMessage-center-left__C2dwc {\r\n transform: translateX(calc(-100% - 10px));\r\n}\r\np.index-module_tooltipMessage-center-left__C2dwc::after {\r\n border-left-color: black;\r\n left: 100%;\r\n}\r\n\r\np[class*='tooltipMessage-bottom'] {\r\n transform: translateY(calc(120% + 10px));\r\n}\r\np[class*='tooltipMessage-bottom']::after {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n border: 10px solid transparent;\r\n border-bottom-color: black;\r\n border-top: 0;\r\n margin-top: -11px;\r\n}\r\n.index-module_vinput__Xz53v.index-module_tooltipMessage-bottom-left__G4dRB {\r\n justify-content: flex-start;\r\n}\r\np.index-module_tooltipMessage-bottom-left__G4dRB::after {\r\n left: 3%;\r\n}\r\n.index-module_vinput__Xz53v.index-module_tooltipMessage-bottom__O5fIQ {\r\n justify-content: center;\r\n}\r\np.index-module_tooltipMessage-bottom__O5fIQ::after {\r\n left: 44%;\r\n}\r\n.index-module_tooltipMessage-bottom-right__ACA9z {\r\n justify-content: flex-end;\r\n}\r\np.index-module_tooltipMessage-bottom-right__ACA9z::after {\r\n left: 87%;\r\n}\r\n\r\n.index-module_animateMessage__2Xq3T {\r\n animation: index-module_fade-in__Xcu-Q 1s ease-in-out;\r\n}\r\n\r\n@keyframes index-module_fade-in__Xcu-Q {\r\n 0% {\r\n opacity: 0;\r\n }\r\n 100% {\r\n opacity: 1;\r\n }\r\n}\r\n";
|
|
37
|
+
var styles = {"invalid":"index-module_invalid__iPosr","vinput":"index-module_vinput__Xz53v","vinput-top-left":"index-module_vinput-top-left__UFNRe","vinput-top":"index-module_vinput-top__Gor3M","vinput-top-right":"index-module_vinput-top-right__wexyT","vinput-center-left":"index-module_vinput-center-left__oTbXC","vinput-center-right":"index-module_vinput-center-right__wz--8","vinput-bottom-left":"index-module_vinput-bottom-left__9gm8q","vinput-bottom":"index-module_vinput-bottom__bxp6x","vinput-bottom-right":"index-module_vinput-bottom-right__ihiB0","innerMessage":"index-module_innerMessage__cnS6N","innerMessage-top-left":"index-module_innerMessage-top-left__3804h","innerMessage-top":"index-module_innerMessage-top__MRmrS","innerMessage-top-right":"index-module_innerMessage-top-right__4ejsZ","innerMessage-center-left":"index-module_innerMessage-center-left__t2SwR","innerMessage-center":"index-module_innerMessage-center__gT4X6","innerMessage-center-right":"index-module_innerMessage-center-right__FzHy2","innerMessage-bottom-left":"index-module_innerMessage-bottom-left__gI2z5","innerMessage-bottom":"index-module_innerMessage-bottom__Zb48i","innerMessage-bottom-right":"index-module_innerMessage-bottom-right__OlaLD","tooltipMessage":"index-module_tooltipMessage__BG3C0","tooltipMessage-top-left":"index-module_tooltipMessage-top-left__EExDe","tooltipMessage-top":"index-module_tooltipMessage-top__L7c5-","tooltipMessage-top-right":"index-module_tooltipMessage-top-right__iVHO9","tooltipMessage-center-right":"index-module_tooltipMessage-center-right__nL7jv","tooltipMessage-center-left":"index-module_tooltipMessage-center-left__C2dwc","tooltipMessage-bottom-left":"index-module_tooltipMessage-bottom-left__G4dRB","tooltipMessage-bottom":"index-module_tooltipMessage-bottom__O5fIQ","tooltipMessage-bottom-right":"index-module_tooltipMessage-bottom-right__ACA9z","animateMessage":"index-module_animateMessage__2Xq3T","fade-in":"index-module_fade-in__Xcu-Q"};
|
|
38
38
|
styleInject(css_248z);
|
|
39
39
|
|
|
40
40
|
// Text
|
|
41
|
-
|
|
42
|
-
var _props$defaultValue;
|
|
41
|
+
function VText(_ref) {
|
|
42
|
+
var _props$defaultValue, _props$defaultValue2, _props$defaultValue3;
|
|
43
43
|
var _ref$vState = _ref.vState,
|
|
44
44
|
vState = _ref$vState === void 0 ? false : _ref$vState,
|
|
45
|
+
_ref$vType = _ref.vType,
|
|
46
|
+
vType = _ref$vType === void 0 ? 'outer' : _ref$vType,
|
|
45
47
|
_ref$vClassName = _ref.vClassName,
|
|
46
48
|
vClassName = _ref$vClassName === void 0 ? '' : _ref$vClassName,
|
|
47
49
|
_ref$vShowMessage = _ref.vShowMessage,
|
|
48
50
|
vShowMessage = _ref$vShowMessage === void 0 ? false : _ref$vShowMessage,
|
|
49
51
|
_ref$vMessage = _ref.vMessage,
|
|
50
52
|
vMessage = _ref$vMessage === void 0 ? '' : _ref$vMessage,
|
|
51
|
-
_ref$vIsInnerMessage = _ref.vIsInnerMessage,
|
|
52
|
-
vIsInnerMessage = _ref$vIsInnerMessage === void 0 ? false : _ref$vIsInnerMessage,
|
|
53
53
|
_ref$vLocateMessage = _ref.vLocateMessage,
|
|
54
54
|
vLocateMessage = _ref$vLocateMessage === void 0 ? 'bottom' : _ref$vLocateMessage,
|
|
55
55
|
_ref$vMessageClass = _ref.vMessageClass,
|
|
@@ -58,67 +58,93 @@ var VText = function VText(_ref) {
|
|
|
58
58
|
vIsAnimate = _ref$vIsAnimate === void 0 ? false : _ref$vIsAnimate,
|
|
59
59
|
_ref$props = _ref.props,
|
|
60
60
|
props = _ref$props === void 0 ? {} : _ref$props;
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
};
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
61
|
+
switch (vType) {
|
|
62
|
+
case 'outer':
|
|
63
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
64
|
+
className: styles.vinput + " " + styles["vinput-" + vLocateMessage]
|
|
65
|
+
}, /*#__PURE__*/React.createElement("input", Object.assign({
|
|
66
|
+
type: "text"
|
|
67
|
+
}, props, {
|
|
68
|
+
defaultValue: (_props$defaultValue = props == null ? void 0 : props.defaultValue) != null ? _props$defaultValue : '',
|
|
69
|
+
className: (props == null ? void 0 : props.className) + " " + (vState ? vClassName || styles.invalid : '')
|
|
70
|
+
})), vState && vShowMessage ? ( /*#__PURE__*/React.createElement("p", {
|
|
71
|
+
className: vMessageClass + " " + (vIsAnimate ? styles.animateMessage : '')
|
|
72
|
+
}, vMessage)) : null);
|
|
73
|
+
case 'inner':
|
|
74
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
75
|
+
className: styles.vinput
|
|
76
|
+
}, /*#__PURE__*/React.createElement("input", Object.assign({
|
|
77
|
+
type: "text"
|
|
78
|
+
}, props, {
|
|
79
|
+
defaultValue: (_props$defaultValue2 = props == null ? void 0 : props.defaultValue) != null ? _props$defaultValue2 : '',
|
|
80
|
+
className: (props == null ? void 0 : props.className) + " " + (vState ? vClassName || styles.invalid : '')
|
|
81
|
+
})), vState && vShowMessage ? ( /*#__PURE__*/React.createElement("p", {
|
|
82
|
+
className: vMessageClass + " " + styles.innerMessage + " " + styles["innerMessage-" + vLocateMessage] + " " + (vIsAnimate ? styles.animateMessage : '')
|
|
83
|
+
}, vMessage)) : null);
|
|
84
|
+
case 'tooltip':
|
|
85
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
86
|
+
className: styles.vinput + " " + styles["tooltipMessage-" + vLocateMessage]
|
|
87
|
+
}, /*#__PURE__*/React.createElement("input", Object.assign({
|
|
88
|
+
type: "text"
|
|
89
|
+
}, props, {
|
|
90
|
+
defaultValue: (_props$defaultValue3 = props == null ? void 0 : props.defaultValue) != null ? _props$defaultValue3 : '',
|
|
91
|
+
className: (props == null ? void 0 : props.className) + " " + (vState ? vClassName || styles.invalid : '')
|
|
92
|
+
})), vState && vShowMessage ? ( /*#__PURE__*/React.createElement("p", {
|
|
93
|
+
className: vMessageClass + " " + styles.tooltipMessage + " " + styles["tooltipMessage-" + vLocateMessage] + " " + (vIsAnimate ? styles.animateMessage : '')
|
|
94
|
+
}, vMessage)) : null);
|
|
95
|
+
default:
|
|
96
|
+
return /*#__PURE__*/React.createElement("div", null);
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
function VCheckbox() {
|
|
101
|
+
return /*#__PURE__*/React.createElement("input", {
|
|
76
102
|
type: "checkbox"
|
|
77
103
|
});
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
return React.createElement("input", {
|
|
82
|
-
type: "
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
function vColor() {
|
|
107
|
+
return /*#__PURE__*/React.createElement("input", {
|
|
108
|
+
type: "color"
|
|
83
109
|
});
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
return React.createElement("input", {
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
function vDate() {
|
|
113
|
+
return /*#__PURE__*/React.createElement("input", {
|
|
88
114
|
type: "date"
|
|
89
115
|
});
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
return React.createElement("input", {
|
|
94
|
-
type: "color"
|
|
95
|
-
});
|
|
96
|
-
};
|
|
97
|
-
// Email
|
|
98
|
-
var VEmail = function VEmail() {
|
|
99
|
-
return React.createElement("input", {
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
function vEmail() {
|
|
119
|
+
return /*#__PURE__*/React.createElement("input", {
|
|
100
120
|
type: "email"
|
|
101
121
|
});
|
|
102
|
-
}
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
return React.createElement("input", {
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
function vRadio() {
|
|
125
|
+
return /*#__PURE__*/React.createElement("input", {
|
|
126
|
+
type: "radio"
|
|
127
|
+
});
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
function vRange() {
|
|
131
|
+
return /*#__PURE__*/React.createElement("input", {
|
|
106
132
|
type: "range"
|
|
107
133
|
});
|
|
108
|
-
}
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
return React.createElement("input", {
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
function vURL() {
|
|
137
|
+
return /*#__PURE__*/React.createElement("input", {
|
|
112
138
|
type: "url"
|
|
113
139
|
});
|
|
114
|
-
}
|
|
140
|
+
}
|
|
115
141
|
|
|
116
142
|
exports.VCheckbox = VCheckbox;
|
|
117
|
-
exports.VColor = VColor;
|
|
118
|
-
exports.VDate = VDate;
|
|
119
|
-
exports.VEmail = VEmail;
|
|
120
|
-
exports.VRadio = VRadio;
|
|
121
|
-
exports.VRange = VRange;
|
|
122
143
|
exports.VText = VText;
|
|
123
|
-
exports.
|
|
144
|
+
exports.vColor = vColor;
|
|
145
|
+
exports.vDate = vDate;
|
|
146
|
+
exports.vEmail = vEmail;
|
|
147
|
+
exports.vRadio = vRadio;
|
|
148
|
+
exports.vRange = vRange;
|
|
149
|
+
exports.vURL = vURL;
|
|
124
150
|
//# sourceMappingURL=react-validate-component.cjs.development.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"react-validate-component.cjs.development.js","sources":["../node_modules/style-inject/dist/style-inject.es.js","../src/index.tsx"],"sourcesContent":["function styleInject(css, ref) {\n if ( ref === void 0 ) ref = {};\n var insertAt = ref.insertAt;\n\n if (!css || typeof document === 'undefined') { return; }\n\n var head = document.head || document.getElementsByTagName('head')[0];\n var style = document.createElement('style');\n style.type = 'text/css';\n\n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild);\n } else {\n head.appendChild(style);\n }\n } else {\n head.appendChild(style);\n }\n\n if (style.styleSheet) {\n style.styleSheet.cssText = css;\n } else {\n style.appendChild(document.createTextNode(css));\n }\n}\n\nexport default styleInject;\n","import React from 'react';\nimport styles from './index.module.css';\nimport { VTEXT_PARAMS } from './
|
|
1
|
+
{"version":3,"file":"react-validate-component.cjs.development.js","sources":["../node_modules/style-inject/dist/style-inject.es.js","../src/vText/index.tsx","../src/vCheckbox/index.tsx","../src/vColor/index.tsx","../src/vDate/index.tsx","../src/vEmail/index.tsx","../src/vRadio/index.tsx","../src/vRange/index.tsx","../src/vURL/index.tsx"],"sourcesContent":["function styleInject(css, ref) {\n if ( ref === void 0 ) ref = {};\n var insertAt = ref.insertAt;\n\n if (!css || typeof document === 'undefined') { return; }\n\n var head = document.head || document.getElementsByTagName('head')[0];\n var style = document.createElement('style');\n style.type = 'text/css';\n\n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild);\n } else {\n head.appendChild(style);\n }\n } else {\n head.appendChild(style);\n }\n\n if (style.styleSheet) {\n style.styleSheet.cssText = css;\n } else {\n style.appendChild(document.createTextNode(css));\n }\n}\n\nexport default styleInject;\n","import React from 'react';\nimport styles from './index.module.css';\nimport { VTEXT_PARAMS } from './vText';\n\n// Text\nexport function VText({\n vState = false,\n vType = 'outer',\n vClassName = '',\n vShowMessage = false,\n vMessage = '',\n vLocateMessage = 'bottom',\n vMessageClass = '',\n vIsAnimate = false,\n props = {},\n}: VTEXT_PARAMS) {\n switch (vType) {\n case 'outer':\n return (\n <div\n className={`${styles.vinput} ${styles[`vinput-${vLocateMessage}`]}`}\n >\n <input\n type=\"text\"\n {...props}\n defaultValue={props?.defaultValue ?? ''}\n className={`${props?.className} ${\n vState ? vClassName || styles.invalid : ''\n }`}\n ></input>\n {vState && vShowMessage ? (\n <p\n className={`${vMessageClass} ${\n vIsAnimate ? styles.animateMessage : ''\n }`}\n >\n {vMessage}\n </p>\n ) : null}\n </div>\n );\n case 'inner':\n return (\n <div className={styles.vinput}>\n <input\n type=\"text\"\n {...props}\n defaultValue={props?.defaultValue ?? ''}\n className={`${props?.className} ${\n vState ? vClassName || styles.invalid : ''\n }`}\n ></input>\n {vState && vShowMessage ? (\n <p\n className={`${vMessageClass} ${styles.innerMessage} ${\n styles[`innerMessage-${vLocateMessage}`]\n } ${vIsAnimate ? styles.animateMessage : ''}`}\n >\n {vMessage}\n </p>\n ) : null}\n </div>\n );\n case 'tooltip':\n return (\n <div\n className={`${styles.vinput} ${\n styles[`tooltipMessage-${vLocateMessage}`]\n }`}\n >\n <input\n type=\"text\"\n {...props}\n defaultValue={props?.defaultValue ?? ''}\n className={`${props?.className} ${\n vState ? vClassName || styles.invalid : ''\n }`}\n ></input>\n {vState && vShowMessage ? (\n <p\n className={`${vMessageClass} ${styles.tooltipMessage} ${\n styles[`tooltipMessage-${vLocateMessage}`]\n } ${vIsAnimate ? styles.animateMessage : ''}`}\n >\n {vMessage}\n </p>\n ) : null}\n </div>\n );\n default:\n return <div></div>;\n }\n}\n","import React from 'react';\r\n\r\nexport function VCheckbox() {\r\n return <input type=\"checkbox\" />;\r\n}\r\n","import React from 'react';\r\n\r\nexport function vColor() {\r\n return <input type=\"color\" />;\r\n}\r\n","import React from 'react';\r\n\r\nexport function vDate() {\r\n return <input type=\"date\" />;\r\n}\r\n","import React from 'react';\r\n\r\nexport function vEmail() {\r\n return <input type=\"email\" />;\r\n}\r\n","import React from 'react';\r\n\r\nexport function vRadio() {\r\n return <input type=\"radio\" />;\r\n}\r\n","import React from 'react';\r\n\r\nexport function vRange() {\r\n return <input type=\"range\" />;\r\n}\r\n","import React from 'react';\r\n\r\nexport function vURL() {\r\n return <input type=\"url\" />;\r\n}\r\n"],"names":["VText","_ref","vState","_ref$vState","_ref$vType","vType","_ref$vClassName","vClassName","_ref$vShowMessage","vShowMessage","_ref$vMessage","vMessage","_ref$vLocateMessage","vLocateMessage","_ref$vMessageClass","vMessageClass","_ref$vIsAnimate","vIsAnimate","_ref$props","props","React","className","styles","vinput","type","defaultValue","_props$defaultValue","invalid","animateMessage","_props$defaultValue2","innerMessage","_props$defaultValue3","tooltipMessage","VCheckbox","vColor","vDate","vEmail","vRadio","vRange","vURL"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,n=(e=require("react"))&&"object"==typeof e&&"default"in e?e.default:e,t={invalid:"index-module_invalid__gHKsE",vinput:"index-module_vinput__tFGFH","vinput-top-left":"index-module_vinput-top-left__2g8Bq","vinput-top":"index-module_vinput-top__ZTh6H","vinput-top-right":"index-module_vinput-top-right__t6K-Q","vinput-center-left":"index-module_vinput-center-left__vJn0s","vinput-center-right":"index-module_vinput-center-right__HDgip","vinput-bottom-left":"index-module_vinput-bottom-left__xxaiT","vinput-bottom":"index-module_vinput-bottom__nCOAf","vinput-bottom-right":"index-module_vinput-bottom-right__6AjOE",innerMessage:"index-module_innerMessage__rihga","innerMessage-top-left":"index-module_innerMessage-top-left__HLoYg","innerMessage-top":"index-module_innerMessage-top__ouYW6","innerMessage-top-right":"index-module_innerMessage-top-right__7tMC8","innerMessage-center-left":"index-module_innerMessage-center-left__4iZyl","innerMessage-center":"index-module_innerMessage-center__U2006","innerMessage-center-right":"index-module_innerMessage-center-right__Pg2oU","innerMessage-bottom-left":"index-module_innerMessage-bottom-left__1QDIv","innerMessage-bottom":"index-module_innerMessage-bottom__gMogT","innerMessage-bottom-right":"index-module_innerMessage-bottom-right__peBq-",animateMessage:"index-module_animateMessage__Gxf3M","fade-in":"index-module_fade-in__GxKz8"};!function(e,n){void 0===n&&(n={});var t=n.insertAt;if("undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===t&&i.firstChild?i.insertBefore(r,i.firstChild):i.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}}(".index-module_invalid__gHKsE {\r\n border: 2px solid red;\r\n}\r\n\r\n/* 유효성 메시지 locate */\r\n.index-module_vinput__tFGFH {\r\n display: flex;\r\n}\r\n.index-module_vinput-top-left__2g8Bq {\r\n flex-direction: column-reverse;\r\n align-items: flex-start;\r\n justify-content: center;\r\n}\r\n.index-module_vinput-top__ZTh6H {\r\n flex-direction: column-reverse;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n.index-module_vinput-top-right__t6K-Q {\r\n flex-direction: column-reverse;\r\n align-items: flex-end;\r\n justify-content: center;\r\n}\r\n.index-module_vinput-center-left__vJn0s {\r\n flex-direction: row-reverse;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n.index-module_vinput-center-right__HDgip {\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n.index-module_vinput-bottom-left__xxaiT {\r\n flex-direction: column;\r\n align-items: flex-start;\r\n justify-content: center;\r\n}\r\n.index-module_vinput-bottom__nCOAf {\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n.index-module_vinput-bottom-right__6AjOE {\r\n flex-direction: column;\r\n align-items: flex-end;\r\n justify-content: center;\r\n}\r\n.index-module_innerMessage__rihga {\r\n position: absolute;\r\n font-size: 12px;\r\n margin: 0;\r\n padding: 2px 5px;\r\n display: flex;\r\n}\r\n.index-module_innerMessage-top-left__HLoYg {\r\n align-items: flex-start;\r\n justify-content: flex-start;\r\n}\r\n.index-module_innerMessage-top__ouYW6 {\r\n align-items: flex-start;\r\n justify-content: center;\r\n}\r\n.index-module_innerMessage-top-right__7tMC8 {\r\n align-items: flex-start;\r\n justify-content: flex-end;\r\n}\r\n.index-module_innerMessage-center-left__4iZyl {\r\n align-items: center;\r\n justify-content: flex-start;\r\n}\r\n.index-module_innerMessage-center__U2006 {\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n.index-module_innerMessage-center-right__Pg2oU {\r\n align-items: center;\r\n justify-content: flex-end;\r\n}\r\n.index-module_innerMessage-bottom-left__1QDIv {\r\n align-items: flex-end;\r\n justify-content: flex-start;\r\n}\r\n.index-module_innerMessage-bottom__gMogT {\r\n align-items: flex-end;\r\n justify-content: center;\r\n}\r\n.index-module_innerMessage-bottom-right__peBq- {\r\n align-items: flex-end;\r\n justify-content: flex-end;\r\n}\r\n\r\n.index-module_animateMessage__Gxf3M {\r\n animation: index-module_fade-in__GxKz8 1s ease-in-out;\r\n}\r\n\r\n@keyframes index-module_fade-in__GxKz8 {\r\n 0% {\r\n opacity: 0;\r\n }\r\n 100% {\r\n opacity: 1;\r\n }\r\n}\r\n"),exports.VCheckbox=function(){return n.createElement("input",{type:"checkbox"})},exports.VColor=function(){return n.createElement("input",{type:"color"})},exports.VDate=function(){return n.createElement("input",{type:"date"})},exports.VEmail=function(){return n.createElement("input",{type:"email"})},exports.VRadio=function(){return n.createElement("input",{type:"radio"})},exports.VRange=function(){return n.createElement("input",{type:"range"})},exports.VText=function(e){var i,r=e.vState,o=void 0!==r&&r,s=e.vClassName,l=e.vShowMessage,d=void 0!==l&&l,a=e.vMessage,u=void 0===a?"":a,_=e.vIsInnerMessage,m=void 0!==_&&_,c=e.vLocateMessage,g=void 0===c?"bottom":c,x=e.vMessageClass,p=void 0===x?"":x,f=e.vIsAnimate,v=void 0!==f&&f,M=e.props,y=void 0===M?{}:M;return n.createElement("div",{className:t.vinput+" "+t["vinput-"+g]},n.createElement("input",Object.assign({type:"text"},y,{defaultValue:null!=(i=null==y?void 0:y.defaultValue)?i:"",className:(null==y?void 0:y.className)+" "+(o?(void 0===s?"":s)||t.invalid:"")})),o&&d?n.createElement("p",{className:p+" "+(m?(null==y?void 0:y.className)+" "+t.innerMessage+" "+t["innerMessage-"+g]:"")+" "+(v?t.animateMessage:"")},u):null)},exports.VUrl=function(){return n.createElement("input",{type:"url"})};
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,n=(e=require("react"))&&"object"==typeof e&&"default"in e?e.default:e,t={invalid:"index-module_invalid__iPosr",vinput:"index-module_vinput__Xz53v","vinput-top-left":"index-module_vinput-top-left__UFNRe","vinput-top":"index-module_vinput-top__Gor3M","vinput-top-right":"index-module_vinput-top-right__wexyT","vinput-center-left":"index-module_vinput-center-left__oTbXC","vinput-center-right":"index-module_vinput-center-right__wz--8","vinput-bottom-left":"index-module_vinput-bottom-left__9gm8q","vinput-bottom":"index-module_vinput-bottom__bxp6x","vinput-bottom-right":"index-module_vinput-bottom-right__ihiB0",innerMessage:"index-module_innerMessage__cnS6N","innerMessage-top-left":"index-module_innerMessage-top-left__3804h","innerMessage-top":"index-module_innerMessage-top__MRmrS","innerMessage-top-right":"index-module_innerMessage-top-right__4ejsZ","innerMessage-center-left":"index-module_innerMessage-center-left__t2SwR","innerMessage-center":"index-module_innerMessage-center__gT4X6","innerMessage-center-right":"index-module_innerMessage-center-right__FzHy2","innerMessage-bottom-left":"index-module_innerMessage-bottom-left__gI2z5","innerMessage-bottom":"index-module_innerMessage-bottom__Zb48i","innerMessage-bottom-right":"index-module_innerMessage-bottom-right__OlaLD",tooltipMessage:"index-module_tooltipMessage__BG3C0","tooltipMessage-top-left":"index-module_tooltipMessage-top-left__EExDe","tooltipMessage-top":"index-module_tooltipMessage-top__L7c5-","tooltipMessage-top-right":"index-module_tooltipMessage-top-right__iVHO9","tooltipMessage-center-right":"index-module_tooltipMessage-center-right__nL7jv","tooltipMessage-center-left":"index-module_tooltipMessage-center-left__C2dwc","tooltipMessage-bottom-left":"index-module_tooltipMessage-bottom-left__G4dRB","tooltipMessage-bottom":"index-module_tooltipMessage-bottom__O5fIQ","tooltipMessage-bottom-right":"index-module_tooltipMessage-bottom-right__ACA9z",animateMessage:"index-module_animateMessage__2Xq3T","fade-in":"index-module_fade-in__Xcu-Q"};!function(e,n){void 0===n&&(n={});var t=n.insertAt;if("undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===t&&r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}(".index-module_invalid__iPosr {\r\n border: 2px solid red;\r\n outline: none;\r\n}\r\n.index-module_invalid__iPosr:focus,\r\n.index-module_invalid__iPosr:focus-visible,\r\n.index-module_invalid__iPosr:focus-within {\r\n border: 2px solid red;\r\n}\r\n\r\n/* vType === 'outer' */\r\n.index-module_vinput__Xz53v {\r\n display: flex;\r\n}\r\n.index-module_vinput-top-left__UFNRe {\r\n flex-direction: column-reverse;\r\n align-items: flex-start;\r\n justify-content: center;\r\n}\r\n.index-module_vinput-top__Gor3M {\r\n flex-direction: column-reverse;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n.index-module_vinput-top-right__wexyT {\r\n flex-direction: column-reverse;\r\n align-items: flex-end;\r\n justify-content: center;\r\n}\r\n.index-module_vinput-center-left__oTbXC {\r\n flex-direction: row-reverse;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n.index-module_vinput-center-right__wz--8 {\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n.index-module_vinput-bottom-left__9gm8q {\r\n flex-direction: column;\r\n align-items: flex-start;\r\n justify-content: center;\r\n}\r\n.index-module_vinput-bottom__bxp6x {\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n.index-module_vinput-bottom-right__ihiB0 {\r\n flex-direction: column;\r\n align-items: flex-end;\r\n justify-content: center;\r\n}\r\n\r\n/* vType === 'inner' */\r\n.index-module_innerMessage__cnS6N {\r\n position: absolute;\r\n font-size: 12px;\r\n margin: 0;\r\n padding: 2px 5px;\r\n display: flex;\r\n}\r\n.index-module_innerMessage-top-left__3804h {\r\n align-items: flex-start;\r\n justify-content: flex-start;\r\n}\r\n.index-module_innerMessage-top__MRmrS {\r\n align-items: flex-start;\r\n justify-content: center;\r\n}\r\n.index-module_innerMessage-top-right__4ejsZ {\r\n align-items: flex-start;\r\n justify-content: flex-end;\r\n}\r\n.index-module_innerMessage-center-left__t2SwR {\r\n align-items: center;\r\n justify-content: flex-start;\r\n}\r\n.index-module_innerMessage-center__gT4X6 {\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n.index-module_innerMessage-center-right__FzHy2 {\r\n align-items: center;\r\n justify-content: flex-end;\r\n}\r\n.index-module_innerMessage-bottom-left__gI2z5 {\r\n align-items: flex-end;\r\n justify-content: flex-start;\r\n}\r\n.index-module_innerMessage-bottom__Zb48i {\r\n align-items: flex-end;\r\n justify-content: center;\r\n}\r\n.index-module_innerMessage-bottom-right__OlaLD {\r\n align-items: flex-end;\r\n justify-content: flex-end;\r\n}\r\n\r\n/* vType === 'tooltip' */\r\n.index-module_tooltipMessage__BG3C0 {\r\n position: absolute;\r\n margin: 0;\r\n padding: 10px 20px;\r\n border: 1px solid transparent;\r\n border-radius: 10px;\r\n background-color: black;\r\n}\r\np[class*='tooltipMessage-top'] {\r\n transform: translateY(calc(-100% - 10px));\r\n}\r\np[class*='tooltipMessage-top']::after {\r\n content: '';\r\n position: absolute;\r\n bottom: 0;\r\n border: 10px solid transparent;\r\n border-top-color: black;\r\n border-bottom: 0;\r\n margin-bottom: -11px;\r\n}\r\n.index-module_vinput__Xz53v.index-module_tooltipMessage-top-left__EExDe {\r\n justify-content: flex-start;\r\n}\r\np.index-module_tooltipMessage-top-left__EExDe::after {\r\n left: 3%;\r\n}\r\n.index-module_vinput__Xz53v.index-module_tooltipMessage-top__L7c5- {\r\n justify-content: center;\r\n}\r\np.index-module_tooltipMessage-top__L7c5-::after {\r\n left: 44%;\r\n}\r\n.index-module_tooltipMessage-top-right__iVHO9 {\r\n justify-content: flex-end;\r\n}\r\np.index-module_tooltipMessage-top-right__iVHO9::after {\r\n left: 87%;\r\n}\r\np[class*='tooltipMessage-center'] {\r\n /* transform: translateY(calc(-100% - 10px)); */\r\n}\r\np[class*='tooltipMessage-center']::after {\r\n content: '';\r\n position: absolute;\r\n border: 10px solid transparent;\r\n}\r\n.index-module_vinput__Xz53v.index-module_tooltipMessage-center-right__nL7jv {\r\n justify-content: flex-end;\r\n}\r\np.index-module_tooltipMessage-center-right__nL7jv {\r\n transform: translateX(calc(100% + 10px));\r\n}\r\np.index-module_tooltipMessage-center-right__nL7jv::after {\r\n border-right-color: black;\r\n left: -10%;\r\n}\r\n.index-module_vinput__Xz53v.index-module_tooltipMessage-center-left__C2dwc {\r\n justify-content: flex-start;\r\n}\r\np.index-module_tooltipMessage-center-left__C2dwc {\r\n transform: translateX(calc(-100% - 10px));\r\n}\r\np.index-module_tooltipMessage-center-left__C2dwc::after {\r\n border-left-color: black;\r\n left: 100%;\r\n}\r\n\r\np[class*='tooltipMessage-bottom'] {\r\n transform: translateY(calc(120% + 10px));\r\n}\r\np[class*='tooltipMessage-bottom']::after {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n border: 10px solid transparent;\r\n border-bottom-color: black;\r\n border-top: 0;\r\n margin-top: -11px;\r\n}\r\n.index-module_vinput__Xz53v.index-module_tooltipMessage-bottom-left__G4dRB {\r\n justify-content: flex-start;\r\n}\r\np.index-module_tooltipMessage-bottom-left__G4dRB::after {\r\n left: 3%;\r\n}\r\n.index-module_vinput__Xz53v.index-module_tooltipMessage-bottom__O5fIQ {\r\n justify-content: center;\r\n}\r\np.index-module_tooltipMessage-bottom__O5fIQ::after {\r\n left: 44%;\r\n}\r\n.index-module_tooltipMessage-bottom-right__ACA9z {\r\n justify-content: flex-end;\r\n}\r\np.index-module_tooltipMessage-bottom-right__ACA9z::after {\r\n left: 87%;\r\n}\r\n\r\n.index-module_animateMessage__2Xq3T {\r\n animation: index-module_fade-in__Xcu-Q 1s ease-in-out;\r\n}\r\n\r\n@keyframes index-module_fade-in__Xcu-Q {\r\n 0% {\r\n opacity: 0;\r\n }\r\n 100% {\r\n opacity: 1;\r\n }\r\n}\r\n"),exports.VCheckbox=function(){return n.createElement("input",{type:"checkbox"})},exports.VText=function(e){var r,o,i,l=e.vState,s=void 0!==l&&l,a=e.vType,d=e.vClassName,_=void 0===d?"":d,u=e.vShowMessage,p=void 0!==u&&u,m=e.vMessage,c=void 0===m?"":m,x=e.vLocateMessage,g=void 0===x?"bottom":x,f=e.vMessageClass,v=void 0===f?"":f,M=e.vIsAnimate,b=void 0!==M&&M,y=e.props,h=void 0===y?{}:y;switch(void 0===a?"outer":a){case"outer":return n.createElement("div",{className:t.vinput+" "+t["vinput-"+g]},n.createElement("input",Object.assign({type:"text"},h,{defaultValue:null!=(r=null==h?void 0:h.defaultValue)?r:"",className:(null==h?void 0:h.className)+" "+(s?_||t.invalid:"")})),s&&p?n.createElement("p",{className:v+" "+(b?t.animateMessage:"")},c):null);case"inner":return n.createElement("div",{className:t.vinput},n.createElement("input",Object.assign({type:"text"},h,{defaultValue:null!=(o=null==h?void 0:h.defaultValue)?o:"",className:(null==h?void 0:h.className)+" "+(s?_||t.invalid:"")})),s&&p?n.createElement("p",{className:v+" "+t.innerMessage+" "+t["innerMessage-"+g]+" "+(b?t.animateMessage:"")},c):null);case"tooltip":return n.createElement("div",{className:t.vinput+" "+t["tooltipMessage-"+g]},n.createElement("input",Object.assign({type:"text"},h,{defaultValue:null!=(i=null==h?void 0:h.defaultValue)?i:"",className:(null==h?void 0:h.className)+" "+(s?_||t.invalid:"")})),s&&p?n.createElement("p",{className:v+" "+t.tooltipMessage+" "+t["tooltipMessage-"+g]+" "+(b?t.animateMessage:"")},c):null);default:return n.createElement("div",null)}},exports.vColor=function(){return n.createElement("input",{type:"color"})},exports.vDate=function(){return n.createElement("input",{type:"date"})},exports.vEmail=function(){return n.createElement("input",{type:"email"})},exports.vRadio=function(){return n.createElement("input",{type:"radio"})},exports.vRange=function(){return n.createElement("input",{type:"range"})},exports.vURL=function(){return n.createElement("input",{type:"url"})};
|
|
2
2
|
//# sourceMappingURL=react-validate-component.cjs.production.min.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"react-validate-component.cjs.production.min.js","sources":["../node_modules/style-inject/dist/style-inject.es.js","../src/index.tsx"],"sourcesContent":["function styleInject(css, ref) {\n if ( ref === void 0 ) ref = {};\n var insertAt = ref.insertAt;\n\n if (!css || typeof document === 'undefined') { return; }\n\n var head = document.head || document.getElementsByTagName('head')[0];\n var style = document.createElement('style');\n style.type = 'text/css';\n\n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild);\n } else {\n head.appendChild(style);\n }\n } else {\n head.appendChild(style);\n }\n\n if (style.styleSheet) {\n style.styleSheet.cssText = css;\n } else {\n style.appendChild(document.createTextNode(css));\n }\n}\n\nexport default styleInject;\n","import React from 'react';\nimport styles from './index.module.css';\nimport { VTEXT_PARAMS } from './
|
|
1
|
+
{"version":3,"file":"react-validate-component.cjs.production.min.js","sources":["../node_modules/style-inject/dist/style-inject.es.js","../src/vCheckbox/index.tsx","../src/vText/index.tsx","../src/vColor/index.tsx","../src/vDate/index.tsx","../src/vEmail/index.tsx","../src/vRadio/index.tsx","../src/vRange/index.tsx","../src/vURL/index.tsx"],"sourcesContent":["function styleInject(css, ref) {\n if ( ref === void 0 ) ref = {};\n var insertAt = ref.insertAt;\n\n if (!css || typeof document === 'undefined') { return; }\n\n var head = document.head || document.getElementsByTagName('head')[0];\n var style = document.createElement('style');\n style.type = 'text/css';\n\n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild);\n } else {\n head.appendChild(style);\n }\n } else {\n head.appendChild(style);\n }\n\n if (style.styleSheet) {\n style.styleSheet.cssText = css;\n } else {\n style.appendChild(document.createTextNode(css));\n }\n}\n\nexport default styleInject;\n","import React from 'react';\r\n\r\nexport function VCheckbox() {\r\n return <input type=\"checkbox\" />;\r\n}\r\n","import React from 'react';\nimport styles from './index.module.css';\nimport { VTEXT_PARAMS } from './vText';\n\n// Text\nexport function VText({\n vState = false,\n vType = 'outer',\n vClassName = '',\n vShowMessage = false,\n vMessage = '',\n vLocateMessage = 'bottom',\n vMessageClass = '',\n vIsAnimate = false,\n props = {},\n}: VTEXT_PARAMS) {\n switch (vType) {\n case 'outer':\n return (\n <div\n className={`${styles.vinput} ${styles[`vinput-${vLocateMessage}`]}`}\n >\n <input\n type=\"text\"\n {...props}\n defaultValue={props?.defaultValue ?? ''}\n className={`${props?.className} ${\n vState ? vClassName || styles.invalid : ''\n }`}\n ></input>\n {vState && vShowMessage ? (\n <p\n className={`${vMessageClass} ${\n vIsAnimate ? styles.animateMessage : ''\n }`}\n >\n {vMessage}\n </p>\n ) : null}\n </div>\n );\n case 'inner':\n return (\n <div className={styles.vinput}>\n <input\n type=\"text\"\n {...props}\n defaultValue={props?.defaultValue ?? ''}\n className={`${props?.className} ${\n vState ? vClassName || styles.invalid : ''\n }`}\n ></input>\n {vState && vShowMessage ? (\n <p\n className={`${vMessageClass} ${styles.innerMessage} ${\n styles[`innerMessage-${vLocateMessage}`]\n } ${vIsAnimate ? styles.animateMessage : ''}`}\n >\n {vMessage}\n </p>\n ) : null}\n </div>\n );\n case 'tooltip':\n return (\n <div\n className={`${styles.vinput} ${\n styles[`tooltipMessage-${vLocateMessage}`]\n }`}\n >\n <input\n type=\"text\"\n {...props}\n defaultValue={props?.defaultValue ?? ''}\n className={`${props?.className} ${\n vState ? vClassName || styles.invalid : ''\n }`}\n ></input>\n {vState && vShowMessage ? (\n <p\n className={`${vMessageClass} ${styles.tooltipMessage} ${\n styles[`tooltipMessage-${vLocateMessage}`]\n } ${vIsAnimate ? styles.animateMessage : ''}`}\n >\n {vMessage}\n </p>\n ) : null}\n </div>\n );\n default:\n return <div></div>;\n }\n}\n","import React from 'react';\r\n\r\nexport function vColor() {\r\n return <input type=\"color\" />;\r\n}\r\n","import React from 'react';\r\n\r\nexport function vDate() {\r\n return <input type=\"date\" />;\r\n}\r\n","import React from 'react';\r\n\r\nexport function vEmail() {\r\n return <input type=\"email\" />;\r\n}\r\n","import React from 'react';\r\n\r\nexport function vRadio() {\r\n return <input type=\"radio\" />;\r\n}\r\n","import React from 'react';\r\n\r\nexport function vRange() {\r\n return <input type=\"range\" />;\r\n}\r\n","import React from 'react';\r\n\r\nexport function vURL() {\r\n return <input type=\"url\" />;\r\n}\r\n"],"names":["css","ref","insertAt","document","head","getElementsByTagName","style","createElement","type","firstChild","insertBefore","appendChild","styleSheet","cssText","createTextNode","React","_ref","vState","_ref$vState","_ref$vType","vType","_ref$vClassName","vClassName","_ref$vShowMessage","vShowMessage","_ref$vMessage","vMessage","_ref$vLocateMessage","vLocateMessage","_ref$vMessageClass","vMessageClass","_ref$vIsAnimate","vIsAnimate","_ref$props","props","className","styles","vinput","defaultValue","_props$defaultValue","invalid","animateMessage","_props$defaultValue2","innerMessage","_props$defaultValue3","tooltipMessage"],"mappings":"+iEAAA,SAAqBA,EAAKC,QACX,IAARA,IAAiBA,EAAM,IAC5B,IAAIC,EAAWD,EAAIC,SAEnB,GAAgC,oBAAbC,SAAnB,CAEA,IAAIC,EAAOD,SAASC,MAAQD,SAASE,qBAAqB,QAAQ,GAC9DC,EAAQH,SAASI,cAAc,SACnCD,EAAME,KAAO,WAEI,QAAbN,GACEE,EAAKK,WACPL,EAAKM,aAAaJ,EAAOF,EAAKK,YAKhCL,EAAKO,YAAYL,GAGfA,EAAMM,WACRN,EAAMM,WAAWC,QAAUb,EAE3BM,EAAMK,YAAYR,SAASW,eAAed,kpLCpB5C,OAAOe,yBAAOP,KAAK,qCCEAQ,iBACnBC,OAAAA,WAAMC,GAAQA,EAAAC,EAAAH,EACdI,MAAeC,EAAAL,EACfM,WAAAA,WAAUD,EAAG,GAAEA,EAAAE,EAAAP,EACfQ,aAAAA,WAAYD,GAAQA,EAAAE,EAAAT,EACpBU,SAAAA,WAAQD,EAAG,GAAEA,EAAAE,EAAAX,EACbY,eAAAA,WAAcD,EAAG,SAAQA,EAAAE,EAAAb,EACzBc,cAAAA,WAAaD,EAAG,GAAEA,EAAAE,EAAAf,EAClBgB,WAAAA,WAAUD,GAAQA,EAAAE,EAAAjB,EAClBkB,MAAAA,WAAKD,EAAG,GAAEA,EAEV,gBATKd,EAAG,QAAOA,GAUb,IAAK,QACH,OACEJ,uBACEoB,UAAcC,EAAOC,WAAUD,YAAiBR,IAEhDb,uCACEP,KAAK,QACD0B,GACJI,oBAAYC,QAAEL,SAAAA,EAAOI,cAAYC,EAAI,GACrCJ,iBAAcD,SAAAA,EAAOC,gBACnBlB,EAASK,GAAcc,EAAOI,QAAU,OAG3CvB,GAAUO,EACTT,qBACEoB,UAAcL,OACZE,EAAaI,EAAOK,eAAiB,KAGtCf,GAED,MAGV,IAAK,QACH,OACEX,uBAAKoB,UAAWC,EAAOC,QACrBtB,uCACEP,KAAK,QACD0B,GACJI,oBAAYI,QAAER,SAAAA,EAAOI,cAAYI,EAAI,GACrCP,iBAAcD,SAAAA,EAAOC,gBACnBlB,EAASK,GAAcc,EAAOI,QAAU,OAG3CvB,GAAUO,EACTT,qBACEoB,UAAcL,MAAiBM,EAAOO,iBACpCP,kBAAuBR,QACrBI,EAAaI,EAAOK,eAAiB,KAExCf,GAED,MAGV,IAAK,UACH,OACEX,uBACEoB,UAAcC,EAAOC,WACnBD,oBAAyBR,IAG3Bb,uCACEP,KAAK,QACD0B,GACJI,oBAAYM,QAAEV,SAAAA,EAAOI,cAAYM,EAAI,GACrCT,iBAAcD,SAAAA,EAAOC,gBACnBlB,EAASK,GAAcc,EAAOI,QAAU,OAG3CvB,GAAUO,EACTT,qBACEoB,UAAcL,MAAiBM,EAAOS,mBACpCT,oBAAyBR,QACvBI,EAAaI,EAAOK,eAAiB,KAExCf,GAED,MAGV,QACE,OAAOX,wDCvFX,OAAOA,yBAAOP,KAAK,oCCAnB,OAAOO,yBAAOP,KAAK,oCCAnB,OAAOO,yBAAOP,KAAK,qCCAnB,OAAOO,yBAAOP,KAAK,qCCAnB,OAAOO,yBAAOP,KAAK,mCCAnB,OAAOO,yBAAOP,KAAK"}
|