@emamid/svelte-data-table 0.0.21 → 1.0.1

package/dist/DataTableRow.svelte

@@ -1,78 +1,146 @@
-<script>import { createEventDispatcher, onDestroy, onMount } from "svelte";
-import { TableBodyRow } from "flowbite-svelte";
-import DataTableDataCell from "./DataTableDataCell.svelte";
-import {
-  evalRowDropBoolean,
-  evalRowBoolean,
-  getColumnID,
-  getDataTableContext
-} from "./common.js";
-export let allowRowDrag;
-export let allowRowDrop;
-export let columns;
-export let focusedColumnKeyID;
-export let getTRClass;
-export let isRowFocused;
-export let item;
-const context = getDataTableContext();
-let span;
-const dispatch = createEventDispatcher();
-const cellClicked = (column) => dispatch("cellClicked", { column, item });
-const rowClicked = () => dispatch("rowClicked", { item });
-const dragOverHandler = (event) => {
-  const { draggedItem } = context;
-  const canDrop = evalRowDropBoolean(draggedItem, item, allowRowDrop);
-  if (canDrop) {
-    event.preventDefault();
-    if (event.dataTransfer) {
-      event.dataTransfer.dropEffect = "move";
-    }
-  }
-};
-const dragStartHandler = (dragEvent) => {
-  context.draggedColumn = void 0;
-  context.draggedItem = item;
-  dispatch("rowDragStart", {
-    dragEvent,
-    sourceItem: item
-  });
-};
-const dropHandler = (event) => {
-  const { draggedItem } = context;
-  const canDrop = evalRowDropBoolean(draggedItem, item, allowRowDrop);
-  if (canDrop) {
-    event.preventDefault();
-    dispatch("rowDropped", {
-      sourceItem: draggedItem,
-      targetItem: item
-    });
-  }
-};
-onMount(() => {
-  if (span && span.parentElement) {
-    span.parentElement.addEventListener("click", rowClicked);
-    span.parentElement.addEventListener("dragover", dragOverHandler);
-    span.parentElement.addEventListener("dragstart", dragStartHandler);
-    span.parentElement.addEventListener("drop", dropHandler);
-  }
-});
-onDestroy(() => {
-  if (span && span.parentElement) {
-    span.parentElement.removeEventListener("click", rowClicked);
-    span.parentElement.removeEventListener("dragover", dragOverHandler);
-    span.parentElement.removeEventListener("dragstart", dragStartHandler);
-    span.parentElement.removeEventListener("drop", dropHandler);
-  }
-});
+<script lang="ts">
+	import { activeTheme } from './themes/active';
+	import DataTableDataCell from './DataTableDataCell.svelte';
+	import {
+		evalRowDropBoolean,
+		evalRowBoolean,
+		getColumnID,
+		getDataTableContext,
+		joinPartClasses,
+	} from './common';
+	import type {
+		ActionEvent,
+		ColumnConfig,
+		DataCellChangedEvent,
+		DataCellDragEvent,
+		DataCellDropEvent,
+		DataCellEvent,
+		DataCellMouseEvent,
+		RowBoolean,
+		RowClassFunction,
+		RowDragEvent,
+		RowDropBoolean,
+		RowDropEvent,
+		RowEvent,
+	} from './common';
+
+	interface Props {
+		allowRowDrag: RowBoolean;
+		allowRowDrop: RowDropBoolean;
+		columns: ColumnConfig[];
+		focusedColumnKeyID: any;
+		isRowFocused: boolean;
+		item: any;
+		onaction?: (event: ActionEvent) => void;
+		onbutton?: (event: DataCellEvent) => void;
+		oncellchanged?: (event: DataCellChangedEvent) => void;
+		oncellclick?: (event: DataCellMouseEvent) => void;
+		oncelldragend?: (event: DataCellDragEvent) => void;
+		oncelldragstart?: (event: DataCellDragEvent) => void;
+		oncelldropped?: (event: DataCellDropEvent) => void;
+		ondragend?: (event: RowDragEvent) => void;
+		ondragstart?: (event: RowDragEvent) => void;
+		ondropped?: (event: RowDropEvent) => void;
+		onenterpressed?: (event: DataCellEvent) => void;
+		onnexttab?: (event: DataCellEvent) => void;
+		onprevtab?: (event: DataCellEvent) => void;
+		onrowclick?: (event: RowEvent) => void;
+		trClassGetter?: RowClassFunction;
+	}
+
+	let {
+		allowRowDrag,
+		allowRowDrop,
+		columns,
+		focusedColumnKeyID,
+		isRowFocused,
+		item,
+		onaction,
+		onbutton,
+		oncellchanged,
+		oncellclick,
+		oncelldragend,
+		oncelldragstart,
+		oncelldropped,
+		ondragend,
+		ondragstart,
+		ondropped,
+		onenterpressed,
+		onnexttab,
+		onprevtab,
+		onrowclick,
+		trClassGetter,
+	}: Props = $props();
+
+	const context = getDataTableContext();
+	const tableTheme = context.theme || {};
+
+	const rowClicked = () => onrowclick?.({ item });
+
+	const dragEnd = (event: DragEvent) => {
+		ondragend?.({
+			...event,
+			sourceItem: item,
+		})
+	}
+
+	const dragOver = (event: DragEvent) => {
+		const { draggedItem } = context;
+		const canDrop = evalRowDropBoolean(draggedItem, item, allowRowDrop);
+		if (canDrop) {
+			event.preventDefault();
+			if (event.dataTransfer) {
+				event.dataTransfer.dropEffect = 'move';
+			}
+		}
+	}
+
+	const dragStart = (dragEvent: DragEvent) => {
+		if (context.dragType) {
+			return;
+		}
+		ondragstart?.({
+			...dragEvent,
+			sourceItem: item,
+		});
+	}
+
+	const drop = (event: DragEvent) => {
+		const { draggedItem } = context;
+		const canDrop = evalRowDropBoolean(draggedItem, item, allowRowDrop);
+		if (!canDrop) {
+			return;
+		}
+
+		event.preventDefault();
+		ondropped?.({
+			...event,
+			sourceItem: draggedItem,
+			targetItem: item,
+		});
+	}
+
+	const baseTRClass = $derived(joinPartClasses(
+		'row',
+		'tr', [
+			activeTheme,
+			tableTheme,
+		],
+		isRowFocused,
+	));
+
+	const trClass = $derived(trClassGetter ? trClassGetter(item, isRowFocused, baseTRClass) : baseTRClass);
 </script>
 
