@likable-hair/svelte 4.1.6 → 4.2.1

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

@@ -3,7 +3,9 @@ import { flip } from "svelte/animate";
 import { quintOut } from "svelte/easing";
 import { crossfade } from "svelte/transition";
 import EnhancedPaginatedTable from "../list/EnhancedPaginatedTable.svelte";
-let { drawerProps, open = $bindable(), lang, availableHeaders, headersToShow = $bindable(), onsaveHeadersToShow, itemSnippet: internalItemSnippet, headersToAddSnippet, contentSnippet, } = $props();
+import lodash from "lodash";
+const deepClone = lodash.cloneDeep;
+let { drawerProps, open = $bindable(), lang, availableHeaders, headersToShow = $bindable(), pinnableColumns, onsaveHeadersToShow, itemSnippet: internalItemSnippet, headersToAddSnippet, contentSnippet, } = $props();
 const [send, receive] = crossfade({
     duration: 500,
     fallback(node, params) {
@@ -19,9 +21,9 @@ const [send, receive] = crossfade({
         };
     },
 });
-let internalHeadersToShow = $state(headersToShow);
+let internalHeadersToShow = $state(deepClone(headersToShow));
 $effect(() => {
-    internalHeadersToShow = headersToShow;
+    internalHeadersToShow = deepClone(headersToShow);
 });
 function saveHeadersToShow() {
     headersToShow = internalHeadersToShow;
@@ -58,6 +60,7 @@ function saveHeadersToShow() {
                     ...e,
                     id: e.value,
                     name: e.label,
+                    pinned: e.pinned,
                   }
                 })}
                 onchangeOrder={(e) => {
@@ -71,15 +74,17 @@ function saveHeadersToShow() {
                   internalHeadersToShow = newHeaders;
                 }}
               >
-                {#snippet itemSnippet({ item })}
+                {#snippet itemSnippet({ item, index })}
                   {#if internalItemSnippet}
-                    {@render internalItemSnippet({ item })}
+                    {@render internalItemSnippet({ item, index })}
                   {:else}
+                    {@const locked = internalHeadersToShow.find((h) => h.value == item.id)?.locked}
                     <div
                       style:display=flex
                     >
                       <div
                         style:flex-grow=1
+                        style:opacity={item.pinned ? 0.8 : 1}
                       >
                         {#if !!item.icon}
                           <Icon name={item.icon} />
@@ -90,10 +95,12 @@ function saveHeadersToShow() {
                         style:display=flex
                         style:min-width=50px
                         style:justify-content=end
+                        style:gap=6px
                       >
                         <Switch
                           --switch-label-width="90%"
                           value={internalHeadersToShow.find((h) => h.value == item.id) != undefined}
+                          disabled={!!item.pinned}
                           onchange={(e) => {
                             if (e.detail.value == false) {
                               internalHeadersToShow = internalHeadersToShow.filter((h) => h.value != item.id);
@@ -101,6 +108,31 @@ function saveHeadersToShow() {
                             }
                           }}
                         />
+                        {#if pinnableColumns || item.pinned}
+                          <div style:opacity={item.locked ? 0.8 : 1}>
+                            <Icon 
+                              name={item.pinned ? 'mdi-pin-off' : 'mdi-pin'}
+                              onclick={
+                                !locked ?
+                                  () => {
+                                    let header = internalHeadersToShow.find((h) => h.value == item.id);
+                                    if (header) {
+                                      header.pinned = !header.pinned;
+                                      let pinnedHeaders = internalHeadersToShow.filter((h) => h.pinned);
+                                      let unpinnedHeaders = internalHeadersToShow.filter((h) => !h.pinned);
+                                      internalHeadersToShow = [
+                                        ...pinnedHeaders,
+                                        ...unpinnedHeaders
+                                      ];
+                                    }
+                                  } :
+                                  undefined
+                              }
+                              --icon-cursor={locked ? 'not-allowed' : ''}
+                              --icon-size=17px
+                            ></Icon>
+                          </div>
+                        {/if}
                       </div>
                     </div>
                   {/if}
@@ -113,7 +145,7 @@ function saveHeadersToShow() {
             <span class="headers-show">{lang == 'en' ? 'Available headers' : 'Intestazioni disponibili'}</span>
   
             {#if availableHeaders && availableHeaders.length > 0}
-              {#each availableHeaders as header (header.value)}
+              {#each availableHeaders.filter(h => !h.pinned) as header (header.value)}
                 <div
                   animate:flip
                   in:receive={{ key: header }}

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

@@ -9,6 +9,7 @@ declare class __sveltets_Render<Item extends {
         lang: "en" | "it";
         availableHeaders: import("../../simple/lists/SimpleTable.svelte").Header<Data>[];
         headersToShow: import("../../simple/lists/SimpleTable.svelte").Header<Data>[];
+        pinnableColumns?: boolean;
         onsaveHeadersToShow?: ((event: {
             detail: {
                 headersToShow: import("../../simple/lists/SimpleTable.svelte").Header<Data>[];

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.css

@@ -0,0 +1,11 @@
+:root {
+  --dashboard-shaper-default-widget-height: 200px;
+  --dashboard-shaper-default-gap: 4px;
+  --dashboard-shaper-default-cell-preview-background-color: rgb(var(--global-color-primary-500), 0.5);
+  --dashboard-shaper-default-widget-preview-border-radius: 8px;
+  --dashboard-shaper-default-display-mobile: flex;
+  --dashboard-shaper-default-flex-direction-mobile: column;
+  --dashboard-shaper-default-dialog-background-color: rgb(var(--global-color-background-300));
+  --dashboard-shaper-default-dialog-header-background-color: rgb(var(--global-color-background-400));
+  --dashboard-shaper-default-add-widget-button-background-color: rgb(var(--global-color-background-300));
+}

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

@@ -0,0 +1,421 @@
+<script lang="ts">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,
+                componentName: w.componentName,
+                height: w.height,
+                width: w.width,
+                left: w.left,
+                top: w.top,
+            },
+            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;
+    }
+});
+function computeNormalizedWidgetGrid(cells, layoutWidthParam, layoutHeightParam) {
+    const grid = [];
+    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;
+            }
+        }
+    }
+    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;
+        }
+    }
+    return grid;
+}
+function computeFilledWidgetGrid(normGrid, layoutWidthParam, layoutHeightParam) {
+    const filled = [];
+    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);
+            }
+        }
+    }
+    return filled;
+}
+function handleAddClick(params) {
+    addWidgetDialog = true;
+    addWidgetInfo = {
+        availableHeight: params.slot.availableHeight || 1,
+        availableWidth: params.slot.availableWidth || 1,
+        fromRow: params.slot.rowSpanFrom,
+        fromColumn: params.slot.columnSpanFrom
+    };
+}
+function addWidgetCell(params) {
+    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];
+    if (!deepEqual(newCells, widgetCells)) {
+        widgetCells = newCells;
+    }
+    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);
+    if (!deepEqual(newCells, widgetCells)) {
+        widgetCells = newCells;
+    }
+    calculateWidgetsFromLocalWidgets();
+    if (!!widgetCellToRemove) {
+        onremoveWidgetCell?.({
+            widgetCell: widgetCellToRemove
+        });
+    }
+}
+function calculateWidgetsFromLocalWidgets() {
+    widgets = widgetCells?.map((lWidget) => {
+        return {
+            id: lWidget.widget.id,
+            componentName: lWidget.widget.componentName,
+            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);
+}
+</script>
+
+<div
+  class="shaper"
+  style:--dashboard-shaper-grid-template-columns={`repeat(${layoutWidth}, 1fr)`}
+  style:--dashboard-shaper-grid-template-rows={`repeat(${layoutHeight}, var(--dashboard-shaper-widget-height, var(--dashboard-shaper-default-widget-height)))`}
+>
+  {#each filledWidgetGrid as widgetCell}
+    {#if !!widgetCell.widget}
+      <div
+        style:grid-column={`${widgetCell.columnSpanFrom} / ${widgetCell.columnSpanTo}`}
+        style:grid-row={`${widgetCell.rowSpanFrom} / ${widgetCell.rowSpanTo}`}
+      >
+        {#if preview}
+          <div class="widget-cell-preview"></div>
+        {:else}
+					{#if widgetCellSnippet}
+						{@render widgetCellSnippet({ widgetCell, removeWidgetCell })}
+					{:else}
+						{widgetCell.widget.componentName}
+					{/if}
+        {/if}
+      </div>
+    {:else if !preview && canAdd}
+      <div
+        style:grid-column={`${widgetCell.columnSpanFrom} / ${widgetCell.columnSpanTo}`}
+        style:grid-row={`${widgetCell.rowSpanFrom} / ${widgetCell.rowSpanTo}`}
+      >
+        {@render addWidgetButton(widgetCell)}
+      </div>
+    {/if}
+  {/each}
+	{#if normalizedWidgetGrid.length < layoutHeight && !preview && canAdd}
+		<div style:grid-column={`1 / ${layoutWidth + 1}`}>
+      {@render addWidgetButton({
+        columnSpanFrom: 1,
+        columnSpanTo: layoutWidth + 1,
+        rowSpanFrom: normalizedWidgetGrid.length + 1,
+        rowSpanTo: normalizedWidgetGrid.length + 2,
+        availableHeight: layoutHeight - normalizedWidgetGrid.length,
+        availableWidth: layoutWidth
+      })}
+		</div>
+	{/if}
+</div>
+
+{#snippet addWidgetButton(slot: Parameters<typeof handleAddClick>[0]['slot'])}
+  {#if addWidgetButtonSnippet}
+    {@render addWidgetButtonSnippet({ handleAddClick, slot})}
+  {:else}
+    <button 
+      class="add-button" 
+      onclick={() => handleAddClick({ slot })}
+    >
+      <Icon name="mdi-plus" --icon-default-size="1.5rem" />
+      <div class="description">{lang == 'en' ? 'Add widget' : 'Aggiungi widget'}</div>
+    </button>
+  {/if}
+{/snippet}
+
+<Dialog 
+	bind:open={addWidgetDialog}
+>
+	<div class="card">
+    {#if widgetSelectionDialogHeaderSnippet}
+      {@render widgetSelectionDialogHeaderSnippet()}
+    {:else}
+      <div class="header">
+        <Icon name={"mdi-widgets-outline"} --icon-size="30px"/>
+        <div class="title">{lang == 'en' ? 'Add widget' : 'Aggiungi widget'}</div>
+      </div>
+    {/if}
+    {#key addWidgetInfo}
+      {#if !!addWidgetInfo}
+        <div class="widget-selection-list">
+          {#each availableWidgetCells
+            .filter((ws) => availableSizes({ 
+              availableHeight: addWidgetInfo!.availableHeight, 
+              availableWidth: addWidgetInfo!.availableWidth, 
+              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
+              return 0
+            }) as widgetSpec
+          }
+            <div class="widget-card">
+              <div class="widget-info">
+                {#if widgetSpec.icon}
+                  <Icon name={widgetSpec.icon} --icon-size="30px" />
+                {/if}
+                <div class="widget-title">{widgetSpec.label}</div>
+                <div class="widget-desc">{widgetSpec.description}</div>
+              </div>
+
+              <div class="widget-actions">
+                {#each availableSizes({ 
+                  availableHeight: addWidgetInfo.availableHeight, 
+                  availableWidth: addWidgetInfo.availableWidth, 
+                  availableSizes: widgetSpec.availableSizes 
+                  }) as sizes
+                }
+                  <Chip
+                    inactive
+                    onclick={() => {
+                      addWidgetCell({
+                        widget: {
+                          id: createId(),
+                          componentName: widgetSpec.widgetComponentName,
+                          height: sizes[0],
+                          width: sizes[1],
+                          top: addWidgetInfo!.fromRow,
+                          left: addWidgetInfo!.fromColumn,
+                        },
+                        fromColumn: addWidgetInfo!.fromColumn,
+                        fromRow: addWidgetInfo!.fromRow,
+                        height: sizes[0],
+                        width: sizes[1]
+                      })
+                      closeAddWidgetDialog()
+                    }}
+                    --chip-height=25px
+                    --chip-min-height=0px
+                    --chip-padding="2px 4px 0px"
+                    --chip-inactive-background-color=rgb(var(--global-color-background-500))
+                  >
+                    {sizes[0]} x {sizes[1]}
+                  </Chip>
+                {/each}
+              </div>
+            </div>
+          {/each}
+        </div>
+      {/if}
+    {/key}
+	</div>
+</Dialog>
+
+<style>
+	.shaper {
+		width: 100%;
+		min-height: 200px;
+		display: grid;
+		gap: var(--dashboard-shaper-gap, var(--dashboard-shaper-default-gap));
+		grid-template-columns: var(--dashboard-shaper-grid-template-columns);
+		grid-template-rows: var(--dashboard-shaper-grid-template-rows);
+	}
+
+	.widget-cell-preview {
+		width: 100%;
+		height: 100%;
+		background-color: var(--dashboard-shaper-cell-preview-background-color, var(--dashboard-shaper-default-cell-preview-background-color));
+		border-radius: var(--dashboard-shaper-widget-preview-border-radius, var(--dashboard-shaper-default-widget-preview-border-radius));
+	}
+
+	@media screen and (max-width: 800px) {
+		.shaper {
+			display: var(--dashboard-shaper-display-mobile, var(--dashboard-shaper-default-display-mobile));
+			flex-direction: var(--dashboard-shaper-flex-direction-mobile, var(--dashboard-shaper-default-flex-direction-mobile));
+		}
+	}
+
+  .card {
+		background-color: var(--dashboard-shaper-dialog-background-color, var(--dashboard-shaper-default-dialog-background-color));
+		border-radius: 8px;
+		padding: 0px;
+    max-width: 80vw;
+    overflow-x: auto;
+	}
+
+	.header {
+		display: flex;
+		padding: 30px 24px 16px;
+		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;
+	}
+  
+  .title {
+		font-size: x-large;
+		font-weight: bold;
+		text-align: center;
+	}
+
+  .add-button {
+		width: 100%;
+		height: 100%;
+		min-height: 200px;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		background-color: var(--dashboard-shaper-add-widget-button-background-color, var(--dashboard-shaper-default-add-widget-button-background-color));
+		border-radius: 8px;
+	}
+
+	.description {
+		font-size: 0.9rem;
+		font-weight: 300;
+		opacity: 0.7;
+	}
+
+  .widget-selection-list {
+    display: flex;
+    flex-wrap: wrap;
+    max-width: 800px;
+    padding: 1rem;
+    max-height: 70vh;
+    overflow-y: auto;
+  }
+
+  @media screen and (max-width: 800px) {
+		.widget-selection-list {
+			width: 100%;
+			flex-direction: column;
+      flex-wrap: nowrap;
+		}
+	}
+
+  .widget-card {
+    padding: 0.625rem;
+    border-radius: 0.375rem;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    flex-basis: 50%;
+    box-sizing: border-box;
+  }
+
+  .widget-info {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .widget-title {
+    font-size: 1.25rem;
+    line-height: 1.75rem;
+    font-weight: 700;
+  }
+
+  .widget-desc {
+    font-size: 0.875rem;
+    font-weight: 300;
+  }
+
+  .widget-actions {
+    display: flex;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+    margin-top: 0.5rem;
+  }
+</style>