primevue 2.4.2 → 2.7.0

package/tabview/TabView.vue

@@ -1,14 +1,24 @@
 <template>
-    <div class="p-tabview p-component">
-        <ul ref="nav" class="p-tabview-nav" role="tablist">
-            <li role="presentation" v-for="(tab, i) of tabs" :key="getKey(tab, i)" :class="[{'p-highlight': (d_activeIndex === i), 'p-disabled': isTabDisabled(tab)}]">
-                <a role="tab" class="p-tabview-nav-link" @click="onTabClick($event, i)" @keydown="onTabKeydown($event, i)" :tabindex="isTabDisabled(tab) ? null : '0'" :aria-selected="d_activeIndex" v-ripple>
-                    <span class="p-tabview-title" v-if="tab.header">{{tab.header}}</span>
-                    <TabPanelHeaderSlot :tab="tab" v-if="tab.$scopedSlots.header"/>
-                </a>
-            </li>
-            <li ref="inkbar" class="p-tabview-ink-bar"></li>
-        </ul>
+    <div :class="contentClasses">
+        <div class="p-tabview-nav-container">
+            <button v-if="scrollable && !backwardIsDisabled" ref="prevBtn" :class="prevButtonClasses" :disabled="backwardIsDisabled" @click="navBackward" type="button" v-ripple>
+				<span class="pi pi-chevron-left"></span>
+			</button>
+            <div ref="content" class="p-tabview-nav-content" @scroll="onScroll">
+                <ul ref="nav" class="p-tabview-nav" role="tablist">
+                    <li role="presentation" v-for="(tab, i) of tabs" :key="getKey(tab, i)" :class="[{'p-highlight': (d_activeIndex === i), 'p-disabled': isTabDisabled(tab)}]">
+                        <a role="tab" class="p-tabview-nav-link" @click="onTabClick($event, i)" @keydown="onTabKeydown($event, i)" :tabindex="isTabDisabled(tab) ? null : '0'" :aria-selected="d_activeIndex" v-ripple>
+                            <span class="p-tabview-title" v-if="tab.header">{{tab.header}}</span>
+                            <TabPanelHeaderSlot :tab="tab" v-if="tab.$scopedSlots.header"/>
+                        </a>
+                    </li>
+                    <li ref="inkbar" class="p-tabview-ink-bar"></li>
+                </ul>
+            </div>
+            <button v-if="scrollable && !forwardIsDisabled" ref="nextBtn" :class="nextButtonClasses" :disabled="forwardIsDisabled" @click="navForward" type="button" v-ripple>
+				<span class="pi pi-chevron-right"></span>
+			</button>
+        </div>
         <div class="p-tabview-panels">
             <slot></slot>
         </div>
@@ -38,17 +48,25 @@ export default {
         activeIndex: {
             type: Number,
             default: 0
+        },
+        scrollable: {
+            type: Boolean,
+            default: false
         }
     },
     data() {
         return {
             allChildren: [],
             d_activeIndex: this.activeIndex,
+            backwardIsDisabled: true,
+            forwardIsDisabled: false
         };
     },
     watch: {
         activeIndex(newValue) {
             this.d_activeIndex = newValue;
+
+            this.updateScrollBar(newValue);
         }
     },
     mounted() {
@@ -68,6 +86,8 @@ export default {
                     originalEvent: event,
                     index: i
                 });
