@tuya-miniapp/smart-ui 2.3.0-beta-4 → 2.3.0-beta-6

package/README-zh_CN.md

@@ -0,0 +1,66 @@
+[English](./README.md) | 简体中文
+
+# @tuya-miniapp/smart-ui
+
+## 介绍
+
+`@tuya-miniapp/smart-ui` 是一个**轻量、可靠的智能小程序组件库**，其基于 `vant-weapp` 实现，提供了一整套符合智能小程序移动端设计规范的 UI 组件。
+
+## 预览
+
+扫描下方智能小程序二维码，体验组件库示例。
+
+<img src="https://images.tuyacn.com/rms-static/8bcfe810-a187-11ef-9773-6b86083026a3-1731478901009.png?tyName=v2.0.0miniapp-SmartUI.png" width="200" height="200">
+
+## 使用之前
+
+使用 Smart UI 前，请确保你已经学习过智能小程序官方的 [智能小程序快速开始](https://developer.tuya.com/cn/miniapp/develop/miniapp/guide/start/smart) 和 [小程序组件介绍](https://developer.tuya.com/cn/miniapp/develop/miniapp/framework/component/intro)。
+
+## 安装
+
+```bash
+# 通过 yarn 安装（推荐）
+yarn add @tuya-miniapp/smart-ui
+
+# 通过 npm 安装
+npm i @tuya-miniapp/smart-ui
+```
+
+## 使用组件
+
+以按钮组件为例，只需要在 json 文件中引入按钮对应的自定义组件即可
+
+```json
+{
+  "usingComponents": {
+    "smart-button": "@tuya-miniapp/smart-ui/lib/button/index"
+  }
+}
+```
+
+接着就可以在 tyml 中直接使用组件
+
+```html
+<smart-button type="primary">按钮</smart-button>
+```
+
+## 在开发者工具中预览
+
+```bash
+# 安装项目依赖
+yarn
+
+# 执行组件编译
+yarn dev
+```
+
+打开 [Tuya MiniApp Tools](https://developer.tuya.com/cn/miniapp/devtools/tools)，把`smart-ui/example`目录添加进去就可以预览示例了。
+
+## 基础库版本
+
+`@tuya-miniapp/smart-ui` 从智能小程序基础库 `2.19.0` 版本开始提供稳定的支持。
+
+## 开源协议
+
+本项目基于 [MIT](https://zh.wikipedia.org/wiki/MIT%E8%A8%B1%E5%8F%AF%E8%AD%89) 协议，请自由地享受和参与开源。
+

package/dist/calendar/index.js

@@ -416,6 +416,7 @@ SmartComponent({
             if (maxRange && calcDateNum(date) > maxRange) {
                 if (showRangePrompt) {
                     Toast({
+                        selector: '#smart-toast-calendar',
                         context: this,
                         message: rangePrompt || `选择天数不能超过 ${maxRange} 天`,
                     });

package/dist/calendar/index.json

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

package/dist/calendar/index.wxml

@@ -23,5 +23,3 @@
 </smart-popup>
 
 <include wx:else src="./calendar.wxml" />
-
-<smart-toast id="smart-toast" />

package/dist/common/appLog.d.ts

@@ -0,0 +1,10 @@
+export declare const init: (tag: string) => any;
+export declare const info: (data: any, devId?: string) => void;
+export declare const warn: (data: any, devId?: string) => void;
+export declare const error: (data: any, devId?: string) => void;
+declare const _default: {
+    info: (data: any, devId?: string | undefined) => void;
+    warn: (data: any, devId?: string | undefined) => void;
+    error: (data: any, devId?: string | undefined) => void;
+};
+export default _default;

package/dist/common/appLog.js

@@ -0,0 +1,105 @@
+/* eslint-disable no-console */
+const defaultTag = 'smart-ui-info';
+let Log = null;
+function isErrorMessage(obj) {
+    return obj instanceof Error;
+}
+export const init = (tag) => {
+    if (tag !== defaultTag && tag) {
+        Log = null;
+    }
+    if (Log) {
+        return Log;
+    }
+    // @ts-ignore
+    if (!ty.getLogManager) {
+        console.warn('不支持ty.getLogManager');
+        return null;
+    }
+    // @ts-ignore
+    Log = ty.getLogManager({
+        tag: tag || defaultTag,
+    });
+    return Log;
+};
+export const info = (data, devId) => {
+    if (!Log) {
+        const _log = init(devId || defaultTag);
+        if (!_log) {
+            return;
+        }
+    }
+    if (typeof data !== 'string') {
+        // eslint-disable-next-line no-param-reassign
+        data = JSON.stringify(data);
+    }
+    Log.log({
+        message: data,
+        success(res) {
+            // console.log('success ty.Log', res);
+        },
+        failure(err) {
+            console.log('fail ty.Log', err);
+        },
+    });
+};
+export const warn = (data, devId) => {
+    if (!Log) {
+        const _log = init(devId || defaultTag);
+        if (!_log) {
+            return;
+        }
+    }
+    if (typeof data !== 'string') {
+        // eslint-disable-next-line no-param-reassign
+        data = JSON.stringify(data);
+    }
+    Log.debug({
+        message: data,
+        success(res) {
+            console.log('success ty.debug', res);
+        },
+        failure(err) {
+            console.log('fail ty.debug', err);
+        },
+    });
+};
+export const error = (data, devId) => {
+    var _a, _b;
+    if (!Log) {
+        const _log = init(devId || defaultTag);
+        if (!_log) {
+            return;
+        }
+    }
+    let _data = null;
+    const isError = isErrorMessage(data);
+    if (isError) {
+        _data = {
+            message: data.message,
+            stack: (_b = (_a = data.stack) === null || _a === void 0 ? void 0 : _a.slice(0, 200)) !== null && _b !== void 0 ? _b : [],
+        };
+    }
+    else {
+        try {
+            _data = JSON.stringify(data);
+        }
+        catch (e) {
+            _data = e === null || e === void 0 ? void 0 : e.toString();
+        }
+    }
+    Log.error({
+        message: _data,
+        success(res) {
+            console.log('success ty.error', res);
+        },
+        failure(err) {
+            console.log('fail ty.error', err);
+        },
+    });
+};
+export default {
+    info,
+    warn,
+    error,
+};

package/dist/dialog/dialog.js

@@ -1,3 +1,4 @@
+import appLog from '../common/appLog';
 import { getCurrentPage } from '../common/utils';
 const queueRef = {
     value: [],
@@ -36,15 +37,20 @@ export const contextRef = {
 const Dialog = (options) => {
     options = Object.assign(Object.assign({}, currentOptions), options);
     return new Promise((resolve, reject) => {
+        appLog.info('start open dialog');
         const context = (typeof options.context === 'function' ? options.context() : options.context) ||
             contextRef.value[options.selector] ||
             getCurrentPage();
         const selector = options.selector;
+        appLog.info(`dialog selector: ${selector}`);
+        appLog.info(`queue : ${JSON.stringify(queueRef.value)}`);
         const dialog = context.selectComponent(options.selector);
+        appLog.info(`dialog component ${dialog ? 'success' : 'fail'}`);
         if (!options.ignoreQueue &&
             queueRef.value.length > 0 &&
             queueRef.value.find(item => dialog && item && item.id === dialog.id)) {
             console.warn(`相同选择器的 Dialog 调用过于频繁，${dialog.id} 已忽略重复调用`);
+            appLog.info(`相同选择器的 Dialog 调用过于频繁，${dialog.id} 已忽略重复调用`);
             return;
         }
         delete options.context;
@@ -60,14 +66,17 @@ const Dialog = (options) => {
                      */
                     queueRef.value = queueRef.value.filter(item => item.id !== dialog.id);
                     action === 'confirm' ? resolve(instance) : reject(instance);
+                    appLog.info(`dialog ${dialog.id} callback`);
                 } }, optionsWithInputValue));
             wx.nextTick(() => {
+                appLog.info(`start open dialog ${dialog.id}`);
                 dialog.setData({ show: true });
             });
             queueRef.value.push(dialog);
         }
         else {
             console.warn(`未找到 ${(selector !== null && selector !== void 0 ? selector : '#smart-dialog').replace('#', '')} 节点，请确认 selector 及 context 是否正确`);
+            appLog.info(`未找到 ${(selector !== null && selector !== void 0 ? selector : '#smart-dialog').replace('#', '')} 节点，请确认 selector 及 context 是否正确`);
         }
     });
 };

package/dist/dialog/index.js

@@ -1,6 +1,7 @@
 import warningIcon from '@tuya-miniapp/icons/dist/svg/Warning';
 import { SmartComponent } from '../common/component';
 import { button } from '../mixins/button';
+import appLog from '../common/appLog';
 import { getCurrentPage, toPromise } from '../common/utils';
 import { contextRef } from './dialog';
 SmartComponent({
@@ -97,13 +98,16 @@ SmartComponent({
             return;
         if (contextRef.value[`#${this.id}`]) {
             console.error(`Dialog component #${this.id} repeated!`);
+            appLog.info(`Dialog component #${this.id} repeated!`);
         }
         contextRef.value[`#${this.id}`] = getCurrentPage();
+        appLog.info(`Dialog #${this.id} mounted`);
     },
     destroyed: function () {
         if (!this.id)
             return;
         contextRef.value[`#${this.id}`] = null;
+        appLog.info(`dialog #${this.id} destroyed`);
     },
     methods: {
         onConfirm() {
@@ -181,6 +185,7 @@ SmartComponent({
         },
         onAfterLeave() {
             this.$emit('after-leave');
+            appLog.info(`dialog #${this.id} after-leave`);
             const { callback, actionType } = this.data;
             if (callback) {
                 callback(actionType, this);

package/dist/mixins/transition.js

@@ -1,4 +1,5 @@
 // @ts-nocheck
+import appLog from '../common/appLog';
 import { requestAnimationFrame } from '../common/utils';
 import { isObj } from '../common/validator';
 const getClassNames = (name) => ({
@@ -39,6 +40,7 @@ export function transition(showDefaultValue) {
         },
         methods: {
             observeShow(value, old) {
+                appLog.info(`transition component observeShow value: ${value};old: ${value}`);
                 if (value === old) {
                     return;
                 }
@@ -47,6 +49,7 @@ export function transition(showDefaultValue) {
             enter() {
                 if (this.enterFinishedPromise)
                     return;
+                appLog.info(`transition component enter success`);
                 this.enterFinishedPromise = new Promise(resolve => {
                     const { duration, name } = this.data;
                     const classNames = getClassNames(name);
@@ -72,6 +75,7 @@ export function transition(showDefaultValue) {
                                 return;
                             }
                             this.transitionEnded = false;
+                            appLog.info(`transition component enter transitionEnded false`);
                             this.setData({ classes: classNames['enter-to'] });
                             resolve();
                         });
@@ -79,12 +83,14 @@ export function transition(showDefaultValue) {
                 });
                 this.enterFinishedPromise.catch(err => {
                     this.enterFinishedPromise = null;
-                    console.log(err, '---error');
+                    appLog.info(err);
+                    console.log(err, '---error-enter');
                 });
             },
             leave() {
                 if (!this.enterFinishedPromise)
                     return;
+                appLog.info(`transition component leave success`);
                 this.enterFinishedPromise
                     .then(() => {
                     if (!this.data.display) {
@@ -109,8 +115,10 @@ export function transition(showDefaultValue) {
                                 return;
                             }
                             this.transitionEnded = false;
+                            appLog.info(`transition component leave transitionEnded false`);
                             setTimeout(() => {
                                 this.enterFinishedPromise = null;
+                                appLog.info(`transition component enterFinishedPromise cleared`);
                                 this.onTransitionEnd();
                             }, currentDuration);
                             this.setData({ classes: classNames['leave-to'] });
@@ -119,15 +127,18 @@ export function transition(showDefaultValue) {
                 })
                     .catch(err => {
                     this.enterFinishedPromise = null;
-                    console.log(err, '---error');
+                    console.log(err, '---error-leave');
                 });
             },
             onTransitionEnd() {
+                appLog.info(`transition component in transitionEnded ${this.transitionEnded}`);
                 if (this.transitionEnded) {
                     return;
                 }
                 this.transitionEnded = true;
+                appLog.info(`transition component in transitionEnded true`);
                 this.$emit(`after-${this.status}`);
+                appLog.info(`transition component onTransitionEnd ${this.status} success`);
                 const { show, display } = this.data;
                 if (!show && display) {
                     this.setData({ display: false });

package/dist/popover/index.js

@@ -161,7 +161,7 @@ SmartComponent({
             this.setData({
                 currentShow: true,
             });
-            this.$emit('showchange', true);
+            this.$emit('show-change', true);
             if (this.data.duration) {
                 setTimeout(() => {
                     this.onClose();
@@ -172,7 +172,7 @@ SmartComponent({
             this.setData({
                 currentShow: false,
             });
-            this.$emit('showchange', false);
+            this.$emit('show-change', false);
             this.$emit('close', false);
         },
     },

package/dist/toast/index.js

@@ -2,6 +2,7 @@ import { Success, Alarm, Error } from './icons';
 import { SmartComponent } from '../common/component';
 import { contextRef } from './toast';
 import { getCurrentPage } from '../common/utils';
+import appLog from '../common/appLog';
 SmartComponent({
     props: {
         show: Boolean,
@@ -38,13 +39,16 @@ SmartComponent({
             return;
         if (contextRef.value[`#${this.id}`]) {
             console.error(`Toast component #${this.id} repeated!`);
+            appLog.info(`Toast component #${this.id} repeated!`);
         }
         contextRef.value[`#${this.id}`] = getCurrentPage();
+        appLog.info(`Toast #${this.id} mounted`);
     },
     destroyed: function () {
         if (!this.id)
             return;
         contextRef.value[`#${this.id}`] = null;
+        appLog.info(`Toast #${this.id} destroyed`);
     },
     methods: {
         // for prevent touchmove

package/dist/toast/toast.js

@@ -1,3 +1,4 @@
+import appLog from '../common/appLog';
 import { getCurrentPage } from '../common/utils';
 import { isObj } from '../common/validator';
 const defaultOptions = {
@@ -27,12 +28,16 @@ export const contextRef = {
 };
 function Toast(toastOptions) {
     const options = Object.assign(Object.assign({}, currentOptions), parseOptions(toastOptions));
+    appLog.info('start open Toast');
     const context = (typeof options.context === 'function' ? options.context() : options.context) ||
         contextRef.value[options.selector] ||
         getCurrentPage();
     const toast = context.selectComponent(options.selector);
+    appLog.info(`toast selector: ${options.selector}`);
+    appLog.info(`toast component ${toast ? 'success' : 'fail'}`);
     if (!toast) {
-        console.warn('未找到 smart-toast 节点，请确认 selector 及 context 是否正确');
+        console.warn(`未找到 ${options.selector || '#smart-toast'} 节点，请确认 selector 及 context 是否正确`);
+        appLog.info(`未找到 ${options.selector || '#smart-toast'} 节点，请确认 selector 及 context 是否正确`);
         return;
     }
     delete options.context;
@@ -50,6 +55,7 @@ function Toast(toastOptions) {
         toast.timer = setTimeout(() => {
             toast.clear();
             queueRef.value = queueRef.value.filter(item => item !== toast);
+            appLog.info(`toast ${options.selector} cleared`);
         }, options.duration);
     }
     return toast;

package/lib/calendar/index.js

@@ -434,6 +434,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',
                         context: this,
                         message: rangePrompt || "\u9009\u62E9\u5929\u6570\u4E0D\u80FD\u8D85\u8FC7 ".concat(maxRange, " \u5929"),
                     });

package/lib/calendar/index.json

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

package/lib/calendar/index.wxml

@@ -23,5 +23,3 @@
 </smart-popup>
 
 <include wx:else src="./calendar.wxml" />
-
-<smart-toast id="smart-toast" />

package/lib/common/appLog.d.ts

@@ -0,0 +1,10 @@
+export declare const init: (tag: string) => any;
+export declare const info: (data: any, devId?: string) => void;
+export declare const warn: (data: any, devId?: string) => void;
+export declare const error: (data: any, devId?: string) => void;
+declare const _default: {
+    info: (data: any, devId?: string | undefined) => void;
+    warn: (data: any, devId?: string | undefined) => void;
+    error: (data: any, devId?: string | undefined) => void;
+};
+export default _default;

package/lib/common/appLog.js

@@ -0,0 +1,112 @@
+"use strict";
+/* eslint-disable no-console */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.error = exports.warn = exports.info = exports.init = void 0;
+var defaultTag = 'smart-ui-info';
+var Log = null;
+function isErrorMessage(obj) {
+    return obj instanceof Error;
+}
+var init = function (tag) {
+    if (tag !== defaultTag && tag) {
+        Log = null;
+    }
+    if (Log) {
+        return Log;
+    }
+    // @ts-ignore
+    if (!ty.getLogManager) {
+        console.warn('不支持ty.getLogManager');
+        return null;
+    }
+    // @ts-ignore
+    Log = ty.getLogManager({
+        tag: tag || defaultTag,
+    });
+    return Log;
+};
+exports.init = init;
+var info = function (data, devId) {
+    if (!Log) {
+        var _log = (0, exports.init)(devId || defaultTag);
+        if (!_log) {
+            return;
+        }
+    }
+    if (typeof data !== 'string') {
+        // eslint-disable-next-line no-param-reassign
+        data = JSON.stringify(data);
+    }
+    Log.log({
+        message: data,
+        success: function (res) {
+            // console.log('success ty.Log', res);
+        },
+        failure: function (err) {
+            console.log('fail ty.Log', err);
+        },
+    });
+};
+exports.info = info;
+var warn = function (data, devId) {
+    if (!Log) {
+        var _log = (0, exports.init)(devId || defaultTag);
+        if (!_log) {
+            return;
+        }
+    }
+    if (typeof data !== 'string') {
+        // eslint-disable-next-line no-param-reassign
+        data = JSON.stringify(data);
+    }
+    Log.debug({
+        message: data,
+        success: function (res) {
+            console.log('success ty.debug', res);
+        },
+        failure: function (err) {
+            console.log('fail ty.debug', err);
+        },
+    });
+};
+exports.warn = warn;
+var error = function (data, devId) {
+    var _a, _b;
+    if (!Log) {
+        var _log = (0, exports.init)(devId || defaultTag);
+        if (!_log) {
+            return;
+        }
+    }
+    var _data = null;
+    var isError = isErrorMessage(data);
+    if (isError) {
+        _data = {
+            message: data.message,
+            stack: (_b = (_a = data.stack) === null || _a === void 0 ? void 0 : _a.slice(0, 200)) !== null && _b !== void 0 ? _b : [],
+        };
+    }
+    else {
+        try {
+            _data = JSON.stringify(data);
+        }
+        catch (e) {
+            _data = e === null || e === void 0 ? void 0 : e.toString();
+        }
+    }
+    Log.error({
+        message: _data,
+        success: function (res) {
+            console.log('success ty.error', res);
+        },
+        failure: function (err) {
+            console.log('fail ty.error', err);
+        },
+    });
+};
+exports.error = error;
+exports.default = {
+    info: exports.info,
+    warn: exports.warn,
+    error: exports.error,
+};

package/lib/dialog/dialog.js

@@ -10,8 +10,12 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.contextRef = void 0;
+var appLog_1 = __importDefault(require("../common/appLog"));
 var utils_1 = require("../common/utils");
 var queueRef = {
     value: [],
@@ -50,15 +54,20 @@ exports.contextRef = {
 var Dialog = function (options) {
     options = __assign(__assign({}, currentOptions), options);
     return new Promise(function (resolve, reject) {
+        appLog_1.default.info('start open dialog');
         var context = (typeof options.context === 'function' ? options.context() : options.context) ||
             exports.contextRef.value[options.selector] ||
             (0, utils_1.getCurrentPage)();
         var selector = options.selector;
+        appLog_1.default.info("dialog selector: ".concat(selector));
+        appLog_1.default.info("queue : ".concat(JSON.stringify(queueRef.value)));
         var dialog = context.selectComponent(options.selector);
+        appLog_1.default.info("dialog component ".concat(dialog ? 'success' : 'fail'));
         if (!options.ignoreQueue &&
             queueRef.value.length > 0 &&
             queueRef.value.find(function (item) { return dialog && item && item.id === dialog.id; })) {
             console.warn("\u76F8\u540C\u9009\u62E9\u5668\u7684 Dialog \u8C03\u7528\u8FC7\u4E8E\u9891\u7E41\uFF0C".concat(dialog.id, " \u5DF2\u5FFD\u7565\u91CD\u590D\u8C03\u7528"));
+            appLog_1.default.info("\u76F8\u540C\u9009\u62E9\u5668\u7684 Dialog \u8C03\u7528\u8FC7\u4E8E\u9891\u7E41\uFF0C".concat(dialog.id, " \u5DF2\u5FFD\u7565\u91CD\u590D\u8C03\u7528"));
             return;
         }
         delete options.context;
@@ -74,14 +83,17 @@ var Dialog = function (options) {
                      */
                     queueRef.value = queueRef.value.filter(function (item) { return item.id !== dialog.id; });
                     action === 'confirm' ? resolve(instance) : reject(instance);
+                    appLog_1.default.info("dialog ".concat(dialog.id, " callback"));
                 } }, optionsWithInputValue));
             wx.nextTick(function () {
+                appLog_1.default.info("start open dialog ".concat(dialog.id));
                 dialog.setData({ show: true });
             });
             queueRef.value.push(dialog);
         }
         else {
             console.warn("\u672A\u627E\u5230 ".concat((selector !== null && selector !== void 0 ? selector : '#smart-dialog').replace('#', ''), " \u8282\u70B9\uFF0C\u8BF7\u786E\u8BA4 selector \u53CA context \u662F\u5426\u6B63\u786E"));
+            appLog_1.default.info("\u672A\u627E\u5230 ".concat((selector !== null && selector !== void 0 ? selector : '#smart-dialog').replace('#', ''), " \u8282\u70B9\uFF0C\u8BF7\u786E\u8BA4 selector \u53CA context \u662F\u5426\u6B63\u786E"));
         }
     });
 };

package/lib/dialog/index.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var Warning_1 = __importDefault(require("@tuya-miniapp/icons/dist/svg/Warning"));
 var component_1 = require("../common/component");
 var button_1 = require("../mixins/button");
+var appLog_1 = __importDefault(require("../common/appLog"));
 var utils_1 = require("../common/utils");
 var dialog_1 = require("./dialog");
 (0, component_1.SmartComponent)({
@@ -102,13 +103,16 @@ var dialog_1 = require("./dialog");
             return;
         if (dialog_1.contextRef.value["#".concat(this.id)]) {
             console.error("Dialog component #".concat(this.id, " repeated!"));
+            appLog_1.default.info("Dialog component #".concat(this.id, " repeated!"));
         }
         dialog_1.contextRef.value["#".concat(this.id)] = (0, utils_1.getCurrentPage)();
+        appLog_1.default.info("Dialog #".concat(this.id, " mounted"));
     },
     destroyed: function () {
         if (!this.id)
             return;
         dialog_1.contextRef.value["#".concat(this.id)] = null;
+        appLog_1.default.info("dialog #".concat(this.id, " destroyed"));
     },
     methods: {
         onConfirm: function () {
@@ -189,6 +193,7 @@ var dialog_1 = require("./dialog");
         },
         onAfterLeave: function () {
             this.$emit('after-leave');
+            appLog_1.default.info("dialog #".concat(this.id, " after-leave"));
             var _a = this.data, callback = _a.callback, actionType = _a.actionType;
             if (callback) {
                 callback(actionType, this);