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

package/dist/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/dist/popup/index.d.ts

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

package/dist/popup/index.js

@@ -0,0 +1,115 @@
+import closeIcon from '@tuya-miniapp/icons/dist/svg/Xmark';
+import { SmartComponent } from '../common/component';
+import { transition } from '../mixins/transition';
+SmartComponent({
+    classes: [
+        'enter-class',
+        'enter-active-class',
+        'enter-to-class',
+        'leave-class',
+        'leave-active-class',
+        'leave-to-class',
+        'close-icon-class',
+    ],
+    mixins: [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: closeIcon,
+        },
+        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,
+    },
+    created() {
+        this.observeClass();
+    },
+    methods: {
+        // for prevent touchmove
+        noop() { },
+        onClickCloseIcon() {
+            this.$emit('close');
+        },
+        onClickOverlay() {
+            this.$emit('click-overlay');
+            if (this.data.closeOnClickOverlay) {
+                this.$emit('close');
+            }
+        },
+        observeClass() {
+            const { transition, position, duration } = this.data;
+            const 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/dist/popup/index.json

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

package/dist/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/dist/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/dist/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/dist/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/dist/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/dist/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/dist/progress/index.d.ts

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

package/dist/progress/index.js

@@ -0,0 +1,48 @@
+import { SmartComponent } from '../common/component';
+import { BLUE } from '../common/color';
+import { getRect } from '../common/utils';
+SmartComponent({
+    props: {
+        inactive: Boolean,
+        percentage: {
+            type: Number,
+            observer: 'setLeft',
+        },
+        pivotText: String,
+        pivotColor: String,
+        trackColor: String,
+        showPivot: {
+            type: Boolean,
+            value: true,
+        },
+        color: {
+            type: String,
+            value: BLUE,
+        },
+        textColor: {
+            type: String,
+            value: '#fff',
+        },
+        strokeWidth: {
+            type: null,
+            value: 4,
+        },
+    },
+    data: {
+        right: 0,
+    },
+    mounted() {
+        this.setLeft();
+    },
+    methods: {
+        setLeft() {
+            Promise.all([getRect(this, '.smart-progress'), getRect(this, '.smart-progress__pivot')]).then(([portion, pivot]) => {
+                if (portion && pivot) {
+                    this.setData({
+                        right: (pivot.width * (this.data.percentage - 100)) / 100,
+                    });
+                }
+            });
+        },
+    },
+});

package/dist/progress/index.json

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

package/dist/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/dist/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/dist/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}