Feat/search

packages/products/tdesign-miniprogram/src/search/README.md

@@ -13,7 +13,7 @@ adjust-position | Boolean | true | 键盘弹起时，是否自动上推页面 |
 always-embed | Boolean | false | 强制 input 处于同层状态，默认 focus 时 input 会切到非同层状态 (仅在 iOS 下生效) | N
 center | Boolean | false | 是否居中 | N
 clear-trigger | String | always | 清空图标触发方式，仅在输入框有值时有效。可选项：always / focus | N
-clearable | Boolean | true | 是否启用清除控件 | 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 | -1 | 必需。指定 focus 时的光标位置 | Y

packages/products/tdesign-miniprogram/src/search/props.ts

@@ -31,7 +31,7 @@ const props: TdSearchProps = {
     type: String,
     value: 'always',
   },
-  /** 是否启用清除控件 */
+  /** 是否可清空 */
   clearable: {
     type: Boolean,
     value: true,

packages/products/tdesign-miniprogram/src/search/type.ts

@@ -46,7 +46,7 @@ export interface TdSearchProps {
     value?: 'always' | 'focus';
   };
   /**
-   * 是否启用清除控件
+   * 是否可清空
    * @default true
    */
   clearable?: {

packages/products/tdesign-mobile-react/src/search/defaultProps.ts

@@ -7,11 +7,12 @@ import { TdSearchProps } from './type';
 export const searchDefaultProps: TdSearchProps = {
   action: '',
   center: false,
+  clearTrigger: 'always',
   clearable: true,
   disabled: false,
   focus: false,
   leftIcon: 'search',
   placeholder: '',
-  readonly: false,
+  readonly: undefined,
   shape: 'square',
 };

packages/products/tdesign-mobile-react/src/search/search.en-US.md

@@ -11,20 +11,21 @@ style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProper
 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
+clearTrigger | String | always | show clear icon, clicked to clear input value。options: always / focus | N
 clearable | Boolean | true | \- | 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
 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
+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
 value | String | - | \- | N
 defaultValue | String | - | uncontrolled property | N
-onActionClick | Function |  | Typescript：`({}) => void`<br/> | N
+onActionClick | Function |  | Typescript：`(context: { e: MouseEvent }) => 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
+onChange | Function |  | Typescript：`(value: string, context: { 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

packages/products/tdesign-mobile-react/src/search/search.md

@@ -11,20 +11,21 @@ style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
 action | TNode | '' | 自定义右侧操作按钮文字。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
 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
+clearTrigger | String | always | 清空图标触发方式，仅在输入框有值时有效。可选项：always / focus | N
+clearable | Boolean | true | 是否可清空 | 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
 defaultValue | String | - | 值。非受控属性 | N
-onActionClick | Function |  | TS 类型：`({}) => void`<br/>点击右侧操作按钮文字时触发 | N
+onActionClick | Function |  | TS 类型：`(context: { e: MouseEvent }) => void`<br/>点击搜索框右侧操作内容时触发 | N
 onBlur | Function |  | TS 类型：`(context: { value: string; e: FocusEvent }) => void`<br/>失去焦点时触发 | N
-onChange | Function |  | TS 类型：`(value: string, context: { trigger: 'input-change' \| 'option-click'; e?: InputEvent \| MouseEvent }) => void`<br/>搜索关键词发生变化时触发，可能场景有：搜索框内容发生变化、点击联想词 | N
+onChange | Function |  | TS 类型：`(value: string, context: { e?: InputEvent \| MouseEvent }) => void`<br/>搜索关键词发生变化时触发，可能场景有：搜索框内容发生变化、点击联想词 | N
 onClear | Function |  | TS 类型：`(context: { e: MouseEvent }) => void`<br/>点击清除时触发 | N
 onFocus | Function |  | TS 类型：`(context: { value: string; e: FocusEvent }) => void`<br/>获得焦点时触发 | N
 onSearch | Function |  | TS 类型：`(context?: { value: string; trigger: 'submit' \| 'option-click' \| 'clear'; e?: InputEvent \| MouseEvent }) => void`<br/>【讨论中】搜索触发，包含：手机键盘提交健、联想关键词点击、清空按钮点击等 | N

packages/products/tdesign-mobile-react/src/search/type.ts

@@ -23,7 +23,12 @@ export interface TdSearchProps {
    */
   center?: boolean;
   /**
-   * 是否启用清除控件
+   * 清空图标触发方式，仅在输入框有值时有效
+   * @default always
+   */
+  clearTrigger?: 'always' | 'focus';
+  /**
+   * 是否可清空
    * @default true
    */
   clearable?: boolean;
@@ -49,7 +54,6 @@ export interface TdSearchProps {
   placeholder?: string;
   /**
    * 只读状态
-   * @default false
    */
   readonly?: boolean;
   /**
@@ -68,10 +72,10 @@ export interface TdSearchProps {
    */
   defaultValue?: string;
   /**
-   * 点击右侧操作按钮文字时触发
+   * 点击搜索框右侧操作内容时触发
    * @default ''
    */
-  onActionClick?: ({}) => void;
+  onActionClick?: (context: { e: MouseEvent<HTMLDivElement> }) => void;
   /**
    * 失去焦点时触发
    * @default ''
@@ -81,10 +85,7 @@ export interface TdSearchProps {
    * 搜索关键词发生变化时触发，可能场景有：搜索框内容发生变化、点击联想词
    * @default ''
    */
-  onChange?: (
-    value: string,
-    context: { trigger: 'input-change' | 'option-click'; e?: FormEvent<HTMLInputElement> | MouseEvent<HTMLDivElement> },
-  ) => void;
+  onChange?: (value: string, context: { e?: FormEvent<HTMLInputElement> | MouseEvent<HTMLDivElement> }) => void;
   /**
    * 点击清除时触发
    * @default ''

packages/products/tdesign-mobile-vue/helper/attributes.json

@@ -2687,6 +2687,10 @@
     "type": "Number",
     "description": "刷新超时时间\n\ndefault: 3000\n\n[docs](https://tdesign.tencent.com/mobile-vue/components/pull-down-refresh?tab=api#pulldownrefresh-props)"
   },
+  "t-pull-down-refresh/success-duration": {
+    "type": "String|Number",
+    "description": "刷新成功提示展示时长，单位 'ms'\n\ndefault: 500\n\n[docs](https://tdesign.tencent.com/mobile-vue/components/pull-down-refresh?tab=api#pulldownrefresh-props)"
+  },
   "t-pull-down-refresh/value": {
     "type": "Boolean",
     "description": "组件状态，值为 `true` 表示下拉状态，值为 `false` 表示收起状态\n\ndefault: false\n\n[docs](https://tdesign.tencent.com/mobile-vue/components/pull-down-refresh?tab=api#pulldownrefresh-props)"
@@ -2976,7 +2980,7 @@
   },
   "t-search/action": {
     "type": "String|TNode",
-    "description": "自定义右侧操作按钮文字，如：“取消”\n\ndefault: ''\n\n[docs](https://tdesign.tencent.com/mobile-vue/components/search?tab=api#search-props)"
+    "description": "自定义右侧操作按钮文字\n\ndefault: ''\n\n[docs](https://tdesign.tencent.com/mobile-vue/components/search?tab=api#search-props)"
   },
   "t-search/autocomplete-options": {
     "type": "Array",
@@ -3040,7 +3044,7 @@
   },
   "t-search/value": {
     "type": "String",
-    "description": "值，搜索关键词\n\n[docs](https://tdesign.tencent.com/mobile-vue/components/search?tab=api#search-props)"
+    "description": "值\n\n[docs](https://tdesign.tencent.com/mobile-vue/components/search?tab=api#search-props)"
   },
   "t-search/action-click": {
     "type": "event",

packages/products/tdesign-mobile-vue/helper/tags.json

@@ -847,6 +847,7 @@
       "loading-texts",
       "max-bar-height",
       "refresh-timeout",
+      "success-duration",
       "value",
       "change",
       "refresh",

packages/products/tdesign-mobile-vue/helper/web-types.json

@@ -6131,6 +6131,13 @@
               "type": "number",
               "default": "3000"
             },
+            {
+              "name": "success-duration",
+              "description": "刷新成功提示展示时长，单位 'ms'",
+              "doc-url": "https://tdesign.tencent.com/mobile-vue/components/pull-down-refresh?tab=api#pulldownrefresh-props",
+              "type": "string | number",
+              "default": "500"
+            },
             {
               "name": "value",
               "description": "组件状态，值为 `true` 表示下拉状态，值为 `false` 表示收起状态",
@@ -6787,7 +6794,7 @@
           "props": [
             {
               "name": "action",
-              "description": "自定义右侧操作按钮文字，如：“取消”",
+              "description": "自定义右侧操作按钮文字",
               "doc-url": "https://tdesign.tencent.com/mobile-vue/components/search?tab=api#search-props",
               "type": "string | TNode",
               "default": "''"
@@ -6903,7 +6910,7 @@
             },
             {
               "name": "value",
-              "description": "值，搜索关键词",
+              "description": "值",
               "doc-url": "https://tdesign.tencent.com/mobile-vue/components/search?tab=api#search-props",
               "type": "string"
             }
@@ -6950,7 +6957,7 @@
           "slots": [
             {
               "name": "action",
-              "description": "自定义右侧操作按钮文字，如：“取消”",
+              "description": "自定义右侧操作按钮文字",
               "doc-url": "https://tdesign.tencent.com/mobile-vue/components/search?tab=api#search-props"
             },
             {

packages/products/tdesign-mobile-vue/src/search/props.ts

@@ -8,7 +8,7 @@ import { TdSearchProps } from './type';
 import { PropType } from 'vue';
 
 export default {
-  /** 自定义右侧操作按钮文字，如：“取消” */
+  /** 自定义右侧操作按钮文字 */
   action: {
     type: [String, Function] as PropType<TdSearchProps['action']>,
     default: '',
@@ -19,6 +19,15 @@ export default {
   },
   /** 是否居中 */
   center: Boolean,
+  /** 清空图标触发方式，仅在输入框有值时有效 */
+  clearTrigger: {
+    type: String as PropType<TdSearchProps['clearTrigger']>,
+    default: 'always' as TdSearchProps['clearTrigger'],
+    validator(val: TdSearchProps['clearTrigger']): boolean {
+      if (!val) return true;
+      return ['always', 'focus'].includes(val);
+    },
+  },
   /** 是否可清空 */
   clearable: {
     type: Boolean,
@@ -65,7 +74,7 @@ export default {
       return ['square', 'round'].includes(val);
     },
   },
-  /** 值，搜索关键词 */
+  /** 值 */
   value: {
     type: String,
     default: undefined,
@@ -74,7 +83,7 @@ export default {
     type: String,
     default: undefined,
   },
-  /** 值，搜索关键词，非受控属性 */
+  /** 值，非受控属性 */
   defaultValue: {
     type: String,
     default: '',

packages/products/tdesign-mobile-vue/src/search/search.en-US.md

@@ -1,13 +1,15 @@
 :: BASE_DOC ::
 
 ## API
+
 ### Search Props
 
 name | type | default | description | required
 -- | -- | -- | -- | --
 action | String / Slot / Function | '' | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/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-vue/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/search/type.ts) | N
 center | Boolean | false | \- | N
+clearTrigger | String | always | show clear icon, clicked to clear input value。options: always / focus | N
 clearable | Boolean | true | \- | N
 disabled | Boolean | - | \- | N
 focus | Boolean | false | \- | N

packages/products/tdesign-mobile-vue/src/search/search.md

@@ -1,13 +1,15 @@
 :: BASE_DOC ::
 
 ## API
+
 ### Search Props
 
 名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
-action | String / Slot / Function | '' | 自定义右侧操作按钮文字，如：“取消”。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+action | String / Slot / Function | '' | 自定义右侧操作按钮文字。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 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-vue/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/search/type.ts) | N
 center | Boolean | false | 是否居中 | N
+clearTrigger | String | always | 清空图标触发方式，仅在输入框有值时有效。可选项：always / focus | N
 clearable | Boolean | true | 是否可清空 | N
 disabled | Boolean | - | 禁用状态 | N
 focus | Boolean | false | 是否聚焦 | N
@@ -18,8 +20,8 @@ placeholder | String | '' | 占位符 | N
 readonly | Boolean | undefined | 只读状态 | N
 resultList | Array | [] | 预览结果列表。TS 类型：`Array<string>` | N
 shape | String | 'square' | 搜索框形状。可选项：square/round | N
-value | String | - | 值，搜索关键词。支持语法糖 `v-model` 或 `v-model:value` | N
-defaultValue | String | - | 值，搜索关键词。非受控属性 | N
+value | String | - | 值。支持语法糖 `v-model` 或 `v-model:value` | N
+defaultValue | String | - | 值。非受控属性 | N
 onActionClick | Function |  | TS 类型：`(context: { e: MouseEvent }) => void`<br/>点击搜索框右侧操作内容时触发 | N
 onBlur | Function |  | TS 类型：`(context: { value: string; e: FocusEvent }) => void`<br/>失去焦点时触发 | N
 onChange | Function |  | TS 类型：`(value: string, context: { e?: InputEvent \| MouseEvent }) => void`<br/>搜索关键词发生变化时触发，可能场景有：搜索框内容发生变化、点击联想词 | N

packages/products/tdesign-mobile-vue/src/search/type.ts

@@ -8,7 +8,7 @@ import { TNode } from '../common';
 
 export interface TdSearchProps {
   /**
-   * 自定义右侧操作按钮文字，如：“取消”
+   * 自定义右侧操作按钮文字
    * @default ''
    */
   action?: string | TNode;
@@ -21,6 +21,11 @@ export interface TdSearchProps {
    * @default false
    */
   center?: boolean;
+  /**
+   * 清空图标触发方式，仅在输入框有值时有效
+   * @default always
+   */
+  clearTrigger?: 'always' | 'focus';
   /**
    * 是否可清空
    * @default true
@@ -68,17 +73,17 @@ export interface TdSearchProps {
    */
   shape?: 'square' | 'round';
   /**
-   * 值，搜索关键词
+   * 值
    * @default ''
    */
   value?: string;
   /**
-   * 值，搜索关键词，非受控属性
+   * 值，非受控属性
    * @default ''
    */
   defaultValue?: string;
   /**
-   * 值，搜索关键词
+   * 值
    * @default ''
    */
   modelValue?: string;

packages/products/tdesign-vue-next/packages/tdesign-vue-next/global.d.ts

@@ -100,7 +100,6 @@ declare module 'vue' {
     TRangeInputPopup: typeof import('tdesign-vue-next')['RangeInputPopup'];
     TRate: typeof import('tdesign-vue-next')['Rate'];
     TRow: typeof import('tdesign-vue-next')['Row'];
-    TSearch: typeof import('tdesign-vue-next')['Search'];
     TSelect: typeof import('tdesign-vue-next')['Select'];
     TSelectInput: typeof import('tdesign-vue-next')['SelectInput'];
     TSkeleton: typeof import('tdesign-vue-next')['Skeleton'];