@humandialog/forms.svelte 1.3.16 → 1.3.17

package/components/Floating_container.svelte

@@ -150,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/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/package.json

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