Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat/new calendar #579

Merged
merged 9 commits into from
Apr 24, 2023
Merged

feat/new calendar #579

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
221c42c
feat: new calendar
ccccpj Apr 10, 2023
729ca7e
feat: update test snap
ccccpj Apr 10, 2023
bd073a1
feat: slot confirmBtn
ccccpj Apr 18, 2023
9883d6c
fix: merge dev
anlyyao Apr 21, 2023
2ab2ec7
Merge branch 'develop' into feat/new-calendar
LeeJim Apr 23, 2023
315d2bd
feat: update test snap
ccccpj Apr 23, 2023
461663c
feat: update test snap
ccccpj Apr 23, 2023
d8d3a7c
feat: firstDayOfWeek default
ccccpj Apr 23, 2023
db02b34
refactor(calendar): finish
LeeJim Apr 24, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6,652 changes: 4,648 additions & 2,004 deletions src/calendar/__test__/__snapshots__/demo.test.jsx.snap
View file
Open in desktop

Large diffs are not rendered by default.

40 changes: 9 additions & 31 deletions src/calendar/__test__/__snapshots__/index.test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,7 @@ exports[`calendar > props > : format 1`] = `
</div>
<div
class="t-calendar__months"
style="overflow: auto;"
>


Expand All @@ -96,9 +97,16 @@ exports[`calendar > props > : format 1`] = `
class="t-calendar__dates"
>

<div />
<div />
<div />
<div />
<div />
<div />


<div
class="t-calendar__dates-item"
style="margin-left: 294px;"
>

<!--v-if-->
Expand All @@ -112,7 +120,6 @@ exports[`calendar > props > : format 1`] = `
</div>
<div
class="t-calendar__dates-item"
style="margin-left: 0px;"
>

<!--v-if-->
Expand All @@ -126,7 +133,6 @@ exports[`calendar > props > : format 1`] = `
</div>
<div
class="t-calendar__dates-item"
style="margin-left: 0px;"
>

<!--v-if-->
Expand All @@ -140,7 +146,6 @@ exports[`calendar > props > : format 1`] = `
</div>
<div
class="t-calendar__dates-item"
style="margin-left: 0px;"
>

<!--v-if-->
Expand All @@ -154,7 +159,6 @@ exports[`calendar > props > : format 1`] = `
</div>
<div
class="t-calendar__dates-item"
style="margin-left: 0px;"
>

<!--v-if-->
Expand All @@ -168,7 +172,6 @@ exports[`calendar > props > : format 1`] = `
</div>
<div
class="t-calendar__dates-item"
style="margin-left: 0px;"
>

<!--v-if-->
Expand All @@ -182,7 +185,6 @@ exports[`calendar > props > : format 1`] = `
</div>
<div
class="t-calendar__dates-item"
style="margin-left: 0px;"
>

<!--v-if-->
Expand All @@ -196,7 +198,6 @@ exports[`calendar > props > : format 1`] = `
</div>
<div
class="t-calendar__dates-item"
style="margin-left: 0px;"
>

<!--v-if-->
Expand All @@ -210,7 +211,6 @@ exports[`calendar > props > : format 1`] = `
</div>
<div
class="t-calendar__dates-item"
style="margin-left: 0px;"
>

<!--v-if-->
Expand All @@ -224,7 +224,6 @@ exports[`calendar > props > : format 1`] = `
</div>
<div
class="t-calendar__dates-item"
style="margin-left: 0px;"
>

<!--v-if-->
Expand All @@ -238,7 +237,6 @@ exports[`calendar > props > : format 1`] = `
</div>
<div
class="t-calendar__dates-item"
style="margin-left: 0px;"
>

<!--v-if-->
Expand All @@ -252,7 +250,6 @@ exports[`calendar > props > : format 1`] = `
</div>
<div
class="t-calendar__dates-item"
style="margin-left: 0px;"
>

<!--v-if-->
Expand All @@ -266,7 +263,6 @@ exports[`calendar > props > : format 1`] = `
</div>
<div
class="t-calendar__dates-item"
style="margin-left: 0px;"
>

