@humandialog/forms.svelte 1.4.6 → 1.4.8

package/components/contextmenu.svelte

@@ -18,6 +18,7 @@ let menu_items = [];
 let submenus = [];
 let around_rect;
 let css_position = "";
+let closeButtonPos = "";
 $:
   display = visible ? "block" : "none";
 function calculatePosition(x2, y2, around, visible2, fresh) {
@@ -53,6 +54,7 @@ function calculatePosition(x2, y2, around, visible2, fresh) {
       y2 = screenRect.bottom - maxHeight - margin;
       result = `left: ${x2}px; top: ${y2}px; width: ${width}px; max-height: ${maxHeight}px; display: block`;
     }
+    closeButtonPos = `right: ${margin}px; top: calc(${y2}px - 1.75rem)`;
   } else {
     let myRect = null;
     if (!fresh) {
@@ -86,6 +88,7 @@ function calculatePosition(x2, y2, around, visible2, fresh) {
         y2 = screenRect.top;
     }
     result = `left:${x2}px; top:${y2}px; display: block; min-width: 15rem`;
+    closeButtonPos = "";
   }
   return result;
 }
@@ -108,7 +111,7 @@ export async function show(around, _operations) {
     hide_window_indicator = 0;
     window.addEventListener("click", on_before_window_click, true);
   }
