@emamid/svelte-data-table 0.0.22 → 1.0.1

package/dist/cells/CheckboxCell.svelte

@@ -1,21 +1,74 @@
-<script>import { createEventDispatcher } from "svelte";
-import { Checkbox } from "flowbite-svelte";
-export let caption = "";
-export let column;
-export let item;
-export let value;
-let localValue = value;
-const dispatch = createEventDispatcher();
-const toggleChanged = () => {
-  dispatch("cellChanged", {
-    column,
-    item,
-    oldValue: value,
-    newValue: localValue
-  });
-};
+<script lang="ts">
+	import {
+		getDataTableContext,
+		joinInputClasses,
+	} from '../common';
+	import type {
+		ColumnConfig,
+		DataCellChangedEvent,
+	} from '../common';
+	import { activeTheme } from '../themes/active';
+
+	interface Props {
+		caption?: string;
+		column: ColumnConfig;
+		item: any;
+		oncellchanged?: (event: DataCellChangedEvent) => void;
+		value: any;
+		[key: string]: any;
+	}
+
+	let {
+		caption = '',
+		column,
+		item,
+		oncellchanged,
+		value,
+		...inputProps
+	}: Props = $props();
+
+	let internalValue = $derived(value);
+	const tableTheme = getDataTableContext()?.theme || {};
+
+	const toggleChanged = () => {
+		oncellchanged?.({
+			column,
+			item,
+			oldValue: value,
+			newValue: internalValue,
+		});
+	};
+
+	const getClass = (element: string) => joinInputClasses(
+		'checkbox',
+		element, [
+			activeTheme,
+			tableTheme,
+			column.theme,
+		],
+	)
+
+	const labelClass = $derived(getClass('label'));
+	const inputClass = $derived(getClass('input'));
 </script>
 
