@tuya-miniapp/smart-ui 2.3.8-beta-4 → 2.3.8-beta-5

package/packages/rate/test/demo.spec.ts

@@ -0,0 +1,11 @@
+import path from 'path';
+import simulate from 'miniprogram-simulate';
+
+test('should render demo and match snapshot', () => {
+  const id = simulate.load(path.resolve(__dirname, '../demo/index'), {
+    rootPath: path.resolve(__dirname, '../../'),
+  });
+  const comp = simulate.render(id);
+  comp.attach(document.createElement('parent-wrapper'));
+  expect(comp.toJSON()).toMatchSnapshot();
+});

package/packages/row/index.json

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

package/packages/row/index.less

@@ -0,0 +1,7 @@
+.smart-row {
+  &::after {
+    display: table;
+    clear: both;
+    content: '';
+  }
+}

package/packages/row/index.ts

@@ -0,0 +1,27 @@
+import { SmartComponent } from '../common/component';
+import { useChildren } from '../common/relation';
+
+SmartComponent({
+  relation: useChildren('col', function (target) {
+    const { gutter } = this.data;
+
+    if (gutter) {
+      target.setData({ gutter });
+    }
+  }),
+
+  props: {
+    gutter: {
+      type: Number,
+      observer: 'setGutter',
+    },
+  },
+
+  methods: {
+    setGutter() {
+      this.children.forEach(col => {
+        col.setData(this.data);
+      });
+    },
+  },
+});

package/packages/row/index.wxml

@@ -0,0 +1,5 @@
+<wxs src="./index.wxs" module="computed" />
+
+<view class="smart-row custom-class" style="{{ computed.rootStyle({ gutter }) }}">
+  <slot />
+</view>

package/packages/row/index.wxs

@@ -0,0 +1,18 @@
+/* eslint-disable */
+var style = require('../wxs/style.wxs');
+var addUnit = require('../wxs/add-unit.wxs');
+
+function rootStyle(data) {
+  if (!data.gutter) {
+    return '';
+  }
+
+  return style({
+    'margin-right': addUnit(-data.gutter / 2),
+    'margin-left': addUnit(-data.gutter / 2),
+  });
+}
+
+module.exports = {
+  rootStyle: rootStyle,
+};

package/packages/search/README.en.md

