@marianmeres/stuic 2.0.0-next.5 → 2.0.3

package/dist/actions/file-dropzone.svelte.d.ts

@@ -0,0 +1,8 @@
+interface FileDropzoneOptions {
+    enabled?: boolean;
+    inputEl: HTMLInputElement;
+    allowClick?: boolean;
+    processFiles?: (files: FileList | null) => any | Promise<any>;
+}
+export declare function fileDropzone(el: HTMLElement, fn?: () => FileDropzoneOptions): void;
+export {};

package/dist/actions/file-dropzone.svelte.js

@@ -0,0 +1,43 @@
+export function fileDropzone(el, fn) {
+    $effect(() => {
+        let { enabled = true, allowClick = true, inputEl, processFiles, } = fn?.() || {};
+        if (!enabled)
+            return;
+        if (!inputEl) {
+            console.warn("Missing inputEl instance, can't continue...");
+            return;
+        }
+        function preventDefault(e) {
+            e.preventDefault();
+            // e.stopPropagation();
+        }
+        function handle_drop(e) {
+            handle_files(e?.dataTransfer?.files ?? null);
+        }
+        function handle_change(e) {
+            if (e.target instanceof HTMLInputElement) {
+                handle_files(e.target.files);
+            }
+        }
+        function handle_files(files) {
+            processFiles?.(files);
+        }
+        function handle_click() {
+            allowClick && inputEl.click();
+        }
+        // over/drop are critical, enter/leave I'm not sure
+        const PREVENT = ["dragenter", "dragover", "dragleave", "drop"];
+        PREVENT.forEach((name) => el.addEventListener(name, preventDefault));
+        //
+        el.addEventListener("drop", handle_drop);
+        el.addEventListener("click", handle_click);
+        inputEl.addEventListener("change", handle_change);
+        //
+        return () => {
+            PREVENT.forEach((name) => el.removeEventListener(name, preventDefault));
+            el.removeEventListener("drop", handle_drop);
+            el.removeEventListener("click", handle_click);
+            inputEl.removeEventListener("change", handle_change);
+        };
+    });
+}

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

@@ -11,7 +11,7 @@ export function highlightDragover(el, fn) {
     // }
     function prevent(e) {
         e.preventDefault();
-        e.stopPropagation();
+        // e.stopPropagation();
     }
     const HIGH = ["dragenter", "dragover"];
     const UNHIGH = ["dragleave", "drop"];
@@ -22,13 +22,26 @@ export function highlightDragover(el, fn) {
             return;
         if (!Array.isArray(classes))
             classes = [classes];
+        // allow strings
+        classes = classes.reduce((m, c) => {
+            m = [
+                ...m,
+                ...c
+                    .split(/\s/)
+                    .map((v) => v.trim())
+                    .filter(Boolean),
+            ];
+            return m;
+        }, []);
+        // el.addEventListener("drop", prevent);
         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));
