@tarojs/components 3.5.0-canary.0 → 3.5.0-theta.1

package/types/Input.d.ts

@@ -3,52 +3,57 @@ import { StandardProps, CommonEventFunction, FormItemProps } from './common'
 
 interface InputProps extends StandardProps, FormItemProps {
   /** 输入框的初始内容
-   * @supported weapp, h5, rn
+   * @supported weapp, h5, rn, tt
    */
   value?: string
 
   /** input 的类型
    * @default "text"
-   * @supported weapp, h5, rn
+   * @supported weapp, h5, rn, tt
    * @rn 部分支持
    */
-  type?: 'text' | 'number' | 'idcard' | 'digit'
+  type?: 'text' | 'number' | 'idcard' | 'digit' | 'safe-password' | 'nickname'
 
   /** 是否是密码类型
-   * @supported weapp, h5, rn
+   * @supported weapp, h5, rn, tt
    */
   password?: boolean
 
   /** 输入框为空时占位符
-   * @supported weapp, h5, rn
+   * @supported weapp, h5, rn, tt
    */
   placeholder?: string
 
   /** 指定 placeholder 的样式
-   * @supported weapp
+   * @supported weapp, rn, tt
    */
   placeholderStyle?: string
 
   /** 指定 placeholder 的样式类
    * @default "input-placeholder"
-   * @supported weapp
+   * @supported weapp, tt
    */
   placeholderClass?: string
 
+  /** 指定 placeholder 的文本颜色
+   * @supported rn
+   */
+  placeholderTextColor?: string
+
   /** 是否禁用
-   * @supported weapp, h5, rn
+   * @supported weapp, h5, rn, tt
    */
   disabled?: boolean
 
   /** 最大输入长度，设置为 -1 的时候不限制最大长度
    * @default 140
-   * @supported weapp, h5, rn
+   * @supported weapp, h5, rn, tt
    */
   maxlength?: number
 
   /** 指定光标与键盘的距离，单位 px 。取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离
    * @default 0
-   * @supported weapp
+   * @supported weapp, tt
    */
   cursorSpacing?: number
 
@@ -59,14 +64,13 @@ interface InputProps extends StandardProps, FormItemProps {
   autoFocus?: boolean
 
   /** 获取焦点
-   * @supported weapp, h5, rn
+   * @supported weapp, h5, rn, tt
    */
   focus?: boolean
 
-
   /** 设置键盘右下角按钮的文字
    * @default done
-   * @supported weapp, rn
+   * @supported weapp, rn, tt
    */
   confirmType?: 'send' | 'search' | 'next' | 'go' | 'done'
 
@@ -77,25 +81,25 @@ interface InputProps extends StandardProps, FormItemProps {
   confirmHold?: boolean
 
   /** 指定focus时的光标位置
-   * @supported weapp, rn
+   * @supported weapp, rn, tt
    */
   cursor?: number
 
   /** 光标起始位置，自动聚集时有效，需与selection-end搭配使用
    * @default -1
-   * @supported weapp, rn
+   * @supported weapp, rn, tt
    */
   selectionStart?: number
 
   /** 光标结束位置，自动聚集时有效，需与selection-start搭配使用
    * @default -1
-   * @supported weapp, rn
+   * @supported weapp, rn, tt
    */
   selectionEnd?: number
 
   /** 键盘弹起时，是否自动上推页面
    * @default false
-   * @supported weapp
+   * @supported weapp, tt
    */
   adjustPosition?: boolean
 
@@ -112,6 +116,41 @@ interface InputProps extends StandardProps, FormItemProps {
    */
   alwaysEmbed?: boolean
 
+  /**
+   * 安全键盘加密公钥的路径，只支持包内路径
+   * @supported weapp
+   */
+  safePasswordCertPath?: string
+
+  /**
+   * 安全键盘输入密码长度
+   * @supported weapp
+   */
+  safePasswordLength?: number
+
+  /**
+   * 安全键盘加密时间戳
+   * @supported weapp
+   */
+  safePasswordTimeStamp?: number
+
+  /**
+   * 安全键盘加密盐值
+   * @supported weapp
+   */
+  safePasswordNonce?: string
+  /**
+   * 安全键盘计算hash盐值，若指定custom-hash 则无效
+   * @supported weapp
+   */
+  safePasswordSalt?: string
+
+  /**
+   * 安全键盘计算hash的算法表达式，如 `md5(sha1('foo' + sha256(sm3(password + 'bar'))))`
+   * @supported weapp
+   */
+  safePasswordCustomHash?: string
+
   /**
    * 当 type 为 number, digit, idcard 数字键盘是否随机排列
    * @default false
@@ -127,27 +166,27 @@ interface InputProps extends StandardProps, FormItemProps {
   controlled?: boolean
 
   /** 当键盘输入时，触发input事件，event.detail = {value, cursor, keyCode}，处理函数可以直接 return 一个字符串，将替换输入框的内容。
-   * @supported weapp, h5, rn
+   * @supported weapp, h5, rn, tt
    */
   onInput?: CommonEventFunction<InputProps.inputEventDetail>
 
   /** 输入框聚焦时触发，event.detail = { value, height }，height 为键盘高度
-   * @supported weapp, h5, rn
+   * @supported weapp, h5, rn, tt
    */
   onFocus?: CommonEventFunction<InputProps.inputForceEventDetail>
 
   /** 输入框失去焦点时触发
    *
    * event.detail = {value: value}
-   * @supported weapp, h5, rn
+   * @supported weapp, h5, rn, tt
    */
   onBlur?: CommonEventFunction<InputProps.inputValueEventDetail>
 
   /** 点击完成按钮时触发
    *
    * event.detail = {value: value}
-   * @supported weapp, rn
-   * @h5 借用[Form 组件](form.html)的`onSubmit`事件来替代
+   * @supported weapp, rn, tt
+   * @h5 借用[Form 组件](./form)的`onSubmit`事件来替代
    */
   onConfirm?: CommonEventFunction<InputProps.inputValueEventDetail>
 
@@ -157,9 +196,15 @@ interface InputProps extends StandardProps, FormItemProps {
    * @supported weapp
    */
   onKeyboardHeightChange?: CommonEventFunction<InputProps.onKeyboardHeightChangeEventDetail>
+
+  /** 用于透传 `WebComponents` 上的属性到内部 H5 标签上
+   * @supported h5
+   */
+  nativeProps?: Record<string, unknown>
 }
 
 declare namespace InputProps {
+  /** > 注意：React-Native 端 `inputEventDetail` 仅实现参数 `value`，若需实时获取光标位置则可通过 [`onSelectionChange`](https://reactnative.dev/docs/textinput#onselectionchange) 实现。 */
   interface inputEventDetail {
     /** 输入值 */
     value: string
@@ -190,32 +235,52 @@ declare namespace InputProps {
 /** 输入框。该组件是原生组件，使用时请注意相关限制
  * @classification forms
  * @supported weapp, h5, rn
- * @example
+ * @example_react
  * ```tsx
  * class App extends Component {
- *
  *   render () {
  *     return (
- *         <View className='example-body'>
- *           <Text>可以自动聚焦的 input</Text>
- *             <Input type='text' placeholder='将会获取焦点' focus/>
- *             <Text>控制最大输入长度的 input</Text>
- *             <Input type='text' placeholder='最大输入长度为 10' maxlength='10'/>
- *             <Text>数字输入的 input</Text>
- *             <Input type='number' placeholder='这是一个数字输入框'/>
- *             <Text>密码输入的 input</Text>
- *             <Input type='text' password placeholder='这是一个密码输入框'/>
- *             <Text>带小数点的 input</Text>
- *             <Input type='digit' placeholder='带小数点的数字键盘'/>
- *             <Text>身份证输入的 input</Text>
- *             <Input type='idcard' placeholder='身份证输入键盘'/>
- *             <Text>控制占位符颜色的 input</Text>
- *             <Input type='text' placeholder='占位符字体是红色的' placeholderStyle='color:red'/>
- *         </View>
+ *       <View className='example-body'>
+ *         <Text>可以自动聚焦的 input</Text>
+ *           <Input type='text' placeholder='将会获取焦点' focus/>
+ *           <Text>控制最大输入长度的 input</Text>
+ *           <Input type='text' placeholder='最大输入长度为 10' maxLength='10'/>
+ *           <Text>数字输入的 input</Text>
+ *           <Input type='number' placeholder='这是一个数字输入框'/>
+ *           <Text>密码输入的 input</Text>
+ *           <Input type='password' password placeholder='这是一个密码输入框'/>
+ *           <Text>带小数点的 input</Text>
+ *           <Input type='digit' placeholder='带小数点的数字键盘'/>
+ *           <Text>身份证输入的 input</Text>
+ *           <Input type='idcard' placeholder='身份证输入键盘'/>
+ *           <Text>控制占位符颜色的 input</Text>
+ *           <Input type='text' placeholder='占位符字体是红色的' placeholderStyle='color:red'/>
+ *       </View>
  *     )
  *   }
  * }
  * ```
+ * @example_vue
+ * ```html
+ * <template>
+ *   <view class="example-body">
+ *     <text>可以自动聚焦的 input</text>
+ *     <input type="text" placeholder="将会获取焦点" :focus="true" />
+ *     <text>控制最大输入长度的 input</text>
+ *     <input type="text" placeholder="最大输入长度为 10" maxLength="10"/>
+ *     <text>数字输入的 input</text>
+ *     <input type="number" placeholder="这是一个数字输入框"/>
+ *     <text>密码输入的 input</text>
+ *     <input type="password" :password="true" placeholder="这是一个密码输入框"/>
+ *     <text>带小数点的 input</text>
+ *     <input type="digit" placeholder="带小数点的数字键盘"/>
+ *     <text>身份证输入的 input</text>
+ *     <input type="idcard" placeholder="身份证输入键盘"/>
+ *     <text>控制占位符颜色的 input</text>
+ *     <input type="text" placeholder="占位符字体是红色的" placeholder-style="color:red;"/>
+ *   </view>
+ * </template>
+ * ```
  * @see https://developers.weixin.qq.com/miniprogram/dev/component/input.html
  */
 declare const Input: ComponentType<InputProps>

package/types/KeyboardAccessory.d.ts

@@ -0,0 +1,42 @@
+import { ComponentType } from 'react'
+import { StandardProps } from './common'
+
+/** @ignore */
+type KeyboardAccessoryProps = StandardProps
+
+/** 设置 Input / Textarea 聚焦时键盘上方 CoverView / CoverImage 工具栏视图。需要配置 Taro 插件 `@tarojs/plugin-platform-weapp` 的 `enablekeyboardAccessory` 参数为 `true` 后才能使用，请参考：[#9548](https://github.com/NervJS/taro/issues/9548#issuecomment-891682216)。
+ *
+ * @classification forms
+ * @supported weapp
+ * @example
+ * ```js
+ * // config/index.js
+ * {
+ *   // ...
+ *   plugins: [
+ *     ['@tarojs/plugin-platform-weapp', {
+ *       enablekeyboardAccessory: true
+ *     }]
+ *   ]
+ * }
+ * ```
+ *
+ * ```tsx
+ * class App extends Component {
+ *   render () {
+ *     return (
+ *       <Textarea holdKeyboard="{{true}}">
+ *         <KeyboardAccessory className="container" style={{ height: 50 }} >
+ *           <CoverView onClick={() => { TODO }} style={{ flex: 1, background: 'green' }}>1</CoverView>
+ *           <CoverView onClick={() => { TODO }} style={{ flex: 1, background: 'red' }}>2</CoverView>
+ *         </KeyboardAccessory>
+ *       </Textarea>
+ *     )
+ *   }
+ * }
+ * ```
+ * @see https://developers.weixin.qq.com/miniprogram/dev/component/keyboard-accessory.html
+ */
+declare const KeyboardAccessory: ComponentType<KeyboardAccessoryProps>
+
+export { KeyboardAccessory, KeyboardAccessoryProps }

package/types/Label.d.ts

@@ -3,20 +3,19 @@ import { StandardProps } from './common'
 
 interface LabelProps extends StandardProps {
 
-  /** 绑定控件的 id
-   */
+  /** 绑定控件的 id */
   for?: string
 }
 
 /** 用来改进表单组件的可用性。
- * 
+ *
  * 使用for属性找到对应的id，或者将控件放在该标签下，当点击时，就会触发对应的控件。 for优先级高于内部控件，内部有多个控件的时候默认触发第一个控件。 目前可以绑定的控件有：button, checkbox, radio, switch。
  * @classification forms
- * @supported weapp, swan, alipay, tt, h5
- * @example
+ * @supported weapp, swan, alipay, tt, h5, rn
+ * @example_react
  * ```tsx
  * class App extends Components {
- * 
+ *
  *   render () {
  *     return (
  *       <RadioGroup>
@@ -33,6 +32,21 @@ interface LabelProps extends StandardProps {
  *   }
  * }
  * ```
+ * @example_vue
+ * ```html
+ * <template>
+ *   <radio-group>
+ *     <label class="example-body__label" for="1" key="1">
+ *       <radio id="1" value="USA" />
+ *       USA
+ *     </label>
+ *     <label class="example-body__label" for="2" key="2">
+ *       <radio id="2" value="CHN" :checked="true" />
+ *       CHN
+ *     </label>
+ *   </radio-group>
+ * </template>
+ * ```
  * @see https://developers.weixin.qq.com/miniprogram/dev/component/label.html
  */
 declare const Label: ComponentType<LabelProps>

package/types/LivePlayer.d.ts

@@ -1,9 +1,9 @@
 import { ComponentType } from 'react'
-import { StandardProps, CommonEventFunction, netStatus } from './common'
+import { StandardProps, CommonEventFunction, NetStatus } from './common'
 
 interface LivePlayerProps extends StandardProps {
   /** 音视频地址。目前仅支持 flv, rtmp 格式
-   * @supported weapp
+   * @supported weapp, tt
    */
   src?: string
 
@@ -11,29 +11,29 @@ interface LivePlayerProps extends StandardProps {
    * @default "live"
    * @supported weapp
    */
-  mode?: keyof LivePlayerProps.mode
+  mode?: keyof LivePlayerProps.Mode
 
   /** 自动播放
    * @default false
-   * @supported weapp
+   * @supported weapp, tt
    */
   autoplay?: boolean
 
   /** 是否静音
    * @default false
-   * @supported weapp
+   * @supported weapp, tt
    */
   muted?: boolean
 
   /** 画面方向
    * @default "vertical"
-   * @supported weapp
+   * @supported weapp, tt
    */
-  orientation?: keyof LivePlayerProps.orientation
+  orientation?: keyof LivePlayerProps.Orientation
 
   /** 填充模式
    * @default "contain"
-   * @supported weapp
+   * @supported weapp, tt
    */
   objectFit?: keyof LivePlayerProps.objectFit
 
@@ -44,13 +44,13 @@ interface LivePlayerProps extends StandardProps {
    */
   backgroundMute?: boolean
 
-  /** 进最小缓冲区，单位s
+  /** 最小缓冲区，单位s
    * @default 1
    * @supported weapp
    */
   minCache?: number
 
-  /** 进最小缓冲区，单位s
+  /** 最大缓冲区，单位s
    * @default 3
    * @supported weapp
    */
@@ -80,12 +80,12 @@ interface LivePlayerProps extends StandardProps {
   pictureInPictureMode?: ('push' | 'pop')[] | 'push' | 'pop' | ''
 
   /** 播放状态变化事件，detail = {code}
-   * @supported weapp
+   * @supported weapp, tt
    */
   onStateChange?: CommonEventFunction<LivePlayerProps.onStateChangeEventDetail>
 
   /** 全屏变化事件，detail = {direction, fullScreen}
-   * @supported weapp
+   * @supported weapp, tt
    */
   onFullScreenChange?: CommonEventFunction<LivePlayerProps.onFullScreenChangeEventDetail>
 
@@ -112,14 +112,14 @@ interface LivePlayerProps extends StandardProps {
 
 declare namespace LivePlayerProps {
   /** mode 的合法值 */
-  interface mode {
+  interface Mode {
     /** 直播 */
     live
     /** 实时通话，该模式时延更低 */
     RTC
   }
   /** orientation 的合法值 */
-  interface orientation {
+  interface Orientation {
     /** 竖直 */
     vertical
     /** 水平 */
@@ -151,10 +151,10 @@ declare namespace LivePlayerProps {
     fullScreen: number | boolean
   }
   interface onNetStatusEventDetail {
-    info: netStatus
+    info: NetStatus
   }
   /** 状态码 */
-  interface status {
+  interface Status {
     /** 已经连接服务器 */
     2001
     /** 已经连接 RTMP 服务器,开始拉流 */
@@ -205,11 +205,11 @@ declare namespace LivePlayerProps {
 }
 
 /** 实时音视频播放。相关api：Taro.createLivePlayerContext
- * 
+ *
  * 需要先通过类目审核，再在小程序管理后台，“设置”-“接口设置”中自助开通该组件权限。
  * @classification media
- * @supported weapp
- * @example
+ * @supported weapp, tt
+ * @example_react
  * ```tsx
  * class App extends Components {
  *   render () {
@@ -219,6 +219,12 @@ declare namespace LivePlayerProps {
  *   }
  * }
  * ```
+ * @example_vue
+ * ```html
+ * <template>
+ *   <live-player src="url" mode="live" :autoplay="true"  />
+ * </template>
+ * ```
  * @see https://developers.weixin.qq.com/miniprogram/dev/component/live-player.html
  */
 declare const LivePlayer: ComponentType<LivePlayerProps>

package/types/LivePusher.d.ts

@@ -1,5 +1,5 @@
 import { ComponentType } from 'react'
-import { StandardProps, CommonEventFunction, netStatus } from './common'
+import { StandardProps, CommonEventFunction, NetStatus } from './common'
 
 /** 实时音视频录制。
  * 需要用户授权 scope.camera、scope.record
@@ -46,7 +46,7 @@ interface LivePusherProps extends StandardProps {
    * @default "vertical"
    * @supported weapp
    */
-  orientation?: keyof LivePusherProps.orientation
+  orientation?: keyof LivePusherProps.Orientation
 
   /** 美颜，取值范围 0-9 ，0 表示关闭
    * @default 0
@@ -131,13 +131,13 @@ interface LivePusherProps extends StandardProps {
    * @default "auto"
    * @supported weapp
    */
-  localMirror?: keyof LivePusherProps.localMirror
+  localMirror?: keyof LivePusherProps.LocalMirror
 
   /** 音频混响类型
    * @default 0
    * @supported weapp
    */
-  audioReverbType?: keyof LivePusherProps.audioReverbType
+  audioReverbType?: keyof LivePusherProps.AudioReverbType
 
   /** 开启或关闭麦克风
    * @default true
@@ -161,7 +161,7 @@ interface LivePusherProps extends StandardProps {
    * @default "voicecall"
    * @supported weapp
    */
-  audioVolumeType?: keyof LivePusherProps.audioVolumeType
+  audioVolumeType?: keyof LivePusherProps.AudioVolumeType
 
   /** 上推的视频流的分辨率宽度
    * @default 360
@@ -179,13 +179,13 @@ interface LivePusherProps extends StandardProps {
    * @default smooth
    * @supported weapp
    */
-  beautyStyle?: keyof LivePusherProps.beautyStyleType
+  beautyStyle?: keyof LivePusherProps.BeautyStyleType
 
   /** 设置色彩滤镜
    * @default standard
    * @supported weapp
    */
-  filter?: keyof LivePusherProps.filterType
+  filter?: keyof LivePusherProps.FilterType
 
   /** 状态变化事件，detail = {code}
    * @supported weapp
@@ -225,14 +225,14 @@ interface LivePusherProps extends StandardProps {
 
 declare namespace LivePusherProps {
   /** orientation 的合法值 */
-  interface orientation {
+  interface Orientation {
     /** 竖直 */
     vertical
     /** 水平 */
     horizontal
   }
   /** localMirror 的合法值 */
-  interface localMirror {
+  interface LocalMirror {
     /** 前置摄像头镜像，后置摄像头不镜像 */
     auto
     /** 前后置摄像头均镜像 */
@@ -241,7 +241,7 @@ declare namespace LivePusherProps {
     disable
   }
   /** audioReverbType 的合法值 */
-  interface audioReverbType {
+  interface AudioReverbType {
     /** 关闭 */
     0
     /** KTV */
@@ -260,21 +260,21 @@ declare namespace LivePusherProps {
     7
   }
   /** audioVolumeType 的合法值 */
-  interface audioVolumeType {
+  interface AudioVolumeType {
     /** 媒体音量 */
     media
     /** 通话音量 */
     voicecall
   }
   /** beautyStyleType 的合法值 */
-  interface beautyStyleType {
+  interface BeautyStyleType {
     /** 光滑美颜 */
     smooth
     /** 自然美颜 */
     nature
   }
   /** filterType 的合法值 */
-  interface filterType {
+  interface FilterType {
     /** 标准 */
     standard
     /** 粉嫩 */
@@ -304,7 +304,7 @@ declare namespace LivePusherProps {
   }
   interface onNetstatusEventDetail {
     /** 网络状态 */
-    info: netStatus
+    info: NetStatus
   }
   interface onErrorEventDetail {
     /** 错误信息 */
@@ -324,7 +324,7 @@ declare namespace LivePusherProps {
  * 需要先通过类目审核，再在小程序管理后台，「开发」-「接口设置」中自助开通该组件权限。
  * @classification media
  * @supported weapp
- * @example
+ * @example_react
  * ```tsx
  * class App extends Components {
  *   render () {
@@ -334,6 +334,12 @@ declare namespace LivePusherProps {
  *   }
  * }
  * ```
+ * @example_vue
+ * ```html
+ * <template>
+ *   <live-pusher url="url" mode="RTC" :autopush="true"  />
+ * </template>
+ * ```
  * @see https://developers.weixin.qq.com/miniprogram/dev/component/live-pusher.html
  */
 declare const LivePusher: ComponentType<LivePusherProps>