SanshuiLiu
/
tiny-vue
forked from opentiny/tiny-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

docs(calendar-view): [calendar-view] optimize docs and demos (#1228) 

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

* docs(calendar-view): [calendar-view] optimize docs and demos
This commit is contained in:
李天佑 2023-12-27 23:33:44 -08:00 committed by GitHub
parent 0210ce03de
commit eb3439c568
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
24 changed files with 228 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
examples/sites/demos/pc/app/calendar-view/basic-usage.spec.ts Normal file
View File

@ -0,0 +1,18 @@
import { test, expect } from '@playwright/test'
test('基本用法', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('calendar-view#basic-usage')
const demoPage = page.locator('#basic-usage')
const fixWeek2 = page.getByText('前端周会2').first()
const popWeek2 = page.locator('.title').filter({ hasText: '前端周会2' })
// 校验固定内容
await expect(demoPage).toHaveText(/15前端周会2前端周会2-1前端周会1/)
await expect(demoPage).toHaveText(/16前端周会4前端周会3/)
await expect(demoPage).toHaveText(/25节假日25-28前端周会5/)
await expect(demoPage.locator('.events-end').first()).toHaveClass(/bg-green/)
// 校验hover弹出框
await fixWeek2.hover()
await page.waitForTimeout(200)
await expect(popWeek2).toBeVisible()
})

23
examples/sites/demos/pc/app/calendar-view/calendar-day-mark.spec.ts Normal file
View File

@ -0,0 +1,23 @@
import { test, expect } from '@playwright/test'
test('日期标记', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('calendar-view#calendar-day-mark')
const listitem = page.getByRole('listitem')
const day30 = listitem.filter({ hasText: '30周日' }).locator('span').nth(2)
const day1 = listitem.filter({ hasText: '1周一' }).locator('span').nth(2)
const day6 = listitem.filter({ hasText: '6周六' }).locator('span').nth(2)
const day7 = page.getByText('7周日')
const rightSvg = page.locator('.header-right > .tiny-svg')
const day8 = listitem.filter({ hasText: '8周一' }).locator('span').nth(2)
await expect(day30).toBeVisible()
await expect(day1).toHaveClass(/mark/)
await expect(day1).toHaveClass(/mark-red/)
await expect(day6).toHaveClass(/mark/)
await expect(day7).not.toBeVisible()
await rightSvg.click()
await page.waitForTimeout(200)
await expect(day7).toBeVisible()
await expect(day8).toHaveClass(/mark/)
await expect(day8).toHaveClass(/mark-red/)
})

4
examples/sites/demos/pc/app/calendar-view/calendar-disabled-day-composition-api.vue
View File

@ -2,13 +2,13 @@
<tiny-calendar-view :events="eventslist" :year="2023" :month="5" :disabled="disabled"></tiny-calendar-view>
</template>
<script setup lang="ts">
<script setup>
import { ref } from 'vue'
import { CalendarView as TinyCalendarView } from '@opentiny/vue'
const eventslist = ref([])
const disabled = (date) => {
return date.split('-')[2] < 5
return date.split('-')[2] < 15
}
</script>

12
examples/sites/demos/pc/app/calendar-view/calendar-disabled-day.spec.ts Normal file
View File

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

2
examples/sites/demos/pc/app/calendar-view/calendar-disabled-day.vue
View File

@ -16,7 +16,7 @@ export default {
},
methods: {
disabled(date) {
return date.split('-')[2] < 5
return date.split('-')[2] < 15
}
}
}

25
examples/sites/demos/pc/app/calendar-view/calendar-event.spec.ts Normal file
View File

