Fixed #716 - Locale API

src/App.vue

@@ -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) {
@@ -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
             }];
         }
     },

src/AppConfigurator.vue

@@ -421,7 +421,7 @@ export default {
             document.documentElement.style.fontSize = this.scale + 'px';
         },
         onRippleChange(value) {
-            this.$primevue.ripple = value;
+            this.$primevue.config.ripple = value;
         }
     },
     computed: {
@@ -429,7 +429,7 @@ export default {
             return ['layout-config', {'layout-config-active': this.active}];
         },
         rippleActive() {
-            return this.$primevue.ripple;
+            return this.$primevue.config.ripple;
         }
     }
 }

src/AppMenu.vue

@@ -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>
 

src/components/calendar/Calendar.d.ts

@@ -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;
@@ -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;

src/components/calendar/Calendar.vue

@@ -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)">
@@ -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>
@@ -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="todayLabel" @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="clearLabel" @click="onClearButtonClick($event)" class="p-button-text" @keydown="onContainerButtonKeydown"/>
                 </div>
                 <slot name="footer"></slot>
             </div>
@@ -147,7 +147,7 @@ export default {
         },
         dateFormat: {
             type: String,
-            default: 'mm/dd/yy'
+            default: null
         },
         inline: {
             type: Boolean,
@@ -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
@@ -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',
@@ -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);
@@ -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");
@@ -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");
@@ -2009,6 +1992,9 @@ export default {
         },
         overlayRef(el) {
             this.overlay = el;
+        },
+        getMonthName(index) {
+            return this.$primevue.config.locale.monthNames[index];
         }
     },
     computed: {
@@ -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;
             }
 
@@ -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) {
@@ -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;
@@ -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: {

src/components/config/PrimeVue.js

@@ -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);
+    }
+};

src/components/config/usePrimeVue.js

@@ -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;
+}

src/components/confirmdialog/ConfirmDialog.vue

@@ -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;

src/components/confirmpopup/ConfirmPopup.vue

@@ -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;

src/components/fileupload/FileUpload.vue

