@marianmeres/stuic 2.1.2 → 2.1.4

package/dist/components/AlertConfirmPrompt/AlertConfirmPrompt.svelte

@@ -27,7 +27,6 @@
 		}
 	});
 
-	let value = $state();
 	let isPending = $state(false);
 </script>
 
@@ -49,13 +48,13 @@
 		noClickOutsideClose
 		type={acp?.current?.type}
 		class={twMerge(
-			"max-w-xl justify-end max-h-[62vh] sm:max-h-[200px] border p-4 rounded-lg",
+			"max-w-xl justify-end max-h-[62vh] h-auto border p-4 rounded-lg",
 			// different max-h based on not/existing content
-			isTHCNotEmpty(acp?.current?.content) ? "sm:max-h-[200px]" : "sm:max-h-[150px]",
-			acp?.current?.type === PROMPT && "sm:max-h-[250px]",
+			// isTHCNotEmpty(acp?.current?.content) ? "sm:max-h-[200px]" : "sm:max-h-[150px]",
+			// acp?.current?.type === PROMPT && "sm:max-h-[250px]",
 			classProp
 		)}
 	>
-		<Current bind:value bind:isPending {acp} />
+		<Current bind:isPending {acp} />
 	</ModalDialog>
 {/if}

package/dist/components/AlertConfirmPrompt/Current.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { tick } from "svelte";
 	import { twMerge } from "../../utils/tw-merge.js";
 	import Button from "../Button/Button.svelte";
 	import FieldInput from "../Input/FieldInput.svelte";
@@ -16,7 +17,6 @@
 
 	interface Props {
 		acp?: AlertConfirmPromptStack;
-		value?: any;
 		isPending?: boolean;
 		forceAsHtml?: boolean;
 		class?: string;
@@ -35,7 +35,6 @@
 
 	let {
 		acp,
-		value = $bindable(),
 		isPending = $bindable(false),
 		forceAsHtml = true,
 		class: classProp,
@@ -62,22 +61,35 @@
 		return out;
 	});
 
-	const createOnClick = (worker: CallableFunction) => async (e: Event) => {
-		e.preventDefault();
-		isPending = true;
-		await Promise.resolve(worker(current.type === PROMPT ? value : true));
-		isPending = false;
-		value = null;
-	};
+	let inputEl = $state<any>();
+	let okButtonEl = $state<any>();
+
+	const createOnClick =
+		(type: "cancel" | "ok" | "custom", worker: CallableFunction) =>
+		async (e: Event | null) => {
+			e?.preventDefault();
+
+			// trigger validate
+			if (inputEl && type === "ok" && current.type === PROMPT) {
+				inputEl.dispatchEvent(new Event("input", { bubbles: true }));
+				inputEl.dispatchEvent(new Event("change", { bubbles: true }));
+				if (!inputEl.checkValidity()) return;
+			}
+
+			//
+			isPending = true;
+			await Promise.resolve(worker(current.type === PROMPT ? current.value : true));
+			isPending = false;
+		};
 
 	const debug = (c?: string, flag = 0) =>
 		c && flag ? `outline outline-dashed ${c}` : "";
 
 	// Default classes
 
-	const _class = "p-1 sm:p-2 h-full flex flex-col overflow-hidden";
+	const _class = "p-1 sm:p-2 h-full flex flex-col min-h-[150px]"; // overflow-hidden
 
-	const _classWrap = `flex-1 sm:flex sm:items-start overflow-hidden`;
+	const _classWrap = `flex-1 sm:flex sm:items-start `; // overflow-hidden
 
 	const _classIconBox = `size-12 sm:size-10
 		mt-1 mb-4 sm:my-0 sm:mr-5
@@ -87,7 +99,7 @@
 		bg-neutral-950/10 text-neutral-950/80
 		dark:bg-neutral-50/20 dark:text-neutral-50/80`;
 
-	const _classContentBox = `mt-3 sm:mt-0 flex-1 overflow-hidden h-full flex flex-col`;
+	const _classContentBox = `mt-3 sm:mt-0 flex-1 h-full flex flex-col`; // overflow-hidden
 
 	const _classTitle = `text-center sm:text-left text-base font-semibold leading-6`;
 
