Skip to content

Commit f2c0c8e

Browse files
johnnymillerghjohnnymillergh
committed
feat($i18n): internationalization i18n support
Languages support: 1. Afrikaans 2. English 3. Simplified Chinese BREAKING CHANGE: internationalization i18n support.
1 parent 4fce3aa commit f2c0c8e

File tree

8 files changed

+202
-7
lines changed

8 files changed

+202
-7
lines changed

‎src/i18n/afrikaans/index.ts‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import VuetifyDemo from '@/i18n/afrikaans/views/vuetify-demo'
2+
3+
export default {
4+
close: 'Close',
5+
dataIterator: {
6+
noResultsText: 'Geen ooreenstemmende resultate is gevind nie',
7+
loadingText: 'Loading item...'
8+
},
9+
dataTable: {
10+
itemsPerPageText: 'Rye per bladsy:',
11+
ariaLabel: {
12+
sortDescending: ': Sorted descending. Activate to remove sorting.',
13+
sortAscending: ': Sorted ascending. Activate to sort descending.',
14+
sortNone: ': Not sorted. Activate to sort ascending.'
15+
},
16+
sortBy: 'Sort by'
17+
},
18+
dataFooter: {
19+
itemsPerPageText: 'Aantal per bladsy:',
20+
itemsPerPageAll: 'Alles',
21+
nextPage: 'Volgende bladsy',
22+
prevPage: 'Vorige bladsy',
23+
firstPage: 'Eerste bladsy',
24+
lastPage: 'Laaste bladsy',
25+
pageText: '{0}-{1} van {2}'
26+
},
27+
datePicker: {
28+
itemsSelected: '{0} gekies'
29+
},
30+
noDataText: 'Geen data is beskikbaar nie',
31+
carousel: {
32+
prev: 'Vorige visuele',
33+
next: 'Volgende visuele',
34+
ariaLabel: {
35+
delimiter: 'Carousel slide {0} of {1}'
36+
}
37+
},
38+
calendar: {
39+
moreEvents: '{0} meer'
40+
},
41+
fileInput: {
42+
counter: '{0} files',
43+
counterSize: '{0} files ({1} in total)'
44+
},
45+
timePicker: {
46+
am: 'AM',
47+
pm: 'PM'
48+
},
49+
...VuetifyDemo
50+
}

‎src/i18n/afrikaans/views/vuetify-demo.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
export default {
2+
chip: {
3+
default: 'Default',
4+
close: 'Close',
5+
outlined: 'Outlined',
6+
filter: 'Filter',
7+
avatar: 'Avatar',
8+
icon: 'Icon'
9+
}
10+
}

‎src/i18n/english/index.ts‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import VuetifyDemo from '@/i18n/english/views/vuetify-demo'
2+
3+
export default {
4+
close: 'Close',
5+
dataIterator: {
6+
noResultsText: 'No matching records found',
7+
loadingText: 'Loading items...'
8+
},
9+
dataTable: {
10+
itemsPerPageText: 'Rows per page:',
11+
ariaLabel: {
12+
sortDescending: ': Sorted descending. Activate to remove sorting.',
13+
sortAscending: ': Sorted ascending. Activate to sort descending.',
14+
sortNone: ': Not sorted. Activate to sort ascending.'
15+
},
16+
sortBy: 'Sort by'
17+
},
18+
dataFooter: {
19+
itemsPerPageText: 'Items per page:',
20+
itemsPerPageAll: 'All',
21+
nextPage: 'Next page',
22+
prevPage: 'Previous page',
23+
firstPage: 'First page',
24+
lastPage: 'Last page',
25+
pageText: '{0}-{1} of {2}'
26+
},
27+
datePicker: {
28+
itemsSelected: '{0} selected'
29+
},
30+
noDataText: 'No data available',
31+
carousel: {
32+
prev: 'Previous visual',
33+
next: 'Next visual',
34+
ariaLabel: {
35+
delimiter: 'Carousel slide {0} of {1}'
36+
}
37+
},
38+
calendar: {
39+
moreEvents: '{0} more'
40+
},
41+
fileInput: {
42+
counter: '{0} files',
43+
counterSize: '{0} files ({1} in total)'
44+
},
45+
timePicker: {
46+
am: 'AM',
47+
pm: 'PM'
48+
},
49+
...VuetifyDemo
50+
}

‎src/i18n/english/views/vuetify-demo.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
export default {
2+
chip: {
3+
default: 'Default',
4+
close: 'Close',
5+
outlined: 'Outlined',
6+
filter: 'Filter',
7+
avatar: 'Avatar',
8+
icon: 'Icon'
9+
}
10+
}

