@humandialog/forms.svelte 1.6.1 → 1.6.3

package/components/document/editor.svelte

@@ -1094,15 +1094,15 @@ const paletteInsertCommands = () => [
 ];
 const paletteCommands = [
   {
-    caption: i18n({ en: "Text", es: "Texto", pl: "Tekst" }),
+    caption: i18n({ en: "Styles", es: "Estilos", pl: "Style" }),
     separator: true
   },
-  ...paletteMarksCommands(),
+  ...paletteStylesCommands(),
   {
-    caption: i18n({ en: "Styles", es: "Estilos", pl: "Style" }),
+    caption: i18n({ en: "Text", es: "Texto", pl: "Tekst" }),
     separator: true
   },
-  ...paletteStylesCommands(),
+  ...paletteMarksCommands(),
   {
     caption: i18n({ en: "Insert", es: "Insertar", pl: "Wstaw" }),
     separator: true
@@ -1162,10 +1162,10 @@ function getPaletteCommands() {
     });
     commands.push({ separator: true });
   }
-  commands = [...commands, { caption: i18n({ en: "Text", es: "Texto", pl: "Tekst" }), separator: true }];
-  commands = [...commands, ...paletteMarksCommands()];
   commands = [...commands, { caption: i18n({ en: "Styles", es: "Estilos", pl: "Style" }), separator: true }];
   commands = [...commands, ...paletteStylesCommands()];
+  commands = [...commands, { caption: i18n({ en: "Text", es: "Texto", pl: "Tekst" }), separator: true }];
+  commands = [...commands, ...paletteMarksCommands()];
   commands = [...commands, { caption: i18n({ en: "Insert", es: "Insertar", pl: "Wstaw" }), separator: true }];
   if (extraInsertPaletteCommands && extraInsertPaletteCommands.length > 0) {
     extraInsertPaletteCommands.forEach((exc) => {

package/components/document/internal/palette.svelte

@@ -29,7 +29,6 @@ export function showAsToolbox(rect) {
   toolboxY = rect.bottom + margin;
   toolboxY += window.scrollY;
   css_style = `left:${toolboxX}px; top:${toolboxY}px;`;
-  console.log("toolbox: ", css_style);
   dispatch("palette_shown");
 }
 let paletteElement;
@@ -62,7 +61,6 @@ export function show(x, y, up = false) {
     const rect = paletteElement.getBoundingClientRect();
     closeButtonPos = `right: ${15}px; top: calc(${rect.y}px - 1.75rem)`;
   }, 0);
-  console.trace();
 }
 export function show_fullscreen(_width_px, _height_px) {
   isToolbox = false;
@@ -319,7 +317,7 @@ function isRowActive(cmd) {
                 style={css_style} >
 
             {#if filtered_commands && filtered_commands.length}
-                {#each filtered_commands as cmd, idx (cmd.caption)}
+                {#each filtered_commands as cmd, idx }
                     {#if cmd.separator}
                         {#if idx>0 && idx<filtered_commands.length-1}   <!-- not first or last place -->
                             <hr class="mx-4 my-1 border-stone-300 dark:border-stone-700"/>

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 = "";
@@ -164,10 +165,15 @@ function getHRef() {
     return "";
 }
 function activate_row(e, item2) {
+  const openable = !!definition.title_href || !!definition.title_href_func;
   if (toolbarOperations) {
     activateItem("props", item2, toolbarOperations(item2));
     if (e)
       e.stopPropagation();
+  } else if (openable) {
+    activateItem("props", item2, []);
+    if (e)
+      e.stopPropagation();
   }
 }
 function on_contextmenu(e) {
@@ -250,7 +256,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 +334,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 +347,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/sidebar/sidebar.group.svelte

@@ -1,12 +1,15 @@
 <script>
     import {FaChevronDown, FaChevronUp} from 'svelte-icons/fa'
+    import {i18n} from '../../i18n'
+    import {link} from 'svelte-spa-router'
 
     export let border = false;
     export let title = ''
     export let collapsable = false;
     export let onExpand = undefined
+    export let moreHref = undefined
 
-    let border_class = border ? " pt-4 mt-4 border-t border-stone-200 dark:border-stone-700" : ""
+    let border_class = border ? " pt-4 mt-4 border-t border-stone-200 dark:border-stone-700" : "mt-6"
     let title_border = title ? border_class : ""
     let list_border = title ? "" : border_class
     let collapsed = true;
@@ -18,21 +21,35 @@
 
         collapsed = !collapsed;
     }
+
+
+
 </script>
 
 {#if title}
-    <p class="text-base sm:text-xs uppercase font-semibold {title_border}">
-        {title}
-        {#if collapsable}
-            <button class="inline-block ml-3 sm:ml-2 sm:mt-0.5 w-4 sm:w-3 h-4 sm:h-3" on:click={toggleCollapsed}>
-                {#if collapsed}
-                    <FaChevronDown/>
-                {:else}
-                    <FaChevronUp/>
-                {/if}
-            </button>
+    <div class="w-full flex flex-row justify-between {title_border} mb-2">
+        <p class="text-xs uppercase font-semibold">
+         {title}
+            {#if collapsable}
+                <button class="inline-block ml-3 sm:ml-2 sm:mt-0.5 w-4 sm:w-3 h-4 sm:h-3" on:click={toggleCollapsed}>
+                    {#if collapsed}
+                        <FaChevronDown/>
+                    {:else}
+                        <FaChevronUp/>
+                    {/if}
+                </button>
+            {/if}
+        </p>
+
+        {#if moreHref}
+            <p class="text-xs uppercase font-semibold mr-2 text-stone-900 dark:text-stone-400">
+                <a href={moreHref} class="text-right" use:link>
+                    {i18n({en: 'More...', es: 'Más...', pl: 'Więcej...'})}
+                </a>
+            </p>
         {/if}
-    </p>
+    </div>
+
 {/if}
 
 {#if !collapsable}

package/components/sidebar/sidebar.group.svelte.d.ts

@@ -6,6 +6,7 @@ export default class Sidebar extends SvelteComponentTyped<{
     border?: boolean | undefined;
     collapsable?: boolean | undefined;
     onExpand?: any;
+    moreHref?: any;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -22,6 +23,7 @@ declare const __propDef: {
         border?: boolean | undefined;
         collapsable?: boolean | undefined;
         onExpand?: any;
+        moreHref?: any;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/i18n.js

@@ -162,6 +162,9 @@ export function i18n(list)
 
 export function extractTranslated(str)
 {
+	if(!str)
+		return ""
+	
 	if(str.startsWith('_;'))
 	{
 		const body = str.replace(/^_;\s*/, '');   			// cut prefix "_;  "

package/kicks.js

@@ -100,7 +100,7 @@ function checkKicks(informObservers=true)
 {
     const s = get(session)
     const appId = s.appId ? s.appId : 'octopus'
-    const tid = s.tid ? s.tid : 'octopus/15'
+    const tid = s.tid ? s.tid : 'octopus/13'
     console.log(s.isActive, appId, tid)
     if(s.isActive && appId && tid)
     {

package/package.json

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