@likable-hair/svelte 3.0.20 → 3.0.21

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

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

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

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

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

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

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

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

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

@@ -3,7 +3,7 @@
 <script>import Autocomplete from "../../../components/simple/forms/Autocomplete.svelte";
 import Button from "../../simple/buttons/Button.svelte";
 import Icon from "../../simple/media/Icon.svelte";
-export let items = [], values = [], multiple = false, searchText = void 0, maxVisibleChips = void 0, placeholder = "Seleziona", clearable = true, mandatory = true, icon = void 0;
+export let items = [], values = [], multiple = false, lang = "en", searchText = void 0, maxVisibleChips = void 0, placeholder = lang == "en" ? "Select" : "Seleziona", clearable = true, mandatory = true, icon = void 0, menuOpened = false, openingId = void 0;
 $:
   generatedLabel = values.length == 1 ? values[0].label : `${values.length} Selezionati`;
 function handleCloseClick(event) {
@@ -22,9 +22,11 @@ function handleCloseClick(event) {
   bind:mandatory
   searchFunction={() => true}
   on:change
+  bind:menuOpened
+  bind:openingId
 >
   <svelte:fragment slot="selection-container" let:openMenu let:handleKeyDown>
-    <Button 
+    <Button
       --button-default-background-color="transparent"
       --button-default-focus-background-color="rgb(var(--global-color-primary-400), .3)"
       --button-default-focus-color="rgb(var(--global-color-contrast-900))"
@@ -52,8 +54,8 @@ function handleCloseClick(event) {
           {:else}
             <div class="space-between">
               <div>{generatedLabel}</div>
-              {#if clearable}  
-                <Icon 
+              {#if clearable}
+                <Icon
                   name="mdi-close"
                   click
                   on:click={handleCloseClick}

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

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

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

@@ -5,13 +5,17 @@ import Dropdown from "../forms/Dropdown.svelte";
 import { createEventDispatcher } from "svelte";
 </script>
 
-<script>let clazz = {};
+<script>import Filters from "../search/Filters.svelte";
+import SearchBar from "../search/SearchBar.svelte";
+import Converter from "../../../utils/filters/filters";
+let clazz = {};
 export { clazz as class };
 export let headers = [], items = [], sortedBy = void 0, sortDirection = void 0, page = 1, maxPage = void 0, rowsPerPageOptions = [
   { label: "20", value: 20 },
   { label: "50", value: 50 },
   { label: "100", value: 100 }
-], hideRowsPerPage = false, totalElements = void 0, rowsPerPage = 20;
+], hideRowsPerPage = false, totalElements = void 0, rowsPerPage = 20, filters = [], searchBarColumns = void 0;
+let searchBarInput, searchText = void 0;
 let dispatch = createEventDispatcher();
 let rowsPerPageSelection = [];
 $:
@@ -31,9 +35,47 @@ function handlePaginationChange() {
     page
   });
 }
+function handleSearchChange(searchText2) {
+  let converter = new Converter();
+  let builder;
+  builder = converter.createBuilder({
+    filters: filters || []
+  });
+  if (!!searchText2 && !!searchBarColumns && searchBarColumns.length > 0) {
+    builder.where((b) => {
+      b.where(searchBarColumns[0], "like", searchText2);
+      for (let i = 1; i < searchBarColumns.length; i += 1) {
+        b.orWhere(searchBarColumns[i], "like", searchText2);
+      }
+    });
+  }
+  dispatch("filtersChange", {
+    builder
+  });
+}
+$:
+  handleSearchChange(searchText);
+function handleFiltersChange() {
+  handleSearchChange(searchText);
+}
 </script>
 
 <div class="paginated-table">
+
+  <SearchBar
+    placeholder="Type something to search..."
+    bind:input={searchBarInput}
+    bind:value={searchText}
+  >
+  </SearchBar>
+  <div class="filter-container">
+    <Filters
+      bind:filters
+      on:applyFilter={handleFiltersChange}
+      on:removeFilter={handleFiltersChange}
+    >
+  </Filters>
+</div>
   <SimpleTable
     bind:headers
     bind:class={clazz.simpleTable}
@@ -50,7 +92,7 @@ function handlePaginationChange() {
           </slot>
         </span>
         {#if head.sortable}
-          <span 
+          <span
             class="header-sort-icon"
             class:active={sortedBy == head.value}
             class:asc={sortDirection == 'asc'}
@@ -65,11 +107,11 @@ function handlePaginationChange() {
         {/if}
       </slot>
     </svelte:fragment>
-    <svelte:fragment 
-      slot="custom" 
-      let:columnIndex 
-      let:index 
-      let:header 
+    <svelte:fragment
+      slot="custom"
+      let:columnIndex
+      let:index
+      let:header
       let:item
     >
       <slot name="custom" {index} {columnIndex} {header} {item}/>
@@ -81,8 +123,9 @@ function handlePaginationChange() {
       <slot name="append" {index} {item} />
     </svelte:fragment>
   </SimpleTable>
+
   <div class="footer">
-    <slot 
+    <slot
       name="footer"
       {hideRowsPerPage}
       {rowsPerPageOptions}
@@ -126,7 +169,6 @@ function handlePaginationChange() {
     display: flex;
     flex-direction: column;
     gap: 24px;
-    align-items: center;
   }
 
   .header-sort-icon {
@@ -147,4 +189,14 @@ function handlePaginationChange() {
     align-items: center;
     width: 100%;
   }
+
+  .filter-container {
+    margin-top: 10px;
+    display: flex;
+    align-items: left;
+    flex-direction: row;
+    gap: 10px;
+  }
+
+
 </style>

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

@@ -5,6 +5,7 @@ import Dropdown from "../forms/Dropdown.svelte";
 import { type ComponentProps } from "svelte";
 type ArrayElement<ArrayType extends readonly unknown[]> = ArrayType extends readonly (infer ElementType)[] ? ElementType : never;
 export type Header = ArrayElement<NonNullable<ComponentProps<SimpleTable>['headers']>>;
+import Filters from "../search/Filters.svelte";
 declare const __propDef: {
     props: {
         class?: {
@@ -20,6 +21,8 @@ declare const __propDef: {
         hideRowsPerPage?: boolean | undefined;
         totalElements?: number | undefined;
         rowsPerPage?: number | undefined;
+        filters?: ComponentProps<Filters>['filters'];
+        searchBarColumns?: string[] | undefined;
     };
     events: {
         sort: CustomEvent<{

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

@@ -0,0 +1,260 @@
+<script>import Dropdown, {} from "../forms/Dropdown.svelte";
+import { GenericModes, SelectModes, StringModes } from "../../../utils/filters/filters";
+import SimpleTextField from "../../simple/forms/SimpleTextField.svelte";
+import DatePickerTextField from "../../simple/dates/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;
+let tmpFilter;
+let advancedModeOptions, advancedModeSelectedOptions;
+function initTmpFilter() {
+  tmpFilter = structuredClone(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 = [{
+        //@ts-ignore
+        value: tmpFilter.mode,
+        label: labelsMapper[tmpFilter.mode].short || tmpFilter.mode
+      }];
+    }
+  }
+}
+function closeDropDown() {
+  dropdownOpened = false;
+}
+$:
+  if (!!filter) {
+    initTmpFilter();
+    closeDropDown();
+  }
+let dispatch = createEventDispatcher();
+function handleCancelFilterClick(e) {
+  dispatch("cancel");
+}
+function handleApplyFilterClick() {
+  if (!!filter && !!tmpFilter) {
+    filter = structuredClone(tmpFilter);
+    filter.active = true;
+    dispatch("apply");
+  }
+}
+$:
+  if (!!tmpFilter) {
+    let modes;
+    if (tmpFilter.type == "string") {
+      modes = StringModes;
+    } else if (tmpFilter.type == "date") {
+      modes = GenericModes;
+    } else if (tmpFilter.type == "number") {
+      modes = GenericModes;
+    } else if (tmpFilter.type == "select") {
+      modes = SelectModes;
+    } else if (tmpFilter.type == "bool") {
+      modes = void 0;
+    }
+    if (!!modes) {
+      advancedModeOptions = modes.map((mode) => {
+        return {
+          value: mode,
+          label: labelsMapper[mode].short || mode
+        };
+      });
+    }
+  }
+$:
+  if (!tmpFilter?.advanced) {
+    advancedModeSelectedOptions = void 0;
+  }
+let dropdownOpened = false, calendarOpened = false, calendarOpened2 = false;
+function handleAdvancedModeSelection() {
+  if (!!advancedModeSelectedOptions && advancedModeSelectedOptions.length > 0 && !!tmpFilter) {
+    if (tmpFilter.type == "date")
+      tmpFilter.mode = advancedModeSelectedOptions[0].value;
+    else if (tmpFilter.type == "number")
+      tmpFilter.mode = advancedModeSelectedOptions[0].value;
+    else if (tmpFilter.type == "string")
+      tmpFilter.mode = advancedModeSelectedOptions[0].value;
+    else if (tmpFilter.type == "select")
+      tmpFilter.mode = advancedModeSelectedOptions[0].value;
+  }
+  dropdownOpened = false;
+}
+$:
+  applyFilterDisabled = !Validator.isValid(tmpFilter);
+$:
+  if (!!tmpFilter && tmpFilter.type == "bool") {
+    if (tmpFilter.value === void 0) {
+      tmpFilter.value = false;
+    }
+  }
+</script>
+
+
+{#if !!filter && !!tmpFilter}
+  <div class="filter-editor">
+    {#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>
+          <Dropdown
+            items={advancedModeOptions}
+            bind:values={advancedModeSelectedOptions}
+            on:change={handleAdvancedModeSelection}
+            bind:menuOpened={dropdownOpened}
+            openingId="advanced-filter"
+          ></Dropdown>
+        </div>
+      </div>
+    {/if}
+
+    <div class="fields" style:width="100%" on:click|stopPropagation on:keypress>
+      {#if !tmpFilter.advanced || (!!advancedModeSelectedOptions && advancedModeSelectedOptions.length > 0)}
+        {#if tmpFilter.type === "string" }
+          <SimpleTextField
+            bind:value={tmpFilter.value}
+            type="text"
+            placeholder={tmpFilter?.label}
+            --simple-textfield-width="100%"
+          ></SimpleTextField>
+        {:else if tmpFilter.type === "date" && tmpFilter.mode !== 'between'}
+          <div>
+            <DatePickerTextField
+              bind:selectedDate={tmpFilter.value}
+              openingId="advanced-filter"
+              bind:menuOpened={calendarOpened}
+              on:day-click={() => {calendarOpened = false}}
+              --simple-textfield-width="100%"
+            ></DatePickerTextField>
+          </div>
+        {:else if tmpFilter.type === "number" && tmpFilter.mode !== 'between'}
+          <div>
+            <SimpleTextField
+              bind:value={tmpFilter.value}
+              type="number"
+              placeholder={tmpFilter?.label}
+              --simple-textfield-width="100%"
+            ></SimpleTextField>
+          </div>
+        {:else if tmpFilter.type === "select"}
+          <div
+            style:width="100%"
+          >
+            <Autocomplete
+              bind:values={tmpFilter.values}
+              items={tmpFilter.items}
+              multiple
+              maxVisibleChips={2}
+              --simple-textfield-width="0px"
+              --simple-text-field-margin-left="0px"
+            ></Autocomplete>
+          </div>
+        {:else if tmpFilter.type === "date" && tmpFilter.mode === 'between'}
+          <div>
+            <DatePickerTextField
+              bind:selectedDate={tmpFilter.from}
+              openingId="advanced-filter"
+              placeholder={betweenFromLabel}
+              bind:menuOpened={calendarOpened}
+              on:day-click={() => {calendarOpened = false}}
+              --simple-textfield-width="100%"
+            ></DatePickerTextField>
+          </div>
+          <div>
+            <DatePickerTextField
+              bind:selectedDate={tmpFilter.to}
+              openingId="advanced-filter"
+              placeholder={betweenToLabel}
+              bind:menuOpened={calendarOpened2}
+              on:day-click={() => {calendarOpened2 = false}}
+              --simple-textfield-width="100%"
+            ></DatePickerTextField>
+          </div>
+        {:else if tmpFilter.type === "number" && tmpFilter.mode === 'between'}
+          <div>
+            <SimpleTextField
+              bind:value={tmpFilter.from}
+              type="number"
+              placeholder={betweenFromLabel}
+              --simple-textfield-width="100%"
+            ></SimpleTextField>
+          </div>
+          <div>
+            <SimpleTextField
+              bind:value={tmpFilter.to}
+              type="number"
+              placeholder={betweenToLabel}
+              --simple-textfield-width="100%"
+            ></SimpleTextField>
+          </div>
+        {:else if tmpFilter.type == 'bool'}
+          <div class="bool-filter">
+            <Checkbox
+              bind:value={tmpFilter.value}
+            ></Checkbox>
+            <span style:margin-left="10px">
+              {tmpFilter.desctiprion}
+            </span>
+          </div>
+        {/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>
+  </div>
+{/if}
+
+<style>
+  .filter-editor {
+    display: flex;
+    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 {
+    display: flex;
+    gap: 10px;
+    align-items: center;
+  }
+
+  .label {
+    max-width: 200px;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+
+</style>

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

@@ -0,0 +1,29 @@
+import { SvelteComponentTyped } from "svelte";
+import type { Filter } from "../../../utils/filters/filters";
+import type { LabelMapper } from "./Filters.svelte";
+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;
+    };
+    events: {
+        click: MouseEvent;
+        keypress: KeyboardEvent;
+        apply: CustomEvent<undefined>;
+        cancel: CustomEvent<undefined>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type FilterEditorProps = typeof __propDef.props;
+export type FilterEditorEvents = typeof __propDef.events;
+export type FilterEditorSlots = typeof __propDef.slots;
+export default class FilterEditor extends SvelteComponentTyped<FilterEditorProps, FilterEditorEvents, FilterEditorSlots> {
+}
+export {};