Skip to content

feat(components): add Datebox component #250

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

feat(components): add Datebox component #250

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
152d7d8
feat(component): added date picker
sikelio Sep 12, 2025
93f8c9d
fix: applied date input requested changes
sikelio Sep 12, 2025
164e38c
fix: renamed dateinput to datenbox
sikelio Sep 13, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions docs/LumexUI.Docs.Client/Common/Navigation/NavigationStore.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ public class NavigationStore
.Add( new( nameof( LumexChip ), PageStatus.New ) )
.Add( new( nameof( LumexCollapse ) ) )
.Add( new( nameof( LumexDataGrid<T> ) ) )
.Add( new( nameof( LumexDatebox ), PageStatus.New ) )
.Add( new( nameof( LumexDivider ) ) )
.Add( new( nameof( LumexDropdown ) ) )
.Add( new( nameof( LumexLink ) ) )
Expand Down Expand Up @@ -67,6 +68,7 @@ public class NavigationStore
.Add( new( nameof( LumexComponent ) ) )
//.Add( nameof( LumexComponentBase ) )
//.Add( nameof( LumexDebouncedInputBase<T> ) )
.Add( new( nameof( LumexDatebox ) ) )
.Add( new( nameof( LumexDivider ) ) )
.Add( new( nameof( LumexDropdown ) ) )
.Add( new( nameof( LumexDropdownItem ) ) )
Expand Down
217 changes: 217 additions & 0 deletions docs/LumexUI.Docs.Client/Pages/Components/Datebox/Datebox.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,217 @@
@page "/docs/components/datebox"
@layout DocsContentLayout

@using LumexUI.Docs.Client.Pages.Components.Datebox.PreviewCodes

<DocsSection Title="Usage">
<p>The date box component provides a simple way to input and edit dates.</p>

<Usage />

<DocsSection Title="Disabled">
<p>
You can disable a date box to prevent user interaction.
A disabled date box is faded and does not respond to user clicks.
</p>

<Disabled />
</DocsSection>

<DocsSection Title="Read-Only">
<p>
Set the date box component to read-only to display the
current state without allowing changes.
</p>

<ReadOnly />
</DocsSection>

<DocsSection Title="Required">
<p>
Mark the date box as required to indicate that it
must be filled out before form submission.
An asterisk will appear at the end of the label.
</p>

<Required />
</DocsSection>

<DocsSection Title="Sizes">
<p>
The date box component supports multiple sizes to
fit different layouts and design needs.
</p>

<Sizes />
</DocsSection>

<DocsSection Title="Radius">
<p>Adjust the border radius of the date box for rounded or squared corners.</p>

<Radius />
</DocsSection>

<DocsSection Title="Colors">
<p>Customize the date box color to match your theme or emphasize certain fields.</p>

<Colors />
</DocsSection>

<DocsSection Title="Variants">
<p>
Choose from different date box variants,
such as <code>Flat</code>, <code>Underlined</code>,
or <code>Outlined</code>, for various visual styles.
</p>

<Variants />
</DocsSection>

<DocsSection Title="Label Placements">
<p>
Position the label either inside or outside the date box
for flexibility in layout and design.
</p>

<LabelPlacements />
</DocsSection>

<LumexAlert Radius="@LumexUI.Common.Radius.Large" Class="my-6 [&_code]:text-current">
<DescriptionContent>
If the <code>Label</code> parameter is not set, the <code>LabelPlacement</code>
parameter will default to <code>Outside</code>.
</DescriptionContent>
</LumexAlert>

<DocsSection Title="Clear Button">
<p>Enable the button to clear the input with a single click.</p>

<ClearButton />
</DocsSection>

<DocsSection Title="Start & End Content">
<p>
Add custom content, such as icons or labels, to the
start or end of the date box for added functionality.
</p>

<StartEndContent />
</DocsSection>

