@emamid/svelte-data-table 0.0.14 → 0.0.16

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

@@ -3,4 +3,7 @@ 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.
+ * @property {ConstructorOfATypedSvelteComponent} [icon] - Icon to be displayed inside the button.
+ * @property {string} [iconClass] - CSS class of the icon to be displayed inside the button.
+ * @property {'left' | 'right'} [iconPosition] - Position of the icon, relative to the caption.
  */

package/dist/cells/ButtonCell.doc.js

@@ -3,4 +3,7 @@
  * 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.
+ * @property {ConstructorOfATypedSvelteComponent} [icon] - Icon to be displayed inside the button.
+ * @property {string} [iconClass] - CSS class of the icon to be displayed inside the button.
+ * @property {'left' | 'right'} [iconPosition] - Position of the icon, relative to the caption.
  */

package/dist/cells/ButtonCell.svelte

@@ -3,6 +3,9 @@ import { Button } from "flowbite-svelte";
 export let caption = "";
 export let column;
 export let item;
+export let icon = null;
+export let iconClass = "";
+export let iconPosition = "right";
 const dispatch = createEventDispatcher();
 const buttonClicked = () => {
   dispatch("click", {
@@ -12,6 +15,12 @@ const buttonClicked = () => {
 };
 </script>
 
-<Button {...$$props} on:click={buttonClicked}
-	>{#if caption}{caption}{/if}</Button
->
+<Button {...$$props} on:click={buttonClicked}>
+{#if icon && iconPosition === 'left'}
+<svelte:component this={icon} class={iconClass} />
+{/if}
+{#if caption}{caption}{/if}
+{#if icon && iconPosition === 'right'}
+<svelte:component this={icon} class={iconClass} />
+{/if}
+</Button>

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

@@ -6,6 +6,9 @@ declare const __propDef: {
         caption?: string | undefined;
         column: ColumnConfig;
         item: any;
+        icon?: ConstructorOfATypedSvelteComponent | null | undefined;
+        iconClass?: string | undefined;
+        iconPosition?: "left" | "right" | undefined;
     };
     events: {
         click: CustomEvent<any>;

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

@@ -0,0 +1,8 @@
+export {};
+/**
+ * Cell containing a MultiSelect ({@link https://flowbite-svelte.com/docs/forms/select#MultiSelect}) component.
+ * @typedef {object} MultiSelectCell
+ * @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/MultiSelectCell.doc.js

@@ -0,0 +1,8 @@
+"use strict";
+/**
+ * Cell containing a MultiSelect ({@link https://flowbite-svelte.com/docs/forms/select#MultiSelect}) component.
+ * @typedef {object} MultiSelectCell
+ * @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/MultiSelectCell.svelte

@@ -0,0 +1,30 @@
+<script>import { createEventDispatcher } from "svelte";
+import { MultiSelect } 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>
+	<MultiSelect
+		{...$$props}
+		items={items.map((item) => ({ value: item[valueProp], name: item[displayProp] }))}
+		bind:value={newValue}
+		autofocus
+	/>
+</TabWrapper>

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

@@ -0,0 +1,27 @@
+import { SvelteComponent } from "svelte";
+import type { ColumnConfig } from '../common.ts';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        item: any;
+        column: ColumnConfig;
+        displayProp?: string | undefined;
+        valueProp?: string | undefined;
+        items?: any[] | undefined;
+        value: any;
+    };
+    events: {
+        prevTab: CustomEvent<any>;
+        nextTab: CustomEvent<any>;
+        cellChanged: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type MultiSelectCellProps = typeof __propDef.props;
+export type MultiSelectCellEvents = typeof __propDef.events;
+export type MultiSelectCellSlots = typeof __propDef.slots;
+export default class MultiSelectCell extends SvelteComponent<MultiSelectCellProps, MultiSelectCellEvents, MultiSelectCellSlots> {
+}
+export {};

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

@@ -1,7 +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.
+ * @typedef {object} RangeCell
+ * @property {number} min - Passed through.
+ * @property {number} max - Passed through.
  */

package/dist/cells/RangeCell.doc.js

@@ -1,7 +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.
+ * @typedef {object} RangeCell
+ * @property {number} min - Passed through.
+ * @property {number} max - Passed through.
  */

package/dist/cells/RangeCell.svelte

@@ -6,7 +6,7 @@ export let item;
 export let value;
 let localValue = value;
 const dispatch = createEventDispatcher();
-const toggleChanged = () => {
+const changed = () => {
   dispatch("cellChanged", {
     column,
     item,
@@ -16,4 +16,4 @@ const toggleChanged = () => {
 };
 </script>
 
-<Range {...$$props} bind:value={localValue} on:change={toggleChanged}>{#if caption}{caption}{/if}</Range>
+<Range {...$$props} bind:value={localValue} on:change={changed}>{#if caption}{caption}{/if}</Range>

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

@@ -0,0 +1,7 @@
+export {};
+/**
+ * Cell containing a rating ({@link https://flowbite-svelte.com/docs/components/rating}) component.
+ * @typedef {object} RatingCell
+ * @property {number} [icon] - Passed through.
+ * @property {number} [total] - Passed through.
+ */

package/dist/cells/RatingCell.doc.js

@@ -0,0 +1,7 @@
+"use strict";
+/**
+ * Cell containing a rating ({@link https://flowbite-svelte.com/docs/components/rating}) component.
+ * @typedef {object} RatingCell
+ * @property {number} [icon] - Passed through.
+ * @property {number} [total] - Passed through.
+ */

package/dist/cells/RatingCell.svelte

@@ -0,0 +1,13 @@
+<script>import { Rating } from "flowbite-svelte";
+export let column;
+export let item;
+export let value;
+export let icon = null;
+let localValue = value;
+</script>
+
+{#if icon}
+<Rating {...$$props} bind:rating={localValue} {icon}/>
+{:else}
+<Rating {...$$props} bind:rating={localValue}/>
+{/if}

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

@@ -0,0 +1,22 @@
+import { SvelteComponent } from "svelte";
+import type { ComponentType } from 'svelte';
+import type { ColumnConfig } from '../common.ts';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        column: ColumnConfig;
+        item: any;
+        value: any;
+        icon?: ComponentType | null | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type RatingCellProps = typeof __propDef.props;
+export type RatingCellEvents = typeof __propDef.events;
+export type RatingCellSlots = typeof __propDef.slots;
+export default class RatingCell extends SvelteComponent<RatingCellProps, RatingCellEvents, RatingCellSlots> {
+}
+export {};

package/dist/cells/index.d.ts

@@ -7,10 +7,14 @@ export * from './CheckboxCell.svelte';
 export { default as CheckboxCell } from './CheckboxCell.svelte';
 export * from './InputCell.svelte';
 export { default as InputCell } from './InputCell.svelte';
+export * from './MultiSelectCell.svelte';
+export { default as MultiSelectCell } from './MultiSelectCell.svelte';
 export * from './NumberInputCell.svelte';
 export { default as NumberInputCell } from './NumberInputCell.svelte';
 export * from './RangeCell.svelte';
 export { default as RangeCell } from './RangeCell.svelte';
+export * from './RatingCell.svelte';
+export { default as RatingCell } from './RatingCell.svelte';
 export * from './SelectCell.svelte';
 export { default as SelectCell } from './SelectCell.svelte';
 export * from './SpinCell.svelte';

package/dist/cells/index.js

@@ -7,10 +7,14 @@ export * from './CheckboxCell.svelte';
 export { default as CheckboxCell } from './CheckboxCell.svelte';
 export * from './InputCell.svelte';
 export { default as InputCell } from './InputCell.svelte';
+export * from './MultiSelectCell.svelte';
+export { default as MultiSelectCell } from './MultiSelectCell.svelte';
 export * from './NumberInputCell.svelte';
 export { default as NumberInputCell } from './NumberInputCell.svelte';
 export * from './RangeCell.svelte';
 export { default as RangeCell } from './RangeCell.svelte';
+export * from './RatingCell.svelte';
+export { default as RatingCell } from './RatingCell.svelte';
 export * from './SelectCell.svelte';
 export { default as SelectCell } from './SelectCell.svelte';
 export * from './SpinCell.svelte';

package/package.json

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