-  if (isDeviceSmallerThan("sm")) {
+  if (false) {
     pushToolsActionsOperations({
       opver: 1,
       operations: [
@@ -139,7 +142,7 @@ export function isVisible() {
   return visible;
 }
 export function hide() {
-  if (visible)
+  if (false)
     popToolsActionsOperations();
   visible = false;
   css_position = calculatePosition(x, y, around_rect, false, false);
@@ -324,14 +327,27 @@ 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-60 max-h-screen overflow-y-auto"
+            z-40 fixed min-w-60 max-h-screen overflow-y-auto"
     style={css_position}
     bind:this={menu_root}>
 
+    {#if closeButtonPos}
+        <button class="     fixed w-6 h-6 flex items-center justify-center
+                            text-stone-500 bg-stone-200/70 hover:bg-stone-200
+                            focus:outline-none font-medium rounded-full text-sm text-center
+                            dark:text-stone-500 dark:bg-stone-700/80 dark:hover:bg-stone-700 
+                            focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800" 
+                style={closeButtonPos}
+                on:click={ hide }>
+            <Icon component={FaTimes} s="md"/>
+        </button>
+    {/if}
+
     {#each operations as operation, index}
         {@const is_separator = operation.separator}
         {#if is_separator}
@@ -365,14 +381,14 @@ function calculateBackground(is_highlighted, active) {
                     {#if operation.icon}
                         {@const cc = mobile ? 7 : 6}
                         {@const icon_size = icon_placeholder_size - cc}
-                        <Icon size={icon_size} component={operation.icon}/>
+                        <Icon s="md" component={operation.icon}/>
                     {:else}
                         {@const cc = mobile ? 7 : 6}
                         {@const icon_size = icon_placeholder_size - cc}
-                        <div style="width: {icon_size*0.25}rem; height: {icon_size*0.25}rem;"></div>
+                        <div class="w-4 h-4"></div>
                     {/if}
                 </div>
-                <div class="">
+                <div class="flex items-center ">
                     <p> {operation.caption}</p>
                     {#if operation.description}
                         {@const shortcut_width_px = operation.shortcut ? 80 : 0}

package/components/document/editor.svelte

@@ -62,7 +62,8 @@ export let a = "";
 export let context = "";
 export let typename = "";
 export let compact = false;
-export let onChange = void 0;
+export let onSingleChange = void 0;
+export let onApplyChanges = void 0;
 export let onFocusCb = void 0;
 export let onBlurCb = void 0;
 export let onAddImage = void 0;
@@ -612,6 +613,10 @@ onMount(() => {
       if (wasContentChanged) {
         hasChangedValue = true;
         changedValue = editor2.getHTML();
+        if (onSingleChange)
+          onSingleChange(changedValue);
+        else
+          logChanges();
         handleImagesChanges(transaction);
       }
       refreshToolbarOperations();
@@ -671,32 +676,34 @@ function on_blur() {
     $data_tick_store = last_tick;
   }
 }
-export function save() {
+export async function save() {
   if (saveData()) {
     last_tick = $data_tick_store + 1;
     $data_tick_store = last_tick;
-    refreshToolbarOperations();
   }
 }
 function saveData() {
   if (!hasChangedValue)
     return false;
   hasChangedValue = false;
-  if (onChange) {
-    onChange(changedValue);
+  if (onApplyChanges) {
+    onApplyChanges(changedValue);
     return true;
   } else if (item && a) {
-    item[a] = changedValue;
-    if (typename)
-      informModification(item, a, typename);
-    else
-      informModification(item, a);
+    logChanges();
     if (pushChangesImmediately)
-      pushChanges();
+      pushChanges(refreshToolbarOperations);
     return true;
   }
   return false;
 }
+function logChanges() {
+  item[a] = changedValue;
+  if (typename)
+    informModification(item, a, typename);
+  else
+    informModification(item, a);
+}
 let palette = null;
 let is_command_palette_visible = false;
 function get_selection_bbox() {
@@ -717,7 +724,7 @@ function on_palette_mouse_click() {
 }
 function on_palette_shown() {
   is_command_palette_visible = true;
-  if (isDeviceSmallerThan("sm")) {
+  if (false) {
     pushToolsActionsOperations({
       opver: 1,
       operations: [
@@ -740,8 +747,9 @@ function on_palette_shown() {
   }
 }
 function on_palette_hidden() {
-  if (is_command_palette_visible)
+  if (false)
     popToolsActionsOperations();
+  editor?.commands.focus();
   is_command_palette_visible = false;
 }
 function show_command_palette(cursor_rect) {
@@ -958,6 +966,18 @@ export function isActiveNormal() {
 export function isActiveHeading(level) {
   return editor?.isActive("heading", { level });
 }
+export function isActiveH1() {
+  return editor?.isActive("heading", { level: 1 });
+}
+export function isActiveH2() {
+  return editor?.isActive("heading", { level: 2 });
+}
+export function isActiveH3() {
+  return editor?.isActive("heading", { level: 3 });
+}
+export function isActiveH4() {
+  return editor?.isActive("heading", { level: 4 });
+}
 export function isActiveCode() {
   return editor?.isActive("CodeBlock");
 }

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

@@ -9,7 +9,8 @@ declare const __propDef: {
         context?: string | undefined;
         typename?: string | undefined;
         compact?: boolean | undefined;
-        onChange?: undefined;
+        onSingleChange?: Function | undefined;
+        onApplyChanges?: Function | undefined;
         onFocusCb?: undefined;
         onBlurCb?: undefined;
         onAddImage?: undefined;
@@ -42,7 +43,7 @@ declare const __propDef: {
             tbr: string;
         }) | undefined;
         scrollIntoView?: ((param: any) => void) | undefined;
-        save?: (() => void) | undefined;
+        save?: (() => Promise<void>) | undefined;
         addTemporaryImage?: ((src: any) => void) | undefined;
         replaceTemporaryImage?: ((temporarySrc: any, dataPath: any) => void) | undefined;
         removeTemporaryImage?: ((temporarySrc: any) => void) | undefined;
@@ -69,6 +70,10 @@ declare const __propDef: {
         isActiveStrikethrough?: (() => any) | undefined;
         isActiveNormal?: (() => any) | undefined;
         isActiveHeading?: ((level: any) => any) | undefined;
+        isActiveH1?: (() => any) | undefined;
+        isActiveH2?: (() => any) | undefined;
+        isActiveH3?: (() => any) | undefined;
+        isActiveH4?: (() => any) | undefined;
         isActiveCode?: (() => any) | undefined;
         isActiveComment?: (() => any) | undefined;
         isActiveQuote?: (() => any) | undefined;
@@ -111,7 +116,7 @@ export default class Editor extends SvelteComponentTyped<EditorProps, EditorEven
         tbr: string;
     };
     get scrollIntoView(): (param: any) => void;
-    get save(): () => void;
+    get save(): () => Promise<void>;
     get addTemporaryImage(): (src: any) => void;
     get replaceTemporaryImage(): (temporarySrc: any, dataPath: any) => void;
     get removeTemporaryImage(): (temporarySrc: any) => void;
@@ -138,6 +143,10 @@ export default class Editor extends SvelteComponentTyped<EditorProps, EditorEven
     get isActiveStrikethrough(): () => any;
     get isActiveNormal(): () => any;
     get isActiveHeading(): (level: any) => any;
+    get isActiveH1(): () => any;
+    get isActiveH2(): () => any;
+    get isActiveH3(): () => any;
+    get isActiveH4(): () => any;
     get isActiveCode(): () => any;
     get isActiveComment(): () => any;
     get isActiveQuote(): () => any;

package/components/document/internal/palette.row.svelte

@@ -5,8 +5,6 @@ export let cmd;
 export let width_px = 400;
 export let is_highlighted = false;
 export let active = false;
-let icon_size = cmd.icon_size ? cmd.icon_size : 4;
-let icon_placeholder_size = icon_size + 4;
 let cl = $$props.class ?? "";
 $:
   active_class = calculateBackground(is_highlighted, active);
@@ -40,7 +38,7 @@ export function scrollToView() {
      bind:this={element}>
     <div class="flex items-center justify-center space-x-10 px-4 py-2 ml-12 sm:ml-0" >
         {#if cmd.icon}
-            <Icon size={icon_size} component={cmd.icon}/>
+            <Icon s="md" component={cmd.icon}/>
         {/if}
     </div>
     

package/components/document/internal/palette.svelte

@@ -4,6 +4,7 @@ import Pallete_row from "./palette.row.svelte";
 import { createEventDispatcher } from "svelte";
 import Icon from "../../icon.svelte";
 import { isDeviceSmallerThan, UI } from "../../../utils.js";
+import { FaTimes } from "svelte-icons/fa";
 export let commands;
 export let width_px = 400;
 export let max_height_px = 500;
@@ -27,7 +28,7 @@ export function showAsToolbox(rect) {
   toolboxX = margin;
   toolboxY = rect.bottom + margin;
   toolboxY += window.scrollY;
-  css_style = `position: fixed; left:${toolboxX}px; top:${toolboxY}px;`;
+  css_style = `left:${toolboxX}px; top:${toolboxY}px;`;
   console.log("toolbox: ", css_style);
   dispatch("palette_shown");
 }
@@ -48,19 +49,26 @@ afterUpdate(
     }
   }
 );
+let closeButtonPos = "";
 export function show(x, y, up = false) {
   isToolbox = false;
-  css_style = `width: ${width_px}px; max-height:${max_height_px}px; position: fixed; left:${x}px; top:${y}px;`;
+  css_style = `width: ${width_px}px; max-height:${max_height_px}px; left:${x}px; top:${y}px;`;
   if (up)
     css_style += " transform: translate(0, -100%);";
   visible = true;
   dispatch("palette_shown");
+  closeButtonPos = "";
+  setTimeout(() => {
+    const rect = paletteElement.getBoundingClientRect();
+    closeButtonPos = `right: ${15}px; top: calc(${rect.y}px - 1.75rem)`;
+  }, 0);
+  console.trace();
 }
 export function show_fullscreen(_width_px, _height_px) {
   isToolbox = false;
   width_px = _width_px;
   max_height_px = _height_px;
-  css_style = `position: fixed; left: 0px; top: 0px; width: ${_width_px}px; height: ${_height_px}px; z-index: 1055;`;
+  css_style = `left: 0px; top: 0px; width: ${_width_px}px; height: ${_height_px}px; z-index: 1055;`;
   visible = true;
   dispatch("palette_shown");
 }
@@ -231,7 +239,7 @@ function mousemove(e) {
     const touch = e.touches.item(0);
     const trackDelta = new DOMPoint(touch.clientX - beforeTrackingClient.x, touch.clientY - beforeTrackingClient.y);
     toolboxX = beforeTrackingPos.x + trackDelta.x;
-    css_style = `position: fixed; left:${toolboxX}px; top:${toolboxY}px;`;
+    css_style = `left:${toolboxX}px; top:${toolboxY}px;`;
     e.stopPropagation();
   }
 }
@@ -250,8 +258,8 @@ function isRowActive(cmd) {
 
 {#if isToolbox}
     <menu   class="  bg-white dark:bg-stone-800 text-stone-500 dark:text-stone-400 rounded-lg border border-stone-200 dark:border-stone-700 shadow-md 
-                    z-30
-                    flex flex-row flex-nowrap"
+                    z-40
+                    flex flex-row flex-nowrap fixed"
             style={css_style}
             hidden={!visible}
             on:touchstart={mousedown}
@@ -278,7 +286,7 @@ function isRowActive(cmd) {
                                 {@const cc = mobile ? 7 : 6}
                                 {@const default_icon_size = icon_placeholder_size - cc}
                                 {@const icon_size = cmd.icon_size ? cmd.icon_size : default_icon_size}
-                                <Icon size={icon_size} component={cmd.icon}/>
+                                <Icon s="md" component={cmd.icon}/>
                             {/if}
                         </div>
                     </button>
@@ -287,37 +295,56 @@ function isRowActive(cmd) {
         {/if}
     </menu>
 {:else}
-    <div    class="bg-white dark:bg-stone-800 text-stone-500 dark:text-stone-400 rounded-lg border border-stone-200 dark:border-stone-700 shadow-md overflow-y-auto z-20"
-            id="__hd_FormattingPalette"
-            bind:this={paletteElement}
-            hidden={!visible}
-            style={css_style} >
-        
-        {#if filtered_commands && filtered_commands.length}
-            {#each filtered_commands as cmd, idx (cmd.caption)}
-                {#if cmd.separator}
-                    {#if idx>0 && idx<filtered_commands.length-1}   <!-- not first or last place -->
-                        <hr class="mx-4 my-1 border-stone-300 dark:border-stone-700"/>
-                    {/if}
-                {:else}
-                    {@const id = "cpi_" + idx}
-                    {@const active=isRowActive(cmd)}
-                    <Pallete_row    {id}
-                                    cmd={cmd}
-                                    is_highlighted={cmd == current_command}
-                                    on:click={ () => { execute_mouse_click(cmd.on_choice); }}
-                                    on:mousemove={ () => { on_mouse_over(cmd); }}
-                                    on:mousedown={buttonMousedown}
-                                    bind:this={rows[idx]}
-                                    {active}
-                                    />
-                {/if}
-            {/each}
-        {:else}
-            <p class="text-sm text-stone-500">No results</p>
+    <!--div hidden={!visible}-->
+
+        {#if visible &&  closeButtonPos}
+            {#key closeButtonPos}
+                <button class="     fixed w-6 h-6 flex items-center justify-center
+                                    text-stone-500 bg-stone-200/70 hover:bg-stone-200
+                                    focus:outline-none font-medium rounded-full text-sm text-center
+                                    dark:text-stone-500 dark:bg-stone-700/80 dark:hover:bg-stone-700 
+                                    focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800" 
+                        style={closeButtonPos}
+                        on:mousedown={buttonMousedown}
+                        on:click={ () => hide() }>
+                    <Icon component={FaTimes} s="md"/>
+                </button>
+            {/key}
         {/if}
+    
+        <div    hidden={!visible}
+                class="bg-white dark:bg-stone-800 text-stone-500 dark:text-stone-400 rounded-lg border border-stone-200 dark:border-stone-700 shadow-md overflow-y-auto z-40 fixed"
+                id="__hd_FormattingPalette"
+                bind:this={paletteElement}
+                style={css_style} >
 
-    </div>
+            {#if filtered_commands && filtered_commands.length}
+                {#each filtered_commands as cmd, idx (cmd.caption)}
+                    {#if cmd.separator}
+                        {#if idx>0 && idx<filtered_commands.length-1}   <!-- not first or last place -->
+                            <hr class="mx-4 my-1 border-stone-300 dark:border-stone-700"/>
+                        {/if}
+                    {:else}
+                        {@const id = "cpi_" + idx}
+                        {@const active=isRowActive(cmd)}
+                        <Pallete_row    {id}
+                                        cmd={cmd}
+                                        is_highlighted={cmd == current_command}
+                                        on:click={ () => { execute_mouse_click(cmd.on_choice); }}
+                                        on:mousemove={ () => { on_mouse_over(cmd); }}
+                                        on:mousedown={buttonMousedown}
+                                        bind:this={rows[idx]}
+                                        {active}
+                                        />
+                    {/if}
+                {/each}
+            {:else}
+                <p class="text-sm text-stone-500">No results</p>
+            {/if}
+
+        </div>
+    <!---/div-->
+    
     
 {/if}
 

package/components/icon.svelte

@@ -6,9 +6,42 @@ export let img = "";
 export let label = "";
 export let symbol = "";
 export let color = "";
-export let size = void 0;
+export let s = "md";
 export let bg = "";
 export let circle = false;
+let size = 4;
+switch (s) {
+  case "5xl":
+    size = 12;
+    break;
+  case "4xl":
+    size = 9;
+    break;
+  case "3xl":
+    size = 7.5;
+    break;
+  case "2xl":
+    size = 6;
+    break;
+  case "xl":
+    size = 5;
+    break;
+  case "lg":
+    size = 4.5;
+    break;
+  case "md":
+    size = 4;
+    break;
+  case "base":
+    size = 4;
+    break;
+  case "sm":
+    size = 3.5;
+    break;
+  case "xs":
+    size = 3;
+    break;
+}
 let additional_class = $$restProps.class ?? "";
 let id = $$restProps.id ?? "";
 let _bg;
@@ -58,16 +91,16 @@ $: {
 }
 let style;
 $: {
-  if (size == void 0) {
-    if (!additional_class) {
-      size = 5;
-      let icon_size = `${size * 0.25}rem`;
-      style = `width: ${icon_size}; height: ${icon_size}`;
-    } else
-      style = "";
-  } else {
+  if (!additional_class) {
     let icon_size = `${size * 0.25}rem`;
     style = `width: ${icon_size}; height: ${icon_size}`;
+  } else {
+    if (additional_class.includes("w-") || additional_class.includes("h-"))
+      style = "";
+    else {
+      let icon_size = `${size * 0.25}rem`;
+      style = `width: ${icon_size}; height: ${icon_size}`;
+    }
   }
 }
 </script>

package/components/icon.svelte.d.ts

@@ -8,7 +8,7 @@ declare const __propDef: {
         label?: string | undefined;
         symbol?: string | undefined;
         color?: string | undefined;
-        size?: number | undefined;
+        s?: string | undefined;
         bg?: string | undefined;
         circle?: boolean | undefined;
     };
@@ -49,9 +49,9 @@ export default class Icon extends SvelteComponentTyped<IconProps, IconEvents, Ic
     get color(): string | undefined;
     /**accessor*/
     set color(_: string | undefined);
-    get size(): number | undefined;
+    get s(): string | undefined;
     /**accessor*/
-    set size(_: number | undefined);
+    set s(_: string | undefined);
     get bg(): string | undefined;
     /**accessor*/
     set bg(_: string | undefined);

package/components/menu.d.ts

@@ -2,4 +2,5 @@ import Floating_container from './Floating_container.svelte';
 export declare function showMenu(around: DOMRect | DOMPoint, operations: any): void;
 export declare function hideWholeContextMenu(): void;
 export declare function showFloatingToolbar(around: DOMRect | DOMPoint, toolbar: any, props?: {}): Floating_container | null;
+export declare function hideFloatingToolbar(): void;
 export declare function showGridMenu(around: DOMRect | DOMPoint, operations: any): void;

package/components/menu.js

@@ -54,6 +54,12 @@ export function showFloatingToolbar(around, toolbar, props = {}) {
         console.error('what now?');
     return toolbar_component;
 }
+export function hideFloatingToolbar() {
+    if (toolbar_component) {
+        if (toolbar_component.isVisible())
+            toolbar_component.hide();
+    }
+}
 export function showGridMenu(around, operations) {
     showFloatingToolbar(around, Grid, { operations: operations });
 }

package/components/tag.svelte

@@ -7,14 +7,7 @@ export let color;
 export let onRemove = void 0;
 export let onColor = void 0;
 export let s = "sm";
-onMount(() => {
-  if (onColor && rootElement) {
-    rootElement.addEventListener("click", showColorPicker);
-    rootElement.classList.add("cursor-pointer");
-  }
-  return () => {
-  };
-});
+export let onCustomClick = void 0;
 let pr = onRemove ? "pr-1" : "pr-2";
 let font;
 let x_size;
@@ -47,11 +40,32 @@ function onSelectColor(color2) {
   onColor(name, color2);
   colorPicker?.hide();
 }
+function conditionalClick(node, { condition, callback }) {
+  if (condition) {
+    node.addEventListener("click", callback);
+    return {
+      destroy() {
+        node.removeEventListener("click", callback);
+      }
+    };
+  }
+}
+const hasClick = onColor != void 0 || onCustomClick != void 0;
+function handleClick(e) {
+  if (onColor)
+    showColorPicker(e);
+  else if (onCustomClick)
+    onCustomClick(e);
+}
 </script>
 
 <span
 	class=" pl-2 {pr} rounded text-white flex flex-row {color}  items-center"
-	
+	class:cursor-pointer={hasClick}
+	use:conditionalClick={{
+		condition: hasClick, 
+		callback: handleClick
+	}}
 	bind:this={rootElement}>
 	<span class={font}>{name}</span>
 	{#if onRemove}

package/components/tag.svelte.d.ts

@@ -6,6 +6,7 @@ declare const __propDef: {
         onRemove?: any | undefined;
         onColor?: any | undefined;
         s?: string | undefined;
+        onCustomClick?: any | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;