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

fix(grid): [grid] fix grid fixed style error when config prop border (#889) 

* fix(grid): [grid] fix grid fixed style error when config prop border

* fix(grid): [grid] fix errror E2E test

* fix(grid): [grid] fix errror E2E test

* fix(grid): [grid] fix errror E2E test
This commit is contained in:
ajaxzheng 2023-11-22 17:08:59 -08:00 committed by GitHub
parent e3cff642e3
commit 0a09ac23f7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
17 changed files with 24 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
examples/sites/demos/pc/app/grid/event/grid-scroll-event-composition-api.vue
View File

@ -10,7 +10,7 @@
</div> </div>
</template> </template>
<script setup lang="jsx"> <script setup>
import { ref } from 'vue' import { ref } from 'vue'
import { Grid as TinyGrid, GridColumn as TinyGridColumn, Modal } from '@opentiny/vue' import { Grid as TinyGrid, GridColumn as TinyGridColumn, Modal } from '@opentiny/vue'
@ -124,7 +124,7 @@ const tableData = ref([
]) ])
function ScrollEvent() { function ScrollEvent() {
Modal.message({ message: '表格滚动事件', status: 'info' }) Modal.message({ message: '提示：触发了表格滚动事件', status: 'info' })
} }
</script> </script>

4
examples/sites/demos/pc/app/grid/event/grid-scroll-event.spec.js
View File

@ -5,7 +5,5 @@ test('表格滚动事件', async ({ page }) => {
await page.goto('grid-event#event-grid-scroll-event') await page.goto('grid-event#event-grid-scroll-event')
const scrollDom = page.getByText('深圳万众科技YX公司').first() const scrollDom = page.getByText('深圳万众科技YX公司').first()
await scrollDom.scrollIntoViewIfNeeded() await scrollDom.scrollIntoViewIfNeeded()
await page.waitForTimeout(20) await expect(page.getByText('提示：触发了表格滚动事件')).toBeVisible()
await expect(page.locator('.tiny-modal__box').first()).toBeVisible()
}) })

4
examples/sites/demos/pc/app/grid/event/grid-scroll-event.vue
View File

@ -10,7 +10,7 @@
</div> </div>
</template> </template>
<script lang="jsx"> <script>
import { Grid, GridColumn, Modal } from '@opentiny/vue' import { Grid, GridColumn, Modal } from '@opentiny/vue'
export default { export default {
@ -132,7 +132,7 @@ export default {
}, },
methods: { methods: {
ScrollEvent() { ScrollEvent() {
Modal.message({ message: '表格滚动事件', status: 'info' }) Modal.message({ message: '提示：触发了表格滚动事件', status: 'info' })
} }
} }
} }

2
examples/sites/demos/pc/app/grid/fixed/left-fixed-composition-api.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<tiny-grid :data="tableData"> <tiny-grid border :data="tableData">
<tiny-grid-column type="index" width="60" fixed="left"></tiny-grid-column> <tiny-grid-column type="index" width="60" fixed="left"></tiny-grid-column>
<tiny-grid-column type="selection" width="60" fixed="left"></tiny-grid-column> <tiny-grid-column type="selection" width="60" fixed="left"></tiny-grid-column>
<tiny-grid-column field="name" title="公司名称" width="500"></tiny-grid-column> <tiny-grid-column field="name" title="公司名称" width="500"></tiny-grid-column>

