@marianmeres/stuic 1.125.0 → 2.0.0-next.2

package/README.md

@@ -2,14 +2,8 @@
 
 *S*velte *T*ailwind _UI_ *C*omponents.
 
-OPINIONATED, UNSTABLE, AND IN PROGRESS...
+OPINIONATED, UNSTABLE AND IN PROGRESS...
 
 Ongoing effort to build reusable Svelte UI primitives as I need them, inspired by many
-other libs, mainly:
+other libs -- cherry-picked, combined, adjusted and tweaked to my personal preference and needs.
 
-- https://www.skeleton.dev/
-- https://flowbite-svelte.com/
-- https://captaincodeman.github.io/svelte-headlessui/
-- https://www.svelteui.org/
-
-Cherry-picked, combined, adjusted and tweaked to my personal preference and needs.

package/dist/_shared.css

@@ -0,0 +1,2 @@
+@import "tailwindcss";
+@custom-variant dark (&:where(.dark, .dark *));

package/dist/actions/autogrow.svelte.d.ts

@@ -0,0 +1,6 @@
+export declare function autogrow(el: HTMLTextAreaElement, fn?: () => {
+    enabled?: boolean;
+    min?: number;
+    max?: number;
+    immediate?: boolean;
+}): void;

package/dist/actions/autogrow.svelte.js

@@ -0,0 +1,19 @@
+export function autogrow(el, fn) {
+    $effect(() => {
+        let { enabled = true, max = 250, immediate = true } = fn?.() || {};
+        function set_height(e) {
+            if (enabled) {
+                el.style.height = "auto"; // Reset height to auto to correctly calculate scrollHeight
+                el.style.height = Math.min(el.scrollHeight, max) + "px";
+            }
+        }
+        if (immediate)
+            set_height(null);
+        el.addEventListener("input", set_height);
+        el.addEventListener("blur", set_height);
+        return () => {
+            el.removeEventListener("input", set_height);
+            el.removeEventListener("blur", set_height);
+        };
+    });
+}

package/dist/actions/highlight-dragover.svelte.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Will just add classes to el when being dragged over
+ */
+export declare function highlightDragover(el: HTMLElement, fn?: () => {
+    enabled?: boolean;
+    classes?: string[];
+}): void;

package/dist/actions/highlight-dragover.svelte.js

@@ -0,0 +1,38 @@
+/**
+ * Will just add classes to el when being dragged over
+ */
+export function highlightDragover(el, fn) {
+    // function handle_drop(e: DragEvent) {
+    // 	const files = e?.dataTransfer?.files;
+    // 	// Update the file input with the dropped files
+    // 	el.files = files || null;
+    // 	// Trigger change event for any listeners
+    // 	el.dispatchEvent(new Event("change"));
+    // }
+    function prevent(e) {
+        e.preventDefault();
+        e.stopPropagation();
+    }
+    const HIGH = ["dragenter", "dragover"];
+    const UNHIGH = ["dragleave", "drop"];
+    // const ALL = [...HIGH, ...UNHIGH];
+    $effect(() => {
+        let { classes = ["dragover"], enabled = true } = fn?.() || {};
+        if (!enabled)
+            return;
+        if (!Array.isArray(classes))
+            classes = [classes];
+        const highlight = () => el.classList.add(...classes);
+        const unhighlight = () => el.classList.remove(...classes);
+        // ALL.forEach((name: any) => el.addEventListener(name, prevent, false));
+        HIGH.forEach((name) => el.addEventListener(name, highlight, false));
+        UNHIGH.forEach((name) => el.addEventListener(name, unhighlight, false));
+        // el.addEventListener("drop", handle_drop, false);
+        return () => {
+            // ALL.forEach((name: any) => el.removeEventListener(name, prevent));
+            HIGH.forEach((name) => el.removeEventListener(name, highlight));
+            UNHIGH.forEach((name) => el.removeEventListener(name, unhighlight));
+            // el.removeEventListener("drop", handle_drop);
+        };
+    });
+}

package/dist/actions/index.d.ts

@@ -0,0 +1,7 @@
+export * from "./autogrow.svelte.js";
+export * from "./focus-trap.js";
+export * from "./highlight-dragover.svelte.js";
+export * from "./on-submit-validity-check.svelte.js";
+export * from "./tooltip/tooltip.svelte.js";
+export * from "./trim.svelte.js";
+export * from "./validate.svelte.js";

package/dist/actions/index.js

