@humandialog/forms.svelte 1.4.4 → 1.4.5

package/components/Fab.svelte

@@ -238,18 +238,19 @@ function 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
+                        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]
+                                w-[30px] h-[30px]
                                 fixed m-0
-                                dark:bg-blue-600/50 dark:hover:bg-blue-700 dark:focus:ring-blue-800
+                                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: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}
@@ -375,7 +376,8 @@ 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

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) {
@@ -310,7 +328,7 @@ function calculateBackground(is_highlighted, active) {
     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"
+            z-30 fixed min-w-60 max-h-screen overflow-y-auto"
     style={css_position}
     bind:this={menu_root}>
 

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

@@ -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":
@@ -121,9 +122,14 @@ function update(...args) {
   }
   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}
+                        {@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-4
+                                class="py-2.5 px-1
                                 text-xs 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
+                                {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}
+                    {@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
+                            class="py-2.5 px-2
                             text-xs 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"
+                            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}
@@ -205,6 +230,7 @@ function isOperationActivated(operation) {
                     </button>
                 {/if}
             {:else}
+                <div class="border-l py-4"></div>
                 <!--div class="border-l my-2"></div-->
             {/if}
         {/each}
@@ -214,17 +240,29 @@ function isOperationActivated(operation) {
         {#each rightOperations as operation}
             {#if !operation.separator}
             {@const isActive=isOperationActivated(operation)}
+            {@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
-                        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
+                        {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}

package/package.json

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