Merge pull request #89 from phoenixwong/alpha

Release v1.0.3
phoenixwong · Oct 24, 2019 · aad8071 · aad8071
2 parents 2052597 + c9010d6
commit aad8071
Show file tree

Hide file tree

Showing 12 changed files with 235 additions and 49 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,12 @@
 
 > The Change Log of Vue2 Timepicker `vue2-timepicker`
 
+## v 1.0.3
+
+### New
+
+Added `lazy` event mode. (Thanks to @VictorCazanave)
+
 ## v 1.0.2
 
 ### New

diff --git a/README.md b/README.md
@@ -496,6 +496,18 @@ Please be aware that after putting the `advanced-keyboard` on, hundreds of addit
 
 Sets the blur delay time for keyboard navigation. Defaults to `200` if not set.
 
+### Lazy Event Mode
+
+```html
+<vue-timepicker lazy></vue-timepicker>
+```
+
+When `lazy` event mode is toggled on, only an actual user behavior can trigger the `input` and `change` events. Which are:
+
+- The user opened the dropdown and picked a new value
+- The user clicked the ("x") clear button
+
+In other words, on `lazy` mode, Timepicker won't emit `input` and `change` events on mounted, nor after the value got modified programmatically.
 
 ### Enable Debug Mode
 
@@ -552,6 +564,7 @@ Prop                      | Type               | Required | Default Value
 **hide-disabled-items**   | _Boolean_          | no       | false
 **advanced-keyboard**     | _Boolean_          | no       | false
 **blur-delay**            | _Number_           | no       | 200
+**lazy**                  | _Boolean_          | no       | false
 **debug-mode**            | _Boolean_          | no       | false
 
 

diff --git a/demo/src/components/Playground.vue b/demo/src/components/Playground.vue
@@ -68,6 +68,8 @@ export default {
       disablePicker: false,
       closeOnComplete: false,
       advancedKeyboard: false,
+      lazyMode: false,
+      debugMode: false,
 
       playgroundData: {},
       playgroundFullValue: {},
@@ -154,6 +156,10 @@ export default {
         start += (`\n  :second-range="${secRange}"`)
       }
 
+      if (this.lazyMode) {
+        start += ('\n  lazy')
+      }
+
       if (this.closeOnComplete) {
         start += ('\n  close-on-complete')
       }
@@ -170,6 +176,10 @@ export default {
         start += ('\n  disabled')
       }
 
+      if (this.debugMode) {
+        start += ('\n  debug-mode')
+      }
+
       const htmlCode = start + end
 
       return htmlCode
@@ -688,6 +698,18 @@ section#playground
             input(v-model="disablePicker" type="checkbox")
             | &nbsp;Disable
 
+      #lazyMode.config-block
+        h3.subtitle
+          a.anchor #
+          | Lazy Event Mode
+        config-row(is-group)
+          label.options(for="lazy_mode_true")
+            input(v-model="lazyMode" type="radio" id="lazy_mode_true" name="lazy_mode", :value="true")
+            | &nbsp;Enable
+          label.options(for="lazy_mode_false")
+            input(v-model="lazyMode" type="radio" id="lazy_mode_false" name="lazy_mode", :value="false")
+            | &nbsp;Disable
+
       #advancedKeyboard.config-block
         h3.subtitle
           a.anchor #
@@ -700,6 +722,18 @@ section#playground
             input(v-model="advancedKeyboard" type="radio" id="advanced_kb_false" name="advanced_kb", :value="false")
             | &nbsp;Disable
 
+      #debugMode.config-block
+        h3.subtitle
+          a.anchor #
+          | Debug Mode
+        config-row(is-group)
+          label.options(for="debug_mode_true")
+            input(v-model="debugMode" type="radio" id="debug_mode_true" name="debug_mode", :value="true")
+            | &nbsp;Enable
+          label.options(for="debug_mode_false")
+            input(v-model="debugMode" type="radio" id="debug_mode_false" name="debug_mode", :value="false")
+            | &nbsp;Disable
+
   //-
   //- Live preview on the left panel
   //-
@@ -719,6 +753,8 @@ section#playground
                        :advanced-keyboard="advancedKeyboard"
                        :hide-clear-button="hideClearBtn"
                        :disabled="disablePicker"
+                       :lazy="lazyMode"
+                       :debug-mode="debugMode"
                        @change="changeHandler")
 
     #htmlCodePreview.codes

