feat: allow to change locale globally, closes #95

egoist · Mar 19, 2019 · 85c94a8 · 85c94a8
1 parent a6bac94
commit 85c94a8
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 49 deletions.
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,4 @@
+{
+  "semi": false,
+  "singleQuote": true
+}
diff --git a/example/app.vue b/example/app.vue
@@ -2,20 +2,20 @@
   <div id="app">
     <div class="header">
       <select v-model="$timeago.locale">
-        <option
-          v-for="name of localeNames"
-          :key="name"
-          :value="name">
-          {{ name }}
-        </option>
+        <option v-for="name of localeNames" :key="name" :value="name">{{ name }}</option>
       </select>
     </div>
     <div class="main">
       <input type="text" v-model="datetime1">
-      <timeago :datetime="datetime1" :converter="converter" />
+      <timeago :datetime="datetime1" :converter="converter"/>
       <hr>
       <input type="text" v-model="datetime2">
-      <timeago :datetime="datetime2" :autoUpdate="autoUpdate ? 1 : 0" :converterOptions="{ includeSeconds: true }" /> <input type="checkbox" v-model="autoUpdate"> Auto Update in every second
+      <timeago
+        :datetime="datetime2"
+        :autoUpdate="autoUpdate ? 1 : 0"
+        :converterOptions="{ includeSeconds: true }"
+      />
+      <input type="checkbox" v-model="autoUpdate"> Auto Update in every second
     </div>
   </div>
 </template>

diff --git a/example/index.js b/example/index.js
@@ -18,9 +18,10 @@ Vue.use(Timeago, {
 
 new Vue({
   el: '#app',
-  render: h => h(App, {
-    props: {
-      localeNames: Object.keys(locales)
-    }
-  })
+  render: h =>
+    h(App, {
+      props: {
+        localeNames: Object.keys(locales)
+      }
+    })
 })
diff --git a/src/index.js b/src/index.js
@@ -1,8 +1,8 @@
-import defaultConverter from "./converter";
+import defaultConverter from './converter'
 
 export const createTimeago = (opts = {}) => {
-  const locales = opts.locales || {};
-  const name = opts.name || "Timeago";
+  const locales = opts.locales || {}
+  const name = opts.name || 'Timeago'
 
   return {
     name,
@@ -31,119 +31,119 @@ export const createTimeago = (opts = {}) => {
     data() {
       return {
         timeago: this.getTimeago()
-      };
+      }
     },
 
     computed: {
       localeName() {
-        return this.locale || this.$timeago.locale;
+        return this.locale || this.$timeago.locale
       }
     },
 
     mounted() {
-      this.startUpdater();
+      this.startUpdater()
     },
 
     beforeDestroy() {
-      this.stopUpdater();
+      this.stopUpdater()
     },
 
     render(h) {
       return h(
-        "time",
+        'time',
         {
           attrs: {
             datetime: new Date(this.datetime),
             title:
-              typeof this.title === "string"
+              typeof this.title === 'string'
                 ? this.title
                 : this.title === false
                 ? null
                 : this.timeago
           }
         },
         [this.timeago]
-      );
+      )
     },
 
     methods: {
       getTimeago(datetime) {
-        const converter = this.converter || opts.converter || defaultConverter;
+        const converter = this.converter || opts.converter || defaultConverter
         return converter(
           datetime || this.datetime,
           locales[this.localeName],
           this.converterOptions || {}
-        );
+        )
       },
 
       convert(datetime) {
-        this.timeago = this.getTimeago(datetime);
+        this.timeago = this.getTimeago(datetime)
       },
 
       startUpdater() {
         if (this.autoUpdate) {
-          const autoUpdaye = this.autoUpdate === true ? 60 : this.autoUpdate;
+          const autoUpdaye = this.autoUpdate === true ? 60 : this.autoUpdate
           this.updater = setInterval(() => {
-            this.convert();
-          }, autoUpdaye * 1000);
+            this.convert()
+          }, autoUpdaye * 1000)
         }
       },
 
       stopUpdater() {
         if (this.updater) {
-          clearInterval(this.updater);
-          this.updater = null;
+          clearInterval(this.updater)
+          this.updater = null
         }
       }
     },
 
     watch: {
       autoUpdate(newValue) {
-        this.stopUpdater();
+        this.stopUpdater()
         if (newValue) {
-          this.startUpdater();
+          this.startUpdater()
         }
       },
 
       datetime() {
-        this.convert();
+        this.convert()
       },
       localeName() {
-        this.convert();
+        this.convert()
       },
       converter() {
-        this.convert();
+        this.convert()
       },
       converterOptions: {
         handler() {
-          this.convert();
+          this.convert()
         },
         deep: true
       }
     }
-  };
-};
+  }
+}
 
 export const install = (Vue, opts) => {
   if (Vue.prototype.$timeago) {
-    return;
+    return
   }
 
-  if (process.env.NODE_ENV === "development" && !Vue.observable) {
-    console.warn(`[vue-timeago] Vue 2.6 or above is recommended.`);
+  if (process.env.NODE_ENV === 'development' && !Vue.observable) {
+    console.warn(`[vue-timeago] Vue 2.6 or above is recommended.`)
   }
 
   const $timeago = {
     locale: opts.locale
-  };
+  }
   Vue.prototype.$timeago = Vue.observable
     ? Vue.observable($timeago)
-    : new Vue({ data: $timeago });
+    : new Vue({ data: $timeago })
 
-  const Component = createTimeago(opts);
-  Vue.component(Component.name, Component);
-};
+  const Component = createTimeago(opts)
+  Vue.component(Component.name, Component)
+}
 
-export const converter = defaultConverter;
+export const converter = defaultConverter
 
-export default install;
+export default install