diff --git a/src/Connected.Components.Showcase.Runner/Connected.Components.Showcase.Runner.csproj b/src/Connected.Components.Showcase.Runner/Connected.Components.Showcase.Runner.csproj index 1c7cf1d..015518e 100644 --- a/src/Connected.Components.Showcase.Runner/Connected.Components.Showcase.Runner.csproj +++ b/src/Connected.Components.Showcase.Runner/Connected.Components.Showcase.Runner.csproj @@ -15,4 +15,11 @@ + + + + + + + diff --git a/src/Connected.Components.Showcase.Runner/MainLayout.razor b/src/Connected.Components.Showcase.Runner/MainLayout.razor index de2be6c..8dd7695 100644 --- a/src/Connected.Components.Showcase.Runner/MainLayout.razor +++ b/src/Connected.Components.Showcase.Runner/MainLayout.razor @@ -1,5 +1,7 @@ @inherits LayoutComponentBase + +
@Body
diff --git a/src/Connected.Components.Showcase.Runner/Pages/Demo.razor b/src/Connected.Components.Showcase.Runner/Pages/Demo.razor index f59846a..eba1596 100644 --- a/src/Connected.Components.Showcase.Runner/Pages/Demo.razor +++ b/src/Connected.Components.Showcase.Runner/Pages/Demo.razor @@ -1,651 +1,877 @@ @page "/demo" - +
-
+
-
-
-
- - - +
+
+ + @* *@ + Open Sidebar - - - - -
-
+
+
+ + Open Filters +
+
+

Borders

+

Use border utilities to quickly style the border, border color and border-radius of an element. + Great for images, buttons, or any other element. Responsive classes are available that use the + same viewport width breakpoints as the grid system. +

+
+

Position

+
+
b-1
+ bt-1 + br-1 + bb-1 + bl-1 + bx-1 + by-1 +
+
+
+
+

Color

+
+ b-1
b-c-core + b-1
b-c-primary + b-1
b-c-secondary + b-1
b-c-success + b-1
b-c-info + b-1
b-c-warning + b-1
b-c-danger + b-1
b-c-white + b-1
b-c-light + b-1
b-c-dark + b-1
b-c-black +
+
+
+
+

Border-radius

+
+ b-1 b-r-0 + b-1 b-r-1 + b-1 b-r-2 + b-1 b-r-3 + b-1 b-r-4 + b-1 b-r-5 + b-1 b-r-circle + b-1 b-r-pill +
+
+
+ + +
+

Colors

+

Convey meaning through color with a handful of color utility classes. Includes support for + styling links with hover states, too. +

+

Color

+
+ text-core + text-primary + text-secondary + text-success + text-info + text-warning + text-danger + text-white + text-light + text-dark + text-black +
-
- - Open Sidebar +
+ 
+                                
+                                <span class="text-core">text-core</span>
+                                <span class="text-primary">text-primary</span>
+                                <span class="text-secondary">text-secondary</span>
+                                <span class="text-success">text-success</span>
+                                <span class="text-info">text-info</span>
+                                <span class="text-warning">text-warning</span>
+                                <span class="text-danger">text-danger</span>
+                                <span class="text-white">text-white</span>
+                                <span class="text-light">text-light</span>
+                                <span class="text-dark">text-dark</span>
+                                <span class="text-black">text-black</span>
+
+
+
+

Background color

+
+
bg-core
+
bg-primary
+
bg-secondary
+
bg-success
+
bg-info
+
bg-warning
+
bg-danger
+
bg-white
+
bg-light
+
bg-dark
+
bg-black
+
+
-
-

Borders

-

Use border utilities to quickly style the border, border color and border-radius of an element. - Great for images, buttons, or any other element. Responsive classes are available that use the - same viewport width breakpoints as the grid system. -

+

Link color

+
+ text-core + text-primary + text-secondary + text-success + text-info + text-warning + text-danger + text-white + text-light + text-dark + text-black +
+
+ + +
+

Text

+

Documentation and examples for common text utilities to control size, alignment, wrapping, + weight, and + more. +

+ + +

Text sizes

+
-

Position

-
-
b-1
- bt-1 - br-1 - bb-1 - bl-1 - bx-1 - by-1 -
-
-
+
This is h5
+

text-small
This is small font + size
+ Lorem + ipsum dolor sit, amet + consectetur + adipisicing + elit. Eum quis neque ullam, eos eaque nam voluptate veniam dolor ex ratione? +

+
-

Color

-
- b-1
b-c-core - b-1
b-c-primary - b-1
b-c-secondary - b-1
b-c-success - b-1
b-c-info - b-1
b-c-warning - b-1
b-c-danger - b-1
b-c-white - b-1
b-c-light - b-1
b-c-dark - b-1
b-c-black -
-
-
+

