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

package/lib/popup/README.md

@@ -0,0 +1,165 @@
+---
+category: 反馈
+---
+
+# Popup 弹出层
+
+### 介绍
+
+弹出层容器，用于展示弹窗、信息提示等内容，支持多个弹出层叠加展示。
+
+### 引入
+
+在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](/material/smartui?comId=help-getting-started&appType=miniapp)。
+
+```json
+"usingComponents": {
+  "smart-popup": "@tuya/miniapp-smart-ui/lib/popup/index"
+}
+```
+
+## 代码演示
+
+### 基础用法
+
+通过`show`属性控制弹出层是否展示。
+
+```html
+<smart-cell title="展示弹出层" is-link bind:click="showPopup" />
+
+<smart-popup show="{{ show }}" bind:close="onClose">内容</smart-popup>
+```
+
+```javascript
+Page({
+  data: {
+    show: false,
+  },
+
+  showPopup() {
+    this.setData({ show: true });
+  },
+
+  onClose() {
+    this.setData({ show: false });
+  },
+});
+```
+
+### 弹出位置
+
+通过`position`属性设置弹出位置，默认居中弹出，可以设置为`top`、`bottom`、`left`、`right`。
+
+```html
+<smart-popup show="{{ show }}" position="top" custom-style="height: 20%;" bind:close="onClose" />
+```
+
+### 关闭图标
+
+设置`closeable`属性后，会在弹出层的右上角显示关闭图标，并且可以通过`close-icon`属性自定义图标，使用`close-icon-position`属性可以自定义图标位置。
+
+```html
+<smart-popup
+  show="{{ show }}"
+  closeable
+  position="bottom"
+  custom-style="height: 20%"
+  bind:close="onClose"
+/>
+
+<!-- 自定义图标 -->
+<smart-popup
+  show="{{ show }}"
+  closeable
+  close-icon="close"
+  position="bottom"
+  custom-style="height: 20%"
+  bind:close="onClose"
+/>
+
+<!-- 图标位置 -->
+<smart-popup
+  show="{{ show }}"
+  closeable
+  close-icon-position="top-left"
+  position="bottom"
+  custom-style="height: 20%"
+  bind:close="onClose"
+/>
+```
+
+### 圆角弹窗
+
+设置`round`属性后，弹窗会根据弹出位置添加不同的圆角样式。
+
+```html
+<smart-popup
+  show="{{ show }}"
+  round
+  position="bottom"
+  custom-style="height: 20%"
+  bind:close="onClose"
+/>
+```
+
+## API
+
+### Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| close-icon | 关闭图标名称或图片链接 | _string_ | `cross` |
+| close-icon-aria-label `v2.13.0` | 关闭按钮的无障碍读屏文案，透传至内部 `smart-icon` 的 `aria-label` | _string_ | - |
+| close-icon-position | 关闭图标位置，可选值为 `top-left`<br>`bottom-left` `bottom-right` | _string_ | `top-right` |
+| close-on-click-overlay | 是否在点击遮罩层后关闭 | _boolean_ | `true` |
+| closeable | 是否显示关闭图标 | _boolean_ | `false` |
+| custom-style | 自定义弹出层样式 | _string_ | `''` |
+| duration | 动画时长，单位为毫秒 | _number \| object_ | `300` |
+| lock-scroll | 是否锁定背景滚动 | _boolean_ | `true` |
+| overlay | 是否显示遮罩层 | _boolean_ | `true` |
+| overlay-style | 自定义遮罩层样式 | _string_ | `''` |
+| position | 弹出位置，可选值为 `top` `bottom` `right` `left` | _string_ | `center` |
+| round | 是否显示圆角 | _boolean_ | `false` |
+| safe-area-inset-bottom | 是否留出底部安全距离，v2.7.1 开始默认关闭 | _boolean_ | `false` |
+| safe-area-inset-bottom-min `v1.1.0` | 是否需要预留出一个最小的底部安全距离，用于在 safeArea 底部为 0 时进行追加，需要在 safeAreaInsetBottom 为 true 时生效 | _number_ | `0` |
+| safe-area-inset-top | 是否留出顶部安全距离（状态栏高度） | _boolean_ | `false` |
+| safe-area-tab-bar | 是否留出底部 tabbar 安全距离（在使用 tabbar 组件 & 小程序自定义 tabbar 时，popup 组件层级无法盖住 tabbar） | _boolean_ | `false` |
+| show | 是否显示弹出层 | _boolean_ | `false` |
+| z-index | z-index 层级 | _number_ | `100` |
+| native-disabled `v2.3.8` | 开启弹框期间是否禁用本地手势; 会在弹框开始进入动画时调用 `ty.nativeDisabled(true)`, 在弹框关闭动画结束时调用 `ty.nativeDisabled(false)` 恢复异层组件的点击能力；由于`ty.nativeDisabled` 是全局生效的，所以多个弹框组件同时打开时注意是否传 `native-disabled`属性和关闭的时机，防止 `native-disabled` 属性失效 | _boolean_ | `false` |
+| full-cover-view `v2.11.1` | 是否使用 cover-view 包裹弹层，用于覆盖原生组件（如 map、video）时使用 | _boolean_ | `false` |
+
+### Events
+
+| 事件名 | 说明 | 参数 |
+| --- | --- | --- |
+| bind:after-enter | 进入后触发 | - |
+| bind:after-leave | 离开后触发 | - |
+| bind:before-enter | 进入前触发 | - |
+| bind:before-leave | 离开前触发 | - |
+| bind:click-overlay | 点击遮罩层时触发 | - |
+| bind:close | 关闭弹出层时触发 | - |
+| bind:enter | 进入中触发 | - |
+| bind:leave | 离开中触发 | - |
+
+### 外部样式类
+
+| 类名 | 说明 |
+| --- | --- |
+| custom-class | 根节点样式类 |
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](/material/smartui?comId=config-provider&appType=miniapp)。
+
+| 名称 | 默认值 | 描述 |
+| --- | --- | --- |
+| --popup-background-color | _var(--app-B4, #ffffff)_ | 弹窗背景颜色 |
+| --popup-round-border-radius | _16px_ | 圆形边框半径 |
+| --popup-close-icon-size | _24px_ | 关闭图标大小 |
+| --popup-close-icon-color | _#969799_ | 关闭图标颜色 |
+| --popup-close-icon-margin | _12px_ | 关闭图标边距 |
+| --popup-close-icon-z-index | _1_ | 关闭图标层级 |
+| --overlay-background-color  | _rgba(0,0,0,0.4)_ / _rgba(0,0,0,0.7)_        | 直接指定遮罩背景色时使用，设置后不再使用毛玻璃/半透明变量 |
+| --overlay-blur-background  `v2.12.0`  | _rgba(40,44,53,0.22)_ / _rgba(0,0,0,0.6)_ | 支持模糊时的毛玻璃遮罩背景色 |
+| --overlay-blur-radius  `v2.12.0`     | _16px_      | 毛玻璃模糊半径 |

package/lib/popup/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-popup{-webkit-overflow-scrolling:touch;animation:ease both;background:var(--popup-background-color,var(--app-B4,#fff));box-sizing:border-box;max-height:100%;position:fixed;transition-timing-function:ease}.smart-popup--center{left:50%;top:50%;transform:translate3d(-50%,-50%,0)}.smart-popup--center.smart-popup--round{border-radius:var(--popup-round-border-radius,16px);overflow:hidden}.smart-popup--top{left:0;top:0;width:100%}.smart-popup--top.smart-popup--round{border-radius:0 0 var(--popup-round-border-radius,var(--popup-round-border-radius,16px)) var(--popup-round-border-radius,var(--popup-round-border-radius,16px));overflow:hidden}.smart-popup--right{right:0;top:50%;transform:translate3d(0,-50%,0)}.smart-popup--right.smart-popup--round{border-radius:var(--popup-round-border-radius,var(--popup-round-border-radius,16px)) 0 0 var(--popup-round-border-radius,var(--popup-round-border-radius,16px));overflow:hidden}.smart-popup--bottom{bottom:0;left:0;width:100%}.smart-popup--bottom.smart-popup--round{border-radius:var(--popup-round-border-radius,var(--popup-round-border-radius,16px)) var(--popup-round-border-radius,var(--popup-round-border-radius,16px)) 0 0;overflow:hidden}.smart-popup--left{left:0;top:50%;transform:translate3d(0,-50%,0)}.smart-popup--left.smart-popup--round{border-radius:0 var(--popup-round-border-radius,var(--popup-round-border-radius,16px)) var(--popup-round-border-radius,var(--popup-round-border-radius,16px)) 0;overflow:hidden}.smart-popup--bottom.smart-popup--safeTabBar,.smart-popup--top.smart-popup--safeTabBar{bottom:var(--tabbar-height,55px)}.smart-popup--safeTop{padding-top:env(safe-area-inset-top)}.smart-popup__close-icon{color:var(--popup-close-icon-color,#969799);font-size:var(--popup-close-icon-size,24px);position:absolute;z-index:var(--popup-close-icon-z-index,1)}.smart-popup__close-icon--top-left{left:var(--popup-close-icon-margin,12px);top:var(--popup-close-icon-margin,12px)}.smart-popup__close-icon--top-right{right:var(--popup-close-icon-margin,12px);top:var(--popup-close-icon-margin,12px)}.smart-popup__close-icon--bottom-left{bottom:var(--popup-close-icon-margin,12px);left:var(--popup-close-icon-margin,12px)}.smart-popup__close-icon--bottom-right{bottom:var(--popup-close-icon-margin,12px);right:var(--popup-close-icon-margin,12px)}.smart-popup__close-icon:active{opacity:.6}.smart-popup-full-cover-view{height:100vh;left:0;position:fixed;top:0;width:100vw}.smart-scale-enter-active,.smart-scale-leave-active{transition-property:opacity,transform}.smart-scale-enter,.smart-scale-leave-to{opacity:0;transform:translate3d(-50%,-50%,0) scale(.7)}.smart-fade-enter-active,.smart-fade-leave-active{transition-property:opacity}.smart-fade-enter,.smart-fade-leave-to{opacity:0}.smart-center-enter-active,.smart-center-leave-active{transition-property:opacity}.smart-center-enter,.smart-center-leave-to{opacity:0}.smart-bottom-enter-active,.smart-bottom-leave-active,.smart-left-enter-active,.smart-left-leave-active,.smart-right-enter-active,.smart-right-leave-active,.smart-top-enter-active,.smart-top-leave-active{transition-property:transform}.smart-bottom-enter,.smart-bottom-leave-to{transform:translate3d(0,100%,0)}.smart-top-enter,.smart-top-leave-to{transform:translate3d(0,-100%,0)}.smart-left-enter,.smart-left-leave-to{transform:translate3d(-100%,-50%,0)}.smart-right-enter,.smart-right-leave-to{transform:translate3d(100%,-50%,0)}

package/lib/popup/index.d.ts

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

package/lib/popup/index.js

@@ -0,0 +1,120 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var Xmark_1 = __importDefault(require("@tuya-miniapp/icons/dist/svg/Xmark"));
+var component_1 = require("../common/component");
+var transition_1 = require("../mixins/transition");
+(0, component_1.SmartComponent)({
+    classes: [
+        'enter-class',
+        'enter-active-class',
+        'enter-to-class',
+        'leave-class',
+        'leave-active-class',
+        'leave-to-class',
+        'close-icon-class',
+    ],
+    mixins: [(0, transition_1.transition)(false)],
+    props: {
+        round: Boolean,
+        closeable: Boolean,
+        customStyle: String,
+        overlayStyle: String,
+        transition: {
+            type: String,
+            observer: 'observeClass',
+        },
+        zIndex: {
+            type: Number,
+            value: 100,
+        },
+        overlay: {
+            type: Boolean,
+            value: true,
+        },
+        closeIcon: {
+            type: String,
+            value: Xmark_1.default,
+        },
+        closeIconAriaLabel: {
+            type: String,
+            value: '',
+        },
+        closeIconPosition: {
+            type: String,
+            value: 'top-right',
+        },
+        closeOnClickOverlay: {
+            type: Boolean,
+            value: true,
+        },
+        position: {
+            type: String,
+            value: 'center',
+            observer: 'observeClass',
+        },
+        safeAreaInsetBottom: {
+            type: Boolean,
+            value: false,
+        },
+        safeAreaInsetBottomMin: {
+            type: Number,
+            value: 0,
+        },
+        safeAreaInsetTop: {
+            type: Boolean,
+            value: false,
+        },
+        safeAreaTabBar: {
+            type: Boolean,
+            value: false,
+        },
+        lockScroll: {
+            type: Boolean,
+            value: true,
+        },
+        rootPortal: {
+            type: Boolean,
+            value: false,
+        },
+        fullCoverView: {
+            type: Boolean,
+            value: false,
+        },
+    },
+    data: {
+        closeIcon: Xmark_1.default,
+    },
+    created: function () {
+        this.observeClass();
+    },
+    methods: {
+        // for prevent touchmove
+        noop: function () { },
+        onClickCloseIcon: function () {
+            this.$emit('close');
+        },
+        onClickOverlay: function () {
+            this.$emit('click-overlay');
+            if (this.data.closeOnClickOverlay) {
+                this.$emit('close');
+            }
+        },
+        observeClass: function () {
+            var _a = this.data, transition = _a.transition, position = _a.position, duration = _a.duration;
+            var updateData = {
+                name: transition || position,
+            };
+            if (transition === 'none') {
+                updateData.duration = 0;
+                this.originDuration = duration;
+            }
+            else if (this.originDuration != null) {
+                updateData.duration = this.originDuration;
+            }
+            this.setData(updateData);
+        },
+    },
+});

package/lib/popup/index.json

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

package/lib/popup/index.wxml

@@ -0,0 +1,43 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+<wxs src="./index.wxs" module="computed" />
+
+<import src="./popup.wxml" />
+
+<block wx:if="{{ isShowed }}">
+  <cover-view wx:if="{{ fullCoverView && isShowed && show }}" class="smart-popup-full-cover-view" style="z-index: {{ zIndex }};">
+    <smart-overlay
+      wx:if="{{ overlay }}"
+      show="{{ show }}"
+      z-index="{{ zIndex }}"
+      custom-style="{{ overlayStyle }}"
+      duration="{{ duration }}"
+      bind:click="onClickOverlay"
+      lock-scroll="{{ lockScroll }}"
+      root-portal="{{ rootPortal }}"
+    />
+
+    <root-portal wx:if="{{ rootPortal }}">
+      <include src="./popup.wxml" />
+    </root-portal>
+
+    <include wx:else src="./popup.wxml" />
+  </cover-view>
+  <block wx:else>
+    <smart-overlay
+      wx:if="{{ overlay }}"
+      show="{{ show }}"
+      z-index="{{ zIndex }}"
+      custom-style="{{ overlayStyle }}"
+      duration="{{ duration }}"
+      bind:click="onClickOverlay"
+      lock-scroll="{{ lockScroll }}"
+      root-portal="{{ rootPortal }}"
+    />
+
+    <root-portal wx:if="{{ rootPortal }}">
+      <include src="./popup.wxml" />
+    </root-portal>
+
+    <include wx:else src="./popup.wxml" />
+  </block>
+</block>

package/lib/popup/index.wxs

@@ -0,0 +1,37 @@
+/* eslint-disable */
+var style = require('../wxs/style.wxs');
+
+function popupStyle(data) {
+  // 底部安全距离：整体逻辑与原 getSafeBottomOffset 一致——
+  // 「底部安全距离 + 16px 基础安全值」再与 safeAreaInsetBottomMin 取较大值；
+  // 区别仅在于安全距离改用全局注入的 CSS 变量 env(safe-area-inset-bottom) 获取，
+  // 不再从 systemInfo（screenHeight - safeArea.height - statusBarHeight）计算。
+  // 其中 16px 对应 utils.getSafeAreaInsetMin()。
+  var safeBottom = data.safeAreaInsetBottom
+    ? 'max(calc(env(safe-area-inset-bottom) + 16px), ' + (data.safeAreaInsetBottomMin || 0) + 'px)'
+    : null;
+
+  var transformStyle = null;
+  if (data.position === 'bottom') {
+    // 隐藏态需在自身高度基础上再位移底部安全距离，保证弹层完全移出屏幕
+    transformStyle = safeBottom
+      ? 'transform: translate3d(0, calc(100% + ' + safeBottom + '), 0)'
+      : 'transform: translate3d(0, 100%, 0)';
+  }
+
+  return style([
+    {
+      'margin-bottom': safeBottom,
+      'z-index': data.zIndex,
+      '-webkit-transition-duration': data.currentDuration + 'ms',
+      'transition-duration': data.currentDuration + 'ms',
+    },
+    data.status === 'enter' ? null : transformStyle,
+    data.display ? null : 'display: none',
+    data.customStyle,
+  ]);
+}
+
+module.exports = {
+  popupStyle: popupStyle,
+};

package/lib/popup/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-popup{-webkit-overflow-scrolling:touch;animation:ease both;background:var(--popup-background-color,var(--app-B4,#fff));box-sizing:border-box;max-height:100%;position:fixed;transition-timing-function:ease}.smart-popup--center{left:50%;top:50%;transform:translate3d(-50%,-50%,0)}.smart-popup--center.smart-popup--round{border-radius:var(--popup-round-border-radius,16px);overflow:hidden}.smart-popup--top{left:0;top:0;width:100%}.smart-popup--top.smart-popup--round{border-radius:0 0 var(--popup-round-border-radius,var(--popup-round-border-radius,16px)) var(--popup-round-border-radius,var(--popup-round-border-radius,16px));overflow:hidden}.smart-popup--right{right:0;top:50%;transform:translate3d(0,-50%,0)}.smart-popup--right.smart-popup--round{border-radius:var(--popup-round-border-radius,var(--popup-round-border-radius,16px)) 0 0 var(--popup-round-border-radius,var(--popup-round-border-radius,16px));overflow:hidden}.smart-popup--bottom{bottom:0;left:0;width:100%}.smart-popup--bottom.smart-popup--round{border-radius:var(--popup-round-border-radius,var(--popup-round-border-radius,16px)) var(--popup-round-border-radius,var(--popup-round-border-radius,16px)) 0 0;overflow:hidden}.smart-popup--left{left:0;top:50%;transform:translate3d(0,-50%,0)}.smart-popup--left.smart-popup--round{border-radius:0 var(--popup-round-border-radius,var(--popup-round-border-radius,16px)) var(--popup-round-border-radius,var(--popup-round-border-radius,16px)) 0;overflow:hidden}.smart-popup--bottom.smart-popup--safeTabBar,.smart-popup--top.smart-popup--safeTabBar{bottom:var(--tabbar-height,55px)}.smart-popup--safeTop{padding-top:env(safe-area-inset-top)}.smart-popup__close-icon{color:var(--popup-close-icon-color,#969799);font-size:var(--popup-close-icon-size,24px);position:absolute;z-index:var(--popup-close-icon-z-index,1)}.smart-popup__close-icon--top-left{left:var(--popup-close-icon-margin,12px);top:var(--popup-close-icon-margin,12px)}.smart-popup__close-icon--top-right{right:var(--popup-close-icon-margin,12px);top:var(--popup-close-icon-margin,12px)}.smart-popup__close-icon--bottom-left{bottom:var(--popup-close-icon-margin,12px);left:var(--popup-close-icon-margin,12px)}.smart-popup__close-icon--bottom-right{bottom:var(--popup-close-icon-margin,12px);right:var(--popup-close-icon-margin,12px)}.smart-popup__close-icon:active{opacity:.6}.smart-popup-full-cover-view{height:100vh;left:0;position:fixed;top:0;width:100vw}.smart-scale-enter-active,.smart-scale-leave-active{transition-property:opacity,transform}.smart-scale-enter,.smart-scale-leave-to{opacity:0;transform:translate3d(-50%,-50%,0) scale(.7)}.smart-fade-enter-active,.smart-fade-leave-active{transition-property:opacity}.smart-fade-enter,.smart-fade-leave-to{opacity:0}.smart-center-enter-active,.smart-center-leave-active{transition-property:opacity}.smart-center-enter,.smart-center-leave-to{opacity:0}.smart-bottom-enter-active,.smart-bottom-leave-active,.smart-left-enter-active,.smart-left-leave-active,.smart-right-enter-active,.smart-right-leave-active,.smart-top-enter-active,.smart-top-leave-active{transition-property:transform}.smart-bottom-enter,.smart-bottom-leave-to{transform:translate3d(0,100%,0)}.smart-top-enter,.smart-top-leave-to{transform:translate3d(0,-100%,0)}.smart-left-enter,.smart-left-leave-to{transform:translate3d(-100%,-50%,0)}.smart-right-enter,.smart-right-leave-to{transform:translate3d(100%,-50%,0)}

package/lib/popup/popup.wxml

@@ -0,0 +1,18 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+<wxs src="./index.wxs" module="computed" />
+<view
+  wx:if="{{ inited }}"
+  class="custom-class {{ classes }} {{ utils.bem('popup', [position, { round, safeTop: safeAreaInsetTop, safeTabBar: safeAreaTabBar }]) }}"
+  style="{{ computed.popupStyle({ position, status, zIndex, currentDuration, display, customStyle, safeAreaInsetBottom, safeAreaInsetBottomMin }) }}"
+  catch:touchmove="{{ lockScroll ? 'noop' : ''}}"
+>
+  <slot />
+  <smart-icon
+    wx:if="{{ closeable }}"
+    name="{{ closeIcon }}"
+    class="close-icon-class smart-popup__close-icon smart-popup__close-icon--{{ closeIconPosition }}"
+    aria-role="button"
+    aria-label="{{ closeIconAriaLabel }}"
+    bind:tap="onClickCloseIcon"
+  />
+</view>

package/lib/progress/README.md

@@ -0,0 +1,99 @@
+<!-- ---
+category: 展示
+--- -->
+
+# Progress 进度条
+
+### 介绍
+
+用于展示操作的当前进度。
+
+### 引入
+
+在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](/material/smartui?comId=help-getting-started&appType=miniapp)。
+
+```json
+"usingComponents": {
+  "smart-progress": "@tuya/miniapp-smart-ui/lib/progress/index"
+}
+```
+
+## 代码演示
+
+### 基础用法
+
+进度条默认为蓝色，使用`percentage`属性来设置当前进度。
+
+```html
+<smart-progress percentage="50" />
+```
+
+### 线条粗细
+
+通过`stroke-width`可以设置进度条的粗细。
+
+```html
+<smart-progress :percentage="50" stroke-width="8" />
+```
+
+### 置灰
+
+设置`inactive`属性后进度条将置灰。
+
+```html
+<smart-progress inactive percentage="50" />
+```
+
+### 样式定制
+
+可以使用`pivot-text`属性自定义文字，`color`属性自定义进度条颜色。
+
+```html
+<smart-progress pivot-text="橙色" color="#f2826a" percentage="25" />
+
+<smart-progress pivot-text="红色" color="#ee0a24" percentage="50" />
+
+<smart-progress
+  percentage="75"
+  pivot-text="紫色"
+  pivot-color="#7232dd"
+  color="linear-gradient(to right, #be99ff, #7232dd)"
+/>
+```
+
+## API
+
+### Props
+
+| 参数         | 说明                       | 类型               | 默认值           |
+| ------------ | -------------------------- | ------------------ | ---------------- |
+| color        | 进度条颜色                 | _string_           | `#1989fa`        |
+| inactive     | 是否置灰                   | _boolean_          | `false`          |
+| percentage   | 进度百分比                 | _number_           | `0`              |
+| pivot-color  | 文字背景色                 | _string_           | 与进度条颜色一致 |
+| pivot-text   | 文字显示                   | _string_           | 百分比文字       |
+| show-pivot   | 是否显示进度文字           | _boolean_          | `true`           |
+| stroke-width | 进度条粗细，默认单位为`px` | _string \| number_ | `4px`            |
+| text-color   | 进度文字颜色               | _string_           | `#fff`           |
+| track-color  | 轨道颜色                   | _string_           | `#e5e5e5`        |
+
+### 外部样式类
+
+| 类名         | 说明         |
+| ------------ | ------------ |
+| custom-class | 根节点样式类 |
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](/material/smartui?comId=config-provider&appType=miniapp)。
+
+| 名称                          | 默认值                                 | 描述 |
+| ----------------------------- | -------------------------------------- | ---- |
+| --progress-height | _4px_ | - |
+| --progress-background-color | _#ebedf0_ | - |
+| --progress-pivot-padding | _0 5px_ | - |
+| --progress-color | _#1989fa_ | - |
+| --progress-pivot-font-size | _10px_ | - |
+| --progress-pivot-line-height | _1.6_ | - |
+| --progress-pivot-background-color | _#1989fa_ | - |
+| --progress-pivot-text-color | _#fff_ | - |

package/lib/progress/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-progress{background:var(--progress-background-color,#ebedf0);border-radius:var(--progress-height,4px);height:var(--progress-height,4px);position:relative}.smart-progress__portion{background:var(--progress-color,#1989fa);border-radius:inherit;height:100%;left:0;position:absolute}.smart-progress__pivot{background-color:var(--progress-pivot-background-color,#1989fa);border-radius:1em;box-sizing:border-box;color:var(--progress-pivot-text-color,#fff);font-size:var(--progress-pivot-font-size,10px);line-height:var(--progress-pivot-line-height,1.6);min-width:3.6em;padding:var(--progress-pivot-padding,0 5px);position:absolute;text-align:center;top:50%;transform:translateY(-50%);word-break:keep-all}

package/lib/progress/index.d.ts

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

package/lib/progress/index.js

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var component_1 = require("../common/component");
+var color_1 = require("../common/color");
+var utils_1 = require("../common/utils");
+(0, component_1.SmartComponent)({
+    props: {
+        inactive: Boolean,
+        percentage: {
+            type: Number,
+            observer: 'setLeft',
+        },
+        pivotText: String,
+        pivotColor: String,
+        trackColor: String,
+        showPivot: {
+            type: Boolean,
+            value: true,
+        },
+        color: {
+            type: String,
+            value: color_1.BLUE,
+        },
+        textColor: {
+            type: String,
+            value: '#fff',
+        },
+        strokeWidth: {
+            type: null,
+            value: 4,
+        },
+    },
+    data: {
+        right: 0,
+    },
+    mounted: function () {
+        this.setLeft();
+    },
+    methods: {
+        setLeft: function () {
+            var _this = this;
+            Promise.all([(0, utils_1.getRect)(this, '.smart-progress'), (0, utils_1.getRect)(this, '.smart-progress__pivot')]).then(function (_a) {
+                var portion = _a[0], pivot = _a[1];
+                if (portion && pivot) {
+                    _this.setData({
+                        right: (pivot.width * (_this.data.percentage - 100)) / 100,
+                    });
+                }
+            });
+        },
+    },
+});

package/lib/progress/index.json

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

package/lib/progress/index.wxml

@@ -0,0 +1,20 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+<wxs src="./index.wxs" module="computed" />
+
+<view
+  class="smart-progress custom-class"
+  style="{{ computed.rootStyle({ strokeWidth, trackColor }) }}"
+>
+  <view
+    class="smart-progress__portion"
+    style="{{ computed.portionStyle({ percentage, inactive, color }) }}"
+  >
+    <view
+      wx:if="{{ showPivot && computed.pivotText(pivotText, percentage) }}"
+      style="{{ computed.pivotStyle({ textColor, pivotColor, inactive, color, right }) }}"
+      class="smart-progress__pivot"
+    >
+      {{ computed.pivotText(pivotText, percentage) }}
+    </view>
+  </view>
+</view>

package/lib/progress/index.wxs

@@ -0,0 +1,36 @@
+/* eslint-disable */
+var utils = require('../wxs/utils.wxs');
+var style = require('../wxs/style.wxs');
+
+function pivotText(pivotText, percentage) {
+  return pivotText || percentage + '%';
+}
+
+function rootStyle(data) {
+  return style({
+    'height': data.strokeWidth ? utils.addUnit(data.strokeWidth) : '',
+    'background': data.trackColor,
+  });
+}
+
+function portionStyle(data) {
+  return style({
+    background: data.inactive ? '#cacaca' : data.color,
+    width: data.percentage ? data.percentage + '%' : '',
+  });
+}
+
+function pivotStyle(data) {
+  return style({
+    color: data.textColor,
+    right: data.right + 'px',
+    background: data.pivotColor ? data.pivotColor : data.inactive ? '#cacaca' : data.color,
+  });
+}
+
+module.exports = {
+  pivotText: pivotText,
+  rootStyle: rootStyle,
+  portionStyle: portionStyle,
+  pivotStyle: pivotStyle,
+};

package/lib/progress/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-progress{background:var(--progress-background-color,#ebedf0);border-radius:var(--progress-height,4px);height:var(--progress-height,4px);position:relative}.smart-progress__portion{background:var(--progress-color,#1989fa);border-radius:inherit;height:100%;left:0;position:absolute}.smart-progress__pivot{background-color:var(--progress-pivot-background-color,#1989fa);border-radius:1em;box-sizing:border-box;color:var(--progress-pivot-text-color,#fff);font-size:var(--progress-pivot-font-size,10px);line-height:var(--progress-pivot-line-height,1.6);min-width:3.6em;padding:var(--progress-pivot-padding,0 5px);position:absolute;text-align:center;top:50%;transform:translateY(-50%);word-break:keep-all}