Skip to content

Commit 173ae60

Browse files
vybraanvybraan
committed
Merge upstream PR LumexUI#250: Add DateBox / DatePicker component
2 parents 1be0caf + 164e38c commit 173ae60

39 files changed

+1153
-5
lines changed

‎docs/LumexUI.Docs.Client/Common/Navigation/NavigationStore.cs‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ public class NavigationStore
3333
.Add( new( nameof( LumexCode ), PageStatus.New ) )
3434
.Add( new( nameof( LumexCollapse ) ) )
3535
.Add( new( nameof( LumexDataGrid<T> ) ) )
36+
.Add( new( nameof( LumexDatebox ), PageStatus.New ) )
3637
.Add( new( nameof( LumexDivider ) ) )
3738
.Add( new( nameof( LumexDropdown ) ) )
3839
.Add( new( nameof( LumexKbd ), PageStatus.New ) )
@@ -74,6 +75,7 @@ public class NavigationStore
7475
.Add( new( nameof( LumexDataGrid<T> ) ) )
7576
//.Add( nameof( LumexComponentBase ) )
7677
//.Add( nameof( LumexDebouncedInputBase<T> ) )
78+
.Add( new( nameof( LumexDatebox ) ) )
7779
.Add( new( nameof( LumexDivider ) ) )
7880
.Add( new( nameof( LumexDropdown ) ) )
7981
.Add( new( nameof( LumexDropdownItem ) ) )

‎docs/LumexUI.Docs.Client/Pages/Components/Datebox/Datebox.razor‎

