feat(border): support decimal border widths and radii

modules/bracket/lib/src/bracket.dart

@@ -1261,7 +1261,7 @@ class _BracketsColumnPageState extends State<BracketsColumnPage> {
                 lineColor: widget.controller.lineColor ?? Colors.black,
                 borderColor: widget.controller.borderColor ?? Colors.black,
                 lineWidth: widget.controller.lineWidth ?? 2.0,
-                borderWidth: widget.controller.borderWidth?.toDouble() ?? 2.0,
+                borderWidth: widget.controller.borderWidth ?? 2.0,
                 connectorLength: widget.controller.connectorLength,
                 columnIndex: widget.columnIndex,
                 prevColumnIndex: layout.toColumnIndex,

modules/ensemble/assets/schema/ensemble_schema.json

@@ -2057,7 +2057,7 @@
                 "$ref": "#/$defs/type-color"
               },
               "dropdownBorderWidth": {
-                "type": "integer",
+                "type": "number",
                 "minimum": 0,
                 "description": "The thickness of the dropdown border"
               },
@@ -3598,12 +3598,19 @@
                   "description": "The fill color for this input fields. This property can be defined in the theme to apply to all Input widgets."
                 },
                 "borderRadius": {
-                  "type": "integer",
-                  "minimum": 0,
+                  "oneOf": [
+                    {
+                      "type": "string"
+                    },
+                    {
+                      "type": "number",
+                      "minimum": 0
+                    }
+                  ],
                   "description": "The border radius for this Input widget. This property can be defined in the theme to apply to all Input widgets."
                 },
                 "borderWidth": {
-                  "type": "integer",
+                  "type": "number",
                   "minimum": 0,
                   "description": "The border width for this Input widget. This property can be defined in the theme to apply to all Input widgets."
                 },
@@ -5573,7 +5580,7 @@
                   "$ref": "#/$defs/type-color"
                 },
                 "borderWidth": {
-                  "type": "integer"
+                  "type": "number"
                 },
                 "itemDisplay": {
                   "type": "string",
@@ -7324,12 +7331,12 @@
               "type": "string"
             },
             {
-              "title": "integer",
-              "type": "integer"
+              "title": "number",
+              "type": "number"
             }
           ],
           "minimum": 0,
-          "description": "Border Radius with CSS-like notation (1 to 4 integers)"
+          "description": "Border Radius with CSS-like notation (1 to 4 numbers)"
         }
       }
     },
@@ -7849,7 +7856,7 @@
               "description": "Border color, starting with '0xFF' for full opacity"
             },
             "borderWidth": {
-              "type": "integer",
+              "type": "number",
               "minimum": 0,
               "description": "The thickness of the border"
             }

modules/ensemble/assets/schema/theme_schema.json

@@ -199,12 +199,11 @@
           "description": "The fill color for applicable input fields (TextInput, Dropdown, ...)"
         },
         "borderRadius": {
-          "type": "integer",
-          "minimum": 0,
+          "$ref": "#/$defs/BorderRadius",
           "description": "The border radius for applicable Input widgets."
         },
         "borderWidth": {
-          "type": "integer",
+          "type": "number",
           "minimum": 0,
           "description": "The border width for applicable Input widgets."
         },
@@ -237,11 +236,10 @@
       "type": "object",
       "properties": {
         "borderRadius": {
-          "type": "integer",
-          "minimum": 0
+          "$ref": "#/$defs/BorderRadius"
         },
         "borderWidth": {
-          "type": "integer",
+          "type": "number",
           "minimum": 0,
           "description": "The border thickness of the button"
         },
@@ -275,7 +273,7 @@
           "description": "The border radius for this Input widget. This property can be defined in the theme to apply to all Input widgets."
         },
         "borderWidth": {
-          "type": "integer",
+          "type": "number",
           "description": "The border width for this Input widget. This property can be defined in the theme to apply to all Input widgets.",
           "minimum": 0
         },
@@ -414,11 +412,11 @@
           "type": "string"
         }
       ],