+        HIGH.forEach((name) => el.addEventListener(name, highlight));
+        UNHIGH.forEach((name) => el.addEventListener(name, unhighlight));
         // el.addEventListener("drop", handle_drop, false);
         return () => {
+            // el.removeEventListener("drop", prevent);
             // ALL.forEach((name: any) => el.removeEventListener(name, prevent));
             HIGH.forEach((name) => el.removeEventListener(name, highlight));
             UNHIGH.forEach((name) => el.removeEventListener(name, unhighlight));

package/dist/actions/index.d.ts

@@ -1,8 +1,10 @@
 export * from "./autogrow.svelte.js";
 export * from "./autoscroll.js";
+export * from "./file-dropzone.svelte.js";
 export * from "./focus-trap.js";
 export * from "./highlight-dragover.svelte.js";
 export * from "./on-submit-validity-check.svelte.js";
+export * from "./resizable-width.svelte.js";
 export * from "./tooltip/tooltip.svelte.js";
 export * from "./trim.svelte.js";
 export * from "./validate.svelte.js";

package/dist/actions/index.js

@@ -1,8 +1,10 @@
 export * from "./autogrow.svelte.js";
 export * from "./autoscroll.js";
+export * from "./file-dropzone.svelte.js";
 export * from "./focus-trap.js";
 export * from "./highlight-dragover.svelte.js";
 export * from "./on-submit-validity-check.svelte.js";
+export * from "./resizable-width.svelte.js";
 export * from "./tooltip/tooltip.svelte.js";
 export * from "./trim.svelte.js";
 export * from "./validate.svelte.js";

package/dist/actions/resizable-width.svelte.d.ts

@@ -0,0 +1,21 @@
+export interface ResizableWidthOptions {
+    enabled?: boolean;
+    initial?: number;
+    min?: number;
+    max?: number;
+    units?: "px" | "%";
+    key?: string | number | null | undefined;
+    storage?: "local" | "session";
+    handleClass?: string;
+    handleDragClass?: string;
+    onResize?: (info: {
+        width: number;
+        units: "px" | "%";
+        container: number;
+    }) => void;
+    debug?: (...args: any[]) => void;
+}
+/**
+ * Note: units should not be changed on the fly...
+ */
+export declare function resizableWidth(el: HTMLDivElement, fn?: () => ResizableWidthOptions): void;

package/dist/actions/resizable-width.svelte.js

@@ -0,0 +1,162 @@
+import { localStorageState, sessionStorageState, } from "../utils/persistent-state.svelte.js";
+import { twMerge } from "../utils/tw-merge.js";
+/**
+ * Note: units should not be changed on the fly...
+ */
+export function resizableWidth(el, fn) {
+    const DEFAULT_HANDLE_CLS = [
+        "group",
+        "absolute top-0 right-0 bottom-0",
+        "w-[1px]",
+        "bg-black/20 hover:bg-black/30",
+        "dark:bg-white/10 dark:hover:bg-white/20",
+        "transition-colors duration-200",
+        "touch-none cursor-ew-resize",
+    ].join(" ");
+    const DEFAULT_DRAG_HANDLE_CLS = [
+        "absolute h-[20px] w-[9px]",
+        "-translate-x-[4px] top-1/2 -translate-y-1/2",
+        "rounded border border-black/20 dark:border-white/20",
+        "bg-gray-300 group-hover:bg-gray-400",
+        "dark:bg-gray-600 dark:group-hover:bg-gray-500",
+        "transition-colors duration-200",
+        "touch-none cursor-ew-resize",
+    ].join(" ");
+    function create_handle(el, handleClass, handleDragClass) {
+        const handle = document.createElement("div");
+        handle.setAttribute("data-handle", "true");
+        const dragHandle = document.createElement("div");
+        dragHandle.classList.add(...twMerge(DEFAULT_DRAG_HANDLE_CLS, handleDragClass).split(" "));
+        handle.appendChild(dragHandle);
+        el.appendChild(handle);
+        //
+        handle.classList.add(...twMerge(DEFAULT_HANDLE_CLS, handleClass).split(" "));
+        return handle;
+    }
+    $effect(() => {
+        let { enabled = true, initial = 0, min = 0, max = 0, units = "px", key, storage = "session", handleClass = "", handleDragClass = "", onResize, debug, } = fn?.() || {};
+        const _debug = (...args) => debug?.("[resizable-width]", ...args);
+        _debug("$effect");
+        if (!enabled)
+            return;
+        // initialize ////////////////////////////////////////////////////////////////////
+        //
+        let isResizing = false;
+        let startX = 0;
+        let startWidth = 0;
+        let containerW = undefined;
+        //
+        const handle = create_handle(el, handleClass, handleDragClass);
+        const container = el.parentElement;
+        // do we have a storage? if so, adjust the initial value...
+        const initialBackup = initial;
+        const _storage = get_storage(storage, key, initial);
+        if (_storage)
+            initial = _storage.current ?? initial;
+        // handlers/workers/helpers //////////////////////////////////////////////////////
+        function set_width(pxOrPercent) {
+            if (pxOrPercent) {
+                _debug(`set_width(${pxOrPercent})`);
+                set_width_px(units === "%" ? container.offsetWidth * (pxOrPercent / 100) : pxOrPercent);
+            }
+        }
+        function set_width_px(widthPx) {
+            _debug(`set_width_px(${widthPx})`);
+            containerW ??= container.offsetWidth;
+            const clamp = (value) => {
+                const _initial = value;
+                if (min)
+                    value = Math.max(min, value);
+                if (max)
+                    value = Math.min(max, value);
+                _initial !== value && _debug("clamped", value, units);
+                return value;
+            };
+            let width;
+            if (units === "%") {
+                const widthPercent = Math.min(100, (widthPx / containerW) * 100); // convert to % (with 100 max)
+                width = clamp(widthPercent);
+            }
+            else {
+                width = clamp(widthPx);
+            }
+            el.style.width = `${width}${units}`;
+            _debug("new width", width, units);
+            const info = { width, units, container: containerW };
+            onResize?.(info);
+            // maybe save to storage
+            if (_storage)
+                _storage.current = width;
+            return info;
+        }
+        function resize_start(e) {
+            e.preventDefault(); // prevent scrolling on touch devices
+            isResizing = true;
+            //
+            const clientX = e.touches ? e.touches[0].clientX : e.clientX;
+            startX = clientX;
+            startWidth = parseInt(getComputedStyle(el).width, 10);
+            containerW = container.offsetWidth;
+            //
+            document.body.style.cursor = "ew-resize";
+            document.body.style.userSelect = "none";
+        }
+        function resize(e) {
+            if (!isResizing)
+                return;
+            e.preventDefault(); // prevent scrolling on touch devices
+            //
+            const clientX = e.touches ? e.touches[0].clientX : e.clientX;
+            const deltaX = clientX - startX;
+            let width = startWidth + deltaX;
+            set_width_px(width);
+        }
+        function resize_stop() {
+            if (isResizing) {
+                isResizing = false;
+                containerW = undefined;
+                //
+                document.body.style.cursor = "";
+                document.body.style.userSelect = "";
+            }
+        }
+        function on_dblclick() {
+            set_width(initialBackup);
+        }
+        // initial styles ////////////////////////////////////////////////////////////////
+        el.style.position = "relative"; // so the handle will work
+        set_width(initial);
+        // listeners /////////////////////////////////////////////////////////////////////
+        // handle
+        handle.addEventListener("dblclick", on_dblclick);
+        handle.addEventListener("selectstart", (e) => e.preventDefault()); // prevent text selection during resize
+        // mouse
+        handle.addEventListener("mousedown", resize_start);
+        document.addEventListener("mousemove", resize);
+        document.addEventListener("mouseup", resize_stop);
+        // touch
+        handle.addEventListener("touchstart", resize_start, { passive: false });
+        document.addEventListener("touchmove", resize, { passive: false });
+        document.addEventListener("touchend", resize_stop);
+        document.addEventListener("touchcancel", resize_stop);
+        // cleanup ///////////////////////////////////////////////////////////////////////
+        return () => {
+            // mouse
+            document.removeEventListener("mousemove", resize);
+            document.removeEventListener("mouseup", resize_stop);
+            // touch
+            document.removeEventListener("touchmove", resize);
+            document.removeEventListener("touchend", resize_stop);
+            document.removeEventListener("touchcancel", resize_stop);
+            // will also remove it's own event listeners
+            handle.remove();
+        };
+    });
+}
+// helpers ///////////////////////////////////////////////////////////////////////////////
+function get_storage(type, key, initialValue) {
+    if (key) {
+        return (type === "session" ? sessionStorageState : localStorageState)(`resizable-width-${key}`, initialValue);
+    }
+    return null;
+}

package/dist/actions/validate.svelte.js

@@ -55,20 +55,20 @@ export function validate(el, fn) {
             // 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."),
-                });
+            // 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 only something generic here...
+                    "This field is invalid. Please review and try again."),
             });
