@marianmeres/stuic 2.0.0-next.4 → 2.0.2

package/dist/components/Input/FieldOptions.svelte

@@ -1,30 +1,4 @@
 <script lang="ts" module>
-	export interface Option {
-		label: string;
-		value: any;
-	}
-
-	// i18n ready
-	function t_default(k: string) {
-		const m: Record<string, string> = {
-			field_req_att: "This field requires attention. Please review and try again.",
-			cardinality_of: "of",
-			cardinality_selected: "selected",
-			submit: "Submit",
-			select_all: "Select all",
-			clear_all: "Clear all",
-			search_placeholder: "Type to search...",
-			cardinality_full: "Max selection reached",
-			select_from_list: "Please select from the list",
-			x_close: "Clear input or close [esc]",
-			unknown_allowed: "Select from the list or type and submit any value",
-			unknown_not_allowed: "Select values from the list only",
-		};
-		return m[k] ?? k;
-	}
-</script>
-
-<script lang="ts">
 	import { createClog } from "@marianmeres/clog";
 	import { iconBsSearch } from "@marianmeres/icons-fns/bootstrap/iconBsSearch.js";
 	import { iconLucideCheck } from "@marianmeres/icons-fns/lucide/iconLucideCheck.js";
@@ -32,7 +6,7 @@
 	import { iconLucideSquare } from "@marianmeres/icons-fns/lucide/iconLucideSquare.js";
 	import { ItemCollection, type Item } from "@marianmeres/item-collection";
 	import { Debounced, watch } from "runed";
-	import { type Snippet } from "svelte";
+	import { tick, type Snippet } from "svelte";
 	import { tooltip } from "../../actions/index.js";
 	import { type ValidateOptions } from "../../actions/validate.svelte.js";
 	import { getId } from "../../utils/get-id.js";
@@ -49,7 +23,48 @@
 	import X from "../X/X.svelte";
 	import InputWrap from "./_internal/InputWrap.svelte";
 	import FieldLikeButton from "./FieldLikeButton.svelte";
+	import { replaceMap } from "../../utils/replace-map.js";
+	import { isPlainObject } from "../../utils/is-plain-object.js";
+	import type { TranslateFn } from "../../types.js";
 
+	export interface Option {
+		label: string;
+		value: any;
+	}
+
+	// i18n ready
+	function t_default(
+		k: string,
+		values: false | null | undefined | Record<string, string | number> = null,
+		fallback: string | boolean = "",
+		i18nSpanWrap: boolean = true
+	) {
+		const m: Record<string, string> = {
+			field_req_att: "This field requires attention. Please review and try again.",
+			cardinality_of: "of max",
+			cardinality_selected: "selected",
+			submit: "Submit",
+			select_all: "Select results",
+			clear_all: "Clear selected",
+			clear: "Clear",
+			search_placeholder: "Type to search...",
+			search_submit_placeholder: "Type to search and/or submit...",
+			cardinality_full: "Max selection reached",
+			select_from_list: "Please select from the list only",
+			x_close: "Clear input or close [esc]",
+			unknown_allowed: "Select or type and submit",
+			unknown_not_allowed: "Select from the list",
+			no_results: "No results found.",
+			add_new: 'Add "{{value}}"...',
+			click_add_new: "You must add the value to continue",
+		};
+		let out = m[k] ?? fallback ?? k;
+
+		return isPlainObject(values) ? replaceMap(out, values as any) : out;
+	}
+</script>
+
+<script lang="ts">
 	const clog = createClog("FieldOptions");
 
 	const iconCheckboxEmpty = iconLucideSquare;
@@ -94,23 +109,29 @@
 		//
 		classOption?: string;
 		classOptionActive?: string;
+		classOptgroup?: string;
 		//
 		classModalField?: string;
 		noScrollLock?: boolean;
 		//
 		style?: string;
-		t?: (key: string) => string;
+		t?: TranslateFn;
 		//
 		renderValue?: (strigifiedItems: string) => string;
-		getOptions: (s: string, current: Item[]) => Promise<Item[]>;
+		getOptions: (
+			q: string,
+			current: Item[]
+		) => Promise<{ coll?: ItemCollection<Item>; found: Item[] }>;
 		notifications?: NotificationsStack;
 		// -1 no limit
 		// +n max selected limit
 		cardinality?: number;
 		renderOptionLabel?: (item: Item) => string;
