From 28f6e14c11c8edff8050146df0ee4b7a0a613075 Mon Sep 17 00:00:00 2001 From: ken Date: Sat, 20 Mar 2021 10:54:57 +0700 Subject: [PATCH] fix localization & improve props --- CHANGELOG.md | 8 + README.md | 8 - build/rollup.config.js | 6 +- dev/serve.vue | 8 +- docs/src/App.vue | 88 ++++++- docs/src/content.js | 69 ++++- package-lock.json | 497 +----------------------------------- package.json | 3 +- src/components/Calendar.vue | 8 +- src/components/Header.vue | 14 +- src/components/Month.vue | 8 +- src/components/Shortcut.vue | 37 ++- src/components/Week.vue | 6 +- src/components/Year.vue | 12 +- src/entry.esm.js | 5 +- src/lib/fn.js | 6 + src/litepie-datepicker.vue | 71 ++---- 17 files changed, 228 insertions(+), 626 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 15626a8..1626c0d 100644 --- 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 index 3735a83..09a0a98 100644 --- a/README.md +++ b/README.md @@ -64,14 +64,6 @@ export default { Dark mode

-## 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 index 93bde0f..cd49829 100644 --- 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 index 213dafe..893ae10 100644 --- a/dev/serve.vue +++ b/dev/serve.vue @@ -9,7 +9,7 @@ >
- - +
-
{ diff --git a/docs/src/content.js b/docs/src/content.js index 5e62f71..47d25ff 100644 --- a/docs/src/content.js +++ b/docs/src/content.js @@ -465,10 +465,11 @@ export default { }; `; - const footer = ` diff --git a/src/components/Shortcut.vue b/src/components/Shortcut.vue index 5a70398..b34da48 100644 --- a/src/components/Shortcut.vue +++ b/src/components/Shortcut.vue @@ -10,7 +10,7 @@
  • @@ -24,55 +24,55 @@
  • - {{ jsonLocale && jsonLocale.today }} + {{ i18n.today }}
  • - {{ jsonLocale && jsonLocale.yesterday }} + {{ i18n.yesterday }}
  • - {{ jsonLocale && jsonLocale.past(7) }} + {{ i18n.past(7) }}
  • - {{ jsonLocale && jsonLocale.past(30) }} + {{ i18n.past(30) }}
  • - {{ jsonLocale && jsonLocale.currentMonth }} + {{ i18n.currentMonth }}
  • - {{ jsonLocale && jsonLocale.pastMonth }} + {{ i18n.pastMonth }}
    • @@ -80,18 +80,18 @@ diff --git a/src/components/Week.vue b/src/components/Week.vue index f372ea0..1685176 100644 --- a/src/components/Week.vue +++ b/src/components/Week.vue @@ -13,11 +13,13 @@ diff --git a/src/components/Year.vue b/src/components/Year.vue index 70e4991..23f4ddc 100644 --- a/src/components/Year.vue +++ b/src/components/Year.vue @@ -1,12 +1,10 @@ diff --git a/src/entry.esm.js b/src/entry.esm.js index f95d466..e5a83d7 100644 --- a/src/entry.esm.js +++ b/src/entry.esm.js @@ -1,16 +1,15 @@ - // Import vue component import component from '@/litepie-datepicker.vue'; // Default export is installable instance of component. // IIFE injects install function into component, allowing component // to be registered via Vue.use() as well as Vue.component(), -export default /*#__PURE__*/(() => { +export default /*#__PURE__*/ (() => { // Get component instance const installable = component; // Attach install function executed by Vue.use() - installable.install = (app) => { + installable.install = (app, options) => { app.component('LitepieDatepicker', installable); }; return installable; diff --git a/src/lib/fn.js b/src/lib/fn.js index 3e641f3..9fa8bfb 100644 --- a/src/lib/fn.js +++ b/src/lib/fn.js @@ -87,6 +87,12 @@ export const useDirective = binding => { if ($event.target.classList.contains(`${arg}-cancel-picker`)) { return (instance.isShow = false); } + if ( + $event.target.classList.contains(`litepie-shortcuts`) && + autoApply + ) { + return (instance.isShow = false); + } return (instance.isShow = instance.LitepieDatepickerRef.contains($event.target) || diff --git a/src/litepie-datepicker.vue b/src/litepie-datepicker.vue index 21e94d8..a460564 100644 --- a/src/litepie-datepicker.vue +++ b/src/litepie-datepicker.vue @@ -86,13 +86,13 @@ :shortcuts="shortcuts" :as-range="asRange()" :as-single="asSingle" - :i18n="i18n" + :i18n="options.shortcuts" />
    @@ -218,11 +210,7 @@
    @@ -253,8 +241,7 @@ import { isProxy, watchEffect, watch, - unref, - onUpdated + unref } from 'vue'; import { useCurrentDate, @@ -354,9 +341,21 @@ export default /*#__PURE__*/ defineComponent({ type: [Object, String], default: () => new Date() }, - footer: { + options: { type: Object, - default: () => undefined + default: () => ({ + shortcuts: { + today: 'Today', + yesterday: 'Yesterday', + past: period => `Last ${period} Days`, + currentMonth: 'This Month', + pastMonth: 'Last Month' + }, + footer: { + apply: 'Apply', + cancel: 'Cancel' + } + }) } }, inheritAttrs: false, @@ -367,7 +366,6 @@ export default /*#__PURE__*/ defineComponent({ const LitepieInputRef = ref(null); const isShow = ref(false); const placement = ref(true); - const jsonLocale = ref(null); const givenPlaceholder = ref(''); const selection = ref(null); const pickerValue = ref(''); @@ -1240,6 +1238,9 @@ export default /*#__PURE__*/ defineComponent({ ) { datepicker.value.next = datepicker.value.previous.add(1, 'month'); } + nextTick(() => { + force(); + }); }; const emitShortcut = (s, e) => { @@ -1354,18 +1355,6 @@ export default /*#__PURE__*/ defineComponent({ emitShortcut(s, e); }; - 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; - }); - }); - }; - watch( () => isShow.value, newValue => { @@ -1422,12 +1411,6 @@ export default /*#__PURE__*/ defineComponent({ } }); - watchEffect(() => { - locale().then(v => { - jsonLocale.value = v; - }); - }); - watchEffect(async () => { const locale = props.i18n; await import(`dayjs/locale/${locale}.js`) @@ -1572,13 +1555,6 @@ export default /*#__PURE__*/ defineComponent({ }); }); - onUpdated(() => { - nextTick(() => { - placement.value = useVisibleViewport(LitepieRef.value); - }); - }); - - provide('jsonLocale', jsonLocale); provide('isBetweenRange', isBetweenRange); provide('betweenRangeClasses', betweenRangeClasses); provide('datepickerClasses', datepickerClasses); @@ -1596,7 +1572,6 @@ export default /*#__PURE__*/ defineComponent({ LitepieInputRef, isShow, placement, - jsonLocale, givenPlaceholder, previous, next,