@bexis2/bexis2-core-ui 0.0.30 → 0.1.0

package/src/lib/components/Table/TableFilter.svelte

@@ -67,6 +67,32 @@
 				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'
+			}
 		]
 	};
 
@@ -78,7 +104,12 @@
 		placement: 'bottom-start'
 	};
 
-	const type = typeof $values[0];
+	let type: string = typeof $values[0];
+	if (type === 'object') {
+		if ($values[0] instanceof Date) {
+			type = 'date';
+		}
+	}
 </script>
 
 <form class="">
@@ -95,7 +126,7 @@
 		<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;
@@ -126,13 +157,20 @@
 						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>
@@ -154,18 +192,25 @@
 						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/src/lib/components/Table/TablePagination.svelte

@@ -40,7 +40,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/src/lib/components/Table/filter.ts

@@ -1,94 +1,141 @@
-import type { ColumnFilterFn } from 'svelte-headless-table/lib/plugins';
-import type { TableFilterFn } from 'svelte-headless-table/lib/plugins/addTableFilter';
-
-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: ColumnFilterFn = ({ 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: ColumnFilterFn = ({ 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: ColumnFilterFn = ({ filterValue, value }) => {
-	if (typeof value === 'string') {
-		return stringFilter({ filterValue, value });
-	} else if (typeof value === 'number') {
-		return numericFilter({ filterValue, value });
-	}
-	return false;
-};
-
-export const searchFilter: TableFilterFn = ({ filterValue, value }) => {
-	if (value.toLowerCase().includes(filterValue.toLowerCase())) {
-		return true;
-	}
-	return false;
-};
+import type { ColumnFilterFn } from 'svelte-headless-table/lib/plugins';
+import type { TableFilterFn } from 'svelte-headless-table/lib/plugins/addTableFilter';
+
+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 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: ColumnFilterFn = ({ 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: ColumnFilterFn = ({ 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: ColumnFilterFn = ({ 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: ColumnFilterFn = ({ filterValue, value }) => {
+	if (typeof value === 'string') {
+		return stringFilter({ 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: TableFilterFn = ({ filterValue, value }) => {
+	if (value.toLowerCase().includes(filterValue.toLowerCase())) {
+		return true;
+	}
+	return false;
+};

package/src/lib/components/form/DropdownKvP.svelte

@@ -9,6 +9,7 @@
 	export let invalid = false;
 	export let feedback = [''];
 	export let required = false;
+	export let targetIsComplex = false;
 
 	$: selected = null;
 
@@ -17,12 +18,26 @@
 
 	function updatedSelectedValue(selection) {
 		if (selection != null) {
-			selected = selection.id;
+			if(targetIsComplex)
+			{
+				selected = selection.id;
+			}
+			else
+			{
+				selected = selection
+			}
 		}
 	}
 
 	function updatedTarget(id) {
-		target = source.find((opt) => opt.id === id);
+		if(targetIsComplex)
+		{
+			target = source.find((opt) => opt.id === id);
+		}
+		else
+		{
+			target = id;
+		}
 	}
 </script>
 

package/src/lib/components/form/NumberInput.svelte

@@ -9,6 +9,7 @@
 	export let invalid: boolean = false;
 	export let required: boolean = false;
 	export let feedback: string[] = [''];
+	export let placeholder: string = "";
 </script>
 
 <InputContainer {label} {feedback} {required}>
@@ -20,5 +21,6 @@
 		class:input-error={invalid}
 		bind:value
 		on:input
+		{placeholder}
 	/>
 </InputContainer>

package/src/lib/components/form/TextArea.svelte

@@ -9,6 +9,7 @@
 	export let invalid: boolean = false;
 	export let required: boolean = false;
 	export let feedback: string[] = [''];
+	export let placeholder: string = "";
 </script>
 
 <InputContainer {label} {feedback} {required}>
@@ -19,5 +20,6 @@
 		class:input-error={invalid}
 		bind:value
 		on:input
+		{placeholder}
 	/>
 </InputContainer>

package/src/lib/components/form/TextInput.svelte

@@ -9,6 +9,8 @@
 	export let invalid: boolean = false;
 	export let required: boolean = false;
 	export let feedback: string[] = [''];
+	export let placeholder: string ="";
+
 </script>
 
 <InputContainer {label} {feedback} {required}>
@@ -20,5 +22,6 @@
 		class:input-error={invalid}
 		bind:value
 		on:input
+		{placeholder}
 	/>
 </InputContainer>

package/src/lib/components/page/Alert.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+
+ import Fa from 'svelte-fa';
+
+	import { faXmark } from '@fortawesome/free-solid-svg-icons';
+
+ import {fade} from 'svelte/transition' 
+
+ export let title:string = "";
+ export let message:string = "";
+ export let cssClass:string= "";
+ export let deleteBtn:boolean = 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/src/lib/components/spinner/Spinner.svelte

@@ -1,5 +1,15 @@
+<script lang="ts">
+ import { Position } from "$lib/models/Enums";
+
+	export let textCss = "text-secundary-500"
+	export let label = "";
+	export let position: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 +17,6 @@
 		>Loading...</span
 	>
 </div>
+<span>{label}</span>
+</div>
+

package/src/lib/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/src/lib/index.ts

@@ -9,6 +9,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';
@@ -43,7 +44,7 @@ export {
 export { FileInfo, FileIcon, FileUploader };
 
 //others
-export { ListView, TableView, Spinner, Page };
+export { ListView, TableView, Spinner, Page, Alert };
 
 //Api
 export { Api } from './services/Api.js';
@@ -54,8 +55,13 @@ export type {
 	user, 
 	Input,
 	FileUploaderModel,
-	Link
-	 } from './models/Models.js';
+	Link,
+	ListItem,
+	KvP
+	} from './models/Models.js';
+
+//enum
+export { Position	} from './models/Enums';
 
 // Table
 export { Table, TableFilter, columnFilter, searchFilter };

package/src/lib/models/Enums.ts

@@ -0,0 +1,6 @@
+
+export enum Position {
+	start = "start",
+	end = "end",
+ center = "center"
+}