Skip to content

Commit 28f6e14

Browse files
kenhyuwakenhyuwa
committed
fix localization & improve props
1 parent c8a7f10 commit 28f6e14

17 files changed

+228
-626
lines changed

‎CHANGELOG.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,13 @@ All notable changes to this project will be documented in this file.
4747
- Change local model `value` to `pickerValue`.
4848
- Fix issues placement arrow, `left` to `right`.
4949

50+
## [1.0.9]
51+
52+
- Props `footer` removed.
53+
- Fix localization
54+
- Fix bug `auto-apply` if shortcuts clicked.
55+
- Add new props `options`, [Example](https://litepie.com/#options).
56+
5057
[Released]: https://github.com/kenhyuwa/litepie-datepicker/
5158
[1.0.0]: https://github.com/kenhyuwa/litepie-datepicker/releases/tag/v1.0.0
5259
[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.
5764
[1.0.6]: https://github.com/kenhyuwa/litepie-datepicker/releases/tag/v1.0.6
5865
[1.0.7]: https://github.com/kenhyuwa/litepie-datepicker/releases/tag/v1.0.7
5966
[1.0.8]: https://github.com/kenhyuwa/litepie-datepicker/releases/tag/v1.0.8
67+
[1.0.9]: https://github.com/kenhyuwa/litepie-datepicker/releases/tag/v1.0.9

‎README.md

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -64,14 +64,6 @@ export default {
6464
<img src="https://raw.githubusercontent.com/kenhyuwa/litepie-datepicker/main/assets/dark-mode.png" alt="Dark mode" />
6565
</p>
6666

67-
## Road map todo
68-
69-
Add shortcuts and footer localization match with `dayjs` locale.
70-
71-
- [x] English [en]
72-
- [x] Indonesia [id]
73-
- [ ] _other_
74-
7567
## Changelog
7668
All notable changes to this project will be documented in this file, [Read](CHANGELOG.md).
7769

‎build/rollup.config.js

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ import babel from '@rollup/plugin-babel';
1010
import PostCSS from 'rollup-plugin-postcss';
1111
import { terser } from 'rollup-plugin-terser';
1212
import minimist from 'minimist';
13-
import copy from 'rollup-plugin-copy';
1413

1514
// Get browserslist config and remove ie from es build targets
1615
const esbrowserslist = fs
@@ -121,10 +120,7 @@ if (!argv.format || argv.format === 'es') {
121120
]
122121
]
123122
}),
124-
commonjs(),
125-
copy({
126-
targets: [{ src: 'src/locale/*', dest: 'dist/locale' }]
127-
})
123+
commonjs()
128124
]
129125
};
130126
buildFormats.push(esConfig);

‎dev/serve.vue

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
>
1010
<div class="flex flex-col">
1111
<div class="w-full">
12-
<vue3-tailwind-datepicker
12+
<litepie-datepicker
1313
ref="s"
1414
i18n="id"
1515
:use-range="true"
@@ -23,7 +23,7 @@
2323
:disable-date="d"
2424
placeholder="Check"
2525
>
26-
</vue3-tailwind-datepicker>
26+
</litepie-datepicker>
2727
</div>
2828
<div class="flex px-2 space-x-2 mt-4">
2929
<button
@@ -66,13 +66,13 @@
6666

