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

package/types/CoverImage.d.ts

@@ -3,39 +3,81 @@ import { StandardProps, CommonEventFunction } from './common'
 
 interface CoverImageProps extends StandardProps {
   /** 图标路径，支持临时路径、网络地址、云文件ID。暂不支持base64格式。
-   * @supported weapp
+   * @supported weapp, h5
    */
   src: string
 
   /** 图片加载成功时触发
-   * @supported weapp
+   * @supported weapp, h5
    */
   onLoad?: CommonEventFunction
 
   /** 图片加载失败时触发
-   * @supported weapp
+   * @supported weapp, h5
    */
   onError?: CommonEventFunction
 }
 
 /** 覆盖在原生组件之上的图片视图。可覆盖的原生组件同cover-view，支持嵌套在cover-view里。
  * @classification viewContainer
- * @supported weapp, swan, alipay
- * @example
+ * @supported weapp, swan, alipay, h5
+ * @example_react
  * ```tsx
+ * // js
  * class App extends Components {
  *   render () {
  *     return (
+ *       <View className='container'>
  *       <Video id='myVideo' src='src'>
- *         <CoverView class='controls'>
- *           <CoverView class='play' onClick='play'>
- *             <CoverImage class='img' src='src' />
+ *         <CoverView className='controls'>
+ *           <CoverView className='play' onClick='play'>
+ *             <CoverImage className='img' src='src' />
  *           </CoverView>
  *         </CoverView>
  *       </Video>
  *     )
  *   }
  * }
+ * // css
+ * .container {
+ *   position: relative;
+ * }
+ * .controls {
+ *   position: absolute;
+ *   top: 50%;
+ *   left: 50%;
+ *   width: 300px;
+ *   height: 225px;
+ *   transform: translate(-50%, -50%);
+ * }
+ * ```
+ * @example_vue
+ * ```html
+ * <template>
+ *   <view class="container">
+ *     <video id='myvideo' src='https://ugccsy.qq.com/uwMROfz2r5zBIaQXGdGnC2dfDma3J1MItM3912IN4IRQvkRM/o31507f7lcd.mp4?sdtfrom=v1010&guid=aa18cf106b7fdb7e40f2d20b206f2b4f&vkey=63B0FCCC7FC3ADC342C166D86571AE02772258CD9B515B065DC68DF3919D8C288AE831D570ED5E8FE0FF3E81E170D04FF11F874BFDDACF7AAA2C0CFF2ACB39FB1A94DAD1AB859BDA53E4DD6DBCDC1217CEF789A9AC079924E2BBC599EED7A1FFDD60A727F2EB7E7B6472CE63DD4B683C9199DFC78A6A6C4D9891E05467C4B64E'>
+ *     </video>
+ *     <cover-view class='controls'>
+ *       <cover-view class='play' `@tap='play'>
+ *         <cover-image class='img' src='https://img10.360buyimg.com/ling/s345x208_jfs/t1/133501/7/9865/382161/5f5ee31fEbdd6a418/0cdc0156ffff3c23.png' />
+ *       </cover-view>
+ *     </cover-view>
+ *   </view>
+ * </template>
+ *
+ * <style>
+ * .container {
+ *   position: relative;
+ * }
+ * .controls {
+ *   position: absolute;
+ *   top: 50%;
+ *   left: 50%;
+ *   width: 300px;
+ *   height: 225px;
+ *   transform: translate(-50%, -50%);
+ * }
+ * </style>
  * ```
  * @see https://developers.weixin.qq.com/miniprogram/dev/component/cover-image.html
  */

package/types/CoverView.d.ts

