feat(ColorPicker): add IsSupportOpacity parameter (#4069)

* feat: Add new version of color picker associated file (file contents copied from old version)

* feat: Implement simple hue slider and saturation/brightness Palette

* feat: Add multiple color formats to display

* feat: Added an extension to set the Alpha channel

* feat: Adds a callback to send the last result after closing the Settings window

* refactor: Move the mouse event to the js side for computation instead of sending it to blazor for computation and returning it to element

* feat: Adds coordinates calculated based on the entered color values and modifies component positions

* feat: Adjust the code format, fix some details, and add the corresponding usage document content

* feat: Add tests for 'NeedAlpha' and 'FormatType'

* refactor: 增加颜色拾取器脚本与样式

* chore: 增加脚本自动化

* feat: 更新组件 ColorPicker 组件支持透明度

* refactor: 更新样式

* feat: 增加默认值初始化逻辑

* doc: 更新示例

* refactor: 更新实现逻辑

* refactor: 实现透明度数值显示

* refactor: 更新 dom 结构

* revert: 撤销组件

* revert: 撤销示例

* revert: 撤销文档本地化更新

* test: 删除单元测试

* test: 增加单元测试

---------

Co-authored-by: Argo Zhang <[email protected]>

Author: momijijin

.gitignore

@@ -381,3 +381,4 @@ src/**/wwwroot/**/uploader
 **/BootstrapBlazor/wwwroot/css/bootstrap.min.css
 **/BootstrapBlazor/wwwroot/css/sweetalert2.css
 **/BootstrapBlazor/wwwroot/css/motronic.min.css
+**/BootstrapBlazor/wwwroot/css/nano.min.css

src/BootstrapBlazor.Server/Components/Samples/ColorPickers.razor

@@ -5,6 +5,10 @@
 
 <h4>@Localizer["Description"]</h4>
 
+<DemoBlock Title="@Localizer["NormalTitle"]" Introduction="@Localizer["NormalIntro"]" Name="Normal">
+    <ColorPicker Value="@Value" OnValueChanged="@OnColorChanged" IsSupportOpacity="true" />
+</DemoBlock>
+
 <DemoBlock Title="@Localizer["NormalTitle"]" Introduction="@Localizer["NormalIntro"]" Name="Normal">
     <ColorPicker Value="@Value" OnValueChanged="@OnColorChanged" />
     <ConsoleLogger @ref="NormalLogger" />

src/BootstrapBlazor/Components/ColorPicker/ColorPicker.razor

@@ -1,18 +1,28 @@
 @namespace BootstrapBlazor.Components
 @inherits ValidateBase<string>
+@attribute [BootstrapModuleAutoLoader(JSObjectReference = true)]
 
 @if (IsShowLabel)
 {
     <BootstrapLabel required="@Required" for="@Id" ShowLabelTooltip="ShowLabelTooltip" Value="@DisplayText" />
 }
-<div class="input-group color-picker">
-    <input @attributes="@AdditionalAttributes" type="color" class="form-control form-control-color" disabled="@Disabled" value="@CurrentValueAsString" @onchange="EventCallback.Factory.CreateBinder<string>(this, async v => await Setter(v), CurrentValueAsString)" />
+<div class="input-group bb-color-picker">
+    @if (IsSupportOpacity)
+    {
+        <div id="@Id" class="form-control form-control-color">
+            <div class="bb-color-picker-body" style="--bb-color-pick-val: @CurrentValueAsString"></div>
+        </div>
+    }
+    else
+    {
+        <input @attributes="@AdditionalAttributes" type="color" class="form-control form-control-color" disabled="@Disabled" value="@CurrentValueAsString" @onchange="EventCallback.Factory.CreateBinder<string>(this, async v => await Setter(v), CurrentValueAsString)" />
+    }
 
     @if (Template != null)
     {
         @Template(CurrentValueAsString)
     }
-    else if(Formatter != null)
+    else if (Formatter != null)
     {
         <input type="text" readonly class="@ClassName" value="@_formattedValueString" />
     }

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

@@ -28,6 +28,12 @@ public partial class ColorPicker
     [Parameter]
     public Func<string, Task<string>>? Formatter { get; set; }
 
+    /// <summary>
+    /// 获得/设置 是否支持透明度 默认 false 不支持
+    /// </summary>
+    [Parameter]
+    public bool IsSupportOpacity { get; set; }
+
     private string? _formattedValueString;
 
     /// <summary>
@@ -40,6 +46,12 @@ protected override async Task OnParametersSetAsync()
         await FormatValue();
     }
 
+    /// <summary>
+    /// <inheritdoc/>
+    /// </summary>
+    /// <returns></returns>
+    protected override Task InvokeInitAsync() => InvokeVoidAsync("init", Id, Interop, new { IsSupportOpacity, Value });
+
     private async Task Setter(string v)
     {
         CurrentValueAsString = v;
@@ -55,4 +67,17 @@ private async Task FormatValue()
             _formattedValueString = await Formatter(CurrentValueAsString);
         }
     }
+
+    /// <summary>
+    /// 选中颜色值变化时回调此方法 由 JavaScript 调用
+    /// </summary>
+    /// <param name="value"></param>
+    /// <returns></returns>
+    [JSInvokable]
+    public Task OnColorChanged(string value)
+    {
+        CurrentValueAsString = value;
+        StateHasChanged();
+        return Task.CompletedTask;
+    }
 }

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

