From 57c4f9918f92381fa68203f1bfc347c42afefa30 Mon Sep 17 00:00:00 2001
From: Gweesin Chan <42909374+gweesin@users.noreply.github.com>
Date: Sat, 10 Aug 2024 10:30:00 +0800
Subject: [PATCH] fix(modal): [modal] empty str title should not be visible
 (#1858)

* test: fix e2e test errors

* style: fix eslint error

* fix: fix empty string title can be visible
---
 .../demos/pc/app/modal/basic-usage.spec.ts    |  2 +-
 .../demos/pc/app/modal/lock-view.spec.ts      |  5 +++++
 .../pc/app/modal/title-composition-api.vue    |  9 +++++++--
 .../sites/demos/pc/app/modal/title.spec.ts    | 11 ++++++++++-
 examples/sites/demos/pc/app/modal/title.vue   |  9 +++++++--
 packages/vue/src/modal/src/mobile.vue         | 19 +++++++++----------
 packages/vue/src/modal/src/pc.vue             | 16 +++++++++-------
 7 files changed, 48 insertions(+), 23 deletions(-)

diff --git a/examples/sites/demos/pc/app/modal/basic-usage.spec.ts b/examples/sites/demos/pc/app/modal/basic-usage.spec.ts
index 43e63e612..e10d31bbd 100644
--- a/examples/sites/demos/pc/app/modal/basic-usage.spec.ts
+++ b/examples/sites/demos/pc/app/modal/basic-usage.spec.ts
@@ -19,7 +19,7 @@ test('基本用法', async ({ page }) => {
   // 成功提示框
   await page.getByRole('button', { name: /成功提示框/ }).click()
   await expect(modal).toHaveClass(/status__success/)
-  await expect(modal.locator('.tiny-modal__header svg').first()).toHaveClass(/tiny-icon-success/)
+  await expect(modal.locator('.tiny-modal__header svg').first()).toHaveClass(/tiny-modal-svg__success/)
   await page.getByRole('button', { name: /确定/, exact: true }).click()
   await expect(page.locator('.tiny-modal.type__alert.status__success')).not.toBeVisible()
 
diff --git a/examples/sites/demos/pc/app/modal/lock-view.spec.ts b/examples/sites/demos/pc/app/modal/lock-view.spec.ts
index e57d6acce..dd5d63fb9 100644
--- a/examples/sites/demos/pc/app/modal/lock-view.spec.ts
+++ b/examples/sites/demos/pc/app/modal/lock-view.spec.ts
@@ -5,6 +5,11 @@ test('锁住页面', async ({ page }) => {
   await page.goto('modal#lock-view')
 
   const modal = page.locator('.tiny-modal.active')
+
+  // 新版示例页单示例无滚动条，先展开代码保证有滚动条
+  await page.locator('.i-ti-code').click()
+  await page.waitForTimeout(100)
+
   await page.getByRole('button', { name: '不锁界面 且 隐藏遮罩层' }).click()
   await expect(modal).not.toHaveClass(/lock__view/)
 
diff --git a/examples/sites/demos/pc/app/modal/title-composition-api.vue b/examples/sites/demos/pc/app/modal/title-composition-api.vue
index fb3afe8f6..b399cf825 100644
--- a/examples/sites/demos/pc/app/modal/title-composition-api.vue
+++ b/examples/sites/demos/pc/app/modal/title-composition-api.vue
@@ -1,11 +1,16 @@
 <template>
-  <tiny-button @click="btnClick" :reset-time="0">自定义标题</tiny-button>
+  <tiny-button @click="customClick" :reset-time="0">自定义标题</tiny-button>
+  <tiny-button @click="noTitleClick" :reset-time="0">无标题</tiny-button>
 </template>
 
 <script setup>
 import { Button as TinyButton, Modal } from '@opentiny/vue'
 
-function btnClick() {
+function customClick() {
   Modal.alert({ message: '自定义标题', title: '自定义标题' })
 }
+
+function noTitleClick() {
+  Modal.alert({ message: '无标题', title: '' })
+}
 </script>
diff --git a/examples/sites/demos/pc/app/modal/title.spec.ts b/examples/sites/demos/pc/app/modal/title.spec.ts
index 5cae427f7..69d222d4a 100644
--- a/examples/sites/demos/pc/app/modal/title.spec.ts
+++ b/examples/sites/demos/pc/app/modal/title.spec.ts
@@ -1,6 +1,6 @@
 import { test, expect } from '@playwright/test'
 
-test('标题', async ({ page }) => {
+test('自定义标题', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('modal#title')
 
@@ -8,3 +8,12 @@ test('标题', async ({ page }) => {
   await page.getByRole('button', { name: '自定义标题' }).click()
   await expect(modal.locator('.tiny-modal__header')).toHaveText('自定义标题')
 })
+
+test('无标题', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('modal#title')
+
+  const modal = page.locator('.tiny-modal.active')
+  await page.getByRole('button', { name: '无标题' }).click()
+  await expect(modal.locator('.tiny-modal__title')).not.toBeVisible()
+})
diff --git a/examples/sites/demos/pc/app/modal/title.vue b/examples/sites/demos/pc/app/modal/title.vue
index a97f4aa3b..733a14628 100644
--- a/examples/sites/demos/pc/app/modal/title.vue
+++ b/examples/sites/demos/pc/app/modal/title.vue
@@ -1,5 +1,6 @@
 <template>
-  <tiny-button @click="btnClick" :reset-time="0">自定义标题</tiny-button>
+  <tiny-button @click="customClick" :reset-time="0">自定义标题</tiny-button>
+  <tiny-button @click="noTitleClick" :reset-time="0">无标题</tiny-button>
 </template>
 
 <script>
@@ -10,8 +11,12 @@ export default {
     TinyButton: Button
   },
   methods: {
-    btnClick() {
+    customClick() {
       Modal.alert({ message: '自定义标题', title: '自定义标题' })
+    },
+
+    noTitleClick() {
+      Modal.alert({ message: '无标题', title: '' })
     }
   }
 }
diff --git a/packages/vue/src/modal/src/mobile.vue b/packages/vue/src/modal/src/mobile.vue
index f9a439c0f..92a59ae4c 100644
--- a/packages/vue/src/modal/src/mobile.vue
+++ b/packages/vue/src/modal/src/mobile.vue
@@ -48,9 +48,6 @@ export default defineComponent({
     'width',
     'zIndex'
   ],
-  components: {
-    Button
-  },
   provide() {
     return { dialog: this }
   },
@@ -108,13 +105,15 @@ export default defineComponent({
                     }
                   },
                   [
-                    h(
-                      'span',
-                      {
-                        class: 'tiny-mobile-modal__title'
-                      },
-                      title || t('ui.alert.title')
-                    ),
+                    title !== ''
+                      ? h(
+                          'span',
+                          {
+                            class: 'tiny-mobile-modal__title'
+                          },
+                          title || t('ui.alert.title')
+                        )
+                      : null,
                     resize
                       ? h(zoomLocat ? iconMinscreenLeft() : iconFullscreenLeft(), {
                           class: ['tiny-mobile-modal__zoom-btn', 'trigger__btn'],
diff --git a/packages/vue/src/modal/src/pc.vue b/packages/vue/src/modal/src/pc.vue
index 47ef59468..76a0a7440 100644
--- a/packages/vue/src/modal/src/pc.vue
+++ b/packages/vue/src/modal/src/pc.vue
@@ -183,13 +183,15 @@ export default defineComponent({
                           ]
                         )
                       : null,
-                    h(
-                      'span',
-                      {
-                        class: 'tiny-modal__title'
-                      },
-                      title || t('ui.alert.title')
-                    ),
+                    title !== ''
+                      ? h(
+                          'span',
+                          {
+                            class: 'tiny-modal__title'
+                          },
+                          title || t('ui.alert.title')
+                        )
+                      : null,
                     resize
                       ? h(zoomLocat ? iconMinscreenLeft() : iconFullscreenLeft(), {
                           class: ['tiny-modal__zoom-btn', 'trigger__btn'],