@likable-hair/svelte 4.0.7 → 4.0.8

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

@@ -28,9 +28,9 @@ onMount(() => {
     if (tableContainer?.scrollHeight && tableContainer.clientHeight) {
         hideScrollbar = tableContainer.scrollHeight > tableContainer.clientHeight;
     }
-    for (const head of [...headers, { value: 'non-resizable', minWidth: DEFAULT_MIN_WIDTH_PX + 'px', maxWidth: DEFAULT_MAX_WIDTH_PX + 'px' }, { value: 'slot-append', minWidth: DEFAULT_MIN_WIDTH_PX + 'px', maxWidth: DEFAULT_MAX_WIDTH_PX + 'px' }]) {
+    for (const head of [...headers, { value: 'non-resizable', minWidth: DEFAULT_MIN_WIDTH_PX + 'px', maxWidth: DEFAULT_MAX_WIDTH_PX + 'px' }, { value: 'customize-headers', minWidth: DEFAULT_MIN_WIDTH_PX + 'px', maxWidth: DEFAULT_MAX_WIDTH_PX + 'px' }]) {
         let th;
-        if (head.value == 'non-resizable' || head.value == 'slot-append') {
+        if (head.value == 'non-resizable' || head.value == 'customize-headers') {
             th = document.getElementsByClassName(head.value).item(0);
         }
         else {
@@ -40,14 +40,20 @@ onMount(() => {
             resizeHeader(th, head);
         }
     }
-    let table = document.getElementsByClassName('table')[0];
-    table.classList.add('resizable');
+    let table = document.getElementsByClassName('dynamic-table')[0];
+    table.classList.add('dynamic-resizable');
+    resizeObserver = new ResizeObserver(() => {
+        updateRemainingWidth();
+    });
+    if (tableContainer) {
+        resizeObserver.observe(tableContainer);
+    }
     return () => {
         window.removeEventListener('resize', updateHeaderHeight);
         tableContainer?.removeEventListener("scroll", setReachedBottomOrTop);
+        resizeObserver?.disconnect();
     };
 });
-let mainHeader = $state();
 function updateHeaderHeight() {
     if (mainHeader) {
         const headerHeight = mainHeader.getBoundingClientRect().height;
@@ -94,8 +100,8 @@ const [send, receive] = crossfade({
         };
     },
 });
-let { headers = [], headersToShowInTable = headers, subHeaders = [], customizeHeaders = false, rows = [], sortedBy = $bindable(), sortDirection = $bindable("asc"), cellEdit = false, lang = "en", dateLocale, noItemsText = lang == 'en' ? "No items to show" : 'Nessun elemento da visualizzare', showSelect = false, showActions = true, selectMode = "single", selectedItems = $bindable([]), unselectedItems = $bindable([]), selectedAll = $bindable(false), showExpand = false, loading = false, disabled = false, filters = $bindable([]), searchBarColumns, searchBarVisible = false, searchBarPlaceholder = lang == 'en' ? "Type to search..." : "Scrivi per cercare...", filtersVisible = false, quickFiltersVisible = false, editFilterMode = "one-edit", showActiveFilters = true, quickFilters = [], actionsForSelectedItems = [], quickActionsDisabled = false, totalRows = rows.length, searchText = $bindable(), renderedRowsNumber = 100, sectionRowsNumber = 20, sectionThreshold = 2, backwardThresholdPixel = 100, forwardThresholdPixel = 100, uniqueKey = 'id', numberOfResultsVisible = false, endLineVisible = false, resizableColumns = false, resizedColumnSizeWithPadding = {}, class: clazz = {}, onapplyCustomQuickFilter, oncellClick, onfetchData, onfiltersChange, onsort, onremoveAllFilters, onremoveCustomQuickFilter, onremoveFilter, onrowClick, onsaveCellEdit, onsaveHeadersToShow, oncolumnResize, searchBarSnippet, customFilterChipSnippet, customFilterSnippet, filterAppendSnippet, onscroll, selectionSnippet: selectionInternalSnippet, itemLabelSnippet: itemLabelInternalSnippet, chipLabelSnippet, headerSnippet, headerLabelSnippet, rowAppendSnippet, rowActionsSnippet, customRowSnippet, subRowAppendSnippet, subHeaderLabelSnippet, subHeaderSnippet, subRowActionsSnippet, customSubRowSnippet, customQuickFilterSnippet, appendSnippet, } = $props();
-let openCellEditor = $state(false), cellEditorActivator = $state(), cellEditorContainer = $state(), menuElementCellEditor = $state(), menuElementQuickFilters = $state(), cellEditorInfoActive = $state(), saveEditDisabled = $state(false), searchBarInput = $state(undefined), openQuickFilter = $state(false), quickFilterActivator = $state(), quickFilterActive = $state(), globalBuilder = new FilterBuilder(), calendarOpened = $state(false), calendarOpened2 = $state(false), selectedIndexes = [], cellEditorIndexRow = $state(), cellEditorIndexHeader = $state(), cellEditorSubItem = $state(), currentSectionNumber = $state(0), tableBody = $state(), tableContainer = $state(), userScrolling = $state(true), reachedBottom = $state(false), reachedTop = false, resizing = false, remainingWidth = $state(0), hideScrollbar = $state(false), sortModify;
+let { headers = [], headersToShowInTable = headers, subHeaders = [], customizeHeaders = false, rows = [], sortedBy = $bindable(), sortDirection = $bindable("asc"), cellEdit = false, lang = "en", dateLocale, noItemsText = lang == 'en' ? "No items to show" : 'Nessun elemento da visualizzare', showSelect = false, showActions = true, selectMode = "single", selectedItems = $bindable([]), unselectedItems = $bindable([]), selectedAll = $bindable(false), showExpand = false, loading = false, disabled = false, filters = $bindable([]), searchBarColumns, searchBarVisible = false, searchBarPlaceholder = lang == 'en' ? "Type to search..." : "Scrivi per cercare...", filtersVisible = false, quickFiltersVisible = false, editFilterMode = "one-edit", showActiveFilters = true, quickFilters = [], actionsForSelectedItems = [], quickActionsDisabled = false, totalRows = rows.length, searchText = $bindable(), renderedRowsNumber = 100, sectionRowsNumber = 20, sectionThreshold = 2, backwardThresholdPixel = 100, forwardThresholdPixel = 100, uniqueKey = 'id', numberOfResultsVisible = false, endLineVisible = false, resizableColumns = false, resizedColumnSizeWithPadding = {}, dynamicFilters = true, class: clazz = {}, onapplyCustomQuickFilter, oncellClick, onfetchData, onfiltersChange, onsort, onremoveAllFilters, onremoveCustomQuickFilter, onremoveFilter, onrowClick, onsaveCellEdit, onsaveHeadersToShow, oncolumnResize, searchBarSnippet, customFilterChipSnippet, customFilterSnippet, filterAppendSnippet, onscroll, selectionSnippet: selectionInternalSnippet, itemLabelSnippet: itemLabelInternalSnippet, chipLabelSnippet, headerSnippet, headerLabelSnippet, rowAppendSnippet, customRowSnippet, subRowAppendSnippet, subHeaderLabelSnippet, subHeaderSnippet, subRowActionsSnippet, customSubRowSnippet, customQuickFilterSnippet, appendSnippet, } = $props();
+let openCellEditor = $state(false), cellEditorActivator = $state(), cellEditorContainer = $state(), menuElementCellEditor = $state(), menuElementQuickFilters = $state(), cellEditorInfoActive = $state(), saveEditDisabled = $state(false), searchBarInput = $state(undefined), openQuickFilter = $state(false), quickFilterActivator = $state(), quickFilterActive = $state(), globalBuilder = new FilterBuilder(), calendarOpened = $state(false), calendarOpened2 = $state(false), selectedIndexes = [], cellEditorIndexRow = $state(), cellEditorIndexHeader = $state(), cellEditorSubItem = $state(), currentSectionNumber = $state(0), tableBody = $state(), tableContainer = $state(), userScrolling = $state(true), reachedBottom = $state(false), reachedTop = false, resizing = false, remainingWidth = $state(0), hideScrollbar = $state(false), sortModify, mainHeader = $state(), resizeObserver;
 const DEFAULT_MIN_WIDTH_PX = 100, DEFAULT_MAX_WIDTH_PX = 400;
 let totalSections = $derived((totalRows - renderedRowsNumber) / sectionRowsNumber);
 let hasMoreToRender = $derived(totalSections > currentSectionNumber);
@@ -835,9 +841,7 @@ function resize(node) {
     }
 }
 $effect(() => {
-    if (resizableColumns &&
-        !!tableContainer &&
-        resizableColumns &&
+    if (!!tableContainer &&
         headersToShowInTable.length > 0 &&
         resizedColumnSizeWithPadding &&
         headersToShow.length > 0 &&
@@ -929,37 +933,57 @@ function resizeHeader(th, header) {
   
         {#if filtersVisible}
           <div>
-            <Filters
-              bind:filters
-              onapplyFilter={() => {
-                handleSearchChange(searchText);
-              }}
-              onremoveFilter={e => { handleRemoveFilter(e.detail.filter) }}
-              onremoveAllFilters={() => handleRemoveAllFilters()}
-              --filters-default-wrapper-width="100%"
-              {lang}
-              {dateLocale}
-              {editFilterMode}
-              {showActiveFilters}
-              appendSnippet={filterAppendSnippet}
-              customChipSnippet={customFilterChipSnippet}
-            >
-              {#snippet contentSnippet({ filters, mAndDown, updateMultiFilterValues, })}  
-                {#key filters}
-                  <DynamicFilters
-                    {lang}
-                    {filters}                      
-                    {mAndDown}
-                    onchange={e => updateFilterValues(e.detail.filter, updateMultiFilterValues)}    
-                    {updateMultiFilterValues}
-                  >
-                    {#snippet customSnippet({ filter, mAndDown, updateCustomFilterValues })}
-                      {@render customFilterSnippet?.({ filter, mAndDown, updateCustomFilterValues })}
-                    {/snippet}
-                  </DynamicFilters>
-                {/key}
-              {/snippet}
-            </Filters>
+            {#if dynamicFilters}
+              <Filters
+                bind:filters
+                onapplyFilter={() => {
+                  handleSearchChange(searchText);
+                }}
+                onremoveFilter={e => { handleRemoveFilter(e.detail.filter) }}
+                onremoveAllFilters={() => handleRemoveAllFilters()}
+                --filters-default-wrapper-width="100%"
+                {lang}
+                {dateLocale}
+                {editFilterMode}
+                {showActiveFilters}
+                appendSnippet={filterAppendSnippet}
+                customChipSnippet={customFilterChipSnippet}
+              >
+                {#snippet contentSnippet({ filters, mAndDown, updateMultiFilterValues, })}  
+                  {#key filters}
+                    <DynamicFilters
+                      {lang}
+                      {filters}                      
+                      {mAndDown}
+                      onchange={e => updateFilterValues(e.detail.filter, updateMultiFilterValues)}    
+                      {updateMultiFilterValues}
+                    >
+                      {#snippet customSnippet({ filter, mAndDown, updateCustomFilterValues })}
+                        {@render customFilterSnippet?.({ filter, mAndDown, updateCustomFilterValues })}
+                      {/snippet}
+                    </DynamicFilters>
+                  {/key}
+                {/snippet}
+              </Filters>
+            {:else}
+              <Filters
+                bind:filters
+                onapplyFilter={() => {
+                  handleSearchChange(searchText);
+                }}
+                onremoveFilter={e => { handleRemoveFilter(e.detail.filter) }}
+                onremoveAllFilters={() => handleRemoveAllFilters()}
+                --filters-default-wrapper-width="100%"
+                {lang}
+                {dateLocale}
+                {editFilterMode}
+                {showActiveFilters}
+                appendSnippet={filterAppendSnippet}
+                customChipSnippet={customFilterChipSnippet}
+                customSnippet={customFilterSnippet}
+              >
+              </Filters>
+            {/if}
           </div>
         {/if}
       </div>
@@ -1027,7 +1051,7 @@ function resizeHeader(th, header) {
       hasMore={currentSectionNumber > 0 && userScrolling}
       direction='backward'
     />
-    <table style="display: table;" class="table">
+    <table style="display: table;" class="dynamic-table">
       <thead class="table-header" bind:this={mainHeader}>
         <tr>
           {#if !!showSelect && !showExpand && rows.length > 0}
@@ -1114,33 +1138,28 @@ function resizeHeader(th, header) {
               {/if}
             </th>
           {/each}
-          {#if rowActionsSnippet || rowAppendSnippet}
-            <th
-              class="slot-append"
-            >
-              {@render rowAppendSnippet?.({ index: -1, row: undefined })}
-            </th>
-          {/if}
-          {#if resizableColumns && remainingWidth}
+          {#if remainingWidth && (customizeHeaders || resizableColumns)}
             <th
               style:width={remainingWidth + 'px'}
               class="filler"
               aria-hidden="true"
             ></th>
           {/if}
-          {#if customizeHeaders}
+          {#if customizeHeaders || rowAppendSnippet}
             <th
-              style:width="15px"
-              style:min-width="15px"
               style:text-align="center"
               class="customize-headers"
             >
-              <div style="display: flex; justify-content: center;">
-                <Icon
-                  name="mdi-plus-circle-outline"
-                  onclick={() => (openHeaderDrawer = true)}
-                />
-              </div>
+              {#if customizeHeaders}
+                <div style="display: flex; justify-content: center;">
+                  <Icon
+                    name="mdi-plus-circle-outline"
+                    onclick={() => (openHeaderDrawer = true)}
+                  />
+                </div>
+              {:else}
+                {@render rowAppendSnippet?.({ index: -1, row: undefined })}
+              {/if}
             </th>
           {/if}
         </tr>
@@ -1272,9 +1291,11 @@ function resizeHeader(th, header) {
                   {/if}
                 </td>
               {/each}
-              {#if rowActionsSnippet || rowAppendSnippet}
+              {#if remainingWidth && (customizeHeaders || resizableColumns)}
+                <td></td>
+              {/if}
+              {#if rowAppendSnippet}
                 <td class={clazz.cell || ""}>
-                  {@render rowActionsSnippet?.({ index: indexRow, row })}
                   {@render rowAppendSnippet?.({ index: indexRow, row })}
                 </td>
               {/if}
@@ -1866,7 +1887,7 @@ function resizeHeader(th, header) {
     margin-right: -15px;
   }
 
-  .table {
+  .dynamic-table {
     background-color: var(
       --dynamic-table-background-color,
       var(--dynamic-table-default-background-color)
@@ -1874,7 +1895,7 @@ function resizeHeader(th, header) {
     border-collapse: separate;
   }
 
-  .table.resizable {
+  .dynamic-table.dynamic-resizable {
     table-layout: fixed;
     width: fit-content;
   }
@@ -1993,17 +2014,17 @@ function resizeHeader(th, header) {
     padding-left: 10px;
     border: 1px solid transparent;
   }
-  table.table > tbody > tr > td {
+  table.dynamic-table > tbody > tr > td {
     overflow: hidden;
     text-overflow: ellipsis;
   }
 
-  table.table > thead > tr > th {
+  table.dynamic-table > thead > tr > th {
     overflow: hidden;
     text-overflow: ellipsis;
   }
 
-  table.table > tbody > tr > td.expanded-row {
+  table.dynamic-table > tbody > tr > td.expanded-row {
   overflow: visible;
 }
 

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

@@ -168,6 +168,7 @@ declare class __sveltets_Render<Item extends {
         resizedColumnSizeWithPadding?: {
             [value: string]: number;
         } | undefined;
+        dynamicFilters?: boolean;
         class?: {
             container?: string;
             header?: string;
@@ -246,7 +247,8 @@ declare class __sveltets_Render<Item extends {
         customFilterSnippet?: Snippet<[{
             filter: Filter | undefined;
             mAndDown: boolean;
-            updateCustomFilterValues: Parameters<NonNullable<ComponentProps<typeof Filters>["contentSnippet"]>>[0]["updateMultiFilterValues"];
+            updateCustomFilterValues?: Parameters<NonNullable<ComponentProps<typeof Filters>["contentSnippet"]>>[0]["updateMultiFilterValues"];
+            updateFunction?: Parameters<NonNullable<ComponentProps<typeof Filters>["customSnippet"]>>[0]["updateFunction"];
         }]> | undefined;
         onscroll?: UIEventHandler<HTMLDivElement>;
         selectionSnippet?: ComponentProps<typeof Autocomplete>["selectionSnippet"];
@@ -337,19 +339,6 @@ declare class __sveltets_Render<Item extends {
                 })[];
             } | undefined;
         }]> | undefined;
-        rowActionsSnippet?: Snippet<[{
-            index: number;
-            row?: {
-                item: Item & {
-                    disableEdit?: boolean;
-                    rowDisableBackgroundColor?: string;
-                };
-                subItems: (Item & {
-                    disableEdit?: boolean;
-                    rowDisableBackgroundColor?: string;
-                })[];
-            } | undefined;
-        }]> | undefined;
         customRowSnippet?: Snippet<[{
             index: number;
             columnIndex: number;

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

@@ -4,13 +4,13 @@
 <script lang="ts" generics="Item extends {[key: string]: any}, Data">import '../../../css/main.css';
 import './SimpleTable.css';
 import Icon from '../media/Icon.svelte';
-import { onMount } from 'svelte';
+import { onMount, tick } from 'svelte';
 import NoData from '../common/NoData.svelte';
 let { headers = [], items = [], sortedBy = $bindable(undefined), sortDirection = $bindable("asc"), resizableColumns = false, resizedColumnSizeWithPadding = $bindable(), pointerOnRowHover = false, lang = 'en', doubleClickActive = false, doubleClickDelay = 250, calculateRowStyles = undefined, calculateRowClasses = undefined, oncolumnResize, onrowClick, onrowDoubleClick, onsort, headerSnippet, headerLabelSnippet, appendSnippet, rowActionsSnippet, customSnippet, noDataSnippet, class: clazz = {}, } = $props();
 if (!onrowClick && !!onrowDoubleClick) {
     throw new Error('cannot define an onrowDoubleClick event without defining an onrowClick event');
 }
-let clickTimeout = undefined, sortModify;
+let clickTimeout = undefined, sortModify, tableContainer = $state(), mainHeader = $state(), remainingWidth = $state(0), resizeObserver;
 onMount(() => {
     if (resizableColumns) {
         if (!resizedColumnSizeWithPadding)
@@ -50,6 +50,15 @@ onMount(() => {
         }
         let table = document.getElementsByClassName('table')[0];
         table.classList.add('resizable');
+        resizeObserver = new ResizeObserver(() => {
+            updateRemainingWidth();
+        });
+        if (tableContainer) {
+            resizeObserver.observe(tableContainer);
+        }
+        return () => {
+            resizeObserver?.disconnect();
+        };
     }
 });
 function handleHeaderClick(header) {
@@ -176,12 +185,51 @@ function resize(node) {
         };
     }
 }
+$effect(() => {
+    if (resizableColumns &&
+        !!tableContainer &&
+        resizableColumns &&
+        headers.length > 0 &&
+        resizedColumnSizeWithPadding &&
+        mainHeader) {
+        tick().then(updateRemainingWidth);
+    }
+});
+async function updateRemainingWidth() {
+    if (tableContainer != null && !!tableContainer && mainHeader) {
+        const containerWidth = tableContainer?.getBoundingClientRect().width - 30;
+        if (containerWidth) {
+            const totalResizableWidth = headers.reduce((sum, head) => {
+                let th = document.getElementById(head.value);
+                if (!!th) {
+                    resizeHeader(th, head);
+                }
+                const width = th?.getBoundingClientRect().width || 0;
+                return sum + width + 1;
+            }, 0);
+            const extraStaticWidth = Array.from(mainHeader.querySelectorAll('th.non-resizable, th.slot-append, th.customize-headers'))
+                .reduce((sum, th) => sum + th.getBoundingClientRect().width + 1, 0);
+            remainingWidth = Math.max(0, containerWidth - totalResizableWidth - extraStaticWidth);
+        }
+    }
+}
+function resizeHeader(th, header) {
+    if (resizedColumnSizeWithPadding) {
+        if (!resizedColumnSizeWithPadding[header.value]) {
+            let widthWihtPadding = th.getBoundingClientRect().width;
+            resizedColumnSizeWithPadding[header.value] = widthWihtPadding;
+        }
+        let { paddingLeft, paddingRight } = getComputedStyle(th);
+        let width = resizedColumnSizeWithPadding[header.value] - parseFloat(paddingLeft) - parseFloat(paddingRight);
+        th.style.width = `${width}px`;
+    }
+}
 </script>
 
 {#if !!items && Array.isArray(items)}
-  <div class="simple-table-container {clazz.container || ''}" class:resizable={resizableColumns}>
+  <div class="simple-table-container {clazz.container || ''}" class:resizable={resizableColumns} bind:this={tableContainer}>
     <table class="table">
-      <thead class="thead {clazz.header || ''}">
+      <thead class="thead {clazz.header || ''}" bind:this={mainHeader}>
         <tr>
           {#each headers as head}
             <th
@@ -227,6 +275,13 @@ function resize(node) {
               {/if}
             </th>
           {/each}
+          {#if resizableColumns && remainingWidth}
+            <th
+              style:width={remainingWidth + 'px'}
+              class="filler"
+              aria-hidden="true"
+            ></th>
+          {/if}
           {#if rowActionsSnippet || appendSnippet}
             <th class="slot-append">
               {#if appendSnippet}
@@ -286,6 +341,9 @@ function resize(node) {
                   {/if}
                 </td>
               {/each}
+              {#if resizableColumns && remainingWidth}
+                <td></td>
+              {/if}
               {#if rowActionsSnippet || appendSnippet}
                 <td class="{clazz.cell || ''} append" style:width="fit-content">
                   {#if rowActionsSnippet}

package/package.json

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