Skip to content

Commit 21f6f24

Browse files
mckaragozmckaragoz
committed
Implement Component
1 parent 86d5600 commit 21f6f24

16 files changed

Lines changed: 566 additions & 73 deletions

File tree

‎docs/CodeBeam.MudBlazor.Extensions.Docs.Server/Pages/_Layout.cshtml‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@700;900&display=swap" rel="stylesheet">
1414
<link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />
1515
<link href="_content/CodeBeam.MudBlazor.Extensions/MudExtensions.min.css" rel="stylesheet" />
16+
<link href="_content/CodeBeam.MudBlazor.Extensions.Code/prism/prism.min.css" rel="stylesheet" />
1617
<component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
1718
</head>
1819
<body>
@@ -32,5 +33,6 @@
3233
<script src="_framework/blazor.server.js"></script>
3334
<script src="_content/MudBlazor/MudBlazor.min.js"></script>
3435
<script src="_content/CodeBeam.MudBlazor.Extensions/MudExtensions.min.js"></script>
36+
<script src="_content/CodeBeam.MudBlazor.Extensions.Code/prism/prism.min.js"></script>
3537
</body>
3638
</html>

‎docs/CodeBeam.MudBlazor.Extensions.Docs.Wasm/wwwroot/CodeBeam.MudBlazor.Extensions.xml‎

Lines changed: 18 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/CodeBeam.MudBlazor.Extensions.Docs/Pages/Components/CodeViewer/CodeViewerPage.razor‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
@page "/mudcodeviewer"
2+
@namespace MudExtensions.Docs.Pages
3+
4+
<ExamplePage Component="typeof(MudCodeViewer)">
5+
<ExampleCard ComponentName="CodeViewer" ExampleName="CodeViewerExample1" Title="Usage" AliasName="usage" Description="MudCodeViewer can show code blocks with given Code parameter or directly placed as ChildContent render fragment.">
6+
<CodeViewerExample1 />
7+
</ExampleCard>
8+
9+
<ExampleCard ComponentName="CodeViewer" ExampleName="CodeViewerExample2" Title="Visual" AliasName="visual" Description="MudCodeViewer can be visually configured with line numbers, header etc.">
10+
<CodeViewerExample2 />
11+
</ExampleCard>
12+
13+
<ExampleCard ComponentName="CodeViewer" ExampleName="CodeViewerExample3" Title="Wrap" AliasName="usage" Description="MudCodeViewer can wrap long code lines.">
14+
<CodeViewerExample3 />
15+
</ExampleCard>
16+
</ExamplePage>

‎docs/CodeBeam.MudBlazor.Extensions.Docs/Pages/Components/CodeViewer/Examples/CodeViewerExample1.razor‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
@namespace MudExtensions.Docs.Examples
2+
3+
<MudStack>
4+
<MudCodeViewer Code="@_code" />
5+
6+
<MudCodeViewer>
7+
@("""
8+
// This code is written direcly as RenderFragment
9+
public class MudCodeViewer
10+
{
11+
public string Language { get; set; } = "csharp";
12+
13+
public void Render()
14+
{
15+
Console.WriteLine("MudExtensions Code Viewer");
16+
}
17+
}
18+
""")
19+
</MudCodeViewer>
20+
</MudStack>
21+
22+
23+
@code {
24+
private string _code = """
25+
// This is a sample code as string parameter.
26+
public class MudCodeViewer
27+
{
28+
public string Language { get; set; } = "csharp";
29+
30+
public void Render()
31+
{
32+
Console.WriteLine("MudExtensions Code Viewer");
33+
}
34+
}
35+
""";
36+
}

‎docs/CodeBeam.MudBlazor.Extensions.Docs/Pages/Components/CodeViewer/Examples/CodeViewerExample2.razor‎

