@likable-hair/svelte 3.0.18 → 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/composed/search/GlobalSearchTextField.css

@@ -1,7 +1,7 @@
 :root {
-  --global-search-text-field-default-ring-color: rgb(var(--global-color-contrast-100)); /* rgba(24, 24, 27, .1) */
-  --global-search-text-field-default-hover-ring-color: rgb(var(--global-color-contrast-300)); /* rgba(24, 24, 27, .2) */
-  --global-search-text-field-default-color: rgb(var(--global-color-contrast-600)); /* rgb(113 113 122) */
+  --global-search-text-field-default-ring-color: rgb(var(--global-color-contrast-200), .5); 
+  --global-search-text-field-default-hover-ring-color: rgb(var(--global-color-contrast-300));
+  --global-search-text-field-default-color: rgb(var(--global-color-contrast-600));
   --global-search-text-field-default-width: 100%;
   --global-search-text-field-default-max-width: 28rem;
   --global-search-text-field-default-height: 2rem;

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

@@ -168,7 +168,7 @@ async function search() {
       --global-search-text-field-padding,
       var(--global-search-text-field-default-padding)
     );
-    border: 0 solid #e5e7eb;
+    border: 0 solid white;
     cursor: pointer;
     transition-property: box-shadow;
     transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);

package/dist/components/layouts/StableDividedSideBarLayout.css

@@ -2,11 +2,11 @@
   --stable-divided-side-bar-layout-default-content-padding: 1rem 2rem 1rem 2rem;
   --stable-divided-side-bar-layout-default-side-bar-width: 18rem;
   --stable-divided-side-bar-layout-default-side-bar-border-color: 
-    rgb(var(--global-color-grey-500));
+    rgb(var(--global-color-grey-500), .3);
   --stable-divided-side-bar-layout-default-side-bar-padding: 1rem 1.5rem 2rem 1.5rem;
   --stable-divided-side-bar-layout-default-header-menu-height: 3.5rem;
   --stable-divided-side-bar-layout-default-header-menu-border-color:
-    rgb(var(--global-color-grey-500));
+    rgb(var(--global-color-grey-500), .3);
   --stable-divided-side-bar-layout-default-header-menu-padding: 0rem 2rem 0rem 2rem;
   --stable-divided-side-bar-layout-default-inner-header-menu-background-color:
     rgb(var(--global-color-background-100), .5);