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

package/lib/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/lib/sticky/index.css

@@ -0,0 +1 @@
+@import '../common/index.css';.smart-sticky{position:relative}.smart-sticky-wrap--fixed{left:0;position:fixed;right:0}

package/lib/sticky/index.d.ts

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

package/lib/sticky/index.js

@@ -0,0 +1,128 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var utils_1 = require("../common/utils");
+var component_1 = require("../common/component");
+var validator_1 = require("../common/validator");
+var page_scroll_1 = require("../mixins/page-scroll");
+var ROOT_ELEMENT = '.smart-sticky';
+(0, component_1.SmartComponent)({
+    props: {
+        zIndex: {
+            type: Number,
+            value: 99,
+        },
+        offsetTop: {
+            type: Number,
+            value: 0,
+            observer: 'onScroll',
+        },
+        disabled: {
+            type: Boolean,
+            observer: 'onScroll',
+        },
+        container: {
+            type: null,
+            observer: 'onScroll',
+        },
+        scrollTop: {
+            type: null,
+            observer: function (val) {
+                this.onScroll({ scrollTop: val });
+            },
+        },
+    },
+    mixins: [
+        (0, page_scroll_1.pageScrollMixin)(function (event) {
+            if (this.data.scrollTop != null) {
+                return;
+            }
+            this.onScroll(event);
+        }),
+    ],
+    data: {
+        height: 0,
+        fixed: false,
+        transform: 0,
+    },
+    mounted: function () {
+        this.onScroll();
+    },
+    methods: {
+        onScroll: function (_a) {
+            var _this = this;
+            var _b = _a === void 0 ? {} : _a, scrollTop = _b.scrollTop;
+            var _c = this.data, container = _c.container, offsetTop = _c.offsetTop, disabled = _c.disabled;
+            if (disabled) {
+                this.setDataAfterDiff({
+                    fixed: false,
+                    transform: 0,
+                });
+                return;
+            }
+            this.scrollTop = scrollTop || this.scrollTop;
+            if (typeof container === 'function') {
+                Promise.all([(0, utils_1.getRect)(this, ROOT_ELEMENT), this.getContainerRect()])
+                    .then(function (_a) {
+                    var root = _a[0], container = _a[1];
+                    if (offsetTop + root.height > container.height + container.top) {
+                        _this.setDataAfterDiff({
+                            fixed: false,
+                            transform: container.height - root.height,
+                        });
+                    }
+                    else if (offsetTop >= root.top) {
+                        _this.setDataAfterDiff({
+                            fixed: true,
+                            height: root.height,
+                            transform: 0,
+                        });
+                    }
+                    else {
+                        _this.setDataAfterDiff({ fixed: false, transform: 0 });
+                    }
+                })
+                    .catch(function () { });
+                return;
+            }
+            (0, utils_1.getRect)(this, ROOT_ELEMENT).then(function (root) {
+                if (!(0, validator_1.isDef)(root) || (!root.width && !root.height)) {
+                    return;
+                }
+                if (offsetTop >= root.top) {
+                    _this.setDataAfterDiff({ fixed: true, height: root.height });
+                    _this.transform = 0;
+                }
+                else {
+                    _this.setDataAfterDiff({ fixed: false });
+                }
+            });
+        },
+        setDataAfterDiff: function (data) {
+            var _this = this;
+            wx.nextTick(function () {
+                var diff = Object.keys(data).reduce(function (prev, key) {
+                    if (data[key] !== _this.data[key]) {
+                        prev[key] = data[key];
+                    }
+                    return prev;
+                }, {});
+                if (Object.keys(diff).length > 0) {
+                    _this.setData(diff);
+                }
+                _this.$emit('scroll', {
+                    scrollTop: _this.scrollTop,
+                    isFixed: data.fixed || _this.data.fixed,
+                });
+            });
+        },
+        getContainerRect: function () {
+            var nodesRef = this.data.container();
+            if (!nodesRef) {
+                return Promise.reject(new Error('not found container'));
+            }
+            return new Promise(function (resolve) {
+                return nodesRef.boundingClientRect(resolve).exec();
+            });
+        },
+    },
+});

