feat(component): add component func $duration

Author: julon

README.md

@@ -12,11 +12,9 @@
 
 > A Vue.js 2.0 MomentJS library
 
-> It just wired moment api to custom filters in Vue : moment() and duration().
-> And also inject moment as **this.$moment** in your components.
-> So you have complete access to the whole api of moment in your templates and also the documentation from [momentjs.com](https://momentjs.com/docs).
-> Just keep in mind that the left value of the filter is the first argument in any of the moment and duration functions.
-> You are good to go now :)
+> Make momentjs available in your template and Vue instance. Since it just try to map raw js function, api is same as[momentjs.com](https://momentjs.com/docs). Making it easier to use in your Vue.js projects.
+
+> It added moment and duration as filters and component instance functions ($moment and $duration).
 
 > Generated using [vue-cli-template-library](https://github.com/julon/vue-cli-template-library).
 
@@ -60,16 +58,16 @@ Vue.use(VueMomentLib);
 <!-- Filter and moment are registered globally -->
 ```
 
-### After that, you can use the duration and moment filters in your templates:
+### After that, you can use the duration and moment filters in your templates, api is slightly different as the first argument is passed through pipe:
 
 ```html
+<!-- first argument of moment filter is a parameter for parsing to UTC, it is set by default to false so it is optional when you use default parsing -->
+
 <!-- Local format -->
 <span>{{ Date.now() | moment().format("YYYY") }}</span>
 
-<!-- first argument of moment filter is a parameter for parsing to UTC, it is set by default to false so it is optional when you use default parsing -->
-
 <!-- isLocal + custom parsing + custom format -->
-<span>{{ Date.now() | moment(false, "12-25-1995", "MM-DD-YYYY").format("YYYY") }}</span>
+<span>{{ Date.now() | moment(false, "MM-DD-YYYY").format("YYYY") }}</span>
 
 <!-- isUTC + custom format -->
 <span>{{ Date.now() | moment(true).format("YYYY") }}</span>
@@ -80,19 +78,39 @@ Vue.use(VueMomentLib);
 <!-- 1500 milliseconds -->
 <span>{{ 1500 | duration("milliseconds").milliseconds() }}</span>
 ```
-Raw JS for moments `moment(Date.now()).format("YYYY")` becomes `Date.now() | moment().format("YYYY")`
 
-Raw JS for duration `moment.duration(500).humanize()` becomes `500 | duration().humanize()`
+### And also, use the $duration and $moment component instance functions in your templates to really use the same apis as momentjs:
+
+```html
+<!-- Local format -->
+<span>{{ $moment(Date.now()).format("YYYY") }}</span>
+
+<!-- isLocal + custom parsing + custom format -->
+<span>{{ $moment(Date.now(), "12-25-1995", "MM-DD-YYYY").format("YYYY") }}</span>
+
+<!-- isUTC + custom format -->
+<span>{{ $moment.utc(Date.now()).format("YYYY") }}</span>
+
+<!-- Duration is supported -->
+<span>{{ $duration(500, "minutes").humanize() }}</span>
+
+<!-- 1500 milliseconds -->
+<span>{{ $duration(1500, "milliseconds").milliseconds() }}</span>
+```
 
+### or
 ```js
 // in your components
 methods: {
   now () {
     return this.$moment(Date.now()).format()
+  },
+  humanize () {
+    return this.$duration(500).humanize()
   }
 }
 
-// it is also register as a global function in the Vue instance
+// it is also registered as a global function in the Vue instance
 // so you can do in vuex store or everywhere else to retrieve the same moment instance you initialized
 import Vue from 'vue'
 const thisYear = Vue.moment(Date.now()).format("YYYY")

src/index.js

@@ -10,13 +10,14 @@ const LibraryModule = {
       moment = options.moment;
     }
 
-    // make moment accessible in components with this.$moment
     /* eslint-disable */
+    // make moment accessible in components with this.$moment
     Vue.prototype.$moment = moment;
+    Vue.prototype.$duration = moment.duration;
 
     // declare this moment instance as a global function for vuex, etc
-    /* eslint-disable */
     Vue.moment = moment;
+    /* eslint-enable */
 
     // filter to wire moment
     Vue.filter("moment", (value, isUtc = false, ...args) => {