@likable-hair/svelte 4.2.5 → 4.3.0

package/dist/components/composed/list/PaginatedTable.svelte

@@ -1,156 +1,364 @@
-<script lang="ts" generics="Item extends {[key: string]: any}, Data">import SimpleTable, {} from "../../simple/lists/SimpleTable.svelte";
-import Paginator from "../../simple/lists/Paginator.svelte";
-import Dropdown from "../forms/Dropdown.svelte";
-import {} from "svelte";
-import Filters from "../search/Filters.svelte";
-import SearchBar from "../search/SearchBar.svelte";
-import Converter from "../../../utils/filters/filters";
-import MediaQuery from "../../simple/common/MediaQuery.svelte";
-import QuickFilters from "../search/QuickFilters.svelte";
-import Checkbox from "../../simple/forms/Checkbox.svelte";
-import { QuickActions } from "../../..";
-let { headers = [], items = [], sortedBy = $bindable(undefined), sortDirection = $bindable("asc"), page = $bindable(1), maxPage = undefined, rowsPerPageOptions = [
-    { label: "20", value: 20 },
-    { label: "50", value: 50 },
-    { label: "100", value: 100 },
-], hideRowsPerPage = false, totalElements = undefined, rowsPerPage = $bindable(20), filters = $bindable(), quickFilters = $bindable(), searchBarColumns = undefined, searchBarVisible = true, quickFiltersVisible = false, lang = "en", dateLocale, multiEditTabs, searchBarPlaceholder = lang == 'en' ? "Type to search..." : "Scrivi per cercare...", editFilterMode = "one-edit", showActiveFilters = true, resizableColumns = false, resizedColumnSizeWithPadding = $bindable({}), pointerOnRowHover = undefined, doubleClickActive = false, doubleClickDelay = 250, searchTimeoutDelay = 300, hideSelectAll, showSelection, selectedItems = $bindable([]), selectionMode = 'multiple', selectedAll = $bindable(), uniqueKey = 'id', hideActions, actionsForSelectedItems = [], filterLabels, calculateRowStyles = undefined, calculateRowClasses = undefined, class: clazz = {}, onfiltersChange, onpaginationChange, onremoveFilter, onremoveAllFilters, customFilterChipSnippet, customFilterSnippet, filterAppendSnippet, onrowClick, onrowDoubleClick, appendSnippet, customSnippet, headerLabelSnippet, headerSnippet, onsort, footerSnippet, rangeDescriptorSnippet, searchBarSnippet, noDataSnippet, totalsSnippet, oncolumnResize, prependSnippet: prependSnippetInternal, ...rest } = $props();
-let searchBarInput = $state(), searchText = $state(), sortModify, searchTimeout, selectedIndexes = [];
-let rowsPerPageSelection = $state([]);
-$effect(() => {
+<script lang="ts" generics="Item extends {[key: string]: any}, Data">
+  import SimpleTable, {
+    type Header,
+  } from "../../simple/lists/SimpleTable.svelte";
+  import Paginator from "../../simple/lists/Paginator.svelte";
+  import Dropdown from "../forms/Dropdown.svelte";
+  import { type ComponentProps, type Snippet } from "svelte";
+  import Filters from "../search/Filters.svelte";
+  import SearchBar from "../search/SearchBar.svelte";
+  import type Builder from "../../../utils/filters/builder";
+  import Converter from "../../../utils/filters/filters";
+  import MediaQuery from "../../simple/common/MediaQuery.svelte";
+  import QuickFilters from "../search/QuickFilters.svelte";
+  import Checkbox from "../../simple/forms/Checkbox.svelte";
+  import { QuickActions } from "../../..";
+  import type { Action } from "../common/QuickActions.svelte";
+
+  interface Props extends Omit<ComponentProps<typeof SimpleTable<Item, Data>>, "class"> {
+    page?: NonNullable<ComponentProps<typeof Paginator>["page"]>;
+    maxPage?: ComponentProps<typeof Paginator>["maxPage"];
+    rowsPerPageOptions?: ComponentProps<typeof Dropdown>["items"];
+    hideRowsPerPage?: boolean;
+    totalElements?: number;
+    rowsPerPage?: number;
+    filters?: ComponentProps<typeof Filters>["filters"];
+    searchBarColumns?: string[];
+    searchBarVisible?: boolean;
+    searchBarPlaceholder?: string;
+    quickFiltersVisible?: boolean;
+    quickFilters?: ComponentProps<typeof QuickFilters>["filters"];
+    editFilterMode?: "one-edit" | "multi-edit";
+    showActiveFilters?: boolean;
+    dateLocale?: 'it' | 'en'
+    multiEditTabs?: ComponentProps<typeof Filters>['multiEditTabs']
+    searchTimeoutDelay?: number
+    showSelection?: boolean
+    selectionMode?: 'single' | 'multiple'
+    hideSelectAll?: boolean
+    selectedAll?: boolean
+    selectedItems?: ComponentProps<typeof SimpleTable<Item, Data>>['items']
+    uniqueKey?: keyof ComponentProps<typeof SimpleTable<Item, Data>>['items'][number]
+    hideActions?: boolean
+    actionsForSelectedItems?: Action[];
+    filterLabels?: Pick<ComponentProps<typeof Filters>,
+      'addFilterLabel' |
+      'applyFilterLabel' |
+      'filterTitleLabel' |
+      'cancelFilterLabel' |
+      'labelsMapper' |
+      'trueString' |
+      'falseString' |
+      'betweenSeparator'
+    >
+    class?: {
+      simpleTable?: ComponentProps<typeof SimpleTable<Item, Data>>["class"];
+    };
+    onpaginationChange?: (event: {
+      detail: {
+        rowsPerPage: number;
+        page: number;
+        builder: Builder;
+      };
+    }) => void;
+    onfiltersChange?: (event: {
+      detail: {
+        builder: Builder;
+      };
+    }) => void;
+    onremoveFilter?: ComponentProps<typeof Filters>["onremoveFilter"];
+    onremoveAllFilters?: ComponentProps<typeof Filters>["onremoveAllFilters"];
+    filterAppendSnippet?: ComponentProps<typeof Filters>["appendSnippet"];
+    customFilterChipSnippet?: ComponentProps<
+      typeof Filters
+    >["customChipSnippet"];
+    customFilterSnippet?: ComponentProps<typeof Filters>["customSnippet"];
+    searchBarSnippet?: Snippet<
+      [
+        {
+          handleSearchChange: typeof handleSearchChange;
+        },
+      ]
+    >;
+    footerSnippet?: Snippet<
+      [
+        {
+          hideRowsPerPage: typeof hideRowsPerPage;
+          rowsPerPageOptions: typeof rowsPerPageOptions;
+          rowsPerPageSelection: typeof rowsPerPageSelection;
+          totalElements: typeof totalElements;
+          page: typeof page;
+          maxPage: typeof maxPage;
+          rowsPerPage: typeof rowsPerPage;
+          handlePaginationChange: typeof handlePaginationChange;
+        },
+      ]
+    >;
+    rangeDescriptorSnippet?: Snippet<
+      [
+        {
+          totalElements: typeof totalElements;
+          page: typeof page;
+          maxPage: typeof maxPage;
+          rowsPerPage: typeof rowsPerPage;
+        },
+      ]
+    >;
+    totalsSnippet?: Snippet<[]>
+  }
+
+  let {
+    headers = [],
+    items = [],
+    sortedBy = $bindable(undefined),
+    sortDirection = $bindable("asc"),
+    page = $bindable(1),
+    maxPage = undefined,
+    rowsPerPageOptions = [
+      { label: "20", value: 20 },
+      { label: "50", value: 50 },
+      { label: "100", value: 100 },
+    ],
+    hideRowsPerPage = false,
+    totalElements = undefined,
+    rowsPerPage = $bindable(20),
+    filters = $bindable(),
+    quickFilters = $bindable(),
+    searchBarColumns = undefined,
+    searchBarVisible = true,
+    quickFiltersVisible = false,
+    lang = "en",
+    dateLocale,
+    multiEditTabs,
+    searchBarPlaceholder = lang == 'en' ? "Type to search..." : "Scrivi per cercare...",
+    editFilterMode = "one-edit",
+    showActiveFilters = true,
+    resizableColumns = false,
+    resizedColumnSizeWithPadding = $bindable({}),
+    pointerOnRowHover = undefined,
+    doubleClickActive = false,
+    doubleClickDelay = 250,
+    searchTimeoutDelay = 300,
+    hideSelectAll,
+    showSelection,
+    selectedItems = $bindable([]),
+    selectionMode = 'multiple',
+    selectedAll = $bindable(),
+    uniqueKey = 'id',
+    hideActions,
+    actionsForSelectedItems = [],
+    filterLabels,
+    calculateRowStyles = undefined,
+    calculateRowClasses = undefined,
+    class: clazz = {},
+    onfiltersChange,
+    onpaginationChange,
+    onremoveFilter,
+    onremoveAllFilters,
+    customFilterChipSnippet,
+    customFilterSnippet,
+    filterAppendSnippet,
+    onrowClick,
+    onrowDoubleClick,
+    appendSnippet,
+    customSnippet,
+    headerLabelSnippet,
+    headerSnippet,
+    onsort,
+    footerSnippet,
+    rangeDescriptorSnippet,
+    searchBarSnippet,
+    noDataSnippet,
+    totalsSnippet,
+    oncolumnResize,
+    prependSnippet: prependSnippetInternal,
+    ...rest
+  }: Props = $props();
+
+  let searchBarInput: HTMLElement | undefined = $state(),
+    searchText: string | undefined = $state(),
+    sortModify: Header<Data>["sortModify"],
+    searchTimeout: NodeJS.Timeout,
+    selectedIndexes: number[] = []
+
+  let rowsPerPageSelection: ComponentProps<typeof Dropdown>["values"] = $state(
+    [],
+  );
+
+  $effect(() => {
     rowsPerPageSelection = [
-        { label: rowsPerPage.toString(), value: rowsPerPage },
+      { label: rowsPerPage.toString(), value: rowsPerPage },
     ];
-});
-$effect(() => {
+  });
+
+  $effect(() => {
     if (totalElements !== undefined)
-        maxPage = Math.max(Math.ceil(totalElements / rowsPerPage), 1);
-});
-function handleRowsPerPageChange(event) {
+      maxPage = Math.max(Math.ceil(totalElements / rowsPerPage), 1);
+  });
+
+  function handleRowsPerPageChange(
+    event: Parameters<
+      NonNullable<ComponentProps<typeof Dropdown>["onchange"]>
+    >[0],
+  ) {
     rowsPerPage = Number(event.detail.selection?.[0].value);
     handlePaginationChange();
-}
-function handlePaginationChange() {
+  }
+
+  function handlePaginationChange() {
     let builder = buildFilters();
+
     if (onpaginationChange) {
-        onpaginationChange({
-            detail: {
-                rowsPerPage,
-                page,
-                builder,
-            },
-        });
+      onpaginationChange({
+        detail: {
+          rowsPerPage,
+          page,
+          builder,
+        },
+      });
     }
-}
-function handleSearchChange(searchText) {
-    clearTimeout(searchTimeout);
+  }
+
+  function handleSearchChange(searchText: string | undefined) {
+    clearTimeout(searchTimeout)
+
     searchTimeout = setTimeout(() => {
-        let builder = buildFilters({ searchText });
-        onfiltersChange?.({
-            detail: { builder },
-        });
+      let builder = buildFilters({ searchText })
+
+      onfiltersChange?.({
+        detail: { builder },
+      });
     }, searchTimeoutDelay);
-}
-function handleFiltersChange() {
+  }
+
+  function handleFiltersChange() {
     let builder = buildFilters({ searchText });
+
     onfiltersChange?.({
-        detail: {
-            builder,
-        },
+      detail: {
+        builder,
+      },
     });
-}
-function handleRemoveFilter(event) {
+  }
+
+  function handleRemoveFilter(
+    event: Parameters<
+      NonNullable<ComponentProps<typeof Filters>["onremoveFilter"]>
+    >[0],
+  ) {
     handleFiltersChange();
+
     if (onremoveFilter) {
-        onremoveFilter(event);
+      onremoveFilter(event);
     }
-}
-function handleRemoveAllFilters() {
+  }
+
+  function handleRemoveAllFilters() {
     handleFiltersChange();
+
     if (onremoveAllFilters) {
-        onremoveAllFilters();
+      onremoveAllFilters();
     }
-}
-function handleOnSort(event) {
+  }
+
+  function handleOnSort(
+    event: Parameters<
+      NonNullable<ComponentProps<typeof SimpleTable<Item, Data>>["onsort"]>
+    >[0],
+  ) {
     sortModify = event.detail.sortModify;
     handleFiltersChange();
+
     if (onsort) {
-        onsort(event);
+      onsort(event);
     }
-}
-function buildFilters(params) {
+  }
+
+  function buildFilters(params?: { searchText?: string | undefined }) {
     let converter = new Converter();
-    let builder;
+    let builder: Builder;
+    
     builder = converter.createBuilder({
-        filters: [
-            ...(filters || []),
-            ...(quickFilters || [])
-        ],
+      filters: [
+        ...(filters || []),
+        ...(quickFilters || [])
+      ],
     });
-    if (!!params?.searchText &&
-        !!searchBarColumns &&
-        searchBarColumns.length > 0) {
-        builder.where((b) => {
-            b.where(searchBarColumns[0], "ilike", "%" + params?.searchText + "%");
-            for (let i = 1; i < searchBarColumns.length; i += 1) {
-                b.orWhere(searchBarColumns[i], "ilike", "%" + params?.searchText + "%");
-            }
-        });
+
+    if (
+      !!params?.searchText &&
+      !!searchBarColumns &&
+      searchBarColumns.length > 0
+    ) {
+      builder.where((b) => {
+        b.where(searchBarColumns![0], "ilike", "%" + params?.searchText + "%");
+        for (let i = 1; i < searchBarColumns!.length; i += 1) {
+          b.orWhere(
+            searchBarColumns![i],
+            "ilike",
+            "%" + params?.searchText + "%",
+          );
+        }
+      });
     }
+
     if (!!sortedBy) {
-        if (sortModify) {
-            builder = sortModify({
-                builder,
-                sortDirection: sortDirection || "asc",
-            });
-        }
-        else {
-            builder.orderBy(sortedBy, sortDirection || "asc");
-        }
+      if (sortModify) {
+        builder = sortModify({
+          builder,
+          sortDirection: sortDirection || "asc",
+        });
+      } else {
+        builder.orderBy(sortedBy, sortDirection || "asc");
+      }
     }
-    selectedItems = [];
-    selectedIndexes = [];
+
+    selectedItems = []
+    selectedIndexes = []
+
     return builder;
-}
-function handleSelectAll() {
-    selectedAll = !selectedAll;
-    selectedItems = [];
-    selectedIndexes = [];
-}
-function handleSelect(item, shiftKeyPressed) {
+  }
+
+  function handleSelectAll() {
+    selectedAll = !selectedAll
+    selectedItems = []
+    selectedIndexes = []
+  }
+
+  function handleSelect(item: Item, shiftKeyPressed: boolean) {
     let index = selectedItems.findIndex((i) => i[uniqueKey] == item[uniqueKey]);
     // if item is not in the selectedItems array, add it
     if (index == -1) {
-        if (selectionMode == "single") {
-            selectedItems = [item];
-            selectedIndexes = [items.findIndex(r => r[uniqueKey] == item[uniqueKey])];
-        }
-        else if (selectionMode == "multiple") {
-            if (shiftKeyPressed && selectedIndexes.length > 0) {
-                let lastSelectedIndex = selectedIndexes[selectedIndexes.length - 1], selectedIndex = items.findIndex(r => r[uniqueKey] == item[uniqueKey]);
-                if (selectedIndex != -1) {
-                    if (selectedIndex < lastSelectedIndex) {
-                        let x = lastSelectedIndex;
-                        lastSelectedIndex = selectedIndex - 1;
-                        selectedIndex = x;
-                    }
-                    for (let i = lastSelectedIndex + 1; i <= selectedIndex; i++) {
-                        if (!selectedItems.find((selectedItem) => selectedItem[uniqueKey] == items[i][uniqueKey])) {
-                            selectedItems = [...selectedItems, items[i]];
-                        }
-                    }
-                }
+      if (selectionMode == "single") {
+        selectedItems = [item];
+        selectedIndexes = [items.findIndex(r => r[uniqueKey] == item[uniqueKey])]
+      } else if (selectionMode == "multiple") {
+        if(shiftKeyPressed && selectedIndexes.length > 0) {
+          let lastSelectedIndex = selectedIndexes[selectedIndexes.length - 1],
+            selectedIndex = items.findIndex(r => r[uniqueKey] == item[uniqueKey])
+          if(selectedIndex != -1) {
+            if(selectedIndex < lastSelectedIndex) {
+              let x = lastSelectedIndex
+              lastSelectedIndex = selectedIndex - 1
+              selectedIndex = x
             }
-            else {
-                selectedItems = [...selectedItems, item];
-                selectedIndexes.push(items.findIndex(r => r[uniqueKey] == item[uniqueKey]));
+            for (let i = lastSelectedIndex + 1; i <= selectedIndex; i++) {
+              if(!selectedItems.find((selectedItem) => selectedItem[uniqueKey] == items[i][uniqueKey])) {
+                selectedItems = [...selectedItems, items[i]]
+              }
             }
+          }
         }
+        else {
+          selectedItems = [...selectedItems, item];
+          selectedIndexes.push(items.findIndex(r => r[uniqueKey] == item[uniqueKey]))
+        }
+      }
+    } else {
+      selectedItems = selectedItems.filter((i) => i[uniqueKey] != item[uniqueKey]);
+      selectedIndexes = selectedIndexes.filter(r => r != items.findIndex(r => r[uniqueKey] == item[uniqueKey]))
     }
-    else {
-        selectedItems = selectedItems.filter((i) => i[uniqueKey] != item[uniqueKey]);
-        selectedIndexes = selectedIndexes.filter(r => r != items.findIndex(r => r[uniqueKey] == item[uniqueKey]));
-    }
-}
+  }
 </script>
 
 <div class="paginated-table">

package/dist/components/composed/list/PaginatedTable.svelte.d.ts

@@ -1,4 +1,4 @@
-import { type Header } from "../../simple/lists/SimpleTable.svelte";
+import SimpleTable, { type Header } from "../../simple/lists/SimpleTable.svelte";
 import Paginator from "../../simple/lists/Paginator.svelte";
 import Dropdown from "../forms/Dropdown.svelte";
 import { type ComponentProps, type Snippet } from "svelte";
@@ -6,10 +6,10 @@ import Filters from "../search/Filters.svelte";
 import type Builder from "../../../utils/filters/builder";
 import QuickFilters from "../search/QuickFilters.svelte";
 import type { Action } from "../common/QuickActions.svelte";
-declare class __sveltets_Render<Item extends {
+declare function $$render<Item extends {
     [key: string]: any;
-}, Data> {
-    props(): Omit<{
+}, Data>(): {
+    props: Omit<{
         headers: Header<Data>[];
         items: Item[];
         sortedBy?: string;
@@ -100,31 +100,26 @@ declare class __sveltets_Render<Item extends {
         selectionMode?: "single" | "multiple";
         hideSelectAll?: boolean;
         selectedAll?: boolean;
-        selectedItems?: Item[] | undefined;
-        uniqueKey?: keyof Item | undefined;
+        selectedItems?: ComponentProps<typeof SimpleTable<Item, Data>>["items"];
+        uniqueKey?: keyof ComponentProps<typeof SimpleTable<Item, Data>>["items"][number];
         hideActions?: boolean;
         actionsForSelectedItems?: Action[];
         filterLabels?: Pick<ComponentProps<typeof Filters>, "addFilterLabel" | "applyFilterLabel" | "filterTitleLabel" | "cancelFilterLabel" | "labelsMapper" | "trueString" | "falseString" | "betweenSeparator">;
         class?: {
-            simpleTable?: {
-                container?: string;
-                header?: string;
-                row?: string;
-                cell?: string;
-            } | undefined;
-        } | undefined;
-        onpaginationChange?: ((event: {
+            simpleTable?: ComponentProps<typeof SimpleTable<Item, Data>>["class"];
+        };
+        onpaginationChange?: (event: {
             detail: {
                 rowsPerPage: number;
                 page: number;
                 builder: Builder;
             };
-        }) => void) | undefined;
-        onfiltersChange?: ((event: {
+        }) => void;
+        onfiltersChange?: (event: {
             detail: {
                 builder: Builder;
             };
-        }) => void) | undefined;
+        }) => void;
         onremoveFilter?: ComponentProps<typeof Filters>["onremoveFilter"];
         onremoveAllFilters?: ComponentProps<typeof Filters>["onremoveAllFilters"];
         filterAppendSnippet?: ComponentProps<typeof Filters>["appendSnippet"];
@@ -132,7 +127,7 @@ declare class __sveltets_Render<Item extends {
         customFilterSnippet?: ComponentProps<typeof Filters>["customSnippet"];
         searchBarSnippet?: Snippet<[{
             handleSearchChange: (searchText: string | undefined) => void;
-        }]> | undefined;
+        }]>;
         footerSnippet?: Snippet<[{
             hideRowsPerPage: boolean;
             rowsPerPageOptions: import("../forms/AsyncAutocomplete.svelte").Item<unknown>[];
@@ -142,17 +137,26 @@ declare class __sveltets_Render<Item extends {
             maxPage: number | undefined;
             rowsPerPage: number;
             handlePaginationChange: () => void;
-        }]> | undefined;
+        }]>;
         rangeDescriptorSnippet?: Snippet<[{
             totalElements: number | undefined;
             page: number;
             maxPage: number | undefined;
             rowsPerPage: number;
-        }]> | undefined;
+        }]>;
         totalsSnippet?: Snippet<[]>;
     };
-    events(): {};
-    slots(): {};
+    exports: {};
+    bindings: "page" | "sortedBy" | "sortDirection" | "resizedColumnSizeWithPadding" | "filters" | "selectedItems" | "rowsPerPage" | "quickFilters" | "selectedAll";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<Item extends {
+    [key: string]: any;
+}, Data> {
+    props(): ReturnType<typeof $$render<Item, Data>>['props'];
+    events(): ReturnType<typeof $$render<Item, Data>>['events'];
+    slots(): ReturnType<typeof $$render<Item, Data>>['slots'];
     bindings(): "page" | "sortedBy" | "sortDirection" | "resizedColumnSizeWithPadding" | "filters" | "selectedItems" | "rowsPerPage" | "quickFilters" | "selectedAll";
     exports(): {};
 }