@likable-hair/svelte 3.0.58 → 3.0.59

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

@@ -14,7 +14,7 @@ export let headers = [], items = [], sortedBy = void 0, sortDirection = void 0,
   { label: "20", value: 20 },
   { label: "50", value: 50 },
   { label: "100", value: 100 }
-], hideRowsPerPage = false, totalElements = void 0, rowsPerPage = 20, filters = [], searchBarColumns = void 0, searchBarVisible = true, lang = "en";
+], hideRowsPerPage = false, totalElements = void 0, rowsPerPage = 20, filters = [], searchBarColumns = void 0, searchBarVisible = true, searchBarPlaceholder = "Type something to search...", customFiltersValid = {}, customFiltersValues = void 0, lang = "en";
 let searchBarInput, searchText = void 0;
 let dispatch = createEventDispatcher();
 let rowsPerPageSelection = [];
@@ -39,7 +39,8 @@ function handleSearchChange(searchText2) {
   let converter = new Converter();
   let builder;
   builder = converter.createBuilder({
-    filters: filters || []
+    filters: filters || [],
+    customFiltersValues
   });
   if (!!searchText2 && !!searchBarColumns && searchBarColumns.length > 0) {
     builder.where((b) => {
@@ -64,7 +65,7 @@ function handleFiltersChange() {
   {#if searchBarVisible}
     <slot name="search-bar" {handleSearchChange}>
       <SearchBar
-        placeholder="Type something to search..."
+        placeholder={searchBarPlaceholder}
         bind:input={searchBarInput}
         bind:value={searchText}
       >
@@ -78,10 +79,17 @@ function handleFiltersChange() {
       on:removeFilter={handleFiltersChange}
       --filters-default-wrapper-width="100%"
       {lang}
-    > 
+      {customFiltersValid}
+    >
       <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>
+      <svelte:fragment slot="custom-mobile" let:filter>
+        <slot name="custom-filter-mobile" {filter}></slot>
+      </svelte:fragment>
     </Filters>
   </div>
   <SimpleTable

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

@@ -24,6 +24,13 @@ declare const __propDef: {
         filters?: ComponentProps<Filters>['filters'];
         searchBarColumns?: string[] | undefined;
         searchBarVisible?: boolean | undefined;
+        searchBarPlaceholder?: string | undefined;
+        customFiltersValid?: {
+            [filterName: string]: boolean;
+        } | undefined;
+        customFiltersValues?: {
+            [filterName: string]: any;
+        } | undefined;
         lang?: "it" | "en" | undefined;
     };
     events: {
@@ -44,6 +51,12 @@ declare const __propDef: {
             handleSearchChange: (searchText: string | undefined) => void;
         };
         'filter-append': {};
+        'custom-filter': {
+            filter: import("../../../utils/filters/filters").Filter | undefined;
+        };
+        'custom-filter-mobile': {
+            filter: import("../../../utils/filters/filters").Filter | undefined;
+        };
         header: {
             head: import("../../simple/lists/SimpleTable.svelte").Header;
         };

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

@@ -7,11 +7,11 @@ 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;
+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;
 let advancedModeOptions, advancedModeSelectedOptions;
 function initTmpFilter() {
-  tmpFilter = structuredClone(filter);
+  tmpFilter = filter === void 0 ? void 0 : { ...filter };
   if (!!tmpFilter && ["string", "number", "date", "select"].includes(tmpFilter.type) && Object.keys(tmpFilter).includes("mode")) {
     if (tmpFilter.mode == "between" && tmpFilter.from !== void 0 && tmpFilter.to !== void 0 || tmpFilter.value !== void 0 || tmpFilter.type == "select" && tmpFilter.values !== void 0 && tmpFilter.values.length > 0) {
       advancedModeSelectedOptions = [{
@@ -36,7 +36,7 @@ function handleCancelFilterClick(e) {
 }
 function handleApplyFilterClick() {
   if (!!filter && !!tmpFilter) {
-    filter = structuredClone(tmpFilter);
+    filter = { ...tmpFilter };
     filter.active = true;
     dispatch("apply");
   }
@@ -83,7 +83,7 @@ function handleAdvancedModeSelection() {
   dropdownOpened = false;
 }
 $:
-  applyFilterDisabled = !Validator.isValid(tmpFilter);
+  applyFilterDisabled = !Validator.isValid(tmpFilter) && !forceApplyValid;
 $:
   if (!!tmpFilter && tmpFilter.type == "bool") {
     if (tmpFilter.value === void 0) {
@@ -200,6 +200,8 @@ $:
               {tmpFilter.description}
             </span>
           </div>
+        {:else if tmpFilter.type == 'custom'}
+          <slot name="custom" filter={tmpFilter}></slot>
         {/if}
       {/if}
     </div>

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

@@ -10,6 +10,7 @@ declare const __propDef: {
         betweenFromLabel?: string | undefined;
         betweenToLabel?: string | undefined;
         labelsMapper: LabelMapper;
+        forceApplyValid?: boolean | undefined;
     };
     events: {
         click: MouseEvent;
@@ -19,7 +20,11 @@ declare const __propDef: {
     } & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        custom: {
+            filter: Filter | undefined;
+        };
+    };
 };
 export type FilterEditorProps = typeof __propDef.props;
 export type FilterEditorEvents = typeof __propDef.events;

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

@@ -13,7 +13,7 @@ import Chip from "../../simple/navigation/Chip.svelte";
 import FilterEditor from "./FilterEditor.svelte";
 import MobileFilterEditor from "./MobileFilterEditor.svelte";
 import { fly } from "svelte/transition";
-export let filters = [], lang = "en", addFilterLabel = lang == "en" ? "Filters" : "Filtri", cancelFilterLabel = lang == "en" ? "Cancel" : "Annulla", applyFilterLabel = lang == "en" ? "Apply filter" : "Applica filtro", showActiveFilters = true, filterTitleLabel = lang == "en" ? "Filter by" : "Filtra per", dateLocale = "en", betweenSeparator = lang == "en" ? "and" : "e", trueString = lang == "en" ? "true" : "vero", falseString = lang == "en" ? "false" : "falso", labelsMapper = lang == "en" ? {
+export let filters = [], lang = "en", addFilterLabel = lang == "en" ? "Filters" : "Filtri", cancelFilterLabel = lang == "en" ? "Cancel" : "Annulla", applyFilterLabel = lang == "en" ? "Apply filter" : "Applica filtro", showActiveFilters = true, filterTitleLabel = lang == "en" ? "Filter by" : "Filtra per", dateLocale = "en", betweenSeparator = lang == "en" ? "and" : "e", trueString = lang == "en" ? "true" : "vero", falseString = lang == "en" ? "false" : "falso", customFiltersValid = {}, labelsMapper = lang == "en" ? {
   "equal": {
     extended: "equal to",
     short: "equal"
@@ -24,6 +24,9 @@ export let filters = [], lang = "en", addFilterLabel = lang == "en" ? "Filters"
   "ilike": {
     short: "includes"
   },
+  "contains": {
+    short: "contains"
+  },
   "greater": {
     short: "greater",
     extended: "greater than"
@@ -51,6 +54,9 @@ export let filters = [], lang = "en", addFilterLabel = lang == "en" ? "Filters"
   "ilike": {
     short: "include"
   },
+  "contains": {
+    short: "contiene"
+  },
   "greater": {
     short: "maggiore",
     extended: "maggiore di"
@@ -288,10 +294,10 @@ function handleDeleteIconClick(e) {
     >
       <div class="drawer-content">
         {#if !!selectedFilter && singleFilterMenuOpened}
-          <div 
-            class="drawer-filter-detail" 
-            style:height="100%" 
-            in:fly|local={{delay: 100, duration: 100, x: 200}} 
+          <div
+            class="drawer-filter-detail"
+            style:height="100%"
+            in:fly|local={{delay: 100, duration: 100, x: 200}}
             out:fly|local={{duration: 100, x: -200}}
           >
             <MobileFilterEditor
@@ -303,20 +309,26 @@ function handleDeleteIconClick(e) {
               on:cancelClick={() => {mobileOpen = false; closeFilterMenu(200)}}
               {lang}
               {labelsMapper}
+              forceApplyValid={!!customFiltersValid[selectedFilter.name]}
             >
               <div slot="title">
                 <div class="mobile-title">
                   {selectedFilter?.label}
                 </div>
               </div>
+
+              <svelte:fragment slot="custom" let:filter>
+                <slot name="custom-mobile" {filter}></slot>
+              </svelte:fragment>
+
             </MobileFilterEditor>
           </div>
         {:else}
-          <div 
-            class="drawer-filter-list" 
-            style:margin-top="20px" 
-            style:height="100%" 
-            out:fly|local={{duration: 100, x: -200}} 
+          <div
+            class="drawer-filter-list"
+            style:margin-top="20px"
+            style:height="100%"
+            out:fly|local={{duration: 100, x: -200}}
             in:fly|local={{duration: 100, x: 200, delay: 100}}
           >
             <SelectableVerticalList
@@ -401,7 +413,12 @@ function handleDeleteIconClick(e) {
             on:apply={handleApplyFilterClick}
             {lang}
             {labelsMapper}
-          ></FilterEditor>
+            forceApplyValid={!!customFiltersValid[selectedFilter.name]}
+          >
+            <svelte:fragment slot="custom" let:filter>
+              <slot name="custom" {filter}></slot>
+            </svelte:fragment>
+          </FilterEditor>
         {/if}
       </div>
     </Menu>

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

@@ -23,6 +23,9 @@ declare const __propDef: {
         betweenSeparator?: string | undefined;
         trueString?: string | undefined;
         falseString?: string | undefined;
+        customFiltersValid?: {
+            [filterName: string]: boolean;
+        } | undefined;
         labelsMapper?: LabelMapper | undefined;
     };
     events: {
@@ -38,6 +41,12 @@ declare const __propDef: {
     };
     slots: {
         append: {};
+        'custom-mobile': {
+            filter: Filter | undefined;
+        };
+        custom: {
+            filter: Filter | undefined;
+        };
     };
 };
 export type FiltersProps = typeof __propDef.props;

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

@@ -9,11 +9,11 @@ import Icon from "../../simple/media/Icon.svelte";
 import { fly } from "svelte/transition";
 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 filtro", backIcon = "mdi-arrow-left", betweenFromLabel = lang == "en" ? "From" : "Da", betweenToLabel = lang == "en" ? "To" : "A", labelsMapper;
+export let filter = void 0, lang = "en", cancelFilterLabel = lang == "en" ? "Cancel" : "Annulla", applyFilterLabel = lang == "en" ? "Apply filter" : "Applica filtro", backIcon = "mdi-arrow-left", betweenFromLabel = lang == "en" ? "From" : "Da", betweenToLabel = lang == "en" ? "To" : "A", labelsMapper, forceApplyValid = false;
 let dispatch = createEventDispatcher();
 function handleApplyFilterClick() {
   if (!!filter && !!tmpFilter) {
-    filter = structuredClone(tmpFilter);
+    filter = { ...tmpFilter };
     filter.active = true;
     dispatch("apply");
   }
@@ -21,7 +21,7 @@ function handleApplyFilterClick() {
 let step;
 let tmpFilter;
 function initTmpFilter() {
-  tmpFilter = structuredClone(filter);
+  tmpFilter = filter === void 0 ? void 0 : { ...filter };
   if (!!tmpFilter && tmpFilter.advanced) {
     if (["string", "number", "date", "select"].includes(tmpFilter.type) && Object.keys(tmpFilter).includes("mode")) {
       if (tmpFilter.mode == "between" && tmpFilter.from !== void 0 && tmpFilter.to !== void 0 || tmpFilter.value !== void 0 || tmpFilter.type == "select" && tmpFilter.values !== void 0 && tmpFilter.values.length > 0) {
@@ -84,7 +84,7 @@ function handleAdvancedModeSelection() {
 }
 let canRenderOptions = true;
 $:
-  applyFilterDisabled = !Validator.isValid(tmpFilter);
+  applyFilterDisabled = !Validator.isValid(tmpFilter) && !forceApplyValid;
 function handleModeBackClick() {
   dispatch("backClick");
 }
@@ -245,6 +245,8 @@ $:
                     {tmpFilter.description}
                   </span>
                 </div>
+              {:else if tmpFilter.type == 'custom'}
+                <slot name="custom" filter={tmpFilter}></slot>
               {/if}
             </div>
           </div>

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

@@ -11,6 +11,7 @@ declare const __propDef: {
         betweenFromLabel?: string | undefined;
         betweenToLabel?: string | undefined;
         labelsMapper: LabelMapper;
+        forceApplyValid?: boolean | undefined;
     };
     events: {
         keypress: KeyboardEvent;
@@ -24,6 +25,9 @@ declare const __propDef: {
     };
     slots: {
         title: {};
+        custom: {
+            filter: Filter | undefined;
+        };
     };
 };
 export type MobileFilterEditorProps = typeof __propDef.props;

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

@@ -0,0 +1,128 @@
+<script context="module"></script>
+
+<script>import Sortable from "sortablejs";
+import { onMount, createEventDispatcher } from "svelte";
+import TreeEditorItem from "./TreeEditorItem.svelte";
+import { createId } from "@paralleldrive/cuid2";
+import { cloneDeep } from "lodash";
+let dispatch = createEventDispatcher();
+export let items = [], groupName = createId(), cleanItems = convertItemsInClean(items);
+let itemList, sortable = void 0, rerender = true, mounted = false;
+onMount(() => {
+  mounted = true;
+  initSortable();
+});
+async function initSortable() {
+  if (!mounted)
+    return;
+  sortable = Sortable.create(itemList, {
+    handle: ".handle",
+    group: groupName,
+    animation: 150,
+    ghostClass: "ghost-drag-element",
+    onEnd(event) {
+      sortTree();
+    }
+  });
+}
+$:
+  if (!!items)
+    initSortable();
+function handleEnd(event) {
+  sortTree();
+}
+async function sortTree() {
+  let clonedItems = cloneDeep(items);
+  let sortedItems = sortSubTree(clonedItems, items, sortable, "main");
+  dispatch("change", {
+    items: sortedItems
+  });
+  items = sortedItems;
+  rerender = !rerender;
+}
+function sortSubTree(totalItems, itemsToSort, parentSortable, parentId) {
+  if (!parentSortable)
+    throw new Error("Parent sortable could not be undefined");
+  parentSortable.save();
+  for (let i = 0; i < itemsToSort.length; i += 1) {
+    let itemToSort = itemsToSort[i];
+    if (!!itemToSort.children) {
+      itemsToSort[i].children = sortSubTree(totalItems, itemToSort.children, itemToSort.sortable, itemToSort.id);
+    }
+  }
+  let orderedIds = [];
+  for (let k = 0; k < parentSortable.el.children.length; k += 1) {
+    let id = parentSortable.el.children[k].getAttribute("data-sortable-id")?.toString();
+    if (!id)
+      throw new Error("All html element must have data-sortbale-id");
+    orderedIds.push(id);
+  }
+  let newItems = [];
+  for (let j = 0; j < orderedIds.length; j += 1) {
+    let id = orderedIds[j];
+    let itemIndex = itemsToSort.findIndex((its) => its.id.toString() == id);
+    if (itemIndex === -1) {
+      let itemToAdd = findItem(totalItems, id);
+      if (!itemToAdd)
+        continue;
+      newItems.push(itemToAdd);
+    } else {
+      newItems.push(itemsToSort[itemIndex]);
+    }
+  }
+  return newItems;
+}
+function findItem(itemsToSearch, id) {
+  for (let i = 0; i < itemsToSearch.length; i += 1) {
+    let item = itemsToSearch[i];
+    if (item.id == id)
+      return item;
+    if (!!item.children) {
+      let result = findItem(item.children, id);
+      if (!!result)
+        return result;
+    }
+  }
+}
+function convertItemsInClean(items2) {
+  return items2.map((i) => {
+    return {
+      id: i.id,
+      title: i.title,
+      expanded: i.expanded,
+      children: !!i.children ? convertItemsInClean(i.children) : [],
+      data: i.data
+    };
+  });
+}
+$:
+  cleanItems = convertItemsInClean(items);
+</script>
+
+{#key rerender}
+  <ul 
+    class="main-ul"
+    bind:this={itemList}
+  >
+    {#each items as item (item.id)}
+      <TreeEditorItem
+        title={item.title}
+        id={item.id}
+        group={groupName}
+        bind:subItems={item.children}
+        bind:expanded={item.expanded}
+        bind:sortable={item.sortable}
+        on:end={handleEnd}
+      ></TreeEditorItem>
+    {/each}
+  </ul>
+{/key}
+  
+<style>
+
+  .main-ul {
+    padding: 0px;
+    padding-bottom: 30px;
+    list-style: none;
+  }
+</style>

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

@@ -0,0 +1,38 @@
+import { SvelteComponentTyped } from "svelte";
+export type Item = {
+    id: number | string;
+    title: string;
+    expanded?: boolean;
+    sortable?: Sortable;
+    children?: Item[];
+    data?: any;
+};
+export type CleanItem = {
+    id: number | string;
+    title: string;
+    expanded?: boolean;
+    children?: CleanItem[];
+    data?: any;
+};
+import Sortable from 'sortablejs';
+declare const __propDef: {
+    props: {
+        items?: Item[] | undefined;
+        groupName?: string | undefined;
+        cleanItems?: CleanItem[] | undefined;
+    };
+    events: {
+        change: CustomEvent<{
+            items: Item[];
+        }>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type TreeEditorProps = typeof __propDef.props;
+export type TreeEditorEvents = typeof __propDef.events;
+export type TreeEditorSlots = typeof __propDef.slots;
+export default class TreeEditor extends SvelteComponentTyped<TreeEditorProps, TreeEditorEvents, TreeEditorSlots> {
+}
+export {};

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

@@ -0,0 +1,120 @@
+<script>import Sortable from "sortablejs";
+import { onMount } from "svelte";
+import Icon from "../media/Icon.svelte";
+import Button from "../buttons/Button.svelte";
+import { slide } from "svelte/transition";
+import { createEventDispatcher } from "svelte";
+let dispatch = createEventDispatcher();
+export let title, id, subtitle = void 0, group, animationDuration = 150, expanded = true, subItems = [], sortable = void 0;
+let subItemList, mounted = false;
+onMount(() => {
+  mounted = true;
+  initSortable();
+});
+function initSortable() {
+  if (!mounted)
+    return;
+  sortable = Sortable.create(subItemList, {
+    group,
+    handle: ".handle",
+    animation: animationDuration,
+    ghostClass: "ghost-drag-element",
+    onEnd(ev) {
+      dispatch("end", { ev });
+    },
+    onChange(ev) {
+      dispatch("change", { ev });
+    },
+    onUpdate(ev) {
+    }
+  });
+}
+$:
+  if (!!subItems)
+    initSortable();
+</script>
+
+<li 
+  class="tree-editor-item-container" 
+  data-sortable-title={title}
+  data-sortable-id={id}
+>
+  <div class="card-container">
+    <div class="handle">
+      <Icon
+        name="mdi-dots-grid"
+      ></Icon>
+    </div>
+    <div class="button-container" class:reversed={expanded}>
+      <Button
+        buttonType="text"
+        on:click={() => expanded = !expanded}
+      >
+        <Icon
+          name="mdi-chevron-down"
+        ></Icon>
+      </Button>
+    </div>
+    {title}
+  </div>
+  <ul 
+    class="list-container" 
+    bind:this={subItemList}
+  >
+    {#if expanded && !!subItems}
+      {#each subItems as subItem}
+        <svelte:self
+          id={subItem.id}
+          title={subItem.title}
+          group={group}
+          animationDuration={animationDuration}
+          bind:subItems={subItem.children}
+          bind:sortable={subItem.sortable}
+        ></svelte:self>
+      {/each}
+    {/if}
+  </ul>
+</li>
+
+<style>
+  ul {
+    min-height: 10px;
+    list-style: none;
+  }
+
+  .card-container {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    font-size: 1.2rem;
+    font-weight: 700;
+    border-radius: 12px;
+    min-height: 20px;
+    padding: 16px;
+    box-shadow: rgb(var(--global-color-contrast-200), .3) 0px 4px 6px;;
+  }
+
+  :global(.ghost-drag-element > .card-container) {
+    background-color: rgb(var(--global-color-primary-500), .3);
+    opacity: 30%;
+  }
+
+  :global(.ghost-drag-element > .list-container) {
+    opacity: 30%;
+  }
+
+  .handle {
+    margin-right: 8px;
+    cursor: grab;
+    transition: all .3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  }
+
+  .button-container {
+    margin-right: 12px;
+    transition: all .3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  }
+
+  .button-container.reversed {
+    transform: rotate(-90deg);
+  }
+</style>

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

@@ -0,0 +1,32 @@
+import { SvelteComponentTyped } from "svelte";
+import Sortable from 'sortablejs';
+import type { Item } from './TreeEditor.svelte';
+declare const __propDef: {
+    props: {
+        title: string;
+        id: number | string;
+        subtitle?: string | undefined;
+        group: string;
+        animationDuration?: number | undefined;
+        expanded?: boolean | undefined;
+        subItems?: Item[] | undefined;
+        sortable?: Sortable | undefined;
+    };
+    events: {
+        change: CustomEvent<{
+            ev: Sortable.SortableEvent;
+        }>;
+        end: CustomEvent<{
+            ev: Sortable.SortableEvent;
+        }>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type TreeEditorItemProps = typeof __propDef.props;
+export type TreeEditorItemEvents = typeof __propDef.events;
+export type TreeEditorItemSlots = typeof __propDef.slots;
+export default class TreeEditorItem extends SvelteComponentTyped<TreeEditorItemProps, TreeEditorItemEvents, TreeEditorItemSlots> {
+}
+export {};

package/dist/index.d.ts

@@ -22,6 +22,7 @@ export { default as Textfield } from './components/simple/forms/Textfield.svelte
 export { default as SimpleTextField } from './components/simple/forms/SimpleTextField.svelte';
 export { default as VerticalSwitch } from './components/simple/forms/VerticalSwitch.svelte';
 export { default as VerticalTextSwitch } from './components/simple/forms/VerticalTextSwitch.svelte';
+export { default as TreeEditor } from './components/simple/forms/TreeEditor.svelte';
 export { default as ColorInvertedSelector } from './components/simple/lists/ColorInvertedSelector.svelte';
 export { default as SelectableMenuList } from './components/simple/lists/SelectableMenuList.svelte';
 export { default as SidebarMenuList } from './components/simple/lists/SidebarMenuList.svelte';

package/dist/index.js

@@ -22,6 +22,7 @@ export { default as Textfield } from './components/simple/forms/Textfield.svelte
 export { default as SimpleTextField } from './components/simple/forms/SimpleTextField.svelte';
 export { default as VerticalSwitch } from './components/simple/forms/VerticalSwitch.svelte';
 export { default as VerticalTextSwitch } from './components/simple/forms/VerticalTextSwitch.svelte';
+export { default as TreeEditor } from './components/simple/forms/TreeEditor.svelte';
 export { default as ColorInvertedSelector } from './components/simple/lists/ColorInvertedSelector.svelte';
 export { default as SelectableMenuList } from './components/simple/lists/SelectableMenuList.svelte';
 export { default as SidebarMenuList } from './components/simple/lists/SidebarMenuList.svelte';

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

@@ -1,5 +1,5 @@
 import Builder from "./builder";
-export declare const StringModes: readonly ["equal", "like", "ilike"];
+export declare const StringModes: readonly ["equal", "like", "ilike", "contains"];
 export type StringMode = typeof StringModes[number];
 export declare const GenericModes: readonly ["equal", "greater", "lower", "between"];
 export type DateMode = typeof GenericModes[number];
@@ -73,6 +73,7 @@ type CustomFilter = {
     modify: (params: {
         filter: Omit<Filter, 'modifier'>;
         builder: Builder;
+        value: any;
     }) => Builder;
     data?: any;
 };
@@ -87,6 +88,9 @@ export default class Converter {
     constructor();
     createBuilder(params: {
         filters: Filter[];
+        customFiltersValues?: {
+            [filterName: string]: any;
+        };
     }): Builder;
     private applyStringFilter;
     private applyDateFilter;

package/dist/utils/filters/filters.js

@@ -1,5 +1,5 @@
 import Builder from "./builder";
-export const StringModes = ['equal', 'like', 'ilike'];
+export const StringModes = ['equal', 'like', 'ilike', 'contains'];
 export const GenericModes = ['equal', 'greater', 'lower', 'between'];
 export const SelectModes = ['equal', 'different'];
 export default class Converter {
@@ -11,8 +11,8 @@ export default class Converter {
             const filter = params.filters[i];
             if (!filter.active)
                 continue;
-            if (filter.type == 'custom' && !!filter.modify) {
-                builder = filter.modify({ filter, builder });
+            if (filter.type == 'custom' && !!filter.modify && !!params.customFiltersValues && params.customFiltersValues[filter.name] !== undefined) {
+                builder = filter.modify({ filter, builder, value: params.customFiltersValues[filter.name] });
             }
             else if (filter.type == 'string') {
                 this.applyStringFilter({ builder, filter });
@@ -41,6 +41,9 @@ export default class Converter {
         else if (params.filter.mode == 'ilike') {
             params.builder.where(params.filter.column, 'ilike', params.filter.value);
         }
+        else if (params.filter.mode == 'contains') {
+            params.builder.where(params.filter.column, 'ilike', `%${params.filter.value}%`);
+        }
         else {
             params.builder.where(params.filter.column, '=', params.filter.value);
         }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@likable-hair/svelte",
   "description": "A Svelte component for likablehair",
-  "version": "3.0.58",
+  "version": "3.0.59",
   "scripts": {
     "host": "vite --host",
     "dev": "vite dev",
@@ -38,6 +38,7 @@
     "@sveltejs/package": "^2.0.0",
     "@types/lodash": "^4.14.192",
     "@types/luxon": "^3.3.0",
+    "@types/sortablejs": "^1.15.7",
     "@typescript-eslint/eslint-plugin": "^5.45.0",
     "@typescript-eslint/parser": "^5.45.0",
     "eslint": "^8.28.0",
@@ -65,6 +66,7 @@
     "imask": "^7.1.0-alpha.0",
     "lodash": "^4.17.21",
     "luxon": "^3.3.0",
+    "sortablejs": "^1.15.2",
     "svelte-chartjs": "^3.1.2",
     "svelte-grid": "^5.1.2"
   }