mudblazor / trymudblazor Goto Github PK

View Code? Open in Web Editor NEW

This project forked from blazorrepl/blazorrepl

72.0 72.0 35.0 23.73 MB

A playground for trying out and testing MudBlazor components entirely in the browser.

Home Page: https://try.mudblazor.com/

License: GNU General Public License v2.0

HTML 19.68% C# 54.03% CSS 4.89% JavaScript 14.94% SCSS 6.46%

blazor blazor-fiddle components-library fiddle hacktoberfest mudblazor mudblazor-codepen mudblazor-fiddle repl

trymudblazor's Issues

Better text on the right side panel of uncompiled snippets

This is What REPL now has:

Welcome to Blazor REPL!
How to start?
Run the code on the left by clicking the "RUN" button or pressing Ctrl+S.

Share your snippets!
Share your snippet easily by following the steps:

Click the "SAVE" button
Confirm that you agree with the terms
Copy the URL of the snippet and paste it wherever you need
What are the editor's features?
We are using Microsoft's Monaco Editor. It is the code editor that powers VS Code. You can access its Command Palette by focusing on the editor and clicking F1 button on your keyboard. You will see the list of all available commands. You can use the commands' shortcuts too.

Some of the most commonly used commands are:

Ctrl+K Ctrl+C comments out the current line
Ctrl+Shift+K deletes a line
Command Palette -> Editor Font Zoom In/Out changes the font size
If you want to dig a little deeper into Monaco Editor's features, you can do so here.

Enjoy creating!

Provide data services/apis for the table snippets

Add css support

It would be helpful to specify css, either inline somehow or in another tab.

[Feature Request] Search

Duplicate of my issue on the main repo - I didn't know about this repo.

It would be nice to quickly find samples of mudblazor code.

Is it possible to make the TryMudBlazor site searchable?

I'm sure there's a large number of very useful samples in there, but there's no way to find them.

Unable to open try mudblazor from few days.

Here is the exception it is throwing.

[Known Issue] "The operation is insecure" in Firefox Private mode

Official Mozilla Documentation states that: "Furthermore, because CacheStorage requires file-system access, it may be unavailable in private mode in Firefox."

Bugzilla#1724607 and Bugzilla#1320796 claims that: "Cache Storage/Service Worker implementation requires file system access. It's disabled in Firefox private mode whereas Chrome/Edge/Safari incognito mode uses a memory file system."

Session crashes when running a snippet containing only a component definition

When the following snippet is pasted into the initial razor file, the session crashes. Restarting the application resolves the issue, clearing browser cache & data resolves the issue.

@typeparam T
@inherits MudSelectItem<T>

<MudSelectItem @onmouseenter="ShowButtons" @onmouseleave="HideButtons" T="@T"
               Class="@Class"
               Value="@Value"
               Command="@Command"
               Disabled="@Disabled"
               Href="@Href"
               Style="@Style"
               Tag="@Tag"
               CommandParameter="@CommandParameter"
               DisableRipple="@DisableRipple"
               ForceLoad="@ForceLoad"
               OnClick="@OnClick">
    <MudContainer Class="d-inline-flex ma-0 pa-0">
        <MudText Class="d-inline-flex flex-shrink-0">@(Text ?? Value.ToString())</MudText>
        <MudContainer Class="d-inline-flex flex-grow-1"/>
        @if (_showButtons)
        {
            <MudIconButton Class="d-inline-flex z-10" Size="Size.Small" Title="@EditTitle" Icon="@EditIcon" Color="@EditColor" OnClick="@(async () => await OnEdit(Value))"/>
            <MudDivider Class="mx-2" Vertical="true" FlexItem="true" />
            <MudIconButton Class="d-inline-flex z-10" Size="Size.Small" Title="@DeleteTitle" Icon="@DeleteIcon" Color="@DeleteColor" OnClick="@(async () => OnDelete(Value))"/>
        }
    </MudContainer>
</MudSelectItem>

