@tuya-miniapp/smart-ui 2.13.2-beta-0 → 2.13.2-beta-2

package/dist/notice-bar/README.md

@@ -0,0 +1,216 @@
+---
+category: 展示
+new: true
+---
+
+# NoticeBar 通知栏
+
+> v2.0.0 开始加入
+
+### 介绍
+
+用于循环播放展示一组消息通知。
+
+### 引入
+
+在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](/material/smartui?comId=help-getting-started&appType=miniapp)。
+
+```json
+"usingComponents": {
+  "smart-notice-bar": "@tuya-miniapp/smart-ui/lib/notice-bar/index"
+}
+```
+
+## 代码演示
+
+### 基础用法
+
+文字较长时，可以通过设置 `wrapable` 属性来开启多行展示。`type` 可以设置通知的类型。
+```tsx
+import Warning from '@tuya-miniapp/icons/dist/svg/Warning';
+<smart-notice-bar
+  wrapable
+  type="info"
+  left-icon="{{ Warning }}"
+  custom-style="margin-bottom: 10px;"
+  text="如果是家中常住成员，建议您将他设为家庭成员，共享家中所有设备和智能场景。"
+  btnText="家庭设置"
+/>
+<smart-notice-bar
+  wrapable
+  type="warning"
+  left-icon="{{ Warning }}"
+  custom-style="margin-bottom: 10px;"
+  text="如果是家中常住成员，建议您将他设为家庭成员，共享家中所有设备和智能场景。"
+  btnText="家庭设置"
+/>
+<smart-notice-bar
+  wrapable
+  type="error"
+  left-icon="{{ Warning }}"
+  text="如果是家中常住成员，建议您将他设为家庭成员，共享家中所有设备和智能场景。"
+  btnText="家庭设置"
+/>
+```
+### 基础用法
+
+`mode` 设置为 `closeable` 则可以将此通知关闭，页面刷新后还会再次出现。
+```tsx
+import Warning from '@tuya-miniapp/icons/dist/svg/Warning';
+<smart-notice-bar
+  wrapable
+  mode="closeable"
+  left-icon="{{ Warning }}"
+  text="如果是家中常住成员，建议您将他设为家庭成员，共享家中所有设备和智能场景。"
+  btnText="家庭设置"
+/>
+```
+
+### 溢出滚动
+
+通知栏的内容长度溢出时会自动开启滚动播放，通过 `scrollable` 属性可以控制该行为。`speed` 可以控制滚动的速度。
+
+```html
+<!-- 文字较短时，通过设置 scrollable 属性开启滚动播放 -->
+<smart-notice-bar speed="100" scrollable text="技术是开发它的人的共同灵魂。" />
+
+<!-- 文字较长时，通过禁用 scrollable 属性关闭滚动播放 -->
+<smart-notice-bar
+  scrollable="{{ false }}"
+  text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。"
+/>
+```
+
+### 自定义样式
+
+```tsx
+import Warning from '@tuya-miniapp/icons/dist/svg/Warning';
+<smart-notice-bar
+  wrapable
+  left-icon="{{ Warning }}"
+  text="如果是家中常住成员，建议您将他设为家庭成员，共享家中所有设备和智能场景。"
+  btnText="家庭设置"
+  background="rgba(25, 137, 250, 0.1)"
+  color="#1989FA"
+  leftIconColor="#0009FA"
+  btnTextColor="#0009FA"
+/>
+```
+
+### 链接模式
+
+设置 `mode`为`link`组件会自动在右侧出现一个箭头图标，点击组件也会增加`hover`样式。点击后会跳转到对应的`url` 路由导航地址。
+```tsx
+import Warning from '@tuya-miniapp/icons/dist/svg/Warning';
+<smart-notice-bar
+  scrollable="{{ false }}"
+  mode="link"
+  openType="navigateTo"
+  url="/pages/cell/index"
+  left-icon="{{ Warning }}"
+  text="如果是家中常住成员，建议您将他设为家庭成员，共享家中所有设备和智能场景。"
+/>
+```
+
+### 使用插槽
+
+组件内部的所有部分都可以通过插槽插入来自定义内容。
+```tsx
+import SpeakerWaveLoud from '@tuya-miniapp/icons/dist/svg/SpeakerWaveLoud';
+import Warning from '@tuya-miniapp/icons/dist/svg/Warning';
+<smart-notice-bar wrapable>
+  <smart-icon 
+    size="16" 
+    color="#1989FA" 
+    style="margin-right: 8px;" 
+    slot="left-icon" 
+    name="{{ SpeakerWaveLoud }}"
+  ></smart-icon>
+  <text>如果是家中常住成员，建议您将他设为家庭成员，共享家中所有设备和智能场景。</text>
+  <text style="color: #1989FA">家庭设置</text>
+  <smart-icon 
+    size="16" 
+    color="#1989FA" 
+    slot="right-icon" 
+    style="margin-left: 8px;" 
+    name="{{ Warning }}"
+  ></smart-icon>
+</smart-notice-bar>
+```
+
+## API
+
+### Props
+
+| 参数       | 说明                                     | 类型      | 默认值     |
+| ---------- | ---------------------------------------- | --------- | ---------- |
+| text       | 通知文本内容                             | _string_  | `''`       |
+| btn-text   | 按钮文本内容                             | _string_  | `''`       |
+| btn-text-color   | 按钮文本颜色                       | _string_  | `''`       |
+| type   | 通知类型，可选值为 `info` `warning` `error`   | _string_  | `'info'`       |
+| background | 滚动条背景                               | _string_  | `rgba(25, 137, 250, 0.1)`  |
+| close-icon-aria-label `v2.13.0` | 关闭按钮的无障碍读屏文案，透传至关闭图标的 `ariaLabel` | _string_  | -          |
+| color      | 通知文本颜色                             | _string_  | `#1989fa`  |
+| delay      | 动画延迟时间 (ms)                        | _number_  | `1`        |
+| left-icon  | 左侧[图标](/material/smartui?comId=icon&appType=miniapp)或图片链接              | _string_  | -          |
+| left-icon-color | 左侧[图标](/material/smartui?comId=icon&appType=miniapp)颜色              | _string_  | -          |
+| right-icon-color | 右侧[图标](/material/smartui?comId=icon&appType=miniapp)颜色             | _string_  | -          |
+| left-icon-style | 左侧[图标](/material/smartui?comId=icon&appType=miniapp)样式              | _string_  | -          |
+| right-icon-style | 左侧[图标](/material/smartui?comId=icon&appType=miniapp)样式              | _string_  | -          |
+| mode       | 通知栏模式，可选值为 `closeable` `link`   | _string_  | `''`       |
+| open-type  | `link`模式时,路由跳转方法名称              | _string_  | `navigateTo` |
+| url        | `link`模式时,路由跳转地址                 | _string_  | `''` |
+| scrollable | 是否开启滚动播放，内容长度溢出时默认开启      | _boolean_ | -          |
+| speed      | 滚动速率 (px/s)                          | _number_  | `60`       |
+| wrapable   | 是否开启文本换行，只在禁用滚动时生效          | _boolean_ | `false`    |
+| custom-style   | 跟节点样式                            | _string_  | `''`    |
+| custom-hover-class   | 跟节点点击样式类                   | _string_  | `''`    |
+
+
+### Events
+
+| 事件名     | 说明             | 参数           |
+| ---------- | ---------------- | -------------- |
+| bind:click | 点击通知栏时触发 | _event: Event_ |
+| bind:close | 关闭通知栏时触发 | _event: Event_ |
+| bind:btn-click `v2.7.0` | 按钮文案点击时触发 | _event: Event_ |
+
+
+### Slot
+
+| 名称       | 说明                                     |
+| ---------- | ---------------------------------------- |
+| -          | 通知文本内容，仅在 `text` 属性为空时有效 |
+| left-icon  | 自定义左侧图标                           |
+| right-icon | 自定义右侧图标                           |
+
+### 外部样式类
+
+| 类名         | 说明         |
+| ------------ | ------------ |
+| custom-class | 根节点样式类 |
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](/material/smartui?comId=config-provider&appType=miniapp)。
+
+| 名称                          | 默认值                                 | 描述 |
+| ----------------------------- | -------------------------------------- | ---- |
+| --notice-bar-font-size        | _14px_                                 | 内部字体大小    |
+| --notice-bar-height           | _40px_                                 | 单行时高度    |
+| --notice-bar-icon-size        | _16px_                                 | icon大小    |
+| --notice-bar-line-height      | _14px_                                 | 内部字体行高大小    |
+| --notice-bar-padding          | _0 var(--smart-padding-md)_            | 单行模式外部盒子边距    |
+| --notice-bar-text-color       | _var(--app-B6-N3, rgba(0, 0, 0, 0.5))_ `v2.0.0` _rgba(0, 0, 0, 0.5)_ `v2.8.0` | 内部字体颜色    |
+| --notice-bar-wrapable-padding | _var(--padding-xs) var(--padding-md)_  | 多行模式外部盒子边距    |
+| --notice-bar-background-color | _#E7F3FE_        | info类型背景色    |
+| --notice-bar-background-warning-color | _#FFF5E5_    | warning类型背景色    |
+| --notice-bar-background-error-color | _#FDEDED_    | error类型背景色    |
+| --notice-bar-info-color | _#1989fa_              | 左侧图标 info 类型颜色    |
+| --notice-bar-warning-color | _#ffa000_              | 左侧图标 warning 类型颜色    |
+| --notice-bar-error-color | _#f04c4c_              | 左侧图标 error 类型颜色    |
+| --notice-bar-left-icon-margin-right | _8px_              | 左侧图标右侧外边距    |
+| --notice-bar-right-icon-color `v2.1.7` | _rgba(0, 0, 0, 0.2)_              | 右侧图标颜色    |
+| --notice-bar-right-icon-margin-left | _8px_              | 右侧图标左侧外边距    |
+| --notice-bar-btn-color | _var(--app-M4, #1989fa)_              | 按钮文案颜色    |
+

package/dist/notify/README.md

@@ -0,0 +1,120 @@
+# Notify 消息提示
+
+### 介绍
+
+在页面顶部展示消息提示，支持函数调用和组件调用两种方式。
+
+### 引入
+
+在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](/material/smartui?comId=help-getting-started&appType=miniapp)。
+
+```json
+"usingComponents": {
+  "smart-notify": "@tuya-miniapp/smart-ui/lib/notify/index"
+}
+```
+
+## 代码演示
+
+### 基础用法
+
+```js
+import Notify from '@tuya-miniapp/smart-ui/notify/notify';
+
+Notify('通知内容');
+```
+
+```html
+<!-- 在页面内添加对应的节点 -->
+<smart-notify id="smart-notify" />
+```
+
+### 通知类型
+
+支持`primary`、`success`、`warning`、`danger`四种通知类型，默认为`danger`。
+
+```js
+// 主要通知
+Notify({ type: 'primary', message: '通知内容' });
+
+// 成功通知
+Notify({ type: 'success', message: '通知内容' });
+
+// 危险通知
+Notify({ type: 'danger', message: '通知内容' });
+
+// 警告通知
+Notify({ type: 'warning', message: '通知内容' });
+```
+
+### 自定义通知
+
+自定义消息通知的颜色和展示时长。
+
+```js
+Notify({
+  message: '自定义颜色',
+  color: '#ad0000',
+  background: '#ffe1e1',
+});
+
+Notify({
+  message: '自定义时长',
+  duration: 1000,
+});
+```
+
+### 自定义选择器
+
+```js
+Notify({
+  message: '自定义节点选择器',
+  duration: 1000,
+  selector: '#custom-selector',
+});
+```
+
+```html
+<!-- 在页面内添加自定义节点 -->
+<smart-notify id="custom-selector" />
+```
+
+## API
+
+### 方法
+
+| 方法名       | 说明     | 参数                 | 返回值      |
+| ------------ | -------- | -------------------- | ----------- |
+| Notify       | 展示提示 | `options \| message` | notify 实例 |
+| Notify.clear | 关闭提示 | `options`            | `void`      |
+
+### Options
+
+| 参数             | 说明                                                   | 类型       | 默认值         |
+| ---------------- | ------------------------------------------------------ | ---------- | -------------- |
+| background       | 背景颜色                                               | _string_   | -              |
+| color            | 字体颜色                                               | _string_   | `#fff`         |
+| context          | 选择器的选择范围，可以传入自定义组件的 this 作为上下文 | _object_   | 当前页面       |
+| duration         | 展示时长(ms)，值为 0 时，notify 不会消失               | _number_   | `3000`         |
+| message          | 展示文案，支持通过`\n`换行                             | _string_   | `''`           |
+| onClick          | 点击时的回调函数                                       | _Function_ | -              |
+| onClose          | 关闭时的回调函数                                       | _Function_ | -              |
+| onOpened         | 完全展示后的回调函数                                   | _Function_ | -              |
+| safeAreaInsetTop | 是否留出顶部安全距离（状态栏高度）                     | _boolean_  | `false`        |
+| selector         | 自定义节点选择器                                       | _string_   | `smart-notify` |
+| top              | 顶部距离                                               | _number_   | `0`            |
+| type             | 类型，可选值为 `primary` `success` `warning`           | _string_   | `danger`       |
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](/material/smartui?comId=config-provider&appType=miniapp)。
+
+| 名称                          | 默认值                                 | 描述 |
+| ----------------------------- | -------------------------------------- | ---- |
+| --notify-padding | _6px 15px_ | 通知内边距 |
+| --notify-font-size | _14px_ | 通知字体大小 |
+| --notify-line-height | _20px_ | 通知行高 |
+| --notify-primary-background-color | _#1989fa_ | 主要通知背景颜色 |
+| --notify-success-background-color | _#07c160_ | 成功通知背景颜色 |
+| --notify-danger-background-color | _#ee0a24_ | 危险通知背景颜色 |
+| --notify-warning-background-color | _#ff976a_ | 警告通知背景颜色 |

