Merge pull request #67 from ManukMinasyan/develop

Develop
ManukMinasyan · Apr 24, 2020 · 7cb70dd · 7cb70dd
2 parents 1f863f2 + b35ff0b
commit 7cb70dd
Show file tree

Hide file tree

Showing 10 changed files with 88 additions and 17 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,6 +1,5 @@
 .DS_Store
 node_modules
-/dist
 
 # local env files
 .env.local

diff --git a/dist/demo.png b/dist/demo.png
diff --git a/dist/index.html b/dist/index.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><title>Vue App</title><link href=js/app.cf401fe6.js rel=preload as=script><link href=js/chunk-vendors.49f5ca0d.js rel=preload as=script></head><body><div id=app></div><script src=js/chunk-vendors.49f5ca0d.js></script><script src=js/app.cf401fe6.js></script></body></html>
diff --git a/dist/js/app.cf401fe6.js b/dist/js/app.cf401fe6.js
diff --git a/dist/js/app.cf401fe6.js.map b/dist/js/app.cf401fe6.js.map
diff --git a/dist/js/chunk-vendors.49f5ca0d.js b/dist/js/chunk-vendors.49f5ca0d.js
diff --git a/dist/js/chunk-vendors.49f5ca0d.js.map b/dist/js/chunk-vendors.49f5ca0d.js.map
diff --git a/package.json b/package.json
@@ -6,7 +6,7 @@
   },
   "name": "vue-functional-calendar",
   "description": "Lightweight, high-performance calendar component based on Vue.js",
