Merge pull request #130 from elreco/OnTheFlyLocaleImport

feat(i18n): import locales outside the component

docs/advanced-features.md

@@ -18,7 +18,7 @@
         atClick: () => {
           const date = new Date();
           return [
-            new Date(date.setDate(date.getDate() - 14)), 
+            new Date(date.setDate(date.getDate() - 14)),
             new Date()
           ];
         }
@@ -159,7 +159,10 @@ const customShortcuts = () => {
 
 ## Localization (i18n)
 
-Vue Tailwind Datepicker extend to day.js<br>
+Vue Tailwind Datepicker now supports on-the-fly locale importing, extending to day.js. <br>
+This means you only import the specific locale you need directly into your project, reducing unnecessary load of unused locales.
+<br>
+<br>
 [List of supported locales](https://github.com/iamkun/dayjs/tree/dev/src/locale)
 
 <DemoLayout>
@@ -174,6 +177,8 @@ Vue Tailwind Datepicker extend to day.js<br>
 ```vue
 <script setup>
 import { ref } from "vue";
+// Import the specific locale from day.js
+import 'dayjs/locale/fr'  // Replace 'fr' with your desired locale
 const dateValue = ref([]);
 const options = ref({
   shortcuts: {
@@ -192,7 +197,7 @@ const options = ref({
 
 <template>
   <vue-tailwind-datepicker
-    i18n="id"
+    i18n="fr"
     :auto-apply="false"
     :options="options"
     v-model="dateValue"

src/App.vue

@@ -3,14 +3,17 @@ import dayjs from 'dayjs'
 import { ref } from 'vue'
 import type { Dayjs } from 'dayjs'
 import VueTailwindDatePicker from './VueTailwindDatePicker.vue'
+import 'dayjs/locale/fr'
+import 'dayjs/locale/de'
+import 'dayjs/locale/es'
 
 const dateValue = ref({
   startDate: dayjs().format('YYYY-MM-DD HH:mm:ss'),
   endDate: dayjs().format('YYYY-MM-DD HH:mm:ss'),
 })
 
 const currentLocale = ref('es')
-const locales = ['en', 'es', 'de']
+const locales = ['en', 'es', 'de', 'fr']
 
 function onClickSomething(e: Dayjs) {
   console.log(e)

src/VueTailwindDatePicker.vue

@@ -26,7 +26,7 @@ import {
   watch,
   watchEffect,
 } from 'vue'
-import { localesMap } from './utils'
+import 'dayjs/locale/en'
 import VtdHeader from './components/Header.vue'
 import VtdShortcut from './components/Shortcut.vue'
 import VtdCalendar from './components/Calendar.vue'
@@ -1261,11 +1261,7 @@ watchEffect(() => {
   const locale = props.i18n
   const modelValueCloned = props.modelValue
   nextTick(async () => {
-    if (locale in localesMap) {
-      const localeData = await localesMap[locale]()
-      dayjs.locale(localeData, undefined, true)
-      dayjs.locale(locale)
-    }
+    dayjs.locale(locale)
 
     let s, e
     if (asRange()) {

src/utils.ts

@@ -9,10 +9,3 @@ export function injectStrict<T>(key: InjectionKey<T>, fallback?: T) {
 
   return resolved
 }
-
-export const localesMap = Object.fromEntries(
-  Object.entries(import.meta.glob('../node_modules/dayjs/esm/locale/*.js', { import: 'default' })).map(
-    ([path, loadLocale]) => [path.match(/([\w-]*)\.js$/)?.[1], loadLocale],
-  ),
-) as Record<string, () => Promise<ILocale>>
-