@likable-hair/svelte 3.0.19 → 3.0.21

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

@@ -2,7 +2,7 @@
 import Drawer from "../../simple/navigation/Drawer.svelte";
 import Menu from "../../simple/common/Menu.svelte";
 import MediaQuery from "../../simple/common/MediaQuery.svelte";
-export let open = false, activator, drawerPosition = "bottom", menuAnchor = "bottom-center", _boxShadow = "rgb(var(--global-color-grey-900), .5) 0px 2px 4px", _height = "fit-content", _maxHeight = void 0, _minWidth = "100px", _bordeRadius = "5px";
+export let open = false, activator, drawerPosition = "bottom", menuAnchor = "bottom-center", _boxShadow = "rgb(var(--global-color-grey-900), .5) 0px 2px 4px", _height = "fit-content", _maxHeight = void 0, _minWidth = "100px", _borderRadius = "5px";
 </script>
 
 <MediaQuery let:mAndDown>
@@ -10,6 +10,7 @@ export let open = false, activator, drawerPosition = "bottom", menuAnchor = "bot
     <Drawer
       bind:open={open}
       bind:position={drawerPosition}
+      on:close
       on:item-click
     >
       <slot isDrawer={true} isMenu={false}></slot>
@@ -23,7 +24,7 @@ export let open = false, activator, drawerPosition = "bottom", menuAnchor = "bot
       _height={_height}
       _maxHeight={_maxHeight}
       _minWidth={_minWidth}
-      _borderRadius={_bordeRadius}
+      _borderRadius={_borderRadius}
       anchor={menuAnchor}
     >
       <slot isDrawer={false} isMenu={true}></slot>

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

