feat(search): support property for input

src/search/README.md

@@ -51,6 +51,18 @@ disabled | Boolean | false | 是否禁用 | N
 cursor-spacing | Number | 0 | 搜索框聚焦时底部与键盘的距离 | N
 focus | Boolean | false | 是否聚焦 | N
 label | String | '' | 已废弃。左侧文本 | 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

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

@@ -29,14 +29,23 @@ exports[`search Props :base 1`] = `
           </wx-view>
         </t-icon>
         <wx-input
+          adjustPosition="{{true}}"
+          alwaysEmbed="{{false}}"
           class="t-input__keyword t-class-input"
+          confirmHold="{{false}}"
           confirmType="search"
+          cursor="{{0}}"
           cursorSpacing="{{0}}"
           disabled="{{false}}"
           focus="{{false}}"
+          holdKeyboard="{{false}}"
+          maxlength="{{-1}}"
           name="input"
           placeholder=""
-          placeholderClass="t-search__placeholder t-search__placeholder--normal"
+          placeholderClass=" t-search__placeholder t-search__placeholder--normal"
+          placeholderStyle=""
+          selectionEnd="{{-1}}"
+          selectionStart="{{-1}}"
           type="text"
           value=""
           bind:blur="onBlur"

src/search/_example/maxlength/index.js

@@ -0,0 +1 @@
+Component({});

src/search/_example/maxlength/index.json

@@ -0,0 +1,5 @@
+{
+  "usingComponents": {
+    "t-search": "tdesign-miniprogram/search/search"
+  }
+}

src/search/_example/maxlength/index.wxml

@@ -0,0 +1,6 @@
+<view class="example-search">
+  <t-search placeholder="最大输入10个字符" maxlength="{{10}}" />
+</view>
+<view class="example-search">
+  <t-search placeholder="最大输入10个字符，汉字算两个" maxcharacter="{{10}}" />
+</view>

src/search/_example/maxlength/index.wxss

@@ -0,0 +1,4 @@
+.example-search {
+  background-color: #fff;
+  padding: 16rpx 32rpx;
+}

src/search/_example/search.json

@@ -2,6 +2,7 @@
   "navigationBarTitleText": "Search",
   "usingComponents": {
     "base": "./base",
+    "maxlength": "./maxlength",
     "action": "./action",
     "shape": "./shape",
     "other": "./other"

src/search/_example/search.wxml

@@ -4,6 +4,9 @@
   <t-demo title="01 组件类型" desc="基础搜索框">
     <base />
   </t-demo>
+  <t-demo desc="字数限制">
+    <maxlength />
+  </t-demo>
   <t-demo desc="获取焦点后显示取消按钮">
     <action />
   </t-demo>

src/search/props.ts

@@ -40,6 +40,64 @@ const props: TdSearchProps = {
     type: String,
     value: '',
   },
+  /** 用户最多可以输入的字符个数，一个中文汉字表示两个字符长度。`maxcharacter` 和 `maxlength` 二选一使用 */
+  maxcharacter: {
+    type: Number,
+  },
+  /** 用户最多可以输入的文本长度，一个中文等于一个计数长度，默认为 -1，不限制输入长度。`maxcharacter` 和 `maxlength` 二选一使用 */
+  maxlength: {
+    type: Number,
+    value: -1,
+  },
+  /** 设置键盘右下角按钮的文字，仅在type='text'时生效。<br />具体释义：<br />`send` 右下角按钮为“发送”；<br />`search` 右下角按钮为“搜索”；<br />`next` 右下角按钮为“下一个”；<br />`go` 右下角按钮为“前往”；<br />`done` 右下角按钮为“完成”。<br />[小程序官方文档](https://developers.weixin.qq.com/miniprogram/dev/component/input.html) */
+  confirmType: {
+    type: String,
+    value: 'search',
+  },
+  /** 强制 input 处于同层状态，默认 focus 时 input 会切到非同层状态 (仅在 iOS 下生效) */
+  alwaysEmbed: {
+    type: Boolean,
+    value: false,
+  },
+  /** 点击键盘右下角按钮时是否保持键盘不收起 */
+  confirmHold: {
+    type: Boolean,
+    value: false,
+  },
+  /** 指定focus时的光标位置 */
+  cursor: {
+    type: Number,
+  },
+  /** 光标起始位置，自动聚集时有效，需与selection-end搭配使用 */
+  selectionStart: {
+    type: Number,
+    value: -1,
+  },
+  /** 光标结束位置，自动聚集时有效，需与selection-start搭配使用 */
+  selectionEnd: {
+    type: Number,
+    value: -1,
+  },
+  /** 键盘弹起时，是否自动上推页面 */
+  adjustPosition: {
+    type: Boolean,
+    value: true,
+  },
+  /** focus时，点击页面的时候不收起键盘 */
+  holdKeyboard: {
+    type: Boolean,
+    value: false,
+  },
+  /** 指定 placeholder 的样式 */
+  placeholderStyle: {
+    type: String,
+    value: '',
+  },
+  /** 指定 placeholder 的样式类 */
+  placeholderClass: {
+    type: String,
+    value: '',
+  },
   /** 左侧图标 */
   leftIcon: {
     type: String,

src/search/search.ts

@@ -1,6 +1,7 @@
 import { SuperComponent, wxComponent } from '../common/src/index';
 import config from '../common/config';
 import props from './props';
+import { getCharacterLength } from '../common/utils';
 
 const { prefix } = config;
 const name = `${prefix}-search`;
@@ -22,22 +23,22 @@ export default class Search extends SuperComponent {
 
   properties = props;
 
-  observers = {
-    focus(this: Search, nextValue: boolean) {
-      this.setData({ 'localValue.focus': nextValue });
-    },
-  };
+  observers = {};
 
   data = {
     classPrefix: name,
     prefix,
-    localValue: {
-      focus: false,
-    },
   };
 
   onInput(e) {
-    const { value } = e.detail;
+    let { value } = e.detail;
+    const { maxcharacter } = this.properties;
+
+    if (maxcharacter && typeof maxcharacter === 'number' && maxcharacter > 0) {
+      const { characters } = getCharacterLength('maxcharacter', value, maxcharacter);
+
+      value = characters;
+    }
 
     this.setData({ value });
     this.triggerEvent('change', { value });
@@ -46,14 +47,12 @@ export default class Search extends SuperComponent {
   onFocus(e) {
     const { value } = e.detail;
 
-    this.setData({ 'localValue.focus': true });
     this.triggerEvent('focus', { value });
   }
 
   onBlur(e) {
     const { value } = e.detail;
 
-    this.setData({ 'localValue.focus': false });
     this.triggerEvent('blur', { value });
   }
 

src/search/search.wxml

@@ -2,7 +2,7 @@
 
 <view style="{{_._style([style, customStyle])}}" class="class {{classPrefix}} {{prefix}}-class">
   <view
-    class="{{classPrefix}}__input-box {{prefix}}-{{localValue.focus ? 'is-focused' : 'not-focused'}} {{classPrefix}}__input-box--{{center ? 'center' : ''}} {{classPrefix}}__input-box--{{shape}} {{prefix}}-class-input-container"
+    class="{{classPrefix}}__input-box {{prefix}}-{{focus ? 'is-focused' : 'not-focused'}} {{classPrefix}}__input-box--{{center ? 'center' : ''}} {{classPrefix}}__input-box--{{shape}} {{prefix}}-class-input-container"
   >
     <!-- <view wx:if="{{label}}" class="{{classPrefix}}__label {{prefix}}-class-label">{{label}}</view>
     <slot name="label" /> -->
@@ -17,14 +17,23 @@
     <input
       type="{{type}}"
       name="input"
+      maxlength="{{maxlength}}"
       disabled="{{disabled}}"
       class="{{prefix}}-input__keyword {{prefix}}-class-input"
-      focus="{{localValue.focus}}"
+      focus="{{focus}}"
       value="{{value}}"
-      confirm-type="search"
+      confirm-type="{{confirmType}}"
+      confirm-hold="{{confirmHold}}"
+      cursor="{{cursor}}"
+      adjust-position="{{adjustPosition}}"
+      always-embed="{{alwaysEmbed}}"
+      selection-start="{{selectionStart}}"
+      selection-end="{{selectionEnd}}"
+      hold-keyboard="{{holdKeyboard}}"
       cursor-spacing="{{cursorSpacing}}"
       placeholder="{{placeholder}}"
-      placeholder-class="{{classPrefix}}__placeholder {{classPrefix}}__placeholder--{{center ? 'center': 'normal'}}"
+      placeholder-style="{{placeholderStyle}}"
+      placeholder-class="{{placeholderClass}} {{classPrefix}}__placeholder {{classPrefix}}__placeholder--{{center ? 'center': 'normal'}}"
       bind:input="onInput"
       bind:focus="onFocus"
       bind:blur="onBlur"

src/search/type.ts

@@ -68,6 +68,100 @@ export interface TdSearchProps {
     type: StringConstructor;
     value?: string;
   };
+  /**
+   * 用户最多可以输入的字符个数，一个中文汉字表示两个字符长度。`maxcharacter` 和 `maxlength` 二选一使用
+   */
+  maxcharacter?: {
+    type: NumberConstructor;
+    value?: number;
+  };
+  /**
+   * 用户最多可以输入的文本长度，一个中文等于一个计数长度，默认为 -1，不限制输入长度。`maxcharacter` 和 `maxlength` 二选一使用
+   * @default -1
+   */
+  maxlength?: {
+    type: NumberConstructor;
+    value?: number;
+  };
+  /**
+   * 设置键盘右下角按钮的文字，仅在type='text'时生效。<br />具体释义：<br />`send` 右下角按钮为“发送”；<br />`search` 右下角按钮为“搜索”；<br />`next` 右下角按钮为“下一个”；<br />`go` 右下角按钮为“前往”；<br />`done` 右下角按钮为“完成”。<br />[小程序官方文档](https://developers.weixin.qq.com/miniprogram/dev/component/input.html)
+   * @default search
+   */
+  confirmType?: {
+    type: StringConstructor;
+    value?: 'send' | 'search' | 'next' | 'go' | 'done';
+  };
+  /**
+   * 强制 input 处于同层状态，默认 focus 时 input 会切到非同层状态 (仅在 iOS 下生效)
+   * @default false
+   */
+  alwaysEmbed?: {
+    type: BooleanConstructor;
+    value?: boolean;
+  };
+  /**
+   * 点击键盘右下角按钮时是否保持键盘不收起
+   * @default false
+   */
+  confirmHold?: {
+    type: BooleanConstructor;
+    value?: boolean;
+  };
+  /**
+   * 指定focus时的光标位置
+   */
+  cursor: {
+    type: NumberConstructor;
+    value?: number;
+  };
+  /**
+   * 光标起始位置，自动聚集时有效，需与selection-end搭配使用
+   * @default -1
+   */
+  selectionStart?: {
+    type: NumberConstructor;
+    value?: number;
+  };
+  /**
+   * 光标结束位置，自动聚集时有效，需与selection-start搭配使用
+   * @default -1
+   */
+  selectionEnd?: {
+    type: NumberConstructor;
+    value?: number;
+  };
+  /**
+   * 键盘弹起时，是否自动上推页面
+   * @default true
+   */
+  adjustPosition?: {
+    type: BooleanConstructor;
+    value?: boolean;
+  };
+  /**
+   * focus时，点击页面的时候不收起键盘
+   * @default false
+   */
+  holdKeyboard?: {
+    type: BooleanConstructor;
+    value?: boolean;
+  };
+  /**
+   * 指定 placeholder 的样式
+   * @default ''
+   */
+  placeholderStyle: {
+    type: StringConstructor;
+    value?: string;
+  };
+  /**
+   * 指定 placeholder 的样式类
+   * @default ''
+   */
+  placeholderClass?: {
+    type: StringConstructor;
+    value?: string;
+  };
   /**
    * 左侧图标
    * @default 'search'