@humandialog/forms.svelte 1.4.3 → 1.4.5

package/components/Fab.svelte

@@ -237,19 +237,20 @@ function operationVisible(operation) {
             {#if operationVisible(operation)}
                 {@const position = calculatePosition(operation)}
                 {#if position}
-                    <button  
-                        class="text-white bg-blue-700/70 hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 
+                    <button
+                        class="text-stone-700 bg-stone-300/70 hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300
                                 font-medium rounded-full text-sm text-center shadow-md
-                                w-[35px] h-[35px] 
-                                fixed m-0  
-                                dark:bg-blue-600/50 dark:hover:bg-blue-700 dark:focus:ring-blue-800
+                                w-[30px] h-[30px]
+                                fixed m-0
+                                dark:text-stone-400
+                                dark:bg-stone-700/50 dark:hover:bg-blue-700 dark:focus:ring-blue-800
                                 flex items-center justify-center
                                 disable-dbl-tap-zoom
                                 cursor-pointer z-40"
                                 style={position}
-                                on:click|stopPropagation={(e) => {on_click(e, operation)}} 
+                                on:click|stopPropagation={(e) => {on_click(e, operation)}}
                                 on:mousedown={mousedown} >
-                    <div class="w-5 h-5"><svelte:component this={operation.icon}/></div>
+                        <div class="w-5 h-5"><svelte:component this={operation.icon}/></div>
                     </button>
                 {/if}
             {/if}
@@ -261,34 +262,34 @@ function operationVisible(operation) {
         {@const topPosition = 350}
         {@const verticalPosition = mainOperation.aboveKeyboard ? `bottom: ${topPosition}px` : "bottom: 10px"}
         <button     id="__hd_fab_mainOperation"
-                    class="text-white bg-blue-700 hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 
+                    class="text-white bg-blue-700 hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300
                         font-medium rounded-full text-sm text-center shadow-md
-                        w-[55px] h-[55px] 
+                        w-[55px] h-[55px]
                         fixed m-0 bottom-0 right-[0px]
                         dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800
                         flex items-center justify-center
                         disable-dbl-tap-zoom"
                         style={verticalPosition}
-                        on:click|stopPropagation={(e) => {on_click(e, mainOperation)}} 
+                        on:click|stopPropagation={(e) => {on_click(e, mainOperation)}}
                         on:mousedown={mousedown} >
             <div class="w-7 h-7"><svelte:component this={mainOperation.icon}/></div>
         </button>
 
         {#if secondaryOperation || isExpandable}
-            
+
             <!-- horizontal container -->
             <div class="flex flex-row m-0 fixed bottom-[10px] right-[60px]">
-            
+
                 {#if isExpandable}
                     <!-- Expander -->
                     <button class=" bg-transparent mr-2
-                                    w-[55px] h-[55px] 
+                                    w-[55px] h-[55px]
                                     flex items-center justify-center
                                     disable-dbl-tap-zoom"
                                     on:click|stopPropagation={toggleExpandToolboxH}
                                     on:mousedown={mousedown}>
                         <div class="    w-10 h-10
-                                        text-white bg-zinc-500 hover:bg-zinc-500 
+                                        text-white bg-zinc-500 hover:bg-zinc-500
                                         font-medium rounded-full text-sm text-center shadow-md
                                         dark:bg-zinc-500 dark:hover:bg-zinc-500
                                         flex items-center justify-center">
@@ -305,13 +306,13 @@ function operationVisible(operation) {
                     {#if hToolboxExpanded}
                         {#if secondaryOperation}
                             <button class="     bg-transparent
-                                                mx-0 mr-2 w-[55px] h-[55px] 
+                                                mx-0 mr-2 w-[55px] h-[55px]
                                                 flex items-center justify-center
                                                 disable-dbl-tap-zoom"
                                                 on:click|stopPropagation={(e) => {on_click(e, secondaryOperation)}}
                                                 on:mousedown={mousedown}>
                                 <div class="    w-10 h-10
-                                                text-white bg-zinc-500 group-hover:bg-zinc-500 
+                                                text-white bg-zinc-500 group-hover:bg-zinc-500
                                                 dark:bg-zinc-500 dark:group-hover:bg-zinc-500
                                                 font-medium rounded-full text-sm text-center shadow-md
                                                 flex items-center justify-center">
@@ -324,13 +325,13 @@ function operationVisible(operation) {
                                 {#if !operation.separator}
                                     <!-- svelte-ignore a11y-click-events-have-key-events -->
                                     <button class=" bg-transparent
-                                                        mx-0 mr-2 w-[55px] h-[55px] 
+                                                        mx-0 mr-2 w-[55px] h-[55px]
                                                         flex items-center justify-center
                                                         disable-dbl-tap-zoom"
                                                         on:click|stopPropagation={(e) => {on_click(e, operation)}}
                                                         on:mousedown={mousedown}>
                                         <div class="    w-10 h-10
-                                                        text-white bg-zinc-500 group-hover:bg-zinc-500 
+                                                        text-white bg-zinc-500 group-hover:bg-zinc-500
                                                         dark:bg-zinc-500 dark:group-hover:bg-zinc-500
                                                         font-medium rounded-full text-sm text-center shadow-md
                                                         flex items-center justify-center">
@@ -344,13 +345,13 @@ function operationVisible(operation) {
                     {/if}
                 {:else}
                     <button class=" bg-transparent
-                                    mx-0 mr-2 w-[55px] h-[55px] 
+                                    mx-0 mr-2 w-[55px] h-[55px]
                                     flex items-center justify-center
                                     disable-dbl-tap-zoom"
                             on:click|stopPropagation={(e) => {on_click(e, secondaryOperation)}}
                             on:mousedown={mousedown}>
                         <div class="    w-10 h-10
-                                        text-white bg-zinc-500 group-hover:bg-zinc-500 
+                                        text-white bg-zinc-500 group-hover:bg-zinc-500
                                         dark:bg-zinc-500 dark:group-hover:bg-zinc-500
                                         font-medium rounded-full text-sm text-center shadow-md
                                         flex items-center justify-center">
@@ -375,15 +376,16 @@ function operationVisible(operation) {
                                 on:mousedown={mousedown}>
                                 {#if operation.caption}
                                     <div>
-                                        <span class="block whitespace-nowrap text-sm mt-3 font-semibold text-white mr-3     select-none bg-stone-700 group-hover:bg-stone-800 px-1 shadow-lg rounded">{operation.caption}</span>
+                                        <span class="block whitespace-nowrap text-sm mt-3 font-semibold text-white mr-3
+                                        select-none bg-stone-700 group-hover:bg-stone-800 px-1 shadow-lg rounded">{operation.caption}</span>
                                     </div>
                                 {/if}
                                 <button class=" bg-transparent
-                                                mx-0 mb-2 w-[55px] h-[55px] 
+                                                mx-0 mb-2 w-[55px] h-[55px]
                                                 flex items-center justify-center
                                                 disable-dbl-tap-zoom">
                                     <div class="    w-10 h-10
-                                                    text-white bg-zinc-500 group-hover:bg-zinc-500 
+                                                    text-white bg-zinc-500 group-hover:bg-zinc-500
                                                     dark:bg-zinc-500 dark:group-hover:bg-zinc-500
                                                     font-medium rounded-full text-sm text-center shadow-md
                                                     flex items-center justify-center">

package/components/contextmenu.svelte

@@ -71,12 +71,12 @@ function calculatePosition(x2, y2, around, visible2, fresh) {
       }
       let yShifted = false;
       if (myRect.bottom > screenRect.bottom) {
-        y2 = screenRect.bottom - myRect.height - m;
+        y2 = screenRect.bottom - myRect.height;
         if (around) {
           if (xShifted)
             x2 -= around.width;
           else
-            y2 -= around.height - m;
+            y2 -= around.height;
         }
         yShifted = true;
       }
@@ -85,7 +85,7 @@ function calculatePosition(x2, y2, around, visible2, fresh) {
       if (myRect.top < screenRect.top)
         y2 = screenRect.top;
     }
-    result = `left:${x2}px; top:${y2}px; display: block`;
+    result = `left:${x2}px; top:${y2}px; display: block; min-width: 15rem`;
   }
   return result;
 }
@@ -144,7 +144,7 @@ export function hide() {
   visible = false;
   css_position = calculatePosition(x, y, around_rect, false, false);
   window.removeEventListener("click", on_before_window_click, true);
-  menu_root.removeEventListener("click", on_before_container_click, true);
+  menu_root?.removeEventListener("click", on_before_container_click, true);
 }
 export function getRenderedRect() {
   if (menu_root)
@@ -188,24 +188,12 @@ function on_keydown(e, operation, index) {
   }
 }
 function navigate_up() {
-  let index = focused_index;
-  while (index > 0 && menu_items.length > 0) {
-    let prev_item = menu_items[--index];
-    if (prev_item) {
-      focus_menu_item(index);
-      break;
-    }
-  }
+  let index = get_this_or_prev_valid_index(focused_index - 1);
+  focus_menu_item(index);
 }
 function navigate_down() {
-  let index = focused_index;
-  while (index + 1 < menu_items.length) {
-    let next_item = menu_items[++index];
-    if (next_item) {
-      focus_menu_item(index);
-      break;
-    }
-  }
+  let index = get_this_or_next_valid_index(focused_index + 1);
+  focus_menu_item(index);
 }
 function on_change_focus(e) {
   if (!isDeviceSmallerThan("sm")) {
@@ -251,11 +239,41 @@ function execute_action(e, operation, index) {
     }
   }
 }
+function get_this_or_next_valid_index(index) {
+  if (!operations)
+    return 0;
+  if (operations.length == 0)
+    return 0;
+  if (index >= operations.length)
+    return operations.length - 1;
+  if (index < 0)
+    return 0;
+  const op = operations[index];
+  if (op.separator || op.disabled)
+    return get_this_or_next_valid_index(index + 1);
+  else
+    return index;
+}
+function get_this_or_prev_valid_index(index) {
+  if (!operations)
+    return 0;
+  if (operations.length == 0)
+    return 0;
+  if (index >= operations.length)
+    return operations.length - 1;
+  if (index < 0)
+    return 0;
+  const op = operations[index];
+  if (op.separator || op.disabled)
+    return get_this_or_prev_valid_index(index - 1);
+  else
+    return index;
+}
 function focus_menu_item(index) {
   const operation = operations[index];
   if (operation.disabled)
     return;
-  focused_index = index;
+  focused_index = get_this_or_next_valid_index(index);
   let element = menu_items[focused_index];
   element.focus();
   if (submenus && submenus.length) {
@@ -306,11 +324,11 @@ function calculateBackground(is_highlighted, active) {
 }
 </script>
 
-<div id="__hd_svelte_contextmenu" 
-    class=" bg-white dark:bg-stone-800 
-            text-stone-800 dark:text-stone-400 rounded-lg border 
-            border-stone-200 dark:border-stone-700 shadow-md 
-            z-30 fixed min-w-[{min_width_px}px] w-max overflow-y-auto" 
+<div id="__hd_svelte_contextmenu"
+    class=" bg-white dark:bg-stone-800
+            text-stone-800 dark:text-stone-400 rounded-lg border
+            border-stone-200 dark:border-stone-700 shadow-md
+            z-30 fixed min-w-60 max-h-screen overflow-y-auto"
     style={css_position}
     bind:this={menu_root}>
 
@@ -332,17 +350,17 @@ function calculateBackground(is_highlighted, active) {
             {@const clipFocusedBorder = isFocused ? (isTop ? 'rounded-t-lg' : (isBottom ? 'rounded-b-lg' : '')) : ''}
             {@const active = calculateBackground(isFocused, false)}
             {@const has_submenu = operation.menu !== undefined && operation.menu.length > 0}
-            
+
             <button class="block  w-full pr-4 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(e, operation, index) } } 
+                    on:click|stopPropagation={(e) => { execute_action(e, operation, index) } }
                     on:mouseenter = {(e) => {on_mouse_move(index)}}
                     on:keydown|stopPropagation={(e) => on_keydown(e, operation, index)}
                     on:mousedown={mousedown}
                     disabled={operation.disabled}
                     class:opacity-60={operation.disabled}>
-                    
+
                 <div class="flex items-center justify-center space-x-10 px-4 py-2 ml-12 sm:ml-0" >
                     {#if operation.icon}
                         {@const cc = mobile ? 7 : 6}

package/components/document/editor.svelte

@@ -181,8 +181,8 @@ let appearance_class;
 if (compact)
   appearance_class = "";
 else
-  appearance_class = `bg-stone-50 border border-stone-300 rounded-md 
-                            dark:bg-stone-700 dark:border-stone-600 
+  appearance_class = `bg-stone-50 border border-stone-300 rounded-md
+                            dark:bg-stone-700 dark:border-stone-600
                             px-2.5`;
 let last_tick = -1;
 let lockNextBlurCallbacks = 0;
@@ -587,9 +587,9 @@ onMount(() => {
       TableCell,
       // custom
       CodeBlock,
-      CommentBlock,
-      WarningBlock,
-      InfoBlock,
+      //CommentBlock,
+      //WarningBlock,
+      //InfoBlock,
       QuoteBlock,
       Bold,
       Code,
@@ -675,6 +675,7 @@ export function save() {
   if (saveData()) {
     last_tick = $data_tick_store + 1;
     $data_tick_store = last_tick;
+    refreshToolbarOperations();
   }
 }
 function saveData() {
@@ -988,6 +989,9 @@ export function preventBlur() {
   if (editor.isFocused)
     lockNextBlurCallbacks++;
 }
+export function hasChanged() {
+  return hasChangedValue;
+}
 const paletteMarksCommands = [
   { caption: "Bold", description: "Marks text as bolded", tags: "strong", icon: FaBold, on_choice: makeBold, is_active: () => editor?.isActive("bold") },
   { caption: "Italic", description: "Marks text as italic", tags: "strong", icon: FaItalic, on_choice: makeItalic, is_active: () => editor?.isActive("italic") },
@@ -1031,30 +1035,15 @@ const paletteStylesCommands = [
     else
       editor.chain().focus().setCodeBlock().run();
   }, is_active: () => editor?.isActive("CodeBlock") },
-  { caption: "Comment", description: "With this you can comment the above paragraph", icon: FaComment, on_choice: (range) => {
-    if (range)
-      editor.chain().focus().deleteRange(range).setAsComment().run();
-    else
-      editor.chain().focus().setAsComment().run();
-  }, is_active: () => editor?.isActive("CommentBlock") },
+  //    {   caption: 'Comment',      description: 'With this you can comment the above paragraph',   icon: FaComment,                    on_choice: (range) => { if(range) editor.chain().focus().deleteRange(range).setAsComment().run(); else editor.chain().focus().setAsComment().run() }, is_active: () => editor?.isActive('CommentBlock')  } ,
   { caption: "Quote", description: "To quote someone", icon: FaQuoteRight, on_choice: (range) => {
     if (range)
       editor.chain().focus().deleteRange(range).setAsQuote().run();
     else
       editor.chain().focus().setAsQuote().run();
   }, is_active: () => editor?.isActive("QuoteBlock") },
-  { caption: "Warning", description: "An important warning to above paragraph", icon: FaExclamationTriangle, on_choice: (range) => {
-    if (range)
-      editor.chain().focus().deleteRange(range).setAsWarning().run();
-    else
-      editor.chain().focus().setAsWarning().run();
-  }, is_active: () => editor?.isActive("WarningBlock") },
-  { caption: "Info", description: "An important info about above paragraph", icon: FaInfo, on_choice: (range) => {
-    if (range)
-      editor.chain().focus().deleteRange(range).setAsInfo().run();
-    else
-      editor.chain().focus().setAsInfo().run();
-  }, is_active: () => editor?.isActive("InfoBlock") },
+  //    {   caption: 'Warning',      description: 'An important warning to above paragraph',         icon: FaExclamationTriangle,        on_choice: (range) => { if(range) editor.chain().focus().deleteRange(range).setAsWarning().run(); else editor.chain().focus().setAsWarning().run() }, is_active: () => editor?.isActive('WarningBlock')  } ,
+  //    {   caption: 'Info',         description: 'An important info about above paragraph',         icon: FaInfo,                       on_choice: (range) => { if(range) editor.chain().focus().deleteRange(range).setAsInfo().run(); else editor.chain().focus().setAsInfo().run() }, is_active: () => editor?.isActive('InfoBlock')  },
   { caption: "Bullet list", description: "Unordered list of items", icon: FaListUl, on_choice: (range) => {
     if (range)
       editor.chain().focus().deleteRange(range).toggleBulletList().run();
@@ -1202,18 +1191,18 @@ function getPaletteCommands() {
 
 <div bind:this={editorElement} />
 
-<Palette    commands={getPaletteCommands()} 
-            bind:this={palette} 
+<Palette    commands={getPaletteCommands()}
+            bind:this={palette}
             on:palette_shown={on_palette_shown}
             on:palette_hidden={on_palette_hidden}
             on:palette_mouse_click={on_palette_mouse_click}/>
 
-<!--div    contenteditable="true" 
+<!--div    contenteditable="true"
         bind:this={editorElement}
         on:keyup={on_keyup}
         on:keydown={on_keydown}
         on:mouseup={on_mouseup}
-        class="{cs}     {appearance_class} 
+        class="{cs}     {appearance_class}
                         prose prose-base sm:prose-base dark:prose-invert {additional_class} overflow-y-auto whitespace-pre-wrap"
         on:blur={on_blur}
         on:focus={on_focus}

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

@@ -79,6 +79,7 @@ declare const __propDef: {
         isActiveTable?: (() => void) | undefined;
         isActiveHorizontalRule?: (() => boolean) | undefined;
         preventBlur?: (() => void) | undefined;
+        hasChanged?: (() => boolean) | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -147,5 +148,6 @@ export default class Editor extends SvelteComponentTyped<EditorProps, EditorEven
     get isActiveTable(): () => void;
     get isActiveHorizontalRule(): () => boolean;
     get preventBlur(): () => void;
+    get hasChanged(): () => boolean;
 }
 export {};

package/operations.svelte

@@ -40,7 +40,7 @@ function update(...args) {
       }
     });
     leftOperations = [...AOperations, ...BOperations];
-    rightOperations = [...COperations];
+    rightOperations = COperations.toReversed();
   } else if (opVer == 2) {
     if (operationsRoot && operationsRoot.tbr) {
       let allFlatOperations = [];
@@ -57,7 +57,8 @@ function update(...args) {
         caption: operationsRoot.caption ?? "",
         icon: operationsRoot.icon ?? FaEllipsisV,
         menu: allFlatOperations,
-        tbr: operationsRoot.tbr
+        tbr: operationsRoot.tbr,
+        preAction: operationsRoot.preAction ?? void 0
       };
       switch (operationsRoot.tbr) {
         case "A":
@@ -114,16 +115,21 @@ function update(...args) {
       });
     });
     leftOperations = [...AOperations, ...BOperations];
-    rightOperations = [...COperations];
+    rightOperations = COperations.toReversed();
   } else {
     leftOperations = operations.filter((o) => !o.right);
     rightOperations = operations.filter((o) => o.right == true);
   }
   hasOperations = leftOperations.length > 0 || rightOperations.length > 0;
 }
-function on_click(e, operation) {
+function on_click(e, operation, isDisabled) {
   if (!operation)
     return;
+  if (isDisabled) {
+    e.preventDefault();
+    e.stopPropagation();
+    return;
+  }
   let owner = e.target;
   while (owner && owner.tagName != "BUTTON")
     owner = owner.parentElement;
@@ -143,8 +149,9 @@ function on_click(e, operation) {
   else if (operation.grid)
     showGridMenu(rect, operation.grid);
 }
-function mousedown(e) {
+function mousedown(e, operation) {
   e.preventDefault();
+  e.stopPropagation();
 }
 function isOperationActivated(operation) {
   if (operation.activeFunc)
@@ -152,29 +159,38 @@ function isOperationActivated(operation) {
   else
     return operation.active ?? false;
 }
+function isOperationDisabled(operation) {
+  if (operation.disabledFunc)
+    return operation.disabledFunc();
+  else
+    return operation.disabled ?? false;
+}
 </script>
 
 {#if hasOperations}
-<section class="flex flex-row no-print h-10 bg-stone-50 dark:bg-stone-950 overflow-x-clip overflow-y-hidden py-0 text-xs whitespace-nowrap">
+<section class="flex flex-row no-print h-10 bg-stone-50 dark:bg-stone-950 overflow-x-hidden overflow-y-clip py-0 text-xs whitespace-nowrap">
     <div    class="flex flex-row"
             class:flex-row-reverse={mobile}>
-        
+
         {#each leftOperations as operation}
             {#if !operation.separator}
                 {@const isActive=isOperationActivated(operation)}
+                {@const isDisabled=isOperationDisabled(operation)}
                 {#if operation.toolbox}
                     {#each operation.toolbox as operation}
-                        <button type="button" 
-                                class="py-2.5 px-4 
-                                text-sm font-thin 
-                                text-stone-800 hover:bg-stone-700 active:bg-stone-300 border-stone-200
-                                dark:text-stone-300 dark:hover:text-white dark:hover:bg-stone-800 dark:active:bg-stone-600 dark:border-stone-600
-                                focus:outline-none 
+                        {@const textColor= isDisabled ? 'text-stone-600 dark:text-stone-500' : 'text-stone-800 dark:text-stone-300 dark:hover:text-white '}
+                        <button type="button"
+                                class="py-2.5 px-1
+                                text-xs font-thin
+                                {textColor}
+                                hover:bg-stone-700 active:bg-stone-300 border-stone-200
+                                dark:hover:bg-stone-800 dark:active:bg-stone-600 dark:border-stone-600
+                                focus:outline-none
                                 inline-flex items-center"
                                 class:bg-stone-700={isActive}
                                 class:dark:bg-stone-800={isActive}
-                                on:click={(e) => {on_click(e, operation)}}
-                                on:mousedown={mousedown}>
+                                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>
                             {/if}
@@ -184,18 +200,27 @@ function isOperationActivated(operation) {
                         </button>
                     {/each}
                 {:else}
-                
-                    <button type="button" 
-                            class="py-2.5 px-4
-                            text-sm font-thin 
-                            text-stone-600 hover:text-stone-800 hover:bg-stone-200 active:bg-stone-200 border-stone-200
-                            dark:text-stone-300 dark:hover:text-white dark:hover:bg-stone-800 dark:active:bg-stone-600 dark:border-stone-600
-                            focus:outline-none 
-                            inline-flex items-center"
+                    {@const enabledLightColors ='text-stone-600 hover:text-stone-800 hover:bg-stone-200 active:bg-stone-200 border-stone-200'}
+                    {@const disabledLightColors ='text-stone-400 border-stone-200'}
+
+                    {@const enabledDarkColors ='dark:text-stone-300 dark:hover:text-white dark:hover:bg-stone-800 dark:active:bg-stone-600 dark:border-stone-600'}
+                    {@const disabledDarkColors ='dark:text-stone-500 dark:border-stone-600'}
+                    
+                    {@const disabledColors =`${disabledLightColors} ${disabledDarkColors}`}
+                    {@const enabledColors =`${enabledLightColors} ${enabledDarkColors}`}
+                    {@const colors = isDisabled ? disabledColors : enabledColors}
+
+                    <button type="button"
+                            class="py-2.5 px-2
+                            text-xs font-thin
+                            focus:outline-none
+                            inline-flex items-center
+                            {colors}"
                             class:bg-stone-700={isActive}
                             class:dark:bg-stone-800={isActive}
-                            on:click={(e) => {on_click(e, operation)}}
-                            on:mousedown={mousedown}>
+                            disabled={isDisabled}
+                            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>
                         {/if}
@@ -203,8 +228,9 @@ function isOperationActivated(operation) {
                             <span class="ml-1">{operation.caption}</span>
                         {/if}
                     </button>
-                {/if} 
+                {/if}
             {:else}
+                <div class="border-l py-4"></div>
                 <!--div class="border-l my-2"></div-->
             {/if}
         {/each}
@@ -214,24 +240,36 @@ function isOperationActivated(operation) {
         {#each rightOperations as operation}
             {#if !operation.separator}
             {@const isActive=isOperationActivated(operation)}
-                <button type="button" 
-                        class="py-2.5 px-4 
-                        text-sm font-thin 
-                        text-stone-600 hover:text-stone-800 hover:bg-stone-200 active:bg-stone-200 border-stone-200
-                        dark:text-stone-300 dark:hover:text-white dark:hover:bg-stone-800 dark:active:bg-stone-600 dark:border-stone-600
-                        focus:outline-none 
+            {@const isDisabled=isOperationDisabled(operation)}
+
+            {@const enabledLightColors ='text-stone-600 hover:text-stone-800 hover:bg-stone-200 active:bg-stone-200 border-stone-200'}
+            {@const disabledLightColors ='text-stone-400 border-stone-200'}
+
+            {@const enabledDarkColors ='dark:text-stone-300 dark:hover:text-white dark:hover:bg-stone-800 dark:active:bg-stone-600 dark:border-stone-600'}
+            {@const disabledDarkColors ='dark:text-stone-500 dark:border-stone-600'}
+            
+            {@const disabledColors =`${disabledLightColors} ${disabledDarkColors}`}
+            {@const enabledColors =`${enabledLightColors} ${enabledDarkColors}`}
+            {@const colors = isDisabled ? disabledColors : enabledColors}
+
+                <button type="button"
+                        class="py-2.5 px-4
+                        text-xs font-thin
+                        {colors}
+                        focus:outline-none
                         inline-flex items-center"
                         class:bg-stone-700={isActive}
                         class:dark:bg-stone-800={isActive}
-                        on:click={(e) => {on_click(e, operation)}}
-                        on:mousedown={mousedown}>
+                        disabled={isDisabled}
+                        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>
                     {/if}
                     {#if operation.caption}
                         <span class="ml-1">{operation.caption}</span>
                     {/if}
-                </button>    
+                </button>
             {/if}
         {/each}
     </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@humandialog/forms.svelte",
-  "version": "1.4.3",
+  "version": "1.4.5",
   "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.8",
+    "@humandialog/auth.svelte": "^1.8.10",
     "@tiptap/core": "^2.11.0",
     "@tiptap/extension-bullet-list": "^2.11.5",
     "@tiptap/extension-code-block": "^2.11.5",