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

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

@@ -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

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

package/types/Progress.d.ts

@@ -78,7 +78,7 @@ 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() {
@@ -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

@@ -24,12 +24,17 @@ interface RadioProps extends StandardProps {
    * @supported weapp, rn
    */
   color?: string
+
+  /** 用于透传 `WebComponents` 上的属性到内部 H5 标签上
+   * @supported h5
+   */
+  nativeProps?: Record<string, unknown>
 }
 
 /** 单选项目
  * @classification forms
  * @supported weapp, h5, rn
- * @example
+ * @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/RichText.d.ts

@@ -65,7 +65,7 @@ declare namespace RichTextProps {
 /** 富文本
  * @classification base
  * @supported weapp, swan, alipay, tt, h5, rn
- * @example
+ * @example_react
  * ```tsx
  * class App extends Components {
  *   state = {
@@ -88,6 +88,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>

package/types/ScrollView.d.ts

@@ -98,31 +98,31 @@ interface ScrollViewProps extends StandardProps {
   refresherTriggered?: boolean
 
   /** 启用 scroll-view 增强特性
-   * @supported weapp 2.12.0+
+   * @supported weapp
    * @default false
    */
   enhanced?: boolean
 
   /** iOS 下 scroll-view 边界弹性控制 (同时开启 enhanced 属性后生效)
-   * @supported weapp 2.12.0+
+   * @supported weapp
    * @default true
    */
   bounces?: boolean
 
   /** 滚动条显隐控制 (同时开启 enhanced 属性后生效)
-   * @supported weapp 2.12.0+
+   * @supported weapp
    * @default true
    */
   showScrollbar?: boolean
 
   /** 分页滑动效果 (同时开启 enhanced 属性后生效)
-   * @supported weapp 2.12.0+
+   * @supported weapp
    * @default false
    */
   pagingEnabled?: boolean
 
   /** boolean	false	滑动减速速率控制 (同时开启 enhanced 属性后生效)
-   * @supported weapp 2.12.0+
+   * @supported weapp
    * @default false
    */
   fastDeceleration?: boolean
@@ -164,17 +164,17 @@ interface ScrollViewProps extends StandardProps {
   onRefresherAbort?: CommonEventFunction
 
   /** 滑动开始事件 (同时开启 enhanced 属性后生效)
-   * @supported weapp 2.12.0+
+   * @supported weapp
    */
   onDragStart?: CommonEventFunction
 
   /** 滑动事件 (同时开启 enhanced 属性后生效)
-   * @supported weapp 2.12.0+
+   * @supported weapp
    */
   onDragging?: CommonEventFunction
 
   /** 滑动结束事件 (同时开启 enhanced 属性后生效)
-   * @supported weapp 2.12.0+
+   * @supported weapp
    */
   onDragEnd?: CommonEventFunction
 }
@@ -200,7 +200,8 @@ declare namespace ScrollViewProps {
  * H5 中 ScrollView 组件是通过一个高度（或宽度）固定的容器内部滚动来实现的，因此务必正确的设置容器的高度。例如: 如果 ScrollView 的高度将 body 撑开，就会同时存在两个滚动条（body 下的滚动条，以及 ScrollView 的滚动条）。
  * 微信小程序 中 ScrollView 组件如果设置 scrollX 横向滚动时，并且子元素为多个时（单个子元素时设置固定宽度则可以正常横向滚动），需要通过 WXSS 设置 `white-space: nowrap` 来保证元素不换行，并对 ScrollView 内部元素设置 `display: inline-block` 来使其能够横向滚动。
  * @classification viewContainer
- * @example
+ * @supported weapp, swan, alipay, tt, h5, rn
+ * @example_react
  * ```tsx
  * export default class PageView extends Component {
  *   constructor() {
@@ -255,6 +256,87 @@ declare namespace ScrollViewProps {
  *   }
  * }
  * ```
+ * @example_vue
+ * ```html
+ * <template>
+ *   <view class="container">
+ *     <view class="page-body">
+ *       <view class="page-section">
+ *         <view class="page-section-title">
+ *           <text>Vertical Scroll - 纵向滚动</text>
+ *         </view>
+ *         <view class="page-section-spacing">
+ *           <scroll-view :scroll-y="true" style="height: 300rpx;" `@scrolltoupper="upper" `@scrolltolower="lower" `@scroll="scroll" :scroll-into-view="toView" :scroll-top="scrollTop">
+ *             <view id="demo1" class="scroll-view-item demo-text-1">1</view>
+ *             <view id="demo2"  class="scroll-view-item demo-text-2">2</view>
+ *             <view id="demo3" class="scroll-view-item demo-text-3">3</view>
+ *           </scroll-view>
+ *         </view>
+ *       </view>
+ *       <view class="page-section">
+ *         <view class="page-section-title">
+ *           <text>Horizontal Scroll - 横向滚动</text>
+ *         </view>
+ *         <view class="page-section-spacing">
+ *           <scroll-view class="scroll-view_H" :scroll-x="true" `@scroll="scroll" style="width: 100%">
+ *             <view id="demo21" class="scroll-view-item_H demo-text-1">a</view>
+ *             <view id="demo22"  class="scroll-view-item_H demo-text-2">b</view>
+ *             <view id="demo23" class="scroll-view-item_H demo-text-3">c</view>
+ *           </scroll-view>
+ *         </view>
+ *       </view>
+ *     </view>
+ *   </view>
+ * </template>
+ * 
+ * <script>
+ * const order = ['demo1', 'demo2', 'demo3']
+ * export default {
+ *   name: 'Index',
+ *   data() {
+ *     return {
+ *       scrollTop: 0,
+ *       toView: 'demo2'
+ *     }
+ *   },
+ * 
+ *   methods: {
+ *     upper(e) {
+ *       console.log('upper:', e)
+ *     },
+ * 
+ *     lower(e) {
+ *       console.log('lower:', e)
+ *     },
+ * 
+ *     scroll(e) {
+ *       console.log('scroll:', e)
+ *     }
+ *   }
+ * }
+ * </script>
+ * 
+ * <style>
+ * .page-section-spacing{
+ *   margin-top: 60rpx;
+ * }
+ * .scroll-view_H{
+ *   white-space: nowrap;
+ * }
+ * .scroll-view-item{
+ *   height: 300rpx;
+ * }
+ * .scroll-view-item_H{
+ *   display: inline-block;
+ *   width: 100%;
+ *   height: 300rpx;
+ * }
+ * 
+ * .demo-text-1 { background: #ccc; }
+ * .demo-text-2 { background: #999; }
+ * .demo-text-3 { background: #666; }
+ * </style>
+ * ```
  * @see https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html
  */
 declare const ScrollView: ComponentType<ScrollViewProps>

package/types/ShareElement.d.ts

@@ -0,0 +1,39 @@
+import { ComponentType } from 'react'
+import { StandardProps, CommonEventFunction } from './common'
+
+interface ShareElementProps extends StandardProps {
+  /** 映射标记
+   * @supported weapp
+   */
+  key: string
+
+  /** 是否进行动画
+   * @default false
+   * @supported weapp
+   */
+  transform?: boolean
+
+  /** 动画时长，单位毫秒
+   * @default 300
+   * @supported weapp
+   */
+  duration?: number
+
+  /** css缓动函数
+   * @default ease-out
+   * @supported weapp
+   */
+  easingFunction?: number
+}
+
+/** 共享元素
+ *
+ * 共享元素是一种动画形式，类似于 [`flutter Hero`](https://flutterchina.club/animations/hero-animations/) 动画，表现为元素像是在页面间穿越一样。该组件需与 [`page-container`](https://developers.weixin.qq.com/miniprogram/dev/component/page-container.html) 组件结合使用。
+ * 使用时需在当前页放置 `share-element` 组件，同时在 `page-container` 容器中放置对应的 `share-element` 组件，对应关系通过属性值 key 映射。当设置 `page-container` `显示时，transform` 属性为 `true` 的共享元素会产生动画。当前页面容器退出时，会产生返回动画。
+ * @classification viewContainer
+ * @supported weapp
+ * @see https://developers.weixin.qq.com/miniprogram/dev/component/share-element.html
+ */
+declare const ShareElement: ComponentType<ShareElementProps>
+
+export { ShareElement, ShareElementProps }

package/types/Slider.d.ts

@@ -94,7 +94,7 @@ declare namespace SliderProps {
 /** 滑动选择器
  * @classification forms
  * @supported weapp, h5, rn, swan, alipay, tt
- * @example
+ * @example_react
  * ```tsx
  * export default class PageView extends Component {
  *   constructor() {
@@ -115,6 +115,19 @@ declare namespace SliderProps {
  *   }
  * }
  * ```
+ * @example_vue
+ * ```html
+ * <template>
+ *   <view class="components-page">
+ *     <text>设置 step</text>
+ *     <slider step="1" value="50"/>
+ *     <text>显示当前 value</text>
+ *     <slider step="1" value="50" :show-value="true" />
+ *     <text>设置最小/最大值</text>
+ *     <slider step="1" value="100" :show-value="true" min="50" max="200"/>
+ *   </view>
+ * </template>
+ * ```
  * @see https://developers.weixin.qq.com/miniprogram/dev/component/slider.html
  */
 declare const Slider: ComponentType<SliderProps>