@humandialog/forms.svelte 1.7.8 → 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/components/list/internal/list.element.svelte

@@ -19,7 +19,7 @@ import Icon from "../../icon.svelte";
 import Spinner from "../../delayed.spinner.svelte";
 import { rList_definition, rList_property_type } from "../List";
 import { push, link } from "svelte-spa-router";
-import { FaExternalLinkAlt, FaRegSquare, FaRegCheckSquare } from "svelte-icons/fa/";
+import { FaExternalLinkAlt, FaRegCircle, FaRegCheckCircle } from "svelte-icons/fa/";
 import Tags from "../../tags.svelte";
 import { ext } from "../../../i18n";
 export let item;
@@ -299,7 +299,7 @@ async function onDownloadFile(e) {
             bind:this={rootElement}> <!--  on:contextmenu={on_contextmenu} -->
 
     {#if multiselect}
-        {@const icon=is_row_active ? FaRegCheckSquare : FaRegSquare}
+        {@const icon=is_row_active ? FaRegCheckCircle : FaRegCircle}
          <Icon  component={icon} 
                 class="flex-none h-4 w-4 text-stone-500 dark:text-stone-400 cursor-pointer mt-1 ml-2 mr-3 "
                 on:click={onToggleMultiSelect}/>

package/components/list/list.svelte

@@ -2,7 +2,7 @@
 import { data_tick_store, contextItemsStore, contextTypesStore } from "../../stores";
 import { activateItem, getActive, clearActiveItem, parseWidthDirective, getPrev, getNext, swapElements, getLast, insertAfter, getActiveCount, addActiveItem } from "../../utils";
 import Icon from "../icon.svelte";
-import { FaRegSquare, FaRegCheckSquare } from "svelte-icons/fa/";
+import { FaRegCircle, FaRegCheckCircle } from "svelte-icons/fa/";
 import { rList_definition } from "./List";
 import List_element from "./internal/list.element.svelte";
 import Inserter from "./internal/list.inserter.svelte";
@@ -348,7 +348,7 @@ export function toggleSelectAll(e) {
 
     {#if items && items.length > 0 }
         {#if false && multiselect}
-            {@const icon = (multiselectionMode == SELECT_ALL) ? FaRegSquare : FaRegCheckSquare}
+            {@const icon = (multiselectionMode == SELECT_ALL) ? FaRegCircle : FaRegCheckCircle}
             <Icon component={icon} class="h-5 w-5 sm:h-4 sm:w-4 text-stone-500 dark:text-stone-400 cursor-pointer mt-2 sm:mt-1.5 ml-2 mr-3"
                     on:click={toggleSelectAll}/>
         {/if}

package/operations.svelte

@@ -31,16 +31,19 @@ function update(...args) {
   let AOperations = [];
   let BOperations = [];
   let COperations = [];
+  let DOperations = [];
   if (opVer == 1) {
     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")];
+        DOperations = [...DOperations, ...group.operations.filter((o) => o.tbr == "D")];
       }
     });
     leftOperations = [...AOperations, ...BOperations];
     rightOperations = COperations.toReversed();
+    rightOperations = [...rightOperations, ...DOperations.toReversed()];
   } else if (opVer == 2) {
     if (operationsRoot && operationsRoot.tbr) {
       let allFlatOperations = [];
@@ -58,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":
@@ -70,9 +74,13 @@ function update(...args) {
         case "C":
           COperations.push(allOperationsMenu);
           break;
+        case "D":
+          DOperations.push(allOperationsMenu);
+          break;
       }
     }
     operations.forEach((group) => {
+      let previousOperationGroupName = "";
       if (group.tbr) {
         const expandOperation = {
           caption: group.caption ?? "",
@@ -91,31 +99,55 @@ function update(...args) {
           case "C":
             COperations.push(expandOperation);
             break;
+          case "D":
+            DOperations.push(expandOperation);
+            break;
         }
       }
       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":
               COperations.push(tbrOperation);
               break;
+            case "D":
+              DOperations.push(tbrOperation);
+              break;
           }
         }
       });
     });
     leftOperations = [...AOperations, ...BOperations];
     rightOperations = COperations.toReversed();
+    rightOperations = [...rightOperations, ...DOperations.toReversed()];
   } else {
     leftOperations = operations.filter((o) => !o.right);
     rightOperations = operations.filter((o) => o.right == true);
@@ -192,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>
@@ -222,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>
@@ -230,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}
@@ -264,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.8",
+  "version": "1.7.10",
   "description": "Basic Svelte UI components for Object Reef applications",
   "devDependencies": {
     "@playwright/test": "^1.28.1",