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

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/picker/index.js

@@ -150,7 +150,7 @@ SmartComponent({
             this.setData({
                 animating: true,
             });
-            this.$emit('animationStart');
+            this.$emit('animation-start');
         },
         animationEnd() {
             if (!this.data.animating)
@@ -158,7 +158,7 @@ SmartComponent({
             this.setData({
                 animating: false,
             });
-            this.$emit('animationEnd');
+            this.$emit('animation-end');
         },
     },
 });

package/dist/picker/index.wxml

@@ -30,8 +30,8 @@
       visible-item-count="{{ visibleItemCount }}"
       active-class="active-class"
       bind:change="onChange"
-      bind:animationStart="animationStart"
-      bind:animationEnd="animationEnd"
+      bind:animation-start="animationStart"
+      bind:animation-end="animationEnd"
     />
 
     <view

package/dist/picker-column/index.js

@@ -82,7 +82,7 @@ SmartComponent({
                 });
             }
             if (!this.data.playing) {
-                this.$emit('animationStart');
+                this.$emit('animation-start');
             }
             this.setData({
                 startY: event.touches[0].clientY,
@@ -184,7 +184,7 @@ SmartComponent({
                 this.setData({
                     playing: false,
                 });
-                this.$emit('animationEnd');
+                this.$emit('animation-end');
             });
         },
         checkIsDown(curr) {
@@ -285,7 +285,7 @@ SmartComponent({
             index = this.adjustIndex(index) || 0;
             const offset = -index * data.itemHeight;
             if (!data.playing) {
-                this.$emit('animationStart');
+                this.$emit('animation-start');
                 this.setData({
                     playing: true,
                 });
@@ -305,14 +305,14 @@ SmartComponent({
                             this.setData({
                                 playing: false,
                             });
-                            this.$emit('animationEnd');
+                            this.$emit('animation-end');
                             return;
                         }
                         this.$emit('change', index);
                         this.setData({
                             playing: false,
                         });
-                        this.$emit('animationEnd');
+                        this.$emit('animation-end');
                     });
                 }
                 return this.set({
@@ -327,20 +327,20 @@ SmartComponent({
                         this.setData({
                             playing: false,
                         });
-                        this.$emit('animationEnd');
+                        this.$emit('animation-end');
                         return;
                     }
                     this.$emit('change', index);
                     this.setData({
                         playing: false,
                     });
-                    this.$emit('animationEnd');
+                    this.$emit('animation-end');
                 });
             }
             this.setData({
                 playing: false,
             });
-            this.$emit('animationEnd');
+            this.$emit('animation-end');
             return this.set({ offset });
         },
         setValue(value) {

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/toast.js

@@ -32,7 +32,7 @@ function Toast(toastOptions) {
         getCurrentPage();
     const toast = context.selectComponent(options.selector);
     if (!toast) {
-        console.warn('未找到 smart-toast 节点，请确认 selector 及 context 是否正确');
+        console.warn(`未找到 ${options.selector || '#smart-toast'} 节点，请确认 selector 及 context 是否正确`);
         return;
     }
     delete options.context;

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/picker/index.js

@@ -173,7 +173,7 @@ var shared_1 = require("./shared");
             this.setData({
                 animating: true,
             });
-            this.$emit('animationStart');
+            this.$emit('animation-start');
         },
         animationEnd: function () {
             if (!this.data.animating)
@@ -181,7 +181,7 @@ var shared_1 = require("./shared");
             this.setData({
                 animating: false,
             });
-            this.$emit('animationEnd');
+            this.$emit('animation-end');
         },
     },
 });

package/lib/picker/index.wxml

@@ -30,8 +30,8 @@
       visible-item-count="{{ visibleItemCount }}"
       active-class="active-class"
       bind:change="onChange"
-      bind:animationStart="animationStart"
-      bind:animationEnd="animationEnd"
+      bind:animation-start="animationStart"
+      bind:animation-end="animationEnd"
     />
 
     <view

package/lib/picker-column/index.js

@@ -120,7 +120,7 @@ var DEFAULT_DURATION = 400;
                 });
             }
             if (!this.data.playing) {
-                this.$emit('animationStart');
+                this.$emit('animation-start');
             }
             this.setData({
                 startY: event.touches[0].clientY,
@@ -218,7 +218,7 @@ var DEFAULT_DURATION = 400;
                             this.setData({
                                 playing: false,
                             });
-                            this.$emit('animationEnd');
+                            this.$emit('animation-end');
                             return [2 /*return*/];
                     }
                 });
@@ -326,7 +326,7 @@ var DEFAULT_DURATION = 400;
             index = this.adjustIndex(index) || 0;
             var offset = -index * data.itemHeight;
             if (!data.playing) {
-                this.$emit('animationStart');
+                this.$emit('animation-start');
                 this.setData({
                     playing: true,
                 });
@@ -346,14 +346,14 @@ var DEFAULT_DURATION = 400;
                             _this.setData({
                                 playing: false,
                             });
-                            _this.$emit('animationEnd');
+                            _this.$emit('animation-end');
                             return;
                         }
                         _this.$emit('change', index);
                         _this.setData({
                             playing: false,
                         });
