react-validate-component 0.3.0 → 0.5.0

package/README.md

@@ -24,261 +24,17 @@ yarn add react-validate-component
 
 ## 사용법, How to use
 
-현재 라이브러리에는 `VText`, `VCheckbox`, `VURL` 컴포넌트가 구현되어 있습니다. 이 컴포넌트를 사용하여 텍스트 입력 필드의 유효성 검사를 쉽게 구현할 수 있습니다.
+현재 라이브러리에는 `VText`, `VCheckbox`, `VURL`, `VEmail`, `VRadio` 컴포넌트가 구현되어 있습니다. 이 컴포넌트를 사용하여 텍스트 입력 필드의 유효성 검사를 쉽게 구현할 수 있습니다.
 
-The library currently includes the `VText`, `VCheckbox`, `VURL` component. You can use this component to easily implement validation for text input fields.
+The library currently includes the `VText`, `VCheckbox`, `VURL`, `VEmail`, `VRadio` component. You can use this component to easily implement validation for text input fields.
 
-### VText Component
+## 컴포넌트, Components
 
-`VText` 컴포넌트는 기본적인 텍스트 입력 필드에 유효성 검사 문구를 출력해주는 기능을 제공합니다.
-
-The `VText` component provides functionality to display validation messages for basic text input fields.
-
-#### 사용 예제, Example
-
-```jsx
-import React from 'react';
-import { VText } from 'react-validate-component';
-
-const App = () => {
-  const [message, setMessage] = React.useState('');
-  const [vState, setVState] = React.useState(false);
-  const [vMessage, setVMessage] = React.useState('');
-
-  React.useEffect(() => {
-    if (/[\d]/gim.exec(message)) {
-      setVState(true);
-      setVMessage('DO NOT INPUT NUMBER.');
-    } else {
-      setVState(false);
-      setVMessage('');
-    }
-  }, [message]);
-
-  return (
-    <section className={styles.layout}>
-      <h1>React-Validate-Component</h1>
-      <div>
-        <h2>VText</h2>
-        <h3>DO NOT INPUT NUMBER.</h3>
-        <VText
-          vState={vState}
-          vType={'outer'}
-          vClassName={'test'}
-          vShowMessage={true}
-          vMessage={vMessage}
-          vLocateMessage={'bottom-left'}
-          vMessageClass={styles.validation_message}
-          vIsAnimate={true}
-          props={{
-            onChange: (e: { target: { value: string } }) => {
-              setMessage(e.target.value);
-            },
-            placeholder: 'this is react-validate-component test.',
-            className: styles.input_text,
-            defaultValue: 'test',
-          }}
-        />
-      </div>
-    </section>
-  );
-};
-
-export default App;
-```
-
-#### Props
-
-- `vState` (boolean): 유효성 상태 값입니다.
-- `vType` (`inner`, `outer`, `tooltip`): 유효성 메시지를 띄우는 타입입니다.
-- `vClassName` (string): 유효성 입힐 class 명입니다.
-- `vShowMessage` (boolean): 유효성 메시지 출력 여부값입니다.
-- `vMessage` (string): 유효성 검사 실패 시 표시할 에러 메시지입니다.
-- `vLocateMessage` (`top-left`, `top`, `top-right`, `center-left`, `center`, `center-right`, `bottom-left`, `bottom`, `bottom-right`): 유효성 메시지를 element 어디에 붙일지 위치값입니다.
-- `vMessageClass` (string): 유효성 메시지에 입힐 class 명입니다.
-- `vIsAnimate` (boolean): 유효성 메시지 출력 시 애니메이션 적용할지 여부입니다. (현재는 opacity만 적용되어있습니다.)
-- `props` (object): 기타 옵션입니다. 기본 input 태그에 attribute로 넣을 값들을 입력하시면 됩니다.
-
-- `vState` (boolean): The validity status value.
-- `vType` (`inner`, `outer`, `tooltip`): The type of validation message display.
-- `vClassName` (string): The class name to apply for validation styling.
-- `vShowMessage` (boolean): Whether to display the validation message.
-- `vMessage` (string): The error message to display when validation fails.
-- `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.
-- `vMessageClass` (string): The class name to apply to the validation message.
-- `vIsAnimate` (boolean): Whether to apply animation when displaying the validation message (currently, only opacity animation is supported).
-- `props` (object): Other options. Enter values for attributes that can be added to the basic input tag.
-
-### VCheckbox Component
-
-`VCheckbox` 컴포넌트는 기본적인 체크박스 필드에 유효성 검사 문구를 출력해주는 기능을 제공합니다.
-
-The `VCheckbox` component provides functionality to display validation messages for basic checkbox fields.
-
-#### 사용 예제, Example
-
-```jsx
-import React from 'react';
-import { VText } from 'react-validate-component';
-
-const App = () => {
-  const list = ['Tiger', 'Rabbit', 'Elephant', 'Dog', 'Pig', 'Cat', 'Duck'];
-  const [checked, setChecked] = React.useState<boolean[]>(
-    Array.from(list, () => false)
-  );
-  const [vState2, setVState2] = React.useState<boolean>(false);
-  const [vMessage2, setVMessage2] = React.useState<string>('');
-  React.useEffect(() => {
-    if (checked.filter(v => v).length > 3) {
-      setVState2(true);
-      setVMessage2('You can check up to 3 items.');
-    } else {
-      setVState2(false);
-      setVMessage2('');
-    }
-  }, [checked]);
-
-  return (
-    <section className={styles.layout}>
-      <h1>React-Validate-Component</h1>
-      <div>
-        <h2>VCheckbox</h2>
-        <h3>CHECK UP TO 3.</h3>
-        <VCheckbox
-          vState={vState2}
-          vType={'bottom'}
-          // vClassName={'test'}
-          vLabelClassName={styles.label_class}
-          vCheckedClassName={styles.label_check_class}
-          vCheckList={list}
-          vCheckedList={checked}
-          vShowMessage={true}
-          vMessage={vMessage2}
-          vMessageClass={styles.validation_message}
-          vIsAnimate={true}
-          props={{
-            onChange: (e: { target: { value: string; checked: boolean } }) => {
-              const tmp = [...checked];
-              const findIndex = list.findIndex(val => val === e.target.value);
-              tmp[findIndex] = e.target.checked;
-              setChecked(tmp);
-            },
-          }}
-        />
-      </div>
-    </section>
-  );
-};
-
-export default App;
-```
-
-#### Props
-
-- `vState` (boolean): 유효성 상태 값입니다.
-- `vType` (`top`, `bottom`): 유효성 메시지를 띄우는 타입입니다.
-- `vClassName` (string): 유효성 입힐 class 명입니다.
-- `vLabelClassName` (string): label 태그에 입힐 class 명입니다.
-- `vCheckedClassName` (string): check 상태일 때 입힐 class 명입니다.
-- `vCheckList` (string[]): checkbox를 만들때 사용하는 배열입니다. 해당 배열에 있는 string값으로 체크박스를 만듭니다.
-- `vCheckedList` (boolean[]): 현재 체크되어있는 상태를 나타내는 배열입니다.
-- `vShowMessage` (boolean): 유효성 메시지 출력 여부값입니다.
-- `vMessage` (string): 유효성 검사 실패 시 표시할 에러 메시지입니다.
-- `vMessageClass` (string): 유효성 메시지에 입힐 class 명입니다.
-- `vIsAnimate` (boolean): 유효성 메시지 출력 시 애니메이션 적용할지 여부입니다. (현재는 opacity만 적용되어있습니다.)
-- `props` (object): 기타 옵션입니다. 기본 input 태그에 attribute로 넣을 값들을 입력하시면 됩니다.
-
-- `vState` (boolean): The validity status value.
-- `vType` (`top`, `bottom`): The type of validation message display.
-- `vClassName` (string): The class name to apply for validation styling.
-- `vLabelClassName` (string): The class name to apply to the `label` tag.
-- `vCheckedClassName` (string): The class name to apply when checked.
-- `vCheckList` (string[]): An array used to create checkboxes. Checkboxes are created using the string values in this array.
-- `vCheckedList` (boolean[]): An array representing the current checked state.
-- `vShowMessage` (boolean): Whether to display the validation message.
-- `vMessage` (string): The error message to display when validation fails.
-- `vMessageClass` (string): The class name to apply to the validation message.
-- `vIsAnimate` (boolean): Whether to apply animation when displaying the validation message (currently, only opacity animation is supported).
-- `props` (object): Other options. Enter values for attributes that can be added to the basic input tag.
-
-### VURL Component
-
-`VURL` 컴포넌트는 기본적인 URL 필드에 유효성 검사 문구를 출력해주는 기능을 제공합니다.
-
-The `VURL` component provides functionality to display validation messages for basic url fields.
-
-#### 사용 예제, Example
-
-```jsx
-import React from 'react';
-import { VText } from 'react-validate-component';
-
-const App = () => {
-  const [vState, setvState] = React.useState < boolean > false;
-  const [vMessage, setvMessage] = React.useState < string > '';
-  const [message, setmessage] =
-    React.useState < string > 'https://www.naver.com';
-
-  React.useEffect(() => {
-    if (/^http[s]?:\/\/([\S]{3,})/i.test(message)) {
-      setvState(false);
-      setvMessage('');
-    } else {
-      setvState(true);
-      setvMessage('IT MUST BE URL.');
-    }
-  }, [message]);
-
-  return (
-    <div>
-      <h2>VURL</h2>
-      <h3>INPUT URL.</h3>
-      <VURL
-        vState={vState}
-        vType={'outer'}
-        // vClassName={'test'}
-        vShowMessage={true}
-        vMessage={vMessage}
-        vLocateMessage={'bottom-left'}
-        vMessageClass={styles.validation_message}
-        vIsAnimate={true}
-        props={{
-          onChange: (e: { target: { value: string } }) => {
-            setmessage(e.target.value);
-          },
-          placeholder: 'this is react-validate-component test.',
-          className: styles.input_text,
-          defaultValue: 'https://www.naver.com',
-        }}
-      />
-    </div>
-  );
-};
-
-export default App;
-```
-
-#### Props
-
-- `vState` (boolean): 유효성 상태 값입니다.
-- `vType` (`inner`, `outer`, `tooltip`): 유효성 메시지를 띄우는 타입입니다.
-- `vClassName` (string): 유효성 입힐 class 명입니다.
-- `vShowMessage` (boolean): 유효성 메시지 출력 여부값입니다.
-- `vMessage` (string): 유효성 검사 실패 시 표시할 에러 메시지입니다.
-- `vLocateMessage` (`top-left`, `top`, `top-right`, `center-left`, `center`, `center-right`, `bottom-left`, `bottom`, `bottom-right`): 유효성 메시지를 element 어디에 붙일지 위치값입니다.
-- `vMessageClass` (string): 유효성 메시지에 입힐 class 명입니다.
-- `vIsAnimate` (boolean): 유효성 메시지 출력 시 애니메이션 적용할지 여부입니다. (현재는 opacity만 적용되어있습니다.)
-- `props` (object): 기타 옵션입니다. 기본 input 태그에 attribute로 넣을 값들을 입력하시면 됩니다.
-
-- `vState` (boolean): The validity status value.
-- `vType` (`inner`, `outer`, `tooltip`): The type of validation message display.
-- `vClassName` (string): The class name to apply for validation styling.
-- `vShowMessage` (boolean): Whether to display the validation message.
-- `vMessage` (string): The error message to display when validation fails.
-- `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.
-- `vMessageClass` (string): The class name to apply to the validation message.
-- `vIsAnimate` (boolean): Whether to apply animation when displaying the validation message (currently, only opacity animation is supported).
-- `props` (object): Other options. Enter values for attributes that can be added to the basic input tag.
+[vText](./doc/vtext.md)
+[vCheckbox](./doc/vcheckbox.md)
+[vURL](./doc/vurl.md)
+[vEmail](./doc/vemail.md)
+[vRadio](./doc/vradio.md)
 
 ### 유효성 검사 규칙, Validation Rules
 
