@emamid/svelte-data-table 0.0.22 → 1.0.1

package/dist/cells/RadioCell.svelte

@@ -0,0 +1,66 @@
+<!-- @migration-task Error while migrating Svelte code: $$props is used together with named props in a way that cannot be automatically migrated. -->
+<script lang="ts">
+	import {
+		getDataTableContext,
+		joinInputClasses,
+	} from '../common';
+	import type {
+		ColumnConfig,
+		DataCellChangedEvent,
+	} from '../common';
+	import { activeTheme } from '../themes/active';
+
+	interface Props {
+		column: ColumnConfig;
+		item: any;
+		maxValue: number;
+		oncellchanged?: (event: DataCellChangedEvent) => void;
+		value: number;
+		[key: string]: any;
+	}
+
+	let {
+		column,
+		item,
+		maxValue,
+		oncellchanged,
+		value,
+		...inputProps
+	}: Props = $props();
+
+	let internalValue: number = $derived(value);
+	const tableTheme = getDataTableContext()?.theme || {};
+
+	const getClass = (element: string) => joinInputClasses(
+		'radio',
+		element, [
+			activeTheme,
+			tableTheme,
+			column.theme,
+		],
+	)
+
+	const spanClass = $derived(getClass('span'));
+	const inputClass = $derived(getClass('input'));
+</script>
+
+<span class={spanClass}>
+	{#each { length: maxValue}, buttonNum}
+		<input
+			checked={internalValue === buttonNum + 1}
+			class={inputClass}
+			onchange={() => {
+				internalValue = buttonNum + 1;
+				console.log('Radio selected value:', internalValue);
+				oncellchanged?.({
+					column,
+					item,
+					oldValue: value,
+					newValue: internalValue,
+				});
+			}}
+			type="radio"
+			{...inputProps}
+		/>
+	{/each}
+</span>

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

@@ -0,0 +1,12 @@
+import type { ColumnConfig, DataCellChangedEvent } from '../common';
+interface Props {
+    column: ColumnConfig;
+    item: any;
+    maxValue: number;
+    oncellchanged?: (event: DataCellChangedEvent) => void;
+    value: number;
+    [key: string]: any;
+}
+declare const RadioCell: import("svelte").Component<Props, {}, "">;
+type RadioCell = ReturnType<typeof RadioCell>;
+export default RadioCell;

package/dist/cells/RangeCell.svelte

@@ -1,19 +1,68 @@
-<script>import { createEventDispatcher } from "svelte";
-import { Range } from "flowbite-svelte";
-export let caption = "";
-export let column;
-export let item;
-export let value;
-let localValue = value;
-const dispatch = createEventDispatcher();
-const changed = () => {
-  dispatch("cellChanged", {
-    column,
-    item,
-    oldValue: value,
-    newValue: localValue
-  });
-};
+<script lang="ts">
+	import {
+		getDataTableContext,
+		joinInputClasses,
+	} from '../common';	
+	import type {
+		ColumnConfig,
+		DataCellChangedEvent,
+	} from '../common.ts';
+	import { activeTheme } from '../themes/active';
+
+	interface Props {
+		caption?: string;
+		column: ColumnConfig;
+		item: any;
+		max: number;
+		min: number;
+		oncellchanged?: (event: DataCellChangedEvent) => void;
+		value: number;
+		[key: string]: any;
+	};
+
+	let {
+		caption,
+		column,
+		inputType = 'text',
+		item,
+		max = 100,
+		min = 0,
+		oncellchanged,
+		value,
+		...inputProps
+	}: Props = $props();
+
+	let internalValue = $derived(value);
+	const tableTheme = getDataTableContext()?.theme || {};
+
+	const changed = () => {
+		if (value !== internalValue) {			
+			oncellchanged?.({
+				column,
+				item,
+				oldValue: value,
+				newValue: internalValue,
+			});
+		}
+	};
+
+	const inputClass = $derived(joinInputClasses(
+		'range',
+		'input', [
+			activeTheme,
+			tableTheme,
+			column.theme,
+		],
+	))
 </script>
 
-<Range {...$$props} bind:value={localValue} on:change={changed}>{#if caption}{caption}{/if}</Range>
+<input
+	class={inputClass}
+	{max}
+	{min}
+	onchange={changed}
+	type="range"
+	bind:value={internalValue}
+	{...inputProps}
+/>
+{#if caption}{caption}{/if}	

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

@@ -1,23 +1,14 @@
-import { SvelteComponent } from "svelte";
-import type { ColumnConfig } from '../common.ts';
-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 RangeCellProps = typeof __propDef.props;
-export type RangeCellEvents = typeof __propDef.events;
-export type RangeCellSlots = typeof __propDef.slots;
-export default class RangeCell extends SvelteComponent<RangeCellProps, RangeCellEvents, RangeCellSlots> {
+import type { ColumnConfig, DataCellChangedEvent } from '../common.ts';
+interface Props {
+    caption?: string;
+    column: ColumnConfig;
+    item: any;
+    max: number;
+    min: number;
+    oncellchanged?: (event: DataCellChangedEvent) => void;
+    value: number;
+    [key: string]: any;
 }
-export {};
+declare const RangeCell: import("svelte").Component<Props, {}, "">;
+type RangeCell = ReturnType<typeof RangeCell>;
+export default RangeCell;

package/dist/cells/SelectCell.svelte

@@ -1,29 +1,91 @@
-<script>import { createEventDispatcher } from "svelte";
-import { Select } 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 newValue = $derived(value);
+	const tableTheme = getDataTableContext()?.theme || {};
+
+	const dispatchCellChanged = () => {
+		if (value !== newValue) {
+			oncellchanged?.({
+				column,
+				item,
+				oldValue: value,
+				newValue: newValue,
+			});
+		}		
+	};
+
+	const getClass = (element: string) => joinInputClasses(
+		'select',
+		element, [
+			activeTheme,
+			tableTheme,
+			column.theme,
+		],
+	)
+
+	const selectClass = $derived(getClass('select'));
+	const optionClass = $derived(getClass('option'));
 </script>
 
-<TabWrapper {column} {item} on:prevTab on:nextTab>
-	<Select
-		{...$$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={selectClass}
+		onchange={dispatchCellChanged}
+		bind:value={newValue}
+		{...inputProps}
+	>
+		{#each items as selectItem}
+			<option
+				class={optionClass}
+				value={selectItem[valueProp]}
+			>
+				{selectItem[displayProp]}
+			</option>
+		{/each}
+	</select>
 </TabWrapper>

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

@@ -1,27 +1,16 @@
-import { SvelteComponent } from "svelte";
-import type { ColumnConfig } from '../common.js';
-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 SelectCellProps = typeof __propDef.props;
-export type SelectCellEvents = typeof __propDef.events;
-export type SelectCellSlots = typeof __propDef.slots;
-export default class SelectCell extends SvelteComponent<SelectCellProps, SelectCellEvents, SelectCellSlots> {
+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 SelectCell: import("svelte").Component<Props, {}, "">;
+type SelectCell = ReturnType<typeof SelectCell>;
+export default SelectCell;

package/dist/cells/SpinCell.svelte

@@ -1,52 +1,101 @@
-<script>import { createEventDispatcher } from "svelte";
-import { Button } from "flowbite-svelte";
-import { MinusSolid, PlusSolid } from "flowbite-svelte-icons";
-export let item;
-export let column;
-export let value;
-export let decValue = 1;
-export let incValue = 1;
-export let minValue = void 0;
-export let maxValue = void 0;
-export let minusIcon = MinusSolid;
-export let minusIconClass = "pr-1 w-3 h-3";
-export let plusIcon = PlusSolid;
-export let plusIconClass = "pr-1 w-3 h-3";
-const dispatch = createEventDispatcher();
-const decrement = () => {
-  dispatch("cellChanged", {
-    column,
-    item,
-    oldValue: value,
-    newValue: (value || 0) - decValue
-  });
-};
-const increment = () => {
-  dispatch("cellChanged", {
-    column,
-    item,
-    oldValue: value,
-    newValue: (value || 0) + incValue
-  });
-};
+<script lang="ts">
+	import {
+		getDataTableContext,
+		getInputIcon,
+		joinInputClasses,
+	} from '../common';
+	import type {
+		ColumnConfig,
+		DataCellChangedEvent,
+	} from '../common';
+	import { activeTheme } from '../themes/active';
+
+	import DataTableIcon from '../DataTableIcon.svelte';
+
+	interface Props {
+		column: ColumnConfig;
+		decValue?: number;
+		incValue?: number;
+		item: any;
+		maxValue?: number | undefined;
+		minValue?: number | undefined;
+		oncellchanged?: (event: DataCellChangedEvent) => void;
+		value: any;
+	}
+
+	let {
+		column,
+		decValue = 1,
+		incValue = 1,
+		item,
+		maxValue = undefined,
+		minValue = undefined,
+		oncellchanged,
+		value,
+	}: Props = $props();
+
+	const tableTheme = getDataTableContext()?.theme || {};
+
+	const decrement = () => {
+		oncellchanged?.({
+			column,
+			item,
+			oldValue: value,
+			newValue: (value || 0) - decValue,
+		});
+	};
+
+	const increment = () => {
+		oncellchanged?.({
+			column,
+			item,
+			oldValue: value,
+			newValue: (value || 0) + incValue,
+		});
+	};
+
+	const getClass = (element: string) => joinInputClasses(
+		'spinner',
+		element, [
+			activeTheme,
+			tableTheme,
+			column.theme,
+		],
+	)
+
+	const getIcon = (propName: string) => getInputIcon(
+		'spinner',
+		propName, [
+			activeTheme,
+			tableTheme,
+			column.theme,
+		],
+	)
+
+	let divClass = $derived(getClass('div'));
+	let minusButtonClass = $derived(getClass('minusButton'));
+	let plusButtonClass = $derived(getClass('plusButton'));
+
+	let minusIcon = $derived(getIcon('minusIcon'));
+	let plusIcon =$derived(getIcon('plusIcon'));
 </script>
 
-<div class="spinner">
-	<Button
-		color="none"
-		class="pr-1"
-		on:click={decrement}
+<div class={divClass}>
+	<button
 		disabled={minValue !== undefined && value - decValue < minValue}
-		><svelte:component this={minusIcon} class={minusIconClass} /></Button
+		class={minusButtonClass}
+		onclick={decrement}
 	>
+		<DataTableIcon icon={minusIcon}/>
+	</button>
 	{value || 0}
-	<Button
-		color="none"
-		class="pl-1"
-		on:click={increment}
+	<button
 		disabled={maxValue !== undefined && value + incValue > maxValue}
-		><svelte:component this={plusIcon} class={plusIconClass} /></Button
+		class={plusButtonClass}
+		onclick={increment}
 	>
+		<DataTableIcon icon={plusIcon}/>
+	</button>
 </div>
 
 <style>

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

@@ -1,29 +1,14 @@
-import { SvelteComponent } from "svelte";
-import type { ColumnConfig } from '../common.js';
-declare const __propDef: {
-    props: {
-        item: any;
-        column: ColumnConfig;
-        value: any;
-        decValue?: number | undefined;
-        incValue?: number | undefined;
-        minValue?: number | undefined;
-        maxValue?: number | undefined;
-        minusIcon?: ConstructorOfATypedSvelteComponent | undefined;
-        minusIconClass?: string | undefined;
-        plusIcon?: ConstructorOfATypedSvelteComponent | undefined;
-        plusIconClass?: string | undefined;
-    };
-    events: {
-        cellChanged: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type SpinCellProps = typeof __propDef.props;
-export type SpinCellEvents = typeof __propDef.events;
-export type SpinCellSlots = typeof __propDef.slots;
-export default class SpinCell extends SvelteComponent<SpinCellProps, SpinCellEvents, SpinCellSlots> {
+import type { ColumnConfig, DataCellChangedEvent } from '../common';
+interface Props {
+    column: ColumnConfig;
+    decValue?: number;
+    incValue?: number;
+    item: any;
+    maxValue?: number | undefined;
+    minValue?: number | undefined;
+    oncellchanged?: (event: DataCellChangedEvent) => void;
+    value: any;
 }
-export {};
+declare const SpinCell: import("svelte").Component<Props, {}, "">;
+type SpinCell = ReturnType<typeof SpinCell>;
+export default SpinCell;

package/dist/cells/TabWrapper.svelte

@@ -1,23 +1,25 @@
-<script>import { createEventDispatcher } from "svelte";
-export let item = null;
-export let column = null;
-const dispatch = createEventDispatcher();
-const prevTab = (_event) => {
-  dispatch("prevTab", {
-    column,
-    item
-  });
-};
-const nextTab = (_event) => {
-  dispatch("nextTab", {
-    column,
-    item
-  });
-};
+<script lang="ts">
+	import type { ColumnConfig, DataCellEvent } from '../common';
+
+	interface Props {
+		item: any;
+		column: ColumnConfig;
+		children?: import('svelte').Snippet;
+		onnexttab?: (event: DataCellEvent) => void;
+		onprevtab?: (event: DataCellEvent) => void;
+	}
+
+	let {
+		item,
+		column,
+		children,
+		onnexttab,
+		onprevtab,
+	}: Props = $props();
 </script>
 
-<!-- svelte-ignore a11y-no-noninteractive-tabindex-->
-<div tabindex="0" on:focus={prevTab} />
-<slot />
-<!-- svelte-ignore a11y-no-noninteractive-tabindex-->
-<div tabindex="0" on:focus={nextTab} />
+<!-- svelte-ignore a11y_no_noninteractive_tabindex-->
+<div tabindex="0" onfocus={() => onprevtab?.({ column, item })}></div>
+{@render children?.()}
+<!-- svelte-ignore a11y_no_noninteractive_tabindex-->
+<div tabindex="0" onfocus={() => onnexttab?.({ column, item })}></div>

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

@@ -1,23 +1,11 @@
-import { SvelteComponent } from "svelte";
-import type { ColumnConfig } from '../common.js';
-declare const __propDef: {
-    props: {
-        item?: any;
-        column?: ColumnConfig | null | undefined;
-    };
-    events: {
-        prevTab: CustomEvent<any>;
-        nextTab: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type TabWrapperProps = typeof __propDef.props;
-export type TabWrapperEvents = typeof __propDef.events;
-export type TabWrapperSlots = typeof __propDef.slots;
-export default class TabWrapper extends SvelteComponent<TabWrapperProps, TabWrapperEvents, TabWrapperSlots> {
+import type { ColumnConfig, DataCellEvent } from '../common';
+interface Props {
+    item: any;
+    column: ColumnConfig;
+    children?: import('svelte').Snippet;
+    onnexttab?: (event: DataCellEvent) => void;
+    onprevtab?: (event: DataCellEvent) => void;
 }
-export {};
+declare const TabWrapper: import("svelte").Component<Props, {}, "">;
+type TabWrapper = ReturnType<typeof TabWrapper>;
+export default TabWrapper;

package/dist/cells/index.d.ts

@@ -13,13 +13,11 @@ export * from './NumberInputCell.svelte';
 export { default as NumberInputCell } from './NumberInputCell.svelte';
 export * from './RangeCell.svelte';
 export { default as RangeCell } from './RangeCell.svelte';
-export * from './RatingCell.svelte';
-export { default as RatingCell } from './RatingCell.svelte';
+export * from './RadioCell.svelte';
+export { default as RadioCell } from './RadioCell.svelte';
 export * from './SelectCell.svelte';
 export { default as SelectCell } from './SelectCell.svelte';
 export * from './SpinCell.svelte';
 export { default as SpinCell } from './SpinCell.svelte';
 export * from './TabWrapper.svelte';
 export { default as TabWrapper } from './TabWrapper.svelte';
-export * from './ToggleCell.svelte';
-export { default as ToggleCell } from './ToggleCell.svelte';

package/dist/cells/index.js

@@ -13,13 +13,11 @@ export * from './NumberInputCell.svelte';
 export { default as NumberInputCell } from './NumberInputCell.svelte';
 export * from './RangeCell.svelte';
 export { default as RangeCell } from './RangeCell.svelte';
-export * from './RatingCell.svelte';
-export { default as RatingCell } from './RatingCell.svelte';
+export * from './RadioCell.svelte';
+export { default as RadioCell } from './RadioCell.svelte';
 export * from './SelectCell.svelte';
 export { default as SelectCell } from './SelectCell.svelte';
 export * from './SpinCell.svelte';
 export { default as SpinCell } from './SpinCell.svelte';
 export * from './TabWrapper.svelte';
 export { default as TabWrapper } from './TabWrapper.svelte';
-export * from './ToggleCell.svelte';
-export { default as ToggleCell } from './ToggleCell.svelte';