@emamid/svelte-data-table 0.0.1 → 0.0.2

package/dist/DataTable.svelte

@@ -2,7 +2,7 @@
 import { Table, TableBody, TableBodyRow, TableHead } from "flowbite-svelte";
 import DataTableDataCell from "./DataTableDataCell.svelte";
 import DataTableHeaderCell from "./DataTableHeaderCell.svelte";
-import { joinClasses } from "./common.ts";
+import { joinClasses } from "./common.js";
 export let columns = [];
 export let items = [];
 export let sortKey = "";
@@ -63,18 +63,36 @@ 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 tableBodyClass = joinClasses(
+  tableBodyClassOverride || tableBodyClassDefault,
+  tableBodyClassAppend
+);
 const trClass = joinClasses(trClassOverride || trClassDefault, trClassAppend);
 const tdClass = joinClasses(tdClassOverride || tdClassDefault, tdClassAppend);
-const tdFocusedClass = joinClasses(tdFocusedClassOverride || tdFocusedClassDefault, tdFocusedClassAppend);
+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);
+  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);
+    getTDClass = (item, value, isFocused) => tdClassGetter(
+      item,
+      column,
+      value,
+      isFocused,
+      columnTDClass,
+      tdClassDefault,
+      tdClassAppend,
+      tdClassOverride
+    );
   } else {
     getTDClass = (_item, _value, isFocused) => isFocused ? columnFocusedTDClass : columnTDClass;
   }
