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

package/packages/checkbox/test/demo.spec.ts

@@ -0,0 +1,11 @@
+import path from 'path';
+import simulate from 'miniprogram-simulate';
+
+test('should render demo and match snapshot', () => {
+  const id = simulate.load(path.resolve(__dirname, '../demo/index'), {
+    rootPath: path.resolve(__dirname, '../../'),
+  });
+  const comp = simulate.render(id);
+  comp.attach(document.createElement('parent-wrapper'));
+  expect(comp.toJSON()).toMatchSnapshot();
+});

package/packages/checkbox-group/index.json

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

package/packages/checkbox-group/index.less

@@ -0,0 +1,6 @@
+.smart-checkbox-group {
+  &--horizontal {
+    display: flex;
+    flex-wrap: wrap;
+  }
+}

package/packages/checkbox-group/index.ts

@@ -0,0 +1,43 @@
+import { useChildren } from '../common/relation';
+import { SmartComponent } from '../common/component';
+
+type TrivialInstance = WechatMiniprogram.Component.TrivialInstance;
+
+SmartComponent({
+  field: true,
+
+  relation: useChildren('checkbox', function (target) {
+    this.updateChild(target);
+  }),
+
+  props: {
+    max: Number,
+    value: {
+      type: Array,
+      observer: 'updateChildren',
+    },
+    disabled: {
+      type: Boolean,
+      observer: 'updateChildren',
+    },
+    direction: {
+      type: String,
+      value: 'vertical',
+    },
+  },
+
+  methods: {
+    updateChildren() {
+      this.children.forEach(child => this.updateChild(child));
+    },
+
+    updateChild(child: TrivialInstance) {
+      const { value, disabled, direction } = this.data;
+      child.setData({
+        value: value.indexOf(child.dataset.name) !== -1,
+        parentDisabled: disabled,
+        direction,
+      });
+    },
+  },
+});

package/packages/checkbox-group/index.wxml

@@ -0,0 +1,5 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+
+<view class="{{ utils.bem('checkbox-group', [{ horizontal: direction === 'horizontal' }]) }}">
+  <slot />
+</view>

package/packages/circle/README.en.md

@@ -0,0 +1,109 @@
+---
+category: Display
+new: true
+version: v2.3.0
+---
+
+# Circle Circular Progress Bar
+
+### Introduction
+
+A circular progress bar component supporting gradient animation.
+
+> Refactored after v2.3.0
+
+### Import
+
+Introduce the component in `app.json` or `index.json`, for detailed instructions see [Getting Started](/material/smartui?comId=help-getting-started&appType=miniapp).
+
+```json
+"usingComponents": {
+  "smart-circle": "@tuya-miniapp/smart-ui/lib/circle/index"
+}
+```
+
+## Code Examples
+
+### Basic Usage
+
+The `percent` property represents the target progress of the progress bar.
+
+```html
+<smart-circle percent="{{50}}" trackWidth="{{10}}"></smart-circle>
+```
+
+### Notch Circle
+
+The `mode` property represents the type, angle, and angle2 are semicircular types.
+
+```html
+<smart-circle percent="{{50}}" mode="angle">
+</smart-circle>
+<smart-circle percent="{{50}}" mode="angle2">
+</smart-circle>
+```
+
+### Without Round Corners
+
+Set the `round` property to false for right angles.
+
+```html
+<smart-circle percent="{{50}}" mode="angle" round="{{false}}">
+</smart-circle>
+```
+
+### Custom Colors
+
+`fillColor` can set a custom color, and `fillColorStops` sets gradient colors.
+
+```html
+<smart-circle percent="{{50}}" mode="angle" round="{{false}}" fillColor="#DE23CB">
+</smart-circle>
+<smart-circle percent="{{50}}" mode="angle" round="{{false}}" fillColorStops="{{gradientColor}}">
+</smart-circle>
+```
+
+```js
+Page({
+  data: {
+    gradientColor: {
+      '0%': '#2361DE',
+      '50%': '#23DEB5',
+    },
+  }
+})
+```
+
+### Custom Width
+
+```html
+<smart-circle percent="{{60}}" trackWidth="15" mode="angle" round="{{false}}">
+</smart-circle>
+```
+
+## API
+
+### props
+
+| Property Name              | Description | Type          | Default Value              |
+| -------------------------- | ----------- | ------------- | -------------------------- |
+| children                   | Children    | ReactNode     | undefined                  |
+| class-name                 | Class Name  | string        | undefined                  |
+| custom-style `v2.3.3`      | Style       | CSSProperties | undefined                  |
+| fill-color                 | Fill Color  | string        | '#007AFF'                  |
+| mask-color                 | Mask Color  | string        | '#ffffff'                  |
+| mode `v2.3.0`              | Style Mode  | string        | `basic`, `angle`, `angle2` |
+| percent                    | Percentage  | number        | 0                          |
+| round `v2.3.0`             | Mask Color  | string        | `true`                     |
+| size                       | Size        | string        | '100px'                    |
+| style `@deprecated v2.1.7` | Style       | CSSProperties | undefined                  |
+| track-color                | Track Color | string        | '#d3d3d3'                  |
+| track-width                | Track Width | number        | 10                         |
+
+### Style Variables
+
+The component provides the following CSS variables for styling customization, see the [ConfigProvider Component](/material/smartui?comId=config-provider&appType=miniapp) for usage instructions.
+
+| Name                                     | Default Value | Description                  |
+| ---------------------------------------- | ------------- | ---------------------------- |
+| --circle-text-color `@deprecated v2.3.0` | _#323233_     | Text color inside the circle |

package/packages/circle/README.md

