From a68bfe19bcc6a837b104d8d5c836a4905ca7dbab Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Mon, 27 Jan 2025 18:39:43 +0800 Subject: [PATCH 01/22] =?UTF-8?q?refactor:=20=E6=9B=B4=E6=96=B0=E6=B3=A8?= =?UTF-8?q?=E9=87=8A?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/BootstrapBlazor/Components/Upload/AvatarUpload.razor.cs | 2 +- src/BootstrapBlazor/Components/Upload/ButtonUpload.razor.cs | 2 +- src/BootstrapBlazor/Components/Upload/InputUpload.razor.cs | 2 +- src/BootstrapBlazor/Components/Upload/SingleUploadBase.cs | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/BootstrapBlazor/Components/Upload/AvatarUpload.razor.cs b/src/BootstrapBlazor/Components/Upload/AvatarUpload.razor.cs index 50282a34327..ee2ca42c940 100644 --- a/src/BootstrapBlazor/Components/Upload/AvatarUpload.razor.cs +++ b/src/BootstrapBlazor/Components/Upload/AvatarUpload.razor.cs @@ -8,7 +8,7 @@ namespace BootstrapBlazor.Components; /// -/// +/// 头像上传组件 /// public partial class AvatarUpload { diff --git a/src/BootstrapBlazor/Components/Upload/ButtonUpload.razor.cs b/src/BootstrapBlazor/Components/Upload/ButtonUpload.razor.cs index 44e9f3eb093..6e5ea7e1610 100644 --- a/src/BootstrapBlazor/Components/Upload/ButtonUpload.razor.cs +++ b/src/BootstrapBlazor/Components/Upload/ButtonUpload.razor.cs @@ -8,7 +8,7 @@ namespace BootstrapBlazor.Components; /// -/// +/// 按钮上传组件 /// public partial class ButtonUpload { diff --git a/src/BootstrapBlazor/Components/Upload/InputUpload.razor.cs b/src/BootstrapBlazor/Components/Upload/InputUpload.razor.cs index e2ac77027aa..bcecdf40a2a 100644 --- a/src/BootstrapBlazor/Components/Upload/InputUpload.razor.cs +++ b/src/BootstrapBlazor/Components/Upload/InputUpload.razor.cs @@ -9,7 +9,7 @@ namespace BootstrapBlazor.Components; /// -/// +/// InputUpload 组件 /// public partial class InputUpload { diff --git a/src/BootstrapBlazor/Components/Upload/SingleUploadBase.cs b/src/BootstrapBlazor/Components/Upload/SingleUploadBase.cs index 88620c634f0..bcfafe3c0b5 100644 --- a/src/BootstrapBlazor/Components/Upload/SingleUploadBase.cs +++ b/src/BootstrapBlazor/Components/Upload/SingleUploadBase.cs @@ -6,7 +6,7 @@ namespace BootstrapBlazor.Components; /// -/// +/// SingleUploadBase 基类 /// /// public abstract class SingleUploadBase : MultipleUploadBase From 6ed3a1fcc85c80f5f288ae40ec3185d648863957 Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Mon, 27 Jan 2025 20:22:53 +0800 Subject: [PATCH 02/22] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=20DropUpload?= =?UTF-8?q?=20=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Components/Upload/DropUpload.razor | 15 +++++++++++++++ .../Components/Upload/DropUpload.razor.cs | 16 ++++++++++++++++ .../Components/Upload/UploadBase.razor.scss | 7 +++++++ 3 files changed, 38 insertions(+) create mode 100644 src/BootstrapBlazor/Components/Upload/DropUpload.razor create mode 100644 src/BootstrapBlazor/Components/Upload/DropUpload.razor.cs diff --git a/src/BootstrapBlazor/Components/Upload/DropUpload.razor b/src/BootstrapBlazor/Components/Upload/DropUpload.razor new file mode 100644 index 00000000000..ceb3867455d --- /dev/null +++ b/src/BootstrapBlazor/Components/Upload/DropUpload.razor @@ -0,0 +1,15 @@ +@namespace BootstrapBlazor.Components +@typeparam TValue +@inherits SingleUploadBase + +@if (IsShowLabel) +{ + +} +
+ +
+ Drop file here or click to upload +
+ +
diff --git a/src/BootstrapBlazor/Components/Upload/DropUpload.razor.cs b/src/BootstrapBlazor/Components/Upload/DropUpload.razor.cs new file mode 100644 index 00000000000..9f56214950a --- /dev/null +++ b/src/BootstrapBlazor/Components/Upload/DropUpload.razor.cs @@ -0,0 +1,16 @@ +// Licensed to the .NET Foundation under one or more agreements. +// The .NET Foundation licenses this file to you under the Apache 2.0 License +// See the LICENSE file in the project root for more information. +// Maintainer: Argo Zhang(argo@live.ca) Website: https://www.blazor.zone + +namespace BootstrapBlazor.Components; + +/// +/// DropUpload 组件 +/// +public partial class DropUpload +{ + private string? DropUploadClassString => CssBuilder.Default(ClassString) + .AddClassFromAttributes(AdditionalAttributes) + .Build(); +} diff --git a/src/BootstrapBlazor/Components/Upload/UploadBase.razor.scss b/src/BootstrapBlazor/Components/Upload/UploadBase.razor.scss index 57ccbae2381..ab6eb128b99 100644 --- a/src/BootstrapBlazor/Components/Upload/UploadBase.razor.scss +++ b/src/BootstrapBlazor/Components/Upload/UploadBase.razor.scss @@ -296,3 +296,10 @@ .btn-group .upload .upload-body { display: none; } + +.upload { + .is-drag { + border: 2px dashed var(--bs-primary); + border-radius: var(--bs-border-radius); + } +} From fa4f5b4b82d01ed3ae08d6ddc4134302f0edf885 Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Mon, 27 Jan 2025 20:23:03 +0800 Subject: [PATCH 03/22] =?UTF-8?q?doc:=20=E5=A2=9E=E5=8A=A0=E7=A4=BA?= =?UTF-8?q?=E4=BE=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/BootstrapBlazor.Server/Components/Samples/Uploads.razor | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/BootstrapBlazor.Server/Components/Samples/Uploads.razor b/src/BootstrapBlazor.Server/Components/Samples/Uploads.razor index f52c7ed8629..9a58790783a 100644 --- a/src/BootstrapBlazor.Server/Components/Samples/Uploads.razor +++ b/src/BootstrapBlazor.Server/Components/Samples/Uploads.razor @@ -12,6 +12,10 @@
builder.Services.Configure<HubOptions>(option => option.MaximumReceiveMessageSize = null);
+ + + + From b971062012aca36f7435aee6067fa6ba6fd20774 Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Mon, 27 Jan 2025 20:45:17 +0800 Subject: [PATCH 04/22] =?UTF-8?q?style:=20=E6=9B=B4=E6=96=B0=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Components/Upload/UploadBase.razor.scss | 23 ++++++++++++++++++- .../wwwroot/scss/theme/bootstrapblazor.scss | 1 + 2 files changed, 23 insertions(+), 1 deletion(-) diff --git a/src/BootstrapBlazor/Components/Upload/UploadBase.razor.scss b/src/BootstrapBlazor/Components/Upload/UploadBase.razor.scss index ab6eb128b99..ffa820d2ebe 100644 --- a/src/BootstrapBlazor/Components/Upload/UploadBase.razor.scss +++ b/src/BootstrapBlazor/Components/Upload/UploadBase.razor.scss @@ -10,6 +10,7 @@ --bb-upload-card-padding: #{$bb-upload-card-padding}; --bb-upload-card-margin: #{$bb-upload-card-margin}; --bb-upload-card-item-width: #{$bb-upload-card-item-width}; + --bb-upload-drop-height: #{$bb-upload-drop-height} } .upload .upload-body { @@ -298,8 +299,28 @@ } .upload { - .is-drag { + &.is-drag { border: 2px dashed var(--bs-primary); border-radius: var(--bs-border-radius); + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + height: var(--bb-upload-drop-height); + cursor: pointer; + + .upload-drag-icon > i { + font-size: 3em; + color: var(--bs-secondary); + } + + .upload-drag-text { + margin-top: 1rem; + } + + em { + color: var(--bs-primary); + font-style: normal; + } } } diff --git a/src/BootstrapBlazor/wwwroot/scss/theme/bootstrapblazor.scss b/src/BootstrapBlazor/wwwroot/scss/theme/bootstrapblazor.scss index 8504ca0e722..25dace4f872 100644 --- a/src/BootstrapBlazor/wwwroot/scss/theme/bootstrapblazor.scss +++ b/src/BootstrapBlazor/wwwroot/scss/theme/bootstrapblazor.scss @@ -690,6 +690,7 @@ $bb-upload-card-shadow: 0 0 10px 0 rgba(0,0,0,.2); $bb-upload-card-padding: 1rem; $bb-upload-card-margin: 0 1rem 1rem 0; $bb-upload-card-item-width: 168px; +$bb-upload-drop-height: 140px; // ValidateForm $bb-form-control-padding: 0.375rem 0.75rem; From 4713f90e004203b19b05322dec148fc7b91a08a7 Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Mon, 27 Jan 2025 20:45:29 +0800 Subject: [PATCH 05/22] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=20IconTemplate?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/BootstrapBlazor/Components/Upload/DropUpload.razor | 8 +++++--- src/BootstrapBlazor/Components/Upload/DropUpload.razor.cs | 7 +++++++ 2 files changed, 12 insertions(+), 3 deletions(-) diff --git a/src/BootstrapBlazor/Components/Upload/DropUpload.razor b/src/BootstrapBlazor/Components/Upload/DropUpload.razor index ceb3867455d..8d77ba9689d 100644 --- a/src/BootstrapBlazor/Components/Upload/DropUpload.razor +++ b/src/BootstrapBlazor/Components/Upload/DropUpload.razor @@ -7,9 +7,11 @@ }
- -
- Drop file here or click to upload +
+ +
+
+ Drop file here or click to upload
diff --git a/src/BootstrapBlazor/Components/Upload/DropUpload.razor.cs b/src/BootstrapBlazor/Components/Upload/DropUpload.razor.cs index 9f56214950a..5d8048208b2 100644 --- a/src/BootstrapBlazor/Components/Upload/DropUpload.razor.cs +++ b/src/BootstrapBlazor/Components/Upload/DropUpload.razor.cs @@ -10,7 +10,14 @@ namespace BootstrapBlazor.Components; /// public partial class DropUpload { + /// + /// + /// + [Parameter] + public RenderFragment? IconTemplate { get; set; } + private string? DropUploadClassString => CssBuilder.Default(ClassString) + .AddClass("is-drag") .AddClassFromAttributes(AdditionalAttributes) .Build(); } From 37160f8ca669d853c162e95324ca7928fe886afd Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Mon, 27 Jan 2025 20:55:32 +0800 Subject: [PATCH 06/22] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=20BodyTemplate?= =?UTF-8?q?=20=E5=8F=82=E6=95=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Components/Upload/DropUpload.razor | 19 +++++++++++++------ .../Components/Upload/DropUpload.razor.cs | 2 +- 2 files changed, 14 insertions(+), 7 deletions(-) diff --git a/src/BootstrapBlazor/Components/Upload/DropUpload.razor b/src/BootstrapBlazor/Components/Upload/DropUpload.razor index 8d77ba9689d..cf86a8d36ac 100644 --- a/src/BootstrapBlazor/Components/Upload/DropUpload.razor +++ b/src/BootstrapBlazor/Components/Upload/DropUpload.razor @@ -7,11 +7,18 @@ }
-
- -
-
- Drop file here or click to upload -
+ @if (BodyTemplate != null) + { + @BodyTemplate + } + else + { +
+ +
+
+ Drop file here or click to upload +
+ }
diff --git a/src/BootstrapBlazor/Components/Upload/DropUpload.razor.cs b/src/BootstrapBlazor/Components/Upload/DropUpload.razor.cs index 5d8048208b2..0f28f3a46f5 100644 --- a/src/BootstrapBlazor/Components/Upload/DropUpload.razor.cs +++ b/src/BootstrapBlazor/Components/Upload/DropUpload.razor.cs @@ -14,7 +14,7 @@ public partial class DropUpload /// /// [Parameter] - public RenderFragment? IconTemplate { get; set; } + public RenderFragment? BodyTemplate { get; set; } private string? DropUploadClassString => CssBuilder.Default(ClassString) .AddClass("is-drag") From 367098c4a8809b658da3e98bea8decfb2ead88ef Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Mon, 27 Jan 2025 20:55:54 +0800 Subject: [PATCH 07/22] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E7=82=B9?= =?UTF-8?q?=E5=87=BB=E4=B8=8A=E4=BC=A0=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/BootstrapBlazor/wwwroot/modules/upload.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/BootstrapBlazor/wwwroot/modules/upload.js b/src/BootstrapBlazor/wwwroot/modules/upload.js index 97e0ddaa52b..b7b732e3b62 100644 --- a/src/BootstrapBlazor/wwwroot/modules/upload.js +++ b/src/BootstrapBlazor/wwwroot/modules/upload.js @@ -15,6 +15,12 @@ export function init(id) { inputFile.click() }) + if (el.classList.contains('is-drag')) { + EventHandler.on(el, 'click', () => { + inputFile.click() + }) + } + EventHandler.on(document, "dragleave", preventHandler) EventHandler.on(document, 'drop', preventHandler) EventHandler.on(document, 'dragenter', preventHandler) From 6d16b3a2017c9a1f856e2107108fdd371d9ca1f0 Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Mon, 27 Jan 2025 22:46:53 +0800 Subject: [PATCH 08/22] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=20Template=20?= =?UTF-8?q?=E5=8F=82=E6=95=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Components/Upload/DropUpload.razor | 39 ++++++++++++------ .../Components/Upload/DropUpload.razor.cs | 40 ++++++++++++++++++- 2 files changed, 65 insertions(+), 14 deletions(-) diff --git a/src/BootstrapBlazor/Components/Upload/DropUpload.razor b/src/BootstrapBlazor/Components/Upload/DropUpload.razor index cf86a8d36ac..c7e0dd9b48b 100644 --- a/src/BootstrapBlazor/Components/Upload/DropUpload.razor +++ b/src/BootstrapBlazor/Components/Upload/DropUpload.razor @@ -4,21 +4,36 @@ @if (IsShowLabel) { - + }
- @if (BodyTemplate != null) +
+ @if (BodyTemplate != null) + { + @BodyTemplate + } + else + { +
+ +
+
+ Drop file here or click to upload +
+ } +
+ @if (ShowFooter) { - @BodyTemplate - } - else - { -
- -
-
- Drop file here or click to upload + } - +
diff --git a/src/BootstrapBlazor/Components/Upload/DropUpload.razor.cs b/src/BootstrapBlazor/Components/Upload/DropUpload.razor.cs index 0f28f3a46f5..0a2e579c9b2 100644 --- a/src/BootstrapBlazor/Components/Upload/DropUpload.razor.cs +++ b/src/BootstrapBlazor/Components/Upload/DropUpload.razor.cs @@ -11,13 +11,49 @@ namespace BootstrapBlazor.Components; public partial class DropUpload { /// - /// + /// 获得/设置 Body 模板 默认 null /// [Parameter] public RenderFragment? BodyTemplate { get; set; } + /// + ///获得/设置 图标模板 默认 null + /// + public RenderFragment? IconTemplate { get; set; } + + /// + /// 获得/设置 文字模板 默认 null + /// + public RenderFragment? TextTemplate { get; set; } + + /// + /// 获得/设置 是否显示 Footer 默认 false 不显示 + /// + public bool ShowFooter { get; set; } + + /// + /// 获得/设置 Footer 字符串信息 默认 null 未设置 + /// + public RenderFragment? FooterTemplate { get; set; } + + /// + /// + /// + public string? FooterString { get; set; } + private string? DropUploadClassString => CssBuilder.Default(ClassString) - .AddClass("is-drag") + .AddClass("is-drop") .AddClassFromAttributes(AdditionalAttributes) .Build(); + + /// + /// + /// + protected override void OnParametersSet() + { + base.OnParametersSet(); + + FooterString ??= "just a test footer string"; + ShowFooter = true; + } } From 9d6bd048cec5520bcb0a1800ade2a4bc3d45ef6b Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Mon, 27 Jan 2025 22:47:02 +0800 Subject: [PATCH 09/22] =?UTF-8?q?style:=20=E5=BE=AE=E8=B0=83=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Components/Upload/UploadBase.razor.scss | 17 ++++++++++++----- .../wwwroot/scss/theme/bootstrapblazor.scss | 2 ++ 2 files changed, 14 insertions(+), 5 deletions(-) diff --git a/src/BootstrapBlazor/Components/Upload/UploadBase.razor.scss b/src/BootstrapBlazor/Components/Upload/UploadBase.razor.scss index ffa820d2ebe..bea2d98110b 100644 --- a/src/BootstrapBlazor/Components/Upload/UploadBase.razor.scss +++ b/src/BootstrapBlazor/Components/Upload/UploadBase.razor.scss @@ -10,7 +10,9 @@ --bb-upload-card-padding: #{$bb-upload-card-padding}; --bb-upload-card-margin: #{$bb-upload-card-margin}; --bb-upload-card-item-width: #{$bb-upload-card-item-width}; - --bb-upload-drop-height: #{$bb-upload-drop-height} + --bb-upload-drop-height: #{$bb-upload-drop-height}; + --bb-upload-drop-footer-font-size: #{$bb-upload-drop-footer-font-size}; + --bb-upload-drop-footer-margin-top: #{$bb-upload-drop-footer-margin-top}; } .upload .upload-body { @@ -298,8 +300,8 @@ display: none; } -.upload { - &.is-drag { +.upload.is-drop { + .upload-drop-body { border: 2px dashed var(--bs-primary); border-radius: var(--bs-border-radius); display: flex; @@ -309,12 +311,12 @@ height: var(--bb-upload-drop-height); cursor: pointer; - .upload-drag-icon > i { + .upload-drop-icon > i { font-size: 3em; color: var(--bs-secondary); } - .upload-drag-text { + .upload-drop-text { margin-top: 1rem; } @@ -323,4 +325,9 @@ font-style: normal; } } + + .upload-drop-footer { + font-size: var(--bb-upload-drop-footer-font-size); + margin-top: var(--bb-upload-drop-footer-margin-top); + } } diff --git a/src/BootstrapBlazor/wwwroot/scss/theme/bootstrapblazor.scss b/src/BootstrapBlazor/wwwroot/scss/theme/bootstrapblazor.scss index 25dace4f872..b5ec33b3968 100644 --- a/src/BootstrapBlazor/wwwroot/scss/theme/bootstrapblazor.scss +++ b/src/BootstrapBlazor/wwwroot/scss/theme/bootstrapblazor.scss @@ -691,6 +691,8 @@ $bb-upload-card-padding: 1rem; $bb-upload-card-margin: 0 1rem 1rem 0; $bb-upload-card-item-width: 168px; $bb-upload-drop-height: 140px; +$bb-upload-drop-footer-font-size: 12px; +$bb-upload-drop-footer-margin-top: .25rem; // ValidateForm $bb-form-control-padding: 0.375rem 0.75rem; From 12cd3c063e61d1ed71565b0ccb1c827e7f9981df Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Mon, 27 Jan 2025 22:47:13 +0800 Subject: [PATCH 10/22] =?UTF-8?q?refactor:=20=E8=B0=83=E6=95=B4=E8=84=9A?= =?UTF-8?q?=E6=9C=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/BootstrapBlazor/wwwroot/modules/upload.js | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/src/BootstrapBlazor/wwwroot/modules/upload.js b/src/BootstrapBlazor/wwwroot/modules/upload.js index b7b732e3b62..006eb250a6b 100644 --- a/src/BootstrapBlazor/wwwroot/modules/upload.js +++ b/src/BootstrapBlazor/wwwroot/modules/upload.js @@ -15,11 +15,9 @@ export function init(id) { inputFile.click() }) - if (el.classList.contains('is-drag')) { - EventHandler.on(el, 'click', () => { - inputFile.click() - }) - } + EventHandler.on(el, 'click', '.upload-drop-body', () => { + inputFile.click() + }) EventHandler.on(document, "dragleave", preventHandler) EventHandler.on(document, 'drop', preventHandler) From 2875d794f1558f9e7100b7d9cb6a779e9828abbc Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Tue, 28 Jan 2025 12:49:13 +0800 Subject: [PATCH 11/22] =?UTF-8?q?refactor:=20=E7=B2=BE=E7=AE=80=E4=BB=A3?= =?UTF-8?q?=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/BootstrapBlazor/Utils/Utility.cs | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/BootstrapBlazor/Utils/Utility.cs b/src/BootstrapBlazor/Utils/Utility.cs index 5e5a2962763..9f7af8fc289 100644 --- a/src/BootstrapBlazor/Utils/Utility.cs +++ b/src/BootstrapBlazor/Utils/Utility.cs @@ -398,7 +398,7 @@ public static void CreateDisplayByFieldType(this RenderTreeBuilder builder, IEdi { var fieldType = item.PropertyType; var fieldName = item.GetFieldName(); - var displayName = item.GetDisplayName() ?? GetDisplayName(model, fieldName); + var displayName = item.GetDisplayName(); var fieldValue = GenerateValue(model, fieldName); var type = (Nullable.GetUnderlyingType(fieldType) ?? fieldType); if (type == typeof(bool) || fieldValue?.GetType() == typeof(bool)) @@ -474,7 +474,7 @@ public static void CreateComponentByFieldType(this RenderTreeBuilder builder, Co { var fieldType = item.PropertyType; var fieldName = item.GetFieldName(); - var displayName = item.GetDisplayName() ?? GetDisplayName(model, fieldName); + var displayName = item.GetDisplayName(); var fieldValue = GenerateValue(model, fieldName); var fieldValueChanged = GenerateValueChanged(component, model, fieldName, fieldType); From 5b789cfabc5645d93dea3aa815a0c8cd5a39403f Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Tue, 28 Jan 2025 17:14:52 +0800 Subject: [PATCH 12/22] =?UTF-8?q?doc:=20=E7=B2=BE=E7=AE=80=E6=8F=90?= =?UTF-8?q?=E7=A4=BA=E4=BF=A1=E6=81=AF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/BootstrapBlazor.Server/Components/Layout/HomeLayout.razor | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/BootstrapBlazor.Server/Components/Layout/HomeLayout.razor b/src/BootstrapBlazor.Server/Components/Layout/HomeLayout.razor index 38c5420f1fc..d38bedbe44c 100644 --- a/src/BootstrapBlazor.Server/Components/Layout/HomeLayout.razor +++ b/src/BootstrapBlazor.Server/Components/Layout/HomeLayout.razor @@ -60,7 +60,7 @@
} diff --git a/src/BootstrapBlazor/Components/Upload/DropUpload.razor.cs b/src/BootstrapBlazor/Components/Upload/DropUpload.razor.cs index 0a2e579c9b2..56e636b85d4 100644 --- a/src/BootstrapBlazor/Components/Upload/DropUpload.razor.cs +++ b/src/BootstrapBlazor/Components/Upload/DropUpload.razor.cs @@ -3,15 +3,18 @@ // See the LICENSE file in the project root for more information. // Maintainer: Argo Zhang(argo@live.ca) Website: https://www.blazor.zone +using Microsoft.Extensions.Localization; + namespace BootstrapBlazor.Components; /// /// DropUpload 组件 /// -public partial class DropUpload +public partial class DropUpload { /// /// 获得/设置 Body 模板 默认 null + /// 设置 BodyTemplate 后 不生效 /// [Parameter] public RenderFragment? BodyTemplate { get; set; } @@ -19,27 +22,54 @@ public partial class DropUpload /// ///获得/设置 图标模板 默认 null /// + [Parameter] public RenderFragment? IconTemplate { get; set; } + /// + /// 获得/设置 图标 默认 null + /// + [Parameter] + public string? UploadIcon { get; set; } + /// /// 获得/设置 文字模板 默认 null /// + [Parameter] public RenderFragment? TextTemplate { get; set; } + /// + /// 获得/设置 上传文字 默认 null + /// + [Parameter] + [NotNull] + public string? UploadText { get; set; } + /// /// 获得/设置 是否显示 Footer 默认 false 不显示 /// + [Parameter] public bool ShowFooter { get; set; } /// - /// 获得/设置 Footer 字符串信息 默认 null 未设置 + /// 获得/设置 Footer 字符串模板 默认 null 未设置 /// + [Parameter] public RenderFragment? FooterTemplate { get; set; } /// - /// + /// 获得/设置 Footer 字符串信息 默认 null 未设置 /// - public string? FooterString { get; set; } + [Parameter] + [NotNull] + public string? FooterText { get; set; } + + [Inject] + [NotNull] + private IIconTheme? IconTheme { get; set; } + + [Inject] + [NotNull] + private IStringLocalizer>? Localizer { get; set; } private string? DropUploadClassString => CssBuilder.Default(ClassString) .AddClass("is-drop") @@ -53,7 +83,8 @@ protected override void OnParametersSet() { base.OnParametersSet(); - FooterString ??= "just a test footer string"; - ShowFooter = true; + UploadIcon ??= IconTheme.GetIconByKey(ComponentIcons.DropUploadIcon); + UploadText ??= Localizer["DropUploadText"]; + FooterText ??= Localizer["DropFooterText"]; } } diff --git a/src/BootstrapBlazor/Components/Upload/UploadBase.razor.scss b/src/BootstrapBlazor/Components/Upload/UploadBase.razor.scss index bea2d98110b..fb503221823 100644 --- a/src/BootstrapBlazor/Components/Upload/UploadBase.razor.scss +++ b/src/BootstrapBlazor/Components/Upload/UploadBase.razor.scss @@ -302,7 +302,7 @@ .upload.is-drop { .upload-drop-body { - border: 2px dashed var(--bs-primary); + border: 1px dashed var(--bs-primary); border-radius: var(--bs-border-radius); display: flex; flex-direction: column; diff --git a/src/BootstrapBlazor/Enums/ComponentIcons.cs b/src/BootstrapBlazor/Enums/ComponentIcons.cs index 266c4d731d1..2ba9373ddc0 100644 --- a/src/BootstrapBlazor/Enums/ComponentIcons.cs +++ b/src/BootstrapBlazor/Enums/ComponentIcons.cs @@ -140,6 +140,11 @@ public enum ComponentIcons /// UploadCancelIcon, + /// + /// Upload 组件 UploadIcon 图标 + /// + DropUploadIcon, + /// /// Cascader 组件 Icon 属性图标 /// diff --git a/src/BootstrapBlazor/Locales/en.json b/src/BootstrapBlazor/Locales/en.json index 5976515b104..22bea601cb1 100644 --- a/src/BootstrapBlazor/Locales/en.json +++ b/src/BootstrapBlazor/Locales/en.json @@ -312,7 +312,9 @@ "DeleteButtonText": "Delete", "BrowserButtonText": "Browser", "FileExtensions": "File must have one of the following extensions: {0}", - "FileSizeValidation": "File size must less than {0}" + "FileSizeValidation": "File size must less than {0}", + "DropUploadText": "Drop files here or click to upload", + "FooterText": "" }, "BootstrapBlazor.Components.Handwritten": { "SaveButtonText": "Save", diff --git a/src/BootstrapBlazor/Locales/zh.json b/src/BootstrapBlazor/Locales/zh.json index 9c38171a91a..4d4d7f5bd96 100644 --- a/src/BootstrapBlazor/Locales/zh.json +++ b/src/BootstrapBlazor/Locales/zh.json @@ -312,7 +312,9 @@ "DeleteButtonText": "删除", "BrowserButtonText": "浏览", "FileExtensions": "文件扩展名必须为以下几种格式: {0}", - "FileSizeValidation": "文件太大,文件限制大小为 {0}" + "FileSizeValidation": "文件太大,文件限制大小为 {0}", + "DropUploadText": "拖拽文件到此处上传", + "FooterText": "" }, "BootstrapBlazor.Components.Handwritten": { "SaveButtonText": "保存", diff --git a/src/BootstrapBlazor/Options/FontAwesomeIcons.cs b/src/BootstrapBlazor/Options/FontAwesomeIcons.cs index c11591a9705..cd8ffadb184 100644 --- a/src/BootstrapBlazor/Options/FontAwesomeIcons.cs +++ b/src/BootstrapBlazor/Options/FontAwesomeIcons.cs @@ -199,6 +199,7 @@ internal static class FontAwesomeIcons { ComponentIcons.CardUploadDownloadIcon, "fa-solid fa-download" }, { ComponentIcons.CardUploadZoomIcon, "fa-solid fa-magnifying-glass-plus" }, { ComponentIcons.UploadCancelIcon, "fa-solid fa-ban" }, + { ComponentIcons.DropUploadIcon, "fa-solid fa-cloud-arrow-up" }, { ComponentIcons.FileIconExcel, "fa-regular fa-file-excel" }, { ComponentIcons.FileIconDocx, "fa-regular fa-file-word" }, From c495a73c782e51f39f1edce365e00eba214f77ed Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Tue, 28 Jan 2025 21:28:30 +0800 Subject: [PATCH 18/22] =?UTF-8?q?doc:=20=E6=9B=B4=E6=96=B0=E7=A4=BA?= =?UTF-8?q?=E4=BE=8B=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/BootstrapBlazor.Server/Components/Samples/Uploads.razor | 2 +- src/BootstrapBlazor.Server/Locales/en-US.json | 3 ++- src/BootstrapBlazor.Server/Locales/zh-CN.json | 3 ++- 3 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/BootstrapBlazor.Server/Components/Samples/Uploads.razor b/src/BootstrapBlazor.Server/Components/Samples/Uploads.razor index 9a58790783a..ca0f36e4df0 100644 --- a/src/BootstrapBlazor.Server/Components/Samples/Uploads.razor +++ b/src/BootstrapBlazor.Server/Components/Samples/Uploads.razor @@ -13,7 +13,7 @@
builder.Services.Configure<HubOptions>(option => option.MaximumReceiveMessageSize = null);
- + Date: Tue, 28 Jan 2025 23:12:34 +0800 Subject: [PATCH 19/22] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E4=B8=8A?= =?UTF-8?q?=E4=BC=A0=E5=88=97=E8=A1=A8=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Components/Upload/ButtonUploadBase.cs | 8 ------- .../Components/Upload/DropUpload.razor | 15 ++++++++++++ .../Components/Upload/DropUpload.razor.cs | 24 +++++++++++++++++++ .../Components/Upload/SingleUploadBase.cs | 12 ++++++++++ .../Components/Upload/UploadBase.razor.scss | 11 +++++++++ 5 files changed, 62 insertions(+), 8 deletions(-) diff --git a/src/BootstrapBlazor/Components/Upload/ButtonUploadBase.cs b/src/BootstrapBlazor/Components/Upload/ButtonUploadBase.cs index 2bb04f766a2..323adfed31c 100644 --- a/src/BootstrapBlazor/Components/Upload/ButtonUploadBase.cs +++ b/src/BootstrapBlazor/Components/Upload/ButtonUploadBase.cs @@ -220,14 +220,6 @@ protected override async Task OnFileChange(InputFileChangeEventArgs args) await base.OnFileChange(args); } - private void Update(UploadFile file) - { - if (GetShowProgress(file)) - { - StateHasChanged(); - } - } - /// /// /// diff --git a/src/BootstrapBlazor/Components/Upload/DropUpload.razor b/src/BootstrapBlazor/Components/Upload/DropUpload.razor index a685d250519..e78bb0ee8f3 100644 --- a/src/BootstrapBlazor/Components/Upload/DropUpload.razor +++ b/src/BootstrapBlazor/Components/Upload/DropUpload.razor @@ -48,5 +48,20 @@ }
} +
    + @foreach (var item in GetUploadFiles()) + { + @if (GetShowProgress(item)) + { +
  • +
    + @item.GetFileName() + (@item.Size.ToFileSizeString()) +
    + +
  • + } + } +
