@marianmeres/stuic 2.1.3 → 2.1.5

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;
@@ -248,7 +248,6 @@
 		allowNextPrevCycle: false,
 		sortFn,
 		idPropName: itemIdPropName,
-		searchable: { getContent: (item) => _renderOptionLabel(item) },
 	});
 
 	// second, the selected ones
@@ -289,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);
@@ -329,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);
@@ -342,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));
@@ -349,11 +369,16 @@
 
 	// "inner" submit
 	function try_submit(force = false) {
-		// clog("try_submit", innerValue);
+		// clog("try_submit", innerValue, _selectedColl.dump());
 		if (innerValue) {
 			let found = have_option_label_like(_optionsColl.items, innerValue);
+			// clog("found", found, allowUnknown, _selectedColl.dump());
 			if (!found && !allowUnknown) {
-				return notifications?.error(t("select_from_list"), { ttl: 1000 });
+				if (isMultiple && _selectedColl.size) {
+					// this is actually ok... (not simplifying the outer if so its easily readable)
+				} else {
+					return notifications?.error(t("select_from_list"), { ttl: 1000 });
+				}
 			}
 
 			if (!found && !_optionsColl.size) {

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

@@ -1,10 +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;

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.3",
+	"version": "2.1.5",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",