@likable-hair/svelte 3.0.31 → 3.0.32

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

@@ -37,4 +37,5 @@ $:
   bind:multiple
   bind:maxVisibleChips
   searchFunction={() => true}
+  on:change
 ></Autocomplete>

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

@@ -17,6 +17,8 @@ declare const __propDef: {
         maxVisibleChips?: number | undefined;
     };
     events: {
+        change: CustomEvent<any>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

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

@@ -14,7 +14,7 @@ export let headers = [], items = [], sortedBy = void 0, sortDirection = void 0,
   { label: "20", value: 20 },
   { label: "50", value: 50 },
   { label: "100", value: 100 }
-], hideRowsPerPage = false, totalElements = void 0, rowsPerPage = 20, filters = [], searchBarColumns = void 0, lang = "en";
+], hideRowsPerPage = false, totalElements = void 0, rowsPerPage = 20, filters = [], searchBarColumns = void 0, searchBarVisible = true, lang = "en";
 let searchBarInput, searchText = void 0;
 let dispatch = createEventDispatcher();
 let rowsPerPageSelection = [];
@@ -61,22 +61,29 @@ function handleFiltersChange() {
 </script>
 
 <div class="paginated-table">
-
-  <SearchBar
-    placeholder="Type something to search..."
-    bind:input={searchBarInput}
-    bind:value={searchText}
-  >
-  </SearchBar>
+  {#if searchBarVisible}
+    <slot name="search-bar" {handleSearchChange}>
+      <SearchBar
+        placeholder="Type something to search..."
+        bind:input={searchBarInput}
+        bind:value={searchText}
+      >
+      </SearchBar>
+    </slot>
+  {/if}
   <div class="filter-container">
     <Filters
       bind:filters
       on:applyFilter={handleFiltersChange}
       on:removeFilter={handleFiltersChange}
+      --filters-default-wrapper-width="100%"
       {lang}
-    >
-  </Filters>
-</div>
+    > 
+      <svelte:fragment slot="append">
+        <slot name="filter-append"></slot>
+      </svelte:fragment>
+    </Filters>
+  </div>
   <SimpleTable
     bind:headers
     bind:class={clazz.simpleTable}
@@ -138,15 +145,17 @@ function handleFiltersChange() {
       {handlePaginationChange}
     >
       {#if !hideRowsPerPage}
-        <Dropdown
-          placeholder="Per pagina"
-          clearable={false}
-          mandatory={true}
-          bind:items={rowsPerPageOptions}
-          bind:values={rowsPerPageSelection}
-          --button-default-width="90px"
-          on:change={handleRowsPerPageChange}
-        ></Dropdown>
+        <div class="per-page-dropdown">
+          <Dropdown
+            placeholder="Per pagina"
+            clearable={false}
+            mandatory={true}
+            bind:items={rowsPerPageOptions}
+            bind:values={rowsPerPageSelection}
+            --button-default-width="90px"
+            on:change={handleRowsPerPageChange}
+          ></Dropdown>
+        </div>
       {/if}
       {#if totalElements !== undefined}
         <slot name="rangeDescriptor" {page} {maxPage} {rowsPerPage} {totalElements}>
@@ -194,10 +203,16 @@ function handleFiltersChange() {
   .filter-container {
     margin-top: 10px;
     display: flex;
-    align-items: left;
+    align-items: center;
     flex-direction: row;
     gap: 10px;
+    width: 100%;
   }
 
+  @media only screen and (max-width: 768px) {
+    .per-page-dropdown {
+      display: none;
+    }
+  }
 
 </style>

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

@@ -23,6 +23,7 @@ declare const __propDef: {
         rowsPerPage?: number | undefined;
         filters?: ComponentProps<Filters>['filters'];
         searchBarColumns?: string[] | undefined;
+        searchBarVisible?: boolean | undefined;
         lang?: "it" | "en" | undefined;
     };
     events: {
@@ -34,6 +35,10 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
+        'search-bar': {
+            handleSearchChange: (searchText: string | undefined) => void;
+        };
+        'filter-append': {};
         header: {
             head: import("../../simple/lists/SimpleTable.svelte").Header;
         };

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

@@ -42,7 +42,7 @@ $:
     page = maxPage;
 </script>
 
-<div class="container">
+<div class="paginator-container">
   <Button
     icon="mdi-chevron-double-left"
     on:click={hardPrevious}
@@ -118,7 +118,7 @@ $:
 </div>
 
 <style>
-  .container {
+  .paginator-container {
     display: flex;
     align-items: center;
     gap: 5px;

package/dist/components/composed/search/Filters.css

@@ -0,0 +1,3 @@
+:root {
+  --filters-default-wrapper-width: auto;
+}

package/dist/components/composed/search/Filters.svelte

@@ -276,6 +276,7 @@ function handleDeleteIconClick(e) {
 
       </div>
     {/if}
+    <slot name="append"></slot>
   </div>
   {#if mAndDown}
     <Drawer
@@ -429,6 +430,10 @@ function handleDeleteIconClick(e) {
     align-items: center;
     gap: 20px;
     max-width: 100%;
+    width: var(
+      --filters-wrapper-width,
+      var(--filters-default-wrapper-width)
+    )
   }
 
   .filter-button {

package/dist/components/composed/search/Filters.svelte.d.ts

@@ -36,7 +36,9 @@ declare const __propDef: {
     } & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        append: {};
+    };
 };
 export type FiltersProps = typeof __propDef.props;
 export type FiltersEvents = typeof __propDef.events;

package/dist/components/composed/search/SearchBar.svelte

@@ -6,7 +6,7 @@ export let input = void 0, value = void 0, placeholder = void 0;
 </script>
 
 <div
-  class="container {clazz.container}"
+  class="search-bar-container {clazz.container}"
 >
   <slot name="icon">
     <svg
@@ -47,7 +47,7 @@ export let input = void 0, value = void 0, placeholder = void 0;
 </div>
 
 <style>
-  .container {
+  .search-bar-container {
     box-shadow: inset 0 0 0 1px var(
       --search-bar-ring-color,
       var(--search-bar-default-ring-color)

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

@@ -10,4 +10,5 @@
   --simple-table-default-row-hover-background-color: rgb(var(--global-color-background-400), .2);
   --simple-table-default-header-padding: .2rem .5rem;
   --simple-table-default-header-font-weight: 700;
+  --simple-table-default-overflow-x: auto;
 }

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

@@ -130,6 +130,10 @@ function formatDate(dateTime, dateFormat) {
       --simple-table-max-height,
       var(--simple-table-default-max-height)
     );
+    overflow-x: var(
+      --simple-table-overflow-x,
+      var(--simple-table-default-overflow-x)
+    );
   }
 
   .table {

package/dist/components/simple/navigation/TabSwitcher.svelte

@@ -17,6 +17,7 @@ afterUpdate(() => {
   setBookmarkPosition();
 });
 import { createEventDispatcher } from "svelte";
+import Icon from "../media/Icon.svelte";
 const dispatch = createEventDispatcher();
 let bookmarkWidth = 0, bookmarkLeft = 0;
 function handleTabClick(clickedTab, nativeEvent) {
@@ -55,6 +56,9 @@ function setBookmarkPosition() {
       on:keypress={(event) => handleTabKeypress(tab, event)}
       bind:this={tabButtons[tab.name]}
     >
+      {#if !!tab.icon}
+        <Icon name={tab.icon}></Icon>
+      {/if}
       {tab.label}
     </div>
   {/each}

package/package.json

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