@humandialog/forms.svelte 1.7.3 → 1.7.5

package/components/Fab.svelte

@@ -1,4 +1,4 @@
-<script>import { contextToolbarOperations, pageToolbarOperations, leftHandedFAB, toolsActionsOperations, fabCollapsed, bottom_bar_visible_store, main_sidebar_visible_store } from "../stores.js";
+<script>import { contextToolbarOperations, pageToolbarOperations, leftHandedFAB, toolsActionsOperations, fabCollapsed, bottom_bar_visible_store, main_sidebar_visible_store, fabHiddenDueToPopup } from "../stores.js";
 import { showFloatingToolbar, showMenu, showGridMenu } from "./menu.js";
 import { FaChevronUp, FaChevronDown, FaChevronLeft, FaChevronRight, FaCircle, FaEllipsisV, FaRegDotCircle, FaDotCircle } from "svelte-icons/fa/";
 import { isDeviceSmallerThan } from "../utils.js";
@@ -12,7 +12,8 @@ $:
     $fabCollapsed,
     $bottom_bar_visible_store,
     $main_sidebar_visible_store,
-    $leftHandedFAB
+    $leftHandedFAB,
+    $fabHiddenDueToPopup
   );
 let operations = [];
 let mainOperation = null;
@@ -23,6 +24,10 @@ let vToolboxExpanded = false;
 let hToolboxExpanded = false;
 let isDirectPositioningMode = false;
 async function setupCurrentContextOperations(...args) {
+  if ($fabHiddenDueToPopup) {
+    operations = [];
+    return;
+  }
   await tick();
   let opVer = 0;
   let main_FAB_position = "";

package/components/Floating_container.svelte

@@ -1,6 +1,6 @@
 <script>import { tick, afterUpdate } from "svelte";
 import { isDeviceSmallerThan } from "../utils";
-import { pushToolsActionsOperations, popToolsActionsOperations } from "../stores";
+import { pushToolsActionsOperations, popToolsActionsOperations, fabHiddenDueToPopup } from "../stores";
 import { FaTimes } from "svelte-icons/fa";
 import Icon from "./icon.svelte";
 let x;
@@ -36,25 +36,8 @@ export async function show(around, _toolbar, _props = {}) {
   props.onSizeChanged = () => onSizeChanged();
   hide_window_indicator = 0;
   window.addEventListener("click", on_before_window_click, true);
-  if (false) {
-    pushToolsActionsOperations({
-      opver: 1,
-      operations: [
-        {
-          caption: "Menu",
-          operations: [
-            {
-              icon: FaTimes,
-              action: (f) => {
-                hide();
-              },
-              fab: "M00",
-              tbr: "A"
-            }
-          ]
-        }
-      ]
-    });
+  if (isDeviceSmallerThan("sm")) {
+    $fabHiddenDueToPopup = true;
   }
   await tick();
   if (!was_visible)
@@ -65,8 +48,9 @@ export function isVisible() {
   return visible;
 }
 export function hide() {
-  if (false)
-    popToolsActionsOperations();
+  if (visible) {
+    $fabHiddenDueToPopup = false;
+  }
   visible = false;
   toolbar = null;
   cssPosition = calculatePosition(x, y, around_rect, false, false);

package/components/breadcrumb.svelte

@@ -2,6 +2,7 @@
     import {location, link, querystring} from 'svelte-spa-router'
     import {randomString, isDeviceSmallerThan} from '../utils'
     import { ext } from '../i18n.js';
+	import { afterUpdate } from 'svelte';
 	
     export let path;
     export let collapseLonger = false
@@ -42,15 +43,60 @@
         return idx < entriesNo-maxEntriesNo
     }
 
+    let scrollableElement
+    /*let isScrolling = false
+    let startScrollLeft = 0
+    let startDragX = 0
+    let startDragY = 0
+    function mouseDown(e)
+    {
+        
+        isScrolling = true
+        startDragX = e.offsetX
+        startDragY = e.offsetY
+        startScrollLeft = scrollableElement.scrollLeft
+    }
+
+    function mouseMove(e)
+    {
+        if(isScrolling)
+        {
+            const deltaX = startDragX - e.offsetX        
+            //console.log('mouseMove', deltaX)
+
+            scrollableElement.scrollLeft = startScrollLeft + deltaX
+        }
+    }
+
+    function mouseUp(e)
+    {
+        console.log('mouseUp', e)
+        isScrolling = false
+        startDragX = 0
+        startDragY = 0
+        startScrollLeft = 0
+    }
+    */
+
+    let pathElements = []
+    afterUpdate( () => 
+    {
+        const elementsNo = pathElements.length
+        if(elementsNo > 0)
+        {
+            const lastElement = pathElements[elementsNo-1]    
+            lastElement.scrollIntoView({ container: "nearest"})
+        }
+    })
+
 </script>
 
-<nav class="flex {userClass}" aria-label="Breadcrumb">
-  <ol class="inline-flex items-center space-x-1 md:space-x-2 rtl:space-x-reverse flex-wrap">
+<nav class="{userClass} w-full sm:w-fit sm:max-w-full overflow-x-auto sm:overflow-x-hidden" aria-label="Breadcrumb">
+  <ol class="flex items-center space-x-1 md:space-x-2 rtl:space-x-reverse flex-nowrap min-h-[1.25rem]" bind:this={scrollableElement}>
     
-        {#if (segments && segments.length > 1)}
+        {#if (segments && segments.length > 0)}
             {#each segments as segment, idx (segment.uniqueKey)}
                 {@const isFirst = idx == 0}
-                {@const isLast = idx == segments.length-1}
                 {@const isCollapsed = shouldBeCollapsed(idx)}
                 {@const isFirstCollapsed = isCollapsed && idx == 0}
                 
@@ -64,28 +110,27 @@
                         </span>
                     {/if}
                 {:else}
-                    <li>
+                    <li bind:this={pathElements[idx]}>
                         <div class="flex items-center">
                             {#if !isFirst}
-                                <svg class="rtl:rotate-180 w-3 h-3 text-stone-400 mx-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
+                                <!--svg class="rtl:rotate-180 w-3 h-3 text-stone-400 mx-1" 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>
+                                </svg-->
+                                <span class="text-sm font-medium text-stone-700  dark:text-stone-400 ">
+                                    /
+                                </span>
                             {/if}
-                            {#if isLast}
-                                <span class="ms-1 text-sm md:ms-2 font-semibold text-stone-900 dark:text-stone-100 whitespace-nowrap">
+                            
+                            {#if segment.href}
+                                <a href={segment.href} use:link class="ms-1 text-sm font-medium md:ms-2 text-stone-700 hover:text-stone-900  dark:text-stone-400 dark:hover:text-white whitespace-nowrap">
                                     {ext(segment.name)}
-                                </span>
+                                </a>
                             {:else}
-                                {#if segment.href}
-                                    <a href={segment.href} use:link class="ms-1 text-sm font-medium md:ms-2 text-stone-700 hover:text-stone-900  dark:text-stone-400 dark:hover:text-white whitespace-nowrap">
-                                        {ext(segment.name)}
-                                    </a>
-                                {:else}
-                                    <span class="ms-1 text-sm font-medium md:ms-2 text-stone-700  dark:text-stone-400 whitespace-nowrap">
-                                        {ext(segment.name)}
-                                    </span>
-                                {/if}
+                                <span class="ms-1 text-sm font-medium md:ms-2 text-stone-700  dark:text-stone-400 whitespace-nowrap">
+                                    {ext(segment.name)}
+                                </span>
                             {/if}
+                
                         </div>
                     </li>
                 {/if}

package/components/combo/combo.svelte

@@ -1,4 +1,4 @@
-<script>import { data_tick_store, contextItemsStore, contextTypesStore, pushToolsActionsOperations, popToolsActionsOperations } from "../../stores.js";
+<script>import { data_tick_store, contextItemsStore, contextTypesStore, pushToolsActionsOperations, popToolsActionsOperations, fabHiddenDueToPopup } from "../../stores.js";
 import { informModification, pushChanges } from "../../updates.js";
 import { isDeviceSmallerThan, parseWidthDirective, shouldBeComapact } from "../../utils.js";
 import { afterUpdate, getContext, onMount, setContext } from "svelte";
@@ -200,25 +200,8 @@ export function show(event, hide_callback) {
       subtree: true
     });
   }
-  if (false) {
-    pushToolsActionsOperations({
-      opver: 1,
-      operations: [
-        {
-          caption: "Menu",
-          operations: [
-            {
-              icon: FaTimes,
-              action: (f) => {
-                hide();
-              },
-              fab: "M00",
-              tbr: "A"
-            }
-          ]
-        }
-      ]
-    });
+  if (isDeviceSmallerThan("sm")) {
+    $fabHiddenDueToPopup = true;
   }
 }
 function openDropdownAsMenu() {
@@ -251,6 +234,7 @@ export function hide() {
   if (mutation_observer)
     mutation_observer.disconnect();
   is_dropdown_open = false;
+  $fabHiddenDueToPopup = false;
   dropdown_position = "display: none;";
   combo_text = get_combo_text();
   if (!!textbox)

package/components/contextmenu.svelte

@@ -1,6 +1,6 @@
 <script>import { afterUpdate, tick } from "svelte";
 import Icon from "./icon.svelte";
-import { contextItemsStore, pushToolsActionsOperations, popToolsActionsOperations } from "../stores";
+import { contextItemsStore, pushToolsActionsOperations, popToolsActionsOperations, fabHiddenDueToPopup } from "../stores";
 import { isDeviceSmallerThan, isOnScreenKeyboardVisible } from "../utils";
 import {
   hideWholeContextMenu,
@@ -200,25 +200,8 @@ export async function show(around, _operations, preference = 0) {
     hide_window_indicator = 0;
     window.addEventListener("click", on_before_window_click, true);
   }
-  if (false) {
-    pushToolsActionsOperations({
-      opver: 1,
-      operations: [
-        {
-          caption: "Menu",
-          operations: [
-            {
-              icon: FaTimes,
-              action: (f) => {
-                hide();
-              },
-              fab: "M00",
-              tbr: "A"
-            }
-          ]
-        }
-      ]
-    });
+  if (isDeviceSmallerThan("sm")) {
+    $fabHiddenDueToPopup = true;
   }
   await tick();
   css_position = calculatePosition(x, y, true, false);
@@ -231,8 +214,9 @@ export function isVisible() {
   return visible;
 }
 export function hide() {
-  if (false)
-    popToolsActionsOperations();
+  if (visible) {
+    $fabHiddenDueToPopup = false;
+  }
   visible = false;
   css_position = calculatePosition(x, y, false, false);
   window.removeEventListener("click", on_before_window_click, true);
@@ -308,7 +292,7 @@ function execute_action(e, operation, index) {
   hideWholeContextMenu();
   if (!operation)
     return;
-  let owner = e.target;
+  let owner = e?.target;
   while (owner && owner.tagName != "BUTTON")
     owner = owner.parentElement;
   if (operation.preAction)
@@ -373,18 +357,7 @@ function focus_menu_item(index) {
   if (submenus && submenus.length) {
     if (submenus[focused_index]) {
       let rect = element.getBoundingClientRect();
-      let container_rect = new DOMRect(0, 0, window.innerWidth, window.innerHeight);
-      let _x = rect.right;
-      let _y = rect.top;
-      let submenu_width = min_width_px;
-      let rendered_rect = submenus[focused_index].getRenderedRect();
-      if (rendered_rect && rendered_rect.width > 0)
-        submenu_width = rendered_rect.width;
-      if (_x + submenu_width > container_rect.right) {
-        if (rect.left - container_rect.left > container_rect.right - rect.right)
-          _x = rect.left - submenu_width;
-      }
-      submenus[focused_index].show(new DOMPoint(_x, _y), operations[focused_index].menu);
+      submenus[focused_index].show(rect, operations[focused_index].menu, SHOW_MENU_RIGHT);
     }
     for (let i = 0; i < submenus.length; i++) {
       if (i != focused_index) {
@@ -416,6 +389,18 @@ function calculateBackground(is_highlighted, active) {
       return "";
   }
 }
+function isOperationActivated(operation) {
+  if (operation.activeFunc)
+    return operation.activeFunc();
+  else
+    return operation.active ?? false;
+}
+function isOperationDisabled(operation) {
+  if (operation.disabledFunc)
+    return operation.disabledFunc();
+  else
+    return operation.disabled ?? false;
+}
 </script>
 
 
@@ -455,7 +440,7 @@ function calculateBackground(is_highlighted, active) {
             {@const isBottom = index == operations.length-1}
             {@const isFocused = index == focused_index}
             {@const clipFocusedBorder = isFocused ? (isTop ? 'rounded-t-lg' : (isBottom ? 'rounded-b-lg' : '')) : ''}
-            {@const active = calculateBackground(isFocused, false)}
+            {@const active = calculateBackground(isFocused || isOperationActivated(operation), false)}
             {@const has_submenu = operation.menu !== undefined && operation.menu.length > 0}
 
             <button class="block  w-full pr-4 text-left flex flex-row cursor-context-menu {active} focus:outline-none items-center"
@@ -465,8 +450,8 @@ function calculateBackground(is_highlighted, active) {
                     on:mouseenter = {(e) => {on_mouse_move(index)}}
                     on:keydown|stopPropagation={(e) => on_keydown(e, operation, index)}
                     on:mousedown={mousedown}
-                    disabled={operation.disabled}
-                    class:opacity-60={operation.disabled}>
+                    disabled={isOperationDisabled(operation)}
+                    class:opacity-60={isOperationDisabled(operation)}>
 
                 <div class="flex  justify-center space-x-10 px-4 py-2 ml-12 sm:ml-0" >
                     {#if operation.icon}

package/components/document/editor.svelte

@@ -28,7 +28,7 @@ import Gapcursor from "@tiptap/extension-gapcursor";
 import History from "@tiptap/extension-history";
 import { Plugin, PluginKey } from "@tiptap/pm/state";
 import { getAttributes } from "@tiptap/core";
-import { data_tick_store, contextItemsStore, contextTypesStore, onErrorShowAlert, pushToolsActionsOperations, popToolsActionsOperations } from "../../stores.js";
+import { data_tick_store, contextItemsStore, contextTypesStore, onErrorShowAlert, pushToolsActionsOperations, popToolsActionsOperations, fabHiddenDueToPopup } from "../../stores.js";
 import { informModification, pushChanges } from "../../updates.js";
 import { isDeviceSmallerThan, parseWidthDirective, refreshToolbarOperations, UI } from "../../utils.js";
 import Palette from "./internal/palette.svelte";
@@ -771,31 +771,14 @@ function on_palette_mouse_click() {
 }
 function on_palette_shown() {
   is_command_palette_visible = true;
-  if (false) {
-    pushToolsActionsOperations({
-      opver: 1,
-      operations: [
-        {
-          caption: "Palette",
-          operations: [
-            {
-              icon: FaTimes,
-              action: (f) => {
-                palette.hide();
-                editor?.commands.focus();
-              },
-              fab: "M00",
-              tbr: "A"
-            }
-          ]
-        }
-      ]
-    });
+  if (isDeviceSmallerThan("sm")) {
+    $fabHiddenDueToPopup = true;
   }
 }
 function on_palette_hidden() {
-  if (false)
-    popToolsActionsOperations();
+  if (is_command_palette_visible) {
+    $fabHiddenDueToPopup = false;
+  }
   editor?.commands.focus();
   is_command_palette_visible = false;
 }

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

@@ -28,7 +28,7 @@ export let summary = "";
 export let typename = void 0;
 export let toolbarOperations = void 0;
 export let contextMenu = void 0;
-export let multiselecOperations = (items) => [];
+export let multiselectOperations = (items) => [];
 export let key = "";
 export let selectionKey = "props";
 export let multiselect = false;
@@ -182,7 +182,10 @@ function getHRef() {
 function activate_row(e, item2) {
   const openable = !!definition.title_href || !!definition.title_href_func;
   if (toolbarOperations) {
-    activateItem(selectionKey, item2, toolbarOperations(item2));
+    if (multiselect)
+      activateItem(selectionKey, item2, multiselectOperations);
+    else
+      activateItem(selectionKey, item2, toolbarOperations(item2));
     if (e)
       e.stopPropagation();
   } else {
@@ -269,9 +272,9 @@ export function scrollToView() {
 }
 function onToggleMultiSelect(e) {
   if (!is_row_active)
-    addActiveItem(selectionKey, item, multiselecOperations);
+    addActiveItem(selectionKey, item, multiselectOperations);
   else
-    removeActiveItem(selectionKey, item, multiselecOperations);
+    removeActiveItem(selectionKey, item, multiselectOperations);
   if (e)
     e.stopPropagation();
 }

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

@@ -7,7 +7,7 @@ declare const __propDef: {
         typename?: string | undefined;
         toolbarOperations?: undefined;
         contextMenu?: undefined;
-        multiselecOperations?: ((items: any) => never[]) | undefined;
+        multiselectOperations?: ((items: any) => never[]) | undefined;
         key?: string | undefined;
         selectionKey?: string | undefined;
         multiselect?: boolean | undefined;

package/components/list/list.svelte

@@ -17,7 +17,7 @@ export let typename = "";
 export let c = "";
 export let toolbarOperations = void 0;
 export let contextMenu = void 0;
-export let multiselecOperations = (items2) => [];
+export let multiselectOperations = (items2) => [];
 export let key = "";
 export let selectionKey = "props";
 export let multiselect = false;
@@ -224,14 +224,29 @@ export function edit(element, property_name) {
 }
 export function toggleMultiselection() {
   multiselect = !multiselect;
-  let lastSelectedItem = getActive(selectionKey);
-  if (lastSelectedItem) {
-    let ops = [];
-    if (toolbarOperations)
-      ops = toolbarOperations(lastSelectedItem);
-    activateItem(selectionKey, lastSelectedItem, ops);
-  } else
-    clearActiveItem(selectionKey);
+  if (multiselect) {
+    let lastSelectedItem = getActive(selectionKey);
+    if (lastSelectedItem) {
+      let ops = [];
+      if (multiselectOperations)
+        ops = multiselectOperations;
+      activateItem(selectionKey, lastSelectedItem, ops);
+    } else {
+      clearActiveItem(selectionKey);
+    }
+  } else {
+    let lastSelectedItem = getActive(selectionKey);
+    if (lastSelectedItem) {
+      let ops = [];
+      if (toolbarOperations)
+        ops = toolbarOperations(lastSelectedItem);
+      activateItem(selectionKey, lastSelectedItem, ops);
+    } else
+      clearActiveItem(selectionKey);
+  }
+}
+export function isMultiselectionEnabled() {
+  return multiselect;
 }
 function reorderElements(items2, from = null) {
   let fromIdx;
@@ -308,14 +323,15 @@ function calcMultiSelectionMode(...args) {
 }
 $:
   multiselectionMode = calcMultiSelectionMode($contextItemsStore);
-function toggleSelectAll(e) {
+export function toggleSelectAll(e) {
   if (multiselectionMode == UNSELECT_ALL)
     clearActiveItem(selectionKey);
   else {
-    const operations = multiselecOperations(items);
+    const operations = multiselectOperations(items);
     items?.forEach((itm) => addActiveItem(selectionKey, itm, operations));
   }
-  e.stopPropagation();
+  if (e)
+    e.stopPropagation();
 }
 </script>
 
@@ -331,7 +347,7 @@ function toggleSelectAll(e) {
 
 
     {#if items && items.length > 0 }
-        {#if multiselect}
+        {#if false && multiselect}
             {@const icon = (multiselectionMode == SELECT_ALL) ? FaRegSquare : FaRegCheckSquare}
             <Icon component={icon} class="h-5 w-5 sm:h-4 sm:w-4 text-stone-500 dark:text-stone-400 cursor-pointer mt-2 sm:mt-1.5 ml-2 mr-3"
                     on:click={toggleSelectAll}/>
@@ -344,7 +360,7 @@ function toggleSelectAll(e) {
                             {contextMenu}
                             {key}
                             {multiselect}
-                            {multiselecOperations}
+                            {multiselectOperations}
                             {selectionKey}
                             bind:this={rows[i]}
                             >

package/components/list/list.svelte.d.ts

@@ -11,7 +11,7 @@ declare const __propDef: {
         c?: string | undefined;
         toolbarOperations?: undefined;
         contextMenu?: undefined;
-        multiselecOperations?: ((items: any) => never[]) | undefined;
+        multiselectOperations?: ((items: any) => never[]) | undefined;
         key?: string | undefined;
         selectionKey?: string | undefined;
         multiselect?: boolean | undefined;
@@ -30,7 +30,9 @@ declare const __propDef: {
         remove?: ((element: object) => void) | undefined;
         edit?: ((element: object, property_name: string) => void) | undefined;
         toggleMultiselection?: (() => void) | undefined;
+        isMultiselectionEnabled?: (() => boolean) | undefined;
         assignOrder?: ((after: object | null) => number) | undefined;
+        toggleSelectAll?: ((e: any) => void) | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -61,6 +63,8 @@ export default class List extends SvelteComponentTyped<ListProps, ListEvents, Li
     get remove(): (element: object) => void;
     get edit(): (element: object, property_name: string) => void;
     get toggleMultiselection(): () => void;
+    get isMultiselectionEnabled(): () => boolean;
     get assignOrder(): (after: object | null) => number;
+    get toggleSelectAll(): (e: any) => void;
 }
 export {};

package/index.d.ts

@@ -60,7 +60,7 @@ export { KanbanColumnTop, KanbanColumnBottom } from './components/kanban/Kanban'
 export { default as Paginator } from './components/paginator.svelte';
 export { default as Breadcrumb } from './components/breadcrumb.svelte';
 export { breadcrumbAdd, breadcrumbParse, breadcrumbStringify, breadcrumbClipName } from './components/breadcrumb_utils';
-export { selectItem, activateItem, clearActiveItem, isActive, isSelected, getActive, getActiveItems, getActiveCount, addActiveItem, removeActiveItem, editable, startEditing, saveCurrentEditable, selectable, handleSelect, isDeviceSmallerThan, resizeImage, refreshToolbarOperations, isOnScreenKeyboardVisible, randomString, UI, NAV_MODE_SIDEBAR, NAV_MODE_FULL_PAGE, navGetMode, navIsVisible, navGetKey, navShow, navHide, navToggle, navPrevVisibleKey, navAutoHide, } from './utils';
+export { selectItem, activateItem, clearActiveItem, isActive, isSelected, getActive, getActiveItems, getActiveCount, addActiveItem, removeActiveItem, editable, startEditing, saveCurrentEditable, selectable, handleSelect, isDeviceSmallerThan, resizeImage, refreshToolbarOperations, reloadPageToolbarOperations, isOnScreenKeyboardVisible, randomString, UI, NAV_MODE_SIDEBAR, NAV_MODE_FULL_PAGE, navGetMode, navIsVisible, navGetKey, navShow, navHide, navToggle, navPrevVisibleKey, navAutoHide, insertAt, insertAfter, getPrev, getNext, getFirst, getLast, removeAt, remove, swapElements } from './utils';
 export { getNiceStringDateTime, getFormattedStringDate, getNiceStringDate, dayName, monthName } from './components/date_utils';
 export { mainContentPageReloader, reloadMainContentPage, reloadWholeApp, wholeAppReloader, alerts, addAlert, onErrorShowAlert, main_sidebar_visible_store, navKey, tagsReloader, reloadVisibleTags, dark_mode_store, showFABAlways } from './stores.js';
 export { data_tick_store, // tmp

package/index.js

@@ -66,7 +66,7 @@ export { KanbanColumnTop, KanbanColumnBottom } from './components/kanban/Kanban'
 export { default as Paginator } from './components/paginator.svelte';
 export { default as Breadcrumb } from './components/breadcrumb.svelte';
 export { breadcrumbAdd, breadcrumbParse, breadcrumbStringify, breadcrumbClipName } from './components/breadcrumb_utils';
-export { selectItem, activateItem, clearActiveItem, isActive, isSelected, getActive, getActiveItems, getActiveCount, addActiveItem, removeActiveItem, editable, startEditing, saveCurrentEditable, selectable, handleSelect, isDeviceSmallerThan, resizeImage, refreshToolbarOperations, isOnScreenKeyboardVisible, randomString, UI, NAV_MODE_SIDEBAR, NAV_MODE_FULL_PAGE, navGetMode, navIsVisible, navGetKey, navShow, navHide, navToggle, navPrevVisibleKey, navAutoHide, } from './utils';
+export { selectItem, activateItem, clearActiveItem, isActive, isSelected, getActive, getActiveItems, getActiveCount, addActiveItem, removeActiveItem, editable, startEditing, saveCurrentEditable, selectable, handleSelect, isDeviceSmallerThan, resizeImage, refreshToolbarOperations, reloadPageToolbarOperations, isOnScreenKeyboardVisible, randomString, UI, NAV_MODE_SIDEBAR, NAV_MODE_FULL_PAGE, navGetMode, navIsVisible, navGetKey, navShow, navHide, navToggle, navPrevVisibleKey, navAutoHide, insertAt, insertAfter, getPrev, getNext, getFirst, getLast, removeAt, remove, swapElements } from './utils';
 export { getNiceStringDateTime, getFormattedStringDate, getNiceStringDate, dayName, monthName } from './components/date_utils';
 export { mainContentPageReloader, reloadMainContentPage, reloadWholeApp, wholeAppReloader, alerts, addAlert, onErrorShowAlert, main_sidebar_visible_store, navKey, tagsReloader, reloadVisibleTags, dark_mode_store, showFABAlways } from './stores.js';
 export { data_tick_store, // tmp

package/modal.svelte

@@ -1,6 +1,6 @@
 <script>import { afterUpdate, onMount, tick } from "svelte";
 import Icon from "./components/icon.svelte";
-import { pushToolsActionsOperations, popToolsActionsOperations } from "./stores.js";
+import { pushToolsActionsOperations, popToolsActionsOperations, fabHiddenDueToPopup } from "./stores.js";
 import { isDeviceSmallerThan } from "./utils";
 import { FaTimes } from "svelte-icons/fa";
 import { i18n } from "./i18n.js";
@@ -20,31 +20,15 @@ export let onCancelCallback = void 0;
 export function show(on_close_callback = void 0) {
   open = true;
   close_callback = on_close_callback;
-  if (false) {
-    pushToolsActionsOperations({
-      opver: 1,
-      operations: [
-        {
-          caption: "Modal",
-          operations: [
-            {
-              icon: FaTimes,
-              action: (f) => {
-                on_cancel(void 0);
-              },
-              fab: "M00",
-              tbr: "A"
-            }
-          ]
-        }
-      ]
-    });
+  if (isDeviceSmallerThan("sm")) {
+    $fabHiddenDueToPopup = true;
   }
 }
 export function hide() {
   if (!open)
     return;
   open = false;
+  $fabHiddenDueToPopup = false;
 }
 let root;
 afterUpdate(

package/package.json

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

package/stores.d.ts

@@ -52,4 +52,5 @@ export const visible_property_tab_store: import("svelte/store").Writable<string>
 export const fabCollapsed: import("svelte/store").Writable<any>;
 export const showFABAlways: import("svelte/store").Writable<any>;
 export const leftHandedFAB: import("svelte/store").Writable<any>;
+export const fabHiddenDueToPopup: import("svelte/store").Writable<boolean>;
 export const navKey: import("svelte/store").Readable<any>;

package/stores.js

@@ -168,6 +168,8 @@ showFABAlways.subscribe( (value) => { localStorage.showFABAlways = (value ? 'tru
 export const leftHandedFAB = writable( (localStorage.leftHandedFAB && localStorage.leftHandedFAB == 'true') || false )
 leftHandedFAB.subscribe( (value) => { localStorage.leftHandedFAB = (value ? 'true' : '') } );
 
+export const fabHiddenDueToPopup = writable(false)
+
 export function restore_defults()
 {
     

package/utils.d.ts

@@ -1,7 +1,7 @@
 export function isDeviceSmallerThan(br: any): boolean;
 export function selectItem(itm: any): void;
 export function activateItem(context_level: any, itm: any, operations?: null): void;
-export function clearActiveItem(context_level: any): void;
+export function clearActiveItem(context_level: any, operations?: undefined): void;
 export function addActiveItem(context_level: any, itm: any, operations?: null): void;
 export function removeActiveItem(context_level: any, itm: any, operations?: null): void;
 export function isSelected(itm: any): boolean;
@@ -9,6 +9,7 @@ export function isActive(context_level: any, itm: any, key?: undefined): boolean
 export function getActive(context_level: any): any;
 export function getActiveItems(context_level: any): any[];
 export function getActiveCount(context_level: any): number;
+export function reloadPageToolbarOperations(operations: any): void;
 export function refreshToolbarOperations(): void;
 export function editable(node: any, params: any): {
     destroy(): void;

package/utils.js

@@ -55,14 +55,19 @@ export function activateItem(context_level, itm, operations=null)
 
     if(operations && context_level == 'props')
     { 
-        if(Array.isArray(operations))
+        if(typeof operations === 'function')
+        {
+            const calculatedOps = operations([itm])
+            contextToolbarOperations.set(calculatedOps)
+        }
+        else if(Array.isArray(operations))
             contextToolbarOperations.set( [...operations] )
         else
             contextToolbarOperations.set( {...operations} )
     }
 }
 
-export function clearActiveItem(context_level)
+export function clearActiveItem(context_level, operations=undefined)
 {
     let data_context = get(contextItemsStore);
     data_context[context_level] = null;
@@ -78,7 +83,22 @@ export function clearActiveItem(context_level)
     //chnages.just_changed_context = true;
 
     if(context_level == 'props')
-        contextToolbarOperations.set( [] )
+    {
+        if(operations)
+        {
+            if(typeof operations === 'function')
+            {
+                const calculatedOps = operations([])
+                contextToolbarOperations.set(calculatedOps)
+            }
+            else if(Array.isArray(operations))
+                contextToolbarOperations.set( [...operations] )
+            else
+                contextToolbarOperations.set( {...operations} )
+        }
+        else
+            contextToolbarOperations.set( [] )
+    }
 }
 
 export function addActiveItem(context_level, itm, operations = null)
@@ -257,6 +277,10 @@ export function getActiveCount(context_level)
         return 1
 }
 
+export function reloadPageToolbarOperations(operations)
+{
+    pageToolbarOperations.set(operations)
+}
 
 export function refreshToolbarOperations()
 {