@bexis2/bexis2-core-ui 0.4.23 → 0.4.24

package/README.md

@@ -1,4 +1,13 @@
 # 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

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

@@ -1,4 +1,4 @@
-<script>import { afterUpdate, onDestroy, createEventDispatcher } from "svelte";
+<script>import { afterUpdate, createEventDispatcher, onDestroy } from "svelte";
 import { readable, writable } from "svelte/store";
 import Fa from "svelte-fa";
 import { faCompress, faDownload, faXmark } from "@fortawesome/free-solid-svg-icons";
@@ -21,18 +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,
-  jsonToCsv,
-  fixedWidth,
-  normalizeFilters,
-  resetResize,
-  convertServerColumns,
-  minWidth
-} from "./shared";
-import { Receive, Send } from "../../models/Models";
+import { Send } from "../../models/Models";
 export let config;
 let {
   id: tableId,
@@ -41,6 +32,8 @@ let {
   // Data store
   columns,
   // Column configuration
+  showColumnsMenu = false,
+  // Whether to display the columns menu
   resizable = "none",
   // Resizability config
   height = null,
@@ -57,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,
@@ -67,7 +62,7 @@ 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);
@@ -170,7 +165,7 @@ const tableColumns = [
                 id,
                 tableId,
                 values,
-                updateTable,
+                updateTable: updateTableWithParams,
                 pageIndex,
                 toFilterableValueFn,
                 filters,
@@ -200,7 +195,7 @@ const tableColumns = [
         header: key,
         accessor,
         cell: ({ value }) => {
-          return value ? value : "";
+          return value ?? "";
         },
         plugins: {
           // Sorting enabled by default
@@ -213,7 +208,7 @@ const tableColumns = [
                 id,
                 tableId,
                 values,
-                updateTable,
+                updateTable: updateTableWithParams,
                 pageIndex,
                 filters
               }) : createRender(TableFilter, {
@@ -251,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) {
@@ -310,64 +259,54 @@ const sortServer = (order, id) => {
     sendModel.order = [{ column: id, direction: order }];
   }
   $pageIndex = 0;
-  updateTable();
+  updateTableWithParams();
 };
-const getMaxCellHeightInRow = () => {
-  if (!tableRef || resizable === "columns" || resizable === "none") return;
-  tableRef.querySelectorAll("tbody tr").forEach((row, index) => {
-    const cells = row.querySelectorAll("td");
-    let maxHeight = optionsComponent ? 56 : 44;
-    let minHeight = optionsComponent ? 56 : 44;
-    cells.forEach((cell) => {
-      const cellHeight = cell.getBoundingClientRect().height;
-      if (cellHeight > maxHeight) {
-        maxHeight = cellHeight + 2;
-      }
-      if (cellHeight < minHeight) {
-        minHeight = cellHeight + 2;
-      }
-    });
-    rowHeights.update((rh) => {
-      const id = +row.id.split(`${tableId}-row-`)[1];
-      return {
-        ...rh,
-        [id]: {
-          max: maxHeight - 24,
-          min: Math.max(minHeight - 24, rowHeight ?? 20)
-        }
-      };
-    });
-  });
+const updateTableWithParams = async () => {
+  isFetching = true;
+  const result = await utils.updateTable(
+    $pageSize,
+    $pageIndex,
+    server,
+    $filters,
+    data,
+    serverItems,
+    columns,
+    dispatch
+  );
+  isFetching = false;
+  return result;
 };
-const getMinCellWidthInColumn = () => {
-  if (!tableRef || resizable === "rows" || resizable === "none") return;
-  if ($colWidths.length === 0) {
-    $colWidths = Array.from({ length: $headerRows[0].cells.length }, () => 100);
+const getDimensions = () => {
+  if (!tableRef) return;
+  if (resizable === "none") return;
+  else if (resizable === "columns") {
+    observeHeaderColumns();
+  } else if (resizable === "rows") {
+    observeFirstCells();
+  } else {
+    observeHeaderColumns();
+    observeFirstCells();
   }
-  colWidths.update((cw) => {
-    tableRef?.querySelectorAll("thead tr th span").forEach((cell, index) => {
-      cw[index] = cw[index] === 100 ? cell.getBoundingClientRect().width + 12 + 32 : cw[index];
-    });
-    return cw;
-  });
 };
 const resizeRowsObserver = new ResizeObserver(() => {
-  getMaxCellHeightInRow();
+  utils.getMaxCellHeightInRow(
+    tableRef,
+    resizable,
+    optionsComponent,
+    rowHeights,
+    tableId,
+    rowHeight
+  );
 });
 const resizeColumnsObserver = new ResizeObserver(() => {
-  getMinCellWidthInColumn();
+  utils.getMinCellWidthInColumn(tableRef, colWidths, $headerRows[0].cells.length, resizable);
 });
 const observeFirstCells = () => {
   if (!tableRef) return;
-  $pageRows.forEach((row) => {
-    const cell = tableRef.querySelector(`#${tableId}-row-${row.id}`);
-    if (cell) {
-      resizeRowsObserver.observe(cell);
-    }
-  });
   tableRef.querySelectorAll("tbody tr td:first-child").forEach((cell) => {
     resizeRowsObserver.observe(cell);
   });
+  return resizeRowsObserver;
 };
 const observeHeaderColumns = () => {
   if (!tableRef) return;
@@ -385,23 +324,11 @@ afterUpdate(() => {
   }
 });
 onDestroy(() => {
-  resizeRowsObserver.disconnect();
   resizeColumnsObserver.disconnect();
+  resizeRowsObserver.disconnect();
 });
-const getDimensions = () => {
-  if (!tableRef) return;
-  if (resizable === "none") return;
-  else if (resizable === "columns") {
-    observeHeaderColumns();
-  } else if (resizable === "rows") {
-    observeFirstCells();
-  } else {
-    observeHeaderColumns();
-    observeFirstCells();
-  }
-};
 $: 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>
@@ -501,20 +428,23 @@ $: $hiddenColumnIds = shownColumns.filter((col) => !col.visible).map((col) => co
 							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)}
+								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"
 							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, jsonToCsv($exportedData))}
+							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>
@@ -547,16 +477,20 @@ $: $hiddenColumnIds = shownColumns.filter((col) => !col.visible).map((col) => co
 												{...attrs}
 												style={`
 													width: ${cell.isData() ? 'auto' : '0'};
-													${cellStyle(cell.id, columns)}
+													${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: ${minWidth(cell.id, columns) ? minWidth(cell.id, columns) : $colWidths[index]}px;
+														min-width: ${
+															utils.minWidth(cell.id, columns)
+																? utils.minWidth(cell.id, columns)
+																: $colWidths[index]
+														}px;
 													`}
 												>
 													<div class="flex justify-between items-center">
@@ -615,15 +549,7 @@ $: $hiddenColumnIds = shownColumns.filter((col) => !col.visible).map((col) => co
 														? 'resize-y overflow-auto'
 														: 'block'}"
 													id="{tableId}-{cell.id}-{row.id}"
-													style={`
-														min-height: ${$rowHeights && $rowHeights[+row.id] ? `${$rowHeights[+row.id].min}px` : 'auto'};
-														max-height: ${
-															index !== 0 && $rowHeights && $rowHeights[+row.id]
-																? `${$rowHeights[+row.id].max}px`
-																: 'auto'
-														};
-														height: ${$rowHeights && $rowHeights[+row.id] ? `${$rowHeights[+row.id].min}px` : 'auto'};
-													`}
+													style={utils.getResizeStyles($rowHeights, row.id, index)}
 												>
 													<!-- Adding config for initial rowHeight, if provided -->
 													<div
@@ -636,8 +562,8 @@ $: $hiddenColumnIds = shownColumns.filter((col) => !col.visible).map((col) => co
 															class="grow overflow-auto"
 															style={cell.isData()
 																? `width: ${
-																		minWidth(cell.id, columns)
-																			? minWidth(cell.id, columns)
+																		utils.minWidth(cell.id, columns)
+																			? utils.minWidth(cell.id, columns)
 																			: $colWidths[index]
 																  }px;`
 																: 'max-width: min-content;'}
@@ -680,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;

package/dist/components/Table/utils.d.ts

@@ -0,0 +1,34 @@
+import { SvelteComponent } from 'svelte';
+import type { Writable } from 'svelte/store';
+import { Receive } from '../../models/Models';
+import type { FilterOptionsEnum } from '../../models/Enums';
+import type { Columns, Filter, ServerColumn, ServerConfig } from '../../models/Models';
+export declare const minWidth: (id: string, columns: Columns | undefined) => number;
+export declare const fixedWidth: (id: string, columns: Columns | undefined) => number;
+export declare const cellStyle: (id: string, columns: Columns | undefined) => string;
+export declare const normalizeFilters: (filters: {
+    [key: string]: { [key in FilterOptionsEnum]?: number | string | Date; };
+}) => Filter[];
+export declare const exportAsCsv: (tableId: string, exportedData: string) => void;
+export declare const jsonToCsv: (data: string) => string;
+export declare const resetResize: (headerRows: any, pageRows: any, tableId: string, columns: Columns | undefined, resizable: "none" | "rows" | "columns" | "both") => void;
+export declare const missingValuesFn: (key: number | string, missingValues: {
+    [key: string | number]: string;
+}) => string | number;
+export declare const updateTable: (pageSize: number, pageIndex: number, server: ServerConfig | undefined, filters: {
+    [key: string]: { [key in FilterOptionsEnum]?: number | string | Date; };
+}, data: Writable<any[]>, serverItems: Writable<number> | undefined, columns: Columns | undefined, dispatch: any) => Promise<Receive>;
+export declare const convertServerColumns: (serverColumns: ServerColumn[], columns: Columns | undefined) => Columns;
+export declare const getMaxCellHeightInRow: (tableRef: HTMLTableElement, resizable: "columns" | "rows" | "none" | "both", optionsComponent: typeof SvelteComponent | undefined, rowHeights: Writable<{
+    [key: number]: {
+        max: number;
+        min: number;
+    };
+}>, tableId: string, rowHeight: number | null) => void;
+export declare const getMinCellWidthInColumn: (tableRef: HTMLTableElement, colWidths: Writable<number[]>, headerRowsLength: number, resizable: "columns" | "rows" | "none" | "both") => void;
+export declare const getResizeStyles: (rowHeights: {
+    [key: number]: {
+        max: number;
+        min: number;
+    };
+}, id: string | number, index: number) => string;