@tarojs/components 3.5.0-alpha.1 → 3.5.0-alpha.10

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 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));
+import components from './components';
+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/index.js

@@ -1,72 +1,18 @@
-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 * as components from './components';
+export * 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.keys(components).forEach(function (name) {
+    if (components.hasOwnProperty(name)) {
+      var tagName = 'taro-' + name.replace(/(?<=[a-z])([A-Z])/g, '-$1').toLowerCase();
+      var component = components[name];
+
+      if (component) {
+        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);
 }

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@tarojs/components",
-  "version": "3.5.0-alpha.1",
+  "version": "3.5.0-alpha.10",
   "description": "",
-  "main:h5": "src/index.js",
+  "browser": "dist/index.js",
+  "main:h5": "dist/index.js",
   "main": "dist/index.js",
-  "module": "dist/index.mjs",
+  "module": "dist/index.cjs.js",
   "types": "types/index.d.ts",
   "sideEffects": [
     "*.scss",
@@ -16,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",
@@ -37,10 +39,12 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
-    "@stencil/core": "2.9.0",
-    "@tarojs/taro": "3.5.0-alpha.1",
+    "@stencil/core": "~2.13.0",
+    "@stencil/sass": "1.5.2",
+    "@tarojs/taro": "3.5.0-alpha.10",
     "better-scroll": "^1.14.1",
     "classnames": "^2.2.5",
+    "hls.js": "^1.1.5",
     "intersection-observer": "^0.7.0",
     "omit.js": "^1.0.0",
     "resolve-pathname": "^3.0.0",
@@ -48,12 +52,21 @@
     "weui": "^1.1.2"
   },
   "devDependencies": {
-    "@stencil/sass": "1.4.1",
-    "@types/react-native": "0.67.0",
     "jquery": "^3.4.1",
     "karmatic": "^2.1.0",
     "simulant": "^0.2.2",
     "workbox-build": "4.3.1"
   },
-  "gitHead": "3bd136d26d77b847a1a18e028d5b0d048c89f288"
+  "peerDependenciesMeta": {
+    "@types/react": {
+      "optional": true
+    },
+    "@types/react-native": {
+      "optional": true
+    },
+    "vue": {
+      "optional": true
+    }
+  },
+  "gitHead": "8569f73a71cd11c697e66662d584c17175c7343b"
 }

package/types/Block.d.ts

@@ -1,8 +1,11 @@
 import { ComponentType } from 'react'
+import { StandardProps } from './common'
+
+type BlockProps = StandardProps
 
 /**
  * @ignore
  */
-declare const Block: ComponentType
+declare const Block: ComponentType<BlockProps>
 
-export { Block }
+export { Block, BlockProps }

package/types/Checkbox.d.ts

@@ -116,7 +116,7 @@ interface CheckboxProps extends StandardProps {
  *     </view>
  *   </view>
  * </template>
- * 
+ *
  * <script>
  * export default {
  *   data() {

package/types/CheckboxGroup.d.ts

@@ -8,7 +8,7 @@ interface CheckboxGroupProps extends StandardProps, FormItemProps {
   name?: string
 
   /** `<CheckboxGroup/>` 中选中项发生改变是触发 change 事件
-   * 
+   *
    * event.detail = { value: [选中的checkbox的 value 的数组] }
    * @supported weapp, h5, rn
    */

package/types/CoverImage.d.ts

@@ -64,7 +64,7 @@ interface CoverImageProps extends StandardProps {
  *     </cover-view>
  *   </view>
  * </template>
- * 
+ *
  * <style>
  * .container {
  *   position: relative;

package/types/CoverView.d.ts

@@ -66,7 +66,7 @@ interface CoverViewProps extends ViewProps {
  *     </cover-view>
  *   </view>
  * </template>
- * 
+ *
  * <style>
  * .container {
  *   position: relative;

package/types/CustomWrapper.d.ts

@@ -11,7 +11,7 @@ interface CustomWrapperProps extends StandardProps {
  * ```tsx
  * import { Component } from 'react'
  * import { CustomWrapper, View, Text } from '@tarojs/components'
- * 
+ *
  * export default class C extends Component {
  *   render () {
  *     return (
@@ -27,4 +27,4 @@ interface CustomWrapperProps extends StandardProps {
  */
 declare const CustomWrapper: ComponentType<CustomWrapperProps>
 
-export { CustomWrapper, CustomWrapperProps }
+export { CustomWrapper, CustomWrapperProps }

package/types/Editor.d.ts

@@ -28,7 +28,7 @@ interface EditorProps extends StandardProps {
   /** 点击图片时显示修改尺寸控件
    * @default false
    * @supported weapp
-   */	
+   */
   showImgResize?: boolean
 
   /** 编辑器初始化完成时触发
@@ -67,15 +67,15 @@ declare namespace EditorProps {
 }
 
 /** 富文本编辑器，可以对图片、文字进行编辑。
- * 
+ *
  * 编辑器导出内容支持带标签的 html和纯文本的 text，编辑器内部采用 delta 格式进行存储。
- * 
+ *
  * 通过 setContents 接口设置内容时，解析插入的 html 可能会由于一些非法标签导致解析错误，建议开发者在小程序内使用时通过 delta 进行插入。
- * 
+ *
  * 富文本组件内部引入了一些基本的样式使得内容可以正确的展示，开发时可以进行覆盖。需要注意的是，在其它组件或环境中使用富文本组件导出的 html 时，需要额外引入 这段样式，并维护 `<ql-container><ql-editor></ql-editor></ql-container>` 的结构。
- * 
+ *
  * 图片控件仅初始化时设置有效。
- * 
+ *
  * *编辑器内支持部分 HTML 标签和内联样式，不支持 **class** 和 **id***
  * @classification forms
  * @supported weapp
@@ -85,17 +85,17 @@ declare namespace EditorProps {
  *   state = {
  *     placeholder: '来，输入隔壁的名字试试...'
  *   }
- * 
+ *
  *   editorReady = e => {
  *     Taro.createSelectorQuery().select('#editor').context((res) => {
  *       this.editorCtx = res.context
  *     }).exec()
  *   }
- * 
+ *
  *   undo = e => {
  *     this.editorCtx.undo()
  *   }
- * 
+ *
  *   render () {
  *     return (
  *       <View>
@@ -114,7 +114,7 @@ declare namespace EditorProps {
  *     <button type="warn" `@tap="undo">撤销</button>
  *   </view>
  * </template>
- * 
+ *
  * <script>
  *   import Taro from '@tarojs/taro'
  *   export default {

package/types/Form.d.ts

@@ -46,22 +46,22 @@ declare namespace FormProps {
 }
 
 /** 表单。将组件内的用户输入的 switch input checkbox slider radio picker 提交。
- * 
+ *
  * 当点击 form 表单中 form-type 为 submit 的 button 组件时，会将表单组件中的 value 值进行提交，需要在表单组件中加上 name 来作为 key。
  * @classification forms
  * @supported weapp, h5, rn
  * @example_react
  * ```tsx
  * class App extends Component {
- * 
+ *
  *   formSubmit = e => {
  *     console.log(e)
  *   }
- * 
+ *
  *   formReset = e => {
  *     console.log(e)
  *   }
- * 
+ *
  *   render () {
  *     return (
  *       <Form onSubmit={this.formSubmit} onReset={this.formReset} >
@@ -86,7 +86,7 @@ declare namespace FormProps {
  *     </view>
  *   </form>
  * </template>
- * 
+ *
  * <script>
  * export default {
  *   data() {
@@ -96,7 +96,7 @@ declare namespace FormProps {
  *     formSubmit (e) {
  *       console.log(e)
  *     },
- * 
+ *
  *     formReset (e) {
  *       console.log(e)
  *     }

package/types/Label.d.ts

@@ -8,14 +8,14 @@ interface LabelProps extends StandardProps {
 }
 
 /** 用来改进表单组件的可用性。
- * 
+ *
  * 使用for属性找到对应的id，或者将控件放在该标签下，当点击时，就会触发对应的控件。 for优先级高于内部控件，内部有多个控件的时候默认触发第一个控件。 目前可以绑定的控件有：button, checkbox, radio, switch。
  * @classification forms
  * @supported weapp, swan, alipay, tt, h5, rn
  * @example_react
  * ```tsx
  * class App extends Components {
- * 
+ *
  *   render () {
  *     return (
  *       <RadioGroup>

package/types/OfficialAccount.d.ts

@@ -45,12 +45,12 @@ declare namespace OfficialAccountProps {
 }
 
 /** 公众号关注组件。当用户扫小程序码打开小程序时，开发者可在小程序内配置公众号关注组件，方便用户快捷关注公众号，可嵌套在原生组件内。
- * 
+ *
  * Tips
  * 使用组件前，需前往小程序后台，在“设置”->“关注公众号”中设置要展示的公众号。注：设置的公众号需与小程序主体一致。
- * 
+ *
  * 在一个小程序的生命周期内，只有从以下场景进入小程序，才具有展示引导关注公众号组件的能力:
- * 
+ *
  * 当小程序从扫小程序码场景（场景值1047，场景值1124）打开时
  * 当小程序从聊天顶部场景（场景值1089）中的「最近使用」内打开时，若小程序之前未被销毁，则该组件保持上一次打开小程序时的状态
  * 当从其他小程序返回小程序（场景值1038）时，若小程序之前未被销毁，则该组件保持上一次打开小程序时的状态

package/types/PickerViewColumn.d.ts

@@ -1,6 +1,8 @@
 import { ComponentType } from 'react'
 import { StandardProps } from './common'
 
+type PickerViewColumnProps = StandardProps
+
 /** 滚动选择器子项
  * 仅可放置于 `<PickerView />` 中，其孩子节点的高度会自动设置成与 picker-view 的选中框的高度一致
  * @classification forms
@@ -9,4 +11,4 @@ import { StandardProps } from './common'
  */
 declare const PickerViewColumn: ComponentType<StandardProps>
 
-export { PickerViewColumn }
+export { PickerViewColumn, PickerViewColumnProps }

package/types/Progress.d.ts

@@ -84,7 +84,7 @@ interface ProgressProps extends StandardProps {
  *   constructor() {
  *     super(...arguments)
  *   }
- * 
+ *
  *   render() {
  *     return (
  *       <View className='components-page'>

package/types/Radio.d.ts

@@ -120,7 +120,7 @@ interface RadioProps extends StandardProps {
  *     </view>
  *   </view>
  * </template>
- * 
+ *
  * <script>
  * export default {
  *   data() {

package/types/RichText.d.ts

@@ -95,7 +95,7 @@ declare namespace RichTextProps {
  *     <rich-text :nodes="nodes"></rich-text>
  *   </view>
  * </template>
- * 
+ *
  * <script>
  * export default {
  *   name: 'Index',

package/types/ScrollView.d.ts

@@ -288,7 +288,7 @@ declare namespace ScrollViewProps {
  *     </view>
  *   </view>
  * </template>
- * 
+ *
  * <script>
  * const order = ['demo1', 'demo2', 'demo3']
  * export default {
@@ -299,23 +299,23 @@ declare namespace ScrollViewProps {
  *       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;
@@ -331,7 +331,7 @@ declare namespace ScrollViewProps {
  *   width: 100%;
  *   height: 300rpx;
  * }
- * 
+ *
  * .demo-text-1 { background: #ccc; }
  * .demo-text-2 { background: #999; }
  * .demo-text-3 { background: #666; }

package/types/Slider.d.ts

@@ -100,7 +100,7 @@ declare namespace SliderProps {
  *   constructor() {
  *     super(...arguments)
  *   }
- * 
+ *
  *   render() {
  *     return (
  *       <View className='components-page'>

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 }