@@ -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="uploadButtonLabel" icon="pi pi-upload" @click="upload" :disabled="uploadDisabled" />
-            <FileUploadButton :label="cancelLabel" icon="pi pi-times" @click="clear" :disabled="cancelDisabled" />
+            <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" />
@@ -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,
@@ -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;
@@ -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: {

src/components/password/Password.vue

@@ -22,7 +22,7 @@ export default {
         modelValue: String,
         promptLabel: {
             type: String,
-            default: 'Enter a password'
+            default: null
         },
         mediumRegex: {
             type: String,
@@ -34,15 +34,15 @@ export default {
         },
         weakLabel: {
             type: String,
-            default: 'Weak'
+            default: null
         },
         mediumLabel: {
             type: String,
-            default: 'Medium'
+            default: null
         },
         strongLabel: {
             type: String,
-            default: 'Strong'
+            default: null
         },
         feedback: {
             type: Boolean,
@@ -118,22 +118,22 @@ export default {
 
                 switch (this.testStrength(value)) {
                     case 1:
-                        label = this.weakLabel;
+                        label = this.weakText;
                         meterPos = '0px -10px';
                         break;
 
                     case 2:
-                        label = this.mediumLabel;
+                        label = this.mediumText;
                         meterPos = '0px -20px';
                         break;
 
                     case 3:
-                        label = this.strongLabel;
+                        label = this.strongText;
                         meterPos = '0px -30px';
                         break;
 
                     default:
-                        label = this.promptLabel;
+                        label = this.promptText;
                         meterPos = '0px 0px';
                         break;
                 }
@@ -185,6 +185,18 @@ export default {
     computed: {
         filled() {
             return (this.modelValue != null && this.modelValue.toString().length > 0)
+        },
+        weakText() {
+            return this.weakLabel || this.$primevue.config.locale.weak;
+        },
+        mediumText() {
+            return this.mediumLabel || this.$primevue.config.locale.medium;
+        },
+        strongText() {
+            return this.strongLabel || this.$primevue.config.locale.strong;
+        },
+        promptText() {
+            return this.promptLabel || this.$primevue.config.locale.passwordPrompt;
         }
     }
 }

src/components/ripple/Ripple.js

@@ -63,7 +63,7 @@ function getInk(el) {
 
 const Ripple = {
     mounted(el, binding) {
-        if (binding.instance.$primevue && binding.instance.$primevue.ripple) {
+        if (binding.instance.$primevue && binding.instance.$primevue.config && binding.instance.$primevue.config.ripple) {
             create(el);
             bindEvents(el);
         }

src/main.js

@@ -1,7 +1,8 @@
 import {createApp} from 'vue';
-import {reactive} from 'vue'
+import {reactive} from 'vue';
 import router from './router';
 import App from './App.vue';
+import PrimeVue from './components/config/PrimeVue';
 import AutoComplete from './components/autocomplete/AutoComplete';
 import Accordion from './components/accordion/Accordion';
 import AccordionTab from './components/accordiontab/AccordionTab';
@@ -112,8 +113,8 @@ router.beforeEach(function (to, from, next) {
 const app = createApp(App);
 
 app.config.globalProperties.$appState = reactive({inputStyle: 'outlined', darkTheme: false});
-app.config.globalProperties.$primevue = reactive({ripple: true});
 
+app.use(PrimeVue, {ripple: true});
 app.use(ToastService);
 app.use(ConfirmationService);
 app.use(router);

src/router/index.js

@@ -17,6 +17,11 @@ const routes = [
         name: 'accessibility',
         component: () => import('../views/accessibility/AccessibilityDemo.vue')
     },
+    {
+        path: '/locale',
+        name: 'locale',
+        component: () => import('../views/locale/LocaleDemo.vue')
+    },
     {
         path: '/avatar',
         name: 'avatar',

src/views/calendar/CalendarDemo.vue

@@ -17,12 +17,12 @@
                         <Calendar id="basic" v-model="date1" />
                     </div>
                     <div class="p-field p-col-12 p-md-4">
-                        <label for="icon">Icon</label>
+                        <label for="dateformat">DateFormat</label>
-                        <Calendar id="icon" v-model="date3" :showIcon="true" />
+                        <Calendar id="dateformat" v-model="date2"  dateFormat="mm-dd-yy" />
                     </div>
                     <div class="p-field p-col-12 p-md-4">
-                        <label for="spanish">Spanish</label>
+                        <label for="icon">Icon</label>
-                        <Calendar id="spanish" v-model="date2" :locale="es" dateFormat="dd/mm/yy" />
+                        <Calendar id="icon" v-model="date3" :showIcon="true" />
                     </div>
                     <div class="p-field p-col-12 p-md-4">
                         <label for="minmax">MinMax</label>
@@ -129,17 +129,6 @@ export default {
             date14: null,
             dates1: null,
             dates2: null,
-            es: {
-                firstDayOfWeek: 1,
-                dayNames: [ "Domingo","Lunes","Martes","Miércoles","Jueves","Viernes","Sábado" ],
-                dayNamesShort: [ "Dom","Lun","Mar","Mié","Jue","Vie","Sáb" ],
-                dayNamesMin: [ "D","L","M","X","J","V","S" ],
-                monthNames: [ "Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre" ],
-                monthNamesShort: [ "Ene","Feb","Mar","Abr","May","Jun","Jul","Ago","Sep","Oct","Nov","Dic" ],
-                today: 'Hoy',
-                clear: 'Borrar',
-                weekHeader: 'Sm'
-            },
             minDate: null,
             maxDate: null,
             invalidDates: null

src/views/calendar/CalendarDoc.vue

@@ -51,7 +51,7 @@ export default {
 </code></pre>
 
                 <h5>DateFormat</h5>
-                <p>Default date format is mm/dd/yy, to customize this use <i>dateFormat</i> property or define it at locale settings. Note that standalone property overrides the value in locale settings.</p>
+                <p>Default date format is mm/dd/yy, to customize this use <i>dateFormat</i> property or define it at <router-link to="/locale">PrimeVue Locale</router-link> globally. Note that standalone property overrides the value in locale settings.</p>
 
 <pre v-code>
 <code>
@@ -124,36 +124,8 @@ export default {
 
 </code></pre>
 
-                <h5>Localization</h5>
+                <h5>Locale</h5>
-                <p>Localization for different languages and formats is defined by binding the locale settings object to the <i>locale</i> property. Following is the default values for English.</p>
+                <p>Locale for different languages and formats is defined globally, refer to the <router-link to="/locale">PrimeVue Locale</router-link> configuration for more information.</p>
-<pre v-code>
-<code>
-&lt;Calendar v-model="value" :locale="en" /&gt;
-
-</code></pre>
-
-<pre v-code.script>
-<code>
-export default {
-    data() {
-        return {
-            en: {
-                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'
-            }
-        }
-    }
-}
-
-</code></pre>
 
             <h5>Custom Content</h5>
             <p>Calendar UI accepts custom content using header and footer templates.</p>
@@ -234,8 +206,8 @@ export default {
                             <tr>
                                 <td>dateFormat</td>
                                 <td>string</td>
-                                <td>mm/dd/yy</td>
+                                <td>null</td>
-                                <td>Format of the date.</td>
+                                <td>Format of the date. Defaults to PrimeVue <router-link to="/locale">Locale</router-link> configuration.</td>
                             </tr>
                             <tr>
                                 <td>inline</td>
@@ -586,12 +558,12 @@ export default {
         &lt;Calendar id="basic" v-model="date1" /&gt;
     &lt;/div&gt;
     &lt;div class="p-field p-col-12 p-md-4"&gt;
-        &lt;label for="icon"&gt;Icon&lt;/label&gt;
+        &lt;label for="dateformat"&gt;Spanish&lt;/label&gt;
-        &lt;Calendar id="icon" v-model="date3" :showIcon="true" /&gt;
+        &lt;Calendar id="dateformat" v-model="date2" dateFormat="mm-dd-yy" /&gt;
     &lt;/div&gt;
     &lt;div class="p-field p-col-12 p-md-4"&gt;
-        &lt;label for="spanish"&gt;Spanish&lt;/label&gt;
+        &lt;label for="icon"&gt;Icon&lt;/label&gt;
-        &lt;Calendar id="spanish" v-model="date2" :locale="es" dateFormat="dd/mm/yy" /&gt;
+        &lt;Calendar id="icon" v-model="date3" :showIcon="true" /&gt;
     &lt;/div&gt;
     &lt;div class="p-field p-col-12 p-md-4"&gt;
         &lt;label for="minmax"&gt;MinMax&lt;/label&gt;
@@ -637,7 +609,7 @@ export default {
         &lt;label for="datetemplate"&gt;Date Template&lt;/label&gt;
         &lt;Calendar id="datetemplate" v-model="date12"&gt;
            &lt;template #date="slotProps"&gt;
-                &lt;strong v-if="slotProps.date.day &gt; 10 && slotProps.date.day &lt; 15" class="special-day"&gt;{{slotProps.date.day}}&lt;/strong&gt;
+                &lt;strong v-if="slotProps.date.day &gt; 10 &amp;&amp; slotProps.date.day &lt; 15" class="special-day"&gt;{{slotProps.date.day}}&lt;/strong&gt;
                 &lt;template v-else&gt;&#123;&#123;slotProps.date.day&#125;&#125;}&lt;/template&gt;
             &lt;/template&gt;
         &lt;/Calendar&gt;
@@ -693,17 +665,6 @@ export default {
             date14: null,
             dates1: null,
             dates2: null,
-            es: {
-                firstDayOfWeek: 1,
-                dayNames: [ "Domingo","Lunes","Martes","Miércoles","Jueves","Viernes","Sábado" ],
-                dayNamesShort: [ "Dom","Lun","Mar","Mié","Jue","Vie","Sáb" ],
-                dayNamesMin: [ "D","L","M","X","J","V","S" ],
-                monthNames: [ "Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre" ],
-                monthNamesShort: [ "Ene","Feb","Mar","Abr","May","Jun","Jul","Ago","Sep","Oct","Nov","Dic" ],
-                today: 'Hoy',
-                clear: 'Borrar',
-                weekHeader: 'Sm'
-            },
             minDate: null,
             maxDate: null,
             invalidDates: null

src/views/confirmdialog/ConfirmDialogDoc.vue

@@ -155,13 +155,13 @@ export default {
                                 <td>acceptLabel</td>
                                 <td>string</td>
                                 <td>null</td>
-                                <td>Label of the accept button.</td>
+                                <td>Label of the accept button. Defaults to PrimeVue <router-link to="/locale">Locale</router-link> configuration.</td>
                             </tr>
                             <tr>
                                 <td>rejectLabel</td>
                                 <td>string</td>
                                 <td>null</td>
-                                <td>Label of the reject button.</td>
+                                <td>Label of the reject button. Defaults to PrimeVue <router-link to="/locale">Locale</router-link> configuration.</td>
                             </tr>
                             <tr>
                                 <td>acceptIcon</td>

src/views/confirmpopup/ConfirmPopupDoc.vue

@@ -146,13 +146,13 @@ export default {
                                 <td>acceptLabel</td>
                                 <td>string</td>
                                 <td>null</td>
-                                <td>Label of the accept button.</td>
+                                <td>Label of the accept button. Defaults to PrimeVue <router-link to="/locale">Locale</router-link> configuration.</td>
                             </tr>
                             <tr>
                                 <td>rejectLabel</td>
                                 <td>string</td>
                                 <td>null</td>
-                                <td>Label of the reject button.</td>
+                                <td>Label of the reject button. Defaults to PrimeVue <router-link to="/locale">Locale</router-link> configuration.</td>
                             </tr>
                             <tr>
                                 <td>acceptIcon</td>

src/views/fileupload/FileUploadDoc.vue

@@ -194,26 +194,26 @@ myUploader(event) {
                             <tr>
                                 <td>chooseLabel</td>
                                 <td>string</td>
-                                <td>Choose</td>
+                                <td>null</td>
                                 <td>Label of the choose button.</td>
                             </tr>
                             <tr>
                                 <td>uploadLabel</td>
                                 <td>string</td>
                                 <td>Upload</td>
-                                <td>Label of the upload button.</td>
+                                <td>null of the upload button. Defaults to PrimeVue <router-link to="/locale">Locale</router-link> configuration.</td>
                             </tr>
                             <tr>
                                 <td>cancelLabel</td>
                                 <td>string</td>
                                 <td>Cancel</td>
-                                <td>Label of the cancel button.</td>
+                                <td>null of the cancel button. Defaults to PrimeVue <router-link to="/locale">Locale</router-link> configuration.</td>
                             </tr>
                             <tr>
                                 <td>customUpload</td>
                                 <td>boolean</td>
                                 <td>false</td>
-                                <td>Whether to use the default upload or a manual implementation defined in uploadHandler callback.</td>
+                                <td>Whether to use the default upload or a manual implementation defined in uploadHandler callback. Defaults to PrimeVue <router-link to="/locale">Locale</router-link> configuration.</td>
                             </tr>
 						</tbody>
 					</table>

src/views/locale/LocaleDemo.vue

@@ -0,0 +1,170 @@
+<template>
+    <div>
+        <div class="content-section documentation">
+            <h1>Internationalization and Localization</h1>
+            <p>The Locale API allows setting <b>i18n</b> and <b>l7n</b> options globally for the components.</p>
+
+            <h5>Getting Started</h5>
+            <p>Locale values are stored in the global configuration that becomes accessible after installing the PrimeVue.</p>
+<pre v-code.script>
+<code>
+import {createApp} from 'vue';
+import PrimeVue from 'primevue/config';
+const app = createApp(App);
+
+app.use(PrimeVue);
+
+</code></pre>
+
+            <p>Second parameter of the <i>use</i> function can be used to initiate the locale during PrimeVue installation.</p>
+<pre v-code.script>
+<code>
+app.use(PrimeVue, {
+    accept: 'Aceptar',
+    reject: 'Rechazar',
+    //...
+});
+
+</code></pre>
+
+            <p>The locale configuration is reactive so that any changes are instantly reflected in the UI. Suppose you are doing a multi language
+                application and need to change the language dynamically.</p>
+
+            <h6>Options API</h6>
+<pre v-code.script>
+<code>
+export default {
+    methods: {
+        changeToSpanish() {
+            this.$primevue.config.locale.accept = 'Aceptar';
+            this.$primevue.config.locale.reject = 'Rechazar';
+        }
+    }
+}
+
+</code></pre>
+
+            <h6>Composition API</h6>
+<pre v-code.script>
+<code>
+import { defineComponent, reactive } from "vue";
+import { usePrimeVue } from "primevue/config";
+
+export default defineComponent({
+    setup() {
+        const changeToSpanish = () => {
+            const primevue = usePrimeVue();
+            primevue.config.locale.accept: 'Aceptar';
+            primevue.config.locale.reject: 'Rechazar';
+        }
+    }
+});
+
+</code></pre>
+
+
+
+            <h5>Locale Options</h5>
+            <div class="doc-tablewrapper">
+                <table class="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Key</th>
+                            <th>Value</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>accept</td>
+                            <td>Yes</td>
+                        </tr>
+                        <tr>
+                            <td>reject</td>
+                            <td>No</td>
+                        </tr>
+                        <tr>
+                            <td>choose</td>
+                            <td>Choose</td>
+                        </tr>
+                        <tr>
+                            <td>upload</td>
+                            <td>Upload</td>
+                        </tr>
+                        <tr>
+                            <td>cancel</td>
+                            <td>Cancel</td>
+                        </tr>
+                        <tr>
+                            <td>dayNames</td>
+                            <td>["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]</td>
+                        </tr>
+                        <tr>
+                            <td>dayNamesShort</td>
+                            <td>["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]</td>
+                        </tr>
+                        <tr>
+                            <td>dayNamesMin</td>
+                            <td>["Su","Mo","Tu","We","Th","Fr","Sa"]</td>
+                        </tr>
+                        <tr>
+                            <td>monthNames</td>
+                            <td>["January","February","March","April","May","June","July","August","September","October","November","December"]</td>
+                        </tr>
+                        <tr>
+                            <td>monthNamesShort</td>
+                            <td>["Jan", "Feb", "Mar", "Apr", "May", "Jun","Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]</td>
+                        </tr>
+                        <tr>
+                            <td>today</td>
+                            <td>Today</td>
+                        </tr>
+                        <tr>
+                            <td>today</td>
+                            <td>Today</td>
+                        </tr>
+                        <tr>
+                            <td>weekHeader</td>
+                            <td>Wk</td>
+                        </tr>
+                        <tr>
+                            <td>firstDayOfWeek</td>
+                            <td>0</td>
+                        </tr>
+                        <tr>
+                            <td>dateFormat</td>
+                            <td>mm/dd/yy</td>
+                        </tr>
+                        <tr>
+                            <td>weak</td>
+                            <td>Weak</td>
+                        </tr>
+                        <tr>
+                            <td>medium</td>
+                            <td>Medium</td>
+                        </tr>
+                        <tr>
+                            <td>strong</td>
+                            <td>Strong</td>
+                        </tr>
+                        <tr>
+                            <td>passwordPrompt</td>
+                            <td>Enter a password</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style scoped>
+li {
+    line-height: 1.5;
+}
+</style>

src/views/password/PasswordDoc.vue

@@ -62,7 +62,7 @@ import Password from 'primevue/password';
                                 <td>promptLabel</td>
                                 <td>string</td>
                                 <td>Enter a password</td>
-                                <td>Text to prompt password entry.</td>
+                                <td>Text to prompt password entry. Defaults to PrimeVue <router-link to="/locale">Locale</router-link> configuration.</td>
                             </tr>
                             <tr>
                                 <td>mediumRegex</td>
@@ -80,19 +80,19 @@ import Password from 'primevue/password';
                                 <td>weakLabel</td>
                                 <td>string</td>
                                 <td>Weak</td>
-                                <td>Text for a weak password.</td>
+                                <td>Text for a weak password. Defaults to PrimeVue <router-link to="/locale">Locale</router-link> configuration.</td>
                             </tr>
                             <tr>
                                 <td>mediumLabel</td>
                                 <td>string</td>
                                 <td>Medium</td>
-                                <td>Text for a medium password.</td>
+                                <td>Text for a medium password. Defaults to PrimeVue <router-link to="/locale">Locale</router-link> configuration.</td>
                             </tr>
                             <tr>
                                 <td>strongLabel</td>
                                 <td>string</td>
                                 <td>Strong</td>
-                                <td>Text for a strong password.</td>
+                                <td>Text for a strong password. Defaults to PrimeVue <router-link to="/locale">Locale</router-link> configuration.</td>
                             </tr>
                             <tr>
                                 <td>feedback</td>