added i18n, fix issues placement and locale mode changed

Author: kenhyuwa

CHANGELOG.md

@@ -38,7 +38,14 @@ All notable changes to this project will be documented in this file.
 
 ## [1.0.7]
 
-- Fix some style
+- Fix some style.
+
+## [1.0.8]
+
+- Add localization for `shortcuts`, `footer` & `dayjs` locale.
+- New props `i18n`, [Example](https://litepie.com/#i18n).
+- Change local model `value` to `pickerValue`.
+- Fix issues placement arrow, `left` to `right`.
 
 [Released]: https://github.com/kenhyuwa/litepie-datepicker/
 [1.0.0]: https://github.com/kenhyuwa/litepie-datepicker/releases/tag/v1.0.0
@@ -49,3 +56,4 @@ All notable changes to this project will be documented in this file.
 [1.0.5]: https://github.com/kenhyuwa/litepie-datepicker/releases/tag/v1.0.5
 [1.0.6]: https://github.com/kenhyuwa/litepie-datepicker/releases/tag/v1.0.6
 [1.0.7]: https://github.com/kenhyuwa/litepie-datepicker/releases/tag/v1.0.7
+[1.0.8]: https://github.com/kenhyuwa/litepie-datepicker/releases/tag/v1.0.8

README.md

@@ -64,6 +64,14 @@ export default {
       <img src="https://raw.githubusercontent.com/kenhyuwa/litepie-datepicker/main/assets/dark-mode.png" alt="Dark mode" />
   </p>
 
+## Road map todo
+
+Add shortcuts and footer localization match with `dayjs` locale.
+
+- [x] English [en]
+- [x] Indonesia [id]
+- [ ] _other_
+
 ## Changelog
 All notable changes to this project will be documented in this file, [Read](CHANGELOG.md).
 

dev/serve.vue

@@ -5,13 +5,13 @@
     >
       <div class="mt-10 w-full">
         <div
-          class="max-w-lg mx-auto px-6 py-5 bg-white dark:bg-gray-800 rounded-lg"
+          class="max-w-lg mx-autos ml-auto px-6 py-5 bg-white dark:bg-gray-800 rounded-lg"
         >
           <div class="flex flex-col">
             <div class="w-full">
               <vue3-tailwind-datepicker
                 ref="s"
-                overlay
+                i18n="id"
                 :use-range="true"
                 :formatter="formatter"
                 v-model="dateValue"
@@ -99,10 +99,10 @@ export default defineComponent({
       ];
     };
     onMounted(() => {
-      dateValue.value = {
-        startDate: '20 Mar 2021',
-        endDate: '20 Aug 2021'
-      };
+      // dateValue.value = {
+      //   startDate: '20 Mar 2021',
+      //   endDate: '20 Aug 2021'
+      // };
       // dateValue.value = [new Date(2019, 9, 8), new Date(2019, 9, 19)];
       // dateValue.value = `${new Date(2019, 9, 8).toString()} ~ ${new Date(
       //   2019,
@@ -120,8 +120,8 @@ export default defineComponent({
       shortcuts,
       away,
       formatter: ref({
-        date: 'DD MMM YYYY',
-        month: 'MMM'
+        date: 'DD MMMM YYYY',
+        month: 'MMMM'
       })
     };
   }

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "litepie-datepicker",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "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",

package.json

@@ -8,40 +8,41 @@
       leave-from-class="opacity-100"
       leave-to-class="opacity-0"
     >
-      <div v-for="(date, keyDate) in calendar.date()" :key="keyDate">
-        <div
-          class="relative"
-          :class="{ 'litepie-tooltip': asRange && date.duration() }"
-          :data-tooltip="`${date.duration()}`"
+      <div
+        v-for="(date, keyDate) in calendar.date()"
+        :key="keyDate"
+        class="relative"
+        :class="{ 'litepie-tooltip': asRange && date.duration() }"
+        :data-tooltip="`${date.duration()}`"
+      >
+        <transition
+          enter-from-class="opacity-0"
+          enter-to-class="opacity-100"
+          enter-active-class="transition-opacity ease-out duration-200"
+          leave-active-class="transition-opacity ease-in duration-150"
+          leave-from-class="opacity-100"
+          leave-to-class="opacity-0"
         >
-          <transition
-            enter-from-class="opacity-0"
-            enter-to-class="opacity-100"
-            enter-active-class="transition-opacity ease-out duration-200"
-            leave-active-class="transition-opacity ease-in duration-150"
-            leave-from-class="opacity-100"
-            leave-to-class="opacity-0"
-          >
-            <span
-              v-if="isBetweenRange(date) || date.hovered()"
-              class="absolute bg-litepie-primary-100 dark:bg-litepie-secondary-700 dark:bg-opacity-50"
-              :class="betweenRangeClasses(date)"
-            ></span>
-          </transition>
-          <button
-            type="button"
-            class="litepie-datepicker-date relative w-12 h-12 lg:w-10 lg:h-10 flex justify-center items-center text-xs 2xl:text-sm focus:outline-none"
-            :class="[
-              datepickerClasses(date),
-              asRange ? 'transition-all' : 'transition-colors'
-            ]"
-            :disabled="date.disabled || date.inRange()"
-            @click="$emit('update:date', date, asPrevOrNext)"
-            @mouseenter="atMouseOver(date)"
-            v-text="date.date()"
-            :data-date="date.toDate()"
-          ></button>
-        </div>
+          <span
+            v-if="isBetweenRange(date) || date.hovered()"
+            class="absolute bg-litepie-primary-100 dark:bg-litepie-secondary-700 dark:bg-opacity-50"
+            :class="betweenRangeClasses(date)"
+          ></span>
+        </transition>
+        <button
+          type="button"
+          class="litepie-datepicker-date relative w-12 h-12 lg:w-10 lg:h-10 flex justify-center items-center text-xs 2xl:text-sm focus:outline-none"
+          :class="[
+            datepickerClasses(date),
+            asRange ? 'transition-all' : 'transition-colors'
+          ]"
+          :disabled="date.disabled || date.inRange()"
+          @click="$emit('update:date', date, asPrevOrNext)"
+          @mouseenter="atMouseOver(date)"
+          @focusin="atMouseOver(date)"
+          v-text="date.date()"
+          :data-date="date.toDate()"
+        ></button>
       </div>
     </transition-group>
   </div>

src/components/Calendar.vue

@@ -27,7 +27,7 @@
           class="block text-sm lg:text-xs px-2 py-2 sm:leading-4 whitespace-nowrap font-medium rounded text-litepie-primary-600 hover:text-litepie-primary-700 transition-colors hover:bg-litepie-secondary-100 focus:bg-litepie-secondary-100 focus:text-litepie-primary-600 dark:hover:bg-litepie-secondary-700 dark:hover:text-litepie-primary-300 dark:text-litepie-primary-400 dark:focus:bg-litepie-secondary-700 dark:focus:text-litepie-primary-300"
           @click.prevent="setToToday"
         >
-          Today
+          {{ jsonLocale && jsonLocale.today }}
         </a>
       </li>
       <li>
@@ -36,7 +36,7 @@
           class="block text-sm lg:text-xs px-2 py-2 sm:leading-4 whitespace-nowrap font-medium rounded text-litepie-primary-600 hover:text-litepie-primary-700 transition-colors hover:bg-litepie-secondary-100 focus:bg-litepie-secondary-100 focus:text-litepie-primary-600 dark:hover:bg-litepie-secondary-700 dark:hover:text-litepie-primary-300 dark:text-litepie-primary-400 dark:focus:bg-litepie-secondary-700 dark:focus:text-litepie-primary-300"
           @click.prevent="setToYesterday"
         >
-          Yesterday
+          {{ jsonLocale && jsonLocale.yesterday }}
         </a>
       </li>
       <li>
@@ -45,7 +45,7 @@
           class="block text-sm lg:text-xs px-2 py-2 sm:leading-4 whitespace-nowrap font-medium rounded text-litepie-primary-600 hover:text-litepie-primary-700 transition-colors hover:bg-litepie-secondary-100 focus:bg-litepie-secondary-100 focus:text-litepie-primary-600 dark:hover:bg-litepie-secondary-700 dark:hover:text-litepie-primary-300 dark:text-litepie-primary-400 dark:focus:bg-litepie-secondary-700 dark:focus:text-litepie-primary-300"
           @click.prevent="setToLastDay(7)"
         >
-          Last 7 Days
+          {{ jsonLocale && jsonLocale.past(7) }}
         </a>
       </li>
       <li>
@@ -54,7 +54,7 @@
           class="block text-sm lg:text-xs px-2 py-2 sm:leading-4 whitespace-nowrap font-medium rounded text-litepie-primary-600 hover:text-litepie-primary-700 transition-colors hover:bg-litepie-secondary-100 focus:bg-litepie-secondary-100 focus:text-litepie-primary-600 dark:hover:bg-litepie-secondary-700 dark:hover:text-litepie-primary-300 dark:text-litepie-primary-400 dark:focus:bg-litepie-secondary-700 dark:focus:text-litepie-primary-300"
           @click.prevent="setToLastDay(30)"
         >
-          Last 30 Days
+          {{ jsonLocale && jsonLocale.past(30) }}
         </a>
       </li>
       <li>
@@ -63,7 +63,7 @@
           class="block text-sm lg:text-xs px-2 py-2 sm:leading-4 whitespace-nowrap font-medium rounded text-litepie-primary-600 hover:text-litepie-primary-700 transition-colors hover:bg-litepie-secondary-100 focus:bg-litepie-secondary-100 focus:text-litepie-primary-600 dark:hover:bg-litepie-secondary-700 dark:hover:text-litepie-primary-300 dark:text-litepie-primary-400 dark:focus:bg-litepie-secondary-700 dark:focus:text-litepie-primary-300"
           @click.prevent="setToThisMonth"
         >
-          This Month
+          {{ jsonLocale && jsonLocale.currentMonth }}
         </a>
       </li>
       <li>
@@ -72,25 +72,27 @@
           class="block text-sm lg:text-xs px-2 py-2 sm:leading-4 whitespace-nowrap font-medium rounded text-litepie-primary-600 hover:text-litepie-primary-700 transition-colors hover:bg-litepie-secondary-100 focus:bg-litepie-secondary-100 focus:text-litepie-primary-600 dark:hover:bg-litepie-secondary-700 dark:hover:text-litepie-primary-300 dark:text-litepie-primary-400 dark:focus:bg-litepie-secondary-700 dark:focus:text-litepie-primary-300"
           @click.prevent="setToLastMonth"
         >
-          Last Month
+          {{ jsonLocale && jsonLocale.pastMonth }}
         </a>
       </li>
     </ol>
   </div>
 </template>
 
 <script>
-import { inject } from 'vue';
+import { ref, inject, watchEffect } from 'vue';
 
 export default {
   name: 'LitepieShortcut',
   props: {
     shortcuts: [Boolean, Function],
     asRange: Boolean,
-    asSingle: Boolean
+    asSingle: Boolean,
+    i18n: String
   },
   inheritAttrs: false,
   setup(props) {
+    const jsonLocale = ref(null);
     const setToToday = inject('setToToday');
     const setToYesterday = inject('setToYesterday');
     const setToLastDay = inject('setToLastDay');
@@ -104,8 +106,26 @@ export default {
         return false;
       }
     };
+    const locale = () => {
+      return import(`./../locale/${props.i18n}`)
+        .then(async module => {
+          return await module.default;
+        })
+        .catch(() => {
+          return import(`./../locale/en`).then(async module => {
+            return await module.default;
+          });
+        });
+    };
+
+    watchEffect(() => {
+      locale().then(v => {
+        jsonLocale.value = v;
+      });
+    });
 
     return {
+      jsonLocale,
       setToToday,
       setToYesterday,
       setToLastDay,

src/components/Shortcut.vue

@@ -97,3 +97,10 @@ export const useDirective = binding => {
     }
   });
 };
+
+export const useVisibleViewport = el => {
+  const { right } = el.getBoundingClientRect();
+  const vWidth = window.innerWidth || document.documentElement.clientWidth;
+
+  return right < vWidth;
+};