@likable-hair/svelte 3.3.21 → 3.3.22

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

@@ -1,180 +1,290 @@
-<script context="module"></script>
-
-<script>import "../../../css/main.css";
-import "./SimpleTable.css";
-import Icon from "../media/Icon.svelte";
-import { createEventDispatcher, onMount, tick } from "svelte";
-let clazz = {};
-export { clazz as class };
-const dispatch = createEventDispatcher();
-export let headers = [], items = [], sortedBy = void 0, sortDirection = "asc", resizableColumns = false, resizedColumnSizeWithPadding = {}, pointerOnRowHover = false, doubleClickActive = false, doubleClickDelay = 250;
-let clickTimeout = void 0, sortModify, tableContainer, mainHeader, remainingWidth = 0, resizeObserver;
-export let calculateRowStyles = void 0;
-export let calculateRowClasses = void 0;
-onMount(() => {
-  if (resizableColumns) {
-    for (const head of [...headers, { value: "slot-append" }]) {
-      let th;
-      if (head.value == "slot-append") {
-        th = document.getElementsByClassName(head.value).item(0);
-      } else {
-        th = document.getElementById(head.value);
+<script context="module" lang="ts">
+  export type HeaderType = ColumnBoolean |
+    ColumnString |
+    ColumnNumber |
+    ColumnDate |
+    ColumnIcon |
+    ColumnCheckBox |
+    ColumnCustom
+
+  export type Header = {
+    value: string
+    label: string
+    type: HeaderType
+    width?: string
+    minWidth?: string
+    sortable?: boolean
+    sortModify?: (params: { builder: FilterBuilder, sortDirection: 'asc' | 'desc' }) => FilterBuilder
+    /* eslint-disable  @typescript-eslint/no-explicit-any */
+    data?: { [key: string]: any }
+  };
+
+  export interface Item {
+    [key: string]: any;
+  }
+
+  export type CalculateRowStyles = (item: Item) => {
+    backgroundColor?: string;
+    color?: string;
+    fontWeight?: string;
+  };
+
+  export type CalculateRowClasses = (item: Item) => string | undefined;
+</script>
+
+<script lang="ts">
+  import '../../../css/main.css'
+  import './SimpleTable.css'
+  import Icon from '../media/Icon.svelte';
+  import { createEventDispatcher, onMount, tick } from 'svelte';
+  import type { DateTime } from 'luxon';
+  import type { ColumnBoolean, ColumnCheckBox, ColumnCustom, ColumnDate, ColumnIcon, ColumnNumber, ColumnString } from './columnTypes';
+  import type { FilterBuilder } from '../../..';
+
+  let clazz: {
+    container?: string;
+    header?: string;
+    row?: string;
+    cell?: string;
+  } = {};
+	export { clazz as class };
+
+  const dispatch = createEventDispatcher<{
+    'sort': {
+      sortedBy: string | undefined,
+      sortDirection: string
+      sortModify: Header['sortModify']
+    },
+    'rowClick': {
+      item: Item
+    },
+    'rowDoubleClick': {
+      item: Item
+    },
+    columnResize: {
+      id: string,
+      newWidthPx: number
+    }
+  }>()
+
+  export let headers: Header[] = [],
+    items: Item[] = [],
+    sortedBy: string | undefined = undefined,
+    sortDirection: "asc" | "desc" = "asc",
+    resizableColumns: boolean = false,
+    resizedColumnSizeWithPadding: { [value: string]: number } = {},
+    pointerOnRowHover: boolean = false,
+    doubleClickActive: boolean = false,
+    doubleClickDelay: number = 250;
+
+  let clickTimeout: NodeJS.Timeout | undefined = undefined,
+    sortModify: Header['sortModify'],
+    tableContainer: HTMLElement,
+    mainHeader: HTMLElement,
+    remainingWidth: number = 0,
+    resizeObserver: ResizeObserver
+
+
+  export let calculateRowStyles: CalculateRowStyles | undefined = undefined;
+  export let calculateRowClasses: CalculateRowClasses | undefined = undefined;
+
+  onMount(() => {
+    if(resizableColumns) {
+      for(const head of [...headers, { value: 'slot-append' }]) {
+        let th
+        if(head.value == 'slot-append') {
+          th = document.getElementsByClassName(head.value).item(0) as HTMLElement
+        } else {
+          th = document.getElementById(head.value) as HTMLElement
+        }
+        if(!!th) {
+          let widthWihtPadding;
+          if (!!resizedColumnSizeWithPadding[head.value]) {
+            widthWihtPadding = resizedColumnSizeWithPadding[head.value];
+          } else {
+            widthWihtPadding = th.getBoundingClientRect().width;
+            resizedColumnSizeWithPadding[head.value] = widthWihtPadding;
+          }
+        }
       }
-      if (!!th) {
-        let widthWihtPadding;
-        if (!!resizedColumnSizeWithPadding[head.value]) {
-          widthWihtPadding = resizedColumnSizeWithPadding[head.value];
+
+      for(const head of [...headers, { value: 'slot-append' }]) {
+        let th
+        if(head.value == 'slot-append') {
+          th = document.getElementsByClassName(head.value).item(0) as HTMLElement
         } else {
-          widthWihtPadding = th.getBoundingClientRect().width;
-          resizedColumnSizeWithPadding[head.value] = widthWihtPadding;
+          th = document.getElementById(head.value) as HTMLElement
+        }
+        if(!!th) {
+          let { paddingLeft, paddingRight } = getComputedStyle(th);
+          let width = resizedColumnSizeWithPadding[head.value] - parseFloat(paddingLeft) - parseFloat(paddingRight);
+          th.style.width = `${width}px`
         }
       }
+
+      let table = document.getElementsByClassName('table')[0] as HTMLElement
+      table.classList.add('resizable')
+
+      resizeObserver = new ResizeObserver(() => {
+        updateRemainingWidth();
+      });
+      resizeObserver.observe(tableContainer);
+
+      return () => {
+        resizeObserver?.disconnect();
+      };
     }
-    for (const head of [...headers, { value: "slot-append" }]) {
-      let th;
-      if (head.value == "slot-append") {
-        th = document.getElementsByClassName(head.value).item(0);
+  })
+
+
+  function handleHeaderClick(header: Header) {
+    if(header.sortable) {
+      if(!!sortedBy && header.value == sortedBy) {
+        if(sortDirection == 'asc') sortDirection = 'desc'
+        else if(sortDirection == 'desc') {
+          sortedBy = undefined
+          sortModify = undefined
+        }
       } else {
-        th = document.getElementById(head.value);
-      }
-      if (!!th) {
-        let { paddingLeft, paddingRight } = getComputedStyle(th);
-        let width = resizedColumnSizeWithPadding[head.value] - parseFloat(paddingLeft) - parseFloat(paddingRight);
-        th.style.width = `${width}px`;
+        sortedBy = header.value
+        sortDirection = 'asc'
+        sortModify = header.sortModify
       }
+      dispatch('sort', {
+        sortedBy, sortDirection, sortModify
+      })
     }
-    let table = document.getElementsByClassName("table")[0];
-    table.classList.add("resizable");
-    resizeObserver = new ResizeObserver(() => {
-      updateRemainingWidth();
-    });
-    resizeObserver.observe(tableContainer);
-    return () => {
-      resizeObserver?.disconnect();
-    };
-  }
-});
-function handleHeaderClick(header) {
-  if (header.sortable) {
-    if (!!sortedBy && header.value == sortedBy) {
-      if (sortDirection == "asc")
-        sortDirection = "desc";
-      else if (sortDirection == "desc") {
-        sortedBy = void 0;
-        sortModify = void 0;
+  }
+
+  function handleRowClick(item: { [key: string]: any }) {
+    if(doubleClickActive) {
+      if (clickTimeout) {
+        clearTimeout(clickTimeout);
+        clickTimeout = undefined;
+    
+        dispatch('rowDoubleClick', { item });
+      } else {
+        clickTimeout = setTimeout(() => {
+          dispatch('rowClick', { item });
+          clickTimeout = undefined;
+        }, doubleClickDelay);
       }
     } else {
-      sortedBy = header.value;
-      sortDirection = "asc";
-      sortModify = header.sortModify;
+      dispatch('rowClick', { item });
     }
-    dispatch("sort", {
-      sortedBy,
-      sortDirection,
-      sortModify
-    });
-  }
 }
-function handleRowClick(item) {
-  if (doubleClickActive) {
-    if (clickTimeout) {
-      clearTimeout(clickTimeout);
-      clickTimeout = void 0;
-      dispatch("rowDoubleClick", { item });
-    } else {
-      clickTimeout = setTimeout(() => {
-        dispatch("rowClick", { item });
-        clickTimeout = void 0;
-      }, doubleClickDelay);
-    }
-  } else {
-    dispatch("rowClick", { item });
+
+  function formatDate(dateTime: DateTime, dateFormat: ColumnDate['params']): string  {
+    return dateTime.setLocale(dateFormat.locale).toFormat(dateFormat.format)
   }
-}
-function formatDate(dateTime, dateFormat) {
-  return dateTime.setLocale(dateFormat.locale).toFormat(dateFormat.format);
-}
-function resize(node) {
-  let th = node.parentElement;
-  let thead = document.getElementsByClassName("thead").item(0);
-  if (!!th && !!thead && thead instanceof HTMLElement) {
-    let mouseMoveHandler = function(e) {
-      if (resizing && !!th) {
-        width += e.movementX;
-        let { paddingLeft, paddingRight } = getComputedStyle(th);
-        let minWidth = headers.find((h) => h.value === th.id)?.minWidth;
-        let minWidthPx = void 0;
-        if (!!minWidth && minWidth.endsWith("px")) {
-          minWidthPx = parseInt(minWidth, 10);
-        }
-        let actualMinWidth = (minWidthPx || 50) - parseFloat(paddingLeft) - parseFloat(paddingRight);
-        if (width > actualMinWidth) {
-          th.style.width = width + "px";
-          resizedColumnSizeWithPadding[th.id] = th.getBoundingClientRect().width;
-          dispatch("columnResize", {
-            id: th.id,
-            newWidthPx: width
-          });
+
+
+  function resize(node: HTMLElement) {
+    let th: HTMLElement | null = node.parentElement
+    let thead: Element | null = document.getElementsByClassName('thead').item(0)
+
+    if(!!th && !!thead && thead instanceof HTMLElement) {
+      let resizing = false
+      let { width } = th.getBoundingClientRect()
+
+      function mouseMoveHandler(e: MouseEvent) {
+        if(resizing && !!th) {
+          width += e.movementX
+          let { paddingLeft, paddingRight } = getComputedStyle(th)
+
+          let minWidth: string | undefined = headers.find(h => h.value === th.id)?.minWidth
+          let minWidthPx: number | undefined = undefined
+          if(!!minWidth && minWidth.endsWith('px')) {
+            minWidthPx = parseInt(minWidth, 10)
+          }
+
+          let actualMinWidth = (minWidthPx || 50) - parseFloat(paddingLeft) - parseFloat(paddingRight)
+          if(width > actualMinWidth) {
+            th.style.width = width + 'px'
+            resizedColumnSizeWithPadding[th.id] = th.getBoundingClientRect().width
+            dispatch('columnResize', {
+              id: th.id,
+              newWidthPx: width
+            })
+          }
         }
       }
-    }, mouseUpHandler = function(e) {
-      if (!!th) {
-        resizing = false;
-        let { paddingLeft, paddingRight } = getComputedStyle(th);
-        width = th.getBoundingClientRect().width - parseFloat(paddingLeft) - parseFloat(paddingRight);
+
+      function mouseUpHandler(e: MouseEvent) {
+        if(!!th) {
+          resizing = false
+          let { paddingLeft, paddingRight } = getComputedStyle(th)
+          width = th.getBoundingClientRect().width - parseFloat(paddingLeft) - parseFloat(paddingRight)
+        }
       }
-    }, mouseDownHandler = function(e) {
-      if (!!th) {
-        e.stopPropagation();
-        resizing = true;
-        let { paddingLeft, paddingRight } = getComputedStyle(th);
-        width = th.getBoundingClientRect().width - parseFloat(paddingLeft) - parseFloat(paddingRight);
+
+      function mouseDownHandler(e: MouseEvent) {
+        if(!!th) {
+          e.stopPropagation()
+          resizing = true
+          let { paddingLeft, paddingRight } = getComputedStyle(th)
+          width = th.getBoundingClientRect().width - parseFloat(paddingLeft) - parseFloat(paddingRight)
+        }
       }
-    };
-    let resizing = false;
-    let { width } = th.getBoundingClientRect();
-    node.addEventListener("mousedown", mouseDownHandler);
-    document.addEventListener("mouseup", mouseUpHandler);
-    document.addEventListener("mousemove", mouseMoveHandler);
-    return {
-      destroy() {
-        node.removeEventListener("mousedown", mouseDownHandler);
-        document.removeEventListener("mouseup", mouseUpHandler);
-        document.removeEventListener("mousemove", mouseMoveHandler);
+
+      node.addEventListener('mousedown', mouseDownHandler)
+      document.addEventListener('mouseup', mouseUpHandler)
+      document.addEventListener('mousemove', mouseMoveHandler)
+
+
+      return {
+        destroy() {
+          node.removeEventListener('mousedown', mouseDownHandler)
+          document.removeEventListener('mouseup', mouseUpHandler)
+          document.removeEventListener('mousemove', mouseMoveHandler)
+        }
       }
-    };
+    }
   }
-}
-$:
-  if (resizableColumns && !!tableContainer && resizableColumns && headers.length > 0 && resizedColumnSizeWithPadding && mainHeader) {
+
+  $: if (
+    resizableColumns &&
+    !!tableContainer &&
+    resizableColumns &&
+    headers.length > 0 &&
+    resizedColumnSizeWithPadding &&
+    mainHeader
+  ) {
     tick().then(updateRemainingWidth);
   }
-async function updateRemainingWidth() {
-  if (tableContainer != null && !!tableContainer) {
-    const containerWidth = tableContainer?.getBoundingClientRect().width - 30;
-    if (containerWidth) {
-      const totalResizableWidth = headers.reduce((sum, head) => {
-        let th = document.getElementById(head.value);
-        if (!!th) {
-          resizeHeader(th, head);
-        }
-        const width = th?.getBoundingClientRect().width || 0;
-        return sum + width + 1;
-      }, 0);
-      const extraStaticWidth = Array.from(mainHeader.querySelectorAll("th.non-resizable, th.slot-append, th.customize-headers")).reduce((sum, th) => sum + th.getBoundingClientRect().width + 1, 0);
-      remainingWidth = Math.max(0, containerWidth - totalResizableWidth - extraStaticWidth);
+  
+  async function updateRemainingWidth() {
+    if(tableContainer != null && !!tableContainer) {
+      const containerWidth = tableContainer?.getBoundingClientRect().width - 30;
+
+      if(containerWidth){
+        const totalResizableWidth = headers.reduce((sum, head) => {
+          let th = document.getElementById(head.value)
+          if(!!th) {
+            resizeHeader(th, head)
+          }
+          const width = th?.getBoundingClientRect().width || 0
+          return sum + width + 1;
+        }, 0);
+    
+        const extraStaticWidth = Array.from(mainHeader.querySelectorAll('th.non-resizable, th.slot-append, th.customize-headers'))
+          .reduce((sum, th) => sum + th.getBoundingClientRect().width + 1, 0);
+    
+        remainingWidth = Math.max(0, containerWidth - totalResizableWidth - extraStaticWidth);
+      }
     }
   }
-}
-function resizeHeader(th, header) {
-  if (!resizedColumnSizeWithPadding[header.value]) {
-    let widthWihtPadding = th.getBoundingClientRect().width;
-    resizedColumnSizeWithPadding[header.value] = widthWihtPadding;
-  }
-  let { paddingLeft, paddingRight } = getComputedStyle(th);
-  let width = resizedColumnSizeWithPadding[header.value] - parseFloat(paddingLeft) - parseFloat(paddingRight);
-  th.style.width = `${width}px`;
-}
+
+  function resizeHeader(th: HTMLElement, header: { value: string, minWidth?: string, maxWidth?: string }){
+    if (!resizedColumnSizeWithPadding[header.value]) {
+      let widthWihtPadding = th.getBoundingClientRect().width
+      resizedColumnSizeWithPadding[header.value] = widthWihtPadding;
+    }
+    let { paddingLeft, paddingRight } = getComputedStyle(th);
+    let width = resizedColumnSizeWithPadding[header.value] - parseFloat(paddingLeft) - parseFloat(paddingRight);
+    th.style.width = `${width}px`
+  }
+
 </script>
 
 {#if !!items && Array.isArray(items)}

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

@@ -1,4 +1,3 @@
-import { SvelteComponent } from "svelte";
 export type HeaderType = ColumnBoolean | ColumnString | ColumnNumber | ColumnDate | ColumnIcon | ColumnCheckBox | ColumnCustom;
 export type Header = {
     value: string;
@@ -28,71 +27,76 @@ import '../../../css/main.css';
 import './SimpleTable.css';
 import type { ColumnBoolean, ColumnCheckBox, ColumnCustom, ColumnDate, ColumnIcon, ColumnNumber, ColumnString } from './columnTypes';
 import type { FilterBuilder } from '../../..';
-declare const __propDef: {
-    props: {
-        class?: {
-            container?: string | undefined;
-            header?: string | undefined;
-            row?: string | undefined;
-            cell?: string | undefined;
-        } | undefined;
-        headers?: Header[] | undefined;
-        items?: Item[] | undefined;
-        sortedBy?: string | undefined;
-        sortDirection?: "desc" | "asc" | undefined;
-        resizableColumns?: boolean | undefined;
-        resizedColumnSizeWithPadding?: {
-            [value: string]: number;
-        } | undefined;
-        pointerOnRowHover?: boolean | undefined;
-        doubleClickActive?: boolean | undefined;
-        doubleClickDelay?: number | undefined;
-        calculateRowStyles?: CalculateRowStyles | undefined;
-        calculateRowClasses?: CalculateRowClasses | 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: {
-        sort: CustomEvent<{
-            sortedBy: string | undefined;
-            sortDirection: string;
-            sortModify: Header['sortModify'];
-        }>;
-        rowClick: CustomEvent<{
-            item: Item;
-        }>;
-        rowDoubleClick: CustomEvent<{
-            item: Item;
-        }>;
-        columnResize: CustomEvent<{
-            id: string;
-            newWidthPx: number;
-        }>;
-    } & {
-        [evt: string]: CustomEvent<any>;
+    z_$$bindings?: Bindings;
+}
+declare const SimpleTable: $$__sveltets_2_IsomorphicComponent<{
+    class?: {
+        container?: string;
+        header?: string;
+        row?: string;
+        cell?: string;
     };
-    slots: {
-        header: {
-            head: Header;
-        };
-        headerLabel: {};
-        append: {
-            index: any;
-            item: Item;
-        };
-        custom: {
-            index: any;
-            columnIndex: any;
-            header: Header;
-            item: Item;
-        };
-        rowActions: {
-            index: any;
-            item: Item;
-        };
+    headers?: Header[];
+    items?: Item[];
+    sortedBy?: string | undefined;
+    sortDirection?: "asc" | "desc";
+    resizableColumns?: boolean;
+    resizedColumnSizeWithPadding?: {
+        [value: string]: number;
     };
-};
-export type SimpleTableProps = typeof __propDef.props;
-export type SimpleTableEvents = typeof __propDef.events;
-export type SimpleTableSlots = typeof __propDef.slots;
-export default class SimpleTable extends SvelteComponent<SimpleTableProps, SimpleTableEvents, SimpleTableSlots> {
-}
-export {};
+    pointerOnRowHover?: boolean;
+    doubleClickActive?: boolean;
+    doubleClickDelay?: number;
+    calculateRowStyles?: CalculateRowStyles | undefined;
+    calculateRowClasses?: CalculateRowClasses | undefined;
+}, {
+    sort: CustomEvent<{
+        sortedBy: string | undefined;
+        sortDirection: string;
+        sortModify: Header["sortModify"];
+    }>;
+    rowClick: CustomEvent<{
+        item: Item;
+    }>;
+    rowDoubleClick: CustomEvent<{
+        item: Item;
+    }>;
+    columnResize: CustomEvent<{
+        id: string;
+        newWidthPx: number;
+    }>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    header: {
+        head: Header;
+    };
+    headerLabel: {};
+    append: {
+        index: any;
+        item: Item;
+    };
+    custom: {
+        index: any;
+        columnIndex: any;
+        header: Header;
+        item: Item;
+    };
+    rowActions: {
+        index: any;
+        item: Item;
+    };
+}, {}, string>;
+type SimpleTable = InstanceType<typeof SimpleTable>;
+export default SimpleTable;

package/dist/components/simple/loaders/CircularLoader.svelte

@@ -1,8 +1,19 @@
-<script>import "../../../css/main.css";
-import "./CircularLoader.css";
-let clazz = "";
-export { clazz as class };
-export let loading = true;
+<script lang="ts">
+  import '../../../css/main.css'
+  import './CircularLoader.css'
+
+  let clazz: string = '';
+	export { clazz as class };
+
+  /*
+    Styles
+
+    --circular-loader-width
+    --circular-loader-height
+    --circular-loader-color
+  */
+
+  export let loading = true
 </script>
 
 <svg

package/dist/components/simple/loaders/CircularLoader.svelte.d.ts

@@ -1,19 +1,23 @@
-import { SvelteComponent } from "svelte";
 import '../../../css/main.css';
 import './CircularLoader.css';
-declare const __propDef: {
-    props: {
-        class?: string | undefined;
-        loading?: 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 CircularLoaderProps = typeof __propDef.props;
-export type CircularLoaderEvents = typeof __propDef.events;
-export type CircularLoaderSlots = typeof __propDef.slots;
-export default class CircularLoader extends SvelteComponent<CircularLoaderProps, CircularLoaderEvents, CircularLoaderSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const CircularLoader: $$__sveltets_2_IsomorphicComponent<{
+    class?: string;
+    loading?: boolean;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type CircularLoader = InstanceType<typeof CircularLoader>;
+export default CircularLoader;

package/dist/components/simple/loaders/Skeleton.svelte

@@ -1,5 +1,6 @@
-<script>import "../../../css/main.css";
-import "./Skeleton.css";
+<script lang="ts">
+  import '../../../css/main.css'
+  import './Skeleton.css'
 </script>
 
 <div