@bexis2/bexis2-core-ui 0.3.2 → 0.3.4

package/README.md

@@ -1,5 +1,21 @@
 # bexis-core-ui
 
+## 0.3.4
+
+- Page
+  - add automatic scroll to top button next to help
+
+## 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

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/page/Footer.svelte

@@ -4,9 +4,7 @@ let content = "";
 $:
   content;
 onMount(async () => {
-  console.log("footer");
   content = await getFooter();
-  console.log(content);
 });
 </script>
 

package/dist/components/page/GoToTop.svelte

@@ -0,0 +1,25 @@
+<script>
+
+ import Fa from 'svelte-fa/src/fa.svelte';
+ import { faAngleUp } from '@fortawesome/free-solid-svg-icons';
+
+ export let showAtPixel = 1000;
+
+ let scrollHeight = 0;
+
+ const gotoTop = () => {
+  window.scrollTo({ top: 0, behavior: 'smooth' })
+ };
+
+ $: showGotoTop = scrollHeight > showAtPixel;
+</script>
+
+{#if showGotoTop}
+ <button
+ id="gotToTop"
+ class="chip variant-filled-warning fixed bottom-5 right-20 shadow-md"
+ on:click={gotoTop}
+ ><Fa icon={faAngleUp}/></button >
+{/if}
+
+<svelte:window bind:scrollY={scrollHeight} />

package/dist/components/page/GoToTop.svelte.d.ts

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  GoToTopProps */
+/** @typedef {typeof __propDef.events}  GoToTopEvents */
+/** @typedef {typeof __propDef.slots}  GoToTopSlots */
+export default class GoToTop extends SvelteComponentTyped<{
+    showAtPixel?: number | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type GoToTopProps = typeof __propDef.props;
+export type GoToTopEvents = typeof __propDef.events;
+export type GoToTopSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        showAtPixel?: number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/components/page/Page.svelte

@@ -12,6 +12,7 @@ import { storePopup } from "@skeletonlabs/skeleton";
 import { breadcrumbStore } from "../../stores/pageStores";
 storePopup.set({ computePosition, autoUpdate, offset, shift, flip, arrow });
 import Docs from "./Docs.svelte";
+import GoToTop from "./GoToTop.svelte";
 export let title = "";
 export let note = "";
 export let links = [];
@@ -25,8 +26,13 @@ onMount(async () => {
   breadcrumbStore.clean();
   breadcrumbStore.addItem({ label: title, link: window.location.pathname });
 });
+let app;
+function scrollToTop() {
+  app.scrollIntoView();
+}
 </script>
 
+<div class="app" bind:this={app}>
 <AppShell>
 	<!--header-->
 	<svelte:fragment slot="header">
@@ -79,6 +85,11 @@ onMount(async () => {
 		{/if}
 	</div>
 
+
+
+	<GoToTop/>
 	<HelpPopUp active={help} />
 	<Notification />
 </AppShell>
+</div>
+

package/dist/index.d.ts

@@ -22,12 +22,12 @@ import type { TableConfig, Columns, Column } from './models/Models';
 import CodeEditor from './components/CodeEditor/CodeEditor.svelte';
 import Notification from './components/page/Notification.svelte';
 import TablePlaceholder from './components/page/TablePlaceholder.svelte';
+import { bexis2theme } from './themes/theme-bexis2';
 export { Checkbox, CheckboxKVPList, CheckboxList, DateInput, DropdownKVP, MultiSelect, NumberInput, TextArea, TextInput };
 export { FileInfo, FileIcon, FileUploader };
 export { Spinner, Page, Alert, Menu, ErrorMessage };
 export { Api } from './services/Api.js';
 export { host, username, password, setApiConfig } from './stores/apiStores.js';
-export { bexis2theme } from './themes/theme-bexis2';
 export type { userType, inputType, fileUploaderType, linkType, listItemType, keyValuePairType, fileInfoType, fileReaderInfoType, asciiFileReaderInfoType } from './models/Models.js';
 export { helpStore } from './stores/pageStores';
 export type { helpStoreType, helpItemType } from './models/Models';
@@ -40,3 +40,4 @@ export { positionType, pageContentLayoutType, decimalCharacterType, orientationT
 export { Table, TableFilter, columnFilter, searchFilter };
 export { CodeEditor };
 export type { TableConfig, Columns, Column };
+export { bexis2theme };

package/dist/index.js

@@ -30,6 +30,8 @@ import CodeEditor from './components/CodeEditor/CodeEditor.svelte';
 import Notification from './components/page/Notification.svelte';
 //table placeholder
 import TablePlaceholder from './components/page/TablePlaceholder.svelte';
+// theme
+import { bexis2theme } from './themes/theme-bexis2';
 //Form
 export { Checkbox, CheckboxKVPList, CheckboxList, DateInput, DropdownKVP, MultiSelect, NumberInput, TextArea, TextInput };
 //File
@@ -39,8 +41,6 @@ export { Spinner, Page, Alert, Menu, ErrorMessage };
 //Api
 export { Api } from './services/Api.js';
 export { host, username, password, setApiConfig } from './stores/apiStores.js';
-// theme
-export { bexis2theme } from './themes/theme-bexis2';
 //help
 export { helpStore } from './stores/pageStores';
 //notification
@@ -55,3 +55,5 @@ export { positionType, pageContentLayoutType, decimalCharacterType, orientationT
 export { Table, TableFilter, columnFilter, searchFilter };
 // CodeEditor
 export { CodeEditor };
+// theme
+export { bexis2theme };

package/dist/models/Models.d.ts

@@ -87,7 +87,9 @@ export interface TableConfig<T> {
     toggle?: boolean;
     fitToScreen?: boolean;
     height?: null | number;
+    rowHeight?: number;
     columns?: Columns;
+    exportable?: boolean;
     pageSizes?: number[];
     defaultPageSize?: number;
     optionsComponent?: typeof SvelteComponent;

package/dist/themes/theme-bexis2.js

@@ -95,5 +95,18 @@ export const bexis2theme = {
         '--color-surface-700': '149 149 149',
         '--color-surface-800': '119 119 119',
         '--color-surface-900': '98 98 98' // #626262
+    },
+    properties_dark: {
+        // surface | #2e2e2e
+        '--color-surface-50': '224 224 224',
+        '--color-surface-100': '213 213 213',
+        '--color-surface-200': '203 203 203',
+        '--color-surface-300': '171 171 171',
+        '--color-surface-400': '109 109 109',
+        '--color-surface-500': '46 46 46',
+        '--color-surface-600': '41 41 41',
+        '--color-surface-700': '35 35 35',
+        '--color-surface-800': '28 28 28',
+        '--color-surface-900': '23 23 23' // #171717
     }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bexis2/bexis2-core-ui",
-  "version": "0.3.2",
+  "version": "0.3.4",
   "private": false,
   "scripts": {
     "dev": "vite dev",
@@ -74,7 +74,7 @@
     "delay": "^6.0.0",
     "dotenv": "^16.3.1",
     "eslint4b-prebuilt": "^6.7.2",
-    "highlight.js": "^11.8.0",
+    "highlight.js": "^11.9.0",
     "highlightjs-svelte": "^1.0.6",
     "svelte": "^3.54.0",
     "svelte-codemirror-editor": "^1.1.0",