+
+                this.updateScrollBar(i);
             }
 
             this.$emit('tab-click', {
@@ -87,14 +107,55 @@ export default {
                 this.$refs.inkbar.style.left =  DomHandler.getOffset(tabHeader).left - DomHandler.getOffset(this.$refs.nav).left + 'px';
             }
         },
+        updateScrollBar(index) {
+            let tabHeader = this.$refs.nav.children[index];
+            tabHeader.scrollIntoView({ block: 'nearest' });
+        },
+        updateButtonState() {
+            const content = this.$refs.content;
+            const { scrollLeft, scrollWidth } = content;
+            const width = DomHandler.getWidth(content);
+            this.backwardIsDisabled = scrollLeft === 0;
+            this.forwardIsDisabled = scrollLeft === scrollWidth - width;
+        },
         getKey(tab, index) {
             return tab.header ? ObjectUtils.resolveFieldData(tab, tab.header) : index;
         },
         isTabDisabled(tab) {
             return tab.disabled;
         },
+        onScroll(event) {
+            this.scrollable && this.updateButtonState();
+            event.preventDefault();
+        },
+        getVisibleButtonWidths() {
+            const { prevBtn, nextBtn } = this.$refs;
+            return [prevBtn, nextBtn].reduce((acc, el) => el ? acc + DomHandler.getWidth(el) : acc, 0);
+        },
+        navBackward() {
+            const content = this.$refs.content;
+            const width = DomHandler.getWidth(content) - this.getVisibleButtonWidths();
+            const pos = content.scrollLeft - width;
+            content.scrollLeft = pos <= 0 ? 0 : pos;
+        },
+        navForward() {
+            const content = this.$refs.content;
+            const width = DomHandler.getWidth(content) - this.getVisibleButtonWidths();
+            const pos = content.scrollLeft + width;
+            const lastPos = content.scrollWidth - width;
+            content.scrollLeft = pos >= lastPos ? lastPos : pos;
+        }
     },
     computed: {
+        contentClasses() {
+			return ['p-tabview p-component', {'p-tabview-scrollable': this.scrollable}];
+		},
+        prevButtonClasses() {
+            return ['p-tabview-nav-prev p-tabview-nav-btn p-link', {'p-disabled': this.backwardIsDisabled}]
+        },
+        nextButtonClasses() {
+            return ['p-tabview-nav-next p-tabview-nav-btn p-link', {'p-disabled': this.forwardIsDisabled}]
+        },
         tabs() {
             let tabs = [];
 
@@ -115,12 +176,28 @@ export default {
 </script>
 
 <style>
+.p-tabview-nav-container {
+    position: relative;
+}
+
+.p-tabview-scrollable .p-tabview-nav-container {
+    overflow: hidden;
+}
+
+.p-tabview-nav-content {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    overscroll-behavior: contain auto;
+}
+
 .p-tabview-nav {
     display: flex;
     margin: 0;
     padding: 0;
     list-style-type: none;
-    flex-wrap: wrap;
+    flex: 1 1 auto;
 }
 
 .p-tabview-nav-link {
@@ -144,5 +221,28 @@ export default {
 
 .p-tabview-title {
     line-height: 1;
+    white-space: nowrap;
+}
+
+.p-tabview-nav-btn {
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.p-tabview-nav-prev {
+    left: 0;
+}
+
+.p-tabview-nav-next {
+    right: 0;
+}
+
+.p-tabview-nav-content::-webkit-scrollbar {
+    display: none;
 }
 </style>

package/tabview/tabview.common.js

@@ -1034,7 +1034,7 @@ exports = module.exports = __webpack_require__("2350")(false);
 
 
 // module
-exports.push([module.i, ".p-tabview-nav{margin:0;padding:0;list-style-type:none;-ms-flex-wrap:wrap;flex-wrap:wrap}.p-tabview-nav,.p-tabview-nav-link{display:-webkit-box;display:-ms-flexbox;display:flex}.p-tabview-nav-link{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative;text-decoration:none;overflow:hidden}.p-tabview-ink-bar{display:none;z-index:1}.p-tabview-nav-link:focus{z-index:1}.p-tabview-title{line-height:1}", ""]);
+exports.push([module.i, ".p-tabview-nav-container{position:relative}.p-tabview-scrollable .p-tabview-nav-container{overflow:hidden}.p-tabview-nav-content{overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;scrollbar-width:none;-ms-scroll-chaining:contain auto;overscroll-behavior:contain auto}.p-tabview-nav{margin:0;padding:0;list-style-type:none;-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto}.p-tabview-nav,.p-tabview-nav-link{display:-webkit-box;display:-ms-flexbox;display:flex}.p-tabview-nav-link{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative;text-decoration:none;overflow:hidden}.p-tabview-ink-bar{display:none;z-index:1}.p-tabview-nav-link:focus{z-index:1}.p-tabview-title{line-height:1;white-space:nowrap}.p-tabview-nav-btn{position:absolute;top:0;z-index:2;height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.p-tabview-nav-prev{left:0}.p-tabview-nav-next{right:0}.p-tabview-nav-content::-webkit-scrollbar{display:none}", ""]);
 
 // exports
 
@@ -4608,12 +4608,12 @@ if (typeof window !== 'undefined') {
 // Indicate to webpack that this file can be concatenated
 /* harmony default export */ var setPublicPath = (null);
 
-// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"271bee23-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/tabview/TabView.vue?vue&type=template&id=3591101a&
-var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"p-tabview p-component"},[_c('ul',{ref:"nav",staticClass:"p-tabview-nav",attrs:{"role":"tablist"}},[_vm._l((_vm.tabs),function(tab,i){return _c('li',{key:_vm.getKey(tab, i),class:[{'p-highlight': (_vm.d_activeIndex === i), 'p-disabled': _vm.isTabDisabled(tab)}],attrs:{"role":"presentation"}},[_c('a',{directives:[{name:"ripple",rawName:"v-ripple"}],staticClass:"p-tabview-nav-link",attrs:{"role":"tab","tabindex":_vm.isTabDisabled(tab) ? null : '0',"aria-selected":_vm.d_activeIndex},on:{"click":function($event){return _vm.onTabClick($event, i)},"keydown":function($event){return _vm.onTabKeydown($event, i)}}},[(tab.header)?_c('span',{staticClass:"p-tabview-title"},[_vm._v(_vm._s(tab.header))]):_vm._e(),(tab.$scopedSlots.header)?_c('TabPanelHeaderSlot',{attrs:{"tab":tab}}):_vm._e()],1)])}),_c('li',{ref:"inkbar",staticClass:"p-tabview-ink-bar"})],2),_c('div',{staticClass:"p-tabview-panels"},[_vm._t("default")],2)])}
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"9d50adc0-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/tabview/TabView.vue?vue&type=template&id=170704d5&
+var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{class:_vm.contentClasses},[_c('div',{staticClass:"p-tabview-nav-container"},[(_vm.scrollable && !_vm.backwardIsDisabled)?_c('button',{directives:[{name:"ripple",rawName:"v-ripple"}],ref:"prevBtn",class:_vm.prevButtonClasses,attrs:{"disabled":_vm.backwardIsDisabled,"type":"button"},on:{"click":_vm.navBackward}},[_c('span',{staticClass:"pi pi-chevron-left"})]):_vm._e(),_c('div',{ref:"content",staticClass:"p-tabview-nav-content",on:{"scroll":_vm.onScroll}},[_c('ul',{ref:"nav",staticClass:"p-tabview-nav",attrs:{"role":"tablist"}},[_vm._l((_vm.tabs),function(tab,i){return _c('li',{key:_vm.getKey(tab, i),class:[{'p-highlight': (_vm.d_activeIndex === i), 'p-disabled': _vm.isTabDisabled(tab)}],attrs:{"role":"presentation"}},[_c('a',{directives:[{name:"ripple",rawName:"v-ripple"}],staticClass:"p-tabview-nav-link",attrs:{"role":"tab","tabindex":_vm.isTabDisabled(tab) ? null : '0',"aria-selected":_vm.d_activeIndex},on:{"click":function($event){return _vm.onTabClick($event, i)},"keydown":function($event){return _vm.onTabKeydown($event, i)}}},[(tab.header)?_c('span',{staticClass:"p-tabview-title"},[_vm._v(_vm._s(tab.header))]):_vm._e(),(tab.$scopedSlots.header)?_c('TabPanelHeaderSlot',{attrs:{"tab":tab}}):_vm._e()],1)])}),_c('li',{ref:"inkbar",staticClass:"p-tabview-ink-bar"})],2)]),(_vm.scrollable && !_vm.forwardIsDisabled)?_c('button',{directives:[{name:"ripple",rawName:"v-ripple"}],ref:"nextBtn",class:_vm.nextButtonClasses,attrs:{"disabled":_vm.forwardIsDisabled,"type":"button"},on:{"click":_vm.navForward}},[_c('span',{staticClass:"pi pi-chevron-right"})]):_vm._e()]),_c('div',{staticClass:"p-tabview-panels"},[_vm._t("default")],2)])}
 var staticRenderFns = []
 
 
-// CONCATENATED MODULE: ./src/components/tabview/TabView.vue?vue&type=template&id=3591101a&
+// CONCATENATED MODULE: ./src/components/tabview/TabView.vue?vue&type=template&id=170704d5&
 
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es6.number.constructor.js
 var es6_number_constructor = __webpack_require__("c5f6");
@@ -5224,6 +5224,11 @@ var DomHandler_DomHandler = /*#__PURE__*/function () {
     value: function isAndroid() {
       return /(android)/i.test(navigator.userAgent);
     }
+  }, {
+    key: "isTouchDevice",
+    value: function isTouchDevice() {
+      return 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
+    }
   }]);
 
   return DomHandler;
