@bexis2/bexis2-core-ui 0.3.12 → 0.3.13

package/dist/components/Table/TablePagination.svelte

@@ -13,6 +13,16 @@ const goToFirstPage = () => $pageIndex = 0;
 const goToLastPage = () => $pageIndex = $pageCount - 1;
 const goToNextPage = () => $pageIndex += 1;
 const goToPreviousPage = () => $pageIndex -= 1;
+const handleChange = (e) => {
+  const value = e.target.value;
+  if (value > $pageCount) {
+    $pageIndex = $pageCount - 1;
+  } else if (value < 1) {
+    $pageIndex = 0;
+  } else {
+    $pageIndex = value - 1;
+  }
+};
 $:
   goToFirstPageDisabled = !$pageIndex;
 $:
@@ -23,43 +33,66 @@ $:
   goToPreviousPageDisabled = !$hasPreviousPage;
 </script>
 
-<div class="flex justify-center gap-1">
-	<button
-		class="btn btn-sm variant-filled-primary"
-		on:click|preventDefault={goToFirstPage}
-		disabled={goToFirstPageDisabled}
-		id="{id}-first"
-	>
-		<Fa icon={faAnglesLeft} /></button
-	>
-	<button
-		class="btn btn-sm variant-filled-primary"
-		id="{id}-previous"
-		on:click|preventDefault={goToPreviousPage}
-		disabled={goToPreviousPageDisabled}><Fa icon={faAngleLeft} /></button
-	>
-
-	<select
-		name="pageSize"
-		id="{id}-pageSize"
-		class="select variant-filled-primary w-min font-bold"
-		bind:value={$pageSize}
-	>
-		{#each pageSizes as size}
-			<option value={size}>{size}</option>
-		{/each}
-	</select>
-
-	<button
-		class="btn btn-sm variant-filled-primary"
-		id="{id}-next"
-		on:click|preventDefault={goToNextPage}
-		disabled={goToNextPageDisabled}><Fa icon={faAngleRight} /></button
-	>
-	<button
-		class="btn btn-sm variant-filled-primary"
-		id="{id}-last"
-		on:click|preventDefault={goToLastPage}
-		disabled={goToLastPageDisabled}><Fa icon={faAnglesRight} /></button
-	>
+<div class="flex justify-between w-full items-stretch gap-10">
+	<div class="flex justify-start">
+		<select
+			name="pageSize"
+			id="{id}-pageSize"
+			class="select variant-filled-primary w-min font-bold"
+			bind:value={$pageSize}
+		>
+			{#each pageSizes as size}
+				<option value={size}>{size}</option>
+			{/each}
+		</select>
+	</div>
+	<div class="flex justify-center gap-1">
+		<button
+			class="btn btn-sm variant-filled-primary"
+			on:click|preventDefault={goToFirstPage}
+			disabled={goToFirstPageDisabled}
+			id="{id}-first"
+		>
+			<Fa icon={faAnglesLeft} /></button
+		>
+		<button
+			class="btn btn-sm variant-filled-primary"
+			id="{id}-previous"
+			on:click|preventDefault={goToPreviousPage}
+			disabled={goToPreviousPageDisabled}><Fa icon={faAngleLeft} /></button
+		>
+		<input
+			type="number"
+			class="input border border-primary-500 rounded flex w-24"
+			value={$pageIndex + 1}
+			max={$pageCount}
+			min={1}
+			on:change={handleChange}
+		/>
+		<button
+			class="btn btn-sm variant-filled-primary"
+			id="{id}-next"
+			on:click|preventDefault={goToNextPage}
+			disabled={goToNextPageDisabled}><Fa icon={faAngleRight} /></button
+		>
+		<button
+			class="btn btn-sm variant-filled-primary"
+			id="{id}-last"
+			on:click|preventDefault={goToLastPage}
+			disabled={goToLastPageDisabled}><Fa icon={faAnglesRight} /></button
+		>
+	</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}
+		</span>
+	</div>
 </div>

package/dist/components/Table/TablePaginationServer.svelte

@@ -0,0 +1,125 @@
+<script>import Fa from "svelte-fa/src/fa.svelte";
+import {
+  faAnglesRight,
+  faAngleRight,
+  faAnglesLeft,
+  faAngleLeft
+} from "@fortawesome/free-solid-svg-icons";
+export let id;
+export let pageIndex;
+export let pageSize;
+export let pageSizes;
+export let serverItemCount;
+export let updateTable;
+let goToFirstPageDisabled = true;
+let goToLastPageDisabled = true;
+let goToNextPageDisabled = true;
+let goToPreviousPageDisabled = true;
+const handleChange = (e) => {
+  const value = e.target.value;
+  if (value > pageCount) {
+    $pageIndex = pageCount - 1;
+  } else if (value < 1) {
+    $pageIndex = 0;
+  } else {
+    $pageIndex = value - 1;
+  }
+  updateTable();
+};
+const goTo = (dst) => {
+  switch (dst) {
+    case "first":
+      $pageIndex = 0;
+      break;
+    case "last":
+      $pageIndex = pageCount - 1;
+      break;
+    case "next":
+      $pageIndex += 1;
+      break;
+    case "previous":
+      $pageIndex -= 1;
+      break;
+    default:
+      break;
+  }
+  updateTable();
+};
+$:
+  pageCount = Math.ceil($serverItemCount / $pageSize);
+$:
+  goToFirstPageDisabled = !$pageIndex;
+$:
+  goToLastPageDisabled = $pageIndex == pageCount - 1;
+$:
+  goToNextPageDisabled = $pageIndex == pageCount - 1;
+$:
+  goToPreviousPageDisabled = !$pageIndex;
+$:
+  $pageSize && updateTable();
+updateTable();
+</script>
+
+<div class="flex justify-between w-full items-stretch gap-10">
+	<div class="flex justify-start">
+		<select
+			name="pageSize"
+			id="{id}-pageSize"
+			class="select variant-filled-primary w-min font-bold"
+			bind:value={$pageSize}
+		>
+			{#each pageSizes as size}
+				<option value={size}>{size}</option>
+			{/each}
+		</select>
+	</div>
+	<div class="flex justify-center gap-1">
+		<button
+			class="btn btn-sm variant-filled-primary"
+			on:click|preventDefault={() => goTo('first')}
+			disabled={goToFirstPageDisabled}
+			id="{id}-first"
+		>
+			<Fa icon={faAnglesLeft} /></button
+		>
+		<button
+			class="btn btn-sm variant-filled-primary"
+			id="{id}-previous"
+			on:click|preventDefault={() => goTo('previous')}
+			disabled={goToPreviousPageDisabled}><Fa icon={faAngleLeft} /></button
+		>
+		<input
+			type="number"
+			class="input border border-primary-500 rounded flex w-24"
+			value={$pageIndex + 1}
+			max={pageCount}
+			min={1}
+			on:change={handleChange}
+		/>
+		<button
+			class="btn btn-sm variant-filled-primary"
+			id="{id}-next"
+			on:click|preventDefault={() => goTo('next')}
+			disabled={goToNextPageDisabled}><Fa icon={faAngleRight} /></button
+		>
+		<button
+			class="btn btn-sm variant-filled-primary"
+			id="{id}-last"
+			on:click|preventDefault={() => goTo('last')}
+			disabled={goToLastPageDisabled}><Fa icon={faAnglesRight} /></button
+		>
+	</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}
+		</span>
+	</div>
+</div>

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

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        id: any;
+        pageIndex: any;
+        pageSize: any;
+        pageSizes: any;
+        serverItemCount: any;
+        updateTable: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type TablePaginationServerProps = typeof __propDef.props;
+export type TablePaginationServerEvents = typeof __propDef.events;
+export type TablePaginationServerSlots = typeof __propDef.slots;
+export default class TablePaginationServer extends SvelteComponentTyped<TablePaginationServerProps, TablePaginationServerEvents, TablePaginationServerSlots> {
+}
+export {};

package/dist/components/Table/filter.js

@@ -1,16 +1,17 @@
+import { FilterOptionsEnum } from '../../models/Enums';
 const textFilter = (filterOption, filterValue, value) => {
     switch (filterOption) {
-        case 'isequal':
+        case FilterOptionsEnum.e:
             return value.toLowerCase() === filterValue.toLowerCase();
-        case 'isnotequal':
+        case FilterOptionsEnum.ne:
             return value.toLowerCase() !== filterValue.toLowerCase();
-        case 'starts':
+        case FilterOptionsEnum.sw:
             return value.toLowerCase().startsWith(filterValue.toLowerCase());
-        case 'ends':
+        case FilterOptionsEnum.ew:
             return value.toLowerCase().endsWith(filterValue.toLowerCase());
-        case 'contains':
+        case FilterOptionsEnum.c:
             return value.toLowerCase().includes(filterValue.toLowerCase());
-        case 'notcontains':
+        case FilterOptionsEnum.nc:
             return !value.toLowerCase().includes(filterValue.toLowerCase());
         default:
             return false;
@@ -18,17 +19,17 @@ const textFilter = (filterOption, filterValue, value) => {
 };
 const numberFilter = (filterOption, filterValue, value) => {
     switch (filterOption) {
-        case 'isequal':
+        case FilterOptionsEnum.e:
             return value === filterValue;
-        case 'isnotequal':
+        case FilterOptionsEnum.ne:
             return value !== filterValue;
-        case 'isgreater':
+        case FilterOptionsEnum.gt:
             return value > filterValue;
-        case 'isless':
+        case FilterOptionsEnum.lt:
             return value < filterValue;
-        case 'isgreaterorequal':
+        case FilterOptionsEnum.gte:
             return value >= filterValue;
-        case 'islessorequal':
+        case FilterOptionsEnum.lte:
             return value <= filterValue;
         default:
             return false;
@@ -37,81 +38,42 @@ const numberFilter = (filterOption, filterValue, value) => {
 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;
+        case FilterOptionsEnum.o:
+            return value.getTime() === filter.getTime();
+        case FilterOptionsEnum.sf:
+            return value.getTime() >= filter.getTime();
+        case FilterOptionsEnum.a:
+            return value.getTime() > filter.getTime();
+        case FilterOptionsEnum.u:
+            return value.getTime() <= filter.getTime();
+        case FilterOptionsEnum.b:
+            return value.getTime() < filter.getTime();
+        case FilterOptionsEnum.no:
+            return value.getTime() !== filter.getTime();
         default:
             return false;
     }
 };
-const numericFilter = ({ filterValue, value }) => {
-    const [firstFilterOption, firstFilterValue, secondFilterOption, secondFilterValue] = filterValue;
-    if (firstFilterValue == null && secondFilterValue == null) {
-        return true;
-    }
-    else if ((firstFilterOption == null || firstFilterValue == null) &&
-        secondFilterOption != null &&
-        secondFilterValue != null) {
-        return numberFilter(secondFilterOption, secondFilterValue, value);
-    }
-    else if ((secondFilterOption == null || secondFilterValue == null) &&
-        firstFilterOption != null &&
-        firstFilterValue != null) {
-        return numberFilter(firstFilterOption, firstFilterValue, value);
-    }
-    return (numberFilter(firstFilterOption, firstFilterValue, value) &&
-        numberFilter(secondFilterOption, secondFilterValue, value));
-};
-const stringFilter = ({ filterValue, value }) => {
-    const [firstFilterOption, firstFilterValue, secondFilterOption, secondFilterValue] = filterValue;
-    if (!firstFilterValue?.length && !secondFilterValue?.length) {
-        return true;
-    }
-    else if ((!firstFilterOption || !firstFilterValue) &&
-        secondFilterOption &&
-        secondFilterValue?.length) {
-        return textFilter(secondFilterOption, secondFilterValue, value);
-    }
-    else if ((!secondFilterOption || !secondFilterValue?.length) &&
-        firstFilterOption &&
-        firstFilterValue?.length) {
-        return textFilter(firstFilterOption, firstFilterValue, 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));
+const applyFilter = (filterValue, value, filterFn) => {
+    let result = true;
+    const filters = Object.keys(filterValue).map((key) => ({
+        option: key,
+        value: filterValue[key]
+    }));
+    filters.forEach((filter) => {
+        result = result && (filter.value ? filterFn(filter.option, filter.value, value) : true);
+    });
+    return result;
 };
 export const columnFilter = ({ filterValue, value }) => {
-    if (typeof value === 'string') {
-        return stringFilter({ filterValue, value });
+    if (typeof value === 'object' && value instanceof Date) {
+        return applyFilter(filterValue, value, dateFilter);
     }
     else if (typeof value === 'number') {
-        return numericFilter({ filterValue, value });
+        return applyFilter(filterValue, value, numberFilter);
     }
-    else if (typeof value === 'object' && value instanceof Date) {
-        return dateTypeFilter({ filterValue, value });
+    else if (typeof value === 'string') {
+        return applyFilter(filterValue, value, textFilter);
     }
     return false;
 };

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

@@ -0,0 +1,32 @@
+import type { FilterOptionsEnum } from '../../models/Enums';
+import type { Columns, Filter, ServerColumn } 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]: {
+        e?: string | number | Date | undefined;
+        ne?: string | number | Date | undefined;
+        gt?: string | number | Date | undefined;
+        lt?: string | number | Date | undefined;
+        gte?: string | number | Date | undefined;
+        lte?: string | number | Date | undefined;
+        c?: string | number | Date | undefined;
+        nc?: string | number | Date | undefined;
+        sw?: string | number | Date | undefined;
+        ew?: string | number | Date | undefined;
+        o?: string | number | Date | undefined;
+        sf?: string | number | Date | undefined;
+        a?: string | number | Date | undefined;
+        u?: string | number | Date | undefined;
+        b?: string | number | Date | undefined;
+        no?: string | number | Date | undefined;
+    };
+}) => Filter[];
+export declare const exportAsCsv: (tableId: string, exportedData: string) => void;
+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, missingValues: {
+    [key: string]: string;
+    [key: number]: string;
+}) => string;
+export declare const convertServerColumns: (columns: ServerColumn[]) => Columns;

package/dist/components/Table/shared.js

@@ -0,0 +1,117 @@
+// Function to determine minWidth for a column to simplify the logic in the HTML
+export const minWidth = (id, columns) => {
+    if (columns && id in columns) {
+        return columns[id].minWidth ?? 0;
+    }
+    return 0;
+};
+// Function to determine fixedWidth for a column to simplify the logic in the HTML
+export const fixedWidth = (id, columns) => {
+    if (columns && id in columns) {
+        return columns[id].fixedWidth ?? 0;
+    }
+    return 0;
+};
+// Function to create custom styles for the columns to simplify the logic in the HTML
+export const cellStyle = (id, columns) => {
+    const minW = minWidth(id, columns);
+    const fixedW = fixedWidth(id, columns);
+    const styles = [];
+    // If minWidth is provided, add to styles
+    minW && styles.push(`min-width: ${minW}px`);
+    // If fixedWidth is provided, add to styles
+    fixedW && styles.push(`width: ${fixedW}px`);
+    // Create and return styles separated by ';'
+    return styles.join(';');
+};
+// Function to normalize the filters for back-end
+export const normalizeFilters = (filters) => {
+    let filter = [];
+    // Add filters to the request
+    Object.keys(filters).forEach((key) => {
+        Object.keys(filters[key])
+            .filter((k) => filters[key][k] !== undefined)
+            .forEach((k) => {
+            filter.push({
+                column: key,
+                filterBy: k,
+                value: filters[key][k]
+            });
+        });
+    });
+    return filter;
+};
+export const exportAsCsv = (tableId, exportedData) => {
+    // Creating a hidden anchor element to download the CSV file
+    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);
+};
+// Resetting the resized columns and/or rows
+export const resetResize = (headerRows, pageRows, tableId, columns, resizable) => {
+    // Run only if resizable is not none
+    if (resizable === 'columns' || resizable === 'both') {
+        headerRows.forEach((row) => {
+            row.cells.forEach((cell) => {
+                const minW = minWidth(cell.id, columns);
+                const fixedW = fixedWidth(cell.id, columns);
+                // If a fixedWidth is provided for a column, then reset the width to that value
+                fixedW &&
+                    document
+                        .getElementById(`th-${tableId}-${cell.id}`)
+                        ?.style.setProperty('width', `${fixedW}px`);
+                // If a minWidth is provided for a column, then reset the width to that value
+                minW &&
+                    document
+                        .getElementById(`th-${tableId}-${cell.id}`)
+                        ?.style.setProperty('width', `${minW}px`);
+                // If neither minWidth nor fixedWidth provided for a column, then reset the width to auto
+                !minW &&
+                    !fixedW &&
+                    document.getElementById(`th-${tableId}-${cell.id}`)?.style.setProperty('width', 'auto');
+            });
+        });
+    }
+    if (resizable === 'rows' || resizable === 'both') {
+        pageRows.forEach((row) => {
+            row.cells.forEach((cell) => {
+                // Reset all row heights to auto
+                document
+                    .getElementById(`${tableId}-${cell.id}-${row.id}`)
+                    ?.style.setProperty('height', 'auto');
+            });
+        });
+    }
+};
+export const missingValuesFn = (key, missingValues) => {
+    return key in missingValues ? missingValues[key] : key.toString();
+};
+export const convertServerColumns = (columns) => {
+    const columnsConfig = {};
+    columns.forEach((col) => {
+        let instructions = {};
+        // if (col.instructions?.displayPattern) {
+        // 	instructions = {
+        // 		toStringFn: (date: Date) =>
+        // 			date.toLocaleString('en-US', col.instructions?.displayPattern || {}),
+        // 		toSortableValueFn: (date: Date) => date.getTime(),
+        // 		toFilterableValueFn: (date: Date) => date
+        // 	};
+        // }
+        if (col.instructions?.missingValues) {
+            instructions = {
+                ...instructions,
+                toStringFn: (key) => missingValuesFn(key, col.instructions?.missingValues || {})
+            };
+        }
+        columnsConfig[col.column] = {
+            exclude: col.exclude,
+            instructions
+        };
+    });
+    return columnsConfig;
+};

package/dist/components/form/DropdownKvP.svelte.d.ts

@@ -2,14 +2,14 @@
 /** @typedef {typeof __propDef.events}  DropdownKvPEvents */
 /** @typedef {typeof __propDef.slots}  DropdownKvPSlots */
 export default class DropdownKvP extends SvelteComponentTyped<{
-    target: any;
     id: any;
+    target: any;
     source: any;
     title: any;
-    required?: boolean | undefined;
     invalid?: boolean | undefined;
     valid?: boolean | undefined;
     feedback?: string[] | undefined;
+    required?: boolean | undefined;
     complexTarget?: boolean | undefined;
     help?: boolean | undefined;
 }, {
@@ -25,14 +25,14 @@ export type DropdownKvPSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        target: any;
         id: any;
+        target: any;
         source: any;
         title: any;
-        required?: boolean | undefined;
         invalid?: boolean | undefined;
         valid?: boolean | undefined;
         feedback?: string[] | undefined;
+        required?: boolean | undefined;
         complexTarget?: boolean | undefined;
         help?: boolean | undefined;
     };

package/dist/components/form/MultiSelect.svelte.d.ts

@@ -2,14 +2,13 @@
 /** @typedef {typeof __propDef.events}  MultiSelectEvents */
 /** @typedef {typeof __propDef.slots}  MultiSelectSlots */
 export default class MultiSelect extends SvelteComponentTyped<{
-    target: any;
     id: any;
+    target: any;
     source: any;
     title: any;
-    disabled?: boolean | undefined;
-    required?: boolean | undefined;
     invalid?: boolean | undefined;
     feedback?: string[] | undefined;
+    required?: boolean | undefined;
     complexTarget?: boolean | undefined;
     help?: boolean | undefined;
     itemId?: string | undefined;
@@ -20,6 +19,7 @@ export default class MultiSelect extends SvelteComponentTyped<{
     placeholder?: string | undefined;
     loading?: boolean | undefined;
     clearable?: boolean | undefined;
+    disabled?: boolean | undefined;
 }, {
     change: CustomEvent<any>;
     input: CustomEvent<any>;
@@ -39,14 +39,13 @@ export type MultiSelectSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        target: any;
         id: any;
+        target: any;
         source: any;
         title: any;
-        disabled?: boolean | undefined;
-        required?: boolean | undefined;
         invalid?: boolean | undefined;
         feedback?: string[] | undefined;
+        required?: boolean | undefined;
         complexTarget?: boolean | undefined;
         help?: boolean | undefined;
         itemId?: string | undefined;
@@ -57,6 +56,7 @@ declare const __propDef: {
         placeholder?: string | undefined;
         loading?: boolean | undefined;
         clearable?: boolean | undefined;
+        disabled?: boolean | undefined;
     };
     events: {
         change: CustomEvent<any>;