@tarojs/components 3.8.0-canary.0 → 3.8.0-canary.1

package/types/PageMeta.d.ts

@@ -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
@@ -80,7 +86,47 @@ declare namespace PageMetaProps {
 }
 /** 页面属性配置节点，用于指定页面的一些属性、监听页面事件。只能是页面内的第一个节点。可以配合 navigation-bar 组件一同使用。
  * 通过这个节点可以获得类似于调用 Taro.setBackgroundTextStyle Taro.setBackgroundColor 等接口调用的效果。
+ *
+ * :::info
+ * Taro v3.6.19 开始支持
+ * 开发者需要在页面配置里添加：`enablePageMeta: true`
+ * :::
+ *
  * @supported weapp, alipay
+ * @example_react
+ * ```tsx
+ * // page.config.ts
+ * export default definePageConfig({ enablePageMeta: true, ... })
+ *
+ * // page.tsx
+ * function Index () {
+ *   return (
+ *     <View>
+ *      <PageMeta
+ *        pageStyle={myPageStyle}
+ *        onScroll={handleScroll}
+ *      >
+ *        <NavigationBar title={title} />
+ *      </PageMeta>
+ *    </View>
+ *   )
+ * }
+ * ```
+ * @example_vue
+ * ```html
+ * <!-- page.config.ts -->
+ * <!-- export default definePageConfig({ enablePageMeta: true, ... }) -->
+ *
+ * <!-- page.vue -->
+ * <template>
+ *   <page-meta
+ *     :page-style="myPageStyle"
+ *     `@scroll="handleScroll"
+ *   >
+ *     <navigation-bar :title="title" />
+ *   </page-meta>
+ * </template>
+ * ```
  * @see https://developers.weixin.qq.com/miniprogram/dev/component/page-meta.html
  */
 declare const PageMeta: ComponentType<PageMetaProps>

package/types/Picker.d.ts

@@ -3,21 +3,26 @@ import { StyleProp, TextStyle, ViewStyle } from 'react-native'
 import { StandardProps, CommonEventFunction, FormItemProps } from './common'
 /** 选择器通用参数 */
 interface PickerStandardProps extends StandardProps, FormItemProps {
+  /**
+   * 选择器的标题，微信小程序中仅安卓可用
+   * @supported weapp
+   */
+  headerText?: string
   /**
    * 选择器类型，默认是普通选择器
    * @default "selector"
-   * @supported weapp, h5, rn
+   * @supported weapp, h5, rn, harmony_hybrid
    */
   mode?: keyof PickerStandardProps.Mode
   /**
    * 是否禁用
    * @default false
-   * @supported weapp, h5, rn
+   * @supported weapp, h5, rn, harmony_hybrid
    */
   disabled?: boolean
   /**
    * 取消选择或点遮罩层收起 picker 时触发
-   * @supported weapp, h5, rn
+   * @supported weapp, h5, rn, harmony_hybrid
    */
   onCancel?: CommonEventFunction
 }
@@ -46,21 +51,25 @@ interface PickerSelectorProps extends PickerStandardProps {
   mode?: 'selector'
   /**
    * mode为 selector 或 multiSelector 时，range 有效
-   * @supported weapp, h5, rn
+   * @supported weapp, h5, rn, harmony_hybrid
    * @default []
    */
   range: string[] | number[] | Record<string, any>[]
   /**
    * 当 range 是一个 Object Array 时，通过 rangeKey 来指定 Object 中 key 的值作为选择器显示内容
-   * @supported weapp, h5, rn
+   * @supported weapp, h5, rn, harmony_hybrid
    */
   rangeKey?: string
   /**
    * 表示选择了 range 中的第几个（下标从 0 开始）
-   * @supported weapp, h5, rn
+   * @supported weapp, h5, rn, harmony_hybrid
    * @default 0
    */
   value?: number
+  /** 设置 React 非受控状态下的初始取值
+   * @supported weapp, h5, rn, harmony_hybrid
+   */
+  defaultValue?: number
   /**
    * mode为 selector 或 multiSelector 时 itemStyle 有效
    * @supported rn
@@ -75,12 +84,12 @@ interface PickerSelectorProps extends PickerStandardProps {
   indicatorStyle?: StyleProp<ViewStyle>
   /**
    * value 改变时触发 change 事件
-   * @supported weapp, h5, rn
+   * @supported weapp, h5, rn, harmony_hybrid
    */
-  onChange: CommonEventFunction<PickerSelectorProps.ChangeEventDetail>
+  onChange?: CommonEventFunction<PickerSelectorProps.ChangeEventDetail>
   /**
    * 用于替换组件内部文本
-   * @supported h5
+   * @supported h5, harmony_hybrid
    */
   textProps?: PickerStandardProps.PickerText
 }
