🆕 add the new component MToggle (#2066)

* 🆕 : add the new component MToggle

* refactor with Toggle component

* add docs for toggle

* (ApiGenerator): type parameter cannot resolve

docs/Masa.Blazor.Docs/Examples/labs/toggles/Menu.razor

@@ -0,0 +1,31 @@
+<div class="text-center">
+ <MMenu @bind-Value="_on" OffsetY>
+ <ActivatorContent Context="activator">
+ <MToggle Value="_on" DataOn="@("mdi-toggle-switch")" DataOff="@("mdi-toggle-switch-off")">
+ <MButton IconName="@context.Data" @attributes="@activator.Attrs"/>
+ </MToggle>
+ </ActivatorContent>
+ <ChildContent>
+ <MList>
+ @foreach (var item in items)
+ {
+ <MListItem Title="@item"/>
+ }
+ </MList>
+ </ChildContent>
+ </MMenu>
+</div>
+
+@code {
+
+ private bool _on;
+
+ string[] items =
+ [
+ "Click Me",
+ "Click Me",
+ "Click Me",
+ "Click Me 2"
+ ];
+
+}

docs/Masa.Blazor.Docs/Examples/labs/toggles/TData.razor

@@ -0,0 +1,18 @@
+<div class="text-center">
+ <MToggle @bind-Value="_on" DataOn="_dataOn" DataOff="_dataOff">
+ <MButton OnClick="@context.Toggle" LeftIconName="@context.Data?.Icon">
+ @context.Data?.Label
+ </MButton>
+ </MToggle>
+</div>
+
+@code {
+
+ private bool _on;
+
+ private record Model(string Label, string Icon);
+
+ private Model _dataOn = new Model("On", "mdi-check");
+ private Model _dataOff = new Model("Off", "mdi-close");
+
+}

docs/Masa.Blazor.Docs/Examples/labs/toggles/Usage.razor

@@ -0,0 +1,11 @@
+<div class="text-center">
+ <MToggle @bind-Value="_on" DataOn="@("mdi-check")" DataOff="@("mdi-close")">
+ <MButton OnClick="@context.Toggle" IconName="@context.Data"/>
+ </MToggle>
+</div>
+
+@code {
+
+ private bool _on;
+
+}

docs/Masa.Blazor.Docs/wwwroot/data/apis/toggles/MToggle-en-US.json

@@ -0,0 +1,10 @@
+{
+ "props": {
+ "dataOn": "The data when `Value` is `true`",
+ "dataOff": "The data when `Value` is `false`"
+ },
+ "events": {
+ },
+ "contents": {
+ }
+}

docs/Masa.Blazor.Docs/wwwroot/data/apis/toggles/MToggle-zh-CN.json

@@ -0,0 +1,10 @@
+{
+ "props": {
+ "dataOn": "当 `Value` 为`true`时的值",
+ "dataOff": "当 `Value` 为`false`时的值"
+ },
+ "events": {
+ },
+ "contents": {
+ }
+}

docs/Masa.Blazor.Docs/wwwroot/data/nav.json

@@ -349,6 +349,11 @@
  "state": "new",
  "releasedOn": "v1.0.4"
  },
