@likable-hair/svelte 4.2.5 → 4.3.0

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

@@ -1,48 +1,108 @@
-<script lang="ts" generics="Data">import '../../../css/main.css';
-import './GlobalSearchTextField.css';
-import Dialog from '../../simple/dialogs/Dialog.svelte';
-import { onMount } from 'svelte';
-import SearchBar from './SearchBar.svelte';
-import Keyboarder, {} from '../../../utils/keyboarder';
-import SearchResults, {} from './SearchResults.svelte';
-let { searchButtonText = "Search", searchDialogOpened = $bindable(false), transitionDuration = ".8s", searcher = () => Promise.resolve([]), class: clazz = {}, ontoggleSearchDialog, searchBarSnippet, searchButtonIconSnippet, searchButtonShortcutSnippet, searchButtonSnippet, searchButtonTextSnippet, searchResultsSnippet, onselect, } = $props();
-let searchBarInput = $state(), searchText = $state(), searchResults = $state(), searchLoading = $state(false), searchBarFocused = $state(false);
-onMount(() => {
-    let handler = (params) => {
-        if ((params.meta || params.ctrl) && params.key == 'k') {
-            toggleSearchDialog();
-        }
-    };
-    Keyboarder.on(handler);
+<script lang="ts" generics="Data">
+  import '../../../css/main.css'
+  import './GlobalSearchTextField.css'
+  import Dialog from '../../simple/dialogs/Dialog.svelte'
+  import { onMount, type ComponentProps, type Snippet } from 'svelte';
+  import SearchBar from './SearchBar.svelte';
+  import Keyboarder, { type CallbackFunction } from '../../../utils/keyboarder';
+  import SearchResults, { type Result } from './SearchResults.svelte'
+
+  interface Props {
+    searchButtonText?: string;
+    searchDialogOpened?: boolean;
+    transitionDuration?: string;
+    class?: {
+      container?: string,
+      button?: string,
+      shortcut?: string
+    }
+    searcher?: (params: { searchText: string }) => Promise<Result<Data>[] | undefined>;
+    ontoggleSearchDialog?: (event: {
+      detail: {
+        opened: boolean
+      }
+    }) => void
+    searchButtonSnippet?: Snippet<[{
+      toggleSearchDialog: typeof toggleSearchDialog
+    }]>
+    searchButtonIconSnippet?: Snippet<[{
+      toggleSearchDialog: typeof toggleSearchDialog
+    }]>
+    searchButtonTextSnippet?: Snippet<[]>
+    searchButtonShortcutSnippet?: Snippet<[]>
+    searchBarSnippet?: Snippet<[{
+      searchBarInput: typeof searchBarInput,
+      searchText: typeof searchText,
+      search: typeof search,
+    }]>
+    searchResultsSnippet?: Snippet<[{
+      searchLoading: typeof searchLoading,
+      searchResults: typeof searchResults,
+    }]>
+    onselect?: ComponentProps<typeof SearchResults<Data>>['onselect']
+  }
+
+  let {
+    searchButtonText = "Search",
+    searchDialogOpened = $bindable(false),
+    transitionDuration = ".8s",
+    searcher = () => Promise.resolve([]),
+    class: clazz = {},
+    ontoggleSearchDialog,
+    searchBarSnippet,
+    searchButtonIconSnippet,
+    searchButtonShortcutSnippet,
+    searchButtonSnippet,
+    searchButtonTextSnippet,
+    searchResultsSnippet,
+    onselect,
+  }: Props = $props();
+
+  let searchBarInput: HTMLElement | undefined = $state(),
+    searchText: string | undefined = $state(),
+    searchResults: Result<Data>[] | undefined = $state(),
+    searchLoading: boolean = $state(false),
+    searchBarFocused: boolean = $state(false)
+
+  onMount(() => {
+    let handler: CallbackFunction = (params) => {
+      if((params.meta || params.ctrl) && params.key == 'k') {
+        toggleSearchDialog()
+      }
+    }
+
+    Keyboarder.on(handler)
+
     return () => {
-        Keyboarder.off(handler);
-    };
-});
-function handleKeydown(event) {
-    if (event.key == 'ArrowDown' || event.key == 'ArrowUp')
-        event.preventDefault();
-}
-function toggleSearchDialog() {
-    searchDialogOpened = !searchDialogOpened;
-    if (searchDialogOpened)
-        searchBarInput?.focus();
-    if (ontoggleSearchDialog) {
-        ontoggleSearchDialog({
-            detail: {
-                opened: searchDialogOpened
-            }
-        });
+      Keyboarder.off(handler)
     }
-}
-async function search() {
-    if (!!searchText) {
-        searchLoading = true;
-        searchResults = await searcher({
-            searchText
-        });
-        searchLoading = false;
+  })
+
+  function handleKeydown(event: KeyboardEvent) {
+    if(event.key == 'ArrowDown' || event.key == 'ArrowUp') event.preventDefault()
+  }
+
+  function toggleSearchDialog()  {
+    searchDialogOpened = !searchDialogOpened
+    if(searchDialogOpened) searchBarInput?.focus()
+    if(ontoggleSearchDialog) {
+      ontoggleSearchDialog({
+        detail: {
+          opened: searchDialogOpened
+        }
+      })
     }
-}
+  }
+
+  async function search() {
+    if(!!searchText) {
+      searchLoading = true
+      searchResults = await searcher({
+        searchText
+      })
+      searchLoading = false
+    }
+  }
 </script>
 
 <div class={clazz.container || ''}>

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

@@ -1,9 +1,9 @@
 import '../../../css/main.css';
 import './GlobalSearchTextField.css';
-import { type Snippet } from 'svelte';
-import { type Result } from './SearchResults.svelte';
-declare class __sveltets_Render<Data> {
-    props(): {
+import { type ComponentProps, type Snippet } from 'svelte';
+import SearchResults, { type Result } from './SearchResults.svelte';
+declare function $$render<Data>(): {
+    props: {
         searchButtonText?: string;
         searchDialogOpened?: boolean;
         transitionDuration?: string;
@@ -11,40 +11,43 @@ declare class __sveltets_Render<Data> {
             container?: string;
             button?: string;
             shortcut?: string;
-        } | undefined;
-        searcher?: ((params: {
+        };
+        searcher?: (params: {
             searchText: string;
-        }) => Promise<Result<Data>[] | undefined>) | undefined;
-        ontoggleSearchDialog?: ((event: {
+        }) => Promise<Result<Data>[] | undefined>;
+        ontoggleSearchDialog?: (event: {
             detail: {
                 opened: boolean;
             };
-        }) => void) | undefined;
+        }) => void;
         searchButtonSnippet?: Snippet<[{
             toggleSearchDialog: () => void;
-        }]> | undefined;
+        }]>;
         searchButtonIconSnippet?: Snippet<[{
             toggleSearchDialog: () => void;
-        }]> | undefined;
+        }]>;
         searchButtonTextSnippet?: Snippet<[]>;
         searchButtonShortcutSnippet?: Snippet<[]>;
         searchBarSnippet?: Snippet<[{
             searchBarInput: HTMLElement | undefined;
             searchText: string | undefined;
             search: () => Promise<void>;
-        }]> | undefined;
+        }]>;
         searchResultsSnippet?: Snippet<[{
             searchLoading: boolean;
             searchResults: Result<Data>[] | undefined;
-        }]> | undefined;
-        onselect?: ((event: {
-            detail: {
-                element: import("../../simple/lists/SelectableVerticalList.svelte").Element<Data>;
-            };
-        }) => void) | undefined;
+        }]>;
+        onselect?: ComponentProps<typeof SearchResults<Data>>["onselect"];
     };
