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

package/lib/index-bar/index.js

@@ -0,0 +1,412 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var color_1 = require("../common/color");
+var component_1 = require("../common/component");
+var relation_1 = require("../common/relation");
+var utils_1 = require("../common/utils");
+var page_scroll_1 = require("../mixins/page-scroll");
+var icon_1 = __importDefault(require("./icon"));
+var ty_1 = __importDefault(require("../common/ty"));
+var indexList = function () {
+    var indexList = [];
+    var charCodeOfA = 'A'.charCodeAt(0);
+    for (var i = 0; i < 26; i++) {
+        indexList.push(String.fromCharCode(charCodeOfA + i));
+    }
+    return indexList;
+};
+(0, component_1.SmartComponent)({
+    relation: (0, relation_1.useChildren)('index-anchor', function () {
+        this.updateData();
+    }),
+    props: {
+        scrollable: {
+            type: Boolean,
+            value: false,
+        },
+        sticky: {
+            type: Boolean,
+            value: true,
+        },
+        stickyPush: {
+            type: Boolean,
+            value: true,
+        },
+        sidebarFontSize: {
+            type: String,
+        },
+        sidebarLineHeight: {
+            type: String,
+        },
+        zIndex: {
+            type: Number,
+            value: 1,
+        },
+        highlightColor: {
+            type: String,
+            value: color_1.GREEN,
+        },
+        stickyOffsetTop: {
+            type: Number,
+            value: 0,
+        },
+        indexList: {
+            type: Array,
+            value: indexList(),
+        },
+        showMoveTip: {
+            type: Boolean,
+            value: false,
+        },
+    },
+    mixins: [
+        (0, page_scroll_1.pageScrollMixin)(function (event) {
+            this.scrollTop = (event === null || event === void 0 ? void 0 : event.scrollTop) || 0;
+            this.onScroll();
+        }),
+    ],
+    data: {
+        iconSvg: icon_1.default,
+        activeAnchorIndexData: null,
+        showSidebar: false,
+        showMoveIcon: false,
+        lowestActiveIndex: -1,
+        currentMoveIconText: '',
+        moveTipTop: 0,
+    },
+    // @ts-ignore
+    pendingAnchor: null,
+    // 用于过滤 clientY 偶现跳变：保留最近 3 次有效值，与其中至少 2 个都超阈值才判定本帧为异常
+    lastValidOffsetYHistory: null,
+    preMoveTipTop: null,
+    watch: {
+        moveTipTop: function (newVal) {
+            if (this.preMoveTipTop === null) {
+                this.preMoveTipTop = newVal;
+            }
+            if (newVal !== null && newVal !== 0 && newVal !== this.preMoveTipTop) {
+                ty_1.default.vibrateShort({ type: 'light' });
+                this.preMoveTipTop = newVal;
+            }
+        },
+    },
+    created: function () {
+        this.scrollTop = 0;
+    },
+    methods: {
+        updateData: function () {
+            var _this = this;
+            // 列表更新时重置记录的最低滚动节点
+            this.setData({
+                lowestActiveIndex: -1,
+            });
+            wx.nextTick(function () {
+                if (_this.timer != null) {
+                    clearTimeout(_this.timer);
+                }
+                _this.timer = setTimeout(function () {
+                    _this.setData({
+                        showSidebar: !!_this.children.length,
+                    });
+                    _this.setRect().then(function () {
+                        _this.computeLowestActiveIndex();
+                        _this.onScroll();
+                    });
+                }, 0);
+            });
+        },
+        setRect: function () {
+            return Promise.all([
+                this.setAnchorsRect(),
+                this.setListRect(),
+                this.setSidebarRect(),
+                this.getPageHeight(),
+            ]);
+        },
+        setAnchorsRect: function () {
+            var _this = this;
+            return Promise.all(this.children.map(function (anchor) {
+                return (0, utils_1.getRect)(anchor, '.smart-index-anchor-wrapper').then(function (rect) {
+                    Object.assign(anchor, {
+                        height: rect.height,
+                        top: rect.top + _this.scrollTop,
+                    });
+                });
+            }));
+        },
+        getPageHeight: function () {
+            var _this = this;
+            return new Promise(function (resolve) {
+                var query = wx.createSelectorQuery();
+                query.selectViewport().scrollOffset(); // 也可以使用 .boundingClientRect()
+                query.exec(function (res) {
+                    resolve(res[0].scrollHeight);
+                    Object.assign(_this, {
+                        pageHeight: res[0].scrollHeight,
+                    });
+                });
+            });
+        },
+        setListRect: function () {
+            var _this = this;
+            return (0, utils_1.getRect)(this, '.smart-index-bar').then(function (rect) {
+                if (!(0, utils_1.isDef)(rect)) {
+                    return;
+                }
+                Object.assign(_this, {
+                    height: rect.height,
+                    top: rect.top + _this.scrollTop,
+                });
+            });
+        },
+        setSidebarRect: function () {
+            var _this = this;
+            return (0, utils_1.getRect)(this, '.smart-index-bar__sidebar').then(function (res) {
+                if (!(0, utils_1.isDef)(res)) {
+                    return;
+                }
+                _this.sidebar = {
+                    height: res.height,
+                    top: res.top,
+                };
+            });
+        },
+        /**
+         * 用视口高度与内容高度几何计算「能滚动到吸顶位置」的最底部锚点索引，
+         * 用于 scrollToAnchor 时限制目标索引，避免点击无法滚到顶的锚点。
+         */
+        computeLowestActiveIndex: function () {
+            var children = this.children;
+            if (!children || children.length === 0) {
+                this.setData({ lowestActiveIndex: -1 });
+                return;
+            }
+            var stickyOffsetTop = this.data.stickyOffsetTop;
+            // 页面滚动内容总高度 = 最后一个锚点的 top + height（与 setAnchorsRect 中存的一致：文档坐标）
+            var contentHeight = this.pageHeight;
+            var sysInfo = wx.getSystemInfoSync && wx.getSystemInfoSync();
+            // @ts-ignore
+            var viewportHeight = (sysInfo && sysInfo.useableWindowHeight) || sysInfo.windowHeight;
+            var maxScrollTop = Math.max(0, contentHeight - viewportHeight);
+            // 锚点 i 能滚到吸顶 ⟺ 所需 scrollTop = anchor[i].top - stickyOffsetTop ≤ maxScrollTop
+            // 即 anchor[i].top ≤ maxScrollTop + stickyOffsetTop；从后往前取第一个满足的 i
+            var lowest = -1;
+            for (var i = children.length - 1; i >= 0; i--) {
+                if (children[i].top <= maxScrollTop + stickyOffsetTop) {
+                    lowest = i;
+                    break;
+                }
+            }
+            this.setData({ lowestActiveIndex: lowest });
+        },
+        setDiffData: function (_a) {
+            var target = _a.target, data = _a.data;
+            var diffData = {};
+            Object.keys(data).forEach(function (key) {
+                if (target.data[key] !== data[key]) {
+                    diffData[key] = data[key];
+                }
+            });
+            if (Object.keys(diffData).length) {
+                target.setData(diffData);
+            }
+        },
+        getAnchorRect: function (anchor) {
+            return (0, utils_1.getRect)(anchor, '.smart-index-anchor-wrapper').then(function (rect) { return ({
+                height: rect.height,
+                top: rect.top,
+            }); });
+        },
+        getChildrenIndexList: function () {
+            return this.children.map(function (item) { return item.data.index; });
+        },
+        getActiveAnchorIndex: function () {
+            var _a = this, children = _a.children, scrollTop = _a.scrollTop;
+            var _b = this.data, sticky = _b.sticky, stickyOffsetTop = _b.stickyOffsetTop;
+            for (var i = this.children.length - 1; i >= 0; i--) {
+                var preAnchorHeight = i > 0 ? children[i - 1].height : 0;
+                var reachTop = sticky ? preAnchorHeight + stickyOffsetTop : 0;
+                if (reachTop + scrollTop >= children[i].top) {
+                    return i;
+                }
+            }
+            return -1;
+        },
+        onScroll: function (controlActiveIndexData) {
+            var _this = this;
+            var _a, _b, _c, _d;
+            var _e = this, _f = _e.children, children = _f === void 0 ? [] : _f, scrollTop = _e.scrollTop;
+            if (!children.length) {
+                return;
+            }
+            var hasIndex = controlActiveIndexData !== undefined;
+            var scrollChildrenGetIndex = this.getActiveAnchorIndex();
+            var scrollChildrenGetIndexData = (_a = this.children[scrollChildrenGetIndex]) === null || _a === void 0 ? void 0 : _a.data.index;
+            // 程序化滚动（如 sidebar 点击）未完成时，不根据当前 scrollTop 更新 UI，
+            // 避免 scrollTop 已变而 anchor 几何未重测导致 getActiveAnchorIndex 算错引发闪动。
+            // 滚动结束后在 scrollToAnchor 的 then 里会 setRect + onScroll 做一次正确更新。
+            if (this.pendingAnchor && this.pendingAnchor.length > 0 && !hasIndex) {
+                return;
+            }
+            // lowestActiveIndex 已改为在 setRect 后由 computeLowestActiveIndex() 几何计算，此处不再根据滚动推断
+            var _g = this.data, sticky = _g.sticky, stickyOffsetTop = _g.stickyOffsetTop, zIndex = _g.zIndex, highlightColor = _g.highlightColor, stickyPush = _g.stickyPush;
+            var activeData = hasIndex ? controlActiveIndexData : scrollChildrenGetIndexData;
+            var activeIndex = this.children.findIndex(function (item) { return item.data.index === activeData; });
+            var preActiveData = (_c = (_b = this.children[activeIndex - 1]) === null || _b === void 0 ? void 0 : _b.data) === null || _c === void 0 ? void 0 : _c.index;
+            this.setDiffData({
+                target: this,
+                data: {
+                    activeAnchorIndexData: activeData,
+                },
+            });
+            if (sticky) {
+                var isActiveAnchorSticky_1 = false;
+                if (activeData !== null) {
+                    isActiveAnchorSticky_1 =
+                        ((_d = children.find(function (item) { return item.data.index === activeData; })) === null || _d === void 0 ? void 0 : _d.top) <=
+                            stickyOffsetTop + scrollTop;
+                }
+                children.forEach(function (item, index) {
+                    var itemData = item.data.index;
+                    // 为当前的 anchor 设置 fixed 吸顶和文字颜色
+                    if (itemData === activeData) {
+                        var wrapperStyle = '';
+                        var anchorStyle = "\n              color: ".concat(highlightColor, ";\n            ");
+                        if (isActiveAnchorSticky_1 || !stickyPush) {
+                            wrapperStyle = "\n                height: ".concat(children[index].height, "px;\n              ");
+                            anchorStyle = "\n                position: fixed;\n                top: ".concat(stickyOffsetTop, "px;\n                z-index: ").concat(zIndex, ";\n                color: ").concat(highlightColor, ";\n              ");
+                        }
+                        _this.setDiffData({
+                            target: item,
+                            data: {
+                                active: true,
+                                anchorStyle: anchorStyle,
+                                wrapperStyle: wrapperStyle,
+                            },
+                        });
+                        // 滚动模式时，上一个 tab 默认会有被逐步上推切换的过渡效果
+                    }
+                    else if (stickyPush && preActiveData === itemData && !hasIndex) {
+                        var currentAnchor = children[index];
+                        var currentOffsetTop = currentAnchor.top;
+                        var targetOffsetTop = index === children.length - 1 ? _this.top : children[index + 1].top;
+                        var parentOffsetHeight = targetOffsetTop - currentOffsetTop;
+                        var translateY = parentOffsetHeight - currentAnchor.height;
+                        var anchorStyle = "\n              position: relative;\n              transform: translate3d(0, ".concat(translateY, "px, 0);\n              z-index: ").concat(zIndex, ";\n              color: ").concat(highlightColor, ";\n            ");
+                        _this.setDiffData({
+                            target: item,
+                            data: {
+                                active: true,
+                                anchorStyle: anchorStyle,
+                            },
+                        });
+                    }
+                    else {
+                        // 其他恢复原样
+                        _this.setDiffData({
+                            target: item,
+                            data: {
+                                active: false,
+                                anchorStyle: '',
+                                wrapperStyle: '',
+                            },
+                        });
+                    }
+                });
+            }
+        },
+        onClick: function (event) {
+            ty_1.default.vibrateShort({ type: 'light' });
+            this.scrollToAnchor(event.target.dataset.item);
+        },
+        onTouchMove: function (event) {
+            if (!this.data.scrollable)
+                return;
+            var sidebarLength = this.data.indexList.length;
+            var touch = event.touches[0];
+            var offsetY = touch.clientY - this.sidebar.top;
+            var threshold = (this.sidebar.height / sidebarLength) * 3;
+            if (!this.lastValidOffsetYHistory) {
+                this.lastValidOffsetYHistory = [];
+            }
+            var nearCount = this.lastValidOffsetYHistory.filter(function (h) { return Math.abs(offsetY - h) < threshold; }).length;
+            this.lastValidOffsetYHistory.push(offsetY);
+            if (this.lastValidOffsetYHistory.length > 3)
+                this.lastValidOffsetYHistory.shift();
+            // 与最近 3 次中至少 2 个都超阈值则判定本帧为异常，沿用上次有效值
+            if (this.lastValidOffsetYHistory.length === 3 && nearCount < 2) {
+                return;
+            }
+            offsetY = Math.max(0, Math.min(offsetY, this.sidebar.height));
+            var itemHeight = this.sidebar.height / sidebarLength;
+            var index = Math.floor(offsetY / itemHeight);
+            var indexData = this.data.indexList[index];
+            this.setData({
+                showMoveIcon: true,
+                moveTipTop: index * itemHeight + itemHeight / 2,
+                currentMoveIconText: indexData,
+            });
+            this.scrollToAnchor(indexData);
+        },
+        onTouchStop: function () {
+            if (!this.data.scrollable)
+                return;
+            this.setData({
+                showMoveIcon: false,
+            });
+            this.scrollToAnchorIndexData = null;
+            this.lastValidOffsetYHistory = [];
+        },
+        scrollToAnchor: function (indexData) {
+            var _this = this;
+            if (typeof indexData !== 'string' || this.scrollToAnchorIndexData === indexData) {
+                return;
+            }
+            var childrenIndex = this.children.findIndex(function (item) { return item.data.index === indexData; });
+            var anchor = this.children[childrenIndex];
+            var safeIndex = this.data.lowestActiveIndex !== -1 && childrenIndex > this.data.lowestActiveIndex
+                ? this.data.lowestActiveIndex
+                : childrenIndex;
+            var safeAnchor = this.children[safeIndex];
+            if (!safeAnchor) {
+                return;
+            }
+            // 如果当前有正在进行的滚动，将新的滚动任务加入队列
+            if (!this.pendingAnchor) {
+                this.pendingAnchor = [];
+            }
+            if (this.pendingAnchor.length > 0) {
+                this.pendingAnchor = [anchor];
+                return;
+            }
+            this.pendingAnchor = [anchor];
+            this.scrollToAnchorIndexData = indexData;
+            safeAnchor
+                .scrollIntoView(this.scrollTop)
+                .then(function () {
+                _this.onScroll(safeAnchor.data.index);
+                if (_this.pendingAnchor.length > 0 && _this.pendingAnchor[0] !== anchor) {
+                    var dataIndex = _this.pendingAnchor[0].data.index;
+                    _this.pendingAnchor = [];
+                    _this.scrollToAnchor(dataIndex);
+                    return;
+                }
+                _this.pendingAnchor = [];
+            })
+                .catch(function (err) {
+                console.error(err);
+                if (_this.pendingAnchor.length > 0 && _this.pendingAnchor[0] !== anchor) {
+                    var dataIndex = _this.pendingAnchor[0].data.index;
+                    _this.pendingAnchor = [];
+                    _this.scrollToAnchor(dataIndex);
+                    return;
+                }
+                _this.pendingAnchor = [];
+            });
+            this.$emit('select', anchor.data.index);
+        },
+    },
+});