@ -0,0 +1,25 @@
import { test, expect } from '@playwright/test'
test('事件', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('calendar-view#calendar-event')
const timeInput = page.locator('.tiny-filter-box').locator('.value')
const timeBtn = page.getByText('2023 年 05 月')
const leftYear = page.getByRole('button', { name: '前一年' })
const month6 = page.getByText('六月')
const leftSvg = page.locator('.header-left > .tiny-svg')
const rightSvg = page.locator('.header-right > .tiny-svg')
await timeBtn.click()
await page.waitForTimeout(100)
await leftYear.click()
await page.waitForTimeout(100)
await month6.click()
await page.waitForTimeout(100)
await expect(timeInput).toHaveText('2022 年 06 月')
await leftSvg.click()
await page.waitForTimeout(100)
await expect(timeInput).toHaveText('2022 年 05 月')
await rightSvg.click()
await page.waitForTimeout(100)
await expect(timeInput).toHaveText('2022 年 06 月')
})

25
examples/sites/demos/pc/app/calendar-view/calendar-mode.spec.ts Normal file
View File

@ -0,0 +1,25 @@
import { test, expect } from '@playwright/test'
test('显示模式', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('calendar-view#calendar-mode')
const monthBtn = page.locator('label').nth(2)
const timelineBtn = page.locator('label').nth(3)
const scheduleBtn = page.locator('label').nth(4)
const dmonthDom = page.locator('.tiny-calendar-view-month__main')
const timelineDom = page.locator('.tiny-calendar-view-week__timeline')
const scheduleDom = page.locator('.tiny-calendar-view-week__schedule')
// 验证按钮是否选中，验证时间组件页面是否正确
await expect(monthBtn.locator('.tiny-svg')).toHaveClass(/fill-brand/)
await expect(dmonthDom).toBeVisible()
await timelineBtn.click()
await page.waitForTimeout(100)
await expect(timelineBtn.locator('.tiny-svg')).toHaveClass(/fill-brand/)
await expect(timelineDom).toBeVisible()
await scheduleBtn.click()
await page.waitForTimeout(100)
await expect(scheduleBtn.locator('.tiny-svg')).toHaveClass(/fill-brand/)
await expect(scheduleDom).toBeVisible()
})

18
examples/sites/demos/pc/app/calendar-view/calendar-schedule-slot.spec.ts Normal file
View File

@ -0,0 +1,18 @@
import { test, expect } from '@playwright/test'
test('日程模式插槽', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('calendar-view#calendar-schedule-slot')
const solt1 = page.locator('.new-schedule').first()
const soltData1 = page.getByText('新增事件2023-4-30')
const solt5 = page.locator('li:nth-child(5) > .new-schedule')
const soltData5 = page.getByText('新增事件2023-5-4')
await expect(solt1).toBeVisible()
await page.waitForTimeout(200)
await solt1.click()
await page.waitForTimeout(100)
await expect(soltData1).toBeVisible()
await solt5.click()
await page.waitForTimeout(100)
await expect(soltData5).toBeVisible()
})

11
examples/sites/demos/pc/app/calendar-view/calendar-timeline-range.spec.ts Normal file
View File

@ -0,0 +1,11 @@
import { test, expect } from '@playwright/test'
test('时间线范围配置', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('calendar-view#calendar-timeline-range')
const dayTime = page.locator('.day-times')
const firstTime = dayTime.locator('ul>li>span').first()
const lastTime = dayTime.getByText('21:00')
await expect(firstTime).toHaveText('10:00')
await expect(lastTime).not.toBeVisible()
})

23
examples/sites/demos/pc/app/calendar-view/calendar-timeline-slot.spec.ts Normal file
View File