<DocsSection Title="Description">
<p>
Provide a brief description below the date box to
offer guidance or additional context.
</p>

<Description />
</DocsSection>

<DocsSection Title="Error Message">
<p>
Display an error message below the date box to indicate validation issues.
You can combine the <code>Invalid</code> and <code>ErrorMessage</code> parameters to show an invalid input.
An error message is shown only when the <code>Invalid</code> parameter is set to <code>true</code>.
</p>

<ErrorMessage />
</DocsSection>

<DocsSection Title="Debounce Delay">
<p>
Enable debounced input to delay updates to the date box value,
reducing the frequency of changes and improving performance.
You can achieve this by setting the <code>DebounceDelay</code> value and
<code>Behavior</code> to <code>OnInput</code>.
</p>

<DebounceDelay />
</DocsSection>

<DocsSection Title="Two-way Data Binding">
<p>
The date box component supports two-way data binding,
allowing you to programmatically control the value.
You can achieve this using the <code>@@bind-Value</code> directive,
or the <code>Value</code> and <code>ValueChanged</code> parameters.
</p>

<TwoWayDataBinding />
</DocsSection>
</DocsSection>

<DocsSlotsSection Slots="@_slots">
<div>
<h4 class="font-semibold">Date box</h4>

<ul>
<li>
<code>Class</code>: The CSS class name that styles the wrapper of the date box.
</li>

<li>
<code>Classes</code>: The CSS class names for the date box slots that style the entire component.
</li>
</ul>
</div>
<CustomStyles />
</DocsSlotsSection>

<DocsApiSection Components="@_apiComponents" />

@code {
[CascadingParameter]
private DocsContentLayout Layout { get; set; } = default!;

private readonly Heading[] _headings = new Heading[]
{
new("Usage", [
new("Disabled"),
new("Read-Only"),
new("Required"),
new("Sizes"),
new("Radius"),
new("Colors"),
new("Variants"),
new("Label Placements"),
new("Clear Button"),
new("Start & End Content"),
new("Description"),
new("Error message"),
new("Debounce Delay"),
new("Two-way Data Binding"),
]),
Comment on lines +180 to +183
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Fix nav anchor mismatch (“Error message” vs “Error Message”)

Headings array uses “Error message”, section title uses “Error Message”. This breaks in-page navigation anchors.

-            new("Error message"),
+            new("Error Message"),
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
new("Error message"),
new("Debounce Delay"),
new("Two-way Data Binding"),
]),
new("Error Message"),
new("Debounce Delay"),
new("Two-way Data Binding"),
]),
🤖 Prompt for AI Agents 
In docs/LumexUI.Docs.Client/Pages/Components/Datebox/Datebox.razor around lines
180 to 183, the headings array contains "Error message" which doesn't match the
section title "Error Message" and breaks nav anchors; update the array entry to
"Error Message" (or make the section title and array identical) so the in-page
anchor text matches exactly and navigation works.

new("Custom Styles"),
new("API")
};

private readonly Slot[] _slots = new Slot[]
{
new(nameof(InputFieldSlots.Base), "The overall wrapper."),
new(nameof(InputFieldSlots.Label), "The label element."),
new(nameof(InputFieldSlots.MainWrapper), "The wrapper of the input wrapper (when the label is outside)."),
new(nameof(InputFieldSlots.InputWrapper), "The wrapper of the label and the inner wrapper (when the label is inside)."),
new(nameof(InputFieldSlots.InnerWrapper), "The wrapper of the input, start/end content."),
new(nameof(InputFieldSlots.Input), "The input element."),
new(nameof(InputFieldSlots.ClearButton), "The clear button element."),
new(nameof(InputFieldSlots.HelperWrapper), "The wrapper of a description and an error message."),
new(nameof(InputFieldSlots.Description), "The description of the input field."),
new(nameof(InputFieldSlots.ErrorMessage), "The error message of the input field.")
};

