diff --git a/README.md b/README.md index 4667ca6..dd04dda 100644 --- a/README.md +++ b/README.md @@ -179,9 +179,42 @@ function onChange(event) { ## 🌐 Localization +By default date picker uses english locale. And at the moment there are only `en` and `de` localizations available +(PRs for additional locales are more than welcome). + +So if you want to change it to german (or other locale in the future), use this: + +```svelte + + + +``` +### Global locale setting + +You can also change locale globally through setting `i18n` property in global config like below. So all pickers created +*AFTER* this setting has been changed, will be in the new locale. + +```svelte + + + +``` + +### Adding additional locales + Localization file has following structure. ```js +// default i18n structure export const en = { days: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'], daysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], @@ -196,7 +229,6 @@ export const en = { backToDate: 'Back to calendar view' } ``` -PRs for extending built-in localization are welcome 🥳 ## 🏆 Thanks to: diff --git a/src/lib/.gitignore b/src/lib/.gitignore new file mode 100644 index 0000000..da49c52 --- /dev/null +++ b/src/lib/.gitignore @@ -0,0 +1,9 @@ +.DS_Store +node_modules +/build +/.svelte-kit +/package +.env +.env.* +!.env.example +.vscode \ No newline at end of file diff --git a/src/lib/components/Calendar.svelte b/src/lib/components/Calendar.svelte index d01487c..8b753e1 100644 --- a/src/lib/components/Calendar.svelte +++ b/src/lib/components/Calendar.svelte @@ -1,8 +1,8 @@ @@ -7,10 +7,10 @@
- +
{#if hasDateComponent}
{/if}
- +
{ handleMoveMove && onClick(e) }} on:mouseup={onToggleMove} bind:this={clockEl}>
@@ -358,128 +358,128 @@
- \ No newline at end of file diff --git a/src/lib/utils/i18n.js b/src/lib/i18n/index.js similarity index 98% rename from src/lib/utils/i18n.js rename to src/lib/i18n/index.js index 0d05e1e..274e711 100644 --- a/src/lib/utils/i18n.js +++ b/src/lib/i18n/index.js @@ -1,28 +1,28 @@ -export const en = { - days: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'], - daysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], - daysMin: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'], - months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'], - monthsShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], - meridiem: ['am', 'pm'], - suffix: ['st', 'nd', 'rd', 'th'], - todayBtn: 'Today', - clearBtn: 'Clear', - timeView: 'Show time view', - backToDate: 'Back to calendar view' -} - -// German translation by emroc GmbH -export const de = { - days: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag', 'Sonntag'], - daysShort: ['Son', 'Mon', 'Die', 'Mie', 'Don', 'Fre', 'Sam', 'Son'], - daysMin: ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So'], - months: ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'], - monthsShort: ['Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez'], - meridiem: ['am', 'pm'], - suffix: ['', '', '', ''], - todayBtn: 'Heute', - clearBtn: 'Zurücksetzen', - timeView: 'Zeitansicht anzeigen', - backToDate: 'Zurück zur Kalenderansicht' -} +export const en = { + days: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'], + daysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], + daysMin: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'], + months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'], + monthsShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], + meridiem: ['am', 'pm'], + suffix: ['st', 'nd', 'rd', 'th'], + todayBtn: 'Today', + clearBtn: 'Clear', + timeView: 'Show time view', + backToDate: 'Back to calendar view' +} + +// German translation by emroc GmbH +export const de = { + days: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag', 'Sonntag'], + daysShort: ['Son', 'Mon', 'Die', 'Mie', 'Don', 'Fre', 'Sam', 'Son'], + daysMin: ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So'], + months: ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'], + monthsShort: ['Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez'], + meridiem: ['am', 'pm'], + suffix: ['', '', '', ''], + todayBtn: 'Heute', + clearBtn: 'Zurücksetzen', + timeView: 'Zeitansicht anzeigen', + backToDate: 'Zurück zur Kalenderansicht' +} diff --git a/src/lib/index.js b/src/lib/index.js index 83fb9df..d0ef5bc 100644 --- a/src/lib/index.js +++ b/src/lib/index.js @@ -1,2 +1,4 @@ -export { default as default } from './components/SveltyPicker.svelte'; -export { registerElement } from './custom-element'; +import Component, { config } from './components/SveltyPicker.svelte'; + +export default Component; +export { config }; diff --git a/src/lib/utils/settings.js b/src/lib/utils/settings.js index 4d3be4e..01021d9 100644 --- a/src/lib/utils/settings.js +++ b/src/lib/utils/settings.js @@ -1,4 +1,4 @@ -import { en } from './i18n.js'; +import { en } from '../i18n/index.js'; export default { theme: 'sdt-calendar-colors', diff --git a/src/routes/custom-element.svx b/src/routes/custom-element.svx index 3795890..46ffe2a 100644 --- a/src/routes/custom-element.svx +++ b/src/routes/custom-element.svx @@ -3,7 +3,7 @@ import CustomElement from './_markdown/custom-element.md'; onMount(() => { - import('./../lib/index').then(resp => { + import('./../lib/custom-element').then(resp => { console.log('🥳 registering SveltyPicker as element'); resp.registerElement && resp.registerElement('el-picker'); }).catch(e => console.log('error', e)); @@ -59,6 +59,7 @@ Picker initialized as custom element: } input { @apply px-2 py-2; + width: 130px; &:focus { outline: none; } diff --git a/src/routes/i18n.svx b/src/routes/i18n.svx index 199f64a..9e69aea 100644 --- a/src/routes/i18n.svx +++ b/src/routes/i18n.svx @@ -1,7 +1,8 @@ + + +``` + +
+ +
+
+ +
+
+ + +### Global locale setting + +You can also change locale globally through setting `i18n` property in global config like below. So all pickers created +*AFTER* this setting has been changed, will be in the new locale. + +```svelte + + + +``` + +### Adding additional locales + Localization file has following structure. ```js +// default i18n structure export const en = { days: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'], daysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], @@ -26,12 +70,3 @@ export const en = { backToDate: 'Back to calendar view' } ``` -PRs for extending built-in localization are welcome 🥳 - -
- -
- - -
-
diff --git a/src/routes/index.svx b/src/routes/index.svx index deeb539..cb49cf3 100644 --- a/src/routes/index.svx +++ b/src/routes/index.svx @@ -30,7 +30,7 @@

Date

-
OR
+
AND

Time

diff --git a/src/routes/playground@empty.svelte b/src/routes/playground@empty.svelte index 4aca683..4fe4a1f 100644 --- a/src/routes/playground@empty.svelte +++ b/src/routes/playground@empty.svelte @@ -1,7 +1,7 @@