@likable-hair/svelte 4.2.5 → 4.3.0

package/dist/components/simple/lists/SelectableVerticalList.svelte

@@ -1,101 +1,185 @@
-<script lang="ts" module>export {};
+<script lang="ts" module>
+  export type Element<Data = any> = {
+    title: string | number,
+    name: string | number,
+    description?: string,
+    icon?: string,
+    data?: Data;
+    style?: {
+      color?: string,
+      backgroundColor?: string
+    },
+    appendIcon?: string
+    disabled?: boolean
+  };
 </script>
 
-<script lang="ts" generics="Data">import '../../../css/main.css';
-import './SelectableVerticalList.css';
-import keyboarder from "../../../utils/keyboarder";
-import { onMount } from "svelte";
-import Icon from '../media/Icon.svelte';
-let { activeKeyboard = false, loopSelection = true, focused = $bindable(), selected = $bindable(), elements = $bindable(), centered = false, bicolor = false, appendIconSize = "20pt", onfocus, oniconClick, onselect, onkeypress, elementSnippet, descriptionSnippet, titleSnippet, } = $props();
-let focusedIndex = $derived(elements?.findIndex((el) => el.name == focused));
-function handleKeypress(params) {
-    if (activeKeyboard && elements && elements.length > 0) {
-        if (params.key == 'ArrowDown') {
-            let newIndex;
-            if ((focusedIndex === undefined || focusedIndex === -1) || (loopSelection && focusedIndex >= (elements.length - 1))) {
-                focused = elements[0].name;
-                newIndex = 0;
-            }
-            else if (focusedIndex < (elements.length - 1)) {
-                focused = elements[focusedIndex + 1].name;
-                newIndex = focusedIndex + 1;
-            }
-            if (newIndex !== undefined && onfocus) {
-                onfocus({
-                    detail: {
-                        element: elements[newIndex]
-                    }
-                });
-            }
+<script lang="ts" generics="Data">
+  import '../../../css/main.css'
+  import './SelectableVerticalList.css'
+  import keyboarder from "../../../utils/keyboarder";
+  import { onMount, type Snippet } from "svelte";
+  import Icon from '../media/Icon.svelte';
+  import type { KeyboardEventHandler } from 'svelte/elements';
+
+  type ElementData = Element<Data>
+
+  interface Props {
+    activeKeyboard?: boolean;
+    loopSelection?: boolean;
+    focused?: string | number;
+    selected?: string | number;
+    elements?: ElementData[];
+    centered?: boolean;
+    bicolor?: boolean
+    appendIconSize?: string;
+    onselect?: (event: {
+      detail: {
+        element: ElementData
+      }
+    }) => void
+    onfocus?: (event: {
+      detail: {
+        element: ElementData
+      }
+    }) => void
+    oniconClick?: (event: {
+      detail: {
+        index: number,
+        element: ElementData
+      }
+    }) => void
+    onkeypress?: KeyboardEventHandler<HTMLDivElement>
+    elementSnippet?: Snippet<[{
+      selected: boolean
+      focused: boolean
+      element: ElementData
+    }]>
+    titleSnippet?: Snippet<[{
+      selected: boolean
+      focused: boolean
+      element: ElementData
+    }]>
+    descriptionSnippet?: Snippet<[{
+      selected: boolean
+      focused: boolean
+      element: ElementData
+    }]>
+  }
+
+  let {
+    activeKeyboard = false,
+    loopSelection = true,
+    focused = $bindable(),
+    selected = $bindable(),
+    elements = $bindable(),
+    centered = false,
+    bicolor = false,
+    appendIconSize = "20pt",
+    onfocus,
+    oniconClick,
+    onselect,
+    onkeypress,
+    elementSnippet,
+    descriptionSnippet,
+    titleSnippet,
+  }: Props = $props();
+
+  let focusedIndex = $derived(elements?.findIndex((el) => el.name == focused))
+
+  function handleKeypress(params: {key: string}) {
+    if(activeKeyboard && elements && elements.length > 0) {
+      if(params.key == 'ArrowDown') {
+        let newIndex
+        if((focusedIndex === undefined || focusedIndex === -1) || (loopSelection && focusedIndex >= (elements.length - 1))) {
+          focused = elements[0].name
+          newIndex = 0
+        } else if(focusedIndex < (elements.length - 1)) {
+          focused = elements[focusedIndex + 1].name
+          newIndex = focusedIndex + 1
         }
-        else if (params.key == 'ArrowUp') {
-            let newIndex;
-            if ((focusedIndex === undefined || focusedIndex === -1) || (loopSelection && focusedIndex <= 0)) {
-                focused = elements[elements.length - 1].name;
-                newIndex = elements.length - 1;
-            }
-            else if (focusedIndex > 0) {
-                focused = elements[focusedIndex - 1].name;
-                newIndex = focusedIndex - 1;
-            }
-            if (newIndex !== undefined && onfocus) {
-                onfocus({
-                    detail: {
-                        element: elements[newIndex]
-                    }
-                });
+
+        if(newIndex !== undefined && onfocus) {
+          onfocus({
+            detail: {
+              element: elements[newIndex]
             }
+          })
         }
-        else if (params.key == 'Enter' && focusedIndex !== -1 && focusedIndex != undefined) {
-            selected = elements[focusedIndex].name;
-            if (onselect) {
-                onselect({
-                    detail: {
-                        element: elements[focusedIndex]
-                    }
-                });
-            }
+      } else if(params.key == 'ArrowUp') {
+        let newIndex
+        if((focusedIndex === undefined || focusedIndex === -1) || (loopSelection && focusedIndex <= 0)) {
+          focused = elements[elements.length - 1].name
+          newIndex = elements.length - 1
+        } else if(focusedIndex > 0) {
+          focused = elements[focusedIndex - 1].name
+          newIndex = focusedIndex - 1
         }
-    }
-}
-function handleElementClick(element) {
-    selected = element.name;
-    if (element.disabled)
-        return;
-    if (onselect) {
-        onselect({
+
+        if(newIndex !== undefined && onfocus) {
+          onfocus({
             detail: {
-                element
+              element: elements[newIndex]
             }
-        });
-    }
-}
-function handleElementMouseover(element) {
-    focused = element.name;
-    if (onfocus) {
-        onfocus({
+          })
+        }
+      } else if(params.key == 'Enter' && focusedIndex !== -1 && focusedIndex != undefined) {
+        selected = elements[focusedIndex].name
+        if(onselect) {
+          onselect({
             detail: {
-                element
+              element: elements[focusedIndex]
             }
-        });
+          })
+        }
+      }
     }
-}
-onMount(() => {
-    keyboarder.on(handleKeypress);
+  }
+
+  function handleElementClick(element: Element) {
+    selected = element.name
+
+    if(element.disabled) return
+
+    if(onselect) {
+      onselect({
+        detail: {
+          element
+        }
+      })
+    }
+  }
+
+  function handleElementMouseover(element: Element) {
+    focused = element.name
+    if(onfocus) {
+      onfocus({
+        detail: {
+          element
+        }
+      })
+    }
+  }
+
+  onMount(() => {
+    keyboarder.on(handleKeypress)
+
     return () => {
-        keyboarder.off(handleKeypress);
-    };
-});
-function handleIconClick(index, element) {
-    if (oniconClick) {
-        oniconClick({
-            detail: {
-                element,
-                index
-            }
-        });
+      keyboarder.off(handleKeypress)
     }
-}
+  })
+
+  function handleIconClick(index: number, element: Element) {
+    if(oniconClick) {
+      oniconClick({
+        detail: {
+          element,
+          index
+        }
+      })
+    }
+  }
+
 </script>
 
 <ul

package/dist/components/simple/lists/SelectableVerticalList.svelte.d.ts

@@ -15,51 +15,58 @@ import '../../../css/main.css';
 import './SelectableVerticalList.css';
 import { type Snippet } from "svelte";
 import type { KeyboardEventHandler } from 'svelte/elements';
-declare class __sveltets_Render<Data> {
-    props(): {
+declare function $$render<Data>(): {
+    props: {
         activeKeyboard?: boolean;
         loopSelection?: boolean;
         focused?: string | number;
         selected?: string | number;
-        elements?: Element<Data>[] | undefined;
+        elements?: Element<Data>[];
         centered?: boolean;
         bicolor?: boolean;
         appendIconSize?: string;
-        onselect?: ((event: {
+        onselect?: (event: {
             detail: {
                 element: Element<Data>;
             };
-        }) => void) | undefined;
-        onfocus?: ((event: {
+        }) => void;
+        onfocus?: (event: {
             detail: {
                 element: Element<Data>;
             };
-        }) => void) | undefined;
-        oniconClick?: ((event: {
+        }) => void;
+        oniconClick?: (event: {
             detail: {
                 index: number;
                 element: Element<Data>;
             };
-        }) => void) | undefined;
+        }) => void;
         onkeypress?: KeyboardEventHandler<HTMLDivElement>;
         elementSnippet?: Snippet<[{
             selected: boolean;
             focused: boolean;
             element: Element<Data>;
-        }]> | undefined;
+        }]>;
         titleSnippet?: Snippet<[{
             selected: boolean;
             focused: boolean;
             element: Element<Data>;
-        }]> | undefined;
+        }]>;
         descriptionSnippet?: Snippet<[{
             selected: boolean;
             focused: boolean;
             element: Element<Data>;
-        }]> | undefined;
+        }]>;
     };
-    events(): {};
-    slots(): {};
+    exports: {};
+    bindings: "selected" | "focused" | "elements";
+    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(): "selected" | "focused" | "elements";
     exports(): {};
 }

package/dist/components/simple/lists/SidebarMenuList.svelte

@@ -1,91 +1,139 @@
-<script lang="ts" module>export {};
+<script lang="ts" module>
+  export type Menu = {
+    title: string,
+    name: string | number,
+    url?: string,
+    disabled?: boolean,
+    children?: Menu[]
+  };
 </script>
 
-<script lang="ts">import '../../../css/main.css';
-import './SidebarMenuList.css';
-import Self from './SidebarMenuList.svelte';
-import { page } from "$app/state";
-let { menus, level = 0, selected = $bindable(undefined), bookmarkColor = "rgb(var(--global-color-primary-500))", color = "inherit", hoverColor = 'inherit', selectedTextColor = "inherit", selectedFontWeight = "600", autoDetectUrl = false, } = $props();
-let selectedIndex = $state(undefined);
-$effect(() => {
-    if (autoDetectUrl && !!page) {
-        const results = getMenuNameMatchingUrl({ menus: menus });
-        selected = results.name;
+<script lang="ts">
+  import '../../../css/main.css'
+  import './SidebarMenuList.css'
+  import Self from './SidebarMenuList.svelte'
+  import { page } from "$app/state";
+
+  interface Props {
+    menus: Menu[];
+    level?: number;
+    selected?: string | number;
+    bookmarkColor?: string;
+    color?: string;
+    hoverColor?: string;
+    selectedTextColor?: string;
+    selectedFontWeight?: string;
+    autoDetectUrl?: boolean;
+  }
+
+  let {
+    menus,
+    level = 0,
+    selected = $bindable(undefined),
+    bookmarkColor = "rgb(var(--global-color-primary-500))",
+    color = "inherit",
+    hoverColor = 'inherit',
+    selectedTextColor = "inherit",
+    selectedFontWeight = "600",
+    autoDetectUrl = false,
+  }: Props = $props();
+  
+  let selectedIndex: number | undefined = $state(undefined)
+
+  $effect(() => {
+    if(autoDetectUrl && !!page) {
+      const results = getMenuNameMatchingUrl({ menus: menus })
+      selected = results.name
     }
-});
-$effect(() => {
-    if (level == 0) {
-        if (selected !== undefined && selected !== null) {
-            let results = getSelectionIndex({
-                menus: menus,
-                offset: 0,
-                search: selected
-            });
-            if (results.found)
-                selectedIndex = results.offset;
-            else
-                selectedIndex = undefined;
-        }
-        else {
-            selectedIndex = undefined;
-        }
+  }) 
+
+  $effect(() => {
+    if(level == 0) {
+      if(selected !== undefined && selected !== null) {
+        let results = getSelectionIndex({
+          menus: menus,
+          offset: 0,
+          search: selected
+        })
+  
+        if(results.found) selectedIndex = results.offset
+        else selectedIndex = undefined
+      } else {
+        selectedIndex = undefined
+      }
     }
-});
-let isSelected = $derived(selectedIndex !== undefined);
-function getSelectionIndex(params) {
-    let initialOffset = params.offset;
-    for (let i = 0; i < params.menus.length; i += 1) {
-        initialOffset += 1;
-        let currentMenu = params.menus[i];
-        if (currentMenu.name == params.search) {
-            return { found: true, offset: initialOffset };
-        }
-        else if (!!currentMenu.children) {
-            let results = getSelectionIndex({
-                menus: currentMenu.children,
-                offset: initialOffset,
-                search: params.search
-            });
-            initialOffset = results.offset;
-            if (results.found) {
-                return { found: true, offset: initialOffset };
-            }
+  })
+
+  let isSelected = $derived(selectedIndex !== undefined)
+
+  function getSelectionIndex(params: {
+    menus: Menu[],
+    offset: number,
+    search: string | number
+  }): { found: boolean, offset: number } {
+    let initialOffset = params.offset
+
+    for(let i = 0; i < params.menus.length; i += 1) {
+      initialOffset += 1
+      let currentMenu = params.menus[i]
+      if(currentMenu.name == params.search) {
+        return { found: true, offset: initialOffset }
+      } else if(!!currentMenu.children) {
+        let results = getSelectionIndex({
+          menus: currentMenu.children,
+          offset: initialOffset,
+          search: params.search
+        })
+
+        initialOffset = results.offset
+        if(results.found) {
+          return { found: true, offset: initialOffset }
         }
+      }
     }
-    return { found: false, offset: initialOffset };
-}
-function getMenuNameMatchingUrl(params) {
-    let foundName = undefined;
-    let foundMatchType = undefined;
-    for (let i = 0; i < params.menus.length; i += 1) {
-        let currentMenu = params.menus[i];
-        if (!!currentMenu.url && page.url.pathname === currentMenu.url) {
-            foundName = currentMenu.name;
-            foundMatchType = 'equal';
-        }
-        else if (foundMatchType !== 'equal' && !!currentMenu.url && page.url.pathname.startsWith(currentMenu.url)) {
-            foundName = currentMenu.name;
-            foundMatchType = 'startsWith';
-        }
-        if (!!currentMenu.children) {
-            let found = getMenuNameMatchingUrl({ menus: currentMenu.children });
-            if (found.name !== undefined) {
-                foundName = found.name;
-                foundMatchType = found.matchType;
-            }
+
+    return { found: false, offset: initialOffset }
+  }
+
+  function getMenuNameMatchingUrl(params: {
+    menus: Menu[]
+  }): {
+    name: string | number | undefined,
+    matchType: 'startsWith' | 'equal' | undefined
+  } {
+    let foundName: string | number | undefined = undefined
+    let foundMatchType: 'startsWith' | 'equal' | undefined = undefined
+
+    for(let i = 0; i < params.menus.length; i += 1) {
+      let currentMenu = params.menus[i]
+      
+      if(!!currentMenu.url && page.url.pathname === currentMenu.url) {
+        foundName = currentMenu.name
+        foundMatchType = 'equal'
+      } else if(foundMatchType !== 'equal' && !!currentMenu.url && page.url.pathname.startsWith(currentMenu.url)) {
+        foundName = currentMenu.name
+        foundMatchType = 'startsWith'
+      }
+
+      if(!!currentMenu.children) {
+        let found = getMenuNameMatchingUrl({ menus: currentMenu.children })
+        if(found.name !== undefined) {
+          foundName = found.name
+          foundMatchType = found.matchType
         }
+      }
     }
+
     return {
-        name: foundName,
-        matchType: foundMatchType
-    };
-}
-function handleUrlClick(e, menu) {
-    if (menu.disabled)
-        e.preventDefault();
-    else
-        selected = menu.name;
-}
+      name: foundName,
+      matchType: foundMatchType
+    }
+  }
+
+  function handleUrlClick(e: Event, menu: Menu) {
+    if(menu.disabled) e.preventDefault()
+    else selected = menu.name
+  }
 </script>
 
 <ul