+		renderOptionGroup?: (s: string) => string;
 		// whether to allow adding unknown options
 		allowUnknown?: boolean;
-		showIcons?: boolean;
+		showIconsCheckbox?: boolean;
+		showIconsRadio?: boolean;
 		searchPlaceholder?: string;
 		name: string;
 		itemIdPropName?: string;
@@ -150,6 +171,7 @@
 		//
 		classOption,
 		classOptionActive,
+		classOptgroup,
 		//
 		style,
 		//
@@ -162,8 +184,10 @@
 		notifications,
 		cardinality: _cardinality = Infinity,
 		renderOptionLabel,
+		renderOptionGroup = (s: string) => `${s}`.replaceAll("_", " "),
 		allowUnknown = false,
-		showIcons = true,
+		showIconsCheckbox = true,
+		showIconsRadio = false,
 		searchPlaceholder,
 		name,
 		itemIdPropName = "id",
@@ -175,6 +199,7 @@
 	let isFetching = $state(false);
 	let cardinality = $derived(_cardinality === -1 ? Infinity : _cardinality);
 	let isMultiple = $derived(cardinality > 1);
+	let showIcons = $derived(isMultiple ? showIconsCheckbox : showIconsRadio);
 
 	//
 	let wrappedValidate: Omit<ValidateOptions, "setValidationResult"> = $derived({
@@ -206,7 +231,8 @@
 	}
 
 	function sortFn(a: Item, b: Item) {
-		return _renderOptionLabel(a).localeCompare(_renderOptionLabel(b), undefined, {
+		const withOptGroup = (i: Item) => `${i.optgroup || ""}__${_renderOptionLabel(i)}`;
+		return withOptGroup(a).localeCompare(withOptGroup(b), undefined, {
 			sensitivity: "base",
 		});
 	}
@@ -222,21 +248,43 @@
 
 	// second, the selected ones
 	const _selectedColl = new ItemCollection([], {
+		// svelte-ignore state_referenced_locally
 		cardinality,
 		sortFn,
 		idPropName: itemIdPropName,
 	});
 
+	// reconfigure if the prop ever changes during runtime (most likely will NOT)
+	$effect(() => {
+		_selectedColl.configure({ cardinality });
+	});
+
 	// now, create the reactive, subscribed variants
 	let options = $derived($_optionsColl);
 	let selected = $derived($_selectedColl);
+
+	// we need to know whether to show "Add xyz"...
+	function have_option_label_like(items: Item[], s: string) {
+		return items.some(
+			(item) => _renderOptionLabel(item).toLowerCase() === `${s}`.toLowerCase()
+		);
+	}
+
 	// $inspect("options", options);
 	// $inspect("selected", selected);
+	// $inspect("lastQuery", lastQuery, innerValue);
+
+	// hidden input which holds the final value (upon which validation happens)
+	let parentHiddenInputEl: HTMLInputElement | undefined = $state();
 
 	let activeEl: HTMLButtonElement | undefined = $state();
-	let optionsBox: HTMLUListElement | undefined = $state();
+	let optionsBox: HTMLDivElement | undefined = $state();
 	let modalEl: HTMLDivElement | undefined = $state();
 
+	// add_new dance...
+	let addNewBtn: HTMLButtonElement | undefined = $state();
+	let isAddNewBtnActive = $state(false);
+
 	// set value on open
 	watch(
 		() => modal.visibility().visible,
@@ -257,7 +305,7 @@
 	// scroll the active option into view
 	$effect(() => {
 		if (modal.visibility().visible && options.active?.[itemIdPropName]) {
-			activeEl = qsa(`#${btnId(options.active[itemIdPropName])}`, optionsBox)[0] as any;
+			activeEl = qsa(`#${btn_id(options.active[itemIdPropName])}`, optionsBox)[0] as any;
 			activeEl?.scrollIntoView({ behavior: "smooth", block: "center" });
 			activeEl?.focus();
 		} else {
@@ -274,10 +322,12 @@
 			isFetching = true;
 			getOptions(currVal, selected.items)
 				.then((res) => {
+					const { found, coll } = res;
+
 					// always update the existing with recent server data
-					_selectedColl.patchMany(res);
+					_selectedColl.patchMany(found);
 					// continue normally, with (server) provided options...
-					_optionsColl.clear().addMany(res);
+					_optionsColl.clear().addMany(found);
 				})
 				.catch((e) => {
 					console.error(e);
@@ -288,17 +338,64 @@
 	);
 
 	// internal DRY
-	function btnId(id: string | number, prefix = "btn-") {
+	function btn_id(id: string | number, prefix = "btn-") {
 		return prefix + strHash(`${id}`.repeat(3));
 	}
 
-	// this will set the outer bound value (always string) and close modal... further process is left on the consumer
+	// "inner" submit
+	function try_submit(force = false) {
+		clog("try_submit", innerValue);
+		if (innerValue) {
+			let found = have_option_label_like(_optionsColl.items, innerValue);
+			if (!found && !allowUnknown) {
+				return notifications?.error(t("select_from_list"), { ttl: 1000 });
+			}
+
+			if (!found && !_optionsColl.size) {
+				return notifications?.error(t("click_add_new", { value: innerValue }), {
+					ttl: 1000,
+				});
+			}
+
+			// maybe submit
+			if (_selectedColl.isFull || force) submit();
+		}
+		// enter on empty input always submits
+		else {
+			submit();
+		}
+	}
+
+	function add_new() {
+		// should be noop if called multiple times with same value
+		if (allowUnknown && innerValue) {
+			const item = { [itemIdPropName]: innerValue };
+			if (!isMultiple) _selectedColl.clear();
+			// actual selection addon
+			_selectedColl.add(item);
+			// we might have added a new one, so add it to options as well
+			// (will be noop if already exists)...
+			_optionsColl.add(item);
+			_optionsColl.setActive(item);
+		}
+	}
+
+	function _dispatch_change_to_owner() {
+		// trigger validation on the parent on each submit (emulate typical browser behaviour)
+		tick().then(() => {
+			parentHiddenInputEl?.dispatchEvent(new Event("change", { bubbles: true }));
+		});
+	}
+
+	// "outer" submit - will set the outer bound value (always string) and close modal...
+	// further process is left on the consumer
 	function submit() {
 		// clog("modal submit", $state.snapshot(selected.items));
 		value = JSON.stringify(selected.items);
 		innerValue = "";
 		_optionsColl.clear();
 		modal.close();
+		_dispatch_change_to_owner();
 	}
 
 	// clears, closes, submits nothing
@@ -306,6 +403,64 @@
 		innerValue = "";
 		_optionsColl.clear();
 		modal?.close();
+		_dispatch_change_to_owner();
+	}
+
+	function _normalize_and_group_options(opts: Item[]): Map<string, Item[]> {
+		const groupped = new Map<string, Item[]>();
+		opts.forEach((o) => {
+			const optgLabel = renderOptionGroup(o.optgroup || "");
+			if (!groupped.has(optgLabel)) groupped.set(optgLabel, []);
+			const optgroup = groupped.get(optgLabel);
+			optgroup!.push(o);
+		});
+		return groupped;
+	}
+
+	const BTN_CLS = [
+		"no-focus-visible",
+		"text-left rounded-md py-2 px-2.5 flex items-center space-x-2",
+		"w-full",
+		"border border-transparent",
+		"focus:outline-0 focus:border-neutral-400 dark:focus:border-neutral-500",
+		"focus-visible:outline-0 focus-visible:ring-0",
+		"hover:border-neutral-400 dark:hover:border-neutral-500",
+	];
+
+	// add new dance
+	$effect(() => {
+		if (addNewBtn && isAddNewBtnActive) {
+			addNewBtn?.focus();
+			_optionsColl.unsetActive(); // make sure to reset
+		}
+		if (!addNewBtn) {
+			isAddNewBtnActive = false;
+		}
+	});
+
+	function maybe_activate_add_new(isDown: boolean, isMeta: boolean) {
+		// no button, no activation
+		if (!addNewBtn) return false;
+		const isUp = !isDown;
+
+		// separating below into distinct ifs, so it's easily readable
+
+		// if first arrow down
+		if (!isAddNewBtnActive && isDown && _optionsColl.activeIndex === undefined) {
+			return true;
+		}
+
+		// isActive and isUp (this is a noop, but we must break)
+		if (isAddNewBtnActive && isUp) {
+			return true;
+		}
+
+		// isUp from first, or is metaUp
+		if (!isAddNewBtnActive && isUp && (_optionsColl.activeIndex === 0 || isMeta)) {
+			return true;
+		}
+
+		return false;
 	}
 </script>
 
@@ -317,10 +472,14 @@
 			if (["ArrowDown", "ArrowUp"].includes(e.key)) {
 				e.preventDefault();
 
-				if (e.key === "ArrowUp") {
-					e.metaKey ? _optionsColl.setActiveFirst() : _optionsColl.setActivePrevious();
-				} else if (e.key === "ArrowDown") {
-					e.metaKey ? _optionsColl.setActiveLast() : _optionsColl.setActiveNext();
+				isAddNewBtnActive = maybe_activate_add_new(e.key === "ArrowDown", e.metaKey);
+
+				if (!isAddNewBtnActive) {
+					if (e.key === "ArrowUp") {
+						e.metaKey ? _optionsColl.setActiveFirst() : _optionsColl.setActivePrevious();
+					} else if (e.key === "ArrowDown") {
+						e.metaKey ? _optionsColl.setActiveLast() : _optionsColl.setActiveNext();
+					}
 				}
 
 				// common UI convention: radios are selected by arrows
@@ -340,6 +499,7 @@
 <div>
 	<FieldLikeButton
 		bind:value
+		bind:input={parentHiddenInputEl}
 		{name}
 		class={classProp}
 		{label}
@@ -395,7 +555,7 @@
 	>
 		<InputWrap
 			size={renderSize}
-			class={twMerge("m-4 mb-12 shadow-xl", classModalField)}
+			class={twMerge("m-2 mb-12 shadow-xl", classModalField)}
 			classInputBoxWrap={twMerge(
 				// always look like focused
 				`border border-input-accent dark:border-input-accent-dark`,
@@ -413,40 +573,12 @@
 				tabindex={1}
 				{required}
 				{disabled}
-				placeholder={searchPlaceholder ?? t("search_placeholder")}
+				placeholder={searchPlaceholder ??
+					t(allowUnknown ? "search_submit_placeholder" : "search_placeholder")}
 				onkeydown={(e) => {
 					if (e.key === "Enter") {
 						e.preventDefault();
-
-						if (innerValue) {
-							// doing label search, taking first result
-							let found = _optionsColl.search(innerValue)?.[0];
-							if (!found) {
-								if (!allowUnknown) {
-									return notifications?.error(t("select_from_list"), { ttl: 1000 });
-								}
-								found = { [itemIdPropName]: innerValue };
-							}
-
-							if (!isMultiple) _selectedColl.clear();
-
-							// actual selection addon
-							_selectedColl.add(found);
-
-							// we might have added a new one, so add it to options as well
-							// (will be noop if already exists)...
-							if (allowUnknown) {
-								_optionsColl.add(found);
-								_optionsColl.setActive(found);
-							}
-
-							// maybe submit
-							if (_selectedColl.isFull) submit();
-						}
-						// enter on empty input always submits
-						else {
-							submit();
-						}
+						try_submit();
 					}
 				}}
 				autocomplete="off"
@@ -466,6 +598,7 @@
 									"hover:opacity-100 focus-visible:outline-neutral-400 focus-visible:opacity-100"
 								)}
 								tabindex={4}
+								disabled={!options.size}
 							>
 								{@html t("select_all")}
 							</button>
@@ -484,7 +617,7 @@
 							tabindex={5}
 							disabled={!selected.items.length}
 						>
-							{@html t("clear_all")}
+							{@html t(cardinality === 1 ? "clear" : "clear_all")}
 						</button>
 
 						<span class="p-1 m-1 text-xs">&nbsp;</span>
@@ -498,80 +631,119 @@
 					</div>
 
 					<!-- {#if options.items.length} -->
-					<ul
-						class={twMerge(
-							"options block h-[250px] max-h-[250px] overflow-y-auto overflow-x-hidden space-y-1"
-						)}
+					<div
+						class={[
+							"options overflow-y-auto overflow-x-hidden space-y-1",
+							"h-[220px] max-h-[220px]",
+						]}
 						bind:this={optionsBox}
 						tabindex="-1"
 					>
 						{#if isFetching && !options.items.length}
-							<div class="p-4 opacity-50">
+							<!-- <div class="p-4 opacity-50"> -->
+							<div class="flex opacity-50 text-sm h-full items-center justify-center">
 								<Spinner class="w-4" />
 							</div>
+						{:else if !options.items.length && !allowUnknown}
+							<div class="flex opacity-50 text-sm h-full items-center justify-center">
+								{@html t("no_results")}
+							</div>
 						{/if}
-						{#each options.items as item}
-							{@const active = item[itemIdPropName] === options.active?.[itemIdPropName]}
-							{@const isSelected =
-								selected.items && _selectedColl.exists(item[itemIdPropName])}
-							<li class:active class="px-2">
+
+						{#if !isFetching && allowUnknown && innerValue && !have_option_label_like(options.items, innerValue)}
+							<div class="px-1">
 								<button
 									type="button"
-									id={btnId(item[itemIdPropName])}
-									onclick={() => {
-										if (isMultiple) {
-											if (selected.isFull && !_selectedColl.exists(item)) {
-												return notifications?.error(t("cardinality_full"), {
-													ttl: 1000,
-												});
-											}
-											_selectedColl.toggleAdd(item);
-										} else {
-											_selectedColl.clear();
-											_selectedColl.add(item);
-											submit();
-										}
-									}}
-									class:active
-									class:selected={isSelected}
+									bind:this={addNewBtn}
+									onclick={add_new}
 									class={twMerge(
-										"no-focus-visible",
-										"w-full text-left rounded-md py-2 px-2.5 flex items-center space-x-2",
-										"text-ellipsis border border-transparent",
-										"focus:outline-0 focus:border-neutral-400 dark:focus:border-neutral-500",
-										"focus-visible:outline-0 focus-visible:ring-0",
-										"hover:border-neutral-400 dark:hover:border-neutral-500",
-										isSelected && "bg-neutral-200 dark:bg-neutral-800",
+										BTN_CLS,
 										classOption,
-										// active && "border-neutral-400",
-										active && classOptionActive
+										isAddNewBtnActive && classOptionActive
 									)}
-									tabindex="-1"
-									role="checkbox"
-									aria-checked={isSelected}
 								>
-									{#if showIcons}
-										<span class={isSelected ? "opacity-100" : "opacity-25"}>
-											{#if isMultiple}
-												{#if isSelected}
-													{@html iconCheckboxCheck()}
-												{:else}
-													{@html iconCheckboxEmpty()}
-												{/if}
-											{:else if isSelected}
-												{@html iconRadioCheck()}
-											{:else}
-												{@html iconRadioEmpty()}
-											{/if}
-										</span>
-									{/if}
-									<span>{_renderOptionLabel(item)}</span>
+									{t("add_new", { value: innerValue })}
 								</button>
-							</li>
+							</div>
+						{/if}
+
+						{#each _normalize_and_group_options(options.items) as [_optgroup, _opts]}
+							{#if _optgroup}
+								<div
+									class={twMerge(
+										"text-xs capitalize opacity-50 border-b border-black/10 mb-0.5 p-1 mx-1",
+										classOptgroup
+									)}
+								>
+									{_optgroup}
+								</div>
+							{/if}
+							<ul class="space-y-0.5">
+								<!-- {#each options.items as item} -->
+								{#each _opts as item (item[itemIdPropName])}
+									{@const active =
+										item[itemIdPropName] === options.active?.[itemIdPropName]}
+									{@const isSelected =
+										selected.items && _selectedColl.exists(item[itemIdPropName])}
+									<li class:active class="px-1">
+										<button
+											type="button"
+											id={btn_id(item[itemIdPropName])}
+											onclick={() => {
+												if (isMultiple) {
+													if (selected.isFull && !_selectedColl.exists(item)) {
+														return notifications?.error(t("cardinality_full"), {
+															ttl: 1000,
+														});
+													}
+													_selectedColl.toggleAdd(item);
+												} else {
+													_selectedColl.clear();
+													_selectedColl.add(item);
+													submit();
+												}
+											}}
+											class:active
+											class:selected={isSelected}
+											class={twMerge(
+												BTN_CLS,
+												isSelected && "bg-neutral-200 dark:bg-neutral-800",
+												classOption,
+												// active && "border-neutral-400",
+												active && classOptionActive
+											)}
+											tabindex="-1"
+											role="checkbox"
+											aria-checked={isSelected}
+										>
+											{#if showIcons}
+												<span class={isSelected ? "opacity-100" : "opacity-25"}>
+													{#if isMultiple}
+														{#if isSelected}
+															{@html iconCheckboxCheck()}
+														{:else}
+															{@html iconCheckboxEmpty()}
+														{/if}
+													{:else if isSelected}
+														{@html iconRadioCheck()}
+													{:else}
+														{@html iconRadioEmpty()}
+													{/if}
+												</span>
+											{/if}
+											<span
+												class={twMerge(
+													"min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap"
+												)}>{_renderOptionLabel(item)}</span
+											>
+										</button>
+									</li>
+								{/each}
+							</ul>
 						{/each}
-					</ul>
+					</div>
 					<!-- {/if} -->
-					<div class="p-2 flex items-end justify-between">
+					<div class="p-2 px-3 flex items-end justify-between">
 						<div class="text-xs opacity-50">
 							<!-- Use arrows to navigate. Spacebar and Enter to select and/or submit. -->
 							{#if allowUnknown}
@@ -585,9 +757,9 @@
 								class="control"
 								type="button"
 								variant="primary"
-								onclick={(e) => {
+								onclick={async (e) => {
 									e.preventDefault();
-									submit();
+									try_submit(true);
 								}}
 								tabindex={3}
 							>
@@ -611,7 +783,7 @@
 							"opacity-50 rounded",
 							"hover:opacity-100 hover:bg-neutral-200 dark:hover:bg-neutral-800",
 							"focus-visible:opacity-100 focus-visible:outline-0",
-							" focus-visible:bg-neutral-200 dark:focus-visible:bg-neutral-800"
+							"focus-visible:bg-neutral-200 dark:focus-visible:bg-neutral-800"
 						)}
 						use:tooltip
 						aria-label={t("x_close")}

package/dist/components/Input/FieldOptions.svelte.d.ts

@@ -1,12 +1,13 @@
-export interface Option {
-    label: string;
-    value: any;
-}
-import { type Item } from "@marianmeres/item-collection";
+import { ItemCollection, type Item } from "@marianmeres/item-collection";
 import { type Snippet } from "svelte";
 import { type ValidateOptions } from "../../actions/validate.svelte.js";
 import { NotificationsStack } from "../Notifications/index.js";
 import type { THC } from "../Thc/Thc.svelte";
+import type { TranslateFn } from "../../types.js";
+export interface Option {
+    label: string;
+    value: any;
+}
 type SnippetWithId = Snippet<[{
     id: string;
 }]>;
@@ -38,17 +39,23 @@ interface Props extends Record<string, any> {
     classBelowBox?: string;
     classOption?: string;
     classOptionActive?: string;
+    classOptgroup?: string;
     classModalField?: string;
     noScrollLock?: boolean;
     style?: string;
-    t?: (key: string) => string;
+    t?: TranslateFn;
     renderValue?: (strigifiedItems: string) => string;
-    getOptions: (s: string, current: Item[]) => Promise<Item[]>;
+    getOptions: (q: string, current: Item[]) => Promise<{
+        coll?: ItemCollection<Item>;
+        found: Item[];
+    }>;
     notifications?: NotificationsStack;
     cardinality?: number;
     renderOptionLabel?: (item: Item) => string;
+    renderOptionGroup?: (s: string) => string;
     allowUnknown?: boolean;
-    showIcons?: boolean;
+    showIconsCheckbox?: boolean;
+    showIconsRadio?: boolean;
     searchPlaceholder?: string;
     name: string;
     itemIdPropName?: string;