@marianmeres/stuic 1.125.0 → 2.0.0-next.2

package/dist/components/Drawer/Drawer.svelte

@@ -1,88 +1,159 @@
-<script context="module">import { createClog } from "@marianmeres/clog";
-import { createSwitchStore } from "@marianmeres/switch-store";
-import { createEventDispatcher } from "svelte";
-import { fly } from "svelte/transition";
-import { onOutside } from "../../actions/on-outside.js";
-import { prefersReducedMotionStore } from "../../utils/prefers-reduced-motion.js";
-import { twMerge2 } from "../../utils/tw-merge2.js";
-import Backdrop from "../Backdrop/Backdrop.svelte";
-export const createDrawerStore = (open = false) => createSwitchStore(open);
-</script>
+<script lang="ts">
+	import { fly } from "svelte/transition";
+	import { type FocusTrapOptions } from "../../actions/focus-trap.js";
+	import { prefersReducedMotion } from "../../utils/prefers-reduced-motion.svelte.js";
+	import { twMerge } from "../../utils/tw-merge.js";
+	import Backdrop from "../Backdrop/Backdrop.svelte";
+	import type { Snippet } from "svelte";
+	// import { onClickOutside } from "runed";
+
+	const prefersReduced = prefersReducedMotion();
+	const DEFAULT_POS = "left";
+
+	interface Props {
+		visible?: boolean;
+		position?: "left" | "top" | "right" | "bottom";
+		children: Snippet;
+		class?: string;
+		classBackdrop?: string;
+		labelledby?: string;
+		describedby?: string;
+		transitionDuration?: number;
+		// transitionEnabled?: boolean;
+		elBackdrop?: HTMLDivElement;
+		el?: HTMLDivElement;
+		focusTrap?: boolean | FocusTrapOptions;
+		// will be used in `fly` config. Ideally should match with the provided tw classes
+		// to make the animation optimal. May include ccs units (will be considered as pixels otherwise).
+		animOffset?: string | number;
+		onEscape?: () => void;
+		//
+		onOutside?: () => void;
+		// onOutsideEnabled?: boolean;
+	}
+
+	let {
+		visible = $bindable(false),
+		position = DEFAULT_POS,
+		children,
+		class: classProp,
+		classBackdrop,
+		labelledby,
+		describedby,
+		transitionDuration = 200,
+		// transitionEnabled = true,
+		elBackdrop = $bindable(),
+		el = $bindable(),
+		focusTrap,
+		animOffset = "75vw",
+		onEscape,
+		onOutside,
+		// onOutsideEnabled = true,
+	}: Props = $props();
+
+	$effect(() => {
+		if (prefersReduced.current) transitionDuration = 0;
+	});
+
+	// opinionated: make backdrop fade-in a little faster (but never longer than 200)... looks better
+	let fadeInDuration = $derived(Math.min(transitionDuration * 0.7, 200));
+
+	// prettier-ignore
+	const _classPresetsBackdrop = {
+		left:   `justify-start`,
+		right:  `justify-end`,
+		top:    `items-start`,
+		bottom: `items-end`,
+	};
+
+	// prettier-ignore
+	const _classPresets = {
+		left:   `w-full sm:w-[75vw] h-full`,
+		right:  `w-full sm:w-[75vw] h-full`,
+        // top/bottom are full by default
+		top:    `w-full             h-full`, //  sm:h-[75vh]
+		bottom: `w-full             h-full`, //  sm:h-[75vh]
+	};
+
+	// prettier-ignore
+	let _animPresets = $derived({
+        left:   { x: `-${animOffset}`, y: 0 },
+		right:  { x: animOffset,       y: 0 },
+		top:    { x: 0,                y: `-${animOffset}`},
+		bottom: { x: 0,                y: animOffset },
+    });
 
