@bexis2/bexis2-core-ui 0.0.23 → 0.0.25

package/README.md

@@ -3,16 +3,17 @@
 ## new in version 0.0.23
 
 ## Updates
+
 - update bexis 2 theme
 
-## Adds 
+## Adds
+
 - Checkbox
-- CheckboxKVPList 
-- CheckboxList 
-- DateInput 
-- DropdownKVP 
-- MultiSelect 
+- CheckboxKVPList
+- CheckboxList
+- DateInput
+- DropdownKVP
+- MultiSelect
 - NumberInput
 - TextArea
 - TextInput
-

package/dist/TableView.svelte

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

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

@@ -0,0 +1,167 @@
+<script>import { createTable, Subscribe, Render, createRender } from "svelte-headless-table";
+import {
+  addSortBy,
+  addPagination,
+  addExpandedRows,
+  addColumnFilters,
+  addTableFilter
+} from "svelte-headless-table/plugins";
+import TableFilter from "./TableFilter.svelte";
+import TablePagination from "./TablePagination.svelte";
+import { columnFilter, searchFilter } from "./filter";
+export let config;
+let {
+  id: tableId,
+  data,
+  columns,
+  optionsComponent,
+  defaultPageSize = 10,
+  pageSizes = [5, 10, 15, 20]
+} = config;
+const table = createTable(data, {
+  colFilter: addColumnFilters(),
+  tableFilter: addTableFilter({
+    fn: searchFilter
+  }),
+  sort: addSortBy({ disableMultiSort: true }),
+  page: addPagination({ initialPageSize: defaultPageSize }),
+  expand: addExpandedRows()
+});
+const accessors = Object.keys($data[0]);
+const tableColumns = [
+  ...accessors.filter((accessor) => {
+    const key = accessor;
+    if (columns !== void 0 && key in columns && columns[key].exclude === true) {
+      return false;
+    }
+    return true;
+  }).map((accessor) => {
+    const key = accessor;
+    if (columns !== void 0 && key in columns) {
+      const { header, colFilterFn, colFilterComponent } = columns[key];
+      return table.column({
+        header: header ?? key,
+        accessor,
+        plugins: {
+          sort: { invert: true },
+          colFilter: {
+            fn: colFilterFn ?? columnFilter,
+            render: ({ filterValue: filterValue2, values, id }) => createRender(colFilterComponent ?? TableFilter, {
+              filterValue: filterValue2,
+              values,
+              id,
+              tableId
+            })
+          }
+        }
+      });
+    } else {
+      return table.column({
+        header: key,
+        accessor,
+        plugins: {
+          sort: { invert: true },
+          colFilter: {
+            fn: columnFilter,
+            render: ({ filterValue: filterValue2, values, id }) => createRender(TableFilter, { filterValue: filterValue2, values, id, tableId })
+          }
+        }
+      });
+    }
+  })
+];
+if (optionsComponent !== void 0) {
+  tableColumns.push(
+    table.display({
+      id: "options",
+      header: "",
+      cell: ({ row }, _) => {
+        return createRender(optionsComponent, {
+          row: row.isData() ? row.original : null
+        });
+      }
+    })
+  );
+}
+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>

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

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+import type { TableConfig } from '../../models/Models';
+declare const __propDef: {
+    props: {
+        config: TableConfig<any>;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type TableProps = typeof __propDef.props;
+export type TableEvents = typeof __propDef.events;
+export type TableSlots = typeof __propDef.slots;
+export default class Table extends SvelteComponentTyped<TableProps, TableEvents, TableSlots> {
+}
+export {};

package/dist/components/Table/TableFilter.svelte

@@ -0,0 +1,168 @@
+<script>import Fa from "svelte-fa/src/fa.svelte";
+import { faFilter } from "@fortawesome/free-solid-svg-icons";
+import { popup } from "@skeletonlabs/skeleton";
+export let filterValue;
+export let values;
+export let id;
+export let tableId;
+let firstOption;
+let firstValue;
+let secondOption;
+let secondValue;
+let active = false;
+const options = {
+  number: [
+    {
+      value: "isequal",
+      label: "Is equal to"
+    },
+    {
+      value: "isgreaterorequal",
+      label: "Is greater than or equal to"
+    },
+    {
+      value: "isgreater",
+      label: "Is greater than"
+    },
+    {
+      value: "islessorequal",
+      label: "Is less than or equal to"
+    },
+    {
+      value: "isless",
+      label: "Is less than"
+    },
+    {
+      value: "isnotequal",
+      label: "Is not equal to"
+    }
+  ],
+  string: [
+    {
+      value: "isequal",
+      label: "Is equal to"
+    },
+    {
+      value: "isnotequal",
+      label: "Is not equal to"
+    },
+    {
+      value: "starts",
+      label: "Starts with"
+    },
+    {
+      value: "contains",
+      label: "Contains"
+    },
+    {
+      value: "notcontains",
+      label: "Does not contain"
+    },
+    {
+      value: "ends",
+      label: "Ends with"
+    }
+  ]
+};
+const popupId = `${tableId}-${id}`;
+const popupFeatured = {
+  event: "click",
+  target: popupId,
+  placement: "bottom-start"
+};
+const type = typeof $values[0];
+</script>
+
+<form class="">
+	<button
+		class:variant-filled-primary={active}
+		class="btn w-max p-2"
+		type="button"
+		use:popup={popupFeatured}
+	>
+		<Fa icon={faFilter} size="12" />
+	</button>
+
+	<div data-popup={`${popupId}`}>
+		<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"
+				on:click={() => {
+					firstOption = 'isequal';
+					firstValue = undefined;
+					secondOption = 'isequal';
+					secondValue = undefined;
+
+					$filterValue = [firstOption, firstValue, secondOption, secondValue];
+					active = false;
+				}}>Clear Filter</button
+			>
+
+			<label for="" class="label normal-case text-sm">Show rows with value that</label>
+			<div class="grid gap-2 w-full">
+				<select
+					class="select border border-primary-500 text-sm p-1"
+					aria-label="Show rows with value that"
+					bind:value={firstOption}
+					on:click|stopPropagation
+				>
+					{#each options[type] as option (option)}
+						<option value={option.value}>{option.label}</option>
+					{/each}
+				</select>
+				{#if type === 'number'}
+					<input
+						type="number"
+						class="input p-1 border border-primary-500"
+						bind:value={firstValue}
+						on:click|stopPropagation
+					/>
+				{:else}
+					<input
+						type="text"
+						class="input p-1 border border-primary-500"
+						bind:value={firstValue}
+						on:click|stopPropagation
+					/>
+				{/if}
+			</div>
+			<label for="" class="label normal-case">And</label>
+			<div class="grid gap-2 w-max">
+				<select
+					class="select border border-primary-500 text-sm p-1"
+					aria-label="Show rows with value that"
+					bind:value={secondOption}
+					on:click|stopPropagation
+				>
+					{#each options[type] as option (option)}
+						<option value={option.value}>{option.label}</option>
+					{/each}
+				</select>
+				{#if type === 'number'}
+					<input
+						type="number"
+						class="input p-1 border border-primary-500"
+						bind:value={secondValue}
+						on:click|stopPropagation
+					/>
+				{:else}
+					<input
+						type="text"
+						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"
+				on:click={() => {
+					active = firstValue?.toString().length > 0 || secondValue?.toString().length > 0;
+					$filterValue = [firstOption, firstValue, secondOption, secondValue];
+				}}>Submit</button
+			>
+		</div>
+	</div>
+</form>

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

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        filterValue: any;
+        values: any;
+        id: any;
+        tableId: any;
+    };
+    events: {
+        click: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type TableFilterProps = typeof __propDef.props;
+export type TableFilterEvents = typeof __propDef.events;
+export type TableFilterSlots = typeof __propDef.slots;
+export default class TableFilter extends SvelteComponentTyped<TableFilterProps, TableFilterEvents, TableFilterSlots> {
+}
+export {};

package/dist/components/Table/TablePagination.svelte

@@ -0,0 +1,60 @@
+<script>import Fa from "svelte-fa/src/fa.svelte";
+import {
+  faAnglesRight,
+  faAngleRight,
+  faAnglesLeft,
+  faAngleLeft
+} from "@fortawesome/free-solid-svg-icons";
+export let pageConfig;
+export let pageSizes;
+const { pageIndex, pageCount, pageSize, hasNextPage, hasPreviousPage } = pageConfig;
+const goToFirstPage = () => $pageIndex = 0;
+const goToLastPage = () => $pageIndex = $pageCount - 1;
+const goToNextPage = () => $pageIndex += 1;
+const goToPreviousPage = () => $pageIndex -= 1;
+$:
+  goToFirstPageDisabled = !$pageIndex;
+$:
+  goToLastPageDisabled = $pageIndex == $pageCount - 1;
+$:
+  goToNextPageDisabled = !$hasNextPage;
+$:
+  goToPreviousPageDisabled = !$hasPreviousPage;
+</script>
+
+<div class="flex justify-center gap-1">
+	<button
+		class="btn btn-sm variant-filled-primary"
+		on:click={goToFirstPage}
+		disabled={goToFirstPageDisabled}
+	>
+		<Fa icon={faAnglesLeft} /></button
+	>
+	<button
+		class="btn btn-sm variant-filled-primary"
+		on:click={goToPreviousPage}
+		disabled={goToPreviousPageDisabled}><Fa icon={faAngleLeft} /></button
+	>
+
+	<select
+		name="pageSize"
+		id="pageSize"
+		class="select btn btn-sm 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"
+		on:click={goToNextPage}
+		disabled={goToNextPageDisabled}><Fa icon={faAngleRight} /></button
+	>
+	<button
+		class="btn btn-sm variant-filled-primary"
+		on:click={goToLastPage}
+		disabled={goToLastPageDisabled}><Fa icon={faAnglesRight} /></button
+	>
+</div>

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

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        pageConfig: any;
+        pageSizes: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type TablePaginationProps = typeof __propDef.props;
+export type TablePaginationEvents = typeof __propDef.events;
+export type TablePaginationSlots = typeof __propDef.slots;
+export default class TablePagination extends SvelteComponentTyped<TablePaginationProps, TablePaginationEvents, TablePaginationSlots> {
+}
+export {};

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

@@ -0,0 +1,4 @@
+import type { ColumnFilterFn } from 'svelte-headless-table/lib/plugins';
+import type { TableFilterFn } from 'svelte-headless-table/lib/plugins/addTableFilter';
+export declare const columnFilter: ColumnFilterFn;
+export declare const searchFilter: TableFilterFn;

package/dist/components/Table/filter.js

@@ -0,0 +1,83 @@
+const textFilter = (filterOption, filterValue, value) => {
+    switch (filterOption) {
+        case 'isequal':
+            return value.toLowerCase() === filterValue.toLowerCase();
+        case 'isnotequal':
+            return value.toLowerCase() !== filterValue.toLowerCase();
+        case 'starts':
+            return value.toLowerCase().startsWith(filterValue.toLowerCase());
+        case 'ends':
+            return value.toLowerCase().endsWith(filterValue.toLowerCase());
+        case 'contains':
+            return value.toLowerCase().includes(filterValue.toLowerCase());
+        case 'notcontains':
+            return !value.toLowerCase().includes(filterValue.toLowerCase());
+        default:
+            return false;
+    }
+};
+const numberFilter = (filterOption, filterValue, value) => {
+    switch (filterOption) {
+        case 'isequal':
+            return value === filterValue;
+        case 'isnotequal':
+            return value !== filterValue;
+        case 'isgreater':
+            return value > filterValue;
+        case 'isless':
+            return value < filterValue;
+        case 'isgreaterorequal':
+            return value >= filterValue;
+        case 'islessorequal':
+            return value <= filterValue;
+        default:
+            return false;
+    }
+};
+const numericFilter = ({ filterValue, value }) => {
+    const [firstFilterOption, firstFilterValue, secondFilterOption, secondFilterValue] = filterValue;
+    if (!firstFilterValue && !secondFilterValue) {
+        return true;
+    }
+    else if ((!firstFilterOption || !firstFilterValue) && secondFilterOption && secondFilterValue) {
+        return numberFilter(secondFilterOption, secondFilterValue, value);
+    }
+    else if ((!secondFilterOption || !secondFilterValue) && firstFilterOption && firstFilterValue) {
+        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));
+};
+export const columnFilter = ({ filterValue, value }) => {
+    if (typeof value === 'string') {
+        return stringFilter({ filterValue, value });
+    }
+    else if (typeof value === 'number') {
+        return numericFilter({ filterValue, value });
+    }
+    return false;
+};
+export const searchFilter = ({ filterValue, value }) => {
+    if (value.toLowerCase().includes(filterValue.toLowerCase())) {
+        return true;
+    }
+    return false;
+};

package/dist/components/file/FileIcon.svelte

@@ -1,49 +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}