private readonly string[] _apiComponents = new string[]
{
nameof(LumexDatebox)
};

protected override void OnInitialized()
{
Layout.Initialize(
title: "Date box",
category: "Components",
description: "Date box allows users to input a specific date.",
headings: _headings,
linksProps: new ComponentLinksProps("Datebox", isServer: false)
);
}
}
28 changes: 28 additions & 0 deletions docs/LumexUI.Docs.Client/Pages/Components/Datebox/Examples/ClearButton.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
<div class="w-full">
<LumexDatebox Clearable="@true"
Label="Date"
Placeholder="dd/MM/yyyy"
Value="@_value"
Variant="@InputVariant.Outlined"
OnCleared="@Notify"
Class="max-w-xs" />
</div>

<p class="text-sm text-default-500">
@_text
</p>

@code {
private string? _text;
private DateTime? _value;

private void Notify()
{
_value = null;

if (_value is null)
{
_text = "Input is cleared!";
}
}
}
27 changes: 27 additions & 0 deletions docs/LumexUI.Docs.Client/Pages/Components/Datebox/Examples/Colors.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
<div class="w-full grid grid-cols-1 gap-4 md:grid-cols-2">
@foreach (ThemeColor color in _colors)
{
<div>
<LumexDatebox Color="@color"
Label="Date"
Placeholder="dd/MM/yyyy"
Value="@DateTime.UtcNow" />

<small class="text-default-400 mt-1">
@color
</small>
</div>
}
</div>

@code {
private ThemeColor[] _colors = [
ThemeColor.Default,
ThemeColor.Primary,
ThemeColor.Secondary,
ThemeColor.Success,
ThemeColor.Warning,
ThemeColor.Danger,
ThemeColor.Info
];
}
30 changes: 30 additions & 0 deletions docs/LumexUI.Docs.Client/Pages/Components/Datebox/Examples/CustomStyles.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
<LumexDatebox Label="Search"
Placeholder="Type to search..."
Radius="@Radius.Large"
Clearable="@true"
Classes="@_classes">
<StartContent>
<SearchIcon Size="18" class="text-secondary-400 shrink-0" />
</StartContent>
</LumexDatebox>

@code {
private InputFieldSlots _classes = new()
{
Label = "text-default-700",
InnerWrapper = "bg-transparent",
InputWrapper = ElementClass.Empty()
.Add("shadow-xl")
.Add("bg-default-200/50")
.Add("backdrop-blur-xl")
.Add("backdrop-saturate-200")
.Add("hover:bg-default-200/70")
.Add("group-data-[focus=true]:bg-default-200/85")
.ToString(),
Input = ElementClass.Empty()
.Add("bg-transparent")
.Add("text-default-900")
.Add("placeholder:text-default-500")
.ToString()
};
}
17 changes: 17 additions & 0 deletions docs/LumexUI.Docs.Client/Pages/Components/Datebox/Examples/DebounceDelay.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
<div class="w-full flex flex-col gap-2">
<LumexDatebox DebounceDelay="250"
Behavior="@InputBehavior.OnInput"
Label="Search"
Placeholder="Type to search..."
Clearable="@true"
Class="max-w-xs"
@bind-Value="@_value" />

<p class="text-sm text-default-500">
Value: @_value
</p>
</div>

@code {
private DateTime? _value;
}
4 changes: 4 additions & 0 deletions docs/LumexUI.Docs.Client/Pages/Components/Datebox/Examples/Description.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
<LumexDatebox Label="Date"
Placeholder="dd/MM/yyyy"
Description="We'll never share your birthday with anyone else."
Class="max-w-xs" />
4 changes: 4 additions & 0 deletions docs/LumexUI.Docs.Client/Pages/Components/Datebox/Examples/Disabled.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
<LumexDatebox Disabled="true"
Label="Date"
Placeholder="dd/MM/yyyy"
Class="max-w-xs" />
Loading