‎src/i18n/simplified-chinese/index.ts‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import VuetifyDemo from '@/i18n/simplified-chinese/views/vuetify-demo'
2+
3+
export default {
4+
close: '关闭',
5+
dataIterator: {
6+
noResultsText: '没有符合条件的结果',
7+
loadingText: '加载中……'
8+
},
9+
dataTable: {
10+
itemsPerPageText: '每页数目：',
11+
ariaLabel: {
12+
sortDescending: '：降序排列。点击以移除排序。',
13+
sortAscending: '：升序排列。点击以降序排列。',
14+
sortNone: '：未排序。点击以升序排列。'
15+
},
16+
sortBy: '排序方式'
17+
},
18+
dataFooter: {
19+
itemsPerPageText: '每页数目：',
20+
itemsPerPageAll: '全部',
21+
nextPage: '下一页',
22+
prevPage: '上一页',
23+
firstPage: '首页',
24+
lastPage: '尾页',
25+
pageText: '{0}-{1} 共 {2}'
26+
},
27+
datePicker: {
28+
itemsSelected: '已选择 {0}'
29+
},
30+
noDataText: '没有数据',
31+
carousel: {
32+
prev: '上一张',
33+
next: '下一张',
34+
ariaLabel: {
35+
delimiter: 'Carousel slide {0} of {1}'
36+
}
37+
},
38+
calendar: {
39+
moreEvents: '还有 {0} 项'
40+
},
41+
fileInput: {
42+
counter: '{0} 个文件',
43+
counterSize: '{0} 个文件（共 {1}）'
44+
},
45+
timePicker: {
46+
am: 'AM',
47+
pm: 'PM'
48+
},
49+
...VuetifyDemo
50+
}

‎src/i18n/simplified-chinese/views/vuetify-demo.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
export default {
2+
chip: {
3+
default: '默认',
4+
close: '关闭',
5+
outlined: '外框',
6+
filter: '过滤',
7+
avatar: '头像',
8+
icon: '图标'
9+
}
10+
}

‎src/plugins/vuetify/index.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,17 @@ import Vue from 'vue'
22
import Vuetify from 'vuetify/lib'
33
import { ColorSchemeUtil } from '@/utils/color-scheme-util'
44
import { darkTheme, lightTheme } from '@/plugins/vuetify/theme'
5+
import Afrikaans from '@/i18n/afrikaans'
6+
import English from '@/i18n/english'
7+
import SimplifiedChinese from '@/i18n/simplified-chinese'
58

69
Vue.use(Vuetify)
710

811
export default new Vuetify({
12+
lang: {
13+
locales: { Afrikaans, English, SimplifiedChinese },
14+
current: 'SimplifiedChinese'
15+
},
916
theme: {
1017
dark: ColorSchemeUtil.isDarkMode(),
1118
options: {

‎src/views/VuetifyDemo.vue‎

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -16,17 +16,17 @@
1616
{{ windowSize }}
1717
</v-row>
1818
<v-row id="chip-container" justify="center">
19-
<v-chip>Default</v-chip>
20-
<v-chip close>Close</v-chip>
21-
<v-chip outlined>Outlined</v-chip>
22-
<v-chip v-model="value" filter>Filter</v-chip>
19+
<v-chip>{{ $vuetify.lang.t('$vuetify.chip.default') }}</v-chip>
20+
<v-chip close>{{ $vuetify.lang.t('$vuetify.chip.close') }}</v-chip>
21+
<v-chip outlined>{{ $vuetify.lang.t('$vuetify.chip.outlined') }}</v-chip>
22+
<v-chip v-model="value" filter>{{ $vuetify.lang.t('$vuetify.chip.filter') }}</v-chip>
2323
<v-chip pill>
2424
<v-avatar left color="red">P</v-avatar>
25-
Pill
25+
{{ $vuetify.lang.t('$vuetify.chip.avatar') }}
2626
</v-chip>
2727
<v-chip>
2828
<v-icon left color="red">mdi-account</v-icon>
29-
Icon
29+
{{ $vuetify.lang.t('$vuetify.chip.icon') }}
3030
</v-chip>
3131
</v-row>
3232
<v-card id="card-container" class="mx-auto" max-width="344" outlined>
@@ -109,7 +109,9 @@
109109
</v-col>
110110
</v-row>
111111
<v-radio-group v-model="radioGroup">
112-
<v-radio v-for="n in 3" :key="n" :label="`Radio ${n}`" :value="n"/>
112+
<v-radio label="Afrikaans" value="Afrikaans"/>
113+
<v-radio label="English" value="English"/>
114+
<v-radio label="Simplified Chinese" value="SimplifiedChinese"/>
113115
</v-radio-group>
114116
<v-container fluid>
115117
<v-switch v-model="darkModeSwitch" :label="`darkModeSwitch: ${darkModeSwitch.toString()}`"/>
@@ -144,6 +146,12 @@ export default Vue.extend({
144146
handler (newDarkModeSwitch) {
145147
this.$vuetify.theme.dark = newDarkModeSwitch
146148
}
149+
},
150+
radioGroup: {
151+
deep: true,
152+
handler (newRadioGroup) {
153+
this.$vuetify.lang.current = newRadioGroup
154+
}
147155
}
148156
},
149157
methods: {

0 commit comments

Comments
 (0)