@tuya-miniapp/smart-ui 2.5.1-beta-5 → 2.5.1-beta-7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/README-zh_CN.md +24 -0
  2. package/README.md +34 -12
  3. package/dist/popup/index.wxs +1 -0
  4. package/dist/tabbar/index.js +4 -0
  5. package/dist/tabbar-item/index.css +1 -1
  6. package/dist/tabbar-item/index.js +4 -0
  7. package/dist/tabbar-item/index.wxml +5 -2
  8. package/dist/tabbar-item/index.wxss +1 -1
  9. package/lib/popup/index.wxs +1 -0
  10. package/lib/tabbar/index.js +4 -0
  11. package/lib/tabbar-item/index.css +1 -1
  12. package/lib/tabbar-item/index.js +4 -0
  13. package/lib/tabbar-item/index.wxml +5 -2
  14. package/lib/tabbar-item/index.wxss +1 -1
  15. package/package.json +1 -1
package/README-zh_CN.md CHANGED
@@ -2,6 +2,8 @@
2
2
 
3
3
  # @tuya-miniapp/smart-ui
4
4
 
5
+ ![npm](https://img.shields.io/npm/v/@tuya-miniapp/smart-ui)![down](https://img.shields.io/npm/dt/@tuya-miniapp/smart-ui)
6
+
5
7
  ## 介绍
6
8
 
7
9
  `@tuya-miniapp/smart-ui` 是一个**轻量、可靠的智能小程序组件库**，其基于 `vant-weapp` 实现，提供了一整套符合智能小程序移动端设计规范的 UI 组件（暂不支持微信小程序，此组件库只支持涂鸦小程序）。
@@ -60,6 +62,28 @@ yarn dev
60
62
 
61
63
  `@tuya-miniapp/smart-ui` 从智能小程序基础库 `2.19.0` 版本开始提供稳定的支持。
62
64
 
65
+
66
+ ## 相关链接
67
+
68
+ [SmartUI 组件库官网](https://developer.tuya.com/material/smartui?comId=help-getting-started)
69
+ [Miniapp SmartUI 组件库官网](https://developer.tuya.com/material/smartui?comId=help-getting-started&appType=miniapp)
70
+ [SmartUI github](https://github.com/Tuya-Community/ray-smart-ui)
71
+ [Miniapp SmartUI github](https://github.com/Tuya-Community/miniapp-smart-ui)
72
+ [小程序社区论坛](https://www.tuyaos.com/viewforum.php?f=10)
73
+ [Ray 官网](https://developer.tuya.com/cn/miniapp)
74
+ [Ray 物料市场](https://developer.tuya.com/material/library_oHEKLjj0/)
75
+ [物料&模版 对外源码集](https://github.com/Tuya-Community/tuya-ray-materials)
76
+
77
+ ## 更新日志
78
+
79
+ [官网更新日志](https://developer.tuya.com/material/smartui?comId=help-changelog&appType=miniapp)
80
+
81
+ 本项目遵从 [Angular Style Commit Message Conventions](https://gist.github.com/stephenparish/9941e89d80e2bc58a153)
82
+
83
+ ## 开发交流
84
+
85
+ [官方微信交流群](https://github.com/Tuya-Community/ray-smart-ui/issues/1)
86
+
63
87
  ## 开源协议
64
88
 
65
89
  本项目基于 [MIT](https://zh.wikipedia.org/wiki/MIT%E8%A8%B1%E5%8F%AF%E8%AD%89) 协议，请自由地享受和参与开源。
package/README.md CHANGED
@@ -2,20 +2,21 @@ English | [简体中文](./README-zh_CN.md)
2
2
 
3
3
  # @tuya-miniapp/smart-ui
4
4
 
5
+ ![npm](https://img.shields.io/npm/v/@tuya-miniapp/smart-ui)![down](https://img.shields.io/npm/dt/@tuya-miniapp/smart-ui)
6
+
5
7
  ## Introduction
6
8
 
7
- `@tuya-miniapp/smart-ui` is a **lightweight and reliable smart mini program component library** based on `vant-weapp`, offering a complete set of UI components that adhere to the mobile design specifications of smart mini programs (currently not supporting WeChat Mini Programs, this component library only supports Tuya Mini Programs).
9
+ `@tuya-miniapp/smart-ui` is a **lightweight and reliable smart mini-app component library**, implemented based on `vant-weapp`. It provides a complete set of UI components that comply with smart mini-app mobile design specifications (currently does not support WeChat mini-programs, this component library only supports Tuya mini-programs).
8
10
 
9
11
  ## Preview
10
12
 
11
- Scan the smart mini program QR code below to experience the component library examples.
13
+ Scan the smart mini-app QR code below to experience the component library examples.
12
14
 
13
15
  <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">
14
16
 
15
-
16
17
  ## Before Using
17
18
 
18
- Before using Smart UI, make sure you have studied the official [Smart Mini Program Quick Start](https://developer.tuya.com/en/miniapp/develop/miniapp/guide/start/smart) and [Mini Program Component Introduction](https://developer.tuya.com/en/miniapp/develop/miniapp/framework/component/intro).
19
+ Before using Smart UI, make sure you have studied the official [Smart Mini-App Quick Start](https://developer.tuya.com/cn/miniapp/develop/miniapp/guide/start/smart) and [Mini-App Component Introduction](https://developer.tuya.com/cn/miniapp/develop/miniapp/framework/component/intro).
19
20
 
20
21
  ## Installation
21
22
 
@@ -29,17 +30,17 @@ npm i @tuya-miniapp/smart-ui
29
30
 
30
31
  ## Using Components
31
32
 
32
- Taking the button component as an example, you only need to import the corresponding custom component in the JSON file.
33
+ Take the button component as an example, you only need to introduce the corresponding custom component of the button in the json file.
33
34
 
34
35
  ```json
35
36
  {
36
37
  "usingComponents": {
37
- "smart-button": "@tuya-miniapp/smart-ui/dist/button/index"
38
+ "smart-button": "@tuya-miniapp/smart-ui/lib/button/index"
38
39
  }
39
40
  }
40
41
  ```
41
42
 
42
- Then you can directly use the component in the TYML file.
43
+ Then you can directly use the component in tyml.
43
44
 
44
45
  ```html
45
46
  <smart-button type="primary">Button</smart-button>
@@ -51,16 +52,37 @@ Then you can directly use the component in the TYML file.
51
52
  # Install project dependencies
52
53
  yarn
53
54
 
54
- # Compile components
55
+ # Execute component compilation
55
56
  yarn dev
56
57
  ```
57
58
 
58
- Open [Tuya MiniApp Tools](https://developer.tuya.com/cn/miniapp/devtools/tools), add the `smart-ui/example` directory, and you can preview the examples.
59
+ Open [Tuya MiniApp Tools](https://developer.tuya.com/cn/miniapp/devtools/tools), add the `smart-ui/example` directory to preview the examples.
59
60
 
60
61
  ## Base Library Version
61
62
 
62
- `@tuya-miniapp/smart-ui` provides stable support starting from the smart MiniApp base library version `2.19.0`.
63
+ `@tuya-miniapp/smart-ui` provides stable support starting from version `2.19.0` of the smart mini-app base library.
64
+
65
+ ## Related Links
66
+
67
+ [SmartUI Component Library Official Website](https://developer.tuya.com/material/smartui?comId=help-getting-started)
68
+ [Miniapp SmartUI Component Library Official Website](https://developer.tuya.com/material/smartui?comId=help-getting-started&appType=miniapp)
69
+ [SmartUI GitHub](https://github.com/Tuya-Community/ray-smart-ui)
70
+ [miniapp-smart-ui GitHub](https://github.com/Tuya-Community/miniapp-smart-ui)
71
+ [Mini-App Community Forum](https://www.tuyaos.com/viewforum.php?f=10)
72
+ [Ray Official Website](https://developer.tuya.com/cn/miniapp)
73
+ [Ray Material Market](https://developer.tuya.com/material/library_oHEKLjj0/)
74
+ [Public Source Collection of Materials & Templates](https://github.com/Tuya-Community/tuya-ray-materials)
75
+
76
+ ## Changelog
77
+
78
+ [Official Changelog](https://developer.tuya.com/material/smartui?comId=help-changelog&appType=miniapp)
79
+
80
+ This project follows [Angular Style Commit Message Conventions](https://gist.github.com/stephenparish/9941e89d80e2bc58a153)
81
+
82
+ ## Development Communication
83
+
84
+ [Official WeChat Group](https://github.com/Tuya-Community/ray-smart-ui/issues/1)
63
85
 
64
- ## Open Source License
86
+ ## Open-Source License
65
87
 
66
- This project is licensed under the [MIT](https://en.wikipedia.org/wiki/MIT_License) license. Feel free to enjoy and contribute to the open-source community.
88
+ This project is licensed under the [MIT](https://zh.wikipedia.org/wiki/MIT%E8%A8%B1%E5%8F%AF%E8%AD%89) license. Please feel free to enjoy and participate in open-source.
package/dist/popup/index.wxs CHANGED
@@ -4,6 +4,7 @@ var style = require('../wxs/style.wxs');
4
4
  function popupStyle(data) {
5
5
  var transformStyle = data.position === 'bottom' ? "transform: translate3d(0, calc(100% + " + data.bottomSafeHeight + "px), 0)" : null;
6
6
 
7
+
7
8
  return style([
8
9
  {
9
10
  'margin-bottom': data.bottomSafeHeight + 'px',
package/dist/tabbar/index.js CHANGED
@@ -10,6 +10,10 @@ SmartComponent({
10
10
  type: null,
11
11
  observer: 'updateChildren',
12
12
  },
13
+ upsideDown: {
14
+ type: Boolean,
15
+ value: false,
16
+ },
13
17
  activeColor: {
14
18
  type: String,
15
19
  observer: 'updateChildren',
package/dist/tabbar-item/index.css CHANGED
@@ -1 +1 @@
1
- @import '../common/index.css';:host{flex:1}.smart-tabbar-item{align-items:center;color:var(--tabbar-item-text-color,var(--app-B6-N5,rgba(0,0,0,.3)));display:flex;flex-direction:column;font-size:var(--tabbar-item-font-size,12px);height:100%;justify-content:center;line-height:var(--tabbar-item-line-height,1)}.smart-tabbar-item__icon{font-size:var(--tabbar-item-icon-size,22px);margin-bottom:var(--tabbar-item-margin-bottom,4px);position:relative}.smart-tabbar-item__icon__inner{display:block;min-height:1em;min-width:1em}.smart-tabbar-item--active{color:var(--tabbar-item-active-color,var(--app-M1,#3678e3))}.smart-tabbar-item--disabled{opacity:var(--tabbar-item-disabled-opacity,.7)}.smart-tabbar-item__info{margin-top:2px}
1
+ @import '../common/index.css';:host{flex:1}.smart-tabbar-item{align-items:center;color:var(--tabbar-item-text-color,var(--app-B6-N5,rgba(0,0,0,.3)));display:flex;flex-direction:column;font-size:var(--tabbar-item-font-size,12px);height:100%;justify-content:center;line-height:var(--tabbar-item-line-height,1)}.smart-tabbar-item__icon{font-size:var(--tabbar-item-icon-size,22px);line-height:0;margin-bottom:var(--tabbar-item-margin-bottom,4px);position:relative}.smart-tabbar-item__icon__inner{display:block;min-height:1em;min-width:1em}.smart-tabbar-item__text-up{margin-bottom:var(--tabbar-item-margin-bottom,4px)}.smart-tabbar-item--active{color:var(--tabbar-item-active-color,var(--app-M1,#3678e3))}.smart-tabbar-item--disabled{opacity:var(--tabbar-item-disabled-opacity,.7)}.smart-tabbar-item__info{margin-top:var(--tabbar-item-info-margin-top,2px)}.smart-tabbar-item--reverse .smart-tabbar-item__icon{margin-bottom:0}
package/dist/tabbar-item/index.js CHANGED
@@ -25,6 +25,7 @@ SmartComponent({
25
25
  active: false,
26
26
  activeColor: '',
27
27
  inactiveColor: '',
28
+ upsideDown: false,
28
29
  },
29
30
  methods: {
30
31
  onClick() {
@@ -65,6 +66,9 @@ SmartComponent({
65
66
  if (parentData.inactiveColor !== data.inactiveColor) {
66
67
  patch.inactiveColor = parentData.inactiveColor;
67
68
  }
69
+ if (parentData.upsideDown !== data.upsideDown) {
70
+ patch.upsideDown = parentData.upsideDown;
71
+ }
68
72
  if (Object.keys(patch).length > 0) {
69
73
  this.setData(patch);
70
74
  }
package/dist/tabbar-item/index.wxml CHANGED
@@ -1,10 +1,13 @@
1
1
  <wxs src="../wxs/utils.wxs" module="utils" />
2
2
 
3
3
  <view
4
- class="{{ utils.bem('tabbar-item', { active, disabled }) }} custom-class"
4
+ class="{{ utils.bem('tabbar-item', { active, disabled, reverse: upsideDown }) }} custom-class"
5
5
  style="color: {{ active ? activeColor : inactiveColor }}"
6
6
  bindtap="onClick"
7
7
  >
8
+ <view class="smart-tabbar-item__text smart-tabbar-item__text-up" wx:if="{{upsideDown}}">
9
+ <slot />
10
+ </view>
8
11
  <view class="smart-tabbar-item__icon">
9
12
  <smart-icon
10
13
  wx:if="{{ icon }}"
@@ -23,7 +26,7 @@
23
26
  custom-class="smart-tabbar-item__info"
24
27
  />
25
28
  </view>
26
- <view class="smart-tabbar-item__text">
29
+ <view class="smart-tabbar-item__text" wx:if="{{!upsideDown}}">
27
30
  <slot />
28
31
  </view>
29
32
  </view>
package/dist/tabbar-item/index.wxss CHANGED
@@ -1 +1 @@
1
- @import '../common/index.wxss';:host{flex:1}.smart-tabbar-item{align-items:center;color:var(--tabbar-item-text-color,var(--app-B6-N5,rgba(0,0,0,.3)));display:flex;flex-direction:column;font-size:var(--tabbar-item-font-size,12px);height:100%;justify-content:center;line-height:var(--tabbar-item-line-height,1)}.smart-tabbar-item__icon{font-size:var(--tabbar-item-icon-size,22px);margin-bottom:var(--tabbar-item-margin-bottom,4px);position:relative}.smart-tabbar-item__icon__inner{display:block;min-height:1em;min-width:1em}.smart-tabbar-item--active{color:var(--tabbar-item-active-color,var(--app-M1,#3678e3))}.smart-tabbar-item--disabled{opacity:var(--tabbar-item-disabled-opacity,.7)}.smart-tabbar-item__info{margin-top:2px}
1
+ @import '../common/index.wxss';:host{flex:1}.smart-tabbar-item{align-items:center;color:var(--tabbar-item-text-color,var(--app-B6-N5,rgba(0,0,0,.3)));display:flex;flex-direction:column;font-size:var(--tabbar-item-font-size,12px);height:100%;justify-content:center;line-height:var(--tabbar-item-line-height,1)}.smart-tabbar-item__icon{font-size:var(--tabbar-item-icon-size,22px);line-height:0;margin-bottom:var(--tabbar-item-margin-bottom,4px);position:relative}.smart-tabbar-item__icon__inner{display:block;min-height:1em;min-width:1em}.smart-tabbar-item__text-up{margin-bottom:var(--tabbar-item-margin-bottom,4px)}.smart-tabbar-item--active{color:var(--tabbar-item-active-color,var(--app-M1,#3678e3))}.smart-tabbar-item--disabled{opacity:var(--tabbar-item-disabled-opacity,.7)}.smart-tabbar-item__info{margin-top:var(--tabbar-item-info-margin-top,2px)}.smart-tabbar-item--reverse .smart-tabbar-item__icon{margin-bottom:0}
package/lib/popup/index.wxs CHANGED
@@ -4,6 +4,7 @@ var style = require('../wxs/style.wxs');
4
4
  function popupStyle(data) {
5
5
  var transformStyle = data.position === 'bottom' ? "transform: translate3d(0, calc(100% + " + data.bottomSafeHeight + "px), 0)" : null;
6
6
 
7
+
7
8
  return style([
8
9
  {
9
10
  'margin-bottom': data.bottomSafeHeight + 'px',
package/lib/tabbar/index.js CHANGED
@@ -12,6 +12,10 @@ var utils_1 = require("../common/utils");
12
12
  type: null,
13
13
  observer: 'updateChildren',
14
14
  },
15
+ upsideDown: {
16
+ type: Boolean,
17
+ value: false,
18
+ },
15
19
  activeColor: {
16
20
  type: String,
17
21
  observer: 'updateChildren',
package/lib/tabbar-item/index.css CHANGED
@@ -1 +1 @@
1
- @import '../common/index.css';:host{flex:1}.smart-tabbar-item{align-items:center;color:var(--tabbar-item-text-color,var(--app-B6-N5,rgba(0,0,0,.3)));display:flex;flex-direction:column;font-size:var(--tabbar-item-font-size,12px);height:100%;justify-content:center;line-height:var(--tabbar-item-line-height,1)}.smart-tabbar-item__icon{font-size:var(--tabbar-item-icon-size,22px);margin-bottom:var(--tabbar-item-margin-bottom,4px);position:relative}.smart-tabbar-item__icon__inner{display:block;min-height:1em;min-width:1em}.smart-tabbar-item--active{color:var(--tabbar-item-active-color,var(--app-M1,#3678e3))}.smart-tabbar-item--disabled{opacity:var(--tabbar-item-disabled-opacity,.7)}.smart-tabbar-item__info{margin-top:2px}
1
+ @import '../common/index.css';:host{flex:1}.smart-tabbar-item{align-items:center;color:var(--tabbar-item-text-color,var(--app-B6-N5,rgba(0,0,0,.3)));display:flex;flex-direction:column;font-size:var(--tabbar-item-font-size,12px);height:100%;justify-content:center;line-height:var(--tabbar-item-line-height,1)}.smart-tabbar-item__icon{font-size:var(--tabbar-item-icon-size,22px);line-height:0;margin-bottom:var(--tabbar-item-margin-bottom,4px);position:relative}.smart-tabbar-item__icon__inner{display:block;min-height:1em;min-width:1em}.smart-tabbar-item__text-up{margin-bottom:var(--tabbar-item-margin-bottom,4px)}.smart-tabbar-item--active{color:var(--tabbar-item-active-color,var(--app-M1,#3678e3))}.smart-tabbar-item--disabled{opacity:var(--tabbar-item-disabled-opacity,.7)}.smart-tabbar-item__info{margin-top:var(--tabbar-item-info-margin-top,2px)}.smart-tabbar-item--reverse .smart-tabbar-item__icon{margin-bottom:0}
package/lib/tabbar-item/index.js CHANGED
@@ -27,6 +27,7 @@ var relation_1 = require("../common/relation");
27
27
  active: false,
28
28
  activeColor: '',
29
29
  inactiveColor: '',
30
+ upsideDown: false,
30
31
  },
31
32
  methods: {
32
33
  onClick: function () {
@@ -67,6 +68,9 @@ var relation_1 = require("../common/relation");
67
68
  if (parentData.inactiveColor !== data.inactiveColor) {
68
69
  patch.inactiveColor = parentData.inactiveColor;
69
70
  }
71
+ if (parentData.upsideDown !== data.upsideDown) {
72
+ patch.upsideDown = parentData.upsideDown;
73
+ }
70
74
  if (Object.keys(patch).length > 0) {
71
75
  this.setData(patch);
72
76
  }
package/lib/tabbar-item/index.wxml CHANGED
@@ -1,10 +1,13 @@
1
1
  <wxs src="../wxs/utils.wxs" module="utils" />
2
2
 
3
3
  <view
4
- class="{{ utils.bem('tabbar-item', { active, disabled }) }} custom-class"
4
+ class="{{ utils.bem('tabbar-item', { active, disabled, reverse: upsideDown }) }} custom-class"
5
5
  style="color: {{ active ? activeColor : inactiveColor }}"
6
6
  bindtap="onClick"
7
7
  >
8
+ <view class="smart-tabbar-item__text smart-tabbar-item__text-up" wx:if="{{upsideDown}}">
9
+ <slot />
10
+ </view>
8
11
  <view class="smart-tabbar-item__icon">
9
12
  <smart-icon
10
13
  wx:if="{{ icon }}"
@@ -23,7 +26,7 @@
23
26
  custom-class="smart-tabbar-item__info"
24
27
  />
25
28
  </view>
26
- <view class="smart-tabbar-item__text">
29
+ <view class="smart-tabbar-item__text" wx:if="{{!upsideDown}}">
27
30
  <slot />
28
31
  </view>
29
32
  </view>
package/lib/tabbar-item/index.wxss CHANGED
@@ -1 +1 @@
1
- @import '../common/index.wxss';:host{flex:1}.smart-tabbar-item{align-items:center;color:var(--tabbar-item-text-color,var(--app-B6-N5,rgba(0,0,0,.3)));display:flex;flex-direction:column;font-size:var(--tabbar-item-font-size,12px);height:100%;justify-content:center;line-height:var(--tabbar-item-line-height,1)}.smart-tabbar-item__icon{font-size:var(--tabbar-item-icon-size,22px);margin-bottom:var(--tabbar-item-margin-bottom,4px);position:relative}.smart-tabbar-item__icon__inner{display:block;min-height:1em;min-width:1em}.smart-tabbar-item--active{color:var(--tabbar-item-active-color,var(--app-M1,#3678e3))}.smart-tabbar-item--disabled{opacity:var(--tabbar-item-disabled-opacity,.7)}.smart-tabbar-item__info{margin-top:2px}
1
+ @import '../common/index.wxss';:host{flex:1}.smart-tabbar-item{align-items:center;color:var(--tabbar-item-text-color,var(--app-B6-N5,rgba(0,0,0,.3)));display:flex;flex-direction:column;font-size:var(--tabbar-item-font-size,12px);height:100%;justify-content:center;line-height:var(--tabbar-item-line-height,1)}.smart-tabbar-item__icon{font-size:var(--tabbar-item-icon-size,22px);line-height:0;margin-bottom:var(--tabbar-item-margin-bottom,4px);position:relative}.smart-tabbar-item__icon__inner{display:block;min-height:1em;min-width:1em}.smart-tabbar-item__text-up{margin-bottom:var(--tabbar-item-margin-bottom,4px)}.smart-tabbar-item--active{color:var(--tabbar-item-active-color,var(--app-M1,#3678e3))}.smart-tabbar-item--disabled{opacity:var(--tabbar-item-disabled-opacity,.7)}.smart-tabbar-item__info{margin-top:var(--tabbar-item-info-margin-top,2px)}.smart-tabbar-item--reverse .smart-tabbar-item__icon{margin-bottom:0}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tuya-miniapp/smart-ui",
3
- "version": "2.5.1-beta-5",
3
+ "version": "2.5.1-beta-7",
4
4
  "author": "MiniApp Team",
5
5
  "license": "MIT",
6
6
  "miniprogram": "lib",