diff --git a/examples/sites/demos/apis/grid.js b/examples/sites/demos/apis/grid.js index edbbadba08..f0bbb2e767 100644 --- a/examples/sites/demos/apis/grid.js +++ b/examples/sites/demos/apis/grid.js @@ -3563,9 +3563,11 @@ interface IEditConfig { showStatus?: boolean // 自定义编辑规则,返回true可以编辑返回false则禁止编辑 activeMethod?: ({row: IRow, column: IColumnConfig})=> boolean - // (3.19新增)当mode为'row'时,行编辑激活状态下默认会忽略activeMethod,配置为true使其生效 + // (3.19.0新增)当mode为'row'时,行编辑激活状态下默认会忽略activeMethod,配置为true使其生效 activeStrictly?: boolean -} + //(3.25.0新增)自定义编辑态的退出逻辑。当返回true时,不会退出编辑态。 + blurOutside?: ({ cell, event, $table }: { cell: HTMLElement, event: Event, $table: Component }) => boolean +} ` }, { diff --git a/examples/sites/demos/pc/app/grid/edit/scrollbar-not-blur-composition-api.vue b/examples/sites/demos/pc/app/grid/edit/scrollbar-not-blur-composition-api.vue new file mode 100644 index 0000000000..11128d56b8 --- /dev/null +++ b/examples/sites/demos/pc/app/grid/edit/scrollbar-not-blur-composition-api.vue @@ -0,0 +1,119 @@ + + + + + diff --git a/examples/sites/demos/pc/app/grid/edit/scrollbar-not-blur.spec.ts b/examples/sites/demos/pc/app/grid/edit/scrollbar-not-blur.spec.ts new file mode 100644 index 0000000000..575c806aae --- /dev/null +++ b/examples/sites/demos/pc/app/grid/edit/scrollbar-not-blur.spec.ts @@ -0,0 +1,28 @@ +import { test, expect } from '@playwright/test' + +test('行编辑滚动不失焦', async ({ page }) => { + page.on('pageerror', (exception) => expect(exception).toBeNull()) + + await page.goto('grid-edit#scrollbar-not-blur') + page.setViewportSize({ + width: 1400, + height: 1200 + }) + + const demo = page.locator('#scrollbar-not-blur') + // 单元格编辑 + await demo.getByRole('cell', { name: 'GFD 科技 YX 公司' }).first().click() + await expect(demo.locator('.tiny-grid-default-input').first()).toBeVisible() + + // 点击滚动条 + const bodyWrapper = demo.locator('.tiny-grid__body-wrapper') + const { x, y, height } = await bodyWrapper.boundingBox() + await page.mouse.move(x + 10, y + height - 3) + await page.waitForTimeout(200) + await page.mouse.down() + await page.waitForTimeout(200) + await page.mouse.move(x + 200, y + height - 3) + await page.waitForTimeout(200) + await page.mouse.up() + await expect(demo.locator('.tiny-grid-default-input').first()).toBeVisible() +}) diff --git a/examples/sites/demos/pc/app/grid/edit/scrollbar-not-blur.vue b/examples/sites/demos/pc/app/grid/edit/scrollbar-not-blur.vue new file mode 100644 index 0000000000..a0c5e21c7a --- /dev/null +++ b/examples/sites/demos/pc/app/grid/edit/scrollbar-not-blur.vue @@ -0,0 +1,129 @@ + + + + + diff --git a/examples/sites/demos/pc/app/grid/webdoc/grid-edit.js b/examples/sites/demos/pc/app/grid/webdoc/grid-edit.js index 09207e60a2..45b5ac4676 100644 --- a/examples/sites/demos/pc/app/grid/webdoc/grid-edit.js +++ b/examples/sites/demos/pc/app/grid/webdoc/grid-edit.js @@ -100,6 +100,18 @@ export default { '

Table attribute settingedit-configEnable the editing mode, and then set trigger in the attribute object to modify the triggering mode. The options are as follows: click trigger (click), double-click trigger (dblclick), and manual trigger (manual). The default value is click trigger.

\n' }, codeFiles: ['edit/trigger-mode-for-editing.vue'] + }, + { + demoId: 'scrollbar-not-blur', + name: { 'zh-CN': '行编辑滚动不失焦', 'en-US': 'Scroll not blur' }, + desc: { + 'zh-CN': ` +

配置 edit-configblurOutside自定义编辑态的退出逻辑。

+ `, + 'en-US': + '

Configure blurOutside of edit-config to customize the exit logic of the editing state.

\n' + }, + codeFiles: ['edit/scrollbar-not-blur.vue'] } ], apis: [{ name: 'grid-edit', 'type': 'component', 'props': [], 'events': [], 'slots': [] }] diff --git a/packages/theme-saas/src/grid/table.less b/packages/theme-saas/src/grid/table.less index 1fa33d9dda..e00a94778a 100644 --- a/packages/theme-saas/src/grid/table.less +++ b/packages/theme-saas/src/grid/table.less @@ -878,7 +878,6 @@ @apply w-full; height: 100px; @apply m-0; - background: url(../images/grid-nodata.svg) no-repeat center center; @apply flex-shrink-0; } diff --git a/packages/vue/src/grid/src/body/src/body.tsx b/packages/vue/src/grid/src/body/src/body.tsx index 8eff55dc31..be46325b3d 100644 --- a/packages/vue/src/grid/src/body/src/body.tsx +++ b/packages/vue/src/grid/src/body/src/body.tsx @@ -421,7 +421,7 @@ function renderRowExpanded(args) { function renderRowAfter({ $table, _vm, row, rowIndex, rows, id, used }) { typeof $table.renderRowAfter === 'function' && - $table.renderRowAfter.call($table, { rows, row, data: _vm.tableData, rowIndex, renderColumn, id, used }, h) + $table.renderRowAfter({ rows, row, data: _vm.tableData, rowIndex, renderColumn, id, used }, h) } function renderRow(args) { @@ -829,7 +829,7 @@ export default defineComponent({ class={{ 'tiny-grid__body-wrapper body__wrapper': true, 'is__scrollload': scrollLoad, - 'no-data': isNoData + 'no-data': isNoData && $table.isShapeTable }} style={{ height: bodyWrapperHeight ? `${bodyWrapperHeight}px` : undefined, @@ -868,7 +868,7 @@ export default defineComponent({ isNoData ? (
{$slots.empty - ? $slots.empty.call(_vm, { $table }, h) + ? $slots.empty({ $table }, h) : $table.renderEmpty ? [$table.renderEmpty(h, $table)] : [ diff --git a/packages/vue/src/grid/src/cell/src/cell.ts b/packages/vue/src/grid/src/cell/src/cell.ts index ab10749d61..a4ecd33f6d 100644 --- a/packages/vue/src/grid/src/cell/src/cell.ts +++ b/packages/vue/src/grid/src/cell/src/cell.ts @@ -402,7 +402,7 @@ export const Cell = { const isTreeOrderedFalse = treeConfig && !treeOrdered let indexValue = startIndex + seq // tree-config为false的情况下,序号为1.1这种形式 - if (isTreeOrderedFalse && level) { + if (isTreeOrderedFalse) { indexValue = row[temporaryIndex] } diff --git a/packages/vue/src/grid/src/mobile-first/column-link.vue b/packages/vue/src/grid/src/mobile-first/column-link.vue index ad56aa7265..04918108aa 100644 --- a/packages/vue/src/grid/src/mobile-first/column-link.vue +++ b/packages/vue/src/grid/src/mobile-first/column-link.vue @@ -38,6 +38,9 @@ export default defineComponent({ vnode = h( 'div', { + attrs: { + title: visibleButtons[0].name + }, 'class': `w-5 h-5 sm:w-4 sm:w-4 ${ isDisabled(visibleButtons[0]) ? 'fill-color-icon-disabled' : 'fill-color-icon-secondary' } ` @@ -70,7 +73,7 @@ export default defineComponent({ DropdownItem, { class: { [disabledClass || '']: isDisabled(buttonConfig) }, - props: { itemData: buttonConfig.name, disabled: isDisabled(buttonConfig) } + props: { itemData: buttonConfig.name, disabled: isDisabled(buttonConfig), icon: buttonConfig.icon } }, buttonConfig.name ) diff --git a/packages/vue/src/grid/src/mobile-first/index.vue b/packages/vue/src/grid/src/mobile-first/index.vue index 50d0b081c3..25a221b8e1 100644 --- a/packages/vue/src/grid/src/mobile-first/index.vue +++ b/packages/vue/src/grid/src/mobile-first/index.vue @@ -8,13 +8,13 @@ @scroll="scrollEvent" > @@ -171,6 +171,10 @@ export default defineComponent({ const { tableData } = this as any const isException = tableData.length === 0 return isException + }, + isLoading() { + const { config } = this as any + return config?.tableVm?.$grid?.loading || false } }, watch: { diff --git a/packages/vue/src/grid/src/table/src/methods.ts b/packages/vue/src/grid/src/table/src/methods.ts index a79a73a8b7..643dcc24e9 100644 --- a/packages/vue/src/grid/src/table/src/methods.ts +++ b/packages/vue/src/grid/src/table/src/methods.ts @@ -1133,6 +1133,10 @@ const Methods = { return Boolean(editor.blurOutside({ cell: args.cell, event })) } + if (typeof editConfig.blurOutside === 'function') { + return Boolean(editConfig.blurOutside({ cell: args.cell, event, $table: this })) + } + const blurClassConfig = editor.blurClass || editConfig.blurClass if (blurClassConfig) {