@humandialog/forms.svelte 1.5.0 → 1.6.0

package/components/sidebar/sidebar.item.svelte

@@ -1,8 +1,9 @@
 <script>import { getContext, tick } from "svelte";
 import Icon from "../icon.svelte";
-import { contextItemsStore, auto_hide_sidebar, contextToolbarOperations } from "../../stores";
+import { contextItemsStore, contextToolbarOperations } from "../../stores";
 import { FaBars, FaEllipsisV } from "svelte-icons/fa";
 import { link, push } from "svelte-spa-router";
+import { i18n } from "../../i18n";
 import {
   selectable as _selectable,
   isSelected,
@@ -11,8 +12,7 @@ import {
   activateItem,
   startEditing,
   getActive,
-  isOnNavigationPage,
-  UI
+  navAutoHide
 } from "../../utils";
 import { showMenu } from "../menu";
 export let href;
@@ -126,7 +126,7 @@ function on_link_clicked(e) {
       redirect_to(href2);
     }
   } else {
-    auto_hide_sidebar();
+    navAutoHide();
     redirect_to(href2);
   }
 }
@@ -185,7 +185,7 @@ function activateRow(e) {
       opver: 1,
       operations: [
         {
-          caption: "View",
+          caption: i18n({ en: "View", es: "Ver", pl: "Widok" }),
           operations: [
             {
               icon: FaEllipsisV,

package/desk.svelte

@@ -9,7 +9,6 @@
     import {main_sidebar_visible_store, 
             tools_visible_store, 
             bottom_bar_visible_store, 
-            auto_hide_sidebar,
             hasSelectedItem,
             dark_mode_store,
             data_tick_store,
@@ -20,7 +19,7 @@
             alerts, removeAlert, showFABAlways} from './stores.js'
     
     //import { AuthorizedView} from '@humandialog/auth.svelte'
-    import { handleSelect, isDeviceSmallerThan, isOnNavigationPage, isOnScreenKeyboardVisible, removeAt, UI } from './utils'
+    import { handleSelect, isDeviceSmallerThan, isOnScreenKeyboardVisible, navGetMode, removeAt, UI, NAV_MODE_SIDEBAR, navAutoHide, navIsVisible } from './utils'
     import { afterUpdate, onMount } from 'svelte';
     import {location} from 'svelte-spa-router'
     import {FaCopy, FaTimes} from 'svelte-icons/fa'
@@ -76,8 +75,8 @@
     //let autoRedirectToSignIn = layout.autoRedirectToSignIn ?? true
 
     $: { visible_sidebar = $main_sidebar_visible_store
-        
-        if(!is_small)
+        const navMode = navGetMode()
+        if(navMode == NAV_MODE_SIDEBAR)
         {
             if(visible_sidebar == "*")
             {
@@ -190,10 +189,11 @@
     }
 
 
-    $: navigationPageVisible = navigationPageSetup($location);
+    $: navigationPageSetup($location);
     function navigationPageSetup(...args)
     {
-        if(!is_small)
+        const navMode = navGetMode()
+        if(navMode == NAV_MODE_SIDEBAR)
         {
             vertical_toolbar_visibility = "hidden sm:block"
             content_left = "left-0 sm:left-[40px]";
@@ -202,7 +202,7 @@
         }
         else
         {
-            if(isOnNavigationPage())
+            if(navIsVisible())
             {
                 vertical_toolbar_visibility = "block"
                 content_left = "left-[50px]";
@@ -254,7 +254,7 @@
 
     function on_resize()
     {
-        auto_hide_sidebar();
+        navAutoHide()
     }
 
     let minViewportHeight = 0;
@@ -278,6 +278,7 @@
 
     function onViewportResize(e)
     {
+        console.log('onViewportResize')
         const vp = window.visualViewport;
         setViewportHeight(vp)
 
@@ -411,7 +412,7 @@
                     behaviour is the content expand vertically, and only vertical scrollbar can be visible.
                     When content on the main page needs to be expanded horizontally (like kanban chart for example) then
                     that component should define overflow-x-* itself -->
-                <section on:click|capture={() => { if(!navigationPageVisible) auto_hide_sidebar()}  } class="">
+                <section on:click|capture={() => navAutoHide()  } class="">
 
                     <!--###########################################################-->
                     <!--##  HORIZONTAL TOOLS                 ######################-->

package/horizontal.toolbar.svelte

@@ -1,5 +1,5 @@
 <script>
-    import {FaUsers, FaCog, FaSignInAlt, FaSignOutAlt, FaBars, FaToggleOn, FaToggleOff} from 'svelte-icons/fa/'
+    import {FaUsers, FaCog, FaSignInAlt, FaSignOutAlt, FaBars, FaToggleOn, FaToggleOff, FaLanguage} from 'svelte-icons/fa/'
     //import GoPrimitiveDot from 'svelte-icons/go/GoPrimitiveDot.svelte'
     import {showMenu} from './components/menu'
     import {push, pop, location} from 'svelte-spa-router'
@@ -8,13 +8,8 @@
 
     import {
         dark_mode_store,
-        toggle_sidebar,
-        show_sidebar,
-        hide_sidebar,
         tools_visible_store,
         bottom_bar_visible_store,
-        previously_visible_sidebar,
-        main_sidebar_visible_store,
         sidebar_left_pos,
 		page_title,
 		nav_titles,
@@ -24,8 +19,8 @@
     import {session, signInHRef, signOutHRef} from '@humandialog/auth.svelte'
 
     import VerticalToolbar from './vertical.toolbar.svelte'
-	import { isDeviceSmallerThan, isOnNavigationPage, pushNavigationPage, popNavigationPage } from './utils.js';
-    
+	import { isDeviceSmallerThan, navIsVisible, navGetKey, navToggle, navShow, navHide, navPrevVisibleKey } from './utils.js';
+    import {setCurrentLanguage, getLanguages, i18n, getCurrentLanguage} from './i18n.js'
 
     export let appConfig = undefined;
     export let clearsContext = 'sel props'
@@ -35,7 +30,7 @@
     
     let config = null;
     let has_selection_details = false;
-    let selection_details_caption = 'Properties'
+    let selection_details_caption = i18n({en: 'Properties', es: 'Propiedades', pl: 'Właściwości'});
     
     let show_sign_in_out_icons = false;
     let is_logged_in = false;
@@ -53,7 +48,13 @@
             config = appConfig.mainToolbar;
             has_selection_details = appConfig.selectionDetails;
             if(has_selection_details)
-                selection_details_caption = appConfig.selectionDetails.caption ?? 'Properties';
+            {
+                if(appConfig.selectionDetails.captionFunc)
+                    selection_details_caption = appConfig.selectionDetails.captionFunc()
+                else if(appConfig.selectionDetails.caption)
+                    selection_details_caption = appConfig.selectionDetails.caption
+
+            }
         }
         else
         {
@@ -86,11 +87,12 @@
 
     let title = ''
     $:{
-        if($main_sidebar_visible_store == '*')
+        if(!navIsVisible())
             title = $page_title;
         else
         {
-            let nav_title = $nav_titles[$main_sidebar_visible_store];
+            const navKey = navGetKey()
+            let nav_title = $nav_titles[navKey];
             if(nav_title != undefined)
                 title = nav_title
             else
@@ -100,59 +102,25 @@
 
     function toggle_navigator(e)
     {
-        if(isDeviceSmallerThan('sm'))
+        if(tabs.length == 1)
         {
-            if(isOnNavigationPage())
-            {
-                popNavigationPage();
-            }
-            else
-            {
-                if(tabs.length == 1)
-                {
-                    $sidebar_left_pos = 0;
-                    show_sidebar(tabs[0]);
-                }
-                else
-                {
-                    let sidebar = $main_sidebar_visible_store;
-                    if(sidebar == "*")
-                    {
-                        if((!previously_visible_sidebar) || previously_visible_sidebar === '*')
-                            sidebar = Object.keys(appConfig.sidebar)[0];
-                        else
-                            sidebar = previously_visible_sidebar;
-                    }
-
-                    $sidebar_left_pos = 40;
-                    show_sidebar(sidebar)
-                }
-
-                pushNavigationPage();
-            }
+            $sidebar_left_pos = 0;
+            navToggle(tabs[0])
         }
         else
         {
+            $sidebar_left_pos = 40;
 
-            if(tabs.length == 1)
+            if(!navIsVisible())
             {
-                $sidebar_left_pos = 0;
-                toggle_sidebar(tabs[0]);
+                let navKey = navPrevVisibleKey()
+                if(!navKey)
+                    navKey = Object.keys(appConfig.sidebar)[0]
+                
+                navShow(navKey);
             }
             else
-            {
-                let sidebar = $main_sidebar_visible_store;
-                if(sidebar == "*")
-                {
-                    if((!previously_visible_sidebar) || previously_visible_sidebar === '*')
-                        sidebar = Object.keys(appConfig.sidebar)[0];
-                    else
-                        sidebar = previously_visible_sidebar;
-                }
-
-                $sidebar_left_pos = 40;
-                toggle_sidebar(sidebar)
-            }
+                navHide()
         }
     }
 
@@ -177,8 +145,14 @@
 
                 if(add)
                 {
+                    let caption = ''
+                    if(o.captionFunc)
+                        caption = o.captionFunc()
+                    else if(o.caption)
+                        caption = o.caption
+
                     options.push({
-                                caption: o.caption,
+                                caption: caption,
                                 icon: o.icon,
                                 action: o.action
                             })
@@ -191,7 +165,7 @@
                 if(!is_logged_in)
                 {
                     options.push({
-                        caption: 'Sign in',
+                        caption: i18n( { en: 'Sign in', es: 'Iniciar sesión', pl: 'Zaloguj'}),
                         icon: FaSignInAlt,
                         action: (focused) => { push(sign_in_href) }
                     });
@@ -199,7 +173,7 @@
                 else
                 {
                     options.push({
-                        caption: 'Sign out',
+                        caption: i18n({en: 'Sign out', es: 'Cerrar sesión', pl: 'Wyloguj' }) ,
                         icon: FaSignOutAlt,
                         action: (focused) => { push(sign_out_href) }
                     });
@@ -211,10 +185,11 @@
 
         if(!config || config.darkMode)
         {
+            const capt = i18n({en: 'Dark mode', es: 'Modo oscuro', pl: 'Tryb ciemny'})
             if($dark_mode_store == '')
             {
                 options.push( {
-                        caption: 'Dark mode',
+                        caption: capt,
                         icon: FaToggleOff,
                         action: (focused) => { $dark_mode_store = 'dark'; }
                     });
@@ -222,24 +197,41 @@
             else
             {
                 options.push( {
-                        caption: 'Dark mode',
+                        caption: capt,
                         icon: FaToggleOn,
                         action: (focused) => { $dark_mode_store = ''; }
                     });
             }
         }
 
+        const langs = getLanguages()
+        if(langs && langs.length > 1)
+        {
+            const langMenu = langs.map( l => ({
+                caption: l.name,
+                img: l.flag,
+                action: (b) => {setCurrentLanguage(l); reloadWholeApp()},
+                disabled: getCurrentLanguage() == l
+            }))
+
+            options.push( {
+                caption: i18n({en: 'Language', es:'Idioma', pl:'Język'}),
+                menu: langMenu,
+                icon: FaLanguage
+            })
+        }
+
         if(config && config.operations)
         {
             options.push( {
-                    caption: 'Toolbar',
+                    caption: i18n({en:'Toolbar', es:'Barra de herramientas', pl:'Pasek narzędzi'}),
                     icon: $tools_visible_store ? FaToggleOn : FaToggleOff,
                     action: (focused) => { $tools_visible_store = !$tools_visible_store; }
                 });
         }
 
          options.push({
-                caption: 'Left-handed floating actions',
+                caption: i18n({en: 'Left-handed mode', es: 'Modo para zurdos', pl: 'Tryb dla leworęcznych'}),
                 icon: $leftHandedFAB ? FaToggleOn : FaToggleOff,
                 action: (f) => { $leftHandedFAB = !$leftHandedFAB; }
             })
@@ -344,7 +336,7 @@
 
 </div>
 
-{#if false && tabs.length > 1 &&  $main_sidebar_visible_store != "*"}
+{#if false && tabs.length > 1 &&  navIsVisible()}
     <div  class="no-print flex-none block fixed left-0 top-[40px] w-[40px] h-screen z-20 inset-0   overflow-hidden">
         <div class="sticky top-0 flex h-full w-10 bg-stone-900 flex-col items-center text-stone-100 shadow">
             <VerticalToolbar {appConfig} mobile={true}/>

package/i18n-preprocess.d.ts

@@ -0,0 +1,39 @@
+/**
+ * Zamienia:
+ *   _; EN;ES ;  PL
+ *   "_; EN;ES ;  PL"
+ *   '_; Foo ; Bar;Baz'
+ *   `_; A;  B ; C`
+ * na:
+ *   i18n(["EN", "ES", "PL"])  // znormalizowane odstępy: "; "
+ *
+ * Dwie fazy:
+ *  1) quoted: podmienia CAŁE literały stringów (", ', `)
+ *  2) unquoted: podmienia goły tekst (np. w markupie)
+ */
+export function i18nPreprocess({ dryRun }?: {
+    dryRun?: boolean | undefined;
+}): {
+    name: string;
+    markup({ content, filename }: {
+        content: any;
+        filename: any;
+    }): {
+        code: any;
+    };
+    script({ content, attributes, filename }: {
+        content: any;
+        attributes: any;
+        filename: any;
+    }): {
+        code: any;
+        attributes: any;
+    };
+    style({ content, attributes }: {
+        content: any;
+        attributes: any;
+    }): {
+        code: any;
+        attributes: any;
+    };
+};

package/i18n-preprocess.js

@@ -0,0 +1,100 @@
+/**
+ * Zamienia:
+ *   _; EN;ES ;  PL
+ *   "_; EN;ES ;  PL"
+ *   '_; Foo ; Bar;Baz'
+ *   `_; A;  B ; C`
+ * na:
+ *   i18n(["EN", "ES", "PL"])  // znormalizowane odstępy: "; "
+ *
+ * Dwie fazy:
+ *  1) quoted: podmienia CAŁE literały stringów (", ', `)
+ *  2) unquoted: podmienia goły tekst (np. w markupie)
+ */
+
+export  function i18nPreprocess({ dryRun = false } = {}) {
+  const lit = (s) => JSON.stringify(s);
+  const toArrayExpr = (list) =>
+  `[${list
+    .split(/\s*;\s*/g)        // zachowuje puste między ';;'
+    .map((s) => s.trim())     // przytnij brzegi
+    .map(lit)                 // JSON.stringify
+    .join(', ')}]`;
+
+  // 1) W <script> zamieniamy CAŁE literały "_; ...; ..." -> i18n([ ... ])
+  //    Uwaga: dla prostoty nie dopuszczamy cudzysłowów/backticków wewnątrz placeholderów
+  const QUOTED_IN_SCRIPT =
+    /(['"`])\s*_;\s*((?:[^'"`;\r\n]*)(?:\s*;\s*[^'"`;\r\n]*)*)\s*\1/g;
+
+
+  // 2) W markup – TYLKO surowy tekst między tagami (nie dotykamy atrybutów)
+  const UNQUOTED_TEXT_IN_MARKUP =
+    /(^|>)(\s*)_;\s*((?:[^;<>]*)(?:\s*;\s*[^;<>]*)*)/g;
+
+  // ATRYBUTY: name="_; A; ; C"  ->  name={i18n(["A", "", "C"])}
+  const ATTR_QUOTED =
+    /(\s[0-9A-Za-z_:@#.-]+)\s*=\s*(["'])\s*_;\s*((?:[^"'<>]*)(?:\s*;\s*[^"'<>]*)*)\s*\2/g;
+
+  // Wytnij i przywróć bloki, żeby w fazie markup nie ruszać <script>/<style>
+  const extractBlocks = (content, tag) => {
+    const re = new RegExp(`<${tag}\\b[\\s\\S]*?>[\\s\\S]*?<\\/${tag}>`, 'gi');
+    const blocks = [];
+    const placeholders = [];
+    let i = 0;
+    content = content.replace(re, (m) => {
+      const key = `<<<${tag.toUpperCase()}_BLOCK_${i++}>>>`;
+      blocks.push(m);
+      placeholders.push(key);
+      return key;
+    });
+    return { content, blocks, placeholders };
+  };
+
+  // UWAGA: używamy funkcji jako replacera, by nie zepsuć `$$props` -> `$props`
+  const restoreBlocks = (content, placeholders, blocks) => {
+    placeholders.forEach((key, idx) => {
+      content = content.replace(key, () => blocks[idx]);
+    });
+    return content;
+  };
+
+  return {
+    name: 'i18n-preprocess',
+
+    markup({ content, filename }) {
+      const s = extractBlocks(content, 'script');
+      const ss = extractBlocks(s.content, 'style');
+
+      let body = ss.content;
+      let count = 0;
+
+      body = body.replace(UNQUOTED_TEXT_IN_MARKUP, (m, before, pre, list) => {
+        count++;
+        return `${before}${pre}{i18n(${toArrayExpr(list)})}`;
+      });
+
+     if (count) console.log(`[i18n-preprocess][markup] ${filename} -> ${count} replace(s)`);
+
+      body = restoreBlocks(body, ss.placeholders, ss.blocks);
+      body = restoreBlocks(body, s.placeholders, s.blocks);
+
+      if (dryRun) return { code: content };
+      return { code: body };
+    },
+
+    script({ content, attributes, filename }) {
+      let count = 0;
+      const code = content.replace(QUOTED_IN_SCRIPT, (_m, _q, list) => {
+        count++;
+        return `i18n(${toArrayExpr(list)})`;
+      });
+    //  if (count) console.log(`[i18n-preprocess][script] ${filename} -> ${count} replace(s)`);
+      if (dryRun) return { code: content, attributes };
+      return { code, attributes };
+    },
+
+    style({ content, attributes }) {
+      return { code: content, attributes };
+    }
+  };
+}

package/i18n.d.ts

@@ -0,0 +1,30 @@
+export function setLanguages(langs: any): void;
+export function getLanguages(): ({
+    key: string;
+    name: string;
+    flag: string;
+    default: boolean;
+} | {
+    key: string;
+    name: string;
+    flag: string;
+    default?: undefined;
+})[];
+export function setCurrentLanguage(sel: any): void;
+export function getCurrentLanguage(): {
+    key: string;
+    name: string;
+    flag: string;
+    default: boolean;
+} | {
+    key: string;
+    name: string;
+    flag: string;
+    default?: undefined;
+};
+export function getCurrentLanguageIdx(): number;
+export function getCurrentLanguageKey(): string;
+/**
+ * i18n("EN; ES; PL") => "EN" albo "ES" albo "PL"
+ */
+export function i18n(list: any): any;

package/i18n.js

@@ -0,0 +1,162 @@
+
+// https://flagdownload.com/
+
+let languages = [
+	{
+		key: "en",
+		name: 'English',
+		flag: '/landing/lang/GB_64.png',
+		default: true
+	},
+	{
+		key: 'es',
+		name: "Español",
+		flag: '/landing/lang/ES_64.png'
+	},
+	{
+		key: 'pl',
+		name: 'Polski',
+		flag: '/landing/lang/PL_64.png'
+	}
+]
+
+function fetchCurrentLangIndex()
+{
+	const stored = localStorage.getItem("__hd_svelte_lang")
+	if(!stored)
+	{
+		if(languages.length == 0)
+			return 0;
+
+		if(!navigator.language)
+			return 0;
+
+		const browserLang = navigator.language.substring(0, 2)
+		const idx = languages.findIndex(l => l.key == browserLang)
+		if(idx >=0)
+			return idx;
+		else
+			return 0;
+	}
+	else
+	{
+		try{
+			return JSON.parse(stored)
+		}
+		catch(err)
+		{
+			return 0;
+		}
+	}
+}
+
+let currentLangIndex = 0// fetchCurrentLangIndex()
+let defaultLangIndex = 0;
+
+export function setLanguages(langs)
+{
+	languages = langs
+	defaultLangIndex = languages.findIndex(l => l.default == true)
+	if(defaultLangIndex < 0)
+		defaultLangIndex = 0
+
+	currentLangIndex = fetchCurrentLangIndex()
+}
+
+export function getLanguages()
+{
+	return languages
+}
+
+export function setCurrentLanguage(sel)
+{
+	if(typeof sel === 'number')
+		currentLangIndex = sel
+	else if (typeof sel === 'string' || sel instanceof String)
+	{
+		currentLangIndex = languages.findIndex(l => l.key == sel)
+		if(currentLangIndex < 0)
+		{
+			console.error(`language ${sel} doesn't exist`)
+			currentLangIndex = defaultLangIndex
+		}
+	}
+	else
+	{
+		currentLangIndex = languages.findIndex(l => l.key == sel.key)
+		if(currentLangIndex < 0)
+		{
+			console.error(`language ${sel.key} doesn't exist`)
+			currentLangIndex = defaultLangIndex
+		}
+	}
+
+	localStorage.setItem("__hd_svelte_lang", JSON.stringify(currentLangIndex))
+	
+}
+
+export function getCurrentLanguage()
+{
+	return languages[currentLangIndex]
+}
+
+export function getCurrentLanguageIdx()
+{
+	return currentLangIndex
+}
+
+export function getCurrentLanguageKey()
+{
+	return languages[currentLangIndex].key
+}
+
+
+/**
+ * i18n("EN; ES; PL") => "EN" albo "ES" albo "PL"
+ */
+
+export function i18n(list) 
+{
+	if (typeof list === 'string' || list instanceof String) 
+	{
+		const parts = list.split(/\s*;\s*/);
+
+		if(parts.length == 0)
+			return "";
+		
+		if(currentLangIndex < parts.length)
+			return parts[currentLangIndex]
+		else if(defaultLangIndex < parts.length)
+			return parts[defaultLangIndex]
+		else
+			return parts[0]
+	}
+	else if (Array.isArray(list)) 
+	{
+		if(list.length == 0)
+			return "";
+		
+		if(currentLangIndex < list.length)
+			return list[currentLangIndex]
+		else if(defaultLangIndex < list.length)
+			return list[defaultLangIndex]
+		else
+			return list[0]
+  	}
+	else 
+	{
+		let langKey = languages[currentLangIndex].key
+		if (Object.keys(list).includes(langKey))
+			return list[langKey]
+		else 
+		{
+			langKey = languages[defaultLangIndex].key
+			const keys = Object.keys(list)
+			if (keys.includes(langKey))
+				return list[langKey]
+			else
+				return list[keys[0]] 
+		}
+	}
+}
+