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

feat(grid): [grid] grid custom panel adapt to x-design (#2152) 

* feat(grid): [grid] grid custom panel adapt to x-design

* test(grid): [grid] grid test case fix
This commit is contained in:
gimmyhehe 2024-09-20 09:30:18 +08:00 committed by GitHub
parent 577d5099e1
commit e863c4aab2
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
23 changed files with 77 additions and 111 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
examples/sites/demos/pc/app/grid/drag/row-drag-ctrl-composition-api.vue
View File

@ -1,7 +1,7 @@
<template>
<tiny-grid :row-class-name="rowClassName" :data="tableData" row-key :drop-config="dropConfig">
<tiny-grid-column field="id" width="60"></tiny-grid-column>
<tiny-grid-column field="name" title="触发源" width="100">
<tiny-grid-column field="name" title="触发源" width="120">
<template #default="{ row }">
<div class="only-me-can-drag">拖拽触发源{{ row.id }}</div>
</template>

6
examples/sites/demos/pc/app/grid/drag/row-drag-ctrl.spec.js
View File

@ -4,6 +4,10 @@ test('拖拽控制', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('grid-drag#drag-row-drag-ctrl')
const diabledDragDom = page.getByRole('cell', { name: '拖拽触发源1' })
await page.setViewportSize({
width: 1600,
height: 1200
})
// 获取拖拽元素位置
const { x, y } = await diabledDragDom.boundingBox()
// 验证不可拖拽
@ -23,7 +27,7 @@ test('拖拽控制', async ({ page }) => {
await draggerDom.hover()
await page.mouse.down()
await page.waitForTimeout(200)
await page.mouse.move(left, top - 200)
await page.mouse.move(left, top - 240)
await page.waitForTimeout(200)
await page.mouse.up()
await page.waitForTimeout(200)

2
examples/sites/demos/pc/app/grid/drag/row-drag-ctrl.vue
View File

@ -1,7 +1,7 @@
<template>
<tiny-grid :row-class-name="rowClassName" :data="tableData" row-key :drop-config="dropConfig">
<tiny-grid-column field="id" width="60"></tiny-grid-column>
<tiny-grid-column field="name" title="触发源" width="100">
<tiny-grid-column field="name" title="触发源" width="120">
<template #default="{ row }">
<div class="only-me-can-drag">拖拽触发源{{ row.id }}</div>
</template>

4
examples/sites/demos/pc/app/grid/editor/mutil-render.spec.js
View File

@ -3,6 +3,10 @@ import { test, expect } from '@playwright/test'
test('Grid-编辑器-下拉多选', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('grid-editor#editor-mutil-render')
await page.setViewportSize({
width: 1600,
height: 1200
})
await page.getByText('华中区;华南区').click()
await page.locator('.tiny-input__suffix-inner > .tiny-svg').click()
await page.locator('li').filter({ hasText: '华东区' }).click()

8
examples/sites/demos/pc/app/grid/filter/simple-date-filter.spec.ts
View File

@ -3,12 +3,16 @@ import { test, expect } from '@playwright/test'
test('简化版筛选面板-时间日期菜单', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('grid-filter#filter-simple-date-filter')
await page.setViewportSize({
width: 1600,
height: 1200
})
await page.getByRole('cell', { name: '开始时间' }).getByRole('img').click()
await page.locator('.tiny-input__suffix-inner').nth(0).click()
await page.locator('.tiny-date-editor').nth(0).click()
await page.getByRole('textbox', { name: '选择日期' }).fill('2021-12-03')
await page.getByRole('button', { name: '确定' }).nth(1).click()
await page.waitForTimeout(200)
await page.locator('.tiny-input__suffix-inner').nth(1).click()
await page.locator('.tiny-date-editor').nth(1).click()
await page.getByRole('textbox', { name: '选择日期' }).fill('2023-11-19')
await page.getByRole('button', { name: '确定' }).nth(1).click()
await page.getByRole('button', { name: '确定' }).first().click()

35
examples/sites/demos/pc/app/grid/fixed/group-header-fixed-composition-api.vue
View File

@ -14,11 +14,11 @@
<tiny-grid-column :renderer="rendererCellOperate" width="100"></tiny-grid-column>
</tiny-grid-column>
</tiny-grid-column>
<tiny-grid-column :title="renderHeaderDescription" header-align="center">
<tiny-grid-column title="描述" header-align="center">
<tiny-grid-column field="name" title="名称" show-tip sortable width="600"></tiny-grid-column>
<tiny-grid-column
field="area"
:title="renderHeaderArea"
title="分区"
:editor="{ component: 'select', options }"
sortable
width="600"
@ -27,7 +27,7 @@
<tiny-grid-column :title="renderHeaderRelation" header-align="center">
<tiny-grid-column
field="address"
:title="renderHeaderAddress"
title="地区"
:editor="{ component: 'input', autoselect: true }"
sortable
width="600"
@ -44,7 +44,7 @@
<tiny-grid-column title="右冻结分组" header-align="center" fixed="right">
<tiny-grid-column
field="address"
:title="renderHeaderAddress"
title="地区"
:editor="{ component: 'input', autoselect: true }"
sortable
width="150"
@ -165,15 +165,6 @@ const options = ref([
{ label: '华南区', value: '华南区' }
])
function renderHeaderDescription(h) {
return (
<span>
{' '}
<TinyIconAdministrator />
Description
</span>
)
}
function renderHeaderRelation(h) {
return (
<span>
@ -182,24 +173,6 @@ function renderHeaderRelation(h) {
)
}
function renderHeaderArea(h) {
return (
<span>
<TinyIconMarkOn />
Description
</span>
)
}
function renderHeaderAddress(h) {
return (
<span>
<TinyIconUser />
Description
</span>
)
}
function rendererCellOperate(h) {
return (
<div style="text-align: center; font-size: 16px;">

41
examples/sites/demos/pc/app/grid/fixed/group-header-fixed.vue
View File

@ -14,11 +14,11 @@
<tiny-grid-column :renderer="rendererCellOperate" width="100"></tiny-grid-column>
</tiny-grid-column>
</tiny-grid-column>
<tiny-grid-column :title="renderHeaderDescription" header-align="center">
<tiny-grid-column title="描述" header-align="center">
<tiny-grid-column field="name" title="名称" show-tip sortable width="600"></tiny-grid-column>
<tiny-grid-column
field="area"
:title="renderHeaderArea"
title="分区"
:editor="{ component: 'select', options }"
sortable
width="600"
@ -27,7 +27,7 @@
<tiny-grid-column :title="renderHeaderRelation" header-align="center">
<tiny-grid-column
field="address"
:title="renderHeaderAddress"
title="地区"
:editor="{ component: 'input', autoselect: true }"
sortable
width="600"
@ -44,7 +44,7 @@
<tiny-grid-column title="右冻结分组" header-align="center" fixed="right">
<tiny-grid-column
field="address"
:title="renderHeaderAddress"
title="地区"
:editor="{ component: 'input', autoselect: true }"
sortable
width="150"
@ -172,17 +172,6 @@ export default {
}
},
methods: {
renderHeaderDescription(h) {
const IconAdministrator = this.IconAdministrator
return (
<span>
{' '}
<IconAdministrator />
Description
</span>
)
},
renderHeaderRelation(h) {
const IconVersiontree = this.IconVersiontree
@ -193,28 +182,6 @@ export default {
)
},
renderHeaderArea(h) {
const IconMarkOn = this.IconMarkOn
return (
<span>
<IconMarkOn />
Description
</span>
)
},
renderHeaderAddress(h) {
const IconUser = this.IconUser
return (
<span>
<IconUser />
Description
</span>
)
},
rendererCellOperate(h) {
const IconAssociation = this.IconAssociation
const IconHelpful = this.IconHelpful

4
examples/sites/demos/pc/app/grid/header/custom-grid-header-composition-api.vue
View File

@ -120,7 +120,7 @@ function renderHeaderRelation() {
function renderHeaderArea() {
return (
<span>
<span style="order: -1">
<IconMarkOn />
Description
</span>
@ -129,7 +129,7 @@ function renderHeaderArea() {
function renderHeaderAddress() {
return (
<span>
<span style="order: -1">
<IconUser />
Description
</span>

4
examples/sites/demos/pc/app/grid/header/custom-grid-header.vue
View File

@ -132,7 +132,7 @@ export default {
const IconMarkOn = this.IconMarkOn
return (
<span>
<span style="order: -1">
<IconMarkOn />
Description
</span>
@ -143,7 +143,7 @@ export default {
const IconUser = this.IconUser
return (
<span>
<span style="order: -1">
<IconUser />
Description
</span>

2
examples/sites/demos/pc/app/grid/highlight/highlight-hover-row.spec.js
View File

@ -6,5 +6,5 @@ test('高亮悬停行', async ({ page }) => {
const tr = page.locator('.tiny-grid-body__row').first()
await tr.hover()
await page.waitForTimeout(500)
await expect(tr).toHaveCSS('background-color', 'rgb(242, 245, 252)')
await expect(tr).toHaveCSS('background-color', 'rgb(245, 245, 245)')
})

4
examples/sites/demos/pc/app/grid/large-data/full-data-loading.spec.js
View File

@ -6,11 +6,11 @@ test('全量加载', async ({ page }) => {
await page.locator('.tiny-grid__body').hover()
// 先滚动1000px
await page.mouse.wheel(0, 1000)
await expect(page.getByRole('cell', { name: '33' })).toBeVisible()
await expect(page.getByRole('cell', { name: '28' })).toBeVisible()
await page.waitForTimeout(500)
await page.locator('.tiny-grid__body').hover()
// 先滚动4000px
await page.mouse.wheel(0, 5000)
await page.waitForTimeout(200)
await expect(page.getByRole('cell', { name: '175' })).toBeVisible()
await expect(page.getByRole('cell', { name: '153' })).toBeVisible()
})

6
examples/sites/demos/pc/app/grid/renderer/inner-renderer-rate.spec.js
View File

@ -4,9 +4,9 @@ test('比率渲染器', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('grid-renderer#renderer-inner-renderer-rate')
const redCell = page.getByRole('cell', { name: '200.0000%' }).first().locator('.tiny-grid__rate-chart')
await expect(redCell).toHaveCSS('background-color', 'rgb(222, 80, 78)')
await expect(redCell).toHaveCSS('background-color', 'rgb(242, 48, 48)')
const yellowCell = page.getByRole('cell', { name: '34.4500%' }).nth(1).locator('.tiny-grid__rate-chart')
await expect(yellowCell).toHaveCSS('background-color', 'rgb(250, 152, 65)')
await expect(yellowCell).toHaveCSS('background-color', 'rgb(255, 136, 0)')
const blueCell = page.getByRole('cell', { name: '60.0500%' }).nth(1).locator('.tiny-grid__rate-chart')
await expect(blueCell).toHaveCSS('background-color', 'rgb(94, 124, 224)')
await expect(blueCell).toHaveCSS('background-color', 'rgb(25, 25, 25)')
})

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

@ -4,5 +4,5 @@ test('内置渲染器', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('grid-renderer#renderer-inner-renderer')
const cell = page.getByRole('cell', { name: '90.0%' }).locator('.tiny-grid__rate-chart')
await expect(cell).toHaveCSS('background-color', 'rgb(80, 212, 171)')
await expect(cell).toHaveCSS('background-color', 'rgb(92, 179, 0)')
})

4
examples/sites/demos/pc/app/grid/size/adaptive-column-width.spec.js
View File

@ -5,9 +5,9 @@ test('列宽自适应撑开', async ({ page }) => {
await page.goto('grid-size#size-adaptive-column-width')
const th = page.getByRole('cell', { name: '公司简介' }).nth(0)
const { width } = await th.boundingBox()
await expect(width).toBeGreaterThan(42)
await expect(width).toBeGreaterThan(72)
const th1 = page.getByRole('cell', { name: '公司简介' }).nth(1)
const { width: width1 } = await th1.boundingBox()
await expect(width1).toBeLessThanOrEqual(42)
await expect(width1).toBeLessThanOrEqual(72)
})

4
examples/sites/demos/pc/app/grid/size/max-min-grid-height.spec.js
View File

@ -3,6 +3,6 @@ import { test, expect } from '@playwright/test'
test('设置 maxHeight 最大高度', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('grid-size#size-max-min-grid-height')
await expect(page.locator('.tiny-grid__body-wrapper').nth(0)).toHaveCSS('max-height', '165px')
await expect(page.locator('.tiny-grid__body-wrapper').nth(1)).toHaveCSS('min-height', '265px')
await expect(page.locator('.tiny-grid__body-wrapper').nth(0)).toHaveCSS('max-height', '160px')
await expect(page.locator('.tiny-grid__body-wrapper').nth(1)).toHaveCSS('min-height', '260px')
})

4
examples/sites/demos/pc/app/grid/slot/editor-slot.spec.js
View File

@ -3,6 +3,10 @@ import { test, expect } from '@playwright/test'
test('编辑器插槽', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('grid-slot#slot-editor-slot')
await page.setViewportSize({
width: 1600,
height: 1200
})
await page.getByText('WWWW科技YX公司').click()
await page.getByRole('textbox', { name: '请输入内容', exact: true }).click()
await page.getByRole('textbox', { name: '请输入内容', exact: true }).fill('WWWWsdfd科技YX公司')

3
examples/sites/demos/pc/app/grid/tree-table/tree-grid-data-composition-api.vue
View File

@ -1,7 +1,8 @@
<template>
<div>
<tiny-grid :data="tableData" :tree-config="{ children: 'children' }">
<tiny-grid-column field="name" title="公司名称" tree-node></tiny-grid-column>
<tiny-grid-column field="index" width="60" tree-node></tiny-grid-column>
<tiny-grid-column field="name" title="公司名称"></tiny-grid-column>
<tiny-grid-column field="area" title="区域"></tiny-grid-column>
<tiny-grid-column field="employees" title="员工数"></tiny-grid-column>
</tiny-grid>

3
examples/sites/demos/pc/app/grid/tree-table/tree-grid-data.vue
View File

@ -1,7 +1,8 @@
<template>
<div>
<tiny-grid :data="tableData" :tree-config="{ children: 'children' }">
<tiny-grid-column field="name" title="公司名称" tree-node></tiny-grid-column>
<tiny-grid-column field="index" width="60" tree-node></tiny-grid-column>
<tiny-grid-column field="name" title="公司名称"></tiny-grid-column>
<tiny-grid-column field="area" title="区域"></tiny-grid-column>
<tiny-grid-column field="employees" title="员工数"></tiny-grid-column>
</tiny-grid>

12
examples/sites/demos/pc/app/grid/tree-table/tree-grid-index.spec.js
View File

@ -3,21 +3,17 @@ import { test, expect } from '@playwright/test'
test('展开行序号列配置', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('grid-tree-table#tree-table-tree-grid-index')
await page
.getByRole('row', { name: '1 GFD科技YX公司 华东区 800' })
.locator('.tiny-grid-tree__node-btn')
.first()
.click()
await page.getByRole('row', { name: '1 GFD科技YX公司 华东区 800' }).locator('.tiny-grid-tree-wrapper').first().click()
await page
.getByRole('row', { name: '2 WWWW科技YX公司 华南区 500' })
.locator('.tiny-grid-tree__node-btn')
.locator('.tiny-grid-tree-wrapper')
.first()
.click()
await page.getByRole('row', { name: '3 TGBYX公司 华南区 360' }).locator('.tiny-grid-tree__node-btn').first().click()
await page.getByRole('row', { name: '3 TGBYX公司 华南区 360' }).locator('.tiny-grid-tree-wrapper').first().click()
await page.getByText('3.1').first().click()
await page
.getByRole('row', { name: '4 康康物业YX公司 华南区 400' })
.locator('.tiny-grid-tree__node-btn')
.locator('.tiny-grid-tree-wrapper')
.first()
.click()

12
packages/theme/src/grid/custom.less
View File

@ -20,6 +20,10 @@
.@{grid-custom-prefix-cls} {
width: 100%;
.tiny-modal__header {
margin-bottom: 16px;
}
& &__tabs {
.@{css-prefix}tabs__content {
margin: 0;
@ -35,7 +39,7 @@
}
.@{grid-custom-prefix-cls}__setting {
border-bottom: 1px solid var(--ti-grid-border-color);
border-bottom: 1px solid transparent;
padding: 12px 0 24px;
.setting-item {
@ -44,7 +48,7 @@
overflow: hidden;
position: relative;
display: flex;
align-items: flex-start;
align-items: center;
justify-content: space-between;
.setting-icon {
@ -122,9 +126,9 @@
}
& &__footer {
margin: 12px;
margin-bottom: 32px;
text-align: center;
display: flex;
justify-content: center;
justify-content: flex-end;
}
}

3
packages/theme/src/grid/radio.less
View File

@ -37,8 +37,7 @@
& + .@{grid-radio-prefix-cls}__icon {
position: relative;
display: inline-block;
width: 1em;
height: 1em;
line-height: 1;
vertical-align: middle;
border-radius: 50%;
font-size: var(--ti-common-font-size-2);

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

@ -464,6 +464,14 @@
.CellEllipsis();
}
&.col__selection {
.tiny-grid-cell {
&:has(> .@{grid-prefix-cls}-checkbox) {
line-height: 1;
}
}
}
border-bottom: 1px solid var(--ti-grid-body-td-border-color);
}
@ -1113,13 +1121,12 @@
height: 72px;
.@{grid-prefix-cls}-cell__valid {
--td-padding-x: 8px;
position: absolute;
top: auto;
right: auto;
bottom: 1px;
left: var(--td-padding-x);
width: calc(100% - 2 * var(--td-padding-x));
left: var(--ti-grid-td-padding-horizontal);
width: calc(100% - 2 * var(--ti-grid-td-padding-horizontal));
height: 16px;
line-height: 1;
transform: translate(0, 0);
@ -1128,10 +1135,12 @@
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #f5222d;
color: var(--ti-grid-error-color);
.@{grid-prefix-cls}-cell__valid-icon {
margin-right: 8px;
fill: var(--ti-grid-error-color);
font-size: 16px;
}
.@{grid-prefix-cls}-cell__valid-msg {

6
packages/vue/src/grid-toolbar/src/custom.vue
View File

@ -136,9 +136,6 @@
class="tiny-grid-custom__footer"
:dir="TinyTheme === 'saas' ? 'rtl' : 'ltr'"
>
<tiny-button type="primary" @click="saveSettings" :disabled="saveDisabled">
{{ t('ui.grid.individuation.saveBtn') }}
</tiny-button>
<tiny-button @click="handleReset">
{{ t('ui.grid.individuation.resetBtn') }}
</tiny-button>
@ -148,6 +145,9 @@
<tiny-button @click="cancelSettings">
{{ t('ui.grid.individuation.cancelBtn') }}
</tiny-button>
<tiny-button type="primary" @click="saveSettings" :disabled="saveDisabled">
{{ t('ui.grid.individuation.saveBtn') }}
</tiny-button>
</div>
</div>
</template>