evui 2.0.9 → 2.1.2

package/src/components/tabs/tabs.vue

@@ -1,8 +1,6 @@
 <template>
   <div class="ev-tabs">
-    <div
-      class="ev-tabs-header"
-    >
+    <div class="ev-tabs-header">
       <div
         :class="{'ev-tabs-scroll': true, 'scrollable': isActiveScroll}"
       >
@@ -47,25 +45,24 @@
               :style="`min-width: ${minTabWidth}px;`"
               :draggable="true"
               @click="changeTab(tab.value)"
-              @mouseenter="toggleCloseIcon($event, true)"
-              @mouseleave="toggleCloseIcon($event, false)"
               @dragstart="onDragStart($event, tab.value)"
               @dragover.prevent="onDragOver($event, tab.value)"
               @dragend.prevent="onDragEnd"
             >
               <span
+                :style="`font-size: ${titleSize}px;`"
                 class="ev-tabs-item-content"
               >
                 <ev-icon
                   v-if="tab.icon"
                   :class="tab.icon"
-                  style="margin-right: 3px; font-size: 10px;"
+                  style="margin-right: 3px; font-size: 12px;"
                 />
                 {{ tab.title }}
                 <ev-icon
                   v-if="!disableRemoveTab && tabList.length > 1"
                   class="ei-close ev-tab-close-btn"
-                  style="margin-left: 3px; font-size: 10px;"
+                  style="margin-left: 3px; font-size: 12px;"
                   @click.native.stop="removeTab(tab.value)"
                 />
               </span>
@@ -75,10 +72,8 @@
         </div>
       </div>
     </div>
-    <div
-      class="ev-tabs-body"
-    >
-      <slot/>
+    <div class="ev-tabs-body">
+      <slot />
     </div>
   </div>
 </template>