@@ -0,0 +1,7 @@
+export * from "./autogrow.svelte.js";
+export * from "./focus-trap.js";
+export * from "./highlight-dragover.svelte.js";
+export * from "./on-submit-validity-check.svelte.js";
+export * from "./tooltip/tooltip.svelte.js";
+export * from "./trim.svelte.js";
+export * from "./validate.svelte.js";

package/dist/actions/on-submit-validity-check.svelte.d.ts

@@ -0,0 +1,15 @@
+/**
+ * The problem: custom validity checks via `validate` action are registered on
+ * "input" or "change" events. When a form is submitted without touching those custom
+ * validated elements, those will not be validity-checked...
+ * I'm not able to come up with better solution than to manually trigger events which will
+ * then trigger the custom validation... (utilizing the `requestSubmit` seems like
+ * a right direction, but that still is not good)
+ *
+ * Still, smells like a hack...
+ */
+export declare function onSubmitValidityCheck(node: HTMLFormElement): void;
+export declare namespace onSubmitValidityCheck {
+    var SUBMIT_VALID_EVENT_NAME: string;
+    var SUBMIT_INVALID_EVENT_NAME: string;
+}

package/dist/actions/on-submit-validity-check.svelte.js

@@ -0,0 +1,58 @@
+const SUBMIT_VALID_EVENT_NAME = "submit_valid";
+const SUBMIT_INVALID_EVENT_NAME = "submit_invalid";
+/**
+ * The problem: custom validity checks via `validate` action are registered on
+ * "input" or "change" events. When a form is submitted without touching those custom
+ * validated elements, those will not be validity-checked...
+ * I'm not able to come up with better solution than to manually trigger events which will
+ * then trigger the custom validation... (utilizing the `requestSubmit` seems like
+ * a right direction, but that still is not good)
+ *
+ * Still, smells like a hack...
+ */
+export function onSubmitValidityCheck(node) {
+    const onSubmit = (e) => {
+        e.preventDefault();
+        // this will disable all other onsubmit listeners...
+        e.stopImmediatePropagation();
+        let invalid = [];
+        for (let i = 0; i < node.elements?.length; i++) {
+            let el = node.elements[i];
+            if (typeof el.checkValidity === "function") {
+                // hm... radios are tricky, as triggering change automatically checks the last
+                // input (last radio input), which is not desired
+                if (el.type === "radio")
+                    continue;
+                el.dispatchEvent(new Event("input", { bubbles: true }));
+                el.dispatchEvent(new Event("change", { bubbles: true }));
+                // typeof el.checkValidity === "function" && !el.checkValidity();
+                // NOTE: el.checkValidity() returns true for hidden inputs event if they are invalid!
+                // if (!el.checkValidity()) {
+                if (!el.validity.valid) {
+                    invalid.push(el);
+                }
+            }
+        }
+        // none invalid
+        if (!invalid.length) {
+            node.dispatchEvent(new CustomEvent(SUBMIT_VALID_EVENT_NAME, {
+                bubbles: true,
+                detail: { formData: new FormData(node) },
+            }));
+        }
+        else {
+            node.dispatchEvent(new CustomEvent(SUBMIT_INVALID_EVENT_NAME, {
+                bubbles: true,
+                detail: { invalid },
+            }));
+        }
+    };
+    $effect(() => {
+        node.addEventListener("submit", onSubmit, true);
+        return () => {
+            node.removeEventListener("submit", onSubmit, true);
+        };
+    });
+}
+onSubmitValidityCheck.SUBMIT_VALID_EVENT_NAME = SUBMIT_VALID_EVENT_NAME;
+onSubmitValidityCheck.SUBMIT_INVALID_EVENT_NAME = SUBMIT_INVALID_EVENT_NAME;

package/dist/actions/tooltip/index.css

@@ -0,0 +1,34 @@
+/* prettier-ignore */
+@theme inline {
+    /* style props will not work as with regular components, because tooltips are created outside of the anchor dom tree */
+    --color-tooltip-bg: var(--color-tooltip-bg, var(--color-neutral-800));
+    --color-tooltip-bg-dark: var(--color-tooltip-bg-dark, var(--color-neutral-300));
+    --color-tooltip-text: var(--color-tooltip-text, var(--color-white));
+    --color-tooltip-text-dark: var(--color-tooltip-text-dark, var(--color-black));
+
+}
+
+.stuic-tooltip {
+	position: fixed;
+	display: none;
+	opacity: 0;
+	transition-property: opacity;
+}
+
+@supports (anchor-name: --anchor) {
+	.stuic-tooltip {
+		position-area: top span-right;
+		position-try-fallbacks:
+			flip-inline,
+			flip-block,
+			flip-block flip-inline;
+
+		&.tt-block {
+			display: block;
+			opacity: 0;
+			&.tt-visible {
+				opacity: 1;
+			}
+		}
+	}
+}

