@phoenix-cg/v-tabs 0.1.0 → 0.1.1-5.beta-0

package/package.json

@@ -1,13 +1,12 @@
 {
   "name": "@phoenix-cg/v-tabs",
-  "version": "0.1.0",
+  "version": "0.1.15.beta-0",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
+    "build": "vue-cli-service build --target lib --name v-tabs src/export.js",
     "test:unit": "vue-cli-service test:unit",
-    "lint": "vue-cli-service lint",
-    "build-lib": "vue-cli-service build --target lib --name v-tabs src/export.js"
+    "lint": "vue-cli-service lint"
   },
   "dependencies": {
     "core-js": "^3.6.5",
@@ -19,13 +18,11 @@
     "@vue/cli-plugin-eslint": "~4.5.0",
     "@vue/cli-plugin-unit-jest": "~4.5.0",
     "@vue/cli-service": "~4.5.0",
-    "@vue/eslint-config-prettier": "^6.0.0",
     "@vue/test-utils": "^1.0.3",
     "babel-eslint": "^10.1.0",
     "eslint": "^6.7.2",
     "eslint-plugin-prettier": "^3.1.3",
     "eslint-plugin-vue": "^6.2.2",
-    "prettier": "^1.19.1",
     "vue-template-compiler": "^2.6.11"
   },
   "description": "## Project setup ``` npm install ```",

package/src/components/VTabs.vue

