@likable-hair/svelte 3.1.4 → 3.1.6

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

@@ -65,6 +65,10 @@ onMount(() => {
     mask.value = DateTime.fromJSDate(selectedDate).toFormat(pattern);
   }
 });
+$:
+  if (!selectedDate) {
+    mask.value = "";
+  }
 function handleInputChange(event) {
   setTimeout(() => {
     const typedValue = mask.value;
@@ -126,8 +130,9 @@ $:
   <div
     bind:this={activator}
     class="date-picker-activator {clazz.activator || ''}"
+    style:width="var(--simple-textfield-width)"
   >
-    <slot 
+    <slot
       name="activator"
       {mask}
       {handleTextFieldFocus}
@@ -158,11 +163,11 @@ $:
           </slot>
         </svelte:fragment>
         <svelte:fragment slot="prepend" let:prependIcon let:iconSize>
-          <slot name="append-inner" {prependIcon} {iconSize}>
+          <slot name="prepend" {prependIcon} {iconSize}>
           </slot>
         </svelte:fragment>
         <svelte:fragment slot="append" let:appendIcon let:iconSize>
-          <slot name="append-inner" {appendIcon} {iconSize}>
+          <slot name="append" {appendIcon} {iconSize}>
           </slot>
         </svelte:fragment>
       </SimpleTextField>

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

@@ -46,6 +46,14 @@ declare const __propDef: {
             iconSize: string;
         };
         'append-inner': {
+            appendInnerIcon: string | undefined;
+            iconSize: string;
+        };
+        prepend: {
+            prependIcon: string | undefined;
+            iconSize: string;
+        };
+        append: {
             appendIcon: string | undefined;
             iconSize: string;
         };

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

@@ -6,7 +6,7 @@ import Button from "../../simple/buttons/Button.svelte";
 import Icon from "../../simple/media/Icon.svelte";
 import { createEventDispatcher } from "svelte";
 let dispatch = createEventDispatcher();
-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, width = 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, width = void 0, mobileDrawer = false;
 $:
   generatedLabel = values.length == 1 ? values[0].label : `${values.length} Selezionati`;
 function handleCloseClick(event) {
@@ -34,6 +34,7 @@ function handleCloseClick(event) {
   bind:menuOpened
   bind:openingId
   bind:width
+  {mobileDrawer}
 >
   <svelte:fragment slot="selection-container" let:openMenu let:handleKeyDown>
     <Button
@@ -51,14 +52,14 @@ function handleCloseClick(event) {
         }
       }}
     >
-      <slot 
-        name="label" 
-        {values} 
-        {items} 
-        {searchText} 
-        {generatedLabel} 
-        {placeholder} 
-        {clearable} 
+      <slot
+        name="label"
+        {values}
+        {items}
+        {searchText}
+        {generatedLabel}
+        {placeholder}
+        {clearable}
         {handleCloseClick}
       >
         <div class="label">

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

@@ -16,6 +16,7 @@ declare const __propDef: {
         menuOpened?: boolean | undefined;
         openingId?: string | undefined;
         width?: string | undefined;
+        mobileDrawer?: boolean | undefined;
     };
     events: {
         change: CustomEvent<any>;

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

@@ -0,0 +1,90 @@
+<script context="module"></script>
+
+<script>import "../../../css/main.css";
+export let values = [], items, multiple = true, disabled = false;
+let dispatch = createEventDispatcher();
+function select(item) {
+  const alreadyPresent = values.findIndex((i) => i.value === item.value) != -1;
+  if (!alreadyPresent) {
+    if (multiple)
+      values = [...values, item];
+    else
+      values = [item];
+    dispatch("change", {
+      unselect: void 0,
+      select: item,
+      selection: values
+    });
+  }
+}
+function unselect(item) {
+  values = values.filter((i) => i.value != item.value);
+  dispatch("change", {
+    unselect: item,
+    select: void 0,
+    selection: values
+  });
+}
+function toggle(item) {
+  const alreadyPresent = values.findIndex((i) => i.value === item.value) != -1;
+  if (alreadyPresent)
+    unselect(item);
+  else
+    select(item);
+}
+import Chip from "../../simple/navigation/Chip.svelte";
+import { createEventDispatcher } from "svelte";
+</script>
+
+<svelte:window />
+
+<div
+  class="toggle-container"
+  class:disabled
+>
+    <div
+      class="selection-container"
+    >
+      {#each (items || []) as item}
+        <div class="chip">
+          <Chip
+            outlined={values.findIndex(i => i.value === item.value) === -1}
+            on:click={() => toggle(item)}
+            buttonTabIndex={0}
+            truncateText
+            --button-focus-color="red"
+          >
+            {item.label}
+          </Chip>
+        </div>
+      {/each}
+    </div>
+</div>
+
+
+<style>
+  .selection-container {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 5px;
+    transition: all .1s;
+  }
+
+  .toggle-container {
+    opacity: 100%;
+    width: var(--toggle-list-width, auto);
+    max-width: var(--toggle-list-max-width, auto);
+    height: var(--toggle-list-heigth, auto);
+  }
+
+  .toggle-container.disabled {
+    opacity: 50%;
+  }
+
+  .chip {
+    --chip-default-outlined-color: var(--toggle-list-unselected-color, var(--chip-default-background-color));
+  }
+
+
+</style>

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

@@ -0,0 +1,25 @@
+import { SvelteComponent } from "svelte";
+export type Item = {
+    value: string | number;
+    label?: string | number;
+    data?: any;
+};
+import '../../../css/main.css';
+declare const __propDef: {
+    props: {
+        values?: Item[] | undefined;
+        items: Item[];
+        multiple?: boolean | undefined;
+        disabled?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ToggleListProps = typeof __propDef.props;
+export type ToggleListEvents = typeof __propDef.events;
+export type ToggleListSlots = typeof __propDef.slots;
+export default class ToggleList extends SvelteComponent<ToggleListProps, ToggleListEvents, ToggleListSlots> {
+}
+export {};

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

@@ -1,6 +1,6 @@
 <script context="module">import SimpleTable from "../../simple/lists/SimpleTable.svelte";
 import Icon from "../../simple/media/Icon.svelte";
-import Paginator from "./Paginator.svelte";
+import Paginator from "../../simple/lists/Paginator.svelte";
 import Dropdown from "../forms/Dropdown.svelte";
 import { createEventDispatcher } from "svelte";
 </script>
@@ -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, searchBarVisible = true, searchBarPlaceholder = "Type something to search...", customFiltersValid = {}, customFiltersValues = void 0, lang = "en";
+], hideRowsPerPage = false, totalElements = void 0, rowsPerPage = 20, filters = [], searchBarColumns = void 0, searchBarVisible = true, searchBarPlaceholder = "Type something to search...", lang = "en", editFilterMode = "one-edit";
 let searchBarInput, searchText = void 0;
 let dispatch = createEventDispatcher();
 let rowsPerPageSelection = [];
@@ -39,14 +39,13 @@ function handleSearchChange(searchText2) {
   let converter = new Converter();
   let builder;
   builder = converter.createBuilder({
-    filters: filters || [],
-    customFiltersValues
+    filters: filters || []
   });
   if (!!searchText2 && !!searchBarColumns && searchBarColumns.length > 0) {
     builder.where((b) => {
-      b.where(searchBarColumns[0], "like", searchText2);
+      b.where(searchBarColumns[0], "ilike", "%" + searchText2 + "%");
       for (let i = 1; i < searchBarColumns.length; i += 1) {
-        b.orWhere(searchBarColumns[i], "like", searchText2);
+        b.orWhere(searchBarColumns[i], "ilike", "%" + searchText2 + "%");
       }
     });
   }
@@ -64,12 +63,14 @@ function handleFiltersChange() {
 <div class="paginated-table">
   {#if searchBarVisible}
     <slot name="search-bar" {handleSearchChange}>
-      <SearchBar
-        placeholder={searchBarPlaceholder}
-        bind:input={searchBarInput}
-        bind:value={searchText}
-      >
-      </SearchBar>
+      <div class="search-bar-container">
+        <SearchBar
+          placeholder={searchBarPlaceholder}
+          bind:input={searchBarInput}
+          bind:value={searchText}
+        >
+        </SearchBar>
+      </div>
     </slot>
   {/if}
   <div class="filter-container">
@@ -79,16 +80,16 @@ function handleFiltersChange() {
       on:removeFilter={handleFiltersChange}
       --filters-default-wrapper-width="100%"
       {lang}
-      {customFiltersValid}
+      {editFilterMode}
     >
       <svelte:fragment slot="append">
         <slot name="filter-append"></slot>
       </svelte:fragment>
-      <svelte:fragment slot="custom" let:filter>
-        <slot name="custom-filter" {filter}></slot>
+      <svelte:fragment slot="custom-chip" let:filter>
+        <slot name="custom-filter-chip" {filter}></slot>
       </svelte:fragment>
-      <svelte:fragment slot="custom-mobile" let:filter>
-        <slot name="custom-filter-mobile" {filter}></slot>
+      <svelte:fragment slot="custom" let:filter let:updateFunction let:mAndDown>
+        <slot name="custom-filter" {filter} {updateFunction} {mAndDown}></slot>
       </svelte:fragment>
     </Filters>
   </div>
@@ -210,7 +211,7 @@ function handleFiltersChange() {
   }
 
   .filter-container {
-    margin-top: 10px;
+    margin-top: var(--paginated-table-filter-container-margin-top, 10px);
     display: flex;
     align-items: center;
     flex-direction: row;
@@ -218,6 +219,13 @@ function handleFiltersChange() {
     width: 100%;
   }
 
+  .search-bar-container {
+    padding: var(
+      --paginated-table-search-bar-container-padding,
+      var(--paginated-table-search-bar-container-default-padding, 0)
+    );
+  }
+
   @media only screen and (max-width: 768px) {
     .per-page-dropdown {
       display: none;

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

@@ -1,6 +1,6 @@
 import { SvelteComponent } from "svelte";
 import SimpleTable from "../../simple/lists/SimpleTable.svelte";
-import Paginator from "./Paginator.svelte";
+import Paginator from "../../simple/lists/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;
@@ -25,13 +25,8 @@ declare const __propDef: {
         searchBarColumns?: string[] | undefined;
         searchBarVisible?: boolean | undefined;
         searchBarPlaceholder?: string | undefined;
-        customFiltersValid?: {
-            [filterName: string]: boolean;
-        } | undefined;
-        customFiltersValues?: {
-            [filterName: string]: any;
-        } | undefined;
         lang?: "it" | "en" | undefined;
+        editFilterMode?: "one-edit" | "multi-edit" | undefined;
     };
     events: {
         sort: CustomEvent<{
@@ -51,11 +46,13 @@ declare const __propDef: {
             handleSearchChange: (searchText: string | undefined) => void;
         };
         'filter-append': {};
-        'custom-filter': {
-            filter: import("../../../utils/filters/filters").Filter | undefined;
+        'custom-filter-chip': {
+            filter: import("../../../utils/filters/filters").Filter;
         };
-        'custom-filter-mobile': {
-            filter: import("../../../utils/filters/filters").Filter | undefined;
+        'custom-filter': {
+            filter: import("../../../utils/filters/filters").Filter;
+            updateFunction: (filterName: string, newValue: any, newValid: boolean) => void;
+            mAndDown: boolean;
         };
         header: {
             head: import("../../simple/lists/SimpleTable.svelte").Header;

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

@@ -2,13 +2,12 @@
 import { GenericModes, SelectModes, StringModes } from "../../../utils/filters/filters";
 import SimpleTextField from "../../simple/forms/SimpleTextField.svelte";
 import DatePickerTextField from "../forms/DatePickerTextField.svelte";
-import Button from "../../simple/buttons/Button.svelte";
-import { createEventDispatcher } from "svelte";
 import Validator from "../../../utils/filters/validator";
 import Autocomplete from "../../simple/forms/Autocomplete.svelte";
 import Checkbox from "../../simple/forms/Checkbox.svelte";
-export let filter = void 0, lang = "en", cancelFilterLabel = lang == "en" ? "Cancel" : "Annulla", applyFilterLabel = lang == "en" ? "Apply filter" : "Applica filter", betweenFromLabel = lang == "en" ? "From" : "Da", betweenToLabel = lang == "en" ? "To" : "A", labelsMapper, forceApplyValid = false;
-let tmpFilter;
+import Icon from "../../simple/media/Icon.svelte";
+import ToggleList from "../forms/ToggleList.svelte";
+export let filter = void 0, lang = "en", betweenFromLabel = lang == "en" ? "From" : "Da", betweenToLabel = lang == "en" ? "To" : "A", labelsMapper, forceApplyValid = false, editFilterMode = "one-edit", tmpFilter = void 0, mobile = false;
 let advancedModeOptions, advancedModeSelectedOptions;
 function initTmpFilter() {
   tmpFilter = filter === void 0 ? void 0 : { ...filter };
@@ -30,17 +29,6 @@ $:
     initTmpFilter();
     closeDropDown();
   }
-let dispatch = createEventDispatcher();
-function handleCancelFilterClick(e) {
-  dispatch("cancel");
-}
-function handleApplyFilterClick() {
-  if (!!filter && !!tmpFilter) {
-    filter = { ...tmpFilter };
-    filter.active = true;
-    dispatch("apply");
-  }
-}
 $:
   if (!!tmpFilter) {
     let modes;
@@ -90,35 +78,42 @@ $:
       tmpFilter.value = false;
     }
   }
+$:
+  if (!!tmpFilter && tmpFilter.type == "select") {
+    if (tmpFilter.values === void 0) {
+      tmpFilter.values = [];
+    }
+  }
 </script>
 
 
 {#if !!filter && !!tmpFilter}
-  <div class="filter-editor">
+  <div class="filter-editor" style:margin={editFilterMode === 'one-edit' ? '5%' : '0'}>
     {#if filter.advanced}
       <div class="advanced-mode">
         <div class="label">
           {filter.label[0].toUpperCase() + filter.label.slice(1)}
         </div>
-        <div class="advaced-mode-selector" on:click|stopPropagation on:keypress>
+        <div class="advaced-mode-selector" on:click|stopPropagation on:keypress role="presentation" tabindex="-1">
           <Dropdown
             items={advancedModeOptions}
             bind:values={advancedModeSelectedOptions}
             on:change={handleAdvancedModeSelection}
             bind:menuOpened={dropdownOpened}
             openingId="advanced-filter"
+            mobileDrawer={mobile}
           ></Dropdown>
         </div>
       </div>
     {/if}
 
-    <div class="fields" style:width="100%" on:click|stopPropagation on:keypress>
+    <div class="fields" style:width="100%" on:click|stopPropagation on:keypress role="presentation" tabindex="-1">
       {#if !tmpFilter.advanced || (!!advancedModeSelectedOptions && advancedModeSelectedOptions.length > 0)}
         {#if tmpFilter.type === "string" }
           <SimpleTextField
             bind:value={tmpFilter.value}
             type="text"
-            placeholder={tmpFilter?.label}
+            placeholder={editFilterMode == 'one-edit' ? tmpFilter?.label : undefined}
             --simple-textfield-width="100%"
           ></SimpleTextField>
         {:else if tmpFilter.type === "date" && tmpFilter.mode !== 'between'}
@@ -129,18 +124,30 @@ $:
               bind:menuOpened={calendarOpened}
               on:day-click={() => {calendarOpened = false}}
               --simple-textfield-width="100%"
-            ></DatePickerTextField>
+            >
+              <svelte:fragment slot="append-inner">
+                <Icon
+                  name="mdi-close-circle"
+                  click
+                  on:click={() => {
+                    if(!!tmpFilter && tmpFilter.type === 'date' && tmpFilter.mode !== 'between') {
+                      tmpFilter.value = undefined
+                    }
+                  }}
+                ></Icon>
+              </svelte:fragment>
+            </DatePickerTextField>
           </div>
         {:else if tmpFilter.type === "number" && tmpFilter.mode !== 'between'}
           <div>
             <SimpleTextField
               bind:value={tmpFilter.value}
               type="number"
-              placeholder={tmpFilter?.label}
+              placeholder={editFilterMode == 'one-edit' ? tmpFilter?.label : undefined}
               --simple-textfield-width="100%"
             ></SimpleTextField>
           </div>
-        {:else if tmpFilter.type === "select"}
+        {:else if tmpFilter.type === "select" && (tmpFilter.view === undefined || tmpFilter.view === 'autocomplete')}
           <div
             style:width="100%"
           >
@@ -151,8 +158,19 @@ $:
               maxVisibleChips={2}
               --simple-textfield-width="0px"
               --simple-text-field-margin-left="0px"
+              mobileDrawer={mobile}
             ></Autocomplete>
           </div>
+        {:else if tmpFilter.type === "select" && (tmpFilter.view === 'toggle')}
+          <div
+            style:width="100%"
+          >
+            <ToggleList
+              bind:values={tmpFilter.values}
+              items={tmpFilter.items}
+              multiple
+            ></ToggleList>
+          </div>
         {:else if tmpFilter.type === "date" && tmpFilter.mode === 'between'}
           <div>
             <DatePickerTextField
@@ -162,7 +180,19 @@ $:
               bind:menuOpened={calendarOpened}
               on:day-click={() => {calendarOpened = false}}
               --simple-textfield-width="100%"
-            ></DatePickerTextField>
+            >
+              <svelte:fragment slot="append-inner">
+                <Icon
+                  name="mdi-close-circle"
+                  click
+                  on:click={() => {
+                    if(!!tmpFilter && tmpFilter.type === 'date' && tmpFilter.mode === 'between') {
+                      tmpFilter.from = undefined
+                    }
+                  }}
+                ></Icon>
+              </svelte:fragment>
+            </DatePickerTextField>
           </div>
           <div>
             <DatePickerTextField
@@ -172,7 +202,19 @@ $:
               bind:menuOpened={calendarOpened2}
               on:day-click={() => {calendarOpened2 = false}}
               --simple-textfield-width="100%"
-            ></DatePickerTextField>
+            >
+              <svelte:fragment slot="append-inner">
+                <Icon
+                  name="mdi-close-circle"
+                  click
+                  on:click={() => {
+                    if(!!tmpFilter && tmpFilter.type === 'date' && tmpFilter.mode === 'between') {
+                      tmpFilter.to = undefined
+                    }
+                  }}
+                ></Icon>
+              </svelte:fragment>
+            </DatePickerTextField>
           </div>
         {:else if tmpFilter.type === "number" && tmpFilter.mode === 'between'}
           <div>
@@ -205,27 +247,7 @@ $:
         {/if}
       {/if}
     </div>
-
-    <div class="sub-filter-button">
-      <Button
-        --button-background-color="transparent"
-        --button-hover-background-color="rgb(var(--global-color-primary-500))"
-        --button-hover-box-shadow="0 0 0.5rem rgba(0, 0, 0, 0.3)"
-        --button-box-shadow="none"
-        on:click={handleCancelFilterClick}
-      >
-        {cancelFilterLabel}
-      </Button>
-
-      <Button
-        --button-min-width="100px"
-        on:click={handleApplyFilterClick}
-        disabled={applyFilterDisabled}
-      >
-        {applyFilterLabel}
-
-      </Button>
-    </div>
+    <slot name="filter-actions" {applyFilterDisabled} filter={tmpFilter}></slot>
   </div>
 {/if}
 
@@ -235,15 +257,6 @@ $:
     flex-direction: column;
     align-items: left;
     gap:10px;
-    margin: 5%;
-  }
-
-  .sub-filter-button {
-    display: flex;
-    column-gap: 10px;
-    flex-direction: row;
-    align-items: start;
-    margin-top: 10px;
   }
 
   .advanced-mode {

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

@@ -5,18 +5,17 @@ declare const __propDef: {
     props: {
         filter?: Filter | undefined;
         lang?: "it" | "en" | undefined;
-        cancelFilterLabel?: string | undefined;
-        applyFilterLabel?: string | undefined;
         betweenFromLabel?: string | undefined;
         betweenToLabel?: string | undefined;
         labelsMapper: LabelMapper;
         forceApplyValid?: boolean | undefined;
+        editFilterMode?: "one-edit" | "multi-edit" | undefined;
+        tmpFilter?: Filter | undefined;
+        mobile?: boolean | undefined;
     };
     events: {
         click: MouseEvent;
         keypress: KeyboardEvent;
-        apply: CustomEvent<undefined>;
-        cancel: CustomEvent<undefined>;
     } & {
         [evt: string]: CustomEvent<any>;
     };
@@ -24,6 +23,10 @@ declare const __propDef: {
         custom: {
             filter: Filter | undefined;
         };
+        'filter-actions': {
+            applyFilterDisabled: boolean;
+            filter: Filter | undefined;
+        };
     };
 };
 export type FilterEditorProps = typeof __propDef.props;