From dc8bdc021e0149b8947bda826b5ee3b67be30ed7 Mon Sep 17 00:00:00 2001 From: hetech Date: Thu, 25 Apr 2019 10:57:27 +0800 Subject: [PATCH] Calendar: add Calendar component (#14908) --- components.json | 3 +- examples/demo-styles/calendar.scss | 5 + examples/demo-styles/index.scss | 1 + examples/docs/en-US/calendar.md | 65 +++++ examples/docs/es/calendar.md | 65 +++++ examples/docs/fr-FR/calendar.md | 65 +++++ examples/docs/zh-CN/calendar.md | 65 +++++ examples/nav.config.json | 16 ++ packages/calendar/index.js | 8 + packages/calendar/src/date-table.vue | 189 +++++++++++++ packages/calendar/src/main.vue | 251 ++++++++++++++++++ packages/date-picker/src/basic/date-table.vue | 2 +- .../date-picker/src/basic/month-table.vue | 2 +- .../date-picker/src/basic/time-spinner.vue | 2 +- packages/date-picker/src/basic/year-table.vue | 2 +- packages/date-picker/src/panel/date-range.vue | 2 +- packages/date-picker/src/panel/date.vue | 2 +- .../date-picker/src/panel/month-range.vue | 2 +- packages/date-picker/src/panel/time-range.vue | 2 +- packages/date-picker/src/panel/time.vue | 2 +- packages/date-picker/src/picker.vue | 2 +- packages/theme-chalk/src/calendar.scss | 77 ++++++ packages/theme-chalk/src/common/var.scss | 7 + packages/theme-chalk/src/index.scss | 1 + src/index.js | 5 +- .../util/index.js => src/utils/date-util.js | 45 +++- test/unit/specs/calendar.spec.js | 70 +++++ types/calendar.d.ts | 12 + types/element-ui.d.ts | 2 + 29 files changed, 947 insertions(+), 25 deletions(-) create mode 100644 examples/demo-styles/calendar.scss create mode 100644 examples/docs/en-US/calendar.md create mode 100644 examples/docs/es/calendar.md create mode 100644 examples/docs/fr-FR/calendar.md create mode 100644 examples/docs/zh-CN/calendar.md create mode 100644 packages/calendar/index.js create mode 100644 packages/calendar/src/date-table.vue create mode 100644 packages/calendar/src/main.vue create mode 100644 packages/theme-chalk/src/calendar.scss rename packages/date-picker/src/util/index.js => src/utils/date-util.js (89%) create mode 100644 test/unit/specs/calendar.spec.js create mode 100644 types/calendar.d.ts diff --git a/components.json b/components.json index 54389a833..8d6a6b800 100644 --- a/components.json +++ b/components.json @@ -72,5 +72,6 @@ "timeline-item": "./packages/timeline-item/index.js", "link": "./packages/link/index.js", "divider": "./packages/divider/index.js", - "image": "./packages/image/index.js" + "image": "./packages/image/index.js", + "calendar": "./packages/calendar/index.js" } diff --git a/examples/demo-styles/calendar.scss b/examples/demo-styles/calendar.scss new file mode 100644 index 000000000..62198bd1c --- /dev/null +++ b/examples/demo-styles/calendar.scss @@ -0,0 +1,5 @@ +.demo-calendar.demo-block { + .is-selected { + color: #1989FA; + } +} diff --git a/examples/demo-styles/index.scss b/examples/demo-styles/index.scss index 026f06251..ae0f0d8b3 100644 --- a/examples/demo-styles/index.scss +++ b/examples/demo-styles/index.scss @@ -2,6 +2,7 @@ @import "./badge.scss"; @import "./border.scss"; @import "./button.scss"; +@import "./calendar.scss"; @import "./card.scss"; @import "./carousel.scss"; @import "./cascader.scss"; diff --git a/examples/docs/en-US/calendar.md b/examples/docs/en-US/calendar.md new file mode 100644 index 000000000..55c265b44 --- /dev/null +++ b/examples/docs/en-US/calendar.md @@ -0,0 +1,65 @@ +## Calendar + +Display date. + +### Basic + +:::demo Set `value` to specify the currently displayed month. If `value` is not specified, current month is displayed. `value` supports two-way binding. +```html + + + + +``` +::: + +### Custom Content + +:::demo Customize what is displayed in the calendar cell by setting `scoped-slot` named `dateCell`. In `scoped-slot` you can get the date (the date of the current cell), data (including the type, isSelected, day attribute). For details, please refer to the API documentation below. +```html + + + + + +``` +::: + +### Range + +:::demo Set the `range` attribute to specify the display range of the calendar. Start time must be Monday, end time must be Sunday, and the time span cannot exceed two months. +```html + + +``` +::: + +### Attributes +| Attribute | Description | Type | Accepted Values | Default | +|-----------------|-------------- |---------- |---------------------- |--------- | +| value / v-model | binding value | Date/string/number | — | — | +| range | time range, including start time and end time. Start time must be Monday, end time must be Sunday, the time span cannot exceed two months | Array | — | — | + +### dateCell scoped slot 参数 +| Attribute | Description | Type | Accepted Values | Default | +|-----------------|-------------- |---------- |---------------------- |--------- | +| date | date the cell represents | Date | — | — | +| data | { type, isSelected, day}. `type` indicates which month the date belongs, optional values are prev-month, current-month, next-month; `isSelected` indicates whether the date is selected; `day` is the formatted date in the format yyyy-MM-dd | Object | — | — | diff --git a/examples/docs/es/calendar.md b/examples/docs/es/calendar.md new file mode 100644 index 000000000..55c265b44 --- /dev/null +++ b/examples/docs/es/calendar.md @@ -0,0 +1,65 @@ +## Calendar + +Display date. + +### Basic + +:::demo Set `value` to specify the currently displayed month. If `value` is not specified, current month is displayed. `value` supports two-way binding. +```html + + + + +``` +::: + +### Custom Content + +:::demo Customize what is displayed in the calendar cell by setting `scoped-slot` named `dateCell`. In `scoped-slot` you can get the date (the date of the current cell), data (including the type, isSelected, day attribute). For details, please refer to the API documentation below. +```html + + + + + +``` +::: + +### Range + +:::demo Set the `range` attribute to specify the display range of the calendar. Start time must be Monday, end time must be Sunday, and the time span cannot exceed two months. +```html + + +``` +::: + +### Attributes +| Attribute | Description | Type | Accepted Values | Default | +|-----------------|-------------- |---------- |---------------------- |--------- | +| value / v-model | binding value | Date/string/number | — | — | +| range | time range, including start time and end time. Start time must be Monday, end time must be Sunday, the time span cannot exceed two months | Array | — | — | + +### dateCell scoped slot 参数 +| Attribute | Description | Type | Accepted Values | Default | +|-----------------|-------------- |---------- |---------------------- |--------- | +| date | date the cell represents | Date | — | — | +| data | { type, isSelected, day}. `type` indicates which month the date belongs, optional values are prev-month, current-month, next-month; `isSelected` indicates whether the date is selected; `day` is the formatted date in the format yyyy-MM-dd | Object | — | — | diff --git a/examples/docs/fr-FR/calendar.md b/examples/docs/fr-FR/calendar.md new file mode 100644 index 000000000..55c265b44 --- /dev/null +++ b/examples/docs/fr-FR/calendar.md @@ -0,0 +1,65 @@ +## Calendar + +Display date. + +### Basic + +:::demo Set `value` to specify the currently displayed month. If `value` is not specified, current month is displayed. `value` supports two-way binding. +```html + + + + +``` +::: + +### Custom Content + +:::demo Customize what is displayed in the calendar cell by setting `scoped-slot` named `dateCell`. In `scoped-slot` you can get the date (the date of the current cell), data (including the type, isSelected, day attribute). For details, please refer to the API documentation below. +```html + + + + + +``` +::: + +### Range + +:::demo Set the `range` attribute to specify the display range of the calendar. Start time must be Monday, end time must be Sunday, and the time span cannot exceed two months. +```html + + +``` +::: + +### Attributes +| Attribute | Description | Type | Accepted Values | Default | +|-----------------|-------------- |---------- |---------------------- |--------- | +| value / v-model | binding value | Date/string/number | — | — | +| range | time range, including start time and end time. Start time must be Monday, end time must be Sunday, the time span cannot exceed two months | Array | — | — | + +### dateCell scoped slot 参数 +| Attribute | Description | Type | Accepted Values | Default | +|-----------------|-------------- |---------- |---------------------- |--------- | +| date | date the cell represents | Date | — | — | +| data | { type, isSelected, day}. `type` indicates which month the date belongs, optional values are prev-month, current-month, next-month; `isSelected` indicates whether the date is selected; `day` is the formatted date in the format yyyy-MM-dd | Object | — | — | diff --git a/examples/docs/zh-CN/calendar.md b/examples/docs/zh-CN/calendar.md new file mode 100644 index 000000000..667a3a303 --- /dev/null +++ b/examples/docs/zh-CN/calendar.md @@ -0,0 +1,65 @@ +## Calendar calendar + +显示日期 + +### 基本 + +:::demo 设置 `value` 来指定当前显示的月份。如果 `value` 未指定，则显示当月。`value` 支持 `v-model` 双向绑定。 +```html + + + + +``` +::: + +### 自定义内容 + +:::demo 通过设置名为 `dateCell` 的 `scoped-slot` 来自定义日历单元格中显示的内容。在 `scoped-slot` 可以获取到 date（当前单元格的日期）, data（包括 type，isSelected，day 属性）。详情解释参考下方的 API 文档。 +```html + + + + + +``` +::: + +### 自定义范围 + +:::demo 设置 `range` 属性指定日历的显示范围。开始时间必须是周一，结束时间必须是周日，且时间跨度不能超过两个月。 +```html + + +``` +::: + +### Attributes +| 参数 | 说明 | 类型 | 可选值 | 默认值 | +|-----------------|-------------- |---------- |------------ |-------- | +| value / v-model | 绑定值 | Date/string/number | — | — | +| range | 时间范围，包括开始时间与结束时间。开始时间必须是周一，结束时间必须是周日，且时间跨度不能超过两个月。 | Array | — | — | + +### dateCell scoped slot 参数 +| 参数 | 说明 | 类型 | 可选值 | 默认值 | +|-----------------|-------------- |---------- |------------ |-------- | +| date | 单元格代表的日期 | Date | — | — | +| data | { type, isSelected, day}，`type` 表示该日期的所属月份，可选值有 prev-month，current-month，next-month；`isSelected` 标明该日期是否被选中；`day` 是格式化的日期，格式为 yyyy-MM-dd | Object | — | — | diff --git a/examples/nav.config.json b/examples/nav.config.json index 11f0d60e6..bfd297fc0 100644 --- a/examples/nav.config.json +++ b/examples/nav.config.json @@ -260,6 +260,10 @@ "path": "/divider", "title": "Divider 分割线" }, + { + "path": "/calendar", + "title": "Calendar 日历" + }, { "path": "/image", "title": "Image 图片" @@ -530,6 +534,10 @@ "path": "/divider", "title": "Divider" }, + { + "path": "/calendar", + "title": "Calendar" + }, { "path": "/image", "title": "Image" @@ -800,6 +808,10 @@ "path": "/divider", "title": "Divider" }, + { + "path": "/calendar", + "title": "Calendar" + }, { "path": "/image", "title": "Image" @@ -1070,6 +1082,10 @@ "path": "/divider", "title": "Divider" }, + { + "path": "/calendar", + "title": "Calendar" + }, { "path": "/image", "title": "Image" diff --git a/packages/calendar/index.js b/packages/calendar/index.js new file mode 100644 index 000000000..ec79cd99a --- /dev/null +++ b/packages/calendar/index.js @@ -0,0 +1,8 @@ +import Calendar from './src/main'; + +/* istanbul ignore next */ +Calendar.install = function(Vue) { + Vue.component(Calendar.name, Calendar); +}; + +export default Calendar; diff --git a/packages/calendar/src/date-table.vue b/packages/calendar/src/date-table.vue new file mode 100644 index 000000000..e1c8366b8 --- /dev/null +++ b/packages/calendar/src/date-table.vue @@ -0,0 +1,189 @@ + diff --git a/packages/calendar/src/main.vue b/packages/calendar/src/main.vue new file mode 100644 index 000000000..fa7112ab7 --- /dev/null +++ b/packages/calendar/src/main.vue @@ -0,0 +1,251 @@ + + + diff --git a/packages/date-picker/src/basic/date-table.vue b/packages/date-picker/src/basic/date-table.vue index ec089e616..f7b08843b 100644 --- a/packages/date-picker/src/basic/date-table.vue +++ b/packages/date-picker/src/basic/date-table.vue @@ -32,7 +32,7 @@