Skip to content

Commit

Permalink
feat(CalendarDay): add default margin-bottom (#10441)
Browse files Browse the repository at this point in the history 
* feat(CalendarDay): add default margin-bottom 10px

* feat(Calendar): add --van-calendar-day-margin-bottom

* fix(CalendarDay): adjust marginBottom of day

* docs(Calendar): add --van-calendar-day-margin-bottom

* Update README.md

* Update README.zh-CN.md

Co-authored-by: neverland <chenjiahan.jait@bytedance.com>
Co-authored-by: neverland <chenjiahan@youzan.com>
  • Loading branch information
@nemo-shen @chenjiahan
3 people committed Mar 31, 2022
1 parent 25be56a commit a1054c3
Show file tree
Hide file tree
Showing 7 changed files with 49 additions and 8 deletions.
4 changes: 4 additions & 0 deletions packages/vant/src/calendar/CalendarDay.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,10 @@ export default defineComponent({
}
}

if (offset + (item.date?.getDate() || 1) > 28) {
style.marginBottom = 0;
}

return style;
});

Expand Down
1 change: 1 addition & 0 deletions packages/vant/src/calendar/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -395,6 +395,7 @@ The component provides the following CSS variables, which can be used to customi
| --van-calendar-month-mark-font-size | _160px_ | - |
| --van-calendar-day-height | _64px_ | - |
| --van-calendar-day-font-size | _var(--van-font-size-lg)_ | - |
| --van-calendar-day-margin-bottom | _4px_ | - |
| --van-calendar-range-edge-color | _var(--van-white)_ | - |
| --van-calendar-range-edge-background-color | _var(--van-danger-color)_ | - |
| --van-calendar-range-middle-color | _var(--van-danger-color)_ | - |
Expand Down
1 change: 1 addition & 0 deletions packages/vant/src/calendar/README.zh-CN.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -401,6 +401,7 @@ calendarRef.value?.reset();
| --van-calendar-month-mark-font-size | _160px_ | - |
| --van-calendar-day-height | _64px_ | - |
| --van-calendar-day-font-size | _var(--van-font-size-lg)_ | - |
| --van-calendar-day-margin-bottom | _4px_ | - |
| --van-calendar-range-edge-color | _var(--van-white)_ | - |
| --van-calendar-range-edge-background-color | _var(--van-danger-color)_ | - |
| --van-calendar-range-middle-color | _var(--van-danger-color)_ | - |
Expand Down
2 changes: 2 additions & 0 deletions packages/vant/src/calendar/index.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
--van-calendar-month-mark-font-size: @calendar-month-mark-font-size;
--van-calendar-day-height: @calendar-day-height;
--van-calendar-day-font-size: @calendar-day-font-size;
--van-calendar-day-margin-bottom: @calendar-day-margin-bottom;
--van-calendar-range-edge-color: @calendar-range-edge-color;
--van-calendar-range-edge-background-color: @calendar-range-edge-background-color;
--van-calendar-range-middle-color: @calendar-range-middle-color;
Expand Down Expand Up @@ -124,6 +125,7 @@
width: 14.285%;
height: var(--van-calendar-day-height);
font-size: var(--van-calendar-day-font-size);
margin-bottom: var(--van-calendar-day-margin-bottom);
cursor: pointer;