@@ -1,100 +1,152 @@
-<template>
-  <div class="v-tabs" :class="[`__${direction}`]">
-    <div
-      v-for="tab in list"
-      :key="tab[trackBy]"
-      @click="handleTabSelect(tab, event)"
-      ref="tabs"
-      class="v-tabs_tab"
-      :class="{ __active: value && value[trackBy] === tab[trackBy] }"
-    >
-      <slot name="single-tab" v-bind:tab="tab">
-        {{ tab.title || '' }}
-      </slot>
-    </div>
-    <div v-if="withSlider" :style="sliderStyle" class="v-tabs_slider"></div>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    direction: {
-      type: String,
-      default: 'horizontal'
-    },
-    trackBy: {
-      type: String,
-      default: 'id'
-    },
-    list: {
-      type: Array,
-      required: true
-    },
-    value: {
-      type: Object
-    },
-    selectFirst: {
-      type: Boolean,
-      default: true
-    },
-    withSlider: {
-      type: Boolean,
-      default: false
-    }
-  },
-  data () {
-    return {
-      sliderStyle: {}
-    }
-  },
-  mounted () {
-    if (this.selectFirst && this.list.length && !this.value) {
-      this.handleTabSelect(this.list[0])
-    }
-  },
-  methods: {
-    async handleTabSelect (tab) {
-      this.$emit('input', tab)
-      if (this.withSlider) {
-        await this.$nextTick
-        const { left: tabsLeft }  = this.$el.getBoundingClientRect()
-        const [currentTabEl] = this.$el.getElementsByClassName('__active')
-        const {
-          left: currentTabLeft,
-          width
-        } = currentTabEl.getBoundingClientRect();
-        const leftPoisiton = currentTabLeft - tabsLeft
-        this.sliderStyle = {
-          transform: `translateX(${leftPoisiton}px)`,
-          width: `${width}px`
-        }
-      }
-    }
-  }
-}
-</script>
-
-<style>
-.v-tabs {
-  display: flex;
-  position: relative;
-}
-.v-tabs_tab {
-  padding: 10px 20px;
-  background: #ddd;
-  cursor: pointer;
-  user-select: none;
-}
-.v-tabs_tab.__active {
-  background: rgb(182, 181, 181);
-}
-.v-tabs_slider {
-  position: absolute;
-  height: 2px;
-  background: #000;
-  left: 0;
-  bottom: 0;
-  transition: all .2s ease-in-out;
-}
-</style>
+<template>
+  <div class="v-tabs" :class="[`__${direction}`]">
+    <div class="v-tabs_inner">
+      <div
+        v-for="tab in list"
+        :key="tab[trackBy]"
+        ref="tabs"
+        class="v-tabs_tab"
+        :data-id="tab[trackBy]"
+        :class="{
+          __active: value && value[trackBy] === tab[trackBy],
+          _disabled: tab && tab._disabled
+        }"
+        @click="handleTabSelect(tab, $event)"
+      >
+        <slot name="single-tab" :tab="tab">
+          <template v-if="wrapTitle">
+            <div class="v-tabs_tab_title">
+              {{ tab[label] || "" }}
+            </div>
+          </template>
+          <template v-else>
+            {{ tab[label] || "" }}
+          </template>
+        </slot>
+      </div>
+    </div>
+    <div v-if="withSlider" :style="sliderStyle" class="v-tabs_slider" />
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    direction: {
+      type: String,
+      default: 'horizontal'
+    },
+    trackBy: {
+      type: String,
+      default: 'id'
+    },
+    label: {
+      type: String,
+      default: 'title'
+    },
+    list: {
+      type: Array,
+      required: true
+    },
+    value: {
+      type: Object
+    },
+    selectFirst: {
+      type: Boolean,
+      default: true
+    },
+    withSlider: {
+      type: Boolean,
+      default: false
+    },
+    initialTab: {
+      type: [Number, String],
+      default: null
+    },
+    wrapTitle: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    return {
+      sliderStyle: {}
+    }
+  },
+  mounted () {
+    if (this.selectFirst && this.list.length && !this.value) {
+      this.handleTabSelect(this.list[0])
+    }
+    if (this.initialTab && this.list.length && !this.value) {
+      const tab = this.list.find(tab => tab[this.trackBy] === this.initialTab)
+      tab && this.handleTabSelect(tab)
+    }
+  },
+  watch: {
+    value () {
+      this.withSlider && this.calcSlider()
+    }
+  },
+  methods: {
+    handleTabSelect (tab) {
+      this.$emit('input', tab)
+      this.calcSlider()
+    },
+    async calcSlider () {
+      if (!this.withSlider) {
+        return
+      }
+      await this.$nextTick()
+      const { left: tabsLeft } = this.$el.getBoundingClientRect()
+      const [currentTabEl] = this.$el.getElementsByClassName('__active')
+      const {
+        left: currentTabLeft,
+        width
+      } = currentTabEl.getBoundingClientRect()
+      const widthTabs = this.$el.scrollWidth
+      const screenWidth = window.innerWidth
+      const tabsLeftScroll = this.$el.scrollLeft
+      let leftPoisiton = null
+      if (widthTabs > screenWidth) {
+        leftPoisiton = currentTabLeft - tabsLeftScroll - tabsLeft
+      } else {
+        leftPoisiton = currentTabLeft - tabsLeft
+      }
+      this.sliderStyle = {
+        transform: `translateX(${leftPoisiton}px)`,
+        width: `${width}px`
+      }
+    }
+  }
+}
+</script>
+
+<style>
+.v-tabs {
+  position: relative;
+}
+.v-tabs_inner {
+  display: flex;
+}
+.v-tabs_tab {
+  padding: 10px 20px;
+  background: #ddd;
+  cursor: pointer;
+  user-select: none;
+}
+.v-tabs_tab.__active {
+  background: rgb(182, 181, 181);
+}
+.v-tabs.__disabled {
+  pointer-events: none;
+  opacity: 0.5;
+}
+.v-tabs_slider {
+  position: absolute;
+  height: 2px;
+  background: #000;
+  left: 0;
+  bottom: 0;
+  transition: all 0.2s ease-in-out;
+}
+</style>

package/src/export.js

@@ -1,3 +1,3 @@
-import VTabs from './components/VTabs'
-
+import VTabs from './components/VTabs'
+
 export default VTabs