@tarojs/components 3.5.0-alpha.8 → 3.5.0-beta.1

package/dist-h5/react/utils/reactify-wc.js

@@ -20,7 +20,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
  * https://github.com/BBKolton/reactify-wc/
  * modified event naming
  **/
-import React, { createRef, createElement } from 'react'; // eslint-disable-next-line
+import React, { createElement, createRef } from 'react'; // eslint-disable-next-line
 
 var h = React.createElement;
 var SCROLL_VIEW = 'taro-scroll-view-core'; // 为了不要覆盖 wc 中 host 内置的 class 和 stencil 加入的 class

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

@@ -0,0 +1,60 @@
+import Icon from './icon';
+import Image from './image';
+import Picker from './picker';
+import ScrollView from './scroll-view';
+import Text from './text';
+var components = [// 视图容器
+'taro-cover-image', 'taro-cover-view', 'taro-match-media', 'taro-movable-area', 'taro-movable-view', 'taro-page-container', ['taro-scroll-view', {
+  type: 'component',
+  component: ScrollView
+}], 'taro-share-element', 'taro-swiper', ['taro-swiper-item', {
+  classNames: ['swiper-slide']
+}], 'taro-view', // 基础内容
+['taro-icon', {
+  type: 'component',
+  component: Icon
+}], ['taro-progress', {
+  classNames: ['weui-progress']
+}], 'taro-rich-text', ['taro-text', {
+  type: 'component',
+  component: Text
+}], // 表单组件
+'taro-button', ['taro-checkbox', {
+  classNames: ['weui-cells_checkbox']
+}], 'taro-checkbox-group', 'taro-editor', 'taro-form', ['taro-input', {
+  type: 'forms',
+  event: 'input'
+}], 'taro-keyboard-accessory', 'taro-label', ['taro-picker', {
+  type: 'component',
+  component: Picker
+}], 'taro-picker-view', 'taro-picker-view-column', ['taro-radio', {
+  classNames: ['weui-cells_checkbox']
+}], ['taro-radio-group', {
+  classNames: ['weui-cells_radiogroup']
+}], ['taro-slider', {
+  type: 'forms',
+  event: 'change',
+  modelValue: 'value',
+  classNames: ['weui-slider-box']
+}], ['taro-switch', {
+  type: 'forms',
+  event: 'change',
+  modelValue: 'checked'
+}], ['taro-textarea', {
+  type: 'forms',
+  event: 'input'
+}], // 导航
+'taro-functional-page-navigator', 'taro-navigator', // 媒体组件
+'taro-audio', 'taro-camera', ['taro-image', {
+  type: 'component',
+  component: Image
+}], 'taro-live-player', ['taro-video', {
+  classNames: ['taro-video-container']
+}], 'taro-voip-room', // 地图
+'taro-map', // 画布
+'taro-canvas', // 开放能力
+'taro-web-view', 'taro-ad', 'taro-ad-custom', 'taro-official-account', 'taro-open-data', // 导航栏
+'taro-navigation-bar', // 页面属性配置节点
+'taro-page-meta', // 其他
+'taro-block', 'taro-custom-wrapper', 'taro-slot'];
+export default components;

package/dist-h5/vue/index.js

@@ -1,32 +1,29 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import Vue from 'vue';
+import components from './components';
 import createComponent from './createComponent';
 import createFormsComponent from './createFormsComponent';
