feat(toast): add mobile-toast (#751)

* feat(toast): 增加toast组件 Signed-off-by: jacknan <[email protected]> * fix(toast): 删除日志打印 Signed-off-by: jacknan <[email protected]> * feat(toast): 优化demo样式 Signed-off-by: jacknan <[email protected]> * feat(toast): 刷新设计规范 Signed-off-by: jacknan <[email protected]> * feat(toast): 删除无用代码 Signed-off-by: jacknan <[email protected]> * feat(toast): 拆分特性demo Signed-off-by: jacknan <[email protected]> * feat(toast): 刷新token Signed-off-by: jacknan <[email protected]> * feat(toast): 刷新token定义 Signed-off-by: jacknan <[email protected]> * feat(toast): 删除无用文件 Signed-off-by: jacknan <[email protected]> --------- Signed-off-by: jacknan <[email protected]>
opentiny · Nov 21, 2023 · 5cf3917 · 5cf3917
1 parent 4c725d6
commit 5cf3917
Show file tree

Hide file tree

Showing 21 changed files with 558 additions and 3 deletions.
diff --git a/examples/sites/demos/mobile/app/toast/base.vue b/examples/sites/demos/mobile/app/toast/base.vue
@@ -0,0 +1,28 @@
+<template>
+  <div>
+    <tiny-button @click="showTextToast">show text toast</tiny-button>
+  </div>
+</template>
+
+<script lang="jsx">
+import { Toast, Button } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyButton: Button,
+    TinyToast: Toast
+  },
+  methods: {
+    showTextToast() {
+      Toast.service({
+        text: 'Toast',
+        type: 'text',
+        time: 2000,
+        timeout: () => {
+          alert('timeout')
+        }
+      })
+    }
+  }
+}
+</script>
diff --git a/examples/sites/demos/mobile/app/toast/failed.vue b/examples/sites/demos/mobile/app/toast/failed.vue
@@ -0,0 +1,26 @@
+<template>
+  <div>
+    <tiny-button @click="showErrorToast">show error toast</tiny-button>
+  </div>
+</template>
+
+<script lang="jsx">
+import { Toast, Button } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyButton: Button,
+    TinyToast: Toast
+  },
+  methods: {
+    showErrorToast() {
+      Toast.service({
+        text: 'error',
+        type: 'error',
+        time: 2000,
+        zIndex: 102
+      })
+    }
+  }
+}
+</script>
diff --git a/examples/sites/demos/mobile/app/toast/success.vue b/examples/sites/demos/mobile/app/toast/success.vue
@@ -0,0 +1,27 @@
+<template>
+  <div>
+    <tiny-button @click="showCorrectToast">show correct toast</tiny-button>
+  </div>
+</template>
+
+<script lang="jsx">
+import { Toast, Button } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyButton: Button,
+    TinyToast: Toast
+  },
+  methods: {
+    showCorrectToast() {
+      Toast.service({
+        text: 'success',
+        type: 'correct',
+        time: 4000,
+        zIndex: 101,
+        timeout: () => {}
+      })
+    }
+  }
+}
+</script>
diff --git a/examples/sites/demos/mobile/app/toast/webdoc/toast.en.md b/examples/sites/demos/mobile/app/toast/webdoc/toast.en.md
@@ -0,0 +1,7 @@
+---
+title:  Toast 
+---
+
+# Toast 
+
+<div> Toast  </div>
diff --git a/examples/sites/demos/mobile/app/toast/webdoc/toast.js b/examples/sites/demos/mobile/app/toast/webdoc/toast.js
@@ -0,0 +1,102 @@
+export default {
+  column: '2',
+  owner: '',
+  demos: [
+    {
+      demoId: 'base',
+      name: {
+        'zh-CN': '基础用法',
+        'en-US': 'button type'
+      },
+      desc: {
+        'zh-CN': '<p>基础用法</p>',
+        'en-US': '<p>button type</p>'
+      },
+      codeFiles: ['base.vue']
+    },
+    {
+      demoId: 'success',
+      name: {
+        'zh-CN': '成功样式',
+        'en-US': 'success'
+      },
+      desc: {
+        'zh-CN': '<p>成功提示</p>',
+        'en-US': '<p>success</p>'
+      },
+      codeFiles: ['success.vue']
+    },
+    {
+      demoId: 'failed',
+      name: {
+        'zh-CN': '失败样式',
+        'en-US': 'failed'
+      },
+      desc: {
+        'zh-CN': '<p>失败提示</p>',
+        'en-US': '<p>failed</p>'
+      },
+      codeFiles: ['failed.vue']
+    }
+  ],
+  apis: [
+    {
+      name: 'Toast', // 组件名称展示使用
+      type: 'component', // API 类型
+      properties: [
+        {
+          name: 'zIndex',
+          type: 'Number',
+          defaultValue: '100',
+          desc: {
+            'zh-CN': '<p>弹框层级</p>',
+            'en-US': ''
+          },
+          demoId: 'base'
+        },
+        {
+          name: 'type',
+          type: 'string',
+          defaultValue: 'text',
+          desc: {
+            'zh-CN': '<p>类型， text：纯文本 correct：成功 error：失败</p>',
+            'en-US': 'type'
+          },
+          demoId: 'base'
+        },
+        {
+          name: 'text',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>展示的文本</p>',
+            'en-US': 'display text'
+          },
+          demoId: 'base'
+        },
+        {
+          name: 'time',
+          type: 'Number',
+          defaultValue: '2000',
+          desc: {
+            'zh-CN': '<p>展示持续时间，单位：ms</p>',
+            'en-US': 'display times'
+          },
+          demoId: 'base'
+        }
+      ],
+      method: [
+        {
+          name: 'timeout',
+          type: 'Function',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>消失前的回调</p>',
+            'en-US': ''
+          },
+          demoId: 'base'
+        }
+      ]
+    }
+  ]
+}
diff --git a/examples/sites/demos/mobile/app/toast/webdoc/toast.md b/examples/sites/demos/mobile/app/toast/webdoc/toast.md
@@ -0,0 +1,11 @@
+---
+title: Toast 轻提示
+---
+
+# Toast 轻提示
+
+<div> 
+
+Toast 轻提示
+
+</div>
diff --git a/examples/sites/demos/mobile/menus.js b/examples/sites/demos/mobile/menus.js
@@ -94,7 +94,8 @@ export const cmpMenus = [
       { name: 'Badge', nameCn: '徽章', key: 'badge' },
       { name: 'Loading', nameCn: '加载', key: 'loading' },
       { name: 'Modal', nameCn: '模态框', key: 'modal' },
-      { name: 'Popover', nameCn: '气泡', key: 'popover' }
+      { name: 'Popover', nameCn: '气泡', key: 'popover' },
+      { name: 'Toast', nameCn: '轻提示', key: 'toast' }
     ]
   },
   {

diff --git a/packages/modules.json b/packages/modules.json
@@ -2559,6 +2559,19 @@
     "type": "template",
     "exclude": false
   },
