feat(i18n): support multi line comments in i18n magic comments

closes #44
vuesion · Feb 18, 2018 · bfdc4f8 · bfdc4f8
1 parent 0c4531e
commit bfdc4f8
Show file tree

Hide file tree

Showing 9 changed files with 182 additions and 117 deletions.
diff --git a/i18n/de-DE.json b/i18n/de-DE.json
@@ -12,5 +12,20 @@
   "components.calendar.sunday.short": "S",
   "components.calendar.thursday.short": "D",
   "components.calendar.tuesday.short": "D",
-  "components.calendar.wednesday.short": "M"
+  "components.calendar.wednesday.short": "M",
+  "components.forms": "Formulare",
+  "components.register.cancellationText": "Abbrechen",
+  "components.register.consent": "Ja, Sie können mich kontaktieren",
+  "components.register.email": "E-mail",
+  "components.register.email.invalidText": "Ungültige E-mail Adresse",
+  "components.register.name": "Name",
+  "components.register.name.invalidText": "Bitte Vor- und Nachnamen angeben",
+  "components.register.phone": "Telefon",
+  "components.register.phone.invalidText": "Ungültige Telefonnummer",
+  "components.register.submit.notification.text": "Wir haben Dir eine E-mail an {email} gesendet.",
+  "components.register.submit.notification.title": "Hallo {name}!",
+  "components.register.submitText": "Registrieren",
+  "components.register.subtitle": "Bitte alle benötigten Felder ausfüllen",
+  "components.register.terms": "Ich akzeptiere die <a href='/terms'>AGBs</a>",
+  "components.register.title": "Registrieren"
 }
diff --git a/i18n/en-EN.json b/i18n/en-EN.json
@@ -12,5 +12,20 @@
   "components.calendar.sunday.short": "S",
   "components.calendar.thursday.short": "T",
   "components.calendar.tuesday.short": "T",
-  "components.calendar.wednesday.short": "W"
+  "components.calendar.wednesday.short": "W",
+  "components.forms": "Forms",
+  "components.register.cancellationText": "Cancel",
+  "components.register.consent": "I consent to get contacted",
+  "components.register.email": "Email",
+  "components.register.email.invalidText": "This is not a valid email address!",
+  "components.register.name": "Name",
+  "components.register.name.invalidText": "Please provide first and last name",
+  "components.register.phone": "Phone",
+  "components.register.phone.invalidText": "This is not a valid phone number!",
+  "components.register.submit.notification.text": "We've sent an email to: {email}!",
+  "components.register.submit.notification.title": "Hey {name}!",
+  "components.register.submitText": "Submit",
+  "components.register.subtitle": "Please fill in all required fields",
+  "components.register.terms": "I accept the <a href='/terms'>Terms and Conditions</a>",
+  "components.register.title": "Register"
 }
diff --git a/i18n/pt-BR.json b/i18n/pt-BR.json
@@ -12,5 +12,20 @@
   "components.calendar.sunday.short": "S",
   "components.calendar.thursday.short": "T",
   "components.calendar.tuesday.short": "T",
-  "components.calendar.wednesday.short": "W"
+  "components.calendar.wednesday.short": "W",
+  "components.forms": "Forms",
+  "components.register.cancellationText": "Cancel",
+  "components.register.consent": "I consent to get contacted",
+  "components.register.email": "Email",
+  "components.register.email.invalidText": "This is not a valid email address!",
+  "components.register.name": "Name",
+  "components.register.name.invalidText": "Please provide first and last name",
+  "components.register.phone": "Phone",
+  "components.register.phone.invalidText": "This is not a valid phone number!",
+  "components.register.submit.notification.text": "We've sent an email to: {email}!",
+  "components.register.submit.notification.title": "Hey\n            {name}!",
+  "components.register.submitText": "Submit",
+  "components.register.subtitle": "Please fill in all required fields",
+  "components.register.terms": "I accept the <a href='/terms'>Terms and Conditions</a>",
+  "components.register.title": "Register"
 }
diff --git a/package.json b/package.json
@@ -14,7 +14,12 @@
     "typescript",
     "server-side-rendering",
     "boilerplate",
-    "jest"
+    "jest",
+    "enterprise",
+    "datepicker",
+    "slider",
+    "forms",
+    "components"
   ],
   "author": "Johannes Werner <johannes.werner86@gmail.com>",
   "license": "MIT",

diff --git a/src/app/components/Components/Components.spec.ts b/src/app/components/Components/Components.spec.ts
@@ -18,24 +18,24 @@ describe('Components.vue', () => {
       mocks: {
         $style,
       },
-    });
+    }) as any;
 
