From 8b86b31c30c620c7c24eb40972d22240d5093f03 Mon Sep 17 00:00:00 2001 From: Nils Tonagel Date: Sun, 29 Dec 2024 19:02:06 +0100 Subject: [PATCH 1/7] feat(components): Add basic textarea component --- .../Common/Navigation/NavigationStore.cs | 2 + .../LumexUI.Docs.Client.csproj | 4 + .../Textarea/Examples/Controlled.razor | 19 +++++ .../Textarea/Examples/Disabled.razor | 4 + .../Textarea/Examples/Readonly.razor | 3 + .../Components/Textarea/Examples/Usage.razor | 4 + .../Textarea/PreviewCodes/Controlled.razor | 5 ++ .../Textarea/PreviewCodes/Disabled.razor | 5 ++ .../Textarea/PreviewCodes/Readonly.razor | 5 ++ .../Textarea/PreviewCodes/Usage.razor | 5 ++ .../Pages/Components/Textarea/Textarea.razor | 63 +++++++++++++++ .../Components/Textarea/LumexTextarea.razor | 16 ++++ .../Textarea/LumexTextarea.razor.cs | 71 +++++++++++++++++ src/LumexUI/Styles/Textarea.cs | 51 ++++++++++++ .../Components/Textarea/TextareaTests.razor | 77 +++++++++++++++++++ 15 files changed, 334 insertions(+) create mode 100644 docs/LumexUI.Docs.Client/Pages/Components/Textarea/Examples/Controlled.razor create mode 100644 docs/LumexUI.Docs.Client/Pages/Components/Textarea/Examples/Disabled.razor create mode 100644 docs/LumexUI.Docs.Client/Pages/Components/Textarea/Examples/Readonly.razor create mode 100644 docs/LumexUI.Docs.Client/Pages/Components/Textarea/Examples/Usage.razor create mode 100644 docs/LumexUI.Docs.Client/Pages/Components/Textarea/PreviewCodes/Controlled.razor create mode 100644 docs/LumexUI.Docs.Client/Pages/Components/Textarea/PreviewCodes/Disabled.razor create mode 100644 docs/LumexUI.Docs.Client/Pages/Components/Textarea/PreviewCodes/Readonly.razor create mode 100644 docs/LumexUI.Docs.Client/Pages/Components/Textarea/PreviewCodes/Usage.razor create mode 100644 docs/LumexUI.Docs.Client/Pages/Components/Textarea/Textarea.razor create mode 100644 src/LumexUI/Components/Textarea/LumexTextarea.razor create mode 100644 src/LumexUI/Components/Textarea/LumexTextarea.razor.cs create mode 100644 src/LumexUI/Styles/Textarea.cs create mode 100644 tests/LumexUI.Tests/Components/Textarea/TextareaTests.razor diff --git a/docs/LumexUI.Docs.Client/Common/Navigation/NavigationStore.cs b/docs/LumexUI.Docs.Client/Common/Navigation/NavigationStore.cs index 22047e54..7b8fccd2 100644 --- a/docs/LumexUI.Docs.Client/Common/Navigation/NavigationStore.cs +++ b/docs/LumexUI.Docs.Client/Common/Navigation/NavigationStore.cs @@ -39,6 +39,7 @@ public class NavigationStore .Add( new( nameof( LumexRadioGroup), ComponentStatus.New ) ) .Add( new( nameof( LumexSelect ), ComponentStatus.New ) ) .Add( new( nameof( LumexSwitch ) ) ) + .Add( new( nameof( LumexTextarea ), ComponentStatus.New ) ) .Add( new( nameof( LumexTextbox ) ) ); private static NavigationCategory ComponentsApiCategory => @@ -78,6 +79,7 @@ public class NavigationStore .Add( new( nameof( LumexSelect ) ) ) .Add( new( nameof( LumexSelectItem ) ) ) .Add( new( nameof( LumexSwitch ) ) ) + .Add( new( nameof( LumexTextarea ) ) ) .Add( new( nameof( LumexTextbox ) ) ) .Add( new( nameof( LumexThemeProvider ) ) ); diff --git a/docs/LumexUI.Docs.Client/LumexUI.Docs.Client.csproj b/docs/LumexUI.Docs.Client/LumexUI.Docs.Client.csproj index 9fde0c3f..4dd29be3 100644 --- a/docs/LumexUI.Docs.Client/LumexUI.Docs.Client.csproj +++ b/docs/LumexUI.Docs.Client/LumexUI.Docs.Client.csproj @@ -28,4 +28,8 @@ + + + + diff --git a/docs/LumexUI.Docs.Client/Pages/Components/Textarea/Examples/Controlled.razor b/docs/LumexUI.Docs.Client/Pages/Components/Textarea/Examples/Controlled.razor new file mode 100644 index 00000000..55963d67 --- /dev/null +++ b/docs/LumexUI.Docs.Client/Pages/Components/Textarea/Examples/Controlled.razor @@ -0,0 +1,19 @@ +
+ +
+ Changed Value: + @_newValue +
+
+ +@code { + + private string _value = string.Empty; + private string _newValue = string.Empty; + + private void OnValueChanged( string value ) + { + _newValue = value; + StateHasChanged(); + } +} \ No newline at end of file diff --git a/docs/LumexUI.Docs.Client/Pages/Components/Textarea/Examples/Disabled.razor b/docs/LumexUI.Docs.Client/Pages/Components/Textarea/Examples/Disabled.razor new file mode 100644 index 00000000..74e7f064 --- /dev/null +++ b/docs/LumexUI.Docs.Client/Pages/Components/Textarea/Examples/Disabled.razor @@ -0,0 +1,4 @@ +
+ + +
diff --git a/docs/LumexUI.Docs.Client/Pages/Components/Textarea/Examples/Readonly.razor b/docs/LumexUI.Docs.Client/Pages/Components/Textarea/Examples/Readonly.razor new file mode 100644 index 00000000..cb8de312 --- /dev/null +++ b/docs/LumexUI.Docs.Client/Pages/Components/Textarea/Examples/Readonly.razor @@ -0,0 +1,3 @@ +
+ +
diff --git a/docs/LumexUI.Docs.Client/Pages/Components/Textarea/Examples/Usage.razor b/docs/LumexUI.Docs.Client/Pages/Components/Textarea/Examples/Usage.razor new file mode 100644 index 00000000..dc30ce0d --- /dev/null +++ b/docs/LumexUI.Docs.Client/Pages/Components/Textarea/Examples/Usage.razor @@ -0,0 +1,4 @@ +
+ + +
diff --git a/docs/LumexUI.Docs.Client/Pages/Components/Textarea/PreviewCodes/Controlled.razor b/docs/LumexUI.Docs.Client/Pages/Components/Textarea/PreviewCodes/Controlled.razor new file mode 100644 index 00000000..55315023 --- /dev/null +++ b/docs/LumexUI.Docs.Client/Pages/Components/Textarea/PreviewCodes/Controlled.razor @@ -0,0 +1,5 @@ +@rendermode InteractiveWebAssembly + + + + diff --git a/docs/LumexUI.Docs.Client/Pages/Components/Textarea/PreviewCodes/Disabled.razor b/docs/LumexUI.Docs.Client/Pages/Components/Textarea/PreviewCodes/Disabled.razor new file mode 100644 index 00000000..dd1d150d --- /dev/null +++ b/docs/LumexUI.Docs.Client/Pages/Components/Textarea/PreviewCodes/Disabled.razor @@ -0,0 +1,5 @@ +@rendermode InteractiveWebAssembly + + + + diff --git a/docs/LumexUI.Docs.Client/Pages/Components/Textarea/PreviewCodes/Readonly.razor b/docs/LumexUI.Docs.Client/Pages/Components/Textarea/PreviewCodes/Readonly.razor new file mode 100644 index 00000000..89239c5c --- /dev/null +++ b/docs/LumexUI.Docs.Client/Pages/Components/Textarea/PreviewCodes/Readonly.razor @@ -0,0 +1,5 @@ +@rendermode InteractiveWebAssembly + + + + diff --git a/docs/LumexUI.Docs.Client/Pages/Components/Textarea/PreviewCodes/Usage.razor b/docs/LumexUI.Docs.Client/Pages/Components/Textarea/PreviewCodes/Usage.razor new file mode 100644 index 00000000..6b3edb39 --- /dev/null +++ b/docs/LumexUI.Docs.Client/Pages/Components/Textarea/PreviewCodes/Usage.razor @@ -0,0 +1,5 @@ +@rendermode InteractiveWebAssembly + + + + diff --git a/docs/LumexUI.Docs.Client/Pages/Components/Textarea/Textarea.razor b/docs/LumexUI.Docs.Client/Pages/Components/Textarea/Textarea.razor new file mode 100644 index 00000000..d65dadff --- /dev/null +++ b/docs/LumexUI.Docs.Client/Pages/Components/Textarea/Textarea.razor @@ -0,0 +1,63 @@ +@page "/docs/components/textarea" +@layout DocsContentLayout + +@using LumexUI.Docs.Client.Pages.Components.Textarea.PreviewCodes + + +

