feat(search): add readonly & clear-trigger props (#3430)

* feat(search): add readonly & clear-trigger for search

* feat(search): add readme and tpyes

---------

Co-authored-by: xinzzzhang <spacecave>

Author: spacecave

src/search/README.en-US.md

@@ -11,6 +11,7 @@ action | String / Slot | '' | [see more ts definition](https://github.com/Tencen
 adjust-position | Boolean | true | \- | N
 always-embed | Boolean | false | \- | N
 center | Boolean | false | \- | N
+clear-trigger | String | 'always' | Clear icon trigger, effective only when the input has a value. 。options: always/focus | N
 clearable | Boolean | true | \- | N
 confirm-hold | Boolean | false | \- | N
 confirm-type | String | search | options: send/search/next/go/done | N
@@ -21,11 +22,12 @@ 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
+maxcharacter | Number | - | The maximum number of characters that the user can enter. One Chinese character represents two characters in length. Use either `maxcharacter` or `maxlength` | N
 maxlength | Number | -1 | \- | N
 placeholder | String | '' | \- | N
 placeholder-class | String | input-placeholder | \- | N
 placeholder-style | String | - | required | Y
+readonly | Boolean | false | If readonly the input | N
 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
@@ -44,6 +46,7 @@ change | `({ value: string })` | \-
 clear | `({ value: string })` | \-
 focus | `({ value: string })` | \-
 submit | `({ value: string })` | \-
+
 ### Search External Classes
 
 className | Description
@@ -73,4 +76,4 @@ Name | Default Value | Description
 --td-search-placeholder-color | @text-color-placeholder | - 
 --td-search-result-high-light-color | @brand-color | - 
 --td-search-square-radius | @radius-default | - 
---td-search-text-color | @text-color-primary | - 
+--td-search-text-color | @text-color-primary | -

src/search/README.md

@@ -59,6 +59,7 @@ action | String / Slot | '' | 自定义右侧操作按钮文字。[通用类型
 adjust-position | Boolean | true | 键盘弹起时，是否自动上推页面 | N
 always-embed | Boolean | false | 强制 input 处于同层状态，默认 focus 时 input 会切到非同层状态 (仅在 iOS 下生效) | N
 center | Boolean | false | 是否居中 | N
+clear-trigger | String | 'always' | 清空图标触发方式，仅在输入框有值时有效。。可选项：always/focus | 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
@@ -74,6 +75,7 @@ maxlength | Number | -1 | 用户最多可以输入的文本长度，一个中文
 placeholder | String | '' | 占位符 | N
 placeholder-class | String | input-placeholder | 指定 placeholder 的样式类 | N
 placeholder-style | String | - | 必需。指定 placeholder 的样式 | Y
+readonly | Boolean | false | 只读模式 | N
 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
@@ -92,6 +94,7 @@ change | `({ value: string })` | 值发生变化时触发
 clear | `({ value: string })` | 点击清除时触发
 focus | `({ value: string })` | 聚焦时触发
 submit | `({ value: string })` | 提交时触发
+
 ### Search External Classes
 
 类名 | 描述
@@ -121,4 +124,4 @@ t-class-left | 左侧图标样式类
 --td-search-placeholder-color | @text-color-placeholder | - 
 --td-search-result-high-light-color | @brand-color | - 
 --td-search-square-radius | @radius-default | - 
---td-search-text-color | @text-color-primary | - 
+--td-search-text-color | @text-color-primary | -

src/search/props.ts

@@ -26,6 +26,11 @@ const props: TdSearchProps = {
     type: Boolean,
     value: false,
   },
+  /** 清空图标触发方式，仅在输入框有值时有效。 */
+  clearTrigger: {
+    type: String,
+    value: 'always',
+  },
   /** 是否启用清除控件 */
   clearable: {
     type: Boolean,
@@ -96,6 +101,11 @@ const props: TdSearchProps = {
     value: '',
     required: true,
   },
+  /** 只读模式 */
+  readonly: {
+    type: Boolean,
+    value: false,
+  },
   /** 预览结果列表 */
   resultList: {
     type: Array,

src/search/search.ts

@@ -44,15 +44,28 @@ export default class Search extends SuperComponent {
         });
       }
     },
+    'clearTrigger, clearable, disabled, readonly'() {
+      this.updateClearIconVisible();
+    },
   };
 
   data = {
     classPrefix: name,
     prefix,
     isShowResultList: false,
     isSelected: false,
+    showClearIcon: true,
   };
 
+  updateClearIconVisible(value: boolean = false) {
+    const { clearTrigger, disabled, readonly } = this.properties;
+    if (disabled || readonly) {
+      this.setData({ showClearIcon: false });
+      return;
+    }
+    this.setData({ showClearIcon: value || String(clearTrigger) === 'always' });
+  }
+
   onInput(e) {
     let { value } = e.detail;
     const { maxcharacter } = this.properties;
@@ -71,13 +84,13 @@ export default class Search extends SuperComponent {
 
   onFocus(e) {
     const { value } = e.detail;
-
+    this.updateClearIconVisible(true);
     this.triggerEvent('focus', { value });
   }
 
   onBlur(e) {
     const { value } = e.detail;
-
+    this.updateClearIconVisible();
     this.triggerEvent('blur', { value });
   }
 

src/search/search.wxml

@@ -19,7 +19,7 @@
       type="{{type}}"
       name="input"
       maxlength="{{maxlength}}"
-      disabled="{{disabled}}"
+      disabled="{{disabled || readonly}}"
       class="{{prefix}}-input__keyword {{prefix}}-class-input"
       focus="{{focus}}"
       value="{{value}}"
@@ -41,7 +41,7 @@
       bind:confirm="onConfirm"
     />
     <view
-      wx:if="{{value !=='' && clearable}}"
+      wx:if="{{value !=='' && clearable && showClearIcon}}"
       class="{{classPrefix}}__clear {{prefix}}-class-clear"
       catch:tap="handleClear"
       aria-role="button"

src/search/type.ts

@@ -37,6 +37,14 @@ export interface TdSearchProps {
     type: BooleanConstructor;
     value?: boolean;
   };
+  /**
+   * 清空图标触发方式，仅在输入框有值时有效。
+   * @default 'always'
+   */
+  clearTrigger?: {
+    type: StringConstructor;
+    value?: 'always' | 'focus';
+  };
   /**
    * 是否启用清除控件
    * @default true
@@ -149,6 +157,14 @@ export interface TdSearchProps {
     value?: string;
     required?: boolean;
   };
+  /**
+   * 只读模式
+   * @default false
+   */
+  readonly?: {
+    type: BooleanConstructor;
+    value?: boolean;
+  };
   /**
    * 预览结果列表
    * @default []