package/dist/actions/tooltip/tooltip.svelte.d.ts

@@ -0,0 +1,13 @@
+import "./index.css";
+export declare function isTooltipSupported(): boolean;
+/**
+ *
+ */
+export declare function tooltip(anchorEl: HTMLElement, fn?: () => {
+    enabled?: boolean;
+    content?: string | null;
+    debug?: boolean;
+    class?: string;
+    onShow?: CallableFunction;
+    onHide?: CallableFunction;
+}): void;

package/dist/actions/tooltip/tooltip.svelte.js

@@ -0,0 +1,203 @@
+import { twMerge } from "../../utils/tw-merge.js";
+//
+import "./index.css";
+const TIMEOUT = 200;
+const TRANSITION = 200;
+export function isTooltipSupported() {
+    return (CSS.supports("anchor-name", "--anchor") &&
+        CSS.supports("position-area", "top") &&
+        CSS.supports("position-try", "top") &&
+        CSS.supports("position-try-fallbacks", "top"));
+}
+//
+// let _initialized = false;
+// function global_init_once() {
+// 	if (!is_tooltip_supported()) {
+// 		console.warn("Tooltips not supported...");
+// 		return false;
+// 	}
+// 	if (!_initialized) {
+// 		_initialized = true;
+// 		// const sheet = new CSSStyleSheet();
+// 		// sheet.replaceSync(`
+// 		//     .stuic-tooltip {
+// 		//         position: fixed;
+// 		//         display: none;
+// 		//         opacity: 0;
+// 		//         transition-property: opacity;
+// 		//         transition-duration: ${TRANSITION}ms;
+// 		//     }
+// 		//     @supports (anchor-name: --anchor) {
+// 		//         .stuic-tooltip {
+// 		// 			position-area: top span-right;
+// 		// 			position-try-fallbacks: flip-inline, flip-block, flip-block flip-inline;
+// 		//         }
+// 		//         .stuic-tooltip.tt-block {
+// 		//             display: block;
+// 		//             opacity: 0;
+// 		// 		}
+// 		//         .stuic-tooltip.tt-block.tt-visible {
+// 		//             display: block;
+// 		//             opacity: 1;
+// 		// 		}
+// 		//     }
+// 		// `);
+// 		// document.adoptedStyleSheets = [sheet];
+// 	}
+// 	return true;
+// }
+const _classTooltip = `
+    bg-tooltip-bg dark:bg-tooltip-bg-dark text-tooltip-text dark:text-tooltip-text-dark
+    text-xs tracking-tight rounded my-1
+    px-2.5 py-1.5
+    max-w-64
+    z-50
+`;
+/**
+ *
+ */
+export function tooltip(anchorEl, fn) {
+    // the node has been mounted in the DOM
+    if (!isTooltipSupported())
+        return;
+    //
+    let tooltipEl;
+    let hide_timer = null;
+    let show_timer = null;
+    let do_debug = false;
+    let on_show = null;
+    let on_hide = null;
+    let content = null;
+    let classTooltip = null;
+    let enabled = true;
+    //
+    const rnd = Math.random().toString(36).slice(2);
+    const id = `tooltip-${rnd}`;
+    const anchorName = `--anchor-${rnd}`;
+    // node once init
+    anchorEl.style.cssText += `anchor-name: ${anchorName};`;
+    anchorEl.setAttribute("aria-describedby", id);
+    anchorEl.setAttribute("aria-expanded", "false");
+    const debug = (...args) => {
+        do_debug && console.debug("[tooltip]", rnd, ...args);
+    };
+    function ensure_tooltip() {
+        debug("ensure_tooltip()", content, classTooltip);
+        if (!content)
+            return false;
+        // lazy factory init
+        if (!tooltipEl) {
+            debug("creating element...");
+            tooltipEl = document.createElement("div");
+            tooltipEl.setAttribute("id", id);
+            tooltipEl.setAttribute("role", "tooltip");
+            tooltipEl.style.cssText += `position-anchor: ${anchorName}; transition-duration: ${TRANSITION}ms;`;
+            tooltipEl.classList.add(...twMerge("stuic-tooltip", _classTooltip).split(/\s/));
+            document.body.appendChild(tooltipEl);
+            //
+            tooltipEl.addEventListener("mouseover", schedule_show);
+            tooltipEl.addEventListener("mouseout", schedule_hide);
+        }
+        // re/set based on params
+        set_content();
+        return true;
+    }
+    function set_content() {
+        if (tooltipEl) {
+            debug("set_content()", classTooltip, content);
+            if (classTooltip) {
+                let old = tooltipEl.className;
+                tooltipEl.className = ""; // reset
+                tooltipEl.classList.add(...twMerge(old, classTooltip).split(/\s/));
+            }
+            tooltipEl.textContent = "";
+            tooltipEl.innerHTML = `${content}`;
+        }
+    }
+    function clear_show() {
+        clearTimeout(show_timer);
+        show_timer = null;
+    }
+    function clear_hide() {
+        clearTimeout(hide_timer);
+        hide_timer = null;
+    }
+    function clear_both() {
+        clear_show();
+        clear_hide();
+    }
+    function schedule_show() {
+        debug("schedule_show()", enabled);
+        clear_both();
+        if (!enabled || !ensure_tooltip())
+            return;
+        show_timer = setTimeout(() => {
+            if (!hide_timer) {
+                debug("show...");
+                clear_show();
+                anchorEl.setAttribute("aria-expanded", "true");
+                //
+                tooltipEl.classList.add("tt-block");
+                setTimeout(() => {
+                    tooltipEl.classList.add("tt-visible");
+                    on_show?.();
+                }, TRANSITION);
+                // waitForTwoRepaints().then(() => {
+                // 	tooltipEl.classList.add("tt-visible");
+                // this approach is nicer, but I have a suspicion of the event handlers not being destroyed properly (maybe just a hot-reload issues...)
+                // 	waitForTransitionEnd(tooltipEl).then(() => on_show?.());
+                // });
+            }
+        }, TIMEOUT);
+    }
+    function schedule_hide() {
+        debug("scheduleHide()", enabled);
+        clear_both();
+        // legit - maybe there was no content available...
+        if (!tooltipEl)
+            return false;
+        hide_timer = setTimeout(() => {
+            debug("hide...");
+            clear_hide();
+            anchorEl.setAttribute("aria-expanded", "false");
+            tooltipEl.classList.remove("tt-visible");
+            setTimeout(() => {
+                tooltipEl.classList.remove("tt-block");
+                on_hide?.();
+            }, TRANSITION);
+            // this approach is nicer, but I have a suspicion of the event handlers not being destroyed properly (maybe just a hot-reload issues...)
+            // waitForTransitionEnd(tooltipEl).then(() => {
+            // 	tooltipEl.classList.remove("tt-block");
+            // 	on_hide?.();
+            // });
+        }, TIMEOUT);
+    }
+    // "reactive" params re/set
+    $effect(() => {
+        let { enabled: _enabled, content: _content, debug: debugParam, class: _classTooltip, onShow, onHide, } = fn?.() || {};
+        // re/assign new params
+        do_debug = !!debugParam;
+        on_show = onShow;
+        on_hide = onHide;
+        content = _content ||= anchorEl.getAttribute("aria-label");
+        classTooltip = _classTooltip;
+        enabled = _enabled ?? true;
+        // this will be effective here only if currently in open state, otherwise noop
+        set_content();
+        // do not return cleanups here - we want the tooltipEl to persist params change
+    });
+    // add/remove listeners effect ("non-reactive")
+    $effect(() => {
+        anchorEl.addEventListener("mouseover", schedule_show);
+        anchorEl.addEventListener("mouseout", schedule_hide);
+        return () => {
+            anchorEl.removeEventListener("mouseover", schedule_show);
+            anchorEl.removeEventListener("mouseout", schedule_hide);
+            // might not have been initialized
+            tooltipEl?.removeEventListener("mouseover", schedule_show);
+            tooltipEl?.removeEventListener("mouseout", schedule_hide);
+            tooltipEl?.remove();
+            clear_both();
+        };
+    });
+}

