@humandialog/forms.svelte 1.3.10 → 1.3.12

package/components/sidebar/sidebar.item.svelte

@@ -2,6 +2,7 @@
 import Icon from "../icon.svelte";
 import { contextItemsStore, auto_hide_sidebar, contextToolbarOperations } from "../../stores";
 import { FaBars, FaEllipsisH } from "svelte-icons/fa";
+import { link, push } from "svelte-spa-router";
 import {
   selectable as _selectable,
   isSelected,
@@ -9,7 +10,8 @@ import {
   handleSelect,
   activateItem,
   startEditing,
-  getActive
+  getActive,
+  isOnNavigationPage
 } from "../../utils";
 import { showMenu } from "../menu";
 export let href;
@@ -95,14 +97,24 @@ function on_link_clicked(e) {
     handleSelect(e);
   else if (item)
     handleSelect(e);
+  if (!e.target)
+    return;
+  let linkNode = e.target;
+  while (linkNode && linkNode.tagName != "A")
+    linkNode = linkNode.parentElement;
+  if (!linkNode)
+    return;
+  const href2 = linkNode.getAttribute("href");
+  e.preventDefault();
   if (isOnPage) {
-    if (!isRowActive) {
-      e.preventDefault();
-    } else
-      e.stopPropagation();
+    if (isRowActive) {
+      if (href2)
+        push(href2);
+    }
   } else {
-    e.stopPropagation();
     auto_hide_sidebar();
+    if (href2)
+      push(href2);
   }
 }
 function on_contextmenu(e) {
@@ -144,14 +156,26 @@ function activateRow(e) {
     return;
   if (!isOnPage)
     return;
-  let operationsContainer = [];
+  let operationsContainer;
   if (operations) {
     let operationsList = operations(root);
-    operationsContainer.push({
-      icon: FaEllipsisH,
-      menu: operationsList
-    });
-  }
+    operationsContainer = {
+      opver: 1,
+      operations: [
+        {
+          caption: "View",
+          operations: [
+            {
+              icon: FaEllipsisH,
+              menu: operationsList,
+              fab: "M10"
+            }
+          ]
+        }
+      ]
+    };
+  } else
+    operationsContainer = [];
   activateItem("props", item, operationsContainer);
   if (e)
     e.stopPropagation();
@@ -166,24 +190,24 @@ function activateRow(e) {
         on:contextmenu={on_contextmenu}
         on:keydown
         on:keyup
-        class="     border border-transparent rounded-lg
-                    text-lg sm:text-base font-normal 
+        class="     mb-2
+                    border border-transparent rounded-lg
                     text-stone-900 dark:text-white  {user_class}"
         class:sm:hover:bg-stone-100={!!href}
         class:sm:dark:hover:bg-stone-700={!!href}
         class:bg-stone-200={isRowActive}
         class:dark:bg-stone-700={isRowActive}
         class:selected={selected(selectable, context_data)}>
-            <div class="flex flex-row justify-between">
+            <div class="flex flex-row justify-between
+                        text-base font-semibold">
                 {#if href}
                     <a  href={href} 
                         on:click={on_link_clicked} 
-                        class="flex-1 ml-2 mt-1 sm:mt-1 inline-flex items-center group"
-                        class:mb-3={!summary}
-                        class:sm:mb-2={!summary}
+                        class="flex-1 ml-2 inline-flex items-center group"
                         >
                         {#if icon}
-                            <Icon size={5} component={icon}/>
+                            <Icon class="w-5 h-5 mt-0.5 ml-2 mr-1" component={icon}/>
+                            
                         {/if}
                         <span   class="ml-3 group-hover:underline"
                                 use:editable_if_needed={editable}>
@@ -191,12 +215,10 @@ function activateRow(e) {
                         </span>
                     </a>
                 {:else}
-                    <p  class="flex-1 ml-2 mt-1 sm:mt-1 inline-flex items-center group cursor-default"
-                        class:mb-3={!summary}
-                        class:sm:mb-2={!summary}
+                    <p  class="flex-1 ml-2 inline-flex items-center group cursor-default"
                         use:selectable_if_needed={selectable}>
                         {#if icon}
-                            <Icon size={2} component={icon}/>
+                            <Icon class="w-5 h-5 mt-0.5 ml-2 mr-1" component={icon}/>
                         {/if}
                         <span   class="ml-3"
                                 use:editable_if_needed={editable}>
@@ -205,11 +227,11 @@ function activateRow(e) {
                     </p>
                 {/if}
 
-                {#if !isOnPage}
-                <section    class="flex-0 w-20 sm:w-12 h-10 flex-0 flex flex-row"
+                {#if  !isOnPage}
+                <section    class="flex-0 w-20 sm:w-12 flex-0 flex flex-row"
                             use:selectable_if_needed={selectable}>
                     {#if can_show_context_menu(selectable, context_data)}
-                        <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}>
+                        <button class="w-5 h-5 mt-0.5 mr-3 ml-auto" on:click={on_show_menu}>
                             <FaBars/>
                         </button>
                     {/if}
@@ -217,10 +239,11 @@ function activateRow(e) {
                 {/if}
             </div>
 
-            {#if summary}
-                <p class="text-xs ml-10 mb-2 mr-2
+            {#if summaryText}
+                <p class="ml-14 mt-1
                         text-stone-900 dark:text-stone-400
-                        cursor-default"
+                        cursor-default
+                        text-sm   "
                     use:selectable_if_needed={selectable}
                     use:editable_if_needed={summaryEditable}
                     bind:this={summaryElement}>

package/components/sidebar/sidebar.list.svelte

@@ -100,12 +100,14 @@ function onBlurInserter() {
 {/each }
 
 {#if inserter}
-    <Edit   class="p-3 sm:p-2 text-lg sm:text-base font-normal text-stone-500 rounded-lg dark:text-stone-400 hover:bg-stone-100 dark:hover:bg-stone-700" 
+    <Edit   class=" mb-2 ml-2
+            text-base font-normal 
+            text-stone-500 rounded-lg dark:text-stone-400 hover:bg-stone-100 dark:hover:bg-stone-700" 
             onEnter={onNewElement} 
             placeholder={inserterPlaceholder} 
             inserter={true}
             onBlur={onBlurInserter}
             bind:this={inserterElement}>
-        <Icon size={5} component={FaPlus} class="mr-3"/>
+        <Icon component={FaPlus} class="w-5 h-5 mt-0.5 ml-2.5 pr-0.5 mr-4"/>
     </Edit>
 {/if}

package/components/table/table.svelte

@@ -62,9 +62,12 @@ export function selectItem(itm, cinfo2) {
     $contextTypesStore[select] = itm.oclType;
   if (focus)
     $contextItemsStore.focused = select;
-  if (itm)
-    $contextToolbarOperations = [...toolbarOperations];
-  else
+  if (itm) {
+    if (Array.isArray(toolbarOperations))
+      $contextToolbarOperations = [...toolbarOperations];
+    else
+      $contextToolbarOperations = { ...toolbarOperations };
+  } else
     $contextToolbarOperations = [];
   if (nav)
     $data_tick_store = $data_tick_store + 1;

package/components/tag.svelte

@@ -21,16 +21,19 @@ let x_size;
 switch (s) {
   case "md":
     font = "mt-0.5 text-sm font-semibold";
-    x_size = "mt-1 w-3 h-3";
+    x_size = "w-3 h-3";
     break;
   case "sm":
     font = "mt-0 text-xs mb-0.5 font-semibold";
-    x_size = "ml-3  mt-1  w-3 w-2 h-3 ";
+    x_size = "ml-2  w-3 h-3 ";
     break;
   case "xs":
     font = "mt-0 sm:mt-0 text-xs sm:text-[0.65rem] font-semibold sm:font-normal";
-    x_size = "ml-3 sm:ml-1 mt-0.5 sm:mt-1 w-3 sm:w-2 h-3 sm:h-2";
+    x_size = "ml-3 sm:ml-1 w-3 sm:w-2 h-3 sm:h-2";
     break;
+  default:
+    font = "";
+    x_size = "ml-2 w-3 h-3";
 }
 let rootElement;
 let colorPicker = null;
@@ -46,19 +49,19 @@ function onSelectColor(color2) {
 }
 </script>
 
-<div
-	class="mt-1 pl-2 {pr} rounded text-white flex flex-row {color}"
+<span
+	class=" pl-2 {pr} rounded text-white flex flex-row {color}  items-center"
 	
 	bind:this={rootElement}>
-	<div class={font}>{name}</div>
+	<span class={font}>{name}</span>
 	{#if onRemove}
-		<div
+		<span
 			class="no-print inline-block {x_size} hover:cursor-pointer"
 			on:click|stopPropagation={onRemove}>
 			<FaTimes />
-		</div>
+		</span>
 	{/if}
-</div>
+</span>
 
 <style>
 	@media print {

package/components/tags.svelte

@@ -193,16 +193,18 @@ switch (s) {
 }
 </script>
 
-<div class="{userClass} flex flex-row {gap} flex-wrap mr-1 sm:mr-0">
-    {#each tagsTable as tag}
-        {#if isEditable}
-            <Tag name={tag.label} color={tag.color} {s}
-                 onRemove={(e) => {onRemoveTag(tag.label)}}
-                 onColor={canChangeColor ? onColorizeTag : null}/>
-        {:else}
-            <Tag name={tag.label} color={tag.color} {s}/>
-        {/if}
-    {/each}
+<section class="{userClass} flex flex-row {gap} flex-wrap mr-1 sm:mr-0">
+    <p class="flex flex-row {gap} flex-wrap ">
+        {#each tagsTable as tag}
+            {#if isEditable}
+                <Tag name={tag.label} color={tag.color} {s}
+                    onRemove={(e) => {onRemoveTag(tag.label)}}
+                    onColor={canChangeColor ? onColorizeTag : null}/>
+            {:else}
+                <Tag name={tag.label} color={tag.color} {s}/>
+            {/if}
+        {/each}
+    </p>
 
     {#if isEditable}
         {#if !addComboVisible}
@@ -227,4 +229,4 @@ switch (s) {
             </Combo>
         {/if}
     {/if}
-</div>
+</section>

package/desk.svelte

@@ -103,15 +103,22 @@
     let bottom_bar_visibility = "hidden"
     let bottom_bar_visible = false
     let lg_main_sidebar_height = ""
-    let fab_base_visibility = "hidden"
-    let fab_visibility = fab_base_visibility;
-    let fab_bottom = "bottom-0"
+    //let fab_base_visibility = "hidden"
+    //let fab_visibility = fab_base_visibility;
+    //let fab_bottom = "bottom-0"
     let vertical_toolbar_visibility = "hidden sm:block"
     let content_left = "left-0 sm:left-[40px]";
     let content_width = "w-screen  sm:w-[calc(100vw-40px)] ";
                                 
     let content_top = ""
-    let content_height = ""                                
+    let content_height = ""              
+    
+    const FAB_HIDDEN = 0
+    const FAB_VISIBLE_ON_MOBILE = 1
+    const FAB_VISIBLE_ALWAYS = 2
+    let fab_visibility_mode = FAB_HIDDEN
+    let is_fab_visible = false;
+    
     
     $: { tools_visible = $tools_visible_store
         bottom_bar_visible = $bottom_bar_visible_store
@@ -123,7 +130,8 @@
         if(tools_visible)
         {
             tools_visibility = "hidden sm:block sm:fixed"
-            fab_base_visibility = "fixed sm:hidden"
+            //fab_base_visibility = "fixed sm:hidden"
+            fab_visibility_mode = FAB_VISIBLE_ON_MOBILE
 
             content_top = 'top-[50px] sm:top-[40px]'
             
@@ -136,6 +144,9 @@
         else
         {
             tools_visibility = "hidden"
+            //fab_base_visibility = "hidden"
+            fab_visibility_mode = FAB_HIDDEN
+
             content_top = `top-[50px] sm:top-0`
             if(bottom_bar_visible)
                 content_height = `min-h-[calc(100vh-290px)] sm:h-[calc(100vh-240px)]`           
@@ -149,16 +160,18 @@
         {
             lg_main_sidebar_height = `lg:h-[calc(100vh-240px)]`    
             bottom_bar_visibility = "fixed"
-            fab_bottom = `bottom-[240px]`;
+         //   fab_bottom = `bottom-[240px]`;
         }
         else
         {    
             lg_main_sidebar_height = ""
             bottom_bar_visibility = "hidden"
-            fab_bottom = "bottom-0"
+         //   fab_bottom = "bottom-0"
         }
         
-        fab_visibility = fab_base_visibility;
+        
+        //fab_visibility = fab_base_visibility;
+        determineFABVisibility();
     }
 
 
@@ -250,44 +263,61 @@
         const vp = window.visualViewport;
         setViewportHeight(vp)
 
-        determineFABVisibility();
+        determineFABVisibilityAsync();
     }
 
     function onSelectionChanged(e)
     {
-        determineFABVisibility();
+        determineFABVisibilityAsync();
     }
 
     function onFocusOut(e)
     {
-        determineFABVisibility();
+        determineFABVisibilityAsync();
     }
 
     let change_ticket = 0
     let last_change_ticket = 0
-    function determineFABVisibility()
+    function determineFABVisibilityAsync()
     {
         change_ticket++;
         setTimeout( () => {
             if(change_ticket != last_change_ticket)
             {
                 last_change_ticket = change_ticket;
-                let new_fab_visibility = "";
+                determineFABVisibility();
+            }
+        }, 200)
+        
+    }
 
+    function determineFABVisibility()
+    {
+        switch(fab_visibility_mode)
+        {
+        case FAB_HIDDEN:
+            is_fab_visible = false;
+            break;
+
+        case FAB_VISIBLE_ON_MOBILE:
+            if(isDeviceSmallerThan("sm"))
+            {
                 if(isOnScreenKeyboardVisible())
-                {
-                    new_fab_visibility = 'hidden'
-                }
+                    is_fab_visible = false;
                 else
-                {
-                    new_fab_visibility = fab_base_visibility;
-                }
-
-                if(fab_visibility != new_fab_visibility)
-                    fab_visibility = new_fab_visibility;
+                    is_fab_visible = true;
             }
-        }, 200)
-        
+            else
+                is_fab_visible = false;
+            break;
+
+        case FAB_VISIBLE_ALWAYS:
+            if(isOnScreenKeyboardVisible())
+                is_fab_visible = false;
+            else
+                is_fab_visible = true;
+            break;
+        }
     }
 
     let operationsComponent
@@ -379,9 +409,11 @@
                         <Operations bind:this={operationsComponent} />
                     </div>
 
-                    <div class="{fab_visibility} right-3 {fab_bottom} mb-1 cursor-pointer z-10">
+                    {#if is_fab_visible}
+                    <!--div class="{fab_visibility} left-3 {fab_bottom} mb-1 cursor-pointer z-10"-->
                         <Fab bind:this={fabComponent}/>
-                    </div>
+                    <!---/div-->
+                    {/if}
 
                     <!--#######################################################-->
                     <!--##  CONTENT                          ##################-->

package/horizontal.toolbar.svelte

@@ -284,7 +284,7 @@
 <div class="no-print flex flex-row w-full" on:click={clearSelection}>
     <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-stone-300 hover:text-stone-100" on:click|stopPropagation={toggle_navigator}>
-            <Icon class="w-8 sm:w-6 h-8 sm:h-6" component={icon}/>
+            <Icon class="w-5 h-5" component={icon}/>
         </button>
     </div>
 
@@ -297,7 +297,7 @@
         {#if user_is_in_multiple_groups}
             <button class="h-full w-12 sm:w-10 px-0 flex justify-center items-center   text-stone-300 hover:text-stone-100"
                     on:click|stopPropagation={show_groups}>
-                <Icon class="w-5 sm:w-4 h-5 sm:h-4" component={FaUsers} />
+                <Icon class="w-5  h-5 " component={FaUsers} />
             </button>
         {/if}
 
@@ -305,7 +305,7 @@
             class="h-full w-12 sm:w-10 px-0 flex justify-center items-center   text-stone-300 hover:text-stone-100"
             on:click|stopPropagation={show_options}>
 
-            <Icon class="w-5 sm:w-4 h-5 sm:h-4" component={FaCog} />
+            <Icon class="w-5  h-5 " component={FaCog} />
         </button>
     </div>
 

package/operations.svelte

@@ -7,12 +7,41 @@ let operations = [];
 let leftOperations = [];
 let rightOperations = [];
 function update(...args) {
-  if ($contextToolbarOperations && $contextToolbarOperations.length > 0)
+  let isOpVer1 = false;
+  if ($contextToolbarOperations && Array.isArray($contextToolbarOperations) && $contextToolbarOperations.length > 0) {
     operations = $contextToolbarOperations;
-  else
-    operations = $pageToolbarOperations;
-  leftOperations = operations.filter((o) => !o.right);
-  rightOperations = operations.filter((o) => o.right == true);
+  } else if ($contextToolbarOperations && $contextToolbarOperations.operations && $contextToolbarOperations.operations.length > 0) {
+    operations = $contextToolbarOperations.operations;
+    if ($contextToolbarOperations.opver && $contextToolbarOperations.opver == 1)
+      isOpVer1 = true;
+  } else {
+    if (Array.isArray($pageToolbarOperations))
+      operations = $pageToolbarOperations;
+    else {
+      operations = $pageToolbarOperations.operations;
+      if ($pageToolbarOperations.opver && $pageToolbarOperations.opver == 1)
+        isOpVer1 = true;
+    }
+  }
+  leftOperations = [];
+  rightOperations = [];
+  let AOperations = [];
+  let BOperations = [];
+  let COperations = [];
+  if (isOpVer1) {
+    operations.forEach((group) => {
+      if (group.operations && group.operations.length > 0) {
+        AOperations = [...AOperations, ...group.operations.filter((o) => o.tbr == "A")];
+        BOperations = [...BOperations, ...group.operations.filter((o) => o.tbr == "B")];
+        COperations = [...COperations, ...group.operations.filter((o) => o.tbr == "C")];
+      }
+    });
+    leftOperations = [...AOperations, ...BOperations];
+    rightOperations = [...COperations];
+  } else {
+    leftOperations = operations.filter((o) => !o.right);
+    rightOperations = operations.filter((o) => o.right == true);
+  }
 }
 function on_click(e, operation) {
   if (!operation)
@@ -71,7 +100,7 @@ function isOperationActivated(operation) {
                                 <div class="w-3.5 h-3.5 mr-1"><svelte:component this={operation.icon}/></div>
                             {/if}
                             {#if operation.caption}
-                                <span>{operation.caption}</span>
+                                <span class="ml-1">{operation.caption}</span>
                             {/if}
                         </button>
                     {/each}
@@ -91,7 +120,7 @@ function isOperationActivated(operation) {
                             <div class="w-3.5 h-3.5 mr-1"><svelte:component this={operation.icon}/></div>
                         {/if}
                         {#if operation.caption}
-                            <span>{operation.caption}</span>
+                            <span class="ml-1">{operation.caption}</span>
                         {/if}
                     </button>
                 {/if} 
@@ -119,7 +148,7 @@ function isOperationActivated(operation) {
                         <div class="w-3.5 h-3.5 mr-1"><svelte:component this={operation.icon}/></div>
                     {/if}
                     {#if operation.caption}
-                        <span>{operation.caption}</span>
+                        <span class="ml-1">{operation.caption}</span>
                     {/if}
                 </button>    
             {/if}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@humandialog/forms.svelte",
-  "version": "1.3.10",
+  "version": "1.3.12",
   "description": "Basic Svelte UI components for Object Reef applications",
   "devDependencies": {
     "@playwright/test": "^1.28.1",
@@ -26,7 +26,7 @@
   },
   "type": "module",
   "dependencies": {
-    "@humandialog/auth.svelte": "^1.8.3",
+    "@humandialog/auth.svelte": "^1.8.4",
     "@tiptap/core": "^2.11.0",
     "@tiptap/extension-bullet-list": "^2.11.5",
     "@tiptap/extension-code-block": "^2.11.5",

package/page.svelte

@@ -42,8 +42,13 @@
 		cl += ' ' + $$props.class
 
 	onMount(() => {
-		if (toolbarOperations != undefined && Array.isArray(toolbarOperations))
-			$pageToolbarOperations = [...toolbarOperations];
+		if (toolbarOperations != undefined)
+		{ 
+			if(Array.isArray(toolbarOperations))
+				$pageToolbarOperations = [...toolbarOperations];
+			else
+				$pageToolbarOperations = {...toolbarOperations};
+		}
 
 		$page_title = title;