@marianmeres/stuic 2.1.25 → 2.1.27

package/dist/components/Input/_internal/InputWrap.svelte

@@ -169,16 +169,17 @@
 				focus-within:border-input-accent focus-within:dark:border-input-accent-dark
 				focus-within:ring-input-accent/20 focus-within:dark:ring-input-accent-dark/20
 				focus-within:ring-4`,
-				invalid &&
-					twMerge(
-						`border-input-accent-invalid dark:border-input-accent-invalid-dark
-						focus-within:border-input-accent-invalid focus-within:dark:border-input-accent-invalid-dark
-						focus-within:ring-input-accent-invalid/20 focus-within:dark:ring-input-accent-invalid-dark/20`,
-						classInputBoxWrapInvalid
-					),
 				disabled && "cursor-not-allowed opacity-50",
 				_preset.inputBox.size[size],
-				classInputBoxWrap
+				invalid
+					? twMerge(
+							classInputBoxWrap,
+							`border-input-accent-invalid dark:border-input-accent-invalid-dark
+							focus-within:border-input-accent-invalid focus-within:dark:border-input-accent-invalid-dark
+							focus-within:ring-input-accent-invalid/20 focus-within:dark:ring-input-accent-invalid-dark/20`,
+							classInputBoxWrapInvalid
+						)
+					: classInputBoxWrap
 			)}
 		>
 			<div class="flex">

package/dist/utils/index.d.ts

@@ -13,6 +13,7 @@ export * from "./is-nullish.js";
 export * from "./maybe-json-parse.js";
 export * from "./maybe-json-stringify.js";
 export * from "./nl2br.js";
+export * from "./observe-exists.svelte.js";
 export * from "./omit-pick.js";
 export * from "./oscillate.js";
 export * from "./paint.js";

package/dist/utils/index.js

@@ -13,6 +13,7 @@ export * from "./is-nullish.js";
 export * from "./maybe-json-parse.js";
 export * from "./maybe-json-stringify.js";
 export * from "./nl2br.js";
+export * from "./observe-exists.svelte.js";
 export * from "./omit-pick.js";
 export * from "./oscillate.js";
 export * from "./paint.js";

package/dist/utils/observe-exists.svelte.d.ts

@@ -0,0 +1,8 @@
+/** Will observe DOM changes and triggers callback when element presence changes */
+export declare function observeExists(selector: string, options?: Partial<{
+    rootElement: HTMLElement;
+}>): {
+    readonly current: boolean;
+    disconnect(): void;
+    forceCheck(): void;
+};

package/dist/utils/observe-exists.svelte.js

@@ -0,0 +1,40 @@
+/** Will observe DOM changes and triggers callback when element presence changes */
+export function observeExists(selector, options = {}) {
+    if (!selector)
+        throw new TypeError("Expecting non empty selector");
+    const { rootElement = document.body } = options;
+    const ns = `[observeExists] [${selector}]`;
+    const clog = (...args) => console.debug(ns, ...args);
+    const check = () => rootElement.querySelector(selector) !== null;
+    let current = $state(check());
+    //
+    const observer = new MutationObserver((mutations) => {
+        let shouldCheck = false;
+        for (const mutation of mutations) {
+            if (mutation.type === "childList") {
+                // was something added or removed?
+                if (mutation.addedNodes.length > 0 || mutation.removedNodes.length > 0) {
+                    shouldCheck = true;
+                    break;
+                }
+            }
+        }
+        if (shouldCheck)
+            current = check();
+    });
+    // start observing now
+    clog(`connecting...`);
+    observer.observe(rootElement, { childList: true, subtree: true });
+    return {
+        get current() {
+            return current;
+        },
+        disconnect() {
+            clog(`disconnecting...`);
+            observer.disconnect();
+        },
+        forceCheck() {
+            check();
+        },
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@marianmeres/stuic",
-	"version": "2.1.25",
+	"version": "2.1.27",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",