@humandialog/forms.svelte 1.3.15 → 1.3.17

package/components/Fab.svelte

@@ -66,15 +66,12 @@ export function activateMainOperation() {
 function on_click(e, operation) {
   if (!operation)
     return;
-  if (operation.action) {
-    let focused_item = null;
-    if ($contextItemsStore.focused)
-      focused_item = $contextItemsStore[$contextItemsStore.focused];
-    operation.action(focused_item);
-  }
   let owner = e.target;
   while (owner && (owner.tagName != "BUTTON" && owner.tagName != "LI"))
     owner = owner.parentElement;
+  if (operation.action) {
+    operation.action(owner);
+  }
   if (!owner)
     return;
   let rect = owner.getBoundingClientRect();

package/components/Floating_container.svelte

@@ -1,6 +1,6 @@
 <script>import { tick, afterUpdate } from "svelte";
 import { isDeviceSmallerThan } from "../utils";
-import { toolsActionsOperations } from "../stores";
+import { pushToolsActionsOperations, popToolsActionsOperations } from "../stores";
 import { FaTimes } from "svelte-icons/fa";
 let x;
 let y;
@@ -35,7 +35,7 @@ export async function show(around, _toolbar, _props = {}) {
   hide_window_indicator = 0;
   window.addEventListener("click", on_before_window_click, true);
   if (isDeviceSmallerThan("sm")) {
-    $toolsActionsOperations = {
+    pushToolsActionsOperations({
       opver: 1,
       operations: [
         {
@@ -52,7 +52,7 @@ export async function show(around, _toolbar, _props = {}) {
           ]
         }
       ]
-    };
+    });
   }
   await tick();
   if (!was_visible)
@@ -63,9 +63,10 @@ export function isVisible() {
   return visible;
 }
 export function hide() {
+  if (visible)
+    popToolsActionsOperations();
   visible = false;
   cssPosition = calculatePosition(x, y, around_rect, false, false);
-  $toolsActionsOperations = [];
   window.removeEventListener("click", on_before_window_click, true);
   rootElement?.removeEventListener("click", on_before_container_click, true);
 }
@@ -149,7 +150,7 @@ function calculatePosition(x2, y2, around, visible2, fresh) {
 </script>
 
 <div    id="__hd_svelte_floating_container"
-        class="p-2 bg-stone-100 dark:bg-stone-800 rounded-lg shadow  z-30 fixed"
+        class="p-2 bg-stone-100 dark:bg-stone-800 rounded-lg shadow-md shadow-stone-500 dark:shadow-black z-30 fixed "
         style={cssPosition}
         bind:this={rootElement}>
     <svelte:component this={toolbar} {...props} bind:this={internalElement} />

package/components/combo/combo.svelte

@@ -1,4 +1,4 @@
-<script>import { data_tick_store, contextItemsStore, contextTypesStore, toolsActionsOperations } from "../../stores.js";
+<script>import { data_tick_store, contextItemsStore, contextTypesStore, pushToolsActionsOperations, popToolsActionsOperations } from "../../stores.js";
 import { informModification, pushChanges } from "../../updates.js";
 import { isDeviceSmallerThan, parseWidthDirective, shouldBeComapact } from "../../utils.js";
 import { afterUpdate, getContext, onMount, setContext } from "svelte";
@@ -171,7 +171,11 @@ export function show(event, hide_callback) {
   client_rect.y = 0;
   client_rect.width = window.innerWidth;
   client_rect.height = window.innerHeight;
-  let rect = textbox.getBoundingClientRect();
+  let rect;
+  if (is_compact)
+    rect = textbox.getBoundingClientRect();
+  else
+    rect = combo.getBoundingClientRect();
   let top_space = rect.y;
   let bottom_space = client_rect.height - (rect.y + rect.height);
   let palette_max_height_px = 500;
@@ -216,6 +220,8 @@ export function show(event, hide_callback) {
     dropdown_position = `min-width: ${palette_width_px}px; max-height:${palette_max_height_px}px; position: fixed; left:${x}px; top:${y}px;`;
     if (show_above)
       dropdown_position += " transform: translate(0, -100%);";
+    if (!is_compact)
+      dropdown_position += `width: ${preferred_palette_width}px`;
   }
   is_dropdown_open = true;
   if (filtered) {
@@ -235,7 +241,7 @@ export function show(event, hide_callback) {
     });
   }
   if (isDeviceSmallerThan("sm")) {
-    $toolsActionsOperations = {
+    pushToolsActionsOperations({
       opver: 1,
       operations: [
         {
@@ -252,14 +258,16 @@ export function show(event, hide_callback) {
           ]
         }
       ]
-    };
+    });
   }
 }
 export function hide() {
+  if (!is_dropdown_open)
+    return;
   if (mutation_observer)
     mutation_observer.disconnect();
   is_dropdown_open = false;
-  $toolsActionsOperations = [];
+  popToolsActionsOperations();
   dropdown_position = "display: none;";
   combo_text = get_combo_text();
   if (!!textbox)
@@ -643,7 +651,8 @@ function on_focus_out(e) {
                 {combo_text}</span>
 
             {#if can_be_activated }
-                <div class="w-3 h-3 no-print flex-none text-stone-700 dark:text-stone-300 {chevron_mt}">
+                <div class="w-3 h-3 no-print flex-none text-stone-700 dark:text-stone-300 {chevron_mt}"
+                    class:ms-auto={!is_compact}>
                     <FaChevronDown/>
                 </div>
             {/if}

package/components/contextmenu.svelte

@@ -1,6 +1,6 @@
 <script>import { afterUpdate, tick } from "svelte";
 import Icon from "./icon.svelte";
-import { contextItemsStore, toolsActionsOperations } from "../stores";
+import { contextItemsStore, pushToolsActionsOperations, popToolsActionsOperations } from "../stores";
 import { isDeviceSmallerThan, isOnScreenKeyboardVisible } from "../utils";
 import { hideWholeContextMenu } from "./menu";
 import { FaTimes } from "svelte-icons/fa";
@@ -109,7 +109,7 @@ export async function show(around, _operations) {
     window.addEventListener("click", on_before_window_click, true);
   }
   if (isDeviceSmallerThan("sm")) {
-    $toolsActionsOperations = {
+    pushToolsActionsOperations({
       opver: 1,
       operations: [
         {
@@ -126,7 +126,7 @@ export async function show(around, _operations) {
           ]
         }
       ]
-    };
+    });
   }
   await tick();
   css_position = calculatePosition(x, y, around_rect, true, false);
@@ -139,7 +139,8 @@ export function isVisible() {
   return visible;
 }
 export function hide() {
-  $toolsActionsOperations = [];
+  if (visible)
+    popToolsActionsOperations();
   visible = false;
   css_position = calculatePosition(x, y, around_rect, false, false);
   window.removeEventListener("click", on_before_window_click, true);
@@ -319,8 +320,9 @@ function mousedown(e) {
                     <p> {operation.caption}</p>
                     {#if operation.description}
                         {@const shortcut_width_px = operation.shortcut ? 80 : 0}
-                        <p  class="text-sm font-normal text-stone-900 dark:text-stone-500 truncate inline-block"
-                            style:max-width={`calc(${width_px-shortcut_width_px} - 3rem)`} >{operation.description}</p>
+                        <p  class=" text-sm font-normal text-stone-900 dark:text-stone-500 truncate inline-block">
+                            {operation.description}
+                        </p>
                     {/if}
                 </div>
                 {#if has_submenu}

package/components/document/editor.svelte

@@ -26,7 +26,7 @@ import Underline from "@tiptap/extension-underline";
 import Dropcursor from "@tiptap/extension-dropcursor";
 import Gapcursor from "@tiptap/extension-gapcursor";
 import History from "@tiptap/extension-history";
-import { data_tick_store, contextItemsStore, contextTypesStore, onErrorShowAlert, toolsActionsOperations } from "../../stores.js";
+import { data_tick_store, contextItemsStore, contextTypesStore, onErrorShowAlert, pushToolsActionsOperations, popToolsActionsOperations } from "../../stores.js";
 import { informModification, pushChanges } from "../../updates.js";
 import { isDeviceSmallerThan, parseWidthDirective, refreshToolbarOperations, UI } from "../../utils.js";
 import Palette from "./internal/palette.svelte";
@@ -591,7 +591,7 @@ function on_palette_mouse_click() {
 function on_palette_shown() {
   is_command_palette_visible = true;
   if (isDeviceSmallerThan("sm")) {
-    $toolsActionsOperations = {
+    pushToolsActionsOperations({
       opver: 1,
       operations: [
         {
@@ -609,12 +609,13 @@ function on_palette_shown() {
           ]
         }
       ]
-    };
+    });
   }
 }
 function on_palette_hidden() {
+  if (is_command_palette_visible)
+    popToolsActionsOperations();
   is_command_palette_visible = false;
-  $toolsActionsOperations = [];
 }
 function show_command_palette(cursor_rect) {
   let client_rect = get_window_box();

package/components/inputbox.ltop.svelte

@@ -52,17 +52,27 @@
         itype = itype;
     }
 
+    export function refresh(itm=undefined)
+    {
+        if(itm)
+            self = itm;
+
+        item = self ?? $contextItemsStore[ctx];
+        setup()
+    }
+
+    let userClass = $$restProps.class ?? '';
     
     let   item = null
 
-    let     labelMargins = 'mt-1 mb-0.5' //
+    let     labelMargins = 'mb-0.5' //
     let input_pt = 'pt-0.5'
     let input_pb = 'pb-1'
     
     switch (s)
     {
         case 'md':
-            labelMargins = 'mt-1 mb-1';
+            labelMargins = 'mb-1';
             input_pt = 'pt-2.5'
             input_pb = 'pb-2.5';           
             break;
@@ -127,7 +137,7 @@
 
 {#if itype == 'text'}
     {@const border_style = invalid ? "border-red-300 dark:border-red-600" : "border-stone-300 dark:border-stone-500" }
-    <div class={cs}>
+    <div class="{cs} {userClass}">
         <label for="name" class="block {labelMargins} text-xs font-small text-stone-900 dark:text-white">{label}</label>
         
         <input  type=text name="name" id="name" 

package/components/inputbox.ltop.svelte.d.ts

@@ -20,11 +20,13 @@ export default class Inputbox extends SvelteComponentTyped<{
     validation?: any;
     validate?: (() => boolean) | undefined;
     setReadonly?: ((val: any) => void) | undefined;
+    refresh?: ((itm?: undefined) => void) | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> {
     get validate(): () => boolean;
     get setReadonly(): (val: any) => void;
+    get refresh(): (itm?: undefined) => void;
 }
 export type InputboxProps = typeof __propDef.props;
 export type InputboxEvents = typeof __propDef.events;
@@ -50,6 +52,7 @@ declare const __propDef: {
         validation?: any;
         validate?: (() => boolean) | undefined;
         setReadonly?: ((val: any) => void) | undefined;
+        refresh?: ((itm?: undefined) => void) | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -210,7 +210,7 @@ function showAttachementIcon() {
         {@const canOpen = isLinkLike || hasOpen}
         {@const openableClass = canOpen ? "sm:hover:cursor-pointer underline" : ""}
         {@const showIcon = showAttachementIcon()}
-            <h3 class=" text-base font-semibold pb-1
+            <h3 class=" h3 text-base font-semibold pb-1
                         whitespace-nowrap overflow-clip truncate w-full sm:flex-none
                         relative {openableClass}"
                 use:editable={{
@@ -224,7 +224,9 @@ function showAttachementIcon() {
                     condition: canOpen, 
                     callback: performOpen}}
                 bind:this={titleElement}>
+                <!--a href="#"-->
                     {item[definition.titleAttrib]}
+                <!--/a-->
 
                 {#if showIcon}
                     <span id="attachement" class="absolute top-1 right-0 w-5 h-5 sm:w-3 sm:h-3">

package/components/kanban/kanban.callbacks.svelte

@@ -1,9 +1,11 @@
 <script>import { getContext } from "svelte";
 export let onAdd = void 0;
 export let onOpen = void 0;
+export let onReplace = void 0;
 export let getCardOperations = void 0;
 let definition = getContext("rKanban-definition");
 definition.onAdd = onAdd;
 definition.onOpen = onOpen;
+definition.onReplace = onReplace;
 definition.getCardOperations = getCardOperations;
 </script>

package/components/kanban/kanban.callbacks.svelte.d.ts

@@ -3,6 +3,7 @@ declare const __propDef: {
     props: {
         onAdd?: Function | undefined;
         onOpen?: Function | undefined;
+        onReplace?: Function | undefined;
         getCardOperations?: Function | undefined;
     };
     events: {

package/components/kanban/kanban.svelte

@@ -200,7 +200,7 @@ export function moveDown(item) {
 }
 const ORDER_STEP = 64;
 const MIN_ORDER = 0;
-function reorderElements(items, from = null) {
+function reorderElements(items, from = null, pushImediatelly = true) {
   const oa = definition.orderAttrib;
   let fromIdx;
   let fromOrder;
@@ -218,9 +218,10 @@ function reorderElements(items, from = null) {
     informModification(el, oa);
     order += ORDER_STEP;
   }
-  pushChanges();
+  if (pushImediatelly)
+    pushChanges();
 }
-export function replace(item, toColumnIdx, afterElement) {
+export async function replace(item, toColumnIdx, afterElement) {
   const fromColumnIdx = getColumnIdx(item);
   let allItems = definition.getItems();
   const oa = definition.orderAttrib;
@@ -230,18 +231,21 @@ export function replace(item, toColumnIdx, afterElement) {
   const toListBottom = allItems.findLast((e) => e[sa] == toColumnState);
   const fromColumn = columns[fromColumnIdx];
   const toColumn = columns[toColumnIdx];
+  const propsChanges = {
+    order: -1,
+    state: -1
+  };
   switch (afterElement) {
     case KanbanColumnTop:
       if (!toListTop || toListTop[oa] > item[oa]) {
-        item[sa] = toColumnState;
-        informModification(item, sa);
+        propsChanges.state = toColumnState;
       } else {
         const prevItem = getPrev(allItems, toListTop);
         if (!prevItem) {
-          item[sa] = toColumnState;
           item[oa] = toListTop[oa] - ORDER_STEP;
-          informModification(item, sa);
           informModification(item, oa);
+          propsChanges.state = toColumnState;
+          propsChanges.order = item[oa];
           remove(allItems, item);
           insertAt(allItems, 0, item);
         } else {
@@ -249,35 +253,31 @@ export function replace(item, toColumnIdx, afterElement) {
           let nextOrder = toListTop[oa];
           let orderSpace = nextOrder - prevOrder;
           if (orderSpace < 2) {
-            reorderElements(allItems, prevItem);
+            reorderElements(allItems, prevItem, false);
             prevOrder = prevItem[oa];
             nextOrder = toListTop[oa];
             orderSpace = nextOrder - prevOrder;
           }
-          item[sa] = toColumnState;
           item[oa] = prevOrder + Math.floor(orderSpace / 2);
-          informModification(item, sa);
           informModification(item, oa);
+          propsChanges.state = toColumnState;
+          propsChanges.order = item[oa];
           remove(allItems, item);
           insertAfter(allItems, prevItem, item);
         }
       }
-      pushChanges();
-      fromColumn.reload();
-      toColumn.reload();
-      return;
+      break;
     case KanbanColumnBottom:
     default:
       if (!toListBottom || item[oa] > toListBottom[oa]) {
-        item[sa] = toColumnState;
-        informModification(item, sa);
+        propsChanges.state = toColumnState;
       } else {
         const nextItem = getNext(allItems, toListBottom);
         if (!nextItem) {
-          item[sa] = toColumnState;
           item[oa] = toListBottom[oa] + ORDER_STEP;
-          informModification(item, sa);
           informModification(item, oa);
+          propsChanges.state = toColumnState;
+          propsChanges.order = item[oa];
           remove(allItems, item);
           insertAfter(allItems, toListBottom, item);
         } else {
@@ -285,23 +285,39 @@ export function replace(item, toColumnIdx, afterElement) {
           let prevOrder = toListBottom[oa];
           let orderSpace = nextOrder - prevOrder;
           if (orderSpace < 2) {
-            reorderElements(allItems, toListBottom);
+            reorderElements(allItems, toListBottom, false);
             prevOrder = toListBottom[oa];
             nextOrder = nextItem[oa];
             orderSpace = nextOrder - prevOrder;
           }
-          item[sa] = toColumnState;
           item[oa] = prevOrder + Math.floor(orderSpace / 2);
-          informModification(item, sa);
           informModification(item, oa);
+          propsChanges.state = toColumnState;
+          propsChanges.order = item[oa];
           remove(allItems, item);
           insertAfter(allItems, toListBottom, item);
         }
       }
+      break;
+  }
+  if (definition.onReplace) {
+    if (propsChanges.state >= 0) {
       pushChanges();
-      fromColumn.reload();
-      toColumn.reload();
-      return;
+    }
+    const req = {
+      [sa]: propsChanges.state,
+      item,
+      toColumn: toColumnIdx
+    };
+    await definition.onReplace(req);
+  } else {
+    if (propsChanges.state >= 0) {
+      item[sa] = propsChanges.state;
+      informModification(item, sa);
+    }
+    pushChanges();
+    fromColumn.reload();
+    toColumn.reload();
   }
 }
 async function onInsert(columnIdx, title2, summary, afterId) {
@@ -397,7 +413,7 @@ async function onInsert(columnIdx, title2, summary, afterId) {
     }
   }
   if (definition.onAdd)
-    await definition.onAdd(newElement);
+    await definition.onAdd(newElement, columnIdx);
 }
 export function activateColumn(columnIdx) {
   columns[columnIdx].activate();

package/components/kanban/kanban.svelte.d.ts

@@ -16,7 +16,7 @@ declare const __propDef: {
         scrollViewToCard?: ((item: any) => void) | undefined;
         moveUp?: ((item: object) => void) | undefined;
         moveDown?: ((item: object) => void) | undefined;
-        replace?: ((item: any, toColumnIdx: any, afterElement: any) => void) | undefined;
+        replace?: ((item: any, toColumnIdx: any, afterElement: any) => Promise<void>) | undefined;
         activateColumn?: ((columnIdx: number) => void) | undefined;
         editColumnName?: ((columnIdx: number, onFinish?: Function | undefined) => void) | undefined;
         moveCardsTo?: ((items: object[], toColumnIdx: number) => void) | undefined;
@@ -55,7 +55,7 @@ export default class Kanban extends SvelteComponentTyped<KanbanProps, KanbanEven
     get scrollViewToCard(): (item: any) => void;
     get moveUp(): (item: object) => void;
     get moveDown(): (item: object) => void;
-    get replace(): (item: any, toColumnIdx: any, afterElement: any) => void;
+    get replace(): (item: any, toColumnIdx: any, afterElement: any) => Promise<void>;
     get activateColumn(): (columnIdx: number) => void;
     get editColumnName(): (columnIdx: number, onFinish?: Function | undefined) => void;
     get moveCardsTo(): (items: object[], toColumnIdx: number) => void;

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

@@ -5,6 +5,7 @@ import {
   selectable,
   activateItem,
   isActive,
+  getActive,
   editable,
   startEditing
 } from "../../../utils";
@@ -23,6 +24,7 @@ export let summary = "";
 export let typename = void 0;
 export let toolbarOperations = void 0;
 export let contextMenu = void 0;
+export let key = "";
 let definition = getContext("rList-definition");
 let placeholder = "";
 let props_sm;
@@ -45,14 +47,6 @@ if (!typename) {
     typename = s[1];
   }
 }
-let item_key = "";
-let keys = Object.keys(item);
-if (keys.includes("$ref"))
-  item_key = "$ref";
-else if (keys.includes("Id"))
-  item_key = "Id";
-else if (keys.length > 0)
-  item_key = keys[0];
 if (!title)
   title = definition.title;
 if (!summary)
@@ -74,11 +68,30 @@ function calc_horz_division() {
   }
 }
 function calculate_active(...args) {
-  return isActive("props", item);
+  const activeItem = getActive("props");
+  if (!activeItem)
+    return false;
+  const activeKey = getItemKey(activeItem);
+  const itemKey = getItemKey(item);
+  if (activeKey == itemKey) {
+    console.log("active: ", itemKey);
+    return true;
+  } else
+    return false;
 }
 function selected(...args) {
   return isSelected(item);
 }
+function getItemKey(item2) {
+  if (key)
+    return item2[key];
+  else if (item2.$ref)
+    return item2.$ref;
+  else if (item2.Id)
+    return item2.Id;
+  else
+    return 0;
+}
 async function change_name(text) {
   if (definition.on_title_changed) {
     definition.on_title_changed(item, text, title);
@@ -186,7 +199,7 @@ export function editProperty(field) {
   }
 }
 async function force_editing(field) {
-  let element_id = `__hd_list_ctrl_${item[item_key]}_${field}`;
+  let element_id = `__hd_list_ctrl_${getItemKey(item)}_${field}`;
   let element_node = document.getElementById(element_id);
   if (!element_node) {
     placeholder = field;
@@ -264,7 +277,7 @@ export function scrollToView() {
                                    
                                     whitespace-nowrap overflow-clip w-full sm:flex-none sm:{name_w}
                                     sm:hover:cursor-pointer underline"
-                                    id="__hd_list_ctrl_{item[item_key]}_Title"
+                                    id="__hd_list_ctrl_{getItemKey(item)}_Title"
                                     on:click|stopPropagation={followDefinedHRef}
                                     use:editable={{
                                         action: (text) => {change_name(text)},
@@ -279,7 +292,7 @@ export function scrollToView() {
                         <p  class=" text-base font-semibold 
                                     
                                     whitespace-nowrap overflow-clip w-full sm:flex-none sm:{name_w}"
-                            id="__hd_list_ctrl_{item[item_key]}_Title"
+                            id="__hd_list_ctrl_{getItemKey(item)}_Title"
                             use:editable={{
                                 action: (text) => {change_name(text)},
                                 active: true,
@@ -300,7 +313,7 @@ export function scrollToView() {
                 <p  class=" text-base font-semibold 
                              
                             whitespace-nowrap overflow-clip w-full sm:flex-none sm:{name_w}"
-                    id="__hd_list_ctrl_{item[item_key]}_Title"> 
+                    id="__hd_list_ctrl_{getItemKey(item)}_Title"> 
                     {element_title}
                 </p>
             {/if}
@@ -316,7 +329,7 @@ export function scrollToView() {
         </section>
 
         {#if summary && (item[summary] || placeholder=='Summary')}
-            {@const element_id = `__hd_list_ctrl_${item[item_key]}_Summary`}
+            {@const element_id = `__hd_list_ctrl_${getItemKey(item)}_Summary`}
             {#key item[summary] }           
                 {#if is_row_active}
                     <p  id={element_id} 

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

@@ -7,6 +7,7 @@ declare const __propDef: {
         typename?: string | undefined;
         toolbarOperations?: undefined;
         contextMenu?: undefined;
+        key?: string | undefined;
         activate?: (() => void) | undefined;
         editProperty?: ((field: string) => void) | undefined;
         scrollToView?: (() => void) | undefined;

package/components/list/list.svelte

@@ -79,42 +79,43 @@ export function rereder() {
 }
 export function reload(data, selectElement = KEEP_SELECTION) {
   let currentSelectedItem = getActive("props");
-  let selectElementId = 0;
-  let altSelectElementId = 0;
+  let currentSelectedItemKey = currentSelectedItem ? getItemKey(currentSelectedItem) : null;
+  let selectElementId = null;
+  let altSelectElementId = null;
   switch (selectElement) {
     case CLEAR_SELECTION:
       selectElementId = 0;
       break;
     case KEEP_SELECTION:
-      selectElementId = currentSelectedItem?.Id ?? 0;
+      selectElementId = currentSelectedItemKey;
       break;
     case SELECT_PREVIOUS:
       if (currentSelectedItem) {
-        const selectedItemIdx = items?.findIndex((e) => e == currentSelectedItem);
+        const selectedItemIdx = items?.findIndex((e) => getItemKey(e) == currentSelectedItemKey);
         if (selectedItemIdx != void 0 && selectedItemIdx > 0)
-          selectElementId = items[selectedItemIdx - 1].Id ?? 0;
+          selectElementId = getItemKey(items[selectedItemIdx - 1]) ?? null;
       }
       break;
     case SELECT_NEXT:
       if (currentSelectedItem) {
-        const selectedItemIdx = items?.findIndex((e) => e == currentSelectedItem);
+        const selectedItemIdx = items?.findIndex((e) => getItemKey(e) == currentSelectedItemKey);
         if (selectedItemIdx != void 0 && selectedItemIdx >= 0 && selectedItemIdx < items.length - 1)
-          selectElementId = items[selectedItemIdx + 1].Id ?? 0;
+          selectElementId = getItemKey(items[selectedItemIdx + 1]) ?? null;
       }
       break;
     case KEEP_OR_SELECT_NEXT:
       {
         if (currentSelectedItem) {
-          selectElementId = currentSelectedItem.Id ?? 0;
-          const selectedItemIdx = items?.findIndex((e) => e == currentSelectedItem);
+          selectElementId = currentSelectedItemKey;
+          const selectedItemIdx = items?.findIndex((e) => getItemKey(e) == currentSelectedItemKey);
           if (selectedItemIdx != void 0 && selectedItemIdx >= 0 && selectedItemIdx < items.length - 1)
-            altSelectElementId = items[selectedItemIdx + 1].Id ?? 0;
+            altSelectElementId = getItemKey(items[selectedItemIdx + 1]) ?? null;
         }
       }
       break;
     default:
       if (typeof selectElement === "object" && !Array.isArray(selectElement) && selectElement !== null)
-        selectElementId = selectElement.Id;
+        selectElementId = getItemKey(selectElement);
       else
         selectElementId = selectElement;
   }
@@ -123,19 +124,17 @@ export function reload(data, selectElement = KEEP_SELECTION) {
   else
     self = data;
   rereder();
-  if (selectElementId > 0) {
-    let itemToActivate = items?.find((e) => e.Id == selectElementId);
+  if (selectElementId != null) {
+    let itemToActivate = items?.find((e) => getItemKey(e) == selectElementId);
     if (itemToActivate) {
       activate_after_dom_update = itemToActivate;
-    } else if (altSelectElementId > 0) {
-      itemToActivate = items?.find((e) => e.Id == altSelectElementId);
+    } else if (altSelectElementId != null) {
+      itemToActivate = items?.find((e) => getItemKey(e) == altSelectElementId);
       if (itemToActivate) {
         activate_after_dom_update = itemToActivate;
       }
     }
   }
-  if (!activate_after_dom_update)
-    activateItem("props", null, []);
 }
 export async function moveUp(element) {
   if (!orderAttrib)
@@ -295,6 +294,7 @@ async function insert(title2, summary, after) {
             <List_element   item={element} 
                             {toolbarOperations}
                             {contextMenu}
+                            {key}
                             bind:this={rows[i]}
                             >
             

package/components/sidebar/sidebar.item.svelte

@@ -11,7 +11,8 @@ import {
   activateItem,
   startEditing,
   getActive,
-  isOnNavigationPage
+  isOnNavigationPage,
+  UI
 } from "../../utils";
 import { showMenu } from "../menu";
 export let href;
@@ -71,7 +72,17 @@ function calculateIsRowActive(...args) {
   if (!item)
     return active;
   const activeItem = getActive("props");
-  if (activeItem == item)
+  if (item.$ref) {
+    if (activeItem) {
+      return item.$ref == activeItem.$ref;
+    } else
+      return false;
+  } else if (item.Id) {
+    if (activeItem) {
+      return item.Id == activeItem.Id;
+    } else
+      return false;
+  } else if (activeItem == item)
     return true;
   else
     return false;
@@ -108,13 +119,15 @@ function on_link_clicked(e) {
   e.preventDefault();
   if (isOnPage) {
     if (isRowActive) {
-      if (href2)
+      if (href2) {
         push(href2);
+      }
     }
   } else {
     auto_hide_sidebar();
-    if (href2)
+    if (href2) {
       push(href2);
+    }
   }
 }
 function on_contextmenu(e) {

package/desk.svelte

@@ -213,6 +213,8 @@
     }
 
     onMount( () => {
+        
+
         window.addEventListener('resize', on_resize)
         
         const vp = window.visualViewport;
@@ -223,6 +225,7 @@
         //document.addEventListener('focusout', onFocusOut)
 
         return () => {
+            
           //  document.removeEventListener('focusout', onFocusOut)
             document.removeEventListener('selectionchange', onSelectionChanged)
             vp?.removeEventListener('resize', onViewportResize)
@@ -429,7 +432,7 @@
                                     z-0 overflow-x-hidden 
                                     {content_height} sm:overflow-y-auto" 
                                     >
-                            <Configurable config={layout.mainContent} min_h_class="min-h-full">
+                            <Configurable config={layout.mainContent} min_h_class="min-h-screen">
                                 <div slot='alt'></div>
                             </Configurable>
                     </div>    

package/modal.svelte

@@ -1,6 +1,6 @@
 <script>import { afterUpdate, onMount, tick } from "svelte";
 import Icon from "./components/icon.svelte";
-import { toolsActionsOperations } from "./stores.js";
+import { pushToolsActionsOperations, popToolsActionsOperations } from "./stores.js";
 import { isDeviceSmallerThan } from "./utils";
 import { FaTimes } from "svelte-icons/fa";
 export let title = "";
@@ -20,7 +20,7 @@ export function show(on_close_callback = void 0) {
   open = true;
   close_callback = on_close_callback;
   if (isDeviceSmallerThan("sm")) {
-    $toolsActionsOperations = {
+    pushToolsActionsOperations({
       opver: 1,
       operations: [
         {
@@ -37,12 +37,14 @@ export function show(on_close_callback = void 0) {
           ]
         }
       ]
-    };
+    });
   }
 }
 export function hide() {
+  if (!open)
+    return;
   open = false;
-  $toolsActionsOperations = [];
+  popToolsActionsOperations();
 }
 let root;
 afterUpdate(
@@ -98,8 +100,9 @@ function on_cancel(event) {
             From: "opacity-100 translate-y-0 sm:scale-100"
             To: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
         -->
-        <div class=" transform overflow-hidden rounded-lg bg-white dark:bg-stone-700 text-left shadow-xl transition-all 
-                    sm:my-8 w-full sm:max-w-lg">
+
+        <div class="  rounded-lg bg-white dark:bg-stone-700 text-left shadow-xl transition-all  
+                    sm:my-8 w-full sm:max-w-lg"> <!-- transform overflow-hidden -->
           <div class="bg-white dark:bg-stone-700 px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
             <div class="sm:flex sm:items-start">
               <div class="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">

package/operations.svelte

@@ -46,16 +46,13 @@ function update(...args) {
 function on_click(e, operation) {
   if (!operation)
     return;
-  if (operation.action) {
-    let focused_item = null;
-    if ($contextItemsStore.focused)
-      focused_item = $contextItemsStore[$contextItemsStore.focused];
-    operation.action(focused_item);
-    return;
-  }
   let owner = e.target;
   while (owner && owner.tagName != "BUTTON")
     owner = owner.parentElement;
+  if (operation.action) {
+    operation.action(owner);
+    return;
+  }
   if (!owner)
     return;
   let rect = owner.getBoundingClientRect();

package/package.json

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

package/stores.d.ts

@@ -1,3 +1,5 @@
+export function pushToolsActionsOperations(operations: any): void;
+export function popToolsActionsOperations(): void;
 export function setNavigatorTitle(key: any, title: any): void;
 export function hasSelectedItem(): boolean;
 export function hasDataItem(): boolean;

package/stores.js

@@ -15,6 +15,31 @@ export const mainContentPageReloader = writable(1);
 export const wholeAppReloader = writable(1)
 export const alerts = writable([])
 
+
+let toolsActionsOperationsStack = []
+export function pushToolsActionsOperations(operations)
+{
+    toolsActionsOperationsStack.push(operations)
+    toolsActionsOperations.set(operations) 
+}
+
+export function popToolsActionsOperations()
+{
+    toolsActionsOperationsStack.pop();
+    const stackSize = toolsActionsOperationsStack.length;
+    if(stackSize == 0)
+    {
+        //console.log('stack empty')
+        toolsActionsOperations.set([]) 
+    }
+    else
+    {
+        const lastElement = toolsActionsOperationsStack[stackSize-1];
+        //console.log('stack not empty (stackSize)', lastElement)
+        toolsActionsOperations.set(lastElement) 
+    }
+}
+
 export const addAlert = (txt) => {
     let al = get(alerts)
     al = [txt, ...al];