@bexis2/bexis2-core-ui 0.4.22 → 0.4.24

package/README.md

@@ -1,4 +1,20 @@
 # bexis-core-ui
+## 0.4.24
+- Table
+  - Adds option for enabling/disabling show/hide column menu in table.  
+  - Adds option to show number of items displayed instead of number of pages.
+  - Fixes an issue where "0" values return empty string.
+
+- Facets
+  - Fixes an issue with truncation of text in Facet headers and options.
+
+## 0.4.23
+- Table
+  - fix resizing issues after page size or page index changes
+  - Add Select All and Deselect All in columns menu
+  - Convert JSON to CSV and export as CSV
+  - Export as JSON to fix special characters and encoding issues
+
 ## 0.4.22
 - Facets
   - Replace column class function with more efficient solution

package/dist/components/Facets/Facets.svelte

@@ -147,10 +147,14 @@ $: selectedGroups, mapSelected("groups");
 			hyphenOpacity="opacity-0"
 			bind:checked={selectedGroups[group.name]}
 			bind:group={selectedGroups}
+			regionSymbol="shrink-0"
 		>
-			<p class="font-semibold whitespace-nowrap">
-				{group.displayName}{group.count !== undefined ? ` (${group.count})` : ''}
-			</p>
+			<div class="grid grid-flow-col gap-2">
+				<p class="font-semibold whitespace-nowrap truncate" title={group.displayName}>
+					{group.displayName}
+				</p>
+				<span>{group.count !== undefined ? ` (${group.count})` : ''}</span>
+			</div>
 
 			<svelte:fragment slot="children">
 				<!-- If more than 5 choices, show the remaining in the Modal -->
@@ -166,9 +170,9 @@ $: selectedGroups, mapSelected("groups");
 							selection
 							multiple
 						>
-							<div class="flex gap-2">
-								<p class="w-max grow truncate">
-									<span title={item.displayName}>{item.displayName}</span>
+							<div class="grid grid-flow-col gap-2">
+								<p class="truncate">
+									<span class="" title={item.displayName}>{item.displayName}</span>
 								</p>
 								<span>({item.count})</span>
 							</div>
@@ -193,9 +197,9 @@ $: selectedGroups, mapSelected("groups");
 							selection
 							multiple
 						>
-							<div class="flex gap-2">
-								<p class="w-max grow truncate">
-									<span title={item.displayName}>{item.displayName}</span>
+							<div class="grid grid-flow-col gap-2">
+								<p class="truncate">
+									<span class="" title={item.displayName}>{item.displayName}</span>
 								</p>
 								<span>({item.count})</span>
 							</div>

package/dist/components/Table/ColumnsMenu.svelte

@@ -1,32 +1,58 @@
-<script>import { popup } from "@skeletonlabs/skeleton";
+<script>import Fa from "svelte-fa";
+import { faEye } from "@fortawesome/free-solid-svg-icons";
+import { popup } from "@skeletonlabs/skeleton";
 export let columns = [];
 export let tableId;
 const popupCombobox = {
   event: "click",
   target: `${tableId}-columns-menu`,
-  placement: "bottom"
+  placement: "bottom",
+  closeQuery: ""
+};
+const selectAll = () => {
+  columns = columns.map((column) => ({ ...column, visible: true }));
+};
+const deselectAll = () => {
+  columns = columns.map((column) => ({ ...column, visible: false }));
+  columns[0].visible = true;
 };
 </script>
 
 <button
 	type="button"
-	title="Hide or show columns"
-	class="btn btn-sm variant-filled-primary rounded-full order-last"
+	class="btn btn-sm variant-filled-primary rounded-full order-last gap-2"
 	aria-label="Open menu to hide/show columns"
-	use:popup={popupCombobox}>Columns</button
+	use:popup={popupCombobox}><Fa icon={faEye} /> Columns</button
 >
-
 <div
-	class="bg-white dark:bg-surface-500 p-4 rounded-md shadow-md z-10"
+	class="bg-white dark:bg-surface-500 p-4 px-5 rounded-md shadow-md z-10 border border-primary-500"
 	data-popup="{tableId}-columns-menu"
 >
