feat(FlipClock): add ShowMonth parameter (#6222)

* feat: 增加 ShowMonth 参数

* doc: 增加示例

* test: 增加单元测试

* refactor: 更新变量名称

Author: ArgoZhang

src/BootstrapBlazor.Server/Components/Samples/FlipClocks.razor

@@ -9,6 +9,10 @@
     <FlipClock></FlipClock>
 </DemoBlock>
 
+<DemoBlock Title="@Localizer["ShowMonthText"]" Introduction="@Localizer["ShowMonthIntro"]" Name="ShowDay">
+    <FlipClock ShowMonth="true" ShowDay="true"></FlipClock>
+</DemoBlock>
+
 <DemoBlock Title="@Localizer["ShowDayText"]" Introduction="@Localizer["ShowDayIntro"]" Name="ShowDay">
     <FlipClock ShowDay="true"></FlipClock>
 </DemoBlock>

src/BootstrapBlazor.Server/Components/Samples/FlipClocks.razor.cs

@@ -50,6 +50,14 @@ private Task OnCompletedAsync()
     /// <returns></returns>
     private AttributeItem[] GetAttributes() =>
     [
+        new()
+        {
+            Name = nameof(FlipClock.ShowMonth),
+            Description = Localizer["ShowMonth_Description"],
+            Type = "boolean",
+            ValueList = "true|false",
+            DefaultValue = "false"
+        },
         new()
         {
             Name = nameof(FlipClock.ShowDay),

src/BootstrapBlazor.Server/Locales/en-US.json

@@ -6802,6 +6802,8 @@
     "FlipClocksDescription": "Used for website timing or countdown",
     "BaseUsageText": "Basic usage",
     "BaseUsageIntro": "Synchronize display of current time",
+    "ShowMonthText": "Show Month",
+    "ShowMonthIntro": "Display month information by setting <code>ShowMonth=\"true\"</code>",
     "ShowDayText": "Show Day",
     "ShowDayIntro": "Display day information by setting <code>ShowDay=\"true\"</code>",
     "ShowMinuteText": "not display hours and minutes",

src/BootstrapBlazor.Server/Locales/zh-CN.json

@@ -6804,6 +6804,8 @@
     "BaseUsageIntro": "同步显示当前时间",
     "ShowDayText": "显示日",
     "ShowDayIntro": "通过设置 <code>ShowDay=\"true\"</code> 显示日信息",
+    "ShowMonthText": "显示月",
+    "ShowMonthIntro": "通过设置 <code>ShowMonth=\"true\"</code> 显示月信息",
     "ShowMinuteText": "不显示时、分",
     "ShowMinuteIntro": "通过设置 <code>ShowHour=\"false\"</code> <code>ShowMinute=\"false\"</code> 不显示小时、分钟信息",
     "ShowSecondText": "不显示秒",

src/BootstrapBlazor/Components/FlipClock/FlipClock.razor

@@ -3,6 +3,14 @@
 @attribute [BootstrapModuleAutoLoader(JSObjectReference = true)]
 
 <div @attributes="@AdditionalAttributes" class="@ClassString" style="@StyleString" id="@Id">
+    @if (ShowMonth)
+    {
+        <div class="bb-flip-clock-list month">
+            @RenderItem(3)
+            @RenderItem(10)
+        </div>
+    }
+
     @if (ShowDay)
     {
         <div class="bb-flip-clock-list day">

src/BootstrapBlazor/Components/FlipClock/FlipClock.razor.cs

@@ -11,6 +11,12 @@ namespace BootstrapBlazor.Components;
 /// </summary>
 public partial class FlipClock
 {
+    /// <summary>
+    /// 获得/设置 是否显示 Month 默认 false
+    /// </summary>
+    [Parameter]
+    public bool ShowMonth { get; set; }
+
     /// <summary>
     /// 获得/设置 是否显示 Day 默认 false
     /// </summary>

src/BootstrapBlazor/Components/FlipClock/FlipClock.razor.js

@@ -14,6 +14,7 @@ export function init(id, options) {
         return;
     }
 
+    const listMonth = el.querySelector('.bb-flip-clock-list.month');
     const listDay = el.querySelector('.bb-flip-clock-list.day');
     const listHour = el.querySelector('.bb-flip-clock-list.hour');
     const listMinute = el.querySelector('.bb-flip-clock-list.minute');
@@ -37,6 +38,7 @@ export function init(id, options) {
         else {
             now = new Date();
             return {
+                months: now.getMonth() + 1,
                 days: now.getDate(),
                 hours: now.getHours(),
                 minutes: now.getMinutes(),
@@ -48,15 +50,16 @@ export function init(id, options) {
         const minutes = Math.floor(totalMilliseconds / (1000 * 60)) % 60;
         const hours = Math.floor(totalMilliseconds / (1000 * 60 * 60)) % 24;
         const days = Math.floor(totalMilliseconds / (1000 * 60 * 60 * 24));
-        return { days, hours, minutes, seconds };
+        return { months, days, hours, minutes, seconds };
     }
 
+    let lastMonth;
     let lastDay;
     let lastHour;
     let lastMinute;
     let lastSecond;
     const go = () => {
-        const { days, hours, minutes, seconds } = getDate();
+        const { months, days, hours, minutes, seconds } = getDate();
 
         if (lastSecond !== seconds) {
             lastSecond = seconds;
@@ -74,7 +77,11 @@ export function init(id, options) {
             lastDay = days;
             setTime(listDay, days, countDown);
         }
-        return { days, hours, minutes, seconds }
+        if (lastMonth !== months) {
+            lastDay = days;
+            setTime(listMonth, months, countDown);
+        }
+        return { months, days, hours, minutes, seconds }
     }
 
     let start = void 0

test/UnitTest/Components/FlipClockTest.cs

@@ -59,6 +59,19 @@ public void ShowDay_Ok()
         cut.Contains("bb-flip-clock-list day");
     }
 
+    [Fact]
+    public void ShowMonth_Ok()
+    {
+        var cut = Context.RenderComponent<FlipClock>();
+        cut.DoesNotContain("bb-flip-clock-list month");
+
+        cut.SetParametersAndRender(pb =>
+        {
+            pb.Add(a => a.ShowMonth, true);
+        });
+        cut.Contains("bb-flip-clock-list month");
+    }
+
     [Fact]
     public async Task ViewMode_Ok()
     {