From 62038ec03901484de5a39205a6481af080193f45 Mon Sep 17 00:00:00 2001
From: MrWook <mr.wook@web.de>
Date: Tue, 19 Jan 2021 07:49:01 +0100
Subject: [PATCH 1/4] feat(input): add slot for calendar and clear button icons

---
 src/components/DateInput.vue  | 18 +++++++++++-------
 src/components/Datepicker.vue |  2 ++
 2 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/components/DateInput.vue b/src/components/DateInput.vue
index 4379e4ba..a150102e 100644
--- a/src/components/DateInput.vue
+++ b/src/components/DateInput.vue
@@ -12,10 +12,12 @@
       @click="toggleCalendar"
     >
       <span :class="{ 'input-group-text': bootstrapStyling }">
-        <i :class="calendarButtonIcon">
-          {{ calendarButtonIconContent }}
-          <span v-if="!calendarButtonIcon">&hellip;</span>
-        </i>
+        <slot name="calendarBtn">
+          <i :class="calendarButtonIcon">
+            {{ calendarButtonIconContent }}
+            <span v-if="!calendarButtonIcon">&hellip;</span>
+          </i>
+        </slot>
       </span>
     </span>
     <!-- Input -->
@@ -49,9 +51,11 @@
       @click="clearDate()"
     >
       <span :class="{ 'input-group-text': bootstrapStyling }">
-        <i :class="clearButtonIcon">
-          <span v-if="!clearButtonIcon">&times;</span>
-        </i>
+        <slot name="clearBtn">
+          <i :class="clearButtonIcon">
+            <span v-if="!clearButtonIcon">&times;</span>
+          </i>
+        </slot>
       </span>
     </span>
     <slot name="afterDateInput" />
diff --git a/src/components/Datepicker.vue b/src/components/Datepicker.vue
index a9df94d3..ee4ce12b 100644
--- a/src/components/Datepicker.vue
+++ b/src/components/Datepicker.vue
@@ -38,6 +38,8 @@
     >
       <slot slot="beforeDateInput" name="beforeDateInput" />
       <slot slot="afterDateInput" name="afterDateInput" />
+      <slot slot="clearBtn" name="clearBtn" />
+      <slot slot="calendarBtn" name="calendarBtn" />
     </DateInput>
 
     <Popup

From d0f35e7ba0b64fa59971971dd26f904ff3d3d6bb Mon Sep 17 00:00:00 2001
From: MrWook <mr.wook@web.de>
Date: Tue, 19 Jan 2021 07:49:15 +0100
Subject: [PATCH 2/4] feat(input): add slot for calendar and clear button icons

---
 docs/guide/Props/README.md |  6 ++---
 docs/guide/Slots/README.md | 54 +++++++++++++++++++++++++++++---------
 2 files changed, 44 insertions(+), 16 deletions(-)

diff --git a/docs/guide/Props/README.md b/docs/guide/Props/README.md
index 1e4d27da..db3cad8f 100755
--- a/docs/guide/Props/README.md
+++ b/docs/guide/Props/README.md
@@ -6,11 +6,11 @@
 | autofocus                     | String                        |             | Sets html `autofocus` attribute on input                                                                                         |
 | bootstrap-styling             | Boolean                       | false       | Use bootstrap v4 styling classes.                                                                                                |
 | calendar-button               | Boolean                       | false       | Show an icon that that can be clicked                                                                                            |
-| calendar-button-icon          | String                        |             | Use icon for button (ex: fa fa-calendar)                                                                                         |
-| calendar-button-icon-content  | String                        |             | Use for material-icons (ex: event)                                                                                               |
+| calendar-button-icon          | String                        |             | (Deprecated for slot) Use icon for button (ex: fa fa-calendar)                                                                                         |
+| calendar-button-icon-content  | String                        |             | (Deprecated for slot) Use for material-icons (ex: event)                                                                                               |
 | calendar-class                | String&#124;Object            |             | CSS class applied to the calendar el                                                                                             |
 | clear-button                  | Boolean                       | false       | Show an icon for clearing the date                                                                                               |
-| clear-button-icon             | String                        |             | Use icon for button (ex: fa fa-times)                                                                                            |
+| clear-button-icon             | String                        |             | (Deprecated for slot) Use icon for button (ex: fa fa-times)                                                                                            |
 | day-cell-content              | Function                      |             | Use to render custom content in day cell                                                                                         |
 | disabled                      | Boolean                       | false       | If `true`, disable Datepicker on screen                                                                                          |
 | disabled-dates                | Object                        |             | See below for configuration                                                                                                      |