-<Checkbox {...$$props} bind:checked={localValue} on:change={toggleChanged}
-	>{#if caption}{caption}{/if}</Checkbox
->
+{#if caption}
+	<label class={labelClass}>
+		<input
+			bind:checked={internalValue}
+			class={inputClass}
+			onchange={toggleChanged}
+			type="checkbox"
+			{...inputProps}
+		/>
+		{caption}
+	</label>
+{:else}
+	<input
+		bind:checked={internalValue}
+		class={inputClass}
+		onchange={toggleChanged}
+		type="checkbox"
+		{...inputProps}
+	/>
+{/if}

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

@@ -1,23 +1,12 @@
-import { SvelteComponent } from "svelte";
-import type { ColumnConfig } from '../common.js';
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        caption?: string | undefined;
-        column: ColumnConfig;
-        item: any;
-        value: any;
-    };
-    events: {
-        cellChanged: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type CheckboxCellProps = typeof __propDef.props;
-export type CheckboxCellEvents = typeof __propDef.events;
-export type CheckboxCellSlots = typeof __propDef.slots;
-export default class CheckboxCell extends SvelteComponent<CheckboxCellProps, CheckboxCellEvents, CheckboxCellSlots> {
+import type { ColumnConfig, DataCellChangedEvent } from '../common';
+interface Props {
+    caption?: string;
+    column: ColumnConfig;
+    item: any;
+    oncellchanged?: (event: DataCellChangedEvent) => void;
+    value: any;
+    [key: string]: any;
 }
-export {};
+declare const CheckboxCell: import("svelte").Component<Props, {}, "">;
+type CheckboxCell = ReturnType<typeof CheckboxCell>;
+export default CheckboxCell;

package/dist/cells/InputCell.svelte

@@ -1,54 +1,99 @@
-<script>import { createEventDispatcher } from "svelte";
-import { Input } from "flowbite-svelte";
-import TabWrapper from "./TabWrapper.svelte";
-export let inputType = "text";
-export let item;
-export let column;
-export let value;
-let internalValue;
-$: internalValue = value;
-const dispatch = createEventDispatcher();
-const dispatchCellChanged = () => {
-  if (value !== internalValue) {
-    dispatch("cellChanged", {
-      column,
-      item,
-      oldValue: value,
-      newValue: internalValue
-    });
-  }
-};
-const keypress = (event) => {
-  if (event.key === "Enter") {
-    dispatch("enterPressed", {
-      column,
-      item
-    });
-    dispatchCellChanged();
-  }
-};
-const prevTab = (_event) => {
-  dispatch("prevTab", {
-    column,
-    item
-  });
-  dispatchCellChanged();
-};
-const nextTab = (_event) => {
-  dispatch("nextTab", {
-    column,
-    item
-  });
-  dispatchCellChanged();
-};
+<script lang="ts">
+	import {
+		getDataTableContext,
+		joinInputClasses,
+	} from '../common';
+	import type {
+		ColumnConfig,
+		DataCellChangedEvent,
+		DataCellEvent,
+	} from '../common';
+	import { activeTheme } from '../themes/active';
+
+	import TabWrapper from './TabWrapper.svelte';
+
+	interface Props {
+		column: ColumnConfig;
+		inputType?: string; // InputType;
+		item: any;
+		oncellchanged?: (event: DataCellChangedEvent) => void;
+		onenterpressed?: (event: DataCellEvent) => void;
+		onnexttab?: (event: DataCellEvent) => void;
+		onprevtab?: (event: DataCellEvent) => void;
+		value: string;
+		[key: string]: any;
+	};
+
+	let {
+		column,
+		inputType = 'text',
+		item,
+		oncellchanged,
+		onenterpressed,
+		onnexttab,
+		onprevtab,
+		value,
+		...inputProps
+	}: Props = $props();
+
+	let internalValue = $derived(value);
+	const tableTheme = getDataTableContext()?.theme || {};
+
+	const dispatchCellChanged = () => {
+		if (value !== internalValue) {			
+			oncellchanged?.({
+				column,
+				item,
+				oldValue: value,
+				newValue: internalValue,
+			});
+		}
+	};
+
+	const keypress = (event: KeyboardEvent) => {
+		if (event.key === 'Enter') {
+			onenterpressed?.({
+				column,
+				item,
+			});
+			dispatchCellChanged();
+		}
+	};
+
+	const prevTab = (_event: any) => {
+		onprevtab?.({
+			column,
+			item,
+		});
+		dispatchCellChanged();
+	};
+
+	const nextTab = (_event: any) => {
+		onnexttab?.({
+			column,
+			item,
+		});
+		dispatchCellChanged();
+	};
+
+	const inputClass = $derived(joinInputClasses(
+		'input',
+		'input', [
+			activeTheme,
+			tableTheme,
+			column.theme,
+		],
+	));
 </script>
 
-<TabWrapper on:prevTab={prevTab} on:nextTab={nextTab}>
-	<Input
+<TabWrapper column={column} item={item} onprevtab={prevTab} onnexttab={nextTab}>
+	<!-- svelte-ignore a11y_autofocus -->
+	<input
+		autofocus
+		class={inputClass}
+		onkeypress={keypress}
 		type={inputType}
 		bind:value={internalValue}
-		{...$$props}
-		on:keypress={keypress}
-		autofocus
+		{...inputProps}
 	/>
 </TabWrapper>

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

@@ -1,26 +1,15 @@
-import { SvelteComponent } from "svelte";
-import type { ColumnConfig } from '../common.js';
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        inputType?: string | undefined;
-        item: any;
-        column: ColumnConfig;
-        value: string;
-    };
-    events: {
-        cellChanged: CustomEvent<any>;
-        enterPressed: CustomEvent<any>;
-        prevTab: CustomEvent<any>;
-        nextTab: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type InputCellProps = typeof __propDef.props;
-export type InputCellEvents = typeof __propDef.events;
-export type InputCellSlots = typeof __propDef.slots;
-export default class InputCell extends SvelteComponent<InputCellProps, InputCellEvents, InputCellSlots> {
+import type { ColumnConfig, DataCellChangedEvent, DataCellEvent } from '../common';
+interface Props {
+    column: ColumnConfig;
+    inputType?: string;
+    item: any;
+    oncellchanged?: (event: DataCellChangedEvent) => void;
+    onenterpressed?: (event: DataCellEvent) => void;
+    onnexttab?: (event: DataCellEvent) => void;
+    onprevtab?: (event: DataCellEvent) => void;
+    value: string;
+    [key: string]: any;
 }
-export {};
+declare const InputCell: import("svelte").Component<Props, {}, "">;
+type InputCell = ReturnType<typeof InputCell>;
+export default InputCell;

package/dist/cells/MultiSelectCell.svelte

@@ -1,29 +1,89 @@
-<script>import { createEventDispatcher } from "svelte";
-import { MultiSelect } from "flowbite-svelte";
-import TabWrapper from "./TabWrapper.svelte";
-export let item;
-export let column;
-export let displayProp = "name";
-export let valueProp = "id";
-export let items = [];
-export let value;
-let newValue = value;
-const dispatch = createEventDispatcher();
-$: if (value !== newValue) {
-  dispatch("cellChanged", {
-    column,
-    item,
-    oldValue: value,
-    newValue
-  });
-}
+<script lang="ts">
+	import {
+		getDataTableContext,
+		joinInputClasses,
+	} from '../common';
+	import type {
+		ColumnConfig,
+		DataCellChangedEvent,
+		DataCellEvent,
+	} from '../common';
+	import { activeTheme } from '../themes/active';
+
+	import TabWrapper from './TabWrapper.svelte';
+
+	interface Props {
+		column: ColumnConfig;
+		item: any;
+		displayProp?: string;
+		valueProp?: string;
+		items: any[];
+		oncellchanged?: (event: DataCellChangedEvent) => void;
+		onnexttab?: (event: DataCellEvent) => void;
+		onprevtab?: (event: DataCellEvent) => void;
+		value: any;
+		[key: string]: any;
+	}
+
+	let {
+		column,
+		item,
+		displayProp = 'name',
+		valueProp = 'id',
+		items,
+		oncellchanged,
+		onnexttab,
+		onprevtab,
+		value,
+		...inputProps
+	}: Props = $props();
+
+	let internalValue = $derived(value);
+	const tableTheme = getDataTableContext()?.theme || {};
+
+	const dispatchCellChanged = () => {
+		if (value !== internalValue) {			
+			oncellchanged?.({
+				column,
+				item,
+				oldValue: value,
+				newValue: internalValue,
+			});
+		}
+	};
+
+	const getClass = (element: string) => joinInputClasses(
+		'select',
+		element, [
+			activeTheme,
+			tableTheme,
+			column.theme,
+		],
+	)
 </script>
 
-<TabWrapper {column} {item} on:prevTab on:nextTab>
-	<MultiSelect
-		{...$$props}
-		items={items.map((item) => ({ value: item[valueProp], name: item[displayProp] }))}
-		bind:value={newValue}
+<TabWrapper
+	{column}
+	{item}
+	{onprevtab}
+	{onnexttab}
+>
+	<!-- svelte-ignore a11y_autofocus -->
+	<select
 		autofocus
-	/>
+		class={getClass('select')}
+		multiple
+		onchange={dispatchCellChanged}
+		bind:value={internalValue}
+		{...inputProps}
+	>
+		{#each items as selectItem}
+			<option
+				class={getClass('option')}
+				value={selectItem[valueProp]}
+			>
+				{selectItem[displayProp]}
+			</option>
+		{/each}
+	</select>
 </TabWrapper>

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

@@ -1,27 +1,16 @@
-import { SvelteComponent } from "svelte";
-import type { ColumnConfig } from '../common.ts';
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        item: any;
-        column: ColumnConfig;
-        displayProp?: string | undefined;
-        valueProp?: string | undefined;
-        items?: any[] | undefined;
-        value: any;
-    };
-    events: {
-        prevTab: CustomEvent<any>;
-        nextTab: CustomEvent<any>;
-        cellChanged: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type MultiSelectCellProps = typeof __propDef.props;
-export type MultiSelectCellEvents = typeof __propDef.events;
-export type MultiSelectCellSlots = typeof __propDef.slots;
-export default class MultiSelectCell extends SvelteComponent<MultiSelectCellProps, MultiSelectCellEvents, MultiSelectCellSlots> {
+import type { ColumnConfig, DataCellChangedEvent, DataCellEvent } from '../common';
+interface Props {
+    column: ColumnConfig;
+    item: any;
+    displayProp?: string;
+    valueProp?: string;
+    items: any[];
+    oncellchanged?: (event: DataCellChangedEvent) => void;
+    onnexttab?: (event: DataCellEvent) => void;
+    onprevtab?: (event: DataCellEvent) => void;
+    value: any;
+    [key: string]: any;
 }
-export {};
+declare const MultiSelectCell: import("svelte").Component<Props, {}, "">;
+type MultiSelectCell = ReturnType<typeof MultiSelectCell>;
+export default MultiSelectCell;

package/dist/cells/NumberInputCell.svelte

@@ -1,47 +1,93 @@
-<script>import { createEventDispatcher } from "svelte";
-import { NumberInput } from "flowbite-svelte";
-import TabWrapper from "./TabWrapper.svelte";
-export let item;
-export let column;
-export let value;
-let internalValue;
-$: internalValue = value;
-const dispatch = createEventDispatcher();
-const dispatchCellChanged = () => {
-  if (value !== internalValue) {
-    dispatch("cellChanged", {
-      column,
-      item,
-      oldValue: value,
-      newValue: internalValue
-    });
-  }
-};
-const keypress = async (event) => {
-  if (event.key === "Enter") {
-    dispatch("enterPressed", {
-      column,
-      item
-    });
-    dispatchCellChanged();
-  }
-};
-const prevTab = (_event) => {
-  dispatch("prevTab", {
-    column,
-    item
-  });
-  dispatchCellChanged();
-};
-const nextTab = (_event) => {
-  dispatch("nextTab", {
-    column,
-    item
-  });
-  dispatchCellChanged();
-};
+<script lang="ts">
+	import {
+		getDataTableContext,
+		joinInputClasses,
+	} from '../common';
+	import type { ColumnConfig, DataCellChangedEvent, DataCellEvent } from '../common';
+	import { activeTheme } from '../themes/active';
+
+	import TabWrapper from './TabWrapper.svelte';
+
+	interface Props {
+		column: ColumnConfig;
+		item: any;
+		oncellchanged?: (event: DataCellChangedEvent) => void;		
+		onenterpressed?: (event: DataCellEvent) => void;
+		onnexttab?: (event: DataCellEvent) => void;
+		onprevtab?: (event: DataCellEvent) => void;
+		value: number;
+		[key: string]: any;
+	}
+
+	let {
+		column,
+		item,
+		oncellchanged,
+		onenterpressed,
+		onnexttab,
+		onprevtab,
+		value,
+		...inputProps
+	}: Props = $props();
+
+	let internalValue: number = $derived(value);
+	const tableTheme = getDataTableContext()?.theme || {};
+	
+	const dispatchCellChanged = () => {
+		if (value !== internalValue) {
+			oncellchanged?.({
+				column,
+				item,
+				oldValue: value,
+				newValue: internalValue,
+			});
+		}
+	};
+
+	const keypress = (event: KeyboardEvent) => {
+		if (event.key === 'Enter') {
+			onenterpressed?.({
+				column,
+				item,
+			});
+			dispatchCellChanged();
+		}
+	};
+
+	const prevTab = (_event: any) => {
+		onprevtab?.({
+			column,
+			item,
+		});
+		dispatchCellChanged();
+	};
+
+	const nextTab = (_event: any) => {
+		onnexttab?.({
+			column,
+			item,
+		});
+		dispatchCellChanged();
+	};
+
+	const inputClass = $derived(joinInputClasses(
+		'numberInput',
+		'input', [
+			activeTheme,
+			tableTheme,
+			column.theme,
+		],
+	));
 </script>
 
-<TabWrapper on:prevTab={prevTab} on:nextTab={nextTab}>
-	<NumberInput bind:value={internalValue} {...$$props} on:keypress={keypress} autofocus />
+<TabWrapper column={column} item={item} onprevtab={prevTab} onnexttab={nextTab}>
+	<!-- svelte-ignore a11y_autofocus -->
+	<input
+		autofocus
+		class={inputClass}
+		onkeypress={keypress}
+		type="number"
+		bind:value={internalValue}
+		{...inputProps}
+	/>
 </TabWrapper>

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

@@ -1,25 +1,14 @@
-import { SvelteComponent } from "svelte";
-import type { ColumnConfig } from '../common.js';
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        item: any;
-        column: ColumnConfig;
-        value: number;
-    };
-    events: {
-        cellChanged: CustomEvent<any>;
-        enterPressed: CustomEvent<any>;
-        prevTab: CustomEvent<any>;
-        nextTab: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type NumberInputCellProps = typeof __propDef.props;
-export type NumberInputCellEvents = typeof __propDef.events;
-export type NumberInputCellSlots = typeof __propDef.slots;
-export default class NumberInputCell extends SvelteComponent<NumberInputCellProps, NumberInputCellEvents, NumberInputCellSlots> {
+import type { ColumnConfig, DataCellChangedEvent, DataCellEvent } from '../common';
+interface Props {
+    column: ColumnConfig;
+    item: any;
+    oncellchanged?: (event: DataCellChangedEvent) => void;
+    onenterpressed?: (event: DataCellEvent) => void;
+    onnexttab?: (event: DataCellEvent) => void;
+    onprevtab?: (event: DataCellEvent) => void;
+    value: number;
+    [key: string]: any;
 }
-export {};
+declare const NumberInputCell: import("svelte").Component<Props, {}, "">;
+type NumberInputCell = ReturnType<typeof NumberInputCell>;
+export default NumberInputCell;