feat(FlipClock): add ShowYear parameter

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

@@ -9,7 +9,12 @@
     <FlipClock></FlipClock>
 </DemoBlock>
 
-<DemoBlock Title="@Localizer["ShowMonthText"]" Introduction="@Localizer["ShowMonthIntro"]" Name="ShowDay">
+
+<DemoBlock Title="@Localizer["ShowYearText"]" Introduction="@Localizer["ShowYearIntro"]" Name="ShowYear">
+    <FlipClock ShowYear="true" ShowMonth="true" ShowDay="true"></FlipClock>
+</DemoBlock>
+
+<DemoBlock Title="@Localizer["ShowMonthText"]" Introduction="@Localizer["ShowMonthIntro"]" Name="ShowMonth">
     <FlipClock ShowMonth="true" 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.ShowYear),
+            Description = Localizer["ShowYear_Description"],
+            Type = "boolean",
+            ValueList = "true|false",
+            DefaultValue = "false"
+        },
         new()
         {
             Name = nameof(FlipClock.ShowMonth),

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

@@ -6804,6 +6804,8 @@
     "BaseUsageIntro": "Synchronize display of current time",
     "ShowMonthText": "Show Month",
     "ShowMonthIntro": "Display month information by setting <code>ShowMonth=\"true\"</code>",
+    "ShowYearText": "Show Year",
+    "ShowYearIntro": "Display year information by setting <code>ShowYear=\"true\"</code>",
     "ShowDayText": "Show Day",
     "ShowDayIntro": "Display day information by setting <code>ShowDay=\"true\"</code>",
     "ShowMinuteText": "not display hours and minutes",
@@ -6826,6 +6828,8 @@
     "ShowDay_Description": "Show day",
     "ShowHour_Description": "Show hour",
     "ShowMinute_Description": "Show minute",
+    "ShowMonth_Description": "Show month",
+    "ShowYear_Description": "Show year",
     "ViewMode_Description": "View mode",
     "StartValue_Description": "Start time",
     "OnCompletedAsync_Description": "Callback when timer completed",

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

@@ -6806,6 +6806,8 @@
     "ShowDayIntro": "通过设置 <code>ShowDay=\"true\"</code> 显示日信息",
     "ShowMonthText": "显示月",
     "ShowMonthIntro": "通过设置 <code>ShowMonth=\"true\"</code> 显示月信息",
+    "ShowYearText": "显示年",
+    "ShowYearIntro": "通过设置 <code>ShowYear=\"true\"</code> 显示年信息",
     "ShowMinuteText": "不显示时、分",
     "ShowMinuteIntro": "通过设置 <code>ShowHour=\"false\"</code> <code>ShowMinute=\"false\"</code> 不显示小时、分钟信息",
     "ShowSecondText": "不显示秒",
@@ -6826,6 +6828,8 @@
     "ShowDay_Description": "是否显示日",
     "ShowHour_Description": "是否显示小时",
     "ShowMinute_Description": "是否显示分钟",
+    "ShowMonth_Description": "是否显示月",
+    "ShowYear_Description": "是否显示年",
     "ViewMode_Description": "显示模式",
     "StartValue_Description": "开始时间",
     "OnCompletedAsync_Description": "计时结束回调方法",

src/BootstrapBlazor/Components/FlipClock/FlipClock.razor

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

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

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

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

@@ -14,6 +14,7 @@ export function init(id, options) {
         return;
     }
 
+    const listYear = el.querySelector('.bb-flip-clock-list.year');
     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');
@@ -38,6 +39,7 @@ export function init(id, options) {
         else {
             now = new Date();
             return {
+                years: now.getFullYear(),
                 months: now.getMonth() + 1,
                 days: now.getDate(),
                 hours: now.getHours(),
@@ -50,16 +52,19 @@ 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 { months, days, hours, minutes, seconds };
+        const months = new Date().getMonth() + 1;
+        const years = new Date().getFullYear();
+        return { years, months, days, hours, minutes, seconds };
     }
 
+    let lastYear;
     let lastMonth;
     let lastDay;
     let lastHour;
     let lastMinute;
     let lastSecond;
     const go = () => {
-        const { months, days, hours, minutes, seconds } = getDate();
+        const { years, months, days, hours, minutes, seconds } = getDate();
 
         if (lastSecond !== seconds) {
             lastSecond = seconds;
@@ -78,10 +83,14 @@ export function init(id, options) {
             setTime(listDay, days, countDown);
         }
         if (lastMonth !== months) {
-            lastDay = days;
+            lastMonth = months;
             setTime(listMonth, months, countDown);
         }
-        return { months, days, hours, minutes, seconds }
+        if (lastYear !== years) {
+            lastYear = years;
+            setYear(listYear, years, countDown);
+        }
+        return { years, months, days, hours, minutes, seconds }
     }
 
     let start = void 0
@@ -115,6 +124,18 @@ export function dispose(id) {
     }
 }
 
+const setYear = (list, year, countDown) => {
+    if (list) {
+        list.classList.remove('flip');
+        for (var index = 0; index < 4; index++) {
+            const flip = list.children[index];
+            const flipIndex = Math.floor(year / Math.pow(10, 3 - index)) % 10;
+            setFlip(flip, flipIndex, countDown);
+        }
+        list.classList.add('flip');
+    }
+}
+
 const setTime = (list, time, countDown) => {
     if (list) {
         const leftIndex = Math.floor(time / 10);

test/UnitTest/Components/FlipClockTest.cs

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