@@ -290,11 +46,11 @@ export default App;
 
 ## 개발중인 기능, Features in Development
 
-- 현재 `VText`, `VCheckbox` 컴포넌트만 구현되어 있으며, 다른 입력 유형에 대한 컴포넌트도 개발할 예정입니다.
+- 현재 `VText`, `VCheckbox`, `VURL`, `VEmail`, `VRadio` 컴포넌트만 구현되어 있으며, 다른 입력 유형에 대한 컴포넌트도 개발할 예정입니다.
 - 추가적인 유효성 검사 규칙 및 에러 메시지 처리 기능이 계획되어 있습니다.
 - 현재 문서에 이미지를 추가한 문서 업데이트도 예정되어있습니다.
 
-- Currently, only the `VText`, `VCheckbox` component is implemented, but components for other input types are planned for development.
+- Currently, only the `VText`, `VCheckbox`, `VURL`, `VEmail`, `VRadio` component is implemented, but components for other input types are planned for development.
 - Additional validation rules and error message handling features are also in the pipeline.
 - Updates to the documentation, including the addition of images, are also planned.
 

package/dist/react-validate-component.cjs.development.js

@@ -33,13 +33,13 @@ function styleInject(css, ref) {
   }
 }
 
-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";
-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"};
+var css_248z = ".index-module_invalid__gHKsE {\r\n  border: 2px solid red;\r\n  outline: none;\r\n}\r\n.index-module_invalid__gHKsE:focus,\r\n.index-module_invalid__gHKsE:focus-visible,\r\n.index-module_invalid__gHKsE:focus-within {\r\n  border: 2px solid red;\r\n}\r\n\r\n/* vType === 'outer' */\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\r\n/* vType === 'inner' */\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/* vType === 'tooltip' */\r\n.index-module_tooltipMessage__ZlthY {\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__tFGFH.index-module_tooltipMessage-top-left__us8PI {\r\n  justify-content: flex-start;\r\n}\r\np.index-module_tooltipMessage-top-left__us8PI::after {\r\n  left: 3%;\r\n}\r\n.index-module_vinput__tFGFH.index-module_tooltipMessage-top__NaUtu {\r\n  justify-content: center;\r\n}\r\np.index-module_tooltipMessage-top__NaUtu::after {\r\n  left: 44%;\r\n}\r\n.index-module_tooltipMessage-top-right__UveQN {\r\n  justify-content: flex-end;\r\n}\r\np.index-module_tooltipMessage-top-right__UveQN::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__tFGFH.index-module_tooltipMessage-center-right__8eqfQ {\r\n  justify-content: flex-end;\r\n}\r\np.index-module_tooltipMessage-center-right__8eqfQ {\r\n  transform: translateX(calc(100% + 10px));\r\n}\r\np.index-module_tooltipMessage-center-right__8eqfQ::after {\r\n  border-right-color: black;\r\n  left: -10%;\r\n}\r\n.index-module_vinput__tFGFH.index-module_tooltipMessage-center-left__yyDuD {\r\n  justify-content: flex-start;\r\n}\r\np.index-module_tooltipMessage-center-left__yyDuD {\r\n  transform: translateX(calc(-100% - 10px));\r\n}\r\np.index-module_tooltipMessage-center-left__yyDuD::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__tFGFH.index-module_tooltipMessage-bottom-left__u-H0Q {\r\n  justify-content: flex-start;\r\n}\r\np.index-module_tooltipMessage-bottom-left__u-H0Q::after {\r\n  left: 3%;\r\n}\r\n.index-module_vinput__tFGFH.index-module_tooltipMessage-bottom__YOZgV {\r\n  justify-content: center;\r\n}\r\np.index-module_tooltipMessage-bottom__YOZgV::after {\r\n  left: 44%;\r\n}\r\n.index-module_tooltipMessage-bottom-right__yD0zu {\r\n  justify-content: flex-end;\r\n}\r\np.index-module_tooltipMessage-bottom-right__yD0zu::after {\r\n  left: 87%;\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";
+var styles = {"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-","tooltipMessage":"index-module_tooltipMessage__ZlthY","tooltipMessage-top-left":"index-module_tooltipMessage-top-left__us8PI","tooltipMessage-top":"index-module_tooltipMessage-top__NaUtu","tooltipMessage-top-right":"index-module_tooltipMessage-top-right__UveQN","tooltipMessage-center-right":"index-module_tooltipMessage-center-right__8eqfQ","tooltipMessage-center-left":"index-module_tooltipMessage-center-left__yyDuD","tooltipMessage-bottom-left":"index-module_tooltipMessage-bottom-left__u-H0Q","tooltipMessage-bottom":"index-module_tooltipMessage-bottom__YOZgV","tooltipMessage-bottom-right":"index-module_tooltipMessage-bottom-right__yD0zu","animateMessage":"index-module_animateMessage__Gxf3M","fade-in":"index-module_fade-in__GxKz8"};
 styleInject(css_248z);
 
 // Text
 function VText(_ref) {
-  var _props$defaultValue, _props$defaultValue2, _props$defaultValue3;
+  var _props$defaultValue, _props$className, _props$defaultValue2, _props$className2, _props$defaultValue3, _props$className3;
   var _ref$vState = _ref.vState,
     vState = _ref$vState === void 0 ? false : _ref$vState,
     _ref$vType = _ref.vType,
@@ -66,7 +66,7 @@ function VText(_ref) {
         type: "text"
       }, props, {
         defaultValue: (_props$defaultValue = props == null ? void 0 : props.defaultValue) != null ? _props$defaultValue : '',
-        className: (props == null ? void 0 : props.className) + " " + (vState ? vClassName || styles.invalid : '')
+        className: ((_props$className = props == null ? void 0 : props.className) != null ? _props$className : '') + " " + vClassName + " " + (vState ? styles.invalid : '')
       })), vState && vShowMessage ? ( /*#__PURE__*/React.createElement("p", {
         className: vMessageClass + " " + (vIsAnimate ? styles.animateMessage : '')
       }, vMessage)) : null);