-import Picker from './components/picker';
-import Text from './components/text';
-import Image from './components/image';
-import Icon from './components/icon';
-import ScrollView from './components/scroll-view';
-import { simpleComponents } from './simpleComponents';
-simpleComponents.map(function (component) {
-  if (typeof component === 'string') {
-    Vue.component(component, createComponent(component));
-  } else {
-    var name = component.name,
-        classNames = component.classNames;
-    Vue.component(name, createComponent(name, classNames));
+components.forEach(function (params) {
+  if (typeof params === 'string') {
+    Vue.component(params, createComponent(params));
+  } else if (params instanceof Array) {
+    var _params = _slicedToArray(params, 2),
+        name = _params[0],
+        props = _params[1];
+
+    var classNames = props.classNames,
+        _props$type = props.type,
+        type = _props$type === void 0 ? 'simple' : _props$type;
+
+    if (type === 'simple') {
+      Vue.component(name, createComponent(name, classNames));
+    } else if (type === 'forms') {
+      var event = props.event,
+          modelValue = props.modelValue;
+      Vue.component(name, createFormsComponent(name, event, modelValue, classNames));
+    } else if (type === 'component') {
+      Vue.component(name, props.component);
+    }
   }
 });
-var Input = createFormsComponent('taro-input', 'input');
-var Textarea = createFormsComponent('taro-textarea', 'input');
-var Switch = createFormsComponent('taro-switch', 'change', 'checked');
-var Slider = createFormsComponent('taro-slider', 'change', 'value', ['weui-slider-box']);
-Vue.component('taro-input', Input);
-Vue.component('taro-textarea', Textarea);
-Vue.component('taro-switch', Switch);
-Vue.component('taro-slider', Slider);
-Vue.component('taro-text', Text);
-Vue.component('taro-picker', Picker);
-Vue.component('taro-image', Image);
-Vue.component('taro-icon', Icon);
-Vue.component('taro-scroll-view', ScrollView);
 Vue.config.ignoredElements = ['root', 'block', /^taro-/];

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

@@ -0,0 +1,64 @@
+import createComponent from '../createComponent';
+import createFormsComponent from '../createFormsComponent'; // 视图容器
+
+export var CoverImage = createComponent('taro-cover-image');
+export var CoverView = createComponent('taro-cover-view');
+export var MatchMedia = createComponent('taro-match-media');
+export var MovableArea = createComponent('taro-movable-area');
+export var MovableView = createComponent('taro-movable-view');
+export var PageContainer = createComponent('taro-page-container');
+export { default as ScrollView } from './scroll-view';
+export var ShareElement = createComponent('taro-share-element');
+export var Swiper = createComponent('taro-swiper');
+export var SwiperItem = createComponent('taro-swiper-item', ['swiper-slide']);
+export var View = createComponent('taro-view'); // 基础内容
+
+export { default as Icon } from './icon';
+export var Progress = createComponent('taro-progress', ['weui-progress']);
+export var RichText = createComponent('taro-rich-text');
+export { default as Text } from './text'; // 表单组件
+
+export var Button = createComponent('taro-button');
+export var Checkbox = createComponent('taro-checkbox', ['weui-cells_checkbox']);
+export var CheckboxGroup = createComponent('taro-checkbox-group');
+export var Editor = createComponent('taro-editor');
+export var Form = createComponent('taro-form');
+export var Input = createFormsComponent('taro-input', 'input');
+export var KeyboardAccessory = createComponent('taro-keyboard-accessory');
+export var Label = createComponent('taro-label');
+export var Picker = createFormsComponent('taro-picker', 'change');
+export var PickerView = createComponent('taro-picker-view');
+export var PickerViewColumn = createComponent('taro-picker-view-column');
+export var Radio = createComponent('taro-radio', ['weui-cells_checkbox']);
+export var RadioGroup = createComponent('taro-radio-group', ['weui-cells_radiogroup']);
+export var Slider = createFormsComponent('taro-slider', 'change', 'value', ['weui-slider-box']);
+export var Switch = createFormsComponent('taro-switch', 'change', 'checked');
+export var Textarea = createFormsComponent('taro-textarea', 'input'); // 导航
+
+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 { default as Image } from './image';
+export var LivePlayer = createComponent('taro-live-player');
+export var Video = createComponent('taro-video', ['taro-video-container']);
+export var VoipRoom = createComponent('taro-voip-room'); // 地图
+
+export var Map = createComponent('taro-map'); // 画布
+
+export var Canvas = createComponent('taro-canvas'); // 开放能力
+
+export var WebView = createComponent('taro-web-view');
+export var Ad = createComponent('taro-ad');
+export var AdCustom = createComponent('taro-ad-custom');
+export var OfficialAccount = createComponent('taro-official-account');
+export var OpenData = createComponent('taro-open-data'); // 导航栏
+
+export var NavigationBar = createComponent('taro-navigation-bar'); // 页面属性配置节点
+
+export var PageMeta = createComponent('taro-page-meta'); // 其他
+
+export var Block = createComponent('taro-block');
+export var CustomWrapper = createComponent('taro-custom-wrapper');
+export var Slot = createComponent('taro-slot');

package/dist-h5/vue3/createFormsComponent.js

@@ -5,7 +5,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 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 { computed, h, toRefs } from 'vue';
 import { useForwardRef } from './forwardRef';
 export default function createFormsComponent(name, eventName) {
   var modelValue = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'value';

package/dist-h5/vue3/index.js

@@ -1,72 +1,19 @@
-import createComponent from './createComponent';
-import { simpleComponents } from '../vue/simpleComponents';
-import createFormsComponent from './createFormsComponent';
-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']);
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import * as components from './components';
 export function initVue3Components(app) {
   app.config.isCustomElement = function (tag) {
     return /^taro-/.test(tag) || tag === 'root' || tag === 'block';
   };
 
-  simpleComponents.map(function (component) {
-    if (typeof component === 'string') {
-      app.component(component, createComponent(component));
-    } else {
-      var name = component.name,
-          classNames = component.classNames;
-      app.component(name, createComponent(name, classNames));
+  Object.entries(components).forEach(function (_ref) {
+    var _ref2 = _slicedToArray(_ref, 2),
+        name = _ref2[0],
+        component = _ref2[1];
+
+    if (component) {
+      var tagName = 'taro-' + name.replace(/(?<=[a-z])([A-Z])/g, '-$1').toLowerCase();
+      app.component(tagName, component);
     }
   });
-  app.component('taro-input', Input);
-  app.component('taro-textarea', Textarea);
-  app.component('taro-picker', Picker);
-  app.component('taro-switch', Switch);
-  app.component('taro-slider', Slider);
-  app.component('taro-text', Text);
-  app.component('taro-image', Image);
-  app.component('taro-icon', Icon);
-  app.component('taro-scroll-view', ScrollView);
-}
+}
+export * from './components';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tarojs/components",
-  "version": "3.5.0-alpha.8",
+  "version": "3.5.0-beta.1",
   "description": "",
   "browser": "dist/index.js",
   "main:h5": "dist/index.js",
@@ -17,7 +17,8 @@
     "mini",
     "types",
     "dist-h5",
-    "virtual-list"
+    "virtual-list",
+    "vue3.d.ts"
   ],
   "collection": "dist/collection/collection-manifest.json",
   "collection:main": "dist/collection/index.js",
@@ -38,9 +39,9 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
-    "@stencil/core": "2.15.1",
+    "@stencil/core": "~2.13.0",
     "@stencil/sass": "1.5.2",
-    "@tarojs/taro": "3.5.0-alpha.8",
+    "@tarojs/taro": "3.5.0-beta.1",
     "better-scroll": "^1.14.1",
     "classnames": "^2.2.5",
     "hls.js": "^1.1.5",
@@ -67,5 +68,5 @@
       "optional": true
     }
   },
-  "gitHead": "5864eaa8de26f50ad5af9e105e15e4641c722be8"
+  "gitHead": "ba9d945ccebb86f06edb7f845110526d92dc7b00"
 }

package/types/Ad.d.ts

@@ -3,12 +3,12 @@ import { StandardProps, CommonEventFunction } from './common'
 
 interface AdProps extends StandardProps {
   /** 广告单元id，可在[小程序管理后台](https://mp.weixin.qq.com/)的流量主模块新建
-   * @supported weapp
+   * @supported weapp, tt
    */
   unitId: string
 
   /** 广告自动刷新的间隔时间，单位为秒，参数值必须大于等于30（该参数不传入时 Banner 广告不会自动刷新）
-   * @supported weapp
+   * @supported weapp, tt
    */
   adIntervals?: number
 
@@ -23,17 +23,17 @@ interface AdProps extends StandardProps {
   adTheme?: 'white' | 'black'
 
   /** 广告加载成功的回调
-   * @supported weapp
+   * @supported weapp, tt
    */
   onLoad?: CommonEventFunction
 
   /** 当广告发生错误时，触发的事件，可以通过该事件获取错误码及原因，事件对象event.detail = {errCode: 1002}
-   * @supported weapp
+   * @supported weapp, tt
    */
   onError?: CommonEventFunction<AdProps.onErrorEventDetail>
 
   /** 广告关闭的回调
-   * @supported weapp
+   * @supported weapp, tt
    */
   onClose?: CommonEventFunction
 }
@@ -109,7 +109,7 @@ declare namespace AdProps {
 
 /** Banner 广告
  * @classification open
- * @supported weapp
+ * @supported weapp, tt
  * @example_react
  * ```tsx
  * class App extends Component {

package/types/Button.d.ts

@@ -4,13 +4,13 @@ import { StyleProp, ViewStyle } from 'react-native'
 
 interface ButtonProps extends StandardProps {
   /** 按钮的大小
-   * @supported weapp, h5, rn, alipay
+   * @supported weapp, h5, rn, alipay, tt
    * @default default
    */
   size?: keyof ButtonProps.Size
 
   /** 按钮的样式类型
-   * @supported weapp, h5, rn, alipay
+   * @supported weapp, h5, rn, alipay, tt
    * @default default
    */
   type?: keyof ButtonProps.Type
@@ -22,30 +22,30 @@ interface ButtonProps extends StandardProps {
   plain?: boolean
 
   /** 是否禁用
-   * @supported weapp, h5, rn, alipay
+   * @supported weapp, h5, rn, alipay, tt
    * @default false
    */
   disabled?: boolean
 
   /** 名称前是否带 loading 图标
-   * @supported weapp, h5, rn, alipay
+   * @supported weapp, h5, rn, alipay, tt
    * @default false
    */
   loading?: boolean
 
   /** 用于 `<form/>` 组件，点击分别会触发 `<form/>` 组件的 submit/reset 事件
-   * @supported weapp, alipay
+   * @supported weapp, alipay, tt
    */
   formType?: keyof ButtonProps.FormType
 
   /** 微信开放能力
-   * @supported weapp, alipay, qq
+   * @supported weapp, alipay, qq, tt
    */
   openType?: ButtonProps.OpenType
 
   /** 指定按下去的样式类。当 `hover-class="none"` 时，没有点击态效果
    * @default button-hover
-   * @supported weapp, alipay, h5
+   * @supported weapp, alipay, h5, tt
    * @rn 支持 hoverStyle 属性，但框架未支持 hoverClass
    */
   hoverClass?: string
@@ -58,19 +58,19 @@ interface ButtonProps extends StandardProps {
 
   /** 指定是否阻止本节点的祖先节点出现点击态
    * @default false
-   * @supported weapp, alipay
+   * @supported weapp, alipay, tt
    */
   hoverStopPropagation?: boolean
 
   /** 按住后多久出现点击态，单位毫秒
    * @default 20
-   * @supported weapp, alipay, h5, rn
+   * @supported weapp, alipay, h5, rn, tt
    */
   hoverStartTime?: number
 
   /** 手指松开后点击态保留时间，单位毫秒
    * @default 70
-   * @supported weapp, alipay, h5, rn
+   * @supported weapp, alipay, h5, rn, tt
    */
   hoverStayTime?: number
 
@@ -164,7 +164,7 @@ interface ButtonProps extends StandardProps {
   /** 获取用户手机号回调
    *
    * 生效时机：`open-type="getphonenumber"`
-   * @supported weapp
+   * @supported weapp, tt
    */
   onGetPhoneNumber?: CommonEventFunction<ButtonProps.onGetPhoneNumberEventDetail>
 
@@ -389,7 +389,7 @@ declare namespace ButtonProps {
 
 /** 按钮
  * @classification forms
- * @supported weapp, h5, rn
+ * @supported weapp, h5, rn, tt
  * @example_react
  * ```tsx
  * export default class PageButton extends Component {

package/types/Camera.d.ts

@@ -4,31 +4,31 @@ import { StandardProps, CommonEventFunction } from './common'
 interface CameraProps extends StandardProps {
   /** 模式，有效值为normal, scanCode
    * @default "normal"
-   * @supported weapp, rn
+   * @supported weapp, rn, tt
    */
   mode?: keyof CameraProps.Mode
 
   /** 分辨率，不支持动态修改
    * @default "medium"
-   * @supported weapp
+   * @supported weapp, tt
    */
   resolution?: keyof CameraProps.Resolution
 
   /** 摄像头朝向
    * @default "back"
-   * @supported weapp, rn
+   * @supported weapp, rn, tt
    */
   devicePosition?: keyof CameraProps.DevicePosition
 
   /** 闪光灯
    * @default "auto"
-   * @supported weapp, rn
+   * @supported weapp, rn, tt
    */
   flash?: keyof CameraProps.Flash
 
   /** 指定期望的相机帧数据尺寸
    * @default "medium"
-   * @supported weapp
+   * @supported weapp, tt
    */
   frameSize?: keyof CameraProps.FrameSize
 
@@ -41,23 +41,23 @@ interface CameraProps extends StandardProps {
 
   /** 摄像头在非正常终止时触发，
    * 如退出后台等情况
-   * @supported weapp, rn
+   * @supported weapp, rn, tt
    */
   onStop?: CommonEventFunction
 
   /** 用户不允许使用摄像头时触发
-   * @supported weapp, rn
+   * @supported weapp, rn, tt
    */
   onError?: CommonEventFunction
 
   /** 相机初始化完成时触发
-   * @supported weapp, rn
+   * @supported weapp, rn, tt
    */
   onInitDone?: CommonEventFunction<CameraProps.onInitDoneEventDetail>
 
   /** 在成功识别到一维码时触发，
    * 仅在 mode="scanCode" 时生效
-   * @supported weapp, rn
+   * @supported weapp, rn, tt
    */
   onScanCode?: CommonEventFunction
 }
@@ -115,7 +115,7 @@ declare namespace CameraProps {
 
 /** 系统相机
  * @classification media
- * @supported weapp, rn
+ * @supported weapp, rn, tt
  * @see https://developers.weixin.qq.com/miniprogram/dev/component/camera.html
  */
 declare const Camera: ComponentType<CameraProps>

package/types/Canvas.d.ts

@@ -64,7 +64,7 @@ declare namespace CanvasProps {
  *
  * `<Canvas />` 组件的 RN 版本尚未实现。
  * @classification canvas
- * @supported weapp
+ * @supported weapp, tt
  * @example_react
  * ```tsx
  * class App extends Components {

package/types/Checkbox.d.ts

@@ -4,24 +4,24 @@ import { StandardProps, CommonEventFunction, FormItemProps } from './common'
 interface CheckboxProps extends StandardProps {
 
   /** `<Checkbox/>`标识，选中时触发`<CheckboxGroup/>`的 change 事件，并携带 `<Checkbox/>` 的 value
-   * @supported weapp, rn
+   * @supported weapp, rn, tt
    */
   value: string
 
   /** 是否禁用
-   * @supported weapp, h5, rn
+   * @supported weapp, h5, rn, tt
    * @default false
    */
   disabled?: boolean
 
   /** 当前是否选中，可用来设置默认选中
-   * @supported weapp, h5, rn
+   * @supported weapp, h5, rn, tt
    * @default false
    */
   checked?: boolean
 
   /** checkbox的颜色，同 css 的 color
-   * @supported weapp, h5, rn
+   * @supported weapp, h5, rn, tt
    */
   color?: string
 

package/types/CheckboxGroup.d.ts

@@ -3,21 +3,21 @@ import { StandardProps, CommonEventFunction, FormItemProps } from './common'
 
 interface CheckboxGroupProps extends StandardProps, FormItemProps {
   /** 表单组件中加上 name 来作为 key
-   * @supported h5
+   * @supported h5, tt
    */
   name?: string
 
   /** `<CheckboxGroup/>` 中选中项发生改变是触发 change 事件
    *
    * event.detail = { value: [选中的checkbox的 value 的数组] }
-   * @supported weapp, h5, rn
+   * @supported weapp, h5, rn, tt
    */
   onChange?: CommonEventFunction<{ value: string[] }>
 }
 
 /** 多项选择器，内部由多个checkbox组成
  * @classification forms
- * @supported weapp, h5, rn
+ * @supported weapp, h5, rn, tt
  * @example
  * ```tsx
  * export default class PageCheckbox extends Component {

package/types/Form.d.ts

@@ -20,12 +20,12 @@ interface FormProps extends StandardProps {
 
   /** 携带 form 中的数据触发 submit 事件
    * event.detail = { value : {'name': 'value'} , formId: '' }
-   * @supported weapp, rn
+   * @supported weapp, rn, tt
    */
   onSubmit?: CommonEventFunction<FormProps.onSubmitEventDetail>
 
   /** 表单重置时会触发 reset 事件
-   * @supported weapp, h5, rn
+   * @supported weapp, h5, rn, tt
    */
   onReset?: CommonEventFunction
 }