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
opentiny · Sep 20, 2024 · e863c4a · e863c4a
1 parent 577d509
commit e863c4a
Show file tree

Hide file tree

Showing 23 changed files with 77 additions and 111 deletions.
diff --git a/examples/sites/demos/pc/app/grid/drag/row-drag-ctrl-composition-api.vue b/examples/sites/demos/pc/app/grid/drag/row-drag-ctrl-composition-api.vue
@@ -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>

diff --git a/examples/sites/demos/pc/app/grid/drag/row-drag-ctrl.spec.js b/examples/sites/demos/pc/app/grid/drag/row-drag-ctrl.spec.js
@@ -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)

diff --git a/examples/sites/demos/pc/app/grid/drag/row-drag-ctrl.vue b/examples/sites/demos/pc/app/grid/drag/row-drag-ctrl.vue
@@ -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>

diff --git a/examples/sites/demos/pc/app/grid/editor/mutil-render.spec.js b/examples/sites/demos/pc/app/grid/editor/mutil-render.spec.js
@@ -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()

diff --git a/examples/sites/demos/pc/app/grid/filter/simple-date-filter.spec.ts b/examples/sites/demos/pc/app/grid/filter/simple-date-filter.spec.ts
@@ -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()

diff --git a/examples/sites/demos/pc/app/grid/fixed/group-header-fixed-composition-api.vue b/examples/sites/demos/pc/app/grid/fixed/group-header-fixed-composition-api.vue
@@ -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;">

diff --git a/examples/sites/demos/pc/app/grid/fixed/group-header-fixed.vue b/examples/sites/demos/pc/app/grid/fixed/group-header-fixed.vue
@@ -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

diff --git a/examples/sites/demos/pc/app/grid/header/custom-grid-header-composition-api.vue b/examples/sites/demos/pc/app/grid/header/custom-grid-header-composition-api.vue
@@ -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>

diff --git a/examples/sites/demos/pc/app/grid/header/custom-grid-header.vue b/examples/sites/demos/pc/app/grid/header/custom-grid-header.vue
@@ -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>

diff --git a/examples/sites/demos/pc/app/grid/highlight/highlight-hover-row.spec.js b/examples/sites/demos/pc/app/grid/highlight/highlight-hover-row.spec.js
@@ -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)')
 })
diff --git a/examples/sites/demos/pc/app/grid/large-data/full-data-loading.spec.js b/examples/sites/demos/pc/app/grid/large-data/full-data-loading.spec.js
@@ -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()
 })
diff --git a/examples/sites/demos/pc/app/grid/renderer/inner-renderer-rate.spec.js b/examples/sites/demos/pc/app/grid/renderer/inner-renderer-rate.spec.js
@@ -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)')
 })
diff --git a/examples/sites/demos/pc/app/grid/renderer/inner-renderer.spec.js b/examples/sites/demos/pc/app/grid/renderer/inner-renderer.spec.js
@@ -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)')
 })
diff --git a/examples/sites/demos/pc/app/grid/size/adaptive-column-width.spec.js b/examples/sites/demos/pc/app/grid/size/adaptive-column-width.spec.js
@@ -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)
 })
diff --git a/examples/sites/demos/pc/app/grid/size/max-min-grid-height.spec.js b/examples/sites/demos/pc/app/grid/size/max-min-grid-height.spec.js
@@ -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')
 })
diff --git a/examples/sites/demos/pc/app/grid/slot/editor-slot.spec.js b/examples/sites/demos/pc/app/grid/slot/editor-slot.spec.js
@@ -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公司')

diff --git a/examples/sites/demos/pc/app/grid/tree-table/tree-grid-data-composition-api.vue b/examples/sites/demos/pc/app/grid/tree-table/tree-grid-data-composition-api.vue
@@ -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>

diff --git a/examples/sites/demos/pc/app/grid/tree-table/tree-grid-data.vue b/examples/sites/demos/pc/app/grid/tree-table/tree-grid-data.vue
@@ -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>

diff --git a/examples/sites/demos/pc/app/grid/tree-table/tree-grid-index.spec.js b/examples/sites/demos/pc/app/grid/tree-table/tree-grid-index.spec.js
@@ -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()