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

package/types/Text.d.ts

@@ -41,7 +41,7 @@ declare namespace TextProps {
 /** 文本
  * @classification base
  * @supported weapp, swan, alipay, tt, h5, rn
- * @example
+ * @example_react
  * ```tsx
  * export default class PageView extends Component {
  *   state = {
@@ -84,6 +84,43 @@ declare namespace TextProps {
  *   }
  * }
  * ```
+ * @example_vue
+ * ``` html
+ * <template>
+ *   <view class="container">
+ *     <view v-for="(item, index) in contents">
+ *       <text>{{item.text}} line {{index + 1}}</text>
+ *     </view>
+ *     <button class="btn-max-w button_style" :plain="true" type="default" `@tap="add">add line</button>
+ *     <button class="btn-max-w button_style" :plain="true" type="default" :disabled="contentsLen ? false : true" `@tap="remove">remove line</button>
+ * </template>
+ *
+ * <script>
+ * export default {
+ *   data() {
+ *     return {
+ *       contents: [],
+ *       contentsLen: 0
+ *     }
+ *   },
+ *   methods: {
+ *     add () {
+ *       const cot = this.contents.slice()
+ *       cot.push({ text: 'hello world' })
+ *       this.contents = cot
+ *       this.contentsLen = cot.length
+ *     },
+ *
+ *     remove () {
+ *       const cot = this.contents.slice()
+ *       cot.pop()
+ *       this.contents = cot
+ *       this.contentsLen = cot.length
+ *     }
+ *   }
+ * }
+ * </script>
+ * ```
  * @see https://developers.weixin.qq.com/miniprogram/dev/component/text.html
  */
 declare const Text: ComponentType<TextProps>

package/types/Textarea.d.ts

@@ -3,35 +3,35 @@ import { StandardProps, CommonEventFunction, FormItemProps } from './common'
 
 interface TextareaProps extends StandardProps, FormItemProps {
   /** 输入框的内容
-   * @supported weapp, h5, rn
+   * @supported weapp, h5, rn, tt
    */
   value?: string
 
   /** 输入框为空时占位符
-   * @supported weapp, h5, rn
+   * @supported weapp, h5, rn, tt
    */
   placeholder?: string
 
   /** 指定 placeholder 的样式
-   * @supported weapp
+   * @supported weapp, tt
    */
   placeholderStyle?: string
 
   /** 指定 placeholder 的样式类
    * @default "textarea-placeholder"
-   * @supported weapp
+   * @supported weapp, tt
    */
   placeholderClass?: string
 
   /** 是否禁用
    * @default false
-   * @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
 
@@ -43,13 +43,13 @@ interface TextareaProps extends StandardProps, FormItemProps {
 
   /** 获取焦点
    * @default false
-   * @supported weapp, rn
+   * @supported weapp, rn, tt
    */
   focus?: boolean
 
   /** 是否自动增高，设置 autoHeight 时，style.height不生效
    * @default false
-   * @supported weapp, rn
+   * @supported weapp, rn, tt
    */
   autoHeight?: boolean
 
@@ -61,76 +61,76 @@ interface TextareaProps extends StandardProps, FormItemProps {
 
   /** 指定光标与键盘的距离，单位 px 。取 Textarea 距离底部的距离和 cursorSpacing 指定的距离的最小值作为光标与键盘的距离
    * @default 0
-   * @supported weapp
+   * @supported weapp, tt
    */
   cursorSpacing?: number
 
   /** 指定 focus 时的光标位置
    * @default -1
-   * @supported weapp
+   * @supported weapp, tt
    */
   cursor?: number
 
   /** 是否显示键盘上方带有”完成“按钮那一栏
    * @default true
-   * @supported weapp
+   * @supported weapp, tt
    */
   showConfirmBar?: boolean
 
   /** 光标起始位置，自动聚集时有效，需与 selectionEnd 搭配使用
    * @default -1
-   * @supported weapp, rn
+   * @supported weapp, rn, tt
    */
   selectionStart?: number
 
   /** 光标结束位置，自动聚集时有效，需与 selectionStart 搭配使用
    * @default -1
-   * @supported weapp, rn
+   * @supported weapp, rn, tt
    */
   selectionEnd?: number
 
   /** 键盘弹起时，是否自动上推页面
    * @default true
-   * @supported weapp
+   * @supported weapp, tt
    */
   adjustPosition?: boolean
 
   /** focus 时，点击页面的时候不收起键盘
    * @default false
-   * @supported weapp
+   * @supported weapp, tt
    */
   holdKeyboard?: boolean
 
   /** 是否去掉 iOS 下的默认内边距
    * @default false
-   * @supported weapp
+   * @supported weapp, tt
    */
   disableDefaultPadding?: boolean
 
   /** 输入框聚焦时触发
-   * @supported weapp, h5, rn
+   * @supported weapp, h5, rn, tt
    */
   onFocus?: CommonEventFunction<TextareaProps.onFocusEventDetail>
 
   /** 输入框失去焦点时触发
-   * @supported weapp, h5, rn
+   * @supported weapp, h5, rn, tt
    */
   onBlur?: CommonEventFunction<TextareaProps.onBlurEventDetail>
 
   /** 输入框行数变化时调用，event.detail = {height: 0, heightRpx: 0, lineCount: 0}
-   * @supported weapp, rn
+   * @supported weapp, rn, tt
    */
   onLineChange?: CommonEventFunction<TextareaProps.onLineChangeEventDetail>
 
   /** 当键盘输入时，触发 input 事件，event.detail = {value, cursor, keyCode}
    *
    * **onInput 处理函数的返回值并不会反映到 textarea 上**
-   * @supported weapp, h5, rn
+   * @supported weapp, h5, rn, tt
    */
   onInput?: CommonEventFunction<TextareaProps.onInputEventDetail>
 
   /** 点击完成时， 触发 confirm 事件，event.detail = {value: value}
-   * @supported weapp, rn
+   * @supported weapp, rn, tt
    */
   onConfirm?: CommonEventFunction<TextareaProps.onConfirmEventDetail>
 
@@ -138,6 +138,11 @@ interface TextareaProps extends StandardProps, FormItemProps {
    * @supported weapp
    */
   onKeyboardHeightChange?: CommonEventFunction<TextareaProps.onKeyboardHeightChangeEventDetail>
+
+  /** 用于透传 `WebComponents` 上的属性到内部 H5 标签上
+   * @supported h5
+   */
+  nativeProps?: Record<string, unknown>
 }
 
 declare namespace TextareaProps {
@@ -181,7 +186,7 @@ declare namespace TextareaProps {
 /** 多行输入框。该组件是原生组件，使用时请注意相关限制
  * @classification forms
  * @supported weapp, h5, rn
- * @example
+ * @example_react
  * ```tsx
  * export default class PageView extends Component {
  *   constructor() {
@@ -200,6 +205,17 @@ declare namespace TextareaProps {
  *   }
  * }
  * ```
+ * @example_vue
+ * ```html
+ * <template>
+ *   <view class="components-page">
+ *     <text>输入区域高度自适应，不会出现滚动条</text>
+ *     <textarea style="background:#efefef;width:100%;min-height:80px;padding:0 30rpx;" :auto-height="true" />
+ *     <text>这是一个可以自动聚焦的 textarea</text>
+ *     <textarea style="background:#efefef;width:100%;height:80px;padding:0 30rpx;" :auto-focusd="true" />
+ *   </view>
+ * </template>
+ * ```
  * @see https://developers.weixin.qq.com/miniprogram/dev/component/textarea.html
  */
 declare const Textarea: ComponentType<TextareaProps>

package/types/Video.d.ts

@@ -3,19 +3,19 @@ import { StandardProps, CommonEventFunction } from './common'
 
 interface VideoProps extends StandardProps {
   /** 要播放视频的资源地址
-   * @supported weapp, h5, swan, alipay, tt
+   * @supported weapp, h5, swan, alipay, tt, rn
    */
   src: string
 
   /** 指定视频时长
-   * @supported weapp, swan, alipay
+   * @supported weapp, swan, alipay, rn
    * @h5 待定
    */
   duration?: number
 
   /** 是否显示默认播放控件（播放/暂停按钮、播放进度、时间）
    * @default true
-   * @supported weapp, h5, swan, alipay, tt
+   * @supported weapp, h5, swan, alipay, tt, rn
    */
   controls?: boolean
 
@@ -41,24 +41,24 @@ interface VideoProps extends StandardProps {
 
   /** 是否自动播放
    * @default false
-   * @supported weapp, h5, swan, alipay, tt
+   * @supported weapp, h5, swan, alipay, tt, rn
    */
   autoplay?: boolean
 
   /** 是否循环播放
    * @default false
-   * @supported weapp, h5, swan, alipay, tt
+   * @supported weapp, h5, swan, alipay, tt, rn
    */
   loop?: boolean
 
   /** 是否静音播放
    * @default false
-   * @supported weapp, h5, swan, alipay, tt
+   * @supported weapp, h5, swan, alipay, tt, rn
    */
   muted?: boolean
 
   /** 指定视频初始播放位置
-   * @supported weapp, h5, swan, alipay, tt
+   * @supported weapp, h5, swan, alipay, tt, rn
    */
   initialTime?: number
 
@@ -76,54 +76,54 @@ interface VideoProps extends StandardProps {
 
   /** 若不设置，宽度大于240时才会显示
    * @default true
-   * @supported weapp, swan
+   * @supported weapp, swan, tt
    * @h5 待定
    */
   showProgress?: boolean
 
   /** 是否显示全屏按钮
    * @default true
-   * @supported weapp, swan, alipay
+   * @supported weapp, swan, alipay, tt
    * @h5 待定
    */
   showFullscreenBtn?: boolean
 
   /** 是否显示视频底部控制栏的播放按钮
    * @default true
-   * @supported weapp, swan, alipay
+   * @supported weapp, swan, alipay, tt
    * @h5 待定
    */
   showPlayBtn?: boolean
 
   /** 是否显示视频中间的播放按钮
    * @default true
-   * @supported weapp, swan, alipay
+   * @supported weapp, swan, alipay, rn
    * @h5 待定
    */
   showCenterPlayBtn?: boolean
 
   /** 是否开启控制进度的手势
    * @default true
-   * @supported weapp, swan, alipay
+   * @supported weapp, swan, alipay, tt
    * @h5 待定
    */
   enableProgressGesture?: boolean
 
   /** 当视频大小与 video 容器大小不一致时，视频的表现形式
    * @default "contain"
-   * @supported weapp, swan, alipay
+   * @supported weapp, swan, alipay, tt
    * @h5 待定
    */
-  objectFit?: keyof VideoProps.objectFit
+  objectFit?: keyof VideoProps.ObjectFit
 
   /** 视频封面的图片网络资源地址，如果 controls 属性值为 false 则设置 poster 无效
-   * @supported weapp, h5, swan, alipay, tt
+   * @supported weapp, h5, swan, alipay, tt, rn
    */
   poster?: string
 
   /** 是否显示静音按钮
    * @default false
-   * @supported weapp
+   * @supported weapp, tt
    * @h5 待定
    */
   showMuteBtn?: boolean
@@ -139,14 +139,14 @@ interface VideoProps extends StandardProps {
    * - `center`: 视频中间
    *
    * @default 'bottom'
-   * @supported weapp
+   * @supported weapp, tt
    * @h5 待定
    */
-  playBtnPosition?: keyof VideoProps.playBtnPosition
+  playBtnPosition?: keyof VideoProps.PlayBtnPosition
 
   /** 是否开启播放手势，即双击切换播放/暂停
    * @default false
-   * @supported weapp
+   * @supported weapp, tt
    * @h5 待定
    */
   enablePlayGesture?: boolean
@@ -167,14 +167,14 @@ interface VideoProps extends StandardProps {
 
   /** 在非全屏模式下，是否开启亮度与音量调节手势（同 `page-gesture`）
    * @default false
-   * @supported weapp, swan
+   * @supported weapp, swan, tt
    * @h5 待定
    */
   vslideGesture?: boolean
 
   /** 在全屏模式下，是否开启亮度与音量调节手势
    * @default true
-   * @supported weapp
+   * @supported weapp, tt
    * @h5 待定
    */
   vslideGestureInFullscreen?: boolean
@@ -203,12 +203,12 @@ interface VideoProps extends StandardProps {
   /**
    * 是否在小窗模式下显示播放进度（目前有bug，先注释掉）
    * @supported weapp
-   * 
+   *
    * 先注释掉，原因如下：
    * 该属性超过了 wxml 属性的长度限制，实际无法使用且导致编译报错。可等微信官方修复后再放开。
    * 参考1：https://developers.weixin.qq.com/community/develop/doc/000a429beb87f0eac07acc0fc5b400
    * 参考2: https://developers.weixin.qq.com/community/develop/doc/0006883619c48054286a4308258c00?_at=vyxqpllafi
-   * 
+   *
    */
   // pictureInPictureShowProgress?: boolean
 
@@ -217,7 +217,7 @@ interface VideoProps extends StandardProps {
    * @supported weapp
    */
   enableAutoRotation?: boolean
-  
+
   /**
    * 是否显示锁屏按钮，仅在全屏时显示，锁屏后控制栏的操作
    * @supported weapp
@@ -225,31 +225,31 @@ interface VideoProps extends StandardProps {
   showScreenLockButton?: boolean
 
   /** 当开始/继续播放时触发 play 事件
-   * @supported weapp, h5, swan, alipay, tt
+   * @supported weapp, h5, swan, alipay, tt, rn
    */
   onPlay?: CommonEventFunction
 
   /** 当暂停播放时触发 pause 事件
-   * @supported weapp, h5, swan, alipay, tt
+   * @supported weapp, h5, swan, alipay, tt, rn
    */
   onPause?: CommonEventFunction
 
   /** 当播放到末尾时触发 ended 事件
-   * @supported weapp, h5, swan, alipay, tt
+   * @supported weapp, h5, swan, alipay, tt, rn
    */
   onEnded?: CommonEventFunction
 
   /** 播放进度变化时触发, 触发频率 250ms 一次
    *
    * event.detail = {currentTime, duration}
-   * @supported weapp, h5, swan, alipay, tt
+   * @supported weapp, h5, swan, alipay, tt, rn
    */
   onTimeUpdate?: CommonEventFunction<VideoProps.onTimeUpdateEventDetail>
 
   /** 当视频进入和退出全屏时触发
    *
    * event.detail = {fullScreen, direction}，direction取为 vertical 或 horizontal
-   * @supported weapp, swan, alipay
+   * @supported weapp, swan, alipay, rn, tt
    * @h5 待定
    */
   onFullscreenChange?: CommonEventFunction<VideoProps.onFullscreenChangeEventDetail>
@@ -257,13 +257,13 @@ interface VideoProps extends StandardProps {
   /** 当视频进入和退出全屏时触发
    *
    * event.detail = {fullScreen, direction}，direction 取为 vertical 或 horizontal
-   * @supported weapp, swan
+   * @supported weapp, swan, tt
    * @h5 待定
    */
   onWaiting?: CommonEventFunction<VideoProps.onWaitingEventDetail>
 
   /** 视频播放出错时触发
-   * @supported weapp, h5, swan, alipay, tt
+   * @supported weapp, h5, swan, alipay, tt, rn
    */
   onError?: CommonEventFunction
   /** 加载进度变化时触发，只支持一段加载
@@ -273,7 +273,7 @@ interface VideoProps extends StandardProps {
   onProgress?: CommonEventFunction<VideoProps.onProgressEventDetail>
 
   /** 视频元数据加载完成时触发。event.detail = {width, height, duration}
-   * @supported weapp
+   * @supported weapp, rn, tt
    */
   onLoadedMetaData?: CommonEventFunction
 
@@ -300,6 +300,11 @@ interface VideoProps extends StandardProps {
    * @supported weapp
    */
   onSeekComplete?: CommonEventFunction
+
+  /** 用于透传 `WebComponents` 上的属性到内部 H5 标签上
+   * @supported h5
+   */
+  nativeProps?: Record<string, unknown>
 }
 
 declare namespace VideoProps {
@@ -313,7 +318,7 @@ declare namespace VideoProps {
     '-90'
   }
   /** objectFit 的合法值 */
-  interface objectFit {
+  interface ObjectFit {
     /** 包含 */
     contain
     /** 填充 */
@@ -322,7 +327,7 @@ declare namespace VideoProps {
     cover
   }
   /** playBtnPosition 的合法值 */
-  interface playBtnPosition {
+  interface PlayBtnPosition {
     /** controls bar上 */
     bottom
     /** 视频中间 */
@@ -359,27 +364,27 @@ declare namespace VideoProps {
 }
 
 /** 视频。相关api：Taro.createVideoContext
- * 
+ *
  * 备注：h5上因为没有测试，所以暂时写了“待定”，需要`Video`来确认。
  * @classification media
  * @supported weapp, h5, swan, alipay, tt
- * @example
+ * @example_react
  * ```tsx
  * export default class PageView extends Component {
  *   constructor() {
  *     super(...arguments)
  *   }
- * 
+ *
  *   render() {
  *     return (
  *       <View className='components-page'>
  *         <Video
- *           src='http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400'
+ *           id='video'
+ *           src='https://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400'
+ *           poster='https://misc.aotu.io/booxood/mobile-video/cover_900x500.jpg'
+ *           initialTime={0}
  *           controls={true}
  *           autoplay={false}
- *           poster='http://misc.aotu.io/booxood/mobile-video/cover_900x500.jpg'
- *           initialTime='0'
- *           id='video'
  *           loop={false}
  *           muted={false}
  *         />
@@ -388,6 +393,21 @@ declare namespace VideoProps {
  *   }
  * }
  * ```
+ * @example_vue
+ * ```html
+ * <template>
+ *   <video
+ *     id="video"
+ *     src="https://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400"
+ *     poster="https://misc.aotu.io/booxood/mobile-video/cover_900x500.jpg"
+ *     initial-time="0"
+ *     :controls="true"
+ *     :autoplay="false"
+ *     :loop="false"
+ *     :muted="false"
+ *   />
+ * </template>
+ * ```
  * @see https://developers.weixin.qq.com/miniprogram/dev/component/video.html
  */
 declare const Video: ComponentType<VideoProps>

package/types/View.d.ts

@@ -1,6 +1,6 @@
 import { ComponentType } from 'react'
-import { StandardProps } from './common'
 import { StyleProp, ViewStyle } from 'react-native'
+import { StandardProps } from './common'
 
 interface ViewProps extends StandardProps {
   /** 指定按下去的样式类。当 `hover-class="none"` 时，没有点击态效果
@@ -17,7 +17,7 @@ interface ViewProps extends StandardProps {
   hoverStyle?: StyleProp<ViewStyle>
 
   /** 指定是否阻止本节点的祖先节点出现点击态
-   * @default fasle
+   * @default false
    * @supported weapp, swan, alipay, tt
    */
   hoverStopPropagation?: boolean
@@ -41,7 +41,7 @@ interface ViewProps extends StandardProps {
 /** 视图容器
  * @classification viewContainer
  * @supported weapp, swan, alipay, tt, h5, rn
- * @example
+ * @example_react
  * ```tsx
  * export default class PageView extends Component {
  *   constructor() {
@@ -68,6 +68,38 @@ interface ViewProps extends StandardProps {
  *   }
  * }
  * ```
+ * @example_vue
+ * ```html
+ * <template>
+ *   <view class="components-page">
+ *     <text>flex-direction: row 横向布局</text>
+ *     <view class="flex-wrp flex-wrp-row" hover-class="hover" >
+ *       <view class="flex-item demo-text-1" :hover-stop-propagation="true" />
+ *       <view class="flex-item demo-text-2" hover-start-time="1000" hover-class="hover" />
+ *       <view class="flex-item demo-text-3" hover-stayTime="1000" hover-class="hover" />
+ *     </view>
+ *     <text>flex-direction: column 纵向布局</text>
+ *     <view class="flex-wrp flex-wrp-column">
+ *       <view class="flex-item flex-item-V demo-text-1" />
+ *       <view class="flex-item flex-item-V demo-text-2" />
+ *       <view class="flex-item flex-item-V demo-text-3" />
+ *     </view>
+ *   </view>
+ * </template>
+ *
+ * <style>
+ * .flex-wrp { display: flex; }
+ * .flex-wrp-column{ flex-direction: column; }
+ * .flex-wrp-row { flex-direction:row; padding: 20px; background: #f1f1f1; }
+ * .flex-item { width: 180px; height: 90px; }
+ * .demo-text-1 { background: #ccc; }
+ * .demo-text-2 { background: #999; }
+ * .demo-text-3 { background: #666; }
+ * .hover {
+ *   background: #000;
+ * }
+ * </style>
+ * ```
  * @see https://developers.weixin.qq.com/miniprogram/dev/component/view.html
  */
 declare const View: ComponentType<ViewProps>

package/types/VoipRoom.d.ts

@@ -0,0 +1,70 @@
+import { ComponentType } from 'react'
+import { CommonEventFunction, StandardProps } from './common'
+
+interface VoipRoomProps extends StandardProps {
+  /** 进入房间用户的 openid
+   * @default none
+   * @supported weapp
+   */
+  openId?: string
+
+  /** 对话窗口类型，自身传入 camera，其它用户传入 video
+   * @default camera
+   * @supported weapp
+   */
+  mode?: keyof VoipRoomProps.Mode
+
+  /** 仅在 mode 为 camera 时有效，前置或后置，值为front, back
+   * @default front
+   * @supported weapp
+   */
+  devicePosition?: keyof VoipRoomProps.DevicePosition
+
+  /** 创建对话窗口失败时触发
+   * @supported weapp
+   */
+  onError?: CommonEventFunction
+}
+
+declare namespace VoipRoomProps {
+  /** 对话窗口类型 */
+  interface Mode {
+    camera
+    video
+  }
+
+  /** 摄像头类型 */
+  interface DevicePosition {
+    front
+    back
+  }
+}
+
+/** 多人音视频对话
+ *
+ * 需用户授权 `scope.camera`、`scope.record`。相关接口： [Taro.joinVoIPChat](/docs/apis/media/voip/joinVoIPChat)
+ * 开通该组件权限后，开发者可在 joinVoIPChat 成功后，获取房间成员的 openid，传递给 voip-room 组件，以显示成员画面。
+ * @classification media
+ * @supported weapp
+ * @example
+ * ```tsx
+ * export default class PageView extends Component {
+ *   constructor() {
+ *     super(...arguments)
+ *   }
+ *
+ *   render() {
+ *     return (
+ *       <VoipRoom
+ *         openId="{{item}}"
+ *         mode="{{selfOpenId === item ? 'camera' : 'video'}}">
+ *       </VoipRoom>
+ *     )
+ *   }
+ * }
+ * ```
+ * @see https://developers.weixin.qq.com/miniprogram/dev/component/voip-room.html
+ */
+declare const VoipRoom: ComponentType<VoipRoomProps>
+
+export { VoipRoom, VoipRoomProps }