@humandialog/forms.svelte 1.7.12 → 1.7.14

package/components/Fab.svelte

@@ -167,7 +167,7 @@ function on_click(e, operation) {
     if (false)
       showMenu(rect, operation.grid);
     else
-      showGridMenu(rect, operation.grid);
+      showGridMenu(rect, operation.grid, operation.caption ?? "");
   }
 }
 function toggleExpandToolboxV(e) {
@@ -205,7 +205,7 @@ function calculatePosition(operation) {
     return "";
   const width = 55;
   const height = 55;
-  const margin = 10;
+  const margin = 0;
   let lShift = 0;
   let tShift = 0;
   let rShift = 0;
@@ -293,11 +293,7 @@ function operationVisible(operation) {
                 {@const position = calculatePosition(operation)}
                 {#if position}
                     <button
-                        class=" 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
-                                w-[30px] h-[30px]
+                        class=" w-[55px] h-[55px]
                                 fixed m-0                            
                                 flex items-center justify-center
                                 disable-dbl-tap-zoom
@@ -305,7 +301,18 @@ function operationVisible(operation) {
                                 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="    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
+
+                                            flex items-center justify-center
+                                            w-[30px] h-[30px]">
+                                <div class="w-5 h-5">
+                                    <svelte:component this={operation.icon}/>
+                                </div>
+                            </div>
                     </button>
                 {/if}
             {/if}

package/components/Floating_container.svelte

@@ -12,6 +12,7 @@ let around_rect;
 let rootElement;
 let internalElement;
 let closeButtonPos = "";
+let maxHeight = 0;
 export async function show(around, _toolbar, _props = {}) {
   if (around instanceof DOMRect) {
     x = around.left;
@@ -99,21 +100,21 @@ function calculatePosition(x2, y2, around, visible2, fresh) {
         myRect = null;
     }
     if (myRect) {
-      let maxHeight = screenRect.height / 2 - margin;
+      maxHeight = screenRect.height / 2 - margin;
       if (myRect.height < maxHeight)
         maxHeight = myRect.height;
       const width = screenRect.width - 2 * margin;
       x2 = margin;
       y2 = screenRect.bottom - maxHeight - margin;
-      result = `left: ${x2}px; top: ${y2}px; width: ${width}px; max-height: ${maxHeight}px; display: block`;
+      result = `left: ${x2}px; bottom: ${margin}px; width: ${width}px; max-height: ${maxHeight}px; display: block`;
     } else {
-      const maxHeight = screenRect.height / 2 - margin;
+      maxHeight = screenRect.height / 2 - margin;
       const width = screenRect.width - 2 * margin;
       x2 = margin;
       y2 = screenRect.bottom - maxHeight - margin;
-      result = `left: ${x2}px; top: ${y2}px; width: ${width}px; max-height: ${maxHeight}px; display: block`;
+      result = `left: ${x2}px; bottom: ${margin}px; width: ${width}px; max-height: ${maxHeight}px; display: block`;
     }
-    closeButtonPos = `right: ${margin}px; top: calc(${y2}px - 1.75rem)`;
+    closeButtonPos = `right: 0.5rem; top: calc(${y2}px + 0.25rem)`;
   } else {
     let myRect = null;
     if (!fresh) {
@@ -143,21 +144,26 @@ function calculatePosition(x2, y2, around, visible2, fresh) {
 <div    id="__hd_svelte_floating_container"
         class="p-2 bg-stone-100 dark:bg-stone-800 rounded-lg shadow-md shadow-stone-500 dark:shadow-black z-40 fixed "
         style={cssPosition}
+        visible={visible}
         bind:this={rootElement}>
         {#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" 
+    <button class="     text-stone-800 dark:text-stone-400
+                        fixed w-6 h-6 flex items-center justify-center
+                        focus:outline-none font-medium  text-sm text-center" 
             style={closeButtonPos}
-            on:click={ hide }>
+            on:click={ hide }>  <!--rounded-full focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 text-stone-500 bg-stone-200/70 hover:bg-stone-200 dark:text-stone-500 dark:bg-stone-700/80 dark:hover:bg-stone-700  -->
             <Icon component={FaTimes} s="md"/>
         </button>
     {/if}
 
     {#if toolbar}
-        <svelte:component this={toolbar} {...props} bind:this={internalElement} />
+        <svelte:component this={toolbar} {...props} {maxHeight} bind:this={internalElement} />
     {/if}
 </div>
 
+<style>
+    :global(body:has(#__hd_svelte_floating_container[visible="true"])) 
+    {
+        overflow: hidden;
+    }
+</style>

package/components/Grid.menu.svelte

@@ -2,6 +2,7 @@
     import {contextItemsStore} from '../stores.js'
 
     export let operations = []
+    export let label = ''
     export let onHide = undefined;
     
     $: grid_cols = init(operations);
@@ -115,24 +116,27 @@
 </script>
 
 
-<div  class="grid gap-2 {grid_cols}">  
-    {#each operations as operation}
-        {#if !operation.separator}
-            {@const col=col_span(operation.columns ?? 1)}
-            
-            <button class=" py-2.5 px-5 {col}
-                            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"
-                            on:click={(e) => {execute_action(e, operation)}}>
+<div  class="">  
+    <p class="text-stone-800 dark:text-stone-400 text-sm ml-1 mb-1">{label}</p>
+    <div class="grid gap-2 {grid_cols} ">
+        {#each operations as operation}
+            {#if !operation.separator}
+                {@const col=col_span(operation.columns ?? 1)}
                 
-                {#if operation.icon}
-                    <div class="w-3 h-3 mr-1"><svelte:component this={operation.icon}/></div>
-                {/if}
-                <div>{operation.caption}</div>
-            </button>
-        {/if}
-    {/each}
+                <button class=" py-2.5 px-5 {col}
+                                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"
+                                on:click={(e) => {execute_action(e, operation)}}>
+                    
+                    {#if operation.icon}
+                        <div class="w-3 h-3 mr-1"><svelte:component this={operation.icon}/></div>
+                    {/if}
+                    <div>{operation.caption}</div>
+                </button>
+            {/if}
+        {/each}
+    </div>
 </div>
 

package/components/Grid.menu.svelte.d.ts

@@ -3,6 +3,7 @@
 /** @typedef {typeof __propDef.slots}  GridSlots */
 export default class Grid extends SvelteComponentTyped<{
     operations?: any[] | undefined;
+    label?: string | undefined;
     onHide?: any;
 }, {
     [evt: string]: CustomEvent<any>;
@@ -15,6 +16,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         operations?: any[] | undefined;
+        label?: string | undefined;
         onHide?: any;
     };
     events: {

package/components/contextmenu.svelte

@@ -56,15 +56,15 @@ function calculatePosition(x2, y2, visible2, fresh) {
       const width = screenRect.width - 2 * margin;
       x2 = margin;
       y2 = screenRect.bottom - maxHeight - margin;
-      result = `left: ${x2}px; top: ${y2}px; width: ${width}px; max-height: ${maxHeight}px; display: block`;
+      result = `left: ${x2}px; bottom: ${margin}px; width: ${width}px; max-height: ${maxHeight}px; display: block`;
     } else {
       const maxHeight = screenRect.height / 2 - margin;
       const width = screenRect.width - 2 * margin;
       x2 = margin;
       y2 = screenRect.bottom - maxHeight - margin;
-      result = `left: ${x2}px; top: ${y2}px; width: ${width}px; max-height: ${maxHeight}px; display: block`;
+      result = `left: ${x2}px; bottom: ${margin}px; width: ${width}px; max-height: ${maxHeight}px; display: block`;
     }
-    closeButtonPos = `right: ${margin}px; top: calc(${y2}px - 1.75rem)`;
+    closeButtonPos = `right: 0.5rem; top: calc(${y2}px + 0.25rem)`;
   } else {
     let myRect = null;
     if (!fresh) {
@@ -311,7 +311,7 @@ function execute_action(e, operation, index) {
       if (false)
         showMenu(rect, operation.grid);
       else
-        showGridMenu(rect, operation.grid);
+        showGridMenu(rect, operation.grid, operation.caption ?? "");
     } else if (operation.menu) {
       showMenu(rect, operation.menu);
     }
@@ -408,18 +408,16 @@ function isOperationDisabled(operation) {
     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-40 fixed min-w-60 max-h-screen overflow-y-auto"
+            z-40 fixed min-w-60 max-h-screen overflow-y-auto overscroll-contain"
     style={css_position}
+    visible={visible}
     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" 
+                            focus:outline-none font-medium text-sm text-center" 
                 style={closeButtonPos}
-                on:click={ hide }>
+                on:click={ hide }> <!--focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 rounded-full  text-stone-500 bg-stone-200/70 hover:bg-stone-200  dark:text-stone-500 dark:bg-stone-700/80 dark:hover:bg-stone-700 -->
             <Icon component={FaTimes} s="md"/>
         </button>
     {/if}
@@ -443,7 +441,7 @@ function isOperationDisabled(operation) {
             {@const active = calculateBackground(isFocused || isOperationActivated(operation), 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 items-center"
+            <button class="block w-full pr-4 text-left flex flex-row cursor-context-menu {active} focus:outline-none items-center"
                     id={menu_item_id}
                     bind:this={menu_items[index]}
                     on:click|stopPropagation={(e) => { execute_action(e, operation, index) } }
@@ -485,4 +483,11 @@ function isOperationDisabled(operation) {
             </button>
         {/if}
     {/each}
-</div>
+</div>
+
+<style>
+    :global(body:has(#__hd_svelte_contextmenu[visible="true"])) 
+    {
+        overflow: hidden;
+    }
+</style>

package/components/document/internal/palette.svelte

@@ -1,5 +1,5 @@
 <svelte:options accessors={true}/>
-<script>import { tick, afterUpdate } from "svelte";
+<script>import { tick, afterUpdate, onMount } from "svelte";
 import Pallete_row from "./palette.row.svelte";
 import { createEventDispatcher } from "svelte";
 import Icon from "../../icon.svelte";
@@ -38,16 +38,32 @@ afterUpdate(
       /*isToolbox && */
       visible && paletteElement
     ) {
-      let layoutRoot = document.getElementById("__hd_svelte_layout_root");
-      if (!layoutRoot)
-        layoutRoot = document.getElementById("app");
-      if (!!layoutRoot && paletteElement.parentElement != layoutRoot) {
+      const layoutRoot = getLayoutElement();
+      if (layoutRoot && paletteElement.parentElement != layoutRoot) {
         await tick();
         layoutRoot.appendChild(paletteElement);
       }
     }
   }
 );
+onMount(
+  () => {
+    return () => {
+      if (paletteElement) {
+        const layoutRoot = getLayoutElement();
+        visible = false;
+        if (layoutRoot && paletteElement.parentElement == layoutRoot)
+          layoutRoot.removeChild(paletteElement);
+      }
+    };
+  }
+);
+function getLayoutElement() {
+  let layoutRoot = document.getElementById("__hd_svelte_layout_root");
+  if (!layoutRoot)
+    layoutRoot = document.getElementById("app");
+  return layoutRoot;
+}
 let closeButtonPos = "";
 export function show(x, y, up = false) {
   isToolbox = false;
@@ -60,7 +76,8 @@ export function show(x, y, up = false) {
   if (isDeviceSmallerThan("sm")) {
     setTimeout(() => {
       const rect = paletteElement.getBoundingClientRect();
-      closeButtonPos = `right: ${15}px; top: calc(${rect.y}px - 1.75rem)`;
+      closeButtonPos = `right: 0.5rem; top: 0.25rem`;
+      console.log("closeButtonPos", closeButtonPos);
     }, 0);
   }
 }
@@ -297,51 +314,53 @@ function isRowActive(cmd) {
 {:else}
     <!--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"
+                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-40 fixed"
                 id="__hd_FormattingPalette"
                 bind:this={paletteElement}
                 style={css_style} >
 
-            {#if filtered_commands && filtered_commands.length}
-                {#each filtered_commands as cmd, idx }
-                    {#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 visible &&  closeButtonPos}
+                {#key closeButtonPos}
+                    <button class="     text-stone-800 dark:text-stone-400
+                                        fixed w-6 h-6 flex items-center justify-center
+                                        focus:outline-none font-medium  text-sm text-center" 
+                            style={closeButtonPos}
+                            on:mousedown={buttonMousedown}
+                            on:click={ () => hide() }>  <!-- rounded-full text-stone-500 bg-stone-200/70 hover:bg-stone-200  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 -->
+                        <Icon component={FaTimes} s="md"/>
+                    </button>
+                {/key}
             {/if}
 
+            <div class="w-full overflow-y-auto overscroll-contain" style="max-height: {max_height_px}px">
+
+                {#if filtered_commands && filtered_commands.length}
+                    {#each filtered_commands as cmd, idx }
+                        {#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>
     <!---/div-->
     

package/components/list/list.svelte

@@ -1,6 +1,6 @@
 <script>import { setContext, getContext, afterUpdate, tick, onMount } from "svelte";
 import { data_tick_store, contextItemsStore, contextTypesStore } from "../../stores";
-import { activateItem, getActive, clearActiveItem, parseWidthDirective, getPrev, getNext, swapElements, getLast, insertAfter, getActiveCount, addActiveItem } from "../../utils";
+import { activateItem, getActive, clearActiveItem, parseWidthDirective, getPrev, getNext, swapElements, getLast, insertAfter, getActiveCount, addActiveItem, getFirst, insertAt, remove as removeFrom } from "../../utils";
 import Icon from "../icon.svelte";
 import { FaRegCircle, FaRegCheckCircle } from "svelte-icons/fa/";
 import { rList_definition } from "./List";
@@ -139,7 +139,8 @@ export function reload(data, selectElement = KEEP_SELECTION) {
         activate_after_dom_update = itemToActivate;
       }
     }
-  }
+  } else
+    clearActiveItem(selectionKey);
 }
 export async function moveUp(element) {
   if (!orderAttrib)
@@ -169,6 +170,30 @@ export async function moveDown(element) {
   informModification(next, orderAttrib);
   pushChanges();
 }
+export async function moveTop(element) {
+  if (!orderAttrib)
+    return;
+  let current = getFirst(items);
+  if (current == element)
+    return;
+  const firstOrder = current[orderAttrib];
+  while (current != element) {
+    const next = getNext(items, current);
+    const nextOrder = next[orderAttrib];
+    current[orderAttrib] = nextOrder;
+    informModification(current, orderAttrib);
+    current = next;
+  }
+  element[orderAttrib] = firstOrder;
+  informModification(element, orderAttrib);
+  items = removeFrom(items, element);
+  items = insertAt(items, 0, element);
+  await tick();
+  scrollToSelectedElement();
+  pushChanges();
+}
+export async function moveBottom(element) {
+}
 let last_activated_element = null;
 export async function addRowAfter(after = null) {
   if (!definition.can_insert)
@@ -343,7 +368,7 @@ export function toggleSelectAll(e) {
     <!--hr class="hidden sm:block w-full"-->
 {/if}
 
-<!--div class="w-full h-full overflow-y-auto"-->
+<!--div class="w-full h-full overflow-y-auto overscroll-contain"-->
 
 
     {#if items && items.length > 0 }

package/components/list/list.svelte.d.ts

@@ -26,6 +26,8 @@ declare const __propDef: {
         reload?: ((data: object | object[], selectElement?: number) => void) | undefined;
         moveUp?: ((element: object) => Promise<void>) | undefined;
         moveDown?: ((element: object) => Promise<void>) | undefined;
+        moveTop?: ((element: object) => Promise<void>) | undefined;
+        moveBottom?: ((element: object) => Promise<void>) | undefined;
         addRowAfter?: ((after?: object | null) => Promise<void>) | undefined;
         remove?: ((element: object) => void) | undefined;
         edit?: ((element: object, property_name: string) => void) | undefined;
@@ -59,6 +61,8 @@ export default class List extends SvelteComponentTyped<ListProps, ListEvents, Li
     get reload(): (data: object | object[], selectElement?: number) => void;
     get moveUp(): (element: object) => Promise<void>;
     get moveDown(): (element: object) => Promise<void>;
+    get moveTop(): (element: object) => Promise<void>;
+    get moveBottom(): (element: object) => Promise<void>;
     get addRowAfter(): (after?: object | null) => Promise<void>;
     get remove(): (element: object) => void;
     get edit(): (element: object, property_name: string) => void;

package/components/menu.d.ts

@@ -7,4 +7,4 @@ export declare function showMenu(around: DOMRect | DOMPoint, operations: any, pr
 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;
+export declare function showGridMenu(around: DOMRect | DOMPoint, operations: any, label?: string): void;

package/components/menu.js

@@ -64,6 +64,6 @@ export function hideFloatingToolbar() {
             toolbar_component.hide();
     }
 }
-export function showGridMenu(around, operations) {
-    showFloatingToolbar(around, Grid, { operations: operations });
+export function showGridMenu(around, operations, label = '') {
+    showFloatingToolbar(around, Grid, { operations: operations, label: label });
 }

package/console.svelte

@@ -168,7 +168,7 @@
 
 </script>
 
-<div class="h-full overflow-y-auto">
+<div class="h-full overflow-y-auto overscroll-contain">
     <button class="fixed right-0 m-2 w-6 h-6 text-stone-200 {protoButtonBorderClass}" on:click={protoChange}>
         <svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
             <path d="M16 4C14 4 11 5 11 9C11 13 11 15 11 18C11 21 6 23 6 23C6 23 11 25 11 28C11 31 11 35 11 39C11 43 14 44 16 44"/>

package/desk.svelte

@@ -400,7 +400,7 @@
                                 {sidebar_small_width} sm:w-[320px] 
                                 z-20 overflow-x-hidden">
 
-                    <div class=" bg-stone-50 w-full h-full dark:bg-stone-800 overflow-y-auto py-0 px-0">
+                    <div class=" bg-stone-50 w-full h-full dark:bg-stone-800 overflow-y-auto overscroll-contain py-0 px-0">
                         <Configurable config={layout.sidebar[visible_sidebar]}>
                             <div slot='alt'></div>
                         </Configurable>
@@ -442,7 +442,7 @@
                                     {content_top}
                                     {lg_content_area_horizontal_dim}
                                     z-0 overflow-x-hidden 
-                                    {content_height} sm:overflow-y-auto" 
+                                    {content_height} sm:overflow-y-auto sm:overscroll-contain" 
                                     >
                             <Configurable config={layout.mainContent} min_h_class="min-h-screen">
                                 <div slot='alt'></div>

package/dialog.svelte

@@ -0,0 +1,58 @@
+<script>import { afterUpdate, onMount, tick } from "svelte";
+import Icon from "./components/icon.svelte";
+import { pushToolsActionsOperations, popToolsActionsOperations, fabHiddenDueToPopup } from "./stores.js";
+import { isDeviceSmallerThan } from "./utils";
+import { FaTimes } from "svelte-icons/fa";
+import { i18n } from "./i18n.js";
+export let open = false;
+export function show(on_close_callback = void 0) {
+  open = true;
+  close_callback = on_close_callback;
+  if (isDeviceSmallerThan("sm")) {
+    $fabHiddenDueToPopup = true;
+  }
+}
+export function hide() {
+  if (!open)
+    return;
+  open = false;
+  $fabHiddenDueToPopup = false;
+}
+let root;
+afterUpdate(
+  async () => {
+    if (!!root) {
+      let modal_root = document.getElementById("__hd_svelte_modal_root");
+      if (!!modal_root && root.parentElement != modal_root) {
+        await tick();
+        modal_root.appendChild(root);
+      }
+    }
+  }
+);
+let close_callback = void 0;
+</script>
+
+{#if open}
+<div id="__hd_svelte_property_dialog_container" 
+    visible={open}
+    class="relative z-30" aria-labelledby="modal-title" role="dialog" aria-modal="true" bind:this={root}>
+    <div class="fixed w-screen h-screen inset-0 bg-stone-500 dark:bg-stone-800 bg-opacity-75 dark:bg-opacity-75 transition-opacity"></div>
+  
+    <div class="fixed z-30 inset-0 w-screen overflow-y-auto overscroll-contain">
+      <div class="flex min-h-full items-end justify-center p-1 text-center sm:items-center sm:p-0">
+        <div class=" p-2 bg-stone-100 dark:bg-stone-800 rounded-lg shadow-md shadow-stone-500 dark:shadow-black text-left shadow-xl transition-all  
+                    sm:my-8 w-full sm:max-w-lg"> <!-- transform overflow-hidden -->
+            <slot/>
+        </div>
+      </div>
+    </div>
+  </div>
+  {/if}
+
+<style>
+    :global(body:has(#__hd_svelte_property_dialog_container[visible="true"])) 
+    {
+        overflow: hidden;
+    }
+</style>

package/dialog.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        open?: boolean | undefined;
+        show?: ((on_close_callback?: Function | undefined) => void) | undefined;
+        hide?: (() => void) | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type DialogProps = typeof __propDef.props;
+export type DialogEvents = typeof __propDef.events;
+export type DialogSlots = typeof __propDef.slots;
+export default class Dialog extends SvelteComponentTyped<DialogProps, DialogEvents, DialogSlots> {
+    get show(): (on_close_callback?: Function | undefined) => void;
+    get hide(): () => void;
+}
+export {};

package/index.d.ts

@@ -42,6 +42,7 @@ export { default as ListComboProperty } from './components/list/list.combo.svelt
 export { default as ListStaticProperty } from './components/list/list.static.svelte';
 export { default as ListTags } from './components/list/list.tags.svelte';
 export { default as Modal } from './modal.svelte';
+export { default as Dialog } from './dialog.svelte';
 export { default as MembersPage } from './tenant.members.svelte';
 export { default as Console } from './console.svelte';
 export { default as Tag } from './components/tag.svelte';

package/index.js

@@ -48,6 +48,7 @@ export { default as ListComboProperty } from './components/list/list.combo.svelt
 export { default as ListStaticProperty } from './components/list/list.static.svelte';
 export { default as ListTags } from './components/list/list.tags.svelte';
 export { default as Modal } from './modal.svelte';
+export { default as Dialog } from './dialog.svelte';
 export { default as MembersPage } from './tenant.members.svelte';
 export { default as Console } from './console.svelte';
 export { default as Tag } from './components/tag.svelte';

package/modal.svelte

@@ -59,7 +59,9 @@ function on_cancel(event) {
 </script>
 
 {#if open}
-<div class="relative z-30" aria-labelledby="modal-title" role="dialog" aria-modal="true" bind:this={root}>
+<div id="__hd_svelte_modal_container" 
+    visible={open}
+    class="relative z-30" aria-labelledby="modal-title" role="dialog" aria-modal="true" bind:this={root}>
     <!--
       Background backdrop, show/hide based on modal state.
   
@@ -72,7 +74,7 @@ function on_cancel(event) {
     -->
     <div class="fixed w-screen h-screen inset-0 bg-stone-500 dark:bg-stone-800 bg-opacity-75 dark:bg-opacity-75 transition-opacity"></div>
   
-    <div class="fixed z-30 inset-0 w-screen overflow-y-auto">
+    <div class="fixed z-30 inset-0 w-screen overflow-y-auto overscroll-contain">
       <div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
         <!--
           Modal panel, show/hide based on modal state.
@@ -132,4 +134,11 @@ function on_cancel(event) {
       </div>
     </div>
   </div>
-  {/if}
+  {/if}
+
+<style>
+    :global(body:has(#__hd_svelte_modal_container[visible="true"])) 
+    {
+        overflow: hidden;
+    }
+</style>

package/operations.svelte

@@ -182,7 +182,7 @@ function on_click(e, operation, isDisabled) {
   else if (operation.toolbar)
     showFloatingToolbar(rect, operation.toolbar, operation.props ?? {});
   else if (operation.grid)
-    showGridMenu(rect, operation.grid);
+    showGridMenu(rect, operation.grid, operation.caption ?? "");
 }
 function mousedown(e, operation) {
   e.preventDefault();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@humandialog/forms.svelte",
-  "version": "1.7.12",
+  "version": "1.7.14",
   "description": "Basic Svelte UI components for Object Reef applications",
   "devDependencies": {
     "@playwright/test": "^1.28.1",
@@ -156,6 +156,7 @@
     "./components/tile.title.svelte": "./components/tile.title.svelte",
     "./console.svelte": "./console.svelte",
     "./desk.svelte": "./desk.svelte",
+    "./dialog.svelte": "./dialog.svelte",
     "./form.box.svelte": "./form.box.svelte",
     "./horizontal.toolbar.svelte": "./horizontal.toolbar.svelte",
     "./i18n-preprocess": "./i18n-preprocess.js",