@likable-hair/svelte 4.0.22 → 4.0.24

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

@@ -240,33 +240,23 @@ $effect(() => {
       --quick-actions-z-index,
       var(--quick-actions-default-z-index)
     );
-    width: 90%;
+    display: flex;
+    justify-content: center;
+    left: 0px;
+    right: 0px;
+    padding-top: 24px;
+    padding-bottom: 24px;
+    backdrop-filter: blur(2px);
+    background-color: rgb(var(--global-color-background-100),.6);
+    mask: linear-gradient(to top, transparent 0%, black 30%, black 100%);
   }
 
   .container-top {
-    top: 16px;
-    left: 250px;
+    top: 0px;
   }
 
   .container-bottom {
-    bottom: 64px;
-  }
-
-  @media (max-width: 1025px) {
-    .container-top, .container-bottom {
-      position: fixed;
-      z-index: 48;
-      width: 80%;
-    }
-
-    .container-top {
-      top: 16px;
-      left: auto;
-    }
-
-    .container-bottom {
-      bottom: 64px;
-    }
+    bottom: 16px;
   }
   
   .select-container {
@@ -278,8 +268,14 @@ $effect(() => {
       var(--quick-actions-default-background-color)
     );
     border-radius: 8px;
-    padding: 5px;
-    margin-bottom: 10px;
+    padding: 8px;
+    margin-bottom: 16px;
+  }
+
+  @media (max-width: 1024px) {
+    .select-container {
+      width: 90%;
+    }
   }
 
   .select-info {
@@ -323,7 +319,7 @@ $effect(() => {
 
   .select-actions {
     display: flex;
-    margin: 0 8px;
+    margin-left: 8px;
     justify-content: flex-end;
     width: 100%;
     gap: 8px;
@@ -369,7 +365,7 @@ $effect(() => {
     bottom: 121px;
   }
 
-  @media (max-width: 1500px) {
+  @media (max-width: 1440px) {
     .more-actions-container-menu {
       display: grid;
       grid-template-columns: 1fr;

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

@@ -94,7 +94,7 @@ 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 = {}, dynamicFilters = true, useSelectedItemsOnly = false, 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 { 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 = $bindable({}), dynamicFilters = true, useSelectedItemsOnly = false, selectedAllDisabled = false, 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(), tableHTML = $state(), headersHTML = {}, userScrolling = $state(true), reachedBottom = $state(false), reachedTop = false, resizing = false, remainingWidth = $state(0), hideScrollbar = $state(false), sortModify, mainHeader = $state(), resizeObserver, ignoreSelectAll = rows.length == totalRows && useSelectedItemsOnly;
 const DEFAULT_MIN_WIDTH_PX = 100, DEFAULT_MAX_WIDTH_PX = 400;
 let totalSections = $derived((totalRows - renderedRowsNumber) / sectionRowsNumber);
@@ -942,8 +942,8 @@ function resizeHeader(th, header) {
           {/if}
           
           <div class="filter-container">
-            {#if filtersVisible}
-              <div>
+            <div>
+              {#if filtersVisible}
                 {#if dynamicFilters}
                   <Filters
                     bind:filters
@@ -953,6 +953,7 @@ function resizeHeader(th, header) {
                     onremoveFilter={e => { handleRemoveFilter(e.detail.filter) }}
                     onremoveAllFilters={() => handleRemoveAllFilters()}
                     --filters-default-wrapper-width="100%"
+                    --filters-button-height=29px
                     {lang}
                     {dateLocale}
                     {editFilterMode}
@@ -986,6 +987,7 @@ function resizeHeader(th, header) {
                     onremoveFilter={e => { handleRemoveFilter(e.detail.filter) }}
                     onremoveAllFilters={() => handleRemoveAllFilters()}
                     --filters-default-wrapper-width="100%"
+                    --filters-button-height=29px
                     {lang}
                     {dateLocale}
                     {editFilterMode}
@@ -996,8 +998,8 @@ function resizeHeader(th, header) {
                   >
                   </Filters>
                 {/if}
-              </div>
-            {/if}
+              {/if}
+            </div>
   
             <div>
               {@render appendSnippet?.()}
@@ -1076,7 +1078,7 @@ function resizeHeader(th, header) {
               class="non-resizable"
               bind:this={headersHTML['non-resizable']}
             > 
-              {#if selectMode === "multiple"}
+              {#if selectMode === "multiple" && !selectedAllDisabled}
                 <Checkbox
                   id="select-all"
                   value={selectedAll}
@@ -1102,6 +1104,7 @@ function resizeHeader(th, header) {
               style:max-width={header.maxWidth}
               class:sortable={header.sortable}
               onclick={() => handleHeaderClick(header)}
+              id={header.value}
               bind:this={headersHTML[header.value]}
             >
               {#if resizableColumns}
@@ -2246,7 +2249,7 @@ function resizeHeader(th, header) {
   .results-number {
     margin: 0px 0px 4px 4px;
     display: flex;
-    align-items: center;
+    align-items: top;
     gap: 4px;
     min-width: 90px;
   }

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

@@ -176,6 +176,7 @@ declare class __sveltets_Render<Item extends {
         } | undefined;
         dynamicFilters?: boolean;
         useSelectedItemsOnly?: boolean;
+        selectedAllDisabled?: boolean;
         class?: {
             container?: string;
             header?: string;
@@ -526,7 +527,7 @@ declare class __sveltets_Render<Item extends {
     };
     events(): {};
     slots(): {};
-    bindings(): "searchText" | "sortedBy" | "sortDirection" | "filters" | "selectedItems" | "unselectedItems" | "selectedAll";
+    bindings(): "searchText" | "sortedBy" | "sortDirection" | "resizedColumnSizeWithPadding" | "filters" | "selectedItems" | "unselectedItems" | "selectedAll";
     exports(): {};
 }
 interface $$IsomorphicComponent {

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

@@ -5,11 +5,12 @@ import {} from "svelte";
 import Filters from "../search/Filters.svelte";
 import SearchBar from "../search/SearchBar.svelte";
 import Converter from "../../../utils/filters/filters";
+import MediaQuery from "../../simple/common/MediaQuery.svelte";
 let { headers = [], items = [], sortedBy = $bindable(undefined), sortDirection = $bindable("asc"), page = $bindable(1), maxPage = undefined, rowsPerPageOptions = [
     { label: "20", value: 20 },
     { label: "50", value: 50 },
     { label: "100", value: 100 },
-], hideRowsPerPage = false, totalElements = undefined, rowsPerPage = $bindable(20), filters = $bindable([]), searchBarColumns = undefined, searchBarVisible = true, lang = "en", editFilterMode = "one-edit", showActiveFilters = true, resizableColumns = false, resizedColumnSizeWithPadding = {}, pointerOnRowHover = undefined, doubleClickActive = false, doubleClickDelay = 250, calculateRowStyles = undefined, calculateRowClasses = undefined, class: clazz = {}, onfiltersChange, onpaginationChange, onremoveFilter, onremoveAllFilters, customFilterChipSnippet, customFilterSnippet, filterAppendSnippet, onrowClick, onrowDoubleClick, appendSnippet, customSnippet, headerLabelSnippet, headerSnippet, rowActionsSnippet, onsort, footerSnippet, rangeDescriptorSnippet, searchBarSnippet, noDataSnippet, oncolumnResize, } = $props();
+], hideRowsPerPage = false, totalElements = undefined, rowsPerPage = $bindable(20), filters = $bindable([]), searchBarColumns = undefined, searchBarVisible = true, lang = "en", searchBarPlaceholder = lang == 'en' ? "Type to search..." : "Scrivi per cercare...", editFilterMode = "one-edit", showActiveFilters = true, resizableColumns = false, resizedColumnSizeWithPadding = {}, pointerOnRowHover = undefined, doubleClickActive = false, doubleClickDelay = 250, calculateRowStyles = undefined, calculateRowClasses = undefined, class: clazz = {}, onfiltersChange, onpaginationChange, onremoveFilter, onremoveAllFilters, customFilterChipSnippet, customFilterSnippet, filterAppendSnippet, onrowClick, onrowDoubleClick, appendSnippet, customSnippet, headerLabelSnippet, headerSnippet, rowActionsSnippet, onsort, footerSnippet, rangeDescriptorSnippet, searchBarSnippet, noDataSnippet, oncolumnResize, } = $props();
 let searchBarInput = $state(), searchText = $state(), sortModify;
 let rowsPerPageSelection = $state([]);
 $effect(() => {
@@ -111,37 +112,41 @@ function buildFilters(params) {
 </script>
 
 <div class="paginated-table">
-  <div class="filter-container">
-    {#if searchBarVisible}
-      {#if searchBarSnippet}
-        {@render searchBarSnippet({ handleSearchChange })}
-      {:else}
-        <div class="search-bar-container">
-          <SearchBar
-            bind:input={searchBarInput}
-            bind:value={searchText}
-            --search-bar-default-height="36px"
-            --search-bar-default-border-radius="4px"
-            --search-bar-default-ring-color="rgb(var(--global-color-background-300),.6)"
-            --search-bar-default-background-color="rgb(var(--global-color-background-300),.4)"
-          ></SearchBar>
-        </div>
-      {/if}
-    {/if}
-    <Filters
-      bind:filters
-      onapplyFilter={handleFiltersChange}
-      onremoveFilter={handleRemoveFilter}
-      onremoveAllFilters={handleRemoveAllFilters}
-      --filters-default-wrapper-width={!!searchBarVisible ? undefined : "100%"}
-      {lang}
-      {editFilterMode}
-      {showActiveFilters}
-      appendSnippet={filterAppendSnippet}
-      customChipSnippet={customFilterChipSnippet}
-      customSnippet={customFilterSnippet}
-    ></Filters>
-  </div>
+  <MediaQuery>
+    {#snippet defaultSnippet({ mAndDown })}
+      <div class="searchbar-and-filter-container {mAndDown ? 'mobile' : 'desktop'}">
+        {#if searchBarVisible}
+          {#if searchBarSnippet}
+            {@render searchBarSnippet({ handleSearchChange })}
+          {:else}
+            <SearchBar
+              placeholder={searchBarPlaceholder}
+              bind:input={searchBarInput}
+              bind:value={searchText}
+              --search-bar-default-width={mAndDown ? "100%" : "450px"}
+              --search-bar-default-height="36px"
+              --search-bar-default-border-radius="4px"
+              --search-bar-default-ring-color="rgb(var(--global-color-background-300),.6)"
+              --search-bar-default-background-color="rgb(var(--global-color-background-300),.4)"
+            ></SearchBar>
+          {/if}
+        {/if}
+        <Filters
+          bind:filters
+          onapplyFilter={handleFiltersChange}
+          onremoveFilter={handleRemoveFilter}
+          onremoveAllFilters={handleRemoveAllFilters}
+          --filters-default-wrapper-width={!!searchBarVisible ? undefined : "100%"}
+          {lang}
+          {editFilterMode}
+          {showActiveFilters}
+          appendSnippet={filterAppendSnippet}
+          customChipSnippet={customFilterChipSnippet}
+          customSnippet={customFilterSnippet}
+        ></Filters>
+      </div>
+    {/snippet}
+  </MediaQuery>
   <SimpleTable
     {headers}
     class={clazz.simpleTable}
@@ -234,20 +239,17 @@ function buildFilters(params) {
     width: 100%;
   }
 
-  .filter-container {
+  .searchbar-and-filter-container {
     display: flex;
-    align-items: center;
-    flex-direction: row;
     gap: 12px;
-    width: 100%;
   }
 
-  .search-bar-container {
-    padding: var(
-      --paginated-table-search-bar-container-padding,
-      var(--paginated-table-search-bar-container-default-padding, 0)
-    );
-    flex-grow: 1;
+  .searchbar-and-filter-container.desktop {
+    flex-direction: row;
+  }
+
+  .searchbar-and-filter-container.mobile {
+    flex-direction: column;
   }
 
   @media only screen and (max-width: 768px) {

package/dist/components/layouts/CollapsibleSideBarLayout.svelte

@@ -5,6 +5,7 @@ import Icon from "../simple/media/Icon.svelte";
 import {} from "../simple/lists/ColorInvertedSelector.svelte";
 import { writable } from "svelte/store";
 import {} from "svelte";
+import mediaQuery from "../../stores/mediaQuery";
 let { drawerOpened = $bindable(false), sidebarExpanded = $bindable(false), class: clazz = {}, ondrawerChange, onsidebarToggle, headerSnippet, innerMenuSnippet, sidebarSnippet, logoSnippet, menuSnippet, userSnippet, children, } = $props();
 const sidebarPinned = writable(false);
 let headerElement;
@@ -26,6 +27,11 @@ function toggleSidebar() {
         onsidebarToggle({ detail: { expanded: sidebarExpanded } });
     }
 }
+$effect(() => {
+    if ($mediaQuery.m || $mediaQuery.s || $mediaQuery.xs) {
+        sidebarExpanded = false;
+    }
+});
 </script>
 
 <MediaQuery>
@@ -48,7 +54,7 @@ function toggleSidebar() {
                   onclick={toggleMenu}
                 />
               </div>
-            {:else if !sidebarExpanded}
+            {:else}
               {#if !sidebarExpanded}
                 <div style:margin-right="2rem">
                   <Icon
@@ -176,7 +182,6 @@ function toggleSidebar() {
     justify-content: center;
     align-items: center;
     width: 100%;
-    margin-bottom: 1rem;
   }
 
   .logo-container {

package/dist/components/simple/forms/FileInputList.css

@@ -5,6 +5,6 @@
   --file-input-list-default-selected-row-color: rgb(var(--global-color-contrast-1000));
   --file-input-list-default-selected-row-background: rgb(var(--global-color-background-500));
   --file-input-list-default-hover-color: rgb(var(--global-color-contrast-900));
-  --file-input-list-default-border-color: rgb(var(--global-color-primary-100));
+  --file-input-list-default-border: 2px dashed rgb(var(--global-color-contrast-900), .4);
   --file-input-list-default-border-radius: 5px
 }

package/dist/components/simple/forms/FileInputList.svelte

@@ -224,10 +224,9 @@ function isImageFile(file) {
   }
 
   .body-container {
-    border: dotted;
-    border-color: var(
-      --file-input-list-border-color,
-      var(--file-input-list-default-border-color)
+    border: var(
+      --file-input-list-border,
+      var(--file-input-list-default-border)
     );
     border-radius: var(
       --file-input-list-border-radius,

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

@@ -60,6 +60,8 @@ function handleKeypress(params) {
 }
 function handleElementClick(element) {
     selected = element.name;
+    if (element.disabled)
+        return;
     if (onselect) {
         onselect({
             detail: {

package/package.json

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