@tarojs/components 3.4.0-beta.3 → 3.5.0-canary.1

package/dist/types/components/input/input.d.ts

@@ -3,6 +3,7 @@ import { TaroEvent } from '../../../types';
 export declare class Input implements ComponentInterface {
   private inputRef;
   private isOnComposition;
+  private isOnPaste;
   private onInputExcuted;
   private fileListener;
   value: string;
@@ -20,6 +21,7 @@ export declare class Input implements ComponentInterface {
   watchHandler(newValue: string, oldValue: string): void;
   watchFocus(newValue: boolean, oldValue: boolean): void;
   onInput: EventEmitter;
+  onPaste: EventEmitter;
   onFocus: EventEmitter;
   onBlur: EventEmitter;
   onConfirm: EventEmitter;
@@ -29,6 +31,7 @@ export declare class Input implements ComponentInterface {
   componentDidLoad(): void;
   disconnectedCallback(): void;
   handleInput: (e: TaroEvent<HTMLInputElement>) => void;
+  handlePaste: (e: TaroEvent<HTMLInputElement> & ClipboardEvent) => void;
   handleFocus: (e: TaroEvent<HTMLInputElement> & FocusEvent) => void;
   handleBlur: (e: TaroEvent<HTMLInputElement> & FocusEvent) => void;
   handleChange: (e: TaroEvent<HTMLInputElement>) => void;

package/dist/types/components.d.ts

@@ -941,6 +941,7 @@ declare namespace LocalJSX {
         "onFocus"?: (event: CustomEvent<any>) => void;
         "onInput"?: (event: CustomEvent<any>) => void;
         "onKeydown"?: (event: CustomEvent<any>) => void;
+        "onPaste"?: (event: CustomEvent<any>) => void;
         "password"?: boolean;
         "placeholder"?: string;
         "type"?: string;

package/dist-h5/vue/components/picker.js

@@ -31,7 +31,8 @@ export default {
     return createElement('taro-picker-core', {
       class: 'hydrated',
       domProps: {
-        range: self.range
+        range: self.range,
+        rangeKey: self.rangeKey
       },
       on: _objectSpread(_objectSpread({}, self.listeners), {}, {
         change: function change(e) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tarojs/components",
-  "version": "3.4.0-beta.3",
+  "version": "3.5.0-canary.1",
   "description": "",
   "main:h5": "src/index.js",
   "main": "dist/index.js",
@@ -38,7 +38,7 @@
   "license": "MIT",
   "dependencies": {
     "@stencil/core": "2.9.0",
-    "@tarojs/taro": "3.4.0-beta.3",
+    "@tarojs/taro": "3.5.0-canary.1",
     "better-scroll": "^1.14.1",
     "classnames": "^2.2.5",
     "intersection-observer": "^0.7.0",
@@ -55,5 +55,5 @@
     "simulant": "^0.2.2",
     "workbox-build": "4.3.1"
   },
-  "gitHead": "2ef7e8c10c9e5784e98bb1ad3a803d5fd6a46c8b"
+  "gitHead": "c61624d2f763e6d31e67d6cf9c564efc8b0d0887"
 }

package/types/Ad.d.ts

@@ -110,7 +110,7 @@ declare namespace AdProps {
 /** Banner 广告
  * @classification open
  * @supported weapp
- * @example
+ * @example_react
  * ```tsx
  * class App extends Component {
  *   render () {
@@ -126,6 +126,18 @@ declare namespace AdProps {
  *   }
  * }
  * ```
+ * @example_vue
+ * ```html
+ * <template>
+ *   <ad
+ *     unit-id=""
+ *     ad-intervals="60"
+ *     `@load="onLoad"
+ *     `@error="onError"
+ *     `@close="onClose"
+ *   />
+ * </template>
+ * ```
  * @see https://developers.weixin.qq.com/miniprogram/dev/component/ad.html
  */
 declare const Ad: ComponentType<AdProps>

package/types/Audio.d.ts

@@ -72,6 +72,11 @@ interface AudioProps extends StandardProps {
    * @supported weapp, h5, swan
    */
   onEnded?: CommonEventFunction
+
+  /** 用于透传 `WebComponents` 上的属性到内部 H5 标签上
+   * @supported h5
+   */
+  nativeProps?: Record<string, unknown>
 }
 
 declare namespace AudioProps {
@@ -102,7 +107,7 @@ declare namespace AudioProps {
  * @classification media
  * @deprecated
  * @supported weapp, h5, swan
- * @example
+ * @example_react
  * ```tsx
  * export default class PageView extends Component {
  *   constructor() {
@@ -113,7 +118,7 @@ declare namespace AudioProps {
  *     return (
  *       <View className='components-page'>
  *         <Audio
- *           src='http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E06DCBDC9AB7C49FD713D632D313AC4858BACB8DDD29067D3C601481D36E62053BF8DFEAF74C0A5CCFADD6471160CAF3E6A&fromtag=46'
+ *           src='https://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E06DCBDC9AB7C49FD713D632D313AC4858BACB8DDD29067D3C601481D36E62053BF8DFEAF74C0A5CCFADD6471160CAF3E6A&fromtag=46'
  *           controls={true}
  *           autoplay={false}
  *           loop={false}
@@ -126,6 +131,21 @@ declare namespace AudioProps {
  *   }
  * }
  * ```
+ * @example_vue
+ * ```html
+ * <template>
+ *   <view class="components-page">
+ *     <audio
+ *       id="video"
+ *       src="https://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E06DCBDC9AB7C49FD713D632D313AC4858BACB8DDD29067D3C601481D36E62053BF8DFEAF74C0A5CCFADD6471160CAF3E6A&fromtag=46"
+ *       :controls="true"
+ *       :autoplay="false"
+ *       :loop="false"
+ *       :muted="true"
+ *     />
+ *   </view>
+ * </template>
+ * ```
  * @see https://developers.weixin.qq.com/miniprogram/dev/component/audio.html
  */
 declare const Audio: ComponentType<AudioProps>

package/types/Button.d.ts

@@ -4,37 +4,37 @@ import { StyleProp, ViewStyle } from 'react-native'
 
 interface ButtonProps extends StandardProps {
   /** 按钮的大小
-   * @supported weapp, h5, rn
+   * @supported weapp, h5, rn, alipay
    * @default default
    */
   size?: keyof ButtonProps.size
 
   /** 按钮的样式类型
-   * @supported weapp, h5, rn
+   * @supported weapp, h5, rn, alipay
    * @default default
    */
   type?: keyof ButtonProps.type
 
   /** 按钮是否镂空，背景色透明
-   * @supported weapp, h5, rn
+   * @supported weapp, h5, rn, alipay
    * @default false
    */
   plain?: boolean
 
   /** 是否禁用
-   * @supported weapp, h5, rn
+   * @supported weapp, h5, rn, alipay
    * @default false
    */
   disabled?: boolean
 
   /** 名称前是否带 loading 图标
-   * @supported weapp, h5, rn
+   * @supported weapp, h5, rn, alipay
    * @default false
    */
   loading?: boolean
 
   /** 用于 `<form/>` 组件，点击分别会触发 `<form/>` 组件的 submit/reset 事件
-   * @supported weapp
+   * @supported weapp, alipay
    */
   formType?: keyof ButtonProps.formType
 
@@ -45,7 +45,7 @@ interface ButtonProps extends StandardProps {
 
   /** 指定按下去的样式类。当 `hover-class="none"` 时，没有点击态效果
    * @default button-hover
-   * @supported weapp, h5
+   * @supported weapp, alipay, h5
    * @rn 支持 hoverStyle 属性，但框架未支持 hoverClass
    */
   hoverClass?: string
@@ -58,19 +58,19 @@ interface ButtonProps extends StandardProps {
 
   /** 指定是否阻止本节点的祖先节点出现点击态
    * @default false
-   * @supported weapp
+   * @supported weapp, alipay
    */
   hoverStopPropagation?: boolean
 
   /** 按住后多久出现点击态，单位毫秒
    * @default 20
-   * @supported weapp, h5, rn
+   * @supported weapp, alipay, h5, rn
    */
   hoverStartTime?: number
 
   /** 手指松开后点击态保留时间，单位毫秒
    * @default 70
-   * @supported weapp, h5, rn
+   * @supported weapp, alipay, h5, rn
    */
   hoverStayTime?: number
 
@@ -374,7 +374,7 @@ declare namespace ButtonProps {
 /** 按钮
  * @classification forms
  * @supported weapp, h5, rn
- * @example
+ * @example_react
  * ```tsx
  * export default class PageButton extends Component {
  *   state = {
@@ -447,6 +447,79 @@ declare namespace ButtonProps {
  *   }
  * }
  * ```
+ * @example_vue
+ * ```html
+ * <template>
+ *   <view class="container">
+ *     <button
+ *       v-for="item in btn"
+ *       :size="item.size ? item.size : ''"
+ *       :type="item.type ? item.type : ''"
+ *       :loading="item.loading ? item.loading : false"
+ *       :disabled="item.disabled ? item.disabled : false"
+ *     >
+ *       {{ item.text }}
+ *     </button>
+ *     <button class="btn-max-w" :plain="true" type="primary">按钮</button>
+ *     <button class="btn-max-w" :plain="true" type="primary" :disabled="true">不可点击的按钮</button>
+ *     <button class="btn-max-w" :plain="true">按钮</button>
+ *     <button class="btn-max-w" :plain="true" :disabled="true">按钮</button>
+ *     <button size="mini" type="primary">按钮</button>
+ *     <button size="mini" >按钮</button>
+ *     <button size="mini" type="warn">按钮</button>
+ *   </view>
+ * </template>
+ * 
+ * <script>
+ * export default {
+ *   data() {
+ *     return {
+ *       btn: [
+ *         {
+ *           text: '页面主操作 Normal',
+ *           size: 'default',
+ *           type: 'primary'
+ *         },
+ *         {
+ *           text: '页面主操作 Loading',
+ *           size: 'default',
+ *           type: 'primary',
+ *           loading: true,
+ *         },
+ *         {
+ *           text: '页面主操作 Disabled',
+ *           size: 'default',
+ *           type: 'primary',
+ *           disabled: true,
+ *         },
+ *         {
+ *           text: '页面次要操作 Normal',
+ *           size: 'default',
+ *           type: 'default'
+ *         },
+ *         {
+ *           text: '页面次要操作 Disabled',
+ *           size: 'default',
+ *           type: 'default',
+ *           disabled: true,
+ *         },
+ *         {
+ *           text: '警告类操作 Normal',
+ *           size: 'default',
+ *           type: 'warn'
+ *         },
+ *         {
+ *           text: '警告类操作 Disabled',
+ *           size: 'default',
+ *           type: 'warn',
+ *           disabled: true,
+ *         }
+ *       ]
+ *     }
+ *   }
+ * }
+ * </script>
+ * ```
  * @see https://developers.weixin.qq.com/miniprogram/dev/component/button.html
  */
 declare const Button: ComponentType<ButtonProps>

package/types/Camera.d.ts

@@ -115,7 +115,7 @@ declare namespace CameraProps {
 
 /** 系统相机
  * @classification media
- * @supported weapp
+ * @supported weapp, rn
  * @see https://developers.weixin.qq.com/miniprogram/dev/component/camera.html
  */
 declare const Camera: ComponentType<CameraProps>

package/types/Canvas.d.ts

@@ -47,6 +47,11 @@ interface CanvasProps extends StandardProps<any, CanvasTouchEvent> {
    * @supported weapp
    */
   onError?: CommonEventFunction<CanvasProps.onErrorEventDetail>
+
+  /** 用于透传 `WebComponents` 上的属性到内部 H5 标签上
+   * @supported h5
+   */
+  nativeProps?: Record<string, unknown>
 }
 
 declare namespace CanvasProps {
@@ -60,16 +65,24 @@ declare namespace CanvasProps {
  * `<Canvas />` 组件的 RN 版本尚未实现。
  * @classification canvas
  * @supported weapp
- * @example
+ * @example_react
  * ```tsx
  * class App extends Components {
  *   render () {
+ *     // 如果是支付宝小程序，则要加上 id 属性，值和canvasId一致
  *     return (
  *       <Canvas style='width: 300px; height: 200px;' canvasId='canvas' />
  *     )
  *   }
  * }
  * ```
+ * @example_vue
+ * ```html
+ * <template>
+ *   <!-- 如果是支付宝小程序，则要加上 id 属性，值和canvasId一致 -->
+ *   <canvas style="width: 300px; height: 200px;" canvas-id="canvas" />
+ * </template>
+ * ```
  * @see https://developers.weixin.qq.com/miniprogram/dev/component/canvas.html
  */
 declare const Canvas: ComponentType<CanvasProps>

package/types/Checkbox.d.ts

@@ -29,12 +29,17 @@ interface CheckboxProps extends StandardProps {
    * @supported h5, rn
    */
   onChange?: CommonEventFunction<{ value: string[] }>
+
+  /** 用于透传 `WebComponents` 上的属性到内部 H5 标签上
+   * @supported h5
+   */
+  nativeProps?: Record<string, unknown>
 }
 
 /** 多选项目
  * @classification forms
  * @supported weapp, h5, rn
- * @example
+ * @example_react
  * ```tsx
  * export default class PageCheckbox extends Component {
  *   state = {
@@ -94,6 +99,65 @@ interface CheckboxProps extends StandardProps {
  *   }
  * }
  * ```
+ * @example_vue
+ * ```html
+ * <template>
+ *   <view class="container">
+ *     <view class="page-section">
+ *       <text>默认样式</text>
+ *       <checkbox value="选中" :checked="true">选中</checkbox>
+ *       <checkbox style="margin-left: 20rpx;" value="未选中">未选中</checkbox>
+ *     </view>
+ *     <view class="page-section">
+ *       <text>推荐展示样式(Taro 团队成员):</text>
+ *       <label v-for="item in list" class="checkbox-list__label">
+ *         <checkbox class="checkbox-list__checkbox" :value="item.value" :checked="item.checked">{{ item.text }}</checkbox>
+ *       </label>
+ *     </view>
+ *   </view>
+ * </template>
+ * 
+ * <script>
+ * export default {
+ *   data() {
+ *     return {
+ *       list: [
+ *         {
+ *           value: '美国',
+ *           text: '美国',
+ *           checked: false
+ *         },
+ *         {
+ *           value: '中国',
+ *           text: '中国',
+ *           checked: true
+ *         },
+ *         {
+ *           value: '巴西',
+ *           text: '巴西',
+ *           checked: false
+ *         },
+ *         {
+ *           value: '日本',
+ *           text: '日本',
+ *           checked: false
+ *         },
+ *         {
+ *           value: '英国',
+ *           text: '英国',
+ *           checked: false
+ *         },
+ *         {
+ *           value: '法国',
+ *           text: '法国',
+ *           checked: false
+ *         }
+ *       ]
+ *     }
+ *   }
+ * }
+ * </script>
+ * ```
  * @see https://developers.weixin.qq.com/miniprogram/dev/component/checkbox.html
  */
 declare const Checkbox: ComponentType<CheckboxProps>

package/types/CoverImage.d.ts

@@ -3,32 +3,34 @@ import { StandardProps, CommonEventFunction } from './common'
 
 interface CoverImageProps extends StandardProps {
   /** 图标路径，支持临时路径、网络地址、云文件ID。暂不支持base64格式。
-   * @supported weapp
+   * @supported weapp, h5
    */
   src: string
 
   /** 图片加载成功时触发
-   * @supported weapp
+   * @supported weapp, h5
    */
   onLoad?: CommonEventFunction
 
   /** 图片加载失败时触发
-   * @supported weapp
+   * @supported weapp, h5
    */
   onError?: CommonEventFunction
 }
 
 /** 覆盖在原生组件之上的图片视图。可覆盖的原生组件同cover-view，支持嵌套在cover-view里。
  * @classification viewContainer
- * @supported weapp, swan, alipay
- * @example
+ * @supported weapp, swan, alipay, h5
+ * @example_react
  * ```tsx
+ * // js
  * class App extends Components {
  *   render () {
  *     return (
+ *       <View className='container'>
  *       <Video id='myVideo' src='src'>
  *         <CoverView className='controls'>
- *           <CoverView className='play' onClick={() => { TODO }}>
+ *           <CoverView className='play' onClick='play'>
  *             <CoverImage className='img' src='src' />
  *           </CoverView>
  *         </CoverView>
@@ -36,6 +38,46 @@ interface CoverImageProps extends StandardProps {
  *     )
  *   }
  * }
+ * // css
+ * .container {
+ *   position: relative;
+ * }
+ * .controls {
+ *   position: absolute;
+ *   top: 50%;
+ *   left: 50%;
+ *   width: 300px;
+ *   height: 225px;
+ *   transform: translate(-50%, -50%);
+ * }
+ * ```
+ * @example_vue
+ * ```html
+ * <template>
+ *   <view class="container">
+ *     <video id='myvideo' src='https://ugccsy.qq.com/uwMROfz2r5zBIaQXGdGnC2dfDma3J1MItM3912IN4IRQvkRM/o31507f7lcd.mp4?sdtfrom=v1010&guid=aa18cf106b7fdb7e40f2d20b206f2b4f&vkey=63B0FCCC7FC3ADC342C166D86571AE02772258CD9B515B065DC68DF3919D8C288AE831D570ED5E8FE0FF3E81E170D04FF11F874BFDDACF7AAA2C0CFF2ACB39FB1A94DAD1AB859BDA53E4DD6DBCDC1217CEF789A9AC079924E2BBC599EED7A1FFDD60A727F2EB7E7B6472CE63DD4B683C9199DFC78A6A6C4D9891E05467C4B64E'>
+ *     </video>
+ *     <cover-view class='controls'>
+ *       <cover-view class='play' `@tap='play'>
+ *         <cover-image class='img' src='https://img10.360buyimg.com/ling/s345x208_jfs/t1/133501/7/9865/382161/5f5ee31fEbdd6a418/0cdc0156ffff3c23.png' />
+ *       </cover-view>
+ *     </cover-view>
+ *   </view>
+ * </template>
+ * 
+ * <style>
+ * .container {
+ *   position: relative;
+ * }
+ * .controls {
+ *   position: absolute;
+ *   top: 50%;
+ *   left: 50%;
+ *   width: 300px;
+ *   height: 225px;
+ *   transform: translate(-50%, -50%);
+ * }
+ * </style>
  * ```
  * @see https://developers.weixin.qq.com/miniprogram/dev/component/cover-image.html
  */

package/types/CoverView.d.ts

@@ -21,22 +21,65 @@ interface CoverViewProps extends ViewProps {
 
 /** 覆盖在原生组件之上的文本视图。可覆盖的原生组件包括 map、video、canvas、camera、live-player、live-pusher 只支持嵌套 cover-view、cover-image，可在 cover-view 中使用 button。
  * @classification viewContainer
- * @supported weapp, swan, alipay
- * @example
+ * @supported weapp, swan, alipay, h5
+ * @example_react
  * ```tsx
+ * // js
  * class App extends Components {
  *   render () {
  *     return (
- *       <Video id='myVideo' src='src'>
- *         <CoverView className='controls'>
- *           <CoverView className='play' onClick={() => { TODO }}>
- *             <CoverImage className='img' src='src' />
+ *       <View className='container'>
+ *         <Video id='myVideo' src='src'>
+ *           <CoverView className='controls'>
+ *             <CoverView className='play' onClick='play'>
+ *               <CoverImage className='img' src='src' />
+ *             </CoverView>
  *           </CoverView>
- *         </CoverView>
- *       </Video>
+ *         </Video>
+ *       </View>
  *     )
  *   }
  * }
+ * // css
+ * .container {
+ *   position: relative;
+ * }
+ * .controls {
+ *   position: absolute;
+ *   top: 50%;
+ *   left: 50%;
+ *   width: 300px;
+ *   height: 225px;
+ *   transform: translate(-50%, -50%);
+ * }
+ * ```
+ * @example_vue
+ * ```html
+ * <template>
+ *   <view class="container">
+ *     <video id='myvideo' src='https://ugccsy.qq.com/uwMROfz2r5zBIaQXGdGnC2dfDma3J1MItM3912IN4IRQvkRM/o31507f7lcd.mp4?sdtfrom=v1010&guid=aa18cf106b7fdb7e40f2d20b206f2b4f&vkey=63B0FCCC7FC3ADC342C166D86571AE02772258CD9B515B065DC68DF3919D8C288AE831D570ED5E8FE0FF3E81E170D04FF11F874BFDDACF7AAA2C0CFF2ACB39FB1A94DAD1AB859BDA53E4DD6DBCDC1217CEF789A9AC079924E2BBC599EED7A1FFDD60A727F2EB7E7B6472CE63DD4B683C9199DFC78A6A6C4D9891E05467C4B64E'>
+ *     </video>
+ *     <cover-view class='controls'>
+ *       <cover-view class='play' `@tap='play'>
+ *         <cover-image class='img' src='https://img10.360buyimg.com/ling/s345x208_jfs/t1/133501/7/9865/382161/5f5ee31fEbdd6a418/0cdc0156ffff3c23.png' />
+ *       </cover-view>
+ *     </cover-view>
+ *   </view>
+ * </template>
+ * 
+ * <style>
+ * .container {
+ *   position: relative;
+ * }
+ * .controls {
+ *   position: absolute;
+ *   top: 50%;
+ *   left: 50%;
+ *   width: 300px;
+ *   height: 225px;
+ *   transform: translate(-50%, -50%);
+ * }
+ * </style>
  * ```
  * @see https://developers.weixin.qq.com/miniprogram/dev/component/cover-view.html
  */

package/types/Editor.d.ts

@@ -79,6 +79,63 @@ declare namespace EditorProps {
  * *编辑器内支持部分 HTML 标签和内联样式，不支持 **class** 和 **id***
  * @classification forms
  * @supported weapp
+ * @example_react
+ * ```tsx
+ * class App extends Components {
+ *   state = {
+ *     placeholder: '来，输入隔壁的名字试试...'
+ *   }
+ * 
+ *   editorReady = e => {
+ *     Taro.createSelectorQuery().select('#editor').context((res) => {
+ *       this.editorCtx = res.context
+ *     }).exec()
+ *   }
+ * 
+ *   undo = e => {
+ *     this.editorCtx.undo()
+ *   }
+ * 
+ *   render () {
+ *     return (
+ *       <View>
+ *         <Editor id='editor' className='editor' placeholder={this.state.placeholder} onReady={this.editorReady}></Editor>
+ *         <Button type='warn' onClick={this.undo}>撤销</Button>
+ *       </View>
+ *     )
+ *   }
+ * }
+ * ```
+ * @example_vue
+ * ```html
+ * <template>
+ *   <view class="container">
+ *     <editor id="editor" class="editor" :placeholder="placeholder" `@ready="editorReady"></editor>
+ *     <button type="warn" `@tap="undo">撤销</button>
+ *   </view>
+ * </template>
+ * 
+ * <script>
+ *   import Taro from '@tarojs/taro'
+ *   export default {
+ *     data() {
+ *       return {
+ *         placeholder: '来，输入隔壁的名字试试...'
+ *       }
+ *     },
+ *     methods: {
+ *       editorReady() {
+ *         Taro.createSelectorQuery().select('#editor').context((res) => {
+ *           this.editorCtx = res.context
+ *         }).exec()
+ *       },
+ *       undo() {
+ *         this.editorCtx.undo()
+ *       }
+ *     }
+ *   }
+ * </script>
+ * ```
  * @see https://developers.weixin.qq.com/miniprogram/dev/component/editor.html
  */
 declare const Editor: ComponentType<EditorProps>