Merge pull request #115 from phoenixwong/alpha

Release v1.1.1

CHANGELOG.md

@@ -2,6 +2,17 @@
 
 > The Change Log of Vue2 Timepicker `vue2-timepicker`
 
+## v 1.1.1
+
+### Improvements
+
+Instant feedback after manual input. Plus, add a new `manual-input-timeout` property to help set up the timeout for continuous input (Thanks to @jost-s).
+
+#### Notes for Contributors
+
+We've upgraded to use vue-cli **v4** in this version. Please check the CONTRIBUTING.md for more info.
+
+
 ## v 1.1.0
 
 ### New

CONTRIBUTING.md

@@ -15,8 +15,19 @@ yarn dev
 
 For detailed explanation on how things work, checkout the [Vue Cli Guide](https://cli.vuejs.org/guide/).
 
-> NOTE: Start from `^0.2.0`, we develop Demo pages with [**Yarn**](
+**BREAKING CHANGES**
+
+- Start from `^0.2.0`, we develop Demo pages with [**Yarn**](
 https://yarnpkg.com/), [**Pug**](https://pugjs.org/), and [**Stylus**](http://stylus-lang.com/)
+- Upgraded to **@vue/cli v4** from `^1.1.1`.
+
+**NOTE**
+
+If you have trouble running `yarn dev` after the _^1.1.1_ upgrade, please try the following process:
+
+1. Remove the existing `node_modules` folder and the `yarn.lock` in this repository's **root** directory.
+2. Next, remove the `node_modules` folder and the `yarn.lock` in the **/demo** directory as well.
+3. Go back to the repository's root, run `yarn install`, and `yarn dev:init` again.
 
 ---
 

README.md

@@ -487,21 +487,37 @@ Advance Keyboard support (enabled with `advanced-keyboard`):
 
 Please be aware that after putting the `advanced-keyboard` on, hundreds of additional keyboard event listeners are going to be attached to the component. The amount of listeners depends on how many hours, minutes, and seconds value you enabled in the current Timepicker.
 
+### Blur Delay
+
+```html
+<!-- Unit: million second -->
+<vue-timepicker :blur-delay="500"></vue-timepicker>
+```
+
+Sets the blur delay time for the dropdown. Defaults to `300` if not set.
+
 ### Manual Input Support
 
 ```html
 <vue-timepicker manual-input></vue-timepicker>
 ```
 Let users add or change values through the `<input>` box besides the dropdown picker.
 
-### Blur Delay
+### Manual Input Timeout
 
 ```html
 <!-- Unit: million second -->
-<vue-timepicker :blur-delay="500"></vue-timepicker>
+<vue-timepicker :manual-input-timeout="1500"></vue-timepicker>
 ```
 
-Sets the blur delay time for the dropdown. Defaults to `300` if not set.
+Works with **manual-input** mode. It sets the timeout for continuous input. Defaults to `1000` if not set.
+
+**How It Works?**
+
+For example, when a user focuses on the **hour** slot (`HH`) of a `"HH:mm"` formatted Timepicker (with the default value `1000`):
+
+- **Case 1:** User first inputs `1`, and then inputs `2` _500ms_ later -> Timepicker takes `12` as the final value and set it to the `"HH"` slot.
+- **Case 2:** User inputs `1`, and then presses the key `2` _1200ms_ later -> Timepicker takes `2` as the final value and set it to `02` for the `"HH"` slot.
 
 ### Lazy Event Mode
 
@@ -582,8 +598,9 @@ Prop                      | Type               | Required | Default Value
 **hide-disabled-seconds** | _Boolean_          | no       | false
 **hide-disabled-items**   | _Boolean_          | no       | false
 **advanced-keyboard**     | _Boolean_          | no       | false
-**manual-input**          | _Boolean_          | no       | false
 **blur-delay**            | _Number_           | no       | 300
+**manual-input**          | _Boolean_          | no       | false
+**manual-input-timeout**  | _Number_           | no       | 1000
 **lazy**                  | _Boolean_          | no       | false
 **auto-scroll**           | _Boolean_          | no       | false
 **debug-mode**            | _Boolean_          | no       | false

babel.config.js

@@ -1,5 +1,5 @@
 module.exports = {
   presets: [
-    '@vue/app'
+    '@vue/cli-plugin-babel/preset'
   ]
 }

demo/babel.config.js

@@ -1,5 +1,5 @@
 module.exports = {
   presets: [
-    '@vue/app'
+    '@vue/cli-plugin-babel/preset'
   ]
 }

demo/package.json

@@ -1,29 +1,29 @@
 {
   "name": "vue2-timepicker-demo",
-  "version": "0.1.0",
+  "version": "1.1.1",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "core-js": "^2.6.9",
-    "highlight.js": "^9.15.10",
-    "vue": "^2.6.10",
+    "core-js": "^3.6.5",
+    "highlight.js": "^9.18.1",
+    "vue": "^2.6.11",
     "vue-highlight.js": "^3.1.0"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^3.11.0",
-    "@vue/cli-plugin-eslint": "^3.11.0",
-    "@vue/cli-service": "^3.11.0",
-    "babel-eslint": "^10.0.3",
-    "eslint": "^5.16.0",
-    "eslint-plugin-vue": "^5.0.0",
+    "@vue/cli-plugin-babel": "^4.3.1",
+    "@vue/cli-plugin-eslint": "^4.3.1",
+    "@vue/cli-service": "^4.3.1",
+    "babel-eslint": "^10.1.0",
+    "eslint": "^6.8.0",
+    "eslint-plugin-vue": "^6.2.2",
     "stylus": "^0.54.7",
     "stylus-loader": "^3.0.2",
     "vue-cli-plugin-pug": "^1.0.7",
-    "vue-template-compiler": "^2.6.10"
+    "vue-template-compiler": "^2.6.11"
   },
   "eslintConfig": {
     "root": false,

demo/src/components/Playground.vue

@@ -78,6 +78,9 @@ export default {
       customBlurDelay: false,
       blurDelay: 300,
 
+      customManualInputTimeout: false,
+      manualInputTimeout: 1000,
+
       playgroundData: {},
       playgroundFullValue: {},
       playgroundErroredData: undefined,
@@ -185,6 +188,10 @@ export default {
         start += (`\n  :blur-delay="${this.blurDelay}"`)
       }
 
+      if (this.customManualInputTimeout) {
+        start += (`\n  :manual-input-timeout="${this.manualInputTimeout}"`)
+      }
+
       if (this.lazyMode) {
         start += ('\n  lazy')
       }
@@ -592,6 +599,10 @@ export default {
 
     toggleBlurDelay () {
       this.blurDelay = 300
+    },
+
+    toggleManualInputTimeout () {
+      this.manualInputTimeout = 1000
     }
   },
 
@@ -818,6 +829,18 @@ section#playground
             input(v-model.number="blurDelay" type="range" min="50" max="1500" step="50")
             span(v-text="blurDelay")
 
+      #manualInputTimeout.config-block(v-if="manualInput")
+        h3.subtitle
+          a.anchor #
+          | Customized Manual Input Timeout
+        config-row(is-group)
+          label.options
+            input(v-model="customManualInputTimeout" type="checkbox" @input="toggleManualInputTimeout")
+            |  Set Manual Input Timeout
+          label.range-wrapper(v-if="customManualInputTimeout")
+            input(v-model.number="manualInputTimeout" type="range" min="50" max="5000" step="50")
+            span(v-text="manualInputTimeout")
+
       #skipErrorStyle.config-block
         h3.subtitle
           a.anchor #
@@ -864,6 +887,7 @@ section#playground
                        :manual-input="manualInput"
                        :hide-dropdown="toHideDropdown"
                        :blur-delay="blurDelay"
+                       :manual-input-timeout="manualInputTimeout"
                        :hide-clear-button="hideClearBtn"
                        :disabled="disablePicker"
                        :lazy="lazyMode"