fix: resizable when children change

.github/ISSUE_TEMPLATE/config.yml

@@ -1 +1 @@
-blank_issues_enabled: true
+blank_issues_enabled: false

.github/ISSUE_TEMPLATE/maintainers.yml

@@ -0,0 +1,4 @@
+name: "[MAINTAINERS ONLY] Blank template"
+description: Only Maintainers can use this blank template
+assignees:
+  - nank1ro

CHANGELOG.md

@@ -3,6 +3,9 @@
 - **FIX**: `ShadInput` `readOnly` not updating.
 - **BREAKING CHANGE**: Rename `ShadSelect` and form fields `controller` to `popoverController`.
 - **FEAT**: Add `controller` to `ShadSelect` and form fields, to control the selected values.
+- **FIX**: Improve the `ShadResizable` controller handling and simplify the logic to resize the panels.
+- **FIX**: `ShadResizable` handle position with `Axis.vertical`
+- **BREAKING CHANGE**: Now `ShadResizable` requires an `id`, to be able to handle when a panel is removed/added from the widget tree correctly.
 
 ## 0.18.7
 

docs/src/content/docs/Components/resizable.mdx

@@ -3,7 +3,8 @@ title: Resizable
 sidebar:
   order: 4
 ---
-import Preview from '../../../components/Preview.astro';
+
+import Preview from "../../../components/Preview.astro";
 
 Resizable panel groups and layouts.
 
@@ -30,6 +31,7 @@ class BasicResizable extends StatelessWidget {
           child: ShadResizablePanelGroup(
             children: [
               ShadResizablePanel(
+                id: 0,
                 defaultSize: .5,
                 minSize: .2,
                 maxSize: .8,
@@ -38,16 +40,19 @@ class BasicResizable extends StatelessWidget {
                 ),
               ),
               ShadResizablePanel(
+                id: 1,
                 defaultSize: .5,
                 child: ShadResizablePanelGroup(
                   axis: Axis.vertical,
                   children: [
                     ShadResizablePanel(
+                      id: 0,
                       defaultSize: .3,
                       child: Center(
                           child: Text('Two', style: theme.textTheme.large)),
                     ),
                     ShadResizablePanel(
+                      id: 1,
                       defaultSize: .7,
                       child: Align(
                           child: Text('Three', style: theme.textTheme.large)),
@@ -63,6 +68,7 @@ class BasicResizable extends StatelessWidget {
   }
 }
 ```
+
 </Preview>
 
 :::tip
@@ -97,13 +103,15 @@ class VerticalResizable extends StatelessWidget {
             axis: Axis.vertical,
             children: [
               ShadResizablePanel(
+                id: 0,
                 defaultSize: 0.3,
                 minSize: 0.1,
                 child: Center(
                   child: Text('Header', style: theme.textTheme.large),
                 ),
               ),
               ShadResizablePanel(
+                id: 1,
                 defaultSize: 0.7,
                 minSize: 0.1,
                 child: Center(
@@ -118,6 +126,7 @@ class VerticalResizable extends StatelessWidget {
   }
 }
 ```
+
 </Preview>
 
 ## Handle
@@ -150,13 +159,15 @@ class HandleResizable extends StatelessWidget {
             showHandle: true,
             children: [
               ShadResizablePanel(
+                id: 0,
                 defaultSize: .5,
                 minSize: .2,
                 child: Center(
                   child: Text('Sidebar', style: theme.textTheme.large),
                 ),
               ),
               ShadResizablePanel(
+                id: 1,
                 defaultSize: .5,
                 minSize: .2,
                 child: Center(
@@ -171,4 +182,5 @@ class HandleResizable extends StatelessWidget {
   }
 }
 ```
+
 </Preview>

example/lib/pages/resizable.dart

@@ -1,7 +1,6 @@
 import 'package:example/common/base_scaffold.dart';
-import 'package:flutter/cupertino.dart';
+import 'package:example/common/properties/bool_property.dart';
 import 'package:flutter/material.dart';
-import 'package:flutter/widgets.dart';
 import 'package:shadcn_ui/shadcn_ui.dart';
 
 class ResizablePage extends StatefulWidget {
@@ -12,11 +11,20 @@ class ResizablePage extends StatefulWidget {
 }
 
 class _ResizablePageState extends State<ResizablePage> {
+  var visible = true;
+
   @override
   Widget build(BuildContext context) {
     final theme = ShadTheme.of(context);
     return BaseScaffold(
       appBarTitle: 'Resizable',
+      editable: [
+        MyBoolProperty(
+          value: visible,
+          onChanged: (v) => setState(() => visible = v),
+          label: 'One Visible',
+        ),
+      ],
       children: [
         SizedBox(
           width: 300,
@@ -34,30 +42,51 @@ class _ResizablePageState extends State<ResizablePage> {
                 mainAxisSize: MainAxisSize.min,
                 showHandle: true,
                 children: [
-                  ShadResizablePanel(
-                    defaultSize: .5,
-                    minSize: 0.1,
-                    maxSize: 0.8,
-                    child: Center(
-                      child: Text('One', style: theme.textTheme.large),
+                  if (visible)
+                    ShadResizablePanel(
+                      id: 0,
+                      defaultSize: .5,
+                      minSize: 0.1,
+                      maxSize: 0.8,
+                      child: Container(
+                        color: Colors.red,
+                        alignment: Alignment.center,
+                        child: Text(
+                          'One',
+                          style: theme.textTheme.large,
+                        ),
+                      ),
                     ),
-                  ),
                   ShadResizablePanel(
                     defaultSize: 0.5,
+                    id: 1,
                     child: ShadResizablePanelGroup(
                       axis: Axis.vertical,
                       showHandle: true,
                       children: [
                         ShadResizablePanel(
+                          id: 0,
                           defaultSize: 0.4,
-                          child: Center(
-                              child: Text('Two', style: theme.textTheme.large)),
+                          child: Container(
+                            color: Colors.blue,
+                            alignment: Alignment.center,
+                            child: Text(
+                              'Two',
+                              style: theme.textTheme.large,
+                            ),
+                          ),
                         ),
                         ShadResizablePanel(
+                          id: 1,
                           defaultSize: 0.6,
-                          child: Align(
-                              child:
-                                  Text('Three', style: theme.textTheme.large)),
+                          child: Container(
+                            color: Colors.green,
+                            alignment: Alignment.center,
+                            child: Text(
+                              'Three',
+                              style: theme.textTheme.large,
+                            ),
+                          ),
                         ),
                       ],
                     ),

lib/shadcn_ui.dart

@@ -104,6 +104,7 @@ export 'src/utils/extensions/breakpoints.dart';
 export 'src/utils/extensions/date_time.dart';
 export 'src/utils/extensions/duration.dart';
 export 'src/utils/extensions/order_policy.dart';
+export 'src/utils/extensions/double.dart';
 export 'src/utils/gesture_detector.dart';
 export 'src/utils/mouse_area.dart';
 export 'src/utils/position.dart';