@humandialog/forms.svelte 0.4.42 → 0.4.44

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/Grid.menu.svelte

@@ -121,7 +121,7 @@
             {@const col=col_span(operation.columns ?? 1)}
             
             <button class=" py-2.5 px-5 {col}
-                            text-xs font-medium text-gray-900 dark:text-gray-400 dark:hover:text-white
+                            text-base sm:text-xs font-medium text-gray-900 dark:text-gray-400 dark:hover:text-white
                             bg-slate-100 hover:bg-slate-200 dark:bg-gray-800 dark:hover:bg-gray-700 active:bg-slate-300 dark:active:bg-gray-600
                             border rounded border-gray-200 dark:border-gray-600 focus:outline-none
                             inline-flex items-center justify-center"

package/components/combo/combo.svelte

@@ -48,15 +48,15 @@ switch (s) {
     label_mb = "mb-2";
     input_pt = "pt-2.5";
     input_pb = "pb-2.5";
-    font_size = "text-sm";
-    line_h = "h-5";
+    font_size = "text-lg sm:text-sm";
+    line_h = "h-7 sm:h-5";
     break;
   case "xs":
     label_mb = "mb-0.5";
     input_pt = "pt-0.5";
     input_pb = "pb-0.5";
-    font_size = "text-xs";
-    line_h = "h-4";
+    font_size = "text-base sm:text-xs";
+    line_h = "h-6 sm:h-4";
     break;
 }
 let background_class = is_compact && !icon ? "bg-slate-900/10 dark:bg-slate-100/10 rounded-lg" : "";
