fix(modal): [modal] after a pop-up window whose type is message is closed, the close event instead of the hide event is triggered issue#1384 (#1939)

* fix(modal): [modal] modify issue 1384 bug

* fix(modal): modify e2e-test

examples/sites/demos/pc/app/modal/event.spec.ts

@@ -14,7 +14,7 @@ test('事件', async ({ page }) => {
   await expect(messageModal.getByText('show 事件触发了')).toBeVisible()
   await modal.getByRole('button', { name: '确定' }).click()
   await expect(modal).not.toBeVisible()
-  await expect(messageModal.getByText('hide 事件触发了')).toBeVisible()
+  await expect(messageModal.getByText('show 事件触发了')).toBeVisible()
 
   // 确认、取消事件
   await demo.getByRole('button', { name: '确认、取消事件' }).click()

examples/sites/demos/pc/app/modal/message-closable-composition-api.vue

@@ -5,9 +5,22 @@
 </template>
 
 <script setup>
-import { Button as TinyButton, Modal } from '@opentiny/vue'
+import { Button as TinyButton, Modal, Notify } from '@opentiny/vue'
 
 function showModal() {
-  Modal.message({ message: '右侧显示关闭按钮', status: 'info', messageClosable: true })
+  Modal.message({
+    message: '右侧显示关闭按钮',
+    status: 'info',
+    messageClosable: true,
+    events: {
+      close: () => {
+        Notify({
+          type: 'info',
+          title: '触发close回调事件',
+          position: 'top-right'
+        })
+      }
+    }
+  })
 }
 </script>

examples/sites/demos/pc/app/modal/message-closable.vue

@@ -13,7 +13,20 @@ export default {
   },
   methods: {
     showModal() {
-      Modal.message({ message: '右侧显示关闭按钮', status: 'info', messageClosable: true })
+      Modal.message({
+        message: '右侧显示关闭按钮',
+        status: 'info',
+        messageClosable: true,
+        events: {
+          close: () => {
+            Notify({
+              type: 'info',
+              title: '触发close回调事件',
+              position: 'top-right'
+            })
+          }
+        }
+      })
     }
   }
 }

packages/renderless/src/modal/index.ts

@@ -370,17 +370,15 @@ export const close =
 
     if (state.visible) {
       state.contentVisible = false
-
       setTimeout(() => {
         state.visible = false
 
-        let params = { type, $modal: parent }
-
-        if (events.hide) {
-          events.hide.call(parent, params)
+        let params = { type: 'close', $modal: parent }
+        if (events.close) {
+          events.close.call(parent, params)
         } else {
           emit('update:modelValue', false)
-          emit('hide', params)
+          emit('close', params)
         }
       }, 200)
     }

packages/vue/src/modal/index.ts

@@ -30,20 +30,19 @@ export function Modal(options) {
     } else {
       let events = options.events || {}
       let $modal
-
       options.events = Object.assign({}, events, {
-        hide(params) {
-          events.hide && events.hide.call(this, params)
-          if ($modal.beforeUnmouted) {
-            $modal.beforeUnmouted()
-          }
-          resolve(params.type)
-        },
         confirm(params) {
           events.confirm && events.confirm.call(this, params)
         },
         show(params) {
           events.show && events.show.call(this, params)
+        },
+        close(params) {
+          events.close && events.close.call(this, params)
+          if ($modal.beforeUnmouted) {
+            $modal.beforeUnmouted()
+          }
+          resolve(params.type)
         }
       })