-    events(): {};
-    slots(): {};
+    exports: {};
+    bindings: "searchDialogOpened";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<Data> {
+    props(): ReturnType<typeof $$render<Data>>['props'];
+    events(): ReturnType<typeof $$render<Data>>['events'];
+    slots(): ReturnType<typeof $$render<Data>>['slots'];
     bindings(): "searchDialogOpened";
     exports(): {};
 }

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

@@ -1,133 +1,187 @@
-<script lang="ts">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 SelectableVerticalList, {} from "../../simple/lists/SelectableVerticalList.svelte";
-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";
-import ToggleList from "../forms/ToggleList.svelte";
-import lodash from 'lodash';
-let { filter = $bindable(), lang = 'en', backIcon = "mdi-arrow-left", betweenFromLabel = lang === 'en' ? "From" : "Da", betweenToLabel = lang === 'en' ? "To" : "A", labelsMapper, forceApplyValid = false, tmpFilter = $bindable(), onbackClick, onkeypress, onclick: onclickInternal, onclose, customSnippet, filterActionsSnippet, titleSnippet, } = $props();
-let step = $state();
-function initTmpFilter() {
-    tmpFilter = filter === undefined ? undefined : lodash.cloneDeep(filter);
-    if (!!tmpFilter && tmpFilter.advanced) {
-        if (['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)) {
-                step = 'editor';
-                //@ts-ignore
-                advancedModeSelectedOption = tmpFilter.mode;
-            }
-            else {
-                step = 'advanced';
-            }
-        }
-        else {
-            step = 'advanced';
+<script lang="ts">
+  import type { Filter, NumberMode, SelectMode, StringMode } from "../../../utils/filters/filters";
+  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 SelectableVerticalList, { type Element } from "../../simple/lists/SelectableVerticalList.svelte";
+  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";
+  import type { LabelMapper } from "./Filters.svelte";
+  import ToggleList from "../forms/ToggleList.svelte";
+  import type { KeyboardEventHandler, MouseEventHandler } from "svelte/elements";
+  import type { ComponentProps, Snippet } from "svelte";
+  import lodash from 'lodash'
+
+    interface Props {
+    filter?: Filter;
+    lang?: 'it' | 'en';
+    backIcon?: string;
+    betweenFromLabel?: string;
+    betweenToLabel?: string;
+    labelsMapper: LabelMapper;
+    forceApplyValid?: boolean;
+    tmpFilter?: Filter;
+    onbackClick?: () => void
+    onkeypress?: KeyboardEventHandler<HTMLDivElement>
+    onclick?: MouseEventHandler<HTMLDivElement>
+    onclose?: ComponentProps<typeof Autocomplete>['onclose']
+    titleSnippet?: Snippet<[]>
+    customSnippet?: Snippet<[{
+      filter: Filter
+    }]>
+    filterActionsSnippet?: Snippet<[{
+      filter: Filter,
+      applyFilterDisabled: typeof applyFilterDisabled
+    }]>
+  }
+
+  let {
+    filter = $bindable(),
+    lang = 'en',
+    backIcon = "mdi-arrow-left",
+    betweenFromLabel = lang === 'en' ? "From" : "Da",
+    betweenToLabel = lang === 'en' ? "To" : "A",
+    labelsMapper,
+    forceApplyValid = false,
+    tmpFilter = $bindable(),
+    onbackClick,
+    onkeypress,
+    onclick: onclickInternal,
+    onclose,
+    customSnippet,
+    filterActionsSnippet,
+    titleSnippet,
+  }: Props = $props();
+
+  let step: 'advanced' | 'editor' | undefined = $state()
+
+  function initTmpFilter() {
+    tmpFilter = filter === undefined ? undefined : lodash.cloneDeep(filter)
+    if(!!tmpFilter && tmpFilter.advanced) {
+      if(['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)) {
+          step = 'editor'
+          //@ts-ignore
+          advancedModeSelectedOption = tmpFilter.mode
+        } else {
+          step = 'advanced'
         }
+      } else {
+        step = 'advanced'
+      }
+    } else {
+      step = "editor"
     }
-    else {
-        step = "editor";
-    }
-}
-let advancedModeOptions = $state(), advancedModeSelectedOption = $state();
-let calendarOpened = $state(false), calendarOpened2 = $state(false);
-// TODO I don't like that there is a single dropdown 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 (!!advancedModeSelectedOption && !!tmpFilter) {
-        if (tmpFilter.type == 'date')
-            tmpFilter.mode = advancedModeSelectedOption;
-        else if (tmpFilter.type == 'string')
-            tmpFilter.mode = advancedModeSelectedOption;
-        else if (tmpFilter.type == 'number')
-            tmpFilter.mode = advancedModeSelectedOption;
-        else if (tmpFilter.type == 'select')
-            tmpFilter.mode = advancedModeSelectedOption;
-        step = 'editor';
-        canRenderOptions = false;
+  }
+
+
+
+  let advancedModeOptions: Element[] | undefined = $state(),
+    advancedModeSelectedOption: string | undefined = $state()
+
+  let calendarOpened: boolean = $state(false),
+    calendarOpened2: boolean = $state(false)
+
+  // TODO I don't like that there is a single dropdown 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(!!advancedModeSelectedOption && !!tmpFilter) {
+      if(tmpFilter.type == 'date') tmpFilter.mode = advancedModeSelectedOption as DateMode
+      else if(tmpFilter.type == 'string') tmpFilter.mode = advancedModeSelectedOption as StringMode
+      else if(tmpFilter.type == 'number') tmpFilter.mode = advancedModeSelectedOption as NumberMode
+      else if(tmpFilter.type == 'select') tmpFilter.mode = advancedModeSelectedOption as SelectMode
+
+      step = 'editor'
+      canRenderOptions = false
     }
-}
-let canRenderOptions = $state(true);
-let applyFilterDisabled = $derived(!Validator.isValid(tmpFilter) && !forceApplyValid);
-let lastSyncedFilter = $state(filter);
-$effect(() => {
-    if (!tmpFilter || !step || (!!filter && !lodash.isEqual($state.snapshot(filter), $state.snapshot(lastSyncedFilter)))) {
-        initTmpFilter();
-        lastSyncedFilter = filter;
+  }
+
+  let canRenderOptions: boolean = $state(true)
+
+
+  let applyFilterDisabled = $derived(!Validator.isValid(tmpFilter) && !forceApplyValid)
+
+  let lastSyncedFilter = $state(filter)
+  $effect(() => {
+    if(!tmpFilter || !step || (!!filter && !lodash.isEqual($state.snapshot(filter), $state.snapshot(lastSyncedFilter)))) {
+      initTmpFilter()
+      lastSyncedFilter = filter
     }
-    if (!!tmpFilter) {
-        if (tmpFilter.type == 'bool') {
-            if (tmpFilter.value === undefined) {
-                tmpFilter.value = false;
-            }
-        }
-        else if (tmpFilter.type == 'select') {
-            if (tmpFilter.values === undefined) {
-                tmpFilter.values = [];
-            }
-        }
-        else if (tmpFilter.type == 'date' && tmpFilter.mode == 'between' && !tmpFilter.betweenModeSingleTextField) {
-            if (!tmpFilter.from)
-                tmpFilter.from = new Date();
-            if (!tmpFilter.to)
-                tmpFilter.to = new Date();
-        }
-        if (!tmpFilter.advanced) {
-            advancedModeSelectedOption = undefined;
-        }
-        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;
+
+    if(!!tmpFilter) {
+      if(tmpFilter.type == 'bool') {
+        if(tmpFilter.value === undefined) {
+          tmpFilter.value = false
         }
-        if (!!modes) {
-            advancedModeOptions = modes.map(mode => {
-                return {
-                    title: labelsMapper[mode].short || mode,
-                    name: mode
-                };
-            });
+      } else if(tmpFilter.type == 'select') {
+        if(tmpFilter.values === undefined) {
+          tmpFilter.values = []
         }
+      } else if(tmpFilter.type == 'date' && tmpFilter.mode == 'between' && !tmpFilter.betweenModeSingleTextField) {
+        if(!tmpFilter.from) tmpFilter.from = new Date()
+        if(!tmpFilter.to) tmpFilter.to = new Date()
+      }
+
+      if(!tmpFilter.advanced) {
+        advancedModeSelectedOption = undefined
+      }
+
+      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
+      }
+  
+      if(!!modes) {
+        advancedModeOptions = modes.map(mode => {
+          return {
+            title: labelsMapper[mode].short || mode,
+            name: mode
+          }
+        })
+      }
     }
-});
-function handleModeBackClick() {
-    if (onbackClick) {
-        onbackClick();
-    }
-}
-function handleEditorBackCLick() {
-    if (!!tmpFilter && !tmpFilter.advanced) {
-        if (onbackClick) {
-            onbackClick();
-        }
+  })
+
+  function handleModeBackClick() {
+    if(onbackClick) {
+      onbackClick()
     }
-    else {
-        step = 'advanced';
-        advancedModeSelectedOption = undefined;
-        setTimeout(() => {
-            canRenderOptions = true;
-        }, 100);
+  }
+
+  function handleEditorBackCLick() {
+    if(!!tmpFilter && !tmpFilter.advanced) {
+      if(onbackClick) {
+        onbackClick()
+      }
+    } else {
+      step = 'advanced'
+      advancedModeSelectedOption = undefined
+      setTimeout(() => {
+        canRenderOptions = true
+      }, 100)
     }
-}
-function onclick(event) {
-    event.stopPropagation();
-    if (onclickInternal) {
-        onclickInternal(event);
+  }
+
+  function onclick(event: MouseEvent & {
+      currentTarget: EventTarget & HTMLDivElement;
+  }) {
+    event.stopPropagation()
+    if(onclickInternal) {
+      onclickInternal(event)
     }
-}
+  }
 </script>
 
 <div class="container">