@@ -5236,6 +5241,9 @@ var es6_regexp_search = __webpack_require__("386d");
 // EXTERNAL MODULE: ./node_modules/core-js/modules/web.dom.iterable.js
 var web_dom_iterable = __webpack_require__("ac6a");
 
+// EXTERNAL MODULE: ./node_modules/core-js/modules/es6.array.iterator.js
+var es6_array_iterator = __webpack_require__("cadf");
+
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es6.object.keys.js
 var es6_object_keys = __webpack_require__("456d");
 
@@ -5282,6 +5290,7 @@ function typeof_typeof(obj) {
 
 
 
+
 function ObjectUtils_createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = ObjectUtils_unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
 
 function ObjectUtils_unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return ObjectUtils_arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return ObjectUtils_arrayLikeToArray(o, minLen); }
@@ -5608,6 +5617,16 @@ var Ripple = {
 //
 //
 //
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
 
 
 
@@ -5628,17 +5647,24 @@ var TabPanelHeaderSlot = {
     activeIndex: {
       type: Number,
       default: 0
+    },
+    scrollable: {
+      type: Boolean,
+      default: false
     }
   },
   data: function data() {
     return {
       allChildren: [],
-      d_activeIndex: this.activeIndex
+      d_activeIndex: this.activeIndex,
+      backwardIsDisabled: true,
+      forwardIsDisabled: false
     };
   },
   watch: {
     activeIndex: function activeIndex(newValue) {
       this.d_activeIndex = newValue;
+      this.updateScrollBar(newValue);
     }
   },
   mounted: function mounted() {
@@ -5657,6 +5683,7 @@ var TabPanelHeaderSlot = {
           originalEvent: event,
           index: i
         });
+        this.updateScrollBar(i);
       }
 
       this.$emit('tab-click', {
@@ -5676,14 +5703,68 @@ var TabPanelHeaderSlot = {
         this.$refs.inkbar.style.left = DomHandler_DomHandler.getOffset(tabHeader).left - DomHandler_DomHandler.getOffset(this.$refs.nav).left + 'px';
       }
     },
+    updateScrollBar: function updateScrollBar(index) {
+      var tabHeader = this.$refs.nav.children[index];
+      tabHeader.scrollIntoView({
+        block: 'nearest'
+      });
+    },
+    updateButtonState: function updateButtonState() {
+      var content = this.$refs.content;
+      var scrollLeft = content.scrollLeft,
+          scrollWidth = content.scrollWidth;
+      var width = DomHandler_DomHandler.getWidth(content);
+      this.backwardIsDisabled = scrollLeft === 0;
+      this.forwardIsDisabled = scrollLeft === scrollWidth - width;
+    },
     getKey: function getKey(tab, index) {
       return tab.header ? ObjectUtils_ObjectUtils.resolveFieldData(tab, tab.header) : index;
     },
     isTabDisabled: function isTabDisabled(tab) {
       return tab.disabled;
+    },
+    onScroll: function onScroll(event) {
+      this.scrollable && this.updateButtonState();
+      event.preventDefault();
+    },
+    getVisibleButtonWidths: function getVisibleButtonWidths() {
+      var _this$$refs = this.$refs,
+          prevBtn = _this$$refs.prevBtn,
+          nextBtn = _this$$refs.nextBtn;
+      return [prevBtn, nextBtn].reduce(function (acc, el) {
+        return el ? acc + DomHandler_DomHandler.getWidth(el) : acc;
+      }, 0);
+    },
+    navBackward: function navBackward() {
+      var content = this.$refs.content;
+      var width = DomHandler_DomHandler.getWidth(content) - this.getVisibleButtonWidths();
+      var pos = content.scrollLeft - width;
+      content.scrollLeft = pos <= 0 ? 0 : pos;
+    },
+    navForward: function navForward() {
+      var content = this.$refs.content;
+      var width = DomHandler_DomHandler.getWidth(content) - this.getVisibleButtonWidths();
+      var pos = content.scrollLeft + width;
+      var lastPos = content.scrollWidth - width;
+      content.scrollLeft = pos >= lastPos ? lastPos : pos;
     }
   },
   computed: {
+    contentClasses: function contentClasses() {
+      return ['p-tabview p-component', {
+        'p-tabview-scrollable': this.scrollable
+      }];
+    },
+    prevButtonClasses: function prevButtonClasses() {
+      return ['p-tabview-nav-prev p-tabview-nav-btn p-link', {
+        'p-disabled': this.backwardIsDisabled
+      }];
+    },
+    nextButtonClasses: function nextButtonClasses() {
+      return ['p-tabview-nav-next p-tabview-nav-btn p-link', {
+        'p-disabled': this.forwardIsDisabled
+      }];
+    },
     tabs: function tabs() {
       var tabs = [];
 

package/tabview/tabview.umd.js

@@ -1043,7 +1043,7 @@ exports = module.exports = __webpack_require__("2350")(false);
 
 
 // module
-exports.push([module.i, ".p-tabview-nav{margin:0;padding:0;list-style-type:none;-ms-flex-wrap:wrap;flex-wrap:wrap}.p-tabview-nav,.p-tabview-nav-link{display:-webkit-box;display:-ms-flexbox;display:flex}.p-tabview-nav-link{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative;text-decoration:none;overflow:hidden}.p-tabview-ink-bar{display:none;z-index:1}.p-tabview-nav-link:focus{z-index:1}.p-tabview-title{line-height:1}", ""]);
+exports.push([module.i, ".p-tabview-nav-container{position:relative}.p-tabview-scrollable .p-tabview-nav-container{overflow:hidden}.p-tabview-nav-content{overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;scrollbar-width:none;-ms-scroll-chaining:contain auto;overscroll-behavior:contain auto}.p-tabview-nav{margin:0;padding:0;list-style-type:none;-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto}.p-tabview-nav,.p-tabview-nav-link{display:-webkit-box;display:-ms-flexbox;display:flex}.p-tabview-nav-link{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative;text-decoration:none;overflow:hidden}.p-tabview-ink-bar{display:none;z-index:1}.p-tabview-nav-link:focus{z-index:1}.p-tabview-title{line-height:1;white-space:nowrap}.p-tabview-nav-btn{position:absolute;top:0;z-index:2;height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.p-tabview-nav-prev{left:0}.p-tabview-nav-next{right:0}.p-tabview-nav-content::-webkit-scrollbar{display:none}", ""]);
 
 // exports
 
@@ -4617,12 +4617,12 @@ if (typeof window !== 'undefined') {
 // Indicate to webpack that this file can be concatenated
 /* harmony default export */ var setPublicPath = (null);
 
-// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"271bee23-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/tabview/TabView.vue?vue&type=template&id=3591101a&
-var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"p-tabview p-component"},[_c('ul',{ref:"nav",staticClass:"p-tabview-nav",attrs:{"role":"tablist"}},[_vm._l((_vm.tabs),function(tab,i){return _c('li',{key:_vm.getKey(tab, i),class:[{'p-highlight': (_vm.d_activeIndex === i), 'p-disabled': _vm.isTabDisabled(tab)}],attrs:{"role":"presentation"}},[_c('a',{directives:[{name:"ripple",rawName:"v-ripple"}],staticClass:"p-tabview-nav-link",attrs:{"role":"tab","tabindex":_vm.isTabDisabled(tab) ? null : '0',"aria-selected":_vm.d_activeIndex},on:{"click":function($event){return _vm.onTabClick($event, i)},"keydown":function($event){return _vm.onTabKeydown($event, i)}}},[(tab.header)?_c('span',{staticClass:"p-tabview-title"},[_vm._v(_vm._s(tab.header))]):_vm._e(),(tab.$scopedSlots.header)?_c('TabPanelHeaderSlot',{attrs:{"tab":tab}}):_vm._e()],1)])}),_c('li',{ref:"inkbar",staticClass:"p-tabview-ink-bar"})],2),_c('div',{staticClass:"p-tabview-panels"},[_vm._t("default")],2)])}
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"9d50adc0-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/tabview/TabView.vue?vue&type=template&id=170704d5&
+var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{class:_vm.contentClasses},[_c('div',{staticClass:"p-tabview-nav-container"},[(_vm.scrollable && !_vm.backwardIsDisabled)?_c('button',{directives:[{name:"ripple",rawName:"v-ripple"}],ref:"prevBtn",class:_vm.prevButtonClasses,attrs:{"disabled":_vm.backwardIsDisabled,"type":"button"},on:{"click":_vm.navBackward}},[_c('span',{staticClass:"pi pi-chevron-left"})]):_vm._e(),_c('div',{ref:"content",staticClass:"p-tabview-nav-content",on:{"scroll":_vm.onScroll}},[_c('ul',{ref:"nav",staticClass:"p-tabview-nav",attrs:{"role":"tablist"}},[_vm._l((_vm.tabs),function(tab,i){return _c('li',{key:_vm.getKey(tab, i),class:[{'p-highlight': (_vm.d_activeIndex === i), 'p-disabled': _vm.isTabDisabled(tab)}],attrs:{"role":"presentation"}},[_c('a',{directives:[{name:"ripple",rawName:"v-ripple"}],staticClass:"p-tabview-nav-link",attrs:{"role":"tab","tabindex":_vm.isTabDisabled(tab) ? null : '0',"aria-selected":_vm.d_activeIndex},on:{"click":function($event){return _vm.onTabClick($event, i)},"keydown":function($event){return _vm.onTabKeydown($event, i)}}},[(tab.header)?_c('span',{staticClass:"p-tabview-title"},[_vm._v(_vm._s(tab.header))]):_vm._e(),(tab.$scopedSlots.header)?_c('TabPanelHeaderSlot',{attrs:{"tab":tab}}):_vm._e()],1)])}),_c('li',{ref:"inkbar",staticClass:"p-tabview-ink-bar"})],2)]),(_vm.scrollable && !_vm.forwardIsDisabled)?_c('button',{directives:[{name:"ripple",rawName:"v-ripple"}],ref:"nextBtn",class:_vm.nextButtonClasses,attrs:{"disabled":_vm.forwardIsDisabled,"type":"button"},on:{"click":_vm.navForward}},[_c('span',{staticClass:"pi pi-chevron-right"})]):_vm._e()]),_c('div',{staticClass:"p-tabview-panels"},[_vm._t("default")],2)])}
 var staticRenderFns = []
 
 
