Merge pull request #134 from phoenixwong/alpha

Release v1.1.5
phoenixwong · Sep 20, 2020 · defca43 · defca43
2 parents e0c2c93 + 55e05d8
commit defca43
Show file tree

Hide file tree

Showing 13 changed files with 341 additions and 37 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,13 @@
 
 > The Change Log of Vue2 Timepicker `vue2-timepicker`
 
+## v 1.1.5
+
+### New
+
+- Support changing dropdown direction with the `drop-direction` property. It accepts three string values: `"up"`, `"auto"` and `"down"` _(default)_.
+- Additional `container-id` and `drop-offset-height` as helpers for the **"auto"** drop direction. Please check the documentation for more info.
+
 ## v 1.1.4
 
 ### New

diff --git a/README.md b/README.md
@@ -413,6 +413,17 @@ Automatically close the dropdown when the user finishes selecting **all** of the
 <vue-timepicker close-on-complete></vue-timepicker>
 ```
 
+### Auto-Scroll
+
+```html
+<vue-timepicker auto-scroll></vue-timepicker>
+```
+
+Auto-scroll to selected values on dropdown open. It works with both:
+
+- Programmatically defined value. E.g., the initial value from `v-model`
+- Values manually picked by the user.
+
 ### Define Hour Range
 
 Sometimes you may want to limit hours picker to a specific range. The `hour-range` parameter is here to help.
@@ -531,31 +542,70 @@ It makes the dropdown picker hidden by default.
 
 Users can still choose to open the dropdown by clicking the triangle ("&dtrif;") button on the right. _(v.1.1.3+)_
 
+### Fixed Dropdown Button
 
-### Lazy Event Mode
+```html
+<vue-timepicker fixed-dropdown-button></vue-timepicker>
+```
+
+Make the dropdown button always visible in the UI. _(v.1.1.4+)_
+
+### Drop Direction
+
+Change dropdown direction when needed _(v.1.1.5+)_. Accepting values:
+
+- **down**: Default value.
+- **up**: Force open the dropdown above the input.
+- **auto**: Auto detects available height and opens the dropdown on top if there are not enough spaces below the input.
 
 ```html
-<vue-timepicker lazy></vue-timepicker>
+<!-- Force drop up -->
+<vue-timepicker drop-direction="up"></vue-timepicker>
+
+<!-- Auto drop direction  -->
+<vue-timepicker drop-direction="auto"></vue-timepicker>
 ```
 
-When `lazy` event mode is toggled on, only an actual user behavior can trigger the `input` and `change` events. Which are:
+#### Container ID
 
-- The user opened the dropdown and picked a new value
-- The user clicked the ("&times;") clear button
+Works with `drop-direction="auto"`. It defines the parent container where the timepicker should calculate the free spaces from. If this value is not set, timepicker will watch `document.body` instead.
 
-In other words, on `lazy` mode, Timepicker won't emit `input` and `change` events on mounted, nor after the value got modified programmatically.
+```html
+<!-- Parent Container ID: "auto-dropdown-containter" -->
+<div id="auto-dropdown-containter">
+  <!-- Defined Container -->
+  <vue-timepicker drop-direction="auto" container-id="auto-dropdown-containter"></vue-timepicker>
 
-### Auto-Scroll
+  <!-- Default (document body) -->
+  <vue-timepicker drop-direction="auto"></vue-timepicker>
+</div>
+```
+
+#### Drop Offset Height
+
+Works with `drop-direction="auto"` either. Defaults to `160` (unit: _px_) if the value is not set.
 
 ```html
