feat(search): 新增自动完成项预览列表. (#2432) (#2520)

* feat(search): 新增自动完成项预览列表. (#2432) fix #2432 * fix(search): 更新快照. (#2432) fix #2432 * test: update snapshots * fix(search): 预览效果优化. (#2432) * fix: fix cr * chore: update api docs * test: update snapshots --------- Co-authored-by: anlyyao <[email protected]>
Tencent · Jul 1, 2024 · c38a1f8 · c38a1f8
1 parent dfdcc5e
commit c38a1f8
Show file tree

Hide file tree

Showing 17 changed files with 350 additions and 224 deletions.
diff --git a/example/app.less b/example/app.less
diff --git a/src/input/__test__/demo.test.js b/src/input/__test__/demo.test.js
@@ -5,21 +5,7 @@
 import path from 'path';
 import simulate from 'miniprogram-simulate';
 
-const mapper = [
-  'align',
-  'banner',
-  'base',
-  'bordered',
-  'custom',
-  'label',
-  'layout',
-  'maxlength',
-  'prefix',
-  'size',
-  'special',
-  'status',
-  'suffix',
-];
+const mapper = ['align', 'banner', 'base', 'bordered', 'custom', 'label', 'layout', 'maxlength', 'prefix', 'size', 'special', 'status', 'suffix'];
 
 describe('Input', () => {
   mapper.forEach((demoName) => {

diff --git a/src/rate/__test__/demo.test.js b/src/rate/__test__/demo.test.js
@@ -5,18 +5,7 @@
 import path from 'path';
 import simulate from 'miniprogram-simulate';
 
-const mapper = [
-  'action',
-  'base',
-  'color',
-  'count',
-  'custom',
-  'custom-prefix',
-  'show-text',
-  'size',
-  'special',
-  'un-filled',
-];
+const mapper = ['action', 'base', 'color', 'count', 'custom', 'custom-prefix', 'show-text', 'size', 'special', 'un-filled'];
 
 describe('Rate', () => {
   mapper.forEach((demoName) => {

diff --git a/src/search/README.en-US.md b/src/search/README.en-US.md
@@ -1,6 +1,62 @@
 
+## API
+
+### Search Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+style | Object | - | CSS(Cascading Style Sheets) | N
+custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N
+action | String / Slot | '' | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
+adjust-position | Boolean | true | \- | N
+always-embed | Boolean | false | \- | N
+center | Boolean | false | \- | N
+clearable | Boolean | true | \- | N
+confirm-hold | Boolean | false | \- | N
+confirm-type | String | search | options: send/search/next/go/done | N
+cursor | Number | - | required | Y
+cursor-spacing | Number | 0 | \- | N
+disabled | Boolean | false | \- | N
+focus | Boolean | false | \- | N
+hold-keyboard | Boolean | false | \- | N
+label | String | '' | `deprecated` | N
+left-icon | String / Slot | 'search' | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
+maxcharacter | Number | - | \- | N
+maxlength | Number | -1 | \- | N
+placeholder | String | '' | \- | N
+placeholder-class | String | input-placeholder | \- | N
+placeholder-style | String | - | required | Y
+result-list | Array | [] | Typescript：`Array<string>` | N
+right-icon | String / Slot | 'close-circle-filled' | `deprecated`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
+selection-end | Number | -1 | \- | N
+selection-start | Number | -1 | \- | N
+shape | String | 'square' | options: square/round | N
+type | String | 'text' | options: text/number/idcard/digit/nickname | N
+value | String | '' | \- | N
+
+### Search Events
+
+name | params | description
+-- | -- | --
+action-click | `({})` | \-
+blur | `({ value: string })` | \-
+change | `({ value: string })` | \-
+clear | `({ value: string })` | \-
+focus | `({ value: string })` | \-
+submit | `({ value: string })` | \-
+### Search External Classes
+
+className | Description
+-- | --
+t-class | \-
+t-class-action | \-
+t-class-clear | \-
+t-class-input | \-
+t-class-input-container | \-
+t-class-left | \-
 
 ### CSS Variables
+
 The component provides the following CSS variables, which can be used to customize styles.
 Name | Default Value | Description 
 -- | -- | --
@@ -14,4 +70,4 @@ Name | Default Value | Description
 --td-search-padding | 16rpx 24rpx | - 
 --td-search-placeholder-color | @font-gray-3 | - 
 --td-search-square-radius | @radius-default | - 
---td-search-text-color | @font-gray-1 | - 
+--td-search-text-color | @font-gray-1 | -
diff --git a/src/search/README.md b/src/search/README.md
@@ -47,35 +47,39 @@ isComponent: true
 {{ other }}
 
 ## API
+
 ### Search Props
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
-action | String / Slot | '' | 自定义右侧操作按钮文字 | N
+style | Object | - | 样式 | N
+custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N
+action | String / Slot | '' | 自定义右侧操作按钮文字。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
+adjust-position | Boolean | true | 键盘弹起时，是否自动上推页面 | N
+always-embed | Boolean | false | 强制 input 处于同层状态，默认 focus 时 input 会切到非同层状态 (仅在 iOS 下生效) | N
 center | Boolean | false | 是否居中 | N
-disabled | Boolean | false | 是否禁用 | N
+clearable | Boolean | true | 是否启用清除控件 | N
+confirm-hold | Boolean | false | 点击键盘右下角按钮时是否保持键盘不收起 | N
+confirm-type | String | search | 设置键盘右下角按钮的文字，仅在type='text'时生效。<br />具体释义：<br />`send` 右下角按钮为“发送”；<br />`search` 右下角按钮为“搜索”；<br />`next` 右下角按钮为“下一个”；<br />`go` 右下角按钮为“前往”；<br />`done` 右下角按钮为“完成”。<br />[小程序官方文档](https://developers.weixin.qq.com/miniprogram/dev/component/input.html)。可选项：send/search/next/go/done | N
+cursor | Number | - | 必需。指定 focus 时的光标位置 | Y
 cursor-spacing | Number | 0 | 搜索框聚焦时底部与键盘的距离 | N
+disabled | Boolean | false | 是否禁用 | N
 focus | Boolean | false | 是否聚焦 | N
+hold-keyboard | Boolean | false | focus时，点击页面的时候不收起键盘 | N
 label | String | '' | 已废弃。左侧文本 | N
+left-icon | String / Slot | 'search' | 左侧图标。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
 maxcharacter | Number | - | 用户最多可以输入的字符个数，一个中文汉字表示两个字符长度。`maxcharacter` 和 `maxlength` 二选一使用 | N
 maxlength | Number | -1 | 用户最多可以输入的文本长度，一个中文等于一个计数长度。默认为 -1，不限制输入长度。`maxcharacter` 和 `maxlength` 二选一使用 | N
-confirm-type | String | search | 设置键盘右下角按钮的文字，仅在type='text'时生效。<br />具体释义：<br />`send` 右下角按钮为“发送”；<br />`search` 右下角按钮为“搜索”；<br />`next` 右下角按钮为“下一个”；<br />`go` 右下角按钮为“前往”；<br />`done` 右下角按钮为“完成”。<br />[小程序官方文档](https://developers.weixin.qq.com/miniprogram/dev/component/input.html)。可选项：send/search/next/go/done | N
-always-embed | Boolean | false | 强制 input 处于同层状态，默认 focus 时 input 会切到非同层状态 (仅在 iOS 下生效) | N
-confirm-hold | Boolean | false | 点击键盘右下角按钮时是否保持键盘不收起 | N
-cursor | Number | - | 必需。指定 focus 时的光标位置 | Y
-selection-start | Number | -1 | 光标起始位置，自动聚集时有效，需与 selection-end 搭配使用 | N
-selection-end | Number | -1 | 光标结束位置，自动聚集时有效，需与 selection-start 搭配使用 | N
-adjust-position | Boolean | true | 键盘弹起时，是否自动上推页面 | N
-hold-keyboard | Boolean | false | focus时，点击页面的时候不收起键盘 | N
-placeholder-style | String | - | 必需。指定 placeholder 的样式 | Y
-placeholder-class | String | input-placeholder | 指定 placeholder 的样式类 | N
-left-icon | String / Slot | 'search' | 左侧图标 | N
 placeholder | String | '' | 占位符 | N
-right-icon | String / Slot | 'close-circle-filled' | 已废弃。右侧图标 | N
-clearable | Boolean | true | 是否启用清除控件 | N
+placeholder-class | String | input-placeholder | 指定 placeholder 的样式类 | N
+placeholder-style | String | - | 必需。指定 placeholder 的样式 | Y
+result-list | Array | [] | 预览结果列表。TS 类型：`Array<string>` | N
+right-icon | String / Slot | 'close-circle-filled' | 已废弃。右侧图标。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
+selection-end | Number | -1 | 光标结束位置，自动聚集时有效，需与 selection-start 搭配使用 | N
+selection-start | Number | -1 | 光标起始位置，自动聚集时有效，需与 selection-end 搭配使用 | N
 shape | String | 'square' | 搜索框形状。可选项：square/round | N
+type | String | 'text' | 拉起键盘的类型。可选项：text/number/idcard/digit/nickname | N
 value | String | '' | 值 | N
-type | String | 'text' | 拉起键盘的类型，可选项：text/number/idcard/digit/nickname | N
 
 ### Search Events
 
@@ -87,18 +91,19 @@ change | `({ value: string })` | 值发生变化时触发
 clear | `({ value: string })` | 点击清除时触发
 focus | `({ value: string })` | 聚焦时触发
 submit | `({ value: string })` | 提交时触发
+### Search External Classes
 
-### Search 外部样式类
-类名 | 说明
--- | -- 
+类名 | 描述
+-- | --
 t-class | 根节点样式类
-t-class-input-container | 输入框容器样式类
-t-class-input | 输入框样式类
 t-class-action | 操作按钮样式类
-t-class-left | 左侧图标样式类
 t-class-clear | 右侧图标样式类
+t-class-input | 输入框样式类
+t-class-input-container | 输入框容器样式类
+t-class-left | 左侧图标样式类
+
+### CSS Variables
 
-### CSS 变量
 组件提供了下列 CSS 变量，可用于自定义样式。
 名称 | 默认值 | 描述 
 -- | -- | --
@@ -111,5 +116,6 @@ t-class-clear | 右侧图标样式类
 --td-search-label-color | @font-gray-1 | - 
 --td-search-padding | 16rpx 24rpx | - 
 --td-search-placeholder-color | @font-gray-3 | - 
+--td-search-result-high-light-color | @brand-color | -
 --td-search-square-radius | @radius-default | - 
---td-search-text-color | @font-gray-1 | - 
+--td-search-text-color | @font-gray-1 | -
diff --git a/src/search/__test__/__snapshots__/demo.test.js.snap b/src/search/__test__/__snapshots__/demo.test.js.snap
@@ -26,7 +26,15 @@ exports[`Search Search base demo works fine 1`] = `
   >
     <t-search
       placeholder="搜索预设文案"
-      value=""
+    />
+  </wx-view>
+  <wx-view
+    class="example-search"
+  >
+    <t-search
+      placeholder="输入tdesign，有预览结果"
+      resultList="{{Array []}}"
+      bind:change="onChangeValue"
     />
   </wx-view>
 </base>

diff --git a/src/search/__test__/__snapshots__/index.test.js.snap b/src/search/__test__/__snapshots__/index.test.js.snap
@@ -42,7 +42,7 @@ exports[`search Props :base 1`] = `
           maxlength="{{-1}}"
           name="input"
           placeholder=""
-          placeholderClass=" t-search__placeholder t-search__placeholder--normal"
+          placeholderClass="input-placeholder t-search__placeholder t-search__placeholder--normal"
           placeholderStyle=""
           selectionEnd="{{-1}}"
           selectionStart="{{-1}}"

diff --git a/src/search/_example/base/index.js b/src/search/_example/base/index.js
@@ -1,5 +1,22 @@
 Component({
   data: {
     value: '',
+    resultList: [],
+  },
+  methods: {
+    onChangeValue(e) {
+      const { value } = e.detail;
+      const list = [
+        'tdesign-vue',
+        'tdesign-react',
+        'tdesign-miniprogram',
+        'tdesign-angular',
+        'tdesign-mobile-vue',
+        'tdesign-mobile-react',
+      ];
+      this.setData({
+        resultList: value ? list.filter((v) => v.includes(value)) : [],
+      });
+    },
   },
 });
diff --git a/src/search/_example/base/index.wxml b/src/search/_example/base/index.wxml
@@ -1,3 +1,7 @@
 <view class="example-search">
-  <t-search model:value="{{value}}" placeholder="搜索预设文案" />
+  <t-search placeholder="搜索预设文案" />
+</view>
+
+<view class="example-search">
+  <t-search placeholder="输入tdesign，有预览结果" resultList="{{resultList}}" bind:change="onChangeValue" />
 </view>
diff --git a/src/search/_example/base/index.wxss b/src/search/_example/base/index.wxss
@@ -2,3 +2,7 @@
   background-color: var(--bg-color-demo);
   padding: 16rpx 32rpx;
 }
+
+.example-search:not(:last-child) {
+  margin-bottom: 32rpx;
+}