6767
<script>
6868
import { defineComponent, ref, onMounted } from 'vue';
69-
import Vue3TailwindDatepicker from '@/litepie-datepicker.vue';
69+
import LitepieDatepicker from '@/litepie-datepicker.vue';
7070
import 'tailwindcss/tailwind.css';
7171
7272
export default defineComponent({
7373
name: 'ServeDev',
7474
components: {
75-
Vue3TailwindDatepicker
75+
LitepieDatepicker
7676
},
7777
setup() {
7878
const away = ref(null);

‎docs/src/App.vue

Lines changed: 78 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -944,35 +944,44 @@
944944
</div>
945945
</div>
946946
</div>
947-
<div id="footer" class="pt-6 sm:pt-8">
947+
<div id="options" class="pt-6 sm:pt-8">
948948
<h3 class="group flex items-center font-semibold">
949949
<a
950-
href="#footer"
950+
href="#options"
951951
class="absolute after:hash opacity-0 group-hover:opacity-100 -ml-4 text-light-blue-400"
952952
aria-label="Anchor"
953953
></a>
954954
<span class="text-lg text-gray-900">
955-
Footer
955+
Options
956956
</span>
957957
</h3>
958958
<div
959959
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"
960960
>
961961
<div class="w-full max-w-md">
962962
<litepie-datepicker
963-
:footer="{
964-
apply: 'OK',
965-
cancel: 'Close'
963+
:options="{
964+
shortcuts: {
965+
today: 'Hari ini',
966+
yesterday: 'Kemarin',
967+
past: period => period + ' hari terakhir',
968+
currentMonth: 'Bulan ini',
969+
pastMonth: 'Bulan lalu'
970+
},
971+
footer: {
972+
apply: 'Terapkan',
973+
cancel: 'Batal'
974+
}
966975
}"
967976
:auto-apply="false"
968977
:formatter="playFormatter"
969-
v-model="dateValue.footer"
978+
v-model="dateValue.options"
970979
/>
971980
</div>
972981
<div class="col-span-2">
973982
<div class="rounded-xl overflow-hidden">
974983
<div class="bg-light-blue-500">
975-
<v-prims language="html" :code="playground.footer">
984+
<v-prims language="html" :code="playground.options">
976985
</v-prims>
977986
</div>
978987
</div>
@@ -1118,6 +1127,64 @@
11181127
</div>
11191128
</div>
11201129
</div>
1130+
<div id="i18n" class="pt-6 sm:pt-8">
1131+
<h3 class="group flex items-center font-semibold">
1132+
<a
1133+
href="#i18n"
1134+
class="absolute after:hash opacity-0 group-hover:opacity-100 -ml-4 text-light-blue-400"
1135+
aria-label="Anchor"
1136+
></a>
1137+
<span class="text-lg text-gray-900">
1138+
Localization(i18n)
1139+
</span>
1140+
</h3>
1141+
<div>
1142+
<p>
1143+
Litepie Datepicker extend to day.js,
1144+
<a
1145+
href="https://github.com/iamkun/dayjs/tree/dev/src/locale"
1146+
target="_blank"
1147+
class="text-light-blue-400"
1148+
>List of supported locales</a
1149+
>.
1150+
</p>
1151+
</div>
1152+
<div
1153+
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"
1154+
>
1155+
<div class="w-full max-w-md">
1156+
<litepie-datepicker
1157+
i18n="id"
1158+
:formatter="{
1159+
date: 'DD MMMM YYYY',
1160+
month: 'MMM'
1161+
}"
1162+
:options="{
1163+
shortcuts: {
1164+
today: 'Hari ini',
1165+
yesterday: 'Kemarin',
1166+
past: period => period + ' hari terakhir',
1167+
currentMonth: 'Bulan ini',
1168+
pastMonth: 'Bulan lalu'
1169+
},
1170+
footer: {
1171+
apply: 'Terapkan',
1172+
cancel: 'Batal'
1173+
}
1174+
}"
1175+
:auto-apply="false"
1176+
v-model="dateValue.i18n"
1177+
/>
1178+
</div>
1179+
<div class="col-span-2">
1180+
<div class="rounded-xl overflow-hidden">
1181+
<div class="bg-light-blue-500">
1182+
<v-prims language="html" :code="advance.i18n"> </v-prims>
1183+
</div>
1184+
</div>
1185+
</div>
1186+
</div>
1187+
</div>
11211188
</div>
11221189
</section>
11231190
<section
@@ -1307,14 +1374,15 @@ export default {
13071374
],
13081375
trigger: [],
13091376
slots: [],
1310-
footer: [],
1377+
options: [],
13111378
useArray: [],
13121379
useObject: {
13131380
startDate: '',
13141381
endDate: ''
13151382
},
13161383
useString: '',
1317-
customShortcuts: []
1384+
customShortcuts: [],
1385+
i18n: []
13181386
});
13191387
13201388
const customShortcuts = () => {

‎docs/src/content.js

Lines changed: 60 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -465,10 +465,11 @@ export default {
465465
};
466466
</script>`;
467467

468-
const footer = `<template>
468+
const options = `<template>
469469
<div class="flex">
470470
<litepie-datepicker
471-
:footer="footerProps"
471+
:options="options"
472+
:auto-apply="false"
472473
v-model="dateValue"
473474
></litepie-datepicker>
474475
</div>
@@ -481,14 +482,23 @@ export default {
481482
name: 'MyComponent',
482483
setup() {
483484
const dateValue = ref([]);
484-
const footerProps = {
485-
apply: 'OK',
486-
cancel: 'Close'
487-
};
485+
const options = ref({
486+
shortcuts: {
487+
today: 'Hari ini',
488+
yesterday: 'Kemarin',
489+
past: period => period + ' hari terakhir',
490+
currentMonth: 'Bulan ini',
491+
pastMonth: 'Bulan lalu'
492+
},
493+
footer: {
494+
apply: 'Terapkan',
495+
cancel: 'Batal'
496+
}
497+
})
488498
489499
return {
490500
dateValue,
491-
footerProps
501+
options
492502
};
493503
}
494504
};
@@ -619,6 +629,46 @@ export default {
619629
};
620630
}
621631
};
632+
</script>`;
633+
634+
const i18n = `<template>
635+
<div class="flex">
636+
<litepie-datepicker
637+
i18n="id"
638+
:auto-apply="false"
639+
:options="options"
640+
v-model="dateValue"
641+
></litepie-datepicker>
642+
</div>
643+
</template>
644+
645+
<script>
646+
import { ref } from 'vue';
647+
648+
export default {
649+
name: 'MyComponent',
650+
setup() {
651+
const dateValue = ref('');
652+
const options = ref({
653+
shortcuts: {
654+
today: 'Hari ini',
655+
yesterday: 'Kemarin',
656+
past: period => period + ' hari terakhir',
657+
currentMonth: 'Bulan ini',
658+
pastMonth: 'Bulan lalu'
659+
},
660+
footer: {
661+
apply: 'Terapkan',
662+
cancel: 'Batal'
663+
}
664+
})
665+
666+
return {
667+
dateValue,
668+
options
669+
};
670+
}
671+
};
622672
</script>`;
623673

624674
return {
@@ -639,13 +689,14 @@ export default {
639689
disableInRange,
640690
trigger,
641691
useSlot,
642-
footer
692+
options
643693
},
644694
advance: {
645695
useArray,
646696
useObject,
647697
useString,
648-
customShortcuts
698+
customShortcuts,
699+
i18n
649700
}
650701
};
651702
};

0 commit comments

Comments
 (0)