v1.5.0

Masa.Blazor.MauiDemo adds support for login and logout.

⬆️ Upgrade guide

• PageStack: The component was introduced in v1.4.0 to manage the page stack. In v1.5.0, we refactored it and introduced the PageStackNavController service to solve some potential problems and provide more complete functionality.
• Icon: Remove the unnecessary IsActive parameter.
• Border: Refactor using CSS approach.
  • The Rounded and WrapperStyle parameters are deleted.
  • The Color parameter only supports built-in primary, secondary, accent, surface, success, error, warning, info and standard CSS color values.

    - <MBorder Color="pink"></Border>
    + <MBorder Color="#e91e63"></Border>

✨ Release notes

🚀 Features

• Button: add IconName, LeftIconName and RightIconName to simplify the usage of icon buttons. #1863

  <!-- before -->
  <MButton Icon>
      <MIcon>mdi-abc</MIcon>
  </MButton>
  
  <!-- now -->
  <MButton IconName="mdi-abc" />

  <!-- before -->
  <MButton>
      <MIcon Left>mdi-abc</MIcon>
      Button
  </MButton>
  
  <!-- now -->
  <MButton LeftIconName="mdi-abc">Button</MButton>

  <!-- before -->
  <MButton>
      Button
      <MIcon Right>mdi-abc</MIcon>
  </MButton>
  
  <!-- now -->
  <MButton RightIconName="mdi-abc">Button</MButton>

• Card: add sub-component parameter, includes Title, Subtitle and Text. #1880

  <!-- before -->
  <MCard>
      <MCardTitle>Title</MCardTitle>
      <MCardSubtitle>Subtitle</MCardSubtitle>
      <MCardText>Small plates, salads & sandwiches - an intimate setting with 12 indoor seats plus patio seating.</MCardText>
  </MCard>
  
  <!-- now -->
  <MCard Title="Title"
         Subtitle="Subtitle"
         Text="Small plates, salads & sandwiches - an intimate setting with 12 indoor seats plus patio seating." />

• DataTable: add support for cell ellipsis and custom cell content in Headers. #1844

  <!-- A quick preview of the 'Custom cell content' feature -->
  <!-- before -->
  <MDataTable TItem="Dessert" Headers="_headers" Items="_desserts" Class="elevation-1">
      <ItemColContent>
          @if (context.Header.Value == nameof(Dessert.Calories))
          {
              <MChip Color="@GetColor(context.Item.Calories)" Dark>
                  @context.Item.Calories
              </MChip>
          }
          else
          {
              @context.Value
          }
      </ItemColContent>
  </MDataTable>
  
  <!-- now -->
  <MDataTable TItem="Dessert" Headers="_headers" Items="_desserts" Class="elevation-1" />
  @code {
      private static RenderFragment CaloriesCell(Dessert dessert) => __builder =>
      {
          <MChip Color="@GetColor(dessert.CCalories)" Dark>
              @dessert.Calories
          </MChip>
      };
  
      private List<DataTableHeader<Dessert>> _headers = new List<DataTableHeader<Dessert>>
      {
          new()
          {
              Text = "Calories",
              Value = nameof(Dessert.Calories),
              CellRender = dessert => CaloriesCell(dessert) // 👈
          },
          ...
      }
  }

• ListItem: add sub-component parameters, includes Title, Subtitle, PrependAvatar, PrependIcon, AppendAvatar and AppendIcon. #1865

  <!-- before -->
  <MListItem>
      <MListItemAvatar>
          <MImage Src="http://..."></MImage>
      </MListItemAvatar>
      <MListItemContent>
          <MListItemTitle>Title</MListItemTitle>
          <MListItemSubtitle>Subtitle</MListItemSubtitle>
      </MListItemContent>
      <MListItemIcon>
          <MIcon>mdi-abc</MIcon>
      </MListItemIcon>
  </MListItem>
  
  <!-- now -->
  <MListItem Title="Title"
             Subtitle="Subtitle"
             PrependAvatar="http://..."
             AppendIcon="mdi-abc">
  </MListItem>

• Tabs: add support for setting the height and re-rendering the slider when switching RTL. #1851 #1875

• Cascader: add support for custom delimiter. #1883

• OptInput: add support for automatic focus the first input. #1874

🐛 Bug fixes

• AddMasaBlazor: forgot to set the lifetime for PopupProvider. #1877
• CarouselItem: Href doesn't work. #1888
• Menu: position error in dialog after using block scroll strategy. masastack/BlazorComponent#615
• SystemBar: missing @attribtues. #1876
• Xgplayer: invokeVoid error. #1878
• Dialog: always display scroll bar when using block strategy. #1889

♻️ Refactors

• Icon: remove the unnecessary IsActive parameter. #1873
• Rating: merge code from BlazorComponent. #1833
• Border: refactor using CSS approach. #1830

🧪 Labs

• PageStack: redesign the component. #1879 #1862
  • PageStackNavController service for managing the navigation stack, provides Push, Pop, GoBack, Replace, Clear and GoToTab methods.

    @inject PageStackNavController NavController
    
    <MButton OnClick="@(() => NavController.Push("/stack-page"))">Go to stack page</MButton>

  • For the Push operation, you can add the built-in data-page-stack-strategy="push" attribute to the a tag or component to automatically push onto the stack when clicked.

    <a href="/stack-page" data-page-stack-strategy="push">Stack page</a>
    <MButton Href="/stack-page" data-page-stack-strategy>Stack page</MButton>

  • PStackPageBase base class for stack pages, provides OnPageActivated[Async] and OnPageDeactivated[Async] lifecycle methods.

    @inherit PStackPageBase
    
    @code {
        protected override void OnPageActivated(object? state)
        {
            // `state` comes from the parameter passed when the previous page calls GoBack
        }
    }