package/dist/overlay/README.md

@@ -0,0 +1,132 @@
+---
+category: 展示
+---
+
+# Overlay 遮罩层
+
+### 介绍
+
+创建一个遮罩层，用于强调特定的页面元素，并阻止用户进行其他操作。
+
+### 引入
+
+在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](/material/smartui?comId=help-getting-started&appType=miniapp)。
+
+```json
+"usingComponents": {
+  "smart-overlay": "@tuya-miniapp/smart-ui/lib/overlay/index"
+}
+```
+
+## 代码演示
+
+### 基础用法
+
+```html
+<smart-button type="primary" bind:click="onClickShow">显示遮罩层</smart-button>
+<smart-overlay show="{{ show }}" bind:click="onClickHide" />
+```
+
+```js
+Page({
+  data: {
+    show: false,
+  },
+
+  onClickShow() {
+    this.setData({ show: true });
+  },
+
+  onClickHide() {
+    this.setData({ show: false });
+  },
+});
+```
+
+### 嵌入内容
+
+通过默认插槽可以在遮罩层上嵌入任意内容。
+
+```html
+<smart-button type="primary" bind:click="onClickShow">嵌入内容</smart-button>
+<smart-overlay show="{{ show }}" bind:click="onClickHide">
+  <view class="wrapper">
+    <view class="block" catch:tap="noop" />
+  </view>
+</smart-overlay>
+```
+
+```js
+Page({
+  data: {
+    show: false,
+  },
+
+  onClickShow() {
+    this.setData({ show: true });
+  },
+
+  onClickHide() {
+    this.setData({ show: false });
+  },
+
+  noop() {},
+});
+```
+
+```css
+.wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+
+.block {
+  width: 120px;
+  height: 120px;
+  background-color: #fff;
+}
+```
+
+## API
+
+### Props
+
+| 参数           | 说明                                             | 类型               | 默认值  |
+| -------------- | ------------------------------------------------ | ------------------ | ------- |
+| classmart-name | 自定义类名                                       | _string_           | -       |
+| custom-style   | 自定义样式                                       | _string_           | -       |
+| duration       | 动画时长，单位秒                                 | _string \| number_ | `0.3`   |
+| lock-scroll    | 是否锁定背景滚动，锁定时蒙层里的内容也将无法滚动 | _boolean_          | `true`  |
+| show           | 是否展示遮罩层                                   | _boolean_          | `false` |
+| z-index        | z-index 层级                                     | _string \| number_ | `1`     |
+
+### Events
+
+| 事件名     | 说明       | 回调参数 |
+| ---------- | ---------- | -------- |
+| bind:click | 点击时触发 | -        |
+
+### Slots
+
+| 名称 | 说明                               |
+| ---- | ---------------------------------- |
+| -    | 默认插槽，用于在遮罩层上方嵌入内容 |
+
+
+### 外部样式类
+
+| 类名         | 说明         |
+| ------------ | ------------ |
+| custom-class | 根节点样式类 |
+
+### 样式变量
+
+组件会根据设备是否支持 `backdrop-filter` 自动选择**毛玻璃遮罩**或**半透明遮罩**，以减轻 iOS 输入框聚焦时页面布局上移的跳动感；不支持模糊的机型（如部分 Android）使用半透明降级样式。
+
+| 名称                              | 默认值（浅色 / 深色）                    | 描述 |
+| --------------------------------- | ----------------------------------------- | ---- |
+| --overlay-background-color        | _rgba(0,0,0,0.4)_ / _rgba(0,0,0,0.7)_        | 直接指定遮罩背景色时使用，设置后不再使用毛玻璃/半透明变量 |
+| --overlay-blur-background  `v2.12.0`        | _rgba(40,44,53,0.22)_ / _rgba(0,0,0,0.6)_ | 支持模糊时的毛玻璃遮罩背景色 |
+| --overlay-blur-radius  `v2.12.0`            | _16px_                                    | 毛玻璃模糊半径 |