@tarojs/components 4.0.0-canary.8 → 4.0.0

package/types/ListBuilder.d.ts

@@ -0,0 +1,55 @@
+import { ComponentType } from 'react'
+import { StandardProps, CommonEventFunction } from './common'
+interface ListBuilderProps extends StandardProps {
+  /**
+   * 布局方式
+   * @supported weapp
+   * @default "aligned"
+   *
+   * 可选值:
+   * - static: 定高模式，所有列表项等高，需要传入 child-height
+   * - dynamic: 不定高模式
+   */
+  type: 'static' | 'dynamic'
+  /**
+   * 需要用于渲染的列表
+   * @supported weapp
+   * @default []
+   */
+  list: any[]
+  /**
+   * 完整列表的长度，如果不传则取 list 的长度作为其值
+   * @supported weapp
+   */
+  childCount?: number
+  /**
+   * 列表项的高度，当 type 为 static 时必须传入
+   * @supported weapp
+   */
+  childHeight?: number
+  /**
+   * 长度为 4 的数组，按 top、right、bottom、left 顺序指定内边距
+   * @supported weapp
+   * @default [0, 0, 0, 0]
+   */
+  padding?: [number, number, number, number]
+  /**
+   * 列表项创建时触发，event.detail = {index}，index 即被创建的列表项序号
+   * @supported weapp
+   */
+  onItemBuild?: CommonEventFunction
+  /**
+   * 列表项回收时触发，event.detail = {index}，index 即被回收的列表项序号
+   * @supported weapp
+   */
+  onItemDispose?: CommonEventFunction
+}
+
+/**
+ * 列表构造器，仅支持作为 `<scroll-view type="custom">` 模式的直接子节点，仅 Skyline 支持。
+ * @classification skyline
+ * @supported weapp
+ * @see https://developers.weixin.qq.com/miniprogram/dev/component/list-builder.html
+ */
+declare const ListBuilder: ComponentType<ListBuilderProps>
+export { ListBuilder, ListBuilderProps }

package/types/ListView.d.ts

@@ -1,11 +1,18 @@
 import { ComponentType } from 'react'
 import { StandardProps } from './common'
-interface ListViewProps extends StandardProps {}
+interface ListViewProps extends StandardProps {
+   /**
+    * 长度为 4 的数组，按 top、right、bottom、left 顺序指定内边距
+    * @supported weapp
+    * @default [0, 0, 0, 0]
+    */
+   padding?: [number, number, number, number]
+}
 
 /**
  * 列表布局容器，仅支持作为 scroll-view 自定义模式下的直接子节点或 sticky-section 组件直接子节点。仅 Skyline 支持。
  * @classification skyline
- * @supported weapp
+ * @supported weapp, harmony
  * @see https://developers.weixin.qq.com/miniprogram/dev/component/list-view.html
  */
 declare const ListView: ComponentType<ListViewProps>

package/types/Map.d.ts

@@ -637,7 +637,6 @@ declare namespace MapProps {
     longitude: number
     latitude: number
   }
