@lavalogic/scoria 0.0.1

package/dist/Components/MultiSelect.svelte

@@ -0,0 +1,412 @@
+<svelte:options runes />
+
+<script lang="ts" module>
+	import { Colour, ColourSet } from '../scss/colours.js';
+	import { onMount } from 'svelte';
+
+	export interface commonProps<V extends object, VP extends ValueProp<V> = ValueProp<V>> {
+		options: V[];
+		name?: string;
+		labelProp: NonNullableKey<V>;
+		valueProp: string & keyof V;
+		disabled?: boolean;
+		required?: boolean;
+		invalid?: boolean;
+		label?: string;
+		inputId?: string;
+		width?: string;
+		height?: string;
+		onchange: (e: V[]) => void;
+		collapseSelection?: boolean;
+	}
+
+	export interface MultiSelectPropsAsObject<
+		V extends object,
+		VP extends ValueProp<V> = ValueProp<V>
+	> extends commonProps<V, VP> {
+		valueAsObject: true;
+		selectedValues: V[];
+	}
+
+	export interface MultiSelectPropsAsPrimitive<
+		V extends object,
+		VP extends ValueProp<V> = ValueProp<V>
+	> extends commonProps<V, VP> {
+		valueAsObject: false;
+		selectedValues: Array<V[VP]>;
+	}
+
+	export type MultiSelectProps<V extends object, VP extends ValueProp<V> = ValueProp<V>> =
+		| MultiSelectPropsAsPrimitive<V, VP>
+		| MultiSelectPropsAsObject<V, VP>;
+</script>
+
+<script lang="ts" generics="T extends object">
+	import Svelecte from 'svelecte';
+	import { autoPluralise, generateShortUUID, vowels } from '../Helpers/Helpers.svelte.js';
+	import { dev } from '$app/environment';
+	import { Size } from '../Types/Internal/Size.js';
+	import Action from './Action.svelte';
+	import Icon from './Icon.svelte';
+	import type { NonNullableKey, ValueProp } from '../Types/Internal/Misc.js';
+
+	// HACK selectedValues is mutated by svelecte without asking, so we sometimes have to reverse it without a callback (side effects)
+	let {
+		label,
+		inputId = generateShortUUID(),
+		options,
+		labelProp,
+		valueProp,
+		width,
+		valueAsObject = true,
+		height,
+		selectedValues,
+		onchange,
+		collapseSelection = false,
+		name = 'Item',
+		disabled,
+		required,
+		invalid
+	}: MultiSelectProps<T> = $props();
+
+	const an = $derived(name && vowels.has(name[0]?.toLocaleLowerCase()) ? 'an' : 'a');
+
+	const hidden = $state(false);
+
+	onMount(() => {
+		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[], observer: MutationObserver) => {
+				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();
+		};
+	});
+
+	let isExpanded = $state(false);
+
+	const isInvalid = $derived((required && !selectedValues.length) || invalid);
+
+	function usesValuesAsObjects(values: T[] | T[ValueProp<T>][]): values is T[] {
+		return valueAsObject;
+	}
+</script>
+
+<div
+	class:invalid={isInvalid}
+	class="select-wrapper"
+	style={`${width ? `--input-width: ${width};` : ''}${height ? `--input-height: ${height};` : ''}`}
+>
+	{#if label}
+		<label for={inputId}>
+			<span>{label}</span>
+			<span class="border">{label}</span>
+		</label>
+	{/if}
+	<Svelecte
+		multiple
+		{valueAsObject}
+		{disabled}
+		{inputId}
+		valueField={valueProp}
+		labelField={labelProp}
+		{options}
+		searchable
+		value={selectedValues}
+		onChange={(e: T[]) => {
+			onchange(e);
+		}}
+		{name}
+		selectOnTab
+		keepSelectionInList
+		searchProps={{ keepSelectionInList: true }}
+		creatable={false}
+		collapseSelection={collapseSelection ? 'always' : null}
+		deselectMode="toggle"
+		highlightFirstItem={false}
+		placeholder="Please Select {name ? `${an} ${name}` : ''}"
+		selection={collapseSelection ? selection : undefined}
+	>
+		{#snippet option(opt)}<span class="dropdown-item">
+				<div
+					class="toggle-icon"
+					class:yes={usesValuesAsObjects(selectedValues)
+						? selectedValues.findIndex((v) => v[valueProp] === (opt as T)[valueProp]) > -1
+						: selectedValues.findIndex((v) => v === (opt as T)[valueProp]) > -1}
+				>
+					<Icon name="tick" size={Size.MediumSmall} />
+				</div>
+				{(opt as T)[labelProp]}</span
+			>
+		{/snippet}
+
+		{#snippet collapsedSelection(selectedOptions, i18n)}
+			<span class="selection" class:hidden
+				>{#if selectedOptions.length}{selectedOptions.length}
+					{#if name}{autoPluralise(name, selectedOptions.length)}{/if} Selected
+				{:else}Please Select {#if name}
+						{an} {name}{/if}
+				{/if}</span
+			>
+		{/snippet}
+
+		{#snippet append()}
+			<div class="icons">
+				<Action
+					{disabled}
+					size={Size.Small}
+					noTabIndex
+					colourSet={ColourSet.Auxiliary}
+					onclick={(e) => {
+						if (isExpanded) {
+							e.stopPropagation();
+						}
+
+						if (selectedValues.length) {
+							if (onchange) {
+								onchange([]);
+							} else {
+								selectedValues = [];
+							}
+						} else {
+							if (onchange) {
+								onchange(options.concat());
+							} else {
+								selectedValues = options.concat();
+							}
+						}
+					}}
+					icon={{
+						name: selectedValues.length ? 'close-menu-cross' : 'manage-product-group',
+						colour: Colour['$ui-blue-10']
+					}}
+				/>
+
+				<Action
+					{disabled}
+					size={Size.Small}
+					noTabIndex
+					colourSet={ColourSet.Auxiliary}
+					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}
+	</Svelecte>
+
+	{#snippet selection(selectedOptions: unknown[])}
+		{#if dev}
+			DEBUG: Selection
+		{/if}
+		<!-- {#if selectedOptions.length === 0}
+			<span class="selection" class:hidden
+				>Please Select {#if objectName}
+					{an} {objectName}{/if}</span
+			>
+		{/if} -->
+	{/snippet}
+</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/MultiSelect.svelte.d.ts

@@ -0,0 +1,49 @@
+export interface commonProps<V extends object, VP extends ValueProp<V> = ValueProp<V>> {
+    options: V[];
+    name?: string;
+    labelProp: NonNullableKey<V>;
+    valueProp: string & keyof V;
+    disabled?: boolean;
+    required?: boolean;
+    invalid?: boolean;
+    label?: string;
+    inputId?: string;
+    width?: string;
+    height?: string;
+    onchange: (e: V[]) => void;
+    collapseSelection?: boolean;
+}
+export interface MultiSelectPropsAsObject<V extends object, VP extends ValueProp<V> = ValueProp<V>> extends commonProps<V, VP> {
+    valueAsObject: true;
+    selectedValues: V[];
+}
+export interface MultiSelectPropsAsPrimitive<V extends object, VP extends ValueProp<V> = ValueProp<V>> extends commonProps<V, VP> {
+    valueAsObject: false;
+    selectedValues: Array<V[VP]>;
+}
+export type MultiSelectProps<V extends object, VP extends ValueProp<V> = ValueProp<V>> = MultiSelectPropsAsPrimitive<V, VP> | MultiSelectPropsAsObject<V, VP>;
+import type { NonNullableKey, ValueProp } from '../Types/Internal/Misc.js';
+declare function $$render<T extends object>(): {
+    props: MultiSelectProps<T>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends object> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends object>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends object>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const MultiSelect: $$IsomorphicComponent;
+type MultiSelect<T extends object> = InstanceType<typeof MultiSelect<T>>;
+export default MultiSelect;