@marianmeres/stuic 2.1.2 → 2.1.3

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

@@ -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();
 
@@ -344,7 +349,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 +401,7 @@
 		_optionsColl.clear();
 		modal.close();
 		_dispatch_change_to_owner();
+		onChange?.(value);
 	}
 
 	// clears, closes, submits nothing
@@ -497,33 +503,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 +550,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,6 +1,7 @@
 import { ItemCollection, type Item } from "@marianmeres/item-collection";
 import { type Snippet } from "svelte";
 import { type ValidateOptions } from "../../actions/validate.svelte.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";
@@ -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/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@marianmeres/stuic",
-	"version": "2.1.2",
+	"version": "2.1.3",
 	"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",