@emamid/svelte-data-table 0.0.22 → 1.0.2

package/dist/DataTable.svelte

@@ -1,230 +1,291 @@
-<script>import { createEventDispatcher } from "svelte";
-import { Table, TableBody, TableHead } from "flowbite-svelte";
-import { AngleDownSolid, AngleUpSolid } from "flowbite-svelte-icons";
-import DataTableHeaderCell from "./DataTableHeaderCell.svelte";
-import DataTableRow from "./DataTableRow.svelte";
-import {
-  getColumnID,
-  joinClasses,
-  setDataTableContext
-} from "./common.js";
-export let allowRowDrag = false;
-export let allowRowDrop = !!allowRowDrag;
-export let columns = [];
-export let items = [];
-export let sortKey = "";
-export let sortFunction = null;
-export let reverseSort = false;
-export let sortColumnID = null;
-export let sortAscendingIcon = AngleDownSolid;
-export let sortDescendingIcon = AngleUpSolid;
-export let itemKey = null;
-export let enterAction = "next";
-export let divClassAppend = "";
-export let divClassOverride = "";
-const divClassDefault = "relative overflow-x-auto overflow-y-auto";
-export let tableClassAppend = "";
-export let tableClassOverride = "";
-const tableClassDefault = "";
-export let theadClassAppend = "";
-export let theadClassOverride = "";
-const theadClassDefault = "text-xs uppercase sticky top-0 z-10";
-export let thClassAppend = "";
-export let thClassOverride = "";
-const thClassDefault = "";
-export let tableBodyClassAppend = "";
-export let tableBodyClassOverride = "";
-const tableBodyClassDefault = "";
-export let tdClassAppend = "";
-export let tdClassOverride = "";
-const tdClassDefault = "px-6 py-4 whitespace-nowrap font-medium";
-export let tdFocusedClassAppend = "";
-export let tdFocusedClassOverride = "";
-const tdFocusedClassDefault = "px-6 py-4 whitespace-nowrap font-medium";
-export let trClassAppend = "";
-export let trClassOverride = "";
-const trClassDefault = "";
-export let trClassGetter = null;
-export let striped = false;
-export let hoverable = false;
-export let noborder = false;
-export let shadow = false;
-export let color = "default";
-export let customColor = "";
-let sortedItems = [];
-let focusedColumnKeyID = null;
-let focusedItemKey = null;
-setDataTableContext({});
-const sortBySortKey = (a, b) => {
-  let aValue = a[sortKey];
-  let bValue = b[sortKey];
-  if (aValue === bValue) {
-    return 0;
-  }
-  if (typeof aValue === "string" && typeof bValue === "string") {
-    return aValue.localeCompare(bValue);
-  }
-  if (typeof aValue === "number" && typeof bValue === "number") {
-    return aValue - bValue;
-  }
-  if (typeof aValue === "number" || typeof bValue === "number") {
-    return (aValue || 0) - (bValue || 0);
-  }
-  if (typeof aValue === "string" || typeof bValue === "string") {
-    return (aValue || "").localeCompare(bValue || "");
-  }
-  return JSON.stringify(aValue).localeCompare(JSON.stringify(bValue));
-};
-$: {
-  sortedItems = sortFunction ? items.toSorted(sortFunction) : sortKey ? items.toSorted(sortBySortKey) : [...items];
-  if (reverseSort) {
-    sortedItems.reverse();
-  }
-}
-const dispatch = createEventDispatcher();
-const getItemKey = (item) => item ? itemKey ? item[itemKey] || null : items.indexOf(item).toString() : null;
-const divClass = joinClasses(divClassOverride || divClassDefault, divClassAppend);
-const tableClass = joinClasses(tableClassOverride || tableClassDefault, tableClassAppend);
-const theadClass = joinClasses(theadClassOverride || theadClassDefault, theadClassAppend);
-const thClass = joinClasses(thClassOverride || thClassDefault, thClassAppend);
-const tableBodyClass = joinClasses(
-  tableBodyClassOverride || tableBodyClassDefault,
-  tableBodyClassAppend
-);
-const trClass = joinClasses(trClassOverride || trClassDefault, trClassAppend);
-const tdClass = joinClasses(tdClassOverride || tdClassDefault, tdClassAppend);
-const tdFocusedClass = joinClasses(
-  tdFocusedClassOverride || tdFocusedClassDefault,
-  tdFocusedClassAppend
-);
-const getTRClass = (item, isRowFocused) => trClassGetter ? trClassGetter(item, isRowFocused, trClass, trClassDefault, trClassAppend, trClassOverride) : trClass;
-const internalColumns = columns.map((column) => {
-  const columnTDClass = joinClasses(column.tdClassOverride || tdClass, column.tdClassAppend);
-  const columnFocusedTDClass = joinClasses(
-    column.tdFocusedClassOverride || tdFocusedClass,
-    column.tdFocusedClassAppend
-  );
-  let getTDClass;
-  const tdClassGetter = column.tdClassGetter;
-  if (tdClassGetter) {
-    getTDClass = (item, value, isFocused) => tdClassGetter(
-      item,
-      column,
-      value,
-      isFocused,
-      columnTDClass,
-      tdClassDefault,
-      tdClassAppend,
-      tdClassOverride
-    );
-  } else {
-    getTDClass = (_item, _value, isFocused) => isFocused ? columnFocusedTDClass : columnTDClass;
-  }
-  return {
-    ...column,
-    sortKey: column.sortKey || column.key,
-    id: column.id || column.key,
-    getTDClass
-  };
-});
-const focusableColumns = internalColumns.filter((column) => column.canFocus);
-const prevTab = (event) => {
-  const { item, column } = event.detail;
-  let nextColumn = null;
-  let nextItem = null;
-  if (column === focusableColumns[0]) {
-    if (item !== sortedItems[0]) {
-      nextColumn = focusableColumns[focusableColumns.length - 1];
-      nextItem = sortedItems[sortedItems.indexOf(item) - 1];
-    }
-  } else {
-    nextColumn = focusableColumns[focusableColumns.indexOf(column) - 1];
-    nextItem = item;
-  }
-  focusedColumnKeyID = getColumnID(nextColumn);
-  focusedItemKey = getItemKey(nextItem);
-};
-const nextTab = (event) => {
-  const { item, column } = event.detail;
-  let nextColumn = null;
-  let nextItem = null;
-  if (column === focusableColumns.at(-1)) {
-    if (item !== sortedItems.at(-1)) {
-      nextColumn = focusableColumns[0];
-      nextItem = sortedItems[sortedItems.indexOf(item) + 1];
-    }
-  } else {
-    nextColumn = focusableColumns[focusableColumns.indexOf(column) + 1];
-    nextItem = item;
-  }
-  focusedColumnKeyID = getColumnID(nextColumn);
-  focusedItemKey = getItemKey(nextItem);
-};
-const enterPressed = (event) => {
-  if (enterAction === "stay") {
-    return;
-  }
-  if (enterAction === "next") {
-    return nextTab(event);
-  }
-  const { item } = event.detail;
-  const itemIndex = sortedItems.indexOf(item);
-  if (itemIndex !== sortedItems.length - 1) {
-    focusedItemKey = getItemKey(sortedItems[itemIndex + 1]);
-  }
-};
-const cellClicked = (event) => {
-  const { column, item } = event.detail;
-  focusedColumnKeyID = null;
-  focusedItemKey = null;
-  if (column.canFocus) {
-    focusedColumnKeyID = getColumnID(column);
-    focusedItemKey = getItemKey(item);
-  }
-  dispatch("cellClicked", {
-    item,
-    column
-  });
-  dispatch("rowClicked", {
-    item
-  });
-};
-const headerClicked = (column) => {
-  if (column.id && column.canSort) {
-    if (sortColumnID === column.id) {
-      reverseSort = !reverseSort;
-    } else {
-      reverseSort = false;
-      sortColumnID = column.id;
-      sortKey = column.sortKey || "";
-      sortFunction = column.sortFunction;
-    }
-  }
-  dispatch("headerClicked", {
-    column,
-    sortColumnID,
-    sortKey,
-    sortFunction,
-    reverseSort
-  });
-};
+<script lang="ts">
+	import { setContext } from 'svelte';
+
+	import type {
+		ActionEvent,
+		ColumnConfig,
+		DataCellChangedEvent,
+		DataCellDragEvent,
+		DataCellDropEvent,
+		DataCellEvent,
+		DataTableContext,
+		DataTableTheme,
+		EnterAction,		
+		GetItemKeyFunction,
+		HeaderEvent,
+		RowBoolean,
+		RowClassFunction,
+		RowDragEvent,
+		RowDropBoolean,
+		RowDropEvent,
+		RowEvent,
+		SortFunction,
+	} from './common';
+
+	import {
+		dataTableContextName,
+		getColumnID,
+		joinPartClasses,
+	} from './common';
+
+	import { activeTheme } from './themes';
+	
+	import DataTableHeaderCell from './DataTableHeaderCell.svelte';
+	import DataTableRow from './DataTableRow.svelte';
+	
+	interface Props {
+		allowRowDrag?: RowBoolean;
+		allowRowDrop?: RowDropBoolean;
+		columns?: ColumnConfig[];
+		enterAction?: EnterAction;
+		itemKey?: string | null;
+		items?: any[];
+		onaction?: (event: ActionEvent) => void;
+		onbutton?: (event: DataCellEvent) => void;
+		oncellchanged?: (event: DataCellChangedEvent) => void;
+		oncellclick?: (event: DataCellEvent) => void;
+		oncelldragstart?: (event: DataCellDragEvent) => void;
+		oncelldropped?: (event: DataCellDropEvent) => void;
+		onenterpressed?: (event: DataCellEvent) => void;
+		onheaderclick?: (event: HeaderEvent) => void;
+		onnexttab?: (event: DataCellEvent) => void;
+		onprevtab?: (event: DataCellEvent) => void;
+		onrowclick?: (event: RowEvent) => void;
+		onrowdragstart?: (event: RowDragEvent) => void;
+		onrowdropped?: (event: RowDropEvent) => void;
+		reverseSort?: boolean;
+		sortColumnID?: string | null;
+		sortFunction?: SortFunction;
+		sortKey?: string;
+		theme?: DataTableTheme;
+		trClassGetter?: RowClassFunction;
+	}
+
+	let {
+		allowRowDrag = false,
+		allowRowDrop = !!allowRowDrag,
+		columns = [],
+		enterAction = 'next',
+		itemKey = null,
+		items = [],
+		onaction,
+		onbutton,
+		oncellchanged,
+		oncellclick,
+		oncelldragstart,
+		oncelldropped,
+		onenterpressed,
+		onheaderclick,
+		onnexttab,
+		onprevtab,
+		onrowclick,
+		onrowdragstart,
+		onrowdropped,
+		reverseSort = $bindable(false),
+		sortColumnID = $bindable(null),
+		sortFunction = $bindable(undefined),
+		sortKey = $bindable(''),
+		theme,
+		trClassGetter,
+	}: Props = $props();
+
+	let sortedItems = $derived.by(() => {
+		let tempItems = sortFunction
+			? items.toSorted(sortFunction)
+			: sortKey
+				? items.toSorted(sortBySortKey)
+				: [...items];
+		if (reverseSort) {
+			return tempItems.toReversed();
+		}
+		return tempItems;
+	})
+
+	let focusedColumnKeyID: any = $state(null);
+	let focusedItemKey: any = $state(null);
+
+	let context = $state<DataTableContext>({
+		// svelte-ignore state_referenced_locally
+		items,
+		// svelte-ignore state_referenced_locally
+		theme,
+	})
+
+	setContext(dataTableContextName, context);
+
+	const sortBySortKey: SortFunction = (a: any, b: any) => {
+		let aValue = a[sortKey];
+		let bValue = b[sortKey];
+
+		if (aValue === bValue) {
+			return 0;
+		}
+
+		if (typeof aValue === 'string' && typeof bValue === 'string') {
+			return aValue.localeCompare(bValue);
+		}
+
+		if (typeof aValue === 'number' && typeof bValue === 'number') {
+			return aValue - bValue;
+		}
+
+		if (typeof aValue === 'number' || typeof bValue === 'number') {
+			return (aValue || 0) - (bValue || 0);
+		}
+
+		if (typeof aValue === 'string' || typeof bValue === 'string') {
+			return (aValue || '').localeCompare(bValue || '');
+		}
+
+		return JSON.stringify(aValue).localeCompare(JSON.stringify(bValue));
+	};
+
+	const getItemKey: GetItemKeyFunction = (item?: any) =>
+		item ? (itemKey ? item[itemKey] || null : items.indexOf(item).toString()) : null;
+
+	const getClasses = (element: string) => joinPartClasses(
+		'table',
+		element, [
+			activeTheme,
+			theme,
+		],
+	)	
+
+	const internalColumns: ColumnConfig[] = $derived(columns.map((column) => {
+		return {
+			...column,
+			sortKey: column.sortKey || column.key,
+			id: column.id || column.key,
+		};
+	}));
+
+	const focusableColumns = $derived(internalColumns.filter((column) => column.canFocus));
+
+	const prevTab = (event: DataCellEvent) => {
+		const { item, column } = event;
+		let nextColumn: ColumnConfig | null = null;
+		let nextItem: any | null = null;
+		if (column === focusableColumns[0]) {
+			if (item !== sortedItems[0]) {
+				nextColumn = focusableColumns[focusableColumns.length - 1];
+				nextItem = sortedItems[sortedItems.indexOf(item) - 1];
+			}
+		} else {
+			nextColumn = focusableColumns[focusableColumns.indexOf(column) - 1];
+			nextItem = item;
+		}
+		focusedColumnKeyID = getColumnID(nextColumn);
+		focusedItemKey = getItemKey(nextItem);
+		onprevtab?.(event);
+	};
+
+	const nextTab = (event: DataCellEvent) => {
+		const { item, column } = event;
+		let nextColumn: ColumnConfig | null = null;
+		let nextItem: any | null = null;
+		if (column === focusableColumns.at(-1)) {
+			if (item !== sortedItems.at(-1)) {
+				nextColumn = focusableColumns[0];
+				nextItem = sortedItems[sortedItems.indexOf(item) + 1];
+			}
+		} else {
+			nextColumn = focusableColumns[focusableColumns.indexOf(column) + 1];
+			nextItem = item;
+		}
+		focusedColumnKeyID = getColumnID(nextColumn);
+		focusedItemKey = getItemKey(nextItem);
+		onnexttab?.(event);
+	};
+
+	const enterPressed = (event: DataCellEvent) => {
+		if (enterAction === 'stay') {
+			return;
+		}
+		if (enterAction === 'next') {
+			return nextTab(event);
+		}
+		const { item } = event;
+		const itemIndex = sortedItems.indexOf(item);
+		if (itemIndex !== sortedItems.length - 1) {
+			focusedItemKey = getItemKey(sortedItems[itemIndex + 1]);
+		}
+		onenterpressed?.(event);
+	};
+
+	const cellClicked = (event: DataCellEvent) => {
+		const { column, item } = event;
+		focusedColumnKeyID = null;
+		focusedItemKey = null;
+		if (column.canFocus) {
+			focusedColumnKeyID = getColumnID(column);
+			focusedItemKey = getItemKey(item);
+		}
+		oncellclick?.({ column, item });
+		onrowclick?.({ item });
+	};
+
+	const cellDragEnd = (_event: DataCellDragEvent) => {
+		context.draggedColumn = undefined;
+		context.draggedItem = undefined;
+		context.dragType = undefined;
+	}
+
+	const cellDragStart = (event: DataCellDragEvent) => {
+		context.draggedColumn = event.sourceColumn;
+		context.draggedItem = event.sourceItem;
+		context.dragType = 'cell';
+		oncelldragstart?.(event);
+	}
+
+	const headerClicked = (column: ColumnConfig) => {
+		if (column.id && column.canSort) {
+			if (sortColumnID === column.id) {
+				reverseSort = !reverseSort;
+			} else {
+				reverseSort = false;
+				sortColumnID = column.id;
+				sortKey = column.sortKey || '';
+				sortFunction = column.sortFunction;
+			}
+
+			onheaderclick?.({ column, sortColumnID, sortKey, sortFunction, reverseSort });
+		} else {
+			onheaderclick?.({ column });
+		}		
+	};
+
+	const rowDragEnd = (_event: RowDragEvent) => {
+		context.dragType = undefined;
+		context.draggedItem = undefined;
+	}
+
+	const rowDragStart = (event: RowDragEvent) => {
+		context.draggedColumn = undefined;
+		context.draggedItem = event.sourceItem;
+		context.dragType = 'row';
+		onrowdragstart?.(event);
+	}
+
+	let tableClass = $derived(getClasses('table'));
+	let theadClass = $derived(getClasses('thead'));
+	let theadTRClass = $derived(getClasses('theadTR'));
+	let tbodyClass = $derived(getClasses('tbody'));
 </script>
 