-  "version": "2.8.69",
+  "version": "2.8.70",
   "license": "MIT",
   "repository": {
     "type": "git",

diff --git a/src/Demo.vue b/src/Demo.vue
@@ -1,6 +1,42 @@
 <template>
     <div>
 
+        <FunctionalCalendar class="demo-calendar dateRangeInputs" :is-modal="true" :is-date-range="true"
+                            :is-multiple="true"
+                            :clanedars-count="2">
+            <template v-slot:dateRangeInputs="props">
+                <label for="check-in">
+                    <svg width="21" height="23" viewBox="0 0 21 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path fill-rule="evenodd" clip-rule="evenodd"
+                              d="M17.5493 8.73181H3.4507V20.2052H17.5493V8.73181ZM4.46948 19.1852V9.75184H16.5305V19.1852H4.46948Z"
+                              fill="black"/>
+                        <path fill-rule="evenodd" clip-rule="evenodd"
+                              d="M5.32394 0C4.66902 0 4.14085 0.53697 4.14085 1.19594V1.74645H1.52817C0.682665 1.74645 0 2.4398 0 3.29168V21.4548C0 22.3066 0.682665 23 1.52817 23H19.4718C20.3173 23 21 22.3067 21 21.4548V3.29168C21 2.4398 20.3173 1.74645 19.4718 1.74645H16.8592V1.19594C16.8592 0.53697 16.331 0 15.6761 0C15.0211 0 14.493 0.53697 14.493 1.19594V1.74645H6.50704V1.19594C6.50704 0.53697 5.97887 0 5.32394 0ZM5.12676 1.19594C5.12676 1.08328 5.21656 0.994718 5.32394 0.994718C5.43133 0.994718 5.52113 1.08328 5.52113 1.19594V3.29168C5.52113 3.40434 5.43133 3.4929 5.32394 3.4929C5.21656 3.4929 5.12676 3.40434 5.12676 3.29168V1.19594ZM15.4789 1.19594C15.4789 1.08328 15.5687 0.994718 15.6761 0.994718C15.7834 0.994718 15.8732 1.08328 15.8732 1.19594V3.29168C15.8732 3.40434 15.7834 3.4929 15.6761 3.4929C15.5687 3.4929 15.4789 3.40434 15.4789 3.29168V1.19594ZM0.985916 3.29168C0.985916 2.98611 1.23021 2.74117 1.52817 2.74117H4.14085V3.29168C4.14085 3.95065 4.66902 4.48762 5.32394 4.48762C5.97887 4.48762 6.50704 3.95065 6.50704 3.29168V2.74117H14.493V3.29168C14.493 3.95065 15.0211 4.48762 15.6761 4.48762C16.331 4.48762 16.8592 3.95065 16.8592 3.29168V2.74117H19.4718C19.7698 2.74117 20.0141 2.98611 20.0141 3.29168V5.93793H0.985916V3.29168ZM0.985916 21.4548V6.93265H20.0141V21.4548C20.0141 21.7603 19.7698 22.0053 19.4718 22.0053H1.52817C1.23021 22.0053 0.985916 21.7603 0.985916 21.4548Z"
+                              fill="black"/>
+                    </svg>
+                    <input id="check-in" type="text" title="Start Date"
+                           v-model="props.startDate"
+                           placeholder="Check In"
+                           :readonly="!props.isTypeable">
+                </label>
+                <label for="check-out">
+                    <svg width="21" height="23" viewBox="0 0 21 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path fill-rule="evenodd" clip-rule="evenodd"
+                              d="M17.5493 8.73181H3.4507V20.2052H17.5493V8.73181ZM4.46948 19.1852V9.75184H16.5305V19.1852H4.46948Z"
+                              fill="black"/>
+                        <path fill-rule="evenodd" clip-rule="evenodd"
+                              d="M5.32394 0C4.66902 0 4.14085 0.53697 4.14085 1.19594V1.74645H1.52817C0.682665 1.74645 0 2.4398 0 3.29168V21.4548C0 22.3066 0.682665 23 1.52817 23H19.4718C20.3173 23 21 22.3067 21 21.4548V3.29168C21 2.4398 20.3173 1.74645 19.4718 1.74645H16.8592V1.19594C16.8592 0.53697 16.331 0 15.6761 0C15.0211 0 14.493 0.53697 14.493 1.19594V1.74645H6.50704V1.19594C6.50704 0.53697 5.97887 0 5.32394 0ZM5.12676 1.19594C5.12676 1.08328 5.21656 0.994718 5.32394 0.994718C5.43133 0.994718 5.52113 1.08328 5.52113 1.19594V3.29168C5.52113 3.40434 5.43133 3.4929 5.32394 3.4929C5.21656 3.4929 5.12676 3.40434 5.12676 3.29168V1.19594ZM15.4789 1.19594C15.4789 1.08328 15.5687 0.994718 15.6761 0.994718C15.7834 0.994718 15.8732 1.08328 15.8732 1.19594V3.29168C15.8732 3.40434 15.7834 3.4929 15.6761 3.4929C15.5687 3.4929 15.4789 3.40434 15.4789 3.29168V1.19594ZM0.985916 3.29168C0.985916 2.98611 1.23021 2.74117 1.52817 2.74117H4.14085V3.29168C4.14085 3.95065 4.66902 4.48762 5.32394 4.48762C5.97887 4.48762 6.50704 3.95065 6.50704 3.29168V2.74117H14.493V3.29168C14.493 3.95065 15.0211 4.48762 15.6761 4.48762C16.331 4.48762 16.8592 3.95065 16.8592 3.29168V2.74117H19.4718C19.7698 2.74117 20.0141 2.98611 20.0141 3.29168V5.93793H0.985916V3.29168ZM0.985916 21.4548V6.93265H20.0141V21.4548C20.0141 21.7603 19.7698 22.0053 19.4718 22.0053H1.52817C1.23021 22.0053 0.985916 21.7603 0.985916 21.4548Z"
+                              fill="black"/>
+                    </svg>
+                    <input id="check-out" type="text" title="End Date"
+                           v-model="props.endDate"
+                           placeholder="Check Out"
+                           :readonly="!props.isTypeable">
+                </label>
+            </template>
+        </FunctionalCalendar>
+
+
         <FunctionalCalendar class="demo-calendar 2"
                             ref="Calendar"
                             v-model="calendarData"
@@ -252,6 +288,24 @@
     .demo-calendar {
         width: 400px;
         margin: 100px;
+
+        &.dateRangeInputs {
+            label {
+                position: relative;
+                display: inline-flex;
+                align-items: center;
+
+                svg {
+                    position: absolute;
+                    width: 16px;
+                    left: 5px;
+                }
+
+                input {
+                    border-radius: unset;
+                }
+            }
+        }
     }
 
     .demo-custom-calendar {

diff --git a/src/components/FunctionalCalendar.vue b/src/components/FunctionalCalendar.vue
@@ -2,23 +2,28 @@
     <div class="vfc-popover-container" ref="popoverElement" tabindex="0">
         <div class="vfc-multiple-input" :class="{'vfc-dark': fConfigs.isDark}"
              v-if="fConfigs.isModal && fConfigs.isDateRange">
-            <input type="text" title="Start Date"
-                   v-model="dateRangeSelectedStartDate"
-                   :placeholder="fConfigs.placeholder"
-                   :readonly="!fConfigs.isTypeable"
-                   :maxlength="fConfigs.dateFormat.length">
-            <input type="text" title="End Date"
-                   v-model="dateRangeSelectedEndDate"
-                   :placeholder="fConfigs.placeholder"
-                   :readonly="!fConfigs.isTypeable"
-                   :maxlength="fConfigs.dateFormat.length">
+            <slot name="dateRangeInputs" :startDate="dateRangeSelectedStartDate" :endDate="dateRangeSelectedEndDate"
+                  :isTypeable="fConfigs.isTypeable">
+                <input type="text" title="Start Date"
+                       v-model="dateRangeSelectedStartDate"
+                       :placeholder="fConfigs.placeholder"
+                       :readonly="!fConfigs.isTypeable"
+                       :maxlength="fConfigs.dateFormat.length">
+                <input type="text" title="End Date"
+                       v-model="dateRangeSelectedEndDate"
+                       :placeholder="fConfigs.placeholder"
+                       :readonly="!fConfigs.isTypeable"
+                       :maxlength="fConfigs.dateFormat.length">
+            </slot>
         </div>
         <div :class="{'vfc-dark': fConfigs.isDark}" v-else-if="fConfigs.isModal && fConfigs.isDatePicker">
-            <input class="vfc-single-input" type="text" title="Date"
-                   v-model="singleSelectedDate"
-                   :placeholder="fConfigs.placeholder"
-                   :readonly="!fConfigs.isTypeable"
-                   :maxlength="fConfigs.dateFormat.length">
+            <slot name="datePickerInput" :selectedDate="singleSelectedDate" :isTypeable="fConfigs.isTypeable">
+                <input class="vfc-single-input" type="text" title="Date"
+                       v-model="singleSelectedDate"
+                       :placeholder="fConfigs.placeholder"
+                       :readonly="!fConfigs.isTypeable"
+                       :maxlength="fConfigs.dateFormat.length">
+            </slot>
         </div>
         <div v-else-if="fConfigs.isModal && fConfigs.isMultipleDatePicker" class="vfc-tags-input-root"
              :class="{'vfc-dark': fConfigs.isDark}">