@emamid/svelte-data-table 0.0.21 → 1.0.1

package/dist/common.d.ts

@@ -1,5 +1,18 @@
+import type { Component } from 'svelte';
+export type IconifyProps = {
+    color?: string;
+    flip?: string;
+    height?: string | number;
+    hFlip?: boolean;
+    icon: string;
+    inline?: boolean;
+    rotate?: number;
+    vFlip?: boolean;
+    width?: string | number;
+};
+export type IconProp = Component<any, any, any> | string | IconifyProps;
 /**
- * Values for a given column/row, returned by cellRenderer (or the default renderer).
+ * Values for a given column/row
  * @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.
@@ -8,16 +21,30 @@ export interface CellValue {
     dataValue: any;
     displayValue?: any;
 }
+/**
+ * Return result of a cell 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.
+ * @property {ComponentProps} [focusComponentConfig]
+ * @property {string} [tdClass]
+ * @property {ComponentProps} [viewComponentConfig]
+ */
+export interface CellRendererResult extends CellValue {
+    focusComponentConfig?: Record<string, any>;
+    tdClass?: string;
+    viewComponentConfig?: Record<string, any>;
+}
 /**
  * Returns the value for a given column/row combination.
  * @callback CellRenderer
- * @returns {CellValue}
+ * @returns {CellRendererResult}
  */
 export type CellRenderer = (
 /** Configuration for the cell's column. */
 column: ColumnConfig, 
 /** Data for the cell's row. */
-item: any) => Promise<CellValue>;
+item: any, isFocused: boolean, baseClass: string) => Promise<CellRendererResult>;
 /**
  * Returns the a class string for a data cell.
  * @callback DataCellClassFunction
@@ -32,14 +59,45 @@ column: ColumnConfig,
 value: CellValue, 
 /** True if the cell is focused. */
 isFocused: boolean, 
-/** Classes as determined 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;
+baseClass: string) => string;
+export interface DataCellDragEvent extends DragEvent {
+    sourceColumn: ColumnConfig;
+    sourceItem: any;
+}
+export interface DataCellDropEvent extends DragEvent {
+    sourceColumn: ColumnConfig;
+    sourceItem: any;
+    targetColumn: ColumnConfig;
+    targetItem: any;
+}
+export interface DataCellEvent {
+    column: ColumnConfig;
+    item: any;
+}
+export interface DataCellChangedEvent extends DataCellEvent {
+    oldValue: any;
+    newValue: any;
+}
+export interface DataCellMouseEvent extends MouseEvent {
+    column: ColumnConfig;
+    item: any;
+}
+export type ActionDisablementFunction = (item: any, column: ColumnConfig, action: Action) => boolean;
+export interface Action {
+    buttonClass?: string;
+    caption?: string;
+    name: string;
+    icon?: IconProp;
+    iconClass?: string;
+    iconify?: IconifyProps;
+    isDisabled?: ActionDisablementFunction;
+    theme?: ActionTheme;
+    tooltip?: string;
+}
+export interface ActionEvent extends DataCellEvent {
+    action: Action;
+}
 /**
  * Returns a comparison between two values, used for sorting.
  * @callback SortFunction
@@ -50,6 +108,99 @@ export type SortFunction = (
 a: any, 
 /** Second value to compare. */
 b: any) => number;