+	<div class="flex items-center gap-4 pb-5 grow justify-between">
+		<button
+			on:click|preventDefault={selectAll}
+			type="button"
+			class="btn p-0 text-sm grow underline text-primary-600"
+		>
+			Select All
+		</button>
+		<div class="border border-r border-neutral-200 h-6" />
+		<button
+			on:click|preventDefault={deselectAll}
+			type="button"
+			class="btn p-0 text-sm grow underline text-neutral-500"
+		>
+			Deselect All
+		</button>
+	</div>
 	{#each columns as column}
 		<div class="flex gap-3 items-center">
 			<label for={column.id} class="cursor-pointer" title={column.label}></label>
 			<input
 				aria-label={`${column.visible ? 'Hide' : 'Show'} ${column.label} column`}
 				type="checkbox"
-				id = {column.id}
+				class="checkbox"
+				id={column.id}
 				bind:checked={column.visible}
 				title={`${column.visible ? 'Hide' : 'Show'} ${column.label} column`}
 				disabled={columns.filter((c) => c.visible).length === 1 && column.visible}
@@ -35,5 +61,5 @@ const popupCombobox = {
 		</div>
 	{/each}
 
-	<div class="arrow bg-white dark:bg-surface-500" />
+	<div class="arrow bg-white dark:bg-surface-500 border-l border-t border-primary-500" />
 </div>

package/dist/components/Table/TableContent.svelte

@@ -1,7 +1,7 @@
-<script>import { createEventDispatcher } from "svelte";
+<script>import { afterUpdate, createEventDispatcher, onDestroy } from "svelte";
 import { readable, writable } from "svelte/store";
 import Fa from "svelte-fa";
-import { faXmark } from "@fortawesome/free-solid-svg-icons";
+import { faCompress, faDownload, faXmark } from "@fortawesome/free-solid-svg-icons";
 import { createTable, Subscribe, Render, createRender } from "svelte-headless-table";
 import {
   addSortBy,
@@ -21,16 +21,9 @@ import TableFilterServer from "./TableFilterServer.svelte";
 import TablePagination from "./TablePagination.svelte";
 import TablePaginationServer from "./TablePaginationServer.svelte";
 import ColumnsMenu from "./ColumnsMenu.svelte";
+import * as utils from "./utils";
 import { columnFilter, searchFilter } from "./filter";
-import {
-  cellStyle,
-  exportAsCsv,
-  fixedWidth,
-  normalizeFilters,
-  resetResize,
-  convertServerColumns
-} from "./shared";
-import { Receive, Send } from "../../models/Models";
+import { Send } from "../../models/Models";
 export let config;
 let {
   id: tableId,
@@ -39,6 +32,8 @@ let {
   // Data store
   columns,
   // Column configuration
+  showColumnsMenu = false,
+  // Whether to display the columns menu
   resizable = "none",
   // Resizability config
   height = null,
@@ -55,6 +50,8 @@ let {
   // Whether to display the search input
   pageSizes = [5, 10, 20, 50, 100],
   // Page sizes to display in the pagination component
+  pageIndexStringType = "pages",
+  // pages by default
   fitToScreen = true,
   // Whether to fit the table to the screen,
   exportable = false,
@@ -63,11 +60,14 @@ let {
 } = config;
 let searchValue = "";
 let isFetching = false;
+let tableRef;
 const serverSide = server !== void 0;
-const { baseUrl, entityId, versionId, sendModel = new Send() } = server ?? {};
+const { sendModel = new Send() } = server ?? {};
 const filters = writable({});
 const dispatch = createEventDispatcher();
 const actionDispatcher = (obj) => dispatch("action", obj);
+const rowHeights = writable({});
+const colWidths = writable([]);
 const serverItems = serverSide ? writable(0) : void 0;
 const serverItemCount = serverSide ? readable(0, (set) => {
   serverItems.subscribe((val) => set(val));
@@ -89,7 +89,7 @@ const table = createTable(data, {
     serverItemCount
   }),
   expand: addExpandedRows(),
-  export: addDataExport({ format: "csv" })
+  export: addDataExport({ format: "json" })
 });
 const allCols = {};
 $data.forEach((item) => {
@@ -165,7 +165,7 @@ const tableColumns = [
                 id,
                 tableId,
                 values,
-                updateTable,
+                updateTable: updateTableWithParams,
                 pageIndex,
                 toFilterableValueFn,
                 filters,
@@ -195,7 +195,7 @@ const tableColumns = [
         header: key,
         accessor,
         cell: ({ value }) => {
-          return value ? value : "";
+          return value ?? "";
         },
         plugins: {
           // Sorting enabled by default
@@ -208,7 +208,7 @@ const tableColumns = [
                 id,
                 tableId,
                 values,
-                updateTable,
+                updateTable: updateTableWithParams,
                 pageIndex,
                 filters
               }) : createRender(TableFilter, {
@@ -246,57 +246,11 @@ if (optionsComponent !== void 0) {
   );
 }
 const createdTableColumns = table.createColumns(tableColumns);
-const { headerRows, pageRows, tableAttrs, tableBodyAttrs, pluginStates } = table.createViewModel(createdTableColumns);
+const { headerRows, pageRows, tableAttrs, tableBodyAttrs, pluginStates, rows } = table.createViewModel(createdTableColumns);
 const { filterValue } = pluginStates.tableFilter;
 const { exportedData } = pluginStates.export;
 const { pageIndex, pageSize } = pluginStates.page;
 const { hiddenColumnIds } = pluginStates.hideColumns;
-const updateTable = async () => {
-  if (!sendModel) throw new Error("Server-side configuration is missing");
-  sendModel.limit = $pageSize;
-  sendModel.offset = $pageSize * $pageIndex;
-  sendModel.version = versionId || -1;
-  sendModel.id = entityId || -1;
-  sendModel.filter = normalizeFilters($filters);
-  let fetchData;
-  try {
-    isFetching = true;
-    fetchData = await fetch(baseUrl || "", {
-      headers: {
-        "Content-Type": "application/json"
-      },
-      method: "POST",
-      body: JSON.stringify(sendModel)
-    });
-  } catch (error) {
-    throw new Error(`Network error: ${error.message}`);
-  } finally {
-    isFetching = false;
-  }
-  if (!fetchData.ok) {
-    throw new Error("Failed to fetch data");
-  }
-  const response = await fetchData.json();
-  if (response.columns !== void 0) {
-    columns = convertServerColumns(response.columns, columns);
-    const clientCols = response.columns.reduce((acc, col) => {
-      acc[col.key] = col.column;
-      return acc;
-    }, {});
-    const tmpArr = [];
-    response.data.forEach((row, index) => {
-      const tmp = {};
-      Object.keys(row).forEach((key) => {
-        tmp[clientCols[key]] = row[key];
-      });
-      tmpArr.push(tmp);
-    });
-    dispatch("fetch", columns);
-    $data = tmpArr;
-  }
-  $serverItems = response.count;
-  return response;
-};
 const sortServer = (order, id) => {
   if (!sendModel) throw new Error("Server-side configuration is missing");
   if (order === void 0) {
@@ -305,10 +259,76 @@ const sortServer = (order, id) => {
     sendModel.order = [{ column: id, direction: order }];
   }
   $pageIndex = 0;
-  updateTable();
+  updateTableWithParams();
 };
+const updateTableWithParams = async () => {
+  isFetching = true;
+  const result = await utils.updateTable(
+    $pageSize,
+    $pageIndex,
+    server,
+    $filters,
+    data,
+    serverItems,
+    columns,
+    dispatch
+  );
+  isFetching = false;
+  return result;
+};
+const getDimensions = () => {
+  if (!tableRef) return;
+  if (resizable === "none") return;
+  else if (resizable === "columns") {
+    observeHeaderColumns();
+  } else if (resizable === "rows") {
+    observeFirstCells();
+  } else {
+    observeHeaderColumns();
+    observeFirstCells();
+  }
+};
+const resizeRowsObserver = new ResizeObserver(() => {
+  utils.getMaxCellHeightInRow(
+    tableRef,
+    resizable,
+    optionsComponent,
+    rowHeights,
+    tableId,
+    rowHeight
+  );
+});
+const resizeColumnsObserver = new ResizeObserver(() => {
+  utils.getMinCellWidthInColumn(tableRef, colWidths, $headerRows[0].cells.length, resizable);
+});
+const observeFirstCells = () => {
+  if (!tableRef) return;
+  tableRef.querySelectorAll("tbody tr td:first-child").forEach((cell) => {
+    resizeRowsObserver.observe(cell);
+  });
+  return resizeRowsObserver;
+};
+const observeHeaderColumns = () => {
+  if (!tableRef) return;
+  tableRef.querySelectorAll("thead tr th").forEach((cell) => {
+    resizeColumnsObserver.observe(cell);
+  });
+};
+afterUpdate(() => {
+  if (resizable !== "rows" && resizable !== "both") {
+    return;
+  }
+  const e = tableRef?.querySelector(`#${tableId}-row-${$pageRows[0].id}`);
+  if (e) {
+    getDimensions();
+  }
+});
+onDestroy(() => {
+  resizeColumnsObserver.disconnect();
+  resizeRowsObserver.disconnect();
+});
 $: sortKeys = pluginStates.sort.sortKeys;
-$: serverSide && updateTable();
+$: serverSide && updateTableWithParams();
 $: serverSide && sortServer($sortKeys[0]?.order, $sortKeys[0]?.id);
 $: $hiddenColumnIds = shownColumns.filter((col) => !col.visible).map((col) => col.id);
 </script>
@@ -377,7 +397,8 @@ $: $hiddenColumnIds = shownColumns.filter((col) => !col.visible).map((col) => co
 			{/if}
 
 			<div
-				class="flex justify-between items-center w-full {search && 'py-2'} {!search &&
+				class="flex justify-between overflow-x-auto items-center w-full {search &&
+					'py-2'} {!search &&
 					(shownColumns.length > 0 || toggle || resizable !== 'none' || exportable) &&
 					'pb-2'}"
 			>
@@ -404,25 +425,26 @@ $: $hiddenColumnIds = shownColumns.filter((col) => !col.visible).map((col) => co
 					{#if resizable !== 'none'}
 						<button
 							type="button"
-							title="Reset column and row sizing"
-							class="btn btn-sm variant-filled-primary rounded-full order-last"
+							class="btn btn-sm variant-filled-primary rounded-full order-last flex gap-2 items-center"
 							aria-label="Reset sizing of columns and rows"
 							on:click|preventDefault={() =>
-								resetResize($headerRows, $pageRows, tableId, columns, resizable)}
-							>Reset sizing</button
+								utils.resetResize($headerRows, $pageRows, tableId, columns, resizable)}
+							><Fa icon={faCompress} /> Reset sizing</button
 						>
 					{/if}
+					<!-- Enable export as CSV button if exportable === true -->
 					{#if exportable}
 						<button
 							type="button"
-							title="Export table data as CSV"
-							class="btn btn-sm variant-filled-primary rounded-full order-last"
+							class="btn btn-sm variant-filled-primary rounded-full order-last flex items-center gap-2"
 							aria-label="Export table data as CSV"
-							on:click|preventDefault={() => exportAsCsv(tableId, $exportedData)}
-							>Export as CSV</button
+							on:click|preventDefault={() =>
+								utils.exportAsCsv(tableId, utils.jsonToCsv($exportedData))}
+							><Fa icon={faDownload} /> Export as CSV</button
 						>
 					{/if}
-					{#if shownColumns.length > 0}
+					<!-- Enable show/hide columns menu if showColumnsMenu === true -->
+					{#if showColumnsMenu && shownColumns.length > 0}
 						<ColumnsMenu bind:columns={shownColumns} {tableId} />
 					{/if}
 				</div>
@@ -430,6 +452,7 @@ $: $hiddenColumnIds = shownColumns.filter((col) => !col.visible).map((col) => co
 
 			<div class="overflow-auto" style="height: {height}px">
 				<table
+					bind:this={tableRef}
 					{...$tableAttrs}
 					class="table table-auto table-compact bg-tertiary-500/30 dark:bg-tertiary-900/10 overflow-clip"
 					id="{tableId}-table"
@@ -446,14 +469,29 @@ $: $hiddenColumnIds = shownColumns.filter((col) => !col.visible).map((col) => co
 								let:rowProps
 							>
 								<tr {...rowAttrs} class="bg-primary-300 dark:bg-primary-800">
-									{#each headerRow.cells as cell (cell.id)}
+									{#each headerRow.cells as cell, index (cell.id)}
 										<Subscribe attrs={cell.attrs()} props={cell.props()} let:props let:attrs>
-											<th scope="col" class="!p-2" {...attrs} style={cellStyle(cell.id, columns)}>
+											<th
+												scope="col"
+												class="!p-2"
+												{...attrs}
+												style={`
+													width: ${cell.isData() ? 'auto' : '0'};
+													${utils.cellStyle(cell.id, columns)}
+												`}
+											>
 												<div
 													class="overflow-auto"
 													class:resize-x={(resizable === 'columns' || resizable === 'both') &&
-														!fixedWidth(cell.id, columns)}
+														!utils.fixedWidth(cell.id, columns)}
 													id="th-{tableId}-{cell.id}"
+													style={`
+														min-width: ${
+															utils.minWidth(cell.id, columns)
+																? utils.minWidth(cell.id, columns)
+																: $colWidths[index]
+														}px;
+													`}
 												>
 													<div class="flex justify-between items-center">
 														<div class="flex gap-1 whitespace-pre-wrap">
@@ -504,20 +542,34 @@ $: $hiddenColumnIds = shownColumns.filter((col) => !col.visible).map((col) => co
 								<tr {...rowAttrs} id="{tableId}-row-{row.id}" class="">
 									{#each row.cells as cell, index (cell?.id)}
 										<Subscribe attrs={cell.attrs()} let:attrs>
-											<td {...attrs} class="!p-2">
+											<td {...attrs} class="">
 												<div
-													class=" overflow-auto h-max {index === 0 &&
+													class=" h-full {index === 0 &&
 													(resizable === 'rows' || resizable === 'both')
-														? 'resize-y'
-														: ''}"
+														? 'resize-y overflow-auto'
+														: 'block'}"
 													id="{tableId}-{cell.id}-{row.id}"
+													style={utils.getResizeStyles($rowHeights, row.id, index)}
 												>
 													<!-- Adding config for initial rowHeight, if provided -->
 													<div
-														class="flex items-center overflow-auto"
-														style="height: {rowHeight ? `${rowHeight}px` : 'auto'};"
+														class="flex items-start overflow-auto"
+														style={`
+															max-height: ${$rowHeights && $rowHeights[+row.id] ? `${$rowHeights[+row.id].max}px` : 'auto'};
+														`}
 													>
-														<div class="grow h-full"><Render of={cell.render()} /></div>
+														<div
+															class="grow overflow-auto"
+															style={cell.isData()
+																? `width: ${
+																		utils.minWidth(cell.id, columns)
+																			? utils.minWidth(cell.id, columns)
+																			: $colWidths[index]
+																  }px;`
+																: 'max-width: min-content;'}
+														>
+															<Render of={cell.render()} />
+														</div>
 													</div>
 												</div>
 											</td>
@@ -554,12 +606,19 @@ $: $hiddenColumnIds = shownColumns.filter((col) => !col.visible).map((col) => co
 				{pageIndex}
 				{pageSize}
 				{serverItemCount}
-				{updateTable}
+				updateTable={updateTableWithParams}
 				{pageSizes}
+				{pageIndexStringType}
 				id={tableId}
 			/>
 		{:else}
-			<TablePagination pageConfig={pluginStates.page} {pageSizes} id={tableId} />
+			<TablePagination
+				itemCount={$rows.length}
+				pageConfig={pluginStates.page}
+				{pageSizes}
+				id={tableId}
+				{pageIndexStringType}
+			/>
 		{/if}
 	{/if}
 </div>

package/dist/components/Table/TableContent.svelte.d.ts

@@ -6,7 +6,6 @@ declare const __propDef: {
     };
     events: {
         action: CustomEvent<any>;
-        fetch: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/dist/components/Table/TablePagination.svelte

@@ -7,9 +7,12 @@ import {
   faChevronDown
 } from "@fortawesome/free-solid-svg-icons";
 import { ListBox, ListBoxItem, popup } from "@skeletonlabs/skeleton";
+export let itemCount;
 export let pageConfig;
 export let pageSizes;
+export let pageIndexStringType;
 export let id;
+let indexInformation = "";
 const { pageIndex, pageCount, pageSize, hasNextPage, hasPreviousPage } = pageConfig;
 const goToFirstPage = () => $pageIndex = 0;
 const goToLastPage = () => $pageIndex = $pageCount - 1;
@@ -32,11 +35,22 @@ const pageSizePopup = {
   placement: "bottom",
   closeQuery: ".listbox-item"
 };
+const getIndexInfomationString = () => {
+  if (pageIndexStringType === "pages") {
+    return $pageCount > 0 ? `Page ${$pageIndex + 1} of ${$pageCount}` : "No pages";
+  } else {
+    return itemCount === 0 ? "No items" : `Displaying items ${$pageIndex * $pageSize + 1} - ${Math.min(
+      ($pageIndex + 1) * $pageSize,
+      itemCount
+    )} of ${Math.min($pageCount * $pageSize, itemCount)}`;
+  }
+};
 $: goToFirstPageDisabled = !$pageIndex;
 $: goToLastPageDisabled = $pageIndex == $pageCount - 1;
 $: goToNextPageDisabled = !$hasNextPage;
 $: goToPreviousPageDisabled = !$hasPreviousPage;
 $: $pageSize = pageSizeDropdownValue;
+$: $pageCount, $pageIndex, $pageSize, indexInformation = getIndexInfomationString();
 </script>
 
 <div class="flex justify-between w-full items-stretch gap-10">
@@ -114,12 +128,6 @@ $: $pageSize = pageSizeDropdownValue;
 		>
 	</div>
 	<div class="flex justify-end items-center">
-		<span class="text-sm text-gray-500">
-			{#if $pageCount > 0}
-				Page {$pageIndex + 1} of {$pageCount}
-			{:else}
-				No pages
-			{/if}
-		</span>
+		<span class="text-sm text-gray-500">{indexInformation}</span>
 	</div>
 </div>

package/dist/components/Table/TablePagination.svelte.d.ts

@@ -1,8 +1,10 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
+        itemCount: any;
         pageConfig: any;
         pageSizes: any;
+        pageIndexStringType: any;
         id: any;
     };
     events: {

package/dist/components/Table/TablePaginationServer.svelte

@@ -8,6 +8,7 @@ import {
 export let id;
 export let pageIndex;
 export let pageSize;
+export let pageIndexStringType;
 export let pageSizes;
 export let serverItemCount;
 export let updateTable;
@@ -15,6 +16,7 @@ let goToFirstPageDisabled = true;
 let goToLastPageDisabled = true;
 let goToNextPageDisabled = true;
 let goToPreviousPageDisabled = true;
+let indexInformation = "";
 const handleChange = (e) => {
   const value = e.target.value;
   if (value > pageCount) {
@@ -45,12 +47,20 @@ const goTo = (dst) => {
   }
   updateTable();
 };
+const getIndexInfomationString = () => {
+  if (pageIndexStringType === "pages") {
+    return pageCount > 0 ? `Page ${$pageIndex + 1} of ${pageCount}` : "No pages";
+  } else {
+    return `Showing ${$pageIndex * $pageSize + 1} - ${($pageIndex + 1) * $pageSize} of ${pageCount * $pageSize} items`;
+  }
+};
 $: pageCount = Math.ceil($serverItemCount / $pageSize);
 $: goToFirstPageDisabled = !$pageIndex;
 $: goToLastPageDisabled = $pageIndex == pageCount - 1;
 $: goToNextPageDisabled = $pageIndex == pageCount - 1;
 $: goToPreviousPageDisabled = !$pageIndex;
 $: $pageSize && updateTable();
+$: pageCount, $pageIndex, $pageSize, indexInformation = getIndexInfomationString();
 updateTable();
 </script>
 
@@ -113,15 +123,7 @@ updateTable();
 	</div>
 	<div class="flex justify-end items-center">
 		<span class="text-sm text-gray-500">
-			{#if pageCount > 0}
-				{#if pageCount == 1}
-					1 page
-				{:else}
-					{pageCount} pages
-				{/if}
-			{:else}
-				No pages
-			{/if}
+			{indexInformation}
 		</span>
 	</div>
 </div>

package/dist/components/Table/TablePaginationServer.svelte.d.ts

@@ -4,6 +4,7 @@ declare const __propDef: {
         id: any;
         pageIndex: any;
         pageSize: any;
+        pageIndexStringType: any;
         pageSizes: any;
         serverItemCount: any;
         updateTable: any;