evui 3.3.36 → 3.3.39

package/src/components/tabs/Tabs.vue

@@ -1,517 +1,517 @@
-<template>
-  <section
-    v-resize="onResize"
-    v-observe-visibility="{
-      callback: onResize,
-      once: true,
-    }"
-    class="ev-tabs"
-    :class="{
-      closable,
-      stretch,
-    }"
-  >
-    <div class="ev-tabs-header">
-      <div
-        class="ev-tabs-nav-wrapper"
-        :class="{
-          'has-scroll': hasScroll,
-        }"
-      >
-        <template v-if="hasScroll">
-          <span
-            class="ev-tabs-arrow prev"
-            @click="scrollTab('prev')"
-          >
-            <i class="ev-icon-s-arrow-left" />
-          </span>
-          <span
-            class="ev-tabs-arrow next"
-            @click="scrollTab('next')"
-          >
-            <i class="ev-icon-s-arrow-right" />
-          </span>
-        </template>
-        <div
-          ref="listWrapperRef"
-          class="ev-tabs-list-wrapper"
-        >
-          <ul
-            ref="listRef"
-            class="ev-tabs-list"
-            :style="listRefStyle"
-          >
-            <li
-              v-for="(item, idx) in computedTabList"
-              :key="`${item.value}_${idx}`"
-              class="ev-tabs-title"
-              v-bind="{ draggable }"
-              :class="{
-                active: item.value === mv,
-                'has-icon': item.iconClass,
-                'drag-select': dragSelectCls(item.value),
-                'select-idx': selectIdxCls(idx),
-              }"
-              @click="clickTab(item.value)"
-              @dragstart.stop="dragstartTab(item, idx)"
-              @dragover.prevent="dragoverTab(item.value)"
-              @dragend.prevent="dragendTab"
-            >
-              <i
-                v-if="item.iconClass"
-                class="ev-tabs-icon"
-                :class="item.iconClass"
-              />
-              <span
-                class="text"
-                :title="item.text"
-              >
-                {{ item.text }}
-              </span>
-              <span
-                v-if="closable"
-                class="close-icon"
-                @click.stop="removeTab(item.value)"
-              >
-                <i class="ev-icon-s-close" />
-              </span>
-            </li>
-          </ul>
-        </div>
-      </div>
-    </div>
-    <div class="ev-tabs-body">
-      <slot />
-    </div>
-  </section>
-</template>
-
-<script>
-import {
-  ref, reactive, computed,
-  provide, triggerRef,
-  onBeforeUpdate, nextTick,
-} from 'vue';
-
-export default {
-  name: 'EvTabs',
-  props: {
-    modelValue: {
-      type: [String, Number],
-      default: null,
-    },
-    panels: {
-      type: Array,
-      default: () => [],
-      validator: (list) => {
-        const valueList = list.map(v => v.value);
-        const setList = [...new Set(valueList)];
-        if (list.length !== setList.length) {
-          console.warn('[EVUI][Tabs] TabPanel \'value\' attribute is duplicate values.');
-          return false;
-        }
-        if (!list.every(v => Object.hasOwnProperty.call(v, 'value'))) {
-          console.warn('[EVUI][Tabs] TabPanel \'value\' attribute is essential.');
-          return false;
-        }
-        return true;
-      },
-    },
-    closable: {
-      type: Boolean,
-      default: false,
-    },
-    stretch: {
-      type: Boolean,
-      default: false,
-    },
-    draggable: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  emits: {
-    'update:modelValue': [String, Number],
-    'update:panels': [Array],
-    change: [String, Number],
-  },
-  setup(props, { emit }) {
-    // 드래그 상태 여부 (dragstart ~ dragend)
-    const isDragState = ref(false);
-
-    const tabCloneList = ref([]);
-
-    const mv = computed({
-      get: () => props.modelValue,
-      set: (val) => {
-        emit('update:modelValue', val);
-        emit('change', val);
-      },
-    });
-
-    provide('evTabs', mv);
-
-    const tabList = computed({
-      get: () => props.panels,
-      set: val => emit('update:panels', val),
-    });
-    const computedTabList = computed(() => {
-      if (!props.draggable) {
-        return tabList.value;
-      }
-      if (!isDragState.value) {
-        return tabList.value;
-      }
-      return tabCloneList.value;
-    });
-    const tabElValueList = tabList.value.map(v => v.value);
-
-    const listWrapperRef = ref(null);
-    const listRef = ref(null);
-    const hasScroll = ref(false);
-
-    const translateScroll = reactive({
-      x: 0,
-    });
-    const listRefStyle = computed(() => ({
-      transform: `translateX(${translateScroll.x}px)`,
-    }));
-
-    /**
-     * 상단 탭 nav의 element 길이를 감시 및 계산하여 스크롤 여부 확인
-     * UL의 길이가 긴 경우 양쪽에 버튼 노출
-     */
-    const observeListEl = () => {
-      const listWrapperWidth = listWrapperRef.value.offsetWidth;
-      const listWidth = listRef.value.offsetWidth;
-      hasScroll.value = listWrapperWidth < listWidth;
-
-      if (hasScroll.value) {
-        const widthLimit = listWrapperWidth - listWidth;
-        if (widthLimit > translateScroll.x) {
-          translateScroll.x = widthLimit;
-        }
-      } else {
-        translateScroll.x = 0;
-      }
-    };
-
-    onBeforeUpdate(() => {
-      // 삭제된 탭이 선택된 경우 탭선택 인덱스를 변경하는 로직
-      if (tabElValueList.length === tabList.value.length + 1) {
-        let longList;
-        let shortList;
-        if (tabElValueList.length > tabList.value.length) {
-          longList = tabElValueList;
-          shortList = tabList.value.map(v => v.value);
-        } else {
-          longList = tabList.value.map(v => v.value);
-          shortList = tabElValueList;
-        }
-        const removeValue = longList.filter(v => !shortList.includes(v))[0];
-        if (mv.value === removeValue) {
-          const selectedIdx = tabElValueList.findIndex(v => v === removeValue);
-          if (selectedIdx === 0) {
-            mv.value = tabList.value[0].value;
-          } else {
-            mv.value = tabList.value[selectedIdx - 1].value;
-          }
-        }
-      }
-    });
-
-    /**
-     *  탭 클릭 로직
-     */
-    const clickTab = (val) => {
-      mv.value = val;
-    };
-
-    /**
-     *  탭 삭제 로직
-     */
-    const removeTab = (val) => {
-      if (tabList.value.length < 2) {
-        return;
-      }
-      const selectedIdx = tabList.value.findIndex(v => v.value === val);
-      if (selectedIdx < 0) {
-        mv.value = tabList.value[0].value;
-        return;
-      }
-      if (val === mv.value) {
-        if (selectedIdx === 0) {
-          mv.value = tabList.value[1].value;
-        } else {
-          mv.value = tabList.value[selectedIdx - 1].value;
-        }
-      }
-      tabList.value.splice(selectedIdx, 1);
-      nextTick(() => {
-        tabElValueList.splice(selectedIdx, 1);
-      });
-      triggerRef(tabList);
-    };
-
-    /**
-     * tab nav위에서 마우스 휠 동작
-     * @param type - {'next'|'prev'}
-     * @param movingWidth
-     */
-    const scrollTab = (type, movingWidth = 100) => {
-      const listWrapperWidth = listWrapperRef.value.offsetWidth;
-      const listWidth = listRef.value.offsetWidth;
-      const widthLimit = listWrapperWidth - listWidth;
-      if (type === 'next' && translateScroll.x !== widthLimit) {
-        if (widthLimit >= translateScroll.x - movingWidth) {
-          translateScroll.x = widthLimit;
-        } else {
-          translateScroll.x -= movingWidth;
-        }
-      } else if (type === 'prev' && translateScroll.x !== 0) {
-        if (movingWidth * -1 <= translateScroll.x) {
-          translateScroll.x = 0;
-        } else {
-          translateScroll.x += movingWidth;
-        }
-      }
-    };
-
-    // draggable 모드에서 drag되는 아이템
-    const dragObj = reactive({
-      item: {},
-      idx: null,
-    });
-
-    /**
-     * 드래그된 LI의 클래스
-     * @param val
-     * @returns {boolean|boolean}
-     */
-    const dragSelectCls = val => props.draggable && dragObj.item?.value === val;
-
-    /**
-     *  드래그하기위해 선택한 li의 idx 여부 클래스
-     */
-    const selectIdxCls = idx => props.draggable && dragObj.idx === idx;
-
-    /**
-     * 탭 드래그 시작 메소드, isDragState모드 시작
-     * @param item - 선택한 아이템
-     */
-    const dragstartTab = (item, idx) => {
-      if (!props.draggable) {
-        return;
-      }
-      tabCloneList.value = [...tabList.value];
-      dragObj.item = item;
-      dragObj.idx = idx;
-      isDragState.value = true;
-    };
-
-    /**
-     * 탭 드래그오버 메소드
-     * @param val - 오버 중인 아이템의 value
-     */
-    const dragoverTab = (val) => {
-      if (!props.draggable || dragObj.item?.value === val) {
-        return;
-      }
-      const dragValueIdx = tabCloneList.value.findIndex(v => v.value === dragObj.item?.value);
-      const targetValueIdx = tabCloneList.value.findIndex(v => v.value === val);
-      tabCloneList.value.splice(dragValueIdx, 1);
-      tabCloneList.value.splice(targetValueIdx, 0, dragObj.item);
-    };
-
-    /**
-     * 탭 드래그 종료 메소드, 원래 tabList에 값을 넣고 isDragState모드를 종료
-     */
-    const dragendTab = () => {
-      if (!props.draggable) {
-        return;
-      }
-      tabList.value = [...tabCloneList.value];
-      dragObj.item = {};
-      dragObj.idx = null;
-      isDragState.value = false;
-      tabCloneList.value.splice(0);
-    };
-
-    const onResize = () => {
-      observeListEl();
-    };
-
-    return {
-      mv,
-      computedTabList,
-      clickTab,
-      removeTab,
-
-      listWrapperRef,
-      listRef,
-      hasScroll,
-      listRefStyle,
-      scrollTab,
-
-      dragstartTab,
-      dragoverTab,
-      dragendTab,
-      dragSelectCls,
-      selectIdxCls,
-
-      onResize,
-    };
-  },
-};
-</script>
-
-<style lang="scss">
-@import '../../style/index.scss';
-
-.ev-tabs {
-  ul, li {
-    list-style: none;
-  }
-
-  @include state('closable') {
-    .ev-tabs-title {
-      &:hover {
-        .text {
-          transform: translateX(-5px);
-        }
-        .close-icon {
-          opacity: 1;
-        }
-      }
-    }
-  }
-  @include state('stretch') {
-    .ev-tabs-title {
-      width: 100%;
-    }
-  }
-}
-
-.ev-tabs-header {
-  $tab-header-height: $input-default-height;
-  position: relative;
-
-  @include evThemify() {
-    border-bottom: 1px solid evThemed('border-base');
-  }
-
-  .ev-tabs-list-wrapper {
-    user-select: none;
-    overflow: hidden;
-  }
-  .ev-tabs-list {
-    display: flex;
-    float: left;
-    border-radius: 4px 4px 0 0;
-    border-bottom: none !important;
-    text-align: center;
-    transition: transform .3s;
-    user-select: none;
-
-    @include evThemify() {
-      border: 1px solid evThemed('border-base');
-    }
-  }
-  .ev-tabs-title {
-    position: relative;
-    width: 100px;
-    height: $tab-header-height;
-    padding: 0 17px;
-    line-height: $tab-header-height;
-    cursor: pointer;
-
-    @include evThemify() {
-      background-color: evThemed('background-lighten');
-    }
-    &:not(:first-child) {
-      @include evThemify() {
-        border-left: 1px solid evThemed('border-base');
-      }
-    }
-    &:not(.select-idx):hover {
-      @include evThemify() {
-        color: evThemed('primary');
-      }
-    }
-    &.active {
-      background-color: transparent;
-
-      @include evThemify() {
-        border-bottom: 1px solid evThemed('background-base');
-        color: evThemed('primary');
-      }
-    }
-    &.has-icon {
-      padding-left: 32px;
-    }
-    &.drag-select {
-      @include evThemify() {
-        background-color: rgba(evThemed('background-base'), 0.3);
-      }
-    }
-
-    .text {
-      transition: transform $animate-base;
-
-      @include shortening();
-    }
-    .close-icon {
-      position: absolute;
-      top: 50%;
-      right: 7px;
-      transform: translateY(-50%);
-      font-size: $font-size-small;
-      opacity: 0;
-      transition: opacity $animate-base;
-    }
-  }
-  .ev-tabs-icon {
-    position: absolute;
-    left: 10px;
-  }
-}
-
-.ev-tabs-nav-wrapper {
-  $tab-header-height: $input-default-height;
-  box-sizing: border-box;
-  margin-bottom: -1px;
-  user-select: none;
-
-  &.has-scroll {
-    $arrow-width: 17px;
-    padding: 0 20px;
-
-    .ev-tabs-arrow {
-      position: absolute;
-      top: 0;
-      width: $arrow-width;
-      height: $tab-header-height;
-      line-height: $tab-header-height;
-      font-size: $font-size-base;
-      text-align: center;
-      cursor: pointer;
-
-      @include evThemify() {
-        background-color: evThemed('background-base');
-      }
-
-      &:hover {
-        @include evThemify() {
-          color: evThemed('primary');
-        }
-      }
-      &.prev {
-        left: 0;
-      }
-      &.next {
-        right: 0;
-      }
-    }
-  }
-}
-</style>
+<template>
+  <section
+    v-resize="onResize"
+    v-observe-visibility="{
+      callback: onResize,
+      once: true,
+    }"
+    class="ev-tabs"
+    :class="{
+      closable,
+      stretch,
+    }"
+  >
+    <div class="ev-tabs-header">
+      <div
+        class="ev-tabs-nav-wrapper"
+        :class="{
+          'has-scroll': hasScroll,
+        }"
+      >
+        <template v-if="hasScroll">
+          <span
+            class="ev-tabs-arrow prev"
+            @click="scrollTab('prev')"
+          >
+            <i class="ev-icon-s-arrow-left" />
+          </span>
+          <span
+            class="ev-tabs-arrow next"
+            @click="scrollTab('next')"
+          >
+            <i class="ev-icon-s-arrow-right" />
+          </span>
+        </template>
+        <div
+          ref="listWrapperRef"
+          class="ev-tabs-list-wrapper"
+        >
+          <ul
+            ref="listRef"
+            class="ev-tabs-list"
+            :style="listRefStyle"
+          >
+            <li
+              v-for="(item, idx) in computedTabList"
+              :key="`${item.value}_${idx}`"
+              class="ev-tabs-title"
+              v-bind="{ draggable }"
+              :class="{
+                active: item.value === mv,
+                'has-icon': item.iconClass,
+                'drag-select': dragSelectCls(item.value),
+                'select-idx': selectIdxCls(idx),
+              }"
+              @click="clickTab(item.value)"
+              @dragstart.stop="dragstartTab(item, idx)"
+              @dragover.prevent="dragoverTab(item.value)"
+              @dragend.prevent="dragendTab"
+            >
+              <i
+                v-if="item.iconClass"
+                class="ev-tabs-icon"
+                :class="item.iconClass"
+              />
+              <span
+                class="text"
+                :title="item.text"
+              >
+                {{ item.text }}
+              </span>
+              <span
+                v-if="closable"
+                class="close-icon"
+                @click.stop="removeTab(item.value)"
+              >
+                <i class="ev-icon-s-close" />
+              </span>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+    <div class="ev-tabs-body">
+      <slot />
+    </div>
+  </section>
+</template>
+
+<script>
+import {
+  ref, reactive, computed,
+  provide, triggerRef,
+  onBeforeUpdate, nextTick,
+} from 'vue';
+
+export default {
+  name: 'EvTabs',
+  props: {
+    modelValue: {
+      type: [String, Number],
+      default: null,
+    },
+    panels: {
+      type: Array,
+      default: () => [],
+      validator: (list) => {
+        const valueList = list.map(v => v.value);
+        const setList = [...new Set(valueList)];
+        if (list.length !== setList.length) {
+          console.warn('[EVUI][Tabs] TabPanel \'value\' attribute is duplicate values.');
+          return false;
+        }
+        if (!list.every(v => Object.hasOwnProperty.call(v, 'value'))) {
+          console.warn('[EVUI][Tabs] TabPanel \'value\' attribute is essential.');
+          return false;
+        }
+        return true;
+      },
+    },
+    closable: {
+      type: Boolean,
+      default: false,
+    },
+    stretch: {
+      type: Boolean,
+      default: false,
+    },
+    draggable: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: {
+    'update:modelValue': [String, Number],
+    'update:panels': [Array],
+    change: [String, Number],
+  },
+  setup(props, { emit }) {
+    // 드래그 상태 여부 (dragstart ~ dragend)
+    const isDragState = ref(false);
+
+    const tabCloneList = ref([]);
+
+    const mv = computed({
+      get: () => props.modelValue,
+      set: (val) => {
+        emit('update:modelValue', val);
+        emit('change', val);
+      },
+    });
+
+    provide('evTabs', mv);
+
+    const tabList = computed({
+      get: () => props.panels,
+      set: val => emit('update:panels', val),
+    });
+    const computedTabList = computed(() => {
+      if (!props.draggable) {
+        return tabList.value;
+      }
+      if (!isDragState.value) {
+        return tabList.value;
+      }
+      return tabCloneList.value;
+    });
+    const tabElValueList = tabList.value.map(v => v.value);
+
+    const listWrapperRef = ref(null);
+    const listRef = ref(null);
+    const hasScroll = ref(false);
+
+    const translateScroll = reactive({
+      x: 0,
+    });
+    const listRefStyle = computed(() => ({
+      transform: `translateX(${translateScroll.x}px)`,
+    }));
+
+    /**
+     * 상단 탭 nav의 element 길이를 감시 및 계산하여 스크롤 여부 확인
+     * UL의 길이가 긴 경우 양쪽에 버튼 노출
+     */
+    const observeListEl = () => {
+      const listWrapperWidth = listWrapperRef.value.offsetWidth;
+      const listWidth = listRef.value.offsetWidth;
+      hasScroll.value = listWrapperWidth < listWidth;
+
+      if (hasScroll.value) {
+        const widthLimit = listWrapperWidth - listWidth;
+        if (widthLimit > translateScroll.x) {
+          translateScroll.x = widthLimit;
+        }
+      } else {
+        translateScroll.x = 0;
+      }
+    };
+
+    onBeforeUpdate(() => {
+      // 삭제된 탭이 선택된 경우 탭선택 인덱스를 변경하는 로직
+      if (tabElValueList.length === tabList.value.length + 1) {
+        let longList;
+        let shortList;
+        if (tabElValueList.length > tabList.value.length) {
+          longList = tabElValueList;
+          shortList = tabList.value.map(v => v.value);
+        } else {
+          longList = tabList.value.map(v => v.value);
+          shortList = tabElValueList;
+        }
+        const removeValue = longList.filter(v => !shortList.includes(v))[0];
+        if (mv.value === removeValue) {
+          const selectedIdx = tabElValueList.findIndex(v => v === removeValue);
+          if (selectedIdx === 0) {
+            mv.value = tabList.value[0].value;
+          } else {
+            mv.value = tabList.value[selectedIdx - 1].value;
+          }
+        }
+      }
+    });
+
+    /**
+     *  탭 클릭 로직
+     */
+    const clickTab = (val) => {
+      mv.value = val;
+    };
+
+    /**
+     *  탭 삭제 로직
+     */
+    const removeTab = (val) => {
+      if (tabList.value.length < 2) {
+        return;
+      }
+      const selectedIdx = tabList.value.findIndex(v => v.value === val);
+      if (selectedIdx < 0) {
+        mv.value = tabList.value[0].value;
+        return;
+      }
+      if (val === mv.value) {
+        if (selectedIdx === 0) {
+          mv.value = tabList.value[1].value;
+        } else {
+          mv.value = tabList.value[selectedIdx - 1].value;
+        }
+      }
+      tabList.value.splice(selectedIdx, 1);
+      nextTick(() => {
+        tabElValueList.splice(selectedIdx, 1);
+      });
+      triggerRef(tabList);
+    };
+
+    /**
+     * tab nav위에서 마우스 휠 동작
+     * @param type - {'next'|'prev'}
+     * @param movingWidth
+     */
+    const scrollTab = (type, movingWidth = 100) => {
+      const listWrapperWidth = listWrapperRef.value.offsetWidth;
+      const listWidth = listRef.value.offsetWidth;
+      const widthLimit = listWrapperWidth - listWidth;
+      if (type === 'next' && translateScroll.x !== widthLimit) {
+        if (widthLimit >= translateScroll.x - movingWidth) {
+          translateScroll.x = widthLimit;
+        } else {
+          translateScroll.x -= movingWidth;
+        }
+      } else if (type === 'prev' && translateScroll.x !== 0) {
+        if (movingWidth * -1 <= translateScroll.x) {
+          translateScroll.x = 0;
+        } else {
+          translateScroll.x += movingWidth;
+        }
+      }
+    };
+
+    // draggable 모드에서 drag되는 아이템
+    const dragObj = reactive({
+      item: {},
+      idx: null,
+    });
+
+    /**
+     * 드래그된 LI의 클래스
+     * @param val
+     * @returns {boolean|boolean}
+     */
+    const dragSelectCls = val => props.draggable && dragObj.item?.value === val;
+
+    /**
+     *  드래그하기위해 선택한 li의 idx 여부 클래스
+     */
+    const selectIdxCls = idx => props.draggable && dragObj.idx === idx;
+
+    /**
+     * 탭 드래그 시작 메소드, isDragState모드 시작
+     * @param item - 선택한 아이템
+     */
+    const dragstartTab = (item, idx) => {
+      if (!props.draggable) {
+        return;
+      }
+      tabCloneList.value = [...tabList.value];
+      dragObj.item = item;
+      dragObj.idx = idx;
+      isDragState.value = true;
+    };
+
+    /**
+     * 탭 드래그오버 메소드
+     * @param val - 오버 중인 아이템의 value
+     */
+    const dragoverTab = (val) => {
+      if (!props.draggable || dragObj.item?.value === val) {
+        return;
+      }
+      const dragValueIdx = tabCloneList.value.findIndex(v => v.value === dragObj.item?.value);
+      const targetValueIdx = tabCloneList.value.findIndex(v => v.value === val);
+      tabCloneList.value.splice(dragValueIdx, 1);
+      tabCloneList.value.splice(targetValueIdx, 0, dragObj.item);
+    };
+
+    /**
+     * 탭 드래그 종료 메소드, 원래 tabList에 값을 넣고 isDragState모드를 종료
+     */
+    const dragendTab = () => {
+      if (!props.draggable) {
+        return;
+      }
+      tabList.value = [...tabCloneList.value];
+      dragObj.item = {};
+      dragObj.idx = null;
+      isDragState.value = false;
+      tabCloneList.value.splice(0);
+    };
+
+    const onResize = () => {
+      observeListEl();
+    };
+
+    return {
+      mv,
+      computedTabList,
+      clickTab,
+      removeTab,
+
+      listWrapperRef,
+      listRef,
+      hasScroll,
+      listRefStyle,
+      scrollTab,
+
+      dragstartTab,
+      dragoverTab,
+      dragendTab,
+      dragSelectCls,
+      selectIdxCls,
+
+      onResize,
+    };
+  },
+};
+</script>
+
+<style lang="scss">
+@import '../../style/index.scss';
+
+.ev-tabs {
+  ul, li {
+    list-style: none;
+  }
+
+  @include state('closable') {
+    .ev-tabs-title {
+      &:hover {
+        .text {
+          transform: translateX(-5px);
+        }
+        .close-icon {
+          opacity: 1;
+        }
+      }
+    }
+  }
+  @include state('stretch') {
+    .ev-tabs-title {
+      width: 100%;
+    }
+  }
+}
+
+.ev-tabs-header {
+  $tab-header-height: $input-default-height;
+  position: relative;
+
+  @include evThemify() {
+    border-bottom: 1px solid evThemed('border-base');
+  }
+
+  .ev-tabs-list-wrapper {
+    user-select: none;
+    overflow: hidden;
+  }
+  .ev-tabs-list {
+    display: flex;
+    float: left;
+    border-radius: 4px 4px 0 0;
+    border-bottom: none !important;
+    text-align: center;
+    transition: transform .3s;
+    user-select: none;
+
+    @include evThemify() {
+      border: 1px solid evThemed('border-base');
+    }
+  }
+  .ev-tabs-title {
+    position: relative;
+    width: 100px;
+    height: $tab-header-height;
+    padding: 0 17px;
+    line-height: $tab-header-height;
+    cursor: pointer;
+
+    @include evThemify() {
+      background-color: evThemed('background-lighten');
+    }
+    &:not(:first-child) {
+      @include evThemify() {
+        border-left: 1px solid evThemed('border-base');
+      }
+    }
+    &:not(.select-idx):hover {
+      @include evThemify() {
+        color: evThemed('primary');
+      }
+    }
+    &.active {
+      background-color: transparent;
+
+      @include evThemify() {
+        border-bottom: 1px solid evThemed('background-base');
+        color: evThemed('primary');
+      }
+    }
+    &.has-icon {
+      padding-left: 32px;
+    }
+    &.drag-select {
+      @include evThemify() {
+        background-color: rgba(evThemed('background-base'), 0.3);
+      }
+    }
+
+    .text {
+      transition: transform $animate-base;
+
+      @include shortening();
+    }
+    .close-icon {
+      position: absolute;
+      top: 50%;
+      right: 7px;
+      transform: translateY(-50%);
+      font-size: $font-size-small;
+      opacity: 0;
+      transition: opacity $animate-base;
+    }
+  }
+  .ev-tabs-icon {
+    position: absolute;
+    left: 10px;
+  }
+}
+
+.ev-tabs-nav-wrapper {
+  $tab-header-height: $input-default-height;
+  box-sizing: border-box;
+  margin-bottom: -1px;
+  user-select: none;
+
+  &.has-scroll {
+    $arrow-width: 17px;
+    padding: 0 20px;
+
+    .ev-tabs-arrow {
+      position: absolute;
+      top: 0;
+      width: $arrow-width;
+      height: $tab-header-height;
+      line-height: $tab-header-height;
+      font-size: $font-size-base;
+      text-align: center;
+      cursor: pointer;
+
+      @include evThemify() {
+        background-color: evThemed('background-base');
+      }
+
+      &:hover {
+        @include evThemify() {
+          color: evThemed('primary');
+        }
+      }
+      &.prev {
+        left: 0;
+      }
+      &.next {
+        right: 0;
+      }
+    }
+  }
+}
+</style>