@emamid/svelte-data-table 0.0.3 → 0.0.5

package/README.md

@@ -1,58 +0,0 @@
-# create-svelte
-
-Everything you need to build a Svelte library, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte).
-
-Read more about creating a library [in the docs](https://kit.svelte.dev/docs/packaging).
-
-## Creating a project
-
-If you're seeing this, you've probably already done this step. Congrats!
-
-```bash
-# create a new project in the current directory
-npm create svelte@latest
-
-# create a new project in my-app
-npm create svelte@latest my-app
-```
-
-## Developing
-
-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
-
-```bash
-npm run dev
-
-# or start the server and open the app in a new browser tab
-npm run dev -- --open
-```
-
-Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app.
-
-## Building
-
-To build your library:
-
-```bash
-npm run package
-```
-
-To create a production version of your showcase app:
-
-```bash
-npm run build
-```
-
-You can preview the production build with `npm run preview`.
-
-> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
-
-## Publishing
-
-Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)).
-
-To publish your library to [npm](https://www.npmjs.com):
-
-```bash
-npm publish
-```

package/dist/DataTable.doc.d.ts

@@ -0,0 +1,70 @@
+/**
+ * The DataTable component based on {@link https://flowbite-svelte.com/docs/components/table}
+ * @typedef {object} DataTable
+ * @property {ColumnConfig[]} columns - Configuration for each column to be displayed in the table.
+ * @property {any[]} items - Data for the rows in the table.
+ * @property {string} [sortKey] - Data property to sort by.
+ * @property {SortFunction} [sortFunction] - Function for more complex-sorting.
+ * @property {boolean} [reverseSort] - True when sorting is reversed.
+ * @property {string} [sortColumnID] - The id (or key) property of the column being sorted by.
+ * @property {string} [itemKey] - Property to use when distinguish between rows. If not populated, the array index is used.
+ * @property {EnterAction} [enterAction] - Determines what pressing the enter key in a focused cell does. Can be 'next', 'down', or 'stay'. Default is 'next'. If 'next', enter will act the same as tab. If 'down', focus will move down to the row below the current one. If 'stay', the enter key will not cause movement.
+ * @property {string} [divClassAppend] - Classes to be appended to Table.divClass .
+ * @property {string} [divClassOverride] - Classes to replace Table.divClass with.
+ * @property {string} [tableClassAppend] - Classes to be appended to Table.class .
+ * @property {string} [tableClassOverride] - Classes to replace Table.class with.
+ * @property {string} [theadClassAppend] - Classes to be appended to TableHead.theadClass .
+ * @property {string} [theadClassOverride] - Classes to replace TableHead.theadClass with.
+ * @property {string} [thClassAppend] - Classes to be appended to TableHeadCell.class .
+ * @property {string} [thClassOverride] - Classes to replace TableHeadCell.class with.
+ * @property {string} [tableBodyClassAppend] - Classes to be appended to TableBody.tableBodyClass .
+ * @property {string} [tableBodyClassOverride] - Classes to replace TableBody.tableBodyClass with.
+ * @property {string} [tdClassAppend] - Classes to be appended to TableBodyCell.tdClass . Column configs can further modify this.
+ * @property {string} [tdClassOverride] - Classes to replace TableBodyCell.tdClass with. Column configs can further modify this.
+ * @property {string} [tdFocusedClassAppend] - Classes to be appended to TableBodyCell.tdClass when a cell is focused. Column configs can further modify this.
+ * @property {string} [tdFocusedClassOverride] - Classes to replace TableBodyCell.tdClass with with a cell is focused. Column configs can further modify this.
+ * @property {string} [trClassAppend] - Classes to be appended to TableBodyRow.class . trClassGetter can further modify this.
+ * @property {string} [trClassOverride] - Classes to replace TableBodyRow.class with. trClassGetter can further modify this.
+ * @property {RowClassFunction} [trClassGetter] - Calculates the CSS classes for a TableBodyRow .
+ * @fires action
+ * @fires cellChanged
+ * @fires cellClicked
+ * @fires headerClicked
+ * @fires rowClicked
+ */
+export {};
+/**
+ * @event cellClicked
+ * @type {object}
+ * @property {any} detail.item - Data for the cell's row.
+ * @property {ColumnConfig} detail.column - Configuration for the cell's column.
+ */
+/**
+ * @event headerClicked
+ * @type {object}
+ * @property {ColumnConfig} detail.column - Configuration for the header's column.
+ * @property {string} detail.sortColumnID - The current sortColumnID.
+ * @property {string} detail.sortKey - The current sortKey.
+ * @property {SortFunction} detail.sortFunction The current sortFunction.
+ * @property {boolean} detail.reverseSort - True if the grid is currently sorting in reverse.
+ */
+/**
+ * @event rowClicked
+ * @type {object}
+ * @property {any} detail.item - Data for the row.
+ */
+/**
+ * @event action
+ * @type {object}
+ * @property {string} detail.action - The name property of the action whose button was clicked.
+ * @property {any} detail.item - Data for the action cell's row.
+ * @property {ColumnConfig} detail.column - Configuration for the action cell's column.
+ */
+/**
+ * @event cellChanged
+ * @type {object}
+ * @property {any} detail.item - Data for the cell's row, prior to the change.
+ * @property {ColumnConfig} detail.column - Configuration for the cell's column.
+ * @property {any} detail.oldValue - The data value of the cell before the change.
+ * @property {any} detail.newValue - The new value that needs to be applied to the cell.
+ */

package/dist/DataTable.doc.js

@@ -0,0 +1,70 @@
+"use strict";
+/**
+ * The DataTable component based on {@link https://flowbite-svelte.com/docs/components/table}
+ * @typedef {object} DataTable
+ * @property {ColumnConfig[]} columns - Configuration for each column to be displayed in the table.
+ * @property {any[]} items - Data for the rows in the table.
+ * @property {string} [sortKey] - Data property to sort by.
+ * @property {SortFunction} [sortFunction] - Function for more complex-sorting.
+ * @property {boolean} [reverseSort] - True when sorting is reversed.
+ * @property {string} [sortColumnID] - The id (or key) property of the column being sorted by.
+ * @property {string} [itemKey] - Property to use when distinguish between rows. If not populated, the array index is used.
+ * @property {EnterAction} [enterAction] - Determines what pressing the enter key in a focused cell does. Can be 'next', 'down', or 'stay'. Default is 'next'. If 'next', enter will act the same as tab. If 'down', focus will move down to the row below the current one. If 'stay', the enter key will not cause movement.
+ * @property {string} [divClassAppend] - Classes to be appended to Table.divClass .
+ * @property {string} [divClassOverride] - Classes to replace Table.divClass with.
+ * @property {string} [tableClassAppend] - Classes to be appended to Table.class .
+ * @property {string} [tableClassOverride] - Classes to replace Table.class with.
+ * @property {string} [theadClassAppend] - Classes to be appended to TableHead.theadClass .
+ * @property {string} [theadClassOverride] - Classes to replace TableHead.theadClass with.
+ * @property {string} [thClassAppend] - Classes to be appended to TableHeadCell.class .
+ * @property {string} [thClassOverride] - Classes to replace TableHeadCell.class with.
+ * @property {string} [tableBodyClassAppend] - Classes to be appended to TableBody.tableBodyClass .
+ * @property {string} [tableBodyClassOverride] - Classes to replace TableBody.tableBodyClass with.
+ * @property {string} [tdClassAppend] - Classes to be appended to TableBodyCell.tdClass . Column configs can further modify this.
+ * @property {string} [tdClassOverride] - Classes to replace TableBodyCell.tdClass with. Column configs can further modify this.
+ * @property {string} [tdFocusedClassAppend] - Classes to be appended to TableBodyCell.tdClass when a cell is focused. Column configs can further modify this.
+ * @property {string} [tdFocusedClassOverride] - Classes to replace TableBodyCell.tdClass with with a cell is focused. Column configs can further modify this.
+ * @property {string} [trClassAppend] - Classes to be appended to TableBodyRow.class . trClassGetter can further modify this.
+ * @property {string} [trClassOverride] - Classes to replace TableBodyRow.class with. trClassGetter can further modify this.
+ * @property {RowClassFunction} [trClassGetter] - Calculates the CSS classes for a TableBodyRow .
+ * @fires action
+ * @fires cellChanged
+ * @fires cellClicked
+ * @fires headerClicked
+ * @fires rowClicked
+ */
+/**
+ * @event cellClicked
+ * @type {object}
+ * @property {any} detail.item - Data for the cell's row.
+ * @property {ColumnConfig} detail.column - Configuration for the cell's column.
+ */
+/**
+ * @event headerClicked
+ * @type {object}
+ * @property {ColumnConfig} detail.column - Configuration for the header's column.
+ * @property {string} detail.sortColumnID - The current sortColumnID.
+ * @property {string} detail.sortKey - The current sortKey.
+ * @property {SortFunction} detail.sortFunction The current sortFunction.
+ * @property {boolean} detail.reverseSort - True if the grid is currently sorting in reverse.
+ */
+/**
+ * @event rowClicked
+ * @type {object}
+ * @property {any} detail.item - Data for the row.
+ */
+/**
+ * @event action
+ * @type {object}
+ * @property {string} detail.action - The name property of the action whose button was clicked.
+ * @property {any} detail.item - Data for the action cell's row.
+ * @property {ColumnConfig} detail.column - Configuration for the action cell's column.
+ */
+/**
+ * @event cellChanged
+ * @type {object}
+ * @property {any} detail.item - Data for the cell's row, prior to the change.
+ * @property {ColumnConfig} detail.column - Configuration for the cell's column.
+ * @property {any} detail.oldValue - The data value of the cell before the change.
+ * @property {any} detail.newValue - The new value that needs to be applied to the cell.
+ */

package/dist/DataTable.svelte

@@ -19,7 +19,7 @@ export let tableClassOverride = "";
 const tableClassDefault = "";
 export let theadClassAppend = "";
 export let theadClassOverride = "";
-const theadClassDefault = "text-xs uppercase sticky top-0";
+const theadClassDefault = "text-xs uppercase sticky top-0 z-1";
 export let thClassAppend = "";
 export let thClassOverride = "";
 const thClassDefault = "";
@@ -42,7 +42,7 @@ let focusedItemKey = null;
 const sortBySortKey = (a, b) => {
   const aValue = a[sortKey];
   const bValue = b[sortKey];
-  if (typeof aValue === "string") {
+  if (typeof aValue === "string" && typeof bValue === "string") {
     return aValue.localeCompare(bValue);
   }
   if (isFinite(aValue) && isFinite(bValue)) {
@@ -188,7 +188,7 @@ const rowClicked = (item) => {
 </script>
 
 <Table class={tableClass} {divClass}>
-	<TableHead defaultRow={false} {theadClass}>
+	<TableHead defaultRow={false} class={theadClass}>
 		{#each internalColumns as column}
 			<DataTableHeaderCell
 				{column}
@@ -216,7 +216,6 @@ const rowClicked = (item) => {
 						on:nextTab={nextTab}
 						on:action
 						on:cellChanged
-						on:cellInput
 					/>
 				{/each}
 			</TableBodyRow>

package/dist/DataTable.svelte.d.ts

@@ -31,7 +31,6 @@ declare const __propDef: {
     events: {
         action: any;
         cellChanged: any;
-        cellInput: any;
         cellClicked: CustomEvent<any>;
         headerClicked: CustomEvent<any>;
         rowClicked: CustomEvent<any>;

package/dist/DataTableDataCell.svelte

@@ -17,7 +17,6 @@ export let isCellFocused;
 				value={dataValue}
 				on:action
 				on:cellChanged
-				on:cellInput
 				on:click
 				on:enterPressed
 				on:prevTab
@@ -32,7 +31,6 @@ export let isCellFocused;
 				value={dataValue}
 				on:action
 				on:cellChanged
-				on:cellInput
 				on:click
 				on:enterPressed
 				on:prevTab

package/dist/DataTableDataCell.svelte.d.ts

@@ -10,7 +10,6 @@ declare const __propDef: {
         click: any;
         action: any;
         cellChanged: any;
-        cellInput: any;
         enterPressed: any;
         prevTab: any;
         nextTab: any;

package/dist/cells/Actions.d.ts

@@ -1,11 +1,71 @@
 import type { Action } from './ActionsCell.svelte';
+/**
+ * @constant bookmarkAction
+ * @type {Action}
+ * @property {string} name - bookmark
+ * @property {ConstructorOfATypedSvelteComponent} icon - BookmarkOutline
+*/
 export declare const bookmarkAction: Action;
+/**
+ * @constant deleteAction
+ * @type {Action}
+ * @property {string} name - delete
+ * @property {ConstructorOfATypedSvelteComponent} icon - TrashBinOutline
+*/
 export declare const deleteAction: Action;
+/**
+ * @constant downAction
+ * @type {Action}
+ * @property {string} name - down
+ * @property {ConstructorOfATypedSvelteComponent} icon - ArrowDownSolid
+*/
 export declare const downAction: Action;
+/**
+ * @constant editAction
+ * @type {Action}
+ * @property {string} name - edit
+ * @property {ConstructorOfATypedSvelteComponent} icon - EditOutline
+*/
 export declare const editAction: Action;
+/**
+ * @constant favoriteAction
+ * @type {Action}
+ * @property {string} name - favorite
+ * @property {ConstructorOfATypedSvelteComponent} icon - HeartSolid
+*/
 export declare const favoriteAction: Action;
+/**
+ * @constant infoAction
+ * @type {Action}
+ * @property {string} name - info
+ * @property {ConstructorOfATypedSvelteComponent} icon - InfoCircleOutline
+*/
 export declare const infoAction: Action;
+/**
+ * @constant notificationAction
+ * @type {Action}
+ * @property {string} name - notification
+ * @property {ConstructorOfATypedSvelteComponent} icon - BellActiveOutline
+*/
 export declare const notificationAction: Action;
+/**
+ * @constant settingsAction
+ * @type {Action}
+ * @property {string} name - settings
+ * @property {ConstructorOfATypedSvelteComponent} icon - CogOutline
+*/
 export declare const settingsAction: Action;
+/**
+ * @constant shareAction
+ * @type {Action}
+ * @property {string} name - share
+ * @property {ConstructorOfATypedSvelteComponent} icon - ShareNodesOutline
+*/
 export declare const shareAction: Action;
+/**
+ * @constant upAction
+ * @type {Action}
+ * @property {string} name - up
+ * @property {ConstructorOfATypedSvelteComponent} icon - UpArrowSolid
+*/
 export declare const upAction: Action;

package/dist/cells/Actions.js

@@ -1,40 +1,100 @@
 import { ArrowDownSolid, ArrowUpSolid, BellActiveOutline, BookmarkOutline, CogOutline, EditOutline, HeartSolid, InfoCircleOutline, ShareNodesOutline, TrashBinOutline, } from 'flowbite-svelte-icons';
+/**
+ * @constant bookmarkAction
+ * @type {Action}
+ * @property {string} name - bookmark
+ * @property {ConstructorOfATypedSvelteComponent} icon - BookmarkOutline
+*/
 export const bookmarkAction = {
     icon: BookmarkOutline,
     name: 'bookmark',
 };
+/**
+ * @constant deleteAction
+ * @type {Action}
+ * @property {string} name - delete
+ * @property {ConstructorOfATypedSvelteComponent} icon - TrashBinOutline
+*/
 export const deleteAction = {
     icon: TrashBinOutline,
     name: 'delete',
 };
+/**
+ * @constant downAction
+ * @type {Action}
+ * @property {string} name - down
+ * @property {ConstructorOfATypedSvelteComponent} icon - ArrowDownSolid
+*/
 export const downAction = {
     icon: ArrowDownSolid,
     name: 'down',
 };
+/**
+ * @constant editAction
+ * @type {Action}
+ * @property {string} name - edit
+ * @property {ConstructorOfATypedSvelteComponent} icon - EditOutline
+*/
 export const editAction = {
     icon: EditOutline,
     name: 'edit',
 };
+/**
+ * @constant favoriteAction
+ * @type {Action}
+ * @property {string} name - favorite
+ * @property {ConstructorOfATypedSvelteComponent} icon - HeartSolid
+*/
 export const favoriteAction = {
     icon: HeartSolid,
     name: 'favorite',
 };
+/**
+ * @constant infoAction
+ * @type {Action}
+ * @property {string} name - info
+ * @property {ConstructorOfATypedSvelteComponent} icon - InfoCircleOutline
+*/
 export const infoAction = {
     icon: InfoCircleOutline,
     name: 'info',
 };
+/**
+ * @constant notificationAction
+ * @type {Action}
+ * @property {string} name - notification
+ * @property {ConstructorOfATypedSvelteComponent} icon - BellActiveOutline
+*/
 export const notificationAction = {
     icon: BellActiveOutline,
     name: 'notification',
 };
+/**
+ * @constant settingsAction
+ * @type {Action}
+ * @property {string} name - settings
+ * @property {ConstructorOfATypedSvelteComponent} icon - CogOutline
+*/
 export const settingsAction = {
     icon: CogOutline,
     name: 'settings',
 };
+/**
+ * @constant shareAction
+ * @type {Action}
+ * @property {string} name - share
+ * @property {ConstructorOfATypedSvelteComponent} icon - ShareNodesOutline
+*/
 export const shareAction = {
     icon: ShareNodesOutline,
     name: 'share',
 };
+/**
+ * @constant upAction
+ * @type {Action}
+ * @property {string} name - up
+ * @property {ConstructorOfATypedSvelteComponent} icon - UpArrowSolid
+*/
 export const upAction = {
     icon: ArrowUpSolid,
     name: 'up',

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

@@ -0,0 +1,28 @@
+/**
+ * Returns true if the action should be disabled for the row.
+ * @callback ActionDisablementFunction
+ * @param {any} item - The row of data
+ * @param {ColumnConfig} column - The configuration for the ActionCell's column
+ * @param {Action} action - The action to disable or enable
+ * @returns {boolean}
+ */
+export {};
+/**
+ * An action to be displayed inside an ActionCell
+ * @interface Action
+ * @property {string} [buttonClass] - Class for the button. If not populated, the cell's buttonClass will be used.
+ * @property {ButtonColor} [buttonColor] - See {@link https://flowbite-svelte.com/docs/pages/typescript}. If not populated, the cell's buttonColor will be used.
+ * @property {string} [caption] - Text displayed with the icon.
+ * @property {string} name - Name of the action. Returned as part of the action event on DataGrid when the button is clicked.
+ * @property {ConstructorOfATypedSvelteComponent} icon - Icon to be displayed in the button.
+ * @property {string} [iconClass] - Class for the icon to be displayed in the button. If not populated, the cell's iconClass will be used.
+ * @property {ActionDisablementFunction} [isDisabled] - If populated, will be called to check whether the button should be enabled or disabled for each row.
+ */
+/**
+ * Cell containing an array of Button ({@link https://flowbite-svelte.com/docs/components/buttons}) components which fire the action event on the grid when clicked.
+ * @typedef {object} ActionsCell
+ * @property [Action[]] actions - The actions to be displayed inside the cell.
+ * @property {string} [buttonClass] - Class for the cell's buttons. Defaults to 'border-0 p-1'.
+ * @property {ButtonColor} [buttonColor] - See {@link https://flowbite-svelte.com/docs/pages/typescript}. Defaults to 'light'.
+ * @property {string} [iconClass] - Class for the icon to be displayed in the button. Defaults to 'w-4 h-4'.
+ */

package/dist/cells/ActionsCell.doc.js

@@ -0,0 +1,28 @@
+"use strict";
+/**
+ * Returns true if the action should be disabled for the row.
+ * @callback ActionDisablementFunction
+ * @param {any} item - The row of data
+ * @param {ColumnConfig} column - The configuration for the ActionCell's column
+ * @param {Action} action - The action to disable or enable
+ * @returns {boolean}
+ */
+/**
+ * An action to be displayed inside an ActionCell
+ * @interface Action
+ * @property {string} [buttonClass] - Class for the button. If not populated, the cell's buttonClass will be used.
+ * @property {ButtonColor} [buttonColor] - See {@link https://flowbite-svelte.com/docs/pages/typescript}. If not populated, the cell's buttonColor will be used.
+ * @property {string} [caption] - Text displayed with the icon.
+ * @property {string} name - Name of the action. Returned as part of the action event on DataGrid when the button is clicked.
+ * @property {ConstructorOfATypedSvelteComponent} icon - Icon to be displayed in the button.
+ * @property {string} [iconClass] - Class for the icon to be displayed in the button. If not populated, the cell's iconClass will be used.
+ * @property {ActionDisablementFunction} [isDisabled] - If populated, will be called to check whether the button should be enabled or disabled for each row.
+ */
+/**
+ * Cell containing an array of Button ({@link https://flowbite-svelte.com/docs/components/buttons}) components which fire the action event on the grid when clicked.
+ * @typedef {object} ActionsCell
+ * @property [Action[]] actions - The actions to be displayed inside the cell.
+ * @property {string} [buttonClass] - Class for the cell's buttons. Defaults to 'border-0 p-1'.
+ * @property {ButtonColor} [buttonColor] - See {@link https://flowbite-svelte.com/docs/pages/typescript}. Defaults to 'light'.
+ * @property {string} [iconClass] - Class for the icon to be displayed in the button. Defaults to 'w-4 h-4'.
+ */

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

@@ -1,6 +1,7 @@
 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;
@@ -8,7 +9,7 @@ export interface Action {
     name: string;
     icon: ConstructorOfATypedSvelteComponent;
     iconClass?: string;
-    isDisabled?: (item: any, column: ColumnConfig, action: Action) => boolean;
+    isDisabled?: ActionDisablementFunction;
 }
 declare const __propDef: {
     props: {

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

@@ -0,0 +1,6 @@
+export {};
+/**
+ * Cell containing a Button ({@link https://flowbite-svelte.com/docs/components/buttons}) component.
+ * @typedef {object} ButtonCell
+ * @property {string} [caption] - Text to be displayed inside the button.
+ */

package/dist/cells/ButtonCell.doc.js

@@ -0,0 +1,6 @@
+"use strict";
+/**
+ * Cell containing a Button ({@link https://flowbite-svelte.com/docs/components/buttons}) component.
+ * @typedef {object} ButtonCell
+ * @property {string} [caption] - Text to be displayed inside the button.
+ */

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

@@ -0,0 +1,6 @@
+export {};
+/**
+ * Cell containing a Checkbox {@link (https://flowbite-svelte.com/docs/forms/checkbox}) component.
+ * @typedef {object} CheckboxCell
+ * @property {string} [caption] - Text to be displayed next to the checkbox.
+ */

package/dist/cells/CheckboxCell.doc.js

@@ -0,0 +1,6 @@
+"use strict";
+/**
+ * Cell containing a Checkbox {@link (https://flowbite-svelte.com/docs/forms/checkbox}) component.
+ * @typedef {object} CheckboxCell
+ * @property {string} [caption] - Text to be displayed next to the checkbox.
+ */

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

@@ -0,0 +1,6 @@
+export {};
+/**
+ * Cell containing an Input {@link (https://flowbite-svelte.com/docs/forms/input-field}) component.
+ * @typedef {object} InputCell
+ * @property {string} [inputType] - See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types}
+ */

package/dist/cells/InputCell.doc.js

@@ -0,0 +1,6 @@
+"use strict";
+/**
+ * Cell containing an Input {@link (https://flowbite-svelte.com/docs/forms/input-field}) component.
+ * @typedef {object} InputCell
+ * @property {string} [inputType] - See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types}
+ */

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

@@ -0,0 +1,6 @@
+export {};
+/**
+ * Cell containing a NumberInput ({@link https://flowbite-svelte.com/docs/forms/input-field#Number_input}) component.
+ * @typedef {object} NumberInputCell
+ * @property {string} [inputType] - See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types
+ */

package/dist/cells/NumberInputCell.doc.js

@@ -0,0 +1,6 @@
+"use strict";
+/**
+ * Cell containing a NumberInput ({@link https://flowbite-svelte.com/docs/forms/input-field#Number_input}) component.
+ * @typedef {object} NumberInputCell
+ * @property {string} [inputType] - See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types
+ */

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

@@ -0,0 +1,8 @@
+export {};
+/**
+ * Cell containing a Select ({@link https://flowbite-svelte.com/docs/forms/select}) component.
+ * @typedef {object} SelectCell
+ * @property {string} [displayProp] - Property within items which displays in the list. Defaults to 'name'.
+ * @property {string} [valueProp] - Property within tems used to populate the cell's value when picked. Defaults to 'id'.
+ * @property {any[]} items - Array of objects the user can select from.
+ */

package/dist/cells/SelectCell.doc.js

@@ -0,0 +1,8 @@
+"use strict";
+/**
+ * Cell containing a Select ({@link https://flowbite-svelte.com/docs/forms/select}) component.
+ * @typedef {object} SelectCell
+ * @property {string} [displayProp] - Property within items which displays in the list. Defaults to 'name'.
+ * @property {string} [valueProp] - Property within tems used to populate the cell's value when picked. Defaults to 'id'.
+ * @property {any[]} items - Array of objects the user can select from.
+ */

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

@@ -0,0 +1,13 @@
+export {};
+/**
+ * Cell containing a numeric value and plus and minus buttons. The value is decremented or incremented when the buttons are clicked.
+ * @typedef {object} SpinCell
+ * @property {number} [decValue] - Amount to decrement the value by when the minus button is clicked. Defaults to 1.
+ * @property {number} [incValue] - Amount to increment the value by when the plus button is clicked. Defaults to 1.
+ * @property {number} [minValue] - If specified, the minus button cannot make the value go lower than this.
+ * @property {number} [maxValue] - If specified, the plus button cannot make the value go higher than this.
+ * @property {ConstructorOfATypedSvelteComponent} [minusIcon] Svelte component class for the minus icon. Defaults to MinusSolid from {@link https://flowbite.com/icons/}
+ * @property {string} [minusIconClass] - CSS class of the minus icon, defaults to 'pr-1 w-3 h-3'
+ * @property {ConstructorOfATypedSvelteComponent} [plusIcon] Svelte component class for the plus icon. Defaults to PlusSolid from {@link https://flowbite.com/icons/}
+ * @property {string} [plusIconClass] - CSS class of the plus icon, defaults to 'pr-1 w-3 h-3'
+ */

package/dist/cells/SpinCell.doc.js

@@ -0,0 +1,13 @@
+"use strict";
+/**
+ * Cell containing a numeric value and plus and minus buttons. The value is decremented or incremented when the buttons are clicked.
+ * @typedef {object} SpinCell
+ * @property {number} [decValue] - Amount to decrement the value by when the minus button is clicked. Defaults to 1.
+ * @property {number} [incValue] - Amount to increment the value by when the plus button is clicked. Defaults to 1.
+ * @property {number} [minValue] - If specified, the minus button cannot make the value go lower than this.
+ * @property {number} [maxValue] - If specified, the plus button cannot make the value go higher than this.
+ * @property {ConstructorOfATypedSvelteComponent} [minusIcon] Svelte component class for the minus icon. Defaults to MinusSolid from {@link https://flowbite.com/icons/}
+ * @property {string} [minusIconClass] - CSS class of the minus icon, defaults to 'pr-1 w-3 h-3'
+ * @property {ConstructorOfATypedSvelteComponent} [plusIcon] Svelte component class for the plus icon. Defaults to PlusSolid from {@link https://flowbite.com/icons/}
+ * @property {string} [plusIconClass] - CSS class of the plus icon, defaults to 'pr-1 w-3 h-3'
+ */

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

@@ -0,0 +1,5 @@
+export {};
+/**
+ * Utility component to make tabbing between focused cells work. See InputCell.svelte as an example.
+ * @typedef {object} TabWrapper
+ */

package/dist/cells/TabWrapper.doc.js

@@ -0,0 +1,5 @@
+"use strict";
+/**
+ * Utility component to make tabbing between focused cells work. See InputCell.svelte as an example.
+ * @typedef {object} TabWrapper
+ */

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

@@ -0,0 +1,6 @@
+export {};
+/**
+ * Cell containing a Toggle ({@link https://flowbite-svelte.com/docs/forms/toggle}) component.
+ * @typedef {object} ToggleCell
+ * @property {string} [caption] - Text to be displayed inside the button.
+ */

package/dist/cells/ToggleCell.doc.js

@@ -0,0 +1,6 @@
+"use strict";
+/**
+ * Cell containing a Toggle ({@link https://flowbite-svelte.com/docs/forms/toggle}) component.
+ * @typedef {object} ToggleCell
+ * @property {string} [caption] - Text to be displayed inside the button.
+ */

package/dist/common.d.ts

@@ -1,3 +1,78 @@
+/**
+ * Values for a given column/row, returned by cellRenderer (or the default renderer).
+ * @typedef {object} CellValue
+ * @property {any} dataValue The data value for the cell.
+ * @property {any} [displayValue] The value to be displayed for the cell. If this is not set, value will be used instead.
+ */
+export interface CellValue {
+    dataValue: any;
+    displayValue?: any;
+}
+/**
+ * Returns the value for a given column/row combination.
+ * @callback CellRenderer
+ * @returns {CellValue}
+ */
+export type CellRenderer = (
+/** Configuration for the cell's column. */
+column: ColumnConfig, 
+/** Data for the cell's row. */
+item: any) => Promise<CellValue>;
+/**
+ * Returns the a class string for a data cell.
+ * @callback DataCellClassFunction
+ * @returns {string}
+ */
+export type DataCellClassFunction = (
+/** Data for the cell's row. */
+item: any, 
+/** Configuration for the cell's column. */
+column: ColumnConfig, 
+/** Value for the data cell, after Column.cellRenderer (if any) has been called. */
+value: CellValue, 
+/** True if the cell is focused. */
+isFocused: boolean, 
+/** Classes as termined by grid and column properties and focus state. */
+calcClass: string, 
+/** Default classes for a TableBodyCell component as defined by FlowBite. */
+defaultClass: string, 
+/** tdClassAppend from DataTable. */
+appendClass: string, 
+/** tdClassOveride from DataTable. */
+overrideClass: string) => string;
+/**
+ * Returns a comparison between two values, used for sorting.
+ * @callback SortFunction
+ * @returns {number}
+ */
+export type SortFunction = (
+/** First value to compare. */
+a: any, 
+/** Second value to compare. */
+b: any) => number;
+/**
+ * Configuration options for a grid column
+ * @typedef {object} ColumnConfig
+ * @property {string} [id] - Used to distinguish between multiple columns that have the same key.
+ * @property {string} [key] - Name of the property in each row item that will be used for this column's value.
+ * @property {string} [title] - Text to display in the column's header.
+ * @property {CellRenderer} [cellRenderer] - Dynamically determines the data value and display value for a cell.
+ * @property {ConstructorOfATypedSvelteComponent} [viewComponent] - Svelte component class to be displayed in the cell regardless of focus. If set, focusComponent will be ignored.
+ * @property {object} [viewComponentConfig] - Properties to be passed when creating viewComponent.
+ * @property {ConstructorOfATypedSvelteComponent} [focusComponent] - Svelte component class to be displayed in the cell when it has focus.
+ * @property {object} [focusComponentConfig] - Properties to be passed when creating focusComponent.
+ * @property {string} [tdClassAppend] - Classes to append to existing CSS when not focused.
+ * @property {string} [tdClassOverride] - Classes to replace existing CSS with when not focused.
+ * @property {string} [tdFocusedClassAppend] - Classes to append to existing CSS when focused.
+ * @property {string} [tdFocusedClassOverride] - Classes to replace existing CSS with when focused.
+ * @property {DataCellClassFunction} [tdClassGetter] - Dynamically determines CSS classes for a cell.
+ * @property {string} [thClassAppend] - Classes to append to existing CSS for header cells.
+ * @property {string} [thClassOverride] - Class to replace existing CSS for header cells.
+ * @property {boolean} [canFocus] - True if cells in this column can be focused.
+ * @property {boolean} [canSort] - If true, clicking the column's header will set sorting to sortFunction or sortKey, or reverse it if already set.
+ * @property {SortFunction} [sortFunction] - Comparison function for complex sorting.
+ * @property {string} [sortKey] - Item property to sort by, if sortFunction is not defined.
+  */
 export interface ColumnConfig {
     id?: string;
     key?: string;
@@ -19,18 +94,39 @@ export interface ColumnConfig {
     sortFunction?: SortFunction;
     sortKey?: string;
 }
-export type CellRenderer = (columnConfig: ColumnConfig, item: any) => Promise<any>;
-export type SortFunction = (a: any, b: any) => number;
-export type RowClassFunction = (item: any, isFocused: boolean, calcClass: string, defaultClass: string, appendClass: string, overrideClass: string) => string;
-export type DataCellClassFunction = (item: any, column: ColumnConfig, value: any, isFocused: boolean, calcClass: string, defaultClass: string, appendClass: string, overrideClass: string) => string;
+/**
+ * Returns the a class string for a data row.
+ * @callback RowClassFunction
+ * @returns {string}
+ */
+export type RowClassFunction = (
+/** Data for the cell's row. */
+item: any, 
+/** True if a cell on this row is focused. */
+isFocused: boolean, 
+/** Classes as termined by grid properties. */
+calcClass: string, 
+/** Default classes for a TableBodyRow component as defined by FlowBite. */
+defaultClass: string, 
+/** trClassAppend from DataTable. */
+appendClass: string, 
+/** trClassOveride from DataTable. */
+overrideClass: string) => string;
+/**
+ * Joins an array of classes into a string, removing any falsey values.
+ * @function joinClasses
+ * @param {...string} items - Strings of CSS classes to join.
+ * @returns {string}
+ */
 export declare const joinClasses: (...classes: (string | false | null | undefined)[]) => string;
+/**
+ * Values for enterAction on DataTable.
+ * @enum {string} EnterAction
+ */
+export type EnterAction = 'next' | 'down' | 'stay';
 export type GetTDClassFunction = (item: any, value: any, isFocused: boolean) => string;
 export interface InternalColumnConfig extends ColumnConfig {
     getTDClass: GetTDClassFunction;
 }
-export declare const blankCellValues: {
-    dataValue: null;
-    displayValue: string;
-};
+export declare const blankCellValue: CellValue;
 export declare const defaultCellRenderer: CellRenderer;
-export type EnterAction = 'next' | 'down' | 'stay';

package/dist/common.js

@@ -1,8 +1,14 @@
+/**
+ * Joins an array of classes into a string, removing any falsey values.
+ * @function joinClasses
+ * @param {...string} items - Strings of CSS classes to join.
+ * @returns {string}
+ */
 export const joinClasses = (...classes) => (classes || []).filter((value) => !!value).join(' ');
-export const blankCellValues = {
+export const blankCellValue = {
     dataValue: null,
     displayValue: '',
 };
 export const defaultCellRenderer = async (column, item) => column.key
     ? { dataValue: item[column.key], displayValue: item[column.key] || '' }
-    : blankCellValues;
+    : blankCellValue;

package/package.json

@@ -1,6 +1,7 @@
 {
 	"name": "@emamid/svelte-data-table",
-	"version": "0.0.3",
+	"version": "0.0.5",
+	"homepage": "htts://davidemami.net/",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run package",
@@ -11,7 +12,8 @@
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
 		"test": "vitest",
 		"lint": "prettier --check . && eslint .",
-		"format": "prettier --write ."
+		"format": "prettier --write .",
+		"jsdoc": "jsdoc -c jsdoc.json"
 	},
 	"exports": {
 		".": {
@@ -35,12 +37,15 @@
 		"@types/eslint": "8.56.0",
 		"@typescript-eslint/eslint-plugin": "^6.0.0",
 		"@typescript-eslint/parser": "^6.0.0",
+		"better-docs": "^2.7.3",
 		"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",
+		"jsdoc": "^4.0.2",
+		"jsdoc-plugin-typescript": "^2.2.1",
 		"prettier": "^3.1.1",
 		"prettier-plugin-svelte": "^3.1.2",
 		"publint": "^0.1.9",