its_ui_vite 0.0.2 → 0.0.4

package/src/components/CTabs.vue

@@ -1,20 +1,57 @@
 <template>
-  <div class="c-tabs">
-    <button :class="['c-tabs__item', {'c-tabs__item-active': item === activeTab}]" v-for="item in tabs" :key="item.id" @click="handleTab(item)">
-      <div>
-        {{ item.text }}
+  <div v-if="isShow" class="c-tabs" :style="`--transition: ${speed}ms`">
+    <div
+      :class="classes.itemsWrap"
+      :style="scrollStyle"
+      @wheel.prevent="handleWheel"
+    >
+      <div ref="items" :class="classes.items">
+        <button 
+          :class="[classes.item, {'c-tabs__item-active': item.value === activeTab?.value}]" 
+          v-for="item in tabs" 
+          :key="item.value" 
+          :data-tab-value="item.value"
+          @click="handleTab(item, $event)"
+        >
+          <div>
+            {{ item.text }} 
+          </div>
+        </button>
+    
+        <div class="c-tabs__line">
+          <div ref="thumb" :style="`left: ${styleThumb.left}px; right: ${styleThumb.right}px`" class="c-tabs__thumb"></div>
+        </div>
       </div>
-    </button>
+    </div>
   </div>
 </template>
 
 <script>
