init a Language Select comp

techniq · Jan 9, 2024 · 917c824 · 917c824
1 parent a5071fa
commit 917c824
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 57 deletions.
diff --git a/packages/svelte-ux/src/lib/components/LanguageSelect.svelte b/packages/svelte-ux/src/lib/components/LanguageSelect.svelte
@@ -0,0 +1,49 @@
+<script lang="ts">
+  import Button from './Button.svelte';
+  import Menu from './Menu.svelte';
+  import MenuItem from './MenuItem.svelte';
+  import { cls } from '../utils/styles';
+  import { getSettings } from './settings';
+  const { locale } = getSettings();
+
+  let open = false;
+
+  type Language = {
+    name: string;
+    code: string;
+    flag: string;
+  };
+
+  export let languagesDemo: Language[] = [
+    { name: 'English', code: 'en', flag: '🇺🇸' },
+    { name: 'Français', code: 'fr', flag: '🇫🇷' },
+    // add more for the demo
+  ];
+  $: languageSelected = languagesDemo.find((c) => c.code === $locale)!;
+</script>
+
+<Button on:click={() => (open = !open)}>
+  {languageSelected.flag}
+  <Menu bind:open on:close={() => (open = false)} offset={4} explicitClose resize>
+    <div class="grid gap-2 p-2 border-b border-surface-content/10">
+      {#each languagesDemo as language}
+        <MenuItem
+          on:click={() => {
+            languageSelected = language;
+            locale.set(language.code);
+          }}
+          class={cls(
+            'bg-surface-100 text-surface-content font-semibold border shadow',
+            languageSelected === language && 'ring-2 ring-surface-content'
+          )}
+        >
+          {language.flag} - {language.name}
+        </MenuItem>
+      {/each}
+    </div>
+
+    <div class="p-2 grid grid-cols-[auto,1fr] gap-2 items-center text-xs">
+      <span class="font-medium">Affect dates & numbers formats</span>
+    </div>
+  </Menu>
+</Button>
diff --git a/packages/svelte-ux/src/lib/utils/date.ts b/packages/svelte-ux/src/lib/utils/date.ts
@@ -43,6 +43,8 @@ import {
 } from './date_types';
 import { defaultLocale, type LocaleSettings } from './locale';
 
+export * from './date_types';
+
 export function getDayOfWeekName(weekStartsOn: DayOfWeek, locales: string) {
   // Create a date object for a specific day (0 = Sunday, 1 = Monday, etc.)
   // And "7 of Jan 2024" is a Sunday

diff --git a/packages/svelte-ux/src/routes/+layout.svelte b/packages/svelte-ux/src/routes/+layout.svelte
@@ -19,9 +19,10 @@
 
   import { settings } from '$lib/components/settings';
   import type { PageData } from './$types';
-  import { DateToken } from '$lib/utils/date';
 
   import { lightThemes, darkThemes } from '$lib/styles/daisy';
+  import { createLocaleSettings } from '$lib';
+  import LanguageSelect from '$lib/components/LanguageSelect.svelte';
   // import { lightThemes, darkThemes } from '$lib/styles/skeleton';
 
   export let data: PageData;
@@ -32,61 +33,32 @@
   $: title = data.pr_id ? `🚧 (pr:${data.pr_id}) - ${baseTitle}` : baseTitle;
 
   settings({
-    // Usefull to test different locales with the docs
-    // formats: {
-    //   numbers: {
-    //     defaults: {
-    //       locales: 'fr',
-    //       currency: 'EUR',
-    //     },
-    //   },
-    //   dates: {
-    //     locales: 'fr',
-    //     weekStartsOn: 1,
-    //     presets: {
-    //       days: {
-    //         long: { dateStyle: 'full' },
-    //       },
-    //       months: {
-    //         default: [DateToken.Month_long],
-    //       },
-    //     },
-    //     ordinalSuffixes: {
-    //       fr: {
-    //         one: 'er',
-    //         two: '',
-    //         few: '',
-    //         other: '',
-    //       },
-    //     },
-    //   },
-    //   dates: {
-    //     locales: 'fr',
-    //     weekStartsOn: 1,
-    //     presets: {
-    //       days: {
-    //         long: { dateStyle: 'full' },
-    //       },
-    //       months: {
-    //         default: [DateToken.Month_long],
-    //       },
-    //     },
-    //     ordinalSuffixes: {
-    //       fr: {
-    //         one: 'er',
-    //         two: '',
-    //         few: '',
-    //         other: '',
-    //       },
-    //     },
-    //   },
-    // },
-    // dictionary: {
-    //   Cancel: 'Annuler',
-    //   Date: {
-    //     Day: 'Jour',
-    //   },
-    // },
+    // fallbackLocale: 'fr',
+    localeFormats: {
+      fr: createLocaleSettings({
+        locale: 'fr',
+        formats: {
+          dates: {
+            baseParsing: 'dd/MM/yyyy',
+            ordinalSuffixes: {
+              one: 'er',
+            },
+          },
+          numbers: {
+            defaults: {
+              currency: 'EUR',
+            },
+          },
+        },
+        dictionary: {
+          Cancel: 'Annuler',
+          Date: {
+            Day: 'Jour',
+          },
+        },
+      }),
+    },
+
     classes: {
       AppLayout: {
         aside: 'border-r',
@@ -191,7 +163,8 @@
 
       <QuickSearch options={quickSearchOptions} on:change={(e) => goto(e.detail.value)} />
 
-      <div class="border-r border-primary-content/20 pr-2 grid items-center">
+      <div class="border-r border-primary-content/20 pr-2 grid grid-cols-2 items-center">
+        <LanguageSelect />
         <ThemeSelect />
         <!-- <ThemeSwitch classes={{ switch: 'bg-black/10 bornder-none' }} /> -->
       </div>