@likable-hair/svelte 3.3.21 → 3.3.22

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

@@ -1,88 +1,109 @@
-<script>import { FilterEditor, Icon } from "../../..";
-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 f;
-    });
-  }
-}
-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;
+<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; 
     }
-  } else {
-    newValue = filter.value;
-    if (!!newValue) {
-      newValid = true;
+    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
+      }
     }
+
+		return newValid
+  }
+
+	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)
   }
-  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}>

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

@@ -1,30 +1,34 @@
-import { SvelteComponent } from "svelte";
 import type { DateMode, Filter, NumberMode, SelectMode, StringMode } from "../../../utils/filters/filters";
-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;
+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;
     };
-    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;
-        };
-    };
-};
-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> {
+    z_$$bindings?: Bindings;
 }
-export {};
+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;
+    };
+}, {}, string>;
+type DynamicFilters = InstanceType<typeof DynamicFilters>;
+export default DynamicFilters;

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

@@ -1,95 +1,124 @@
-<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
-      }];
+<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
+        }]
+      }
     }
   }
-}
-function closeDropDown() {
-  dropdownOpened = false;
-}
-$:
-  if (!!filter) {
-    initTmpFilter();
-    closeDropDown();
+
+
+  function closeDropDown() {
+    dropdownOpened = false
   }
-$:
-  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(!!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 (!!modes) {
-      advancedModeOptions = modes.map((mode) => {
+
+    if(!!modes) {
+      advancedModeOptions = modes.map(mode => {
         return {
           value: mode,
           label: labelsMapper[mode].short || mode
-        };
-      });
+        }
+      })
     }
   }
-$:
-  if (!tmpFilter?.advanced) {
-    advancedModeSelectedOptions = void 0;
+
+  $: if(!tmpFilter?.advanced) {
+    advancedModeSelectedOptions = undefined
   }
-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;
+
+  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()
   }
-  dropdownOpened = false;
-  handleChangeValue();
-}
-$:
-  applyFilterDisabled = !Validator.isValid(tmpFilter) && !forceApplyValid;
-$:
-  if (!!tmpFilter && tmpFilter.type == "bool") {
-    if (tmpFilter.value === void 0) {
-      tmpFilter.value = false;
+
+  $: applyFilterDisabled = !Validator.isValid(tmpFilter) && !forceApplyValid
+
+  $: if(!!tmpFilter && tmpFilter.type == 'bool') {
+    if(tmpFilter.value === undefined) {
+      tmpFilter.value = false
     }
   }
-$:
-  if (!!tmpFilter && tmpFilter.type == "select") {
-    if (tmpFilter.values === void 0) {
-      tmpFilter.values = [];
+
+  $: if(!!tmpFilter && tmpFilter.type == 'select') {
+    if(tmpFilter.values === undefined) {
+      tmpFilter.values = []
     }
   }
-const dispatch = createEventDispatcher();
-function handleChangeValue() {
-  dispatch("change", tmpFilter);
-}
+
+  const dispatch = createEventDispatcher<{
+		change: Filter | undefined
+	}>()
+  
+  function handleChangeValue() {       
+   dispatch('change', tmpFilter)  
+  }
+
+
 </script>
 
 

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

@@ -1,38 +1,42 @@
-import { SvelteComponent } 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;
-        betweenFromLabel?: string | undefined;
-        betweenToLabel?: string | undefined;
-        labelsMapper: LabelMapper;
-        forceApplyValid?: boolean | undefined;
-        editFilterMode?: "one-edit" | "multi-edit" | undefined;
-        tmpFilter?: Filter | undefined;
-        mobile?: boolean | undefined;
+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;
     };
-    events: {
-        click: MouseEvent;
-        keypress: KeyboardEvent;
-        change: CustomEvent<Filter | undefined>;
-    } & {
-        [evt: string]: CustomEvent<any>;
+    z_$$bindings?: Bindings;
+}
+declare const FilterEditor: $$__sveltets_2_IsomorphicComponent<{
+    filter?: Filter | undefined;
+    lang?: "en" | "it";
+    betweenFromLabel?: string;
+    betweenToLabel?: string;
+    labelsMapper: LabelMapper;
+    forceApplyValid?: boolean;
+    editFilterMode?: "one-edit" | "multi-edit";
+    tmpFilter?: Filter | undefined;
+    mobile?: boolean;
+}, {
+    click: MouseEvent;
+    keypress: KeyboardEvent;
+    change: CustomEvent<Filter | undefined>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    custom: {
+        filter: Filter | undefined;
     };
-    slots: {
-        custom: {
-            filter: Filter | undefined;
-        };
-        'filter-actions': {
-            applyFilterDisabled: boolean;
-            filter: Filter | undefined;
-        };
+    'filter-actions': {
+        applyFilterDisabled: boolean;
+        filter: Filter | undefined;
     };
-};
-export type FilterEditorProps = typeof __propDef.props;
-export type FilterEditorEvents = typeof __propDef.events;
-export type FilterEditorSlots = typeof __propDef.slots;
-export default class FilterEditor extends SvelteComponent<FilterEditorProps, FilterEditorEvents, FilterEditorSlots> {
-}
-export {};
+}, {}, string>;
+type FilterEditor = InstanceType<typeof FilterEditor>;
+export default FilterEditor;