@likable-hair/svelte 4.0.40 → 4.0.42

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

@@ -2,7 +2,23 @@
 import Drawer from '../../simple/navigation/Drawer.svelte';
 import Menu from '../../simple/common/Menu.svelte';
 import MediaQuery from '../../simple/common/MediaQuery.svelte';
-let { open = $bindable(false), activator = $bindable(), drawerPosition = $bindable('bottom'), menuAnchor = $bindable('bottom-center'), stayInViewport = $bindable(true), flipOnOverflow = $bindable(false), _boxShadow = "rgb(var(--global-color-grey-900), .5) 0px 2px 4px", _height = "fit-content", _width = undefined, _maxHeight = undefined, _minWidth = "100px", _borderRadius = "5px", openingId = $bindable(undefined), _drawerOverflow = undefined, children, onclose, onitemClick, } = $props();
+import lodash from 'lodash';
+let { open = $bindable(false), drawerProps, menuProps, children, } = $props();
+const menuPropsDefaultValue = {
+    closeOnClickOutside: true,
+    _boxShadow: "rgb(var(--global-color-grey-900), .5) 0px 2px 4px",
+    _height: "fit-content",
+    _minWidth: "100px",
+    _borderRadius: "5px",
+    _width: "",
+    anchor: 'bottom-center',
+    stayInViewport: true
+};
+let finalMenuProps = $derived(lodash.clone(lodash.merge(menuPropsDefaultValue, menuProps)));
+const drawerPropsDefaultValue = {
+    position: 'bottom'
+};
+let finalDrawerProps = $derived(lodash.clone(lodash.merge(drawerPropsDefaultValue, drawerProps)));
 </script>
 
 <MediaQuery>
