vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Removed spaces with lint

pull/104/head
cagataycivici 2019-10-01 16:00:26 +03:00
parent ad0e23fc27
commit fb54d5e5e0
113 changed files with 812 additions and 813 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.eslintrc.js
View File

@ -9,10 +9,10 @@ module.exports = {
], ],
rules: { rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', '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: { parserOptions: {
parser: 'babel-eslint' parser: 'babel-eslint'
} }
} }

2
build-lib.js
View File

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

3
gulpfile.js
View File

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

2
src/AppTopBar.vue
View File

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

40
src/components/accordion/Accordion.vue
View File

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

30
src/components/autocomplete/AutoComplete.vue
View File

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

2
src/components/button/Button.vue
View File

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

180
src/components/calendar/Calendar.vue
View File

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

4
src/components/checkbox/Checkbox.vue
View File

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

6
src/components/chips/Chips.vue
View File

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

70
src/components/datatable/DataTable.vue
View File

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

4
src/components/dataview/DataView.vue
View File

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

6
src/components/deferredcontent/DeferredContent.vue
View File

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

12
src/components/dropdown/Dropdown.vue
View File

@ -17,9 +17,9 @@
</div> </div>
<div ref="itemsWrapper" class="p-dropdown-items-wrapper" :style="{'max-height': scrollHeight}"> <div ref="itemsWrapper" class="p-dropdown-items-wrapper" :style="{'max-height': scrollHeight}">
<ul class="p-dropdown-items p-dropdown-list p-component"> <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)"> :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)}} {{getOptionLabel(option)}}
</slot> </slot>
</li> </li>
@ -221,7 +221,7 @@ export default {
return this.findNextOption(i); return this.findNextOption(i);
else else
return option; return option;
}, },
findPrevOption(index) { findPrevOption(index) {
let i = index - 1; let i = index - 1;
@ -354,7 +354,7 @@ export default {
return [ return [
'p-dropdown p-component p-unselectable-text', 'p-dropdown p-component p-unselectable-text',
{ {
'p-disabled': this.disabled, 'p-disabled': this.disabled,
'p-dropdown-clearable': this.showClear && !this.disabled, 'p-dropdown-clearable': this.showClear && !this.disabled,
'p-focus': this.focused 'p-focus': this.focused
} }
@ -362,9 +362,9 @@ export default {
}, },
labelClass() { labelClass() {
return [ 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) 'p-dropdown-label-empty': (this.label == null || this.label.length === 0)
} }
]; ];

2
src/components/fieldset/Fieldset.vue
View File

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

46
src/components/fileupload/FileUpload.vue
View File

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

2
src/components/inplace/Inplace.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div :class="containerClass"> <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> <slot name="display"></slot>
</div> </div>
<div class="p-inplace-content" v-else> <div class="p-inplace-content" v-else>

6
src/components/inputmask/InputMask.vue
View File

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

2
src/components/inputswitch/InputSwitch.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div :class="containerClass" @click="onClick($event)"> <div :class="containerClass" @click="onClick($event)">
<div class="p-hidden-accessible"> <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)"> @focus="onFocus($event)" @blur="onBlur($event)" @keydown.enter.prevent="onClick($event)">
</div> </div>
<span class="p-inputswitch-slider"></span> <span class="p-inputswitch-slider"></span>

30
src/components/listbox/Listbox.vue
View File

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

2
src/components/menu/Menu.vue
View File

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

2
src/components/message/Message.vue
View File

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

12
src/components/multiselect/MultiSelect.vue
View File

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

50
src/components/orderlist/OrderList.vue
View File

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

4
src/components/organizationchart/OrganizationChart.vue
View File

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

2
src/components/organizationchart/OrganizationChartNode.vue
View File

@ -31,7 +31,7 @@
</tr> </tr>
<tr :style="childStyle" class="p-organizationchart-nodes"> <tr :style="childStyle" class="p-organizationchart-nodes">
<td v-for="child of node.children" :key="child.key" colspan="2"> <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" /> :selectionMode="selectionMode" :selectionKeys="selectionKeys" @node-click="onChildNodeClick" />
</td> </td>
</tr> </tr>

4
src/components/overlaypanel/OverlayPanel.vue
View File

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

2
src/components/paginator/RowsPerPageDropdown.vue
View File

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

2
src/components/panel/Panel.vue
View File

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

6
src/components/password/Password.vue
View File

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

46
src/components/picklist/PickList.vue
View File

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

18
src/components/progressbar/ProgressBar.vue
View File

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

2
src/components/selectbutton/SelectButton.vue
View File

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

24
src/components/slider/Slider.vue
View File

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

4
src/components/spinner/Spinner.vue
View File

@ -1,11 +1,11 @@
<template> <template>
<span :class="containerClass"> <span :class="containerClass">
<input ref="input" :class="inputClass" v-bind="$attrs" v-on="listeners" :value="value"> <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"> @keydown="onButtonKeyDown($event, 1)" @keyup="onButtonKeyUp" :disabled="$attrs.disabled">
<span class="p-spinner-button-icon pi pi-caret-up"></span> <span class="p-spinner-button-icon pi pi-caret-up"></span>
</button> </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"> @keydown="onButtonKeyDown($event, -1)" @keyup="onButtonKeyUp" :disabled="$attrs.disabled">
<span class="p-spinner-button-icon pi pi-caret-down"></span> <span class="p-spinner-button-icon pi pi-caret-down"></span>
</button> </button>

80
src/components/tabview/TabView.vue
View File

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

4
src/components/toast/Toast.vue
View File

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

2
src/components/toast/ToastService.js
View File

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

2
src/components/togglebutton/ToggleButton.vue
View File

@ -65,7 +65,7 @@ export default {
return [ return [
this.value ? this.onIcon: this.offIcon, 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' 'p-button-icon-right': this.iconPos === 'right'
} }
] ]

