@tuya-miniapp/smart-ui 2.3.8-beta-3 → 2.3.8-beta-5

package/dist/cascader/demo/index.js

@@ -0,0 +1,191 @@
+import { SmartComponent } from '../../common/component';
+const zhCNOptions = [
+    {
+        text: I18n.t('zhejiangProvince'),
+        value: '330000',
+        options: [
+            {
+                text: I18n.t('hangzhou'),
+                value: '330100',
+                options: [
+                    {
+                        text: I18n.t('upperCityDistrict'),
+                        value: '330102',
+                    },
+                    {
+                        text: I18n.t('downtownDistrict'),
+                        value: '330103',
+                    },
+                    {
+                        text: I18n.t('jiangganDistrict'),
+                        value: '330104',
+                    },
+                ],
+            },
+            {
+                text: I18n.t('ningboCity'),
+                value: '330200',
+                options: [
+                    {
+                        text: I18n.t('haishuDistrict'),
+                        value: '330203',
+                    },
+                    {
+                        text: I18n.t('jiangbeiDistrict'),
+                        value: '330205',
+                    },
+                    {
+                        text: I18n.t('beilunDistrict'),
+                        value: '330206',
+                    },
+                ],
+            },
+            {
+                text: I18n.t('wenzhou'),
+                value: '330300',
+                options: [
+                    {
+                        text: I18n.t('luchengDistrict'),
+                        value: '330302',
+                    },
+                    {
+                        text: I18n.t('longwanDistrict'),
+                        value: '330303',
+                    },
+                    {
+                        text: I18n.t('ouhaiDistrict'),
+                        value: '330304',
+                    },
+                ],
+            },
+        ],
+    },
+    {
+        text: I18n.t('jiangsuProvince'),
+        value: '320000',
+        options: [
+            {
+                text: I18n.t('nanjing'),
+                value: '320100',
+                options: [
+                    {
+                        text: I18n.t('xuanwuDistrict'),
+                        value: '320102',
+                    },
+                    {
+                        text: I18n.t('qinhuaiDistrict'),
+                        value: '320104',
+                    },
+                    {
+                        text: I18n.t('jianyeDistrict'),
+                        value: '320105',
+                    },
+                ],
+            },
+            {
+                text: I18n.t('wuxi'),
+                value: '320200',
+                options: [
+                    {
+                        text: I18n.t('xishanDistrict'),
+                        value: '320205',
+                    },
+                    {
+                        text: I18n.t('huishanDistrict'),
+                        value: '320206',
+                    },
+                    {
+                        text: I18n.t('binhuDistrict'),
+                        value: '320211',
+                    },
+                ],
+            },
+            {
+                text: I18n.t('xuzhou'),
+                value: '320300',
+                options: [
+                    {
+                        text: I18n.t('gulouDistrict'),
+                        value: '320302',
+                    },
+                    {
+                        text: I18n.t('yunlongDistrict'),
+                        value: '320303',
+                    },
+                    {
+                        text: I18n.t('jiawangDistrict'),
+                        value: '320305',
+                    },
+                ],
+            },
+        ],
+    },
+];
+const asyncOptions1 = [
+    {
+        text: I18n.t('zhejiangProvince'),
+        value: '330000',
+        options: [],
+    },
+];
+const asyncOptions2 = [
+    { text: I18n.t('hangzhou'), value: '330100' },
+    { text: I18n.t('ningboCity'), value: '330200' },
+];
+SmartComponent({
+    data: {
+        area: I18n.t('region'),
+        options: zhCNOptions,
+        selectArea: I18n.t('pleaseSelectARegion'),
+        baseState: {
+            show: false,
+            value: '',
+            result: '',
+        },
+        asyncState: {
+            show: false,
+            value: undefined,
+            result: '',
+            options: asyncOptions1,
+        },
+        customFieldState: {
+            show: false,
+            value: '',
+            result: '',
+        },
+    },
+    methods: {
+        onClick(e) {
+            const { stateKey } = e.currentTarget.dataset;
+            this.setData({
+                [`${stateKey}.show`]: true,
+            });
+        },
+        onClose(e) {
+            const { stateKey } = e.currentTarget.dataset;
+            this.setData({
+                [`${stateKey}.show`]: false,
+            });
+        },
+        onFinish(e) {
+            const { stateKey } = e.currentTarget.dataset;
+            const { selectedOptions, value } = e.detail;
+            const result = selectedOptions.map((option) => option.text).join('/');
+            this.setData({
+                [`${stateKey}.value`]: value,
+                [`${stateKey}.result`]: result,
+            });
+            this.onClose(e);
+        },
+        loadDynamicOptions(e) {
+            const { value } = e.detail;
+            if (value === '330000') {
+                setTimeout(() => {
+                    this.setData({
+                        'asyncState.options[0].options': asyncOptions2,
+                    });
+                }, 500);
+            }
+        },
+    },
+});

package/dist/cell/demo/index.d.ts

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

package/dist/cell/demo/index.js

@@ -0,0 +1,15 @@
+import Sun from '@tuya-miniapp/icons/dist/svg/Sun';
+import Checkmark from '@tuya-miniapp/icons/dist/svg/Checkmark';
+import { SmartComponent } from '../../common/component';
+SmartComponent({
+    data: {
+        sunMaxFill: Sun,
+        checkMark: Checkmark,
+    },
+    methods: {
+        onNavTo() {
+            // @ts-ignore
+            ty.openInnerH5({ url: 'https://www.tuya.com', title: 'Tuya' });
+        },
+    },
+});

package/dist/checkbox/demo/index.d.ts

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

package/dist/checkbox/demo/index.js

@@ -0,0 +1,34 @@
+import { SmartComponent } from '../../common/component';
+SmartComponent({
+    data: {
+        checkbox1: true,
+        checkbox2: true,
+        checkbox3: true,
+        checkboxLabel: true,
+        checkboxSize: true,
+        checkboxShape: true,
+        list: ['a', 'b', 'c'],
+        result: ['a', 'b'],
+        result2: [],
+        result3: [],
+        result4: [],
+        activeIcon: 'https://images.tuyacn.com/content-platform/hestia/1730877912e76cbdb7563.png',
+        inactiveIcon: '',
+    },
+    methods: {
+        onChange(event) {
+            const { key } = event.currentTarget.dataset;
+            this.setData({ [key]: event.detail });
+        },
+        onChange2(event) {
+            const { key } = event.currentTarget.dataset;
+            this.setData({ [key]: !event.detail });
+        },
+        toggle(event) {
+            const { index } = event.currentTarget.dataset;
+            const checkbox = this.selectComponent(`.checkboxes-${index}`);
+            checkbox.toggle();
+        },
+        noop() { },
+    },
+});

package/dist/circle/demo/index.d.ts

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

package/dist/circle/demo/index.js

@@ -0,0 +1,26 @@
+import { SmartComponent } from '../../common/component';
+const format = rate => Math.min(Math.max(rate, 0), 100);
+SmartComponent({
+    data: {
+        value: 25,
+        gradientColor: {
+            '0%': '#2361DE',
+            '50%': '#23DEB5',
+        },
+    },
+    mounted() {
+        setInterval(() => {
+            this.setData({
+                value: Math.min(this.data.value + 1, 100),
+            });
+        }, 1000);
+    },
+    methods: {
+        run(e) {
+            const step = parseFloat(e.currentTarget.dataset.step);
+            this.setData({
+                value: format((this.data.value += step)),
+            });
+        },
+    },
+});

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);
+                },
+            });
         },
     },
 });