@likable-hair/svelte 3.3.20 → 3.3.21

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

@@ -1,290 +1,180 @@
-<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;
-          }
-        }
+<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);
       }
-
-      for(const head of [...headers, { value: 'slot-append' }]) {
-        let th
-        if(head.value == 'slot-append') {
-          th = document.getElementsByClassName(head.value).item(0) as HTMLElement
+      if (!!th) {
+        let widthWihtPadding;
+        if (!!resizedColumnSizeWithPadding[head.value]) {
+          widthWihtPadding = resizedColumnSizeWithPadding[head.value];
         } else {
-          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`
+          widthWihtPadding = th.getBoundingClientRect().width;
+          resizedColumnSizeWithPadding[head.value] = widthWihtPadding;
         }
       }
-
-      let table = document.getElementsByClassName('table')[0] as HTMLElement
-      table.classList.add('resizable')
-
-      resizeObserver = new ResizeObserver(() => {
-        updateRemainingWidth();
-      });
-      resizeObserver.observe(tableContainer);
-
-      return () => {
-        resizeObserver?.disconnect();
-      };
     }
-  })
-
-
-  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
-        }
+    for (const head of [...headers, { value: "slot-append" }]) {
+      let th;
+      if (head.value == "slot-append") {
+        th = document.getElementsByClassName(head.value).item(0);
       } else {
-        sortedBy = header.value
-        sortDirection = 'asc'
-        sortModify = header.sortModify
+        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`;
       }
-      dispatch('sort', {
-        sortedBy, sortDirection, sortModify
-      })
     }
-  }
-
-  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);
+    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;
       }
     } else {
-      dispatch('rowClick', { item });
+      sortedBy = header.value;
+      sortDirection = "asc";
+      sortModify = header.sortModify;
     }
+    dispatch("sort", {
+      sortedBy,
+      sortDirection,
+      sortModify
+    });
+  }
 }
-
-  function formatDate(dateTime: DateTime, dateFormat: ColumnDate['params']): string  {
-    return dateTime.setLocale(dateFormat.locale).toFormat(dateFormat.format)
+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 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
-            })
-          }
+}
+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);
         }
-      }
-
-      function mouseUpHandler(e: MouseEvent) {
-        if(!!th) {
-          resizing = false
-          let { paddingLeft, paddingRight } = getComputedStyle(th)
-          width = th.getBoundingClientRect().width - parseFloat(paddingLeft) - parseFloat(paddingRight)
+        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 mouseDownHandler(e: MouseEvent) {
-        if(!!th) {
-          e.stopPropagation()
-          resizing = true
-          let { paddingLeft, paddingRight } = getComputedStyle(th)
-          width = th.getBoundingClientRect().width - parseFloat(paddingLeft) - parseFloat(paddingRight)
-        }
+    }, mouseUpHandler = function(e) {
+      if (!!th) {
+        resizing = false;
+        let { paddingLeft, paddingRight } = getComputedStyle(th);
+        width = th.getBoundingClientRect().width - parseFloat(paddingLeft) - parseFloat(paddingRight);
       }
-
-      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)
-        }
+    }, mouseDownHandler = function(e) {
+      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);
+      }
+    };
   }
-
-  $: 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);
-      }
-    }
-  }
-
-  function resizeHeader(th: HTMLElement, header: { value: string, minWidth?: string, maxWidth?: string }){
-    if (!resizedColumnSizeWithPadding[header.value]) {
-      let widthWihtPadding = th.getBoundingClientRect().width
-      resizedColumnSizeWithPadding[header.value] = widthWihtPadding;
+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);
     }
-    let { paddingLeft, paddingRight } = getComputedStyle(th);
-    let width = resizedColumnSizeWithPadding[header.value] - parseFloat(paddingLeft) - parseFloat(paddingRight);
-    th.style.width = `${width}px`
   }
-
+}
+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`;
+}
 </script>
 
 {#if !!items && Array.isArray(items)}

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

@@ -1,3 +1,4 @@
+import { SvelteComponent } from "svelte";
 export type HeaderType = ColumnBoolean | ColumnString | ColumnNumber | ColumnDate | ColumnIcon | ColumnCheckBox | ColumnCustom;
 export type Header = {
     value: string;
@@ -27,76 +28,71 @@ import '../../../css/main.css';
 import './SimpleTable.css';
 import type { ColumnBoolean, ColumnCheckBox, ColumnCustom, ColumnDate, ColumnIcon, ColumnNumber, ColumnString } from './columnTypes';
 import type { FilterBuilder } from '../../..';
-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: {
+        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;
     };
-    z_$$bindings?: Bindings;
-}
-declare const SimpleTable: $$__sveltets_2_IsomorphicComponent<{
-    class?: {
-        container?: string;
-        header?: string;
-        row?: string;
-        cell?: string;
-    };
-    headers?: Header[];
-    items?: Item[];
-    sortedBy?: string | undefined;
-    sortDirection?: "asc" | "desc";
-    resizableColumns?: boolean;
-    resizedColumnSizeWithPadding?: {
-        [value: string]: number;
-    };
-    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;
+    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>;
     };
-    custom: {
-        index: any;
-        columnIndex: any;
-        header: Header;
-        item: Item;
+    slots: {
+        header: {
+            head: Header;
+        };
+        headerLabel: {};
+        append: {
+            index: any;
+            item: Item;
+        };
+        custom: {
+            index: any;
+            columnIndex: any;
+            header: Header;
+            item: Item;
+        };
+        rowActions: {
+            index: any;
+            item: Item;
+        };
     };
-    rowActions: {
-        index: any;
-        item: Item;
-    };
-}, {}, string>;
-type SimpleTable = InstanceType<typeof SimpleTable>;
-export default SimpleTable;
+};
+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 {};

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

@@ -1,19 +1,8 @@
-<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>import "../../../css/main.css";
+import "./CircularLoader.css";
+let clazz = "";
+export { clazz as class };
+export let loading = true;
 </script>
 
 <svg

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

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

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

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