-                        _this.$emit('animationEnd');
+                        _this.$emit('animation-end');
                     });
                 }
                 return this.set({
@@ -368,20 +368,20 @@ var DEFAULT_DURATION = 400;
                         _this.setData({
                             playing: false,
                         });
-                        _this.$emit('animationEnd');
+                        _this.$emit('animation-end');
                         return;
                     }
                     _this.$emit('change', index);
                     _this.setData({
                         playing: false,
                     });
-                    _this.$emit('animationEnd');
+                    _this.$emit('animation-end');
                 });
             }
             this.setData({
                 playing: false,
             });
-            this.$emit('animationEnd');
+            this.$emit('animation-end');
             return this.set({ offset: offset });
         },
         setValue: function (value) {

package/lib/popover/index.js

@@ -177,7 +177,7 @@ function createSvgIcon(svg) {
             this.setData({
                 currentShow: true,
             });
-            this.$emit('showchange', true);
+            this.$emit('show-change', true);
             if (this.data.duration) {
                 setTimeout(function () {
                     _this.onClose();
@@ -188,7 +188,7 @@ function createSvgIcon(svg) {
             this.setData({
                 currentShow: false,
             });
-            this.$emit('showchange', false);
+            this.$emit('show-change', false);
             this.$emit('close', false);
         },
     },

package/lib/toast/toast.js

@@ -46,7 +46,7 @@ function Toast(toastOptions) {
         (0, utils_1.getCurrentPage)();
     var toast = context.selectComponent(options.selector);
     if (!toast) {
-        console.warn('未找到 smart-toast 节点，请确认 selector 及 context 是否正确');
+        console.warn("\u672A\u627E\u5230 ".concat(options.selector || '#smart-toast', " \u8282\u70B9\uFF0C\u8BF7\u786E\u8BA4 selector \u53CA context \u662F\u5426\u6B63\u786E"));
         return;
     }
     delete options.context;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tuya-miniapp/smart-ui",
-  "version": "2.3.0-beta-3",
+  "version": "2.3.0-beta-5",
   "author": "MiniApp Team",
   "license": "MIT",
   "miniprogram": "lib",
@@ -22,8 +22,10 @@
   "files": [
     "dist",
     "!dist/**/demo/",
+    "lib",
     "!lib/**/demo/",
-    "lib"
+    "README-zh_CN.md",
+    "README.md"
   ],
   "husky": {
     "hooks": {
@@ -49,6 +51,7 @@
     "@types/fs-extra": "^11.0.4",
     "@types/jest": "^27.0.2",
     "@vant/stylelint-config": "^1.4.2",
+    "canvas": "^3.1.0",
     "conventional-changelog-cli": "^5.0.0",
     "eslint-config-tuya-panel": "^0.4.2",
     "eslint-plugin-literal-check": "^0.1.2",
@@ -62,6 +65,7 @@
     "gulp-typescript": "^6.0.0-alpha.1",
     "husky": "^8.0.3",
     "jest": "^27.3.1",
+    "jest-canvas-mock": "^2.5.2",
     "lint-staged": "^13.0.3",
     "merge2": "^1.4.1",
     "miniprogram-api-typings": "^3.1.6",

package/lib/action-sheet/demo/index.d.ts

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

package/lib/action-sheet/demo/index.js

@@ -1,124 +0,0 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var component_1 = require("../../common/component");
-(0, component_1.SmartComponent)({
-    data: {
-        show1: false,
-        show2: false,
-        show3: false,
-        show4: false,
-        show5: false,
-        showSelect: false,
-        showSelect2: false,
-        showNumber: false,
-        showPicker: false,
-        isReady: false,
-        action1: [{ name: 'Action' }, { name: 'Action' }, { name: 'Action' }],
-        action2: [
-            { name: I18n.t('coloringOptions'), color: '#ee0a24' },
-            { loading: true },
-            { name: I18n.t('disableOption'), disabled: true },
-        ],
-        actionSelect: [
-            { id: 0, name: 'Action', checked: true },
-            { id: 1, name: 'Action', checked: false },
-            { id: 2, name: 'Action', checked: false },
-            { id: 3, name: 'Action', checked: false },
-            { id: 4, name: 'Action', checked: false },
-            { id: 5, name: 'Action', checked: false },
-            { id: 6, name: 'Action', checked: false },
-            { id: 7, name: 'Action', checked: false },
-        ],
-        currentNumber: 0,
-        currentDate: new Date(2018, 0, 1),
-        currentDateStr: new Date(2018, 0, 1).toLocaleDateString(),
-        minDate: new Date(2018, 0, 1).getTime(),
-        formatter: function (type, value) {
-            if (type === 'year') {
-                return "".concat(value).concat(I18n.t('year'));
-            }
-            if (type === 'month') {
-                return "".concat(value).concat(I18n.t('month'));
-            }
-            return value;
-        },
-    },
-    methods: {
-        toggle: function (type) {
-            var _a;
-            this.setData((_a = {},
-                _a[type] = !this.data[type],
-                _a));
-        },
-        toggleActionSheet1: function () {
-            this.toggle('show1');
-        },
-        toggleActionSheet2: function () {
-            this.toggle('show2');
-        },
-        toggleActionSheet3: function () {
-            this.toggle('show3');
-        },
-        toggleActionSheet4: function () {
-            this.toggle('show4');
-        },
-        toggleActionSheet5: function () {
-            this.toggle('show5');
-        },
-        toggleActionSheet6: function () {
-            this.toggle('show6');
-        },
-        toggleActionSheetSelect: function () {
-            this.toggle('showSelect');
-        },
-        toggleActionSheetSelect2: function () {
-            this.toggle('showSelect2');
-        },
-        toggleActionSheetNumber: function () {
-            this.toggle('showNumber');
-        },
-        toggleActionSheetPicker: function () {
-            this.toggle('showPicker');
-        },
-        onAfterEnter: function () {
-            this.setData({ isReady: true });
-        },
-        onChange: function (event) {
-            this.setData({ currentNumber: event.detail.value });
-        },
-        onSelect: function (evt) {
-            var id = evt.detail.id;
-            var newActionSelect = this.data.actionSelect.map(function (item) {
-                if (item.id === id)
-                    return __assign(__assign({}, item), { checked: true });
-                return __assign(__assign({}, item), { checked: false });
-            });
-            this.setData({
-                actionSelect: newActionSelect,
-            });
-        },
-        onInput: function (event) {
-            var detail = event.detail;
-            var date = new Date(detail);
-            this.setData({ currentDate: date });
-        },
-        onPickerConfirm: function () {
-            var _a, _b;
-            this.setData({
-                showPicker: false,
-                currentDateStr: (_b = (_a = this.data) === null || _a === void 0 ? void 0 : _a.currentDate) === null || _b === void 0 ? void 0 : _b.toLocaleDateString(),
-            });
-        },
-    },
-});

package/lib/area/demo/index.d.ts

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

package/lib/area/demo/index.js

@@ -1,47 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-var _a;
-Object.defineProperty(exports, "__esModule", { value: true });
-var component_1 = require("../../common/component");
-var toast_1 = __importDefault(require("../../toast/toast"));
-var db = (_a = wx.cloud) === null || _a === void 0 ? void 0 : _a.database();
-(0, component_1.SmartComponent)({
-    data: {
-        areaList: {},
-        loading: true,
-        value: 330302,
-    },
-    mounted: function () {
-        var _this = this;
-        db === null || db === void 0 ? void 0 : db.collection('region').limit(1).get().then(function (res) {
-            if (res.data && res.data.length > 0) {
-                _this.setData({
-                    loading: false,
-                    areaList: res.data[0],
-                });
-            }
-        }).catch(function (err) {
-            console.log(err);
-            _this.setData({
-                loading: false,
-            });
-        });
-    },
-    methods: {
-        onChange: function (event) {
-            var values = event.detail.values;
-            (0, toast_1.default)({
-                context: this,
-                message: values.map(function (item) { return item.name; }).join('-'),
-            });
-        },
-        onConfirm: function (event) {
-            console.log(event);
-        },
-        onCancel: function (event) {
-            console.log(event);
-        },
-    },
-});

package/lib/battery/demo/index.d.ts

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

package/lib/battery/demo/index.js

@@ -1,4 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var component_1 = require("../../common/component");
-(0, component_1.SmartComponent)({});

package/lib/bottom-sheet/demo/index.d.ts

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

package/lib/bottom-sheet/demo/index.js

@@ -1,27 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var component_1 = require("../../common/component");
-(0, component_1.SmartComponent)({
-    data: {
-        show1: false,
-        show2: false,
-        show3: false,
-    },
-    methods: {
-        toggle: function (type) {
-            var _a;
-            this.setData((_a = {},
-                _a[type] = !this.data[type],
-                _a));
-        },
-        toggleActionSheet1: function () {
-            this.toggle('show1');
-        },
-        toggleActionSheet2: function () {
-            this.toggle('show2');
-        },
-        toggleActionSheet3: function () {
-            this.toggle('show3');
-        },
-    },
-});

package/lib/button/demo/index.d.ts

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

package/lib/button/demo/index.js

@@ -1,14 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var PlusCircle_1 = __importDefault(require("@tuya-miniapp/icons/dist/svg/PlusCircle"));
-var Right_1 = __importDefault(require("@tuya-miniapp/icons/dist/svg/Right"));
-var component_1 = require("../../common/component");
-(0, component_1.SmartComponent)({
-    data: {
-        iconAdd: PlusCircle_1.default,
-        iconRight: Right_1.default,
-    },
-});

package/lib/calendar/demo/index.d.ts

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