@@ -96,18 +105,18 @@ interface PickerMultiSelectorProps extends PickerStandardProps {
   mode: 'multiSelector'
   /**
    * mode为 selector 或 multiSelector 时，range 有效
-   * @supported weapp, h5, rn
+   * @supported weapp, h5, rn, harmony_hybrid
    * @default []
    */
   range: Array<string[]> | Array<number[]> | Array<Record<string, any>[]>
   /**
    * 当 range 是一个 Object Array 时，通过 rangeKey 来指定 Object 中 key 的值作为选择器显示内容
-   * @supported weapp, h5, rn
+   * @supported weapp, h5, rn, harmony_hybrid
    */
   rangeKey?: string
   /**
    * 表示选择了 range 中的第几个（下标从 0 开始）
-   * @supported weapp, h5, rn
+   * @supported weapp, h5, rn, harmony_hybrid
    * @default []
    */
   value: number[] | string[] | Record<string, any>[]
@@ -125,12 +134,12 @@ interface PickerMultiSelectorProps extends PickerStandardProps {
   indicatorStyle?: StyleProp<ViewStyle>
   /**
    * 当 value 改变时触发 change 事件
-   * @supported weapp, h5, rn
+   * @supported weapp, h5, rn, harmony_hybrid
    */
   onChange: CommonEventFunction<PickerMultiSelectorProps.ChangeEventDetail>
   /**
    * 列改变时触发
-   * @supported weapp, h5, rn
+   * @supported weapp, h5, rn, harmony_hybrid
    */
   onColumnChange?: CommonEventFunction<PickerMultiSelectorProps.ColumnChangeEventDetail>
 }
@@ -152,22 +161,26 @@ interface PickerTimeProps extends PickerStandardProps {
   mode: 'time'
   /**
    * value 的值表示选择了 range 中的第几个（下标从 0 开始）
+   * @supported weapp, h5, rn, harmony_hybrid
+   */
+  value?: string
+  /** 设置 React 非受控状态下的初始取值
    * @supported weapp, h5, rn
    */
-  value: string
+  defaultValue?: string
   /**
    * 仅当 mode 为 "time" 或 "date" 时有效，表示有效时间范围的开始，字符串格式为"hh:mm"
-   * @supported weapp, h5, rn
+   * @supported weapp, h5, rn, harmony_hybrid
    */
   start?: string
   /**
    * 仅当 mode 为 "time" 或 "date" 时有效，表示有效时间范围的结束，字符串格式为"hh:mm"
-   * @supported weapp, h5, rn
+   * @supported weapp, h5, rn, harmony_hybrid
    */
   end?: string
   /**
    * value 改变时触发 change 事件
-   * @supported weapp, h5, rn
+   * @supported weapp, h5, rn, harmony_hybrid
    */
   onChange: CommonEventFunction<PickerTimeProps.ChangeEventDetail>
 }
@@ -183,29 +196,33 @@ interface PickerDateProps extends PickerStandardProps {
   mode: 'date'
   /**
    * 表示选中的日期，格式为"YYYY-MM-DD"
-   * @supported weapp, h5, rn
+   * @supported weapp, h5, rn, harmony_hybrid
    * @default 0
    */
   value: string
+  /** 设置 React 非受控状态下的初始取值
+   * @supported weapp, h5, rn
+   */
+  defaultValue?: string
   /**
    * 仅当 mode 为 "time" 或 "date" 时有效，表示有效时间范围的开始，字符串格式为"YYYY-MM-DD"
-   * @supported weapp, h5, rn
+   * @supported weapp, h5, rn, harmony_hybrid
    */
   start?: string
   /**
    * 仅当 mode 为 "time" 或 "date" 时有效，表示有效时间范围的结束，字符串格式为"YYYY-MM-DD"
-   * @supported weapp, h5, rn
+   * @supported weapp, h5, rn, harmony_hybrid
    */
   end?: string
   /**
    * 有效值 year, month, day，表示选择器的粒度
-   * @supported weapp, h5, rn
+   * @supported weapp, h5, rn, harmony_hybrid
    * @default "day"
    */
   fields?: keyof PickerDateProps.Fields
   /**
    * value 改变时触发 change 事件
-   * @supported weapp, h5, rn
+   * @supported weapp, h5, rn, harmony_hybrid
    */
   onChange: CommonEventFunction<PickerDateProps.ChangeEventDetail>
 }
@@ -229,13 +246,17 @@ interface PickerRegionProps extends PickerStandardProps {
   mode: 'region'
   /**
    * 表示选中的省市区，默认选中每一列的第一个值
-   * @supported weapp, h5, rn
+   * @supported weapp, h5, rn, harmony_hybrid
    * @default []
    */
   value?: string[]
+  /** 设置 React 非受控状态下的初始取值
+   * @supported weapp, h5, rn
+   */
+  defaultValue?: string[]
   /**
    * 可为每一列的顶部添加一个自定义的项
-   * @supported weapp, h5, rn
+   * @supported weapp, h5, rn, harmony_hybrid
    */
   customItem?: string
   /**
@@ -251,7 +272,7 @@ interface PickerRegionProps extends PickerStandardProps {
   regionData?: PickerRegionProps.RegionData[]
   /**
    * value 改变时触发 change 事件
-   * @supported weapp, h5, rn
+   * @supported weapp, h5, rn, harmony_hybrid
    */
   onChange: CommonEventFunction<PickerRegionProps.ChangeEventDetail>
 }
@@ -283,7 +304,7 @@ declare namespace PickerRegionProps {
 /**
  * 从底部弹起的滚动选择器
  * @classification forms
- * @supported weapp, swan, alipay, tt, h5, rn, harmony
+ * @supported weapp, swan, alipay, tt, h5, rn, harmony, harmony_hybrid
  * @example_react
  * ```tsx
  * export default class PagePicker extends Component {

package/types/PickerView.d.ts

@@ -5,6 +5,11 @@ interface PickerViewProps extends StandardProps {
    * @supported weapp, alipay, swan, tt, qq, jd, rn
    */
   value?: number[]
+  /** 设置 React 非受控状态下的初始取值
+   * @supported weapp, alipay, swan, tt, qq, jd, rn
+   * @unique
+   */
+  defaultValue?: number[]
   /** 设置选择器中间选中框的样式
    * @supported weapp, alipay, swan, tt, qq, jd, rn
    */
@@ -55,7 +60,7 @@ declare namespace PickerViewProps {
 /** 嵌入页面的滚动选择器
  * 其中只可放置 picker-view-column 组件，其它节点不会显示
  * @classification forms
- * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony
+ * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid
  * @example_react
  * ```tsx
  * export default class Picks extends Component {

package/types/PickerViewColumn.d.ts

@@ -5,7 +5,7 @@ type PickerViewColumnProps = StandardProps
 /** 滚动选择器子项
  * 仅可放置于 `<PickerView />` 中，其孩子节点的高度会自动设置成与 picker-view 的选中框的高度一致
  * @classification forms
- * @supported weapp, swan, alipay, tt, h5, rn, harmony
+ * @supported weapp, swan, alipay, tt, h5, rn, harmony, harmony_hybrid
  * @see https://developers.weixin.qq.com/miniprogram/dev/component/picker-view-column.html
  */
 declare const PickerViewColumn: ComponentType<StandardProps>

package/types/Progress.d.ts

@@ -2,59 +2,59 @@ import { ComponentType } from 'react'
 import { StandardProps, CommonEventFunction } from './common'
 interface ProgressProps extends StandardProps {
   /** 百分比 0~100
-   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
+   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
    */
   percent?: number
   /** 在进度条右侧显示百分比
    * @default false
-   * @supported weapp, alipay, swan, qq, jd, h5, rn
+   * @supported weapp, alipay, swan, qq, jd, h5, rn, harmony_hybrid
    */
   showInfo?: boolean
   /** 圆角大小
    * @default 0
-   * @supported weapp, swan, qq, jd, h5
+   * @supported weapp, swan, qq, jd, h5, harmony_hybrid
    */
   borderRadius?: number | string
   /** 右侧百分比字体大小
    * @default 16
-   * @supported weapp, swan, qq, jd, h5
+   * @supported weapp, swan, qq, jd, h5, harmony_hybrid
    */
   fontSize?: number | string
   /** 进度条线的宽度
    * @default 6
-   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
+   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
    */
   strokeWidth?: number | string
   /** 进度条颜色 (请使用 activeColor)
    * @default "#09BB07"
-   * @supported weapp, swan, qq, jd, h5
+   * @supported weapp, swan, qq, jd, h5, harmony_hybrid
    */
   color?: string
   /** 已选择的进度条的颜色
    * @default "#09BB07"
-   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
+   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
    */
   activeColor?: string
   /** 未选择的进度条的颜色
    * @default "#EBEBEB"
-   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
+   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
    */
   backgroundColor?: string
   /** 进度条从左往右的动画
    * @default false
-   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
+   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
    */
   active?: boolean
   /** backwards: 动画从头播
    *
    * forwards: 动画从上次结束点接着播
    * @default backwards
-   * @supported weapp, swan, tt, qq, jd, h5, rn
+   * @supported weapp, swan, tt, qq, jd, h5, rn, harmony_hybrid
    */
   activeMode?: 'backwards' | 'forwards'
   /** 进度增加 1% 所需毫秒数
    * @default 30
-   * @supported weapp, swan, tt, jd, h5
+   * @supported weapp, swan, tt, jd, h5, harmony_hybrid
    */
   duration?: number
   /** 无障碍访问，（属性）元素的额外描述
@@ -62,13 +62,13 @@ interface ProgressProps extends StandardProps {
    */
   ariaLabel?: string
   /** 动画完成事件
-   * @supported weapp, tt, qq, jd, h5
+   * @supported weapp, tt, qq, jd, h5, harmony_hybrid
    */
   onActiveEnd?: CommonEventFunction
 }
 /** 进度条。组件属性的长度单位默认为 px
  * @classification base
- * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony
+ * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid
  * @example_react
  * ```tsx
  * export default class PageView extends Component {

package/types/Radio.d.ts

@@ -2,17 +2,17 @@ import { ComponentType } from 'react'
 import { StandardProps, CommonEventFunction, FormItemProps } from './common'
 interface RadioProps extends StandardProps {
   /** `<Radio/>` 标识。当该`<Radio/>` 选中时，`<RadioGroup/>`的 change 事件会携带`<Radio/>`的 value
-   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
+   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
    */
   value?: string
   /** 当前是否选中
    * @default false
-   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
+   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
    */
   checked?: boolean
   /** 是否禁用
    * @default false
-   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
+   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
    */
   disabled?: boolean
   /** Radio 的颜色，同 css 的 color
@@ -20,8 +20,13 @@ interface RadioProps extends StandardProps {
    * @supported weapp, alipay, swan, tt, qq, jd, rn
    */
   color?: string
+  /**
+   * Radio 的名字
+   * @supported h5, harmony, harmony_hybrid
+   */
+  name?: string
   /** 用于透传 `WebComponents` 上的属性到内部 H5 标签上
-   * @supported h5
+   * @supported h5, harmony_hybrid
    */
   nativeProps?: Record<string, unknown>
   /** 无障碍访问，（属性）元素的额外描述
@@ -29,7 +34,7 @@ interface RadioProps extends StandardProps {
    */
   ariaLabel?: string
   /** <radio-group/> 中的选中项发生变化时触发 change 事件
-   * @supported h5, rn
+   * @supported h5, rn, harmony_hybrid
    */
   onChange?: CommonEventFunction<{
     value?: string
@@ -37,7 +42,7 @@ interface RadioProps extends StandardProps {
 }
 /** 单选项目
  * @classification forms
- * @supported weapp, alipay, swan, tt, qq, h5, rn, harmony
+ * @supported weapp, alipay, swan, tt, qq, h5, rn, harmony, harmony_hybrid
  * @example_react
  * ```tsx
  * export default class PageRadio extends Component {

package/types/RadioGroup.d.ts

@@ -6,7 +6,7 @@ interface RadioGroupProps extends StandardProps, FormItemProps {
    */
   name?: string
   /** RadioGroup 中选中项发生改变时触发 change 事件，detail = {value:[选中的radio的value的数组]}
-   * @supported weapp, alipay, swan, tt, qq, jd, h5
+   * @supported weapp, alipay, swan, tt, qq, jd, h5, harmony_hybrid
    */
   onChange?: CommonEventFunction
 }
@@ -17,7 +17,7 @@ declare namespace RadioGroupProps {
 }
 /** 单项选择器，内部由多个 Radio 组成。
  * @classification forms
- * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony
+ * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid
  * @see https://developers.weixin.qq.com/miniprogram/dev/component/radio-group.html
  */
 declare const RadioGroup: ComponentType<RadioGroupProps>

package/types/RichText.d.ts

@@ -3,22 +3,22 @@ import { CommonEventFunction, StandardProps } from './common'
 interface RichTextProps extends StandardProps {
   /** 文本是否可选，该属性会使节点显示为 block
    * @default false
-   * @supported weapp, h5
+   * @supported weapp, h5, harmony_hybrid
    */
   userSelect?: boolean
   /** 节点列表/ HTML String
-   * @supported weapp, alipay, swan, tt, qq, h5, rn, harmony
+   * @supported weapp, alipay, swan, tt, qq, h5, rn, harmony, harmony_hybrid
    */
   nodes?: Nodes
   /** 显示连续空格
-   * @supported weapp, alipay, tt, qq, h5, rn
+   * @supported weapp, alipay, tt, qq, h5, rn, harmony_hybrid
    */
   space?: keyof RichTextProps.TSpace
   /** 富文本是否可以长按选中，可用于复制，粘贴，长按搜索等场景
    * @default false（基础库 3.150.1 以前版本）true（基础库 3.150.1 及以后版本）
-   * @supported swan, h5
+   * @supported swan, h5, harmony_hybrid
    */
-  selectable?: string
+  selectable?: boolean;
   /** 阻止长按图片时弹起默认菜单（将该属性设置为image-menu-prevent或image-menu-prevent="true"），只在初始化时有效，不能动态变更；若不想阻止弹起默认菜单，则不需要设置此属性
    * @default false
    * @supported swan
@@ -99,7 +99,7 @@ declare namespace RichTextProps {
 }
 /** 富文本
  * @classification base
- * @supported weapp, swan, alipay, tt, h5, rn, harmony
+ * @supported weapp, swan, alipay, tt, h5, rn, harmony, harmony_hybrid
  * @example_react
  * ```tsx
  * class App extends Components {

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 }