fix(CardUpload): not allow preview when set ShowZoomButton to false (#7715)

* CardUpload_FixeZoom

修正CardUpload组件允许上传多张图片时，当ShowZoomButton为false时，单击上传好的图片时预览不正确

* refactor: 统一标签宽度

* style: 调整样式

* refactor: 增加 is-preview 样式

* refactor: 根据 is-preview 检查是否可预览

* test: 更新单元测试

---------

Co-authored-by: Argo Zhang <argo@live.ca>

Author: Tony-ST0754

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

@@ -15,7 +15,7 @@
            Introduction="@Localizer["AvatarUploadIntro"]"
            Name="Normal">
     <section ignore>
-        <div class="row g-3">
+        <div class="row g-3" style="--bb-input-group-label-width: 186px;">
             <div class="col-12 col-sm-6">
                 <BootstrapInputGroup>
                     <BootstrapInputGroupLabel DisplayText="IsDisabled"></BootstrapInputGroupLabel>

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

@@ -15,7 +15,7 @@
            Introduction="@Localizer["ButtonUploadIntro"]"
            Name="Normal">
     <section ignore>
-        <div class="row g-3">
+        <div class="row g-3" style="--bb-input-group-label-width: 186px;">
             <div class="col-12 col-sm-4">
                 <BootstrapInputGroup>
                     <BootstrapInputGroupLabel DisplayText="IsDisabled"></BootstrapInputGroupLabel>

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

@@ -15,7 +15,7 @@
            Introduction="@Localizer["ButtonUploadIntro"]"
            Name="Normal">
     <section ignore>
-        <div class="row g-3">
+        <div class="row g-3" style="--bb-input-group-label-width: 186px;">
             <div class="col-12 col-sm-6 col-xl-3">
                 <BootstrapInputGroup>
                     <BootstrapInputGroupLabel DisplayText="IsDisabled"></BootstrapInputGroupLabel>

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

@@ -13,7 +13,7 @@
 
 <DemoBlock Title="@Localizer["DropUploadTitle"]" Introduction="@Localizer["DropUploadIntro"]" Name="Normal">
     <section ignore>
-        <div class="row g-3">
+        <div class="row g-3" style="--bb-input-group-label-width: 186px;">
             <div class="col-12 col-sm-6">
                 <BootstrapInputGroup>
                     <BootstrapInputGroupLabel DisplayText="IsDisabled"></BootstrapInputGroupLabel>

src/BootstrapBlazor/Components/Upload/CardUpload.razor.cs

@@ -18,6 +18,7 @@ public partial class CardUpload<TValue>
         .Build();
 
     private string? GetItemClassString(UploadFile item) => CssBuilder.Default(ItemClassString)
+        .AddClass("is-preview", ShowZoomButton)
         .AddClass("is-valid", item is { Uploaded: true, Code: 0 })
         .AddClass("is-invalid", item.Code != 0)
         .Build();

src/BootstrapBlazor/Components/Upload/InputUpload.razor.scss

@@ -179,8 +179,11 @@
     width: var(--bb-upload-card-width);
     height: var(--bb-upload-card-height);
     position: relative;
-    cursor: pointer;
     overflow: hidden;
+
+    &.is-preview img {
+        cursor: pointer;
+    }
 }
 
 .upload .upload-body.is-card .upload-item .upload-item-actions {

src/BootstrapBlazor/wwwroot/modules/upload.js

@@ -62,24 +62,21 @@ export function init(id) {
         const event = new Event('change', { bubbles: true })
         inputFile.dispatchEvent(event)
     })
-
     const getIndex = target => {
         let index = 0;
-        let button = target;
-        if (button.tagName === 'IMG') {
-            button = button.closest('.upload-item').querySelector('.btn-zoom');
-        }
-        if (button) {
-            const buttons = [...el.querySelectorAll('.btn-zoom')]
-            index = buttons.indexOf(button);
-        }
+        let item = target.closest('.upload-item');
+        const items = [...el.querySelectorAll('.upload-item')]
+        index = items.indexOf(item);
         return index;
     };
 
     EventHandler.on(el, 'click', '.btn-zoom, .upload-item-body-image', e => {
-        const prev = Data.get(el.getAttribute('data-bb-previewer-id'));
-        prev.viewer.updatePrevList([...el.querySelectorAll('.upload-body img')].map(v => v.src));
-        prev.viewer.show(getIndex(e.delegateTarget));
+        const zoom = e.delegateTarget.closest('.upload-item').classList.contains('is-preview');
+        if (zoom) {
+            const prev = Data.get(el.getAttribute('data-bb-previewer-id'));
+            prev.viewer.updatePrevList([...el.querySelectorAll('.upload-body img')].map(v => v.src));
+            prev.viewer.show(getIndex(e.delegateTarget));
+        }
     })
 }
 

test/UnitTest/Components/UploadCardTest.cs

@@ -39,6 +39,7 @@ public async Task CardUpload_Ok()
         cut.Contains("bb-previewer collapse active");
         cut.Contains("aria-label=\"zoom\"");
         cut.Contains("aria-label=\"delete\"");
+        cut.Contains("is-preview");
 
         cut.Render(pb =>
         {
@@ -129,6 +130,7 @@ await cut.InvokeAsync(() => input.Instance.OnChange.InvokeAsync(new InputFileCha
         });
         cut.DoesNotContain("aria-label=\"zoom\"");
         cut.DoesNotContain("aria-label=\"delete\"");
+        cut.DoesNotContain("is-preview");
     }
 
     [Fact]