<!--v-if-->
Expand All @@ -280,7 +276,6 @@ exports[`calendar > props > : format 1`] = `
</div>
<div
class="t-calendar__dates-item"
style="margin-left: 0px;"
>

<!--v-if-->
Expand All @@ -294,7 +289,6 @@ exports[`calendar > props > : format 1`] = `
</div>
<div
class="t-calendar__dates-item t-calendar__dates-item--selected"
style="margin-left: 0px;"
>

<!--v-if-->
Expand All @@ -308,7 +302,6 @@ exports[`calendar > props > : format 1`] = `
</div>
<div
class="t-calendar__dates-item"
style="margin-left: 0px;"
>

<!--v-if-->
Expand All @@ -322,7 +315,6 @@ exports[`calendar > props > : format 1`] = `
</div>
<div
class="t-calendar__dates-item"
style="margin-left: 0px;"
>

<!--v-if-->
Expand All @@ -336,7 +328,6 @@ exports[`calendar > props > : format 1`] = `
</div>
<div
class="t-calendar__dates-item"
style="margin-left: 0px;"
>

<!--v-if-->
Expand All @@ -350,7 +341,6 @@ exports[`calendar > props > : format 1`] = `
</div>
<div
class="t-calendar__dates-item"
style="margin-left: 0px;"
>

<!--v-if-->
Expand All @@ -364,7 +354,6 @@ exports[`calendar > props > : format 1`] = `
</div>
<div
class="t-calendar__dates-item"
style="margin-left: 0px;"
>

<!--v-if-->
Expand All @@ -378,7 +367,6 @@ exports[`calendar > props > : format 1`] = `
</div>
<div
class="t-calendar__dates-item"
style="margin-left: 0px;"
>

<!--v-if-->
Expand All @@ -392,7 +380,6 @@ exports[`calendar > props > : format 1`] = `
</div>
<div
class="t-calendar__dates-item"
style="margin-left: 0px;"
>

<!--v-if-->
Expand All @@ -406,7 +393,6 @@ exports[`calendar > props > : format 1`] = `
</div>
<div
class="t-calendar__dates-item"
style="margin-left: 0px;"
>

<!--v-if-->
Expand All @@ -420,7 +406,6 @@ exports[`calendar > props > : format 1`] = `
</div>
<div
class="t-calendar__dates-item"
style="margin-left: 0px;"
>

<!--v-if-->
Expand All @@ -434,7 +419,6 @@ exports[`calendar > props > : format 1`] = `
</div>
<div
class="t-calendar__dates-item"
style="margin-left: 0px;"
>

<!--v-if-->
Expand All @@ -448,7 +432,6 @@ exports[`calendar > props > : format 1`] = `
</div>
<div
class="t-calendar__dates-item"
style="margin-left: 0px;"
>

<!--v-if-->
Expand All @@ -462,7 +445,6 @@ exports[`calendar > props > : format 1`] = `
</div>
<div
class="t-calendar__dates-item"
style="margin-left: 0px;"
>

<!--v-if-->
Expand All @@ -476,7 +458,6 @@ exports[`calendar > props > : format 1`] = `
</div>
<div
class="t-calendar__dates-item"
style="margin-left: 0px;"
>

<!--v-if-->
Expand All @@ -490,7 +471,6 @@ exports[`calendar > props > : format 1`] = `
</div>
<div
class="t-calendar__dates-item"
style="margin-left: 0px;"
>

<!--v-if-->
Expand All @@ -504,7 +484,6 @@ exports[`calendar > props > : format 1`] = `
</div>
<div
class="t-calendar__dates-item"
style="margin-left: 0px;"
>

<!--v-if-->
Expand All @@ -518,7 +497,6 @@ exports[`calendar > props > : format 1`] = `
</div>
<div
class="t-calendar__dates-item"
style="margin-left: 0px;"
>

<!--v-if-->
Expand Down
2 changes: 2 additions & 0 deletions src/calendar/__test__/demo.test.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import customTextVue from '@/calendar/demos/custom-text.vue';
import mobileVue from '@/calendar/demos/mobile.vue';
import multipleVue from '@/calendar/demos/multiple.vue';
import rangeVue from '@/calendar/demos/range.vue';
import withoutPopupVue from '@/calendar/demos/without-popup.vue';

