Removed spaces with lint

.eslintrc.js

@@ -9,10 +9,10 @@ module.exports = {
     ],
     rules: {
       'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
-      'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
+      'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+      'no-trailing-spaces': 'error'
     },
     parserOptions: {
       parser: 'babel-eslint'
     }
   }
-  

build-lib.js

@@ -20,7 +20,7 @@ fs.readdirSync(path.resolve(__dirname, './src/components/')).forEach(folder => {
             execSync(
                 `node ${vueCliServicePath} build src/components/${folder}/${file} --target lib --name ${filename} --dest components/${folder} --no-clean `
             )
-            
+
             execSync(
                 `node ${babelPath} src/components/${folder}/${file} --out-file components/${folder}/${file} --config-file=./.babelrc-lib`
             )

gulpfile.js

@@ -10,7 +10,7 @@ gulp.task('copy-components', function() {
     return gulp.src(['src/components/**/!(*.js)*'])
         .pipe(gulp.dest('./components'));
 });
-    
+
 gulp.task('build-css', function() {
     return gulp.src([
         'src/components/common/Common.css',
@@ -44,4 +44,3 @@ gulp.task('build-exports', function() {
 //Building project with run sequence
 gulp.task('build-resources', ['build-css','images', 'build-themes']);
 
-        

src/AppTopBar.vue

@@ -55,7 +55,7 @@ export default {
             let themeElement = document.getElementById('theme-link');
             themeElement.setAttribute('href', themeElement.getAttribute('href').replace(this.theme, theme));
             this.theme = theme;
-            
+
             if (dark) {
                 if (!this.darkDemoStyle) {
                     this.darkDemoStyle = document.createElement('style');

src/components/accordion/Accordion.vue

@@ -52,7 +52,7 @@ export default {
     },
     methods: {
         onTabClick(event, tab) {
-            if (!tab.disabled) {              
+            if (!tab.disabled) {
                 if (!this.multiple && !tab.d_active) {
                     this.tabs.forEach(tab => tab.d_active = false);
                 }
@@ -73,7 +73,7 @@ export default {
             }
         },
         isSelected(index) {
-            return this.props.multiple ? (this.d_activeTabIndex && this.d_activeTabIndex.indexOf(index) >= 0) : this.d_activeTabIndex === index;  
+            return this.props.multiple ? (this.d_activeTabIndex && this.d_activeTabIndex.indexOf(index) >= 0) : this.d_activeTabIndex === index;
         }
     },
     components: {
@@ -83,41 +83,41 @@ export default {
 </script>
 
 <style>
-.p-accordion { 
-    width: 100%; 
+.p-accordion {
+    width: 100%;
 }
 
-.p-accordion .p-accordion-header { 
-    cursor: pointer; 
-    position: relative; 
-    margin-top: 1px; 
-    zoom: 1; 
+.p-accordion .p-accordion-header {
+    cursor: pointer;
+    position: relative;
+    margin-top: 1px;
+    zoom: 1;
 }
 
-.p-accordion .p-accordion-header a { 
-    display: block; 
+.p-accordion .p-accordion-header a {
+    display: block;
     padding: .5em;
 }
 
 .p-accordion .p-accordion-toggle-icon,
 .p-accordion .p-accordion-header-text {
-    vertical-align: middle;   
-}
-
-.p-accordion .p-accordion-header a > span { 
-    display: inline-block; 
     vertical-align: middle;
 }
 
-.p-accordion .p-accordion-content { 
+.p-accordion .p-accordion-header a > span {
+    display: inline-block;
+    vertical-align: middle;
+}
+
+.p-accordion .p-accordion-content {
     padding: 1em;
     border-top: 0;
     zoom: 1;
 }
 
-.p-accordion .p-accordion-header.p-disabled, 
-.p-accordion .p-accordion-header.p-disabled a { 
-    cursor: default; 
+.p-accordion .p-accordion-header.p-disabled,
+.p-accordion .p-accordion-header.p-disabled a {
+    cursor: default;
 }
 
 .p-accordion-content-wrapper-enter,

src/components/autocomplete/AutoComplete.vue

@@ -16,7 +16,7 @@
             <div ref="overlay" class="p-autocomplete-panel" :style="{'max-height': scrollHeight}" v-if="overlayVisible">
                 <ul class="p-autocomplete-items p-autocomplete-list p-component">
                     <li v-for="(item, i) of suggestions" class="p-autocomplete-list-item" :key="i" @click="selectItem($event, item)">
-                        <slot name="item" :item="item" :index="i">  
+                        <slot name="item" :item="item" :index="i">
                             {{getItemContent(item)}}
                         </slot>
                     </li>
@@ -213,12 +213,12 @@ export default {
             if (this.timeout) {
                 clearTimeout(this.timeout);
             }
-            
+
             let query = event.target.value;
             if (!this.multiple) {
                 this.$emit('input', query);
             }
-            
+
             if (query.length === 0) {
                 this.hideOverlay();
                 this.$emit('clear');
@@ -256,11 +256,11 @@ export default {
                                 DomHandler.removeClass(highlightItem, 'p-highlight');
                                 DomHandler.scrollInView(this.$refs.overlay, nextElement);
                             }
-                        }    
+                        }
                         else {
                             DomHandler.addClass(this.$refs.overlay.firstChild.firstChild, 'p-highlight');
                         }
-                        
+
                         event.preventDefault();
                     break;
 
@@ -274,7 +274,7 @@ export default {
                                 DomHandler.scrollInView(this.$refs.overlay, previousElement);
                             }
                         }
-                        
+
                         event.preventDefault();
                     break;
 
@@ -284,7 +284,7 @@ export default {
                             this.selectItem(event, this.suggestions[DomHandler.index(highlightItem)]);
                             this.hideOverlay();
                         }
-                        
+
                         event.preventDefault();
                     break;
 
@@ -299,14 +299,14 @@ export default {
                         if (highlightItem) {
                             this.selectItem(event, this.suggestions[DomHandler.index(highlightItem)]);
                         }
-                        
+
                         this.hideOverlay();
                     break;
 
                     default:
                     break;
                 }
-            } 
+            }
 
             if (this.multiple) {
                 switch(event.which) {
@@ -315,7 +315,7 @@ export default {
                         if (this.value && this.value.length && !this.$refs.input.value) {
                             let removedValue = this.value[this.value.length - 1];
                             let newValue = this.value.slice(0, -1);
-                            
+
                             this.$emit('input', newValue);
                             this.$emit('unselect', {
                                 originalEvent: event,
@@ -339,7 +339,7 @@ export default {
                     }
                 }
             }
-            
+
             return selected;
         }
     },
@@ -363,7 +363,7 @@ export default {
         },
         inputClass() {
             return ['p-autocomplete-input p-inputtext p-component', {
-                'p-autocomplete-dd-input': this.dropdown, 
+                'p-autocomplete-dd-input': this.dropdown,
                 'p-disabled': this.$attrs.disabled
             }];
         },
@@ -526,16 +526,16 @@ export default {
 
 .p-autocomplete-dd input,
 .p-autocomplete-dd .p-autocomplete-multiple-container {
-     -moz-border-radius-topright: 0px; 
+     -moz-border-radius-topright: 0px;
      -webkit-border-top-right-radius: 0px;
      border-top-right-radius: 0px;
      -moz-border-radius-bottomright: 0px;
      -webkit-border-bottom-right-radius: 0px;
      border-bottom-right-radius: 0px;
  }
- 
+
 .p-autocomplete-dd .p-autocomplete-dropdown {
-     -moz-border-radius-topleft: 0px; 
+     -moz-border-radius-topleft: 0px;
      -webkit-border-top-left-radius: 0px;
      border-top-left-radius: 0px;
      -moz-border-radius-bottomleft: 0px;

src/components/button/Button.vue

@@ -34,7 +34,7 @@ export default {
             return [
                 this.icon,
                 {
-                    'p-button-icon-left': this.iconPos === 'left', 
+                    'p-button-icon-left': this.iconPos === 'left',
                     'p-button-icon-right': this.iconPos === 'right'
                 }
             ]

src/components/calendar/Calendar.vue

@@ -359,7 +359,7 @@ export default {
                             break;
                         }
                     }
-                    
+
                     return selected;
                 }
                 else if( this.isRangeSelection()) {
@@ -368,12 +368,12 @@ export default {
                     else {
                         return this.isDateEquals(this.value[0], dateMeta);
                     }
-                        
+
                 }
             }
             else {
                 return false;
-            }         
+            }
         },
         isMonthSelected(month) {
             return this.value ? (this.value.getMonth() === month && this.value.getFullYear() === this.currentYear) : false;
@@ -390,7 +390,7 @@ export default {
                 let date = new Date(dateMeta.year, dateMeta.month, dateMeta.day);
                 return start.getTime() <= date.getTime() && end.getTime() >= date.getTime();
             }
-            
+
             return between;
         },
         getFirstDayOfMonthIndex(month, year) {
@@ -398,7 +398,7 @@ export default {
             day.setDate(1);
             day.setMonth(month);
             day.setFullYear(year);
-            
+
             let dayIndex = day.getDay() + this.sundayIndex;
             return dayIndex >= 7 ? dayIndex - 7 : dayIndex;
         },
@@ -411,7 +411,7 @@ export default {
         },
         getPreviousMonthAndYear(month, year) {
             let m, y;
-            
+
             if (month === 0) {
                 m = 11;
                 y = year - 1;
@@ -420,12 +420,12 @@ export default {
                 m = month - 1;
                 y = year;
             }
-            
+
             return {'month':m, 'year': y};
         },
         getNextMonthAndYear(month, year) {
             let m, y;
-            
+
             if (month === 11) {
                 m = 0;
                 y = year + 1;
@@ -434,7 +434,7 @@ export default {
                 m = month + 1;
                 y = year;
             }
-            
+
             return {'month':m,'year':y};
         },
         daylightSavingAdjust(date) {
@@ -443,7 +443,7 @@ export default {
             }
 
             date.setHours(date.getHours() > 12 ? date.getHours() + 2 : 0);
-            
+
             return date;
         },
         isToday(today, day, month, year) {
@@ -458,7 +458,7 @@ export default {
             if (otherMonth && !this.selectOtherMonths) {
                 return false;
             }
-            
+
             if (this.minDate) {
                 if (this.minDate.getFullYear() > year) {
                     validMin = false;
@@ -474,7 +474,7 @@ export default {
                     }
                 }
             }
-            
+
             if (this.maxDate) {
                 if (this.maxDate.getFullYear() < year) {
                     validMax = false;
@@ -490,15 +490,15 @@ export default {
                     }
                 }
             }
-            
+
             if (this.disabledDates) {
                 validDate = !this.isDateDisabled(day,month,year);
             }
-        
+
             if (this.disabledDays) {
                 validDay = !this.isDayDisabled(day,month,year)
             }
-            
+
             return validMin && validMax && validDate && validDay;
         },
         onOverlayEnter() {
@@ -533,7 +533,7 @@ export default {
                 else {
                     this.currentMonth--;
                 }
-            
+
                 this.$emit('month-change', {month: this.currentMonth, year: this.currentYear});
             }
         },
@@ -555,7 +555,7 @@ export default {
                 else {
                     this.currentMonth++;
                 }
-                
+
                 this.$emit('month-change', {month: this.currentMonth , year: this.currentYear});
             }
         },
@@ -566,14 +566,14 @@ export default {
             this.currentYear++;
         },
         isEnabled() {
-            return !this.$attrs.disabled && !this.$attrs.readonly;  
+            return !this.$attrs.disabled && !this.$attrs.readonly;
         },
         updateCurrentTimeMeta(date) {
             const hours = date.getHours();
 
             if (this.hourFormat === '12') {
                 this.pm = hours > 11;
-                
+
                 if (hours >= 12)
                     this.currentHour = (hours == 12) ? 12 : hours - 12;
                 else
@@ -582,7 +582,7 @@ export default {
             else {
                 this.currentHour = date.getHours();
             }
-            
+
             this.currentMinute = date.getMinutes();
             this.currentSecond = date.getSeconds();
         },
@@ -615,8 +615,8 @@ export default {
                 this.enableModality();
             }
             else if (this.$refs.overlay) {
-                DomHandler.relativePosition(this.$refs.overlay, this.$el);  
-            }        
+                DomHandler.relativePosition(this.$refs.overlay, this.$el);
+            }
         },
         onButtonClick() {
             if (this.isEnabled()) {
@@ -637,7 +637,7 @@ export default {
                     }
                 }
             }
-            
+
             return false;
         },
         isDayDisabled(day, month, year) {
@@ -660,7 +660,7 @@ export default {
             if (this.$attrs.disabled || !dateMeta.selectable) {
                 return;
             }
-            
+
             if (this.isMultipleSelection() && this.isSelected(dateMeta)) {
                 let newValue = this.value.filter(date => !this.isDateEquals(date, dateMeta));
                 this.updateModel(newValue);
@@ -678,7 +678,7 @@ export default {
                     }
                 }
             }
-            
+
             if (this.isSingleSelection() && (!this.showTime || this.hideOnDateTimeSelect)) {
                 setTimeout(() => {
                     this.overlayVisible = false;
@@ -691,7 +691,7 @@ export default {
         },
         selectDate(dateMeta) {
             let date = new Date(dateMeta.year, dateMeta.month, dateMeta.day);
-            
+
             if (this.showTime) {
                 if (this.hourFormat === '12' && this.pm && this.currentHour != 12)
                     date.setHours(this.currentHour + 12);
@@ -701,21 +701,21 @@ export default {
                 date.setMinutes(this.currentMinute);
                 date.setSeconds(this.currentSecond);
             }
-            
+
             if (this.minDate && this.minDate > date) {
                 date = this.minDate;
                 this.currentHour = date.getHours();
                 this.currentMinute = date.getMinutes();
                 this.currentSecond = date.getSeconds();
             }
-            
+
             if (this.maxDate && this.maxDate < date) {
                 date = this.maxDate;
                 this.currentHour = date.getHours();
                 this.currentMinute = date.getMinutes();
                 this.currentSecond = date.getSeconds();
             }
-            
+
             let modelVal = null;
 
             if (this.isSingleSelection()) {
@@ -728,7 +728,7 @@ export default {
                 if (this.value && this.value.length) {
                     let startDate = this.value[0];
                     let endDate = this.value[1];
-                    
+
                     if (!endDate && date.getTime() >= startDate.getTime()) {
                         endDate = date;
                     }
@@ -742,7 +742,7 @@ export default {
                     modelVal = [date, null];
                 }
             }
-            
+
             if (modelVal !== null) {
                 this.updateModel(modelVal);
                 this.updateInputFieldValue(modelVal);
@@ -773,19 +773,19 @@ export default {
                         if (date && date.length) {
                             let startDate = date[0];
                             let endDate = date[1];
-                            
+
                             formattedValue = this.formatDateTime(startDate);
                             if (endDate) {
                                 formattedValue += ' - ' + this.formatDateTime(endDate);
                             }
                         }
                     }
-                } 
+                }
                 catch(err) {
                     formattedValue = date;
                 }
             }
-            
+
             this.inputFieldValue = formattedValue;
         },
         shouldSelectDate() {
@@ -816,7 +816,7 @@ export default {
                     }
                 }
             }
-            
+
             return formattedValue;
         },
         formatDate(date, format) {
@@ -903,47 +903,47 @@ export default {
             if (!date) {
                 return '';
             }
-            
+
             let output = '';
             let hours = date.getHours();
             let minutes = date.getMinutes();
             let seconds = date.getSeconds();
-            
+
             if (this.hourFormat === '12' && hours > 11 && hours !== 12) {
                 hours -= 12;
             }
-            
+
             if (this.hourFormat === '12') {
                 output += hours === 0 ? 12 : (hours < 10) ? '0' + hours : hours;
-            } 
+            }
             else {
                 output += (hours < 10) ? '0' + hours : hours;
             }
             output += ':';
             output += (minutes < 10) ? '0' + minutes : minutes;
-            
+
             if (this.showSeconds) {
                 output += ':';
                 output += (seconds < 10) ? '0' + seconds : seconds;
             }
-            
+
             if (this.hourFormat === '12') {
                 output += date.getHours() > 11 ? ' PM' : ' AM';
             }
-            
+
             return output;
         },
         onTodayButtonClick(event) {
             let date = new Date();
             let dateMeta = {
-                day: date.getDate(), 
-                month: date.getMonth(), 
-                year: date.getFullYear(), 
-                otherMonth: date.getMonth() !== this.currentMonth || date.getFullYear() !== this.currentYear, 
-                today: true, 
+                day: date.getDate(),
+                month: date.getMonth(),
+                year: date.getFullYear(),
+                otherMonth: date.getMonth() !== this.currentMonth || date.getFullYear() !== this.currentYear,
+                today: true,
                 selectable: true
             };
-            
+
             this.onDateSelect(dateMeta);
             this.$emit('today-click', date);
             event.preventDefault();
@@ -1018,7 +1018,7 @@ export default {
         },
         decrementHour(event) {
             const newHour = this.currentHour - this.stepHour;
-            
+
             if (this.validateHour(newHour)) {
                 if (this.hourFormat == '24')
                     this.currentHour = (newHour < 0) ? (24 + newHour) : newHour;
@@ -1043,19 +1043,19 @@ export default {
                 value = this.value[this.value.length - 1];
             }
             let valueDateString = value ? value.toDateString() : null;
-            
+
             if (this.minDate && valueDateString && this.minDate.toDateString() === valueDateString) {
                 if (this.minDate.getHours() > hour) {
                     valid = false;
                 }
             }
-            
+
             if (this.maxDate && valueDateString && this.maxDate.toDateString() === valueDateString) {
                 if (this.maxDate.getHours() < hour) {
                     valid = false;
                 }
             }
-            
+
             return valid;
         },
         incrementMinute(event) {
@@ -1063,7 +1063,7 @@ export default {
             if (this.validateMinute(newMinute)) {
                 this.currentMinute = (newMinute > 59) ? newMinute - 60 : newMinute;
             }
-            
+
             event.preventDefault();
         },
         decrementMinute(event) {
@@ -1072,7 +1072,7 @@ export default {
             if (this.validateMinute(newMinute)) {
                 this.currentMinute = newMinute;
             }
-            
+
             event.preventDefault();
         },
         validateMinute(minute) {
@@ -1092,7 +1092,7 @@ export default {
                     }
                 }
             }
-            
+
             if (this.maxDate && valueDateString && this.maxDate.toDateString() === valueDateString) {
                 if (value.getHours() == this.maxDate.getHours()){
                     if (this.maxDate.getMinutes() < minute) {
@@ -1100,7 +1100,7 @@ export default {
                     }
                 }
             }
-            
+
             return valid;
         },
         incrementSecond(event) {
@@ -1108,7 +1108,7 @@ export default {
             if (this.validateSecond(newSecond)) {
                 this.currentSecond = (newSecond > 59) ? newSecond - 60 : newSecond;
             }
-        
+
             event.preventDefault();
         },
         decrementSecond(event) {
@@ -1117,7 +1117,7 @@ export default {
             if (this.validateSecond(newSecond)) {
                 this.currentSecond = newSecond;
             }
-            
+
             event.preventDefault();
         },
         validateSecond(second) {
@@ -1130,19 +1130,19 @@ export default {
                 value = this.value[this.value.length - 1];
             }
             let valueDateString = value ? value.toDateString() : null;
-            
+
             if (this.minDate && valueDateString && this.minDate.toDateString() === valueDateString) {
                 if (this.minDate.getSeconds() > second) {
                     valid = false;
                 }
             }
-            
+
             if (this.maxDate && valueDateString && this.maxDate.toDateString() === valueDateString) {
                 if (this.maxDate.getSeconds() < second) {
                     valid = false;
                 }
             }
-            
+
             return valid;
         },
         updateModelTime() {
@@ -1164,7 +1164,7 @@ export default {
             else {
                 value.setHours(this.currentHour);
             }
-            
+
             value.setMinutes(this.currentMinute);
             value.setSeconds(this.currentSecond);
 
@@ -1182,7 +1182,7 @@ export default {
             this.updateModel(value);
             this.updateInputFieldValue(value);
             this.$emit('select', value);
-        },        
+        },
         toggleAMPM(event) {
             this.pm = !this.pm;
             this.updateModelTime();
@@ -1201,7 +1201,7 @@ export default {
                 this.mask = document.createElement('div');
                 this.mask.style.zIndex = String(parseInt(this.$refs.overlay.style.zIndex, 10) - 1);
                 DomHandler.addMultipleClasses(this.mask, 'p-component-overlay p-datepicker-mask p-datepicker-mask-scrollblocker');
-                
+
                 this.maskClickListener = () => {
                     this.disableModality();
                 };
@@ -1214,9 +1214,9 @@ export default {
         disableModality() {
             if (this.mask) {
                 this.mask.removeEventListener('click', this.maskClickListener);
-                this.maskClickListener = null;         
+                this.maskClickListener = null;
                 document.body.removeChild(this.mask);
-                this.mask = null;   
+                this.mask = null;
 
                 let bodyChildren = document.body.children;
                 let hasBlockerMasks;
@@ -1227,7 +1227,7 @@ export default {
                         break;
                     }
                 }
-                
+
                 if (!hasBlockerMasks) {
                     DomHandler.removeClass(document.body, 'p-overflow-hidden');
                 }
@@ -1261,9 +1261,9 @@ export default {
             if (!text || text.trim().length === 0) {
                 return null;
             }
-            
+
             let value;
-            
+
             if (this.isSingleSelection()) {
                 value = this.parseDateTime(text);
             }
@@ -1281,13 +1281,13 @@ export default {
                     value[i] = this.parseDateTime(tokens[i].trim());
                 }
             }
-            
+
             return value;
         },
         parseDateTime(text) {
             let date;
             let parts = text.split(' ');
-            
+
             if (this.timeOnly) {
                 date = new Date();
                 this.populateTime(date, parts[0], parts[1]);
@@ -1302,14 +1302,14 @@ export default {
                     date = this.parseDate(text, dateFormat);
                 }
             }
-            
+
             return date;
         },
         populateTime(value, timeString, ampm) {
             if (this.hourFormat == '12' && !ampm) {
                 throw 'Invalid Time';
             }
-            
+
             this.pm = (ampm === 'PM' || ampm === 'pm');
             let time = this.parseTime(timeString);
             value.setHours(time.hour);
@@ -1319,15 +1319,15 @@ export default {
         parseTime(value) {
             let tokens = value.split(':');
             let validTokenLength = this.showSeconds ? 3 : 2;
-            
+
             if (tokens.length !== validTokenLength) {
                 throw "Invalid time";
             }
-            
+
             let h = parseInt(tokens[0]);
             let m = parseInt(tokens[1]);
             let s = this.showSeconds ? parseInt(tokens[2]) : null;
-            
+
             if (isNaN(h) || isNaN(m) || h > 23 || m > 59 || (this.hourFormat == '12' && h > 12) || (this.showSeconds && (isNaN(s) || s > 59))) {
                 throw "Invalid time";
             }
@@ -1335,7 +1335,7 @@ export default {
                 if (this.hourFormat == '12' && h !== 12 && this.pm) {
                     h+= 12;
                 }
-                
+
                 return {hour: h, minute: m, second: s};
             }
         },
@@ -1382,14 +1382,14 @@ export default {
                 let index = -1;
                 let arr = lookAhead(match) ? longNames : shortNames;
                 let names = [];
-                
+
                 for (let i = 0; i < arr.length; i++) {
                     names.push([i,arr[i]]);
                 }
                 names.sort((a,b) => {
                     return -(a[ 1 ].length - b[ 1 ].length);
                 });
-                
+
                 for (let i = 0; i < names.length; i++) {
                     let name = names[i][1];
                     if (value.substr(iValue, name.length).toLowerCase() === name.toLowerCase()) {
@@ -1415,7 +1415,7 @@ export default {
             if (this.view === 'month') {
                 day = 1;
             }
-            
+
             for (iFormat = 0; iFormat < format.length; iFormat++) {
                 if (literal) {
                     if (format.charAt(iFormat) === "'" && !lookAhead("'")) {
@@ -1524,7 +1524,7 @@ export default {
                         return;
                     }
                     $vm.isKeydown = false;
-                    
+
                     try {
                         let value = $vm.parseValueFromString(val);
                         if ($vm.isValidSelection(value)) {
@@ -1583,7 +1583,7 @@ export default {
             return [
                 'p-calendar',
                 {
-                    'p-calendar-w-btn': this.showIcon, 
+                    'p-calendar-w-btn': this.showIcon,
                     'p-calendar-timeonly': this.timeOnly,
                     'p-inputwrapper-filled': this.value,
                     'p-inputwrapper-focus': this.focused
@@ -1598,8 +1598,8 @@ export default {
                     'p-shadow': !this.inline,
                     'p-disabled': this.$attrs.disabled,
                     'p-datepicker-timeonly': this.timeOnly,
-                    'p-datepicker-multiple-month': this.numberOfMonths > 1, 
-                    'p-datepicker-monthpicker': (this.view === 'month'), 
+                    'p-datepicker-multiple-month': this.numberOfMonths > 1,
+                    'p-datepicker-monthpicker': (this.view === 'month'),
                     'p-datepicker-touch-ui': this.touchUI
                 }
             ];
@@ -1623,17 +1623,17 @@ export default {
                 let weekNumbers = [];
                 let monthRows = Math.ceil((daysLength + firstDay) / 7);
 
-                
+
                 for (let i = 0; i < monthRows; i++) {
                     let week = [];
-                    
+
                     if (i == 0) {
                         for (let j = (prevMonthDaysLength - firstDay + 1); j <= prevMonthDaysLength; j++) {
                             let prev = this.getPreviousMonthAndYear(month, year);
                             week.push({day: j, month: prev.month, year: prev.year, otherMonth: true,
                                     today: this.isToday(today, j, prev.month, prev.year), selectable: this.isSelectable(j, prev.month, prev.year, true)});
                         }
-                        
+
                         let remainingDaysLength = 7 - week.length;
                         for (let j = 0; j < remainingDaysLength; j++) {
                             week.push({day: dayNo, month: month, year: year, today: this.isToday(today, dayNo, month, year),
@@ -1653,15 +1653,15 @@ export default {
                                 week.push({day: dayNo, month: month, year: year, today: this.isToday(today, dayNo, month, year),
                                     selectable: this.isSelectable(dayNo, month, year, false)});
                             }
-                            
+
                             dayNo++;
                         }
                     }
 
                     if (this.showWeek) {
-                        weekNumbers.push(this.getWeekNumber(new Date(week[0].year, week[0].month, week[0].day))); 
+                        weekNumbers.push(this.getWeekNumber(new Date(week[0].year, week[0].month, week[0].day)));
                     }
-                    
+
                     dates.push(week);
                 }
 

src/components/checkbox/Checkbox.vue

@@ -32,7 +32,7 @@ export default {
         onClick(event) {
             if (!this.$attrs.disabled) {
                 let newModelValue;
-                
+
                 if (this.binary) {
                     newModelValue = !this.modelValue;
                 }
@@ -40,7 +40,7 @@ export default {
                     if (this.checked)
                         newModelValue = this.modelValue.filter(val => !ObjectUtils.equals(val, this.value));
                     else
-                        newModelValue = this.modelValue ? [...this.modelValue, this.value] : [this.value]; 
+                        newModelValue = this.modelValue ? [...this.modelValue, this.value] : [this.value];
                 }
 
                 this.$emit('click', event);

src/components/chips/Chips.vue

@@ -2,7 +2,7 @@
     <div :class="['p-chips p-component', {'p-inputwrapper-filled': value, 'p-inputwrapper-focus': focused}]">
         <ul :class="['p-inputtext', {'p-disabled': $attrs.disabled, 'p-focus': focused}]" @click="onWrapperClick()">
             <li v-for="(val,i) of value" :key="`${i}_${val}`" class="p-chips-token p-highlight">
-                <slot name="chip" :value="val">  
+                <slot name="chip" :value="val">
                     <span class="p-chips-token-icon pi pi-fw pi-times" @click="removeItem($event, i)"></span>
                     <span class="p-chips-token-label">{{val}}</span>
                 </slot>
@@ -47,7 +47,7 @@ export default {
                         this.removeItem(event, this.value.length - 1);
                     }
                 break;
-            
+
                 //enter
                 case 13:
                     if (inputValue && inputValue.trim().length && (!this.max || this.max > this.value.length)) {
@@ -69,7 +69,7 @@ export default {
             if (this.$attrs.disabled) {
                 return;
             }
-            
+
             let values = [...this.value];
             const removedItem = values.splice(index, 1);
             this.$emit('input', values);

src/components/datatable/DataTable.vue

@@ -43,7 +43,7 @@
                 </tfoot>
                 <tbody class="p-datatable-tbody">
                     <template v-if="!empty">
-                        <tr :class="getRowClass(rowData)" v-for="(rowData, index) of dataToRender" :key="getRowKey(rowData, index)" 
+                        <tr :class="getRowClass(rowData)" v-for="(rowData, index) of dataToRender" :key="getRowKey(rowData, index)"
                             @click="onRowClick($event, rowData, index)" @touchend="onRowTouchEnd($event)" @keydown="onRowKeyDown($event, rowData, index)" :tabindex="selectionMode ? '0' : null">
                             <td v-for="(col,i) of columns" :key="col.columnKey||col.field||i" :style="col.bodyStyle" :class="col.bodyClass">
                                 <ColumnSlot :data="rowData" :column="col" type="body" v-if="col.$scopedSlots.body" />
@@ -304,10 +304,10 @@ export default {
                 const targetNode = event.target;
                 const columnField = column.field || column.sortField;
 
-                if (DomHandler.hasClass(targetNode, 'p-sortable-column') || DomHandler.hasClass(targetNode, 'p-column-title') 
+                if (DomHandler.hasClass(targetNode, 'p-sortable-column') || DomHandler.hasClass(targetNode, 'p-column-title')
                     || DomHandler.hasClass(targetNode, 'p-sortable-column-icon') || DomHandler.hasClass(targetNode.parentElement, 'p-sortable-column-icon')) {
                     DomHandler.clearSelection();
-                    
+
                     this.d_sortOrder = (this.d_sortField === columnField) ? this.d_sortOrder * -1 : this.defaultSortOrder;
                     this.d_sortField = columnField;
 
@@ -317,8 +317,8 @@ export default {
                             this.d_multiSortMeta = [];
                         }
 
-                        this.addSortMeta({field: this.d_sortField, order: this.d_sortOrder});   
-                    }    
+                        this.addSortMeta({field: this.d_sortField, order: this.d_sortOrder});
+                    }
 
                     this.$emit('update:sortField', this.d_sortField);
                     this.$emit('update:sortOrder', this.d_sortOrder);
@@ -364,7 +364,7 @@ export default {
                 return this.multisortField(data1, data2, 0);
             });
 
-            return data;            
+            return data;
         },
         multisortField(data1, data2, index) {
             const value1 = ObjectUtils.resolveFieldData(data1, this.d_multiSortMeta[index].field);
@@ -402,7 +402,7 @@ export default {
         getColumnHeaderClass(column) {
             const sorted = this.sortMode === 'single' ? (this.d_sortField === (column.field || column.sortField)) : this.getMultiSortMetaIndex(column) > -1;
 
-            return [column.headerClass, 
+            return [column.headerClass,
                     {'p-sortable-column': column.sortable},
                     {'p-resizable-column': this.resizableColumns},
                     {'p-highlight': sorted}
@@ -423,7 +423,7 @@ export default {
                     sortOrder = this.d_multiSortMeta[metaIndex].order;
                 }
             }
-   
+
             return [
                 'p-sortable-column-icon pi pi-fw',
                 {'pi-sort': !sorted},
@@ -457,7 +457,7 @@ export default {
                 for(let j = 0; j < this.columns.length; j++) {
                     let col = this.columns[j];
                     let columnField = col.field;
-                    
+
                     //local
                     if (this.filters.hasOwnProperty(columnField)) {
                         let filterValue = this.filters[columnField];
@@ -505,7 +505,7 @@ export default {
                 let targetNode = target.nodeName;
                 let parentNode = target.parentElement && target.parentElement.nodeName;
 
-                if (targetNode == 'INPUT' || targetNode == 'BUTTON' || targetNode == 'A' || 
+                if (targetNode == 'INPUT' || targetNode == 'BUTTON' || targetNode == 'A' ||
                     parentNode == 'INPUT' || parentNode == 'BUTTON' || parentNode == 'A' ||
                     (DomHandler.hasClass(target, 'p-clickable'))) {
                     return;
@@ -524,7 +524,7 @@ export default {
 
                     if (metaSelection) {
                         let metaKey = event.metaKey || event.ctrlKey;
-                        
+
                         if (selected && metaKey) {
                             if(this.isSingleSelectionMode()) {
                                 this.$emit('update:selection', null);
@@ -534,7 +534,7 @@ export default {
                                 const _selection = this.selection.filter((val,i) => i != selectionIndex);
                                 this.$emit('update:selection', _selection);
                             }
-                            
+
                             this.$emit('row-unselect', {originalEvent: event, data: rowData, type: 'row'});
                         }
                         else {
@@ -577,7 +577,7 @@ export default {
                     }
                 }
             }
-            
+
             this.rowTouched = false;
         },
         onRowTouchEnd() {
@@ -594,25 +594,25 @@ export default {
                         if (nextRow) {
                             nextRow.focus();
                         }
-        
+
                         event.preventDefault();
                     break;
-        
+
                     //up arrow
                     case 38:
                         var prevRow = this.findPrevSelectableRow(row);
                         if (prevRow) {
                             prevRow.focus();
                         }
-        
+
                         event.preventDefault();
                     break;
-        
+
                     //enter
                     case 13:
                         this.onRowClick(event, rowData, rowIndex);
                     break;
-        
+
                     default:
                         //no op
                     break;
@@ -676,7 +676,7 @@ export default {
             const checked = this.allRowsSelected;
             const _selection = checked ? [] : (processedData ? [...processedData] : [...this.value]);
             this.$emit('update:selection', _selection);
-            
+
             if (checked)
                 this.$emit('row-unselect-all', {originalEvent: event});
             else
@@ -745,7 +745,7 @@ export default {
         },
         selectRange(event) {
             let rangeStart, rangeEnd;
-            
+
             if (this.rangeRowIndex > this.anchorRowIndex) {
                 rangeStart = this.anchorRowIndex;
                 rangeEnd = this.rangeRowIndex;
@@ -758,7 +758,7 @@ export default {
                 rangeStart = this.rangeRowIndex;
                 rangeEnd = this.rangeRowIndex;
             }
-            
+
             if (this.lazy && this.paginator) {
                 rangeStart -= this.first;
                 rangeEnd -= this.first;
@@ -781,7 +781,7 @@ export default {
             if (options && options.selectionOnly) {
                 data = this.selection || [];
             }
-            
+
             //headers
             for (let i = 0; i < this.columns.length; i++) {
                 let column = this.columns[i];
@@ -801,7 +801,7 @@ export default {
                     let column = this.columns[i];
                     if (column.exportable !== false && column.field) {
                         let cellData = ObjectUtils.resolveFieldData(record, column.field);
-                        
+
                         if (cellData != null) {
                             if (this.exportFunction) {
                                 cellData = this.exportFunction({
@@ -814,10 +814,10 @@ export default {
                         }
                         else
                             cellData = '';
-            
-            
+
+
                         csv += '"' + cellData + '"';
-            
+
                         if (i < (this.columns.length - 1)) {
                             csv += this.csvSeparator;
                         }
@@ -866,7 +866,7 @@ export default {
             this.$refs.resizeHelper.style.height = this.$el.offsetHeight + 'px';
             this.$refs.resizeHelper.style.top = 0 + 'px';
             this.$refs.resizeHelper.style.left = (event.pageX - containerLeft + this.$el.scrollLeft) + 'px';
-            
+
             this.$refs.resizeHelper.style.display = 'block';
         },
         onColumnResizeEnd() {
@@ -879,7 +879,7 @@ export default {
                 if(this.columnResizeMode === 'fit') {
                     let nextColumn = this.resizeColumnElement.nextElementSibling;
                     let nextColumnWidth = nextColumn.offsetWidth - delta;
-                    
+
                     if(newColumnWidth > 15 && nextColumnWidth > 15) {
                         this.resizeColumnElement.style.width = newColumnWidth + 'px';
                         if(nextColumn) {
@@ -890,14 +890,14 @@ export default {
                 else if(this.columnResizeMode === 'expand') {
                     this.$refs.table.style.width = this.$refs.table.offsetWidth + delta + 'px';
                     this.resizeColumnElement.style.width = newColumnWidth + 'px';
-                }    
-                
+                }
+
                 this.$emit('column-resize-end', {
                     element: this.resizeColumnElement,
                     delta: delta
                 });
             }
-                    
+
             this.$refs.resizeHelper.style.display = 'none';
             this.resizeColumn = null;
             DomHandler.removeClass(this.$el, 'p-unselectable-text');
@@ -912,7 +912,7 @@ export default {
                     }
                 });
             }
-            
+
             if (!this.documentColumnResizeEndListener) {
                 this.documentColumnResizeEndListener = document.addEventListener('mouseup', () => {
                     if(this.columnResizing) {
@@ -921,14 +921,14 @@ export default {
                     }
                 });
             }
-            
+
         },
         unbindColumnResizeEvents() {
             if (this.documentColumnResizeListener) {
                 document.removeEventListener('document', this.documentColumnResizeListener);
                 this.documentColumnResizeListener = null;
             }
-            
+
             if (this.documentColumnResizeEndListener) {
                 document.removeEventListener('document', this.documentColumnResizeEndListener);
                  this.documentColumnResizeEndListener = null;
@@ -941,7 +941,7 @@ export default {
                 'p-datatable p-component', {
                     'p-datatable-hoverable-rows': (this.rowHover || this.selectionMode),
                     'p-datatable-auto-layout': this.autoLayout,
-                    'p-datatable-resizable': this.resizableColumns, 
+                    'p-datatable-resizable': this.resizableColumns,
                     'p-datatable-resizable-fit': this.resizableColumns && this.columnResizeMode === 'fit'
                 }
             ];

src/components/dataview/DataView.vue

@@ -185,7 +185,7 @@ export default {
                 if (data && data.length && this.sortField) {
                     data = this.sort();
                 }
-            
+
                 if (this.paginator) {
                     const first = this.lazy ? 0 : this.d_first;
                     return data.slice(first, first + this.d_rows);
@@ -193,7 +193,7 @@ export default {
                 else {
                     return data;
                 }
-                    
+
             }
             else {
                 return null;

src/components/deferredcontent/DeferredContent.vue

@@ -9,7 +9,7 @@ export default {
     data() {
         return {
            loaded: false
-        } 
+        }
     },
     mounted() {
         if (!this.loaded) {
@@ -47,7 +47,7 @@ export default {
                 const rect = this.$refs.container.getBoundingClientRect();
                 const docElement = document.documentElement;
                 const winHeight = docElement.clientHeight;
-        
+
                 return (winHeight >= rect.top);
             }
         },
@@ -59,7 +59,7 @@ export default {
 }
 </script>
 
-    
+
 
     componentWillUnmount() {
         this.unbindScrollListener();

src/components/dropdown/Dropdown.vue

@@ -17,9 +17,9 @@
                 </div>
                 <div ref="itemsWrapper" class="p-dropdown-items-wrapper" :style="{'max-height': scrollHeight}">
                     <ul class="p-dropdown-items p-dropdown-list p-component">
-                        <li v-for="(option, i) of visibleOptions" :class="['p-dropdown-item', {'p-highlight': isSelected(option), 'p-disabled': isOptionDisabled(option)}]" 
+                        <li v-for="(option, i) of visibleOptions" :class="['p-dropdown-item', {'p-highlight': isSelected(option), 'p-disabled': isOptionDisabled(option)}]"
                             :aria-label="getOptionLabel(option)" :key="getOptionLabel(option)" @click="onOptionSelect($event, option)">
-                            <slot name="option" :option="option" :index="i">  
+                            <slot name="option" :option="option" :index="i">
                                 {{getOptionLabel(option)}}
                             </slot>
                         </li>
@@ -221,7 +221,7 @@ export default {
                 return this.findNextOption(i);
             else
                 return option;
-            
+
         },
         findPrevOption(index) {
             let i = index - 1;
@@ -354,7 +354,7 @@ export default {
             return [
                 'p-dropdown p-component p-unselectable-text',
                 {
-                    'p-disabled': this.disabled, 
+                    'p-disabled': this.disabled,
                     'p-dropdown-clearable': this.showClear && !this.disabled,
                     'p-focus': this.focused
                 }
@@ -362,9 +362,9 @@ export default {
         },
         labelClass() {
             return [
-                'p-dropdown-label p-inputtext', 
+                'p-dropdown-label p-inputtext',
                 {
-                    'p-placeholder': this.label === null && this.placeholder, 
+                    'p-placeholder': this.label === null && this.placeholder,
                     'p-dropdown-label-empty': (this.label == null || this.label.length === 0)
                 }
             ];

src/components/fieldset/Fieldset.vue

@@ -55,7 +55,7 @@ export default {
 </script>
 
 <style>
-.p-fieldset, 
+.p-fieldset,
 .p-fieldset .p-fieldset-legend {
     padding: 0.5em 1em;
 }

src/components/fileupload/FileUpload.vue

@@ -2,11 +2,11 @@
     <div class="p-fileupload p-component" v-if="isAdvanced">
         <div class="p-fileupload-buttonbar">
             <span icon="pi pi-plus" :class="advancedChooseButtonClass">
-                <input ref="fileInput" type="file" @change="onFileSelect" @focus="onFocus" @blur="onBlur" 
+                <input ref="fileInput" type="file" @change="onFileSelect" @focus="onFocus" @blur="onBlur"
                     :multiple="multiple" :accept="accept" :disabled="disabled" />
                 <span class="p-button-icon p-button-icon-left p-clickable pi pi-fw pi-plus"></span>
                 <span class="p-button-text p-clickable">{{chooseLabel}}</span>
-            </span>  
+            </span>
             <FileUploadButton :label="uploadLabel" icon="pi pi-upload" @click="upload" :disabled="disabled || !hasFiles" />
             <FileUploadButton :label="cancelLabel" icon="pi pi-times" @click="clear" :disabled="disabled || !hasFiles" />
         </div>
@@ -24,7 +24,7 @@
                         <Button type="button" icon="pi pi-times" @click="remove(index)" />
                     </div>
                 </div>
-            </div>  
+            </div>
         </div>
     </div>
     <span :class="basicChooseButtonClass" @mouseup="onBasicUploaderClick" v-else-if="isBasic">
@@ -87,20 +87,20 @@ export default {
         },
         chooseLabel: {
             type: String,
-            default: 'Choose'  
+            default: 'Choose'
         },
         uploadLabel: {
             type: String,
-            default: 'Upload'  
+            default: 'Upload'
         },
         cancelLabel: {
             type: String,
-            default: 'Cancel'  
+            default: 'Cancel'
         }
     },
     data() {
         return {
-            files: null, 
+            files: null,
             messages: null,
             focused: false,
             progress: null
@@ -122,7 +122,7 @@ export default {
                 }
             }
 
-            this.$emit('select', {originalEvent: event, files: files});   
+            this.$emit('select', {originalEvent: event, files: files});
 
             if (this.auto && this.hasFiles) {
                 this.upload();
@@ -138,9 +138,9 @@ export default {
 
             this.$emit('before-upload', {
                 'xhr': xhr,
-                'formData': formData 
+                'formData': formData
             });
-            
+
             for (let file of this.files) {
                 formData.append(this.name, file, file.name);
             }
@@ -151,7 +151,7 @@ export default {
                 }
 
                 this.$emit('progress', {
-                    originalEvent: event, 
+                    originalEvent: event,
                     progress: this.progress
                 });
             });
@@ -159,16 +159,16 @@ export default {
             xhr.onreadystatechange = () => {
                 if (xhr.readyState === 4) {
                     this.progress = 0;
-                    
+
                     if (xhr.status >= 200 && xhr.status < 300) {
                         this.$emit('upload', {
-                            xhr: xhr, 
+                            xhr: xhr,
                             files: this.files
                         });
                     }
                     else {
                         this.$emit('error', {
-                            xhr: xhr, 
+                            xhr: xhr,
                             files: this.files
                         });
                     }
@@ -176,12 +176,12 @@ export default {
                     this.clear();
                 }
             };
-        
+
             xhr.open('POST', this.url, true);
-            
+
             this.$emit('before-send', {
                 'xhr': xhr,
-                'formData': formData 
+                'formData': formData
             });
 
             xhr.withCredentials = this.withCredentials;
@@ -195,7 +195,7 @@ export default {
 
             if (this.isAdvanced) {
                 this.clearInputElement();
-            } 
+            }
         },
         onFocus() {
             this.focused = true;
@@ -209,8 +209,8 @@ export default {
                     if ((sFile.name + sFile.type + sFile.size) === (file.name + file.type + file.size))
                         return true;
                 }
-            } 
-            
+            }
+
             return false;
         },
         validate(file) {
@@ -218,7 +218,7 @@ export default {
                 this.messages.push(this.invalidFileSizeMessage.replace('{0}', file.name).replace('{1}', this.formatSize(this.maxFileSize)));
                 return false;
             }
-            
+
             return true;
         },
         onDragEnter() {
@@ -256,7 +256,7 @@ export default {
             dm = 3,
             sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
             i = Math.floor(Math.log(bytes) / Math.log(k));
-            
+
             return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
         }
     },
@@ -283,7 +283,7 @@ export default {
         },
         basicChooseButtonIconClass() {
             return ['p-button-icon-left pi', {
-                'pi-plus': !this.hasFiles || this.auto, 
+                'pi-plus': !this.hasFiles || this.auto,
                 'pi-upload': this.hasFiles && !this.auto
             }];
         },

src/components/inplace/Inplace.vue

@@ -1,6 +1,6 @@
 <template>
     <div :class="containerClass">
-        <div class="p-inplace-display" :tabindex="$attrs.tabindex||'0'" v-if="!d_active" @click="open" @keydown.enter="open"> 
+        <div class="p-inplace-display" :tabindex="$attrs.tabindex||'0'" v-if="!d_active" @click="open" @keydown.enter="open">
             <slot name="display"></slot>
         </div>
         <div class="p-inplace-content" v-else>

src/components/inputmask/InputMask.vue

@@ -218,7 +218,7 @@ export default {
             var pos = this.checkVal(true);
             this.caret(pos);
             this.updateModel(event);
-            
+
             if (this.isCompleted()) {
                 this.$emit('complete', event);
             }
@@ -376,7 +376,7 @@ export default {
                     if ($vm.$attrs.readonly) {
                         return;
                     }
-                    
+
                     let k = event.which || event.keyCode,
                         pos,
                         begin,
@@ -466,7 +466,7 @@ export default {
                     if (completed) {
                         $vm.$emit('complete', event);
                     }
-                    
+
                     $vm.$emit('keypress', event);
                 },
                 paste: event => {

src/components/inputswitch/InputSwitch.vue

@@ -1,7 +1,7 @@
 <template>
     <div :class="containerClass" @click="onClick($event)">
         <div class="p-hidden-accessible">
-            <input ref="input" type="checkbox" :id="inputId" :name="name" :checked="value" :disabled="disabled" 
+            <input ref="input" type="checkbox" :id="inputId" :name="name" :checked="value" :disabled="disabled"
                 @focus="onFocus($event)" @blur="onBlur($event)" @keydown.enter.prevent="onClick($event)">
         </div>
         <span class="p-inputswitch-slider"></span>

src/components/listbox/Listbox.vue

@@ -8,9 +8,9 @@
         </div>
         <div class="p-listbox-list-wrapper" :style="listStyle">
             <ul class="p-listbox-list">
-                <li v-for="(option, i) of visibleOptions" :tabindex="isOptionDisabled(option) ? null : '0'" :class="['p-listbox-item', {'p-highlight': isSelected(option), 'p-disabled': isOptionDisabled(option)}]" 
+                <li v-for="(option, i) of visibleOptions" :tabindex="isOptionDisabled(option) ? null : '0'" :class="['p-listbox-item', {'p-highlight': isSelected(option), 'p-disabled': isOptionDisabled(option)}]"
                     :aria-label="getOptionLabel(option)" :key="getOptionLabel(option)" @click="onOptionSelect($event, option)" @touchend="onOptionTouchEnd()" @keydown="onOptionKeyDown($event, option)">
-                    <slot name="option" :option="option" :index="i">  
+                    <slot name="option" :option="option" :index="i">
                         {{getOptionLabel(option)}}
                     </slot>
                 </li>
@@ -57,19 +57,19 @@ export default {
             if (this.disabled || this.isOptionDisabled(option)) {
                 return;
             }
-            
+
             if(this.multiple)
                 this.onOptionSelectMultiple(event, option);
             else
                 this.onOptionSelectSingle(event, option);
-                
+
             this.optionTouched = false;
         },
         onOptionTouchEnd() {
             if (this.disabled) {
                 return;
             }
-        
+
             this.optionTouched = true;
         },
         onOptionSelectSingle(event, option) {
@@ -80,7 +80,7 @@ export default {
 
             if (metaSelection) {
                 let metaKey = (event.metaKey || event.ctrlKey);
-                
+
                 if (selected) {
                     if (metaKey) {
                         value = null;
@@ -101,7 +101,7 @@ export default {
                 this.updateModel(event, value);
             }
         },
-        onOptionSelectMultiple(event, option) {        
+        onOptionSelectMultiple(event, option) {
             let selected = this.isSelected(option);
             let valueChanged = false;
             let value = null;
@@ -109,13 +109,13 @@ export default {
 
             if (metaSelection) {
                 let metaKey = (event.metaKey || event.ctrlKey);
-                
+
                 if (selected) {
                     if(metaKey)
                         value = this.removeOption(option);
                     else
                         value = [this.getOptionValue(option)];
-                    
+
                     valueChanged = true;
                 }
                 else {
@@ -129,7 +129,7 @@ export default {
                     value = this.removeOption(option);
                 else
                     value = [...this.value || [], this.getOptionValue(option)];
-                
+
                 valueChanged = true;
             }
 
@@ -174,7 +174,7 @@ export default {
                     if(nextItem) {
                         nextItem.focus();
                     }
-                    
+
                     event.preventDefault();
                 break;
 
@@ -184,7 +184,7 @@ export default {
                     if(prevItem) {
                         prevItem.focus();
                     }
-                    
+
                     event.preventDefault();
                 break;
 
@@ -205,12 +205,12 @@ export default {
         },
         findPrevItem(item) {
             let prevItem = item.previousElementSibling;
-            
+
             if (prevItem)
                 return DomHandler.hasClass(prevItem, 'p-disabled') ? this.findPrevItem(prevItem) : prevItem;
             else
                 return null;
-        } 
+        }
     },
     computed: {
         visibleOptions() {
@@ -234,7 +234,7 @@ export default {
 }
 
 .p-listbox .p-listbox-list {
-    list-style-type: none; 
+    list-style-type: none;
     margin: 0;
     padding: 0;
 }

src/components/menu/Menu.vue

@@ -85,7 +85,7 @@ export default {
             this.alignOverlay();
             this.bindOutsideClickListener();
             this.bindResizeListener();
-            
+
             if (this.autoZIndex) {
                 this.$refs.container.style.zIndex = String(this.baseZIndex + DomHandler.generateZIndex());
             }

src/components/message/Message.vue

@@ -8,7 +8,7 @@
                 </div>
                 <button class="p-messages-close p-link" @click="visible = false" v-if="closable">
                     <i class="p-messages-close-icon pi pi-times"></i>
-                </button>   
+                </button>
             </div>
         </div>
     </transition>

src/components/multiselect/MultiSelect.vue

@@ -198,7 +198,7 @@ export default {
                     if (nextItem) {
                         nextItem.focus();
                     }
-                    
+
                     event.preventDefault();
                 break;
 
@@ -208,7 +208,7 @@ export default {
                     if (prevItem) {
                         prevItem.focus();
                     }
-                    
+
                     event.preventDefault();
                 break;
 
@@ -232,7 +232,7 @@ export default {
         },
         findPrevItem(item) {
             let prevItem = item.previousElementSibling;
-            
+
             if (prevItem)
                 return DomHandler.hasClass(prevItem, 'p-disabled') ? this.findPrevItem(prevItem) : prevItem;
             else
@@ -308,9 +308,9 @@ export default {
         },
         labelClass() {
             return [
-                'p-multiselect-label', 
+                'p-multiselect-label',
                 {
-                    'p-placeholder': this.label == null && this.placeholder, 
+                    'p-placeholder': this.label == null && this.placeholder,
                     'p-multiselect-label-empty': !this.placeholder && (!this.value || this.value.length === 0)
                 }
             ];
@@ -480,7 +480,7 @@ export default {
     top: .25em;
     left: .125em;
 }
-            
+
 .p-multiselect-header .p-inputtext {
     padding: .125em .125em .125em 1.25em;
     width: 100%;

src/components/orderlist/OrderList.vue

@@ -12,7 +12,7 @@
             </div>
             <transition-group ref="list" name="p-orderlist-flip" tag="ul" class="p-orderlist-list" :style="listStyle">
                 <template v-for="(item, i) of value">
-                    <li tabindex="0" :key="getItemKey(item, i)" :class="['p-orderlist-item', {'p-highlight': isSelected(item)}]" 
+                    <li tabindex="0" :key="getItemKey(item, i)" :class="['p-orderlist-item', {'p-highlight': isSelected(item)}]"
                         @click="onItemClick($event, item, i)" @keydown="onItemKeyDown($event, item, i)" @touchend="onItemTouchEnd">
                         <slot name="item" :item="item" :index="i"> </slot>
                     </li>
@@ -73,7 +73,7 @@ export default {
         moveUp() {
             if (this.d_selection) {
                 let value = [...this.value];
-                
+
                 for (let i = 0; i < this.d_selection.length; i++) {
                     let selectedItem = this.d_selection[i];
                     let selectedItemIndex = ObjectUtils.findIndexInList(selectedItem, value);
@@ -88,7 +88,7 @@ export default {
                         break;
                     }
                 }
-                           
+
                 this.reorderDirection = 'up';
                 this.$emit('input', value);
                 this.$emit('reorder', {
@@ -101,7 +101,7 @@ export default {
         moveTop() {
             if(this.d_selection) {
                 let value = [...this.value];
-                
+
                 for (let i = 0; i < this.d_selection.length; i++) {
                     let selectedItem = this.d_selection[i];
                     let selectedItemIndex = ObjectUtils.findIndexInList(selectedItem, value);
@@ -127,7 +127,7 @@ export default {
         moveDown() {
             if(this.d_selection) {
                 let value = [...this.value];
-                
+
                 for (let i = this.d_selection.length - 1; i >= 0; i--) {
                     let selectedItem = this.d_selection[i];
                     let selectedItemIndex = ObjectUtils.findIndexInList(selectedItem, value);
@@ -142,7 +142,7 @@ export default {
                         break;
                     }
                 }
-                
+
                 this.reorderDirection = 'down';
                 this.$emit('input', value);
                 this.$emit('reorder', {
@@ -155,7 +155,7 @@ export default {
         moveBottom() {
             if (this.d_selection) {
                 let value = [...this.value];
-                
+
                 for (let i = this.d_selection.length - 1; i >= 0; i--) {
                     let selectedItem = this.d_selection[i];
                     let selectedItemIndex = ObjectUtils.findIndexInList(selectedItem, value);
@@ -183,16 +183,16 @@ export default {
             let selectedIndex = ObjectUtils.findIndexInList(item, this.d_selection);
             let selected = (selectedIndex != -1);
             let metaSelection = this.itemTouched ? false : this.metaKeySelection;
-            
+
             if (metaSelection) {
                 let metaKey = (event.metaKey || event.ctrlKey);
-                
+
                 if (selected && metaKey) {
                     this.d_selection = this.d_selection.filter((val, index) => index !== selectedIndex);
                 }
                 else {
-                    this.d_selection = (metaKey) ? this.d_selection ? [...this.d_selection] : [] : [];            
-                    ObjectUtils.insertIntoOrderedArray(item, index, this.d_selection, this.value);    
+                    this.d_selection = (metaKey) ? this.d_selection ? [...this.d_selection] : [] : [];
+                    ObjectUtils.insertIntoOrderedArray(item, index, this.d_selection, this.value);
                 }
             }
             else {
@@ -201,22 +201,22 @@ export default {
                 }
                 else {
                     this.d_selection = this.d_selection ? [...this.d_selection] : [];
-                    ObjectUtils.insertIntoOrderedArray(item, index, this.d_selection, this.value);    
+                    ObjectUtils.insertIntoOrderedArray(item, index, this.d_selection, this.value);
                 }
             }
 
             this.$emit('update:selection', this.d_selection);
             this.$emit('selection-change', {
-                originalEvent:event, 
+                originalEvent:event,
                 value: this.d_selection
-            });   
+            });
         },
         onItemTouchEnd() {
             this.itemTouched = true;
         },
         onItemKeyDown(event, item, index) {
             let listItem = event.currentTarget;
-            
+
             switch(event.which) {
                 //down
                 case 40:
@@ -224,20 +224,20 @@ export default {
                     if (nextItem) {
                         nextItem.focus();
                     }
-                    
+
                     event.preventDefault();
                 break;
-                
+
                 //up
                 case 38:
                     var prevItem = this.findPrevItem(listItem);
                     if (prevItem) {
                         prevItem.focus();
                     }
-                    
+
                     event.preventDefault();
                 break;
-                
+
                 //enter
                 case 13:
                     this.onItemClick(event, item, index);
@@ -258,7 +258,7 @@ export default {
         },
         findPrevItem(item) {
             let prevItem = item.previousElementSibling;
-            
+
             if (prevItem)
                 return !DomHandler.hasClass(prevItem, 'p-orderlist-item') ? this.findPrevItem(prevItem) : prevItem;
             else
@@ -272,19 +272,19 @@ export default {
                     case 'up':
                         DomHandler.scrollInView(this.$refs.list.$el, listItems[0]);
                     break;
-                    
+
                     case 'top':
                         this.$refs.list.$el.scrollTop = 0;
                     break;
-                    
+
                     case 'down':
                         DomHandler.scrollInView(this.$refs.list.$el, listItems[listItems.length - 1]);
                     break;
-                    
+
                     case 'bottom':
                         this.$refs.list.$el.scrollTop = this.$refs.list.$el.scrollHeight;
                     break;
-                    
+
                     default:
                     break;
                 }
@@ -400,7 +400,7 @@ export default {
     .p-orderlist .p-orderlist-list-container {
         width: 100%;
     }
-    
+
     .p-orderlist .p-orderlist-controls .p-button.p-button.p-button-icon-only {
         display: inline-block;
         width: 20%;

src/components/organizationchart/OrganizationChart.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="p-organizationchart p-component">
-        <OrganizationChartNode :node="value" :templates="$scopedSlots" 
+        <OrganizationChartNode :node="value" :templates="$scopedSlots"
             @node-toggle="onNodeToggle" :collapsedKeys="d_collapsedKeys" :collapsible="collapsible"
             @node-click="onNodeClick" :selectionMode="selectionMode" :selectionKeys="selectionKeys" />
     </div>
@@ -75,7 +75,7 @@ export default {
             else {
                 this.d_collapsedKeys[key] = true;
                 this.$emit('node-collapse', node);
-            }                
+            }
 
             this.d_collapsedKeys = {...this.d_collapsedKeys};
             this.$emit('update:collapsedKeys', this.d_collapsedKeys);

src/components/organizationchart/OrganizationChartNode.vue

@@ -31,7 +31,7 @@
             </tr>
             <tr :style="childStyle" class="p-organizationchart-nodes">
                 <td v-for="child of node.children" :key="child.key" colspan="2">
-                    <sub-node :node="child" :templates="templates" :collapsedKeys="collapsedKeys" @node-toggle="onChildNodeToggle" :collapsible="collapsible" 
+                    <sub-node :node="child" :templates="templates" :collapsedKeys="collapsedKeys" @node-toggle="onChildNodeToggle" :collapsible="collapsible"
                                 :selectionMode="selectionMode" :selectionKeys="selectionKeys" @node-click="onChildNodeClick" />
                 </td>
             </tr>

src/components/overlaypanel/OverlayPanel.vue

@@ -69,7 +69,7 @@ export default {
             this.alignOverlay();
             this.bindOutsideClickListener();
             this.bindResizeListener();
-            
+
             if (this.autoZIndex) {
                 this.$refs.container.style.zIndex = String(this.baseZIndex + DomHandler.generateZIndex());
             }
@@ -136,7 +136,7 @@ export default {
                     document.getElementById(this.appendTo).removeChild(this.$refs.container);
             }
         }
-    } 
+    }
 }
 </script>
 

src/components/paginator/RowsPerPageDropdown.vue

@@ -1,5 +1,5 @@
 <template>
-	<Dropdown :value="rows" :options="rowsOptions" optionLabel="label" optionValue="value" 
+	<Dropdown :value="rows" :options="rowsOptions" optionLabel="label" optionValue="value"
         @input="onChange($event)"></Dropdown>
 </template>
 <script>

src/components/panel/Panel.vue

@@ -44,7 +44,7 @@ export default {
                 value: this.d_collapsed
             });
         }
-    } 
+    }
 }
 </script>
 

src/components/password/Password.vue

@@ -88,7 +88,7 @@ export default {
                         if (!this.panel) {
                             this.createPanel();
                         }
-                        
+
                         vm.panel.style.zIndex = String(DomHandler.generateZIndex());
                         vm.panel.style.display = 'block';
                         setTimeout(() => {
@@ -97,7 +97,7 @@ export default {
                         }, 1);
                         DomHandler.absolutePosition(this.panel, this.$refs.input);
                     }
-                    
+
                     this.$emit('focus', event);
                 },
                 blur: event => {
@@ -133,7 +133,7 @@ export default {
                             else if (score >= 30 && score < 80) {
                                 label = this.mediumLabel;
                                 meterPos = '0px -20px';
-                            } 
+                            }
                             else if (score >= 80) {
                                 label = this.strongLabel;
                                 meterPos = '0px -30px';

src/components/picklist/PickList.vue

@@ -14,7 +14,7 @@
             </div>
             <transition-group ref="sourceList" name="p-picklist-flip" tag="ul" class="p-picklist-list p-picklist-source" :style="listStyle">
                 <template v-for="(item, i) of sourceList">
-                    <li tabindex="0" :key="getItemKey(item, i)" :class="['p-picklist-item', {'p-highlight': isSelected(item, 0)}]" 
+                    <li tabindex="0" :key="getItemKey(item, i)" :class="['p-picklist-item', {'p-highlight': isSelected(item, 0)}]"
                         @click="onItemClick($event, item, i, 0)" @keydown="onItemKeyDown($event, item, i, 0)" @touchend="onItemTouchEnd">
                         <slot name="item" :item="item" :index="i"> </slot>
                     </li>
@@ -35,7 +35,7 @@
             </div>
             <transition-group ref="targetList" name="p-picklist-flip" tag="ul" class="p-picklist-list p-picklist-target" :style="listStyle">
                 <template v-for="(item, i) of targetList">
-                    <li tabindex="0" :key="getItemKey(item, i)" :class="['p-picklist-item', {'p-highlight': isSelected(item, 1)}]" 
+                    <li tabindex="0" :key="getItemKey(item, i)" :class="['p-picklist-item', {'p-highlight': isSelected(item, 1)}]"
                         @click="onItemClick($event, item, i, 1)" @keydown="onItemKeyDown($event, item, i, 1)" @touchend="onItemTouchEnd">
                         <slot name="item" :item="item" :index="i"> </slot>
                     </li>
@@ -111,7 +111,7 @@ export default {
             if (this.d_selection && this.d_selection[listIndex]) {
                 let valueList = [...this.value[listIndex]];
                 let selectionList = this.d_selection[listIndex];
-                
+
                 for (let i = 0; i < selectionList.length; i++) {
                     let selectedItem = selectionList[i];
                     let selectedItemIndex = ObjectUtils.findIndexInList(selectedItem, valueList);
@@ -129,7 +129,7 @@ export default {
 
                 let value = [...this.value];
                 value[listIndex] = valueList;
-                           
+
                 this.reorderDirection = 'up';
                 this.$emit('input', value);
                 this.$emit('reorder', {
@@ -144,7 +144,7 @@ export default {
             if(this.d_selection) {
                 let valueList = [...this.value[listIndex]];
                 let selectionList = this.d_selection[listIndex];
-                
+
                 for (let i = 0; i < selectionList.length; i++) {
                     let selectedItem = selectionList[i];
                     let selectedItemIndex = ObjectUtils.findIndexInList(selectedItem, valueList);
@@ -174,7 +174,7 @@ export default {
             if(this.d_selection) {
                 let valueList = [...this.value[listIndex]];
                 let selectionList = this.d_selection[listIndex];
-                
+
                 for (let i = selectionList.length - 1; i >= 0; i--) {
                     let selectedItem = selectionList[i];
                     let selectedItemIndex = ObjectUtils.findIndexInList(selectedItem, valueList);
@@ -192,7 +192,7 @@ export default {
 
                 let value = [...this.value];
                 value[listIndex] = valueList;
-                
+
                 this.reorderDirection = 'down';
                 this.$emit('input', value);
                 this.$emit('reorder', {
@@ -206,7 +206,7 @@ export default {
             if (this.d_selection) {
                 let valueList = [...this.value[listIndex]];
                 let selectionList = this.d_selection[listIndex];
-                
+
                 for (let i = selectionList.length - 1; i >= 0; i--) {
                     let selectedItem = selectionList[i];
                     let selectedItemIndex = ObjectUtils.findIndexInList(selectedItem, valueList);
@@ -240,7 +240,7 @@ export default {
             if (selection) {
                 for (let i = 0; i < selection.length; i++) {
                     let selectedItem = selection[i];
-                    
+
                     if (ObjectUtils.findIndexInList(selectedItem, targetList) == -1) {
                         targetList.push(sourceList.splice(ObjectUtils.findIndexInList(selectedItem, sourceList),1)[0]);
                     }
@@ -298,7 +298,7 @@ export default {
             if (selection) {
                 for (let i = 0; i < selection.length; i++) {
                     let selectedItem = selection[i];
-                    
+
                     if (ObjectUtils.findIndexInList(selectedItem, sourceList) == -1) {
                         sourceList.push(targetList.splice(ObjectUtils.findIndexInList(selectedItem, targetList),1)[0]);
                     }
@@ -358,12 +358,12 @@ export default {
 
             if (metaSelection) {
                 let metaKey = (event.metaKey || event.ctrlKey);
-                
+
                 if (selected && metaKey) {
                     _selection = selectionList.filter((val, index) => index !== selectedIndex);
                 }
                 else {
-                    _selection = (metaKey) ? selectionList ? [...selectionList] : [] : [];   
+                    _selection = (metaKey) ? selectionList ? [...selectionList] : [] : [];
                     _selection.push(item);
                 }
             }
@@ -392,7 +392,7 @@ export default {
         },
         onItemKeyDown(event, item, index) {
             let listItem = event.currentTarget;
-            
+
             switch(event.which) {
                 //down
                 case 40:
@@ -400,20 +400,20 @@ export default {
                     if (nextItem) {
                         nextItem.focus();
                     }
-                    
+
                     event.preventDefault();
                 break;
-                
+
                 //up
                 case 38:
                     var prevItem = this.findPrevItem(listItem);
                     if (prevItem) {
                         prevItem.focus();
                     }
-                    
+
                     event.preventDefault();
                 break;
-                
+
                 //enter
                 case 13:
                     this.onItemClick(event, item, index);
@@ -434,7 +434,7 @@ export default {
         },
         findPrevItem(item) {
             let prevItem = item.previousElementSibling;
-            
+
             if (prevItem)
                 return !DomHandler.hasClass(prevItem, 'p-picklist-item') ? this.findPrevItem(prevItem) : prevItem;
             else
@@ -448,19 +448,19 @@ export default {
                     case 'up':
                         DomHandler.scrollInView(listElement, listItems[0]);
                     break;
-                    
+
                     case 'top':
                         listElement.scrollTop = 0;
                     break;
-                    
+
                     case 'down':
                         DomHandler.scrollInView(listElement, listItems[listItems.length - 1]);
                     break;
-                    
+
                     case 'bottom':
                         listElement.scrollTop = listElement.scrollHeight;
                     break;
-                    
+
                     default:
                     break;
                 }
@@ -544,7 +544,7 @@ export default {
     .p-picklist-list-wrapper {
         width: 100%;
     }
-    
+
     .p-picklist-buttons .p-button.p-button-icon-only {
         display: inline-block;
         width: 20%;

src/components/progressbar/ProgressBar.vue

@@ -33,7 +33,7 @@ export default {
         },
         progressStyle() {
             return {
-                width: this.value + '%', 
+                width: this.value + '%',
                 display: 'block'
             };
         },
@@ -48,9 +48,9 @@ export default {
 </script>
 
 <style>
-.p-progressbar { 
-    height: 1.2em; 
-    text-align: left; 
+.p-progressbar {
+    height: 1.2em;
+    text-align: left;
     position: relative;
     overflow: hidden;
 }
@@ -111,7 +111,7 @@ export default {
     -webkit-animation-delay: 1.15s;
             animation-delay: 1.15s;
 }
-    
+
 @-webkit-keyframes p-progressbar-indeterminate-anim {
   0% {
     left: -35%;
@@ -121,7 +121,7 @@ export default {
     right: -90%; }
   100% {
     left: 100%;
-    right: -90%; } 
+    right: -90%; }
 }
 @keyframes p-progressbar-indeterminate-anim {
   0% {
@@ -132,7 +132,7 @@ export default {
     right: -90%; }
   100% {
     left: 100%;
-    right: -90%; } 
+    right: -90%; }
 }
 
 @-webkit-keyframes p-progressbar-indeterminate-anim-short {
@@ -144,7 +144,7 @@ export default {
     right: -8%; }
   100% {
     left: 107%;
-    right: -8%; } 
+    right: -8%; }
 }
 @keyframes p-progressbar-indeterminate-anim-short {
   0% {
@@ -155,6 +155,6 @@ export default {
     right: -8%; }
   100% {
     left: 107%;
-    right: -8%; } 
+    right: -8%; }
 }
 </style>

src/components/selectbutton/SelectButton.vue

@@ -48,7 +48,7 @@ export default {
             let selected = this.isSelected(option);
             let optionValue = this.getOptionValue(option);
             let newValue;
-            
+
             if(this.multiple) {
                 if (selected)
                     newValue = this.value.filter(val => !ObjectUtils.equals(val, optionValue, this.dataKey));

src/components/slider/Slider.vue

@@ -66,11 +66,11 @@ export default {
                 else
                     this.updateModel(event, newValue);
             }
-            else {            
+            else {
                 if (this.step)
                     this.handleStepChange(event, newValue, this.value);
                 else
-                    this.updateModel(event, newValue);      
+                    this.updateModel(event, newValue);
             }
         },
         onSlide(event) {
@@ -80,12 +80,12 @@ export default {
         handleStepChange(event, newValue, oldValue) {
             let diff = (newValue - oldValue);
             let val = oldValue;
-            
+
             if (diff < 0)
                 val = oldValue + Math.ceil(newValue / this.step - oldValue / this.step) * this.step;
             else if (diff > 0)
                 val = oldValue + Math.floor(newValue / this.step - oldValue / this.step) * this.step;
-            
+
             this.updateModel(event, val);
         },
         updateModel(event, value) {
@@ -105,7 +105,7 @@ export default {
                     else if (newValue < this.value[0])
                         newValue = this.value[0];
                 }
-                
+
                 modelValue = [...this.value];
                 modelValue[this.handleIndex] = Math.floor(value);
             }
@@ -114,7 +114,7 @@ export default {
                     newValue = this.min;
                 else if (newValue > this.max)
                     newValue = this.max;
-                
+
                 modelValue = Math.floor(newValue);
             }
 
@@ -125,7 +125,7 @@ export default {
             if (this.disabled) {
                 return;
             }
-            
+
             if (!DomHandler.hasClass(event.target, 'p-slider-handle')) {
                 this.updateDomData();
                 this.onSlide(event);
@@ -135,7 +135,7 @@ export default {
             if (this.disabled) {
                 return;
             }
-            
+
             this.dragging = true;
             this.updateDomData();
             this.handleIndex = index;
@@ -237,7 +237,7 @@ export default {
                 this.mouseupListener = (event) => {
                     if (this.dragging) {
                         this.dragging = false;
-                        this.$emit('slideend', {originalEvent: event, values: this.value});                  
+                        this.$emit('slideend', {originalEvent: event, values: this.value});
                     }
                 };
 
@@ -249,7 +249,7 @@ export default {
                 document.removeEventListener('mousemove', this.dragListener);
                 this.dragListener = null;
             }
-            
+
             if (this.mouseupListener) {
                 document.removeEventListener('mouseup', this.mouseupListener);
                 this.mouseupListener = null;
@@ -289,7 +289,7 @@ export default {
                 return {'left': this.handlePosition + '%'};
             else
                 return {'bottom': this.handlePosition + '%'};
-            
+
         },
         handlePosition() {
             if (this.value === 0)
@@ -319,7 +319,7 @@ export default {
             else
                 return {'bottom': this.rangeStartPosition + '%'};
         },
-        rangeEndHandleStyle() {            
+        rangeEndHandleStyle() {
             if (this.horizontal)
                 return {'left': this.rangeEndPosition + '%'};
             else

src/components/spinner/Spinner.vue

@@ -1,11 +1,11 @@
 <template>
     <span :class="containerClass">
         <input ref="input" :class="inputClass" v-bind="$attrs" v-on="listeners" :value="value">
-        <button type="button" :class="upButtonClass" @mousedown="onButtonMouseDown($event, 1)" @mouseup="onButtonMouseUp" @mouseleave="onButtonMouseLeave" 
+        <button type="button" :class="upButtonClass" @mousedown="onButtonMouseDown($event, 1)" @mouseup="onButtonMouseUp" @mouseleave="onButtonMouseLeave"
             @keydown="onButtonKeyDown($event, 1)" @keyup="onButtonKeyUp" :disabled="$attrs.disabled">
             <span class="p-spinner-button-icon pi pi-caret-up"></span>
         </button>
-        <button type="button" :class="downButtonClass" @mousedown="onButtonMouseDown($event, -1)" @mouseup="onButtonMouseUp" @mouseleave="onButtonMouseLeave" 
+        <button type="button" :class="downButtonClass" @mousedown="onButtonMouseDown($event, -1)" @mouseup="onButtonMouseUp" @mouseleave="onButtonMouseLeave"
             @keydown="onButtonKeyDown($event, -1)" @keyup="onButtonKeyUp" :disabled="$attrs.disabled">
             <span class="p-spinner-button-icon pi pi-caret-down"></span>
         </button>

src/components/tabview/TabView.vue

@@ -36,7 +36,7 @@ export default {
     },
     mounted() {
         this.tabs = this.$children;
-        
+
         let activeTab = this.findActiveTab();
         if (!activeTab && this.tabs.length) {
             this.tabs[0].d_active = true;
@@ -51,14 +51,14 @@ export default {
                     originalEvent: event,
                     tab: tab
                 });
-            }           
+            }
         },
         activateTab(tab) {
             for (let i = 0; i < this.tabs.length; i++) {
                 let active = this.tabs[i] === tab;
                 this.tabs[i].d_active = active;
                 this.tabs[i].$emit('update:active', active);
-            } 
+            }
         },
         onTabKeydown(event, tab) {
             if (event.which === 13) {
@@ -86,53 +86,53 @@ export default {
 
 <style>
 .p-tabview {
-    padding: .25em; 
+    padding: .25em;
 }
 
-.p-tabview .p-tabview-nav { 
+.p-tabview .p-tabview-nav {
     margin: 0;
 }
 
-.p-tabview .p-tabview-nav:after { 
+.p-tabview .p-tabview-nav:after {
     content: "";
     display: table;
     clear: both;
 }
 
-.p-tabview .p-tabview-nav li { 
-    list-style: none; 
-    float: left; 
-    position: relative; 
-    margin: 0 .125em 1px 0;  
-    padding: 0; 
-    white-space: nowrap; 
+.p-tabview .p-tabview-nav li {
+    list-style: none;
+    float: left;
+    position: relative;
+    margin: 0 .125em 1px 0;
+    padding: 0;
+    white-space: nowrap;
 }
 
-.p-tabview .p-tabview-nav li a { 
-    float: left; 
-    padding: .5em 1em; 
-    text-decoration: none; 
+.p-tabview .p-tabview-nav li a {
+    float: left;
+    padding: .5em 1em;
+    text-decoration: none;
 }
 
-.p-tabview .p-tabview-nav li.p-tabview-selected a, 
-.p-tabview .p-tabview-nav li.p-disabled a, 
-.p-tabview .p-tabview-nav li.p-state-processing a { 
-    cursor: text; 
+.p-tabview .p-tabview-nav li.p-tabview-selected a,
+.p-tabview .p-tabview-nav li.p-disabled a,
+.p-tabview .p-tabview-nav li.p-state-processing a {
+    cursor: text;
 }
 
-.p-tabview .p-tabview-nav li a, 
-.p-tabview.p-tabview-collapsible .p-tabview-nav li.p-tabview-selected a { 
-    cursor: pointer; 
+.p-tabview .p-tabview-nav li a,
+.p-tabview.p-tabview-collapsible .p-tabview-nav li.p-tabview-selected a {
+    cursor: pointer;
 }
 
-.p-tabview .p-tabview-panel { 
-    border-width: 0; 
-    padding: 1em; 
-    background: none; 
+.p-tabview .p-tabview-panel {
+    border-width: 0;
+    padding: 1em;
+    background: none;
 }
 
-.p-tabview .p-tabview-nav li { 
-    display: block; 
+.p-tabview .p-tabview-nav li {
+    display: block;
 }
 
 .p-tabview .p-tabview-nav li .p-tabview-left-icon,
@@ -151,27 +151,27 @@ export default {
     vertical-align: middle;
 }
 
-.p-tabview .p-tabview-nav li .p-tabview-close { 
-    margin: 0.5em 0.3em 0 0; 
-    cursor: pointer; 
+.p-tabview .p-tabview-nav li .p-tabview-close {
+    margin: 0.5em 0.3em 0 0;
+    cursor: pointer;
 }
 
 /* per orientation settings */
 /* top and bottom */
-.p-tabview.p-tabview-top > .p-tabview-nav li { 
+.p-tabview.p-tabview-top > .p-tabview-nav li {
     border-bottom: 0;
-    top: 1px; 
+    top: 1px;
 }
 
-.p-tabview.p-tabview-top > .p-tabview-nav { 
-    padding: .2em .2em 0; 
+.p-tabview.p-tabview-top > .p-tabview-nav {
+    padding: .2em .2em 0;
 }
 
-.p-tabview.p-tabview-bottom > .p-tabview-nav { 
-    padding: 0 .2em .2em; 
+.p-tabview.p-tabview-bottom > .p-tabview-nav {
+    padding: 0 .2em .2em;
 }
 
-.p-tabview.p-tabview-bottom > .p-tabview-nav li { 
+.p-tabview.p-tabview-bottom > .p-tabview-nav li {
     border-top: 0;
 }
 

src/components/toast/Toast.vue

@@ -61,8 +61,8 @@ export default {
         add(message) {
             if (message.id == null) {
                 message.id = messageIdx++;
-            } 
-            
+            }
+
             this.messages = [...this.messages, message];
         },
         remove(message) {

src/components/toast/ToastService.js

@@ -15,7 +15,7 @@ const ToastService = {
             }
         }
     }
-    
+
 };
 
 export default ToastService;

src/components/togglebutton/ToggleButton.vue

@@ -65,7 +65,7 @@ export default {
             return [
                 this.value ? this.onIcon: this.offIcon,
                 {
-                    'p-button-icon-left': this.iconPos === 'left', 
+                    'p-button-icon-left': this.iconPos === 'left',
                     'p-button-icon-right': this.iconPos === 'right'
                 }
             ]

src/components/toolbar/Toolbar.vue

@@ -11,7 +11,7 @@
 
 <script>
 export default {
-    
+
 }
 </script>
 

src/components/tree/Tree.vue

@@ -12,7 +12,7 @@
                 <span class="p-tree-filter-icon pi pi-search"></span>
         </div>
         <ul class="p-tree-container" role="tree">
-            <TreeNode v-for="node of valueToRender" :key="node.key" :node="node" :templates="$scopedSlots" 
+            <TreeNode v-for="node of valueToRender" :key="node.key" :node="node" :templates="$scopedSlots"
                 :expandedKeys="d_expandedKeys" @node-toggle="onNodeToggle" @node-click="onNodeClick"
                 :selectionMode="selectionMode" :selectionKeys="selectionKeys" @checkbox-change="onCheckboxChange"></TreeNode>
         </ul>
@@ -92,7 +92,7 @@ export default {
             else {
                 this.d_expandedKeys[key] = true;
                 this.$emit('node-expand', node);
-            }                
+            }
 
             this.d_expandedKeys = {...this.d_expandedKeys};
             this.$emit('update:expandedKeys', this.d_expandedKeys);
@@ -119,7 +119,7 @@ export default {
             const metaKey = (originalEvent.metaKey||originalEvent.ctrlKey);
             const selected = this.isNodeSelected(node);
             let _selectionKeys;
-        
+
             if (selected && metaKey) {
                 if (this.isSingleSelectionMode()) {
                     _selectionKeys = {};
@@ -149,7 +149,7 @@ export default {
             const node = event.node;
             const selected = this.isNodeSelected(node);
             let _selectionKeys;
-            
+
             if (this.isSingleSelectionMode()) {
                 if (selected) {
                     _selectionKeys = {};
@@ -171,7 +171,7 @@ export default {
                 else {
                     _selectionKeys = this.selectionKeys ? {...this.selectionKeys} : {};
                     _selectionKeys[node.key] = true;
-                    
+
                     this.$emit('node-select', node);
                 }
             }
@@ -212,7 +212,7 @@ export default {
                         }
                     }
                 }
-                
+
                 if (matched) {
                     return true;
                 }
@@ -253,13 +253,13 @@ export default {
             for (let node of this.value) {
                 let _node = {...node};
                 let paramsWithoutNode = {searchFields, filterText, strict};
-                
+
                 if ((strict && (this.findFilteredNodes(_node, paramsWithoutNode) || this.isFilterMatched(_node, paramsWithoutNode))) ||
                     (!strict && (this.isFilterMatched(_node, paramsWithoutNode) || this.findFilteredNodes(_node, paramsWithoutNode)))) {
                     filteredNodes.push(_node);
                 }
             }
-            
+
             return filteredNodes;
         },
         valueToRender() {
@@ -407,5 +407,5 @@ export default {
 
 .p-tree .p-tree-loading-content .p-tree-loading-icon {
     font-size: 2em;
-} 
+}
 </style>

src/components/tree/TreeNode.vue

@@ -1,6 +1,6 @@
 <template>
     <li :class="containerClass">
-        <div :class="contentClass" tabindex="0" role="treeitem" :aria-expanded="expanded" 
+        <div :class="contentClass" tabindex="0" role="treeitem" :aria-expanded="expanded"
             @click="onClick" @keydown="onKeyDown" @touchend="onTouchEnd" :style="node.style">
             <span class="p-tree-toggler p-unselectable-text p-link" @click="toggle">
                 <span :class="toggleIcon"></span>
@@ -18,7 +18,7 @@
         <ul class="p-treenode-children" role="group" v-if="hasChildren && expanded">
             <sub-treenode v-for="childNode of node.children" :key="childNode.key" :node="childNode" :templates="templates"
                 :expandedKeys="expandedKeys" @node-toggle="onChildNodeToggle" @node-click="onChildNodeClick"
-                :selectionMode="selectionMode" :selectionKeys="selectionKeys" 
+                :selectionMode="selectionMode" :selectionKeys="selectionKeys"
                 @checkbox-change="propagateUp"></sub-treenode>
         </ul>
     </li>
@@ -152,7 +152,7 @@ export default {
 
                     event.preventDefault();
                 break;
- 
+
                 //enter
                 case 13:
                     this.onClick(event);
@@ -165,7 +165,7 @@ export default {
             }
         },
         toggleCheckbox() {
-            let _selectionKeys = this.selectionKeys ? {...this.selectionKeys} : {};   
+            let _selectionKeys = this.selectionKeys ? {...this.selectionKeys} : {};
             const _check = !this.checked;
 
             this.propagateDown(this.node, _check, _selectionKeys);
@@ -193,7 +193,7 @@ export default {
             let _selectionKeys = {...event.selectionKeys};
             let checkedChildCount = 0;
             let childPartialSelected = false;
-            
+
             for(let child of this.node.children) {
                 if(_selectionKeys[child.key] && _selectionKeys[child.key].checked)
                     checkedChildCount++;
@@ -219,7 +219,7 @@ export default {
                 node: event.node,
                 check: event.check,
                 selectionKeys: _selectionKeys
-            }); 
+            });
         },
         onChildCheckboxChange(event) {
             this.$emit('checkbox-change', event);
@@ -270,7 +270,7 @@ export default {
             return this.node.leaf === false ? false : !(this.node.children && this.node.children.length);
         },
         selectable() {
-            return this.node.selectable === false ? false : this.selectionMode != null; 
+            return this.node.selectable === false ? false : this.selectionMode != null;
         },
         selected() {
             return (this.selectionMode && this.selectionKeys) ? this.selectionKeys[this.node.key] === true : false;

src/components/treetable/TreeTable.vue

@@ -246,7 +246,7 @@ export default {
             else {
                 this.d_expandedKeys[key] = true;
                 this.$emit('node-expand', node);
-            }                
+            }
 
             this.d_expandedKeys = {...this.d_expandedKeys};
             this.$emit('update:expandedKeys', this.d_expandedKeys);
@@ -265,7 +265,7 @@ export default {
             const metaKey = (originalEvent.metaKey||originalEvent.ctrlKey);
             const selected = this.isNodeSelected(node);
             let _selectionKeys;
-        
+
             if (selected && metaKey) {
                 if (this.isSingleSelectionMode()) {
                     _selectionKeys = {};
@@ -295,7 +295,7 @@ export default {
             const node = event.node;
             const selected = this.isNodeSelected(node);
             let _selectionKeys;
-            
+
             if (this.isSingleSelectionMode()) {
                 if (selected) {
                     _selectionKeys = {};
@@ -317,7 +317,7 @@ export default {
                 else {
                     _selectionKeys = this.selectionKeys ? {...this.selectionKeys} : {};
                     _selectionKeys[node.key] = true;
-                    
+
                     this.$emit('node-select', node);
                 }
             }
@@ -353,15 +353,15 @@ export default {
         getColumnHeaderClass(column) {
             const sorted = this.isColumnSorted(column);
 
-            return [column.headerClass, 
-                    {'p-sortable-column': column.sortable}, 
+            return [column.headerClass,
+                    {'p-sortable-column': column.sortable},
                     {'p-resizable-column': this.resizableColumns},
                     {'p-highlight': sorted}
             ];
         },
         isColumnSorted(column) {
             if (column.sortable)
-                return this.sortMode === 'single' ? (this.d_sortField === (column.field || column.sortField)) : this.getMultiSortMetaIndex(column) > -1; 
+                return this.sortMode === 'single' ? (this.d_sortField === (column.field || column.sortField)) : this.getMultiSortMetaIndex(column) > -1;
             else
                 return false;
         },
@@ -380,7 +380,7 @@ export default {
                     sortOrder = this.d_multiSortMeta[metaIndex].order;
                 }
             }
-   
+
             return [
                 'p-sortable-column-icon pi pi-fw',
                 {'pi-sort': !sorted},
@@ -406,10 +406,10 @@ export default {
                 this.resetPage();
                 const targetNode = event.target;
 
-                if (DomHandler.hasClass(targetNode, 'p-sortable-column') || DomHandler.hasClass(targetNode, 'p-column-title') 
+                if (DomHandler.hasClass(targetNode, 'p-sortable-column') || DomHandler.hasClass(targetNode, 'p-column-title')
                     || DomHandler.hasClass(targetNode, 'p-sortable-column-icon') || DomHandler.hasClass(targetNode.parentElement, 'p-sortable-column-icon')) {
                     DomHandler.clearSelection();
-                    
+
                     const columnField = column.field || column.sortField;
                     this.d_sortOrder = (this.d_sortField === columnField) ? this.d_sortOrder * -1 : this.defaultSortOrder;
                     this.d_sortField = columnField;
@@ -420,8 +420,8 @@ export default {
                             this.d_multiSortMeta = [];
                         }
 
-                        this.addSortMeta({field: this.d_sortField, order: this.d_sortOrder});   
-                    }    
+                        this.addSortMeta({field: this.d_sortField, order: this.d_sortOrder});
+                    }
 
                     this.$emit('update:sortField', this.d_sortFied);
                     this.$emit('update:sortOrder', this.d_sortOrder);
@@ -486,7 +486,7 @@ export default {
             return _nodes;
         },
         sortMultiple(nodes) {
-            return this.sortNodesMultiple(nodes); 
+            return this.sortNodesMultiple(nodes);
         },
         sortNodesMultiple(nodes) {
             let _nodes = [...nodes];
@@ -522,7 +522,7 @@ export default {
                         return (this.d_multiSortMeta[index].order * value1.localeCompare(value2, undefined, { numeric: true }));
                     else
                         result = (value1 < value2) ? -1 : 1;
-                }            
+                }
             }
 
             return (this.d_multiSortMeta[index].order * result);
@@ -547,7 +547,7 @@ export default {
                         let filterValue = this.filters[col.field];
                         let filterConstraint = FilterUtils[filterMatchMode];
                         let paramsWithoutNode = {filterField, filterValue, filterConstraint, strict};
-                        
+
                         if ((strict && !(this.findFilteredNodes(copyNode, paramsWithoutNode) || this.isFilterMatched(copyNode, paramsWithoutNode))) ||
                             (!strict && !(this.isFilterMatched(copyNode, paramsWithoutNode) || this.findFilteredNodes(copyNode, paramsWithoutNode)))) {
                                 localMatch = false;
@@ -606,7 +606,7 @@ export default {
                         }
                     }
                 }
-                
+
                 if (matched) {
                     return true;
                 }
@@ -645,7 +645,7 @@ export default {
             this.$refs.resizeHelper.style.height = this.$el.offsetHeight + 'px';
             this.$refs.resizeHelper.style.top = 0 + 'px';
             this.$refs.resizeHelper.style.left = (event.pageX - containerLeft + this.$el.scrollLeft) + 'px';
-            
+
             this.$refs.resizeHelper.style.display = 'block';
         },
         onColumnResizeEnd() {
@@ -658,7 +658,7 @@ export default {
                 if(this.columnResizeMode === 'fit') {
                     let nextColumn = this.resizeColumnElement.nextElementSibling;
                     let nextColumnWidth = nextColumn.offsetWidth - delta;
-                    
+
                     if(newColumnWidth > 15 && nextColumnWidth > 15) {
                         this.resizeColumnElement.style.width = newColumnWidth + 'px';
                         if(nextColumn) {
@@ -669,14 +669,14 @@ export default {
                 else if(this.columnResizeMode === 'expand') {
                     this.$refs.table.style.width = this.$refs.table.offsetWidth + delta + 'px';
                     this.resizeColumnElement.style.width = newColumnWidth + 'px';
-                }    
-                
+                }
+
                 this.$emit('column-resize-end', {
                     element: this.resizeColumnElement,
                     delta: delta
                 });
             }
-                    
+
             this.$refs.resizeHelper.style.display = 'none';
             this.resizeColumn = null;
             DomHandler.removeClass(this.$el, 'p-unselectable-text');
@@ -691,7 +691,7 @@ export default {
                     }
                 });
             }
-            
+
             if (!this.documentColumnResizeEndListener) {
                 this.documentColumnResizeEndListener = document.addEventListener('mouseup', () => {
                     if(this.columnResizing) {
@@ -700,14 +700,14 @@ export default {
                     }
                 });
             }
-            
+
         },
         unbindColumnResizeEvents() {
             if (this.documentColumnResizeListener) {
                 document.removeEventListener('document', this.documentColumnResizeListener);
                 this.documentColumnResizeListener = null;
             }
-            
+
             if (this.documentColumnResizeEndListener) {
                 document.removeEventListener('document', this.documentColumnResizeEndListener);
                  this.documentColumnResizeEndListener = null;
@@ -719,8 +719,8 @@ export default {
             return ['p-treetable p-component', {
                 'p-treetable-hoverable-rows': (this.rowHover || this.rowSelectionMode),
                 'p-treetable-auto-layout': this.autoLayout,
-                'p-treetable-resizable': this.resizableColumns, 
-                'p-treetable-resizable-fit': this.resizableColumns && this.columnResizeMode === 'fit', 
+                'p-treetable-resizable': this.resizableColumns,
+                'p-treetable-resizable-fit': this.resizableColumns && this.columnResizeMode === 'fit',
             }];
         },
         columns() {

src/components/treetable/TreeTableRow.vue

@@ -97,22 +97,22 @@ export default {
                         if (nextRow) {
                             nextRow.focus();
                         }
-        
+
                         event.preventDefault();
                         break;
                     }
-        
+
                     //up arrow
                     case 38: {
                         const previousRow = rowElement.previousElementSibling;
                         if (previousRow) {
                             previousRow.focus();
                         }
-        
+
                         event.preventDefault();
                         break;
                     }
-        
+
                     //right-left arrows
                     case 37:
                     case 39: {
@@ -122,14 +122,14 @@ export default {
                         }
                         break;
                     }
-        
+
                     //enter
                     case 13: {
                         this.onClick(event);
                         event.preventDefault();
                         break;
                     }
-        
+
                     default:
                         //no op
                     break;
@@ -137,7 +137,7 @@ export default {
             }
         },
         toggleCheckbox() {
-            let _selectionKeys = this.selectionKeys ? {...this.selectionKeys} : {};   
+            let _selectionKeys = this.selectionKeys ? {...this.selectionKeys} : {};
             const _check = !this.checked;
 
             this.propagateDown(this.node, _check, _selectionKeys);
@@ -165,7 +165,7 @@ export default {
             let _selectionKeys = {...event.selectionKeys};
             let checkedChildCount = 0;
             let childPartialSelected = false;
-            
+
             for(let child of this.node.children) {
                 if(_selectionKeys[child.key] && _selectionKeys[child.key].checked)
                     checkedChildCount++;
@@ -191,7 +191,7 @@ export default {
                 node: event.node,
                 check: event.check,
                 selectionKeys: _selectionKeys
-            }); 
+            });
         },
         onCheckboxFocus() {
            this.checkboxFocused = true;
@@ -223,7 +223,7 @@ export default {
         },
         togglerStyle() {
             return {
-                marginLeft: this.level * 16 + 'px', 
+                marginLeft: this.level * 16 + 'px',
                 visibility: this.leaf ? 'hidden' : 'visible'
             };
         },

src/components/treetable/TreeTableRowLoader.vue

@@ -30,7 +30,7 @@ const TreeTableRowLoader = {
         }
     },
     render(createElement, context) {
-        const root = createElement(TreeTableRow, { 
+        const root = createElement(TreeTableRow, {
             props: context.props,
             on: {
                 'node-toggle': context.listeners['node-toggle'],
@@ -50,7 +50,7 @@ const TreeTableRowLoader = {
                 childNodeProps.parentNode = node;
                 childNodeProps.level = context.props.level + 1;
 
-                let childNodeElement = createElement(TreeTableRowLoader, { 
+                let childNodeElement = createElement(TreeTableRowLoader, {
                     props: childNodeProps,
                     on: {
                         'node-toggle': context.listeners['node-toggle'],
@@ -60,7 +60,7 @@ const TreeTableRowLoader = {
                             let _selectionKeys = {...event.selectionKeys};
                             let checkedChildCount = 0;
                             let childPartialSelected = false;
-                            
+
                             for(let child of node.children) {
                                 if(_selectionKeys[child.key] && _selectionKeys[child.key].checked)
                                     checkedChildCount++;

src/components/utils/DomHandler.js

@@ -1,5 +1,5 @@
 export default class DomHandler {
-    
+
     static innerWidth(el) {
         let width = el.offsetWidth;
         let style = getComputedStyle(el);
@@ -50,7 +50,7 @@ export default class DomHandler {
                 let style = getComputedStyle(el);
                 height += parseFloat(style.marginTop) + parseFloat(style.marginBottom);
             }
-    
+
             return height;
         }
         else {
@@ -86,7 +86,7 @@ export default class DomHandler {
     static getCurrentZIndex() {
         return this.zindex;
     }
-    
+
     static index(element) {
         let children = element.parentNode.childNodes;
         let num = 0;
@@ -207,7 +207,7 @@ export default class DomHandler {
         element.style.top = top + 'px';
         element.style.left = left + 'px';
     }
-    
+
     static getHiddenElementOuterHeight(element) {
         element.style.visibility = 'hidden';
         element.style.display = 'block';
@@ -271,7 +271,7 @@ export default class DomHandler {
                 opacity = 0;
                 clearInterval(fading);
             }
-            
+
             element.style.opacity = opacity;
         }, interval);
     }
@@ -329,7 +329,7 @@ export default class DomHandler {
     static calculateScrollbarWidth() {
         if(this.calculatedScrollbarWidth != null)
             return this.calculatedScrollbarWidth;
-        
+
         let scrollDiv = document.createElement("div");
         scrollDiv.className = "p-scrollbar-measure";
         document.body.appendChild(scrollDiv);
@@ -338,7 +338,7 @@ export default class DomHandler {
         document.body.removeChild(scrollDiv);
 
         this.calculatedScrollbarWidth = scrollbarWidth;
-        
+
         return scrollbarWidth;
     }
 
@@ -379,5 +379,5 @@ export default class DomHandler {
 
     static isVisible(element) {
         return element.offsetParent != null;
-    } 
+    }
 }

src/service/CountryService.js

@@ -1,7 +1,7 @@
 import axios from 'axios'
 
 export default class CountryService {
-    
+
     getCountries() {
         return axios.get('demo/data/countries.json').then(res => res.data.data);
     }

src/service/EventService.js

@@ -1,7 +1,7 @@
 import axios from 'axios';
 
 export default class EventService {
-    
+
     getEvents() {
         return axios.get('demo/data/events.json').then(res => res.data.data);
     }

src/service/NodeService.js

@@ -1,7 +1,7 @@
 import axios from 'axios';
 
 export default class NodeService {
-    
+
     getTreeTableNodes() {
         return axios.get('demo/data/treetablenodes.json')
                 .then(res => res.data.root);
@@ -11,5 +11,5 @@ export default class NodeService {
         return axios.get('demo/data/treenodes.json')
                 .then(res => res.data.root);
     }
-    
+
 }

src/views/accordion/AccordionDemo.vue

@@ -11,18 +11,18 @@
             <h3 class="first">Default</h3>
             <Accordion>
                 <AccordionTab header="Godfather I">
-                    The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war, 
-                    but does not intend to become part of his father's business. Through Michael's life the nature of the family business becomes clear. The business of the family is 
+                    The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war,
+                    but does not intend to become part of his father's business. Through Michael's life the nature of the family business becomes clear. The business of the family is
                     just like the head of the family, kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
                 </AccordionTab>
                 <AccordionTab header="Godfather II">
-                    Francis Ford Coppola's legendary continuation and sequel to his landmark 1972 film, TheGodfather parallels the young Vito Corleone's rise with his son Michael's spiritual fall, 
-                    deepening The Godfather's depiction of the dark side of the American dream. In the early 1900s, the child Vito flees his Sicilian village for America after the local Mafia kills 
+                    Francis Ford Coppola's legendary continuation and sequel to his landmark 1972 film, TheGodfather parallels the young Vito Corleone's rise with his son Michael's spiritual fall,
+                    deepening The Godfather's depiction of the dark side of the American dream. In the early 1900s, the child Vito flees his Sicilian village for America after the local Mafia kills
                     his family. Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy.
                 </AccordionTab>
                 <AccordionTab header="Godfather III">
-                    The Godfather Part III is set in 1979 and 1980. Michael has moved back to New York and taken great strides to remove the family from crime. He turns over his New York criminal 
-                    interests to longtime enforcer Joey Zasa. He uses his wealth in an attempt to rehabilitate his reputation through numerous philanthropic acts, administered by a foundation named after his father. 
+                    The Godfather Part III is set in 1979 and 1980. Michael has moved back to New York and taken great strides to remove the family from crime. He turns over his New York criminal
+                    interests to longtime enforcer Joey Zasa. He uses his wealth in an attempt to rehabilitate his reputation through numerous philanthropic acts, administered by a foundation named after his father.
                     A decade earlier, he gave custody of his two children to Kay, who has since remarried.
                 </AccordionTab>
             </Accordion>
@@ -30,18 +30,18 @@
             <h3>Multiple</h3>
             <Accordion :multiple="true">
                 <AccordionTab header="Godfather I">
-                    The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war, 
-                    but does not intend to become part of his father's business. Through Michael's life the nature of the family business becomes clear. The business of the family is 
+                    The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war,
+                    but does not intend to become part of his father's business. Through Michael's life the nature of the family business becomes clear. The business of the family is
                     just like the head of the family, kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
                 </AccordionTab>
                 <AccordionTab header="Godfather II">
-                    Francis Ford Coppola's legendary continuation and sequel to his landmark 1972 film, TheGodfather parallels the young Vito Corleone's rise with his son Michael's spiritual fall, 
-                    deepening The Godfather's depiction of the dark side of the American dream. In the early 1900s, the child Vito flees his Sicilian village for America after the local Mafia kills 
+                    Francis Ford Coppola's legendary continuation and sequel to his landmark 1972 film, TheGodfather parallels the young Vito Corleone's rise with his son Michael's spiritual fall,
+                    deepening The Godfather's depiction of the dark side of the American dream. In the early 1900s, the child Vito flees his Sicilian village for America after the local Mafia kills
                     his family. Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy.
                 </AccordionTab>
                 <AccordionTab header="Godfather III">
-                    The Godfather Part III is set in 1979 and 1980. Michael has moved back to New York and taken great strides to remove the family from crime. He turns over his New York criminal 
-                    interests to longtime enforcer Joey Zasa. He uses his wealth in an attempt to rehabilitate his reputation through numerous philanthropic acts, administered by a foundation named after his father. 
+                    The Godfather Part III is set in 1979 and 1980. Michael has moved back to New York and taken great strides to remove the family from crime. He turns over his New York criminal
+                    interests to longtime enforcer Joey Zasa. He uses his wealth in an attempt to rehabilitate his reputation through numerous philanthropic acts, administered by a foundation named after his father.
                     A decade earlier, he gave custody of his two children to Kay, who has since remarried.
                 </AccordionTab>
                 <AccordionTab header="Godfather IV" :disabled="true">
@@ -57,18 +57,18 @@
 
             <Accordion :multiple="true">
                 <AccordionTab header="Godfather I" :active="active1">
-                    The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war, 
-                    but does not intend to become part of his father's business. Through Michael's life the nature of the family business becomes clear. The business of the family is 
+                    The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war,
+                    but does not intend to become part of his father's business. Through Michael's life the nature of the family business becomes clear. The business of the family is
                     just like the head of the family, kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
                 </AccordionTab>
                 <AccordionTab header="Godfather II" :active="active2">
-                    Francis Ford Coppola's legendary continuation and sequel to his landmark 1972 film, TheGodfather parallels the young Vito Corleone's rise with his son Michael's spiritual fall, 
-                    deepening The Godfather's depiction of the dark side of the American dream. In the early 1900s, the child Vito flees his Sicilian village for America after the local Mafia kills 
+                    Francis Ford Coppola's legendary continuation and sequel to his landmark 1972 film, TheGodfather parallels the young Vito Corleone's rise with his son Michael's spiritual fall,
+                    deepening The Godfather's depiction of the dark side of the American dream. In the early 1900s, the child Vito flees his Sicilian village for America after the local Mafia kills
                     his family. Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy.
                 </AccordionTab>
                 <AccordionTab header="Godfather III" :active="active3">
-                    The Godfather Part III is set in 1979 and 1980. Michael has moved back to New York and taken great strides to remove the family from crime. He turns over his New York criminal 
-                    interests to longtime enforcer Joey Zasa. He uses his wealth in an attempt to rehabilitate his reputation through numerous philanthropic acts, administered by a foundation named after his father. 
+                    The Godfather Part III is set in 1979 and 1980. Michael has moved back to New York and taken great strides to remove the family from crime. He turns over his New York criminal
+                    interests to longtime enforcer Joey Zasa. He uses his wealth in an attempt to rehabilitate his reputation through numerous philanthropic acts, administered by a foundation named after his father.
                     A decade earlier, he gave custody of his two children to Kay, who has since remarried.
                 </AccordionTab>
             </Accordion>
@@ -80,8 +80,8 @@
                         <i class="pi pi-calendar"></i>
                         <span>Godfather I</span>
                     </template>
-                    The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war, 
-                    but does not intend to become part of his father's business. Through Michael's life the nature of the family business becomes clear. The business of the family is 
+                    The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war,
+                    but does not intend to become part of his father's business. Through Michael's life the nature of the family business becomes clear. The business of the family is
                     just like the head of the family, kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
                 </AccordionTab>
                 <AccordionTab>
@@ -89,8 +89,8 @@
                         <i class="pi pi-user"></i>
                         <span>Godfather II</span>
                     </template>
-                    Francis Ford Coppola's legendary continuation and sequel to his landmark 1972 film, TheGodfather parallels the young Vito Corleone's rise with his son Michael's spiritual fall, 
-                    deepening The Godfather's depiction of the dark side of the American dream. In the early 1900s, the child Vito flees his Sicilian village for America after the local Mafia kills 
+                    Francis Ford Coppola's legendary continuation and sequel to his landmark 1972 film, TheGodfather parallels the young Vito Corleone's rise with his son Michael's spiritual fall,
+                    deepening The Godfather's depiction of the dark side of the American dream. In the early 1900s, the child Vito flees his Sicilian village for America after the local Mafia kills
                     his family. Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy.
                 </AccordionTab>
                 <AccordionTab>
@@ -98,9 +98,9 @@
                         <i class="pi pi-search"></i>
                         <span>Godfather III</span>
                         <i class="pi pi-cog"></i>
-                    </template> 
-                    The Godfather Part III is set in 1979 and 1980. Michael has moved back to New York and taken great strides to remove the family from crime. He turns over his New York criminal 
-                    interests to longtime enforcer Joey Zasa. He uses his wealth in an attempt to rehabilitate his reputation through numerous philanthropic acts, administered by a foundation named after his father. 
+                    </template>
+                    The Godfather Part III is set in 1979 and 1980. Michael has moved back to New York and taken great strides to remove the family from crime. He turns over his New York criminal
+                    interests to longtime enforcer Joey Zasa. He uses his wealth in an attempt to rehabilitate his reputation through numerous philanthropic acts, administered by a foundation named after his father.
                     A decade earlier, he gave custody of his two children to Kay, who has since remarried.
                 </AccordionTab>
             </Accordion>

src/views/calendar/CalendarDemo.vue

@@ -102,7 +102,7 @@ export default {
         this.maxDate = new Date();
         this.maxDate.setMonth(nextMonth);
         this.maxDate.setFullYear(nextYear);
-        
+
         let invalidDate = new Date();
         invalidDate.setDate(today.getDate() - 1);
         this.invalidDates = [today,invalidDate];
@@ -155,7 +155,7 @@ export default {
     border-radius: 50%;
     width: 2em;
     height: 2em;
-    line-height: 2em; 
+    line-height: 2em;
     padding: 0;
     display: inline-block;
 }

src/views/calendar/CalendarDoc.vue

@@ -131,7 +131,7 @@ export default {
 
             <h3>Custom Content</h3>
             <p>Calendar UI accepts custom content using header and footer templates.</p>
-            
+
 <CodeHighlight>
 &lt;Calendar v-model="value"&gt;
     &lt;template #header&gt;Header Content&lt;/template&gt;
@@ -623,7 +623,7 @@ export default {
         this.maxDate = new Date();
         this.maxDate.setMonth(nextMonth);
         this.maxDate.setFullYear(nextYear);
-        
+
         let invalidDate = new Date();
         invalidDate.setDate(today.getDate() - 1);
         this.invalidDates = [today,invalidDate];

src/views/chart/BarChartDemo.vue

@@ -44,7 +44,7 @@ export default {
                         backgroundColor: '#9CCC65',
                         data: [28, 48, 40, 19, 86, 27, 90]
                     }
-                ]    
+                ]
             },
             multiAxisData: {
                 labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
@@ -84,7 +84,7 @@ export default {
                             min: 0,
                             max: 100
                         }
-                    }, 
+                    },
                     {
                         type: 'linear',
                         display: true,

src/views/chart/ChartDemo.vue

@@ -33,7 +33,7 @@ export default {
                             "#FFCE56"
                         ]
                     }
-                ]    
+                ]
             }
         }
     },

src/views/chart/DoughnutChartDemo.vue

@@ -37,7 +37,7 @@ export default {
                             "#FFCE56"
                         ]
                     }
-                ]    
+                ]
             }
         }
     },

src/views/chart/LineChartDemo.vue

@@ -109,7 +109,7 @@ export default {
                         borderColor: '#FFA726',
                         backgroundColor: '#FFCC80'
                     }
-                ]   
+                ]
             }
         }
     },

src/views/chart/PieChartDemo.vue

@@ -37,7 +37,7 @@ export default {
                             "#FFCE56"
                         ]
                     }
-                ]    
+                ]
             }
         }
     },

src/views/datatable/DataTableColResizeDemo.vue

@@ -1,11 +1,11 @@
 <template>
 	<div>
         <DataTableSubMenu />
-        
+
 		<div class="content-section introduction">
 			<div class="feature-intro">
 				<h1>DataTable - Column Resize</h1>
-				<p>Columns can be resized using drag drop by setting the resizableColumns to true. There are two resize modes; "fit" and "expand". Fit is the default one and the overall table width does not change when a column is resized. 
+				<p>Columns can be resized using drag drop by setting the resizableColumns to true. There are two resize modes; "fit" and "expand". Fit is the default one and the overall table width does not change when a column is resized.
                     In "expand" mode, table width also changes along with the column width.</p>
 			</div>
 		</div>

src/views/datatable/DataTableColToggleDemo.vue

@@ -1,7 +1,7 @@
 <template>
 	<div>
         <DataTableSubMenu />
-        
+
 		<div class="content-section introduction">
 			<div class="feature-intro">
 				<h1>DataTable - Column Toggle</h1>

src/views/datatable/DataTableCrudDemo.vue

@@ -1,7 +1,7 @@
 <template>
 	<div>
         <DataTableSubMenu />
-        
+
 		<div class="content-section introduction">
 			<div class="feature-intro">
 				<h1>DataTable - Crud</h1>
@@ -43,14 +43,14 @@
                         <div class="p-col-8">
                             <InputText id="brand" v-model="car.brand" autocomplete="off" />
                         </div>
-                        
+
                         <div class="p-col-4"><label for="color">Color</label></div>
                         <div class="p-col-8">
                             <InputText id="color" v-model="car.color" autocomplete="off" />
                         </div>
                     </div>
                 </div>
-                
+
                 <template #footer>
                     <Button label="Delete" icon="pi pi-times" @click="deleteCar" class="p-button-danger" />
                     <Button label="Save" icon="pi pi-check" @click="saveCar" class="p-button-success" />
@@ -96,14 +96,14 @@
             &lt;div class="p-col-8"&gt;
                 &lt;InputText id="brand" v-model="car.brand" autocomplete="off" /&gt;
             &lt;/div&gt;
-            
+
             &lt;div class="p-col-4"&gt;&lt;label for="color"&gt;Color&lt;/label&gt;&lt;/div&gt;
             &lt;div class="p-col-8"&gt;
                 &lt;InputText id="color" v-model="car.color" autocomplete="off" /&gt;
             &lt;/div&gt;
         &lt;/div&gt;
     &lt;/div&gt;
-    
+
     &lt;template #footer&gt;
         &lt;Button label="Delete" icon="pi pi-times" @click="deleteCar" class="p-button-danger" /&gt;
         &lt;Button label="Save" icon="pi pi-check" @click="saveCar" class="p-button-success" /&gt;

src/views/datatable/DataTableDemo.vue

@@ -1,7 +1,7 @@
 <template>
 	<div>
         <DataTableSubMenu />
-        
+
 		<div class="content-section introduction">
 			<div class="feature-intro">
 				<h1>DataTable</h1>

src/views/datatable/DataTableDoc.vue

@@ -8,9 +8,9 @@ import DataTable from 'primevue/datatable';
 				</CodeHighlight>
 
                 <h3>Getting Started</h3>
-                <p>DataTable requires a value as an array of objects and columns defined with Column component. Throughout the samples, a car interface having vin, brand, year and color properties is used to define an object to be displayed by the datatable. 
+                <p>DataTable requires a value as an array of objects and columns defined with Column component. Throughout the samples, a car interface having vin, brand, year and color properties is used to define an object to be displayed by the datatable.
                     Cars are loaded by a CarService that connects to a server to fetch the cars with a axios. Note that this is only for demo purposes, DataTable does not have any restrictions on how the data is provided.</p>
-			
+
                 <CodeHighlight lang="javascript">
 import axios from 'axios'
 
@@ -226,16 +226,16 @@ export default {
                 <p>Default table-layout is fixed meaning the cell widths do not depend on their content. If you require cells to scale based on their contents set <i>autoLayout</i> property to true. Note that Scrollable and/or Resizable tables do not support auto layout due to technical limitations.</p>
 
                 <h3>Templating</h3>
-                <p>Field data of a corresponding row is displayed as the cell content by default, this can be customized using a <i>body</i> template where current row data and column properties are passed via the slot props. 
+                <p>Field data of a corresponding row is displayed as the cell content by default, this can be customized using a <i>body</i> template where current row data and column properties are passed via the slot props.
                     On the other hand, <i>header</i> and <i>footer</i> sections of a column can either be defined with the properties or the templates. Similarly DataTable itself also provides header and footer properties along with the templates for the main header and footer of the table.</p>
-            
+
                 <CodeHighlight>
 <template v-pre>
 &lt;DataTable :value="cars"&gt;
     &lt;template #header&gt;
         &lt;div&gt;
             &lt;Button icon="pi pi-refresh" style="float: left"/&gt;
-            List of Cars 
+            List of Cars
         &lt;/div&gt;
     &lt;/template&gt;
     &lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
@@ -263,8 +263,8 @@ export default {
 </CodeHighlight>
 
                 <h3>Pagination</h3>
-                <p>Pagination is enabled by setting <i>paginator</i> property to true and defining the <i>rows</i> property defines the number of rows per page. 
-                    See the <router-link to="/paginator">Paginator</router-link> for the available customization options such as paginator templates, page links, 
+                <p>Pagination is enabled by setting <i>paginator</i> property to true and defining the <i>rows</i> property defines the number of rows per page.
+                    See the <router-link to="/paginator">Paginator</router-link> for the available customization options such as paginator templates, page links,
                     rows per page options and more which can be passed through the DataTable.</p>
 
 <CodeHighlight>
@@ -311,8 +311,8 @@ export default {
 </CodeHighlight>
 
                 <h3>Lazy Loading</h3>
-                <p>Lazy mode is handy to deal with large datasets, instead of loading the entire data, small chunks of data is loaded by invoking corresponding callbacks everytime paging, sorting and filtering happens. Sample belows imitates lazy paging by using an in memory list. 
-                    It is also important to assign the logical number of rows to totalRecords by doing a projection query for paginator configuration so that paginator displays the UI 
+                <p>Lazy mode is handy to deal with large datasets, instead of loading the entire data, small chunks of data is loaded by invoking corresponding callbacks everytime paging, sorting and filtering happens. Sample belows imitates lazy paging by using an in memory list.
+                    It is also important to assign the logical number of rows to totalRecords by doing a projection query for paginator configuration so that paginator displays the UI
                     assuming there are actually records of totalRecords size although in reality they aren't as in lazy mode, only the records that are displayed on the current page exist.</p>
 
                 <p>Lazy loading is implemented by handling pagination and sorting using <i>page</i> and <i>sort</i> events by making a remote query using the information
@@ -323,7 +323,7 @@ export default {
                 <p>Here is a sample paging implementation with in memory data, a more enhanced example with a backend is being worked on and will be available at a github repository.</p>
 <CodeHighlight>
 <template v-pre>
-&lt;DataTable :value="cars" :lazy="true" :paginator="true" :rows="10" 
+&lt;DataTable :value="cars" :lazy="true" :paginator="true" :rows="10"
     :totalRecords="totalRecords" :loading="loading" @page="onPage($event)"&gt;
     &lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
     &lt;Column field="year" header="Year"&gt;&lt;/Column&gt;
@@ -375,7 +375,7 @@ export default {
 </CodeHighlight>
 
                 <h3>Sorting</h3>
-                <p>Enabling <i>sortable</i> property at column component would be enough to make a column sortable. 
+                <p>Enabling <i>sortable</i> property at column component would be enough to make a column sortable.
                 The property to use when sorting is the <i>field</i> by default and can be customized using the <i>sortField</i>.</p>
 
 <CodeHighlight>
@@ -431,7 +431,7 @@ export default {
     &lt;Column field="color" header="Color" :sortable="true"&gt;&lt;/Column&gt;
 &lt;/DataTable&gt;
 </template>
-</CodeHighlight>  
+</CodeHighlight>
 
 <CodeHighlight lang="javascript">
 data() {
@@ -446,7 +446,7 @@ data() {
                 <h3>Filtering</h3>
                 <p>Filtering is enabled by defining a filter template per column to populate the <i>filters</i> property of the DataTable. The <i>filters</i>
                 property should be an key-value object where keys are the field name and the value is the filter value. The filter template receives the column properties
-                via the slotProps and accepts any form element as the filter element. Default match mode is "startsWith" and this can be configured per column using the <i>filterMatchMode</i> property that also accepts 
+                via the slotProps and accepts any form element as the filter element. Default match mode is "startsWith" and this can be configured per column using the <i>filterMatchMode</i> property that also accepts
                 "contains", "endsWith", "equals", "notEquals" and "in" as available modes.</p>
                 <p>Optionally a global filter is available to search against all the fields, in this case the special <i>global</i> keyword should be the property to be populated.</p>
 <CodeHighlight>
@@ -490,7 +490,7 @@ data() {
 </CodeHighlight>
 
                 <h3>Selection</h3>
-                <p>DataTable provides single and multiple selection modes on click of a row. Selected rows are bound to the <i>selection</i> property and updated using the sync keyword. 
+                <p>DataTable provides single and multiple selection modes on click of a row. Selected rows are bound to the <i>selection</i> property and updated using the sync keyword.
                     Alternatively column based selection can be done using radio buttons or checkboxes using <i>selectionMode</i> of a particular column. In addition row-select and row-unselect
                      events are provided as optional callbacks.</p>
 
@@ -535,7 +535,7 @@ data() {
 </CodeHighlight>
 
                 <h3>Column Resize</h3>
-                <p>Columns can be resized using drag drop by setting the <i>resizableColumns</i> to true. There are two resize modes; "fit" and "expand". Fit is the default one and the overall table width does not change when a column is resized. 
+                <p>Columns can be resized using drag drop by setting the <i>resizableColumns</i> to true. There are two resize modes; "fit" and "expand". Fit is the default one and the overall table width does not change when a column is resized.
                     In "expand" mode, table width also changes along with the column width. <i>column-resize-end</i> is a callback that passes the resized column header and delta change as a parameter.</p>
 <CodeHighlight>
 <template v-pre>
@@ -976,7 +976,7 @@ export default {
                                 <td>event.page: New page number <br/>
                                     event.first: Index of first record <br/>
                                     event.rows: Number of rows to display in new page <br/>
-                                    event.pageCount: Total number of pages 
+                                    event.pageCount: Total number of pages
                                 </td>
                                 <td>Callback to invoke on pagination.</td>
                             </tr>
@@ -1040,7 +1040,7 @@ export default {
 
                 <h3>Styling</h3>
                 <p>Any attribute such as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
-                
+
                 <div class="doc-tablewrapper">
                     <table class="doc-table">
                         <thead>

src/views/datatable/DataTableExportDemo.vue

@@ -1,7 +1,7 @@
 <template>
 	<div>
         <DataTableSubMenu />
-        
+
 		<div class="content-section introduction">
 			<div class="feature-intro">
 				<h1>DataTable - Export</h1>

src/views/datatable/DataTableLazyDemo.vue

@@ -6,14 +6,14 @@
 			<div class="feature-intro">
 				<h1>DataTable - Lazy</h1>
 				<p>Lazy mode is handy to deal with large datasets, instead of loading the entire data, small chunks of data is loaded by invoking corresponding callbacks everytime paging, sorting and filtering happens.
-                    Sample belows imitates lazy paging by using an in memory list. It is also important to assign the logical number of rows to totalRecords by doing a projection query for paginator configuration 
+                    Sample belows imitates lazy paging by using an in memory list. It is also important to assign the logical number of rows to totalRecords by doing a projection query for paginator configuration
                     so that paginator displays the UI assuming there are actually records of totalRecords size although in reality they aren't as in lazy mode, only the records that are displayed on the current page exist.
                 </p>
 			</div>
 		</div>
 
 		<div class="content-section implementation">
-			<DataTable :value="cars" :lazy="true" :paginator="true" :rows="10" 
+			<DataTable :value="cars" :lazy="true" :paginator="true" :rows="10"
                 :totalRecords="totalRecords" :loading="loading" @page="onPage($event)">
                 <Column field="vin" header="Vin"></Column>
                 <Column field="year" header="Year"></Column>
@@ -27,7 +27,7 @@
                 <TabPanel header="Source">
 <CodeHighlight>
 <template v-pre>
-&lt;DataTable :value="cars" :lazy="true" :paginator="true" :rows="10" 
+&lt;DataTable :value="cars" :lazy="true" :paginator="true" :rows="10"
     :totalRecords="totalRecords" :loading="loading" @page="onPage($event)"&gt;
     &lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
     &lt;Column field="year" header="Year"&gt;&lt;/Column&gt;

src/views/datatable/DataTableResponsiveDemo.vue

@@ -1,7 +1,7 @@
 <template>
 	<div>
         <DataTableSubMenu />
-        
+
 		<div class="content-section introduction">
 			<div class="feature-intro">
 				<h1>DataTable - Responsive</h1>

src/views/datatable/DataTableSelectionDemo.vue

@@ -1,7 +1,7 @@
 <template>
 	<div>
         <DataTableSubMenu />
-        
+
 		<div class="content-section introduction">
 			<div class="feature-intro">
 				<h1>DataTable - Selection</h1>
@@ -20,7 +20,7 @@
             </DataTable>
 
             <h3>Multiple</h3>
-            <p>In multiple mode, selection binding should be an array. For touch enabled devices, selection is managed by tapping and for other devices metakey or shiftkey are required. 
+            <p>In multiple mode, selection binding should be an array. For touch enabled devices, selection is managed by tapping and for other devices metakey or shiftkey are required.
                     Setting metaKeySelection property as false enables multiple selection without meta key.</p>
 			<DataTable :value="cars" :selection.sync="selectedCars1" selectionMode="multiple" dataKey="vin">
                 <template #header>
@@ -88,7 +88,7 @@
 &lt;/DataTable&gt;
 
 &lt;h3&gt;Multiple&lt;/h3&gt;
-&lt;p&gt;In multiple mode, selection binding should be an array. For touch enabled devices, selection is managed by tapping and for other devices metakey or shiftkey are required. 
+&lt;p&gt;In multiple mode, selection binding should be an array. For touch enabled devices, selection is managed by tapping and for other devices metakey or shiftkey are required.
         Setting metaKeySelection property as false enables multiple selection without meta key.&lt;/p&gt;
 &lt;DataTable :value="cars" :selection.sync="selectedCars1" selectionMode="multiple" dataKey="vin"&gt;
     &lt;template #header&gt;

src/views/datatable/DataTableSubMenu.vue

@@ -14,5 +14,5 @@
             <li><router-link to="/datatable/colresize">&#9679; ColResize</router-link></li>
             <li><router-link to="/datatable/crud">&#9679; Crud</router-link></li>
         </ul>
-    </div>    
+    </div>
 </template>

src/views/datatable/DataTableTemplatingDemo.vue

@@ -14,7 +14,7 @@
                 <template #header>
                     <div style="line-height:1.87em" class="clearfix">
                         <Button icon="pi pi-refresh" style="float: left"/>
-                        List of Cars 
+                        List of Cars
                     </div>
                 </template>
                 <Column field="vin" header="Vin"></Column>
@@ -49,7 +49,7 @@
     &lt;template #header&gt;
         &lt;div style="line-height:1.87em" class="p-clearfix"&gt;
             &lt;Button icon="pi pi-refresh" style="float: left"/&gt;
-            List of Cars 
+            List of Cars
         &lt;/div&gt;
     &lt;/template&gt;
     &lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;

src/views/dataview/DataViewDemo.vue

@@ -121,7 +121,7 @@ export default {
 	.car-data > div {
 		padding: .429em;
     }
-    
+
     .p-dropdown {
         width: 12em;
     }

src/views/dataview/DataViewDoc.vue

@@ -358,7 +358,7 @@ export default {
                                 <td>event.page: New page number <br/>
                                     event.first: Index of first record <br/>
                                     event.rows: Number of rows to display in new page <br/>
-                                    event.pageCount: Total number of pages 
+                                    event.pageCount: Total number of pages
                                 </td>
                                 <td>Callback to invoke when page changes, the event object contains information about the new state.</td>
                             </tr>

src/views/dialog/DialogDemo.vue

@@ -10,9 +10,9 @@
         <div class="content-section implementation">
             <Button label="Show" icon="pi pi-external-link" @click="open" />
             <Dialog header="Godfather I" :visible.sync="display" :style="{width: '50vw'}" :modal="true">
-                The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding. 
-                    His beloved son Michael has just come home from the war, but does not intend to become part of his father's business. 
-                    Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family, 
+                The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
+                    His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
+                    Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
                     kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
                 <template #footer>
                     <Button label="Yes" icon="pi pi-check" @click="close" />

src/views/fieldset/FieldsetDemo.vue

@@ -10,17 +10,17 @@
         <div class="content-section implementation">
             <h3 class="first">Regular</h3>
             <Fieldset legend="Godfather I">
-                The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding. 
-                His beloved son Michael has just come home from the war, but does not intend to become part of his father's business. 
-                Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family, 
+                The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
+                His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
+                Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
                 kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
             </Fieldset>
 
             <h3>Toggleable</h3>
             <Fieldset legend="Godfather I" :toggleable="true">
-                The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding. 
-                His beloved son Michael has just come home from the war, but does not intend to become part of his father's business. 
-                Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family, 
+                The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
+                His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
+                Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
                 kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
             </Fieldset>
         </div>

src/views/fileupload/FileUploadDemo.vue

@@ -13,7 +13,7 @@
 
             <h3>Basic</h3>
             <FileUpload mode="basic" name="demo[]" url="./upload.php" accept="image/*" :maxFileSize="1000000" @upload="onUpload" />
-            
+
             <h3>Basic with Auto</h3>
             <FileUpload mode="basic" name="demo[]" url="./upload.php" accept="image/*" :maxFileSize="1000000" @upload="onUpload" :auto="true" chooseLabel="Browse" />
         </div>

src/views/flexgrid/FlexGridDemo.vue

@@ -3,7 +3,7 @@
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1>FlexGrid</h1>
-                <p>Flex Grid CSS is a lightweight flex based responsive layout utility optimized for mobile phones, tablets and desktops. 
+                <p>Flex Grid CSS is a lightweight flex based responsive layout utility optimized for mobile phones, tablets and desktops.
                     Flex Grid CSS is not included in PrimeVue as it is provided by <a href="https://github.com/primefaces/primeflex">PrimeFlex</a> , a shared grid library between PrimeFaces, PrimeNG, PrimeReact and PrimeVue projects.</p>
             </div>
         </div>
@@ -21,7 +21,7 @@
                     <div class="box">3</div>
                 </div>
             </div>
-    
+
             <h3>Dynamic</h3>
             <Button type="button" icon="pi pi-plus" title="Add Column" @click="addColumn" :disabled="columns.length === 20" style="margin-right: .5em" />
             <Button type="button" icon="pi pi-minus" title="Remove Column" @click="removeColumn" :disabled="columns.length === 1" />
@@ -404,14 +404,14 @@
                             <div class="p-col-6 p-md-3"><img alt="Galleria 2" src="demo/images/nature/nature2.jpg" style="width: 100%" /></div>
                             <div class="p-col-6 p-md-3"><img alt="Galleria 3" src="demo/images/nature/nature3.jpg" style="width: 100%" /></div>
                             <div class="p-col-6 p-md-3"><img alt="Galleria 4" src="demo/images/nature/nature4.jpg" style="width: 100%" /></div>
-        
+
                             <div class="p-col-12 p-md-6">Phasellus faucibus purus volutpat mauris lacinia sodales. Ut sit amet sapien
                                 facilisis, commodo dui non, fringilla tellus. Quisque tempus facilisis nisi sodales finibus. Pellentesque
                                 neque orci, ullamcorper vitae ligula quis, dignissim euismod augue.</div>
                             <div class="p-col-12 p-md-6">Fusce ullamcorper congue massa, eget ullamcorper nunc lobortis egestas. Lorem
                                 ipsum dolor sit amet, consectetur adipiscing elit. Quisque ultrices dui eget dolor feugiat dapibus. Aliquam
                                 pretium leo et egestas luctus. Nunc facilisis gravida tellus.</div>
-                        </div>     
+                        </div>
                     </div>
                 </div>
                 <div class="p-col-12">
@@ -491,6 +491,6 @@ export default {
 
     .dynamic-box-enter, .dynamic-box-leave-to {
         transform: translateX(30px);
-    }    
+    }
 }
 </style>

src/views/flexgrid/FlexGridDoc.vue

@@ -11,7 +11,7 @@ npm install primeflex --save
                 <p>Then add the primeflex.css to your application</p>
 <CodeHighlight lang="js">
 import 'primeflex/primeflex.css';
-</CodeHighlight>             
+</CodeHighlight>
 
 
 				<h3>Getting Started</h3>

src/views/fullcalendar/FullCalendarDoc.vue

@@ -8,7 +8,7 @@ import FullCalendar from 'primevue/fullcalendar';
 </CodeHighlight>
 
 				<h3>Getting Started</h3>
-				<p>FullCalendar is a wrapper around on <a href="https://fullcalendar.io/docs/v4">FullCalendar 4.0.0+</a> so fullcalendar needs to be included in your project. 
+				<p>FullCalendar is a wrapper around on <a href="https://fullcalendar.io/docs/v4">FullCalendar 4.0.0+</a> so fullcalendar needs to be included in your project.
                 For a complete documentation and samples please refer to the <a href="https://fullcalendar.io/">fullcalendar website</a>.</p>
 <CodeHighlight>
 npm install @fullcalendar/core --save
@@ -190,7 +190,7 @@ export default {
 
 				<h3>Dependencies</h3>
                 <p><a href="https://fullcalendar.io/docs/v4">FullCalendar 4.0.0+</a></p>
-				
+
 			</TabPanel>
 
 			<TabPanel header="Source">

src/views/icons/Icons.vue

@@ -54,7 +54,7 @@ npm install primeicons --save
             <p>Here is the current list of PrimeIcons, more icons will be added periodically. You may also <a href="https://github.com/primefaces/primeicons/issues">request new icons</a> at the issue tracker.</p>
 
             <InputText v-model="filter" class="icon-filter" placeholder="Search an icon" />
-            
+
             <div class="p-grid icons-list">
                 <div class="p-col-12 p-md-2" v-for="icon of filteredIcons" :key="icon.properties.name">
                     <i :class="'pi pi-' + icon.properties.name"></i>
@@ -82,7 +82,7 @@ export default {
             if (this.filter)
                 return this.icons.filter(icon => icon.properties.name.indexOf(this.filter.toLowerCase()) > -1);
             else
-                return this.icons; 
+                return this.icons;
         }
     }
 }
@@ -90,7 +90,7 @@ export default {
 
 <style lang="css" scoped>
 .icon-filter {
-    width: 100%; 
+    width: 100%;
     padding: 1em;
     margin: 16px 0 26px 0;
 }

src/views/inputgroup/InputGroupDemo.vue

@@ -92,7 +92,7 @@
                     <div class="p-inputgroup">
                         <InputText placeholder="Price"/>
                         <span class="p-inputgroup-addon">
-                            <RadioButton name="rb1" value="rb1" v-model="radioValue1" /> 
+                            <RadioButton name="rb1" value="rb1" v-model="radioValue1" />
                         </span>
                     </div>
                 </div>
@@ -104,7 +104,7 @@
                         </span>
                         <InputText placeholder="Website"/>
                         <span class="p-inputgroup-addon">
-                            <RadioButton name="rb2" value="rb2" v-model="radioValue2" /> 
+                            <RadioButton name="rb2" value="rb2" v-model="radioValue2" />
                         </span>
                     </div>
                 </div>

src/views/inputmask/InputMaskDoc.vue

@@ -15,7 +15,7 @@ import InputMask from 'primevue/inputmask';
 
 				<h3>Mask</h3>
                 <p>Mask format can be a combination of the the following built-in definitions.</p>
-                
+
                 <ul>
                     <li>
                         a - Alpha character (A-Z,a-z)

src/views/menu/MenuDemo.vue

@@ -30,14 +30,14 @@ export default {
                 {
                     label: 'Options',
                     items: [{
-                        label: 'Update', 
-                        icon: 'pi pi-refresh', 
+                        label: 'Update',
+                        icon: 'pi pi-refresh',
                         command: () => {
                             this.$toast.add({severity:'success', summary:'Updated', detail:'Data Updated', life: 3000});
                         }
                     },
                     {
-                        label: 'Delete', 
+                        label: 'Delete',
                         icon: 'pi pi-times',
                         command: () => {
                             this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000});
@@ -47,22 +47,22 @@ export default {
                 {
                     label: 'Navigate',
                     items: [{
-                        label: 'Vue Website', 
+                        label: 'Vue Website',
                         icon: 'pi pi-external-link',
                         command: () => {
                             window.location.href = 'https://vuejs.org/'
                         }
                     },
-                    {   
-                        label: 'Upload', 
-                        icon: 'pi pi-upload', 
+                    {
+                        label: 'Upload',
+                        icon: 'pi pi-upload',
                         command: () => {
                             window.location.hash = "/fileupload"
                         }
                     }
                 ]}
             ]
-        } 
+        }
     },
     methods: {
         toggle(event) {

src/views/menu/MenuDoc.vue

@@ -63,7 +63,7 @@ let items: [
         label: 'Options',
         items: [{label: 'New', icon: 'pi pi-fw pi-plus',command:()=>{ window.location.hash="/fileupload"; }},
                 {label: 'Delete', icon: 'pi pi-fw pi-trash', url: 'http://primetek.com.tr'}]
-    }, 
+    },
     {
         label: 'Account',
         items: [{label: 'Options', icon: 'pi pi-fw pi-cog',command:()=>{ window.location.hash="/"; }},
@@ -79,7 +79,7 @@ let items: [
 <Button type="button" label="Toggle" @click="toggle" />
 <Menu ref="menu" :model="items" :popup="true" />
 </CodeHighlight>
-                
+
                 <h3>Properties</h3>
                 <p>Any attribute such as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
 				<div class="doc-tablewrapper">
@@ -92,7 +92,7 @@ let items: [
                                 <th>Description</th>
                             </tr>
 						</thead>
-						<tbody>   
+						<tbody>
                             <tr>
                                 <td>model</td>
                                 <td>array</td>
@@ -220,14 +220,14 @@ export default {
                 {
                     label: 'Options',
                     items: [{
-                        label: 'Update', 
-                        icon: 'pi pi-refresh', 
+                        label: 'Update',
+                        icon: 'pi pi-refresh',
                         command: () => {
                             this.$toast.add({severity:'success', summary:'Updated', detail:'Data Updated', life: 3000});
                         }
                     },
                     {
-                        label: 'Delete', 
+                        label: 'Delete',
                         icon: 'pi pi-times',
                         command: () => {
                             this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000});
@@ -237,22 +237,22 @@ export default {
                 {
                     label: 'Navigate',
                     items: [{
-                        label: 'Vue Website', 
+                        label: 'Vue Website',
                         icon: 'pi pi-external-link',
                         command: () => {
                             window.location.href = 'https://vuejs.org/'
                         }
                     },
-                    {   
-                        label: 'Upload', 
-                        icon: 'pi pi-upload', 
+                    {
+                        label: 'Upload',
+                        icon: 'pi pi-upload',
                         command: () => {
                             window.location.hash = "/fileupload"
                         }
                     }
                 ]}
             ]
-        } 
+        }
     },
     methods: {
         toggle(event) {

src/views/menumodel/MenuModel.vue

@@ -16,7 +16,7 @@ const items: [
         label: 'Options',
         items: [{label: 'New', icon: 'pi pi-fw pi-plus',command:()=>{ window.location.hash="/fileupload"; }},
                 {label: 'Delete', icon: 'pi pi-fw pi-trash', url: 'http://primetek.com.tr'}]
-    }, 
+    },
     {
         label: 'Account',
         items: [{label: 'Options', icon: 'pi pi-fw pi-cog',command:()=>{ window.location.hash="/"; }},
@@ -107,8 +107,8 @@ const items: [
 <CodeHighlight lang="js">
 const items = [
     {
-        label: 'New', 
-        icon: 'pi pi-plus', 
+        label: 'New',
+        icon: 'pi pi-plus',
         command: (event) => {
             // event.originalEvent: Browser event
             // event.item: Menuitem instance
@@ -122,20 +122,20 @@ const items = [
 <CodeHighlight lang="js">
 const items = [
     {
-        label: 'New', 
-        icon: 'pi pi-plus', 
+        label: 'New',
+        icon: 'pi pi-plus',
         command: (event) => {
             window.location.hash = "/fileupload";
         }
     },
     {
-        label: 'Link', 
+        label: 'Link',
         icon: 'pi pi-check',
         url: 'https://www.primefaces.org/primereact'
     }
 ];
 </CodeHighlight>
-        </div>        
+        </div>
     </div>
 </template>
 

src/views/message/MessageDoc.vue

@@ -50,7 +50,7 @@ data() {
 </CodeHighlight>
 
 				<h3>Sticky</h3>
-				<p>Messages are sticky by default, if you require them to be cleared automatically, disable <i>sticky</i> property and optionally configure the <i>life</i> property to specify how long the message 
+				<p>Messages are sticky by default, if you require them to be cleared automatically, disable <i>sticky</i> property and optionally configure the <i>life</i> property to specify how long the message
                 should be displayed which is 3000 ms by default.</p>
 <CodeHighlight>
 &lt;Message severity="warn" :life="5000" :sticky="false"&gt;This message will hide in 5 seconds.&lt;/Message&gt;
@@ -132,7 +132,7 @@ import Message from 'primevue/message';
 
 				<h3>Styling</h3>
 				<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
-				
+
                 <strong>Message</strong>
                 <div class="doc-tablewrapper">
 					<table class="doc-table">

src/views/orderlist/OrderListDoc.vue

@@ -9,7 +9,7 @@ import OrderList from 'primevue/orderlist';
 
 				<h3>Getting Started</h3>
                 <p>OrderList requires an array as its value bound with the v-model directive and a template for its content.</p>
-                <p>Header of the component is defined with the "header" template and to define the content of an item in the list a named template called "item" needs to be defined which gets the 
+                <p>Header of the component is defined with the "header" template and to define the content of an item in the list a named template called "item" needs to be defined which gets the
                     <i>item</i> and the <i>index</i> via slotProps.
                 </p>
 <CodeHighlight>

src/views/organizationchart/OrganizationChartDoc.vue

@@ -125,7 +125,7 @@ export default {
                 <p>All nodes are expanded by default however they can be expanded and collapsed when <i>collapsible</i> is enabled. The optional <i>collapsedKeys</i> property defines the keys
                     that are collapsed, this property is two-way binding enabled so that user changes or programmatic changes are reflected to the UI.
                 </p>
-                <p>Example below displays the root of chart in previous example as collapsed. Notice that the collapsedKeys is a map whose key is the 
+                <p>Example below displays the root of chart in previous example as collapsed. Notice that the collapsedKeys is a map whose key is the
                     key of the node and value is true.
                 </p>
 <CodeHighlight>

src/views/paginator/PaginatorDemo.vue

@@ -12,7 +12,7 @@
 			<Paginator :rows="10" :totalRecords="totalRecords" :rowsPerPageOptions="[10,20,30]"></Paginator>
 
 			<h3>Custom</h3>
-			<Paginator :first.sync="first" :rows="1" :totalRecords="totalRecords2" 
+			<Paginator :first.sync="first" :rows="1" :totalRecords="totalRecords2"
                 template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink">
                 <template #left>
                     <Button type="button" icon="pi pi-refresh" @click="reset()"/>

src/views/paginator/PaginatorDoc.vue

@@ -38,10 +38,10 @@ import Paginator from 'primevue/paginator';
 </CodeHighlight>
 
                 <h3>Template</h3>
-                <p>Paginator elements can be customized using the template property using the predefined keys, default value is 
+                <p>Paginator elements can be customized using the template property using the predefined keys, default value is
                 "FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown". Here are the available elements that
                 can be placed inside a paginator in any order.</p>
-                
+
                 <ul>
                     <li>FirstPageLink</li>
                     <li>PrevPageLink</li>
@@ -53,7 +53,7 @@ import Paginator from 'primevue/paginator';
                 </ul>
 
 <CodeHighlight>
-&lt;Paginator :first.sync="offset" :rows="10" :totalRecords="totalItemsCount" 
+&lt;Paginator :first.sync="offset" :rows="10" :totalRecords="totalItemsCount"
             template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"&gt;&lt;/Paginator&gt;
 </CodeHighlight>
 
@@ -87,7 +87,7 @@ onPage(event) {
     //event.page: New page number
     //event.first: Index of first record
     //event.rows: Number of rows to display in new page
-    //event.pageCount: Total number of pages 
+    //event.pageCount: Total number of pages
 }
 </CodeHighlight>
 
@@ -171,7 +171,7 @@ onPage(event) {
                                 <td>event.page: New page number <br/>
                                     event.first: Index of first record <br/>
                                     event.rows: Number of rows to display in new page <br/>
-                                    event.pageCount: Total number of pages 
+                                    event.pageCount: Total number of pages
                                 </td>
                                 <td>Callback to invoke when page changes, the event object contains information about the new state.</td>
                             </tr>
@@ -239,7 +239,7 @@ onPage(event) {
 &lt;Paginator :rows="10" :totalRecords="totalRecords" :rowsPerPageOptions="[10,20,30]"&gt;&lt;/Paginator&gt;
 
 &lt;h3&gt;Custom&lt;/h3&gt;
-&lt;Paginator :first.sync="first" :rows="1" :totalRecords="totalRecords2" 
+&lt;Paginator :first.sync="first" :rows="1" :totalRecords="totalRecords2"
     template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"&gt;
     &lt;template #left&gt;
         &lt;Button type="button" icon="pi pi-refresh" @click="reset()"/&gt;

src/views/panel/PanelDemo.vue

@@ -10,17 +10,17 @@
         <div class="content-section implementation">
             <h3 class="first">Regular</h3>
             <Panel header="Godfather I">
-                The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding. 
-                His beloved son Michael has just come home from the war, but does not intend to become part of his father's business. 
-                Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family, 
+                The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
+                His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
+                Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
                 kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
             </Panel>
 
             <h3>Toggleable</h3>
             <Panel header="Godfather I" :toggleable="true">
-                The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding. 
-                His beloved son Michael has just come home from the war, but does not intend to become part of his father's business. 
-                Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family, 
+                The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
+                His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
+                Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
                 kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
             </Panel>
         </div>

src/views/picklist/PickListDoc.vue

@@ -8,7 +8,7 @@ import PickList from 'primevue/picklist';
 </CodeHighlight>
 
 				<h3>Getting Started</h3>
-                <p>PickList requires a multidimensional array as its value bound with the v-model directive and a template for its content 
+                <p>PickList requires a multidimensional array as its value bound with the v-model directive and a template for its content
                     that gets the <i>item</i> instance and the <i>index</i> via slotProps.</p>
 <CodeHighlight>
 <template v-pre>
@@ -48,7 +48,7 @@ import PickList from 'primevue/picklist';
                 <p>In case you need to access the selected items in the list, define a binding to the <i>selection</i> property with the sync operator so that
                 it gets updated when the user makes a selection. Since it is two-way binding enabled, your changes to the selection will be reflected as well.  Note that
                 this is optional and only necessary when you need to access the selection.</p>
-                
+
 <CodeHighlight>
 <template v-pre>
 &lt;PickList v-model="cars" dataKey="vin" :selection.sync="selection"&gt;

src/views/progressbar/ProgressBarDemo.vue

@@ -52,7 +52,7 @@ export default {
         this.startProgress();
     },
     beforeDestroy() {
-        this.endProgress();  
+        this.endProgress();
     },
     components: {
         'ProgressBarDoc': ProgressBarDoc

src/views/rating/RatingDemo.vue

@@ -11,13 +11,13 @@
             <h3 class="first">Basic {{val1}}</h3>
             <Rating v-model="val1" />
 
-            <h3>No Cancel {{val2}}</h3> 
+            <h3>No Cancel {{val2}}</h3>
             <Rating v-model="val2" :cancel="false" />
 
-            <h3>ReadOnly</h3> 
+            <h3>ReadOnly</h3>
             <Rating :value="5" :readonly="true" :stars="10" :cancel="false" />
 
-            <h3>Disabled</h3> 
+            <h3>Disabled</h3>
             <Rating :value="8" :disabled="true" :stars="10" />
         </div>
 

src/views/setup/Setup.vue

@@ -61,7 +61,7 @@ new Vue({
 </CodeHighlight>
 
 
-        
+
             <h3>Dependencies</h3>
             <p>Majority of PrimeVue components (95%) are native and there are some exceptions having 3rd party dependencies such as Quill for Editor.</p>
             <p>In addition, components require PrimeIcons library for icons.</p>
@@ -102,11 +102,11 @@ dependencies: {
                     </tbody>
                 </table>
             </div>
-                
+
             <h3>Styles</h3>
-            <p>The css dependencies are as follows, note that you may change the theme with another one of your choice. If you are using a bundler such as webpack with a css loader you 
+            <p>The css dependencies are as follows, note that you may change the theme with another one of your choice. If you are using a bundler such as webpack with a css loader you
                 may import them to your main application component.</p>
-            
+
 <CodeHighlight class="language-javascript">
 primevue/resources/themes/nova-light/theme.css      //theme
 primevue/resources/primevue.min.css                 //shared css
@@ -115,11 +115,11 @@ primeicons/primeicons.css                           //icons
 
             <h3>Quickstart</h3>
             <p>An <a href="https://github.com/primefaces/primevue-quickstart">example application</a> based on vue-cli is available at github.</p>
-            
+
             <h3>Typescript</h3>
             <p>Typescript is fully supported as type definition files are provided in the npm package of PrimeVue. A sample <a href="https://github.com/primefaces/primevue-typescript-quickstart">typescript-primevue</a> application is available as well at github.</p>
 
-        </div>        
+        </div>
     </div>
 </template>
 

src/views/slider/SliderDemo.vue

@@ -14,7 +14,7 @@
             <h3>Input: {{value2}}</h3>
             <InputText v-model.number="value2" />
             <Slider v-model="value2" />
-            
+
             <h3>Step: {{value3}}</h3>
             <Slider v-model="value3" :step="20" />
 

src/views/splitbutton/SplitButtonDemo.vue

@@ -32,34 +32,34 @@ export default {
         return {
             items: [
                 {
-                    label: 'Update', 
-                    icon: 'pi pi-refresh', 
+                    label: 'Update',
+                    icon: 'pi pi-refresh',
                     command: () => {
                         this.$toast.add({severity:'success', summary:'Updated', detail:'Data Updated', life: 3000});
                     }
                 },
                 {
-                    label: 'Delete', 
+                    label: 'Delete',
                     icon: 'pi pi-times',
                     command: () => {
                         this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000});
                     }
                 },
                 {
-                    label: 'Vue Website', 
+                    label: 'Vue Website',
                     icon: 'pi pi-external-link',
                     command: () => {
                         window.location.href = 'https://vuejs.org/'
                     }
                 },
-                {   label: 'Upload', 
-                    icon: 'pi pi-upload', 
+                {   label: 'Upload',
+                    icon: 'pi pi-upload',
                     command: () => {
                         window.location.hash = "/fileupload"
                     }
                 }
             ]
-        } 
+        }
     },
     methods: {
         save() {

src/views/support/Support.vue

@@ -21,9 +21,9 @@
                 </div>
             </div>
 
-            <p>PrimeVue PRO is a term based commercial support service. With the exclusive services of Pro account, 
+            <p>PrimeVue PRO is a term based commercial support service. With the exclusive services of Pro account,
                             you no longer need to post your questions in the community forum and your issues to community issue tracker.</p>
-                            
+
             <h3>Standard PRO Services</h3>
             <ul>
                 <li>Access to pro.primefaces.org</li>
@@ -37,9 +37,9 @@
                 <li>High priority to your issues.</li>
                 <li>Notifications about security updates.</li>
             </ul>
-                        
-            <h3>New Features (Optional)</h3>			
-                        
+
+            <h3>New Features (Optional)</h3>
+
             <p>New feature and enhancement requests are not available in core services and provided via an hour based model instead.  When you have a feature request we provide an estimate, if you confirm we deliver your request within an estimated timeframe and deduct the amount of work from your hours. These requests can be;</p>
 
             <ul>
@@ -50,8 +50,8 @@
                 <li>Proof of Concept implementations of a use case.</li>
                 <li>Code reviews to offer best practices.</li>
             </ul>
-            
-            <p>You can purchase additional hours along with the subscription and also anytime during your subscription period. If your subscription term ends with unused hours, they will be added to your new subscription term in case you extend.</p>    
+
+            <p>You can purchase additional hours along with the subscription and also anytime during your subscription period. If your subscription term ends with unused hours, they will be added to your new subscription term in case you extend.</p>
 
             <h3>Community Support</h3>
             <p><a href="https://forum.primefaces.org/viewforum.php?f=110">Forum</a> is where the community users gather to seek support, post topics and discuss the technology. PrimeTek does not

src/views/tabview/TabViewDemo.vue

@@ -11,18 +11,18 @@
             <h3 class="first">Default</h3>
             <TabView>
                 <TabPanel header="Godfather I">
-                    The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war, 
-                    but does not intend to become part of his father's business. Through Michael's life the nature of the family business becomes clear. The business of the family is 
+                    The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war,
+                    but does not intend to become part of his father's business. Through Michael's life the nature of the family business becomes clear. The business of the family is
                     just like the head of the family, kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
                 </TabPanel>
                 <TabPanel header="Godfather II">
-                    Francis Ford Coppola's legendary continuation and sequel to his landmark 1972 film, TheGodfather parallels the young Vito Corleone's rise with his son Michael's spiritual fall, 
-                    deepening The Godfather's depiction of the dark side of the American dream. In the early 1900s, the child Vito flees his Sicilian village for America after the local Mafia kills 
+                    Francis Ford Coppola's legendary continuation and sequel to his landmark 1972 film, TheGodfather parallels the young Vito Corleone's rise with his son Michael's spiritual fall,
+                    deepening The Godfather's depiction of the dark side of the American dream. In the early 1900s, the child Vito flees his Sicilian village for America after the local Mafia kills
                     his family. Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy.
                 </TabPanel>
                 <TabPanel header="Godfather III">
-                    The Godfather Part III is set in 1979 and 1980. Michael has moved back to New York and taken great strides to remove the family from crime. He turns over his New York criminal 
-                    interests to longtime enforcer Joey Zasa. He uses his wealth in an attempt to rehabilitate his reputation through numerous philanthropic acts, administered by a foundation named after his father. 
+                    The Godfather Part III is set in 1979 and 1980. Michael has moved back to New York and taken great strides to remove the family from crime. He turns over his New York criminal
+                    interests to longtime enforcer Joey Zasa. He uses his wealth in an attempt to rehabilitate his reputation through numerous philanthropic acts, administered by a foundation named after his father.
                     A decade earlier, he gave custody of his two children to Kay, who has since remarried.
                 </TabPanel>
             </TabView>
@@ -36,37 +36,37 @@
 
             <TabView>
                 <TabPanel header="Godfather I" :active.sync="active[0]">
-                    The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war, 
-                    but does not intend to become part of his father's business. Through Michael's life the nature of the family business becomes clear. The business of the family is 
+                    The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war,
+                    but does not intend to become part of his father's business. Through Michael's life the nature of the family business becomes clear. The business of the family is
                     just like the head of the family, kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
                 </TabPanel>
                 <TabPanel header="Godfather II" :active.sync="active[1]">
-                    Francis Ford Coppola's legendary continuation and sequel to his landmark 1972 film, TheGodfather parallels the young Vito Corleone's rise with his son Michael's spiritual fall, 
-                    deepening The Godfather's depiction of the dark side of the American dream. In the early 1900s, the child Vito flees his Sicilian village for America after the local Mafia kills 
+                    Francis Ford Coppola's legendary continuation and sequel to his landmark 1972 film, TheGodfather parallels the young Vito Corleone's rise with his son Michael's spiritual fall,
+                    deepening The Godfather's depiction of the dark side of the American dream. In the early 1900s, the child Vito flees his Sicilian village for America after the local Mafia kills
                     his family. Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy.
                 </TabPanel>
                 <TabPanel header="Godfather III" :active.sync="active[2]">
-                    The Godfather Part III is set in 1979 and 1980. Michael has moved back to New York and taken great strides to remove the family from crime. He turns over his New York criminal 
-                    interests to longtime enforcer Joey Zasa. He uses his wealth in an attempt to rehabilitate his reputation through numerous philanthropic acts, administered by a foundation named after his father. 
+                    The Godfather Part III is set in 1979 and 1980. Michael has moved back to New York and taken great strides to remove the family from crime. He turns over his New York criminal
+                    interests to longtime enforcer Joey Zasa. He uses his wealth in an attempt to rehabilitate his reputation through numerous philanthropic acts, administered by a foundation named after his father.
                     A decade earlier, he gave custody of his two children to Kay, who has since remarried.
                 </TabPanel>
             </TabView>
 
-            <h3>Disabled</h3> 
+            <h3>Disabled</h3>
             <TabView>
                 <TabPanel header="Godfather I">
-                    The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war, 
-                    but does not intend to become part of his father's business. Through Michael's life the nature of the family business becomes clear. The business of the family is 
+                    The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war,
+                    but does not intend to become part of his father's business. Through Michael's life the nature of the family business becomes clear. The business of the family is
                     just like the head of the family, kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
                 </TabPanel>
                 <TabPanel header="Godfather II">
-                    Francis Ford Coppola's legendary continuation and sequel to his landmark 1972 film, TheGodfather parallels the young Vito Corleone's rise with his son Michael's spiritual fall, 
-                    deepening The Godfather's depiction of the dark side of the American dream. In the early 1900s, the child Vito flees his Sicilian village for America after the local Mafia kills 
+                    Francis Ford Coppola's legendary continuation and sequel to his landmark 1972 film, TheGodfather parallels the young Vito Corleone's rise with his son Michael's spiritual fall,
+                    deepening The Godfather's depiction of the dark side of the American dream. In the early 1900s, the child Vito flees his Sicilian village for America after the local Mafia kills
                     his family. Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy.
                 </TabPanel>
                 <TabPanel header="Godfather III">
-                    The Godfather Part III is set in 1979 and 1980. Michael has moved back to New York and taken great strides to remove the family from crime. He turns over his New York criminal 
-                    interests to longtime enforcer Joey Zasa. He uses his wealth in an attempt to rehabilitate his reputation through numerous philanthropic acts, administered by a foundation named after his father. 
+                    The Godfather Part III is set in 1979 and 1980. Michael has moved back to New York and taken great strides to remove the family from crime. He turns over his New York criminal
+                    interests to longtime enforcer Joey Zasa. He uses his wealth in an attempt to rehabilitate his reputation through numerous philanthropic acts, administered by a foundation named after his father.
                     A decade earlier, he gave custody of his two children to Kay, who has since remarried.
                 </TabPanel>
                  <TabPanel header="Godfather IV" :disabled="true"></TabPanel>
@@ -78,18 +78,18 @@
                     <template slot="header">
                         <i class="pi pi-calendar"></i>
                         <span>Godfather I</span>
-                    </template> 
-                    The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war, 
-                    but does not intend to become part of his father's business. Through Michael's life the nature of the family business becomes clear. The business of the family is 
+                    </template>
+                    The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war,
+                    but does not intend to become part of his father's business. Through Michael's life the nature of the family business becomes clear. The business of the family is
                     just like the head of the family, kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
                 </TabPanel>
                 <TabPanel>
                     <template slot="header">
                         <span>Godfather II</span>
                         <i class="pi pi-user"></i>
-                    </template> 
-                    Francis Ford Coppola's legendary continuation and sequel to his landmark 1972 film, TheGodfather parallels the young Vito Corleone's rise with his son Michael's spiritual fall, 
-                    deepening The Godfather's depiction of the dark side of the American dream. In the early 1900s, the child Vito flees his Sicilian village for America after the local Mafia kills 
+                    </template>
+                    Francis Ford Coppola's legendary continuation and sequel to his landmark 1972 film, TheGodfather parallels the young Vito Corleone's rise with his son Michael's spiritual fall,
+                    deepening The Godfather's depiction of the dark side of the American dream. In the early 1900s, the child Vito flees his Sicilian village for America after the local Mafia kills
                     his family. Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy.
                 </TabPanel>
                 <TabPanel>
@@ -97,9 +97,9 @@
                         <i class="pi pi-search"></i>
                         <span>Godfather III</span>
                         <i class="pi pi-cog"></i>
-                    </template> 
-                    The Godfather Part III is set in 1979 and 1980. Michael has moved back to New York and taken great strides to remove the family from crime. He turns over his New York criminal 
-                    interests to longtime enforcer Joey Zasa. He uses his wealth in an attempt to rehabilitate his reputation through numerous philanthropic acts, administered by a foundation named after his father. 
+                    </template>
+                    The Godfather Part III is set in 1979 and 1980. Michael has moved back to New York and taken great strides to remove the family from crime. He turns over his New York criminal
+                    interests to longtime enforcer Joey Zasa. He uses his wealth in an attempt to rehabilitate his reputation through numerous philanthropic acts, administered by a foundation named after his father.
                     A decade earlier, he gave custody of his two children to Kay, who has since remarried.
                 </TabPanel>
             </TabView>

src/views/tabview/TabViewDoc.vue

@@ -168,7 +168,7 @@ export default {
 
                 <h3>Properties of TabView</h3>
                 <p>Any attribute such as style and class are passed to the main container element.</p>
-			
+
 				<h3>Events</h3>
 				<div class="doc-tablewrapper">
 					<table class="doc-table">

src/views/theming/Theming.vue

@@ -9,12 +9,12 @@
 
         <div class="content-section documentation">
             <h3 style="margin-top:0">Theme Designer API</h3>
-            <p><a href="https://www.primefaces.org/designer/primevue">Designer API</a> is the ultimate tool to create your own PrimeVue experience powered by a SASS based theme engine 
+            <p><a href="https://www.primefaces.org/designer/primevue">Designer API</a> is the ultimate tool to create your own PrimeVue experience powered by a SASS based theme engine
                 with 500+ variables and a demo application. In addition, PrimeVue only ships the generated CSS of <b>Nova</b>, <b>Luna</b> and <b>Rhea</b> themes whereas Designer provides
                 full access to the whole SASS structure and the variables of these pre-built themes.</p>
 
             <p>Whether you have your own style guide or just need a custom theme, Designer API is the right tool to design and bring them to existence.</p>
-            
+
             <p>Visit <a href="https://www.primefaces.org/designer/primevue">Designer API HomePage</a> for more information and live demos.</p>
             <a href="http://www.primefaces.org/designer/primevue" class="designer-image">
                 <img alt="PrimeVue Designer" src="../../assets/images/primevue-designer.jpg" style="width: 100%" />

src/views/toast/ToastDemo.vue

@@ -46,7 +46,7 @@
                     <Button @click="showSticky" label="Sticky" />
                 </div>
             </div>
-            
+
             <h3>Remove All</h3>
             <Button @click="clear" label="Clear" />
         </div>

src/views/toast/ToastDoc.vue

@@ -138,7 +138,7 @@ this.$toast.add({severity:'success', summary: 'Success Message', detail:'Order s
                 <p>A message can be targeted to a specific Toast component if their group properties match. Messages without a group
                     are forwarded to the default Toast component that does not have a group defined.
                 </p>
-				
+
 <CodeHighlight>
 &lt;Toast /&gt;
 &lt;Toast position="mykey" /&gt;