@bexis2/bexis2-core-ui 0.0.29 → 0.0.31

package/README.md

@@ -1,5 +1,31 @@
 # bexis-core-ui
 
+## v0.0.31
+### add
+#### components
+- Alert
+
+### updates
+#### components
+- Spinner
+  - label
+  - color
+  - position
+  
+- Table 
+  - Date filters
+  - Configuration for complex types
+  - Custom event dispatcher
+  - Updated docs.
+  - Disabling of filters
+  - Disabling of sorting
+
+### fixes:
+#### table
+- Arrow in pageSize dropdown.
+- Bug with number filter not working on zero values.
+- Table of Contents on the right sidebar.
+  
 ## v0.0.29
 
 ### add

package/dist/components/Table/Table.svelte

@@ -1,4 +1,5 @@
-<script>import { createTable, Subscribe, Render, createRender } from "svelte-headless-table";
+<script>import { createEventDispatcher } from "svelte";
+import { createTable, Subscribe, Render, createRender } from "svelte-headless-table";
 import {
   addSortBy,
   addPagination,
@@ -18,6 +19,8 @@ let {
   defaultPageSize = 10,
   pageSizes = [5, 10, 15, 20]
 } = config;
+const dispatch = createEventDispatcher();
+const actionDispatcher = (obj) => dispatch("action", obj);
 const table = createTable(data, {
   colFilter: addColumnFilters(),
   tableFilter: addTableFilter({
@@ -27,7 +30,7 @@ const table = createTable(data, {
   page: addPagination({ initialPageSize: defaultPageSize }),
   expand: addExpandedRows()
 });
-const accessors = Object.keys($data[0]);
+const accessors = $data.length > 0 ? Object.keys($data[0]) : [];
 const tableColumns = [
   ...accessors.filter((accessor) => {
     const key = accessor;
@@ -38,20 +41,47 @@ const tableColumns = [
   }).map((accessor) => {
     const key = accessor;
     if (columns !== void 0 && key in columns) {
-      const { header, colFilterFn, colFilterComponent } = columns[key];
+      const {
+        header,
+        colFilterFn,
+        colFilterComponent,
+        instructions,
+        disableFiltering = false,
+        disableSorting = false
+      } = columns[key];
+      const { toSortableValueFn, toFilterableValueFn, toStringFn } = instructions ?? {};
       return table.column({
         header: header ?? key,
         accessor,
+        cell: ({ value }) => {
+          return toStringFn ? toStringFn(value) : value;
+        },
         plugins: {
-          sort: { invert: true },
-          colFilter: {
-            fn: colFilterFn ?? columnFilter,
-            render: ({ filterValue: filterValue2, values, id }) => createRender(colFilterComponent ?? TableFilter, {
-              filterValue: filterValue2,
-              values,
-              id,
-              tableId
-            })
+          sort: {
+            disable: disableSorting,
+            invert: true,
+            getSortValue: (row) => {
+              return toSortableValueFn ? toSortableValueFn(row) : row;
+            }
+          },
+          colFilter: !disableFiltering ? {
+            fn: ({ filterValue: filterValue2, value }) => {
+              const val = toFilterableValueFn ? toFilterableValueFn(value) : value;
+              return colFilterFn ? colFilterFn({ filterValue: filterValue2, value: val }) : columnFilter({ filterValue: filterValue2, value: val });
+            },
+            render: ({ filterValue: filterValue2, values, id }) => {
+              return createRender(colFilterComponent ?? TableFilter, {
+                filterValue: filterValue2,
+                id,
+                tableId,
+                values
+              });
+            }
+          } : void 0,
+          tableFilter: {
+            getFilterValue: (row) => {
+              return toStringFn ? toStringFn(row) : row;
+            }
           }
         }
       });
@@ -60,10 +90,17 @@ const tableColumns = [
         header: key,
         accessor,
         plugins: {
-          sort: { invert: true },
+          sort: {
+            invert: true
+          },
           colFilter: {
             fn: columnFilter,
-            render: ({ filterValue: filterValue2, values, id }) => createRender(TableFilter, { filterValue: filterValue2, values, id, tableId })
+            render: ({ filterValue: filterValue2, values, id }) => createRender(TableFilter, {
+              filterValue: filterValue2,
+              id,
+              tableId,
+              values
+            })
           }
         }
       });
@@ -77,7 +114,8 @@ if (optionsComponent !== void 0) {
       header: "",
       cell: ({ row }, _) => {
         return createRender(optionsComponent, {
-          row: row.isData() ? row.original : null
+          row: row.isData() ? row.original : null,
+          dispatchFn: actionDispatcher
         });
       }
     })
@@ -86,82 +124,82 @@ if (optionsComponent !== void 0) {
 const createdTableColumns = table.createColumns(tableColumns);
 const { headerRows, pageRows, tableAttrs, tableBodyAttrs, pluginStates } = table.createViewModel(createdTableColumns);
 const { filterValue } = pluginStates.tableFilter;
-</script>
-
-<div class="grid gap-2">
-	<div class="table-container">
-		<input
-			class="input p-2 mb-2 border border-primary-500"
-			type="text"
-			bind:value={$filterValue}
-			placeholder="Search rows..."
-		/>
-		<table {...$tableAttrs} class="table table-compact bg-tertiary-200">
-			<thead>
-				{#each $headerRows as headerRow (headerRow.id)}
-					<Subscribe
-						rowAttrs={headerRow.attrs()}
-						let:rowAttrs
-						rowProps={headerRow.props()}
-						let:rowProps
-					>
-						<tr {...rowAttrs} class="bg-primary-300">
-							{#each headerRow.cells as cell (cell.id)}
-								<Subscribe attrs={cell.attrs()} props={cell.props()} let:props let:attrs>
-									<th scope="col" class="!p-2" {...attrs}>
-										<div class="flex w-full justify-between items-center">
-											<div class="flex gap-1">
-												<span
-													class:underline={props.sort.order}
-													class:normal-case={cell.id !== cell.label}
-													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>
-														<Render of={props.colFilter.render} />
-													</div>
-												{/if}
-											{/if}
-										</div>
-									</th>
-								</Subscribe>
-							{/each}
-						</tr>
-					</Subscribe>
-				{/each}
-			</thead>
-
-			<tbody class="" {...$tableBodyAttrs}>
-				{#each $pageRows as row (row.id)}
-					<Subscribe rowAttrs={row.attrs()} let:rowAttrs>
-						<tr {...rowAttrs}>
-							{#each row.cells as cell (cell?.id)}
-								<Subscribe attrs={cell.attrs()} let:attrs>
-									<td {...attrs} class="!p-2">
-										<div class="flex items-center w-full h-full table-cell-fit">
-											<Render of={cell.render()} />
-										</div>
-									</td>
-								</Subscribe>
-							{/each}
-						</tr>
-					</Subscribe>
-				{/each}
-			</tbody>
-		</table>
-	</div>
-
-	<TablePagination pageConfig={pluginStates.page} {pageSizes} />
-</div>
+</script>
+
+<div class="grid gap-2">
+	<div class="table-container">
+		<input
+			class="input p-2 mb-2 border border-primary-500"
+			type="text"
+			bind:value={$filterValue}
+			placeholder="Search rows..."
+		/>
+		<table {...$tableAttrs} class="table table-compact bg-tertiary-200">
+			<thead>
+				{#each $headerRows as headerRow (headerRow.id)}
+					<Subscribe
+						rowAttrs={headerRow.attrs()}
+						let:rowAttrs
+						rowProps={headerRow.props()}
+						let:rowProps
+					>
+						<tr {...rowAttrs} class="bg-primary-300">
+							{#each headerRow.cells as cell (cell.id)}
+								<Subscribe attrs={cell.attrs()} props={cell.props()} let:props let:attrs>
+									<th scope="col" class="!p-2" {...attrs}>
+										<div class="flex w-full justify-between items-center">
+											<div class="flex gap-1">
+												<span
+													class:underline={props.sort.order}
+													class:normal-case={cell.id !== cell.label}
+													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>
+														<Render of={props.colFilter.render} />
+													</div>
+												{/if}
+											{/if}
+										</div>
+									</th>
+								</Subscribe>
+							{/each}
+						</tr>
+					</Subscribe>
+				{/each}
+			</thead>
+
+			<tbody class="" {...$tableBodyAttrs}>
+				{#each $pageRows as row (row.id)}
+					<Subscribe rowAttrs={row.attrs()} let:rowAttrs>
+						<tr {...rowAttrs}>
+							{#each row.cells as cell (cell?.id)}
+								<Subscribe attrs={cell.attrs()} let:attrs>
+									<td {...attrs} class="!p-2">
+										<div class="flex items-center w-full h-full table-cell-fit">
+											<Render of={cell.render()} />
+										</div>
+									</td>
+								</Subscribe>
+							{/each}
+						</tr>
+					</Subscribe>
+				{/each}
+			</tbody>
+		</table>
+	</div>
+
+	<TablePagination pageConfig={pluginStates.page} {pageSizes} />
+</div>

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

@@ -5,6 +5,8 @@ declare const __propDef: {
         config: TableConfig<any>;
     };
     events: {
+        action: CustomEvent<any>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

package/dist/components/Table/TableFilter.svelte

@@ -62,6 +62,32 @@ const options = {
       value: "ends",
       label: "Ends with"
     }
+  ],
+  date: [
+    {
+      value: "ison",
+      label: "Is on"
+    },
+    {
+      value: "isstartingfrom",
+      label: "Is starting from"
+    },
+    {
+      value: "isafter",
+      label: "Is after"
+    },
+    {
+      value: "isuntil",
+      label: "Is until"
+    },
+    {
+      value: "isbefore",
+      label: "Is before"
+    },
+    {
+      value: "isnoton",
+      label: "Is not on"
+    }
   ]
 };
 const popupId = `${tableId}-${id}`;
@@ -70,7 +96,12 @@ const popupFeatured = {
   target: popupId,
   placement: "bottom-start"
 };
-const type = typeof $values[0];
+let type = typeof $values[0];
+if (type === "object") {
+  if ($values[0] instanceof Date) {
+    type = "date";
+  }
+}
 </script>
 
 <form class="">
@@ -87,7 +118,7 @@ const type = typeof $values[0];
 		<div class="card p-3 absolute grid gap-2 shadow-lg z-10 w-min">
 			<button
 				class="btn variant-filled-primary btn-sm"
-				type="submit"
+				type="button"
 				on:click|preventDefault={() => {
 					firstOption = 'isequal';
 					firstValue = undefined;
@@ -118,13 +149,20 @@ const type = typeof $values[0];
 						bind:value={firstValue}
 						on:click|stopPropagation
 					/>
-				{:else}
+				{:else if type === 'string'}
 					<input
 						type="text"
 						class="input p-1 border border-primary-500"
 						bind:value={firstValue}
 						on:click|stopPropagation
 					/>
+				{:else}
+					<input
+						type="date"
+						class="input p-1 border border-primary-500"
+						bind:value={firstValue}
+						on:click|stopPropagation
+					/>
 				{/if}
 			</div>
 			<label for="" class="label normal-case">And</label>
@@ -146,18 +184,25 @@ const type = typeof $values[0];
 						bind:value={secondValue}
 						on:click|stopPropagation
 					/>
-				{:else}
+				{:else if type === 'string'}
 					<input
 						type="text"
 						class="input p-1 border border-primary-500"
 						bind:value={secondValue}
 						on:click|stopPropagation
 					/>
+				{:else}
+					<input
+						type="date"
+						class="input p-1 border border-primary-500"
+						bind:value={secondValue}
+						on:click|stopPropagation
+					/>
 				{/if}
 			</div>
 			<button
 				class="btn variant-filled-primary btn-sm"
-				type="submit"
+				type="button"
 				on:click|preventDefault={() => {
 					active = firstValue?.toString().length > 0 || secondValue?.toString().length > 0;
 					$filterValue = [firstOption, firstValue, secondOption, secondValue];

package/dist/components/Table/TablePagination.svelte

@@ -39,7 +39,7 @@ $:
 	<select
 		name="pageSize"
 		id="pageSize"
-		class="select btn btn-sm variant-filled-primary w-min font-bold"
+		class="select variant-filled-primary w-min font-bold"
 		bind:value={$pageSize}
 	>
 		{#each pageSizes as size}

package/dist/components/Table/filter.js

@@ -34,15 +34,38 @@ const numberFilter = (filterOption, filterValue, value) => {
             return false;
     }
 };
+const dateFilter = (filterOption, filterValue, value) => {
+    const filter = new Date(filterValue);
+    switch (filterOption) {
+        case 'ison':
+            return value === filter;
+        case 'isstartingfrom':
+            return value >= filter;
+        case 'isafter':
+            return value > filter;
+        case 'isuntil':
+            return value <= filter;
+        case 'isbefore':
+            return value < filter;
+        case 'isnoton':
+            return value !== filter;
+        default:
+            return false;
+    }
+};
 const numericFilter = ({ filterValue, value }) => {
     const [firstFilterOption, firstFilterValue, secondFilterOption, secondFilterValue] = filterValue;
-    if (!firstFilterValue && !secondFilterValue) {
+    if (firstFilterValue == null && !secondFilterValue == null) {
         return true;
     }
-    else if ((!firstFilterOption || !firstFilterValue) && secondFilterOption && secondFilterValue) {
+    else if ((firstFilterOption == null || firstFilterValue == null) &&
+        secondFilterOption != null &&
+        secondFilterValue != null) {
         return numberFilter(secondFilterOption, secondFilterValue, value);
     }
-    else if ((!secondFilterOption || !secondFilterValue) && firstFilterOption && firstFilterValue) {
+    else if ((secondFilterOption == null || secondFilterValue == null) &&
+        firstFilterOption != null &&
+        firstFilterValue != null) {
         return numberFilter(firstFilterOption, firstFilterValue, value);
     }
     return (numberFilter(firstFilterOption, firstFilterValue, value) &&
@@ -66,6 +89,20 @@ const stringFilter = ({ filterValue, value }) => {
     return (textFilter(firstFilterOption, firstFilterValue, value) &&
         textFilter(secondFilterOption, secondFilterValue, value));
 };
+const dateTypeFilter = ({ filterValue, value }) => {
+    const [firstFilterOption, firstFilterValue, secondFilterOption, secondFilterValue] = filterValue;
+    if (!firstFilterValue && !secondFilterValue) {
+        return true;
+    }
+    else if ((!firstFilterOption || !firstFilterValue) && secondFilterOption && secondFilterValue) {
+        return dateFilter(secondFilterOption, secondFilterValue, value);
+    }
+    else if ((!secondFilterOption || !secondFilterValue) && firstFilterOption && firstFilterValue) {
+        return dateFilter(firstFilterOption, firstFilterValue, value);
+    }
+    return (dateFilter(firstFilterOption, firstFilterValue, value) &&
+        dateFilter(secondFilterOption, secondFilterValue, value));
+};
 export const columnFilter = ({ filterValue, value }) => {
     if (typeof value === 'string') {
         return stringFilter({ filterValue, value });
@@ -73,6 +110,9 @@ export const columnFilter = ({ filterValue, value }) => {
     else if (typeof value === 'number') {
         return numericFilter({ filterValue, value });
     }
+    else if (typeof value === 'object' && value instanceof Date) {
+        return dateTypeFilter({ filterValue, value });
+    }
     return false;
 };
 export const searchFilter = ({ filterValue, value }) => {

package/dist/components/page/Alert.svelte

@@ -0,0 +1,39 @@
+<script>import Fa from "svelte-fa";
+import { faXmark } from "@fortawesome/free-solid-svg-icons";
+import { fade } from "svelte/transition";
+export let title = "";
+export let message = "";
+export let cssClass = "";
+export let deleteBtn = true;
+$:
+  show = true;
+</script>
+{#if show}
+
+<aside class="alert {cssClass}" transition:fade|local={{ duration: 100 }}>
+ <!-- Icon -->
+ <!-- <div>(icon)</div> -->
+ <!-- Message -->
+ <div class="alert-message">
+  
+    {#if title}
+      <h3 class="h3">{title}</h3>
+     {/if}
+     <p>{message}
+      <slot></slot>
+     </p>
+ </div>
+ <!-- Actions -->
+ <div class="alert-actions">
+  <slot name="actions"/>
+
+  {#if deleteBtn}
+   <button class="btn hover:text-primary-100" on:click={()=>show = false}>
+    <Fa icon={faXmark} />
+   </button> 
+  {/if}
+
+ </div>
+</aside>
+
+{/if}

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

@@ -0,0 +1,22 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        title?: string | undefined;
+        message?: string | undefined;
+        cssClass?: string | undefined;
+        deleteBtn?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+        actions: {};
+    };
+};
+export type AlertProps = typeof __propDef.props;
+export type AlertEvents = typeof __propDef.events;
+export type AlertSlots = typeof __propDef.slots;
+export default class Alert extends SvelteComponentTyped<AlertProps, AlertEvents, AlertSlots> {
+}
+export {};

package/dist/components/page/Page.svelte

@@ -4,7 +4,7 @@ export let links = [];
 </script>
  
  <div class="px-5 grid gap-5" >
-  <h1>{title}</h1>
+  <h1 class="h1">{title}</h1>
   {#if note}
     <blockquote class="blockquote">{note}</blockquote>
   {/if}

package/dist/components/spinner/Spinner.svelte

@@ -1,5 +1,12 @@
+<script>import { Position } from "../../models/Enums";
+export let textCss = "text-secundary-500";
+export let label = "";
+export let position = Position.start;
+</script>
+
+<div class="flex justify-{position} items-{position} h-full w-full gap-5 pt-2">
 <div
-	class="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-current border-r-transparent align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite] text-secundary-500"
+	class="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-current border-r-transparent align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite] {textCss}"
 	role="status"
 >
 	<span
@@ -7,3 +14,6 @@
 		>Loading...</span
 	>
 </div>
+<span>{label}</span>
+</div>
+

package/dist/components/spinner/Spinner.svelte.d.ts

@@ -1,23 +1,19 @@
-/** @typedef {typeof __propDef.props}  SpinnerProps */
-/** @typedef {typeof __propDef.events}  SpinnerEvents */
-/** @typedef {typeof __propDef.slots}  SpinnerSlots */
-export default class Spinner extends SvelteComponentTyped<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type SpinnerProps = typeof __propDef.props;
-export type SpinnerEvents = typeof __propDef.events;
-export type SpinnerSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
+import { Position } from "../../models/Enums";
 declare const __propDef: {
     props: {
-        [x: string]: never;
+        textCss?: string | undefined;
+        label?: string | undefined;
+        position?: Position | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
 };
+export type SpinnerProps = typeof __propDef.props;
+export type SpinnerEvents = typeof __propDef.events;
+export type SpinnerSlots = typeof __propDef.slots;
+export default class Spinner extends SvelteComponentTyped<SpinnerProps, SpinnerEvents, SpinnerSlots> {
+}
 export {};

package/dist/css/themes/theme-bexis2.css

@@ -8,10 +8,10 @@
 	--theme-rounded-container: 4px;
 	--theme-border-base: 1px;
 	/* =~= Theme On-X Colors =~= */
-	--on-primary: 0 0 0;
-	--on-secondary: 0 0 0;
+	--on-primary: 255 255 255;
+	--on-secondary: 255 255 255;
 	--on-tertiary: 0 0 0;
-	--on-success: 0 0 0;
+	--on-success: 255 255 255;
 	--on-warning: 255 255 255;
 	--on-error: 255 255 255;
 	--on-surface: 0 0 0;

package/dist/index.d.ts

@@ -5,6 +5,7 @@ import FileInfo from './components/file/FileInfo.svelte';
 import FileUploader from './components/file/FileUploader.svelte';
 import Spinner from './components/spinner/Spinner.svelte';
 import Page from './components/page/Page.svelte';
+import Alert from './components/page/Alert.svelte';
 import Checkbox from './components/form/Checkbox.svelte';
 import CheckboxKVPList from './components/form/CheckboxKvPList.svelte';
 import CheckboxList from './components/form/CheckboxList.svelte';
@@ -20,7 +21,7 @@ import { columnFilter, searchFilter } from './components/Table/filter';
 import type { TableConfig, Columns, Column } from './models/Models';
 export { Checkbox, CheckboxKVPList, CheckboxList, DateInput, DropdownKVP, MultiSelect, NumberInput, TextArea, TextInput };
 export { FileInfo, FileIcon, FileUploader };
-export { ListView, TableView, Spinner, Page };
+export { ListView, TableView, Spinner, Page, Alert };
 export { Api } from './services/Api.js';
 export { host, username, password, setApiConfig } from './stores/apistore.js';
 export type { user, Input, FileUploaderModel, Link } from './models/Models.js';

package/dist/index.js

@@ -7,6 +7,7 @@ import FileUploader from './components/file/FileUploader.svelte';
 //page
 import Spinner from './components/spinner/Spinner.svelte';
 import Page from './components/page/Page.svelte';
+import Alert from './components/page/Alert.svelte';
 // input 
 import Checkbox from './components/form/Checkbox.svelte';
 import CheckboxKVPList from './components/form/CheckboxKvPList.svelte';
@@ -25,7 +26,7 @@ export { Checkbox, CheckboxKVPList, CheckboxList, DateInput, DropdownKVP, MultiS
 //File
 export { FileInfo, FileIcon, FileUploader };
 //others
-export { ListView, TableView, Spinner, Page };
+export { ListView, TableView, Spinner, Page, Alert };
 //Api
 export { Api } from './services/Api.js';
 export { host, username, password, setApiConfig } from './stores/apistore.js';