From 381bb46f84c9fccdabe01528e62f7d4763adabee Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E5=A4=A9=E4=BD=91?=
 <66231260+You-Hw-Y@users.noreply.github.com>
Date: Tue, 26 Dec 2023 01:24:12 -0800
Subject: [PATCH] docs(calendar): [calendar] optimize docs and demos (#1214)

* docs(calendar): [calendar] optimize docs and demos

* docs(calendar): [calendar] optimize docs and demos
---
 .../calendar/basic-usage-composition-api.vue  |  2 +-
 .../demos/pc/app/calendar/basic-usage.spec.ts |  9 ++----
 .../demos/pc/app/calendar/basic-usage.vue     |  2 +-
 .../calendar-mode-composition-api.vue         |  2 +-
 ...der-mode.spec.ts => calendar-mode.spec.ts} |  9 ++----
 .../demos/pc/app/calendar/calendar-mode.vue   |  2 +-
 ...ustom-calendar-toolbar-composition-api.vue | 11 ++-----
 .../calendar/custom-calendar-toolbar.spec.ts  | 13 ++++----
 .../app/calendar/custom-calendar-toolbar.vue  | 25 +++++-----------
 .../custom-day-cell-composition-api.vue       |  2 +-
 .../demos/pc/app/calendar/custom-day-cell.vue |  2 +-
 .../dynamic-add-schedule-composition-api.vue  |  2 +-
 .../pc/app/calendar/dynamic-add-schedule.vue  |  2 +-
 .../show-selected-date-composition-api.vue    |  2 +-
 .../pc/app/calendar/show-selected-date.vue    |  2 +-
 .../demos/pc/app/calendar/webdoc/calendar.js  | 30 ++++++++++++++-----
 packages/theme/src/calendar/index.less        | 30 +++++++++----------
 17 files changed, 68 insertions(+), 79 deletions(-)
 rename examples/sites/demos/pc/app/calendar/{calender-mode.spec.ts => calendar-mode.spec.ts} (88%)

diff --git a/examples/sites/demos/pc/app/calendar/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/calendar/basic-usage-composition-api.vue
index 4c4d2d5fc..3c3d8094f 100644
--- a/examples/sites/demos/pc/app/calendar/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/calendar/basic-usage-composition-api.vue
@@ -2,6 +2,6 @@
   <tiny-calendar></tiny-calendar>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { Calendar as TinyCalendar } from '@opentiny/vue'
 </script>
