feat(ColorPicker): add Swatches parameter (#4560)

* feat: 增加 Swatches 参数

* test: 更新单元测试

* chore: bump version 8.11.0

Author: ArgoZhang

src/BootstrapBlazor/BootstrapBlazor.csproj

@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>8.10.5-beta01</Version>
+    <Version>8.11.0</Version>
   </PropertyGroup>
 
   <ItemGroup>

src/BootstrapBlazor/Components/ColorPicker/ColorPicker.razor.cs

@@ -37,6 +37,13 @@ public partial class ColorPicker
     [Parameter]
     public bool IsSupportOpacity { get; set; }
 
+    /// <summary>
+    /// 获得/设置 预设候选颜色 <see cref="IsSupportOpacity"/> 开启时生效 默认 null
+    /// </summary>
+    /// <remarks>字符串集合格式为 ["rgba(244, 67, 54, 1)", "rgba(233, 30, 99, 0.95)"]</remarks>
+    [Parameter]
+    public List<string>? Swatches { get; set; }
+
     private string? _formattedValueString;
 
     private bool _originalSupportOpacityValue;
@@ -72,15 +79,15 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
         {
             _originalSupportOpacityValue = IsSupportOpacity;
             _originalIsDisabledValue = IsDisabled;
-            await InvokeVoidAsync("update", Id, new { IsSupportOpacity, Value, Disabled = IsDisabled, Lang = CultureInfo.CurrentUICulture.Name });
+            await InvokeVoidAsync("update", Id, new { IsSupportOpacity, Value, Disabled = IsDisabled, Lang = CultureInfo.CurrentUICulture.Name, Swatches });
         }
     }
 
     /// <summary>
     /// <inheritdoc/>
     /// </summary>
     /// <returns></returns>
-    protected override Task InvokeInitAsync() => InvokeVoidAsync("init", Id, Interop, new { IsSupportOpacity, Default = Value, Disabled = IsDisabled, Lang = CultureInfo.CurrentUICulture.Name });
+    protected override Task InvokeInitAsync() => InvokeVoidAsync("init", Id, Interop, new { IsSupportOpacity, Default = Value, Disabled = IsDisabled, Lang = CultureInfo.CurrentUICulture.Name, Swatches });
 
     private async Task Setter(string v)
     {

src/BootstrapBlazor/Components/ColorPicker/ColorPicker.razor.js

@@ -97,7 +97,14 @@ const getOptions = (el, options) => {
             'rgba(103, 58, 183, 0.85)',
             'rgba(63, 81, 181, 0.8)',
             'rgba(33, 150, 243, 0.75)',
-            'rgba(3, 169, 244, 0.7)'
+            'rgba(3, 169, 244, 0.7)',
+            'rgba(0, 188, 212, 0.7)',
+            'rgba(0, 150, 136, 0.75)',
+            'rgba(76, 175, 80, 0.8)',
+            'rgba(139, 195, 74, 0.85)',
+            'rgba(205, 220, 57, 0.9)',
+            'rgba(255, 235, 59, 0.95)',
+            'rgba(255, 193, 7, 1)'
         ],
         defaultRepresentation: 'HEXA',
         components: {

test/UnitTest/Components/ColorPickerTest.cs

@@ -58,6 +58,7 @@ public async Task IsSupportOpacity_Ok()
         {
             builder.Add(a => a.IsSupportOpacity, true);
             builder.Add(a => a.Value, "#AABBCCDD");
+            builder.Add(a => a.Swatches, ["rgba(123, 1, 2, 1)", "rgba(1, 255,10, 1)"]);
         });
         cut.Contains("<div class=\"bb-color-picker-body\" style=\"--bb-color-pick-val: #AABBCCDD\"></div>");