The textarea component provides a simple way to input and edit multiline text data.

+ + + +

+ You can disable a textarea to prevent user interaction. + A disabled textarea is faded and does not respond to user clicks. +

+ + + + + +

+ You can make a textareas value read only to prevent Changes. +

+ + + + + +

+ It is possible to get an event after changing the value. If you set the Intermediate + flag, the event will be called on every input. Otherwise the event will be called after + leaving the textarea. +

+ + + + + +@code { + [CascadingParameter] private DocsContentLayout Layout { get; set; } = default!; + + private readonly Heading[] _headings = + [ + new("Usage", [ + new("Disabled"), + new("Readonly"), + new("Controlled"), + ]), + new("Custom Styles"), + new("API") + ]; + + protected override void OnInitialized() + { + Layout.Initialize( + title: "Textarea", + category: "Components", + description: "Textarea allows users to input multiline text data.", + headings: _headings, + linksProps: new ComponentLinksProps( "Textarea", isServer: false ) + ); + } + +} \ No newline at end of file diff --git a/src/LumexUI/Components/Textarea/LumexTextarea.razor b/src/LumexUI/Components/Textarea/LumexTextarea.razor new file mode 100644 index 00000000..dee7c396 --- /dev/null +++ b/src/LumexUI/Components/Textarea/LumexTextarea.razor @@ -0,0 +1,16 @@ +@namespace LumexUI +@inherits LumexComponentBase + + diff --git a/src/LumexUI/Components/Textarea/LumexTextarea.razor.cs b/src/LumexUI/Components/Textarea/LumexTextarea.razor.cs new file mode 100644 index 00000000..82e35a40 --- /dev/null +++ b/src/LumexUI/Components/Textarea/LumexTextarea.razor.cs @@ -0,0 +1,71 @@ +using LumexUI.Common; +using LumexUI.Styles; + +using Microsoft.AspNetCore.Components; + +namespace LumexUI; + +public partial class LumexTextarea : LumexComponentBase +{ + /// + /// Gets or sets a value indicating whether the textarea is disabled. + /// + [Parameter] public bool Disabled { get; set; } + + /// + /// Gets or sets a value indicating whether the textareas value is readonly. + /// + [Parameter] public bool Readonly { get; set; } + + /// + /// Gets or sets a value indicating whether the textareas value is required. + /// + [Parameter] public bool Required { get; set; } + + /// + /// Gets or sets a value indicating wether the ValueChanged event will be fired on input or change. + /// + [Parameter] public InputBehavior Behavior { get; set; } = InputBehavior.OnChange; + + /// + /// Gets or sets a value indicating whether the textarea has full width. + /// + [Parameter] public bool FullWidth { get; set; } + + /// + /// Gets or sets the text value. + /// + [Parameter] public string? Value { get; set; } + + /// + /// Gets or sets the placeholder to show if the value is empty. + /// + [Parameter] public string? Placeholder { get; set; } + + /// + /// Gets or sets Value changed event. + /// + [Parameter] public Action? ValueChanged { get; set; } + + /// + /// Get the merged style of this instance. + /// + private protected override string? RootClass => + TwMerge.Merge( Textarea.GetStyles( this ) ); + + /// + /// Initializes a new instance of the . + /// + public LumexTextarea() + { + As = "textarea"; + } + + /// + /// Event wrapper function. + /// + private void OnValueChanged() + { + ValueChanged?.Invoke( Value ); + } +} \ No newline at end of file diff --git a/src/LumexUI/Styles/Textarea.cs b/src/LumexUI/Styles/Textarea.cs new file mode 100644 index 00000000..2e8c0544 --- /dev/null +++ b/src/LumexUI/Styles/Textarea.cs @@ -0,0 +1,51 @@ +// Copyright (c) LumexUI 2024 +// LumexUI licenses this file to you under the MIT license +// See the license here https://github.com/LumexUI/lumexui/blob/main/LICENSE + +using LumexUI.Utilities; + +namespace LumexUI.Styles; + +internal class Textarea +{ + private readonly static string _base = ElementClass.Empty() + .Add( "flex" ) + .Add( "min-h-[60px]" ) + .Add( "rounded-medium" ) + .Add( "border" ) + .Add( "border-input" ) + .Add( "bg-default-100" ) + .Add( "px-3" ) + .Add( "py-2" ) + .Add( "text-sm" ) + .Add( "shadow-sm" ) + .Add( "text-default-600" ) + .Add( "placeholder:text-muted-foreground" ) + .ToString(); + + private readonly static string _focus = ElementClass.Empty() + .Add( "focus-visible:outline-none" ) + .Add( "focus-visible:ring-0" ) + .ToString(); + + private readonly static string _disabled = ElementClass.Empty() + .Add( "opacity-disabled" ) + .Add( "opacity-50" ) + .Add( "cursor-not-allowed" ) + .Add( "pointer-events-none" ) + .ToString(); + + private readonly static string _fullWidth = ElementClass.Empty() + .Add( "w-full" ) + .ToString(); + + public static string GetStyles( LumexTextarea textarea ) + { + return ElementClass.Empty() + .Add( _base ) + .Add( _focus ) + .Add( _disabled, when: textarea.Disabled ) + .Add( _fullWidth, when: textarea.FullWidth ) + .ToString(); + } +} \ No newline at end of file diff --git a/tests/LumexUI.Tests/Components/Textarea/TextareaTests.razor b/tests/LumexUI.Tests/Components/Textarea/TextareaTests.razor new file mode 100644 index 00000000..378ca05f --- /dev/null +++ b/tests/LumexUI.Tests/Components/Textarea/TextareaTests.razor @@ -0,0 +1,77 @@ +@namespace LumexUI.Tests.Components +@inherits TestContext +@using LumexUI.Common +@using TailwindMerge +@using Microsoft.Extensions.DependencyInjection + +@code { + public TextareaTests() + { + Services.AddSingleton(); + var module = JSInterop.SetupModule( "./_content/LumexUI/js/components/input.js" ); + module.Setup( "input.getValidationMessage", _ => true ); + } + + [Fact] + public void ShouldRenderCorrectly() + { + var action = () => Render(@); + + action.Should().NotThrow(); + } + + [Fact] + public void ShouldRenderWithPlaceholder() + { + var cut = Render(@); + + var input = cut.Find( "textarea" ); + + input.HasAttribute( "placeholder" ).Should().BeTrue(); + input.GetAttribute( "placeholder" ).Should().Be( "Test" ); + } + + [Fact] + public void ShouldRenderWithPlaceholderButShowsValue() + { + var cut = Render(@); + + var input = cut.Find( "textarea" ); + + input.HasAttribute( "placeholder" ).Should().BeTrue(); + input.GetAttribute( "placeholder" ).Should().Be( "Test" ); + input.HasAttribute( "value" ).Should().BeTrue(); + input.GetAttribute( "value" ).Should().Be( "Hello World!" ); + } + + [Fact] + public void ShouldRenderReadonly() + { + var cut = Render(@); + + var input = cut.Find( "textarea" ); + + input.HasAttribute( "readonly" ).Should().BeTrue(); + } + + [Fact] + public void ShouldRenderDisabled() + { + var cut = Render(@); + + var input = cut.Find( "textarea" ); + + input.HasAttribute( "disabled" ).Should().BeTrue(); + } + + [Fact] + public void ShouldChangeValueOnInput() + { + var cut = Render( @); + + var input = cut.Find( "textarea" ); + + input.Input( "test 2" ); + cut.Instance.Value.Should().Be( "test 2" ); + } +} From 81d6baf0d1cd41c43848a37fe1e69298c40f95cb Mon Sep 17 00:00:00 2001 From: Nils Tonagel Date: Sun, 29 Dec 2024 19:20:52 +0100 Subject: [PATCH 2/7] fix(components): Remove shadow from base textarea component --- src/LumexUI/Styles/Textarea.cs | 1 - 1 file changed, 1 deletion(-) diff --git a/src/LumexUI/Styles/Textarea.cs b/src/LumexUI/Styles/Textarea.cs index 2e8c0544..d581c90f 100644 --- a/src/LumexUI/Styles/Textarea.cs +++ b/src/LumexUI/Styles/Textarea.cs @@ -18,7 +18,6 @@ internal class Textarea .Add( "px-3" ) .Add( "py-2" ) .Add( "text-sm" ) - .Add( "shadow-sm" ) .Add( "text-default-600" ) .Add( "placeholder:text-muted-foreground" ) .ToString(); From bdc240de060f62edd98b12640c0509b97920d7f8 Mon Sep 17 00:00:00 2001 From: Nils Tonagel Date: Mon, 30 Dec 2024 09:46:49 +0100 Subject: [PATCH 3/7] fix(codereview): Fix naming to TextArea + ReadOnly --- .../Common/Navigation/NavigationStore.cs | 4 ++-- docs/LumexUI.Docs.Client/LumexUI.Docs.Client.csproj | 2 +- .../{Textarea => TextArea}/Examples/Controlled.razor | 2 +- .../Components/TextArea/Examples/Disabled.razor | 4 ++++ .../Examples/ReadOnly.razor} | 2 +- .../Pages/Components/TextArea/Examples/Usage.razor | 4 ++++ .../TextArea/PreviewCodes/Controlled.razor | 5 +++++ .../Components/TextArea/PreviewCodes/Disabled.razor | 5 +++++ .../Components/TextArea/PreviewCodes/ReadOnly.razor | 5 +++++ .../Components/TextArea/PreviewCodes/Usage.razor | 5 +++++ .../Textarea.razor => TextArea/TextArea.razor} | 12 ++++++------ .../Components/Textarea/Examples/Disabled.razor | 4 ---- .../Pages/Components/Textarea/Examples/Usage.razor | 4 ---- .../Textarea/PreviewCodes/Controlled.razor | 5 ----- .../Components/Textarea/PreviewCodes/Disabled.razor | 5 ----- .../Components/Textarea/PreviewCodes/Readonly.razor | 5 ----- .../Components/Textarea/PreviewCodes/Usage.razor | 5 ----- .../LumexTextArea.razor} | 2 +- .../LumexTextArea.razor.cs} | 8 ++++---- src/LumexUI/Styles/Textarea.cs | 2 +- .../Components/Textarea/TextareaTests.razor | 12 ++++++------ 21 files changed, 51 insertions(+), 51 deletions(-) rename docs/LumexUI.Docs.Client/Pages/Components/{Textarea => TextArea}/Examples/Controlled.razor (86%) create mode 100644 docs/LumexUI.Docs.Client/Pages/Components/TextArea/Examples/Disabled.razor rename docs/LumexUI.Docs.Client/Pages/Components/{Textarea/Examples/Readonly.razor => TextArea/Examples/ReadOnly.razor} (55%) create mode 100644 docs/LumexUI.Docs.Client/Pages/Components/TextArea/Examples/Usage.razor create mode 100644 docs/LumexUI.Docs.Client/Pages/Components/TextArea/PreviewCodes/Controlled.razor create mode 100644 docs/LumexUI.Docs.Client/Pages/Components/TextArea/PreviewCodes/Disabled.razor create mode 100644 docs/LumexUI.Docs.Client/Pages/Components/TextArea/PreviewCodes/ReadOnly.razor create mode 100644 docs/LumexUI.Docs.Client/Pages/Components/TextArea/PreviewCodes/Usage.razor rename docs/LumexUI.Docs.Client/Pages/Components/{Textarea/Textarea.razor => TextArea/TextArea.razor} (78%) delete mode 100644 docs/LumexUI.Docs.Client/Pages/Components/Textarea/Examples/Disabled.razor delete mode 100644 docs/LumexUI.Docs.Client/Pages/Components/Textarea/Examples/Usage.razor delete mode 100644 docs/LumexUI.Docs.Client/Pages/Components/Textarea/PreviewCodes/Controlled.razor delete mode 100644 docs/LumexUI.Docs.Client/Pages/Components/Textarea/PreviewCodes/Disabled.razor delete mode 100644 docs/LumexUI.Docs.Client/Pages/Components/Textarea/PreviewCodes/Readonly.razor delete mode 100644 docs/LumexUI.Docs.Client/Pages/Components/Textarea/PreviewCodes/Usage.razor rename src/LumexUI/Components/{Textarea/LumexTextarea.razor => TextArea/LumexTextArea.razor} (91%) rename src/LumexUI/Components/{Textarea/LumexTextarea.razor.cs => TextArea/LumexTextArea.razor.cs} (86%) diff --git a/docs/LumexUI.Docs.Client/Common/Navigation/NavigationStore.cs b/docs/LumexUI.Docs.Client/Common/Navigation/NavigationStore.cs index 7b8fccd2..10fae974 100644 --- a/docs/LumexUI.Docs.Client/Common/Navigation/NavigationStore.cs +++ b/docs/LumexUI.Docs.Client/Common/Navigation/NavigationStore.cs @@ -39,7 +39,7 @@ public class NavigationStore .Add( new( nameof( LumexRadioGroup), ComponentStatus.New ) ) .Add( new( nameof( LumexSelect ), ComponentStatus.New ) ) .Add( new( nameof( LumexSwitch ) ) ) - .Add( new( nameof( LumexTextarea ), ComponentStatus.New ) ) + .Add( new( nameof( LumexTextArea ), ComponentStatus.Preview ) ) .Add( new( nameof( LumexTextbox ) ) ); private static NavigationCategory ComponentsApiCategory => @@ -79,7 +79,7 @@ public class NavigationStore .Add( new( nameof( LumexSelect ) ) ) .Add( new( nameof( LumexSelectItem ) ) ) .Add( new( nameof( LumexSwitch ) ) ) - .Add( new( nameof( LumexTextarea ) ) ) + .Add( new( nameof( LumexTextArea ) ) ) .Add( new( nameof( LumexTextbox ) ) ) .Add( new( nameof( LumexThemeProvider ) ) ); diff --git a/docs/LumexUI.Docs.Client/LumexUI.Docs.Client.csproj b/docs/LumexUI.Docs.Client/LumexUI.Docs.Client.csproj index 4dd29be3..e0db9319 100644 --- a/docs/LumexUI.Docs.Client/LumexUI.Docs.Client.csproj +++ b/docs/LumexUI.Docs.Client/LumexUI.Docs.Client.csproj @@ -29,7 +29,7 @@ - + diff --git a/docs/LumexUI.Docs.Client/Pages/Components/Textarea/Examples/Controlled.razor b/docs/LumexUI.Docs.Client/Pages/Components/TextArea/Examples/Controlled.razor similarity index 86% rename from docs/LumexUI.Docs.Client/Pages/Components/Textarea/Examples/Controlled.razor rename to docs/LumexUI.Docs.Client/Pages/Components/TextArea/Examples/Controlled.razor index 55963d67..960c40b5 100644 --- a/docs/LumexUI.Docs.Client/Pages/Components/Textarea/Examples/Controlled.razor +++ b/docs/LumexUI.Docs.Client/Pages/Components/TextArea/Examples/Controlled.razor @@ -1,5 +1,5 @@ 
- +
Changed Value: @_newValue diff --git a/docs/LumexUI.Docs.Client/Pages/Components/TextArea/Examples/Disabled.razor b/docs/LumexUI.Docs.Client/Pages/Components/TextArea/Examples/Disabled.razor new file mode 100644 index 00000000..83cba2a7 --- /dev/null +++ b/docs/LumexUI.Docs.Client/Pages/Components/TextArea/Examples/Disabled.razor @@ -0,0 +1,4 @@ +
+ + +
diff --git a/docs/LumexUI.Docs.Client/Pages/Components/Textarea/Examples/Readonly.razor b/docs/LumexUI.Docs.Client/Pages/Components/TextArea/Examples/ReadOnly.razor similarity index 55% rename from docs/LumexUI.Docs.Client/Pages/Components/Textarea/Examples/Readonly.razor rename to docs/LumexUI.Docs.Client/Pages/Components/TextArea/Examples/ReadOnly.razor index cb8de312..d8c657ef 100644 --- a/docs/LumexUI.Docs.Client/Pages/Components/Textarea/Examples/Readonly.razor +++ b/docs/LumexUI.Docs.Client/Pages/Components/TextArea/Examples/ReadOnly.razor @@ -1,3 +1,3 @@ 
- +
diff --git a/docs/LumexUI.Docs.Client/Pages/Components/TextArea/Examples/Usage.razor b/docs/LumexUI.Docs.Client/Pages/Components/TextArea/Examples/Usage.razor new file mode 100644 index 00000000..53f03e99 --- /dev/null +++ b/docs/LumexUI.Docs.Client/Pages/Components/TextArea/Examples/Usage.razor @@ -0,0 +1,4 @@ +
+ + +
diff --git a/docs/LumexUI.Docs.Client/Pages/Components/TextArea/PreviewCodes/Controlled.razor b/docs/LumexUI.Docs.Client/Pages/Components/TextArea/PreviewCodes/Controlled.razor new file mode 100644 index 00000000..41ed000a --- /dev/null +++ b/docs/LumexUI.Docs.Client/Pages/Components/TextArea/PreviewCodes/Controlled.razor @@ -0,0 +1,5 @@ +@rendermode InteractiveWebAssembly + + + + diff --git a/docs/LumexUI.Docs.Client/Pages/Components/TextArea/PreviewCodes/Disabled.razor b/docs/LumexUI.Docs.Client/Pages/Components/TextArea/PreviewCodes/Disabled.razor new file mode 100644 index 00000000..6d55c34c --- /dev/null +++ b/docs/LumexUI.Docs.Client/Pages/Components/TextArea/PreviewCodes/Disabled.razor @@ -0,0 +1,5 @@ +@rendermode InteractiveWebAssembly + + + + diff --git a/docs/LumexUI.Docs.Client/Pages/Components/TextArea/PreviewCodes/ReadOnly.razor b/docs/LumexUI.Docs.Client/Pages/Components/TextArea/PreviewCodes/ReadOnly.razor new file mode 100644 index 00000000..8fc9ae50 --- /dev/null +++ b/docs/LumexUI.Docs.Client/Pages/Components/TextArea/PreviewCodes/ReadOnly.razor @@ -0,0 +1,5 @@ +@rendermode InteractiveWebAssembly + + + + diff --git a/docs/LumexUI.Docs.Client/Pages/Components/TextArea/PreviewCodes/Usage.razor b/docs/LumexUI.Docs.Client/Pages/Components/TextArea/PreviewCodes/Usage.razor new file mode 100644 index 00000000..e80122fd --- /dev/null +++ b/docs/LumexUI.Docs.Client/Pages/Components/TextArea/PreviewCodes/Usage.razor @@ -0,0 +1,5 @@ +@rendermode InteractiveWebAssembly + + + + diff --git a/docs/LumexUI.Docs.Client/Pages/Components/Textarea/Textarea.razor b/docs/LumexUI.Docs.Client/Pages/Components/TextArea/TextArea.razor similarity index 78% rename from docs/LumexUI.Docs.Client/Pages/Components/Textarea/Textarea.razor rename to docs/LumexUI.Docs.Client/Pages/Components/TextArea/TextArea.razor index d65dadff..2792e807 100644 --- a/docs/LumexUI.Docs.Client/Pages/Components/Textarea/Textarea.razor +++ b/docs/LumexUI.Docs.Client/Pages/Components/TextArea/TextArea.razor @@ -1,7 +1,7 @@ -@page "/docs/components/textarea" +@page "/docs/components/text-area" @layout DocsContentLayout -@using LumexUI.Docs.Client.Pages.Components.Textarea.PreviewCodes +@using LumexUI.Docs.Client.Pages.Components.TextArea.PreviewCodes

The textarea component provides a simple way to input and edit multiline text data.

@@ -21,7 +21,7 @@ You can make a textareas value read only to prevent Changes.

- + @@ -52,11 +52,11 @@ protected override void OnInitialized() { Layout.Initialize( - title: "Textarea", + title: "TextArea", category: "Components", - description: "Textarea allows users to input multiline text data.", + description: "TextArea allows users to input multiline text data.", headings: _headings, - linksProps: new ComponentLinksProps( "Textarea", isServer: false ) + linksProps: new ComponentLinksProps( "TextArea", isServer: false ) ); } diff --git a/docs/LumexUI.Docs.Client/Pages/Components/Textarea/Examples/Disabled.razor b/docs/LumexUI.Docs.Client/Pages/Components/Textarea/Examples/Disabled.razor deleted file mode 100644 index 74e7f064..00000000 --- a/docs/LumexUI.Docs.Client/Pages/Components/Textarea/Examples/Disabled.razor +++ /dev/null @@ -1,4 +0,0 @@ -
- - -
diff --git a/docs/LumexUI.Docs.Client/Pages/Components/Textarea/Examples/Usage.razor b/docs/LumexUI.Docs.Client/Pages/Components/Textarea/Examples/Usage.razor deleted file mode 100644 index dc30ce0d..00000000 --- a/docs/LumexUI.Docs.Client/Pages/Components/Textarea/Examples/Usage.razor +++ /dev/null @@ -1,4 +0,0 @@ -
- - -
diff --git a/docs/LumexUI.Docs.Client/Pages/Components/Textarea/PreviewCodes/Controlled.razor b/docs/LumexUI.Docs.Client/Pages/Components/Textarea/PreviewCodes/Controlled.razor deleted file mode 100644 index 55315023..00000000 --- a/docs/LumexUI.Docs.Client/Pages/Components/Textarea/PreviewCodes/Controlled.razor +++ /dev/null @@ -1,5 +0,0 @@ -@rendermode InteractiveWebAssembly - - - - diff --git a/docs/LumexUI.Docs.Client/Pages/Components/Textarea/PreviewCodes/Disabled.razor b/docs/LumexUI.Docs.Client/Pages/Components/Textarea/PreviewCodes/Disabled.razor deleted file mode 100644 index dd1d150d..00000000 --- a/docs/LumexUI.Docs.Client/Pages/Components/Textarea/PreviewCodes/Disabled.razor +++ /dev/null @@ -1,5 +0,0 @@ -@rendermode InteractiveWebAssembly - - - - diff --git a/docs/LumexUI.Docs.Client/Pages/Components/Textarea/PreviewCodes/Readonly.razor b/docs/LumexUI.Docs.Client/Pages/Components/Textarea/PreviewCodes/Readonly.razor deleted file mode 100644 index 89239c5c..00000000 --- a/docs/LumexUI.Docs.Client/Pages/Components/Textarea/PreviewCodes/Readonly.razor +++ /dev/null @@ -1,5 +0,0 @@ -@rendermode InteractiveWebAssembly - - - - diff --git a/docs/LumexUI.Docs.Client/Pages/Components/Textarea/PreviewCodes/Usage.razor b/docs/LumexUI.Docs.Client/Pages/Components/Textarea/PreviewCodes/Usage.razor deleted file mode 100644 index 6b3edb39..00000000 --- a/docs/LumexUI.Docs.Client/Pages/Components/Textarea/PreviewCodes/Usage.razor +++ /dev/null @@ -1,5 +0,0 @@ -@rendermode InteractiveWebAssembly - - - - diff --git a/src/LumexUI/Components/Textarea/LumexTextarea.razor b/src/LumexUI/Components/TextArea/LumexTextArea.razor similarity index 91% rename from src/LumexUI/Components/Textarea/LumexTextarea.razor rename to src/LumexUI/Components/TextArea/LumexTextArea.razor index dee7c396..f1418236 100644 --- a/src/LumexUI/Components/Textarea/LumexTextarea.razor +++ b/src/LumexUI/Components/TextArea/LumexTextArea.razor @@ -5,7 +5,7 @@ class="@RootClass" style="@RootStyle" disabled="@Disabled" - readonly="@Readonly" + readonly="@ReadOnly" placeholder="@Placeholder" required="@Required" data-disabled="@Disabled.ToAttributeValue()" diff --git a/src/LumexUI/Components/Textarea/LumexTextarea.razor.cs b/src/LumexUI/Components/TextArea/LumexTextArea.razor.cs similarity index 86% rename from src/LumexUI/Components/Textarea/LumexTextarea.razor.cs rename to src/LumexUI/Components/TextArea/LumexTextArea.razor.cs index 82e35a40..81911c16 100644 --- a/src/LumexUI/Components/Textarea/LumexTextarea.razor.cs +++ b/src/LumexUI/Components/TextArea/LumexTextArea.razor.cs @@ -5,7 +5,7 @@ namespace LumexUI; -public partial class LumexTextarea : LumexComponentBase +public partial class LumexTextArea : LumexComponentBase { /// /// Gets or sets a value indicating whether the textarea is disabled. @@ -15,7 +15,7 @@ public partial class LumexTextarea : LumexComponentBase /// /// Gets or sets a value indicating whether the textareas value is readonly. /// - [Parameter] public bool Readonly { get; set; } + [Parameter] public bool ReadOnly { get; set; } /// /// Gets or sets a value indicating whether the textareas value is required. @@ -54,9 +54,9 @@ public partial class LumexTextarea : LumexComponentBase TwMerge.Merge( Textarea.GetStyles( this ) ); /// - /// Initializes a new instance of the . + /// Initializes a new instance of the . /// - public LumexTextarea() + public LumexTextArea() { As = "textarea"; } diff --git a/src/LumexUI/Styles/Textarea.cs b/src/LumexUI/Styles/Textarea.cs index d581c90f..c48ae0c5 100644 --- a/src/LumexUI/Styles/Textarea.cs +++ b/src/LumexUI/Styles/Textarea.cs @@ -38,7 +38,7 @@ internal class Textarea .Add( "w-full" ) .ToString(); - public static string GetStyles( LumexTextarea textarea ) + public static string GetStyles( LumexTextArea textarea ) { return ElementClass.Empty() .Add( _base ) diff --git a/tests/LumexUI.Tests/Components/Textarea/TextareaTests.razor b/tests/LumexUI.Tests/Components/Textarea/TextareaTests.razor index 378ca05f..fe0f27ea 100644 --- a/tests/LumexUI.Tests/Components/Textarea/TextareaTests.razor +++ b/tests/LumexUI.Tests/Components/Textarea/TextareaTests.razor @@ -15,7 +15,7 @@ [Fact] public void ShouldRenderCorrectly() { - var action = () => Render(@); + var action = () => Render(@); action.Should().NotThrow(); } @@ -23,7 +23,7 @@ [Fact] public void ShouldRenderWithPlaceholder() { - var cut = Render(@); + var cut = Render(@); var input = cut.Find( "textarea" ); @@ -34,7 +34,7 @@ [Fact] public void ShouldRenderWithPlaceholderButShowsValue() { - var cut = Render(@); + var cut = Render(@); var input = cut.Find( "textarea" ); @@ -47,7 +47,7 @@ [Fact] public void ShouldRenderReadonly() { - var cut = Render(@); + var cut = Render(@); var input = cut.Find( "textarea" ); @@ -57,7 +57,7 @@ [Fact] public void ShouldRenderDisabled() { - var cut = Render(@); + var cut = Render(@); var input = cut.Find( "textarea" ); @@ -67,7 +67,7 @@ [Fact] public void ShouldChangeValueOnInput() { - var cut = Render( @); + var cut = Render( @); var input = cut.Find( "textarea" ); From f523dbfa94fb8096c46161bcc76a97b256c47f4b Mon Sep 17 00:00:00 2001 From: Nils Tonagel Date: Mon, 30 Dec 2024 09:49:50 +0100 Subject: [PATCH 4/7] fix(codereview): Use correct snippet in read only sample --- .../Pages/Components/TextArea/PreviewCodes/ReadOnly.razor | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/LumexUI.Docs.Client/Pages/Components/TextArea/PreviewCodes/ReadOnly.razor b/docs/LumexUI.Docs.Client/Pages/Components/TextArea/PreviewCodes/ReadOnly.razor index 8fc9ae50..8ac2971d 100644 --- a/docs/LumexUI.Docs.Client/Pages/Components/TextArea/PreviewCodes/ReadOnly.razor +++ b/docs/LumexUI.Docs.Client/Pages/Components/TextArea/PreviewCodes/ReadOnly.razor @@ -1,5 +1,5 @@ @rendermode InteractiveWebAssembly - + From 1f1a2e614955edd15717922745d861ba6b588c37 Mon Sep 17 00:00:00 2001 From: Nils Tonagel Date: Mon, 30 Dec 2024 10:02:01 +0100 Subject: [PATCH 5/7] fix(codereview): Add event test + correct usage of samples --- .../TextArea/Examples/Controlled.razor | 4 ++-- .../TextArea/PreviewCodes/Controlled.razor | 2 +- .../TextArea/PreviewCodes/Disabled.razor | 2 +- .../Pages/Components/TextArea/TextArea.razor | 2 +- .../Components/TextArea/LumexTextArea.razor | 2 ++ .../Components/TextArea/LumexTextArea.razor.cs | 6 +++--- .../{TextareaTests.razor => TextAreaTests.razor} | 16 ++++++++++++++-- 7 files changed, 24 insertions(+), 10 deletions(-) rename tests/LumexUI.Tests/Components/Textarea/{TextareaTests.razor => TextAreaTests.razor} (83%) diff --git a/docs/LumexUI.Docs.Client/Pages/Components/TextArea/Examples/Controlled.razor b/docs/LumexUI.Docs.Client/Pages/Components/TextArea/Examples/Controlled.razor index 960c40b5..f2f79b6d 100644 --- a/docs/LumexUI.Docs.Client/Pages/Components/TextArea/Examples/Controlled.razor +++ b/docs/LumexUI.Docs.Client/Pages/Components/TextArea/Examples/Controlled.razor @@ -9,9 +9,9 @@ @code { private string _value = string.Empty; - private string _newValue = string.Empty; + private string? _newValue = string.Empty; - private void OnValueChanged( string value ) + private void OnValueChanged( string? value ) { _newValue = value; StateHasChanged(); diff --git a/docs/LumexUI.Docs.Client/Pages/Components/TextArea/PreviewCodes/Controlled.razor b/docs/LumexUI.Docs.Client/Pages/Components/TextArea/PreviewCodes/Controlled.razor index 41ed000a..14b46fae 100644 --- a/docs/LumexUI.Docs.Client/Pages/Components/TextArea/PreviewCodes/Controlled.razor +++ b/docs/LumexUI.Docs.Client/Pages/Components/TextArea/PreviewCodes/Controlled.razor @@ -1,5 +1,5 @@ @rendermode InteractiveWebAssembly - + diff --git a/docs/LumexUI.Docs.Client/Pages/Components/TextArea/PreviewCodes/Disabled.razor b/docs/LumexUI.Docs.Client/Pages/Components/TextArea/PreviewCodes/Disabled.razor index 6d55c34c..7ce526f4 100644 --- a/docs/LumexUI.Docs.Client/Pages/Components/TextArea/PreviewCodes/Disabled.razor +++ b/docs/LumexUI.Docs.Client/Pages/Components/TextArea/PreviewCodes/Disabled.razor @@ -1,5 +1,5 @@ @rendermode InteractiveWebAssembly - + diff --git a/docs/LumexUI.Docs.Client/Pages/Components/TextArea/TextArea.razor b/docs/LumexUI.Docs.Client/Pages/Components/TextArea/TextArea.razor index 2792e807..3d26ab42 100644 --- a/docs/LumexUI.Docs.Client/Pages/Components/TextArea/TextArea.razor +++ b/docs/LumexUI.Docs.Client/Pages/Components/TextArea/TextArea.razor @@ -18,7 +18,7 @@

- You can make a textareas value read only to prevent Changes. + You can make a textarea's value read-only to prevent changes.

diff --git a/src/LumexUI/Components/TextArea/LumexTextArea.razor b/src/LumexUI/Components/TextArea/LumexTextArea.razor index f1418236..7b636c26 100644 --- a/src/LumexUI/Components/TextArea/LumexTextArea.razor +++ b/src/LumexUI/Components/TextArea/LumexTextArea.razor @@ -6,6 +6,8 @@ style="@RootStyle" disabled="@Disabled" readonly="@ReadOnly" + aria-disabled="@Disabled" + aria-readonly="@ReadOnly" placeholder="@Placeholder" required="@Required" data-disabled="@Disabled.ToAttributeValue()" diff --git a/src/LumexUI/Components/TextArea/LumexTextArea.razor.cs b/src/LumexUI/Components/TextArea/LumexTextArea.razor.cs index 81911c16..dd1d557a 100644 --- a/src/LumexUI/Components/TextArea/LumexTextArea.razor.cs +++ b/src/LumexUI/Components/TextArea/LumexTextArea.razor.cs @@ -23,7 +23,7 @@ public partial class LumexTextArea : LumexComponentBase [Parameter] public bool Required { get; set; } /// - /// Gets or sets a value indicating wether the ValueChanged event will be fired on input or change. + /// /// Gets or sets a value indicating whether the ValueChanged event will be fired on input or change. /// [Parameter] public InputBehavior Behavior { get; set; } = InputBehavior.OnChange; @@ -45,7 +45,7 @@ public partial class LumexTextArea : LumexComponentBase /// /// Gets or sets Value changed event. /// - [Parameter] public Action? ValueChanged { get; set; } + [Parameter] public EventCallback ValueChanged { get; set; } /// /// Get the merged style of this instance. @@ -66,6 +66,6 @@ public LumexTextArea() /// private void OnValueChanged() { - ValueChanged?.Invoke( Value ); + ValueChanged.InvokeAsync( Value ); } } \ No newline at end of file diff --git a/tests/LumexUI.Tests/Components/Textarea/TextareaTests.razor b/tests/LumexUI.Tests/Components/Textarea/TextAreaTests.razor similarity index 83% rename from tests/LumexUI.Tests/Components/Textarea/TextareaTests.razor rename to tests/LumexUI.Tests/Components/Textarea/TextAreaTests.razor index fe0f27ea..5287c2ab 100644 --- a/tests/LumexUI.Tests/Components/Textarea/TextareaTests.razor +++ b/tests/LumexUI.Tests/Components/Textarea/TextAreaTests.razor @@ -5,7 +5,7 @@ @using Microsoft.Extensions.DependencyInjection @code { - public TextareaTests() + public TextAreaTests() { Services.AddSingleton(); var module = JSInterop.SetupModule( "./_content/LumexUI/js/components/input.js" ); @@ -45,7 +45,7 @@ } [Fact] - public void ShouldRenderReadonly() + public void ShouldRenderReadOnly() { var cut = Render(@); @@ -74,4 +74,16 @@ input.Input( "test 2" ); cut.Instance.Value.Should().Be( "test 2" ); } + + [Fact] + public void ShouldChangeValueOnValueChangedEvent() + { + var text = string.Empty; + var cut = Render( @); + + var input = cut.Find( "textarea" ); + + input.Input( "test 2" ); + text.Should().Be( "test 2" ); + } } From 0f95603cfe3dfff74bfaa8f239fa39b236a146f2 Mon Sep 17 00:00:00 2001 From: Nils Tonagel Date: Mon, 30 Dec 2024 10:08:26 +0100 Subject: [PATCH 6/7] fix(codereview): Rename heading + section --- .../Pages/Components/TextArea/TextArea.razor | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/LumexUI.Docs.Client/Pages/Components/TextArea/TextArea.razor b/docs/LumexUI.Docs.Client/Pages/Components/TextArea/TextArea.razor index 3d26ab42..8b4e399b 100644 --- a/docs/LumexUI.Docs.Client/Pages/Components/TextArea/TextArea.razor +++ b/docs/LumexUI.Docs.Client/Pages/Components/TextArea/TextArea.razor @@ -16,7 +16,7 @@ - +

You can make a textarea's value read-only to prevent changes.

@@ -42,7 +42,7 @@ [ new("Usage", [ new("Disabled"), - new("Readonly"), + new("ReadOnly"), new("Controlled"), ]), new("Custom Styles"), From 0993141dfce5b281e87dc5b2e69bb8129fa7193a Mon Sep 17 00:00:00 2001 From: Nils Tonagel Date: Thu, 2 Jan 2025 10:10:09 +0100 Subject: [PATCH 7/7] fix(codereview): Remove Folder include for text area component --- docs/LumexUI.Docs.Client/LumexUI.Docs.Client.csproj | 4 ---- 1 file changed, 4 deletions(-) diff --git a/docs/LumexUI.Docs.Client/LumexUI.Docs.Client.csproj b/docs/LumexUI.Docs.Client/LumexUI.Docs.Client.csproj index e0db9319..9fde0c3f 100644 --- a/docs/LumexUI.Docs.Client/LumexUI.Docs.Client.csproj +++ b/docs/LumexUI.Docs.Client/LumexUI.Docs.Client.csproj @@ -28,8 +28,4 @@ - - - -