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

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() {
@@ -224,15 +225,15 @@ declare namespace ScrollViewProps {
  *     const Threshold = 20
  *     const vStyleA = {
  *       height: '150px',
- *       'background-color': 'rgb(26, 173, 25)'
+ *       'backgroundColor': 'rgb(26, 173, 25)'
  *     }
  *     const vStyleB = {
  *        height: '150px',
- *       'background-color': 'rgb(39,130,215)'
+ *       'backgroundColor': 'rgb(39,130,215)'
  *     }
  *     const vStyleC = {
  *       height: '150px',
- *       'background-color': 'rgb(241,241,241)',
+ *       'backgroundColor': 'rgb(241,241,241)',
  *       color: '#333'
  *     }
  *     return (
@@ -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,232 @@
+import { ComponentType } from 'react'
+import { StandardProps, CommonEventFunction } from './common'
+
+interface ShareElementProps extends StandardProps {
+  /** 映射标记
+   * @supported weapp
+   */
+  mapkey: 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/) 动画，表现为元素像是在页面间穿越一样。该组件需与 [`PageContainer`](/docs/components/viewContainer/page-container) 组件结合使用。
+ * 使用时需在当前页放置 `ShareElement` 组件，同时在 `PageContainer` 容器中放置对应的 `ShareElement` 组件，对应关系通过属性值 key 映射。当设置 `PageContainer` `显示时，transform` 属性为 `true` 的共享元素会产生动画。当前页面容器退出时，会产生返回动画。
+ * @classification viewContainer
+ * @supported weapp
+ * @example_react
+ * ```tsx
+ * // index.js
+ * import { useState, useCallback } from 'react'
+ * import { View, Button, PageContainer, ShareElement } from '@tarojs/components'
+ *
+ * import './index.scss'
+ *
+ * const contacts = [
+ *   { id: 1, name: 'Frank', img: 'frank.png', phone: '0101 123456', mobile: '0770 123456', email: 'frank@emailionicsorter.com' },
+ *   { id: 2, name: 'Susan', img: 'susan.png', phone: '0101 123456', mobile: '0770 123456', email: 'frank@emailionicsorter.com' },
+ *   { id: 3, name: 'Emma', img: 'emma.png', phone: '0101 123456', mobile: '0770 123456', email: 'frank@emailionicsorter.com' },
+ *   { id: 4, name: 'Scott', img: 'scott.png', phone: '0101 123456', mobile: '0770 123456', email: 'frank@emailionicsorter.com' },
+ *   { id: 5, name: 'Bob', img: 'bob.png', phone: '0101 123456', mobile: '0770 123456', email: 'frank@emailionicsorter.com' },
+ *   { id: 6, name: 'Olivia', img: 'olivia.png', phone: '0101 123456', mobile: '0770 123456', email: 'frank@emailionicsorter.com' },
+ *   { id: 7, name: 'Anne', img: 'anne.png', phone: '0101 123456', mobile: '0770 123456', email: 'frank@emailionicsorter.com' },
+ *   { id: 8, name: 'sunny', img: 'olivia.png', phone: '0101 123456', mobile: '0770 123456', email: 'frank@emailionicsorter.com' }
+ * ]
+ *
+ * export default function () {
+ *   const [show, setShow] = useState(false)
+ *   const [contact, setContact] = useState(contacts[0])
+ *   const [transformIdx, setTransformIdx] = useState(0)
+ *
+ *   const onBeforeEnter = useCallback((res) => {
+ *     console.log('onBeforeEnter: ', res)
+ *   }, [])
+ *   const onEnter = useCallback((res) => {
+ *     console.log('onEnter: ', res)
+ *   }, [])
+ *   const onAfterEnter = useCallback((res) => {
+ *     console.log('onAfterEnter: ', res)
+ *   }, [])
+ *   const onBeforeLeave = useCallback((res) => {
+ *     console.log('onBeforeLeave: ', res)
+ *   }, [])
+ *   const onLeave = useCallback((res) => {
+ *     console.log('onLeave: ', res)
+ *   }, [])
+ *   const onAfterLeave = useCallback((res) => {
+ *     console.log('onAfterLeave: ', res)
+ *   }, [])
+ *
+ *   const showNext = (e, index) => {
+ *     setShow(true)
+ *     setContact(contacts[index])
+ *     setTransformIdx(index)
+ *   }
+ *
+ *   const showPrev = useCallback(() => {
+ *     setShow(false)
+ *   }, [])
+ *
+ *   return (
+ *     <View>
+ *       <View className="screen screen1">
+ *         {
+ *           contacts.map((item, index) => (
+ *             <View key={item.id} className="contact" onClick={e => showNext(e, index)}>
+ *               <ShareElement duration={300} className="name" mapkey="name" transform={transformIdx === index}>
+ *                 {item.name}
+ *               </ShareElement>
+ *               <View className="list">
+ *                 <View>Phone: {item.phone}</View>
+ *                 <View>Mobile: {item.mobile}</View>
+ *                 <View>Email: {item.email}</View>
+ *               </View>
+ *             </View>
+ *           ))
+ *         }
+ *       </View>
+ *       <PageContainer
+ *         show={show}
+ *         overlay={false}
+ *         closeOnSlideDown
+ *         duration={300}
+ *         position='center'
+ *         onBeforeEnter={onBeforeEnter}
+ *         onEnter={onEnter}
+ *         onAfterEnter={onAfterEnter}
+ *         onBeforeLeave={onBeforeLeave}
+ *         onLeave={onLeave}
+ *         onAfterLeave={onAfterLeave}
+ *       >
+ *         <View className="screen screen2">
+ *           <View className="contact">
+ *             <ShareElement className="name" mapkey="name" duration={300} transform>
+ *               {contact.name}
+ *             </ShareElement>
+ *             <View className={`paragraph ${show ? 'enter' : ''}`}>
+ *               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus nisl enim, sodales non augue efficitur, sagittis
+ *               varius neque. Fusce dolor turpis, maximus eu volutpat quis, pellentesque et ligula. Ut vehicula metus in nibh
+ *               mollis ornare. Etiam aliquam lacinia malesuada. Vestibulum dignissim mollis quam a tristique. Maecenas neque
+ *               mauris, malesuada vitae magna eu, congue consectetur risus. Etiam vitae pulvinar ex. Maecenas suscipit mi ac
+ *               imperdiet pretium. Aliquam velit mauris, euismod quis elementum sed, malesuada non dui. Nunc rutrum sagittis
+ *               ligula in dapibus. Cras suscipit ut augue eget mollis. Donec auctor feugiat ipsum id viverra. Vestibulum eu nisi
+ *               risus. Vestibulum eleifend dignissim.
+ *
+ *             </View>
+ *             <Button className="screen2-button" onClick={showPrev} hidden={!show} hoverClass="none">Click Me</Button>
+ *           </View>
+ *         </View>
+ *       </PageContainer>
+ *     </View>
+ *   )
+ * }
+ * ```
+ * ```scss
+ * \/** index.scss *\/
+ * page {
+ *   color: #333;
+ *   background-color: #ddd;
+ *   overflow: hidden;
+ * }
+ *
+ * button {
+ *   border: 0 solid #0010ae;
+ *   background-color: #1f2afe;
+ *   color: #fff;
+ *   font-size: 120%;
+ *   padding: 8px 16px;
+ *   outline-width: 0;
+ *   -webkit-appearance: none;
+ *   box-shadow: 0 8px 17px rgba(0, 0, 0, 0.2);
+ * }
+ *
+ * .screen {
+ *   position: absolute;
+ *   top: 0;
+ *   bottom: 0;
+ *   left: 0;
+ *   right: 0;
+ *   padding: 16px;
+ *   -webkit-overflow-scrolling: touch;
+ * }
+ *
+ * .contact {
+ *   position: relative;
+ *   padding: 16px;
+ *   background-color: #fff;
+ *   width: 100%;
+ *   height: 100%;
+ *   box-sizing: border-box;
+ * }
+ *
+ * .avatar {
+ *   position: absolute;
+ *   top: 16px;
+ *   left: 16px;
+ *   font-size: 0;
+ * }
+ *
+ * .name {
+ *   height: 65px;
+ *   font-size: 2em;
+ *   font-weight: bold;
+ *   text-align: center;
+ *   margin: 10px 0;
+ * }
+ *
+ * .list {
+ *   padding-top: 8px;
+ *   padding-left: 32px;
+ * }
+ *
+ * .screen1 {
+ *   overflow-y: scroll;
+ *   padding: 0;
+ * }
+ *
+ * .screen1 .contact {
+ *   margin: 16px;
+ *   height: auto;
+ *   width: auto;
+ *   box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
+ * }
+ *
+ * .screen2-button {
+ *   display: block;
+ *   margin: 24px auto;
+ * }
+ *
+ * .paragraph {
+ *   -webkit-transition: transform ease-in-out 300ms;
+ *   transition: transform ease-in-out 300ms;
+ *   -webkit-transform: scale(0.6);
+ *   transform: scale(0.6);
+ * }
+ *
+ * .enter.paragraph {
+ *   transform: none;
+ * }
+ * ```
+ * @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,13 +94,13 @@ declare namespace SliderProps {
 /** 滑动选择器
  * @classification forms
  * @supported weapp, h5, rn, swan, alipay, tt
- * @example
+ * @example_react
  * ```tsx
  * export default class PageView extends Component {
  *   constructor() {
  *     super(...arguments)
  *   }
- * 
+ *
  *   render() {
  *     return (
  *       <View className='components-page'>
@@ -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>

package/types/Slot.d.ts

@@ -18,7 +18,7 @@ interface SlotProps {
  * @example
  * ```tsx
  * import { Slot, View, Text } from '@tarojs/components'
- * 
+ *
  * export default class SlotView extends Component {
  *   render () {
  *     return (
@@ -36,4 +36,4 @@ interface SlotProps {
  */
 declare const Slot: ComponentType<SlotProps>
 
-export { Slot, SlotProps }
+export { Slot, SlotProps }

package/types/Swiper.d.ts

@@ -63,13 +63,13 @@ interface SwiperProps extends StandardProps {
 
   /** 前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值
    * @default "0px"
-   * @supported weapp, h5
+   * @supported weapp, h5, tt
    */
   previousMargin?: string
 
   /** 后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值
    * @default "0px"
-   * @supported weapp, h5
+   * @supported weapp, h5, tt
    */
   nextMargin?: string
 
@@ -94,7 +94,7 @@ interface SwiperProps extends StandardProps {
 
   /** 指定 swiper 切换缓动动画类型
    * @default "default"
-   * @supported weapp
+   * @supported weapp, tt
    */
   easingFunction?: keyof SwiperProps.TEasingFunction
 
@@ -104,15 +104,15 @@ interface SwiperProps extends StandardProps {
   onChange?: CommonEventFunction<SwiperProps.onChangeEventDetail>
 
   /** swiper-item 的位置发生改变时会触发 transition 事件
-   * @supported weapp
+   * @supported weapp, tt
    */
   onTransition?: CommonEventFunction<SwiperProps.onTransitionEventDetail>
 
   /** 动画结束时会触发 animationfinish 事件
-   * @supported weapp, swan, h5, rn
+   * @supported weapp, swan, h5, rn, tt
    */
   onAnimationFinish?: SwiperProps['onChange']
-  
+
   /** 是否禁止用户 touch 操作
    * @default false
    * @supported alipay
@@ -151,7 +151,7 @@ declare namespace SwiperProps {
     /** 导致变更的原因 */
     source: keyof SwiperProps.TChangeSource
     /** SwiperItem的itemId参数值 */
-    currentItemId?: string 
+    currentItemId?: string
   }
 
   interface onTransitionEventDetail {
@@ -163,9 +163,10 @@ declare namespace SwiperProps {
 }
 
 /** 滑块视图容器。其中只可放置 swiper-item 组件，否则会导致未定义的行为。
+ * > 不要为 `SwiperItem` 设置 **style** 属性，可以通过 class 设置样式。[7147](https://github.com/NervJS/taro/issues/7147)
  * @classification viewContainer
  * @supported weapp, swan, alipay, tt, h5, rn
- * @example
+ * @example_react
  * ```tsx
  * class App extends Component {
  *   render () {
@@ -192,6 +193,30 @@ declare namespace SwiperProps {
  *   }
  * }
  * ```
+ * @example_vue
+ * ```html
+ * <template>
+ *   <swiper
+ *     class='test-h'
+ *     indicator-color='#999'
+ *     indicator-active-color='#333'
+ *     :vertical="true"
+ *     :circular="true"
+ *     :indicator-dots="true"
+ *     :autoplay="true"
+ *   >
+ *     <swiper-item>
+ *       <view class='demo-text-1'>1</view>
+ *     </swiper-item>
+ *     <swiper-item>
+ *       <view class='demo-text-2'>2</view>
+ *     </swiper-item>
+ *     <swiper-item>
+ *       <view class='demo-text-3'>3</view>
+ *     </swiper-item>
+ *   </swiper>
+ * </template>
+ * ```
  * @see https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html
  */
 declare const Swiper: ComponentType<SwiperProps>

package/types/SwiperItem.d.ts

@@ -3,15 +3,16 @@ import { StandardProps } from './common'
 
 interface SwiperItemProps extends StandardProps {
   /** 该 swiper-item 的标识符
-   * @supported weapp
+   * @supported weapp, swan, alipay, tt, h5, rn
    */
   itemId?: string
 }
 
 /** 仅可放置在 swiper 组件中，宽高自动设置为100%
+ * > 不要为 `SwiperItem` 设置 **style** 属性，可以通过 class 设置样式。[7147](https://github.com/NervJS/taro/issues/7147)
  * @classification viewContainer
- * @supported weapp
- * @example
+ * @supported weapp, swan, alipay, tt, h5, rn
+ * @example_react
  * ```tsx
  * class App extends Component {
  *   render () {
@@ -38,6 +39,30 @@ interface SwiperItemProps extends StandardProps {
  *   }
  * }
  * ```
+ * @example_vue
+ * ```html
+ * <template>
+ *   <swiper
+ *     class='test-h'
+ *     indicator-color='#999'
+ *     indicator-active-color='#333'
+ *     :vertical="true"
+ *     :circular="true"
+ *     :indicator-dots="true"
+ *     :autoplay="true"
+ *   >
+ *     <swiper-item>
+ *       <view class='demo-text-1'>1</view>
+ *     </swiper-item>
+ *     <swiper-item>
+ *       <view class='demo-text-2'>2</view>
+ *     </swiper-item>
+ *     <swiper-item>
+ *       <view class='demo-text-3'>3</view>
+ *     </swiper-item>
+ *   </swiper>
+ * </template>
+ * ```
  * @see https://developers.weixin.qq.com/miniprogram/dev/component/swiper-item.html
  */
 declare const SwiperItem: ComponentType<SwiperItemProps>

package/types/Switch.d.ts

@@ -10,7 +10,7 @@ interface SwitchProps extends StandardProps, FormItemProps {
 
   /** 是否禁用
    * @default false
-   * @supported weapp
+   * @supported weapp, rn, tt
    */
   disabled?: boolean
 
@@ -27,9 +27,14 @@ interface SwitchProps extends StandardProps, FormItemProps {
   color?: string
 
   /** checked 改变时触发 change 事件
-   * @supported weapp
+   * @supported weapp, rn, tt
    */
   onChange?: CommonEventFunction<SwitchProps.onChangeEventDetail>
+
+  /** 用于透传 `WebComponents` 上的属性到内部 H5 标签上
+   * @supported h5
+   */
+  nativeProps?: Record<string, unknown>
 }
 
 declare namespace SwitchProps {
@@ -40,13 +45,13 @@ declare namespace SwitchProps {
 
 /** 开关选择器
  * @classification forms
- * @example
+ * @example_react
  * ```tsx
  * export default class PageView extends Component {
  *   constructor() {
  *     super(...arguments)
  *   }
- * 
+ *
  *   render() {
  *     return (
  *       <View className='components-page'>
@@ -61,6 +66,19 @@ declare namespace SwitchProps {
  *   }
  * }
  * ```
+ * @example_vue
+ * ```html
+ * <template>
+ *   <view class='components-page'>
+ *     <text>默认样式</text>
+ *     <switch :checked="true" />
+ *     <switch />
+ *     <text>推荐展示样式</text>
+ *     <switch :checked="true" />
+ *     <switch />
+ *   </view>
+ * </template>
+ * ```
  * @supported weapp, h5, rn, swan, alipay, tt
  * @see https://developers.weixin.qq.com/miniprogram/dev/component/switch.html
  */