MockDate.set('2020-12-28');

Expand All @@ -23,6 +24,7 @@ const mapper = {
mobileVue,
multipleVue,
rangeVue,
withoutPopupVue,
};

describe('Calendar', () => {
Expand Down
20 changes: 13 additions & 7 deletions src/calendar/calendar.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,21 +5,27 @@

name | type | default | description | required
-- | -- | -- | -- | --
confirmBtn | String / Object / Slot / Function | '' | Typescript：`string | TNode | ButtonProps | null`，[Button API Documents](./button?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/calendar/type.ts) | N
confirmBtn | String / Object / Slot / Function | '' | Typescript：`string \| ButtonProps \| TNode \| null`，[Button API Documents](./button?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/calendar/type.ts) | N
firstDayOfWeek | Number | 0 | \- | N
format | Function | - | Typescript：`(day: TDate) => TDate` `type TDateType = 'selected' | 'disabled' | 'start' | 'centre' | 'end' | ''; ` `interface TDate { date: Date; day: number; type: TDateType; className?: string; prefix?: string; suffix?: string; }`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/calendar/type.ts) | N
maxDate | Number / Date | - | Typescript：`number | Date` | N
minDate | Number / Date | - | Typescript：`number | Date` | N
title | String / Slot / Function | - | Typescript：`string | TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
format | Function | - | Typescript：`CalendarFormatType ` `type CalendarFormatType = (day: TDate) => TDate` `type TDateType = 'selected' \| 'disabled' \| 'start' \| 'centre' \| 'end' \| ''` `interface TDate { date: Date; day: number; type: TDateType; className?: string; prefix?: string; suffix?: string;}`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/calendar/type.ts) | N
maxDate | Number / Date | - | Typescript：` number \| Date` | N
minDate | Number / Date | - | Typescript：` number \| Date` | N
title | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
type | String | 'single' | options：single/multiple/range | N
value | Number / Array / Date | - | Typescript：`number | Date | TCalendarValue[] ` `type TCalendarValue = number | Date`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/calendar/type.ts) | N
visible | Boolean | false | \- | N
usePopup | Boolean | true | \- | N
value | Number / Array / Date | - | `v-model` and `v-model:value` is supported。Typescript：`number \| Date \| TCalendarValue[]` `type TCalendarValue = number \| Date`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/calendar/type.ts) | N
defaultValue | Number / Array / Date | - | uncontrolled property。Typescript：`number \| Date \| TCalendarValue[]` `type TCalendarValue = number \| Date`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/calendar/type.ts) | N
visible | Boolean | false | `v-model:visible` is supported | N
onChange | Function | | Typescript：`(value: Date) => void`<br/> | N
onClose | Function | | Typescript：`(trigger: CalendarTrigger) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/calendar/type.ts)。<br/>`type CalendarTrigger = 'close-btn' \| 'confirm-btn' \| 'overlay'`<br/> | N
onConfirm | Function | | Typescript：`(value: Date) => void`<br/> | N
onSelect | Function | | Typescript：`(value: Date) => void`<br/> | N

### Calendar Events

name | params | description
-- | -- | --
change | `(value: Date)` | \-
close | `(trigger: CalendarTrigger)` | [see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/calendar/type.ts)。<br/>`type CalendarTrigger = 'close-btn' \| 'confirm-btn' \| 'overlay'`<br/>
confirm | `(value: Date)` | \-
select | `(value: Date)` | \-
25 changes: 16 additions & 9 deletions src/calendar/calendar.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,21 +5,28 @@

