Merge pull request #10 from SashaJarvi/develop

develop
SashaJarvi · Dec 11, 2022 · 2f6bda4 · 2f6bda4
2 parents 09e701e + ebb0b32
commit 2f6bda4
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 13 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue2-inline-calendar",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "main": "dist/vue2-inline-calendar.common.js",
   "module": "dist/vue2-inline-calendar.umd.min.js",
   "author": "Sasha Jarvi",

diff --git a/src/App.vue b/src/App.vue
@@ -19,6 +19,17 @@
         <vue-inline-calendar @select-date="setDate" />
       </div>
 
+      <div class="calendar-wrapper">
+        <p>
+          The component with <code>enable-mousewheel-scroll</code> property. <i>Selected date: {{ date }}</i>
+        </p>
+        <code class="code">
+          <!-- prettier-ignore -->
+          <span class="code__tag">&lt;<span class="code__name">vue-inline-calendar</span> <span class="code__attr">@select-date</span>=<span class="code__string">"setDate"</span> <span class="code__attr">enable-mousewheel-scroll</span> /&gt;</span>
+        </code>
+        <vue-inline-calendar @select-date="setDate" enable-mousewheel-scroll />
+      </div>
+
       <div class="calendar-wrapper">
         <p>You can specify the minimal date and thereby exclude older dates from selection:</p>
         <code class="code">
@@ -72,12 +83,12 @@
 
       <p>
         Read the
-        <as
+        <a
           class="calendar-link"
           href="https://github.com/SashaJarvi/vue2-inline-calendar/blob/main/README.md"
           target="_blank"
           rel="nofollow noopener noreferrer"
-          ><strong>docs</strong></as
+          ><strong>docs</strong></a
         >
         to know more about the package usage
       </p>

diff --git a/src/components/TheObserver.vue b/src/components/TheObserver.vue
@@ -4,7 +4,7 @@
 
 <script>
 export default {
-  name: "BaseObserver",
+  name: "TheObserver",
   props: {
     options: {
       type: Object,

diff --git a/src/components/VueInlineCalendar.vue b/src/components/VueInlineCalendar.vue
@@ -12,11 +12,7 @@
         v-if="showFirstObserver"
         class="inline-calendar__date date-item"
         @intersect="getPrevDatesInRange(minDate, daysRange, true)"
-        :options="{
-          threshold: 0,
-          root: $refs.datesWrapper,
-          rootMargin: `0px 0px 0px -${itemWidth}px`,
-        }"
+        :options="prevObserverOptions"
       />
       <li
         v-for="(date, index) in datesReadable"
@@ -42,7 +38,7 @@
         v-if="showLastObserver"
         class="inline-calendar__date date-item"
         @intersect="getNextDatesInRange(maxDate, daysRange, true)"
-        :options="{ threshold: 0, root: $refs.datesWrapper, rootMargin: `0px -${itemWidth}px 0px 0px` }"
+        :options="nextObserverOptions"
       />
     </ul>
   </div>
@@ -130,8 +126,8 @@ export default {
       dates: [],
       canSelectDate: true,
       selectedDate: null,
-      minDate: new Date(),
-      maxDate: new Date(),
+      minDate: null,
+      maxDate: null,
       startDate: null,
       endDate: null,
       showFirstObserver: true,
@@ -217,6 +213,20 @@ export default {
         gridColumnGap: `${this.itemsGap}px`,
       };
     },
+    prevObserverOptions() {
+      return {
+        threshold: 0,
+        root: this.$refs.datesWrapper,
+        rootMargin: `0px 0px 0px ${this.itemWidth}px`,
+      };
+    },
+    nextObserverOptions() {
+      return {
+        threshold: 0,
+        root: this.$refs.datesWrapper,
+        rootMargin: `0px ${this.itemWidth}px 0px 0px`,
+      };
+    },
   },
   methods: {
     fillCalendar() {
@@ -397,7 +407,6 @@ export default {
     cursor: pointer;
     -webkit-user-select: none;
     user-select: none;
-    transition: all 0.2s ease-in-out;
 
     &.active {
       color: #fff;