├── .gitignore ├── LICENSE ├── README.md ├── Starter └── TailwindBuild │ ├── Styles │ └── site.css │ ├── package.json │ ├── postcss.config.js │ └── tailwind.config.js ├── WindyUI.Blazor ├── Base │ └── ChildBase.cs ├── Buttons │ ├── Button.razor │ ├── ButtonEnums.cs │ └── IconButton.razor ├── Cards │ ├── CardSizes.cs │ └── SimpleCard.razor ├── Form │ ├── BaseInput.cs │ ├── CheckboxInput.razor │ ├── CustomValidator.cs │ ├── ImageUploadInput.razor │ ├── ImageUploadInput.razor.cs │ ├── ImageUploadInputConfig.cs │ ├── RadioGroup.razor │ ├── SelectInput.razor │ ├── TextAreaInput.razor │ └── TextInput.razor ├── Icons │ ├── Icon.razor │ ├── IconEnums.cs │ └── SVG │ │ ├── BaseIcon.cs │ │ ├── Close.razor │ │ ├── DotsVertical.razor │ │ ├── Download.razor │ │ ├── Eye.razor │ │ ├── Image.razor │ │ ├── ImagePlus.razor │ │ ├── Logout.razor │ │ ├── Menu.razor │ │ ├── Pencil.razor │ │ ├── Plus.razor │ │ ├── Settings.razor │ │ ├── Trash.razor │ │ ├── Upload.razor │ │ └── Warning.razor ├── Modals │ ├── AlertDialog.razor │ ├── FormModal.razor │ ├── Modal.razor │ ├── ModalBase.cs │ ├── ModalContent.razor │ └── ModalFooter.razor ├── Navigation │ ├── BaseNavigationLink.cs │ ├── MobileMenu.razor │ ├── Navbar.razor │ ├── NavbarLink.razor │ ├── NavbarMobileLink.razor │ ├── NavigationColors.cs │ ├── NavigationParentBase.cs │ ├── Sidebar.razor │ └── SidebarLink.razor ├── Notifications │ ├── Alert.razor │ ├── EmptyState.razor │ ├── Snackbar.razor │ └── SnackbarEnums.cs ├── Publish.txt ├── Table │ ├── Table.razor │ ├── TableBody.razor │ ├── TableCell.razor │ ├── TableHead.razor │ └── TableHeader.razor ├── Tabs │ ├── TabNavButton.razor │ ├── TabNavTypes.cs │ ├── TabPanel.razor │ └── Tabs.razor ├── Typography │ ├── BodyTypes.cs │ ├── Header.razor │ ├── HeaderTypes.cs │ ├── Paragraph.razor │ ├── Subtle.razor │ └── SubtleTypes.cs ├── WindyUI.csproj └── _Imports.razor ├── WindyUI.Documentation ├── App.razor ├── Components │ ├── CodeHighlights.razor │ ├── ExtendedCodeTabToggle.razor │ ├── Forms │ │ └── SampleFormModel.cs │ ├── Modals │ │ └── FormModel.cs │ ├── Navigation │ │ └── LayoutSample.razor │ ├── SimpleCodeTabToggle.razor │ └── SupportedLanguages.cs ├── Dockerfile ├── Pages │ ├── Buttons.razor │ ├── Cards.razor │ ├── FormInputs │ │ ├── CheckboxAndRadioSample.razor │ │ ├── ImageUploadSample.razor │ │ ├── OutsideEditForm.razor │ │ ├── SelectInputSample.razor │ │ ├── TextInputAndTextAreaSample.razor │ │ └── ValidationSample.razor │ ├── Forms.razor │ ├── GetStarted.razor │ ├── Icons.razor │ ├── Modals.razor │ ├── Navigation.razor │ ├── Notifications.razor │ ├── Tables.razor │ ├── Theme.razor │ ├── Typography.razor │ └── Welcome.razor ├── Program.cs ├── Properties │ └── launchSettings.json ├── Shared │ ├── DocumentationLayout.razor │ ├── DocumentationLayout.razor.css │ └── LandingLayout.razor ├── TailwindBuild │ ├── Styles │ │ └── site.css │ ├── package-lock.json │ ├── package.json │ ├── postcss.config.js │ └── tailwind.config.js ├── Utils │ └── TableDataInitializer.cs ├── WindyUI.Documentation.csproj ├── _Imports.razor └── wwwroot │ ├── css │ ├── atom-one-dark.css │ └── site.min.css │ ├── favicon.ico │ ├── img │ └── logos │ │ ├── Isologotipo-Invertido.svg │ │ ├── Isologotipo.svg │ │ ├── Isotipo-Invertido.svg │ │ ├── Isotipo.svg │ │ ├── Logotipo-Invertido.svg │ │ └── Logotipo.svg │ ├── index.html │ └── js │ └── highlight.pack.min.js ├── WindyUI.sln └── buildspec.yaml /.gitignore: -------------------------------------------------------------------------------- 1 | ## Ignore Visual Studio temporary files, build results, and 2 | ## files generated by popular Visual Studio add-ons. 3 | ## 4 | ## Get latest from https://github.com/github/gitignore/blob/master/VisualStudio.gitignore 5 | 6 | # User-specific files 7 | *.rsuser 8 | *.suo 9 | *.user 10 | *.userosscache 11 | *.sln.docstates 12 | 13 | # User-specific files (MonoDevelop/Xamarin Studio) 14 | *.userprefs 15 | 16 | # Mono auto generated files 17 | mono_crash.* 18 | 19 | # Build results 20 | [Dd]ebug/ 21 | [Dd]ebugPublic/ 22 | [Rr]elease/ 23 | [Rr]eleases/ 24 | x64/ 25 | x86/ 26 | [Aa][Rr][Mm]/ 27 | [Aa][Rr][Mm]64/ 28 | bld/ 29 | [Bb]in/ 30 | [Oo]bj/ 31 | [Ll]og/ 32 | [Ll]ogs/ 33 | 34 | # Visual Studio 2015/2017 cache/options directory 35 | .vs/ 36 | # Uncomment if you have tasks that create the project's static files in wwwroot 37 | #wwwroot/ 38 | 39 | # Visual Studio 2017 auto generated files 40 | Generated\ Files/ 41 | 42 | # MSTest test Results 43 | [Tt]est[Rr]esult*/ 44 | [Bb]uild[Ll]og.* 45 | 46 | # NUnit 47 | *.VisualState.xml 48 | TestResult.xml 49 | nunit-*.xml 50 | 51 | # Build Results of an ATL Project 52 | [Dd]ebugPS/ 53 | [Rr]eleasePS/ 54 | dlldata.c 55 | 56 | # Benchmark Results 57 | BenchmarkDotNet.Artifacts/ 58 | 59 | # .NET Core 60 | project.lock.json 61 | project.fragment.lock.json 62 | artifacts/ 63 | 64 | # StyleCop 65 | StyleCopReport.xml 66 | 67 | # Files built by Visual Studio 68 | *_i.c 69 | *_p.c 70 | *_h.h 71 | *.ilk 72 | *.meta 73 | *.obj 74 | *.iobj 75 | *.pch 76 | *.pdb 77 | *.ipdb 78 | *.pgc 79 | *.pgd 80 | *.rsp 81 | *.sbr 82 | *.tlb 83 | *.tli 84 | *.tlh 85 | *.tmp 86 | *.tmp_proj 87 | *_wpftmp.csproj 88 | *.log 89 | *.vspscc 90 | *.vssscc 91 | .builds 92 | *.pidb 93 | *.svclog 94 | *.scc 95 | 96 | # Chutzpah Test files 97 | _Chutzpah* 98 | 99 | # Visual C++ cache files 100 | ipch/ 101 | *.aps 102 | *.ncb 103 | *.opendb 104 | *.opensdf 105 | *.sdf 106 | *.cachefile 107 | *.VC.db 108 | *.VC.VC.opendb 109 | 110 | # Visual Studio profiler 111 | *.psess 112 | *.vsp 113 | *.vspx 114 | *.sap 115 | 116 | # Visual Studio Trace Files 117 | *.e2e 118 | 119 | # TFS 2012 Local Workspace 120 | $tf/ 121 | 122 | # Guidance Automation Toolkit 123 | *.gpState 124 | 125 | # ReSharper is a .NET coding add-in 126 | _ReSharper*/ 127 | *.[Rr]e[Ss]harper 128 | *.DotSettings.user 129 | 130 | # TeamCity is a build add-in 131 | _TeamCity* 132 | 133 | # DotCover is a Code Coverage Tool 134 | *.dotCover 135 | 136 | # AxoCover is a Code Coverage Tool 137 | .axoCover/* 138 | !.axoCover/settings.json 139 | 140 | # Visual Studio code coverage results 141 | *.coverage 142 | *.coveragexml 143 | 144 | # NCrunch 145 | _NCrunch_* 146 | .*crunch*.local.xml 147 | nCrunchTemp_* 148 | 149 | # MightyMoose 150 | *.mm.* 151 | AutoTest.Net/ 152 | 153 | # Web workbench (sass) 154 | .sass-cache/ 155 | 156 | # Installshield output folder 157 | [Ee]xpress/ 158 | 159 | # DocProject is a documentation generator add-in 160 | DocProject/buildhelp/ 161 | DocProject/Help/*.HxT 162 | DocProject/Help/*.HxC 163 | DocProject/Help/*.hhc 164 | DocProject/Help/*.hhk 165 | DocProject/Help/*.hhp 166 | DocProject/Help/Html2 167 | DocProject/Help/html 168 | 169 | # Click-Once directory 170 | publish/ 171 | 172 | # Publish Web Output 173 | *.[Pp]ublish.xml 174 | *.azurePubxml 175 | # Note: Comment the next line if you want to checkin your web deploy settings, 176 | # but database connection strings (with potential passwords) will be unencrypted 177 | *.pubxml 178 | *.publishproj 179 | 180 | # Microsoft Azure Web App publish settings. Comment the next line if you want to 181 | # checkin your Azure Web App publish settings, but sensitive information contained 182 | # in these scripts will be unencrypted 183 | PublishScripts/ 184 | 185 | # NuGet Packages 186 | *.nupkg 187 | # NuGet Symbol Packages 188 | *.snupkg 189 | # The packages folder can be ignored because of Package Restore 190 | **/[Pp]ackages/* 191 | # except build/, which is used as an MSBuild target. 192 | !**/[Pp]ackages/build/ 193 | # Uncomment if necessary however generally it will be regenerated when needed 194 | #!**/[Pp]ackages/repositories.config 195 | # NuGet v3's project.json files produces more ignorable files 196 | *.nuget.props 197 | *.nuget.targets 198 | 199 | # Microsoft Azure Build Output 200 | csx/ 201 | *.build.csdef 202 | 203 | # Microsoft Azure Emulator 204 | ecf/ 205 | rcf/ 206 | 207 | # Windows Store app package directories and files 208 | AppPackages/ 209 | BundleArtifacts/ 210 | Package.StoreAssociation.xml 211 | _pkginfo.txt 212 | *.appx 213 | *.appxbundle 214 | *.appxupload 215 | 216 | # Visual Studio cache files 217 | # files ending in .cache can be ignored 218 | *.[Cc]ache 219 | # but keep track of directories ending in .cache 220 | !?*.[Cc]ache/ 221 | 222 | # Others 223 | ClientBin/ 224 | ~$* 225 | *~ 226 | *.dbmdl 227 | *.dbproj.schemaview 228 | *.jfm 229 | *.pfx 230 | *.publishsettings 231 | orleans.codegen.cs 232 | 233 | # Including strong name files can present a security risk 234 | # (https://github.com/github/gitignore/pull/2483#issue-259490424) 235 | #*.snk 236 | 237 | # Since there are multiple workflows, uncomment next line to ignore bower_components 238 | # (https://github.com/github/gitignore/pull/1529#issuecomment-104372622) 239 | #bower_components/ 240 | 241 | # RIA/Silverlight projects 242 | Generated_Code/ 243 | 244 | # Backup & report files from converting an old project file 245 | # to a newer Visual Studio version. Backup files are not needed, 246 | # because we have git ;-) 247 | _UpgradeReport_Files/ 248 | Backup*/ 249 | UpgradeLog*.XML 250 | UpgradeLog*.htm 251 | ServiceFabricBackup/ 252 | *.rptproj.bak 253 | 254 | # SQL Server files 255 | *.mdf 256 | *.ldf 257 | *.ndf 258 | 259 | # Business Intelligence projects 260 | *.rdl.data 261 | *.bim.layout 262 | *.bim_*.settings 263 | *.rptproj.rsuser 264 | *- [Bb]ackup.rdl 265 | *- [Bb]ackup ([0-9]).rdl 266 | *- [Bb]ackup ([0-9][0-9]).rdl 267 | 268 | # Microsoft Fakes 269 | FakesAssemblies/ 270 | 271 | # GhostDoc plugin setting file 272 | *.GhostDoc.xml 273 | 274 | # Node.js Tools for Visual Studio 275 | .ntvs_analysis.dat 276 | node_modules/ 277 | 278 | # Visual Studio 6 build log 279 | *.plg 280 | 281 | # Visual Studio 6 workspace options file 282 | *.opt 283 | 284 | # Visual Studio 6 auto-generated workspace file (contains which files were open etc.) 285 | *.vbw 286 | 287 | # Visual Studio LightSwitch build output 288 | **/*.HTMLClient/GeneratedArtifacts 289 | **/*.DesktopClient/GeneratedArtifacts 290 | **/*.DesktopClient/ModelManifest.xml 291 | **/*.Server/GeneratedArtifacts 292 | **/*.Server/ModelManifest.xml 293 | _Pvt_Extensions 294 | 295 | # Paket dependency manager 296 | .paket/paket.exe 297 | paket-files/ 298 | 299 | # FAKE - F# Make 300 | .fake/ 301 | 302 | # CodeRush personal settings 303 | .cr/personal 304 | 305 | # Python Tools for Visual Studio (PTVS) 306 | __pycache__/ 307 | *.pyc 308 | 309 | # Cake - Uncomment if you are using it 310 | # tools/** 311 | # !tools/packages.config 312 | 313 | # Tabs Studio 314 | *.tss 315 | 316 | # Telerik's JustMock configuration file 317 | *.jmconfig 318 | 319 | # BizTalk build output 320 | *.btp.cs 321 | *.btm.cs 322 | *.odx.cs 323 | *.xsd.cs 324 | 325 | # OpenCover UI analysis results 326 | OpenCover/ 327 | 328 | # Azure Stream Analytics local run output 329 | ASALocalRun/ 330 | 331 | # MSBuild Binary and Structured Log 332 | *.binlog 333 | 334 | # NVidia Nsight GPU debugger configuration file 335 | *.nvuser 336 | 337 | # MFractors (Xamarin productivity tool) working folder 338 | .mfractor/ 339 | 340 | # Local History for Visual Studio 341 | .localhistory/ 342 | 343 | # BeatPulse healthcheck temp database 344 | healthchecksdb 345 | 346 | # Backup folder for Package Reference Convert tool in Visual Studio 2017 347 | MigrationBackup/ 348 | 349 | # Ionide (cross platform F# VS Code tools) working folder 350 | .ionide/ 351 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Windy UI 2 | ## A Tailwind based component library for Blazor. 3 | 4 | Windy UI is a UI sample library for Blazor using Tailwind CSS. The styles are meant to match as much as possible what Tailwind UI has to offer. Because Tailwind UI is both not free and also not Blazor compatible. 5 | 6 | I started on this project to make available and easier the possibility of using Tailwind CSS with Blazor in a way that is more practical than to always start from scratch. Windy UI is not a fully complete UI Library at this point, as in, it's not a nuget package you can install and have at the ready in any of your projects just yet. Windy UI is at the moment, a guide for how to write a component library that is based on Tailwind CSS. 7 | 8 | The types of components Windy UI currently has implemented are: 9 | 10 | - Buttons 11 | - Cards 12 | - Form elements (with complete validation support) 13 | - Icons (Using Hero Icons) 14 | - Modals 15 | - Navigation elements 16 | - Notifications 17 | - Table 18 | - Tabs 19 | - Typography 20 | 21 | Feel free to browse around or ask me any questions directly about the project. I plan to make Windy UI reach maturity to a point that it can be more easily used the way other UI component libraries are used. You can see the work done so far [here](https://windy-ui.techgems.net/). 22 | -------------------------------------------------------------------------------- /Starter/TailwindBuild/Styles/site.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); 2 | @import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;1,100;1,200;1,300;1,400;1,500&display=swap'); 3 | 4 | @tailwind base; 5 | @tailwind components; 6 | @tailwind utilities; 7 | 8 | #blazor-error-ui { 9 | background: lightyellow; 10 | bottom: 0; 11 | box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2); 12 | display: none; 13 | left: 0; 14 | padding: 0.6rem 1.25rem 0.7rem 1.25rem; 15 | position: fixed; 16 | width: 100%; 17 | z-index: 1000; 18 | } 19 | 20 | #blazor-error-ui .dismiss { 21 | cursor: pointer; 22 | position: absolute; 23 | right: 0.75rem; 24 | top: 0.5rem; 25 | } 26 | -------------------------------------------------------------------------------- /Starter/TailwindBuild/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "1.0.0", 3 | "name": "windy-ui-documentation", 4 | "private": true, 5 | "scripts": { 6 | "buildcss": "postcss 'Styles/site.css' -o '../wwwroot/css/site.min.css'" 7 | }, 8 | "dependencies": { 9 | "@tailwindcss/forms": "^0.3.2", 10 | "autoprefixer": "^10.0.2", 11 | "postcss": "^8.2.1", 12 | "postcss-cli": "^8.3.1", 13 | "tailwindcss": "^2.1.2" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /Starter/TailwindBuild/postcss.config.js: -------------------------------------------------------------------------------- 1 | // postcss.config.js 2 | module.exports = { 3 | plugins: { 4 | tailwindcss: {}, 5 | autoprefixer: {}, 6 | } 7 | } -------------------------------------------------------------------------------- /Starter/TailwindBuild/tailwind.config.js: -------------------------------------------------------------------------------- 1 | const colors = require('tailwindcss/colors'); 2 | 3 | //Generated with: https://tailwind.ink/ 4 | const customColors = { 5 | primary: { 6 | 'text': 'your color here', 7 | 'light': 'your color here', 8 | 'default': 'your color here', 9 | 'dark': 'your color here' 10 | }, 11 | secondary: { 12 | 'text': 'your color here', 13 | 'light': 'your color here', 14 | 'default': 'your color here', 15 | 'dark': 'your color here' 16 | } 17 | }; 18 | 19 | module.exports = { 20 | purge: [], 21 | darkMode: false, // At this moment, Windy UI components do not support dark mode. 22 | theme: { 23 | colors: { 24 | transparent: 'transparent', 25 | current: 'currentColor', 26 | black: colors.black, 27 | white: colors.white, 28 | gray: colors.coolGray, 29 | red: colors.red, 30 | yellow: colors.amber, 31 | green: colors.emerald, 32 | blue: colors.blue, 33 | indigo: colors.indigo, 34 | purple: colors.violet, 35 | pink: colors.pink, 36 | }, 37 | extend: { 38 | colors: { 39 | /*Define your colors here:*/ 40 | primary: { 41 | text: customColors.primary['text'], 42 | light: customColors.primary['light'], 43 | DEFAULT: customColors.primary['default'], 44 | dark: customColors.primary['dark'] 45 | }, 46 | secondary: { 47 | text: customColors.secondary['text'], 48 | light: customColors.secondary['light'], 49 | DEFAULT: customColors.secondary['default'], 50 | dark: customColors.secondary['dark'] 51 | }, 52 | success: { 53 | text: 'white', 54 | light: colors.emerald['100'], 55 | DEFAULT: colors.emerald['600'], 56 | dark: colors.emerald['700'] 57 | }, 58 | danger: { 59 | text: 'white', 60 | light: colors.red['200'], 61 | DEFAULT: colors.red['600'], 62 | dark: colors.red['700'] 63 | }, 64 | info: { 65 | text: 'white', 66 | light: colors.lightBlue['200'], 67 | DEFAULT: colors.lightBlue['500'], 68 | dark: colors.lightBlue['700'] 69 | }, 70 | warning: { 71 | text: colors.gray['800'], 72 | light: colors.amber['200'], 73 | DEFAULT: colors.amber['300'], 74 | dark: colors.amber['500'] 75 | }, 76 | neutral: { 77 | text: colors.gray['100'], 78 | light: colors.gray['200'], 79 | DEFAULT: colors.gray['600'], 80 | dark: colors.gray['700'] 81 | } 82 | }, 83 | fontFamily: { 84 | header: ["Montserrat"], 85 | body: ["Raleway"] 86 | }, 87 | animation: { 88 | 'fadein-500': "fadeIn 0.5s ease-in forwards", 89 | 'fadein-400': "fadeIn 0.4s ease-in forwards", 90 | 'fadein-300': "fadeIn 0.3s ease-in forwards", 91 | 'fadeout-400': "fadeOut 0.4s ease-out forwards", 92 | 'fadeout-300': "fadeOut 0.3s ease-out forwards", 93 | 'fadeout-200': "fadeOut 0.2s ease-out forwards" 94 | }, 95 | keyframes: { 96 | fadeIn: { 97 | "0%": { opacity: 0 }, 98 | "100%": { opacity: 1 } 99 | }, 100 | fadeOut: { 101 | "0%": { opacity: 1 }, 102 | "100%": { opacity: 0 } 103 | } 104 | } 105 | }, 106 | }, 107 | variants: { 108 | extend: {}, 109 | }, 110 | plugins: [ 111 | require('@tailwindcss/forms') 112 | ], 113 | } 114 | -------------------------------------------------------------------------------- /WindyUI.Blazor/Base/ChildBase.cs: -------------------------------------------------------------------------------- 1 | using Microsoft.AspNetCore.Components; 2 | using System; 3 | using System.Collections.Generic; 4 | using System.Linq; 5 | using System.Text; 6 | using System.Threading.Tasks; 7 | 8 | namespace WindyUI.Base 9 | { 10 | public abstract class ChildBase : ComponentBase 11 | where T : class 12 | { 13 | [CascadingParameter] 14 | public T? Parent { get; set; } 15 | 16 | protected override void OnInitialized() 17 | { 18 | if (Parent == null) 19 | throw new ArgumentNullException(nameof(Parent), $"{this.GetType().Name} must exist within a {typeof(T).Name} component"); 20 | base.OnInitialized(); 21 | } 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /WindyUI.Blazor/Buttons/Button.razor: -------------------------------------------------------------------------------- 1 |  4 | 5 | @code { 6 | Dictionary AttributeRender() 7 | { 8 | var dict = new Dictionary(); 9 | if (!string.IsNullOrWhiteSpace(FormId)) 10 | dict.Add("form", FormId); 11 | 12 | return dict; 13 | } 14 | 15 | 16 | /// 17 | /// Defines the size of the button. Defaults to Medium. 18 | /// 19 | [Parameter] 20 | public ButtonSizes Size { get; set; } = ButtonSizes.Medium; 21 | 22 | /// 23 | /// Defines the type of button. Must always be specified. 24 | /// 25 | [Parameter] 26 | public ButtonTypes Type { get; set; } 27 | 28 | /// 29 | /// Defines the color of the button. Must always be specified. 30 | /// 31 | [Parameter] 32 | public ButtonColors Color { get; set; } 33 | 34 | /// 35 | /// The id of the form the button is meant to submit, only to be used when the button is outside of the form it's meant to submit. 36 | /// 37 | [Parameter] 38 | public string FormId { get; set; } = ""; 39 | 40 | /// 41 | /// Child content to render inside the button. 42 | /// 43 | [Parameter] 44 | public RenderFragment? ChildContent { get; set; } 45 | 46 | /// 47 | /// CssClass to add extra styles to the button. Not mandatory. 48 | /// 49 | [Parameter] 50 | public string CssClass { get; set; } = ""; 51 | 52 | /// 53 | /// Click event for the button. Not mandatory. 54 | /// 55 | [Parameter] 56 | public EventCallback OnClick { get; set; } 57 | 58 | private string SizeClasses 59 | { 60 | get 61 | { 62 | switch (Size) 63 | { 64 | case ButtonSizes.Small: 65 | return "px-2 py-1 text-sm"; 66 | case ButtonSizes.Medium: 67 | return "px-3 py-2 text-base sm:text-sm"; 68 | case ButtonSizes.Large: 69 | return "px-4 py-3 text-base sm:text-sm"; 70 | default: 71 | return ""; 72 | } 73 | } 74 | } 75 | 76 | private string TypeColorClass 77 | { 78 | get 79 | { 80 | switch (Type) 81 | { 82 | case ButtonTypes.Contained: 83 | return ColorContainedClasses; 84 | case ButtonTypes.Outlined: 85 | return ColorOutlinedClasses; 86 | case ButtonTypes.Text: 87 | return ColorTextClasses; 88 | default: 89 | return ""; 90 | } 91 | } 92 | } 93 | 94 | private string ColorTextClasses 95 | { 96 | get 97 | { 98 | switch (Color) 99 | { 100 | case ButtonColors.Primary: 101 | return "bg-white hover:bg-primary-light text-primary"; 102 | case ButtonColors.Secondary: 103 | return "bg-white hover:bg-secondary-light text-secondary"; 104 | case ButtonColors.Info: 105 | return "bg-white hover:bg-info-light text-info"; 106 | case ButtonColors.Success: 107 | return "bg-white hover:bg-success-light text-success"; 108 | case ButtonColors.Danger: 109 | return "bg-white hover:bg-danger-light text-danger"; 110 | case ButtonColors.Neutral: 111 | return "bg-white hover:bg-neutral-light text-neutral"; 112 | default: 113 | return ""; 114 | } 115 | } 116 | } 117 | 118 | private string ColorOutlinedClasses 119 | { 120 | get 121 | { 122 | var baseClasses = "bg-white border"; 123 | 124 | switch (Color) 125 | { 126 | case ButtonColors.Primary: 127 | return $"{baseClasses} hover:bg-primary-light text-primary border-primary"; 128 | case ButtonColors.Secondary: 129 | return $"{baseClasses} hover:bg-secondary-light text-secondary border-secondary"; 130 | case ButtonColors.Info: 131 | return $"{baseClasses} hover:bg-info-light text-info border-info"; 132 | case ButtonColors.Success: 133 | return $"{baseClasses} hover:bg-success-light text-success border-success"; 134 | case ButtonColors.Danger: 135 | return $"{baseClasses} hover:bg-danger-light text-danger border-danger"; 136 | case ButtonColors.Neutral: 137 | return $"{baseClasses} hover:bg-neutral-light text-neutral border-neutral"; 138 | default: 139 | return ""; 140 | } 141 | } 142 | } 143 | 144 | private string ColorContainedClasses 145 | { 146 | get 147 | { 148 | var baseClasses = "focus:ring focus:ring-opacity-60 shadow-sm hover:shadow-md border"; 149 | 150 | switch (Color) 151 | { 152 | case ButtonColors.Primary: 153 | return $"{baseClasses} bg-primary hover:bg-primary-dark text-primary-text focus:ring-primary border-primary"; 154 | case ButtonColors.Secondary: 155 | return $"{baseClasses} bg-secondary hover:bg-secondary-dark text-secondary-text focus:ring-secondary border-secondary"; 156 | case ButtonColors.Neutral: 157 | return $"{baseClasses} bg-neutral hover:bg-neutral-dark text-neutral-text focus:ring-neutral border-neutral"; 158 | case ButtonColors.Info: 159 | return $"{baseClasses} bg-info hover:bg-info-dark text-info-text focus:ring-info border-info"; 160 | case ButtonColors.Danger: 161 | return $"{baseClasses} bg-danger hover:bg-danger-dark text-danger-text focus:ring-danger border-danger"; 162 | case ButtonColors.Success: 163 | return $"{baseClasses} bg-success hover:bg-success-dark text-success-text focus:ring-success border-success"; 164 | default: 165 | return ""; 166 | } 167 | } 168 | } 169 | } -------------------------------------------------------------------------------- /WindyUI.Blazor/Buttons/ButtonEnums.cs: -------------------------------------------------------------------------------- 1 | using Microsoft.AspNetCore.Components.Forms; 2 | using System; 3 | using System.Collections.Generic; 4 | using System.Linq; 5 | using System.Threading.Tasks; 6 | 7 | namespace WindyUI.Buttons 8 | { 9 | public enum ButtonSizes 10 | { 11 | Small, 12 | Medium, 13 | Large 14 | } 15 | 16 | public enum IconButtonTypes 17 | { 18 | Contained, 19 | Outlined, 20 | Plain 21 | } 22 | 23 | public enum ButtonTypes 24 | { 25 | Contained, 26 | Outlined, 27 | Text 28 | } 29 | 30 | public enum ButtonColors 31 | { 32 | Primary, 33 | Secondary, 34 | Neutral, 35 | Info, 36 | Danger, 37 | Success 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /WindyUI.Blazor/Buttons/IconButton.razor: -------------------------------------------------------------------------------- 1 | @using WindyUI.Icons; 2 | 3 |
4 | 5 |
6 | 7 | @code { 8 | [Parameter] 9 | public Action OnClick { get; set; } = delegate () { }; 10 | 11 | [Parameter] 12 | public string CssClass { get; set; } = ""; 13 | 14 | [Parameter] 15 | public IconType IconType { get; set; } 16 | } 17 | -------------------------------------------------------------------------------- /WindyUI.Blazor/Cards/CardSizes.cs: -------------------------------------------------------------------------------- 1 | using System; 2 | using System.Collections.Generic; 3 | using System.Linq; 4 | using System.Text; 5 | using System.Threading.Tasks; 6 | 7 | namespace WindyUI.Cards 8 | { 9 | public enum CardSizes 10 | { 11 | Small, 12 | Medium, 13 | Large 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /WindyUI.Blazor/Cards/SimpleCard.razor: -------------------------------------------------------------------------------- 1 | 
2 | @ChildContent 3 |
4 | 5 | @code { 6 | [Parameter] 7 | public CardSizes Size { get; set; } 8 | 9 | [Parameter] 10 | public RenderFragment? ChildContent { get; set; } 11 | 12 | [Parameter] 13 | public string CssClass { get; set; } = ""; 14 | 15 | private string ComputedClass 16 | { 17 | get 18 | { 19 | var sizeClasses = ""; 20 | 21 | switch (Size) 22 | { 23 | case CardSizes.Small: 24 | sizeClasses = "p-4 max-w-lg"; 25 | break; 26 | case CardSizes.Medium: 27 | sizeClasses = "p-6 max-w-2xl"; 28 | break; 29 | case CardSizes.Large: 30 | sizeClasses = "p-10 max-w-4xl"; 31 | break; 32 | } 33 | 34 | return $"w-full {sizeClasses}"; 35 | } 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /WindyUI.Blazor/Form/BaseInput.cs: -------------------------------------------------------------------------------- 1 | using Microsoft.AspNetCore.Components; 2 | using Microsoft.AspNetCore.Components.Forms; 3 | using System; 4 | using System.Collections.Generic; 5 | using System.Linq; 6 | using System.Linq.Expressions; 7 | using System.Text; 8 | using System.Threading.Tasks; 9 | 10 | #nullable disable 11 | 12 | namespace WindyUI.Form 13 | { 14 | public abstract class BaseInput : ComponentBase 15 | { 16 | [CascadingParameter] 17 | protected EditContext CascadedEditContext { get; set; } 18 | 19 | protected FieldIdentifier _fieldIdentifier; 20 | 21 | protected override void OnInitialized() 22 | { 23 | _fieldIdentifier = FieldIdentifier.Create(ValueExpression); 24 | } 25 | 26 | protected string _uuid = Guid.NewGuid().ToString().Replace("-", "").Substring(0, 8); 27 | protected string _id = ""; 28 | 29 | [Parameter] 30 | public string Id 31 | { 32 | get 33 | { 34 | return _id; 35 | } 36 | set 37 | { 38 | _id = $"{value}-{_uuid}"; 39 | } 40 | } 41 | 42 | [Parameter] 43 | public string Label { get; set; } 44 | 45 | [Parameter] 46 | public string CssClass { get; set; } 47 | 48 | [Parameter] public T Value { get; set; } 49 | [Parameter] public EventCallback ValueChanged { get; set; } 50 | [Parameter] public Expression> ValueExpression { get; set; } 51 | 52 | [Parameter] 53 | public Expression> ValidationFor { get; set; } 54 | 55 | protected async Task HandleInput(ChangeEventArgs args) 56 | { 57 | await ValueChanged.InvokeAsync(ConvertTo(args.Value)); 58 | CascadedEditContext?.NotifyFieldChanged(_fieldIdentifier); 59 | } 60 | 61 | protected bool CanValidate => CascadedEditContext is not null && ValidationFor is not null; 62 | 63 | protected string _fieldCssClasses => CascadedEditContext?.FieldCssClass(_fieldIdentifier) ?? ""; 64 | 65 | private T ConvertTo(object value) 66 | { 67 | var returnValue = default(T); 68 | 69 | if(value is T) 70 | { 71 | returnValue = (T)value; 72 | } 73 | else 74 | { 75 | try 76 | { 77 | returnValue = (T)Convert.ChangeType(value, typeof(T)); 78 | } 79 | catch(InvalidCastException) 80 | { 81 | returnValue = default(T); 82 | } 83 | } 84 | 85 | return returnValue; 86 | } 87 | } 88 | } 89 | -------------------------------------------------------------------------------- /WindyUI.Blazor/Form/CheckboxInput.razor: -------------------------------------------------------------------------------- 1 | @inherits BaseInput 2 | 3 |
4 |
5 | 6 |
7 |
8 | 9 | @if(!string.IsNullOrEmpty(Description)) 10 | { 11 |

@Description

12 | } 13 |
14 |
15 | @if(CanValidate) 16 | { 17 |
18 | 19 |
20 | } 21 | 22 | @code { 23 | [Parameter] 24 | public string Description { get; set; } = ""; 25 | } 26 | -------------------------------------------------------------------------------- /WindyUI.Blazor/Form/CustomValidator.cs: -------------------------------------------------------------------------------- 1 | using Microsoft.AspNetCore.Components; 2 | using Microsoft.AspNetCore.Components.Forms; 3 | using System; 4 | using System.Collections.Generic; 5 | using System.Linq; 6 | using System.Text; 7 | using System.Threading.Tasks; 8 | 9 | namespace WindyUI.Form 10 | { 11 | public class CustomValidator : ComponentBase 12 | { 13 | private ValidationMessageStore? messageStore; 14 | 15 | [CascadingParameter] 16 | private EditContext? CurrentEditContext { get; set; } 17 | 18 | protected override void OnInitialized() 19 | { 20 | if(CurrentEditContext == null) 21 | { 22 | throw new InvalidOperationException( 23 | $"{nameof(CustomValidator)} requires a cascading " + 24 | $"parameter of type {nameof(EditContext)}. " + 25 | $"For example, you can use {nameof(CustomValidator)} " + 26 | $"inside an {nameof(EditForm)}."); 27 | } 28 | 29 | messageStore = new ValidationMessageStore(CurrentEditContext); 30 | 31 | CurrentEditContext.OnValidationRequested += (s, e) => 32 | messageStore.Clear(); 33 | CurrentEditContext.OnFieldChanged += (s, e) => 34 | messageStore.Clear(e.FieldIdentifier); 35 | } 36 | 37 | public void DisplayErrors(Dictionary> errors) 38 | { 39 | foreach(var err in errors) 40 | { 41 | messageStore!.Add(CurrentEditContext!.Field(err.Key), err.Value); 42 | } 43 | 44 | CurrentEditContext!.NotifyValidationStateChanged(); 45 | } 46 | 47 | public void ClearErrors() 48 | { 49 | messageStore!.Clear(); 50 | CurrentEditContext!.NotifyValidationStateChanged(); 51 | } 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /WindyUI.Blazor/Form/ImageUploadInput.razor: -------------------------------------------------------------------------------- 1 | @using WindyUI.Icons; 2 | @using WindyUI.Buttons; 3 | 4 | 5 | @if(!string.IsNullOrEmpty(Config.Label)) 6 | { 7 | @Config.Label 8 | } 9 | 10 | 11 |
12 |
13 |
14 | 15 |
16 | 27 |
28 | @if(Config.SupportedTypes.Count > 0) 29 | { 30 |

31 | @string.Join(", ", Config.SupportedTypes) up to 10MB 32 |

33 | } 34 | @if(Config.MaxFileLimit.HasValue && Config.AllowsMultiple) 35 | { 36 |

37 | @Config.MaxFileLimit.Value images left. 38 |

39 | } 40 |
41 | 42 |
43 | 44 | @foreach(var image in Base64Images) 45 | { 46 |
47 | 48 | 49 |
50 | 51 | } 52 |
53 |
54 |
-------------------------------------------------------------------------------- /WindyUI.Blazor/Form/ImageUploadInput.razor.cs: -------------------------------------------------------------------------------- 1 | using Microsoft.AspNetCore.Components; 2 | using Microsoft.AspNetCore.Components.Forms; 3 | using System; 4 | using System.Collections.Generic; 5 | using System.Linq; 6 | using System.Net.Http; 7 | using System.Net.Http.Headers; 8 | using System.Threading.Tasks; 9 | 10 | namespace WindyUI.Form 11 | { 12 | public partial class ImageUploadInput : ComponentBase 13 | { 14 | public ImageUploadInput() 15 | { 16 | var identifier = Guid.NewGuid().ToString().Replace("-", "").Substring(0, 5); 17 | 18 | InputIdentifier = $"file-{identifier}"; 19 | } 20 | 21 | private string InputIdentifier { get; set; } 22 | 23 | [Parameter] 24 | public ImageUploadInputConfig Config { get; set; } = new ImageUploadInputConfig(); 25 | 26 | //Get is to be called using a ref to the component. Needed to send data to the server. 27 | public IReadOnlyList BrowserFiles { get; protected set; } = new List(); 28 | 29 | private List Base64Images { get; set; } = new List(); 30 | 31 | //TO DO: Image validation must happen here. 32 | private async Task HandleChange(InputFileChangeEventArgs e) 33 | { 34 | IReadOnlyList fileList; 35 | 36 | //If component supports multiple files. 37 | if(Config.AllowsMultiple) 38 | { 39 | if(Config.MaxFileLimit.HasValue) 40 | fileList = e.GetMultipleFiles(Config.MaxFileLimit.Value); 41 | else 42 | fileList = e.GetMultipleFiles(); 43 | 44 | BrowserFiles = fileList; 45 | } 46 | else //Single file support. 47 | { 48 | BrowserFiles = new List { e.File }; 49 | } 50 | 51 | await BrowserFilesToBase64Images(); 52 | 53 | return true; 54 | } 55 | 56 | private async Task BrowserFilesToBase64Images() 57 | { 58 | foreach(var image in BrowserFiles) 59 | { 60 | if(image != null) 61 | { 62 | var format = "image/png"; 63 | var buffer = new byte[image.Size]; 64 | await image.OpenReadStream().ReadAsync(buffer); 65 | Base64Images.Add($"data:{format};base64,{Convert.ToBase64String(buffer)}"); 66 | } 67 | } 68 | 69 | return true; 70 | } 71 | } 72 | } 73 | -------------------------------------------------------------------------------- /WindyUI.Blazor/Form/ImageUploadInputConfig.cs: -------------------------------------------------------------------------------- 1 | using Microsoft.AspNetCore.Components.Forms; 2 | using System; 3 | using System.Collections.Generic; 4 | using System.Linq; 5 | using System.Threading.Tasks; 6 | 7 | namespace WindyUI.Form 8 | { 9 | public class ImageUploadInputConfig 10 | { 11 | public string? Label { get; set; } 12 | public IReadOnlyList? ExistingFiles { get; set; } 13 | public bool AllowsMultiple { get; set; } 14 | public int? MaxFileLimit { get; set; } 15 | public List SupportedTypes { get; set; } = new List(); 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /WindyUI.Blazor/Form/RadioGroup.razor: -------------------------------------------------------------------------------- 1 | @inherits BaseInput 2 | 3 |
4 | 5 | @Label 6 | 7 | @foreach(var option in Options) 8 | { 9 |
10 | 11 | 14 |
15 | } 16 |
17 | @if(CanValidate) 18 | { 19 |
20 | 21 |
22 | } 23 | 24 | 25 | @code { 26 | [Parameter] 27 | public List Options { get; set; } = new List(); 28 | } -------------------------------------------------------------------------------- /WindyUI.Blazor/Form/SelectInput.razor: -------------------------------------------------------------------------------- 1 | @inherits BaseInput 2 | 3 |
4 |
5 | @if(!string.IsNullOrEmpty(Label)) 6 | { 7 | 8 | } 9 | 15 |
16 | @if(CanValidate) 17 | { 18 |
19 | 20 |
21 | } 22 |
23 | 24 | @code { 25 | [Parameter] 26 | public List Options { get; set; } = new List(); 27 | } -------------------------------------------------------------------------------- /WindyUI.Blazor/Form/TextAreaInput.razor: -------------------------------------------------------------------------------- 1 | @inherits BaseInput 2 | 3 | @if(!string.IsNullOrEmpty(Label)) 4 | { 5 | 8 | } 9 | 10 |
11 |