@tuya/miniapp-smart-ui 2.13.5-beta-0

package/dist/tag/index.js

@@ -0,0 +1,33 @@
+import Xmark from '@tuya-miniapp/icons/dist/svg/Xmark';
+import { SmartComponent } from '../common/component';
+SmartComponent({
+    props: {
+        size: String,
+        mark: Boolean,
+        color: String,
+        plain: Boolean,
+        round: Boolean,
+        textColor: {
+            type: String,
+            // value:'#fff'
+        },
+        type: {
+            type: String,
+            value: 'default',
+        },
+        closeable: Boolean,
+        closeIconAriaLabel: {
+            type: String,
+            value: '',
+        },
+    },
+    data: {
+        crossIcon: Xmark,
+        closeColor: '#fff',
+    },
+    methods: {
+        onClose() {
+            this.$emit('close');
+        },
+    },
+});

package/dist/tag/index.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "smart-icon": "../icon/index"
+  }
+}

package/dist/tag/index.wxml

@@ -0,0 +1,19 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+<wxs src="./index.wxs" module="computed" />
+
+<view
+  class="custom-class {{ utils.bem('tag', [type, size, { mark, plain, round }]) }}"
+  style="{{ computed.rootStyle({ plain, color, textColor }) }}"
+>
+  <slot />
+  <smart-icon
+    wx:if="{{ closeable }}"
+    name="{{crossIcon}}"
+    custom-class="smart-tag__close"
+    ariaRole="button"
+    ariaLabel="{{ closeIconAriaLabel }}"
+    bind:click="onClose"
+    color="{{textColor || closeColor}}"
+  />
+  
+</view>

package/dist/tag/index.wxs

@@ -0,0 +1,13 @@
+/* eslint-disable */
+var style = require('../wxs/style.wxs');
+
+function rootStyle(data) {
+  return style({
+    'background-color': data.plain ? '' : data.color,
+    color: data.textColor || data.plain ? data.textColor || data.color : '',
+  });
+}
+
+module.exports = {
+  rootStyle: rootStyle,
+};

package/dist/tag/index.wxss