+ {
+ "title": "toggles",
+ "state": "new",
+ "releasedOn": "v1.7.0"
+ },
  {
  "title": "watermark",
  "state": "new",

docs/Masa.Blazor.Docs/wwwroot/pages/labs/toggles/en-US.md

@@ -0,0 +1,26 @@
+---
+title: Toggle
+desc: "The Toggle component is a wrapper that allows you to switch between two states."
+related:
+ - /blazor/components/buttons
+ - /blazor/components/icons
+ - /blazor/components/switches
+---
+
+## Usage
+
+<masa-example file="Examples.labs.toggles.Usage"></masa-example>
+
+## Examples
+
+### Props
+
+#### TData
+
+<masa-example file="Examples.labs.toggles.TData"></masa-example>
+
+### Misc
+
+#### Menu
+
+<masa-example file="Examples.labs.toggles.Menu"></masa-example>

docs/Masa.Blazor.Docs/wwwroot/pages/labs/toggles/zh-CN.md

@@ -0,0 +1,26 @@
+---
+title: Toggle（切换）
+desc: "切换组件是一个包装器，允许您在两种状态之间切换。"
+related:
+ - /blazor/components/buttons
+ - /blazor/components/icons
+ - /blazor/components/switches
+---
+
+## 使用 {#usage}
+
+<masa-example file="Examples.labs.toggles.Usage"></masa-example>
+
+## 示例 {#examples}
+
+### 属性 {#props}
+
+#### TData
+
+<masa-example file="Examples.labs.toggles.TData"></masa-example>
+
+### 其他 {#misc}
+
+#### 菜单 {#menu}
+
+<masa-example file="Examples.labs.toggles.Menu"></masa-example>

docs/Masa.Docs.Shared/Components/Menus/NotificationsMenu.razor

@@ -9,16 +9,21 @@
  Width="520"
  MaxWidth="@("100%")">
  <ActivatorContent>
- <MButton Icon Class="default-app-btn mx-1" @attributes="@context.Attrs">
- <MBadge Value="UnreadNotifications.Count > 0"
- Color="red"
- Dot>
- @{
- var outline = _menu ? "" : "-outline";
- }
- <MIcon Icon="@(UnreadNotifications.Count > 0 ? $"mdi-bell-ring{outline}" : $"mdi-bell{outline}")"></MIcon>
- </MBadge>
- </MButton>
+ @{
+ var outline = _menu ? "" : "-outline";
+ }
+ <MToggle Value="UnreadNotifications.Count > 0" 
+ DataOn="@($"mdi-bell-ring{outline}")"
+ DataOff="@($"mdi-bell{outline}")"
+ Context="toggleContext">
+ <MButton Icon Class="default-app-btn mx-1" @attributes="@context.Attrs">
+ <MBadge Value="@toggleContext.On"
+ Color="red"
+ Dot>
+ <MIcon Icon="@toggleContext.Data"></MIcon>
+ </MBadge>
+ </MButton>
+ </MToggle>
  </ActivatorContent>
  <ChildContent>
  <MToolbar Dense Elevation="0">

docs/Masa.Docs.Shared/Components/ThemeToggle.razor

@@ -3,11 +3,13 @@
 @inject IJSRuntime JSRuntime
 @implements IDisposable
 
-<AppTooltipButton Icon="@(MasaBlazor.Theme.Dark ? "mdi-weather-night" : "mdi-weather-sunny")"
- Path="toggle-theme"
- Class="mr-2 ml-2"
- OnClick="@SwitchTheme">
-</AppTooltipButton>
+<MToggle Value="@MasaBlazor.Theme.Dark" DataOn="@("mdi-weather-night")" DataOff="@("mdi-weather-sunny")">
+ <AppTooltipButton Icon="@context.Data"
+ Path="toggle-theme"
+ Class="mr-2 ml-2"
+ OnClick="@SwitchTheme">
+ </AppTooltipButton>
+</MToggle>
 
 @code {
 

docs/Masa.Docs.Shared/wwwroot/locale/en-US.json

@@ -255,6 +255,7 @@
  "simple-tables": "Simple tables",
  "tabs": "Tabs",
  "timelines": "Timelines",
+ "toggles": "Toggles",
  "enqueued-snackbars": "Enqueued snackbars",
  "tooltips": "Tooltips",
  "treeview": "Treeview",

docs/Masa.Docs.Shared/wwwroot/locale/zh-CN.json

@@ -251,6 +251,7 @@
  "simple-tables": "Simple tables（简单表格）",
  "tabs": "Tabs（选项卡）",
  "timelines": "Timelines（时间轴）",
+ "toggles": "Toggles（切换）",
  "enqueued-snackbars": "Enqueued snackbars（消息队列）",
  "tooltips": "Tooltips（工具提示）",
  "treeview": "Treeview（树形视图）",

src/Masa.Blazor.Docs.ApiGenerator/ApiGenerator.cs

@@ -181,8 +181,7 @@ private static void AnalyzeParameters(INamedTypeSymbol classSymbol, List<Paramet
 
  if (attrs.Any(attr => attr.AttributeClass?.Name == BlazorParameterAttributeName))
  {
- var type = parameterSymbol.Type as INamedTypeSymbol;
- if (type is null || ignoreParameters.Contains(parameterSymbol.Name))
+ if (ignoreParameters.Contains(parameterSymbol.Name))
  {
  continue;
  }
@@ -196,32 +195,42 @@ private static void AnalyzeParameters(INamedTypeSymbol classSymbol, List<Paramet
  defaultValue = GetDefaultValueOnApiParameterAttribute(apiParameterAttribute);
  }
 
- var typeText = GetTypeText(type);
+ var isObsolete =
+ attrs.FirstOrDefault(attr => attr.AttributeClass?.Name == "ObsoleteAttribute") is not null;
 
- if (!s_typeDescCache.TryGetValue(typeText, out var typeDesc))
+ if (parameterSymbol.Type is ITypeParameterSymbol typeParameterSymbol)
  {
- typeDesc = GetTypeDesc(type);
- if (!string.IsNullOrWhiteSpace(typeDesc))
- {
- s_typeDescCache.Add(typeText, typeDesc!);
- }
+ defaultParameters.Add(new ParameterInfo(parameterSymbol.Name, typeParameterSymbol.Name, null,
+ defaultValue, isObsolete, false, releasedOn));
  }
+ else if (parameterSymbol.Type is INamedTypeSymbol namedTypeSymbol)
+ {
+ var typeText = GetTypeText(namedTypeSymbol);
 
- var isObsolete = attrs.FirstOrDefault(attr => attr.AttributeClass?.Name == "ObsoleteAttribute") is not null;
+ if (!s_typeDescCache.TryGetValue(typeText, out var typeDesc))
+ {
+ typeDesc = GetTypeDesc(namedTypeSymbol);
+ if (!string.IsNullOrWhiteSpace(typeDesc))
+ {
+ s_typeDescCache.Add(typeText, typeDesc!);
+ }
+ }
 
- var parameterInfo = new ParameterInfo(parameterSymbol.Name, typeText, typeDesc, defaultValue, isObsolete, false, releasedOn);
+ var parameterInfo = new ParameterInfo(parameterSymbol.Name, typeText, typeDesc, defaultValue,
+ isObsolete, false, releasedOn);
 
- if (type.Name.StartsWith("RenderFragment"))
- {
- contentParameters.Add(parameterInfo);
- }
- else if (type.Name.StartsWith("EventCallback"))
- {
- eventParameters.Add(parameterInfo);
- }
- else
- {
- defaultParameters.Add(parameterInfo);
+ if (namedTypeSymbol.Name.StartsWith("RenderFragment"))
+ {
+ contentParameters.Add(parameterInfo);
+ }
+ else if (namedTypeSymbol.Name.StartsWith("EventCallback"))
+ {
+ eventParameters.Add(parameterInfo);
+ }
+ else
+ {
+ defaultParameters.Add(parameterInfo);
+ }
  }
  }
  }

src/Masa.Blazor/Components/Toggle/MToggle.cs

@@ -0,0 +1,30 @@
+namespace Masa.Blazor;
+
+public class MToggle<TData> : ComponentBase
+{
+ [Parameter] public bool Value { get; set; }
+
+ [Parameter] public EventCallback<bool> ValueChanged { get; set; }
+
+ [Parameter] public TData? DataOn { get; set; }
+
+ [Parameter] public TData? DataOff { get; set; }
+
+ [Parameter] public RenderFragment<ToggleContext<TData>>? ChildContent { get; set; }
+
+ private async Task OnToggle()
+ {
+ Value = !Value;
+ await ValueChanged.InvokeAsync(Value);
+ }
+
+ protected override void BuildRenderTree(RenderTreeBuilder builder)
+ {
+ builder.AddContent(
+ 0,
+ ChildContent?.Invoke(new ToggleContext<TData>(OnToggle, Value ? DataOn : DataOff, Value))
+ );
+ }
+}
+
+public record ToggleContext<TData>(Func<Task> Toggle, TData? Data, bool On);