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

package/types/Map.d.ts

@@ -3,35 +3,35 @@ import { StandardProps, CommonEventFunction } from './common'
 
 interface MapProps extends StandardProps {
   /** 中心经度
-   * @supported weapp, swan, alipay
+   * @supported weapp, swan, alipay, tt
    */
   longitude: number
 
   /** 中心纬度
-   * @supported weapp, swan, alipay
+   * @supported weapp, swan, alipay, tt
    */
   latitude: number
 
   /** 缩放级别，取值范围为3-20
    * @default 16
-   * @supported weapp, swan, alipay
+   * @supported weapp, swan, alipay, tt
    * @swan 取值范围为4-21
    * @alipay 取值范围为5-18
    */
   scale?: number
   /** 最小缩放级别3-20
    * @default 3
-   * @supported weapp
+   * @supported weapp, tt
    */
   minScale?: number
   /** 最大缩放级别3-20
    * @default 20
-   * @supported weapp
+   * @supported weapp, tt
    */
   maxScale?: number
 
   /** 标记点
-   * @supported weapp, swan, alipay
+   * @supported weapp, swan, alipay, tt
    */
   markers?: MapProps.marker[]
 
@@ -42,12 +42,12 @@ interface MapProps extends StandardProps {
   covers?: any[]
 
   /** 路线
-   * @supported weapp, swan, alipay
+   * @supported weapp, swan, alipay, tt
    */
   polyline?: MapProps.polyline[]
 
   /** 圆
-   * @supported weapp, swan, alipay
+   * @supported weapp, swan, alipay, tt
    */
   circles?: MapProps.circle[]
 
@@ -58,18 +58,18 @@ interface MapProps extends StandardProps {
   controls?: MapProps.control[]
 
   /** 缩放视野以包含所有给定的坐标点
-   * @supported weapp, swan, alipay
+   * @supported weapp, swan, alipay, tt
    */
   includePoints?: MapProps.point[]
 
   /** 显示带有方向的当前定位点
    * @default false
-   * @supported weapp, swan, alipay
+   * @supported weapp, swan, alipay, tt
    */
   showLocation?: boolean
 
   /** 多边形
-   * @supported weapp, swan, alipay
+   * @supported weapp, swan, alipay, tt
    */
   polygons?: MapProps.polygon[]
 
@@ -86,67 +86,67 @@ interface MapProps extends StandardProps {
 
   /** 旋转角度，范围 0 ~ 360, 地图正北和设备 y 轴角度的夹角
    * @default 0
-   * @supported weapp
+   * @supported weapp, tt
    */
   rotate?: number
 
   /** 倾斜角度，范围 0 ~ 40 , 关于 z 轴的倾角
    * @default 0
-   * @supported weapp
+   * @supported weapp, tt
    */
   skew?: number
 
   /** 展示 3D 楼块
    * @default false
-   * @supported weapp, swan
+   * @supported weapp, swan, tt
    */
   enable3D?: boolean
 
   /** 显示指南针
    * @default false
-   * @supported weapp, swan
+   * @supported weapp, swan, tt
    */
   showCompass?: boolean
 
   /** 显示比例尺
    * @default false
-   * @supported weapp
+   * @supported weapp, tt
    */
   showScale?: boolean
 
   /** 开启俯视
    * @default false
-   * @supported weapp, swan
+   * @supported weapp, swan, tt
    */
   enableOverlooking?: boolean
 
   /** 是否支持缩放
    * @default true
-   * @supported weapp, swan
+   * @supported weapp, swan, tt
    */
   enableZoom?: boolean
 
   /** 是否支持拖动
    * @default true
-   * @supported weapp, swan
+   * @supported weapp, swan, tt
    */
   enableScroll?: boolean
 
   /** 是否支持旋转
    * @default false
-   * @supported weapp, swan
+   * @supported weapp, swan, tt
    */
   enableRotate?: boolean
 
   /** 是否开启卫星图
    * @default false
-   * @supported weapp
+   * @supported weapp, tt
    */
   enableSatellite?: boolean
 
   /** 是否开启实时路况
    * @default false
-   * @supported weapp
+   * @supported weapp, tt
    */
   enableTraffic?: boolean
 
@@ -158,17 +158,17 @@ interface MapProps extends StandardProps {
   setting?: MapProps | { [key: string]: number | string | any }
 
   /** 点击地图时触发
-   * @supported weapp, swan, alipay
+   * @supported weapp, swan, alipay, tt
    */
   onTap?: CommonEventFunction
 
   /** 点击标记点时触发，e.detail = {markerId}
-   * @supported weapp, swan, alipay
+   * @supported weapp, swan, alipay, tt
    */
   onMarkerTap?: CommonEventFunction<MapProps.onMarkerTapEventDetail>
 
   /** 点击label时触发，e.detail = {markerId}
-   * @supported weapp
+   * @supported weapp, tt
    */
   onLabelTap?: CommonEventFunction<MapProps.onLabelTapEventDetail>
 
@@ -178,17 +178,17 @@ interface MapProps extends StandardProps {
   onControlTap?: CommonEventFunction<MapProps.onControlTapEventDetail>
 
   /** 点击标记点对应的气泡时触发，e.detail = {markerId}
-   * @supported weapp, swan, alipay
+   * @supported weapp, swan, alipay, tt
    */
   onCalloutTap?: CommonEventFunction<MapProps.onCalloutTapEventDetail>
 
   /** 在地图渲染更新完成时触发
-   * @supported weapp, swan
+   * @supported weapp, swan, tt
    */
   onUpdated?: CommonEventFunction
 
   /** 视野发生变化时触发
-   * @supported weapp, swan, alipay
+   * @supported weapp, swan, alipay, tt
    */
   onRegionChange?: CommonEventFunction<MapProps.onRegionEventDetail<'begin'> | MapProps.onRegionEventDetail<'end'>>
 
@@ -499,14 +499,14 @@ declare namespace MapProps {
       end
     }
 
-    interface causedByBegin {
+    interface CausedByBegin {
       /** 手势触发 */
       gesture
       /** 接口触发 */
       update
     }
 
-    interface causedByEnd {
+    interface CausedByEnd {
       /** 拖动导致 */
       drag
       /** 缩放导致 */
@@ -523,7 +523,7 @@ declare namespace MapProps {
     /** 导致视野变化的原因
      * @remarks 有效值为 gesture（手势触发）、update（接口触发或调用更新接口导致）、drag（拖动导致）、scale（缩放导致）
      */
-    causedBy: keyof (T extends 'begin' ? RegionChangeDetail.causedByBegin : RegionChangeDetail.causedByEnd)
+    causedBy: keyof (T extends 'begin' ? RegionChangeDetail.CausedByBegin : RegionChangeDetail.CausedByEnd)
     /** 视野改变详情 */
     detail: regionChangeDetail<RegionChangeDetail.type>
   }
@@ -532,7 +532,7 @@ declare namespace MapProps {
     rotate: number
     /** 倾斜角度 */
     skew: number
-    causedBy: keyof (T extends 'begin' ? RegionChangeDetail.causedByBegin : RegionChangeDetail.causedByEnd)
+    causedBy: keyof (T extends 'begin' ? RegionChangeDetail.CausedByBegin : RegionChangeDetail.CausedByEnd)
     type: T | string
     scale: number
     centerLocation: point
@@ -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

@@ -4,26 +4,32 @@ import { StandardProps } from './common'
 interface MovableAreaProps extends StandardProps {
   /** 当里面的 movable-view 设置为支持双指缩放时，设置此值可将缩放手势生效区域修改为整个 movable-area
    * @default false
-   * @supported weapp
+   * @supported weapp, tt
    */
   scaleArea?: boolean
 }
 
 /** 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

@@ -1,102 +1,110 @@
 import { ComponentType } from 'react'
-import { StandardProps, CommonEventFunction, TouchEventFunction, Omit } from './common'
+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, tt
    */
   direction?: 'all' | 'vertical' | 'horizontal' | 'none'
 
   /** movable-view 是否带有惯性
    * @default false
-   * @supported weapp
+   * @supported weapp, tt
    */
   inertia?: boolean
 
   /** 超过可移动区域后，movable-view 是否还可以移动
    * @default false
-   * @supported weapp
+   * @supported weapp, tt
    */
   outOfBounds?: boolean
 
   /** 定义 x 轴方向的偏移，如果 x 的值不在可移动范围内，会自动移动到可移动范围；改变 x 的值会触发动画
-   * @supported weapp
+   * @supported weapp, rn, tt
    */
   x?: number | string
 
   /** 定义 y 轴方向的偏移，如果 y 的值不在可移动范围内，会自动移动到可移动范围；改变 y 的值会触发动画
-   * @supported weapp
+   * @supported weapp, rn, tt
    */
   y?: number | string
 
   /** 阻尼系数，用于控制x或y改变时的动画和过界回弹的动画，值越大移动越快
    * @default 20
-   * @supported weapp
+   * @supported weapp, tt
    */
   damping?: number
 
   /** 摩擦系数，用于控制惯性滑动的动画，值越大摩擦力越大，滑动越快停止；必须大于 0，否则会被设置成默认值
    * @default 2
-   * @supported weapp
+   * @supported weapp, tt
    */
   friction?: number
 
   /** 是否禁用
    * @default false
-   * @supported weapp
+   * @supported weapp, rn, tt
    */
   disabled?: boolean
 
   /** 是否支持双指缩放，默认缩放手势生效区域是在 movable-view 内
    * @default false
-   * @supported weapp
+   * @supported weapp, tt
    */
   scale?: boolean
 
   /** 定义缩放倍数最小值
    * @default 0.5
-   * @supported weapp
+   * @supported weapp, tt
    */
   scaleMin?: number
 
   /** 定义缩放倍数最大值
    * @default 10
-   * @supported weapp
+   * @supported weapp, tt
    */
   scaleMax?: number
 
   /** 定义缩放倍数，取值范围为 0.5 - 10
    * @default 1
-   * @supported weapp
+   * @supported weapp, tt
    */
   scaleValue?: number
 
   /** 是否使用动画
    * @default true
-   * @supported weapp
+   * @supported weapp, tt
    */
   animation?: boolean
 
   /** 拖动过程中触发的事件
-   * @supported weapp
+   * @supported weapp, tt
    */
   onChange?: CommonEventFunction<MovableViewProps.onChangeEventDetail>
 
   /** 缩放过程中触发的事件
-   * @supported weapp
+   * @supported weapp, tt
    */
   onScale?: CommonEventFunction<MovableViewProps.onScaleEventDetail>
 
   /** 初次手指触摸后移动为横向的移动，如果 catch 此事件，则意味着 touchmove 事件也被 catch
-   * @supported weapp
+   * @supported weapp, tt
    */
   onHTouchMove?: TouchEventFunction
 
   /** 初次手指触摸后移动为纵向的移动，如果 catch 此事件，则意味着 touchmove 事件也被 catch
-   * @supported weapp
+   * @supported weapp, tt
    */
   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, tt
+ * @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/Navigator.d.ts

@@ -6,7 +6,7 @@ interface NavigatorProps extends StandardProps {
    * @default "self"
    * @supported weapp, swan
    */
-  target?: keyof NavigatorProps.target
+  target?: keyof NavigatorProps.Target
 
   /** 当前小程序内的跳转链接
    * @supported weapp, swan, alipay, tt
@@ -17,7 +17,7 @@ interface NavigatorProps extends StandardProps {
    * @default "navigate"
    * @supported weapp, swan, alipay, tt
    */
-  openType?: keyof NavigatorProps.openType
+  openType?: keyof NavigatorProps.OpenType
 
   /** 当 open-type 为 'navigateBack' 时有效，表示回退的层数
    * @supported weapp, swan, tt
@@ -42,7 +42,7 @@ interface NavigatorProps extends StandardProps {
   /** 当 `target="miniProgram"` 时有效，要打开的小程序版本
    * @supported weapp, swan
    */
-  version?: keyof NavigatorProps.version
+  version?: keyof NavigatorProps.Version
 
   /** 指定按下去的样式类。当 `hover-class="none"` 时，没有点击态效果
    * @default "navigator-hover"
@@ -86,17 +86,17 @@ interface NavigatorProps extends StandardProps {
 
 declare namespace NavigatorProps {
   /** target 的合法值 */
-  interface target {
+  interface Target {
     /** 当前小程序 */
     self
     /** 其它小程序 */
     miniProgram
   }
   /** open-type 的合法值 */
-  interface openType {
+  interface OpenType {
     /** 对应 Taro.navigateTo 或 Taro.navigateToMiniProgram 的功能 */
     navigate
-    /** 对应 Taro.redirectTo 的功能 */	
+    /** 对应 Taro.redirectTo 的功能 */
     redirect
     /** 对应 Taro.switchTab 的功能 */
     switchTab
@@ -108,7 +108,7 @@ declare namespace NavigatorProps {
     exit
   }
   /** version 的合法值 */
-  interface version {
+  interface Version {
     /** 开发版 */
     develop
     /** 体验版 */

package/types/OfficialAccount.d.ts

@@ -5,24 +5,24 @@ interface OfficialAccountProps extends StandardProps {
   /** 组件加载成功时触发
    * @supported weapp
    */
-  onLoad?: CommonEventFunction<OfficialAccountProps.detail>
+  onLoad?: CommonEventFunction<OfficialAccountProps.Detail>
 
   /** 组件加载失败时触发
    * @supported weapp
    */
-  onError?: CommonEventFunction<OfficialAccountProps.detail>
+  onError?: CommonEventFunction<OfficialAccountProps.Detail>
 }
 
 declare namespace OfficialAccountProps {
   /** detail 对象 */
-  interface detail {
+  interface Detail {
     /** 状态码 */
     status: number
     /** 错误信息 */
     errMsg: string
   }
   /** status 有效值 */
-  interface status {
+  interface Status {
     /** 网络错误 */
     '-2'
     /** 数据解析错误 */
@@ -45,21 +45,15 @@ declare namespace OfficialAccountProps {
 }
 
 /** 公众号关注组件。当用户扫小程序码打开小程序时，开发者可在小程序内配置公众号关注组件，方便用户快捷关注公众号，可嵌套在原生组件内。
- * 
+ *
  * Tips
  * 使用组件前，需前往小程序后台，在“设置”->“关注公众号”中设置要展示的公众号。注：设置的公众号需与小程序主体一致。
- * 
+ *
  * 在一个小程序的生命周期内，只有从以下场景进入小程序，才具有展示引导关注公众号组件的能力:
- * 
+ *
  * 当小程序从扫小程序码场景（场景值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