package/dist/actions/trim.svelte.d.ts

@@ -0,0 +1,4 @@
+export declare function trim(el: HTMLInputElement | HTMLTextAreaElement, fn?: () => {
+    enabled?: boolean;
+    setValue?: (v: string) => any;
+}): void;

package/dist/actions/trim.svelte.js

@@ -0,0 +1,17 @@
+export function trim(el, fn) {
+    // the node has been mounted in the DOM
+    $effect(() => {
+        // setup goes here
+        let { enabled, setValue } = fn?.() || { enabled: true };
+        function trim(e) {
+            if (enabled && typeof el.value === "string") {
+                el.value = el.value.trim();
+                setValue?.(el.value);
+            }
+        }
+        el.addEventListener("change", trim);
+        return () => {
+            el.removeEventListener("change", trim);
+        };
+    });
+}

package/dist/actions/{validate.d.ts → validate.svelte.d.ts}

@@ -5,18 +5,18 @@ export interface ValidationResult {
     message: string;
 }
 type ReasonTranslate = (reason: keyof ValidityStateFlags, value: any, fallback: string) => string;
+/** */
 export interface ValidateOptions {
+    enabled?: boolean;
     context?: Record<string, any>;
     customValidator?: (value: any, context: Record<string, any> | undefined, el: HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement) => string | undefined;
-    on?: 'input' | 'change';
+    on?: "input" | "change";
     setValidationResult?: (res: ValidationResult) => void;
     t?: false | ReasonTranslate;
 }