-<TableBodyRow
-	class={getTRClass(item, isRowFocused)}
+<tr
+	class={trClass}
 	draggable={evalRowBoolean(item, allowRowDrag)}
+	onclick={rowClicked}
+	ondragend={dragEnd}
+	ondragover={dragOver}
+	ondragstart={dragStart}
+	ondrop={drop}
 >
-	{#if !!allowRowDrag || !!allowRowDrop}
-		<span style="display:none" bind:this={span}></span>
-	{/if}
 	{#each columns as column}
 		{@const isCellFocused =
 			isRowFocused && focusedColumnKeyID && focusedColumnKeyID === getColumnID(column)}
@@ -80,14 +148,16 @@ onDestroy(() => {
 			{column}
 			{isCellFocused}
 			{item}
-			on:click={() => cellClicked(column)}
-			on:enterPressed
-			on:prevTab
-			on:nextTab
-			on:action
-			on:cellChanged
-			on:cellDragStart
-			on:cellDropped
+			{onaction}
+			{onbutton}
+			{oncellchanged}
+			{oncelldragend}
+			{oncelldragstart}
+			{oncelldropped}
+			onclick={oncellclick}
+			{onenterpressed}
+			{onnexttab}
+			{onprevtab}
 		/>
 	{/each}
-</TableBodyRow>
+</tr>

package/dist/DataTableRow.svelte.d.ts

@@ -1,35 +1,27 @@
-import { SvelteComponent } from "svelte";
-import type { RowBoolean, RowDropBoolean, GetTRClassFunction, InternalColumnConfig } from './common.js';
-declare const __propDef: {
-    props: {
-        allowRowDrag: RowBoolean;
-        allowRowDrop: RowDropBoolean;
-        columns: InternalColumnConfig[];
-        focusedColumnKeyID: any;
-        getTRClass: GetTRClassFunction;
-        isRowFocused: boolean;
-        item: any;
-    };
-    events: {
-        enterPressed: any;
-        prevTab: any;
-        nextTab: any;
-        action: any;
-        cellChanged: any;
-        cellDragStart: CustomEvent<any>;
-        cellDropped: CustomEvent<any>;
-        cellClicked: CustomEvent<any>;
-        rowClicked: CustomEvent<any>;
-        rowDragStart: CustomEvent<any>;
-        rowDropped: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type DataTableRowProps = typeof __propDef.props;
-export type DataTableRowEvents = typeof __propDef.events;
-export type DataTableRowSlots = typeof __propDef.slots;
-export default class DataTableRow extends SvelteComponent<DataTableRowProps, DataTableRowEvents, DataTableRowSlots> {
+import type { ActionEvent, ColumnConfig, DataCellChangedEvent, DataCellDragEvent, DataCellDropEvent, DataCellEvent, DataCellMouseEvent, RowBoolean, RowClassFunction, RowDragEvent, RowDropBoolean, RowDropEvent, RowEvent } from './common';
+interface Props {
+    allowRowDrag: RowBoolean;
+    allowRowDrop: RowDropBoolean;
+    columns: ColumnConfig[];
+    focusedColumnKeyID: any;
+    isRowFocused: boolean;
+    item: any;
+    onaction?: (event: ActionEvent) => void;
+    onbutton?: (event: DataCellEvent) => void;
+    oncellchanged?: (event: DataCellChangedEvent) => void;
+    oncellclick?: (event: DataCellMouseEvent) => void;
+    oncelldragend?: (event: DataCellDragEvent) => void;
+    oncelldragstart?: (event: DataCellDragEvent) => void;
+    oncelldropped?: (event: DataCellDropEvent) => void;
+    ondragend?: (event: RowDragEvent) => void;
+    ondragstart?: (event: RowDragEvent) => void;
+    ondropped?: (event: RowDropEvent) => void;
+    onenterpressed?: (event: DataCellEvent) => void;
+    onnexttab?: (event: DataCellEvent) => void;
+    onprevtab?: (event: DataCellEvent) => void;
+    onrowclick?: (event: RowEvent) => void;
+    trClassGetter?: RowClassFunction;
 }
-export {};
+declare const DataTableRow: import("svelte").Component<Props, {}, "">;
+type DataTableRow = ReturnType<typeof DataTableRow>;
+export default DataTableRow;

package/dist/cells/Actions.d.ts

@@ -1,4 +1,4 @@
-import type { Action } from './ActionsCell.svelte';
+import type { Action } from '../common';
 /**
  * @constant bookmarkAction
  * @type {Action}

package/dist/cells/Actions.js

@@ -1,4 +1,3 @@
-import { ArrowDownSolid, ArrowUpSolid, BellActiveOutline, BookmarkOutline, CogOutline, EditOutline, HeartSolid, InfoCircleOutline, ShareNodesOutline, TrashBinOutline, } from 'flowbite-svelte-icons';
 /**
  * @constant bookmarkAction
  * @type {Action}
@@ -6,7 +5,7 @@ import { ArrowDownSolid, ArrowUpSolid, BellActiveOutline, BookmarkOutline, CogOu
  * @property {ConstructorOfATypedSvelteComponent} icon - BookmarkOutline
 */
 export const bookmarkAction = {
-    icon: BookmarkOutline,
+    icon: '🔖',
     name: 'bookmark',
 };
 /**
@@ -16,7 +15,7 @@ export const bookmarkAction = {
  * @property {ConstructorOfATypedSvelteComponent} icon - TrashBinOutline
 */
 export const deleteAction = {
-    icon: TrashBinOutline,
+    icon: '🗑',
     name: 'delete',
 };
 /**
@@ -26,7 +25,7 @@ export const deleteAction = {
  * @property {ConstructorOfATypedSvelteComponent} icon - ArrowDownSolid
 */
 export const downAction = {
-    icon: ArrowDownSolid,
+    icon: '▼',
     name: 'down',
 };
 /**
@@ -36,7 +35,7 @@ export const downAction = {
  * @property {ConstructorOfATypedSvelteComponent} icon - EditOutline
 */
 export const editAction = {
-    icon: EditOutline,
+    icon: '✎',
     name: 'edit',
 };
 /**
@@ -46,7 +45,7 @@ export const editAction = {
  * @property {ConstructorOfATypedSvelteComponent} icon - HeartSolid
 */
 export const favoriteAction = {
-    icon: HeartSolid,
+    icon: '♥',
     name: 'favorite',
 };
 /**
@@ -56,7 +55,7 @@ export const favoriteAction = {
  * @property {ConstructorOfATypedSvelteComponent} icon - InfoCircleOutline
 */
 export const infoAction = {
-    icon: InfoCircleOutline,
+    icon: 'ℹ',
     name: 'info',
 };
 /**
@@ -66,7 +65,7 @@ export const infoAction = {
  * @property {ConstructorOfATypedSvelteComponent} icon - BellActiveOutline
 */
 export const notificationAction = {
-    icon: BellActiveOutline,
+    icon: '🔔',
     name: 'notification',
 };
 /**
@@ -76,7 +75,7 @@ export const notificationAction = {
  * @property {ConstructorOfATypedSvelteComponent} icon - CogOutline
 */
 export const settingsAction = {
-    icon: CogOutline,
+    icon: '⚙',
     name: 'settings',
 };
 /**
@@ -86,7 +85,7 @@ export const settingsAction = {
  * @property {ConstructorOfATypedSvelteComponent} icon - ShareNodesOutline
 */
 export const shareAction = {
-    icon: ShareNodesOutline,
+    icon: '<',
     name: 'share',
 };
 /**
@@ -96,6 +95,6 @@ export const shareAction = {
  * @property {ConstructorOfATypedSvelteComponent} icon - UpArrowSolid
 */
 export const upAction = {
-    icon: ArrowUpSolid,
+    icon: '▲',
     name: 'up',
 };

package/dist/cells/ActionsCell.svelte

@@ -1,31 +1,66 @@
-<script context="module"></script>
+<script lang="ts">
+	import {
+		getDataTableContext,
+		joinInputClasses,
+	} from '../common';
+	import type {
+		Action,
+		ActionEvent,
+		ColumnConfig,
+	} from '../common';
+	import { activeTheme } from '../themes/active';
 
-<script>import { createEventDispatcher } from "svelte";
-import { Button } from "flowbite-svelte";
-export let buttonClass = "border-0 p-1";
-export let buttonColor = "light";
-export let iconClass = "w-4 h-4";
-export let column;
-export let item;
-export let actions = [];
-const dispatch = createEventDispatcher();
-const actionClicked = (action) => {
-  dispatch("action", {
-    action: action.name,
-    column,
-    item
-  });
-};
+	import DataTableIcon from '../DataTableIcon.svelte';
+
+	interface Props {
+		actions?: Action[];
+		column: ColumnConfig;
+		item: any;
+		onaction?: (event: ActionEvent) => void;
+	}
+
+	let {
+		actions = [],
+		column,
+		item,
+		onaction,
+	}: Props = $props();
+
+	const tableTheme = getDataTableContext()?.theme || {};
+
+	const actionClicked = (action: Action) => {
+		onaction?.({
+			action,
+			column,
+			item,
+		});
+	};
+
+	const getClass = (element: string, action: Action) => joinInputClasses(
+		'action',
+		element, [
+			activeTheme,
+			tableTheme,
+			column.theme,
+			{
+				inputs: {
+					action: action?.theme,
+				}
+			}
+		],
+	)
 </script>
 
 {#each actions as action}
-	<Button
-		class={action.buttonClass || buttonClass}
-		color={action.buttonColor || buttonColor}
+	<button
+		class={getClass('button', action)}
 		disabled={action.isDisabled?.(item, column, action)}
-		on:click={() => actionClicked(action)}
+		onclick={() => actionClicked(action)}
+		title={action.tooltip}
 	>
-		<svelte:component this={action.icon} class={action.iconClass || iconClass} />
+		{#if action.icon}
+			<DataTableIcon classes={getClass('icon', action)} icon={action.icon}/>
+		{/if}
 		{#if action.caption}{action.caption}{/if}
-	</Button>
+	</button>
 {/each}

package/dist/cells/ActionsCell.svelte.d.ts

@@ -1,35 +1,10 @@
-import { SvelteComponent } from "svelte";
-import type { ColumnConfig } from '../common.js';
-type ButtonColor = 'red' | 'yellow' | 'green' | 'purple' | 'blue' | 'light' | 'dark' | 'primary' | 'none' | 'alternative' | undefined;
-export type ActionDisablementFunction = (item: any, column: ColumnConfig, action: Action) => boolean;
-export interface Action {
-    buttonClass?: string;
-    buttonColor?: ButtonColor;
-    caption?: string;
-    name: string;
-    icon: ConstructorOfATypedSvelteComponent;
-    iconClass?: string;
-    isDisabled?: ActionDisablementFunction;
+import type { Action, ActionEvent, ColumnConfig } from '../common';
+interface Props {
+    actions?: Action[];
+    column: ColumnConfig;
+    item: any;
+    onaction?: (event: ActionEvent) => void;
 }
-declare const __propDef: {
-    props: {
-        buttonClass?: string | undefined;
-        buttonColor?: ButtonColor;
-        iconClass?: string | undefined;
-        column: ColumnConfig;
-        item: any;
-        actions?: Action[] | undefined;
-    };
-    events: {
-        action: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type ActionsCellProps = typeof __propDef.props;
-export type ActionsCellEvents = typeof __propDef.events;
-export type ActionsCellSlots = typeof __propDef.slots;
-export default class ActionsCell extends SvelteComponent<ActionsCellProps, ActionsCellEvents, ActionsCellSlots> {
-}
-export {};
+declare const ActionsCell: import("svelte").Component<Props, {}, "">;
+type ActionsCell = ReturnType<typeof ActionsCell>;
+export default ActionsCell;

package/dist/cells/ButtonCell.svelte

@@ -1,18 +1,60 @@
-<script>import { Button } from "flowbite-svelte";
-export let caption = "";
-export let column;
-export let item;
-export let icon = null;
-export let iconClass = "";
-export let iconPosition = "right";
+<script lang="ts">
+	import {
+		getDataTableContext,
+		joinInputClasses,
+	} from '../common';
+	import type {
+		ColumnConfig,
+		DataCellEvent,
+		IconProp,
+	} from '../common';
+	import { activeTheme } from '../themes/active';
+
+	import DataTableIcon from '../DataTableIcon.svelte';
+
+	interface Props {
+		caption?: string;
+		column: ColumnConfig;
+		item: any;
+		icon?: IconProp;
+		iconPosition?: 'left' | 'right';
+		onbutton?: (event: DataCellEvent) => void;
+	}
+
+	let {
+		caption = '',
+		column,
+		item,
+		icon,
+		iconPosition = 'right',
+		onbutton,
+	}: Props = $props();
+
+	const tableTheme = getDataTableContext()?.theme || {};
+
+	const getClass = (element: string) => joinInputClasses(
+		'button',
+		element, [
+			activeTheme,
+			tableTheme,
+			column.theme,
+		],
+	)
+
+	const buttonClass = $derived(getClass('button'));
+	const iconClass = $derived(getClass('icon'));
+
 </script>
 
-<Button>
-{#if icon && iconPosition === 'left'}
-<svelte:component this={icon} class={iconClass} />
-{/if}
-{#if caption}{caption}{/if}
-{#if icon && iconPosition === 'right'}
-<svelte:component this={icon} class={iconClass} />
-{/if}
-</Button>
+<button
+	class={buttonClass}
+	onclick={() => onbutton?.({ column, item })}
+>
+	{#if icon && iconPosition === 'left'}
+		<DataTableIcon classes={iconClass} {icon}/>
+	{/if}
+	{#if caption}{caption}{/if}
+	{#if icon && iconPosition === 'right'}
+		<DataTableIcon classes={iconClass} {icon}/>
+	{/if}
+</button>

package/dist/cells/ButtonCell.svelte.d.ts

@@ -1,21 +1,12 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        caption?: string | undefined;
-        column: ColumnConfig;
-        item: any;
-        icon?: ConstructorOfATypedSvelteComponent | null | undefined;
-        iconClass?: string | undefined;
-        iconPosition?: "left" | "right" | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type ButtonCellProps = typeof __propDef.props;
-export type ButtonCellEvents = typeof __propDef.events;
-export type ButtonCellSlots = typeof __propDef.slots;
-export default class ButtonCell extends SvelteComponent<ButtonCellProps, ButtonCellEvents, ButtonCellSlots> {
+import type { ColumnConfig, DataCellEvent, IconProp } from '../common';
+interface Props {
+    caption?: string;
+    column: ColumnConfig;
+    item: any;
+    icon?: IconProp;
+    iconPosition?: 'left' | 'right';
+    onbutton?: (event: DataCellEvent) => void;
 }
-export {};
+declare const ButtonCell: import("svelte").Component<Props, {}, "">;
+type ButtonCell = ReturnType<typeof ButtonCell>;
+export default ButtonCell;