From 2b84a3159f4636839639550af4ae8f2ec78430f0 Mon Sep 17 00:00:00 2001
From: mjchoi <mjchoi@ex-em.com>
Date: Mon, 28 Feb 2022 16:45:07 +0900
Subject: [PATCH] =?UTF-8?q?[#1078]=20form=20=EC=9A=94=EC=86=8C=20=EB=A0=88?=
 =?UTF-8?q?=EC=9D=B4=EC=95=84=EC=9B=83=20=EA=B9=A8=EC=A7=90=20=EB=B2=84?=
 =?UTF-8?q?=EA=B7=B8=20=EC=88=98=EC=A0=95=20##########=20-=20`.ev-input`?=
 =?UTF-8?q?=20=EC=82=AC=EC=9A=A9=ED=95=98=EB=8A=94=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=EC=9D=98=20=EB=A0=88=EC=9D=B4=EC=95=84?=
 =?UTF-8?q?=EC=9B=83=20=EA=B9=A8=EC=A7=90=ED=98=84=EC=83=81=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                               |   2 +-
 src/components/datePicker/DatePicker.vue   | 205 +++++++++++----------
 src/components/datePicker/uses.js          |   4 +-
 src/components/inputNumber/InputNumber.vue |  49 ++---
 src/components/select/Select.vue           | 175 +++++++++---------
 src/components/select/uses.js              |   6 +-
 6 files changed, 232 insertions(+), 209 deletions(-)

diff --git a/package.json b/package.json
index 81d9a3aa6..6d72cd68b 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "evui",
-  "version": "3.3.6",
+  "version": "3.3.7",
   "description": "A EXEM Library project",
   "author": "exem <dev_client@ex-em.com>",
   "license": "MIT",
diff --git a/src/components/datePicker/DatePicker.vue b/src/components/datePicker/DatePicker.vue
index feeab66fe..5581269cd 100644
--- a/src/components/datePicker/DatePicker.vue
+++ b/src/components/datePicker/DatePicker.vue
@@ -7,114 +7,121 @@
       disabled : $props.disabled,
     }"
   >
-    <template v-if="$props.mode === 'date' || $props.mode === 'dateTime'">
-      <span class="ev-date-picker-prefix-icon">
-        <i class="ev-icon-calendar" />
-      </span>
-      <input
-        v-model.trim="currentValue"
-        type="text"
-        class="ev-input"
-        :placeholder="$props.placeholder"
-        :disabled="$props.disabled"
-        @click="clickSelectInput"
-        @keydown.enter.prevent="validateValue(currentValue)"
-        @change="validateValue(currentValue)"
-      />
-    </template>
-    <template v-else>
-      <div
-          class="ev-date-picker-tag-wrapper"
-          @click="clickSelectInput"
-      >
+    <div
+      ref="datePickerWrapper"
+      class="ev-date-picker__wrapper"
+    >
+      <template v-if="$props.mode === 'date' || $props.mode === 'dateTime'">
         <span class="ev-date-picker-prefix-icon">
           <i class="ev-icon-calendar" />
         </span>
         <input
+          v-model.trim="currentValue"
           type="text"
-          class="ev-input readonly"
-          readonly
+          class="ev-input"
           :placeholder="$props.placeholder"
           :disabled="$props.disabled"
+          @click="clickSelectInput"
+          @keydown.enter.prevent="validateValue(currentValue)"
+          @change="validateValue(currentValue)"
         />
-        <template
-          v-if="$props.mode === 'dateMulti'
-          && ($props.options.multiType === 'date' || !$props.options.tagShorten)"
+      </template>
+      <template v-else>
+        <div
+          class="ev-date-picker-tag-wrapper"
+          @click="clickSelectInput"
         >
-          <div
-            v-for="(item, idx) in mv"
-            :key="`${item}_${idx}`"
-            class="ev-select-tag"
-            :class="{ num: $props.options.multiType !== 'date' }"
-          >
-            <span class="ev-tag-name"> {{ item }} </span>
-            <span
-              v-if="$props.options.multiType === 'date'"
-              class="ev-tag-suffix"
-              @click.stop="[removeMv(item), changeDropboxPosition()]"
-            >
-            <i class="ev-tag-suffix-close ev-icon-error" />
+          <span class="ev-date-picker-prefix-icon">
+            <i class="ev-icon-calendar" />
           </span>