@@ -553,7 +553,7 @@ function on_focus_out(e) {
                 {#if _filtered_source.length > 0}
                     {#each _filtered_source as item (item.Key)}
                         <!-- svelte-ignore a11y-click-events-have-key-events -->
-                        <li class="rounded p-2 flex flex-row items-center" 
+                        <li class="rounded p-2 flex flex-row items-center {font_size}" 
                             class:bg-gray-100={highlighted_option == item}
                             class:dark:bg-gray-700={highlighted_option == item}
                             class:dark:hover:bg-gray-700={highlighted_option == item}

package/components/contextmenu.svelte

@@ -188,30 +188,35 @@ function hide_submenu() {
 </script>
 
 <div id="__hd_svelte_contextmenu" 
-    class="bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400 rounded-lg border border-gray-200 dark:border-gray-700 shadow-md z-30 fixed min-w-[{min_width_px}px] w-max" 
+    class=" bg-white dark:bg-gray-700 text-slate-600 dark:text-gray-400 rounded-lg border border-gray-200 dark:border-gray-900 shadow-md 
+            z-30 fixed min-w-[{min_width_px}px] w-max" 
     style={`left:${x}px; top:${y}px; display:${display}`}
     bind:this={menu_root}>
 
     {#each operations as operation, index}
         {@const is_separator = operation.separator}
         {#if is_separator}
-            <hr class="my-1 mx-1">
+            <hr class="my-1 mx-0 border-1 dark:border-slate-900">
         {:else}
-            {@const icon_placeholder_size = operation.description ? 12 : 10}
+            {@const mobile = is_device_smaller_than("sm")}
+            {@const icon_placeholder_without_desc = mobile ? 12 : 10}
+            {@const icon_placeholder_with_desc = mobile ? 14 : 12}
+            {@const icon_placeholder_size = operation.description ? icon_placeholder_with_desc : icon_placeholder_without_desc}
             {@const menu_item_id = menu_items_id_prefix + index}
-            {@const active = focused_index == index ? 'bg-gray-200 dark:bg-gray-700' : ''}
+            {@const active = focused_index == index ? 'bg-gray-200 dark:bg-gray-600' : ''}
             {@const has_submenu = operation.menu !== undefined && operation.menu.length > 0}
             
-            <button class="font-medium m-0 p-2 text-sm w-full text-left flex flex-row cursor-context-menu {active} focus:outline-none"
+            <button class="font-medium m-0 p-2 text-lg sm:text-sm w-full 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:mouseenter = {(e) => {on_mouse_move(index)}}
                     on:keydown|stopPropagation={(e) => on_keydown(e, operation, index)}>
                     
-                <div class="flex items-center justify-center" style:width={`${icon_placeholder_size*0.25}rem`}>
+                <div class="flex items-center justify-center mt-1 sm:mt-0.5" style:width={`${icon_placeholder_size*0.25}rem`}>
                     {#if operation.icon}
-                        {@const icon_size = icon_placeholder_size - 6}
+                        {@const cc = mobile ? 7 : 6}
+                        {@const icon_size = icon_placeholder_size - cc}
                         <Icon size={icon_size} component={operation.icon}/>
                     {/if}
                 </div>
@@ -219,7 +224,7 @@ function hide_submenu() {
                     <p>{operation.caption}</p>
                     {#if operation.description}
                         {@const shortcut_width_px = operation.shortcut ? 80 : 0}
-                        <p  class="text-sm font-normal text-gray-400 dark:text-gray-500 truncate inline-block"
+                        <p  class="text-sm font-normal text-slate-900 dark:text-gray-500 truncate inline-block"
                             style:max-width={`calc(${width_px-shortcut_width_px} - 3rem)`} >{operation.description}</p>
                     {/if}
                 </div>

package/components/date.svelte

@@ -37,20 +37,20 @@ export function show(event, hide_callback) {
 let is_compact = getContext("rIs-table-component") || compact;
 let input_pt = "pt-0.5";
 let input_pb = "pb-1";
-let font_size = "text-sm";
-let line_h = "h-4";
+let font_size = "text-lg sm:text-sm";
+let line_h = "h-7 sm:h-5";
 switch (s) {
   case "md":
     input_pt = "pt-2.5";
     input_pb = "pb-2.5";
-    font_size = "text-sm";
-    line_h = "h-5";
+    font_size = "text-lg sm:text-sm";
+    line_h = "h-7 sm:h-5";
     break;
   case "xs":
     input_pt = "pt-0.5";
     input_pb = "pb-0.5";
-    font_size = "text-xs";
-    line_h = "h-4";
+    font_size = "text-base sm:text-xs";
+    line_h = "h-6 sm:h-4";
     break;
 }
 let item = null;

package/components/icon.svelte

@@ -6,7 +6,7 @@ export let img = "";
 export let label = "";
 export let symbol = "";
 export let color = "";
-export let size = 5;
+export let size = void 0;
 export let bg = "";
 export let circle = false;
 let additional_class = $$restProps.class ?? "";
@@ -14,7 +14,6 @@ let id = $$restProps.id ?? "";
 let _bg;
 let txt = "";
 let symbol_html = "";
-let icon_size = `${size * 0.25}rem`;
 $: {
   if (symbol) {
     if (symbol.startsWith("label:"))
@@ -57,11 +56,24 @@ $: {
   } else
     component = component;
 }
+let style;
+$: {
+  if (size == void 0) {
+    if (!additional_class) {
+      size = 5;
+      let icon_size = `${size * 0.25}rem`;
+      style = `width: ${icon_size}; height: ${icon_size}`;
+    } else
+      style = "";
+  } else {
+    let icon_size = `${size * 0.25}rem`;
+    style = `width: ${icon_size}; height: ${icon_size}`;
+  }
+}
 </script>
 
 <div class=" {additional_class}"
-    style:width={icon_size} 
-    style:height={icon_size} 
+    style="{style}"
     style:background-color={_bg}
     style:border-radius={ circle ? '50%' : ''}
     {id}

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,21 @@ 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=" text-lg font-semibold min-h-[1.75rem]
+                        sm:text-sm sm:font-semibold sm:min-h-[1.25rem]
+                        whitespace-nowrap overflow-clip flex-none 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>
 
@@ -289,7 +295,10 @@ async function edit_date(field, prop_idx) {
 
         {#if summary && (item[summary] || placeholder=='Summary')}
             {@const element_id = `__hd_list_ctrl_${item[item_key]}_Summary`}
-            <p class="text-xs text-slate-400" style="min-height: 1rem;"  on:click={(e) => edit_row_property(e, 'bottom')}>
+            <p class="  sm:text-xs sm:min-h-[1rem]
+                        text-base min-h-[1.5rem]
+                        text-slate-400 " 
+                    on:click={(e) => edit_row_property(e, 'bottom')}>
                 {#if definition.summary_readonly}
                     <span   id={element_id} role="gridcell" tabindex="0">
                         {item[summary]}

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

@@ -9,15 +9,15 @@ export function run(onclose) {
 let insertion_paragraph;
 </script>
 
-<section    class="flex flex-row my-0  w-full text-sm text-slate-700 dark:text-slate-400 cursor-default rounded-md border-2 border-transparent bg-gray-200 dark:bg-gray-700">
+<section    class="flex flex-row my-0  w-full text-lg sm:text-sm text-slate-700 dark:text-slate-400 cursor-default rounded-md border-2 border-transparent bg-gray-200 dark:bg-gray-700">
     {#if icon}
         <!--Icon   size={3} 
                 component={FaPlus}  
                 class="mt-1.5 ml-2 "/-->
-        <div class="h-4 w-4 mt-1.5 ml-2"></div>
+        <div class="h-5 w-5 sm:h-4 sm:w-4 mt-2 sm: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-semibold sm: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/components/sidebar/sidebar.group.svelte

@@ -14,7 +14,7 @@
     <slot/>
 
     {#if inserter}
-        <Edit class="p-2 text-base font-normal text-gray-500 rounded-lg dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700" on_enter={inserter} placeholder={inserter_placeholder} inserter={true}>
+        <Edit class="p-3 sm:p-2 text-lg sm:text-base font-normal text-gray-500 rounded-lg dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700" on_enter={inserter} placeholder={inserter_placeholder} inserter={true}>
             <Icon size={5} component={FaPlus} class="mr-3"/>
         </Edit>
     {/if}

package/components/sidebar/sidebar.item.svelte

@@ -80,7 +80,7 @@ function on_show_menu(e) {
         on:keydown
         on:keyup
         class="     border border-transparent rounded-lg
-                    text-base font-normal 
+                    text-lg sm:text-base font-normal 
                     text-gray-900 sm:hover:bg-gray-100  
                     dark:text-white sm:dark:hover:bg-gray-700 {user_class}
                     flex flex-row justify-between"
@@ -89,7 +89,7 @@ function on_show_menu(e) {
         class:selected={selected(selectable, context_data)}>
             <a  href={href} 
                 on:click={on_link_clicked} 
-                class="flex-1 ml-2 my-2 inline-flex items-center group">
+                class="flex-1 ml-2 my-3 sm:my-2 inline-flex items-center group">
                 {#if icon}
                     <Icon size={5} component={icon}/>
                 {/if}
@@ -102,7 +102,7 @@ function on_show_menu(e) {
             <section    class="flex-0 w-20 sm:w-12 h-10 flex-0 flex flex-row"
                         use:selectable_if_needed={selectable}>
                 {#if can_show_context_menu(selectable, context_data)}
-                    <button class="w-4 h-4 mt-3 mr-2 ml-auto" on:click={on_show_menu}>
+                    <button class="w-6 sm:w-4 h-6 sm:h-4 mt-3 mr-3 sm:mr-2 ml-auto" on:click={on_show_menu}>
                         <FaBars/>
                     </button>
                 {/if}

package/desk.svelte

@@ -115,22 +115,22 @@
             tools_visibility = "hidden sm:block sm:fixed"
             fab_visibility = "fixed sm:hidden"
 
-            content_top = 'top-[40px] sm:top-[40px]'
+            content_top = 'top-[50px] sm:top-[40px]'
             
             if(bottom_bar_visible)
-                content_height = `h-[calc(100vh-320px)] sm:h-[calc(100vh-280px)]`    
+                content_height = `h-[calc(100vh-290px)] sm:h-[calc(100vh-280px)]`    
             else    
-                content_height = `h-[calc(100vh-80px)] sm:h-[calc(100vh-40px)]` 
+                content_height = `h-[calc(100vh-50px)] sm:h-[calc(100vh-40px)]` 
                
         }
         else
         {
             tools_visibility = "hidden"
-            content_top = `top-[40px] sm:top-0`
+            content_top = `top-[50px] sm:top-0`
             if(bottom_bar_visible)
-                content_height = `h-[calc(100vh-280px)] sm:h-[calc(100vh-240px)]`           
+                content_height = `h-[calc(100vh-290px)] sm:h-[calc(100vh-240px)]`           
             else
-                content_height = `h-[calc(100vh-40px)] sm:h-screen`
+                content_height = `h-[calc(100vh-50px)] sm:h-screen`
         }
         
         
@@ -165,8 +165,8 @@
             <!--###########################################################-->
             <!--##  HORIZONTAL TOOLBAR (FOR PHONES)  ######################-->
             <!--###########################################################-->
-            <header class="fixed sm:hidden w-screen top-0 h-[40px] z-20  overflow-auto shadow  shadow-slate-900/5 dark:shadow-none" >
-                    <div class=" flex flex-row justify-between    bg-slate-900   text-gray-100 ">
+            <header class="fixed sm:hidden w-screen top-0 h-[50px] sm:h-[40px] z-20  overflow-auto shadow  shadow-slate-900/5 dark:shadow-none" >
+                    <div class=" flex flex-row justify-between  h-full  bg-slate-900   text-gray-100 ">
                         <HorizontalToolbar app_config={layout}/>
                     <div>
             </header>        
@@ -176,7 +176,7 @@
             <!--#######################################################-->
             <!--##  VERTICAL TOOLBAR                 ##################-->
             <!--#######################################################-->
-            <div  class="hidden sm:block fixed left-0 top-0 w-[40px] h-screen z-20 inset-0   overflow-hidden">
+            <div  class="hidden sm:block fixed left-0 top-0 w-[50px] sm:w-[40px] h-screen z-20 inset-0   overflow-hidden">
                 <div class="sticky top-0 flex h-full w-10 bg-slate-900 flex-col items-center text-gray-100 shadow">
                     <VerticalToolbar app_config={layout}/>
                 </div>    
@@ -188,13 +188,13 @@
             <!--##  MAIN SIDE BAR                    ##################-->
             <!--#######################################################-->
             {#if true}
-            {@const sidebar_left = $sidebar_left_pos==0 ? "left-0" : "left-[40px]"}
-            {@const sidebar_small_width = $sidebar_left_pos==0 ? "w-full" : "w-[calc(100vw-40px)]"}
+            {@const sidebar_left = $sidebar_left_pos==0 ? "left-0" : "left-[50px]"}
+            {@const sidebar_small_width = $sidebar_left_pos==0 ? "w-full" : "w-[calc(100vw-50px)]"}
 
             <div  class="{main_side_panel_visibility}  
                             {sidebar_left}  sm:left-[40px]
-                            top-[40px]  sm:top-0 
-                            h-[calc(100vh-40px)] sm:h-full {lg_main_sidebar_height}
+                            top-[50px]  sm:top-0 
+                            h-[calc(100vh-50px)] sm:h-full {lg_main_sidebar_height}
                             {sidebar_small_width} sm:w-[320px] 
                             z-20 overflow-x-hidden">
 
@@ -256,6 +256,14 @@
                     
                 </div>    
 
+                <!-- #########################################################-->
+                <!-- ## MODAL DIALOG #########################################-->
+                <!-- #########################################################-->
+                <div id="__hd_svelte_modal_root" class="z-30">
+                    <!-- after <Modal/> component is shown it's rettached to above div
+                        see: modal.svelte afterUpdate -->
+                </div>
+
             </section>
 
         </div>

package/horizontal.toolbar.svelte

@@ -197,9 +197,9 @@
 </script>
 
 <div class="flex flex-row w-full">
-    <div class="flex-none left-0 flex h-10">
-        <button class="w-10 h-full flex justify-center items-center text-slate-300 hover:text-slate-100" on:click={toggle_navigator}>
-            <Icon size={6} component={icon}/>
+    <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-slate-300 hover:text-slate-100" on:click={toggle_navigator}>
+            <Icon class="w-8 sm:w-6 h-8 sm:h-6" component={icon}/>
         </button>
     </div>
 
@@ -208,12 +208,12 @@
         <div class="block sm:hidden mt-3 uppercase text-sm text-center">{@html title}</div>
     </div>
 
-    <div class="flex-none ml-auto flex h-10">        
+    <div class="flex-none ml-auto flex h-12 sm:h-10">        
         <button
-            class="h-full w-10 px-0 flex justify-center items-center   text-slate-300 hover:text-slate-100"
+            class="h-full w-12 sm:w-10 px-0 flex justify-center items-center   text-slate-300 hover:text-slate-100"
             on:click={show_options}>
 
-            <Icon size={4} component={FaCog} />
+            <Icon class="w-5 sm:w-4 h-5 sm:h-4" component={FaCog} />
         </button>
     </div>
 

package/modal.svelte

@@ -1,4 +1,5 @@
-<script>import Icon from "./components/icon.svelte";
+<script>import { afterUpdate, onMount, tick } from "svelte";
+import Icon from "./components/icon.svelte";
 export let title = "";
 export let open = false;
 export let content = "";
@@ -15,6 +16,18 @@ export function show(on_close_callback = void 0) {
   open = true;
   close_callback = on_close_callback;
 }
+let root;
+afterUpdate(
+  async () => {
+    if (!!root) {
+      let modal_root = document.getElementById("__hd_svelte_modal_root");
+      if (!!modal_root && root.parentElement != modal_root) {
+        await tick();
+        modal_root.appendChild(root);
+      }
+    }
+  }
+);
 let close_callback = void 0;
 function on_ok(event) {
   if (on_ok_callback)
@@ -32,7 +45,7 @@ function on_cancel(event) {
 </script>
 
 {#if open}
-<div class="relative z-20" aria-labelledby="modal-title" role="dialog" aria-modal="true">
+<div class="relative z-20" aria-labelledby="modal-title" role="dialog" aria-modal="true" bind:this={root}>
     <!--
       Background backdrop, show/hide based on modal state.
   
@@ -43,9 +56,9 @@ function on_cancel(event) {
         From: "opacity-100"
         To: "opacity-0"
     -->
-    <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"></div>
+    <div class="fixed w-screen h-screen inset-0 bg-gray-500 bg-opacity-75 transition-opacity"></div>
   
-    <div class="fixed inset-0 z-20 w-screen overflow-y-auto">
+    <div class="fixed z-20 inset-0 w-screen overflow-y-auto">
       <div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
         <!--
           Modal panel, show/hide based on modal state.
@@ -57,7 +70,8 @@ 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="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg">
+        <div class=" transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all 
+                    sm:my-8 w-full sm:max-w-lg">
           <div class="bg-white 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@humandialog/forms.svelte",
-  "version": "0.4.42",
+  "version": "0.4.44",
   "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) })