Feat/date picker panel header locale (#568)

* feat: year and month header will in locale order

* fix: picker header overflow and preview button font

* build: add missing build storybook styles

* feat: mod style inject method and mod reset body bg

* chore: remove title and fix build error

* style: add range-picker header overflow fix

* Create wicked-comics-return.md

* chore: mv monthBeforeYear to service and refactor

* feat: add header locale and mod style

* chore: fix unit test case

* feat: trigger show date use locale format default

* feat: mod style var and storybook preview

Author: yangxiaolang

.changeset/wicked-comics-return.md

@@ -0,0 +1,5 @@
+---
+"@alauda/ui": patch
+---
+
+Feat/date picker panel header locale

.storybook/global.scss

@@ -0,0 +1,2 @@
+@import './reset-browser';
+@import '../src/theme/style.scss';

.storybook/preview.ts

@@ -3,6 +3,8 @@ import { addons } from '@storybook/addons';
 import type { Preview } from '@storybook/angular';
 
 import docJson from '../documentation.json';
+// eslint-disable-next-line import/no-webpack-loader-syntax, import/no-unresolved
+import '!style-loader!css-loader!sass-loader!./global.scss';
 
 setCompodocJson(docJson);
 

.storybook/reset-browser.scss

@@ -0,0 +1,92 @@
+@import '../src/theme/var';
+@import '../src/theme/mixin';
+
+* {
+  &,
+  &:before,
+  &:after {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font: inherit;
+    box-sizing: border-box;
+    vertical-align: baseline;
+  }
+
+  &:focus {
+    outline: none;
+  }
+}
+
+em {
+  font-style: italic;
+}
+
+ol {
+  list-style: decimal;
+  margin-left: 16px;
+}
+
+ul {
+  list-style: none;
+}
+
+blockquote,
+q {
+  quotes: none;
+
+  &:before,
+  &:after {
+    content: '';
+    content: none;
+  }
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+body {
+  -webkit-font-smoothing: auto;
+  -moz-osx-font-smoothing: auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 100%;
+  min-height: 100%;
+  color: use-text-color(main);
+  background-color: use-rgb(n-10);
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',
+    Arial, 'Microsoft YaHei', sans-serif;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 1.43;
+}
+
+pre,
+code {
+  font-family: Menlo, Monaco, 'Courier New', monospace;
+  white-space: pre-wrap;
+  font-size: 14px;
+  line-height: 20px;
+  padding: 12px;
+  background: use-rgb(n-9);
+  border-radius: 2px;
+
+  &[ngCodeColorize] {
+    padding: 0 12px;
+  }
+}
+
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus,
+input:-webkit-autofill:active {
+  -webkit-text-fill-color: #{use-text-color(main)} !important;
+  box-shadow: 0 0 0 3000px #{use-rgb(main-bg)} inset !important;
+}
+
+[hidden] {
+  display: none !important;
+}

src/date-picker/calendar/header/component.ts

@@ -6,18 +6,16 @@ import {
   Input,
   Output,
   ViewEncapsulation,
+  computed,
+  signal,
 } from '@angular/core';
 import dayjs, { ConfigType, Dayjs } from 'dayjs';
 
 import { ButtonComponent } from '../../../button/button.component';
-import { I18nPipe } from '../../../i18n/i18n.pipe';
+import { I18nPipe, I18nService } from '../../../i18n';
 import { IconComponent } from '../../../icon/icon.component';
 import { buildBem } from '../../../internal/utils';
-import {
-  CalendarHeaderRange,
-  DateNavRange,
-  Side,
-} from '../../date-picker.type';
+import { DateNavRange, Side } from '../../date-picker.type';
 import { MONTH, YEAR } from '../constant';
 import { calcRangeValue } from '../util';
 
@@ -34,10 +32,28 @@ const bem = buildBem('aui-calendar-header');
 })
 export class CalendarHeaderComponent {
   @Input()
-  dateNavRange = DateNavRange.Month;
+  get dateNavRange() {
+    return this.$$dateNavRange();
+  }
+
+  set dateNavRange(val) {
+    if (!val || this.$$dateNavRange() === val) {
+      return;
+    }
+    this.$$dateNavRange.set(val);
+  }
 
   @Input()
-  anchor = dayjs();
+  get anchor() {
+    return this.$$anchor();
+  }
+
+  set anchor(val) {
+    if (!val || this.$$anchor() === val) {
+      return;
+    }
+    this.$$anchor.set(val);
+  }
 
   @Input()
   maxAvail?: ConfigType;
@@ -59,14 +75,35 @@ export class CalendarHeaderComponent {
   @Output()
   anchorChange = new EventEmitter<Dayjs>();
 
-  get headerRange(): CalendarHeaderRange {
-    return calcRangeValue(this.dateNavRange, this.anchor);
-  }
+  private readonly $$dateNavRange = signal(DateNavRange.Month);
+  private readonly $$anchor = signal(dayjs());
 
   bem = bem;
 
   DateNavRange = DateNavRange;
 
+  $monthBeforeYear = this.i18nService.$monthBeforeYear;
+
+  $headerRange = computed(() => {
+    const locale = this.i18nService.$locale();
+    const [start, end] = Object.values(
+      calcRangeValue(this.$$dateNavRange(), this.$$anchor()),
+    ).map(date => date.toDate());
+
+    return {
+      start: {
+        year: start.toLocaleDateString(locale, { year: 'numeric' }),
+        month: start.toLocaleDateString(locale, { month: 'short' }),
+      },
+      end: {
+        year: end?.toLocaleDateString(locale, { year: 'numeric' }),
+        month: end?.toLocaleDateString(locale, { month: 'short' }),
+      },
+    };
+  });
+
+  constructor(private readonly i18nService: I18nService) {}
+
   // maxAvail > current date ：right btn hide
   // minAvail > current date ：left btn hide
   shouldShowNav(type: DateNavRange, side: Side) {

src/date-picker/calendar/header/style.scss

@@ -2,6 +2,9 @@
 
 $block: aui-calendar-header;
 
+$aui-text-button-mini-width: use-var(inline-height-xs);
+$aui-text-button-mini-spacing: use-var(spacing-s);
+
 .#{$block} {
   &__container {
     height: 24px;
@@ -12,6 +15,9 @@ $block: aui-calendar-header;
 
   &__nav-content {
     flex: 1;
+    max-width: calc(
+      100% - $aui-text-button-mini-width * 4 - $aui-text-button-mini-spacing * 2
+    );
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
@@ -43,6 +49,10 @@ $block: aui-calendar-header;
         margin-left: 0;
       }
     }
+
+    .aui-button--text.header-range {
+      max-width: 100%;
+    }
   }
 }
 

src/date-picker/calendar/header/template.html

@@ -17,23 +17,13 @@
     *ngIf="dateNavRange === DateNavRange.Month"
     [class]="bem.element('nav-content')"
   >
-    <button
-      aui-button="text"
-      (click)="clickNav(DateNavRange.Year)"
-    >
-      {{ headerRange?.start?.year() }}{{ 'year_suffix' | auiI18n }}
-    </button>
-    <div class="separator">
-      <span *ngIf="!('year_suffix' | auiI18n) && !('month_suffix' | auiI18n)">
-        /
-      </span>
-    </div>
-    <button
-      aui-button="text"
-      (click)="clickNav(DateNavRange.Month)"
-    >
-      {{ headerRange?.start?.month() + 1 }}{{ 'month_suffix' | auiI18n }}
-    </button>
+    <ng-container
+      [ngTemplateOutlet]="$monthBeforeYear() ? monthTemplate : yearTemplate"
+    ></ng-container>
+    <div class="separator"></div>
+    <ng-container
+      [ngTemplateOutlet]="$monthBeforeYear() ? yearTemplate : monthTemplate"
+    ></ng-container>
   </span>
 
   <span
@@ -44,15 +34,15 @@
       aui-button="text"
       (click)="clickNav(DateNavRange.Year)"
     >
-      {{ headerRange?.start?.year() }}{{ 'year_suffix' | auiI18n }}
+      {{ $headerRange().start.year }}
     </button>
   </span>
 
   <span
     *ngIf="dateNavRange === DateNavRange.Decade"
     [class]="bem.element('nav-content')"
   >
-    {{ headerRange?.start.year() }} - {{ headerRange?.end?.year() }}
+    {{ $headerRange().start.year }} - {{ $headerRange().end.year }}
   </span>
 
   <div [class]="bem.element('nav-action')">
@@ -77,6 +67,8 @@
   <span class="action-bar">
     <button
       aui-button="text"
+      size="mini"
+      [square]="true"
       *ngIf="side === 'right'"
       [class.hidden]="
         !shouldShowNav(DateNavRange.Month, side) ||
@@ -88,6 +80,8 @@
     </button>
     <button
       aui-button="text"
+      size="mini"
+      [square]="true"
       (click)="navHead(DateNavRange.Year, side === 'left' ? -1 : 1)"
       [class.hidden]="!shouldShowNav(DateNavRange.Year, side)"
     >
@@ -97,6 +91,8 @@
     </button>
     <button
       aui-button="text"
+      size="mini"
+      [square]="true"
       *ngIf="side === 'left'"
       [class.hidden]="
         !shouldShowNav(DateNavRange.Month, side) ||
@@ -115,6 +111,8 @@
 >
   <button
     aui-button="text"
+    size="mini"
+    [square]="true"
     (click)="navHead(DateNavRange.Decade, side === 'left' ? -10 : 10)"
     [class.hidden]="!shouldShowNav(DateNavRange.Decade, side)"
   >
@@ -123,3 +121,22 @@
     ></aui-icon>
   </button>
 </ng-template>
+
+<ng-template #yearTemplate>
+  <button
+    aui-button="text"
+    class="header-range"
+    (click)="clickNav(DateNavRange.Year)"
+  >
+    {{ $headerRange().start.year }}
+  </button>
+</ng-template>
+<ng-template #monthTemplate>
+  <button
+    aui-button="text"
+    class="header-range"
+    (click)="clickNav(DateNavRange.Month)"
+  >
+    {{ $headerRange().start.month }}
+  </button>
+</ng-template>

src/date-picker/calendar/range-picker-panel/style.scss

@@ -41,6 +41,7 @@ $block: aui-date-range-picker-panel;
 
     aui-calendar-header {
       flex: 0 0 $range-picker-header-width;
+      max-width: 50%;
     }
   }