fix localization & improve props

kenhyuwa · Mar 20, 2021 · 28f6e14 · 28f6e14
1 parent c8a7f10
commit 28f6e14
Show file tree

Hide file tree

Showing 17 changed files with 228 additions and 626 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -47,6 +47,13 @@ All notable changes to this project will be documented in this file.
 - Change local model `value` to `pickerValue`.
 - Fix issues placement arrow, `left` to `right`.
 
+## [1.0.9]
+
+- Props `footer` removed.
+- Fix localization
+- Fix bug `auto-apply` if shortcuts clicked.
+- Add new props `options`, [Example](https://litepie.com/#options).
+
 [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
@@ -57,3 +64,4 @@ All notable changes to this project will be documented in this file.
 [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
+[1.0.9]: https://github.com/kenhyuwa/litepie-datepicker/releases/tag/v1.0.9
diff --git a/README.md b/README.md
@@ -64,14 +64,6 @@ 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).
 

diff --git a/build/rollup.config.js b/build/rollup.config.js
@@ -10,7 +10,6 @@ import babel from '@rollup/plugin-babel';
 import PostCSS from 'rollup-plugin-postcss';
 import { terser } from 'rollup-plugin-terser';
 import minimist from 'minimist';
-import copy from 'rollup-plugin-copy';
 
 // Get browserslist config and remove ie from es build targets
 const esbrowserslist = fs
@@ -121,10 +120,7 @@ if (!argv.format || argv.format === 'es') {
           ]
         ]
       }),
-      commonjs(),
-      copy({
-        targets: [{ src: 'src/locale/*', dest: 'dist/locale' }]
-      })
+      commonjs()
     ]
   };
   buildFormats.push(esConfig);

diff --git a/dev/serve.vue b/dev/serve.vue
@@ -9,7 +9,7 @@
         >
           <div class="flex flex-col">
             <div class="w-full">
-              <vue3-tailwind-datepicker
+              <litepie-datepicker
                 ref="s"
                 i18n="id"
                 :use-range="true"
@@ -23,7 +23,7 @@
                 :disable-date="d"
                 placeholder="Check"
               >
-              </vue3-tailwind-datepicker>
+              </litepie-datepicker>
             </div>
             <div class="flex px-2 space-x-2 mt-4">
               <button
@@ -66,13 +66,13 @@
 
 <script>
 import { defineComponent, ref, onMounted } from 'vue';
-import Vue3TailwindDatepicker from '@/litepie-datepicker.vue';
+import LitepieDatepicker from '@/litepie-datepicker.vue';
 import 'tailwindcss/tailwind.css';
 
 export default defineComponent({
   name: 'ServeDev',
   components: {
-    Vue3TailwindDatepicker
+    LitepieDatepicker
   },
   setup() {
     const away = ref(null);

diff --git a/docs/src/App.vue b/docs/src/App.vue
@@ -944,35 +944,44 @@
                 </div>
               </div>
             </div>
-            <div id="footer" class="pt-6 sm:pt-8">
+            <div id="options" class="pt-6 sm:pt-8">
               <h3 class="group flex items-center font-semibold">
                 <a
-                  href="#footer"
+                  href="#options"
                   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">
-                  Footer
+                  Options
                 </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
-                    :footer="{
-                      apply: 'OK',
-                      cancel: 'Close'
+                    :options="{
+                      shortcuts: {
+                        today: 'Hari ini',
+                        yesterday: 'Kemarin',
+                        past: period => period + ' hari terakhir',
+                        currentMonth: 'Bulan ini',
+                        pastMonth: 'Bulan lalu'
+                      },
+                      footer: {
+                        apply: 'Terapkan',
+                        cancel: 'Batal'
+                      }
                     }"
                     :auto-apply="false"
                     :formatter="playFormatter"
-                    v-model="dateValue.footer"
+                    v-model="dateValue.options"
                   />
                 </div>
                 <div class="col-span-2">
                   <div class="rounded-xl overflow-hidden">
                     <div class="bg-light-blue-500">
-                      <v-prims language="html" :code="playground.footer">
+                      <v-prims language="html" :code="playground.options">
                       </v-prims>
                     </div>
                   </div>
@@ -1118,6 +1127,64 @@
                 </div>
               </div>
             </div>
+            <div id="i18n" class="pt-6 sm:pt-8">
+              <h3 class="group flex items-center font-semibold">
+                <a
+                  href="#i18n"
+                  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">
+                  Localization(i18n)
+                </span>
+              </h3>
+              <div>
+                <p>
+                  Litepie Datepicker extend to day.js,
+                  <a
+                    href="https://github.com/iamkun/dayjs/tree/dev/src/locale"
+                    target="_blank"
+                    class="text-light-blue-400"
+                    >List of supported locales</a
+                  >.
+                </p>
+              </div>
+              <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
+                    i18n="id"
+                    :formatter="{
+                      date: 'DD MMMM YYYY',
+                      month: 'MMM'
+                    }"
+                    :options="{
+                      shortcuts: {
+                        today: 'Hari ini',
+                        yesterday: 'Kemarin',
+                        past: period => period + ' hari terakhir',
+                        currentMonth: 'Bulan ini',
+                        pastMonth: 'Bulan lalu'
+                      },
+                      footer: {
+                        apply: 'Terapkan',
+                        cancel: 'Batal'
+                      }
+                    }"
+                    :auto-apply="false"
+                    v-model="dateValue.i18n"
+                  />
+                </div>
+                <div class="col-span-2">
+                  <div class="rounded-xl overflow-hidden">
+                    <div class="bg-light-blue-500">
+                      <v-prims language="html" :code="advance.i18n"> </v-prims>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
         </section>
         <section