package/lib/sticky/index.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

package/lib/sticky/index.wxml

@@ -0,0 +1,8 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+<wxs src="./index.wxs" module="computed" />
+
+<view class="custom-class smart-sticky" style="{{ computed.containerStyle({ fixed, height, zIndex }) }}">
+  <view class="{{ utils.bem('sticky-wrap', { fixed }) }}" style="{{ computed.wrapStyle({ fixed, offsetTop, transform, zIndex }) }}">
+    <slot />
+  </view>
+</view>

package/lib/sticky/index.wxs

@@ -0,0 +1,25 @@
+/* eslint-disable */
+var style = require('../wxs/style.wxs');
+var addUnit = require('../wxs/add-unit.wxs');
+
+function wrapStyle(data) {
+  return style({
+    transform: data.transform
+      ? 'translate3d(0, ' + data.transform + 'px, 0)'
+      : '',
+    top: data.fixed ? addUnit(data.offsetTop) : '',
+    'z-index': data.zIndex,
+  });
+}
+
+function containerStyle(data) {
+  return style({
+    height: data.fixed ? addUnit(data.height) : '',
+    'z-index': data.zIndex,
+  });
+}
+
+module.exports = {
+  wrapStyle: wrapStyle,
+  containerStyle: containerStyle,
+};

package/lib/sticky/index.wxss

@@ -0,0 +1 @@
+@import '../common/index.wxss';.smart-sticky{position:relative}.smart-sticky-wrap--fixed{left:0;position:fixed;right:0}

package/lib/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/lib/swipe-cell/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}.smart-swipe-cell{overflow:hidden;position:relative}.smart-swipe-cell__left,.smart-swipe-cell__right{height:100%;position:absolute;top:0}.smart-swipe-cell__left{left:0;transform:translate3d(-100%,0,0)}.smart-swipe-cell__right{right:0;transform:translate3d(100%,0,0)}

package/lib/swipe-cell/index.d.ts

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

package/lib/swipe-cell/index.js

