refactor: support shortWeekLabel, weekLabel, weekNumberTemplate

package.json

@@ -121,7 +121,7 @@
     "@material/mwc-menu": "^0.25.3",
     "@material/mwc-textfield": "^0.25.3",
     "lit": "^2.1.3",
-    "nodemod": "^3.0.5",
+    "nodemod": "^3.0.6",
     "tslib": "^2.3.1"
   },
   "devDependencies": {

src/__tests__/year-grid/app-year-grid.test.ts

@@ -192,7 +192,7 @@ describe(appYearGridName, () => {
   const testTitleCases: TestTitle[] = [
     [undefined, undefined, undefined, undefined],
     ['', '', '', ''],
-    ['選擇年份', '選擇月份', '選擇年份', '選擇月份'],
+    [labelSelectedYear, labelTodayYear, labelSelectedYear, labelTodayYear],
   ];
   testTitleCases.forEach(a => {
     const [

src/constants.ts

@@ -9,12 +9,15 @@ export const labelNextMonth = 'Next month' as const;
 export const labelPreviousMonth = 'Previous month' as const;
 export const labelSelectedDate = 'Selected date' as const;
 export const labelSelectedYear = 'Selected year' as const;
+export const labelShortWeek = 'Wk' as const;
 export const labelTodayDate = 'Today date' as const;
 export const labelTodayYear = 'Today year' as const;
+export const labelWeek = 'Week' as const;
 export const MAX_DATE = toResolvedDate('2100-12-31');
 export const navigationKeyListNext = [keyArrowDown, keyPageDown, keyEnd];
 export const navigationKeyListPrevious = [keyArrowUp, keyPageUp, keyHome];
 export const navigationKeySetDayNext = new Set([...navigationKeyListNext, keyArrowRight]);
 export const navigationKeySetDayPrevious = new Set([...navigationKeyListPrevious, keyArrowLeft]);
 export const navigationKeySetGrid = new Set([...navigationKeySetDayNext, ...navigationKeySetDayPrevious]);
 export const startViews = ['calendar', 'yearGrid'] as const;
+export const weekNumberTemplate = 'Week %s' as const;

src/date-picker-dialog/date-picker-dialog.ts

@@ -140,12 +140,14 @@ export class DatePickerDialog extends DatePickerMixin(DatePickerMinMaxMixin(Root
       previousMonthLabel,
       selectedDateLabel,
       selectedYearLabel,
+      shortWeekLabel,
       showWeekNumber,
       startView,
       todayDateLabel,
       todayYearLabel,
       value,
       weekLabel,
+      weekNumberTemplate,
       weekNumberType,
     } = this;
 
@@ -166,12 +168,14 @@ export class DatePickerDialog extends DatePickerMixin(DatePickerMinMaxMixin(Root
       previousMonthLabel,
       selectedDateLabel,
       selectedYearLabel,
+      shortWeekLabel,
       showWeekNumber,
       startView,
       todayDateLabel,
       todayYearLabel,
       value,
       weekLabel,
+      weekNumberTemplate,
       weekNumberType,
     });
   }

src/date-picker-input/date-picker-input.ts

@@ -228,12 +228,14 @@ export class DatePickerInput extends ElementMixin(DatePickerMixin(DatePickerMinM
       previousMonthLabel,
       selectedDateLabel,
       selectedYearLabel,
+      shortWeekLabel,
       showWeekNumber,
       startView,
       todayDateLabel,
       todayYearLabel,
       value,
       weekLabel,
+      weekNumberTemplate,
       weekNumberType,
     } = this;
 
@@ -254,12 +256,14 @@ export class DatePickerInput extends ElementMixin(DatePickerMixin(DatePickerMinM
       previousMonthLabel,
       selectedDateLabel,
       selectedYearLabel,
+      shortWeekLabel,
       showWeekNumber,
       startView,
       todayDateLabel,
       todayYearLabel,
       value,
       weekLabel,
+      weekNumberTemplate,
       weekNumberType,
     });
   }

src/date-picker/date-picker.ts

@@ -338,9 +338,11 @@ export class DatePicker extends DatePickerMixin(DatePickerMinMaxMixin(RootElemen
       firstDayOfWeek,
       locale,
       selectedDateLabel,
+      shortWeekLabel,
       showWeekNumber,
       todayDateLabel,
       weekLabel,
+      weekNumberTemplate,
       weekNumberType,
     } = this;
     const currentDate = _currentDate;
@@ -356,9 +358,10 @@ export class DatePicker extends DatePickerMixin(DatePickerMinMaxMixin(RootElemen
     } = this.#formatters;
 
     const weekdays = getWeekdays({
+      firstDayOfWeek,
       longWeekdayFormat,
       narrowWeekdayFormat,
-      firstDayOfWeek,
+      shortWeekLabel,
       showWeekNumber,
       weekLabel,
     });
@@ -377,6 +380,7 @@ export class DatePicker extends DatePickerMixin(DatePickerMinMaxMixin(RootElemen
       max,
       min,
       showWeekNumber,
+      weekNumberTemplate,
       weekNumberType,
     });
 

src/mixins/date-picker-mixin.ts

@@ -1,7 +1,7 @@
 import { property } from 'lit/decorators.js';
 import type { WeekNumberType } from 'nodemod/dist/calendar/typings.js';
 
-import { DateTimeFormat, labelChooseMonth, labelChooseYear, labelNextMonth, labelPreviousMonth, labelSelectedDate, labelSelectedYear, labelTodayDate, labelTodayYear } from '../constants.js';
+import { DateTimeFormat, labelChooseMonth, labelChooseYear, labelNextMonth, labelPreviousMonth, labelSelectedDate, labelSelectedYear, labelShortWeek, labelTodayDate, labelTodayYear, labelWeek, weekNumberTemplate } from '../constants.js';
 import { nullishAttributeConverter } from '../helpers/nullish-attribute-converter.js';
 import { toDateString } from '../helpers/to-date-string.js';
 import { toResolvedDate } from '../helpers/to-resolved-date.js';
@@ -15,28 +15,18 @@ export const DatePickerMixin = <BaseConstructor extends LitConstructor>(
     @property() public chooseYearLabel = labelChooseYear;
     @property() public chooseMonthLabel = labelChooseMonth;
     @property() public disabledDays = '';
-
     @property() public disabledDates = '';
-
     @property({ type: Number, reflect: true }) public firstDayOfWeek = 0;
-
     @property({ type: Boolean }) public inline = false;
-
     @property({ type: Boolean, reflect: true }) public landscape = false;
-
     @property() public locale: string = DateTimeFormat().resolvedOptions().locale;
-
     @property() public nextMonthLabel = labelNextMonth;
-
     @property() public previousMonthLabel = labelPreviousMonth;
-
     @property() public selectedDateLabel = labelSelectedDate;
     @property() public selectedYearLabel = labelSelectedYear;
-
+    @property() public shortWeekLabel = labelShortWeek;
     @property({ type: Boolean, reflect: true }) public showWeekNumber = false;
-
     @property({ reflect: true, converter: { toAttribute: nullishAttributeConverter } }) public startView: StartView = 'calendar';
-
     @property() public todayDateLabel = labelTodayDate;
     @property() public todayYearLabel = labelTodayYear;
 
@@ -46,8 +36,8 @@ export const DatePickerMixin = <BaseConstructor extends LitConstructor>(
      */
     @property() public value = toDateString(toResolvedDate());
 
-    @property() public weekLabel = 'Wk';
-
+    @property() public weekLabel = labelWeek;
+    @property() public weekNumberTemplate = weekNumberTemplate;
     @property({ reflect: true, converter: { toAttribute: nullishAttributeConverter } }) public weekNumberType: WeekNumberType = 'first-4-day-week';
   }
 

src/mixins/typings.ts

@@ -20,12 +20,14 @@ export interface DatePickerMixinProperties {
   previousMonthLabel: string;
   selectedDateLabel: string;
   selectedYearLabel: string;
+  shortWeekLabel: string;
   showWeekNumber: boolean;
   startView: StartView;
   todayDateLabel: string;
   todayYearLabel: string;
   value?: string | null;
   weekLabel: string;
+  weekNumberTemplate: string;
   weekNumberType: WeekNumberType;
 }
 

src/month-calendar/month-calendar.ts

@@ -47,18 +47,18 @@ export class MonthCalendar extends RootElement implements MonthCalendarPropertie
 
     this.data = {
       calendar: [],
+      currentDate: todayDate,
       date: todayDate,
       disabledDatesSet: new Set(),
       disabledDaysSet: new Set(),
-      currentDate: todayDate,
       formatters: undefined,
       max: todayDate,
       min: todayDate,
+      selectedDateLabel: labelSelectedDate,
       showCaption: false,
       showWeekNumber: false,
       todayDate,
       todayDateLabel: labelTodayDate,
-      selectedDateLabel: labelSelectedDate,
       weekdays: [],
     };
   }
@@ -143,16 +143,17 @@ export class MonthCalendar extends RootElement implements MonthCalendarPropertie
         <thead>
           <tr class=weekdays part=weekdays role=row>${
             weekdays.map(
-              ({ label, value }) => html`
-              <th
-                aria-label=${label}
-                class=weekday
-                part=weekday
-                role=columnheader
-                title=${label}
-              >
-                <div class=weekday-value part=weekday-value>${value}</div>
-              </th>`
+              ({ label, value }) =>
+                html`
+                <th
+                  aria-label=${label}
+                  class=${`weekday${showWeekNumber ? ' week-number' : ''}`}
+                  part=weekday
+                  role=columnheader
+                  title=${label}
+                >
+                  <div class=weekday-value part=weekday-value>${value}</div>
+                </th>`
             )
           }</tr>
         </thead>
@@ -176,6 +177,7 @@ export class MonthCalendar extends RootElement implements MonthCalendarPropertie
                     title=${label}
                   >${value}</th>`;
                 }
+
                 /** Empty day */
                 if (!value || !fullDate) {
                   return html`<td class="calendar-day day--empty" aria-hidden="true" part=calendar-day></td>`;

src/month-calendar/typings.ts

@@ -1,10 +1,10 @@
 import type { Calendar, CalendarWeekday } from 'nodemod/dist/calendar/typings.js';
 
-import type { ChangedProperties, Formatters } from '../typings.js';
+import type { ChangedProperties, DatePickerProperties, Formatters } from '../typings.js';
 
 export type MonthCalendarChangedProperties = ChangedProperties<MonthCalendarProperties>;
 
-export interface MonthCalendarData {
+export interface MonthCalendarData extends PickDatePickerProperties {
   calendar: Calendar['calendar'];
   currentDate: Date;
   date: Date;
@@ -13,11 +13,8 @@ export interface MonthCalendarData {
   formatters?: Formatters;
   max: Date;
   min: Date;
-  selectedDateLabel?: string;
   showCaption?: boolean;
-  showWeekNumber?: boolean;
   todayDate: Date;
-  todayDateLabel?: string;
   weekdays: CalendarWeekday[];
 }
 
@@ -29,3 +26,10 @@ export interface MonthCalendarRenderCalendarDayInit extends HTMLElement {
   day: string;
   fullDate: Date;
 }
+
+type PickDatePickerProperties = Pick<
+  DatePickerProperties,
+  | 'selectedDateLabel'
+  | 'showWeekNumber'
+  | 'todayDateLabel'
+>;