From cfe1a36188066fc65b8eab782ae72a3d8fc10a0c Mon Sep 17 00:00:00 2001 From: jacknan Date: Fri, 27 Oct 2023 14:43:59 +0800 Subject: [PATCH 1/9] =?UTF-8?q?feat(toast):=20=E5=A2=9E=E5=8A=A0toast?= =?UTF-8?q?=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: jacknan --- .../sites/demos/mobile/app/toast/base.vue | 24 ++++++ .../demos/mobile/app/toast/webdoc/toast.en.md | 7 ++ .../demos/mobile/app/toast/webdoc/toast.js | 78 +++++++++++++++++++ .../demos/mobile/app/toast/webdoc/toast.md | 11 +++ examples/sites/demos/mobile/menus.js | 3 +- packages/modules.json | 13 ++++ packages/renderless/src/toast/index.ts | 17 ++++ packages/renderless/src/toast/vue.ts | 34 ++++++++ packages/renderless/types/toast.type.ts | 24 ++++++ packages/theme-mobile/src/toast/index.js | 24 ++++++ packages/theme-mobile/src/toast/index.less | 48 ++++++++++++ packages/theme-mobile/src/toast/vars.less | 24 ++++++ packages/vue/package.json | 1 + packages/vue/src/toast/index.ts | 28 +++++++ packages/vue/src/toast/package.json | 24 ++++++ packages/vue/src/toast/src/index.ts | 42 ++++++++++ packages/vue/src/toast/src/mobile.vue | 31 ++++++++ packages/vue/src/toast/src/service.ts | 42 ++++++++++ 18 files changed, 474 insertions(+), 1 deletion(-) create mode 100644 examples/sites/demos/mobile/app/toast/base.vue create mode 100644 examples/sites/demos/mobile/app/toast/webdoc/toast.en.md create mode 100644 examples/sites/demos/mobile/app/toast/webdoc/toast.js create mode 100644 examples/sites/demos/mobile/app/toast/webdoc/toast.md create mode 100644 packages/renderless/src/toast/index.ts create mode 100644 packages/renderless/src/toast/vue.ts create mode 100644 packages/renderless/types/toast.type.ts create mode 100644 packages/theme-mobile/src/toast/index.js create mode 100644 packages/theme-mobile/src/toast/index.less create mode 100644 packages/theme-mobile/src/toast/vars.less create mode 100644 packages/vue/src/toast/index.ts create mode 100644 packages/vue/src/toast/package.json create mode 100644 packages/vue/src/toast/src/index.ts create mode 100644 packages/vue/src/toast/src/mobile.vue create mode 100644 packages/vue/src/toast/src/service.ts diff --git a/examples/sites/demos/mobile/app/toast/base.vue b/examples/sites/demos/mobile/app/toast/base.vue new file mode 100644 index 0000000000..757e5a82ec --- /dev/null +++ b/examples/sites/demos/mobile/app/toast/base.vue @@ -0,0 +1,24 @@ + + + diff --git a/examples/sites/demos/mobile/app/toast/webdoc/toast.en.md b/examples/sites/demos/mobile/app/toast/webdoc/toast.en.md new file mode 100644 index 0000000000..e673a519e8 --- /dev/null +++ b/examples/sites/demos/mobile/app/toast/webdoc/toast.en.md @@ -0,0 +1,7 @@ +--- +title: Toast +--- + +# Toast + +
Toast
diff --git a/examples/sites/demos/mobile/app/toast/webdoc/toast.js b/examples/sites/demos/mobile/app/toast/webdoc/toast.js new file mode 100644 index 0000000000..3677bbf7c2 --- /dev/null +++ b/examples/sites/demos/mobile/app/toast/webdoc/toast.js @@ -0,0 +1,78 @@ +export default { + column: '2', + owner: '', + demos: [ + { + demoId: 'base', + name: { + 'zh-CN': '基础用法', + 'en-US': 'button type' + }, + desc: { + 'zh-CN': '

基础用法

', + 'en-US': '

button type

' + }, + codeFiles: ['base.vue'] + } + ], + apis: [ + { + name: 'Toast', // 组件名称展示使用 + type: 'component', // API 类型 + properties: [ + { + name: 'zIndex', + type: 'Number', + defaultValue: '100', + desc: { + 'zh-CN': '

弹框层级

', + 'en-US': '' + }, + demoId: 'base' + }, + { + name: 'type', + type: 'string', + defaultValue: 'text', + desc: { + 'zh-CN': '

类型， text：纯文本 correct：成功 error：失败

', + 'en-US': 'type' + }, + demoId: 'base' + }, + { + name: 'text', + type: 'string', + defaultValue: '', + desc: { + 'zh-CN': '

展示的文本

', + 'en-US': 'display text' + }, + demoId: 'base' + }, + { + name: 'time', + type: 'Number', + defaultValue: '2000', + desc: { + 'zh-CN': '

展示持续时间，单位：ms

', + 'en-US': 'display times' + }, + demoId: 'base' + } + ], + method: [ + { + name: 'timeout', + type: 'Function', + defaultValue: '', + desc: { + 'zh-CN': '

消失前的回调g

', + '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 new file mode 100644 index 0000000000..02a69c72e5 --- /dev/null +++ b/examples/sites/demos/mobile/app/toast/webdoc/toast.md @@ -0,0 +1,11 @@ +--- +title: Toast 轻提示 +--- + +# Toast 轻提示 + +
+ +Toast 轻提示 + +
diff --git a/examples/sites/demos/mobile/menus.js b/examples/sites/demos/mobile/menus.js index 6ae6d407ee..9d61a5b25c 100644 --- a/examples/sites/demos/mobile/menus.js +++ b/examples/sites/demos/mobile/menus.js @@ -93,7 +93,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 index 849eb87fcf..008b08196e 100644 --- a/packages/modules.json +++ b/packages/modules.json @@ -2500,6 +2500,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 new file mode 100644 index 0000000000..825674a045 --- /dev/null +++ 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 new file mode 100644 index 0000000000..07811d7413 --- /dev/null +++ b/packages/renderless/src/toast/vue.ts @@ -0,0 +1,34 @@ +/** + * 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 + }) + + console.log(state, props) + + 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 new file mode 100644 index 0000000000..d457aefd2d --- /dev/null +++ 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 + +export type IToastRenderlessParams = ISharedRenderlessFunctionParams & { + state: IToastState + props: IToastProps +} + +export interface IToastApi { + state: IToastState + timeout: ReturnType +} + +export type IToastRenderlessParamUtils = ISharedRenderlessParamUtils diff --git a/packages/theme-mobile/src/toast/index.js b/packages/theme-mobile/src/toast/index.js new file mode 100644 index 0000000000..4598a3f78a --- /dev/null +++ b/packages/theme-mobile/src/toast/index.js @@ -0,0 +1,24 @@ +/** + * 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. + * + */ + +export default { + 'tiny-mobile-toast-bg-color-primary': 'rgba(0, 0, 0, 0.9)', + 'tiny-mobile-toast-text-color-primary': '#fff', + 'tiny-mobile-toast-height-primary': '140px', + 'tiny-mobile-toast-width-primary': '140px', + 'tiny-mobile-toast-line-height-primary': '55px', + 'tiny-mobile-toast-border-radius-primary': '16px', + 'tiny-mobile-toast-dot-height-primary': '40px', + 'tiny-mobile-toast-dot-width-primary': '3px', + 'tiny-mobile-toast-dot-width-simple': '2px', + 'tiny-mobile-toast-text-color-simple': '#999' +} diff --git a/packages/theme-mobile/src/toast/index.less b/packages/theme-mobile/src/toast/index.less new file mode 100644 index 0000000000..88126fd1e4 --- /dev/null +++ b/packages/theme-mobile/src/toast/index.less @@ -0,0 +1,48 @@ +/** +* 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; + left: 0; + right: 0; + top: 0; + bottom: 0; + display: flex; + align-items: center; + justify-content: center; + pointer-events: none; + + &-content { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + padding: 4px 8px; + background-color: rgb(0 0 0 / 30%); + border-radius: 2px; + } + + &-text { + color: white; + } + + &-icon { + padding-bottom: 5px; + } +} diff --git a/packages/theme-mobile/src/toast/vars.less b/packages/theme-mobile/src/toast/vars.less new file mode 100644 index 0000000000..ab1f447c9b --- /dev/null +++ b/packages/theme-mobile/src/toast/vars.less @@ -0,0 +1,24 @@ +/** +* 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. +* +*/ + +.component-css-vars-toast() { + --ti-mobile-toast-bg-color-primary: rgb(0 0 0 / 90%); + --ti-mobile-toast-text-color-primary: #fff; + --ti-mobile-toast-height-primary: 140px; + --ti-mobile-toast-width-primary: 140px; + --ti-mobile-toast-line-height-primary: 55px; + --ti-mobile-toast-dot-height-primary: 40px; + --ti-mobile-toast-border-radius-primary: 16px; + --ti-mobile-toast-dot-width-primary: 3px; + --ti-mobile-toast-dot-width-simple: 2px; + --ti-mobile-toast-text-color-simple: #999; +} diff --git a/packages/vue/package.json b/packages/vue/package.json index beeebb6f9a..a115ac8125 100644 --- a/packages/vue/package.json +++ b/packages/vue/package.json @@ -223,6 +223,7 @@ "@opentiny/vue-time-select": "workspace:~", "@opentiny/vue-time-spinner": "workspace:~", "@opentiny/vue-timeline-item": "workspace:~", + "@opentiny/vue-toast": "workspace:~", "@opentiny/vue-toggle-menu": "workspace:~", "@opentiny/vue-tooltip": "workspace:~", "@opentiny/vue-top-box": "workspace:~", diff --git a/packages/vue/src/toast/index.ts b/packages/vue/src/toast/index.ts new file mode 100644 index 0000000000..f6e5f0657e --- /dev/null +++ b/packages/vue/src/toast/index.ts @@ -0,0 +1,28 @@ +/** + * 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 service from './src/service.js' +import '@opentiny/vue-theme-mobile/toast/index.less' +import { version } from './package.json' + +let Toast: any = { + install() {}, + service, + version +} + +if (process.env.BUILD_TARGET === 'runtime') { + if (typeof window !== 'undefined' && window.Vue) { + Toast.install(window.Vue) + } +} + +export default Toast diff --git a/packages/vue/src/toast/package.json b/packages/vue/src/toast/package.json new file mode 100644 index 0000000000..6f39c7fee4 --- /dev/null +++ b/packages/vue/src/toast/package.json @@ -0,0 +1,24 @@ +{ + "name": "@opentiny/vue-toast", + "version": "3.7.0", + "description": "", + "main": "lib/index.js", + "module": "index.ts", + "sideEffects": false, + "type": "module", + "devDependencies": { + "@opentiny-internal/vue-test-utils": "workspace:*", + "vitest": "^0.31.0" + }, + "scripts": { + "build": "pnpm -w build:ui $npm_package_name", + "//postversion": "pnpm build" + }, + "dependencies": { + "@opentiny/vue-common": "workspace:~", + "@opentiny/vue-icon": "workspace:~", + "@opentiny/vue-renderless": "workspace:~", + "@opentiny/vue-locale": "workspace:~" + }, + "license": "MIT" +} diff --git a/packages/vue/src/toast/src/index.ts b/packages/vue/src/toast/src/index.ts new file mode 100644 index 0000000000..38f46e0133 --- /dev/null +++ b/packages/vue/src/toast/src/index.ts @@ -0,0 +1,42 @@ +/** + * 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 { $props, $prefix, $setup, defineComponent } from '@opentiny/vue-common' +import template from 'virtual-template?mobile' + +export const toastProps = { + ...$props, + type: { + type: String, + validator: (value: string) => Boolean(~['text', 'correct', 'error'].indexOf(value)) + }, + zIndex: { + type: Number, + default: 100 + }, + text: { + type: String, + default: 'text' + }, + time: { + type: [String, Number], + default: 2000 + } +} + +export default defineComponent({ + name: $prefix + 'Toast', + emits: ['timeout'], + props: toastProps, + setup(props, context) { + return $setup({ props, context, template }) + } +}) diff --git a/packages/vue/src/toast/src/mobile.vue b/packages/vue/src/toast/src/mobile.vue new file mode 100644 index 0000000000..5788c6ed30 --- /dev/null +++ b/packages/vue/src/toast/src/mobile.vue @@ -0,0 +1,31 @@ + + + diff --git a/packages/vue/src/toast/src/service.ts b/packages/vue/src/toast/src/service.ts new file mode 100644 index 0000000000..603294d6f8 --- /dev/null +++ b/packages/vue/src/toast/src/service.ts @@ -0,0 +1,42 @@ +/** + * 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 { createComponent } from '@opentiny/vue-common' +import Toast from './index' + +const defaults = { + type: 'text' +} + +export default (configs = {}) => { + configs = { ...defaults, ...configs } + let parent = document.body + let instance = createComponent({ + component: Toast, + propsData: {}, + el: document.createElement('div') + }) + + for (const key in configs) { + if (Object.prototype.hasOwnProperty.call(configs, key)) { + instance.state[key] = configs[key] + } + } + + parent.appendChild(instance.$el) + + setTimeout(() => { + parent.removeChild(instance.$el) + }, instance.state.time) + + return instance +} From 17b3e6cc405c8af617df2cb07c4733c92c1a90ae Mon Sep 17 00:00:00 2001 From: jacknan Date: Fri, 27 Oct 2023 14:46:19 +0800 Subject: [PATCH 2/9] =?UTF-8?q?fix(toast):=20=E5=88=A0=E9=99=A4=E6=97=A5?= =?UTF-8?q?=E5=BF=97=E6=89=93=E5=8D=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: jacknan --- packages/renderless/src/toast/vue.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/renderless/src/toast/vue.ts b/packages/renderless/src/toast/vue.ts index 07811d7413..bbefd6f540 100644 --- a/packages/renderless/src/toast/vue.ts +++ b/packages/renderless/src/toast/vue.ts @@ -23,8 +23,6 @@ export const renderless = (props: IToastProps, { reactive }: ISharedRenderlessPa time: props.time as number }) - console.log(state, props) - const api: IToastApi = { state, timeout: timeout(emit) From d4ddc23b9c7ccc6f5f66b0322761bccf91bf4473 Mon Sep 17 00:00:00 2001 From: jacknan Date: Tue, 31 Oct 2023 16:54:34 +0800 Subject: [PATCH 3/9] =?UTF-8?q?feat(toast):=20=E4=BC=98=E5=8C=96demo?= =?UTF-8?q?=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: jacknan --- .../sites/demos/mobile/app/toast/base.vue | 27 ++++++++++++++----- .../demos/mobile/app/toast/webdoc/toast.js | 2 +- 2 files changed, 22 insertions(+), 7 deletions(-) diff --git a/examples/sites/demos/mobile/app/toast/base.vue b/examples/sites/demos/mobile/app/toast/base.vue index 757e5a82ec..ce4cdac045 100644 --- a/examples/sites/demos/mobile/app/toast/base.vue +++ b/examples/sites/demos/mobile/app/toast/base.vue @@ -1,8 +1,8 @@ @@ -11,12 +11,27 @@ import { Toast } from '@opentiny/vue' export default { methods: { - showToast(type, zIndex) { + showTextToast() { Toast.service({ text: 'loading...', - type: type, + type: 'text', + time: 2000 + }) + }, + showCorrectToast() { + Toast.service({ + text: 'success', + type: 'correct', + time: 4000, + zIndex: 101 + }) + }, + showErrorToast() { + Toast.service({ + text: 'error', + type: 'error', time: 2000, - zIndex + zIndex: 102 }) } } diff --git a/examples/sites/demos/mobile/app/toast/webdoc/toast.js b/examples/sites/demos/mobile/app/toast/webdoc/toast.js index 3677bbf7c2..f2f74b51d7 100644 --- a/examples/sites/demos/mobile/app/toast/webdoc/toast.js +++ b/examples/sites/demos/mobile/app/toast/webdoc/toast.js @@ -67,7 +67,7 @@ export default { type: 'Function', defaultValue: '', desc: { - 'zh-CN': '

消失前的回调g

', + 'zh-CN': '

消失前的回调

', 'en-US': '' }, demoId: 'base' From a7a6bdc4c53e3204627726e48ed014dffb54efa0 Mon Sep 17 00:00:00 2001 From: jacknan Date: Mon, 6 Nov 2023 20:25:34 +0800 Subject: [PATCH 4/9] =?UTF-8?q?feat(toast):=20=E5=88=B7=E6=96=B0=E8=AE=BE?= =?UTF-8?q?=E8=AE=A1=E8=A7=84=E8=8C=83?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: jacknan --- .../sites/demos/mobile/app/toast/base.vue | 7 +++-- packages/theme-mobile/src/toast/index.js | 16 ++++------- packages/theme-mobile/src/toast/index.less | 28 +++++++++++++------ packages/theme-mobile/src/toast/vars.less | 16 ++++------- .../theme/src/svgs/mobile-error-white.svg | 2 +- .../theme/src/svgs/mobile-success-white.svg | 2 +- packages/vue/src/toast/src/index.ts | 4 +++ packages/vue/src/toast/src/mobile.vue | 14 +++++----- packages/vue/src/toast/src/service.ts | 2 ++ 9 files changed, 52 insertions(+), 39 deletions(-) diff --git a/examples/sites/demos/mobile/app/toast/base.vue b/examples/sites/demos/mobile/app/toast/base.vue index ce4cdac045..b9fe9e9630 100644 --- a/examples/sites/demos/mobile/app/toast/base.vue +++ b/examples/sites/demos/mobile/app/toast/base.vue @@ -13,9 +13,12 @@ export default { methods: { showTextToast() { Toast.service({ - text: 'loading...', + text: 'Toast', type: 'text', - time: 2000 + time: 2000, + timeout: () => { + alert('timeout') + } }) }, showCorrectToast() { diff --git a/packages/theme-mobile/src/toast/index.js b/packages/theme-mobile/src/toast/index.js index 4598a3f78a..e704668333 100644 --- a/packages/theme-mobile/src/toast/index.js +++ b/packages/theme-mobile/src/toast/index.js @@ -11,14 +11,10 @@ */ export default { - 'tiny-mobile-toast-bg-color-primary': 'rgba(0, 0, 0, 0.9)', - 'tiny-mobile-toast-text-color-primary': '#fff', - 'tiny-mobile-toast-height-primary': '140px', - 'tiny-mobile-toast-width-primary': '140px', - 'tiny-mobile-toast-line-height-primary': '55px', - 'tiny-mobile-toast-border-radius-primary': '16px', - 'tiny-mobile-toast-dot-height-primary': '40px', - 'tiny-mobile-toast-dot-width-primary': '3px', - 'tiny-mobile-toast-dot-width-simple': '2px', - 'tiny-mobile-toast-text-color-simple': '#999' + '--ti-mobile-toast-bg-color-primary': 'rgb(77 77 77 / 95%)', + '--ti-mobile-toast-shadow-color-primary': 'rgb(0 0 0 / 30%)', + '--ti-mobile-toast-text-color-primary': '#fff', + '--ti-mobile-toast-width-max': '90%', + '--ti-mobile-toast-text-font-size': '14px', + '--ti-mobile-toast-icon-font-size': '36px' } diff --git a/packages/theme-mobile/src/toast/index.less b/packages/theme-mobile/src/toast/index.less index 88126fd1e4..78a7b9e01a 100644 --- a/packages/theme-mobile/src/toast/index.less +++ b/packages/theme-mobile/src/toast/index.less @@ -19,30 +19,42 @@ .component-css-vars-toast(); position: fixed; - left: 0; - right: 0; - top: 0; - bottom: 0; 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: 4px 8px; - background-color: rgb(0 0 0 / 30%); - border-radius: 2px; + padding: 20px; + background-color: var(--ti-mobile-toast-bg-color-primary); + border-radius: 16px; + box-shadow: 0 8px 48px 0 var(--ti-mobile-toast-shadow-color-primary); + backdrop-filter: blur(5px); + max-width: var(--ti-mobile-toast-width-max); + + &-text { + padding: 7px 20px; + border-radius: 18px; + } } &-text { + word-wrap: break-word; + word-break: break-all; + font-size: var(--ti-mobile-toast-text-font-size); color: white; } &-icon { - padding-bottom: 5px; + padding-bottom: 8px; + font-size: var(--ti-mobile-toast-icon-font-size); } } diff --git a/packages/theme-mobile/src/toast/vars.less b/packages/theme-mobile/src/toast/vars.less index ab1f447c9b..1dcfbaef94 100644 --- a/packages/theme-mobile/src/toast/vars.less +++ b/packages/theme-mobile/src/toast/vars.less @@ -11,14 +11,10 @@ */ .component-css-vars-toast() { - --ti-mobile-toast-bg-color-primary: rgb(0 0 0 / 90%); - --ti-mobile-toast-text-color-primary: #fff; - --ti-mobile-toast-height-primary: 140px; - --ti-mobile-toast-width-primary: 140px; - --ti-mobile-toast-line-height-primary: 55px; - --ti-mobile-toast-dot-height-primary: 40px; - --ti-mobile-toast-border-radius-primary: 16px; - --ti-mobile-toast-dot-width-primary: 3px; - --ti-mobile-toast-dot-width-simple: 2px; - --ti-mobile-toast-text-color-simple: #999; + --ti-mobile-toast-bg-color-primary: rgb(77 77 77 / 95%); + --ti-mobile-toast-shadow-color-primary: rgb(0 0 0 / 30%); + --ti-mobile-toast-text-color-primary: var(--ti-mobile-common-color-text-whit, #fff); + --ti-mobile-toast-width-max: 90%; + --ti-mobile-toast-text-font-size: 14px; + --ti-mobile-toast-icon-font-size: 36px; } diff --git a/packages/theme/src/svgs/mobile-error-white.svg b/packages/theme/src/svgs/mobile-error-white.svg index 0c2032000f..422036af2a 100644 --- a/packages/theme/src/svgs/mobile-error-white.svg +++ b/packages/theme/src/svgs/mobile-error-white.svg @@ -1,5 +1,5 @@ - + ic/error diff --git a/packages/theme/src/svgs/mobile-success-white.svg b/packages/theme/src/svgs/mobile-success-white.svg index 7a6309cebb..44aabc69fe 100644 --- a/packages/theme/src/svgs/mobile-success-white.svg +++ b/packages/theme/src/svgs/mobile-success-white.svg @@ -1,5 +1,5 @@ - + ic/confirm diff --git a/packages/vue/src/toast/src/index.ts b/packages/vue/src/toast/src/index.ts index 38f46e0133..94f9ab186d 100644 --- a/packages/vue/src/toast/src/index.ts +++ b/packages/vue/src/toast/src/index.ts @@ -29,6 +29,10 @@ export const toastProps = { time: { type: [String, Number], default: 2000 + }, + timeout: { + type: Function, + default: null } } diff --git a/packages/vue/src/toast/src/mobile.vue b/packages/vue/src/toast/src/mobile.vue index 5788c6ed30..a3f5a4dd87 100644 --- a/packages/vue/src/toast/src/mobile.vue +++ b/packages/vue/src/toast/src/mobile.vue @@ -1,9 +1,9 @@
-
+
- - + +
{{ state.text }}
@@ -14,16 +14,16 @@ import { props, setup, defineComponent } from '@opentiny/vue-common' import { renderless, api } from '@opentiny/vue-renderless/toast/vue' import '@opentiny/vue-theme-mobile/toast/index.less' -import { IconOperationfaildL, IconSuccessful, IconLoading } from '@opentiny/vue-icon' +import { IconMobileErrorWhite, IconMobileSuccessWhite, IconLoading } from '@opentiny/vue-icon' import type { IToastApi } from '@opentiny/vue-renderless/types/toast.type' export default defineComponent({ components: { iconLoading: IconLoading(), - iconOperationfaildL: IconOperationfaildL(), - iconSuccessful: IconSuccessful() + IconMobileErrorWhite: IconMobileErrorWhite(), + IconMobileSuccessWhite: IconMobileSuccessWhite() }, - props: [...props, 'type', 'zIndex', 'text', 'time', 'events'], + props: [...props, 'type', 'zIndex', 'text', 'time', 'timeout'], setup(props, context) { return setup({ props, context, renderless, api }) as unknown as IToastApi } diff --git a/packages/vue/src/toast/src/service.ts b/packages/vue/src/toast/src/service.ts index 603294d6f8..7ab6bef51f 100644 --- a/packages/vue/src/toast/src/service.ts +++ b/packages/vue/src/toast/src/service.ts @@ -35,6 +35,8 @@ export default (configs = {}) => { parent.appendChild(instance.$el) setTimeout(() => { + console.log(instance) + instance.state.timeout() parent.removeChild(instance.$el) }, instance.state.time) From 5475c8bb3777bcf26430ec01b0ab1628021ec791 Mon Sep 17 00:00:00 2001 From: jacknan Date: Mon, 6 Nov 2023 20:33:00 +0800 Subject: [PATCH 5/9] =?UTF-8?q?feat(toast):=20=E5=88=A0=E9=99=A4=E6=97=A0?= =?UTF-8?q?=E7=94=A8=E4=BB=A3=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: jacknan --- packages/vue/src/toast/src/mobile.vue | 3 +-- packages/vue/src/toast/src/service.ts | 1 - 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/vue/src/toast/src/mobile.vue b/packages/vue/src/toast/src/mobile.vue index a3f5a4dd87..a88fd680f8 100644 --- a/packages/vue/src/toast/src/mobile.vue +++ b/packages/vue/src/toast/src/mobile.vue @@ -14,12 +14,11 @@ import { props, setup, defineComponent } from '@opentiny/vue-common' import { renderless, api } from '@opentiny/vue-renderless/toast/vue' import '@opentiny/vue-theme-mobile/toast/index.less' -import { IconMobileErrorWhite, IconMobileSuccessWhite, IconLoading } from '@opentiny/vue-icon' +import { IconMobileErrorWhite, IconMobileSuccessWhite } from '@opentiny/vue-icon' import type { IToastApi } from '@opentiny/vue-renderless/types/toast.type' export default defineComponent({ components: { - iconLoading: IconLoading(), IconMobileErrorWhite: IconMobileErrorWhite(), IconMobileSuccessWhite: IconMobileSuccessWhite() }, diff --git a/packages/vue/src/toast/src/service.ts b/packages/vue/src/toast/src/service.ts index 7ab6bef51f..92fdbeff63 100644 --- a/packages/vue/src/toast/src/service.ts +++ b/packages/vue/src/toast/src/service.ts @@ -35,7 +35,6 @@ export default (configs = {}) => { parent.appendChild(instance.$el) setTimeout(() => { - console.log(instance) instance.state.timeout() parent.removeChild(instance.$el) }, instance.state.time) From f75d943bcda0550848d67c863ca4f7116f6e36c0 Mon Sep 17 00:00:00 2001 From: jacknan Date: Mon, 20 Nov 2023 14:34:03 +0800 Subject: [PATCH 6/9] =?UTF-8?q?feat(toast):=20=E6=8B=86=E5=88=86=E7=89=B9?= =?UTF-8?q?=E6=80=A7demo?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: jacknan --- .../sites/demos/mobile/app/toast/base.vue | 26 +++++------------- .../sites/demos/mobile/app/toast/failed.vue | 26 ++++++++++++++++++ .../sites/demos/mobile/app/toast/success.vue | 27 +++++++++++++++++++ .../demos/mobile/app/toast/webdoc/toast.js | 24 +++++++++++++++++ packages/vue/src/toast/src/service.ts | 5 +++- 5 files changed, 87 insertions(+), 21 deletions(-) create mode 100644 examples/sites/demos/mobile/app/toast/failed.vue create mode 100644 examples/sites/demos/mobile/app/toast/success.vue diff --git a/examples/sites/demos/mobile/app/toast/base.vue b/examples/sites/demos/mobile/app/toast/base.vue index b9fe9e9630..c17eb4eb3c 100644 --- a/examples/sites/demos/mobile/app/toast/base.vue +++ b/examples/sites/demos/mobile/app/toast/base.vue @@ -1,15 +1,17 @@ diff --git a/examples/sites/demos/mobile/app/toast/success.vue b/examples/sites/demos/mobile/app/toast/success.vue new file mode 100644 index 0000000000..6cd5d480b4 --- /dev/null +++ b/examples/sites/demos/mobile/app/toast/success.vue @@ -0,0 +1,27 @@ + + + diff --git a/examples/sites/demos/mobile/app/toast/webdoc/toast.js b/examples/sites/demos/mobile/app/toast/webdoc/toast.js index f2f74b51d7..92fdf500b8 100644 --- a/examples/sites/demos/mobile/app/toast/webdoc/toast.js +++ b/examples/sites/demos/mobile/app/toast/webdoc/toast.js @@ -13,6 +13,30 @@ export default { 'en-US': '

button type

' }, codeFiles: ['base.vue'] + }, + { + demoId: 'success', + name: { + 'zh-CN': '成功样式', + 'en-US': 'success' + }, + desc: { + 'zh-CN': '

成功提示

', + 'en-US': '

success

' + }, + codeFiles: ['success.vue'] + }, + { + demoId: 'failed', + name: { + 'zh-CN': '失败样式', + 'en-US': 'failed' + }, + desc: { + 'zh-CN': '

失败提示

', + 'en-US': '

failed

' + }, + codeFiles: ['failed.vue'] } ], apis: [ diff --git a/packages/vue/src/toast/src/service.ts b/packages/vue/src/toast/src/service.ts index 92fdbeff63..e653cad983 100644 --- a/packages/vue/src/toast/src/service.ts +++ b/packages/vue/src/toast/src/service.ts @@ -35,7 +35,10 @@ export default (configs = {}) => { parent.appendChild(instance.$el) setTimeout(() => { - instance.state.timeout() + if (instance.state.timeout) { + instance.state.timeout() + } + parent.removeChild(instance.$el) }, instance.state.time) From e796a1516beedf730a161d0bb1c120968bb77497 Mon Sep 17 00:00:00 2001 From: jacknan Date: Mon, 20 Nov 2023 15:47:29 +0800 Subject: [PATCH 7/9] =?UTF-8?q?feat(toast):=20=E5=88=B7=E6=96=B0token?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: jacknan --- packages/theme-mobile/src/toast/index.less | 2 +- packages/theme-mobile/src/toast/vars.less | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/theme-mobile/src/toast/index.less b/packages/theme-mobile/src/toast/index.less index 78a7b9e01a..9612a5bb36 100644 --- a/packages/theme-mobile/src/toast/index.less +++ b/packages/theme-mobile/src/toast/index.less @@ -36,7 +36,7 @@ padding: 20px; background-color: var(--ti-mobile-toast-bg-color-primary); border-radius: 16px; - box-shadow: 0 8px 48px 0 var(--ti-mobile-toast-shadow-color-primary); + 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); diff --git a/packages/theme-mobile/src/toast/vars.less b/packages/theme-mobile/src/toast/vars.less index 1dcfbaef94..d607ac0e87 100644 --- a/packages/theme-mobile/src/toast/vars.less +++ b/packages/theme-mobile/src/toast/vars.less @@ -12,9 +12,9 @@ .component-css-vars-toast() { --ti-mobile-toast-bg-color-primary: rgb(77 77 77 / 95%); - --ti-mobile-toast-shadow-color-primary: rgb(0 0 0 / 30%); --ti-mobile-toast-text-color-primary: var(--ti-mobile-common-color-text-whit, #fff); --ti-mobile-toast-width-max: 90%; --ti-mobile-toast-text-font-size: 14px; --ti-mobile-toast-icon-font-size: 36px; + --ti-mobile-toast-shadow: var(--ti-mobile-shadow-s, 0 0 20px 0 rgb(0 0 0 / 8%)); } From 91cd8392ce2d9445ddd56b280414740935e9af55 Mon Sep 17 00:00:00 2001 From: jacknan Date: Mon, 20 Nov 2023 16:38:34 +0800 Subject: [PATCH 8/9] =?UTF-8?q?feat(toast):=20=E5=88=B7=E6=96=B0token?= =?UTF-8?q?=E5=AE=9A=E4=B9=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: jacknan --- packages/theme-mobile/src/toast/index.less | 14 +++++++------- packages/theme-mobile/src/toast/vars.less | 18 +++++++++++++++--- 2 files changed, 22 insertions(+), 10 deletions(-) diff --git a/packages/theme-mobile/src/toast/index.less b/packages/theme-mobile/src/toast/index.less index 9612a5bb36..f8ae7c3045 100644 --- a/packages/theme-mobile/src/toast/index.less +++ b/packages/theme-mobile/src/toast/index.less @@ -33,16 +33,16 @@ align-items: center; justify-content: center; flex-direction: column; - padding: 20px; + padding: var(--ti-mobile-toast-padding-size); background-color: var(--ti-mobile-toast-bg-color-primary); - border-radius: 16px; + 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 20px; - border-radius: 18px; + padding: 7px 0; } } @@ -50,11 +50,11 @@ word-wrap: break-word; word-break: break-all; font-size: var(--ti-mobile-toast-text-font-size); - color: white; + color: var(--ti-mobile-toast-text-color-primary, #fff); } &-icon { - padding-bottom: 8px; - font-size: var(--ti-mobile-toast-icon-font-size); + padding-bottom: var(--ti-mobile-toast-padding-bottom); + font-size: var(--ti-mobile-toast-icon-size); } } diff --git a/packages/theme-mobile/src/toast/vars.less b/packages/theme-mobile/src/toast/vars.less index d607ac0e87..4f27e21cb1 100644 --- a/packages/theme-mobile/src/toast/vars.less +++ b/packages/theme-mobile/src/toast/vars.less @@ -11,10 +11,22 @@ */ .component-css-vars-toast() { + // 背景色 --ti-mobile-toast-bg-color-primary: rgb(77 77 77 / 95%); - --ti-mobile-toast-text-color-primary: var(--ti-mobile-common-color-text-whit, #fff); + // 文字颜色 + --ti-mobile-toast-text-color-primary: var(--ti-mobile-color-text-inverse, #fff); + // 组件最大宽度 --ti-mobile-toast-width-max: 90%; - --ti-mobile-toast-text-font-size: 14px; - --ti-mobile-toast-icon-font-size: 36px; + // 文字尺寸 + --ti-mobile-toast-text-font-size: var(--ti-mobile-font-size-m, 14px); + // 图标尺寸 + --ti-mobile-toast-icon-size: 36px; + // 阴影 --ti-mobile-toast-shadow: var(--ti-mobile-shadow-s, 0 0 20px 0 rgb(0 0 0 / 8%)); + // 边距 + --ti-mobile-toast-padding-size: var(--ti-mobile-space-4x, 16px); + // 圆角尺寸 + --ti-mobile-toast-border-radius: var(--ti-mobile-border-radius-xl, 16px); + // 图标下边距 + --ti-mobile-toast-padding-bottom: var(--ti-mobile-space-2x, 8px); } From d9640e523b41c596ac803ce3c9d3d508517bf9a3 Mon Sep 17 00:00:00 2001 From: jacknan Date: Mon, 20 Nov 2023 17:03:18 +0800 Subject: [PATCH 9/9] =?UTF-8?q?feat(toast):=20=E5=88=A0=E9=99=A4=E6=97=A0?= =?UTF-8?q?=E7=94=A8=E6=96=87=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: jacknan --- packages/theme-mobile/src/toast/index.js | 20 -------------------- 1 file changed, 20 deletions(-) delete mode 100644 packages/theme-mobile/src/toast/index.js diff --git a/packages/theme-mobile/src/toast/index.js b/packages/theme-mobile/src/toast/index.js deleted file mode 100644 index e704668333..0000000000 --- a/packages/theme-mobile/src/toast/index.js +++ /dev/null @@ -1,20 +0,0 @@ -/** - * 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. - * - */ - -export default { - '--ti-mobile-toast-bg-color-primary': 'rgb(77 77 77 / 95%)', - '--ti-mobile-toast-shadow-color-primary': 'rgb(0 0 0 / 30%)', - '--ti-mobile-toast-text-color-primary': '#fff', - '--ti-mobile-toast-width-max': '90%', - '--ti-mobile-toast-text-font-size': '14px', - '--ti-mobile-toast-icon-font-size': '36px' -}