@emamid/svelte-data-table 0.0.12 → 0.0.13

package/dist/cells/SpinCell.svelte

@@ -0,0 +1,59 @@
+<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>
+
+<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
+	>
+	{value || 0}
+	<Button
+		color="none"
+		class="pl-1"
+		on:click={increment}
+		disabled={maxValue !== undefined && value + incValue > maxValue}
+		><svelte:component this={plusIcon} class={plusIconClass} /></Button
+	>
+</div>
+
+<style>
+	.spinner {
+		display: flex;
+		flex-direction: row;
+		justify-content: center;
+		align-items: center;
+	}
+</style>

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

@@ -0,0 +1,29 @@
+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> {
+}
+export {};

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/TabWrapper.svelte

@@ -0,0 +1,23 @@
+<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>
+
+<!-- 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} />

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

@@ -0,0 +1,23 @@
+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> {
+}
+export {};

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/cells/ToggleCell.svelte

@@ -0,0 +1,21 @@
+<script>import { createEventDispatcher } from "svelte";
+import { Toggle } from "flowbite-svelte";
+export let caption = "";
+export let column;
+export let item;
+export let value;
+let localValue = value;
+const dispatch = createEventDispatcher();
+const toggleChanged = () => {
+  dispatch("cellChanged", {
+    column,
+    item,
+    oldValue: value,
+    newValue: localValue
+  });
+};
+</script>
+
+<Toggle {...$$props} bind:checked={localValue} on:change={toggleChanged}
+	>{#if caption}{caption}{/if}</Toggle
+>

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

@@ -0,0 +1,23 @@
+import { SvelteComponent } from "svelte";
+import type { ColumnConfig } from '../common.js';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        caption?: string | undefined;
+        column: ColumnConfig;
+        item: any;
+        value: any;
+    };
+    events: {
+        cellChanged: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ToggleCellProps = typeof __propDef.props;
+export type ToggleCellEvents = typeof __propDef.events;
+export type ToggleCellSlots = typeof __propDef.slots;
+export default class ToggleCell extends SvelteComponent<ToggleCellProps, ToggleCellEvents, ToggleCellSlots> {
+}
+export {};

package/dist/cells/index.d.ts

@@ -0,0 +1,19 @@
+export * from './Actions.js';
+export * from './ActionsCell.svelte';
+export { default as ActionsCell } from './ActionsCell.svelte';
+export * from './ButtonCell.svelte';
+export { default as ButtonCell } from './ButtonCell.svelte';
+export * from './CheckboxCell.svelte';
+export { default as CheckboxCell } from './CheckboxCell.svelte';
+export * from './InputCell.svelte';
+export { default as InputCell } from './InputCell.svelte';
+export * from './NumberInputCell.svelte';
+export { default as NumberInputCell } from './NumberInputCell.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

@@ -0,0 +1,19 @@
+export * from './Actions.js';
+export * from './ActionsCell.svelte';
+export { default as ActionsCell } from './ActionsCell.svelte';
+export * from './ButtonCell.svelte';
+export { default as ButtonCell } from './ButtonCell.svelte';
+export * from './CheckboxCell.svelte';
+export { default as CheckboxCell } from './CheckboxCell.svelte';
+export * from './InputCell.svelte';
+export { default as InputCell } from './InputCell.svelte';
+export * from './NumberInputCell.svelte';
+export { default as NumberInputCell } from './NumberInputCell.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/common.d.ts

@@ -0,0 +1,136 @@
+/**
+ * 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 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;
+/**
+ * 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 {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.
+  */
+export interface ColumnConfig {
+    id?: string;
+    key?: string;
+    title?: string;
+    cellRenderer?: CellRenderer;
+    viewComponent?: ConstructorOfATypedSvelteComponent;
+    viewComponentConfig?: any;
+    focusComponent?: ConstructorOfATypedSvelteComponent;
+    focusComponentConfig?: any;
+    tdClassAppend?: string;
+    tdClassOverride?: string;
+    tdFocusedClassAppend?: string;
+    tdFocusedClassOverride?: string;
+    tdClassGetter?: DataCellClassFunction;
+    thClassAppend?: string;
+    thClassOverride?: string;
+    canFocus?: boolean;
+    canSort?: boolean;
+    sortFunction?: SortFunction;
+    sortKey?: string;
+    sortAscendingIcon?: ConstructorOfATypedSvelteComponent;
+    sortDescendingIcon?: ConstructorOfATypedSvelteComponent;
+}
+/**
+ * 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 blankCellValue: CellValue;
+export declare const defaultCellRenderer: CellRenderer;

package/dist/common.js

@@ -0,0 +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 blankCellValue = {
+    dataValue: null,
+    displayValue: '',
+};
+export const defaultCellRenderer = async (column, item) => column.key
+    ? { dataValue: item[column.key], displayValue: item[column.key] || '' }
+    : blankCellValue;

package/dist/index.d.ts

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

package/dist/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@emamid/svelte-data-table",
-	"version": "0.0.12",
+	"version": "0.0.13",
 	"homepage": "https://github.com/emamid/svelte-data-table",
 	"scripts": {
 		"dev": "vite dev",