-<vue-timepicker auto-scroll></vue-timepicker>
+<!--
+  When the available bottom space is less than 200px,
+  open the dropdown above the input.
+-->
+<vue-timepicker drop-direction="auto" :drop-offset-height="200"></vue-timepicker>
 ```
 
-Auto-scroll to selected values on dropdown open. It works with both:
 
-- Programmatically defined value. E.g., the initial value from `v-model`
-- Values manually picked by the user.
+### 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 ("&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.
 
 ### Enable Debug Mode
 
@@ -603,6 +653,7 @@ Prop                      | Type               | Required | Default Value
 **hide-clear-button**     | _Boolean_          | no       | false
 **disabled**              | _Boolean_          | no       | false
 **close-on-complete**     | _Boolean_          | no       | false
+**auto-scroll**           | _Boolean_          | no       | false
 **hour-range**            | _Array_            | no       | _undefined_
 **minute-range**          | _Array_            | no       | _undefined_
 **second-range**          | _Array_            | no       | _undefined_
@@ -615,8 +666,11 @@ Prop                      | Type               | Required | Default Value
 **manual-input**          | _Boolean_          | no       | false
 **manual-input-timeout**  | _Number_           | no       | 1000
 **hide-dropdown**         | _Boolean_          | no       | false
+**fixed-dropdown-button** | _Boolean_          | no       | false
+**drop-direction**        | _String_           | no       | "down"
+**container-id**          | _String_           | no       | _undefined_
+**drop-offset-height**    | _Number_           | no       | 160
 **lazy**                  | _Boolean_          | no       | false
-**auto-scroll**           | _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.3",
+  "version": "1.1.5",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",

diff --git a/demo/src/components/Samples.vue b/demo/src/components/Samples.vue
@@ -84,7 +84,8 @@ export default {
         { title: 'Auto-Scroll', anchor: 'autoScroll' },
         { title: 'More Powerful format String', anchor: 'morePowerfulFormat' },
         { title: 'Customized Buttons And Icon', anchor: 'customButtonIcon' },
-        { title: 'Fixed Dropdown Button', anchor: 'fixedDropdownButton' }
+        { title: 'Fixed Dropdown Button', anchor: 'fixedDropdownButton' },
+        { title: 'Drop Direction', anchor: 'dropDirection' }
       ]
     }
   },
@@ -149,7 +150,7 @@ section#mostlyUsedSamples
     template(v-slot:codes)
       highlight-code(lang="html" data-title="HTML")
         pre
-          | &lt;!-- 12-hour sampleaa 1 --&gt;
+          | &lt;!-- 12-hour sample 1 --&gt;
           | &lt;vue-timepicker format="hh:mm A"&gt;&lt;/vue-timepicker&gt;
           | &nbsp;
           | &lt;!-- 12-hour sample 2 --&gt;
@@ -947,6 +948,52 @@ section#mostlyUsedSamples
           template(v-slot:dropdownButton)
             img(src="https://i.postimg.cc/CLkZcW46/custom-clock.png")
 
+  //- Drop Direction
+  sample-block#dropDirection
+    template(v-slot:title) Drop Direction
+    template(v-slot:description)
+      p Change dropdown direction when needed (<code>v1.1.5+</code>).  Accepting values:
+      ul
+        li
+          b down
+          | : Default value.
+        li
+          b up
+          | : Force open the dropdown above the input.
+        li
+          b auto
+          | : Auto detects available height and opens the dropdown on top if there are not enough spaces below the input.
+
+    template(v-slot:codes)
+      highlight-code(lang="html" data-title="HTML")
+        pre
+          | &lt;!-- Drop Direction Up --&gt;
+          | &lt;vue-timepicker drop-direction="up"&gt;&lt;/vue-timepicker&gt;
+          | &nbsp;
+          | &lt;!-- Auto Drop Direction --&gt;
+          | &lt;div id="auto-dropdown-containter"&gt;
+          |   &lt;!-- Defined Container --&gt;
+          |   &lt;vue-timepicker drop-direction="auto" container-id="auto-dropdown-containter"&gt;&lt;/vue-timepicker&gt;
+          |   &lt;!-- Default (document body) --&gt;
+          |   &lt;vue-timepicker drop-direction="auto"&gt;&lt;/vue-timepicker&gt;
+          | &lt;/div&gt;
+    template(v-slot:preview)
+      b Drop Direction Up
+      p
+        vue-timepicker(drop-direction="up")
+      #auto-dropdown-containter
+        .demo-title
+          b Auto Drop Direction
+        .demo-body
+          .inner
+            b Defined Container
+            p
+              vue-timepicker(drop-direction="auto" container-id="auto-dropdown-containter")
+          .inner
+            b Default (document body)
+            p
+              vue-timepicker(drop-direction="auto")
+
   //- Footer Links
   .footer-links
     slot(name="footer-links")
@@ -1006,4 +1053,24 @@ section#mostlyUsedSamples
     height: 2.2em
     padding: 0.3em 0.5em
     font-size: 1em
+  
+  // Drop Direction Demo
+  #auto-dropdown-containter
+    margin-top: 1em
+    padding: 1em
+    background: rgba(0, 0, 0, 0.05)
+    border-radius: 5px
+    .demo-title
+      font-weight: 600
+      padding: 0 0 0.5em 0
+
+    .demo-body
+      display: flex
+      flex-flow: row nowrap
+      justify-content: flex-start
+      align-items: flex-start
+      .inner
+        margin-right: 0.5em
+      b
+        font-weight: normal
 </style>