@humandialog/forms.svelte 0.4.42 → 0.4.43

package/components/Fab.svelte

@@ -7,7 +7,6 @@ $:
   update($page_toolbar_operations, $context_toolbar_operations);
 let operations = [];
 function update(...args) {
-  expanded = false;
   if ($context_toolbar_operations && $context_toolbar_operations.length > 0)
     operations = $context_toolbar_operations;
   else

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

@@ -224,6 +224,8 @@ async function edit_date(field, prop_idx) {
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 {#if item}
+{@const element_title = item[title]}
+
 <section    class="flex flex-row my-0  w-full text-sm text-slate-700 dark:text-slate-400 cursor-default rounded-md border border-transparent {selected_class} {focused_class}"
             on:contextmenu={on_contextmenu}
             role="menu"
@@ -233,17 +235,19 @@ async function edit_date(field, prop_idx) {
     
     <div class="ml-3 w-full py-1" use:selectable={item} on:click={(e) => {activate_row(e, item)}} role="row" tabindex="0">
         <div class="flex flex-row" on:click={(e) => edit_row_property(e, 'top')}>
-            <p class="font-bold whitespace-nowrap overflow-clip flex-none w-1/2 sm:w-1/3">
+            <p  class="font-bold whitespace-nowrap overflow-clip flex-none min-h-[1.25rem] w-1/2 sm:w-1/3">
                 {#if definition.title_readonly}
                 <span  id="__hd_list_ctrl_{item[item_key]}_Title" role="gridcell" tabindex="0"> 
-                    {item[title]}
+                    {element_title}
                 </span>
                 {:else}
+                    {#key item[title]} <!-- Wymusza pełne wyrenderowanie zwłasza po zmiane z pustego na tekst  -->
                     <span  id="__hd_list_ctrl_{item[item_key]}_Title" role="gridcell" tabindex="0"
                         use:editable={(text) => {change_name(text)}}
                         on:click={edit}> 
-                        {item[title]}
+                            {element_title}
                     </span>
+                    {/key}
                 {/if}
             </p>
 

package/components/list/internal/list.inserter.svelte

@@ -17,7 +17,7 @@ let insertion_paragraph;
         <div class="h-4 w-4 mt-1.5 ml-2"></div>
     {/if}
 
-    <p  class="ml-3 py-1 font-bold whitespace-nowrap overflow-clip flex-none w-1/2 sm:w-1/3"
+    <p  class="ml-3 py-1 font-bold whitespace-nowrap overflow-clip flex-none w-1/2 sm:w-1/3" tabindex="0"
         bind:this={insertion_paragraph}
         use:editable={oninsert} >
     </p>

package/package.json

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

package/utils.js

@@ -102,7 +102,8 @@ export function editable(node, action)
     const org_text = node.textContent;
     const blur_listener = async (e) =>
     {
-        await finish_editing(false, false);
+        let cancel = !node.textContent
+        await finish_editing(cancel, false);
     }
 
     const key_listener = async (e) =>
@@ -133,6 +134,8 @@ export function editable(node, action)
         let sel = window.getSelection();
         sel.removeAllRanges();
 
+        //console.log('cell_content', node.textContent)
+        
         if(cancel)
         {
             node.innerHTML = org_text;
@@ -156,13 +159,12 @@ export function editable(node, action)
 
     const edit_listener = async (e) =>
     {
-        //console.log('Edit event fired:', itm, "node", node)
         node.contentEditable = "true"
         node.addEventListener("blur", blur_listener);
         node.addEventListener("keydown", key_listener);
         
         node.focus();
-        
+
         await tick();
         let range = document.createRange();
         range.selectNodeContents(node);
@@ -170,7 +172,7 @@ export function editable(node, action)
         let end_container = range.endContainer;
         range.setStart(end_container, end_offset)
         range.setEnd(end_container, end_offset)
-        console.log('range rect: ', range.getBoundingClientRect())
+       // console.log('range rect: ', range.getBoundingClientRect())
         let sel = window.getSelection();
         sel.removeAllRanges();
         sel.addRange(range);
@@ -205,7 +207,7 @@ export function start_editing(element, finish_callback)
     {
         if(editable_node.contentEditable == "true")
             return;
-
+        
         if(finish_callback)
         {
             editable_node.addEventListener("finish", (e) => { finish_callback(e.detail) })