@tuya-miniapp/smart-ui 2.13.1 → 2.13.2-beta-1

package/dist/sticky/README.md

@@ -0,0 +1,124 @@
+---
+category: 布局
+---
+
+# Sticky 粘性布局
+
+### 介绍
+
+Sticky 组件与 CSS 中`position: sticky`属性实现的效果一致，当组件在屏幕范围内时，会按照正常的布局排列，当组件滚出屏幕范围时，始终会固定在屏幕顶部。
+
+### 引入
+
+在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](/material/smartui?comId=help-getting-started&appType=miniapp)。
+
+```json
+"usingComponents": {
+  "smart-sticky": "@tuya-miniapp/smart-ui/lib/sticky/index"
+}
+```
+
+## 代码演示
+
+### 基础用法
+
+将内容包裹在`Sticky`组件内即可。
+
+```html
+<smart-sticky>
+  <smart-button type="primary">基础用法</smart-button>
+</smart-sticky>
+```
+
+### 吸顶距离
+
+通过`offset-top`属性可以设置组件在吸顶时与顶部的距离。
+
+```html
+<smart-sticky offset-top="{{ 50 }}">
+  <smart-button type="info">吸顶距离</smart-button>
+</smart-sticky>
+```
+
+### 指定容器
+
+通过`container`属性可以指定组件的容器，页面滚动时，组件会始终保持在容器范围内，当组件即将超出容器底部时，会返回原位置。
+
+```html
+<view id="container" style="height: 150px;">
+  <smart-sticky container="{{ container }}">
+    <smart-button type="warning">指定容器</smart-button>
+  </smart-sticky>
+</view>
+```
+
+```js
+Page({
+  data: {
+    container: null,
+  },
+
+  onReady() {
+    this.setData({
+      container: () => ty.createSelectorQuery().select('#container'),
+    });
+  },
+});
+```
+
+### 嵌套在 scroll-view 内使用
+
+通过 `scroll-top` 与 `offset-top` 属性可以实现在 scroll-view 内嵌套使用。
+
+```html
+<scroll-view
+  bind:scroll="onScroll"
+  scroll-y
+  id="scroller"
+  style="height: 200px;"
+>
+  <view style="height: 400px; padding-top: 50px;">
+    <smart-sticky scroll-top="{{ scrollTop }}" offset-top="{{ offsetTop }}">
+      <smart-button type="warning">嵌套在 scroll-view 内</smart-button>
+    </smart-sticky>
+  </view>
+</scroll-view>
+```
+
+```js
+Page({
+  data: {
+    scrollTop: 0,
+    offsetTop: 0,
+  },
+
+  onScroll(event) {
+    ty.createSelectorQuery()
+      .select('#scroller')
+      .boundingClientRect((res) => {
+        this.setData({
+          scrollTop: event.detail.scrollTop,
+          offsetTop: res.top,
+        });
+      })
+      .exec();
+  },
+});
+```
+
+## API
+
+### Props
+
+| 参数       | 说明                                                         | 类型       | 默认值 |
+| ---------- | ------------------------------------------------------------ | ---------- | ------ |
+| container  | 一个函数，返回容器对应的 NodesRef 节点                       | _function_ | -      |
+| offset-top | 吸顶时与顶部的距离，单位`px`                                 | _number_   | `0`    |
+| scroll-top | 当前滚动区域的滚动位置，非 `null` 时会禁用页面滚动事件的监听 | _number_   | -      |
+| z-index    | 吸顶时的 z-index                                             | _number_   | `99`   |
+
+### Events
+
+| 事件名      | 说明       | 回调参数                                       |
+| ----------- | ---------- | ---------------------------------------------- |
+| bind:scroll | 滚动时触发 | { scrollTop: 距离顶部位置, isFixed: 是否吸顶 } |

package/dist/swipe-cell/README.md

