Merge pull request #70 from phoenixwong/alpha

Release v0.2.2

CHANGELOG.md

@@ -2,20 +2,30 @@
 
 > The Change Log of Vue2 Timepicker `vue2-timepicker`
 
+## v 0.2.2
+
+### Fixes
+
+Fixes `v-model` watcher for cases like changing the input value programmatically (non-user behavior).
+
+### Improvements
+
+Added `displayTime` in the return data of `@change` event.
+
 ## v 0.2.1
 
 ### New
 
-- New `input-class` support. The custom input class will be assigned to the `<input type="text">` within the component. ([#57](https://github.com/phoenixwong/vue2-timepicker/issues/57), Thanks to @marufmax)
-- Add support to `placeholder`, just like other regular form elements ([#55](https://github.com/phoenixwong/vue2-timepicker/issues/55))
+- New `input-class` support. The custom input class will be assigned to the `<input type="text">` within the component. (Thanks to @marufmax)
+- Add support to `placeholder`, just like other regular form elements
 
 ### Improvements
 
-Refined `@click.stop` logic ([#38](https://github.com/phoenixwong/vue2-timepicker/issues/38))
+Refined `@click.stop` logic
 
 ### Fixes
 
-Fixes possible loader issue in some Webpack configs ([#68](https://github.com/phoenixwong/vue2-timepicker/issues/68), Thanks to @RaphaelJ)
+Fixes possible loader issue in some Webpack configs (Thanks to @RaphaelJ)
 
 ## v 0.2.0
 

README.md

@@ -191,13 +191,13 @@ console.log(this.yourTimeValue)
 // A: No argument
 changeHandler (eventData) {
   console.log(eventData)
-  // -> {data: {HH:..., mm:... }}
+  // -> {data: {HH:..., mm:... }, displayTime: HH:mm}
 }
 
 // B: Custom arguments
 otherChangeHandler (eventData, yourArg1, yourArg2) {
   console.log(eventData)
-  // -> {data: {HH:..., mm:... }}
+  // -> {data: {HH:..., mm:... }, displayTime: HH:mm}
   console.log(yourArg1)
   // -> 'foo'
   console.log(yourArg2)
@@ -212,18 +212,22 @@ In the example above, when picker is set to "14:30:15" in HH:mm:ss format, `chan
 ```javascript
 // `@change` event data
 {
-  HH: "14",
-  H: "14",
-  hh: "14",
-  a: "am",
-  A: "AM",
-  h: "14",
-  kk: "14",
-  k: "14",
-  m: "30",
-  mm: "30",
-  s: "15",
-  ss: "15"
+  data: {
+    HH: "14",
+    H: "14",
+    hh: "14",
+    a: "am",
+    A: "AM",
+    h: "14",
+    kk: "14",
+    k: "14",
+    m: "30",
+    mm: "30",
+    s: "15",
+    ss: "15"
+  },
+  // extra `displayTime` added since v0.2.2
+  displayTime: '14:30:15'
 }
 ```
 

demo/src/components/Playground.vue

@@ -52,8 +52,8 @@ export default {
       disablePicker: false,
 
       playgroundData: {},
-
       playgroundFullValue: {},
+      playgroundDisplayTime: undefined,
 
       muteWatch: false,
 
@@ -252,6 +252,7 @@ export default {
 
     changeHandler (eventData) {
       this.playgroundFullValue = eventData.data
+      this.playgroundDisplayTime = eventData.displayTime
       this.updateRangeValue(eventData.data)
     }
   },
@@ -390,6 +391,7 @@ section#playground
 
     #dispatchedValue.codes
       highlight-code(lang="json" data-title="@change event data") {{ playgroundFullValue }}
+      highlight-code(lang="json" data-title="@change event displayTime") {{ playgroundDisplayTime }}
 </template>
 
 <style lang="stylus">

demo/src/components/Samples.vue

@@ -240,8 +240,9 @@ section#mostlyUsedSamples
       code @change
       |  Event
     template(slot="description")
-      p A <code>change</code> event will be triggered every time user alters the timepicker's value.
+      p A <code>@change</code> event will be triggered every time user alters the timepicker's value.
       p Unlike the <code>v-model</code>, which only returns data in your predefined format, <code>@change</code> event will return a full package of all supported time tokens.
+      p Start from <code>v0.2.2</code>, a <code>displayTime</code> string value is also included in the <code>@change</code> event.
       p Play around with the two pickers below to see their data changes in live.
     template(slot="codes")
       highlight-code(lang="html" data-title="HTML")
@@ -254,12 +255,12 @@ section#mostlyUsedSamples
         | methods: {
         |   // No argument
         |   changeHandler (eventData) {
-        |     // eventData -&gt; {data: {HH:..., mm:...}}
+        |     // eventData -&gt; {data: {HH:..., mm:...}, displayTime: 'HH:mm'}
         |   },
         |
         |   // Customized arguments
         |   otherChangeHandler (eventData, arg1, arg2) {
-        |     // eventData -&gt; {data: {HH:..., mm:...}}
+        |     // eventData -&gt; {data: {HH:..., mm:...}, displayTime: 'HH:mm'}
         |     // arg1 -&gt; 'foo'
         |     // arg2 -&gt; 42
         |   }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue2-timepicker",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "A dropdown time picker (hour|minute|second) for Vue 2.x, with flexible time format support",
   "scripts": {
     "dev": "cd demo && yarn serve",

src/vue-timepicker.vue

@@ -237,8 +237,11 @@ export default {
     'opts.secondInterval' (newInteval) {
       this.renderList('second', newInteval)
     },
-    value () {
-      this.readValues()
+    value: {
+      deep: true,
+      handler () {
+        this.readValues()
+      }
     },
     displayTime () {
       this.fillValues()
@@ -506,7 +509,10 @@ export default {
       })
 
       this.$emit('input', JSON.parse(JSON.stringify(timeValue)))
-      this.$emit('change', {data: fullVals})
+      this.$emit('change', {
+        data: fullVals,
+        displayTime: String(this.displayTime)
+      })
     },
 
     is12hRange (value) {