v1.7.0-rc.1

⬆️ Upgrade guide

• Pagination: A mini style UI has been added, now when the browser window is less than 600px, it will automatically use it. If you don’t want to use the mini style, you can manually set it through the MiniVariant property. Thanks to @Lee-Lily-Lea. #2072 #2075

    <MPagination @bind-Value="page"
                Length="10"
  +              MiniVariant="false"
    ></MPagination>

• Form: DataAnnotations validation now natively supports complex types, no need to reference additional libraries and code. #2073 #2084

  - <PackageReference Include="Microsoft.AspNetCore.Components.DataAnnotations.Validation" Version="3.2.0-rc1.20223.4" />

    <MForm>
  -     <ObjectGraphDataAnnotationsValidator />
        @foreach (var person in _order.Persons)
        {
            <MTextField @bind-Value="person.Name" Label="Name"></MTextField>
        }
    </MForm>
  
    @code {
      public class Order
      {
  -       [ValidateComplexType]
          public List<Person> Persons { get; set; }
      }
  
      public class Person
      {
          [Required]
          public string Name { get; set; }
      }
  
      private Order _order = new() { Persons = [] };
    }

• Treeview: After enabling the Selectable property, you can now select by clicking on the row. To disable this functionality, you need to set SelectOnRowClick to false. #2064

    <MTreeview @bind-Value="_selected"
  +            SelectOnRowClick="false"
              Selectable="true">
    </MTreeview>

✨ Release notes

🎉 New components

• PdfMobileViewer: a PDF viewer designed for mobile #2103
• Toggle: a wrapper that allows you to switch between two states #2066
• AppThemeStylesheet: using for avoiding the brief flicker when application is loaded, more details can ben found in the docs. #2043

🚀 Features

• DateTimePicker: a default MTextField component is built-in now, and you can customize the MTextField component using the PDefaultDateTimePickerActivator #2054 #2052

  <!-- before -->
  <PDateDigitalClockPicker @bind-Value="_date"
                           TimeFormat="TimeFormat.Hr24"
                           ViewType="_pickerViewType">
    <ActivatorContent>
        <MTextField @bind-Value="_date"
                    @attributes="@context.Attrs">
        </MTextField>
    </ActivatorContent>
  </PDateDigitalClockPicker>
  
  <!-- now -->
  <PDateDigitalClockPicker @bind-Value="_date"
                           TimeFormat="TimeFormat.Hr24"
                           ViewType="_pickerViewType">
    @* Uncomment the following code if you want to customize the build-in MTextField component *@
    @* <PDefaultDateTimePickerActivator Filled Label="Pick a date time" Format="yyyy-MM-dd HH:mm:ss"/> *@
  </PDateDigitalClockPicker>

• Form: splitting DataAnnotations and FluentValidation, auto label generating and built-in complex type validation #2073

  <!-- auto label generating -->
  <MForm Model="_model"
         AutoLabel>
      <MTextField @bind-Value="_model.Name" Filled>
      </MTextField>
      <MButton Type="submit" Block Color="primary">Submit</MButton>
      @* <Masa.Blazor.Components.Form.AutoLabelOptions AttributeType="@typeof(DisplayAttribute)"/> *@
  </MForm>
  
  @code {
      class Model
      {
          [Display(Name = "Username")]
          [Required]
          public string Name { get; set; }
      }
  
      private Model _model = new();
  }

• Form: add the ValidateOn parameter to support setting the validation timing #2080
• PageStack:
  • add PageClosed event to PageStackNavController [#2061](#2061
  • add support for going back to specific page #2094
  • add support for going back specific page and then replace with new uri #2095
  • add support for going back with specific delta and then replace with new uri #2096
• DataFilter: Add OnReset and ExpandFirst parameters #203
• Form: add the ValidateOn parameter to support setting the validation timing #2080
• PopupService: add support for clearing all opened popups #2098
• Slider: add support for customizing the size of track #2079

🐛 Bug fixes

• Button: the click event conflicts with the click event of menu activator #2106
• Button: button hover state on mobile after press #2063
• DataTable: filter in header doesn't work #2104
• Checkbox/Switch: refactor the ripple scheme to solve the issue of focus/blur not working #2077 #2088 #2093
• Checkbox/Switch: display the focus state only when focused by keyboard #2086
• DatePicker: Incorrect year value when Locale="fa-IR" #2099
• DatePicker: cannot select only the year #2070
• InteractivePopup: Use the parent class's dispose method #2057
• NavigationDrawer: MobileBreakpoint parameter is not functioning as expected #2071
• PageStack: continuous clicking on a tag causes multiple entries in the stack #2058
• PageStack: unexpected scrollbar my appear in the stack page on iOS #2059
• Popup: missing the specific class name for popup components #2055
• RangeSlider: the focus state still exists after click the slider #2081
• SimpleCheckbox: use ripple custom attribute instead of ripple element #2089
• Swiper: Initial index doesn't work #2102
• Swiper: 'super()' must be called in derived constructor before accessing |this| or returning non-object #2105

♻️ Refactors

• Input: active color no longer distinguishes themes, defaults to primary #2087
• Breakpoint: differentiate the window size, breakpoint and mobile change events #2068

📝 Documentation

• DataTable: the css 'editable-cell' was set on the wrong element #2065
• TextField: fix the CustomColors demo #2090
• PageStack: improve the api doc #2107

Full Changelog: 1.6.8...1.7.0-rc.1