@@ -77,7 +77,7 @@ function VText(_ref) {
         type: "text"
       }, props, {
         defaultValue: (_props$defaultValue2 = props == null ? void 0 : props.defaultValue) != null ? _props$defaultValue2 : '',
-        className: (props == null ? void 0 : props.className) + " " + (vState ? vClassName || styles.invalid : '')
+        className: ((_props$className2 = props == null ? void 0 : props.className) != null ? _props$className2 : '') + " " + vClassName + " " + (vState ? styles.invalid : '')
       })), vState && vShowMessage ? ( /*#__PURE__*/React.createElement("p", {
         className: vMessageClass + " " + styles.innerMessage + " " + styles["innerMessage-" + vLocateMessage] + " " + (vIsAnimate ? styles.animateMessage : '')
       }, vMessage)) : null);
@@ -88,7 +88,7 @@ function VText(_ref) {
         type: "text"
       }, props, {
         defaultValue: (_props$defaultValue3 = props == null ? void 0 : props.defaultValue) != null ? _props$defaultValue3 : '',
-        className: (props == null ? void 0 : props.className) + " " + (vState ? vClassName || styles.invalid : '')
+        className: ((_props$className3 = props == null ? void 0 : props.className) != null ? _props$className3 : '') + " " + vClassName + " " + (vState ? styles.invalid : '')
       })), vState && vShowMessage ? ( /*#__PURE__*/React.createElement("p", {
         className: vMessageClass + " " + styles.tooltipMessage + " " + styles["tooltipMessage-" + vLocateMessage] + " " + (vIsAnimate ? styles.animateMessage : '')
       }, vMessage)) : null);