@@ -172,15 +190,22 @@ const rowClicked = (item) => {
 <Table class={tableClass} {divClass}>
 	<TableHead defaultRow={false} {theadClass}>
 		{#each internalColumns as column}
-			<DataTableHeaderCell {column} isSorted={!!sortColumnID && getColumnID(column) === sortColumnID} {reverseSort} {thClass} on:click={() => headerClicked(column)}/>
+			<DataTableHeaderCell
+				{column}
+				isSorted={!!sortColumnID && getColumnID(column) === sortColumnID}
+				{reverseSort}
+				{thClass}
+				on:click={() => headerClicked(column)}
+			/>
 		{/each}
 	</TableHead>
 	<TableBody {tableBodyClass}>
 		{#each sortedItems as item}
-		{@const isRowFocused = !!focusedItemKey && focusedItemKey === getItemKey(item)}
+			{@const isRowFocused = !!focusedItemKey && focusedItemKey === getItemKey(item)}
 			<TableBodyRow class={getTRClass(item, isRowFocused)} on:click={() => rowClicked(item)}>
 				{#each internalColumns as column}
-					{@const isCellFocused = isRowFocused && focusedColumnKeyID && focusedColumnKeyID === getColumnID(column)}
+					{@const isCellFocused =
+						isRowFocused && focusedColumnKeyID && focusedColumnKeyID === getColumnID(column)}
 					<DataTableDataCell
 						{column}
 						{isCellFocused}
@@ -197,4 +222,4 @@ const rowClicked = (item) => {
 			</TableBodyRow>
 		{/each}
 	</TableBody>
-</Table>	
+</Table>

package/dist/DataTable.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import type { ColumnConfig, EnterAction, RowClassFunction, SortFunction } from './common.ts';
+import type { ColumnConfig, EnterAction, RowClassFunction, SortFunction } from './common.js';
 declare const __propDef: {
     props: {
         columns?: ColumnConfig[] | undefined;

package/dist/DataTableDataCell.svelte

@@ -1,50 +1,48 @@
 <script>import { TableBodyCell } from "flowbite-svelte";
-import { defaultCellRenderer } from "./common.ts";
+import { defaultCellRenderer } from "./common.js";
 export let column;
 export let item;
 export let isCellFocused;
 </script>
 
 {#await (column.cellRenderer || defaultCellRenderer)(column, item)}
-<TableBodyCell tdClass={column.getTDClass(item, '', isCellFocused)}/>
-{:then {dataValue, displayValue}}
-<TableBodyCell tdClass={column.getTDClass(item, dataValue, isCellFocused)} on:click>
-	{#if column.viewComponent}
-	<svelte:component
-		this={column.viewComponent}
-		{column}
-		{item}
-		value={dataValue}
-		on:action
-		on:cellChanged
-		on:cellInput 
-		on:click
-		on:enterPressed
-		on:prevTab
-		on:nextTab
-		{...column.viewComponentConfig}
-	/>
-	{:else}
-		{#if column.focusComponent && isCellFocused}
-		<svelte:component
-			this={column.focusComponent}
-			{column}
-			{item}
-			value={dataValue}
-			on:action
-			on:cellChanged
-			on:cellInput
-			on:click
-			on:enterPressed
-			on:prevTab
-			on:nextTab
-			{...column.focusComponentConfig}
-		/>
+	<TableBodyCell tdClass={column.getTDClass(item, '', isCellFocused)} />
+{:then { dataValue, displayValue }}
+	<TableBodyCell tdClass={column.getTDClass(item, dataValue, isCellFocused)} on:click>
+		{#if column.viewComponent}
+			<svelte:component
+				this={column.viewComponent}
+				{column}
+				{item}
+				value={dataValue}
+				on:action
+				on:cellChanged
+				on:cellInput
+				on:click
+				on:enterPressed
+				on:prevTab
+				on:nextTab
+				{...column.viewComponentConfig}
+			/>
+		{:else if column.focusComponent && isCellFocused}
+			<svelte:component
+				this={column.focusComponent}
+				{column}
+				{item}
+				value={dataValue}
+				on:action
+				on:cellChanged
+				on:cellInput
+				on:click
+				on:enterPressed
+				on:prevTab
+				on:nextTab
+				{...column.focusComponentConfig}
+			/>
 		{:else}
-		{displayValue}
+			{displayValue}
 		{/if}
-	{/if}	
-</TableBodyCell>
+	</TableBodyCell>
 {:catch}
-<TableBodyCell tdClass={column.getTDClass(item, '', isCellFocused)} />
+	<TableBodyCell tdClass={column.getTDClass(item, '', isCellFocused)} />
 {/await}

package/dist/DataTableDataCell.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import type { InternalColumnConfig } from './common.ts';
+import type { InternalColumnConfig } from './common.js';
 declare const __propDef: {
     props: {
         column: InternalColumnConfig;

package/dist/DataTableHeaderCell.svelte

@@ -1,6 +1,6 @@
 <script>import { TableHeadCell } from "flowbite-svelte";
 import { ArrowDownSolid, ArrowUpSolid } from "flowbite-svelte-icons";
-import { joinClasses } from "./common.ts";
+import { joinClasses } from "./common.js";
 export let column;
 export let reverseSort;
 export let isSorted;
@@ -13,9 +13,9 @@ export let thClass;
 >
 	{#if isSorted}
 		{#if reverseSort}
-		<ArrowUpSolid class="inline"/>
+			<ArrowUpSolid class="inline" />
 		{:else}
-		<ArrowDownSolid class="inline"/>
+			<ArrowDownSolid class="inline" />
 		{/if}
 	{/if}
 	<span>{column.title}</span>

package/dist/DataTableHeaderCell.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import type { InternalColumnConfig } from './common.ts';
+import type { InternalColumnConfig } from './common.js';
 declare const __propDef: {
     props: {
         column: InternalColumnConfig;

package/dist/cells/ActionsCell.svelte

@@ -23,8 +23,9 @@ const actionClicked = (action) => {
 		class={action.buttonClass || buttonClass}
 		color={action.buttonColor || buttonColor}
 		disabled={action.isDisabled?.(item, column, action)}
-		on:click={() => actionClicked(action)}>
-		<svelte:component this={action.icon} class={action.iconClass || iconClass}/>
+		on:click={() => actionClicked(action)}
+	>
+		<svelte:component this={action.icon} class={action.iconClass || iconClass} />
 		{#if action.caption}{action.caption}{/if}
 	</Button>
 {/each}

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

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import type { ColumnConfig } from '../common.ts';
+import type { ColumnConfig } from '../common.js';
 type ButtonColor = 'red' | 'yellow' | 'green' | 'purple' | 'blue' | 'light' | 'dark' | 'primary' | 'none' | 'alternative' | undefined;
 export interface Action {
     buttonClass?: string;

package/dist/cells/ButtonCell.svelte

@@ -12,4 +12,6 @@ const buttonClicked = () => {
 };
 </script>
 
-<Button {...$$props} on:click={buttonClicked}>{#if caption}{caption}{/if}</Button>
+<Button {...$$props} on:click={buttonClicked}
+	>{#if caption}{caption}{/if}</Button
+>

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

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import type { ColumnConfig } from '../common.ts';
+import type { ColumnConfig } from '../common.js';
 declare const __propDef: {
     props: {
         [x: string]: any;

package/dist/cells/CheckboxCell.svelte

@@ -16,4 +16,6 @@ const toggleChanged = () => {
 };
 </script>
 
-<Checkbox {...$$props} bind:checked={localValue} on:change={toggleChanged}>{#if caption}{caption}{/if}</Checkbox>
+<Checkbox {...$$props} bind:checked={localValue} on:change={toggleChanged}
+	>{#if caption}{caption}{/if}</Checkbox
+>

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

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import type { ColumnConfig } from '../common.ts';
+import type { ColumnConfig } from '../common.js';
 declare const __propDef: {
     props: {
         [x: string]: any;

package/dist/cells/InputCell.svelte

@@ -45,5 +45,11 @@ const nextTab = (_event) => {
 </script>
 
 <TabWrapper on:prevTab={prevTab} on:nextTab={nextTab}>
-	<Input type={inputType} bind:value={internalValue} {...$$props} on:keypress={keypress} autofocus/>
+	<Input
+		type={inputType}
+		bind:value={internalValue}
+		{...$$props}
+		on:keypress={keypress}
+		autofocus
+	/>
 </TabWrapper>

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

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import type { ColumnConfig } from '../common.ts';
+import type { ColumnConfig } from '../common.js';
 declare const __propDef: {
     props: {
         [x: string]: any;

package/dist/cells/NumberInputCell.svelte

@@ -44,5 +44,5 @@ const nextTab = (_event) => {
 </script>
 
 <TabWrapper on:prevTab={prevTab} on:nextTab={nextTab}>
-	<NumberInput bind:value={internalValue} {...$$props} on:keypress={keypress} autofocus/>
+	<NumberInput bind:value={internalValue} {...$$props} on:keypress={keypress} autofocus />
 </TabWrapper>

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

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import type { ColumnConfig } from '../common.ts';
+import type { ColumnConfig } from '../common.js';
 declare const __propDef: {
     props: {
         [x: string]: any;

package/dist/cells/SelectCell.svelte

@@ -23,7 +23,7 @@ $:
 <TabWrapper {column} {item} on:prevTab on:nextTab>
 	<Select
 		{...$$props}
-		items={items.map(item => ({ value: item[valueProp], name: item[displayProp]}))}
+		items={items.map((item) => ({ value: item[valueProp], name: item[displayProp] }))}
 		bind:value={newValue}
 		autofocus
 	/>

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

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import type { ColumnConfig } from '../common.ts';
+import type { ColumnConfig } from '../common.js';
 declare const __propDef: {
     props: {
         [x: string]: any;

package/dist/cells/SpinCell.svelte

@@ -32,9 +32,21 @@ const increment = () => {
 </script>
 
 <div class="spinner">
-	<Button color="none" class="pr-1" on:click={decrement} disabled={minValue !== undefined && (value - decValue) < minValue}><svelte:component this={minusIcon} class={minusIconClass}/></Button>
+	<Button
+		color="none"
+		class="pr-1"
+		on:click={decrement}
+		disabled={minValue !== undefined && value - decValue < minValue}
+		><svelte:component this={minusIcon} class={minusIconClass} /></Button
+	>
 	{value || 0}
-	<Button color="none" class="pl-1" on:click={increment} disabled={maxValue !== undefined && (value + incValue) > maxValue}><svelte:component this={plusIcon} class={plusIconClass}/></Button>
+	<Button
+		color="none"
+		class="pl-1"
+		on:click={increment}
+		disabled={maxValue !== undefined && value + incValue > maxValue}
+		><svelte:component this={plusIcon} class={plusIconClass} /></Button
+	>
 </div>
 
 <style>
@@ -44,4 +56,4 @@ const increment = () => {
 		justify-content: center;
 		align-items: center;
 	}
-</style>
+</style>

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

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import type { ColumnConfig } from '../common.ts';
+import type { ColumnConfig } from '../common.js';
 declare const __propDef: {
     props: {
         item: any;

package/dist/cells/TabWrapper.svelte

@@ -17,7 +17,7 @@ const nextTab = (_event) => {
 </script>
 
 <!-- svelte-ignore a11y-no-noninteractive-tabindex-->
-<div tabindex="0" on:focus={prevTab}/>
+<div tabindex="0" on:focus={prevTab} />
 <slot />
 <!-- svelte-ignore a11y-no-noninteractive-tabindex-->
-<div tabindex="0" on:focus={nextTab}/>	
+<div tabindex="0" on:focus={nextTab} />

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

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import type { ColumnConfig } from '../common.ts';
+import type { ColumnConfig } from '../common.js';
 declare const __propDef: {
     props: {
         item?: any;

package/dist/cells/ToggleCell.svelte

@@ -16,4 +16,6 @@ const toggleChanged = () => {
 };
 </script>
 
-<Toggle {...$$props} bind:checked={localValue} on:change={toggleChanged}>{#if caption}{caption}{/if}</Toggle>
+<Toggle {...$$props} bind:checked={localValue} on:change={toggleChanged}
+	>{#if caption}{caption}{/if}</Toggle
+>

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

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import type { ColumnConfig } from '../common.ts';
+import type { ColumnConfig } from '../common.js';
 declare const __propDef: {
     props: {
         [x: string]: any;

package/dist/cells/index.d.ts

@@ -1,4 +1,4 @@
-export * from './Actions';
+export * from './Actions.js';
 export * from './ActionsCell.svelte';
 export * from './ButtonCell.svelte';
 export * from './CheckboxCell.svelte';

package/dist/cells/index.js

@@ -1,4 +1,4 @@
-export * from './Actions';
+export * from './Actions.js';
 export * from './ActionsCell.svelte';
 export * from './ButtonCell.svelte';
 export * from './CheckboxCell.svelte';

package/dist/common.js

@@ -1,6 +1,8 @@
-export const joinClasses = (...classes) => (classes || []).filter(value => !!value).join(' ');
+export const joinClasses = (...classes) => (classes || []).filter((value) => !!value).join(' ');
 export const blankCellValues = {
     dataValue: null,
     displayValue: '',
 };
-export const defaultCellRenderer = async (column, item) => column.key ? { dataValue: item[column.key], displayValue: item[column.key] || '' } : blankCellValues;
+export const defaultCellRenderer = async (column, item) => column.key
+    ? { dataValue: item[column.key], displayValue: item[column.key] || '' }
+    : blankCellValues;

package/dist/index.d.ts

@@ -1,4 +1,4 @@
 import DataTable from './DataTable.svelte';
-export type { CellRenderer, ColumnConfig, DataCellClassFunction, RowClassFunction, SortFunction } from './common.ts';
-export * from './cells/index.ts';
+export type { CellRenderer, ColumnConfig, DataCellClassFunction, RowClassFunction, SortFunction, } from './common.js';
+export * from './cells/index.js';
 export default DataTable;

package/dist/index.js

@@ -1,3 +1,3 @@
 import DataTable from './DataTable.svelte';
-export * from './cells/index.ts';
+export * from './cells/index.js';
 export default DataTable;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@emamid/svelte-data-table",
-	"version": "0.0.1",
+	"version": "0.0.2",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run package",
@@ -38,9 +38,9 @@
 		"eslint": "^8.56.0",
 		"eslint-config-prettier": "^9.1.0",
 		"eslint-plugin-svelte": "^2.35.1",
-    "flowbite": "^2.2.1",
-    "flowbite-svelte": "^0.44.22",
-    "flowbite-svelte-icons": "^1.0.2",
+		"flowbite": "^2.2.1",
+		"flowbite-svelte": "^0.44.22",
+		"flowbite-svelte-icons": "^1.0.2",
 		"prettier": "^3.1.1",
 		"prettier-plugin-svelte": "^3.1.2",
 		"publint": "^0.1.9",