From 935929090143833806468460e1c7b6cf837586ac Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mladen=20Macanovi=C4=87?= Date: Thu, 20 Jun 2024 13:43:52 +0200 Subject: [PATCH] InputMask: add new MaskPlaceholder parameter (#5577) * Introduce new MaskPlaceholder parameter * Release notes --- .../Blazorise.Docs/Layouts/DocsLayout.razor | 2 +- .../Models/Snippets.generated.cs | 2 ++ .../Code/InputMaskPlaceholderExampleCode.html | 5 +++ .../InputMaskPlaceholderExample.razor | 3 ++ .../Components/InputMasks/InputMaskPage.razor | 32 +++++++++++++++---- .../News/2024-07-15-release-notes-160.razor | 8 +++++ .../Components/InputMask/InputMask.razor.cs | 7 +++- Source/Blazorise/wwwroot/inputMask.js | 6 ++-- 8 files changed, 54 insertions(+), 11 deletions(-) create mode 100644 Documentation/Blazorise.Docs/Pages/Docs/Components/InputMasks/Code/InputMaskPlaceholderExampleCode.html create mode 100644 Documentation/Blazorise.Docs/Pages/Docs/Components/InputMasks/Examples/InputMaskPlaceholderExample.razor diff --git a/Documentation/Blazorise.Docs/Layouts/DocsLayout.razor b/Documentation/Blazorise.Docs/Layouts/DocsLayout.razor index 4bfdb1d196..43d6caa362 100644 --- a/Documentation/Blazorise.Docs/Layouts/DocsLayout.razor +++ b/Documentation/Blazorise.Docs/Layouts/DocsLayout.razor @@ -116,7 +116,7 @@ Layout Link List Group - Mask + Input Mask Memo Edit Modal diff --git a/Documentation/Blazorise.Docs/Models/Snippets.generated.cs b/Documentation/Blazorise.Docs/Models/Snippets.generated.cs index 9a16824ef9..d0a74c8928 100644 --- a/Documentation/Blazorise.Docs/Models/Snippets.generated.cs +++ b/Documentation/Blazorise.Docs/Models/Snippets.generated.cs @@ -2744,6 +2744,8 @@ void OnProgressed( FileProgressedEventArgs e ) public const string BasicInputMaskExample = @""; + public const string InputMaskPlaceholderExample = @""; + public const string BasicJumbotronExample = @" Hello, world! diff --git a/Documentation/Blazorise.Docs/Pages/Docs/Components/InputMasks/Code/InputMaskPlaceholderExampleCode.html b/Documentation/Blazorise.Docs/Pages/Docs/Components/InputMasks/Code/InputMaskPlaceholderExampleCode.html new file mode 100644 index 0000000000..2c36308681 --- /dev/null +++ b/Documentation/Blazorise.Docs/Pages/Docs/Components/InputMasks/Code/InputMaskPlaceholderExampleCode.html @@ -0,0 +1,5 @@ +
+
+<InputMask Mask="99-9999999" MaskPlaceholder="X" Placeholder="Please enter a valid ID" />
+
+
diff --git a/Documentation/Blazorise.Docs/Pages/Docs/Components/InputMasks/Examples/InputMaskPlaceholderExample.razor b/Documentation/Blazorise.Docs/Pages/Docs/Components/InputMasks/Examples/InputMaskPlaceholderExample.razor new file mode 100644 index 0000000000..6e0037b32a --- /dev/null +++ b/Documentation/Blazorise.Docs/Pages/Docs/Components/InputMasks/Examples/InputMaskPlaceholderExample.razor @@ -0,0 +1,3 @@ +@namespace Blazorise.Docs.Docs.Examples + + \ No newline at end of file diff --git a/Documentation/Blazorise.Docs/Pages/Docs/Components/InputMasks/InputMaskPage.razor b/Documentation/Blazorise.Docs/Pages/Docs/Components/InputMasks/InputMaskPage.razor index c0f278e4d0..5420288dce 100644 --- a/Documentation/Blazorise.Docs/Pages/Docs/Components/InputMasks/InputMaskPage.razor +++ b/Documentation/Blazorise.Docs/Pages/Docs/Components/InputMasks/InputMaskPage.razor @@ -26,8 +26,12 @@ + + Examples + + - + To start you only need to define the Mask parameter. @@ -36,12 +40,8 @@ - - Default masking definitions - - - + Instead of masking an input element, it is also possible to use the inputmask for formatting given values. @@ -50,6 +50,20 @@ + + Other examples + + + + + You can control the placeholder that will be used for the mask. The Placeholder will be used when the mask is not defined. And the MaskPlaceholder will be used when the mask is defined for extra information to the user about the valid input format. + + + + + + + API @@ -65,6 +79,12 @@ ")"> Occurs after the value has changed. + + The mask to use for the input. + + + The placeholder that will be used for the mask. + Remove the default form field styling and preserve the correct margin and padding. diff --git a/Documentation/Blazorise.Docs/Pages/News/2024-07-15-release-notes-160.razor b/Documentation/Blazorise.Docs/Pages/News/2024-07-15-release-notes-160.razor index 73339f7fa9..888e5f0abd 100644 --- a/Documentation/Blazorise.Docs/Pages/News/2024-07-15-release-notes-160.razor +++ b/Documentation/Blazorise.Docs/Pages/News/2024-07-15-release-notes-160.razor @@ -107,6 +107,14 @@ Added a new SetLoading so you're able to control the loading state of the DataGrid. + + New MaskPlaceholder on InputMask + + + + Introduced a new MaskPlaceholder property on the InputMask component to provide additional information to the user about the valid input format. While the change is not groundbreaking, it is a small but important step towards improving the user experience. + + Disable days of week in DatePicker diff --git a/Source/Blazorise/Components/InputMask/InputMask.razor.cs b/Source/Blazorise/Components/InputMask/InputMask.razor.cs index f0c66a7010..2b1ccf73f9 100644 --- a/Source/Blazorise/Components/InputMask/InputMask.razor.cs +++ b/Source/Blazorise/Components/InputMask/InputMask.razor.cs @@ -71,7 +71,7 @@ protected override async Task OnFirstAfterRenderAsync() Alias, InputFormat, OutputFormat, - Placeholder, + MaskPlaceholder, ShowMaskOnFocus, ShowMaskOnHover, NumericInput, @@ -217,6 +217,11 @@ public Task NotifyCleared() /// [Parameter] public string Mask { get; set; } + /// + /// The placeholder that will be used for the mask. + /// + [Parameter] public string MaskPlaceholder { get; set; } + /// /// Use a regular expression as a mask. /// diff --git a/Source/Blazorise/wwwroot/inputMask.js b/Source/Blazorise/wwwroot/inputMask.js index 67e85c157e..efd6816a93 100644 --- a/Source/Blazorise/wwwroot/inputMask.js +++ b/Source/Blazorise/wwwroot/inputMask.js @@ -26,7 +26,7 @@ export function initialize(dotnetAdapter, element, elementId, options) { } : {}; const otherOptions = { - placeholder: options.placeholder || "_", + placeholder: options.maskPlaceholder || "_", showMaskOnFocus: options.showMaskOnFocus, showMaskOnHover: options.showMaskOnHover, numericInput: options.numericInput || false, @@ -44,7 +44,7 @@ export function initialize(dotnetAdapter, element, elementId, options) { ? Object.assign({}, aliasOptions, eventOptions, otherOptions) : Object.assign({}, maskOptions, regexOptions, eventOptions, otherOptions); - var inputMask = new Inputmask(finalOptions); + let inputMask = new Inputmask(finalOptions); inputMask.mask(element); @@ -59,7 +59,7 @@ export function initialize(dotnetAdapter, element, elementId, options) { } export function destroy(element, elementId) { - var instances = _instances || {}; + let instances = _instances || {}; delete instances[elementId]; }