@tarojs/components 3.5.9 → 3.6.0-beta.0

package/{dist-h5/vue3/components → dist/vue3/component-lib}/image.js

@@ -1,11 +1,11 @@
 import { h } from 'vue';
-import { useForwardRef } from '../forwardRef';
+import { useForwardRef } from './forwardRef';
 export default {
   emits: ['tap'],
-  setup: function setup(props, _ref) {
+  setup: function setup(__props, _ref) {
     var slots = _ref.slots,
-        emit = _ref.emit,
-        attrs = _ref.attrs;
+      emit = _ref.emit,
+      attrs = _ref.attrs;
     var forwardRef = useForwardRef();
     return function () {
       return h('taro-image-core', {

package/{dist-h5/vue3/components → dist/vue3/component-lib}/index.js

@@ -1,6 +1,7 @@
-import createComponent from '../createComponent';
-import createFormsComponent from '../createFormsComponent'; // 视图容器
+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');
@@ -12,13 +13,15 @@ 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 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 { 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');
@@ -34,32 +37,40 @@ 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 Textarea = createFormsComponent('taro-textarea', 'input');
 
+// 导航
 export var FunctionalPageNavigator = createComponent('taro-functional-page-navigator');
-export var Navigator = createComponent('taro-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 VoipRoom = createComponent('taro-voip-room');
 
-export var Map = createComponent('taro-map'); // 画布
+// 地图
+export var Map = createComponent('taro-map');
 
-export var Canvas = createComponent('taro-canvas'); // 开放能力
+// 画布
+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 OpenData = createComponent('taro-open-data');
 
-export var NavigationBar = createComponent('taro-navigation-bar'); // 页面属性配置节点
+// 导航栏
+export var NavigationBar = createComponent('taro-navigation-bar');
 
-export var PageMeta = createComponent('taro-page-meta'); // 其他
+// 页面属性配置节点
+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/components → dist/vue3/component-lib}/scroll-view.js

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

package/{dist-h5/vue3/components → dist/vue3/component-lib}/text.js

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

package/dist/vue3/components.js

@@ -0,0 +1,80 @@
+/* eslint-disable */
+/* tslint:disable */
+/* auto-generated vue proxies */
+import { defineContainer } from './vue-component-lib/utils';
+export var Ad = /*@__PURE__*/defineContainer('taro-ad-core', undefined);
+export var AdCustom = /*@__PURE__*/defineContainer('taro-ad-custom-core', undefined);
+export var AnimationVideo = /*@__PURE__*/defineContainer('taro-animation-video-core', undefined);
+export var AnimationView = /*@__PURE__*/defineContainer('taro-animation-view-core', undefined);
+export var ArCamera = /*@__PURE__*/defineContainer('taro-ar-camera-core', undefined);
+export var Audio = /*@__PURE__*/defineContainer('taro-audio-core', undefined, ['src', 'controls', 'autoplay', 'loop', 'muted', 'nativeProps', 'error', 'play', 'pause', 'timeupdate', 'ended']);
+export var AwemeData = /*@__PURE__*/defineContainer('taro-aweme-data-core', undefined);
+export var Block = /*@__PURE__*/defineContainer('taro-block-core', undefined);
+export var Button = /*@__PURE__*/defineContainer('taro-button-core', undefined, ['disabled', 'hoverClass', 'type', 'hoverStartTime', 'hoverStayTime', 'size', 'plain', 'loading', 'formType', 'tarobuttonsubmit', 'tarobuttonreset']);
+export var Camera = /*@__PURE__*/defineContainer('taro-camera-core', undefined);
+export var Canvas = /*@__PURE__*/defineContainer('taro-canvas-core', undefined, ['canvasId', 'nativeProps', 'longtap']);
+export var Checkbox = /*@__PURE__*/defineContainer('taro-checkbox-core', undefined, ['name', 'value', 'color', 'id', 'checked', 'disabled', 'nativeProps', 'checkboxchange']);
+export var CheckboxGroup = /*@__PURE__*/defineContainer('taro-checkbox-group-core', undefined, ['name', 'change']);
+export var CommentDetail = /*@__PURE__*/defineContainer('taro-comment-detail-core', undefined);
+export var CommentList = /*@__PURE__*/defineContainer('taro-comment-list-core', undefined);
+export var ContactButton = /*@__PURE__*/defineContainer('taro-contact-button-core', undefined);
+export var CoverImage = /*@__PURE__*/defineContainer('taro-cover-image-core', undefined, ['src', 'nativeProps', 'load', 'error']);
+export var CoverView = /*@__PURE__*/defineContainer('taro-cover-view-core', undefined, ['animation', 'hoverClass', 'hoverStartTime', 'hoverStayTime', 'longpress']);
+export var CustomWrapper = /*@__PURE__*/defineContainer('taro-custom-wrapper-core', undefined);
+export var Editor = /*@__PURE__*/defineContainer('taro-editor-core', undefined);
+export var FollowSwan = /*@__PURE__*/defineContainer('taro-follow-swan-core', undefined);
+export var Form = /*@__PURE__*/defineContainer('taro-form-core', undefined, ['submit']);
+export var FunctionalPageNavigator = /*@__PURE__*/defineContainer('taro-functional-page-navigator-core', undefined);
+export var Icon = /*@__PURE__*/defineContainer('taro-icon-core', undefined, ['type', 'size', 'color']);
+export var Image = /*@__PURE__*/defineContainer('taro-image-core', undefined, ['src', 'mode', 'lazyLoad', 'nativeProps', 'load', 'error']);
+export var InlinePaymentPanel = /*@__PURE__*/defineContainer('taro-inline-payment-panel-core', undefined);
+export var Input = /*@__PURE__*/defineContainer('taro-input-core', undefined, ['value', 'type', 'password', 'placeholder', 'disabled', 'maxlength', 'autoFocus', 'confirmType', 'name', 'nativeProps', 'input', 'paste', 'focus', 'blur', 'confirm', 'change', 'keydown']);
+export var KeyboardAccessory = /*@__PURE__*/defineContainer('taro-keyboard-accessory-core', undefined);
+export var Label = /*@__PURE__*/defineContainer('taro-label-core', undefined, ['for']);
+export var Lifestyle = /*@__PURE__*/defineContainer('taro-lifestyle-core', undefined);
+export var Like = /*@__PURE__*/defineContainer('taro-like-core', undefined);
+export var LivePlayer = /*@__PURE__*/defineContainer('taro-live-player-core', undefined);
+export var LivePusher = /*@__PURE__*/defineContainer('taro-live-pusher-core', undefined);
+export var Login = /*@__PURE__*/defineContainer('taro-login-core', undefined);
+export var Lottie = /*@__PURE__*/defineContainer('taro-lottie-core', undefined);
+export var Map = /*@__PURE__*/defineContainer('taro-map-core', undefined);
+export var MatchMedia = /*@__PURE__*/defineContainer('taro-match-media-core', undefined);
+export var MovableArea = /*@__PURE__*/defineContainer('taro-movable-area-core', undefined, ['scaleArea']);
+export var MovableView = /*@__PURE__*/defineContainer('taro-movable-view-core', undefined, ['x', 'y', 'direction', 'outOfBounds', 'inertia', 'friction', 'damping', 'disabled', 'scale', 'scaleMin', 'scaleMax', 'scaleValue', 'animation', 'change', 'scale', 'htouchmove', 'vtouchmove']);
+export var NativeSlot = /*@__PURE__*/defineContainer('taro-native-slot-core', undefined);
+export var NavigationBar = /*@__PURE__*/defineContainer('taro-navigation-bar-core', undefined);
+export var Navigator = /*@__PURE__*/defineContainer('taro-navigator-core', undefined, ['hoverClass', 'url', 'openType', 'isHover', 'delta', 'cuccess', 'fail', 'Complete']);
+export var OfficialAccount = /*@__PURE__*/defineContainer('taro-official-account-core', undefined);
+export var OpenData = /*@__PURE__*/defineContainer('taro-open-data-core', undefined);
+export var PageContainer = /*@__PURE__*/defineContainer('taro-page-container-core', undefined);
+export var PageMeta = /*@__PURE__*/defineContainer('taro-page-meta-core', undefined);
+export var Picker = /*@__PURE__*/defineContainer('taro-picker-core', undefined, ['mode', 'disabled', 'range', 'rangeKey', 'value', 'start', 'end', 'fields', 'name', 'change', 'columnchange', 'cancel']);
+export var PickerGroup = /*@__PURE__*/defineContainer('taro-picker-group', undefined, ['mode', 'range', 'rangeKey', 'height', 'columnId', 'updateHeight', 'onColumnChange', 'updateDay']);
+export var PickerViewColumn = /*@__PURE__*/defineContainer('taro-picker-view-column-core', undefined, ['col', 'initialPosition', 'paddingVertical', 'onselect', 'onselectstart', 'onselectend']);
+export var PickerView = /*@__PURE__*/defineContainer('taro-picker-view-core', undefined, ['indicatorStyle', 'indicatorClass', 'value', 'maskStyle', 'maskClass', 'change', 'pickstart', 'pickend']);
+export var Progress = /*@__PURE__*/defineContainer('taro-progress-core', undefined, ['percent', 'showInfo', 'borderRadius', 'fontSize', 'strokeWidth', 'activeColor', 'backgroundColor', 'active']);
+export var PullToRefresh = /*@__PURE__*/defineContainer('taro-pull-to-refresh', undefined, ['prefixCls', 'distanceToRefresh', 'damping', 'indicator', 'refresh']);
+export var Radio = /*@__PURE__*/defineContainer('taro-radio-core', undefined, ['name', 'value', 'id', 'checked', 'disabled', 'nativeProps', 'radiochange']);
+export var RadioGroup = /*@__PURE__*/defineContainer('taro-radio-group-core', undefined, ['name', 'change']);
+export var RichText = /*@__PURE__*/defineContainer('taro-rich-text-core', undefined, ['nodes']);
+export var RootPortal = /*@__PURE__*/defineContainer('taro-root-portal-core', undefined);
+export var RtcRoom = /*@__PURE__*/defineContainer('taro-rtc-room-core', undefined);
+export var RtcRoomItem = /*@__PURE__*/defineContainer('taro-rtc-room-item-core', undefined);
+export var ScrollView = /*@__PURE__*/defineContainer('taro-scroll-view-core', undefined, ['scrollX', 'scrollY', 'upperThreshold', 'lowerThreshold', 'mpScrollTop', 'mpScrollLeft', 'mpScrollIntoView', 'scrollWithAnimation', 'scroll', 'scrolltoupper', 'scrolltolower']);
+export var ShareElement = /*@__PURE__*/defineContainer('taro-share-element-core', undefined);
+export var Slider = /*@__PURE__*/defineContainer('taro-slider-core', undefined, ['min', 'max', 'step', 'disabled', 'value', 'activeColor', 'backgroundColor', 'blockSize', 'blockColor', 'showValue', 'name', 'change', 'changing']);
+export var Slot = /*@__PURE__*/defineContainer('taro-slot-core', undefined);
+export var Swiper = /*@__PURE__*/defineContainer('taro-swiper-core', undefined, ['indicatorDots', 'indicatorColor', 'indicatorActiveColor', 'autoplay', 'current', 'interval', 'duration', 'circular', 'vertical', 'previousMargin', 'nextMargin', 'displayMultipleItems', 'full', 'zoom', 'change', 'animationfinish']);
+export var SwiperItem = /*@__PURE__*/defineContainer('taro-swiper-item-core', undefined, ['itemId']);
+export var Switch = /*@__PURE__*/defineContainer('taro-switch-core', undefined, ['type', 'checked', 'color', 'name', 'disabled', 'nativeProps', 'change']);
+export var TabItem = /*@__PURE__*/defineContainer('taro-tab-item-core', undefined);
+export var Tabbar = /*@__PURE__*/defineContainer('taro-tabbar', undefined, ['conf', 'longpress']);
+export var Tabs = /*@__PURE__*/defineContainer('taro-tabs-core', undefined);
+export var Text = /*@__PURE__*/defineContainer('taro-text-core', undefined, ['selectable']);
+export var Textarea = /*@__PURE__*/defineContainer('taro-textarea-core', undefined, ['value', 'placeholder', 'disabled', 'maxlength', 'autoFocus', 'autoHeight', 'name', 'nativeProps', 'input', 'focus', 'blur', 'change', 'linechange']);
+export var VideoControl = /*@__PURE__*/defineContainer('taro-video-control', undefined, ['controls', 'currentTime', 'duration', 'isPlaying', 'pauseFunc', 'playFunc', 'seekFunc', 'showPlayBtn', 'showProgress']);
+export var Video = /*@__PURE__*/defineContainer('taro-video-core', undefined, ['src', 'duration', 'controls', 'autoplay', 'loop', 'muted', 'initialTime', 'poster', 'objectFit', 'showProgress', 'showFullscreenBtn', 'showPlayBtn', 'showCenterPlayBtn', 'showMuteBtn', 'danmuList', 'danmuBtn', 'enableDanmu', 'enablePlayGesture', 'enableProgressGesture', 'vslideGesture', 'vslideGestureInFullscreen', 'nativeProps', 'play', 'pause', 'ended', 'timeupdate', 'error', 'fullscreenchange', 'progress', 'loadedmetadata']);
+export var VideoDanmu = /*@__PURE__*/defineContainer('taro-video-danmu', undefined, ['enable']);
+export var View = /*@__PURE__*/defineContainer('taro-view-core', undefined, ['animation', 'hoverClass', 'hoverStartTime', 'hoverStayTime', 'longpress']);
+export var VoipRoom = /*@__PURE__*/defineContainer('taro-voip-room-core', undefined);
+export var WebView = /*@__PURE__*/defineContainer('taro-web-view-core', undefined, ['src', 'load', 'error']);

package/{dist-h5 → dist}/vue3/index.js

@@ -1,15 +1,13 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import * as components from './components';
 export function initVue3Components(app) {
   app.config.isCustomElement = function (tag) {
     return /^taro-/.test(tag) || tag === 'root' || tag === 'block';
   };
-
   Object.entries(components).forEach(function (_ref) {
     var _ref2 = _slicedToArray(_ref, 2),
-        name = _ref2[0],
-        component = _ref2[1];
-
+      name = _ref2[0],
+      component = _ref2[1];
     if (component) {
       var tagName = 'taro' + name.replace(new RegExp('([A-Z])', 'g'), '-$1').toLowerCase();
       app.component(tagName, component);

package/dist/vue3/vue-component-lib/utils.js

@@ -0,0 +1,175 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import { defineComponent, getCurrentInstance, h, inject, ref } from 'vue';
+var UPDATE_VALUE_EVENT = 'update:modelValue';
+var MODEL_VALUE = 'modelValue';
+var ROUTER_LINK_VALUE = 'routerLink';
+var NAV_MANAGER = 'navManager';
+var ROUTER_PROP_PREFIX = 'router';
+
+/**
+ * Starting in Vue 3.1.0, all properties are
+ * added as keys to the props object, even if
+ * they are not being used. In order to correctly
+ * account for both value props and v-model props,
+ * we need to check if the key exists for Vue <3.1.0
+ * and then check if it is not undefined for Vue >= 3.1.0.
+ * See https://github.com/vuejs/vue-next/issues/3889
+ */
+var EMPTY_PROP = Symbol();
+var DEFAULT_EMPTY_PROP = {
+  default: EMPTY_PROP
+};
+var getComponentClasses = function getComponentClasses(classes) {
+  return (classes === null || classes === void 0 ? void 0 : classes.split(' ')) || [];
+};
+var getElementClasses = function getElementClasses(ref, componentClasses) {
+  var _ref$value;
+  var defaultClasses = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
+  return [].concat(_toConsumableArray(Array.from(((_ref$value = ref.value) === null || _ref$value === void 0 ? void 0 : _ref$value.classList) || [])), _toConsumableArray(defaultClasses)).filter(function (c, i, self) {
+    return !componentClasses.has(c) && self.indexOf(c) === i;
+  });
+};
+
+/**
+* Create a callback to define a Vue component wrapper around a Web Component.
+*
+* @prop name - The component tag name (i.e. `ion-button`)
+* @prop componentProps - An array of properties on the
+* component. These usually match up with the @Prop definitions
+* in each component's TSX file.
+* @prop customElement - An option custom element instance to pass
+* to customElements.define. Only set if `includeImportCustomElements: true` in your config.
+* @prop modelProp - The prop that v-model binds to (i.e. value)
+* @prop modelUpdateEvent - The event that is fired from your Web Component when the value changes (i.e. ionChange)
+* @prop externalModelUpdateEvent - The external event to fire from your Vue component when modelUpdateEvent fires. This is used for ensuring that v-model references have been
+* correctly updated when a user's event callback fires.
+*/
+export var defineContainer = function defineContainer(name, defineCustomElement) {
+  var componentProps = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
+  var modelProp = arguments.length > 3 ? arguments[3] : undefined;
+  var modelUpdateEvent = arguments.length > 4 ? arguments[4] : undefined;
+  var externalModelUpdateEvent = arguments.length > 5 ? arguments[5] : undefined;
+  /**
+  * Create a Vue component wrapper around a Web Component.
+  * Note: The `props` here are not all properties on a component.
+  * They refer to whatever properties are set on an instance of a component.
+  */
+
+  if (defineCustomElement !== undefined) {
+    defineCustomElement();
+  }
+  var Container = defineComponent(function (props, _ref) {
+    var _currentInstance$appC;
+    var attrs = _ref.attrs,
+      slots = _ref.slots,
+      emit = _ref.emit;
+    var modelPropValue = props[modelProp];
+    var containerRef = ref();
+    var classes = new Set(getComponentClasses(attrs.class));
+    var onVnodeBeforeMount = function onVnodeBeforeMount(vnode) {
+      // Add a listener to tell Vue to update the v-model
+      if (vnode.el) {
+        var eventsNames = Array.isArray(modelUpdateEvent) ? modelUpdateEvent : [modelUpdateEvent];
+        eventsNames.forEach(function (eventName) {
+          vnode.el.addEventListener(eventName.toLowerCase(), function (e) {
+            modelPropValue = (e === null || e === void 0 ? void 0 : e.target)[modelProp];
+            emit(UPDATE_VALUE_EVENT, modelPropValue);
+
+            /**
+             * We need to emit the change event here
+             * rather than on the web component to ensure
+             * that any v-model bindings have been updated.
+             * Otherwise, the developer will listen on the
+             * native web component, but the v-model will
+             * not have been updated yet.
+             */
+            if (externalModelUpdateEvent) {
+              emit(externalModelUpdateEvent, e);
+            }
+          });
+        });
+      }
+    };
+    var currentInstance = getCurrentInstance();
+    var hasRouter = currentInstance === null || currentInstance === void 0 ? void 0 : (_currentInstance$appC = currentInstance.appContext) === null || _currentInstance$appC === void 0 ? void 0 : _currentInstance$appC.provides[NAV_MANAGER];
+    var navManager = hasRouter ? inject(NAV_MANAGER) : undefined;
+    var handleRouterLink = function handleRouterLink(ev) {
+      var routerLink = props.routerLink;
+      if (routerLink === EMPTY_PROP) return;
+      if (navManager !== undefined) {
+        var navigationPayload = {
+          event: ev
+        };
+        for (var key in props) {
+          var value = props[key];
+          if (props.hasOwnProperty(key) && key.startsWith(ROUTER_PROP_PREFIX) && value !== EMPTY_PROP) {
+            navigationPayload[key] = value;
+          }
+        }
+        navManager.navigate(navigationPayload);
+      } else {
+        console.warn('Tried to navigate, but no router was found. Make sure you have mounted Vue Router.');
+      }
+    };
+    return function () {
+      modelPropValue = props[modelProp];
+      getComponentClasses(attrs.class).forEach(function (value) {
+        classes.add(value);
+      });
+      var oldClick = props.onClick;
+      var handleClick = function handleClick(ev) {
+        if (oldClick !== undefined) {
+          oldClick(ev);
+        }
+        if (!ev.defaultPrevented) {
+          handleRouterLink(ev);
+        }
+      };
+      var propsToAdd = {
+        ref: containerRef,
+        class: getElementClasses(containerRef, classes),
+        onClick: handleClick,
+        onVnodeBeforeMount: modelUpdateEvent ? onVnodeBeforeMount : undefined
+      };
+
+      /**
+       * We can use Object.entries here
+       * to avoid the hasOwnProperty check,
+       * but that would require 2 iterations
+       * where as this only requires 1.
+       */
+      for (var key in props) {
+        var value = props[key];
+        if (props.hasOwnProperty(key) && value !== EMPTY_PROP) {
+          propsToAdd[key] = value;
+        }
+      }
+      if (modelProp) {
+        /**
+         * If form value property was set using v-model
+         * then we should use that value.
+         * Otherwise, check to see if form value property
+         * was set as a static value (i.e. no v-model).
+         */
+        if (props[MODEL_VALUE] !== EMPTY_PROP) {
+          propsToAdd = _objectSpread(_objectSpread({}, propsToAdd), {}, _defineProperty({}, modelProp, props[MODEL_VALUE]));
+        } else if (modelPropValue !== EMPTY_PROP) {
+          propsToAdd = _objectSpread(_objectSpread({}, propsToAdd), {}, _defineProperty({}, modelProp, modelPropValue));
+        }
+      }
+      return h(name, propsToAdd, slots.default && slots.default());
+    };
+  });
+  Container.displayName = name;
+  Container.props = _defineProperty({}, ROUTER_LINK_VALUE, DEFAULT_EMPTY_PROP);
+  componentProps.forEach(function (componentProp) {
+    Container.props[componentProp] = DEFAULT_EMPTY_PROP;
+  });
+  if (modelProp) {
+    Container.props[MODEL_VALUE] = DEFAULT_EMPTY_PROP;
+    Container.emits = [UPDATE_VALUE_EVENT, externalModelUpdateEvent];
+  }
+  return Container;
+};

package/loader/package.json

@@ -1,5 +1,6 @@
 {
   "name": "taro-components-loader",
+  "private": true,
   "typings": "./index.d.ts",
   "module": "./index.js",
   "main": "./index.cjs.js",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tarojs/components",
-  "version": "3.5.9",
+  "version": "3.6.0-beta.0",
   "description": "Taro 组件库",
   "browser": "dist/index.js",
   "main:h5": "dist/index.js",
@@ -16,7 +16,6 @@
     "loader",
     "mini",
     "types",
-    "dist-h5",
     "virtual-list",
     "vue3.d.ts"
   ],
@@ -36,30 +35,30 @@
     "resolve-pathname": "^3.0.0",
     "swiper": "6.8.0",
     "weui": "^1.1.2",
-    "@tarojs/router": "3.5.9",
-    "@tarojs/taro": "3.5.9"
+    "@tarojs/components-advanced": "3.6.0-beta.0",
+    "@tarojs/router": "3.6.0-beta.0",
+    "@tarojs/taro": "3.6.0-beta.0"
   },
   "devDependencies": {
     "@babel/generator": "^7.14.5",
     "@babel/parser": "^7.14.5",
     "@babel/traverse": "^7.14.5",
     "@babel/types": "^7.14.5",
-    "@stencil/core": "~2.13.0",
-    "@stencil/sass": "1.5.2",
+    "@stencil/core": "^2.18.1",
+    "@stencil/react-output-target": "0.3.1",
+    "@stencil/sass": "^2.0.0",
+    "@stencil/vue-output-target": "0.6.2",
+    "@types/jest": "^27.4.1",
     "@types/node": "^14.14.31",
     "change-case": "^4.1.2",
-    "css-loader": "3.4.2",
     "csstype": "^3.1.1",
     "jquery": "^3.4.1",
-    "karmatic": "^2.1.0",
     "lodash": "^4.17.21",
     "miniapp-types": "1.1.21",
-    "simulant": "^0.2.2",
-    "style-loader": "1.3.0",
+    "puppeteer": "^19.2.0",
+    "stencil-vue2-output-target": "0.0.4",
     "ts-node": "^10.9.1",
-    "typescript": "^4.7.4",
-    "webpack": "4.46.0",
-    "workbox-build": "4.3.1"
+    "typescript": "^4.7.4"
   },
   "peerDependenciesMeta": {
     "@types/react": {
@@ -73,13 +72,17 @@
     }
   },
   "scripts": {
-    "build-h5": "babel -d dist-h5 h5",
-    "build": "pnpm run build-h5 & cross-env NODE_ENV=production stencil build --config stencil.config.ts",
-    "dev": "cross-env NODE_ENV=development stencil build --config stencil.config.ts --watch",
-    "test": "karmatic --files '__tests__/setup.js,__tests__/**.spec.js' --coverage false",
-    "test:ci": "karmatic --files '__tests__/setup.js,__tests__/**.spec.js' --coverage false",
-    "test:debug": "karmatic debug --files '__tests__/setup.js,__tests__/**.spec.js' --coverage false",
-    "test:coverage": "karmatic --files '__tests__/setup.js,__tests__/**.spec.js'",
+    "build": "cross-env NODE_ENV=production run-s build:components build:library",
+    "build:components": "stencil build --config stencil.config.ts",
+    "build:library": "pnpm --filter @tarojs/components-library-react --filter @tarojs/components-library-vue2 --filter @tarojs/components-library-vue3 run build:ci",
+    "dev:components": "cross-env NODE_ENV=development pnpm run build:components --watch",
+    "dev:library-react": "cross-env NODE_ENV=development pnpm --filter @tarojs/components-library-react run build:ci --watch",
+    "dev:library-vue2": "cross-env NODE_ENV=development pnpm --filter @tarojs/components-library-vue2 run build:ci --watch",
+    "dev:library-vue3": "cross-env NODE_ENV=development pnpm --filter @tarojs/components-library-vue3 run build:ci --watch",
+    "test": "cross-env NODE_ENV=test stencil test --spec --e2e",
+    "test:ci": "pnpm run test --ci --no-build",
+    "test:coverage": "pnpm run test --ci --screenshot --coverage",
+    "test:watch": "pnpm run test --screenshot --watch",
     "sync:types": "ts-node scripts/json-schema-to-types.ts"
   }
 }

package/types/Button.d.ts

@@ -526,7 +526,7 @@ declare namespace ButtonProps {
 
 /** 按钮
  * @classification forms
- * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
+ * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony
  * @example_react
  * ```tsx
  * export default class PageButton extends Component {

package/types/Camera.d.ts

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

package/types/Checkbox.d.ts

@@ -43,7 +43,7 @@ interface CheckboxProps extends StandardProps {
 
 /** 多选项目
  * @classification forms
- * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
+ * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony
  * @example_react
  * ```tsx
  * export default class PageCheckbox extends Component {

package/types/CheckboxGroup.d.ts

@@ -16,7 +16,7 @@ interface CheckboxGroupProps extends StandardProps, FormItemProps {
 
 /** 多项选择器，内部由多个checkbox组成
  * @classification forms
- * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
+ * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony
  * @example
  * ```tsx
  * export default class PageCheckbox extends Component {

package/types/CommentList.d.ts

@@ -80,7 +80,6 @@ namespace CommentListProps {
      * @example "/pages/index/index"
      */
     path: string
-
     /** 数组第一项用于收藏功能的展示图片
      * @default ['https://b.bdstatic.com/miniapp/images/demo-dog.png']
      */

package/types/CoverImage.d.ts

@@ -59,7 +59,7 @@ interface CoverImageProps extends StandardProps {
 
 /** 覆盖在原生组件之上的图片视图。可覆盖的原生组件同cover-view，支持嵌套在cover-view里。
  * @classification viewContainer
- * @supported weapp, alipay, swan, qq, h5
+ * @supported weapp, alipay, swan, qq, h5, harmony
  * @example_react
  * ```tsx
  * // js

package/types/CustomWrapper.d.ts

@@ -6,6 +6,7 @@ interface CustomWrapperProps extends StandardProps {
 
 /** custom-wrapper 自定义组件包裹器
  * 当数据更新层级较深时，可用此组件将需要更新的区域包裹起来，这样更新层级将大大减少
+ * @classification viewContainer
  * @supported weapp, swan, alipay, tt, jd, qq, h5
  * @example
  * ```tsx

package/types/Form.d.ts

@@ -66,7 +66,7 @@ declare namespace FormProps {
  *
  * 当点击 form 表单中 form-type 为 submit 的 button 组件时，会将表单组件中的 value 值进行提交，需要在表单组件中加上 name 来作为 key。
  * @classification forms
- * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
+ * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony
  * @example_react
  * ```tsx
  * class App extends Component {

package/types/Icon.d.ts

@@ -62,7 +62,7 @@ declare namespace IconProps {
 
 /** 图标。组件属性的长度单位默认为 px
  * @classification base
- * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
+ * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony
  * @example_react
  * ```tsx
  * export default class PageView extends Component {

package/types/Image.d.ts

@@ -155,7 +155,7 @@ declare namespace ImageProps {
  *
  * **Note:** 为实现小程序的 `mode` 特性，在 H5 组件中使用一个 `div` 容器来对内部的 `img` 进行展示区域的裁剪，因此请勿使用元素选择器来重置 `img` 的样式！
  * @classification media
- * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
+ * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony
  * @example_react
  * ```tsx
  * export default class PageView extends Component {