2
src/components/toolbar/Toolbar.vue
View File

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

18
src/components/tree/Tree.vue
View File

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

14
src/components/tree/TreeNode.vue
View File

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

52
src/components/treetable/TreeTable.vue
View File

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

20
src/components/treetable/TreeTableRow.vue
View File

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

6
src/components/treetable/TreeTableRowLoader.vue
View File

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

16
src/components/utils/DomHandler.js
View File

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

2
src/service/CountryService.js
View File

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

2
src/service/EventService.js
View File

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

4
src/service/NodeService.js
View File

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

50
src/views/accordion/AccordionDemo.vue
View File

@ -11,18 +11,18 @@
<h3 class="first">Default</h3> <h3 class="first">Default</h3>
<Accordion> <Accordion>
<AccordionTab header="Godfather I"> <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, 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 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. 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>
<AccordionTab header="Godfather II"> <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, 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 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. his family. Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy.
</AccordionTab> </AccordionTab>
<AccordionTab header="Godfather III"> <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 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. 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. A decade earlier, he gave custody of his two children to Kay, who has since remarried.
</AccordionTab> </AccordionTab>
</Accordion> </Accordion>
@ -30,18 +30,18 @@
<h3>Multiple</h3> <h3>Multiple</h3>
<Accordion :multiple="true"> <Accordion :multiple="true">
<AccordionTab header="Godfather I"> <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, 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 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. 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>
<AccordionTab header="Godfather II"> <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, 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 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. his family. Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy.
</AccordionTab> </AccordionTab>
<AccordionTab header="Godfather III"> <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 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. 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. A decade earlier, he gave custody of his two children to Kay, who has since remarried.
</AccordionTab> </AccordionTab>
<AccordionTab header="Godfather IV" :disabled="true"> <AccordionTab header="Godfather IV" :disabled="true">
@ -57,18 +57,18 @@
<Accordion :multiple="true"> <Accordion :multiple="true">
<AccordionTab header="Godfather I" :active="active1"> <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, 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 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. 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>
<AccordionTab header="Godfather II" :active="active2"> <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, 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 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. his family. Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy.
</AccordionTab> </AccordionTab>
<AccordionTab header="Godfather III" :active="active3"> <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 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. 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. A decade earlier, he gave custody of his two children to Kay, who has since remarried.
</AccordionTab> </AccordionTab>
</Accordion> </Accordion>
@ -80,8 +80,8 @@
<i class="pi pi-calendar"></i> <i class="pi pi-calendar"></i>
<span>Godfather I</span> <span>Godfather I</span>
</template> </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, 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 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. 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>
<AccordionTab> <AccordionTab>
@ -89,8 +89,8 @@
<i class="pi pi-user"></i> <i class="pi pi-user"></i>
<span>Godfather II</span> <span>Godfather II</span>
</template> </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, 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 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. his family. Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy.
</AccordionTab> </AccordionTab>
<AccordionTab> <AccordionTab>
@ -98,9 +98,9 @@
<i class="pi pi-search"></i> <i class="pi pi-search"></i>
<span>Godfather III</span> <span>Godfather III</span>
<i class="pi pi-cog"></i> <i class="pi pi-cog"></i>
</template> </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 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. 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. A decade earlier, he gave custody of his two children to Kay, who has since remarried.
</AccordionTab> </AccordionTab>
</Accordion> </Accordion>

