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

package/lib/image/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}:host{font-size:0;line-height:0}.smart-image{display:inline-block;position:relative;vertical-align:middle}.smart-image__tint-color{display:inline-block;height:100%;left:0;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:cover;mask-size:cover;position:absolute;top:0;width:100%}.smart-image--round{border-radius:50%;overflow:hidden}.smart-image--round .smart-image__img{border-radius:inherit}.smart-image__error,.smart-image__img,.smart-image__loading{display:block;height:100%;width:100%}.smart-image__error,.smart-image__loading{align-items:center;background-color:var(--image-placeholder-background-color,#f7f8fa);color:var(--image-placeholder-text-color,#969799);display:flex;flex-direction:column;font-size:var(--image-placeholder-font-size,14px);justify-content:center;left:0;position:absolute;top:0}.smart-image__loading-icon{--icon-color:var(--image-loading-icon-color,#dcdee0);color:var(--image-loading-icon-color,#dcdee0);font-size:var(--image-loading-icon-size,32px)!important}.smart-image__error-img{height:var(--image-error-size,32px);width:var(--image-error-size,32px)}

package/lib/index-anchor/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-index-anchor{background-color:var(--index-anchor-background-color,transparent);color:var(--index-anchor-text-color,var(--app-B6-N1,#000));font-size:var(--index-anchor-font-size,14px);font-weight:var(--index-anchor-font-weight,500);line-height:var(--index-anchor-line-height,32px);padding:var(--index-anchor-padding,0 16px)}.smart-index-anchor--active{background-color:var(--index-anchor-active-background-color,var(--app-B3,#fff));color:var(--index-anchor-active-text-color,var(--app-M1,#3678e3));left:0;right:0}

package/lib/index-anchor/index.d.ts

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

package/lib/index-anchor/index.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var utils_1 = require("../common/utils");
+var component_1 = require("../common/component");
+var relation_1 = require("../common/relation");
+(0, component_1.SmartComponent)({
+    relation: (0, relation_1.useParent)('index-bar'),
+    props: {
+        useSlot: Boolean,
+        index: null,
+    },
+    data: {
+        active: false,
+        wrapperStyle: '',
+        anchorStyle: '',
+    },
+    methods: {
+        scrollIntoView: function (scrollTop) {
+            var _this = this;
+            return new Promise(function (resolve, reject) {
+                (0, utils_1.getRect)(_this, '.smart-index-anchor-wrapper').then(function (rect) {
+                    wx.pageScrollTo({
+                        duration: 0,
+                        scrollTop: scrollTop + rect.top - _this.parent.data.stickyOffsetTop,
+                        complete: function () {
+                            setTimeout(function () {
+                                resolve('success');
+                            }, 50);
+                        },
+                        fail: function (err) {
+                            setTimeout(function () {
+                                reject(err);
+                            }, 50);
+                        },
+                    });
+                });
+            });
+        },
+    },
+});

package/lib/index-anchor/index.json

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

package/lib/index-anchor/index.wxml

@@ -0,0 +1,14 @@
+<view
+  class="smart-index-anchor-wrapper"
+  style="{{ wrapperStyle }}"
+>
+  <view
+    class="smart-index-anchor {{ active ? 'smart-index-anchor--active smart-hairline--bottom' : '' }}"
+    style="{{ anchorStyle }}"
+  >
+    <slot wx:if="{{ useSlot }}"/>
+    <block wx:else>
+      <text>{{ index }}</text>
+    </block>
+  </view>
+</view>

package/lib/index-anchor/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-anchor{background-color:var(--index-anchor-background-color,transparent);color:var(--index-anchor-text-color,var(--app-B6-N1,#000));font-size:var(--index-anchor-font-size,14px);font-weight:var(--index-anchor-font-weight,500);line-height:var(--index-anchor-line-height,32px);padding:var(--index-anchor-padding,0 16px)}.smart-index-anchor--active{background-color:var(--index-anchor-active-background-color,var(--app-B3,#fff));color:var(--index-anchor-active-text-color,var(--app-M1,#3678e3));left:0;right:0}

package/lib/index-bar/README.md

@@ -0,0 +1,189 @@
+---
+category: 导航
+---
+
+# IndexBar 索引栏
+
+### 介绍
+
+用于列表的索引分类显示和快速定位。
+
+### 引入
+
+在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](/material/smartui?comId=help-getting-started&appType=miniapp)。
+
+```json
+"usingComponents": {
+  "smart-index-bar": "@tuya/miniapp-smart-ui/lib/index-bar/index",
+  "smart-index-anchor": "@tuya/miniapp-smart-ui/lib/index-anchor/index"
+}
+```
+
+```warning:⚠️注意
+组件是监听整个page 滚动事件来做动态的 fixed 标题元素，所以渲染此组件的页面必须配置 页面可滚动。
+
+index.config.ts:
+
+export default {
+  navigationBarTitleText: 'Home',
+  disableScroll: false,
+};
+```
+
+## 代码演示
+
+### 基础用法
+
+点击索引栏时，会自动跳转到对应的`IndexAnchor`锚点位置。设置 `scrollable` 后可滑动定位；设置 `show-move-tip`（`v2.12.0`）可在拖动侧边栏时显示跟随手指的提示气泡。
+
+```html
+<smart-index-bar scrollable show-move-tip>
+  <view wx:for="{{ indexList }}" wx:for-item="item" wx:key="item">
+    <smart-index-anchor index="{{ item }}" />
+    <smart-cell title="文本" />
+    <smart-cell title="文本" />
+    <smart-cell title="文本" />
+  </view>
+</smart-index-bar>
+```
+
+```javascript
+const indexList = [];
+const charCodeOfA = 'A'.charCodeAt(0);
+
+for (let i = 0; i < 26; i++) {
+  indexList.push(String.fromCharCode(charCodeOfA + i));
+}
+
+Page({
+  data: {
+    indexList, // A-Z 字母列表
+  },
+});
+```
+
+### 自定义索引列表
+
+可以通过`index-list`属性自定义展示的索引字符列表。
+
+```html
+<smart-index-bar index-list="{{ customIndexList }}">
+  <view wx:for="{{ customIndexList }}" wx:key="index">
+    <smart-index-anchor use-slot index="{{ item }}">
+      <text>标题{{ item }}</text>
+    </smart-index-anchor>
+    <smart-cell title="文本" />
+    <smart-cell title="文本" />
+    <smart-cell title="文本" />
+  </view>
+</smart-index-bar>
+```
+
+```javascript
+Page({
+  data: {
+    customIndexList: [1, 2, 3, 4, 5, 6, 8, 9, 10],
+  },
+});
+```
+
+### 自定义侧边栏样式 `v2.11.0`
+
+`sidebar-font-size` 和 `sidebar-line-height` 属性可以设置侧边栏的字体样式
+
+```html
+<smart-index-bar sidebar-font-size="16px" sidebar-line-height="20px">
+  <view wx:for="{{ indexList }}" wx:for-item="item" wx:key="item">
+    <smart-index-anchor index="{{ item }}" />
+    <smart-cell title="文本" />
+    <smart-cell title="文本" />
+    <smart-cell title="文本" />
+  </view>
+</smart-index-bar>
+```
+
+```javascript
+const indexList = [];
+const charCodeOfA = 'A'.charCodeAt(0);
+
+for (let i = 0; i < 26; i++) {
+  indexList.push(String.fromCharCode(charCodeOfA + i));
+}
+
+Page({
+  data: {
+    indexList, // A-Z 字母列表
+  },
+});
+```
+
+## API
+
+### IndexBar Props
+
+| 参数                          | 说明                       | 类型                   | 默认值    |
+| ----------------------------- | -------------------------- | ---------------------- | --------- |
+| highlight-color               | 索引字符高亮颜色           | _string_               | `#07c160` |
+| index-list                    | 索引字符列表               | _string[] \| number[]_ | `A-Z`     |
+| sticky                        | 是否开启锚点自动吸顶       | _boolean_              | `true`    |
+| sticky-push `v2.13.0`         | 滚动时是否开启上一个吸顶锚点的上推动画效果 | _boolean_ | `true`    |
+| sticky-offset-top             | 锚点自动吸顶时与顶部的距离 | _number_               | `0`       |
+| z-index                       | z-index 层级               | _number_               | `1`       |
+| scrollable `v2.1.7`           | SideBar 是否可滚动定位     | _boolean_              | `false`   |
+| show-move-tip `v2.12.0`       | 是否在拖动侧边栏时显示跟随手指的提示气泡 | _boolean_ | `false`   |
+| sidebar-font-size `v2.11.0`   | SideBar 字体大小           | _string_               | -         |
+| sidebar-line-height `v2.11.0` | SideBar 字体行高           | _string_               | -         |
+
+### IndexAnchor Props
+
+| 参数     | 说明                     | 类型               | 默认值  |
+| -------- | ------------------------ | ------------------ | ------- |
+| index    | 索引字符                 | _string \| number_ | -       |
+| use-slot | 是否使用自定义内容的插槽 | _boolean_          | `false` |
+
+### IndexBar Events
+
+| 事件名 | 说明           | 回调参数        |
+| ------ | -------------- | --------------- |
+| select | 选中字符时触发 | index: 索引字符 |
+
+### IndexAnchor Slots
+
+| 名称 | 说明                             |
+| ---- | -------------------------------- |
+| -    | 锚点位置显示内容，默认为索引字符 |
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](/material/smartui?comId=config-provider&appType=miniapp)。
+
+**IndexBar**
+
+| 名称                                      | 默认值       | 描述                   |
+| ----------------------------------------- | ------------ | ---------------------- |
+| --index-bar-index-font-size               | _10px_        | 侧边栏索引字体大小     |
+| --index-bar-index-line-height             | _14px_ `v2.0.0` _16px_ `v2.12.0` | 侧边栏索引行高     |
+| --index-bar-move-tip-text-padding `v2.12.0` | _0 10px 0 0_ | 拖动提示文字内边距     |
+| --index-bar-move-tip-text-font-size `v2.12.0`     | _24px_   | 拖动提示文字字体大小   |
+| --index-bar-move-tip-text-line-height `v2.12.0`   | _32px_   | 拖动提示文字行高       |
+| --index-bar-move-tip-text-color `v2.12.0`        | _#fff_   | 拖动提示文字颜色       |
+
+**IndexAnchor**
+
+| 名称                                    | 默认值        | 描述               |
+| --------------------------------------- | ------------- | ------------------ |
+| --index-anchor-padding                  | _0 16px_      | 锚点内边距         |
+| --index-anchor-text-color               | _rgba(0,0,0,1)_ | 锚点文字颜色     |
+| --index-anchor-font-weight              | _500_         | 锚点字重           |
+| --index-anchor-font-size                | _14px_        | 锚点字体大小       |
+| --index-anchor-line-height              | _32px_        | 锚点行高           |
+| --index-anchor-background-color         | _transparent_ | 锚点背景色         |
+| --index-anchor-active-background-color  | _#ffffff_     | 锚点吸顶时背景色   |
+| --index-anchor-active-text-color        | _#3678e3_     | 锚点吸顶时文字颜色 |
+| --index-anchor-index-padding            | _0 4px 0 20px_ | 锚点右侧索引内边距 |
+
+## 常见问题
+
+### 嵌套在滚动元素中 IndexAnchor 失效？
+
+由于 `<IndexBar />` 内部使用 ty.pageScrollTo 滚动到指定位置，因此只支持页面级滚动，无法在滚动元素中嵌套使用，例如：`view` 使用 `overflow: scroll;` 或者 `scroll-view`，具体可查看[微信小程序文档](https://developers.weixin.qq.com/miniprogram/dev/api/ui/scroll/ty.pageScrollTo.html)。

package/lib/index-bar/icon.d.ts

@@ -0,0 +1,2 @@
+declare const _default: "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20fill%3D%22none%22%20version%3D%221.1%22%20width%3D%2252%22%20height%3D%2244%22%20viewBox%3D%220%200%2052%2044%22%3E%3Cg%3E%3Cpath%20d%3D%22M50.967297%2C23.260168Q33.797146%2C44%2C22%2C44C9.8497353%2C44%2C0%2C34.150265%2C0%2C22C0%2C9.8497353%2C9.8497353%2C0%2C22%2C0Q33.797146%2C0%2C50.967297%2C20.739832C51.570396%2C21.468315%2C51.570396%2C22.531685%2C50.967297%2C23.260168%22%20fill%3D%22currentColor%22%20fill-opacity%3D%220.30000001192092896%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E";
+export default _default;

package/lib/index-bar/icon.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = 'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20fill%3D%22none%22%20version%3D%221.1%22%20width%3D%2252%22%20height%3D%2244%22%20viewBox%3D%220%200%2052%2044%22%3E%3Cg%3E%3Cpath%20d%3D%22M50.967297%2C23.260168Q33.797146%2C44%2C22%2C44C9.8497353%2C44%2C0%2C34.150265%2C0%2C22C0%2C9.8497353%2C9.8497353%2C0%2C22%2C0Q33.797146%2C0%2C50.967297%2C20.739832C51.570396%2C21.468315%2C51.570396%2C22.531685%2C50.967297%2C23.260168%22%20fill%3D%22currentColor%22%20fill-opacity%3D%220.30000001192092896%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E';

package/lib/index-bar/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-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/index-bar/index.d.ts

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