@tarojs/components 4.0.0-canary.9 → 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/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/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

package/types/Picker.d.ts

@@ -3,6 +3,11 @@ import { StyleProp, TextStyle, ViewStyle } from 'react-native'
 import { StandardProps, CommonEventFunction, FormItemProps } from './common'
 /** 选择器通用参数 */
 interface PickerStandardProps extends StandardProps, FormItemProps {
+  /**
+   * 选择器的标题，微信小程序中仅安卓可用
+   * @supported weapp
+   */
+  headerText?: string
   /**
    * 选择器类型，默认是普通选择器
    * @default "selector"
@@ -62,7 +67,7 @@ interface PickerSelectorProps extends PickerStandardProps {
    */
   value?: number
   /** 设置 React 非受控状态下的初始取值
-   * @supported weapp, h5, rn
+   * @supported weapp, h5, rn, harmony_hybrid
    */
   defaultValue?: number
   /**

package/types/PickerView.d.ts

@@ -7,6 +7,7 @@ interface PickerViewProps extends StandardProps {
   value?: number[]
   /** 设置 React 非受控状态下的初始取值
    * @supported weapp, alipay, swan, tt, qq, jd, rn
+   * @unique
    */
   defaultValue?: number[]
   /** 设置选择器中间选中框的样式

package/types/Script.d.ts

@@ -0,0 +1,37 @@
+import { ComponentType } from 'react'
+
+import { StandardProps } from './common'
+
+interface ScriptProps extends StandardProps {
+  /** xs 文件的相对路径
+   * @supported weapp, alipay, swan, tt, qq, jd
+   */
+  src: string
+  /** xs 模块名
+   * @supported weapp, alipay, swan, tt, qq, jd
+   */
+  module: string
+}
+
+/** script 类似微信小程序的 wxs 标签，支持引用各种小程序的 xs 文件
+ * 只能在 CompileMode 中使用
+ * @classification viewContainer
+ * @supported weapp, swan, alipay, tt, jd, qq
+ * @example_react
+ * ```tsx
+ * import { Component } from 'react'
+ * import { View, Script } from '@tarojs/components'
+ *
+ * export function Index () {
+ *   return (
+ *     <View compileMode>
+ *       <Script src="./logic.wxs" module="logic"></Script>
+ *       <Text>Hello, {logic.name}!</Text>
+ *     </View>
+ *   )
+ * }
+ * ```
+ */
+declare const Script: ComponentType<ScriptProps>
+
+export { Script, ScriptProps }

package/types/ScrollView.d.ts

@@ -85,6 +85,11 @@ interface ScrollViewProps extends StandardProps {
    * @default false
    */
   enhanced?: boolean
+  /** 使 scroll-view 下的 position sticky 特性生效，否则滚动一屏后 sticky 元素会被隐藏
+   * @supported weapp
+   * @default false
+   */
+  usingSticky?: boolean
   /** iOS 下 scroll-view 边界弹性控制 (同时开启 enhanced 属性后生效)
    * @supported weapp, swan
    * @default true
@@ -134,10 +139,11 @@ interface ScrollViewProps extends StandardProps {
   /** 渲染模式
    * list - 列表模式。只会渲染在屏节点，会根据直接子节点是否在屏来按需渲染，若只有一个直接子节点则性能会退化
    * custom - 自定义模式。只会渲染在屏节点，子节点可以是 sticky-section list-view grid-view 等组件
-   * @supported weapp
+   * nested - 嵌套模式。用于处理父子 scroll-view 间的嵌套滚动，子节点可以是 nested-scroll-header nested-scroll-body 组件或自定义 refresher
+   * @supported weapp, harmony
    * @default 'list'
    */
-  type?: 'list' | 'custom'
+  type?: 'list' | 'custom' | 'nested'
   /** 是否反向滚动。一般初始滚动位置是在顶部，反向滚动则是在底部。
    * @supported weapp
    * @default false

package/types/ShareElement.d.ts

@@ -8,6 +8,7 @@ interface ShareElementProps extends StandardProps {
   key?: string
   /** 映射标记
    * @supported weapp
+   * @unique
    */
   mapkey?: string
   /** 映射标记

package/types/Slider.d.ts

@@ -27,7 +27,8 @@ interface SliderProps extends StandardProps, FormItemProps {
    */
   value?: number
   /** 设置 React 非受控状态下的初始取值
-   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
+   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
+   * @unique
    */
   defaultValue?: string
   /** 背景条的颜色（请使用 backgroundColor）
@@ -43,7 +44,7 @@ interface SliderProps extends StandardProps, FormItemProps {
   /** 已选择的颜色
    * @default "#1aad19"
    * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid
-, harmony_hybrid   */
+   */
   activeColor?: string
   /** 背景条的颜色
    * @default "#e9e9e9"

package/types/Snapshot.d.ts

@@ -1,12 +1,21 @@
 import { ComponentType } from 'react'
-
 import { StandardProps } from './common'
 
 interface SnapshotProps extends StandardProps {
-  id: string
+  /**
+   * 渲染模式
+   * @supported weapp
+   * @default 'view'
+   *
+   * 可选值:
+   * - view: 以真实节点渲染
+   * - picture: 对子节点生成的内容截图渲染
+   */
+  mode: 'view' | 'picture'
 }
 
