Skip to content

Commit

Permalink
Merge pull request #129 from phoenixwong/alpha
Browse files Browse the repository at this point in the history 
Release v1.1.4
  • Loading branch information
@phoenixwong
phoenixwong authored Aug 16, 2020
2 parents 7342533 + dffcb20 commit e0c2c93
Show file tree
Hide file tree
Showing 13 changed files with 296 additions and 37 deletions.
8 changes: 8 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,14 @@

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

### New

- Support customized clear button and dropdown button with the `clearButton` and `dropdownButton` **v-slot** (Thanks to @jost-s).
- Added new `icon` **v-slot** for displaying an extra input icon.
- Added new `fixed-dropdown-button` property, to make the dropdown button always visible.

## v 1.1.3

### Improvements
Expand Down
36 changes: 36 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -869,6 +869,42 @@ Furthermore, you can replace those _am/pm_ (or _AM/PM_) string by setting the `a
<vue-timepicker hour-label="時" minute-label="分" second-label="秒" apm-label="午" am-text="上午" pm-text="下午" format="h:mm:ss a"></vue-timepicker>
```


## Slots

We introduce three slots in `v.1.1.4` to help you customize the clear button, the dropdown button, and the input icon with your own icon/image.

Slot Name | Position | Description
------------------ | -------- | --------------
**icon** | _left_ | On the lefthand side of the `<input>`
**clearButton** | _right_ | In the same spot of the default clear button
**dropdownButton** | _right_ | In the same spot of the default dropdown button

