@humandialog/forms.svelte 1.4.0 → 1.4.2

package/components/Fab.svelte

@@ -2,6 +2,7 @@
 import { contextToolbarOperations, pageToolbarOperations, contextItemsStore, toolsActionsOperations } from "../stores.js";
 import { showFloatingToolbar, showMenu, showGridMenu } from "./menu.js";
 import { FaChevronUp, FaChevronDown, FaChevronLeft, FaChevronRight, FaCircle, FaEllipsisV } from "svelte-icons/fa/";
+import { isDeviceSmallerThan } from "../utils.js";
 $:
   setupCurrentContextOperations($pageToolbarOperations, $contextToolbarOperations, $toolsActionsOperations);
 let operations = [];
@@ -14,12 +15,14 @@ let hToolboxExpanded = false;
 let isDirectPositioningMode = false;
 function setupCurrentContextOperations(...args) {
   let opVer = 0;
+  let main_FAB_position = "";
   isDirectPositioningMode = false;
   if ($toolsActionsOperations && Array.isArray($toolsActionsOperations) && toolsActionsOperations.length > 0) {
     operations = $toolsActionsOperations;
   } else if ($toolsActionsOperations && $toolsActionsOperations.operations && $toolsActionsOperations.operations.length > 0) {
     operations = $toolsActionsOperations.operations;
     opVer = $toolsActionsOperations.opver ?? 0;
+    main_FAB_position = $toolsActionsOperations.fab ?? "";
     if (opVer > 0)
       isDirectPositioningMode = true;
   } else if ($contextToolbarOperations && Array.isArray($contextToolbarOperations) && $contextToolbarOperations.length > 0) {
@@ -27,6 +30,7 @@ function setupCurrentContextOperations(...args) {
   } else if ($contextToolbarOperations && $contextToolbarOperations.operations && $contextToolbarOperations.operations.length > 0) {
     operations = $contextToolbarOperations.operations;
     opVer = $contextToolbarOperations.opver ?? 0;
+    main_FAB_position = $contextToolbarOperations.fab ?? "";
     if (opVer > 0)
       isDirectPositioningMode = true;
   } else {
@@ -35,6 +39,7 @@ function setupCurrentContextOperations(...args) {
     else {
       operations = $pageToolbarOperations.operations;
       opVer = $pageToolbarOperations.opver ?? 0;
+      main_FAB_position = $pageToolbarOperations.fab ?? "";
       if (opVer > 0)
         isDirectPositioningMode = true;
     }
@@ -46,28 +51,38 @@ function setupCurrentContextOperations(...args) {
     });
     operations = flatOperations;
   } else if (opVer == 2) {
-    let flatOperations = [];
-    operations.forEach((group) => {
-      flatOperations.push({
-        caption: group.caption,
-        separator: true
+    const definedOperations = [...operations];
+    if (main_FAB_position) {
+      let flatOperations = [];
+      definedOperations.forEach((group) => {
+        flatOperations.push({
+          caption: group.caption,
+          separator: true
+        });
+        flatOperations = [...flatOperations, ...group.operations];
+      });
+      const realOps = flatOperations.filter((el) => !!el.separator == false);
+      if (realOps.length > 1) {
+        mainOperation = {
+          icon: FaEllipsisV,
+          menu: flatOperations,
+          fab: main_FAB_position
+        };
+        operations = [mainOperation];
+      } else if (realOps.length == 1) {
+        mainOperation = realOps[0];
+        mainOperation["fab"] = main_FAB_position;
+        operations = [mainOperation];
+      } else
+        operations = [];
+    }
+    definedOperations.forEach((group) => {
+      group.operations.forEach((op) => {
+        if (op.fab) {
+          operations = [...operations, op];
+        }
       });
-      flatOperations = [...flatOperations, ...group.operations];
     });
-    const realOps = flatOperations.filter((el) => !!el.separator == false);
-    if (realOps.length > 1) {
-      mainOperation = {
-        icon: FaEllipsisV,
-        menu: flatOperations,
-        fab: "M00"
-      };
-      operations = [mainOperation];
-    } else if (realOps.length == 1) {
-      mainOperation = realOps[0];
-      mainOperation["fab"] = "M00";
-      operations = [mainOperation];
-    } else
-      operations = [];
   } else {
     if (operations.length > 0)
       mainOperation = operations[0];
@@ -115,12 +130,17 @@ function on_click(e, operation) {
   rect.y -= margin;
   rect.width += 2 * margin;
   rect.height += 2 * margin;
+  const mobile = isDeviceSmallerThan("sm");
   if (operation.menu)
     showMenu(rect, operation.menu);
   else if (operation.toolbar)
     showFloatingToolbar(rect, operation.toolbar, operation.props ?? {});
-  else if (operation.grid)
-    showMenu(rect, operation.grid);
+  else if (operation.grid) {
+    if (mobile)
+      showMenu(rect, operation.grid);
+    else
+      showGridMenu(rect, operation.grid);
+  }
 }
 function toggleExpandToolboxV(e) {
   vToolboxExpanded = !vToolboxExpanded;

package/components/contextmenu.svelte

@@ -2,7 +2,7 @@
 import Icon from "./icon.svelte";
 import { contextItemsStore, pushToolsActionsOperations, popToolsActionsOperations } from "../stores";
 import { isDeviceSmallerThan, isOnScreenKeyboardVisible } from "../utils";
-import { hideWholeContextMenu } from "./menu";
+import { hideWholeContextMenu, showMenu, showFloatingToolbar, showGridMenu } from "./menu";
 import { FaTimes } from "svelte-icons/fa";
 export let widthPx = 400;
 export let menu_items_id_prefix = "__hd_svelte_menuitem_";
@@ -181,7 +181,7 @@ function on_keydown(e, operation, index) {
       hide_submenu();
       break;
     case "Enter":
-      execute_action(operation, index);
+      execute_action(void 0, operation, index);
       e.preventDefault();
       e.stopPropagation();
       break;
@@ -219,7 +219,7 @@ function on_mouse_move(index) {
   if (!isDeviceSmallerThan("sm"))
     focus_menu_item(index);
 }
-function execute_action(operation, index) {
+function execute_action(e, operation, index) {
   if (operation.menu) {
     focus_menu_item(index);
     return;
@@ -227,12 +227,29 @@ function execute_action(operation, index) {
   hideWholeContextMenu();
   if (!operation)
     return;
-  if (!operation.action)
-    return;
-  let context_item = null;
-  if ($contextItemsStore.focused)
-    context_item = $contextItemsStore[$contextItemsStore.focused];
-  operation.action(context_item);
+  let owner = e.target;
+  while (owner && owner.tagName != "BUTTON")
+    owner = owner.parentElement;
+  if (operation.preAction)
+    operation.preAction(owner);
+  const mobile = isDeviceSmallerThan("sm");
+  if (operation.action) {
+    operation.action(owner, around_rect);
+  } else {
+    let rect;
+    if (around_rect)
+      rect = around_rect;
+    else
+      rect = owner.getBoundingClientRect();
+    if (operation.toolbar)
+      showFloatingToolbar(rect, operation.toolbar, operation.props ?? {});
+    else if (operation.grid) {
+      if (mobile)
+        showMenu(rect, operation.grid);
+      else
+        showGridMenu(rect, operation.grid);
+    }
+  }
 }
 function focus_menu_item(index) {
   const operation = operations[index];
@@ -290,7 +307,9 @@ function calculateBackground(is_highlighted, active) {
 </script>
 
 <div id="__hd_svelte_contextmenu" 
-    class=" bg-white dark:bg-stone-800 text-stone-500 dark:text-stone-400 rounded-lg border border-stone-200 dark:border-stone-700 shadow-md 
+    class=" bg-white dark:bg-stone-800 
+            text-stone-800 dark:text-stone-400 rounded-lg border 
+            border-stone-200 dark:border-stone-700 shadow-md 
             z-30 fixed min-w-[{min_width_px}px] w-max overflow-y-auto" 
     style={css_position}
     bind:this={menu_root}>
@@ -317,7 +336,7 @@ function calculateBackground(is_highlighted, active) {
             <button class="block  w-full pr-4 text-left flex flex-row cursor-context-menu {active} focus:outline-none"
                     id={menu_item_id}
                     bind:this={menu_items[index]}
-                    on:click|stopPropagation={(e) => { execute_action(operation, index) } } 
+                    on:click|stopPropagation={(e) => { execute_action(e, operation, index) } } 
                     on:mouseenter = {(e) => {on_mouse_move(index)}}
                     on:keydown|stopPropagation={(e) => on_keydown(e, operation, index)}
                     on:mousedown={mousedown}

package/components/document/internal/palette.svelte

@@ -39,6 +39,8 @@ afterUpdate(
       visible && paletteElement
     ) {
       let layoutRoot = document.getElementById("__hd_svelte_layout_root");
+      if (!layoutRoot)
+        layoutRoot = document.getElementById("app");
       if (!!layoutRoot && paletteElement.parentElement != layoutRoot) {
         await tick();
         layoutRoot.appendChild(paletteElement);

package/components/kanban/internal/kanban.card.svelte

@@ -1,5 +1,5 @@
 <script>import { getContext, tick } from "svelte";
-import { push } from "svelte-spa-router";
+import { push, link } from "svelte-spa-router";
 import {
   contextItemsStore,
   isActive,
@@ -137,9 +137,9 @@ export async function editProperty(field) {
   }
 }
 function followDefinedHRef() {
-  let link = getHRef();
-  if (link)
-    push(link);
+  let link2 = getHRef();
+  if (link2)
+    push(link2);
 }
 function getHRef() {
   if (definition.titleHref)
@@ -221,12 +221,18 @@ function showAttachementIcon() {
                     onSoftEnter: async (text) => { onTitleChanged(text); await editProperty('Summary') }
                     }}
                 use:conditionalClick={{
-                    condition: canOpen, 
+                    condition: hasOpen, 
                     callback: performOpen}}
                 bind:this={titleElement}>
-                <!--a href="#"-->
+
+                {#if isLinkLike}
+                    <a href={getHRef()} use:link>
+                        {item[definition.titleAttrib]}    
+                    </a>
+                {:else}
                     {item[definition.titleAttrib]}
-                <!--/a-->
+                {/if}
+
 
                 {#if showIcon}
                     <span id="attachement" class="absolute top-1 right-0 w-5 h-5 sm:w-3 sm:h-3">
@@ -263,7 +269,7 @@ function showAttachementIcon() {
             {#if isCardActive}
                 <p class="  text-sm sm:text-sm 
                             
-                            text-stone-400
+                            text-stone-600 dark:text-stone-400
                             
                             overflow-hidden"
                             use:editable={{
@@ -277,7 +283,7 @@ function showAttachementIcon() {
             {:else}
                 <p class=" text-sm  sm:text-sm 
                                
-                                text-stone-400
+                                text-stone-600 dark:text-stone-400
                                 
                                 overflow-hidden">
                     {item[definition.summaryAttrib]}

package/components/kanban/internal/kanban.props.svelte

@@ -118,7 +118,7 @@ async function editTags(field, propIdx) {
                     class="     h-6
                                 text-sm sm:min-h-[1rem]
                                 text-base-sm min-h-[1.5rem]
-                                text-stone-400
+                                text-stone-600 dark:text-stone-400
                                 text-right"
                                 bind:this={propElements[idx]}>
                     {item[prop.a]}

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

@@ -15,7 +15,7 @@ import Summary from "./list.element.summary.svelte";
 import Properties from "./list.element.props.svelte";
 import { isDeviceSmallerThan } from "../../../utils";
 import { rList_definition, rList_property_type } from "../List";
-import { push } from "svelte-spa-router";
+import { push, link } from "svelte-spa-router";
 import { FaExternalLinkAlt } from "svelte-icons/fa/";
 import Tags from "../../tags.svelte";
 export let item;
@@ -151,9 +151,9 @@ function on_active_row_clicked(e, part) {
   }
 }
 function followDefinedHRef() {
-  let link = getHRef();
-  if (link)
-    push(link);
+  let link2 = getHRef();
+  if (link2)
+    push(link2);
 }
 function getHRef() {
   if (definition.title_href)
@@ -252,7 +252,7 @@ export function scrollToView() {
 {#if item}
 {@const element_title = item[title]}
 
-<section    class="my-1 flex flex-row w-full  text-stone-700 dark:text-stone-300 cursor-default rounded-md border border-transparent {selected_class} {focused_class} scroll-mt-[50px] sm:scroll-mt-[40px]"
+<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"
             tabindex="-1"
             bind:this={rootElement}> <!--  on:contextmenu={on_contextmenu} -->
@@ -273,18 +273,19 @@ export function scrollToView() {
                     {#if is_link_like}
                         <p  class=" text-base font-semibold 
                                    
-                                    whitespace-nowrap overflow-clip w-full sm:flex-none sm:{name_w}
-                                    sm:hover:cursor-pointer underline"
+                                    whitespace-nowrap overflow-clip w-full sm:flex-none sm:{name_w}"
                                     id="__hd_list_ctrl_{getItemKey(item)}_Title"
-                                    on:click|stopPropagation={followDefinedHRef}
                                     use:editable={{
                                         action: (text) => {change_name(text)},
                                         active: false,
                                         readonly: definition.title_readonly,
                                         onSoftEnter: (text) => {change_name(text); editProperty('Summary')}
                                     }}
-                            > 
-                            {element_title}
+                            >  <!--on:click|stopPropagation={followDefinedHRef}-->
+                            <a  class="sm:hover:cursor-pointer underline" 
+                                href={getHRef()} use:link>
+                                {element_title}
+                            </a>
                         </p>
                     {:else}
                         <p  class=" text-base font-semibold 
@@ -332,7 +333,7 @@ export function scrollToView() {
                 {#if is_row_active}
                     <p  id={element_id} 
                         class=" text-sm                              
-                                text-stone-400"
+                                text-stone-600 dark:text-stone-400"
                             use:editable={{
                                 action: (text) => {change_summary(text)},
                                 readonly: definition.summary_readonly,
@@ -344,7 +345,7 @@ export function scrollToView() {
                 {:else}
                     <p  id={element_id} 
                         class=" text-sm 
-                                    text-stone-400"
+                                    text-stone-600 dark:text-stone-400"
                         on:click={(e) => on_active_row_clicked(e, 'bottom')}>
                         {item[summary]}
                     </p>

package/components/menu.js

@@ -7,6 +7,8 @@ export function showMenu(around, operations) {
     let menu_element = document.getElementById("__hd_svelte_contextmenu");
     if (!menu_element) {
         let app_div = document.getElementById("__hd_svelte_layout_root");
+        if (!app_div)
+            app_div = document.getElementById("app");
         menu_comopnent = new Menu({
             target: app_div,
             props: {}
@@ -32,6 +34,8 @@ export function showFloatingToolbar(around, toolbar, props = {}) {
     let floating_container = document.getElementById("__hd_svelte_floating_container");
     if (!floating_container) {
         let app_div = document.getElementById("__hd_svelte_layout_root");
+        if (!app_div)
+            app_div = document.getElementById("app");
         toolbar_component = new Floating_container({
             target: app_div,
             props: {}

package/components/sidebar/sidebar.item.svelte

@@ -1,7 +1,7 @@
 <script>import { getContext, tick } from "svelte";
 import Icon from "../icon.svelte";
 import { contextItemsStore, auto_hide_sidebar, contextToolbarOperations } from "../../stores";
-import { FaBars, FaEllipsisH } from "svelte-icons/fa";
+import { FaBars, FaEllipsisV } from "svelte-icons/fa";
 import { link, push } from "svelte-spa-router";
 import {
   selectable as _selectable,
@@ -184,9 +184,9 @@ function activateRow(e) {
           caption: "View",
           operations: [
             {
-              icon: FaEllipsisH,
+              icon: FaEllipsisV,
               menu: operationsList,
-              fab: "M10"
+              fab: "M00"
             }
           ]
         }
@@ -218,19 +218,52 @@ function activateRow(e) {
             <div class="flex flex-row justify-between
                         text-base font-semibold">
                 {#if href}
-                    <a  href={href} 
-                        on:click={on_link_clicked} 
-                        class="flex-1 ml-2 inline-flex items-center group"
-                        >
-                        {#if icon}
-                            <Icon class="w-5 h-5 mt-0.5 ml-2 mr-1" component={icon}/>
-                            
+                    {#if isOnPage}
+                        {#if isRowActive}
+                            <a  on:click={on_link_clicked} 
+                                href={href} 
+                                use:link
+                                class="flex-1 ml-2 inline-flex items-center underline"
+                                >
+                                {#if icon}
+                                    <Icon class="w-5 h-5 mt-0.5 ml-2 mr-1" component={icon}/>
+                                    
+                                {/if}
+                                <span   class="ml-3"
+                                        use:editable_if_needed={editable}>
+                                    <slot/>
+                                </span>
+                            </a>
+                        {:else}
+                            <span  on:click={on_link_clicked} 
+                                class="flex-1 ml-2 inline-flex items-center"
+                                >
+                                {#if icon}
+                                    <Icon class="w-5 h-5 mt-0.5 ml-2 mr-1" component={icon}/>
+                                    
+                                {/if}
+                                <span   class="ml-3"
+                                        use:editable_if_needed={editable}>
+                                    <slot/>
+                                </span>
+                            </span>
                         {/if}
-                        <span   class="ml-3 group-hover:underline"
-                                use:editable_if_needed={editable}>
-                            <slot/>
-                        </span>
-                    </a>
+                    {:else}
+                        <a  on:click={on_link_clicked} 
+                            href={href} 
+                            use:link
+                            class="flex-1 ml-2 inline-flex items-center group"
+                            >
+                            {#if icon}
+                                <Icon class="w-5 h-5 mt-0.5 ml-2 mr-1" component={icon}/>
+                                
+                            {/if}
+                            <span   class="ml-3 group-hover:underline"
+                                    use:editable_if_needed={editable}>
+                                <slot/>
+                            </span>
+                        </a>
+                    {/if}
                 {:else}
                     <p  class="flex-1 ml-2 inline-flex items-center group cursor-default"
                         use:selectable_if_needed={selectable}>

package/horizontal.toolbar.svelte

@@ -27,8 +27,11 @@
 	import { isDeviceSmallerThan, isOnNavigationPage, pushNavigationPage, popNavigationPage } from './utils.js';
     
 
-    export let appConfig;
+    export let appConfig = undefined;
     export let clearsContext = 'sel props'
+
+    export let definedTabs = undefined
+    export let mainToolbarConfig = undefined
     
     let config = null;
     let has_selection_details = false;
@@ -45,23 +48,39 @@
 
     $:
     {
-        config = appConfig.mainToolbar;
-        has_selection_details = appConfig.selectionDetails;
-        if(has_selection_details)
-            selection_details_caption = appConfig.selectionDetails.caption ?? 'Properties';
+        if(appConfig)
+        {
+            config = appConfig.mainToolbar;
+            has_selection_details = appConfig.selectionDetails;
+            if(has_selection_details)
+                selection_details_caption = appConfig.selectionDetails.caption ?? 'Properties';
+        }
+        else
+        {
+            config = mainToolbarConfig
+            has_selection_details = false
+        }
+
         is_logged_in = $session.isActive;
         show_sign_in_out_icons = config.signin ? true : false;
         sign_in_href = $signInHRef;
         sign_out_href = $signOutHRef;
         //user_is_in_multiple_groups = $session.tenants.length > 1
 
-        tabs = Object.keys(appConfig.sidebar);
-        if(tabs.length > 1)
-            icon = FaBars;
-        else    
+        if(definedTabs && Array.isArray(definedTabs) && definedTabs.length > 0)
         {
-            let first_tab = appConfig.sidebar[tabs[0]];
-            icon = first_tab.icon;
+            
+        }
+        else
+        {
+            tabs = Object.keys(appConfig.sidebar);
+            if(tabs.length > 1)
+                icon = FaBars;
+            else    
+            {
+                let first_tab = appConfig.sidebar[tabs[0]];
+                icon = first_tab.icon;
+            }
         }
     }
 
@@ -283,9 +302,17 @@
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <div class="no-print flex flex-row w-full" on:click={clearSelection}>
     <div class="flex-none left-0 flex h-12 sm:h-10">
-        <button class="w-12 sm:w-10 h-full flex justify-center items-center text-stone-300 hover:text-stone-100" on:click|stopPropagation={toggle_navigator}>
-            <Icon class="w-5 h-5" component={icon}/>
-        </button>
+        {#if definedTabs && definedTabs.length > 0}
+            {#each definedTabs as tab}
+                <button class="w-12 sm:w-10 h-full flex justify-center items-center text-stone-300 hover:text-stone-100" on:click={tab.onclick}>
+                    <Icon class="w-5 h-5" component={tab.icon}/>
+                </button>    
+            {/each}
+        {:else}
+            <button class="w-12 sm:w-10 h-full flex justify-center items-center text-stone-300 hover:text-stone-100" on:click|stopPropagation={toggle_navigator}>
+                <Icon class="w-5 h-5" component={icon}/>
+            </button>
+        {/if}
     </div>
 
     <div class="grow">

package/horizontal.toolbar.svelte.d.ts

@@ -2,8 +2,10 @@
 /** @typedef {typeof __propDef.events}  HorizontalEvents */
 /** @typedef {typeof __propDef.slots}  HorizontalSlots */
 export default class Horizontal extends SvelteComponentTyped<{
-    appConfig: any;
+    appConfig?: any;
     clearsContext?: string | undefined;
+    definedTabs?: any;
+    mainToolbarConfig?: any;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> {
@@ -14,8 +16,10 @@ export type HorizontalSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        appConfig: any;
+        appConfig?: any;
         clearsContext?: string | undefined;
+        definedTabs?: any;
+        mainToolbarConfig?: any;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/index.d.ts

@@ -5,6 +5,7 @@ export { default as Box } from "./form.box.svelte";
 export { default as Operations } from './operations.svelte';
 export { default as Layout } from './desk.svelte';
 export { default as VerticalToolbar } from './vertical.toolbar.svelte';
+export { default as HorizontalToolbar } from './horizontal.toolbar.svelte';
 export { default as Icon } from "./components/icon.svelte";
 export { default as IconT } from "./components/icon.ex.svelte";
 export { default as Button } from './components/button.svelte';
@@ -58,7 +59,7 @@ export { default as KanbanCallbacks } from './components/kanban/kanban.callbacks
 export { KanbanColumnTop, KanbanColumnBottom } from './components/kanban/Kanban';
 export { selectItem, activateItem, clearActiveItem, isActive, isSelected, getActive, editable, startEditing, saveCurrentEditable, selectable, handleSelect, isDeviceSmallerThan, resizeImage, refreshToolbarOperations, isOnScreenKeyboardVisible, randomString, UI, } from './utils';
 export { getNiceStringDateTime, getFormattedStringDate, getNiceStringDate, dayName, monthName } from './components/date_utils';
-export { mainContentPageReloader, reloadMainContentPage, reloadWholeApp, alerts, addAlert, onErrorShowAlert, main_sidebar_visible_store, tagsReloader, reloadVisibleTags } from './stores.js';
+export { mainContentPageReloader, reloadMainContentPage, reloadWholeApp, alerts, addAlert, onErrorShowAlert, main_sidebar_visible_store, tagsReloader, reloadVisibleTags, dark_mode_store } from './stores.js';
 export { data_tick_store, // tmp
 hasSelectedItem, hasDataItem, setNavigatorTitle } from "./stores";
 export { contextToolbarOperations, pageToolbarOperations, contextItemsStore, contextTypesStore } from './stores';

package/index.js

@@ -9,6 +9,7 @@ export { default as Box } from "./form.box.svelte";
 export { default as Operations } from './operations.svelte';
 export { default as Layout } from './desk.svelte';
 export { default as VerticalToolbar } from './vertical.toolbar.svelte';
+export { default as HorizontalToolbar } from './horizontal.toolbar.svelte';
 // @ts-ignore
 export { default as Icon } from "./components/icon.svelte";
 export { default as IconT } from "./components/icon.ex.svelte";
@@ -64,7 +65,7 @@ export { default as KanbanCallbacks } from './components/kanban/kanban.callbacks
 export { KanbanColumnTop, KanbanColumnBottom } from './components/kanban/Kanban';
 export { selectItem, activateItem, clearActiveItem, isActive, isSelected, getActive, editable, startEditing, saveCurrentEditable, selectable, handleSelect, isDeviceSmallerThan, resizeImage, refreshToolbarOperations, isOnScreenKeyboardVisible, randomString, UI, } from './utils';
 export { getNiceStringDateTime, getFormattedStringDate, getNiceStringDate, dayName, monthName } from './components/date_utils';
-export { mainContentPageReloader, reloadMainContentPage, reloadWholeApp, alerts, addAlert, onErrorShowAlert, main_sidebar_visible_store, tagsReloader, reloadVisibleTags } from './stores.js';
+export { mainContentPageReloader, reloadMainContentPage, reloadWholeApp, alerts, addAlert, onErrorShowAlert, main_sidebar_visible_store, tagsReloader, reloadVisibleTags, dark_mode_store } from './stores.js';
 export { data_tick_store, // tmp
 hasSelectedItem, hasDataItem, setNavigatorTitle } from "./stores";
 export { contextToolbarOperations, pageToolbarOperations, contextItemsStore, contextTypesStore } from './stores'; // tmp

package/operations.svelte

@@ -122,7 +122,7 @@ function isOperationActivated(operation) {
 </script>
 
 {#if hasOperations}
-<section class="flex flex-row no-print h-10 bg-stone-600 dark:bg-stone-950 overflow-x-clip overflow-y-hidden py-0 text-xs whitespace-nowrap">
+<section class="flex flex-row no-print h-10 bg-stone-50 dark:bg-stone-950 overflow-x-clip overflow-y-hidden py-0 text-xs whitespace-nowrap">
     <div    class="flex flex-row"
             class:flex-row-reverse={mobile}>
         
@@ -133,9 +133,10 @@ function isOperationActivated(operation) {
                     {#each operation.toolbox as operation}
                         <button type="button" 
                                 class="py-2.5 px-4 
-                                text-sm font-thin text-stone-100 dark:text-stone-300 dark:hover:text-white 
-                                hover:bg-stone-700 dark:hover:bg-stone-800 active:bg-stone-300 dark:active:bg-stone-600
-                                border-stone-200 focus:outline-none dark:border-stone-600
+                                text-sm font-thin 
+                                text-stone-800 hover:bg-stone-700 active:bg-stone-300 border-stone-200
+                                dark:text-stone-300 dark:hover:text-white dark:hover:bg-stone-800 dark:active:bg-stone-600 dark:border-stone-600
+                                focus:outline-none 
                                 inline-flex items-center"
                                 class:bg-stone-700={isActive}
                                 class:dark:bg-stone-800={isActive}
@@ -153,9 +154,10 @@ function isOperationActivated(operation) {
                 
                     <button type="button" 
                             class="py-2.5 px-4
-                            text-sm font-thin text-stone-100 dark:text-stone-300 dark:hover:text-white 
-                            hover:bg-stone-700 dark:hover:bg-stone-800 active:bg-stone-300 dark:active:bg-stone-600
-                            border-stone-200 focus:outline-none dark:border-stone-600
+                            text-sm font-thin 
+                            text-stone-600 hover:text-stone-800 hover:bg-stone-200 active:bg-stone-200 border-stone-200
+                            dark:text-stone-300 dark:hover:text-white dark:hover:bg-stone-800 dark:active:bg-stone-600 dark:border-stone-600
+                            focus:outline-none 
                             inline-flex items-center"
                             class:bg-stone-700={isActive}
                             class:dark:bg-stone-800={isActive}
@@ -181,9 +183,10 @@ function isOperationActivated(operation) {
             {@const isActive=isOperationActivated(operation)}
                 <button type="button" 
                         class="py-2.5 px-4 
-                        text-sm font-thin text-stone-100 dark:text-stone-300 dark:hover:text-white 
-                        hover:bg-stone-700 dark:hover:bg-stone-800 active:bg-stone-300 dark:active:bg-stone-600
-                        border-stone-200 focus:outline-none dark:border-stone-600
+                        text-sm font-thin 
+                        text-stone-600 hover:text-stone-800 hover:bg-stone-200 active:bg-stone-200 border-stone-200
+                        dark:text-stone-300 dark:hover:text-white dark:hover:bg-stone-800 dark:active:bg-stone-600 dark:border-stone-600
+                        focus:outline-none 
                         inline-flex items-center"
                         class:bg-stone-700={isActive}
                         class:dark:bg-stone-800={isActive}

package/package.json

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

package/tenant.members.svelte

@@ -298,6 +298,7 @@
 
     let page_operations={
         opver: 2,
+        fab: 'M00',
         operations: [
             {
                 caption: 'View',
@@ -400,6 +401,7 @@
         
         return {
             opver: 2,
+            fab: 'M00',
             operations: [
                 {
                     caption: 'User',

package/vertical.toolbar.svelte

@@ -28,10 +28,12 @@
 	import { popNavigationPage } from './utils';
     
 
-    export let appConfig;
+    export let appConfig = undefined;
     export let mobile=false;
     export let clearsContext = 'sel props'
     
+    export let definedTabs = undefined
+    export let mainToolbarConfig = undefined
     
     let tabs = new Array();
     let config = null;
@@ -46,10 +48,19 @@
     let can_add_new_group = false;
 
     $:  {
-        config = appConfig.mainToolbar;
-        has_selection_details = appConfig.selectionDetails;
-        if(has_selection_details)
-            selection_detils_caption = appConfig.selectionDetails.caption ?? 'Properties'
+        if(appConfig)
+        {
+            config = appConfig.mainToolbar;
+            has_selection_details = appConfig.selectionDetails;
+            if(has_selection_details)
+                selection_detils_caption = appConfig.selectionDetails.caption ?? 'Properties'
+        }
+        else
+        {
+            has_selection_details = false;
+            config = mainToolbarConfig;
+        }
+
         is_logged_in = $session.isActive;
         show_sign_in_out_icons = config.signin ? true : false;
         sign_in_href = $signInHRef;
@@ -57,23 +68,38 @@
 
         tabs = new Array();
 
-        Object.keys(appConfig.sidebar).forEach( (key) =>    
-            { 
-                const ctab = appConfig.sidebar[key];
-                const can_show = (ctab.authorized && is_logged_in) || (!ctab.authorized)
-                if(can_show)
-                    tabs.push({key: key, icon: ctab.icon}); 
-            });
-
-        // there is no current visible sidebar
-        if($main_sidebar_visible_store != '*')
+        if(definedTabs && Array.isArray(definedTabs) && definedTabs.length > 0)
         {
-            if(tabs.every( (e) => e.key != $main_sidebar_visible_store))
+            tabs = [...definedTabs]
+        }
+        else
+        {
+            Object.keys(appConfig.sidebar).forEach( (key) =>    
+                { 
+                    const ctab = appConfig.sidebar[key];
+                    const can_show = (ctab.authorized && is_logged_in) || (!ctab.authorized)
+                    if(can_show)
+                    {
+                        const tab = {
+                            key: key,
+                            icon: ctab.icon,
+                            onclick: (e) => on_navigator_tab_clicked(e, key)
+                        }
+
+                        tabs.push(tab); 
+                    }
+                });
+
+            // there is no current visible sidebar
+            if($main_sidebar_visible_store != '*')
             {
-                if(tabs.length)
-                    show_sidebar(tabs[0].key);
-                else
-                    hide_sidebar();
+                if(tabs.every( (e) => e.key != $main_sidebar_visible_store))
+                {
+                    if(tabs.length)
+                        show_sidebar(tabs[0].key);
+                    else
+                        hide_sidebar();
+                }
             }
         }
        
@@ -94,9 +120,11 @@
         
     }
 
-    function on_tab_clicked(key)
+    function on_navigator_tab_clicked(e, key)
     {
-        if(!mobile)
+        e.stopPropagation();
+       
+         if(!mobile)
             toggle_sidebar(key);
         else
         {
@@ -331,7 +359,7 @@
             <button
                 class="h-16 px-0 flex justify-center items-center w-full text-stone-300 hover:text-stone-100"
                 class:bg-orange-500={isSelected}
-                on:click|stopPropagation={()=> (on_tab_clicked(tab.key))}>
+                on:click={tab.onclick}>
                 
                 <Icon class="w-5 h-5" component={tab.icon}/>
             </button>

package/vertical.toolbar.svelte.d.ts

@@ -2,9 +2,11 @@
 /** @typedef {typeof __propDef.events}  VerticalEvents */
 /** @typedef {typeof __propDef.slots}  VerticalSlots */
 export default class Vertical extends SvelteComponentTyped<{
-    appConfig: any;
+    appConfig?: any;
     mobile?: boolean | undefined;
     clearsContext?: string | undefined;
+    definedTabs?: any;
+    mainToolbarConfig?: any;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> {
@@ -15,9 +17,11 @@ export type VerticalSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        appConfig: any;
+        appConfig?: any;
         mobile?: boolean | undefined;
         clearsContext?: string | undefined;
+        definedTabs?: any;
+        mainToolbarConfig?: any;
     };
     events: {
         [evt: string]: CustomEvent<any>;