LumexUI / lumexui

🚀 A versatile Blazor UI library built using Tailwind CSS.
https://lumexui.org
MIT License
48 stars 2 forks source link

feat(components): add textbox component #53

Closed desmondinho closed 3 months ago

desmondinho commented 3 months ago

Description

Add the textbox, a component representing an input field for entering/editing string values, and the debounced input, a base class for input components with debounced value updates, to the component library.

Closes #48

What's been done?

Added the components mentioned above with the following abilities:

TextBox: A component representing an input field for entering/editing string values

Parameter Type Description
StartContent RenderFragment? Gets or sets content to be rendered at the start of the textbox.
EndContent RenderFragment? Gets or sets content to be rendered at the end of the textbox.
Label string? Gets or sets the label for the textbox.
Placeholder string? Gets or sets the placeholder for the textbox.
Description string? Gets or sets the description for the textbox.
ErrorMessage string? Gets or sets the error message for the textbox. This message is displayed only when the textbox is invalid.
Type InputType Gets or sets the input type of the textbox. The default value is InputType.Text
Variant InputVariant Gets or sets the variant for the textbox. The default value is InputVariant.Flat
Behavior InputBehavior Gets or sets the input behavior, specifying when the textbox updates its value and triggers validation. The default value is InputBehavior.OnChange
Radius Radius? Gets or sets the border radius of the textbox.
LabelPlacement LabelPlacement Gets or sets the placement of the label for the textbox. The default value is LabelPlacement.Inside
FullWidth bool Gets or sets a value indicating whether the textbox is full-width.
Clearable bool Gets or sets a value indicating whether the textbox should have a clear button.
OnCleared EventCallback Gets or sets a callback that is fired when the value in the textbox is cleared.
Classes TextBoxSlots? Gets or sets the CSS class names for the textbox slots.

DebounceInputBase: A base class for input components with debounced value updates

Parameter Type Description
DebounceDelay int Gets or sets the delay, in milliseconds, for debouncing input events.

Introduced new enum types to configure textbox's behavior:

InputBehavior: Specifies when the input component updates its value and triggers validation.

Options Description
OnInput Updates the value and triggers validation on each input event (e.g., when the user types in the input field).
OnChange Updates the value and triggers validation on change events (e.g., when the input field loses focus or the user presses enter).

InputVariant: Specifies the different variants for an input component.

Options Description
Flat A flat variant input.
Outlined An outlined variant input.
Underlined An underlined variant input.

InputType: Specifies the different types of input elements.

Options Description
Text A text input field.
Password A password input field.
Email An email input field.
Hidden A hidden input field.
Number A number input field.
Search A search input field.
Telephone A telephone input field.
Url A URL input field.
Color A color input field.
Date A date input field.
DateTimeLocal A date-time input field (local time).
Month A month input field.
Time A time input field.
Week A week input field.

LabelPlacement: Specifies the placement options for the label of an input component.

Options Description
Inside Places the label inside the input component.
Outside Places the label outside the input component.

Checklist

codecov[bot] commented 3 months ago

Codecov Report

Attention: Patch coverage is 96.92308% with 4 lines in your changes missing coverage. Please review.

Project coverage is 98.16%. Comparing base (dd016bb) to head (6f72825). Report is 3 commits behind head on main.

Files Patch % Lines
...umexUI/Components/Bases/LumexDebouncedInputBase.cs 94.12% 0 Missing and 2 partials :warning:
src/LumexUI/Components/Bases/LumexInputBase.cs 85.71% 1 Missing and 1 partial :warning:
Additional details and impacted files ```diff @@ Coverage Diff @@ ## main #53 +/- ## ========================================== - Coverage 98.23% 98.16% -0.07% ========================================== Files 55 58 +3 Lines 1074 1198 +124 Branches 107 131 +24 ========================================== + Hits 1055 1176 +121 - Misses 12 13 +1 - Partials 7 9 +2 ```

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.