Lines changed: 217 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,217 @@
1+
@page "/docs/components/datebox"
2+
@layout DocsContentLayout
3+
4+
@using LumexUI.Docs.Client.Pages.Components.Datebox.PreviewCodes
5+
6+
<DocsSection Title="Usage">
7+
<p>The date box component provides a simple way to input and edit dates.</p>
8+
9+
<Usage />
10+
11+
<DocsSection Title="Disabled">
12+
<p>
13+
You can disable a date box to prevent user interaction.
14+
A disabled date box is faded and does not respond to user clicks.
15+
</p>
16+
17+
<Disabled />
18+
</DocsSection>
19+
20+
<DocsSection Title="Read-Only">
21+
<p>
22+
Set the date box component to read-only to display the
23+
current state without allowing changes.
24+
</p>
25+
26+
<ReadOnly />
27+
</DocsSection>
28+
29+
<DocsSection Title="Required">
30+
<p>
31+
Mark the date box as required to indicate that it
32+
must be filled out before form submission.
33+
An asterisk will appear at the end of the label.
34+
</p>
35+
36+
<Required />
37+
</DocsSection>
38+
39+
<DocsSection Title="Sizes">
40+
<p>
41+
The date box component supports multiple sizes to
42+
fit different layouts and design needs.
43+
</p>
44+
45+
<Sizes />
46+
</DocsSection>
47+
48+
<DocsSection Title="Radius">
49+
<p>Adjust the border radius of the date box for rounded or squared corners.</p>
50+
51+
<Radius />
52+
</DocsSection>
53+
54+
<DocsSection Title="Colors">
55+
<p>Customize the date box color to match your theme or emphasize certain fields.</p>
56+
57+
<Colors />
58+
</DocsSection>
59+
60+
<DocsSection Title="Variants">
61+
<p>
62+
Choose from different date box variants,
63+
such as <code>Flat</code>, <code>Underlined</code>,
64+
or <code>Outlined</code>, for various visual styles.
65+
</p>
66+
67+
<Variants />
68+
</DocsSection>
69+
70+
<DocsSection Title="Label Placements">
71+
<p>
72+
Position the label either inside or outside the date box
73+
for flexibility in layout and design.
74+
</p>
75+
76+
<LabelPlacements />
77+
</DocsSection>
78+
79+
<LumexAlert Radius="@LumexUI.Common.Radius.Large" Class="my-6 [&_code]:text-current">
80+
<DescriptionContent>
81+
If the <code>Label</code> parameter is not set, the <code>LabelPlacement</code>
82+
parameter will default to <code>Outside</code>.
83+
</DescriptionContent>
84+
</LumexAlert>
85+
86+
<DocsSection Title="Clear Button">
87+
<p>Enable the button to clear the input with a single click.</p>
88+
89+
<ClearButton />
90+
</DocsSection>
91+
92+
<DocsSection Title="Start & End Content">
93+
<p>
94+
Add custom content, such as icons or labels, to the
95+
start or end of the date box for added functionality.
96+
</p>
97+
98+
<StartEndContent />
99+
</DocsSection>
100+
101+
<DocsSection Title="Description">
102+
<p>
103+
Provide a brief description below the date box to
104+
offer guidance or additional context.
105+
</p>
106+
107+
<Description />
108+
</DocsSection>
109+
110+
<DocsSection Title="Error Message">
111+
<p>
112+
Display an error message below the date box to indicate validation issues.
113+
You can combine the <code>Invalid</code> and <code>ErrorMessage</code> parameters to show an invalid input.
114+
An error message is shown only when the <code>Invalid</code> parameter is set to <code>true</code>.
115+
</p>
116+
117+
<ErrorMessage />
118+
</DocsSection>
119+
120+
<DocsSection Title="Debounce Delay">
121+
<p>
122+
Enable debounced input to delay updates to the date box value,
123+
reducing the frequency of changes and improving performance.
124+
You can achieve this by setting the <code>DebounceDelay</code> value and
125+
<code>Behavior</code> to <code>OnInput</code>.
126+
</p>
127+
128+
<DebounceDelay />
129+
</DocsSection>
130+
131+
<DocsSection Title="Two-way Data Binding">
132+
<p>
133+
The date box component supports two-way data binding,
134+
allowing you to programmatically control the value.
135+
You can achieve this using the <code>@@bind-Value</code> directive,
136+
or the <code>Value</code> and <code>ValueChanged</code> parameters.
137+
</p>
138+
139+
<TwoWayDataBinding />
140+
</DocsSection>
141+
</DocsSection>
142+
143+
<DocsSlotsSection Slots="@_slots">
144+
<div>
145+
<h4 class="font-semibold">Date box</h4>
146+
147+
<ul>
148+
<li>
149+
<code>Class</code>: The CSS class name that styles the wrapper of the date box.
150+
</li>
151+
152+
<li>
153+
<code>Classes</code>: The CSS class names for the date box slots that style the entire component.
154+
</li>
155+
</ul>
156+
</div>
157+
<CustomStyles />
158+
</DocsSlotsSection>
159+
160+
<DocsApiSection Components="@_apiComponents" />
161+
162+
@code {
163+
[CascadingParameter]
164+
private DocsContentLayout Layout { get; set; } = default!;
165+
166+
private readonly Heading[] _headings = new Heading[]
167+
{
168+
new("Usage", [
169+
new("Disabled"),
170+
new("Read-Only"),
171+
new("Required"),
172+
new("Sizes"),
173+
new("Radius"),
174+
new("Colors"),
175+
new("Variants"),
176+
new("Label Placements"),
177+
new("Clear Button"),
178+
new("Start & End Content"),
179+
new("Description"),
180+
new("Error message"),
181+
new("Debounce Delay"),
182+
new("Two-way Data Binding"),
183+
]),
184+
new("Custom Styles"),
185+
new("API")
186+
};
187+
188+
private readonly Slot[] _slots = new Slot[]
189+
{
190+
new(nameof(InputFieldSlots.Base), "The overall wrapper."),
191+
new(nameof(InputFieldSlots.Label), "The label element."),
192+
new(nameof(InputFieldSlots.MainWrapper), "The wrapper of the input wrapper (when the label is outside)."),
193+
new(nameof(InputFieldSlots.InputWrapper), "The wrapper of the label and the inner wrapper (when the label is inside)."),
194+
new(nameof(InputFieldSlots.InnerWrapper), "The wrapper of the input, start/end content."),
195+
new(nameof(InputFieldSlots.Input), "The input element."),
196+
new(nameof(InputFieldSlots.ClearButton), "The clear button element."),
197+
new(nameof(InputFieldSlots.HelperWrapper), "The wrapper of a description and an error message."),
198+
new(nameof(InputFieldSlots.Description), "The description of the input field."),
199+
new(nameof(InputFieldSlots.ErrorMessage), "The error message of the input field.")
200+
};
201+
202+
private readonly string[] _apiComponents = new string[]
203+
{
204+
nameof(LumexDatebox)
205+
};
206+
207+
protected override void OnInitialized()
208+
{
209+
Layout.Initialize(
210+
title: "Date box",
211+
category: "Components",
212+
description: "Date box allows users to input a specific date.",
213+
headings: _headings,
214+
linksProps: new ComponentLinksProps("Datebox", isServer: false)
215+
);
216+
}
217+
}

