feat(ColorPicker): support IsSupportOpacity toggle

src/BootstrapBlazor.Server/Components/Pages/Online.razor.cs

@@ -89,7 +89,7 @@ private void BuildContext()
     {
         _table.Rows.Clear();
         var rows = ConnectionService.Connections.Sort(["ConnectionTime"]);
-        foreach (var item in ConnectionService.Connections)
+        foreach (var item in rows)
         {
             _table.Rows.Add(
                 item.Id,

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

@@ -47,8 +47,17 @@
 </DemoBlock>
 
 <DemoBlock Title="@Localizer["IsSupportOpacityTitle"]" Introduction="@Localizer["IsSupportOpacityIntro"]" Name="IsSupportOpacity">
-    <Switch @bind-Value="_opacityDisabled"></Switch>
-    <ColorPicker @bind-Value="@_opacityValue" IsSupportOpacity="true" IsDisabled="_opacityDisabled" />
+    <section ignore>
+        <div class="row form-inline">
+            <div class="col-12 col-sm-6">
+                <Switch @bind-Value="_opacityIsSupport" DisplayText="SupportOpacity" ShowLabel="true"></Switch>
+            </div>
+            <div class="col-12 col-sm-6">
+                <Switch @bind-Value="_opacityIsDisabled" DisplayText="Disabled" ShowLabel="true"></Switch>
+            </div>
+        </div>
+    </section>
+    <ColorPicker @bind-Value="@_opacityValue" IsSupportOpacity="_opacityIsSupport" IsDisabled="_opacityIsDisabled" />
 </DemoBlock>
 
 <AttributeTable Items="@GetAttributes()" />

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

@@ -20,7 +20,9 @@ public partial class ColorPickers
 
     private string _opacityValue = "#dd0324";
 
-    private bool _opacityDisabled = false;
+    private bool _opacityIsDisabled = false;
+
+    private bool _opacityIsSupport = true;
 
     [NotNull]
     private ConsoleLogger? NormalLogger { get; set; }

src/BootstrapBlazor/BootstrapBlazor.csproj

@@ -5,32 +5,32 @@
   </PropertyGroup>
 
   <ItemGroup Condition="'$(TargetFramework)' == 'net6.0'">
-    <PackageReference Include="Microsoft.AspNetCore.Components.Authorization" Version="6.0.0" />
-    <PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="6.0.0" />
-    <PackageReference Include="Microsoft.Extensions.Caching.Memory" Version="6.0.0" />
-    <PackageReference Include="Microsoft.Extensions.Configuration.Json" Version="6.0.0" />
-    <PackageReference Include="Microsoft.Extensions.Http" Version="6.0.0" />
-    <PackageReference Include="Microsoft.Extensions.Localization" Version="6.0.0" />
-    <PackageReference Include="Microsoft.Extensions.Options.ConfigurationExtensions" Version="6.0.0" />
+    <PackageReference Include="Microsoft.AspNetCore.Components.Authorization" Version="$(NET6Version)" />
+    <PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="$(NET6Version)" />
+    <PackageReference Include="Microsoft.Extensions.Caching.Memory" Version="$(NET6Version)" />
+    <PackageReference Include="Microsoft.Extensions.Configuration.Json" Version="$(NET6Version)" />
+    <PackageReference Include="Microsoft.Extensions.Http" Version="$(NET6Version)" />
+    <PackageReference Include="Microsoft.Extensions.Localization" Version="$(NET6Version)" />
+    <PackageReference Include="Microsoft.Extensions.Options.ConfigurationExtensions" Version="$(NET6Version)" />
   </ItemGroup>
 
   <ItemGroup Condition="'$(TargetFramework)' == 'net7.0'">
-    <PackageReference Include="Microsoft.AspNetCore.Components.Authorization" Version="7.0.0" />
-    <PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="7.0.0" />
-    <PackageReference Include="Microsoft.Extensions.Caching.Memory" Version="7.0.0" />
-    <PackageReference Include="Microsoft.Extensions.Configuration.Json" Version="7.0.0" />
-    <PackageReference Include="Microsoft.Extensions.Http" Version="7.0.0" />
-    <PackageReference Include="Microsoft.Extensions.Localization" Version="7.0.0" />
-    <PackageReference Include="Microsoft.Extensions.Options.ConfigurationExtensions" Version="7.0.0" />
+    <PackageReference Include="Microsoft.AspNetCore.Components.Authorization" Version="$(NET7Version)" />
+    <PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="$(NET7Version)" />
+    <PackageReference Include="Microsoft.Extensions.Caching.Memory" Version="$(NET7Version)" />
+    <PackageReference Include="Microsoft.Extensions.Configuration.Json" Version="$(NET7Version)" />
+    <PackageReference Include="Microsoft.Extensions.Http" Version="$(NET7Version)" />
+    <PackageReference Include="Microsoft.Extensions.Localization" Version="$(NET7Version)" />
+    <PackageReference Include="Microsoft.Extensions.Options.ConfigurationExtensions" Version="$(NET7Version)" />
   </ItemGroup>
 
   <ItemGroup Condition="'$(TargetFramework)' == 'net8.0'">
-    <PackageReference Include="Microsoft.AspNetCore.Components.Authorization" Version="8.0.0" />
-    <PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="8.0.0" />
-    <PackageReference Include="Microsoft.Extensions.Caching.Memory" Version="8.0.0" />
-    <PackageReference Include="Microsoft.Extensions.Configuration.Json" Version="8.0.0" />
-    <PackageReference Include="Microsoft.Extensions.Http" Version="8.0.0" />
-    <PackageReference Include="Microsoft.Extensions.Localization" Version="8.0.0" />
+    <PackageReference Include="Microsoft.AspNetCore.Components.Authorization" Version="$(NET8Version)" />
+    <PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="$(NET8Version)" />
+    <PackageReference Include="Microsoft.Extensions.Caching.Memory" Version="$(NET8Version)" />
+    <PackageReference Include="Microsoft.Extensions.Configuration.Json" Version="$(NET8Version)" />
+    <PackageReference Include="Microsoft.Extensions.Http" Version="$(NET8Version)" />
+    <PackageReference Include="Microsoft.Extensions.Localization" Version="$(NET8Version)" />
   </ItemGroup>
 
   <ItemGroup>

src/BootstrapBlazor/Components/ColorPicker/ColorPicker.razor

@@ -15,7 +15,7 @@
     }
     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)" />
+        <input @attributes="@AdditionalAttributes" type="color" id="@Id" 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)

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