+type ThemeValue = {
+    append?: string;
+    override?: string;
+};
+type DataCell = {
+    td?: ThemeValue;
+    tdFocused?: ThemeValue;
+};
+type HeaderCell = {
+    sortAscending?: IconProp;
+    sortDescending?: IconProp;
+    span?: ThemeValue;
+    th?: ThemeValue;
+    titleSpan?: ThemeValue;
+};
+type Row = {
+    tr?: ThemeValue;
+    trFocused?: ThemeValue;
+};
+type Table = {
+    table?: ThemeValue;
+    tbody?: ThemeValue;
+    thead?: ThemeValue;
+    theadTR?: ThemeValue;
+};
+interface ColumnParts {
+    dataCell?: DataCell;
+    headerCell?: HeaderCell;
+}
+interface TableParts extends ColumnParts {
+    row?: Row;
+    table?: Table;
+}
+export type ActionTheme = {
+    button?: ThemeValue;
+    icon?: ThemeValue;
+};
+type Button = {
+    button?: ThemeValue;
+    icon?: ThemeValue;
+};
+type Checkbox = {
+    input?: ThemeValue;
+    label?: ThemeValue;
+};
+type Input = {
+    input?: ThemeValue;
+};
+type MultiSelect = {
+    option?: ThemeValue;
+    select?: ThemeValue;
+};
+type NumberInput = {
+    input?: ThemeValue;
+};
+type Radio = {
+    span?: ThemeValue;
+    input?: ThemeValue;
+};
+type Range = {
+    input?: ThemeValue;
+};
+type Select = {
+    option?: ThemeValue;
+    select?: ThemeValue;
+};
+type Spinner = {
+    div?: ThemeValue;
+    minusButton?: ThemeValue;
+    minusIcon?: IconProp;
+    plusButton?: ThemeValue;
+    plusIcon?: IconProp;
+};
+type Inputs = {
+    action?: ActionTheme;
+    button?: Button;
+    checkbox?: Checkbox;
+    input?: Input;
+    multiSelect?: MultiSelect;
+    numberInput?: NumberInput;
+    radio?: Radio;
+    range?: Range;
+    select?: Select;
+    spinner?: Spinner;
+};
+export type DataTableColumnTheme = {
+    parts?: ColumnParts;
+};
+export type DataTableTheme = {
+    inputs?: Inputs;
+    parts?: TableParts;
+};
+type Theme = DataTableColumnTheme & DataTableTheme;
 /**
  * Configuration options for a grid column
  * @typedef {object} ColumnConfig
@@ -63,17 +214,9 @@ b: any) => number;
  * @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 {ConstructorOfATypedSvelteComponent} [sortAscendingIcon] - Svelte component class to be displayed in the column is sorting ascended (overrides table).
- * @property {ConstructorOfATypedSvelteComponent} [sortDescendingIcon] - Svelte component class to be displayed in the column is sorting descended (overrides table).
  * @property {SortFunction} [sortFunction] - Comparison function for complex sorting.
  * @property {string} [sortKey] - Item property to sort by, if sortFunction is not defined.
   */
