fix #44, which results in whole package restructuralization

separate export point for custom-element, autogenerate types, export config and available i18n objects
mskocik · Aug 10, 2022 · 097b2b9 · 097b2b9
1 parent 6238a77
commit 097b2b9
Show file tree

Hide file tree

Showing 13 changed files with 392 additions and 311 deletions.
diff --git 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
+<script>
+  import SveltyPicker from 'svelty-picker.svelte';
+  import { de } from 'svelty-picker/i18n';
+</script>
+
+<SveltyPicker i18n={de}></SveltyPicker>
+```
+### 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
+<script>
+  import SveltyPicker, { config } from 'svelty-picker';
+  import { de } from 'svelty-picker/i18n';
+
+  // all pickers in the app will have german locale set
+  config.i18n = de;
+</script>
+
+<SveltyPicker></SveltyPicker>
+```
+
+### 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
@@ -0,0 +1,9 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+.vscode
diff --git a/src/lib/components/Calendar.svelte b/src/lib/components/Calendar.svelte
@@ -1,8 +1,8 @@
 <script>
   import { createEventDispatcher } from 'svelte';
   import { fade } from 'svelte/transition';
-  import { compute, MODE_MONTH, MODE_YEAR, MODE_DECADE, moveGrid, isLower, isGreater } from '$lib/utils/dateUtils.js';
-  import { scale } from '$lib/utils/utils.js'
+  import { compute, MODE_MONTH, MODE_YEAR, MODE_DECADE, moveGrid, isLower, isGreater } from '../utils/dateUtils.js';
+  import { scale } from '../utils/utils.js'
 
   /** @type {Date|null} */
   export let date = null;
@@ -387,134 +387,133 @@
 
 
 <style>