@@ -0,0 +1,109 @@
+---
+category: 展示
+new: true
+version: v2.3.0
+---
+
+# Circle 环形进度条
+
+### 介绍
+
+圆环形的进度条组件，支持进度渐变动画。
+
+> v2.3.0 之后重构
+
+### 引入
+
+在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](/material/smartui?comId=help-getting-started&appType=miniapp)。
+
+```json
+"usingComponents": {
+  "smart-circle": "@tuya-miniapp/smart-ui/lib/circle/index"
+}
+```
+
+## 代码演示
+
+### 基础用法
+
+`percent`属性表示进度条的目标进度。
+
+```html
+<smart-circle percent="{{50}}" trackWidth="{{10}}"></smart-circle>
+```
+
+### 缺口圆角
+
+`mode`属性表示类型，angle、angle2 为半圆类型。
+
+```html
+<smart-circle percent="{{50}}" mode="angle">
+</smart-circle>
+<smart-circle percent="{{50}}" mode="angle2">
+</smart-circle>
+```
+
+### 不使用圆角
+
+`round`属性设置为 false 为直角。
+
+```html
+<smart-circle percent="{{50}}" mode="angle" round="{{false}}">
+</smart-circle>
+```
+
+### 自定义颜色
+
+`fillColor` 可设置自定义颜色，`fillColorStops` 设置渐变色，
+
+```html
+<smart-circle percent="{{50}}" mode="angle" round="{{false}}" fillColor="#DE23CB">
+</smart-circle>
+<smart-circle percent="{{50}}" mode="angle" round="{{false}}" fillColorStops="{{gradientColor}}">
+</smart-circle>
+```
+
+```js
+Page({
+  data: {
+    gradientColor: {
+      '0%': '#2361DE',
+      '50%': '#23DEB5',
+    },
+  }
+})
+```
+
+### 自定义宽度
+
+```html
+<smart-circle percent="{{60}}" trackWidth="15" mode="angle" round="{{false}}">
+</smart-circle>
+```
+
+## API
+
+### props
+
+| 属性名                     | 描述     | 类型          | 默认值                     |
+| -------------------------- | -------- | ------------- | -------------------------- |
+| children                   | 子元素   | ReactNode     | undefined                  |
+| class-name                 | 类名     | string        | undefined                  |
+| custom-style `v2.3.3`      | 样式     | CSSProperties | undefined                  |
+| fill-color                 | 填充颜色 | string        | '#007AFF'                  |
+| mask-color                 | 遮罩颜色 | string        | '#ffffff'                  |
+| mode `v2.3.0`              | 样式风格 | string        | `basic`、`angle`、`angle2` |
+| percent                    | 百分比   | number        | 0                          |
+| round `v2.3.0`             | 遮罩颜色 | string        | `true`                     |
+| size                       | 尺寸     | string        | '100px'                    |
+| style `@deprecated v2.1.7` | 样式     | CSSProperties | undefined                  |
+| track-color                | 滑槽颜色 | string        | '#d3d3d3'                  |
+| track-width                | 滑槽宽度 | number        | 10                         |
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](/material/smartui?comId=config-provider&appType=miniapp)。
+
+| 名称                                     | 默认值    | 描述             |
+| ---------------------------------------- | --------- | ---------------- |
+| --circle-text-color `@deprecated v2.3.0` | _#323233_ | 圆环内的文字颜色 |

package/packages/circle/demo/index.json

@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "usingComponents": {
+    "smart-circle": "../../circle/index",
+    "demo-block": "../../../example/components/demo-block/index"
+  }
+}

package/packages/circle/demo/index.less

@@ -0,0 +1,18 @@
+.smart-circle {
+  margin: 5px 10px 20px;
+}
+.smart-button {
+  margin-left: 10px;
+}
+
+.contain {
+  padding: 0 24px;
+}
+
+.flex {
+  display: flex;
+}
+
+.flex > *:first-child {
+  margin-right: 32px;
+}

package/packages/circle/demo/index.ts

@@ -0,0 +1,28 @@
+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/packages/circle/demo/index.wxml

@@ -0,0 +1,30 @@
+<view class="contain">
+  <demo-block title="{{I18n.t('basicUsage')}}">
+    <smart-circle percent="{{value}}" trackWidth="{{10}}" >
+    </smart-circle>
+  </demo-block>
+  <demo-block title="{{I18n.t('circle_angle')}}">
+    <view class="flex">
+      <smart-circle percent="{{50}}" mode="angle">
+      </smart-circle>
+      <smart-circle percent="{{50}}" mode="angle2">
+      </smart-circle>
+    </view>
+  </demo-block>
+  <demo-block title="{{I18n.t('circle_noround')}}">
+    <smart-circle percent="{{50}}" mode="angle" round="{{false}}">
+    </smart-circle>
+  </demo-block>
+  <demo-block title="{{I18n.t('circle_color')}}">
+    <view class="flex">
+      <smart-circle percent="{{50}}" mode="angle" round="{{false}}" fillColor="#DE23CB">
+      </smart-circle>
+      <smart-circle percent="{{50}}" mode="angle" round="{{false}}" fillColorStops="{{gradientColor}}">
+      </smart-circle>
+    </view>
+  </demo-block>
+  <demo-block title="{{I18n.t('circle_width')}}">
+    <smart-circle percent="{{60}}" trackWidth="15" mode="angle" round="{{false}}">
+    </smart-circle>
+  </demo-block>
+</view>

package/packages/circle/index.json

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

package/packages/circle/index.less

@@ -0,0 +1,5 @@
+@import '../common/style/var.less';
+
+.smart-progress-circle {
+  overflow: hidden;
+}

package/packages/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: '' });
+    }
+  },
+});