+import { getPropValidator, isMobile } from '../assets/js/helpers'
+
 export default {
   data() {
     return {
-      activeTab: this.tabs.find(({id}) => id === this.activeId)
+      activeTab: null,
+      speed: 200,
+      translateTabTruck: 0,
+      isTrail: this.animationType === 'trail',
+      updatedFoo: () => {},
+
+      classes: {
+        item: 'c-tabs__item',
+        items: 'c-tabs__items',
+        itemsWrap: 'c-tabs__items_wrap',
+      },
+
+      styleThumb: {
+        left: 0,
+        right: '100%'
+      }
     }
   },
+
+
   props: {
     tabs: {
       type: Array,
@@ -25,39 +62,189 @@ export default {
 
     activeId: {
       required: true,
-    }
+    },
+
+    transformVal: {
+      type: Boolean,
+
+      default: true
+    },
+
+    scroll: {
+      type: Boolean,
+
+      default: false
+    },
+
+    animationType: {
+      type: String,
+      
+      default: 'trail',
+      validator: getPropValidator('CTabs', 'animationType', ['worm', 'trail'])
+    },
   },
 
-  computed: {
-    activeTab() {
-      return this.tabs.find(({id}) => id === (this.activeTab.id || this.activeId))
-    }
+  emits: ['change'],
+
+  updated() {
+    this.updatedFoo()
+    this.updatedFoo = () => {}
+  },
+
+  mounted() {
+    this.initTabs()
   },
 
   methods: {
-    handleTab(activeTab) {
-      console.log('handleTab');
-      if (this.activeTab === activeTab) return;
+    initTabs() {
+      const activeId = this.activeId || this.tabs?.[0]?.value;
+      const activeTab = this.tabs?.find(({value}) => value === activeId);
+      const $activeTab = this.$refs?.items?.querySelector(`[data-tab-value="${activeTab?.value}"]`);
+
+      if (!$activeTab && !activeTab) return;
+
+      this.setActiveTab(activeTab);
+      this.setThumb();
+      this.setTabTruck();
+    },
+
+    handleTab(activeTab, evt) {
+      this.setActiveTab(activeTab);
+      this.setThumb();
+      this.setTabTruck();
+    },
+
+    handleWheel(evt) {
+      if (!this.scroll || isMobile()) return;
+      
+      const translate = evt.deltaY || evt.deltaX;
+
+      this.setStyleTabTruck(this.translateTabTruck + translate)
+    },
+
+    setActiveTab(activeTab) {
+      if (this.activeTab?.value === activeTab.value) return;
 
       this.activeTab = activeTab
-      this.$emit('tabChange', activeTab)
+      this.$emit('change', this.transformVal ? activeTab.value : activeTab)
+    },
+
+    getPositions() {
+      const $activeTab = this.$refs?.items?.querySelector(`[data-tab-value="${this.activeTab?.value ?? this.activeTab}"]`);
+
+      return {
+        activeTab: $activeTab.getBoundingClientRect(),
+        tabsWrap: this.$refs.items.closest(`.${this.classes.itemsWrap}`).getBoundingClientRect(),
+        items: this.$refs.items.getBoundingClientRect(),
+      }
+    },
+
+    setThumb() {
+      const positions = this.getPositions();
+
+      const right = positions.items.right - positions.activeTab.right;
+      const left = positions.activeTab.left - positions.items.left;
+
+      this.setStyleThumb(right, left);
+    },
+
+    setStyleThumb(right, left) {
+      const styleRight = {
+        name: 'right', 
+        value: right,
+      }
+
+      const styleLeft = {
+        name: 'left', 
+        value: left,
+      }
+
+      const styleQueue = this.styleThumb.right > right ? [styleRight, styleLeft] : [styleLeft, styleRight]
+
+      this.styleThumb[styleQueue[0].name] = styleQueue[0].value;
+
+      setTimeout(() => {
+        this.styleThumb[styleQueue[1].name] = styleQueue[1].value;
+      }, this.isTrail ? 0 : this.speed);
+    },
+
+    setTabTruck() {
+      if (!this.scroll || isMobile()) return;
+
+      const position = this.getPositions();
+
+      const right = position.items.right - position.activeTab.right;
+      const centerTab = right + (position.activeTab.width / 2);
+      const centerPosition = (position.tabsWrap.width / 2) - centerTab;
+
+      this.setStyleTabTruck(centerPosition);
+    },
+
+    setStyleTabTruck(translate) {
+      const position = this.getPositions();
+
+      const maxPosition = this.$refs.items.scrollWidth - position.tabsWrap.width;
+
+      this.translateTabTruck = Math.max(0, Math.min(maxPosition, translate));
+      this.$refs.items.style.transform = `translateX(-${this.translateTabTruck}px)`;
     }
   },
+
+  computed: {
+    isShow() {
+      return !([null, undefined].includes(this.tabs?.[0]?.value))
+    },
+
+    scrollStyle() {
+      return `overflow: ${(isMobile() && this.scroll) ? 'auto' : 'hidden'};`
+    }
+  },
+
+  watch: {
+    tabs: {
+      handler() {
+        this.updatedFoo = this.initTabs
+      },
+
+      deep: true,
+      immediate: true,
+    },
+
+    activeId: {
+      handler() {
+        this.updatedFoo = this.initTabs
+      },
+
+      deep: true,
+      immediate: true,
+    },
+  }
 }
 </script>
 
 <style lang="scss">
 .c-tabs {
-  display: flex;
+  --tab-line-height: 5px;
 
   max-width: 100%;
 
-  gap: 40px;
+  display: flex;
+
+  &__items {
+    position: relative;
+
+    display: flex;
+
+    gap: 40px;
+    padding-bottom: 16px;
+  }
 
   &__item {
     display: flex;
     flex-direction: column;
 
+    padding: 0;
+
     font-size: 16px;
 
     border: none;
@@ -66,28 +253,34 @@ export default {
     background: transparent;
 
     cursor: pointer;
+    transition: var(--transition);
 
-    &::after {
-      content: '';
-      display: flex;
+    &-active {
+      color: var(--green-light);
+    }
+  }
 
-      height: 5px;
-      width: 100%;
-      margin-top: 12px;
+  &__line {
+    position: absolute;
+    left: 0;
+    bottom: 0; 
 
-      border-radius: 5px;
+    height: var(--tab-line-height);
+    width: 100%;
+  }
 
-      background: var(--green-light);
-      opacity: 0;
-    }
+  &__thumb {
+    position: absolute;
+    
+    height: 100%;
 
-    &-active {
-      color: var(--green-light);
+    border-radius: 5px;
 
-      &::after {
-        opacity: 1;
-      }
-    }
+    background: var(--green-light); 
+
+    transition: var(--transition);
+
+    pointer-events: none;
   }
 }
 </style>

package/src/components/CTooltip.vue

@@ -39,7 +39,7 @@ export default {
       type: String,
 
       default: 'top',
-      validator: getPropValidator('CTooltip', 'position', ['top', 'bottom']),
+      validator: getPropValidator('CTooltip', 'position', ['top', 'top_left', 'top_right', 'bottom', 'bottom_left', 'bottom_right']),
     },
 
     interactive: {
@@ -110,41 +110,112 @@ export default {
 </script>
 
 <style lang="scss">
+  @mixin top {
+    --translate-y: -10px;
+    
+    // arrow
+    --arrow-translate-y: -6px;
+
+    .c-tooltip__content_wrap {
+      bottom: 100%;
+    }
+
+    .c-tooltip__arrow {
+      --rotate: 45deg;
+
+      top: 100%;
+    }
+  }
+
+  @mixin bottom {
+    --translate-y: 10px;
+    
+    // arrow
+    --arrow-translate-y: 6px;
+
+    .c-tooltip__content_wrap {
+      top: 100%;
+    }
+
+    .c-tooltip__arrow {
+      --rotate: -135deg;
+
+      bottom: 100%;
+    }
+  }
+
+  @mixin left {
+    --translate-x: 0%;
+    --left: 0%;
+    --right: auto;
+
+    // arrow
+    --arrow-translate-x: 5px;
+    --arrow-left: 0%;
+    --arrow-right: auto;    
+  }
+
+  @mixin right {
+    --translate-x: 0%;
+    --left: auto;
+    --right: 0%;
+
+    // arrow
+    --arrow-translate-x: -5px;
+    --arrow-left: auto;
+    --arrow-right: 0%;
+  }
+
   .c-tooltip {
+    --translate-x: -50%;
+    --left: 50%;
+    --right: auto;
+
+    // arrow
+    --arrow-translate-x: -50%;
+    --arrow-left: 50%;
+    --arrow-right: auto;
+
     --arrow-size: 12px;
 
     position: relative;
 
     font-size: 12px;
 
+    button,
+    input,
+    div,
+    a {
+      font-family: inherit;
+      font-weight: inherit;
+    }
+
     // props.position
     &.top {
-      .c-tooltip__content_wrap{
-        --translate-y: -10px;
-        --arrow-translate-y: -6px;
-
-        bottom: 100%;
+      @include top();
+      
+      &_left {
+        @include top();
+        @include left();
       }
 
-      .c-tooltip__arrow {
-        --rotate: 45deg;
-
-        top: 100%;
+      &_right {
+        @include top();
+        @include right();
       }
     }
 
     &.bottom {
-      .c-tooltip__content_wrap {
-        --translate-y: 10px;
-        --arrow-translate-y: 6px;
+      @include bottom();
 
-        top: 100%;
+      &_left {
+        @include bottom();
+        @include left();
       }
 
-      .c-tooltip__arrow {
-        --rotate: -135deg;
-
-        bottom: 100%;
+      &_right {
+        @include bottom();
+        @include right();
       }
     }
     // ./props.position
@@ -180,8 +251,12 @@ export default {
 
       &_wrap {
         position: absolute;
-        left: 50%;
-        transform: translate(-50%, var(--translate-y));
+        left: var(--left);
+        right: var(--right);
+        transform: translate(var(--translate-x), var(--translate-y));
+        z-index: 10;
+
+        min-width: 100%;
 
         border: 1px solid var(--green-medium);
         border-radius: 6px;
@@ -196,8 +271,10 @@ export default {
 
     &__arrow {
       position: absolute;
-      left: 50%;
-      transform: translate(-50%, var(--arrow-translate-y)) rotate(var(--rotate));
+      left: var(--arrow-left);
+      right: var(--arrow-right);
+
+      transform: translate(var(--arrow-translate-x), var(--arrow-translate-y)) rotate(var(--rotate));
 
       width: var(--arrow-size);
       height: var(--arrow-size);