Skip to content

Commit

Permalink
Fixed #716 - Locale API
Browse files Browse the repository at this point in the history
  • Loading branch information
@cagataycivici
cagataycivici committed Dec 9, 2020
1 parent 7495783 commit bcb3756
Show file tree
Hide file tree
Showing 21 changed files with 331 additions and 149 deletions.
4 changes: 2 additions & 2 deletions src/App.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,7 @@ export default {
this.$appState.darkTheme = event.dark;
if (event.theme.startsWith('md')) {
this.$primevue.ripple = true;
this.$primevue.config.ripple = true;
}
},
addClass(element, className) {
Expand Down Expand Up @@ -136,7 +136,7 @@ export default {
return [{
'layout-news-active': this.newsActive,
'p-input-filled': this.$appState.inputStyle === 'filled',
'p-ripple-disabled': this.$primevue.ripple === false
'p-ripple-disabled': this.$primevue.config.ripple === false
}];
}
},
Expand Down
4 changes: 2 additions & 2 deletions src/AppConfigurator.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -421,15 +421,15 @@ export default {
document.documentElement.style.fontSize = this.scale + 'px';
},
onRippleChange(value) {
this.$primevue.ripple = value;
this.$primevue.config.ripple = value;
}
},
computed: {
containerClass() {
return ['layout-config', {'layout-config-active': this.active}];
},
rippleActive() {
return this.$primevue.ripple;
return this.$primevue.config.ripple;
}
}
}
Expand Down
1 change: 1 addition & 0 deletions src/AppMenu.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
<a href="https://github.com/primefaces/primevue" target="_blank">Source Code</a>
<router-link to="/support">Support</router-link>
<a href="https://www.primefaces.org/store" target="_blank">Store</a>
<router-link to="/locale">Locale <Tag value="New"></Tag></router-link>
<router-link to="/accessibility">Accessibility</router-link>
</div>

Expand Down
14 changes: 0 additions & 14 deletions src/components/calendar/Calendar.d.ts
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,5 @@
import Vue, { VNode } from 'vue';

export interface LocaleSettings {
firstDayOfWeek?: number;
dayNames: string[];
dayNamesShort: string[];
dayNamesMin: string[];
monthNames: string[];
monthNamesShort: string[];
today: string;
clear: string;
dateFormat: string;
weekHeader?: string;
}

