Skip to content

Commit

Permalink
Merge pull request #118 from phoenixwong/beta
Browse files Browse the repository at this point in the history
Release v1.1.2
  • Loading branch information
phoenixwong authored May 31, 2020
2 parents 905f94f + 58acf18 commit cc97aee
Show file tree
Hide file tree
Showing 11 changed files with 1,395 additions and 1,621 deletions.
11 changes: 11 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,17 @@

> The Change Log of Vue2 Timepicker `vue2-timepicker`
## v 1.1.2

### New

More powerful `format` string parameter. E.g., you can hide the "hour" column by setting `format="mm:ss"`, or make AM/PM the first column by `format="A hh:ss"`, no extra CSS hacking needed. Please check the Demo page for more examples.

### Improvements

- Support `shift+tab` to navigate to the previous token slot in the Manual Input mode (Thanks to @jost-s).
- Other minor keyboard navigation enhancements for Manual Input mode

## v 1.1.1

### Improvements
Expand Down
2 changes: 1 addition & 1 deletion demo/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "vue2-timepicker-demo",
"version": "1.1.1",
"version": "1.1.2",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
Expand Down
84 changes: 81 additions & 3 deletions demo/src/components/Samples.vue
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,9 @@ export default {
autoScrollData1: '08:40',
autoScrollData2: '5:30:20 pm',
apmFirst1: 'AM 03:15',
apmFirst2: 'pm9時6分',
sideNav: [
{ title: 'Default', anchor: 'default' },
{ title: '12 Hours', anchor: 'format12hours' },
Expand All @@ -74,7 +77,8 @@ export default {
{ title: '@focus and @blur event', anchor: 'focusAndBlur' },
{ title: 'Customized Picker Labels', anchor: 'customPickerLabels' },
{ title: 'Adjust Input Width', anchor: 'inputWidth' },
{ title: 'Auto-Scroll', anchor: 'autoScroll' }
{ title: 'Auto-Scroll', anchor: 'autoScroll' },
{ title: 'More Powerful format String', anchor: 'morePowerfulFormat' }
]
}
},
Expand Down Expand Up @@ -704,14 +708,14 @@ section#mostlyUsedSamples
| <vue-timepicker hour-label="heure" minute-label="minute"></vue-timepicker>
|
| <!-- 12-hour format with customized am/pm text -->
| <vue-timepicker hour-label="" minute-label="分" second-label="秒" apm-label="午" am-text="上午" pm-text="下午" format="h:mm:ss a"></vue-timepicker>
| <vue-timepicker hour-label="" minute-label="分" second-label="秒" apm-label="午" am-text="上午" pm-text="下午" format="h:mm:ss a"></vue-timepicker>
template(v-slot:preview)
b 24-hour format with customized hour and minute label
p
vue-timepicker(hour-label="heure" minute-label="minute")
b 12-hour format with customized am/pm text
p
vue-timepicker(hour-label="" minute-label="分" second-label="秒" apm-label="午" am-text="上午" pm-text="下午" format="h:mm:ss a")
vue-timepicker(hour-label="" minute-label="分" second-label="秒" apm-label="午" am-text="上午" pm-text="下午" format="h:mm:ss a")

//- Adjust Input Width
sample-block#inputWidth
Expand Down Expand Up @@ -765,6 +769,80 @@ section#mostlyUsedSamples
p
vue-timepicker(auto-scroll format="h:mm:ss a" v-model="autoScrollData2")

//- More Powerful format String
sample-block#morePowerfulFormat
template(v-slot:title) More Powerful <code>format</code> String
template(slot="description")
p The <code>format</code> parameter becomes even more powerful started from <code>v1.1.2</code>.
template(v-slot:codes)
highlight-code(lang="html" data-title="HTML")
pre
| &lt;!-- Use without "hour" --&gt;
| &lt;vue-timepicker format="mm:ss"&gt;&lt;/vue-timepicker&gt;
| &lt;vue-timepicker format="m:s"&gt;&lt;/vue-timepicker&gt;
| &nbsp;
| &lt;!-- Make AM/PM the first column in the dropdown --&gt;
| &lt;vue-timepicker format="A hh:mm" v-model="apmFirst1"&gt;&lt;/vue-timepicker&gt;
| &lt;vue-timepicker format="ah時m分" v-model="apmFirst2" am-text="午前" pm-text="午後"&gt;&lt;/vue-timepicker&gt;
| &nbsp;
| &lt;!-- Hour + APM only --&gt;
| &lt;vue-timepicker format="ha"&gt;&lt;/vue-timepicker&gt;
| &lt;vue-timepicker format="hh A"&gt;&lt;/vue-timepicker&gt;
| &nbsp;
| &lt;!-- One slot only --&gt;
| &lt;!-- Not recommended, though :) --&gt;
| &lt;vue-timepicker format="h" input-width="60px"&gt;&lt;/vue-timepicker&gt;
| &lt;vue-timepicker format="mm" input-width="60px"&gt;&lt;/vue-timepicker&gt;
| &lt;vue-timepicker format="ss" input-width="60px"&gt;&lt;/vue-timepicker&gt;
| &lt;vue-timepicker format="a" input-width="60px"&gt;&lt;/vue-timepicker&gt;
highlight-code(lang="javascript" data-title="JS")
pre
| // Initial values
| data () {
| return {
| apmFirst1: 'AM 03:15',
| // -> Equivalent to:
| // apmFirst1: {
| // A: 'AM',
| // hh: '03',
| // mm: '15'
| // }
|
| apmFirst2: 'pm9時6分'
| // -> Equivalent to:
| // apmFirst2: {
| // a: 'pm',
| // h: '9',
| // m: '6'
| // }
| }
| }
template(v-slot:preview)
b Use without "hour"
p
vue-timepicker(format="mm:ss")
| &nbsp;
vue-timepicker(format="m:s")
b Make AM/PM the first column in the dropdown
p
vue-timepicker(format="A hh:mm" v-model="apmFirst1")
| &nbsp;
vue-timepicker(format="ah時m分" v-model="apmFirst2" am-text="午前" pm-text="午後")
b Hour + APM only
p
vue-timepicker(format="ha")
| &nbsp;
vue-timepicker(format="hh A")
b One slot only
p
vue-timepicker(format="h" input-width="60px")
| &nbsp;
vue-timepicker(format="mm" input-width="60px")
| &nbsp;
vue-timepicker(format="ss" input-width="60px")
| &nbsp;
vue-timepicker(format="a" input-width="60px")

//- Footer Links
.footer-links
slot(name="footer-links")
Expand Down
Loading

0 comments on commit cc97aee

Please sign in to comment.