Merge pull request #129 from phoenixwong/alpha

Release v1.1.4

Author: phoenixwong

CHANGELOG.md

@@ -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

README.md

@@ -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.

demo/src/components/Playground.vue

@@ -70,6 +70,7 @@ export default {
       advancedKeyboard: false,
       manualInput: false,
       hideDropdown: false,
+      fixedDropdownBtn: false,
       lazyMode: false,
       autoScroll: false,
       skipErrorStyle: false,
@@ -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')
       }
@@ -800,6 +805,18 @@ section#playground
             input(v-model="hideDropdown" type="radio" id="hide_dropdown_false" name="hide_dropdown", :value="false")
             |  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")
+            |  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 #
@@ -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")
-            |  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")
+            |  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")
+            |  Disable
 
       #skipErrorStyle.config-block
         h3.subtitle
@@ -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"

demo/src/components/Samples.vue

@@ -51,6 +51,8 @@ export default {
 
       manualStringValue: '8:15 pm',
 
+      customCloseBtnValue: '10:05',
+
       autoScrollData1: '08:40',
       autoScrollData2: '5:30:20 pm',
 
@@ -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' }
       ]
     }
   },
@@ -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
@@ -851,6 +856,97 @@ section#mostlyUsedSamples
         |  
         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")
@@ -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