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

package/types/OpenData.d.ts

@@ -3,9 +3,9 @@ import { StandardProps, CommonEventFunction } from './common'
 
 interface OpenDataProps extends StandardProps {
   /** 开放数据类型
-   * @supported weapp
+   * @supported weapp, tt
    */
-  type: keyof OpenDataProps.type
+  type: keyof OpenDataProps.Type
   /** 当 type="groupName" 时生效, 群id
    * @supported weapp
    */
@@ -14,27 +14,27 @@ interface OpenDataProps extends StandardProps {
    * @default "en"
    * @supported weapp
    */
-  lang?: keyof OpenDataProps.lang
+  lang?: keyof OpenDataProps.Lang
 
   /** 数据为空时的默认文案
-   * @supported weapp
+   * @supported weapp, tt
    */
   defaultText?: string
 
   /** 用户头像为空时的默认图片，支持相对路径和网络图片路径
-   * @supported weapp
+   * @supported weapp, tt
    */
   defaultAvatar?: string
 
   /** 群名称或用户信息为空时触发
-   * @supported weapp
+   * @supported weapp, tt
    */
   onError?: CommonEventFunction
 }
 
 declare namespace OpenDataProps {
   /** type 的合法值 */
-  interface type {
+  interface Type {
     /** 拉取群名称 */
     groupName
     /** 用户昵称 */
@@ -53,7 +53,7 @@ declare namespace OpenDataProps {
     userLanguage
   }
   /** lang 的合法值 */
-  interface lang {
+  interface Lang {
     /** 英文 */
     en
     /** 简体中文 */
@@ -63,10 +63,10 @@ declare namespace OpenDataProps {
   }
 }
 
-/** 用于展示微信开放的数据
+/** 用于展示平台开放的数据
  * @classification open
- * @supported weapp
- * @example
+ * @supported weapp, tt
+ * @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

@@ -0,0 +1,121 @@
+import { ComponentType } from 'react'
+import { StandardProps, CommonEventFunction, BaseEventOrigFunction } from './common'
+
+interface PageContainerProps extends StandardProps {
+  /** 是否显示容器组件
+   * @default false
+   * @supported weapp, rn
+   */
+  show?: boolean
+
+  /** 动画时长，单位毫秒
+   * @default 300
+   * @supported weapp, rn
+   */
+  duration?: number
+
+  /** z-index 层级
+   * @default 100
+   * @supported weapp
+   */
+  zIndex?: number
+
+  /** 是否显示遮罩层
+   * @default true
+   * @supported weapp, rn
+   */
+  overlay?: boolean
+
+  /** 弹出位置，可选值为 top bottom right center
+   * @default bottom
+   * @supported weapp, rn
+   */
+  position?: keyof PageContainerProps.Position
+
+  /** 是否显示圆角
+   * @default false
+   * @supported weapp, rn
+   */
+  round?: boolean
+
+  /** 是否在下滑一段距离后关闭
+   * @default false
+   * @supported weapp
+   */
+  closeOnSlideDown?: boolean
+
+  /** 自定义遮罩层样式
+   * @supported weapp, rn
+   */
+  overlayStyle?: string
+
+  /** 自定义弹出层样式
+   * @supported weapp, rn
+   */
+  customStyle?: string
+
+  /** 进入前触发
+   * @supported weapp, rn
+   */
+  onBeforeEnter?: CommonEventFunction
+
+  /** 进入中触发
+   * @supported weapp, rn
+   */
+  onEnter?: CommonEventFunction
+
+  /** 进入后触发
+   * @supported weapp, rn
+   */
+  onAfterEnter?: CommonEventFunction
+
+  /** 离开前触发
+   * @supported weapp, rn
+   */
+  onBeforeLeave?: CommonEventFunction
+
+  /** 离开中触发
+   * @supported weapp, rn
+   */
+  onLeave?: CommonEventFunction
+
+  /** 离开后触发
+   * @supported weapp, rn
+   */
+  onAfterLeave?: CommonEventFunction
+
+  /** 点击遮罩层时触发
+   * @supported weapp
+   */
+  onClickOverlay?: CommonEventFunction
+}
+
+declare namespace PageContainerProps {
+  /** 弹出位置 */
+  interface Position {
+    /** 上方弹出 */
+    top
+    /** 下方弹出 */
+    bottom
+    /** 右边弹出 */
+    right
+    /** 中央弹出 */
+    center
+  }
+}
+
+/** 页面容器
+ *
+ * 小程序如果在页面内进行复杂的界面设计（如在页面内弹出半屏的弹窗、在页面内加载一个全屏的子页面等），用户进行返回操作会直接离开当前页面，不符合用户预期，预期应为关闭当前弹出的组件。
+ * 为此提供“假页”容器组件，效果类似于 `popup` 弹出层，页面内存在该容器时，当用户进行返回操作，关闭该容器不关闭页面。返回操作包括三种情形，右滑手势、安卓物理返回键和调用 `navigateBack` 接口。
+ *
+ * Bug & Tip
+ *   1. tip: 当前页面最多只有 1 个容器，若已存在容器的情况下，无法增加新的容器
+ *   2. tip: wx.navigateBack 无法在页面栈顶调用，此时没有上一级页面
+ * @classification viewContainer
+ * @supported weapp, rn
+ * @see https://developers.weixin.qq.com/miniprogram/dev/component/page-container.html
+ */
+declare const PageContainer: ComponentType<PageContainerProps>
+
+export { PageContainer, PageContainerProps }

package/types/Picker.d.ts

@@ -103,7 +103,7 @@ interface PickerMultiSelectorProps extends PickerStandardProps {
    * 列改变时触发
    * @supported weapp, h5, rn
    */
-  onColumnChange?: CommonEventFunction<PickerMultiSelectorProps.ColumnChangeEvnetDetail>
+  onColumnChange?: CommonEventFunction<PickerMultiSelectorProps.ColumnChangeEventDetail>
 }
 
 declare namespace PickerMultiSelectorProps {
@@ -111,7 +111,7 @@ declare namespace PickerMultiSelectorProps {
     /** 表示变更值的下标 */
     value: number[]
   }
-  interface ColumnChangeEvnetDetail {
+  interface ColumnChangeEventDetail {
     /** 表示改变了第几列（下标从0开始） */
     column: number
     /** 表示变更值的下标 */
@@ -247,7 +247,7 @@ declare namespace PickerRegionProps {
  * 从底部弹起的滚动选择器
  * @classification forms
  * @supported weapp, h5, rn, swan, alipay, tt
- * @example
+ * @example_react
  * ```tsx
  * export default class PagePicker extends Component {
  *   state = {
@@ -314,6 +314,69 @@ declare namespace PickerRegionProps {
  *   }
  * }
  * ```
+ * @example_vue
+ * ```html
+ * <template>
+ *   <view class="page-body">
+ *     <view class="page-section">
+ *       <text>地区选择器</text>
+ *       <view>
+ *         <picker mode="selector" :range="selector" `@change="onChange">
+ *           <view class="picker">
+ *             当前选择：{{selectorChecked}}
+ *           </view>
+ *         </picker>
+ *       </view>
+ *     </view>
+ *     <view class="page-section">
+ *       <text>时间选择器</text>
+ *       <view>
+ *         <picker mode="time" `@change="onTimeChange">
+ *           <view class="picker">
+ *             当前选择：{{timeSel}}
+ *           </view>
+ *         </picker>
+ *       </view>
+ *     </view>
+ *     <view class="page-section">
+ *       <text>日期选择器</text>
+ *       <view>
+ *         <picker mode="date" `@change="onDateChange">
+ *           <view class="picker">
+ *             当前选择：{{dateSel}}
+ *           </view>
+ *         </picker>
+ *       </view>
+ *     </view>
+ *   </view>
+ * </template>
+ *
+ * <script>
+ *   export default {
+ *     data() {
+ *       return {
+ *         selector: ['美国', '中国', '巴西', '日本'],
+ *         selectorChecked: '美国',
+ *         timeSel: '12:01',
+ *         dateSel: '2018-04-22'
+ *       }
+ *     },
+ *     methods: {
+ *       onChange: function(e) {
+ *         this.selectorChecked = this.selector[e.detail.value]
+ *       },
+ *
+ *       onTimeChange: function(e) {
+ *         this.timeSel = e.detail.value
+ *       },
+ *
+ *       onDateChange: function(e) {
+ *         this.dateSel = e.detail.value
+ *       }
+ *     }
+ *   }
+ * </script>
+ * ```
  * @see https://developers.weixin.qq.com/miniprogram/dev/component/picker.html
  */
 declare const Picker: ComponentType<PickerMultiSelectorProps | PickerTimeProps | PickerDateProps | PickerRegionProps | PickerSelectorProps>

package/types/PickerView.d.ts

@@ -28,6 +28,12 @@ interface PickerViewProps extends StandardProps {
    */
   maskClass?: string
 
+  /** 是否在手指松开时立即触发 change 事件。若不开启则会在滚动动画结束后触发 change 事件。
+   * @supported weapp
+   * @default false
+   */
+  immediateChange?: boolean
+
   /** 当滚动选择，value 改变时触发 change 事件，event.detail = {value: value}；value为数组，表示 picker-view 内的 picker-view-column 当前选择的是第几项（下标从 0 开始）
    * @supported weapp, swan, alipay, tt, rn
    */
@@ -53,8 +59,8 @@ declare namespace PickerViewProps {
 /** 嵌入页面的滚动选择器
  * 其中只可放置 picker-view-column 组件，其它节点不会显示
  * @classification forms
- * @supported weapp, swan, alipay, tt
- * @example
+ * @supported weapp, swan, alipay, tt, h5, rn
+ * @example_react
  * ```tsx
  * export default class Picks extends Component {
  *
@@ -125,7 +131,65 @@ declare namespace PickerViewProps {
  *     )
  *   }
  * }
+ * ```
+ * @example_vue
+ * ```html
+ * <template>
+ *   <view class="taro-example">
+ *   <view>{{year}}年{{month}}月{{day}}日</view>
+ *   <picker-view indicator-style="height: 30px;" style="width: 100%; height: 300px;" :value="value" `@change="onChange">
+ *     <picker-view-column>
+ *       <view v-for="(item, index) in years" :key="index">{{item}}年</view>
+ *     </picker-view-column>
+ *     <picker-view-column>
+ *       <view v-for="(item, index) in months" :key="index">{{item}}月</view>
+ *     </picker-view-column>
+ *     <picker-view-column>
+ *       <view v-for="(item, index) in days" :key="index">{{item}}日</view>
+ *     </picker-view-column>
+ *   </picker-view>
+ * </view>
+ * </template>
  *
+ * <script>
+ *   export default {
+ *     name: "Index",
+ *     data() {
+ *       const date = new Date()
+ *       const years = []
+ *       const months = []
+ *       const days = []
+ *       for (let i = 1990; i <= date.getFullYear(); i++) {
+ *         years.push(i)
+ *       }
+ *       for (let i = 1; i <= 12; i++) {
+ *         months.push(i)
+ *       }
+ *       for (let i = 1; i <= 31; i++) {
+ *         days.push(i)
+ *       }
+ *       return {
+ *         years: years,
+ *         year: date.getFullYear(),
+ *         months: months,
+ *         month: 2,
+ *         days: days,
+ *         day: 2,
+ *         value: [3, 1, 1]
+ *       }
+ *     },
+ *
+ *     methods: {
+ *       onChange: function(e) {
+ *         const val = e.detail.value
+ *         console.log(val)
+ *         this.year = this.years[val[0]]
+ *         this.month = this.months[val[1]]
+ *         this.day = this.days[val[2]]
+ *       }
+ *     }
+ *   }
+ * </script>
  * ```
  * @see https://developers.weixin.qq.com/miniprogram/dev/component/picker-view.html
  */

package/types/PickerViewColumn.d.ts

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

package/types/Progress.d.ts

@@ -78,13 +78,13 @@ interface ProgressProps extends StandardProps {
 /** 进度条。组件属性的长度单位默认为 px
  * @classification base
  * @supported weapp, swan, alipay, tt, h5, rn
- * @example
+ * @example_react
  * ```tsx
  * export default class PageView extends Component {
  *   constructor() {
  *     super(...arguments)
  *   }
- * 
+ *
  *   render() {
  *     return (
  *       <View className='components-page'>
@@ -97,6 +97,17 @@ interface ProgressProps extends StandardProps {
  *   }
  * }
  * ```
+ * @example_vue
+ * ```html
+ * <template>
+ *   <view class="components-page">
+ *     <progress percent="20" stroke-width="2" :show-info="true" />
+ *     <progress percent="40" stroke-width="2" :active="true" />
+ *     <progress percent="60" stroke-width="2" :active="true" />
+ *     <progress percent="80" stroke-width="2" :active="true" active-color="blue" />
+ *   </view>
+ * </template>
+ * ```
  * @see https://developers.weixin.qq.com/miniprogram/dev/component/progress.html
  */
 declare const Progress: ComponentType<ProgressProps>

package/types/Radio.d.ts

@@ -3,33 +3,38 @@ import { StandardProps, CommonEventFunction, FormItemProps } from './common'
 
 interface RadioProps extends StandardProps {
   /** `<Radio/>` 标识。当该`<Radio/>` 选中时，`<RadioGroup/>`的 change 事件会携带`<Radio/>`的 value
-   * @supported weapp, rn
+   * @supported weapp, rn, tt
    */
   value?: string
 
   /** 当前是否选中
    * @default false
-   * @supported weapp, h5, rn
+   * @supported weapp, h5, rn, tt
    */
   checked?: boolean
 
   /** 是否禁用
    * @default false
-   * @supported weapp, h5, rn
+   * @supported weapp, h5, rn, tt
    */
   disabled?: boolean
 
   /** Radio 的颜色，同 css 的 color
    * @default "#09BB07"
-   * @supported weapp, rn
+   * @supported weapp, rn, tt
    */
   color?: string
+
+  /** 用于透传 `WebComponents` 上的属性到内部 H5 标签上
+   * @supported h5
+   */
+  nativeProps?: Record<string, unknown>
 }
 
 /** 单选项目
  * @classification forms
- * @supported weapp, h5, rn
- * @example
+ * @supported weapp, h5, rn, tt
+ * @example_react
  * ```tsx
  * export default class PageRadio extends Component {
  *   state = {
@@ -96,6 +101,77 @@ interface RadioProps extends StandardProps {
  *   }
  * }
  * ```
+ * @example_vue
+ * ```html
+ * <template>
+ *   <view class="container">
+ *     <view class="page-section">
+ *       <text>默认样式</text>
+ *       <radio value="选中" :checked="true">选中</radio>
+ *       <radio style="margin-left: 20rpx;" value="未选中">未选中</radio>
+ *     </view>
+ *     <view class="page-section">
+ *       <text>推荐展示样式(Taro 团队成员):</text>
+ *         <radio-group `@change="onChange">
+ *           <label v-for="item in list" class="checkbox-list__label">
+ *             <radio class="checkbox-list__checkbox" :value="item.value" :checked="item.checked">{{ item.text }}</radio>
+ *           </label>
+ *         </radio-group>
+ *     </view>
+ *   </view>
+ * </template>
+ *
+ * <script>
+ * export default {
+ *   data() {
+ *     return {
+ *       list: [
+ *         {
+ *           value: 'yuche',
+ *           text: 'yuche',
+ *           checked: false
+ *         },
+ *         {
+ *           value: 'cjj',
+ *           text: 'cjj',
+ *           checked: false
+ *         },
+ *         {
+ *           value: 'xiexiaoli',
+ *           text: 'xiexiaoli',
+ *           checked: false
+ *         },
+ *         {
+ *           value: 'honly',
+ *           text: 'honly',
+ *           checked: false
+ *         },
+ *         {
+ *           value: 'cs',
+ *           text: 'cs',
+ *           checked: false
+ *         },
+ *         {
+ *           value: 'zhutianjian',
+ *           text: 'zhutianjian',
+ *           checked: false
+ *         },
+ *         {
+ *           value: '隔壁老李',
+ *           text: '隔壁老李',
+ *           checked: true
+ *         }
+ *       ]
+ *     }
+ *   },
+ *   methods: {
+ *     onChange: function(e) {
+ *       console.log(e.detail.value)
+ *     }
+ *   }
+ * }
+ * </script>
+ * ```
  * @see https://developers.weixin.qq.com/miniprogram/dev/component/radio.html
  */
 declare const Radio: ComponentType<RadioProps>

package/types/RadioGroup.d.ts

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

package/types/RichText.d.ts

@@ -2,10 +2,15 @@ import { ComponentType } from 'react'
 import { StandardProps } from './common'
 
 interface RichTextProps extends StandardProps {
+  /** 文本是否可选，该属性会使节点显示为 block
+   * @default false
+   * @supported weapp
+   */
+  userSelect?: boolean
   /** 节点列表/ HTML String */
   nodes?: Nodes
   /** 显示连续空格
-   * @supported weapp
+   * @supported weapp, rn
    */
   space?: keyof RichTextProps.TSpace
 }
@@ -65,7 +70,7 @@ declare namespace RichTextProps {
 /** 富文本
  * @classification base
  * @supported weapp, swan, alipay, tt, h5, rn
- * @example
+ * @example_react
  * ```tsx
  * class App extends Components {
  *   state = {
@@ -88,6 +93,38 @@ declare namespace RichTextProps {
  *   }
  * }
  * ```
+ * @example_vue
+ * ```html
+ * <template>
+ *   <view class="components-page">
+ *     <rich-text :nodes="nodes"></rich-text>
+ *   </view>
+ * </template>
+ *
+ * <script>
+ * export default {
+ *   name: 'Index',
+ *   data() {
+ *     return {
+ *       nodes: [{
+ *         name: 'div',
+ *         attrs: {
+ *           class: 'div_class',
+ *           style: 'line-height: 60px; color: red;'
+ *         },
+ *         children: [{
+ *           type: 'text',
+ *           text: 'Hello World!'
+ *         }]
+ *       }]
+ *     }
+ *   },
+ *   onReady () {
+ *     console.log('onReady')
+ *   }
+ * }
+ * </script>
+ * ```
  * @see https://developers.weixin.qq.com/miniprogram/dev/component/rich-text.html
  */
 declare const RichText: ComponentType<RichTextProps>