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

src/fab/__test__/__snapshots__/demo.test.js.snap

@@ -25,3 +25,16 @@ exports[`Fab Fab base demo works fine 1`] = `
   />
 </base>
 `;
+
+exports[`Fab Fab draggable demo works fine 1`] = `
+<draggable>
+  <t-fab
+    ariaLabel="增加"
+    draggable="{{true}}"
+    icon="gesture-press"
+    text="拖我"
+    bind:click="handleClick"
+    bind:move="handleMove"
+  />
+</draggable>
+`;

src/fab/__test__/demo.test.js

@@ -5,7 +5,7 @@
 import path from 'path';
 import simulate from 'miniprogram-simulate';
 
-const mapper = ['advance', 'base'];
+const mapper = ['advance', 'base', 'draggable'];
 
 describe('Fab', () => {
   mapper.forEach((demoName) => {

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) => {

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) => {

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="搜索预设文案，输入有预览结果"
+      resultList="{{Array []}}"
+      bind:change="onChangeValue"
     />
   </wx-view>
 </base>

src/search/__test__/__snapshots__/index.test.js.snap

@@ -64,6 +64,10 @@ exports[`search Props :base 1`] = `
 
       </wx-view>
     </wx-view>
+    <wx-view
+      ariaRole="listbox"
+      class="t-search__result-list"
+    />
   </t-search>
 </main>
 `;

src/search/_example/base/index.js

@@ -1,5 +1,19 @@
 Component({
   data: {
     value: '',
+    resultList: [],
+  },
+  methods: {
+    onChangeValue(e) {
+      const { value } = e.detail;
+
+      this.setData({
+        resultList: value
+          ? Array.from({ length: 3 }).map((v, i) => {
+              return `预览结果：${i}`;
+            })
+          : [],
+      });
+    },
   },
 });

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="搜索预设文案，输入有预览结果" resultList="{{resultList}}" bind:change="onChangeValue" />
 </view>

src/search/_example/base/index.wxss

@@ -2,3 +2,7 @@
   background-color: #fff;
   padding: 16rpx 32rpx;
 }
+
+.example-search:not(:last-child) {
+  margin-bottom: 32rpx;
+}

src/search/props.ts

@@ -6,6 +6,11 @@
 
 import { TdSearchProps } from './type';
 const props: TdSearchProps = {
+  /** 预览结果列表 */
+  resultList: {
+    type: Array,
+    value: [],
+  },
   /** 自定义右侧操作按钮文字 */
   action: {
     type: String,

src/search/search.less

@@ -84,4 +84,23 @@
       text-align: center;
     }
   }
+  &__result-item {
+    padding: 30rpx;
+    position: relative;
+    display: flex;
+    align-items: center;
+    font-size: 34rpx;
+    color: rgba(0, 0, 0, 0.55);
+    position: relative;
+    &:not(:last-child)::after {
+      content: '';
+      position: absolute;
+      left: 0;
+      bottom: 0;
+      right: 0;
+      height: 1rpx;
+      z-index: 2;
+      background-color: rgba(0, 0, 0, 0.1);
+    }
+  }
 }

src/search/search.ts

@@ -59,6 +59,7 @@ export default class Search extends SuperComponent {
   handleClear() {
     this.setData({ value: '' });
     this.triggerEvent('clear', { value: '' });
+    this.triggerEvent('change', { value: '' });
   }
 
   onConfirm(e) {
@@ -69,4 +70,14 @@ export default class Search extends SuperComponent {
   onActionClick() {
     this.triggerEvent('action-click');
   }
+
+  selectResultItem(e) {
+    const { index } = e.currentTarget.dataset
+    const item = this.properties.resultList[index]
+    this.setData({
+      value: item
+    })
+    this.triggerEvent('change', { value: item });
+    this.triggerEvent('selectresult', { index, item })
+  }
 }

src/search/search.wxml

@@ -59,3 +59,12 @@
   </view>
   <slot name="action" />
 </view>
+<view class="{{classPrefix}}__result-list" aria-role="listbox">
+  <view
+    wx:for="{{resultList}}"
+    wx:key="{{index}}"
+    data-index="{{index}}"
+    class="{{classPrefix}}__result-item"
+    bind:tap="selectResultItem"
+    aria-role="option">{{item}}</view>
+</view>

src/search/type.ts

@@ -5,6 +5,10 @@
  * */
 
 export interface TdSearchProps {
+  resultList: {
+    type: ArrayConstructor;
+    value?: [];
+  };
   /**
    * 自定义组件样式
    * @default ''