@likable-hair/svelte 3.0.19 → 3.0.20

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

@@ -3,7 +3,7 @@
 <script>import Autocomplete from "../../../components/simple/forms/Autocomplete.svelte";
 import Button from "../../simple/buttons/Button.svelte";
 import Icon from "../../simple/media/Icon.svelte";
-export let items = [], values = [], multiple = false, searchText = void 0, maxVisibleChips = void 0, placeholder = "Seleziona", icon = void 0;
+export let items = [], values = [], multiple = false, searchText = void 0, maxVisibleChips = void 0, placeholder = "Seleziona", clearable = true, mandatory = true, icon = void 0;
 $:
   generatedLabel = values.length == 1 ? values[0].label : `${values.length} Selezionati`;
 function handleCloseClick(event) {
@@ -19,11 +19,15 @@ function handleCloseClick(event) {
   bind:searchText
   bind:multiple
   bind:maxVisibleChips
+  bind:mandatory
   searchFunction={() => true}
+  on:change
 >
   <svelte:fragment slot="selection-container" let:openMenu let:handleKeyDown>
     <Button 
       --button-default-background-color="transparent"
+      --button-default-focus-background-color="rgb(var(--global-color-primary-400), .3)"
+      --button-default-focus-color="rgb(var(--global-color-contrast-900))"
       --button-default-border="2px solid rgb(var(--global-color-primary-400))"
       --button-default-color="rgb(var(--global-color-contrast-800))"
       on:click={openMenu}
@@ -48,11 +52,13 @@ function handleCloseClick(event) {
           {:else}
             <div class="space-between">
               <div>{generatedLabel}</div>
-              <Icon 
-                name="mdi-close"
-                click
-                on:click={handleCloseClick}
-              ></Icon>
+              {#if clearable}  
+                <Icon 
+                  name="mdi-close"
+                  click
+                  on:click={handleCloseClick}
+                ></Icon>
+              {/if}
             </div>
           {/if}
         </div>
@@ -67,7 +73,9 @@ function handleCloseClick(event) {
     justify-content: flex-start;
     align-items: center;
     gap: 10px;
-    width: 130px;
+    width: 100%;
+    text-overflow: ellipsis;
+    white-space: pre;
   }
 
   .space-between {
@@ -75,5 +83,6 @@ function handleCloseClick(event) {
     display: flex;
     justify-content: space-between;
     align-items: center;
+    gap: 10px;
   }
 </style>

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

@@ -9,9 +9,13 @@ declare const __propDef: {
         searchText?: string | undefined;
         maxVisibleChips?: number | undefined;
         placeholder?: string | undefined;
+        clearable?: boolean | undefined;
+        mandatory?: boolean | undefined;
         icon?: string | undefined;
     };
     events: {
+        change: CustomEvent<any>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {

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

@@ -1,152 +1,150 @@
-<!-- <script lang="ts" context="module">
-  export type Header = {
-    value: string;
-    label: string;
-    type: "boolean" | "string" | "number" | "date" | "custom";
-    width?: string;
-    minWidth?: string;
-    data?: { [key: string]: any };
-  };
+<script context="module">import SimpleTable from "../../simple/lists/SimpleTable.svelte";
+import Icon from "../../simple/media/Icon.svelte";
+import Paginator from "./Paginator.svelte";
+import Dropdown from "../forms/Dropdown.svelte";
+import { createEventDispatcher } from "svelte";
 </script>
 
-<script lang="ts">
-  import { onMount } from 'svelte';
-	import type { Filter } from '../../../types/filter';
-	import StandardPaginator from './StandardPaginator.svelte';
-	import StandardSelect from './StandardSelect.svelte';
-	import StandardTable from "./StandardTable.svelte";
-
-  export let headers: Header[] = [],
-    filters: Filter[] = [],
-    width: string = "auto",
-    page: number = 1,
-    perPage: number = 20,
-    perPageOptions: number[] = [20, 50, 100],
-    reload: boolean = false,
-    loading: boolean = false,
-    loadingText: string = "Caricamento ...",
-    noDataText: string = "Nessun elemento disponibile",
-    fetcher: (params: {
-      page: number,
-      perPage: number,
-      filters: Filter[]
-    }) => Promise<{
-      data: any[],
-      meta: PaginationData
-    }>
-
-  let items: { [key: string]: any }[] = [],
-    maxPage: number | undefined = undefined
-
-  onMount(() => {
-    loadRows()
-  })
-
-  async function loadRows() {
-    if(!!fetcher) {
-      loading = true
-      let results = await fetcher({page, perPage, filters})
-
-      items = results.data
-      page = results.meta.currentPage
-      maxPage = results.meta.lastPage
-      loading = false
-    }
-  }
-
-  function handlePaginationChange() {
-    loadRows()
-  }
-
-  function handlePerPageChange() {
-    page = 1
-    loadRows()
-  }
-
-  $: perPageOptionsFormatted = perPageOptions.map((el) => {
-    return {
-      value: el,
-      text: el.toString()
-    }
-  })
-  $: if(reload) {
-    loadRows().then(() => {
-      reload = false
-    })
-  }
-
-  $: filters && loadRows()
-
+<script>let clazz = {};
+export { clazz as class };
+export let headers = [], items = [], sortedBy = void 0, sortDirection = void 0, page = 1, maxPage = void 0, rowsPerPageOptions = [
+  { label: "20", value: 20 },
+  { label: "50", value: 50 },
+  { label: "100", value: 100 }
+], hideRowsPerPage = false, totalElements = void 0, rowsPerPage = 20;
+let dispatch = createEventDispatcher();
+let rowsPerPageSelection = [];
+$:
+  rowsPerPageSelection = [
+    { label: rowsPerPage.toString(), value: rowsPerPage }
+  ];
+$:
+  if (totalElements !== void 0)
+    maxPage = Math.max(Math.round(totalElements / rowsPerPage), 1);
+function handleRowsPerPageChange(e) {
+  rowsPerPage = Number(e.detail.selection?.[0].value);
+  handlePaginationChange();
+}
+function handlePaginationChange() {
+  dispatch("paginationChange", {
+    rowsPerPage,
+    page
+  });
+}
 </script>
 
-<div class="top-actions">
-
-</div>
-<div class="table">
-  <StandardTable
-    headers={headers}
-    width={width}
-    items={items}
+<div class="paginated-table">
+  <SimpleTable
+    bind:headers
+    bind:class={clazz.simpleTable}
+    bind:items
+    bind:sortedBy
+    bind:sortDirection
+    on:sort
   >
-    <svelte:fragment slot="appendLastColumn" let:item>
-      <slot name="appendLastColumn" item={item}></slot>
+    <svelte:fragment slot="header" let:head>
+      <slot name="header" {head} >
+        <span class="header-label">
+          <slot name="headerLabel">
+            {head.label}
+          </slot>
+        </span>
+        {#if head.sortable}
+          <span 
+            class="header-sort-icon"
+            class:active={sortedBy == head.value}
+            class:asc={sortDirection == 'asc'}
+            class:desc={sortDirection == 'desc'}
+          >
+            {#if sortDirection == 'asc'}
+              <Icon name="mdi-arrow-up"></Icon>
+            {:else}
+              <Icon name="mdi-arrow-down"></Icon>
+            {/if}
+          </span>
+        {/if}
+      </slot>
     </svelte:fragment>
-
-    <svelte:fragment slot="customColumn" let:item let:header>
-      <slot name="customColumn" item={item} header={header}></slot>
+    <svelte:fragment 
+      slot="custom" 
+      let:columnIndex 
+      let:index 
+      let:header 
+      let:item
+    >
+      <slot name="custom" {index} {columnIndex} {header} {item}/>
     </svelte:fragment>
-  </StandardTable>
-  {#if loading}
-    <div class="loading-text">
-      {loadingText}
-    </div>
-  {:else if items.length == 0}
-    <div class="no-data">
-      {noDataText}
-    </div>
-  {/if}
-</div>
-<div class="footer">
-  <div>
-    <StandardSelect
-      bind:value={perPage}
-      options={perPageOptionsFormatted}
-      on:change={handlePerPageChange}
-    ></StandardSelect>
-  </div>
-  <div>
-    <StandardPaginator
-      bind:page={page}
-      bind:maxPage={maxPage}
-      on:change={handlePaginationChange}
-    ></StandardPaginator>
+    <svelte:fragment slot="rowActions" let:index let:item>
+      <slot name="rowActions" {index} {item} />
+    </svelte:fragment>
+    <svelte:fragment slot="append" let:index let:item>
+      <slot name="append" {index} {item} />
+    </svelte:fragment>
+  </SimpleTable>
+  <div class="footer">
+    <slot 
+      name="footer"
+      {hideRowsPerPage}
+      {rowsPerPageOptions}
+      {rowsPerPageSelection}
+      {totalElements}
+      {page}
+      {maxPage}
+      {rowsPerPage}
+      {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>
+      {/if}
+      {#if totalElements !== undefined}
+        <slot name="rangeDescriptor" {page} {maxPage} {rowsPerPage} {totalElements}>
+          <div class="range-descriptor">
+            viewing {((page || 1) - 1) * rowsPerPage} - {(page || 1) * rowsPerPage} of {totalElements}
+          </div>
+        </slot>
+      {/if}
+      <Paginator
+        bind:page
+        bind:maxPage
+        on:change={handlePaginationChange}
+      ></Paginator>
+    </slot>
   </div>
 </div>
 
 <style>
-  .footer {
+  .paginated-table {
+    width: 100%;
     display: flex;
-    justify-content: space-between;
-    margin-top: 10px;
+    flex-direction: column;
+    gap: 24px;
+    align-items: center;
   }
 
-  .loading-text {
-    height: 200px;
-    max-height: 100vh;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    color: var(--global-light-contrast-color);
-    font-size: .9rem;
+  .header-sort-icon {
+    display: none;
+  }
+
+  .header-sort-icon.active {
+    display: inline;
   }
 
-  .no-data {
-    height: 200px;
-    max-height: 100vh;
+  .range-descriptor {
+    font-size: .7rem;
+  }
+
+  .footer {
     display: flex;
-    justify-content: center;
+    justify-content: space-between;
     align-items: center;
-    color: var(--global-light-contrast-color);
-    font-size: .9rem;
+    width: 100%;
   }
-</style> -->
+</style>

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

@@ -1,10 +1,76 @@
 import { SvelteComponentTyped } from "svelte";
+import SimpleTable from "../../simple/lists/SimpleTable.svelte";
+import Paginator from "./Paginator.svelte";
+import Dropdown from "../forms/Dropdown.svelte";
+import { type ComponentProps } from "svelte";
+type ArrayElement<ArrayType extends readonly unknown[]> = ArrayType extends readonly (infer ElementType)[] ? ElementType : never;
+export type Header = ArrayElement<NonNullable<ComponentProps<SimpleTable>['headers']>>;
 declare const __propDef: {
-    props: Record<string, never>;
+    props: {
+        class?: {
+            simpleTable?: ComponentProps<SimpleTable>['class'];
+        } | undefined;
+        headers?: ComponentProps<SimpleTable>['headers'];
+        items?: ComponentProps<SimpleTable>['items'];
+        sortedBy?: ComponentProps<SimpleTable>['sortedBy'];
+        sortDirection?: ComponentProps<SimpleTable>['sortDirection'];
+        page?: number | undefined;
+        maxPage?: ComponentProps<Paginator>['maxPage'];
+        rowsPerPageOptions?: ComponentProps<Dropdown>['items'];
+        hideRowsPerPage?: boolean | undefined;
+        totalElements?: number | undefined;
+        rowsPerPage?: number | undefined;
+    };
     events: {
+        sort: CustomEvent<{
+            sortedBy: string | undefined;
+            sortDirection: string;
+        }>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        header: {
+            head: import("../../simple/lists/SimpleTable.svelte").Header;
+        };
+        headerLabel: {};
+        custom: {
+            index: any;
+            columnIndex: any;
+            header: import("../../simple/lists/SimpleTable.svelte").Header;
+            item: {
+                [key: string]: any;
+            };
+        };
+        rowActions: {
+            index: any;
+            item: {
+                [key: string]: any;
+            };
+        };
+        append: {
+            index: any;
+            item: {
+                [key: string]: any;
+            };
+        };
+        footer: {
+            hideRowsPerPage: boolean;
+            rowsPerPageOptions: import("../forms/Dropdown.svelte").Item[] | undefined;
+            rowsPerPageSelection: import("../forms/Dropdown.svelte").Item[];
+            totalElements: number | undefined;
+            page: number;
+            maxPage: number | undefined;
+            rowsPerPage: number;
+            handlePaginationChange: () => void;
+        };
+        rangeDescriptor: {
+            page: number;
+            maxPage: number | undefined;
+            rowsPerPage: number;
+            totalElements: number | undefined;
+        };
+    };
 };
 export type PaginatedTableProps = typeof __propDef.props;
 export type PaginatedTableEvents = typeof __propDef.events;

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

@@ -47,7 +47,8 @@ $:
     icon="mdi-chevron-double-left"
     on:click={hardPrevious}
     --button-default-background-color="transparent"
-    --button-default-focus-background-color="transparent"
+    --button-default-focus-background-color="rgb(var(--global-color-primary-500), .3)"
+    --button-default-focus-color="rgb(var(--global-color-contrast-900))"
     --button-default-hover-background-color="rgb(var(--global-color-primary-500))"
     --button-default-box-shadow="none"
     --button-default-color="rgb(var(--global-color-contrast-900))"
@@ -56,7 +57,8 @@ $:
     icon="mdi-chevron-left"
     on:click={previousPage}
     --button-default-background-color="transparent"
-    --button-default-focus-background-color="transparent"
+    --button-default-focus-background-color="rgb(var(--global-color-primary-500), .3)"
+    --button-default-focus-color="rgb(var(--global-color-contrast-900))"
     --button-default-hover-background-color="rgb(var(--global-color-primary-500))"
     --button-default-box-shadow="none"
     --button-default-color="rgb(var(--global-color-contrast-900))"
@@ -65,7 +67,8 @@ $:
     <Button
       on:click={() => goToPage(page - 1)}
       --button-default-background-color="transparent"
-      --button-default-focus-background-color="transparent"
+      --button-default-focus-background-color="rgb(var(--global-color-primary-500), .3)"
+      --button-default-focus-color="rgb(var(--global-color-contrast-900))"
       --button-default-hover-background-color="rgb(var(--global-color-primary-500))"
       --button-default-box-shadow="none"
       --button-default-color="rgb(var(--global-color-contrast-900))"
@@ -82,7 +85,8 @@ $:
     <Button
       on:click={() => goToPage(page + 1)}
       --button-default-background-color="transparent"
-      --button-default-focus-background-color="transparent"
+      --button-default-focus-background-color="rgb(var(--global-color-primary-500), .3)"
+      --button-default-focus-color="rgb(var(--global-color-contrast-900))"
       --button-default-hover-background-color="rgb(var(--global-color-primary-500))"
       --button-default-box-shadow="none"
       --button-default-color="rgb(var(--global-color-contrast-900))"
@@ -93,7 +97,8 @@ $:
     on:click={nextPage}
     icon="mdi-chevron-right"
     --button-default-background-color="transparent"
-    --button-default-focus-background-color="transparent"
+    --button-default-focus-background-color="rgb(var(--global-color-primary-500), .3)"
+    --button-default-focus-color="rgb(var(--global-color-contrast-900))"
     --button-default-hover-background-color="rgb(var(--global-color-primary-500))"
     --button-default-box-shadow="none"
     --button-default-color="rgb(var(--global-color-contrast-900))"
@@ -103,7 +108,8 @@ $:
       on:click={hardNext}
       icon="mdi-chevron-double-right"
       --button-default-background-color="transparent"
-      --button-default-focus-background-color="transparent"
+      --button-default-focus-background-color="rgb(var(--global-color-primary-500), .3)"
+      --button-default-focus-color="rgb(var(--global-color-contrast-900))"
       --button-default-hover-background-color="rgb(var(--global-color-primary-500))"
       --button-default-box-shadow="none"
       --button-default-color="rgb(var(--global-color-contrast-900))"

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

@@ -0,0 +1,97 @@
+<script context="module"></script>
+
+<script>import "./Filters.css";
+import "../../../css/main.css";
+import Drawer from "../../simple/navigation/Drawer.svelte";
+import Menu from "../../simple/common/Menu.svelte";
+import MediaQuery from "../../simple/common/MediaQuery.svelte";
+import Button from "../../simple/buttons/Button.svelte";
+import Icon from "../../simple/media/Icon.svelte";
+import { createEventDispatcher } from "svelte";
+import SelectableVerticalList from "../../simple/lists/SelectableVerticalList.svelte";
+export let addFilterLabel = "Add filter", filters = [];
+let dispatch = createEventDispatcher();
+let open = false, activator;
+function handleAddFilterClick() {
+  dispatch("addFilterClick");
+  open = true;
+}
+$:
+  filterOptions = filters.map((f) => {
+    return {
+      title: f.label,
+      name: f.name
+    };
+  });
+let selected;
+let focused;
+$:
+  if (!!selected)
+    selected = void 0;
+$:
+  if (!!focused && !open)
+    focused = void 0;
+function handleFilterSelection() {
+}
+</script>
+
+
+<div 
+  class="add-filter-button"
+  bind:this={activator}
+>
+  <Button
+    on:click={handleAddFilterClick}
+  >
+    <Icon name="mdi-plus"></Icon>
+    {addFilterLabel}
+  </Button>
+</div>
+
+<MediaQuery let:mAndDown>
+  {#if mAndDown}
+    <Drawer
+      bind:open={open}
+      position="bottom"
+      on:item-click
+    >
+      <SelectableVerticalList
+        bind:selected
+        bind:focused
+        bind:elements={filterOptions}
+        --selectable-vertical-list-default-width="100%"
+        --selectable-vertical-list-default-element-height="56px"
+        --selectable-vertical-list-default-title-font-size="null"
+        on:select={handleFilterSelection}
+      ></SelectableVerticalList>
+    </Drawer>
+  {:else}
+    <Menu
+      bind:activator={activator}
+      bind:open={open}
+      closeOnClickOutside
+      _boxShadow="rgb(var(--global-color-grey-900), .5) 0px 2px 4px"
+      _height="fit-content"
+      _maxHeight="300px"
+      _minWidth="100px"
+      _borderRadius="5px"
+      anchor="bottom-center"
+    >
+      <SelectableVerticalList
+        bind:selected
+        bind:focused
+        bind:elements={filterOptions}
+        --selectable-vertical-list-default-width="100%"
+        --selectable-vertical-list-default-element-height="56px"
+        --selectable-vertical-list-default-title-font-size="null"
+        on:select={handleFilterSelection}
+      ></SelectableVerticalList>
+    </Menu>
+  {/if}
+</MediaQuery>
+
+<style>
+  .add-filter-button {
+    width: fit-content;
+  }
+</style>

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

@@ -0,0 +1,26 @@
+import { SvelteComponentTyped } from "svelte";
+export type ArrayElement<ArrayType extends readonly unknown[]> = ArrayType extends readonly (infer ElementType)[] ? ElementType : never;
+import './Filters.css';
+import '../../../css/main.css';
+import type { Filter } from '../../../utils/filters/filters';
+declare const __propDef: {
+    props: {
+        addFilterLabel?: string | undefined;
+        filters?: Filter[] | undefined;
+    };
+    events: {
+        'item-click': CustomEvent<{
+            item: import("../../simple/navigation/Navigator.svelte").Item;
+        }>;
+        addFilterClick: CustomEvent<undefined>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type FiltersProps = typeof __propDef.props;
+export type FiltersEvents = typeof __propDef.events;
+export type FiltersSlots = typeof __propDef.slots;
+export default class Filters extends SvelteComponentTyped<FiltersProps, FiltersEvents, FiltersSlots> {
+}
+export {};

package/dist/components/simple/buttons/Button.css

@@ -14,6 +14,7 @@
   --button-default-text-hover-background-color: rgb(var(--global-color-primary-500), 0.2);
   --button-default-active-background-color: rgb(var(--global-color-primary-500));
   --button-default-focus-background-color: rgb(var(--global-color-primary-500));
+  --button-default-focus-color: rgb(var(--global-color-grey-50));
   --button-default-disabled-background-color: rgb(var(--global-color-primary-500), .6);
   --button-default-disabled-color: rgb(var(--global-color-grey-50), .6);
   --button-default-text-active-background-color: rgb(var(--global-color-primary-500), 0.4);

package/dist/components/simple/buttons/Button.svelte

@@ -199,6 +199,10 @@ import CircularLoader from "../loaders/CircularLoader.svelte";
       --button-focus-background-color,
       var(--button-default-focus-background-color)
     );
+    color: var(
+      --button-focus-color,
+      var(--button-default-focus-color)
+    );
   }
 
   .button-text {

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

@@ -5,7 +5,7 @@ import "./Autocomplete.css";
 import { scrollInMenu } from "../common/scroller";
 let clazz = {};
 export { clazz as class };
-export let values = [], items, searchFunction = void 0, multiple = false, disabled = false, placeholder = "", width = "auto", height = "auto", maxWidth = void 0, openingId = "autocomplete-menu", searchText = void 0, maxVisibleChips = void 0, menuBoxShadow = "rgb(var(--global-color-background-300), .5) 0px 2px 4px", menuBorderRadius = "5px";
+export let values = [], items, searchFunction = void 0, multiple = false, disabled = false, mandatory = false, placeholder = "", width = "auto", height = "auto", maxWidth = void 0, openingId = "autocomplete-menu", searchText = void 0, maxVisibleChips = void 0, menuBoxShadow = "rgb(var(--global-color-background-300), .5) 0px 2px 4px", menuBorderRadius = "5px";
 let dispatch = createEventDispatcher();
 function select(item) {
   const alreadyPresent = values.findIndex((i) => i.value === item.value) != -1;
@@ -23,6 +23,8 @@ function select(item) {
   }
 }
 function unselect(item) {
+  if (values.length == 1 && mandatory)
+    return;
   values = values.filter((i) => i.value != item.value);
   refreshMenuWidth();
   dispatch("change", {
@@ -32,6 +34,8 @@ function unselect(item) {
   });
 }
 function pop() {
+  if (values.length == 1 && mandatory)
+    return;
   let poppedElement = values.pop();
   values = [...values];
   refreshMenuWidth();

package/dist/components/simple/forms/Autocomplete.svelte.d.ts

@@ -17,6 +17,7 @@ declare const __propDef: {
         searchFunction?: ((item: Item, searchText: string | undefined) => boolean) | undefined;
         multiple?: boolean | undefined;
         disabled?: boolean | undefined;
+        mandatory?: boolean | undefined;
         placeholder?: string | undefined;
         width?: string | undefined;
         height?: string | undefined;

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

@@ -2,7 +2,6 @@
 
 <script>import "../../../css/main.css";
 import "./SimpleTable.css";
-import { dateToString } from "../dates/utils";
 import Icon from "../media/Icon.svelte";
 import { createEventDispatcher } from "svelte";
 let clazz = {};
@@ -25,6 +24,9 @@ function handleHeaderClick(header) {
     sortDirection
   });
 }
+function formatDate(dateTime, dateFormat) {
+  return dateTime.setLocale(dateFormat.locale).toFormat(dateFormat.format);
+}
 </script>
 
 {#if !!items && Array.isArray(items)}
@@ -33,8 +35,8 @@ function handleHeaderClick(header) {
       <thead class="thead {clazz.header || ''}">
         <tr>
           {#each headers as head}
-            <th 
-              style:width={head.width} 
+            <th
+              style:width={head.width}
               style:min-width={head.minWidth}
               class:sortable={head.sortable}
               on:click={() => handleHeaderClick(head)}
@@ -46,16 +48,16 @@ function handleHeaderClick(header) {
                   </slot>
                 </span>
                 {#if head.sortable}
-                  <span 
+                  <span
                     class="header-sort-icon"
                     class:active={sortedBy == head.value}
-                    class:asc={sortDirection == 'asc'}
-                    class:desc={sortDirection == 'desc'}
+                    class:asc={sortDirection == "asc"}
+                    class:desc={sortDirection == "desc"}
                   >
-                    {#if sortDirection == 'asc'}
-                      <Icon name="mdi-arrow-up"></Icon>
+                    {#if sortDirection == "asc"}
+                      <Icon name="mdi-arrow-up" />
                     {:else}
-                      <Icon name="mdi-arrow-down"></Icon>
+                      <Icon name="mdi-arrow-down" />
                     {/if}
                   </span>
                 {/if}
@@ -74,7 +76,7 @@ function handleHeaderClick(header) {
           <tr class="item-tr {clazz.row || ''}">
             {#each headers as header, j}
               <td class="{clazz.cell || ''}">
-                {#if header.type == "custom"}
+                {#if header.type.key == "custom"}
                   <slot
                     name="custom"
                     index={i}
@@ -82,9 +84,15 @@ function handleHeaderClick(header) {
                     {header}
                     {item}
                   />
-                {:else if header.type == "date"}
-                  {dateToString(item[header.value], "dayAndHours", "it")}
-                {:else}
+                {:else if  header.type.key == "date"}
+                  {formatDate(item[header.value], header.type.params)}
+                {:else if header.type.key == "icon"}
+                    <Icon 
+                     --icon-color={header.type.params?.color }  
+                     --icon-size={header.type.params?.size} 
+                      name={header.type.params?.name || ''}
+                    />
+                {:else} 
                   {item[header.value]}
                 {/if}
               </td>
@@ -104,10 +112,7 @@ function handleHeaderClick(header) {
 
 <style>
   .simple-table-container {
-    width: var(
-      --simple-table-width,
-      var(--simple-table-default-width)
-    );
+    width: var(--simple-table-width, var(--simple-table-default-width));
     min-width: var(
       --simple-table-min-width,
       var(--simple-table-default-min-width)
@@ -116,10 +121,7 @@ function handleHeaderClick(header) {
       --simple-table-max-width,
       var(--simple-table-default-max-width)
     );
-    height: var(
-      --simple-table-height,
-      var(--simple-table-default-height)
-    );
+    height: var(--simple-table-height, var(--simple-table-default-height));
     min-height: var(
       --simple-table-min-height,
       var(--simple-table-default-min-height)
@@ -158,7 +160,7 @@ function handleHeaderClick(header) {
 
   .thead th.sortable {
     cursor: pointer;
-    transition: all .1s ease-in;
+    transition: all 0.1s ease-in;
     user-select: none;
   }
 
@@ -221,7 +223,7 @@ function handleHeaderClick(header) {
       --simple-table-row-height,
       var(--simple-table-default-row-height)
     );
-    transition: background-color .1s ease-in-out;
+    transition: background-color 0.1s ease-in-out;
   }
 
   .item-tr:hover {

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

@@ -1,8 +1,9 @@
 import { SvelteComponentTyped } from "svelte";
+export type HeaderType = ColumnBoolean | ColumnString | ColumnNumber | ColumnDate | ColumnIcon | ColumnCheckBox | ColumnCostom;
 export type Header = {
     value: string;
     label: string;
-    type: "boolean" | "string" | "number" | "date" | "custom";
+    type: HeaderType;
     width?: string;
     minWidth?: string;
     sortable?: boolean;
@@ -12,6 +13,7 @@ export type Header = {
 };
 import '../../../css/main.css';
 import './SimpleTable.css';
+import type { ColumnBoolean, ColumnCheckBox, ColumnCostom, ColumnDate, ColumnIcon, ColumnNumber, ColumnString } from './columnTypes';
 declare const __propDef: {
     props: {
         class?: {

package/dist/components/simple/lists/columnTypes.d.ts

@@ -0,0 +1,35 @@
+export type ColumnDate = {
+    key: "date";
+    params: {
+        format: string;
+        locale: string;
+    };
+};
+export type ColumnIcon = {
+    key: "icon";
+    params: {
+        name: string;
+        color: string;
+        size: string;
+    };
+};
+export type ColumnBoolean = {
+    key: "boolean";
+    params?: {};
+};
+export type ColumnString = {
+    key: "string";
+    params?: {};
+};
+export type ColumnNumber = {
+    key: "number";
+    params?: {};
+};
+export type ColumnCostom = {
+    key: "custom";
+    params?: {};
+};
+export type ColumnCheckBox = {
+    key: "checkbox";
+    params?: {};
+};

package/dist/components/simple/lists/columnTypes.js

@@ -0,0 +1 @@
+export {};

package/dist/index.d.ts

@@ -46,6 +46,7 @@ export { default as ProgressBar } from './components/simple/progress/ProgressBar
 export { default as ProductCard } from './components/composed/shop/ProductCard.svelte';
 export { default as ProductsGrid } from './components/composed/shop/ProductsGrid.svelte';
 export { default as PaginatedTable } from './components/composed/list/PaginatedTable.svelte';
+export { default as Filters } from './components/composed/search/Filters.svelte';
 export { default as mediaQuery } from './stores/mediaQuery';
 export { default as theme, toggleTheme, setTheme } from './stores/theme';
 export { default as SimpleTimeLine } from './components/simple/timeline/SimpleTimeLine.svelte';

package/dist/index.js

@@ -46,6 +46,7 @@ export { default as ProgressBar } from './components/simple/progress/ProgressBar
 export { default as ProductCard } from './components/composed/shop/ProductCard.svelte';
 export { default as ProductsGrid } from './components/composed/shop/ProductsGrid.svelte';
 export { default as PaginatedTable } from './components/composed/list/PaginatedTable.svelte';
+export { default as Filters } from './components/composed/search/Filters.svelte';
 export { default as mediaQuery } from './stores/mediaQuery';
 export { default as theme, toggleTheme, setTheme } from './stores/theme';
 export { default as SimpleTimeLine } from './components/simple/timeline/SimpleTimeLine.svelte';

package/dist/utils/filters/builder.d.ts

@@ -0,0 +1,43 @@
+import type { JoinModifier } from "./modifiers/join";
+import type { WhereModifier } from "./modifiers/where";
+export type Modifier = WhereModifier | JoinModifier;
+export type JsonQuery = {
+    modifiers: Modifier[];
+};
+export default class Builder {
+    private modifiers;
+    constructor();
+    where(callback: (builder: Builder) => void): Builder;
+    where(key: Record<string, string | number | Date>): Builder;
+    where(key: string, value: string | number | Date): Builder;
+    where(key: string, operator: string, value: string | number | Date): Builder;
+    whereNot(callback: (builder: Builder) => void): Builder;
+    whereNot(key: Record<string, string | number | Date>): Builder;
+    whereNot(key: string, value: string | number | Date): Builder;
+    whereNot(key: string, operator: string, value: string | number | Date): Builder;
+    orWhere(callback: (builder: Builder) => void): Builder;
+    orWhere(key: Record<string, string | number | Date>): Builder;
+    orWhere(key: string, value: string | number | Date): Builder;
+    orWhere(key: string, operator: string, value: string | number | Date): Builder;
+    orWhereNot(callback: (builder: Builder) => void): Builder;
+    orWhereNot(key: Record<string, string | number | Date>): Builder;
+    orWhereNot(key: string, value: string | number | Date): Builder;
+    orWhereNot(key: string, operator: string, value: string | number | Date): Builder;
+    private applyWhereClause;
+    join(table: string, onCallback: (onBuilder: OnClauseBuilder) => void): this;
+    leftJoin(table: string, onCallback: (onBuilder: OnClauseBuilder) => void): this;
+    rightJoin(table: string, onCallback: (onBuilder: OnClauseBuilder) => void): this;
+    private applyJoinClause;
+    toJson(): JsonQuery;
+}
+import type { JoinModifierOnClause } from "./modifiers/join";
+declare class OnClauseBuilder {
+    private onClauses;
+    constructor();
+    get json(): JoinModifierOnClause[];
+    on(from: string, to: string): void;
+    on(from: string, operator: string, to: string): void;
+    orOn(from: string, to: string): void;
+    orOn(from: string, operator: string, to: string): void;
+}
+export {};

package/dist/utils/filters/builder.js

@@ -0,0 +1,137 @@
+export default class Builder {
+    modifiers = [];
+    constructor() {
+        this.modifiers = [];
+    }
+    where(first, second, third) {
+        return this.applyWhereClause('and', first, second, third);
+    }
+    whereNot(first, second, third) {
+        return this.applyWhereClause('and', first, second, third);
+    }
+    orWhere(first, second, third) {
+        return this.applyWhereClause('or', first, second, third);
+    }
+    orWhereNot(first, second, third) {
+        return this.applyWhereClause('orNot', first, second, third);
+    }
+    applyWhereClause(logicalOperator, first, second, third) {
+        if (!!third) {
+            if (!!second && typeof first == 'string' && typeof second == 'string') {
+                this.modifiers.push({
+                    method: 'where',
+                    kind: 'simple',
+                    key: first,
+                    operator: second,
+                    value: third,
+                    logicalOperator: logicalOperator
+                });
+            }
+            else if (typeof first == 'object') {
+                this.modifiers.push({
+                    method: 'where',
+                    kind: 'object',
+                    values: first,
+                    logicalOperator
+                });
+            }
+        }
+        else if (typeof first == 'string' && !!second) {
+            this.modifiers.push({
+                method: 'where',
+                kind: 'simple',
+                key: first,
+                value: second,
+                logicalOperator
+            });
+        }
+        else if (typeof first == 'function') {
+            let builder = new Builder();
+            first(builder);
+            if (!builder.modifiers.every(el => el.method == 'where'))
+                throw new Error('inconsistent json query from where callback');
+            this.modifiers.push({
+                method: 'where',
+                kind: 'grouped',
+                logicalOperator,
+                children: builder.modifiers.filter((el) => el.method == 'where')
+            });
+        }
+        return this;
+    }
+    join(table, onCallback) {
+        let onBuilder = new OnClauseBuilder();
+        onCallback(onBuilder);
+        this.applyJoinClause('inner', table, onBuilder.json);
+        return this;
+    }
+    leftJoin(table, onCallback) {
+        let onBuilder = new OnClauseBuilder();
+        onCallback(onBuilder);
+        this.applyJoinClause('left', table, onBuilder.json);
+        return this;
+    }
+    rightJoin(table, onCallback) {
+        let onBuilder = new OnClauseBuilder();
+        onCallback(onBuilder);
+        this.applyJoinClause('right', table, onBuilder.json);
+        return this;
+    }
+    applyJoinClause(kind, table, on) {
+        this.modifiers.push({
+            method: 'join',
+            kind: kind,
+            on: on,
+            table: table
+        });
+        return this;
+    }
+    toJson() {
+        return {
+            modifiers: this.modifiers
+        };
+    }
+}
+class OnClauseBuilder {
+    onClauses;
+    constructor() {
+        this.onClauses = [];
+    }
+    get json() {
+        return this.onClauses;
+    }
+    on(first, second, third) {
+        if (!third) {
+            this.onClauses.push({
+                from: first,
+                operator: '=',
+                to: second
+            });
+        }
+        else {
+            this.onClauses.push({
+                from: first,
+                operator: second,
+                to: third
+            });
+        }
+    }
+    orOn(first, second, third) {
+        if (!third) {
+            this.onClauses.push({
+                from: first,
+                operator: '=',
+                to: second,
+                logicalOperator: 'or'
+            });
+        }
+        else {
+            this.onClauses.push({
+                from: first,
+                operator: second,
+                to: third,
+                logicalOperator: 'or'
+            });
+        }
+    }
+}

package/dist/utils/filters/filters.d.ts

@@ -0,0 +1,26 @@
+import Builder from "./builder";
+type MultiStringFilter = {
+    type: 'multiString';
+    columns: string[];
+    operator?: 'or' | 'and';
+};
+type StringFilter = {
+    type: 'string';
+    column: string;
+    value: string | undefined;
+    mode?: 'equal' | 'like' | 'ilike';
+};
+export type Filter = {
+    name: string;
+    active: boolean;
+    hidden?: boolean;
+    label: string;
+} & (StringFilter | MultiStringFilter);
+export default class Converter {
+    constructor();
+    createBuilder(params: {
+        filters: Filter[];
+    }): Builder;
+    private applyStringFilter;
+}
+export {};

package/dist/utils/filters/filters.js

@@ -0,0 +1,29 @@
+import Builder from "./builder";
+export default class Converter {
+    constructor() {
+    }
+    createBuilder(params) {
+        let builder = new Builder();
+        for (let i = 0; i < params.filters.length; i += 1) {
+            const filter = params.filters[i];
+            if (filter.type == 'string') {
+                this.applyStringFilter({ builder, filter });
+            }
+        }
+        return builder;
+    }
+    applyStringFilter(params) {
+        if (params.filter.value === undefined)
+            return params.builder;
+        if (params.filter.mode == 'like') {
+            params.builder.where(params.filter.column, 'like', params.filter.value);
+        }
+        else if (params.filter.mode == 'ilike') {
+            params.builder.where(params.filter.column, 'ilike', params.filter.value);
+        }
+        else {
+            params.builder.where(params.filter.column, '=', params.filter.value);
+        }
+        return params.builder;
+    }
+}

package/dist/utils/filters/modifiers/join.d.ts

@@ -0,0 +1,26 @@
+export type JoinModifierOnClause = {
+    from: string;
+    operator: string;
+    to: string;
+    logicalOperator?: 'and' | 'or';
+};
+type RightJoinModifier = {
+    method: 'join';
+    kind: 'right';
+    table: string;
+    on: JoinModifierOnClause[];
+};
+type InnerJoinModifier = {
+    method: 'join';
+    kind: 'inner';
+    table: string;
+    on: JoinModifierOnClause[];
+};
+type LeftJoinJsonModifier = {
+    method: 'join';
+    kind: 'left';
+    table: string;
+    on: JoinModifierOnClause[];
+};
+export type JoinModifier = LeftJoinJsonModifier | InnerJoinModifier | RightJoinModifier;
+export {};

package/dist/utils/filters/modifiers/join.js

@@ -0,0 +1 @@
+export {};

package/dist/utils/filters/modifiers/where.d.ts

@@ -0,0 +1,29 @@
+type GroupedWhere = {
+    method: 'where';
+    kind: 'grouped';
+    logicalOperator?: 'and' | 'or' | 'andNot' | 'orNot';
+    children: (ObjectWhere | SimpleWhere | GroupedWhere | InWhere)[];
+};
+type ObjectWhere = {
+    method: 'where';
+    kind: 'object';
+    logicalOperator?: 'and' | 'or' | 'andNot' | 'orNot';
+    values: Record<string, string | number | Date>;
+};
+type SimpleWhere = {
+    method: 'where';
+    kind: 'simple';
+    logicalOperator?: 'and' | 'or' | 'andNot' | 'orNot';
+    key: string;
+    operator?: string;
+    value: string | number | Date;
+};
+type InWhere = {
+    method: 'where';
+    kind: 'in';
+    logicalOperator?: 'and' | 'or' | 'andNot' | 'orNot';
+    key: string;
+    value: (string | number | Date)[];
+};
+export type WhereModifier = SimpleWhere | ObjectWhere | GroupedWhere | InWhere;
+export {};

package/dist/utils/filters/modifiers/where.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@likable-hair/svelte",
   "description": "A Svelte component for likablehair",
-  "version": "3.0.19",
+  "version": "3.0.20",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build && npm run package",