-          </div>
-        </template>
-        <template v-else-if="mv[0] && mv[mv.length - 1]">
-          <div class="ev-select-tag num">
-            <span class="ev-tag-name"> {{ mv[0] }} </span>
-          </div>
-          <div class="ev-select-tag num">
-            <span class="ev-tag-name"> ~ </span>
-          </div>
-          <div class="ev-select-tag num">
-            <span class="ev-tag-name"> {{ mv[mv.length - 1] }} </span>
-          </div>
-        </template>
-      </div>
-    </template>
-    <template v-if="$props.clearable">
-      <span
-        v-show="isClearableIcon"
-        class="ev-input-suffix"
-        @click.stop="[removeAllMv(), clickOutsideDropbox()]"
-      >
-        <i class="ev-icon-error" />
-      </span>
-    </template>
-    <div class="ev-date-picker-dropbox-wrapper">
-      <div
-        v-if="isDropbox"
-        ref="dropbox"
-        class="ev-date-picker-dropdown"
-        :class="$props.mode"
-        :style="dropboxPosition"
-      >
-        <div
-            v-if="usedShortcuts.length"
-            class="ev-date-picker-dropbox__button-layout">
-          <ev-button-group>
-            <ev-button
-               v-for="button in usedShortcuts"
-               :key="button.key"
-               :type="button.isActive ? 'primary' : 'default'"
-               @click="clickShortcut(button.key)"
+          <input
+            type="text"
+            class="ev-input readonly"
+            readonly
+            :placeholder="$props.placeholder"
+            :disabled="$props.disabled"
+          />
+          <template
+            v-if="$props.mode === 'dateMulti'
+            && ($props.options.multiType === 'date' || !$props.options.tagShorten)"
+          >
+            <div
+              v-for="(item, idx) in mv"
+              :key="`${item}_${idx}`"
+              class="ev-select-tag"
+              :class="{ num: $props.options.multiType !== 'date' }"
             >
-              {{ button.label }}
-            </ev-button>
-          </ev-button-group>
+              <span class="ev-tag-name"> {{ item }} </span>
+              <span
+                v-if="$props.options.multiType === 'date'"
+                class="ev-tag-suffix"
+                @click.stop="[removeMv(item), changeDropboxPosition()]"
+              >
+              <i class="ev-tag-suffix-close ev-icon-error" />
+            </span>
+            </div>
+          </template>
+          <template v-else-if="mv[0] && mv[mv.length - 1]">
+            <div class="ev-select-tag num">
+              <span class="ev-tag-name"> {{ mv[0] }} </span>
+            </div>
+            <div class="ev-select-tag num">
+              <span class="ev-tag-name"> ~ </span>
+            </div>
+            <div class="ev-select-tag num">
+              <span class="ev-tag-name"> {{ mv[mv.length - 1] }} </span>
+            </div>
+          </template>
         </div>
+      </template>
+      <template v-if="$props.clearable">
+        <span
+          v-show="isClearableIcon"
+          class="ev-input-suffix"
+          @click.stop="[removeAllMv(), clickOutsideDropbox()]"
+        >
+          <i class="ev-icon-error" />
+        </span>
+      </template>
+      <div class="ev-date-picker-dropbox-wrapper">
         <div
+          v-if="isDropbox"
+          ref="dropbox"
+          class="ev-date-picker-dropdown"
+          :class="$props.mode"
+          :style="dropboxPosition"
+        >
+          <div
+            v-if="usedShortcuts.length"
+            class="ev-date-picker-dropbox__button-layout"
+          >
+            <ev-button-group>
+              <ev-button
+                v-for="button in usedShortcuts"
+                :key="button.key"
+                :type="button.isActive ? 'primary' : 'default'"
+                @click="clickShortcut(button.key)"
+              >
+                {{ button.label }}
+              </ev-button>
+            </ev-button-group>
+          </div>
+          <div
             v-if="usedShortcuts.length"
             class="ev-date-picker-dropbox__divider"
-        />
-        <div
-            :class="{ 'ev-date-picker-dropbox__calendar':usedShortcuts.length }">
-          <ev-calendar
-            key="fromCalendar"
-            v-model="mv"
-            :mode="$props.mode"
-            :month-notation="$props.monthNotation"
-            :day-of-the-week-notation="$props.dayOfTheWeekNotation"
-            :options="$props.options"
           />
