@emamid/svelte-data-table 0.0.22 → 1.0.2

package/dist/DataTableDataCell.svelte

@@ -1,109 +1,176 @@
-<script>import { createEventDispatcher, onDestroy } from "svelte";
-import { TableBodyCell } from "flowbite-svelte";
-import {
-  defaultCellRenderer,
-  evalCellDropBoolean,
-  evalRowBoolean,
-  getDataTableContext
-} from "./common.js";
-export let column;
-export let item;
-export let isCellFocused;
-const context = getDataTableContext();
-let span;
-const dispatch = createEventDispatcher();
-const dragOverHandler = (event) => {
-  const { draggedColumn, draggedItem } = context;
-  event.preventDefault();
-  const canDrop = evalCellDropBoolean(draggedItem, draggedColumn, item, column.allowCellDrop);
-  if (canDrop) {
-    event.preventDefault();
-    if (event.dataTransfer) {
-      event.dataTransfer.dropEffect = "move";
-    }
-  }
-};
-const dragStartHandler = (dragEvent) => {
-  context.draggedColumn = column;
-  context.draggedItem = item;
-  dispatch("cellDragStart", {
-    dragEvent,
-    sourceColumn: column,
-    sourceItem: item
-  });
-};
-const dropHandler = (event) => {
-  const { draggedColumn, draggedItem } = context;
-  const canDrop = evalCellDropBoolean(draggedItem, draggedColumn, item, column.allowCellDrop);
-  if (canDrop) {
-    event.preventDefault();
-    dispatch("cellDropped", {
-      sourceColumn: draggedColumn,
-      sourceItem: draggedItem,
-      targetColumn: column,
-      targetItem: item
-    });
-  }
-};
-$: {
-  if (span && span.parentElement) {
-    span.parentElement.addEventListener("dragover", dragOverHandler);
-    span.parentElement.addEventListener("dragstart", dragStartHandler);
-    span.parentElement.addEventListener("drop", dropHandler);
-  }
-}
-onDestroy(() => {
-  if (span && span.parentElement) {
-    span.parentElement.removeEventListener("dragover", dragOverHandler);
-    span.parentElement.removeEventListener("dragstart", dragStartHandler);
-    span.parentElement.removeEventListener("drop", dropHandler);
-  }
-});
+<script lang="ts">
+	import type {
+		ActionEvent,
+		ColumnConfig,
+		DataCellChangedEvent,
+		DataCellDragEvent,
+		DataCellDropEvent,
+		DataCellEvent,
+		DataCellMouseEvent,
+	} from './common';
+	import {
+		defaultCellRenderer,
+		evalCellDropBoolean,
+		evalRowBoolean,
+		getDataTableContext,
+		joinPartClasses,
+	} from './common';
+	import { activeTheme } from './themes/active';
+	
+	interface Props {
+		column: ColumnConfig;
+		item: any;
+		isCellFocused: boolean;
+		onaction?: (event: ActionEvent) => void;
+		onbutton?: (event: DataCellEvent) => void;
+		oncellchanged?: (event: DataCellChangedEvent) => void;
+		oncelldragend?: (event: DataCellDragEvent) => void;
+		oncelldragstart?: (event: DataCellDragEvent) => void;
+		oncelldropped?: (event: DataCellDropEvent) => void;
+		onclick?: (event: DataCellMouseEvent) => void;
+		onenterpressed?: (event: DataCellEvent) => void;
+		onnexttab?: (event: DataCellEvent) => void;
+		onprevtab?: (event: DataCellEvent) => void;
+	}
+
+	let {
+		column,
+		item,
+		isCellFocused,
+		onaction,
+		onbutton,
+		oncellchanged,
+		oncelldragend,
+		oncelldragstart,
+		oncelldropped,
+		onclick,
+		onenterpressed,
+		onnexttab,
+		onprevtab,
+	}: Props = $props();
+
+	const context = getDataTableContext();
+	const tableTheme = context.theme || {};
+
+	const baseTDClass = $derived(joinPartClasses(
+		'dataCell',
+		'td', [
+			activeTheme,
+			tableTheme,
+			column.theme,
+		],
+		isCellFocused,
+	));
+
+	const click = (event: MouseEvent) => {
+		onclick?.({
+			...event,
+			column,
+			item,
+		});
+	}
+
+	const dragEnd = (event: DragEvent) => {
+		oncelldragend?.({
+			...event,
+			sourceColumn: column,
+			sourceItem: item,
+		})
+	}
+
+	const dragOver = (event: DragEvent) => {
+		const { draggedColumn, draggedItem} = context;
+		event.preventDefault();
+		const canDrop = evalCellDropBoolean(draggedItem, draggedColumn, item, column.allowCellDrop);
+
+		if (!canDrop) {
+			return;
+		}
+
+		event.preventDefault();
+		if (event.dataTransfer) {
+			event.dataTransfer.dropEffect = 'move';
+		}
+	}
+
+	const dragStart = (dragEvent: DragEvent) => {
+		oncelldragstart?.({
+			...dragEvent,
+			sourceColumn: column,
+			sourceItem: item,
+		});
+	}
+
+	const drop = (event: DragEvent) => {
+		const { draggedColumn, draggedItem} = context;
+		if (!draggedItem || !draggedColumn) {
+			return;		
+		}
+
+		const canDrop = evalCellDropBoolean(draggedItem, draggedColumn, item, column.allowCellDrop);
+		if (!canDrop) {
+			return;
+		}
+
+		event.preventDefault();
+
+		oncelldropped?.({
+			...event,
+			sourceColumn: draggedColumn,
+			sourceItem: draggedItem,
+			targetColumn: column,
+			targetItem: item,
+		});
+	}
+
+	// const getClass = $derived((value: any) => column.tdClassGetter ? column.tdClassGetter(item, column, value, isCellFocused, baseTDClass) : baseTDClass);
+
 </script>
 
