@bexis2/bexis2-core-ui 0.0.25 → 0.0.27

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/form/CheckboxKvPList.svelte

@@ -14,7 +14,13 @@
 <InputContainer label={title} {feedback} {required}>
 	{#each source as item}
 		<label class="flex items-center space-x-2" for={key}>
-			<input class="checkbox" type="checkbox" bind:group={target} checked={item.key} />
+			<input
+				class="checkbox"
+				type="checkbox"
+				bind:group={target}
+				checked={item.key}
+				value={item.key}
+			/>
 			<p>{item.value}</p>
 		</label>
 	{/each}

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

@@ -5,10 +5,10 @@
 	export let source;
 	export let target;
 	export let title;
-	export let valid;
-	export let invalid;
-	export let feedback;
-	export let required;
+	export let valid = false;
+	export let invalid = false;
+	export let feedback = [''];
+	export let required = false;
 
 	$: selected = null;
 

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

@@ -22,14 +22,16 @@
 
 	function updateTarget(selection) {
 		//diffrent cases
-		//onsole.log("------");
+		console.log('------');
 
 		//a) source is complex model is simple
 		if (isComplex && !isTargetComplex && isLoaded) {
+			console.log('a) source is complex model is simple');
+
 			target = [];
 			for (let i in selection) {
 				let item = selection[i];
-				target.push(item.key);
+				target.push(item[itemId]);
 			}
 		}
 
@@ -39,8 +41,8 @@
 				target.push(selection[i].value);
 			}
 		}
-		//console.log("selection "+title,selection);
-		//console.log("target "+title,target);
+		console.log('selection ' + title, selection);
+		console.log('target ' + title, target);
 	}
 
 	onMount(async () => {

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 };