+          <div
+            :class="{ 'ev-date-picker-dropbox__calendar':usedShortcuts.length }"
+          >
+            <ev-calendar
+              key="fromCalendar"
+              v-model="mv"
+              :mode="$props.mode"
+              :month-notation="$props.monthNotation"
+              :day-of-the-week-notation="$props.dayOfTheWeekNotation"
+              :options="$props.options"
+            />
+          </div>
         </div>
       </div>
     </div>
@@ -230,6 +237,7 @@ export default {
     const {
       isDropbox,
       datePicker,
+      datePickerWrapper,
       dropbox,
       itemWrapper,
       dropboxPosition,
@@ -261,6 +269,7 @@ export default {
 
       isDropbox,
       datePicker,
+      datePickerWrapper,
       dropbox,
       itemWrapper,
       dropboxPosition,
@@ -279,13 +288,18 @@ export default {
 @import '../../style/index.scss';
 
 .ev-date-picker {
-  $select-height: 35px;
+  $select-height: $input-default-height;
   display: block;
   position: relative;
   width: 100%;
-  min-height: $select-height;
 
   @import '../../style/components/input.scss';
+
+  &__wrapper {
+    position: relative;
+    min-height: $select-height;
+  }
+
   .ev-input {
     $calendar-icon-width: 30px;
     position: absolute;
@@ -312,15 +326,12 @@ export default {
     height: 100%;
     align-items: center;
     cursor: pointer;
-
-
     &:hover {
       color: #409EFF;
     }
   }
 
   .ev-date-picker-tag-wrapper {
-    $select-height: 35px;
     display: flex;
     width: 100%;
     height: 100%;
diff --git a/src/components/datePicker/uses.js b/src/components/datePicker/uses.js
index 26e177720..ac53467fb 100644
--- a/src/components/datePicker/uses.js
+++ b/src/components/datePicker/uses.js
@@ -125,6 +125,7 @@ export const useDropdown = () => {
 
   const isDropbox = ref(false);
   const datePicker = ref(null);
+  const datePickerWrapper = ref(null);
   const dropbox = ref(null);
   const itemWrapper = ref(null);
   const dropboxPosition = reactive({
@@ -138,7 +139,7 @@ export const useDropdown = () => {
    */
   const changeDropboxPosition = async () => {
     await nextTick();
-    const datePickerRect = datePicker.value?.getBoundingClientRect();
+    const datePickerRect = datePickerWrapper.value?.getBoundingClientRect();
     const dropboxRect = dropbox.value?.getBoundingClientRect();
     const datePickerHeight = datePickerRect.height;
     const datePickerY = datePickerRect.y;
@@ -195,6 +196,7 @@ export const useDropdown = () => {
   return {
     isDropbox,
     datePicker,
+    datePickerWrapper,
     dropbox,
     itemWrapper,
     dropboxPosition,
diff --git a/src/components/inputNumber/InputNumber.vue b/src/components/inputNumber/InputNumber.vue
index 86699085f..cfedd4423 100644
--- a/src/components/inputNumber/InputNumber.vue
+++ b/src/components/inputNumber/InputNumber.vue
@@ -6,28 +6,30 @@
       readonly,
     }"
   >
-    <span
-      v-for="type in ['up', 'down']"
-      :key="`step-arrow-${type}`"
-      :class="['ev-input-number-icon', `step-${type}`]"
-      @click="stepValue(type)"
-    >
-      <i :class="`ev-icon-s-arrow-${type}`" />
-    </span>
-    <input
-      v-model.trim="currentValue"
-      class="ev-input"
-      type="text"
-      :placeholder="placeholder"
-      :disabled="disabled"
-      :readonly="readonly"
-      @focus="focusInput"
-      @blur="blurInput"
-      @change="changeMv"
-      @keydown.up.prevent="stepValue('up')"
-      @keydown.down.prevent="stepValue('down')"
-      @keydown.enter.prevent="validateValue(currentValue)"
-    />
+    <div class="ev-input-number__wrapper">
+      <span
+        v-for="type in ['up', 'down']"
+        :key="`step-arrow-${type}`"
+        :class="['ev-input-number-icon', `step-${type}`]"
+        @click="stepValue(type)"
+      >
+        <i :class="`ev-icon-s-arrow-${type}`" />
+      </span>
+      <input
+        v-model.trim="currentValue"
+        class="ev-input"
+        type="text"
+        :placeholder="placeholder"
+        :disabled="disabled"
+        :readonly="readonly"
+        @focus="focusInput"
+        @blur="blurInput"
+        @change="changeMv"
+        @keydown.up.prevent="stepValue('up')"
+        @keydown.down.prevent="stepValue('down')"
+        @keydown.enter.prevent="validateValue(currentValue)"
+      />
+    </div>
   </div>
 </template>
 
@@ -136,6 +138,9 @@ export default {
       }
     }
   }
+  &__wrapper {
+    position: relative;
+  }
   .ev-input {
     $number-arrow-btn-width: 30px;
     padding: 0 #{$number-arrow-btn-width + $input-default-padding} 0 $input-default-padding;
diff --git a/src/components/select/Select.vue b/src/components/select/Select.vue
index 8715bfda3..7d341b78c 100644
--- a/src/components/select/Select.vue
+++ b/src/components/select/Select.vue
@@ -8,31 +8,11 @@
       disabled,
     }"
   >
-    <template v-if="!multiple">
-      <span
-        v-if="!clearable || !isClearableIcon"
-        class="ev-input-suffix"
-        @click="clickSelectInput"
-      >
-        <i
-          class="ev-input-suffix-arrow ev-icon-s-arrow-down"
-          :class="{
-            selected: isDropbox,
-          }"
-        />
-      </span>
-      <input
-        v-model="selectedModel"
-        type="text"
-        class="ev-input"
-        readonly
-        :placeholder="computedPlaceholder"
-        :disabled="disabled"
-        @click="clickSelectInput"
-      />
-    </template>
-    <template v-else>
-      <div class="ev-select-tag-wrapper">
+    <div
+      ref="selectWrapper"
+      class="ev-select__wrapper"
+    >
+      <template v-if="!multiple">
         <span
           v-if="!clearable || !isClearableIcon"
           class="ev-input-suffix"
@@ -46,66 +26,90 @@
           />
         </span>
         <input
+          v-model="selectedModel"
           type="text"
-          class="ev-input multiple"
+          class="ev-input"
           readonly
           :placeholder="computedPlaceholder"
           :disabled="disabled"
           @click="clickSelectInput"
         />
-        <template v-if="!collapseTags">
-          <div
-            v-for="item in selectedModel"
-            :key="item"
-            class="ev-select-tag"
+      </template>
+      <template v-else>
+        <div class="ev-select-tag-wrapper">
+          <span
+            v-if="!clearable || !isClearableIcon"
+            class="ev-input-suffix"
+            @click="clickSelectInput"
           >
-            <span class="ev-tag-name">
-              {{ item.name }}
-            </span>
-            <span
-              class="ev-tag-suffix"
-              @click.stop="[removeMv(item.value), changeDropboxPosition()]"
+            <i
+              class="ev-input-suffix-arrow ev-icon-s-arrow-down"
+              :class="{
+                selected: isDropbox,
+              }"
+            />
+          </span>
+          <input
+            type="text"
+            class="ev-input multiple"
+            readonly
+            :placeholder="computedPlaceholder"
+            :disabled="disabled"
+            @click="clickSelectInput"
+          />
+          <template v-if="!collapseTags">
+            <div
+              v-for="item in selectedModel"
+              :key="item"
+              class="ev-select-tag"
             >
-              <i class="ev-tag-suffix-close ev-icon-error" />
-            </span>
-          </div>
-        </template>
-        <template v-else>
-          <div
-            v-if="selectedModel.length"
-            class="ev-select-tag"
-          >
-            <span class="ev-tag-name">
-              {{ selectedModel[0].name }}
-            </span>
-            <span
-              class="ev-tag-suffix"
-              @click.stop="[removeMv(selectedModel[0].value), changeDropboxPosition()]"
+              <span class="ev-tag-name">
+                {{ item.name }}
+              </span>
+              <span
+                class="ev-tag-suffix"
+                @click.stop="[removeMv(item.value), changeDropboxPosition()]"
+              >
+                <i class="ev-tag-suffix-close ev-icon-error" />
+              </span>
+            </div>
+          </template>
+          <template v-else>
+            <div
+              v-if="selectedModel.length"
+              class="ev-select-tag"
             >
-              <i class="ev-tag-suffix-close ev-icon-error" />
-            </span>
-          </div>
-          <div
-            v-if="selectedModel.length > 1"
-            class="ev-select-tag num"
-          >
-            <span class="ev-tag-name">
-              + {{ selectedModel.length - 1 }}
-            </span>
-          </div>
-        </template>
-      </div>
-    </template>
-    <template v-if="clearable">
-      <span
-        v-show="isClearableIcon"
-        class="ev-input-suffix"
-        @click.stop="[removeAllMv(), clickOutsideDropbox()]"
-      >
-        <i class="ev-icon-error" />
-      </span>
-    </template>
-    <div class="ev-select-dropbox-wrapper">
+              <span class="ev-tag-name">
+                {{ selectedModel[0].name }}
+              </span>
+              <span
+                class="ev-tag-suffix"
+                @click.stop="[removeMv(selectedModel[0].value), changeDropboxPosition()]"
+              >
+                <i class="ev-tag-suffix-close ev-icon-error" />
+              </span>
+            </div>
+            <div
+              v-if="selectedModel.length > 1"
+              class="ev-select-tag num"
+            >
+              <span class="ev-tag-name">
+                + {{ selectedModel.length - 1 }}
+              </span>
+            </div>
+          </template>
+        </div>
+      </template>
+      <template v-if="clearable">
+        <span
+          v-show="isClearableIcon"
+          class="ev-input-suffix"
+          @click.stop="[removeAllMv(), clickOutsideDropbox()]"
+        >
+          <i class="ev-icon-error" />
+        </span>
+      </template>
+      <div class="ev-select-dropbox-wrapper">
       <div
         v-if="isDropbox"
         ref="dropbox"
@@ -153,6 +157,7 @@
         </div>
       </div>
     </div>
+    </div>
   </div>
 </template>
 
@@ -228,6 +233,7 @@ export default {
 
     const {
       select,
+      selectWrapper,
       dropbox,
       itemWrapper,
       isDropbox,
@@ -251,6 +257,7 @@ export default {
       removeAllMv,
 
       select,
+      selectWrapper,
       dropbox,
       itemWrapper,
       isDropbox,
@@ -271,21 +278,18 @@ export default {
 @import '../../style/index.scss';
 
 .ev-select {
-  $select-height: 35px;
+  $select-height: $input-default-height;
   display: block;
   position: relative;
   width: 100%;
-  min-height: $select-height;
   border-radius: $default-radius;
   cursor: pointer;
 
-  &.disabled {
-    background-color: #F5F7FA;
-    border-color: #E4E7ED;
-    color: #C0C4CC;
-  }
-
   @import '../../style/components/input.scss';
+
+  &__wrapper {
+    position: relative;
+  }
   .ev-input {
     padding: 0 30px 0 15px;
     border: 1px solid #B2B2B2;
@@ -320,7 +324,6 @@ export default {
   }
 
   .ev-select-tag-wrapper {
-    $select-height: 35px;
     display: flex;
     width: 100%;
     height: 100%;
@@ -371,7 +374,7 @@ export default {
 }
 
 .ev-select-dropbox {
-  $select-height: 35px;
+  $select-height: $input-default-height;
   position: absolute;
   width: 100%;
   max-height: $select-height * 5;
diff --git a/src/components/select/uses.js b/src/components/select/uses.js
index a433a8487..e65ea23e8 100644
--- a/src/components/select/uses.js
+++ b/src/components/select/uses.js
@@ -107,6 +107,7 @@ export const useDropdown = (param) => {
   const isDropbox = ref(false);
   const filterTextRef = ref(props.filterText);
   const select = ref(null);
+  const selectWrapper = ref(null);
   const dropbox = ref(null);
   const itemWrapper = ref(null);
   const dropboxPosition = reactive({
@@ -131,8 +132,8 @@ export const useDropdown = (param) => {
    */
   const changeDropboxPosition = async () => {
     await nextTick();
-    const selectHeight = select.value?.getBoundingClientRect().height;
-    const selectY = select.value?.getBoundingClientRect().y;
+    const selectHeight = selectWrapper.value?.getBoundingClientRect().height;
+    const selectY = selectWrapper.value?.getBoundingClientRect().y;
     const dropboxHeight = dropbox.value?.getBoundingClientRect().height;
     const docHeight = document.documentElement.clientHeight;
     if (docHeight < selectY + selectHeight + dropboxHeight) {
@@ -245,6 +246,7 @@ export const useDropdown = (param) => {
 
   return {
     select,
+    selectWrapper,
     dropbox,
     itemWrapper,
     isDropbox,