refactor: rename toyearLabel, update docs, fix stylings, minor cleanup

Signed-off-by: Rong Sen Ng (motss) <wes.ngrongsen@gmail.com>

.github/CODEOWNERS

@@ -0,0 +1 @@
+* @motss

docs/app-date-picker.md

@@ -9,12 +9,10 @@
 | Property | Type | Default | Description |
 | --- | --- | --- | --- |
 | `chooseMonthLabel` | [String] | `Choose month` | Text label that is used in the tooltip when mouse hovering the dropdown icon button next to the current month and date in the `yearGrid` view. |
-| `chooseMonthLabel` | [String] | `Choose month` | Text label that is used in the tooltip when mouse hovering the dropdown icon button next to the current month and date in the `yearGrid` view. |
 | `chooseYearLabel` | [String] | `Choose year` | Text label that is used in the tooltip when mouse hovering the dropdown icon button next to the current month and date in the `calendar` view. |
 | `disabledDates` | [String] | | Comma separated string consisting of all disabled dates. It prefers the [ISO 8601 date and time format], e.g. `2020-02-02,2020-12-12`, `2020-02-02T00:00:00.000Z,2020-12-12T00:00:00.000Z`. |
 | `disabledDays` | [String] | | Comma separated string consisting of all disabled days. It accepts any values in between `0` and `6` (inclusive), e.g. `0,2,4` |
 | `firstDayOfWeek` | [Number] | `0` | First day of the week in a calendar. It accepts any values in between `0` and `6` (inclusive). |
-| `landscape` | [Boolean] | `false` | When it is in `landscape` mode, the picker is rendered with a double sided layout where the current month and year is on the left and the calendar is on the right. |
 | `locale` | [String] | `<system_default_locale>` | [ISO 639] language code, e.g. `en-US`. |
 | `max` | [String] | | Maximum date that is used to construct the date range internally for all displayable dates in the calendar. When it is not set or set to `undefined`, it is set to `MAX_DATE` which is `2100-12-31`. It prefers the [ISO 8601 date and time format], e.g. `2020-02-02`, `2020-02-02T00:00:00.000Z`. |
 | `min` | [String] | | Minimum date that is used to construct the date range internally for all displayable dates in the calendar. When it is not set or set to `undefined`, it is set to `MIN_DATE` which is [1970-01-01]. It prefers the [ISO 8601 date and time format], e.g. `2020-02-02`, `2020-02-02T00:00:00.000Z`. |
@@ -25,14 +23,14 @@
 | `shortWeekLabel` | [String] | `Wk` | Text label that is used in displaying the header of the week numbers column when `showWeekNumber` is set to `true`. |
 | `showWeekNumber` | [Boolean] | `false` | When it is set to `true`, a column of week numbers with a short week label defined by the value of `shortWeekLabel` will be displayed on the very left side of the calendar. |
 | `startView` | [String] | `calendar` | It is used to render the initial view of the picker. It accepts either `calendar` or `yearGrid`. |
-| `todayDateLabel` | [String] | `Today date` | Text label used in the tooltip when mouse hovering today's date in the calendar. |
-| `todayYearLabel` | [String] | `Today year` | Text label used in the tooltip when mouse hovering today's year in the year grid. |
+| `todayLabel` | [String] | `Today` | Text label used in the tooltip when mouse hovering today's date in the calendar. |
+| `toyearLabel` | [String] | `Toyear` | Text label used in the tooltip when mouse hovering today's year in the year grid. |
 | `value` | [String] | `<today_date>` | Selected date in the format of `yyyy-MM-dd`, e.g. `2020-02-02`. It can also be used as an input to select a date in the calendar with a string date that is in the [ISO 8601 date and time format], e.g. `2020-02-02T00:00:00.000Z`. |
 | `weekLabel` | [String] | `Week` | Text label used in the tooltip when mouse hovering the header of the week numbers column defined by the value of `shortWeekLabel` in the calendar with `showWeekNumber` being set to true. |
 | `weekNumberTemplate` | [String] | `Week %s` | Text label used in the tooltip when mouse hovering a week number in the calendar with `showWeekNumber` being set to true, e.g. `Week 7` when mouse hovering week number `7`. |
 | `weekNumberType` | [String] | `first-4-day-week` | It is used to configure how week number is calculated. The accepted values are `first-4-day-week`, `first-day-of-year`, and `first-full-week`. |
