Merge pull request #121 from phoenixwong/alpha

Release v1.1.3

CHANGELOG.md

@@ -2,6 +2,14 @@
 
 > The Change Log of Vue2 Timepicker `vue2-timepicker`
 
+## v 1.1.3
+
+### Improvements
+
+- Enhanced `hide-dropdown` feature -- When the dropdown is hidden by default, users can choose to open the dropdown by clicking the triangle button "▾" (Thanks to @jost-s).
+- Refined `focus` and `blur` event.
+- Minor fixes for the Advanced Keyboard mode.
+
 ## v 1.1.2
 
 ### New

README.md

@@ -519,6 +519,19 @@ For example, when a user focuses on the **hour** slot (`HH`) of a `"HH:mm"` form
 - **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.
 
+### Hide Dropdown
+
+> **NOTE:** To use this feature, you MUST ENABLE the `manual-input` mode _(v.1.1.0+)_ in the first place.
+
+It makes the dropdown picker hidden by default.
+
+```html
+<vue-timepicker manual-input hide-dropdown></vue-timepicker>
+```
+
+Users can still choose to open the dropdown by clicking the triangle ("&dtrif;") button on the right. _(v.1.1.3+)_
+
+
 ### Lazy Event Mode
 
 ```html
@@ -528,7 +541,7 @@ For example, when a user focuses on the **hour** slot (`HH`) of a `"HH:mm"` form
 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
+- The user clicked the ("&times;") 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.
 
@@ -601,6 +614,7 @@ Prop                      | Type               | Required | Default Value
 **blur-delay**            | _Number_           | no       | 300
 **manual-input**          | _Boolean_          | no       | false
 **manual-input-timeout**  | _Number_           | no       | 1000
+**hide-dropdown**         | _Boolean_          | no       | false
 **lazy**                  | _Boolean_          | no       | false
 **auto-scroll**           | _Boolean_          | no       | false
 **debug-mode**            | _Boolean_          | no       | false
@@ -737,8 +751,8 @@ Event          | Arguments      | Description
 **change**     | (_eventData_)  | Emit after value changes
 **open**       | &nbsp;         | Emit when the dropdown opens
 **close**      | &nbsp;         | Emit when the dropdown closes
-**focus**      | &nbsp;         | Emit when the user start focusing on the Timepicker
-**blur**       | &nbsp;         | Emit when the user blurs the Timepicker
+**focus**      | &nbsp;         | Emit when the user start focusing on the `<input>`
+**blur**       | &nbsp;         | Emit when the user blurs the `<input>`
 **error**      | (_eventData_)  | Emit when the input value becomes invalid
 
 ### The `open` and `close` Event of the Dropdown Picker
@@ -761,7 +775,7 @@ data () {
 
 ### The `focus` and `blur` Event
 
-Help to identify focus/blur state of the Vue Timepicker. Especially useful in cases where the dropdown is force hidden by `hide-dropdown` under the Manual Input mode. 
+It works with the Manual Input mode, aimed to identify the focus/blur state of the `<input>` box. Specially useful in cases where the dropdown is force hidden by `hide-dropdown`.
 
 ```javascript
 data () {
@@ -772,7 +786,7 @@ data () {
 ```
 
 ```html
-<p>Focus State: I'm {{focusState}}!</p>
+<p>Focus State: {{focusState}}</p>
 
 <vue-timepicker manual-input hide-dropdown @focus="focusState = 'focused'" @blur="focusState = 'blurred'"></vue-timepicker>
 ```

demo/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue2-timepicker-demo",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",

demo/src/components/Playground.vue

@@ -142,11 +142,6 @@ export default {
       return this.hideDropdown
     },
 
-    useAdvancedKeyboard () {
-      if (this.toHideDropdown) { return false }
-      return this.advancedKeyboard
-    },
-
     showErroredData () {
       return Boolean(this.playgroundErroredData && this.playgroundErroredData.length)
     },
@@ -208,7 +203,7 @@ export default {
         start += ('\n  hide-dropdown')
       }
 
-      if (this.useAdvancedKeyboard) {
+      if (this.advancedKeyboard) {
         start += ('\n  advanced-keyboard')
       }
 
@@ -805,7 +800,7 @@ section#playground
             input(v-model="hideDropdown" type="radio" id="hide_dropdown_false" name="hide_dropdown", :value="false")
             |  Disable
 
-      #advancedKeyboard.config-block(v-if="!toHideDropdown")
+      #advancedKeyboard.config-block
         h3.subtitle
           a.anchor #
           | Advanced Keyboard Support
@@ -883,7 +878,7 @@ section#playground
                        :minute-range="customRange.minute ? minuteRange : null"
                        :second-range="(showSeconds && customRange.second) ? secondRange : null"
                        :close-on-complete="closeOnComplete"
-                       :advanced-keyboard="useAdvancedKeyboard"
+                       :advanced-keyboard="advancedKeyboard"
                        :manual-input="manualInput"
                        :hide-dropdown="toHideDropdown"
                        :blur-delay="blurDelay"

demo/src/components/Samples.vue

@@ -35,7 +35,9 @@ export default {
       demoArgs: undefined,
 
       dropdownStatus: 'closed',
+      
       focusState: 'blurred',
+      dropdownState: 'closed',
 
       lazyData: {
         hh: '06',
@@ -648,7 +650,7 @@ section#mostlyUsedSamples
       code close
       |  event
     p(slot="description")
-      | Help identifying current status of the dropdown picker
+      | Help to identify the current state of the dropdown picker.
     template(v-slot:codes)
       highlight-code(lang="javascript" data-title="JS")
         pre
@@ -676,25 +678,31 @@ section#mostlyUsedSamples
       code blur
       |  event
     p(slot="description")
-      | Help to identify the focus/blur state of the Timepicker when the dropdown is force hidden by <code>hide-dropdown</code>.
+      | It works with Manual Input mode. Helps to identify the focus/blur state of the Timepicker's input. Especially useful when the dropdown is force hidden by <code>hide-dropdown</code>.
     template(v-slot:codes)
       highlight-code(lang="javascript" data-title="JS")
         pre
-          | // Define a variable for logging the status
           | data () {
           |   return {
-          |     focusState: 'blurred'
+          |     // variable for the input state
+          |     focusState: 'blurred',
+          |
+          |     // variable for the dropdown state
+          |     dropdownState: 'closed'
           |   }
           | }
       highlight-code(lang="html" data-title="HTML")
         pre
-          | &lt;p&gt;Focus Status: I'm <span>{{</span>focusState<span>}}</span>!&lt;/p&gt;
+          | &lt;span&gt;Focus State: <span>{{</span>focusState<span>}}</span>&lt;/span&gt;
+          | &lt;span&gt;Dropdown State: <span>{{</span>dropdownState<span>}}</span>&lt;/span&gt;
           | &nbsp;
-          | &lt;vue-timepicker manual-input hide-dropdown @focus="focusState = 'focused'" @blur="focusState = 'blurred'"&gt;&lt;/vue-timepicker&gt;
+          | &lt;vue-timepicker manual-input hide-dropdown @focus="focusState = 'focused'" @blur="focusState = 'blurred'" @open="dropdownState = 'opened'" @close="dropdownState = 'closed'"&gt;&lt;/vue-timepicker&gt;
     template(v-slot:preview)
-      b Focus State: I'm {{focusState}}!
+      b Focus State: {{focusState}}
+      span &emsp;/&emsp;
+      b Dropdown State: {{ dropdownState }}
       p
-        vue-timepicker(manual-input hide-dropdown @focus="focusState = 'focused'" @blur="focusState = 'blurred'")
+        vue-timepicker(manual-input hide-dropdown @focus="focusState = 'focused'" @blur="focusState = 'blurred'" @open="dropdownState = 'opened'" @close="dropdownState = 'closed'")
 
   //- Custom Labels
   sample-block#customPickerLabels