feat(dialog-select): 添加清空和删除事件支持，更新相关文档和示例代码

Author: zzcr

examples/sites/demos/apis/dialog-select.js

@@ -374,6 +374,28 @@ export default {
           },
           mode: ['pc'],
           pcDemo: ''
+        },
+        {
+          name: 'delete',
+          type: '(row: IData) => void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '使用表格展示数据时，已选栏的选项的删除事件',
+            'en-US': 'The delete event of the selected column options when displaying data in a table'
+          },
+          mode: ['pc'],
+          pcDemo: 'nest-grid-multi'
+        },
+        {
+          name: 'clear',
+          type: '() => void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '使用表格展示数据时，已选栏的清空事件',
+            'en-US': 'The clear event of the selected column when displaying data in a table'
+          },
+          mode: ['pc'],
+          pcDemo: 'nest-grid-multi'
         }
       ],
       methods: [

examples/sites/demos/pc/app/dialog-select/nest-grid-multi-composition-api.vue

@@ -19,6 +19,8 @@
       @size-change="onSizeChange"
       @current-change="onCurrentChange"
       @change="onDialogSelectChange"
+      @clear="onDialogSelectClear"
+      @delete="onDialogSelectDelete"
       value-field="id"
       text-field="name"
       :main-height="240"
@@ -45,7 +47,7 @@
 
 <script setup lang="ts">
 import { reactive, ref } from 'vue'
-import { TinyDialogSelect, TinyButton, TinySearch, TinySelect } from '@opentiny/vue'
+import { TinyDialogSelect, TinyButton, TinySearch, TinySelect, TinyModal } from '@opentiny/vue'
 import Sortable from 'sortablejs'
 
 // 模拟服务侧数据
@@ -189,6 +191,21 @@ const onDialogSelectChange = (values, texts, selectedDatas) => {
   // 打印 change 回调数据，控制台查看
   console.log({ values, texts, selectedDatas })
 }
+
+const onDialogSelectClear = () => {
+  TinyModal.message({
+    message: '清空成功',
+    type: 'success'
+  })
+}
+
+const onDialogSelectDelete = (row) => {
+  console.log('删除成功', row)
+  TinyModal.message({
+    message: '删除成功',
+    type: 'success'
+  })
+}
 </script>
 
 <style scoped lang="less">

examples/sites/demos/pc/app/dialog-select/nest-grid-multi.spec.ts

@@ -0,0 +1,18 @@
+import { test, expect } from '@playwright/test'
+
+test('dialogSelect 表格多选', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('dialog-select#nest-grid-multi')
+  const demo = page.locator('#nest-grid-multi')
+
+  await demo.getByRole('button', { name: '打开窗口' }).click()
+  await page
+    .locator('div')
+    .filter({ hasText: /^GFD 科技有限公司福州WSX 科技有限公司黄冈暂无数据$/ })
+    .getByRole('img')
+    .nth(1)
+    .click()
+  await expect(page.getByText('删除成功')).toBeVisible()
+  await page.getByText('清空').click()
+  await expect(page.getByText('清空成功')).toBeVisible()
+})

examples/sites/demos/pc/app/dialog-select/nest-grid-multi.vue

@@ -19,6 +19,8 @@
       @size-change="onSizeChange"
       @current-change="onCurrentChange"
       @change="onDialogSelectChange"
+      @clear="onDialogSelectClear"
+      @delete="onDialogSelectDelete"
       value-field="id"
       text-field="name"
       :main-height="240"
@@ -44,7 +46,7 @@
 </template>
 
 <script>
-import { TinyDialogSelect, TinyButton, TinySearch, TinySelect } from '@opentiny/vue'
+import { TinyDialogSelect, TinyButton, TinySearch, TinySelect, TinyModal } from '@opentiny/vue'
 import Sortable from 'sortablejs'
 
 // 模拟服务侧数据
@@ -187,6 +189,19 @@ export default {
     onDialogSelectChange(values, texts, selectedDatas) {
       // 打印 change 回调数据，控制台查看
       console.log({ values, texts, selectedDatas })
+    },
+    onDialogSelectClear() {
+      TinyModal.message({
+        message: '清空成功',
+        type: 'success'
+      })
+    },
+    onDialogSelectDelete(row) {
+      console.log('删除成功', row)
+      TinyModal.message({
+        message: '删除成功',
+        type: 'success'
+      })
     }
   }
 }

packages/renderless/src/dialog-select/index.ts

@@ -155,7 +155,7 @@ export const selectedBoxInit =
   }
 
 export const selectedBoxClear =
-  ({ props, state, vm }) =>
+  ({ props, state, vm, emit }) =>
   () => {
     const { multi, popseletor } = props
 
@@ -170,6 +170,8 @@ export const selectedBoxClear =
     state.selectedValues = []
     state.selectedDatas = []
     state.selectedChanged = true
+
+    emit('clear')
   }
 
 export const setTreeSelection =
@@ -260,7 +262,7 @@ export const getSelection =
     state.selectedDatas
 
 export const selectedBoxDelete =
-  ({ props, state, vm }) =>
+  ({ props, state, vm, emit }) =>
   ({ option: row }) => {
     const { multi, popseletor } = props
 
@@ -282,6 +284,8 @@ export const selectedBoxDelete =
       state.selectedDatas = [...state.selectedDatas.slice(0, index), ...state.selectedDatas.slice(index + 1)]
       state.selectedChanged = true
     }
+
+    emit('delete', row)
   }
 
 export const selectedBoxDrag =

packages/renderless/src/dialog-select/vue.ts

@@ -95,8 +95,8 @@ export const renderless = (props, { reactive, computed, watch }, { vm, nextTick,
     state,
     computedGridColumns: computedGridColumns(props),
     selectedBoxInit: selectedBoxInit({ props, vm, nextTick }),
-    selectedBoxClear: selectedBoxClear({ props, state, vm }),
-    selectedBoxDelete: selectedBoxDelete({ props, state, vm }),
+    selectedBoxClear: selectedBoxClear({ props, state, vm, emit }),
+    selectedBoxDelete: selectedBoxDelete({ props, state, vm, emit }),
     selectedBoxDrag: selectedBoxDrag({ props, state }),
     doMultiTreeFilter: doMultiTreeFilter({ props, state, nextTick, vm }),
     multiTreeFilterNode: multiTreeFilterNode(props),

packages/vue/src/dialog-select/src/pc.vue

@@ -192,7 +192,9 @@ export default defineComponent({
     'before-page-change',
     'change',
     // tiny 新增
-    'resize'
+    'resize',
+    'clear',
+    'delete'
   ],
   props: [
     ...props,