1. 新增颜色选择器组件 <util-color-picker> .

2. 新增颜色块组件 <util-color-block> . 3. Razor页面监视服务 Util.Ui.Razor.RazorWatchService 改进新增Razor文件和异常处理逻辑.
dotnetcore · Apr 2, 2024 · cf0f68b · cf0f68b
1 parent 41a673e
commit cf0f68b
Show file tree

Hide file tree

Showing 25 changed files with 1,190 additions and 113 deletions.
diff --git a/build/version.props b/build/version.props
@@ -2,7 +2,7 @@
 	<PropertyGroup>
 		<VersionMajor>8</VersionMajor>
 		<VersionMinor>0</VersionMinor>
-		<VersionPatch>10</VersionPatch>
+		<VersionPatch>11</VersionPatch>
 		<VersionPrefix>$(VersionMajor).$(VersionMinor).$(VersionPatch)</VersionPrefix>
 		<VersionSuffix></VersionSuffix>
 	</PropertyGroup>

diff --git a/src/Util.Ui.Angular/Configs/AngularConst.cs b/src/Util.Ui.Angular/Configs/AngularConst.cs
@@ -53,6 +53,10 @@ public static class AngularConst {
     /// </summary>
     public const string BindAcl = "bind-acl";
     /// <summary>
+    /// 触发器
+    /// </summary>
+    public const string BindTrigger = "bind-trigger";
+    /// <summary>
     /// 首页
     /// </summary>
     public const string BindHome = "bind-home";
@@ -73,6 +77,10 @@ public static class AngularConst {
     /// </summary>
     public const string BindRecursiveBreadcrumb = "bind-recursive-breadcrumb";
     /// <summary>
+    /// 禁用透明度
+    /// </summary>
+    public const string BindDisabledAlpha = "bind-disabled-alpha";
+    /// <summary>
     /// 定宽
     /// </summary>
     public const string BindWide = "bind-wide";
@@ -81,6 +89,10 @@ public static class AngularConst {
     /// </summary>
     public const string BindFixed = "bind-fixed";
     /// <summary>
+    /// 显示文本
+    /// </summary>
+    public const string BindShowText = "bind-show-text";
+    /// <summary>
     /// 行数
     /// </summary>
     public const string BindLines = "bind-lines";
@@ -117,6 +129,10 @@ public static class AngularConst {
     /// </summary>
     public const string BindText = "bind-text";
     /// <summary>
+    /// 默认值
+    /// </summary>
+    public const string BindDefaultValue = "bind-default-value";
+    /// <summary>
     /// 值
     /// </summary>
     public const string BindValue = "bind-value";

diff --git a/src/Util.Ui.NgZorro/Components/Avatars/AvatarTagHelper.cs b/src/Util.Ui.NgZorro/Components/Avatars/AvatarTagHelper.cs
@@ -1,6 +1,5 @@
 using Microsoft.AspNetCore.Razor.TagHelpers;
 using Util.Ui.Angular.TagHelpers;
-using Util.Ui.Configs;
 using Util.Ui.NgZorro.Components.Avatars.Renders;
 using Util.Ui.NgZorro.Enums;
 using Util.Ui.Renders;

diff --git a/src/Util.Ui.NgZorro/Components/Avatars/Renders/AvatarRender.cs b/src/Util.Ui.NgZorro/Components/Avatars/Renders/AvatarRender.cs
@@ -1,5 +1,4 @@
 using Util.Ui.Builders;
-using Util.Ui.Configs;
 using Util.Ui.NgZorro.Components.Avatars.Builders;
 using Util.Ui.NgZorro.Components.Comments.Configs;
 using Util.Ui.Renders;

diff --git a/src/Util.Ui.NgZorro/Components/Cards/Builders/CardBuilder.cs b/src/Util.Ui.NgZorro/Components/Cards/Builders/CardBuilder.cs
@@ -1,7 +1,6 @@
 using Util.Ui.Angular.Builders;
 using Util.Ui.Angular.Configs;
 using Util.Ui.Angular.Extensions;
-using Util.Ui.Configs;
 using Util.Ui.NgZorro.Configs;
 using Util.Ui.NgZorro.Enums;
 using Util.Ui.NgZorro.Extensions;

diff --git a/src/Util.Ui.NgZorro/Components/ColorPickers/Builders/ColorBlockBuilder.cs b/src/Util.Ui.NgZorro/Components/ColorPickers/Builders/ColorBlockBuilder.cs
@@ -0,0 +1,57 @@
+using Util.Ui.Angular.Builders;
+using Util.Ui.Angular.Configs;
+using Util.Ui.NgZorro.Enums;
+
+namespace Util.Ui.NgZorro.Components.ColorPickers.Builders;
+
+/// <summary>
+/// 颜色块标签生成器
+/// </summary>
+public class ColorBlockBuilder : AngularTagBuilder {
+    /// <summary>
+    /// 配置
+    /// </summary>
+    private readonly Config _config;
+
+    /// <summary>
+    /// 初始化颜色块标签生成器
+    /// </summary>
+    /// <param name="config">配置</param>
+    public ColorBlockBuilder( Config config ) : base( config, "nz-color-block" ) {
+        _config = config;
+    }
+
+    /// <summary>
+    /// 配置颜色
+    /// </summary>
+    public ColorBlockBuilder Color() {
+        AttributeIfNotEmpty( "nzColor", _config.GetValue( UiConst.Color ) );
+        AttributeIfNotEmpty( "[nzColor]", _config.GetValue( AngularConst.BindColor ) );
+        return this;
+    }
+
+    /// <summary>
+    /// 配置控件尺寸
+    /// </summary>
+    public ColorBlockBuilder Size() {
+        AttributeIfNotEmpty( "nzSize", _config.GetValue<InputSize?>( UiConst.Size )?.Description() );
+        AttributeIfNotEmpty( "[nzSize]", _config.GetValue( AngularConst.BindSize ) );
+        return this;
+    }
+
+    /// <summary>
+    /// 配置事件
+    /// </summary>
+    public ColorBlockBuilder Events() {
+        AttributeIfNotEmpty( "(nzOnClick)", _config.GetValue( UiConst.OnClick ) );
+        return this;
+    }
+
+    /// <summary>
+    /// 配置
+    /// </summary>
+    public override void Config() {
+        base.Config();
+        Color().Size().Events();
+    }
+}
diff --git a/src/Util.Ui.NgZorro/Components/ColorPickers/Builders/ColorPickerBuilder.cs b/src/Util.Ui.NgZorro/Components/ColorPickers/Builders/ColorPickerBuilder.cs
@@ -0,0 +1,157 @@
+using Util.Ui.Angular.Configs;
+using Util.Ui.NgZorro.Components.Base;
+using Util.Ui.NgZorro.Configs;
+using Util.Ui.NgZorro.Enums;
+using Util.Ui.NgZorro.Extensions;
+
+namespace Util.Ui.NgZorro.Components.ColorPickers.Builders; 
+
+/// <summary>
+/// 颜色选择标签生成器
+/// </summary>
+public class ColorPickerBuilder : FormControlBuilderBase<ColorPickerBuilder> {
+    /// <summary>
+    /// 配置
+    /// </summary>
+    private readonly Config _config;
+
+    /// <summary>
+    /// 初始化颜色选择标签生成器
+    /// </summary>
+    /// <param name="config">配置</param>
+    public ColorPickerBuilder( Config config ) : base( config, "nz-color-picker" ) {
+        _config = config;
+    }
+
+    /// <summary>
+    /// 配置标题
+    /// </summary>
+    public ColorPickerBuilder Title() {
+        SetTitle( _config.GetValue( UiConst.Title ) );
+        AttributeIfNotEmpty( "[nzTitle]", _config.GetValue( AngularConst.BindTitle ) );
+        return this;
+    }
+
+    /// <summary>
+    /// 设置表单标签文本
+    /// </summary>
+    private void SetTitle( string value ) {
+        var options = NgZorroOptionsService.GetOptions();
+        if ( options.EnableI18n ) {
+            this.AttributeByI18n( "[nzTitle]", value );
+            return;
+        }
+        AttributeIfNotEmpty( "nzTitle", value );
+    }
+
+    /// <summary>
+    /// 配置颜色默认值
+    /// </summary>
+    public ColorPickerBuilder DefaultValue() {
+        AttributeIfNotEmpty( "nzDefaultValue", _config.GetValue( UiConst.DefaultValue ) );
+        AttributeIfNotEmpty( "[nzDefaultValue]", _config.GetValue( AngularConst.BindDefaultValue ) );
+        return this;
+    }
+
+    /// <summary>
+    /// 配置颜色值
+    /// </summary>
+    public ColorPickerBuilder Value() {
+        AttributeIfNotEmpty( "nzValue", _config.GetValue( UiConst.Value ) );
+        AttributeIfNotEmpty( "[nzValue]", _config.GetValue( AngularConst.BindValue ) );
+        return this;
+    }
+
+    /// <summary>
+    /// 配置显示颜色文本
+    /// </summary>
+    public ColorPickerBuilder ShowText() {
+        AttributeIfNotEmpty( "[nzShowText]", _config.GetBoolValue( UiConst.ShowText ) );
+        AttributeIfNotEmpty( "[nzShowText]", _config.GetValue( AngularConst.BindShowText ) );
+        return this;
+    }
+
+    /// <summary>
+    /// 配置控件尺寸
+    /// </summary>
+    public ColorPickerBuilder Size() {
+        AttributeIfNotEmpty( "nzSize", _config.GetValue<InputSize?>( UiConst.Size )?.Description() );
+        AttributeIfNotEmpty( "[nzSize]", _config.GetValue( AngularConst.BindSize ) );
+        return this;
+    }
+
+    /// <summary>
+    /// 配置禁用
+    /// </summary>
+    public ColorPickerBuilder Disabled() {
+        AttributeIfNotEmpty( "[nzDisabled]", _config.GetBoolValue( UiConst.Disabled ) );
+        AttributeIfNotEmpty( "[nzDisabled]", _config.GetValue( AngularConst.BindDisabled ) );
+        return this;
+    }
+
+    /// <summary>
+    /// 配置禁用透明度
+    /// </summary>
+    public ColorPickerBuilder DisabledAlpha() {
+        AttributeIfNotEmpty( "[nzDisabledAlpha]", _config.GetBoolValue( UiConst.DisabledAlpha ) );
+        AttributeIfNotEmpty( "[nzDisabledAlpha]", _config.GetValue( AngularConst.BindDisabledAlpha ) );
+        return this;
+    }
+
+    /// <summary>
+    /// 配置触发模式
+    /// </summary>
+    public ColorPickerBuilder Trigger() {
+        AttributeIfNotEmpty( "nzTrigger", _config.GetValue<ColorPickerTrigger?>( UiConst.Trigger )?.Description() );
+        AttributeIfNotEmpty( "[nzTrigger]", _config.GetValue( AngularConst.BindTrigger ) );
+        return this;
+    }
+
+    /// <summary>
+    /// 配置允许清除
+    /// </summary>
+    public ColorPickerBuilder AllowClear() {
+        AttributeIfNotEmpty( "[nzAllowClear]", _config.GetBoolValue( UiConst.AllowClear ) );
+        AttributeIfNotEmpty( "[nzAllowClear]", _config.GetValue( AngularConst.BindAllowClear ) );
+        return this;
+    }
+
+    /// <summary>
+    /// 配置颜色格式
+    /// </summary>
+    public ColorPickerBuilder Format() {
+        AttributeIfNotEmpty( "nzFormat", _config.GetValue<ColorPickerFormat?>( UiConst.Format )?.Description() );
+        AttributeIfNotEmpty( "[nzFormat]", _config.GetValue( AngularConst.BindFormat ) );
+        return this;
+    }
+
+    /// <summary>
+    /// 配置显示弹出窗口
+    /// </summary>
+    public ColorPickerBuilder Open() {
+        AttributeIfNotEmpty( "[nzOpen]", _config.GetValue( UiConst.Open ) );
+        return this;
+    }
+
+    /// <summary>
+    /// 配置事件
+    /// </summary>
+    public ColorPickerBuilder Events() {
+        AttributeIfNotEmpty( "(nzOnChange)", _config.GetValue( UiConst.OnChange ) );
+        AttributeIfNotEmpty( "(nzOnClear)", _config.GetValue( UiConst.OnClear ) );
+        AttributeIfNotEmpty( "(nzOnFormatChange)", _config.GetValue( UiConst.OnFormatChange ) );
+        AttributeIfNotEmpty( "(nzOnOpenChange)", _config.GetValue( UiConst.OnOpenChange ) );
+        return this;
+    }
+
+    /// <summary>
+    /// 配置
+    /// </summary>
+    public override void Config() {
+        base.ConfigBase( _config );
+        ConfigForm().Name().DefaultValue().Value()
+            .Title().ShowText().Size().Disabled().DisabledAlpha()
+            .Trigger().AllowClear().Format().Open()
+            .Events();
+    }
+}
diff --git a/src/Util.Ui.NgZorro/Components/ColorPickers/ColorBlockTagHelper.cs b/src/Util.Ui.NgZorro/Components/ColorPickers/ColorBlockTagHelper.cs
@@ -0,0 +1,49 @@
+using Microsoft.AspNetCore.Razor.TagHelpers;
+using Util.Ui.Angular.TagHelpers;
+using Util.Ui.NgZorro.Components.ColorPickers.Renders;
+using Util.Ui.NgZorro.Enums;
+using Util.Ui.Renders;
+
+namespace Util.Ui.NgZorro.Components.ColorPickers;
+
+/// <summary>
+/// 颜色块,生成的标签为&lt;nz-color-block&gt;&lt;/nz-color-block&gt;
+/// </summary>
+[HtmlTargetElement( "util-color-block" )]
+public class ColorBlockTagHelper : AngularTagHelperBase {
+    /// <summary>
+    /// 配置
+    /// </summary>
+    private Config _config;
+    /// <summary>
+    /// nzColor, 颜色值, 默认值: #1677ff
+    /// </summary>
+    public string Color { get; set; }
+    /// <summary>
+    /// [nzColor], 颜色值, 默认值: #1677ff
+    /// </summary>
+    public string BindColor { get; set; }
+    /// <summary>
+    /// nzSize,控件尺寸, 可选值: 'default' | 'small' |  'large' , 默认值: 'default'
+    /// </summary>
+    public InputSize Size { get; set; }
+    /// <summary>
+    /// [nzSize],控件尺寸, 可选值: 'default' | 'small' |  'large' , 默认值: 'default'
+    /// </summary>
+    public string BindSize { get; set; }
+    /// <summary>
+    /// (nzOnClick),点击事件 ,类型: EventEmitter&lt;boolean>
+    /// </summary>
+    public string OnClick { get; set; }
+
+    /// <inheritdoc />
+    protected override void ProcessBefore( TagHelperContext context, TagHelperOutput output ) {
+        _config = new Config( context, output );
+    }
+
+    /// <inheritdoc />
+    protected override IRender GetRender( TagHelperContext context, TagHelperOutput output, TagHelperContent content ) {
+        _config.Content = content;
+        return new ColorBlockRender( _config );
+    }
+}