+            // });
         };
         el.addEventListener(on, _doValidate);
         //

package/dist/components/Backdrop/Backdrop.svelte

@@ -139,7 +139,7 @@
 		bind:this={el}
 		role="presentation"
 		tabindex="-1"
-		class={twMerge("fixed inset-0 flex z-10", classProp)}
+		class={twMerge("fixed inset-0 flex z-10 h-dvh", classProp)}
 		in:fade={{ duration: fadeInDuration }}
 		out:fade={{ duration: fadeOutDuration }}
 		use:focusTrapAction={{

package/dist/components/Button/Button.svelte

@@ -8,7 +8,7 @@
 		border-button-border dark:border-button-border-dark
 		rounded-md
 		inline-flex items-center justify-center gap-x-2
-		px-3 py-1.5
+		px-3 py-2
 
 		hover:brightness-[1.05]
 		active:brightness-[0.95]

package/dist/components/Button/Button.svelte.d.ts

@@ -1,4 +1,4 @@
-export declare const BUTTON_STUIC_BASE_CLASSES = "\n\t\tbg-button-bg text-button-text \n\t\tdark:bg-button-bg-dark dark:text-button-text-dark\n\t\tfont-mono text-sm text-center \n\t\tleading-none\n\t\tborder-1\n\t\tborder-button-border dark:border-button-border-dark\n\t\trounded-md\n\t\tinline-flex items-center justify-center gap-x-2\n\t\tpx-3 py-1.5\n\n\t\thover:brightness-[1.05]\n\t\tactive:brightness-[0.95]\n\t\tdisabled:hover:brightness-100\n\n\t\tfocus:brightness-[1.05] \n\t\tfocus:border-button-border-focus focus:dark:border-button-border-focus-dark\n\n\t\t        focus:outline-4         focus:outline-black/10         focus:dark:outline-white/20\n\t\tfocus-visible:outline-4 focus-visible:outline-black/10 focus-visible:dark:outline-white/20\n\t";
+export declare const BUTTON_STUIC_BASE_CLASSES = "\n\t\tbg-button-bg text-button-text \n\t\tdark:bg-button-bg-dark dark:text-button-text-dark\n\t\tfont-mono text-sm text-center \n\t\tleading-none\n\t\tborder-1\n\t\tborder-button-border dark:border-button-border-dark\n\t\trounded-md\n\t\tinline-flex items-center justify-center gap-x-2\n\t\tpx-3 py-2\n\n\t\thover:brightness-[1.05]\n\t\tactive:brightness-[0.95]\n\t\tdisabled:hover:brightness-100\n\n\t\tfocus:brightness-[1.05] \n\t\tfocus:border-button-border-focus focus:dark:border-button-border-focus-dark\n\n\t\t        focus:outline-4         focus:outline-black/10         focus:dark:outline-white/20\n\t\tfocus-visible:outline-4 focus-visible:outline-black/10 focus-visible:dark:outline-white/20\n\t";
 export declare const BUTTON_STUIC_PRESET_CLASSES: any;
 import type { Snippet } from "svelte";
 import type { HTMLButtonAttributes } from "svelte/elements";

package/dist/components/ButtonGroupRadio/ButtonGroupRadio.svelte

@@ -1,13 +1,16 @@
 <script lang="ts">
-	import { ItemCollection, type Item } from "@marianmeres/item-collection";
-	import { getId } from "../../utils/get-id.js";
+	import { ItemCollection } from "@marianmeres/item-collection";
 	import { twMerge } from "../../utils/tw-merge.js";
-	import type { FieldRadiosOption } from "../Input/types.js";
 	import Button from "../Button/Button.svelte";
+	import type { FieldRadiosOption } from "../Input/types.js";
 	//
 	import "./index.css";
 
-	interface ItemColl extends ItemCollection<{ id: string; option: FieldRadiosOption }> {}
+	interface ItemCollectionType {
+		id: string;
+		option: FieldRadiosOption;
+	}
+	interface ItemColl extends ItemCollection<ItemCollectionType> {}
 
 	interface Props {
 		value?: string;
@@ -58,7 +61,12 @@
 			{}
 		);
 
-		if (activeIndex !== undefined) out.setActiveIndex(activeIndex);
+		if (value !== undefined) {
+			const index = out.items.findIndex((item: ItemCollectionType) => {
+				return value === (item?.option.value ?? item.option.label);
+			});
+			if (index > -1) out.setActiveIndex(index);
+		} else if (activeIndex !== undefined) out.setActiveIndex(activeIndex);
 
 		return out;
 	});
