@likable-hair/svelte 4.2.5 → 4.3.0

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

@@ -1,88 +1,137 @@
-<script lang="ts">import "../../../css/main.css";
-import "./QuickFilters.css";
-import { ENGLISH_LABELS_MAPPER, ITALIAN_LABELS_MAPPER, } from "../../../utils/filters/filters";
-import Icon from "../../simple/media/Icon.svelte";
-import Menu from "../../simple/common/Menu.svelte";
-import FilterEditor from "./FilterEditor.svelte";
-import Button from "../../simple/buttons/Button.svelte";
-import MediaQuery from "../../simple/common/MediaQuery.svelte";
-import Drawer from "../../simple/navigation/Drawer.svelte";
-let { filters = $bindable(), buttonLabelSnippet, onapply, lang, } = $props();
-let activators = $state({}), openMenus = $state({});
-function handleClick(params) {
+<script lang="ts">
+  import "../../../css/main.css";
+  import "./QuickFilters.css";
+  import {
+    ENGLISH_LABELS_MAPPER,
+    ITALIAN_LABELS_MAPPER,
+    type Filter,
+  } from "../../../utils/filters/filters";
+  import Icon from "../../simple/media/Icon.svelte";
+  import type { Snippet } from "svelte";
+  import Menu from "../../simple/common/Menu.svelte";
+  import FilterEditor from "./FilterEditor.svelte";
+  import Button from "../../simple/buttons/Button.svelte";
+  import MediaQuery from "../../simple/common/MediaQuery.svelte";
+  import Drawer from "../../simple/navigation/Drawer.svelte";
+
+  type QuickFilter = Filter & {
+    icon?: string;
+  };
+
+  type Props = {
+    filters?: QuickFilter[];
+    lang?: "it" | "en";
+    onapply?: (params: { filter: QuickFilter; filters: QuickFilter[] }) => void;
+    buttonLabelSnippet?: Snippet<
+      [
+        {
+          filter: QuickFilter;
+        },
+      ]
+    >;
+  };
+
+  let {
+    filters = $bindable(),
+    buttonLabelSnippet,
+    onapply,
+    lang,
+  }: Props = $props();
+
+  let activators: Record<string, HTMLElement> = $state({}),
+    openMenus: Record<string, boolean> = $state({});
+
+  function handleClick(params: { index: number }) {
     if (filters) {
-        let filter = filters[params.index];
-        if (filter.type == 'bool') {
-            filter.value = !filter.value;
-            handleApplyFilter(params);
-        }
-        else {
-            openMenus[filter.name] = true;
-        }
+      let filter = filters[params.index]
+
+      if (filter.type == 'bool') {
+        filter.value = !filter.value
+        handleApplyFilter(params)
+      } else {
+        openMenus[filter.name] = true
+      }
     }
-}
-function handleApplyFilter(params) {
+  }
+
+  function handleApplyFilter(params: { index: number }) {
     if (!!filters) {
-        filters[params.index].active = isActiveFilter(params);
-        openMenus[filters[params.index].name] = false;
-        onapply?.({ filter: filters[params.index], filters: filters || [] });
+      filters[params.index].active = isActiveFilter(params);
+      openMenus[filters[params.index].name] = false;
+      onapply?.({ filter: filters[params.index], filters: filters || [] });
     }
-}
-function handleClearFilter(params) {
+  }
+
+  function handleClearFilter(params: { index: number }) {
     if (!!filters) {
-        let filter = filters[params.index];
-        if (filter.type == 'string' ||
-            filter.type == 'bool' ||
-            filter.type == 'choice' ||
-            filter.type == 'custom' ||
-            filter.type == 'multiString') {
-            filter.value = undefined;
-        }
-        else if (filter.type == 'select') {
-            filter.values = undefined;
-        }
-        else if (filter.type == 'number' ||
-            filter.type == 'date') {
-            if (filter.mode == 'between') {
-                filter.from = undefined;
-                filter.to = undefined;
-            }
-            else if (filter.mode == 'equal' ||
-                filter.mode == 'greater' ||
-                filter.mode == 'lower') {
-                filter.value = undefined;
-            }
+      let filter = filters[params.index]
+      
+      if (
+        filter.type == 'string' ||
+        filter.type == 'bool' ||
+        filter.type == 'choice' || 
+        filter.type == 'custom' ||
+        filter.type == 'multiString'
+      ) {
+        filter.value = undefined
+      }
+      else if (filter.type == 'select') {
+        filter.values = undefined
+      }
+      else if (
+        filter.type == 'number' ||
+        filter.type == 'date'
+      ) {
+        if (filter.mode == 'between') {
+          filter.from = undefined
+          filter.to = undefined
+        } else if (
+          filter.mode == 'equal' ||
+          filter.mode == 'greater' ||
+          filter.mode == 'lower'
+        ) {
+          filter.value = undefined
         }
-        handleApplyFilter(params);
+      }
+
+      handleApplyFilter(params)
     }
-}
-function isActiveFilter(params) {
+  }
+
+  function isActiveFilter(params: { index: number }): boolean {
     if (filters) {
-        let filter = filters[params.index];
-        if (filter.type == 'string' ||
-            filter.type == 'bool' ||
-            filter.type == 'choice' ||
-            filter.type == 'custom' ||
-            filter.type == 'multiString') {
-            return !!filter.value && filter.value != undefined;
-        }
-        else if (filter.type == 'select') {
-            return !!filter.values?.length;
-        }
-        else if (filter.type == 'number' ||
-            filter.type == 'date') {
-            if (filter.mode == 'between') {
-                return filter.from != undefined || filter.to != undefined;
-            }
-            else if (filter.mode == 'equal' ||
-                filter.mode == 'greater' ||
-                filter.mode == 'lower') {
-                return filter.value != undefined;
-            }
+      let filter = filters[params.index]
+  
+      if (
+        filter.type == 'string' ||
+        filter.type == 'bool' ||
+        filter.type == 'choice' || 
+        filter.type == 'custom' ||
+        filter.type == 'multiString'
+      ) {
+        return !!filter.value && filter.value != undefined
+      }
+      else if (filter.type == 'select') {
+        return !!filter.values?.length
+      }
+      else if (
+        filter.type == 'number' ||
+        filter.type == 'date'
+      ) {
+        if (filter.mode == 'between') {
+          return filter.from != undefined || filter.to != undefined
+        } else if (
+          filter.mode == 'equal' ||
+          filter.mode == 'greater' ||
+          filter.mode == 'lower'
+        ) {
+          return filter.value != undefined
         }
+      }
     }
-    return false;
-}
+
+    return false
+  }
 </script>
 
 <div class="quick-filters-container">

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

@@ -1,6 +1,45 @@
-<script lang="ts">import "../../../css/main.css";
-import "./SearchBar.css";
-let { input = $bindable(undefined), value = $bindable(undefined), placeholder = undefined, class: clazz = {}, onblur, onchange, onfocus, oninput, onkeydown, iconSnippet, inputSnippet, } = $props();
+<script lang="ts">
+  import type {
+    ChangeEventHandler,
+    FocusEventHandler,
+    FormEventHandler,
+    KeyboardEventHandler,
+  } from "svelte/elements";
+  import "../../../css/main.css";
+  import "./SearchBar.css";
+  import type { Snippet } from "svelte";
+
+  interface Props {
+    input?: HTMLElement;
+    value?: string;
+    placeholder?: string;
+    class?: {
+      container?: string;
+      icon?: string;
+      input?: string;
+    };
+    oninput?: FormEventHandler<HTMLInputElement>;
+    onchange?: ChangeEventHandler<HTMLInputElement>;
+    onkeydown?: KeyboardEventHandler<HTMLInputElement>;
+    onfocus?: FocusEventHandler<HTMLInputElement>;
+    onblur?: FocusEventHandler<HTMLInputElement>;
+    iconSnippet?: Snippet<[]>;
+    inputSnippet?: Snippet<[]>;
+  }
+
+  let {
+    input = $bindable(undefined),
+    value = $bindable(undefined),
+    placeholder = undefined,
+    class: clazz = {},
+    onblur,
+    onchange,
+    onfocus,
+    oninput,
+    onkeydown,
+    iconSnippet,
+    inputSnippet,
+  }: Props = $props();
 </script>
 
 <div class="search-bar-container {clazz.container}">

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

@@ -1,10 +1,53 @@
-<script lang="ts" module>export {};
+<script lang="ts" module>
+  export type Result<Data = Record<string, any>> = {
+    title: string
+    name: string | number,
+    subtitle?: string
+    url?: string,
+    data?: Data
+  };
 </script>
 
-<script lang="ts" generics="Data">import '../../../css/main.css';
-import './SearchResults.css';
-import SelectableVerticalList from "../../simple/lists/SelectableVerticalList.svelte";
-let { noDataText = "Sorry, nothing found", loadingText = "Searching for references ...", results = $bindable([]), loading = false, footer = true, activeKeyboard = false, class: clazz = {}, footerSnippet, loadingSnippet, noDataSnippet, onfocus, onselect, } = $props();
+<script lang="ts" generics="Data">
+  import '../../../css/main.css'
+  import './SearchResults.css'
+  import SelectableVerticalList from "../../simple/lists/SelectableVerticalList.svelte";
+  import type { ComponentProps, Snippet } from 'svelte';
+
+  interface Props {
+    noDataText?: string;
+    loadingText?: string;
+    results?: Result<Data>[];
+    loading?: boolean;
+    footer?: boolean;
+    activeKeyboard?: boolean;
+    class?: {
+      container?: string,
+      loading?: string,
+      noData?: string,
+      results?: string
+    }
+    loadingSnippet?: Snippet<[]>
+    noDataSnippet?: Snippet<[]>
+    footerSnippet?: Snippet<[]>
+    onfocus?: ComponentProps<typeof SelectableVerticalList<Data>>['onfocus']
+    onselect?: ComponentProps<typeof SelectableVerticalList<Data>>['onselect']
+  }
+
+  let {
+    noDataText = "Sorry, nothing found",
+    loadingText = "Searching for references ...",
+    results = $bindable([]),
+    loading = false,
+    footer = true,
+    activeKeyboard = false,
+    class: clazz = {},
+    footerSnippet,
+    loadingSnippet,
+    noDataSnippet,
+    onfocus,
+    onselect,
+  }: Props = $props();
 </script>
 
 <div 

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

@@ -7,12 +7,13 @@ export type Result<Data = Record<string, any>> = {
 };
 import '../../../css/main.css';
 import './SearchResults.css';
-import type { Snippet } from 'svelte';
-declare class __sveltets_Render<Data> {
-    props(): {
+import SelectableVerticalList from "../../simple/lists/SelectableVerticalList.svelte";
+import type { ComponentProps, Snippet } from 'svelte';
+declare function $$render<Data>(): {
+    props: {
         noDataText?: string;
         loadingText?: string;
-        results?: Result<Data>[] | undefined;
+        results?: Result<Data>[];
         loading?: boolean;
         footer?: boolean;
         activeKeyboard?: boolean;
@@ -21,23 +22,22 @@ declare class __sveltets_Render<Data> {
             loading?: string;
             noData?: string;
             results?: string;
-        } | undefined;
+        };
         loadingSnippet?: Snippet<[]>;
         noDataSnippet?: Snippet<[]>;
         footerSnippet?: Snippet<[]>;
-        onfocus?: ((event: {
-            detail: {
-                element: import("../../simple/lists/SelectableVerticalList.svelte").Element<Data>;
-            };
-        }) => void) | undefined;
-        onselect?: ((event: {
-            detail: {
-                element: import("../../simple/lists/SelectableVerticalList.svelte").Element<Data>;
-            };
-        }) => void) | undefined;
+        onfocus?: ComponentProps<typeof SelectableVerticalList<Data>>["onfocus"];
+        onselect?: ComponentProps<typeof SelectableVerticalList<Data>>["onselect"];
     };
-    events(): {};
-    slots(): {};
+    exports: {};
+    bindings: "results";
+    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(): "results";
     exports(): {};
 }

package/dist/components/layouts/CollapsibleSideBarLayout.svelte

@@ -1,37 +1,113 @@
-<script lang="ts">import "../../css/main.css";
-import "./CollapsibleSideBarLayout.css";
-import MediaQuery from "../simple/common/MediaQuery.svelte";
-import Icon from "../simple/media/Icon.svelte";
-import {} from "../simple/lists/ColorInvertedSelector.svelte";
-import { writable } from "svelte/store";
-import {} from "svelte";
-import mediaQuery from "../../stores/mediaQuery";
-let { drawerOpened = $bindable(false), sidebarExpanded = $bindable(false), class: clazz = {}, ondrawerChange, onsidebarToggle, headerSnippet, innerMenuSnippet, sidebarSnippet, logoSnippet, menuSnippet, userSnippet, children, } = $props();
-const sidebarPinned = writable(false);
-let headerElement;
-function toggleMenu() {
+<script lang="ts">
+  import "../../css/main.css";
+  import "./CollapsibleSideBarLayout.css";
+  import MediaQuery from "../simple/common/MediaQuery.svelte";
+  import Icon from "../simple/media/Icon.svelte";
+  import { type Option } from "../simple/lists/ColorInvertedSelector.svelte";
+  import { writable } from "svelte/store";
+  import { type Snippet } from "svelte";
+  import mediaQuery from "../../stores/mediaQuery";
+
+  interface Props {
+    drawerOpened?: boolean;
+    sidebarExpanded?: boolean;
+    class?: {
+      container?: string;
+      header?: string;
+      mainSection?: string;
+      overlay?: string;
+    };
+    ondrawerChange?: (event: {
+      detail: {
+        opened: boolean;
+      };
+    }) => void;
+    onmenuSelect?: (event: {
+      detail: {
+        option: Option;
+      };
+    }) => void;
+    onpinnedChange?: (event: {
+      detail: {
+        pinned: boolean;
+      };
+    }) => void;
+    onsidebarToggle?: (event: {
+      detail: {
+        expanded: boolean;
+      };
+    }) => void;
+    headerSnippet?: Snippet<[{
+      hamburgerVisible: boolean;
+      sidebarExpanded: boolean;
+    }]>;
+    innerMenuSnippet?: Snippet<[{
+      hamburgerVisible: boolean;
+    }]>;
+    sidebarSnippet?: Snippet<[{
+      hamburgerVisible: boolean;
+      sidebarExpanded: boolean;
+    }]>;
+    logoSnippet?: Snippet<[{
+      hamburgerVisible: boolean;
+      sidebarExpanded: boolean;
+    }]>;
+    menuSnippet?: Snippet<[{
+      hamburgerVisible: boolean;
+      sidebarExpanded: boolean;
+    }]>;
+    userSnippet?: Snippet<[{
+      hamburgerVisible: boolean;
+      sidebarExpanded: boolean;
+    }]>;
+    children?: Snippet<[]>;
+  }
+
+  let {
+    drawerOpened = $bindable(false),
+    sidebarExpanded = $bindable(false),
+    class: clazz = {},
+    ondrawerChange,
+    onsidebarToggle,
+    headerSnippet,
+    innerMenuSnippet,
+    sidebarSnippet,
+    logoSnippet,
+    menuSnippet,
+    userSnippet,
+    children,
+  }: Props = $props();
+
+  const sidebarPinned = writable(false);
+
+  let headerElement: HTMLElement;
+
+  function toggleMenu(): void {
     drawerOpened = !drawerOpened;
     if (ondrawerChange) {
-        ondrawerChange({ detail: { opened: drawerOpened } });
+      ondrawerChange({ detail: { opened: drawerOpened } });
     }
-}
-function handleOverlayClick() {
+  }
+
+  function handleOverlayClick(): void {
     drawerOpened = false;
     if (ondrawerChange) {
-        ondrawerChange({ detail: { opened: drawerOpened } });
+      ondrawerChange({ detail: { opened: drawerOpened } });
     }
-}
-function toggleSidebar() {
+  }
+
+  function toggleSidebar(): void {
     sidebarExpanded = !sidebarExpanded;
     if (onsidebarToggle) {
-        onsidebarToggle({ detail: { expanded: sidebarExpanded } });
+      onsidebarToggle({ detail: { expanded: sidebarExpanded } });
     }
-}
-$effect(() => {
-    if ($mediaQuery.m || $mediaQuery.s || $mediaQuery.xs) {
-        sidebarExpanded = false;
+  }
+
+  $effect(() => {
+    if($mediaQuery.m || $mediaQuery.s || $mediaQuery.xs) {
+      sidebarExpanded = false
     }
-});
+  })
 </script>
 
 <MediaQuery>

package/dist/components/layouts/StableDividedSideBarLayout.svelte

@@ -1,29 +1,79 @@
-<script lang="ts">import '../../css/main.css';
-import './StableDividedSideBarLayout.css';
-import MediaQuery from "../simple/common/MediaQuery.svelte";
-import Icon from "../simple/media/Icon.svelte";
-import {} from "svelte";
-let { drawerOpened = $bindable(false), ondrawerChange, children, innerMenuSnippet, menuSnippet, sidebarSnippet, class: clazz = {} } = $props();
-function toggleMenu() {
-    drawerOpened = !drawerOpened;
-    if (ondrawerChange) {
-        ondrawerChange({
-            detail: {
-                opened: drawerOpened
-            }
-        });
+<script lang="ts">
+  import '../../css/main.css'
+  import './StableDividedSideBarLayout.css'
+  import MediaQuery from "../simple/common/MediaQuery.svelte";
+  import Icon from "../simple/media/Icon.svelte"
+  import { type Snippet } from "svelte";
+
+  /*
+    Styles:
+
+    --stable-divided-side-bar-layout-content-padding
+    --stable-divided-side-bar-layout-side-bar-width
+    --stable-divided-side-bar-layout-side-bar-border-color
+    --stable-divided-side-bar-layout-side-bar-padding
+    --stable-divided-side-bar-layout-header-menu-height
+    --stable-divided-side-bar-layout-header-menu-border-color
+    --stable-divided-side-bar-layout-header-menu-padding
+    --stable-divided-side-bar-layout-inner-header-menu-background-color
+    --stable-divided-side-bar-layout-drawer-background-color
+    --stable-divided-side-bar-layout-drawer-width
+  */
+
+  interface Props {
+    drawerOpened?: boolean;
+    class?: {
+      container?: string,
+      header?: string,
+      mainSection?: string,
+      overlay?: string
+    }
+    ondrawerChange?: (event: {
+      detail: {
+        opened: boolean
+      }
+    }) => void
+    children?: Snippet<[]>
+    menuSnippet?: Snippet<[]>
+    innerMenuSnippet?: Snippet<[{
+      hamburgerVisible: boolean
+    }]>
+    sidebarSnippet?: Snippet<[{
+      hamburgerVisible: boolean
+    }]>
+  }
+
+  let { 
+    drawerOpened = $bindable(false),
+    ondrawerChange,
+    children,
+    innerMenuSnippet,
+    menuSnippet,
+    sidebarSnippet,
+    class: clazz = {}
+  }: Props = $props();
+
+  function toggleMenu() {
+    drawerOpened = !drawerOpened
+    if(ondrawerChange) {
+      ondrawerChange({
+        detail: {
+          opened: drawerOpened
+        }
+      })
     }
-}
-function handleOverlayClick() {
-    drawerOpened = false;
-    if (ondrawerChange) {
-        ondrawerChange({
-            detail: {
-                opened: drawerOpened
-            }
-        });
+  }
+
+  function handleOverlayClick() {
+    drawerOpened = false
+    if(ondrawerChange) {
+      ondrawerChange({
+        detail: {
+          opened: drawerOpened
+        }
+      })
     }
-}
+  }
 </script>
 
 <MediaQuery>