@@ -86,24 +81,46 @@
 <script>
   export default {
     props: {
+      /**
+       * 탭 목록
+       */
       value: {
         type: Array,
         default() {
           return [];
         },
       },
+      /**
+       * 탭 이동 가능 유무
+       */
       disableMoveTab: {
         type: Boolean,
         default: false,
       },
+      /**
+       * 탭 제거 가능 유무
+       */
       disableRemoveTab: {
         type: Boolean,
         default: false,
       },
+      /**
+       * 탭 헤더 너비
+       */
       minTabWidth: {
         type: Number,
         default: 100,
       },
+      /**
+       * 탭 제목 글자 크기
+       */
+      titleSize: {
+        type: Number,
+        default: 16,
+      },
+      /**
+       * 탭 활성화 키값
+       */
       activeTabValue: {
         type: String,
         default: '',
@@ -143,17 +160,24 @@
       activeTabValue(value) {
         if (this.checkValid(value)) {
           this.activeTab = value;
-          this.toggleScrollIcon();
+          setTimeout(() => this.toggleScrollIcon());
         }
       },
     },
     mounted() {
       if (!this.checkValid(this.activeTab) && this.tabList.length) {
         this.activeTab = this.tabList[0].value;
-        this.toggleScrollIcon();
       }
+
+      setTimeout(() => this.toggleScrollIcon());
     },
     methods: {
+      /**
+       * 해당 키값을 가진 탭이 존재하는지 확인한다.
+       *
+       * @param {string} value - 탭의 키값
+       * @returns {boolean} 탭 존재 유무
+       */
       checkValid(value) {
         let isExist = false;
 
@@ -166,6 +190,12 @@
 
         return isExist;
       },
+      /**
+       * dragstart 이벤트를 처리한다.
+       *
+       * @param {object} e - 이벤트 객체
+       * @param {string} value - 탭의 키값
+       */
       onDragStart(e, value) {
         if (this.disableMoveTab) {
           return;
@@ -174,6 +204,12 @@
         e.dataTransfer.effectAllowed = 'move';
         this.dragStartValue = value;
       },
+      /**
+       * dragover 이벤트를 처리한다.
+       *
+       * @param {object} e - 이벤트 객체
+       * @param {string} value - 탭의 키값
+       */
       onDragOver(e, value) {
         if (this.disableMoveTab) {
           return;
@@ -182,6 +218,9 @@
         e.dataTransfer.dropEffect = 'move';
         this.dragOverValue = value;
       },
+      /**
+       * dragend 이벤트를 처리한다.
+       */
       onDragEnd() {
         let dragIndex;
         let moveIndex;
@@ -213,6 +252,11 @@
         this.dragStartValue = '';
         this.dragOverValue = '';
       },
+      /**
+       * mousewheel 이벤트를 처리한다.
+       *
+       * @param {object} e - 이벤트 객체
+       */
       onMouseWheel(e) {
         if (this.isActiveScroll) {
           if (e.deltaY < 0) {
@@ -222,6 +266,11 @@
           }
         }
       },
+      /**
+       * scroll 이벤트를 처리한다.
+       *
+       * @param {string} type - 이동 방향
+       */
       onMoveScroll(type) {
         const currentOffset = this.currentOffset;
         const minTabWidth = this.minTabWidth;
@@ -249,6 +298,9 @@
           }
         }
       },
+      /**
+       * tab scroll icon 표시 유무를 처리한다.
+       */
       toggleScrollIcon() {
         const navWidth = this.$refs.nav.offsetWidth;
         const navWrapWidth = this.$refs.navWrap.offsetWidth;
@@ -266,6 +318,9 @@
           this.moveToScroll();
         }
       },
+      /**
+       * tab scroll 관련 offset 계산하여 적용한다.
+       */
       moveToScroll() {
         setTimeout(() => {
           const nav = this.$refs.nav;
@@ -273,9 +328,13 @@
           const navWrapWidth = this.$refs.navWrap.offsetWidth;
           const activeTabRect = nav.querySelector(`div[value='${this.activeTab}']`).getBoundingClientRect();
           const activeTabWidth = (activeTabRect.left + activeTabRect.width) - navRect.left;
-          const moveOffset = navWrapWidth - (activeTabWidth + 4);
+          let moveOffset = navWrapWidth - activeTabWidth;
           const maxMoveOffset = navRect.width - navWrapWidth;
 
+          if (this.tabList[this.tabList.length - 1].value !== this.activeTab) {
+            moveOffset += 4;
+          }
+
           this.currentOffset = moveOffset > 0 ? 0 : moveOffset;
           if (this.currentOffset) {
             this.disablePrev = false;
@@ -286,26 +345,30 @@
           }
         });
       },
-      toggleCloseIcon(e, value) {
-        if (this.disableRemoveTab) {
-          return;
-        }
-
-        const itemContent = e.target.getElementsByClassName('ev-tabs-item-content')[0];
-        if (value) {
-          itemContent.classList.add('icon');
-        } else {
-          itemContent.classList.remove('icon');
-        }
-      },
+      /**
+       * 탭 변경에 대해서 치리한다.
+       *
+       * @param {string} value - 탭의 키값
+       */
       changeTab(value) {
         if (this.activeTab === value) {
           return;
         }
 
+        /**
+         * 탭 변경 이벤트
+         *
+         * @property {string} oldTab - 이전 탭 키값
+         * @property {string} newTab - 현재 탭 키값
+         */
         this.$emit('change-tab', this.activeTab, value);
         this.activeTab = value;
       },
+      /**
+       * 탭 제거에 대해서 처리한다.
+       *
+       * @param {string} value - 탭의 키값
+       */
       removeTab(value) {
         let removeIndex;
         let removeTab;
@@ -326,9 +389,20 @@
         if (this.activeTab === value) {
           removeIndex = this.tabList.length === removeIndex ? removeIndex - 1 : removeIndex;
           this.activeTab = this.tabList[removeIndex].value;
+          /**
+           * 탭 변경 이벤트
+           *
+           * @property {string} oldTab - 이전 탭 키값
+           * @property {string} newTab - 현재 탭 키값
+           */
           this.$emit('change-tab', value, this.activeTab);
         }
 
+        /**
+         * 탭 제거 이벤트
+         *
+         * @property {string} removeTab - 제거된 탭 키값
+         */
         this.$emit('remove-tab', removeTab);
         this.$emit('input', this.tabList);
         setTimeout(() => this.toggleScrollIcon());
@@ -337,11 +411,13 @@
   };
 </script>
 
-<style>
+<style lang="scss">
+  @import '~@/styles/default';
+
   .ev-tabs {
     width: 100%;
     height: 100%;
-    padding-top: 30px;
+    padding-top: 36px;
     position: relative;
   }
   .ev-tabs-header {
@@ -349,98 +425,117 @@
     padding: 0;
     top: 0;
     width: 100%;
-    height: 30px;
-    border-bottom: 1px solid #dddee1;
+    height: 36px;
+
+    @include evThemify() {
+      border-bottom: $border-solid evThemed('tab-border');
+    }
   }
   .ev-tabs-body {
     position: relative;
     width: 100%;
     height: 100%;
-    border: 1px solid #dddee1;
-    border-top: 0;
+    overflow: auto;
+
+    @include evThemify() {
+      color: evThemed('font-color-base');
+      border: $border-solid evThemed('tab-border');
+      background-color: evThemed('tab-active-bg');
+      border-top: 0;
+    }
   }
   .ev-tabs-scroll {
     box-sizing: border-box;
     overflow: hidden;
     margin-bottom: -1px;
     position: relative;
-  }
-  .ev-tabs-scroll.scrollable {
-    padding: 0 15px;
+
+    &.scrollable {
+      padding: 0 15px;
+    }
   }
   .ev-tabs-nav-wrap {
     overflow: hidden;
   }
   .ev-tabs-nav {
-    border: 1px solid #dddee1;
-    border-bottom: none;
-    border-top: none;
-    border-radius: 4px 4px 0 0;
     box-sizing: border-box;
     white-space: nowrap;
     position: relative;
     transition: transform .3s;
     float: left;
   }
-  .ev-tabs-nav:first-child {
-    border-left: none;
-  }
-  .ev-tabs-nav:last-child {
-    border-right: none;
-  }
   .ev-tabs-item {
-    margin-right: 4px;
-    height: 30px;
-    box-sizing: border-box;
-    display: inline-block;
-    font-size: 12px;
-    font-weight: 500;
-    color: #303133;
     position: relative;
-    background: #f8f8f9;
-    border: 1px solid #dddee1;
+    display: inline-block;
+    height: 36px;
+    box-sizing: border-box;
     user-select: none;
-  }
-  .ev-tabs-item.active {
-    background: #fff;
-    transform: translateZ(0);
-    color: #2d8cf0;
-    border-bottom: none;
-  }
-  .ev-tabs-item:hover {
-    color: #2589E9;
-    font-weight: bold;
     cursor: pointer;
-  }
-  .ev-tabs-item.dragover {
-    border-left: 3px solid blue;
-  }
-  .ev-tab-close-btn {
-    width: 0;
-    overflow: hidden;
-    font-weight: normal;
-  }
-  .ev-tabs-item > .icon > .ev-tab-close-btn {
-    width: 10px;
-  }
-  .ev-tab-close-btn:hover {
-    font-weight: bold;
-    color: red;
+    border-radius: 2px;
+
+    @include evThemify() {
+      color: evThemed('tab-color');
+      border: $border-solid evThemed('tab-border');
+      background-color: evThemed('tab-bg');
+    }
+
+    &.active {
+      transform: translateZ(0);
+      border-bottom: none;
+
+      @include evThemify() {
+        color: evThemed('tab-color');
+        background-color: evThemed('tab-active-bg');
+      }
+
+      & .ev-tabs-item-content {
+        @include evThemify() {
+          color: evThemed('tab-color');
+        }
+      }
+    }
+
+    &.dragover {
+      border-left: 3px solid blue;
+    }
+
+    &:not(:last-child) {
+      margin-right: 4px;
+    }
   }
   .ev-tabs-item-content {
     display: flex;
-    align-items: baseline;
+    align-items: center;
     justify-content: center;
-    padding: 5px 16px 4px;
-    font-size: 14px;
+    line-height: 36px;
+    text-align: center;
+    padding: 0 5px;
+
+    @include evThemify() {
+      color: rgba(evThemed('tab-color'), 0.7);
+    }
+
+    & .ev-tab-close-btn {
+      width: 12px;
+
+      &:hover {
+        font-weight: bold;
+        color: red;
+      }
+    }
   }
   .ev-tab-scroll-icon {
     position: absolute;
-    line-height: 30px;
+    line-height: 36px;
     cursor: pointer;
-  }
-  .ev-tab-scroll-icon.disabled {
-    opacity: 0.3;
-    cursor: not-allowed;
+
+    @include evThemify() {
+      border: $border-solid evThemed('tab-border');
+    }
+
+    &.disabled {
+      opacity: 0.3;
+      cursor: not-allowed;
+    }
   }
 </style>