ex-em · kdeun1 · Sep 24, 2020 · Sep 23, 2020 · Sep 24, 2020 · Sep 24, 2020
diff --git a/docs/components/Example.vue b/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;

diff --git a/docs/views/icon/api/icon.md b/docs/views/icon/api/icon.md
@@ -1,8 +1,8 @@
 ### Desc
-- 태그는 &lt;EvIcon&gt;(이하 <아이콘>)으로 정의
+- 태그는 &lt;ev-icon&gt;(이하 <아이콘>)으로 정의
 
 ```
-<EvIcon icon="아이콘명" />
+<ev-icon icon="아이콘명" />
 ```
 
 ### Props

diff --git a/docs/views/icon/example/Default.vue b/docs/views/icon/example/Default.vue
@@ -2,23 +2,23 @@
   <div class="case">
     <p class="case-title">Size</p>
     <div style="font-size: 40px;">
-      <EvIcon icon="ev-icon-user" />
-      <EvIcon icon="ev-icon-topology" />
+      <ev-icon icon="ev-icon-user" />
+      <ev-icon icon="ev-icon-topology" />
       <i class="ev-icon-server"/>
     </div>
     <div class="description">
       font-size 지정하여 크기 변경
     </div>
     <div>
-      <EvIcon
+      <ev-icon
         icon="ev-icon-user2"
         size="s"
       />
-      <EvIcon
+      <ev-icon
         icon="ev-icon-user2"
         size="m"
       />
-      <EvIcon
+      <ev-icon
         icon="ev-icon-user2"
         size="l"
       />
@@ -30,7 +30,7 @@
   <div class="case">
     <p class="case-title">Event</p>
     <div style="font-size: 40px;">
-      <EvIcon
+      <ev-icon
         icon="ev-icon-save"
         @click="clickIcon"
         @dblClick="dblClickIcon"

diff --git a/docs/views/radio/api/radio.md b/docs/views/radio/api/radio.md
@@ -1,12 +1,12 @@
 ### Desc
-- 태그는 &lt;EvRadio&gt;(이하 <라디오>), &lt;EvRadioGroup&gt;(이하 <라디오그룹>)으로 정의
+- 태그는 &lt;ev-radio&gt;(이하 <라디오>), &lt;ev-radio-group&gt;(이하 <라디오그룹>)으로 정의
 
 ```
-<EvRadioGroup>
-  <EvRadio>텍스트</EvRadio>
-  <EvRadio>텍스트</EvRadio>
-  <EvRadio>텍스트</EvRadio>
-</EvRadioGroup>
+<ev-radio-group>
+  <ev-radio>텍스트</ev-radio>
+  <ev-radio>텍스트</ev-radio>
+  <ev-radio>텍스트</ev-radio>
+</ev-radio-group>
 ```
 
  - <라디오그룹>에서 `<slot>`을 사용하여 <라디오>태그가 안에 들어가는 로직
@@ -15,29 +15,29 @@
 ### Props
 #### <라디오그룹>
 
-|    이름     |   디폴트   |  타입   |          설명            |                    종류                           |
-|------------ |-----------|---------|-------------------------|---------------------------------------------------|
-| v-model     | null      | String, Number, Symbol, Boolean | <라디오그룹> 내 선택된 <라디오>의 label 값으로, 해당 값은 바인딩되어 동적으로 변함 | |
+| 이름 | 타입 | 디폴트 | 설명 | 종류 |
+| --- | ---- | ----- | ---- | --- |
+| v-model | null | String, Number, Symbol, Boolean | <라디오그룹> 내 선택된 <라디오>의 label 값으로, 해당 값은 바인딩되어 동적으로 변함 | |
 
 #### <라디오>
 
-|    이름     |   디폴트   |  타입   |          설명            |                    종류                           |
-|------------ |-----------|---------|-------------------------|---------------------------------------------------|
-| v-model     | null      | String, Number, Symbol, Boolean | <라디오그룹> 내 선택된 <라디오>의 label 값으로, 해당 값은 바인딩되어 동적으로 변함 | |
-| label       | null      | String, Number, Symbol, Boolean | HTML element value (required) |  |
-| disabled    | false     | Boolean | HTML element disabled attribute    |  |
-| size        | medium    | String  | 라디오 버튼 크기 | small, medium(default) |
+| 이름 | 타입 | 디폴트 | 설명 | 종류 |
+| --- | ---- | ----- | ---- | --- |
+| v-model | null | String, Number, Symbol, Boolean | <라디오그룹> 내 선택된 <라디오>의 label 값으로, 해당 값은 바인딩되어 동적으로 변함 | |
+| label | null | String, Number, Symbol, Boolean | HTML element value (required) |  |
+| disabled | false | Boolean | HTML element disabled attribute |  |
+| size | m | String | 라디오 버튼 크기 | s, m |
 
 ### Event
 #### <라디오그룹>
 
  | 이름 | 파라미터 | 설명 |
  | ---- | ------- | ---- |
- | change | (event, newValue) | <라디오그룹> 내 <라디오> 변화 이벤트 감지 |
+ | change | (event, newValue) | <라디오그룹> 내 <라디오> 컴포넌트 change 이벤트 발생 시 호출  |
 
 #### <라디오>
 
  | 이름 | 파라미터 | 설명 |
  | ---- | ------- | ---- |
- | change | (event, newValue) | <라디오> 변화 이벤트 감지 |
+ | change | (event, newValue) | 컴포넌트 change 이벤트 발생 시 호출  |
 
