@humandialog/forms.svelte 1.6.2 → 1.6.4

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

@@ -165,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) {

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/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.2",
+  "version": "1.6.4",
   "description": "Basic Svelte UI components for Object Reef applications",
   "devDependencies": {
     "@playwright/test": "^1.28.1",
@@ -19,6 +19,7 @@
     "prettier-plugin-svelte": "^2.8.1",
     "svelte": "^3.54.0",
     "svelte-check": "^2.9.2",
+    "svelte-spa-history-router": "^2.1.1",
     "tailwindcss": "^3.3.3",
     "tslib": "^2.4.1",
     "typescript": "^4.9.3",

package/vertical.toolbar.svelte

@@ -90,7 +90,10 @@
                         const tab = {
                             key: key,
                             icon: ctab.icon,
-                            onclick: (e) => on_navigator_tab_clicked(e, key)
+                            onclick: (e) => on_navigator_tab_clicked(e, key),
+                            mountObserver: ctab.mountObserver,
+                            badgeObtainerAsync: ctab.badgeObtainerAsync,
+                            badgeObtainer: ctab.badgeObtainer
                         }
 
                         tabs.push(tab); 
@@ -388,6 +391,26 @@
         newGroupParams.name = '';
         newGroupModalVisible = false;
     }
+
+    function mountNavigator(node, tab)
+    {
+        if(!tab.mountObserver)
+            return;
+
+        const onDestroy = tab.mountObserver(rerenderTabs)
+
+        return {
+            destroy() {
+                if(onDestroy)
+                    onDestroy()
+            }
+        }
+    }
+
+    function rerenderTabs()
+    {
+        tabs = [...tabs]
+    }
     
 </script>
 
@@ -398,11 +421,41 @@
         {#each tabs as tab}
             {@const isSelected = $navKey == tab.key}
             <button
-                class="h-16 px-0 flex justify-center items-center w-full text-stone-300 hover:text-stone-100"
+                class="h-16 px-0 flex justify-center items-center w-full text-stone-300 hover:text-stone-100 relative"
                 class:bg-orange-500={isSelected}
-                on:click={tab.onclick}>
+                on:click={tab.onclick}
+                use:mountNavigator={tab}>
                 
                 <Icon s="xl" component={tab.icon}/>
+
+                {#if !isSelected}
+                    {#if tab.badgeObtainer}
+                        {@const badge=tab.badgeObtainer()}
+                        {#if badge > 0}
+                            {#if badge > 9}
+                                9+
+                            {:else}
+                                {badge}
+                            {/if}
+                        {/if}
+                    {:else if tab.badgeObtainerAsync}
+                        {#await tab.badgeObtainerAsync() then badge}
+                            {#if badge > 0}
+                                <div class="absolute 
+                                            inline-flex items-center justify-center 
+                                            w-5 h-5 
+                                            text-[10px] font-bold text-white bg-red-500 border-2 border-white rounded-full bottom-2 end-0 dark:border-gray-900">
+                                    {#if badge > 9}
+                                        9+
+                                    {:else}
+                                        {badge}
+                                    {/if}
+                                </div>
+                            {/if}
+                        {/await}
+                    {/if}
+                {/if}
+
             </button>
         {/each}
     </div>