@likable-hair/svelte 3.3.30 → 3.3.32

package/dist/components/simple/forms/TreeEditor.svelte

@@ -1,104 +1,150 @@
-<script context="module"></script>
-
-<script>import Sortable from "sortablejs";
-import { onMount, createEventDispatcher } from "svelte";
-import TreeEditorItem from "./TreeEditorItem.svelte";
-import { createId } from "@paralleldrive/cuid2";
-import lodash from "lodash";
-let dispatch = createEventDispatcher();
-export let items = [], groupName = createId(), cleanItems = convertItemsInClean(items), collapsable = true, editable = true, updateItem = ({ item }) => {
-  return item;
-};
-let itemList, sortable = void 0, rerender = true, mounted = false;
-onMount(() => {
-  mounted = true;
-  initSortable();
-});
-async function initSortable() {
-  if (!mounted)
-    return;
-  sortable = Sortable.create(itemList, {
-    handle: ".handle",
-    group: groupName,
-    animation: 150,
-    ghostClass: "ghost-drag-element",
-    onEnd(event) {
-      sortTree();
-    }
-  });
-}
-$:
-  if (!!items)
-    initSortable();
-function handleEnd(event) {
-  sortTree();
-}
-async function sortTree() {
-  let clonedItems = lodash.cloneDeep(items);
-  let sortedItems = sortSubTree(clonedItems, items, sortable, "main");
-  dispatch("change", {
-    items: sortedItems
-  });
-  items = sortedItems;
-  rerender = !rerender;
-}
-function sortSubTree(totalItems, itemsToSort, parentSortable, parentId) {
-  if (!parentSortable)
-    throw new Error("Parent sortable could not be undefined");
-  parentSortable.save();
-  for (let i = 0; i < itemsToSort.length; i += 1) {
-    let itemToSort = itemsToSort[i];
-    if (!!itemToSort.children) {
-      itemsToSort[i].children = sortSubTree(totalItems, itemToSort.children, itemToSort.sortable, itemToSort.id);
-    }
+<script lang="ts" context="module">
+  export type Item = {
+    id: number | string,
+    title: string,
+    expanded?: boolean,
+    sortable?: Sortable
+    children?: Item[],
+    data?: any
+  };
+
+  export type CleanItem = {
+    id: number | string,
+    title: string,
+    expanded?: boolean,
+    children?: CleanItem[],
+    data?: any
+  };
+</script>
+
+<script lang="ts">
+  import Sortable from 'sortablejs';
+  import { onMount, createEventDispatcher, type ComponentProps } from 'svelte';
+  import TreeEditorItem from './TreeEditorItem.svelte';
+  import { createId } from '@paralleldrive/cuid2';
+  import lodash from 'lodash';
+
+  let dispatch = createEventDispatcher<{
+    'change': {
+      items: Item[]
+    },
+    'input': {
+      item: Item,
+      items: Item[]
+    },
+  }>()
+
+  export let items: Item[] = [],
+    groupName: string = createId(),
+    cleanItems: CleanItem[] = convertItemsInClean(items),
+    collapsable: boolean = true,
+    editable: boolean = true,
+    updateItem: ComponentProps<TreeEditorItem>['updateItem'] = ({ item }) => { return item }
+
+  let itemList: HTMLElement,
+    sortable: Sortable | undefined = undefined,
+    rerender: boolean = true,
+    mounted: boolean = false
+
+  onMount(() => {
+    mounted = true
+    initSortable()
+  })
+
+  async function initSortable() {
+    if(!mounted) return
+
+    sortable = Sortable.create(itemList, {
+      handle: '.handle',
+      group: groupName,
+      animation: 150,
+      ghostClass: 'ghost-drag-element',
+      onEnd(event) {
+        sortTree()
+      }
+    })
   }
-  let orderedIds = [];
-  for (let k = 0; k < parentSortable.el.children.length; k += 1) {
-    let id = parentSortable.el.children[k].getAttribute("data-sortable-id")?.toString();
-    if (!id)
-      throw new Error("All html element must have data-sortbale-id");
-    orderedIds.push(id);
+
+  $: if(!!items) initSortable() 
+
+  function handleEnd(event: CustomEvent<{ ev: Sortable.SortableEvent }>) {
+    sortTree()
   }
-  let newItems = [];
-  for (let j = 0; j < orderedIds.length; j += 1) {
-    let id = orderedIds[j];
-    let itemIndex = itemsToSort.findIndex((its) => its.id.toString() == id);
-    if (itemIndex === -1) {
-      let itemToAdd = findItem(totalItems, id);
-      if (!itemToAdd)
-        continue;
-      newItems.push(itemToAdd);
-    } else {
-      newItems.push(itemsToSort[itemIndex]);
+
+  async function sortTree() {
+    let clonedItems = lodash.cloneDeep(items)
+    let sortedItems = sortSubTree(clonedItems, items, sortable, 'main')
+
+    dispatch('change', {
+      items: sortedItems
+    })
+
+    items = sortedItems
+    rerender = !rerender
+  }
+
+  function sortSubTree(totalItems: Item[], itemsToSort: Item[], parentSortable: Sortable | undefined, parentId?: Item['id']): Item[] {
+    if(!parentSortable) throw new Error('Parent sortable could not be undefined')
+    parentSortable.save()
+
+    for(let i = 0; i < itemsToSort.length; i += 1) {
+      let itemToSort = itemsToSort[i]
+      
+      if(!!itemToSort.children) {
+        itemsToSort[i].children = sortSubTree(totalItems, itemToSort.children, itemToSort.sortable, itemToSort.id)
+      }
+    }
+
+    let orderedIds: Item['id'][] = []
+    for(let k = 0; k < parentSortable.el.children.length; k += 1) {
+      let id = parentSortable.el.children[k].getAttribute('data-sortable-id')?.toString()
+      if(!id) throw new Error('All html element must have data-sortbale-id')
+      orderedIds.push(id)
+    }
+
+    let newItems: Item[] = []
+    for(let j = 0; j < orderedIds.length; j += 1) {
+      let id = orderedIds[j]
+      let itemIndex = itemsToSort.findIndex((its) => its.id.toString() == id)
+      if(itemIndex === -1) {
+        let itemToAdd = findItem(totalItems, id)
+        if(!itemToAdd) continue
+
+        newItems.push(itemToAdd)
+      } else {
+        newItems.push(itemsToSort[itemIndex])
+      }
     }
+
+    return newItems
   }
-  return newItems;
-}
-function findItem(itemsToSearch, id) {
-  for (let i = 0; i < itemsToSearch.length; i += 1) {
-    let item = itemsToSearch[i];
-    if (item.id == id)
-      return item;
-    if (!!item.children) {
-      let result = findItem(item.children, id);
-      if (!!result)
-        return result;
+
+  function findItem(itemsToSearch: Item[], id: Item['id']): Item | undefined {
+    for(let i = 0; i < itemsToSearch.length; i += 1) {
+      let item = itemsToSearch[i]
+
+      if(item.id == id) return item
+
+      if(!!item.children) {
+        let result = findItem(item.children, id)
+        if(!!result) return result
+      }
     }
   }
-}
-function convertItemsInClean(items2) {
-  return items2.map((i) => {
-    return {
-      id: i.id,
-      title: i.title,
-      expanded: i.expanded,
-      children: !!i.children ? convertItemsInClean(i.children) : [],
-      data: i.data
-    };
-  });
-}
-$:
-  cleanItems = convertItemsInClean(items);
+
+  function convertItemsInClean(items: Item[]): CleanItem[] {
+    return items.map((i) => {
+      return {
+        id: i.id,
+        title: i.title,
+        expanded: i.expanded,
+        children: !!i.children ? convertItemsInClean(i.children) : [],
+        data: i.data
+      }
+    })
+  }
+
+  $: cleanItems = convertItemsInClean(items)
 </script>
 
 {#key rerender}

package/dist/components/simple/forms/TreeEditor.svelte.d.ts

@@ -1,4 +1,3 @@
-import { SvelteComponent } from "svelte";
 export type Item = {
     id: number | string;
     title: string;
@@ -17,43 +16,48 @@ export type CleanItem = {
 import Sortable from 'sortablejs';
 import { type ComponentProps } from 'svelte';
 import TreeEditorItem from './TreeEditorItem.svelte';
-declare const __propDef: {
-    props: {
-        items?: Item[] | undefined;
-        groupName?: string | undefined;
-        cleanItems?: CleanItem[] | undefined;
-        collapsable?: boolean | undefined;
-        editable?: boolean | undefined;
-        updateItem?: ComponentProps<TreeEditorItem>['updateItem'];
+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: {
-        click: CustomEvent<{
-            item: Item;
-        }>;
-        change: CustomEvent<{
-            items: Item[];
-        }>;
-        input: CustomEvent<{
-            item: Item;
-            items: Item[];
-        }>;
-    } & {
-        [evt: string]: CustomEvent<any>;
+    z_$$bindings?: Bindings;
+}
+declare const TreeEditor: $$__sveltets_2_IsomorphicComponent<{
+    items?: Item[];
+    groupName?: string;
+    cleanItems?: CleanItem[];
+    collapsable?: boolean;
+    editable?: boolean;
+    updateItem?: ComponentProps<TreeEditorItem>["updateItem"];
+}, {
+    click: CustomEvent<{
+        item: Item;
+    }>;
+    change: CustomEvent<{
+        items: Item[];
+    }>;
+    input: CustomEvent<{
+        item: Item;
+        items: Item[];
+    }>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    append: {
+        item: any;
+        doUpdateItem: any;
     };
-    slots: {
-        append: {
-            item: any;
-            doUpdateItem: any;
-        };
-        title: {
-            item: any;
-            doUpdateItem: any;
-        };
+    title: {
+        item: any;
+        doUpdateItem: any;
     };
-};
-export type TreeEditorProps = typeof __propDef.props;
-export type TreeEditorEvents = typeof __propDef.events;
-export type TreeEditorSlots = typeof __propDef.slots;
-export default class TreeEditor extends SvelteComponent<TreeEditorProps, TreeEditorEvents, TreeEditorSlots> {
-}
-export {};
+}, {}, string>;
+type TreeEditor = InstanceType<typeof TreeEditor>;
+export default TreeEditor;

package/dist/components/simple/forms/TreeEditorItem.svelte

@@ -1,54 +1,89 @@
-<script>import Sortable from "sortablejs";
-import { onMount } from "svelte";
-import Icon from "../media/Icon.svelte";
-import Button from "../buttons/Button.svelte";
-import { slide } from "svelte/transition";
-import { createEventDispatcher } from "svelte";
-let dispatch = createEventDispatcher();
-export let title, id, subtitle = void 0, group, animationDuration = 150, expanded = true, subItems = [], sortable = void 0, collapsable = true, editable = true, data = void 0, updateItem = void 0;
-let subItemList, mounted = false;
-onMount(() => {
-  mounted = true;
-  initSortable();
-});
-function initSortable() {
-  if (!mounted)
-    return;
-  sortable = Sortable.create(subItemList, {
-    group,
-    handle: ".handle",
-    animation: animationDuration,
-    ghostClass: "ghost-drag-element",
-    onEnd(ev) {
-      dispatch("end", { ev });
+<script lang="ts">
+  import Sortable from 'sortablejs';
+  import { onMount, type ComponentProps } from "svelte";
+  import type TreeEditor from './TreeEditor.svelte';
+  import Icon from '../media/Icon.svelte';
+  import Button from '../buttons/Button.svelte';
+  import { slide } from 'svelte/transition';
+  import { createEventDispatcher } from 'svelte';
+  import type { Item } from './TreeEditor.svelte';
+
+  let dispatch = createEventDispatcher<{
+    'change': {
+      ev: Sortable.SortableEvent
+    },
+    'end': {
+      ev: Sortable.SortableEvent
     },
-    onChange(ev) {
-      dispatch("change", { ev });
+    'input': {
+      item: Item,
+      inputData?: any
     },
-    onUpdate(ev) {
+    'click': {
+      item: Item
     }
-  });
-}
-let currentItem;
-$:
-  currentItem = {
+  }>()
+
+  export let title: string,
+    id: number | string,
+    subtitle: string | undefined = undefined,
+    group: string,
+    animationDuration: number = 150,
+    expanded: boolean | undefined = true,
+    subItems: Item[] = [],
+    sortable: Sortable | undefined = undefined,
+    collapsable: boolean = true,
+    editable: boolean = true,
+    data: any = undefined,
+    updateItem: ((params: { item: Item, inputData?: any }) => Item) | undefined = undefined
+
+  let subItemList: HTMLElement,
+    mounted: boolean = false
+
+  onMount(() => {
+    mounted = true
+    initSortable()
+  })
+
+  function initSortable() {
+    if(!mounted) return
+
+    sortable = Sortable.create(subItemList, {
+      group: group,
+      handle: '.handle',
+      animation: animationDuration,
+      ghostClass: 'ghost-drag-element',
+      onEnd(ev) {
+        dispatch('end', { ev })
+      },
+      onChange(ev) {
+        dispatch('change', { ev })
+      },
+      onUpdate(ev) {
+      }
+    })
+  }
+
+  let currentItem: Item
+  $: currentItem = {
     id,
     title,
     expanded,
     sortable,
     children: subItems,
-    data
-  };
-$:
-  if (!!subItems)
-    initSortable();
-function doUpdateItem(item, inputData) {
-  let newItem = item;
-  if (!!updateItem) {
-    newItem = updateItem({ item, inputData });
+    data: data
+  }
+
+  $: if(!!subItems) initSortable()
+
+  function doUpdateItem(item: Item, inputData: any) {
+    let newItem = item
+    if(!!updateItem) {
+      newItem = updateItem({ item, inputData })
+    }
+
+    dispatch('input', { item: newItem })
   }
-  dispatch("input", { item: newItem });
-}
 </script>
 
 <li 

package/dist/components/simple/forms/TreeEditorItem.svelte.d.ts

@@ -1,55 +1,59 @@
-import { SvelteComponent } from "svelte";
 import Sortable from 'sortablejs';
 import type { Item } from './TreeEditor.svelte';
-declare const __propDef: {
-    props: {
-        title: string;
-        id: number | string;
-        subtitle?: string | undefined;
-        group: string;
-        animationDuration?: number | undefined;
-        expanded?: boolean | undefined;
-        subItems?: Item[] | undefined;
-        sortable?: Sortable | undefined;
-        collapsable?: boolean | undefined;
-        editable?: boolean | undefined;
-        data?: any;
-        updateItem?: ((params: {
-            item: Item;
-            inputData?: any;
-        }) => Item) | 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<{
-            ev: Sortable.SortableEvent;
-        }>;
-        end: CustomEvent<{
-            ev: Sortable.SortableEvent;
-        }>;
-        input: CustomEvent<{
-            item: Item;
-            inputData?: any;
-        }>;
-        click: CustomEvent<{
-            item: Item;
-        }>;
-    } & {
-        [evt: string]: CustomEvent<any>;
+    z_$$bindings?: Bindings;
+}
+declare const TreeEditorItem: $$__sveltets_2_IsomorphicComponent<{
+    title: string;
+    id: number | string;
+    subtitle?: string | undefined;
+    group: string;
+    animationDuration?: number;
+    expanded?: boolean | undefined;
+    subItems?: Item[];
+    sortable?: Sortable | undefined;
+    collapsable?: boolean;
+    editable?: boolean;
+    data?: any;
+    updateItem?: ((params: {
+        item: Item;
+        inputData?: any;
+    }) => Item) | undefined;
+}, {
+    change: CustomEvent<{
+        ev: Sortable.SortableEvent;
+    }>;
+    end: CustomEvent<{
+        ev: Sortable.SortableEvent;
+    }>;
+    input: CustomEvent<{
+        item: Item;
+        inputData?: any;
+    }>;
+    click: CustomEvent<{
+        item: Item;
+    }>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    title: {
+        item: any;
+        doUpdateItem: any;
     };
-    slots: {
-        title: {
-            item: any;
-            doUpdateItem: any;
-        };
-        append: {
-            item: any;
-            doUpdateItem: any;
-        };
+    append: {
+        item: any;
+        doUpdateItem: any;
     };
-};
-export type TreeEditorItemProps = typeof __propDef.props;
-export type TreeEditorItemEvents = typeof __propDef.events;
-export type TreeEditorItemSlots = typeof __propDef.slots;
-export default class TreeEditorItem extends SvelteComponent<TreeEditorItemProps, TreeEditorItemEvents, TreeEditorItemSlots> {
-}
-export {};
+}, {}, string>;
+type TreeEditorItem = InstanceType<typeof TreeEditorItem>;
+export default TreeEditorItem;

package/dist/components/simple/forms/VerticalSwitch.svelte

@@ -1,4 +1,14 @@
-<script>export let value = false, height = "60px", width = "30px", rounded = false, backgroundColor = "#90CAF9", selectedOptionColor = backgroundColor, sliderColor = "white", optionColor = sliderColor, fontSize = "11px", animationDuration = "0.1s";
+<script lang="ts">
+  export let value = false,
+    height = "60px",
+    width = "30px",
+    rounded = false,
+    backgroundColor = "#90CAF9",
+    selectedOptionColor: string = backgroundColor,
+    sliderColor = "white",
+    optionColor: string = sliderColor,
+    fontSize = "11px",
+    animationDuration = "0.1s";
 </script>
 
 <div

package/dist/components/simple/forms/VerticalSwitch.svelte.d.ts

@@ -1,30 +1,34 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        value?: boolean | undefined;
-        height?: string | undefined;
-        width?: string | undefined;
-        rounded?: boolean | undefined;
-        backgroundColor?: string | undefined;
-        selectedOptionColor?: string | undefined;
-        sliderColor?: string | undefined;
-        optionColor?: string | undefined;
-        fontSize?: string | undefined;
-        animationDuration?: 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: {
-        change: Event;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        trueOption: {};
-        falseOption: {};
-    };
-};
-export type VerticalSwitchProps = typeof __propDef.props;
-export type VerticalSwitchEvents = typeof __propDef.events;
-export type VerticalSwitchSlots = typeof __propDef.slots;
-export default class VerticalSwitch extends SvelteComponent<VerticalSwitchProps, VerticalSwitchEvents, VerticalSwitchSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const VerticalSwitch: $$__sveltets_2_IsomorphicComponent<{
+    value?: boolean;
+    height?: string;
+    width?: string;
+    rounded?: boolean;
+    backgroundColor?: string;
+    selectedOptionColor?: string;
+    sliderColor?: string;
+    optionColor?: string;
+    fontSize?: string;
+    animationDuration?: string;
+}, {
+    change: Event;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    trueOption: {};
+    falseOption: {};
+}, {}, string>;
+type VerticalSwitch = InstanceType<typeof VerticalSwitch>;
+export default VerticalSwitch;