This is h4

+

No class required
This is base font size
Lorem + ipsum + dolor sit amet consectetur, + adipisicing elit. + Explicabo modi dicta eveniet quia, repudiandae perspiciatis omnis vitae nihil vero + ratione. +

+
-

Border-radius

-
- b-1 b-r-0 - b-1 b-r-1 - b-1 b-r-2 - b-1 b-r-3 - b-1 b-r-4 - b-1 b-r-5 - b-1 b-r-circle - b-1 b-r-pill -
+

This is h3

+

text-medium
This is medium font +
+ Lorem + ipsum + dolor sit, amet consectetur + adipis + elit. Alias praesentium quo est pariatur sed nobis maiores rem aperiam ut voluptas? +

-
- +
+

This is h2

+

text-large
This is large font +
+ Lorem + ipsum + dolor sit, amet consectetur + adipisicing + elit. Obcaecati nihil totam, modi minus excepturi laboriosam maiores. Provident quos est + maiores. +

+
+
+

This is h1

+

text-extralarge
This is + extra + large + font
+ Lorem + ipsum dolor sit amet, + consectetur adipisicing elit. Beatae, modi! +

+
+
+

text-sm-medium +
Medium size text on viewports sized SM (small) or wider. +

+
+
+

text-md-medium +
Medium size text on viewports sized MD (medium) or wider. +

+
+
+

text-lg-medium +
Medium size text on viewports sized LG (large) or wider. +

+
+
+

text-xl-medium +
Medium size text on viewports sized XL (extra-large) or wider. +

+
+ -
-

Colors

-

Convey meaning through color with a handful of color utility classes. Includes support for - styling links with hover states, too. +

+

Text alignment

+

Easily realign text to components with text alignment classes.

-

Color

-
- text-core - text-primary - text-secondary - text-success - text-info - text-warning - text-danger - text-white - text-light - text-dark - text-black -
- -
- 
- 
-<span class="text-core">text-core</span>
-<span class="text-primary">text-primary</span>
-<span class="text-secondary">text-secondary</span>
-<span class="text-success">text-success</span>
-<span class="text-info">text-info</span>
-<span class="text-warning">text-warning</span>
-<span class="text-danger">text-danger</span>
-<span class="text-white">text-white</span>
-<span class="text-light">text-light</span>
-<span class="text-dark">text-dark</span>
-<span class="text-black">text-black</span>
-
-
-
-

Background color

-
-
bg-core
-
bg-primary
-
bg-secondary
-
bg-success
-
bg-info
-
bg-warning
-
bg-danger
-
bg-white
-
bg-light
-
bg-dark
-
bg-black
-
-
- -

Link color

-
- text-core - text-primary - text-secondary - text-success - text-info - text-warning - text-danger - text-white - text-light - text-dark - text-black -
-
- - -
-

Text

-

Documentation and examples for common text utilities to control size, alignment, wrapping, - weight, and - more. -

- - -

Text sizes

-
-
-
This is h5
-

text-small
This is small font - size
- Lorem - ipsum dolor sit, amet - consectetur - adipisicing - elit. Eum quis neque ullam, eos eaque nam voluptate veniam dolor ex ratione? -

+
+
+

text-left

+

Left aligned text on all viewport sizes

-
-

This is h4

-

No class required
This is base font size
Lorem - ipsum - dolor sit amet consectetur, - adipisicing elit. - Explicabo modi dicta eveniet quia, repudiandae perspiciatis omnis vitae nihil vero - ratione. -

+
+
+

text-center

+

Center aligned text on all viewport sizes.

-
-

This is h3

-

text-medium
This is medium font -
- Lorem - ipsum - dolor sit, amet consectetur - adipisicing - elit. Alias praesentium quo est pariatur sed nobis maiores rem aperiam ut voluptas? -

+
+
+

text-right

+

Right aligned text on all viewport sizes.

-
-

This is h2

-

text-large
This is large font -
- Lorem - ipsum - dolor sit, amet consectetur - adipisicing - elit. Obcaecati nihil totam, modi minus excepturi laboriosam maiores. Provident quos est - maiores. -

+
+
+

text-justify

+

Justified text on all viewport sizes. Lorem ipsum dolor sit, amet consectetur + adipisicing elit. Temporibus consequatur nisi amet modi in voluptatum facere + reprehenderit, aut assumenda. Velit.

-
-

This is h1

-

text-extralarge
This is - extra - large - font
- Lorem - ipsum dolor sit amet, - consectetur adipisicing elit. Beatae, modi! -

+
+
+

text-sm-right

+