-<script>const clog = createClog("Drawer");
-const dispatch = createEventDispatcher();
-export let drawer;
-export let position = "left";
-const _whitelist = ["left", "top", "right", "bottom"];
-$:
-  if (!_whitelist.includes(position))
-    position = "left";
-let _class = "";
-export { _class as class };
-export let backdropClass = "";
-export let labelledby = "";
-export let describedby = "";
-export let transitionDuration = 250;
-export let transitionEnabled = !$prefersReducedMotionStore;
-export let animOffset = "66vw";
-export let backdropFocusTrapOptions = {};
-$:
-  fadeInDuration = transitionEnabled ? Math.min(transitionDuration * 0.66, 200) : 0;
-const _presetsClsBackdrop = {
-  left: `justify-start`,
-  right: `justify-end`,
-  top: `items-start`,
-  bottom: `items-end`
-};
-const _presetsCls = {
-  left: `w-full sm:w-[66vw] h-full`,
-  right: `w-full sm:w-[66vw] h-full`,
-  top: `w-full             h-full sm:h-[66vh]`,
-  bottom: `w-full             h-full sm:h-[66vh]`
-};
-$:
-  _presetsAnim = {
-    left: { x: `-${animOffset}`, y: 0 },
-    right: { x: animOffset, y: 0 },
-    top: { x: 0, y: `-${animOffset}` },
-    bottom: { x: 0, y: animOffset }
-  };
-let el;
-$:
-  if (el)
-    dispatch("element", { drawer: el });
+	// onClickOutside(
+	// 	() => el,
+	// 	() => {
+	// 		// noop if not enabled
+	// 		if (!onOutsideEnabled) return;
+	// 		// explicit false means ignoring outside click
+	// 		if (typeof onOutside === "function") onOutside();
+	// 		else if (onOutside !== false) visible = false;
+	// 	}
+	// );
+
+	let _classBackdrop = $derived(
+		_classPresetsBackdrop[position] ?? _classPresetsBackdrop[DEFAULT_POS]
+	);
+
+	let _class = $derived(_classPresets[position] ?? _classPresets[DEFAULT_POS]);
+
+	let flyOptions = $derived({
+		duration: transitionDuration,
+		...(_animPresets[position] ?? _animPresets[DEFAULT_POS]),
+	});
+
+	let backdrop: Backdrop = $state()!;
+
+	export function close() {
+		backdrop.close();
+	}
+
+	export function open(openerOrEvent?: null | HTMLElement | MouseEvent) {
+		// setOpener(openerOrEvent ?? (document.activeElement as any));
+		backdrop.open(openerOrEvent);
+	}
+
+	export function setOpener(opener?: null | HTMLElement) {
+		backdrop.setOpener(opener);
+	}
 </script>
 
