feat: locales support

src/date-picker/children/date-table.ts

@@ -1,5 +1,6 @@
 import { Component, EventEmitter, Input, OnInit, Output, OnChanges, SimpleChanges } from '@angular/core'
 import { DateFormat } from '../utils/format'
+import { ElLocalesService } from '../../locales';
 
 export type DateRowItem = {
   day: number,                  // day value
@@ -61,6 +62,11 @@ export class ElDateTable implements OnInit, OnChanges {
       return { day: lastCount, monthOffset: -1 }
     }).reverse()
   }
+
+  constructor(
+    private elLocales: ElLocalesService
+  ) {
+  }
 
   isToday(item: DateRowItem): boolean {
     if (this.currentMonthOffset === null) return false
@@ -113,6 +119,20 @@ export class ElDateTable implements OnInit, OnChanges {
   }
 
   ngOnInit(): void {
+    this.elLocales.resources$.subscribe(locales => {
+      const weeks = locales.el.datepicker.weeks;
+      this.weeks = [
+        weeks.sun,
+        weeks.mon,
+        weeks.tue,
+        weeks.wed,
+        weeks.thu,
+        weeks.fri,
+        weeks.sat
+      ]
+    })
+
+
     this.date = new Date(this.model)
     this.getRows()
   }

src/date-picker/children/month-table.ts

@@ -1,4 +1,5 @@
 import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core'
+import { ElLocalesService } from '../../locales';
 
 @Component({
   selector: 'el-month-table',
@@ -32,6 +33,11 @@ export class EMonthTable implements OnInit, OnChanges {
     ['五月', '六月', '七月', '八月'],
     ['九月', '十月', '十一月', '十二月'],
   ]
+
+  constructor(
+    private elLocales: ElLocalesService
+  ) {
+  }
 
   clickHandle(i: number, k: number): void {
     const monthID = 4 * i + k
@@ -44,6 +50,15 @@ export class EMonthTable implements OnInit, OnChanges {
   }
 
   ngOnInit(): void {
+    this.elLocales.resources$.subscribe(locales => {
+      const months = locales.el.datepicker.months;
+      this.monthRows = [
+        [ months.jan, months.feb, months.mar, months.apr ],
+        [ months.may, months.jun, months.jul, months.aug ],
+        [ months.sep, months.oct, months.nov, months.dec ]
+      ]
+    })
+
     this.date = new Date(this.model)
     this.currentMonth = this.date.getMonth()
   }

src/date-picker/picker-panel.ts

@@ -1,5 +1,6 @@
 import { Component, EventEmitter, Input, OnChanges, OnInit, Optional, Output, SimpleChanges } from '@angular/core'
 import { ElDataPicker } from './picker'
+import { ElLocalesService, ElDatePickerLocales } from '../locales'
 import { dropAnimation } from '../shared/animation'
 
 export type DateModelItem = {
@@ -38,16 +39,17 @@ export type DateModelItem = {
 
             <!--year label-->
             <span class="el-date-picker__header-label" *ngIf="currentView !== 'year'"
-              (click)="showPicker('year')">{{dateShowModels.year}} 年</span>
+              (click)="showPicker('year')">{{dateShowModels.year}} {{locales.year}}</span>
             <!--year range label-->
             <span class="el-date-picker__header-label" *ngIf="currentView === 'year'">
-              {{dateShowModels.yearRange[0]}} 年 - {{dateShowModels.yearRange[1]}} 年
+              {{dateShowModels.yearRange[0]}} {{locales.year}} - {{dateShowModels.yearRange[1]}} {{locales.year}}
             </span>
 
             <span class="el-date-picker__header-label"
               [class.active]="currentView === 'month'"
               (click)="showPicker('month')"
-              *ngIf="currentView === 'date'">{{dateShowModels.month + 1}} 月</span>
+              *ngIf="currentView === 'date'">{{ locales['month' + (dateShowModels.month + 1)] }}</span>
+
             <button class="el-picker-panel__icon-btn el-date-picker__next-btn el-icon-d-arrow-right"
               type="button" (click)="nextYear(1)">
             </button>
@@ -98,8 +100,10 @@ export class ElDatePickerPanel implements OnInit, OnChanges {
   showTime: boolean = false
   currentView: string = 'date'
   dateShowModels: DateModelItem
+  locales: ElDatePickerLocales
 
   constructor(
+    private elLocales: ElLocalesService,
     @Optional() public root: ElDataPicker,
   ) {
   }
@@ -160,6 +164,10 @@ export class ElDatePickerPanel implements OnInit, OnChanges {
   }
 
   ngOnInit(): void {
+    this.elLocales.resources$.subscribe(locales => {
+      this.locales = locales.el.datepicker;
+    })
+
     // hidden day
     this.currentView = this.hiddenDay ? 'month' : 'date'
     this.model = this.model || Date.now()

src/element-angular.module.ts

@@ -39,6 +39,7 @@ import { ElTableModule } from './table/module'
 import { ElContainerModule } from './container/module'
 import { ElFormModule } from './form/module'
 import { ElTreeModule } from './tree/module'
+import { ElLocalesService, ElLocales, ElLocalesModule } from './locales'
 
 export const ElChildModules: any = {
   ElButtonsModule, ElIconsModule, ElRadiosModule, ElMenusModule, ElTooltipModule, ElRowModule,
@@ -47,7 +48,7 @@ export const ElChildModules: any = {
   ElSharedModule, ElNotificationModule, ElCascaderModule, ElBadgesModule, ElCardsModule, ElDropdownModule,
   ElBreadcrumbsModule, ElDateModule, ElSliderModule, ElDialogModule, ElCarouselModule, ElCollapseModule,
   ElAlertModule, ElPaginationModule, ElUploadModule, ElTableModule, ElContainerModule, ElFormModule,
-  ElTreeModule,
+  ElTreeModule, ElLocalesModule
 }
 export const ELMODULES_GROUP: any[] = [
   ElButtonsModule, ElIconsModule, ElRadiosModule, ElMenusModule, ElTooltipModule, ElRowModule,
@@ -56,7 +57,7 @@ export const ELMODULES_GROUP: any[] = [
   ElSharedModule, ElNotificationModule, ElCascaderModule, ElBadgesModule, ElCardsModule, ElDropdownModule,
   ElBreadcrumbsModule, ElDateModule, ElSliderModule, ElDialogModule, ElCarouselModule, ElCollapseModule,
   ElAlertModule, ElPaginationModule, ElUploadModule, ElTableModule, ElContainerModule, ElFormModule,
-  ElTreeModule,
+  ElTreeModule, ElLocalesModule
 ]
 
 @NgModule({
@@ -70,7 +71,7 @@ export const ELMODULES_GROUP: any[] = [
     ElBreadcrumbsModule.forRoot(), ElDateModule.forRoot(), ElSliderModule.forRoot(), ElDialogModule.forRoot(),
     ElCarouselModule.forRoot(), ElCollapseModule.forRoot(), ElAlertModule.forRoot(), ElPaginationModule.forRoot(),
     ElUploadModule.forRoot(), ElTableModule.forRoot(), ElContainerModule.forRoot(), ElFormModule.forRoot(),
-    ElTreeModule.forRoot(),
+    ElTreeModule.forRoot(), ElLocalesModule.forRoot()
   ],
   exports: ELMODULES_GROUP,
 })
@@ -86,6 +87,8 @@ class ElModule {
 
 export {
   ElModule,
+  ElLocales,
+  ElLocalesService,
   ElMessageService,
   ElNotificationService,
 }

src/locales/index.ts

@@ -0,0 +1,3 @@
+export * from './types'
+export * from './service'
+export * from './module'

src/locales/lang/af-ZA.ts

@@ -0,0 +1,116 @@
+export default {
+  el: {
+    colorpicker: {
+      confirm: 'Bevestig',
+      clear: 'Maak skoon'
+    },
+    datepicker: {
+      now: 'Nou',
+      today: 'Vandag',
+      cancel: 'Kanselleer',
+      clear: 'Maak skoon',
+      confirm: 'Bevestig',
+      selectDate: 'Kies datum',
+      selectTime: 'Kies tyd',
+      startDate: 'Begindatum',
+      startTime: 'Begintyd',
+      endDate: 'Einddatum',
+      endTime: 'Eindtyd',
+      prevYear: 'Previous Year', // to be translated
+      nextYear: 'Next Year', // to be translated
+      prevMonth: 'Previous Month', // to be translated
+      nextMonth: 'Next Month', // to be translated
+      year: 'Jaar',
+      month1: 'Jan',
+      month2: 'Feb',
+      month3: 'Mrt',
+      month4: 'Apr',
+      month5: 'Mei',
+      month6: 'Jun',
+      month7: 'Jul',
+      month8: 'Aug',
+      month9: 'Sep',
+      month10: 'Okt',
+      month11: 'Nov',
+      month12: 'Des',
+      // week: 'week',
+      weeks: {
+        sun: 'So',
+        mon: 'Ma',
+        tue: 'Di',
+        wed: 'Wo',
+        thu: 'Do',
+        fri: 'Vr',
+        sat: 'Sa'
+      },
+      months: {
+        jan: 'Jan',
+        feb: 'Feb',
+        mar: 'Mrt',
+        apr: 'Apr',
+        may: 'Mei',
+        jun: 'Jun',
+        jul: 'Jul',
+        aug: 'Aug',
+        sep: 'Sep',
+        oct: 'Okt',
+        nov: 'Nov',
+        dec: 'Des'
+      }
+    },
+    select: {
+      loading: 'Laai',
+      noMatch: 'Geen toepaslike data',
+      noData: 'Geen data',
+      placeholder: 'Kies'
+    },
+    cascader: {
+      noMatch: 'Geen toepaslike data',
+      loading: 'Laai',
+      placeholder: 'Kies',
+      noData: 'Geen data'
+    },
+    pagination: {
+      goto: 'Gaan na',
+      pagesize: '/page',
+      total: 'Totaal {total}',
+      pageClassifier: ''
+    },
+    messagebox: {
+      title: 'Boodskap',
+      confirm: 'Bevestig',
+      cancel: 'Kanselleer',
+      error: 'Ongeldige invoer'
+    },
+    upload: {
+      deleteTip: 'press delete to remove', // to be translated
+      delete: 'Verwyder',
+      preview: 'Voorskou',
+      continue: 'Gaan voort'
+    },
+    table: {
+      emptyText: 'Geen Data',
+      confirmFilter: 'Bevestig',
+      resetFilter: 'Herstel',
+      clearFilter: 'Alles',
+      sumText: 'Som'
+    },
+    tree: {
+      emptyText: 'Geen Data'
+    },
+    transfer: {
+      noMatch: 'Geen toepaslike data',
+      noData: 'Geen data',
+      titles: ['Lys 1', 'Lys 2'],
+      filterPlaceholder: 'Voer sleutelwoord in',
+      noCheckedFormat: '{total} items',
+      hasCheckedFormat: '{checked}/{total} gekies'
+    },
+    image: {
+      error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
+    }
+  }
+};