@@ -49,9 +49,10 @@ export class PidCollapsible {
4949 @Element ( ) el : HTMLElement ;
5050
5151 /**
52- * Whether the collapsible is open by default
52+ * Whether the collapsible is open
53+ * @description Controls whether the component is expanded (opened) or collapsed
5354 */
54- @Prop ( ) open : boolean = false ;
55+ @Prop ( { mutable : true } ) open : boolean = false ;
5556
5657 /**
5758 * Whether to emphasize the component with border and shadow
@@ -65,11 +66,6 @@ export class PidCollapsible {
6566 */
6667 @Prop ( ) darkMode : 'light' | 'dark' | 'system' = 'system' ;
6768
68- /**
69- * Whether the component is in expanded mode (full size)
70- */
71- @Prop ( { mutable : true } ) expanded : boolean = false ;
72-
7369 /**
7470 * Initial width when expanded
7571 */
@@ -136,24 +132,10 @@ export class PidCollapsible {
136132 */
137133 @Watch ( 'open' )
138134 watchOpen ( ) {
139- this . expanded = this . open ;
140135 this . updateAppearance ( ) ;
141- }
142136
143- /**
144- * Watch for changes in the expanded property
145- */
146- @Watch ( 'expanded' )
147- watchExpanded ( ) {
148- this . updateAppearance ( ) ;
149-
150- // When expanded, ensure content dimensions are properly calculated
151- if ( this . expanded ) {
152- // Use setTimeout to ensure DOM is updated before recalculating
153- setTimeout ( ( ) => {
154- this . recalculateContentDimensions ( ) ;
155- } , 0 ) ;
156- }
137+ // When open, ensure content dimensions are properly calculated
138+ if ( this . open ) this . recalculateContentDimensions ( ) ;
157139 }
158140
159141 /**
@@ -165,8 +147,6 @@ export class PidCollapsible {
165147 }
166148
167149 componentWillLoad ( ) {
168- // Initialize state from props
169- this . expanded = this . open ;
170150 // Default to 75% width if no initial width is provided
171151 this . currentWidth = this . initialWidth || '75%' ; // Changed from DEFAULT_WIDTH to use 75% (w-3/4)
172152 this . currentHeight = this . initialHeight || CONSTANTS . DEFAULT_HEIGHT ;
@@ -181,6 +161,18 @@ export class PidCollapsible {
181161 this . addBrowserCompatibilityListeners ( ) ;
182162 this . addComponentEventListeners ( ) ;
183163
164+ // // When component is initially open, ensure dimensions are properly calculated after rendering
165+ // if (this.open) {
166+ // // // Make sure expanded state is set correctly for open components
167+ // // this.open = true;
168+ //
169+ // // Use a small delay to ensure the DOM is fully rendered
170+ // setTimeout(() => {
171+ // // Force recalculation of dimensions for open components
172+ // this.recalculateContentDimensions();
173+ // }, 100);
174+ // }
175+
184176 // Add clearfix for Safari - prevent text flow issues
185177 if ( / ^ ( (? ! c h r o m e | a n d r o i d ) .) * s a f a r i / i. test ( navigator . userAgent ) ) {
186178 this . el . style . display = 'inline-block' ;
@@ -293,7 +285,7 @@ export class PidCollapsible {
293285 */
294286 @Method ( )
295287 public async recalculateContentDimensions ( ) {
296- if ( this . expanded ) {
288+ if ( this . open ) {
297289 // Add a class to optimize rendering during recalculation
298290 this . el . classList . add ( 'resizing' ) ;
299291
@@ -382,7 +374,7 @@ export class PidCollapsible {
382374 // Create new observer with debouncing for better performance
383375 this . resizeObserver = new ResizeObserver ( entries => {
384376 // Only track dimensions when expanded
385- if ( ! this . expanded ) return ;
377+ if ( ! this . open ) return ;
386378
387379 // Get the entry from the first parameter
388380 const entry = entries [ 0 ] ;
@@ -414,7 +406,7 @@ export class PidCollapsible {
414406 } ) ;
415407
416408 // Start observing if expanded
417- if ( this . expanded ) {
409+ if ( this . open ) {
418410 this . resizeObserver . observe ( this . el ) ;
419411 }
420412 }
@@ -519,7 +511,7 @@ export class PidCollapsible {
519511 // Reset all classes and styles before applying new ones
520512 this . resetStyles ( ) ;
521513
522- if ( this . expanded ) {
514+ if ( this . open ) {
523515 this . applyExpandedStyles ( ) ;
524516 } else {
525517 this . applyCollapsedStyles ( ) ;
@@ -751,20 +743,25 @@ export class PidCollapsible {
751743 }
752744
753745 // Toggle expanded state
754- this . expanded = ! this . expanded ;
755- details . open = this . expanded ;
746+ this . open = ! this . open ;
747+ details . open = this . open ;
756748
757749 // Emit event
758- this . collapsibleToggle . emit ( this . expanded ) ;
750+ this . collapsibleToggle . emit ( this . open ) ;
759751
760752 // Update appearance
761753 this . updateAppearance ( ) ;
762754
755+ // For Safari compatibility - ensure content recalculation when expanding
756+ if ( this . open && this . isSafari ( ) ) {
757+ setTimeout ( ( ) => {
758+ this . recalculateContentDimensions ( ) ;
759+ } , 50 ) ;
760+ }
761+
763762 // Ensure consistent state and reset flag
764763 setTimeout ( ( ) => {
765- if ( details . open !== this . expanded ) {
766- details . open = this . expanded ;
767- }
764+ details . open = this . open ;
768765 setTimeout ( ( ) => {
769766 this . isToggling = false ;
770767 } , 100 ) ;
@@ -793,7 +790,7 @@ export class PidCollapsible {
793790 }
794791
795792 // Add state-specific classes
796- if ( this . expanded ) {
793+ if ( this . open ) {
797794 baseClasses . push ( 'mb-2' , 'max-w-full' , 'text-xs' , 'block' ) ;
798795 } else {
799796 baseClasses . push ( 'my-0' , 'text-sm' , 'float-left' ) ;
@@ -813,7 +810,7 @@ export class PidCollapsible {
813810 private getDetailsClasses ( ) {
814811 const baseClasses = [ 'group' , 'w-full' , 'font-sans' , 'transition-all' , 'duration-200' , 'ease-in-out' , 'flex' , 'flex-col' ] ;
815812
816- if ( this . expanded ) {
813+ if ( this . open ) {
817814 baseClasses . push ( 'h-full' , 'overflow-visible' ) ;
818815 } else {
819816 baseClasses . push ( 'text-clip' , 'overflow-hidden' ) ;
@@ -849,7 +846,7 @@ export class PidCollapsible {
849846 'box-border' ,
850847 ] ;
851848
852- if ( this . expanded ) {
849+ if ( this . open ) {
853850 if ( this . isDarkMode ) {
854851 baseClasses . push ( 'sticky' , 'top-0' , 'bg-gray-800' , `z-${ Z_INDICES . STICKY_ELEMENTS } , 'border-b' , 'border-gray-700' , 'px-2' , 'py-0' , 'overflow-visible' , 'backdrop-blur-sm' ) ;
855852 } else {
@@ -871,7 +868,7 @@ export class PidCollapsible {
871868 private getContentClasses ( ) {
872869 const baseClasses = [ 'flex-grow' , 'flex' , 'flex-col' , 'min-h-0' ] ;
873870
874- if ( this . expanded ) {
871+ if ( this . open ) {
875872 baseClasses . push ( 'overflow-auto' , 'p-2' ) ;
876873 } else {
877874 baseClasses . push ( 'overflow-hidden' , 'p-0' ) ;
@@ -944,7 +941,7 @@ export class PidCollapsible {
944941 e . stopImmediatePropagation ( ) ;
945942 } }
946943 >
947- < span class = { `inline-flex h-full items-center gap-1 pr-2 ${ this . expanded ? 'flex-nowrap whitespace-nowrap' : 'min-w-0 flex-nowrap overflow-hidden' } } >
944+ < span class = { `inline-flex h-full items-center gap-1 pr-2 ${ this . open ? 'flex-nowrap whitespace-nowrap' : 'min-w-0 flex-nowrap overflow-hidden' } } >
948945 { this . emphasize && (
949946 < span class = "flex h-full flex-shrink-0 items-center" >
950947 < svg
@@ -963,7 +960,7 @@ export class PidCollapsible {
963960 </ svg >
964961 </ span >
965962 ) }
966- < span class = { `${ this . expanded ? 'overflow-visible' : 'min-w-0 truncate' } } >
963+ < span class = { `${ this . open ? 'overflow-visible' : 'min-w-0 truncate' } } >
967964 < slot name = "summary" > </ slot >
968965 </ span >
969966 </ span >
@@ -976,7 +973,7 @@ export class PidCollapsible {
976973 < slot > </ slot >
977974 </ div >
978975
979- { this . showFooter && this . expanded && (
976+ { this . showFooter && this . open && (
980977 < div class = { footerClasses } >
981978 { /* Main footer slot for pagination */ }
982979 < div class = { `z-50 overflow-visible border-b ${ this . isDarkMode ? 'border-gray-700 bg-gray-800' : 'border-gray-100 bg-white' } } >
0 commit comments