From 9baa6a7c21ee2471e54f70581248e84841766550 Mon Sep 17 00:00:00 2001
From: Gimmy <975402925@qq.com>
Date: Tue, 17 Jun 2025 20:55:09 +0800
Subject: [PATCH 1/5] feat(grid): edit-config add blurOutside

---
 examples/sites/demos/apis/grid.js             |   6 +-
 .../scrollbar-not-blur-composition-api.vue    | 119 ++++++++++++++++
 .../app/grid/edit/scrollbar-not-blur.spec.ts  |  28 ++++
 .../pc/app/grid/edit/scrollbar-not-blur.vue   | 129 ++++++++++++++++++
 .../demos/pc/app/grid/webdoc/grid-edit.js     |  12 ++
 .../vue/src/grid/src/table/src/methods.ts     |   4 +
 6 files changed, 296 insertions(+), 2 deletions(-)
 create mode 100644 examples/sites/demos/pc/app/grid/edit/scrollbar-not-blur-composition-api.vue
 create mode 100644 examples/sites/demos/pc/app/grid/edit/scrollbar-not-blur.spec.ts
 create mode 100644 examples/sites/demos/pc/app/grid/edit/scrollbar-not-blur.vue

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 @@
+<template>
+  <div>
+    <tiny-grid
+      ref="grid"
+      :data="tableData"
+      seq-serial
+      :edit-config="{ trigger: 'click', mode: 'row', showStatus: true, blurOutside }"
+    >
+      <tiny-grid-column type="index" width="60"></tiny-grid-column>
+      <tiny-grid-column
+        field="name"
+        title="名称"
+        width="500"
+        :show-icon="false"
+        :editor="{ component: 'input', autoselect: true }"
+      ></tiny-grid-column>
+      <tiny-grid-column
+        field="area"
+        title="区域"
+        width="500"
+        :show-icon="false"
+        :editor="{ component: 'select', options }"
+      ></tiny-grid-column>
+      <tiny-grid-column
+        field="address"
+        title="地址"
+        width="500"
+        :show-icon="false"
+        :editor="{ component: 'input', autoselect: true }"
+      ></tiny-grid-column>
+      <tiny-grid-column
+        field="introduction"
+        title="公司简介"
+        width="500"
+        :show-icon="false"
+        :editor="{ component: 'input', autoselect: true }"
+        show-overflow="ellipsis"
+      ></tiny-grid-column>
+    </tiny-grid>
+  </div>
+</template>
+
+<script setup>
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
+import { ref } from 'vue'
+
+const options = ref([
+  { label: '华北区', value: '华北区' },
+  { label: '华东区', value: '华东区' },
+  { label: '华南区', value: '华南区' }
+])
+const tableData = ref([
+  {
+    id: '1',
+    name: 'GFD 科技 YX 公司',
+    area: '华东区',
+    address: '福州',
+    introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。'
+  },
+  {
+    id: '2',
+    name: 'WWWW 科技 YX 公司',
+    area: '华南区',
+    address: '深圳福田区',
+    introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。'
+  },
+  {
+    id: '3',
+    name: 'RFV 有限责任公司',
+    area: '华南区',
+    address: '中山市',
+    introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。'
+  }
+])
+
+function blurOutside({ cell, event, $table }) {
+  const { getEventTargetNode, $el } = $table
+  const isClickRow = getEventTargetNode(event, $el, 'tiny-grid-body__row').flag
+  return isClickRow || isScrollBar(event, $el)
+}
+function isScrollBar(event, tableElm) {
+  const element = event.target
+
+  // 判断是否表格body
+  if (element !== tableElm.querySelector('.tiny-grid__body-wrapper')) {
+    return false
+  }
+
+  const rect = element.getBoundingClientRect()
+  const clickX = event.clientX
+  const clickY = event.clientY
+  // 检查垂直滚动条
+  if (element.scrollHeight > element.clientHeight) {
+    const scrollbarWidth = element.offsetWidth - element.clientWidth
+    if (clickX >= rect.right - scrollbarWidth && clickX <= rect.right) {
+      return true // 点击了垂直滚动条
+    }
+  }
+
+  // 检查水平滚动条
+  if (element.scrollWidth > element.clientWidth) {
+    const scrollbarHeight = element.offsetHeight - element.clientHeight
+    if (clickY >= rect.bottom - scrollbarHeight && clickY <= rect.bottom) {
+      return true // 点击了水平滚动条
+    }
+  }
+
+  return false
+}
+</script>
+
+<style scoped>
+.title {
+  font-size: 16px;
+  padding: 15px;
+  font-weight: bolder;
+  color: var(--tv-color-text, #191919);
+}
+</style>
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 @@
+<template>
+  <div>
+    <tiny-grid
+      ref="grid"
+      :data="tableData"
+      seq-serial
+      :edit-config="{ trigger: 'click', mode: 'row', showStatus: true, blurOutside }"
+    >
+      <tiny-grid-column type="index" width="60"></tiny-grid-column>
+      <tiny-grid-column
+        field="name"
+        title="名称"
+        width="500"
+        :show-icon="false"
+        :editor="{ component: 'input', autoselect: true }"
+      ></tiny-grid-column>
+      <tiny-grid-column
+        field="area"
+        title="区域"
+        width="500"
+        :show-icon="false"
+        :editor="{ component: 'select', options }"
+      ></tiny-grid-column>
+      <tiny-grid-column
+        field="address"
+        title="地址"
+        width="500"
+        :show-icon="false"
+        :editor="{ component: 'input', autoselect: true }"
+      ></tiny-grid-column>
+      <tiny-grid-column
+        field="introduction"
+        title="公司简介"
+        width="500"
+        :show-icon="false"
+        :editor="{ component: 'input', autoselect: true }"
+        show-overflow="ellipsis"
+      ></tiny-grid-column>
+    </tiny-grid>
+  </div>
+</template>
+
+<script>
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyGrid,
+    TinyGridColumn
+  },
+  data() {
+    return {
+      options: [
+        { label: '华北区', value: '华北区' },
+        { label: '华东区', value: '华东区' },
+        { label: '华南区', value: '华南区' }
+      ],
+      tableData: [
+        {
+          id: '1',
+          name: 'GFD 科技 YX 公司',
+          area: '华东区',
+          address: '福州',
+          introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。'
+        },
+        {
+          id: '2',
+          name: 'WWWW 科技 YX 公司',
+          area: '华南区',
+          address: '深圳福田区',
+          introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。'
+        },
+        {
+          id: '3',
+          name: 'RFV 有限责任公司',
+          area: '华南区',
+          address: '中山市',
+          introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。'
+        }
+      ]
+    }
+  },
+  methods: {
+    blurOutside({ cell, event, $table }) {
+      const { getEventTargetNode, $el } = $table
+      const isClickRow = getEventTargetNode(event, $el, 'tiny-grid-body__row').flag
+      return isClickRow || this.isScrollBar(event, $el)
+    },
+    isScrollBar(event, tableElm) {
+      const element = event.target
+
+      // 判断是否表格body
+      if (element !== tableElm.querySelector('.tiny-grid__body-wrapper')) {
+        return false
+      }
+
+      const rect = element.getBoundingClientRect()
+      const clickX = event.clientX
+      const clickY = event.clientY
+      // 检查垂直滚动条
+      if (element.scrollHeight > element.clientHeight) {
+        const scrollbarWidth = element.offsetWidth - element.clientWidth
+        if (clickX >= rect.right - scrollbarWidth && clickX <= rect.right) {
+          return true // 点击了垂直滚动条
+        }
+      }
+
+      // 检查水平滚动条
+      if (element.scrollWidth > element.clientWidth) {
+        const scrollbarHeight = element.offsetHeight - element.clientHeight
+        if (clickY >= rect.bottom - scrollbarHeight && clickY <= rect.bottom) {
+          return true // 点击了水平滚动条
+        }
+      }
+
+      return false
+    }
+  }
+}
+</script>
+
+<style scoped>
+.title {
+  font-size: 16px;
+  padding: 15px;
+  font-weight: bolder;
+  color: var(--tv-color-text, #191919);
+}
+</style>
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 {
           '<p>Table attribute setting<code>edit-config</code>Enable the editing mode, and then set <code>trigger</code> in the attribute object to modify the triggering mode. The options are as follows: <code>click trigger (click), double-click trigger (dblclick), and manual trigger (manual)</code>. The default value is <code>click trigger</code>. </p>\n'
       },
       codeFiles: ['edit/trigger-mode-for-editing.vue']
+    },
+    {
+      demoId: 'scrollbar-not-blur',
+      name: { 'zh-CN': '行编辑滚动不失焦', 'en-US': 'Scroll not blur' },
+      desc: {
+        'zh-CN': `
+          <p>配置 <code>edit-config</code> 的<code>blurOutside</code>自定义编辑态的退出逻辑。</p>
+          `,
+        'en-US':
+          '<p>Configure <code>blurOutside</code> of <code>edit-config</code> to customize the exit logic of the editing state. </p>\n'
+      },
+      codeFiles: ['edit/scrollbar-not-blur.vue']
     }
   ],
   apis: [{ name: 'grid-edit', 'type': 'component', 'props': [], 'events': [], 'slots': [] }]
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) {

From e911480cf194502e5e330425c8c82cc0feadca27 Mon Sep 17 00:00:00 2001
From: Gimmy <975402925@qq.com>
Date: Wed, 18 Jun 2025 14:54:06 +0800
Subject: [PATCH 2/5] fix: fix tree index

---
 packages/vue/src/grid/src/cell/src/cell.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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]
     }
 

