@humandialog/forms.svelte 1.7.28 → 1.8.0

package/components/Fab.svelte

@@ -3,6 +3,9 @@ import { showFloatingToolbar, showMenu, showGridMenu } from "./menu.js";
 import { FaChevronUp, FaChevronDown, FaChevronLeft, FaChevronRight, FaCircle, FaEllipsisV, FaRegDotCircle, FaDotCircle } from "svelte-icons/fa/";
 import { isDeviceSmallerThan } from "../utils.js";
 import { tick } from "svelte";
+import Ricon from "./r.icon.svelte";
+import { i18n } from "../i18n.js";
+import { pushChanges, hasModifications, unsavedModificationsTicket } from "../updates.js";
 export let mainPageCoords = void 0;
 $:
   setupCurrentContextOperations(
@@ -13,7 +16,8 @@ $:
     $bottom_bar_visible_store,
     $main_sidebar_visible_store,
     $leftHandedFAB,
-    $fabHiddenDueToPopup
+    $fabHiddenDueToPopup,
+    $unsavedModificationsTicket
   );
 let operations = [];
 let mainOperation = null;
@@ -67,6 +71,14 @@ async function setupCurrentContextOperations(...args) {
     operations = flatOperations;
   } else if (opVer == 2) {
     const definedOperations = [...operations];
+    const saveOperation = {
+      caption: i18n({ en: "Save", es: "Guardar", pl: "Zapisz" }),
+      hideToolbarCaption: true,
+      mricon: "save",
+      action: (f) => pushChanges(),
+      fab: "T00",
+      disabledFunc: () => !hasModifications()
+    };
     if (main_FAB_position) {
       let flatOperations = [];
       definedOperations.forEach((group) => {
@@ -76,10 +88,13 @@ async function setupCurrentContextOperations(...args) {
         });
         flatOperations = [...flatOperations, ...group.operations];
       });
+      flatOperations.push({ separator: true });
+      flatOperations.push(saveOperation);
       const realOps = flatOperations.filter((el) => !!el.separator == false);
       if (realOps.length > 1) {
         mainOperation = {
           icon: FaEllipsisV,
+          mricon: "ellipsis-vertical",
           menu: flatOperations,
           fab: main_FAB_position
         };
@@ -91,6 +106,7 @@ async function setupCurrentContextOperations(...args) {
       } else
         operations = [];
     }
+    operations.push(saveOperation);
     definedOperations.forEach((group) => {
       group.operations.forEach((op) => {
         if (op.fab) {
@@ -102,6 +118,7 @@ async function setupCurrentContextOperations(...args) {
       if (!operations.find((op) => op.fab == "M10")) {
         const collapseFAB = {
           icon: $fabCollapsed ? FaRegDotCircle : FaDotCircle,
+          mricon: $fabCollapsed ? "circle-dot-dashed" : "circle-dashed",
           fab: "M10",
           action: (f) => toggleExpandAdditionalOperations()
         };
@@ -209,7 +226,7 @@ function calculatePosition(operation) {
   let lShift = 0;
   let tShift = 0;
   let rShift = 0;
-  let bShift = 0;
+  let bShift = 55;
   let vMiddle = "50vh";
   if (!isDeviceSmallerThan("sm")) {
     const container = document.getElementById("__hd_svelte_main_content_container");
@@ -286,184 +303,48 @@ function operationVisible(operation) {
 }
 </script>
 
-{#if isDirectPositioningMode}
-    {#if operations && operations.length > 0}
-        {#each operations as operation}
-            {#if operationVisible(operation)}
-                {@const position = calculatePosition(operation)}
-                {#if position}
-                    <button
-                        class=" w-[55px] h-[55px]
-                                fixed m-0                            
-                                flex items-center justify-center
-                                disable-dbl-tap-zoom
-                                cursor-pointer z-20"
-                                style={position}
-                                on:click|stopPropagation={(e) => {on_click(e, operation)}}
-                                on:mousedown={mousedown} >
-                        
-                            <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}
-        {/each}
-    {/if}
-{:else}
+{#if operations && operations.length > 0}
+    {#each operations as operation}
+        {#if operationVisible(operation)}
+            {@const position = calculatePosition(operation)}
+            {#if position}
+                <button
+                    class=" w-[55px] h-[55px]
+                            fixed m-0
+                            flex items-center justify-center
+                            disable-dbl-tap-zoom
+                            cursor-pointer z-20"
+                            style={position}
+                            on:click|stopPropagation={(e) => {on_click(e, operation)}}
+                            on:mousedown={mousedown} >
 
-    {#if operations && operations.length > 0}
-        {@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
-                        font-medium rounded-full text-sm text-center shadow-md
-                        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:mousedown={mousedown} >
-            <div class="w-7 h-7"><svelte:component this={mainOperation.icon}/></div>
-        </button>
+                        <div class="    focus:outline-none font-medium  text-sm text-center
 
-        {#if secondaryOperation || isExpandable}
+                                        text-stone-500 bg-stone-200/70 hover:bg-stone-200
+                                        rounded-full
+                                        dark:text-orange-200 dark:bg-stone-700/40 dark:hover:bg-stone-700
+                                        ring-1 ring-orange-800/40 dark:ring-orange-200/30
 
-            <!-- horizontal container -->
-            <div class="flex flex-row m-0 fixed bottom-[10px] right-[60px]">
+                                        focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800
 
-                {#if isExpandable}
-                    <!-- Expander -->
-                    <button class=" bg-transparent mr-2
-                                    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
-                                        font-medium rounded-full text-sm text-center shadow-md
-                                        dark:bg-zinc-500 dark:hover:bg-zinc-500
-                                        flex items-center justify-center">
-                            <div class="w-2 h-2">
-                                {#if hToolboxExpanded}
-                                    <FaCircle/>
-                                {:else}
-                                    <FaCircle/>
-                                {/if}
+                                        flex items-center justify-center
+                                        w-8 h-8">
+                            {#if operation.mricon}
+                                <div class="py-1 mr-1 w-4"><Ricon icon = {operation.mricon} s/></div>
+                            {:else }
+                            <div class="w-4 h-4 text-orange-500">
+                                <svelte:component this={operation.icon}/>
                             </div>
+                            {/if}
                         </div>
-                    </button>
-
-                    {#if hToolboxExpanded}
-                        {#if secondaryOperation}
-                            <button class="     bg-transparent
-                                                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
-                                                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">
-                                    <div class="w-5 h-5"><svelte:component this={secondaryOperation.icon}/></div>
-                                </div>
-                            </button>
-                        {:else if toolboxOperations.length > 0}
-                            {@const toolbox=toolboxOperations.reverse()}
-                            {#each toolbox as operation}
-                                {#if !operation.separator}
-                                    <!-- svelte-ignore a11y-click-events-have-key-events -->
-                                    <button class=" bg-transparent
-                                                        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
-                                                        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">
-                                            <div class="w-5 h-5"><svelte:component this={operation.icon}/></div>
-                                        </div>
-                                    </button>
-                                {/if}
-                            {/each}
-
-                        {/if}
-                    {/if}
-                {:else}
-                    <button class=" bg-transparent
-                                    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
-                                        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">
-                            <div class="w-5 h-5"><svelte:component this={secondaryOperation.icon}/></div>
-                        </div>
-                    </button>
-                {/if}
-
-            </div>
-        {/if}
-
-        {#if operations.length > 2} <!-- has vertical operations -->
-            <!-- vertical tools container  -->
-            <ul class="list-none m-0 fixed bottom-[70px] right-0">
-                {#if (isExpandable && vToolboxExpanded) || !isExpandable}
-                    {@const verticalOperations = operations.slice(2).reverse()}
-                    {#each verticalOperations as operation}
-                        {#if !operation.separator}
-                            <!-- svelte-ignore a11y-click-events-have-key-events -->
-                            <li class="flex flex-row px-0 py-0 justify-end group"
-                                on:click|stopPropagation={(e) => {on_click(e, 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>
-                                    </div>
-                                {/if}
-                                <button class=" bg-transparent
-                                                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
-                                                    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">
-                                        <div class="w-5 h-5"><svelte:component this={operation.icon}/></div>
-                                    </div>
-                                </button>
-                            </li>
-                        {/if}
-                    {/each}
-                {/if}
-            </ul>
+                </button>
+            {/if}
         {/if}
-
-    {/if}
+    {/each}
 {/if}
 
+
 <style>
 
 .disable-dbl-tap-zoom {

package/components/Floating_container.25.svelte

@@ -0,0 +1,178 @@
+<script>import { tick, afterUpdate } from "svelte";
+import { isDeviceSmallerThan } from "../utils";
+import { pushToolsActionsOperations, popToolsActionsOperations, fabHiddenDueToPopup } from "../stores";
+import { FaTimes } from "svelte-icons/fa";
+import Icon from "./icon.svelte";
+import { usePreventScroll } from "./react-aria/preventScroll";
+let x;
+let y;
+let visible = false;
+let toolbar;
+let props = {};
+let around_rect;
+let rootElement;
+let internalElement;
+let closeButtonPos = "";
+let maxHeight = 0;
+let preventScrollRestorer = null;
+export async function show(around, _toolbar, _props = {}) {
+  if (around instanceof DOMRect) {
+    x = around.left;
+    y = around.bottom;
+    around_rect = around;
+  } else if (around instanceof DOMPoint) {
+    x = around.x;
+    y = around.y;
+    around_rect = new DOMRect(x, y, 0, 0);
+  }
+  const was_visible = visible;
+  if (!was_visible && toolbar == _toolbar && internalElement && internalElement.reload) {
+    internalElement.reload(_props);
+  }
+  visible = true;
+  toolbar = _toolbar;
+  props = _props;
+  cssPosition = calculatePosition(x, y, around_rect, true, true);
+  props.onHide = () => {
+    hide();
+  };
+  props.onSizeChanged = () => onSizeChanged();
+  hide_window_indicator = 0;
+  window.addEventListener("click", on_before_window_click, true);
+  if (isDeviceSmallerThan("sm"))
+    preventScrollRestorer = usePreventScroll();
+  if (isDeviceSmallerThan("sm")) {
+    $fabHiddenDueToPopup = true;
+  }
+  await tick();
+  if (!was_visible)
+    rootElement.addEventListener("click", on_before_container_click, true);
+  cssPosition = calculatePosition(x, y, around_rect, true, false);
+}
+export function isVisible() {
+  return visible;
+}
+export function hide() {
+  if (visible) {
+    $fabHiddenDueToPopup = false;
+  }
+  visible = false;
+  toolbar = null;
+  cssPosition = calculatePosition(x, y, around_rect, false, false);
+  window.removeEventListener("click", on_before_window_click, true);
+  rootElement?.removeEventListener("click", on_before_container_click, true);
+  if (preventScrollRestorer) {
+    preventScrollRestorer();
+    preventScrollRestorer = null;
+  }
+}
+export function isSameToolbar(_toolbar) {
+  return _toolbar == toolbar;
+}
+async function onSizeChanged() {
+  if (!visible)
+    return;
+  cssPosition = calculatePosition(x, y, around_rect, true, true);
+  await tick();
+  cssPosition = calculatePosition(x, y, around_rect, true, false);
+}
+let hide_window_indicator = 0;
+function on_before_window_click() {
+  hide_window_indicator++;
+  setTimeout(() => {
+    if (hide_window_indicator != 0) {
+      hide_window_indicator = 0;
+      hide();
+    }
+  }, 0);
+}
+function on_before_container_click() {
+  hide_window_indicator--;
+}
+let cssPosition = "";
+function calculatePosition(x2, y2, around, visible2, fresh) {
+  let result = "";
+  if (!visible2) {
+    result = "display: none";
+  } else if (isDeviceSmallerThan("sm")) {
+    let screenRect = new DOMRect();
+    screenRect.x = 0;
+    screenRect.y = 0;
+    screenRect.width = window.innerWidth;
+    screenRect.height = window.innerHeight;
+    const margin = 5;
+    let myRect = null;
+    if (!fresh) {
+      myRect = rootElement.getBoundingClientRect();
+      if (myRect && myRect.height == 0)
+        myRect = null;
+    }
+    if (myRect) {
+      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; bottom: ${margin}px; width: ${width}px; max-height: ${maxHeight}px; display: block`;
+    } else {
+      maxHeight = screenRect.height / 2 - margin;
+      const width = screenRect.width - 2 * margin;
+      x2 = margin;
+      y2 = screenRect.bottom - maxHeight - margin;
+      result = `left: ${x2}px; bottom: ${margin}px; width: ${width}px; max-height: ${maxHeight}px; display: block`;
+    }
+    closeButtonPos = `right: 0.5rem; bottom: calc(${margin + maxHeight}px - 1.75rem)`;
+  } else {
+    let myRect = null;
+    if (!fresh) {
+      myRect = rootElement.getBoundingClientRect();
+      if (myRect && myRect.height == 0)
+        myRect = null;
+    }
+    const m = 15;
+    let screenRect = new DOMRect(m, 0, window.innerWidth - 2 * m, window.innerHeight);
+    if (myRect) {
+      if (myRect.right > screenRect.right)
+        x2 = screenRect.right - myRect.width;
+      if (myRect.bottom > screenRect.bottom)
+        y2 = screenRect.bottom - myRect.height - around_rect.height;
+      if (myRect.left < screenRect.left)
+        x2 = screenRect.left;
+      if (myRect.top < screenRect.top)
+        y2 = screenRect.top;
+    }
+    result = `left:${x2}px; top:${y2}px; width: max-content; height:max-content; display: block`;
+    closeButtonPos = ``;
+  }
+  return result;
+}
+</script>
+
+<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="     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 }>  <!--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} {maxHeight} bind:this={internalElement} />
+    {/if}
+</div>
+
+<!-- use usePreventScroll instead -->
+<!--style>
+    :global(body:has(#__hd_svelte_floating_container[visible="true"])) 
+    {
+        overflow: hidden;
+    }
+</style-->

package/components/Floating_container.25.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        show?: ((around: DOMRect | DOMPoint, _toolbar: any, _props?: {}) => Promise<void>) | undefined;
+        isVisible?: (() => boolean) | undefined;
+        hide?: (() => void) | undefined;
+        isSameToolbar?: ((_toolbar: any) => boolean) | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type FloatingContainerProps = typeof __propDef.props;
+export type FloatingContainerEvents = typeof __propDef.events;
+export type FloatingContainerSlots = typeof __propDef.slots;
+export default class FloatingContainer extends SvelteComponentTyped<FloatingContainerProps, FloatingContainerEvents, FloatingContainerSlots> {
+    get show(): (around: DOMRect | DOMPoint, _toolbar: any, _props?: {}) => Promise<void>;
+    get isVisible(): () => boolean;
+    get hide(): () => void;
+    get isSameToolbar(): (_toolbar: any) => boolean;
+}
+export {};

package/components/Floating_container.svelte

@@ -15,6 +15,7 @@ let internalElement;
 let closeButtonPos = "";
 let maxHeight = 0;
 let preventScrollRestorer = null;
+let ownCloseButton = false;
 export async function show(around, _toolbar, _props = {}) {
   if (around instanceof DOMRect) {
     x = around.left;
@@ -32,6 +33,10 @@ export async function show(around, _toolbar, _props = {}) {
   visible = true;
   toolbar = _toolbar;
   props = _props;
+  if (props && props.hasOwnProperty("ownCloseButton"))
+    ownCloseButton = props.ownCloseButton;
+  else
+    ownCloseButton = false;
   cssPosition = calculatePosition(x, y, around_rect, true, true);
   props.onHide = () => {
     hide();
@@ -108,7 +113,7 @@ function calculatePosition(x2, y2, around, visible2, fresh) {
         myRect = null;
     }
     if (myRect) {
-      maxHeight = screenRect.height / 2 - margin;
+      maxHeight = screenRect.height - margin;
       if (myRect.height < maxHeight)
         maxHeight = myRect.height;
       const width = screenRect.width - 2 * margin;
@@ -116,13 +121,16 @@ function calculatePosition(x2, y2, around, visible2, fresh) {
       y2 = screenRect.bottom - maxHeight - margin;
       result = `left: ${x2}px; bottom: ${margin}px; width: ${width}px; max-height: ${maxHeight}px; display: block`;
     } else {
-      maxHeight = screenRect.height / 2 - margin;
+      maxHeight = screenRect.height - margin;
       const width = screenRect.width - 2 * margin;
       x2 = margin;
       y2 = screenRect.bottom - maxHeight - margin;
       result = `left: ${x2}px; bottom: ${margin}px; width: ${width}px; max-height: ${maxHeight}px; display: block`;
     }
-    closeButtonPos = `right: 0.5rem; bottom: calc(${margin + maxHeight}px - 1.75rem)`;
+    if (!ownCloseButton)
+      closeButtonPos = `right: 0.5rem; bottom: calc(${margin + maxHeight}px - 1.75rem)`;
+    else
+      closeButtonPos = "";
   } else {
     let myRect = null;
     if (!fresh) {
@@ -150,14 +158,18 @@ function calculatePosition(x2, y2, around, visible2, fresh) {
 </script>
 
 <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 "
+        class=" Floating_container
+                bg-stone-100 dark:bg-stone-800 rounded-lg shadow-md shadow-stone-500 dark:shadow-black z-40 fixed
+                sm:shadow-xl sm:shadow-slate-700/10
+                sm:dark:shadow-black/80
+                sm:outline sm:outline-1 sm:outline-stone-500"
         style={cssPosition}
         visible={visible}
         bind:this={rootElement}>
         {#if 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" 
+                        focus:outline-none font-medium  text-sm text-center"
             style={closeButtonPos}
             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"/>
@@ -171,7 +183,7 @@ function calculatePosition(x2, y2, around, visible2, fresh) {
 
 <!-- use usePreventScroll instead -->
 <!--style>
-    :global(body:has(#__hd_svelte_floating_container[visible="true"])) 
+    :global(body:has(#__hd_svelte_floating_container[visible="true"]))
     {
         overflow: hidden;
     }

package/components/Grid.menu.svelte

@@ -4,7 +4,7 @@
     export let operations = []
     export let label = ''
     export let onHide = undefined;
-    
+
     $: grid_cols = init(operations);
 
     function init(operations)
@@ -36,31 +36,31 @@
         {
             case 1:
                 return "grid-cols-1";
-                
+
             case 2:
                 return "grid-cols-2";
-                
+
             case 3:
                 return "grid-cols-3";
-                
+
             case 4:
                 return "grid-cols-4";
-                
+
             case 5:
                 return "grid-cols-5";
-                
+
             case 6:
                 return "grid-cols-6";
-                
+
             case 7:
                 return "grid-cols-7";
-                
+
             case 8:
                 return "grid-cols-8";
-                
+
             case 9:
                 return "grid-cols-9";
-                
+
             case 10:
                 return "grid-cols-10";
         }
@@ -109,27 +109,27 @@
         let context_item = null
         if($contextItemsStore.focused)
             context_item = $contextItemsStore[$contextItemsStore.focused]
-        
+
         operation.action(context_item);
     }
 
 </script>
 
 
-<div  class="">  
+<div  class="">
     <p class="block sm:hidden 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)}
-                
+
                 <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
+                                bg-stone-100 hover:bg-stone-200 dark:bg-stone-800 dark:hover:bg-stone-700 active:bg-stone-200 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}
@@ -139,4 +139,3 @@
         {/each}
     </div>
 </div>
-

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

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