4
examples/sites/demos/pc/app/grid/fixed/left-fixed.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<tiny-grid :data="tableData"> <tiny-grid border :data="tableData">
<tiny-grid-column type="index" width="60" fixed="left"></tiny-grid-column> <tiny-grid-column type="index" width="60" fixed="left"></tiny-grid-column>
<tiny-grid-column type="selection" width="60" fixed="left"></tiny-grid-column> <tiny-grid-column type="selection" width="60" fixed="left"></tiny-grid-column>
<tiny-grid-column field="name" title="公司名称" width="500"></tiny-grid-column> <tiny-grid-column field="name" title="公司名称" width="500"></tiny-grid-column>
@ -9,7 +9,7 @@
</tiny-grid> </tiny-grid>
</template> </template>
<script lang="jsx"> <script>
import { Grid, GridColumn } from '@opentiny/vue' import { Grid, GridColumn } from '@opentiny/vue'
export default { export default {

4
examples/sites/demos/pc/app/grid/fixed/right-fixed-composition-api.vue
View File

@ -5,11 +5,11 @@
<tiny-grid-column field="name" title="公司名称" width="500"></tiny-grid-column> <tiny-grid-column field="name" title="公司名称" width="500"></tiny-grid-column>
<tiny-grid-column field="employees" title="员工数" width="500"></tiny-grid-column> <tiny-grid-column field="employees" title="员工数" width="500"></tiny-grid-column>
<tiny-grid-column field="createdDate" title="创建日期" width="500"></tiny-grid-column> <tiny-grid-column field="createdDate" title="创建日期" width="500"></tiny-grid-column>
<tiny-grid-column field="city" title="城市" width="200" fixed="right"></tiny-grid-column> <tiny-grid-column field="city" title="城市右冻结" width="200" fixed="right"></tiny-grid-column>
</tiny-grid> </tiny-grid>
</template> </template>
<script setup lang="jsx"> <script setup>
import { ref } from 'vue' import { ref } from 'vue'
import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue' import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'

3
examples/sites/demos/pc/app/grid/fixed/right-fixed.spec.js
View File

@ -3,5 +3,6 @@ import { test, expect } from '@playwright/test'
test('右冻结', async ({ page }) => { test('右冻结', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull()) page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('grid-fixed#fixed-right-fixed') await page.goto('grid-fixed#fixed-right-fixed')
await expect(page.getByRole('cell', { name: '城市' })).toHaveCSS('right', '4px') await page.waitForTimeout(400)
await expect(page.getByRole('cell', { name: '城市右冻结' })).toHaveClass(/fixed-right-first__column/)
}) })

4
examples/sites/demos/pc/app/grid/fixed/right-fixed.vue
View File

@ -5,11 +5,11 @@
<tiny-grid-column field="name" title="公司名称" width="500"></tiny-grid-column> <tiny-grid-column field="name" title="公司名称" width="500"></tiny-grid-column>
<tiny-grid-column field="employees" title="员工数" width="500"></tiny-grid-column> <tiny-grid-column field="employees" title="员工数" width="500"></tiny-grid-column>
<tiny-grid-column field="createdDate" title="创建日期" width="500"></tiny-grid-column> <tiny-grid-column field="createdDate" title="创建日期" width="500"></tiny-grid-column>
<tiny-grid-column field="city" title="城市" width="200" fixed="right"></tiny-grid-column> <tiny-grid-column field="city" title="城市右冻结" width="200" fixed="right"></tiny-grid-column>
</tiny-grid> </tiny-grid>
</template> </template>
<script lang="jsx"> <script>
import { Grid, GridColumn } from '@opentiny/vue' import { Grid, GridColumn } from '@opentiny/vue'
export default { export default {

6
examples/sites/demos/pc/app/grid/mouse-keyboard/keyboard-navigation.spec.js
View File

@ -15,11 +15,7 @@ test('键盘导航测试', async ({ page }) => {
.getByRole('textbox') .getByRole('textbox')
.fill('WWWW科收缩技YX公司') .fill('WWWW科收缩技YX公司')
await page await page.getByRole('cell', { name: '公司简介' }).click()
.getByText(
'按键说明 Arrow Up ↑：移动到当前活动单元格上面的单元格 Arrow Down ↓：移动到当前活动单元格下面的单元格 Arrow Left ←：移动到当'
)
.click()
await expect(page.getByRole('cell', { name: 'WWWW科收缩技YX公司' })).toBeVisible() await expect(page.getByRole('cell', { name: 'WWWW科收缩技YX公司' })).toBeVisible()
}) })

2
examples/sites/demos/pc/app/grid/pager/inner-default-pager.spec.js
View File

