@likable-hair/svelte 3.2.12 → 3.3.0

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

@@ -0,0 +1,406 @@
+import { SvelteComponent } from "svelte";
+import { FilterBuilder } from "../../..";
+import { type ComponentProps } from "svelte";
+import Filters from "../search/Filters.svelte";
+import type { Filter } from "../../../utils/filters/filters";
+import { type Action } from "../common/QuickActions.svelte";
+import './DynamicTable.css';
+import type { QuickFilter } from "../../../utils/filters/quickFilters";
+declare const __propDef: {
+    props: {
+        class?: {
+            container?: string | undefined;
+            header?: string | undefined;
+            row?: string | undefined;
+            cell?: string | undefined;
+        } | undefined;
+        headers?: (import("../../simple/lists/SimpleTable.svelte").Header & {
+            cellEditorInfo?: {
+                title: string;
+                description: string;
+                type: {
+                    key: "string";
+                } | {
+                    key: "number";
+                    params?: {
+                        min?: number | undefined;
+                        max?: number | undefined;
+                    } | undefined;
+                } | {
+                    key: "date";
+                } | {
+                    key: "select";
+                    params: {
+                        options: {
+                            icon?: string;
+                            value: string | number | undefined;
+                            id?: number | undefined;
+                            text: string;
+                        }[];
+                    };
+                } | {
+                    key: "boolean";
+                };
+                column: string;
+                info?: string | undefined;
+            } | undefined;
+            info?: string | undefined;
+        })[] | undefined;
+        headersToShowInTable?: (import("../../simple/lists/SimpleTable.svelte").Header & {
+            cellEditorInfo?: {
+                title: string;
+                description: string;
+                type: {
+                    key: "string";
+                } | {
+                    key: "number";
+                    params?: {
+                        min?: number | undefined;
+                        max?: number | undefined;
+                    } | undefined;
+                } | {
+                    key: "date";
+                } | {
+                    key: "select";
+                    params: {
+                        options: {
+                            icon?: string;
+                            value: string | number | undefined;
+                            id?: number | undefined;
+                            text: string;
+                        }[];
+                    };
+                } | {
+                    key: "boolean";
+                };
+                column: string;
+                info?: string | undefined;
+            } | undefined;
+            info?: string | undefined;
+        })[] | undefined;
+        subHeaders?: (import("../../simple/lists/SimpleTable.svelte").Header & {
+            cellEditorInfo?: {
+                title: string;
+                description: string;
+                type: {
+                    key: "string";
+                } | {
+                    key: "number";
+                    params?: {
+                        min?: number | undefined;
+                        max?: number | undefined;
+                    } | undefined;
+                } | {
+                    key: "date";
+                } | {
+                    key: "select";
+                    params: {
+                        options: {
+                            icon?: string;
+                            value: string | number | undefined;
+                            id?: number | undefined;
+                            text: string;
+                        }[];
+                    };
+                } | {
+                    key: "boolean";
+                };
+                column: string;
+                info?: string | undefined;
+            } | undefined;
+            info?: string | undefined;
+        })[] | undefined;
+        customizeHeaders?: boolean | undefined;
+        rows?: {
+            item: {
+                [key: string]: any;
+                disableEdit?: boolean | undefined;
+                rowDisableBackgroundColor?: string | undefined;
+            };
+            subItems: {
+                [key: string]: any;
+                disableEdit?: boolean | undefined;
+                rowDisableBackgroundColor?: string | undefined;
+            }[];
+        }[] | undefined;
+        sortedBy?: string | undefined;
+        sortDirection?: "desc" | "asc" | undefined;
+        cellEdit?: boolean | undefined;
+        noItemsText?: string | undefined;
+        showSelect?: boolean | undefined;
+        showSelectContainer?: boolean | undefined;
+        selectMode?: "multiple" | "single" | undefined;
+        selectedItems?: {
+            [key: string]: any;
+            disableEdit?: boolean | undefined;
+            rowDisableBackgroundColor?: string | undefined;
+        }[] | undefined;
+        showExpand?: boolean | undefined;
+        loading?: boolean | undefined;
+        disabled?: boolean | undefined;
+        filters?: ComponentProps<Filters>["filters"];
+        searchBarColumns?: string[] | undefined;
+        searchBarVisible?: boolean | undefined;
+        searchBarPlaceholder?: string | undefined;
+        filtersVisible?: boolean | undefined;
+        quickFiltersVisible?: boolean | undefined;
+        lang?: "it" | "en" | undefined;
+        editFilterMode?: "one-edit" | "multi-edit" | undefined;
+        showActiveFilters?: boolean | undefined;
+        quickFilters?: QuickFilter[] | undefined;
+        actionsForSelectedItems?: Action[] | undefined;
+        hasMoreToLoad?: boolean | undefined;
+        totalRows?: number | undefined;
+    };
+    events: {
+        click: MouseEvent;
+        sort: CustomEvent<{
+            sortedBy: string | undefined;
+            sortDirection: string;
+        }>;
+        rowClick: CustomEvent<{
+            item: {
+                [key: string]: any;
+                disableEdit?: boolean | undefined;
+                rowDisableBackgroundColor?: string | undefined;
+            };
+        }>;
+        cellClick: CustomEvent<{
+            item: {
+                [key: string]: any;
+                disableEdit?: boolean | undefined;
+                rowDisableBackgroundColor?: string | undefined;
+            };
+        }>;
+        saveCellEdit: CustomEvent<{
+            item: any;
+        }>;
+        saveHeadersToShow: CustomEvent<{
+            headersToShow: {
+                id: string;
+                name: string;
+            }[];
+        }>;
+        filtersChange: CustomEvent<{
+            builder: FilterBuilder;
+        }>;
+        fetchData: CustomEvent<{}>;
+        removeFilter: CustomEvent<{
+            filter: Filter;
+        }>;
+        removeAllFilters: CustomEvent<{}>;
+        removeCustomQuickFilter: CustomEvent<{
+            quickFilter: QuickFilter;
+        }>;
+        applyCustomQuickFilter: CustomEvent<{
+            quickFilter: QuickFilter;
+            setQuickFilterValue: (quickFilter: QuickFilter, value?: any) => void;
+        }>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        'search-bar': {
+            handleSearchChange: (searchText: string | undefined) => void;
+        };
+        'filter-append': {};
+        'custom-filter-chip': {
+            filter: Filter;
+        };
+        'custom-filter': {
+            filter: Filter | undefined;
+            updateMultiFilterValues: (filterName: string, newValue: any, newValid: boolean, mode?: "equal" | "like" | "ilike" | "contains" | "greater" | "lower" | "between" | "different" | undefined) => void;
+            mAndDown: boolean;
+        };
+        header: {
+            subHeader: import("../../simple/lists/SimpleTable.svelte").Header & {
+                cellEditorInfo?: {
+                    title: string;
+                    description: string;
+                    type: {
+                        key: "string";
+                    } | {
+                        key: "number";
+                        params?: {
+                            min?: number | undefined;
+                            max?: number | undefined;
+                        } | undefined;
+                    } | {
+                        key: "date";
+                    } | {
+                        key: "select";
+                        params: {
+                            options: {
+                                icon?: string;
+                                value: string | number | undefined;
+                                id?: number | undefined;
+                                text: string;
+                            }[];
+                        };
+                    } | {
+                        key: "boolean";
+                    };
+                    column: string;
+                    info?: string | undefined;
+                } | undefined;
+                info?: string | undefined;
+            };
+        };
+        headerLabel: {};
+        append: {
+            index: any;
+            row: {
+                item: {
+                    [key: string]: any;
+                    disableEdit?: boolean | undefined;
+                    rowDisableBackgroundColor?: string | undefined;
+                };
+                subItems: {
+                    [key: string]: any;
+                    disableEdit?: boolean | undefined;
+                    rowDisableBackgroundColor?: string | undefined;
+                }[];
+            };
+        };
+        custom: {
+            index: any;
+            columnIndex: any;
+            header: import("../../simple/lists/SimpleTable.svelte").Header & {
+                cellEditorInfo?: {
+                    title: string;
+                    description: string;
+                    type: {
+                        key: "string";
+                    } | {
+                        key: "number";
+                        params?: {
+                            min?: number | undefined;
+                            max?: number | undefined;
+                        } | undefined;
+                    } | {
+                        key: "date";
+                    } | {
+                        key: "select";
+                        params: {
+                            options: {
+                                icon?: string;
+                                value: string | number | undefined;
+                                id?: number | undefined;
+                                text: string;
+                            }[];
+                        };
+                    } | {
+                        key: "boolean";
+                    };
+                    column: string;
+                    info?: string | undefined;
+                } | undefined;
+                info?: string | undefined;
+            };
+            row: {
+                item: {
+                    [key: string]: any;
+                    disableEdit?: boolean | undefined;
+                    rowDisableBackgroundColor?: string | undefined;
+                };
+                subItems: {
+                    [key: string]: any;
+                    disableEdit?: boolean | undefined;
+                    rowDisableBackgroundColor?: string | undefined;
+                }[];
+            };
+        };
+        rowActions: {
+            index: any;
+            row: {
+                item: {
+                    [key: string]: any;
+                    disableEdit?: boolean | undefined;
+                    rowDisableBackgroundColor?: string | undefined;
+                };
+                subItems: {
+                    [key: string]: any;
+                    disableEdit?: boolean | undefined;
+                    rowDisableBackgroundColor?: string | undefined;
+                }[];
+            };
+        };
+        subAppend: {
+            index: any;
+            subItem: {
+                [key: string]: any;
+                disableEdit?: boolean | undefined;
+                rowDisableBackgroundColor?: string | undefined;
+            };
+        };
+        'custom-subheader': {
+            index: any;
+            columnIndex: any;
+            subHeader: import("../../simple/lists/SimpleTable.svelte").Header & {
+                cellEditorInfo?: {
+                    title: string;
+                    description: string;
+                    type: {
+                        key: "string";
+                    } | {
+                        key: "number";
+                        params?: {
+                            min?: number | undefined;
+                            max?: number | undefined;
+                        } | undefined;
+                    } | {
+                        key: "date";
+                    } | {
+                        key: "select";
+                        params: {
+                            options: {
+                                icon?: string;
+                                value: string | number | undefined;
+                                id?: number | undefined;
+                                text: string;
+                            }[];
+                        };
+                    } | {
+                        key: "boolean";
+                    };
+                    column: string;
+                    info?: string | undefined;
+                } | undefined;
+                info?: string | undefined;
+            };
+            subItem: {
+                [key: string]: any;
+                disableEdit?: boolean | undefined;
+                rowDisableBackgroundColor?: string | undefined;
+            };
+        };
+        subRowActions: {
+            index: any;
+            subItem: {
+                [key: string]: any;
+                disableEdit?: boolean | undefined;
+                rowDisableBackgroundColor?: string | undefined;
+            };
+        };
+        'custom-quick-filter': {
+            quickFilter: QuickFilter;
+            setQuickFilterMissingValue: (quickFilter: QuickFilter) => void;
+        };
+        selection: {
+            selection: import("../../simple/forms/Autocomplete.svelte").Item;
+            unselect: (item: import("../../simple/forms/Autocomplete.svelte").Item) => void;
+        };
+        'chip-label': {
+            selection: import("../../simple/forms/Autocomplete.svelte").Item;
+        };
+        'item-label': {
+            item: import("../../simple/forms/Autocomplete.svelte").Item;
+        };
+    };
+};
+export type DynamicTableProps = typeof __propDef.props;
+export type DynamicTableEvents = typeof __propDef.events;
+export type DynamicTableSlots = typeof __propDef.slots;
+export default class DynamicTable extends SvelteComponent<DynamicTableProps, DynamicTableEvents, DynamicTableSlots> {
+}
+export {};

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