‎docs/LumexUI.Docs.Client/Pages/Components/Datebox/Examples/ClearButton.razor‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<div class="w-full">
2+
<LumexDatebox Clearable="@true"
3+
Label="Date"
4+
Placeholder="dd/MM/yyyy"
5+
Value="@_value"
6+
Variant="@InputVariant.Outlined"
7+
OnCleared="@Notify"
8+
Class="max-w-xs" />
9+
</div>
10+
11+
<p class="text-sm text-default-500">
12+
@_text
13+
</p>
14+
15+
@code {
16+
private string? _text;
17+
private DateTime? _value;
18+
19+
private void Notify()
20+
{
21+
_value = null;
22+
23+
if (_value is null)
24+
{
25+
_text = "Input is cleared!";
26+
}
27+
}
28+
}

‎docs/LumexUI.Docs.Client/Pages/Components/Datebox/Examples/Colors.razor‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<div class="w-full grid grid-cols-1 gap-4 md:grid-cols-2">
2+
@foreach (ThemeColor color in _colors)
3+
{
4+
<div>
5+
<LumexDatebox Color="@color"
6+
Label="Date"
7+
Placeholder="dd/MM/yyyy"
8+
Value="@DateTime.UtcNow" />
9+
10+
<small class="text-default-400 mt-1">
11+
@color
12+
</small>
13+
</div>
14+
}
15+
</div>
16+
17+
@code {
18+
private ThemeColor[] _colors = [
19+
ThemeColor.Default,
20+
ThemeColor.Primary,
21+
ThemeColor.Secondary,
22+
ThemeColor.Success,
23+
ThemeColor.Warning,
24+
ThemeColor.Danger,
25+
ThemeColor.Info
26+
];
27+
}

‎docs/LumexUI.Docs.Client/Pages/Components/Datebox/Examples/CustomStyles.razor‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<LumexDatebox Label="Search"
2+
Placeholder="Type to search..."
3+
Radius="@Radius.Large"
4+
Clearable="@true"
5+
Classes="@_classes">
6+
<StartContent>
7+
<SearchIcon Size="18" class="text-secondary-400 shrink-0" />
8+
</StartContent>
9+
</LumexDatebox>
10+
11+
@code {
12+
private InputFieldSlots _classes = new()
13+
{
14+
Label = "text-default-700",
15+
InnerWrapper = "bg-transparent",
16+
InputWrapper = ElementClass.Empty()
17+
.Add("shadow-xl")
18+
.Add("bg-default-200/50")
19+
.Add("backdrop-blur-xl")
20+
.Add("backdrop-saturate-200")
21+
.Add("hover:bg-default-200/70")
22+
.Add("group-data-[focus=true]:bg-default-200/85")
23+
.ToString(),
24+
Input = ElementClass.Empty()
25+
.Add("bg-transparent")
26+
.Add("text-default-900")
27+
.Add("placeholder:text-default-500")
28+
.ToString()
29+
};
30+
}

‎docs/LumexUI.Docs.Client/Pages/Components/Datebox/Examples/DebounceDelay.razor‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<div class="w-full flex flex-col gap-2">
2+
<LumexDatebox DebounceDelay="250"
3+
Behavior="@InputBehavior.OnInput"
4+
Label="Search"
5+
Placeholder="Type to search..."
6+
Clearable="@true"
7+
Class="max-w-xs"
8+
@bind-Value="@_value" />
9+
10+
<p class="text-sm text-default-500">
11+
Value: @_value
12+
</p>
13+
</div>
14+
15+
@code {
16+
private DateTime? _value;
17+
}

‎docs/LumexUI.Docs.Client/Pages/Components/Datebox/Examples/Description.razor‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
<LumexDatebox Label="Date"
2+
Placeholder="dd/MM/yyyy"
3+
Description="We'll never share your birthday with anyone else."
4+
Class="max-w-xs" />

‎docs/LumexUI.Docs.Client/Pages/Components/Datebox/Examples/Disabled.razor‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
<LumexDatebox Disabled="true"
2+
Label="Date"
3+
Placeholder="dd/MM/yyyy"
4+
Class="max-w-xs" />

0 commit comments

Comments
 (0)