From c50688a9165ed2b13510cfc23798895e5e789cb5 Mon Sep 17 00:00:00 2001
From: Jevin <69580637+Jevin0@users.noreply.github.com>
Date: Tue, 9 Jan 2024 15:22:37 +0800
Subject: [PATCH] fix(calendar-view): [calendar-view] week display error
 (#1241)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix(calendar-view): week display error #1158

* fix(calendar-view): [calendar-view] week display error - mobile

* test(calendar-view): [calendar-view] amend e2e ttest

---------

Co-authored-by: “Jevin” <jevin@mogul-tech.com>
---
 .../pc/app/calendar-view/calendar-disabled-day.spec.ts    | 2 +-
 packages/vue/src/calendar-view/src/mobile-first.vue       | 8 +++-----
 packages/vue/src/calendar-view/src/pc.vue                 | 6 +++---
 3 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/examples/sites/demos/pc/app/calendar-view/calendar-disabled-day.spec.ts b/examples/sites/demos/pc/app/calendar-view/calendar-disabled-day.spec.ts
index 096bfa5c1..257278460 100644
--- a/examples/sites/demos/pc/app/calendar-view/calendar-disabled-day.spec.ts
+++ b/examples/sites/demos/pc/app/calendar-view/calendar-disabled-day.spec.ts
@@ -3,7 +3,7 @@ import { test, expect } from '@playwright/test'
 test('日期禁用', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('calendar-view#calendar-disabled-day')
-  const day10 = page.getByText('10').nth(1)
+  const day10 = page.getByText('10').nth(2)
   const day14 = page.getByText('14').nth(1)
   const day15 = page.getByText('15').nth(1)
   await expect(day10).toHaveClass(/is-disabled/)
diff --git a/packages/vue/src/calendar-view/src/mobile-first.vue b/packages/vue/src/calendar-view/src/mobile-first.vue
index 8cb931d24..017e25a7a 100644
--- a/packages/vue/src/calendar-view/src/mobile-first.vue
+++ b/packages/vue/src/calendar-view/src/mobile-first.vue
@@ -50,7 +50,7 @@
         </div>
         <ul data-tag="tiny-calendar-view-monthlist" class="flex justify-around flex-1 h-full">
           <li data-tag="tiny-calendar-view-monthitem" v-for="day in state.weekDays" :key="day" class="leading-10">
-            <span class="text-sm text-color-text-primary">{{ t(`ui.calendarView.weekDays[${day}]`) }}</span>
+            <span class="text-sm text-color-text-primary">{{ t(`ui.calendarView.weekDays.${day}`) }}</span>
           </li>
         </ul>
         <div
@@ -172,7 +172,7 @@
               name="header"
               :slot-scope="{
                 date: date.value,
-                weekDay: t(`ui.calendarView.weekDays[${index}]`)
+                weekDay: t(`ui.calendarView.weekDays.${index}`)
               }"
             >
               <span
@@ -189,9 +189,7 @@
               <span
                 class="text-sm"
                 :class="[dateIsToday(date.value) ? 'text-color-brand' : 'text-color-text-placeholder']"
-                >{{
-                  dateIsToday(date.value) ? t('ui.datepicker.today') : t(`ui.calendarView.weekDays[${index}]`)
-                }}</span
+                >{{ dateIsToday(date.value) ? t('ui.datepicker.today') : t(`ui.calendarView.weekDays.${index}`) }}</span
               >
             </slot>
           </li>
diff --git a/packages/vue/src/calendar-view/src/pc.vue b/packages/vue/src/calendar-view/src/pc.vue
index e47f6963f..25c783d50 100644
--- a/packages/vue/src/calendar-view/src/pc.vue
+++ b/packages/vue/src/calendar-view/src/pc.vue
@@ -27,7 +27,7 @@
         </div>
         <ul class="header-main">
           <li v-for="day in state.weekDays" :key="day">
-            <span>{{ t(`ui.calendarView.weekDays[${day}]`) }}</span>
+            <span>{{ t(`ui.calendarView.weekDays.${day}`) }}</span>
           </li>
         </ul>
         <div class="header-right" @click="goNextMonth">
@@ -111,7 +111,7 @@
               name="header"
               :slot-scope="{
                 date: date.value,
-                weekDay: t(`ui.calendarView.weekDays[${index}]`)
+                weekDay: t(`ui.calendarView.weekDays.${index}`)
               }"
             >
               <span class="date" :class="dateIsToday(date.value) && 'is-today'">
@@ -123,7 +123,7 @@
                 ></span>
               </span>
               <span class="week-day" :class="dateIsToday(date.value) && 'is-today'">{{
-                dateIsToday(date.value) ? t('ui.datepicker.today') : t(`ui.calendarView.weekDays[${index}]`)
+                dateIsToday(date.value) ? t('ui.datepicker.today') : t(`ui.calendarView.weekDays.${index}`)
               }}</span>
             </slot>
           </li>