feat: toast修改完成 (#611)

* feat: toast修改完成

* test: update snapshots

---------

Co-authored-by: anlyyao <[email protected]>

src/toast/__test__/demo.test.jsx

@@ -3,22 +3,18 @@
  */
 
 import { mount } from '@vue/test-utils';
-import iconTextVue from '@/toast/demos/iconText.vue';
-import maskVue from '@/toast/demos/mask.vue';
+import baseVue from '@/toast/demos/base.vue';
+import closeVue from '@/toast/demos/close.vue';
+import coverVue from '@/toast/demos/cover.vue';
 import mobileVue from '@/toast/demos/mobile.vue';
-import overlayVue from '@/toast/demos/overlay.vue';
-import positionVue from '@/toast/demos/position.vue';
-import preventScrollThroughVue from '@/toast/demos/preventScrollThrough.vue';
-import textVue from '@/toast/demos/text.vue';
+import themeVue from '@/toast/demos/theme.vue';
 
 const mapper = {
-  iconTextVue,
-  maskVue,
+  baseVue,
+  closeVue,
+  coverVue,
   mobileVue,
-  overlayVue,
-  positionVue,
-  preventScrollThroughVue,
-  textVue,
+  themeVue,
 };
 
 describe('Toast', () => {

src/toast/__test__/index.test.jsx

@@ -25,7 +25,7 @@ describe('Toast', () => {
           icon,
         },
       });
-      expect(wrapper.find('.t-toast > svg').classes()).toContain('t-icon');
+      expect(wrapper.findComponent(LoadingIcon).exists()).toBeTruthy();
     });
 
     it(': message', async () => {
@@ -47,20 +47,6 @@ describe('Toast', () => {
       expect(wrapper.findComponent(Overlay).vm.duration).toEqual(1000);
     });
 
-    it(': placement', async () => {
-      const wrapper = mount(Toast, {
-        props: {
-          placement: 'top',
-        },
-      });
-      expect(wrapper.find('.t-toast').classes()).toContain('t-toast--top');
-      await wrapper.setProps({
-        placement: 'bottom',
-      });
-      expect(wrapper.find('.t-toast').classes()).not.toContain('t-toast--top');
-      expect(wrapper.find('.t-toast').classes()).toContain('t-toast--bottom');
-    });
-
     it(': showOverlay', async () => {
       const wrapper = mount(Toast, {
         props: {

src/toast/demos/base.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="toast-demo">
+    <t-button block size="large" theme="primary" variant="outline" @click="showText()">纯文本</t-button>
+    <t-button block size="large" theme="primary" variant="outline" @click="showMultiText()">多行文字</t-button>
+    <t-button block size="large" theme="primary" variant="outline" @click="showHorizontalText()">带横向图标</t-button>
+    <t-button block size="large" theme="primary" variant="outline" @click="showVerticalText()">带竖向图标</t-button>
+    <t-button block size="large" theme="primary" variant="outline" @click="showLoading()">加载状态</t-button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { h, ref } from 'vue';
+import { Toast } from 'tdesign-mobile-vue';
+
+const showText = () => {
+  Toast('轻提示文字内容');
+};
+const showMultiText = () => {
+  Toast('最多一行展示十个汉字宽度限制最多不超过三行文字行文字行文字');
+};
+const showHorizontalText = () => {
+  Toast({
+    theme: 'success',
+    direction: 'row',
+    message: '轻提示文字内容',
+  });
+};
+const showVerticalText = () => {
+  Toast({
+    theme: 'success',
+    direction: 'column',
+    message: '轻提示文字内容',
+  });
+};
+const showLoading = () => {
+  Toast({
+    theme: 'loading',
+    message: '轻提示文字内容',
+  });
+};
+</script>

src/toast/demos/close.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="toast-demo">
+    <t-button block size="large" theme="primary" variant="outline" @click="showOverlay">显示提示</t-button>
+    <t-button block size="large" theme="primary" variant="outline" @click="hideToast">关闭提示</t-button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Toast } from 'tdesign-mobile-vue';
+
+const showOverlay = () => {
+  Toast({
+    message: '未知点击事件',
+    onClose: () => {
+      console.log('onClose');
+    },
+    onDestroy: () => {
+      console.log('onDestroy');
+    },
+  });
+};
+const hideToast = () => {
+  Toast.clear();
+};
+</script>

src/toast/demos/preventScrollThrough.vue → src/toast/demos/cover.vue

@@ -1,6 +1,8 @@
 <template>
   <div class="toast-demo">
-    <t-button block size="large" variant="outline" @click="showPreventScrollThrough">禁止滑动和点击</t-button>
+    <t-button block size="large" theme="primary" variant="outline" @click="showPreventScrollThrough"
+      >禁止滑动和点击</t-button
+    >
   </div>
 </template>
 
@@ -16,6 +18,7 @@ const showPreventScrollThrough = () => {
     placement: 'bottom',
     duration: 5000,
     preventScrollThrough: true,
+    showOverlay: true,
     icon: () => h(PoweroffIcon),
   });
 };

src/toast/demos/mobile.vue

@@ -2,32 +2,24 @@
   <div class="tdesign-mobile-demo">
     <h1 class="title">Toast 轻提示</h1>
     <p class="summary">一种轻量级反馈或提示，不会打断用户操作。</p>
-    <tdesign-demo-block title="01 类型" summary="基础提示">
-      <textDemo />
+    <tdesign-demo-block title="01 组件类型" summary="基础提示">
+      <baseDemo />
     </tdesign-demo-block>
-    <tdesign-demo-block summary="默认提示">
-      <iconTextDemo />
-    </tdesign-demo-block>
-    <tdesign-demo-block title="02 展示位置和展示时间" summary="弹窗展示位置为顶部、中部、底部三种，展示时间可自定义">
-      <positionDemo />
+    <tdesign-demo-block title="01 组件状态" summary="内置主题">
+      <themeDemo />
     </tdesign-demo-block>
     <tdesign-demo-block title="03 显示遮罩" summary="弹窗可显示遮罩，禁止滑动和点击">
-      <preventScrollThroughDemo />
+      <coverDemo />
     </tdesign-demo-block>
     <tdesign-demo-block title="04 手动关闭" summary="手动关闭轻提示">
-      <maskDemo />
-    </tdesign-demo-block>
-    <tdesign-demo-block title="05 透传 Overlay" summary="向 Overlay 遮罩透传属性">
-      <overlayDemo />
+      <closeDemo />
     </tdesign-demo-block>
   </div>
 </template>
 
 <script lang="ts" setup>
-import textDemo from './text.vue';
-import iconTextDemo from './iconText.vue';
-import positionDemo from './position.vue';
-import maskDemo from './mask.vue';
-import preventScrollThroughDemo from './preventScrollThrough.vue';
-import overlayDemo from './overlay.vue';
+import baseDemo from './base.vue';
+import themeDemo from './theme.vue';
+import coverDemo from './cover.vue';
+import closeDemo from './close.vue';
 </script>

src/toast/demos/theme.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="toast-demo">
+    <t-button block size="large" theme="primary" variant="outline" @click="showSuccessToast()">成功提示</t-button>
+    <t-button block size="large" theme="primary" variant="outline" @click="showWarningToast()">警告提示</t-button>
+    <t-button block size="large" theme="primary" variant="outline" @click="showErrorToast()">错误提示</t-button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { h, ref } from 'vue';
+import { Toast } from 'tdesign-mobile-vue';
+import { ErrorCircleIcon } from 'tdesign-icons-vue-next';
+
+const showSuccessToast = () => {
+  Toast({
+    theme: 'success',
+    direction: 'column',
+    message: '轻提示文字内容',
+  });
+};
+const showWarningToast = () => {
+  Toast({
+    icon: () => h(ErrorCircleIcon),
+    direction: 'column',
+    message: '轻提示文字内容',
+  });
+};
+const showErrorToast = () => {
+  Toast({
+    theme: 'error',
+    direction: 'column',
+    message: '轻提示文字内容',
+  });
+};
+</script>