@tarojs/components 3.4.2 → 3.4.5

package/dist-h5/vue3/components/image.js

@@ -1,12 +1,15 @@
 import { h } from 'vue';
+import { useForwardRef } from '../forwardRef';
 export default {
   emits: ['tap'],
   setup: function setup(props, _ref) {
     var slots = _ref.slots,
         emit = _ref.emit,
         attrs = _ref.attrs;
+    var forwardRef = useForwardRef();
     return function () {
       return h('taro-image-core', {
+        ref: forwardRef,
         class: ['hydrated', {
           'taro-img__widthfix': attrs.mode === 'widthFix'
         }],

package/dist-h5/vue3/components/scroll-view.js

@@ -1,12 +1,15 @@
 import { h } from 'vue';
+import { useForwardRef } from '../forwardRef';
 export default {
   emits: ['tap', 'scroll'],
   setup: function setup(props, _ref) {
     var slots = _ref.slots,
         emit = _ref.emit,
         attrs = _ref.attrs;
+    var forwardRef = useForwardRef();
     return function () {
       return h('taro-scroll-view-core', {
+        ref: forwardRef,
         class: ['hydrated', {
           'taro-scroll-view__scroll-x': attrs['scroll-x'] === '',
           'taro-scroll-view__scroll-y': attrs['scroll-y'] === ''

package/dist-h5/vue3/components/text.js

@@ -1,12 +1,15 @@
 import { h } from 'vue';
+import { useForwardRef } from '../forwardRef';
 export default {
   emits: ['tap'],
   setup: function setup(props, _ref) {
     var slots = _ref.slots,
         emit = _ref.emit,
         attrs = _ref.attrs;
+    var forwardRef = useForwardRef();
     return function () {
       return h('taro-text-core', {
+        ref: forwardRef,
         class: ['hydrated', {
           'taro-text_selectable': attrs.selectable
         }],

package/dist-h5/vue3/createComponent.js

@@ -1,5 +1,6 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import { h } from 'vue';
+import { useForwardRef } from './forwardRef';
 export default function createComponent(name) {
   var classNames = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
   return {
@@ -7,8 +8,10 @@ export default function createComponent(name) {
     setup: function setup(props, _ref) {
       var slots = _ref.slots,
           emit = _ref.emit;
+      var forwardRef = useForwardRef();
       return function () {
         return h("".concat(name, "-core"), {
+          ref: forwardRef,
           class: ['hydrated'].concat(_toConsumableArray(classNames)),
           onClick: function onClick(e) {
             emit('tap', e);

package/dist-h5/vue3/createFormsComponent.js

@@ -1,11 +1,12 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 import { h, toRefs, computed } from 'vue';
+import { useForwardRef } from './forwardRef';
 export default function createFormsComponent(name, eventName) {
   var modelValue = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'value';
   var classNames = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : [];
@@ -33,8 +34,10 @@ export default function createFormsComponent(name, eventName) {
 
         return name === 'taro-input' ? (_ref2 = {}, _defineProperty(_ref2, modelValue, model.value), _defineProperty(_ref2, 'auto-focus', focus.value), _ref2) : _defineProperty({}, modelValue, model.value);
       });
+      var forwardRef = useForwardRef();
       return function () {
         return h("".concat(name, "-core"), _objectSpread(_objectSpread({
+          ref: forwardRef,
           class: ['hydrated'].concat(_toConsumableArray(classNames))
         }, attrs.value), {}, _defineProperty({
           onClick: function onClick(e) {

package/dist-h5/vue3/forwardRef.js

@@ -0,0 +1,11 @@
+import { getCurrentInstance } from 'vue';
+export function useForwardRef() {
+  var instance = getCurrentInstance();
+
+  function forwardRef(ref) {
+    instance.exposed = ref;
+    instance.exposeProxy = ref;
+  }
+
+  return forwardRef;
+}

package/dist-h5/vue3/index.js

@@ -5,6 +5,47 @@ import Text from './components/text';
 import Image from './components/image';
 import Icon from './components/icon';
 import ScrollView from './components/scroll-view';
+export { Text, Image, Icon, ScrollView };
+export var View = createComponent('taro-view');
+export var RichText = createComponent('taro-rich-text');
+export var Button = createComponent('taro-button');
+export var CheckboxGroup = createComponent('taro-checkbox-group');
+export var Editor = createComponent('taro-editor');
+export var Form = createComponent('taro-form');
+export var Label = createComponent('taro-label');
+export var PickerView = createComponent('taro-picker-view');
+export var PickerViewColumn = createComponent('taro-picker-view-column');
+export var CoverImage = createComponent('taro-cover-image');
+export var CoverView = createComponent('taro-cover-view');
+export var MovableArea = createComponent('taro-movable-area');
+export var MovableView = createComponent('taro-movable-view');
+export var Swiper = createComponent('taro-swiper');
+export var FunctionalPageNavigator = createComponent('taro-functional-page-navigator');
+export var Navigator = createComponent('taro-navigator');
+export var Audio = createComponent('taro-audio');
+export var Camera = createComponent('taro-camera');
+export var LivePlayer = createComponent('taro-live-player');
+export var Map = createComponent('taro-map');
+export var Ad = createComponent('taro-ad');
+export var OfficialAccount = createComponent('taro-official-account');
+export var OpenData = createComponent('taro-open-data');
+export var WebView = createComponent('taro-web-view');
+export var NavigationBar = createComponent('taro-navigation-bar');
+export var Block = createComponent('taro-block');
+export var Canvas = createComponent('taro-canvas');
+export var CustomWrapper = createComponent('taro-custom-wrapper');
+export var Checkbox = createComponent('taro-checkbox', ['weui-cells_checkbox']);
+export var Progress = createComponent('taro-progress', ['weui-progress']);
+export var RadioGroup = createComponent('taro-radio-group', ['weui-cells_radiogroup']);
+export var Radio = createComponent('taro-radio', ['weui-cells_checkbox']);
+export var SwiperItem = createComponent('taro-swiper-item', ['swiper-slide']);
+export var Video = createComponent('taro-video', ['taro-video-container']);
+export var Slot = createComponent('taro-slot');
+export var Input = createFormsComponent('taro-input', 'input');
+export var Textarea = createFormsComponent('taro-textarea', 'input');
+export var Picker = createFormsComponent('taro-picker', 'change');
+export var Switch = createFormsComponent('taro-switch', 'change', 'checked');
+export var Slider = createFormsComponent('taro-slider', 'change', 'value', ['weui-slider-box']);
 export function initVue3Components(app) {
   app.config.isCustomElement = function (tag) {
     return /^taro-/.test(tag) || tag === 'root' || tag === 'block';
@@ -19,11 +60,6 @@ export function initVue3Components(app) {
       app.component(name, createComponent(name, classNames));
     }
   });
-  var Input = createFormsComponent('taro-input', 'input');
-  var Textarea = createFormsComponent('taro-textarea', 'input');
-  var Picker = createFormsComponent('taro-picker', 'change');
-  var Switch = createFormsComponent('taro-switch', 'change', 'checked');
-  var Slider = createFormsComponent('taro-slider', 'change', 'value', ['weui-slider-box']);
   app.component('taro-input', Input);
   app.component('taro-textarea', Textarea);
   app.component('taro-picker', Picker);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tarojs/components",
-  "version": "3.4.2",
+  "version": "3.4.5",
   "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.2",
+    "@tarojs/taro": "3.4.5",
     "better-scroll": "^1.14.1",
     "classnames": "^2.2.5",
     "intersection-observer": "^0.7.0",
@@ -49,11 +49,11 @@
   },
   "devDependencies": {
     "@stencil/sass": "1.4.1",
-    "@types/react-native": "0.66.5",
+    "@types/react-native": "0.67.0",
     "jquery": "^3.4.1",
     "karmatic": "^2.1.0",
     "simulant": "^0.2.2",
     "workbox-build": "4.3.1"
   },
-  "gitHead": "26b329326c6a7da652e8d712ee33df01ab8d2d0e"
+  "gitHead": "789e873f7b9477124b44a900cd4f6a2810e4e06a"
 }

package/types/Button.d.ts

@@ -171,9 +171,10 @@ interface ButtonProps extends StandardProps {
   /** 获取用户实名
    *
    * 生效时机：`open-type="getRealnameAuthInfo"`
+   * @deprecated
    * @supported weapp
    */
-  onGetRealnameAuthInfo?: CommonEventFunction
+  onGetRealNameAuthInfo?: CommonEventFunction
 
   /** 当使用开放能力时，发生错误的回调
    *
@@ -194,7 +195,14 @@ interface ButtonProps extends StandardProps {
    * 生效时机：`open-type="launchApp"`
    * @supported weapp
    */
-  onLaunchapp?: CommonEventFunction
+  onLaunchApp?: CommonEventFunction
+
+  /** 获取用户头像回调
+   *
+   * 生效时机：`open-type="chooseAvatar"`
+   * @supported weapp
+   */
+  onChooseAvatar?: CommonEventFunction
 }
 
 declare namespace ButtonProps {
@@ -226,7 +234,7 @@ declare namespace ButtonProps {
   /** open-type 的合法值 */
   interface openTypeKeys {
     weapp: {
-      /** 打开客服会话，如果用户在会话中点击消息卡片后返回小程序，可以从 bindcontact 回调中获得具体信息
+      /** 打开客服会话，如果用户在会话中点击消息卡片后返回小程序，可以从回调中获得具体信息
        * @see https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/customer-message/customer-message.html
        */
       contact
@@ -234,15 +242,17 @@ declare namespace ButtonProps {
        * @see https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share.html#%E4%BD%BF%E7%94%A8%E6%8C%87%E5%BC%95
        */
       share
-      /** 获取用户手机号，可以从 bindgetphonenumber 回调中获取到用户信息
+      /** 获取用户手机号，可以从回调中获取到用户信息
        * @see https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/getPhoneNumber.html
        */
       getPhoneNumber
-      /** 获取用户信息，可以从 bindgetuserinfo 回调中获取到用户信息 */
+      /** 获取用户信息，可以从回调中获取到用户信息 */
       getUserInfo
-      /** 用户实名信息授权，已经弃用 */
-      getRealnameAuthInfo
-      /** 打开APP，可以通过app-parameter属性设定向APP传的参数
+      /** 用户实名信息授权
+       * @deprecated
+       */
+      getRealNameAuthInfo
+      /** 打开APP，可以通过 app-parameter 属性设定向APP传的参数
        * @see https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/launchApp.html
        */
       launchApp
@@ -250,6 +260,8 @@ declare namespace ButtonProps {
       openSetting
       /** 打开“意见反馈”页面，用户可提交反馈内容并上传日志，开发者可以登录小程序管理后台后进入左侧菜单“客服反馈”页面获取到反馈内容 */
       feedback
+      /** 获取用户头像，可以从回调中获得具体信息 */
+      chooseAvatar
     }
     /** 支付宝小程序专属的 open-type 合法值
      * @see https://opendocs.alipay.com/mini/component/button
@@ -361,6 +373,10 @@ declare namespace ButtonProps {
     encryptedData: string
     /** 加密算法的初始向量 */
     iv: string
+    /** 动态令牌。可通过动态令牌换取用户手机号。
+     * @see https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share.html#%E4%BD%BF%E7%94%A8%E6%8C%87%E5%BC%95
+     */
+    code?: string
   }
 
   interface onOpenSettingEventDetail {

package/types/Input.d.ts

@@ -35,6 +35,10 @@ interface InputProps extends StandardProps, FormItemProps {
    */
   placeholderClass?: string
 
+  /** 指定 placeholder 文字的颜色
+   * @supported rn
+   */
+  placeholderTextColor?: string
   /** 是否禁用
    * @supported weapp, h5, rn
    */
@@ -233,25 +237,24 @@ declare namespace InputProps {
  * @example_react
  * ```tsx
  * class App extends Component {
- *
  *   render () {
  *     return (
- *         <View className='example-body'>
- *           <Text>可以自动聚焦的 input</Text>
- *             <Input type='text' placeholder='将会获取焦点' focus/>
- *             <Text>控制最大输入长度的 input</Text>
- *             <Input type='text' placeholder='最大输入长度为 10' maxlength='10'/>
- *             <Text>数字输入的 input</Text>
- *             <Input type='number' placeholder='这是一个数字输入框'/>
- *             <Text>密码输入的 input</Text>
- *             <Input type='password' password placeholder='这是一个密码输入框'/>
- *             <Text>带小数点的 input</Text>
- *             <Input type='digit' placeholder='带小数点的数字键盘'/>
- *             <Text>身份证输入的 input</Text>
- *             <Input type='idcard' placeholder='身份证输入键盘'/>
- *             <Text>控制占位符颜色的 input</Text>
- *             <Input type='text' placeholder='占位符字体是红色的' placeholderStyle='color:red'/>
- *         </View>
+ *       <View className='example-body'>
+ *         <Text>可以自动聚焦的 input</Text>
+ *           <Input type='text' placeholder='将会获取焦点' focus/>
+ *           <Text>控制最大输入长度的 input</Text>
+ *           <Input type='text' placeholder='最大输入长度为 10' maxlength='10'/>
+ *           <Text>数字输入的 input</Text>
+ *           <Input type='number' placeholder='这是一个数字输入框'/>
+ *           <Text>密码输入的 input</Text>
+ *           <Input type='password' password placeholder='这是一个密码输入框'/>
+ *           <Text>带小数点的 input</Text>
+ *           <Input type='digit' placeholder='带小数点的数字键盘'/>
+ *           <Text>身份证输入的 input</Text>
+ *           <Input type='idcard' placeholder='身份证输入键盘'/>
+ *           <Text>控制占位符颜色的 input</Text>
+ *           <Input type='text' placeholder='占位符字体是红色的' placeholderStyle='color:red'/>
+ *       </View>
  *     )
  *   }
  * }

package/types/KeyboardAccessory.d.ts

@@ -4,21 +4,33 @@ import { StandardProps } from './common'
 /** @ignore */
 type KeyboardAccessoryProps = StandardProps
 
-/** 设置 input / textarea 聚焦时键盘上方 cover-view / cover-image 工具栏视图
+/** 设置 Input / Textarea 聚焦时键盘上方 CoverView / CoverImage 工具栏视图。需要配置 Taro 插件 `@tarojs/plugin-platform-weapp` 的 `enablekeyboardAccessory` 参数为 `true` 后才能使用，请参考：[#9548](https://github.com/NervJS/taro/issues/9548#issuecomment-891682216)。
  *
  * @classification forms
  * @supported weapp
  * @example
+ * ```js
+ * // config/index.js
+ * {
+ *   // ...
+ *   plugins: [
+ *     ['@tarojs/plugin-platform-weapp', {
+ *       enablekeyboardAccessory: true
+ *     }]
+ *   ]
+ * }
+ * ```
+ *
  * ```tsx
  * class App extends Component {
  *   render () {
  *     return (
- *         <Textarea holdKeyboard="{{true}}">
- *           <KeyboardAccessory className="container" style={{ height: 50 }} >
- *             <CoverView onClick={() => { TODO }} style={{ flex: 1, background: 'green' }}>1</CoverView>
- *             <CoverView onClick={() => { TODO }} style={{ flex: 1, background: 'red' }}>2</CoverView>
- *           </KeyboardAccessory>
- *         </Textarea>
+ *       <Textarea holdKeyboard="{{true}}">
+ *         <KeyboardAccessory className="container" style={{ height: 50 }} >
+ *           <CoverView onClick={() => { TODO }} style={{ flex: 1, background: 'green' }}>1</CoverView>
+ *           <CoverView onClick={() => { TODO }} style={{ flex: 1, background: 'red' }}>2</CoverView>
+ *         </KeyboardAccessory>
+ *       </Textarea>
  *     )
  *   }
  * }

package/types/LivePlayer.d.ts

@@ -44,13 +44,13 @@ interface LivePlayerProps extends StandardProps {
    */
   backgroundMute?: boolean
 
-  /** 进最小缓冲区，单位s
+  /** 最小缓冲区，单位s
    * @default 1
    * @supported weapp
    */
   minCache?: number
 
-  /** 进最小缓冲区，单位s
+  /** 最大缓冲区，单位s
    * @default 3
    * @supported weapp
    */

package/types/PageContainer.d.ts

@@ -38,21 +38,21 @@ interface PageContainerProps extends StandardProps {
    */
   round?: boolean
 
-  /** 自定义遮罩层样式
+  /** 是否在下滑一段距离后关闭
    * @default false
    * @supported weapp
    */
   closeOnSlideDown?: boolean
 
-  /** 是否在下滑一段距离后关闭
+  /** 自定义遮罩层样式
    * @supported weapp
    */
-  overlayStyle?: boolean
+  overlayStyle?: string
 
   /** 自定义弹出层样式
    * @supported weapp
    */
-  customStyle?: boolean
+  customStyle?: string
 
   /** 进入前触发
    * @supported weapp
@@ -97,10 +97,10 @@ declare namespace PageContainerProps {
     top
     /** 下方弹出 */
     bottom
-    /** 左边弹出 */
-    left
     /** 右边弹出 */
     right
+    /** 中央弹出 */
+    center
   }
 }
 

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
     /** 表示变更值的下标 */
@@ -350,7 +350,7 @@ declare namespace PickerRegionProps {
  *     </view>
  *   </view>
  * </template>
- * 
+ *
  * <script>
  *   export default {
  *     data() {
@@ -365,11 +365,11 @@ declare namespace PickerRegionProps {
  *       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
  *       }