opentiny
/
tiny-vue
2
0
Fork 25
Code Issues Pull Requests 3 Packages Projects Releases Wiki Activity

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

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

* docs(calendar): [calendar] optimize docs and demos
This commit is contained in:
李天佑 2023-12-26 01:24:12 -08:00 committed by GitHub
parent 9fef12173e
commit 381bb46f84
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
17 changed files with 68 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
examples/sites/demos/pc/app/calendar/basic-usage-composition-api.vue
View File

@ -2,6 +2,6 @@
<tiny-calendar></tiny-calendar>
</template>
<script setup lang="jsx">
<script setup>
import { Calendar as TinyCalendar } from '@opentiny/vue'
</script>

9
examples/sites/demos/pc/app/calendar/basic-usage.spec.ts
View File

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

2
examples/sites/demos/pc/app/calendar/basic-usage.vue
View File

@ -2,7 +2,7 @@
<tiny-calendar></tiny-calendar>
</template>
<script lang="jsx">
<script>
import { Calendar } from '@opentiny/vue'
export default {

2
examples/sites/demos/pc/app/calendar/calendar-mode-composition-api.vue
View File

@ -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>

9
examples/sites/demos/pc/app/calendar/calender-mode.spec.ts → examples/sites/demos/pc/app/calendar/calendar-mode.spec.ts
View File

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

2
examples/sites/demos/pc/app/calendar/calendar-mode.vue
View File

@ -2,7 +2,7 @@
<tiny-calendar mode="year"></tiny-calendar>
</template>
<script lang="jsx">
<script>
import { Calendar } from '@opentiny/vue'
export default {

11
examples/sites/demos/pc/app/calendar/custom-calendar-toolbar-composition-api.vue
View File

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

13
examples/sites/demos/pc/app/calendar/custom-calendar-toolbar.spec.ts
View File

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

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

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

2
examples/sites/demos/pc/app/calendar/custom-day-cell-composition-api.vue
View File

@ -6,7 +6,7 @@
</tiny-calendar>
</template>
<script setup lang="jsx">
<script setup>
import { ref } from 'vue'
import { Calendar as TinyCalendar } from '@opentiny/vue'

2
examples/sites/demos/pc/app/calendar/custom-day-cell.vue
View File

@ -6,7 +6,7 @@
</tiny-calendar>
</template>
<script lang="jsx">
<script>
import { Calendar } from '@opentiny/vue'
export default {

2
examples/sites/demos/pc/app/calendar/dynamic-add-schedule-composition-api.vue
View File

@ -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'

2
examples/sites/demos/pc/app/calendar/dynamic-add-schedule.vue
View File

@ -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 {

2
examples/sites/demos/pc/app/calendar/show-selected-date-composition-api.vue
View File

@ -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>

2
examples/sites/demos/pc/app/calendar/show-selected-date.vue
View File

@ -2,7 +2,7 @@
<tiny-calendar show-selected></tiny-calendar>
</template>
<script lang="jsx">
<script>
import { Calendar } from '@opentiny/vue'
export default {

30
examples/sites/demos/pc/app/calendar/webdoc/calendar.js
View File

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

30
packages/theme/src/calendar/index.less
View File

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