feat(input): add prop to only open on button click

Author: MrWook

docs/.vuepress/components/Demo.vue

@@ -13,7 +13,7 @@
       <Datepicker
         v-model="vModelExample"
         placeholder="Select Date"
-      ></Datepicker>
+      />
       <div class="coding">
         <code>
           &lt;datepicker placeholder="Select Date" v-model="vmodelexample"&gt;&lt;/datepicker&gt;
@@ -25,30 +25,30 @@
 
     <div class="example">
       <h3>With default open date</h3>
-      <Datepicker :open-date="openDate"></Datepicker>
+      <Datepicker :open-date="openDate"/>
       <code>
         &lt;datepicker :disabled="disabled"&gt;&lt;/datepicker&gt;
       </code>
       <div class="settings">
         <h5>Settings</h5>
         <div class="form-group">
           <label>Open date:</label>
-          <Datepicker v-model="openDate"></Datepicker>
+          <Datepicker v-model="openDate"/>
         </div>
         <pre>openDate: {{ openDate }}</pre>
       </div>
     </div>
 
     <div class="example">
       <h3>Inline datepicker</h3>
-      <Datepicker :inline="true"></Datepicker>
+      <Datepicker :inline="true"/>
       <code>
         &lt;datepicker :inline="true"&gt;&lt;/datepicker&gt;
       </code>
     </div>
     <div class="example">
       <h3>RTL datepicker</h3>
-      <Datepicker :language="$datepickerLocals.he"></Datepicker>
+      <Datepicker :language="$datepickerLocals.he"/>
       <code>
         &lt;datepicker :language="$datepickerLocals.he"&gt;&lt;/datepicker&gt;
       </code>
@@ -59,7 +59,7 @@
       <Datepicker
         :minimum-view="'day'"
         :maximum-view="'day'"
-      ></Datepicker>
+      />
       <code>
         &lt;datepicker :minimumView="'day'" :maximumView="'day'"&gt;&lt;/datepicker&gt;
       </code>
@@ -71,7 +71,7 @@
         :minimum-view="'day'"
         :maximum-view="'day'"
         :language="$datepickerLocals.he"
-      ></Datepicker>
+      />
       <code>
         &lt;datepicker :minimumView="'day'" :maximumView="'day'"
         language="$datepickerLocals.he"&gt;&lt;/datepicker&gt;
@@ -83,7 +83,7 @@
       <Datepicker
         :minimum-view="'month'"
         :maximum-view="'month'"
-      ></Datepicker>
+      />
       <code>
         &lt;datepicker :minimumView="'month'" :maximumView="'month'"&gt;&lt;/datepicker&gt;
       </code>
@@ -95,7 +95,7 @@
         :minimum-view="'day'"
         :maximum-view="'month'"
         :initial-view="'month'"
-      ></Datepicker>
+      />
       <code>
         &lt;datepicker :minimumView="'day'" :maximumView="'month'"
         :initialView="'month'"&gt;&lt;/datepicker&gt;
@@ -108,12 +108,23 @@
         :minimum-view="'month'"
         :maximum-view="'year'"
         :initial-view="'year'"
-      ></Datepicker>
+      />
       <code>
         &lt;datepicker :minimumView="'month'" :maximumView="'year'"
         :initialView="'year'"&gt;&lt;/datepicker&gt;
       </code>
     </div>
+
+    <div class="example">
+      <h3>With Button</h3>
+      <Datepicker
+        :calendar-button="true"
+        :show-calendar-on-button="true"
+      />
+      <code>
+        &lt;datepicker :calendar-button="true" :show-calendar-on-button="true"&gt;&lt;/datepicker&gt;
+      </code>
+    </div>
   </div>
 </template>
 

src/components/DateInput.vue

@@ -7,7 +7,7 @@
       :class="{'input-group-prepend' : bootstrapStyling}"
       :style="{'cursor:not-allowed;' : disabled}"
       class="vdp-datepicker__calendar-button"
-      @click="showCalendar"
+      @click="showCalendar(true)"
     >
       <span :class="{'input-group-text' : bootstrapStyling}">
         <i :class="calendarButtonIcon">
@@ -34,7 +34,7 @@
       :readonly="!typeable"
       :tabindex="tabindex"
       autocomplete="off"
-      @click="showCalendar"
+      @click="showCalendar(false)"
       @focus="showFocusCalendar"
       @keyup="parseTypedDate"
       @blur="inputBlurred"
@@ -124,10 +124,19 @@ export default {
     this.input = this.$el.querySelector('input')
   },
   methods: {
-    showCalendar() {
+    showCalendar(isButton) {
       // prevent to emit the event twice if we are listening focus
       if (!this.showCalendarOnFocus) {
-        this.$emit('show-calendar')
+        if (
+          !this.showCalendarOnButtonClick
+          || (
+            this.showCalendarOnButtonClick
+            && this.calendarButton
+            && isButton
+          )
+        ) {
+          this.$emit('show-calendar')
+        }
       }
     },
     showFocusCalendar() {

src/components/Datepicker.vue

@@ -27,6 +27,7 @@
       :use-utc="useUtc"
       :show-calendar-on-focus="showCalendarOnFocus"
       :tabindex="tabindex"
+      :show-calendar-on-button-click="showCalendarOnButtonClick"
       @show-calendar="showCalendar"
       @close-calendar="close(true)"
       @typed-date="setTypedDate"

src/mixins/inputProps.vue

@@ -100,6 +100,10 @@ export default ({
       type: Boolean,
       default: false,
     },
+    showCalendarOnButtonClick: {
+      type: Boolean,
+      default: false,
+    },
   },
 })
 </script>

test/unit/specs/DateInput/DateInput.spec.js

@@ -117,4 +117,15 @@ describe('DateInput', () => {
     wrapper.find('input').trigger('focus')
     expect(wrapper.emitted('show-calendar')).toBeTruthy()
   })
+
+  it('should open the calendar only on calendar button click', () => {
+    wrapper.setProps({
+      calendarButton: true,
+      showCalendarOnButtonClick: true,
+    })
+    wrapper.find('input').trigger('click')
+    expect(wrapper.emitted('show-calendar')).toBeFalsy()
+    wrapper.find('.vdp-datepicker__calendar-button').trigger('click')
+    expect(wrapper.emitted('show-calendar')).toBeTruthy()
+  })
 })