Skip to content

Commit d9dbf24

Browse files
Denny09310desmondinho
Denny09310
and
desmondinho
authored
feat(components): add Kbd component (#251)
* feat: added initial component * feat: added kbd styling * fix: adding missing content slot * feat: added keyboard keys enum, added keys property * docs: added documentation page * feat: added rendering tests * fix: typed names of slots * fix: missing XML element * feat: added Fn (fn), Win (Win) and Alt (⎇) symbols, moved KeyboardKyes selection in a constants file * chore: formatted razor file, changed some XML documentation * fix: added guard for unmapped values * chore(*): minor adjustments --------- Co-authored-by: desmondinho <daniil.norinn@gmail.com>
1 parent 7fa3575 commit d9dbf24

File tree

13 files changed

+446
-0
lines changed

13 files changed

+446
-0
lines changed

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ public class NavigationStore
3535
.Add( new( nameof( LumexDataGrid<T> ) ) )
3636
.Add( new( nameof( LumexDivider ) ) )
3737
.Add( new( nameof( LumexDropdown ) ) )
38+
.Add( new( nameof( LumexKbd ), PageStatus.New ) )
3839
.Add( new( nameof( LumexLink ) ) )
3940
.Add( new( nameof( LumexListbox<T> ) ) )
4041
.Add( new( nameof( LumexNavbar ) ) )

‎docs/LumexUI.Docs.Client/Pages/Components/Kbd/Examples/Keys.razor‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<div class="flex items-center gap-2">
2+
<LumexKbd Keys="@([KeyboardKey.Command])">K</LumexKbd>
3+
<LumexKbd Keys="@([KeyboardKey.Command, KeyboardKey.Shift])">N</LumexKbd>
4+
<LumexKbd Keys="@([KeyboardKey.Option, KeyboardKey.Command])">P</LumexKbd>
5+
</div>

‎docs/LumexUI.Docs.Client/Pages/Components/Kbd/Examples/Usage.razor‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<LumexKbd Keys="@([KeyboardKey.Command])">K</LumexKbd>

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

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
@page "/docs/components/kbd"
2+
@layout DocsContentLayout
3+
4+
@using LumexUI.Docs.Client.Pages.Components.Kbd.PreviewCodes
5+
6+
<DocsSection Title="Usage">
7+
<Usage />
8+
9+
<DocsSection Title="Keys">
10+
<p>Use the <code>Keys</code> parameter to specify a single keyboard key or a combination of keys.</p>
11+
<Keys />
12+
</DocsSection>
13+
</DocsSection>
14+
15+
<DocsSlotsSection Slots="@_slots">
16+
<div>
17+
<h4 class="font-semibold">Kbd</h4>
18+
<ul>
19+
<li><code>Class</code>: The basic CSS class name styles the wrapper of the kbd contents.</li>
20+
<li><code>Classes</code>: The CSS class names for the kbd slots style the entire kbd at once.</li>
21+
</ul>
22+
</div>
23+
</DocsSlotsSection>
24+
25+
<DocsApiSection Components="@_apiComponents" />
26+
27+
@code {
28+
[CascadingParameter] private DocsContentLayout Layout { get; set; } = default!;
29+
30+
private readonly Heading[] _headings = new Heading[]
31+
{
32+
new("Usage", [
33+
new("Keys")
34+
]),
35+
new("Custom Styles"),
36+
new("API")
37+
};
38+
39+
private readonly Slot[] _slots = new Slot[]
40+
{
41+
new(nameof( KbdSlots.Base ), "Kbd wrapper, it handles alignment, placement, and general appearance."),
42+
new(nameof( KbdSlots.Abbr ), "The keys wrapper that handles the appearance of the keys."),
43+
new(nameof( KbdSlots.Content ), "The children wrapper that handles the appearance of the content."),
44+
};
45+
46+
private readonly string[] _apiComponents = new string[]
47+
{
48+
nameof( LumexKbd )
49+
};
50+
51+
protected override void OnInitialized()
52+
{
53+
Layout.Initialize(
54+
title: "Keyboard Key",
55+
category: "Components",
56+
description: "Keyboard key component for displaying keyboard shortcuts and input combinations.",
57+
headings: _headings,
58+
linksProps: new ComponentLinksProps( "Kbd", isServer: true )
59+
);
60+
}
61+
}

‎docs/LumexUI.Docs.Client/Pages/Components/Kbd/PreviewCodes/Keys.razor‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
@rendermode InteractiveWebAssembly
2+
3+
<PreviewCode Code="@new(name: null, snippet: "Kbd.Code.Keys")">
4+
<LumexUI.Docs.Client.Pages.Components.Kbd.Examples.Keys />
5+
</PreviewCode>

‎docs/LumexUI.Docs.Client/Pages/Components/Kbd/PreviewCodes/Usage.razor‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
@rendermode InteractiveWebAssembly
2+
3+
<PreviewCode Code="@new(name: null, snippet: "Kbd.Code.Usage")">
4+
<LumexUI.Docs.Client.Pages.Components.Kbd.Examples.Usage />
5+
</PreviewCode>

‎src/LumexUI/Common/Enums/KeyboardKey.cs‎

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
// Copyright (c) LumexUI 2024
2+
// LumexUI licenses this file to you under the MIT license
3+
// See the license here https://github.com/LumexUI/lumexui/blob/main/LICENSE
4+
5+
namespace LumexUI.Common;
6+
7+
/// <summary>
8+
/// Represents common keyboard keys for UI interactions.
9+
/// </summary>
10+
public enum KeyboardKey
11+
{
12+
/// <summary>
13+
/// The Command key (⌘), commonly found on Apple keyboards.
14+
/// </summary>
15+
Command,
16+
17+
/// <summary>
18+
/// The Shift key.
19+
/// </summary>
20+
Shift,
21+
22+
/// <summary>
23+
/// The Control key (Ctrl).
24+
/// </summary>
25+
Control,
26+
27+
/// <summary>
28+
/// The Option key (⌥), commonly found on Apple keyboards.
29+
/// </summary>
30+
Option,
31+
32+
/// <summary>
33+
/// The Alt key (⎇), commonly found on Windows and Linux keyboards.
34+
/// </summary>
35+
Alt,
36+
37+
/// <summary>
38+
/// The Windows key (⊞).
39+
/// </summary>
40+
Win,
41+
42+
/// <summary>
43+
/// The Function (fn) key, often found on laptops.
44+
/// </summary>
45+
Fn,
46+
47+
/// <summary>
48+
/// The Enter key.
49+
/// </summary>
50+
Enter,
51+
52+
/// <summary>
53+
/// The Delete key.
54+
/// </summary>
55+
Delete,
56+
57+
/// <summary>
58+
/// The Escape key (Esc).
59+
/// </summary>
60+
Escape,
61+
62+
/// <summary>
63+
/// The Tab key.
64+
/// </summary>
65+
Tab,
66+
67+
/// <summary>
68+
/// The Caps Lock key.
69+
/// </summary>
70+
CapsLock,
71+
72+
/// <summary>
73+
/// The Up Arrow key.
74+
/// </summary>
75+
Up,
76+
77+
/// <summary>
78+
/// The Right Arrow key.
79+
/// </summary>
80+
Right,
81+
82+
/// <summary>
83+
/// The Down Arrow key.
84+
/// </summary>
85+
Down,
86+
87+
/// <summary>
88+
/// The Left Arrow key.
89+
/// </summary>
90+
Left,
91+
92+
/// <summary>
93+
/// The Page Up key.
94+
/// </summary>
95+
PageUp,
96+
97+
/// <summary>
98+
/// The Page Down key.
99+
/// </summary>
100+
PageDown,
101+
102+
/// <summary>
103+
/// The Home key.
104+
/// </summary>
105+
Home,
106+
107+
/// <summary>
108+
/// The End key.
109+
/// </summary>
110+
End,
111+
112+
/// <summary>
113+
/// The Help key.
114+
/// </summary>
115+
Help,
116+
117+
/// <summary>
118+
/// The Space key (Spacebar).
119+
/// </summary>
120+
Space,
121+
}

‎src/LumexUI/Components/Kbd/KbdConstants.cs‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
// Copyright (c) LumexUI 2024
2+
// LumexUI licenses this file to you under the MIT license
3+
// See the license here https://github.com/LumexUI/lumexui/blob/main/LICENSE
4+
5+
using LumexUI.Common;
6+
7+
namespace LumexUI;
8+
9+
internal static class KbdConstants
10+
{
11+
public static readonly Dictionary<KeyboardKey, string> KeyboardKeys = new()
12+
{
13+
[KeyboardKey.Command] = "⌘",
14+
[KeyboardKey.Shift] = "⇧",
15+
[KeyboardKey.Control] = "⌃",
16+
[KeyboardKey.Option] = "⌥",
17+
[KeyboardKey.Alt] = "⎇",
18+
[KeyboardKey.Win] = "⊞",
19+
[KeyboardKey.Fn] = "fn",
20+
[KeyboardKey.Enter] = "↵",
21+
[KeyboardKey.Delete] = "⌫",
22+
[KeyboardKey.Escape] = "⎋",
23+
[KeyboardKey.Tab] = "⇥",
24+
[KeyboardKey.CapsLock] = "⇪",
25+
[KeyboardKey.Up] = "↑",
26+
[KeyboardKey.Right] = "→",
27+
[KeyboardKey.Down] = "↓",
28+
[KeyboardKey.Left] = "←",
29+
[KeyboardKey.PageUp] = "⇞",
30+
[KeyboardKey.PageDown] = "⇟",
31+
[KeyboardKey.Home] = "↖",
32+
[KeyboardKey.End] = "↘",
33+
[KeyboardKey.Help] = "?",
34+
[KeyboardKey.Space] = "␣",
35+
};
36+
}

‎src/LumexUI/Components/Kbd/KbdSlots.cs‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
// Copyright (c) LumexUI 2024
2+
// LumexUI licenses this file to you under the MIT license
3+
// See the license here https://github.com/LumexUI/lumexui/blob/main/LICENSE
4+
5+
using System.Diagnostics.CodeAnalysis;
6+
7+
using LumexUI.Common;
8+
9+
namespace LumexUI;
10+
11+
/// <summary>
12+
/// Represents the set of customizable slots for the <see cref="LumexKbd"/> component.
13+
/// </summary>
14+
[ExcludeFromCodeCoverage]
15+
public class KbdSlots : SlotBase
16+
{
17+
/// <summary>
18+
/// Gets or sets the CSS class for the abbr slot.
19+
/// </summary>
20+
public string? Abbr { get; set; }
21+
22+
/// <summary>
23+
/// Gets or sets the CSS class for the content slot.
24+
/// </summary>
25+
public string? Content { get; set; }
26+
}

‎src/LumexUI/Components/Kbd/LumexKbd.razor‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
@namespace LumexUI
2+
@inherits LumexComponentBase
3+
4+
@using S = KbdSlots;
5+
@using C = KbdConstants;
6+
7+
<LumexComponent As="@As"
8+
Class="@GetStyles( nameof( S.Base ) )"
9+
Style="@RootStyle"
10+
data-slot="base"
11+
@attributes="@AdditionalAttributes">
12+
@foreach( var key in Keys )
13+
{
14+
<abbr class="@GetStyles( nameof( S.Abbr ) )" title="@key" data-slot="abbr">
15+
@( C.KeyboardKeys.TryGetValue( key, out var symbol ) ? symbol : null )
16+
</abbr>
17+
}
18+
19+
<span class="@GetStyles( nameof( S.Content ) )" data-slot="content">
20+
@ChildContent
21+
</span>
22+
</LumexComponent>

0 commit comments

Comments
 (0)