declare class Calendar extends Vue {
modelValue?: Date | Date[];
selectionMode?: string;
Expand Down Expand Up @@ -51,7 +38,6 @@ declare class Calendar extends Vue {
timeSeparator?: string;
showWeek?: boolean;
manualInput?: boolean;
locale?: LocaleSettings;
appendTo?: string;
$emit(eventName: 'show'): this;
$emit(eventName: 'hide'): this;
Expand Down
62 changes: 30 additions & 32 deletions src/components/calendar/Calendar.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,9 @@
<span class="p-datepicker-prev-icon pi pi-chevron-left"></span>
</button>
<div class="p-datepicker-title">
<span class="p-datepicker-month" v-if="!monthNavigator && (view !== 'month')">{{locale.monthNames[month.month]}}</span>
<span class="p-datepicker-month" v-if="!monthNavigator && (view !== 'month')">{{getMonthName(month.month)}}</span>
<select class="p-datepicker-month" v-if="monthNavigator && (view !== 'month') && numberOfMonths === 1" @change="onMonthDropdownChange($event.target.value)">
<option :value="index" v-for="(monthName, index) of locale.monthNames" :key="monthName" :selected="index === month.month">{{monthName}}</option>
<option :value="index" v-for="(monthName, index) of monthNames" :key="monthName" :selected="index === month.month">{{monthName}}</option>
</select>
<span class="p-datepicker-year" v-if="!yearNavigator">{{view === 'month' ? currentYear : month.year}}</span>
<select class="p-datepicker-year" v-if="yearNavigator && numberOfMonths === 1" @change="onYearDropdownChange($event.target.value)">
Expand All @@ -32,7 +32,7 @@
<thead>
<tr>
<th scope="col" v-if="showWeek" class="p-datepicker-weekheader p-disabled">
<span>{{locale['weekHeader']}}</span>
<span>{{weekHeaderLabel}}</span>
</th>
<th scope="col" v-for="weekDay of weekDays" :key="weekDay">
<span>{{weekDay}}</span>
Expand Down Expand Up @@ -120,8 +120,8 @@
</div>
</div>
<div class="p-datepicker-buttonbar" v-if="showButtonBar">
<CalendarButton type="button" :label="locale['today']" @click="onTodayButtonClick($event)" class="p-button-text" @keydown="onContainerButtonKeydown"/>
<CalendarButton type="button" :label="locale['clear']" @click="onClearButtonClick($event)" class="p-button-text" @keydown="onContainerButtonKeydown"/>
<CalendarButton type="button" :label="todayLabel" @click="onTodayButtonClick($event)" class="p-button-text" @keydown="onContainerButtonKeydown"/>
<CalendarButton type="button" :label="clearLabel" @click="onClearButtonClick($event)" class="p-button-text" @keydown="onContainerButtonKeydown"/>
</div>
<slot name="footer"></slot>
</div>
Expand All @@ -147,7 +147,7 @@ export default {
},
dateFormat: {
type: String,
default: 'mm/dd/yy'
default: null
},
inline: {
type: Boolean,
Expand Down Expand Up @@ -285,23 +285,6 @@ export default {
type: Boolean,
default: true
},
locale: {
type: Object,
default: () => {
return {
firstDayOfWeek: 0,
dayNames: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
dayNamesShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
dayNamesMin: ["Su","Mo","Tu","We","Th","Fr","Sa"],
monthNames: [ "January","February","March","April","May","June","July","August","September","October","November","December" ],
monthNamesShort: [ "Jan", "Feb", "Mar", "Apr", "May", "Jun","Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ],
today: 'Today',
clear: 'Clear',
dateFormat: 'mm/dd/yy',
weekHeader: 'Wk'
}
}
},
appendTo: {
type: String,
default: null
Expand Down Expand Up @@ -953,7 +936,7 @@ export default {
output += formatNumber('d', date.getDate(), 2);
break;
case 'D':
output += formatName('D', date.getDay(), this.locale.dayNamesShort, this.locale.dayNames);
output += formatName('D', date.getDay(), this.$primevue.config.locale.dayNamesShort, this.$primevue.config.locale.dayNames);
break;
case 'o':
output += formatNumber('o',
Expand All @@ -965,7 +948,7 @@ export default {
output += formatNumber('m', date.getMonth() + 1, 2);
break;
case 'M':
output += formatName('M',date.getMonth(), this.locale.monthNamesShort, this.locale.monthNames);
output += formatName('M',date.getMonth(), this.$primevue.config.locale.monthNamesShort, this.$primevue.config.locale.monthNames);
break;
case 'y':
output += lookAhead('y') ? date.getFullYear() : (date.getFullYear() % 100 < 10 ? '0' : '') + (date.getFullYear() % 100);
Expand Down Expand Up @@ -1545,7 +1528,7 @@ export default {
day = getNumber("d");
break;
case "D":
getName("D", this.locale.dayNamesShort, this.locale.dayNames);
getName("D", this.$primevue.config.locale.dayNamesShort, this.$primevue.config.locale.dayNames);
break;
case "o":
doy = getNumber("o");
Expand All @@ -1554,7 +1537,7 @@ export default {
month = getNumber("m");
break;
case "M":
month = getName("M", this.locale.monthNamesShort, this.locale.monthNames);
month = getName("M", this.$primevue.config.locale.monthNamesShort, this.$primevue.config.locale.monthNames);
break;
case "y":
year = getNumber("y");
Expand Down Expand Up @@ -2009,6 +1992,9 @@ export default {
},
overlayRef(el) {
this.overlay = el;
},
getMonthName(index) {
return this.$primevue.config.locale.monthNames[index];
}
},
computed: {
Expand Down Expand Up @@ -2123,9 +2109,9 @@ export default {
},
weekDays() {
let weekDays = [];
let dayIndex = this.locale.firstDayOfWeek;
let dayIndex = this.$primevue.config.locale.firstDayOfWeek;
for (let i = 0; i < 7; i++) {
weekDays.push(this.locale.dayNamesMin[dayIndex]);
weekDays.push(this.$primevue.config.locale.dayNamesMin[dayIndex]);
dayIndex = (dayIndex == 6) ? 0 : ++dayIndex;
}
Expand All @@ -2135,10 +2121,10 @@ export default {
return (((1970 - 1) * 365 + Math.floor(1970 / 4) - Math.floor(1970 / 100) + Math.floor(1970 / 400)) * 24 * 60 * 60 * 10000000);
},
sundayIndex() {
return this.locale.firstDayOfWeek > 0 ? 7 - this.locale.firstDayOfWeek : 0;
return this.$primevue.config.locale.firstDayOfWeek > 0 ? 7 - this.$primevue.config.locale.firstDayOfWeek : 0;
},
datePattern() {
return this.dateFormat || this.locale.dateFormat;
return this.dateFormat || this.$primevue.config.locale.dateFormat;
},
yearOptions() {
if (this.yearRange) {
Expand Down Expand Up @@ -2168,7 +2154,7 @@ export default {
monthPickerValues() {
let monthPickerValues = [];
for (let i = 0; i <= 11; i++) {
monthPickerValues.push(this.locale.monthNamesShort[i]);
monthPickerValues.push(this.$primevue.config.locale.monthNamesShort[i]);
}
return monthPickerValues;
Expand All @@ -2181,6 +2167,18 @@ export default {
},
formattedCurrentSecond() {
return this.currentSecond < 10 ? '0' + this.currentSecond : this.currentSecond;
},
todayLabel() {
return this.$primevue.config.locale.today;
},
clearLabel() {
return this.$primevue.config.locale.clear;
},
weekHeaderLabel() {
return this.$primevue.config.locale.weekHeader;
},
monthsNames() {
return this.$primevue.config.locale.monthNames;
}
},
components: {
Expand Down
38 changes: 38 additions & 0 deletions src/components/config/PrimeVue.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
import {PrimeVueSymbol} from './usePrimeVue';
import {reactive} from 'vue';

const defaultOptions = {
ripple: false,
locale: {
accept: 'Yes',
reject: 'No',
choose: 'Choose',
upload: 'Upload',
cancel: 'Cancel',
dayNames: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
dayNamesShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
dayNamesMin: ["Su","Mo","Tu","We","Th","Fr","Sa"],
monthNames: ["January","February","March","April","May","June","July","August","September","October","November","December"],
monthNamesShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun","Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
today: 'Today',
clear: 'Today',
weekHeader: 'Wk',
firstDayOfWeek: 0,
dateFormat: 'mm/dd/yy',
weak: 'Weak',
medium: 'Medium',
strong: 'Strong',
passwordPrompt: 'Enter a password'
}
};

export default {
install: (app, options) => {
let configOptions = options ? {...defaultOptions, ...options} : {...defaultOptions};
const PrimeVue = {
config: reactive(configOptions)
};
app.config.globalProperties.$primevue = PrimeVue;
app.provide(PrimeVueSymbol, PrimeVue);
}
};
12 changes: 12 additions & 0 deletions src/components/config/usePrimeVue.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import { inject } from 'vue';

export const PrimeVueSymbol = Symbol();

export function usePrimeVue() {
const PrimeVue = inject(PrimeVueSymbol);
if (!PrimeVue) {
throw new Error('PrimeVue is not installed!');
}

return PrimeVue;
}
4 changes: 2 additions & 2 deletions src/components/confirmdialog/ConfirmDialog.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,10 +78,10 @@ export default {
return ['p-confirm-dialog-icon', this.confirmation ? this.confirmation.icon : null];
},
acceptLabel() {
return this.confirmation ? (this.confirmation.acceptLabel || 'Yes') : null;
return this.confirmation ? (this.confirmation.acceptLabel || this.$primevue.config.locale.accept) : null;
},
rejectLabel() {
return this.confirmation ? (this.confirmation.rejectLabel || 'No') : null;
return this.confirmation ? (this.confirmation.rejectLabel || this.$primevue.config.locale.reject) : null;
},
acceptIcon() {
return this.confirmation ? this.confirmation.acceptIcon : null;
Expand Down
4 changes: 2 additions & 2 deletions src/components/confirmpopup/ConfirmPopup.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -182,10 +182,10 @@ export default {
return ['p-confirm-popup-icon', this.confirmation ? this.confirmation.icon : null];
},
acceptLabel() {
return this.confirmation ? (this.confirmation.acceptLabel || 'Yes') : null;
return this.confirmation ? (this.confirmation.acceptLabel || this.$primevue.config.locale.accept) : null;
},
rejectLabel() {
return this.confirmation ? (this.confirmation.rejectLabel || 'No') : null;
return this.confirmation ? (this.confirmation.rejectLabel || this.$primevue.config.locale.reject) : null;
},
acceptIcon() {
return this.confirmation ? this.confirmation.acceptIcon : null;
Expand Down
23 changes: 16 additions & 7 deletions src/components/fileupload/FileUpload.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,10 @@
<span :class="advancedChooseButtonClass" @click="choose" @keydown.enter="choose" @focus="onFocus" @blur="onBlur" v-ripple tabindex="0">
<input ref="fileInput" type="file" @change="onFileSelect" :multiple="multiple" :accept="accept" :disabled="chooseDisabled" />
<span class="p-button-icon p-button-icon-left pi pi-fw pi-plus"></span>
<span class="p-button-label">{{chooseLabel}}</span>
<span class="p-button-label">{{chooseButtonLabel}}</span>
</span>
<FileUploadButton :label="uploadLabel" icon="pi pi-upload" @click="upload" :disabled="uploadDisabled" />
<FileUploadButton :label="cancelLabel" icon="pi pi-times" @click="clear" :disabled="cancelDisabled" />
<FileUploadButton :label="uploadButtonLabel" icon="pi pi-upload" @click="upload" :disabled="uploadDisabled" />
<FileUploadButton :label="cancelButtonLabel" icon="pi pi-times" @click="clear" :disabled="cancelDisabled" />
</div>
<div ref="content" class="p-fileupload-content" @dragenter="onDragEnter" @dragover="onDragOver" @dragleave="onDragLeave" @drop="onDrop">
<FileUploadProgressBar :value="progress" v-if="hasFiles" />
Expand Down Expand Up @@ -103,15 +103,15 @@ export default {
},
chooseLabel: {
type: String,
default: 'Choose'
default: null
},
uploadLabel: {
type: String,
default: 'Upload'
default: null
},
cancelLabel: {
type: String,
default: 'Cancel'
default: null
},
customUpload: {
type: Boolean,
Expand Down Expand Up @@ -381,7 +381,7 @@ export default {
}];
},
basicChooseButtonLabel() {
return this.auto ? this.chooseLabel : (this.hasFiles ? this.files[0].name : this.chooseLabel);
return this.auto ? this.chooseButtonLabel : (this.hasFiles ? this.files[0].name : this.chooseButtonLabel);
},
hasFiles() {
return this.files && this.files.length > 0;
Expand All @@ -394,6 +394,15 @@ export default {
},
cancelDisabled() {
return this.disabled || !this.hasFiles;
},
chooseButtonLabel() {
return this.chooseLabel || this.$primevue.config.locale.choose;
},
uploadButtonLabel() {
return this.uploadLabel || this.$primevue.config.locale.upload;
},
cancelButtonLabel() {
return this.cancelLabel || this.$primevue.config.locale.cancel;
}
},
components: {
Expand Down
Loading

0 comments on commit bcb3756

Please sign in to comment.