@ -0,0 +1,23 @@
import { test, expect } from '@playwright/test'
test('时间线插槽', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('calendar-view#calendar-timeline-slot')
const demoPage = page.locator('#calendar-timeline-slot')
const fixWeek2 = page.getByText('前端周会2').first()
const popWeek2 = page.locator('.title').filter({ hasText: '前端周会2' })
const fixWeek = page.locator('#calendar-timeline-slot').getByText('节假日25-28')
const popWeek = page.locator('.title').filter({ hasText: '节假日25-28' })
// 校验固定内容
await expect(demoPage).toHaveText(/15前端周会2前端周会2-1前端周会1/)
await expect(demoPage).toHaveText(/16前端周会4前端周会3/)
await expect(demoPage).toHaveText(/25节假日25-28前端周会5/)
await expect(demoPage.locator('.events-end').first()).toHaveClass(/bg-green/)
// 校验hover弹出框
await fixWeek2.hover()
await page.waitForTimeout(100)
await expect(popWeek2).toBeVisible()
await fixWeek.hover()
await page.waitForTimeout(100)
await expect(popWeek).toBeVisible()
})

8
examples/sites/demos/pc/app/calendar-view/custom-calendar-toolbar.spec.ts Normal file
View File

@ -0,0 +1,8 @@
import { test, expect } from '@playwright/test'
test('自定义工具栏', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('calendar-view#custom-calendar-toolbar')
const toolDom = page.getByRole('paragraph').filter({ hasText: '此处为自定义工具栏插槽' })
await expect(toolDom).toBeVisible()
})

8
examples/sites/demos/pc/app/calendar-view/custom-day-bg-color.spec.ts Normal file
View File

@ -0,0 +1,8 @@
import { test, expect } from '@playwright/test'
test('自定义单元格背景色', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('calendar-view#custom-day-bg-color')
const selectDay = page.getByRole('listitem').filter({ hasText: '10' }).first()
await expect(selectDay).toHaveClass(/bg-red/)
})

11
examples/sites/demos/pc/app/calendar-view/custom-header.spec.ts Normal file
View File

@ -0,0 +1,11 @@
import { test, expect } from '@playwright/test'
test('自定义头部显示', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('calendar-view#custom-header')
const timelineBtn = page.locator('label').nth(3)
const customHeader = page.getByText('2023-5-3 周三')
await timelineBtn.click()
await page.waitForTimeout(200)
await expect(customHeader).toBeVisible()
})

7
examples/sites/demos/pc/app/calendar-view/hide-mode-composition-api.vue
View File

@ -1,7 +0,0 @@
<template>
<tiny-calendar-view :modes="[]"></tiny-calendar-view>
</template>
<script setup lang="ts">
import { CalendarView as TinyCalendarView } from '@opentiny/vue'
</script>

13
examples/sites/demos/pc/app/calendar-view/hide-mode.vue
View File

@ -1,13 +0,0 @@
<template>
<tiny-calendar-view :modes="[]"> </tiny-calendar-view>
</template>
<script>
import { CalendarView } from '@opentiny/vue'
export default {
components: {
TinyCalendarView: CalendarView
}
}
</script>

7
examples/sites/demos/pc/app/calendar-view/mode-combination-composition-api.vue
View File

@ -1,7 +0,0 @@
<template>
<tiny-calendar-view :modes="['timeline', 'schedule']" mode="timeline"></tiny-calendar-view>
</template>
<script setup lang="ts">
import { CalendarView as TinyCalendarView } from '@opentiny/vue'
</script>

14
examples/sites/demos/pc/app/calendar-view/mode-combination.vue
View File

@ -1,14 +0,0 @@
<template>
<tiny-calendar-view :modes="['timeline', 'schedule']" mode="timeline"> </tiny-calendar-view>
</template>
<script>
import { CalendarView } from '@opentiny/vue'
export default {
components: {
TinyCalendarView: CalendarView
},
methods: {}
}
</script>

4
examples/sites/demos/pc/app/calendar-view/multi-select-composition-api.vue
View File

@ -11,13 +11,13 @@
</tiny-calendar-view>
</template>
<script setup lang="ts">
<script setup>
import { ref } from 'vue'
import { CalendarView as TinyCalendarView, Modal } from '@opentiny/vue'
const eventslist = ref([])
const selectedDateChange = (date) => {
Modal.message(`当前选择${JSON.stringify(date)}`)
Modal.message({ message: `当前选择${JSON.stringify(date)}`, status: 'info' })
}
</script>

