@bexis2/bexis2-core-ui 0.3.1 → 0.3.3

package/README.md

@@ -1,9 +1,22 @@
 # bexis-core-ui
 
+## 0.3.3
+
+- Table
+  - `rowHeight (number)`: fixed height for rows in pixels. (if combined with resizability, acts as minimum height)
+  - `exportability (boolean)`: if toggled true, lets user to export the current state of the table as CSV.
+  - Optimized styles for dark mode.
+  - Bug fix related to empty tables.
+  - Migrated to new TableOfContents (Beta) on documentation page.
+- LightSwitch for toggling dark mode on documentation pages.
+- Optimized surface colors in dark mode.
+
 ## 0.3.1
+
 - add bexis2theme
-  
+
 ## 0.3.0
+
 - update skeleton ui -> 2.5.0
 
 ## 0.2.32

package/dist/TableView.svelte

@@ -1 +1 @@
-<h1>table</h1>
+<h1>table</h1>

package/dist/components/File/FileIcon.svelte

@@ -1,45 +1,45 @@
-<script>
-	import Fa from 'svelte-fa';
-	import { faFileAudio } from '@fortawesome/free-regular-svg-icons';
-	import { faFileVideo } from '@fortawesome/free-regular-svg-icons';
-	import { faFileWord } from '@fortawesome/free-regular-svg-icons';
-	import { faFilePdf } from '@fortawesome/free-regular-svg-icons';
-	import { faFileExcel } from '@fortawesome/free-regular-svg-icons';
-	import { faFileAlt } from '@fortawesome/free-regular-svg-icons';
-	import { faFileImage } from '@fortawesome/free-regular-svg-icons';
-	import { faFileArchive } from '@fortawesome/free-regular-svg-icons';
-
-	export let type = '';
-</script>
-
-{#if type.includes('excel') || type.includes('spreadsheetml')}
-	<Fa icon={faFileExcel} />
-{/if}
-
-{#if type.includes('text')}
-	<Fa icon={faFileAlt} />
-{/if}
-
-{#if type.includes('image')}
-	<Fa icon={faFileImage} />
-{/if}
-
-{#if type.includes('audio')}
-	<Fa icon={faFileAudio} />
-{/if}
-
-{#if type.includes('video')}
-	<Fa icon={faFileVideo} />
-{/if}
-
-{#if type.includes('word')}
-	<Fa icon={faFileWord} />
-{/if}
-
-{#if type.includes('pdf')}
-	<Fa icon={faFilePdf} />
-{/if}
-
-{#if type.includes('zip')}
-	<Fa icon={faFileArchive} />
-{/if}
+<script>
+	import Fa from 'svelte-fa';
+	import { faFileAudio } from '@fortawesome/free-regular-svg-icons';
+	import { faFileVideo } from '@fortawesome/free-regular-svg-icons';
+	import { faFileWord } from '@fortawesome/free-regular-svg-icons';
+	import { faFilePdf } from '@fortawesome/free-regular-svg-icons';
+	import { faFileExcel } from '@fortawesome/free-regular-svg-icons';
+	import { faFileAlt } from '@fortawesome/free-regular-svg-icons';
+	import { faFileImage } from '@fortawesome/free-regular-svg-icons';
+	import { faFileArchive } from '@fortawesome/free-regular-svg-icons';
+
+	export let type = '';
+</script>
+
+{#if type.includes('excel') || type.includes('spreadsheetml')}
+	<Fa icon={faFileExcel} />
+{/if}
+
+{#if type.includes('text')}
+	<Fa icon={faFileAlt} />
+{/if}
+
+{#if type.includes('image')}
+	<Fa icon={faFileImage} />
+{/if}
+
+{#if type.includes('audio')}
+	<Fa icon={faFileAudio} />
+{/if}
+
+{#if type.includes('video')}
+	<Fa icon={faFileVideo} />
+{/if}
+
+{#if type.includes('word')}
+	<Fa icon={faFileWord} />
+{/if}
+
+{#if type.includes('pdf')}
+	<Fa icon={faFilePdf} />
+{/if}
+
+{#if type.includes('zip')}
+	<Fa icon={faFileArchive} />
+{/if}

package/dist/components/File/FileInfo.svelte

@@ -1,13 +1,13 @@
-<script>
-	import FileIcon from './FileIcon.svelte';
-
-	export let name = '';
-	export let type = '';
-	// export let description;
-	export let size = '';
-</script>
-
-<div style="font-size:{size}">
-	<FileIcon {type} />
-	{name}
-</div>
+<script>
+	import FileIcon from './FileIcon.svelte';
+
+	export let name = '';
+	export let type = '';
+	// export let description;
+	export let size = '';
+</script>
+
+<div style="font-size:{size}">
+	<FileIcon {type} />
+	{name}
+</div>

package/dist/components/ListView.svelte

@@ -1,6 +1,6 @@
 <script>let result = { name: "david" };
-</script>
-
-<h1>MyList</h1>
-{result.name}
-<b>from bexis-lib</b>
+</script>
+
+<h1>MyList</h1>
+{result.name}
+<b>from bexis-lib</b>

package/dist/components/Table/Table.svelte

@@ -5,7 +5,8 @@ import {
   addPagination,
   addExpandedRows,
   addColumnFilters,
-  addTableFilter
+  addTableFilter,
+  addDataExport
 } from "svelte-headless-table/plugins";
 import { computePosition, autoUpdate, offset, shift, flip, arrow } from "@floating-ui/dom";
 import { SlideToggle, storePopup } from "@skeletonlabs/skeleton";
@@ -16,15 +17,29 @@ import { columnFilter, searchFilter } from "./filter";
 export let config;
 let {
   id: tableId,
+  // Unique table ID
   data,
+  // Data store
   columns,
+  // Column configuration
   resizable = "none",
+  // Resizability config
   height = null,
+  // Table height
+  rowHeight = null,
+  // Row height
   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
   pageSizes = [5, 10, 15, 20],
-  fitToScreen = true
+  // 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
 } = config;
 const dispatch = createEventDispatcher();
 const actionDispatcher = (obj) => dispatch("action", obj);
@@ -35,7 +50,8 @@ const table = createTable(data, {
   }),
   sort: addSortBy({ disableMultiSort: true }),
   page: addPagination({ initialPageSize: defaultPageSize }),
-  expand: addExpandedRows()
+  expand: addExpandedRows(),
+  export: addDataExport({ format: "csv" })
 });
 const allCols = {};
 $data.forEach((item) => {
@@ -58,20 +74,29 @@ const tableColumns = [
     if (columns !== void 0 && key in columns) {
       const {
         header,
+        // Custom header to display
         colFilterFn,
+        // Custom column filter function
         colFilterComponent,
+        // Custom column filter component
         instructions,
+        // Custom instructions for the column cells (sorting, filtering, searching, rendering)
         disableFiltering = false,
+        // Whether to disable filtering for the column
         disableSorting = false
+        // Whether to disable sorting for the column
       } = columns[key];
       const { toSortableValueFn, toFilterableValueFn, toStringFn, renderComponent } = instructions ?? {};
       return table.column({
+        // If header is not provided, use the key as the header
         header: header ?? key,
         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;
         },
         plugins: {
+          // Sorting config
           sort: {
             disable: disableSorting,
             invert: true,
@@ -95,6 +120,7 @@ const tableColumns = [
             }
           } : void 0,
           tableFilter: {
+            // Search filter config
             getFilterValue: (row) => {
               return toStringFn ? toStringFn(row) : row;
             }
@@ -109,9 +135,11 @@ const tableColumns = [
           return value ? value : "";
         },
         plugins: {
+          // Sorting enabled by default
           sort: {
             invert: true
           },
+          // Filtering enabled by default
           colFilter: {
             fn: columnFilter,
             render: ({ filterValue: filterValue2, values, id }) => createRender(TableFilter, {
@@ -131,6 +159,11 @@ if (optionsComponent !== void 0) {
     table.display({
       id: "optionsColumn",
       header: "",
+      plugins: {
+        export: {
+          exclude: true
+        }
+      },
       cell: ({ row }, _) => {
         return createRender(optionsComponent, {
           row: row.isData() ? row.original : null,
@@ -143,6 +176,7 @@ if (optionsComponent !== void 0) {
 const createdTableColumns = table.createColumns(tableColumns);
 const { headerRows, pageRows, tableAttrs, tableBodyAttrs, pluginStates } = table.createViewModel(createdTableColumns);
 const { filterValue } = pluginStates.tableFilter;
+const { exportedData } = pluginStates.export;
 const minWidth = (id) => {
   if (columns && id in columns) {
     return columns[id].minWidth ?? 0;
@@ -183,10 +217,20 @@ const resetResize = () => {
     });
   }
 };
+const exportAsCsv = () => {
+  const anchor = document.createElement("a");
+  anchor.style.display = "none";
+  anchor.href = `data:text/csv;charset=utf-8,${encodeURIComponent($exportedData)}`;
+  anchor.download = `${tableId}.csv`;
+  document.body.appendChild(anchor);
+  anchor.click();
+  document.body.removeChild(anchor);
+};
 </script>
 
 <div class="grid gap-2 overflow-auto" class:w-fit={!fitToScreen} class:w-full={fitToScreen}>
 	<div class="table-container">
+		<!-- Enable the search filter if table is not empty -->
 		{#if $data.length > 0}
 			<input
 				class="input p-2 border border-primary-500"
@@ -195,123 +239,144 @@ const resetResize = () => {
 				placeholder="Search rows..."
 				id="{tableId}-search"
 			/>
-		{/if}
-
-		<div class="flex justify-between items-center py-2 w-full">
-			<div>
-				{#if toggle}
-					<SlideToggle
-						name="slider-label"
-						active="bg-primary-500"
-						size="sm"
-						checked={fitToScreen}
-						id="{tableId}-toggle"
-						on:change={() => (fitToScreen = !fitToScreen)}>Fit to screen</SlideToggle
-					>
-				{/if}
-			</div>
-			<div>
-				{#if resizable !== 'none'}
-					<button
-						type="button"
-						class="btn btn-sm variant-filled-primary rounded-full order-last"
-						on:click|preventDefault={resetResize}>Reset sizing</button
-					>
-				{/if}
+			<div class="flex justify-between items-center py-2 w-full">
+				<div>
+					<!-- Enable the fitToScreen toggle if toggle === true -->
+					{#if toggle}
+						<SlideToggle
+							name="slider-label"
+							active="bg-primary-500"
+							size="sm"
+							checked={fitToScreen}
+							id="{tableId}-toggle"
+							on:change={() => (fitToScreen = !fitToScreen)}>Fit to screen</SlideToggle
+						>
+					{/if}
+				</div>
+				<div class="flex gap-2">
+					<!-- Enable the resetResize button if resizable !== 'none' -->
+					{#if resizable !== 'none'}
+						<button
+							type="button"
+							class="btn btn-sm variant-filled-primary rounded-full order-last"
+							on:click|preventDefault={resetResize}>Reset sizing</button
+						>
+					{/if}
+					{#if exportable}
+						<button
+							type="button"
+							class="btn btn-sm variant-filled-primary rounded-full order-last"
+							on:click|preventDefault={exportAsCsv}>Export as CSV</button
+						>
+					{/if}
+				</div>
 			</div>
-		</div>
+		{/if}
 
 		<div class="overflow-auto" style="height: {height}px">
 			<table
 				{...$tableAttrs}
-				class="table table-auto table-compact bg-tertiary-500/30 overflow-clip"
+				class="table table-auto table-compact bg-tertiary-500/30 dark:bg-tertiary-900/10 overflow-clip"
 				id="{tableId}-table"
 			>
+				<!-- If table height is provided, making the top row sticky -->
 				<thead class=" {height != null ? `sticky top-0` : ''}">
-					{#each $headerRows as headerRow (headerRow.id)}
-						<Subscribe
-							rowAttrs={headerRow.attrs()}
-							let:rowAttrs
-							rowProps={headerRow.props()}
-							let:rowProps
-						>
-							<tr {...rowAttrs} class="bg-primary-300 items-stretch">
-								{#each headerRow.cells as cell (cell.id)}
-									<Subscribe attrs={cell.attrs()} props={cell.props()} let:props let:attrs>
-										<th
-											scope="col"
-											class="!p-2 overflow-auto"
-											class:resize-x={(resizable === 'columns' || resizable === 'both') &&
-												!fixedWidth(cell.id)}
-											{...attrs}
-											id="th-{tableId}-{cell.id}"
-											style={cellStyle(cell.id)}
-										>
-											<div class="flex justify-between items-center">
-												<div class="flex gap-1 whitespace-pre-wrap">
-													<span
-														class:underline={props.sort.order}
-														class:normal-case={cell.id !== cell.label}
-														class:cursor-pointer={!props.sort.disabled}
-														on:click={props.sort.toggle}
-														on:keydown={props.sort.toggle}
-													>
-														{cell.render()}
-													</span>
-													<div class="w-2">
-														{#if props.sort.order === 'asc'}
-															▾
-														{:else if props.sort.order === 'desc'}
-															▴
-														{/if}
-													</div>
-												</div>
-												{#if cell.isData()}
-													{#if props.colFilter?.render}
-														<div class="">
-															<Render of={props.colFilter.render} />
+					{#if $data.length > 0}
+						{#each $headerRows as headerRow (headerRow.id)}
+							<Subscribe
+								rowAttrs={headerRow.attrs()}
+								let:rowAttrs
+								rowProps={headerRow.props()}
+								let:rowProps
+							>
+								<tr {...rowAttrs} class="bg-primary-300 dark:bg-primary-500 items-stretch">
+									{#each headerRow.cells as cell (cell.id)}
+										<Subscribe attrs={cell.attrs()} props={cell.props()} let:props let:attrs>
+											<th
+												scope="col"
+												class="!p-2 overflow-auto"
+												class:resize-x={(resizable === 'columns' || resizable === 'both') &&
+													!fixedWidth(cell.id)}
+												{...attrs}
+												id="th-{tableId}-{cell.id}"
+												style={cellStyle(cell.id)}
+											>
+												<div class="flex justify-between items-center">
+													<div class="flex gap-1 whitespace-pre-wrap">
+														<!-- Adding sorting config and styling -->
+														<span
+															class:underline={props.sort.order}
+															class:normal-case={cell.id !== cell.label}
+															class:cursor-pointer={!props.sort.disabled}
+															on:click={props.sort.toggle}
+															on:keydown={props.sort.toggle}
+														>
+															{cell.render()}
+														</span>
+														<div class="w-2">
+															{#if props.sort.order === 'asc'}
+																▾
+															{:else if props.sort.order === 'desc'}
+																▴
+															{/if}
 														</div>
+													</div>
+													<!-- Adding column filter config -->
+													{#if cell.isData()}
+														{#if props.colFilter?.render}
+															<div class="">
+																<Render of={props.colFilter.render} />
+															</div>
+														{/if}
 													{/if}
-												{/if}
-											</div>
-										</th>
-									</Subscribe>
-								{/each}
-							</tr>
-						</Subscribe>
+												</div>
+											</th>
+										</Subscribe>
+									{/each}
+								</tr>
+							</Subscribe>
+						{/each}
 					{:else}
+						<!-- Table is empty -->
 						<p class="items-center justify-center flex w-full p-10 italic">Nothing to show here.</p>
-					{/each}
+					{/if}
 				</thead>
 
 				<tbody class="overflow-auto" {...$tableBodyAttrs}>
-					{#each $pageRows as row (row.id)}
-						<Subscribe rowAttrs={row.attrs()} let:rowAttrs>
-							<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 overflow-auto {index === 0 &&
-											(resizable === 'rows' || resizable === 'both')
-												? 'resize-y'
-												: ''}"
-											id="{tableId}-{cell.id}-{row.id}"
-										>
-											<div class="flex items-center h-max overflow-x-auto">
-												<Render of={cell.render()} />
-											</div>
-										</td>
-									</Subscribe>
-								{/each}
-							</tr>
-						</Subscribe>
-					{/each}
+					{#if $data.length > 0}
+						{#each $pageRows as row (row.id)}
+							<Subscribe rowAttrs={row.attrs()} let:rowAttrs>
+								<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 overflow-auto {index === 0 &&
+												(resizable === 'rows' || resizable === 'both')
+													? 'resize-y'
+													: ''}"
+												id="{tableId}-{cell.id}-{row.id}"
+											>
+												<!-- Adding config for initial rowHeight, if provided -->
+												<div
+													class="flex items-center"
+													style="height: {rowHeight ? `${rowHeight}px` : 'auto'};"
+												>
+													<div class="grow h-full"><Render of={cell.render()} /></div>
+												</div>
+											</td>
+										</Subscribe>
+									{/each}
+								</tr>
+							</Subscribe>
+						{/each}
+					{/if}
 				</tbody>
 			</table>
 		</div>
 	</div>
 	{#if $data.length > 0}
+		<!-- Adding pagination, if table is not empty -->
 		<TablePagination pageConfig={pluginStates.page} {pageSizes} id={tableId} />
 	{/if}
 </div>

package/dist/components/Table/TableFilter.svelte

@@ -129,6 +129,7 @@ type = isDate ? "date" : type;
 				class="btn variant-filled-primary btn-sm"
 				type="button"
 				on:click|preventDefault={() => {
+					// Set the defaults when cleared
 					firstOption = 'isequal';
 					firstValue = undefined;
 					secondOption = 'isequal';

package/dist/components/form/Checkbox.svelte

@@ -6,16 +6,16 @@ export let valid;
 export let invalid;
 export let required;
 export let feedback;
-</script>
-
-<InputContainer {label} {feedback} {required}>
-	<input
-		{id}
-		class="input variant-form-material"
-		type="checkbox"
-		class:input-success={valid}
-		class:input-error={invalid}
-		bind:checked
-		on:input
-	/>
-</InputContainer>
+</script>
+
+<InputContainer {label} {feedback} {required}>
+	<input
+		{id}
+		class="input variant-form-material"
+		type="checkbox"
+		class:input-success={valid}
+		class:input-error={invalid}
+		bind:checked
+		on:input
+	/>
+</InputContainer>

package/dist/components/form/CheckboxKvPList.svelte

@@ -8,19 +8,19 @@ export let key;
 export let help = false;
 let required = false;
 let feedback;
-</script>
-
-<InputContainer {id} label={title} {feedback} {required} {help}>
-	{#each source as item}
-		<label class="flex items-center space-x-2" for={key}>
-			<input
-				class="checkbox"
-				type="checkbox"
-				bind:group={target}
-				checked={item.key}
-				value={item.key}
-			/>
-			<p>{item.value}</p>
-		</label>
-	{/each}
-</InputContainer>
+</script>
+
+<InputContainer {id} label={title} {feedback} {required} {help}>
+	{#each source as item}
+		<label class="flex items-center space-x-2" for={key}>
+			<input
+				class="checkbox"
+				type="checkbox"
+				bind:group={target}
+				checked={item.key}
+				value={item.key}
+			/>
+			<p>{item.value}</p>
+		</label>
+	{/each}
+</InputContainer>

package/dist/components/form/CheckboxList.svelte

@@ -6,13 +6,13 @@ export let description = "";
 export let key;
 let required = false;
 let feedback;
-</script>
-
-<InputContainer label={title} {feedback} {required}>
-	{#each source as item}
-		<label class="flex items-center space-x-2" for={key}>
-			<input class="checkbox" type="checkbox" bind:group={target} value={item} />
-			<p>{item}</p>
-		</label>
-	{/each}
-</InputContainer>
+</script>
+
+<InputContainer label={title} {feedback} {required}>
+	{#each source as item}
+		<label class="flex items-center space-x-2" for={key}>
+			<input class="checkbox" type="checkbox" bind:group={target} value={item} />
+			<p>{item}</p>
+		</label>
+	{/each}
+</InputContainer>