@djcali570/component-lib 0.1.3 → 0.1.5

package/README.md

@@ -230,6 +230,8 @@ onUpdate={(v) => dialogUpdated(v)}
 
 
 # Updates
+#### 0.1.5	- Fixed issue where Accordion did not handle dynamic content.
+#### 0.1.4	- Updated Accordion component to add innerPadding prop.
 #### 0.1.3	- Updated Time Picker to allow binding to timeText.
 #### 0.1.2	- Fixed some minor styling issues with Dialog component.
 #### 0.1.1	- Added Bottom Sheet component & Dialog component.

package/dist/Accordion5.svelte

@@ -8,13 +8,15 @@
 		title,
 		panel,
 		iconWidth = '1.2rem',
-		iconHeight = '1.2rem'
+		iconHeight = '1.2rem',
+		innerPadding = '0.5rem'
 	}: {
 		colorScheme?: Partial<Accordion5ColorScheme>;
 		title?: Snippet;
 		panel: Snippet;
 		iconWidth?: string;
 		iconHeight?: string;
+		innerPadding?: string;
 	} = $props();
 
 	// Default colorScheme
@@ -32,22 +34,53 @@
 	let panelHeight = $state('0px'); // Store dynamic height
 	let panelRef: HTMLDivElement | undefined = $state(); // Reference to inner panel
 
-	// Toggle panel and update height
-	function showPanel() {
-		status = !status;
+	// Debounce utility to limit frequent updates
+	function debounce<T extends (...args: any[]) => void>(fn: T, delay: number) {
+		let timeout: ReturnType<typeof setTimeout>;
+		return (...args: Parameters<T>) => {
+			clearTimeout(timeout);
+			timeout = setTimeout(() => fn(...args), delay);
+		};
+	}
+
+	// Update panel height
+	const updateHeight = () => {
 		if (status && panelRef) {
-			// Set max-height to content height when opening
 			panelHeight = `${panelRef.scrollHeight}px`;
 		} else {
-			// Reset to 0 when closing
 			panelHeight = '0px';
 		}
+	};
+
+	// Debounced height update
+	const debouncedUpdateHeight = debounce(updateHeight, 100);
+
+	// Toggle panel and update height
+	function showPanel() {
+		status = !status;
+		requestAnimationFrame(updateHeight); // Update height after status change
 	}
 
-	// Update height on content change (if panel content is dynamic)
+	// Observe panel content size changes
+	$effect(() => {
+		if (!panelRef) return;
+
+		const observer = new ResizeObserver(() => {
+			debouncedUpdateHeight();
+		});
+
+		observer.observe(panelRef);
+
+		// Cleanup observer on component destroy
+		return () => {
+			observer.disconnect();
+		};
+	});
+
+	// Update height when status changes
 	$effect(() => {
 		if (status && panelRef) {
-			panelHeight = `${panelRef.scrollHeight}px`;
+			debouncedUpdateHeight();
 		}
 	});
 </script>
@@ -58,9 +91,10 @@
       --acc5-bgColor: {colorScheme.bgColor};
       --acc5-textColor: {colorScheme.textColor};
       --acc5-triggerColor: {colorScheme.triggerColor};
-	  --acc5-panelBgColor: {colorScheme.panelBgColor};
-	  --acc5-IconWidth: {iconWidth};
-	  --acc5-IconHeight: {iconHeight};
+      --acc5-panelBgColor: {colorScheme.panelBgColor};
+      --acc5-IconWidth: {iconWidth};
+      --acc5-IconHeight: {iconHeight};
+      --acc5-InnerPadding: {innerPadding}
     "
 >
 	<button onclick={showPanel}>
@@ -95,7 +129,6 @@
 <style>
 	.accordion5 {
 		width: 100%;
-		max-width: 600px;
 		margin: 0 auto;
 		border-radius: 0.5rem;
 		overflow: hidden;
@@ -103,7 +136,7 @@
 
 	button {
 		width: 100%;
-		padding-block: 0.5rem;
+		padding: var(--acc5-InnerPadding);
 		font-size: 1rem;
 		cursor: pointer;
 		border: none;
@@ -146,11 +179,12 @@
 		background-color: var(--acc5-panelBgColor);
 		transition: max-height 400ms ease-in-out;
 	}
+
 	.panel-head-icon.open {
 		transform: rotate(180deg);
 	}
 
 	.accPanel-inner {
-		padding-block: 0.5rem; /* Add padding to ensure content is visible */
+		padding-block: 0.5rem;
 	}
 </style>

package/dist/Accordion5.svelte.d.ts

@@ -6,6 +6,7 @@ type $$ComponentProps = {
     panel: Snippet;
     iconWidth?: string;
     iconHeight?: string;
+    innerPadding?: string;
 };
 declare const Accordion5: import("svelte").Component<$$ComponentProps, {}, "">;
 type Accordion5 = ReturnType<typeof Accordion5>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djcali570/component-lib",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "files": [
     "dist",
     "!dist/**/*.test.*",