Lines changed: 149 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
1+
@namespace MudExtensions.Docs.Examples
2+
3+
<MudGrid>
4+
<MudItem xs="12" sm="8" Class="d-flex flex-column gap-8 align-center justify-center">
5+
<MudCodeViewer @ref="@_codeViewer" Class="mud-width-full" Language="@_language" Code="@_sampleCode" ShowLineNumbers="@_showLineNumbers" ShowHeader="@_showHeader"
6+
EnableDefaultBackground="_enableDefaultBackground" ShowCopyButton="@_showCopyButton" />
7+
</MudItem>
8+
9+
<MudItem xs="12" sm="4">
10+
<MudStack Spacing="2">
11+
<MudSwitchM3 @bind-Value="@_showLineNumbers" Label="Line Numbers" Color="Color.Secondary" />
12+
<MudSwitchM3 @bind-Value="@_showCopyButton" Label="Copy Button" Color="Color.Secondary" />
13+
<MudSwitchM3 @bind-Value="@_showHeader" Label="Header" Color="Color.Secondary" />
14+
<MudSwitchM3 @bind-Value="@_enableDefaultBackground" Label="Enable Default Background" Color="Color.Secondary" />
15+
<MudSelectExtended T="CodeLanguage" Value="_language" ValueChanged="@OnLanguageChanged" ItemCollection="@(Enum.GetValues<CodeLanguage>())" Variant="Variant.Outlined" Dense="true" />
16+
<MudButton OnClick="@(() => _codeViewer.RefreshAsync())">Refresh</MudButton>
17+
</MudStack>
18+
</MudItem>
19+
</MudGrid>
20+
21+
@code {
22+
private MudCodeViewer _codeViewer = default!;
23+
private CodeLanguage _language = CodeLanguage.CSharp;
24+
private string _sampleCode = string.Empty;
25+
private bool _showLineNumbers = false;
26+
private bool _showHeader = true;
27+
private bool _enableDefaultBackground = true;
28+
private bool _showCopyButton = true;
29+
30+
protected override void OnInitialized()
31+
{
32+
_sampleCode = GetSampleCode(_language);
33+
}
34+
35+
private void OnLanguageChanged(CodeLanguage lang)
36+
{
37+
_language = lang;
38+
_sampleCode = GetSampleCode(lang);
39+
}
40+
41+
private string GetSampleCode(CodeLanguage lang)
42+
{
43+
return lang switch
44+
{
45+
CodeLanguage.CSharp => """
46+
public class MudCodeViewer
47+
{
48+
public string Language { get; set; } = "csharp";
49+
50+
public void Render()
51+
{
52+
Console.WriteLine("MudExtensions Code Viewer");
53+
}
54+
}
55+
""",
56+
57+
CodeLanguage.Razor => """
58+
@page "/counter"
59+
60+
<MudButton Color="Color.Primary" OnClick="Increment">
61+
Click me
62+
</MudButton>
63+
64+
<p>Current count: @_count</p>
65+
66+
@code {
67+
private int _count;
68+
69+
private void Increment()
70+
{
71+
_count++;
72+
}
73+
}
74+
""",
75+
76+
CodeLanguage.JavaScript => """
77+
function highlightCode() {
78+
console.log("Prism highlight triggered");
79+
}
80+
81+
document.addEventListener("DOMContentLoaded", highlightCode);
82+
""",
83+
84+
CodeLanguage.Json => """
85+
{
86+
"name": "MudExtensions",
87+
"version": "1.0.0",
88+
"features": [
89+
"CodeViewer",
90+
"QR",
91+
"SignaturePad"
92+
]
93+
}
94+
""",
95+
96+
CodeLanguage.Yaml => """
97+
name: MudExtensions
98+
version: 1.0.0
99+
features:
100+
- CodeViewer
101+
- QR
102+
- SignaturePad
103+
""",
104+
105+
CodeLanguage.Sql => """
106+
SELECT Id, Name
107+
FROM Users
108+
WHERE IsActive = 1
109+
ORDER BY CreatedDate DESC;
110+
""",
111+
112+
CodeLanguage.PowerShell => """
113+
Get-Process | Where-Object { $_.CPU -gt 100 }
114+
""",
115+
116+
CodeLanguage.Markup => """
117+
<div class="mud-codeviewer">
118+
<pre><code>Example</code></pre>
119+
</div>
120+
""",
121+
CodeLanguage.Css => """
122+
:root {
123+
--code-bg: var(--mud-palette-background-gray);
124+
--code-border: rgba(0, 0, 0, 0.08);
125+
}
126+
127+
/* Code viewer container */
128+
.mud-codeviewer {
129+
position: relative;
130+
border-radius: 8px;
131+
background: var(--code-bg);
132+
transition: background 0.2s ease-in-out;
133+
}
134+
135+
.mud-codeviewer:hover {
136+
background: var(--mud-palette-surface);
137+
}
138+
139+
@media (max-width: 600px) {
140+
.mud-codeviewer-header {
141+
font-size: 0.65rem;
142+
}
143+
}
144+
""",
145+
146+
_ => "// No sample available"
147+
};
148+
}
149+
}