@@ -0,0 +1 @@
+@import '../common/index.wxss';:root{--smart-ui-overlay:rgba(0,0,0,.4);--smart-ui-bottom-sheet-dragger-node-background:rgba(0,0,0,.3);--smart-ui-dialog-background:var(--app-B4,#fff);--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent);--smart-ui-battery-body-base-background:rgba(0,0,0,.25);--smart-ui-battery-text-color:rgba(0,0,0,.6);--smart-ui-battery-slash-border-color:#fff;--smart-ui-toast-background:#5c5c5c;--smart-ui-toast-border:1px solid hsla(0,0%,100%,.05);--smart-ui-toast-box-shadow:0 4px 12px rgba(0,0,0,.1),0 16px 32px rgba(0,0,0,.12);--smart-ui-overlay-blur-background:rgba(40,44,53,.22)}:root[theme=dark]{--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-bottom-sheet-dragger-node-background:hsla(0,0%,100%,.3);--smart-ui-dialog-background:linear-gradient(0deg,var(--app-B4-N6),var(--app-B4-N6)),var(--app-B1);--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0));--smart-ui-battery-body-base-background:hsla(0,0%,100%,.4);--smart-ui-battery-text-color:#fff;--smart-ui-battery-slash-border-color:#000;--smart-ui-toast-background:#3c3c3c;--smart-ui-toast-border:1px solid hsla(0,0%,100%,.05);--smart-ui-toast-box-shadow:0 8px 24px 0 rgba(0,0,0,.15);--smart-ui-overlay-blur-background:rgba(0,0,0,.6)}.smart-manrope{font-family:Manrope,sans-serif}.smart-tag{align-items:center;border-radius:var(--tag-border-radius,4px);color:var(--tag-text-color,#fff);display:inline-flex;font-size:var(--tag-font-size,12px);line-height:var(--tag-line-height,17px);padding:var(--tag-padding,2px 8px);position:relative}.smart-tag--default{background-color:var(--tag-default-color,#969799)}.smart-tag--default.smart-tag--plain{color:var(--tag-default-color,#969799)}.smart-tag--danger{background-color:var(--tag-danger-color,#ee0a24)}.smart-tag--danger.smart-tag--plain{color:var(--tag-danger-color,#ee0a24)}.smart-tag--primary{background-color:var(--tag-primary-color,#1989fa)}.smart-tag--primary.smart-tag--plain{color:var(--tag-primary-color,#1989fa)}.smart-tag--success{background-color:var(--tag-success-color,#07c160)}.smart-tag--success.smart-tag--plain{color:var(--tag-success-color,#07c160)}.smart-tag--warning{background-color:var(--tag-warning-color,#ff976a)}.smart-tag--warning.smart-tag--plain{color:var(--tag-warning-color,#ff976a)}.smart-tag--plain{background-color:var(--tag-plain-background-color,transparent)}.smart-tag--plain:before{border:1px solid;border-radius:inherit;bottom:0;content:"";left:0;pointer-events:none;position:absolute;right:0;top:0}.smart-tag--medium{font-size:var(--tag-medium-font-size,14px);line-height:var(--tag-medium-line-height,20px)}.smart-tag--large{font-size:var(--tag-large-font-size,16px);line-height:var(--tag-large-line-height,22px)}.smart-tag--mark{border-radius:0 var(--tag-round-border-radius,999px) var(--tag-round-border-radius,999px) 0}.smart-tag--mark:after{content:"";display:block;width:2px}.smart-tag--round{border-radius:var(--tag-round-border-radius,999px)}.smart-tag__close{margin-left:2px;min-width:1em}

package/dist/toast/README.md

@@ -0,0 +1,220 @@
+---
+category: 反馈
+---
+
+# Toast 轻提示
+
+### 介绍
+
+在页面中间弹出黑色半透明提示，用于消息通知、加载提示、操作结果提示等场景。
+
+### 引入
+
+在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](/material/smartui?comId=help-getting-started&appType=miniapp)。
+
+```json
+"usingComponents": {
+  "smart-toast": "@tuya/miniapp-smart-ui/lib/toast/index"
+}
+```
+
+## 代码演示
+
+### 文字提示
+
+```javascript
+import ToastInstance from '@tuya/miniapp-smart-ui/toast/toast';
+
+ToastInstance('我是提示文案，建议不超过十五字~');
+```
+
+```html
+<smart-toast id="smart-toast" />
+```
+
+### 加载提示
+
+使用 `ToastInstance.loading` 方法展示加载提示，通过 `forbidClick` 属性可以禁用背景点击，通过 `loadingType` 属性可以自定义加载图标类型。
+
+```javascript
+ToastInstance.loading({
+  message: '加载中...',
+  forbidClick: true,
+});
+
+// 自定义加载图标
+ToastInstance.loading({
+  message: '加载中...',
+  forbidClick: true,
+  loadingType: 'spinner',
+});
+```
+
+### 成功/失败提示
+
+```javascript
+ToastInstance.success('成功文案');
+ToastInstance.fail('失败文案');
+```
+
+
+### 警告提示
+
+```js
+ToastInstance.warn('警告文案');
+```
+
+### 动态更新提示
+
+```javascript
+const toast = ToastInstance.loading({
+  duration: 0, // 持续展示 toast
+  forbidClick: true,
+  message: '倒计时 3 秒',
+  selector: '#custom-selector',
+  width: 120,
+});
+
+let second = 3;
+const timer = setInterval(() => {
+  second--;
+  if (second) {
+    toast.setData({
+      message: `倒计时 ${second} 秒`,
+    });
+  } else {
+    clearInterval(timer);
+    ToastInstance.clear();
+  }
+}, 1000);
+```
+
+```html
+<smart-toast id="custom-selector" />
+```
+
+### OnClose 回调函数
+
+```javascript
+ToastInstance({
+  type: 'success',
+  message: '提交成功',
+  onClose: () => {
+    console.log('执行OnClose函数');
+  },
+});
+```
+
+### 自定义宽度
+
+通过 `width` 属性可以自定义弹窗宽度。
+
+```javascript
+ToastInstance.loading({
+  message: '加载中...',
+  forbidClick: true,
+  width: 200,
+});
+```
+
+### 位置设置
+
+通过 `position` 属性可以设置提示的位置，可选值为 `top`、`middle`、`bottom`。
+
+```javascript
+// 底部位置
+ToastInstance({
+  position: 'bottom',
+  message: '我是提示文案，建议不超过十五字~',
+});
+
+// 顶部位置
+ToastInstance({
+  position: 'top',
+  message: '我是提示文案，建议不超过十五字~',
+});
+```
+
+
+### 自定义颜色 `v2.8.0`
+
+通过 `textColor` 属性可以自定义文字颜色，通过 `iconColor` 属性可以自定义图标颜色。
+
+```javascript
+// 自定义文字颜色
+ToastInstance({
+  message: '我是提示文案，建议不超过十五字~',
+  textColor: '#1989FA',
+});
+
+// 自定义成功提示的颜色
+ToastInstance.success({
+  message: '成功文案',
+  textColor: '#1989FA',
+  iconColor: '#1989FA',
+});
+```
+
+## API
+
+### 方法
+
+| 方法名    | 参数   | 返回值     | 介绍   |
+| ---------- | ------------ | ---------- | --------- |
+| ToastInstance                     | `options \| message` | toast 实例 | 展示提示                        |
+| ToastInstance.clear               | `clearAll`           | `void`     | 关闭提示                        |
+| ToastInstance.fail                | `options \| message` | toast 实例 | 展示失败提示                    |
+| ToastInstance.loading             | `options \| message` | toast 实例 | 展示加载提示                    |
+| ToastInstance.resetDefaultOptions | -                    | `void`     | 重置默认配置，对所有 Toast 生效 |
+| ToastInstance.setDefaultOptions   | `options`            | `void`     | 修改默认配置，对所有 Toast 生效 |
+| ToastInstance.success             | `options \| message` | toast 实例 | 展示成功提示                    |
+
+### Options
+
+| 参数        | 说明               | 类型       | 默认值        |
+| ----------- | ------------------------ | ---------- | ------------- |
+| context     | 选择器的选择范围，可以传入自定义组件的 this 作为上下文          | _object_   | 当前页面      |
+| duration    | 展示时长(ms)，值为 0 时，toast 不会消失         | _number_   | `2000`        |
+| forbidClick | 是否禁止背景点击        | _boolean_  | `false`       |
+| loadingType | 加载图标类型, 可选值为 `spinner`     | _string_   | `circular`    |
+| mask        | 是否显示遮罩层             | _boolean_  | `false`       |
+| message     | 内容                   | _string_   | `''`          |
+| textColor `v2.8.0`   | 文字颜色               | _string_   | -             |
+| iconColor `v2.8.0`   | 图标颜色               | _string_   | `white`       |
+| onClose     | 关闭时的回调函数                  | _Function_ | -             |
+| position    | 位置，可选值为 `top` `middle` `bottom`       | _string_   | `middle`      |
+| selector    | 自定义选择器                  | _string_   | `#smart-toast` |
+| type        | 提示类型，可选值为 `loading` `success` `fail` `warn` `html` (`^v2.0.0`支持`warn`) | _string_   | `text`        |
+| zIndex      | z-index 层级                       | _number_   | `1000`        |
+| width `v2.1.7`     | 自定义弹窗宽度               | _number_   | `''`        |
+| nativeDisabled `v2.5.0`     | 开启弹框期间是否禁用本地手势       | _boolean_   | `false`        |
+
+### Slot
+
+| 名称 | 说明       |
+| ---- | ---------- |
+| -    | 自定义内容 |
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](/material/smartui?comId=config-provider&appType=miniapp)。
+
+| 名称                          | 默认值                                 | 描述 |
+| ----------------------------- | -------------------------------------- | ---- |
+| --toast-text-min-width `v2.12.0` | _96px_ | 文字提示最小宽度 |
+| --toast-text-max-width `v2.12.0` | _280px_ | 文字提示最大宽度 |
+| --toast-min-width `v2.6.0` | _56px_ `v2.6.0` _82px_ `v2.12.0` | 图标提示最小宽度 |
+| --toast-max-width | _calc(100vw - 48px)_ `v2.0.0` _280px_ `v2.12.0` | 图标提示最大宽度 |
+| --toast-font-size | _14px_ | 提示字体大小 |
+| --toast-text-color | _#fff_ | 提示文本颜色 |
+| --toast-line-height | _20px_ `v2.0.0` _16px_ `v2.12.0` | 提示行高 |
+| --toast-background-color | _rgba(0,0,0,.7)_  `v2.0.0` _#5C5C5C_ `v2.12.0` | 提示背景颜色 |
+| --toast-border-radius | _12px_ | 提示圆角半径 |
+| --toast-border `v2.12.0` | _1px solid rgba(255, 255, 255, 0.05)_ | 提示边框 |
+| --toast-box-shadow `v2.12.0` | _0 4px 12px rgba(0, 0, 0, 0.1), 0 16px 32px rgba(0, 0, 0, 0.12)_ | 提示阴影 |
+| --toast-icon-size | _36px_ | 图标提示图标大小 |
+| --toast-text-padding | _14px 16px_ | 文字提示内边距 |
+| --toast-default-padding | _22px 14px 14px_ `v2.0.0` _19px 15px_ `v2.12.0` | 图标提示内边距 |
+| --toast-default-width `@deprecated v2.12.0` | _56px_ | 提示默认宽度（已废弃，请使用 --toast-min-width） |
+| --toast-default-min-height | _56px_ | 图标提示默认最小高度 |
+| --toast-icon-text-padding-top `v2.12.0` | _8px_ | 图标提示文字上间距 |