-{#await (column.cellRenderer || defaultCellRenderer)(column, item)}
-	<TableBodyCell tdClass={column.getTDClass(item, '', isCellFocused)} />
-{:then { dataValue, displayValue }}
-	<TableBodyCell
+{#await (column.cellRenderer || defaultCellRenderer)(column, item, isCellFocused, baseTDClass)}
+	<td class={baseTDClass}></td>
+{:then { dataValue, displayValue, focusComponentConfig, tdClass, viewComponentConfig }}
+	<td
 		draggable={evalRowBoolean(item, column.allowCellDrag)}
-		tdClass={column.getTDClass(item, dataValue, isCellFocused)}
-		on:click
+		class={tdClass || baseTDClass}
+		onclick={click}
+		ondragend={dragEnd}
+		ondragover={dragOver}
+		ondragstart={dragStart}
+		ondrop={drop}
 	>
-		{#if !!column.allowCellDrag || !!column.allowCellDrop}
-			<span style="display:none" bind:this={span}></span>
-		{/if}
 		{#if column.viewComponent}
-			<svelte:component
-				this={column.viewComponent}
+			<column.viewComponent
 				{column}
 				{item}
 				value={dataValue}
-				on:action
-				on:cellChanged
-				on:click
-				on:enterPressed
-				on:prevTab
-				on:nextTab
-				{...column.viewComponentConfig}
+				{onaction}
+				{onbutton}
+				{oncellchanged}
+				onclick={click}
+				{onenterpressed}
+				{onprevtab}
+				{onnexttab}
+				{...(viewComponentConfig || column.viewComponentConfig)}
 			/>
 		{:else if column.focusComponent && isCellFocused}
-			<svelte:component
-				this={column.focusComponent}
+			<column.focusComponent
 				{column}
 				{item}
 				value={dataValue}
-				on:action
-				on:cellChanged
-				on:click
-				on:enterPressed
-				on:prevTab
-				on:nextTab
-				{...column.focusComponentConfig}
+				{onaction}
+				{onbutton}
+				{oncellchanged}
+				onclick={click}
+				{onenterpressed}
+				{onprevtab}
+				{onnexttab}
+				{...(focusComponentConfig || column.focusComponentConfig)}
 			/>
 		{:else}
 			{displayValue}
 		{/if}
-	</TableBodyCell>
+	</td>
 {:catch}
-	<TableBodyCell tdClass={column.getTDClass(item, '', isCellFocused)} />
+	<td class={baseTDClass}></td>
 {/await}

package/dist/DataTableDataCell.svelte.d.ts

@@ -1,28 +1,19 @@
-import { SvelteComponent } from "svelte";
-import type { InternalColumnConfig } from './common.js';
-declare const __propDef: {
-    props: {
-        column: InternalColumnConfig;
-        item: any;
-        isCellFocused: boolean;
-    };
-    events: {
-        click: any;
-        action: any;
-        cellChanged: any;
-        enterPressed: any;
-        prevTab: any;
-        nextTab: any;
-        cellDragStart: CustomEvent<any>;
-        cellDropped: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type DataTableDataCellProps = typeof __propDef.props;
-export type DataTableDataCellEvents = typeof __propDef.events;
-export type DataTableDataCellSlots = typeof __propDef.slots;
-export default class DataTableDataCell extends SvelteComponent<DataTableDataCellProps, DataTableDataCellEvents, DataTableDataCellSlots> {
+import type { ActionEvent, ColumnConfig, DataCellChangedEvent, DataCellDragEvent, DataCellDropEvent, DataCellEvent, DataCellMouseEvent } from './common';
+interface Props {
+    column: ColumnConfig;
+    item: any;
+    isCellFocused: boolean;
+    onaction?: (event: ActionEvent) => void;
+    onbutton?: (event: DataCellEvent) => void;
+    oncellchanged?: (event: DataCellChangedEvent) => void;
+    oncelldragend?: (event: DataCellDragEvent) => void;
+    oncelldragstart?: (event: DataCellDragEvent) => void;
+    oncelldropped?: (event: DataCellDropEvent) => void;
+    onclick?: (event: DataCellMouseEvent) => void;
+    onenterpressed?: (event: DataCellEvent) => void;
+    onnexttab?: (event: DataCellEvent) => void;
+    onprevtab?: (event: DataCellEvent) => void;
 }
-export {};
+declare const DataTableDataCell: import("svelte").Component<Props, {}, "">;
+type DataTableDataCell = ReturnType<typeof DataTableDataCell>;
+export default DataTableDataCell;

package/dist/DataTableHeaderCell.svelte

@@ -1,25 +1,67 @@
-<script>import { TableHeadCell } from "flowbite-svelte";
-import { joinClasses } from "./common.js";
-export let column;
-export let reverseSort;
-export let isSorted;
-export let defaultSortAscendingIcon;
-export let defaultSortDescendingIcon;
-export let thClass;
-const sortAscendingIcon = column.sortAscendingIcon || defaultSortAscendingIcon;
-const sortDescendingIcon = column.sortDescendingIcon || defaultSortDescendingIcon;
+<script lang="ts">
+	import {
+		getDataTableContext,
+		getPartIcon,
+		joinPartClasses,
+	} from './common';
+	import type {	ColumnConfig } from './common';
+	import { activeTheme } from './themes/active';
+	
+	import DataTableIcon from './DataTableIcon.svelte';
+
+	interface Props {
+		column: ColumnConfig;
+		isSorted?: boolean;
+		onclick?: (event: MouseEvent) => void;
+		reverseSort: boolean;
+	}
+
+	let {
+		column,
+		isSorted,
+		onclick,
+		reverseSort,
+	}: Props = $props();
+
+	const tableTheme = getDataTableContext()?.theme || {};
+
+	const getClasses = (element: string) => joinPartClasses(
+		'headerCell',
+		element, [
+			activeTheme,
+			tableTheme,
+			column.theme,
+		],
+	)	
+
+	const getIcon = (propName: string) => getPartIcon(
+		'headerCell',
+		propName, [
+			activeTheme,
+			tableTheme,
+			column.theme,
+		],
+	)
+
+	const thClass = $derived(getClasses('th'))
+	const spanClass = $derived(getClasses('span'));
+	const titleSpanClass = $derived(getClasses('titleSpan'))
+	const sortAscendingIcon = $derived(getIcon('sortAscending'));
+	const sortDescendingIcon = $derived(getIcon('sortDescending'));
 </script>
 
-<TableHeadCell
-	class={joinClasses(thClass || column.thClassOverride, column.thClassAppend)}
-	on:click
+<th
+	class={thClass}
+	{onclick}
 >
-	{#if isSorted}
-		{#if reverseSort}
-			<svelte:component this={sortAscendingIcon} class="inline h-3 w-3" />
-		{:else}
-			<svelte:component this={sortDescendingIcon} class="inline h-3 w-3" />
+	<span class={spanClass}>
+		{#if isSorted}
+			{#if reverseSort}
+				<DataTableIcon icon={sortDescendingIcon}/>
+			{:else}
+				<DataTableIcon icon={sortAscendingIcon}/>
+			{/if}
 		{/if}
-	{/if}
-	<span>{column.title}</span>
-</TableHeadCell>
+		<span class={titleSpanClass}>{column.title}</span>
+	</span>
+</th>

package/dist/DataTableHeaderCell.svelte.d.ts

@@ -1,24 +1,10 @@
-import { SvelteComponent } from "svelte";
-import type { InternalColumnConfig } from './common.js';
-declare const __propDef: {
-    props: {
-        column: InternalColumnConfig;
-        reverseSort: boolean;
-        isSorted: boolean;
-        defaultSortAscendingIcon: ConstructorOfATypedSvelteComponent;
-        defaultSortDescendingIcon: ConstructorOfATypedSvelteComponent;
-        thClass: string;
-    };
-    events: {
-        click: MouseEvent;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type DataTableHeaderCellProps = typeof __propDef.props;
-export type DataTableHeaderCellEvents = typeof __propDef.events;
-export type DataTableHeaderCellSlots = typeof __propDef.slots;
-export default class DataTableHeaderCell extends SvelteComponent<DataTableHeaderCellProps, DataTableHeaderCellEvents, DataTableHeaderCellSlots> {
+import type { ColumnConfig } from './common';
+interface Props {
+    column: ColumnConfig;
+    isSorted?: boolean;
+    onclick?: (event: MouseEvent) => void;
+    reverseSort: boolean;
 }
-export {};
+declare const DataTableHeaderCell: import("svelte").Component<Props, {}, "">;
+type DataTableHeaderCell = ReturnType<typeof DataTableHeaderCell>;
+export default DataTableHeaderCell;

package/dist/DataTableIcon.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import type { Component } from 'svelte';
+	import Icon from '@iconify/svelte';
+
+	import type { IconifyProps, IconProp } from './common';
+
+	interface Props {
+		classes?: string;
+		icon: IconProp;
+	}
+
+	const { classes, icon }: Props = $props();
+	
+	const iconType = $derived(typeof icon);
+</script>
+
+{#if iconType === 'string'}
+	<span class={classes}>{icon}</span>
+{:else if iconType === 'object'}
+	<Icon class={classes} {...(icon as IconifyProps)} />
+{:else}
+	<!-- Assuming icon is a Svelte component -->
+	{@const SvelteComponent = icon as Component<any, any, any>}
+	<SvelteComponent class={classes}/>
+{/if}

package/dist/DataTableIcon.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Component } from 'svelte';
+import type { IconProp } from './common';
+interface Props {
+    classes?: string;
+    icon: IconProp;
+}
+declare const DataTableIcon: Component<Props, {}, "">;
+type DataTableIcon = ReturnType<typeof DataTableIcon>;
+export default DataTableIcon;