@djcali570/component-lib 0.1.4 → 0.1.5

package/README.md

@@ -230,6 +230,7 @@ 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.

package/dist/Accordion5.svelte

@@ -6,17 +6,17 @@
 	let {
 		colorScheme: partialColorScheme = {},
 		title,
-		panel,		
+		panel,
 		iconWidth = '1.2rem',
 		iconHeight = '1.2rem',
-		innerPadding = '0.5rem'		
+		innerPadding = '0.5rem'
 	}: {
 		colorScheme?: Partial<Accordion5ColorScheme>;
 		title?: Snippet;
-		panel: Snippet;		
+		panel: Snippet;
 		iconWidth?: string;
 		iconHeight?: string;
-		innerPadding?: string;		
+		innerPadding?: string;
 	} = $props();
 
 	// Default colorScheme
@@ -34,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>
@@ -60,10 +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-InnerPadding: {innerPadding}
+      --acc5-panelBgColor: {colorScheme.panelBgColor};
+      --acc5-IconWidth: {iconWidth};
+      --acc5-IconHeight: {iconHeight};
+      --acc5-InnerPadding: {innerPadding}
     "
 >
 	<button onclick={showPanel}>
@@ -97,14 +128,14 @@
 
 <style>
 	.accordion5 {
-		width: 100%;		
+		width: 100%;
 		margin: 0 auto;
 		border-radius: 0.5rem;
 		overflow: hidden;
 	}
 
 	button {
-		width: 100%;		
+		width: 100%;
 		padding: var(--acc5-InnerPadding);
 		font-size: 1rem;
 		cursor: pointer;
@@ -148,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/package.json

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