Merge pull request #949 from Basaingeal/release/v4.0.0

Release/v4.0.0

CHANGELOG.md

@@ -1,57 +1,46 @@
-# v3.0.0
+# v4.0.0
 
 ## 🔴 Breaking Changes
 
-In this major release, no breaking changes have been made in the API surface. However, the underlying SweetAlert2 library has changed the HTML structure of the loader.
+Just a couple of releases after `sweetalert2@10` was released, they renamed the lifecycle hooks and deprecated the old names. (https://github.com/sweetalert2/sweetalert2/pull/2057)
+As a rule, this wrapper library does not include deprecated functionality.
+As a result, the old lifecycle hook names have been completely replaced with the new ones, resulting in a new major version.
 
-> For the sake of customization, the loader has been separated from the confirm button into its own DOM element (`<div class="swal2-loader"></div>`).
->
-> As a part of that breaking change, there's a new API param `loaderHtml` which allow to set custom HTML, e.g. SVG icon inside of the loader.
->
-> [sweetalert2 v10.0.0 release](https://github.com/sweetalert2/sweetalert2/releases/tag/v10.0.0).
+### Hook name changes
 
-## 🎉 New Features
-
-### The third DENY button
-
-#### Additional `SweetAlertOptions` properties
-
-- `ShowDenyButton`
-- `DenyButtonText`
-- `DenyButtonColor`
-- `DenyButtonAriaLabel`
-- `FocusDeny`
-- `CustomerClass.DenyButton`
-
-#### Additional `SweetAlertResult` and `SweetAlertQueueResult` properties
-
-- `IsDenied`
+Hooks were previously named as follows:
 
-#### Additional `SweetAlertService` methods
+| Before Hook    | After hook     |
+| -------------- | -------------- |
+| `OnBeforeOpen` | `OnOpen`       |
+|                | `OnRender`     |
+| `OnClose`      | `OnAfterClose` |
+|                | `OnDestroy`    |
 
-- `Swal.ClickDenyAsync()`
+All have been renamed according to the convention used by frameworks like UIKit or React:
 
-**NB**: There is no `Swal.GetDenyButtonAsync()` method as methods which return HTMLElements are not included in the wrapper library.
+| Before Hook | After hook  |
+| ----------- | ----------- |
+| `WillOpen`  | `DidOpen`   |
+|             | `DidRender` |
+| `WillClose` | `DidClose`  |
+|             | `DidDstroy` |
 
-### Loader HTML
-
-As part of the breaking change in `sweetalert2@10` there is a new options property to set custom HTML for the loader.
-
-#### Additional `SweetlertOptions` properties
-
-- `LoaderHtml`
+## 🎉 New Features
 
-### Icon Color
+### Additional `SweetAlertOptions` properties
 
-Introduced in [sweetalert2@10.1](https://github.com/sweetalert2/sweetalert2/releases/tag/v10.1.0), there is a new options property to set the color of the popup icon.
+- `InputLabel`
+- `CustomClass.ValidationMessage`
 
-#### Additional `SweetlertOptions` properties
+## Dependencies
 
-- `IconColor`
+- bump `sweetalert2` to `10.5.1`
+- bump `Microsoft.AspNetCore.Components` to `3.1.9`
+- bump `Microsoft.AspNetCore.Components.Web` to `3.1.9`
 
-## Dependencies
+### Webpack 5
 
-- bump `sweetalert2` to `10.1.0`
-- bump `@sweetalert2/themes` to `4.0.0`
+Webpack 5 is now used behind the scenes to create the JavaScript component of the wrapper, which uses more modern JavaScript syntax for slightly smaller file sizes.
 
-For more information, read the [sweetalert2 v10.0.0 release](https://github.com/sweetalert2/sweetalert2/releases/tag/v10.0.0).
+**NB:** *The IE11 Compat version wich contains some polyfills still uses the more traditional JS syntax.*

CurrieTechnologies.Razor.SweetAlert2.csproj

@@ -9,7 +9,7 @@
     <Description>
       A Razor class library for interacting with SweetAlert2.
       Use in Blazor Server Apps or Blazor WebAssembly Apps.
-      Currently using sweetalert2@10.1.0
+      Currently using sweetalert2@10.5.1
     </Description>
     <Copyright>Michael J. Currie</Copyright>
     <PackageLicenseExpression>MIT</PackageLicenseExpression>
@@ -19,11 +19,10 @@
     <RepositoryType>git</RepositoryType>
     <PackageTags>Blazor SweetAlert SweetAlert2 JSInterop Server Razor</PackageTags>
     <PackageReleaseNotes>
-      bump sweetalert2 to 10.1.0
-      bump @sweetalert2/themes to 4.0.0
-      The third DENY button
-      New LoaderHtml property
-      New IconColor property
+      bump sweetalert2 to 10.5.1
+      Rename lifecycle hooks
+      New InputLabel property
+      New ValidationMessage CustomClass property
     </PackageReleaseNotes>
   </PropertyGroup>
 
@@ -42,8 +41,8 @@
   </ItemGroup>
 
   <ItemGroup>
-    <PackageReference Include="Microsoft.AspNetCore.Components" Version="3.1.8" />
-    <PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="3.1.8" />
+    <PackageReference Include="Microsoft.AspNetCore.Components" Version="3.1.9" />
+    <PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="3.1.9" />
     <PackageReference Include="Microsoft.CodeAnalysis.FxCopAnalyzers" Version="3.3.0">
       <PrivateAssets>all</PrivateAssets>
     </PackageReference>

Models/SweetAlertCustomClass.cs

@@ -47,6 +47,11 @@ public class SweetAlertCustomClass
         /// </summary>
         public string Input { get; set; }
 
+        /// <summary>
+        /// Applies classnames to the `validation-message-class` field.
+        /// </summary>
+        public string ValidationMessage { get; set; }
+
         /// <summary>
         /// Applies classnames to the `actions-class` field.
         /// </summary>

Models/SweetAlertOptionPOCO.cs

@@ -114,6 +114,8 @@ internal class SweetAlertOptionPOCO
 
         public string ImageAlt { get; set; }
 
+        public string InputLabel { get; set; }
+
         public string InputPlaceholder { get; set; }
 
         public string InputValue { get; set; }
@@ -134,17 +136,17 @@ internal class SweetAlertOptionPOCO
 
         public string ProgressStepsDistance { get; set; }
 
-        public bool OnBeforeOpen { get; set; }
+        public bool WillOpen { get; set; }
 
-        public bool OnAfterClose { get; set; }
+        public bool DidClose { get; set; }
 
-        public bool OnDestroy { get; set; }
+        public bool DidDestroy { get; set; }
 
-        public bool OnOpen { get; set; }
+        public bool DidOpen { get; set; }
 
-        public bool OnClose { get; set; }
+        public bool WillClose { get; set; }
 
-        public bool OnRender { get; set; }
+        public bool DidRender { get; set; }
 
         public bool? ScrollbarPadding { get; set; }
     }

Models/SweetAlertOptions.cs

@@ -309,6 +309,11 @@ public class SweetAlertOptions
         /// </summary>
         public string ImageAlt { get; set; }
 
+        /// <summary>
+        /// Input field label.
+        /// </summary>
+        public string InputLabel { get; set; }
+
         /// <summary>
         /// Input field placeholder.
         /// </summary>
@@ -367,36 +372,37 @@ public class SweetAlertOptions
         public string ProgressStepsDistance { get; set; }
 
         /// <summary>
-        /// Function to run when modal built, but not shown yet. Provides modal DOM element as the first argument.
+        /// Popup lifecycle hook. Synchronously runs before the popup is shown on screen.
         /// </summary>
-        public SweetAlertCallback OnBeforeOpen { get; set; }
+        public SweetAlertCallback WillOpen { get; set; }
 
         /// <summary>
-        /// Function to run after popup has been disposed by user interaction (and not by another popup).
+        /// Popup lifecycle hook. Asynchronously runs after the popup has been disposed by user interaction (and not due to another popup being fired).
         /// </summary>
-        public SweetAlertCallback OnAfterClose { get; set; }
+        public SweetAlertCallback DidClose { get; set; }
 
         /// <summary>
-        /// Function to run after popup has been destroyed either by user interaction or by another popup.
+        /// Popup lifecycle hook. Synchronously runs after popup has been destroyed either by user interaction or by another popup.
+        /// <para>If you have cleanup operations that you need to reliably execute each time a popup is closed, prefer `DidDestroy` over `DidClose`</para>
         /// </summary>
-        public SweetAlertCallback OnDestroy { get; set; }
+        public SweetAlertCallback DidDestroy { get; set; }
 
         /// <summary>
-        /// Function to run when modal opens, provides modal DOM element as the first argument.
+        /// Popup lifecycle hook. Asynchronously runs after the popup has been shown on screen.
         /// </summary>
-        public SweetAlertCallback OnOpen { get; set; }
+        public SweetAlertCallback DidOpen { get; set; }
 
         /// <summary>
-        /// Function to run when modal closes, provides modal DOM element as the first argument.
+        /// Popup lifecycle hook. Synchronously runs when the popup closes by user interaction (and not due to another popup being fired).
         /// </summary>
-        public SweetAlertCallback OnClose { get; set; }
+        public SweetAlertCallback WillClose { get; set; }
 
         /// <summary>
-        /// Function to run after modal DOM has been updated.
+        /// Popup lifecycle hook. Synchronously runs after the popup DOM has been updated (ie. just before the popup is repainted on the screen).
         /// <para>Typically, this will happen after Swal.FireAsync() or Swal.UpdateAsync().</para>
-        /// <para>If you want to perform changes in the modal's DOM, that survive Swal.UpdateAsync(), onRender is a good place for that.</para>
+        /// <para>If you want to perform changes in the modal's DOM, that survive Swal.UpdateAsync(), prefer `DidRender` over `WillOpen`</para>
         /// </summary>
-        public SweetAlertCallback OnRender { get; set; }
+        public SweetAlertCallback DidRender { get; set; }
 
         /// <summary>
         /// Set to false to disable body padding adjustment when scrollbar is present.
@@ -472,6 +478,7 @@ internal SweetAlertOptionPOCO ToPOCO()
                 ImageWidth = this.ImageWidth,
                 ImageHeight = this.ImageHeight,
                 ImageAlt = this.ImageAlt,
+                InputLabel = this.InputLabel,
                 InputPlaceholder = this.InputPlaceholder,
                 InputValue = this.InputValue,
                 InputOptions = this.InputOptions,
@@ -482,12 +489,12 @@ internal SweetAlertOptionPOCO ToPOCO()
                 ProgressSteps = this.ProgressSteps,
                 CurrentProgressStep = this.CurrentProgressStep,
                 ProgressStepsDistance = this.ProgressStepsDistance,
-                OnBeforeOpen = this.OnBeforeOpen != null,
-                OnAfterClose = this.OnAfterClose != null,
-                OnDestroy = this.OnDestroy != null,
-                OnOpen = this.OnOpen != null,
-                OnClose = this.OnClose != null,
-                OnRender = this.OnRender != null,
+                WillOpen = this.WillOpen != null,
+                DidClose = this.DidClose != null,
+                DidDestroy = this.DidDestroy != null,
+                DidOpen = this.DidOpen != null,
+                WillClose = this.WillClose != null,
+                DidRender = this.DidRender != null,
                 ScrollbarPadding = this.ScrollbarPadding,
             };
         }

README.md

@@ -34,6 +34,8 @@
 
 👉 **Upgrading from v2.x to v3.x?** [Read the release notes!](https://github.com/Basaingeal/Razor.SweetAlert2/releases/tag/v3.0.0)
 
+👉 **Upgrading from v3.x to v4.x?** [Read the release notes!](https://github.com/Basaingeal/Razor.SweetAlert2/releases/tag/v4.0.0)
+
 ## This package is for both Blazor Server Apps and Blazor WebAssembly Apps. It should be used instead of [`CurrieTechnologies.Blazor.SweetAlert2`](https://github.com/Basaingeal/Blazor.SweetAlert2) which is now deprecated.
 
 ### 🙌 Includes themes from the [Official SweetAlert2 Themes project](https://github.com/sweetalert2/sweetalert2-themes) 🙌
@@ -223,7 +225,7 @@ _See [prefers-color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/@me
 
 - No methods that return an HTMLElement are included (e. g. `Swal.getContainer()`)
 - The value of a `SweetAlertResult` (`result.Value`) can only be a string (or a collection of strings if returned from a queue request). Numbers and booleans must be converted. Object must be parsed to/from JSON in your code.
-- `OnOpenAsync()`, `OnCloseAsync()`, `OnBeforeOpenAsync()`, and `OnAfterCloseAsync()` can all take asynchronous callbacks. 🎉 (none will return an HTMLElement though.)
+- `DidOpenAsync()`, `WillCloseAsync()`, `WillOpenAsync()`, and `DidCloseAsync()` can all take asynchronous callbacks. 🎉 (none will return an HTMLElement though.)
 - No support for `<optgroup>` in the select input type.
 - No async option for `InputOptions` or `InputValue`
 - Callbacks must be passed inside of objects specifically designed for the given callback property. e.g. the `InputValidator` property takes an `InputValidatorCallback` created like so:

Services/SweetAlertMixin.cs

@@ -392,6 +392,7 @@ private SweetAlertOptions Mix(SweetAlertOptions newSettings)
                 ImageWidth = newSettings.ImageWidth ?? this.storedOptions.ImageWidth,
                 ImageHeight = newSettings.ImageHeight ?? this.storedOptions.ImageHeight,
                 ImageAlt = newSettings.ImageAlt ?? this.storedOptions.ImageAlt,
+                InputLabel = newSettings.InputLabel ?? this.storedOptions.InputLabel,
                 InputPlaceholder = newSettings.InputPlaceholder ?? this.storedOptions.InputPlaceholder,
                 InputValue = newSettings.InputValue ?? this.storedOptions.InputValue,
                 InputOptions = newSettings.InputOptions ?? this.storedOptions.InputOptions,
@@ -402,12 +403,12 @@ private SweetAlertOptions Mix(SweetAlertOptions newSettings)
                 ProgressSteps = newSettings.ProgressSteps ?? this.storedOptions.ProgressSteps,
                 CurrentProgressStep = newSettings.CurrentProgressStep ?? this.storedOptions.CurrentProgressStep,
                 ProgressStepsDistance = newSettings.ProgressStepsDistance ?? this.storedOptions.ProgressStepsDistance,
-                OnBeforeOpen = newSettings.OnBeforeOpen ?? this.storedOptions.OnBeforeOpen,
-                OnAfterClose = newSettings.OnAfterClose ?? this.storedOptions.OnAfterClose,
-                OnDestroy = newSettings.OnDestroy ?? this.storedOptions.OnDestroy,
-                OnOpen = newSettings.OnOpen ?? this.storedOptions.OnOpen,
-                OnClose = newSettings.OnClose ?? this.storedOptions.OnClose,
-                OnRender = newSettings.OnRender ?? this.storedOptions.OnRender,
+                WillOpen = newSettings.WillOpen ?? this.storedOptions.WillOpen,
+                DidClose = newSettings.DidClose ?? this.storedOptions.DidClose,
+                DidDestroy = newSettings.DidDestroy ?? this.storedOptions.DidDestroy,
+                DidOpen = newSettings.DidOpen ?? this.storedOptions.DidOpen,
+                WillClose = newSettings.WillClose ?? this.storedOptions.WillClose,
+                DidRender = newSettings.DidRender ?? this.storedOptions.DidRender,
                 ScrollbarPadding = newSettings.ScrollbarPadding ?? this.storedOptions.ScrollbarPadding,
             };
         }