@bexis2/bexis2-core-ui 0.0.26 → 0.0.27

package/README.md

@@ -1,9 +1,57 @@
 # bexis-core-ui
 
-## new in version 0.0.26
+## v0.0.27
 
-## Updates
+### add
+#### components
+- Table 
+- TableFilter
+- cloumnFilter
+- searchFilter
+
+#### types
+- TableConfig
+- Columns 
+- Column
+- Input
+
+<hr/>
+
+## v0.0.26
+
+### updates
 
 - fix bugs in checkbox list
 - fix bugs in multi select
 
+<hr/>
+
+## v0.0.25
+
+### adds 
+#### components
+- Spinner
+- FileUploader 
+- FileInfo 
+- FileIcon 
+- 
+#### types
+- FileUploaderModel
+ 
+<hr/>
+
+## v0.0.23
+
+### updates
+- update bexis 2 theme
+
+### adds 
+- Checkbox
+- CheckboxKVPList 
+- CheckboxList 
+- DateInput 
+- DropdownKVP 
+- MultiSelect 
+- NumberInput
+- TextArea
+- TextInput

package/dist/components/Table/TableFilter.svelte

@@ -71,98 +71,98 @@ const popupFeatured = {
   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>
+</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|preventDefault={() => {
+					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|preventDefault={() => {
+					active = firstValue?.toString().length > 0 || secondValue?.toString().length > 0;
+					$filterValue = [firstOption, firstValue, secondOption, secondValue];
+				}}>Submit</button
+			>
+		</div>
+	</div>
+</form>

package/dist/components/Table/TablePagination.svelte

@@ -20,41 +20,41 @@ $:
   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>
+</script>
+
+<div class="flex justify-center gap-1">
+	<button
+		class="btn btn-sm variant-filled-primary"
+		on:click|preventDefault={goToFirstPage}
+		disabled={goToFirstPageDisabled}
+	>
+		<Fa icon={faAnglesLeft} /></button
+	>
+	<button
+		class="btn btn-sm variant-filled-primary"
+		on:click|preventDefault={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|preventDefault={goToNextPage}
+		disabled={goToNextPageDisabled}><Fa icon={faAngleRight} /></button
+	>
+	<button
+		class="btn btn-sm variant-filled-primary"
+		on:click|preventDefault={goToLastPage}
+		disabled={goToLastPageDisabled}><Fa icon={faAnglesRight} /></button
+	>
+</div>

package/dist/components/page/BackToTop.svelte

@@ -0,0 +1,30 @@
+<script>
+ export let showOnPx = 150;
+ let hidden = true;
+
+ function goTop() {
+   document.body.scrollIntoView();
+ }
+
+ function scrollContainer() {
+   return document.documentElement || document.body;
+ }
+
+ function handleOnScroll() {
+   if (!scrollContainer()) {
+     return;
+   }
+
+   if (scrollContainer().scrollTop > showOnPx) {
+     hidden = false;
+   } else {
+     hidden = true;
+   }
+ }
+</script>
+
+<svelte:window on:scroll={handleOnScroll} />
+
+<div class="w-full items-center">
+ <button class="btn ring back-to-top" on:click={goTop} class:hidden >Back to top</button>
+</div>

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

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

package/dist/components/page/Page.svelte

@@ -0,0 +1,3 @@
+<div class="px-5 grid gap-5">
+ <slot/>
+</div>

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

@@ -0,0 +1,27 @@
+/** @typedef {typeof __propDef.props}  PageProps */
+/** @typedef {typeof __propDef.events}  PageEvents */
+/** @typedef {typeof __propDef.slots}  PageSlots */
+export default class Page extends SvelteComponentTyped<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type PageProps = typeof __propDef.props;
+export type PageEvents = typeof __propDef.events;
+export type PageSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

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

@@ -60,17 +60,17 @@
 	--color-success-700: 56 136 50; /* ⬅ #388832 */
 	--color-success-800: 45 109 40; /* ⬅ #2d6d28 */
 	--color-success-900: 37 89 33; /* ⬅ #255921 */
-	/* warning | #ef4444 */
-	--color-warning-50: 253 227 227; /* ⬅ #fde3e3 */
-	--color-warning-100: 252 218 218; /* ⬅ #fcdada */
-	--color-warning-200: 251 208 208; /* ⬅ #fbd0d0 */
-	--color-warning-300: 249 180 180; /* ⬅ #f9b4b4 */
-	--color-warning-400: 244 124 124; /* ⬅ #f47c7c */
-	--color-warning-500: 239 68 68; /* ⬅ #ef4444 */
-	--color-warning-600: 215 61 61; /* ⬅ #d73d3d */
-	--color-warning-700: 179 51 51; /* ⬅ #b33333 */
-	--color-warning-800: 143 41 41; /* ⬅ #8f2929 */
-	--color-warning-900: 117 33 33; /* ⬅ #752121 */
+	/* warning | #EAB308 */
+	--color-warning-50: 252 244 218; /* ⬅ #fcf4da */
+	--color-warning-100: 251 240 206; /* ⬅ #fbf0ce */
+	--color-warning-200: 250 236 193; /* ⬅ #faecc1 */
+	--color-warning-300: 247 225 156; /* ⬅ #f7e19c */
+	--color-warning-400: 240 202 82; /* ⬅ #f0ca52 */
+	--color-warning-500: 234 179 8; /* ⬅ #EAB308 */
+	--color-warning-600: 211 161 7; /* ⬅ #d3a107 */
+	--color-warning-700: 176 134 6; /* ⬅ #b08606 */
+	--color-warning-800: 140 107 5; /* ⬅ #8c6b05 */
+	--color-warning-900: 115 88 4; /* ⬅ #735804 */
 	/* error | #FF0000 */
 	--color-error-50: 255 217 217; /* ⬅ #ffd9d9 */
 	--color-error-100: 255 204 204; /* ⬅ #ffcccc */
@@ -82,15 +82,16 @@
 	--color-error-700: 191 0 0; /* ⬅ #bf0000 */
 	--color-error-800: 153 0 0; /* ⬅ #990000 */
 	--color-error-900: 125 0 0; /* ⬅ #7d0000 */
-	/* surface | #dddddd */
-	--color-surface-50: 250 250 250; /* ⬅ #fafafa */
-	--color-surface-100: 248 248 248; /* ⬅ #f8f8f8 */
-	--color-surface-200: 247 247 247; /* ⬅ #f7f7f7 */
-	--color-surface-300: 241 241 241; /* ⬅ #f1f1f1 */
-	--color-surface-400: 231 231 231; /* ⬅ #e7e7e7 */
-	--color-surface-500: 221 221 221; /* ⬅ #dddddd */
-	--color-surface-600: 199 199 199; /* ⬅ #c7c7c7 */
-	--color-surface-700: 166 166 166; /* ⬅ #a6a6a6 */
-	--color-surface-800: 133 133 133; /* ⬅ #858585 */
-	--color-surface-900: 108 108 108; /* ⬅ #6c6c6c */
-}
+/* surface | #dddddd */
+--color-surface-50: 250 250 250; /* ⬅ #fafafa */
+--color-surface-100: 248 248 248; /* ⬅ #f8f8f8 */
+--color-surface-200: 247 247 247; /* ⬅ #f7f7f7 */
+--color-surface-300: 241 241 241; /* ⬅ #f1f1f1 */
+--color-surface-400: 231 231 231; /* ⬅ #e7e7e7 */
+--color-surface-500: 221 221 221; /* ⬅ #dddddd */
+--color-surface-600: 199 199 199; /* ⬅ #c7c7c7 */
+--color-surface-700: 166 166 166; /* ⬅ #a6a6a6 */
+--color-surface-800: 133 133 133; /* ⬅ #858585 */
+--color-surface-900: 80 80 80; /* ⬅ #6c6c6c */
+
+}

package/dist/index.d.ts

@@ -13,9 +13,15 @@ import MultiSelect from './components/form/MultiSelect.svelte';
 import NumberInput from './components/form/NumberInput.svelte';
 import TextInput from './components/form/TextInput.svelte';
 import TextArea from './components/form/TextArea.svelte';
+import Table from './components/Table/Table.svelte';
+import TableFilter from './components/Table/TableFilter.svelte';
+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 };
 export { Api } from './services/Api.js';
 export { host, username, password, setApiConfig } from './stores/apistore.js';
-export type { user, FileUploaderModel } from './models/Models.js';
+export type { user, Input, FileUploaderModel } from './models/Models.js';
+export { Table, TableFilter, columnFilter, searchFilter };
+export type { TableConfig, Columns, Column };

package/dist/index.js

@@ -14,6 +14,9 @@ import MultiSelect from './components/form/MultiSelect.svelte';
 import NumberInput from './components/form/NumberInput.svelte';
 import TextInput from './components/form/TextInput.svelte';
 import TextArea from './components/form/TextArea.svelte';
+import Table from './components/Table/Table.svelte';
+import TableFilter from './components/Table/TableFilter.svelte';
+import { columnFilter, searchFilter } from './components/Table/filter';
 //Form
 export { Checkbox, CheckboxKVPList, CheckboxList, DateInput, DropdownKVP, MultiSelect, NumberInput, TextArea, TextInput };
 //File
@@ -23,3 +26,5 @@ export { ListView, TableView, Spinner };
 //Api
 export { Api } from './services/Api.js';
 export { host, username, password, setApiConfig } from './stores/apistore.js';
+// Table
+export { Table, TableFilter, columnFilter, searchFilter };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bexis2/bexis2-core-ui",
-  "version": "0.0.26",
+  "version": "0.0.27",
   "private": false,
   "scripts": {
     "dev": "vite dev --host",

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

@@ -1,176 +1,176 @@
-<script lang="ts">
-	import Fa from 'svelte-fa/src/fa.svelte';
-	import { faFilter } from '@fortawesome/free-solid-svg-icons';
-	import { popup } from '@skeletonlabs/skeleton';
-	import type { PopupSettings } 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: PopupSettings = {
-		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>
+<script lang="ts">
+	import Fa from 'svelte-fa/src/fa.svelte';
+	import { faFilter } from '@fortawesome/free-solid-svg-icons';
+	import { popup } from '@skeletonlabs/skeleton';
+	import type { PopupSettings } 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: PopupSettings = {
+		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|preventDefault={() => {
+					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|preventDefault={() => {
+					active = firstValue?.toString().length > 0 || secondValue?.toString().length > 0;
+					$filterValue = [firstOption, firstValue, secondOption, secondValue];
+				}}>Submit</button
+			>
+		</div>
+	</div>
+</form>

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

@@ -1,61 +1,61 @@
-<script lang="ts">
-	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>
+<script lang="ts">
+	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|preventDefault={goToFirstPage}
+		disabled={goToFirstPageDisabled}
+	>
+		<Fa icon={faAnglesLeft} /></button
+	>
+	<button
+		class="btn btn-sm variant-filled-primary"
+		on:click|preventDefault={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|preventDefault={goToNextPage}
+		disabled={goToNextPageDisabled}><Fa icon={faAngleRight} /></button
+	>
+	<button
+		class="btn btn-sm variant-filled-primary"
+		on:click|preventDefault={goToLastPage}
+		disabled={goToLastPageDisabled}><Fa icon={faAnglesRight} /></button
+	>
+</div>

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

@@ -0,0 +1,30 @@
+<script>
+ export let showOnPx = 150;
+ let hidden = true;
+
+ function goTop() {
+   document.body.scrollIntoView();
+ }
+
+ function scrollContainer() {
+   return document.documentElement || document.body;
+ }
+
+ function handleOnScroll() {
+   if (!scrollContainer()) {
+     return;
+   }
+
+   if (scrollContainer().scrollTop > showOnPx) {
+     hidden = false;
+   } else {
+     hidden = true;
+   }
+ }
+</script>
+
+<svelte:window on:scroll={handleOnScroll} />
+
+<div class="w-full items-center">
+ <button class="btn ring back-to-top" on:click={goTop} class:hidden >Back to top</button>
+</div>

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

@@ -0,0 +1,3 @@
+<div class="px-5 grid gap-5">
+ <slot/>
+</div>

package/src/lib/css/themes/theme-bexis2.css

@@ -60,17 +60,17 @@
 	--color-success-700: 56 136 50; /* ⬅ #388832 */
 	--color-success-800: 45 109 40; /* ⬅ #2d6d28 */
 	--color-success-900: 37 89 33; /* ⬅ #255921 */
-	/* warning | #ef4444 */
-	--color-warning-50: 253 227 227; /* ⬅ #fde3e3 */
-	--color-warning-100: 252 218 218; /* ⬅ #fcdada */
-	--color-warning-200: 251 208 208; /* ⬅ #fbd0d0 */
-	--color-warning-300: 249 180 180; /* ⬅ #f9b4b4 */
-	--color-warning-400: 244 124 124; /* ⬅ #f47c7c */
-	--color-warning-500: 239 68 68; /* ⬅ #ef4444 */
-	--color-warning-600: 215 61 61; /* ⬅ #d73d3d */
-	--color-warning-700: 179 51 51; /* ⬅ #b33333 */
-	--color-warning-800: 143 41 41; /* ⬅ #8f2929 */
-	--color-warning-900: 117 33 33; /* ⬅ #752121 */
+	/* warning | #EAB308 */
+	--color-warning-50: 252 244 218; /* ⬅ #fcf4da */
+	--color-warning-100: 251 240 206; /* ⬅ #fbf0ce */
+	--color-warning-200: 250 236 193; /* ⬅ #faecc1 */
+	--color-warning-300: 247 225 156; /* ⬅ #f7e19c */
+	--color-warning-400: 240 202 82; /* ⬅ #f0ca52 */
+	--color-warning-500: 234 179 8; /* ⬅ #EAB308 */
+	--color-warning-600: 211 161 7; /* ⬅ #d3a107 */
+	--color-warning-700: 176 134 6; /* ⬅ #b08606 */
+	--color-warning-800: 140 107 5; /* ⬅ #8c6b05 */
+	--color-warning-900: 115 88 4; /* ⬅ #735804 */
 	/* error | #FF0000 */
 	--color-error-50: 255 217 217; /* ⬅ #ffd9d9 */
 	--color-error-100: 255 204 204; /* ⬅ #ffcccc */
@@ -82,15 +82,16 @@
 	--color-error-700: 191 0 0; /* ⬅ #bf0000 */
 	--color-error-800: 153 0 0; /* ⬅ #990000 */
 	--color-error-900: 125 0 0; /* ⬅ #7d0000 */
-	/* surface | #dddddd */
-	--color-surface-50: 250 250 250; /* ⬅ #fafafa */
-	--color-surface-100: 248 248 248; /* ⬅ #f8f8f8 */
-	--color-surface-200: 247 247 247; /* ⬅ #f7f7f7 */
-	--color-surface-300: 241 241 241; /* ⬅ #f1f1f1 */
-	--color-surface-400: 231 231 231; /* ⬅ #e7e7e7 */
-	--color-surface-500: 221 221 221; /* ⬅ #dddddd */
-	--color-surface-600: 199 199 199; /* ⬅ #c7c7c7 */
-	--color-surface-700: 166 166 166; /* ⬅ #a6a6a6 */
-	--color-surface-800: 133 133 133; /* ⬅ #858585 */
-	--color-surface-900: 108 108 108; /* ⬅ #6c6c6c */
-}
+/* surface | #dddddd */
+--color-surface-50: 250 250 250; /* ⬅ #fafafa */
+--color-surface-100: 248 248 248; /* ⬅ #f8f8f8 */
+--color-surface-200: 247 247 247; /* ⬅ #f7f7f7 */
+--color-surface-300: 241 241 241; /* ⬅ #f1f1f1 */
+--color-surface-400: 231 231 231; /* ⬅ #e7e7e7 */
+--color-surface-500: 221 221 221; /* ⬅ #dddddd */
+--color-surface-600: 199 199 199; /* ⬅ #c7c7c7 */
+--color-surface-700: 166 166 166; /* ⬅ #a6a6a6 */
+--color-surface-800: 133 133 133; /* ⬅ #858585 */
+--color-surface-900: 80 80 80; /* ⬅ #6c6c6c */
+
+}

package/src/lib/index.ts

@@ -1,45 +1,58 @@
-// Reexport your entry components here
-import ListView from './components/ListView.svelte';
-import TableView from './TableView.svelte';
-
-import FileIcon from './components/file/FileIcon.svelte';
-import FileInfo from './components/file/FileInfo.svelte';
-import FileUploader from './components/file/FileUploader.svelte';
-
-import Spinner from './components/spinner/Spinner.svelte';
-
-import Checkbox from './components/form/Checkbox.svelte';
-import CheckboxKVPList from './components/form/CheckboxKvPList.svelte';
-import CheckboxList from './components/form/CheckboxList.svelte';
-import DateInput from './components/form/DateInput.svelte';
-import DropdownKVP from './components/form/DropdownKvP.svelte';
-import MultiSelect from './components/form/MultiSelect.svelte';
-import NumberInput from './components/form/NumberInput.svelte';
-import TextInput from './components/form/TextInput.svelte';
-import TextArea from './components/form/TextArea.svelte';
-
-//Form
-export {
-	Checkbox,
-	CheckboxKVPList,
-	CheckboxList,
-	DateInput,
-	DropdownKVP,
-	MultiSelect,
-	NumberInput,
-	TextArea,
-	TextInput
-};
-
-//File
-export { FileInfo, FileIcon, FileUploader };
-
-//others
-export { ListView, TableView, Spinner };
-
-//Api
-export { Api } from './services/Api.js';
-export { host, username, password, setApiConfig } from './stores/apistore.js';
-
-//Type
-export type { user, FileUploaderModel } from './models/Models.js';
+// Reexport your entry components here
+import ListView from './components/ListView.svelte';
+import TableView from './TableView.svelte';
+
+import FileIcon from './components/file/FileIcon.svelte';
+import FileInfo from './components/file/FileInfo.svelte';
+import FileUploader from './components/file/FileUploader.svelte';
+
+import Spinner from './components/spinner/Spinner.svelte';
+
+import Checkbox from './components/form/Checkbox.svelte';
+import CheckboxKVPList from './components/form/CheckboxKvPList.svelte';
+import CheckboxList from './components/form/CheckboxList.svelte';
+import DateInput from './components/form/DateInput.svelte';
+import DropdownKVP from './components/form/DropdownKvP.svelte';
+import MultiSelect from './components/form/MultiSelect.svelte';
+import NumberInput from './components/form/NumberInput.svelte';
+import TextInput from './components/form/TextInput.svelte';
+import TextArea from './components/form/TextArea.svelte';
+
+import Table from './components/Table/Table.svelte';
+import TableFilter from './components/Table/TableFilter.svelte';
+import { columnFilter, searchFilter } from './components/Table/filter';
+import type { TableConfig, Columns, Column } from './models/Models';
+
+//Form
+export {
+	Checkbox,
+	CheckboxKVPList,
+	CheckboxList,
+	DateInput,
+	DropdownKVP,
+	MultiSelect,
+	NumberInput,
+	TextArea,
+	TextInput
+};
+
+//File
+export { FileInfo, FileIcon, FileUploader };
+
+//others
+export { ListView, TableView, Spinner };
+
+//Api
+export { Api } from './services/Api.js';
+export { host, username, password, setApiConfig } from './stores/apistore.js';
+
+//Type
+export type { 
+	user, 
+	Input,
+	FileUploaderModel
+	 } from './models/Models.js';
+
+// Table
+export { Table, TableFilter, columnFilter, searchFilter };
+export type { TableConfig, Columns, Column };