> Please note that Vue v2.6.0+ introduces a significant update of the Named Slots syntax. Check the [official documentation](https://vuejs.org/v2/guide/components-slots.html#Named-Slots) for more information.
```html
<!-- For Vue 2.6.0+ -->

<!-- Input icon (image) -->
<vue-timepicker>
<template v-slot:icon>
<img src="$YOUR_ICON_SRC" />
</template>
</vue-timepicker>

<!-- Customized clear button (image) -->
<vue-timepicker>
<template v-slot:clearButton>
<img src="$YOUR_CUSTOM_IMAGE_SRC" />
</template>
</vue-timepicker>

<!-- Customized dropdown button (character entity) -->
<vue-timepicker manual-input hide-dropdown>
<template v-slot:dropdownButton>&#x02263;</template>
</vue-timepicker>
```

## Contribution

Please feel free to fork and help developing. Check [CONTRIBUTING.md](https://github.com/phoenixwong/vue2-timepicker/blob/master/CONTRIBUTING.md) for more details.
Expand Down
34 changes: 26 additions & 8 deletions demo/src/components/Playground.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,7 @@ export default {
advancedKeyboard: false,
manualInput: false,
hideDropdown: false,
fixedDropdownBtn: false,
lazyMode: false,
autoScroll: false,
skipErrorStyle: false,
Expand Down Expand Up @@ -207,6 +208,10 @@ export default {
start += ('\n advanced-keyboard')
}
if (this.fixedDropdownBtn) {
start += ('\n fixed-dropdown-button')
}
if (this.hideClearBtn) {
start += ('\n hide-clear-button')
}
Expand Down Expand Up @@ -800,6 +805,18 @@ section#playground
input(v-model="hideDropdown" type="radio" id="hide_dropdown_false" name="hide_dropdown", :value="false")
| &nbsp;Disable

#manualInputTimeout.config-block(v-if="manualInput")
h3.subtitle
a.anchor #
| Customized Manual Input Timeout
config-row(is-group)
label.options
input(v-model="customManualInputTimeout" type="checkbox" @input="toggleManualInputTimeout")
| &nbsp;Set Manual Input Timeout
label.range-wrapper(v-if="customManualInputTimeout")
input(v-model.number="manualInputTimeout" type="range" min="50" max="5000" step="50")
span(v-text="manualInputTimeout")

#advancedKeyboard.config-block
h3.subtitle
a.anchor #
Expand All @@ -824,17 +841,17 @@ section#playground
input(v-model.number="blurDelay" type="range" min="50" max="1500" step="50")
span(v-text="blurDelay")

#manualInputTimeout.config-block(v-if="manualInput")
#fixedDropdownBtn.config-block
h3.subtitle
a.anchor #
| Customized Manual Input Timeout
| Fixed Dropdown Button
config-row(is-group)
label.options
input(v-model="customManualInputTimeout" type="checkbox" @input="toggleManualInputTimeout")
| &nbsp;Set Manual Input Timeout
label.range-wrapper(v-if="customManualInputTimeout")
input(v-model.number="manualInputTimeout" type="range" min="50" max="5000" step="50")
span(v-text="manualInputTimeout")
label.options(for="fixed_dd_btn_true")
input(v-model="fixedDropdownBtn" type="radio" id="fixed_dd_btn_true" name="fixed_dd_btn", :value="true")
| &nbsp;Enable
label.options(for="fixed_dd_btn_false")
input(v-model="fixedDropdownBtn" type="radio" id="fixed_dd_btn_false" name="fixed_dd_btn", :value="false")
| &nbsp;Disable

#skipErrorStyle.config-block
h3.subtitle
Expand Down Expand Up @@ -884,6 +901,7 @@ section#playground
:blur-delay="blurDelay"
:manual-input-timeout="manualInputTimeout"
:hide-clear-button="hideClearBtn"
:fixed-dropdown-button="fixedDropdownBtn"
:disabled="disablePicker"
:lazy="lazyMode"
:auto-scroll="autoScroll"
Expand Down
100 changes: 99 additions & 1 deletion demo/src/components/Samples.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,8 @@ export default {
manualStringValue: '8:15 pm',
customCloseBtnValue: '10:05',
autoScrollData1: '08:40',
autoScrollData2: '5:30:20 pm',
Expand Down Expand Up @@ -80,7 +82,9 @@ export default {
{ title: 'Customized Picker Labels', anchor: 'customPickerLabels' },
{ title: 'Adjust Input Width', anchor: 'inputWidth' },
{ title: 'Auto-Scroll', anchor: 'autoScroll' },
{ title: 'More Powerful format String', anchor: 'morePowerfulFormat' }
{ title: 'More Powerful format String', anchor: 'morePowerfulFormat' },
{ title: 'Customized Buttons And Icon', anchor: 'customButtonIcon' },
{ title: 'Fixed Dropdown Button', anchor: 'fixedDropdownButton' }
]
}
},
Expand Down Expand Up @@ -462,6 +466,7 @@ section#mostlyUsedSamples
template(v-slot:preview)
vue-timepicker(hide-clear-button)


//- Disable Picker
sample-block#disablePicker
template(v-slot:title) Disable Picker
Expand Down Expand Up @@ -851,6 +856,97 @@ section#mostlyUsedSamples
| &nbsp;
vue-timepicker(format="a" input-width="60px")

//- Custom Button And Icon
sample-block#customButtonIcon
template(v-slot:title) Customized Buttons And Input Icon
template(v-slot:description)
p You can customize the clear button, and the dropdown button with your own icon/image starts from <code>v1.1.4+</code>. There's an additional slot for the input icon as well.
p Please note that Vue v2.6.0+ introduces a significant update of the <b>Named Slots</b> syntax. Check the <a href="https://vuejs.org/v2/guide/components-slots.html#Named-Slots" target="_black">official documentation</a> for more information.

template(v-slot:codes)
highlight-code(lang="html" data-title="HTML")
pre
| &lt;!-- For Vue 2.6.0+ --&gt;
|
| &lt;!-- Input icon (image) --&gt;
| &lt;vue-timepicker&gt;
| &lt;template v-slot:icon&gt;
| &lt;img src="$YOUR_ICON_SRC" /&gt;
| &lt;/template&gt;
| &lt;/vue-timepicker&gt;
|
| &lt;!-- Customized clear button (image) --&gt;
| &lt;vue-timepicker&gt;
| &lt;template v-slot:clearButton&gt;
| &lt;img src="$YOUR_CUSTOM_IMAGE_SRC" /&gt;
| &lt;/template&gt;
| &lt;/vue-timepicker&gt;
|
| &lt;!-- Customized dropdown button (character entity) --&gt;
| &lt;vue-timepicker manual-input hide-dropdown&gt;
| &lt;template v-slot:dropdownButton&gt;&amp;#x02263;&lt;/template&gt;
| &lt;/vue-timepicker&gt;

template(v-slot:preview)
b Input icon (image)
p
vue-timepicker
template(v-slot:icon)
img(src="https://i.postimg.cc/CLkZcW46/custom-clock.png")
b Customized clear button (image)
p
vue-timepicker(v-model="customCloseBtnValue")
template(v-slot:clearButton)
img(src="https://i.postimg.cc/Y0f6RHF8/custom-close.png")
b Customized dropdown button (character entity)
p
vue-timepicker(manual-input hide-dropdown)
template(v-slot:dropdownButton) &#x02263;


//- Fixed Dropdown Button
sample-block#fixedDropdownButton
template(v-slot:title) Fixed Dropdown Button
template(v-slot:description)
p You can make the dropdown button always visible in the UI with <code>fixed-dropdown-button</code>.
p When paired with a customized dropdown button, it's similar to an input icon on the righthand side.

template(v-slot:codes)
highlight-code(lang="html" data-title="HTML")
pre
| &lt;!-- Default dropdown button --&gt;
| &lt;vue-timepicker fixed-dropdown-button&gt;&lt;/vue-timepicker&gt;
|
| &lt;!-- Customized + fixed dropdown button --&gt;
| &lt;vue-timepicker fixed-dropdown-button&gt;
| &lt;template v-slot:dropdownButton&gt;
| &lt;img src="$YOUR_BUTTON_IMAGE_SRC" /&gt;
| &lt;/template&gt;
| &lt;/vue-timepicker&gt;
|
| &lt;!-- To display only one button on the right --&gt;
| &lt;!-- Customized + fixed dropdown button + hide clear button --&gt;
| &lt;vue-timepicker fixed-dropdown-button hide-clear-button&gt;
| &lt;template v-slot:dropdownButton&gt;
| &lt;img src="$YOUR_BUTTON_IMAGE_SRC" /&gt;
| &lt;/template&gt;
| &lt;/vue-timepicker&gt;

template(v-slot:preview)
b Default dropdown button
p
vue-timepicker(fixed-dropdown-button)
b Customized + fixed dropdown button
p
vue-timepicker(fixed-dropdown-button)
template(v-slot:dropdownButton)
img(src="https://i.postimg.cc/CLkZcW46/custom-clock.png")
b Customized + fixed dropdown button + hide clear button
p
vue-timepicker(fixed-dropdown-button hide-clear-button)
template(v-slot:dropdownButton)
img(src="https://i.postimg.cc/CLkZcW46/custom-clock.png")

//- Footer Links
.footer-links
slot(name="footer-links")
Expand Down Expand Up @@ -889,6 +985,8 @@ section#mostlyUsedSamples
width: 20%
bottom: 0
left: 0
max-height: calc(100vh - 50px)
overflow-y: auto
ul
padding: 0 0 0.5em 1.5em
Expand Down
Loading

0 comments on commit e0c2c93

Please sign in to comment.