@bexis2/bexis2-core-ui 0.4.19 → 0.4.21

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

@@ -165,9 +165,9 @@
 					header: header ?? key,
 					accessor: accessor,
 					// Render the cell with the provided component, or use the toStringFn if provided, or just use the value
-					cell: ({ value, row }) => {
+					cell: ({ value, row, column }) => {
 						return renderComponent
-							? createRender(renderComponent, { value, row, dispatchFn: actionDispatcher })
+							? createRender(renderComponent, { value, row, column, dispatchFn: actionDispatcher })
 							: toStringFn
 							? toStringFn(value)
 							: value;
@@ -394,7 +394,7 @@
 						} else {
 							sendModel.q = searchValue;
 						}
-            
+
 						$filterValue = searchValue;
 					}}
 				>
@@ -402,13 +402,16 @@
 						<input
 							class="input p-2 border border-primary-500"
 							type="text"
+							title="Search within all table rows"
 							bind:value={searchValue}
 							placeholder="Search rows..."
 							id="{tableId}-search"
 						/><button
 							type="reset"
+							title="Clear search"
 							id="{tableId}-searchReset"
 							class="absolute right-3 items-center"
+							aria-label="Clear search"
 							on:click|preventDefault={() => {
 								if (serverSide && !sendModel) {
 									throw new Error('Server-side configuration is missing');
@@ -423,6 +426,7 @@
 					</div>
 					<button
 						type="submit"
+						title="Search"
 						id="{tableId}-searchSubmit"
 						class="btn variant-filled-primary"
 						on:click|preventDefault={() => {
@@ -448,6 +452,7 @@
 					{#if toggle}
 						<SlideToggle
 							name="slider-label"
+							label="Fit to screen"
 							active="bg-primary-500"
 							size="sm"
 							checked={fitToScreen}
@@ -461,6 +466,7 @@
 					{#if resizable !== 'none'}
 						<button
 							type="button"
+							title="Reset column and row sizing"
 							class="btn btn-sm variant-filled-primary rounded-full order-last"
 							on:click|preventDefault={() =>
 								resetResize($headerRows, $pageRows, tableId, columns, resizable)}
@@ -470,6 +476,7 @@
 					{#if exportable}
 						<button
 							type="button"
+							title="Export table data as CSV"
 							class="btn btn-sm variant-filled-primary rounded-full order-last"
 							on:click|preventDefault={() => exportAsCsv(tableId, $exportedData)}
 							>Export as CSV</button
@@ -486,6 +493,7 @@
 					{...$tableAttrs}
 					class="table table-auto table-compact bg-tertiary-500/30 dark:bg-tertiary-900/10 overflow-clip"
 					id="{tableId}-table"
+					title="Table"
 				>
 					<!-- If table height is provided, making the top row sticky -->
 					<thead class={height != null && $pageRows.length > 0 ? `sticky top-0` : ''}>
@@ -511,6 +519,8 @@
 														<div class="flex gap-1 whitespace-pre-wrap">
 															<!-- Adding sorting config and styling -->
 															<span
+																role="button"
+																tabindex="0"
 																class:underline={props.sort.order}
 																class:normal-case={cell.id !== cell.label}
 																class:cursor-pointer={!props.sort.disabled}

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

@@ -240,6 +240,7 @@
 		type="button"
 		use:popup={popupFeatured}
 		id="{popupId}-button"
+		aria-label="Open filter menu for column {id}"
 	>
 		<Fa icon={faFilter} size="12" />
 	</button>
@@ -249,6 +250,7 @@
 			<button
 				class="btn variant-filled-primary btn-sm"
 				type="button"
+				aria-label="Clear Filters"
 				on:click|preventDefault={() => {
 					// Set the defaults when cleared
 					clearFilters();
@@ -273,6 +275,7 @@
 								{#each options[type] as option (option)}
 									<option
 										value={option.value}
+										aria-label={option.label}
 										selected={dropdown.option === option.value}
 										disabled={Object.keys($filters[id]).includes(option.value) &&
 											dropdown.option !== option.value}>{option.label}</option
@@ -281,7 +284,10 @@
 							</select>
 							{#if dropdowns.length > 1}
 								<div
+									role="button"
+									tabindex="0"
 									class="btn variant-filled-warning btn-sm h-full"
+									aria-label="Remove filter"
 									on:click|preventDefault={() => removeFilter(dropdown.option)}
 									on:keydown|preventDefault={() => removeFilter(dropdown.option)}
 								>
@@ -296,6 +302,7 @@
 								class="input p-1 border border-primary-500"
 								on:input={(e) => valueChangeHandler(e, index)}
 								bind:value={dropdown.value}
+								aria-label="Filter value"
 							/>
 						{:else}
 							<input
@@ -303,6 +310,7 @@
 								class="input p-1 border border-primary-500"
 								on:input={(e) => valueChangeHandler(e, index)}
 								bind:value={dropdown.formValue}
+								aria-label="Filter value"
 							/>
 						{/if}
 					</div>
@@ -315,12 +323,15 @@
 			{#if remainingFilters.length}
 				<div
 					class="btn variant-filled-secondary btn-sm cursor-pointer"
+					role="button"
+					tabindex="0"
 					on:click|stopPropagation={() => {
 						addFilter(remainingFilters[0].value, undefined);
 					}}
 					on:keydown|stopPropagation={() => {
 						addFilter(remainingFilters[0].value, undefined);
 					}}
+					aria-label="Add filter"
 				>
 					<div class="flex gap-1 items-center"><Fa icon={faPlus} />Add Filter</div>
 				</div>
@@ -328,6 +339,7 @@
 			<button
 				class="btn variant-filled-primary btn-sm"
 				type="button"
+				aria-label="Apply filters"
 				on:click|preventDefault={() => {
 					$pageIndex = 0;
 					$filterValue = $filters[id];

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

@@ -233,6 +233,7 @@
 		type="button"
 		use:popup={popupFeatured}
 		id="{popupId}-button"
+		aria-label="Open filter menu for column {id}"
 	>
 		<Fa icon={faFilter} size="12" />
 	</button>
@@ -242,6 +243,7 @@
 			<button
 				class="btn variant-filled-primary btn-sm"
 				type="button"
+				aria-label="Clear Filters"
 				on:click|preventDefault={() => {
 					// Set the defaults when cleared
 					clearFilters();
@@ -264,6 +266,7 @@
 								{#each options[type] as option (option)}
 									<option
 										value={option.value}
+										aria-label={option.label}
 										selected={dropdown.option === option.value}
 										disabled={Object.keys($filters[id]).includes(option.value) &&
 											dropdown.option !== option.value}>{option.label}</option
@@ -272,10 +275,13 @@
 							</select>
 							{#if dropdowns.length > 1}
 								<div
+									role="button"
+									tabindex="0"
 									class="btn variant-filled-warning btn-sm h-full"
 									on:click|preventDefault={() => removeFilter(dropdown.option)}
 									on:keydown|preventDefault={() => removeFilter(dropdown.option)}
-								>
+									aria-label="Remove filter"
+									>
 									<Fa icon={faXmark} />
 								</div>
 							{/if}
@@ -294,6 +300,7 @@
 								class="input p-1 border border-primary-500"
 								on:input={(e) => valueChangeHandler(e, index)}
 								bind:value={dropdown.value}
+								aria-label="Filter value"
 							/>
 						{:else}
 							<input
@@ -301,6 +308,7 @@
 								class="input p-1 border border-primary-500"
 								on:input={(e) => valueChangeHandler(e, index)}
 								bind:value={dropdown.value}
+								aria-label="Filter value"
 							/>
 						{/if}
 					</div>
@@ -313,6 +321,9 @@
 			{#if remainingFilters.length}
 				<div
 					class="btn variant-filled-secondary btn-sm cursor-pointer"
+					aria-label="Add filter"
+					role="button"
+					tabindex="0"
 					on:click|stopPropagation={() => {
 						addFilter(remainingFilters[0].value, undefined);
 					}}
@@ -326,6 +337,7 @@
 			<button
 				class="btn variant-filled-primary btn-sm"
 				type="button"
+				aria-label="Apply filters"
 				on:click|preventDefault={applyFilters}>Apply</button
 			>
 		</div>

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

@@ -62,7 +62,11 @@
 			{/each}
 		</select> -->
 
-		<button class="btn variant-filled-primary w-20 justify-between" use:popup={pageSizePopup}>
+		<button
+			aria-label="Open menu to select number of items per page"
+			class="btn variant-filled-primary w-20 justify-between"
+			use:popup={pageSizePopup}
+		>
 			<span class="capitalize font-semibold">{pageSizeDropdownValue}</span>
 			<Fa icon={faChevronDown} size="xs" />
 		</button>
@@ -82,6 +86,7 @@
 		<button
 			class="btn btn-sm variant-filled-primary"
 			on:click|preventDefault={goToFirstPage}
+			aria-label="Go to first page"
 			disabled={goToFirstPageDisabled}
 			id="{id}-first"
 		>
@@ -90,6 +95,7 @@
 		<button
 			class="btn btn-sm variant-filled-primary"
 			id="{id}-previous"
+			aria-label="Go to previous page"
 			on:click|preventDefault={goToPreviousPage}
 			disabled={goToPreviousPageDisabled}><Fa icon={faAngleLeft} /></button
 		>
@@ -98,17 +104,20 @@
 			class="input border border-primary-500 rounded flex w-24"
 			value={$pageIndex + 1}
 			max={$pageCount}
+			aria-label="Current page"
 			min={1}
 			on:change={handleChange}
 		/>
 		<button
 			class="btn btn-sm variant-filled-primary"
 			id="{id}-next"
+			aria-label="Go to next page"
 			on:click|preventDefault={goToNextPage}
 			disabled={goToNextPageDisabled}><Fa icon={faAngleRight} /></button
 		>
 		<button
 			class="btn btn-sm variant-filled-primary"
+			aria-label="Go to last page"
 			id="{id}-last"
 			on:click|preventDefault={goToLastPage}
 			disabled={goToLastPageDisabled}><Fa icon={faAnglesRight} /></button

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

@@ -73,6 +73,7 @@
 		<select
 			name="pageSize"
 			id="{id}-pageSize"
+			aria-label="Open menu to select number of items per page"
 			class="select variant-filled-primary w-min font-bold"
 			bind:value={$pageSize}
 		>
@@ -84,21 +85,26 @@
 	<div class="flex justify-center gap-1">
 		<button
 			class="btn btn-sm variant-filled-primary"
+			title="Go to first page"
 			on:click|preventDefault={() => goTo('first')}
 			disabled={goToFirstPageDisabled}
+			aria-label="Go to first page"
 			id="{id}-first"
 		>
 			<Fa icon={faAnglesLeft} /></button
 		>
 		<button
 			class="btn btn-sm variant-filled-primary"
+			title="Go to previous page"
 			id="{id}-previous"
+			aria-label="Go to previous page"
 			on:click|preventDefault={() => goTo('previous')}
 			disabled={goToPreviousPageDisabled}><Fa icon={faAngleLeft} /></button
 		>
 		<input
 			type="number"
 			class="input border border-primary-500 rounded flex w-24"
+			aria-label="Current page"
 			value={$pageIndex + 1}
 			max={pageCount}
 			min={1}
@@ -108,11 +114,13 @@
 			class="btn btn-sm variant-filled-primary"
 			id="{id}-next"
 			on:click|preventDefault={() => goTo('next')}
+			aria-label="Go to next page"
 			disabled={goToNextPageDisabled}><Fa icon={faAngleRight} /></button
 		>
 		<button
 			class="btn btn-sm variant-filled-primary"
 			id="{id}-last"
+			aria-label="Go to last page"
 			on:click|preventDefault={() => goTo('last')}
 			disabled={goToLastPageDisabled}><Fa icon={faAnglesRight} /></button
 		>

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

@@ -14,7 +14,7 @@
 <InputContainer {label} {feedback} {required}>
 	<input
 		{id}
-		class="input variant-form-material"
+		class="input variant-form-material bg-zinc-50 dark:bg-zinc-50"
 		type="checkbox"
 		class:input-success={valid}
 		class:input-error={invalid}

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

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

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

@@ -13,8 +13,8 @@
 
 <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} value={item} />
+		<label class="flex items-center space-x-2" for={item}>
+			<input class="checkbox" type="checkbox" bind:group={target} value={item} id={item}/>
 			<p>{item}</p>
 		</label>
 	{/each}

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

@@ -15,7 +15,7 @@
 <InputContainer {id} {label} {feedback} {required} {help}>
 	<input
 		{id}
-		class="input variant-form-material"
+		class="input variant-form-material bg-zinc-50 dark:bg-zinc-700 placeholder:text-gray-400"
 		type="date"
 		class:input-success={valid}
 		class:input-error={invalid}

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

@@ -39,7 +39,7 @@
 <InputContainer {id} label={title} {feedback} {required} {help}>
 	<select
 		{id}
-		class="select variant-form-material"
+		class="select variant-form-material dark:bg-zinc-700 bg-zinc-50 placeholder:text-gray-400"
 		class:input-success={valid}
 		class:input-error={invalid}
 		bind:value={selected}

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

@@ -16,7 +16,13 @@
 	function onMouseOut() {}
 </script>
 
-<div id="{id}-container" on:mouseover={onMouseOver} on:focus={onMouseOver} on:mouseout={onMouseOut} on:blur={onMouseOut}>
+<div
+	id="{id}-container"
+	on:mouseover={onMouseOver}
+	on:focus={onMouseOver}
+	on:mouseout={onMouseOut}
+	on:blur={onMouseOut}
+>
 	<label class="label">
 		<span
 			>{label}

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

@@ -4,8 +4,6 @@
 	import Select from 'svelte-select';
 	import { onMount } from 'svelte';
 
-
-
 	export let source;
 	export let target;
 	export let id;
@@ -35,16 +33,14 @@
 	$: groupBy;
 
 	function updateTarget(selection) {
+		console.log('updateTarget', target, selection, isMulti);
+		if (selection == undefined) {
+			console.log('no update');
 
-		console.log("updateTarget", target, selection, isMulti);
-  if(selection == undefined)
-		{
-		  console.log("no update");
-
-				return;
+			return;
 		}
 
-		console.log("update");
+		console.log('update');
 		//different cases
 		//a) source is complex model is simple return array
 		if (complexSource && !complexTarget && isLoaded && isMulti) {
@@ -75,8 +71,8 @@
 		}
 
 		if (!complexSource && !complexTarget && isLoaded && !isMulti) {
-			console.log("🚀 ~ updateTarget ~ selection:", selection)
-			if(selection){
+			console.log('🚀 ~ updateTarget ~ selection:', selection);
+			if (selection) {
 				target = selection.value;
 			}
 		}
@@ -167,118 +163,116 @@
 		//console.log(t,value)
 	}
 
-function filterItemStartFn(label, filterText, option) {
-	// console.log(label, filterText, option);
-	let itemFilter = label.toLowerCase().startsWith(filterText.toLowerCase());
+	function filterItemStartFn(label, filterText, option) {
+		// console.log(label, filterText, option);
+		let itemFilter = label.toLowerCase().startsWith(filterText.toLowerCase());
 
-	return itemFilter;
-}
+		return itemFilter;
+	}
 
-function filterItemExactFn(label, filterText, option) {
-	// console.log(label, filterText, option);
-	let itemFilter = label.toLowerCase() == filterText.toLowerCase();
+	function filterItemExactFn(label, filterText, option) {
+		// console.log(label, filterText, option);
+		let itemFilter = label.toLowerCase() == filterText.toLowerCase();
 
-	return itemFilter;
-}
+		return itemFilter;
+	}
 
-function filterItemIncludesFn(label, filterText, option) {
-	// console.log(label, filterText, option);
-	let itemFilter = label.toLowerCase().includes(filterText.toLowerCase());
+	function filterItemIncludesFn(label, filterText, option) {
+		// console.log(label, filterText, option);
+		let itemFilter = label.toLowerCase().includes(filterText.toLowerCase());
 
-	return itemFilter;
-}
+		return itemFilter;
+	}
 
-function filterFn({
-    loadOptions,
-    filterText,
-    items,
-    multiple,
-    value,
-    itemId,
-    groupBy,
-    filterSelectedItems,
-    itemFilter,
-    convertStringItemsToObjects,
-    filterGroupedItems,
-    label,
-}) {
-    if (items && loadOptions) return items;
-    if (!items) return [];
+	function filterFn({
+		loadOptions,
+		filterText,
+		items,
+		multiple,
+		value,
+		itemId,
+		groupBy,
+		filterSelectedItems,
+		itemFilter,
+		convertStringItemsToObjects,
+		filterGroupedItems,
+		label
+	}) {
+		if (items && loadOptions) return items;
+		if (!items) return [];
+
+		if (items && items.length > 0 && typeof items[0] !== 'object') {
+			items = convertStringItemsToObjects(items);
+		}
 
-    if (items && items.length > 0 && typeof items[0] !== 'object') {
-        items = convertStringItemsToObjects(items);
-    }
+		let filterResults = filterListFn(
+			items,
+			label,
+			filterText,
+			multiple,
+			value,
+			filterSelectedItems,
+			itemId
+		);
+
+		if (groupBy) {
+			filterResults = filterGroupedItems(filterResults, label, filterText);
+		}
 
-    let filterResults = filterListFn(items, label, filterText,multiple,value,filterSelectedItems, itemId)
+		return filterResults;
+	}
 
-    if (groupBy) {
-        filterResults = filterGroupedItems(filterResults, label, filterText);
-    }
+	// filter checks 3 types, exact, starts, includes
+	function filterListFn(items, label, filterText, multiple, value, filterSelectedItems, itemId) {
+		if (!items) return [];
 
-    return filterResults;
-}
+		let exact = items.filter((item) => {
+			let matchesFilter = filterItemExactFn(item[label], filterText, item);
+			if (matchesFilter && multiple && value?.length) {
+				matchesFilter = !value.some((x) => {
+					return filterSelectedItems ? x[itemId] === item[itemId] : false;
+				});
+			}
 
-// filter checks 3 types, exact, starts, includes
-function filterListFn(items ,label , filterText, multiple, value, filterSelectedItems, itemId)
-{
+			return matchesFilter;
+		});
 
-	 if (!items) return [];
+		let starts = items.filter((item) => {
+			let matchesFilter = filterItemStartFn(item[label], filterText, item);
+			if (matchesFilter && multiple && value?.length) {
+				matchesFilter = !value.some((x) => {
+					return filterSelectedItems ? x[itemId] === item[itemId] : false;
+				});
+			}
 
-		let exact = items.filter((item) => {
-						let matchesFilter = filterItemExactFn(item[label], filterText, item);
-						if (matchesFilter && multiple && value?.length) {
-            matchesFilter = !value.some((x) => {
-                return filterSelectedItems ? x[itemId] === item[itemId] : false;
-            });
-        }
+			return matchesFilter;
+		});
 
-							return matchesFilter;
-    });
+		let includes = items.filter((item) => {
+			let matchesFilter = filterItemIncludesFn(item[label], filterText, item);
+			if (matchesFilter && multiple && value?.length) {
+				matchesFilter = !value.some((x) => {
+					return filterSelectedItems ? x[itemId] === item[itemId] : false;
+				});
+			}
 
-		let starts = items.filter((item) => {
-				let matchesFilter = filterItemStartFn(item[label], filterText, item);
-						if (matchesFilter && multiple && value?.length) {
-            matchesFilter = !value.some((x) => {
-                return filterSelectedItems ? x[itemId] === item[itemId] : false;
-            });
-        }
-
-							return matchesFilter;
-
-    });
-
-			let includes = items.filter((item) => {
-				let matchesFilter = filterItemIncludesFn(item[label], filterText, item);
-						if (matchesFilter && multiple && value?.length) {
-            matchesFilter = !value.some((x) => {
-                return filterSelectedItems ? x[itemId] === item[itemId] : false;
-            });
-        }
-
-							return matchesFilter;
-    });
-
-	 
-				let result =  [...exact,...starts,...includes];
-				return [...new Set(result)];
-}
-
-function clearFn(e)
-{
-	 console.log("clear", target, e);
-		if(isMulti)
-		{
-				target = [];
-		}
-		else
-		{
-			target="";
-		}
+			return matchesFilter;
+		});
 
-	 console.log("after clear", target);
-}
+		let result = [...exact, ...starts, ...includes];
+		return [...new Set(result)];
+	}
 
+	function clearFn(e) {
+		console.log('clear', target, e);
+		if (isMulti) {
+			target = [];
+		} else {
+			target = '';
+		}
 
+		console.log('after clear', target);
+	}
 </script>
 
 <InputContainer {id} label={title} {feedback} {required} {help}>
@@ -295,7 +289,7 @@ function clearFn(e)
 		{loading}
 		{clearable}
 		{disabled}
-  filter={filterFn}
+		filter={filterFn}
 		on:change
 		on:input
 		on:focus

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

@@ -18,7 +18,7 @@
 <InputContainer {id} {label} {feedback} {required} {help}>
 	<input
 		{id}
-		class="input variant-form-material"
+		class="input variant-form-material dark:bg-zinc-700 bg-zinc-50 placeholder:text-gray-400"
 		type="number"
 		class:input-success={valid}
 		class:input-error={invalid}

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

@@ -17,7 +17,7 @@
 <InputContainer {id} {label} {feedback} {required} {help}>
 	<textarea
 		{id}
-		class="textarea variant-form-material"
+		class="textarea variant-form-material dark:bg-zinc-700 bg-zinc-50 placeholder:text-gray-400"
 		class:input-success={valid}
 		class:input-error={invalid}
 		bind:value