@@ -38,6 +38,10 @@ public partial class ColorPicker
 
     private string? _formattedValueString;
 
+    private bool _originalSupportOpacityValue;
+
+    private bool _originalIsDisabledValue;
+
     /// <summary>
     /// <inheritdoc/>
     /// </summary>
@@ -57,12 +61,17 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
     {
         await base.OnAfterRenderAsync(firstRender);
 
-        if (!firstRender)
+        if (firstRender)
+        {
+            _originalSupportOpacityValue = IsSupportOpacity;
+            _originalIsDisabledValue = IsDisabled;
+        }
+
+        if (_originalSupportOpacityValue != IsSupportOpacity || _originalIsDisabledValue != IsDisabled)
         {
-            if (IsSupportOpacity)
-            {
-                await InvokeVoidAsync("update", Id, new { Value, IsDisabled });
-            }
+            _originalSupportOpacityValue = IsSupportOpacity;
+            _originalIsDisabledValue = IsDisabled;
+            await InvokeVoidAsync("update", Id, new { IsSupportOpacity, Value, Disabled = IsDisabled, Lang = CultureInfo.CurrentUICulture.Name });
         }
     }
 

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

@@ -3,22 +3,64 @@ import { addLink } from "../../modules/utility.js"
 import Data from "../../modules/data.js"
 
 export async function init(id, invoke, options) {
+    const obj = { invoke, pickr: null };
+    Data.set(id, obj);
+    await getOrCreatePickr(id, obj, options);
+}
+
+export async function update(id, options) {
+    const obj = Data.get(id);
+    await getOrCreatePickr(id, obj, options);
+}
+
+export function dispose(id) {
+    const data = Data.get(id);
+    Data.remove(id);
+    if (data) {
+        data.pickr.destroyAndRemove();
+    }
+}
+
+const getOrCreatePickr = async (id, picker, options) => {
     const { isSupportOpacity } = options;
+
     if (isSupportOpacity === true) {
         await addLink("./_content/BootstrapBlazor/css/nano.min.css");
 
-        const el = document.getElementById(id);
-        const config = getOptions(el, options)
-        const pickr = Pickr.create(config);
+        const { invoke, pickr } = picker;
+        if (pickr) {
+            const { value, disabled } = options;
+            const original = formatColorString(pickr.getColor());
+            if (original !== value) {
+                pickr.setColor(value, true);
+            }
+            if (pickr.options.disabled !== disabled) {
+                if (disabled) {
+                    pickr.disable();
+                }
+                else {
+                    pickr.enable();
+                }
+            }
+        }
+        else {
+            const el = document.getElementById(id);
+            const config = getOptions(el, options)
+            const pickr = Pickr.create(config);
 
-        Data.set(id, { pickr });
+            pickr.on('save', (color, instance) => {
+                instance.hide();
+                invoke.invokeMethodAsync('OnColorChanged', formatColorString(color));
+            }).on('swatchselect', color => {
+                invoke.invokeMethodAsync('OnColorChanged', formatColorString(color));
+            });
 
-        pickr.on('save', (color, instance) => {
-            instance.hide();
-            invoke.invokeMethodAsync('OnColorChanged', formatColorString(color));
-        }).on('swatchselect', color => {
-            invoke.invokeMethodAsync('OnColorChanged', formatColorString(color));
-        });
+            picker.pickr = pickr;
+        }
+    }
+    else if (picker.pickr) {
+        picker.pickr.destroyAndRemove();
+        picker.pickr = null;
     }
 }
 
