Skip to content

Release v1.1.5 #134

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Sep 20, 2020
Merged

Release v1.1.5 #134

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a26d218
Support changing dropdown direction
phoenixwong Sep 20, 2020
55e05d8
Release v1.1.5
phoenixwong Sep 20, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
78 changes: 66 additions & 12 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -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

Expand Down Expand Up @@ -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_
Expand All @@ -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


Expand Down
2 changes: 1 addition & 1 deletion demo/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "vue2-timepicker-demo",
"version": "1.1.3",
"version": "1.1.5",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
Expand Down
71 changes: 69 additions & 2 deletions demo/src/components/Samples.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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' }
]
}
},
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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")
Expand Down Expand Up @@ -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>
Loading