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

Fixed #716 - Locale API

pull/800/head
Cagatay Civici 2020-12-09 15:24:11 +03:00
parent 7495783c11
commit bcb375695c
21 changed files with 331 additions and 149 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/App.vue
View File

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

4
src/AppConfigurator.vue
View File

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

1
src/AppMenu.vue
View File

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

14
src/components/calendar/Calendar.d.ts vendored
View File

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

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

@ -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="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>
@ -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: {

38
src/components/config/PrimeVue.js Normal file
View File

@ -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
src/components/config/usePrimeVue.js Normal file
View File

@ -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
src/components/confirmdialog/ConfirmDialog.vue
View File

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

4
src/components/confirmpopup/ConfirmPopup.vue
View File

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

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

@ -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" />
@ -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: {

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

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

2
src/components/ripple/Ripple.js
View File

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

5
src/main.js
View File

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

5
src/router/index.js
View File

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

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

@ -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>
<Calendar id="icon" v-model="date3" :showIcon="true" />
<label for="dateformat">DateFormat</label>
<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>
<Calendar id="spanish" v-model="date2" :locale="es" dateFormat="dd/mm/yy" />
<label for="icon">Icon</label>
<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

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

@ -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>
<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>
<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>Locale</h5>
<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>
<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>Format of the date.</td>
<td>null</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;Calendar id="icon" v-model="date3" :showIcon="true" /&gt;
&lt;label for="dateformat"&gt;Spanish&lt;/label&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;Calendar id="spanish" v-model="date2" :locale="es" dateFormat="dd/mm/yy" /&gt;
&lt;label for="icon"&gt;Icon&lt;/label&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

4
src/views/confirmdialog/ConfirmDialogDoc.vue
View File

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

4
src/views/confirmpopup/ConfirmPopupDoc.vue
View File

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

8
src/views/fileupload/FileUploadDoc.vue
View File

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

170
src/views/locale/LocaleDemo.vue Normal file
View File

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

8
src/views/password/PasswordDoc.vue
View File

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