@likable-hair/svelte 3.3.20 → 3.3.21

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

@@ -1,61 +1,23 @@
-<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 context="module"></script>
 
-    if (labelElement) {
-      legendWidth = labelElement.offsetWidth * 0.8 + 8;
-    }
-  });
-
-  function handleFocus(): void {
-    focused = true;
-  }
-
-  function handleBlur(): void {
-    focused = false;
+<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) {
+});
+function handleFocus() {
+  focused = true;
+}
+function handleBlur() {
+  focused = false;
+}
+$:
+  if (labelElement) {
     legendWidth = !value && !focused ? 0 : labelElement.offsetWidth * 0.8 + 8;
   }
 </script>

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

@@ -1,58 +1,54 @@
+import { SvelteComponent } from "svelte";
 export type VariantOptions = "outlined" | "boxed";
-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;
+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;
     };
-    z_$$bindings?: Bindings;
+    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> {
 }
-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;
+export {};

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

@@ -1,150 +1,104 @@
-<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()
-      }
-    })
-  }
-
-  $: if(!!items) initSortable() 
-
-  function handleEnd(event: CustomEvent<{ ev: Sortable.SortableEvent }>) {
-    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: 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)
+<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();
     }
-
-    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])
-      }
+  });
+}
+$:
+  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);
     }
-
-    return newItems
   }
-
-  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
-      }
+  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);
+  }
+  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]);
     }
   }
-
-  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
-      }
-    })
+  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;
+    }
   }
-
-  $: cleanItems = convertItemsInClean(items)
+}
+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);
 </script>
 
 {#key rerender}

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

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

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

@@ -1,89 +1,54 @@
-<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
+<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 });
     },
-    'input': {
-      item: Item,
-      inputData?: any
+    onChange(ev) {
+      dispatch("change", { ev });
     },
-    'click': {
-      item: Item
+    onUpdate(ev) {
     }
-  }>()
-
-  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 = {
+  });
+}
+let currentItem;
+$:
+  currentItem = {
     id,
     title,
     expanded,
     sortable,
     children: subItems,
-    data: data
-  }
-
-  $: if(!!subItems) initSortable()
-
-  function doUpdateItem(item: Item, inputData: any) {
-    let newItem = item
-    if(!!updateItem) {
-      newItem = updateItem({ item, inputData })
-    }
-
-    dispatch('input', { item: newItem })
+    data
+  };
+$:
+  if (!!subItems)
+    initSortable();
+function doUpdateItem(item, inputData) {
+  let newItem = item;
+  if (!!updateItem) {
+    newItem = updateItem({ item, inputData });
   }
+  dispatch("input", { item: newItem });
+}
 </script>
 
 <li