save in localstorage and emit change from children to father

Author: leonardovilarinho

README-PT.md

@@ -14,10 +14,6 @@ Use o seguinte comando para instalar o plugin como dependência:
 
 	npm install vue-multilanguage --save
 
-#### Para instalação standalone
-
-Para instalar, copie o arquivo `src/es6.js` para sua pasta de plugins.
-
 
 ### Começando
 
@@ -61,7 +57,7 @@ Podemos ainda definir parâmetros sem nome, usando `{0}`, assim na diretiva pass
 </template>
 <script>
 	export default {
-		data() { return {} }
+		data() { return {} },
 		messages: {
 			en: {
 				hi: 'Hello'
@@ -84,7 +80,7 @@ Você também pode incorporar o idioma padrão diretamente no seu template, desd
 </template>
 <script>
 	export default {
-		data() { return {} }
+		data() { return {} },
 		messages: {
 			pt: {
 				hi: 'Olá'
@@ -114,7 +110,7 @@ Note que você ainda pode usar substituições ao configurar mensagens padrão c
 ```
 
 ### Uso na programação
-Existe um método `translate 'que você pode usar para recuperar uma tradução. Por exemplo:
+Existe um método `translate` que você pode usar para recuperar uma tradução. Por exemplo:
 
 ```js
 computed: {
@@ -124,11 +120,45 @@ computed: {
 }
 ```
 
+### Alterando a linguagem atual
+
 Para alterar a linguagem atualmente usada pelo sistema altere o valor da opção `$language` em qualquer um de seus componentes por exemplo:
 
 	this.$language = 'en'
 
-A linguagem padrão será pego automaticamente no navegador do cliente, caso não encontre-mos, o primeiro idioma da lista será usado.
+A partir da versão 2.2.3, todo componente que mudar a linguagem estará disparando um `$emit` nomeado `changeLang`, facilitando assim que filhos que alteram o idioma do site propaguem a alteração para seu pai, por exemplo:
+
+```vue
+<template>
+    <div id="app">
+    <h1 v-lang.title.project v-show="false"></h1>
+    ...
+    <lv-side-menu @changeLang="changeLanguage"></lv-side-menu>
+    ...
+    </div>
+</template>
+
+<script>
+import LvSideMenu from './components/template/SideMenu.vue'
+export default {
+    name: 'app',
+    components: { LvSideMenu },
+    methods: {
+        changeLanguage(lang) {
+            this.$language = lang
+        }
+    },
+}
+</script>
+```
+
+No exemplo dado, o componente `App` é pai de `LvSideMenu`, esse filho tratará de mudar o idioma do site, então ele emitirá o evento `changeLang`, que deve ser captado pelo pai para que a linguagem definida pelo filho seja propagada.
+
+**Nota:** Veja que em `App` tenho o elemento oculto `h1`, ele faz uso da diretiva `v-lang`, pois sem ela o componente não seria atualizado.
+
+### LocalStorage
+
+A partir da versão 2.2.3 do vue-multilanguage, estamos gravando a linguagem atual na variável `vue-lang` do localStorage, fazendo com que mesmo ao atualizar a página a linguagem permaneça ativa.
 
 ### Contribuindo
 

README.md

@@ -126,12 +126,54 @@ computed: {
 	}
 }
 ```
+
+### Change the current language
+
 To change the language currently used by the system, change the `$ language` option value to any of its components, for example:
+
 ```js
 this.$language = 'en'
 ```
+
 If you don't set a default language on the language object, the default language will be automatically picked up in the client browser. If no language can still be found or you're in a JavaScript environment outside the browser (such as Node.js), then the default language becomes the first language listed.
 
+	this.$language = 'en'
+
+As of version 2.2.3, the whole thing is to change the language by firing a `$emit` named `changeLang`, thus making it easier for children who change the language of the site to propagate a change to their parent, for example:
+
+```vue
+<template>
+    <div id="app">
+    <h1 v-lang.title.project v-show="false"></h1>
+    ...
+    <lv-side-menu @changeLang="changeLanguage"></lv-side-menu>
+    ...
+    </div>
+</template>
+
+<script>
+import LvSideMenu from './components/template/SideMenu.vue'
+export default {
+    name: 'app',
+    components: { LvSideMenu },
+    methods: {
+        changeLanguage(lang) {
+            this.$language = lang
+        }
+    },
+}
+</script>
+```
+
+In the example given, the `App` component is the parent of `LvSideMenu`, this child will try to change the language of the site, then it will issue the `changeLang` event, which must be captured by the parent so that the language defined by the child is propagated .
+
+
+**Note:** See that in `App` I have the `h1` hidden element, it makes use of the `v-lang` directive, because without it the component would not be updated.
+
+### LocalStorage
+
+As of version 2.2.3 of vue-multilanguage, we are writing the current language in the `vue-lang` variable of the localStorage, causing even the page refresh language to remain active.
+
 ### Contributing
 
 To help in the development and expansion of this repository take a FORK to your account, after you have made your modifications do a PULL REQUEST, it will be parsed and included here since it helps the plugin.

demo/src/App.vue

@@ -2,7 +2,7 @@
   <div id="app">
     <lv-menu-top></lv-menu-top>
     <lv-content></lv-content>
-    <lv-menu-bottom></lv-menu-bottom>
+    <lv-menu-bottom @changeLang="changeLanguage"></lv-menu-bottom>
   </div>
 </template>
 
@@ -13,6 +13,11 @@ import LvContent from './Content.vue'
 
 export default {
   name: 'app',
-  components: {LvMenuTop, LvMenuBottom, LvContent}
+  components: {LvMenuTop, LvMenuBottom, LvContent},
+  methods: {
+    changeLanguage(lang) {
+      this.$language = lang
+    }
+  },
 }
 </script>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-multilanguage",
-  "version": "2.2.2",
+  "version": "2.2.3",
   "description": "Multilanguage easy support to VueJS 2",
   "main": "dist/vue-multilanguage.js",
   "module": "src/vue-multilanguage.js",
@@ -19,8 +19,8 @@
     "front-end"
   ],
   "author": "Leonardo Vilarinho",
-  "contributors": [{ 
-    "name": "Matthew Dean", 
+  "contributors": [{
+    "name": "Matthew Dean",
     "url": "https://github.com/matthew-dean"
   }],
   "license": "ISC",

src/vue-multilanguage.js

@@ -1,14 +1,14 @@
-"use strict";
+'use strict';
 
-Object.defineProperty(exports, "__esModule", {
+Object.defineProperty(exports, '__esModule', {
   value: true
 });
 
-var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
+var _typeof = typeof Symbol === 'function' && typeof Symbol.iterator === 'symbol' ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : typeof obj; };
 
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
 
 var MultiLanguage = function () {
   function MultiLanguage() {
@@ -50,6 +50,10 @@ var MultiLanguage = function () {
         userLang = Object.keys(this.languages)[0];
       }
       this.userLang = userLang;
+      if (localStorage.getItem('vue-lang') !== null) {
+        this.userLang = localStorage.getItem('vue-lang')
+      }
+      window.localStorage.setItem('vue-lang', this.userLang)
     }
 
     /* get modifiers from directive, find in languages object and replace values */
@@ -165,15 +169,6 @@ var MultiLanguage = function () {
           match = path;
         }
       }
-      /* if language = 'en', match a 'en-CA' language key */
-      // if( !match ) {
-      //   Object.keys(this.languages).forEach((path) => {
-      //     path = path.toLowerCase()
-      //     if(lang.toLowerCase() === path.substr(0,2)) {
-      //       match = path
-      //     }
-      //   })
-      // }
       );return match;
     }
   }]);
@@ -197,6 +192,22 @@ MultiLanguage.install = function (Vue, languages) {
     init.call(this, options);
   };
 
+  Vue.mixin({
+      data() {
+        return { isToggleLanguage: false }
+      },
+      created: function () {
+        this.$language = window.localStorage.getItem('vue-lang')
+        this.$forceUpdate()
+      },
+      watch: {
+        $language(val) {
+          window.localStorage.setItem('vue-lang', val)
+          this.$emit('changeLang', val)
+        }
+      },
+  })
+
   Vue.prototype.translate = function (language, path) {
     var params = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};