diff --git a/docs/guide/Slots/README.md b/docs/guide/Slots/README.md
index b685dfdc..91401a5d 100755
--- a/docs/guide/Slots/README.md
+++ b/docs/guide/Slots/README.md
@@ -11,9 +11,9 @@ to show some custom text:
 
 ```html
 <DatePicker :bootstrap-styling="true">
-  <div slot="beforeCalendarHeaderDay" class="calendar-header">
-    Choose a Date
-  </div>
+  <template #beforeCalendarHeaderDay>
+    <div class="calendar-header">Choose a Date</div>
+  </template>
 </DatePicker>
 ```
 
@@ -26,9 +26,11 @@ to show some custom text:
 
 ```html
 <DatePicker :bootstrap-styling="true">
-  <div slot="calendarFooterMonth">
-    <button>Select all Months</button>
-  </div>
+  <template #calendarFooterMonth>
+    <div>
+      <button>Select all Months</button>
+    </div>
+  </template>
 </DatePicker>
 ```
 
@@ -39,7 +41,9 @@ To implement some custom styling (for instance to add an animated placeholder) o
 
 ```html
 <DatePicker>
-  <span slot="afterDateInput" class="animated-placeholder">Choose a Date</span>
+  <template #afterDateInput>
+    <span class="animated-placeholder">Choose a Date</span>
+  </template>
 </DatePicker>
 ```
 
@@ -50,9 +54,9 @@ allows you to do that:
 
 ```html
 <DatePicker>
-  <span slot="beforeDateInput">
+  <template #beforeDateInput>
     <CustomIcon />
-  </span>
+  </template>
 </DatePicker>
 ```
 
@@ -62,11 +66,35 @@ To provide custom content for buttons that rotate intervals in calendar header `
 
 ```html
 <DatePicker>
-  <span slot="prevIntervalBtn">
+  <template #prevIntervalBtn>
     <CustomIcon />
-  </span>
-  <span slot="nextIntervalBtn">
+  </template>
+  <template #nextIntervalBtn>
     <CustomIcon />
-  </span>
+  </template>
+</DatePicker>
+```
+
+## calendarBtn
+
+To provide custom content for the calendar button, the `calendarBtn` slot may be used:
+
+```html
+<DatePicker :calendar-button="true">
+  <template #calendarBtn>
+    <CustomIcon />
+  </template>
+</DatePicker>
+```
+
+## calendarBtn
+
+To provide custom content for the clear button, the `clearBtn` slot may be used:
+
+```html
+<DatePicker :clear-button="true">
+  <template #clearBtn>
+    <CustomIcon />
+  </template>
 </DatePicker>
 ```

From 0078985b84d91acb2d7f3da1891db5f92e92dbd3 Mon Sep 17 00:00:00 2001
From: MrWook <mr.wook@web.de>
Date: Tue, 19 Jan 2021 07:49:54 +0100
Subject: [PATCH 3/4] chore(demo): update styles for demo

---
 example/Demo.vue | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/example/Demo.vue b/example/Demo.vue
index 7a411df6..dc155bc7 100755
--- a/example/Demo.vue
+++ b/example/Demo.vue
@@ -496,7 +496,7 @@ export default {
 </script>
 
 <style>
-@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
+@import url('https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css');
 
 body {
   font-family: 'Helvetica Neue Light', Helvetica, sans-serif;
@@ -511,10 +511,6 @@ select {
   width: 100%;
 }
 
-select {
-  height: 2.5em;
-}
-
 .example {
   background: #f2f2f2;
   border: 1px solid #ddd;
@@ -543,6 +539,10 @@ h5 {
   padding: 0;
 }
 
+h3 {
+  margin-top: 20px;
+}
+
 .form-group {
   margin-bottom: 1em;
 }

From 5ed908705c76181e25844f8afc9e1685570cd3ff Mon Sep 17 00:00:00 2001
From: MrWook <mr.wook@web.de>
Date: Tue, 19 Jan 2021 07:52:23 +0100
Subject: [PATCH 4/4] docs(input): name slot correctly

---
 docs/guide/Slots/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/guide/Slots/README.md b/docs/guide/Slots/README.md
index 91401a5d..fdec7e84 100755
--- a/docs/guide/Slots/README.md
+++ b/docs/guide/Slots/README.md
@@ -87,7 +87,7 @@ To provide custom content for the calendar button, the `calendarBtn` slot may be
 </DatePicker>
 ```
 
-## calendarBtn
+## clearBtn
 
 To provide custom content for the clear button, the `clearBtn` slot may be used: