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

package/dist/count-down/README.md

@@ -0,0 +1,194 @@
+---
+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="{{PlayIcon}}" bindclick="start" />
+  <smart-grid-item text="暂停" icon="{{PauseIcon}}" bindclick="pause" />
+  <smart-grid-item text="重置" icon="{{ReplayIcon}}" bindclick="reset" />
+</smart-grid>
+```
+
+```js
+import PlayIcon from '@tuya-miniapp/icons/dist/svg/Play';
+import PauseIcon from '@tuya-miniapp/icons/dist/svg/Pause';
+import ReplayIcon from '@tuya-miniapp/icons/dist/svg/Refresh';
+Page({
+  data:{
+    PlayIcon,
+    PauseIcon,
+    ReplayIcon,
+  },
+  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](/material/smartui?comId=faq&appType=miniapp) 可以获取到 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/dist/count-down/index.css

@@ -0,0 +1 @@
+@import '../common/index.css';:root{--smart-ui-overlay:rgba(0,0,0,.4);--smart-ui-bottom-sheet-dragger-node-background:rgba(0,0,0,.3);--smart-ui-dialog-background:var(--app-B4,#fff);--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent);--smart-ui-battery-body-base-background:rgba(0,0,0,.25);--smart-ui-battery-text-color:rgba(0,0,0,.6);--smart-ui-battery-slash-border-color:#fff;--smart-ui-toast-background:#5c5c5c;--smart-ui-toast-border:1px solid hsla(0,0%,100%,.05);--smart-ui-toast-box-shadow:0 4px 12px rgba(0,0,0,.1),0 16px 32px rgba(0,0,0,.12);--smart-ui-overlay-blur-background:rgba(40,44,53,.22)}:root[theme=dark]{--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-bottom-sheet-dragger-node-background:hsla(0,0%,100%,.3);--smart-ui-dialog-background:linear-gradient(0deg,var(--app-B4-N6),var(--app-B4-N6)),var(--app-B1);--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0));--smart-ui-battery-body-base-background:hsla(0,0%,100%,.4);--smart-ui-battery-text-color:#fff;--smart-ui-battery-slash-border-color:#000;--smart-ui-toast-background:#3c3c3c;--smart-ui-toast-border:1px solid hsla(0,0%,100%,.05);--smart-ui-toast-box-shadow:0 8px 24px 0 rgba(0,0,0,.15);--smart-ui-overlay-blur-background:rgba(0,0,0,.6)}.smart-manrope{font-family:Manrope,sans-serif}.smart-count-down{color:var(--count-down-text-color,var(--app-B6-N2,rgba(0,0,0,.7)));font-size:var(--count-down-font-size,14px);line-height:var(--count-down-line-height,20px)}

package/dist/count-down/index.d.ts

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

package/dist/count-down/index.js

@@ -0,0 +1,100 @@
+import { SmartComponent } from '../common/component';
+import { isSameSecond, parseFormat, parseTimeData } from './utils';
+function simpleTick(fn) {
+    return setTimeout(fn, 30);
+}
+SmartComponent({
+    props: {
+        useSlot: Boolean,
+        millisecond: Boolean,
+        time: {
+            type: Number,
+            observer: 'reset',
+        },
+        format: {
+            type: String,
+            value: 'HH:mm:ss',
+        },
+        autoStart: {
+            type: Boolean,
+            value: true,
+        },
+    },
+    data: {
+        timeData: parseTimeData(0),
+        formattedTime: '0',
+    },
+    destroyed() {
+        clearTimeout(this.tid);
+        this.tid = null;
+    },
+    methods: {
+        // 开始
+        start() {
+            if (this.counting) {
+                return;
+            }
+            this.counting = true;
+            this.endTime = Date.now() + this.remain;
+            this.tick();
+        },
+        // 暂停
+        pause() {
+            this.counting = false;
+            clearTimeout(this.tid);
+        },
+        // 重置
+        reset() {
+            this.pause();
+            this.remain = this.data.time;
+            this.setRemain(this.remain);
+            if (this.data.autoStart) {
+                this.start();
+            }
+        },
+        tick() {
+            if (this.data.millisecond) {
+                this.microTick();
+            }
+            else {
+                this.macroTick();
+            }
+        },
+        microTick() {
+            this.tid = simpleTick(() => {
+                this.setRemain(this.getRemain());
+                if (this.remain !== 0) {
+                    this.microTick();
+                }
+            });
+        },
+        macroTick() {
+            this.tid = simpleTick(() => {
+                const remain = this.getRemain();
+                if (!isSameSecond(remain, this.remain) || remain === 0) {
+                    this.setRemain(remain);
+                }
+                if (this.remain !== 0) {
+                    this.macroTick();
+                }
+            });
+        },
+        getRemain() {
+            return Math.max(this.endTime - Date.now(), 0);
+        },
+        setRemain(remain) {
+            this.remain = remain;
+            const timeData = parseTimeData(remain);
+            if (this.data.useSlot) {
+                this.$emit('change', timeData);
+            }
+            this.setData({
+                formattedTime: parseFormat(this.data.format, timeData),
+            });
+            if (remain === 0) {
+                this.pause();
+                this.$emit('finish');
+            }
+        },
+    },
+});

package/dist/count-down/index.json

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

package/dist/count-down/index.wxml

@@ -0,0 +1,4 @@
+<view class="smart-manrope smart-count-down">
+  <slot wx:if="{{ useSlot }}"/>
+  <block wx:else>{{ formattedTime }}</block>
+</view>

package/dist/count-down/index.wxss

@@ -0,0 +1 @@
+@import '../common/index.wxss';:root{--smart-ui-overlay:rgba(0,0,0,.4);--smart-ui-bottom-sheet-dragger-node-background:rgba(0,0,0,.3);--smart-ui-dialog-background:var(--app-B4,#fff);--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent);--smart-ui-battery-body-base-background:rgba(0,0,0,.25);--smart-ui-battery-text-color:rgba(0,0,0,.6);--smart-ui-battery-slash-border-color:#fff;--smart-ui-toast-background:#5c5c5c;--smart-ui-toast-border:1px solid hsla(0,0%,100%,.05);--smart-ui-toast-box-shadow:0 4px 12px rgba(0,0,0,.1),0 16px 32px rgba(0,0,0,.12);--smart-ui-overlay-blur-background:rgba(40,44,53,.22)}:root[theme=dark]{--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-bottom-sheet-dragger-node-background:hsla(0,0%,100%,.3);--smart-ui-dialog-background:linear-gradient(0deg,var(--app-B4-N6),var(--app-B4-N6)),var(--app-B1);--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0));--smart-ui-battery-body-base-background:hsla(0,0%,100%,.4);--smart-ui-battery-text-color:#fff;--smart-ui-battery-slash-border-color:#000;--smart-ui-toast-background:#3c3c3c;--smart-ui-toast-border:1px solid hsla(0,0%,100%,.05);--smart-ui-toast-box-shadow:0 8px 24px 0 rgba(0,0,0,.15);--smart-ui-overlay-blur-background:rgba(0,0,0,.6)}.smart-manrope{font-family:Manrope,sans-serif}.smart-count-down{color:var(--count-down-text-color,var(--app-B6-N2,rgba(0,0,0,.7)));font-size:var(--count-down-font-size,14px);line-height:var(--count-down-line-height,20px)}

package/dist/count-down/utils.d.ts

@@ -0,0 +1,10 @@
+export type TimeData = {
+    days: number;
+    hours: number;
+    minutes: number;
+    seconds: number;
+    milliseconds: number;
+};
+export declare function parseTimeData(time: number): TimeData;
+export declare function parseFormat(format: string, timeData: TimeData): string;
+export declare function isSameSecond(time1: number, time2: number): boolean;

package/dist/count-down/utils.js

@@ -0,0 +1,57 @@
+function padZero(num, targetLength = 2) {
+    let str = num + '';
+    while (str.length < targetLength) {
+        str = '0' + str;
+    }
+    return str;
+}
+const SECOND = 1000;
+const MINUTE = 60 * SECOND;
+const HOUR = 60 * MINUTE;
+const DAY = 24 * HOUR;
+export function parseTimeData(time) {
+    const days = Math.floor(time / DAY);
+    const hours = Math.floor((time % DAY) / HOUR);
+    const minutes = Math.floor((time % HOUR) / MINUTE);
+    const seconds = Math.floor((time % MINUTE) / SECOND);
+    const milliseconds = Math.floor(time % SECOND);
+    return {
+        days,
+        hours,
+        minutes,
+        seconds,
+        milliseconds,
+    };
+}
+export function parseFormat(format, timeData) {
+    const { days } = timeData;
+    let { hours, minutes, seconds, milliseconds } = timeData;
+    if (format.indexOf('DD') === -1) {
+        hours += days * 24;
+    }
+    else {
+        format = format.replace('DD', padZero(days));
+    }
+    if (format.indexOf('HH') === -1) {
+        minutes += hours * 60;
+    }
+    else {
+        format = format.replace('HH', padZero(hours));
+    }
+    if (format.indexOf('mm') === -1) {
+        seconds += minutes * 60;
+    }
+    else {
+        format = format.replace('mm', padZero(minutes));
+    }
+    if (format.indexOf('ss') === -1) {
+        milliseconds += seconds * 1000;
+    }
+    else {
+        format = format.replace('ss', padZero(seconds));
+    }
+    return format.replace('SSS', padZero(milliseconds, 3));
+}
+export function isSameSecond(time1, time2) {
+    return Math.floor(time1 / 1000) === Math.floor(time2 / 1000);
+}

package/dist/custom-keyboard/README.md

@@ -0,0 +1,119 @@
+---
+category: 数据录入
+---
+
+# CustomKeyboard 数字键盘
+
+### 介绍
+
+自定义数字键盘
+
+### 引入
+
+在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](/material/smartui?comId=help-getting-started&appType=miniapp)。
+
+```json
+"usingComponents": {
+  "smart-custom-keyboard": "@tuya/miniapp-smart-ui/lib/custom-keyboard/index"
+}
+```
+
+## 代码演示
+
+### 基础用法
+
+```html
+<smart-custom-keyboard bind:change="onChange" bind:confirm="onConfirm" />
+```
+
+```js
+Page({
+  onChange(v) {
+    console.log('onChange value =====>', v.detail);
+  },
+  onConfirm(v) {
+    console.log('onConfirm value ====>', v.detail);
+  },
+});
+```
+
+### 高级用法
+
+可以通过插槽添加定制内容。
+
+```html
+<smart-custom-keyboard
+  input-container-style="
+    marginLeft: 56rpx;
+    marginTop: 16rpx;
+    marginBottom: 56rpx;
+    width: 560rpx;
+    height: 120rpx;
+  "
+  placeholder="请输入"
+  confirm-text="确认"
+  value="123"
+  confirm-color="#123321"
+  bind:change="onChange"
+  bind:confirm="onConfirm"
+>
+  <view
+    slot="custom-button"
+    bind:tap="handleBtn"
+    style="border: 1px solid blue; borderRadius: 4px; marginRight: 4px"
+    >点击</view
+  >
+</smart-custom-keyboard>
+```
+
+```js
+Page({
+  onChange(v) {
+    console.log('onChange value =====>', v.detail);
+  },
+  onConfirm(v) {
+    console.log('onConfirm value ====>', v.detail);
+  },
+  handleBtn() {
+    console.log('click');
+  },
+});
+```
+
+## API
+
+### Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| confirm-color         | 数字键盘的确认按钮背景色                | _string_  | -              |
+| confirm-text          | 确认按钮文案                            | _string_  | Confirm        |
+| confirm-text-style    | 确认按钮的样式                          | _string_  | -              |
+| digital-base          | 用于适配进制功能（取值范围 1-10）       | _number_  | 10             |
+| input-container-style | 输入框容器样式                          | _string_  | -              |
+| ismart-hide-zero      | 是否隐藏零                              | _boolean_ | false          |
+| placeholder           | placeholder 文案                        | _string_  | `please input` |
+| value                 | 值                                      | _string_  | -              |
+| value-text-style      | 当前值的样式（适用于 placeholder 样式） | _string_  | -              |
+
+### Slot
+
+| 名称          | 说明           |
+| ------------- | -------------- |
+| custom-button | 自定义右侧内容 |
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](/material/smartui?comId=config-provider&appType=miniapp)。
+
+| 名称                          | 默认值                                 | 描述 |
+| ----------------------------- | -------------------------------------- | ---- |
+| --custom-keyboard-bg-color | _var(--app-B6, #fff)_ | 背景颜色 |
+| --custom-keyboard-text-color | _var(--app-B6-N2, rgba(0, 0, 0, 0.7))_ | 字体颜色 |
+| --custom-keyboard-border-color | _var(--app-B6-N7, rgba(0, 0, 0, 0.1))_ | 边框颜色 |
+| --custom-keyboard-placeholder-color | _var(--app-B6-N6, rgba(0, 0, 0, 0.2))_ | 占位符颜色 |
+| --custom-keyboard-popup-bg-color | _var(--app-B6-N6, rgba(0, 0, 0, 0.2))_ | 弹窗背景色 |
+| --custom-keyboard-popup-item-color | _var(--app-B6, #fff)_ | 弹窗项目颜色 |
+| --custom-keyboard-popup-confirm-color | _var(--app-M3, #2dda86)_ | 确认按钮颜色 |
+| --custom-keyboard-popup-text-color | _var(--app-B6-N2, rgba(0, 0, 0, 0.7))_ | 弹窗文字颜色 |
+| --custom-keyboard-popup-hover-color | _var(--app-B6-N7, rgba(0, 0, 0, 0.1))_ | 鼠标悬停颜色 |

package/dist/custom-keyboard/index.css

@@ -0,0 +1 @@
+@import '../common/index.css';:root{--smart-ui-overlay:rgba(0,0,0,.4);--smart-ui-bottom-sheet-dragger-node-background:rgba(0,0,0,.3);--smart-ui-dialog-background:var(--app-B4,#fff);--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent);--smart-ui-battery-body-base-background:rgba(0,0,0,.25);--smart-ui-battery-text-color:rgba(0,0,0,.6);--smart-ui-battery-slash-border-color:#fff;--smart-ui-toast-background:#5c5c5c;--smart-ui-toast-border:1px solid hsla(0,0%,100%,.05);--smart-ui-toast-box-shadow:0 4px 12px rgba(0,0,0,.1),0 16px 32px rgba(0,0,0,.12);--smart-ui-overlay-blur-background:rgba(40,44,53,.22)}:root[theme=dark]{--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-bottom-sheet-dragger-node-background:hsla(0,0%,100%,.3);--smart-ui-dialog-background:linear-gradient(0deg,var(--app-B4-N6),var(--app-B4-N6)),var(--app-B1);--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0));--smart-ui-battery-body-base-background:hsla(0,0%,100%,.4);--smart-ui-battery-text-color:#fff;--smart-ui-battery-slash-border-color:#000;--smart-ui-toast-background:#3c3c3c;--smart-ui-toast-border:1px solid hsla(0,0%,100%,.05);--smart-ui-toast-box-shadow:0 8px 24px 0 rgba(0,0,0,.15);--smart-ui-overlay-blur-background:rgba(0,0,0,.6)}.smart-manrope{font-family:Manrope,sans-serif}:root text{white-space:normal}.keyboard-container{align-items:center;background-color:var(--custom-keyboard-bg-color,var(--app-B6,#fff));border-color:var(--custom-keyboard-border-color,var(--app-B6-N7,rgba(0,0,0,.1)));border-radius:16rpx;border-style:solid;border-width:1rpx;box-sizing:border-box;display:flex;flex-direction:row;height:80rpx;justify-content:space-between;overflow:hidden;padding:24rpx 0rpx 24rpx 24rpx;width:500rpx}.keyboard-button{align-items:center;background-color:initial;justify-content:center}.keyboard-textView{display:flex;flex:1}.keyboard-pwdText{color:var(--custom-keyboard-placeholder-color,var(--app-B6-N6,rgba(0,0,0,.2)));font-size:40rpx}.keyboard-password{color:var(--custom-keyboard-text-color,var(--app-B6-N2,rgba(0,0,0,.7)));letter-spacing:16rpx}.keyboard-randomText{font-size:24rpx;font-weight:500}.keyboard-popup-container{background-color:var(--app-B6-N6,rgba(0,0,0,.2));display:flex;flex-direction:row;height:464rpx;padding:8rpx;width:100%}.keyboard-number-wrap{background-color:initial;display:flex;flex:1;flex-direction:row;flex-wrap:wrap;width:570rpx}.keyboard-operate-wrap{background-color:initial;padding-right:4rpx;padding-top:8rpx;width:180rpx}.keyboard-number-item{align-items:center;background-color:var(--app-B6,#fff);border-radius:8rpx;display:flex;height:96rpx;justify-content:center;margin:8rpx;width:166rpx}.keyboard-number-text{color:var(--app-B6-N2,rgba(0,0,0,.7));font-size:48rpx;font-weight:700}.keyboard-hidden-image{background:var(--app-B6-N2,rgba(0,0,0,.7));height:80rpx;width:80rpx}.keyboard-confirm-btn{align-items:center;background-color:var(--app-B6,#fff);border-radius:8rpx;display:flex;height:210rpx;justify-content:center;padding:0;width:168rpx}.keyboard-confirm-color{background-color:var(--app-M3,#2dda86)}.keyboard-confirm-text{color:#fff;font-size:40rpx;font-weight:700}.keyboard-hover-class{background-color:var(--app-B6-N7,rgba(0,0,0,.1))}

package/dist/custom-keyboard/index.d.ts

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