-<Table class={tableClass} {divClass} {striped} {hoverable} {noborder} {shadow} {color} {customColor}>
-	<TableHead defaultRow={false} class={theadClass}>
-		{#each internalColumns as column}
-			<DataTableHeaderCell
-				{column}
-				isSorted={!!sortColumnID && getColumnID(column) === sortColumnID}
-				{reverseSort}
-				defaultSortAscendingIcon={sortAscendingIcon}
-				defaultSortDescendingIcon={sortDescendingIcon}
-				{thClass}
-				on:click={() => headerClicked(column)}
-			/>
-		{/each}
-	</TableHead>
-	<TableBody {tableBodyClass}>
+<table class={tableClass}>
+	<thead class={theadClass}>
+		<tr class={theadTRClass}>
+			{#each internalColumns as column}
+				<DataTableHeaderCell
+					{column}
+					isSorted={!!sortColumnID && getColumnID(column) === sortColumnID}
+					{reverseSort}
+					onclick={() => headerClicked(column)}
+				/>
+			{/each}
+		</tr>
+	</thead>
+	<tbody class={tbodyClass}>
 		{#each sortedItems as item}
 			{@const isRowFocused = !!focusedItemKey && focusedItemKey === getItemKey(item)}
 			<DataTableRow
@@ -232,21 +293,24 @@ const headerClicked = (column) => {
 				{allowRowDrop}
 				columns={internalColumns}
 				{focusedColumnKeyID}
-				{getTRClass}
 				{isRowFocused}
 				{item}
-				on:action
-				on:cellChanged
-				on:cellClicked={cellClicked}
-				on:cellDragStart
-				on:cellDropped
-				on:enterPressed={enterPressed}
-				on:nextTab={nextTab}
-				on:prevTab={prevTab}
-				on:rowClicked
-				on:rowDragStart
-				on:rowDropped
+				{onaction}
+				{onbutton}
+				{oncellchanged}
+				oncellclick={cellClicked}
+				oncelldragend={cellDragEnd}
+				oncelldragstart={cellDragStart}
+				{oncelldropped}
+				onenterpressed={enterPressed}
+				onnexttab={nextTab}
+				onprevtab={prevTab}
+				{onrowclick}
+				ondragend={rowDragEnd}
+				ondragstart={rowDragStart}
+				ondropped={onrowdropped}
+				{trClassGetter}
 			/>
 		{/each}
-	</TableBody>
-</Table>
+	</tbody>
+</table>

package/dist/DataTable.svelte.d.ts

@@ -1,61 +1,31 @@
-import { SvelteComponent } from "svelte";
-import type { ColumnConfig, EnterAction, RowBoolean, RowClassFunction, RowDropBoolean, SortFunction } from './common.js';
-declare const __propDef: {
-    props: {
-        allowRowDrag?: RowBoolean | undefined;
-        allowRowDrop?: RowDropBoolean | undefined;
-        columns?: ColumnConfig[] | undefined;
-        items?: any[] | undefined;
-        sortKey?: string | undefined;
-        sortFunction?: SortFunction | undefined | null;
-        reverseSort?: boolean | undefined;
-        sortColumnID?: string | null | undefined;
-        sortAscendingIcon?: ConstructorOfATypedSvelteComponent | undefined;
-        sortDescendingIcon?: ConstructorOfATypedSvelteComponent | undefined;
-        itemKey?: string | null | undefined;
-        enterAction?: EnterAction | undefined;
-        divClassAppend?: string | undefined;
-        divClassOverride?: string | undefined;
-        tableClassAppend?: string | undefined;
-        tableClassOverride?: string | undefined;
-        theadClassAppend?: string | undefined;
-        theadClassOverride?: string | undefined;
-        thClassAppend?: string | undefined;
-        thClassOverride?: string | undefined;
-        tableBodyClassAppend?: string | undefined;
-        tableBodyClassOverride?: string | undefined;
-        tdClassAppend?: string | undefined;
-        tdClassOverride?: string | undefined;
-        tdFocusedClassAppend?: string | undefined;
-        tdFocusedClassOverride?: string | undefined;
-        trClassAppend?: string | undefined;
-        trClassOverride?: string | undefined;
-        trClassGetter?: RowClassFunction | null | undefined;
-        striped?: boolean | undefined;
-        hoverable?: boolean | undefined;
-        noborder?: boolean | undefined;
-        shadow?: boolean | undefined;
-        color?: string | undefined;
-        customColor?: string | undefined;
-    };
-    events: {
-        action: any;
-        cellChanged: any;
-        cellDragStart: CustomEvent<any>;
-        cellDropped: CustomEvent<any>;
-        rowClicked: CustomEvent<any>;
-        rowDragStart: CustomEvent<any>;
-        rowDropped: CustomEvent<any>;
-        cellClicked: CustomEvent<any>;
-        headerClicked: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type DataTableProps = typeof __propDef.props;
-export type DataTableEvents = typeof __propDef.events;
-export type DataTableSlots = typeof __propDef.slots;
-export default class DataTable extends SvelteComponent<DataTableProps, DataTableEvents, DataTableSlots> {
+import type { ActionEvent, ColumnConfig, DataCellChangedEvent, DataCellDragEvent, DataCellDropEvent, DataCellEvent, DataTableTheme, EnterAction, HeaderEvent, RowBoolean, RowClassFunction, RowDragEvent, RowDropBoolean, RowDropEvent, RowEvent, SortFunction } from './common';
+interface Props {
+    allowRowDrag?: RowBoolean;
+    allowRowDrop?: RowDropBoolean;
+    columns?: ColumnConfig[];
+    enterAction?: EnterAction;
+    itemKey?: string | null;
+    items?: any[];
+    onaction?: (event: ActionEvent) => void;
+    onbutton?: (event: DataCellEvent) => void;
+    oncellchanged?: (event: DataCellChangedEvent) => void;
+    oncellclick?: (event: DataCellEvent) => void;
+    oncelldragstart?: (event: DataCellDragEvent) => void;
+    oncelldropped?: (event: DataCellDropEvent) => void;
+    onenterpressed?: (event: DataCellEvent) => void;
+    onheaderclick?: (event: HeaderEvent) => void;
+    onnexttab?: (event: DataCellEvent) => void;
+    onprevtab?: (event: DataCellEvent) => void;
+    onrowclick?: (event: RowEvent) => void;
+    onrowdragstart?: (event: RowDragEvent) => void;
+    onrowdropped?: (event: RowDropEvent) => void;
+    reverseSort?: boolean;
+    sortColumnID?: string | null;
+    sortFunction?: SortFunction;
+    sortKey?: string;
+    theme?: DataTableTheme;
+    trClassGetter?: RowClassFunction;
 }
-export {};
+declare const DataTable: import("svelte").Component<Props, {}, "reverseSort" | "sortColumnID" | "sortFunction" | "sortKey">;
+type DataTable = ReturnType<typeof DataTable>;
+export default DataTable;