Right aligned text on viewports sized SM (small) or wider.

-
-

text-sm-medium -
Medium size text on viewports sized SM (small) or wider. -

-
-
-

text-md-medium -
Medium size text on viewports sized MD (medium) or wider. -

-
-
-

text-lg-medium -
Medium size text on viewports sized LG (large) or wider. -

+
+
+

text-md-right

+

Right aligned text on viewports sized MD (medium) or wider.

-
-

text-xl-medium -
Medium size text on viewports sized XL (extra-large) or wider. -

+
+
+

text-lg-right

+

Right aligned text on viewports sized LG (large) or wider.

-
- -
-

Text alignment

-

Easily realign text to components with text alignment classes. -

-
-
-

text-left

-

Left aligned text on all viewport sizes

-
-
-
-

text-center

-

Center aligned text on all viewport sizes.

-
-
-
-

text-right

-

Right aligned text on all viewport sizes.

-
-
-
-

text-justify

-

Justified text on all viewport sizes. Lorem ipsum dolor sit, amet consectetur - adipisicing elit. Temporibus consequatur nisi amet modi in voluptatum facere - reprehenderit, aut assumenda. Velit.

-
-
-
-

text-sm-right

-

Right aligned text on viewports sized SM (small) or wider.

-
-
-
-

text-md-right

-

Right aligned text on viewports sized MD (medium) or wider.

-
-
-
-

text-lg-right

-

Right aligned text on viewports sized LG (large) or wider.

-
-
-
-

text-xl-right

-

Right aligned text on viewports sized XL (extra-large) or wider.

-
+
+
+

text-xl-right

+

Right aligned text on viewports sized XL (extra-large) or wider.

+
-
-

Font weight

-

Quickly change the weight (boldness). -

-
-

text-thin

-
-

This is thin text

-
-
-

text-regular

-
-

This is normal weight text - no class required

-
-
-

text-semibold

-
-

This is semibold text

-
-
-

text-bold

-
-

This is bold text

-
-
-

text-extrabold

-
-

This is extra bold text

-
-
-

text-sm-bold

-
-

Bold text on viewports sized SM (small) or wider.

-
+
+

Font weight

+

Quickly change the weight (boldness). +

+
+

text-thin

+
+

This is thin text

-
- - -
-

Text transform

-

Transform text in components with text capitalization classes or italicize text. -

-
-

text-italic

-
-

This is italic text

-
-
-

text-lowercase

-
-

This is lowercased text

-
-
-

text-uppercase

-
-

This is uppercased text

-
-
-

text-capitalize

-
-

This is capitalized text

-
-
-

text-nowrap

-
- This text should overflow the parent. -
-
-

text-truncate

-
- - This is text is truncated - -
+
+

text-regular

+
+

This is normal weight text - no class required

+
+
+

text-semibold

+
+

This is semibold text

+
+
+

text-bold

+
+

This is bold text

+
+
+

text-extrabold

+
+

This is extra bold text

+
+
+

text-sm-bold

+
+

Bold text on viewports sized SM (small) or wider.

-
+ -
-

Buttons

-

Use custom button styles for actions in forms, dialogs, and more with support for multiple sizes, - states, and more. +

+

Text transform

+

Transform text in components with text capitalization classes or italicize text.

-
-

Examples

-
- - - - - - - - - - -
-
-
-
-

Outline buttons

-
- - - - - - - - - - -
-
-
-
-

Sizes

-
- - +
+

text-italic

+
+

This is italic text

-
- - +
+

text-lowercase

+
+

This is lowercased text

-
- - +
+

text-uppercase

+
+

This is uppercased text

-
-
-
-

Button states

-
- - - +
+

text-capitalize

+
+

This is capitalized text

+
+
+

text-nowrap

+
+ This text should overflow the parent.
-
- - - +
+

text-truncate

+
+ + This is text is truncated +
-
+ + + + +
+

Buttons

+

Use custom button styles for actions in forms, dialogs, and more with support for multiple sizes, + states, and more. +

+
+

Examples

+
+ + + + + + + + + + +
+
+
+
+

Outline buttons

+
+ + + + + + + + + + +
+
+
+
+

Sizes

+
+ + +
+
+ + +
+
+ + +
+
+
+
+

Button states

+
+ + + +
+
+ + + +
+
+
-
-

Radio -

-

Radio buttons allow the user to select a single choice from a group of options. +

+

Radio +

+

Radio buttons allow the user to select a single choice from a group of options. -

-
-
+

+
+
+ +
+ + + + + + +
+ + @*
+
+ + +
-
- +
+ + +
+ +
+ + +
+
*@ + + + +
+
+ -
- +
+ -
- - -
+ +
-
- + + @*
+
+ + +
+ +
+ + +
+ +
+ + +
+
*@ + + + +
+
+ -
- +
+ -
- +
-
+ +
-
+ +
-
-