-
   interface onPolylineTapEventDetail {
     polylineId: number
     longitude: number
@@ -648,7 +647,6 @@ declare namespace MapProps {
     errCode: number
     errMsg: string
   }
-
   interface onInterpolatePointEventDetail {
     markerId: number
     longitude: number

package/types/MovableArea.d.ts

@@ -3,13 +3,13 @@ import { StandardProps } from './common'
 interface MovableAreaProps extends StandardProps {
   /** 当里面的 movable-view 设置为支持双指缩放时，设置此值可将缩放手势生效区域修改为整个 movable-area
    * @default false
-   * @supported weapp, alipay, swan, tt, qq, jd, h5
+   * @supported weapp, alipay, swan, tt, qq, jd, h5, harmony_hybrid
    */
   scaleArea?: boolean
 }
 /** movable-view 的可移动区域
  * @classification viewContainer
- * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
+ * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
  * @example_react
  * ```tsx
  * class App extends Components {

package/types/MovableView.d.ts

@@ -3,65 +3,65 @@ import { StandardProps, CommonEventFunction, TouchEventFunction } from './common
 interface MovableViewProps extends Omit<StandardProps, 'animation'> {
   /** movable-view 的移动方向，属性值有`all`、`vertical`、`horizontal`、`none`
    * @default none
-   * @supported weapp, alipay, swan, tt, qq, h5, rn
+   * @supported weapp, alipay, swan, tt, qq, h5, rn, harmony_hybrid
    */
   direction?: 'all' | 'vertical' | 'horizontal' | 'none'
   /** movable-view 是否带有惯性
    * @default false
-   * @supported weapp, alipay, swan, tt, qq, h5
+   * @supported weapp, alipay, swan, tt, qq, h5, harmony_hybrid
    */
   inertia?: boolean
   /** 超过可移动区域后，movable-view 是否还可以移动
    * @default false
-   * @supported weapp, alipay, swan, tt, qq, h5
+   * @supported weapp, alipay, swan, tt, qq, h5, harmony_hybrid
    */
   outOfBounds?: boolean
   /** 定义 x 轴方向的偏移，如果 x 的值不在可移动范围内，会自动移动到可移动范围；改变 x 的值会触发动画
-   * @supported weapp, alipay, swan, tt, qq, h5, rn
+   * @supported weapp, alipay, swan, tt, qq, h5, rn, harmony_hybrid
    */
   x?: number | string
   /** 定义 y 轴方向的偏移，如果 y 的值不在可移动范围内，会自动移动到可移动范围；改变 y 的值会触发动画
-   * @supported weapp, alipay, swan, tt, qq, h5, rn
+   * @supported weapp, alipay, swan, tt, qq, h5, rn, harmony_hybrid
    */
   y?: number | string
   /** 阻尼系数，用于控制x或y改变时的动画和过界回弹的动画，值越大移动越快
    * @default 20
-   * @supported weapp, alipay, swan, tt, qq, h5
+   * @supported weapp, alipay, swan, tt, qq, h5, harmony_hybrid
    */
   damping?: number
   /** 摩擦系数，用于控制惯性滑动的动画，值越大摩擦力越大，滑动越快停止；必须大于 0，否则会被设置成默认值
    * @default 2
-   * @supported weapp, alipay, swan, tt, qq, h5
+   * @supported weapp, alipay, swan, tt, qq, h5, harmony_hybrid
    */
   friction?: number
   /** 是否禁用
    * @default false
-   * @supported weapp, alipay, swan, tt, qq, h5, rn
+   * @supported weapp, alipay, swan, tt, qq, h5, rn, harmony_hybrid
    */
   disabled?: boolean
   /** 是否支持双指缩放，默认缩放手势生效区域是在 movable-view 内
    * @default false
-   * @supported weapp, alipay, swan, tt, qq, h5
+   * @supported weapp, alipay, swan, tt, qq, h5, harmony_hybrid
    */
   scale?: boolean
   /** 定义缩放倍数最小值
    * @default 0.5
-   * @supported weapp, alipay, swan, tt, qq, h5
+   * @supported weapp, alipay, swan, tt, qq, h5, harmony_hybrid
    */
   scaleMin?: number
   /** 定义缩放倍数最大值
    * @default 10
-   * @supported weapp, alipay, swan, tt, qq, h5
+   * @supported weapp, alipay, swan, tt, qq, h5, harmony_hybrid
    */
   scaleMax?: number
   /** 定义缩放倍数，取值范围为 0.5 - 10
    * @default 1
-   * @supported weapp, alipay, swan, tt, qq, h5
+   * @supported weapp, alipay, swan, tt, qq, h5, harmony_hybrid
    */
   scaleValue?: number
   /** 是否使用动画
    * @default true
-   * @supported weapp, alipay, swan, tt, qq, h5
+   * @supported weapp, alipay, swan, tt, qq, h5, harmony_hybrid
    */
   animation?: boolean
   /** 拖动过程中触发的事件
@@ -81,7 +81,7 @@ interface MovableViewProps extends Omit<StandardProps, 'animation'> {
    */
   onDragEnd?: CommonEventFunction
   /** 缩放过程中触发的事件
-   * @supported weapp, alipay, swan, tt, qq, h5
+   * @supported weapp, alipay, swan, tt, qq, h5, harmony_hybrid
    */
   onScale?: CommonEventFunction<MovableViewProps.onScaleEventDetail>
   /** 触摸动作开始，事件会向父节点传递。
@@ -93,7 +93,7 @@ interface MovableViewProps extends Omit<StandardProps, 'animation'> {
    */
   onTouchMove?: CommonEventFunction
   /** 手指触摸动作结束
-   * @supported alipay, h5
+   * @supported alipay, h5, harmony_hybrid
    * @h5 此事件的触发顺序会因为当前事件机制引起组件内外注册的事件执行顺序不正常，外部注册的事件可能会优先于内部执行，如需保证执行顺序一致，需要在回调函数中包裹 setTimeout 临时处理
    */
   onTouchEnd?: TouchEventFunction
@@ -102,11 +102,11 @@ interface MovableViewProps extends Omit<StandardProps, 'animation'> {
    */
   onTouchCancel?: CommonEventFunction
   /** 初次手指触摸后移动为横向的移动，如果 catch 此事件，则意味着 touchmove 事件也被 catch
-   * @supported weapp, swan, tt, h5
+   * @supported weapp, swan, tt, h5, harmony_hybrid
    */
   onHTouchMove?: TouchEventFunction
   /** 初次手指触摸后移动为纵向的移动，如果 catch 此事件，则意味着 touchmove 事件也被 catch
-   * @supported weapp, swan, tt, h5
+   * @supported weapp, swan, tt, h5, harmony_hybrid
    */
   onVTouchMove?: TouchEventFunction
   /** 触摸移动事件，事件仅作用于组件，不向父节点传递。
@@ -155,7 +155,7 @@ declare namespace MovableViewProps {
 }
 /** 可移动的视图容器，在页面中可以拖拽滑动。movable-view 必须在 movable-area 组件中，并且必须是直接子节点，否则不能移动。
  * @classification viewContainer
- * @supported weapp, alipay, swan, tt, qq, h5, rn
+ * @supported weapp, alipay, swan, tt, qq, h5, rn, harmony_hybrid
  * @example_react
  * ```tsx
  * class App extends Components {

package/types/NativeSlot.d.ts

@@ -12,7 +12,7 @@ interface NativeSlotProps extends StandardProps {
 
 /** 编译的原生组件支持使用 slot 插槽
  * @classification viewContainer
- * @supported weapp, swan, alipay, tt, jd, qq, h5
+ * @supported weapp, swan, alipay, tt, jd, qq, h5, harmony_hybrid
  * @version 3.5.7+
  * @example
  * ```tsx

package/types/NavigationBar.d.ts

@@ -2,19 +2,19 @@ import { ComponentType } from 'react'
 import { StandardProps, CommonEventFunction } from './common'
 interface NavigationBarProps extends StandardProps {
   /** 导航条标题
-   * @supported weapp
+   * @supported weapp, harmony
    */
   title?: string
   /** 是否在导航条显示 loading 加载提示
-   * @supported weapp
+   * @supported weapp, harmony
    */
   loading?: boolean
   /** 导航条前景颜色值，包括按钮、标题、状态栏的颜色，仅支持 #ffffff 和 #000000
-   * @supported weapp
+   * @supported weapp, harmony
    */
   frontColor?: string
   /** 导航条背景颜色值，有效值为十六进制颜色
-   * @supported weapp
+   * @supported weapp, harmony
    */
   backgroundColor?: string
   /** 改变导航栏颜色时的动画时长，默认为 0 （即没有动画效果）
@@ -37,7 +37,7 @@ interface NavigationBarProps extends StandardProps {
  * :::
  *
  * @classification navig
- * @supported weapp
+ * @supported weapp, harmony
  * @see https://developers.weixin.qq.com/miniprogram/dev/component/navigation-bar.html
  */
 declare const NavigationBar: ComponentType<NavigationBarProps>

package/types/Navigator.d.ts

@@ -7,16 +7,16 @@ interface NavigatorProps extends StandardProps {
    */
   target?: keyof NavigatorProps.Target
   /** 当前小程序内的跳转链接
-   * @supported weapp, alipay, swan, tt, qq, jd, h5
+   * @supported weapp, alipay, swan, tt, qq, jd, h5, harmony_hybrid
    */
   url?: string
   /** 跳转方式
    * @default "navigate"
-   * @supported weapp, alipay, swan, tt, qq, jd, h5
+   * @supported weapp, alipay, swan, tt, qq, jd, h5, harmony_hybrid
    */
   openType?: keyof NavigatorProps.OpenType
   /** 当 open-type 为 'navigateBack' 时有效，表示回退的层数
-   * @supported weapp, swan, tt, qq, jd, h5
+   * @supported weapp, swan, tt, qq, jd, h5, harmony_hybrid
    */
   delta?: number
   /** 当 `target="miniProgram"` 时有效，要打开的小程序 appId
@@ -37,7 +37,7 @@ interface NavigatorProps extends StandardProps {
   version?: keyof NavigatorProps.Version
   /** 指定按下去的样式类。当 `hover-class="none"` 时，没有点击态效果
    * @default "navigator-hover"
-   * @supported weapp, alipay, swan, tt, qq, jd, h5
+   * @supported weapp, alipay, swan, tt, qq, jd, h5, harmony_hybrid
    */
   hoverClass?: string
   /** 指定是否阻止本节点的祖先节点出现点击态
@@ -64,15 +64,15 @@ interface NavigatorProps extends StandardProps {
    */
   ariaLabel?: string
   /** 当 `target="miniProgram"` 时有效，跳转小程序成功
-   * @supported weapp, swan, qq, h5
+   * @supported weapp, swan, qq, h5, harmony_hybrid
    */
   onSuccess?: CommonEventFunction
   /** 当 `target="miniProgram"` 时有效，跳转小程序失败
-   * @supported weapp, swan, qq, h5
+   * @supported weapp, swan, qq, h5, harmony_hybrid
    */
   onFail?: CommonEventFunction
   /** 当 `target="miniProgram"` 时有效，跳转小程序完成
-   * @supported weapp, swan, qq, h5
+   * @supported weapp, swan, qq, h5, harmony_hybrid
    */
   onComplete?: CommonEventFunction
 }
@@ -111,7 +111,7 @@ declare namespace NavigatorProps {
 }
 /** 页面链接
  * @classification navig
- * @supported weapp, alipay, swan, tt, qq, jd, h5
+ * @supported weapp, alipay, swan, tt, qq, jd, h5, harmony_hybrid
  * @see https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html
  */
 declare const Navigator: ComponentType<NavigatorProps>

package/types/NestedScrollBody.d.ts

@@ -0,0 +1,15 @@
+import { ComponentType } from 'react'
+import { StandardProps, CommonEventFunction } from './common'
+
+interface NestedScrollBodyProps extends StandardProps {}
+
+/**
+ * 嵌套 scroll-view 场景中属于里层 scroll-view 的节点，
+ * 仅支持作为 `<scroll-view type="nested">` 模式的直接子节点。
+ * 不支持复数子节点，渲染时会取其第一个子节点来渲染。具体用法可参考 scroll-view
+ * @classification skyline
+ * @supported weapp
+ * @see https://developers.weixin.qq.com/miniprogram/dev/component/nested-scroll-body.html
+ */
+declare const NestedScrollBody: ComponentType<NestedScrollBodyProps>
+export { NestedScrollBody, NestedScrollBodyProps }

package/types/NestedScrollHeader.d.ts

@@ -0,0 +1,15 @@
+import { ComponentType } from 'react'
+import { StandardProps, CommonEventFunction } from './common'
+
+interface NestedScrollHeaderProps extends StandardProps {}
+
+/**
+ * 嵌套 scroll-view 场景中属于外层 scroll-view 的节点，
+ * 仅支持作为 `<scroll-view type="nested">` 模式的直接子节点。
+ * 不支持复数子节点，渲染时会取其第一个子节点来渲染。具体用法可参考 scroll-view
+ * @classification skyline
+ * @supported weapp
+ * @see https://developers.weixin.qq.com/miniprogram/dev/component/nested-scroll-header.html
+ */
+declare const NestedScrollHeader: ComponentType<NestedScrollHeaderProps>
+export { NestedScrollHeader, NestedScrollHeaderProps }

package/types/OpenContainer.d.ts

@@ -0,0 +1,74 @@
+import { ComponentType } from 'react'
+import { StandardProps, CommonEventFunction } from './common'
+interface OpenContainerProps extends StandardProps {
+  /**
+   * 动画类型
+   * @supported weapp
+   * @default "fade"
+   *
+   * 可选值:
+   * - fade: 将传入元素淡入传出元素之上
+   * - fadeThrough: 首先淡出传出元素，并在传出元素完全淡出后开始淡入传入元素
+   */
+  transitionType: 'fade' | 'fadeThrough'
+  /**
+   * 动画时长
+   * @supported weapp
+   * @default 300
+   */
+  transitionDuration: number
+  /**
+   * 初始容器背景色
+   * @supported weapp
+   * @default "white"
+   */
+  closedColor: string
+  /**
+   * 初始容器影深大小
+   * @supported weapp
+   * @default 0
+   */
+  closedElevation: number
+  /**
+   * 初始容器圆角大小
+   * @supported weapp
+   * @default 0
+   */
+  closeBorderRadius: number
+  /**
+   * fadeThrough 模式下的过渡背景色
+   * @supported weapp
+   * @default ""
+   */
+  middleColor: string
+  /**
+   * 打开状态下容器背景色
+   * @supported weapp
+   * @default "white"
+   */
+  openColor: string
+  /**
+   * 打开状态下容器影深大小
+   * @supported weapp
+   * @default 0
+   */
+  openElevation: number
+  /**
+   * 打开状态下容器圆角大小
+   * @supported weapp
+   * @default 0
+   */
+  openBorderRadius: number
+}
+
+/**
+ * 容器转场动画组件
+ * 点击 OpenContainer 组件，当使用 wx.navigateTo 跳转下一页面时，对其子节点和下一个页面进行过渡。
+ * 下个页面从 OpenContainer 所在位置大小渐显放大，同时 OpenContainer 内容渐隐，过渡效果包含背景色、圆角和阴影。
+ * 源页面 OpenContainer 为 closed 状态，转场动画后为 open 状态。
+ * @classification skyline
+ * @supported weapp
+ * @see https://developers.weixin.qq.com/miniprogram/dev/component/open-container.html
+ */
+declare const OpenContainer: ComponentType<OpenContainerProps>
+export { OpenContainer, OpenContainerProps }

package/types/PageMeta.d.ts

@@ -6,25 +6,25 @@ interface PageMetaProps extends StandardProps {
    */
   backgroundTextStyle?: string
   /** 窗口的背景色，必须为十六进制颜色值
-   * @supported weapp, alipay
+   * @supported weapp, alipay, harmony
    */
   backgroundColor?: string
   /** 顶部窗口的背景色，必须为十六进制颜色值，仅 iOS 支持
-   * @supported weapp, alipay
+   * @supported weapp, alipay, harmony
    */
   backgroundColorTop?: string
   /** 底部窗口的背景色，必须为十六进制颜色值，仅 iOS 支持
-   * @supported weapp, alipay
+   * @supported weapp, alipay, harmony
    */
   backgroundColorBottom?: string
   /** 滚动位置，可以使用 px 或者 rpx 为单位，在被设置时，页面会滚动到对应位置
    * @default ""
-   * @supported weapp, alipay
+   * @supported weapp, alipay, harmony
    */
   scrollTop?: string
   /** 滚动动画时长
    * @default 300
-   * @supported weapp, alipay
+   * @supported weapp, alipay, harmony
    */
   scrollDuration?: number
   /** 页面根节点样式，页面根节点是所有页面节点的祖先节点，相当于 HTML 中的 body 节点
@@ -38,7 +38,7 @@ interface PageMetaProps extends StandardProps {
    */
   rootFontSize?: string
   /** 页面内容的背景色，用于页面中的空白部分和页面大小变化 resize 动画期间的临时空闲区域
-   * @supported weapp, alipay
+   * @supported weapp, alipay, harmony
    */
   rootBackgroundColor?: string
   /** 页面 page 的字体大小，可以设置为 system ，表示使用当前用户设置的微信字体大小
@@ -64,6 +64,8 @@ interface PageMetaProps extends StandardProps {
 }
 declare namespace PageMetaProps {
   interface onResizeEventDetail {
+    /** 设备方向 */
+    deviceOrientation?: 'portrait' | 'landscape'
     /** 窗口尺寸 */
     size: resizeType
   }
@@ -73,6 +75,10 @@ declare namespace PageMetaProps {
     windowWidth: number
     /** 窗口高度 */
     windowHeight: number
+    /** 屏幕宽度 */
+    screenWidth?: number
+    /** 屏幕高度 */
+    screenHeight?: number
   }
   interface onScrollEventDetail {
     scrollTop: number
@@ -86,7 +92,7 @@ declare namespace PageMetaProps {
  * 开发者需要在页面配置里添加：`enablePageMeta: true`
  * :::
  *
- * @supported weapp, alipay
+ * @supported weapp, alipay, harmony
  * @example_react
  * ```tsx
  * // page.config.ts