@@ -0,0 +1,172 @@
+---
+category: 反馈
+---
+
+# SwipeCell 滑动单元格
+
+### 介绍
+
+可以左右滑动来展示操作按钮的单元格组件。
+
+### 引入
+
+在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](/material/smartui?comId=help-getting-started&appType=miniapp)。
+
+```json
+"usingComponents": {
+  "smart-swipe-cell": "@tuya-miniapp/smart-ui/lib/swipe-cell/index"
+}
+```
+
+## 代码演示
+
+### 基础用法
+
+```html
+<smart-swipe-cell right-width="{{ 65 }}" left-width="{{ 65 }}" bind:tabClose="onTabClose">
+  <view slot="left" class="smart-swipe-cell__left">选择</view>
+  <smart-cell-group>
+    <smart-cell title="单元格" value="内容" />
+  </smart-cell-group>
+  <view slot="right" class="smart-swipe-cell__right">删除</view>
+</smart-swipe-cell>
+```
+
+```js
+Page({
+  onTabClose(event) {
+    console.log('onTabClose: ', event.detail);
+  },
+});
+```
+
+### 异步关闭
+
+当开启`async-close`时， 通过绑定`close`事件，可以自定义两侧滑动内容点击时的关闭行为。
+
+```html
+<smart-swipe-cell
+  id="swipe-cell"
+  right-width="{{ 65 }}"
+  left-width="{{ 65 }}"
+  async-close
+  bind:close="onAsyncClose"
+>
+  <view slot="left">选择</view>
+  <smart-cell-group>
+    <smart-cell title="单元格" value="内容" />
+  </smart-cell-group>
+  <view slot="right">删除</view>
+</smart-swipe-cell>
+```
+
+```js
+Page({
+  onAsyncClose(event) {
+    const { position, instance } = event.detail;
+    switch (position) {
+      case 'left':
+      case 'cell':
+        instance.close();
+        break;
+      case 'right':
+        Dialog.confirm({
+          message: '确定删除吗？',
+        }).then(() => {
+          instance.close();
+        });
+        break;
+    }
+  },
+});
+```
+
+### 主动打开
+
+```html
+<smart-swipe-cell
+  id="swipe-cell2"
+  right-width="{{ 65 }}"
+  left-width="{{ 65 }}"
+  name="示例"
+  bind:open="onOpen"
+>
+  <view slot="left" class="smart-swipe-cell__left">选择</view>
+  <smart-cell-group>
+    <smart-cell title="单元格" value="内容" />
+  </smart-cell-group>
+  <view slot="right" class="smart-swipe-cell__right">删除</view>
+</smart-swipe-cell>
+```
+
+```js
+import ToastInstance from '@tuya-miniapp/smart-ui/dist/toast/toast';
+
+Page({
+  onOpen(event) {
+    const { position, name } = event.detail;
+    switch (position) {
+      case 'left':
+        ToastInstance({
+          context: this,
+          type: 'primary',
+          message: `${name}${position}部分展示open事件被触发`,
+        });
+        break;
+      case 'right':
+        ToastInstance({
+          context: this,
+          type: 'primary',
+          message: `${name}${position}部分展示open事件被触发`,
+        });
+        break;
+    }
+  },
+});
+```
+
+## API
+
+### Props
+
+| 参数        | 说明                                    | 类型               | 默认值  |
+| ----------- | --------------------------------------- | ------------------ | ------- |
+| async-close | 是否异步关闭                            | _boolean_          | `false` |
+| disabled    | 是否禁用滑动                            | _boolean_          | `false` |
+| left-width  | 左侧滑动区域宽度                        | _number_           | `0`     |
+| name        | 标识符，可以在 close 事件的参数中获取到 | _string \| number_ | -       |
+| right-width | 右侧滑动区域宽度                        | _number_           | `0`     |
+
+### Slot
+
+| 名称  | 说明           |
+| ----- | -------------- |
+| -     | 自定义显示内容 |
+| left  | 左侧滑动内容   |
+| right | 右侧滑动内容   |
+
+### Events
+
+| 事件名     | 说明       | 参数                                                      |
+| ---------- | ---------- | --------------------------------------------------------- |
+| bind:click | 点击时触发 | 关闭时的点击位置 (`left` `right` `cell` `outside`)        |
+| bind:tabClose `v2.7.0` | 关闭时触发 | 关闭的位置 (`left` `right`)        |
+| bind:close | 点击异步关闭时触发 | { position: 'left' \| 'right' , instance , name: string } |
+| bind:open  | 打开时触发 | { position: 'left' \| 'right' , name: string }            |
+
+### close 参数
+
+| 参数     | 类型     | 说明                                               |
+| -------- | -------- | -------------------------------------------------- |
+| instance | _object_ | SwipeCell 实例                                     |
+| name     | 标识符   | _string_                                           |
+| position | _string_ | 关闭时的点击位置 (`left` `right` `cell` `outside`) |
+
+### 方法
+
+通过 [selectComponent](/material/smartui?comId=faq&appType=miniapp) 可以获取到 SwipeCell 实例并调用实例方法
+
+| 方法名 | 参数                      | 返回值 | 介绍             |
+| ------ | ------------------------- | ------ | ---------------- |
+| close  | -                         | -      | 收起单元格侧边栏 |
+| open   | position: `left \| right` | -      | 打开单元格侧边栏 |

