Added isAutoCloseable functionality

Author: ManukMinasyan

README.md

@@ -141,6 +141,7 @@ ___
 | calendarsCount                   | Number         | 1       | 3        | Count of calendars, working only is prop isMultiple                    |
 | isSeparately                   | Boolean         | false       | true        | Enable separately  calendars                 |
 | isModal                   | Boolean         | false       | true        | Enable modal calendar function                    |
+| isAutoCloseable                   | Boolean         | false       | true        | Hide picker(calendar) if date has been selected                  |
 | isTypeable                   | Boolean         | false       | true        | Enable manually date typing function, working only with prop isModal                     |
 | changeMonthFunction                   | Boolean         | false       | true        | Enable changed month with list, function                   |
 | changeYearFunction                   | Boolean         | false       | true        | Enable changed year with list, function                   |

src/Demo.vue

@@ -6,9 +6,12 @@
                             :date-format="'dd/mm/yyyy'"
                             :is-multiple="true"
                             :calendars-count="1"
-                            :with-time-picker="true"
+                            :with-time-picker="false"
                             :change-month-function="true"
+                            :disabled-dates="['10/10/2019']"
                             v-slot:default="props"
+                            :is-modal="true"
+                            :is-auto-closeable="true"
         >
             {{ props.day.day }}
             <span  :class="{'green-point': props.day.day === 5, 'orange-point': props.day.day === 9, 'green-line': props.day.day === 11}"></span>

src/assets/scss/calendar.scss

@@ -498,11 +498,10 @@ input.vfc-single-input {
 
                     &.vfc-disabled {
                       margin: auto;
-                      background-color: rgba(0, 0, 0, 0.2);
+                      color: rgba(0, 0, 0, 0.2);
                       border-radius: 50%;
                       opacity: 1;
                       z-index: 2;
-                      color: $white;
                     }
 
                     &:after {

src/components/FunctionalCalendar.vue

@@ -508,12 +508,22 @@
                         let diffDays = Math.round(Math.abs((firstDate.getTime() - secondDate.getTime()) / (oneDay)));
 
                         this.$emit('selectedDaysCount', diffDays);
+
+                        // Is Auto Closeable
+                        if (this.fConfigs.isModal && this.fConfigs.isAutoCloseable) {
+                            this.showCalendar = false;
+                        }
                     }
 
                     this.$emit('input', this.calendar);
                 } else if (this.fConfigs.isDatePicker) {
                     this.calendar.selectedDate = item.date;
                     this.$emit('input', this.calendar);
+
+                    // Is Auto Closeable
+                    if (this.fConfigs.isModal && this.fConfigs.isAutoCloseable) {
+                        this.showCalendar = false;
+                    }
                 } else if (this.fConfigs.isMultipleDatePicker) {
                     if (this.calendar.selectedDates.find(date => date.date === item.date)) {
                         let dateIndex = this.calendar.selectedDates.findIndex(date => date.date === item.date);

src/mixins/propsAndData.js

@@ -98,7 +98,11 @@ export const propsAndData = {
         },
         hiddenElements: {
             type: Array
-        }
+        },
+        isAutoCloseable: {
+            type: Boolean,
+            default: false,
+        },
     },
     data() {
         return {
@@ -192,7 +196,8 @@ export const propsAndData = {
                 monthNames: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
 
                 transition: true,
-                hiddenElements: []
+                hiddenElements: [],
+                isAutoCloseable: false,
             }
         }
     }