@@ -70,20 +78,44 @@
 		});
 	});
 
+	const rounded = "rounded-md";
+	const roundedBtn = "rounded-md";
 	//
 	const CLS = `
-        p-1.5 rounded-lg inline-block space-x-2
+		stuic-button-group
+        ${rounded}
+		w-full
+        py-1.5 px-1.5 inline-block space-x-1
         bg-button-group-bg text-button-group-text
         dark:bg-button-group-bg-dark dark:text-button-group-text-dark
         border-1
         border-button-group-border dark:border-button-group-border-dark
+		flex justify-between
+        
+        focus-within:border-button-group-accent focus-within:dark:border-button-group-accent-dark
+        focus-within:ring-button-group-accent/20 focus-within:dark:ring-button-group-accent-dark/20
+        focus-within:ring-4
+    `;
+
+	const CLS_BUTTON = `
+        ${rounded}
+		w-full inline-block
+	    bg-transparent text-button-group-text dark:text-button-group-text-dark
+        hover:bg-transparent hover:text-button-group-text hover:dark:text-button-group-text-dark
+        outline-none focus:outline-none
     `;
 
 	// we need some active indication by default... use just something subtle here, in the wild
 	// this will be styled with classButtonActive
-	const CLS_ACTIVE = `
-	    shadow-[0px_0px_1px_1px_rgba(0_0_0_/_.6)]
+	const CLS_BUTTON_ACTIVE = `
+        shadow-none
+        bg-button-group-bg-active dark:bg-button-group-bg-active-dark
+        text-button-group-text-active dark:text-button-group-text-active-dark
+        hover:bg-button-group-bg-active hover:dark:bg-button-group-bg-active
+        hover:text-button-group-text-active hover:dark:text-button-group-text-active-dark
+        ${roundedBtn}
     `;
+	// shadow-[0px_0px_1px_1px_rgba(0_0_0_/_.6)]
 
 	let els = $state<Record<number, HTMLButtonElement>>({});
 
@@ -104,13 +136,16 @@
 	>
 		{#each coll.items as item, i}
 			<Button
-				tabindex={i === 0 ? tabindex : undefined}
+				tabindex={$coll.activeIndex === i ? tabindex : -1}
 				class={twMerge(
 					"border-none shadow-none",
+					CLS_BUTTON,
 					classButton,
-					$coll.activeIndex === i && [CLS_ACTIVE, classButtonActive].join(" ")
+					$coll.activeIndex === i && [CLS_BUTTON_ACTIVE, classButtonActive].join(" ")
 				)}
+				{disabled}
 				{size}
+				type="button"
 				role="radio"
 				aria-checked={$coll.activeIndex === i}
 				onclick={async () => {
@@ -118,10 +153,10 @@
 				}}
 				bind:el={els[i]}
 				onkeydown={async (e) => {
-					if (e.key === "ArrowRight") {
+					if (["ArrowRight", "ArrowDown"].includes(e.key)) {
 						await maybe_activate(Math.min(i + 1, coll.size - 1), coll);
 					}
-					if (e.key === "ArrowLeft") {
+					if (["ArrowLeft", "ArrowUp"].includes(e.key)) {
 						await maybe_activate(Math.max(0, i - 1), coll);
 					}
 				}}

package/dist/components/ButtonGroupRadio/ButtonGroupRadio.svelte.d.ts

@@ -1,10 +1,11 @@
 import { ItemCollection } from "@marianmeres/item-collection";
 import type { FieldRadiosOption } from "../Input/types.js";
 import "./index.css";
-interface ItemColl extends ItemCollection<{
+interface ItemCollectionType {
     id: string;
     option: FieldRadiosOption;
-}> {
+}
+interface ItemColl extends ItemCollection<ItemCollectionType> {
 }
 interface Props {
     value?: string;

package/dist/components/ButtonGroupRadio/index.css

@@ -3,12 +3,21 @@
 
 /* prettier-ignore */
 @theme inline {
-	--color-button-group-bg: var(--color-button-group-bg, var(--color-neutral-100));
+	--color-button-group-bg: var(--color-button-group-bg, var(--color-white));
 	--color-button-group-bg-dark: var(--color-button-group-bg-dark, var(--color-neutral-600));
 
 	--color-button-group-text: var(--color-button-group-text, var(--color-black));
-	--color-button-group-text-dark: var(--color-button-group-text-dark, var(--color-white));
+	--color-button-group-text-dark: var(--color-button-group-text-dark, var(--color-neutral-300));
 
 	--color-button-group-border: var(--color-button-group-border, var(--color-neutral-300));
 	--color-button-group-border-dark: var(--color-button-group-border-dark, var(--color-neutral-800));
+
+    --color-button-group-accent: var(--color-button-group-accent, var(--color-red-600));
+	--color-button-group-accent-dark: var(--color-button-group-accent-dark, var(--color-red-400));
+
+	--color-button-group-bg-active: var(--color-button-group-bg-active, var(--color-neutral-500));
+	--color-button-group-bg-active-dark: var(--color-button-group-bg-active-dark, var(--color-neutral-500));
+
+    --color-button-group-text-active: var(--color-button-group-text-active, var(--color-white));
+    --color-button-group-text-active-dark: var(--color-button-group-text-active-dark, var(--color-white));
 }

package/dist/components/ButtonGroupRadio/index.d.ts

@@ -0,0 +1 @@
+export { default as ButtonGroupRadio } from "./ButtonGroupRadio.svelte";

package/dist/components/ButtonGroupRadio/index.js

@@ -0,0 +1 @@
+export { default as ButtonGroupRadio } from "./ButtonGroupRadio.svelte";