-{#if $drawer.isOpen}
-	<Backdrop
-		class={twMerge2(`${_presetsClsBackdrop[position] || ''} ${backdropClass}`)}
-		on:escape
-		on:mousedown={(e) => dispatch('click_backdrop')}
-		{fadeInDuration}
-		fadeOutDuration={transitionEnabled ? transitionDuration : 0}
-		on:element
-		focusTrapOptions={backdropFocusTrapOptions}
+<!-- 
+	Using `onmousedown` not `onclick` intentionally. Otherwise drag inside + release outside 
+ 	(eg selecting text and accidentally release outside) would trigger close. 
+-->
+
+<Backdrop
+	bind:this={backdrop}
+	bind:el={elBackdrop}
+	bind:visible
+	class={twMerge(_classBackdrop, classBackdrop)}
+	{focusTrap}
+	{fadeInDuration}
+	fadeOutDuration={transitionDuration}
+	{onEscape}
+	onmousedown={() => onOutside?.()}
+>
+	<!-- svelte-ignore a11y_interactive_supports_focus -->
+	<!-- svelte-ignore a11y_click_events_have_key_events -->
+	<div
+		bind:this={el}
+		aria-modal="true"
+		role="dialog"
+		aria-labelledby={labelledby}
+		aria-describedby={describedby}
+		class={twMerge("overflow-y-auto", _class, classProp)}
+		transition:fly={flyOptions}
+		onmousedown={(e) => {
+			if (onOutside) {
+				e.stopImmediatePropagation();
+				e.stopPropagation();
+			}
+		}}
 	>
-		<!-- 
-			svelte-ignore 
-			a11y-click-events-have-key-events 
-			a11y-no-noninteractive-element-interactions 
-		-->
-		<div
-			bind:this={el}
-			on:mousedown|stopPropagation
-			aria-modal="true"
-			role="dialog"
-			aria-labelledby={labelledby}
-			aria-describedby={describedby}
-			transition:fly={{
-				duration: transitionEnabled ? transitionDuration : 0,
-				...(_presetsAnim[position] || {}),
-			}}
-			class={twMerge2(`overflow-y-auto ${_presetsCls[position] || ''} ${_class}`)}
-			use:onOutside
-		>
-			<slot />
-		</div>
-	</Backdrop>
-{/if}
+		{@render children()}
+	</div>
+</Backdrop>

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

@@ -1,36 +1,25 @@
-import { SvelteComponent } from "svelte";
-import type { FocusTrapOptions } from '../../actions/focus-trap.js';
-export type DrawerStore = ReturnType<typeof createDrawerStore>;
-export declare const createDrawerStore: (open?: boolean) => import("@marianmeres/switch-store").SwitchStore<any>;
-declare const __propDef: {
-    props: {
-        drawer: DrawerStore;
-        position?: "left" | "top" | "right" | "bottom";
-        class?: string;
-        backdropClass?: string;
-        labelledby?: string;
-        describedby?: string;
-        transitionDuration?: number;
-        transitionEnabled?: boolean;
-        animOffset?: string | number;
-        backdropFocusTrapOptions?: Partial<FocusTrapOptions>;
-    };
-    events: {
-        escape: CustomEvent<any>;
-        element: CustomEvent<any>;
-        mousedown: MouseEvent;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type DrawerProps = typeof __propDef.props;
-export type DrawerEvents = typeof __propDef.events;
-export type DrawerSlots = typeof __propDef.slots;
-export default class Drawer extends SvelteComponent<DrawerProps, DrawerEvents, DrawerSlots> {
+import { type FocusTrapOptions } from "../../actions/focus-trap.js";
+import type { Snippet } from "svelte";
+interface Props {
+    visible?: boolean;
+    position?: "left" | "top" | "right" | "bottom";
+    children: Snippet;
+    class?: string;
+    classBackdrop?: string;
+    labelledby?: string;
+    describedby?: string;
+    transitionDuration?: number;
+    elBackdrop?: HTMLDivElement;
+    el?: HTMLDivElement;
+    focusTrap?: boolean | FocusTrapOptions;
+    animOffset?: string | number;
+    onEscape?: () => void;
+    onOutside?: () => void;
 }
-export {};
+declare const Drawer: import("svelte").Component<Props, {
+    close: () => void;
+    open: (openerOrEvent?: null | HTMLElement | MouseEvent) => void;
+    setOpener: (opener?: null | HTMLElement) => void;
+}, "el" | "visible" | "elBackdrop">;
+type Drawer = ReturnType<typeof Drawer>;
+export default Drawer;

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

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

package/dist/components/Drawer/index.js

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

package/dist/components/HoverExpandableWidth/HoverExpandableWidth.svelte

@@ -1,117 +1,156 @@
-<script>import { createClog } from "@marianmeres/clog";
-import { createEventDispatcher } from "svelte";
-import { get } from "svelte/store";
-import { DevicePointer } from "../../utils/device-pointer.js";
-import { prefersReducedMotionStore } from "../../utils/prefers-reduced-motion.js";
-import { twMerge2 } from "../../utils/tw-merge2.js";
-import { windowSize } from "../../utils/window-size.js";
-const clog = createClog("HoverExpandableWidth");
-const dispatch = createEventDispatcher();
-export let enabled = DevicePointer.isFine;
-export let shadowOpacity = 0.5;
-export let duration = 150;
-export let targetWidth = 256;
-export let delayIn = 400;
-export let delayOut = 100;
-let _class = "";
-export { _class as class };
-let _isExpanded = false;
-let _isShrinking = false;
-let _isExpanding = false;
-let el;
-let _delayTimer;
-const _resetDelayTimer = () => {
-  if (_delayTimer)
-    clearTimeout(_delayTimer);
-  _delayTimer = null;
-};
-const _planDelayedExec = (_fn, _delay) => {
-  _resetDelayTimer();
-  _delayTimer = setTimeout(() => {
-    _fn();
-    _resetDelayTimer();
-  }, _delay);
-};
-let box;
-const _expand = () => {
-  if (!enabled)
-    return;
-  if (_isExpanding || _isShrinking || _isExpanded)
-    return;
-  _isExpanded = true;
-  _isExpanding = true;
-  box = el.getBoundingClientRect();
-  const win = get(windowSize);
-  const pos = {
-    top: box.top,
-    bottom: win.height - box.bottom,
-    left: box.left,
-    right: win.width - box.right
-  };
-  el.style.boxShadow = `16px 0 24px -16px rgb(0 0 0 / ${shadowOpacity})`;
-  el.style.top = `${pos.top}px`;
-  el.style.right = `${pos.right}px`;
-  el.style.bottom = `${pos.bottom}px`;
-  el.style.left = `${pos.left}px`;
-  el.style.width = "auto";
-  el.style.height = "auto";
-  el.style.zIndex = "1";
-  setTimeout(
-    () => _isExpanding = false,
-    duration + 1e3 / 60 * 3
-    // 3 x raf
-  );
-  requestAnimationFrame(() => {
-    el.style.position = `fixed`;
-    requestAnimationFrame(() => {
-      el.style.width = `${box.width}px`;
-      requestAnimationFrame(() => {
-        !$prefersReducedMotionStore && (el.style.transitionProperty = "all");
-        el.style.width = `${targetWidth}px`;
-      });
-    });
-  });
-};
-const _shrink = () => {
-  if (!enabled)
-    return;
-  if (_isExpanding || _isShrinking || !_isExpanded)
-    return;
-  _isExpanded = false;
-  _isShrinking = true;
-  el.style.boxShadow = "none";
-  el.style.width = `${box.width}px`;
-  setTimeout(() => {
-    _isShrinking = false;
-    el.style.position = `static`;
-    el.style.top = "auto";
-    el.style.right = "auto";
-    el.style.bottom = "auto";
-    el.style.left = "auto";
-    el.style.width = "100%";
-    el.style.height = "100%";
-    el.style.zIndex = "0";
-    el.style.transitionProperty = "none";
-  }, duration);
-};
-$:
-  dispatch("change", _isExpanded);
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import { innerHeight, innerWidth } from "svelte/reactivity/window";
+	import { DevicePointer } from "../../utils/device-pointer.svelte.js";
+	import { waitForNextRepaint, waitForTransitionEnd } from "../../utils/paint.js";
+	import { prefersReducedMotion } from "../../utils/prefers-reduced-motion.svelte.js";
+	import { twMerge } from "../../utils/tw-merge.js";
+
+	const dp = new DevicePointer();
+
+	interface Props {
+		enabled?: boolean;
+		class?: string;
+		shadowOpacity?: number;
+		duration?: number;
+		targetWidth?: number;
+		delayIn?: number;
+		delayOut?: number;
+		children: Snippet<
+			[
+				{
+					isExpanded: boolean;
+					isExpanding: boolean;
+					isShrinking: boolean;
+					inTransition: boolean;
+				},
+			]
+		>;
+	}
+
+	let {
+		enabled = dp.isFine,
+		shadowOpacity = 0.5,
+		duration: _duration = 150,
+		targetWidth = 256,
+		delayIn = 500,
+		delayOut = 300,
+		class: classProp,
+		children,
+		...rest
+	}: Props = $props();
+
+	//
+	const prefersReduced = prefersReducedMotion();
+	let el = $state<HTMLDivElement>()!;
+	let isExpanded = $state(false);
+	let isShrinking = $state(false);
+	let isExpanding = $state(false);
+	let inTransition = $derived(isExpanding || isShrinking);
+	let _timer: any;
+	let box = $state<DOMRect>();
+	let duration = $derived(prefersReduced.current ? 0 : _duration);
+
+	function clear() {
+		clearTimeout(_timer);
+		_timer = null;
+	}
+
+	function schedule(fn: CallableFunction, delay: number) {
+		clear();
+		_timer = setTimeout(() => {
+			fn?.();
+			clear();
+		}, delay);
+	}
+
+	function expand() {
+		if (!enabled) return;
+		if (isExpanding || isShrinking || isExpanded) return;
+
+		// asap
+		isExpanded = true;
+		isExpanding = true;
+
+		box = el.getBoundingClientRect();
+		const pos = {
+			top: box.top,
+			bottom: innerHeight.current! - box.bottom,
+			left: box.left,
+			right: innerWidth.current! - box.right,
+		};
+
+		// <offset-x>, <offset-y>, <blur-radius>, <spread-radius>
+		el.style.boxShadow = `16px 0 24px -16px rgb(0 0 0 / ${shadowOpacity})`;
+
+		// no transition yet
+		el.style.top = `${pos.top}px`;
+		el.style.right = `${pos.right}px`;
+		el.style.bottom = `${pos.bottom}px`;
+		el.style.left = `${pos.left}px`;
+
+		el.style.width = "auto";
+		el.style.height = "auto";
+
+		el.style.zIndex = "1";
+
+		// kind of ugly - need to set props in multiple steps...
+		(async () => {
+			await waitForNextRepaint();
+			el.style.position = `fixed`;
+
+			await waitForNextRepaint();
+			el.style.width = `${box!.width}px`;
+
+			await waitForNextRepaint();
+			el.style.transitionProperty = "all";
+			el.style.width = `${targetWidth}px`;
+
+			await waitForTransitionEnd(el);
+			isExpanding = false;
+		})();
+	}
+
+	function shrink() {
+		if (!enabled) return;
+		if (isExpanding || isShrinking || !isExpanded) return;
+
+		// asap
+		isExpanded = false;
+		isShrinking = true;
+
+		el.style.boxShadow = "none";
+		el.style.width = `${box!.width}px`;
+
+		(async () => {
+			await waitForTransitionEnd(el);
+			isShrinking = false;
+
+			// now reset all back to defaults
+			el.style.position = `static`;
+
+			el.style.top = "auto";
+			el.style.right = "auto";
+			el.style.bottom = "auto";
+			el.style.left = "auto";
+
+			el.style.width = "100%";
+			el.style.height = "100%";
+
+			el.style.zIndex = "0";
+			el.style.transitionProperty = "none";
+		})();
+	}
 </script>
 
-<!-- svelte-ignore a11y-click-events-have-key-events a11y-no-static-element-interactions -->
 <div
 	bind:this={el}
-	on:mouseenter={() => _planDelayedExec(_expand, delayIn)}
-	on:mouseleave={() => _planDelayedExec(_shrink, delayOut)}
-	on:click
-	aria-expanded={_isExpanded}
-	class={twMerge2(`overflow-x-hidden overflow-y-auto ${_class}`)}
-	style="width: 100%; height: 100%; transition-duration: {duration}ms;"
+	onmouseenter={() => schedule(expand, delayIn)}
+	onmouseleave={() => schedule(shrink, delayOut)}
+	class={twMerge("stuic-expandable", "overflow-x-hidden overflow-y-auto", classProp)}
+	style="width: 100%; height: 100%; transition-timing-function: ease-in; transition-duration: {duration}ms;"
+	aria-expanded={isExpanded}
+	{...rest}
 >
-	<slot
-		isExpanded={_isExpanded}
-		isExpanding={_isExpanding}
-		isShrinking={_isShrinking}
-		inTransition={_isExpanding || _isShrinking}
-	/>
+	{@render children({ isExpanded, isShrinking, isExpanding, inTransition })}
 </div>

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

@@ -1,34 +1,21 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        enabled?: boolean | undefined;
-        shadowOpacity?: number;
-        duration?: number;
-        targetWidth?: number;
-        delayIn?: number;
-        delayOut?: number;
-        class?: string;
-    };
-    events: {
-        click: MouseEvent;
-        change: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {
+import type { Snippet } from "svelte";
+interface Props {
+    enabled?: boolean;
+    class?: string;
+    shadowOpacity?: number;
+    duration?: number;
+    targetWidth?: number;
+    delayIn?: number;
+    delayOut?: number;
+    children: Snippet<[
+        {
             isExpanded: boolean;
             isExpanding: boolean;
             isShrinking: boolean;
             inTransition: boolean;
-        };
-    };
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type HoverExpandableWidthProps = typeof __propDef.props;
-export type HoverExpandableWidthEvents = typeof __propDef.events;
-export type HoverExpandableWidthSlots = typeof __propDef.slots;
-export default class HoverExpandableWidth extends SvelteComponent<HoverExpandableWidthProps, HoverExpandableWidthEvents, HoverExpandableWidthSlots> {
+        }
+    ]>;
 }
-export {};
+declare const HoverExpandableWidth: import("svelte").Component<Props, {}, "">;
+type HoverExpandableWidth = ReturnType<typeof HoverExpandableWidth>;
+export default HoverExpandableWidth;

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

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

package/dist/components/HoverExpandableWidth/index.js

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