diff --git a/.gitignore b/.gitignore index 9606eee..7ae34d7 100644 --- a/.gitignore +++ b/.gitignore @@ -412,5 +412,22 @@ FodyWeavers.xsd # Built Visual Studio Code Extensions *.vsix +# Css files +**.css + # Minified css files **.min.css + +# css files directly in the wwwroot folder +**/wwwroot/**.css + +# Minified js files +**.min.js + +# js files directly in the wwwroot folder +**/wwwroot/**.js + +# any project with runner in its name +**.Runner/** + +**.DS_Store diff --git a/Connected.Components.sln b/Connected.Components.sln index ce7562c..6507c50 100644 --- a/Connected.Components.sln +++ b/Connected.Components.sln @@ -5,7 +5,9 @@ VisualStudioVersion = 17.4.33020.496 MinimumVisualStudioVersion = 10.0.40219.1 Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Connected.Components", "src\connected.components\Connected.Components.csproj", "{70BF497D-6519-401B-A0EE-2E9856B13D96}" EndProject -Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Connected.Components.Showcase", "src\Connected.Components.Showcase\Connected.Components.Showcase.csproj", "{EBB24FD8-A554-427C-A93B-B48C047D34CC}" +Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Connected.Components.Showcase", "src\Connected.Components.Showcase\Connected.Components.Showcase.csproj", "{EBB24FD8-A554-427C-A93B-B48C047D34CC}" +EndProject +Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Connected.Components.Showcase.Runner", "Connected.Components.Showcase.Runner\Connected.Components.Showcase.Runner.csproj", "{B8E7BCC3-3F99-4222-B65E-9ABD3B18DAF7}" EndProject Global GlobalSection(SolutionConfigurationPlatforms) = preSolution @@ -21,6 +23,10 @@ Global {EBB24FD8-A554-427C-A93B-B48C047D34CC}.Debug|Any CPU.Build.0 = Debug|Any CPU {EBB24FD8-A554-427C-A93B-B48C047D34CC}.Release|Any CPU.ActiveCfg = Release|Any CPU {EBB24FD8-A554-427C-A93B-B48C047D34CC}.Release|Any CPU.Build.0 = Release|Any CPU + {B8E7BCC3-3F99-4222-B65E-9ABD3B18DAF7}.Debug|Any CPU.ActiveCfg = Debug|Any CPU + {B8E7BCC3-3F99-4222-B65E-9ABD3B18DAF7}.Debug|Any CPU.Build.0 = Debug|Any CPU + {B8E7BCC3-3F99-4222-B65E-9ABD3B18DAF7}.Release|Any CPU.ActiveCfg = Release|Any CPU + {B8E7BCC3-3F99-4222-B65E-9ABD3B18DAF7}.Release|Any CPU.Build.0 = Release|Any CPU EndGlobalSection GlobalSection(SolutionProperties) = preSolution HideSolutionNode = FALSE diff --git a/build/startWatch.ps1 b/build/startWatch.ps1 new file mode 100644 index 0000000..914aada --- /dev/null +++ b/build/startWatch.ps1 @@ -0,0 +1 @@ +dotnet watch webcompiler ./Styles/Connected.Components.scss -c ./excubowebcompiler.json --project ../src/Connected.Components/Connected.Components.csproj \ No newline at end of file diff --git a/build/startWatch.sh b/build/startWatch.sh new file mode 100644 index 0000000..914aada --- /dev/null +++ b/build/startWatch.sh @@ -0,0 +1 @@ +dotnet watch webcompiler ./Styles/Connected.Components.scss -c ./excubowebcompiler.json --project ../src/Connected.Components/Connected.Components.csproj \ No newline at end of file diff --git a/nuget.config b/nuget.config index cf4c076..1da1b53 100644 --- a/nuget.config +++ b/nuget.config @@ -9,9 +9,11 @@ + + + - - \ No newline at end of file + diff --git a/src/Connected.Components.Showcase/Connected.Components.Showcase.csproj b/src/Connected.Components.Showcase/Connected.Components.Showcase.csproj index 73def2f..0ccdf36 100644 --- a/src/Connected.Components.Showcase/Connected.Components.Showcase.csproj +++ b/src/Connected.Components.Showcase/Connected.Components.Showcase.csproj @@ -41,4 +41,8 @@ + + + + diff --git a/src/Connected.Components.Showcase/MainLayout.razor b/src/Connected.Components.Showcase/MainLayout.razor deleted file mode 100644 index de2be6c..0000000 --- a/src/Connected.Components.Showcase/MainLayout.razor +++ /dev/null @@ -1,5 +0,0 @@ -@inherits LayoutComponentBase - -
- @Body -
diff --git a/src/Connected.Components.Showcase/Pages/AlertShowcase.razor b/src/Connected.Components.Showcase/Pages/AlertShowcase.razor new file mode 100644 index 0000000..bd9e724 --- /dev/null +++ b/src/Connected.Components.Showcase/Pages/AlertShowcase.razor @@ -0,0 +1,381 @@ +@page "/components/alert" + +@using Connected.Components; + + + + + +@code { + Theme MyCustomTheme = new Theme() + { + Palette = new Palette() + { + Error = "#ffd8e4", + ErrorContrastText = "#31111d", + //ErrorDarken = Colors.Green.Accent4, + }, + LayoutProperties = new LayoutProperties() + { + DefaultBorderRadius = "1rem", + } + }; +} + + + Alert + An alert is used to notify the user about an important message without interrupting the ongoing task. + + + + + + Simple alert + The reactor type is RBMK-1000 + The reactor was fired up successfully + The reactor is running at optimum temperature + The reactor temperature exceeds the optimal range + Meltdown is imminent + + + + + + 
+ <Alert Severity="Severity.Normal" GlyphVisible="true" ClassList="my-2">The reactor type is RBMK-1000</Alert>
+<Alert Severity="Severity.Info" GlyphVisible="true" ClassList="my-2">The reactor was fired up successfully</Alert>
+<Alert Severity="Severity.Success" GlyphVisible="true" ClassList="my-2">The reactor is running at optimum temperature</Alert>
+<Alert Severity="Severity.Warning" GlyphVisible="true" ClassList="my-2">The reactor temperature exceeds the optimal range</Alert>
+<Alert Severity="Severity.Error" GlyphVisible="true" ClassList="my-2">Meltdown is imminent</Alert>
+ + + + + + Outlined alert + The reactor type is RBMK-1000 + The reactor was fired up successfully + The reactor is running at optimum temperature + The reactor temperature exceeds the optimal range + Meltdown is imminent + + + + + + 
+ <Alert Severity="Severity.Normal" Variant="Variant.Outlined" GlyphVisible="true" ClassList="my-2">The reactor type is RBMK-1000</Alert>
+<Alert Severity="Severity.Info" Variant="Variant.Outlined" GlyphVisible="true" ClassList="my-2">The reactor was fired up successfully</Alert>
+<Alert Severity="Severity.Success" Variant="Variant.Outlined" GlyphVisible="true" ClassList="my-2">The reactor is running at optimum temperature</Alert>
+<Alert Severity="Severity.Warning" Variant="Variant.Outlined" GlyphVisible="true" ClassList="my-2">The reactor temperature exceeds the optimal range</Alert>
+<Alert Severity="Severity.Error" Variant="Variant.Outlined" GlyphVisible="true" ClassList="my-2">Meltdown is imminent</Alert>
+ + + + + + + Outlined alert + The reactor type is RBMK-1000 + The reactor was fired up successfully + The reactor is running at optimum temperature + The reactor temperature exceeds the optimal range + Meltdown is imminent + + + + + + 
+ <Alert Severity="Severity.Normal" Variant="Variant.Filled" GlyphVisible="true" ClassList="my-2">The reactor type is RBMK-1000</Alert>
+<Alert Severity="Severity.Info" Variant="Variant.Filled" GlyphVisible="true" ClassList="my-2">The reactor was fired up successfully</Alert>
+<Alert Severity="Severity.Success" Variant="Variant.Filled" GlyphVisible="true" ClassList="my-2">The reactor is running at optimum temperature</Alert>
+<Alert Severity="Severity.Warning" Variant="Variant.Filled" GlyphVisible="true" ClassList="my-2">The reactor temperature exceeds the optimal range</Alert>
+<Alert Severity="Severity.Error" Variant="Variant.Filled" GlyphVisible="true" ClassList="my-2">Meltdown is imminent</Alert>
+ + + + + +
+ Dense + Taking up too much space? Insert dense class in ClassList. It removes the vertical padding and lowers the horizontal. + +
+ + + Dense Default + Dense Info + Dense Success + Dense Warning + Dense Errorr + + + Dense Default + Dense Info + Dense Success + Dense Warning + Dense Error + + + Dense Default + Dense Info + Dense Success + Dense Warning + Dense Error + + + + + + 
+ <Grid>
+    <Item md="4" xs="12">
+        <Alert Severity="Severity.Normal" GlyphVisible="true" ClassList="my-2 dense">Dense Default</Alert>
+        <Alert Severity="Severity.Info" GlyphVisible="true" ClassList="my-2 dense">Dense Info</Alert>
+        <Alert Severity="Severity.Success" GlyphVisible="true" ClassList="my-2 dense">Dense Success</Alert>
+        <Alert Severity="Severity.Warning" GlyphVisible="true" ClassList="my-2 dense">Dense Warning</Alert>
+        <Alert Severity="Severity.Error" GlyphVisible="true" ClassList="my-2 dense">Dense Errorr</Alert>
+    </Item>
+    <Item md="4" xs="12">
+        <Alert Severity="Severity.Normal" Variant="Variant.Outlined" GlyphVisible="true" ClassList="my-2 dense">Dense Default</Alert>
+        <Alert Severity="Severity.Info" Variant="Variant.Outlined" GlyphVisible="true" ClassList="my-2 dense">Dense Info</Alert>
+        <Alert Severity="Severity.Success" Variant="Variant.Outlined" GlyphVisible="true" ClassList="my-2 dense">Dense Success</Alert>
+        <Alert Severity="Severity.Warning" Variant="Variant.Outlined" GlyphVisible="true" ClassList="my-2 dense">Dense Warning</Alert>
+        <Alert Severity="Severity.Error" Variant="Variant.Outlined" GlyphVisible="true" ClassList="my-2 dense">Dense Error</Alert>
+    </Item>
+    <Item md="4" xs="12">
+        <Alert Severity="Severity.Normal" Variant="Variant.Filled" GlyphVisible="true" ClassList="my-2 dense">Dense Default</Alert>
+        <Alert Severity="Severity.Info" Variant="Variant.Filled" GlyphVisible="true" ClassList="my-2 dense">Dense Info</Alert>
+        <Alert Severity="Severity.Success" Variant="Variant.Filled" GlyphVisible="true" ClassList="my-2 dense">Dense Success</Alert>
+        <Alert Severity="Severity.Warning" Variant="Variant.Filled" GlyphVisible="true" ClassList="my-2 dense">Dense Warning</Alert>
+        <Alert Severity="Severity.Error" Variant="Variant.Filled" GlyphVisible="true" ClassList="my-2 dense">Dense Error</Alert>
+    </Item>
+</Grid>
+ + + + + +
+ No Icons + You can disable the alert icons with the bool GlyphVisible set to false. +
+ + + No Icon Default + No Icon Info + No Icon Success + No Icon Warning + No Icon Error + + + No Icon Default + No Icon Info + No Icon Success + No Icon Warning + No Icon Error + + + No Icon Default + No Icon Info + No Icon Success + No Icon Warning + No Icon Error + + + + + + 
+ <Grid>
+    <Item md="4" xs="12">
+        <Alert Severity="Severity.Normal" GlyphVisible="false" ClassList="my-2">No Icon Default</Alert>
+        <Alert Severity="Severity.Info" GlyphVisible="false" ClassList="my-2 ">No Icon Info</Alert>
+        <Alert Severity="Severity.Success" GlyphVisible="false" ClassList="my-2">No Icon Success</Alert>
+        <Alert Severity="Severity.Warning" GlyphVisible="false" ClassList="my-2">No Icon Warning</Alert>
+        <Alert Severity="Severity.Error" GlyphVisible="false" ClassList="my-2">No Icon Error</Alert>
+    </Item>
+    <Item md="4" xs="12">
+        <Alert Severity="Severity.Normal" Variant="Variant.Outlined" GlyphVisible="false" ClassList="my-2">No Icon Default</Alert>
+        <Alert Severity="Severity.Info" Variant="Variant.Outlined" GlyphVisible="false" ClassList="my-2">No Icon Info</Alert>
+        <Alert Severity="Severity.Success" Variant="Variant.Outlined" GlyphVisible="false" ClassList="my-2">No Icon Success</Alert>
+        <Alert Severity="Severity.Warning" Variant="Variant.Outlined" GlyphVisible="false" ClassList="my-2">No Icon Warning</Alert>
+        <Alert Severity="Severity.Error" Variant="Variant.Outlined" GlyphVisible="false" ClassList="my-2 ">No Icon Error</Alert>
+    </Item>
+    <Item md="4" xs="12">
+        <Alert Severity="Severity.Normal" Variant="Variant.Filled" GlyphVisible="false" ClassList="my-2 ">No Icon Default</Alert>
+        <Alert Severity="Severity.Info" Variant="Variant.Filled" GlyphVisible="false" ClassList="my-2 ">No Icon Info</Alert>
+        <Alert Severity="Severity.Success" Variant="Variant.Filled" GlyphVisible="false" ClassList="my-2 ">No Icon Success</Alert>
+        <Alert Severity="Severity.Warning" Variant="Variant.Filled" GlyphVisible="false" ClassList="my-2 ">No Icon Warning</Alert>
+        <Alert Severity="Severity.Error" Variant="Variant.Filled" GlyphVisible="false" ClassList="my-2 ">No Icon Error</Alert>
+    </Item>
+</Grid>
+ + + + + +
+ Rounded and Square + By default, the alert is set to rounded corners by your theme's + default value. If you need a square Alert but don't want to change the theme, insert class rounded-0 in + ClassList or change the default radius width classes rounded-sm, rounded-lg, rounded-xl. +
+ + + Rounded-0 Default + Rounded Info + Rounded-sm Success + Rounded-lg Warning + Rounded-xl Error + + + Rounded-0 Default + Rounded Info + Rounded-sm Success + Rounded-lg Warning + Rounded-xl Error + + + Rounded-0 Default + Rounded Info + Rounded-sm Success + Rounded-lg Warning + Rounded-xl Error + + + + + + 
+ <Grid>
+    <Item md="4" xs="12">
+        <Alert Severity="Severity.Normal" GlyphVisible="true" ClassList="my-2 rounded-0">Rounded-0 Default</Alert>
+        <Alert Severity="Severity.Info" GlyphVisible="true" ClassList="my-2 rounded">Rounded Info</Alert>
+        <Alert Severity="Severity.Success" GlyphVisible="true" ClassList="my-2 rounded-sm">Rounded-sm Success</Alert>
+        <Alert Severity="Severity.Warning" GlyphVisible="true" ClassList="my-2 rounded-lg">Rounded-lg Warning</Alert>
+        <Alert Severity="Severity.Error" GlyphVisible="true" ClassList="my-2 rounded-xl">Rounded-xl Error</Alert>
+    </Item>
+    <Item md="4" xs="12">
+        <Alert Severity="Severity.Normal" Variant="Variant.Outlined" GlyphVisible="true" ClassList="my-2 rounded-0">Rounded-0 Default</Alert>
+        <Alert Severity="Severity.Info" Variant="Variant.Outlined" GlyphVisible="true" ClassList="my-2 rounded">Rounded Info</Alert>
+        <Alert Severity="Severity.Success" Variant="Variant.Outlined" GlyphVisible="true" ClassList="my-2 rounded-sm">Rounded-sm Success</Alert>
+        <Alert Severity="Severity.Warning" Variant="Variant.Outlined" GlyphVisible="true" ClassList="my-2 rounded-lg">Rounded-lg Warning</Alert>
+        <Alert Severity="Severity.Error" Variant="Variant.Outlined" GlyphVisible="true" ClassList="my-2 rounded-xl">Rounded-xl Error</Alert>
+    </Item>
+    <Item md="4" xs="12">
+        <Alert Severity="Severity.Normal" Variant="Variant.Filled" GlyphVisible="true" ClassList="my-2 rounded-0">Rounded-0 Default</Alert>
+        <Alert Severity="Severity.Info" Variant="Variant.Filled" GlyphVisible="true" ClassList="my-2 rounded">Rounded Info</Alert>
+        <Alert Severity="Severity.Success" Variant="Variant.Filled" GlyphVisible="true" ClassList="my-2 rounded-sm">Rounded-sm Success</Alert>
+        <Alert Severity="Severity.Warning" Variant="Variant.Filled" GlyphVisible="true" ClassList="my-2 rounded-lg">Rounded-lg Warning</Alert>
+        <Alert Severity="Severity.Error" Variant="Variant.Filled" GlyphVisible="true" ClassList="my-2 rounded-xl">Rounded-xl Error</Alert>
+    </Item>
+</Grid>
+ + + + + + +
+ Elevation + The component also accepts the Elevation class set a scale from elevation-1 to elevation-24 in ClassList. +
+ + + elevation-8 + + + elevation-16 + + + elevation-24 + + + + + + 
+ <Grid>
+    <Item md="4" xs="12">
+        <Alert Severity="Severity.Normal" GlyphVisible="true" ClassList="my-2 elevation-8">elevation-8 Default</Alert>
+    </Item>
+    <Item md="4" xs="12">
+        <Alert Severity="Severity.Normal" GlyphVisible="true" ClassList="my-2 elevation-16">elevation-16 Default</Alert>
+    </Item>
+    <Item md="4" xs="12">
+        <Alert Severity="Severity.Normal" GlyphVisible="true" ClassList="my-2 elevation-24">elevation-24 Default</Alert>
+    </Item>
+</Grid>
+ + + + +
+ Content Alignment + Insert Utility class for the Alignment property in ClassList to define the content alignment - justify-center or justify-end +
+ + + Default Alignment + + + Center Alignment + + + Right Alignment + + + + + + 
+ <Grid>
+    <Item md="4" xs="12">
+        <Alert Severity="Severity.Normal" GlyphVisible="true" ClassList="my-2">Default Alignment</Alert>
+    </Item>
+    <Item md="4" xs="12">
+        <Alert Severity="Severity.Normal" GlyphVisible="true" ClassList="my-2 justify-center">Center Alignment</Alert>
+    </Item>
+    <Item md="4" xs="12">
+        <Alert Severity="Severity.Normal" GlyphVisible="true" ClassList="my-2 justify-end">Right Alignment</Alert>
+    </Item>
+</Grid>
+ + + + + +
+ Close Icon and Event + Set the CloseGlyphVisible property to True to display a Close icon. + CloseIconClicked provides the EventCallback when clicking on the Close icon of the alert +
+ + + Time to leave. Please close me! + + + Time to leave. Please close me! + + + RTime to leave. Please close me! + + + + + + 
+ <Grid>
+    <Item md="4" xs="12">
+        <Alert Severity="Severity.Normal" GlyphVisible="true" CloseGlyphVisible="true" ClassList="my-2">Time to leave. Please close me!</Alert>
+    </Item>
+    <Item md="4" xs="12">
+        <Alert Severity="Severity.Info" GlyphVisible="true" CloseGlyphVisible="true" ClassList="my-2 justify-center">Time to leave. Please close me!</Alert>
+    </Item>
+    <Item md="4" xs="12">
+        <Alert Severity="Severity.Success" GlyphVisible="true" CloseGlyphVisible="true" ClassList="my-2 justify-end">RTime to leave. Please close me!</Alert>
+    </Item>
+</Grid>
+ diff --git a/src/Connected.Components.Showcase/Pages/AppBarShowcase.razor b/src/Connected.Components.Showcase/Pages/AppBarShowcase.razor new file mode 100644 index 0000000..68aff84 --- /dev/null +++ b/src/Connected.Components.Showcase/Pages/AppBarShowcase.razor @@ -0,0 +1,7 @@ +@page "/components/app-bar" + +@using Connected.Components; + + + +This is an alert diff --git a/src/Connected.Components.Showcase/Pages/DrawerShowcase.razor b/src/Connected.Components.Showcase/Pages/DrawerShowcase.razor new file mode 100644 index 0000000..445bff2 --- /dev/null +++ b/src/Connected.Components.Showcase/Pages/DrawerShowcase.razor @@ -0,0 +1,36 @@ +@page "/components/drawer" + +@using Connected.Components; + + + + + + + + + + + Application + + + Production + Production + + + + + + Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam fuga necessitatibus illum non earum aperiam consequuntur odit odio a laborum! + + + + +@code { + bool _drawerOpen = true; + + void DrawerToggle() + { + _drawerOpen = !_drawerOpen; + } +} diff --git a/src/Connected.Components.Showcase/Pages/Index.razor b/src/Connected.Components.Showcase/Pages/Index.razor deleted file mode 100644 index cba3252..0000000 --- a/src/Connected.Components.Showcase/Pages/Index.razor +++ /dev/null @@ -1,3 +0,0 @@ -@page "/" - -

Hello, world!

diff --git a/src/Connected.Components/.config/dotnet-tools.json b/src/Connected.Components/.config/dotnet-tools.json new file mode 100644 index 0000000..aaaa200 --- /dev/null +++ b/src/Connected.Components/.config/dotnet-tools.json @@ -0,0 +1,12 @@ +{ + "version": 1, + "isRoot": true, + "tools": { + "connected.webcompiler": { + "version": "1.0.7-prerelease.g67169cf2c5", + "commands": [ + "webcompiler" + ] + } + } +} \ No newline at end of file diff --git a/src/Connected.Components/Components/Alert/Alert.razor b/src/Connected.Components/Components/Alert/Alert.razor index a656343..3da8dc8 100644 --- a/src/Connected.Components/Components/Alert/Alert.razor +++ b/src/Connected.Components/Components/Alert/Alert.razor @@ -2,25 +2,25 @@ @inherits UIComponent -