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

package/packages/config-provider/test/__snapshots__/demo.spec.ts.snap

@@ -0,0 +1,192 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render demo and match snapshot 1`] = `
+<main>
+  <demo-block>
+    <wx-view
+      class="custom-class demo-block smart-clearfix "
+    >
+      <wx-view
+        class="contain"
+      >
+        <wx-view
+          class="buttons"
+        >
+          <smart-button
+            data-color="red"
+            bind:click="onChange"
+          >
+            <wx-button
+              appParameter=""
+              ariaLabel=""
+              businessId="{{0}}"
+              class="custom-class smart-button smart-button--primary smart-button--normal "
+              data-detail="{{null}}"
+              formType=""
+              hoverClass="smart-button--active hover-class"
+              id=""
+              lang=""
+              openType=""
+              sendMessageImg=""
+              sendMessagePath=""
+              sendMessageTitle=""
+              sessionFrom=""
+              showMessageCard="{{false}}"
+              style="color:#fff;background:red;border-color:red"
+              bind:agreeprivacyauthorization="onAgreePrivacyAuthorization"
+              bind:chooseavatar="onChooseAvatar"
+              bind:contact="onContact"
+              bind:error="onError"
+              bind:getphonenumber="onGetPhoneNumber"
+              bind:getrealtimephonenumber="onGetRealTimePhoneNumber"
+              bind:getuserinfo="onGetUserInfo"
+              bind:launchapp="onLaunchApp"
+              bind:opensetting="onOpenSetting"
+              bind:tap="onClick"
+            >
+              <wx-view
+                class="smart-button__text"
+                style=""
+              >
+                
+        
+      
+              </wx-view>
+            </wx-button>
+          </smart-button>
+          <smart-button
+            data-color="green"
+            bind:click="onChange"
+          >
+            <wx-button
+              appParameter=""
+              ariaLabel=""
+              businessId="{{0}}"
+              class="custom-class smart-button smart-button--primary smart-button--normal "
+              data-detail="{{null}}"
+              formType=""
+              hoverClass="smart-button--active hover-class"
+              id=""
+              lang=""
+              openType=""
+              sendMessageImg=""
+              sendMessagePath=""
+              sendMessageTitle=""
+              sessionFrom=""
+              showMessageCard="{{false}}"
+              style="color:#fff;background:green;border-color:green"
+              bind:agreeprivacyauthorization="onAgreePrivacyAuthorization"
+              bind:chooseavatar="onChooseAvatar"
+              bind:contact="onContact"
+              bind:error="onError"
+              bind:getphonenumber="onGetPhoneNumber"
+              bind:getrealtimephonenumber="onGetRealTimePhoneNumber"
+              bind:getuserinfo="onGetUserInfo"
+              bind:launchapp="onLaunchApp"
+              bind:opensetting="onOpenSetting"
+              bind:tap="onClick"
+            >
+              <wx-view
+                class="smart-button__text"
+                style=""
+              >
+                
+        
+      
+              </wx-view>
+            </wx-button>
+          </smart-button>
+          <smart-button
+            data-color="blue"
+            bind:click="onChange"
+          >
+            <wx-button
+              appParameter=""
+              ariaLabel=""
+              businessId="{{0}}"
+              class="custom-class smart-button smart-button--primary smart-button--normal "
+              data-detail="{{null}}"
+              formType=""
+              hoverClass="smart-button--active hover-class"
+              id=""
+              lang=""
+              openType=""
+              sendMessageImg=""
+              sendMessagePath=""
+              sendMessageTitle=""
+              sessionFrom=""
+              showMessageCard="{{false}}"
+              style="color:#fff;background:blue;border-color:blue"
+              bind:agreeprivacyauthorization="onAgreePrivacyAuthorization"
+              bind:chooseavatar="onChooseAvatar"
+              bind:contact="onContact"
+              bind:error="onError"
+              bind:getphonenumber="onGetPhoneNumber"
+              bind:getrealtimephonenumber="onGetRealTimePhoneNumber"
+              bind:getuserinfo="onGetUserInfo"
+              bind:launchapp="onLaunchApp"
+              bind:opensetting="onOpenSetting"
+              bind:tap="onClick"
+            >
+              <wx-view
+                class="smart-button__text"
+                style=""
+              >
+                
+        
+      
+              </wx-view>
+            </wx-button>
+          </smart-button>
+        </wx-view>
+        <smart-config-provider>
+          <wx-view
+            class="smart-config-provider"
+            style="--button-primary-border-color:red;--button-primary-background-color:red"
+          >
+            <smart-button>
+              <wx-button
+                appParameter=""
+                ariaLabel=""
+                businessId="{{0}}"
+                class="custom-class smart-button smart-button--primary smart-button--normal "
+                data-detail="{{null}}"
+                formType=""
+                hoverClass="smart-button--active hover-class"
+                id=""
+                lang=""
+                openType=""
+                sendMessageImg=""
+                sendMessagePath=""
+                sendMessageTitle=""
+                sessionFrom=""
+                showMessageCard="{{false}}"
+                style=""
+                bind:agreeprivacyauthorization="onAgreePrivacyAuthorization"
+                bind:chooseavatar="onChooseAvatar"
+                bind:contact="onContact"
+                bind:error="onError"
+                bind:getphonenumber="onGetPhoneNumber"
+                bind:getrealtimephonenumber="onGetRealTimePhoneNumber"
+                bind:getuserinfo="onGetUserInfo"
+                bind:launchapp="onLaunchApp"
+                bind:opensetting="onOpenSetting"
+                bind:tap="onClick"
+              >
+                <wx-view
+                  class="smart-button__text"
+                  style=""
+                >
+                  
+        
+      
+                </wx-view>
+              </wx-button>
+            </smart-button>
+          </wx-view>
+        </smart-config-provider>
+      </wx-view>
+    </wx-view>
+  </demo-block>
+</main>
+`;

package/packages/config-provider/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/count-down/README.en.md

@@ -0,0 +1,186 @@
+---
+category: Feedback
+---
+
+# CountDown
+
+### Introduction
+
+Used to display countdown values in real time, supporting millisecond precision.
+
+### Import
+
+Introduce the component in `app.json` or `index.json`, detailed explanation can be found in [Quick Start](/material/smartui?comId=help-getting-started&appType=miniapp).
+
+```json
+"usingComponents": {
+  "smart-count-down": "@tuya-miniapp/smart-ui/lib/count-down/index"
+}
+```
+
+## Code Demonstration
+
+### Basic Usage
+
+The `time` attribute represents the total duration of the countdown, in milliseconds.
+
+```html
+<smart-count-down time="{{ time }}" />
+```
+
+```js
+Page({
+  data: {
+    time: 30 * 60 * 60 * 1000,
+  },
+});
+```
+
+### Custom Format
+
+Set the content of the countdown text through the `format` attribute.
+
+```html
+<smart-count-down time="{{ time }}" format="DD day HH hour mm minute ss seconds" />
+```
+
+### Millisecond Rendering
+
+The countdown renders once per second by default, setting the `millisecond` attribute can enable millisecond-level rendering.
+
+```html
+<smart-count-down millisecond time="{{ time }}" format="HH:mm:ss:SSS" />
+```
+
+### Custom Style
+
+After setting the `use-slot` attribute, you can customize the countdown style. You need to get the `timeData` object through the `bind:change` event and render it yourself, format see the table below.
+
+```html
+<smart-count-down use-slot time="{{ time }}" bind:change="onChange">
+  <text class="item">{{ timeData.hours }}</text>
+  <text class="item">{{ timeData.minutes }}</text>
+  <text class="item">{{ timeData.seconds }}</text>
+</smart-count-down>
+```
+
+```js
+Page({
+  data: {
+    time: 30 * 60 * 60 * 1000,
+    timeData: {},
+  },
+
+  onChange(e) {
+    this.setData({
+      timeData: e.detail,
+    });
+  },
+});
+```
+
+```css
+.item {
+  display: inline-block;
+  width: 22px;
+  margin-right: 5px;
+  color: #fff;
+  font-size: 12px;
+  text-align: center;
+  background-color: #1989fa;
+  border-radius: 2px;
+}
+```
+
+### Manual Control
+
+After obtaining the component instance through the `selectComponent` selector, you can call the `start`, `pause`, and `reset` methods.
+
+```html
+<smart-count-down
+  class="control-count-down"
+  millisecond
+  time="{{ 3000 }}"
+  auto-start="{{ false }}"
+  format="ss:SSS"
+  bind:finish="finished"
+/>
+
+<smart-grid clickable column-num="3">
+  <smart-grid-item text="Start" icon="play-circle-o" bindclick="start" />
+  <smart-grid-item text="Pause" icon="pause-circle-o" bindclick="pause" />
+  <smart-grid-item text="Reset" icon="replay" bindclick="reset" />
+</smart-grid>
+```
+
+```js
+Page({
+  start() {
+    const countDown = this.selectComponent('.control-count-down');
+    countDown.start();
+  },
+
+  pause() {
+    const countDown = this.selectComponent('.control-count-down');
+    countDown.pause();
+  },
+
+  reset() {
+    const countDown = this.selectComponent('.control-count-down');
+    countDown.reset();
+  },
+
+  finished() {
+    Toast('Countdown finished');
+  },
+});
+```
+
+## API
+
+### Props
+
+| Parameter   | Description                                  | Type      | Default     |
+| ----------- | -------------------------------------------- | --------- | ----------- |
+| auto-start  | Whether to automatically start the countdown | _boolean_ | `true`      |
+| format      | Time format. DD-Day, HH-Hour, mm-Minute, ss-Second, SSS-Millisecond | _string_   | `HH:mm:ss`  |
+| millisecond | Whether to enable millisecond-level rendering | _boolean_ | `false`     |
+| time        | Duration of the countdown in milliseconds    | _number_  | -           |
+| use-slot    | Whether to use custom style slot             | _boolean_ | `false`     |
+
+### Events
+
+| Event Name  | Description                                 | Callback Params |
+| ----------- | ------------------------------------------- | --------------- |
+| bind:change | Triggered when the time changes. Only triggers after `use-slot` is enabled | timeData        |
+| bind:finish | Triggered when the countdown ends           | -               |
+
+### timeData Format
+
+| Name         | Description  | Type     |
+| ------------ | ------------ | -------- |
+| days         | Remaining days     | _number_ |
+| hours        | Remaining hours    | _number_ |
+| milliseconds | Remaining milliseconds | _number_ |
+| minutes      | Remaining minutes  | _number_ |
+| seconds      | Remaining seconds  | _number_ |
+
+### Methods
+
+You can get the CountDown instance through `selectComponent` and call instance methods.
+
+| Method Name | Parameter | Return Value | Description                                          |
+| ----------- | --------- | ------------ | ---------------------------------------------------- |
+| pause       | -         | -            | Pause the countdown                                  |
+| reset       | -         | -            | Reset the countdown. If `auto-start` is `true`, it will automatically start the countdown after resetting |
+| start       | -         | -            | Start the countdown                                  |
+
+### Style Variables
+
+The component provides the following CSS variables that can be used for custom styles. For usage, refer to the [ConfigProvider Component](/material/smartui?comId=config-provider&appType=miniapp).
+
+| Name                          | Default Value                             | Description |
+| ----------------------------- | ----------------------------------------- | ----------- |
+| --count-down-text-color | _var(--app-B6-N2, rgba(0, 0, 0, 0.7))_ | Text Color |
+| --count-down-font-size | _14px_ | Font Size |
+| --count-down-line-height | _20px_ | Line Height |

package/packages/count-down/README.md

@@ -0,0 +1,186 @@
+---
+category: 反馈
+---
+
+# CountDown 倒计时
+
+### 介绍
+
+用于实时展示倒计时数值，支持毫秒精度。
+
+### 引入
+
+在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](/material/smartui?comId=help-getting-started&appType=miniapp)。
+
+```json
+"usingComponents": {
+  "smart-count-down": "@tuya-miniapp/smart-ui/lib/count-down/index"
+}
+```
+
+## 代码演示
+
+### 基本用法
+
+`time`属性表示倒计时总时长，单位为毫秒。
+
+```html
+<smart-count-down time="{{ time }}" />
+```
+
+```js
+Page({
+  data: {
+    time: 30 * 60 * 60 * 1000,
+  },
+});
+```
+
+### 自定义格式
+
+通过`format`属性设置倒计时文本的内容。
+
+```html
+<smart-count-down time="{{ time }}" format="DD 天 HH 时 mm 分 ss 秒" />
+```
+
+### 毫秒级渲染
+
+倒计时默认每秒渲染一次，设置`millisecond`属性可以开启毫秒级渲染。
+
+```html
+<smart-count-down millisecond time="{{ time }}" format="HH:mm:ss:SSS" />
+```
+
+### 自定义样式
+
+设置`use-slot`属性后可以自定义倒计时样式，需要通过`bind:change`事件获取`timeData`对象并自行渲染，格式见下方表格。
+
+```html
+<smart-count-down use-slot time="{{ time }}" bind:change="onChange">
+  <text class="item">{{ timeData.hours }}</text>
+  <text class="item">{{ timeData.minutes }}</text>
+  <text class="item">{{ timeData.seconds }}</text>
+</smart-count-down>
+```
+
+```js
+Page({
+  data: {
+    time: 30 * 60 * 60 * 1000,
+    timeData: {},
+  },
+
+  onChange(e) {
+    this.setData({
+      timeData: e.detail,
+    });
+  },
+});
+```
+
+```css
+.item {
+  display: inline-block;
+  width: 22px;
+  margin-right: 5px;
+  color: #fff;
+  font-size: 12px;
+  text-align: center;
+  background-color: #1989fa;
+  border-radius: 2px;
+}
+```
+
+### 手动控制
+
+通过 `selectComponent` 选择器获取到组件实例后，可以调用`start`、`pause`、`reset`方法。
+
+```html
+<smart-count-down
+  class="control-count-down"
+  millisecond
+  time="{{ 3000 }}"
+  auto-start="{{ false }}"
+  format="ss:SSS"
+  bind:finish="finished"
+/>
+
+<smart-grid clickable column-num="3">
+  <smart-grid-item text="开始" icon="play-circle-o" bindclick="start" />
+  <smart-grid-item text="暂停" icon="pause-circle-o" bindclick="pause" />
+  <smart-grid-item text="重置" icon="replay" bindclick="reset" />
+</smart-grid>
+```
+
+```js
+Page({
+  start() {
+    const countDown = this.selectComponent('.control-count-down');
+    countDown.start();
+  },
+
+  pause() {
+    const countDown = this.selectComponent('.control-count-down');
+    countDown.pause();
+  },
+
+  reset() {
+    const countDown = this.selectComponent('.control-count-down');
+    countDown.reset();
+  },
+
+  finished() {
+    Toast('倒计时结束');
+  },
+});
+```
+
+## API
+
+### Props
+
+| 参数        | 说明                                           | 类型      | 默认值     |
+| ----------- | ---------------------------------------------- | --------- | ---------- |
+| auto-start  | 是否自动开始倒计时                             | _boolean_ | `true`     |
+| format      | 时间格式，DD-日，HH-时，mm-分，ss-秒，SSS-毫秒 | _string_  | `HH:mm:ss` |
+| millisecond | 是否开启毫秒级渲染                             | _boolean_ | `false`    |
+| time        | 倒计时时长，单位毫秒                           | _number_  | -          |
+| use-slot    | 是否使用自定义样式插槽                         | _boolean_ | `false`    |
+
+### Events
+
+| 事件名      | 说明                                         | 回调参数 |
+| ----------- | -------------------------------------------- | -------- |
+| bind:change | 时间变化时触发，仅在开启`use-slot`后才会触发 | timeData |
+| bind:finish | 倒计时结束时触发                             | -        |
+
+### timeData 格式
+
+| 名称         | 说明     | 类型     |
+| ------------ | -------- | -------- |
+| days         | 剩余天数 | _number_ |
+| hours        | 剩余小时 | _number_ |
+| milliseconds | 剩余毫秒 | _number_ |
+| minutes      | 剩余分钟 | _number_ |
+| seconds      | 剩余秒数 | _number_ |
+
+### 方法
+
+通过 selectComponent 可以获取到 CountDown 实例并调用实例方法。
+
+| 方法名 | 参数 | 返回值 | 介绍                                                       |
+| ------ | ---- | ------ | ---------------------------------------------------------- |
+| pause  | -    | -      | 暂停倒计时                                                 |
+| reset  | -    | -      | 重设倒计时，若`auto-start`为`true`，重设后会自动开始倒计时 |
+| start  | -    | -      | 开始倒计时                                                 |
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](/material/smartui?comId=config-provider&appType=miniapp)。
+
+| 名称                          | 默认值                                 | 描述 |
+| ----------------------------- | -------------------------------------- | ---- |
+| --count-down-text-color | _var(--app-B6-N2, rgba(0, 0, 0, 0.7))_ | 文本颜色 |
+| --count-down-font-size | _14px_ | 字体大小 |
+| --count-down-line-height | _20px_ | 行高 |

package/packages/count-down/demo/index.json

@@ -0,0 +1,10 @@
+{
+  "component": true,
+  "usingComponents": {
+    "smart-grid": "../../grid/index",
+    "smart-toast": "../../toast/index",
+    "smart-grid-item": "../../grid-item/index",
+    "smart-count-down": "../../count-down/index",
+    "demo-block": "../../../example/components/demo-block/index"
+  }
+}

package/packages/count-down/demo/index.less

@@ -0,0 +1,14 @@
+.smart-count-down {
+  margin: 0 16px 10px;
+}
+
+.item {
+  display: inline-block;
+  width: 22px;
+  margin-right: 5px;
+  color: #fff;
+  font-size: 12px;
+  text-align: center;
+  background-color: #1989fa;
+  border-radius: 2px;
+}

package/packages/count-down/demo/index.ts

@@ -0,0 +1,40 @@
+import { SmartComponent } from '../../common/component';
+import Toast from '../../toast/toast';
+
+SmartComponent({
+  data: {
+    time: 30 * 60 * 60 * 1000,
+    timeData: {},
+  },
+
+  methods: {
+    onChange(e) {
+      this.setData({
+        timeData: e.detail,
+      });
+    },
+
+    start() {
+      const countDown = this.selectComponent('.control-count-down');
+      countDown.start();
+    },
+
+    pause() {
+      const countDown = this.selectComponent('.control-count-down');
+      countDown.pause();
+    },
+
+    reset() {
+      const countDown = this.selectComponent('.control-count-down');
+      countDown.reset();
+    },
+
+    finished() {
+      Toast({
+        context: this,
+        selector: '#smart-toast-count-down',
+        message: I18n.t('countdownEnded'),
+      });
+    },
+  },
+});

package/packages/count-down/demo/index.wxml

@@ -0,0 +1,48 @@
+<demo-block title="{{I18n.t('basicUsage')}}">
+  <smart-count-down time="{{ time }}" />
+</demo-block>
+
+<demo-block title="{{I18n.t('customFormat')}}">
+  <smart-count-down
+    time="{{ time }}"
+    format="DD {{I18n.t('day')}} HH {{I18n.t('hour')}} mm {{I18n.t('minute')}} ss {{I18n.t('second')}}"
+  />
+</demo-block>
+
+<demo-block title="{{I18n.t('millisecondRendering')}}">
+  <smart-count-down
+    millisecond
+    time="{{ time }}"
+    format="HH:mm:ss:SSS"
+  />
+</demo-block>
+
+<demo-block title="{{I18n.t('customStyle')}}">
+  <smart-count-down
+    use-slot
+    time="{{ time }}"
+    bind:change="onChange"
+  >
+    <text class="item">{{ timeData.hours }}</text>
+    <text class="item">{{ timeData.minutes }}</text>
+    <text class="item">{{ timeData.seconds }}</text>
+  </smart-count-down>
+</demo-block>
+
+<demo-block title="{{I18n.t('manualControl')}}">
+  <smart-count-down
+    class="control-count-down"
+    millisecond
+    time="{{ 3000 }}"
+    auto-start="{{ false }}"
+    format="ss:SSS"
+    bind:finish="finished"
+  />
+  <smart-grid clickable column-num="3">
+    <smart-grid-item text="{{I18n.t('start')}}" icon="play-circle-o" bindclick="start" />
+    <smart-grid-item text="{{I18n.t('pause')}}" icon="pause-circle-o" bindclick="pause" />
+    <smart-grid-item text="{{I18n.t('reset')}}" icon="replay" bind:click="reset" />
+  </smart-grid>
+</demo-block>
+
+<smart-toast id="smart-toast-count-down" />

package/packages/count-down/index.json

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