-// CONCATENATED MODULE: ./src/components/tabview/TabView.vue?vue&type=template&id=3591101a&
+// CONCATENATED MODULE: ./src/components/tabview/TabView.vue?vue&type=template&id=170704d5&
 
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es6.number.constructor.js
 var es6_number_constructor = __webpack_require__("c5f6");
@@ -5233,6 +5233,11 @@ var DomHandler_DomHandler = /*#__PURE__*/function () {
     value: function isAndroid() {
       return /(android)/i.test(navigator.userAgent);
     }
+  }, {
+    key: "isTouchDevice",
+    value: function isTouchDevice() {
+      return 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
+    }
   }]);
 
   return DomHandler;
@@ -5245,6 +5250,9 @@ var es6_regexp_search = __webpack_require__("386d");
 // EXTERNAL MODULE: ./node_modules/core-js/modules/web.dom.iterable.js
 var web_dom_iterable = __webpack_require__("ac6a");
 
+// EXTERNAL MODULE: ./node_modules/core-js/modules/es6.array.iterator.js
+var es6_array_iterator = __webpack_require__("cadf");
+
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es6.object.keys.js
 var es6_object_keys = __webpack_require__("456d");
 
@@ -5291,6 +5299,7 @@ function typeof_typeof(obj) {
 
 
 
+
 function ObjectUtils_createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = ObjectUtils_unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
 
 function ObjectUtils_unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return ObjectUtils_arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return ObjectUtils_arrayLikeToArray(o, minLen); }