-  .sdt-cal-td {
-    padding: 0;
-    font-size: 90%;
-    text-align: center;
-    background-color: var(--sdt-bg-main);
-  }
-  .sdt-cal-th {
-    height: 24px;
-  }
-  .sdt-calendar {
-    height: 221px;
-    overflow: hidden;
-  }
-  .sdt-calendar.is-grid {
-    display: grid;
-  }
-  .sdt-calendar.is-grid .sdt-table {
-		grid-column: 1/2;
-		grid-row: 1/2
-  }
-  .sdt-table {
-    width: 100%;
-    border-collapse: collapse;
-  }
-  .sdt-table-height {
-    height: 222px;
-  }
-  .animate-transition {
-    will-change: transform;
-    transition: transform .3s ease;
-  }
-  .not-current {
-    opacity: 0.3;
-  }
-  .not-current:hover {
-    opacity: 0.55;
-  }
-  .std-btn {
-    margin: 0;
-    border: 0;
-    background: transparent;
-    text-align: center;
-    width: 100%;
-    border-radius: 4px;
-    cursor: pointer;
-    padding: 0.3rem;
-    box-sizing: border-box;
-    color: var(--sdt-color);
-  }
-  .sdt-btn-day {
-    max-height: 32px;
-  }
-  .std-btn[disabled] {
-    cursor: not-allowed;
-    opacity: 0.5;
-    color: var(--sdt-disabled-date, #b22222);
-  }
-  .std-btn-header {
-    width: auto;
-    font-weight: bold;
-    padding: 0.375rem 0.5rem;
-  }
-  .std-btn-header.icon-btn:first-of-type {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
-  }
-  .std-btn-header.icon-btn {
-    padding-left: 0.25rem;
-    padding-right: 0.25rem;
-  }
-  .std-btn:hover {
-    background-color: var(--sdt-btn-bg-hover);
-  }
-  .is-selected .std-btn {
-    background-color: var(--sdt-primary);
-    color: var(--sdt-color-selected, var(--sdt-bg-main));
-    opacity: 0.9;
-  }
-  .std-btn-header:hover {
-    background-color: var(--sdt-btn-header-bg-hover);
-    /* color: black; */
-  }
-  .sdt-time-icon {
-    margin-right: -4px;
-  }
-  .sdt-time-icon svg {
-    margin: 4px 0;
-  }
-  .sdt-tbody-lg {
-    background-color: var(--sdt-bg-main);
-  }
-  .sdt-tbody-lg .std-btn {
-    height: 74px;
-  }
-  .sdt-thead-nav {
-    display: flex;
-    margin-bottom: 0.25rem;
-  }
-  .sdt-nav-btns {
-    white-space: nowrap;
-  }
-  .sdt-toggle-btn {
-    width: 100%;
-    text-align: left;
-  }
-  .sdt-today:before {
-    box-sizing: border-box;
-    position: absolute;
-    content: '';
-    margin-left: 4px;
-    margin-top: 4px;
-    border-left: 4px solid var(--sdt-shadow);
-    border-top: 4px solid var(--sdt-shadow);
-    border-bottom: 4px solid transparent;
-    border-right: 4px solid transparent;
-    border-radius: 2px;
-    height: 4px;
-    z-index: 2;
-  }
-  .sdt-svg {
-    fill: var(--sdt-color);
-  }
-  .sdt-today:hover:before {
-    border-left-color: var(--sdt-primary);
-    border-top-color: var(--sdt-primary);
-  }
-  .is-selected.sdt-today:before {
-    border-left-color: #eee;
-    border-top-color: #eee;
-  }
+.sdt-cal-td {
+  padding: 0;
+  font-size: 90%;
+  text-align: center;
+  background-color: var(--sdt-bg-main);
+}
+.sdt-cal-th {
+  height: 24px;
+}
+.sdt-calendar {
+  height: 221px;
+  overflow: hidden;
+}
+.sdt-calendar.is-grid {
+  display: grid;
+}
+.sdt-calendar.is-grid .sdt-table {
+  grid-column: 1/2;
+  grid-row: 1/2;
+}
+.sdt-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+.sdt-table-height {
+  height: 222px;
+}
+.animate-transition {
+  will-change: transform;
+  transition: transform .3s ease;
+}
+.not-current {
+  opacity: 0.3;
+}
+.not-current:hover {
+  opacity: 0.55;
+}
+.std-btn {
+  margin: 0;
+  border: 0;
+  background: transparent;
+  text-align: center;
+  width: 100%;
+  border-radius: 4px;
+  cursor: pointer;
+  padding: 0.3rem;
+  box-sizing: border-box;
+  color: var(--sdt-color);
+}
+.sdt-btn-day {
+  max-height: 32px;
+}
+.std-btn[disabled] {
+  cursor: not-allowed;
+  opacity: 0.5;
+  color: var(--sdt-disabled-date, #b22222);
+}
+.std-btn-header {
+  width: auto;
+  font-weight: bold;
+  padding: 0.375rem 0.5rem;
+}
+.std-btn-header.icon-btn:first-of-type {
+  padding-left: 0.375rem;
+  padding-right: 0.375rem;
+}
+.std-btn-header.icon-btn {
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
+}
+.std-btn:hover {
+  background-color: var(--sdt-btn-bg-hover);
+}
+.is-selected .std-btn {
+  background-color: var(--sdt-primary);
+  color: var(--sdt-color-selected, var(--sdt-bg-main));
+  opacity: 0.9;
+}
+.std-btn-header:hover {
+  background-color: var(--sdt-btn-header-bg-hover);
+}
+.sdt-time-icon {
+  margin-right: -4px;
+}
+.sdt-time-icon svg {
+  margin: 4px 0;
+}
+.sdt-tbody-lg {
+  background-color: var(--sdt-bg-main);
+}
+.sdt-tbody-lg .std-btn {
+  height: 74px;
+}
+.sdt-thead-nav {
+  display: flex;
+  margin-bottom: 0.25rem;
+}
+.sdt-nav-btns {
+  white-space: nowrap;
+}
+.sdt-toggle-btn {
+  width: 100%;
+  text-align: left;
+}
+.sdt-today:before {
+  box-sizing: border-box;
+  position: absolute;
+  content: '';
+  margin-left: 4px;
+  margin-top: 4px;
+  border-left: 4px solid var(--sdt-shadow);
+  border-top: 4px solid var(--sdt-shadow);
+  border-bottom: 4px solid transparent;
+  border-right: 4px solid transparent;
+  border-radius: 2px;
+  height: 4px;
+  z-index: 2;
+}
+.sdt-svg {
+  fill: var(--sdt-color);
+}
+.sdt-today:hover:before {
+  border-left-color: var(--sdt-primary);
+  border-top-color: var(--sdt-primary);
+}
+.is-selected.sdt-today:before {
+  border-left-color: #eee;
+  border-top-color: #eee;
+}
 </style>
diff --git a/src/lib/components/SveltyPicker.svelte b/src/lib/components/SveltyPicker.svelte
@@ -1,16 +1,16 @@
 <script context="module">
-  import settings from "$lib/utils/settings";
+  import settings from "../utils/settings";
   // your script goes here
   export const config = settings;
 </script>
 
 <script>
   import { createEventDispatcher, onMount, tick } from "svelte";
   import { fade } from "svelte/transition";
-  import Calendar from "$lib/components/Calendar.svelte";
-  import Time from "$lib/components/Time.svelte";
-  import { formatDate, parseDate } from "$lib/utils/dateUtils";
-  import { usePosition } from "$lib/utils/utils";
+  import Calendar from "./Calendar.svelte";
+  import Time from "./Time.svelte";
+  import { formatDate, parseDate } from "../utils/dateUtils";
+  import { usePosition } from "../utils/utils";
 
   // html
   export let inputId = '';