@emamid/svelte-data-table 0.0.17 → 0.0.19

package/dist/DataTable.svelte

@@ -203,6 +203,19 @@ const rowClicked = (item) => {
     item
   });
 };
+let draggedItem = null;
+const rowDragStart = (item) => {
+  draggedItem = item;
+  dispatch("rowDragStart", {
+    draggedItem
+  });
+};
+const rowDropped = (targetItem) => {
+  dispatch("rowDropped", {
+    draggedItem,
+    targetItem
+  });
+};
 </script>
 
 <Table class={tableClass} {divClass} {striped} {hoverable} {noborder} {shadow} {color} {customColor}>
@@ -222,7 +235,13 @@ const rowClicked = (item) => {
 	<TableBody {tableBodyClass}>
 		{#each sortedItems as item}
 			{@const isRowFocused = !!focusedItemKey && focusedItemKey === getItemKey(item)}
-			<TableBodyRow class={getTRClass(item, isRowFocused)} on:click={() => rowClicked(item)}>
+			<TableBodyRow
+				class={getTRClass(item, isRowFocused)}
+				draggable={true}
+				on:click={() => rowClicked(item)}
+				on:dragstart={() => rowDragStart(item)}
+				on:drop={() => rowDropped(item)}
+			>
 				{#each internalColumns as column}
 					{@const isCellFocused =
 						isRowFocused && focusedColumnKeyID && focusedColumnKeyID === getColumnID(column)}

package/dist/DataTable.svelte.d.ts

@@ -42,6 +42,8 @@ declare const __propDef: {
         cellClicked: CustomEvent<any>;
         headerClicked: CustomEvent<any>;
         rowClicked: CustomEvent<any>;
+        rowDragStart: CustomEvent<any>;
+        rowDropped: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

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

@@ -5,5 +5,5 @@ export {};
  * @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.
+ * @property {'left' | 'right'} [iconPosition] - Position of the icon, relative to the caption. Defaults to 'right'.
  */

package/dist/cells/ButtonCell.doc.js

@@ -5,5 +5,5 @@
  * @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.
+ * @property {'left' | 'right'} [iconPosition] - Position of the icon, relative to the caption. Defaults to 'right'.
  */

package/dist/cells/ButtonCell.svelte

@@ -1,21 +1,13 @@
-<script>import { createEventDispatcher } from "svelte";
-import { Button } from "flowbite-svelte";
+<script>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", {
-    column,
-    item
-  });
-};
 </script>
 
-<Button {...$$props} on:click={buttonClicked}>
+<Button>
 {#if icon && iconPosition === 'left'}
 <svelte:component this={icon} class={iconClass} />
 {/if}

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

@@ -1,8 +1,6 @@
 import { SvelteComponent } from "svelte";
-import type { ColumnConfig } from '../common.js';
 declare const __propDef: {
     props: {
-        [x: string]: any;
         caption?: string | undefined;
         column: ColumnConfig;
         item: any;
@@ -11,8 +9,6 @@ declare const __propDef: {
         iconPosition?: "left" | "right" | undefined;
     };
     events: {
-        click: CustomEvent<any>;
-    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

package/package.json

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