fix(calendar-view): [calendar-view] Fix bug with invalid calendar hei… (

#2520) * fix(calendar-view): [calendar-view] Fix bug with invalid calendar height value * fix(calendar-view): [calendar-view] Fix bug
opentiny · Nov 19, 2024 · dcb10aa · dcb10aa
1 parent 77bbae0
commit dcb10aa
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 9 deletions.
diff --git a/examples/sites/demos/apis/calendar-view.js b/examples/sites/demos/apis/calendar-view.js
@@ -43,7 +43,7 @@ export default {
         },
         {
           name: 'height',
-          type: 'string',
+          type: 'string | number',
           defaultValue: '',
           desc: {
             'zh-CN': '日历高度',

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
@@ -3,9 +3,9 @@ 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(3)
+  const day10 = page.getByText('10').nth(1)
   const day14 = page.getByText('14').nth(1)
-  const day15 = page.getByText('15').nth(1)
+  const day15 = page.getByText('15').nth(2)
   await expect(day10).toHaveClass(/is-disabled/)
   await expect(day14).toHaveClass(/is-disabled/)
   await expect(day15).toHaveClass('date')

diff --git a/packages/theme/src/calendar-view/index.less b/packages/theme/src/calendar-view/index.less
@@ -23,6 +23,7 @@
   padding-top: 32px;
   border: 1px solid #ebebeb;
   background-color: var(--tv-CalendarView-bg-color);
+  overflow: auto;
 
   &__header {
     display: flex;

diff --git a/packages/vue/src/calendar-view/src/index.ts b/packages/vue/src/calendar-view/src/index.ts
@@ -66,7 +66,7 @@ export const calendarViewProps = {
     }
   },
   height: {
-    type: String,
+    type: [String, Number],
     default: ''
   },
   markColor: {

diff --git a/packages/vue/src/calendar-view/src/pc.vue b/packages/vue/src/calendar-view/src/pc.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="tiny-calendar-view">
+  <div class="tiny-calendar-view" :style="{ 'height': typeof height === 'number' ? height + 'px' : height }">
     <div class="tiny-calendar-view__header">
       <div>
         <tiny-button @click="toToday">{{ t('ui.calendarView.backToday') }}</tiny-button>
@@ -58,8 +58,8 @@
                   day.isLast || day.isNext
                     ? 'is-next-or-last'
                     : isToday(day) || isSelectedDate(day)
-                      ? 'is-selected'
-                      : '',
+                    ? 'is-selected'
+                    : '',
                   day.disabled ? 'is-disabled' : ''
                 ]"
               >
@@ -133,7 +133,7 @@
           <icon-chevron-right></icon-chevron-right>
         </div>
       </div>
-      <div v-if="state.mode === 'timeline'" class="tiny-calendar-view-week__timeline" :style="{ 'height': height }">
+      <div v-if="state.mode === 'timeline'" class="tiny-calendar-view-week__timeline">
         <div class="day-times">
           <ul>
             <li v-for="(item, i) in state.dayTimes" :key="item.time" :class="i % 2 === 1 && 'is-odd-num'">
@@ -186,7 +186,7 @@
           </ul>
         </div>
       </div>
-      <div v-if="state.mode === 'schedule'" class="tiny-calendar-view-week__schedule" :style="{ 'height': height }">
+      <div v-if="state.mode === 'schedule'" class="tiny-calendar-view-week__schedule">
         <ul>
           <li v-for="(date, index) in state.weekDates" :key="date.value" style="width: 14.28%">
             <slot