@humandialog/forms.svelte 1.6.0 → 1.6.2

package/components/combo/combo.svelte

@@ -7,6 +7,7 @@ import { FaChevronDown, FaTimes } from "svelte-icons/fa";
 import Icon from "../icon.svelte";
 import { reef } from "@humandialog/auth.svelte/dist/index.js";
 import { showMenu } from "../menu.js";
+import { ext, i18n } from "../../i18n.js";
 export let label = "";
 export let self = null;
 export let a = "";
@@ -229,7 +230,7 @@ function openDropdownAsMenu() {
   let operations = [];
   if (hasNone)
     operations.push({
-      caption: "<none>",
+      caption: `<${i18n({ en: "blank", es: "blanco", pl: "pusty" })}>`,
       action: (f) => on_choose(null)
     });
   if (definition && definition.collection)
@@ -237,12 +238,11 @@ function openDropdownAsMenu() {
   const _filtered_source = filtered_source ? filtered_source : definition.source;
   _filtered_source.forEach((i) => {
     operations.push({
-      caption: i.Name ?? i.Key,
+      caption: i.Name ? ext(i.Name) : i.Key,
       icon: i.Icon ?? void 0,
       action: (f) => on_choose(i)
     });
   });
-  console.log("operations", operations);
   showMenu(rect, operations);
 }
 export function hide() {
@@ -295,7 +295,7 @@ function get_combo_text() {
   if (!is_dropdown_open) {
     let found = selected_item(item, a);
     if (found)
-      return found.Name ?? found.Key;
+      return found.Name ? ext(found.Name) : found.Key;
     else
       return placeholder;
   } else

package/components/date_utils.d.ts

@@ -1,5 +1,5 @@
 export function getFormattedStringDate(d: any, type?: string): string;
 export function getNiceStringDateTime(d: any): string;
-export function getNiceStringDate(d: any): string;
-export function dayName(d: any): "" | "Sun" | "Mon" | "Tue" | "Wed" | "Thu" | "Fri" | "Sat";
-export function monthName(m: any): "" | "Jan" | "Feb" | "Mar" | "Apr" | "May" | "Jun" | "Jul" | "Aug" | "Sep" | "Oct" | "Nov" | "Dec";
+export function getNiceStringDate(d: any): any;
+export function dayName(d: any): any;
+export function monthName(m: any): any;

package/components/date_utils.js

@@ -1,4 +1,6 @@
 
+import {getCurrentLanguageKey} from '../i18n.js'
+
 export function getFormattedStringDate(d, type = "datetime")
 {
     if(!d)
@@ -86,11 +88,11 @@ export function getNiceStringDate(d)
         
         let days_diff = day - current_day;
         if(days_diff == 0)
-            return 'Today';
+            return today();
         else if(days_diff == 1)
-            return 'Tomorrow';
+            return tomorrow();
         else if(days_diff == -1)
-            return 'Yesterday';
+            return yesterday();
         else if(days_diff > 0 && days_diff <= 7)
         {
             if(day_of_week > current_day_of_week)
@@ -122,67 +124,68 @@ export function getNiceStringDate(d)
     }
 }
 
-export function dayName(d)
+function today()
 {
-    switch(d)
-    {
-    case 0:
-        return 'Sun';
-    
-    case 1:
-        return 'Mon';
-
-    case 2:
-        return 'Tue';
-
-    case 3:
-        return 'Wed';
+    const lang = getCurrentLanguageKey()
+    if(Object.keys(abbrCloseLang).includes(lang))
+        return abbrCloseLang[lang][1]
+    else
+        return abbrCloseLang.en[1]
+}
 
-    case 4:
-        return 'Thu';
+function tomorrow()
+{
+    const lang = getCurrentLanguageKey()
+    if(Object.keys(abbrCloseLang).includes(lang))
+        return abbrCloseLang[lang][2]
+    else
+        return abbrCloseLang.en[2]
+}
 
-    case 5:
-        return 'Fri';
+function yesterday()
+{
+    const lang = getCurrentLanguageKey()
+    if(Object.keys(abbrCloseLang).includes(lang))
+        return abbrCloseLang[lang][0]
+    else
+        return abbrCloseLang.en[0]
+}
 
-    case 6:
-        return 'Sat';
-    
-    case 7:
-        return 'Sun';
-    }
 
-    return '';
+export function dayName(d)
+{
+    const lang = getCurrentLanguageKey()
+    if(Object.keys(abbrDaysLang).includes(lang))
+        return abbrDaysLang[lang][d]
+    else
+        return abbrDaysLang.en[d]
 }
 
 export function monthName(m)
 {
-    switch(m)
-    {
-        case 0:
-            return "Jan";
-        case 1:
-            return "Feb";
-        case 2:
-            return "Mar";
-        case 3:
-            return "Apr";
-        case 4:
-            return "May";
-        case 5:
-            return "Jun";
-        case 6:
-            return "Jul";
-        case 7:
-            return "Aug";
-        case 8:
-            return "Sep";
-        case 9:
-            return "Oct";
-        case 10:
-            return "Nov";
-        case 11:
-            return "Dec";
-    }
+    const lang = getCurrentLanguageKey()
+    if(Object.keys(abbrMonthsLang).includes(lang))
+        return abbrMonthsLang[lang][m]
+    else
+        return abbrMonthsLang.en[m]
+}
+
+// translations
+
+const abbrCloseLang = {
+    en: ['yesterday', 'today', 'tomorrow'],
+    es: ['ayer', 'hoy', 'mañana'],
+    pl: ['wczoraj', 'dziś', 'jutro']
+}
+
+const abbrDaysLang = {
+    en: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+    es: ['dom', 'lun', 'mar', 'miérc', 'juev', 'vier', 'sáb', 'dom'],
+    pl: ['nie', 'pon', 'wto', 'śro', 'czw', 'pią', 'sob', 'nie'] 
+}
 
-    return '';
+const abbrMonthsLang = {
+    en: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    es: ['ene', 'feb', 'mar', 'abr', 'may', 'jun', 'jul', 'ago', 'set', 'oct', 'nov', 'dic'],
+    pl: ['sty', 'lut', 'mar', 'kwi', 'maj', 'cze', 'lip', 'sie', 'wrz', 'paź', 'lis', 'gru']
 }

package/components/list/internal/list.element.svelte

@@ -18,6 +18,7 @@ import { rList_definition, rList_property_type } from "../List";
 import { push, link } from "svelte-spa-router";
 import { FaExternalLinkAlt } from "svelte-icons/fa/";
 import Tags from "../../tags.svelte";
+import { ext } from "../../../i18n";
 export let item;
 export let title = "";
 export let summary = "";
@@ -250,7 +251,7 @@ export function scrollToView() {
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 {#if item}
-{@const element_title = item[title]}
+{@const element_title = ext(item[title])}
 
 <section    class="my-1 flex flex-row w-full  text-stone-900 dark:text-stone-300 cursor-default rounded-md border border-transparent {selected_class} {focused_class} scroll-mt-[50px] sm:scroll-mt-[40px]"
             role="menu"
@@ -328,8 +329,9 @@ export function scrollToView() {
         </section>
 
         {#if summary && (item[summary] || placeholder=='Summary')}
+            {@const summaryText = ext(item[summary])}
             {@const element_id = `__hd_list_ctrl_${getItemKey(item)}_Summary`}
-            {#key item[summary] }           
+            {#key summaryText }           
                 {#if is_row_active}
                     <p  id={element_id} 
                         class=" text-sm                              
@@ -340,14 +342,14 @@ export function scrollToView() {
                                 onFinish: (d) => {placeholder='';},
                                 active: true
                             }}>
-                        {item[summary]}
+                        {summaryText}
                     </p>
                 {:else}
                     <p  id={element_id} 
                         class=" text-sm 
                                     text-stone-600 dark:text-stone-400"
                         on:click={(e) => on_active_row_clicked(e, 'bottom')}>
-                        {item[summary]}
+                        {summaryText}
                     </p>
                 {/if}
             {/key}

package/components/paginator.svelte

@@ -1,5 +1,7 @@
 <script>
     
+    import {i18n} from '../i18n.js'
+
     export let pageNo
     export let allPagesNo
     export let onPage
@@ -67,7 +69,9 @@
             <li>
                 <button on:click={onPrevPage} 
                     class="flex items-center justify-center px-3 h-8 ms-0 leading-tight text-stone-500 bg-white border border-e-0 border-stone-300 rounded-s-lg hover:bg-stone-100 hover:text-stone-700 dark:bg-stone-800 dark:border-stone-700 dark:text-stone-400 dark:hover:bg-stone-700 dark:hover:text-white">
-                    <span class="sr-only">Previous</span>
+                    <span class="sr-only">
+                        { i18n({en: 'Previous', es: 'Anterior', pl: 'Wcześniejsze'}) }
+                    </span>
                         <svg class="w-2.5 h-2.5 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
                             <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 1 1 5l4 4"/>
                         </svg>
@@ -94,7 +98,11 @@
             <!--a href="#" aria-current="page" class="">3</a-->
             <li>
                 <button on:click={onNextPage} class="flex items-center justify-center px-3 h-8 leading-tight text-stone-500 bg-white border border-stone-300 rounded-e-lg hover:bg-stone-100 hover:text-stone-700 dark:bg-stone-800 dark:border-stone-700 dark:text-stone-400 dark:hover:bg-stone-700 dark:hover:text-white">
-                    <span class="sr-only">Next</span>
+                    <span class="sr-only">
+
+                        { i18n({en: 'Next', es: 'Siguiente', pl: 'Następne'}) }
+
+                    </span>
                         <svg class="w-2.5 h-2.5 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
                             <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
                         </svg>

package/components/tags.palette.svelte

@@ -4,6 +4,7 @@
     import TagColorsPalette from './tag.colors.svelte'
 	import { tick } from 'svelte';
 	import { isDeviceSmallerThan } from '../utils';
+    import {i18n} from '../i18n'
 
     export let usedTags = []
     export let allTags  = []
@@ -194,9 +195,13 @@
                         onCustomClick={(e) => onTagSelected(tag)}/>
                 {/each}
             {:else if allowNewTags}
-                <p>Create tag:</p>
+                <p>
+                    { i18n({en: 'Create tag:', es: 'Crear etiqueta:', pl: 'Utwrórz etykietę:'}) }
+                </p>
             {:else}
-                <p>No tags</p>
+                <p>
+                    { i18n({en: 'No tags', es: 'Sin etiquetas', pl: 'Żadnych etykiet'}) }
+                </p>
             {/if}
 
         {/key}
@@ -211,7 +216,7 @@
             on:input={onTextInput}
             on:blur={onTextBlur}
             on:keydown={onKeyDown}
-            placeholder="Type to filter or create tag">
+            placeholder={i18n({en: 'Type to filter or create tag', es: 'Escriba para filtrar o crear una etiqueta', pl: 'Wpisz, aby filtrować lub utworzyć tag'})}>
         {#if allowNewTags}
             <button class="block w-5 h-5 mt-0.5 ml-auto mr-2
                     text-stone-600 hover:text-stone-800 hover:bg-stone-200 active:bg-stone-200 border-stone-200

package/i18n.d.ts

@@ -28,3 +28,5 @@ export function getCurrentLanguageKey(): string;
  * i18n("EN; ES; PL") => "EN" albo "ES" albo "PL"
  */
 export function i18n(list: any): any;
+export function extractTranslated(str: any): any;
+export function ext(str: any): any;

package/i18n.js

@@ -160,3 +160,32 @@ export function i18n(list)
 	}
 }
 
+export function extractTranslated(str)
+{
+	if(!str)
+		return ""
+	
+	if(str.startsWith('_;'))
+	{
+		const body = str.replace(/^_;\s*/, '');   			// cut prefix "_;  "
+		return i18n(body);
+	}
+	else if(str.startsWith('__;'))
+	{
+		const body = str.replace(/^__;\s*/, '');   			// cut prefix "__;  "
+  		const PAIRS = /([A-Za-z]{2})\s*:\s*([^;]*)/g;
+		const dict = {};
+  		
+		for (const [, code, text] of body.matchAll(PAIRS)) 
+			dict[code.toLowerCase()] = text.trim();
+		
+		return i18n(dict)
+	}
+	else
+		return str
+}
+
+export function ext(str)
+{
+	return extractTranslated(str)
+}

package/index.d.ts

@@ -72,5 +72,5 @@ export { default as IcH2 } from './components/document/internal/h2.icon.svelte';
 export { default as IcH3 } from './components/document/internal/h3.icon.svelte';
 export { default as IcH4 } from './components/document/internal/h4.icon.svelte';
 export { registerKicksObserver, unregisterKicksObserver, forceKicksChecking } from './kicks.js';
-export { i18n, setLanguages, getLanguages, setCurrentLanguage, getCurrentLanguage, getCurrentLanguageIdx, getCurrentLanguageKey } from './i18n.js';
+export { i18n, extractTranslated, ext, setLanguages, getLanguages, setCurrentLanguage, getCurrentLanguage, getCurrentLanguageIdx, getCurrentLanguageKey } from './i18n.js';
 export { i18nPreprocess } from './i18n-preprocess.js';

package/index.js

@@ -78,5 +78,5 @@ export { default as IcH2 } from './components/document/internal/h2.icon.svelte';
 export { default as IcH3 } from './components/document/internal/h3.icon.svelte';
 export { default as IcH4 } from './components/document/internal/h4.icon.svelte';
 export { registerKicksObserver, unregisterKicksObserver, forceKicksChecking } from './kicks.js';
-export { i18n, setLanguages, getLanguages, setCurrentLanguage, getCurrentLanguage, getCurrentLanguageIdx, getCurrentLanguageKey } from './i18n.js';
+export { i18n, extractTranslated, ext, setLanguages, getLanguages, setCurrentLanguage, getCurrentLanguage, getCurrentLanguageIdx, getCurrentLanguageKey } from './i18n.js';
 export { i18nPreprocess } from './i18n-preprocess.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@humandialog/forms.svelte",
-  "version": "1.6.0",
+  "version": "1.6.2",
   "description": "Basic Svelte UI components for Object Reef applications",
   "devDependencies": {
     "@playwright/test": "^1.28.1",