@@ -0,0 +1,142 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var component_1 = require("../common/component");
+var touch_1 = require("../mixins/touch");
+var utils_1 = require("../common/utils");
+var THRESHOLD = 0.3;
+var ARRAY = [];
+(0, component_1.SmartComponent)({
+    props: {
+        disabled: Boolean,
+        leftWidth: {
+            type: Number,
+            value: 0,
+            observer: function (leftWidth) {
+                if (leftWidth === void 0) { leftWidth = 0; }
+                if (this.offset > 0) {
+                    this.swipeMove(leftWidth);
+                }
+            },
+        },
+        rightWidth: {
+            type: Number,
+            value: 0,
+            observer: function (rightWidth) {
+                if (rightWidth === void 0) { rightWidth = 0; }
+                if (this.offset < 0) {
+                    this.swipeMove(-rightWidth);
+                }
+            },
+        },
+        asyncClose: Boolean,
+        name: {
+            type: null,
+            value: '',
+        },
+    },
+    mixins: [touch_1.touch],
+    data: {
+        catchMove: false,
+        wrapperStyle: '',
+        position: 'close',
+    },
+    created: function () {
+        this.offset = 0;
+        ARRAY.push(this);
+    },
+    destroyed: function () {
+        var _this = this;
+        ARRAY = ARRAY.filter(function (item) { return item !== _this; });
+    },
+    methods: {
+        open: function (position) {
+            var _a = this.data, leftWidth = _a.leftWidth, rightWidth = _a.rightWidth;
+            var offset = position === 'left' ? leftWidth : -rightWidth;
+            this.swipeMove(offset);
+            if (position !== this.data.position && this.data.position !== 'close') {
+                this.$emit('tab-close', this.data.position);
+            }
+            this.setData({ position: position });
+            this.$emit('open', {
+                position: position,
+                name: this.data.name,
+            });
+        },
+        close: function () {
+            if (this.data.position !== 'close') {
+                this.$emit('tab-close', this.data.position);
+            }
+            this.swipeMove(0);
+            this.setData({ position: 'close' });
+        },
+        swipeMove: function (offset) {
+            if (offset === void 0) { offset = 0; }
+            this.offset = (0, utils_1.range)(offset, -this.data.rightWidth, this.data.leftWidth);
+            var transform = "translate3d(".concat(this.offset, "px, 0, 0)");
+            var transition = this.dragging ? 'none' : 'transform .6s cubic-bezier(0.18, 0.89, 0.32, 1)';
+            this.setData({
+                wrapperStyle: "\n        -webkit-transform: ".concat(transform, ";\n        -webkit-transition: ").concat(transition, ";\n        transform: ").concat(transform, ";\n        transition: ").concat(transition, ";\n      "),
+            });
+        },
+        swipeLeaveTransition: function () {
+            var _a = this.data, leftWidth = _a.leftWidth, rightWidth = _a.rightWidth;
+            var offset = this.offset;
+            if (rightWidth > 0 && -offset > rightWidth * THRESHOLD) {
+                this.open('right');
+            }
+            else if (leftWidth > 0 && offset > leftWidth * THRESHOLD) {
+                this.open('left');
+            }
+            else {
+                this.close();
+            }
+            this.setData({ catchMove: false });
+        },
+        startDrag: function (event) {
+            if (this.data.disabled) {
+                return;
+            }
+            this.startOffset = this.offset;
+            this.touchStart(event);
+        },
+        noop: function () { },
+        onDrag: function (event) {
+            var _this = this;
+            if (this.data.disabled) {
+                return;
+            }
+            this.touchMove(event);
+            if (this.direction !== 'horizontal') {
+                return;
+            }
+            this.dragging = true;
+            ARRAY.filter(function (item) { return item !== _this && item.offset !== 0; }).forEach(function (item) { return item.close(); });
+            this.setData({ catchMove: true });
+            this.swipeMove(this.startOffset + this.deltaX);
+        },
+        endDrag: function () {
+            if (this.data.disabled || !this.dragging) {
+                return;
+            }
+            this.dragging = false;
+            this.swipeLeaveTransition();
+        },
+        onClick: function (event) {
+            var _a = event.currentTarget.dataset.key, position = _a === void 0 ? 'outside' : _a;
+            this.$emit('click', position);
+            if (!this.offset) {
+                return;
+            }
+            if (this.data.asyncClose) {
+                this.$emit('close', {
+                    position: position,
+                    instance: this,
+                    name: this.data.name,
+                });
+            }
+            else {
+                this.close();
+            }
+        },
+    },
+});

package/lib/swipe-cell/index.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

package/lib/swipe-cell/index.wxml

@@ -0,0 +1,21 @@
+<view catch:touchmove="{{ catchMove ? 'noop' : '' }}">
+  <view
+    class="smart-swipe-cell custom-class"
+    data-key="cell"
+    catchtap="onClick"
+    bind:touchstart="startDrag"
+    bind:touchmove="onDrag"
+    bind:touchend="endDrag"
+    bind:touchcancel="endDrag"
+  >
+    <view style="{{ wrapperStyle }}">
+      <view wx:if="{{ leftWidth }}" class="smart-swipe-cell__left" data-key="left" catch:tap="onClick">
+        <slot name="left" />
+      </view>
+      <slot />
+      <view wx:if="{{ rightWidth }}" class="smart-swipe-cell__right" data-key="right" catch:tap="onClick">
+        <slot name="right" />
+      </view>
+    </view>
+  </view>
+</view>

package/lib/swipe-cell/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-swipe-cell{overflow:hidden;position:relative}.smart-swipe-cell__left,.smart-swipe-cell__right{height:100%;position:absolute;top:0}.smart-swipe-cell__left{left:0;transform:translate3d(-100%,0,0)}.smart-swipe-cell__right{right:0;transform:translate3d(100%,0,0)}