-    (wrapper as any).vm.sliderChange();
-    (wrapper as any).vm.calendarChange();
-    (wrapper as any).vm.addNotificationClick();
-    (wrapper as any).vm.selectChange();
-    (wrapper as any).vm.formSubmit({ name: 'foo', email: 'bar' }, () => {
+    wrapper.vm.sliderChange();
+    wrapper.vm.calendarChange();
+    wrapper.vm.addNotificationClick();
+    wrapper.vm.selectChange();
+    wrapper.vm.formSubmit({ name: 'foo', email: 'bar' }, () => {
       return true;
     });
-    (wrapper as any).vm.formReset();
+    wrapper.vm.formReset();
 
-    wrapper.vm.$data.registerSchema.elements.forEach((element: IFormElement) => {
+    wrapper.vm.registerSchema.elements.forEach((element: IFormElement) => {
       if (element.isValid) {
         element.isValid('');
       }
     });
 
-    wrapper.vm.$data.loginSchema.elements.forEach((element: IFormElement) => {
+    wrapper.vm.loginSchema.elements.forEach((element: IFormElement) => {
       if (element.isValid) {
         element.isValid('');
       }

diff --git a/src/app/components/Components/Components.vue b/src/app/components/Components/Components.vue
@@ -296,11 +296,11 @@
       </vue-grid-item>
 
       <vue-grid-item>
-        <div class="h1">Forms</div>
+        <div class="h1">{{ $t('components.forms' /*Forms*/) }}</div>
         <vue-form :schema="registerSchema" @submit="formSubmit" @reset="formReset" />
       </vue-grid-item>
       <vue-grid-item>
-        <div class="h1">Forms</div>
+        <div class="h1">{{ $t('components.forms' /*Forms*/) }}</div>
         <vue-form :schema="loginSchema" />
       </vue-grid-item>
     </vue-grid>
@@ -375,6 +375,96 @@
       nextWeek(): Date {
         return new Date(this.today.getTime() + 7 * 24 * 60 * 60 * 1000);
       },
+      registerSchema(): IFormSchema {
+        return {
+          cancellationText: this.$t('components.register.cancellationText' /*Cancel*/),
+          submitText:       this.$t('components.register.submitText' /*Submit*/),
+          id:               'myForm',
+          name:             'myForm',
+          title:            this.$t('components.register.title' /*Register*/),
+          subtitle:         this.$t('components.register.subtitle' /*Please fill in all required fields*/),
+          elements:         [
+            {
+              type:        'vue-input',
+              model:       'name',
+              required:    true,
+              label:       this.$t('components.register.name' /*Name*/),
+              inputType:   'text',
+              isValid(value: string) {
+                return value.trim().indexOf(' ') > -1;
+              },
+              invalidText: this.$t('components.register.name.invalidText' /*Please provide first and last name*/),
+            },
+            {
+              type:        'vue-input',
+              model:       'phone',
+              required:    false,
+              label:       this.$t('components.register.phone' /*Phone*/),
+              inputType:   'phone',
+              isValid(value: string) {
+                return isPhoneNumberValid(value);
+              },
+              invalidText: this.$t('components.register.phone.invalidText' /*This is not a valid phone number!*/),
+            },
+            {
+              type:        'vue-input',
+              model:       'email',
+              required:    true,
+              label:       this.$t('components.register.email' /*Email*/),
+              inputType:   'email',
+              isValid(value: string) {
+                return isEmailValid(value);
+              },
+              invalidText: this.$t('components.register.email.invalidText' /*This is not a valid email address!*/),
+            },
+            {
+              type:     'vue-check-box',
+              model:    'terms',
+              required: true,
+              label:    this.$t('components.register.terms' /*I accept the <a href="/terms">Terms and Conditions</a>*/),
+              value:    false,
+            },
+            {
+              type:     'vue-check-box',
+              model:    'consent',
+              required: false,
+              label:    this.$t('components.register.consent' /*I consent to get contacted*/),
+              value:    false,
+            },
+          ],
+        };
+      },
+      loginSchema(): IFormSchema {
+        return {
+          submitText: 'Login',
+          id:         'loginForm',
+          name:       'loginForm',
+          title:      'Login',
+          elements:   [
+            {
+              type:        'vue-input',
+              model:       'email2',
+              required:    true,
+              label:       'Email',
+              inputType:   'email',
+              isValid(value: string) {
+                return isEmailValid(value);
+              },
+              invalidText: 'This is not a valid email address!',
+            },
+            {
+              type:      'vue-input',
+              model:     'password2',
+              required:  true,
+              label:     'Password',
+              inputType: 'password',
+              isValid(value: string) {
+                return value.length > 3;
+              },
+            },
+          ],
+        };
+      },
     },
     data() {
       return {
@@ -406,94 +496,6 @@
           },
         ],
         inputValue:   'test',
-        registerSchema:
-                      {
-                        cancellationText: 'Cancel',
-                        submitText:       'Submit',
-                        id:               'myForm',
-                        name:             'myForm',
-                        title:            'Register',
-                        subtitle:         'Please fill in all required fields',
-                        elements:         [
-                          {
-                            type:        'vue-input',
-                            model:       'name',
-                            required:    true,
-                            label:       'Name',
-                            inputType:   'text',
-                            isValid(value: string) {
-                              return value.trim().indexOf(' ') > -1;
-                            },
-                            invalidText: 'Please provide first and last name',
-                          },
-                          {
-                            type:        'vue-input',
-                            model:       'phone',
-                            required:    false,
-                            label:       'Phone',
-                            inputType:   'phone',
-                            isValid(value: string) {
-                              return isPhoneNumberValid(value);
-                            },
-                            invalidText: 'This is not a valid phone number!',
-                          },
-                          {
-                            type:        'vue-input',
-                            model:       'email',
-                            required:    true,
-                            label:       'Email',
-                            inputType:   'email',
-                            isValid(value: string) {
-                              return isEmailValid(value);
-                            },
-                            invalidText: 'This is not a valid email address!',
-                          },
-                          {
-                            type:     'vue-check-box',
-                            model:    'terms',
-                            required: true,
-                            label:    'I accept the <a href="/terms">Terms and Conditions</a>',
-                            value:    false,
-                          },
-                          {
-                            type:     'vue-check-box',
-                            model:    'consent',
-                            required: false,
-                            label:    'I consent to get contacted',
-                            value:    false,
-                          },
-                        ],
-                      } as IFormSchema,
-        loginSchema:
-                      {
-                        submitText: 'Login',
-                        id:         'loginForm',
-                        name:       'loginForm',
-                        title:      'Login',
-                        elements:   [
-                          {
-                            type:        'vue-input',
-                            model:       'email',
-                            required:    true,
-                            label:       'Email',
-                            inputType:   'email',
-                            isValid(value: string) {
-                              return isEmailValid(value);
-                            },
-                            invalidText: 'This is not a valid email address!',
-                          },
-                          {
-                            type:      'vue-input',
-                            model:     'password',
-                            required:  true,
-                            label:     'Password',
-                            inputType: 'password',
-                            isValid(value: string) {
-                              return value.length > 3;
-                            },
-                          },
-                        ],
-                      } as IFormSchema,
       };
     },
     methods:    {
@@ -520,8 +522,9 @@
       formSubmit(model: any, reset: any) {
         addNotification(
           {
-            title: `Hey ${model.name}!`,
-            text:  `We've sent an email to: ${model.email}.`,
+            title: this.$t('components.register.submit.notification.title', model /*Hey
+            {name}!*/),
+            text:  this.$t('components.register.submit.notification.text', model /*We've sent an email to: {email}!*/),
           } as INotification,
         );
         reset();

diff --git a/src/app/home/Stage/Stage.vue b/src/app/home/Stage/Stage.vue
@@ -5,8 +5,10 @@
     <div :class="$style.accentTwo"></div>
 
     <h1 :class="$style.title">Vue.js Starter</h1>
-    <div :class="$style.subTitle">{{ $t('App.core.description' /*an enterprise ready boilerplate for isomorphic,
-                                  progressive web apps with Vue.JS*/) }}
+    <div :class="$style.subTitle">
+      {{
+      $t('App.core.description' /*an enterprise ready boilerplate for isomorphic, progressive web apps with Vue.JS*/)
+      }}
     </div>
 
     <a :class="$style.github" href="https://github.com/devCrossNet/vue-starter" target="_blank" rel="noopener"

diff --git a/src/app/shared/components/VueForm/VueForm.vue b/src/app/shared/components/VueForm/VueForm.vue
@@ -34,13 +34,13 @@
 </template>
 
 <script lang="ts">
-  import VuePanel         from '../VuePanel/VuePanel.vue';
-  import VuePanelHeader   from '../VuePanel/VuePanelHeader/VuePanelHeader.vue';
-  import VuePanelBody     from '../VuePanel/VuePanelBody/VuePanelBody.vue';
-  import VueInput         from '../VueInput/VueInput.vue';
-  import VueCheckBox      from '../VueCheckBox/VueCheckBox.vue';
-  import VueButton        from '../VueButton/VueButton.vue';
-  import { IFormElement } from './IFormSchema';
+  import VuePanel                      from '../VuePanel/VuePanel.vue';
+  import VuePanelHeader                from '../VuePanel/VuePanelHeader/VuePanelHeader.vue';
+  import VuePanelBody                  from '../VuePanel/VuePanelBody/VuePanelBody.vue';
+  import VueInput                      from '../VueInput/VueInput.vue';
+  import VueCheckBox                   from '../VueCheckBox/VueCheckBox.vue';
+  import VueButton                     from '../VueButton/VueButton.vue';
+  import { IFormElement, IFormSchema } from './IFormSchema';
 
   export default {
     name:       'VueForm',
@@ -156,6 +156,14 @@
     created() {
       this.reset();
     },
+    watch:      {
+      schema(newSchema: IFormSchema) {
+        this.$data.elements.forEach((element: IFormElement, idx: number) => {
+          element.invalidText = newSchema.elements[idx].invalidText;
+          element.label = newSchema.elements[idx].label;
+        });
+      },
+    },
   };
 </script>