feat(ImageImageCropper): add Preview parameter (#458)

* feat: 增加 Preview 参数

* refactor: 标记 CropperShape 过期

* style: 增加样式

* chore: bump version 9.0.2

Author: ArgoZhang

src/components/BootstrapBlazor.ImageCropper/BootstrapBlazor.ImageCropper.csproj

@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>9.0.1</Version>
+    <Version>9.0.2</Version>
   </PropertyGroup>
 
   <PropertyGroup>

src/components/BootstrapBlazor.ImageCropper/ImageCropper.razor.cs

@@ -39,10 +39,11 @@ public partial class ImageCropper
     /// 获取/设置 裁剪形状（矩形/圆形）默认 <see cref="ImageCropperShape.Rectangle"/>
     /// </summary>
     [Parameter]
+    [Obsolete("已弃用，使用 ImageCropperOption.IsRound 参数代替；Deprecated, use ImageCropperOption.IsRound parameter instead")]
     public ImageCropperShape CropperShape { get; set; }
 
     private string? ClassString => CssBuilder.Default("bb-cropper")
-        .AddClass("is-round", CropperShape == ImageCropperShape.Round)
+        .AddClass("is-round", Options?.IsRound ?? false)
         .AddClassFromAttributes(AdditionalAttributes)
         .Build();
 

src/components/BootstrapBlazor.ImageCropper/ImageCropperOption.cs

@@ -210,4 +210,10 @@ public class ImageCropperOption
     /// </summary>
     [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
     public string? Radius { get; set; }
+
+    /// <summary>
+    /// 获得/设置 预览元素 Selector 
+    /// </summary>
+    [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
+    public string? Preview { get; set; }
 }

src/components/BootstrapBlazor.ImageCropper/wwwroot/cropper.bundle.css

@@ -19,3 +19,32 @@
     .bb-cropper.disabled {
         opacity: var(--bb-crop-disabled-opacity);
     }
+
+.bb-cropper-preview {
+    overflow: hidden;
+}
+
+.bb-cropper-preview-round {
+    border-radius: 50%;
+}
+
+.bb-cropper-preview-lg {
+    height: 9rem;
+    width: 16rem;
+}
+
+.bb-cropper-preview-md {
+    height: 4.5rem;
+    width: 8rem;
+}
+
+.bb-cropper-preview-sm {
+    height: 2.25rem;
+    width: 4rem;
+}
+
+.bb-cropper-preview-xs {
+    height: 1.125rem;
+    margin-right: 0;
+    width: 2rem;
+}