Input -

-

Inputs buttons allow the user to select a single choice from a group of options. -

+
+

Input +

+

Inputs buttons allow the user to select a single choice from a group of options. +

-
-
+ +
-
- - -
Some helping Text
-
At least 6 characters required
- - - - - - - - +
+ + +
Some helping Text
+
At least 6 characters required
+ + + + + + + -
+ +
-
- - -
Some helping Text
-
At least 6 characters required
- - - - - - - - +
+ + +
Some helping Text
+
At least 6 characters required
+ + + + + + + -
+ +
-
- - -
Some helping Text
-
At least 6 characters required
- - - - - - - - +
+ + +
Some helping Text
+
At least 6 characters required
+ + + + + + + -
+ +
-
- - -
Some helping Text
-
At least 6 characters required
- - - - - - - - +
+ + +
Some helping Text
+
At least 6 characters required
+ + + + + + + -
+ +
-
- - - - - +
+ + + + + + +
+ + +
+ + + + + + + + + + + + + +
+
+
+
Header
+ + Action + Another action +
+ Something else here +
+
-
- - - - +
+ + +
Some helping Text
+
At least 6 characters required
+ + - - - + +
+ + +
+
+ + +
+ + +
+ + +
+ +

Grid

+
+
1
+
2
+
3
+
4
+
5
+
6
+
7
+
8
+
9
+
10
+
11
+
12
+
+ + + + +
+
+

Data Grid

+

Data grid DENSE + COLLAPSE + SELECT

+ + +
+
+ +
+
+
+
Chip label text
+
+
+
+ +
+
+
+
Chip label text
+
+
+
+ + +
+
+
+
Chip label text
+
+
+
+ + +
+
+
+
Chip label text
+
+
+
+ +
+
+
+
+ + + + +
Header
@@ -657,59 +883,293 @@
+
+
+
+
+ + +
+ +
+ +
+ +
+ @* *@ + +
+
+
+
+
Product 1
+ 0023 001445669 1 +
Product serial code
+
+
+ +
Material 29
+
+ +
+ +
77,29
+
+
+ +
+
+ +
+
+
+
+ + + -
- - -
Some helping Text
-
At least 6 characters required
- - - - +
+

Form wizard

+ + +
+
+
+
Description for step 1
+ @*
+
+
+
+
+
+
+
*@ + +
+ + +
Some helping Text
+
At least 6 characters required
+ + + + + + + + - - + +
+ +
+ + +
Some helping Text
+
At least 6 characters required
+ + + + + + + + - +
- -
-
- - + + +
+
2
- +
-
+
+ +
+ + +
+ +
-
+
+
+
+
+
+
-

Grid

