primevue 2.5.1 → 2.9.0

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":"0538004c-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":"b9fe9a72-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");
@@ -4675,6 +4675,11 @@ function _defineProperties(target, props) {
 function _createClass(Constructor, protoProps, staticProps) {
   if (protoProps) _defineProperties(Constructor.prototype, protoProps);
   if (staticProps) _defineProperties(Constructor, staticProps);
+
+  define_property_default()(Constructor, "prototype", {
+    writable: false
+  });
+
   return Constructor;
 }
 // CONCATENATED MODULE: ./src/components/utils/DomHandler.js
@@ -5207,6 +5212,12 @@ var DomHandler_DomHandler = /*#__PURE__*/function () {
 
       return visibleFocusableElements;
     }
+  }, {
+    key: "getFirstFocusableElement",
+    value: function getFirstFocusableElement(element) {
+      var focusableElements = this.getFocusableElements(element);
+      return focusableElements.length > 0 ? focusableElements[0] : null;
+    }
   }, {
     key: "isClickable",
     value: function isClickable(element) {
@@ -5214,6 +5225,17 @@ var DomHandler_DomHandler = /*#__PURE__*/function () {
       var parentNode = element.parentElement && element.parentElement.nodeName;
       return targetNode == 'INPUT' || targetNode == 'BUTTON' || targetNode == 'A' || parentNode == 'INPUT' || parentNode == 'BUTTON' || parentNode == 'A' || this.hasClass(element, 'p-button') || this.hasClass(element.parentElement, 'p-button') || this.hasClass(element.parentElement, 'p-checkbox') || this.hasClass(element.parentElement, 'p-radiobutton');
     }
+  }, {
+    key: "applyStyle",
+    value: function applyStyle(element, style) {
+      if (typeof style === 'string') {
+        element.style.cssText = style;
+      } else {
+        for (var prop in style) {
+          element.style[prop] = style[prop];
+        }
+      }
+    }
   }, {
     key: "isIOS",
     value: function isIOS() {
@@ -5224,6 +5246,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;
@@ -5253,20 +5280,14 @@ var iterator_default = /*#__PURE__*/__webpack_require__.n(iterator);
 // CONCATENATED MODULE: ./node_modules/@babel/runtime-corejs2/helpers/esm/typeof.js
 
 
-function typeof_typeof(obj) {
+function _typeof(obj) {
   "@babel/helpers - typeof";
 
-  if (typeof symbol_default.a === "function" && typeof iterator_default.a === "symbol") {
-    typeof_typeof = function _typeof(obj) {
-      return typeof obj;
-    };
-  } else {
-    typeof_typeof = function _typeof(obj) {
-      return obj && typeof symbol_default.a === "function" && obj.constructor === symbol_default.a && obj !== symbol_default.a.prototype ? "symbol" : typeof obj;
-    };
-  }
-
-  return typeof_typeof(obj);
+  return _typeof = "function" == typeof symbol_default.a && "symbol" == typeof iterator_default.a ? function (obj) {
+    return typeof obj;
+  } : function (obj) {
+    return obj && "function" == typeof symbol_default.a && obj.constructor === symbol_default.a && obj !== symbol_default.a.prototype ? "symbol" : typeof obj;
+  }, _typeof(obj);
 }
 // CONCATENATED MODULE: ./src/components/utils/ObjectUtils.js
 
@@ -5307,7 +5328,7 @@ var ObjectUtils_ObjectUtils = /*#__PURE__*/function () {
     value: function deepEquals(a, b) {
       if (a === b) return true;
 
-      if (a && b && typeof_typeof(a) == 'object' && typeof_typeof(b) == 'object') {
+      if (a && b && _typeof(a) == 'object' && _typeof(b) == 'object') {
         var arrA = Array.isArray(a),
             arrB = Array.isArray(b),
             i,
@@ -5509,6 +5530,19 @@ var ObjectUtils_ObjectUtils = /*#__PURE__*/function () {
 
       return str;
     }
+  }, {
+    key: "getVNodeProp",
+    value: function getVNodeProp(vnode, prop) {
+      var props = vnode._props;
+
+      if (props) {
+        var kebapProp = prop.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+        var propName = Object.prototype.hasOwnProperty.call(props, kebapProp) ? kebapProp : prop;
+        return props[propName];
+      }
+
+      return null;
+    }
   }]);
 
   return ObjectUtils;
@@ -5612,6 +5646,16 @@ var Ripple = {
 //
 //
 //
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
 
 
 
@@ -5632,17 +5676,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() {
@@ -5661,6 +5712,7 @@ var TabPanelHeaderSlot = {
           originalEvent: event,
           index: i
         });
+        this.updateScrollBar(i);
       }
 
       this.$emit('tab-click', {
@@ -5680,14 +5732,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":"0538004c-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":"b9fe9a72-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");
@@ -4684,6 +4684,11 @@ function _defineProperties(target, props) {
 function _createClass(Constructor, protoProps, staticProps) {
   if (protoProps) _defineProperties(Constructor.prototype, protoProps);
   if (staticProps) _defineProperties(Constructor, staticProps);
+
+  define_property_default()(Constructor, "prototype", {
+    writable: false
+  });
+
   return Constructor;
 }
 // CONCATENATED MODULE: ./src/components/utils/DomHandler.js
@@ -5216,6 +5221,12 @@ var DomHandler_DomHandler = /*#__PURE__*/function () {
 
       return visibleFocusableElements;
     }
+  }, {
+    key: "getFirstFocusableElement",
+    value: function getFirstFocusableElement(element) {
+      var focusableElements = this.getFocusableElements(element);
+      return focusableElements.length > 0 ? focusableElements[0] : null;
+    }
   }, {
     key: "isClickable",
     value: function isClickable(element) {
@@ -5223,6 +5234,17 @@ var DomHandler_DomHandler = /*#__PURE__*/function () {
       var parentNode = element.parentElement && element.parentElement.nodeName;
       return targetNode == 'INPUT' || targetNode == 'BUTTON' || targetNode == 'A' || parentNode == 'INPUT' || parentNode == 'BUTTON' || parentNode == 'A' || this.hasClass(element, 'p-button') || this.hasClass(element.parentElement, 'p-button') || this.hasClass(element.parentElement, 'p-checkbox') || this.hasClass(element.parentElement, 'p-radiobutton');
     }
+  }, {
+    key: "applyStyle",
+    value: function applyStyle(element, style) {
+      if (typeof style === 'string') {
+        element.style.cssText = style;
+      } else {
+        for (var prop in style) {
+          element.style[prop] = style[prop];
+        }
+      }
+    }
   }, {
     key: "isIOS",
     value: function isIOS() {
@@ -5233,6 +5255,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;
@@ -5262,20 +5289,14 @@ var iterator_default = /*#__PURE__*/__webpack_require__.n(iterator);
 // CONCATENATED MODULE: ./node_modules/@babel/runtime-corejs2/helpers/esm/typeof.js
 
 
-function typeof_typeof(obj) {
+function _typeof(obj) {
   "@babel/helpers - typeof";
 
-  if (typeof symbol_default.a === "function" && typeof iterator_default.a === "symbol") {
-    typeof_typeof = function _typeof(obj) {
-      return typeof obj;
-    };
-  } else {
-    typeof_typeof = function _typeof(obj) {
-      return obj && typeof symbol_default.a === "function" && obj.constructor === symbol_default.a && obj !== symbol_default.a.prototype ? "symbol" : typeof obj;
-    };
-  }
-
-  return typeof_typeof(obj);
+  return _typeof = "function" == typeof symbol_default.a && "symbol" == typeof iterator_default.a ? function (obj) {
+    return typeof obj;
+  } : function (obj) {
+    return obj && "function" == typeof symbol_default.a && obj.constructor === symbol_default.a && obj !== symbol_default.a.prototype ? "symbol" : typeof obj;
+  }, _typeof(obj);
 }
 // CONCATENATED MODULE: ./src/components/utils/ObjectUtils.js
 
@@ -5316,7 +5337,7 @@ var ObjectUtils_ObjectUtils = /*#__PURE__*/function () {
     value: function deepEquals(a, b) {
       if (a === b) return true;
 
-      if (a && b && typeof_typeof(a) == 'object' && typeof_typeof(b) == 'object') {
+      if (a && b && _typeof(a) == 'object' && _typeof(b) == 'object') {
         var arrA = Array.isArray(a),
             arrB = Array.isArray(b),
             i,
@@ -5518,6 +5539,19 @@ var ObjectUtils_ObjectUtils = /*#__PURE__*/function () {
 
       return str;
     }
+  }, {
+    key: "getVNodeProp",
+    value: function getVNodeProp(vnode, prop) {
+      var props = vnode._props;
+
+      if (props) {
+        var kebapProp = prop.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+        var propName = Object.prototype.hasOwnProperty.call(props, kebapProp) ? kebapProp : prop;
+        return props[propName];
+      }
+
+      return null;
+    }
   }]);
 
   return ObjectUtils;
@@ -5621,6 +5655,16 @@ var Ripple = {
 //
 //
 //
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
 
 
 
@@ -5641,17 +5685,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() {
@@ -5670,6 +5721,7 @@ var TabPanelHeaderSlot = {
           originalEvent: event,
           index: i
         });
+        this.updateScrollBar(i);
       }
 
       this.$emit('tab-click', {
@@ -5689,14 +5741,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 = [];