@tarojs/components 3.4.0-beta.3 → 3.5.0-canary.1

package/types/Form.d.ts

@@ -20,7 +20,7 @@ interface FormProps extends StandardProps {
 
   /** 携带 form 中的数据触发 submit 事件
    * event.detail = { value : {'name': 'value'} , formId: '' }
-   * @supported weapp
+   * @supported weapp, rn
    */
   onSubmit?: CommonEventFunction<FormProps.onSubmitEventDetail>
 
@@ -50,7 +50,7 @@ declare namespace FormProps {
  * 当点击 form 表单中 form-type 为 submit 的 button 组件时，会将表单组件中的 value 值进行提交，需要在表单组件中加上 name 来作为 key。
  * @classification forms
  * @supported weapp, h5, rn
- * @example
+ * @example_react
  * ```tsx
  * class App extends Component {
  * 
@@ -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/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

@@ -28,7 +28,7 @@ interface ImageProps extends StandardProps {
 
   /** 图片懒加载。只针对 page 与 scroll-view 下的 image 有效
    * @default false
-   * @supported weapp, swan, alipay, tt
+   * @supported weapp, swan, alipay, tt, h5
    */
   lazyLoad?: boolean
 
@@ -53,6 +53,11 @@ interface ImageProps extends StandardProps {
    * @supported h5
    */
   imgProps?: ImgHTMLAttributes<HTMLImageElement>
+
+  /** 用于透传 `WebComponents` 上的属性到内部 H5 标签上
+   * @supported h5
+   */
+  nativeProps?: Record<string, unknown>
 }
 
 declare namespace ImageProps {
@@ -104,7 +109,7 @@ declare namespace ImageProps {
  * **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() {
@@ -127,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>

package/types/Input.d.ts

@@ -12,7 +12,7 @@ interface InputProps extends StandardProps, FormItemProps {
    * @supported weapp, h5, rn
    * @rn 部分支持
    */
-  type?: 'text' | 'number' | 'idcard' | 'digit'
+  type?: 'text' | 'number' | 'idcard' | 'digit' | 'safe-password' | 'nickname'
 
   /** 是否是密码类型
    * @supported weapp, h5, rn
@@ -63,7 +63,6 @@ interface InputProps extends StandardProps, FormItemProps {
    */
   focus?: boolean
 
-
   /** 设置键盘右下角按钮的文字
    * @default done
    * @supported weapp, rn
@@ -112,6 +111,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
@@ -147,7 +181,7 @@ interface InputProps extends StandardProps, FormItemProps {
    *
    * event.detail = {value: value}
    * @supported weapp, rn
-   * @h5 借用[Form 组件](form.html)的`onSubmit`事件来替代
+   * @h5 借用[Form 组件](./form)的`onSubmit`事件来替代
    */
   onConfirm?: CommonEventFunction<InputProps.inputValueEventDetail>
 
@@ -157,9 +191,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,7 +230,7 @@ declare namespace InputProps {
 /** 输入框。该组件是原生组件，使用时请注意相关限制
  * @classification forms
  * @supported weapp, h5, rn
- * @example
+ * @example_react
  * ```tsx
  * class App extends Component {
  *
@@ -204,7 +244,7 @@ declare namespace InputProps {
  *             <Text>数字输入的 input</Text>
  *             <Input type='number' placeholder='这是一个数字输入框'/>
  *             <Text>密码输入的 input</Text>
- *             <Input type='text' password placeholder='这是一个密码输入框'/>
+ *             <Input type='password' password placeholder='这是一个密码输入框'/>
  *             <Text>带小数点的 input</Text>
  *             <Input type='digit' placeholder='带小数点的数字键盘'/>
  *             <Text>身份证输入的 input</Text>
@@ -216,6 +256,27 @@ declare namespace InputProps {
  *   }
  * }
  * ```
+ * @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/Label.d.ts

@@ -3,8 +3,7 @@ import { StandardProps } from './common'
 
 interface LabelProps extends StandardProps {
 
-  /** 绑定控件的 id
-   */
+  /** 绑定控件的 id */
   for?: string
 }
 
@@ -12,8 +11,8 @@ interface LabelProps extends StandardProps {
  * 
  * 使用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 {
  * 
@@ -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

@@ -209,7 +209,7 @@ declare namespace LivePlayerProps {
  * 需要先通过类目审核，再在小程序管理后台，“设置”-“接口设置”中自助开通该组件权限。
  * @classification media
  * @supported weapp
- * @example
+ * @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

@@ -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>

package/types/Map.d.ts

@@ -551,7 +551,7 @@ declare namespace MapProps {
 /** 地图。相关api Taro.createMapContext。
  * @classification maps
  * @supported weapp, alipay, swan
- * @example
+ * @example_react
  * ```tsx
  * class App extends Component {
  *   onTap () {}
@@ -562,6 +562,60 @@ declare namespace MapProps {
  *   }
  * }
  * ```
+ * @example_vue
+ * ```html
+ * <template>
+ *   <map
+ *     id="map"
+ *     style="width: 100%; height: 300px;"
+ *     longitude="113.324520"
+ *     latitude="23.099994"
+ *     scale="14"
+ *     :markers="markers"
+ *     :polyline="polyline"
+ *     :show-location="true"
+ *     `@regionchange="regionchange"
+ *     `@markertap="markertap"
+ *   />
+ * </template>
+ * 
+ * <script>
+ * export default {
+ *   data() {
+ *     return {
+ *       markers: [{
+ *         iconPath: "https://avatars2.githubusercontent.com/u/1782542?s=460&u=d20514a52100ed1f82282bcfca6f49052793c889&v=4",
+ *         id: 0,
+ *         latitude: 23.099994,
+ *         longitude: 113.324520,
+ *         width: 50,
+ *         height: 50
+ *       }],
+ *       polyline: [{
+ *         points: [{
+ *           longitude: 113.3245211,
+ *           latitude: 23.10229
+ *         }, {
+ *           longitude: 113.324520,
+ *           latitude: 23.21229
+ *         }],
+ *         color:"#FF0000DD",
+ *         width: 2,
+ *         dottedLine: true
+ *       }]
+ *     }
+ *   },
+ *   methods: {
+ *     regionchange(e) {
+ *       console.log(e.type)
+ *     },
+ *     markertap(e) {
+ *       console.log("markertap:", e.detail.markerId)
+ *     }
+ *   }
+ * }
+ * </script>
+ * ```
  * @see https://developers.weixin.qq.com/miniprogram/dev/component/map.html#map
  */
 declare const Map: ComponentType<MapProps>

package/types/MatchMedia.d.ts

@@ -40,20 +40,39 @@ interface MatchMediaProps extends StandardProps {
 
 /** media query 匹配检测节点。可以指定一组 media query 规则，满足时，这个节点才会被展示。
  * 通过这个节点可以实现“页面宽高在某个范围时才展示某个区域”这样的效果。
- * 基础库 2.11.1 开始支持。
  * @supported weapp
- * @example
+ * @classification viewContainer
+ * @example_react
  * ```tsx
  * class App extends Components {
  *   render () {
  *     return (
- *        <MatchMedia minWidth='400'>
-            <View>title</View>
-          </MatchMedia>
+ *       <View>
+ *         <MatchMedia minWidth="300" maxWidth="600">
+ *           <view>当页面宽度在 300 ~ 500 px 之间时展示这里</view>
+ *         </MatchMedia>
+ *         <MatchMedia minHeight="400" orientation="landscape">
+ *           <view>当页面高度不小于 400 px 且屏幕方向为纵向时展示这里</view>
+ *         </MatchMedia>
+ *       </View>
  *     )
  *   }
  * }
  * ```
+ * @example_vue
+ * ```html
+ * <template>
+ *   <view class="components-page">
+ *     <match-media min-width="300" max-width="500">
+ *       <view>当页面宽度在 300 ~ 500 px 之间时展示这里</view>
+ *     </match-media>
+ *     <match-media min-height="400" orientation="landscape">
+ *       <view>当页面高度不小于 400 px 且屏幕方向为纵向时展示这里</view>
+ *     </match-media>
+ *   </view>
+ * </template>
+ * ```
+ * @see https://developers.weixin.qq.com/miniprogram/dev/component/match-media.html
  */
 declare const MatchMedia: ComponentType<MatchMediaProps>
 

package/types/MovableArea.d.ts

@@ -11,19 +11,25 @@ interface MovableAreaProps extends StandardProps {
 
 /** movable-view 的可移动区域
  * @classification viewContainer
- * @supported weapp
- * @example
+ * @supported weapp, rn
+ * @example_react
  * ```tsx
  * class App extends Components {
  *   render () {
  *     return (
  *       <MovableArea style='height: 200px; width: 200px; background: red;'>
- *         <MovableView style='height: 50px; width: 50px; background: blue;' direction='all'></MovableView>
+ *         <MovableView style='height: 50px; width: 50px; background: blue;' direction='all'>旅行的意义</MovableView>
  *       </MovableArea>
  *     )
  *   }
  * }
  * ```
+ * @example_vue
+ * ```html
+ *   <movable-area style='height: 200px; width: 200px; background: red;'>
+ *     <movable-view style='height: 50px; width: 50px; background: blue;' direction='all'>在路上</movable-view>
+ *   </movable-area>
+ * ```
  * @see https://developers.weixin.qq.com/miniprogram/dev/component/movable-area.html
  */
 declare const MovableArea: ComponentType<MovableAreaProps>

package/types/MovableView.d.ts

@@ -4,7 +4,7 @@ import { StandardProps, CommonEventFunction, TouchEventFunction } from './common
 interface MovableViewProps extends Omit<StandardProps, 'animation'> {
   /** movable-view 的移动方向，属性值有`all`、`vertical`、`horizontal`、`none`
    * @default none
-   * @supported weapp
+   * @supported weapp, rn
    */
   direction?: 'all' | 'vertical' | 'horizontal' | 'none'
 
@@ -21,12 +21,12 @@ interface MovableViewProps extends Omit<StandardProps, 'animation'> {
   outOfBounds?: boolean
 
   /** 定义 x 轴方向的偏移，如果 x 的值不在可移动范围内，会自动移动到可移动范围；改变 x 的值会触发动画
-   * @supported weapp
+   * @supported weapp, rn
    */
   x?: number | string
 
   /** 定义 y 轴方向的偏移，如果 y 的值不在可移动范围内，会自动移动到可移动范围；改变 y 的值会触发动画
-   * @supported weapp
+   * @supported weapp, rn
    */
   y?: number | string
 
@@ -44,7 +44,7 @@ interface MovableViewProps extends Omit<StandardProps, 'animation'> {
 
   /** 是否禁用
    * @default false
-   * @supported weapp
+   * @supported weapp, rn
    */
   disabled?: boolean
 
@@ -97,6 +97,14 @@ interface MovableViewProps extends Omit<StandardProps, 'animation'> {
    * @supported weapp
    */
   onVTouchMove?: TouchEventFunction
+  /** 开始拖动时触发
+   * @supported rn
+   */
+  onDragStart?: CommonEventFunction
+  /** 拖动结束时触发
+   * @supported rn
+   */
+  onDragEnd?: CommonEventFunction
 }
 
 declare namespace MovableViewProps {
@@ -135,8 +143,8 @@ declare namespace MovableViewProps {
 
 /** 可移动的视图容器，在页面中可以拖拽滑动。movable-view 必须在 movable-area 组件中，并且必须是直接子节点，否则不能移动。
  * @classification viewContainer
- * @supported weapp, swan, alipay
- * @example
+ * @supported weapp, swan, alipay, rn
+ * @example_react
  * ```tsx
  * class App extends Components {
  *   render () {
@@ -148,6 +156,12 @@ declare namespace MovableViewProps {
  *   }
  * }
  * ```
+ * @example_vue
+ * ```html
+ *   <movable-area style='height: 200px; width: 200px; background: red;'>
+ *     <movable-view style='height: 50px; width: 50px; background: blue;' direction='all'>带我走</movable-view>
+ *   </movable-area>
+ * ```
  * @see https://developers.weixin.qq.com/miniprogram/dev/component/movable-view.html
  */
 declare const MovableView: ComponentType<MovableViewProps>

package/types/OfficialAccount.d.ts

@@ -54,12 +54,6 @@ declare namespace OfficialAccountProps {
  * 当小程序从扫小程序码场景（场景值1047，场景值1124）打开时
  * 当小程序从聊天顶部场景（场景值1089）中的「最近使用」内打开时，若小程序之前未被销毁，则该组件保持上一次打开小程序时的状态
  * 当从其他小程序返回小程序（场景值1038）时，若小程序之前未被销毁，则该组件保持上一次打开小程序时的状态
- * 为便于开发者调试，基础库 2.7.3 版本起开发版小程序增加以下场景展示公众号组件：
- * 
- * 开发版小程序从扫二维码（场景值 1011）打开 — 体验版小程序打开
- * 组件限定最小宽度为 300px，高度为定值 84px。
- * 
- * 每个页面只能配置一个该组件。
  * @classification open
  * @supported weapp
  * @see https://developers.weixin.qq.com/miniprogram/dev/component/official-account.html

package/types/OpenData.d.ts

@@ -66,7 +66,7 @@ declare namespace OpenDataProps {
 /** 用于展示微信开放的数据
  * @classification open
  * @supported weapp
- * @example
+ * @example_react
  * ```tsx
  * class App extends Component {
  *   render () {
@@ -76,6 +76,12 @@ declare namespace OpenDataProps {
  *   }
  * }
  * ```
+ * @example_vue
+ * ```html
+ * <template>
+ *   <open-data type="userAvatarUrl" />
+ * </template>
+ * ```
  * @see https://developers.weixin.qq.com/miniprogram/dev/component/open-data.html
  */
 declare const OpenData: ComponentType<OpenDataProps>

package/types/PageContainer.d.ts

@@ -91,10 +91,15 @@ interface PageContainerProps extends StandardProps {
 }
 
 declare namespace PageContainerProps {
+  /** 弹出位置 */
   interface position {
+    /** 上方弹出 */
     top
+    /** 下方弹出 */
     bottom
+    /** 左边弹出 */
     left
+    /** 右边弹出 */
     right
   }
 }
@@ -108,6 +113,7 @@ declare namespace PageContainerProps {
  *   1. tip: 当前页面最多只有 1 个容器，若已存在容器的情况下，无法增加新的容器
  *   2. tip: wx.navigateBack 无法在页面栈顶调用，此时没有上一级页面
  * @classification viewContainer
+ * @supported weapp
  * @see https://developers.weixin.qq.com/miniprogram/dev/component/page-container.html
  */
 declare const PageContainer: ComponentType<PageContainerProps>