@likable-hair/svelte 4.3.0 → 4.3.1

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

@@ -18,14 +18,16 @@
     ]>
   }
 
-  let { 
+  let {
     open = $bindable(),
     drawerProps,
-    menuProps,
+    menuProps = $bindable(),
     children,
   }: Props = $props();
 
-  const menuPropsDefaultValue = {
+  if (!menuProps) menuProps = {}
+
+  const menuPropsDefaultValue: Omit<ComponentProps<typeof Menu>, 'open'> = {
     closeOnClickOutside: true,
     _boxShadow: "rgb(var(--global-color-grey-900), .5) 0px 2px 4px",
     _height: "fit-content",
@@ -37,31 +39,37 @@
   }
 
   let finalMenuProps = $derived(
-    lodash.clone(lodash.merge(menuPropsDefaultValue, menuProps))
+    lodash.merge({}, menuPropsDefaultValue, menuProps)
   )
 
-  const drawerPropsDefaultValue = {
+  const drawerPropsDefaultValue: Omit<ComponentProps<typeof Drawer>, 'open'> = {
     position: 'bottom'
   }
 
   let finalDrawerProps = $derived(
-    lodash.clone(lodash.merge(drawerPropsDefaultValue, drawerProps))
+    lodash.merge({}, drawerPropsDefaultValue, drawerProps)
   )
 </script>
 
 <MediaQuery>
-  {#snippet defaultSnippet({ mAndDown})}
+  {#snippet defaultSnippet({ mAndDown })}
     {#if mAndDown}
       <Drawer
-        bind:open={open}
         {...finalDrawerProps}
+        bind:open={open}
       >
         {@render children?.({ isDrawer: true, isMenu: false })}
       </Drawer>
     {:else}
       <Menu
-        bind:open={open}
         {...finalMenuProps}
+        bind:open
+        bind:flipOnOverflow={menuProps.flipOnOverflow}
+        bind:refreshPosition={menuProps.refreshPosition}
+        bind:stayInViewport={menuProps.stayInViewport}
+        bind:activator={menuProps.activator}
+        bind:menuElement={menuProps.menuElement}
+        bind:openingId={menuProps.openingId}
       >
         {@render children?.({ isDrawer: false, isMenu: true })}
       </Menu>

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

@@ -13,6 +13,6 @@ export interface Props {
         }
     ]>;
 }
-declare const MenuOrDrawer: import("svelte").Component<Props, {}, "open">;
+declare const MenuOrDrawer: import("svelte").Component<Props, {}, "open" | "menuProps">;
 type MenuOrDrawer = ReturnType<typeof MenuOrDrawer>;
 export default MenuOrDrawer;

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

@@ -12,7 +12,7 @@
 
 <script lang="ts">
   import { Button, Icon, mediaQuery, ToolTip } from "../../..";
-  import type { ComponentProps } from "svelte";
+  import type { ComponentProps, Snippet } from "svelte";
   import { fly } from "svelte/transition";
   import { cubicIn } from "svelte/easing";
   import MenuOrDrawer from "./MenuOrDrawer.svelte";
@@ -25,6 +25,7 @@
     position?: 'top' | 'bottom';
     lang?: 'it' | 'en';
     onClose?: () => void
+    selectedItemsTextSnippet?: Snippet<[]>
   }
 
   let {
@@ -34,6 +35,7 @@
     position = 'top',
     lang = 'en',
     onClose,
+    selectedItemsTextSnippet,
   }: Props = $props();
 
   let actions: Action[] = $state([]),
@@ -110,8 +112,10 @@
             if(onClose) onClose()
           }}
         >
-          {selectedItems} {lang == 'en' ? 'items selected' : 'righe selezionate'}
-          <Icon name="mdi-close" />
+          {#if selectedItemsTextSnippet}{@render selectedItemsTextSnippet()}{:else}
+            {selectedItems} {lang == 'en' ? 'items selected' : 'righe selezionate'}
+            <Icon name="mdi-close" />
+          {/if}
         </button>
       </div>
       <div class="select-actions-container">

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

@@ -8,7 +8,7 @@ export type Action = {
     onClick: NonNullable<ComponentProps<typeof Button>['onclick']>;
 };
 import { Button } from "../../..";
-import type { ComponentProps } from "svelte";
+import type { ComponentProps, Snippet } from "svelte";
 import './QuickActions.css';
 interface Props {
     selectedItems: number;
@@ -17,6 +17,7 @@ interface Props {
     position?: 'top' | 'bottom';
     lang?: 'it' | 'en';
     onClose?: () => void;
+    selectedItemsTextSnippet?: Snippet<[]>;
 }
 declare const QuickActions: import("svelte").Component<Props, {}, "">;
 type QuickActions = ReturnType<typeof QuickActions>;

package/dist/components/composed/dashboard/DashboardShaper.svelte

@@ -272,16 +272,7 @@
   }
 
   function calculateWidgetsFromLocalWidgets() {
-		widgets = widgetCells?.map((lWidget) => {
-			return {
-				id: lWidget.widget.id,
-				name: lWidget.widget.name,
-				height: lWidget.widget.height,
-				width: lWidget.widget.width,
-				left: lWidget.widget.left,
-				top: lWidget.widget.top,
-			}
-		})
+		widgets = widgetCells?.map((lWidget) => lWidget.widget)
 	}
 
   function closeAddWidgetDialog() {

package/dist/components/composed/forms/Dropdown.svelte

@@ -23,6 +23,7 @@
     height?: string;
     minWidth?: string;
     menuWidth?: string;
+    menuAnchor?: ComponentProps<typeof Autocomplete>['menuAnchor'];
     mobileDrawer?: boolean;
     disabled?: boolean;
     onchange?: (event: {
@@ -61,6 +62,7 @@
     height,
     minWidth = 'none',
     menuWidth = width,
+    menuAnchor,
     mobileDrawer = false,
     disabled = false,
     onchange,
@@ -108,6 +110,7 @@
   {height}
   {menuWidth}
   {itemLabelSnippet}
+  {menuAnchor}
 >
   {#snippet selectionContainerSnippet({ openMenu, handleKeyDown })}
     <Button

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

@@ -19,6 +19,7 @@ declare function $$render<Data>(): {
         height?: string;
         minWidth?: string;
         menuWidth?: string;
+        menuAnchor?: ComponentProps<typeof Autocomplete>["menuAnchor"];
         mobileDrawer?: boolean;
         disabled?: boolean;
         onchange?: (event: {

package/dist/components/composed/forms/PeriodSelector.svelte

@@ -83,7 +83,7 @@
 
       const dirLabel = dir === 'next' 
         ? (lang == 'en' ? 'Next' : unit == 'weeks' ? 'Prossime' : 'Prossimi')
-        : (lang == 'en' ? 'Last' : unit == 'weeks' ? 'Ultime' : 'Ultimi');
+        : (lang == 'en' ? 'Last' : unit == 'weeks' ? 'Scorse' : 'Scorsi');
 
       return `${dirLabel} ${num} ${unitLabel}`;
     }
@@ -570,6 +570,7 @@
                   mobileDrawer
                   clearable={false}
                   menuWidth='fit-content'
+                  menuAnchor='bottom'
                   openingId='rolling-direction'
                 ></Dropdown>
               </div>
@@ -581,6 +582,7 @@
                   oninput={() => handleRollingInput()}
                   --simple-textfield-width="100%"
                   --simple-textfield-margin-bottom="0px"
+                  --simple-textfield-border-radius="4px"
                 ></SimpleTextField>
               </div>
 

package/dist/components/composed/list/EnhancedPaginatedTable.svelte.d.ts

@@ -146,6 +146,7 @@ declare function $$render<Item extends {
             rowsPerPage: number;
         }]> | undefined;
         totalsSnippet?: import("svelte").Snippet<[]>;
+        selectedItemsTextSnippet?: ComponentProps<typeof import("../../..").QuickActions>["selectedItemsTextSnippet"];
     } & {
         headersToShowInTable: ComponentProps<typeof PaginatedTable<Item, Data>>["headers"];
         pinnableColumns?: boolean;

package/dist/components/composed/list/PaginatedTable.svelte

@@ -105,6 +105,7 @@
       ]
     >;
     totalsSnippet?: Snippet<[]>
+    selectedItemsTextSnippet?: ComponentProps<typeof QuickActions>['selectedItemsTextSnippet']
   }
 
   let {
@@ -172,6 +173,7 @@
     totalsSnippet,
     oncolumnResize,
     prependSnippet: prependSnippetInternal,
+    selectedItemsTextSnippet,
     ...rest
   }: Props = $props();
 
@@ -374,6 +376,7 @@
             selectedAll = false
             selectedItems = []
           }}
+          {selectedItemsTextSnippet}
         />
       {/if}
 

package/dist/components/composed/list/PaginatedTable.svelte.d.ts

@@ -5,6 +5,7 @@ import { type ComponentProps, type Snippet } from "svelte";
 import Filters from "../search/Filters.svelte";
 import type Builder from "../../../utils/filters/builder";
 import QuickFilters from "../search/QuickFilters.svelte";
+import { QuickActions } from "../../..";
 import type { Action } from "../common/QuickActions.svelte";
 declare function $$render<Item extends {
     [key: string]: any;
@@ -145,6 +146,7 @@ declare function $$render<Item extends {
             rowsPerPage: number;
         }]>;
         totalsSnippet?: Snippet<[]>;
+        selectedItemsTextSnippet?: ComponentProps<typeof QuickActions>["selectedItemsTextSnippet"];
     };
     exports: {};
     bindings: "page" | "sortedBy" | "sortDirection" | "resizedColumnSizeWithPadding" | "filters" | "selectedItems" | "rowsPerPage" | "quickFilters" | "selectedAll";

package/dist/components/simple/common/Menu.svelte

@@ -56,7 +56,7 @@
     _width = 'auto',
     anchor = 'bottom',
     closeOnClickOutside = false,
-    flipOnOverflow = $bindable(false),
+    flipOnOverflow = $bindable(),
     inAnimation = fly,
     inAnimationConfig = {
       duration: 100,
@@ -68,8 +68,8 @@
       duration: 100,
       y: 10,
     },
-    refreshPosition = $bindable(false),
-    stayInViewport = $bindable(false),
+    refreshPosition = $bindable(),
+    stayInViewport = $bindable(),
     _borderRadius = undefined,
     _boxShadow = undefined,
     _left = undefined,

package/dist/components/simple/forms/Autocomplete.svelte

@@ -11,6 +11,13 @@
   import "../../../css/main.css";
   import "./Autocomplete.css";
   import { scrollInMenu } from "../common/scroller";
+  import Chip from "../navigation/Chip.svelte";
+  import Menu from "../common/Menu.svelte";
+  import { type ComponentProps, type Snippet } from "svelte";
+  import SimpleTextField from "./SimpleTextField.svelte";
+  import MenuOrDrawer from "../../composed/common/MenuOrDrawer.svelte";
+  import Drawer from "../navigation/Drawer.svelte";
+  import Icon from "../media/Icon.svelte";
 
   type ItemData = Item<Data>;
   interface Props {
@@ -166,9 +173,35 @@
     onclose,
   }: Props = $props();
 
-  let notVisibleChipNumber = $derived(
-    Math.max(((values || []).length || 0) - (maxVisibleChips || 0), 0),
-  );
+  let focusedIndex: number | undefined = $state(undefined),
+    input: HTMLElement | undefined = $state(),
+    filteredItems: ItemData[] = $state(items),
+    notVisibleChipNumber = $derived(
+      Math.max(((values || []).length || 0) - (maxVisibleChips || 0), 0),
+    ),
+    menuProps: NonNullable<ComponentProps<typeof MenuOrDrawer>['menuProps']> = $state({
+      _width: "",
+      _height: "auto",
+      _maxHeight: menuMaxHeight,
+      _boxShadow: menuBoxShadow,
+      _borderRadius: menuBorderRadius,
+      anchor: menuAnchor,
+      closeOnClickOutside: true,
+      stayInViewport: menuStayInViewport,
+      flipOnOverflow: menuFlipOnOverflow,
+      refreshPosition: false,
+      openingId: "autocomplete-menu",
+      menuElement: undefined,
+    })
+
+  $effect(() => {
+    menuProps._maxHeight = menuMaxHeight
+    menuProps._boxShadow = menuBoxShadow
+    menuProps._borderRadius = menuBorderRadius
+    menuProps.anchor = menuAnchor
+    menuProps.stayInViewport = menuStayInViewport
+    menuProps.flipOnOverflow = menuFlipOnOverflow
+  })
 
   function select(item: ItemData) {
     if (disabled) return;
@@ -238,10 +271,6 @@
     else select(item);
   }
 
-  let localMenuWidth: string | undefined | null = $state(undefined),
-    menuHeight = "auto",
-    refreshPosition = $state(false);
-
   function openMenu() {
     refreshMenuWidth();
     menuOpened = true;
@@ -249,17 +278,15 @@
 
   function refreshMenuWidth() {
     setTimeout(() => {
-      if (menuWidth !== undefined) localMenuWidth = menuWidth;
-      else if (!!activator) localMenuWidth = activator.offsetWidth + "px";
+      if (menuWidth !== undefined && menuWidth != null) menuProps._width = menuWidth;
+      else if (!!menuProps.activator) menuProps._width = menuProps.activator.offsetWidth + "px";
 
       setTimeout(() => {
-        refreshPosition = true;
+        menuProps.refreshPosition = true;
       }, 1);
     }, 1);
   }
 
-  let activator: HTMLElement | undefined = $state(),
-    focusedIndex: number | undefined = $state(undefined);
   function handleTextFieldFocus() {
     if (onfocus) {
       onfocus();
@@ -277,7 +304,6 @@
     // closeMenu()
   }
 
-  let menuElement: HTMLElement | undefined = $state();
   function handleKeyDown(event: KeyboardEvent) {
     if (onkeydown) {
       onkeydown(event);
@@ -307,16 +333,15 @@
       menuOpened = false;
     }
 
-    if (focusedIndex !== undefined && !!menuElement) {
-      let child = menuElement.querySelector<HTMLElement>(
+    if (focusedIndex !== undefined && !!menuProps.menuElement) {
+      let child = menuProps.menuElement.querySelector<HTMLElement>(
         ".item-" + focusedIndex,
       );
 
-      if (!!child) scrollInMenu(menuElement, child, "instant");
+      if (!!child) scrollInMenu(menuProps.menuElement, child, "instant");
     }
   }
 
-  let input: HTMLElement | undefined = $state();
   function handleContainerClick() {
     if (disabled) return;
 
@@ -330,7 +355,6 @@
     }
   }
 
-  let filteredItems: ItemData[] = $state(items);
   $effect(() => {
     if (searchText) {
       focusedIndex = undefined;
@@ -368,20 +392,12 @@
       }
     }
   });
-
-  import Chip from "../navigation/Chip.svelte";
-  import Menu from "../common/Menu.svelte";
-  import { type ComponentProps, type Snippet } from "svelte";
-  import SimpleTextField from "./SimpleTextField.svelte";
-  import MenuOrDrawer from "../../composed/common/MenuOrDrawer.svelte";
-  import Drawer from "../navigation/Drawer.svelte";
-  import Icon from "../media/Icon.svelte";
 </script>
 
 <svelte:window />
 
 <div
-  bind:this={activator}
+  bind:this={menuProps.activator}
   style:width
   style:max-width={maxWidth}
   style:min-width={minWidth}
@@ -470,20 +486,11 @@
     {@render menuSnippet()}
   {:else if !mobileDrawer}
     <Menu
-      {activator}
-      _width={localMenuWidth || ""}
-      _height={menuHeight}
-      _maxHeight={menuMaxHeight}
-      _boxShadow={menuBoxShadow}
-      _borderRadius={menuBorderRadius}
+      {...menuProps}
       bind:open={menuOpened}
-      anchor={menuAnchor}
-      closeOnClickOutside
-      stayInViewport={menuStayInViewport}
-      flipOnOverflow={menuFlipOnOverflow}
-      bind:refreshPosition
-      bind:menuElement
-      bind:openingId
+      bind:refreshPosition={menuProps.refreshPosition}
+      bind:menuElement={menuProps.menuElement}
+      bind:openingId={menuProps.openingId}
     >
       <ul
         class={clazz.menu || ""}
@@ -528,14 +535,7 @@
     </Menu>
   {:else}
     <MenuOrDrawer
-      menuProps={{
-        activator,
-        _width: localMenuWidth || "", 
-        _height: menuHeight,
-        _maxHeight: "300px",
-        _boxShadow: menuBoxShadow,
-        _borderRadius: menuBorderRadius,
-      }}
+      bind:menuProps
       drawerProps={{
         onclose
       }}

package/dist/components/simple/forms/SimpleTextField.svelte

@@ -6,7 +6,7 @@
   import type { Snippet } from 'svelte';
 
   interface Props extends HTMLInputAttributes{
-    value?: string | number;
+    value?: string | number | null;
     valueTo?: string | number;
     type?: "text" | "password" | "number" | "time" | "date";
     range?: boolean

package/dist/components/simple/forms/SimpleTextField.svelte.d.ts

@@ -3,7 +3,7 @@ import './SimpleTextField.css';
 import type { HTMLInputAttributes } from 'svelte/elements';
 import type { Snippet } from 'svelte';
 interface Props extends HTMLInputAttributes {
-    value?: string | number;
+    value?: string | number | null;
     valueTo?: string | number;
     type?: "text" | "password" | "number" | "time" | "date";
     range?: boolean;

package/dist/utils/filters/filters.js

@@ -98,7 +98,12 @@ export default class Converter {
     }
     applyDateFilter(params) {
         if (params.filter.mode == 'equal' && !!params.filter.value) {
-            params.builder.where(params.filter.column, '=', params.filter.value);
+            const startOfDay = new Date(params.filter.value);
+            startOfDay.setHours(0, 0, 0, 0);
+            const endOfDay = new Date(params.filter.value);
+            endOfDay.setHours(23, 59, 59, 999);
+            params.builder.where(params.filter.column, '>=', startOfDay);
+            params.builder.where(params.filter.column, '<=', endOfDay);
         }
         else if (params.filter.mode == 'greater' && !!params.filter.value) {
             params.builder.where(params.filter.column, '>', params.filter.value);
@@ -108,10 +113,14 @@ export default class Converter {
         }
         else if (params.filter.mode == 'between') {
             if (!!params.filter.from) {
-                params.builder.where(params.filter.column, '>=', params.filter.from);
+                const from = new Date(params.filter.from);
+                from.setHours(0, 0, 0, 0);
+                params.builder.where(params.filter.column, '>=', from);
             }
             if (!!params.filter.to) {
-                params.builder.where(params.filter.column, '<=', params.filter.to);
+                const to = new Date(params.filter.to);
+                to.setHours(23, 59, 59, 999);
+                params.builder.where(params.filter.column, '<=', to);
             }
         }
         return params.builder;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@likable-hair/svelte",
   "description": "A Svelte component for likablehair and others",
-  "version": "4.3.0",
+  "version": "4.3.1",
   "scripts": {
     "host": "vite --host",
     "dev": "vite dev",