@tuya-miniapp/smart-ui 2.3.8 → 2.3.9-beta-1

package/dist/calendar/calendar.wxml

@@ -76,4 +76,5 @@
       readonly="{{readonly}}"
      />
   </block>
+  <smart-toast wx:if="{{toastId}}" id="{{toastId}}" />
 </view>

package/dist/calendar/index.js

@@ -143,6 +143,10 @@ SmartComponent({
         dayClassMap: {
             type: null,
         },
+        toastId: {
+            type: String,
+            value: 'smart-toast-calendar',
+        },
     },
     data: {
         subtitle: '',
@@ -390,8 +394,8 @@ SmartComponent({
             if (complete && this.data.type === 'range') {
                 const valid = this.checkRange(date);
                 if (!valid) {
-                    // auto selected to max range if showConfirm
-                    if (this.data.showConfirm) {
+                    // auto selected to max range if type is range
+                    if (this.data.type === 'range' && this.data.maxRange) {
                         this.emit([date[0], getDayByOffset(date[0], this.data.maxRange - 1)]);
                     }
                     else {
@@ -416,7 +420,7 @@ SmartComponent({
             if (maxRange && calcDateNum(date) > maxRange) {
                 if (showRangePrompt) {
                     Toast({
-                        selector: '#smart-toast-calendar',
+                        selector: '#' + this.data.toastId,
                         context: this,
                         message: rangePrompt || `选择天数不能超过 ${maxRange} 天`,
                     });

package/dist/calendar/index.json

@@ -6,6 +6,7 @@
     "month-list": "../calendar-month-list/index",
     "year-list": "../calendar-year-list/index",
     "smart-button": "../button/index",
-    "smart-popup": "../popup/index"
+    "smart-popup": "../popup/index",
+    "smart-toast": "../toast/index"
   }
 }

package/dist/circle/index.css

@@ -1 +1 @@
-@import '../common/index.css';
+@import '../common/index.css';.smart-progress-circle{overflow:hidden}

package/dist/circle/index.js

@@ -5,10 +5,7 @@
 /* eslint-disable prettier/prettier */
 import { SmartComponent } from '../common/component';
 // @ts-ignore
-function percentToDecimal(percent) {
-    percent = percent.replace('%', '');
-    return percent / 100;
-}
+import Render from './index.rjs';
 const idListRef = {
     value: [],
 };
@@ -43,8 +40,8 @@ SmartComponent({
             type: Number,
             value: 0,
             observer(val) {
-                if (this.data.canvasId) {
-                    this.render(val, this.data.canvasId);
+                if (this.render && this.data.dpr) {
+                    this.render.init(this.data);
                 }
             },
         },
@@ -60,14 +57,21 @@ SmartComponent({
     },
     data: {
         canvasId: '',
-        dpr: 1,
+        dpr: 0,
+    },
+    watch: {
+        dpr() {
+            if (this.render) {
+                this.render.init(this.data);
+            }
+        },
     },
     created() {
         this.initId();
-        this.initRate();
+        this.render = new Render(this);
     },
     mounted() {
-        this.render(this.data.percent, this.data.canvasId);
+        this.initRate();
     },
     destroyed() {
         idListRef.value = idListRef.value.filter(id => id !== this.data.canvasId);
@@ -86,120 +90,6 @@ SmartComponent({
             });
             idListRef.value.push(id);
         },
-        initRate() {
-            wx.getSystemInfo({
-                success: res => {
-                    const dpr = res.pixelRatio; // 获取设备像素比
-                    this.setData({
-                        dpr: dpr,
-                    });
-                },
-            });
-            const sizeVal = this.parseSize();
-            const params = {
-                canvasWidth: +sizeVal,
-                canvasHeight: +sizeVal,
-                width: +sizeVal,
-                height: +sizeVal,
-                lineWidth: this.data.trackWidth,
-                trackColor: this.data.trackColor,
-                fillColor: this.data.fillColor,
-                fillColorStops: this.data.fillColorStops,
-                maskColor: this.data.maskColor,
-                dpr: this.data.dpr,
-            };
-            this.setData(params);
-        },
-        renderAll(canvas, ctx, progress, ops = {
-            lineCap: 'round',
-        }) {
-            const radius = ((canvas.width - canvas.lineWidth) * 0.9) / 2; // 圆形半径
-            const lineWidth = canvas.lineWidth; // 进度条宽度
-            const startAngle = Math.PI; // 起始角度（3点钟方向）
-            const endAngle = 4 * Math.PI; // 结束角度（360度）
-            // 绘制环形进度条的函数
-            function drawProgressBar(progress, color) {
-                ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除画布
-                // 绘制灰色背景
-                ctx.beginPath();
-                ctx.arc(canvas.width / 2, canvas.height / 2, radius, startAngle, endAngle);
-                // 填充颜色
-                ctx.setFillStyle(canvas.maskColor); // 你想填充的颜色
-                ctx.fill(); // 填充路径
-                ctx.setLineWidth(lineWidth);
-                ctx.setStrokeStyle(canvas.trackColor); // 灰色背景
-                ctx.setLineCap(ops.lineCap); // 设置圆角效果
-                ctx.stroke();
-                // 绘制进度条
-                const progressAngle = progress * (Math.PI * 2); // 根据进度计算角度
-                ctx.beginPath();
-                ctx.arc(canvas.width / 2, canvas.height / 2, radius, startAngle, startAngle + progressAngle);
-                ctx.setLineWidth(lineWidth);
-                if (canvas.fillColorStops) {
-                    // 创建线性渐变（起点x,y 到 终点x,y）
-                    const gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
-                    for (const stop in canvas.fillColorStops) {
-                        // 添加渐变色
-                        gradient.addColorStop(percentToDecimal(stop), canvas.fillColorStops[stop]);
-                    }
-                    ctx.setStrokeStyle(gradient); // 自定义颜色
-                }
-                else {
-                    ctx.setStrokeStyle(color); // 自定义颜色
-                }
-                ctx.setLineCap(ops.lineCap); // 设置圆角效果
-                ctx.stroke();
-                ctx.scale(canvas.dpr, canvas.dpr);
-                ctx.draw();
-            }
-            // 示例：绘制不同的进度条
-            drawProgressBar(progress, canvas.fillColor); // 25%的蓝色进度条
-        },
-        renderHalf(canvas, ctx, progress, ops = {
-            lineCap: 'round',
-        }) {
-            const radius = ((canvas.width - canvas.lineWidth) * 0.9) / 2; // 圆形半径
-            const lineWidth = canvas.lineWidth; // 进度条宽度
-            const startAngle = 1 * Math.PI; // 起始角度（3点钟方向）
-            const endAngle = 2 * Math.PI; // 结束角度（360度）
-            // 绘制环形进度条的函数
-            function drawProgressBar(progress, color) {
-                ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除画布
-                // 绘制灰色背景
-                ctx.beginPath();
-                ctx.arc(canvas.width / 2, canvas.height / 2, radius, startAngle, endAngle);
-                // 填充颜色
-                ctx.setFillStyle(canvas.maskColor); // 你想填充的颜色
-                ctx.fill(); // 填充路径
-                ctx.setLineWidth(lineWidth);
-                ctx.setStrokeStyle(canvas.trackColor); // 灰色背景
-                ctx.setLineCap(ops.lineCap); // 设置圆角效果
-                ctx.stroke();
-                // 绘制进度条
-                const progressAngle = progress * (Math.PI * 2); // 根据进度计算角度
-                ctx.beginPath();
-                ctx.arc(canvas.width / 2, canvas.height / 2, radius, startAngle, startAngle + progressAngle);
-                ctx.setLineWidth(lineWidth);
-                if (canvas.fillColorStops) {
-                    // 创建线性渐变（起点x,y 到 终点x,y）
-                    const gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
-                    for (const stop in canvas.fillColorStops) {
-                        // 添加渐变色
-                        gradient.addColorStop(percentToDecimal(stop), canvas.fillColorStops[stop]);
-                    }
-                    ctx.setStrokeStyle(gradient); // 自定义颜色
-                }
-                else {
-                    ctx.setStrokeStyle(color); // 自定义颜色
-                }
-                ctx.setLineCap(ops.lineCap); // 设置圆角效果
-                ctx.stroke();
-                ctx.scale(canvas.dpr, canvas.dpr);
-                ctx.draw();
-            }
-            // 示例：绘制不同的进度条
-            drawProgressBar(progress, canvas.fillColor); // 25%的蓝色进度条
-        },
         parseSize() {
             if (typeof this.data.size === 'number')
                 return this.data.size;
@@ -211,63 +101,27 @@ SmartComponent({
             }
             return this.data.size;
         },
-        renderHalf2(canvas, ctx, progress, ops = {
-            lineCap: 'round',
-        }) {
-            const radius = ((canvas.width - canvas.lineWidth) * 0.9) / 2; // 圆形半径
-            const lineWidth = canvas.lineWidth; // 进度条宽度
-            const startAngle = 0.8 * Math.PI; // 起始角度（3点钟方向）
-            const endAngle = 2.2 * Math.PI; // 结束角度（360度）
-            // 绘制环形进度条的函数
-            function drawProgressBar(progress, color) {
-                ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除画布
-                // 绘制灰色背景
-                ctx.beginPath();
-                ctx.arc(canvas.width / 2, canvas.height / 2, radius, startAngle, endAngle);
-                // 填充颜色
-                ctx.setFillStyle(canvas.maskColor); // 你想填充的颜色
-                ctx.fill(); // 填充路径
-                ctx.setLineWidth(lineWidth);
-                ctx.setStrokeStyle(canvas.trackColor); // 灰色背景
-                ctx.setLineCap(ops.lineCap); // 设置圆角效果
-                ctx.stroke();
-                // 绘制进度条
-                const progressAngle = progress * (Math.PI * 2); // 根据进度计算角度
-                ctx.beginPath();
-                ctx.arc(canvas.width / 2, canvas.height / 2, radius, startAngle, startAngle + progressAngle);
-                ctx.setLineWidth(lineWidth);
-                if (canvas.fillColorStops) {
-                    // 创建线性渐变（起点x,y 到 终点x,y）
-                    const gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
-                    for (const stop in canvas.fillColorStops) {
-                        // 添加渐变色
-                        gradient.addColorStop(percentToDecimal(stop), canvas.fillColorStops[stop]);
-                    }
-                    ctx.setStrokeStyle(gradient); // 自定义颜色
-                }
-                else {
-                    ctx.setStrokeStyle(color); // 自定义颜色
-                }
-                ctx.setLineCap(ops.lineCap); // 设置圆角效果
-                ctx.stroke();
-                ctx.scale(canvas.dpr, canvas.dpr);
-                ctx.draw();
-            }
-            // 示例：绘制不同的进度条
-            drawProgressBar(progress, canvas.fillColor); // 25%的蓝色进度条
-        },
-        render(val, canvasId) {
-            // @ts-ignore
-            const context = ty.createCanvasContext(canvasId);
-            if (this.data.mode === 'basic') {
-                this.renderAll(this.data, context, val / 100, this.data.round ? { lineCap: 'round' } : { lineCap: '' });
-            }
-            if (this.data.mode === 'angle') {
-                this.renderHalf(this.data, context, val / 200, this.data.round ? { lineCap: 'round' } : { lineCap: '' });
-            }
-            if (this.data.mode === 'angle2') {
-                this.renderHalf2(this.data, context, val / 150, this.data.round ? { lineCap: 'round' } : { lineCap: '' });
-            }
+        initRate() {
+            wx.getSystemInfo({
+                success: res => {
+                    const dpr = res.pixelRatio; // 获取设备像素比
+                    const sizeVal = this.parseSize();
+                    const params = {
+                        canvasWidth: +sizeVal,
+                        canvasHeight: +sizeVal,
+                        width: +sizeVal,
+                        height: +sizeVal,
+                        lineWidth: this.data.trackWidth,
+                        trackColor: this.data.trackColor,
+                        fillColor: this.data.fillColor,
+                        fillColorStops: this.data.fillColorStops,
+                        maskColor: this.data.maskColor,
+                        dpr: dpr,
+                        canvasId: this.data.canvasId,
+                    };
+                    this.setData(params);
+                },
+            });
         },
     },
 });

package/dist/circle/index.rjs

@@ -0,0 +1,230 @@
+export default Render({
+  canvas: null,
+  lineWidth: 10,
+  maskColor: '#ffffff',
+  trackColor: '#d3d3d3',
+  fillColorStops: null,
+  dpr: 1,
+  fillColor: '#007AFF',
+
+  async init(data) {
+    let canvas = this.canvas;
+    if (!canvas) {
+      canvas = await getCanvasById(data.canvasId);
+      this.canvas = canvas;
+    }
+    if (!canvas) {
+      console.error('canvas not found');
+      return;
+    }
+
+    const canvaswidth = data.width * data.dpr;
+    const canvasheight = data.height * data.dpr;
+    canvas.width = canvaswidth;
+    canvas.height = canvasheight;
+    canvas.style.width = `${data.width}px`;
+    canvas.style.height = `${data.height}px`;
+
+    const ctx = canvas.getContext('2d');
+
+    this.width = data.width;
+    this.height = data.height;
+
+    this.dpr = data.dpr;
+    this.lineWidth = data.trackWidth;
+    this.maskColor = data.maskColor;
+    this.trackColor = data.trackColor;
+    this.fillColorStops = data.fillColorStops;
+    this.dpr = data.dpr;
+    this.fillColor = data.fillColor;
+    this.mode = data.mode;
+    this.gradientColor = data.gradientColor;
+
+    ctx.scale(this.dpr, this.dpr);
+    this.render(data.percent);
+  },
+  percentToDecimal(percent) {
+    percent = percent.replace('%', '');
+    return percent / 100;
+  },
+  renderAll(
+    progress,
+    ops = {
+      lineCap: 'round',
+    }
+  ) {
+    const canvas = this.canvas;
+    const ctx = canvas.getContext('2d');
+
+    const lineWidth = this.lineWidth; // 进度条宽度
+    const radius = ((this.width - lineWidth) * 0.9) / 2; // 圆形半径
+    const startAngle = Math.PI; // 起始角度（3点钟方向）
+    const endAngle = 4 * Math.PI; // 结束角度（360度）
+
+    // 绘制环形进度条的函数
+    const drawProgressBar = (progress, color) => {
+      ctx.clearRect(0, 0, this.width, this.height); // 清除画布
+      // 绘制灰色背景
+      ctx.beginPath();
+      ctx.arc(this.width / 2, this.height / 2, radius, startAngle, endAngle);
+      ctx.lineWidth = lineWidth;
+      // 填充颜色
+      ctx.fillStyle = this.maskColor; // 你想填充的颜色
+      ctx.fill(); // 填充路径
+      ctx.strokeStyle = this.trackColor; // 灰色背景
+      ctx.lineCap = ops.lineCap; // 设置圆角效果
+      ctx.stroke();
+
+      // 绘制进度条
+      const progressAngle = progress * (Math.PI * 2); // 根据进度计算角度
+      ctx.beginPath();
+      ctx.arc(this.width / 2, this.height / 2, radius, startAngle, startAngle + progressAngle);
+      ctx.lineWidth = lineWidth;
+
+      if (this.fillColorStops) {
+        // 创建线性渐变（起点x,y 到 终点x,y）
+        const gradient = ctx.createLinearGradient(0, 0, this.width, 0);
+
+        for (const stop in this.fillColorStops) {
+          // 添加渐变色
+          gradient.addColorStop(this.percentToDecimal(stop), this.fillColorStops[stop]);
+        }
+
+        ctx.strokeStyle = gradient; // 自定义颜色
+      } else {
+        ctx.strokeStyle = color; // 自定义颜色
+      }
+
+      ctx.lineCap = ops.lineCap; // 设置圆角效果
+      ctx.stroke();
+    };
+
+    drawProgressBar(progress, this.fillColor); // 25%的蓝色进度条
+  },
+
+  renderHalf(
+    progress,
+    ops = {
+      lineCap: 'round',
+    }
+  ) {
+    const canvas = this.canvas;
+    const ctx = canvas.getContext('2d');
+
+    const lineWidth = this.lineWidth; // 进度条宽度
+    const radius = ((this.width - lineWidth) * 0.9) / 2; // 圆形半径
+    const startAngle = 1 * Math.PI; // 起始角度（3点钟方向）
+    const endAngle = 2 * Math.PI; // 结束角度（360度）
+
+    // 绘制环形进度条的函数
+    const drawProgressBar = (progress, color) => {
+      ctx.clearRect(0, 0, this.width, this.height); // 清除画布
+
+      // 绘制灰色背景
+      ctx.beginPath();
+      ctx.arc(this.width / 2, this.height / 2, radius, startAngle, endAngle);
+      // 填充颜色
+      ctx.fillStyle = this.maskColor; // 你想填充的颜色
+      ctx.fill(); // 填充路径
+      ctx.lineWidth = lineWidth;
+      ctx.strokeStyle = this.trackColor; // 灰色背景
+      ctx.lineCap = ops.lineCap; // 设置圆角效果
+      ctx.stroke();
+
+      // 绘制进度条
+      const progressAngle = progress * (Math.PI * 2); // 根据进度计算角度
+      ctx.beginPath();
+      ctx.arc(this.width / 2, this.height / 2, radius, startAngle, startAngle + progressAngle);
+      ctx.lineWidth = lineWidth;
+
+      if (this.fillColorStops) {
+        // 创建线性渐变（起点x,y 到 终点x,y）
+        const gradient = ctx.createLinearGradient(0, 0, this.width, 0);
+
+        for (const stop in this.fillColorStops) {
+          // 添加渐变色
+          gradient.addColorStop(this.percentToDecimal(stop), this.fillColorStops[stop]);
+        }
+
+        ctx.strokeStyle = gradient; // 自定义颜色
+      } else {
+        ctx.strokeStyle = color; // 自定义颜色
+      }
+
+      ctx.lineCap = ops.lineCap; // 设置圆角效果
+      ctx.stroke();
+    };
+
+    // 示例：绘制不同的进度条
+    drawProgressBar(progress, this.fillColor); // 25%的蓝色进度条
+  },
+
+  renderHalf2(
+    progress,
+    ops = {
+      lineCap: 'round',
+    }
+  ) {
+    const canvas = this.canvas;
+    const ctx = canvas.getContext('2d');
+
+    const radius = ((this.width - lineWidth) * 0.9) / 2; // 圆形半径
+    const lineWidth = canvas.lineWidth; // 进度条宽度
+
+    const startAngle = 0.8 * Math.PI; // 起始角度（3点钟方向）
+    const endAngle = 2.2 * Math.PI; // 结束角度（360度）
+
+    // 绘制环形进度条的函数
+    const drawProgressBar = (progress, color) => {
+      ctx.clearRect(0, 0, this.width, this.height); // 清除画布
+
+      // 绘制灰色背景
+      ctx.beginPath();
+      ctx.arc(this.width / 2, this.height / 2, radius, startAngle, endAngle);
+      // 填充颜色
+      ctx.fillStyle = this.maskColor; // 你想填充的颜色
+      ctx.fill(); // 填充路径
+      ctx.lineWidth = lineWidth;
+      ctx.strokeStyle = this.trackColor; // 灰色背景
+      ctx.lineCap = ops.lineCap; // 设置圆角效果
+      ctx.stroke();
+
+      // 绘制进度条
+      const progressAngle = progress * (Math.PI * 2); // 根据进度计算角度
+      ctx.beginPath();
+      ctx.arc(this.width / 2, this.height / 2, radius, startAngle, startAngle + progressAngle);
+      ctx.lineWidth = lineWidth;
+
+      if (this.fillColorStops) {
+        // 创建线性渐变（起点x,y 到 终点x,y）
+        const gradient = ctx.createLinearGradient(0, 0, this.width, 0);
+
+        for (const stop in this.fillColorStops) {
+          // 添加渐变色
+          gradient.addColorStop(this.percentToDecimal(stop), this.fillColorStops[stop]);
+        }
+
+        ctx.strokeStyle = gradient; // 自定义颜色
+      } else {
+        ctx.strokeStyle = color; // 自定义颜色
+      }
+
+      ctx.lineCap = ops.lineCap; // 设置圆角效果
+      ctx.stroke();
+    };
+
+    // 示例：绘制不同的进度条
+    drawProgressBar(progress, this.fillColor); // 25%的蓝色进度条
+  },
+  render(val) {
+    if (this.mode === 'basic') {
+      this.renderAll(val / 100, this.round ? { lineCap: 'round' } : { lineCap: '' });
+    }
+    if (this.mode === 'angle') {
+      this.renderHalf(val / 200, this.round ? { lineCap: 'round' } : { lineCap: '' });
+    }
+    if (this.mode === 'angle2') {
+      this.renderHalf2(val / 150, this.round ? { lineCap: 'round' } : { lineCap: '' });
+    }
+  },
+});

package/dist/circle/index.wxml

@@ -1,9 +1,8 @@
-<canvas 
-  class="smart-progress-circle" 
+<view class="smart-progress-circle" style="width:{{width}}px;height:{{height}}px">
+  <canvas 
   type="2d" 
   wx:if="{{canvasId}}" 
-  width="{{ canvasWidth * dpr }}"
-  height="{{ canvasHeight * dpr }}"
   canvas-id="{{canvasId}}" 
-  style="width: {{width}}px; height:{{height}}px; {{customStyle}}"
-></canvas>
+  style="{{customStyle}}"
+  ></canvas>
+</view>

package/dist/circle/index.wxss

@@ -1 +1 @@
-@import '../common/index.wxss';
+@import '../common/index.wxss';.smart-progress-circle{overflow:hidden}

package/dist/nav-bar/index.css

@@ -1 +1 @@
-@import '../common/index.css';.smart-nav-bar{background-color:var(--nav-bar-background-color,var(--app-B2,#fff));box-sizing:initial;height:var(--nav-bar-height,46px);line-height:var(--nav-bar-height,46px);position:relative;text-align:center;-webkit-user-select:none;user-select:none}.smart-nav-bar__content{align-items:center;display:flex;height:100%;position:relative}.smart-nav-bar__text{color:var(--nav-bar-text-color,var(--app-B2-N1,#000));display:inline-block;font-size:var(--nav-bar-text-font-size,16px);margin:0 calc(var(--padding-md, 16px)*-1);padding:0 var(--padding-md,16px);vertical-align:middle}.smart-nav-bar__text--hover{opacity:.3}.smart-nav-bar__text--home{color:var(--nav-bar-home-text-color,var(--app-B2-N1,#000));font-size:var(--nav-bar-home-font-size,22px);font-weight:var(--nav-bar-home-font-weight,600)}.smart-nav-bar__text--title{color:var(--nav-bar-title-text-color,var(--app-B2-N1,#000));font-size:var(--nav-bar-title-font-size,16px);font-weight:var(--nav-bar-title-font-weight,600)}.smart-nav-bar__arrow{vertical-align:middle}.smart-nav-bar__arrow>view{background:var(--nav-bar-arrow-color,var(--app-B2-N1,#000))}.smart-nav-bar__icon-wrap{align-items:center;display:flex;height:var(--nav-bar-icon-size,32px);justify-content:center;margin:var(--nav-bar-icon-margin,0);width:var(--nav-bar-icon-size,32px)}.smart-nav-bar__icon>view{background:var(--nav-bar-icon-color,var(--app-B2-N1,#000))}.smart-nav-bar--safe{padding-top:var(--app-device-status-height,20px)}.smart-nav-bar--fixed{left:0;position:fixed;top:0;width:100%}.smart-nav-bar--round{border-radius:var(--nav-bar-round-border-radius,16px 16px 0 0);min-height:var(--nav-bar-round-min-height,56px)}.smart-nav-bar__title{color:var(--nav-bar-title-text-color,var(--app-B2-N1,#000));font-size:var(--nav-bar-title-font-size,16px);font-weight:var(--nav-bar-title-font-weight,600);margin:0 auto;max-width:60%}.smart-nav-bar__left,.smart-nav-bar__right{align-items:center;bottom:0;display:flex;position:absolute;top:0}.smart-nav-bar__left{left:var(--padding-md,16px)}.smart-nav-bar__right{right:var(--padding-md,16px)}
+@import '../common/index.css';.smart-nav-bar{background-color:var(--nav-bar-background-color,var(--app-B2,#fff));box-sizing:initial;height:var(--nav-bar-height,var(--app-device-navbar-height,46px));line-height:var(--nav-bar-height,var(--app-device-navbar-height,46px));position:relative;text-align:center;-webkit-user-select:none;user-select:none}.smart-nav-bar__content{align-items:center;display:flex;height:100%;position:relative}.smart-nav-bar__text{color:var(--nav-bar-text-color,var(--app-B2-N1,#000));display:inline-block;font-size:var(--nav-bar-text-font-size,16px);margin:0 calc(var(--padding-md, 16px)*-1);padding:0 var(--padding-md,16px);vertical-align:middle}.smart-nav-bar__text--hover{opacity:.3}.smart-nav-bar__text--home{color:var(--nav-bar-home-text-color,var(--app-B2-N1,#000));font-size:var(--nav-bar-home-font-size,22px);font-weight:var(--nav-bar-home-font-weight,600)}.smart-nav-bar__text--title{color:var(--nav-bar-title-text-color,var(--app-B2-N1,#000));font-size:var(--nav-bar-title-font-size,16px);font-weight:var(--nav-bar-title-font-weight,600)}.smart-nav-bar__arrow{vertical-align:middle}.smart-nav-bar__arrow>view{background:var(--nav-bar-arrow-color,var(--app-B2-N1,#000))}.smart-nav-bar__icon-wrap{align-items:center;display:flex;height:var(--nav-bar-icon-size,32px);justify-content:center;margin:var(--nav-bar-icon-margin,0);width:var(--nav-bar-icon-size,32px)}.smart-nav-bar__icon>view{background:var(--nav-bar-icon-color,var(--app-B2-N1,#000))}.smart-nav-bar--safe{padding-top:var(--app-device-status-height,20px)}.smart-nav-bar--fixed{left:0;position:fixed;top:0;width:100%}.smart-nav-bar--round{border-radius:var(--nav-bar-round-border-radius,16px 16px 0 0);min-height:var(--nav-bar-round-min-height,56px)}.smart-nav-bar__title{color:var(--nav-bar-title-text-color,var(--app-B2-N1,#000));font-size:var(--nav-bar-title-font-size,16px);font-weight:var(--nav-bar-title-font-weight,600);margin:0 auto;max-width:60%}.smart-nav-bar__left,.smart-nav-bar__right{align-items:center;bottom:0;display:flex;position:absolute;top:0}.smart-nav-bar__left{left:var(--padding-md,16px)}.smart-nav-bar__right{right:var(--padding-md,16px)}

package/dist/nav-bar/index.wxss

@@ -1 +1 @@
-@import '../common/index.wxss';.smart-nav-bar{background-color:var(--nav-bar-background-color,var(--app-B2,#fff));box-sizing:initial;height:var(--nav-bar-height,46px);line-height:var(--nav-bar-height,46px);position:relative;text-align:center;-webkit-user-select:none;user-select:none}.smart-nav-bar__content{align-items:center;display:flex;height:100%;position:relative}.smart-nav-bar__text{color:var(--nav-bar-text-color,var(--app-B2-N1,#000));display:inline-block;font-size:var(--nav-bar-text-font-size,16px);margin:0 calc(var(--padding-md, 16px)*-1);padding:0 var(--padding-md,16px);vertical-align:middle}.smart-nav-bar__text--hover{opacity:.3}.smart-nav-bar__text--home{color:var(--nav-bar-home-text-color,var(--app-B2-N1,#000));font-size:var(--nav-bar-home-font-size,22px);font-weight:var(--nav-bar-home-font-weight,600)}.smart-nav-bar__text--title{color:var(--nav-bar-title-text-color,var(--app-B2-N1,#000));font-size:var(--nav-bar-title-font-size,16px);font-weight:var(--nav-bar-title-font-weight,600)}.smart-nav-bar__arrow{vertical-align:middle}.smart-nav-bar__arrow>view{background:var(--nav-bar-arrow-color,var(--app-B2-N1,#000))}.smart-nav-bar__icon-wrap{align-items:center;display:flex;height:var(--nav-bar-icon-size,32px);justify-content:center;margin:var(--nav-bar-icon-margin,0);width:var(--nav-bar-icon-size,32px)}.smart-nav-bar__icon>view{background:var(--nav-bar-icon-color,var(--app-B2-N1,#000))}.smart-nav-bar--safe{padding-top:var(--app-device-status-height,20px)}.smart-nav-bar--fixed{left:0;position:fixed;top:0;width:100%}.smart-nav-bar--round{border-radius:var(--nav-bar-round-border-radius,16px 16px 0 0);min-height:var(--nav-bar-round-min-height,56px)}.smart-nav-bar__title{color:var(--nav-bar-title-text-color,var(--app-B2-N1,#000));font-size:var(--nav-bar-title-font-size,16px);font-weight:var(--nav-bar-title-font-weight,600);margin:0 auto;max-width:60%}.smart-nav-bar__left,.smart-nav-bar__right{align-items:center;bottom:0;display:flex;position:absolute;top:0}.smart-nav-bar__left{left:var(--padding-md,16px)}.smart-nav-bar__right{right:var(--padding-md,16px)}
+@import '../common/index.wxss';.smart-nav-bar{background-color:var(--nav-bar-background-color,var(--app-B2,#fff));box-sizing:initial;height:var(--nav-bar-height,var(--app-device-navbar-height,46px));line-height:var(--nav-bar-height,var(--app-device-navbar-height,46px));position:relative;text-align:center;-webkit-user-select:none;user-select:none}.smart-nav-bar__content{align-items:center;display:flex;height:100%;position:relative}.smart-nav-bar__text{color:var(--nav-bar-text-color,var(--app-B2-N1,#000));display:inline-block;font-size:var(--nav-bar-text-font-size,16px);margin:0 calc(var(--padding-md, 16px)*-1);padding:0 var(--padding-md,16px);vertical-align:middle}.smart-nav-bar__text--hover{opacity:.3}.smart-nav-bar__text--home{color:var(--nav-bar-home-text-color,var(--app-B2-N1,#000));font-size:var(--nav-bar-home-font-size,22px);font-weight:var(--nav-bar-home-font-weight,600)}.smart-nav-bar__text--title{color:var(--nav-bar-title-text-color,var(--app-B2-N1,#000));font-size:var(--nav-bar-title-font-size,16px);font-weight:var(--nav-bar-title-font-weight,600)}.smart-nav-bar__arrow{vertical-align:middle}.smart-nav-bar__arrow>view{background:var(--nav-bar-arrow-color,var(--app-B2-N1,#000))}.smart-nav-bar__icon-wrap{align-items:center;display:flex;height:var(--nav-bar-icon-size,32px);justify-content:center;margin:var(--nav-bar-icon-margin,0);width:var(--nav-bar-icon-size,32px)}.smart-nav-bar__icon>view{background:var(--nav-bar-icon-color,var(--app-B2-N1,#000))}.smart-nav-bar--safe{padding-top:var(--app-device-status-height,20px)}.smart-nav-bar--fixed{left:0;position:fixed;top:0;width:100%}.smart-nav-bar--round{border-radius:var(--nav-bar-round-border-radius,16px 16px 0 0);min-height:var(--nav-bar-round-min-height,56px)}.smart-nav-bar__title{color:var(--nav-bar-title-text-color,var(--app-B2-N1,#000));font-size:var(--nav-bar-title-font-size,16px);font-weight:var(--nav-bar-title-font-weight,600);margin:0 auto;max-width:60%}.smart-nav-bar__left,.smart-nav-bar__right{align-items:center;bottom:0;display:flex;position:absolute;top:0}.smart-nav-bar__left{left:var(--padding-md,16px)}.smart-nav-bar__right{right:var(--padding-md,16px)}

package/dist/picker/index.wxml

@@ -24,7 +24,7 @@
       active-style="{{ activeStyle }}"
       font-style="{{computed.style(item.fontStyle)}}"
       options="{{ item.values }}"
-      disabled="{{ item.disabled }}"
+      disabled="{{ item.disabled || false }}"
       unit="{{ item.unit || unit }}"
       changeAnimation="{{ changeAnimation }}"
       default-index="{{ item.defaultIndex || defaultIndex }}"

package/lib/calendar/calendar.wxml

@@ -76,4 +76,5 @@
       readonly="{{readonly}}"
      />
   </block>
+  <smart-toast wx:if="{{toastId}}" id="{{toastId}}" />
 </view>

package/lib/calendar/index.js

@@ -157,6 +157,10 @@ var getTime = function (date) { return (date instanceof Date ? date.getTime() :
         dayClassMap: {
             type: null,
         },
+        toastId: {
+            type: String,
+            value: 'smart-toast-calendar',
+        },
     },
     data: {
         subtitle: '',
@@ -408,8 +412,8 @@ var getTime = function (date) { return (date instanceof Date ? date.getTime() :
             if (complete && this.data.type === 'range') {
                 var valid = this.checkRange(date);
                 if (!valid) {
-                    // auto selected to max range if showConfirm
-                    if (this.data.showConfirm) {
+                    // auto selected to max range if type is range
+                    if (this.data.type === 'range' && this.data.maxRange) {
                         this.emit([date[0], (0, utils_1.getDayByOffset)(date[0], this.data.maxRange - 1)]);
                     }
                     else {
@@ -434,7 +438,7 @@ var getTime = function (date) { return (date instanceof Date ? date.getTime() :
             if (maxRange && (0, utils_1.calcDateNum)(date) > maxRange) {
                 if (showRangePrompt) {
                     (0, toast_1.default)({
-                        selector: '#smart-toast-calendar',
+                        selector: '#' + this.data.toastId,
                         context: this,
                         message: rangePrompt || "\u9009\u62E9\u5929\u6570\u4E0D\u80FD\u8D85\u8FC7 ".concat(maxRange, " \u5929"),
                     });

package/lib/calendar/index.json

@@ -6,6 +6,7 @@
     "month-list": "../calendar-month-list/index",
     "year-list": "../calendar-year-list/index",
     "smart-button": "../button/index",
-    "smart-popup": "../popup/index"
+    "smart-popup": "../popup/index",
+    "smart-toast": "../toast/index"
   }
 }

package/lib/circle/index.css

@@ -1 +1 @@
-@import '../common/index.css';
+@import '../common/index.css';.smart-progress-circle{overflow:hidden}

package/lib/circle/index.js

@@ -1,4 +1,7 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 /* eslint-disable guard-for-in */
 /* eslint-disable no-restricted-syntax */
@@ -7,10 +10,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 /* eslint-disable prettier/prettier */
 var component_1 = require("../common/component");
 // @ts-ignore
-function percentToDecimal(percent) {
-    percent = percent.replace('%', '');
-    return percent / 100;
-}
+var index_rjs_1 = __importDefault(require("./index.rjs"));
 var idListRef = {
     value: [],
 };
@@ -45,8 +45,8 @@ var idListRef = {
             type: Number,
             value: 0,
             observer: function (val) {
-                if (this.data.canvasId) {
-                    this.render(val, this.data.canvasId);
+                if (this.render && this.data.dpr) {
+                    this.render.init(this.data);
                 }
             },
         },
@@ -62,14 +62,21 @@ var idListRef = {
     },
     data: {
         canvasId: '',
-        dpr: 1,
+        dpr: 0,
+    },
+    watch: {
+        dpr: function () {
+            if (this.render) {
+                this.render.init(this.data);
+            }
+        },
     },
     created: function () {
         this.initId();
-        this.initRate();
+        this.render = new index_rjs_1.default(this);
     },
     mounted: function () {
-        this.render(this.data.percent, this.data.canvasId);
+        this.initRate();
     },
     destroyed: function () {
         var _this = this;
@@ -89,123 +96,6 @@ var idListRef = {
             });
             idListRef.value.push(id);
         },
-        initRate: function () {
-            var _this = this;
-            wx.getSystemInfo({
-                success: function (res) {
-                    var dpr = res.pixelRatio; // 获取设备像素比
-                    _this.setData({
-                        dpr: dpr,
-                    });
-                },
-            });
-            var sizeVal = this.parseSize();
-            var params = {
-                canvasWidth: +sizeVal,
-                canvasHeight: +sizeVal,
-                width: +sizeVal,
-                height: +sizeVal,
-                lineWidth: this.data.trackWidth,
-                trackColor: this.data.trackColor,
-                fillColor: this.data.fillColor,
-                fillColorStops: this.data.fillColorStops,
-                maskColor: this.data.maskColor,
-                dpr: this.data.dpr,
-            };
-            this.setData(params);
-        },
-        renderAll: function (canvas, ctx, progress, ops) {
-            if (ops === void 0) { ops = {
-                lineCap: 'round',
-            }; }
-            var radius = ((canvas.width - canvas.lineWidth) * 0.9) / 2; // 圆形半径
-            var lineWidth = canvas.lineWidth; // 进度条宽度
-            var startAngle = Math.PI; // 起始角度（3点钟方向）
-            var endAngle = 4 * Math.PI; // 结束角度（360度）
-            // 绘制环形进度条的函数
-            function drawProgressBar(progress, color) {
-                ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除画布
-                // 绘制灰色背景
-                ctx.beginPath();
-                ctx.arc(canvas.width / 2, canvas.height / 2, radius, startAngle, endAngle);
-                // 填充颜色
-                ctx.setFillStyle(canvas.maskColor); // 你想填充的颜色
-                ctx.fill(); // 填充路径
-                ctx.setLineWidth(lineWidth);
-                ctx.setStrokeStyle(canvas.trackColor); // 灰色背景
-                ctx.setLineCap(ops.lineCap); // 设置圆角效果
-                ctx.stroke();
-                // 绘制进度条
-                var progressAngle = progress * (Math.PI * 2); // 根据进度计算角度
-                ctx.beginPath();
-                ctx.arc(canvas.width / 2, canvas.height / 2, radius, startAngle, startAngle + progressAngle);
-                ctx.setLineWidth(lineWidth);
-                if (canvas.fillColorStops) {
-                    // 创建线性渐变（起点x,y 到 终点x,y）
-                    var gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
-                    for (var stop_1 in canvas.fillColorStops) {
-                        // 添加渐变色
-                        gradient.addColorStop(percentToDecimal(stop_1), canvas.fillColorStops[stop_1]);
-                    }
-                    ctx.setStrokeStyle(gradient); // 自定义颜色
-                }
-                else {
-                    ctx.setStrokeStyle(color); // 自定义颜色
-                }
-                ctx.setLineCap(ops.lineCap); // 设置圆角效果
-                ctx.stroke();
-                ctx.scale(canvas.dpr, canvas.dpr);
-                ctx.draw();
-            }
-            // 示例：绘制不同的进度条
-            drawProgressBar(progress, canvas.fillColor); // 25%的蓝色进度条
-        },
-        renderHalf: function (canvas, ctx, progress, ops) {
-            if (ops === void 0) { ops = {
-                lineCap: 'round',
-            }; }
-            var radius = ((canvas.width - canvas.lineWidth) * 0.9) / 2; // 圆形半径
-            var lineWidth = canvas.lineWidth; // 进度条宽度
-            var startAngle = 1 * Math.PI; // 起始角度（3点钟方向）
-            var endAngle = 2 * Math.PI; // 结束角度（360度）
-            // 绘制环形进度条的函数
-            function drawProgressBar(progress, color) {
-                ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除画布
-                // 绘制灰色背景
-                ctx.beginPath();
-                ctx.arc(canvas.width / 2, canvas.height / 2, radius, startAngle, endAngle);
-                // 填充颜色
-                ctx.setFillStyle(canvas.maskColor); // 你想填充的颜色
-                ctx.fill(); // 填充路径
-                ctx.setLineWidth(lineWidth);
-                ctx.setStrokeStyle(canvas.trackColor); // 灰色背景
-                ctx.setLineCap(ops.lineCap); // 设置圆角效果
-                ctx.stroke();
-                // 绘制进度条
-                var progressAngle = progress * (Math.PI * 2); // 根据进度计算角度
-                ctx.beginPath();
-                ctx.arc(canvas.width / 2, canvas.height / 2, radius, startAngle, startAngle + progressAngle);
-                ctx.setLineWidth(lineWidth);
-                if (canvas.fillColorStops) {
-                    // 创建线性渐变（起点x,y 到 终点x,y）
-                    var gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
-                    for (var stop_2 in canvas.fillColorStops) {
-                        // 添加渐变色
-                        gradient.addColorStop(percentToDecimal(stop_2), canvas.fillColorStops[stop_2]);
-                    }
-                    ctx.setStrokeStyle(gradient); // 自定义颜色
-                }
-                else {
-                    ctx.setStrokeStyle(color); // 自定义颜色
-                }
-                ctx.setLineCap(ops.lineCap); // 设置圆角效果
-                ctx.stroke();
-                ctx.scale(canvas.dpr, canvas.dpr);
-                ctx.draw();
-            }
-            // 示例：绘制不同的进度条
-            drawProgressBar(progress, canvas.fillColor); // 25%的蓝色进度条
-        },
         parseSize: function () {
             if (typeof this.data.size === 'number')
                 return this.data.size;
@@ -217,64 +107,28 @@ var idListRef = {
             }
             return this.data.size;
         },
-        renderHalf2: function (canvas, ctx, progress, ops) {
-            if (ops === void 0) { ops = {
-                lineCap: 'round',
-            }; }
-            var radius = ((canvas.width - canvas.lineWidth) * 0.9) / 2; // 圆形半径
-            var lineWidth = canvas.lineWidth; // 进度条宽度
-            var startAngle = 0.8 * Math.PI; // 起始角度（3点钟方向）
-            var endAngle = 2.2 * Math.PI; // 结束角度（360度）
-            // 绘制环形进度条的函数
-            function drawProgressBar(progress, color) {
-                ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除画布
-                // 绘制灰色背景
-                ctx.beginPath();
-                ctx.arc(canvas.width / 2, canvas.height / 2, radius, startAngle, endAngle);
-                // 填充颜色
-                ctx.setFillStyle(canvas.maskColor); // 你想填充的颜色
-                ctx.fill(); // 填充路径
-                ctx.setLineWidth(lineWidth);
-                ctx.setStrokeStyle(canvas.trackColor); // 灰色背景
-                ctx.setLineCap(ops.lineCap); // 设置圆角效果
-                ctx.stroke();
-                // 绘制进度条
-                var progressAngle = progress * (Math.PI * 2); // 根据进度计算角度
-                ctx.beginPath();
-                ctx.arc(canvas.width / 2, canvas.height / 2, radius, startAngle, startAngle + progressAngle);
-                ctx.setLineWidth(lineWidth);
-                if (canvas.fillColorStops) {
-                    // 创建线性渐变（起点x,y 到 终点x,y）
-                    var gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
-                    for (var stop_3 in canvas.fillColorStops) {
-                        // 添加渐变色
-                        gradient.addColorStop(percentToDecimal(stop_3), canvas.fillColorStops[stop_3]);
-                    }
-                    ctx.setStrokeStyle(gradient); // 自定义颜色
-                }
-                else {
-                    ctx.setStrokeStyle(color); // 自定义颜色
-                }
-                ctx.setLineCap(ops.lineCap); // 设置圆角效果
-                ctx.stroke();
-                ctx.scale(canvas.dpr, canvas.dpr);
-                ctx.draw();
-            }
-            // 示例：绘制不同的进度条
-            drawProgressBar(progress, canvas.fillColor); // 25%的蓝色进度条
-        },
-        render: function (val, canvasId) {
-            // @ts-ignore
-            var context = ty.createCanvasContext(canvasId);
-            if (this.data.mode === 'basic') {
-                this.renderAll(this.data, context, val / 100, this.data.round ? { lineCap: 'round' } : { lineCap: '' });
-            }
-            if (this.data.mode === 'angle') {
-                this.renderHalf(this.data, context, val / 200, this.data.round ? { lineCap: 'round' } : { lineCap: '' });
-            }
-            if (this.data.mode === 'angle2') {
-                this.renderHalf2(this.data, context, val / 150, this.data.round ? { lineCap: 'round' } : { lineCap: '' });
-            }
+        initRate: function () {
+            var _this = this;
+            wx.getSystemInfo({
+                success: function (res) {
+                    var dpr = res.pixelRatio; // 获取设备像素比
+                    var sizeVal = _this.parseSize();
+                    var params = {
+                        canvasWidth: +sizeVal,
+                        canvasHeight: +sizeVal,
+                        width: +sizeVal,
+                        height: +sizeVal,
+                        lineWidth: _this.data.trackWidth,
+                        trackColor: _this.data.trackColor,
+                        fillColor: _this.data.fillColor,
+                        fillColorStops: _this.data.fillColorStops,
+                        maskColor: _this.data.maskColor,
+                        dpr: dpr,
+                        canvasId: _this.data.canvasId,
+                    };
+                    _this.setData(params);
+                },
+            });
         },
     },
 });

package/lib/circle/index.rjs

@@ -0,0 +1,230 @@
+export default Render({
+  canvas: null,
+  lineWidth: 10,
+  maskColor: '#ffffff',
+  trackColor: '#d3d3d3',
+  fillColorStops: null,
+  dpr: 1,
+  fillColor: '#007AFF',
+
+  async init(data) {
+    let canvas = this.canvas;
+    if (!canvas) {
+      canvas = await getCanvasById(data.canvasId);
+      this.canvas = canvas;
+    }
+    if (!canvas) {
+      console.error('canvas not found');
+      return;
+    }
+
+    const canvaswidth = data.width * data.dpr;
+    const canvasheight = data.height * data.dpr;
+    canvas.width = canvaswidth;
+    canvas.height = canvasheight;
+    canvas.style.width = `${data.width}px`;
+    canvas.style.height = `${data.height}px`;
+
+    const ctx = canvas.getContext('2d');
+
+    this.width = data.width;
+    this.height = data.height;
+
+    this.dpr = data.dpr;
+    this.lineWidth = data.trackWidth;
+    this.maskColor = data.maskColor;
+    this.trackColor = data.trackColor;
+    this.fillColorStops = data.fillColorStops;
+    this.dpr = data.dpr;
+    this.fillColor = data.fillColor;
+    this.mode = data.mode;
+    this.gradientColor = data.gradientColor;
+
+    ctx.scale(this.dpr, this.dpr);
+    this.render(data.percent);
+  },
+  percentToDecimal(percent) {
+    percent = percent.replace('%', '');
+    return percent / 100;
+  },
+  renderAll(
+    progress,
+    ops = {
+      lineCap: 'round',
+    }
+  ) {
+    const canvas = this.canvas;
+    const ctx = canvas.getContext('2d');
+
+    const lineWidth = this.lineWidth; // 进度条宽度
+    const radius = ((this.width - lineWidth) * 0.9) / 2; // 圆形半径
+    const startAngle = Math.PI; // 起始角度（3点钟方向）
+    const endAngle = 4 * Math.PI; // 结束角度（360度）
+
+    // 绘制环形进度条的函数
+    const drawProgressBar = (progress, color) => {
+      ctx.clearRect(0, 0, this.width, this.height); // 清除画布
+      // 绘制灰色背景
+      ctx.beginPath();
+      ctx.arc(this.width / 2, this.height / 2, radius, startAngle, endAngle);
+      ctx.lineWidth = lineWidth;
+      // 填充颜色
+      ctx.fillStyle = this.maskColor; // 你想填充的颜色
+      ctx.fill(); // 填充路径
+      ctx.strokeStyle = this.trackColor; // 灰色背景
+      ctx.lineCap = ops.lineCap; // 设置圆角效果
+      ctx.stroke();
+
+      // 绘制进度条
+      const progressAngle = progress * (Math.PI * 2); // 根据进度计算角度
+      ctx.beginPath();
+      ctx.arc(this.width / 2, this.height / 2, radius, startAngle, startAngle + progressAngle);
+      ctx.lineWidth = lineWidth;
+
+      if (this.fillColorStops) {
+        // 创建线性渐变（起点x,y 到 终点x,y）
+        const gradient = ctx.createLinearGradient(0, 0, this.width, 0);
+
+        for (const stop in this.fillColorStops) {
+          // 添加渐变色
+          gradient.addColorStop(this.percentToDecimal(stop), this.fillColorStops[stop]);
+        }
+
+        ctx.strokeStyle = gradient; // 自定义颜色
+      } else {
+        ctx.strokeStyle = color; // 自定义颜色
+      }
+
+      ctx.lineCap = ops.lineCap; // 设置圆角效果
+      ctx.stroke();
+    };
+
+    drawProgressBar(progress, this.fillColor); // 25%的蓝色进度条
+  },
+
+  renderHalf(
+    progress,
+    ops = {
+      lineCap: 'round',
+    }
+  ) {
+    const canvas = this.canvas;
+    const ctx = canvas.getContext('2d');
+
+    const lineWidth = this.lineWidth; // 进度条宽度
+    const radius = ((this.width - lineWidth) * 0.9) / 2; // 圆形半径
+    const startAngle = 1 * Math.PI; // 起始角度（3点钟方向）
+    const endAngle = 2 * Math.PI; // 结束角度（360度）
+
+    // 绘制环形进度条的函数
+    const drawProgressBar = (progress, color) => {
+      ctx.clearRect(0, 0, this.width, this.height); // 清除画布
+
+      // 绘制灰色背景
+      ctx.beginPath();
+      ctx.arc(this.width / 2, this.height / 2, radius, startAngle, endAngle);
+      // 填充颜色
+      ctx.fillStyle = this.maskColor; // 你想填充的颜色
+      ctx.fill(); // 填充路径
+      ctx.lineWidth = lineWidth;
+      ctx.strokeStyle = this.trackColor; // 灰色背景
+      ctx.lineCap = ops.lineCap; // 设置圆角效果
+      ctx.stroke();
+
+      // 绘制进度条
+      const progressAngle = progress * (Math.PI * 2); // 根据进度计算角度
+      ctx.beginPath();
+      ctx.arc(this.width / 2, this.height / 2, radius, startAngle, startAngle + progressAngle);
+      ctx.lineWidth = lineWidth;
+
+      if (this.fillColorStops) {
+        // 创建线性渐变（起点x,y 到 终点x,y）
+        const gradient = ctx.createLinearGradient(0, 0, this.width, 0);
+
+        for (const stop in this.fillColorStops) {
+          // 添加渐变色
+          gradient.addColorStop(this.percentToDecimal(stop), this.fillColorStops[stop]);
+        }
+
+        ctx.strokeStyle = gradient; // 自定义颜色
+      } else {
+        ctx.strokeStyle = color; // 自定义颜色
+      }
+
+      ctx.lineCap = ops.lineCap; // 设置圆角效果
+      ctx.stroke();
+    };
+
+    // 示例：绘制不同的进度条
+    drawProgressBar(progress, this.fillColor); // 25%的蓝色进度条
+  },
+
+  renderHalf2(
+    progress,
+    ops = {
+      lineCap: 'round',
+    }
+  ) {
+    const canvas = this.canvas;
+    const ctx = canvas.getContext('2d');
+
+    const radius = ((this.width - lineWidth) * 0.9) / 2; // 圆形半径
+    const lineWidth = canvas.lineWidth; // 进度条宽度
+
+    const startAngle = 0.8 * Math.PI; // 起始角度（3点钟方向）
+    const endAngle = 2.2 * Math.PI; // 结束角度（360度）
+
+    // 绘制环形进度条的函数
+    const drawProgressBar = (progress, color) => {
+      ctx.clearRect(0, 0, this.width, this.height); // 清除画布
+
+      // 绘制灰色背景
+      ctx.beginPath();
+      ctx.arc(this.width / 2, this.height / 2, radius, startAngle, endAngle);
+      // 填充颜色
+      ctx.fillStyle = this.maskColor; // 你想填充的颜色
+      ctx.fill(); // 填充路径
+      ctx.lineWidth = lineWidth;
+      ctx.strokeStyle = this.trackColor; // 灰色背景
+      ctx.lineCap = ops.lineCap; // 设置圆角效果
+      ctx.stroke();
+
+      // 绘制进度条
+      const progressAngle = progress * (Math.PI * 2); // 根据进度计算角度
+      ctx.beginPath();
+      ctx.arc(this.width / 2, this.height / 2, radius, startAngle, startAngle + progressAngle);
+      ctx.lineWidth = lineWidth;
+
+      if (this.fillColorStops) {
+        // 创建线性渐变（起点x,y 到 终点x,y）
+        const gradient = ctx.createLinearGradient(0, 0, this.width, 0);
+
+        for (const stop in this.fillColorStops) {
+          // 添加渐变色
+          gradient.addColorStop(this.percentToDecimal(stop), this.fillColorStops[stop]);
+        }
+
+        ctx.strokeStyle = gradient; // 自定义颜色
+      } else {
+        ctx.strokeStyle = color; // 自定义颜色
+      }
+
+      ctx.lineCap = ops.lineCap; // 设置圆角效果
+      ctx.stroke();
+    };
+
+    // 示例：绘制不同的进度条
+    drawProgressBar(progress, this.fillColor); // 25%的蓝色进度条
+  },
+  render(val) {
+    if (this.mode === 'basic') {
+      this.renderAll(val / 100, this.round ? { lineCap: 'round' } : { lineCap: '' });
+    }
+    if (this.mode === 'angle') {
+      this.renderHalf(val / 200, this.round ? { lineCap: 'round' } : { lineCap: '' });
+    }
+    if (this.mode === 'angle2') {
+      this.renderHalf2(val / 150, this.round ? { lineCap: 'round' } : { lineCap: '' });
+    }
+  },
+});

package/lib/circle/index.wxml

@@ -1,9 +1,8 @@
-<canvas 
-  class="smart-progress-circle" 
+<view class="smart-progress-circle" style="width:{{width}}px;height:{{height}}px">
+  <canvas 
   type="2d" 
   wx:if="{{canvasId}}" 
-  width="{{ canvasWidth * dpr }}"
-  height="{{ canvasHeight * dpr }}"
   canvas-id="{{canvasId}}" 
-  style="width: {{width}}px; height:{{height}}px; {{customStyle}}"
-></canvas>
+  style="{{customStyle}}"
+  ></canvas>
+</view>

package/lib/circle/index.wxss

@@ -1 +1 @@
-@import '../common/index.wxss';
+@import '../common/index.wxss';.smart-progress-circle{overflow:hidden}

package/lib/nav-bar/index.css

@@ -1 +1 @@
-@import '../common/index.css';.smart-nav-bar{background-color:var(--nav-bar-background-color,var(--app-B2,#fff));box-sizing:initial;height:var(--nav-bar-height,46px);line-height:var(--nav-bar-height,46px);position:relative;text-align:center;-webkit-user-select:none;user-select:none}.smart-nav-bar__content{align-items:center;display:flex;height:100%;position:relative}.smart-nav-bar__text{color:var(--nav-bar-text-color,var(--app-B2-N1,#000));display:inline-block;font-size:var(--nav-bar-text-font-size,16px);margin:0 calc(var(--padding-md, 16px)*-1);padding:0 var(--padding-md,16px);vertical-align:middle}.smart-nav-bar__text--hover{opacity:.3}.smart-nav-bar__text--home{color:var(--nav-bar-home-text-color,var(--app-B2-N1,#000));font-size:var(--nav-bar-home-font-size,22px);font-weight:var(--nav-bar-home-font-weight,600)}.smart-nav-bar__text--title{color:var(--nav-bar-title-text-color,var(--app-B2-N1,#000));font-size:var(--nav-bar-title-font-size,16px);font-weight:var(--nav-bar-title-font-weight,600)}.smart-nav-bar__arrow{vertical-align:middle}.smart-nav-bar__arrow>view{background:var(--nav-bar-arrow-color,var(--app-B2-N1,#000))}.smart-nav-bar__icon-wrap{align-items:center;display:flex;height:var(--nav-bar-icon-size,32px);justify-content:center;margin:var(--nav-bar-icon-margin,0);width:var(--nav-bar-icon-size,32px)}.smart-nav-bar__icon>view{background:var(--nav-bar-icon-color,var(--app-B2-N1,#000))}.smart-nav-bar--safe{padding-top:var(--app-device-status-height,20px)}.smart-nav-bar--fixed{left:0;position:fixed;top:0;width:100%}.smart-nav-bar--round{border-radius:var(--nav-bar-round-border-radius,16px 16px 0 0);min-height:var(--nav-bar-round-min-height,56px)}.smart-nav-bar__title{color:var(--nav-bar-title-text-color,var(--app-B2-N1,#000));font-size:var(--nav-bar-title-font-size,16px);font-weight:var(--nav-bar-title-font-weight,600);margin:0 auto;max-width:60%}.smart-nav-bar__left,.smart-nav-bar__right{align-items:center;bottom:0;display:flex;position:absolute;top:0}.smart-nav-bar__left{left:var(--padding-md,16px)}.smart-nav-bar__right{right:var(--padding-md,16px)}
+@import '../common/index.css';.smart-nav-bar{background-color:var(--nav-bar-background-color,var(--app-B2,#fff));box-sizing:initial;height:var(--nav-bar-height,var(--app-device-navbar-height,46px));line-height:var(--nav-bar-height,var(--app-device-navbar-height,46px));position:relative;text-align:center;-webkit-user-select:none;user-select:none}.smart-nav-bar__content{align-items:center;display:flex;height:100%;position:relative}.smart-nav-bar__text{color:var(--nav-bar-text-color,var(--app-B2-N1,#000));display:inline-block;font-size:var(--nav-bar-text-font-size,16px);margin:0 calc(var(--padding-md, 16px)*-1);padding:0 var(--padding-md,16px);vertical-align:middle}.smart-nav-bar__text--hover{opacity:.3}.smart-nav-bar__text--home{color:var(--nav-bar-home-text-color,var(--app-B2-N1,#000));font-size:var(--nav-bar-home-font-size,22px);font-weight:var(--nav-bar-home-font-weight,600)}.smart-nav-bar__text--title{color:var(--nav-bar-title-text-color,var(--app-B2-N1,#000));font-size:var(--nav-bar-title-font-size,16px);font-weight:var(--nav-bar-title-font-weight,600)}.smart-nav-bar__arrow{vertical-align:middle}.smart-nav-bar__arrow>view{background:var(--nav-bar-arrow-color,var(--app-B2-N1,#000))}.smart-nav-bar__icon-wrap{align-items:center;display:flex;height:var(--nav-bar-icon-size,32px);justify-content:center;margin:var(--nav-bar-icon-margin,0);width:var(--nav-bar-icon-size,32px)}.smart-nav-bar__icon>view{background:var(--nav-bar-icon-color,var(--app-B2-N1,#000))}.smart-nav-bar--safe{padding-top:var(--app-device-status-height,20px)}.smart-nav-bar--fixed{left:0;position:fixed;top:0;width:100%}.smart-nav-bar--round{border-radius:var(--nav-bar-round-border-radius,16px 16px 0 0);min-height:var(--nav-bar-round-min-height,56px)}.smart-nav-bar__title{color:var(--nav-bar-title-text-color,var(--app-B2-N1,#000));font-size:var(--nav-bar-title-font-size,16px);font-weight:var(--nav-bar-title-font-weight,600);margin:0 auto;max-width:60%}.smart-nav-bar__left,.smart-nav-bar__right{align-items:center;bottom:0;display:flex;position:absolute;top:0}.smart-nav-bar__left{left:var(--padding-md,16px)}.smart-nav-bar__right{right:var(--padding-md,16px)}

package/lib/nav-bar/index.wxss

@@ -1 +1 @@
-@import '../common/index.wxss';.smart-nav-bar{background-color:var(--nav-bar-background-color,var(--app-B2,#fff));box-sizing:initial;height:var(--nav-bar-height,46px);line-height:var(--nav-bar-height,46px);position:relative;text-align:center;-webkit-user-select:none;user-select:none}.smart-nav-bar__content{align-items:center;display:flex;height:100%;position:relative}.smart-nav-bar__text{color:var(--nav-bar-text-color,var(--app-B2-N1,#000));display:inline-block;font-size:var(--nav-bar-text-font-size,16px);margin:0 calc(var(--padding-md, 16px)*-1);padding:0 var(--padding-md,16px);vertical-align:middle}.smart-nav-bar__text--hover{opacity:.3}.smart-nav-bar__text--home{color:var(--nav-bar-home-text-color,var(--app-B2-N1,#000));font-size:var(--nav-bar-home-font-size,22px);font-weight:var(--nav-bar-home-font-weight,600)}.smart-nav-bar__text--title{color:var(--nav-bar-title-text-color,var(--app-B2-N1,#000));font-size:var(--nav-bar-title-font-size,16px);font-weight:var(--nav-bar-title-font-weight,600)}.smart-nav-bar__arrow{vertical-align:middle}.smart-nav-bar__arrow>view{background:var(--nav-bar-arrow-color,var(--app-B2-N1,#000))}.smart-nav-bar__icon-wrap{align-items:center;display:flex;height:var(--nav-bar-icon-size,32px);justify-content:center;margin:var(--nav-bar-icon-margin,0);width:var(--nav-bar-icon-size,32px)}.smart-nav-bar__icon>view{background:var(--nav-bar-icon-color,var(--app-B2-N1,#000))}.smart-nav-bar--safe{padding-top:var(--app-device-status-height,20px)}.smart-nav-bar--fixed{left:0;position:fixed;top:0;width:100%}.smart-nav-bar--round{border-radius:var(--nav-bar-round-border-radius,16px 16px 0 0);min-height:var(--nav-bar-round-min-height,56px)}.smart-nav-bar__title{color:var(--nav-bar-title-text-color,var(--app-B2-N1,#000));font-size:var(--nav-bar-title-font-size,16px);font-weight:var(--nav-bar-title-font-weight,600);margin:0 auto;max-width:60%}.smart-nav-bar__left,.smart-nav-bar__right{align-items:center;bottom:0;display:flex;position:absolute;top:0}.smart-nav-bar__left{left:var(--padding-md,16px)}.smart-nav-bar__right{right:var(--padding-md,16px)}
+@import '../common/index.wxss';.smart-nav-bar{background-color:var(--nav-bar-background-color,var(--app-B2,#fff));box-sizing:initial;height:var(--nav-bar-height,var(--app-device-navbar-height,46px));line-height:var(--nav-bar-height,var(--app-device-navbar-height,46px));position:relative;text-align:center;-webkit-user-select:none;user-select:none}.smart-nav-bar__content{align-items:center;display:flex;height:100%;position:relative}.smart-nav-bar__text{color:var(--nav-bar-text-color,var(--app-B2-N1,#000));display:inline-block;font-size:var(--nav-bar-text-font-size,16px);margin:0 calc(var(--padding-md, 16px)*-1);padding:0 var(--padding-md,16px);vertical-align:middle}.smart-nav-bar__text--hover{opacity:.3}.smart-nav-bar__text--home{color:var(--nav-bar-home-text-color,var(--app-B2-N1,#000));font-size:var(--nav-bar-home-font-size,22px);font-weight:var(--nav-bar-home-font-weight,600)}.smart-nav-bar__text--title{color:var(--nav-bar-title-text-color,var(--app-B2-N1,#000));font-size:var(--nav-bar-title-font-size,16px);font-weight:var(--nav-bar-title-font-weight,600)}.smart-nav-bar__arrow{vertical-align:middle}.smart-nav-bar__arrow>view{background:var(--nav-bar-arrow-color,var(--app-B2-N1,#000))}.smart-nav-bar__icon-wrap{align-items:center;display:flex;height:var(--nav-bar-icon-size,32px);justify-content:center;margin:var(--nav-bar-icon-margin,0);width:var(--nav-bar-icon-size,32px)}.smart-nav-bar__icon>view{background:var(--nav-bar-icon-color,var(--app-B2-N1,#000))}.smart-nav-bar--safe{padding-top:var(--app-device-status-height,20px)}.smart-nav-bar--fixed{left:0;position:fixed;top:0;width:100%}.smart-nav-bar--round{border-radius:var(--nav-bar-round-border-radius,16px 16px 0 0);min-height:var(--nav-bar-round-min-height,56px)}.smart-nav-bar__title{color:var(--nav-bar-title-text-color,var(--app-B2-N1,#000));font-size:var(--nav-bar-title-font-size,16px);font-weight:var(--nav-bar-title-font-weight,600);margin:0 auto;max-width:60%}.smart-nav-bar__left,.smart-nav-bar__right{align-items:center;bottom:0;display:flex;position:absolute;top:0}.smart-nav-bar__left{left:var(--padding-md,16px)}.smart-nav-bar__right{right:var(--padding-md,16px)}

package/lib/picker/index.wxml

@@ -24,7 +24,7 @@
       active-style="{{ activeStyle }}"
       font-style="{{computed.style(item.fontStyle)}}"
       options="{{ item.values }}"
-      disabled="{{ item.disabled }}"
+      disabled="{{ item.disabled || false }}"
       unit="{{ item.unit || unit }}"
       changeAnimation="{{ changeAnimation }}"
       default-index="{{ item.defaultIndex || defaultIndex }}"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tuya-miniapp/smart-ui",
-  "version": "2.3.8",
+  "version": "2.3.9-beta-1",
   "author": "MiniApp Team",
   "license": "MIT",
   "miniprogram": "lib",
@@ -85,7 +85,7 @@
     "iOS >= 9"
   ],
   "dependencies": {
-    "@ray-js/components-ty-slider": "^0.3.2",
+    "@ray-js/components-ty-slider": "^0.3.3",
     "@tuya-miniapp/icons": "^2.1.7"
   },
   "maintainers": [