-/** 截图组件。
+/**
+ * 截图组件
  * 支持将其子节点的渲染结果导出成图片，该组件需配合 snapshot 接口使用。 目前仅在 Skyline 渲染引擎 下支持。
  * @classification skyline
  * @supported weapp

package/types/Span.d.ts

@@ -0,0 +1,14 @@
+import { ComponentType } from 'react'
+
+import { StandardProps } from './common'
+
+interface SpanProps extends StandardProps { }
+
+/**
+ * 用于支持内联文本和 image / navigator 的混排
+ * @classification skyline
+ * @supported weapp
+ * @see https://developers.weixin.qq.com/miniprogram/dev/component/span.html
+ */
+declare const Span: ComponentType<SpanProps>
+export { Span, SpanProps }

package/types/StickyHeader.d.ts

@@ -1,11 +1,24 @@
 import { ComponentType } from 'react'
 import { StandardProps } from './common'
-interface StickyHeaderProps extends StandardProps {}
+interface StickyHeaderProps extends StandardProps {
+   /**
+    * 吸顶时与顶部的距(px)
+    * @supported weapp
+    * @default 0
+    */
+   offsetTop?: number
+   /**
+    * 长度为 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/sticky-header.html
  */
 declare const StickyHeader: ComponentType<StickyHeaderProps>

package/types/StickySection.d.ts

@@ -6,11 +6,17 @@ interface StickySectionProps extends StandardProps {
    * @default true
    */
   pushPinnedHeader?: boolean
+  /**
+   * 长度为 4 的数组，按 top、right、bottom、left 顺序指定内边距
+   * @supported weapp
+   * @default [0, 0, 0, 0]
+   */
+  padding?: [number, number, number, number]
 }
 /**
  * 吸顶布局容器，仅支持作为 scroll-view 自定义模式下的直接子节点。仅 Skyline 支持。
  * @classification skyline
- * @supported weapp
+ * @supported weapp, harmony
  * @see https://developers.weixin.qq.com/miniprogram/dev/component/sticky-section.html
  */
 declare const StickySection: ComponentType<StickySectionProps>

package/types/Swiper.d.ts

@@ -27,11 +27,9 @@ interface SwiperProps extends StandardProps {
    */
   current?: number
   /** 当前所在滑块的 item-id ，不能与 current 被同时指定
-   * @supported tt
+   * @supported swan, tt, qq, jd, h5, harmony_hybrid
    * @weapp deprecated
    * @default ""
-   * @supported tt
-   * @weapp deprecated
    */
   currentItemId?: string
   /** 自动切换时间间隔

package/types/Switch.d.ts

@@ -7,7 +7,8 @@ interface SwitchProps extends StandardProps, FormItemProps {
    */
   checked?: boolean
   /** 设置在 React 非受控状态下，当前是否选中
-   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
+   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
+   * @unique
    */
   defaultChecked?: boolean
   /** 是否禁用

package/types/Text.d.ts

@@ -25,6 +25,12 @@ interface TextProps extends StandardProps {
    * @supported alipay
    */
   numberOfLines?: number
+  /**
+   * 文本溢出处理
+   * @supported weapp-skyline
+   * @default 'visible'
+   */
+  overflow?: keyof TextProps.Overflow
   /** 限制文本最大行数
    * @supported weapp, harmony
    */
@@ -40,6 +46,16 @@ declare namespace TextProps {
     /** 根据字体设置的空格大小 */
     nbsp
   }
+  interface Overflow {
+    /** 修剪文本 */
+    clip
+    /** 淡出 */
+    fade
+    /** 显示省略号 */
+    ellipsis
+    /** 文本不截断 */
+    visible
+  }
 }
 /** 文本
  * @classification base

package/types/Textarea.d.ts

@@ -6,7 +6,8 @@ interface TextareaProps extends StandardProps, FormItemProps {
    */
   value?: string
   /** 设置 React 非受控输入框的初始内容
-   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
+   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
+   * @unique
    */
   defaultValue?: string
   /** 输入框为空时占位符

package/types/common.d.ts

@@ -3,7 +3,7 @@ import { CSSProperties, LegacyRef, ReactNode } from 'react'
 export interface StandardProps<T = any, TouchEvent extends BaseTouchEvent<any> = ITouchEvent> extends EventProps<TouchEvent> {
   /** 组件的唯一标示, 保持整个页面唯一 */
   id?: string
-  /** 同 `class`，在 React/Nerv 里一般使用 `className` 作为 `class` 的代称 */
+  /** 同 `class`，在 React/Preact 里一般使用 `className` 作为 `class` 的代称 */
   className?: string
   /** 组件的内联样式, 可以动态设置的内联样式 */
   style?: string | CSSProperties
@@ -35,7 +35,7 @@ export interface StandardProps<T = any, TouchEvent extends BaseTouchEvent<any> =
    * 自定义容器组件的方向
    * @supported harmony
    */
-  harmonyDirection?: 'row' | 'column'
+  harmonyDirection?: 'row' | 'column' | 'flex'
 }
 
 export interface FormItemProps {

package/types/index.d.ts

@@ -42,11 +42,18 @@ export { Textarea } from './Textarea'
 
 /** Skyline */
 export { GridView } from './GridView'
+export { GridBuilder } from './GridBuilder'
 export { ListView } from './ListView'
+export { ListBuilder } from './ListBuilder'
 export { ShareElement } from './ShareElement'
 export { Snapshot } from './SnapShot'
+export { Span } from './Span'
 export { StickyHeader } from './StickyHeader'
 export { StickySection } from './StickySection'
+export { OpenContainer } from './OpenContainer'
+export { DraggableSheet } from './DraggableSheet'
+export { NestedScrollHeader } from './NestedScrollHeader'
+export { NestedScrollBody } from './NestedScrollBody'
 
 /** 导航 */
 export { FunctionalPageNavigator } from './FunctionalPageNavigator'
@@ -86,3 +93,4 @@ export { PageMeta } from './PageMeta'
 export { CustomWrapper } from './CustomWrapper'
 export { Slot } from './Slot'
 export { NativeSlot } from './NativeSlot'
+export { Script } from './Script'

package/types/index.vue3.d.ts

@@ -66,6 +66,7 @@ import { ShareElementProps } from './ShareElement'
 import { SliderProps } from './Slider'
 import { SlotProps } from './Slot'
 import { SnapshotProps } from './SnapShot'
+import { SpanProps } from './Span'
 import { StickyHeaderProps } from './StickyHeader'
 import { StickySectionProps } from './StickySection'
 import { SwiperProps } from './Swiper'
@@ -144,6 +145,7 @@ export declare const Textarea: VueComponentType<TextareaProps>
 export declare const GridView: VueComponentType<GridViewProps>
 export declare const ListView: VueComponentType<ListViewProps>
 export declare const Snapshot: VueComponentType<SnapshotProps>
+export declare const Span: VueComponentType<SpanProps>
 export declare const ShareElement: VueComponentType<ShareElementProps>
 export declare const StickyHeader: VueComponentType<StickyHeaderProps>
 export declare const StickySection: VueComponentType<StickySectionProps>
@@ -266,6 +268,8 @@ declare global {
       'taro-share-element-core': ElementAttrs<TransformReact2VueType<ShareElementProps>>
       'snapshot': ElementAttrs<TransformReact2VueType<SnapshotProps>>
       'taro-snapshot-core': ElementAttrs<TransformReact2VueType<SnapshotProps>>
+      'span': ElementAttrs<TransformReact2VueType<SpanProps>>
+      'taro-span-core': ElementAttrs<TransformReact2VueType<SpanProps>>
       'sticky-header': ElementAttrs<TransformReact2VueType<StickyHeaderProps>>
       'taro-sticky-header-core': ElementAttrs<TransformReact2VueType<StickyHeaderProps>>
       'sticky-section': ElementAttrs<TransformReact2VueType<StickySectionProps>>