@likable-hair/svelte 4.2.4 → 4.3.0

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

@@ -1,169 +1,302 @@
-<script lang="ts" generics="Data, WidgetName extends string">import './DashboardShaper.css';
-import lodash from 'lodash';
-import { Dialog, Icon } from "../../..";
-import { createId } from "@paralleldrive/cuid2";
-import Chip from "../../simple/navigation/Chip.svelte";
-const deepEqual = lodash.isEqual;
-let { layoutWidth = 6, layoutHeight = 4, widgets = $bindable([]), availableWidgetCells, someRowSlotEmpty = $bindable(true), preview = false, canAdd = true, lang = 'en', onaddWidgetCell, onremoveWidgetCell, widgetCellSnippet, widgetSelectionDialogHeaderSnippet, addWidgetButtonSnippet, } = $props();
-let widgetCells = $state([]);
-let normalizedWidgetGrid = $derived.by(() => {
-    return computeNormalizedWidgetGrid(widgetCells || [], layoutWidth, layoutHeight);
-}), filledWidgetGrid = $derived.by(() => {
-    return computeFilledWidgetGrid(normalizedWidgetGrid || [], layoutWidth, layoutHeight);
-}), addWidgetDialog = $state(false), addWidgetInfo = $state();
-$effect(() => {
-    if (widgets) {
-        calculateLocalWidgetsFromWidgets();
-    }
-});
-function calculateLocalWidgetsFromWidgets() {
-    widgetCells = widgets?.map((w) => {
-        return {
-            widget: {
-                id: w.id,
-                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,
-            rowSpanFrom: w.top,
-            rowSpanTo: w.top + w.height,
-        };
-    });
-}
-$effect(() => {
-    const newVal = (normalizedWidgetGrid || []).some((row) => {
-        for (let i = 0; i < layoutWidth; i += 1) {
-            if (row[i] === undefined)
-                return true;
+<script lang="ts" generics="Data, WidgetName extends string">
+  import './DashboardShaper.css'
+  import type { Snippet } from "svelte"
+	import lodash from 'lodash'
+  import { Dialog, Icon } from "../../..";
+  import { createId } from "@paralleldrive/cuid2";
+  import Chip from "../../simple/navigation/Chip.svelte";
+
+	const deepEqual = lodash.isEqual
+
+  type Widget = {
+    id: number | string
+    name: WidgetName
+    height: number
+    width: number
+    left: number
+    top: number,
+    data?: Data
+  }
+  type AvailableWidget = {
+    name: WidgetName,
+    title: string
+    description?: string
+    icon: string
+    availableSizes: [number, number][], // [height, width][]
+  }
+
+  interface Props {
+    layoutWidth?: number
+    layoutHeight?: number
+    widgets: Widget[];
+		availableWidgetCells: AvailableWidget[]
+		someRowSlotEmpty?: boolean
+		preview?: boolean
+		canAdd?: boolean
+    lang?: 'it' | 'en'
+		onaddWidgetCell?: (event: {
+      widgetCell: (typeof widgetCells)[number]
+		}) => void
+		onremoveWidgetCell?: (event: {
+      widgetCell: (typeof widgetCells)[number]
+		}) => void
+		widgetCellSnippet?: Snippet<[{
+			widgetCell: (typeof filledWidgetGrid)[number] & { title?: string }
+			removeWidgetCell: typeof removeWidgetCell
+		}]>
+    widgetSelectionDialogHeaderSnippet?: Snippet<[]>
+    addWidgetButtonSnippet?: Snippet<[{
+      handleAddClick: typeof handleAddClick,
+      slot: Parameters<typeof handleAddClick>[0]['slot']
+    }]>
+  }
+
+  let {
+    layoutWidth = 6,
+    layoutHeight = 4,
+    widgets = $bindable([]),
+    availableWidgetCells,
+    someRowSlotEmpty = $bindable(true),
+    preview = false,
+    canAdd = true,
+    lang = 'en',
+    onaddWidgetCell,
+    onremoveWidgetCell,
+    widgetCellSnippet,
+    widgetSelectionDialogHeaderSnippet,
+    addWidgetButtonSnippet,
+  }: Props = $props()
+
+  let widgetCells: {
+			widget: Widget
+			columnSpanFrom: number
+			columnSpanTo: number
+			rowSpanFrom: number
+			rowSpanTo: number
+			availableHeight?: number
+			availableWidth?: number
+		}[] = $state([])
+
+  let normalizedWidgetGrid: ((typeof widgetCells)[number] | undefined)[][] = $derived.by(() => {
+      return computeNormalizedWidgetGrid(widgetCells || [], layoutWidth, layoutHeight)
+    }),
+    filledWidgetGrid: (Omit<(typeof widgetCells)[number], 'widget'> & {
+      widget?: (typeof widgetCells)[number]['widget'] | undefined
+    })[] = $derived.by(() => {
+      return computeFilledWidgetGrid(normalizedWidgetGrid || [], layoutWidth, layoutHeight)
+    }),
+    addWidgetDialog: boolean = $state(false),
+    addWidgetInfo:
+      | {
+          availableHeight: number
+          availableWidth: number
+          fromRow: number
+          fromColumn: number
         }
-        return false;
-    });
+      | undefined = $state()
+
+  $effect(() => {
+		if (widgets) {
+			calculateLocalWidgetsFromWidgets()
+		}
+	});
+	function calculateLocalWidgetsFromWidgets() {
+		widgetCells = widgets?.map((w) => {
+			return {
+        widget: {
+          id: w.id,
+          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,
+				rowSpanFrom: w.top,
+				rowSpanTo: w.top + w.height,
+			}
+		})
+	}
+
+  $effect(() => {
+    const newVal = (normalizedWidgetGrid || []).some((row) => {
+      for (let i = 0; i < layoutWidth; i += 1) {
+        if (row[i] === undefined) return true
+      }
+      return false
+    })
     if (newVal !== someRowSlotEmpty) {
-        someRowSlotEmpty = newVal;
+      someRowSlotEmpty = newVal
     }
-});
-function computeNormalizedWidgetGrid(cells, layoutWidthParam, layoutHeightParam) {
-    const grid = [];
+  })
+
+  function computeNormalizedWidgetGrid(
+    cells: (typeof widgetCells)[number][],
+    layoutWidthParam: number,
+    layoutHeightParam: number
+  ) {
+    const grid: ((typeof widgetCells)[number] | undefined)[][] = []
+
     for (let i = 0; i < cells.length; i++) {
-        const widgetCell = cells[i];
-        const rowFrom = widgetCell.rowSpanFrom - 1;
-        const rowTo = widgetCell.rowSpanTo - 1;
-        const colFrom = widgetCell.columnSpanFrom - 1;
-        const colTo = widgetCell.columnSpanTo - 1;
-        for (let r = rowFrom; r < rowTo; r++) {
-            if (!grid[r])
-                grid[r] = [];
-            for (let c = colFrom; c < colTo; c++) {
-                grid[r][c] = widgetCell;
-            }
+      const widgetCell = cells[i]
+      
+      const rowFrom = widgetCell.rowSpanFrom - 1
+      const rowTo = widgetCell.rowSpanTo - 1 
+      const colFrom = widgetCell.columnSpanFrom - 1
+      const colTo = widgetCell.columnSpanTo - 1 
+
+      for (let r = rowFrom; r < rowTo; r++) {
+        if (!grid[r]) grid[r] = []
+        for (let c = colFrom; c < colTo; c++) {
+          grid[r][c] = widgetCell
         }
+      }
     }
+    
     for (let r = 0; r < grid.length; r++) {
-        if (!grid[r])
-            grid[r] = [];
-        for (let c = 0; c < layoutWidthParam; c++) {
-            if (grid[r][c] === undefined)
-                grid[r][c] = undefined;
-        }
+      if (!grid[r]) grid[r] = []
+      for (let c = 0; c < layoutWidthParam; c++) {
+        if (grid[r][c] === undefined) grid[r][c] = undefined
+      }
     }
-    return grid;
-}
-function computeFilledWidgetGrid(normGrid, layoutWidthParam, layoutHeightParam) {
-    const filled = [];
+    
+    return grid
+  }
+  
+  function computeFilledWidgetGrid(
+    normGrid: ((typeof widgetCells)[number] | undefined)[][],
+    layoutWidthParam: number,
+    layoutHeightParam: number
+  ) {
+    const filled: (Omit<(typeof widgetCells)[number], 'widget'> & {
+      widget?: (typeof widgetCells)[number]['widget'] | undefined
+    })[] = []
+
     for (let r = 0; r < normGrid.length; r++) {
-        const normalizedRow = normGrid[r] ?? [];
-        for (let c = 0; c < layoutWidthParam; c++) {
-            const rowItem = normalizedRow[c];
-            if (rowItem === undefined && (normalizedRow[c - 1] !== undefined || c === 0)) {
-                let availableHeight = 1;
-                while (normGrid[r + availableHeight]?.[c] === undefined &&
-                    r + availableHeight < layoutHeightParam) {
-                    availableHeight += 1;
-                }
-                let availableWidth = 1;
-                while (normGrid[r]?.[c + availableWidth] === undefined &&
-                    c + availableWidth < layoutWidthParam) {
-                    availableWidth += 1;
-                }
-                filled.push({
-                    rowSpanFrom: r + 1,
-                    rowSpanTo: r + 2,
-                    columnSpanFrom: c + 1,
-                    columnSpanTo: c + availableWidth + 1,
-                    availableHeight,
-                    availableWidth
-                });
-            }
-            else if (rowItem !== undefined &&
-                filled.every((w) => w.widget?.id !== rowItem?.widget.id)) {
-                filled.push(rowItem);
-            }
+      const normalizedRow = normGrid[r] ?? []
+      for (let c = 0; c < layoutWidthParam; c++) {
+        const rowItem = normalizedRow[c]
+        if (rowItem === undefined && (normalizedRow[c - 1] !== undefined || c === 0)) {
+          
+          let availableHeight = 1
+          while (
+            normGrid[r + availableHeight]?.[c] === undefined &&
+            r + availableHeight < layoutHeightParam
+          ) {
+            availableHeight += 1
+          }
+
+          
+          let availableWidth = 1
+          while (
+            normGrid[r]?.[c + availableWidth] === undefined &&
+            c + availableWidth < layoutWidthParam
+          ) {
+            availableWidth += 1
+          }
+
+          filled.push({
+            rowSpanFrom: r + 1,
+            rowSpanTo: r + 2,
+            columnSpanFrom: c + 1,
+            columnSpanTo: c + availableWidth + 1,
+            availableHeight,
+            availableWidth
+          })
+        } else if (
+          rowItem !== undefined &&
+          filled.every((w) => w.widget?.id !== rowItem?.widget.id)
+        ) {
+          filled.push(rowItem)
         }
+      }
     }
-    return filled;
-}
-function handleAddClick(params) {
-    addWidgetDialog = true;
+
+    return filled
+  }
+
+  function handleAddClick(params: { slot: (typeof filledWidgetGrid)[number] }) {
+    addWidgetDialog = true
     addWidgetInfo = {
-        availableHeight: params.slot.availableHeight || 1,
-        availableWidth: params.slot.availableWidth || 1,
-        fromRow: params.slot.rowSpanFrom,
-        fromColumn: params.slot.columnSpanFrom
-    };
-}
-function addWidgetCell(params) {
+      availableHeight: params.slot.availableHeight || 1,
+      availableWidth: params.slot.availableWidth || 1,
+      fromRow: params.slot.rowSpanFrom,
+      fromColumn: params.slot.columnSpanFrom
+    }
+  }
+
+  function addWidgetCell(params: {
+    widget: Widget
+    fromRow: number
+    fromColumn: number
+    width: number
+    height: number
+  }) {
     const widgetCellToAdd = {
-        widget: params.widget,
-        rowSpanFrom: params.fromRow,
-        rowSpanTo: params.fromRow + params.height,
-        columnSpanFrom: params.fromColumn,
-        columnSpanTo: params.fromColumn + params.width
-    };
-    const newCells = [...(widgetCells || []), widgetCellToAdd];
+      widget: params.widget,
+      rowSpanFrom: params.fromRow,
+      rowSpanTo: params.fromRow + params.height,
+      columnSpanFrom: params.fromColumn,
+      columnSpanTo: params.fromColumn + params.width
+    }
+
+    const newCells = [...(widgetCells || []), widgetCellToAdd]
     if (!deepEqual(newCells, widgetCells)) {
-        widgetCells = newCells;
+      widgetCells = newCells
     }
-    calculateWidgetsFromLocalWidgets();
+    
+    calculateWidgetsFromLocalWidgets()
+
     onaddWidgetCell?.({
-        widgetCell: widgetCellToAdd
-    });
-}
-function removeWidgetCell(params) {
-    const widgetCellToRemove = (widgetCells || []).find((w) => w.widget.id === params.id);
-    const newCells = (widgetCells || []).filter((w) => w.widget.id !== params.id);
+      widgetCell: widgetCellToAdd
+    })
+  }
+
+  function removeWidgetCell(params: { id: string | number }) {
+    const widgetCellToRemove = (widgetCells || []).find((w) => w.widget.id === params.id)
+    const newCells = (widgetCells || []).filter((w) => w.widget.id !== params.id)
+
     if (!deepEqual(newCells, widgetCells)) {
-        widgetCells = newCells;
+      widgetCells = newCells
     }
-    calculateWidgetsFromLocalWidgets();
+
+    calculateWidgetsFromLocalWidgets()
+
     if (!!widgetCellToRemove) {
-        onremoveWidgetCell?.({
-            widgetCell: widgetCellToRemove
-        });
+      onremoveWidgetCell?.({
+        widgetCell: widgetCellToRemove
+      })
     }
-}
-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,
-        };
-    });
-}
-function closeAddWidgetDialog() {
-    addWidgetDialog = false;
-}
-function availableSizes(params) {
-    return params.availableSizes.filter((as) => as[0] <= params.availableHeight && as[1] <= params.availableWidth);
-}
+  }
+
+  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,
+			}
+		})
+	}
+
+  function closeAddWidgetDialog() {
+    addWidgetDialog = false
+  }
+
+  function availableSizes(params: {
+		availableHeight: number
+		availableWidth: number
+		availableSizes: [number, number][]
+	}): [number, number][] {
+		return params.availableSizes.filter(
+			(as) => as[0] <= params.availableHeight && as[1] <= params.availableWidth
+		)
+	}
 </script>
 
 <div