&--end,
Expand Down
40 changes: 32 additions & 8 deletions packages/vant/src/calendar/test/__snapshots__/index.spec.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -251,41 +251,49 @@ exports[`color prop when type is single 1`] = `
23
</div>
<div role="gridcell"
style="margin-bottom: 0px;"
class="van-calendar__day van-calendar__day--disabled"
>
24
</div>
<div role="gridcell"
style="margin-bottom: 0px;"
class="van-calendar__day van-calendar__day--disabled"
>
25
</div>
<div role="gridcell"
style="margin-bottom: 0px;"
class="van-calendar__day van-calendar__day--disabled"
>
26
</div>
<div role="gridcell"
style="margin-bottom: 0px;"
class="van-calendar__day van-calendar__day--disabled"
>
27
</div>
<div role="gridcell"
style="margin-bottom: 0px;"
class="van-calendar__day van-calendar__day--disabled"
>
28
</div>
<div role="gridcell"
style="margin-bottom: 0px;"
class="van-calendar__day van-calendar__day--disabled"
>
29
</div>
<div role="gridcell"
style="margin-bottom: 0px;"
class="van-calendar__day van-calendar__day--disabled"
>
30
</div>
<div role="gridcell"
style="margin-bottom: 0px;"
class="van-calendar__day van-calendar__day--disabled"
>
31
Expand Down Expand Up @@ -484,41 +492,49 @@ exports[`formatter prop 1`] = `
23
</div>
<div role="gridcell"
style="margin-bottom: 0px;"
class="van-calendar__day van-calendar__day--disabled"
>
24
</div>
<div role="gridcell"
style="margin-bottom: 0px;"
class="van-calendar__day van-calendar__day--disabled"
>
25
</div>
<div role="gridcell"
style="margin-bottom: 0px;"
class="van-calendar__day van-calendar__day--disabled"
>
26
</div>
<div role="gridcell"
style="margin-bottom: 0px;"
class="van-calendar__day van-calendar__day--disabled"
>
27
</div>
<div role="gridcell"
style="margin-bottom: 0px;"
class="van-calendar__day van-calendar__day--disabled"
>
28
</div>
<div role="gridcell"
style="margin-bottom: 0px;"
class="van-calendar__day van-calendar__day--disabled"
>
29
</div>
<div role="gridcell"
style="margin-bottom: 0px;"
class="van-calendar__day van-calendar__day--disabled"
>
30
</div>
<div role="gridcell"
style="margin-bottom: 0px;"
class="van-calendar__day van-calendar__day--disabled"
>
31
Expand Down Expand Up @@ -836,49 +852,49 @@ exports[`row-height prop 1`] = `
23
</div>
<div role="gridcell"
style="height: 50px;"
style="height: 50px; margin-bottom: 0px;"
class="van-calendar__day van-calendar__day--disabled"
>
24
</div>
<div role="gridcell"
style="height: 50px;"
style="height: 50px; margin-bottom: 0px;"
class="van-calendar__day van-calendar__day--disabled"
>
25
</div>
<div role="gridcell"
style="height: 50px;"
style="height: 50px; margin-bottom: 0px;"
class="van-calendar__day van-calendar__day--disabled"
>
26
</div>
<div role="gridcell"
style="height: 50px;"
style="height: 50px; margin-bottom: 0px;"
class="van-calendar__day van-calendar__day--disabled"
>
27
</div>
<div role="gridcell"
style="height: 50px;"
style="height: 50px; margin-bottom: 0px;"
class="van-calendar__day van-calendar__day--disabled"
>
28
</div>
<div role="gridcell"
style="height: 50px;"
style="height: 50px; margin-bottom: 0px;"
class="van-calendar__day van-calendar__day--disabled"
>
29
</div>
<div role="gridcell"
style="height: 50px;"
style="height: 50px; margin-bottom: 0px;"
class="van-calendar__day van-calendar__day--disabled"
>
30
</div>
<div role="gridcell"
style="height: 50px;"
style="height: 50px; margin-bottom: 0px;"
class="van-calendar__day van-calendar__day--disabled"
>
31
Expand Down Expand Up @@ -1083,41 +1099,49 @@ exports[`should render title、footer、subtitle slot correctly 1`] = `
23
</div>
<div role="gridcell"
style="margin-bottom: 0px;"
class="van-calendar__day van-calendar__day--disabled"
>
24
</div>
<div role="gridcell"
style="margin-bottom: 0px;"
class="van-calendar__day van-calendar__day--disabled"
>
25
</div>
<div role="gridcell"
style="margin-bottom: 0px;"
class="van-calendar__day van-calendar__day--disabled"
>
26
</div>
<div role="gridcell"
style="margin-bottom: 0px;"
class="van-calendar__day van-calendar__day--disabled"
>
27
</div>
<div role="gridcell"
style="margin-bottom: 0px;"
class="van-calendar__day van-calendar__day--disabled"
>
28
</div>
<div role="gridcell"
style="margin-bottom: 0px;"
class="van-calendar__day van-calendar__day--disabled"
>
29
</div>
<div role="gridcell"
style="margin-bottom: 0px;"
class="van-calendar__day van-calendar__day--disabled"
>
30
</div>
<div role="gridcell"
style="margin-bottom: 0px;"
class="van-calendar__day van-calendar__day--disabled"
>
31
Expand Down
8 changes: 8 additions & 0 deletions packages/vant/src/calendar/test/__snapshots__/prop.spec.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -170,41 +170,49 @@ exports[`lazy-render prop 1`] = `
23
</div>
<div role="gridcell"
style="margin-bottom: 0px;"
class="van-calendar__day van-calendar__day--disabled"
>
24
</div>
<div role="gridcell"
style="margin-bottom: 0px;"
class="van-calendar__day van-calendar__day--disabled"
>
25
</div>
<div role="gridcell"
style="margin-bottom: 0px;"
class="van-calendar__day van-calendar__day--disabled"
>
26
</div>
<div role="gridcell"
style="margin-bottom: 0px;"
class="van-calendar__day van-calendar__day--disabled"
>
27
</div>
<div role="gridcell"
style="margin-bottom: 0px;"
class="van-calendar__day van-calendar__day--disabled"
>
28
</div>
<div role="gridcell"
style="margin-bottom: 0px;"
class="van-calendar__day van-calendar__day--disabled"
>
29
</div>
<div role="gridcell"
style="margin-bottom: 0px;"
class="van-calendar__day van-calendar__day--disabled"
>
30
</div>
<div role="gridcell"
style="margin-bottom: 0px;"
class="van-calendar__day van-calendar__day--disabled"
>
31
Expand Down
1 change: 1 addition & 0 deletions packages/vant/src/calendar/var.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
@calendar-month-mark-font-size: 160px;
@calendar-day-height: 64px;
@calendar-day-font-size: var(--van-font-size-lg);
@calendar-day-margin-bottom: 4px;
@calendar-range-edge-color: var(--van-white);
@calendar-range-edge-background-color: var(--van-danger-color);
@calendar-range-middle-color: var(--van-danger-color);
Expand Down

0 comments on commit a1054c3

Please sign in to comment.