@@ -39,6 +81,11 @@ const formatColorString = color => {
 const formatHexString = hex => Math.round(hex).toString(16).padStart(2, '0');
 
 const getOptions = (el, options) => {
+    delete options.isSupportOpacity;
+    if (options.value) {
+        options.default = options.value;
+        delete options.value;
+    }
     const config = {
         el,
         theme: 'nano',
@@ -77,31 +124,3 @@ const getOptions = (el, options) => {
     }
     return config;
 }
-
-export function update(id, options) {
-    const data = Data.get(id);
-    if (data) {
-        const { value, isDisabled } = options;
-        const { pickr } = data;
-        const original = formatColorString(pickr.getColor());
-        if (original !== value) {
-            pickr.setColor(value, true);
-        }
-        if (pickr.options.disabled !== isDisabled) {
-            if (isDisabled) {
-                pickr.disable();
-            }
-            else {
-                pickr.enable();
-            }
-        }
-    }
-}
-
-export function dispose(id) {
-    const data = Data.get(id);
-    Data.remove(id);
-    if (data) {
-        data.pickr.destroyAndRemove();
-    }
-}

src/BootstrapBlazor/Directory.Build.props

@@ -1,7 +1,6 @@
 <Project>
 
   <Import Project="..\Directory.Build.props" />
-  <Import Project="..\Frameworks.props" />
   <Import Project="..\Logo.props" />
   <Import Project="..\Bundle.props" />
   <Import Project="..\SourceLink.targets" />
@@ -14,12 +13,18 @@
     <PackageReleaseNotes>https://github.com/dotnetcore/BootstrapBlazor/releases?wt.mc_id=DT-MVP-5004174</PackageReleaseNotes>
   </PropertyGroup>
 
-  <ItemGroup>
-    <None Include="readme.md" Pack="true" PackagePath="" />
-  </ItemGroup>
+  <PropertyGroup>
+    <TargetFrameworks>net6.0;net7.0;net8.0</TargetFrameworks>
+  </PropertyGroup>
 
   <PropertyGroup>
-    <NoWarn>NU1902;NU1903;CS8002</NoWarn>
+    <NET6Version>6.0.*</NET6Version>
+    <NET7Version>7.0.*</NET7Version>
+    <NET8Version>8.0</NET8Version>
   </PropertyGroup>
 
+  <ItemGroup>
+    <None Include="readme.md" Pack="true" PackagePath="" />
+  </ItemGroup>
+
 </Project>

test/UnitTest/Components/ColorPickerTest.cs

@@ -64,5 +64,15 @@ public async Task IsSupportOpacity_Ok()
         Assert.Equal("#123456", cut.Instance.Value);
 
         await cut.InvokeAsync(() => cut.Instance.SetValue("#333333"));
+
+        cut.SetParametersAndRender(pb =>
+        {
+            pb.Add(a => a.IsSupportOpacity, false);
+        });
+
+        cut.SetParametersAndRender(pb =>
+        {
+            pb.Add(a => a.IsDisabled, true);
+        });
     }
 }