@@ -0,0 +1,74 @@
+import '../../lib/pickr/pickr.es5.min.js'
+import { addLink } from "../../modules/utility.js"
+import Data from "../../modules/data.js"
+
+export async function init(id, invoke, options) {
+    if (options.isSupportOpacity === true) {
+        await addLink("./_content/BootstrapBlazor/css/nano.min.css");
+
+        const el = document.getElementById(id);
+        const pickr = Pickr.create({
+            el,
+            theme: 'nano',
+            default: options.value,
+            useAsButton: true,
+            swatches: [
+                'rgba(244, 67, 54, 1)',
+                'rgba(233, 30, 99, 0.95)',
+                'rgba(156, 39, 176, 0.9)',
+                'rgba(103, 58, 183, 0.85)',
+                'rgba(63, 81, 181, 0.8)',
+                'rgba(33, 150, 243, 0.75)',
+                'rgba(3, 169, 244, 0.7)'
+            ],
+            defaultRepresentation: 'HEXA',
+            components: {
+                preview: true,
+                opacity: true,
+                hue: true,
+
+                interaction: {
+                    hex: false,
+                    rgba: false,
+                    hsva: false,
+                    input: true,
+                    clear: true,
+                    save: true
+                }
+            }
+        });
+
+        Data.set(id, { pickr });
+
+        pickr.on('save', (color, instance) => {
+            instance.hide();
+            invoke.invokeMethodAsync('OnColorChanged', formatColorString(color));
+        }).on('swatchselect', color => {
+            invoke.invokeMethodAsync('OnColorChanged', formatColorString(color));
+        });
+    }
+}
+
+const formatColorString = color => {
+    if (color === null) {
+        return "#FFFFFF";
+    }
+    else {
+        const hex = color.toRGBA();
+        let val = `#${formatHexString(hex[0])}${formatHexString(hex[1])}${formatHexString(hex[2])}`;
+        if (hex[3] !== 1) {
+            val = `${val}${formatHexString(hex[3] * 255)}`;
+        }
+        return val.toUpperCase();
+    }
+};
+
+const formatHexString = hex => Math.round(hex).toString(16).padStart(2, '0');
+
+export function dispose(id) {
+    const data = Data.get(id);
+    data.remove(id);
+    if (data) {
+        data.pickr.destroyAndRemove();
+    }
+}

src/BootstrapBlazor/Components/ColorPicker/ColorPicker.razor.scss

@@ -1,10 +1,16 @@
-.color-picker {
+.bb-color-picker {
     .form-control-color {
         max-width: 3rem;
     }
+
+    .bb-color-picker-body {
+        height: 100%;
+        background-color: var(--bb-color-pick-val);
+        border-radius: var(--bs-border-radius);
+    }
 }
 
-.input-group > .color-picker {
+.input-group > .bb-color-picker {
     flex: 1;
 
     > .form-control-color {

src/BootstrapBlazor/Directory.Build.targets

@@ -8,6 +8,7 @@
     <Message Text="Copy bootstrapblazor assets ..." Importance="high"></Message>
     <Copy SourceFiles="$(MSBuildThisFileDirectory)wwwroot/lib/animate/animate.min.css" DestinationFiles="$(MSBuildThisFileDirectory)wwwroot/css/animate.min.css" SkipUnchangedFiles="true" ></Copy>
     <Copy SourceFiles="$(MSBuildThisFileDirectory)wwwroot/lib/swal/sweetalert2.css" DestinationFiles="$(MSBuildThisFileDirectory)wwwroot/css/sweetalert2.css" SkipUnchangedFiles="true" ></Copy>
+    <Copy SourceFiles="$(MSBuildThisFileDirectory)wwwroot/lib/pickr/nano.min.css" DestinationFiles="$(MSBuildThisFileDirectory)wwwroot/css/nano.min.css" SkipUnchangedFiles="true" ></Copy>
 
     <Message Text="Copy motronic theme ..." Importance="high"></Message>
     <Copy SourceFiles="$(MSBuildThisFileDirectory)wwwroot/src/css/motronic.css" DestinationFiles="$(MSBuildThisFileDirectory)wwwroot/css/motronic.min.css" SkipUnchangedFiles="true" ></Copy>

src/BootstrapBlazor/wwwroot/lib/pickr/nano.min.css

@@ -49,4 +49,18 @@ public async Task Formatter_OK()
         await cut.InvokeAsync(() => input.Change("#000000"));
         cut.Contains("test-color-value#000000");
     }
+
+    [Fact]
+    public async Task IsSupportOpacity_Ok()
+    {
+        var cut = Context.RenderComponent<ColorPicker>(builder =>
+        {
+            builder.Add(a => a.IsSupportOpacity, true);
+            builder.Add(a => a.Value, "#AABBCCDD");
+        });
+        cut.Contains("<div class=\"bb-color-picker-body\" style=\"--bb-color-pick-val: #AABBCCDD\"></div>");
+
+        await cut.InvokeAsync(() => cut.Instance.OnColorChanged("#123456"));
+        Assert.Equal("#123456", cut.Instance.Value);
+    }
 }