@@ -0,0 +1,236 @@
+---
+category: Data Entry
+---
+
+# Search
+
+### Introduction
+
+An input box component for search scenarios.
+
+### Import
+
+Import the component in `app.json` or `index.json`. For detailed introduction, see [Quick Start](/material/smartui?comId=help-getting-started&appType=miniapp).
+
+```json
+"usingComponents": {
+  "smart-search": "@tuya-miniapp/smart-ui/lib/search/index"
+}
+```
+
+## Code Demonstration
+
+### Basic Usage
+
+In `smart-search`, value is used to control the text in the search box.
+
+```html
+<smart-search value="{{ value }}" placeholder="Please enter search keywords" />
+```
+
+
+### Simple style
+
+In `smart-search`, value is used to control the text in the search box. Background can be adjusted via css variables.
+
+```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="Search"
+  placeholder="Please enter search keywords"
+  bind:search="onSearch"
+/>
+```
+
+
+
+### Event Listening
+
+`smart-search` provides search and cancel events. The search event is triggered when the user clicks the search button on the keyboard. The cancel event is triggered when the user clicks the cancel button on the right side of the search box.
+
+```html
+<smart-search
+  value="{{ value }}"
+  placeholder="Please enter search keywords"
+  show-action
+  search-text="Search"
+  action-text="cancel"
+  bind:search="onSearch"
+  bind:cancel="onCancel"
+  bind:clear="onClear"
+/>
+```
+
+### Search Box Content Alignment
+
+The `input-align` attribute can set the alignment of the content in the search box.
+
+```html
+<smart-search
+  value="{{ value }}"
+  input-align="center"
+  placeholder="Please enter search keywords"
+/>
+```
+
+### Disable Search Box
+
+The `disabled` attribute can set the component to a disabled state.
+
+```html
+<smart-search disabled value="{{ value }}" placeholder="Please enter search keywords" />
+```
+
+### Custom Button
+
+`smart-search` supports customizing the cancel button on the right, using a slot named action, and setting use-action-slot to true.
+
+```html
+<smart-search
+  value="{{ value }}"
+  label="Address"
+  shape="round"
+  placeholder="Please enter search keywords"
+  use-action-slot
+  bind:change="onChange"
+  bind:search="onSearch"
+>
+  <view slot="action" bind:tap="onClick">Search</view>
+</smart-search>
+
+<smart-search
+    value="{{ value }}"
+    shape="round"
+    placeholder="Please enter search keywords"
+    bind:search="onSearch"
+    bind:change="onChange"
+  >
+    <view slot="search-button" bind:tap="onClick">Search</view>
+    <view slot="label">Address<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('Search ' + this.data.value);
+  },
+  onClick() {
+    Toast('Search ' + this.data.value);
+  },
+});
+```
+
+## API
+
+### Props
+
+| Parameter             | Description                                                                                                                                                   | Type               | Default  |
+| --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ | -------- |
+| action-text   | Cancel button text                                                                                                                                            | _string_           | `Cancel` |
+| background            | Background color of the search box                                                                                                                            | _string_           | `#f2f2f2`|
+| clear-icon  | Clear [icon](/material/smartui?comId=icon&appType=miniapp) or image link                                                                                                                       | _string_           | `close`  |
+| clear-trigger | When to show the clear icon, `always` means displayed when the input box is not empty, <br>`focus` means displayed when the input box is focused and not empty | _string_           | `focus`  |
+| clearable             | Whether to enable the clear control                                                                                                                           | _boolean_          | `true`   |
+| cursor-spacing        | The distance between the bottom of the input box and the keyboard when it is focused                                                                          | _number_           | `0`      |
+| disabled              | Whether to disable the input box                                                                                                                              | _boolean_          | `false`  |
+| error                 | Whether to mark the input content in red                                                                                                                      | _boolean_          | `false`  |
+| focus                 | Autofocus                                                                                                                                                     | _boolean_          | `false`  |
+| input-align           | Input box content alignment, optional values are `center` `right`                                                                                             | _string_           | `left`   |
+| label                 | Text on the left side of the search box                                                                                                                       | _string_           | -        |
+| left-icon             | Icon name or image link on the left side of the input box. Optional values are in the Icon component (ineffective if use-left-icon-slot is set)              | _string_           | `search` |
+| maxlength             | Maximum input length, setting to -1 means no limit                                                                                                            | _number_           | `-1`     |
+| name                  | Identifier when submitting within a form                                                                                                                      | _string_           | -        |
+| placeholder           | Placeholder when the input box is empty                                                                                                                       | _string_           | -        |
+| placeholder-style     | Style of the placeholder                                                                                                                                      | _string_           | -        |
+| readonly              | Read-only                                                                                                                                                     | _boolean_          | `false`  |
+| right-icon            | Icon name or image link on the right side of the input box. Optional values are in the Icon component (ineffective if use-right-icon-slot is set)            | _string_           | -        |
+| shape                 | Shape, optional value is `round`                                                                                                                              | _string_           | `square` |
+| show-action           | Whether to show the cancel button on the right side of the search box                                                                                         | _boolean_          | `false`  |
+| use-action-slot       | Whether to use action slot                                                                                                                                    | _boolean_          | `false`  |
+| use-left-icon-slot    | Whether to use the icon slot on the left side of the input box                                                                                                | _boolean_          | `false`  |
+| use-right-icon-slot   | Whether to use the icon slot on the right side of the input box                                                                                               | _boolean_          | `false`  |
+| value                 | Current input value                                                                                                                                           | _string \| number_ | -        |
+| search-text `v2.0.0`       | Search button text                                                                                     | _string_ | -         |
+
+### Events
+
+| Event Name        | Description                  | Parameters                   |
+| ----------------- | ---------------------------- | ---------------------------- |
+| bind:blur         | Triggered when input loses focus   | -                              |
+| bind:cancel       | Triggered when search is canceled | -                              |
+| bind:change       | Triggered when input content changes | event.detail: Current input value |
+| bind:clear        | Triggered when clear control is clicked | -                              |
+| bind:click-input  | Triggered when search area is clicked | -                              |
+| bind:focus        | Triggered when input is focused   | -                              |
+| bind:search       | Triggered when search is confirmed | event.detail: Current input value |
+
+### Slot
+
+| Name        | Description                                                                       |
+| ----------- | --------------------------------------------------------------------------------- |
+| action      | Custom button on the right side of the search box, shown only when `use-action-slot` is true |
+| label       | Custom text on the left side of the search box                                    |
+| left-icon   | Custom icon on the left side of the input box, shown only when `use-left-icon-slot` is true  |
+| right-icon  | Custom icon on the right side of the input box, shown only when `use-right-icon-slot` is true |
+| search-button `v2.0.0` | Custom search button |
+
+### External Style Classes
+
+| Class Name    | Description      |
+| ------------- | ---------------- |
+| cancel-class  | Cancel button style class |
+| custom-class  | Root node style class |
+| field-class   | Search box style class |
+| input-class   | Input box style class  |
+
+
+### Style Variables
+
+The component provides the following CSS variables for custom styles. Refer to the [ConfigProvider component](/material/smartui?comId=config-provider&appType=miniapp) for usage instructions.
+
+| Name | Default Value | Description |
+| --- | --- | --- |
+| --search-background-color | _var(--app-B3, #fff)_ | Search box background color |
+| --search-body-background-color | _var(--app-B4-N9,rgba(0,0,0,0.05))_ | Search content background color |
+| --search-padding | _12px var(--padding-md, 16px)_ | Search box padding |
+| --search-input-height | _24px_ | Input box height |
+| --search-label-padding | _0 5px_ | Label padding |
+| --search-label-color | _var(--app-B4_N1, #000)_ | Label text color |
+| --search-label-font-size | _var(--font-size-md)_ | Label font size |
+| --search-value-font-size | _var(--font-size-md)_ | Input text font size |
+| --search-left-icon-color | _var(--app-B4_N4, rgba(0,0,0,0.4))_ | Left icon color |
+| --search-action-padding | _0 var(--padding-md) 0 var(--padding-sm)_ | Action button padding |
+| --search-action-text-color | _var(--app-B4_N3, rgba(0,0,0,0.5))_ | Action button text color |
+| --search-action-font-size | _var(--font-size-md)_ | Action button font size |
+| --search-submit-font-size | _var(--font-size-md)_ | Submit button font size |
+| --search-submit-color | _var(--app-M1, #3678e3)_ | Submit button color |
+| --search-btn-hover-color | _var(--app-B4_N9, rgba(0,0,0,0.05))_ | Button hover color |
+| --search-submit-line-width | _1px_ | Submit button line width |
+| --search-submit-line-height | _12px_ | Submit button line height |
+| --search-btn-hover-opacity | _0.4_ | Button hover opacity |

package/packages/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/packages/search/demo/index.json

@@ -0,0 +1,8 @@
+{
+  "component": true,
+  "usingComponents": {
+    "smart-search": "../../search/index",
+    "smart-icon": "../../icon/index",
+    "demo-block": "../../../example/components/demo-block/index"
+  }
+}

package/packages/search/demo/index.less

@@ -0,0 +1,11 @@
+.easy-demo {
+    --search-background-color: transparent;
+    --search-body-background-color: var(--app-B3, #fff);
+  }
+  .searchBtn {
+    padding: 0 16px;
+  }
+  .icon {
+    margin: 0 8px 0 4px;
+  }
+  

package/packages/search/demo/index.ts

@@ -0,0 +1,49 @@
+import { SmartComponent } from '../../common/component';
+import TriangleDown from '@tuya-miniapp/icons/dist/svg/TriangleDown';
+
+SmartComponent({
+  data: {
+    value: '',
+    icon: TriangleDown,
+  },
+
+  methods: {
+    onChange(e) {
+      this.setData({
+        value: e.detail,
+      });
+    },
+
+    onSearch(event) {
+      if (event.detail) {
+        wx.showToast({
+          title: I18n.t('searchText') + ': ' + event.detail,
+          icon: 'none',
+        });
+      }
+    },
+
+    onClick() {
+      if (this.data.value) {
+        wx.showToast({
+          title: I18n.t('searchText') + ': ' + this.data.value,
+          icon: 'none',
+        });
+      }
+    },
+
+    onCancel() {
+      wx.showToast({
+        title: I18n.t('cancel'),
+        icon: 'none',
+      });
+    },
+
+    onClear() {
+      wx.showToast({
+        title: I18n.t('clear'),
+        icon: 'none',
+      });
+    },
+  },
+});