diff --git a/docs/views/radio/example/Default.vue b/docs/views/radio/example/Default.vue
@@ -1,17 +1,18 @@
 <template>
   <div class="case">
-    <EvRadio
+    <p class="case-title">Common</p>
+    <ev-radio
       v-model="radio1"
       label="Option A"
-    >Radio Option A</EvRadio>
-    <EvRadio
+    >Radio Option A</ev-radio>
+    <ev-radio
       v-model="radio1"
       label="Option B"
-    >Radio Option B</EvRadio>
-    <EvRadio
+    >Radio Option B</ev-radio>
+    <ev-radio
       v-model="radio1"
       label="Option C"
-    >Radio Option C</EvRadio>
+    >Radio Option C</ev-radio>
     <div class="description">
       <span class="badge">
         Selected Value
@@ -21,35 +22,35 @@
   </div>
   <div class="case">
     <p class="case-title">Disabled</p>
-    <EvRadio
+    <ev-radio
       v-model="radio2"
       label="Option A"
       disabled
     />
-    <EvRadio
+    <ev-radio
       v-model="radio2"
       label="Option B"
       disabled
     />
-    <EvRadio
+    <ev-radio
       v-model="radio2"
       label="Option C"
       disabled
     />
   </div>
   <div class="case">
     <p class="case-title">Event</p>
-    <EvRadio
+    <ev-radio
       v-model="radio3"
       label="Option A"
       @change="changeRadio"
     />
-    <EvRadio
+    <ev-radio
       v-model="radio3"
       label="Option B"
       @change="changeRadio"
     />
-    <EvRadio
+    <ev-radio
       v-model="radio3"
       label="Option C"
       @change="changeRadio"

diff --git a/docs/views/radio/example/RadioGroup.vue b/docs/views/radio/example/RadioGroup.vue
@@ -1,12 +1,12 @@
 <template>
   <div class="case">
-    <EvRadioGroup
+    <ev-radio-group
       v-model="radioGroup1"
     >
-      <EvRadio label="Option A" />
-      <EvRadio label="Option B" />
-      <EvRadio label="Option C" />
-    </EvRadioGroup>
+      <ev-radio label="Option A" />
+      <ev-radio label="Option B" />
+      <ev-radio label="Option C" />
+    </ev-radio-group>
     <div class="description">
       <span class="badge">
         Selected Value
@@ -16,14 +16,14 @@
   </div>
   <div class="case">
     <p class="case-title">Event</p>
-    <EvRadioGroup
+    <ev-radio-group
       v-model="radioGroup2"
       @change="changeRadioGroup"
     >
-      <EvRadio label="Option A" />
-      <EvRadio label="Option B" />
-      <EvRadio label="Option C" />
-    </EvRadioGroup>
+      <ev-radio label="Option A" />
+      <ev-radio label="Option B" />
+      <ev-radio label="Option C" />
+    </ev-radio-group>
     <div class="description">
       <span class="badge">
         Change Event

diff --git a/docs/views/radio/index.vue b/docs/views/radio/index.vue
@@ -18,8 +18,8 @@
 <script>
 import { defineAsyncComponent } from 'vue';
 import { parseComponent } from 'vue-template-compiler';
-import Example from '../../components/Example';
-import MarkdownView from '../../components/MarkdownView';
+import Example from 'docs/components/Example';
+import MarkdownView from 'docs/components/MarkdownView';
 import Default from './example/Default';
 import DefaultRaw from '!!raw-loader!./example/Default';
 import RadioGroup from './example/RadioGroup';
@@ -38,7 +38,7 @@ export default {
     const components = [
       {
         title: 'Default',
-        description: '여러 선택지 중 하나를 고르는 컴포넌트입니다. 라디오 버튼 특성상 하나의 요소만 사용할 수 없으며, <evRadioGroup>을 활용하는 것을 권장합니다.',
+        description: '여러 선택지 중 하나를 고르는 컴포넌트입니다. 라디오 버튼 특성상 하나의 요소만 사용할 수 없으며, <ev-radio-group>을 활용하는 것을 권장합니다.',
         component: defineAsyncComponent(() => Promise.resolve(Default)),
         url: './docs/views/radio/example/Default.vue',
         codeText: {
@@ -48,7 +48,7 @@ export default {
       },
       {
         title: 'Radio Group',
-        description: '<evRadio>를 그룹지어 사용할 수 있습니다.',
+        description: '<ev-radio>를 그룹지어 사용할 수 있습니다.',
         component: defineAsyncComponent(() => Promise.resolve(RadioGroup)),
         url: './docs/views/radio/example/RadioGroup.vue',
         codeText: {

diff --git a/docs/views/textField/api/textfield.md b/docs/views/textField/api/textfield.md
@@ -0,0 +1,44 @@
+### Desc
+- 태그는 &lt;ev-textfield&gt;(이하 <텍스트필드>)으로 정의
+
+```
+<ev-textfield
+  옵션
+/>
+```
+- <텍스트필드>에서 바인딩 옵션 설정으로 의도에 맞는 텍스트필드 구현
+- 기본 설정 스타일
+```css
+width: 100%;
+/* type = text, password */
+height: 35px;
+/* type = textarea */
+height: 100px;
+```
+
+
+### Props
+
+| 이름 | 타입 | 디폴트 | 설명 | 종류 |
+| --- | ---- | ----- | ---- | --- |
+| v-model | null | String, Number | 컴포넌트 입력 값 | |
+| type | String | 'text' | 타입 설정 | 'text', 'password', 'textarea' |
+| 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 이벤트 발생 시 호출 |