@@ -13,9 +13,10 @@ declare const __propDef: {
         _height?: string | undefined;
         _maxHeight?: string | undefined;
         _minWidth?: string | undefined;
-        _bordeRadius?: string | undefined;
+        _borderRadius?: string | undefined;
     };
     events: {
+        close: CustomEvent<{}>;
         'item-click': CustomEvent<{
             item: import("../../simple/navigation/Navigator.svelte").Item;
         }>;

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

@@ -3,7 +3,7 @@
 <script>import "../../../css/main.css";
 import MenuOrDrawer from "./MenuOrDrawer.svelte";
 import SelectableVerticalList from "../../simple/lists/SelectableVerticalList.svelte";
-export let open = false, activator, drawerPosition = "bottom", menuAnchor = "bottom-center", elements = [], _boxShadow = "rgb(var(--global-color-grey-900), .5) 0px 2px 4px", _height = "fit-content", _maxHeight = void 0, _minWidth = "100px", _bordeRadius = "5px";
+export let open = false, activator, drawerPosition = "bottom", menuAnchor = "bottom-center", elements = [], _boxShadow = "rgb(var(--global-color-grey-900), .5) 0px 2px 4px", _height = "fit-content", _maxHeight = void 0, _minWidth = "100px", _borderRadius = "5px";
 let selected;
 let focused;
 $:
@@ -23,7 +23,7 @@ $:
   {_height}
   {_maxHeight}
   {_minWidth}
-  {_bordeRadius}
+  {_borderRadius}
   let:isDrawer
   --drawer-default-space={`${Math.min(elements?.length || 0, 5) * 56}px`}
 >

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

@@ -16,7 +16,7 @@ declare const __propDef: {
         _height?: string | undefined;
         _maxHeight?: string | undefined;
         _minWidth?: string | undefined;
-        _bordeRadius?: string | undefined;
+        _borderRadius?: string | undefined;
     };
     events: {
         select: CustomEvent<{

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, lang = "en", searchText = void 0, maxVisibleChips = void 0, placeholder = lang == "en" ? "Select" : "Seleziona", clearable = true, mandatory = true, icon = void 0, menuOpened = false, openingId = void 0;
 $:
   generatedLabel = values.length == 1 ? values[0].label : `${values.length} Selezionati`;
 function handleCloseClick(event) {
@@ -19,11 +19,17 @@ function handleCloseClick(event) {
   bind:searchText
   bind:multiple
   bind:maxVisibleChips
+  bind:mandatory
   searchFunction={() => true}
+  on:change
+  bind:menuOpened
+  bind:openingId
 >
   <svelte:fragment slot="selection-container" let:openMenu let:handleKeyDown>
-    <Button 
+    <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 +54,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 +75,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 +85,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

@@ -6,12 +6,19 @@ declare const __propDef: {
         items?: Item[] | undefined;
         values?: Item[] | undefined;
         multiple?: boolean | undefined;
+        lang?: "it" | "en" | undefined;
         searchText?: string | undefined;
         maxVisibleChips?: number | undefined;
         placeholder?: string | undefined;
+        clearable?: boolean | undefined;
+        mandatory?: boolean | undefined;
         icon?: string | undefined;
+        menuOpened?: boolean | undefined;
+        openingId?: string | undefined;
     };
     events: {
+        change: CustomEvent<any>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {

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

@@ -1,152 +1,202 @@
-<!-- <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()
+<script>import Filters from "../search/Filters.svelte";
+import SearchBar from "../search/SearchBar.svelte";
+import Converter from "../../../utils/filters/filters";
+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, filters = [], searchBarColumns = void 0;
+let searchBarInput, searchText = void 0;
+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
+  });
+}
+function handleSearchChange(searchText2) {
+  let converter = new Converter();
+  let builder;
+  builder = converter.createBuilder({
+    filters: filters || []
+  });
+  if (!!searchText2 && !!searchBarColumns && searchBarColumns.length > 0) {
+    builder.where((b) => {
+      b.where(searchBarColumns[0], "like", searchText2);
+      for (let i = 1; i < searchBarColumns.length; i += 1) {
+        b.orWhere(searchBarColumns[i], "like", searchText2);
+      }
+    });
   }
-
-  $: perPageOptionsFormatted = perPageOptions.map((el) => {
-    return {
-      value: el,
-      text: el.toString()
-    }
-  })
-  $: if(reload) {
-    loadRows().then(() => {
-      reload = false
-    })
-  }
-
-  $: filters && loadRows()
-
+  dispatch("filtersChange", {
+    builder
+  });
+}
+$:
+  handleSearchChange(searchText);
+function handleFiltersChange() {
+  handleSearchChange(searchText);
+}
 </script>
 
-<div class="top-actions">
+<div class="paginated-table">
 
+  <SearchBar
+    placeholder="Type something to search..."
+    bind:input={searchBarInput}
+    bind:value={searchText}
+  >
+  </SearchBar>
+  <div class="filter-container">
+    <Filters
+      bind:filters
+      on:applyFilter={handleFiltersChange}
+      on:removeFilter={handleFiltersChange}
+    >
+  </Filters>
 </div>
-<div class="table">
-  <StandardTable
-    headers={headers}
-    width={width}
-    items={items}
+  <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;
+  }
+
+  .header-sort-icon {
+    display: none;
+  }
+
+  .header-sort-icon.active {
+    display: inline;
   }
 
-  .loading-text {
-    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%;
   }
 
-  .no-data {
-    height: 200px;
-    max-height: 100vh;
+  .filter-container {
+    margin-top: 10px;
     display: flex;
-    justify-content: center;
-    align-items: center;
-    color: var(--global-light-contrast-color);
-    font-size: .9rem;
+    align-items: left;
+    flex-direction: row;
+    gap: 10px;
   }
-</style> -->
+
+
+</style>

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

@@ -1,10 +1,79 @@
 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']>>;
+import Filters from "../search/Filters.svelte";
 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;
+        filters?: ComponentProps<Filters>['filters'];
+        searchBarColumns?: string[] | 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))"