diff --git a/demo/src/components/Samples.vue b/demo/src/components/Samples.vue
@@ -33,8 +33,19 @@ export default {
       demoData1: {HH: '08', mm: '30'},
       demoData2: {HH: '10', mm: '45'},
       demoArgs: undefined,
+
       dropdownStatus: 'closed',
 
+      lazyData: {
+        hh: '06',
+        mm: '50',
+        ss: '00',
+        a: 'am'
+      },
+      lazyChangeData: undefined,
+      lazyInputData: undefined,
+      lazyEventTs: undefined,
+
       sideNav: [
         { title: 'Default', anchor: 'default' },
         { title: '12 Hours', anchor: 'format12hours' },
@@ -50,6 +61,7 @@ export default {
         { title: 'Hide Clear Button', anchor: 'hideClearButton' },
         { title: 'Disable Picker', anchor: 'disablePicker' },
         { title: 'The @change Event', anchor: 'onChangeSample' },
+        { title: 'Lazy Event Mode', anchor: 'lazyEvents' },
         { title: '@open and @close event', anchor: 'openAndClose' },
         { title: 'Keyboard Support', anchor: 'kbSupport' },
         { title: 'Customized Picker Labels', anchor: 'customPickerLabels' },
@@ -72,6 +84,15 @@ export default {
         arg1: arg1,
         arg2: arg2
       }
+    },
+
+    lazyChangeHandler (eventData) {
+      this.lazyChangeData = eventData
+      this.lazyEventTs = new Date().toLocaleString()
+    },
+
+    lazyInputHandler (eventData) {
+      this.lazyInputData = eventData
     }
   },
 
@@ -179,7 +200,7 @@ section#mostlyUsedSamples
         |     yourFormat: 'hh:mm:ss a',
         |     yourData: {
         |       hh: '03',
-        |       mm: '10',
+        |       mm: '05',
         |       ss: '00',
         |       a: 'am'
         |     }
@@ -466,10 +487,32 @@ section#mostlyUsedSamples
       p
         vue-timepicker(v-model="demoData2" @change="otherChangeHandler($event, 'foo', 42)")
     template(v-if="latestDataFlow || demoArgs" slot="data")
-      highlight-code(v-if="latestDataFlow" lang="json" data-title="The `@change` eventData") {{ latestDataFlow }}
+      highlight-code(v-if="latestDataFlow" lang="json" data-title="The `@change` event data") {{ latestDataFlow }}
       highlight-code(v-if="demoArgs" lang="json" data-title="Received Custom Arguments") {{ demoArgs }}
       highlight-code(v-if="latestDataFlow" lang="json" data-title="`v-model` value") {{ demoArgs ? demoData2 : demoData1 }}
 
+  //- Lazy Event Mode
+  sample-block#lazyEvents
+    template(v-slot:title) Lazy Event Mode
+    template(v-slot:description)
+      p When <code>lazy</code> event mode is toggled on, only an actual user behavior can trigger the <code>input</code> and <code>change</code> events. Which are:
+      ul
+        li The user opened the dropdown and picked a new value
+        li The user clicked the ("x") clear button
+    template(v-slot:codes)
+      highlight-code(lang="html" data-title="HTML")
+        | &lt;vue-timepicker lazy format="hh:mm:ss a"&gt;&lt;/vue-timepicker&gt;
+    template(v-slot:preview)
+      p
+        vue-timepicker(v-model="lazyData" lazy format="hh:mm:ss a" @input="lazyInputHandler" @change="lazyChangeHandler")
+        span.inline-data-preview(v-if="lazyEventTs")
+          b Last <code>change</code> event timestamp:
+          | &nbsp;{{ lazyEventTs }}
+
+    template(v-slot:data)
+      highlight-code(v-if="lazyInputData" lang="json" data-title="The lazy `input` event data") {{ lazyInputData }}
+      highlight-code(v-if="lazyChangeData" lang="json" data-title="The lazy `change` event data") {{ lazyChangeData }}
+
   //- Open And Close Event
   sample-block#openAndClose
     template(v-slot:title)
@@ -654,7 +697,7 @@ section#mostlyUsedSamples
         padding: 0.15em 0
         font-size: 0.85em
         color: alpha($body-color, 0.4)
-  
+
   // Browser Native Input
   input.native-input
     box-sizing: border-box