Merge pull request #140 from phoenixwong/alpha

Release v1.1.6
phoenixwong · Jan 17, 2021 · 032b98d · 032b98d
2 parents defca43 + 35d1856
commit 032b98d
Show file tree

Hide file tree

Showing 13 changed files with 545 additions and 72 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,17 @@
 
 > The Change Log of Vue2 Timepicker `vue2-timepicker`
 
+## v 1.1.6
+
+### New
+
+- Support appending the dropdown menu to the document body with `append-to-body`
+
+### Improvements
+
+- In Manual Input mode, support jumping to the next token slot with a colon (`:`) or space (` `) key.
+- Return full data on `blur` and `close` events as per the `change` event.
+
 ## v 1.1.5
 
 ### New

diff --git a/README.md b/README.md
@@ -593,7 +593,6 @@ Works with `drop-direction="auto"` either. Defaults to `160` (unit: _px_) if the
 <vue-timepicker drop-direction="auto" :drop-offset-height="200"></vue-timepicker>
 ```
 
-
 ### Lazy Event Mode
 
 ```html
@@ -604,9 +603,44 @@ When `lazy` event mode is toggled on, only an actual user behavior can trigger t
 
 - The user opened the dropdown and picked a new value
 - The user clicked the ("&times;") clear button
+- The user inputted a new value or clear the existing value in the Manual Input mode
 
 In other words, on `lazy` mode, Timepicker won't emit `input` and `change` events on mounted, nor after the value got modified programmatically.
 
+
+### Append To Body
+
+Append the dropdown menu to the end of the document `<body>`. Try this if you have `z-index` or `overflow` layout issue with the dropdown.
+
+```html
+<vue-timepicker append-to-body></vue-timepicker>
+```
+
+The body-appended dropdown's CSS class is `vue__time-picker-dropdown`. Its default `z-index` is `100`. You can change the value by adding the following style in your app -- 
+
+```css
+/* E.g. set the z-index to 5000 */
+.vue__time-picker-dropdown {
+  z-index: 5000;
+}
+```
+
+**NOTE**: If you have to override some of the CSS styles within the dropdown, you will need to update their selectors' class names as well. Simply change any `.vue__time-picker .dropdown` selector to `.vue__time-picker-dropdown`.
+
+For example, when you have a customized background color set for selected values:
+
+```css
+/* Default override (not using "append-to-body") */
+.vue__time-picker .dropdown ul li:not([disabled]).active {
+  background: steelblue;
+}
+
+/* When using "append-to-body" */
+.vue__time-picker-dropdown ul li:not([disabled]).active {
+  background: steelblue;
+}
+```
+
 ### Enable Debug Mode
 
 ```html
@@ -671,6 +705,7 @@ Prop                      | Type               | Required | Default Value
 **container-id**          | _String_           | no       | _undefined_
 **drop-offset-height**    | _Number_           | no       | 160
 **lazy**                  | _Boolean_          | no       | false
+**append-to-body**        | _Boolean_          | no       | false
 **debug-mode**            | _Boolean_          | no       | false
 
 

diff --git a/demo/package.json b/demo/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue2-timepicker-demo",
-  "version": "1.1.5",
+  "version": "1.1.6",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -9,7 +9,7 @@
   },
   "dependencies": {
     "core-js": "^3.6.5",
-    "highlight.js": "^9.18.1",
+    "highlight.js": "^9.18.5",
     "vue": "^2.6.11",
     "vue-highlight.js": "^3.1.0"
   },

diff --git a/demo/src/components/Playground.vue b/demo/src/components/Playground.vue
@@ -74,6 +74,7 @@ export default {
       lazyMode: false,
       autoScroll: false,
       skipErrorStyle: false,
+      appendToBody: false,
       debugMode: false,
 
       customBlurDelay: false,
@@ -220,6 +221,10 @@ export default {
         start += ('\n  auto-scroll')
       }
 
+      if (this.appendToBody) {
+        start += ('\n  append-to-body')
+      }
+
       if (this.disablePicker) {
         start += ('\n  disabled')
       }
@@ -865,6 +870,18 @@ section#playground
             input(v-model="skipErrorStyle" type="radio" id="skip_error_false" name="skip_error", :value="false")
             | &nbsp;Disable
 
+      #appendToBody.config-block
+        h3.subtitle
+          a.anchor #
+          | Append To Body
+        config-row(is-group)
+          label.options(for="append_to_body_true")
+            input(v-model="appendToBody" type="radio" id="append_to_body_true" name="append_to_body", :value="true")
+            | &nbsp;Enable
+          label.options(for="append_to_body_false")
+            input(v-model="appendToBody" type="radio" id="append_to_body_false" name="append_to_body", :value="false")
+            | &nbsp;Disable
+
       #debugMode.config-block
         h3.subtitle
           a.anchor #
@@ -905,6 +922,7 @@ section#playground
                        :disabled="disablePicker"
                        :lazy="lazyMode"
                        :auto-scroll="autoScroll"
+                       :append-to-body="appendToBody"
                        :debug-mode="debugMode"
                        :input-class="skipErrorStyle ? 'skip-error-style' : null"
                        @change="changeHandler"

diff --git a/dist/VueTimepicker.common.js b/dist/VueTimepicker.common.js
diff --git a/dist/VueTimepicker.common.js.map b/dist/VueTimepicker.common.js.map
diff --git a/dist/VueTimepicker.css b/dist/VueTimepicker.css