-| `valueAsDate` | [Date] | `<today_date>` | Selected date represented by the JavaScript [Date] object, e.g. `new Date('2020-02-02')`. |
-| `valueAsNumber` | [Number] | `<today_date>` | Selected date in milliseconds since the [ECMAScript epoch], e.g. `1580601600000`. |
+| `valueAsDate` | `Readonly<`[Date]`>` | `<today_date>` | Read-only selected date represented by the JavaScript [Date] object, e.g. `new Date('2020-02-02')`. |
+| `valueAsNumber` | `Readonly<`[Number]`>` | `<today_date>` | Read-only elected date in milliseconds since the [ECMAScript epoch], e.g. `1580601600000`. |
 
 
 
@@ -117,6 +115,7 @@ via the read-only `detail` property.
 | `--app-on-surface` | `#000` | Surface text color. |
 | `--app-on-today` | `#000` | Today text color. |
 | `--app-on-weekday` | `#8c8c8c` | Weekday text color. |
+| `--app-on-week-number` | `#8c8c8c` | Week number text color. |
 | `--app-primary` | `#6200ee` | Primary background color. |
 | `--app-selected-focus` | `#000` | Border color for all focus state when selected. |
 | `--app-selected-hover` | `#6200ee` | Border color for all hover state when selected. |
@@ -142,17 +141,19 @@ via the read-only `detail` property.
 | Part | Description |
 | --- | --- |
 | `body` | Picker body, might contain `calendar` or `year-grid`. |
-| `calendar-day` | Calendar day. |
-| `calendar` | Calendar. |
-| `caption` | Calendar caption. |
-| `header` | Picker header. |
-| `table` | Calendar table. |
-| `week-number` | Calendar week number. |
-| `weekday-value` | Calendar weekday. |
-| `weekday` | Calendar weekday which contains `weekday-value`. |
-| `weekdays` | Calendar weekdays. |
-| `year-grid` | Year grid. |
-| `year` | Year grid button. |
+| `calendar-day` | Calendar day |
+| `calendar` | Calendar |
+| `caption` | Calendar caption |
+| `header` | Picker header |
+| `table` | Calendar table |
+| `today` | Today |
+| `toyear` | Toyear |
+| `week-number` | Calendar week number |
+| `weekday-value` | Calendar weekday |
+| `weekday` | Calendar weekday which contains `weekday-value` |
+| `weekdays` | Calendar weekdays |
+| `year-grid` | Year grid |
+| `year` | Year grid button |
 
 
 

index.html

@@ -101,7 +101,7 @@
         --mdc-theme-surface: var(--surface);
 
         /** Override app CSS Variables */
-        --app-focus: var(--primary);
+        --app-focus: var(--inverse-primary);
         --app-hover : var(--primary);
         --app-on-disabled: var(--a);
         --app-on-focus: var(--primary);
@@ -110,6 +110,7 @@
         --app-on-surface: var(--on-surface);
         --app-on-today: var(--white);
         --app-on-weekday: var(--a);
+        --app-on-week-number: var(--a);
         --app-primary: var(--primary);
         --app-selected-focus: var(--inverse-primary);
         --app-selected-hover: var(--primary);

package.json

@@ -101,7 +101,7 @@
     "lint:build": "sh $(npm root)/@reallyland/tools/lint-build.sh -c $(npm root)/@reallyland/tools/browser/lit/.build.eslintrc.json",
     "pre-commit": "sh $(npm root)/@reallyland/tools/pre-commit.sh",
     "prepublishOnly": "npm run lint:build && npm run build",
-    "serve": "npm x -y @web/dev-server@latest -- wds --node-resolve -dw -p 3000 -a index.html",
+    "serve": "npm x -y @web/dev-server@latest -- wds --node-resolve -dw -p 3030 -a index.html",
     "test": "wtr --config wtr.config.mjs --update-snapshots",
     "test:helpers": "TEST_HELPERS=true npm run test",
     "version": "sh $(npm root)/@reallyland/tools/generate-changelogs.sh && git add *CHANGELOG.md",

