From bcb375695c74f30573b24043d5017fc294aee46b Mon Sep 17 00:00:00 2001 From: Cagatay Civici Date: Wed, 9 Dec 2020 15:24:11 +0300 Subject: [PATCH] Fixed #716 - Locale API --- src/App.vue | 4 +- src/AppConfigurator.vue | 4 +- src/AppMenu.vue | 1 + src/components/calendar/Calendar.d.ts | 14 -- src/components/calendar/Calendar.vue | 62 ++++--- src/components/config/PrimeVue.js | 38 ++++ src/components/config/usePrimeVue.js | 12 ++ .../confirmdialog/ConfirmDialog.vue | 4 +- src/components/confirmpopup/ConfirmPopup.vue | 4 +- src/components/fileupload/FileUpload.vue | 23 ++- src/components/password/Password.vue | 28 ++- src/components/ripple/Ripple.js | 2 +- src/main.js | 5 +- src/router/index.js | 5 + src/views/calendar/CalendarDemo.vue | 19 +- src/views/calendar/CalendarDoc.vue | 59 ++---- src/views/confirmdialog/ConfirmDialogDoc.vue | 4 +- src/views/confirmpopup/ConfirmPopupDoc.vue | 6 +- src/views/fileupload/FileUploadDoc.vue | 8 +- src/views/locale/LocaleDemo.vue | 170 ++++++++++++++++++ src/views/password/PasswordDoc.vue | 8 +- 21 files changed, 331 insertions(+), 149 deletions(-) create mode 100644 src/components/config/PrimeVue.js create mode 100644 src/components/config/usePrimeVue.js create mode 100644 src/views/locale/LocaleDemo.vue diff --git a/src/App.vue b/src/App.vue index 92a03a235..d71d4d36d 100755 --- a/src/App.vue +++ b/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 }]; } }, diff --git a/src/AppConfigurator.vue b/src/AppConfigurator.vue index 232de4f9f..100d53e30 100755 --- a/src/AppConfigurator.vue +++ b/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; } } } diff --git a/src/AppMenu.vue b/src/AppMenu.vue index cf92a2c06..e3c45c91c 100755 --- a/src/AppMenu.vue +++ b/src/AppMenu.vue @@ -12,6 +12,7 @@ Source Code Support Store + Locale Accessibility diff --git a/src/components/calendar/Calendar.d.ts b/src/components/calendar/Calendar.d.ts index 5ca349689..540d951a2 100755 --- a/src/components/calendar/Calendar.d.ts +++ b/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; diff --git a/src/components/calendar/Calendar.vue b/src/components/calendar/Calendar.vue index f79a3d121..a0c138c08 100755 --- a/src/components/calendar/Calendar.vue +++ b/src/components/calendar/Calendar.vue @@ -13,9 +13,9 @@
- {{locale.monthNames[month.month]}} + {{getMonthName(month.month)}} {{view === 'month' ? currentYear : month.year}} - {{chooseLabel}} + {{chooseButtonLabel}} - - + +
@@ -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: { diff --git a/src/components/password/Password.vue b/src/components/password/Password.vue index a9a4d102b..7f4aca38d 100755 --- a/src/components/password/Password.vue +++ b/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; } } } diff --git a/src/components/ripple/Ripple.js b/src/components/ripple/Ripple.js index fd8341e23..f11f063d1 100644 --- a/src/components/ripple/Ripple.js +++ b/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); } diff --git a/src/main.js b/src/main.js index 2cc7c8601..17f4988e6 100644 --- a/src/main.js +++ b/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); diff --git a/src/router/index.js b/src/router/index.js index 8edf34abd..0a30bb4d2 100644 --- a/src/router/index.js +++ b/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', diff --git a/src/views/calendar/CalendarDemo.vue b/src/views/calendar/CalendarDemo.vue index 679cfd1d4..649e81f16 100755 --- a/src/views/calendar/CalendarDemo.vue +++ b/src/views/calendar/CalendarDemo.vue @@ -17,12 +17,12 @@
- - + +
- - + +
@@ -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 diff --git a/src/views/calendar/CalendarDoc.vue b/src/views/calendar/CalendarDoc.vue index 6d56b3a17..d51a107e3 100755 --- a/src/views/calendar/CalendarDoc.vue +++ b/src/views/calendar/CalendarDoc.vue @@ -51,7 +51,7 @@ export default {
DateFormat
-

Default date format is mm/dd/yy, to customize this use dateFormat property or define it at locale settings. Note that standalone property overrides the value in locale settings.

+

Default date format is mm/dd/yy, to customize this use dateFormat property or define it at PrimeVue Locale globally. Note that standalone property overrides the value in locale settings.

 
@@ -124,36 +124,8 @@ export default {
-
Localization
-

Localization for different languages and formats is defined by binding the locale settings object to the locale property. Following is the default values for English.

-
-
-<Calendar v-model="value" :locale="en" />
-
-
- -
-
-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'
-            }
-        }
-    }
-}
-
-
+
Locale
+