package/dist/toast/icons.d.ts

@@ -0,0 +1,3 @@
+export declare const Success: "data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg%20class%3D%22icon%22%20width%3D%22200px%22%20height%3D%22200.00px%22%20viewBox%3D%220%200%201024%201024%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M639.232%20815.232a315.306667%20315.306667%200%200%201-127.061333%2025.898667%20314.922667%20314.922667%200%200%201-127.232-25.898667%20337.92%20337.92%200%200%201-104.832-71.338667%20337.834667%20337.834667%200%200%201-71.338667-104.832%20314.88%20314.88%200%200%201-25.898667-127.232%20317.013333%20317.013333%200%200%201%2025.728-127.061333%20335.445333%20335.445333%200%200%201%2071.338667-105.173333%20333.653333%20333.653333%200%200%201%20105.002667-71.168c39.68-17.066667%2081.92-25.6%20126.890666-25.6%2044.928%200%2087.296%208.533333%20127.061334%2025.6%2039.722667%2017.066667%2074.752%2040.789333%20105.002666%2071.168a339.2%20339.2%200%200%201%2071.338667%20105.173333c17.28%2039.765333%2025.898667%2082.133333%2025.898667%20127.061333a316.714667%20316.714667%200%200%201-25.728%20127.232%20337.322667%20337.322667%200%200%201-176.213334%20176.213334z%20m-178.901333-149.930667a32.128%2032.128%200%200%200%2016.256%204.053334c11.733333%200%2021.12-5.546667%2028.16-16.597334l150.058666-235.434666c2.261333-3.413333%204.266667-6.954667%205.930667-10.666667a26.453333%2026.453333%200%200%200%202.56-11.050667%2023.466667%2023.466667%200%200%200-8.96-19.114666%2031.146667%2031.146667%200%200%200-20.181333-7.296c-9.728%200-17.877333%205.290667-24.405334%2015.914666l-134.485333%20215.808-63.701333-81.28a35.413333%2035.413333%200%200%200-11.690667-10.88%2028.16%2028.16%200%200%200-13.056-3.029333%2026.325333%2026.325333%200%200%200-19.84%208.32%2028.032%2028.032%200%200%200-7.936%2020.138667c0%207.466667%202.816%2014.677333%208.448%2021.674666l79.274667%2097.28c4.309333%205.376%208.832%209.472%2013.568%2012.16z%22%2F%3E%3C%2Fsvg%3E";
+export declare const Alarm: "data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg%20class%3D%22icon%22%20width%3D%22200px%22%20height%3D%22200.00px%22%20viewBox%3D%220%200%201024%201024%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M512%2053.248c129.707%203.413%20237.739%2048.299%20324.096%20134.656S967.339%20382.293%20970.752%20512c-3.413%20129.707-48.299%20237.739-134.656%20324.096S641.707%20967.339%20512%20970.752c-129.707-3.413-237.739-48.299-324.096-134.656S56.661%20641.707%2053.248%20512c3.413-129.707%2048.299-237.739%20134.656-324.096S382.293%2056.661%20512%2053.248z%20m0%20196.608c-17.749%200-32.427%206.485-44.032%2019.456-11.605%2012.971-16.725%2028.331-15.36%2046.08l23.552%20262.144c1.365%209.557%205.291%2017.237%2011.776%2023.04%206.485%205.803%2014.507%208.704%2024.064%208.704s17.579-2.901%2024.064-8.704c6.485-5.803%2010.411-13.483%2011.776-23.04l23.552-262.144c1.365-17.749-3.755-33.109-15.36-46.08-11.605-12.971-26.283-19.456-44.032-19.456z%20m0%20524.288c15.019-0.683%2027.477-5.803%2037.376-15.36%209.899-9.557%2014.848-21.845%2014.848-36.864%200-15.019-4.949-27.477-14.848-37.376-9.899-9.899-22.357-14.848-37.376-14.848-15.019%200-27.477%204.949-37.376%2014.848-9.899%209.899-14.848%2022.357-14.848%2037.376%200%2015.019%204.949%2027.307%2014.848%2036.864%209.899%209.557%2022.357%2014.677%2037.376%2015.36z%22%2F%3E%3C%2Fsvg%3E";
+export declare const Error: "data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg%20t%3D%221730686926977%22%20class%3D%22icon%22%20viewBox%3D%220%200%201024%201024%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20p-id%3D%225067%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22200%22%20height%3D%22200%22%3E%3Cpath%20d%3D%22M512%20102.4a409.6%20409.6%200%201%201%200%20819.2%20409.6%20409.6%200%200%201%200-819.2z%20m159.2832%20250.3168a40.96%2040.96%200%200%200-54.0672-3.4304l-3.84%203.4304L512%20454.0416l-101.376-101.376-3.584-3.1232a40.96%2040.96%200%200%200-57.7536%2057.2416l3.4304%203.84L454.0416%20512l-101.376%20101.376-3.1232%203.584a40.96%2040.96%200%200%200%2057.2416%2057.7536l3.84-3.4304L512%20569.9584l101.376%20101.376%203.584%203.1232a40.96%2040.96%200%200%200%2057.7536-57.2416l-3.4304-3.84L569.9584%20512l101.376-101.376%203.1232-3.584a40.96%2040.96%200%200%200-3.1744-54.3232z%22%20p-id%3D%225068%22%2F%3E%3C%2Fsvg%3E";

