@bexis2/bexis2-core-ui 0.4.5 → 0.4.6

package/README.md

@@ -1,4 +1,10 @@
 # bexis-core-ui
+## 0.4.6
+- table
+  - Adds config for enabling and disabling Search field on Table.
+  - Adds action dispatcher as prop for the renderComponent.
+  - Adds unique IDs for Search reset and submit buttons.
+
 ## 0.4.5
 - table
   - adds searching for missing values in the filters #744

package/dist/components/Table/TableContent.svelte

@@ -49,6 +49,8 @@ let {
   // Default page size - number of rows to display per page
   toggle = false,
   // Whether to display the fitToScreen toggle
+  search = true,
+  // Whether to display the search input
   pageSizes = [5, 10, 15, 20],
   // Page sizes to display in the pagination component
   fitToScreen = true,
@@ -138,7 +140,7 @@ const tableColumns = [
         accessor,
         // Render the cell with the provided component, or use the toStringFn if provided, or just use the value
         cell: ({ value, row }) => {
-          return renderComponent ? createRender(renderComponent, { value, row }) : toStringFn ? toStringFn(value) : value;
+          return renderComponent ? createRender(renderComponent, { value, row, dispatchFn: actionDispatcher }) : toStringFn ? toStringFn(value) : value;
         },
         plugins: {
           // Sorting config
@@ -271,7 +273,6 @@ const updateTable = async () => {
   }
   const response = await fetchData.json();
   if (response.columns !== void 0) {
-    console.log(response);
     columns = convertServerColumns(response.columns, columns);
     const clientCols = response.columns.reduce((acc, col) => {
       acc[col.key] = col.column;
@@ -312,7 +313,7 @@ $:
 	{#if $data.length > 0 || (columns && Object.keys(columns).length > 0)}
 		<div class="table-container">
 			<!-- Enable the search filter if table is not empty -->
-			{#if !serverSide}
+			{#if !serverSide && search}
 				<form
 					class="flex gap-2"
 					on:submit|preventDefault={() => {
@@ -329,6 +330,7 @@ $:
 							id="{tableId}-search"
 						/><button
 							type="reset"
+							id="{tableId}-searchReset"
 							class="absolute right-3 items-center"
 							on:click|preventDefault={() => {
 								searchValue = '';
@@ -339,6 +341,7 @@ $:
 					</div>
 					<button
 						type="submit"
+						id="{tableId}-searchSubmit"
 						class="btn variant-filled-primary"
 						on:click|preventDefault={() => {
 							$filterValue = searchValue;
@@ -348,7 +351,7 @@ $:
 				</form>
 			{/if}
 
-			<div class="flex justify-between items-center py-2 w-full">
+			<div class="flex justify-between items-center w-full {search && 'py-2'}">
 				<div>
 					<!-- Enable the fitToScreen toggle if toggle === true -->
 					{#if toggle}

package/dist/components/Table/TableFilter.svelte

@@ -18,7 +18,9 @@ $values.forEach((item) => {
   if (item) {
     type = typeof (toFilterableValueFn ? toFilterableValueFn(item) : item);
     if (type === "object") {
-      if (item instanceof Date) {
+      if (toFilterableValueFn && toFilterableValueFn(item) instanceof Date) {
+        isDate = true;
+      } else if (item instanceof Date) {
         isDate = true;
       }
     }

package/dist/models/Models.d.ts

@@ -85,6 +85,7 @@ export interface TableConfig<T> {
     data: Writable<T[]>;
     resizable?: 'none' | 'rows' | 'columns' | 'both';
     toggle?: boolean;
+    search?: boolean;
     fitToScreen?: boolean;
     height?: null | number;
     rowHeight?: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bexis2/bexis2-core-ui",
-  "version": "0.4.5",
+  "version": "0.4.6",
   "private": false,
   "scripts": {
     "dev": "vite dev",
@@ -25,6 +25,7 @@
     "@skeletonlabs/tw-plugin": "^0.3.1",
     "@sveltejs/adapter-auto": "^3.2.0",
     "@sveltejs/adapter-static": "^3.0.1",
+    "@sveltejs/package": "^2.3.1",
     "@tailwindcss/forms": "^0.5.7",
     "@tailwindcss/typography": "^0.5.12",
     "@types/node": "^20.12.5",
@@ -39,7 +40,6 @@
     "raw-loader": "^4.0.2",
     "svelte": "^4.2.12",
     "svelte-check": "^3.6.9",
-    "@sveltejs/package": "^2.3.1",
     "tailwindcss": "^3.4.3",
     "tslib": "^2.6.2",
     "typescript": "^5.4.4",
@@ -69,6 +69,8 @@
     "@fortawesome/fontawesome-svg-core": "^6.5.2",
     "@fortawesome/free-regular-svg-icons": "^6.5.2",
     "@fortawesome/free-solid-svg-icons": "^6.5.2",
+    "@sveltejs/kit": "^2.5.5",
+    "@sveltejs/vite-plugin-svelte": "^3.1.0",
     "axios": "^1.6.8",
     "codemirror": "^6.0.1",
     "dateformat": "^5.0.3",
@@ -83,7 +85,6 @@
     "svelte-file-dropzone": "^2.0.7",
     "svelte-headless-table": "^0.18.2",
     "svelte-select": "5.8.3",
-    "@sveltejs/kit": "^2.5.5",
     "vest": "^5.2.12"
   },
   "author": "David Schöne",

package/src/lib/components/Table/TableContent.svelte

@@ -50,6 +50,7 @@
 		optionsComponent, // Custom component to render in the last column
 		defaultPageSize = 10, // Default page size - number of rows to display per page
 		toggle = false, // Whether to display the fitToScreen toggle
+		search = true, // Whether to display the search input
 		pageSizes = [5, 10, 15, 20], // Page sizes to display in the pagination component
 		fitToScreen = true, // Whether to fit the table to the screen,
 		exportable = false, // Whether to display the export button and enable export functionality
@@ -154,7 +155,7 @@
 						// Render the cell with the provided component, or use the toStringFn if provided, or just use the value
 						cell: ({ value, row }) => {
 							return renderComponent
-								? createRender(renderComponent, { value, row })
+								? createRender(renderComponent, { value, row, dispatchFn: actionDispatcher })
 								: toStringFn
 								? toStringFn(value)
 								: value;
@@ -319,8 +320,6 @@
 
 		// Format server columns to the client columns
 		if (response.columns !== undefined) {
-			console.log(response);
-
 			columns = convertServerColumns(response.columns, columns);
 
 			const clientCols = response.columns.reduce((acc, col) => {
@@ -369,7 +368,7 @@
 	{#if $data.length > 0 || (columns && Object.keys(columns).length > 0)}
 		<div class="table-container">
 			<!-- Enable the search filter if table is not empty -->
-			{#if !serverSide}
+			{#if !serverSide && search}
 				<form
 					class="flex gap-2"
 					on:submit|preventDefault={() => {
@@ -386,6 +385,7 @@
 							id="{tableId}-search"
 						/><button
 							type="reset"
+							id="{tableId}-searchReset"
 							class="absolute right-3 items-center"
 							on:click|preventDefault={() => {
 								searchValue = '';
@@ -396,6 +396,7 @@
 					</div>
 					<button
 						type="submit"
+						id="{tableId}-searchSubmit"
 						class="btn variant-filled-primary"
 						on:click|preventDefault={() => {
 							$filterValue = searchValue;
@@ -405,7 +406,7 @@
 				</form>
 			{/if}
 
-			<div class="flex justify-between items-center py-2 w-full">
+			<div class="flex justify-between items-center w-full {search && 'py-2'}">
 				<div>
 					<!-- Enable the fitToScreen toggle if toggle === true -->
 					{#if toggle}

package/src/lib/components/Table/TableFilter.svelte

@@ -30,7 +30,9 @@
 			type = typeof (toFilterableValueFn ? toFilterableValueFn(item) : item);
 
 			if (type === 'object') {
-				if (item instanceof Date) {
+				if (toFilterableValueFn && toFilterableValueFn(item) instanceof Date) {
+					isDate = true;
+				} else if (item instanceof Date) {
 					isDate = true;
 				}
 			}

package/src/lib/models/Models.ts

@@ -110,6 +110,7 @@ export interface TableConfig<T> {
 	data: Writable<T[]>;
 	resizable?: 'none' | 'rows' | 'columns' | 'both'; // none by default
 	toggle?: boolean; // false by default
+	search?: boolean; // true by default
 	fitToScreen?: boolean; // true by default
 	height?: null | number; // null by default
 	rowHeight?: number; // auto by default