@likable-hair/svelte 4.2.1 → 4.2.3

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/PeriodPicker.svelte

@@ -1,32 +1,36 @@
 <script lang="ts" generics="Data extends string">import SimpleTextField from "../../simple/forms/SimpleTextField.svelte";
 import MenuOrDrawer from "../common/MenuOrDrawer.svelte";
-import PeriodSelector from "./PeriodSelector.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', timeRangeLabel = lang == 'en' ? 'Select range mode' : 'Seleziona una modalità', ...rest } = $props();
-let open = $state(false), input = $state(), text = $derived(timeRangeLabel);
+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}
-  oninput={() => text = timeRangeLabel}
-  bind:value={text}
+  value={text}
   bind:input
+  disabled
 >
   {#snippet appendInnerSnippet()}
     <Icon
       name='mdi-chevron-down'
-      onclick={() => {
-        if (!open) open = true
-        else if (valid) open = false
-      }}
+      onclick={openMenu}
+      --icon-size="20px"
     ></Icon>
   {/snippet}
 </SimpleTextField>
@@ -59,8 +63,8 @@ function handleChange(event) {
         onchange={handleChange}
         bind:timespanSettings
         bind:valid
-        bind:timeRangeLabel
         bind:isSelectionMode
+        {quickSelectOptions}
         {lang}
         {...rest}
       ></PeriodSelector>

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

@@ -1,15 +1,4 @@
-<script module lang="ts">"use strict";
-</script>
-
-<script lang="ts" generics="T extends string = string">import Dropdown from "./Dropdown.svelte";
-import SimpleTextField from "../../simple/forms/SimpleTextField.svelte";
-import SelectableVerticalList from "../../simple/lists/SelectableVerticalList.svelte";
-import DatePicker from "../../simple/dates/DatePicker.svelte";
-import { fly } from "svelte/transition";
-import Icon from "../../simple/media/Icon.svelte";
-import Chip from "../../simple/navigation/Chip.svelte";
-import { tick } from "svelte";
-const defaultQuickOptions = {
+<script module lang="ts">export const defaultQuickOptions = {
     'it': [
         { value: 'today', label: 'Oggi' },
         { value: 'this-week', label: 'Questa settimana' },
@@ -29,7 +18,56 @@ const defaultQuickOptions = {
         { value: 'total', label: 'All time' },
     ],
 };
-let { timespanSettings = $bindable(), lang = 'en', quickSelectOptions = defaultQuickOptions[lang], valid = $bindable(), mode = 'default', locale = lang, showTimeRangeLabel = false, isSelectionMode = $bindable(), timeRangeLabel = $bindable(), onchange, quickRangeConvertor, } = $props();
+export function getPeriodLabel(settings, lang = 'en', quickOptions = defaultQuickOptions[lang]) {
+    if (!settings?.method)
+        return lang == 'en' ? 'Select range mode' : 'Seleziona una modalità';
+    if (settings.method === 'picker') {
+        let fromStr = settings.values?.from ? new Date(settings.values.from).toLocaleDateString(lang) : '';
+        let toStr = settings.values?.to ? new Date(settings.values.to).toLocaleDateString(lang) : '';
+        if (fromStr && toStr)
+            return `${lang == 'en' ? 'From' : 'Dal'} ${fromStr} ${lang == 'en' ? 'to' : 'al'} ${toStr}`;
+        if (fromStr)
+            return `${lang == 'en' ? 'From' : 'Dal'} ${fromStr}`;
+        if (toStr)
+            return `${lang == 'en' ? 'Until' : 'Fino al'} ${toStr}`;
+        return lang == 'en' ? 'Select dates' : 'Seleziona date';
+    }
+    if (settings.method === 'quick') {
+        return quickOptions.find(o => o.value === settings.values)?.label || (lang == 'en' ? 'Select a period' : 'Seleziona un periodo');
+    }
+    if (settings.method === 'rolling') {
+        const num = settings.values?.numberOfUnits;
+        const unit = settings.values?.measurementUnit;
+        const dir = settings.values?.direction ?? 'last';
+        if (!unit || !num)
+            return lang == 'en' ? 'Configure rolling window' : 'Configura periodo';
+        let unitLabel = '';
+        if (unit === 'days')
+            unitLabel = lang == 'en' ? 'Days' : 'Giorni';
+        if (unit === 'weeks')
+            unitLabel = lang == 'en' ? 'Weeks' : 'Settimane';
+        if (unit === 'months')
+            unitLabel = lang == 'en' ? 'Months' : 'Mesi';
+        if (unit === 'years')
+            unitLabel = lang == 'en' ? 'Years' : 'Anni';
+        const dirLabel = dir === 'next'
+            ? (lang == 'en' ? 'Next' : unit == 'weeks' ? 'Prossime' : 'Prossimi')
+            : (lang == 'en' ? 'Last' : unit == 'weeks' ? 'Ultime' : 'Ultimi');
+        return `${dirLabel} ${num} ${unitLabel}`;
+    }
+    return lang == 'en' ? 'Select range mode' : 'Seleziona una modalità';
+}
+</script>
+
+<script lang="ts" generics="T extends string = string">import Dropdown from "./Dropdown.svelte";
+import SimpleTextField from "../../simple/forms/SimpleTextField.svelte";
+import SelectableVerticalList from "../../simple/lists/SelectableVerticalList.svelte";
+import DatePicker from "../../simple/dates/DatePicker.svelte";
+import { fly } from "svelte/transition";
+import Icon from "../../simple/media/Icon.svelte";
+import Chip from "../../simple/navigation/Chip.svelte";
+import { tick } from "svelte";
+let { timespanSettings = $bindable(), lang = 'en', quickSelectOptions = defaultQuickOptions[lang], valid = $bindable(), mode = 'default', locale = lang, showTimeRangeLabel = false, isSelectionMode = $bindable(), onchange, quickRangeConvertor, setTimespanLabel, } = $props();
 if (!timespanSettings) {
     timespanSettings = {};
 }
@@ -40,33 +78,7 @@ $effect(() => {
     if (localValid != valid)
         valid = localValid;
 });
-$effect(() => {
-    if (!timespanSettings?.method) {
-        timeRangeLabel = lang == 'en' ? 'Select range mode' : 'Seleziona una modalità';
-        return;
-    }
-    if (timespanSettings.method == 'picker') {
-        timeRangeLabel = formatDateLabel(timespanSettings.values?.from, timespanSettings.values?.to);
-        return;
-    }
-    else if (timespanSettings.method == 'quick') {
-        timeRangeLabel = quickSelectOptions.find(o => o.value == timespanSettings?.values)?.label || (lang == 'en' ? 'Select a period' : 'Seleziona un periodo');
-        return;
-    }
-    else if (timespanSettings.method == 'rolling') {
-        const num = rollingNumberOfUnits ?? undefined;
-        const unitLabel = rollingMeasurementOfUnit?.label;
-        const dirLabel = rollingDirection === 'next'
-            ? lang == 'en' ? 'Next' : rollingMeasurementOfUnit?.value == 'weeks' ? 'Prossime' : 'Prossimi'
-            : lang == 'en' ? 'Last' : rollingMeasurementOfUnit?.value == 'weeks' ? 'Ultime' : 'Ultimi';
-        if (!unitLabel || !num) {
-            timeRangeLabel = lang == 'en' ? 'Configure rolling window' : 'Configura periodo';
-            return;
-        }
-        timeRangeLabel = `${dirLabel} ${num} ${unitLabel}`;
-        return;
-    }
-});
+let timeRangeLabel = $derived(setTimespanLabel ? setTimespanLabel({ timespanSettings }) : getPeriodLabel(timespanSettings, lang, quickSelectOptions));
 let rollingAutocompleteValues = [
     { value: 'days', label: lang == 'en' ? 'Days' : 'Giorni' },
     { value: 'weeks', label: lang == 'en' ? 'Weeks' : 'Settimane' },

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

@@ -14,12 +14,26 @@ type TimespanMap<T extends string> = {
     rolling: RollingSelectValues;
     picker: PickerSelectValues;
 };
-type TimespanSettings<T extends string = string> = {
+export type TimespanSettings<T extends string = string> = {
     [K in keyof TimespanMap<T>]: {
         method?: K;
         values?: TimespanMap<T>[K];
     };
 }[keyof TimespanMap<T>];
+export declare const defaultQuickOptions: {
+    it: {
+        value: string;
+        label: string;
+    }[];
+    en: {
+        value: string;
+        label: string;
+    }[];
+};
+export declare function getPeriodLabel<T extends string>(settings: TimespanSettings<T> | undefined, lang?: 'en' | 'it', quickOptions?: {
+    value: string | T;
+    label: string;
+}[]): string;
 declare class __sveltets_Render<T extends string = string> {
     props(): {
         timespanSettings?: TimespanSettings<T> | undefined;
@@ -32,7 +46,6 @@ declare class __sveltets_Render<T extends string = string> {
         lang?: "it" | "en";
         locale?: "it" | "en";
         showTimeRangeLabel?: boolean;
-        timeRangeLabel?: string;
         isSelectionMode?: boolean;
         onchange?: ((event: {
             timespanSettings?: TimespanSettings<T> | undefined;
@@ -41,10 +54,13 @@ declare class __sveltets_Render<T extends string = string> {
             from?: Date;
             to: Date;
         } | undefined) | undefined;
+        setTimespanLabel?: ((params: {
+            timespanSettings: TimespanSettings<T> | undefined;
+        }) => string) | undefined;
     };
     events(): {};
     slots(): {};
-    bindings(): "timespanSettings" | "valid" | "isSelectionMode" | "timeRangeLabel";
+    bindings(): "timespanSettings" | "valid" | "isSelectionMode";
     exports(): {};
 }
 interface $$IsomorphicComponent {

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

@@ -257,6 +257,7 @@ function handleSelect(item, shiftKeyPressed) {
           <div
             style:display=flex
             style:align-items=middle
+            style:justify-content=center
             style:padding="8px 0px"
           >
             <Checkbox

package/dist/components/simple/lists/SimpleTable.svelte

@@ -460,7 +460,6 @@ function resizeHeader(th, header) {
                 >
                   <div
                     class="row-append-cell"
-                    style="display: inline-block; white-space: nowrap;"
                   >
                     {@render appendSnippet?.({ index: i, item })}
                   </div>

package/package.json

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