@humandialog/forms.svelte 1.7.9 → 1.7.10

package/components/Fab.svelte

@@ -164,7 +164,7 @@ function on_click(e, operation) {
   else if (operation.toolbar)
     showFloatingToolbar(rect, operation.toolbar, operation.props ?? {});
   else if (operation.grid) {
-    if (mobile)
+    if (false)
       showMenu(rect, operation.grid);
     else
       showGridMenu(rect, operation.grid);

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-base sm:text-xs font-medium text-stone-900 dark:text-stone-400 dark:hover:text-white
+                            text-sm font-medium text-stone-900 dark:text-stone-400 dark:hover:text-white
                             bg-stone-100 hover:bg-stone-200 dark:bg-stone-800 dark:hover:bg-stone-700 active:bg-stone-300 dark:active:bg-stone-600
                             border rounded border-stone-200 dark:border-stone-600 focus:outline-none
                             inline-flex items-center justify-center"

package/components/contextmenu.svelte

@@ -27,7 +27,7 @@ let menu_items = [];
 let submenus = [];
 let around_rect;
 let around_preference = 0;
-let css_position = "";
+let css_position = "display: none";
 let closeButtonPos = "";
 $:
   display = visible ? "block" : "none";
@@ -308,7 +308,7 @@ function execute_action(e, operation, index) {
     if (operation.toolbar)
       showFloatingToolbar(rect, operation.toolbar, operation.props ?? {});
     else if (operation.grid) {
-      if (mobile)
+      if (false)
         showMenu(rect, operation.grid);
       else
         showGridMenu(rect, operation.grid);

package/components/document/editor.svelte

@@ -1181,8 +1181,11 @@ function getPaletteCommands() {
         on_choice: (range) => {
           if (range)
             editor.chain().focus().deleteRange(range).run();
+          let stayFocused = false;
           if (exc.action)
-            exc.action();
+            stayFocused = exc.action();
+          if (!stayFocused)
+            editor.commands.blur();
         },
         is_active: () => {
           if (exc.is_active)
@@ -1209,8 +1212,11 @@ function getPaletteCommands() {
         on_choice: (range) => {
           if (range)
             editor.chain().focus().deleteRange(range).run();
+          let stayFocused = false;
           if (exc.action)
-            exc.action();
+            stayFocused = exc.action();
+          if (!stayFocused)
+            editor.commands.blur();
         },
         is_active: () => {
           if (exc.is_active)
@@ -1233,8 +1239,11 @@ function getPaletteCommands() {
         on_choice: (range) => {
           if (range)
             editor.chain().focus().deleteRange(range).run();
+          let stayFocused = false;
           if (exc.action)
-            exc.action();
+            stayFocused = exc.action();
+          if (!stayFocused)
+            editor.commands.blur();
         },
         is_active: () => {
           if (exc.is_active)
@@ -1251,7 +1260,8 @@ function getPaletteCommands() {
 
 
 
-<div bind:this={editorElement} />
+<div on:click 
+    bind:this={editorElement} />
 
 <Palette    commands={getPaletteCommands()}
             bind:this={palette}

package/components/document/editor.svelte.d.ts

@@ -90,6 +90,8 @@ declare const __propDef: {
         hasChanged?: (() => boolean) | undefined;
     };
     events: {
+        click: MouseEvent;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

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

@@ -210,8 +210,9 @@ function showAttachementIcon() {
         {@const canOpen = isLinkLike || hasOpen}
         {@const openableClass = canOpen ? "sm:hover:cursor-pointer underline" : ""}
         {@const showIcon = showAttachementIcon()}
+            <!-- whitespace-nowrap overflow-clip  -->
             <h3 class=" h3 text-base font-semibold pb-1
-                        whitespace-nowrap overflow-clip truncate w-full sm:flex-none
+                         w-full sm:flex-none
                         relative {openableClass}"
                 use:editable={{
                     action: (text) => onTitleChanged(text), 
@@ -246,9 +247,10 @@ function showAttachementIcon() {
           
                         
     {:else}
+        <!-- whitespace-nowrap overflow-clip  -->
         <h3  class=" text-base font-semibold pb-1
                     sm:text-base sm:font-semibold 
-                    whitespace-nowrap overflow-clip truncate w-full sm:flex-none
+                    w-full sm:flex-none
                     relative">
             {item[definition.titleAttrib]}
 

package/components/kanban/internal/kanban.inserter.svelte

@@ -31,9 +31,10 @@ async function onSummaryChanged(text) {
 <li class=" mx-2 pt-2 pb-4 px-1 rounded-md border border-transparent
             bg-stone-100 dark:bg-stone-700">
 
+    <!-- whitespace-nowrap overflow-clip  -->
     <h3  class=" text-base font-semibold min-h-[1.75rem]
                  sm:min-h-[1.25rem]
-                whitespace-nowrap overflow-clip w-full sm:flex-none "
+                w-full sm:flex-none "
                 use:editable={{
                     action: (text) => onInsert(text, ''),
                     active: false,

package/components/kanban/internal/kanban.props.svelte

@@ -90,8 +90,9 @@ async function editTags(field, propIdx) {
 
 <section class="flex flex-row justify-between">
     {#each properties as prop, idx}
-        {#if item[prop.a] || placeholder==prop.name}
-            {#if prop.type == rList_property_type.Date}
+        {#if true}
+            {@const notEmpty = item[prop.a] || placeholder==prop.name}
+            {#if prop.type == rList_property_type.Date && notEmpty}
                 <DatePicker
                     self={item}
                     a={prop.a}
@@ -99,7 +100,7 @@ async function editTags(field, propIdx) {
                     s="sm"
                     inContext="props"
                     bind:this={propElements[idx]}/>
-            {:else if prop.type == rList_property_type.Combo}
+            {:else if prop.type == rList_property_type.Combo && notEmpty}
                 <Combo
                         compact={true}
                         inContext="props"
@@ -123,7 +124,7 @@ async function editTags(field, propIdx) {
                                 bind:this={propElements[idx]}>
                     {item[prop.a]}
                 </p>
-            {:else if prop.type == rList_property_type.Tags}
+            {:else if prop.type == rList_property_type.Tags && notEmpty}
                 <Tags
                     class="mt-1"
                     compact

package/operations.svelte

@@ -61,7 +61,8 @@ function update(...args) {
         icon: operationsRoot.icon ?? FaEllipsisV,
         menu: allFlatOperations,
         tbr: operationsRoot.tbr,
-        preAction: operationsRoot.preAction ?? void 0
+        preAction: operationsRoot.preAction ?? void 0,
+        disabled: operationsRoot.disabled
       };
       switch (operationsRoot.tbr) {
         case "A":
@@ -79,6 +80,7 @@ function update(...args) {
       }
     }
     operations.forEach((group) => {
+      let previousOperationGroupName = "";
       if (group.tbr) {
         const expandOperation = {
           caption: group.caption ?? "",
@@ -105,15 +107,32 @@ function update(...args) {
       group.operations.forEach((op) => {
         if (op.tbr) {
           const tbrOperation = {
-            ...op
+            ...op,
+            group: group.caption
           };
           if (op.hideToolbarCaption)
             tbrOperation.caption = "";
+          const shouldAddSeparator = (list, groupName) => {
+            if (!groupName)
+              return false;
+            if (list && list.length > 0) {
+              const last = list[list.length - 1];
+              if (last.group && last.group != groupName) {
+                return true;
+              } else
+                return false;
+            } else
+              return false;
+          };
           switch (op.tbr) {
             case "A":
+              if (shouldAddSeparator(AOperations, tbrOperation.group))
+                AOperations.push({ separator: true });
               AOperations.push(tbrOperation);
               break;
             case "B":
+              if (shouldAddSeparator(BOperations, group.caption))
+                BOperations.push({ separator: true });
               BOperations.push(tbrOperation);
               break;
             case "C":
@@ -205,7 +224,7 @@ function isOperationDisabled(operation) {
                                 on:mousedown={(e) => mousedown(e, operation)}
                                 on:click={(e) => {on_click(e, operation, isDisabled)}}>
                             {#if operation.icon}
-                                <div class="w-5 h-5 mr-1"><svelte:component this={operation.icon}/></div>
+                                <div class="w-4 h-4 mr-1"><svelte:component this={operation.icon}/></div>
                             {/if}
                             {#if operation.caption}
                                 <span class="ml-1">{operation.caption}</span>
@@ -235,7 +254,7 @@ function isOperationDisabled(operation) {
                             on:mousedown={(e) => mousedown(e, operation)}
                             on:click={(e) => {on_click(e, operation, isDisabled)}}>
                         {#if operation.icon}
-                            <div class="w-5 h-5 mr-1"><svelte:component this={operation.icon}/></div>
+                            <div class="w-4 h-4 mr-1"><svelte:component this={operation.icon}/></div>
                         {/if}
                         {#if operation.caption}
                             <span class="ml-1">{operation.caption}</span>
@@ -243,7 +262,7 @@ function isOperationDisabled(operation) {
                     </button>
                 {/if}
             {:else}
-                <div class="border-l py-4"></div>
+                <div class="border border-l my-1.5 mx-2 border-stone-200 dark:border-stone-800"></div>
                 <!--div class="border-l my-2"></div-->
             {/if}
         {/each}
@@ -277,7 +296,7 @@ function isOperationDisabled(operation) {
                         on:mousedown={(e) => mousedown(e, operation)}
                         on:click={(e) => {on_click(e, operation, isDisabled)}}>
                     {#if operation.icon}
-                        <div class="w-5 h-5 mr-1"><svelte:component this={operation.icon}/></div>
+                        <div class="w-4 h-4 mr-1"><svelte:component this={operation.icon}/></div>
                     {/if}
                     {#if operation.caption}
                         <span class="ml-1">{operation.caption}</span>

package/package.json

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