-export declare const validate: {
-    (el: HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement, options: undefined | ValidateOptions): {
-        update(newOptions: undefined | ValidateOptions): void;
-        destroy(): void;
-    };
-    t: null;
-};
+/** Main action api */
+export declare function validate(el: HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement, fn?: () => boolean | ValidateOptions): void;
+export declare namespace validate {
+    var t: null;
+}
 export {};

package/dist/actions/validate.svelte.js

@@ -0,0 +1,90 @@
+import { tick } from "svelte";
+import { waitForNextRepaint, waitForTwoRepaints } from "../utils/paint.js";
+/**
+ *
+ */
+const KNOWN_REASONS = [
+    "badInput",
+    "customError",
+    "patternMismatch",
+    "rangeOverflow",
+    "rangeUnderflow",
+    "stepMismatch",
+    "tooLong",
+    "tooShort",
+    "typeMismatch",
+    "valueMissing",
+];
+/** Main action api */
+export function validate(el, fn) {
+    $effect(() => {
+        //
+        let fnResult = fn?.() ?? {};
+        let { enabled, context, customValidator, on = "change", setValidationResult, t, } = typeof fnResult === "boolean" ? { enabled: !!fnResult } : fnResult;
+        //
+        const _t = (reason, value, fallback) => {
+            // explicit false
+            if (!reason || t === false) {
+                return fallback;
+            }
+            // local t (if any)
+            else if (typeof t === "function") {
+                return t(reason, value, fallback);
+            }
+            // global t (if any)
+            else if (typeof validate.t === "function") {
+                return validate.t(reason, value, fallback);
+            }
+            return fallback;
+        };
+        const _doValidate = () => {
+            if (!enabled)
+                return;
+            el.checkValidity();
+            if (typeof customValidator === "function") {
+                el.setCustomValidity(customValidator(el.value, context, el) || "");
+            }
+            // this triggers the bubble, which is not what we want
+            // el.reportValidity();
+            const validityState = el.validity;
+            const reasons = KNOWN_REASONS.reduce((m, k) => {
+                if (validityState[k])
+                    m.push(k);
+                return m;
+            }, []);
+            // console.log(1111, validityState, el);
+            // hm... Uncaught Svelte error: state_unsafe_mutation...
+            // the `tick` await helps, but I'm not really sure I understand the internals...
+            tick().then(() => {
+                setValidationResult?.({
+                    validity: validityState,
+                    reasons,
+                    valid: validityState?.valid,
+                    // use translate fn for first reason (if fn provided and allowed),
+                    // otherwise fallback to native msg
+                    message: _t(reasons?.[0], el.value, el.validationMessage ||
+                        // PROBLEM: hidden inputs do not report validationMessage-s even
+                        // if correctly reported as invalid. So all we can do, is
+                        // put anything generically reasonable here...
+                        "This field contains invalid data. Please review and try again."),
+                });
+            });
+        };
+        el.addEventListener(on, _doValidate);
+        //
+        let _touchCount = 0;
+        const onFocus = (e) => _touchCount++;
+        el.addEventListener("focus", onFocus);
+        // also validate on first blur
+        const onBlur = (e) => _touchCount === 1 && _doValidate();
+        el.addEventListener("blur", onBlur);
+        return () => {
+            el.removeEventListener(on, _doValidate);
+            el.removeEventListener("focus", onFocus);
+            el.removeEventListener("blur", onBlur);
+        };
+    });
+}
+// ReasonTranslate
+const t = null;
+validate.t = t;