From 0e5f024d603bccb8772742ba8c3e3d94e262ec27 Mon Sep 17 00:00:00 2001
From: ken <wahyu.dhiraashandy8@gmail.com>
Date: Fri, 12 Mar 2021 23:31:57 +0700
Subject: [PATCH] fix bug when use custom shortcuts

---
 CHANGELOG.md                |  13 ++-
 dev/serve.vue               |  14 ++-
 docs/public/index.html      |   2 +-
 docs/src/App.vue            | 201 ++++++++++++++++++++++++------------
 docs/src/content.js         |  50 +++++++++
 package-lock.json           |  18 ++--
 package.json                |   4 +-
 src/components/Calendar.vue |   2 +-
 src/litepie-datepicker.vue  |   2 +-
 9 files changed, 219 insertions(+), 87 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3808cb6..3a2a2c1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,21 +8,26 @@ All notable changes to this project will be documented in this file.
 
 ## [1.0.0]
 
-- First release
+- First release.
 ## [1.0.1]
 
-- Make stable release
+- Make stable release.
 
 ## [1.0.2]
 
-- Expose `placeholder`, `clear` function to slot
+- Expose `placeholder`, `clear` function to slot.
 
 ## [1.0.3]
 
-- Fix typo `inRangeDateBetween`
+- Fix typo `inRangeDateBetween`.
+
+## [1.0.4]
+
+- Fixed `shortcuts` when use custom.
 
 [Released]: https://github.com/kenhyuwa/litepie-datepicker/
 [1.0.0]: https://github.com/kenhyuwa/litepie-datepicker/releases/tag/v1.0.0
 [1.0.1]: https://github.com/kenhyuwa/litepie-datepicker/releases/tag/v1.0.1
 [1.0.2]: https://github.com/kenhyuwa/litepie-datepicker/releases/tag/v1.0.2
 [1.0.3]: https://github.com/kenhyuwa/litepie-datepicker/releases/tag/v1.0.3
