@emamid/svelte-data-table 0.0.12 → 0.0.14

package/dist/cells/Actions.js

@@ -0,0 +1,101 @@
+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

@@ -0,0 +1,31 @@
+<script context="module"></script>
+
+<script>import { createEventDispatcher } from "svelte";
+import { Button } from "flowbite-svelte";
+export let buttonClass = "border-0 p-1";
+export let buttonColor = "light";
+export let iconClass = "w-4 h-4";
+export let column;
+export let item;
+export let actions = [];
+const dispatch = createEventDispatcher();
+const actionClicked = (action) => {
+  dispatch("action", {
+    action: action.name,
+    column,
+    item
+  });
+};
+</script>
+
+{#each actions as action}
+	<Button
+		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} />
+		{#if action.caption}{action.caption}{/if}
+	</Button>
+{/each}

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

@@ -0,0 +1,35 @@
+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;
+    caption?: string;
+    name: string;
+    icon: ConstructorOfATypedSvelteComponent;
+    iconClass?: string;
+    isDisabled?: ActionDisablementFunction;
+}
+declare const __propDef: {
+    props: {
+        buttonClass?: string | undefined;
+        buttonColor?: ButtonColor;
+        iconClass?: string | undefined;
+        column: ColumnConfig;
+        item: any;
+        actions?: Action[] | undefined;
+    };
+    events: {
+        action: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ActionsCellProps = typeof __propDef.props;
+export type ActionsCellEvents = typeof __propDef.events;
+export type ActionsCellSlots = typeof __propDef.slots;
+export default class ActionsCell extends SvelteComponent<ActionsCellProps, ActionsCellEvents, ActionsCellSlots> {
+}
+export {};

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

@@ -0,0 +1,17 @@
+<script>import { createEventDispatcher } from "svelte";
+import { Button } from "flowbite-svelte";
+export let caption = "";
+export let column;
+export let item;
+const dispatch = createEventDispatcher();
+const buttonClicked = () => {
+  dispatch("click", {
+    column,
+    item
+  });
+};
+</script>
+
+<Button {...$$props} on:click={buttonClicked}
+	>{#if caption}{caption}{/if}</Button
+>

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

@@ -0,0 +1,22 @@
+import { SvelteComponent } from "svelte";
+import type { ColumnConfig } from '../common.js';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        caption?: string | undefined;
+        column: ColumnConfig;
+        item: any;
+    };
+    events: {
+        click: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ButtonCellProps = typeof __propDef.props;
+export type ButtonCellEvents = typeof __propDef.events;
+export type ButtonCellSlots = typeof __propDef.slots;
+export default class ButtonCell extends SvelteComponent<ButtonCellProps, ButtonCellEvents, ButtonCellSlots> {
+}
+export {};

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

@@ -0,0 +1,21 @@
+<script>import { createEventDispatcher } from "svelte";
+import { Checkbox } 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>
+
+<Checkbox {...$$props} bind:checked={localValue} on:change={toggleChanged}
+	>{#if caption}{caption}{/if}</Checkbox
+>

package/dist/cells/CheckboxCell.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 CheckboxCellProps = typeof __propDef.props;
+export type CheckboxCellEvents = typeof __propDef.events;
+export type CheckboxCellSlots = typeof __propDef.slots;
+export default class CheckboxCell extends SvelteComponent<CheckboxCellProps, CheckboxCellEvents, CheckboxCellSlots> {
+}
+export {};

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

@@ -0,0 +1,55 @@
+<script>import { createEventDispatcher } from "svelte";
+import { Input } from "flowbite-svelte";
+import TabWrapper from "./TabWrapper.svelte";
+export let inputType = "text";
+export let item;
+export let column;
+export let value;
+let internalValue;
+$:
+  internalValue = value;
+const dispatch = createEventDispatcher();
+const dispatchCellChanged = () => {
+  if (value !== internalValue) {
+    dispatch("cellChanged", {
+      column,
+      item,
+      oldValue: value,
+      newValue: internalValue
+    });
+  }
+};
+const keypress = (event) => {
+  if (event.key === "Enter") {
+    dispatch("enterPressed", {
+      column,
+      item
+    });
+    dispatchCellChanged();
+  }
+};
+const prevTab = (_event) => {
+  dispatch("prevTab", {
+    column,
+    item
+  });
+  dispatchCellChanged();
+};
+const nextTab = (_event) => {
+  dispatch("nextTab", {
+    column,
+    item
+  });
+  dispatchCellChanged();
+};
+</script>
+
+<TabWrapper on:prevTab={prevTab} on:nextTab={nextTab}>
+	<Input
+		type={inputType}
+		bind:value={internalValue}
+		{...$$props}
+		on:keypress={keypress}
+		autofocus
+	/>
+</TabWrapper>

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

@@ -0,0 +1,26 @@
+import { SvelteComponent } from "svelte";
+import type { ColumnConfig } from '../common.js';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        inputType?: string | undefined;
+        item: any;
+        column: ColumnConfig;
+        value: string;
+    };
+    events: {
+        cellChanged: CustomEvent<any>;
+        enterPressed: CustomEvent<any>;
+        prevTab: CustomEvent<any>;
+        nextTab: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type InputCellProps = typeof __propDef.props;
+export type InputCellEvents = typeof __propDef.events;
+export type InputCellSlots = typeof __propDef.slots;
+export default class InputCell extends SvelteComponent<InputCellProps, InputCellEvents, InputCellSlots> {
+}
+export {};

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

@@ -0,0 +1,48 @@
+<script>import { createEventDispatcher } from "svelte";
+import { NumberInput } from "flowbite-svelte";
+import TabWrapper from "./TabWrapper.svelte";
+export let item;
+export let column;
+export let value;
+let internalValue;
+$:
+  internalValue = value;
+const dispatch = createEventDispatcher();
+const dispatchCellChanged = () => {
+  if (value !== internalValue) {
+    dispatch("cellChanged", {
+      column,
+      item,
+      oldValue: value,
+      newValue: internalValue
+    });
+  }
+};
+const keypress = async (event) => {
+  if (event.key === "Enter") {
+    dispatch("enterPressed", {
+      column,
+      item
+    });
+    dispatchCellChanged();
+  }
+};
+const prevTab = (_event) => {
+  dispatch("prevTab", {
+    column,
+    item
+  });
+  dispatchCellChanged();
+};
+const nextTab = (_event) => {
+  dispatch("nextTab", {
+    column,
+    item
+  });
+  dispatchCellChanged();
+};
+</script>
+
+<TabWrapper on:prevTab={prevTab} on:nextTab={nextTab}>
+	<NumberInput bind:value={internalValue} {...$$props} on:keypress={keypress} autofocus />
+</TabWrapper>

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

@@ -0,0 +1,25 @@
+import { SvelteComponent } from "svelte";
+import type { ColumnConfig } from '../common.js';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        item: any;
+        column: ColumnConfig;
+        value: number;
+    };
+    events: {
+        cellChanged: CustomEvent<any>;
+        enterPressed: CustomEvent<any>;
+        prevTab: CustomEvent<any>;
+        nextTab: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type NumberInputCellProps = typeof __propDef.props;
+export type NumberInputCellEvents = typeof __propDef.events;
+export type NumberInputCellSlots = typeof __propDef.slots;
+export default class NumberInputCell extends SvelteComponent<NumberInputCellProps, NumberInputCellEvents, NumberInputCellSlots> {
+}
+export {};

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

@@ -0,0 +1,7 @@
+export {};
+/**
+ * Cell containing a range ({@link https://flowbite-svelte.com/docs/forms/range}) component.
+ * @typedef {object} SpinCell
+ * @property {number} [min] - Passed through.
+ * @property {number} [max] - Passed through.
+ */

package/dist/cells/RangeCell.doc.js

@@ -0,0 +1,7 @@
+"use strict";
+/**
+ * Cell containing a range ({@link https://flowbite-svelte.com/docs/forms/range}) component.
+ * @typedef {object} SpinCell
+ * @property {number} [min] - Passed through.
+ * @property {number} [max] - Passed through.
+ */

package/dist/cells/RangeCell.svelte

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

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

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

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

@@ -0,0 +1,30 @@
+<script>import { createEventDispatcher } from "svelte";
+import { Select } from "flowbite-svelte";
+import TabWrapper from "./TabWrapper.svelte";
+export let item;
+export let column;
+export let displayProp = "name";
+export let valueProp = "id";
+export let items = [];
+export let value;
+let newValue = value;
+const dispatch = createEventDispatcher();
+$:
+  if (value !== newValue) {
+    dispatch("cellChanged", {
+      column,
+      item,
+      oldValue: value,
+      newValue
+    });
+  }
+</script>
+
+<TabWrapper {column} {item} on:prevTab on:nextTab>
+	<Select
+		{...$$props}
+		items={items.map((item) => ({ value: item[valueProp], name: item[displayProp] }))}
+		bind:value={newValue}
+		autofocus
+	/>
+</TabWrapper>