-
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
-
11
-
12
-
+
+ + + + + + + +
@code { @@ -720,12 +1180,39 @@ sidebarClosed = string.IsNullOrWhiteSpace(sidebarClosed) ? "close" : ""; } + private string sidebarRightClosed { get; set; } = "close-r"; + + private void ToggleSidebarRight() + { + sidebarRightClosed = string.IsNullOrWhiteSpace(sidebarRightClosed) ? "close-r" : ""; + } - private string NavClosed { get; set; } = "showMenu"; + + + private string NavClosed { get; set; } = ""; private void ToggleNav() { - NavClosed = string.IsNullOrWhiteSpace(NavClosed) ? "showMenu" : ""; + NavClosed = string.IsNullOrWhiteSpace(NavClosed) ? "show" : ""; } + + private string NextSlide { get; set; } = ""; + + private void ToggleNextSlide() + { + NextSlide = string.IsNullOrWhiteSpace(NextSlide) ? "next" : ""; + } + + + private string PreviousSlide { get; set; } = ""; + + private void TogglePreviousSlide() + { + PreviousSlide = string.IsNullOrWhiteSpace(PreviousSlide) ? "previous" : ""; + } } + + + + diff --git a/src/Connected.Components.Showcase.Runner/Program.cs b/src/Connected.Components.Showcase.Runner/Program.cs index 568153e..370ca59 100644 --- a/src/Connected.Components.Showcase.Runner/Program.cs +++ b/src/Connected.Components.Showcase.Runner/Program.cs @@ -1,6 +1,7 @@ using Connected.Components.Showcase.Runner; using Microsoft.AspNetCore.Components.Web; using Microsoft.AspNetCore.Components.WebAssembly.Hosting; +using Connected.Services; internal class Program { @@ -12,6 +13,8 @@ internal class Program builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) }); + builder.Services.AddModalDialogService(); + await builder.Build().RunAsync(); } } \ No newline at end of file diff --git a/src/Connected.Components.Showcase.Runner/wwwroot/index.html b/src/Connected.Components.Showcase.Runner/wwwroot/index.html index 1c123c0..3a6c8ca 100644 --- a/src/Connected.Components.Showcase.Runner/wwwroot/index.html +++ b/src/Connected.Components.Showcase.Runner/wwwroot/index.html @@ -3,6 +3,7 @@ + Connected.Components.Showcase.Runner @@ -27,4 +28,4 @@ - + \ No newline at end of file diff --git a/src/Connected.Components/Components/Button.razor b/src/Connected.Components/Components/Button.razor index 0bbb79b..1465f49 100644 --- a/src/Connected.Components/Components/Button.razor +++ b/src/Connected.Components/Components/Button.razor @@ -1,44 +1,9 @@ - diff --git a/src/Connected.Components/Components/Button.razor.cs b/src/Connected.Components/Components/Button.razor.cs index 3daca4b..c25d239 100644 --- a/src/Connected.Components/Components/Button.razor.cs +++ b/src/Connected.Components/Components/Button.razor.cs @@ -1,8 +1,6 @@ using Connected.Utilities; using Microsoft.AspNetCore.Components; using Microsoft.AspNetCore.Components.Web; -using static Connected.Colors; -using System; namespace Connected.Components; public partial class Button @@ -28,10 +26,10 @@ public partial class Button /// /// Size of the button. /// Options: Size.[Small,Medium,Large,FullWidth] - /// Default: Size.Large + /// Default: Size.Medium /// [Parameter] - public Size Size { get; set; } = Size.Large; + public Size Size { get; set; } = Size.Medium; /// /// Text shown inside the button @@ -48,29 +46,6 @@ public partial class Button [Parameter] public bool Disabled { get; set; } = false; - /// - /// Glyph (Icon) inside the button. - /// Options: SVG string --> Icons - /// Default: string.Empty - /// - [Parameter] - public string Glyph { get; set; } = string.Empty; - - /// - /// Position of the glyph relative to button Text parameter. If Glyph parameter == string.Empty this parameter is ignored - /// Options: Position.[left,top,right,bottom] - /// Default: Position.left - /// - [Parameter] - public Position GlyphPosition { get; set; } = Position.Left; - - /// - /// HEX string of the color for the glyph. If Glyph parameter is empty this parameter is ignored - /// Options: any HEX color string - /// Default: Black (#000000) - /// - [Parameter] - public string GlyphColor { get; set; } = "#000000"; /// /// User defined custom class added on top of default generated classes @@ -90,7 +65,7 @@ public partial class Button /// /// User defined custom style - /// Options: any user defined string with valid CSS style + /// Options: any valid CSS style /// Default: string.Empty /// [Parameter] @@ -115,10 +90,21 @@ public partial class Button #region Styling + public string StyleList + { + get + { + return new StyleBuilder() + .AddStyle(Style) + .Build(); + } + } + + /// /// Generated class list for button based on user parameters /// - private string ClassList + public string ClassList { get { @@ -134,7 +120,7 @@ public partial class Button /// /// Generated class list for button based on user parameters /// - private string ContentClassList + public string ContentClassList { get { diff --git a/src/Connected.Components/Components/CheckBox.razor b/src/Connected.Components/Components/CheckBox.razor index 899ccaf..6625a92 100644 --- a/src/Connected.Components/Components/CheckBox.razor +++ b/src/Connected.Components/Components/CheckBox.razor @@ -2,12 +2,22 @@ @inherits InputBase; -
-@if (Checked) -{ - -} else { - -} - -
\ No newline at end of file + + + diff --git a/src/Connected.Components/Components/CheckBox.razor.cs b/src/Connected.Components/Components/CheckBox.razor.cs index 12bd057..193688c 100644 --- a/src/Connected.Components/Components/CheckBox.razor.cs +++ b/src/Connected.Components/Components/CheckBox.razor.cs @@ -1,21 +1,100 @@ using Connected.Models; +using Connected.Utilities; using Microsoft.AspNetCore.Components; namespace Connected.Components; -public partial class CheckBox: InputBase +public partial class CheckBox : InputBase { + /// + /// State of the CheckBox + /// Options: true, false + /// Default: false + /// [Parameter] public bool Checked { get; set; } = false; + + /// + /// ID for the CheckBox + /// [Parameter, EditorRequired] - public string Id { get; set; } + public string? Id { get; set; } + + /// + /// Event when the checked is changed + /// + [Parameter] + public EventCallback CheckedChanged { get; set; } + + /// + /// OPTIONAL - Style for the input + /// Options: any valid CSS style + /// Default: string.Empty + /// + [Parameter] + public string Style { get; set; } = string.Empty; + /// + /// OPTIONAL - Class for the label of input + /// Options: any valid Class name or multiple separated with space + /// Default: string.Empty + /// [Parameter] - public EventCallback CheckedChange { get; set; } - public async Task OnChange(ChangeEventArgs args) + public string LabelClass { get; set; } = string.Empty; + + /// + /// OPTIONAL - Style for the label of input + /// Options: any valid CSS style + /// Default: string.Empty + /// + [Parameter] + public string LabelStyle { get; set; } = string.Empty; + + /// + /// OnChange event when checked is changed + /// + /// + public async Task OnChange() { - Checked = (bool)args.Value; - CheckedChange.InvokeAsync(Checked); + Checked = !Checked; + await CheckedChanged.InvokeAsync(Checked); } + private string ClassList + { + get + { + return new CssBuilder("checkbox-input") + .AddClass(base.Class) + .Build(); + } + } + private string StyleList + { + get + { + return new StyleBuilder() + .AddStyle(Style) + .Build(); + } + } + + private string LabelClassList + { + get + { + return new CssBuilder("checkbox-label") + .AddClass(LabelClass) + .Build(); + } + } + private string LabelStyleList + { + get + { + return new StyleBuilder() + .AddStyle(LabelStyle) + .Build(); + } + } } diff --git a/src/Connected.Components/Components/CheckBoxGroup.razor b/src/Connected.Components/Components/CheckBoxGroup.razor deleted file mode 100644 index 68efc7c..0000000 --- a/src/Connected.Components/Components/CheckBoxGroup.razor +++ /dev/null @@ -1,9 +0,0 @@ -@using Connected.Models; - -@inherits InputBase; - -
-
- @ChildContent -
-
\ No newline at end of file diff --git a/src/Connected.Components/Components/CheckBoxGroup.razor.cs b/src/Connected.Components/Components/CheckBoxGroup.razor.cs deleted file mode 100644 index d1512cb..0000000 --- a/src/Connected.Components/Components/CheckBoxGroup.razor.cs +++ /dev/null @@ -1,11 +0,0 @@ -using Microsoft.AspNetCore.Components; - -namespace Connected.Components; -public partial class CheckBoxGroup -{ - [Parameter, EditorRequired] - public string Id { get; set; } - - [Parameter] - public RenderFragment ChildContent { get; set; } -} diff --git a/src/Connected.Components/Components/Glyph.razor b/src/Connected.Components/Components/Glyph.razor index cc4073f..429fc6d 100644 --- a/src/Connected.Components/Components/Glyph.razor +++ b/src/Connected.Components/Components/Glyph.razor @@ -1,6 +1,6 @@  -
- +
+ @((MarkupString)SVG)
\ No newline at end of file diff --git a/src/Connected.Components/Components/Glyph.razor.cs b/src/Connected.Components/Components/Glyph.razor.cs index 62d88d3..5a45c80 100644 --- a/src/Connected.Components/Components/Glyph.razor.cs +++ b/src/Connected.Components/Components/Glyph.razor.cs @@ -2,59 +2,87 @@ using Microsoft.AspNetCore.Components; using Microsoft.AspNetCore.Components.Web; -namespace Connected.Components +namespace Connected.Components; + +public partial class Glyph { - public partial class Glyph - { - [Parameter] - public string SVG { get; set; } = string.Empty; - - [Parameter] - public string Color { get; set; } = "#000000"; - - [Parameter] - public int Width { get; set; } = 24; - [Parameter] - public int Height { get; set; } = 24; - - private string WidthString - { - get - { - return Width.ToString() + "px"; - } - } - - private string HeightString + /// + /// SVG markup string for glyph + /// Options: any valid SVG markup string + /// Default: string.Empty + /// + [Parameter] + public string SVG { get; set; } = string.Empty; + + /// + /// Color of the glyph + /// Options: Color.[Core,Primary,Secondary,Success,Info,Warning,Danger,White,Light,Dark] + /// Default: Color.Dark + /// + [Parameter] + public Color Color { get; set; } = Color.Dark; + + /// + /// Width of the glyph in px + /// Options: Any positive integer number + /// Default: 24 + /// + [Parameter] + public int Width { get; set; } = 24; + + /// + /// Height of the glyph in px + /// Options: Any positive integer number + /// Default: 24 + /// + [Parameter] + public int Height { get; set; } = 24; + + /// + /// Class name or multiple classes separated by space + /// Options: Any valid class name or names separated by space + /// Default: string.Empty + /// + [Parameter] + public string Class { get; set; } = string.Empty; + + private string GlyphClassList + { + get { - get - { - return Width.ToString() + "px"; - } + return new CssBuilder() + .AddClass("color-"+Helper.GetEnumDescription(Color)) + .AddClass(Class) + .Build(); } + } - [Parameter] - public string Class { get; set; } = string.Empty; - - private string GlyphClassList - { - get - { - return new CssBuilder() - .AddClass(Class) - .Build(); - } - } - - [Parameter] - /// - /// Glyph click event. - /// - public EventCallback Click { get; set; } - protected async Task OnClick(MouseEventArgs e) - { - await Click.InvokeAsync(e); + /// + /// User defined style for the glyph + /// Options: Any valid CSS style + /// Default: string.Empty + /// + [Parameter] + public string Style { get; set; } = string.Empty; + private string GlyphStyleList + { + get + { + return new StyleBuilder() + .AddStyle("width: "+Width.ToString()+"px; height:"+Height.ToString()+"px; overflow: hidden") + .AddStyle(Style) + .Build(); } } + + [Parameter] + /// + /// Glyph click event. + /// + public EventCallback Click { get; set; } + protected async Task OnClick(MouseEventArgs e) + { + await Click.InvokeAsync(e); + } } \ No newline at end of file diff --git a/src/Connected.Components/Components/GlyphButton.razor b/src/Connected.Components/Components/GlyphButton.razor new file mode 100644 index 0000000..eff05e6 --- /dev/null +++ b/src/Connected.Components/Components/GlyphButton.razor @@ -0,0 +1,46 @@ +@inherits Button + + diff --git a/src/Connected.Components/Components/GlyphButton.razor.cs b/src/Connected.Components/Components/GlyphButton.razor.cs new file mode 100644 index 0000000..7aca7a1 --- /dev/null +++ b/src/Connected.Components/Components/GlyphButton.razor.cs @@ -0,0 +1,34 @@ +using Microsoft.AspNetCore.Components; + +namespace Connected.Components; +public partial class GlyphButton : Button +{ + #region Parameters + + /// + /// Glyph (Icon) inside the button. + /// Options: SVG string --> Icons + /// Default: string.Empty + /// + [Parameter, EditorRequired] + public string Glyph { get; set; } = string.Empty; + + /// + /// Position of the glyph relative to button Text parameter. If Glyph parameter == string.Empty this parameter is ignored + /// Options: Position.[left,top,right,bottom] + /// Default: Position.left + /// + [Parameter] + public Position GlyphPosition { get; set; } = Position.Left; + + /// + /// Color for the glyph. If Glyph parameter is empty this parameter is ignored + /// Options: Color.[Core,Primary,Secondary,Success,Info,Warning,Danger,White,Light,Dark] + /// Default: Color.Dark + /// + [Parameter] + public Color GlyphColor { get; set; } = Color.Dark; + + #endregion + +} diff --git a/src/Connected.Components/Components/Link.razor b/src/Connected.Components/Components/Link.razor index deea63d..b4863c4 100644 --- a/src/Connected.Components/Components/Link.razor +++ b/src/Connected.Components/Components/Link.razor @@ -1,7 +1,6 @@ - + @Text diff --git a/src/Connected.Components/Components/Link.razor.cs b/src/Connected.Components/Components/Link.razor.cs index d9562e1..dfdd460 100644 --- a/src/Connected.Components/Components/Link.razor.cs +++ b/src/Connected.Components/Components/Link.razor.cs @@ -1,49 +1,86 @@ -using Connected.Utilities; +using Connected.Enums; +using Connected.Utilities; using Microsoft.AspNetCore.Components; namespace Connected.Components; public partial class Link { - [Parameter, EditorRequired] - public string Url { get; set; } = string.Empty; - - [Parameter, EditorRequired] - public string Text { get; set; } = string.Empty; - - [Parameter, EditorRequired] - public string Target { get; set; } = "_self"; - - [Parameter] - public string Class { get; set; } = string.Empty; - - private string LinkClassList - { - get - { - return new CssBuilder() - .AddClass(Class) - .Build(); - } - } - - [Parameter] - public string Style { get; set; } = string.Empty; - - private string LinkStyleList - { - get - { - return new StyleBuilder() - .AddStyle(Style) - .Build(); - } - } - - protected override async Task OnParametersSetAsync() - { - if (string.IsNullOrEmpty(Text)) Text = Url; - await base.OnParametersSetAsync(); - } + /// + /// URL of the link + /// Options: Any valid web page adress + /// Default: string.Empty + /// + [Parameter, EditorRequired] + public string Url { get; set; } = string.Empty; + + /// + /// Text shown for the link. If this is not provided URL is used + /// Options: Any valid string + /// Default: string.Empty + /// + [Parameter] + public string Text { get; set; } = string.Empty; + + /// + /// Target where the link shall open + /// Options: Target.[Self,Parent,Top,Blank] + /// Default: Target.Self + /// + [Parameter] + public Target Target { get; set; } = Target.Self; + + private string _target + { + get + { + return Helper.GetEnumDescription(Target); + } + } + + /// + /// Class name or multiple classes separated by space + /// Options: Any valid class name or names separated by space + /// Default: string.Empty + /// + [Parameter] + public string Class { get; set; } = string.Empty; + + private string LinkClassList + { + get + { + return new CssBuilder() + .AddClass(Class) + .Build(); + } + } + + /// + /// Style string for the link + /// Options: Any valid CSS style + /// Default: string.Empty + /// + [Parameter] + public string Style { get; set; } = string.Empty; + + private string LinkStyleList + { + get + { + return new StyleBuilder() + .AddStyle(Style) + .Build(); + } + } + + protected override async Task OnInitializedAsync() + { + //if Text parameter is not provided we set it to match URL + if (string.IsNullOrEmpty(Text)) + Text = Url; + + await base.OnInitializedAsync(); + } } diff --git a/src/Connected.Components/Components/ModalDialog.razor b/src/Connected.Components/Components/ModalDialog.razor new file mode 100644 index 0000000..74bf5df --- /dev/null +++ b/src/Connected.Components/Components/ModalDialog.razor @@ -0,0 +1,25 @@ +@using Connected.Models.Modal; +@if (IsVisible) +{ +
+
+
+ @if (!ModalOptions.NoHeader) + { +
+

@Title

+
+ } +
+ @Content +
+
+ @foreach (ModalButton button in buttons) + { + + } +
+
+
+
+} \ No newline at end of file diff --git a/src/Connected.Components/Components/ModalDialog.razor.cs b/src/Connected.Components/Components/ModalDialog.razor.cs new file mode 100644 index 0000000..9c41215 --- /dev/null +++ b/src/Connected.Components/Components/ModalDialog.razor.cs @@ -0,0 +1,108 @@ +using Connected.Models.Modal; +using Connected.Services; +using Microsoft.AspNetCore.Components; +using Microsoft.AspNetCore.Components.Web; + +namespace Connected.Components; +public partial class ModalDialog : IDisposable +{ + [Inject] ModalDialogService? ModalService { get; set; } + + protected ElementReference root; + protected bool IsVisible { get; set; } + protected string? Title { get; set; } + protected RenderFragment? Content { get; set; } + protected bool OverlayClickToClose { get; set; } = true; + + protected List buttons { get; set; } = new(); + + protected ModalOptions? ModalOptions { get; set; } + + + protected override void OnInitialized() + { + ModalService.OnShow += ShowModal; + ModalService.OnClose += CloseModal; + } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + if (IsVisible) + await root.FocusAsync(); + } + + + public void ShowModal(string title, RenderFragment content, List buttons, ModalOptions options) + { + Title = title; + Content = content; + IsVisible = true; + + ModalOptions = options; + this.buttons = buttons; + + StateHasChanged(); + } + + public void CloseModal(ModalButton? button) + { + if (button is not null) + { + if (button.CloseDialogOnClick) + { + CloseModal(); + } + button.OnClickEvent.Delegate.DynamicInvoke(button.OnClickEvent.args); + } + StateHasChanged(); + } + + public void CloseModal() + { + IsVisible = false; + Title = ""; + Content = null; + StateHasChanged(); + } + + + + public void Dispose() + { + if (ModalService is not null) + { + ModalService.OnShow -= ShowModal; + ModalService.OnClose -= CloseModal; + } + } + + public void CheckEscape(KeyboardEventArgs args) + { + if (!ModalOptions.DisableEscKey) + { + var key = args.Key.ToLower(); + if (key.Equals("escape")) + { + CloseModal(); + } + } + } + + public void CloseIfEnabled(MouseEventArgs args) + { + if (!ModalOptions.DisableBackdropClick) + { + if (OverlayClickToClose) + { + CloseModal(); + } + } + OverlayClickToClose = true; + } + + public void PreventClose(MouseEventArgs args) + { + OverlayClickToClose = false; + } + +} \ No newline at end of file diff --git a/src/Connected.Components/Components/MultilineInput.razor b/src/Connected.Components/Components/MultilineInput.razor new file mode 100644 index 0000000..154c3d0 --- /dev/null +++ b/src/Connected.Components/Components/MultilineInput.razor @@ -0,0 +1,45 @@ +@using Connected.Models; + +@inherits InputBase; + +
+