@@ -10,28 +26,14 @@ let { open = $bindable(false), activator = $bindable(), drawerPosition = $bindab
     {#if mAndDown}
       <Drawer
         bind:open={open}
-        bind:position={drawerPosition}
-        _overflow={_drawerOverflow}
-        {onclose}
-        {onitemClick}
+        {...finalDrawerProps}
       >
         {@render children?.({ isDrawer: true, isMenu: false })}
       </Drawer>
     {:else}
       <Menu
-        bind:activator={activator}
         bind:open={open}
-        closeOnClickOutside
-        _boxShadow={_boxShadow}
-        _height={_height}
-        _maxHeight={_maxHeight}
-        _minWidth={_minWidth}
-        _borderRadius={_borderRadius}
-        _width={_width || ""}
-        anchor={menuAnchor}
-        bind:stayInViewport={stayInViewport}
-        bind:flipOnOverflow={flipOnOverflow}
-        bind:openingId
+        {...finalMenuProps}
       >
         {@render children?.({ isDrawer: false, isMenu: true })}
       </Menu>

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

@@ -4,28 +4,15 @@ import Menu from '../../simple/common/Menu.svelte';
 import type { ComponentProps, Snippet } from 'svelte';
 interface Props {
     open?: boolean;
-    activator: HTMLElement;
-    drawerPosition?: ComponentProps<typeof Drawer>['position'];
-    menuAnchor?: ComponentProps<typeof Menu>['anchor'];
-    stayInViewport?: ComponentProps<typeof Menu>['stayInViewport'];
-    flipOnOverflow?: ComponentProps<typeof Menu>['flipOnOverflow'];
-    _boxShadow?: string;
-    _height?: string;
-    _width?: string;
-    _maxHeight?: string;
-    _minWidth?: string;
-    _borderRadius?: string;
-    openingId?: ComponentProps<typeof Menu>['openingId'];
-    _drawerOverflow?: string;
+    drawerProps?: Omit<ComponentProps<typeof Drawer>, 'open'>;
+    menuProps?: Omit<ComponentProps<typeof Menu>, 'open'>;
     children?: Snippet<[
         {
             isDrawer: boolean;
             isMenu: boolean;
         }
     ]>;
-    onclose?: ComponentProps<typeof Drawer>['onclose'];
-    onitemClick?: ComponentProps<typeof Drawer>['onitemClick'];
 }
-declare const MenuOrDrawer: import("svelte").Component<Props, {}, "flipOnOverflow" | "open" | "stayInViewport" | "activator" | "openingId" | "drawerPosition" | "menuAnchor">;
+declare const MenuOrDrawer: import("svelte").Component<Props, {}, "open">;
 type MenuOrDrawer = ReturnType<typeof MenuOrDrawer>;
 export default MenuOrDrawer;

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

@@ -1,10 +1,27 @@
 <script lang="ts" module>export {};
 </script>
 
-<script lang="ts">import '../../../css/main.css';
+<script lang="ts" generics="Data">import '../../../css/main.css';
 import MenuOrDrawer from "./MenuOrDrawer.svelte";
 import SelectableVerticalList from '../../simple/lists/SelectableVerticalList.svelte';
-let { open = $bindable(false), activator = $bindable(), drawerPosition = 'bottom', menuAnchor = 'bottom-center', elements = [], stayInViewport = true, flipOnOverflow = false, _boxShadow = "rgb(var(--global-color-grey-900), .5) 0px 2px 4px", _height = "fit-content", _maxHeight = undefined, _minWidth = "100px", _borderRadius = "5px", openingId = undefined, onselect, } = $props();
+import lodash from 'lodash';
+let { open = $bindable(false), elements = [], onselect, menuProps, drawerProps, } = $props();
+const menuPropsDefaultValue = {
+    anchor: 'bottom-center',
+    stayInViewport: true,
+    flipOnOverflow: false,
+    _boxShadow: "rgb(var(--global-color-grey-900), .5) 0px 2px 4px",
+    _height: 'fit-content',
+    _maxHeight: undefined,
+    _minWidth: '100px',
+    _borderRadius: '5px',
+    openingId: undefined
+};
+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(() => {
@@ -25,18 +42,9 @@ function handleOnSelect(e) {
 
 <MenuOrDrawer
   bind:open
-  bind:activator
-  bind:drawerPosition
-  bind:menuAnchor
-  bind:stayInViewport
-  bind:flipOnOverflow
-  {_boxShadow}
-  {_height}
-  {_maxHeight}
-  {_minWidth}
-  {_borderRadius}
+  drawerProps={finalDrawerProps}
+  menuProps={finalMenuProps}
   --drawer-default-space={`${Math.min(elements?.length || 0, 5) * 56}px`}
-  bind:openingId
 >
   {#snippet children({ isDrawer, isMenu })}
     <div class="selectable-list-wrapper">

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

@@ -151,11 +151,15 @@ $effect(() => {
   <div class="menu-or-drawer">
     <MenuOrDrawer
       bind:open={openMoreActions}
-      activator={moreActionsActivator}
-      drawerPosition={position == 'bottom' ? 'top' : 'bottom'}
-      menuAnchor='bottom-center'
-      openingId='more-actions'
-      _drawerOverflow='hidden'
+      menuProps={{
+        activator: moreActionsActivator,
+        anchor: 'bottom-center',
+        openingId: 'more-actions',
+      }}
+      drawerProps={{
+        position: position == 'bottom' ? 'top' : 'bottom',
+        _overflow: 'hidden'  
+      }}
     >
       {#snippet children({ isDrawer, isMenu })}
         <div 

package/dist/components/composed/forms/AsyncAutocomplete.svelte.d.ts

@@ -96,7 +96,7 @@ declare class __sveltets_Render<Data> {
         onfocus?: (() => void) | undefined;
         onblur?: (() => void) | undefined;
         onkeydown?: ((e: KeyboardEvent) => void) | undefined;
-        onclose?: ComponentProps<typeof import("../common/MenuOrDrawer.svelte").default>["onclose"];
+        onclose?: ComponentProps<typeof import("../../..").Drawer>["onclose"];
     };
     events(): {};
     slots(): {};