@likable-hair/svelte 3.3.21 → 3.3.23

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

@@ -1,45 +1,54 @@
-<script>import "../../../css/main.css";
-import "./Paginator.css";
-import { createEventDispatcher } from "svelte";
-import Icon from "../media/Icon.svelte";
-let dispatch = createEventDispatcher();
-export let page = 1, maxPage = void 0;
-function goToPage(p) {
-  if (p <= 0 || !!maxPage && p > maxPage)
-    return;
-  page = p;
-  emitChange();
-}
-function previousPage() {
-  if (page == 1)
-    return;
-  page -= 1;
-  emitChange();
-}
-function hardPrevious() {
-  page = 1;
-  emitChange();
-}
-function nextPage() {
-  if (!!maxPage && page >= maxPage)
-    return;
-  page += 1;
-  emitChange();
-}
-function hardNext() {
-  if (!maxPage)
-    return;
-  page = maxPage;
-  emitChange();
-}
-function emitChange() {
-  dispatch("change", {
-    page
-  });
-}
-$:
-  if (!!maxPage && page > maxPage)
+<script lang="ts">
+  import "../../../css/main.css";
+  import "./Paginator.css";
+  import { createEventDispatcher } from "svelte";
+  import Icon from "../media/Icon.svelte";
+
+  let dispatch = createEventDispatcher<{
+    change: {
+      page: number;
+    };
+  }>();
+
+  export let page: number = 1,
+    maxPage: number | undefined = undefined;
+
+  function goToPage(p: number) {
+    if (p <= 0 || (!!maxPage && p > maxPage)) return;
+    page = p;
+    emitChange();
+  }
+
+  function previousPage() {
+    if (page == 1) return;
+    page -= 1;
+    emitChange();
+  }
+
+  function hardPrevious() {
+    page = 1;
+    emitChange();
+  }
+
+  function nextPage() {
+    if (!!maxPage && page >= maxPage) return;
+    page += 1;
+    emitChange();
+  }
+
+  function hardNext() {
+    if (!maxPage) return;
     page = maxPage;
+    emitChange();
+  }
+
+  function emitChange() {
+    dispatch("change", {
+      page,
+    });
+  }
+
+  $: if (!!maxPage && page > maxPage) page = maxPage;
 </script>
 
 <div class="paginator-container">

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

@@ -1,23 +1,27 @@
-import { SvelteComponent } from "svelte";
 import "../../../css/main.css";
 import "./Paginator.css";
-declare const __propDef: {
-    props: {
-        page?: number | undefined;
-        maxPage?: number | 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: {
-        change: CustomEvent<{
-            page: number;
-        }>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type PaginatorProps = typeof __propDef.props;
-export type PaginatorEvents = typeof __propDef.events;
-export type PaginatorSlots = typeof __propDef.slots;
-export default class Paginator extends SvelteComponent<PaginatorProps, PaginatorEvents, PaginatorSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const Paginator: $$__sveltets_2_IsomorphicComponent<{
+    page?: number;
+    maxPage?: number | undefined;
+}, {
+    change: CustomEvent<{
+        page: number;
+    }>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Paginator = InstanceType<typeof Paginator>;
+export default Paginator;

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

@@ -1,19 +1,47 @@
-<script context="module"></script>
+<script lang="ts" context="module">
+  type Divider = {
+    divider: true,
+    marginTop?: string,
+    marginBottom?: string,
+    marginRight?: string,
+    marginLeft?: string
+  }
+
+  type Item = {
+    name: string | number,
+    label: string,
+    icon: string,
+    disabled?: boolean,
+    divider?: undefined | false
+  }
+
+  export type MenuItem = Divider | Item;
+</script>
 
-<script>import "../../../css/main.css";
-import "./SelectableMenuList.css";
-import Icon from "../media/Icon.svelte";
-import { createEventDispatcher } from "svelte";
-let dispatch = createEventDispatcher();
-export let collapsed = false, items = [], selected = void 0;
-function handleItemClick(item) {
-  if (item.disabled)
-    return;
-  selected = item.name;
-  dispatch("select", {
-    item
-  });
-}
+<script lang="ts">
+  import '../../../css/main.css'
+  import './SelectableMenuList.css'
+  import Icon from "../media/Icon.svelte";
+  import { createEventDispatcher } from 'svelte';
+
+  let dispatch = createEventDispatcher<{
+    'select': {
+      item: Item
+    }
+  }>()
+
+  export let collapsed: boolean = false,
+    items: MenuItem[] = [],
+    selected: string | number | undefined = undefined
+
+  function handleItemClick(item: Item) {
+    if(item.disabled) return
+
+    selected = item.name
+    dispatch('select', {
+      item
+    })
+  }
 </script>
 
 <div

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

@@ -1,4 +1,3 @@
-import { SvelteComponent } from "svelte";
 type Divider = {
     divider: true;
     marginTop?: string;
@@ -16,24 +15,29 @@ type Item = {
 export type MenuItem = Divider | Item;
 import '../../../css/main.css';
 import './SelectableMenuList.css';
-declare const __propDef: {
-    props: {
-        collapsed?: boolean | undefined;
-        items?: MenuItem[] | undefined;
-        selected?: string | number | 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: {
-        select: CustomEvent<{
-            item: Item;
-        }>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type SelectableMenuListProps = typeof __propDef.props;
-export type SelectableMenuListEvents = typeof __propDef.events;
-export type SelectableMenuListSlots = typeof __propDef.slots;
-export default class SelectableMenuList extends SvelteComponent<SelectableMenuListProps, SelectableMenuListEvents, SelectableMenuListSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const SelectableMenuList: $$__sveltets_2_IsomorphicComponent<{
+    collapsed?: boolean;
+    items?: MenuItem[];
+    selected?: string | number | undefined;
+}, {
+    select: CustomEvent<{
+        item: Item;
+    }>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type SelectableMenuList = InstanceType<typeof SelectableMenuList>;
+export default SelectableMenuList;

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

@@ -1,64 +1,106 @@
-<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;
-  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
+    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;