@ -1,6 +1,6 @@
import { test, expect } from '@playwright/test' import { test, expect } from '@playwright/test'
test('test', async ({ page }) => { test('使用默认分页组件', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull()) page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('grid-pager#pager-inner-default-pager') await page.goto('grid-pager#pager-inner-default-pager')
await page.getByRole('listitem').filter({ hasText: '2' }).click() await page.getByRole('listitem').filter({ hasText: '2' }).click()

2
examples/sites/demos/pc/app/grid/pager/inner-pager.spec.js
View File

@ -1,6 +1,6 @@
import { test, expect } from '@playwright/test' import { test, expect } from '@playwright/test'
test('test', async ({ page }) => { test('使用第三方分页组件', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull()) page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('grid-pager#pager-inner-pager') await page.goto('grid-pager#pager-inner-pager')
await page.getByRole('listitem').filter({ hasText: '2' }).click() await page.getByRole('listitem').filter({ hasText: '2' }).click()

2
examples/sites/demos/pc/app/grid/sort/sort-composition-api.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div> <div>
<tiny-button @click="click">sort</tiny-button> <tiny-button @click="click">手动排序sort</tiny-button>
<tiny-grid <tiny-grid
:data="tableData" :data="tableData"
ref="gridRef" ref="gridRef"

2
examples/sites/demos/pc/app/grid/sort/sort.spec.js
View File

@ -3,6 +3,6 @@ import { test, expect } from '@playwright/test'
test('手动排序', async ({ page }) => { test('手动排序', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull()) page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('grid-sort#sort-sort') await page.goto('grid-sort#sort-sort')
await page.getByRole('button', { name: 'sort' }).click() await page.getByRole('button', { name: '手动排序sort' }).click()
await expect(page.locator('.tiny-grid-body__row').first()).toContainText('300') await expect(page.locator('.tiny-grid-body__row').first()).toContainText('300')
}) })

2
examples/sites/demos/pc/app/grid/sort/sort.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div> <div>
<tiny-button @click="click">sort</tiny-button> <tiny-button @click="click">手动排序sort</tiny-button>
<tiny-grid <tiny-grid
:data="tableData" :data="tableData"
ref="grid" ref="grid"

3
examples/sites/demos/pc/app/grid/validation/bubbling.spec.js
View File

@ -19,7 +19,8 @@ test('校验提示跟随单元格移动', async ({ page }) => {
.fill('x') .fill('x')
const { y: top } = await page.getByRole('tooltip', { name: '区域格式不正确' }).boundingBox() const { y: top } = await page.getByRole('tooltip', { name: '区域格式不正确' }).boundingBox()
await page.mouse.wheel(0, 100) const scrollDom = page.getByRole('cell', { name: 'YHN科技有限公司' })
await scrollDom.scrollIntoViewIfNeeded()
const { y: topLater } = await page.getByRole('tooltip', { name: '区域格式不正确' }).boundingBox() const { y: topLater } = await page.getByRole('tooltip', { name: '区域格式不正确' }).boundingBox()
await expect(top).toBeGreaterThan(topLater) await expect(top).toBeGreaterThan(topLater)
}) })

2
packages/theme-saas/src/grid/table.less
View File

@ -165,7 +165,7 @@
// 冻结列，采用sticky布局代替多表格渲染，至少少渲染一半的dom元素 // 冻结列，采用sticky布局代替多表格渲染，至少少渲染一半的dom元素
.fixed__column { .fixed__column {
position: sticky !important; position: sticky !important;
z-index: 2; z-index: 1;
@apply bg-color-bg-1; @apply bg-color-bg-1;
&.fixed-left-last__column:after { &.fixed-left-last__column:after {

2
packages/theme/src/grid/table.less
View File

@ -170,7 +170,7 @@
// 冻结列，采用sticky布局代替多表格渲染，至少少渲染一半的dom元素 // 冻结列，采用sticky布局代替多表格渲染，至少少渲染一半的dom元素
.fixed__column { .fixed__column {
position: sticky !important; position: sticky !important;
z-index: 2; z-index: 1;
background-color: var(--ti-grid-light-color); background-color: var(--ti-grid-light-color);
&.fixed-left-last__column:after { &.fixed-left-last__column:after {