4
src/views/calendar/CalendarDemo.vue
View File

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

4
src/views/calendar/CalendarDoc.vue
View File

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

4
src/views/chart/BarChartDemo.vue
View File

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

2
src/views/chart/ChartDemo.vue
View File

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

2
src/views/chart/DoughnutChartDemo.vue
View File

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

2
src/views/chart/LineChartDemo.vue
View File

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

2
src/views/chart/PieChartDemo.vue
View File

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

4
src/views/datatable/DataTableColResizeDemo.vue
View File

@ -1,11 +1,11 @@
<template> <template>
<div> <div>
<DataTableSubMenu /> <DataTableSubMenu />
<div class="content-section introduction"> <div class="content-section introduction">
<div class="feature-intro"> <div class="feature-intro">
<h1>DataTable - Column Resize</h1> <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> In "expand" mode, table width also changes along with the column width.</p>
</div> </div>
</div> </div>

2
src/views/datatable/DataTableColToggleDemo.vue
View File

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

10
src/views/datatable/DataTableCrudDemo.vue
View File

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

2
src/views/datatable/DataTableDemo.vue
View File

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

34
src/views/datatable/DataTableDoc.vue
View File

@ -8,9 +8,9 @@ import DataTable from 'primevue/datatable';
</CodeHighlight> </CodeHighlight>
<h3>Getting Started</h3> <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> 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"> <CodeHighlight lang="javascript">
import axios from 'axios' 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> <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> <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> 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> <CodeHighlight>
<template v-pre> <template v-pre>
&lt;DataTable :value="cars"&gt; &lt;DataTable :value="cars"&gt;
&lt;template #header&gt; &lt;template #header&gt;
&lt;div&gt; &lt;div&gt;
&lt;Button icon="pi pi-refresh" style="float: left"/&gt; &lt;Button icon="pi pi-refresh" style="float: left"/&gt;
List of Cars List of Cars
&lt;/div&gt; &lt;/div&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt; &lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
@ -263,8 +263,8 @@ export default {
</CodeHighlight> </CodeHighlight>
<h3>Pagination</h3> <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. <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, 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> rows per page options and more which can be passed through the DataTable.</p>
<CodeHighlight> <CodeHighlight>
@ -311,8 +311,8 @@ export default {
</CodeHighlight> </CodeHighlight>
<h3>Lazy Loading</h3> <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. <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 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> 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 <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> <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> <CodeHighlight>
<template v-pre> <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; :totalRecords="totalRecords" :loading="loading" @page="onPage($event)"&gt;
&lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt; &lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
&lt;Column field="year" header="Year"&gt;&lt;/Column&gt; &lt;Column field="year" header="Year"&gt;&lt;/Column&gt;
@ -375,7 +375,7 @@ export default {
</CodeHighlight> </CodeHighlight>
<h3>Sorting</h3> <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> The property to use when sorting is the <i>field</i> by default and can be customized using the <i>sortField</i>.</p>
<CodeHighlight> <CodeHighlight>
@ -431,7 +431,7 @@ export default {
&lt;Column field="color" header="Color" :sortable="true"&gt;&lt;/Column&gt; &lt;Column field="color" header="Color" :sortable="true"&gt;&lt;/Column&gt;
&lt;/DataTable&gt; &lt;/DataTable&gt;
</template> </template>
</CodeHighlight> </CodeHighlight>
<CodeHighlight lang="javascript"> <CodeHighlight lang="javascript">
data() { data() {
@ -446,7 +446,7 @@ data() {
<h3>Filtering</h3> <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> <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 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> "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> <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> <CodeHighlight>
@ -490,7 +490,7 @@ data() {
</CodeHighlight> </CodeHighlight>
<h3>Selection</h3> <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 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> events are provided as optional callbacks.</p>
@ -535,7 +535,7 @@ data() {
</CodeHighlight> </CodeHighlight>
<h3>Column Resize</h3> <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> 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> <CodeHighlight>
<template v-pre> <template v-pre>
@ -976,7 +976,7 @@ export default {
<td>event.page: New page number <br/> <td>event.page: New page number <br/>
event.first: Index of first record <br/> event.first: Index of first record <br/>
event.rows: Number of rows to display in new page <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>
<td>Callback to invoke on pagination.</td> <td>Callback to invoke on pagination.</td>
</tr> </tr>
@ -1040,7 +1040,7 @@ export default {
<h3>Styling</h3> <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> <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"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>

2
src/views/datatable/DataTableExportDemo.vue
View File

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

6
src/views/datatable/DataTableLazyDemo.vue
View File

@ -6,14 +6,14 @@
<div class="feature-intro"> <div class="feature-intro">
<h1>DataTable - Lazy</h1> <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. <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. 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>
</div> </div>
</div> </div>
<div class="content-section implementation"> <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)"> :totalRecords="totalRecords" :loading="loading" @page="onPage($event)">
<Column field="vin" header="Vin"></Column> <Column field="vin" header="Vin"></Column>
<Column field="year" header="Year"></Column> <Column field="year" header="Year"></Column>
@ -27,7 +27,7 @@
<TabPanel header="Source"> <TabPanel header="Source">
<CodeHighlight> <CodeHighlight>
<template v-pre> <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; :totalRecords="totalRecords" :loading="loading" @page="onPage($event)"&gt;
&lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt; &lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
&lt;Column field="year" header="Year"&gt;&lt;/Column&gt; &lt;Column field="year" header="Year"&gt;&lt;/Column&gt;

2
src/views/datatable/DataTableResponsiveDemo.vue
View File

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

6
src/views/datatable/DataTableSelectionDemo.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div> <div>
<DataTableSubMenu /> <DataTableSubMenu />
<div class="content-section introduction"> <div class="content-section introduction">
<div class="feature-intro"> <div class="feature-intro">
<h1>DataTable - Selection</h1> <h1>DataTable - Selection</h1>
@ -20,7 +20,7 @@
</DataTable> </DataTable>
<h3>Multiple</h3> <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> Setting metaKeySelection property as false enables multiple selection without meta key.</p>
<DataTable :value="cars" :selection.sync="selectedCars1" selectionMode="multiple" dataKey="vin"> <DataTable :value="cars" :selection.sync="selectedCars1" selectionMode="multiple" dataKey="vin">
<template #header> <template #header>
@ -88,7 +88,7 @@
&lt;/DataTable&gt; &lt;/DataTable&gt;
&lt;h3&gt;Multiple&lt;/h3&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; 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;DataTable :value="cars" :selection.sync="selectedCars1" selectionMode="multiple" dataKey="vin"&gt;
&lt;template #header&gt; &lt;template #header&gt;

2
src/views/datatable/DataTableSubMenu.vue
View File

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

4
src/views/datatable/DataTableTemplatingDemo.vue
View File

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

2
src/views/dataview/DataViewDemo.vue
View File

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

2
src/views/dataview/DataViewDoc.vue
View File

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

6
src/views/dialog/DialogDemo.vue
View File

@ -10,9 +10,9 @@
<div class="content-section implementation"> <div class="content-section implementation">
<Button label="Show" icon="pi pi-external-link" @click="open" /> <Button label="Show" icon="pi pi-external-link" @click="open" />
<Dialog header="Godfather I" :visible.sync="display" :style="{width: '50vw'}" :modal="true"> <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. 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. 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, 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. kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
<template #footer> <template #footer>
<Button label="Yes" icon="pi pi-check" @click="close" /> <Button label="Yes" icon="pi pi-check" @click="close" />

12
src/views/fieldset/FieldsetDemo.vue
View File

@ -10,17 +10,17 @@
<div class="content-section implementation"> <div class="content-section implementation">
<h3 class="first">Regular</h3> <h3 class="first">Regular</h3>
<Fieldset legend="Godfather I"> <Fieldset legend="Godfather I">
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding. 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. 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, 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. kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
</Fieldset> </Fieldset>
<h3>Toggleable</h3> <h3>Toggleable</h3>
<Fieldset legend="Godfather I" :toggleable="true"> <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. 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. 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, 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. kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
</Fieldset> </Fieldset>
</div> </div>

2
src/views/fileupload/FileUploadDemo.vue
View File

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

10
src/views/flexgrid/FlexGridDemo.vue
View File

@ -3,7 +3,7 @@
<div class="content-section introduction"> <div class="content-section introduction">
<div class="feature-intro"> <div class="feature-intro">
<h1>FlexGrid</h1> <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> 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>
</div> </div>
@ -21,7 +21,7 @@
<div class="box">3</div> <div class="box">3</div>
</div> </div>
</div> </div>
<h3>Dynamic</h3> <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-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" /> <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 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 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-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 <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 facilisis, commodo dui non, fringilla tellus. Quisque tempus facilisis nisi sodales finibus. Pellentesque
neque orci, ullamcorper vitae ligula quis, dignissim euismod augue.</div> 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 <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 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> pretium leo et egestas luctus. Nunc facilisis gravida tellus.</div>
</div> </div>
</div> </div>
</div> </div>
<div class="p-col-12"> <div class="p-col-12">
@ -491,6 +491,6 @@ export default {
.dynamic-box-enter, .dynamic-box-leave-to { .dynamic-box-enter, .dynamic-box-leave-to {
transform: translateX(30px); transform: translateX(30px);
} }
} }
</style> </style>

2
src/views/flexgrid/FlexGridDoc.vue
View File

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

4
src/views/fullcalendar/FullCalendarDoc.vue
View File

@ -8,7 +8,7 @@ import FullCalendar from 'primevue/fullcalendar';
</CodeHighlight> </CodeHighlight>
<h3>Getting Started</h3> <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> For a complete documentation and samples please refer to the <a href="https://fullcalendar.io/">fullcalendar website</a>.</p>
<CodeHighlight> <CodeHighlight>
npm install @fullcalendar/core --save npm install @fullcalendar/core --save
@ -190,7 +190,7 @@ export default {
<h3>Dependencies</h3> <h3>Dependencies</h3>
<p><a href="https://fullcalendar.io/docs/v4">FullCalendar 4.0.0+</a></p> <p><a href="https://fullcalendar.io/docs/v4">FullCalendar 4.0.0+</a></p>
</TabPanel> </TabPanel>
<TabPanel header="Source"> <TabPanel header="Source">

6
src/views/icons/Icons.vue
View File

@ -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> <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" /> <InputText v-model="filter" class="icon-filter" placeholder="Search an icon" />
<div class="p-grid icons-list"> <div class="p-grid icons-list">
<div class="p-col-12 p-md-2" v-for="icon of filteredIcons" :key="icon.properties.name"> <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> <i :class="'pi pi-' + icon.properties.name"></i>
@ -82,7 +82,7 @@ export default {
if (this.filter) if (this.filter)
return this.icons.filter(icon => icon.properties.name.indexOf(this.filter.toLowerCase()) > -1); return this.icons.filter(icon => icon.properties.name.indexOf(this.filter.toLowerCase()) > -1);
else else
return this.icons; return this.icons;
} }
} }
} }
@ -90,7 +90,7 @@ export default {
<style lang="css" scoped> <style lang="css" scoped>
.icon-filter { .icon-filter {
width: 100%; width: 100%;
padding: 1em; padding: 1em;
margin: 16px 0 26px 0; margin: 16px 0 26px 0;
} }

4
src/views/inputgroup/InputGroupDemo.vue
View File

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

2
src/views/inputmask/InputMaskDoc.vue
View File

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

16
src/views/menu/MenuDemo.vue
View File

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

22
src/views/menu/MenuDoc.vue
View File

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

14
src/views/menumodel/MenuModel.vue
View File

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

4
src/views/message/MessageDoc.vue
View File

@ -50,7 +50,7 @@ data() {
</CodeHighlight> </CodeHighlight>
<h3>Sticky</h3> <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> should be displayed which is 3000 ms by default.</p>
<CodeHighlight> <CodeHighlight>
&lt;Message severity="warn" :life="5000" :sticky="false"&gt;This message will hide in 5 seconds.&lt;/Message&gt; &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> <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> <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> <strong>Message</strong>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">

2
src/views/orderlist/OrderListDoc.vue
View File

@ -9,7 +9,7 @@ import OrderList from 'primevue/orderlist';
<h3>Getting Started</h3> <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>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. <i>item</i> and the <i>index</i> via slotProps.
</p> </p>
<CodeHighlight> <CodeHighlight>

2
src/views/organizationchart/OrganizationChartDoc.vue
View File

@ -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 <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. that are collapsed, this property is two-way binding enabled so that user changes or programmatic changes are reflected to the UI.
</p> </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. key of the node and value is true.
</p> </p>
<CodeHighlight> <CodeHighlight>

2
src/views/paginator/PaginatorDemo.vue
View File

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

12
src/views/paginator/PaginatorDoc.vue
View File

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

12
src/views/panel/PanelDemo.vue
View File

@ -10,17 +10,17 @@
<div class="content-section implementation"> <div class="content-section implementation">
<h3 class="first">Regular</h3> <h3 class="first">Regular</h3>
<Panel header="Godfather I"> <Panel header="Godfather I">
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding. 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. 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, 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. kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
</Panel> </Panel>
<h3>Toggleable</h3> <h3>Toggleable</h3>
<Panel header="Godfather I" :toggleable="true"> <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. 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. 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, 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. kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
</Panel> </Panel>
</div> </div>

4
src/views/picklist/PickListDoc.vue
View File

@ -8,7 +8,7 @@ import PickList from 'primevue/picklist';
</CodeHighlight> </CodeHighlight>
<h3>Getting Started</h3> <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> that gets the <i>item</i> instance and the <i>index</i> via slotProps.</p>
<CodeHighlight> <CodeHighlight>
<template v-pre> <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 <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 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> this is optional and only necessary when you need to access the selection.</p>
<CodeHighlight> <CodeHighlight>
<template v-pre> <template v-pre>
&lt;PickList v-model="cars" dataKey="vin" :selection.sync="selection"&gt; &lt;PickList v-model="cars" dataKey="vin" :selection.sync="selection"&gt;

2
src/views/progressbar/ProgressBarDemo.vue
View File

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

6
src/views/rating/RatingDemo.vue
View File

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

12
src/views/setup/Setup.vue
View File

@ -61,7 +61,7 @@ new Vue({
</CodeHighlight> </CodeHighlight>
<h3>Dependencies</h3> <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>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> <p>In addition, components require PrimeIcons library for icons.</p>
@ -102,11 +102,11 @@ dependencies: {
</tbody> </tbody>
</table> </table>
</div> </div>
<h3>Styles</h3> <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> may import them to your main application component.</p>
<CodeHighlight class="language-javascript"> <CodeHighlight class="language-javascript">
primevue/resources/themes/nova-light/theme.css //theme primevue/resources/themes/nova-light/theme.css //theme
primevue/resources/primevue.min.css //shared css primevue/resources/primevue.min.css //shared css
@ -115,11 +115,11 @@ primeicons/primeicons.css //icons
<h3>Quickstart</h3> <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> <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> <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> <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> </div>
</template> </template>

2
src/views/slider/SliderDemo.vue
View File

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

14
src/views/splitbutton/SplitButtonDemo.vue
View File

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

14
src/views/support/Support.vue
View File

@ -21,9 +21,9 @@
</div> </div>
</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> 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> <h3>Standard PRO Services</h3>
<ul> <ul>
<li>Access to pro.primefaces.org</li> <li>Access to pro.primefaces.org</li>
@ -37,9 +37,9 @@
<li>High priority to your issues.</li> <li>High priority to your issues.</li>
<li>Notifications about security updates.</li> <li>Notifications about security updates.</li>
</ul> </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> <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> <ul>
@ -50,8 +50,8 @@
<li>Proof of Concept implementations of a use case.</li> <li>Proof of Concept implementations of a use case.</li>
<li>Code reviews to offer best practices.</li> <li>Code reviews to offer best practices.</li>
</ul> </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> <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 <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

56
src/views/tabview/TabViewDemo.vue
View File

@ -11,18 +11,18 @@
<h3 class="first">Default</h3> <h3 class="first">Default</h3>
<TabView> <TabView>
<TabPanel header="Godfather I"> <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, 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 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. 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>
<TabPanel header="Godfather II"> <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, 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 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. his family. Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy.
</TabPanel> </TabPanel>
<TabPanel header="Godfather III"> <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 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. 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. A decade earlier, he gave custody of his two children to Kay, who has since remarried.
</TabPanel> </TabPanel>
</TabView> </TabView>
@ -36,37 +36,37 @@
<TabView> <TabView>
<TabPanel header="Godfather I" :active.sync="active[0]"> <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, 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 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. 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>
<TabPanel header="Godfather II" :active.sync="active[1]"> <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, 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 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. his family. Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy.
</TabPanel> </TabPanel>
<TabPanel header="Godfather III" :active.sync="active[2]"> <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 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. 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. A decade earlier, he gave custody of his two children to Kay, who has since remarried.
</TabPanel> </TabPanel>
</TabView> </TabView>
<h3>Disabled</h3> <h3>Disabled</h3>
<TabView> <TabView>
<TabPanel header="Godfather I"> <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, 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 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. 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>
<TabPanel header="Godfather II"> <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, 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 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. his family. Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy.
</TabPanel> </TabPanel>
<TabPanel header="Godfather III"> <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 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. 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. A decade earlier, he gave custody of his two children to Kay, who has since remarried.
</TabPanel> </TabPanel>
<TabPanel header="Godfather IV" :disabled="true"></TabPanel> <TabPanel header="Godfather IV" :disabled="true"></TabPanel>
@ -78,18 +78,18 @@
<template slot="header"> <template slot="header">
<i class="pi pi-calendar"></i> <i class="pi pi-calendar"></i>
<span>Godfather I</span> <span>Godfather I</span>
</template> </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, 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 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. 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>
<TabPanel> <TabPanel>
<template slot="header"> <template slot="header">
<span>Godfather II</span> <span>Godfather II</span>
<i class="pi pi-user"></i> <i class="pi pi-user"></i>
</template> </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, 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 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. his family. Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy.
</TabPanel> </TabPanel>
<TabPanel> <TabPanel>
@ -97,9 +97,9 @@
<i class="pi pi-search"></i> <i class="pi pi-search"></i>
<span>Godfather III</span> <span>Godfather III</span>
<i class="pi pi-cog"></i> <i class="pi pi-cog"></i>
</template> </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 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. 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. A decade earlier, he gave custody of his two children to Kay, who has since remarried.
</TabPanel> </TabPanel>
</TabView> </TabView>

2
src/views/tabview/TabViewDoc.vue
View File

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

4
src/views/theming/Theming.vue
View File

@ -9,12 +9,12 @@
<div class="content-section documentation"> <div class="content-section documentation">
<h3 style="margin-top:0">Theme Designer API</h3> <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 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> 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>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> <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"> <a href="http://www.primefaces.org/designer/primevue" class="designer-image">
<img alt="PrimeVue Designer" src="../../assets/images/primevue-designer.jpg" style="width: 100%" /> <img alt="PrimeVue Designer" src="../../assets/images/primevue-designer.jpg" style="width: 100%" />

2
src/views/toast/ToastDemo.vue
View File

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

2
src/views/toast/ToastDoc.vue
View File

@ -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 <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. are forwarded to the default Toast component that does not have a group defined.
</p> </p>
<CodeHighlight> <CodeHighlight>
&lt;Toast /&gt; &lt;Toast /&gt;
&lt;Toast position="mykey" /&gt; &lt;Toast position="mykey" /&gt;

Some files were not shown because too many files have changed in this diff Show More