fix bug localization

kenhyuwa · Mar 20, 2021 · e4ec8f5 · e4ec8f5
1 parent 6604d5b
commit e4ec8f5
Show file tree

Hide file tree

Showing 10 changed files with 133 additions and 168 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -54,6 +54,10 @@ All notable changes to this project will be documented in this file.
 - Fix bug `auto-apply` if shortcuts clicked.
 - Add new props `options`, [Example](https://litepie.com/#options).
 
+## [1.0.10]
+
+- Fix bug `start-from` if using localization.
+
 [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
@@ -65,3 +69,4 @@ All notable changes to this project will be documented in this file.
 [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
 [1.0.9]: https://github.com/kenhyuwa/litepie-datepicker/releases/tag/v1.0.9
+[1.0.10]: https://github.com/kenhyuwa/litepie-datepicker/releases/tag/v1.0.10
diff --git a/build/rollup.config.js b/build/rollup.config.js
@@ -100,7 +100,6 @@ if (!argv.format || argv.format === 'es') {
     external,
     output: {
       file: 'dist/litepie-datepicker.esm.js',
-      inlineDynamicImports: true,
       format: 'esm',
       exports: 'named'
     },
@@ -133,7 +132,6 @@ if (!argv.format || argv.format === 'cjs') {
     output: {
       compact: true,
       file: 'dist/litepie-datepicker.ssr.js',
-      inlineDynamicImports: true,
       format: 'cjs',
       name: 'LitepieDatepicker',
       exports: 'auto',
@@ -158,7 +156,6 @@ if (!argv.format || argv.format === 'iife') {
     output: {
       compact: true,
       file: 'dist/litepie-datepicker.min.js',
-      inlineDynamicImports: true,
       format: 'iife',
       name: 'LitepieDatepicker',
       exports: 'auto',

diff --git a/dev/serve.vue b/dev/serve.vue
@@ -11,7 +11,7 @@
             <div class="w-full">
               <litepie-datepicker
                 ref="s"
-                i18n="id"
+                i18n="zh"
                 :use-range="true"
                 :formatter="formatter"
                 v-model="dateValue"
@@ -100,8 +100,8 @@ export default defineComponent({
     };
     onMounted(() => {
       // dateValue.value = {
-      //   startDate: '20 Mar 2021',
-      //   endDate: '20 Aug 2021'
+      //   startDate: '20 一月 2021',
+      //   endDate: '20 一月 2021'
       // };
       // dateValue.value = [new Date(2019, 9, 8), new Date(2019, 9, 19)];
       // dateValue.value = `${new Date(2019, 9, 8).toString()} ~ ${new Date(

diff --git a/docs/src/App.vue b/docs/src/App.vue
@@ -1413,7 +1413,7 @@ export default {
           const [s, e] = heroModel.value;
           const { $H, $m, $s } = dayjs();
 
-          myRef.value.value = `${dayjs(s, formatter.value.date)
+          myRef.value.pickerValue = `${dayjs(s, formatter.value.date)
             .hour($H)
             .minute($m)
             .second($s)

diff --git a/docs/src/content.js b/docs/src/content.js
@@ -648,7 +648,7 @@ import { ref } from 'vue';
 export default {
   name: 'MyComponent',
   setup() {
-    const dateValue = ref('');
+    const dateValue = ref([]);
     const options = ref({
       shortcuts: {
         today: 'Hari ini',

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "litepie-datepicker",
-  "version": "1.0.9",
+  "version": "1.0.10",
   "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",

diff --git a/src/entry.esm.js b/src/entry.esm.js
@@ -9,7 +9,7 @@ export default /*#__PURE__*/ (() => {
   const installable = component;
 
   // Attach install function executed by Vue.use()
-  installable.install = (app, options) => {
+  installable.install = app => {
     app.component('LitepieDatepicker', installable);
   };
   return installable;

diff --git a/src/litepie-datepicker.vue b/src/litepie-datepicker.vue
@@ -1411,147 +1411,136 @@ export default /*#__PURE__*/ defineComponent({
       }
     });
 
-    watchEffect(async () => {
-      const locale = props.i18n;
-      await import(`dayjs/locale/${locale}.js`)
-        .then(async () => {
-          await dayjs.locale(locale);
-          datepicker.value = {
-            previous: dayjs(),
-            next: dayjs().add(1, 'month'),
-            year: {
-              previous: dayjs().year(),
-              next: dayjs().year()
-            },
-            weeks: dayjs.weekdaysShort(),
-            months:
-              props.formatter.month === 'MMM'
-                ? dayjs.monthsShort()
-                : dayjs.months()
-          };
-        })
-        .catch(() => {
-          console.warn(
-            `[Litepie Datepicker]: List of supported locales https://github.com/iamkun/dayjs/tree/dev/src/locale`
-          );
-        });
-    });
-
     onMounted(() => {
       nextTick(() => {
-        let s, e;
-        if (asRange()) {
-          if (useArray()) {
-            if (props.modelValue.length > 0) {
-              const [start, end] = props.modelValue;
-              s = dayjs(start, props.formatter.date, true);
-              e = dayjs(end, props.formatter.date, true);
-            }
-          } else if (useObject()) {
-            if (!isProxy(props.modelValue)) {
-              try {
-                console.log(Object.keys(props.modelValue));
-              } catch (e) {
-                console.warn(
-                  '[Litepie Datepicker]: It looks like you want to use Object as the argument %cv-model',
-                  'font-style: italic; color: #42b883;',
-                  ', but you pass it undefined or null.'
-                );
-                console.warn(
-                  `[Litepie Datepicker]: We has replace with %c{ startDate: '', endDate: '' }`,
-                  'font-style: italic; color: #42b883;',
-                  ', but you can replace manually.'
-                );
-                emit('update:modelValue', {
-                  startDate: '',
-                  endDate: ''
-                });
+        const locale = props.i18n;
+        import(`dayjs/locale/${locale}.js`)
+          .then(() => {
+            dayjs.locale(locale);
+            let s, e;
+            if (asRange()) {
+              if (useArray()) {
+                if (props.modelValue.length > 0) {
+                  const [start, end] = props.modelValue;
+                  s = dayjs(start, props.formatter.date, true);
+                  e = dayjs(end, props.formatter.date, true);
+                }
+              } else if (useObject()) {
+                if (!isProxy(props.modelValue)) {
+                  try {
+                    console.log(Object.keys(props.modelValue));
+                  } catch (e) {
+                    console.warn(
+                      '[Litepie Datepicker]: It looks like you want to use Object as the argument %cv-model',
+                      'font-style: italic; color: #42b883;',
+                      ', but you pass it undefined or null.'
+                    );
+                    console.warn(
+                      `[Litepie Datepicker]: We has replace with %c{ startDate: '', endDate: '' }`,
+                      'font-style: italic; color: #42b883;',
+                      ', but you can replace manually.'
+                    );
+                    emit('update:modelValue', {
+                      startDate: '',
+                      endDate: ''
+                    });
+                  }
+                }
+                if (props.modelValue) {
+                  const [start, end] = Object.values(props.modelValue);
+                  s = start && dayjs(start, props.formatter.date, true);
+                  e = end && dayjs(end, props.formatter.date, true);
+                }
+              } else {
+                if (props.modelValue) {
+                  const [start, end] = props.modelValue.split(props.separator);
+                  s = dayjs(start, props.formatter.date, true);
+                  e = dayjs(end, props.formatter.date, true);
+                }
               }
-            }
-            if (props.modelValue) {
-              const [start, end] = Object.values(props.modelValue);
-              s = start && dayjs(start, props.formatter.date, true);
-              e = end && dayjs(end, props.formatter.date, true);
-            }
-          } else {
-            if (props.modelValue) {
-              const [start, end] = props.modelValue.split(props.separator);
-              s = dayjs(start, props.formatter.date, true);
-              e = dayjs(end, props.formatter.date, true);
-            }
-          }
 
-          if (s && e) {
-            pickerValue.value = useToValueFromArray(
-              {
-                previous: s,
-                next: e
-              },
-              props
-            );
-            nextTick(() => {
-              if (e.isBefore(s, 'month')) {
-                datepicker.value.previous = e;
-                datepicker.value.next = s;
-                datepicker.value.year.previous = e.year();
-                datepicker.value.year.next = s.year();
-              } else if (e.isSame(s, 'month')) {
-                datepicker.value.previous = s;
-                datepicker.value.next = e.add(1, 'month');
-                datepicker.value.year.previous = s.year();
-                datepicker.value.year.next = s.add(1, 'year').year();
+              if (s && e) {
+                pickerValue.value = useToValueFromArray(
+                  {
+                    previous: s,
+                    next: e
+                  },
+                  props
+                );
+                nextTick(() => {
+                  if (e.isBefore(s, 'month')) {
+                    datepicker.value.previous = e;
+                    datepicker.value.next = s;
+                    datepicker.value.year.previous = e.year();
+                    datepicker.value.year.next = s.year();
+                  } else if (e.isSame(s, 'month')) {
+                    datepicker.value.previous = s;
+                    datepicker.value.next = e.add(1, 'month');
+                    datepicker.value.year.previous = s.year();
+                    datepicker.value.year.next = s.add(1, 'year').year();
+                  } else {
+                    datepicker.value.previous = s;
+                    datepicker.value.next = e;
+                    datepicker.value.year.previous = s.year();
+                    datepicker.value.year.next = e.year();
+                  }
+                  if (!props.autoApply) {
+                    applyValue.value = [s, e];
+                  }
+                });
               } else {
-                datepicker.value.previous = s;
-                datepicker.value.next = e;
-                datepicker.value.year.previous = s.year();
-                datepicker.value.year.next = e.year();
+                datepicker.value.previous = dayjs(props.startFrom);
+                datepicker.value.next = dayjs(props.startFrom).add(1, 'month');
+                datepicker.value.year.previous = datepicker.value.previous.year();
+                datepicker.value.year.next = datepicker.value.next.year();
               }
-              if (!props.autoApply) {
-                applyValue.value = [s, e];
+            } else {
+              if (useArray()) {
+                if (props.modelValue.length > 0) {
+                  const [start] = props.modelValue;
+                  s = dayjs(start, props.formatter.date, true);
+                }
+              } else if (useObject()) {
+                if (props.modelValue) {
+                  const [start] = Object.values(props.modelValue);
+                  s = dayjs(start, props.formatter.date, true);
+                }
+              } else {
+                if (props.modelValue.length) {
+                  const [start] = props.modelValue.split(props.separator);
+                  s = dayjs(start, props.formatter.date, true);
+                }
               }
-            });
-          } else {
-            datepicker.value.previous = dayjs(props.startFrom);
-            datepicker.value.next = dayjs(props.startFrom).add(1, 'month');
-            datepicker.value.year.previous = datepicker.value.previous.year();
-            datepicker.value.year.next = datepicker.value.next.year();
-          }
-        } else {
-          if (useArray()) {
-            if (props.modelValue.length > 0) {
-              const [start] = props.modelValue;
-              s = dayjs(start, props.formatter.date, true);
-            }
-          } else if (useObject()) {
-            if (props.modelValue) {
-              const [start] = Object.values(props.modelValue);
-              s = dayjs(start, props.formatter.date, true);
-            }
-          } else {
-            if (props.modelValue.length) {
-              const [start] = props.modelValue.split(props.separator);
-              s = dayjs(start, props.formatter.date, true);
-            }
-          }
 
-          if (s && s.isValid()) {
-            nextTick(() => {
-              pickerValue.value = useToValueFromString(s, props);
-              datepicker.value.previous = s;
-              datepicker.value.next = s.add(1, 'month');
-              datepicker.value.year.previous = s.year();
-              datepicker.value.year.next = s.add(1, 'year').year();
-              if (!props.autoApply) {
-                applyValue.value = [s];
+              if (s && s.isValid()) {
+                nextTick(() => {
+                  pickerValue.value = useToValueFromString(s, props);
+                  datepicker.value.previous = s;
+                  datepicker.value.next = s.add(1, 'month');
+                  datepicker.value.year.previous = s.year();
+                  datepicker.value.year.next = s.add(1, 'year').year();
+                  if (!props.autoApply) {
+                    applyValue.value = [s];
+                  }
+                });
+              } else {
+                datepicker.value.previous = dayjs(props.startFrom);
+                datepicker.value.next = dayjs(props.startFrom).add(1, 'month');
+                datepicker.value.year.previous = datepicker.value.previous.year();
+                datepicker.value.year.next = datepicker.value.next.year();
               }
-            });
-          } else {
-            datepicker.value.previous = dayjs(props.startFrom);
-            datepicker.value.next = dayjs(props.startFrom).add(1, 'month');
-            datepicker.value.year.previous = datepicker.value.previous.year();
-            datepicker.value.year.next = datepicker.value.next.year();
-          }
-        }
+            }
+            datepicker.value.weeks = dayjs.weekdaysShort();
+            datepicker.value.months =
+              props.formatter.month === 'MMM'
+                ? dayjs.monthsShort()
+                : dayjs.months();
+          })
+          .catch(() => {
+            console.warn(
+              `[Litepie Datepicker]: List of supported locales https://github.com/iamkun/dayjs/tree/dev/src/locale`
+            );
+          });
       });
     });
 

diff --git a/src/locale/en.js b/src/locale/en.js
diff --git a/src/locale/id.js b/src/locale/id.js