@@ -97,10 +97,6 @@ function VText(_ref) {
   }
 }
 
-var css_248z$1 = ".index-module_invalid__jaxx5 {\r\n  border: 2px solid red;\r\n  outline: none;\r\n}\r\n.index-module_invalid__jaxx5:focus,\r\n.index-module_invalid__jaxx5:focus-visible,\r\n.index-module_invalid__jaxx5:focus-within {\r\n  border: 2px solid red;\r\n}\r\n\r\n.index-module_flex_column__jVY8S {\r\n  display: flex;\r\n  flex-direction: column;\r\n}\r\n\r\n.index-module_checkbox_layout__CnBGz {\r\n  width: 400px;\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  gap: 10px;\r\n}\r\n\r\n.index-module_animateMessage__o7xGY {\r\n  animation: index-module_fade-in__KDZ5w 1s ease-in-out;\r\n}\r\n\r\n@keyframes index-module_fade-in__KDZ5w {\r\n  0% {\r\n    opacity: 0;\r\n  }\r\n  100% {\r\n    opacity: 1;\r\n  }\r\n}\r\n";
-var styles$1 = {"invalid":"index-module_invalid__jaxx5","flex_column":"index-module_flex_column__jVY8S","checkbox_layout":"index-module_checkbox_layout__CnBGz","animateMessage":"index-module_animateMessage__o7xGY","fade-in":"index-module_fade-in__KDZ5w"};
-styleInject(css_248z$1);
-
 function VCheckbox(_ref) {
   var _ref$vState = _ref.vState,
     vState = _ref$vState === void 0 ? false : _ref$vState,
@@ -132,7 +128,7 @@ function VCheckbox(_ref) {
     vCheckList.forEach(function (val, i) {
       result.push( /*#__PURE__*/React.createElement("label", {
         htmlFor: "vCheckbox-" + i,
-        className: vLabelClassName + " " + (vCheckedList[i] ? vCheckedClassName : '') + " " + (vState ? styles$1.invalid : ''),
+        className: vLabelClassName + " " + (vCheckedList[i] ? vCheckedClassName : '') + " " + (vState ? styles.invalid : ''),
         key: i
       }, /*#__PURE__*/React.createElement("input", Object.assign({
         id: "vCheckbox-" + i,
@@ -144,33 +140,29 @@ function VCheckbox(_ref) {
       }, props)), /*#__PURE__*/React.createElement("span", null, val)));
     });
     return /*#__PURE__*/React.createElement("div", {
-      className: styles$1.checkbox_layout
+      className: styles.checkbox_layout
     }, result);
   }
   switch (vType) {
     case 'top':
       return /*#__PURE__*/React.createElement("div", {
-        className: styles$1.flex_column
+        className: styles.flex_column
       }, vState && vShowMessage ? ( /*#__PURE__*/React.createElement("p", {
-        className: vMessageClass + " " + (vIsAnimate ? styles$1.animateMessage : '')
+        className: vMessageClass + " " + (vIsAnimate ? styles.animateMessage : '')
       }, vMessage)) : null, makeCheckList());
     case 'bottom':
       return /*#__PURE__*/React.createElement("div", {
-        className: styles$1.flex_column
+        className: styles.flex_column
       }, makeCheckList(), vState && vShowMessage ? ( /*#__PURE__*/React.createElement("p", {
-        className: vMessageClass + " " + (vIsAnimate ? styles$1.animateMessage : '')
+        className: vMessageClass + " " + (vIsAnimate ? styles.animateMessage : '')
       }, vMessage)) : null);
     default:
       return /*#__PURE__*/React.createElement(React.Fragment, null);
   }
 }
 
-var css_248z$2 = ".index-module_invalid__Vthuh {\r\n  border: 2px solid red;\r\n  outline: none;\r\n}\r\n.index-module_invalid__Vthuh:focus,\r\n.index-module_invalid__Vthuh:focus-visible,\r\n.index-module_invalid__Vthuh:focus-within {\r\n  border: 2px solid red;\r\n}\r\n\r\n/* vType === 'outer' */\r\n.index-module_vinput__Lvi4O {\r\n  display: flex;\r\n}\r\n.index-module_vinput-top-left__sBqYe {\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__qDZz- {\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__I-hDB {\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__oYELK {\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__91z7q {\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n.index-module_vinput-bottom-left__6K-Lk {\r\n  flex-direction: column;\r\n  align-items: flex-start;\r\n  justify-content: center;\r\n}\r\n.index-module_vinput-bottom__FlRwi {\r\n  flex-direction: column;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n.index-module_vinput-bottom-right__xC4I1 {\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__Rajpi {\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__JdN8y {\r\n  align-items: flex-start;\r\n  justify-content: flex-start;\r\n}\r\n.index-module_innerMessage-top__ASXWj {\r\n  align-items: flex-start;\r\n  justify-content: center;\r\n}\r\n.index-module_innerMessage-top-right__62EeZ {\r\n  align-items: flex-start;\r\n  justify-content: flex-end;\r\n}\r\n.index-module_innerMessage-center-left__TS--f {\r\n  align-items: center;\r\n  justify-content: flex-start;\r\n}\r\n.index-module_innerMessage-center__-c2-N {\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n.index-module_innerMessage-center-right__ow9Vw {\r\n  align-items: center;\r\n  justify-content: flex-end;\r\n}\r\n.index-module_innerMessage-bottom-left__a2DiX {\r\n  align-items: flex-end;\r\n  justify-content: flex-start;\r\n}\r\n.index-module_innerMessage-bottom__tSUzZ {\r\n  align-items: flex-end;\r\n  justify-content: center;\r\n}\r\n.index-module_innerMessage-bottom-right__VNQIp {\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__fCp4y {\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__Lvi4O.index-module_tooltipMessage-top-left__2a7YY {\r\n  justify-content: flex-start;\r\n}\r\np.index-module_tooltipMessage-top-left__2a7YY::after {\r\n  left: 3%;\r\n}\r\n.index-module_vinput__Lvi4O.index-module_tooltipMessage-top__vfEvp {\r\n  justify-content: center;\r\n}\r\np.index-module_tooltipMessage-top__vfEvp::after {\r\n  left: 44%;\r\n}\r\n.index-module_tooltipMessage-top-right__3AW9- {\r\n  justify-content: flex-end;\r\n}\r\np.index-module_tooltipMessage-top-right__3AW9-::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__Lvi4O.index-module_tooltipMessage-center-right__5Sxay {\r\n  justify-content: flex-end;\r\n}\r\np.index-module_tooltipMessage-center-right__5Sxay {\r\n  transform: translateX(calc(100% + 10px));\r\n}\r\np.index-module_tooltipMessage-center-right__5Sxay::after {\r\n  border-right-color: black;\r\n  left: -10%;\r\n}\r\n.index-module_vinput__Lvi4O.index-module_tooltipMessage-center-left__8ShCG {\r\n  justify-content: flex-start;\r\n}\r\np.index-module_tooltipMessage-center-left__8ShCG {\r\n  transform: translateX(calc(-100% - 10px));\r\n}\r\np.index-module_tooltipMessage-center-left__8ShCG::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__Lvi4O.index-module_tooltipMessage-bottom-left__NNUPd {\r\n  justify-content: flex-start;\r\n}\r\np.index-module_tooltipMessage-bottom-left__NNUPd::after {\r\n  left: 3%;\r\n}\r\n.index-module_vinput__Lvi4O.index-module_tooltipMessage-bottom__73oDg {\r\n  justify-content: center;\r\n}\r\np.index-module_tooltipMessage-bottom__73oDg::after {\r\n  left: 44%;\r\n}\r\n.index-module_tooltipMessage-bottom-right__QqsJp {\r\n  justify-content: flex-end;\r\n}\r\np.index-module_tooltipMessage-bottom-right__QqsJp::after {\r\n  left: 87%;\r\n}\r\n\r\n.index-module_animateMessage__QOzDN {\r\n  animation: index-module_fade-in__-mmbL 1s ease-in-out;\r\n}\r\n\r\n@keyframes index-module_fade-in__-mmbL {\r\n  0% {\r\n    opacity: 0;\r\n  }\r\n  100% {\r\n    opacity: 1;\r\n  }\r\n}\r\n";
-var styles$2 = {"invalid":"index-module_invalid__Vthuh","vinput":"index-module_vinput__Lvi4O","vinput-top-left":"index-module_vinput-top-left__sBqYe","vinput-top":"index-module_vinput-top__qDZz-","vinput-top-right":"index-module_vinput-top-right__I-hDB","vinput-center-left":"index-module_vinput-center-left__oYELK","vinput-center-right":"index-module_vinput-center-right__91z7q","vinput-bottom-left":"index-module_vinput-bottom-left__6K-Lk","vinput-bottom":"index-module_vinput-bottom__FlRwi","vinput-bottom-right":"index-module_vinput-bottom-right__xC4I1","innerMessage":"index-module_innerMessage__Rajpi","innerMessage-top-left":"index-module_innerMessage-top-left__JdN8y","innerMessage-top":"index-module_innerMessage-top__ASXWj","innerMessage-top-right":"index-module_innerMessage-top-right__62EeZ","innerMessage-center-left":"index-module_innerMessage-center-left__TS--f","innerMessage-center":"index-module_innerMessage-center__-c2-N","innerMessage-center-right":"index-module_innerMessage-center-right__ow9Vw","innerMessage-bottom-left":"index-module_innerMessage-bottom-left__a2DiX","innerMessage-bottom":"index-module_innerMessage-bottom__tSUzZ","innerMessage-bottom-right":"index-module_innerMessage-bottom-right__VNQIp","tooltipMessage":"index-module_tooltipMessage__fCp4y","tooltipMessage-top-left":"index-module_tooltipMessage-top-left__2a7YY","tooltipMessage-top":"index-module_tooltipMessage-top__vfEvp","tooltipMessage-top-right":"index-module_tooltipMessage-top-right__3AW9-","tooltipMessage-center-right":"index-module_tooltipMessage-center-right__5Sxay","tooltipMessage-center-left":"index-module_tooltipMessage-center-left__8ShCG","tooltipMessage-bottom-left":"index-module_tooltipMessage-bottom-left__NNUPd","tooltipMessage-bottom":"index-module_tooltipMessage-bottom__73oDg","tooltipMessage-bottom-right":"index-module_tooltipMessage-bottom-right__QqsJp","animateMessage":"index-module_animateMessage__QOzDN","fade-in":"index-module_fade-in__-mmbL"};
-styleInject(css_248z$2);
-
 function VURL(_ref) {
-  var _props$defaultValue, _props$defaultValue2, _props$defaultValue3;
+  var _props$defaultValue, _props$className, _props$defaultValue2, _props$className2, _props$defaultValue3, _props$className3;
   var _ref$vState = _ref.vState,
     vState = _ref$vState === void 0 ? false : _ref$vState,
     _ref$vType = _ref.vType,
@@ -192,36 +184,36 @@ function VURL(_ref) {
   switch (vType) {
     case 'outer':
       return /*#__PURE__*/React.createElement("div", {
-        className: styles$2.vinput + " " + styles$2["vinput-" + vLocateMessage]
+        className: styles.vinput + " " + styles["vinput-" + vLocateMessage]
       }, /*#__PURE__*/React.createElement("input", Object.assign({
         type: "url"
       }, props, {
         defaultValue: (_props$defaultValue = props == null ? void 0 : props.defaultValue) != null ? _props$defaultValue : '',
-        className: (props == null ? void 0 : props.className) + " " + (vState ? vClassName || styles$2.invalid : '')
+        className: ((_props$className = props == null ? void 0 : props.className) != null ? _props$className : '') + " " + vClassName + " " + (vState ? styles.invalid : '')
       })), vState && vShowMessage ? ( /*#__PURE__*/React.createElement("p", {
-        className: vMessageClass + " " + (vIsAnimate ? styles$2.animateMessage : '')
+        className: vMessageClass + " " + (vIsAnimate ? styles.animateMessage : '')
       }, vMessage)) : null);
     case 'inner':
       return /*#__PURE__*/React.createElement("div", {
-        className: styles$2.vinput
+        className: styles.vinput
       }, /*#__PURE__*/React.createElement("input", Object.assign({
         type: "url"
       }, props, {
         defaultValue: (_props$defaultValue2 = props == null ? void 0 : props.defaultValue) != null ? _props$defaultValue2 : '',
-        className: (props == null ? void 0 : props.className) + " " + (vState ? vClassName || styles$2.invalid : '')
+        className: ((_props$className2 = props == null ? void 0 : props.className) != null ? _props$className2 : '') + " " + vClassName + " " + (vState ? styles.invalid : '')
       })), vState && vShowMessage ? ( /*#__PURE__*/React.createElement("p", {
-        className: vMessageClass + " " + styles$2.innerMessage + " " + styles$2["innerMessage-" + vLocateMessage] + " " + (vIsAnimate ? styles$2.animateMessage : '')
+        className: vMessageClass + " " + styles.innerMessage + " " + styles["innerMessage-" + vLocateMessage] + " " + (vIsAnimate ? styles.animateMessage : '')
       }, vMessage)) : null);
     case 'tooltip':
       return /*#__PURE__*/React.createElement("div", {
-        className: styles$2.vinput + " " + styles$2["tooltipMessage-" + vLocateMessage]
+        className: styles.vinput + " " + styles["tooltipMessage-" + vLocateMessage]
       }, /*#__PURE__*/React.createElement("input", Object.assign({
         type: "url"
       }, props, {
         defaultValue: (_props$defaultValue3 = props == null ? void 0 : props.defaultValue) != null ? _props$defaultValue3 : '',
-        className: (props == null ? void 0 : props.className) + " " + (vState ? vClassName || styles$2.invalid : '')
+        className: ((_props$className3 = props == null ? void 0 : props.className) != null ? _props$className3 : '') + " " + vClassName + " " + (vState ? styles.invalid : '')
       })), vState && vShowMessage ? ( /*#__PURE__*/React.createElement("p", {
-        className: vMessageClass + " " + styles$2.tooltipMessage + " " + styles$2["tooltipMessage-" + vLocateMessage] + " " + (vIsAnimate ? styles$2.animateMessage : '')
+        className: vMessageClass + " " + styles.tooltipMessage + " " + styles["tooltipMessage-" + vLocateMessage] + " " + (vIsAnimate ? styles.animateMessage : '')
       }, vMessage)) : null);
     default:
       return /*#__PURE__*/React.createElement("div", null);
@@ -240,16 +232,135 @@ function VDate() {
   });
 }
 
-function VEmail() {
-  return /*#__PURE__*/React.createElement("input", {
-    type: "email"
-  });
+function VEmail(_ref) {
+  var _props$defaultValue, _props$className, _props$defaultValue2, _props$className2, _props$defaultValue3, _props$className3;
+  var _ref$vState = _ref.vState,
+    vState = _ref$vState === void 0 ? false : _ref$vState,
+    _ref$vType = _ref.vType,
+    vType = _ref$vType === void 0 ? 'outer' : _ref$vType,
+    _ref$vClassName = _ref.vClassName,
+    vClassName = _ref$vClassName === void 0 ? '' : _ref$vClassName,
+    _ref$vShowMessage = _ref.vShowMessage,
+    vShowMessage = _ref$vShowMessage === void 0 ? false : _ref$vShowMessage,
+    _ref$vMessage = _ref.vMessage,
+    vMessage = _ref$vMessage === void 0 ? '' : _ref$vMessage,
+    _ref$vLocateMessage = _ref.vLocateMessage,
+    vLocateMessage = _ref$vLocateMessage === void 0 ? 'bottom' : _ref$vLocateMessage,
+    _ref$vMessageClass = _ref.vMessageClass,
+    vMessageClass = _ref$vMessageClass === void 0 ? '' : _ref$vMessageClass,
+    _ref$vIsAnimate = _ref.vIsAnimate,
+    vIsAnimate = _ref$vIsAnimate === void 0 ? false : _ref$vIsAnimate,
+    _ref$props = _ref.props,
+    props = _ref$props === void 0 ? {} : _ref$props;
+  switch (vType) {
+    case 'outer':
+      return /*#__PURE__*/React.createElement("div", {
+        className: styles.vinput + " " + styles["vinput-" + vLocateMessage]
+      }, /*#__PURE__*/React.createElement("input", Object.assign({
+        type: "email"
+      }, props, {
+        defaultValue: (_props$defaultValue = props == null ? void 0 : props.defaultValue) != null ? _props$defaultValue : '',
+        className: ((_props$className = props == null ? void 0 : props.className) != null ? _props$className : '') + " " + vClassName + " " + (vState ? styles.invalid : '')
+      })), vState && vShowMessage ? ( /*#__PURE__*/React.createElement("p", {
+        className: vMessageClass + " " + (vIsAnimate ? styles.animateMessage : '')
+      }, vMessage)) : null);
+    case 'inner':
+      return /*#__PURE__*/React.createElement("div", {
+        className: styles.vinput
+      }, /*#__PURE__*/React.createElement("input", Object.assign({
+        type: "email"
+      }, props, {
+        defaultValue: (_props$defaultValue2 = props == null ? void 0 : props.defaultValue) != null ? _props$defaultValue2 : '',
+        className: ((_props$className2 = props == null ? void 0 : props.className) != null ? _props$className2 : '') + " " + vClassName + " " + (vState ? styles.invalid : '')
+      })), vState && vShowMessage ? ( /*#__PURE__*/React.createElement("p", {
+        className: vMessageClass + " " + styles.innerMessage + " " + styles["innerMessage-" + vLocateMessage] + " " + (vIsAnimate ? styles.animateMessage : '')
+      }, vMessage)) : null);
+    case 'tooltip':
+      return /*#__PURE__*/React.createElement("div", {
+        className: styles.vinput + " " + styles["tooltipMessage-" + vLocateMessage]
+      }, /*#__PURE__*/React.createElement("input", Object.assign({
+        type: "email"
+      }, props, {
+        defaultValue: (_props$defaultValue3 = props == null ? void 0 : props.defaultValue) != null ? _props$defaultValue3 : '',
+        className: ((_props$className3 = props == null ? void 0 : props.className) != null ? _props$className3 : '') + " " + vClassName + " " + (vState ? styles.invalid : '')
+      })), vState && vShowMessage ? ( /*#__PURE__*/React.createElement("p", {
+        className: vMessageClass + " " + styles.tooltipMessage + " " + styles["tooltipMessage-" + vLocateMessage] + " " + (vIsAnimate ? styles.animateMessage : '')
+      }, vMessage)) : null);
+    default:
+      return /*#__PURE__*/React.createElement("div", null);
+  }
 }
 
-function VRadio() {
-  return /*#__PURE__*/React.createElement("input", {
-    type: "radio"
-  });
+function VRadio(_ref) {
+  var _props$className, _props$className2, _props$className3;
+  var _ref$vState = _ref.vState,
+    vState = _ref$vState === void 0 ? false : _ref$vState,
+    _ref$vName = _ref.vName,
+    vName = _ref$vName === void 0 ? '' : _ref$vName,
+    _ref$vSelectListName = _ref.vSelectListName,
+    vSelectListName = _ref$vSelectListName === void 0 ? [] : _ref$vSelectListName,
+    _ref$vSelectListValue = _ref.vSelectListValue,
+    vSelectListValue = _ref$vSelectListValue === void 0 ? [] : _ref$vSelectListValue,
+    _ref$vType = _ref.vType,
+    vType = _ref$vType === void 0 ? 'bottom' : _ref$vType,
+    _ref$vClassName = _ref.vClassName,
+    vClassName = _ref$vClassName === void 0 ? '' : _ref$vClassName,
+    _ref$vShowMessage = _ref.vShowMessage,
+    vShowMessage = _ref$vShowMessage === void 0 ? false : _ref$vShowMessage,
+    _ref$vMessage = _ref.vMessage,
+    vMessage = _ref$vMessage === void 0 ? '' : _ref$vMessage,
+    _ref$vLocateMessage = _ref.vLocateMessage,
+    vLocateMessage = _ref$vLocateMessage === void 0 ? 'bottom' : _ref$vLocateMessage,
+    _ref$vMessageClass = _ref.vMessageClass,
+    vMessageClass = _ref$vMessageClass === void 0 ? '' : _ref$vMessageClass,
+    _ref$vIsAnimate = _ref.vIsAnimate,
+    vIsAnimate = _ref$vIsAnimate === void 0 ? false : _ref$vIsAnimate,
+    _ref$props = _ref.props,
+    props = _ref$props === void 0 ? {} : _ref$props;
+  function makeSelectList() {
+    var result = [];
+    for (var i = 0; i < vSelectListName.length; i += 1) {
+      result.push( /*#__PURE__*/React.createElement("div", {
+        key: vName + "-" + i
+      }, /*#__PURE__*/React.createElement("input", Object.assign({
+        type: "radio",
+        id: vName + "-" + i,
+        name: vName,
+        value: vSelectListValue[i]
+      }, props)), /*#__PURE__*/React.createElement("label", {
+        htmlFor: vName + "-" + i
+      }, vSelectListName[i])));
+    }
+    return result;
+  }
+  switch (vType) {
+    case 'bottom':
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+        className: styles.vinput + " " + styles["vinput-" + vLocateMessage]
+      }, /*#__PURE__*/React.createElement("div", {
+        className: ((_props$className = props == null ? void 0 : props.className) != null ? _props$className : '') + " " + vClassName
+      }, makeSelectList())), vState && vShowMessage ? ( /*#__PURE__*/React.createElement("p", {
+        className: vMessageClass + " " + (vIsAnimate ? styles.animateMessage : '')
+      }, vMessage)) : null);
+    case 'top':
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+        className: styles.vinput + " " + styles["vinput-" + vLocateMessage]
+      }, vState && vShowMessage ? ( /*#__PURE__*/React.createElement("p", {
+        className: vMessageClass + " " + (vIsAnimate ? styles.animateMessage : '')
+      }, vMessage)) : null, /*#__PURE__*/React.createElement("div", {
+        className: ((_props$className2 = props == null ? void 0 : props.className) != null ? _props$className2 : '') + " " + vClassName
+      }, makeSelectList())));
+    case 'tooltip':
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+        className: styles.vinput + " " + styles["tooltipMessage-" + vLocateMessage]
+      }, /*#__PURE__*/React.createElement("div", {
+        className: ((_props$className3 = props == null ? void 0 : props.className) != null ? _props$className3 : '') + " " + vClassName
+      }, makeSelectList())), vState && vShowMessage ? ( /*#__PURE__*/React.createElement("p", {
+        className: vMessageClass + " " + styles.tooltipMessage + " " + styles["tooltipMessage-" + vLocateMessage] + " " + (vIsAnimate ? styles.animateMessage : '')
+      }, vMessage)) : null);
+    default:
+      return /*#__PURE__*/React.createElement("div", null);
+  }
 }
 
 function VRange() {