@@ -1307,14 +1374,15 @@ export default {
       ],
       trigger: [],
       slots: [],
-      footer: [],
+      options: [],
       useArray: [],
       useObject: {
         startDate: '',
         endDate: ''
       },
       useString: '',
-      customShortcuts: []
+      customShortcuts: [],
+      i18n: []
     });
 
     const customShortcuts = () => {

diff --git a/docs/src/content.js b/docs/src/content.js
@@ -465,10 +465,11 @@ export default {
 };
 </script>`;
 
-  const footer = `<template>
+  const options = `<template>
   <div class="flex">
     <litepie-datepicker
-      :footer="footerProps"
+      :options="options"
+      :auto-apply="false"
       v-model="dateValue"
     ></litepie-datepicker>
   </div>
@@ -481,14 +482,23 @@ export default {
   name: 'MyComponent',
   setup() {
     const dateValue = ref([]);
-    const footerProps = {
-      apply: 'OK',
-      cancel: 'Close'
-    };
+    const options = ref({
+      shortcuts: {
+        today: 'Hari ini',
+        yesterday: 'Kemarin',
+        past: period => period + ' hari terakhir',
+        currentMonth: 'Bulan ini',
+        pastMonth: 'Bulan lalu'
+      },
+      footer: {
+        apply: 'Terapkan',
+        cancel: 'Batal'
+      }
+    })
 
     return {
       dateValue,
-      footerProps
+      options
     };
   }
 };
@@ -619,6 +629,46 @@ export default {
     };
   }
 };
+</script>`;
+
+  const i18n = `<template>
+  <div class="flex">
+    <litepie-datepicker
+      i18n="id"
+      :auto-apply="false"
+      :options="options"
+      v-model="dateValue"
+    ></litepie-datepicker>
+  </div>
+</template>
+
+<script>
+import { ref } from 'vue';
+
+export default {
+  name: 'MyComponent',
+  setup() {
+    const dateValue = ref('');
+    const options = ref({
+      shortcuts: {
+        today: 'Hari ini',
+        yesterday: 'Kemarin',
+        past: period => period + ' hari terakhir',
+        currentMonth: 'Bulan ini',
+        pastMonth: 'Bulan lalu'
+      },
+      footer: {
+        apply: 'Terapkan',
+        cancel: 'Batal'
+      }
+    })
+
+    return {
+      dateValue,
+      options
+    };
+  }
+};
 </script>`;
 
   return {
@@ -639,13 +689,14 @@ export default {
       disableInRange,
       trigger,
       useSlot,
-      footer
+      options
     },
     advance: {
       useArray,
       useObject,
       useString,
-      customShortcuts
+      customShortcuts,
+      i18n
     }
   };
 };