package/lib/index-bar/index.json

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

package/lib/index-bar/index.wxml

@@ -0,0 +1,34 @@
+<view class="smart-index-bar">
+  <slot />
+
+  <view
+    wx:if="{{ showSidebar }}"
+    class="smart-index-bar__sidebar"
+    catch:tap="onClick"
+    catch:touchmove="onTouchMove"
+    catch:touchend="onTouchStop"
+    catch:touchcancel="onTouchStop"
+  >
+  <view
+    wx:if="{{ showMoveTip }}"
+    class="smart-index-bar__move-tip {{ showMoveIcon ? 'smart-index-bar__move-tip--visible' : '' }}"
+    style="top: {{ moveTipTop }}px;"
+  >
+    <view class="smart-index-bar__move-tip-inner">
+      <slot name="move-tip" />
+      <smart-icon name="{{iconSvg}}" size="44px" customStyle="width: 1.18em;" />
+      <text class="smart-index-bar__move-tip-text">{{ currentMoveIconText }}</text>
+    </view>
+  </view>
+    <view
+      wx:for="{{ indexList }}"
+      wx:key="index"
+      class="smart-index-bar__index"
+      style="z-index: {{ zIndex + 1 }};color: {{ activeAnchorIndexData === item ? highlightColor : '' }};font-size: {{ sidebarFontSize }};line-height: {{ sidebarLineHeight }};"
+      data-index="{{ index }}"
+      data-item="{{ item }}"
+    >
+      {{ item }}
+    </view>
+  </view>
+</view>

