Split mvu and component (#255)

* Split MVU and Component view

Directory.Packages.props

@@ -3,7 +3,7 @@
     <ManagePackageVersionsCentrally>true</ManagePackageVersionsCentrally>
   </PropertyGroup>
   <ItemGroup>
-    <PackageVersion Include="Fabulous" Version="3.0.0-pre5" />
+    <PackageVersion Include="Fabulous" Version="3.0.0-pre9" />
     <PackageVersion Include="FsCheck.NUnit" Version="2.16.4" />
     <PackageVersion Include="FSharp.Core" Version="8.0.301" />
     <PackageVersion Include="Microsoft.NET.Test.Sdk" Version="17.2.0" />

extensions/Fabulous.Avalonia.ColorPicker/ColorPicker.Components.fs

@@ -0,0 +1,14 @@
+namespace Fabulous.Avalonia
+
+open Avalonia.Media
+open Fabulous
+open Fabulous.Avalonia
+
+[<AutoOpen>]
+module ComponentColorPickerBuilders =
+    type Fabulous.Avalonia.View with
+        /// <summary>Creates a ColorPicker widget.</summary>
+        /// <param name="color">The Color value.</param>
+        /// <param name="fn">Raised when the color changes.</param>
+        static member ColorPicker(color: Color, fn: Color -> unit) =
+            WidgetBuilder<'msg, IFabColorPicker>(ColorPicker.WidgetKey, ComponentColorView.ColorChanged.WithValue(ComponentValueEventData.create color fn))

extensions/Fabulous.Avalonia.ColorPicker/ColorPicker.Mvu.fs

@@ -0,0 +1,15 @@
+namespace Fabulous.Avalonia
+
+open Avalonia.Media
+open Fabulous
+open Fabulous.Avalonia
+
+
+[<AutoOpen>]
+module MvuColorPickerBuilders =
+    type Fabulous.Avalonia.View with
+        /// <summary>Creates a ColorPicker widget.</summary>
+        /// <param name="color">The Color value.</param>
+        /// <param name="fn">Raised when the color changes.</param>
+        static member ColorPicker(color: Color, fn: Color -> 'msg) =
+            WidgetBuilder<'msg, IFabColorPicker>(ColorPicker.WidgetKey, MvuColorView.ColorChanged.WithValue(ValueEventData.create color fn))

extensions/Fabulous.Avalonia.ColorPicker/ColorPicker.fs

@@ -23,15 +23,9 @@ module ColorPickerBuilders =
 
         /// <summary>Creates a ColorPicker widget.</summary>
         /// <param name="color">The Color value.</param>
-        static member ColorPicker<'msg>(color: Color) =
+        static member ColorPicker(color: Color) =
             WidgetBuilder<'msg, IFabColorPicker>(ColorPicker.WidgetKey, AttributesBundle(StackList.one(ColorView.Color.WithValue(color)), ValueNone, ValueNone))
 
-        /// <summary>Creates a ColorPicker widget.</summary>
-        /// <param name="color">The Color value.</param>
-        /// <param name="fn">Raised when the color changes.</param>
-        static member ColorPicker(color: Color, fn: Color -> 'msg) =
-            WidgetBuilder<'msg, IFabColorPicker>(ColorPicker.WidgetKey, ColorView.ColorChanged.WithValue(ValueEventData.create color fn))
-
 type ColorPickerModifiers =
     /// <summary>Link a ViewRef to access the direct ColorPicker control instance</summary>
     /// <param name="this">Current widget</param>

extensions/Fabulous.Avalonia.ColorPicker/ColorPreviewer.Components.fs

@@ -0,0 +1,19 @@
+namespace Fabulous.Avalonia
+
+open Avalonia.Controls
+open Avalonia.Controls.Primitives
+open Fabulous
+open Fabulous.Avalonia
+
+module ComponentColorPreviewer =
+    let ColorChanged =
+        Attributes.defineEventNoDispatch "ColorPreviewer_ColorChanged" (fun target -> (target :?> ColorPreviewer).ColorChanged)
+
+[<AutoOpen>]
+module ComponentColorPreviewerBuilders =
+    type Fabulous.Avalonia.View with
+
+        /// <summary>Creates a ColorPreviewer widget.</summary>
+        /// <param name="fn">Raised when the color changes.</param>
+        static member ColorPreviewer(fn: ColorChangedEventArgs -> unit) =
+            WidgetBuilder<'msg, IFabColorPreviewer>(ColorPreviewer.WidgetKey, ComponentColorPreviewer.ColorChanged.WithValue(fn))

extensions/Fabulous.Avalonia.ColorPicker/ColorPreviewer.Mvu.fs

@@ -0,0 +1,18 @@
+namespace Fabulous.Avalonia
+
+open Avalonia.Controls
+open Avalonia.Controls.Primitives
+open Fabulous
+open Fabulous.Avalonia
+
+module MvuColorPreviewer =
+    let ColorChanged =
+        Attributes.defineEvent "ColorPreviewer_ColorChanged" (fun target -> (target :?> ColorPreviewer).ColorChanged)
+
+[<AutoOpen>]
+module MvuColorPreviewerBuilders =
+    type Fabulous.Avalonia.View with
+        /// <summary>Creates a ColorPreviewer widget.</summary>
+        /// <param name="fn">Raised when the color changes.</param>
+        static member ColorPreviewer(fn: ColorChangedEventArgs -> 'msg) =
+            WidgetBuilder<'msg, IFabColorPreviewer>(ColorPreviewer.WidgetKey, MvuColorPreviewer.ColorChanged.WithValue(fn))

extensions/Fabulous.Avalonia.ColorPicker/ColorPreviewer.fs

@@ -1,7 +1,6 @@
 namespace Fabulous.Avalonia
 
 open System.Runtime.CompilerServices
-open Avalonia.Controls
 open Avalonia.Controls.Primitives
 open Avalonia.Media
 open Fabulous
@@ -20,9 +19,6 @@ module ColorPreviewer =
     let IsAccentColorsVisible =
         Attributes.defineAvaloniaPropertyWithEquality ColorPreviewer.IsAccentColorsVisibleProperty
 
-    let ColorChanged =
-        Attributes.defineEvent "ColorPreviewer_ColorChanged" (fun target -> (target :?> ColorPreviewer).ColorChanged)
-
 [<AutoOpen>]
 module ColorPreviewerBuilders =
     type Fabulous.Avalonia.View with
@@ -31,10 +27,6 @@ module ColorPreviewerBuilders =
         static member ColorPreviewer() =
             WidgetBuilder<'msg, IFabColorPreviewer>(ColorPreviewer.WidgetKey, AttributesBundle(StackList.empty(), ValueNone, ValueNone))
 
-        /// <summary>Creates a ColorPreviewer widget.</summary>
-        /// <param name="fn">Raised when the color changes.</param>
-        static member ColorPreviewer(fn: ColorChangedEventArgs -> 'msg) =
-            WidgetBuilder<'msg, IFabColorPreviewer>(ColorPreviewer.WidgetKey, ColorPreviewer.ColorChanged.WithValue(fn))
 
 type ColorPreviewerModifiers =
     /// <summary>Link a ViewRef to access the direct ColorSlider control instance</summary>
@@ -48,12 +40,12 @@ type ColorPreviewerModifiers =
     /// <param name="this">Current widget.</param>
     /// <param name="value">The HsvColor value.</param>
     [<Extension>]
-    static member inline hsvColor(this: WidgetBuilder<'msg, IFabColorPreviewer>, value: HsvColor) =
+    static member inline hsvColor(this: WidgetBuilder<'msg, #IFabColorPreviewer>, value: HsvColor) =
         this.AddScalar(ColorPreviewer.HsvColor.WithValue(value))
 
     /// <summary>Set the IsAccentColorsVisible property.</summary>
     /// <param name="this">Current widget.</param>
     /// <param name="value">The IsAccentColorsVisible value.</param>
     [<Extension>]
-    static member inline isAccentColorsVisible(this: WidgetBuilder<'msg, IFabColorPreviewer>, value: bool) =
+    static member inline isAccentColorsVisible(this: WidgetBuilder<'msg, #IFabColorPreviewer>, value: bool) =
         this.AddScalar(ColorPreviewer.IsAccentColorsVisible.WithValue(value))

extensions/Fabulous.Avalonia.ColorPicker/ColorSlider.Components.fs

@@ -0,0 +1,19 @@
+namespace Fabulous.Avalonia
+
+open Avalonia.Controls.Primitives
+open Avalonia.Media
+open Fabulous
+open Fabulous.Avalonia
+
+module ComponentColorSlider =
+    let ColorChanged =
+        Attributes.defineAvaloniaPropertyWithChangedEventNoDispatch' "ColorSlider_ColorChanged" ColorSlider.ColorProperty
+
+[<AutoOpen>]
+module ComponentColorSliderBuilders =
+    type Fabulous.Avalonia.View with
+        /// <summary>Creates a ColorSlider widget.</summary>
+        /// <param name="color">The Color value.</param>
+        /// <param name="fn">Raised when the color changes.</param>
+        static member ColorSlider(color: Color, fn: Color -> unit) =
+            WidgetBuilder<'msg, IFabColorSlider>(ColorSlider.WidgetKey, ComponentColorSlider.ColorChanged.WithValue(ComponentValueEventData.create color fn))

extensions/Fabulous.Avalonia.ColorPicker/ColorSlider.Mvu.fs

@@ -0,0 +1,20 @@
+namespace Fabulous.Avalonia
+
+open Avalonia.Controls.Primitives
+open Avalonia.Media
+open Fabulous
+open Fabulous.Avalonia
+open Fabulous.StackAllocatedCollections.StackList
+
+module MvuColorSlider =
+    let ColorChanged =
+        Attributes.defineAvaloniaPropertyWithChangedEvent' "ColorSlider_ColorChanged" ColorSlider.ColorProperty
+
+[<AutoOpen>]
+module MvuColorSliderBuilders =
+    type Fabulous.Avalonia.View with
+        /// <summary>Creates a ColorSlider widget.</summary>
+        /// <param name="color">The Color value.</param>
+        /// <param name="fn">Raised when the color changes.</param>
+        static member ColorSlider(color: Color, fn: Color -> 'msg) =
+            WidgetBuilder<'msg, IFabColorSlider>(ColorSlider.WidgetKey, MvuColorSlider.ColorChanged.WithValue(ValueEventData.create color fn))

extensions/Fabulous.Avalonia.ColorPicker/ColorSlider.fs

@@ -34,9 +34,6 @@ module ColorSlider =
     let IsRoundingEnabled =
         Attributes.defineAvaloniaPropertyWithEquality ColorSlider.IsRoundingEnabledProperty
 
-    let ColorChanged =
-        Attributes.defineAvaloniaPropertyWithChangedEvent' "ColorSlider_ColorChanged" ColorSlider.ColorProperty
-
 [<AutoOpen>]
 module ColorSliderBuilders =
     type Fabulous.Avalonia.View with
@@ -53,12 +50,6 @@ module ColorSliderBuilders =
                 AttributesBundle(StackList.one(ColorSlider.Color.WithValue(color)), ValueNone, ValueNone)
             )
 
-        /// <summary>Creates a ColorSlider widget.</summary>
-        /// <param name="color">The Color value.</param>
-        /// <param name="fn">Raised when the color changes.</param>
-        static member ColorSlider(color: Color, fn: Color -> 'msg) =
-            WidgetBuilder<'msg, IFabColorSlider>(ColorSlider.WidgetKey, ColorSlider.ColorChanged.WithValue(ValueEventData.create color fn))
-
 type ColorSliderModifiers =
     /// <summary>Link a ViewRef to access the direct ColorSlider control instance</summary>
     /// <param name="this">Current widget</param>
@@ -71,40 +62,40 @@ type ColorSliderModifiers =
     /// <param name="this">Current widget.</param>
     /// <param name="value">The Components value.</param>
     [<Extension>]
-    static member inline colorComponent(this: WidgetBuilder<'msg, IFabColorSlider>, value: ColorComponent) =
+    static member inline colorComponent(this: WidgetBuilder<'msg, #IFabColorSlider>, value: ColorComponent) =
         this.AddScalar(ColorSlider.ColorComponent.WithValue(value))
 
     /// <summary>Set the ColorModel property.</summary>
     /// <param name="this">Current widget.</param>
     /// <param name="value">The Components value.</param>
     [<Extension>]
-    static member inline colorModel(this: WidgetBuilder<'msg, IFabColorSlider>, value: ColorModel) =
+    static member inline colorModel(this: WidgetBuilder<'msg, #IFabColorSlider>, value: ColorModel) =
         this.AddScalar(ColorSlider.ColorModel.WithValue(value))
 
     /// <summary>Set the HsvColor property.</summary>
     /// <param name="this">Current widget.</param>
     /// <param name="value">The HsvColor value.</param>
     [<Extension>]
-    static member inline hsvColor(this: WidgetBuilder<'msg, IFabColorSlider>, value: HsvColor) =
+    static member inline hsvColor(this: WidgetBuilder<'msg, #IFabColorSlider>, value: HsvColor) =
         this.AddScalar(ColorSlider.HsvColor.WithValue(value))
 
     /// <summary>Set the IsAlphaVisible property.</summary>
     /// <param name="this">Current widget.</param>
     /// <param name="value">The IsAlphaVisible value.</param>
     [<Extension>]
-    static member inline isAlphaVisible(this: WidgetBuilder<'msg, IFabColorSlider>, value: bool) =
+    static member inline isAlphaVisible(this: WidgetBuilder<'msg, #IFabColorSlider>, value: bool) =
         this.AddScalar(ColorSlider.IsAlphaVisible.WithValue(value))
 
     /// <summary>Set the IsPerceptive property.</summary>
     /// <param name="this">Current widget.</param>
     /// <param name="value">The IsPerceptive value.</param>
     [<Extension>]
-    static member inline isPerceptive(this: WidgetBuilder<'msg, IFabColorSlider>, value: bool) =
+    static member inline isPerceptive(this: WidgetBuilder<'msg, #IFabColorSlider>, value: bool) =
         this.AddScalar(ColorSlider.IsPerceptive.WithValue(value))
 
     /// <summary>Set the IsRoundingEnabled property.</summary>
     /// <param name="this">Current widget.</param>
     /// <param name="value">The IsRoundingEnabled value.</param>
     [<Extension>]
-    static member inline isRoundingEnabled(this: WidgetBuilder<'msg, IFabColorSlider>, value: bool) =
+    static member inline isRoundingEnabled(this: WidgetBuilder<'msg, #IFabColorSlider>, value: bool) =
         this.AddScalar(ColorSlider.IsRoundingEnabled.WithValue(value))

extensions/Fabulous.Avalonia.ColorPicker/ColorSpectrum.Components.fs

@@ -0,0 +1,22 @@
+namespace Fabulous.Avalonia
+
+open Avalonia.Controls.Primitives
+open Avalonia.Media
+open Fabulous
+open Fabulous.Avalonia
+
+module ComponentColorSpectrum =
+    let ColorChanged =
+        Attributes.defineAvaloniaPropertyWithChangedEventNoDispatch' "ColorSpectrum_ColorChanged" ColorSpectrum.ColorProperty
+
+[<AutoOpen>]
+module ComponentColorSpectrumBuilders =
+    type Fabulous.Avalonia.View with
+        /// <summary>Creates a ColorSpectrum widget.</summary>
+        /// <param name="color">The Color value.</param>
+        /// <param name="fn">Raised when the color changes.</param>
+        static member ColorSpectrum(color: Color, fn: Color -> unit) =
+            WidgetBuilder<'msg, IFabColorSpectrum>(
+                ColorSpectrum.WidgetKey,
+                ComponentColorSpectrum.ColorChanged.WithValue(ComponentValueEventData.create color fn)
+            )

extensions/Fabulous.Avalonia.ColorPicker/ColorSpectrum.Mvu.fs

@@ -0,0 +1,19 @@
+namespace Fabulous.Avalonia
+
+open Avalonia.Controls.Primitives
+open Avalonia.Media
+open Fabulous
+open Fabulous.Avalonia
+
+module MvuColorSpectrum =
+    let ColorChanged =
+        Attributes.defineAvaloniaPropertyWithChangedEvent' "ColorSpectrum_ColorChanged" ColorSpectrum.ColorProperty
+
+[<AutoOpen>]
+module MvuColorSpectrumBuilders =
+    type Fabulous.Avalonia.View with
+        /// <summary>Creates a ColorSpectrum widget.</summary>
+        /// <param name="color">The Color value.</param>
+        /// <param name="fn">Raised when the color changes.</param>
+        static member ColorSpectrum(color: Color, fn: Color -> 'msg) =
+            WidgetBuilder<'msg, IFabColorSpectrum>(ColorSpectrum.WidgetKey, MvuColorSpectrum.ColorChanged.WithValue(ValueEventData.create color fn))

extensions/Fabulous.Avalonia.ColorPicker/ColorSpectrum.fs

@@ -44,9 +44,6 @@ module ColorSpectrum =
     let Shape =
         Attributes.defineAvaloniaPropertyWithEquality ColorSpectrum.ShapeProperty
 
-    let ColorChanged =
-        Attributes.defineAvaloniaPropertyWithChangedEvent' "ColorSpectrum_ColorChanged" ColorSpectrum.ColorProperty
-
 [<AutoOpen>]
 module ColorSpectrumBuilders =
     type Fabulous.Avalonia.View with
@@ -57,18 +54,12 @@ module ColorSpectrumBuilders =
 
         /// <summary>Creates a ColorSpectrum widget.</summary>
         /// <param name="color">The Color value.</param>
-        static member ColorSpectrum<'msg>(color: Color) =
+        static member ColorSpectrum(color: Color) =
             WidgetBuilder<'msg, IFabColorSpectrum>(
                 ColorSpectrum.WidgetKey,
                 AttributesBundle(StackList.one(ColorSpectrum.Color.WithValue(color)), ValueNone, ValueNone)
             )
 
-        /// <summary>Creates a ColorSpectrum widget.</summary>
-        /// <param name="color">The Color value.</param>
-        /// <param name="fn">Raised when the color changes.</param>
-        static member ColorSpectrum(color: Color, fn: Color -> 'msg) =
-            WidgetBuilder<'msg, IFabColorSpectrum>(ColorSpectrum.WidgetKey, ColorSpectrum.ColorChanged.WithValue(ValueEventData.create color fn))
-
 type ColorSpectrumModifiers =
     /// <summary>Link a ViewRef to access the direct ColorSpectrum control instance</summary>
     /// <param name="this">Current widget</param>
@@ -81,21 +72,21 @@ type ColorSpectrumModifiers =
     /// <param name="this">Current widget.</param>
     /// <param name="value">The Components value.</param>
     [<Extension>]
-    static member inline components(this: WidgetBuilder<'msg, IFabColorSpectrum>, value: ColorSpectrumComponents) =
+    static member inline components(this: WidgetBuilder<'msg, #IFabColorSpectrum>, value: ColorSpectrumComponents) =
         this.AddScalar(ColorSpectrum.Components.WithValue(value))
 
     /// <summary>Set the HsvColor property.</summary>
     /// <param name="this">Current widget.</param>
     /// <param name="value">The HsvColor value.</param>
     [<Extension>]
-    static member inline hsvColor(this: WidgetBuilder<'msg, IFabColorSpectrum>, value: HsvColor) =
+    static member inline hsvColor(this: WidgetBuilder<'msg, #IFabColorSpectrum>, value: HsvColor) =
         this.AddScalar(ColorSpectrum.HsvColor.WithValue(value))
 
     /// <summary>Set the MaxHue property.</summary>
     /// <param name="this">Current widget.</param>
     /// <param name="value">The MaxHue value.</param>
     [<Extension>]
-    static member inline maxHue(this: WidgetBuilder<'msg, IFabColorSpectrum>, value: int) =
+    static member inline maxHue(this: WidgetBuilder<'msg, #IFabColorSpectrum>, value: int) =
         this.AddScalar(ColorSpectrum.MaxHue.WithValue(value))
 
     /// <summary>Set the MaxSaturation property.</summary>
@@ -109,33 +100,33 @@ type ColorSpectrumModifiers =
     /// <param name="this">Current widget.</param>
     /// <param name="value">The MaxValue value.</param>
     [<Extension>]
-    static member inline maxValue(this: WidgetBuilder<'msg, IFabColorSpectrum>, value: int) =
+    static member inline maxValue(this: WidgetBuilder<'msg, #IFabColorSpectrum>, value: int) =
         this.AddScalar(ColorSpectrum.MaxValue.WithValue(value))
 
     /// <summary>Set the MinHue property.</summary>
     /// <param name="this">Current widget.</param>
     /// <param name="value">The MinHue value.</param>
     [<Extension>]
-    static member inline minHue(this: WidgetBuilder<'msg, IFabColorSpectrum>, value: int) =
+    static member inline minHue(this: WidgetBuilder<'msg, #IFabColorSpectrum>, value: int) =
         this.AddScalar(ColorSpectrum.MinHue.WithValue(value))
 
     /// <summary>Set the MinSaturation property.</summary>
     /// <param name="this">Current widget.</param>
     /// <param name="value">The MinSaturation value.</param>
     [<Extension>]
-    static member inline minSaturation(this: WidgetBuilder<'msg, IFabColorSpectrum>, value: int) =
+    static member inline minSaturation(this: WidgetBuilder<'msg, #IFabColorSpectrum>, value: int) =
         this.AddScalar(ColorSpectrum.MinSaturation.WithValue(value))
 
     /// <summary>Set the MinValue property.</summary>
     /// <param name="this">Current widget.</param>
     /// <param name="value">The MinValue value.</param>
     [<Extension>]
-    static member inline minValue(this: WidgetBuilder<'msg, IFabColorSpectrum>, value: int) =
+    static member inline minValue(this: WidgetBuilder<'msg, #IFabColorSpectrum>, value: int) =
         this.AddScalar(ColorSpectrum.MinValue.WithValue(value))
 
     /// <summary>Set the Shape property.</summary>
     /// <param name="this">Current widget.</param>
     /// <param name="value">The Shape value.</param>
     [<Extension>]
-    static member inline shape(this: WidgetBuilder<'msg, IFabColorSpectrum>, value: ColorSpectrumShape) =
+    static member inline shape(this: WidgetBuilder<'msg, #IFabColorSpectrum>, value: ColorSpectrumShape) =
         this.AddScalar(ColorSpectrum.Shape.WithValue(value))