+  "Toast": {
+    "path": "vue/src/toast/index.ts",
+    "type": "component",
+    "exclude": false,
+    "mode": [
+      "mobile"
+    ]
+  },
+  "ToastMobile": {
+    "path": "vue/src/toast/src/mobile.vue",
+    "type": "template",
+    "exclude": false
+  },
   "ToggleMenu": {
     "path": "vue/src/toggle-menu/index.ts",
     "type": "component",

diff --git a/packages/renderless/src/toast/index.ts b/packages/renderless/src/toast/index.ts
@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) 2022 - present TinyVue Authors.
+ * Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+
+import { IToastRenderlessParamUtils } from 'types/toast.type'
+
+export const timeout = (emit: IToastRenderlessParamUtils['emit']) => (): void => {
+  emit('timeout')
+}
diff --git a/packages/renderless/src/toast/vue.ts b/packages/renderless/src/toast/vue.ts
@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) 2022 - present TinyVue Authors.
+ * Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+
+import { ISharedRenderlessParamHooks } from 'types/shared.type'
+import { timeout } from './index'
+import { IToastApi, IToastState, IToastProps } from 'types/toast.type'
+
+export const api = ['state', 'timeout']
+
+export const renderless = (props: IToastProps, { reactive }: ISharedRenderlessParamHooks, { vm, emit }): IToastApi => {
+  const state: IToastState = reactive({
+    text: props.text,
+    type: props.type,
+    time: props.time as number
+  })
+
+  const api: IToastApi = {
+    state,
+    timeout: timeout(emit)
+  }
+
+  return api
+}
diff --git a/packages/renderless/types/toast.type.ts b/packages/renderless/types/toast.type.ts
@@ -0,0 +1,24 @@
+import type { ExtractPropTypes } from 'vue'
+import { toastProps } from '@/toast/src'
+import type { ISharedRenderlessFunctionParams, ISharedRenderlessParamUtils } from './shared.type'
+import { timeout } from '../src/toast'
+
+export interface IToastState {
+  text: string | null
+  type?: string
+  time: number
+}
+
+export type IToastProps = ExtractPropTypes<typeof toastProps>
+
+export type IToastRenderlessParams = ISharedRenderlessFunctionParams<never> & {
+  state: IToastState
+  props: IToastProps
+}
+
+export interface IToastApi {
+  state: IToastState
+  timeout: ReturnType<typeof timeout>
+}
+
+export type IToastRenderlessParamUtils = ISharedRenderlessParamUtils<never>
diff --git a/packages/theme-mobile/src/toast/index.less b/packages/theme-mobile/src/toast/index.less
@@ -0,0 +1,60 @@
+/**
+* Copyright (c) 2022 - present TinyVue Authors.
+* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
+*
+* Use of this source code is governed by an MIT-style license.
+*
+* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+*
+*/
+
+@import '../custom.less';
+@import './vars.less';
+
+@toast-prefix-cls: ~'@{css-prefix}mobile-toast';
+
+.@{toast-prefix-cls} {
+  .component-css-vars-toast();
+
+  position: fixed;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+
+  &-content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    padding: var(--ti-mobile-toast-padding-size);
+    background-color: var(--ti-mobile-toast-bg-color-primary);
+    border-radius: var(--ti-mobile-toast-border-radius);
+    box-shadow: var(--ti-mobile-toast-shadow, 0 0 20px 0 rgb(0 0 0 / 8%));
+    backdrop-filter: blur(5px);
+    max-width: var(--ti-mobile-toast-width-max);
+    min-width: 106px;
+
+    &-text {
+      padding: 7px 0;
+    }
+  }
+
+  &-text {
+    word-wrap: break-word;
+    word-break: break-all;
+    font-size: var(--ti-mobile-toast-text-font-size);
+    color: var(--ti-mobile-toast-text-color-primary, #fff);
+  }
+
+  &-icon {
+    padding-bottom: var(--ti-mobile-toast-padding-bottom);
+    font-size: var(--ti-mobile-toast-icon-size);
+  }
+}