@code {
    [Parameter]
    public string? Text { get; set; }

    [Parameter]
    public Func<T, Task> OnEdit { get; set; }
    
    [Parameter]
    public Func<T, Task> OnDelete { get; set; }

    [Parameter]
    public string? EditTitle { get; set; } = "Edit";

    [Parameter]
    public string? DeleteTitle { get; set; } = "Delete";

    [Parameter]
    public string? EditIcon { get; set; } = Icons.Material.Outlined.Edit;

    [Parameter]
    public string? DeleteIcon { get; set; } = Icons.Material.Outlined.Delete;

    [Parameter]
    public Color EditColor { get; set; } = Color.Info;

    [Parameter]
    public Color DeleteColor { get; set; } = Color.Error;

    private bool _showButtons { get; set; }

    private async Task HideButtons(MouseEventArgs args)
    {
        _showButtons = false;
        InvokeAsync(StateHasChanged);
    }

    private void ShowButtons(MouseEventArgs args)
    {
        _showButtons = true;
        InvokeAsync(StateHasChanged);
    }

    private async void InvokeEdit()
    {
        await OnEdit(Value);
    }

    private async void InvokeDelete()
    {
        await OnDelete(Value);
    }
}

new feature request - "full screen" mode

It would be nice if there was a button in the bottom (status bar) that could toggle into "full screen" mode.
Ideally to show the full "Run" pane, so that one can test it in a mobile browser.
Having full screen mode for code page could be useful too.

Support IntelliSense and auto-completion.

This might be difficult but should be investigated with the new razor tooling engine.

Update monaco-editor

https://github.com/MudBlazor/TryMudBlazor/tree/a4d7438c155a62fdb99d77555dcb24b8163a1f3e/src/TryMudBlazor.Client/wwwroot/lib/monaco-editor

Unhandled Error when loading try.mudblazor.com on Firefox

When trying to load try.mudblazor.com on Firefox, there is an unhandled error. No snippits can be loaded nor can the base site.

System.AggregateException: One or more errors occurred. (Could not resolve type with token 0100006c from typeref (expected class 'Try.UserComponents.__Main' in assembly 'Try.UserComponents, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null'))
 ---> System.TypeLoadException: Could not resolve type with token 0100006c from typeref (expected class 'Try.UserComponents.__Main' in assembly 'Try.UserComponents, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null')
   at TryMudBlazor.Client.Program.Main(String[] args)
   --- End of inner exception stack trace --- blazor.webassembly.js:1:46102
    callEntryPoint https://try.mudblazor.com/_framework/blazor.webassembly.js:1

Show TryMudBlazor version in footer

Show a link to the latest commit version in the footer so you know what it's running.

footer.mp4

GitVersioning is a possibility and includes automatically increasing version numbers.

Description of the snippet

Proposal
Force the user that wants to create a tryMudBlazor snippet to add a description of what this snippet is meant to.
So, when you revisit old ones, you know what the purpose is.

Multiple popovers appear when you use more than one .razor file

See MudBlazor/MudBlazor#3249

Reproduction: https://try.mudblazor.com/snippet/QEQbFlEIThPxeNT

Consider adding antivirus/firewall bypasses to the site

Blazor WASM sites often get blocked by corporate firewalls because of the fetch of dll's. Firewalls will often identify them as unsafe due to the dll extension or the file starting with the "MZ" header (executable) meaning you can't access the tryblazor or mudblazor.com sites behind a lot of corporate firewalls.

This nuget package works well to bypass the issue by Xor'ing the dll's and changing the file extension on publish.
https://github.com/stavroskasidis/BlazorWasmAntivirusProtection

Mudtable with Expansion Panels

I have a Item data model with a List propery sessions, it is a 1 -> many relationship and I want to be able to have a table of expansion panels that open up to the itemized sessions and I can't figure out how to do this. Is there a way to alter the TableGroupDefinnition to have the parent object as the group by and the session id as the selector? Can i do some kind of renderfragment situation? Any ideas? I feel like this is a common data structure and would be a great addition to the componenets for mudtable. Thank you!

Issue in private tab

I previously reported this issue in Discord, but to ensure it is not overlooked, I am now creating a formal issue here.

Steps to reproduce:

Open a private tab in Edge
Navigate to https://try.mudblazor.com/snippet
An exception will appear
Refresh the page and the error disappears
Close all instances of Edge and repeat step 1 to see the error reappear.

Exception:

crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
      Unhandled exception rendering component: Cannot read properties of null (reading 'DarkTheme')
      TypeError: Cannot read properties of null (reading 'DarkTheme')
          at Object.create (https://try.mudblazor.com/editor/main.js?v=943ea4c5-58cf-4e31-8931-f3aa76c9c0fd:116:67)
          at Object.invokeJSFromDotNet (https://try.mudblazor.com/_framework/blazor.webassembly.js:1:3219)
          at Object.Gt [as invokeJSFromDotNet] (https://try.mudblazor.com/_framework/blazor.webassembly.js:1:62602)
          at Object.Ii (https://try.mudblazor.com/_framework/dotnet.7.0.4.n8uw76titq.js:5:71922)
          at _mono_wasm_invoke_js_blazor (https://try.mudblazor.com/_framework/dotnet.7.0.4.n8uw76titq.js:14:103886)
          at https://try.mudblazor.com/_framework/dotnet.wasm:wasm-function[313]:0x1d507
          at https://try.mudblazor.com/_framework/dotnet.wasm:wasm-function[283]:0x1c935
          at https://try.mudblazor.com/_framework/dotnet.wasm:wasm-function[221]:0xe025
          at https://try.mudblazor.com/_framework/dotnet.wasm:wasm-function[220]:0xce95
          at https://try.mudblazor.com/_framework/dotnet.wasm:wasm-function[8115]:0x1a21ff
Microsoft.JSInterop.JSException: Cannot read properties of null (reading 'DarkTheme')
TypeError: Cannot read properties of null (reading 'DarkTheme')
    at Object.create (https://try.mudblazor.com/editor/main.js?v=943ea4c5-58cf-4e31-8931-f3aa76c9c0fd:116:67)
    at Object.invokeJSFromDotNet (https://try.mudblazor.com/_framework/blazor.webassembly.js:1:3219)
    at Object.Gt [as invokeJSFromDotNet] (https://try.mudblazor.com/_framework/blazor.webassembly.js:1:62602)
    at Object.Ii (https://try.mudblazor.com/_framework/dotnet.7.0.4.n8uw76titq.js:5:71922)
    at _mono_wasm_invoke_js_blazor (https://try.mudblazor.com/_framework/dotnet.7.0.4.n8uw76titq.js:14:103886)
    at https://try.mudblazor.com/_framework/dotnet.wasm:wasm-function[313]:0x1d507
    at https://try.mudblazor.com/_framework/dotnet.wasm:wasm-function[283]:0x1c935
    at https://try.mudblazor.com/_framework/dotnet.wasm:wasm-function[221]:0xe025
    at https://try.mudblazor.com/_framework/dotnet.wasm:wasm-function[220]:0xce95
    at https://try.mudblazor.com/_framework/dotnet.wasm:wasm-function[8115]:0x1a21ff
   at Microsoft.JSInterop.WebAssembly.WebAssemblyJSRuntime.InvokeJS(String identifier, String argsJson, JSCallResultType resultType, Int64 targetInstanceId)
   at Microsoft.JSInterop.JSInProcessRuntime.Invoke[IJSVoidResult](String identifier, Int64 targetInstanceId, Object[] args)
   at Microsoft.JSInterop.JSInProcessRuntime.Invoke[IJSVoidResult](String identifier, Object[] args)
   at Microsoft.JSInterop.JSInProcessRuntimeExtensions.InvokeVoid(IJSInProcessRuntime jsRuntime, String identifier, Object[] args)
   at TryMudBlazor.Client.Components.CodeEditor.OnAfterRender(Boolean firstRender)
   at Microsoft.AspNetCore.Components.ComponentBase.Microsoft.AspNetCore.Components.IHandleAfterRender.OnAfterRenderAsync()
   at Microsoft.AspNetCore.Components.Rendering.ComponentState.NotifyRenderCompletedAsync()

Remove the "Leave Site" Alert when closing, it is annoying

[Feature Request] Add Mudblazor designer

It would be great if we had a WYSIWYG designer.

It doesen't need to be too advanced, just enought to quickly scaffold some code.

This would be a great help to some people who are getting started (like me) with Mudblazor.

Any thoughts?

Try Mudblazor is broken from the main page!

I just went to check it out and it doesn't load ???

Editor showing default theme on first load

When you load the UserPage for the first time the editor will be themed default and the rest will be in vs-dark mode. I tried the following change:

        create: function (id, value, language) {
            if (!id) { return; }
            let _theme = "vs-dark"; // was "default"
            let userPreferences = localStorage.getItem("userPreferences");
            if (userPreferences) {
                const userPrefer
encesJSON = JSON.parse(userPreferences);
                if (userPreferencesJSON.hasOwnProperty("DarkTheme") && userPreferencesJSON.DarkTheme) {
                    _theme = "vs-dark";
                }

Which appears to fix it at first until you refresh the page when you have the theme set to default. The editor shows in vs-dark mode. The problem appears to be a failure to load the setting properly when you refresh or when there's no userPreferences set.

mudblazor / trymudblazor Goto Github PK

trymudblazor's Issues

Recommend Projects

Recommend Topics

Recommend Org