+[1.0.4]: https://github.com/kenhyuwa/litepie-datepicker/releases/tag/v1.0.4
diff --git a/dev/serve.vue b/dev/serve.vue
index 611b06f..af195f9 100644
--- a/dev/serve.vue
+++ b/dev/serve.vue
@@ -80,10 +80,20 @@ export default defineComponent({
     const shortcuts = () => {
       return [
         {
-          label: 'Last 15 Days',
+          label: 'Tomorrow',
           atClick: () => {
             const date = new Date();
-            return [new Date(date.setDate(date.getDate() - 15)), new Date()];
+            return [new Date(date.setDate(date.getDate() + 1)), date];
+          }
+        },
+        {
+          label: 'Last Years',
+          atClick: () => {
+            const date = new Date();
+            return [
+              new Date(date.setFullYear(date.getFullYear() - 1)),
+              new Date()
+            ];
           }
         }
       ];
diff --git a/docs/public/index.html b/docs/public/index.html
index 162c367..93f9510 100644
--- a/docs/public/index.html
+++ b/docs/public/index.html
@@ -21,7 +21,7 @@
       property="og:description"
       content="A date range picker component for Vue.js and Tailwind CSS, dependent to day.js."
     />
-    <meta property="og:image" content="<%= BASE_URL %>img/logo.png" />
+    <meta property="og:image" content="https://raw.githubusercontent.com/kenhyuwa/litepie-datepicker/main/assets/light-mode.png" />
     <link
       rel="apple-touch-icon"
       sizes="180x180"
diff --git a/docs/src/App.vue b/docs/src/App.vue
index fcd1715..b30f8bf 100644
--- a/docs/src/App.vue
+++ b/docs/src/App.vue
@@ -72,6 +72,14 @@
             <div
               class="flex items-center space-x-6 sm:space-x-10 ml-6 sm:ml-10"
             >
+              <div class="rounded-md overflow-hidden">
+                <a href="https://www.buymeacoffee.com/kenhyuwa" target="_blank"
+                  ><img
+                    src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png"
+                    alt="Buy Me A Coffee"
+                    class="w-32 h-auto"
+                /></a>
+              </div>
               <a
                 href="https://github.com/kenhyuwa/litepie-datepicker"
                 class="text-gray-300 hover:text-gray-400 transition-colors duration-200"
@@ -305,7 +313,7 @@
             </div>
           </div>
           <div
-            class="grid grid-cols-1 lg:grid-cols-2 gap-y-8 sm:gap-y-12 lg:gap-y-0 lg:gap-x-8"
+            class="grid grid-cols-1 lg:grid-cols-2 gap-y-8 sm:gap-y-12 lg:gap-y-0 lg:gap-x-10"
           >
             <div id="light-mode" class="pt-6 sm:pt-8">
               <h3 class="group flex items-center font-semibold">
@@ -325,7 +333,7 @@
                     <code>`litepie-primary`</code>.
                   </p>
                 </div>
-                <div class="w-full">
+                <div class="w-full max-w-md">
                   <litepie-datepicker
                     v-model="dateValue.light"
                     :formatter="formatter"
@@ -333,7 +341,7 @@
                 </div>
               </div>
             </div>
-            <div id="dark-mode" class="pt-6 sm:pt-8">
+            <div id="dark-mode" class="dark dark:bg-gray-800 pt-6 sm:pt-8">
               <h3 class="group flex items-center font-semibold">
                 <a
                   href="#dark-mode"
@@ -353,7 +361,7 @@
                     configuration.
                   </p>
                 </div>
-                <div class="dark w-full">
+                <div class="w-full max-w-md">
                   <litepie-datepicker
                     v-model="dateValue.dark"
                     :formatter="formatter"
@@ -394,15 +402,15 @@
                 This config if you don't need change any <code>`props`</code>.
               </p>
               <div
-                class="mt-6 grid grid-cols-1 lg:grid-cols-2 gap-y-8 sm:gap-y-12 lg:gap-y-0 lg:gap-x-8"
+                class="mt-6 grid grid-cols-1 lg:grid-cols-3 gap-y-8 sm:gap-y-12 lg:gap-y-0 lg:gap-x-8"
               >
-                <div>
+                <div class="w-full max-w-md">
                   <litepie-datepicker
                     :formatter="playFormatter"
                     v-model="dateValue.defaults"
                   />
                 </div>
-                <div>
+                <div class="col-span-2">
                   <div class="rounded-xl overflow-hidden">
                     <div class="bg-light-blue-500">
                       <v-prims language="html" :code="playground.defaults">
@@ -429,16 +437,16 @@
                 <i class="text-light-blue-400">false</i>.
               </p>
               <div
-                class="mt-6 grid grid-cols-1 lg:grid-cols-2 gap-y-8 sm:gap-y-12 lg:gap-y-0 lg:gap-x-8"
+                class="mt-6 grid grid-cols-1 lg:grid-cols-3 gap-y-8 sm:gap-y-12 lg:gap-y-0 lg:gap-x-8"
               >
-                <div>
+                <div class="w-full max-w-md">
                   <litepie-datepicker
                     :overlay="true"
                     :formatter="playFormatter"
                     v-model="dateValue.overlay"
                   />
                 </div>
-                <div>
+                <div class="col-span-2">
                   <div class="rounded-xl overflow-hidden">
                     <div class="bg-light-blue-500">
                       <v-prims language="html" :code="playground.overlay">
@@ -464,16 +472,16 @@
                 <i class="text-light-blue-400">single date</i>.
               </p>
               <div
-                class="mt-6 grid grid-cols-1 lg:grid-cols-2 gap-y-8 sm:gap-y-12 lg:gap-y-0 lg:gap-x-8"
+                class="mt-6 grid grid-cols-1 lg:grid-cols-3 gap-y-8 sm:gap-y-12 lg:gap-y-0 lg:gap-x-8"
               >
-                <div>
+                <div class="w-full max-w-md">
                   <litepie-datepicker
                     as-single
                     :formatter="playFormatter"
                     v-model="dateValue.asSingle"
                   />
                 </div>
-                <div>
+                <div class="col-span-2">
                   <div class="rounded-xl overflow-hidden">
                     <div class="bg-light-blue-500">
                       <v-prims language="html" :code="playground.asSingle">
@@ -500,9 +508,9 @@
                 with range.
               </p>
               <div
-                class="mt-6 grid grid-cols-1 lg:grid-cols-2 gap-y-8 sm:gap-y-12 lg:gap-y-0 lg:gap-x-8"
+                class="mt-6 grid grid-cols-1 lg:grid-cols-3 gap-y-8 sm:gap-y-12 lg:gap-y-0 lg:gap-x-8"
               >
-                <div>
+                <div class="w-full max-w-md">
                   <litepie-datepicker
                     as-single
                     use-range
@@ -510,7 +518,7 @@
                     v-model="dateValue.asSingleUseRange"
                   />
                 </div>
-                <div>
+                <div class="col-span-2">
                   <div class="rounded-xl overflow-hidden">
                     <div class="bg-light-blue-500">
                       <v-prims
@@ -539,16 +547,16 @@
                 default placeholder use <code>`formatter.date`</code> object.
               </p>
               <div
-                class="mt-6 grid grid-cols-1 lg:grid-cols-2 gap-y-8 sm:gap-y-12 lg:gap-y-0 lg:gap-x-8"
+                class="mt-6 grid grid-cols-1 lg:grid-cols-3 gap-y-8 sm:gap-y-12 lg:gap-y-0 lg:gap-x-8"
               >
-                <div>
+                <div class="w-full max-w-md">
                   <litepie-datepicker
                     placeholder="My Placeholder"
                     :formatter="playFormatter"
                     v-model="dateValue.placeholder"
                   />
                 </div>
-                <div>
+                <div class="col-span-2">
                   <div class="rounded-xl overflow-hidden">
                     <div class="bg-light-blue-500">
                       <v-prims
@@ -577,16 +585,16 @@
                 separator use <code>` ~ `</code>.
               </p>
               <div
-                class="mt-6 grid grid-cols-1 lg:grid-cols-2 gap-y-8 sm:gap-y-12 lg:gap-y-0 lg:gap-x-8"
+                class="mt-6 grid grid-cols-1 lg:grid-cols-3 gap-y-8 sm:gap-y-12 lg:gap-y-0 lg:gap-x-8"
               >
-                <div>
+                <div class="w-full max-w-md">
                   <litepie-datepicker
                     separator=" to "
                     :formatter="playFormatter"
                     v-model="dateValue.separator"
                   />
                 </div>
-                <div>
+                <div class="col-span-2">
                   <div class="rounded-xl overflow-hidden">
                     <div class="bg-light-blue-500">
                       <v-prims language="html" :code="playground.separator">
@@ -626,9 +634,9 @@
                 </div>
               </div>
               <div
-                class="mt-6 grid grid-cols-1 lg:grid-cols-2 gap-y-8 sm:gap-y-12 lg:gap-y-0 lg:gap-x-8"
+                class="mt-6 grid grid-cols-1 lg:grid-cols-3 gap-y-8 sm:gap-y-12 lg:gap-y-0 lg:gap-x-8"
               >
-                <div>
+                <div class="w-full max-w-md">
                   <litepie-datepicker
                     :formatter="{
                       date: 'DD MMM YYYY',
@@ -637,7 +645,7 @@
                     v-model="dateValue.formatter"
                   />
                 </div>
-                <div>
+                <div class="col-span-2">
                   <div class="rounded-xl overflow-hidden">
                     <div class="bg-light-blue-500">
                       <v-prims language="html" :code="playground.formatter">
@@ -664,16 +672,16 @@
                 <i class="text-light-blue-400">true</i>.
               </p>
               <div
-                class="mt-6 grid grid-cols-1 lg:grid-cols-2 gap-y-8 sm:gap-y-12 lg:gap-y-0 lg:gap-x-8"
+                class="mt-6 grid grid-cols-1 lg:grid-cols-3 gap-y-8 sm:gap-y-12 lg:gap-y-0 lg:gap-x-8"
               >
-                <div>
+                <div class="w-full max-w-md">
                   <litepie-datepicker
                     :auto-apply="false"
                     :formatter="playFormatter"
                     v-model="dateValue.autoApply"
                   />
                 </div>
-                <div>
+                <div class="col-span-2">
                   <div class="rounded-xl overflow-hidden">
                     <div class="bg-light-blue-500">
                       <v-prims language="html" :code="playground.autoApply">
@@ -700,16 +708,16 @@
                 <i class="text-light-blue-400">new Date()</i>.
               </p>
               <div
-                class="mt-6 grid grid-cols-1 lg:grid-cols-2 gap-y-8 sm:gap-y-12 lg:gap-y-0 lg:gap-x-8"
+                class="mt-6 grid grid-cols-1 lg:grid-cols-3 gap-y-8 sm:gap-y-12 lg:gap-y-0 lg:gap-x-8"
               >
-                <div>
+                <div class="w-full max-w-md">
                   <litepie-datepicker
                     :start-from="new Date(2020, 0, 1)"
                     :formatter="playFormatter"
                     v-model="dateValue.startFrom"
                   />
                 </div>
-                <div>
+                <div class="col-span-2">
                   <div class="rounded-xl overflow-hidden">
                     <div class="bg-light-blue-500">
                       <v-prims language="html" :code="playground.startFrom">
@@ -731,16 +739,16 @@
                 </span>
               </h3>
               <div
-                class="mt-6 grid grid-cols-1 lg:grid-cols-2 gap-y-8 sm:gap-y-12 lg:gap-y-0 lg:gap-x-8"
+                class="mt-6 grid grid-cols-1 lg:grid-cols-3 gap-y-8 sm:gap-y-12 lg:gap-y-0 lg:gap-x-8"
               >
-                <div>
+                <div class="w-full max-w-md">
                   <litepie-datepicker
                     :shortcuts="false"
                     :formatter="playFormatter"
                     v-model="dateValue.shortcuts"
                   />
                 </div>
-                <div>
+                <div class="col-span-2">
                   <div class="rounded-xl overflow-hidden">
                     <div class="bg-light-blue-500">
                       <v-prims language="html" :code="playground.shortcuts">
@@ -762,9 +770,9 @@
                 </span>
               </h3>
               <div
-                class="mt-6 grid grid-cols-1 lg:grid-cols-2 gap-y-8 sm:gap-y-12 lg:gap-y-0 lg:gap-x-8"
+                class="mt-6 grid grid-cols-1 lg:grid-cols-3 gap-y-8 sm:gap-y-12 lg:gap-y-0 lg:gap-x-8"
               >
-                <div>
+                <div class="w-full max-w-md">
                   <litepie-datepicker
                     :disable-date="
                       $event =>
@@ -774,7 +782,7 @@
                     v-model="dateValue.disableDate"
                   />
                 </div>
-                <div>
+                <div class="col-span-2">
                   <div class="rounded-xl overflow-hidden">
                     <div class="bg-light-blue-500">
                       <v-prims
@@ -798,9 +806,9 @@
                 </span>
               </h3>
               <div
-                class="mt-6 grid grid-cols-1 lg:grid-cols-2 gap-y-8 sm:gap-y-12 lg:gap-y-0 lg:gap-x-8"
+                class="mt-6 grid grid-cols-1 lg:grid-cols-3 gap-y-8 sm:gap-y-12 lg:gap-y-0 lg:gap-x-8"
               >
-                <div>
+                <div class="w-full max-w-md">
                   <litepie-datepicker
                     :disable-date="
                       $event =>
@@ -811,7 +819,7 @@
                     v-model="dateValue.disableInRange"
                   />
                 </div>
-                <div>
+                <div class="col-span-2">
                   <div class="rounded-xl overflow-hidden">
                     <div class="bg-light-blue-500">
                       <v-prims
@@ -836,7 +844,7 @@
                 </span>
               </h3>
               <div
-                class="mt-6 grid grid-cols-1 lg:grid-cols-2 gap-y-8 sm:gap-y-12 lg:gap-y-0 lg:gap-x-8"
+                class="mt-6 grid grid-cols-1 lg:grid-cols-3 gap-y-8 sm:gap-y-12 lg:gap-y-0 lg:gap-x-8"
               >
                 <div class="flex">
                   <div class="flex-1">
@@ -856,7 +864,7 @@
                     </button>
                   </div>
                 </div>
-                <div>
+                <div class="col-span-2">
                   <div class="rounded-xl overflow-hidden">
                     <div class="bg-light-blue-500">
                       <v-prims language="html" :code="playground.trigger">
@@ -878,9 +886,9 @@
                 </span>
               </h3>
               <div
-                class="mt-6 grid grid-cols-1 lg:grid-cols-2 gap-y-8 sm:gap-y-12 lg:gap-y-0 lg:gap-x-8"
+                class="mt-6 grid grid-cols-1 lg:grid-cols-3 gap-y-8 sm:gap-y-12 lg:gap-y-0 lg:gap-x-8"
               >
-                <div>
+                <div class="w-full max-w-md">
                   <litepie-datepicker
                     :formatter="playFormatter"
                     v-model="dateValue.slots"
@@ -922,7 +930,7 @@
                     </div>
                   </litepie-datepicker>
                 </div>
-                <div>
+                <div class="col-span-2">
                   <div class="rounded-xl overflow-hidden">
                     <div class="bg-light-blue-500">
                       <v-prims language="html" :code="playground.useSlot">
@@ -962,15 +970,15 @@
                 </span>
               </h3>
               <div
-                class="mt-6 grid grid-cols-1 lg:grid-cols-2 gap-y-8 sm:gap-y-12 lg:gap-y-0 lg:gap-x-8"
+                class="mt-6 grid grid-cols-1 lg:grid-cols-3 gap-y-8 sm:gap-y-12 lg:gap-y-0 lg:gap-x-8"
               >
-                <div>
+                <div class="w-full max-w-md">
                   <litepie-datepicker
                     :formatter="playFormatter"
                     v-model="dateValue.useArray"
                   />
                 </div>
-                <div>
+                <div class="col-span-2">
                   <div class="rounded-xl overflow-hidden">
                     <div class="bg-light-blue-500">
                       <v-prims language="html" :code="advance.useArray">
@@ -992,15 +1000,15 @@
                 </span>
               </h3>
               <div
-                class="mt-6 grid grid-cols-1 lg:grid-cols-2 gap-y-8 sm:gap-y-12 lg:gap-y-0 lg:gap-x-8"
+                class="mt-6 grid grid-cols-1 lg:grid-cols-3 gap-y-8 sm:gap-y-12 lg:gap-y-0 lg:gap-x-8"
               >
-                <div>
+                <div class="w-full max-w-md">
                   <litepie-datepicker
                     :formatter="playFormatter"
                     v-model="dateValue.useObject"
                   />
                 </div>
-                <div>
+                <div class="col-span-2">
                   <div class="rounded-xl overflow-hidden">
                     <div class="bg-light-blue-500">
                       <v-prims language="html" :code="advance.useObject">
@@ -1022,15 +1030,15 @@
                 </span>
               </h3>
               <div
-                class="mt-6 grid grid-cols-1 lg:grid-cols-2 gap-y-8 sm:gap-y-12 lg:gap-y-0 lg:gap-x-8"
+                class="mt-6 grid grid-cols-1 lg:grid-cols-3 gap-y-8 sm:gap-y-12 lg:gap-y-0 lg:gap-x-8"
               >
-                <div>
+                <div class="w-full max-w-md">
                   <litepie-datepicker
                     :formatter="playFormatter"
                     v-model="dateValue.useString"
                   />
                 </div>
-                <div>
+                <div class="col-span-2">
                   <div class="rounded-xl overflow-hidden">
                     <div class="bg-light-blue-500">
                       <v-prims language="html" :code="advance.useString">
@@ -1040,6 +1048,37 @@
                 </div>
               </div>
             </div>
+            <div id="custom-shortcuts" class="pt-6 sm:pt-8">
+              <h3 class="group flex items-center font-semibold">
+                <a
+                  href="#custom-shortcuts"
+                  class="absolute after:hash opacity-0 group-hover:opacity-100 -ml-4 text-light-blue-400"
+                  aria-label="Anchor"
+                ></a>
+                <span class="text-lg text-gray-900">
+                  Custom shortcuts
+                </span>
+              </h3>
+              <div
+                class="mt-6 grid grid-cols-1 lg:grid-cols-3 gap-y-8 sm:gap-y-12 lg:gap-y-0 lg:gap-x-8"
+              >
+                <div class="w-full max-w-md">
+                  <litepie-datepicker
+                    :formatter="playFormatter"
+                    :shortcuts="customShortcuts"
+                    v-model="dateValue.customShortcuts"
+                  />
+                </div>
+                <div class="col-span-2">
+                  <div class="rounded-xl overflow-hidden">
+                    <div class="bg-light-blue-500">
+                      <v-prims language="html" :code="advance.customShortcuts">
+                      </v-prims>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
         </section>
         <section
@@ -1177,26 +1216,29 @@
 </template>
 
 <script>
-import dayjs from "dayjs";
-import { reactive, ref, watchEffect } from "vue";
-import content from "./content";
-import VPrims from "./prims";
+import dayjs from 'dayjs';
+import { reactive, ref, watchEffect } from 'vue';
+import content from './content';
+import VPrims from './prims';
 
 export default {
-  name: "App",
+  name: 'App',
   components: { VPrims },
   setup() {
     const myRef = ref(null);
+
     const formatter = ref({
-      date: "YYYY-MMM-DD HH:mm:ss",
-      month: "MMM"
+      date: 'YYYY-MMM-DD HH:mm:ss',
+      month: 'MMM'
     });
+
     const heroModel = ref([
       dayjs().format(formatter.value.date),
       dayjs()
-        .add(1, "M")
+        .add(1, 'M')
         .format(formatter.value.date)
     ]);
+
     const dateValue = reactive({
       light: [],
       dark: [],
@@ -1216,16 +1258,40 @@ export default {
       slots: [],
       useArray: [],
       useObject: {
-        startDate: "",
-        endDate: ""
+        startDate: '',
+        endDate: ''
       },
-      useString: ""
+      useString: '',
+      customShortcuts: []
     });
+
     const playFormatter = ref({
-      date: "YYYY-MM-DD",
-      month: "MMM"
+      date: 'YYYY-MM-DD',
+      month: 'MMM'
     });
 
+    const customShortcuts = () => {
+      return [
+        {
+          label: 'Tomorrow',
+          atClick: () => {
+            const date = new Date();
+            return [new Date(date.setDate(date.getDate() + 1)), date];
+          }
+        },
+        {
+          label: 'Last Years',
+          atClick: () => {
+            const date = new Date();
+            return [
+              new Date(date.setFullYear(date.getFullYear() - 1)),
+              new Date()
+            ];
+          }
+        }
+      ];
+    };
+
     watchEffect(() => {
       setInterval(() => {
         if (myRef.value && !myRef.value.isShow) {
@@ -1251,6 +1317,7 @@ export default {
       heroModel,
       dateValue,
       playFormatter,
+      customShortcuts,
       defaultContent: content(),
       playground: content().playground,
       advance: content().advance
diff --git a/docs/src/content.js b/docs/src/content.js
index 7c17181..cac1761 100644
--- a/docs/src/content.js
+++ b/docs/src/content.js
@@ -538,6 +538,55 @@ export default {
     };
   }
 };
+</script>`;
+
+  const customShortcuts = `<template>
+  <div class="flex">
+    <litepie-datepicker
+      :shortcuts='customShortcuts'
+      v-model="dateValue"
+    ></litepie-datepicker>
+  </div>
+</template>
+
+<script>
+import { ref } from 'vue';
+
+export default {
+  name: 'MyComponent',
+  setup() {
+    const dateValue = ref([]);
+    const customShortcuts = () => {
+      return [
+        {
+          label: 'Last 15 Days',
+          atClick: () => {
+            const date = new Date();
+            return [
+              new Date(date.setDate(date.getDate() + 1)), 
+              date
+            ];
+          }
+        },
+        {
+          label: 'Last Years',
+          atClick: () => {
+            const date = new Date();
+            return [
+              new Date(date.setFullYear(date.getFullYear() - 1)),
+              new Date()
+            ];
+          }
+        }
+      ];
+    }
+
+    return {
+      dateValue,
+      customShortcuts
+    };
+  }
+};
 </script>`;
 
   return {
@@ -563,6 +612,7 @@ export default {
       useArray,
       useObject,
       useString,
+      customShortcuts
     }
   };
 };
diff --git a/package-lock.json b/package-lock.json
index 6366020..14831ff 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,11 +1,11 @@
 {
   "name": "litepie-datepicker",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
-      "version": "1.0.3",
+      "version": "1.0.4",
       "license": "MIT",
       "devDependencies": {
         "@babel/core": "^7.12.10",
@@ -25,7 +25,7 @@
         "dayjs": "^1.10.4",
         "eslint-config-prettier": "^8.1.0",
         "eslint-plugin-prettier": "^3.3.1",
-        "litepie-datepicker": "^1.0.3",
+        "litepie-datepicker": "^1.0.4",
         "minimist": "^1.2.5",
         "postcss": "^7.0.35",
         "prismjs": "^1.23.0",
@@ -8774,9 +8774,9 @@
       "dev": true
     },
     "node_modules/litepie-datepicker": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/litepie-datepicker/-/litepie-datepicker-1.0.3.tgz",
-      "integrity": "sha512-bxlpKOSZUshW0D2c4siOn8k1FqgxrJtuU9CmYwHwJkwBB8IpCXCr6nlurI319wNogWNmbSQY7YlE8dGNbM3FMQ==",
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/litepie-datepicker/-/litepie-datepicker-1.0.4.tgz",
+      "integrity": "sha512-+rsHZemNC7naNQ69nbE/QMBG3qfWOigTvZq7QA5Ta4lzdu17IWGy7Yai+8d3C1JhEhNjysfBBGa5ZSuIvMaW5A==",
       "dev": true,
       "engines": {
         "node": ">=12"
@@ -23251,9 +23251,9 @@
       "dev": true
     },
     "litepie-datepicker": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/litepie-datepicker/-/litepie-datepicker-1.0.3.tgz",
-      "integrity": "sha512-bxlpKOSZUshW0D2c4siOn8k1FqgxrJtuU9CmYwHwJkwBB8IpCXCr6nlurI319wNogWNmbSQY7YlE8dGNbM3FMQ==",
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/litepie-datepicker/-/litepie-datepicker-1.0.4.tgz",
+      "integrity": "sha512-+rsHZemNC7naNQ69nbE/QMBG3qfWOigTvZq7QA5Ta4lzdu17IWGy7Yai+8d3C1JhEhNjysfBBGa5ZSuIvMaW5A==",
       "dev": true,
       "requires": {}
     },
diff --git a/package.json b/package.json
index cfaa6f4..5da862f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "litepie-datepicker",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "A date range picker component for Vue.js and Tailwind CSS, dependent to day.js",
   "main": "dist/litepie-datepicker.ssr.js",
   "browser": "dist/litepie-datepicker.esm.js",
@@ -63,7 +63,7 @@
     "dayjs": "^1.10.4",
     "eslint-config-prettier": "^8.1.0",
     "eslint-plugin-prettier": "^3.3.1",
-    "litepie-datepicker": "^1.0.3",
+    "litepie-datepicker": "^1.0.4",
     "minimist": "^1.2.5",
     "postcss": "^7.0.35",
     "prismjs": "^1.23.0",
diff --git a/src/components/Calendar.vue b/src/components/Calendar.vue
index e0f7e24..cd1b012 100644
--- a/src/components/Calendar.vue
+++ b/src/components/Calendar.vue
@@ -37,7 +37,7 @@
           </transition>
           <button
             type="button"
-            class="litepie-datepicker-date relative w-10 h-10 lg:w-9 lg:h-9 flex justify-center items-center text-xs 2xl:text-sm focus:outline-none"
+            class="litepie-datepicker-date relative w-full h-10 lg:w-9 lg:h-9 flex justify-center items-center text-xs 2xl:text-sm focus:outline-none"
             :class="[
               datepickerClasses(date),
               asRange ? 'transition-all' : 'transition-colors'
diff --git a/src/litepie-datepicker.vue b/src/litepie-datepicker.vue
index 50e38f3..e464ca3 100644
--- a/src/litepie-datepicker.vue
+++ b/src/litepie-datepicker.vue
@@ -1141,7 +1141,7 @@ export default /*#__PURE__*/ defineComponent({
 
     const forceEmit = (s, e) => {
       datepicker.previous = dayjs(s, props.formatter.date, true);
-      datepicker.next = dayjs(e, props.formatter.date, true).add(1, 'month');
+      datepicker.next = dayjs(e, props.formatter.date, true);
       if (
         dayjs.duration(datepicker.next.diff(datepicker.previous)).$d.months ===
           2 ||