diff --git a/src/BootstrapBlazor/Components/Upload/DropUpload.razor.cs b/src/BootstrapBlazor/Components/Upload/DropUpload.razor.cs index 56e636b85d4..f508f531d5b 100644 --- a/src/BootstrapBlazor/Components/Upload/DropUpload.razor.cs +++ b/src/BootstrapBlazor/Components/Upload/DropUpload.razor.cs @@ -3,6 +3,7 @@ // See the LICENSE file in the project root for more information. // Maintainer: Argo Zhang(argo@live.ca) Website: https://www.blazor.zone +using Microsoft.AspNetCore.Components.Forms; using Microsoft.Extensions.Localization; namespace BootstrapBlazor.Components; @@ -87,4 +88,27 @@ protected override void OnParametersSet() UploadText ??= Localizer["DropUploadText"]; FooterText ??= Localizer["DropFooterText"]; } + + /// + /// + /// + /// + /// + protected override async Task OnFileChange(InputFileChangeEventArgs args) + { + var file = new UploadFile() + { + OriginFileName = args.File.Name, + Size = args.File.Size, + File = args.File, + Uploaded = false, + UpdateCallback = Update + }; + UploadFiles.Add(file); + if (OnChange != null) + { + await OnChange(file); + } + file.Uploaded = true; + } } diff --git a/src/BootstrapBlazor/Components/Upload/SingleUploadBase.cs b/src/BootstrapBlazor/Components/Upload/SingleUploadBase.cs index bcfafe3c0b5..4cfac7b9513 100644 --- a/src/BootstrapBlazor/Components/Upload/SingleUploadBase.cs +++ b/src/BootstrapBlazor/Components/Upload/SingleUploadBase.cs @@ -102,4 +102,16 @@ void RemoveItem() } return ret; } + + /// + /// 更新上传进度方法 + /// + /// + protected void Update(UploadFile file) + { + if (GetShowProgress(file)) + { + StateHasChanged(); + } + } } diff --git a/src/BootstrapBlazor/Components/Upload/UploadBase.razor.scss b/src/BootstrapBlazor/Components/Upload/UploadBase.razor.scss index fb503221823..da18bd474f7 100644 --- a/src/BootstrapBlazor/Components/Upload/UploadBase.razor.scss +++ b/src/BootstrapBlazor/Components/Upload/UploadBase.razor.scss @@ -330,4 +330,15 @@ font-size: var(--bb-upload-drop-footer-font-size); margin-top: var(--bb-upload-drop-footer-margin-top); } + + .upload-drop-list { + margin: 10px 0 0; + padding: 0; + list-style: none; + position: relative; + + .upload-drop-process { + position: relative; + } + } } From c3c7fb9c604105549c84b2c9eecd201ea1a08fa3 Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Tue, 28 Jan 2025 23:12:41 +0800 Subject: [PATCH 20/22] =?UTF-8?q?doc:=20=E6=9B=B4=E6=96=B0=E7=A4=BA?= =?UTF-8?q?=E4=BE=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Components/Samples/Uploads.razor | 8 ++++---- src/BootstrapBlazor.Server/Locales/en-US.json | 4 +++- src/BootstrapBlazor.Server/Locales/zh-CN.json | 4 +++- 3 files changed, 10 insertions(+), 6 deletions(-) diff --git a/src/BootstrapBlazor.Server/Components/Samples/Uploads.razor b/src/BootstrapBlazor.Server/Components/Samples/Uploads.razor index ca0f36e4df0..17dc5ab1615 100644 --- a/src/BootstrapBlazor.Server/Components/Samples/Uploads.razor +++ b/src/BootstrapBlazor.Server/Components/Samples/Uploads.razor @@ -12,10 +12,6 @@
builder.Services.Configure<HubOptions>(option => option.MaximumReceiveMessageSize = null);
- - - - @@ -189,6 +185,10 @@ + + + + diff --git a/src/BootstrapBlazor.Server/Locales/en-US.json b/src/BootstrapBlazor.Server/Locales/en-US.json index c6206c2bde1..37fd4e0b31f 100644 --- a/src/BootstrapBlazor.Server/Locales/en-US.json +++ b/src/BootstrapBlazor.Server/Locales/en-US.json @@ -3442,7 +3442,9 @@ "UploadsSaveFileMsg": "The current mode is WebAssembly, call Webapi mode to save files to the server side or database", "UploadsRemoveMsg": "The removal was successful", "UploadsIconTemplate": "The template of file icon", - "DropUploadFooterText": "file size less than 500Kb" + "DropUploadTitle": "Drop to upload", + "DropUploadIntro": "Drag and drop files into the specified area to upload", + "DropUploadFooterText": "file size less than 5Mb" }, "BootstrapBlazor.Server.Components.Samples.ValidateForms": { "ChangeButtonText": "Change", diff --git a/src/BootstrapBlazor.Server/Locales/zh-CN.json b/src/BootstrapBlazor.Server/Locales/zh-CN.json index a4c67f95365..fa8004aed67 100644 --- a/src/BootstrapBlazor.Server/Locales/zh-CN.json +++ b/src/BootstrapBlazor.Server/Locales/zh-CN.json @@ -3442,7 +3442,9 @@ "UploadsSaveFileMsg": "当前模式为 WebAssembly 模式,请调用 Webapi 模式保存文件到服务器端或数据库中", "UploadsRemoveMsg": "成功移除", "UploadsIconTemplate": "文件图标模板", - "DropUploadFooterText": "文件大小不超过 500K" + "DropUploadTitle": "拖拽上传", + "DropUploadIntro": "将文件拖拽到特定区域以进行上传", + "DropUploadFooterText": "文件大小不超过 5Mb" }, "BootstrapBlazor.Server.Components.Samples.ValidateForms": { "ChangeButtonText": "更改组件", From 2fb59c56394150736665a54b050dcdf1647a2940 Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Wed, 29 Jan 2025 12:16:02 +0800 Subject: [PATCH 21/22] =?UTF-8?q?doc:=20=E6=9B=B4=E6=96=B0=E8=B5=84?= =?UTF-8?q?=E6=BA=90=E6=96=87=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/BootstrapBlazor/Locales/en.json | 2 +- src/BootstrapBlazor/Locales/zh.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/BootstrapBlazor/Locales/en.json b/src/BootstrapBlazor/Locales/en.json index 22bea601cb1..12d0d4c01a2 100644 --- a/src/BootstrapBlazor/Locales/en.json +++ b/src/BootstrapBlazor/Locales/en.json @@ -314,7 +314,7 @@ "FileExtensions": "File must have one of the following extensions: {0}", "FileSizeValidation": "File size must less than {0}", "DropUploadText": "Drop files here or click to upload", - "FooterText": "" + "DropFooterText": "" }, "BootstrapBlazor.Components.Handwritten": { "SaveButtonText": "Save", diff --git a/src/BootstrapBlazor/Locales/zh.json b/src/BootstrapBlazor/Locales/zh.json index 4d4d7f5bd96..be7cc4b2cb4 100644 --- a/src/BootstrapBlazor/Locales/zh.json +++ b/src/BootstrapBlazor/Locales/zh.json @@ -314,7 +314,7 @@ "FileExtensions": "文件扩展名必须为以下几种格式: {0}", "FileSizeValidation": "文件太大,文件限制大小为 {0}", "DropUploadText": "拖拽文件到此处上传", - "FooterText": "" + "DropFooterText": "" }, "BootstrapBlazor.Components.Handwritten": { "SaveButtonText": "保存", From d247c665845d99057bfac487c88f8a60b10e71c3 Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Wed, 29 Jan 2025 12:16:11 +0800 Subject: [PATCH 22/22] =?UTF-8?q?test:=20=E6=9B=B4=E6=96=B0=E5=8D=95?= =?UTF-8?q?=E5=85=83=E6=B5=8B=E8=AF=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- test/UnitTest/Components/UploadTest.cs | 66 ++++++++++++++++++++++++++ 1 file changed, 66 insertions(+) diff --git a/test/UnitTest/Components/UploadTest.cs b/test/UnitTest/Components/UploadTest.cs index a81ccc37146..d96f2481ffe 100644 --- a/test/UnitTest/Components/UploadTest.cs +++ b/test/UnitTest/Components/UploadTest.cs @@ -1031,6 +1031,72 @@ public void Capture_Ok() cut.Contains("capture=\"camera\""); } + [Fact] + public void DropUpload_BodyTemplate_Ok() + { + var cut = Context.RenderComponent(pb => + { + pb.Add(a => a.BodyTemplate, b => b.AddContent(0, "drop-upload-body-template")); + }); + cut.MarkupMatches("
drop-upload-body-template
    "); + } + + [Fact] + public void DropUpload_IconTemplate_Ok() + { + var cut = Context.RenderComponent(pb => + { + pb.Add(a => a.IconTemplate, b => b.AddContent(0, "drop-upload-icon-template")); + }); + cut.Contains("
    drop-upload-icon-template
    "); + } + + [Fact] + public void DropUpload_TextTemplate_Ok() + { + var cut = Context.RenderComponent(pb => + { + pb.Add(a => a.TextTemplate, b => b.AddContent(0, "drop-upload-text-template")); + }); + cut.Contains("
    drop-upload-text-template
    "); + } + + [Fact] + public void DropUpload_Footer_Ok() + { + var cut = Context.RenderComponent(pb => + { + pb.Add(a => a.ShowFooter, true); + }); + cut.Contains("
    "); + + cut.SetParametersAndRender(pb => + { + pb.Add(a => a.FooterTemplate, b => b.AddContent(0, "drop-upload-footer-text")); + }); + cut.Contains("
    drop-upload-footer-text
    "); + } + + [Fact] + public async Task DropUpload_OnChanged_Ok() + { + var cut = Context.RenderComponent(pb => + { + pb.Add(a => a.ShowLabel, true); + pb.Add(a => a.ShowProgress, true); + pb.Add(a => a.OnChange, async files => + { + await files.SaveToFileAsync("1.text"); + }); + }); + + var input = cut.FindComponent(); + await cut.InvokeAsync(() => input.Instance.OnChange.InvokeAsync(new InputFileChangeEventArgs(new List() + { + new() + }))); + } + private class Person { [Required]