Merge pull request #9 from svecosystem/improve-element-size

Improve element size
svecosystem · Apr 22, 2024 · efab20f · efab20f
2 parents 70b9c50 + 424bf56
commit efab20f
Show file tree

Hide file tree

Showing 8 changed files with 30 additions and 36 deletions.
diff --git a/packages/runed/src/lib/functions/useActiveElement/useActiveElement.svelte.ts b/packages/runed/src/lib/functions/useActiveElement/useActiveElement.svelte.ts
@@ -1,5 +1,13 @@
 import { isBrowser } from "$lib/internal/utils/browser.js";
 
+
+/**
+ * Returns a reactive value that is equal to `document.activeElement`.
+ * It automatically listens for changes, keeping the reference up to date.
+ *
+ * @export
+ * @returns {{ value: Readonly<Element | null> }}
+ */
 export function useActiveElement(): { value: Readonly<Element | null> } {
 	const activeElement = $state({ value: isBrowser() ? document.activeElement : null });
 

diff --git a/packages/runed/src/lib/functions/useDebounce/useDebounce.svelte.ts b/packages/runed/src/lib/functions/useDebounce/useDebounce.svelte.ts
@@ -12,10 +12,6 @@ import type { FunctionArgs, ValueOrGetter } from "$lib/internal/types.js";
  * The second parameter is the time to wait before calling the original callback.
  * Alternatively, it can also be a getter function that returns the time to wait.
  *
- * @export
- * @template {FunctionArgs} Callback
- * @param {Callback} callback
- * @param {number} wait
  */
 export function useDebounce<Callback extends FunctionArgs>(
 	callback: Callback,

diff --git a/packages/runed/src/lib/functions/useDebounce/useDebounce.test.ts b/packages/runed/src/lib/functions/useDebounce/useDebounce.test.ts
diff --git a/packages/runed/src/lib/functions/useElementSize/useElementSize.svelte.ts b/packages/runed/src/lib/functions/useElementSize/useElementSize.svelte.ts
@@ -9,20 +9,31 @@ type Options = {
 	box?: "content-box" | "border-box";
 };
 
+
+/**
+ * Returns a reactive value holding the size of `node`.
+ *
+ * @export
+ * @param {ValueOrGetter<HTMLElement | undefined>} node
+ * @param {Options} [options={
+ * 		box: "border-box",
+ * 	}]
+ * @returns {*}
+ */
 export function useElementSize(
-	_node: ValueOrGetter<HTMLElement | undefined>,
+	node: ValueOrGetter<HTMLElement | undefined>,
 	options: Options = {
 		box: "border-box",
 	}
 ) {
-	const node = boxed(_node);
+	const $node = boxed(node);
 	const size = $state({
 		width: options.initialSize?.width ?? 0,
 		height: options.initialSize?.height ?? 0,
 	});
 
 	$effect(() => {
-		if (!node.value) return;
+		if (!$node.value) return;
 
 		const observer = new ResizeObserver((entries) => {
 			for (const entry of entries) {
@@ -33,7 +44,7 @@ export function useElementSize(
 				size.height = boxSizeArr.reduce((acc, size) => Math.max(acc, size.blockSize), 0);
 			}
 		});
-		observer.observe(node.value);
+		observer.observe($node.value);
 
 		return () => {
 			observer.disconnect();

diff --git a/packages/runed/src/lib/functions/useElementSize/useElementSize.test.ts b/packages/runed/src/lib/functions/useElementSize/useElementSize.test.ts
diff --git a/sites/docs/content/functions/use-active-element.md b/sites/docs/content/functions/use-active-element.md
@@ -20,14 +20,8 @@ import { UseActiveElementDemo } from '$lib/components/demos';
 	const activeElement = useActiveElement();
 </script>
 
-<div class="rounded-md bg-card p-8">
-	<p>
-		Currently active element:
-		<span class="font-bold">
-			{activeElement.value !== null
-				? activeElement.value.localName
-				: "No active element found"}
-		</span>
-	</p>
-</div>
+<p>
+	Currently active element: 
+	{activeElement.value?.localName ?? 'No active element found'}
+</p>
 ```
diff --git a/sites/docs/src/lib/components/demos/use-active-element.svelte b/sites/docs/src/lib/components/demos/use-active-element.svelte
@@ -8,9 +8,7 @@
 	<p>
 		Currently active element:
 		<span class="font-bold">
-			{activeElement.value !== null
-				? activeElement.value.localName
-				: "No active element found"}
+			{activeElement.value?.localName ?? "No active element found"}
 		</span>
 	</p>
 </div>
diff --git a/sites/docs/src/lib/components/demos/use-debounce.svelte b/sites/docs/src/lib/components/demos/use-debounce.svelte
@@ -23,7 +23,8 @@
 
 <div class="rounded-md bg-card p-8">
 	<button
-		class="relative z-20 inline-flex items-center justify-center rounded-md border bg-brand/50 px-3 py-1.5 text-sm font-medium transition-all hover:bg-brand/25 focus:outline-none"
+		class="relative z-20 inline-flex items-center justify-center rounded-md border bg-brand/50
+		px-3 py-1.5 text-sm font-medium transition-all hover:bg-brand/25 focus:outline-none active:bg-brand/15"
 		onclick={ding}>DING DING DING</button
 	>
 	<p>{logged || "Press the button!"}</p>