Refactoring of i18n (#3165)

Refactoring of i18n

4 files changed, 36 insertions, 27 deletions

diff --git a/src/client/app/dev/views/app.vue b/src/client/app/dev/views/app.vue
index 54d99ec82a..4aced2274b 100644
--- a/src/client/app/dev/views/app.vue
+++ b/src/client/app/dev/views/app.vue
@@ -1,6 +1,6 @@
 <template>
 <mk-ui>
-	<p v-if="fetching">%i18n:common.loading%</p>
+	<p v-if="fetching">{{ $t('@.loading') }}</p>
 	<b-card v-if="!fetching" :header="app.name">
 		<b-form-group label="App Secret">
 			<b-input :value="app.secret" readonly/>
@@ -11,7 +11,9 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import i18n from '../../i18n';
 export default Vue.extend({
+	i18n: i18n(),
 	data() {
 		return {
 			fetching: true,
diff --git a/src/client/app/dev/views/apps.vue b/src/client/app/dev/views/apps.vue
index d68191aa6c..4c8de9d48e 100644
--- a/src/client/app/dev/views/apps.vue
+++ b/src/client/app/dev/views/apps.vue
@@ -1,12 +1,12 @@
 <template>
 <mk-ui>
-	<b-card header="%i18n:@manage-apps%">
-		<b-button to="/app/new" variant="primary">%i18n:@create-app%</b-button>
+	<b-card :header="$t('header')">
+		<b-button to="/app/new" variant="primary">{{ $t('create-app') }}</b-button>
 		<hr>
 		<div class="apps">
-			<p v-if="fetching">%i18n:common.loading%</p>
+			<p v-if="fetching">{{ $t('@.loading') }}</p>
 			<template v-if="!fetching">
-				<b-alert v-if="apps.length == 0">%i18n:@app-missing%</b-alert>
+				<b-alert v-if="apps.length == 0">{{ $t('app-missing') }}</b-alert>
 				<b-list-group v-else>
 					<b-list-group-item v-for="app in apps" :key="app.id" :to="`/app/${app.id}`">
 						{{ app.name }}
@@ -20,7 +20,9 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import i18n from '../../i18n';
 export default Vue.extend({
+	i18n: i18n('dev/views/apps.vue'),
 	data() {
 		return {
 			fetching: true,
diff --git a/src/client/app/dev/views/index.vue b/src/client/app/dev/views/index.vue
index bb137481f4..db0e4d57c2 100644
--- a/src/client/app/dev/views/index.vue
+++ b/src/client/app/dev/views/index.vue
@@ -1,10 +1,13 @@
 <template>
 <mk-ui>
-	<b-button to="/apps" variant="primary">%i18n:@manage-apps%</b-button>
+	<b-button to="/apps" variant="primary">{{ $t('manage-apps') }}</b-button>
 </mk-ui>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
-export default Vue.extend();
+import i18n from '../../i18n';
+export default Vue.extend({
+	i18n: i18n('dev/views/index.vue')
+});
 </script>
diff --git a/src/client/app/dev/views/new-app.vue b/src/client/app/dev/views/new-app.vue
index 6c1844b6cf..382d54fd67 100644
--- a/src/client/app/dev/views/new-app.vue
+++ b/src/client/app/dev/views/new-app.vue
@@ -1,34 +1,34 @@
 <template>
 <mk-ui>
-	<b-card header="%i18n:@create-app%">
+	<b-card :header="$t('header')">
 		<b-form @submit.prevent="onSubmit" autocomplete="off">
-			<b-form-group label="%i18n:@app-name%" description="%i18n:@app-name-desc%">
-				<b-form-input v-model="name" type="text" placeholder="%i18n:@app-name-ex%" autocomplete="off" required/>
+			<b-form-group :label="$t('label')" :description="$t('description')">
+				<b-form-input v-model="name" type="text" :placeholder="$t('placeholder')" autocomplete="off" required/>
 			</b-form-group>
-			<b-form-group label="%i18n:@app-overview%" description="%i18n:@app-desc%">
-				<b-textarea v-model="description" placeholder="%i18n:@app-desc-ex%" autocomplete="off" required></b-textarea>
+			<b-form-group :label="$t('label')" :description="$t('description')">
+				<b-textarea v-model="description" :placeholder="$t('placeholder')" autocomplete="off" required></b-textarea>
 			</b-form-group>
-			<b-form-group label="%i18n:@callback-url%" description="%i18n:@callback-url-desc%">
+			<b-form-group :label="$t('label')" :description="$t('description')">
 				<b-input v-model="cb" type="url" placeholder="ex) https://your.app.example.com/callback.php" autocomplete="off"/>
 			</b-form-group>
-			<b-card header="%i18n:@authority%">
-				<b-form-group description="%i18n:@authority-desc%">
-					<b-alert show variant="warning"><fa icon="exclamation-triangle"/> %i18n:@authority-warning%</b-alert>
+			<b-card :header="$t('header')">
+				<b-form-group :description="$t('description')">
+					<b-alert show variant="warning"><fa icon="exclamation-triangle"/> {{ $t('authority-warning') }}</b-alert>
 					<b-form-checkbox-group v-model="permission" stacked>
-						<b-form-checkbox value="account-read">%i18n:@account-read%</b-form-checkbox>
-						<b-form-checkbox value="account-write">%i18n:@account-write%</b-form-checkbox>
-						<b-form-checkbox value="note-write">%i18n:@note-write%</b-form-checkbox>
-						<b-form-checkbox value="reaction-write">%i18n:@reaction-write%</b-form-checkbox>
-						<b-form-checkbox value="following-write">%i18n:@following-write%</b-form-checkbox>
-						<b-form-checkbox value="drive-read">%i18n:@drive-read%</b-form-checkbox>
-						<b-form-checkbox value="drive-write">%i18n:@drive-write%</b-form-checkbox>
-						<b-form-checkbox value="notification-read">%i18n:@notification-read%</b-form-checkbox>
-						<b-form-checkbox value="notification-write">%i18n:@notification-write%</b-form-checkbox>
+						<b-form-checkbox value="account-read">{{ $t('account-read') }}</b-form-checkbox>
+						<b-form-checkbox value="account-write">{{ $t('account-write') }}</b-form-checkbox>
+						<b-form-checkbox value="note-write">{{ $t('note-write') }}</b-form-checkbox>
+						<b-form-checkbox value="reaction-write">{{ $t('reaction-write') }}</b-form-checkbox>
+						<b-form-checkbox value="following-write">{{ $t('following-write') }}</b-form-checkbox>
+						<b-form-checkbox value="drive-read">{{ $t('drive-read') }}</b-form-checkbox>
+						<b-form-checkbox value="drive-write">{{ $t('drive-write') }}</b-form-checkbox>
+						<b-form-checkbox value="notification-read">{{ $t('notification-read') }}</b-form-checkbox>
+						<b-form-checkbox value="notification-write">{{ $t('notification-write') }}</b-form-checkbox>
 					</b-form-checkbox-group>
 				</b-form-group>
 			</b-card>
 			<hr>
-			<b-button type="submit" variant="primary">%i18n:@create-app%</b-button>
+			<b-button type="submit" variant="primary">{{ $t('create-app') }}</b-button>
 		</b-form>
 	</b-card>
 </mk-ui>
@@ -36,7 +36,9 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import i18n from '../../i18n';
 export default Vue.extend({
+	i18n: i18n('dev/views/new-app.vue'),
 	data() {
 		return {
 			name: '',
@@ -56,7 +58,7 @@ export default Vue.extend({
 			}).then(() => {
 				location.href = '/dev/apps';
 			}).catch(() => {
-				alert('%i18n:common.dev.failed-to-create%');
+				alert(this.$t('@.dev.failed-to-create'));
 			});
 		}
 	}