Feat/resizable (#56)

nank1ro · Apr 26, 2024 · 8de5f0a · 8de5f0a
1 parent c9ef0dd
commit 8de5f0a
Show file tree

Hide file tree

Showing 17 changed files with 1,102 additions and 5 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,11 @@
+## 0.4.1
+
+- Expose `ShadResizableTheme`.
+
+## 0.4.0
+
+- Add `ShadResizable` component
+
 ## 0.3.3
 
 - Improve pub dev score

diff --git a/README.md b/README.md
@@ -41,7 +41,7 @@ See the [documentation](https://mariuti.com/shadcn-ui/) to interact with the com
 - [x] [Popover](https://mariuti.com/shadcn-ui/components/popover/)
 - [x] [Progress](https://mariuti.com/shadcn-ui/components/progress/)
 - [x] [RadioGroup](https://mariuti.com/shadcn-ui/components/radio-group/)
-- [ ] Resizable
+- [x] [Resizable](https://mariuti.com/shadcn-ui/components/resizable/)
 - [x] <strike>Scroll Area</strike> Use SingleScrollView, ListView etc. instead
 - [x] [Select](https://mariuti.com/shadcn-ui/components/select/)
 - [x] <strike>Separator</strike> Use Divider instead

diff --git a/example/lib/common/properties/string_property.dart b/example/lib/common/properties/string_property.dart
@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
 import 'package:shadcn_ui/shadcn_ui.dart';
 
 class MyStringProperty extends StatelessWidget {
@@ -8,12 +9,14 @@ class MyStringProperty extends StatelessWidget {
     required this.initialValue,
     required this.onChanged,
     this.placeholder,
+    this.inputFormatters,
   });
 
   final String label;
   final Widget? placeholder;
   final String? initialValue;
   final ValueChanged<String>? onChanged;
+  final List<TextInputFormatter>? inputFormatters;
 
   @override
   Widget build(BuildContext context) {
@@ -28,6 +31,7 @@ class MyStringProperty extends StatelessWidget {
           initialValue: initialValue,
           onChanged: onChanged,
           placeholder: placeholder,
+          inputFormatters: inputFormatters,
         )
       ],
     );

diff --git a/example/lib/main.dart b/example/lib/main.dart
@@ -15,6 +15,7 @@ import 'package:example/pages/popover.dart';
 import 'package:example/pages/progress.dart';
 import 'package:example/pages/radio_group.dart';
 import 'package:example/pages/radio_group_form_field.dart';
+import 'package:example/pages/resizable.dart';
 import 'package:example/pages/select.dart';
 import 'package:example/pages/select_form_field.dart';
 import 'package:example/pages/sheet.dart';
@@ -62,6 +63,7 @@ final routes = <String, WidgetBuilder>{
   '/toast': (_) => const ToastPage(),
   '/tooltip': (_) => const TooltipPage(),
   '/typography': (_) => const TypographyPage(),
+  '/resizable': (_) => const ResizablePage(),
 };
 final routeToNameRegex = RegExp('(?:^/|-)([a-z])');
 

diff --git a/example/lib/pages/resizable.dart b/example/lib/pages/resizable.dart
@@ -0,0 +1,68 @@
+import 'package:example/common/base_scaffold.dart';
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/widgets.dart';
+import 'package:shadcn_ui/shadcn_ui.dart';
+
+class ResizablePage extends StatefulWidget {
+  const ResizablePage({super.key});
+
+  @override
+  State<ResizablePage> createState() => _ResizablePageState();
+}
+
+class _ResizablePageState extends State<ResizablePage> {
+  @override
+  Widget build(BuildContext context) {
+    final theme = ShadTheme.of(context);
+    return BaseScaffold(
+      appBarTitle: 'Resizable',
+      children: [
+        ShadDecorator(
+          decoration: ShadDecoration(
+            border: ShadBorder(
+              width: 1,
+              color: theme.colorScheme.border,
+              radius: theme.radius,
+            ),
+          ),
+          child: ClipRRect(
+            borderRadius: theme.radius,
+            child: ShadResizablePanelGroup(
+              mainAxisSize: MainAxisSize.min,
+              height: 200,
+              children: [
+                ShadResizablePanel(
+                  defaultSize: 200,
+                  minSize: 50,
+                  maxSize: 300,
+                  child: Center(
+                    child: Text('One', style: theme.textTheme.large),
+                  ),
+                ),
+                ShadResizablePanel(
+                  defaultSize: 200,
+                  child: ShadResizablePanelGroup(
+                    axis: Axis.vertical,
+                    children: [
+                      ShadResizablePanel(
+                        defaultSize: 50,
+                        child: Center(
+                            child: Text('Two', style: theme.textTheme.large)),
+                      ),
+                      ShadResizablePanel(
+                        defaultSize: 150,
+                        child: Align(
+                            child: Text('Three', style: theme.textTheme.large)),
+                      ),
+                    ],
+                  ),
+                ),
+              ],
+            ),
+          ),
+        ),
+      ],
+    );
+  }
+}
diff --git a/lib/shadcn_ui.dart b/lib/shadcn_ui.dart
@@ -31,6 +31,7 @@ export 'src/components/switch.dart';
 export 'src/components/table.dart';
 export 'src/components/toast.dart';
 export 'src/components/tooltip.dart';
+export 'src/components/resizable.dart';
 
 // Raw Components
 export 'src/raw_components/portal.dart';
@@ -79,13 +80,15 @@ export 'src/theme/components/toast.dart';
 export 'src/theme/components/tooltip.dart';
 export 'src/theme/text_theme/text_styles_default.dart';
 export 'src/theme/text_theme/theme.dart';
+export 'src/theme/components/resizable.dart';
 
 // Utils
 export 'src/utils/position.dart';
 export 'src/utils/responsive.dart';
 export 'src/utils/states_controller.dart';
 export 'src/utils/animation_builder.dart';
 export 'src/utils/extensions.dart';
+export 'src/utils/provider.dart' hide ProviderReadExt, ProviderWatchExt;
 
 // External libraries
 export 'package:flutter_animate/flutter_animate.dart';

diff --git a/lib/src/app.dart b/lib/src/app.dart
@@ -11,6 +11,7 @@ import 'package:shadcn_ui/src/components/toast.dart';
 import 'package:shadcn_ui/src/theme/color_scheme/slate.dart';
 import 'package:shadcn_ui/src/theme/data.dart';
 import 'package:shadcn_ui/src/theme/theme.dart';
+import 'package:shadcn_ui/src/utils/mouse_cursor_provider.dart';
 
 enum ShadAppType {
   shadcn,
@@ -585,7 +586,9 @@ class _ShadAppState extends State<ShadApp> {
         child: ShadAnimatedTheme(
           data: theme(context),
           curve: widget.themeCurve,
-          child: _buildApp(context),
+          child: ShadMouseCursorProvider(
+            child: _buildApp(context),
+          ),
         ),
       ),
     );