@likable-hair/svelte 3.3.24 → 3.3.26

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

@@ -1,174 +1,160 @@
-<script lang="ts">
-	import { FilterEditor, Icon } from "../../..";
-	import type { DateMode, Filter, NumberMode, SelectMode, StringMode } from "../../../utils/filters/filters";
-	import { createEventDispatcher } from "svelte"
-
-
-	export let filters: Filter[] = [],
-		lang: "it" | "en" = "en",
-		mAndDown: boolean = false,
-		updateMultiFilterValues: (filterName: string, newValue: any, newValid: boolean, mode?: NumberMode | StringMode | SelectMode | DateMode) => void;		
-
-	let selectedFilter: Filter | undefined;
-	let tmpFilters: { [filterName: string]: Filter } = filters.reduce((acc, f) => {
-    if (f.active) {
-        acc[f.name] = f; 
-    }
-    return acc;
-	}, {} as { [filterName: string]: Filter });
-
-  const dispatch = createEventDispatcher<{
-		'change': { filter: Filter }
-  }>()
-
-	type LabelMapper = {
-		[label: string]: { extended?: string; short: string };
-	};
-	
-	let labelsMapper: LabelMapper = lang == 'en' ? {
-		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" },
-	} : {
-		equal: { extended: "uguale a", short: "uguale" },
-		like: { short: "include" },
-		ilike: { short: "include" },
-		contains: { short: "contiene" },
-		greater: { short: "maggiore", extended: "maggiore di" },
-		lower: { short: "minore", extended: "minore di" },
-		between: { short: "compreso", extended: "è compreso tra" },
-		different: { short: "diverso", extended: "diverso da" },
-	};
-
-	function selectFilter(filter: Filter) {
-		selectedFilter = filter === selectedFilter ? undefined : filter;
-	}
-	
-	function handleKeyPress(event: any, filter: Filter) {
-		if (event.key === "Enter" || event.key === " ") {
-			selectFilter(filter);
-		}
-	}
-
-	function handleFilterChange() {
-		if(!!selectedFilter){
-			dispatch('change', { filter: tmpFilters[selectedFilter.name] })
-			filters = filters.map(f => {
-				if (f.name === selectedFilter?.name) {
-					return tmpFilters[selectedFilter.name]
-				}
-				return f
-			})
-		}
-	}
-
-	function isActiveFilter(filter: Filter) {
-    let newValue: any = {},
-      newValid: boolean = false
-    if(filter.type == 'select') {
-      newValue = filter.values 
-      if(!!newValue && newValue.length > 0) {
-        newValid = true
-      }
-    } else if('mode' in filter && filter.mode == 'between') {
-      newValue.to = filter.to
-      newValue.from = filter.from
-      if(!!newValue.from || !!newValue.to) {
-        newValid = true
-      }
-    } else if (filter.type == 'custom') {
-      newValue = filter.value
-			if ((Array.isArray(newValue) && newValue.length > 0) || (!Array.isArray(newValue) && !!newValue)) {
-				newValid = true;
-			}
-		} else {
-      newValue = filter.value
-      if(!!newValue) {
-        newValid = true
+<script>import { FilterEditor, Icon } from "../../..";
+import MediaQuery from "../../simple/common/MediaQuery.svelte";
+import { createEventDispatcher } from "svelte";
+export let filters = [], lang = "en", mAndDown = false, updateMultiFilterValues;
+let selectedFilter;
+let tmpFilters = filters.reduce((acc, f) => {
+  if (f.active) {
+    acc[f.name] = f;
+  }
+  return acc;
+}, {});
+const dispatch = createEventDispatcher();
+let labelsMapper = lang == "en" ? {
+  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" }
+} : {
+  equal: { extended: "uguale a", short: "uguale" },
+  like: { short: "include" },
+  ilike: { short: "include" },
+  contains: { short: "contiene" },
+  greater: { short: "maggiore", extended: "maggiore di" },
+  lower: { short: "minore", extended: "minore di" },
+  between: { short: "compreso", extended: "\xE8 compreso tra" },
+  different: { short: "diverso", extended: "diverso da" }
+};
+function selectFilter(filter) {
+  selectedFilter = filter === selectedFilter ? void 0 : filter;
+}
+function handleKeyPress(event, filter) {
+  if (event.key === "Enter" || event.key === " ") {
+    selectFilter(filter);
+  }
+}
+function handleFilterChange() {
+  if (!!selectedFilter) {
+    dispatch("change", { filter: tmpFilters[selectedFilter.name] });
+    filters = filters.map((f) => {
+      if (f.name === selectedFilter?.name) {
+        return tmpFilters[selectedFilter.name];
       }
-    }
-
-		return newValid
+      return f;
+    });
   }
-
-	function updateCustomFilterValues(filterName: string, newValue: any, newValid: boolean, mode?: NumberMode | StringMode | SelectMode | DateMode) {
-    let filter = filters.find(f => f.name === filterName)
-    if(!filter) throw new Error('cannot find filter with name ' + filterName)
-    if(filter.type != 'custom') throw new Error('filter is not custom')
-    filter.value = newValue
-    filter.active = newValid
-		updateMultiFilterValues(filterName, newValue, newValid, mode)
+}
+function isActiveFilter(filter) {
+  let newValue = {}, newValid = false;
+  if (filter.type == "select") {
+    newValue = filter.values;
+    if (!!newValue && newValue.length > 0) {
+      newValid = true;
+    }
+  } else if ("mode" in filter && filter.mode == "between") {
+    newValue.to = filter.to;
+    newValue.from = filter.from;
+    if (!!newValue.from || !!newValue.to) {
+      newValid = true;
+    }
+  } else if (filter.type == "custom") {
+    newValue = filter.value;
+    if (Array.isArray(newValue) && newValue.length > 0 || !Array.isArray(newValue) && !!newValue) {
+      newValid = true;
+    }
+  } else {
+    newValue = filter.value;
+    if (!!newValue) {
+      newValid = true;
+    }
   }
+  return newValid;
+}
+function updateCustomFilterValues(filterName, newValue, newValid, mode) {
+  let filter = filters.find((f) => f.name === filterName);
+  if (!filter)
+    throw new Error("cannot find filter with name " + filterName);
+  if (filter.type != "custom")
+    throw new Error("filter is not custom");
+  filter.value = newValue;
+  filter.active = newValid;
+  updateMultiFilterValues(filterName, newValue, newValid, mode);
+}
 </script>
 
-<div class="custom-filters-container" class:yscroll={mAndDown}>
-	<div class="filters-selection">
-		{#each filters as filter}
-			<div
-				tabindex="0"
-				role="button"
-				class="filters-selection-item"
-				class:selected={filter.name === selectedFilter?.name || isActiveFilter(filter)}
-				on:click={() => selectFilter(filter)}
-				on:keydown={(event) => handleKeyPress(event, filter)}
-				aria-pressed={filter.name === selectedFilter?.name}
-			>
-				<div class="filters-selection-title">
-					<div class="filters-selection-title-label">{filter.label}</div>
-					<Icon name="mdi-chevron-right-circle-outline" />
+<MediaQuery let:mAndDown={internalMAndDown}>
+	<div class="custom-filters-container {internalMAndDown ? 'mobile' : 'desktop'}" class:yscroll={mAndDown}>
+		<div class="filters-selection">
+			{#each filters as filter}
+				<div
+					tabindex="0"
+					role="button"
+					class="filters-selection-item"
+					class:selected={filter.name === selectedFilter?.name || isActiveFilter(filter)}
+					on:click={() => selectFilter(filter)}
+					on:keydown={(event) => handleKeyPress(event, filter)}
+					aria-pressed={filter.name === selectedFilter?.name}
+				>
+					<div class="filters-selection-title">
+						<div class="filters-selection-title-label">{filter.label}</div>
+						<Icon name="mdi-chevron-right-circle-outline" />
+					</div>
 				</div>
-			</div>
-		{/each}
-	</div>
-	
-	<div class="filters-content">
-		{#if selectedFilter}
-			<div class="filters-content-box">
-				<h2>{selectedFilter.label}</h2>	
-				{#key selectedFilter.label}			
-					<FilterEditor
-						bind:filter={selectedFilter}
-						{lang}
-						{labelsMapper}
-						editFilterMode="one-edit"
-						bind:tmpFilter={tmpFilters[selectedFilter?.name || '']}
-						mobile={mAndDown}
-						on:change={handleFilterChange}
-						--simple-textfield-border-radius= 0.5rem
-						--simple-textfield-background-color= transparent
-						--simple-textfield-box-shadow= 'inset 0 0 0 1px rgb(var(--global-color-background-500))'
-						--simple-textfield-focus-box-shadow='inset 0 0 0 2px rgb(var(--global-color-primary-500))'
-						--chip-default-color="rgb(var(--global-color-primary-foreground))"
-						--autocomplete-border-radius= 0.5rem
-						--autocomplete-border="1px solid rgb(var(--global-color-background-500))"
-						--autocomplete-focus-box-shadow="0 0 0 2px rgb(var(--global-color-primary-500))"
-						--autocomplete-padding="9.6px 16px"
-						--autocomplete-background-color="transparent"
-					>
-					<svelte:fragment slot="custom" let:filter>
-						<slot name="custom" {filter} {mAndDown} {updateCustomFilterValues}></slot>
-					</svelte:fragment>
-					</FilterEditor>
-				{/key}
-			</div>
-		{:else}
-			<div class="filters-content-box">
-				<p>{lang == 'en' ? 'Please select a filter to display content.' : 'Seleziona un filtro per mostrarne il contenuto.'}</p>
-			</div>
-		{/if}
+			{/each}
+		</div>
+		
+		<div class="filters-content">
+			{#if selectedFilter}
+				<div class="filters-content-box {internalMAndDown ? 'mobile' : 'desktop'}">
+					<h2>{selectedFilter.label}</h2>	
+					{#key selectedFilter.label}			
+						<FilterEditor
+							bind:filter={selectedFilter}
+							{lang}
+							{labelsMapper}
+							editFilterMode="one-edit"
+							bind:tmpFilter={tmpFilters[selectedFilter?.name || '']}
+							mobile={mAndDown}
+							on:change={handleFilterChange}
+							--simple-textfield-border-radius= 0.5rem
+							--simple-textfield-background-color= transparent
+							--simple-textfield-box-shadow= 'inset 0 0 0 1px rgb(var(--global-color-background-500))'
+							--simple-textfield-focus-box-shadow='inset 0 0 0 2px rgb(var(--global-color-primary-500))'
+							--chip-default-color="rgb(var(--global-color-primary-foreground))"
+							--autocomplete-border-radius= 0.5rem
+							--autocomplete-border="1px solid rgb(var(--global-color-background-500))"
+							--autocomplete-focus-box-shadow="0 0 0 2px rgb(var(--global-color-primary-500))"
+							--autocomplete-padding="9.6px 16px"
+							--autocomplete-background-color="transparent"
+						>
+						<svelte:fragment slot="custom" let:filter>
+							<slot name="custom" {filter} {mAndDown} {updateCustomFilterValues}></slot>
+						</svelte:fragment>
+						</FilterEditor>
+					{/key}
+				</div>
+			{:else}
+				<div class="filters-content-box">
+					<p>{lang == 'en' ? 'Please select a filter to display content.' : 'Seleziona un filtro per mostrarne il contenuto.'}</p>
+				</div>
+			{/if}
+		</div>
 	</div>
-</div>
+</MediaQuery>
 <style>
-.custom-filters-container {
+	.custom-filters-container {
     display: flex;
     height: 70vh;
   }
 
+	.custom-filters-container.mobile {
+		max-height: 29rem;
+	}
+
 	.yscroll {
 		overflow-y: auto;
 	}
@@ -212,6 +198,10 @@
     padding: 1rem;
   }
 
+	.filters-content-box.mobile {
+    padding: 0;
+  }
+
   .filters-content-box>h2 {
     font-size: larger;
     text-align: center;

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

@@ -1,34 +1,30 @@
+import { SvelteComponent } from "svelte";
 import type { DateMode, Filter, NumberMode, SelectMode, StringMode } from "../../../utils/filters/filters";
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
+declare const __propDef: {
+    props: {
+        filters?: Filter[] | undefined;
+        lang?: "it" | "en" | undefined;
+        mAndDown?: boolean | undefined;
+        updateMultiFilterValues: (filterName: string, newValue: any, newValid: boolean, mode?: NumberMode | StringMode | SelectMode | DateMode) => void;
     };
-    z_$$bindings?: Bindings;
-}
-declare const DynamicFilters: $$__sveltets_2_IsomorphicComponent<{
-    filters?: Filter[];
-    lang?: "it" | "en";
-    mAndDown?: boolean;
-    updateMultiFilterValues: (filterName: string, newValue: any, newValid: boolean, mode?: NumberMode | StringMode | SelectMode | DateMode) => void;
-}, {
-    change: CustomEvent<{
-        filter: Filter;
-    }>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {
-    custom: {
-        filter: Filter | undefined;
-        mAndDown: boolean;
-        updateCustomFilterValues: (filterName: string, newValue: any, newValid: boolean, mode?: NumberMode | StringMode | SelectMode | DateMode) => void;
+    events: {
+        change: CustomEvent<{
+            filter: Filter;
+        }>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        custom: {
+            filter: Filter | undefined;
+            mAndDown: boolean;
+            updateCustomFilterValues: (filterName: string, newValue: any, newValid: boolean, mode?: NumberMode | StringMode | SelectMode | DateMode) => void;
+        };
     };
-}, {}, string>;
-type DynamicFilters = InstanceType<typeof DynamicFilters>;
-export default DynamicFilters;
+};
+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,124 +1,95 @@
-<script lang="ts">
-  import type { Filter, NumberMode, SelectMode, StringMode } from "../../../utils/filters/filters";
-  import Dropdown, { type Item } from "../forms/Dropdown.svelte";
-  import { GENERIC_MODES, SELECT_MODES, STRING_MODES } from '../../../utils/filters/filters';
-  import type { DateMode } from "../../../utils/filters/filters";
-  import SimpleTextField from "../../simple/forms/SimpleTextField.svelte";
-  import DatePickerTextField from "../forms/DatePickerTextField.svelte";
-  import Validator from "../../../utils/filters/validator";
-  import Autocomplete from "../../simple/forms/Autocomplete.svelte";
-  import Checkbox from "../../simple/forms/Checkbox.svelte";
-  import type { LabelMapper } from "./Filters.svelte";
-  import Icon from "../../simple/media/Icon.svelte";
-  import ToggleList from "../forms/ToggleList.svelte";
-  import { createEventDispatcher } from "svelte";
-
-  export let filter: Filter | undefined = undefined,
-    lang: 'en' | 'it' = 'en',
-    betweenFromLabel: string = lang == 'en' ? "From" : "Da",
-    betweenToLabel: string = lang == 'en' ? "To" : "A",
-    labelsMapper: LabelMapper,
-    forceApplyValid: boolean = false,
-    editFilterMode: 'one-edit' | 'multi-edit' = 'one-edit',
-    tmpFilter: Filter | undefined = undefined,
-    mobile: boolean = false;
-
-  let advancedModeOptions: Item[],
-    advancedModeSelectedOptions: Item[] | undefined
-
-  function initTmpFilter() {
-    tmpFilter = filter === undefined ? undefined : {...filter}
-    if(!!tmpFilter && ['string', 'number', 'date', 'select'].includes(tmpFilter.type) && Object.keys(tmpFilter).includes('mode')) {
-      //@ts-ignore
-      if((tmpFilter.mode == 'between' && tmpFilter.from !== undefined && tmpFilter.to !== undefined) || tmpFilter.value !== undefined || (tmpFilter.type == 'select' && tmpFilter.values !== undefined && tmpFilter.values.length > 0)) {
-        advancedModeSelectedOptions = [{
-          //@ts-ignore
-          value: tmpFilter.mode, label: labelsMapper[tmpFilter.mode].short || tmpFilter.mode
-        }]
-      }
+<script>import Dropdown, {} from "../forms/Dropdown.svelte";
+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";
+import Autocomplete from "../../simple/forms/Autocomplete.svelte";
+import Checkbox from "../../simple/forms/Checkbox.svelte";
+import Icon from "../../simple/media/Icon.svelte";
+import ToggleList from "../forms/ToggleList.svelte";
+import { createEventDispatcher } from "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 };
+  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
+}
+function closeDropDown() {
+  dropdownOpened = false;
+}
+$:
+  if (!!filter) {
+    initTmpFilter();
+    closeDropDown();
   }
-
-  $: if(!!filter) {
-    initTmpFilter()
-    closeDropDown()
-  }
-
-  $: if(!!tmpFilter) {
-    let modes
-    if(tmpFilter.type == 'string') {
-      modes = STRING_MODES
-    } else if(tmpFilter.type == 'date') {
-      modes = GENERIC_MODES
-    } else if(tmpFilter.type == 'number') {
-      modes = GENERIC_MODES
-    } else if(tmpFilter.type == 'select') {
-      modes = SELECT_MODES
-    } else if(tmpFilter.type == 'bool') {
-      modes = undefined
+$:
+  if (!!tmpFilter) {
+    let modes;
+    if (tmpFilter.type == "string") {
+      modes = STRING_MODES;
+    } else if (tmpFilter.type == "date") {
+      modes = GENERIC_MODES;
+    } else if (tmpFilter.type == "number") {
+      modes = GENERIC_MODES;
+    } else if (tmpFilter.type == "select") {
+      modes = SELECT_MODES;
+    } else if (tmpFilter.type == "bool") {
+      modes = void 0;
     }
-
-    if(!!modes) {
-      advancedModeOptions = modes.map(mode => {
+    if (!!modes) {
+      advancedModeOptions = modes.map((mode) => {
         return {
           value: mode,
           label: labelsMapper[mode].short || mode
-        }
-      })
+        };
+      });
     }
   }
-
-  $: if(!tmpFilter?.advanced) {
-    advancedModeSelectedOptions = undefined
+$:
+  if (!tmpFilter?.advanced) {
+    advancedModeSelectedOptions = void 0;
   }
-
-  let dropdownOpened: boolean = false,
-    calendarOpened: boolean = false,
-    calendarOpened2: boolean = false
-
-  // TODO I don't like that there is a singlo dropdow to handle all filter advance mode.
-  // In some case would be necessary to handle more than one selection and this code
-  // could become non sense
-  function handleAdvancedModeSelection() {
-    if(!!advancedModeSelectedOptions && advancedModeSelectedOptions.length > 0 && !!tmpFilter) {
-      if(tmpFilter.type == 'date') tmpFilter.mode = advancedModeSelectedOptions[0].value as DateMode
-      else if(tmpFilter.type == 'number') tmpFilter.mode = advancedModeSelectedOptions[0].value as NumberMode
-      else if(tmpFilter.type == 'string') tmpFilter.mode = advancedModeSelectedOptions[0].value as StringMode
-      else if(tmpFilter.type == 'select') tmpFilter.mode = advancedModeSelectedOptions[0].value as SelectMode
-    }
-
-    dropdownOpened = false;
-    handleChangeValue()
+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;
   }
-
-  $: applyFilterDisabled = !Validator.isValid(tmpFilter) && !forceApplyValid
-
-  $: if(!!tmpFilter && tmpFilter.type == 'bool') {
-    if(tmpFilter.value === undefined) {
-      tmpFilter.value = false
+  dropdownOpened = false;
+  handleChangeValue();
+}
+$:
+  applyFilterDisabled = !Validator.isValid(tmpFilter) && !forceApplyValid;
+$:
+  if (!!tmpFilter && tmpFilter.type == "bool") {
+    if (tmpFilter.value === void 0) {
+      tmpFilter.value = false;
     }
   }
-
-  $: if(!!tmpFilter && tmpFilter.type == 'select') {
-    if(tmpFilter.values === undefined) {
-      tmpFilter.values = []
+$:
+  if (!!tmpFilter && tmpFilter.type == "select") {
+    if (tmpFilter.values === void 0) {
+      tmpFilter.values = [];
     }
   }
-
-  const dispatch = createEventDispatcher<{
-		change: Filter | undefined
-	}>()
-  
-  function handleChangeValue() {       
-   dispatch('change', tmpFilter)  
-  }
-
-
+const dispatch = createEventDispatcher();
+function handleChangeValue() {
+  dispatch("change", tmpFilter);
+}
 </script>
 
 
@@ -201,6 +172,7 @@
               --simple-text-field-margin-left="0px"
               mobileDrawer={mobile}
               placeholder={editFilterMode == 'one-edit' ? tmpFilter?.label : undefined}
+              minWidth={''}
               on:change={handleChangeValue}
             ></Autocomplete>
           </div>