‎docs/CodeBeam.MudBlazor.Extensions.Docs/Pages/Components/CodeViewer/Examples/CodeViewerExample3.razor‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
@namespace MudExtensions.Docs.Examples
2+
3+
<MudGrid>
4+
<MudItem xs="12" sm="8" Class="d-flex flex-column gap-8 align-center justify-center">
5+
6+
<MudCodeViewer Class="mud-width-full" Code="@SampleCode" ShowLineNumbers="true" ShowHeader="@_showHeader" Wrap="@_wrap" />
7+
</MudItem>
8+
9+
<MudItem xs="12" sm="4">
10+
<MudStack Spacing="2">
11+
<MudSwitchM3 @bind-Value="_showHeader" Label="Header" Color="Color.Secondary" />
12+
<MudSwitchM3 @bind-Value="_wrap" Label="Wrap Lines" Color="Color.Secondary" />
13+
</MudStack>
14+
</MudItem>
15+
</MudGrid>
16+
17+
@code {
18+
private bool _showHeader = true;
19+
private bool _wrap = false;
20+
21+
string SampleCode = """
22+
public class LongLineExample
23+
{
24+
public string ExtremelyLongPropertyNameThatKeepsGoingAndGoingAndGoingAndGoingAndGoingAndGoingAndGoing { get; set; }
25+
26+
public void LongLinqQuery()
27+
{
28+
var result = Enumerable.Range(1, 100)
29+
.Where(x => x % 2 == 0)
30+
.Select(x => new { Number = x, Square = x * x, Cube = x * x * x })
31+
.OrderByDescending(x => x.Cube)
32+
.ThenBy(x => x.Number)
33+
.ToList();
34+
35+
Console.WriteLine("This is a very very very very very very very very very very very very very very very very long string that normally would overflow horizontally and create a scrollbar if wrapping is disabled.");
36+
}
37+
38+
public void LongJson()
39+
{
40+
var json = "{ \"id\": 1, \"name\": \"VeryLongNameThatDoesNotBreak\", \"description\": \"This JSON line is intentionally written in a single line to test horizontal scrolling behavior in the MudCodeViewer component.\" }";
41+
42+
Console.WriteLine(json);
43+
}
44+
}
45+
""";
46+
}

‎docs/CodeBeam.MudBlazor.Extensions.Docs/Pages/Index.razor‎

Lines changed: 0 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -145,23 +145,6 @@
145145
Description="A basic API list for all components." />
146146
</MudStack>
147147

148-
<MudCodeViewer Language="csharp" Code="@SampleCode" />
149-
150-
@code {
151-
string SampleCode = """
152-
public class Test
153-
{
154-
public string Name { get; set; }
155-
156-
public void SayHello()
157-
{
158-
Console.WriteLine("Hello World");
159-
}
160-
}
161-
""";
162-
}
163-
164-
165148
<MudContainer Class="mt-16" MaxWidth="MaxWidth.Large">
166149
<MudToolBar Gutters="false" Dense="true">
167150
<MudText Typo="Typo.body1"><b>OpenSource © 2022-@DateTime.Now.Year CodeBeam.</b> @Version</MudText>

‎docs/CodeBeam.MudBlazor.Extensions.Docs/Services/MudExtensionsDocsService.cs‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ public class MudExtensionsDocsService
1010
new MudExtensionComponentInfo() {Title = "MudBarcode", Component = typeof(MudBarcode), Usage = ComponentUsage.Display, IsUnique = true, Description = "A QR and barcode viewer with defined value."},
1111
new MudExtensionComponentInfo() {Title = "MudChipField", Component = typeof(MudChipField<>), Usage = ComponentUsage.Input, IsUnique = true, Description = "A textfield which transform a text to a chip when pressed pre-defined key."},
1212
new MudExtensionComponentInfo() {Title = "MudCodeInput", Component = typeof(MudCodeInput<>), Usage = ComponentUsage.Input, IsUnique = true, Description = "A group of textfields that each one contains a char."},
13+
new MudExtensionComponentInfo() {Title = "MudCodeViewer", Component = typeof(MudCodeViewer), Usage = ComponentUsage.Display, IsUnique = true, Description = "A viewer for code blocks with basic editable options."},
1314
new MudExtensionComponentInfo() {Title = "MudColorProvider", Component = typeof(MudColorProvider), Usage = ComponentUsage.Utility, IsUnique = true, Description = "An extension for primary, secondary and tertiary colors to support Material 3.", IsMaterial3 = true},
1415
new MudExtensionComponentInfo() {Title = "MudComboBox", Component = typeof(MudComboBox<>), RelatedComponents = new List<Type>() {typeof(MudComboBoxItem<string>)}, Usage = ComponentUsage.Input, IsUnique = true, Description = "Unites MudSelect and MudAutocomplete features."},
1516
new MudExtensionComponentInfo() {Title = "MudCssManager", Component = typeof(MudCssManager), Usage = ComponentUsage.Utility, IsUnique = true, IsUtility = true, Description = "Directly and dynamically get or set component's css property."},

‎src/CodeBeam.MudBlazor.Extensions.Code/CodeLanguage.cs‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
using System.ComponentModel;
2+
3+
namespace MudExtensions;
4+
5+
#pragma warning disable CS1591
6+
public enum CodeLanguage
7+
{
8+
[Description("csharp")]
9+
CSharp,
10+
[Description("razor")]
11+
Razor,
12+
[Description("javascript")]
13+
JavaScript,
14+
[Description("json")]
15+
Json,
16+
[Description("css")]
17+
Css,
18+
[Description("sql")]
19+
Sql,
20+
[Description("yaml")]
21+
Yaml,
22+
[Description("powershell")]
23+
PowerShell,
24+
[Description("markup")]
25+
Markup
26+
}

0 commit comments

Comments
 (0)