@likable-hair/svelte 3.3.21 → 3.3.22

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

@@ -1,23 +1,61 @@
-<script context="module"></script>
+<script lang="ts" context="module">
+  export type VariantOptions = "outlined" | "boxed";
+</script>
+
+<script lang="ts">
+  export let label = "",
+    placeholder = "",
+    color: string | null = null,
+    value: string | number = "",
+    disabled = false,
+    variant: VariantOptions = "outlined",
+    width = "100%",
+    height = "50px",
+    maxWidth: string | undefined = undefined,
+    minWidth: string | undefined = undefined,
+    textColor = "black",
+    borderWeight = "2px",
+    borderRadius = "5px",
+    borderColor: string | null = null,
+    focusBorderColor: string | null = null,
+    focusedBoxShadow: string | undefined = undefined,
+    backgroundColor: string | null = null,
+    padding: string | undefined = undefined,
+    paddingLeft: string | undefined = undefined,
+    paddingRight: string | undefined = undefined,
+    paddingBottom: string | undefined = undefined,
+    paddingTop: string | undefined = undefined,
+    fontSize: string | undefined = undefined,
+    type: "text" | "password" | "number" = "text",
+    readonly = false,
+    inputElement: HTMLElement | undefined = undefined,
+    autocomplete = true;
+
+  import { createId } from '@paralleldrive/cuid2';
+  import { onMount } from "svelte";
+
+  let inputId: string = createId(),
+    focused = false,
+    legendWidth = 0,
+    labelElement: HTMLElement | undefined = undefined;
+
+  onMount(() => {
+    console.warn('TextField component is going to be depracated. Please use SimpleTextField instead.')
 
-<script>export let label = "", placeholder = "", color = null, value = "", disabled = false, variant = "outlined", width = "100%", height = "50px", maxWidth = void 0, minWidth = void 0, textColor = "black", borderWeight = "2px", borderRadius = "5px", borderColor = null, focusBorderColor = null, focusedBoxShadow = void 0, backgroundColor = null, padding = void 0, paddingLeft = void 0, paddingRight = void 0, paddingBottom = void 0, paddingTop = void 0, fontSize = void 0, type = "text", readonly = false, inputElement = void 0, autocomplete = true;
-import { createId } from "@paralleldrive/cuid2";
-import { onMount } from "svelte";
-let inputId = createId(), focused = false, legendWidth = 0, labelElement = void 0;
-onMount(() => {
-  console.warn("TextField component is going to be depracated. Please use SimpleTextField instead.");
-  if (labelElement) {
-    legendWidth = labelElement.offsetWidth * 0.8 + 8;
+    if (labelElement) {
+      legendWidth = labelElement.offsetWidth * 0.8 + 8;
+    }
+  });
+
+  function handleFocus(): void {
+    focused = true;
+  }
+
+  function handleBlur(): void {
+    focused = false;
   }
-});
-function handleFocus() {
-  focused = true;
-}
-function handleBlur() {
-  focused = false;
-}
-$:
-  if (labelElement) {
+
+  $: if (labelElement) {
     legendWidth = !value && !focused ? 0 : labelElement.offsetWidth * 0.8 + 8;
   }
 </script>

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

@@ -1,54 +1,58 @@
-import { SvelteComponent } from "svelte";
 export type VariantOptions = "outlined" | "boxed";
-declare const __propDef: {
-    props: {
-        label?: string | undefined;
-        placeholder?: string | undefined;
-        color?: string | null | undefined;
-        value?: string | number | undefined;
-        disabled?: boolean | undefined;
-        variant?: VariantOptions | undefined;
-        width?: string | undefined;
-        height?: string | undefined;
-        maxWidth?: string | undefined;
-        minWidth?: string | undefined;
-        textColor?: string | undefined;
-        borderWeight?: string | undefined;
-        borderRadius?: string | undefined;
-        borderColor?: string | null | undefined;
-        focusBorderColor?: string | null | undefined;
-        focusedBoxShadow?: string | undefined;
-        backgroundColor?: string | null | undefined;
-        padding?: string | undefined;
-        paddingLeft?: string | undefined;
-        paddingRight?: string | undefined;
-        paddingBottom?: string | undefined;
-        paddingTop?: string | undefined;
-        fontSize?: string | undefined;
-        type?: "number" | "text" | "password" | undefined;
-        readonly?: boolean | undefined;
-        inputElement?: HTMLElement | undefined;
-        autocomplete?: 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: {
-        change: Event;
-        input: Event;
-        focus: FocusEvent;
-        blur: FocusEvent;
-        keydown: KeyboardEvent;
-        keypress: KeyboardEvent;
-        keyup: KeyboardEvent;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        'prepend-inner': {};
-        'append-inner': {};
-    };
-};
-export type TextfieldProps = typeof __propDef.props;
-export type TextfieldEvents = typeof __propDef.events;
-export type TextfieldSlots = typeof __propDef.slots;
-export default class Textfield extends SvelteComponent<TextfieldProps, TextfieldEvents, TextfieldSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const Textfield: $$__sveltets_2_IsomorphicComponent<{
+    label?: string;
+    placeholder?: string;
+    color?: string | null;
+    value?: string | number;
+    disabled?: boolean;
+    variant?: VariantOptions;
+    width?: string;
+    height?: string;
+    maxWidth?: string | undefined;
+    minWidth?: string | undefined;
+    textColor?: string;
+    borderWeight?: string;
+    borderRadius?: string;
+    borderColor?: string | null;
+    focusBorderColor?: string | null;
+    focusedBoxShadow?: string | undefined;
+    backgroundColor?: string | null;
+    padding?: string | undefined;
+    paddingLeft?: string | undefined;
+    paddingRight?: string | undefined;
+    paddingBottom?: string | undefined;
+    paddingTop?: string | undefined;
+    fontSize?: string | undefined;
+    type?: "text" | "password" | "number";
+    readonly?: boolean;
+    inputElement?: HTMLElement | undefined;
+    autocomplete?: boolean;
+}, {
+    change: Event;
+    input: Event;
+    focus: FocusEvent;
+    blur: FocusEvent;
+    keydown: KeyboardEvent;
+    keypress: KeyboardEvent;
+    keyup: KeyboardEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    'prepend-inner': {};
+    'append-inner': {};
+}, {}, string>;
+type Textfield = InstanceType<typeof Textfield>;
+export default Textfield;

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