[#644][3.0] Textfield 1차 개발

docs/components/Example.vue

@@ -157,6 +157,9 @@ export default {
       @include themify() {
         background-color: themed('border-color-base');
       }
+      &.yellow {
+        background-color: $color-yellow;
+      }
     }
     .btn {
       padding: 4px 7px;

docs/views/radio/api/radio.md

@@ -33,11 +33,11 @@
 
  | 이름 | 파라미터 | 설명 |
  | ---- | ------- | ---- |
- | change | (event, newValue) | <라디오그룹> 내 <라디오> 변화 이벤트 감지 |
+ | change | (event, newValue) | <라디오그룹> 내 <라디오> 컴포넌트 change 이벤트 발생 시 호출  |
 
 #### <라디오>
 
  | 이름 | 파라미터 | 설명 |
  | ---- | ------- | ---- |
- | change | (event, newValue) | <라디오> 변화 이벤트 감지 |
+ | change | (event, newValue) | 컴포넌트 change 이벤트 발생 시 호출  |
 

docs/views/radio/example/Default.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="case">
+    <p class="case-title">Common</p>
     <EvRadio
       v-model="radio1"
       label="Option A"

docs/views/textField/api/textfield.md

@@ -0,0 +1,36 @@
+### Desc
+- 태그는 &lt;EvTextfield&gt;(이하 <텍스트필드>)으로 정의
+
+```
+<EvTextfield
+  옵션
+/>
+```
+ - <텍스트필드>에서 바인딩 옵션 설정으로 의도에 맞는 텍스트필드 구현
+
+### Props
+
+|     이름     |  타입            |   디폴트         |                 설명              |                  종류               |
+| ------------ | --------------- | --------------- | --------------------------------- | ----------------------------------- |
+| type         | String          | 'text'          | 타입 설정                          | 'text', 'password', 'textarea'     |
+| width        | String, Number  | '100%'          | textfield 너비. Number 입력 시, px 설정, String 입력으로 단위 변경 가능 | |
+| height       | String, Number  | '100%'          | textfield 높이. Number 입력 시, px 설정, String 입력으로 단위 변경 가능 | |
+| disabled     | Boolean         | false           | 비활성화 여부                       | true, false                      |
+| readonly     | Boolean         | false           | 읽기 전용 여부                      | true, false                      |
+| placeholder  | String          |                 | Input / Textarea의 placeholder 값  | |
+| maxLength    | Number          | Infinity        | value 의 최대길이 제한 길이          | true, false |
+| showMaxLength | Boolean        | false           | maxLength 및 입력 value의 길이값 표현 여부. maxLength 설정되어 있어야 표현 가능 | true, false |
+| errorMsg     | String          |                 | Error 표현을 위한 메시지 |  |
+
+### Event
+
+ | 이름 | 파라미터 | 설명 |
+ | ---- | ------- | ---- |
+ | enter | event | Event object. 컴포넌트 enter로 인한 keyUp 이벤트 발생 시 호출 |
+ | keyUp | event | Event object. 컴포넌트 keyUp 이벤트 발생 시 호출 |
+ | keyDown | event | Event object. 컴포넌트 keyDown 이벤트 발생 시 호출 |
+ | focus | event | Event object. 컴포넌트 focus 이벤트 발생 시 호출 |
+ | blur | event | Event object. 컴포넌트 blur 이벤트 발생 시 호출 |
+ | input | (event, newValue) | 컴포넌트 input 이벤트 발생 시 호출 |
+ | change | (event, newValue) | 컴포넌트 change 이벤트 발생 시 호출 |
+ | click | event | Event object. 컴포넌트 click 이벤트 발생 시 호출 |

docs/views/textField/example/Default.vue

@@ -0,0 +1,118 @@
+<template>
+  <div class="case">
+    <p class="case-title">Common</p>
+    <EvTextfield
+      v-model="textfield1"
+      placeholder="Please enter the content"
+      type="text"
+      width="230px"
+      height="35px"
+    />
+    <div class="description">
+      <span class="badge yellow">
+        type="text"
+      </span>
+      <span class="badge">
+        Textfield Value
+      </span>
+      {{ textfield1 }}
+    </div>
+  </div>
+
+  <div class="case">
+    <p class="case-title">Readonly</p>
+    <EvTextfield
+      v-model="textfield2"
+      type="text"
+      width="230px"
+      height="35px"
+      readonly
+    />
+  </div>
+
+  <div class="case">
+    <p class="case-title">Disabled</p>
+    <EvTextfield
+      v-model="textfield3"
+      type="text"
+      width="230px"
+      height="35px"
+      disabled
+    />
+  </div>
+
+  <div class="case">
+    <p class="case-title">Clearable</p>
+    <EvTextfield
+      v-model="textfield4"
+      placeholder="Please enter the content"
+      type="text"
+      width="230px"
+      height="35px"
+      clearable
+    />
+  </div>
+
+  <div class="case">
+    <p class="case-title">Max Length</p>
+    <div style="display: flex;">
+      <EvTextfield
+        v-model="textfield5"
+        placeholder="Please enter the content"
+        type="text"
+        width="230px"
+        height="35px"
+        :maxLength="3"
+      />
+      <EvTextfield
+        v-model="textfield5"
+        placeholder="Please enter the content"
+        type="text"
+        width="230px"
+        height="35px"
+        :maxLength="3"
+        show-max-length
+      />
+    </div>
+  </div>
+
+  <div class="case">
+    <p class="case-title">Error Message</p>
+    <div style="display: flex;">
+      <EvTextfield
+        placeholder="Please enter the content"
+        type="text"
+        width="230px"
+        height="35px"
+        error-msg="Error Message"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import { ref } from 'vue';
+
+export default {
+  setup() {
+    const textfield1 = ref();
+    const textfield2 = ref('Read Only Content');
+    const textfield3 = ref('Disabled Content');
+    const textfield4 = ref();
+    const textfield5 = ref();
+    return {
+      textfield1,
+      textfield2,
+      textfield3,
+      textfield4,
+      textfield5,
+    };
+  },
+};
+</script>
+
+<style lant="scss">
+.case .ev-textfield {
+  margin-right: 15px;
+}
+</style>

docs/views/textField/example/Textarea.vue

@@ -0,0 +1,86 @@
+<template>
+  <div class="case">
+    <p class="case-title">Common</p>
+    <EvTextfield
+      v-model="textfield1"
+      placeholder="Please enter the content"
+      type="textarea"
+      width="350px"
+      height="80px"
+    />
+    <div class="description">
+      <span class="badge yellow">
+        type="textarea"
+      </span>
+      <span class="badge">
+        Textfield Value
+      </span>
+      {{ textfield1 }}
+    </div>
+  </div>
+
+  <div class="case">
+    <p class="case-title">Readonly</p>
+    <EvTextfield
+      v-model="textfield2"
+      type="textarea"
+      width="350px"
+      height="80px"
+      readonly
+    />
+  </div>
+
+  <div class="case">
+    <p class="case-title">Disabled</p>
+    <EvTextfield
+      v-model="textfield3"
+      type="textarea"
+      width="350px"
+      height="80px"
+      disabled
+    />
+  </div>
+
+  <div class="case">
+    <p class="case-title">Max Length</p>
+    <div style="display: flex;">
+      <EvTextfield
+        v-model="textfield4"
+        placeholder="Please enter the content"
+        type="textarea"
+        width="350px"
+        height="80px"
+        :maxLength="10"
+      />
+      <EvTextfield
+        v-model="textfield4"
+        placeholder="Please enter the content"
+        type="textarea"
+        width="350px"
+        height="80px"
+        :maxLength="10"
+        show-max-length
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import { ref } from 'vue';
+
+export default {
+  setup() {
+    const textfield1 = ref();
+    const textfield2 = ref('Read Only Content');
+    const textfield3 = ref('Disabled Content');
+    const textfield4 = ref();
+
+    return {
+      textfield1,
+      textfield2,
+      textfield3,
+      textfield4,
+    };
+  },
+};
+</script>

docs/views/textField/example/TextfieldPassword.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="case">
+    <p class="case-title">Common</p>
+    <EvTextfield
+      v-model="textfield1"
+      placeholder="Please enter the password"
+      type="password"
+      width="230px"
+      height="35px"
+    />
+    <div class="description">
+      <span class="badge yellow">
+        type="password"
+      </span>
+    </div>
+  </div>
+  <div class="case">
+    <p class="case-title">Show Password</p>
+    <EvTextfield
+      v-model="textfield2"
+      placeholder="Please enter the content"
+      type="password"
+      width="230px"
+      height="35px"
+      :showPassword="true"
+    />
+  </div>
+</template>
+
+<script>
+import { ref } from 'vue';
+
+export default {
+  setup() {
+    const textfield1 = ref();
+    const textfield2 = ref();
+
+    return {
+      textfield1,
+      textfield2,
+    };
+  },
+};
+</script>