@tuya-miniapp/smart-ui 2.13.2-beta-0 → 2.13.2-beta-1

package/lib/rate/README.md

@@ -0,0 +1,176 @@
+---
+category: 数据录入
+---
+
+# Rate 评分
+
+### 介绍
+
+用于对事物进行评级操作。
+
+### 引入
+
+在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](/material/smartui?comId=help-getting-started&appType=miniapp)。
+
+```json
+"usingComponents": {
+  "smart-rate": "@tuya-miniapp/smart-ui/lib/rate/index"
+}
+```
+
+## 代码演示
+
+### 基础用法
+
+```html
+<smart-rate value="{{ value }}" bind:change="onChange" />
+```
+
+```javascript
+Page({
+  data: {
+    value: 3,
+  },
+
+  onChange(event) {
+    this.setData({
+      value: event.detail,
+    });
+  },
+});
+```
+
+### 自定义图标
+
+```html
+<smart-rate
+  value="{{ value }}"
+  icon="like"
+  void-icon="like-o"
+  bind:change="onChange"
+/>
+```
+
+### 自定义样式
+
+```html
+<smart-rate
+  value="{{ value }}"
+  size="{{ 25 }}"
+  color="#ffd21e"
+  void-icon="star"
+  void-color="#eee"
+  bind:change="onChange"
+/>
+```
+
+### 半星
+
+```html
+<smart-rate
+  value="{{ value }}"
+  allow-half
+  void-icon="star"
+  void-color="#eee"
+  bind:change="onChange"
+/>
+```
+
+```javascript
+Page({
+  data: {
+    value: 2.5,
+  },
+
+  onChange(event) {
+    this.setData({
+      value: event.detail,
+    });
+  },
+});
+```
+
+### 自定义数量
+
+```html
+<smart-rate value="{{ value }}" count="{{ 6 }}" bind:change="onChange" />
+```
+
+### 禁用状态
+
+```html
+<smart-rate disabled value="{{ value }}" bind:change="onChange" />
+```
+
+### 只读状态
+
+```html
+<smart-rate readonly value="{{ value }}" bind:change="onChange" />
+```
+
+### 监听 change 事件
+
+评分变化时，会触发 `change` 事件。
+
+```html
+<smart-rate value="{{ value }}" bind:change="onChange" />
+```
+
+```javascript
+Page({
+  data: {
+    value: 2,
+  },
+
+  onChange(event) {
+    Toast('当前值：' + event.detail);
+  },
+});
+```
+
+## API
+
+### Props
+
+| 参数           | 说明                                                       | 类型               | 默认值                |
+| -------------- | ---------------------------------------------------------- | ------------------ | --------------------- |
+| allow-half     | 是否允许半选                                               | _boolean_          | `false`               |
+| color          | 选中时的颜色                                               | _string_           | `#ffd21e`             |
+| count          | 图标总数                                                   | _number_           | `5`                   |
+| disabled       | 是否禁用评分                                               | _boolean_          | `false`               |
+| disabled-color | 禁用时的颜色                                               | _string_           | `#bdbdbd`             |
+| gutter         | 图标间距，默认单位为 `px`                                  | _string \| number_ | `4px`                 |
+| icon           | 选中时的图标svg值或图片链接，可选值见 [Icon 组件](/material/smartui?comId=icon&appType=miniapp)   | _string_           | `CheckmarkCircle`     |
+| name           | 在表单内提交时的标识符                                     | _string_           | -                     |
+| readonly       | 是否为只读状态                                             | _boolean_          | `false`               |
+| size           | 图标大小，默认单位为 `px`                                  | _string \| number_ | `20px`                |
+| touchable      | 是否可以通过滑动手势选择评分                               | _boolean_          | `true`                |
+| value          | 当前分值                                                   | _number_           | -                     |
+| void-color     | 未选中时的颜色                                             | _string_           | `#c7c7c7`             |
+| void-icon      | 未选中时的图标svg值或图片链接，可选值见 [Icon 组件](/material/smartui?comId=icon&appType=miniapp) | _string_           | `CheckmarkCircleVoid` |
+
+### Events
+
+| 事件名称    | 说明                     | 回调参数              |
+| ----------- | ------------------------ | --------------------- |
+| bind:change | 当前分值变化时触发的事件 | event.detail:当前分值 |
+
+### 外部样式类
+
+| 类名         | 说明         |
+| ------------ | ------------ |
+| custom-class | 根节点样式类 |
+| icon-class   | 图标样式类   |
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](/material/smartui?comId=config-provider&appType=miniapp)。
+
+| 名称                          | 默认值                                 | 描述 |
+| ----------------------------- | -------------------------------------- | ---- |
+| --rate-horizontal-padding     | _2px_                                  | 评价图标水平内边距 |
+| --rate-icon-size              | _20px_                                 | 评价图标大小         |
+| --rate-icon-void-color        | _#c8c9cc_                              | 空状态图标颜色      |
+| --rate-icon-full-color        | _#ee0a24_                              | 满状态图标颜色      |
+| --rate-icon-disabled-color    | _#c8c9cc_                              | 禁用状态图标颜色    |
+| --rate-icon-gutter            | _4px_                                  | 图标间距             |