package/dist/switch/README.md

@@ -0,0 +1,204 @@
+---
+category: 反馈
+---
+
+# Switch 开关
+
+### 介绍
+
+用于在打开和关闭状态之间进行切换。
+
+### 引入
+
+在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](/material/smartui?comId=help-getting-started&appType=miniapp)。
+
+```json
+"usingComponents": {
+  "smart-switch": "@tuya-miniapp/smart-ui/lib/switch/index"
+}
+```
+
+## 代码演示
+
+### 基础用法
+
+```html
+<smart-switch checked="{{ checked }}" bind:change="onChange" />
+<smart-switch checked="{{ !checked }}" bind:change="onChange" />
+```
+
+```javascript
+Page({
+  data: {
+    checked: true,
+  },
+
+  onChange({ detail }) {
+    // 需要手动对 checked 状态进行更新
+    this.setData({ checked: detail });
+  },
+});
+```
+
+
+### 开关文案 `v2.7.0`
+
+```html
+<smart-switch
+  active-text="开"
+  inactive-text="关"
+/>
+<view style="--switch-label-font-size: 10px;">
+  <smart-switch
+    active-text="显示"
+    inactive-text="隐藏"
+  />
+</view>
+```
+
+### 禁用状态
+
+```html
+<smart-switch checked="{{ checked }}" disabled />
+```
+
+### 加载中
+
+```html
+<smart-switch checked="{{ checked }}" loading />
+```
+
+### 自定义大小
+
+`size` 属性可以设置组件的大小。
+
+```html
+<smart-switch checked="{{ checked }}" size="24px" />
+```
+
+### 自定义颜色
+
+设置 `active-color` 可以设置选择后的颜色，`inactive-color` 可以设置非选择后的颜色
+
+```html
+<smart-switch
+  checked="{{ checked }}"
+  active-color="#07c160"
+  inactive-color="#ee0a24"
+/>
+```
+
+### 渐变色 `v2.5.0`
+
+所有 CSS background 可以实现的属性， `active-color` 和 `inactive-color` 都可以实现
+
+```html
+<smart-switch
+  checked="{{ checked }}"
+  active-color="linear-gradient(to right, #ff7e5f, #987AFF)"
+  inactive-color="linear-gradient(to right, #407e5f, #841AFF)"
+/>
+```
+
+### 异步控制
+
+```html
+<smart-switch checked="{{ checked }}" bind:change="onChange" />
+```
+
+```js
+Page({
+  data: {
+    checked: true,
+  },
+
+  onChange({ detail }) {
+    ty.showModal({
+      title: '提示',
+      content: '是否切换开关？',
+      success: (res) => {
+        if (res.confirm) {
+          this.setData({ checked2: detail });
+        }
+      },
+    });
+  },
+});
+```
+
+### 阻止冒泡
+
+`stop-click-propagation` 属性可以阻止冒泡。
+
+```html
+<smart-switch checked="{{ checked }}" stop-click-propagation bind:change="onChange" />
+```
+
+### 列表使用
+
+```html
+<smart-cell-group>
+  <smart-cell title="标题">
+    <smart-switch
+      checked="{{ checked }}"
+      bind:change="onChange"
+    />    
+  </smart-cell>
+</smart-cell-group>
+```
+
+## API
+
+### Props
+
+| 参数                            | 说明                   | 类型      | 默认值    |
+| ------------------------------- | ---------------------- | --------- | --------- |
+| active-color                    | 打开时的背景色         | _string_  | `#1989fa` |
+| active-value                    | 打开时的值             | _any_     | `true`    |
+| checked                         | 开关选中状态           | _any_     | `false`   |
+| disabled                        | 是否为禁用状态         | _boolean_ | `false`   |
+| inactive-color                  | 关闭时的背景色         | _string_  | `#fff`    |
+| inactive-value                  | 关闭时的值             | _any_     | `false`   |
+| loading                         | 是否为加载状态         | _boolean_ | `false`   |
+| name                            | 在表单内提交时的标识符 | _string_  | -         |
+| size                            | 开关尺寸               | _string_  | `30px`    |
+| stop-click-propagation `v1.0.2` | 是否阻止冒泡           | _boolean_ | `false`   |
+| active-text `v2.7.0` | 打开时的文案           | _string_ | -   |
+| inactive-text `v2.7.0` | 关闭时的文案           | _string_ | -   |
+
+### Events
+
+| 事件名      | 说明             | 参数                       |
+| ----------- | ---------------- | -------------------------- |
+| bind:change | 开关状态切换回调 | event.detail: 是否选中开关 |
+
+### 外部样式类
+
+| 类名         | 说明         |
+| ------------ | ------------ |
+| custom-class | 根节点样式类 |
+| node-class   | 圆点样式类   |
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](/material/smartui?comId=config-provider&appType=miniapp)。
+
+| 名称                          | 默认值                                 | 描述 |
+| ----------------------------- | -------------------------------------- | ---- |
+| --switch-width | _1.5338em_ | 开关宽度 |
+| --switch-height | _0.867em_ | 开关高度 |
+| --switch-node-size | _0.867em_ | 开关节点大小 |
+| --switch-node-z-index | _1_ | 开关节点层级 |
+| --switch-node-background-color | _#fff_ | - |
+| --switch-node-box-shadow | _0 3px 1px 0 rgba(0, 0, 0, 0.05),_ | 开关节点阴影 |
+| --switch-background-color | _var(--app-B4-N6, rgba(0, 0, 0, 0.2))_ | 开关背景颜色 |
+| --switch-on-background-color | _#1989fa_ | 开关开启时背景颜色 |
+| --switch-transition-duration | _0.3s_ | 开关过渡持续时间 |
+| --switch-disabled-opacity | _0.4_ | 开关禁用时不透明度 |
+| --switch-border `@deprecated v2.5.0` | _0.08em solid rgba(0, 0, 0, 0.1)_ | 开关边框 |
+| --switch-node-on-background-color `v2.4.0` | _var(--switch-node-background-color, #fff)_ | 开启时圆球的背景色 |
+| --switch-padding `v2.5.0` | _0.08em_ | 内部边距 |
+| --switch-label-width `v2.7.0` | _2em_ | 文本开关时的默认宽度 |
+| --switch-label-font-size `v2.7.0` | _12px_ | 文字大小 |
+| --switch-label-active-color `v2.7.0` | _var(--app-B3, #ffffff)_ `v2.7.0` _#FFFFFF_ `v2.8.0` | 开时文字颜色 |
+| --switch-label-inactive-color `v2.7.0` | _var(--app-B3, #ffffff)_ `v2.7.0` _#FFFFFF_ `v2.8.0` | 关时文字颜色 |