@@ -83,24 +226,25 @@ export interface ColumnConfig {
     canFocus?: boolean;
     canSort?: boolean;
     cellRenderer?: CellRenderer;
-    focusComponent?: ConstructorOfATypedSvelteComponent;
-    focusComponentConfig?: any;
+    focusComponent?: Component<any, any, any>;
+    focusComponentConfig?: Record<string, any>;
     id?: string;
     key?: string;
-    sortAscendingIcon?: ConstructorOfATypedSvelteComponent;
-    sortDescendingIcon?: ConstructorOfATypedSvelteComponent;
     sortFunction?: SortFunction;
     sortKey?: string;
-    tdClassAppend?: string;
-    tdClassOverride?: string;
-    tdFocusedClassAppend?: string;
-    tdFocusedClassOverride?: string;
-    tdClassGetter?: DataCellClassFunction;
-    thClassAppend?: string;
-    thClassOverride?: string;
+    theme?: DataTableColumnTheme;
     title?: string;
-    viewComponent?: ConstructorOfATypedSvelteComponent;
-    viewComponentConfig?: any;
+    viewComponent?: Component<any, any, any>;
+    viewComponentConfig?: Record<string, any>;
+}
+interface ColumnEvent {
+    column: ColumnConfig;
+}
+export interface HeaderEvent extends ColumnEvent {
+    reverseSort?: boolean;
+    sortColumnID?: string;
+    sortFunction?: SortFunction;
+    sortKey?: string;
 }
 /**
  * Returns the a class string for a data row.
@@ -112,21 +256,22 @@ export type RowClassFunction = (
 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;
+/** Classes as determined by grid properties. */
+baseClass: string) => string;
+export interface RowDragEvent extends DragEvent {
+    sourceItem: any;
+}
+export interface RowDropEvent extends DragEvent {
+    sourceItem: any;
+    targetItem: any;
+}
+export type RowEvent = {
+    item: any;
+};
+export declare const joinInputClasses: (input: string, element: string, themes: (Theme | undefined)[], isFocused?: boolean) => string;
+export declare const joinPartClasses: (part: string, element: string, themes: (Theme | undefined)[], isFocused?: boolean) => string;
+export declare const getInputIcon: (part: string, propName: string, themes: (Theme | undefined)[]) => IconProp;
+export declare const getPartIcon: (part: string, propName: string, themes: (Theme | undefined)[]) => IconProp;
 /**
  * Values for enterAction on DataTable.
  * @enum {string} EnterAction
@@ -134,10 +279,6 @@ export declare const joinClasses: (...classes: (string | false | null | undefine
 export type EnterAction = 'next' | 'down' | 'stay';
 export type GetItemKeyFunction = (item?: any) => any;
 export type GetTDClassFunction = (item: any, value: any, isFocused: boolean) => string;
-export type GetTRClassFunction = (item: any, isRowFocused: boolean) => string;
-export interface InternalColumnConfig extends ColumnConfig {
-    getTDClass: GetTDClassFunction;
-}
 type CellDropBooleanFunction = (sourceItem: any, targetItem: any, targetColumn: ColumnConfig) => boolean;
 /**
  * @callback CellDropBoolean
@@ -162,10 +303,15 @@ export declare const evalRowBoolean: (item: any, rowBoolean?: RowBoolean) => boo
 export declare const evalRowDropBoolean: (sourceItem: any, targetItem: any, rowDropBoolean?: RowDropBoolean) => boolean | undefined;
 export declare const defaultCellRenderer: CellRenderer;
 export declare const getColumnID: (column?: ColumnConfig | null) => string | null;
-interface DataTableContext {
-    draggedColumn?: InternalColumnConfig;
+export type DragType = 'cell' | 'column' | // Not yet implemented
+'row';
+export interface DataTableContext {
+    draggedColumn?: ColumnConfig;
     draggedItem?: any;
+    dragType?: DragType;
+    items: any[];
+    theme?: DataTableTheme;
 }
+export declare const dataTableContextName = "data-grid";
 export declare const getDataTableContext: () => DataTableContext;
-export declare const setDataTableContext: (context: DataTableContext) => DataTableContext;
 export {};

package/dist/common.js

@@ -1,11 +1,31 @@
-import { getContext, setContext } from 'svelte';
-/**
- * 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(' ');
+import { getContext } from 'svelte';
+import { get } from 'lodash';
+const joinThemeClasses = (path, themes, isFocused) => {
+    const result = (themes || []).reduce((classValue, theme) => {
+        const themeValue = get(theme, path);
+        const focusedValue = isFocused ? get(theme, `${path}Focused`) : null;
+        return (focusedValue?.override || themeValue?.override || classValue) + ' ' + (themeValue?.append || '') + ' ' + (focusedValue?.append || '');
+    }, '');
+    return result?.trim();
+};
+export const joinInputClasses = (input, element, themes, isFocused) => {
+    return joinThemeClasses(`inputs.${input}.${element}`, themes, isFocused);
+};
+export const joinPartClasses = (part, element, themes, isFocused) => {
+    return joinThemeClasses(`parts.${part}.${element}`, themes, isFocused);
+};
+const getThemeIcon = (path, themes) => {
+    const result = (themes || []).reduce((currentValue, theme) => {
+        return get(theme, path) || currentValue;
+    }, '');
+    return result;
+};
+export const getInputIcon = (part, propName, themes) => {
+    return getThemeIcon(`inputs.${part}.${propName}`, themes);
+};
+export const getPartIcon = (part, propName, themes) => {
+    return getThemeIcon(`parts.${part}.${propName}`, themes);
+};
 export const blankCellValue = {
     dataValue: null,
     displayValue: '',
@@ -28,10 +48,9 @@ export const evalRowDropBoolean = (sourceItem, targetItem, rowDropBoolean) => {
     }
     return rowDropBoolean && rowDropBoolean(sourceItem, targetItem);
 };
-export const defaultCellRenderer = async (column, item) => column.key
+export const defaultCellRenderer = async (column, item, _isFocused, _baseClass) => column.key
     ? { dataValue: item[column.key], displayValue: item[column.key] || '' }
     : blankCellValue;
 export const getColumnID = (column) => (column ? column.id || null : null);
-const dataTableContextName = 'data-grid';
+export const dataTableContextName = 'data-grid';
 export const getDataTableContext = () => getContext(dataTableContextName);
-export const setDataTableContext = (context) => setContext(dataTableContextName, context);

package/dist/index.d.ts

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

package/dist/index.js

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

package/dist/themes/active.d.ts

@@ -0,0 +1,4 @@
+import type { DataTableTheme } from '../common';
+export declare let activeTheme: DataTableTheme;
+export declare const mergeThemes: (themes: DataTableTheme | DataTableTheme[]) => DataTableTheme;
+export declare const setActiveTheme: (themes: DataTableTheme | DataTableTheme[]) => DataTableTheme;

package/dist/themes/active.js

@@ -0,0 +1,12 @@
+import { merge } from 'lodash';
+import { defaultTheme } from './default';
+export let activeTheme = defaultTheme;
+export const mergeThemes = (themes) => {
+    return (Array.isArray(themes) ? themes : [themes]).reduce((processedThemes, theme) => {
+        return merge(processedThemes, theme);
+    }, {});
+};
+export const setActiveTheme = (themes) => {
+    activeTheme = mergeThemes(themes);
+    return activeTheme;
+};

package/dist/themes/daisyUI.d.ts

@@ -0,0 +1,2 @@
+import type { DataTableTheme } from '../common';
+export declare const daisyUITheme: DataTableTheme;

package/dist/themes/daisyUI.js

@@ -0,0 +1,47 @@
+export const daisyUITheme = {
+    inputs: {
+        button: {
+            button: {
+                override: 'btn btn-primary',
+            }
+        },
+        checkbox: {
+            input: {
+                override: 'toggle',
+            },
+        },
+        input: {
+            input: {
+                override: 'input',
+            },
+        },
+        multiSelect: {
+            select: {
+                override: 'select',
+            }
+        },
+        numberInput: {
+            input: {
+                override: 'input',
+            },
+        },
+        radio: {
+            input: {
+                override: 'mask mask-star',
+            },
+            span: {
+                override: 'rating',
+            },
+        },
+        range: {
+            input: {
+                override: 'range',
+            },
+        },
+        select: {
+            select: {
+                override: 'select',
+            }
+        },
+    },
+};

package/dist/themes/default.d.ts

@@ -0,0 +1,2 @@
+import type { DataTableTheme } from '../common';
+export declare const defaultTheme: DataTableTheme;

package/dist/themes/default.js

@@ -0,0 +1,57 @@
+export const defaultTheme = {
+    inputs: {
+        action: {
+            button: {
+                override: 'border-0 p-1',
+            },
+            icon: {
+                override: 'w-4 h-4',
+            },
+        },
+        spinner: {
+            div: {
+                override: 'spinner',
+            },
+            minusButton: {
+                override: 'pr-1',
+            },
+            minusIcon: '-',
+            plusButton: {
+                override: 'pl-1',
+            },
+            plusIcon: '+',
+        },
+    },
+    parts: {
+        dataCell: {
+            td: {
+                override: 'px-6 py-4 whitespace-nowrap font-medium',
+            },
+            tdFocused: {
+                override: 'px-6 py-4 whitespace-nowrap font-medium',
+            },
+        },
+        headerCell: {
+            sortAscending: '▲',
+            sortDescending: '▼',
+            span: {
+                override: 'inline-flex items-center',
+            },
+            th: {},
+            titleSpan: {},
+        },
+        row: {
+            tr: {},
+        },
+        table: {
+            table: {
+                override: 'table-fixed',
+            },
+            tbody: {},
+            thead: {
+                override: 'text-xs uppercase sticky top-0 z-10',
+            },
+            theadTR: {},
+        },
+    },
+};

package/dist/themes/iconify.d.ts

@@ -0,0 +1,2 @@
+import type { DataTableTheme } from '../common';
+export declare const iconifyTheme: DataTableTheme;

package/dist/themes/iconify.js

@@ -0,0 +1,33 @@
+export const iconifyTheme = {
+    inputs: {
+        spinner: {
+            minusIcon: {
+                height: '24px',
+                icon: 'ic:sharp-remove-circle',
+                width: '24px',
+            },
+            plusIcon: {
+                height: '24px',
+                icon: 'ic:sharp-add-circle',
+                width: '24px',
+            },
+        },
+    },
+    parts: {
+        headerCell: {
+            sortAscending: {
+                height: '24px',
+                icon: 'ic:sharp-keyboard-arrow-up',
+                width: '24px',
+            },
+            sortDescending: {
+                height: '24px',
+                icon: 'ic:sharp-keyboard-arrow-down',
+                width: '24px',
+            },
+            th: {
+                override: 'h-8',
+            },
+        },
+    },
+};

package/dist/themes/index.d.ts

@@ -0,0 +1,4 @@
+export * from './active';
+export * from './default';
+export * from './daisyUI';
+export * from './iconify';

package/dist/themes/index.js

@@ -0,0 +1,4 @@
+export * from './active';
+export * from './default';
+export * from './daisyUI';
+export * from './iconify';

package/package.json

@@ -1,19 +1,19 @@
 {
 	"name": "@emamid/svelte-data-table",
-	"version": "0.0.21",
+	"version": "1.0.1",
 	"homepage": "https://github.com/emamid/svelte-data-table",
+	"repository": "github:emamid/svelte-data-table",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run package",
 		"preview": "vite preview",
-		"package": "svelte-kit sync && svelte-package && npm run jsdoc && publint",
+		"package": "svelte-kit sync && svelte-package && publint",
 		"prepublishOnly": "npm run package",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
 		"test": "vitest",
 		"lint": "prettier --check . && eslint .",
-		"format": "prettier --write .",
-		"jsdoc": "jsdoc -c jsdoc.json"
+		"format": "prettier --write ."
 	},
 	"exports": {
 		".": {
@@ -27,34 +27,32 @@
 		"!dist/**/*.spec.*"
 	],
 	"peerDependencies": {
-		"svelte": "^4.0.0"
+		"svelte": "^5.0.0"
 	},
 	"devDependencies": {
-		"@sveltejs/adapter-auto": "^3.0.0",
-		"@sveltejs/kit": "^2.0.0",
-		"@sveltejs/package": "^2.0.0",
-		"@sveltejs/vite-plugin-svelte": "^3.0.0",
-		"@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",
-		"svelte": "^4.2.7",
-		"svelte-check": "^3.6.0",
-		"tslib": "^2.4.1",
-		"typescript": "^5.0.0",
-		"vite": "^5.0.3",
-		"vitest": "^1.0.0"
+		"@iconify/svelte": "^5.2.1",
+		"@sveltejs/adapter-auto": "^7.0.0",
+		"@sveltejs/kit": "^2.50.0",
+		"@sveltejs/package": "^2.5.7",
+		"@sveltejs/vite-plugin-svelte": "^6.2.4",
+		"@types/eslint": "9.6.1",
+		"@types/lodash": "^4.17.23",
+		"@typescript-eslint/eslint-plugin": "^8.53.1",
+		"@typescript-eslint/parser": "^8.53.1",
+		"eslint": "^9.39.2",
+		"eslint-config-prettier": "^10.1.8",
+		"eslint-plugin-svelte": "^3.14.0",
+		"lodash": "^4.17.21",
+		"prettier": "^3.8.0",
+		"prettier-plugin-svelte": "^3.4.1",
+		"publint": "^0.3.16",
+		"svelte": "^5.43.8",
+		"svelte-check": "^4.3.4",
+		"tailwindcss": "^4.1.18",
+		"tslib": "^2.8.1",
+		"typescript": "~5.9.3",
+		"vite": "^7.2.4",
+		"vitest": "^4.0.17"
 	},
 	"svelte": "./dist/index.js",
 	"types": "./dist/index.d.ts",