[#646, #663][3.0] Select, DatePicker 컴포넌트 드랍다운 로직 수정 (#705)

* [#646] Select 컴포넌트 버그 수정 및 리펙토링 ################ - Select 컴포넌트의 드랍박스의 스펙 변경 - Vue3의 teleport 로직으로 인풋박스의 움직임을 감지하지못하여 dom nested 구조로 변경 - 기본적으로 인풋박스 위치 아래로 드랍다운됨 - 브라우저 높이 기준으로 드랍박스가 드랍다운되었을 때, 브라우저 영역을 벗어나는 경우는 인풋박스의 상단으로 드랍업되도록 로직 수정 - 셀렉스 컴포넌트의 여러 기능으로 인하여 드랍박스의 위치가 변경되는 경우 nextTick 이후에 렌더링 위치를 재조정하는 로직 추가 - 컴포넌트 싱글, 멀티인 경우 레이아웃, css 개선 - 드랍박스의 리스트에 텍스트뿐만 아니라 아이콘이 위치할 수 있도록 기능 개선 - EVUI DOCS 설명 수정 및 아이콘 부분 추가 * [#663] DatePicker 컴포넌트 드랍다운로직 수정 ################ - DatePicker 컴포넌트의 드랍박스의 스펙 변경 - 기본적으로 인풋박스 위치 아래로 드랍다운됨 - 브라우저 높이 기준으로 드랍박스가 드랍다운되었을 때, 브라우저 영역을 벗어나는 경우는 인풋박스의 상단으로 드랍업되도록 로직 수정 - 셀렉스 컴포넌트의 여러 기능으로 인하여 드랍박스의 위치가 변경되는 경우 nextTick 이후에 렌더링 위치를 재조정하는 로직 추가 - 컴포넌트 레이아웃, css 개선 - CloseAll 시에 드랍박스 보이지 않게 로직 수정 * [#663] DatePicker 컴포넌트 드랍다운로직 수정 ################ - DatePicker css stylelint order error 수정
ex-em · Nov 10, 2020 · f29a430 · f29a430
1 parent 27066ec
commit f29a430
Show file tree

Hide file tree

Showing 8 changed files with 370 additions and 376 deletions.
diff --git a/docs/views/select/api/select.md b/docs/views/select/api/select.md
@@ -1,7 +1,7 @@
 
 >### Desc
  - 태그는 &lt;ev-select&gt;(이하 <셀렉트>)로 정의
- - &lt;ev-select&gt; 클릭시 나타나는 영역은 dropdown box(이하 <드랍다운 박스>)로 정의
+ - &lt;ev-select&gt; 클릭시 나타나는 영역은 dropBox(이하 <드랍박스>)로 정의
 
 ```
 <ev-select
@@ -13,13 +13,13 @@
  - <셀렉트> 컴포넌트는 `<input type="text" />` 를 래핑하는 구조를 가지고 있다.
  - <셀렉트> 컴포넌트를 클릭하였을 때, :items 속성에 1개 이상의 객체를 가진 배열이 존재하는 경우,
    하단에 선택할 리스트 데이터를 보여주는 <드랍다운 박스>가 나타난다.
- - <드랍다운 박스>가 열린 상태에서 <셀렉트>를 한번더 클릭할 시 <드랍다운 박스>는 사라진다. 
- - <드랍다운 박스>는 Vue 3의 `<teleport />` 기능을 사용하여 `body` DOM에 렌더링시킨다.
-   이 기능은 애플리케이션 UI를 Vue 앱 외부의 DOM으로 이동시키지만, 코드를 <셀렉트> 컴포넌트에서
-   관리하기 위함이다. 
+ - <드랍박스>가 열린 상태에서 <셀렉트>를 한번더 클릭할 시 <드랍다운 박스>는 사라진다. 
  - <셀렉트> 컴포넌트의 기본 width는 100%이다.
    다른 형태를 위해서는 ev-select 클래스에 스타일을 래핑해야한다.
- - 기본적으로 <드랍다운 박스>의 너비는 <셀렉트> 컴포넌트의 너비와 동일하게 맞춰져 있다.
+ - 기본적으로 <드랍박스>의 너비는 <셀렉트> 컴포넌트의 너비와 동일하게 맞춰져 있다.
+ - items 바인딩 값의 타입은 배열이며, 속성으로는 name, value, cls 이다.
+ - cls속성의 값으로 <드랍박스>의 <li> 내 아이콘을 추가할 수 있다.
+ - <드랍박스>는 기본적으로 인풋박스의 하단에 드랍다운되며, 브라우저 높이에 맞춰 <드랍박스>가 아래로 위치하는 경우 브라우저 화면을 넘어가는 경우 상단에 드랍업 된다.
 
 >### Props
 1) 셀렉트 사용 시

diff --git a/docs/views/select/example/Default.vue b/docs/views/select/example/Default.vue
@@ -72,6 +72,18 @@
       filterable
     />
   </div>
+  <div class="case">
+    <p class="case-title">Icon</p>
+    <ev-select
+      v-model="selectVal5"
+      :items="items5"
+      placeholder="Please select value."
+      @change="changeSelect1"
+    />
+    <div class="description">
+      val : {{ selectVal5 }}
+    </div>
+  </div>
 </template>
 
 <script>
@@ -185,6 +197,34 @@ export default {
     const isDisabled = ref(true);
     const disableSelect = () => { isDisabled.value = !isDisabled.value; };
 
+    const selectVal5 = ref();
+    const items5 = ref([
+      {
+        name: 'name0',
+        value: 'value0',
+        cls: 'ev-icon-query',
+      },
+      {
+        name: 'name1',
+        value: 'value1',
+      },
+      {
+        name: 'name2',
+        value: 'value2',
+        cls: '',
+      },
+      {
+        name: 'name3',
+        value: 'value3',
+        cls: 'ev-icon-bell',
+      },
+      {
+        name: 'name4',
+        value: 'value4',
+        cls: 'ev-icon-close2',
+      },
+    ]);
+
     return {
       selectVal1,
       items1,
@@ -200,6 +240,9 @@ export default {
       items4,
       isDisabled,
       disableSelect,
+
+      selectVal5,
+      items5,
     };
   },
 };

diff --git a/src/components/datePicker/DatePicker.vue b/src/components/datePicker/DatePicker.vue
@@ -6,32 +6,39 @@
     :class="{
       disabled,
     }"
-    @click="clickSelectInput"
   >
     <template v-if="mode === 'date' || 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="placeholder"
         :disabled="disabled"
+        @click="clickSelectInput"
         @keydown.enter.prevent="validateValue(currentValue)"
         @change="validateValue(currentValue)"
       />
     </template>
     <template v-else>
-      <input
-        type="text"
-        class="ev-input readonly"
-        readonly
-        :placeholder="placeholder"
-        :disabled="disabled"
-      />
-      <template
-        v-if="mode === 'dateMulti'
+      <div class="ev-date-picker-tag-wrapper">
+        <span class="ev-date-picker-prefix-icon">
+          <i class="ev-icon-calendar" />
+        </span>
+        <input
+          type="text"
+          class="ev-input readonly"
+          readonly
+          :placeholder="placeholder"
+          :disabled="disabled"
+          @click="clickSelectInput"
+        />
+        <template
+          v-if="mode === 'dateMulti'
           && (options.multiType === 'date' || !options.tagShorten)"
-      >
-        <div class="ev-select-tag-wrapper">
+        >
           <div
             v-for="(item, idx) in mv"
             :key="`${item}_${idx}`"
@@ -42,18 +49,13 @@
             <span
               v-if="options.multiType === 'date'"
               class="ev-tag-suffix"
-              @click.stop="removeMv(item)"
+              @click.stop="[removeMv(item), changeDropboxPosition()]"
             >
-              <i class="ev-tag-suffix-close ev-icon-error" />
-            </span>
+            <i class="ev-tag-suffix-close ev-icon-error" />
+          </span>
           </div>
-        </div>
-      </template>
-      <template v-else>
-        <div
-          v-show="mv[0] && mv[mv.length - 1]"
-          class="ev-select-tag-wrapper"
-        >
+        </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>
@@ -63,45 +65,42 @@
           <div class="ev-select-tag num">
             <span class="ev-tag-name"> {{ mv[mv.length - 1] }} </span>
           </div>
-        </div>
-      </template>
+        </template>
+      </div>
     </template>
-    <span class="ev-date-picker-prefix-icon">
-      <i class="ev-icon-calendar" />
-    </span>
     <template v-if="clearable">
       <span
         v-show="isClearableIcon"
         class="ev-input-suffix"
-        @click.stop="removeAllMv"
+        @click.stop="[removeAllMv(), clickOutsideDropbox()]"
       >
         <i class="ev-icon-error" />
       </span>
     </template>
-  </div>
-
-  <teleport to="#ev-date-picker-dropdown-modal">
-    <div
-      v-if="isDropbox"
-      class="ev-date-picker-dropdown"
-      :class="mode"
-      :style="dropdownStyle"
-    >
-      <ev-calendar
-        key="fromCalendar"
-        v-model="mv"
-        :mode="mode"
-        :month-notation="monthNotation"
-        :day-of-the-week-notation="dayOfTheWeekNotation"
-        :options="options"
-      />
+    <div class="ev-date-picker-dropbox-wrapper">
+      <div
+        v-if="isDropbox"
+        ref="dropbox"
+        class="ev-date-picker-dropdown"
+        :class="mode"
+        :style="dropboxPosition"
+      >
+        <ev-calendar
+          key="fromCalendar"
+          v-model="mv"
+          :mode="mode"
+          :month-notation="monthNotation"
+          :day-of-the-week-notation="dayOfTheWeekNotation"
+          :options="options"
+        />
+      </div>
     </div>
-  </teleport>
+  </div>
 </template>
 
 <script>
 import { datePickerClickoutside as clickoutside } from '@/directives/clickoutside';
-import { useModel, useDropdown, usePosition } from './uses';
+import { useModel, useDropdown } from './uses';
 
 export default {
   name: 'EvDatePicker',
@@ -175,7 +174,6 @@ export default {
     const {
       mv,
       currentValue,
-      isDropbox,
       isClearableIcon,
       validateValue,
       removeAllMv,
@@ -184,26 +182,18 @@ export default {
     } = useModel();
 
     const {
+      isDropbox,
+      datePicker,
+      dropbox,
+      itemWrapper,
+      dropboxPosition,
       clickSelectInput,
       clickOutsideDropbox,
+      changeDropboxPosition,
     } = useDropdown({
-      isDropbox,
       currentValue,
     });
 
-    const {
-      datePicker,
-      itemWrapper,
-      dropdownStyle,
-      createDropdownEl,
-      observeDropbox,
-    } = usePosition({
-      isDropbox,
-    });
-
-    createDropdownEl();
-    observeDropbox();
-
     return {
       mv,
       currentValue,
@@ -214,14 +204,13 @@ export default {
       removeMv,
 
       isDropbox,
-      clickSelectInput,
-      clickOutsideDropbox,
-
       datePicker,
+      dropbox,
       itemWrapper,
-      dropdownStyle,
-      createDropdownEl,
-      observeDropbox,
+      dropboxPosition,
+      clickSelectInput,
+      clickOutsideDropbox,
+      changeDropboxPosition,
     };
   },
 };
@@ -247,7 +236,6 @@ export default {
   .ev-input {
     $calendar-icon-width: 30px;
     position: absolute;
-    top: 0;
     left: 0;
     height: 100%;
     padding: 0 $input-default-padding 0 $calendar-icon-width;
@@ -266,12 +254,13 @@ export default {
     align-items: center;
     cursor: pointer;
 
+
     &:hover {
       color: #409EFF;
     }
   }
 
-  .ev-select-tag-wrapper {
+  .ev-date-picker-tag-wrapper {
     $select-height: 35px;
     display: flex;
     width: 100%;
@@ -339,4 +328,9 @@ export default {
     }
   }
 }
+
+.ev-date-picker-dropbox-wrapper {
+  height: 0;
+  z-index: 100;
+}
 </style>