@@ -0,0 +1,182 @@
+<script>import { FilterEditor, Icon } from "../../..";
+import { createEventDispatcher } from "svelte";
+export let filters = [], lang = "en", mAndDown = false;
+let selectedFilter;
+let tmpFilters = filters.reduce((acc, f) => {
+  if (f.active) {
+    acc[f.name] = f;
+  }
+  return acc;
+}, {});
+const dispatch = createEventDispatcher();
+let activeFilter = Object.values(tmpFilters).reduce((count, filter) => {
+  if (filter.value !== void 0 || filter.from !== void 0 || filter.to !== void 0 || filter.values !== void 0 && filter.values.length > 0)
+    count++;
+  return count;
+}, 0);
+let labelsMapper = {
+  equal: { extended: "equal to", short: "equal" },
+  like: { short: "includes" },
+  ilike: { short: "includes" },
+  contains: { short: "contains" },
+  greater: { short: "greater", extended: "greater than" },
+  lower: { short: "lower", extended: "lower than" },
+  between: { short: "between", extended: "is between" },
+  different: { short: "different", extended: "different from" }
+};
+function selectFilter(filter) {
+  selectedFilter = filter === selectedFilter ? void 0 : filter;
+}
+function handleKeyPress(event, filter) {
+  if (event.key === "Enter" || event.key === " ") {
+    selectFilter(filter);
+  }
+}
+function clearFilters() {
+  tmpFilters = {};
+  dispatch("removeAllFilters", {});
+}
+function handleFilterChange() {
+  if (!!selectedFilter) {
+    dispatch("change", { filter: tmpFilters[selectedFilter.name] });
+  }
+}
+</script>
+
+<div class="custom-filters-container">
+	<div class="filters-selection">
+	
+		{#if activeFilter > 0}
+			<div class="filter-info">
+				{activeFilter} applied
+				<button class="clear-button" on:click={clearFilters}>✕</button>
+			</div>
+		{/if}
+
+	
+		{#each filters as filter}
+			<div
+				tabindex="0"
+				role="button"
+				class="filters-selection-item"
+				class:selected={filter === selectedFilter}
+				on:click={() => selectFilter(filter)}
+				on:keydown={(event) => handleKeyPress(event, filter)}
+				aria-pressed={filter === selectedFilter}
+			>
+				<div class="filters-selection-title">
+					{filter.label}
+					<Icon name="mdi-chevron-right-circle-outline" />
+				</div>
+			</div>
+		{/each}
+	</div>
+
+	
+	<div class="filters-content">
+		{#if selectedFilter}
+			<div class="filters-content-box">
+				<h2>{selectedFilter.label}</h2>				
+				<FilterEditor
+					bind:filter={selectedFilter}
+					{lang}
+					{labelsMapper}
+					editFilterMode="one-edit"
+					bind:tmpFilter={tmpFilters[selectedFilter.name]}
+					mobile={mAndDown}
+					on:change={handleFilterChange}
+					--simple-textfield-border-radius="5px"
+					--chip-default-color="rgb(var(--global-color-primary-foreground))"
+				>
+				<svelte:fragment slot="custom" let:filter>
+					<slot name="custom" {filter} {mAndDown}></slot>
+				</svelte:fragment>
+				</FilterEditor>
+			</div>
+		{:else}
+			<div class="filters-content-box">
+				<p>Please select a filter to display content.</p>
+			</div>
+		{/if}
+	</div>
+</div>
+
+<style>
+  
+.custom-filters-container {
+    display: flex;
+    height: 70vh;
+    overflow-y: scroll;
+  }
+
+  .filters-selection {
+    width: 40%;
+    padding: 1rem;
+
+  }
+
+  .filters-selection-item {
+    margin-bottom: 0.5rem;
+    padding: 0.5rem;
+    cursor: pointer;
+    border: 1px solid transparent;
+    transition: background-color 0.3s, border 0.3s;
+    border-radius: 5px;
+
+  }
+  .filters-selection-title{
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+  }
+
+  .filters-selection-item.selected {
+    border: 1px solid rgb(var(--global-color-primary-500));
+    background-color:  rgb(var(--global-color-background-500));
+  }
+
+	.filters-content {
+    width: 60%;
+  }
+  .filters-content-box {
+    padding: 1rem;
+  }
+
+  .filters-content-box>h2 {
+    font-size: larger;
+    text-align: center;
+    font-weight: bold;
+  }
+
+  .filter-info {
+    display: inline-flex;
+    align-items: center;
+    padding: 0.25rem 0.5rem;
+    background-color: rgb(var(--global-color-background-700));
+    color: rgb(var(--global-color-primary-600));
+    border-radius: 1rem;
+    font-weight: bold;
+    font-size: 0.9rem;
+		margin-bottom: 10px;
+  }
+
+  .clear-button {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    width: 1rem;
+    height: 1rem;
+    margin-left: 0.5rem;
+    border-radius: 50%;
+    background-color: rgb(var(--global-color-background-700));
+    color: rgb(var(--global-color-primary-600));
+    font-weight: bold;
+    cursor: pointer;
+    font-size: 0.8rem;
+    border: none;
+  }
+
+  .clear-button:hover {
+    background-color: rgb(var(--global-color-background-500));
+  }
+</style>

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

@@ -0,0 +1,29 @@
+import { SvelteComponent } from "svelte";
+import type { Filter } from "../../../utils/filters/filters";
+declare const __propDef: {
+    props: {
+        filters?: Filter[] | undefined;
+        lang?: "it" | "en" | undefined;
+        mAndDown?: boolean | undefined;
+    };
+    events: {
+        removeAllFilters: CustomEvent<{}>;
+        change: CustomEvent<{
+            filter: Filter;
+        }>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        custom: {
+            filter: Filter | undefined;
+            mAndDown: boolean;
+        };
+    };
+};
+export type DynamicFiltersProps = typeof __propDef.props;
+export type DynamicFiltersEvents = typeof __propDef.events;
+export type DynamicFiltersSlots = typeof __propDef.slots;
+export default class DynamicFilters extends SvelteComponent<DynamicFiltersProps, DynamicFiltersEvents, DynamicFiltersSlots> {
+}
+export {};

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

@@ -1,5 +1,5 @@
 <script>import Dropdown, {} from "../forms/Dropdown.svelte";
-import { GenericModes, SelectModes, StringModes } from "../../../utils/filters/filters";
+import { GENERIC_MODES, SELECT_MODES, STRING_MODES } from "../../../utils/filters/filters";
 import SimpleTextField from "../../simple/forms/SimpleTextField.svelte";
 import DatePickerTextField from "../forms/DatePickerTextField.svelte";
 import Validator from "../../../utils/filters/validator";
@@ -34,13 +34,13 @@ $:
   if (!!tmpFilter) {
     let modes;
     if (tmpFilter.type == "string") {
-      modes = StringModes;
+      modes = STRING_MODES;
     } else if (tmpFilter.type == "date") {
-      modes = GenericModes;
+      modes = GENERIC_MODES;
     } else if (tmpFilter.type == "number") {
-      modes = GenericModes;
+      modes = GENERIC_MODES;
     } else if (tmpFilter.type == "select") {
-      modes = SelectModes;
+      modes = SELECT_MODES;
     } else if (tmpFilter.type == "bool") {
       modes = void 0;
     }
@@ -108,6 +108,7 @@ function handleChangeValue() {
             bind:menuOpened={dropdownOpened}
             openingId="advanced-filter"
             mobileDrawer={mobile}
+            {lang}
           ></Dropdown>
         </div>
       </div>
@@ -132,7 +133,8 @@ function handleChangeValue() {
               on:day-click={() => {calendarOpened = false}}
               --simple-textfield-width="100%"
               flipOnOverflow
-              on:change={handleChangeValue}
+              on:input={handleChangeValue}
+              on:day-click={handleChangeValue}
             >
               <svelte:fragment slot="append-inner">
                 <Icon
@@ -191,7 +193,8 @@ function handleChangeValue() {
               bind:menuOpened={calendarOpened}
               on:day-click={() => {calendarOpened = false}}
               --simple-textfield-width="100%"
-              on:change={handleChangeValue}
+              on:input={handleChangeValue}
+              on:day-click={handleChangeValue}
             >
               <svelte:fragment slot="append-inner">
                 <Icon
@@ -215,7 +218,8 @@ function handleChangeValue() {
               on:day-click={() => {calendarOpened2 = false}}
               --simple-textfield-width="100%"
               flipOnOverflow
-              on:change={handleChangeValue}
+              on:input={handleChangeValue}
+              on:day-click={handleChangeValue}
             >
               <svelte:fragment slot="append-inner">
                 <Icon