-      "description": "Border Radius with CSS-like notation (1 to 4 integers)",
+      "description": "Border Radius with CSS-like notation (1 to 4 numbers)",
       "uiType": "borderRadius"
     },
     "positiveInteger": {
-      "type": "integer",
+      "type": "number",
       "minimum": 0
     },
     "type-fontWeight": {

modules/ensemble/integration_test/local/themedApp/Widgets.yaml

@@ -10,13 +10,14 @@ View:
         - TextInput:
             value: updated style
             styles:
-              borderRadius: 10
-              borderWidth: 2
+              borderRadius: 10.5
+              borderWidth: 2.5
               borderColor: 0xFFCFA17B
               focusedBorderColor: 0xFF86BAA6
 
         - TextInput:
             value: box style
             styles:
               variant: box
-              borderRadius: 99
+              borderRadius: 99.5
+              borderWidth: 0.5

modules/ensemble/integration_test/local/themedApp/theme.ensemble

@@ -1,6 +1,7 @@
 Widgets:
   Input:
     # default variant is Underline
-    borderRadius: 5
+    borderRadius: 5.5
+    borderWidth: 1.5
     borderColor: 0xFF404040
     focusedBorderColor: 0xFF49DEFF

modules/ensemble/integration_test/local/themedApp_test.dart

@@ -27,10 +27,10 @@ void main() {
       expect(
           (originalText.decoration?.border as UnderlineInputBorder)
               .borderRadius,
-          BorderRadius.circular(5));
+          BorderRadius.circular(5.5));
       expect(originalText.decoration?.border?.borderSide.color,
           const Color(0xFF404040));
-      expect(originalText.decoration?.border?.borderSide.width, 1.0);
+      expect(originalText.decoration?.border?.borderSide.width, 1.5);
       expect(originalText.decoration?.focusedBorder?.borderSide.color,
           const Color(0xFF49DEFF));
 
@@ -48,8 +48,8 @@ void main() {
       expect(
           (updatedStyleText.decoration?.border as UnderlineInputBorder)
               .borderRadius,
-          BorderRadius.circular(10));
-      expect(updatedStyleText.decoration?.border?.borderSide.width, 2.0);
+          BorderRadius.circular(10.5));
+      expect(updatedStyleText.decoration?.border?.borderSide.width, 2.5);
       expect(updatedStyleText.decoration?.border?.borderSide.color,
           const Color(0xFFCFA17B));
       expect(updatedStyleText.decoration?.focusedBorder?.borderSide.color,
@@ -63,8 +63,8 @@ void main() {
       expect(boxStyleText.decoration?.border is OutlineInputBorder, true);
       expect(
           (boxStyleText.decoration?.border as OutlineInputBorder).borderRadius,
-          BorderRadius.circular(99));
-      expect(boxStyleText.decoration?.border?.borderSide.width, 1.0);
+          BorderRadius.circular(99.5));
+      expect(boxStyleText.decoration?.border?.borderSide.width, 0.5);
     });
   });
 }

modules/ensemble/lib/controller/controller_mixins.dart