@@ -21,22 +21,65 @@ interface CoverViewProps extends ViewProps {
 
 /** 覆盖在原生组件之上的文本视图。可覆盖的原生组件包括 map、video、canvas、camera、live-player、live-pusher 只支持嵌套 cover-view、cover-image，可在 cover-view 中使用 button。
  * @classification viewContainer
- * @supported weapp, swan, alipay
- * @example
+ * @supported weapp, swan, alipay, h5
+ * @example_react
  * ```tsx
+ * // js
  * class App extends Components {
  *   render () {
  *     return (
- *       <Video id='myVideo' src='src'>
- *         <CoverView class='controls'>
- *           <CoverView class='play' onClick='play'>
- *             <CoverImage class='img' src='src' />
+ *       <View className='container'>
+ *         <Video id='myVideo' src='src'>
+ *           <CoverView className='controls'>
+ *             <CoverView className='play' onClick='play'>
+ *               <CoverImage className='img' src='src' />
+ *             </CoverView>
  *           </CoverView>
- *         </CoverView>
- *       </Video>
+ *         </Video>
+ *       </View>
  *     )
  *   }
  * }
+ * // css
+ * .container {
+ *   position: relative;
+ * }
+ * .controls {
+ *   position: absolute;
+ *   top: 50%;
+ *   left: 50%;
+ *   width: 300px;
+ *   height: 225px;
+ *   transform: translate(-50%, -50%);
+ * }
+ * ```
+ * @example_vue
+ * ```html
+ * <template>
+ *   <view class="container">
+ *     <video id='myvideo' src='https://ugccsy.qq.com/uwMROfz2r5zBIaQXGdGnC2dfDma3J1MItM3912IN4IRQvkRM/o31507f7lcd.mp4?sdtfrom=v1010&guid=aa18cf106b7fdb7e40f2d20b206f2b4f&vkey=63B0FCCC7FC3ADC342C166D86571AE02772258CD9B515B065DC68DF3919D8C288AE831D570ED5E8FE0FF3E81E170D04FF11F874BFDDACF7AAA2C0CFF2ACB39FB1A94DAD1AB859BDA53E4DD6DBCDC1217CEF789A9AC079924E2BBC599EED7A1FFDD60A727F2EB7E7B6472CE63DD4B683C9199DFC78A6A6C4D9891E05467C4B64E'>
+ *     </video>
+ *     <cover-view class='controls'>
+ *       <cover-view class='play' `@tap='play'>
+ *         <cover-image class='img' src='https://img10.360buyimg.com/ling/s345x208_jfs/t1/133501/7/9865/382161/5f5ee31fEbdd6a418/0cdc0156ffff3c23.png' />
+ *       </cover-view>
+ *     </cover-view>
+ *   </view>
+ * </template>
+ *
+ * <style>
+ * .container {
+ *   position: relative;
+ * }
+ * .controls {
+ *   position: absolute;
+ *   top: 50%;
+ *   left: 50%;
+ *   width: 300px;
+ *   height: 225px;
+ *   transform: translate(-50%, -50%);
+ * }
+ * </style>
  * ```
  * @see https://developers.weixin.qq.com/miniprogram/dev/component/cover-view.html
  */

package/types/CustomWrapper.d.ts

@@ -11,7 +11,7 @@ interface CustomWrapperProps extends StandardProps {
  * ```tsx
  * import { Component } from 'react'
  * import { CustomWrapper, View, Text } from '@tarojs/components'
- * 
+ *
  * export default class C extends Component {
  *   render () {
  *     return (
@@ -27,4 +27,4 @@ interface CustomWrapperProps extends StandardProps {
  */
 declare const CustomWrapper: ComponentType<CustomWrapperProps>
 
-export { CustomWrapper, CustomWrapperProps }
+export { CustomWrapper, CustomWrapperProps }

package/types/Editor.d.ts

@@ -28,7 +28,7 @@ interface EditorProps extends StandardProps {
   /** 点击图片时显示修改尺寸控件
    * @default false
    * @supported weapp
-   */	
+   */
   showImgResize?: boolean
 
   /** 编辑器初始化完成时触发
@@ -67,18 +67,75 @@ declare namespace EditorProps {
 }
 
 /** 富文本编辑器，可以对图片、文字进行编辑。
- * 
+ *
  * 编辑器导出内容支持带标签的 html和纯文本的 text，编辑器内部采用 delta 格式进行存储。
- * 
+ *
  * 通过 setContents 接口设置内容时，解析插入的 html 可能会由于一些非法标签导致解析错误，建议开发者在小程序内使用时通过 delta 进行插入。
- * 
+ *
  * 富文本组件内部引入了一些基本的样式使得内容可以正确的展示，开发时可以进行覆盖。需要注意的是，在其它组件或环境中使用富文本组件导出的 html 时，需要额外引入 这段样式，并维护 `<ql-container><ql-editor></ql-editor></ql-container>` 的结构。
- * 
+ *
  * 图片控件仅初始化时设置有效。
- * 
+ *
  * *编辑器内支持部分 HTML 标签和内联样式，不支持 **class** 和 **id***
  * @classification forms
  * @supported weapp
+ * @example_react
+ * ```tsx
+ * class App extends Components {
+ *   state = {
+ *     placeholder: '来，输入隔壁的名字试试...'
+ *   }
+ *
+ *   editorReady = e => {
+ *     Taro.createSelectorQuery().select('#editor').context((res) => {
+ *       this.editorCtx = res.context
+ *     }).exec()
+ *   }
+ *
+ *   undo = e => {
+ *     this.editorCtx.undo()
+ *   }
+ *
+ *   render () {
+ *     return (
+ *       <View>
+ *         <Editor id='editor' className='editor' placeholder={this.state.placeholder} onReady={this.editorReady}></Editor>
+ *         <Button type='warn' onClick={this.undo}>撤销</Button>
+ *       </View>
+ *     )
+ *   }
+ * }
+ * ```
+ * @example_vue
+ * ```html
+ * <template>
+ *   <view class="container">
+ *     <editor id="editor" class="editor" :placeholder="placeholder" `@ready="editorReady"></editor>
+ *     <button type="warn" `@tap="undo">撤销</button>
+ *   </view>
+ * </template>
+ *
+ * <script>
+ *   import Taro from '@tarojs/taro'
+ *   export default {
+ *     data() {
+ *       return {
+ *         placeholder: '来，输入隔壁的名字试试...'
+ *       }
+ *     },
+ *     methods: {
+ *       editorReady() {
+ *         Taro.createSelectorQuery().select('#editor').context((res) => {
+ *           this.editorCtx = res.context
+ *         }).exec()
+ *       },
+ *       undo() {
+ *         this.editorCtx.undo()
+ *       }
+ *     }
+ *   }
+ * </script>
+ * ```
  * @see https://developers.weixin.qq.com/miniprogram/dev/component/editor.html
  */
 declare const Editor: ComponentType<EditorProps>

package/types/Form.d.ts

@@ -20,12 +20,12 @@ interface FormProps extends StandardProps {
 
   /** 携带 form 中的数据触发 submit 事件
    * event.detail = { value : {'name': 'value'} , formId: '' }
-   * @supported weapp
+   * @supported weapp, rn, tt
    */
   onSubmit?: CommonEventFunction<FormProps.onSubmitEventDetail>
 
   /** 表单重置时会触发 reset 事件
-   * @supported weapp, h5, rn
+   * @supported weapp, h5, rn, tt
    */
   onReset?: CommonEventFunction
 }
@@ -46,22 +46,22 @@ declare namespace FormProps {
 }
 
 /** 表单。将组件内的用户输入的 switch input checkbox slider radio picker 提交。
- * 
+ *
  * 当点击 form 表单中 form-type 为 submit 的 button 组件时，会将表单组件中的 value 值进行提交，需要在表单组件中加上 name 来作为 key。
  * @classification forms
  * @supported weapp, h5, rn
- * @example
+ * @example_react
  * ```tsx
  * class App extends Component {
- * 
+ *
  *   formSubmit = e => {
  *     console.log(e)
  *   }
- * 
+ *
  *   formReset = e => {
  *     console.log(e)
  *   }
- * 
+ *
  *   render () {
  *     return (
  *       <Form onSubmit={this.formSubmit} onReset={this.formReset} >
@@ -73,6 +73,37 @@ declare namespace FormProps {
  *   }
  * }
  * ```
+ * @example_vue
+ * ```html
+ * <template>
+ *   <form `@submit="formSubmit" `@reset="formReset" >
+ *       <view class="taro-example-body">
+ *         <switch name="switch" class="form-switch"></Switch>
+ *       </view>
+ *       <view class="taro-example-btns">
+ *         <button form-type="submit">Submit</button>
+ *         <button type="default" form-type="reset">Reset</button>
+ *     </view>
+ *   </form>
+ * </template>
+ *
+ * <script>
+ * export default {
+ *   data() {
+ *     return {}
+ *   },
+ *   methods: {
+ *     formSubmit (e) {
+ *       console.log(e)
+ *     },
+ *
+ *     formReset (e) {
+ *       console.log(e)
+ *     }
+ *   }
+ * }
+ * </script>
+ * ```
  * @see https://developers.weixin.qq.com/miniprogram/dev/component/form.html
  */
 declare const Form: ComponentType<FormProps>

package/types/FunctionalPageNavigator.d.ts

@@ -6,12 +6,12 @@ interface FunctionalPageNavigatorProps extends StandardProps {
    * @default "release"
    * @supported weapp
    */
-  version?: keyof FunctionalPageNavigatorProps.version
+  version?: keyof FunctionalPageNavigatorProps.Version
 
   /** 要跳转到的功能页
    * @supported weapp
    */
-  name?: keyof FunctionalPageNavigatorProps.name
+  name?: keyof FunctionalPageNavigatorProps.Name
 
   /** 功能页参数，参数格式与具体功能页相关
    * @supported weapp
@@ -36,7 +36,7 @@ interface FunctionalPageNavigatorProps extends StandardProps {
 
 declare namespace FunctionalPageNavigatorProps {
   /** version 的合法值 */
-  interface version {
+  interface Version {
     /** 开发版 */
     develop
     /** 体验版 */
@@ -45,7 +45,7 @@ declare namespace FunctionalPageNavigatorProps {
     release
   }
   /** name 的合法值 */
-  interface name {
+  interface Name {
     /** [用户信息功能页](https://developers.weixin.qq.com/miniprogram/dev/framework/plugin/functional-pages/user-info.html) */
     loginAndGetUserInfo
     /** [支付功能页](https://developers.weixin.qq.com/miniprogram/dev/framework/plugin/functional-pages/request-payment.html) */

package/types/Icon.d.ts

@@ -50,7 +50,7 @@ declare namespace IconProps {
 /** 图标。组件属性的长度单位默认为 px
  * @classification base
  * @supported weapp, swan, alipay, tt, h5, rn
- * @example
+ * @example_react
  * ```tsx
  * export default class PageView extends Component {
  *   constructor() {
@@ -76,6 +76,22 @@ declare namespace IconProps {
  *   }
  * }
  * ```
+ * @example_vue
+ * <template>
+ *   <view class="components-page">
+ *     <icon size="60" type="success" />
+ *     <icon size="60" type="info" />
+ *     <icon size="60" type="warn" color="#ccc" />
+ *     <icon size="60" type="warn" />
+ *     <icon size="60" type="waiting" />
+ *     <icon size="20" type="success_no_circle" />
+ *     <icon size="20" type="warn" />
+ *     <icon size="20" type="success" />
+ *     <icon size="20" type="download" />
+ *     <icon size="20" type="clear" color="red" />
+ *     <icon size="20" type="search" />
+ *   </view>
+ * </template>
  * @see https://developers.weixin.qq.com/miniprogram/dev/component/icon.html
  */
 declare const Icon: ComponentType<IconProps>

package/types/Image.d.ts

@@ -12,7 +12,7 @@ interface ImageProps extends StandardProps {
    * @supported weapp, h5, rn, swan, alipay, tt
    * @rn 部分支持 scaleToFill, aspectFit, aspectFill, widthFix
    */
-  mode?: keyof ImageProps.mode
+  mode?: keyof ImageProps.Mode
 
 	/** 默认不解析 webP 格式，只支持网络资源
    * @default false
@@ -20,9 +20,15 @@ interface ImageProps extends StandardProps {
 	 */
 	webp?: boolean
 
+  /** 默认不解析 svg 格式，svg 图片只支持 aspectFit
+   * @default false
+   * @supported rn
+	 */
+   svg?: boolean
+
   /** 图片懒加载。只针对 page 与 scroll-view 下的 image 有效
    * @default false
-   * @supported weapp, swan, alipay, tt
+   * @supported weapp, swan, alipay, tt, h5
    */
   lazyLoad?: boolean
 
@@ -47,11 +53,16 @@ interface ImageProps extends StandardProps {
    * @supported h5
    */
   imgProps?: ImgHTMLAttributes<HTMLImageElement>
+
+  /** 用于透传 `WebComponents` 上的属性到内部 H5 标签上
+   * @supported h5
+   */
+  nativeProps?: Record<string, unknown>
 }
 
 declare namespace ImageProps {
   /** mode 的合法值 */
-  interface mode {
+  interface Mode {
     /** 缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素 */
     scaleToFill
     /** 缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。 */
@@ -94,17 +105,17 @@ declare namespace ImageProps {
 }
 
 /** 图片。支持 JPG、PNG、SVG、WEBP、GIF 等格式以及云文件ID。
- * 
+ *
  * **Note:** 为实现小程序的 `mode` 特性，在 H5 组件中使用一个 `div` 容器来对内部的 `img` 进行展示区域的裁剪，因此请勿使用元素选择器来重置 `img` 的样式！
  * @classification media
  * @supported weapp, h5, rn, swan, alipay, tt
- * @example
+ * @example_react
  * ```tsx
  * export default class PageView extends Component {
  *   constructor() {
  *     super(...arguments)
  *   }
- * 
+ *
  *   render() {
  *     return (
  *       <View className='components-page'>
@@ -121,6 +132,21 @@ declare namespace ImageProps {
  *   }
  * }
  * ```
+ * @example_vue
+ * ```html
+ * <template>
+ *   <view class="components-page">
+ *     <image
+ *       style="width: 300px;height: 100px;background: #fff;"
+ *       src="nerv_logo.png"
+ *     />
+ *     <image
+ *       style="width: 300px;height: 100px;background: #fff;"
+ *       src="https://camo.githubusercontent.com/3e1b76e514b895760055987f164ce6c95935a3aa/687474703a2f2f73746f726167652e333630627579696d672e636f6d2f6d74642f686f6d652f6c6f676f2d3278313531333833373932363730372e706e67"
+ *     />
+ *   </view>
+ * </template>
+ * ```
  * @see https://developers.weixin.qq.com/miniprogram/dev/component/image.html
  */
 declare const Image: ComponentType<ImageProps>