名称 | 类型 | 默认值 | 说明 | 必传
-- | -- | -- | -- | --
confirmBtn | String / Object / Slot / Function | '' | 确认按钮。值为 null 则不显示确认按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。。TS 类型：`string | TNode | ButtonProps | null`，[Button API Documents](./button?tab=api)。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/calendar/type.ts) | N
confirmBtn | String / Object / Slot / Function | '' | 确认按钮。值为 null 则不显示确认按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。。TS 类型：`string \| ButtonProps \| TNode \| null`，[Button API Documents](./button?tab=api)。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/calendar/type.ts) | N
firstDayOfWeek | Number | 0 | 第一天从星期几开始，默认 0 = 周日 | N
format | Function | - | 用于格式化日期的函数。TS 类型：`(day: TDate) => TDate` `type TDateType = 'selected' | 'disabled' | 'start' | 'centre' | 'end' | ''; ` `interface TDate { date: Date; day: number; type: TDateType; className?: string; prefix?: string; suffix?: string; }`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/calendar/type.ts) | N
maxDate | Number / Date | - | 最大可选的日期，不传则默认半年后。TS 类型：`number | Date` | N
minDate | Number / Date | - | 最小可选的日期，不传则默认今天。TS 类型：`number | Date` | N
title | String / Slot / Function | - | 标题，不传默认为“请选择日期”。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
format | Function | - | 用于格式化日期的函数。TS 类型：`CalendarFormatType ` `type CalendarFormatType = (day: TDate) => TDate` `type TDateType = 'selected' \| 'disabled' \| 'start' \| 'centre' \| 'end' \| ''` `interface TDate { date: Date; day: number; type: TDateType; className?: string; prefix?: string; suffix?: string;}`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/calendar/type.ts) | N
maxDate | Number / Date | - | 最大可选的日期，不传则默认半年后。TS 类型：` number \| Date` | N
minDate | Number / Date | - | 最小可选的日期，不传则默认今天。TS 类型：` number \| Date` | N
title | String / Slot / Function | - | 标题，不传默认为“请选择日期”。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
type | String | 'single' | 日历的选择类型，single = 单选；multiple = 多选; range = 区间选择。可选项：single/multiple/range | N
value | Number / Array / Date | - | 当前选择的日期，不传则默认今天，当 type = multiple 或 range 时传入数组。TS 类型：`number | Date | TCalendarValue[] ` `type TCalendarValue = number | Date`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/calendar/type.ts) | N
visible | Boolean | false | 是否显示日历 | N
usePopup | Boolean | true | 是否使用弹出层包裹日历 | N
value | Number / Array / Date | - | 当前选择的日期，不传则默认今天，当 type = multiple 或 range 时传入数组。支持语法糖 `v-model` 或 `v-model:value`。TS 类型：`number \| Date \| TCalendarValue[]` `type TCalendarValue = number \| Date`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/calendar/type.ts) | N
defaultValue | Number / Array / Date | - | 当前选择的日期，不传则默认今天，当 type = multiple 或 range 时传入数组。非受控属性。TS 类型：`number \| Date \| TCalendarValue[]` `type TCalendarValue = number \| Date`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/calendar/type.ts) | N
visible | Boolean | false | 是否显示日历；`usePopup` 为 true 时有效。支持语法糖 `v-model:visible` | N
defaultVisible | Boolean | false | 是否显示日历；`usePopup` 为 true 时有效。非受控属性 | N
onChange | Function | | TS 类型：`(value: Date) => void`<br/>不显示 confirm-btn 时，完成选择时触发（暂不支持 type = multiple） | N
onClose | Function | | TS 类型：`(trigger: CalendarTrigger) => void`<br/>关闭按钮时触发。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/calendar/type.ts)。<br/>`type CalendarTrigger = 'close-btn' \| 'confirm-btn' \| 'overlay'`<br/> | N
onConfirm | Function | | TS 类型：`(value: Date) => void`<br/>点击确认按钮时触发 | N
onSelect | Function | | TS 类型：`(value: Date) => void`<br/>选择日期时触发 | N
onSelect | Function | | TS 类型：`(value: Date) => void`<br/>点击日期时触发 | N

### Calendar Events

名称 | 参数 | 描述
-- | -- | --
change | `(value: Date)` | 不显示 confirm-btn 时，完成选择时触发（暂不支持 type = multiple）
close | `(trigger: CalendarTrigger)` | 关闭按钮时触发。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/calendar/type.ts)。<br/>`type CalendarTrigger = 'close-btn' \| 'confirm-btn' \| 'overlay'`<br/>
confirm | `(value: Date)` | 点击确认按钮时触发
select | `(value: Date)` | 选择日期时触发
select | `(value: Date)` | 点击日期时触发
Loading