package/dist/toast/icons.js

@@ -0,0 +1,6 @@
+import Warning from '@tuya-miniapp/icons/dist/svg/Warning';
+import CheckmarkCircle from '@tuya-miniapp/icons/dist/svg/CheckmarkCircle';
+import Close from '@tuya-miniapp/icons/dist/svg/Close';
+export const Success = CheckmarkCircle;
+export const Alarm = Warning;
+export const Error = Close;

package/dist/toast/index.css

@@ -0,0 +1 @@
+@import '../common/index.css';:root{--smart-ui-overlay:rgba(0,0,0,.4);--smart-ui-bottom-sheet-dragger-node-background:rgba(0,0,0,.3);--smart-ui-dialog-background:var(--app-B4,#fff);--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent);--smart-ui-battery-body-base-background:rgba(0,0,0,.25);--smart-ui-battery-text-color:rgba(0,0,0,.6);--smart-ui-battery-slash-border-color:#fff;--smart-ui-toast-background:#5c5c5c;--smart-ui-toast-border:1px solid hsla(0,0%,100%,.05);--smart-ui-toast-box-shadow:0 4px 12px rgba(0,0,0,.1),0 16px 32px rgba(0,0,0,.12);--smart-ui-overlay-blur-background:rgba(40,44,53,.22)}:root[theme=dark]{--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-bottom-sheet-dragger-node-background:hsla(0,0%,100%,.3);--smart-ui-dialog-background:linear-gradient(0deg,var(--app-B4-N6),var(--app-B4-N6)),var(--app-B1);--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0));--smart-ui-battery-body-base-background:hsla(0,0%,100%,.4);--smart-ui-battery-text-color:#fff;--smart-ui-battery-slash-border-color:#000;--smart-ui-toast-background:#3c3c3c;--smart-ui-toast-border:1px solid hsla(0,0%,100%,.05);--smart-ui-toast-box-shadow:0 8px 24px 0 rgba(0,0,0,.15);--smart-ui-overlay-blur-background:rgba(0,0,0,.6)}.smart-manrope{font-family:Manrope,sans-serif}:root{--smart-a11y-action-sheet-item-text-color:#000}:root[theme=dark]{--smart-a11y-action-sheet-item-text-color:#fff}.smart-toast{word-wrap:break-word;align-items:center;background-color:var(--toast-background-color,var(--smart-ui-toast-background,#5c5c5c));border:var(--toast-border,var(--smart-ui-toast-border,1px solid hsla(0,0%,100%,.05)));border-radius:var(--toast-border-radius,12px);box-shadow:var(--toast-box-shadow,var(--smart-ui-toast-box-shadow,0 4px 12px rgba(0,0,0,.1),0 16px 32px rgba(0,0,0,.12)));box-sizing:initial;color:var(--toast-text-color,#fff);display:flex;flex-direction:column;font-size:var(--toast-font-size,14px);justify-content:center;line-height:var(--toast-line-height,16px);white-space:pre-wrap}.smart-toast__container{left:50%;position:fixed;right:-1000px;top:50%;transform:translate(-50%,-50%);width:-webkit-fit-content;width:fit-content}.smart-toast--text{max-width:var(--toast-text-max-width,280px);min-width:var(--toast-text-min-width,124px);padding:var(--toast-text-padding,14px 16px)}.smart-toast--icon{box-sizing:border-box;max-width:var(--toast-max-width,280px);min-height:var(--toast-default-min-height,56px);min-width:var(--toast-min-width,82px);padding:var(--toast-default-padding,19px 15px)}.smart-toast--icon .smart-toast__icon{font-size:var(--toast-icon-size,36px)}.smart-toast--icon .smart-toast__text{font-size:var(--toast-font-size,14px);padding-top:var(--toast-icon-text-padding-top,8px)}.smart-toast__loading{margin:10px 0}.smart-toast--top{transform:translateY(-30vh) translate(-50%,-50%)}.smart-toast--bottom{transform:translateY(30vh) translate(-50%,-50%)}:root[data-a11y=true] .smart-toast{font-weight:var(--toast-font-weight,600);line-height:var(--toast-line-height,27px)}:root[data-a11y=true] .smart-toast,:root[data-a11y=true] .smart-toast .smart-toast__text{font-size:var(--toast-font-size,18px)}

package/dist/toast/index.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/toast/index.js

@@ -0,0 +1,62 @@
+import { Success, Alarm, Error } from './icons';
+import { SmartComponent } from '../common/component';
+import { registerToastContext, unregisterToastContext } from './toast';
+import appLog from '../common/appLog';
+SmartComponent({
+    props: {
+        show: Boolean,
+        mask: Boolean,
+        message: String,
+        forbidClick: Boolean,
+        nativeDisabled: Boolean,
+        iconColor: {
+            type: String,
+            value: 'white',
+        },
+        textColor: String,
+        zIndex: {
+            type: Number,
+            value: 1000,
+        },
+        type: {
+            type: String,
+            value: 'text',
+        },
+        loadingType: {
+            type: String,
+            value: 'circular',
+        },
+        position: {
+            type: String,
+            value: 'middle',
+        },
+        width: {
+            type: Number,
+        },
+    },
+    data: {
+        success: Success,
+        error: Error,
+        warn: Alarm,
+    },
+    mounted: function () {
+        if (!this.id)
+            return;
+        const repeated = registerToastContext(`#${this.id}`, this);
+        if (repeated) {
+            console.error(`Toast component #${this.id} repeated!`);
+            appLog.info(`Toast component #${this.id} repeated!`);
+        }
+        appLog.info(`Toast #${this.id} mounted`);
+    },
+    destroyed: function () {
+        if (!this.id)
+            return;
+        unregisterToastContext(`#${this.id}`, this);
+        appLog.info(`Toast #${this.id} destroyed`);
+    },
+    methods: {
+        // for prevent touchmove
+        noop() { },
+    },
+});

package/dist/toast/index.json

@@ -0,0 +1,9 @@
+{
+  "component": true,
+  "usingComponents": {
+    "smart-icon": "../icon/index",
+    "smart-loading": "../loading/index",
+    "smart-overlay": "../overlay/index",
+    "smart-transition": "../transition/index"
+  }
+}

package/dist/toast/index.wxml

@@ -0,0 +1,33 @@
+<smart-overlay
+  wx:if="{{ mask || forbidClick }}"
+  show="{{ show }}"
+  z-index="{{ zIndex }}"
+  custom-style="{{ mask ? '' : 'background-color: transparent;backdrop-filter: none;-webkit-backdrop-filter: none;' }}"
+/>
+<smart-transition
+  show="{{ show }}"
+  custom-style="z-index: {{ zIndex }}"
+  custom-class="smart-toast__container smart-toast--{{ position }}"
+>
+  <view
+    class="smart-toast smart-toast--{{ (type === 'text' || type === 'html') ? 'text' : 'icon' }}"
+    catch:touchmove="noop"
+    style="{{ width ? ('width: ' + width + 'px') : '' }}"
+  >
+  
+    <!-- text only -->
+    <text class="smart-toast__text" style="{{ textColor ? ('color: ' + textColor) : '' }}" wx:if="{{ type === 'text' }}">{{ message }}</text>
+
+    <!-- html only -->
+    <rich-text wx:elif="{{ type === 'html' }}" nodes="{{ message }}" style="{{ textColor ? ('color: ' + textColor) : '' }}"></rich-text>
+
+    <!-- with icon -->
+    <block wx:else>
+      <smart-loading wx:if="{{ type === 'loading' }}" color="{{iconColor}}" style="transform:scale(1.6);" type="{{loadingType}}" />
+      <smart-icon wx:else color="{{iconColor}}" class="smart-toast__icon" style="transform:scale({{ type === 'success' ? 1.4 : type === 'fail' ? 1.1 : 1 }})" name="{{ type === 'success' ? success : type === 'fail' ? error : type === 'warn' ? warn : success }}" />
+      <text wx:if="{{ message }}" class="smart-toast__text" style="{{ textColor ? ('color: ' + textColor) : '' }}">{{ message }}</text>
+    </block>
+
+    <slot />
+  </view>
+</smart-transition>

package/dist/toast/index.wxss

@@ -0,0 +1 @@
+@import '../common/index.wxss';:root{--smart-ui-overlay:rgba(0,0,0,.4);--smart-ui-bottom-sheet-dragger-node-background:rgba(0,0,0,.3);--smart-ui-dialog-background:var(--app-B4,#fff);--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent);--smart-ui-battery-body-base-background:rgba(0,0,0,.25);--smart-ui-battery-text-color:rgba(0,0,0,.6);--smart-ui-battery-slash-border-color:#fff;--smart-ui-toast-background:#5c5c5c;--smart-ui-toast-border:1px solid hsla(0,0%,100%,.05);--smart-ui-toast-box-shadow:0 4px 12px rgba(0,0,0,.1),0 16px 32px rgba(0,0,0,.12);--smart-ui-overlay-blur-background:rgba(40,44,53,.22)}:root[theme=dark]{--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-bottom-sheet-dragger-node-background:hsla(0,0%,100%,.3);--smart-ui-dialog-background:linear-gradient(0deg,var(--app-B4-N6),var(--app-B4-N6)),var(--app-B1);--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0));--smart-ui-battery-body-base-background:hsla(0,0%,100%,.4);--smart-ui-battery-text-color:#fff;--smart-ui-battery-slash-border-color:#000;--smart-ui-toast-background:#3c3c3c;--smart-ui-toast-border:1px solid hsla(0,0%,100%,.05);--smart-ui-toast-box-shadow:0 8px 24px 0 rgba(0,0,0,.15);--smart-ui-overlay-blur-background:rgba(0,0,0,.6)}.smart-manrope{font-family:Manrope,sans-serif}:root{--smart-a11y-action-sheet-item-text-color:#000}:root[theme=dark]{--smart-a11y-action-sheet-item-text-color:#fff}.smart-toast{word-wrap:break-word;align-items:center;background-color:var(--toast-background-color,var(--smart-ui-toast-background,#5c5c5c));border:var(--toast-border,var(--smart-ui-toast-border,1px solid hsla(0,0%,100%,.05)));border-radius:var(--toast-border-radius,12px);box-shadow:var(--toast-box-shadow,var(--smart-ui-toast-box-shadow,0 4px 12px rgba(0,0,0,.1),0 16px 32px rgba(0,0,0,.12)));box-sizing:initial;color:var(--toast-text-color,#fff);display:flex;flex-direction:column;font-size:var(--toast-font-size,14px);justify-content:center;line-height:var(--toast-line-height,16px);white-space:pre-wrap}.smart-toast__container{left:50%;position:fixed;right:-1000px;top:50%;transform:translate(-50%,-50%);width:-webkit-fit-content;width:fit-content}.smart-toast--text{max-width:var(--toast-text-max-width,280px);min-width:var(--toast-text-min-width,124px);padding:var(--toast-text-padding,14px 16px)}.smart-toast--icon{box-sizing:border-box;max-width:var(--toast-max-width,280px);min-height:var(--toast-default-min-height,56px);min-width:var(--toast-min-width,82px);padding:var(--toast-default-padding,19px 15px)}.smart-toast--icon .smart-toast__icon{font-size:var(--toast-icon-size,36px)}.smart-toast--icon .smart-toast__text{font-size:var(--toast-font-size,14px);padding-top:var(--toast-icon-text-padding-top,8px)}.smart-toast__loading{margin:10px 0}.smart-toast--top{transform:translateY(-30vh) translate(-50%,-50%)}.smart-toast--bottom{transform:translateY(30vh) translate(-50%,-50%)}:root[data-a11y=true] .smart-toast{font-weight:var(--toast-font-weight,600);line-height:var(--toast-line-height,27px)}:root[data-a11y=true] .smart-toast,:root[data-a11y=true] .smart-toast .smart-toast__text{font-size:var(--toast-font-size,18px)}

package/dist/toast/toast.d.ts

@@ -0,0 +1,55 @@
+/// <reference types="miniprogram-api-typings" />
+/// <reference types="miniprogram-api-typings" />
+type ToastMessage = string | number;
+type ToastContext = WechatMiniprogram.Component.TrivialInstance | WechatMiniprogram.Page.TrivialInstance;
+interface ToastOptions {
+    show?: boolean;
+    type?: string;
+    mask?: boolean;
+    zIndex?: number;
+    nativeDisabled?: boolean;
+    context?: (() => ToastContext) | ToastContext;
+    position?: string;
+    duration?: number;
+    textColor?: string;
+    iconColor?: string;
+    selector?: string;
+    forbidClick?: boolean;
+    ignoreQueue?: boolean;
+    loadingType?: string;
+    message?: ToastMessage;
+    width?: number;
+    onClose?: () => void;
+}
+interface ToastContextEntry {
+    page: ToastContext;
+    instance: WechatMiniprogram.Component.TrivialInstance | null;
+}
+/**
+ * selector -> 该 selector 下所有存活的 toast 实例。
+ * 一个 selector（id）可以同时挂在多个页面（多 webview）上，因此用数组记录，
+ * 而不再是「一个 selector 只对应一个 page」的单槽结构。
+ * 为向后兼容，仍容忍外部直接赋值为单个 page（非数组）的旧写法。
+ */
+export declare const contextRef: {
+    value: Record<string, ToastContext | ToastContextEntry[] | null>;
+};
+/**
+ * 组件挂载时登记自身。同一 selector 在「同一个页面」上重复挂载才算冲突，
+ * 不同页面共用同一 selector 是被允许的（这正是「每页挂一个默认 toast」的场景）。
+ * @returns 是否与同页已有实例冲突（供组件层打印 repeated 提示）。
+ */
+export declare function registerToastContext(selector: string, instance: WechatMiniprogram.Component.TrivialInstance): boolean;
+/** 组件卸载时精确移除自身，不影响其它页面上同 selector 的实例。 */
+export declare function unregisterToastContext(selector: string, instance: WechatMiniprogram.Component.TrivialInstance): void;
+declare function Toast(toastOptions: ToastOptions | ToastMessage): WechatMiniprogram.Component.TrivialInstance | undefined;
+declare namespace Toast {
+    var loading: (options: ToastMessage | ToastOptions) => WechatMiniprogram.Component.TrivialInstance | undefined;
+    var success: (options: ToastMessage | ToastOptions) => WechatMiniprogram.Component.TrivialInstance | undefined;
+    var fail: (options: ToastMessage | ToastOptions) => WechatMiniprogram.Component.TrivialInstance | undefined;
+    var warn: (options: ToastMessage | ToastOptions) => WechatMiniprogram.Component.TrivialInstance | undefined;
+    var clear: () => void;
+    var setDefaultOptions: (options: ToastOptions) => void;
+    var resetDefaultOptions: () => void;
+}
+export default Toast;

package/dist/toast/toast.js

@@ -0,0 +1,162 @@
+import appLog from '../common/appLog';
+import { getCurrentPage } from '../common/utils';
+import { isObj } from '../common/validator';
+import tyApi from '../common/ty';
+const defaultOptions = {
+    type: 'text',
+    mask: false,
+    nativeDisabled: false,
+    message: '',
+    show: true,
+    zIndex: 1000,
+    duration: 2000,
+    ignoreQueue: false,
+    position: 'middle',
+    forbidClick: false,
+    loadingType: 'circular',
+    selector: '#smart-toast',
+    textColor: '',
+    iconColor: 'white',
+    width: '',
+};
+const queueRef = {
+    value: [],
+};
+const preDisRef = {
+    value: {},
+};
+// @ts-expect-error
+let currentOptions = Object.assign({}, defaultOptions);
+function parseOptions(message) {
+    return isObj(message) ? message : { message };
+}
+/**
+ * selector -> 该 selector 下所有存活的 toast 实例。
+ * 一个 selector（id）可以同时挂在多个页面（多 webview）上，因此用数组记录，
+ * 而不再是「一个 selector 只对应一个 page」的单槽结构。
+ * 为向后兼容，仍容忍外部直接赋值为单个 page（非数组）的旧写法。
+ */
+export const contextRef = {
+    value: {},
+};
+/**
+ * 组件挂载时登记自身。同一 selector 在「同一个页面」上重复挂载才算冲突，
+ * 不同页面共用同一 selector 是被允许的（这正是「每页挂一个默认 toast」的场景）。
+ * @returns 是否与同页已有实例冲突（供组件层打印 repeated 提示）。
+ */
+export function registerToastContext(selector, instance) {
+    const existing = contextRef.value[selector];
+    const list = Array.isArray(existing) ? existing : [];
+    contextRef.value[selector] = list;
+    const page = getCurrentPage();
+    const samePage = list.find(entry => entry.page === page);
+    if (samePage) {
+        samePage.instance = instance;
+        return true;
+    }
+    list.push({ page, instance });
+    return false;
+}
+/** 组件卸载时精确移除自身，不影响其它页面上同 selector 的实例。 */
+export function unregisterToastContext(selector, instance) {
+    const existing = contextRef.value[selector];
+    if (!Array.isArray(existing)) {
+        return;
+    }
+    contextRef.value[selector] = existing.filter(entry => entry.instance !== instance);
+}
+/**
+ * 解析目标实例所在的上下文：优先命中「当前页面」上的实例，
+ * 其次退回最后挂载的实例（栈顶，覆盖跨页/非当前页场景），
+ * 同时兼容外部直接赋值单个 page 的旧写法。
+ */
+function resolveContextEntry(selector) {
+    const existing = contextRef.value[selector];
+    if (!existing) {
+        return null;
+    }
+    if (!Array.isArray(existing)) {
+        // 兼容旧结构：value[selector] 直接是一个 page
+        return { page: existing, instance: null };
+    }
+    if (!existing.length) {
+        return null;
+    }
+    const currentPage = getCurrentPage();
+    return existing.find(entry => entry.page === currentPage) || existing[existing.length - 1];
+}
+function Toast(toastOptions) {
+    const options = Object.assign(Object.assign({}, currentOptions), parseOptions(toastOptions));
+    appLog.info('start open Toast');
+    const explicitContext = typeof options.context === 'function' ? options.context() : options.context;
+    const entry = explicitContext ? null : resolveContextEntry(options.selector);
+    const context = explicitContext || (entry === null || entry === void 0 ? void 0 : entry.page) || getCurrentPage();
+    const toast = context.selectComponent(options.selector) || (entry === null || entry === void 0 ? void 0 : entry.instance) || null;
+    appLog.info(`toast selector: ${options.selector}`);
+    appLog.info(`toast component ${toast ? 'success' : 'fail'}`);
+    if (!toast) {
+        console.warn(`未找到 ${options.selector || '#smart-toast'} 节点，请确认 selector 及 context 是否正确`);
+        appLog.info(`未找到 ${options.selector || '#smart-toast'} 节点，请确认 selector 及 context 是否正确`);
+        return;
+    }
+    delete options.context;
+    delete options.selector;
+    toast.clear = () => {
+        toast.setData({ show: false });
+        if (options.nativeDisabled) {
+            tyApi.nativeDisabled(false);
+        }
+        preDisRef.value[options.selector] = false;
+        if (options.onClose) {
+            options.onClose();
+        }
+    };
+    queueRef.value.push(toast);
+    toast.setData(options);
+    if (options.nativeDisabled) {
+        tyApi.nativeDisabled(true);
+    }
+    if (preDisRef.value[options.selector] && !options.nativeDisabled) {
+        tyApi.nativeDisabled(false);
+    }
+    preDisRef.value[options.selector] = options.nativeDisabled || false;
+    clearTimeout(toast.timer);
+    if (options.duration != null && options.duration > 0) {
+        toast.timer = setTimeout(() => {
+            toast.clear();
+            queueRef.value = queueRef.value.filter(item => item !== toast);
+            appLog.info(`toast ${options.selector} cleared`);
+        }, options.duration);
+    }
+    return toast;
+}
+const createMethod = (type) => (options) => {
+    if (type === 'success') {
+        tyApi.notificationVibrate({ type: 'success' });
+    }
+    else if (type === 'fail') {
+        tyApi.notificationVibrate({ type: 'error' });
+    }
+    else if (type === 'warn') {
+        tyApi.notificationVibrate({ type: 'warning' });
+    }
+    return Toast(Object.assign({ type }, parseOptions(options)));
+};
+Toast.loading = createMethod('loading');
+Toast.success = createMethod('success');
+Toast.fail = createMethod('fail');
+Toast.warn = createMethod('warn');
+Toast.clear = () => {
+    queueRef.value.forEach(toast => {
+        toast.clear();
+    });
+    queueRef.value = [];
+};
+Toast.setDefaultOptions = (options) => {
+    Object.assign(currentOptions, options);
+};
+Toast.resetDefaultOptions = () => {
+    // @ts-expect-error
+    currentOptions = Object.assign({}, defaultOptions);
+};
+export default Toast;