src/__tests__/date-picker-dialog/app-date-picker-dialog.test.ts

@@ -45,7 +45,6 @@ describe(appDatePickerDialogName, () => {
     disabledDates: '2020-02-02',
     disabledDays: '2',
     firstDayOfWeek: 2,
-    landscape: false,
     locale: 'en-SG',
     max: '2200-12-31',
     min: '1970-12-31',
@@ -56,8 +55,8 @@ describe(appDatePickerDialogName, () => {
     shortWeekLabel: '週',
     showWeekNumber: true,
     startView: 'yearGrid',
-    todayDateLabel: '今日',
-    todayYearLabel: '今年',
+    todayLabel: '今日',
+    toyearLabel: '今年',
     value: '2020-02-02',
     weekLabel: '週目',
     weekNumberTemplate: '%s週目',

src/__tests__/month-calendar/app-month-calendar.test.ts

@@ -13,7 +13,7 @@ import type { confirmKeySet, navigationKeySetGrid} from '../../constants';
 import { labelShortWeek} from '../../constants';
 import { weekNumberTemplate } from '../../constants';
 import { labelWeek } from '../../constants';
-import { labelSelectedDate, labelTodayDate } from '../../constants';
+import { labelSelectedDate, labelToday } from '../../constants';
 import { toDateString } from '../../helpers/to-date-string';
 import { toFormatters } from '../../helpers/to-formatters';
 import type { AppMonthCalendar } from '../../month-calendar/app-month-calendar';
@@ -62,7 +62,7 @@ describe(appMonthCalendarName, () => {
     showCaption: false,
     showWeekNumber: false,
     todayDate: calendarInit.date,
-    todayDateLabel: labelTodayDate,
+    todayLabel: labelToday,
     weekdays: getWeekdays(weekdaysInit),
   };
   const elementSelectors = {
@@ -452,7 +452,7 @@ describe(appMonthCalendarName, () => {
   const casesSelectedDateLabelAndTodayDateLabel: CaseSelectedDateLabelAndTodayDateLabel[] = [
     [undefined, undefined, undefined, undefined],
     ['', '', '', ''],
-    [labelSelectedDate, labelTodayDate, labelSelectedDate, labelTodayDate],
+    [labelSelectedDate, labelToday, labelSelectedDate, labelToday],
   ];
   casesSelectedDateLabelAndTodayDateLabel.forEach((a) => {
     const [
@@ -473,7 +473,7 @@ describe(appMonthCalendarName, () => {
           ...data,
           date,
           selectedDateLabel: testSelectedDateLabel as string,
-          todayDateLabel: testTodayDateLabel as string,
+          todayLabel: testTodayDateLabel as string,
         };
 
         const el = await fixture<AppMonthCalendar>(

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

@@ -4,7 +4,7 @@ import { expect, fixture, html } from '@open-wc/testing';
 import { sendKeys } from '@web/test-runner-commands';
 
 import type { confirmKeySet} from '../../constants';
-import { labelSelectedYear, labelTodayYear } from '../../constants';
+import { labelSelectedYear, labelToyear } from '../../constants';
 import { toFormatters } from '../../helpers/to-formatters';
 import { toResolvedDate } from '../../helpers/to-resolved-date';
 import type { CustomEventDetail, InferredFromSet } from '../../typings';
@@ -20,7 +20,7 @@ describe(appYearGridName, () => {
     max: new Date('2021-03-03'),
     min: new Date('2019-01-01'),
     selectedYearLabel: labelSelectedYear,
-    todayYearLabel: labelTodayYear,
+    toyearLabel: labelToyear,
   };
   const elementSelectors = {
     selectedYear: '.year-grid-button[aria-selected="true"]',
@@ -222,7 +222,7 @@ describe(appYearGridName, () => {
   const casesSelectedYearLabelAndTodayYearLabel: CaseSelectedYearLabelAndTodayYearLabel[] = [
     [undefined, undefined, undefined, undefined],
     ['', '', '', ''],
-    [labelSelectedYear, labelTodayYear, labelSelectedYear, labelTodayYear],
+    [labelSelectedYear, labelToyear, labelSelectedYear, labelToyear],
   ];
   casesSelectedYearLabelAndTodayYearLabel.forEach(a => {
     const [
@@ -246,7 +246,7 @@ describe(appYearGridName, () => {
           min,
           date: min,
           selectedYearLabel: testSelectedYearLabel as string,
-          todayYearLabel: testTodayYearLabel as string,
+          toyearLabel: testTodayYearLabel as string,
         };
 
         const el = await fixture<AppYearGrid>(html`<app-year-grid .data=${testData}></app-year-grid>`);

src/constants.ts

@@ -10,8 +10,8 @@ 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 labelToday = 'Today' as const;
+export const labelToyear = 'Toyear' as const;
 export const labelWeek = 'Week' as const;
 export const MAX_DATE = toResolvedDate('2100-12-31');
 export const navigationKeyListNext = [keyArrowDown, keyPageDown, keyEnd];

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

@@ -150,7 +150,6 @@ export class DatePickerDialog extends DatePickerMixin(DatePickerMinMaxMixin(Root
       disabledDates,
       disabledDays,
       firstDayOfWeek,
-      landscape,
       locale,
       max,
       min,
@@ -161,8 +160,8 @@ export class DatePickerDialog extends DatePickerMixin(DatePickerMinMaxMixin(Root
       shortWeekLabel,
       showWeekNumber,
       startView,
-      todayDateLabel,
-      todayYearLabel,
+      todayLabel,
+      toyearLabel,
       value,
       weekLabel,
       weekNumberTemplate,
@@ -175,7 +174,6 @@ export class DatePickerDialog extends DatePickerMixin(DatePickerMinMaxMixin(Root
       disabledDates,
       disabledDays,
       firstDayOfWeek,
-      landscape,
       locale,
       max,
       min,
@@ -188,8 +186,8 @@ export class DatePickerDialog extends DatePickerMixin(DatePickerMinMaxMixin(Root
       shortWeekLabel,
       showWeekNumber,
       startView,
-      todayDateLabel,
-      todayYearLabel,
+      todayLabel,
+      toyearLabel,
       value,
       weekLabel,
       weekNumberTemplate,

src/date-picker-dialog/stylings.ts

@@ -25,6 +25,8 @@ export const datePickerDialogBaseStyling = css`
 }
 
 .mdc-dialog .mdc-dialog__content {
+  align-self: center;
+
   background-color: inherit;
   padding: 0;
 }
@@ -43,6 +45,9 @@ app-date-picker {
 
 export const datePickerDialogStyling = css`
 .secondary-actions {
+  display: flex;
+  justify-content: flex-end;
+
   margin: 0;
 }
 .secondary-actions mwc-button + mwc-button {

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

@@ -236,7 +236,6 @@ export class DatePickerInput extends ElementMixin(DatePickerMixin(DatePickerMinM
       disabledDates,
       disabledDays,
       firstDayOfWeek,
-      landscape,
       locale,
       max,
       min,
@@ -247,8 +246,8 @@ export class DatePickerInput extends ElementMixin(DatePickerMixin(DatePickerMinM
       shortWeekLabel,
       showWeekNumber,
       startView,
-      todayDateLabel,
-      todayYearLabel,
+      todayLabel,
+      toyearLabel,
       value,
       weekLabel,
       weekNumberTemplate,
@@ -261,7 +260,6 @@ export class DatePickerInput extends ElementMixin(DatePickerMixin(DatePickerMinM
       disabledDates,
       disabledDays,
       firstDayOfWeek,
-      landscape,
       locale,
       max,
       min,
@@ -274,8 +272,8 @@ export class DatePickerInput extends ElementMixin(DatePickerMixin(DatePickerMinM
       shortWeekLabel,
       showWeekNumber,
       startView,
-      todayDateLabel,
-      todayYearLabel,
+      todayLabel,
+      toyearLabel,
       value,
       weekLabel,
       weekNumberTemplate,

src/date-picker/date-picker.ts

@@ -356,7 +356,7 @@ export class DatePicker extends DatePickerMixin(DatePickerMinMaxMixin(RootElemen
       selectedDateLabel,
       shortWeekLabel,
       showWeekNumber,
-      todayDateLabel,
+      todayLabel,
       weekLabel,
       weekNumberTemplate,
       weekNumberType,
@@ -414,7 +414,7 @@ export class DatePicker extends DatePickerMixin(DatePickerMinMaxMixin(RootElemen
         selectedDateLabel,
         showWeekNumber,
         todayDate: this.#today,
-        todayDateLabel,
+        todayLabel,
         weekdays,
       }}
       @date-updated=${this.#updateSelectedDate}
@@ -449,7 +449,7 @@ export class DatePicker extends DatePickerMixin(DatePickerMinMaxMixin(RootElemen
       _min,
       _selectedDate,
       selectedYearLabel,
-      todayYearLabel,
+      toyearLabel,
     } = this;
 
     return html`
@@ -461,7 +461,7 @@ export class DatePicker extends DatePickerMixin(DatePickerMinMaxMixin(RootElemen
         max: _max,
         min: _min,
         selectedYearLabel,
-        todayYearLabel,
+        toyearLabel,
       }}
       @year-updated=${this.#updateYear}
       exportparts=year-grid,year,toyear

src/helpers/slot-date-picker.ts

@@ -11,7 +11,6 @@ export function slotDatePicker({
   disabledDates,
   disabledDays,
   firstDayOfWeek,
-  landscape,
   locale,
   max,
   min,
@@ -24,8 +23,8 @@ export function slotDatePicker({
   shortWeekLabel,
   showWeekNumber,
   startView,
-  todayDateLabel,
-  todayYearLabel,
+  todayLabel,
+  toyearLabel,
   value,
   weekLabel,
   weekNumberTemplate,
@@ -40,7 +39,6 @@ export function slotDatePicker({
     .disabledDates=${disabledDates}
     .disabledDays=${disabledDays}
     .firstDayOfWeek=${firstDayOfWeek}
-    .landscape=${landscape}
     .locale=${locale}
     .max=${max}
     .min=${min}
@@ -50,8 +48,8 @@ export function slotDatePicker({
     .selectedYearLabel=${selectedYearLabel}
     .shortWeekLabel=${shortWeekLabel}
     .startView=${startView}
-    .todayDateLabel=${todayDateLabel}
-    .todayYearLabel=${todayYearLabel}
+    .todayLabel=${todayLabel}
+    .toyearLabel=${toyearLabel}
     .value=${value}
     .weekLabel=${weekLabel}
     .weekNumberTemplate=${weekNumberTemplate}

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, labelShortWeek, labelTodayDate, labelTodayYear, labelWeek, weekNumberTemplate } from '../constants.js';
+import { DateTimeFormat, labelChooseMonth, labelChooseYear, labelNextMonth, labelPreviousMonth, labelSelectedDate, labelSelectedYear, labelShortWeek, labelToday, labelToyear, 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';
@@ -17,7 +17,6 @@ export const DatePickerMixin = <BaseConstructor extends LitConstructor>(
     @property() public disabledDays = '';
     @property() public disabledDates = '';
     @property({ type: Number, reflect: true }) public firstDayOfWeek = 0;
-    @property({ type: Boolean, reflect: true }) public landscape = false;
     @property() public locale: string = DateTimeFormat().resolvedOptions().locale;
     @property() public nextMonthLabel: string = labelNextMonth;
     @property() public previousMonthLabel: string = labelPreviousMonth;
@@ -26,8 +25,8 @@ export const DatePickerMixin = <BaseConstructor extends LitConstructor>(
     @property() public shortWeekLabel: string = labelShortWeek;
     @property({ type: Boolean, reflect: true }) public showWeekNumber = false;
     @property({ reflect: true, converter: { toAttribute: nullishAttributeConverter } }) public startView: StartView = 'calendar';
-    @property() public todayDateLabel: string = labelTodayDate;
-    @property() public todayYearLabel: string = labelTodayYear;
+    @property() public todayLabel: string = labelToday;
+    @property() public toyearLabel: string = labelToyear;
 
     /**
      * NOTE: `null` or `''` will always reset to the old valid date. In order to reset to