diff --git a/examples/sites/demos/pc/app/calendar/basic-usage.spec.ts b/examples/sites/demos/pc/app/calendar/basic-usage.spec.ts
index 5e68d9626..d1c8ba9c6 100644
--- a/examples/sites/demos/pc/app/calendar/basic-usage.spec.ts
+++ b/examples/sites/demos/pc/app/calendar/basic-usage.spec.ts
@@ -4,8 +4,8 @@ test('基本用法', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('calendar#basic-usage')
   const pcDemo = page.locator('.pc-demo')
-  const nowDate = new Date().getDate()
   const nowMonth = new Date().getMonth() + 1
+  const today = page.locator('.today')
   const selectedDay = page.getByRole('cell', { name: '14' }).locator('div').first()
   const selectedMonth = page.getByRole('cell', { name: '7 月' }).locator('div').first()
   // 校验日期，查看页面显示是否是月
@@ -16,12 +16,7 @@ test('基本用法', async ({ page }) => {
   await expect(selectedDay).toHaveClass(/selected/)
   // 校验今天按钮，选中的样式有selected today
   await pcDemo.getByRole('button', { name: '今天' }).click()
-  await expect(
-    pcDemo
-      .getByRole('cell', { name: `${nowDate}` })
-      .locator('div')
-      .first()
-  ).toHaveClass(/selected/)
+  await expect(today).toHaveClass(/selected/)
 
   // 校验年里的月份代码逻辑一致
   await pcDemo.getByRole('listitem').filter({ hasText: '年' }).nth(2).click()
diff --git a/examples/sites/demos/pc/app/calendar/basic-usage.vue b/examples/sites/demos/pc/app/calendar/basic-usage.vue
index 8a7f36adb..e0946e2b8 100644
--- a/examples/sites/demos/pc/app/calendar/basic-usage.vue
+++ b/examples/sites/demos/pc/app/calendar/basic-usage.vue
@@ -2,7 +2,7 @@
   <tiny-calendar></tiny-calendar>
 </template>
 
-<script lang="jsx">
+<script>
 import { Calendar } from '@opentiny/vue'
 
 export default {
diff --git a/examples/sites/demos/pc/app/calendar/calendar-mode-composition-api.vue b/examples/sites/demos/pc/app/calendar/calendar-mode-composition-api.vue
index b4e52770b..85617e13f 100644
--- a/examples/sites/demos/pc/app/calendar/calendar-mode-composition-api.vue
+++ b/examples/sites/demos/pc/app/calendar/calendar-mode-composition-api.vue
@@ -2,6 +2,6 @@
   <tiny-calendar mode="year"></tiny-calendar>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { Calendar as TinyCalendar } from '@opentiny/vue'
 </script>
diff --git a/examples/sites/demos/pc/app/calendar/calender-mode.spec.ts b/examples/sites/demos/pc/app/calendar/calendar-mode.spec.ts
similarity index 88%
rename from examples/sites/demos/pc/app/calendar/calender-mode.spec.ts
rename to examples/sites/demos/pc/app/calendar/calendar-mode.spec.ts
index e066f1561..6ac16cf53 100644
--- a/examples/sites/demos/pc/app/calendar/calender-mode.spec.ts
+++ b/examples/sites/demos/pc/app/calendar/calendar-mode.spec.ts
@@ -4,8 +4,8 @@ test('显示模式', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('calendar#calendar-mode')
   const pcDemo = page.locator('.pc-demo')
-  const nowDate = new Date().getDate()
   const nowMonth = new Date().getMonth() + 1
+  const today = page.locator('.today')
   const selectedDay = page.getByRole('cell', { name: '14' }).locator('div').first()
   const selectedMonth = page.getByRole('cell', { name: '7 月' }).locator('div').first()
   // 校验日期，查看页面显示是否是月
@@ -16,12 +16,7 @@ test('显示模式', async ({ page }) => {
   await expect(selectedDay).toHaveClass(/selected/)
   // 校验今天按钮，选中的样式有selected today
   await pcDemo.getByRole('button', { name: '今天' }).click()
-  await expect(
-    pcDemo
-      .getByRole('cell', { name: `${nowDate}` })
-      .locator('div')
-      .first()
-  ).toHaveClass(/selected/)
+  await expect(today).toHaveClass(/selected/)
 
   // 校验年里的月份代码逻辑一致
   await pcDemo.getByRole('listitem').filter({ hasText: '年' }).nth(2).click()
diff --git a/examples/sites/demos/pc/app/calendar/calendar-mode.vue b/examples/sites/demos/pc/app/calendar/calendar-mode.vue
index db2becf03..d9c697553 100644
--- a/examples/sites/demos/pc/app/calendar/calendar-mode.vue
+++ b/examples/sites/demos/pc/app/calendar/calendar-mode.vue
@@ -2,7 +2,7 @@
   <tiny-calendar mode="year"></tiny-calendar>
 </template>
 
-<script lang="jsx">
+<script>
 import { Calendar } from '@opentiny/vue'
 
 export default {
diff --git a/examples/sites/demos/pc/app/calendar/custom-calendar-toolbar-composition-api.vue b/examples/sites/demos/pc/app/calendar/custom-calendar-toolbar-composition-api.vue
index 7ce557b92..44b76e330 100644
--- a/examples/sites/demos/pc/app/calendar/custom-calendar-toolbar-composition-api.vue
+++ b/examples/sites/demos/pc/app/calendar/custom-calendar-toolbar-composition-api.vue
@@ -1,5 +1,4 @@
 <template>
-  <p>时间：{{ todayValue }}</p>
   <tiny-calendar>
     <template #tool="{ slotScope }">
       <tiny-button @click="toToday(slotScope)">今天</tiny-button>
@@ -7,17 +6,13 @@
   </tiny-calendar>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { Calendar as TinyCalendar, Button as TinyButton } from '@opentiny/vue'
-import { ref } from 'vue'
-
-let todayValue = ref('')
 
 function toToday(scope) {
   let year = new Date().getFullYear()
-  let month = new Date().getMonth() + 1
+  let month = new Date().getMonth()
   let day = new Date().getDate()
-  scope.selectedDate = new Date(year + '-' + month + '-' + day).valueOf()
-  todayValue.value = year + '-' + month + '-' + day
+  scope.selectedDate = new Date(year, month, day).valueOf()
 }
 </script>
diff --git a/examples/sites/demos/pc/app/calendar/custom-calendar-toolbar.spec.ts b/examples/sites/demos/pc/app/calendar/custom-calendar-toolbar.spec.ts
index 25c6d1f8e..47230377e 100644
--- a/examples/sites/demos/pc/app/calendar/custom-calendar-toolbar.spec.ts
+++ b/examples/sites/demos/pc/app/calendar/custom-calendar-toolbar.spec.ts
@@ -4,16 +4,15 @@ test('自定义工具栏', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('calendar#custom-calendar-toolbar')
   const pcDemo = page.locator('.pc-demo')
-  const year = new Date().getFullYear()
-  const month = new Date().getMonth() + 1
-  const day = new Date().getDate()
-  const nowDate = year + '-' + month + '-' + day
-  const selectedDay = page.getByRole('cell', { name: '14' }).locator('div').first()
-  const time = pcDemo.getByText('时间：')
+  const selectedDay = page.getByRole('cell', { name: '10' }).locator('div').first()
+  const time = page.locator('.today')
+
   // 校验选中功能
   await selectedDay.click()
+  await page.waitForTimeout(200)
   await expect(selectedDay).toHaveClass(/selected/)
   // 校验插槽日期按钮是否生效
   await pcDemo.getByRole('button', { name: '今天' }).click()
-  await expect(time).toHaveText('时间：' + nowDate)
+  await page.waitForTimeout(200)
+  await expect(time).toHaveClass(/selected/)
 })
diff --git a/examples/sites/demos/pc/app/calendar/custom-calendar-toolbar.vue b/examples/sites/demos/pc/app/calendar/custom-calendar-toolbar.vue
index 09e180d30..4bdb87d67 100644
--- a/examples/sites/demos/pc/app/calendar/custom-calendar-toolbar.vue
+++ b/examples/sites/demos/pc/app/calendar/custom-calendar-toolbar.vue
@@ -1,15 +1,12 @@
 <template>
-  <div>
-    <p>时间：{{ todayValue }}</p>
-    <tiny-calendar>
-      <template #tool="{ slotScope }">
-        <tiny-button @click="toToday(slotScope)">今天</tiny-button>
-      </template>
-    </tiny-calendar>
-  </div>
+  <tiny-calendar>
+    <template #tool="{ slotScope }">
+      <tiny-button @click="toToday(slotScope)">今天</tiny-button>
+    </template>
+  </tiny-calendar>
 </template>
 
-<script lang="jsx">
+<script>
 import { Calendar, Button } from '@opentiny/vue'
 
 export default {
@@ -17,18 +14,12 @@ export default {
     TinyCalendar: Calendar,
     TinyButton: Button
   },
-  data() {
-    return {
-      todayValue: ''
-    }
-  },
   methods: {
     toToday(scope) {
       let year = new Date().getFullYear()
-      let month = new Date().getMonth() + 1
+      let month = new Date().getMonth()
       let day = new Date().getDate()
-      scope.selectedDate = new Date(year + '-' + month + '-' + day).valueOf()
-      this.todayValue = year + '-' + month + '-' + day
+      scope.selectedDate = new Date(year, month, day).valueOf()
     }
   }
 }
diff --git a/examples/sites/demos/pc/app/calendar/custom-day-cell-composition-api.vue b/examples/sites/demos/pc/app/calendar/custom-day-cell-composition-api.vue
index 97292e68c..0c3bd132d 100644
--- a/examples/sites/demos/pc/app/calendar/custom-day-cell-composition-api.vue
+++ b/examples/sites/demos/pc/app/calendar/custom-day-cell-composition-api.vue
@@ -6,7 +6,7 @@
   </tiny-calendar>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { ref } from 'vue'
 import { Calendar as TinyCalendar } from '@opentiny/vue'
 
diff --git a/examples/sites/demos/pc/app/calendar/custom-day-cell.vue b/examples/sites/demos/pc/app/calendar/custom-day-cell.vue
index 5b303e94a..343d05280 100644
--- a/examples/sites/demos/pc/app/calendar/custom-day-cell.vue
+++ b/examples/sites/demos/pc/app/calendar/custom-day-cell.vue
@@ -6,7 +6,7 @@
   </tiny-calendar>
 </template>
 
-<script lang="jsx">
+<script>
 import { Calendar } from '@opentiny/vue'
 
 export default {
diff --git a/examples/sites/demos/pc/app/calendar/dynamic-add-schedule-composition-api.vue b/examples/sites/demos/pc/app/calendar/dynamic-add-schedule-composition-api.vue
index 33988d315..05c840b6b 100644
--- a/examples/sites/demos/pc/app/calendar/dynamic-add-schedule-composition-api.vue
+++ b/examples/sites/demos/pc/app/calendar/dynamic-add-schedule-composition-api.vue
@@ -2,7 +2,7 @@
   <tiny-calendar :events="eventslist" :year="2019" :month="9"> </tiny-calendar>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { ref } from 'vue'
 import { Calendar as TinyCalendar } from '@opentiny/vue'
 
diff --git a/examples/sites/demos/pc/app/calendar/dynamic-add-schedule.vue b/examples/sites/demos/pc/app/calendar/dynamic-add-schedule.vue
index 141f73cfa..24fd359d4 100644
--- a/examples/sites/demos/pc/app/calendar/dynamic-add-schedule.vue
+++ b/examples/sites/demos/pc/app/calendar/dynamic-add-schedule.vue
@@ -2,7 +2,7 @@
   <tiny-calendar :events="eventslist" :year="2019" :month="9"> </tiny-calendar>
 </template>
 
-<script lang="jsx">
+<script>
 import { Calendar } from '@opentiny/vue'
 
 export default {
diff --git a/examples/sites/demos/pc/app/calendar/show-selected-date-composition-api.vue b/examples/sites/demos/pc/app/calendar/show-selected-date-composition-api.vue
index 9b0bb93ec..4a0f86d0e 100644
--- a/examples/sites/demos/pc/app/calendar/show-selected-date-composition-api.vue
+++ b/examples/sites/demos/pc/app/calendar/show-selected-date-composition-api.vue
@@ -2,6 +2,6 @@
   <tiny-calendar show-selected></tiny-calendar>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { Calendar as TinyCalendar } from '@opentiny/vue'
 </script>
diff --git a/examples/sites/demos/pc/app/calendar/show-selected-date.vue b/examples/sites/demos/pc/app/calendar/show-selected-date.vue
index 9cb1001a0..eff34192c 100644
--- a/examples/sites/demos/pc/app/calendar/show-selected-date.vue
+++ b/examples/sites/demos/pc/app/calendar/show-selected-date.vue
@@ -2,7 +2,7 @@
   <tiny-calendar show-selected></tiny-calendar>
 </template>
 
-<script lang="jsx">
+<script>
 import { Calendar } from '@opentiny/vue'
 
 export default {
diff --git a/examples/sites/demos/pc/app/calendar/webdoc/calendar.js b/examples/sites/demos/pc/app/calendar/webdoc/calendar.js
index 3f0358255..11ad2e8d6 100644
--- a/examples/sites/demos/pc/app/calendar/webdoc/calendar.js
+++ b/examples/sites/demos/pc/app/calendar/webdoc/calendar.js
@@ -69,17 +69,18 @@ export default {
       'props': [
         {
           'name': 'events',
-          'type': 'Array',
+          'type': 'eventLists[]',
+          'typeAnchorName': 'eventLists',
           'defaultValue': '',
           'desc': { 'zh-CN': '事件列表', 'en-US': 'Event List' },
           'demoId': 'dynamic-add-schedule'
         },
         {
           'name': 'mode',
-          'type': 'string',
-          'defaultValue': '',
+          'type': "'month' | 'year'",
+          'defaultValue': "'month'",
           'desc': {
-            'zh-CN': '显示模式，month / year 可选，默认 month',
+            'zh-CN': '日历显示模式',
             'en-US': 'Display mode. The value can be month or year. The default value is month.'
           },
           'demoId': 'calendar-mode'
@@ -89,7 +90,7 @@ export default {
           'type': 'number',
           'defaultValue': '',
           'desc': {
-            'zh-CN': '指定月份，默认当月',
+            'zh-CN': '指定月份，默认当前月份',
             'en-US': 'Specified month. The default value is the current month.'
           },
           'demoId': 'custom-day-cell'
@@ -97,15 +98,15 @@ export default {
         {
           'name': 'show-selected',
           'type': 'boolean',
-          'defaultValue': '',
-          'desc': { 'zh-CN': '显示选中的日期', 'en-US': 'Display the selected date.' },
+          'defaultValue': 'false',
+          'desc': { 'zh-CN': '是否显示选中的日期', 'en-US': 'Display the selected date.' },
           'demoId': 'show-selected-date'
         },
         {
           'name': 'year',
           'type': 'number',
           'defaultValue': '',
-          'desc': { 'zh-CN': '指定年份，默认今年', 'en-US': 'Specified year. The default year is this year.' },
+          'desc': { 'zh-CN': '指定年份，默认当前年份', 'en-US': 'Specified year. The default year is this year.' },
           'demoId': 'custom-day-cell'
         }
       ],
@@ -127,5 +128,18 @@ export default {
         }
       ]
     }
+  ],
+  types: [
+    {
+      name: 'eventLists',
+      type: 'interface',
+      code: `
+      interface eventLists [{
+        time: 1534297845236, // 指定需要展示事件的日期
+        title: '消息', // 指定事件标题
+        content: '这是一条消息', // 指定事件的具体内容
+        type: 'info' // 事件主题类型，包括 warning、error、info、success。
+      }]`
+    }
   ]
 }
diff --git a/packages/theme/src/calendar/index.less b/packages/theme/src/calendar/index.less
index 7e1158c65..5fb0ca945 100644
--- a/packages/theme/src/calendar/index.less
+++ b/packages/theme/src/calendar/index.less
@@ -53,11 +53,11 @@
     float: right;
     margin-bottom: 8px;
 
-    > li {
+    >li {
       float: left;
       margin-right: 8px;
 
-      > span {
+      >span {
         display: inline-block;
       }
 
@@ -73,10 +73,10 @@
     position: relative;
     outline: 0;
 
-    > input {
+    >input {
       width: 100%;
-      height: var(--ti-calendar-input-height);
-      line-height: var(--ti-calendar-input-height);
+      height: var(--ti-calendar-input-height, 28px);
+      line-height: var(--ti-calendar-input-height, 28px);
       border: 1px solid var(--ti-calendar-border-color);
       color: var(--ti-calendar-text-color-info);
       border-radius: var(--ti-calendar-input-border-radius);
@@ -98,7 +98,7 @@
       }
 
       &[readonly] {
-        cursor: not-allowed;
+        cursor: pointer;
       }
     }
   }
@@ -130,12 +130,12 @@
     list-style: none;
     overflow: hidden;
 
-    > li {
+    >li {
       position: relative;
       float: left;
       width: calc(var(--ti-calendar-tool-width) / 2);
-      height: var(--ti-calendar-input-height);
-      line-height: var(--ti-calendar-input-height);
+      height: var(--ti-calendar-input-height, 28px);
+      line-height: var(--ti-calendar-input-height, 28px);
       border: 1px solid var(--ti-calendar-border-color);
       text-align: center;
       font-size: var(--ti-calendar-input-font-size);
@@ -157,7 +157,7 @@
       }
     }
 
-    > .active {
+    >.active {
       color: var(--ti-calendar-text-color-primary);
       border: 1px solid var(--ti-calendar-text-color-primary);
       z-index: 1;
@@ -171,8 +171,8 @@
     table {
       width: 100%;
 
-      > tr {
-        > th {
+      >tr {
+        >th {
           line-height: 18px;
           padding: 0 10px 5px 10px;
           font-size: var(--ti-calendar-content-heard-font-size);
@@ -180,14 +180,14 @@
           width: 100% / 7;
         }
 
-        > td {
+        >td {
           text-align: right;
           padding: 0 5px 0 0;
         }
       }
     }
 
-    &.year table > tr > td {
+    &.year table>tr>td {
       width: 100% / 3;
     }
   }
@@ -324,4 +324,4 @@
       color: var(--ti-calendar-list-item-selected-text-color);
     }
   }
-}
+}
\ No newline at end of file