@lavalogic/scoria 0.0.1

package/dist/Components/SingleSelect.svelte

@@ -0,0 +1,480 @@
+<svelte:options runes />
+
+<script lang="ts" module>
+	import { generateShortUUID, vowels } from '../Helpers/Helpers.svelte.js';
+	import { Colour, ColourSet } from '../scss/colours.js';
+	import type { NonNullableKey, ValueProp } from '../Types/Internal/Misc.js';
+	import { Size } from '../Types/Internal/Size.js';
+	import Svelecte from 'svelecte';
+	import { onMount, tick } from 'svelte';
+	import Action from './Action.svelte';
+
+	interface commonProps<V extends object, VP extends ValueProp<V> = ValueProp<V>> {
+		options: V[];
+
+		labelProp: NonNullableKey<V>;
+		valueProp: VP;
+		// value: V | V[VP] | null;
+
+		name?: string;
+		width?: string;
+		height?: string;
+		label?: string;
+		minHeight?: string;
+		focusOnLoad?: boolean;
+		searchable?: boolean;
+		creatable?: boolean;
+		onCreateOption?: (option: V) => void;
+		virtual?: boolean;
+		clearable?: boolean;
+		disabled?: boolean;
+		borderless?: boolean;
+		forceUpwards?: boolean;
+		lazyDropdown?: boolean;
+		required?: boolean;
+		invalid?: boolean;
+		inputId?: string;
+		createFilter?: (value: string) => boolean;
+		onkeydown?: (e: KeyboardEvent) => void;
+		onfocus?: (target: HTMLInputElement) => void;
+		onchange: (newValue: V | null) => void;
+	}
+
+	export interface SingleSelectPropsAsObject<
+		V extends object,
+		VP extends ValueProp<V> = ValueProp<V>
+	> extends commonProps<V, VP> {
+		valueAsObject: true;
+		value: V | null;
+	}
+
+	export interface SingleSelectPropsAsPrimitive<
+		V extends object,
+		VP extends ValueProp<V> = ValueProp<V>
+	> extends commonProps<V, VP> {
+		valueAsObject: false;
+		value: V[VP] | null;
+	}
+
+	export type SingleSelectProps<V extends object, VP extends ValueProp<V> = ValueProp<V>> =
+		| SingleSelectPropsAsPrimitive<V, VP>
+		| SingleSelectPropsAsObject<V, VP>;
+</script>
+
+<script lang="ts" generics="V extends object, VP extends ValueProp<V> = ValueProp<V>">
+	const {
+		label,
+		options,
+		labelProp,
+		valueProp,
+		focusOnLoad = false,
+		searchable = true,
+		creatable = false,
+		virtual = false,
+		createFilter,
+		disabled,
+		width,
+		height,
+		name = 'Item',
+		valueAsObject,
+		minHeight,
+		clearable = false,
+		required = false,
+		invalid = false,
+		borderless = false,
+		lazyDropdown = false,
+		forceUpwards = false,
+		inputId = generateShortUUID(),
+		value: selectedValue,
+		onchange,
+		onkeydown,
+		onfocus,
+		onCreateOption
+	}: SingleSelectProps<V, VP> = $props();
+
+	// FIXME this in combination with the effect may trigger a double assignment on mount. We will need to test it.
+	let currentValue: V | V[VP] | null = $state(selectedValue);
+	let ref: Svelecte | undefined = $state();
+	let wrapperRef: HTMLDivElement | undefined = $state();
+
+	$effect.pre(() => {
+		void options;
+		void selectedValue;
+		currentValue = selectedValue;
+	});
+
+	// WARN this is potentially duplicating existing logic
+	// $effect.pre(() => {
+	// 	if (selectedValue) {
+	// 		const found = options.find((opt) => opt[valueProp] === selectedValue[valueProp]);
+	// 		debugger;
+	// 		if (!found) {
+	// 			onCreateOption?.(selectedValue);
+	// 		} else {
+	// 			console.log(options);
+	// 		}
+	// 	}
+	// });
+
+	const an = $derived(name && vowels.has(name[0]?.toLocaleLowerCase()) ? 'an' : 'a');
+
+	const isInvalid = $derived((required && !currentValue) || invalid);
+
+	let hasAutoFocused = $state(false);
+	const dropdownBottom = $derived(wrapperRef ? wrapperRef.getBoundingClientRect().height : 0);
+
+	function forceShowDropdown(input: HTMLInputElement) {
+		if (focusOnLoad && !hasAutoFocused) {
+			hasAutoFocused = true;
+
+			input.click();
+
+			// HACK. the default selectOnTab functionality selects the highlighted element,
+			// this selects the first element on the list
+			// please decide which one we'll be using and be consistent
+			// input.addEventListener('keydown', (e) => {
+			// 	onkeydown(e)
+			// if (e.key === 'Tab') {
+			// 	const inputElement = e.target as HTMLInputElement | undefined;
+			// 	if (inputElement && inputElement.value.trim()) {
+			// 		(
+			// 			inputElement?.parentElement?.parentElement?.parentElement?.parentElement?.querySelector(
+			// 				'[data-pos="0"]' //first element from dropdown
+			// 			) as HTMLElement | undefined
+			// 		)?.click();
+			// 	} else if (optional) {
+			// 		dispatch('change', null);
+			// 	}
+			// }
+			// });
+		}
+	}
+
+	// let hidden = $state(false);
+	let isExpanded = $state(false);
+
+	onMount(() => {
+		if (focusOnLoad) {
+			tick().then(() => {
+				// FIXME uncomment
+				ref?.focus();
+			});
+		}
+
+		const input = document.getElementById(inputId);
+		// input?.addEventListener('focus', () => {
+		// 	hidden = true;
+		// });
+		// input?.addEventListener('blur', () => {
+		// 	hidden = false;
+		// });
+
+		// HACK callback for is-open on/off
+		const dropdownRef = input?.closest('div.svelecte')?.querySelector('.sv_dropdown') ?? undefined;
+		const observer = new MutationObserver((mutations: MutationRecord[]) => {
+			for (let i = mutations.length - 1; i > -1; i--) {
+				const mutation = mutations[i];
+				if (mutation.attributeName === 'class') {
+					isExpanded = dropdownRef?.classList?.contains('is-open') ?? false;
+				}
+			}
+		});
+
+		if (dropdownRef) {
+			observer.observe(dropdownRef, { attributes: true });
+		}
+
+		return () => {
+			observer.disconnect();
+		};
+	});
+
+	// function onChange(v: V | null) {
+	// 	if (clearable || v != null) {
+	// 		onchange(v ?? null);
+	// 	} else {
+	// 		currentValue = null;
+	// 		currentValue = selectedValue;
+	// 	}
+	// }
+</script>
+
+<div
+	class="select-wrapper"
+	class:no-border={borderless}
+	style={`${width ? `--input-width: ${width};` : ''}${height ? `--input-height: ${height};` : ''}--dropdown-bottom: calc(${dropdownBottom}px + 1px);${`--sv-min-height: ${minHeight ?? '2rem'};`}`}
+	class:invalid={isInvalid}
+	class:force-upwards={forceUpwards}
+	bind:this={wrapperRef}
+>
+	{#if label}
+		<label for={inputId}>
+			<span
+				>{label}{#if !required}&nbsp;- <i>optional</i>{/if}</span
+			>
+			<span class="border"
+				>{label}{#if !required}&nbsp;- <i>optional</i>{/if}</span
+			>
+		</label>
+	{/if}
+
+	<Svelecte
+		{createFilter}
+		{disabled}
+		{name}
+		onFocus={(target: HTMLInputElement) => {
+			forceShowDropdown(target);
+			onfocus?.(target);
+		}}
+		bind:this={ref}
+		{valueAsObject}
+		{inputId}
+		{required}
+		valueField={valueProp}
+		labelField={labelProp}
+		virtualList={false}
+		{options}
+		{creatable}
+		searchProps={{ keepSelectionInList: true }}
+		{onCreateOption}
+		placeholder="Please Select {name ? `${an} ${name}` : ''}"
+		{lazyDropdown}
+		value={// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		currentValue as any[]}
+		onChange={onchange}
+		{searchable}
+		selectOnTab
+		keepSelectionInList
+		deselectMode={clearable ? 'toggle' : 'none'}
+	>
+		{#snippet option(opt)}<span class="dropdown-item"> {(opt as V)[labelProp]}</span>{/snippet}
+
+		{#snippet append()}
+			<div class="icons">
+				{#if clearable && currentValue}
+					<Action
+						noTabIndex
+						onclick={(e) => {
+							if (isExpanded) {
+								e.stopPropagation();
+							}
+
+							onchange(null);
+						}}
+						{disabled}
+						colourSet={ColourSet.Auxiliary}
+						size={Size.Small}
+						icon={{
+							name: 'close-menu-cross',
+							colour: Colour['$ui-blue-10']
+						}}
+					/>
+				{/if}
+
+				<Action
+					noTabIndex
+					colourSet={ColourSet.Auxiliary}
+					size={Size.Small}
+					{disabled}
+					icon={{
+						name: isExpanded ? 'chevron-up' : 'chevron-down',
+						colour: Colour['$ui-blue-10']
+					}}
+				/>
+			</div>
+		{/snippet}
+		{#snippet toggleIcon()}
+			<div class="nothing"></div>
+			<!-- <div class="icon-bg">
+				<Icon name="chevron-down" size={Size.MediumSmall} />
+			</div> -->
+		{/snippet}
+		<!--  eslint-disable-next-line @typescript-eslint/no-explicit-any  -->
+		{#snippet selection(selectedOptions: Array<any>)}
+			<!-- <span class="selection">hello</span> -->
+
+			<span class="selection" class:invalid={isInvalid}>
+				{#if typeof selectedValue == 'object'}
+					{(selectedValue as V | null)?.[labelProp]}
+				{:else}
+					{options.find((it) => it[valueProp] === selectedValue)?.[labelProp]}
+				{/if}
+			</span>
+		{/snippet}
+	</Svelecte>
+</div>
+
+<style>.select-wrapper {
+  min-width: var(--input-min-width);
+  width: min(100%, max(var(--input-width), 12rem));
+  height: max(var(--input-height, 3rem));
+  display: flex;
+  gap: 2rem;
+  color: #3a4952;
+  position: relative;
+}
+.select-wrapper.invalid {
+  --sv-border: solid 1px #aa1414;
+  --sv-control-bg: #f9e9e9;
+}
+.select-wrapper.invalid label span:not(.border) {
+  color: #aa1414;
+}
+.select-wrapper.invalid label span {
+  border-top-color: #f9e9e9;
+}
+.select-wrapper label {
+  position: absolute;
+  left: 0.5rem;
+  z-index: 1;
+  font-size: 0.9375rem;
+  padding: 0.05rem 0.4rem;
+  color: #647d8e;
+}
+.select-wrapper label span:not(.border) {
+  position: absolute;
+  left: 0.5rem;
+  font-size: 0.9375rem;
+  user-select: none;
+  padding-left: 0.4rem;
+  padding-right: 0.4rem;
+  padding: 0.1rem 0.4rem;
+  top: -0.6rem;
+  z-index: 2;
+  color: #647d8e;
+  white-space: nowrap;
+}
+.select-wrapper label span:not(.border).invalid {
+  color: #aa1414;
+}
+.select-wrapper label span.border {
+  position: absolute;
+  left: 0.5rem;
+  font-size: 0.9375rem;
+  user-select: none;
+  padding-left: 0.4rem;
+  padding-right: 0.4rem;
+  padding-top: 0;
+  padding-bottom: 0;
+  z-index: 1;
+  white-space: nowrap;
+  top: 0%;
+  height: 0;
+  color: transparent;
+  border-bottom: solid 1px #ffffff;
+}
+.select-wrapper label span.border.invalid {
+  border-bottom-color: #f9e9e9;
+}
+.select-wrapper :global(.svelecte.svelecte-control) {
+  cursor: pointer;
+  max-width: 100%;
+  max-height: 100%;
+  box-sizing: border-box;
+}
+.select-wrapper :global(.sv-item--content) {
+  font-size: 0.9375rem;
+}
+.select-wrapper :global(.sv-item--wrap.in-dropdown) {
+  cursor: pointer;
+  min-height: 40px;
+  align-items: center;
+}
+.select-wrapper :global(.sv-item--content) {
+  min-height: 1.2rem;
+}
+.select-wrapper :global(.sv-btn-indicator) {
+  cursor: pointer;
+}
+.select-wrapper.no-border {
+  --sv-border: none;
+}
+.select-wrapper .select-wrapper.force-upwards :global .sv_dropdown.is-open {
+  bottom: var(--dropdown-bottom);
+}
+.select-wrapper :global .sv-control {
+  width: 100%;
+  height: 100%;
+  font-size: 0.9375rem;
+}
+.select-wrapper :global .sv-control--selection {
+  flex-flow: row nowrap;
+}
+.select-wrapper :global .sv-control--selection span.sv-input--sizer {
+  position: static;
+  margin: -1px;
+}
+.select-wrapper :global .sv-control--selection span.sv-input--sizer input {
+  font-size: 0.9375rem;
+}
+.select-wrapper :global .svelecte.svelecte-control {
+  cursor: pointer;
+}
+.select-wrapper :global .sv-item--wrap.in-dropdown {
+  cursor: pointer;
+  min-height: 40px;
+  align-items: center;
+}
+.select-wrapper :global .sv-item--content {
+  min-height: 1.2rem;
+}
+.select-wrapper :global span {
+  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;
+}
+.select-wrapper :global .sv-control {
+  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;
+}
+.select-wrapper :global div.sv_dropdown.is-open {
+  z-index: 99;
+}
+.select-wrapper div.nothing {
+  height: 0;
+  width: 0;
+}
+.select-wrapper .dropdown-item,
+.select-wrapper .selection {
+  font-size: 0.9375rem;
+}
+.select-wrapper .selection {
+  padding-left: 0.5rem;
+  white-space: nowrap;
+  display: flex;
+}
+.select-wrapper .selection.invalid {
+  color: #aa1414;
+}
+.select-wrapper .selection.hidden {
+  display: none;
+}
+.select-wrapper .icon-bg {
+  display: contents;
+}
+
+div.icons {
+  display: flex;
+  flex-flow: row nowrap;
+  gap: 0.25rem;
+  height: 100%;
+  margin-right: 0.25rem;
+  box-sizing: border-box;
+}
+
+.dropdown-item {
+  display: flex;
+  flex-flow: row nowrap;
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  gap: 1rem;
+  fill: #259fc7;
+}
+.dropdown-item .toggle-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-flow: column nowrap;
+  opacity: 0;
+}
+.dropdown-item .toggle-icon.yes {
+  opacity: 1;
+}</style>

package/dist/Components/SingleSelect.svelte.d.ts

@@ -0,0 +1,61 @@
+import type { NonNullableKey, ValueProp } from '../Types/Internal/Misc.js';
+interface commonProps<V extends object, VP extends ValueProp<V> = ValueProp<V>> {
+    options: V[];
+    labelProp: NonNullableKey<V>;
+    valueProp: VP;
+    name?: string;
+    width?: string;
+    height?: string;
+    label?: string;
+    minHeight?: string;
+    focusOnLoad?: boolean;
+    searchable?: boolean;
+    creatable?: boolean;
+    onCreateOption?: (option: V) => void;
+    virtual?: boolean;
+    clearable?: boolean;
+    disabled?: boolean;
+    borderless?: boolean;
+    forceUpwards?: boolean;
+    lazyDropdown?: boolean;
+    required?: boolean;
+    invalid?: boolean;
+    inputId?: string;
+    createFilter?: (value: string) => boolean;
+    onkeydown?: (e: KeyboardEvent) => void;
+    onfocus?: (target: HTMLInputElement) => void;
+    onchange: (newValue: V | null) => void;
+}
+export interface SingleSelectPropsAsObject<V extends object, VP extends ValueProp<V> = ValueProp<V>> extends commonProps<V, VP> {
+    valueAsObject: true;
+    value: V | null;
+}
+export interface SingleSelectPropsAsPrimitive<V extends object, VP extends ValueProp<V> = ValueProp<V>> extends commonProps<V, VP> {
+    valueAsObject: false;
+    value: V[VP] | null;
+}
+export type SingleSelectProps<V extends object, VP extends ValueProp<V> = ValueProp<V>> = SingleSelectPropsAsPrimitive<V, VP> | SingleSelectPropsAsObject<V, VP>;
+declare function $$render<V extends object, VP extends ValueProp<V> = ValueProp<V>>(): {
+    props: SingleSelectProps<V, VP>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<V extends object, VP extends ValueProp<V> = ValueProp<V>> {
+    props(): ReturnType<typeof $$render<V, VP>>['props'];
+    events(): ReturnType<typeof $$render<V, VP>>['events'];
+    slots(): ReturnType<typeof $$render<V, VP>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <V extends object, VP extends ValueProp<V> = ValueProp<V>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<V, VP>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<V, VP>['props']>, ReturnType<__sveltets_Render<V, VP>['events']>, ReturnType<__sveltets_Render<V, VP>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<V, VP>['bindings']>;
+    } & ReturnType<__sveltets_Render<V, VP>['exports']>;
+    <V extends object, VP extends ValueProp<V> = ValueProp<V>>(internal: unknown, props: ReturnType<__sveltets_Render<V, VP>['props']> & {}): ReturnType<__sveltets_Render<V, VP>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
+}
+declare const SingleSelect: $$IsomorphicComponent;
+type SingleSelect<V extends object, VP extends ValueProp<V> = ValueProp<V>> = InstanceType<typeof SingleSelect<V, VP>>;
+export default SingleSelect;

package/dist/Components/Switch.svelte

@@ -0,0 +1,151 @@
+<svelte:options runes />
+
+<script lang="ts" module>
+	import { generateShortUUID } from '../Helpers/Helpers.svelte.js';
+	import type { ChangeEventHandler } from 'svelte/elements';
+	export interface SwitchProps {
+		label: string;
+		value: boolean;
+		onchange?: ChangeEventHandler<HTMLInputElement>;
+		id?: string;
+		disabled?: boolean;
+		isValid?: boolean;
+	}
+</script>
+
+<script lang="ts">
+	let {
+		value = false,
+		id = generateShortUUID(),
+		label,
+		disabled,
+		isValid,
+		onchange
+	}: SwitchProps = $props();
+
+	let ref: HTMLInputElement | undefined = $state();
+</script>
+
+<button
+	class="text-label"
+	class:invalid={isValid === false}
+	type="button"
+	onclick={() => ref?.click()}
+	{disabled}
+>
+	<span>{label}</span>
+
+	<input {id} name={id} {onchange} type="checkbox" {disabled} checked={value} bind:this={ref} />
+
+	<div class="switch">
+		<div class="switch-inner" class:on={value}>
+			<div class="track" class:on={value}></div>
+		</div>
+	</div>
+</button>
+
+<style>.text-label {
+  height: max(var(--input-height, 3rem), 2rem);
+  width: var(--input-width, 100%);
+  color: #3a4952;
+  border: none;
+  padding: 0;
+  font: inherit;
+  cursor: pointer;
+  outline: inherit;
+  display: flex;
+  cursor: pointer;
+  position: relative;
+  flex-flow: row nowrap;
+  background-color: white;
+  border: solid 1px #cbd4da;
+  font-size: 1rem;
+  align-items: center;
+  border-radius: 4px;
+  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-label.invalid {
+  background-color: #f9e9e9;
+  border-color: #aa1414;
+  color: #aa1414;
+}
+.text-label.invalid:focus-within {
+  outline: solid 1px #aa1414;
+}
+.text-label:focus-within {
+  outline: solid 1px #259fc7;
+}
+.text-label span {
+  flex-grow: 1;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  text-align: start;
+}
+.text-label:disabled {
+  color: #647d8e;
+  background-color: #f4f7f9;
+  cursor: default;
+}
+.text-label:disabled .switch {
+  background-color: #f4f7f9;
+}
+.text-label:disabled .switch .switch-inner.on {
+  background-color: #647d8e;
+}
+.text-label:disabled .switch .switch-inner:not(.on) {
+  border-color: #647d8e;
+}
+.text-label:not([disabled]):hover .switch-inner.on {
+  background-color: #1f81a0;
+}
+.text-label:not([disabled]):hover .switch-inner:not(.on) {
+  border-color: #3a4952;
+}
+.text-label:not([disabled]):hover .track:not(.on) {
+  background-color: #3a4952;
+}
+
+.switch {
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+  border-left: solid 1px #cbd4da;
+  width: 64px;
+  height: 100%;
+  background-color: #f4f7f9;
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  justify-content: center;
+}
+.switch .switch-inner {
+  transition: all ease-out 0.15s 0s;
+  border: solid 1px #cbd4da;
+  border-radius: 15px;
+  width: 40px;
+  height: 24px;
+  background-color: white;
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  justify-content: center;
+}
+.switch .switch-inner.on {
+  background-color: #259fc7;
+  border-color: transparent;
+}
+.switch .switch-inner .track {
+  transition: all ease-out 0.15s 0s;
+  background-color: #adbbc5;
+  border-radius: 50%;
+  width: 16px;
+  height: 16px;
+  translate: -45% 0;
+}
+.switch .switch-inner .track.on {
+  translate: 45% 0;
+  background-color: white;
+}
+
+input {
+  display: none;
+}</style>

package/dist/Components/Switch.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { ChangeEventHandler } from 'svelte/elements';
+export interface SwitchProps {
+    label: string;
+    value: boolean;
+    onchange?: ChangeEventHandler<HTMLInputElement>;
+    id?: string;
+    disabled?: boolean;
+    isValid?: boolean;
+}
+declare const Switch: import("svelte").Component<SwitchProps, {}, "">;
+type Switch = ReturnType<typeof Switch>;
+export default Switch;