@likable-hair/svelte 3.3.30 → 3.3.32

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

@@ -1,66 +1,107 @@
-<script context="module"></script>
+<script lang="ts" context="module">
+  export type Element = {
+    title: string | number,
+    name: string | number,
+    description?: string,
+    icon?: string,
+    data?: any;
+    style?: {
+      color?: string,
+      backgroundColor?: string
+    },
+    appendIcon?: string
+    disabled?: boolean
+  };
+</script>
 
-<script>import "../../../css/main.css";
-import "./SelectableVerticalList.css";
-import keyboarder from "../../../utils/keyboarder";
-import { createEventDispatcher, onMount } from "svelte";
-import Icon from "../media/Icon.svelte";
-export let activeKeyboard = false, loopSelection = true, focused = void 0, selected = void 0, elements = [], centered = false, bicolor = false, appendIconSize = "20pt";
-let dispatch = createEventDispatcher();
-$:
-  focusedIndex = elements.findIndex((el) => el.name == focused);
-function handleKeypress(params) {
-  if (activeKeyboard && elements.length > 0) {
-    if (params.key == "ArrowDown") {
-      let newIndex;
-      if (focusedIndex === void 0 || 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 !== void 0)
-        dispatch("focus", { element: elements[newIndex] });
-    } else if (params.key == "ArrowUp") {
-      let newIndex;
-      if (focusedIndex === void 0 || 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;
+<script lang="ts">
+  import '../../../css/main.css'
+  import './SelectableVerticalList.css'
+  import keyboarder from "../../../utils/keyboarder";
+  import { createEventDispatcher, onMount } from "svelte";
+  import Icon from '../media/Icon.svelte';
+
+  export let activeKeyboard: boolean = false,
+    loopSelection: boolean = true,
+    focused: string | number | undefined = undefined,
+    selected: string | number | undefined = undefined,
+    elements: Element[] = [],
+    centered: boolean = false,
+    bicolor: boolean = false,
+    appendIconSize: string = "20pt"
+
+  let dispatch = createEventDispatcher<{
+    'select': {
+      element: Element
+    },
+    'focus': {
+      element: Element
+    },
+    'iconClick': {
+      index: number,
+      element: Element
+    }
+  }>()
+
+  $: focusedIndex = elements.findIndex((el) => el.name == focused)
+
+  function handleKeypress(params: {key: string}) {
+    if(activeKeyboard && 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) dispatch('focus', { element: elements[newIndex] })
+      } 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) dispatch('focus', { element: elements[newIndex] })
+      } else if(params.key == 'Enter' && focusedIndex !== -1) {
+        selected = elements[focusedIndex].name
+        dispatch('select', { element: elements[focusedIndex] })
       }
-      if (newIndex !== void 0)
-        dispatch("focus", { element: elements[newIndex] });
-    } else if (params.key == "Enter" && focusedIndex !== -1) {
-      selected = elements[focusedIndex].name;
-      dispatch("select", { element: elements[focusedIndex] });
     }
   }
-}
-function handleElementClick(element) {
-  selected = element.name;
-  if (element.disabled)
-    return;
-  dispatch("select", { element });
-}
-function handleElementMouseover(element) {
-  focused = element.name;
-  dispatch("focus", { element });
-}
-onMount(() => {
-  keyboarder.on(handleKeypress);
-  return () => {
-    keyboarder.off(handleKeypress);
-  };
-});
-function handleIconClick(index, element) {
-  dispatch("iconClick", {
-    index,
-    element
-  });
-}
+
+  function handleElementClick(element: Element) {
+    selected = element.name
+    if(element.disabled) return
+    dispatch('select', { element })
+  }
+
+  function handleElementMouseover(element: Element) {
+    focused = element.name
+    dispatch('focus', { element })
+  }
+
+  onMount(() => {
+    keyboarder.on(handleKeypress)
+
+    return () => {
+      keyboarder.off(handleKeypress)
+    }
+  })
+
+  function handleIconClick(index: number, element: Element) {
+    dispatch('iconClick', {
+      index,
+      element
+    })
+  }
+
 </script>
 
 <ul

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

