@lavalogic/scoria 0.30.0 → 0.31.0

package/dist/Components/DesktopModal.svelte

@@ -25,7 +25,7 @@
 		minWidth,
 		minHeight,
 		width,
-		height
+		height,
 	}: DesktopModalProps = $props();
 </script>
 
@@ -96,7 +96,10 @@
 	</div>
 
 	{#if isLoading}
-		<LoadingOverlay absolute message={loadingMessage} />
+		<LoadingOverlay
+			absolute
+			message={loadingMessage}
+		/>
 	{/if}
 </Modal>
 

package/dist/Components/HorizontalTabGroup.svelte

@@ -4,8 +4,11 @@
 	lang="ts"
 	generics="CommonDenominator"
 >
+	import { ellipses } from '../Helpers/Helpers.svelte.js';
+	import { Colour } from '../scss/colours.js';
 	import HorizontalTabGroupButton from './HorizontalTabGroupButton.svelte';
 	import type { HorizontalTabGroupProps } from './HorizontalTabGroupProps.js';
+	import TextInput from './TextInput.svelte';
 	let {
 		// name: _name, //FIXME why is this not implemented?
 		tabComponent,
@@ -13,7 +16,24 @@
 		selected,
 		noRadius = false,
 		grow = false,
+		filterable = false,
+		filterFn,
 	}: HorizontalTabGroupProps<CommonDenominator> = $props();
+
+	// svelte-ignore state_referenced_locally
+	let filteredTabs = $state(tabs);
+
+	$effect(() => {
+		const term = searchValue;
+		const id = setTimeout(() => {
+			filteredTabs = filterFn ? tabs.filter((t) => filterFn(t, term)) : tabs;
+		}, 300);
+		return () => {
+			clearTimeout(id);
+		};
+	});
+
+	let searchValue = $state('');
 </script>
 
 <div
@@ -22,14 +42,24 @@
 	class:grow
 >
 	<div class="tabs">
+		{#if filterable}
+			<div class="searchbar">
+				<TextInput
+					bind:value={searchValue}
+					placeholder="Search any keyword to find matches{ellipses}"
+					rightIcon={{ name: 'search-1', colour: Colour['$ui-blue-4'] }}
+				/>
+			</div>
+		{/if}
 		{#if tabComponent}
-			{#each tabs as option (option)}
+			{#each filteredTabs as option (option)}
 				{@render tabComponent(option, selected === option)}
 			{/each}
 		{:else}
-			{#each tabs as option (option)}
+			{#each filteredTabs as option (option)}
 				<HorizontalTabGroupButton
 					{option}
+					noRadius={noRadius || filterable}
 					selected={selected === option}
 				/>
 			{/each}
@@ -43,7 +73,15 @@
 	</div>
 </div>
 
-<style>.wrapper {
+<style>.searchbar {
+  display: flex;
+  width: 100%;
+  padding: 0.5rem;
+  background-color: #ffffff;
+  min-width: 330px;
+}
+
+.wrapper {
   box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1333333333);
   border-radius: 4px;
   display: flex;
@@ -65,6 +103,8 @@
   border-radius: 4px 0 0 4px;
   display: flex;
   flex-flow: column nowrap;
+  padding-top: 1px;
+  gap: 1px;
   min-width: 10rem;
   background-color: #e9ecf1;
   border-right: solid 1px #cbd4da;

package/dist/Components/HorizontalTabGroupButton.svelte

@@ -6,13 +6,11 @@
 >
 	import { devCatch } from '../Helpers/Helpers.svelte.js';
 	import { Colour } from '../scss/colours.js';
-
 	import { Size } from '../Types/Internal/Size.js';
-
 	import Icon from './Icon.svelte';
 	import type { TabGroupButtonProps } from './TabGroupButtonProps.js';
 
-	let { option, selected }: TabGroupButtonProps<Args> = $props();
+	let { option, selected, noRadius = false }: TabGroupButtonProps<Args> = $props();
 
 	let disabled = $state(true);
 	let visible = $state(true);
@@ -68,13 +66,15 @@
 	class:invalid={!isValid}
 	{disabled}
 	class:hidden={!visible}
+	class:no-radius={noRadius}
 >
-	<Icon
+	<div class="selected-marker"></div>
+	<!-- <Icon
 		name="nothing"
 		colour={Colour['$brand-primary']}
 		size={Size.Small}
 		{...option.iconLeft}
-	/>
+	/> -->
 
 	{option.label}
 	{#if !isValid}
@@ -83,13 +83,13 @@
 			colour={Colour['$error-border']}
 			size={Size.Small}
 		/>
-	{:else}
+		<!-- {:else}
 		<Icon
 			name="nothing"
 			colour={Colour['$brand-primary']}
 			size={Size.Small}
 			{...option.iconRight}
-		/>
+		/> -->
 	{/if}
 </button>
 
@@ -102,27 +102,52 @@
   cursor: pointer;
   font-size: 1rem;
   font-weight: 500;
-  padding: 0.75rem;
-  background-color: transparent;
+  padding: 1rem;
+  background-color: #ffffff;
   border: none;
-  transition: border-color ease-out 0.15s 0s, background-color ease-out 0.15s 0s, color ease-out 0.15s 0s, fill ease-out 0.15s 0s;
   text-align: start;
   display: flex;
   flex-flow: row nowrap;
   align-items: center;
   width: 100%;
-  justify-content: space-between;
   gap: 0.5rem;
+  position: relative;
+  transition: border-color ease-out 0.15s 0s, background-color ease-out 0.15s 0s, color ease-out 0.15s 0s, fill ease-out 0.15s 0s;
 }
-.tab:first-child {
-  border-radius: 4px 0 0 0;
+.tab .selected-marker {
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  height: 100%;
+  opacity: 0;
+  background-color: #259fc7;
+  width: 0.3333333333rem;
+  transition: border-color ease-out 0.15s 0s, background-color ease-out 0.15s 0s, color ease-out 0.15s 0s, fill ease-out 0.15s 0s, opacity ease-out 0.15s 0s;
 }
 .tab.selected {
-  background-color: white;
+  color: #259fc7;
+}
+.tab.selected .selected-marker {
+  opacity: 1;
+}
+.tab:hover, .tab.selected:hover {
+  color: #49b8dc;
+  background-color: #f4f7f9;
+}
+.tab:hover .selected-marker, .tab.selected:hover .selected-marker {
+  opacity: 1;
+  background-color: #49b8dc;
+}
+.tab:not(.no-radius):first-child {
+  border-radius: 4px 0 0 0;
 }
 .tab:hover, .tab.selected:hover, .tab.invalid:hover {
   background-color: #f4f7f9;
 }
+.tab.invalid .selected-marker {
+  background-color: #aa1414 !important;
+}
 .tab.invalid {
-  color: #aa1414;
+  color: #aa1414 !important;
 }</style>

package/dist/Components/HorizontalTabGroupProps.d.ts

@@ -1,10 +1,22 @@
 import type { TabOption } from '../Types/Internal/TabOption.js';
 import type { Snippet } from 'svelte';
-export interface HorizontalTabGroupProps<CommonDenominator> {
+export type HorizontalTabGroupProps<CommonDenominator> = HorizontalTabGroupPropsWithSearch<CommonDenominator> | HorizontalTabGroupPropsWithoutSearch<CommonDenominator>;
+interface HorizontalTabGroupPropsBase<CommonDenominator> {
     name?: string;
     tabComponent?: Snippet<[TabOption<CommonDenominator>, boolean]>;
     noRadius?: boolean;
     grow?: boolean;
     tabs: Array<TabOption<CommonDenominator>>;
     selected: TabOption<CommonDenominator> | undefined;
+    filterable?: boolean;
+    filterFn?: (item: TabOption<CommonDenominator>, filterValue: string) => boolean;
 }
+export interface HorizontalTabGroupPropsWithoutSearch<CommonDenominator> extends HorizontalTabGroupPropsBase<CommonDenominator> {
+    filterable?: false;
+    filterFn?: never;
+}
+export interface HorizontalTabGroupPropsWithSearch<CommonDenominator> extends HorizontalTabGroupPropsBase<CommonDenominator> {
+    filterable: true;
+    filterFn: (item: TabOption<CommonDenominator>, filterValue: string) => boolean;
+}
+export {};

package/dist/Components/Nav/Nav.svelte

@@ -1,7 +1,8 @@
 <svelte:options runes />
 
 <script lang="ts">
-	import { Icon, Size } from '@lavalogic/scoria';
+	import { Size } from '../../Types/Internal/Size.js';
+	import Icon from '../Icon.svelte';
 	import type { NavProps } from './NavProps.js';
 	import ServicesNav from './ServicesNav.svelte';
 

package/dist/Components/Nav/NavServiceMenuList.svelte

@@ -1,7 +1,9 @@
 <svelte:options runes />
 
 <script lang="ts">
-	import { Colour, Icon, Size } from '@lavalogic/scoria';
+	import { Colour } from '../../scss/colours.js';
+	import { Size } from '../../Types/Internal/Size.js';
+	import Icon from '../Icon.svelte';
 	import type { NavServiceMenuListProps } from './NavServiceMenuListProps.js';
 	import ServiceMenuItem from './ServiceMenuItem.svelte';
 

package/dist/Components/Nav/ServiceMenuItem.svelte

@@ -4,7 +4,9 @@
 	import { dev } from '$app/environment';
 	import { resolve } from '$app/paths';
 	import { page } from '$app/state';
-	import { devCatch, Icon, Size } from '@lavalogic/scoria';
+	import { devCatch } from '../../Helpers/Helpers.svelte.js';
+	import { Size } from '../../Types/Internal/Size.js';
+	import Icon from '../Icon.svelte';
 	import { Dimensions } from './Dimensions.js';
 	import type { SideMenuItemProps } from './SideMenuItemProps.js';
 

package/dist/Components/Nav/ServicesNav.svelte

@@ -1,7 +1,8 @@
 <svelte:options runes />
 
 <script lang="ts">
-	import { HorizontalTabGroup, type TabOption } from '@lavalogic/scoria';
+	import type { TabOption } from '../../Types/Internal/TabOption.js';
+	import HorizontalTabGroup from '../HorizontalTabGroup.svelte';
 	import NavTab from './NavTab.svelte';
 	import type { ServicesNavProps } from './ServicesNavProps.js';
 

package/dist/Components/Nav/SideMenuItemProps.d.ts

@@ -1,9 +1,5 @@
 import type { CallbackButtonWithIcon } from './CallbackButtonWithIcon.js';
-export declare const SideMenuItemVariant: {
-    readonly Nav: "Nav";
-    readonly Tab: "Tab";
-};
-export type SideMenuItemVariant = (typeof SideMenuItemVariant)[keyof typeof SideMenuItemVariant];
+import type { SideMenuItemVariant } from './SideMenuItemVariant.js';
 export interface SideMenuItemProps {
     item: CallbackButtonWithIcon;
     selected?: boolean;

package/dist/Components/Nav/SideMenuItemProps.js

@@ -1,5 +1 @@
-export const SideMenuItemVariant = {
-    Nav: 'Nav',
-    Tab: 'Tab',
-};
-Object.freeze(SideMenuItemVariant);
+export {};

package/dist/Components/Nav/SideMenuItemVariant.d.ts

@@ -0,0 +1,5 @@
+export declare const SideMenuItemVariant: {
+    readonly Nav: "Nav";
+    readonly Tab: "Tab";
+};
+export type SideMenuItemVariant = (typeof SideMenuItemVariant)[keyof typeof SideMenuItemVariant];

package/dist/Components/Nav/SideMenuItemVariant.js

@@ -0,0 +1,5 @@
+export const SideMenuItemVariant = {
+    Nav: 'Nav',
+    Tab: 'Tab',
+};
+Object.freeze(SideMenuItemVariant);

package/dist/Components/TabGroupButtonProps.d.ts

@@ -2,4 +2,5 @@ import type { TabOption } from '../Types/Internal/TabOption.js';
 export interface TabGroupButtonProps<Args> {
     option: TabOption<Args>;
     selected: boolean;
+    noRadius?: boolean;
 }

package/dist/Helpers/Helpers.svelte.d.ts

@@ -54,6 +54,7 @@ export declare function hasQuery<FilterValueType>(customFilter: CustomFilter<Fil
 export declare function isDateTuple(value: unknown): value is [Date | null, Date | null];
 export declare function isNumericArray(value: unknown): value is Array<number | null>;
 export declare function isValidityTuple(v: Validity | ValidityWrapper | undefined): v is ValidityWrapper;
+export declare const ellipses = "\u2026";
 export declare const loadingText = "loading\u2026";
 export declare function isKeyOf<T extends object>(key: string, obj: T): key is string & keyof T;
 export interface ICreateTableArgs<T extends object, RowIdType extends Primitive> {

package/dist/Helpers/Helpers.svelte.js

@@ -410,6 +410,7 @@ export function isNumericArray(value) {
 export function isValidityTuple(v) {
     return v != null && typeof v == 'object';
 }
+export const ellipses = '…';
 export const loadingText = 'loading…';
 export function isKeyOf(key, obj) {
     return key in obj;

package/dist/index.d.ts

@@ -68,7 +68,8 @@ export { default as NavTab } from './Components/Nav/NavTab.svelte';
 export { default as ServiceMenuItem } from './Components/Nav/ServiceMenuItem.svelte';
 export { default as ServicesNav } from './Components/Nav/ServicesNav.svelte';
 export { type ServicesNavProps } from './Components/Nav/ServicesNavProps.js';
-export { SideMenuItemVariant, type SideMenuItemProps, } from './Components/Nav/SideMenuItemProps.js';
+export { type SideMenuItemProps } from './Components/Nav/SideMenuItemProps.js';
+export { SideMenuItemVariant } from './Components/Nav/SideMenuItemVariant.js';
 export { default as NumberInput } from './Components/NumberInput.svelte';
 export type { NumberInputProps } from './Components/NumberInputProps.js';
 export { type PartialIconProps } from './Components/PartialIconProps.js';
@@ -222,11 +223,10 @@ export { TooltipContext } from './Contexts/TooltipContext.svelte.js';
 export { UntypedInputContext } from './Contexts/UntypedInputContext.svelte.js';
 export { Delay } from './Delay/Delay.js';
 export { DATAMatrix } from './Helpers/Datamatrix.js';
-export { asyncAll, asyncEvery, asyncFilter, asyncFilterIndices, asyncFlatMap, asyncForEach, asyncMap, asyncSleep, asyncSome, autoPluralise, createLocalTable, devCatch, generateShortUUID, generateUUID, getAccessorSortingFn, getCanvasContext, getErrorMessage, gridItem, isDateTuple, isNumericArray, isValidEmailAddress, loadingText, localTimeFormat, passthrough, refWrapper, SQLFriendly, SQLFriendlyWithLocalTime, vowels, type ICreateTableArgs, } from './Helpers/Helpers.svelte.js';
+export { asyncAll, asyncEvery, asyncFilter, asyncFilterIndices, asyncFlatMap, asyncForEach, asyncMap, asyncSleep, asyncSome, autoPluralise, createLocalTable, devCatch, ellipses, generateShortUUID, generateUUID, getAccessorSortingFn, getCanvasContext, getErrorMessage, gridItem, isDateTuple, isNumericArray, isValidEmailAddress, loadingText, localTimeFormat, passthrough, refWrapper, SQLFriendly, SQLFriendlyWithLocalTime, vowels, type ICreateTableArgs, } from './Helpers/Helpers.svelte.js';
 export { type INamed } from './Helpers/INamed.js';
 export { Colour, ColourSet } from './scss/colours.js';
 export { Sizing } from './scss/sizing.js';
-export { AttributeOperation } from './Types/Internal/AttributeOperation.js';
 export { type BigRadioOption } from './Types/Internal/BigRadioOption.js';
 export { type ButtonProp } from './Types/Internal/ButtonProp.js';
 export { type CallbackButton } from './Types/Internal/CallbackButton.js';

package/dist/index.js

@@ -48,7 +48,8 @@ export { default as NavTab } from './Components/Nav/NavTab.svelte';
 export { default as ServiceMenuItem } from './Components/Nav/ServiceMenuItem.svelte';
 export { default as ServicesNav } from './Components/Nav/ServicesNav.svelte';
 export {} from './Components/Nav/ServicesNavProps.js';
-export { SideMenuItemVariant, } from './Components/Nav/SideMenuItemProps.js';
+export {} from './Components/Nav/SideMenuItemProps.js';
+export { SideMenuItemVariant } from './Components/Nav/SideMenuItemVariant.js';
 export { default as NumberInput } from './Components/NumberInput.svelte';
 export {} from './Components/PartialIconProps.js';
 export { default as PasswordInput } from './Components/PasswordInput.svelte';
@@ -165,11 +166,10 @@ export { TooltipContext } from './Contexts/TooltipContext.svelte.js';
 export { UntypedInputContext } from './Contexts/UntypedInputContext.svelte.js';
 export { Delay } from './Delay/Delay.js';
 export { DATAMatrix } from './Helpers/Datamatrix.js';
-export { asyncAll, asyncEvery, asyncFilter, asyncFilterIndices, asyncFlatMap, asyncForEach, asyncMap, asyncSleep, asyncSome, autoPluralise, createLocalTable, devCatch, generateShortUUID, generateUUID, getAccessorSortingFn, getCanvasContext, getErrorMessage, gridItem, isDateTuple, isNumericArray, isValidEmailAddress, loadingText, localTimeFormat, passthrough, refWrapper, SQLFriendly, SQLFriendlyWithLocalTime, vowels, } from './Helpers/Helpers.svelte.js';
+export { asyncAll, asyncEvery, asyncFilter, asyncFilterIndices, asyncFlatMap, asyncForEach, asyncMap, asyncSleep, asyncSome, autoPluralise, createLocalTable, devCatch, ellipses, generateShortUUID, generateUUID, getAccessorSortingFn, getCanvasContext, getErrorMessage, gridItem, isDateTuple, isNumericArray, isValidEmailAddress, loadingText, localTimeFormat, passthrough, refWrapper, SQLFriendly, SQLFriendlyWithLocalTime, vowels, } from './Helpers/Helpers.svelte.js';
 export {} from './Helpers/INamed.js';
 export { Colour, ColourSet } from './scss/colours.js';
 export { Sizing } from './scss/sizing.js';
-export { AttributeOperation } from './Types/Internal/AttributeOperation.js';
 export {} from './Types/Internal/BigRadioOption.js';
 export {} from './Types/Internal/ButtonProp.js';
 export {} from './Types/Internal/CallbackButton.js';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lavalogic/scoria",
   "description": "Svelte components used for the FloWMS Web Frontend",
-  "version": "0.30.0",
+  "version": "0.31.0",
   "publishConfig": {
     "access": "restricted"
   },

package/dist/Types/Internal/AttributeOperation.d.ts

@@ -1,31 +0,0 @@
-export declare const AttributeOperation: {
-    readonly Preadvice: "Preadvice";
-    readonly RequiredAtPreadvice: "Preadvice";
-    readonly Order: "Order";
-    readonly RequiredAtOrder: "Order";
-    readonly Despatch: "Despatch";
-    readonly RequiredAtDespatch: "RequiredAtDespatch";
-    readonly ValidateAtDespatch: "ValidateAtDespatch";
-    readonly Kit: "Kit";
-    readonly RequiredAtKit: "RequiredAtKit";
-    readonly ValidateAtKit: "ValidateAtKit";
-    readonly Pack: "Pack";
-    readonly RequiredAtPack: "RequiredAtPack";
-    readonly ValidateAtPack: "ValidateAtPack";
-    readonly Pick: "Pick";
-    readonly RequiredAtPick: "RequiredAtPick";
-    readonly ValidateAtPick: "ValidateAtPick";
-    readonly Receipt: "Receipt";
-    readonly RequiredAtReceipt: "RequiredAtReceipt";
-    readonly ValidateAtReceipt: "ValidateAtReceipt";
-    readonly ReceiptReturn: "ReceiptReturn";
-    readonly RequiredAtReceiptReturn: "RequiredAtReceiptReturn";
-    readonly ValidateAtReceiptReturn: "ValidateAtReceiptReturn";
-    readonly Sort: "Sort";
-    readonly RequiredAtSort: "RequiredAtSort";
-    readonly ValidateAtSort: "ValidateAtSort";
-    readonly StockTake: "StockTake";
-    readonly RequiredAtStockTake: "RequiredAtStockTake";
-    readonly ValidateAtStockTake: "ValidateAtStockTake";
-};
-export type AttributeOperation = (typeof AttributeOperation)[keyof typeof AttributeOperation];

package/dist/Types/Internal/AttributeOperation.js

@@ -1,31 +0,0 @@
-export const AttributeOperation = {
-    Preadvice: 'Preadvice',
-    RequiredAtPreadvice: 'Preadvice', //functionally identical
-    Order: 'Order',
-    RequiredAtOrder: 'Order', // functionally identical
-    Despatch: 'Despatch',
-    RequiredAtDespatch: 'RequiredAtDespatch',
-    ValidateAtDespatch: 'ValidateAtDespatch',
-    Kit: 'Kit',
-    RequiredAtKit: 'RequiredAtKit',
-    ValidateAtKit: 'ValidateAtKit',
-    Pack: 'Pack',
-    RequiredAtPack: 'RequiredAtPack',
-    ValidateAtPack: 'ValidateAtPack',
-    Pick: 'Pick',
-    RequiredAtPick: 'RequiredAtPick',
-    ValidateAtPick: 'ValidateAtPick',
-    Receipt: 'Receipt',
-    RequiredAtReceipt: 'RequiredAtReceipt',
-    ValidateAtReceipt: 'ValidateAtReceipt',
-    ReceiptReturn: 'ReceiptReturn',
-    RequiredAtReceiptReturn: 'RequiredAtReceiptReturn',
-    ValidateAtReceiptReturn: 'ValidateAtReceiptReturn',
-    Sort: 'Sort',
-    RequiredAtSort: 'RequiredAtSort',
-    ValidateAtSort: 'ValidateAtSort',
-    StockTake: 'StockTake',
-    RequiredAtStockTake: 'RequiredAtStockTake',
-    ValidateAtStockTake: 'ValidateAtStockTake'
-};
-Object.freeze(AttributeOperation);