package/lib/search/README.md

@@ -0,0 +1,235 @@
+---
+category: 数据录入
+---
+
+# Search 搜索
+
+### 介绍
+
+用于搜索场景的输入框组件。
+
+### 引入
+
+在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](/material/smartui?comId=help-getting-started&appType=miniapp)。
+
+```json
+"usingComponents": {
+  "smart-search": "@tuya-miniapp/smart-ui/lib/search/index"
+}
+```
+
+## 代码演示
+
+### 基础用法
+
+`smart-search` 中，value 用于控制搜索框中的文字。
+
+```html
+<smart-search value="{{ value }}" placeholder="请输入搜索关键词" />
+```
+
+### 简洁风格
+
+`smart-search` 中，value 用于控制搜索框中的文字。可以通过 css 变量调整背景。
+
+```css
+.easy-demo {
+  --search-background-color: transparent;
+  --search-body-background-color: var(--app-B3, #fff);
+}
+```
+
+```html
+<smart-search
+  custom-class="easy-demo"
+  model:value="{{ value }}"
+  shape="round"
+  search-text="搜索"
+  placeholder="请输入搜索关键词"
+  bind:search="onSearch"
+/>
+```
+
+### 事件监听
+
+`smart-search` 提供了 search 和 cancel 事件。search 事件在用户点击键盘上的搜索按钮触发。cancel 事件在用户点击搜索框右侧取消按钮时触发。
+
+```html
+<smart-search
+  value="{{ value }}"
+  placeholder="请输入搜索关键词"
+  show-action
+  search-text="搜索"
+  action-text="取消"
+  bind:search="onSearch"
+  bind:cancel="onCancel"
+  bind:clear="onClear"
+/>
+```
+
+### 搜索框内容对齐
+
+通过 `input-align` 属性可以设置搜索框内容的对齐方式。
+
+```html
+<smart-search
+  value="{{ value }}"
+  input-align="center"
+  placeholder="请输入搜索关键词"
+/>
+```
+
+### 禁用搜索框
+
+通过 `disabled` 属性可以将组件设置为禁用状态。
+
+```html
+<smart-search disabled value="{{ value }}" placeholder="请输入搜索关键词" />
+```
+
+### 自定义按钮
+
+`smart-search` 支持自定义右侧取消按钮，使用名字为 action 的 slot，并设置 use-action-slot 为 true 即可。
+
+```html
+<smart-search
+  value="{{ value }}"
+  label="地址"
+  shape="round"
+  placeholder="请输入搜索关键词"
+  use-action-slot
+  bind:change="onChange"
+  bind:search="onSearch"
+>
+  <view slot="action" bind:tap="onClick">搜索</view>
+</smart-search>
+
+<smart-search
+  value="{{ value }}"
+  shape="round"
+  placeholder="请输入搜索关键词"
+  bind:search="onSearch"
+  bind:change="onChange"
+>
+  <view slot="search-button" bind:tap="onClick">搜索</view>
+  <view slot="label"
+    >地址<smart-icon class="icon" name="{{icon}}" size="12px"
+  /></view>
+</smart-search>
+```
+
+```css
+.searchBtn {
+  padding: 0 16px;
+}
+.icon {
+  margin: 0 8px 0 4px;
+}
+```
+
+```javascript
+Page({
+  data: {
+    value: '',
+  },
+  onChange(e) {
+    this.setData({
+      value: e.detail,
+    });
+  },
+  onSearch() {
+    Toast('搜索' + this.data.value);
+  },
+  onClick() {
+    Toast('搜索' + this.data.value);
+  },
+});
+```
+
+## API
+
+### Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| action-text | 取消按钮文字 | _string_ | `Cancel` |
+| background | 搜索框背景色 | _string_ | `#f2f2f2` |
+| clear-icon | 清除[图标svg字符串](/material/smartui?comId=icon&appType=miniapp)或图片链接 | _string_ | `close` |
+| clear-trigger | 显示清除图标的时机，`always` 表示输入框不为空时展示，<br>`focus` 表示输入框聚焦且不为空时展示 | _string_ | `focus` |
+| clearable | 是否启用清除控件 | _boolean_ | `true` |
+| cursor-spacing | 输入框聚焦时底部与键盘的距离 | _number_ | `0` |
+| disabled | 是否禁用输入框 | _boolean_ | `false` |
+| error | 是否将输入内容标红 | _boolean_ | `false` |
+| focus | 获取焦点 | _boolean_ | `false` |
+| input-align | 输入框内容对齐方式，可选值为 `center` `right` | _string_ | `left` |
+| label | 搜索框左侧文本 | _string_ | - |
+| left-icon | 输入框左侧图标名称或图片链接，可选值见 Icon 组件（如果设置了 use-left-icon-slot，则该属性无效） | _string_ | `search` |
+| maxlength | 最大输入长度，设置为 -1 的时候不限制最大长度 | _number_ | `-1` |
+| name | 在表单内提交时的标识符 | _string_ | - |
+| placeholder | 输入框为空时占位符 | _string_ | - |
+| placeholder-style | 指定占位符的样式 | _string_ | - |
+| readonly | 是否只读 | _boolean_ | `false` |
+| right-icon | 输入框右侧图标名称或图片链接，可选值见 Icon 组件（如果设置了 use-right-icon-slot，则该属性无效） | _string_ | - |
+| shape | 形状，可选值为 `round` | _string_ | `square` |
+| show-action | 是否在搜索框右侧显示取消按钮 | _boolean_ | `false` |
+| use-action-slot | 是否使用 action slot | _boolean_ | `false` |
+| use-left-icon-slot | 是否使用输入框左侧图标 slot | _boolean_ | `false` |
+| use-right-icon-slot | 是否使用输入框右侧图标 slot | _boolean_ | `false` |
+| value | 当前输入的值 | _string \| number_ | - |
+| search-text `v2.0.0` | 搜索按钮文字 | _string_ | - |
+
+### Events
+
+| 事件名           | 说明               | 参数                     |
+| ---------------- | ------------------ | ------------------------ |
+| bind:blur        | 输入框失焦时触发   | -                        |
+| bind:cancel      | 取消搜索搜索时触发 | -                        |
+| bind:change      | 输入内容变化时触发 | event.detail: 当前输入值 |
+| bind:clear       | 点击清空控件时触发 | -                        |
+| bind:click-input | 点击搜索区域时触发 | -                        |
+| bind:focus       | 输入框聚焦时触发   | -                        |
+| bind:search      | 确定搜索时触发     | event.detail: 当前输入值 |
+
+### Slot
+
+| 名称 | 说明 |
+| --- | --- |
+| action | 自定义搜索框右侧按钮，需要在`use-action-slot`为 true 时才会显示 |
+| label | 自定义搜索框左侧文本 |
+| left-icon | 自定义输入框左侧图标，需要在`use-left-icon-slot`为 true 时才会显示 |
+| right-icon | 自定义输入框右侧图标，需要在`use-right-icon-slot`为 true 时才会显示 |
+| search-button `v2.0.0` | 自定义搜索按钮 |
+
+### 外部样式类
+
+| 类名         | 说明           |
+| ------------ | -------------- |
+| cancel-class | 取消按钮样式类 |
+| custom-class | 根节点样式类   |
+| field-class  | 搜索框样式类   |
+| input-class  | 输入框样式类   |
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](/material/smartui?comId=config-provider&appType=miniapp)。
+
+| 名称 | 默认值 | 描述 |
+| --- | --- | --- |
+| --search-background-color | _var(--app-B3, #fff)_ | 搜索框背景颜色 |
+| --search-body-background-color | _var(--app-B4-N9,rgba(0,0,0,0.05))_ | 搜索内容背景颜色 |
+| --search-padding | _12px var(--padding-md, 16px)_ | 搜索框内边距 |
+| --search-input-height | _24px_ | 输入框高度 |
+| --search-label-padding | _0 5px_ | 标签内边距 |
+| --search-label-color | _var(--app-B4_N1, #000)_ | 标签文本颜色 |
+| --search-label-font-size | _var(--font-size-md)_ | 标签字体大小 |
+| --search-value-font-size | _var(--font-size-md)_ | 输入文字字体大小 |
+| --search-left-icon-color | _var(--app-B4_N4, rgba(0,0,0,0.4))_ | 左侧图标颜色 |
+| --search-action-padding | _0 var(--padding-md) 0 var(--padding-sm)_ | 操作按钮内边距 |
+| --search-action-text-color | _var(--app-B4_N3, rgba(0,0,0,0.5))_ | 操作按钮文本颜色 |
+| --search-action-font-size | _var(--font-size-md)_ | 操作按钮字体大小 |
+| --search-submit-font-size | _var(--font-size-md)_ | 提交按钮字体大小 |
+| --search-submit-color | _var(--app-M1, #3678e3)_ | 提交按钮颜色 |
+| --search-btn-hover-color | _var(--app-B4_N9, rgba(0,0,0,0.05))_ | 按钮悬停颜色 |
+| --search-submit-line-width | _1px_ | 提交按钮线宽度 |
+| --search-submit-line-height | _12px_ | 提交按钮线高度 |
+| --search-btn-hover-opacity | _0.4_ | 按钮悬停透明度 |

package/lib/sidebar/README.md

@@ -0,0 +1,160 @@
+---
+category: 导航
+---
+
+# Sidebar 侧边导航
+
+### 介绍
+
+垂直展示的导航栏，用于在不同的内容区域之间进行切换。
+
+### 引入
+
+在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](/material/smartui?comId=help-getting-started&appType=miniapp)。
+
+```json
+"usingComponents": {
+  "smart-sidebar": "@tuya-miniapp/smart-ui/lib/sidebar/index",
+  "smart-sidebar-item": "@tuya-miniapp/smart-ui/lib/sidebar-item/index"
+}
+```
+
+## 代码演示
+
+### 基础用法
+
+通过在`smart-sidebar`上设置`activeKey`属性来控制选中项。
+
+```html
+<smart-sidebar active-key="{{ activeKey }}">
+  <smart-sidebar-item title="标签名" />
+  <smart-sidebar-item title="标签名" />
+  <smart-sidebar-item title="标签名" />
+</smart-sidebar>
+```
+
+```javascript
+Page({
+  data: {
+    activeKey: 0,
+  },
+});
+```
+
+### 徽标提示
+
+设置`dot`属性后，会在右上角展示一个小红点。设置`badge`属性后，会在右上角展示相应的徽标。
+
+```html
+<smart-sidebar active-key="{{ activeKey }}">
+  <smart-sidebar-item title="标签名" dot />
+  <smart-sidebar-item title="标签名" badge="5" />
+  <smart-sidebar-item title="标签名" badge="99+" />
+</smart-sidebar>
+```
+
+### 禁用选项
+
+通过`disabled`属性禁用选项。
+
+```html
+<smart-sidebar active-key="{{ activeKey }}">
+  <smart-sidebar-item title="标签名" />
+  <smart-sidebar-item title="标签名" disabled />
+  <smart-sidebar-item title="标签名" />
+</smart-sidebar>
+```
+
+### 监听切换事件
+
+设置`change`方法来监听切换导航项时的事件。
+
+```html
+<smart-sidebar active-key="{{ activeKey }}" bind:change="onChange">
+  <smart-sidebar-item title="标签名 1" />
+  <smart-sidebar-item title="标签名 2" />
+  <smart-sidebar-item title="标签名 3" />
+</smart-sidebar>
+
+<smart-notify id="smart-notify" />
+```
+
+```js
+import Notify from '@tuya-miniapp/smart-ui/notify/notify';
+
+Page({
+  data: {
+    activeKey: 0,
+  },
+
+  onChange(event) {
+    Notify({ type: 'primary', message: event.detail });
+  },
+});
+```
+
+## API
+
+### Sidebar Props
+
+| 参数      | 说明         | 类型               | 默认值 |
+| --------- | ------------ | ------------------ | ------ |
+| activeKey | 选中项的索引 | _string \| number_ | `0`    |
+
+### Sidebar Event
+
+| 事件名 | 说明           | 参数               |
+| ------ | -------------- | ------------------ |
+| change | 切换徽章时触发 | 当前选中徽章的索引 |
+
+### Sidebar 外部样式类
+
+| 类名         | 说明         |
+| ------------ | ------------ |
+| custom-class | 根节点样式类 |
+
+### SidebarItem Props
+
+| 参数  | 说明                 | 类型      | 默认值  |
+| ----- | -------------------- | --------- | ------- |
+| dot   | 是否显示右上角小红点 | _boolean_ | `false` |
+| title | 内容                 | _string_  | `''`    |
+| badge | 图标右上角徽标的内容 | _string \| number_ | `''` |
+| disabled | 是否禁用该项 | _boolean_ | `false` |
+
+### SidebarItem Slot
+
+| 名称  | 说明                                        |
+| ----- | ------------------------------------------- |
+| title | 自定义标题栏，如果设置了`title`属性则不生效 |
+
+### SidebarItem Event
+
+| 事件名 | 说明           | 参数                            |
+| ------ | -------------- | ------------------------------- |
+| click  | 点击徽章时触发 | `event.detail` 为当前徽章的索引 |
+
+### SidebarItem 外部样式类
+
+| 类名         | 说明         |
+| ------------ | ------------ |
+| custom-class | 根节点样式类 |
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](/material/smartui?comId=config-provider&appType=miniapp)。
+
+| 名称                          | 默认值                                 | 描述 |
+| ----------------------------- | -------------------------------------- | ---- |
+| --sidebar-width               | _80px_                                 | 侧边栏宽度          |
+| --sidebar-font-size           | _14px_                                 | 侧边栏字体大小      |
+| --sidebar-line-height         | _20px_                                 | 侧边栏行高          |
+| --sidebar-text-color          | _var(--app-B6-N1, rgba(0, 0, 0, 1))_   | 侧边栏文本颜色      |
+| --sidebar-disabled-text-color | _var(--app-B6-N5, rgba(0, 0, 0, 0.3))_ | 禁用状态文本颜色    |
+| --sidebar-padding             | _20px @padding-sm 20px @padding-xs_    | 侧边栏内边距        |
+| --sidebar-active-color        | _var(--app-B6, #fff)_                  | 活动状态颜色        |
+| --sidebar-background-color    | _var(--app-B1, #f6f7fb)_               | 侧边栏背景颜色      |
+| --sidebar-selected-font-weight| _500_                                  | 选中状态字体粗细    |
+| --sidebar-selected-text-color | _var(--app-B6-N1, rgba(0, 0, 0, 1))_   | 选中状态文本颜色    |
+| --sidebar-selected-border-color| _#ee0a24_                             | 选中状态边框颜色    |
+| --sidebar-selected-background-color| _var(--app-B6, #fff)_             | 选中状态背景颜色    |

package/lib/skeleton/README.md

@@ -0,0 +1,98 @@
+---
+category: 展示
+---
+
+# Skeleton 骨架屏
+
+### 介绍
+
+用于在内容加载过程中展示一组占位图形。
+
+### 引入
+
+在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](/material/smartui?comId=help-getting-started&appType=miniapp)。
+
+```json
+"usingComponents": {
+  "smart-skeleton": "@tuya-miniapp/smart-ui/lib/skeleton/index"
+}
+```
+
+## 代码演示
+
+### 基础用法
+
+通过`title`属性显示标题占位图，通过`row`属性配置占位段落行数。
+
+```html
+<smart-skeleton title row="3" />
+```
+
+### 显示头像
+
+通过`avatar`属性显示头像占位图。
+
+```html
+<smart-skeleton title avatar row="3" />
+```
+
+### 展示子组件
+
+将`loading`属性设置成`false`表示内容加载完成，此时会隐藏占位图，并显示`Skeleton`的子组件。
+
+```html
+<smart-skeleton title avatar row="3" loading="{{ loading }}">
+  <view>实际内容</view>
+</smart-skeleton>
+```
+
+```js
+Page({
+  data: {
+    loading: true,
+  },
+  onReady() {
+    this.setData({
+      loading: false,
+    });
+  },
+});
+```
+
+## API
+
+### Props
+
+| 参数         | 说明                                        | 类型                 | 默认值  |
+| ------------ | ------------------------------------------- | -------------------- | ------- |
+| animate      | 是否开启动画                                | _boolean_            | `true`  |
+| avatar       | 是否显示头像占位图                          | _boolean_            | `false` |
+| avatar-shape | 头像占位图形状，可选值为`square`            | _string_             | `round` |
+| avatar-size  | 头像占位图大小                              | _string \| number_   | `32px`  |
+| loading      | 是否显示占位图，传`false`时会展示子组件内容 | _boolean_            | `true`  |
+| row          | 段落占位图行数                              | _number_             | `0`     |
+| row-width    | 段落占位图宽度，可传数组来设置每一行的宽度  | _string \| string[]_ | `100%`  |
+| title        | 是否显示标题占位图                          | _boolean_            | `false` |
+| title-width  | 标题占位图宽度                              | _string \| number_   | `40%`   |
+
+### 外部样式类
+
+| 类名         | 说明           |
+| ------------ | -------------- |
+| avatar-class | 头像占位样式类 |
+| custom-class | 根节点样式类   |
+| row-class    | 段落占位样式类 |
+| title-class  | 标题占位样式类 |
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](/material/smartui?comId=config-provider&appType=miniapp)。
+
+| 名称                          | 默认值                                 | 描述 |
+| ----------------------------- | -------------------------------------- | ---- |
+| --skeleton-padding            | _0 @padding-md_                        | 骨架屏内边距         |
+| --skeleton-row-height         | _16px_                                 | 骨架屏行高           |
+| --skeleton-row-background-color | _var(--app-B3, #ffffff)_             | 骨架屏行背景颜色     |
+| --skeleton-row-margin-top     | _12px_                                 | 骨架屏行上边距       |
+| --skeleton-avatar-background-color | _var(--app-B3, #ffffff)_          | 骨架屏头像背景颜色   |
+| --skeleton-animation-duration | _1.2s_                                 | 动画持续时间         |