@@ -16,15 +16,15 @@ mixin HasPassThrough on EnsembleWidgetController {
 mixin HasBorderController on EnsembleWidgetController {
   LinearGradient? borderGradient;
   Color? borderColor;
-  int? borderWidth;
+  double? borderWidth;
   EBorderRadius? borderRadius;
   BorderStyleComposite? borderStyle;
 
   Map<String, Function> hasBorderSetters() => {
         'borderGradient': (value) =>
             borderGradient = Utils.getBackgroundGradient(value),
         'borderColor': (value) => borderColor = Utils.getColor(value),
-        'borderWidth': (value) => borderWidth = Utils.optionalInt(value),
+        'borderWidth': (value) => borderWidth = Utils.optionalDouble(value),
         'borderRadius': (value) => borderRadius = Utils.getBorderRadius(value),
         'borderStyle': (value) =>
             borderStyle = BorderStyleComposite.from(this, value),

modules/ensemble/lib/framework/model.dart

@@ -97,37 +97,37 @@ class BackgroundImage {
 
 class EBorderRadius {
   EBorderRadius._(
-      int _topLeft, int _topRight, int _bottomRight, int _bottomLeft)
+      double _topLeft, double _topRight, double _bottomRight, double _bottomLeft)
       : topLeft =
-            _topLeft == 0 ? Radius.zero : Radius.circular(_topLeft.toDouble()),
+            _topLeft == 0 ? Radius.zero : Radius.circular(_topLeft),
         topRight = _topRight == 0
             ? Radius.zero
-            : Radius.circular(_topRight.toDouble()),
+            : Radius.circular(_topRight),
         bottomRight = _bottomRight == 0
             ? Radius.zero
-            : Radius.circular(_bottomRight.toDouble()),
+            : Radius.circular(_bottomRight),
         bottomLeft = _bottomLeft == 0
             ? Radius.zero
-            : Radius.circular(_bottomLeft.toDouble());
+            : Radius.circular(_bottomLeft);
 
   Radius topLeft, topRight, bottomRight, bottomLeft;
 
-  factory EBorderRadius.all(int val) {
+  factory EBorderRadius.all(double val) {
     return EBorderRadius._(val, val, val, val);
   }
   // first value: top-left & bottom-right
   // second value: top-right & bottom-left
-  factory EBorderRadius.two(int first, int second) {
+  factory EBorderRadius.two(double first, double second) {
     return EBorderRadius._(first, second, first, second);
   }
   // first value: top-left
   // second value: top-right & bottom-left
   // third value: bottom-right
-  factory EBorderRadius.three(int first, int second, int third) {
+  factory EBorderRadius.three(double first, double second, double third) {
     return EBorderRadius._(first, second, third, second);
   }
   factory EBorderRadius.only(
-      int topLeft, int topRight, int bottomRight, int bottomLeft) {
+      double topLeft, double topRight, double bottomRight, double bottomLeft) {
     return EBorderRadius._(topLeft, topRight, bottomRight, bottomLeft);
   }
 

modules/ensemble/lib/framework/theme/theme_loader.dart

@@ -11,7 +11,7 @@ import 'package:yaml/yaml.dart';
 mixin ThemeLoader {
   final EdgeInsets _buttonPadding =
   const EdgeInsets.only(left: 15, top: 5, right: 15, bottom: 5);
-  final int _buttonBorderRadius = 3;
+  final double _buttonBorderRadius = 3;
   final Color _buttonBorderOutlineColor = Colors.black12;
   bool hasLegacyCustomAppTheme(YamlMap? overrides) {
     return overrides?['App'] != null
@@ -286,7 +286,7 @@ mixin ThemeLoader {
     BorderRadius borderRadius =
         Utils.getBorderRadius(input['borderRadius'])?.getValue() ??
             getInputDefaultBorderRadius(variant);
-    int borderWidth = Utils.optionalInt(input['borderWidth']) ?? 1;
+    double borderWidth = Utils.optionalDouble(input['borderWidth']) ?? 1;
 
     Color? borderColor = Utils.getColor(input['borderColor']);
     Color? disabledBorderColor = Utils.getColor(input['disabledBorderColor']);
@@ -305,7 +305,7 @@ mixin ThemeLoader {
                   (colorScheme.brightness == Brightness.light
                       ? Colors.black54
                       : Colors.white70),
-              width: borderWidth.toDouble()));
+              width: borderWidth));
 
       return baseInputDecoration.copyWith(
         contentPadding: contentPadding ??
@@ -341,7 +341,7 @@ mixin ThemeLoader {
                   (colorScheme.brightness == Brightness.light
                       ? Colors.black87
                       : Colors.white70),
-              width: borderWidth.toDouble()));
+              width: borderWidth));
       return baseInputDecoration.copyWith(
         contentPadding: contentPadding ??
             const EdgeInsets.symmetric(vertical: 15, horizontal: 3),
@@ -386,15 +386,15 @@ mixin ThemeLoader {
     isOutline ? null : Utils.getColor(input['backgroundColor']);
 
     RoundedRectangleBorder border = RoundedRectangleBorder(
-        borderRadius: BorderRadius.circular(
-            Utils.getInt(input['borderRadius'], fallback: _buttonBorderRadius)
-                .toDouble()),
+        borderRadius: input['borderRadius'] == 0
+            ? BorderRadius.zero
+            : Utils.getBorderRadius(input['borderRadius'])?.getValue() ??
+                BorderRadius.circular(_buttonBorderRadius),
         side: borderColor == null
             ? BorderSide.none
             : BorderSide(
             color: borderColor,
-            width: Utils.getInt(input['borderWidth'], fallback: 1)
-                .toDouble()));
+            width: Utils.getDouble(input['borderWidth'], fallback: 1)));
 
     return getButtonStyle(
         isOutline: isOutline,
@@ -407,20 +407,20 @@ mixin ThemeLoader {
   InputBorder? getInputBorder(
       {InputVariant? variant,
         Color? borderColor,
-        required int borderWidth,
+        required double borderWidth,
         required BorderRadius borderRadius}) {
     if (borderColor != null) {
       if (variant == InputVariant.box) {
         return OutlineInputBorder(
             borderRadius: borderRadius,
             borderSide:
-            BorderSide(color: borderColor, width: borderWidth.toDouble()));
+            BorderSide(color: borderColor, width: borderWidth));
       }
       // default is underline
       return UnderlineInputBorder(
           borderRadius: borderRadius,
           borderSide:
-          BorderSide(color: borderColor, width: borderWidth.toDouble()));
+          BorderSide(color: borderColor, width: borderWidth));
     }
     return null;
   }
@@ -463,21 +463,21 @@ mixin ThemeLoader {
     Color? fillColor = Utils.getColor(input?["fillColor"]);
     Color? activeColor = Utils.getColor(input?["activeColor"]);
     Color? checkColor = Utils.getColor(input?["checkColor"]);
-    int borderWidth = Utils.optionalInt(input?['borderWidth'], min: 0) ?? 2;
+    double borderWidth = Utils.optionalDouble(input?['borderWidth'], min: 0) ?? 2;
 
     var checkboxTheme = CheckboxThemeData(
       side: WidgetStateBorderSide.resolveWith((states) {
         if (states.contains(WidgetState.disabled)) {
           return BorderSide(
-              width: borderWidth.toDouble(), color: DesignSystem.disableColor);
+              width: borderWidth, color: DesignSystem.disableColor);
         }
         if (states.contains(WidgetState.error)) {
           return BorderSide(
-              width: borderWidth.toDouble(),
+              width: borderWidth,
               color: DesignSystem.inputErrorColor);
         }
         if (!states.contains(WidgetState.selected)) {
-          return BorderSide(width: borderWidth.toDouble(), color: borderColor);
+          return BorderSide(width: borderWidth, color: borderColor);
         }
         // use default
         return null;

modules/ensemble/lib/framework/view/page.dart

@@ -972,12 +972,12 @@ class PageState extends State<Page>
       // show a divider between the NavigationRail and the content
       Color? borderColor =
           Utils.getColor(widget._pageModel.menu!.runtimeStyles?['borderColor']);
-      int? borderWidth = Utils.optionalInt(
+      double? borderWidth = Utils.optionalDouble(
           widget._pageModel.menu!.runtimeStyles?['borderWidth']);
       if (borderColor != null || borderWidth != null) {
         content.add(VerticalDivider(
-            thickness: (borderWidth ?? 1).toDouble(),
-            width: (borderWidth ?? 1).toDouble(),
+            thickness: borderWidth ?? 1,
+            width: borderWidth ?? 1,
             color: borderColor));
       }
 

modules/ensemble/lib/framework/view/page_group.dart

@@ -513,11 +513,12 @@ class PageGroupState extends State<PageGroup>
 
   Widget? _buildSidebarSeparator(Menu menu) {
     Color? borderColor = Utils.getColor(menu.runtimeStyles?['borderColor']);
-    int? borderWidth = Utils.optionalInt(menu.runtimeStyles?['borderWidth']);
+    double? borderWidth =
+        Utils.optionalDouble(menu.runtimeStyles?['borderWidth']);
     if (borderColor != null || borderWidth != null) {
       return VerticalDivider(
-          thickness: (borderWidth ?? 1).toDouble(),
-          width: (borderWidth ?? 1).toDouble(),
+          thickness: borderWidth ?? 1,
+          width: borderWidth ?? 1,
           color: borderColor);
     }
     return null;