feat(Search): support cursor-color prop

src/search/Search.tsx

@@ -130,6 +130,9 @@ const Search: FC<SearchProps> = (props) => {
           value={searchValue}
           type="search"
           className={`${inputClasses}`}
+          style={
+            props.cursorColor ? ({ '--td-search-cursor-color': props.cursorColor } as React.CSSProperties) : undefined
+          }
           autoFocus={focus}
           placeholder={placeholder}
           readOnly={readonly}

src/search/defaultProps.ts

@@ -8,10 +8,11 @@ export const searchDefaultProps: TdSearchProps = {
   action: '',
   center: false,
   clearable: true,
+  cursorColor: '#0052d9',
   disabled: false,
   focus: false,
   leftIcon: 'search',
   placeholder: '',
-  readonly: false,
+  readonly: undefined,
   shape: 'square',
 };

src/search/search.en-US.md

@@ -7,28 +7,29 @@
 name | type | default | description | required
 -- | -- | -- | -- | --
 className | String | - | className of component | N
-style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N
-action | TNode | '' | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
-autocompleteOptions | Array | - | autocomplete words list。Typescript：`Array<AutocompleteOption>` `type AutocompleteOption = string \| { label: string \| TNode; group?: boolean }`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/search/type.ts) | N
+style | Object | - | CSS(Cascading Style Sheets)，Typescript: `React.CSSProperties` | N
+action | TNode | '' | Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+autocompleteOptions | Array | - | autocomplete words list。Typescript: `Array<AutocompleteOption>` `type AutocompleteOption = string \| { label: string \| TNode; group?: boolean }`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/search/type.ts) | N
 center | Boolean | false | \- | N
 clearable | Boolean | true | \- | N
+cursorColor | String | #0052d9 | `0.21.2` | N
 disabled | Boolean | false | \- | N
 focus | Boolean | false | \- | N
-leftIcon | TNode | 'search' | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+leftIcon | TNode | 'search' | Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
 placeholder | String | '' | \- | N
-prefixIcon | TElement | - | `deprecated`。Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
-readonly | Boolean | false | \- | N
+prefixIcon | TElement | - | `deprecated`。Typescript: `TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+readonly | Boolean | undefined | \- | N
 shape | String | 'square' | options: square/round | N
-suffixIcon | TElement | - | `deprecated`。Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+suffixIcon | TElement | - | `deprecated`。Typescript: `TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
 value | String | - | \- | N
 defaultValue | String | - | uncontrolled property | N
-onActionClick | Function |  | Typescript：`({}) => void`<br/> | N
-onBlur | Function |  | Typescript：`(context: { value: string; e: FocusEvent }) => void`<br/> | N
-onChange | Function |  | Typescript：`(value: string, context: { trigger: 'input-change' \| 'option-click'; e?: InputEvent \| MouseEvent }) => void`<br/> | N
-onClear | Function |  | Typescript：`(context: { e: MouseEvent }) => void`<br/> | N
-onFocus | Function |  | Typescript：`(context: { value: string; e: FocusEvent }) => void`<br/> | N
-onSearch | Function |  | Typescript：`(context?: { value: string; trigger: 'submit' \| 'option-click' \| 'clear'; e?: InputEvent \| MouseEvent }) => void`<br/> | N
-onSubmit | Function |  | Typescript：`(context: { value: string; e: KeyboardEvent }) => void`<br/> | N
+onActionClick | Function |  | Typescript: `({}) => void`<br/> | N
+onBlur | Function |  | Typescript: `(context: { value: string; e: FocusEvent }) => void`<br/> | N
+onChange | Function |  | Typescript: `(value: string, context: { trigger: 'input-change' \| 'option-click'; e?: InputEvent \| MouseEvent }) => void`<br/> | N
+onClear | Function |  | Typescript: `(context: { e: MouseEvent }) => void`<br/> | N
+onFocus | Function |  | Typescript: `(context: { value: string; e: FocusEvent }) => void`<br/> | N
+onSearch | Function |  | Typescript: `(context?: { value: string; trigger: 'submit' \| 'option-click' \| 'clear'; e?: InputEvent \| MouseEvent }) => void`<br/> | N
+onSubmit | Function |  | Typescript: `(context: { value: string; e: KeyboardEvent }) => void`<br/> | N
 
 ### CSS Variables
 
@@ -39,6 +40,7 @@ Name | Default Value | Description
 --td-search-bg-color | @bg-color-secondarycontainer | -
 --td-search-clear-icon-color | @text-color-placeholder | -
 --td-search-clear-icon-size | 24px | -
+--td-search-cursor-color | @brand-color | -
 --td-search-font | @font-body-large | -
 --td-search-height | 40px | -
 --td-search-icon-color | @text-color-placeholder | -

src/search/search.md

@@ -12,12 +12,13 @@ action | TNode | '' | 自定义右侧操作按钮文字。TS 类型：`string \|
 autocompleteOptions | Array | - | 【讨论中】联想词列表，如果不存在或长度为 0 则不显示联想框。可以使用函数 `label` 自定义联想词为任意内容；也可使用插槽 `option` 定义联想词内容，插槽参数为 `{ option: AutocompleteOption; index: number }`。如果 `group` 值为 `true` 则表示当前项为分组标题。TS 类型：`Array<AutocompleteOption>` `type AutocompleteOption = string \| { label: string \| TNode; group?: boolean }`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/search/type.ts) | N
 center | Boolean | false | 是否居中 | N
 clearable | Boolean | true | 是否启用清除控件 | N
+cursorColor | String | #0052d9 | `0.21.2`。光标颜色 | N
 disabled | Boolean | false | 是否禁用 | N
 focus | Boolean | false | 是否聚焦 | N
 leftIcon | TNode | 'search' | 左侧图标。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
 placeholder | String | '' | 占位符 | N
 prefixIcon | TElement | - | 已废弃。前置图标，默认为搜索图标。值为 `null` 时则不显示。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
-readonly | Boolean | false | 只读状态 | N
+readonly | Boolean | undefined | 只读状态 | N
 shape | String | 'square' | 搜索框形状。可选项：square/round | N
 suffixIcon | TElement | - | 已废弃。后置图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
 value | String | - | 值 | N
@@ -39,6 +40,7 @@ onSubmit | Function |  | TS 类型：`(context: { value: string; e: KeyboardEven
 --td-search-bg-color | @bg-color-secondarycontainer | -
 --td-search-clear-icon-color | @text-color-placeholder | -
 --td-search-clear-icon-size | 24px | -
+--td-search-cursor-color | @brand-color | -
 --td-search-font | @font-body-large | -
 --td-search-height | 40px | -
 --td-search-icon-color | @text-color-placeholder | -

src/search/type.ts

@@ -22,11 +22,21 @@ export interface TdSearchProps {
    * @default false
    */
   center?: boolean;
+  /**
+   * 清空图标触发方式，仅在输入框有值时有效
+   * @default always
+   */
+  clearTrigger?: 'always' | 'focus';
   /**
    * 是否启用清除控件
    * @default true
    */
   clearable?: boolean;
+  /**
+   * 光标颜色
+   * @default #0052d9
+   */
+  cursorColor?: string;
   /**
    * 是否禁用
    * @default false
@@ -49,7 +59,6 @@ export interface TdSearchProps {
   placeholder?: string;
   /**
    * 只读状态
-   * @default false
    */
   readonly?: boolean;
   /**
@@ -69,7 +78,6 @@ export interface TdSearchProps {
   defaultValue?: string;
   /**
    * 点击右侧操作按钮文字时触发
-   * @default ''
    */
   onActionClick?: ({}) => void;
   /**