@@ -5617,6 +5626,16 @@ var Ripple = {
 //
 //
 //
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
 
 
 
@@ -5637,17 +5656,24 @@ var TabPanelHeaderSlot = {
     activeIndex: {
       type: Number,
       default: 0
+    },
+    scrollable: {
+      type: Boolean,
+      default: false
     }
   },
   data: function data() {
     return {
       allChildren: [],
-      d_activeIndex: this.activeIndex
+      d_activeIndex: this.activeIndex,
+      backwardIsDisabled: true,
+      forwardIsDisabled: false
     };
   },
   watch: {
     activeIndex: function activeIndex(newValue) {
       this.d_activeIndex = newValue;
+      this.updateScrollBar(newValue);
     }
   },
   mounted: function mounted() {
@@ -5666,6 +5692,7 @@ var TabPanelHeaderSlot = {
           originalEvent: event,
           index: i
         });
+        this.updateScrollBar(i);
       }
 
       this.$emit('tab-click', {
@@ -5685,14 +5712,68 @@ var TabPanelHeaderSlot = {
         this.$refs.inkbar.style.left = DomHandler_DomHandler.getOffset(tabHeader).left - DomHandler_DomHandler.getOffset(this.$refs.nav).left + 'px';
       }
     },
+    updateScrollBar: function updateScrollBar(index) {
+      var tabHeader = this.$refs.nav.children[index];
+      tabHeader.scrollIntoView({
+        block: 'nearest'
+      });
+    },
+    updateButtonState: function updateButtonState() {
+      var content = this.$refs.content;
+      var scrollLeft = content.scrollLeft,
+          scrollWidth = content.scrollWidth;
+      var width = DomHandler_DomHandler.getWidth(content);
+      this.backwardIsDisabled = scrollLeft === 0;
+      this.forwardIsDisabled = scrollLeft === scrollWidth - width;
+    },
     getKey: function getKey(tab, index) {
       return tab.header ? ObjectUtils_ObjectUtils.resolveFieldData(tab, tab.header) : index;
     },
     isTabDisabled: function isTabDisabled(tab) {
       return tab.disabled;
+    },
+    onScroll: function onScroll(event) {
+      this.scrollable && this.updateButtonState();
+      event.preventDefault();
+    },
+    getVisibleButtonWidths: function getVisibleButtonWidths() {
+      var _this$$refs = this.$refs,
+          prevBtn = _this$$refs.prevBtn,
+          nextBtn = _this$$refs.nextBtn;
+      return [prevBtn, nextBtn].reduce(function (acc, el) {
+        return el ? acc + DomHandler_DomHandler.getWidth(el) : acc;
+      }, 0);
+    },
+    navBackward: function navBackward() {
+      var content = this.$refs.content;
+      var width = DomHandler_DomHandler.getWidth(content) - this.getVisibleButtonWidths();
+      var pos = content.scrollLeft - width;
+      content.scrollLeft = pos <= 0 ? 0 : pos;
+    },
+    navForward: function navForward() {
+      var content = this.$refs.content;
+      var width = DomHandler_DomHandler.getWidth(content) - this.getVisibleButtonWidths();
+      var pos = content.scrollLeft + width;
+      var lastPos = content.scrollWidth - width;
+      content.scrollLeft = pos >= lastPos ? lastPos : pos;
     }
   },
   computed: {
+    contentClasses: function contentClasses() {
+      return ['p-tabview p-component', {
+        'p-tabview-scrollable': this.scrollable
+      }];
+    },
+    prevButtonClasses: function prevButtonClasses() {
+      return ['p-tabview-nav-prev p-tabview-nav-btn p-link', {
+        'p-disabled': this.backwardIsDisabled
+      }];
+    },
+    nextButtonClasses: function nextButtonClasses() {
+      return ['p-tabview-nav-next p-tabview-nav-btn p-link', {
+        'p-disabled': this.forwardIsDisabled
+      }];
+    },
     tabs: function tabs() {
       var tabs = [];