@@ -238,7 +371,7 @@ function availableSizes(params) {
       {@render widgetSelectionDialogHeaderSnippet()}
     {:else}
       <div class="header">
-        <Icon name={"mdi-widgets-outline"} --icon-size="30px"/>
+        <Icon name="mdi-widgets-outline" --icon-size="30px"/>
         <div class="title">{lang == 'en' ? 'Add widget' : 'Aggiungi widget'}</div>
       </div>
     {/if}

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

@@ -1,7 +1,7 @@
 import './DashboardShaper.css';
 import type { Snippet } from "svelte";
-declare class __sveltets_Render<Data, WidgetName extends string> {
-    props(): {
+declare function $$render<Data, WidgetName extends string>(): {
+    props: {
         layoutWidth?: number;
         layoutHeight?: number;
         widgets: {
@@ -11,7 +11,7 @@ declare class __sveltets_Render<Data, WidgetName extends string> {
             width: number;
             left: number;
             top: number;
-            data?: Data | undefined;
+            data?: Data;
         }[];
         availableWidgetCells: {
             name: WidgetName;
@@ -24,7 +24,7 @@ declare class __sveltets_Render<Data, WidgetName extends string> {
         preview?: boolean;
         canAdd?: boolean;
         lang?: "it" | "en";
-        onaddWidgetCell?: ((event: {
+        onaddWidgetCell?: (event: {
             widgetCell: {
                 widget: {
                     id: number | string;
@@ -33,7 +33,7 @@ declare class __sveltets_Render<Data, WidgetName extends string> {
                     width: number;
                     left: number;
                     top: number;
-                    data?: Data | undefined;
+                    data?: Data;
                 };
                 columnSpanFrom: number;
                 columnSpanTo: number;
@@ -42,8 +42,8 @@ declare class __sveltets_Render<Data, WidgetName extends string> {
                 availableHeight?: number;
                 availableWidth?: number;
             };
-        }) => void) | undefined;
-        onremoveWidgetCell?: ((event: {
+        }) => void;
+        onremoveWidgetCell?: (event: {
             widgetCell: {
                 widget: {
                     id: number | string;
@@ -52,7 +52,7 @@ declare class __sveltets_Render<Data, WidgetName extends string> {
                     width: number;
                     left: number;
                     top: number;
-                    data?: Data | undefined;
+                    data?: Data;
                 };
                 columnSpanFrom: number;
                 columnSpanTo: number;
@@ -61,9 +61,9 @@ declare class __sveltets_Render<Data, WidgetName extends string> {
                 availableHeight?: number;
                 availableWidth?: number;
             };
-        }) => void) | undefined;
+        }) => void;
         widgetCellSnippet?: Snippet<[{
-            widgetCell: Omit<{
+            widgetCell: (Omit<{
                 widget: {
                     id: number | string;
                     name: WidgetName;
@@ -71,7 +71,7 @@ declare class __sveltets_Render<Data, WidgetName extends string> {
                     width: number;
                     left: number;
                     top: number;
-                    data?: Data | undefined;
+                    data?: Data;
                 };
                 columnSpanFrom: number;
                 columnSpanTo: number;
@@ -87,15 +87,15 @@ declare class __sveltets_Render<Data, WidgetName extends string> {
                     width: number;
                     left: number;
                     top: number;
-                    data?: Data | undefined;
+                    data?: Data;
                 } | undefined;
-            } & {
+            }) & {
                 title?: string;
             };
             removeWidgetCell: (params: {
                 id: string | number;
             }) => void;
-        }]> | undefined;
+        }]>;
         widgetSelectionDialogHeaderSnippet?: Snippet<[]>;
         addWidgetButtonSnippet?: Snippet<[{
             handleAddClick: (params: {
@@ -107,7 +107,7 @@ declare class __sveltets_Render<Data, WidgetName extends string> {
                         width: number;
                         left: number;
                         top: number;
-                        data?: Data | undefined;
+                        data?: Data;
                     };
                     columnSpanFrom: number;
                     columnSpanTo: number;
@@ -123,41 +123,50 @@ declare class __sveltets_Render<Data, WidgetName extends string> {
                         width: number;
                         left: number;
                         top: number;
-                        data?: Data | undefined;
+                        data?: Data;
                     } | undefined;
                 };
             }) => void;
-            slot: Omit<{
-                widget: {
-                    id: number | string;
-                    name: WidgetName;
-                    height: number;
-                    width: number;
-                    left: number;
-                    top: number;
-                    data?: Data | undefined;
+            slot: Parameters<(params: {
+                slot: Omit<{
+                    widget: {
+                        id: number | string;
+                        name: WidgetName;
+                        height: number;
+                        width: number;
+                        left: number;
+                        top: number;
+                        data?: Data;
+                    };
+                    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;
                 };
-                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;
-            };
-        }]> | undefined;
+            }) => void>[0]["slot"];
+        }]>;
     };
-    events(): {};
-    slots(): {};
+    exports: {};
+    bindings: "widgets" | "someRowSlotEmpty";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<Data, WidgetName extends string> {
+    props(): ReturnType<typeof $$render<Data, WidgetName>>['props'];
+    events(): ReturnType<typeof $$render<Data, WidgetName>>['events'];
+    slots(): ReturnType<typeof $$render<Data, WidgetName>>['slots'];
     bindings(): "widgets" | "someRowSlotEmpty";
     exports(): {};
 }