From d743482f207ebf5927c0db39aefe1d3b8a2ad045 Mon Sep 17 00:00:00 2001
From: yell <yell@ex-em.com>
Date: Mon, 31 May 2021 09:19:55 +0900
Subject: [PATCH] =?UTF-8?q?[#817][3.0]=20TextField=20=EC=95=84=EC=9D=B4?=
 =?UTF-8?q?=EC=BD=98=20=EC=84=A4=EC=A0=95=20=EC=B6=94=EA=B0=80=20#########?=
 =?UTF-8?q?##############=20-=20slot=EC=9D=84=20=EC=9D=B4=EC=9A=A9?=
 =?UTF-8?q?=ED=95=9C=20TextField=20=EB=82=B4=EC=97=90=20Prefix,=20Suffix?=
 =?UTF-8?q?=20=EC=95=84=EC=9D=B4=EC=BD=98=20=EC=84=A4=EC=A0=95=20-=20Icon?=
 =?UTF-8?q?=20=EC=98=88=EC=A0=9C=20=EC=B6=94=EA=B0=80=20-=20md=20=ED=8C=8C?=
 =?UTF-8?q?=EC=9D=BC=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/views/textField/api/textField.md  |  8 +++
 docs/views/textField/example/Icon.vue  | 86 ++++++++++++++++++++++++++
 docs/views/textField/props.js          |  7 +++
 src/components/textField/TextField.vue | 39 ++++++++++++
 4 files changed, 140 insertions(+)
 create mode 100644 docs/views/textField/example/Icon.vue

diff --git a/docs/views/textField/api/textField.md b/docs/views/textField/api/textField.md
index 4d424de64..d7ae7fccc 100644
--- a/docs/views/textField/api/textField.md
+++ b/docs/views/textField/api/textField.md
@@ -15,6 +15,14 @@ height: 35px;
 /* type = textarea */
 height: 100px;
 ```
+- '#icon-prefix', '#icon-suffix' 을 지정해서 <텍스트필드> 내 아이콘 표시 가능
+```
+<ev-text-field>
+    <template #icon-prefix>
+        <ev-icon icon="ev-icon-search"></ev-icon>
+    </template>
+</ev-text-field>
+```
  
 
 ### Props
diff --git a/docs/views/textField/example/Icon.vue b/docs/views/textField/example/Icon.vue
new file mode 100644
index 000000000..0455df7bd
--- /dev/null
+++ b/docs/views/textField/example/Icon.vue
@@ -0,0 +1,86 @@
+<template>
+  <div class="case">
+    <p class="case-title">Prefix</p>
+    <ev-text-field
+      v-model="modelValue1"
+      placeholder="Please enter the content"
+      type="text"
+    >
+      <template #icon-prefix>
+        <ev-icon icon="ev-icon-search"></ev-icon>
+      </template>
+    </ev-text-field>
+    <div class="description">
+      <span class="badge yellow">
+        type="text"
+      </span>
+      <span class="badge">
+        Text Field Value
+      </span>
+      {{ modelValue1 }}
+    </div>
+  </div>
+  <div class="case">
+    <p class="case-title">Suffix</p>
+    <ev-text-field
+      v-model="modelValue2"
+      placeholder="Please enter the content"
+      type="text"
+    >
+      <template #icon-suffix>
+        <ev-icon icon="ev-icon-calendar"></ev-icon>
+      </template>
+    </ev-text-field>
+    <div class="description">
+      <span class="badge yellow">
+        type="text"
+      </span>
+      <span class="badge">
+        Text Field Value
+      </span>
+      {{ modelValue2 }}
+    </div>
+  </div>
+  <div class="case">
+    <p class="case-title">Prefix & Suffix</p>
+    <ev-text-field
+      v-model="modelValue3"
+      placeholder="Please enter the content"
+      type="text"
+    >
+      <template #icon-prefix>
+        <ev-icon icon="ev-icon-search"></ev-icon>
+      </template>
+      <template #icon-suffix>
+        <ev-icon icon="ev-icon-calendar"></ev-icon>
+      </template>
+    </ev-text-field>
+    <div class="description">
+      <span class="badge yellow">
+        type="text"
+      </span>
+      <span class="badge">
+        Text Field Value
+      </span>
+      {{ modelValue3 }}
+    </div>
+  </div>
+</template>
+
+<script>
+import { ref } from 'vue';
+
+export default {
+  setup() {
+    const modelValue1 = ref();
+    const modelValue2 = ref();
+    const modelValue3 = ref();
+
+    return {
+      modelValue1,
+      modelValue2,
+      modelValue3,
+    };
+  },
+};
+</script>
diff --git a/docs/views/textField/props.js b/docs/views/textField/props.js
index 34cc1ed79..2d41b59bb 100644
--- a/docs/views/textField/props.js
+++ b/docs/views/textField/props.js
@@ -8,6 +8,8 @@ import Search from './example/Search';
 import SearchRaw from '!!raw-loader!./example/Search';
 import Textarea from './example/Textarea';
 import TextareaRaw from '!!raw-loader!./example/Textarea';
+import Icon from './example/Icon';
+import IconRaw from '!!raw-loader!./example/Icon';
 
 export default {
   mdText,
@@ -27,6 +29,11 @@ export default {
       component: Search,
       parsedData: parseComponent(SearchRaw),
     },
+    Icon: {
+      description: 'TextField 내에 Prefix, Suffix 아이콘 설정이 가능한 input 컴포넌트입니다.',
+      component: Icon,
+      parsedData: parseComponent(IconRaw),
+    },
     Textarea: {
       description: '여러 줄의 문장을 입력할 수 있는 input 컴포넌트입니다.',
       component: Textarea,
diff --git a/src/components/textField/TextField.vue b/src/components/textField/TextField.vue
index 9d9549a40..ee2e153c3 100644
--- a/src/components/textField/TextField.vue
+++ b/src/components/textField/TextField.vue
@@ -9,6 +9,9 @@
       'show-password': showPassword,
       'show-maxlength': showMaxLength,
       [`type-${type}`]: !!type,
+      'ev-text-field-prefix': $slots['icon-prefix'],
+      'ev-text-field-suffix': $slots['icon-suffix'],
+      'ev-text-field-prefix-suffix': $slots['icon-prefix'] && $slots['icon-suffix'],
     }"
   >
     <div
@@ -67,6 +70,18 @@
         >
           <i class="ev-icon-search"/>
         </span>
+        <span
+          v-if="$slots['icon-suffix']"
+          class="ev-text-field-icon icon-suffix"
+        >
+          <slot name="icon-suffix"/>
+        </span>
+        <span
+          v-if="$slots['icon-prefix']"
+          class="ev-text-field-icon icon-prefix"
+        >
+          <slot name="icon-prefix"/>
+        </span>
       </template>
     </div>
     <div
@@ -331,4 +346,28 @@ $icon-width: 14px !default;
     }
   }
 }
+@include state('ev-text-field-suffix') {
+  .ev-input {
+    padding: 0 #{$input-default-padding + $icon-width} 0 $input-default-padding;
+  }
+  .icon-suffix {
+    font-size: 15px;
+    cursor: default;
+  }
+}
+@include state('ev-text-field-prefix') {
+  .ev-input {
+    padding: 0 $input-default-padding 0 #{$input-default-padding + $icon-width};
+  }
+  .icon-prefix {
+    left: 7px;
+    font-size: 15px;
+    cursor: default;
+  }
+}
+@include state('ev-text-field-prefix-suffix') {
+  .ev-input {
+    padding: 0 #{$input-default-padding + $icon-width};
+  }
+}
 </style>