Locale for different languages and formats is defined globally, refer to the PrimeVue Locale configuration for more information.

Custom Content

Calendar UI accepts custom content using header and footer templates.

@@ -234,8 +206,8 @@ export default { dateFormat string - mm/dd/yy - Format of the date. + null + Format of the date. Defaults to PrimeVue Locale configuration. inline @@ -586,12 +558,12 @@ export default { <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">Spanish</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> @@ -637,7 +609,7 @@ export default { <label for="datetemplate">Date Template</label> <Calendar id="datetemplate" v-model="date12"> <template #date="slotProps"> - <strong v-if="slotProps.date.day > 10 && slotProps.date.day < 15" class="special-day">{{slotProps.date.day}}</strong> + <strong v-if="slotProps.date.day > 10 && slotProps.date.day < 15" class="special-day">{{slotProps.date.day}}</strong> <template v-else>{{slotProps.date.day}}}</template> </template> </Calendar> @@ -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 diff --git a/src/views/confirmdialog/ConfirmDialogDoc.vue b/src/views/confirmdialog/ConfirmDialogDoc.vue index cba341880..ff931f7f4 100644 --- a/src/views/confirmdialog/ConfirmDialogDoc.vue +++ b/src/views/confirmdialog/ConfirmDialogDoc.vue @@ -155,13 +155,13 @@ export default { acceptLabel string null - Label of the accept button. + Label of the accept button. Defaults to PrimeVue Locale configuration. rejectLabel string null - Label of the reject button. + Label of the reject button. Defaults to PrimeVue Locale configuration. acceptIcon diff --git a/src/views/confirmpopup/ConfirmPopupDoc.vue b/src/views/confirmpopup/ConfirmPopupDoc.vue index e55fc3a31..5390ca1e9 100644 --- a/src/views/confirmpopup/ConfirmPopupDoc.vue +++ b/src/views/confirmpopup/ConfirmPopupDoc.vue @@ -142,17 +142,17 @@ export default { null Callback to execute when action is rejected. - + acceptLabel string null - Label of the accept button. + Label of the accept button. Defaults to PrimeVue Locale configuration. rejectLabel string null - Label of the reject button. + Label of the reject button. Defaults to PrimeVue Locale configuration. acceptIcon diff --git a/src/views/fileupload/FileUploadDoc.vue b/src/views/fileupload/FileUploadDoc.vue index 202a07b2b..f1ee204dd 100755 --- a/src/views/fileupload/FileUploadDoc.vue +++ b/src/views/fileupload/FileUploadDoc.vue @@ -194,26 +194,26 @@ myUploader(event) { chooseLabel string - Choose + null Label of the choose button. uploadLabel string Upload - Label of the upload button. + null of the upload button. Defaults to PrimeVue Locale configuration. cancelLabel string Cancel - Label of the cancel button. + null of the cancel button. Defaults to PrimeVue Locale configuration. customUpload boolean false - Whether to use the default upload or a manual implementation defined in uploadHandler callback. + Whether to use the default upload or a manual implementation defined in uploadHandler callback. Defaults to PrimeVue Locale configuration. diff --git a/src/views/locale/LocaleDemo.vue b/src/views/locale/LocaleDemo.vue new file mode 100644 index 000000000..940f7a6e6 --- /dev/null +++ b/src/views/locale/LocaleDemo.vue @@ -0,0 +1,170 @@ + + + + + diff --git a/src/views/password/PasswordDoc.vue b/src/views/password/PasswordDoc.vue index 1e40c86c2..e2eae0c80 100755 --- a/src/views/password/PasswordDoc.vue +++ b/src/views/password/PasswordDoc.vue @@ -62,7 +62,7 @@ import Password from 'primevue/password'; promptLabel string Enter a password - Text to prompt password entry. + Text to prompt password entry. Defaults to PrimeVue Locale configuration. mediumRegex @@ -80,19 +80,19 @@ import Password from 'primevue/password'; weakLabel string Weak - Text for a weak password. + Text for a weak password. Defaults to PrimeVue Locale configuration. mediumLabel string Medium - Text for a medium password. + Text for a medium password. Defaults to PrimeVue Locale configuration. strongLabel string Strong - Text for a strong password. + Text for a strong password. Defaults to PrimeVue Locale configuration. feedback