From a9d609ccdc2a34bfa0002ab5352ed120d45416c9 Mon Sep 17 00:00:00 2001
From: Gimmy <975402925@qq.com>
Date: Wed, 18 Jun 2025 19:01:38 +0800
Subject: [PATCH 3/5] feat: grid card view add icon and title

---
 packages/vue/src/grid/src/mobile-first/column-link.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

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
                 )

From 0eca0708fc09783f23089c0f0ccefbf94ff492fb Mon Sep 17 00:00:00 2001
From: Gimmy <975402925@qq.com>
Date: Thu, 19 Jun 2025 18:59:56 +0800
Subject: [PATCH 4/5] fix(grid): fix loading can see no-data

---
 packages/theme-saas/src/grid/table.less          | 1 -
 packages/vue/src/grid/src/mobile-first/index.vue | 8 ++++++--
 2 files changed, 6 insertions(+), 3 deletions(-)

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/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"
   >
     <template v-if="exceptionVisible && (slotEmpty || renderEmpty)">
-      <custom-empty />
+      <custom-empty :class="isLoading ? 'invisible' : ''" />
     </template>
     <exception
       tiny_mode="mobile-first"
       tiny_mode_root
       v-else-if="exceptionVisible"
-      class="min-h-[theme(spacing.72)]"
+      :class="['min-h-[theme(spacing.72)]', isLoading ? 'invisible' : '']"
       component-page
       type="nodata"
     ></exception>
@@ -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: {

From dc3c7e3ecf6e283ab434f21eae15db2220635101 Mon Sep 17 00:00:00 2001
From: Gimmy <975402925@qq.com>
Date: Thu, 19 Jun 2025 19:10:31 +0800
Subject: [PATCH 5/5] fix(grid): fix no-data have two element at mf

---
 packages/vue/src/grid/src/body/src/body.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

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 ? (
             <div ref="emptyBlock" class="tiny-grid__empty-block">
               {$slots.empty
-                ? $slots.empty.call(_vm, { $table }, h)
+                ? $slots.empty({ $table }, h)
                 : $table.renderEmpty
                   ? [$table.renderEmpty(h, $table)]
                   : [