use date-fns

README.md

@@ -4,8 +4,12 @@
 
 ## Install
 
+`vue-timeago` uses `date-fns/distance_in_words_to_now` under the hood:
+
 ```bash
-$ npm install --save vue-timeago
+yarn add date-fns vue-timeago
+# or
+npm i date-fns vue-timeago
 ```
 
 CDN: [UNPKG](https://unpkg.com/vue-timeago/dist/) | [jsDelivr](https://cdn.jsdelivr.net/npm/vue-timeago/dist/) (available as `window.VueTimeago`)
@@ -17,11 +21,11 @@ CDN: [UNPKG](https://unpkg.com/vue-timeago/dist/) | [jsDelivr](https://cdn.jsdel
 import VueTimeago from 'vue-timeago'
 
 Vue.use(VueTimeago, {
-  name: 'timeago', // component name, `timeago` by default
-  locale: 'en-US',
+  name: 'Timeago', // Component name, `Timeago` by default
+  locale: undefined, // Default locale
   locales: {
-    // you will need json-loader in webpack 1
-    'en-US': require('vue-timeago/locales/en-US.json')
+    'zh-CN': require('date-fns/locale/zh_cn'),
+    'ja': require('date-fns/locale/ja'),
   }
 })
 ```
@@ -36,77 +40,51 @@ Then in your lovely component:
 <!-- Auto-update time every 60 seconds -->
 <timeago :since="time" :auto-update="60"></timeago>
 
-<!-- max time, time before this will not be converted  -->
-<!-- instead you can use a custom formatTime function to format -->
-<!-- 86400 * 365 = a year -->
-<timeago :since="time" :max-time="86400 * 365" :format="formatTime"></timeago>
-
 <!-- custom locale -->
 <!-- use a different locale instead of the global config -->
 <timeago :since="time" locale="zh-CN"></timeago>
 ```
 
-A very basic demo: https://egoist.moe/vue-timeago/
-
-## i18n support
-
-For all supported languages, see [/locales](https://github.com/egoist/vue-timeago/blob/master/locales), it's easy to add a new language support, feel free to submit a Pull Request to help us support more languages!
-
 ## API
 
 ### props
 
 #### since
 
-Type: `string` (dateString)<br>
-Required: `true`
-
-String value representing a date. The string should be in a format recognized by the Date.parse() method. see more at [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date)
-
-#### max-time
-
-Type: `number`<br>
-Default: `86400 * 365` (a year)
-
-The max time in **seconds**, time before this will not be converted.
+- __Type__: `Date` `string` `number`
+- __Required__: `true`
 
-#### format
+The given date.
 
-Type: `function`
-Default: see below
+#### autoUpdate
 
-The function we use to format the time before `max-time`, default function:
-
-```js
-// `time` is returned by `new Date(since).getTime()`
-function formatTime(time) {
-  const d = new Date(time)
-  return d.toLocaleString()
-}
-```
-
-#### auto-update
-
-Type: `number`
+- __Type__: `number`
 
 The period to update the component, in **seconds**.
 
 You can set it to `0` to disable auto-update.
 
 #### locale
 
-Type: `string`
+- __Type__: `string`
+
+Use a custom locale.
+
+#### includeSeconds
+
+- __Type__: `boolean`
+- __Default__: `false`
 
-Specific a locale for relavant component only.
+Distances less than a minute are more detailed
 
 ## Development
 
 ```bash
 # for dev
-$ npm run example
+yarn example
 
-# for publishing
-$ npm run build
+# build in cjs es umd format
+yarn build
 ```
 
 ## License

example/app.vue

@@ -1,111 +1,49 @@
-<style>
-  body {
-    font-family: Helvetica;
-    margin: 0;
-  }
-  .header {
-    height: 40px;
-    line-height: 40px;
-    background-color: #f0f0f0;
-    padding: 0 20px;
-    & select {
-      margin-right: 10px;
-    }
-  }
-  .people {
-    margin-top: 20px;
-    padding: 0 20px;
-  }
-  .person {
-    font-size: 1.4rem;
-    & .name {
-      width: 150px;
-      display: inline-block;
-    }
-    & .meta {
-      display: inline-block;
-    }
-  }
-  .timeago {
-    color: #999;
-  }
-</style>
-
 <template>
-  <div class="app">
-    <header class="header">
-      Choose your language:
-      <select @change="handleChange">
-        <option :value="lang" v-for="lang in langs" :selected="lang === currentLang">
-          {{ lang }}
+  <div id="app">
+    <div class="header">
+      <select v-model="locale">
+        <option value="en">en</option>
+        <option
+          v-for="name of localeNames"
+          :key="name"
+          :value="name">
+          {{ name }}
         </option>
       </select>
-      <input type="button" :value="autoUpdate ? 'Stop update' : 'Resume update'" @click="toggleUpdate">
-    </header>
-    <div class="people">
-      <div class="person" v-for="person in people">
-        <span class="name">{{ person.name }}</span>
-        <div class="meta">
-          was born at
-          <timeago
-            :auto-update="autoUpdate"
-            :max-time="86400 * 365"
-            :locale="currentLang"
-            class="timeago"
-            :since="person.birth"></timeago>
-        </div>
-      </div>
+    </div>
+    <div class="main">
+      <timeago :since="new Date('2011-02-12')" :locale="locale" />
+      <hr>
+      <timeago :since="new Date()" :locale="locale" :autoUpdate="1" :includeSeconds="true" />
     </div>
   </div>
 </template>
 
 <script>
-  import qs from './qs'
-  import locales from './locales'
+export default {
+  props: ['localeNames'],
 
-  const now = new Date().getTime()
-  const people = [
-    {
-      name: 'egoist',
-      birth: now - 60000
-    },
-    {
-      name: 'chelly',
-      birth: now - 60000 * 22
-    },
-    {
-      name: 'aimer',
-      birth: now - 60000 * 102
-    },
-    {
-      name: 'young boy',
-      birth: now - 1000
-    },
-    {
-      name: 'old man',
-      birth: new Date('2014-01-01')
-    }
-  ]
-
-  export default {
-    data() {
-      return {
-        autoUpdate: 1,
-        people,
-        currentLang: qs().lang || 'en-US',
-        langs: Object.keys(locales)
-      }
-    },
-    methods: {
-      handleChange(e) {
-        this.currentLang = e.target.value
-      },
-      format(val) {
-        return ``
-      },
-      toggleUpdate() {
-        this.autoUpdate = this.autoUpdate ? 0 : 1
-      }
+  data() {
+    return {
+      locale: 'en'
     }
   }
+}
 </script>
+
+<style>
+body {
+  margin: 0;
+}
+</style>
+
+<style scoped>
+.header {
+  background: #f9f9f9;
+  padding: 10px;
+}
+
+.main {
+  padding: 10px;
+}
+</style>

example/index.js

@@ -1,16 +1,23 @@
 import Vue from 'vue'
-import VueTimeago from '../src'
-import app from './app'
-import qs from './qs'
-import locales from './locales'
+import Timeago from '../src'
+import App from './App.vue'
 
-Vue.config.debug = true
-Vue.use(VueTimeago, {
-  locale: 'en-US',
+const r = require.context('date-fns/locale', true, /^\.\/([\w\_]+)\/index\.js/)
+const locales = {}
+r.keys().forEach(v => {
+  const [, name] = /^\.\/([\w\_]+)\/index\.js/.exec(v)
+  locales[name] = r(v)
+})
+
+Vue.use(Timeago, {
   locales
 })
 
 new Vue({
   el: '#app',
-  render: h => h(app)
+  render: h => h(App, {
+    props: {
+      localeNames: Object.keys(locales)
+    }
+  })
 })