@@ -1,4 +1,3 @@
-import { SvelteComponent } from "svelte";
 export type Element = {
     title: string | number;
     name: string | number;
@@ -14,52 +13,57 @@ export type Element = {
 };
 import '../../../css/main.css';
 import './SelectableVerticalList.css';
-declare const __propDef: {
-    props: {
-        activeKeyboard?: boolean | undefined;
-        loopSelection?: boolean | undefined;
-        focused?: string | number | undefined;
-        selected?: string | number | undefined;
-        elements?: Element[] | undefined;
-        centered?: boolean | undefined;
-        bicolor?: boolean | undefined;
-        appendIconSize?: string | 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: {
-        keypress: KeyboardEvent;
-        select: CustomEvent<{
-            element: Element;
-        }>;
-        focus: CustomEvent<{
-            element: Element;
-        }>;
-        iconClick: CustomEvent<{
-            index: number;
-            element: Element;
-        }>;
-    } & {
-        [evt: string]: CustomEvent<any>;
+    z_$$bindings?: Bindings;
+}
+declare const SelectableVerticalList: $$__sveltets_2_IsomorphicComponent<{
+    activeKeyboard?: boolean;
+    loopSelection?: boolean;
+    focused?: string | number | undefined;
+    selected?: string | number | undefined;
+    elements?: Element[];
+    centered?: boolean;
+    bicolor?: boolean;
+    appendIconSize?: string;
+}, {
+    keypress: KeyboardEvent;
+    select: CustomEvent<{
+        element: Element;
+    }>;
+    focus: CustomEvent<{
+        element: Element;
+    }>;
+    iconClick: CustomEvent<{
+        index: number;
+        element: Element;
+    }>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    element: {
+        focused: boolean;
+        selected: boolean;
     };
-    slots: {
-        element: {
-            focused: boolean;
-            selected: boolean;
-        };
-        title: {
-            focused: boolean;
-            selected: boolean;
-            element: Element;
-        };
-        description: {
-            focused: boolean;
-            selected: boolean;
-            element: Element;
-        };
+    title: {
+        focused: boolean;
+        selected: boolean;
+        element: Element;
     };
-};
-export type SelectableVerticalListProps = typeof __propDef.props;
-export type SelectableVerticalListEvents = typeof __propDef.events;
-export type SelectableVerticalListSlots = typeof __propDef.slots;
-export default class SelectableVerticalList extends SvelteComponent<SelectableVerticalListProps, SelectableVerticalListEvents, SelectableVerticalListSlots> {
-}
-export {};
+    description: {
+        focused: boolean;
+        selected: boolean;
+        element: Element;
+    };
+}, {}, string>;
+type SelectableVerticalList = InstanceType<typeof SelectableVerticalList>;
+export default SelectableVerticalList;

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

@@ -1,86 +1,131 @@
-<script context="module"></script>
-
-<script>import "../../../css/main.css";
-import "./SidebarMenuList.css";
-import { page } from "$app/stores";
-export let menus, level = 0, selected = void 0, bookmarkColor = "rgb(var(--global-color-primary-500))", color = "inherit", hoverColor = "inherit", selectedTextColor = "inherit", selectedFontWeight = "600", autoDetectUrl = false;
-let selectedIndex = void 0;
-page.subscribe(() => {
-  if (autoDetectUrl) {
-    const results = getMenuNameMatchingUrl({ menus });
-    selected = results.name;
-  }
-});
-$:
-  if (level == 0) {
-    if (selected !== void 0 && selected !== null) {
+<script lang="ts" context="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 { page } from "$app/stores";
+
+  /* 
+    Styles
+
+    --sidebar-menu-list-primary-color
+    --sidebar-menu-list-selected-text-color
+    --sidebar-menu-list-selected-font-weight
+    --sidebar-menu-list-color
+    --sidebar-menu-list-hover-color
+  */
+
+  export let menus: Menu[],
+    level: number = 0,
+    selected: string | number | undefined = undefined,
+    bookmarkColor: string = "rgb(var(--global-color-primary-500))",
+    color: string = "inherit",
+    hoverColor: string = 'inherit',
+    selectedTextColor: string = "inherit",
+    selectedFontWeight: string = "600",
+    autoDetectUrl: boolean = false
+  
+  let selectedIndex: number | undefined = undefined
+
+  page.subscribe(() => {
+    if(autoDetectUrl) {
+      const results = getMenuNameMatchingUrl({ menus: menus })
+      selected = results.name
+    }
+  })
+
+  $: if(level == 0) {
+    if(selected !== undefined && selected !== null) {
       let results = getSelectionIndex({
-        menus,
+        menus: menus,
         offset: 0,
         search: selected
-      });
-      if (results.found)
-        selectedIndex = results.offset;
-      else
-        selectedIndex = void 0;
+      })
+
+      if(results.found) selectedIndex = results.offset
+      else selectedIndex = undefined
     } else {
-      selectedIndex = void 0;
+      selectedIndex = undefined
     }
   }
-$:
-  isSelected = selectedIndex !== void 0;
-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 };
+  $: isSelected = 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 }
   }
-  return { found: false, offset: initialOffset };
-}
-function getMenuNameMatchingUrl(params) {
-  let foundName = void 0;
-  let foundMatchType = void 0;
-  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 !== void 0) {
-        foundName = found.name;
-        foundMatchType = found.matchType;
+
+  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
     }
   }
-  return {
-    name: foundName,
-    matchType: foundMatchType
-  };
-}
-function handleUrlClick(e, menu) {
-  if (menu.disabled)
-    e.preventDefault();
-  else
-    selected = menu.name;
-}
+
+  function handleUrlClick(e: Event, menu: Menu) {
+    if(menu.disabled) e.preventDefault()
+    else selected = menu.name
+  }
 </script>
 
 <ul

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

@@ -1,4 +1,3 @@
-import { SvelteComponent } from "svelte";
 export type Menu = {
     title: string;
     name: string | number;
@@ -8,26 +7,31 @@ export type Menu = {
 };
 import '../../../css/main.css';
 import './SidebarMenuList.css';
-declare const __propDef: {
-    props: {
-        menus: Menu[];
-        level?: number | undefined;
-        selected?: string | number | undefined;
-        bookmarkColor?: string | undefined;
-        color?: string | undefined;
-        hoverColor?: string | undefined;
-        selectedTextColor?: string | undefined;
-        selectedFontWeight?: string | undefined;
-        autoDetectUrl?: 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: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type SidebarMenuListProps = typeof __propDef.props;
-export type SidebarMenuListEvents = typeof __propDef.events;
-export type SidebarMenuListSlots = typeof __propDef.slots;
-export default class SidebarMenuList extends SvelteComponent<SidebarMenuListProps, SidebarMenuListEvents, SidebarMenuListSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const SidebarMenuList: $$__sveltets_2_IsomorphicComponent<{
+    menus: Menu[];
+    level?: number;
+    selected?: string | number | undefined;
+    bookmarkColor?: string;
+    color?: string;
+    hoverColor?: string;
+    selectedTextColor?: string;
+    selectedFontWeight?: string;
+    autoDetectUrl?: boolean;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type SidebarMenuList = InstanceType<typeof SidebarMenuList>;
+export default SidebarMenuList;