package/lib/index-bar/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-index-bar{position:relative}.smart-index-bar__sidebar{display:flex;flex-direction:column;position:fixed;right:0;text-align:center;top:50%;transform:translateY(-50%);-webkit-user-select:none;user-select:none}.smart-index-bar__move-tip{line-height:0;opacity:0;pointer-events:none;position:absolute;right:100%;transform:translateY(-50%);transition:opacity .2s ease;white-space:nowrap}.smart-index-bar__move-tip--visible{opacity:1}.smart-index-bar__move-tip-inner{position:relative}.smart-index-bar__move-tip-text{color:var(--index-bar-move-tip-text-color,#fff);font-size:var(--index-bar-move-tip-text-font-size,24px);font-weight:700;left:50%;line-height:var(--index-bar-move-tip-text-line-height,32px);padding:var(--index-bar-move-tip-text-padding,0 10px 0 0);position:absolute;text-align:center;top:50%;transform:translate(-50%,-50%)}.smart-index-bar__index{font-size:var(--index-bar-index-font-size,10px);font-weight:500;line-height:var(--index-bar-index-line-height,16px);padding:var(--index-anchor-index-padding,0 4px 0 20px)}

package/lib/info/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-info{align-items:center;background-color:var(--info-background-color,var(--app-M2,#f04c4c));border:var(--info-border-width,0) solid #fff;border-radius:var(--info-size,14px);box-sizing:border-box;color:var(--info-color,#fff);display:inline-flex;font-family:var(--info-font-family,-apple-system-font,PingFang SC,Helvetica Neue,Arial,sans-serif);font-size:var(--info-font-size,11px);font-weight:var(--info-font-weight,600);height:var(--info-size,14px);justify-content:center;left:70%;min-width:var(--info-size,14px);padding:var(--info-padding,0 4px);position:absolute;top:4px;transform:translateY(-50%);transform-origin:100%;white-space:nowrap}.smart-info--dot{background-color:var(--info-dot-color,var(--app-M2,#f04c4c));border-radius:100%;height:var(--info-dot-size,8px);left:auto;min-width:0;right:2px;top:5px;width:var(--info-dot-size,8px)}

package/lib/info/index.d.ts

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

package/lib/info/index.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var component_1 = require("../common/component");
+(0, component_1.SmartComponent)({
+    props: {
+        dot: Boolean,
+        info: null,
+        customStyle: String,
+    },
+});

package/lib/info/index.json

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

package/lib/info/index.wxml

@@ -0,0 +1,7 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+
+<view
+  wx:if="{{ info !== null && info !== '' || dot }}"
+  class="{{ utils.bem('info', { dot }) }} custom-class"
+  style="{{ customStyle }}"
+>{{ dot ? '' : info }}</view>

package/lib/info/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-info{align-items:center;background-color:var(--info-background-color,var(--app-M2,#f04c4c));border:var(--info-border-width,0) solid #fff;border-radius:var(--info-size,14px);box-sizing:border-box;color:var(--info-color,#fff);display:inline-flex;font-family:var(--info-font-family,-apple-system-font,PingFang SC,Helvetica Neue,Arial,sans-serif);font-size:var(--info-font-size,11px);font-weight:var(--info-font-weight,600);height:var(--info-size,14px);justify-content:center;left:70%;min-width:var(--info-size,14px);padding:var(--info-padding,0 4px);position:absolute;top:4px;transform:translateY(-50%);transform-origin:100%;white-space:nowrap}.smart-info--dot{background-color:var(--info-dot-color,var(--app-M2,#f04c4c));border-radius:100%;height:var(--info-dot-size,8px);left:auto;min-width:0;right:2px;top:5px;width:var(--info-dot-size,8px)}

package/lib/loading/README.md

@@ -0,0 +1,86 @@
+---
+category: 展示
+---
+
+# Loading 加载
+
+### 介绍
+
+加载图标，用于表示加载中的过渡状态。
+
+### 引入
+
+在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](/material/smartui?comId=help-getting-started&appType=miniapp)。
+
+```json
+"usingComponents": {
+  "smart-loading": "@tuya/miniapp-smart-ui/lib/loading/index"
+}
+```
+
+## 代码演示
+
+### 加载类型
+
+```html
+<smart-loading /> 
+<smart-loading type="spinner" />
+```
+
+### 自定义颜色
+
+```html
+<smart-loading color="red" /> 
+<smart-loading type="spinner" color="green" />
+```
+
+### 加载文案
+
+```html
+<smart-loading size="24px">加载中...</smart-loading>
+<smart-loading color="var(--app-B1-N1)" icon-color="#1989FA" size="24px">加载中...</smart-loading>
+```
+
+### 垂直排列
+
+```html
+<smart-loading size="24px" vertical>加载中...</smart-loading>
+```
+
+## API
+
+### Props
+
+| 参数               | 说明                          | 类型               | 默认值     |
+| ------------------ | ----------------------------- | ------------------ | ---------- |
+| color              | 整体颜色                          | _string_           | `var(--loading-text-color, #1989FA)`  |
+| size               | 加载图标大小，默认单位为 `px` | _string \| number_ | `30px`     |
+| text-size `v1.0.0` | 文字大小，默认单位为为 `px`   | _string \| number_ | `14px`     |
+| type               | 类型，可选值为 `spinner`      | _string_           | `circular` |
+| vertical `v1.0.0`  | 是否垂直排列图标和文字内容    | _boolean_          | `false`    |
+| icon-color `v2.8.0` | 单独控制icon的颜色 | _string_          | `var(--loading-spinner-color, #1989FA)`    |
+
+### Slots
+
+| 名称 | 说明     |
+| ---- | -------- |
+| -    | 加载文案 |
+
+### 外部样式类
+
+| 类名         | 说明         |
+| ------------ | ------------ |
+| custom-class | 根节点样式类 |
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](/material/smartui?comId=config-provider&appType=miniapp)。
+
+| 名称                          | 默认值                                 | 描述 |
+| ----------------------------- | -------------------------------------- | ---- |
+| --loading-text-color | _#969799_ | 文本颜色 |
+| --loading-text-font-size | _14px_ | 文本字体大小 |
+| --loading-text-line-height | _20px_ | 文本行高 |
+| --loading-spinner-color | _#1989FA_ | 加载器颜色 |
+| --loading-spinner-size | _30px_ | 加载器大小 |
+| --loading-spinner-animation-duration | _0.8s_ | 加载动画持续时间 |

package/lib/loading/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}:host{font-size:0;line-height:1}.smart-loading{align-items:center;color:var(--loading-spinner-color,#1989fa);display:inline-flex;justify-content:center}.smart-loading__spinner{animation:smart-rotate var(--loading-spinner-animation-duration,.8s) linear infinite;background:var(--loading-spinner-color,#1989fa);box-sizing:border-box;height:var(--loading-spinner-size,30px);max-height:100%;max-width:100%;position:relative;width:var(--loading-spinner-size,30px)}.smart-loading__spinner--spinner{animation-timing-function:steps(8)}.smart-loading__loading{background:var(--loading-spinner-color,#1989fa)}.smart-loading__text{color:var(--loading-text-color,#969799);font-size:var(--loading-text-font-size,14px);line-height:var(--loading-text-line-height,20px);margin-left:var(--padding-xs,8px)}.smart-loading__text:empty{display:none}.smart-loading--vertical{flex-direction:column}.smart-loading--vertical .smart-loading__text{margin:var(--padding-xs,8px) 0 0}@keyframes smart-rotate{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}

package/lib/loading/index.d.ts

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

package/lib/loading/index.js

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var component_1 = require("../common/component");
+(0, component_1.SmartComponent)({
+    props: {
+        color: {
+            type: String,
+        },
+        vertical: Boolean,
+        type: {
+            type: String,
+            value: 'circular',
+        },
+        size: {
+            type: String,
+            value: '30',
+        },
+        textSize: String,
+        iconColor: {
+            type: String,
+        },
+    },
+    data: {
+        spinner: '',
+        circular: '',
+    },
+    created: function () {
+        this.setData({
+            spinner: this.SpinnerLoading({
+                color: this.data.color || 'var(--loading-spinner-color, #1989FA)',
+            }),
+            circular: this.CircularLoading({
+                color: this.data.color || 'var(--loading-spinner-color, #1989FA)',
+            }),
+        });
+    },
+    methods: {
+        createSvgIcon: function (svg) {
+            return "data:image/svg+xml,".concat(encodeURIComponent("<?xml version=\"1.0\" standalone=\"no\"?><!DOCTYPE svg PUBLIC \"-//W3C//DTD SVG 1.1//EN\" \"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd\">".concat(svg)));
+        },
+        CircularLoading: function (_a) {
+            var _b = _a.color, color = _b === void 0 ? '#1989FA' : _b;
+            return this.createSvgIcon("<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" fill=\"none\" version=\"1.1\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><defs><clipPath id=\"master_svg0_452_31565\"><rect x=\"0\" y=\"0\" width=\"24\" height=\"24\" rx=\"0\"/></clipPath><linearGradient x1=\"0.5\" y1=\"0.5\" x2=\"0.5\" y2=\"0.8999999761581421\" id=\"master_svg1_452_31641\"><stop offset=\"0%\" stop-color=\"".concat(color, "\" stop-opacity=\"1\"/><stop offset=\"100%\" stop-color=\"").concat(color, "\" stop-opacity=\"0\"/></linearGradient></defs><g clip-path=\"url(#master_svg0_452_31565)\"><g style=\"opacity:0.20000000298023224;\"><path d=\"M12,18.4C15.5346,18.4,18.4,15.5346,18.4,12C18.4,8.46538,15.5346,5.6,12,5.6C8.46538,5.6,5.6,8.46538,5.6,12C5.6,15.5346,8.46538,18.4,12,18.4ZM12,20C16.418300000000002,20,20,16.418300000000002,20,12C20,7.58172,16.418300000000002,4,12,4C7.58172,4,4,7.58172,4,12C4,16.418300000000002,7.58172,20,12,20Z\" fill-rule=\"evenodd\" fill=\"").concat(color, "\" fill-opacity=\"1\"/></g><g><path d=\"M12,5.6C8.46538,5.6,5.6,8.46538,5.6,12C5.6,15.5346,8.46538,18.4,12,18.4C12.44183,18.4,12.8,18.758200000000002,12.8,19.2C12.8,19.6418,12.44183,20,12,20C7.58172,20,4,16.418300000000002,4,12C4,7.58172,7.58172,4,12,4C16.418300000000002,4,20,7.58172,20,12C20,12.44183,19.6418,12.8,19.2,12.8C18.758200000000002,12.8,18.4,12.44183,18.4,12C18.4,8.46538,15.5346,5.6,12,5.6Z\" fill-rule=\"evenodd\" fill=\"url(#master_svg1_452_31641)\" fill-opacity=\"1\"/></g></g></svg>"));
+        },
+        SpinnerLoading: function (_a) {
+            var _b = _a.color, color = _b === void 0 ? '#3678E3' : _b;
+            return this.createSvgIcon("<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" fill=\"none\" version=\"1.1\" width=\"32\" height=\"32\" viewBox=\"0 0 32 32\"><defs><clipPath id=\"master_svg0_1695_29273\"><rect x=\"0\" y=\"0\" width=\"32\" height=\"32\" rx=\"0\"/></clipPath></defs><g clip-path=\"url(#master_svg0_1695_29273)\"><g><path d=\"M14.73077392578125,8.807690000000001L14.73077392578125,6.26923C14.73077392578125,5.568254,15.29902692578125,5,16.00000392578125,5C16.70097392578125,5,17.26923392578125,5.568254,17.26923392578125,6.26923L17.26923392578125,8.807690000000001C17.26923392578125,9.50867,16.70097392578125,10.07693,16.00000392578125,10.07693C15.29902692578125,10.07693,14.73077392578125,9.50867,14.73077392578125,8.807690000000001Z\" fill=\"".concat(color, "\" fill-opacity=\"1\"/></g><g transform=\"matrix(0.7071067690849304,0.7071067690849304,-0.7071067690849304,0.7071067690849304,11.880707750418878,-14.033822285849965)\" style=\"opacity:0.05000000074505806;\"><path d=\"M22.88067626953125,11.132061337890626L22.88067626953125,8.593601337890625C22.88067626953125,7.892624337890625,23.44892926953125,7.324371337890625,24.14990626953125,7.324371337890625C24.85088626953125,7.324371337890625,25.41913626953125,7.892624337890625,25.41913626953125,8.593601337890625L25.41913626953125,11.132061337890626C25.41913626953125,11.833041337890625,24.85088626953125,12.401291337890626,24.14990626953125,12.401291337890626C23.44892926953125,12.401291337890626,22.88067626953125,11.833041337890625,22.88067626953125,11.132061337890626Z\" fill=\"").concat(color, "\" fill-opacity=\"1\"/></g><g transform=\"matrix(0,1,-1,0,41.73081970214844,-12.269180297851562)\" style=\"opacity:0.10000000149011612;\"><path d=\"M27,18.53850970214844L27,16.000049702148438C27,15.299072702148438,27.568253,14.730819702148438,28.26923,14.730819702148438C28.97021,14.730819702148438,29.53846,15.299072702148438,29.53846,16.000049702148438L29.53846,18.53850970214844C29.53846,19.23948970214844,28.97021,19.80773970214844,28.26923,19.80773970214844C27.568253,19.80773970214844,27,19.23948970214844,27,18.53850970214844Z\" fill=\"").concat(color, "\" fill-opacity=\"1\"/></g><g transform=\"matrix(-0.7071067690849304,0.7071067690849304,-0.7071067690849304,-0.7071067690849304,58.30294381839121,21.611726407169044)\" style=\"opacity:0.15000000596046448;\"><path d=\"M24.675537109375,26.68848833984375L24.675537109375,24.15002833984375C24.675537109375,23.44905133984375,25.243790109375,22.88079833984375,25.944767109375,22.88079833984375C26.645747109375,22.88079833984375,27.213997109375,23.44905133984375,27.213997109375,24.15002833984375L27.213997109375,26.68848833984375C27.213997109375,27.389468339843752,26.645747109375,27.95771833984375,25.944767109375,27.95771833984375C25.243790109375,27.95771833984375,24.675537109375,27.389468339843752,24.675537109375,26.68848833984375Z\" fill=\"").concat(color, "\" fill-opacity=\"1\"/></g><g transform=\"matrix(-1,0,0,-1,34.5384521484375,54)\" style=\"opacity:0.30000001192092896;\"><path d=\"M17.26922607421875,30.80769L17.26922607421875,28.26923C17.26922607421875,27.568254,17.83747907421875,27,18.53845607421875,27C19.23942607421875,27,19.80768607421875,27.568254,19.80768607421875,28.26923L19.80768607421875,30.80769C19.80768607421875,31.508670000000002,19.23942607421875,32.07693,18.53845607421875,32.07693C17.83747907421875,32.07693,17.26922607421875,31.508670000000002,17.26922607421875,30.80769Z\" fill=\"").concat(color, "\" fill-opacity=\"1\"/></g><g transform=\"matrix(-0.7071068286895752,-0.7071067094802856,0.7071067094802856,-0.7071068286895752,-1.8805817391439632,48.572416538932885)\" style=\"opacity:0.550000011920929;\"><path d=\"M9.119384765625,28.483379697265626L9.119384765625,25.944919697265625C9.119384765625,25.243942697265624,9.687637765625,24.675689697265625,10.388614765625,24.675689697265625C11.089594765625,24.675689697265625,11.657844765625,25.243942697265624,11.657844765625,25.944919697265625L11.657844765625,28.483379697265626C11.657844765625,29.184359697265627,11.089594765625,29.752609697265626,10.388614765625,29.752609697265626C9.687637765625,29.752609697265626,9.119384765625,29.184359697265627,9.119384765625,28.483379697265626Z\" fill=\"").concat(color, "\" fill-opacity=\"1\"/></g><g transform=\"matrix(0,-1,1,0,-12.269241333007812,22.269241333007812)\" style=\"opacity:0.699999988079071;\"><path d=\"M5,21.076931333007813L5,18.538471333007813C5,17.83749433300781,5.568253,17.269241333007812,6.26923,17.269241333007812C6.97021,17.269241333007812,7.538460000000001,17.83749433300781,7.538460000000001,18.538471333007813L7.538460000000001,21.076931333007813C7.538460000000001,21.777911333007815,6.97021,22.346161333007814,6.26923,22.346161333007814C5.568253,22.346161333007814,5,21.777911333007815,5,21.076931333007813Z\" fill=\"").concat(color, "\" fill-opacity=\"1\"/></g><g transform=\"matrix(0.7071066498756409,-0.70710688829422,0.70710688829422,0.7071066498756409,-4.303046450104375,7.850115344526785)\" style=\"opacity:0.8500000238418579;\"><path d=\"M7.32440185546875,12.926983212890626L7.32440185546875,10.388523212890625C7.32440185546875,9.687546212890625,7.89265485546875,9.119293212890625,8.59363185546875,9.119293212890625C9.29461185546875,9.119293212890625,9.86286185546875,9.687546212890625,9.86286185546875,10.388523212890625L9.86286185546875,12.926983212890626C9.86286185546875,13.627963212890625,9.29461185546875,14.196213212890626,8.59363185546875,14.196213212890626C7.89265485546875,14.196213212890626,7.32440185546875,13.627963212890625,7.32440185546875,12.926983212890626Z\" fill=\"").concat(color, "\" fill-opacity=\"1\"/></g></g></svg>"));
+        },
+    },
+});