docs(calendar): [calendar] optimize docs and demos (#1214)

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

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

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>

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(
+  await expect(today).toHaveClass(/selected/)
-    pcDemo
-      .getByRole('cell', { name: `${nowDate}` })
-      .locator('div')
-      .first()
-  ).toHaveClass(/selected/)
 
   // 校验年里的月份代码逻辑一致
   await pcDemo.getByRole('listitem').filter({ hasText: '年' }).nth(2).click()

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 {

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>

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(
+  await expect(today).toHaveClass(/selected/)
-    pcDemo
-      .getByRole('cell', { name: `${nowDate}` })
-      .locator('div')
-      .first()
-  ).toHaveClass(/selected/)
 
   // 校验年里的月份代码逻辑一致
   await pcDemo.getByRole('listitem').filter({ hasText: '年' }).nth(2).click()

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 {

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()
+  scope.selectedDate = new Date(year, month, day).valueOf()
-  todayValue.value = year + '-' + month + '-' + day
 }
 </script>

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 selectedDay = page.getByRole('cell', { name: '10' }).locator('div').first()
-  const month = new Date().getMonth() + 1
+  const time = page.locator('.today')
-  const day = new Date().getDate()
+
-  const nowDate = year + '-' + month + '-' + day
-  const selectedDay = page.getByRole('cell', { name: '14' }).locator('div').first()
-  const time = pcDemo.getByText('时间：')
   // 校验选中功能
   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/)
 })

examples/sites/demos/pc/app/calendar/custom-calendar-toolbar.vue

@@ -1,15 +1,12 @@
 <template>
-  <div>
+  <tiny-calendar>
-    <p>时间：{{ todayValue }}</p>
+    <template #tool="{ slotScope }">
-    <tiny-calendar>
+      <tiny-button @click="toToday(slotScope)">今天</tiny-button>
-      <template #tool="{ slotScope }">
+    </template>
-        <tiny-button @click="toToday(slotScope)">今天</tiny-button>
+  </tiny-calendar>
-      </template>
-    </tiny-calendar>
-  </div>
 </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()
+      scope.selectedDate = new Date(year, month, day).valueOf()
-      this.todayValue = year + '-' + month + '-' + day
     }
   }
 }

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'
 

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 {

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'
 

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 {

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>

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 {

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',
+          'type': "'month' | 'year'",
-          'defaultValue': '',
+          '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': '',
+          'defaultValue': 'false',
-          'desc': { 'zh-CN': '显示选中的日期', 'en-US': 'Display the selected date.' },
+          '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。
+      }]`
+    }
   ]
 }

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);
+      height: var(--ti-calendar-input-height, 28px);
-      line-height: var(--ti-calendar-input-height);
+      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);
+      height: var(--ti-calendar-input-height, 28px);
-      line-height: var(--ti-calendar-input-height);
+      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 {
+      >tr {
-        > th {
+        >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);
     }
   }
-}
+}