@likable-hair/svelte 4.2.0 → 4.2.2

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

@@ -3,7 +3,7 @@ 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(false), drawerProps, menuProps, children, } = $props();
+let { open = $bindable(), drawerProps, menuProps, children, } = $props();
 const menuPropsDefaultValue = {
     closeOnClickOutside: true,
     _boxShadow: "rgb(var(--global-color-grey-900), .5) 0px 2px 4px",

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

@@ -5,7 +5,7 @@
 import MenuOrDrawer from "./MenuOrDrawer.svelte";
 import SelectableVerticalList from '../../simple/lists/SelectableVerticalList.svelte';
 import lodash from 'lodash';
-let { open = $bindable(false), elements = [], onselect, menuProps, drawerProps, } = $props();
+let { open = $bindable(), elements = [], onselect, menuProps, drawerProps, } = $props();
 const menuPropsDefaultValue = {
     anchor: 'bottom-center',
     stayInViewport: true,

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

@@ -1,4 +1,4 @@
-<script lang="ts">import './DashboardShaper.css';
+<script lang="ts" generics="Data, WidgetName extends string">import './DashboardShaper.css';
 import lodash from 'lodash';
 import { Dialog, Icon } from "../../..";
 import { createId } from "@paralleldrive/cuid2";
@@ -21,11 +21,12 @@ function calculateLocalWidgetsFromWidgets() {
         return {
             widget: {
                 id: w.id,
-                componentName: w.componentName,
+                name: w.name,
                 height: w.height,
                 width: w.width,
                 left: w.left,
                 top: w.top,
+                data: w.data,
             },
             columnSpanFrom: w.left,
             columnSpanTo: w.left + w.width,
@@ -149,7 +150,7 @@ function calculateWidgetsFromLocalWidgets() {
     widgets = widgetCells?.map((lWidget) => {
         return {
             id: lWidget.widget.id,
-            componentName: lWidget.widget.componentName,
+            name: lWidget.widget.name,
             height: lWidget.widget.height,
             width: lWidget.widget.width,
             left: lWidget.widget.left,
@@ -180,9 +181,15 @@ function availableSizes(params) {
           <div class="widget-cell-preview"></div>
         {:else}
 					{#if widgetCellSnippet}
-						{@render widgetCellSnippet({ widgetCell, removeWidgetCell })}
+						{@render widgetCellSnippet({ 
+              widgetCell: {
+                ...widgetCell,
+                title: availableWidgetCells.find((awc) => awc.name === widgetCell.widget?.name)?.title
+              },
+              removeWidgetCell
+            })}
 					{:else}
-						{widgetCell.widget.componentName}
+						{widgetCell.widget.name}
 					{/if}
         {/if}
       </div>
@@ -245,9 +252,9 @@ function availableSizes(params) {
               availableSizes: ws.availableSizes 
             }).length > 0)
             .sort((a, b) => {
-              if (a.label == 'Placeholder') return -1
-              if (a.label < b.label) return -1
-              if (a.label > b.label) return 1
+              if (a.title == 'Placeholder') return -1
+              if (a.title < b.title) return -1
+              if (a.title > b.title) return 1
               return 0
             }) as widgetSpec
           }
@@ -256,7 +263,7 @@ function availableSizes(params) {
                 {#if widgetSpec.icon}
                   <Icon name={widgetSpec.icon} --icon-size="30px" />
                 {/if}
-                <div class="widget-title">{widgetSpec.label}</div>
+                <div class="widget-title">{widgetSpec.title}</div>
                 <div class="widget-desc">{widgetSpec.description}</div>
               </div>
 
@@ -273,7 +280,7 @@ function availableSizes(params) {
                       addWidgetCell({
                         widget: {
                           id: createId(),
-                          componentName: widgetSpec.widgetComponentName,
+                          name: widgetSpec.name,
                           height: sizes[0],
                           width: sizes[1],
                           top: addWidgetInfo!.fromRow,
@@ -337,15 +344,15 @@ function availableSizes(params) {
 
 	.header {
 		display: flex;
-		padding: 30px 24px 16px;
+		padding: 20px;
 		gap: 12px;
 		background-color: var(--dashboard-shaper-dialog-header-background-color, var(--dashboard-shaper-default-dialog-header-background-color));
 		border-block-end: 1px solid rgb(var(--global-color-contrast-100));
-		height: 35px;
+		height: min-content;
 	}
   
   .title {
-		font-size: x-large;
+		font-size: 1.35rem;
 		font-weight: bold;
 		text-align: center;
 	}

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

@@ -1,104 +1,77 @@
 import './DashboardShaper.css';
 import type { Snippet } from "svelte";
-declare const DashboardShaper: import("svelte").Component<{
-    layoutWidth?: number;
-    layoutHeight?: number;
-    widgets: {
-        id: number | string;
-        componentName: string;
-        height: number;
-        width: number;
-        left: number;
-        top: number;
-    }[];
-    availableWidgetCells: {
-        widgetComponentName: string;
-        label: string;
-        description?: string;
-        icon: string;
-        availableSizes: [number, number][];
-    }[];
-    someRowSlotEmpty?: boolean;
-    preview?: boolean;
-    canAdd?: boolean;
-    lang?: "it" | "en";
-    onaddWidgetCell?: (event: {
-        widgetCell: {
-            widget: {
-                id: number | string;
-                componentName: string;
-                height: number;
-                width: number;
-                left: number;
-                top: number;
-            };
-            columnSpanFrom: number;
-            columnSpanTo: number;
-            rowSpanFrom: number;
-            rowSpanTo: number;
-            availableHeight?: number;
-            availableWidth?: number;
-        };
-    }) => void;
-    onremoveWidgetCell?: (event: {
-        widgetCell: {
-            widget: {
-                id: number | string;
-                componentName: string;
-                height: number;
-                width: number;
-                left: number;
-                top: number;
+declare class __sveltets_Render<Data, WidgetName extends string> {
+    props(): {
+        layoutWidth?: number;
+        layoutHeight?: number;
+        widgets: {
+            id: number | string;
+            name: WidgetName;
+            height: number;
+            width: number;
+            left: number;
+            top: number;
+            data?: Data | undefined;
+        }[];
+        availableWidgetCells: {
+            name: WidgetName;
+            title: string;
+            description?: string;
+            icon: string;
+            availableSizes: [number, number][];
+        }[];
+        someRowSlotEmpty?: boolean;
+        preview?: boolean;
+        canAdd?: boolean;
+        lang?: "it" | "en";
+        onaddWidgetCell?: ((event: {
+            widgetCell: {
+                widget: {
+                    id: number | string;
+                    name: WidgetName;
+                    height: number;
+                    width: number;
+                    left: number;
+                    top: number;
+                    data?: Data | undefined;
+                };
+                columnSpanFrom: number;
+                columnSpanTo: number;
+                rowSpanFrom: number;
+                rowSpanTo: number;
+                availableHeight?: number;
+                availableWidth?: number;
             };
-            columnSpanFrom: number;
-            columnSpanTo: number;
-            rowSpanFrom: number;
-            rowSpanTo: number;
-            availableHeight?: number;
-            availableWidth?: number;
-        };
-    }) => void;
-    widgetCellSnippet?: Snippet<[{
-        widgetCell: Omit<{
-            widget: {
-                id: number | string;
-                componentName: string;
-                height: number;
-                width: number;
-                left: number;
-                top: number;
+        }) => void) | undefined;
+        onremoveWidgetCell?: ((event: {
+            widgetCell: {
+                widget: {
+                    id: number | string;
+                    name: WidgetName;
+                    height: number;
+                    width: number;
+                    left: number;
+                    top: number;
+                    data?: Data | undefined;
+                };
+                columnSpanFrom: number;
+                columnSpanTo: number;
+                rowSpanFrom: number;
+                rowSpanTo: number;
+                availableHeight?: number;
+                availableWidth?: number;
             };
-            columnSpanFrom: number;
-            columnSpanTo: number;
-            rowSpanFrom: number;
-            rowSpanTo: number;
-            availableHeight?: number;
-            availableWidth?: number;
-        }, "widget"> & {
-            widget?: {
-                id: number | string;
-                componentName: string;
-                height: number;
-                width: number;
-                left: number;
-                top: number;
-            } | undefined;
-        };
-        removeWidgetCell: (params: {
-            id: string | number;
-        }) => void;
-    }]>;
-    widgetSelectionDialogHeaderSnippet?: Snippet<[]>;
-    addWidgetButtonSnippet?: Snippet<[{
-        handleAddClick: (params: {
-            slot: Omit<{
+        }) => void) | undefined;
+        widgetCellSnippet?: Snippet<[{
+            widgetCell: Omit<{
                 widget: {
                     id: number | string;
-                    componentName: string;
+                    name: WidgetName;
                     height: number;
                     width: number;
                     left: number;
                     top: number;
+                    data?: Data | undefined;
                 };
                 columnSpanFrom: number;
                 columnSpanTo: number;
@@ -109,23 +82,60 @@ declare const DashboardShaper: import("svelte").Component<{
             }, "widget"> & {
                 widget?: {
                     id: number | string;
-                    componentName: string;
+                    name: WidgetName;
                     height: number;
                     width: number;
                     left: number;
                     top: number;
+                    data?: Data | undefined;
                 } | undefined;
+            } & {
+                title?: string;
             };
-        }) => void;
-        slot: Parameters<(params: {
+            removeWidgetCell: (params: {
+                id: string | number;
+            }) => void;
+        }]> | undefined;
+        widgetSelectionDialogHeaderSnippet?: Snippet<[]>;
+        addWidgetButtonSnippet?: Snippet<[{
+            handleAddClick: (params: {
+                slot: Omit<{
+                    widget: {
+                        id: number | string;
+                        name: WidgetName;
+                        height: number;
+                        width: number;
+                        left: number;
+                        top: number;
+                        data?: Data | undefined;
+                    };
+                    columnSpanFrom: number;
+                    columnSpanTo: number;
+                    rowSpanFrom: number;
+                    rowSpanTo: number;
+                    availableHeight?: number;
+                    availableWidth?: number;
+                }, "widget"> & {
+                    widget?: {
+                        id: number | string;
+                        name: WidgetName;
+                        height: number;
+                        width: number;
+                        left: number;
+                        top: number;
+                        data?: Data | undefined;
+                    } | undefined;
+                };
+            }) => void;
             slot: Omit<{
                 widget: {
                     id: number | string;
-                    componentName: string;
+                    name: WidgetName;
                     height: number;
                     width: number;
                     left: number;
                     top: number;
+                    data?: Data | undefined;
                 };
                 columnSpanFrom: number;
                 columnSpanTo: number;
@@ -136,15 +146,28 @@ declare const DashboardShaper: import("svelte").Component<{
             }, "widget"> & {
                 widget?: {
                     id: number | string;
-                    componentName: string;
+                    name: WidgetName;
                     height: number;
                     width: number;
                     left: number;
                     top: number;
+                    data?: Data | undefined;
                 } | undefined;
             };
-        }) => void>[0]["slot"];
-    }]>;
-}, {}, "widgets" | "someRowSlotEmpty">;
-type DashboardShaper = ReturnType<typeof DashboardShaper>;
+        }]> | undefined;
+    };
+    events(): {};
+    slots(): {};
+    bindings(): "widgets" | "someRowSlotEmpty";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <Data, WidgetName extends string>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Data, WidgetName>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Data, WidgetName>['props']>, ReturnType<__sveltets_Render<Data, WidgetName>['events']>, ReturnType<__sveltets_Render<Data, WidgetName>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<Data, WidgetName>['bindings']>;
+    } & ReturnType<__sveltets_Render<Data, WidgetName>['exports']>;
+    <Data, WidgetName extends string>(internal: unknown, props: ReturnType<__sveltets_Render<Data, WidgetName>['props']> & {}): ReturnType<__sveltets_Render<Data, WidgetName>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
+}
+declare const DashboardShaper: $$IsomorphicComponent;
+type DashboardShaper<Data, WidgetName extends string> = InstanceType<typeof DashboardShaper<Data, WidgetName>>;
 export default DashboardShaper;

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

@@ -48,6 +48,7 @@ declare class __sveltets_Render<Data> {
         menuAnchor?: ComponentProps<typeof Menu>["anchor"];
         menuStayInViewport?: ComponentProps<typeof Menu>["stayInViewport"];
         menuFlipOnOverflow?: ComponentProps<typeof Menu>["flipOnOverflow"];
+        menuMaxHeight?: string;
         adaptInputWidth?: boolean;
         class?: {
             activator?: string;

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

@@ -49,6 +49,10 @@ let activator = $state(), refreshPosition = $state(false), menuElement = $state(
         }
     }
 };
+let selectableYears = $derived.by(() => {
+    const range = maxYearInRange - minYearInRange + 1;
+    return Array.from({ length: range }, (_, i) => minYearInRange + i);
+});
 function handleTextFieldFocus(mobile) {
     if (!mobile || !mobileDialog) {
         menuOpened = true;
@@ -128,10 +132,11 @@ function handleInputChange(e) {
                         selectedDateTo = undefined;
                 }
             }
-            if (oninput) {
+            if (oninput && (id == 'to' || id == 'from')) {
                 oninput({
                     detail: {
-                        datetime: id == "to" ? selectedDateTo : selectedDate
+                        datetime: id == "to" ? selectedDateTo : selectedDate,
+                        type: id,
                     }
                 });
             }
@@ -210,6 +215,7 @@ $effect(() => {
           {appendInnerSnippet}
           {prependSnippet}
           {appendSnippet}
+          autocomplete='off'
           --simple-textfield-default-padding='0.65rem 0.8rem'
           --simple-textfield-default-inner-gap='4px'
         >
@@ -248,6 +254,7 @@ $effect(() => {
             onyearClick={handleYearSelect}
             onmonthClick={handleMonthSelect}
             skipTabs
+            {selectableYears}
             {disabled}
             {type}
           ></DatePicker>
@@ -281,6 +288,7 @@ $effect(() => {
             onyearClick={handleYearSelect}
             onmonthClick={handleMonthSelect}
             skipTabs
+            {selectableYears}
             {disabled}
             {type}
           ></DatePicker>

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

@@ -33,6 +33,7 @@ declare const DatePickerTextField: import("svelte").Component<{
     oninput?: (event: {
         detail: {
             datetime: Date | undefined;
+            type: "from" | "to";
         };
     }) => void;
     activatorSnippet?: Snippet<[{

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

@@ -2,7 +2,7 @@
 import Autocomplete, {} from "../../../components/simple/forms/Autocomplete.svelte";
 import Button from '../../simple/buttons/Button.svelte';
 import Icon from '../../simple/media/Icon.svelte';
-let { items = [], values = $bindable([]), multiple = false, lang = 'en', searchText = $bindable(), maxVisibleChips, placeholder = lang === 'en' ? "Select" : "Seleziona", clearable = true, mandatory = true, icon, menuOpened = $bindable(false), openingId = $bindable("autocomplete-menu"), width, height, minWidth, menuWidth = width, mobileDrawer = false, disabled = false, onchange, itemLabelSnippet, labelSnippet, } = $props();
+let { items = [], values = $bindable([]), multiple = false, lang = 'en', searchText = $bindable(), maxVisibleChips, placeholder = lang === 'en' ? "Select" : "Seleziona", clearable = true, mandatory = true, icon, menuOpened = $bindable(false), openingId = $bindable("autocomplete-menu"), width, height, minWidth = 'none', menuWidth = width, mobileDrawer = false, disabled = false, onchange, itemLabelSnippet, labelSnippet, } = $props();
 let generatedLabel = $derived(values.length == 1 ? values[0].label : `${values.length} Selezionati`);
 function handleCloseClick(event) {
     if (event) {
@@ -44,11 +44,6 @@ function handleCloseClick(event) {
 >
   {#snippet selectionContainerSnippet({ openMenu, handleKeyDown })}
     <Button
-      --button-default-background-color="transparent"
-      --button-default-focus-background-color="rgb(var(--global-color-primary-400), .3)"
-      --button-default-focus-color="rgb(var(--global-color-contrast-900))"
-      --button-default-border="2px solid rgb(var(--global-color-primary-400))"
-      --button-default-color="rgb(var(--global-color-contrast-800))"
       onclick={openMenu}
       onkeydown={(event) => {
         handleKeyDown(event.detail.nativeEvent)
@@ -57,6 +52,20 @@ function handleCloseClick(event) {
           event.detail.nativeEvent.preventDefault()
         }
       }}
+      --button-padding="var(--dropdown-button-padding, 10px 12px)"
+      --button-border='var(--dropdown-button-border, none)'
+      --button-background-color='var(--dropdown-button-background-color, rgb(var(--global-color-background-300), .6))'
+      --button-hover-background-color='var(--dropdown-button-hover-color, rgb(var(--global-color-background-300), .6))'
+      --button-focus-background-color='var(--dropdown-button-focus-color, rgb(var(--global-color-background-300), .6))'
+      --button-active-background-color='var(--dropdown-button-active-color, rgb(var(--global-color-background-300), .6))'
+      --button-hover-color='var(--dropdown-button-hover-color, rgb(var(--global-color-contrast-800)))'
+      --button-color='var(--dropdown-button-color, rgb(var(--global-color-contrast-800)))'
+      --button-focus-color='var(--dropdown-button-focus-color, rgb(var(--global-color-contrast-800)))'
+      --button-border-radius='var(--dropdown-button-border-radius, 4px)'
+      --button-height='var(--dropdown-button-height, 38.78px)'
+      --button-active-box-shadow='var(--dropdown-button-active-box-shadow)'
+      --button-focus-box-shadow='var(--dropdown-button-focus-box-shadow)'
+      --button-box-sizing='var(--dropdown-button-box-sizing, border-box)'
     >
       {#if labelSnippet}
         {@render labelSnippet({ 

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

@@ -0,0 +1,115 @@
+<script lang="ts" generics="Data extends string">import SimpleTextField from "../../simple/forms/SimpleTextField.svelte";
+import MenuOrDrawer from "../common/MenuOrDrawer.svelte";
+import PeriodSelector, { getPeriodLabel } from "./PeriodSelector.svelte"; // Import helper
+import Button from "../../simple/buttons/Button.svelte";
+import { fly } from "svelte/transition";
+import Icon from "../../simple/media/Icon.svelte";
+let { onchange, timespanSettings = $bindable(), valid = $bindable(), isSelectionMode = $bindable(), lang = 'en', quickSelectOptions, ...rest } = $props();
+let open = $state(false), input = $state(), text = $derived(getPeriodLabel(timespanSettings, lang, quickSelectOptions));
+function handleChange(event) {
+    if (timespanSettings?.method == 'quick') {
+        open = false;
+    }
+    onchange?.(event);
+}
+function openMenu() {
+    if (!open)
+        open = true;
+    else if (valid)
+        open = false;
+}
+</script>
+
+<SimpleTextField
+  onfocus={() => open = true}
+  value={text}
+  bind:input
+  disabled
+>
+  {#snippet appendInnerSnippet()}
+    <Icon
+      name='mdi-chevron-down'
+      onclick={openMenu}
+      --icon-size="20px"
+    ></Icon>
+  {/snippet}
+</SimpleTextField>
+<MenuOrDrawer
+  bind:open
+  menuProps={{
+    activator: input,
+    _activatorGap: 16,
+    closeOnClickOutside: valid,
+    _offsetLeft: -16,
+    anchor: 'bottom',
+    flipOnOverflow: true,
+    stayInViewport: true,
+    openingId: 'period-picker',
+    _overflow: 'hidden',
+  }}
+  drawerProps={{
+    closeOnClickOutside: valid,
+    _space: 'min(50%,420px)',
+    _borderRadius: '4px',
+    _overflow: 'hidden',
+  }}
+>
+  {#snippet children({ isDrawer, isMenu })}
+    <div
+      class:menu={isMenu}
+      class:drawer={isDrawer}
+    >
+      <PeriodSelector
+        onchange={handleChange}
+        bind:timespanSettings
+        bind:valid
+        bind:isSelectionMode
+        {quickSelectOptions}
+        {lang}
+        {...rest}
+      ></PeriodSelector>
+      {#if !isSelectionMode}
+        <div
+          class:button-end={isMenu}
+          class:button-full={isDrawer}
+          in:fly={{ x: 200, duration: 250, delay: 200 }} 
+          out:fly={{ x: 200, duration: 250 }}
+        >
+          <Button
+            disabled={!valid}
+            onclick={() => open = false}
+          >
+            {lang == 'en' ? 'Apply' : 'Applica'}
+          </Button>
+        </div>
+      {/if}
+    </div>
+  {/snippet}
+</MenuOrDrawer>
+
+<style>
+  .menu {
+    padding: 8px;
+    box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.2);
+    border-radius: 4px;
+    background-color: rgb(var(--global-color-background-200));
+    width: 400px;
+    --period-selector-min-height: 290px;
+  }
+
+  .drawer {
+    padding: 12px;
+    --period-selector-max-width: none;
+    --period-selector-list-element-padding: 8px;
+  }
+
+  .button-end {
+    display: flex;
+    justify-content: end;
+  }
+
+  .button-full {
+    display: flex;
+    --button-width: 100%
+  }
+</style>

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

@@ -0,0 +1,21 @@
+import type { ComponentProps } from "svelte";
+import PeriodSelector from "./PeriodSelector.svelte";
+interface Props extends Omit<ComponentProps<typeof PeriodSelector<Data>>, 'showTimeRangeLabel'> {
+}
+declare class __sveltets_Render<Data extends string> {
+    props(): Props;
+    events(): {};
+    slots(): {};
+    bindings(): "timespanSettings" | "valid" | "isSelectionMode";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <Data extends string>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Data>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Data>['props']>, ReturnType<__sveltets_Render<Data>['events']>, ReturnType<__sveltets_Render<Data>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<Data>['bindings']>;
+    } & ReturnType<__sveltets_Render<Data>['exports']>;
+    <Data extends string>(internal: unknown, props: ReturnType<__sveltets_Render<Data>['props']> & {}): ReturnType<__sveltets_Render<Data>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const PeriodPicker: $$IsomorphicComponent;
+type PeriodPicker<Data extends string> = InstanceType<typeof PeriodPicker<Data>>;
+export default PeriodPicker;