@@ -128,7 +140,10 @@
 				<Thc thc={current.title} {forceAsHtml} />
 			</h1>
 
-			<div class="scrollable overflow-y-auto flex-1" style="scrollbar-width: thin;">
+			<div
+				class="scrollable overflow-y-auto flex-1 max-h-[30vh]"
+				style="scrollbar-width: thin;"
+			>
 				{#if isTHCNotEmpty(current.content)}
 					<div class={twMerge("content", _classContent, classContent)}>
 						<Thc thc={current.content} {forceAsHtml} />
@@ -136,10 +151,11 @@
 				{/if}
 
 				{#if current.type === PROMPT}
-					<div class={twMerge("input-box", "mt-1 p-2", classInputBox)}>
+					<div class={twMerge("input-box", "mt-3 p-1", classInputBox)}>
 						{#if current?.promptFieldProps?.options?.length}
 							<FieldSelect
-								bind:value
+								bind:value={current.value}
+								bind:input={inputEl}
 								class={twMerge("input", "m-0", classInput)}
 								options={current.promptFieldProps.options}
 								renderSize="sm"
@@ -148,11 +164,17 @@
 							/>
 						{:else}
 							<FieldInput
-								bind:value
-								class={twMerge("input", classInput)}
+								bind:value={current.value}
+								bind:input={inputEl}
+								class={twMerge("input", "m-0", classInput)}
 								renderSize="sm"
 								disabled={isPending}
 								{...current?.promptFieldProps || {}}
+								onkeydown={(e) => {
+									if (e.key === "Enter" && inputEl.checkValidity()) {
+										okButtonEl?.focus()?.click(); // hm...
+									}
+								}}
 							/>
 						{/if}
 					</div>
@@ -166,7 +188,7 @@
 				<Button
 					class={twMerge("cancel", _classButton, classButton)}
 					disabled={isPending}
-					onclick={createOnClick(current.onCancel)}
+					onclick={createOnClick("cancel", current.onCancel)}
 				>
 					<Thc thc={current.labelCancel} {forceAsHtml} />
 				</Button>
@@ -177,7 +199,7 @@
 				<Button
 					class={twMerge("custom", _classButton, classButton)}
 					disabled={isPending}
-					onclick={createOnClick(current.onCustom)}
+					onclick={createOnClick("custom", current.onCustom)}
 				>
 					<Thc thc={current.labelCustom} {forceAsHtml} />
 				</Button>
@@ -188,7 +210,8 @@
 				class={twMerge("ok", _classButton, classButton)}
 				variant="primary"
 				disabled={isPending}
-				onclick={createOnClick(current.onOk)}
+				onclick={createOnClick("ok", current.onOk)}
+				bind:el={okButtonEl}
 			>
 				<Thc thc={current.labelOk} {forceAsHtml} />
 			</Button>

package/dist/components/AlertConfirmPrompt/Current.svelte.d.ts

@@ -1,7 +1,6 @@
 import { type AlertConfirmPromptStack } from "./alert-confirm-prompt-stack.svelte.js";
 interface Props {
     acp?: AlertConfirmPromptStack;
-    value?: any;
     isPending?: boolean;
     forceAsHtml?: boolean;
     class?: string;
@@ -17,6 +16,6 @@ interface Props {
     classButton?: string;
     classSpinnerBox?: string;
 }
-declare const Current: import("svelte").Component<Props, {}, "value" | "isPending">;
+declare const Current: import("svelte").Component<Props, {}, "isPending">;
 type Current = ReturnType<typeof Current>;
 export default Current;

package/dist/components/Input/FieldOptions.svelte

@@ -9,10 +9,13 @@
 	import { tick, type Snippet } from "svelte";
 	import { tooltip } from "../../actions/index.js";
 	import { type ValidateOptions } from "../../actions/validate.svelte.js";
+	import type { TranslateFn } from "../../types.js";
 	import { getId } from "../../utils/get-id.js";
+	import { isPlainObject } from "../../utils/is-plain-object.js";
 	import { maybeJsonParse } from "../../utils/maybe-json-parse.js";
 	import { waitForNextRepaint } from "../../utils/paint.js";
 	import { qsa } from "../../utils/qsa.js";
+	import { replaceMap } from "../../utils/replace-map.js";
 	import { strHash } from "../../utils/str-hash.js";
 	import { twMerge } from "../../utils/tw-merge.js";
 	import Button from "../Button/Button.svelte";
@@ -23,9 +26,6 @@
 	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;
@@ -76,6 +76,7 @@
 	type SnippetWithId = Snippet<[{ id: string }]>;
 
 	interface Props extends Record<string, any> {
+		trigger?: Snippet<[{ value: string; modal: Modal }]>;
 		input?: HTMLInputElement;
 		value: string;
 		label?: SnippetWithId | THC;
@@ -135,9 +136,12 @@
 		searchPlaceholder?: string;
 		name: string;
 		itemIdPropName?: string;
+		// for custom stuff...
+		onChange?: (value: string) => void;
 	}
 
 	let {
+		trigger,
 		input = $bindable(),
 		value = $bindable(), //
 		label = "",
@@ -191,6 +195,7 @@
 		searchPlaceholder,
 		name,
 		itemIdPropName = "id",
+		onChange,
 		...rest
 	}: Props = $props();
 
@@ -243,7 +248,6 @@
 		allowNextPrevCycle: false,
 		sortFn,
 		idPropName: itemIdPropName,
-		searchable: { getContent: (item) => _renderOptionLabel(item) },
 	});
 
 	// second, the selected ones
@@ -284,34 +288,29 @@
 	// add_new dance...
 	let addNewBtn: HTMLButtonElement | undefined = $state();
 	let isAddNewBtnActive = $state(false);
+	let touch = $state(new Date());
 
 	// set value on open
-	watch(
-		() => modal.visibility().visible,
-		(isVisible, wasVisible) => {
-			// modal was just opened
-			if (!wasVisible && isVisible) {
-				_selectedColl.clear().addMany(maybeJsonParse(value));
-				// IMPORTANT: focus first selected so it scrolls into view on open
-				if (_selectedColl.size) {
-					waitForNextRepaint().then(() => {
-						_optionsColl.setActive(_selectedColl.items[0]);
-					});
-				}
-			}
-		}
-	);
-
-	// scroll the active option into view
-	$effect(() => {
-		if (modal.visibility().visible && options.active?.[itemIdPropName]) {
-			activeEl = qsa(`#${btn_id(options.active[itemIdPropName])}`, optionsBox)[0] as any;
-			activeEl?.scrollIntoView({ behavior: "smooth", block: "center" });
-			activeEl?.focus();
-		} else {
-			activeEl = undefined;
-		}
-	});
+	// watch(
+	// 	() => modal.visibility().visible,
+	// 	(isVisible, wasVisible) => {
+	// 		// modal was just opened
+	// 		if (isVisible) {
+	// 			_selectedColl.clear().addMany(maybeJsonParse(value));
+	// 			console.log(_selectedColl.dump());
+	// 			// IMPORTANT: focus first selected so it scrolls into view on open
+	// 			if (_selectedColl.size) {
+	// 				console.log(1111);
+	// 				waitForNextRepaint().then(() => {
+	// 					_optionsColl.setActive(_selectedColl.items[0]);
+	// 					waitForNextRepaint().then(() => {
+	// 						scrollIntoViewTrigger = new Date();
+	// 					});
+	// 				});
+	// 			}
+	// 		}
+	// 	}
+	// );
 
 	// suggest options as a typeahead feature
 	const debounced = new Debounced(() => innerValue, 150);
@@ -324,10 +323,13 @@
 				.then((res) => {
 					const { found, coll } = res;
 
-					// always update the existing with recent server data
-					_selectedColl.patchMany(found);
 					// continue normally, with (server) provided options...
 					_optionsColl.clear().addMany(found);
+					// always update the existing with recent server data
+					_selectedColl.patchMany(found);
+
+					// update signal...
+					touch = new Date();
 				})
 				.catch((e) => {
 					console.error(e);
@@ -337,6 +339,29 @@
 		}
 	);
 
+	$effect(() => {
+		if (modal.visibility().visible && touch) {
+			_selectedColl.clear().addMany(maybeJsonParse(value));
+			// IMPORTANT: focus first selected so it scrolls into view on open
+			if (_selectedColl.size) {
+				waitForNextRepaint().then(() => {
+					_optionsColl.setActive(_selectedColl.items[0]);
+				});
+			}
+		}
+	});
+
+	// scroll the active option into view
+	$effect(() => {
+		if (options.active?.[itemIdPropName]) {
+			activeEl = qsa(`#${btn_id(options.active[itemIdPropName])}`, optionsBox)[0] as any;
+			activeEl?.scrollIntoView({ behavior: "smooth", block: "center" });
+			activeEl?.focus();
+		} else {
+			activeEl = undefined;
+		}
+	});
+
 	// internal DRY
 	function btn_id(id: string | number, prefix = "btn-") {
 		return prefix + strHash(`${id}`.repeat(3));
@@ -344,7 +369,7 @@
 
 	// "inner" submit
 	function try_submit(force = false) {
-		clog("try_submit", innerValue);
+		// clog("try_submit", innerValue);
 		if (innerValue) {
 			let found = have_option_label_like(_optionsColl.items, innerValue);
 			if (!found && !allowUnknown) {
@@ -396,6 +421,7 @@
 		_optionsColl.clear();
 		modal.close();
 		_dispatch_change_to_owner();
+		onChange?.(value);
 	}
 
 	// clears, closes, submits nothing
@@ -497,33 +523,36 @@
 
 <!-- must wrap both -->
 <div>
-	<FieldLikeButton
-		bind:value
-		bind:input={parentHiddenInputEl}
-		{name}
-		class={classProp}
-		{label}
-		{description}
-		{labelLeft}
-		{labelAfter}
-		{below}
-		{labelLeftWidth}
-		{labelLeftBreakpoint}
-		{classLabel}
-		{classLabelBox}
-		{classInputBox}
-		{classInputBoxWrap}
-		{classDescBox}
-		{classBelowBox}
-		{style}
-		validate={wrappedValidate}
-		{required}
-		{disabled}
-		renderValue={(v) => {
-			if (typeof renderValue === "function") return renderValue(v);
-			// console.log(123123, "renderValue", v);
-			// prettier-ignore
-			try {
+	{#if trigger}
+		{@render trigger({ value, modal })}
+	{:else}
+		<FieldLikeButton
+			bind:value
+			bind:input={parentHiddenInputEl}
+			{name}
+			class={classProp}
+			{label}
+			{description}
+			{labelLeft}
+			{labelAfter}
+			{below}
+			{labelLeftWidth}
+			{labelLeftBreakpoint}
+			{classLabel}
+			{classLabelBox}
+			{classInputBox}
+			{classInputBoxWrap}
+			{classDescBox}
+			{classBelowBox}
+			{style}
+			validate={wrappedValidate}
+			{required}
+			{disabled}
+			renderValue={(v) => {
+				if (typeof renderValue === "function") return renderValue(v);
+				// console.log(123123, "renderValue", v);
+				// prettier-ignore
+				try {
 				// defensive
 				if (!v) v = "[]";
 
@@ -541,9 +570,10 @@
 				clog.warn(e);
 				return `${e}`; // either invalid json or not array...
 			}
-		}}
-		onclick={modal?.open}
-	/>
+			}}
+			onclick={modal?.open}
+		/>
+	{/if}
 
 	<Modal
 		bind:this={modal}

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

@@ -1,9 +1,10 @@
 import { ItemCollection, type Item } from "@marianmeres/item-collection";
 import { type Snippet } from "svelte";
 import { type ValidateOptions } from "../../actions/validate.svelte.js";
+import type { TranslateFn } from "../../types.js";
+import Modal from "../Modal/Modal.svelte";
 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;
@@ -12,6 +13,10 @@ type SnippetWithId = Snippet<[{
     id: string;
 }]>;
 interface Props extends Record<string, any> {
+    trigger?: Snippet<[{
+        value: string;
+        modal: Modal;
+    }]>;
     input?: HTMLInputElement;
     value: string;
     label?: SnippetWithId | THC;
@@ -59,6 +64,7 @@ interface Props extends Record<string, any> {
     searchPlaceholder?: string;
     name: string;
     itemIdPropName?: string;
+    onChange?: (value: string) => void;
 }
 declare const FieldOptions: import("svelte").Component<Props, {}, "value" | "input">;
 type FieldOptions = ReturnType<typeof FieldOptions>;

package/dist/components/Input/index.css

@@ -10,7 +10,8 @@
 			text-base placeholder:text-base
 			bg-transparent
 			tracking-tight
-			focus:outline-0 focus-visible:ring-0
+			focus:outline-none focus:ring-0
+			focus-visible:outline-none focus-visible:ring-0
 			placeholder:tracking-tight
 			placeholder:text-neutral-950/35 dark:placeholder:text-neutral-50/35
 			text-neutral-950 dark:text-neutral-50;

package/dist/components/ModalDialog/ModalDialog.svelte

@@ -120,7 +120,7 @@
 		)}
 		onkeydown={async (e) => {
 			if (e.key === "Escape" && visible) {
-				clog("on Escape keydown, preventing default and stopping propagation");
+				// clog("on Escape keydown, preventing default and stopping propagation");
 
 				// do not allow built-in close on escape
 				e.preventDefault();

package/dist/components/Switch/Switch.svelte

@@ -37,7 +37,7 @@
 		name,
 		class: classProp,
 		dotClass,
-		checked = $bindable(false),
+		checked = $bindable(),
 		required,
 		disabled,
 		tabindex = 0,

package/dist/components/Switch/SwitchButton.svelte

@@ -26,7 +26,7 @@
 		size = "md",
 		class: classProp,
 		dotClass,
-		checked = $bindable(false),
+		checked = $bindable(),
 		disabled,
 		tabindex = 0,
 		label,

package/dist/utils/index.d.ts

@@ -10,6 +10,7 @@ export * from "./is-mac.js";
 export * from "./is-nullish.js";
 export * from "./maybe-json-parse.js";
 export * from "./maybe-json-stringify.js";
+export * from "./nl2br.js";
 export * from "./omit-pick.js";
 export * from "./paint.js";
 export * from "./persistent-state.svelte.js";

package/dist/utils/index.js

@@ -10,6 +10,7 @@ export * from "./is-mac.js";
 export * from "./is-nullish.js";
 export * from "./maybe-json-parse.js";
 export * from "./maybe-json-stringify.js";
+export * from "./nl2br.js";
 export * from "./omit-pick.js";
 export * from "./paint.js";
 export * from "./persistent-state.svelte.js";

package/dist/utils/nl2br.d.ts

@@ -0,0 +1 @@
+export declare function nl2br(str: string): string;

package/dist/utils/nl2br.js

@@ -0,0 +1,3 @@
+export function nl2br(str) {
+    return `${str ?? ""}`.replace(/(?:\r\n|\r|\n)/g, "<br />");
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@marianmeres/stuic",
-	"version": "2.1.2",
+	"version": "2.1.4",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",
@@ -13,7 +13,9 @@
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
 		"format": "prettier --write .",
 		"lint": "prettier --check .",
-		"test": "vitest --dir src/"
+		"test": "vitest --dir src/",
+		"svelte-check": "svelte-check",
+		"svelte-package": "svelte-package"
 	},
 	"files": [
 		"dist",
@@ -57,7 +59,6 @@
 		"vite": "^6.3.6",
 		"vitest": "^3.2.4"
 	},
-	"packageManager": "pnpm@10.4.1+sha512.c753b6c3ad7afa13af388fa6d808035a008e30ea9993f58c6663e2bc5ff21679aa834db094987129aa4d488b86df57f7b634981b2f827cdcacc698cc0cfb88af",
 	"dependencies": {
 		"@marianmeres/clog": "^2.3.3",
 		"@marianmeres/item-collection": "^1.2.19",