@likable-hair/svelte 4.2.4 → 4.3.0

package/dist/components/composed/buttons/ActivableButton.svelte

@@ -1,11 +1,29 @@
-<script lang="ts">import Button from "../../simple/buttons/Button.svelte";
-let { active = $bindable(false), buttonProps = {}, onclick, children, appendSnippet: appendInternalSnippet, } = $props();
-function handleOnClick(e) {
-    active = !active;
-    if (onclick) {
-        onclick(e);
+<script lang="ts">
+  import Button from "../../simple/buttons/Button.svelte";
+  import type { ComponentProps, Snippet } from "svelte";
+  interface Props {
+    active?: boolean;
+    buttonProps?: ComponentProps<typeof Button>;
+    onclick?: ComponentProps<typeof Button>['onclick']
+    children?: Snippet<[]>
+    appendSnippet?: Snippet<[]>
+  }
+
+  let { 
+    active = $bindable(false), 
+    buttonProps = {},
+    onclick,
+    children,
+    appendSnippet: appendInternalSnippet,
+  }: Props = $props();
+
+  function handleOnClick(e: Parameters<NonNullable<typeof onclick>>[0]) {
+    active = !active
+
+    if(onclick) {
+      onclick(e)
     }
-}
+  }
 </script>
 
 <Button

package/dist/components/composed/common/HeadersDrawer.svelte

@@ -1,39 +1,77 @@
-<script lang="ts" generics="Item extends {[key: string]: any}, Data">import { Button, Divider, Drawer, Icon, MediaQuery, Switch, VerticalDraggableList } from "../../..";
-import { flip } from "svelte/animate";
-import { quintOut } from "svelte/easing";
-import { crossfade } from "svelte/transition";
-import EnhancedPaginatedTable from "../list/EnhancedPaginatedTable.svelte";
-import lodash from "lodash";
-const deepClone = lodash.cloneDeep;
-let { drawerProps, open = $bindable(), lang, availableHeaders, headersToShow = $bindable(), pinnableColumns, onsaveHeadersToShow, itemSnippet: internalItemSnippet, headersToAddSnippet, contentSnippet, } = $props();
-const [send, receive] = crossfade({
+<script lang="ts" generics="Item extends {[key: string]: any}, Data">
+  import { Button, Divider, Drawer, Icon, MediaQuery, Switch, VerticalDraggableList } from "../../..";
+  import type { ComponentProps, Snippet } from "svelte";
+  import { flip } from "svelte/animate";
+  import { quintOut } from "svelte/easing";
+  import { crossfade } from "svelte/transition";
+  import EnhancedPaginatedTable from "../list/EnhancedPaginatedTable.svelte";
+  import lodash from "lodash";
+
+  const deepClone = lodash.cloneDeep;
+  
+  interface Props {
+    drawerProps?: Omit<ComponentProps<typeof Drawer>, 'open'>
+    open?: boolean,
+    lang: 'en' | 'it',
+    availableHeaders: ComponentProps<typeof EnhancedPaginatedTable<Item, Data>>['headers'],
+    headersToShow: ComponentProps<typeof EnhancedPaginatedTable<Item, Data>>['headers'],
+    pinnableColumns?: boolean,
+    onsaveHeadersToShow?: (event: {
+      detail: {
+        headersToShow: ComponentProps<typeof EnhancedPaginatedTable<Item, Data>>['headers'];
+      }
+    }) => void
+    itemSnippet?: ComponentProps<typeof VerticalDraggableList>['itemSnippet']
+    headersToAddSnippet?: Snippet<[{ header: ComponentProps<typeof EnhancedPaginatedTable<Item, Data>>['headers'][number] }]>
+    contentSnippet?: Snippet<[]>
+  }
+
+  let {
+    drawerProps,
+    open = $bindable(),
+    lang,
+    availableHeaders,
+    headersToShow = $bindable(),
+    pinnableColumns,
+    onsaveHeadersToShow,
+    itemSnippet: internalItemSnippet,
+    headersToAddSnippet,
+    contentSnippet,
+  }: Props = $props()
+
+  const [send, receive] = crossfade({
     duration: 500,
     fallback(node, params) {
-        const style = getComputedStyle(node);
-        const transform = style.transform === "none" ? "" : style.transform;
-        return {
-            duration: 500,
-            easing: quintOut,
-            css: (t) => `
+      const style = getComputedStyle(node);
+      const transform = style.transform === "none" ? "" : style.transform;
+
+      return {
+        duration: 500,
+        easing: quintOut,
+        css: (t) => `
         transform: ${transform} scale(${t});
         opacity: ${t}
       `,
-        };
+      };
     },
-});
-let internalHeadersToShow = $state(deepClone(headersToShow));
-$effect(() => {
-    internalHeadersToShow = deepClone(headersToShow);
-});
-function saveHeadersToShow() {
-    headersToShow = internalHeadersToShow;
+  });
+
+  let internalHeadersToShow = $state(deepClone(headersToShow))
+  $effect(() => {
+    internalHeadersToShow = deepClone(headersToShow)
+  })
+
+  function saveHeadersToShow() {
+    headersToShow = internalHeadersToShow
+    
     onsaveHeadersToShow?.({
-        detail: {
-            headersToShow,
-        }
-    });
+      detail: {
+        headersToShow,
+      }
+    })
+
     open = false;
-}
+  }
 </script>
 
 <MediaQuery>

package/dist/components/composed/common/HeadersDrawer.svelte.d.ts

@@ -1,28 +1,38 @@
 import { Drawer, VerticalDraggableList } from "../../..";
 import type { ComponentProps, Snippet } from "svelte";
-declare class __sveltets_Render<Item extends {
+import EnhancedPaginatedTable from "../list/EnhancedPaginatedTable.svelte";
+declare function $$render<Item extends {
     [key: string]: any;
-}, Data> {
-    props(): {
+}, Data>(): {
+    props: {
         drawerProps?: Omit<ComponentProps<typeof Drawer>, "open">;
         open?: boolean;
         lang: "en" | "it";
-        availableHeaders: import("../../simple/lists/SimpleTable.svelte").Header<Data>[];
-        headersToShow: import("../../simple/lists/SimpleTable.svelte").Header<Data>[];
+        availableHeaders: ComponentProps<typeof EnhancedPaginatedTable<Item, Data>>["headers"];
+        headersToShow: ComponentProps<typeof EnhancedPaginatedTable<Item, Data>>["headers"];
         pinnableColumns?: boolean;
-        onsaveHeadersToShow?: ((event: {
+        onsaveHeadersToShow?: (event: {
             detail: {
-                headersToShow: import("../../simple/lists/SimpleTable.svelte").Header<Data>[];
+                headersToShow: ComponentProps<typeof EnhancedPaginatedTable<Item, Data>>["headers"];
             };
-        }) => void) | undefined;
+        }) => void;
         itemSnippet?: ComponentProps<typeof VerticalDraggableList>["itemSnippet"];
         headersToAddSnippet?: Snippet<[{
-            header: import("../../simple/lists/SimpleTable.svelte").Header<Data>;
-        }]> | undefined;
+            header: ComponentProps<typeof EnhancedPaginatedTable<Item, Data>>["headers"][number];
+        }]>;
         contentSnippet?: Snippet<[]>;
     };
-    events(): {};
-    slots(): {};
+    exports: {};
+    bindings: "open" | "headersToShow";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<Item extends {
+    [key: string]: any;
+}, Data> {
+    props(): ReturnType<typeof $$render<Item, Data>>['props'];
+    events(): ReturnType<typeof $$render<Item, Data>>['events'];
+    slots(): ReturnType<typeof $$render<Item, Data>>['slots'];
     bindings(): "open" | "headersToShow";
     exports(): {};
 }

package/dist/components/composed/common/MenuOrDrawer.svelte

@@ -1,10 +1,31 @@
-<script lang="ts">import '../../../css/main.css';
-import Drawer from '../../simple/navigation/Drawer.svelte';
-import Menu from '../../simple/common/Menu.svelte';
-import MediaQuery from '../../simple/common/MediaQuery.svelte';
-import lodash from 'lodash';
-let { open = $bindable(), drawerProps, menuProps, children, } = $props();
-const menuPropsDefaultValue = {
+<script lang="ts">
+  import '../../../css/main.css'
+  import Drawer from '../../simple/navigation/Drawer.svelte';
+  import Menu from '../../simple/common/Menu.svelte';
+  import MediaQuery from '../../simple/common/MediaQuery.svelte';
+  import type { ComponentProps, Snippet } from 'svelte';
+  import lodash from 'lodash'
+
+  export interface Props {
+    open?: boolean
+    drawerProps?: Omit<ComponentProps<typeof Drawer>, 'open'>
+    menuProps?: Omit<ComponentProps<typeof Menu>, 'open'>
+    children?: Snippet<[
+      {
+        isDrawer: boolean,
+        isMenu: boolean
+      }
+    ]>
+  }
+
+  let { 
+    open = $bindable(),
+    drawerProps,
+    menuProps,
+    children,
+  }: Props = $props();
+
+  const menuPropsDefaultValue = {
     closeOnClickOutside: true,
     _boxShadow: "rgb(var(--global-color-grey-900), .5) 0px 2px 4px",
     _height: "fit-content",
@@ -13,12 +34,19 @@ const menuPropsDefaultValue = {
     _width: "",
     anchor: 'bottom-center',
     stayInViewport: true
-};
-let finalMenuProps = $derived(lodash.clone(lodash.merge(menuPropsDefaultValue, menuProps)));
-const drawerPropsDefaultValue = {
+  }
+
+  let finalMenuProps = $derived(
+    lodash.clone(lodash.merge(menuPropsDefaultValue, menuProps))
+  )
+
+  const drawerPropsDefaultValue = {
     position: 'bottom'
-};
-let finalDrawerProps = $derived(lodash.clone(lodash.merge(drawerPropsDefaultValue, drawerProps)));
+  }
+
+  let finalDrawerProps = $derived(
+    lodash.clone(lodash.merge(drawerPropsDefaultValue, drawerProps))
+  )
 </script>
 
 <MediaQuery>

package/dist/components/composed/common/MenuOrDrawerOptions.svelte

@@ -1,12 +1,28 @@
-<script lang="ts" module>export {};
+<script lang="ts" module>
+  export type ArrayElement<ArrayType extends readonly unknown[]> = ArrayType extends readonly (infer ElementType)[] ? ElementType : never;
 </script>
 
-<script lang="ts" generics="Data">import '../../../css/main.css';
-import MenuOrDrawer from "./MenuOrDrawer.svelte";
-import SelectableVerticalList from '../../simple/lists/SelectableVerticalList.svelte';
-import lodash from 'lodash';
-let { open = $bindable(), elements = [], onselect, menuProps, drawerProps, } = $props();
-const menuPropsDefaultValue = {
+<script lang="ts" generics="Data">
+  import '../../../css/main.css'
+  import type { ComponentProps } from 'svelte';
+  import MenuOrDrawer from "./MenuOrDrawer.svelte";
+  import SelectableVerticalList from '../../simple/lists/SelectableVerticalList.svelte';
+  import lodash from 'lodash'
+
+  interface Props extends ComponentProps<typeof MenuOrDrawer> {
+    elements?: ComponentProps<typeof SelectableVerticalList<Data>>['elements'];
+    onselect?: ComponentProps<typeof SelectableVerticalList<Data>>['onselect']
+  }
+
+  let { 
+    open = $bindable(),
+    elements = [],
+    onselect,
+    menuProps,
+    drawerProps,
+  }: Props = $props();
+
+  const menuPropsDefaultValue = {
     anchor: 'bottom-center',
     stayInViewport: true,
     flipOnOverflow: false,
@@ -16,28 +32,36 @@ const menuPropsDefaultValue = {
     _minWidth: '100px',
     _borderRadius: '5px',
     openingId: undefined
-};
-let finalMenuProps = $derived(lodash.clone(lodash.merge(menuPropsDefaultValue, menuProps)));
-const drawerPropsDefaultValue = {
+  }
+
+  let finalMenuProps = $derived(
+    lodash.clone(lodash.merge(menuPropsDefaultValue, menuProps))
+  )
+
+  const drawerPropsDefaultValue = {
     position: 'bottom'
-};
-let finalDrawerProps = $derived(lodash.clone(lodash.merge(drawerPropsDefaultValue, drawerProps)));
-let selected = $state();
-let focused = $state();
-$effect(() => {
-    if (!!selected)
-        selected = undefined;
-});
-$effect(() => {
-    if (!!focused && !open)
-        focused = undefined;
-});
-function handleOnSelect(e) {
-    open = false;
-    if (onselect) {
-        onselect(e);
+  }
+
+  let finalDrawerProps = $derived(
+    lodash.clone(lodash.merge(drawerPropsDefaultValue, drawerProps))
+  )
+
+  let selected: ArrayElement<NonNullable<ComponentProps<typeof SelectableVerticalList<Data>>['elements']>>['name'] | undefined = $state()
+  let focused: ArrayElement<NonNullable<ComponentProps<typeof SelectableVerticalList<Data>>['elements']>>['name'] | undefined = $state()
+  $effect(() => {
+    if(!!selected) selected = undefined
+  })
+  $effect(() => {
+    if(!!focused && !open) focused = undefined
+  })
+
+  function handleOnSelect(e: Parameters<NonNullable<ComponentProps<typeof SelectableVerticalList<Data>>['onselect']>>[0]){
+    open = false
+
+    if(onselect){
+      onselect(e)
     }
-}
+  }
 </script>
 
 <MenuOrDrawer

package/dist/components/composed/common/MenuOrDrawerOptions.svelte.d.ts

@@ -1,16 +1,21 @@
 export type ArrayElement<ArrayType extends readonly unknown[]> = ArrayType extends readonly (infer ElementType)[] ? ElementType : never;
 import '../../../css/main.css';
-declare class __sveltets_Render<Data> {
-    props(): import("./MenuOrDrawer.svelte").Props & {
-        elements?: import("../../simple/lists/SelectableVerticalList.svelte").Element<Data>[] | undefined;
-        onselect?: ((event: {
-            detail: {
-                element: import("../../simple/lists/SelectableVerticalList.svelte").Element<Data>;
-            };
-        }) => void) | undefined;
+import type { ComponentProps } from 'svelte';
+import SelectableVerticalList from '../../simple/lists/SelectableVerticalList.svelte';
+declare function $$render<Data>(): {
+    props: import("./MenuOrDrawer.svelte").Props & {
+        elements?: ComponentProps<typeof SelectableVerticalList<Data>>["elements"];
+        onselect?: ComponentProps<typeof SelectableVerticalList<Data>>["onselect"];
     };
-    events(): {};
-    slots(): {};
+    exports: {};
+    bindings: "open";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<Data> {
+    props(): ReturnType<typeof $$render<Data>>['props'];
+    events(): ReturnType<typeof $$render<Data>>['events'];
+    slots(): ReturnType<typeof $$render<Data>>['slots'];
     bindings(): "open";
     exports(): {};
 }

package/dist/components/composed/common/QuickActions.css

@@ -1,14 +1,14 @@
 :root {
-  --quick-actions-default-background-color: rgb(var(--global-color-background-200));
+  --quick-actions-default-background-color: rgb(var(--global-color-background-300));
   --quick-actions-default-selected-items-button-background-color: rgb(var(--global-color-background-500));
-  --quick-actions-default-selected-items-button-background-color-hover: rgb(var(--global-color-background-300));
-  --quick-actions-default-selected-items-button-background-color-disabled: rgb(var(--global-color-background-300), .5);
+  --quick-actions-default-selected-items-button-background-color-hover: rgb(var(--global-color-background-400));
+  --quick-actions-default-selected-items-button-background-color-disabled: rgb(var(--global-color-background-400), .5);
   --quick-actions-default-selected-items-button-color-disabled: rgb(var(--global-color-contrast-900), .5);
   --quick-actions-default-z-index: 48;
 
   --quick-actions-default-buttons-background-color: var(--quick-actions-background-color, var(--quick-actions-default-background-color));
-  --quick-actions-default-buttons-background-color-disabled: rgb(var(--global-color-background-300), .5);
-  --quick-actions-default-buttons-background-color-hover: rgb(var(--global-color-background-300));
+  --quick-actions-default-buttons-background-color-disabled: rgb(var(--global-color-background-400), .5);
+  --quick-actions-default-buttons-background-color-hover: rgb(var(--global-color-background-400));
   --quick-actions-default-buttons-color: rgb(var(--global-color-contrast-900));
   --quick-actions-default-buttons-color-disabled: rgb(var(--global-color-contrast-900), .5)
 }

package/dist/components/composed/common/QuickActions.svelte

@@ -1,30 +1,66 @@
-<script module lang="ts">export {};
+<script module lang="ts">
+  export type Action = {
+    label: string;
+    icon?: string;
+    disabled?: boolean;
+    loading?: boolean;
+    info?: string;
+    disabledInfo?: string
+    onClick: NonNullable<ComponentProps<typeof Button>['onclick']>
+  };
 </script>
 
-<script lang="ts">import { Button, Icon, mediaQuery, ToolTip } from "../../..";
-import { fly } from "svelte/transition";
-import { cubicIn } from "svelte/easing";
-import MenuOrDrawer from "./MenuOrDrawer.svelte";
-import './QuickActions.css';
-let { selectedItems, disabled, actionsForSelectedItems, position = 'top', lang = 'en', onClose, } = $props();
-let actions = $state([]), extraActions = $state([]), slotSelectActionsContainer = $state(), moreActionsActivator = $state(), openMoreActions = $state(false), infoActivators = $state({}), disabledInfoActivators = $state({});
-$effect(() => {
+<script lang="ts">
+  import { Button, Icon, mediaQuery, ToolTip } from "../../..";
+  import type { ComponentProps } from "svelte";
+  import { fly } from "svelte/transition";
+  import { cubicIn } from "svelte/easing";
+  import MenuOrDrawer from "./MenuOrDrawer.svelte";
+  import './QuickActions.css'
+
+  interface Props {
+    selectedItems: number;
+    disabled?: boolean;
+    actionsForSelectedItems: Action[];
+    position?: 'top' | 'bottom';
+    lang?: 'it' | 'en';
+    onClose?: () => void
+  }
+
+  let {
+    selectedItems,
+    disabled,
+    actionsForSelectedItems,
+    position = 'top',
+    lang = 'en',
+    onClose,
+  }: Props = $props();
+
+  let actions: Action[] = $state([]),
+    extraActions: Action[] = $state([]),
+    slotSelectActionsContainer: HTMLElement | undefined = $state(),
+    moreActionsActivator: HTMLElement | undefined = $state(),
+    openMoreActions: boolean = $state(false),
+    infoActivators: { [actionLabel: string]: HTMLElement } = $state({}),
+    disabledInfoActivators: { [actionLabel: string]: HTMLElement } = $state({});
+
+  $effect(() => {
     if (!!slotSelectActionsContainer) {
-        let numberOfSplit = $mediaQuery.xl ? 5 :
-            $mediaQuery.l ? 4 :
-                $mediaQuery.m ? 2 :
-                    $mediaQuery.s ? 0 :
-                        $mediaQuery.xs ? 0 : 3;
-        if (actionsForSelectedItems.length > numberOfSplit) {
-            extraActions = actionsForSelectedItems.slice(numberOfSplit);
-            actions = actionsForSelectedItems.slice(0, numberOfSplit);
-        }
-        else {
-            actions = actionsForSelectedItems;
-            extraActions = [];
-        }
+      let numberOfSplit = $mediaQuery.xl ? 5 :
+        $mediaQuery.l ? 4 :
+        $mediaQuery.m ? 2 :
+        $mediaQuery.s ? 0 :
+        $mediaQuery.xs ? 0 : 3
+
+      if (actionsForSelectedItems.length > numberOfSplit) {
+        extraActions = actionsForSelectedItems.slice(numberOfSplit);
+        actions = actionsForSelectedItems.slice(0, numberOfSplit);
+      } else {
+        actions = actionsForSelectedItems;
+        extraActions = [];
+      }
     }
-});
+  })
 </script>
 
 {#if selectedItems > 0}
@@ -98,7 +134,11 @@ $effect(() => {
               --circular-loader-height="17px"
               disabled={action.disabled || action.loading || disabled}
               loading={action.loading}
-              onclick={action.onClick}
+              onclick={e => {
+                action.loading = true
+                action.onClick(e)
+                action.loading = false
+              }}
             >
               <div class="action" bind:this={disabledInfoActivators[action.label]}>
                 {#if action.icon}
@@ -130,8 +170,7 @@ $effect(() => {
                   --button-hover-color: var(--quick-actions-buttons-color, var(--quick-actions-default-buttons-color));
                   --button-focus-color: var(--quick-actions-buttons-color, var(--quick-actions-default-buttons-color));
                   --button-disabled-color: var(--quick-actions-buttons-color-disabled, var(--quick-actions-default-buttons-color-disabled));
-                  --button-box-shadow: none;"
-                  margin-left: 8px;
+                  --button-box-shadow: none;
                 '
                 --button-height="20px"
                 onclick={(e) => {
@@ -189,7 +228,11 @@ $effect(() => {
               --circular-loader-height="25px"
               disabled={action.disabled || action.loading || disabled}
               loading={action.loading}
-              onclick={action.onClick}
+              onclick={e => {
+                action.loading = true
+                action.onClick(e)
+                action.loading = false
+              }}
             >
               <div class="action" bind:this={disabledInfoActivators[action.label]}>
                 {#if action.icon}
@@ -350,13 +393,13 @@ $effect(() => {
     align-items: center;
     box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.2);
     position: fixed;
-    padding: 10px;
-    border-radius: 10px;
+    padding: 8px;
+    border-radius: 8px;
     background-color: var(
       --quick-actions-background-color,
       var(--quick-actions-default-background-color)
     );
-    gap: 15px;
+    gap: 4px;
     left: 79dvw;
   }
 
@@ -381,13 +424,13 @@ $effect(() => {
       align-items: center;
       box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.2);
       position: fixed;
-      padding: 10px;
-      border-radius: 10px;
+      padding: 8px;
+      border-radius: 8px;
       background-color: var(
         --quick-actions-background-color,
         var(--quick-actions-default-background-color)
       );
-      gap: 15px;
+      gap: 4px;
       left: 73dvw;
     }
   }

package/dist/components/composed/common/ToolTip.svelte

@@ -1,36 +1,55 @@
-<script lang="ts">import '../../../css/main.css';
-import Menu from "../../simple/common/Menu.svelte";
-import { tick } from 'svelte';
-let { activator = $bindable(), menuOpen = $bindable(false), menuProps = {}, appearTimeout = undefined, children, } = $props();
-let mouseEnterHandler = undefined, mouseLeaveHandler = undefined, appearTimeoutId = undefined;
-$effect(() => {
-    if (!!activator) {
-        if (!!mouseEnterHandler)
-            activator.removeEventListener('mouseenter', mouseEnterHandler);
-        if (!!mouseLeaveHandler)
-            activator.removeEventListener('mouseleave', mouseLeaveHandler);
-        mouseEnterHandler = () => {
-            if (appearTimeout !== undefined) {
-                if (appearTimeoutId !== undefined)
-                    clearTimeout(appearTimeoutId);
-                appearTimeoutId = setTimeout(async () => {
-                    menuOpen = true;
-                    await tick();
-                }, appearTimeout);
-            }
-            else {
-                menuOpen = true;
-            }
-        };
-        activator.addEventListener('mouseenter', mouseEnterHandler);
-        mouseLeaveHandler = () => {
-            if (appearTimeoutId !== undefined)
-                clearTimeout(appearTimeoutId);
-            menuOpen = false;
-        };
-        activator.addEventListener('mouseleave', mouseLeaveHandler);
+<script lang="ts">
+  import '../../../css/main.css'
+  import Menu from "../../simple/common/Menu.svelte";
+  import { tick, type ComponentProps, type Snippet } from 'svelte';
+
+  interface Props {
+    activator: HTMLElement;
+    menuOpen?: boolean;
+    menuProps?: ComponentProps<typeof Menu>;
+    appearTimeout?: number;
+    children?: Snippet<[]>
+  }
+
+  let {
+    activator = $bindable(),
+    menuOpen = $bindable(false),
+    menuProps = {},
+    appearTimeout = undefined,
+    children,
+  }: Props = $props();
+
+  let mouseEnterHandler: (() => void) | undefined = undefined,
+    mouseLeaveHandler: (() => void) | undefined = undefined,
+    appearTimeoutId: NodeJS.Timeout | undefined = undefined
+
+  $effect(() => {
+    if(!!activator) {
+      if(!!mouseEnterHandler) activator.removeEventListener('mouseenter', mouseEnterHandler)
+      if(!!mouseLeaveHandler) activator.removeEventListener('mouseleave', mouseLeaveHandler)
+  
+      mouseEnterHandler = () => {
+        if(appearTimeout !== undefined) {
+          if(appearTimeoutId !== undefined) clearTimeout(appearTimeoutId)
+  
+          appearTimeoutId = setTimeout(async () => {
+            menuOpen = true
+            await tick()
+          }, appearTimeout);
+        } else {
+          menuOpen = true
+        }
+      }
+      activator.addEventListener('mouseenter', mouseEnterHandler)
+  
+      mouseLeaveHandler = () => {
+        if(appearTimeoutId !== undefined) clearTimeout(appearTimeoutId)
+        menuOpen = false
+      }
+      activator.addEventListener('mouseleave', mouseLeaveHandler)
     }
-});
+  })
+
 </script>
 
 <Menu