13
examples/sites/demos/pc/app/calendar-view/multi-select.spec.ts Normal file
View File

@ -0,0 +1,13 @@
import { test, expect } from '@playwright/test'
test('日期多选', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('calendar-view#multi-select')
const selectDay16 = page.getByRole('listitem').filter({ hasText: '16' })
const selectDay17 = page.getByRole('listitem').filter({ hasText: '17' })
await selectDay16.click()
await selectDay17.click()
await page.waitForTimeout(100)
await expect(selectDay16.locator('.day-selected')).toBeVisible()
await expect(selectDay17.locator('.day-selected')).toBeVisible()
})

2
examples/sites/demos/pc/app/calendar-view/multi-select.vue
View File

@ -25,7 +25,7 @@ export default {
},
methods: {
selectedDateChange(date) {
Modal.message(`当前选择${JSON.stringify(date)}`)
Modal.message({ message: `当前选择${JSON.stringify(date)}`, status: 'info' })
}
}
}

10
examples/sites/demos/pc/app/calendar-view/set-working-day-composition-api.vue
View File

@ -16,13 +16,9 @@
</tiny-calendar-view>
</template>
<script setup lang="ts">
<script setup>
import { ref } from 'vue'
import {
CalendarView as TinyCalendarView,
Button as TinyButton,
Modal
} from '@opentiny/vue'
import { CalendarView as TinyCalendarView, Button as TinyButton, Modal } from '@opentiny/vue'
const workingDays = ref([])
const offDays = ref([])
@ -37,7 +33,7 @@ const map = {
const setDays = (type) => {
if (!selectedDate.value.length) {
Modal.message('请选择日期')
Modal.message({ message: '请选择日期', status: 'info' })
return
}
map[type].value.push(...selectedDate.value)

22
examples/sites/demos/pc/app/calendar-view/set-working-day.spec.ts Normal file
View File

@ -0,0 +1,22 @@
import { test, expect } from '@playwright/test'
test('设置工作日或节假日', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('calendar-view#set-working-day')
const workDay = page.getByRole('button', { name: '工作日' })
const restDay = page.getByRole('button', { name: '休息日' })
const holiDay = page.getByRole('button', { name: '节假日' })
const selectDay16 = page.getByRole('listitem').filter({ hasText: '16' })
const selectDay17 = page.getByRole('listitem').filter({ hasText: '17' })
const selectDay18 = page.getByRole('listitem').filter({ hasText: '18' })
await selectDay16.click()
await workDay.click()
await selectDay17.click()
await restDay.click()
await selectDay18.click()
await holiDay.click()
await page.waitForTimeout(200)
await expect(selectDay16).toHaveClass(/bg-blue/)
await expect(selectDay17).toHaveClass(/bg-green/)
await expect(selectDay18).toHaveClass(/bg-yellow/)
})

2
examples/sites/demos/pc/app/calendar-view/set-working-day.vue
View File

@ -35,7 +35,7 @@ export default {
methods: {
setDays(type) {
if (!this.selectedDate.length) {
Modal.message('请选择日期')
Modal.message({ message: '请选择日期', status: 'info' })
return
}
this[type].push(...this.selectedDate)

2
examples/sites/demos/pc/app/calendar-view/webdoc/calendar-view.js
View File

@ -97,7 +97,7 @@ export default {
},
{
'demoId': 'custom-day-bg-color',
'name': { 'zh-CN': '自定义日期单元格背景色', 'en-US': 'Add Schedule Event' },
'name': { 'zh-CN': '自定义单元格背景色', 'en-US': 'Add Schedule Event' },
'desc': {
'zh-CN':
'<p>自定义日期单元格背景色。</p>\n<p>目前只支持预置的颜色，可选颜色blue、green、red、yellow、purple、cyan、grey</p>\n',