diff --git a/src/BootstrapBlazor.Server/Components/Pages/Online.razor.cs b/src/BootstrapBlazor.Server/Components/Pages/Online.razor.cs index 39516b4a5e7..ebf4dcbf712 100644 --- a/src/BootstrapBlazor.Server/Components/Pages/Online.razor.cs +++ b/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, diff --git a/src/BootstrapBlazor.Server/Components/Samples/ColorPickers.razor b/src/BootstrapBlazor.Server/Components/Samples/ColorPickers.razor index 88b298468c2..47c73c24436 100644 --- a/src/BootstrapBlazor.Server/Components/Samples/ColorPickers.razor +++ b/src/BootstrapBlazor.Server/Components/Samples/ColorPickers.razor @@ -47,8 +47,17 @@ - - +
+
+
+ +
+
+ +
+
+
+ diff --git a/src/BootstrapBlazor.Server/Components/Samples/ColorPickers.razor.cs b/src/BootstrapBlazor.Server/Components/Samples/ColorPickers.razor.cs index e9cc6776af7..0c39d06532d 100644 --- a/src/BootstrapBlazor.Server/Components/Samples/ColorPickers.razor.cs +++ b/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; } diff --git a/src/BootstrapBlazor/BootstrapBlazor.csproj b/src/BootstrapBlazor/BootstrapBlazor.csproj index 366d487b631..e939a32b399 100644 --- a/src/BootstrapBlazor/BootstrapBlazor.csproj +++ b/src/BootstrapBlazor/BootstrapBlazor.csproj @@ -5,32 +5,32 @@ - - - - - - - + + + + + + + - - - - - - - + + + + + + + - - - - - - + + + + + + diff --git a/src/BootstrapBlazor/Components/ColorPicker/ColorPicker.razor b/src/BootstrapBlazor/Components/ColorPicker/ColorPicker.razor index a06eea0c937..6ca2ab64555 100644 --- a/src/BootstrapBlazor/Components/ColorPicker/ColorPicker.razor +++ b/src/BootstrapBlazor/Components/ColorPicker/ColorPicker.razor @@ -15,7 +15,7 @@ } else { - + } @if (Template != null) diff --git a/src/BootstrapBlazor/Components/ColorPicker/ColorPicker.razor.cs b/src/BootstrapBlazor/Components/ColorPicker/ColorPicker.razor.cs index 315d886985d..865e42b3f2d 100644 --- a/src/BootstrapBlazor/Components/ColorPicker/ColorPicker.razor.cs +++ b/src/BootstrapBlazor/Components/ColorPicker/ColorPicker.razor.cs @@ -38,6 +38,10 @@ public partial class ColorPicker private string? _formattedValueString; + private bool _originalSupportOpacityValue; + + private bool _originalIsDisabledValue; + /// /// /// @@ -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 }); } } diff --git a/src/BootstrapBlazor/Components/ColorPicker/ColorPicker.razor.js b/src/BootstrapBlazor/Components/ColorPicker/ColorPicker.razor.js index 2f48ba96e38..f7cafcdab06 100644 --- a/src/BootstrapBlazor/Components/ColorPicker/ColorPicker.razor.js +++ b/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(); - } -} diff --git a/src/BootstrapBlazor/Directory.Build.props b/src/BootstrapBlazor/Directory.Build.props index 05cb996f094..8694ad04829 100644 --- a/src/BootstrapBlazor/Directory.Build.props +++ b/src/BootstrapBlazor/Directory.Build.props @@ -1,7 +1,6 @@ - @@ -14,12 +13,18 @@ https://github.com/dotnetcore/BootstrapBlazor/releases?wt.mc_id=DT-MVP-5004174 - - - + + net6.0;net7.0;net8.0 + - NU1902;NU1903;CS8002 + 6.0.* + 7.0.* + 8.0 + + + + diff --git a/src/Frameworks.props b/src/Frameworks.props deleted file mode 100644 index 7ed8ea7486d..00000000000 --- a/src/Frameworks.props +++ /dev/null @@ -1,7 +0,0 @@ - - - - net6.0;net7.0;net8.0 - - - diff --git a/test/UnitTest/Components/ColorPickerTest.cs b/test/UnitTest/Components/ColorPickerTest.cs index d28a13313ff..47a47e49433 100644 --- a/test/UnitTest/Components/ColorPickerTest.cs +++ b/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); + }); } }