@tarojs/components 3.6.0-canary.6 → 3.6.0-canary.8

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

@@ -7,6 +7,7 @@ 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
@@ -16,24 +17,21 @@ var ROUTER_PROP_PREFIX = 'router';
  * 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.
 *
@@ -48,33 +46,28 @@ var getElementClasses = function getElementClasses(ref, componentClasses) {
 * @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;
+      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) {
@@ -83,6 +76,7 @@ export var defineContainer = function defineContainer(name, defineCustomElement)
           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
@@ -91,7 +85,6 @@ export var defineContainer = function defineContainer(name, defineCustomElement)
              * native web component, but the v-model will
              * not have been updated yet.
              */
-
             if (externalModelUpdateEvent) {
               emit(externalModelUpdateEvent, e);
             }
@@ -99,72 +92,60 @@ export var defineContainer = function defineContainer(name, defineCustomElement)
         });
       }
     };
-
     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
@@ -178,7 +159,6 @@ export var defineContainer = function defineContainer(name, defineCustomElement)
           propsToAdd = _objectSpread(_objectSpread({}, propsToAdd), {}, _defineProperty({}, modelProp, modelPropValue));
         }
       }
-
       return h(name, propsToAdd, slots.default && slots.default());
     };
   });
@@ -187,11 +167,9 @@ export var defineContainer = function defineContainer(name, defineCustomElement)
   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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tarojs/components",
-  "version": "3.6.0-canary.6",
+  "version": "3.6.0-canary.8",
   "description": "Taro 组件库",
   "browser": "dist/index.js",
   "main:h5": "dist/index.js",
@@ -35,8 +35,9 @@
     "resolve-pathname": "^3.0.0",
     "swiper": "6.8.0",
     "weui": "^1.1.2",
-    "@tarojs/router": "3.6.0-canary.6",
-    "@tarojs/taro": "3.6.0-canary.6"
+    "@tarojs/components-advanced": "3.6.0-canary.8",
+    "@tarojs/router": "3.6.0-canary.8",
+    "@tarojs/taro": "3.6.0-canary.8"
   },
   "devDependencies": {
     "@babel/generator": "^7.14.5",

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/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 {

package/types/Input.d.ts

@@ -231,52 +231,66 @@ declare namespace InputProps {
      * @supported weapp, alipay, h5, rn
      */
     text
+
     /** 数字输入键盘
      * @supported weapp, alipay, h5, rn
      */
     number
+
     /** 身份证输入键盘
      *@supported weapp, alipay, rn
      */
     idcard
+
     /** 带小数点的数字键盘
      * @supported weapp, alipay, h5, rn
      */
     digit
+
     /** 密码安全输入键盘[指引](https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/safe-password.html)
      * @supported weapp, alipay
      */
     'safe-password'
+
     /** 昵称输入键盘
      * @supported weapp, alipay
      */
     nickname
+
     /** 数字输入键盘
      * @supported alipay
      */
     numberpad
+
     /** 带小数点的数字键盘
      * @supported alipay
      */
     digitpad
+
     /** 身份证输入键盘
      * @supported alipay
      */
     idcardpad
   }
+
   /** Confirm 类型 */
   interface ConfirmType {
     /** 右下角按钮为“发送” */
     send
+
     /** 右下角按钮为“搜索” */
     search
+
     /** 右下角按钮为“下一个” */
     next
+
     /** 右下角按钮为“前往” */
     go
+
     /** 右下角按钮为“完成” */
     done
   }
+
   /** > 注意：React-Native 端 `inputEventDetail` 仅实现参数 `value`，若需实时获取光标位置则可通过 [`onSelectionChange`](https://reactnative.dev/docs/textinput#onselectionchange) 实现。 */
   interface inputEventDetail {
     /** 输入值 */
@@ -310,7 +324,7 @@ declare namespace InputProps {
 
 /** 输入框。该组件是原生组件，使用时请注意相关限制
  * @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/Label.d.ts

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

package/types/NativeSlot.d.ts

@@ -9,6 +9,7 @@ interface NativeSlotProps {
 }
 
 /** 编译的原生组件支持使用 slot 插槽
+ * @classification viewContainer
  * @supported weapp, swan, alipay, tt, jd, qq
  * @version 3.5.7+
  * @example

package/types/NavigationBar.d.ts

@@ -36,7 +36,8 @@ interface NavigationBarProps extends StandardProps {
 
 /** 页面导航条配置节点，用于指定导航栏的一些属性。只能是 PageMeta 组件内的第一个节点，需要配合它一同使用。
  * 通过这个节点可以获得类似于调用 Taro.setNavigationBarTitle Taro.setNavigationBarColor 等接口调用的效果。
- * @supported weapp
+ * @classification navig
+ * @supported weapp, harmony
  * @see https://developers.weixin.qq.com/miniprogram/dev/component/navigation-bar.html
  */
 declare const NavigationBar: ComponentType<NavigationBarProps>

package/types/Navigator.d.ts

@@ -138,7 +138,7 @@ declare namespace NavigatorProps {
 
 /** 页面链接
  * @classification navig
- * @supported weapp, alipay, swan, tt, qq, jd
+ * @supported weapp, alipay, swan, tt, qq, jd, harmony
  * @see https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html
  */
 declare const Navigator: ComponentType<NavigatorProps>

package/types/Picker.d.ts

@@ -302,7 +302,7 @@ declare namespace PickerRegionProps {
 /**
  * 从底部弹起的滚动选择器
  * @classification forms
- * @supported weapp, swan, alipay, tt, h5, rn
+ * @supported weapp, swan, alipay, tt, h5, rn, harmony
  * @example_react
  * ```tsx
  * export default class PagePicker extends Component {

package/types/PickerView.d.ts

@@ -66,7 +66,7 @@ declare namespace PickerViewProps {
 /** 嵌入页面的滚动选择器
  * 其中只可放置 picker-view-column 组件，其它节点不会显示
  * @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 Picks extends Component {

package/types/PickerViewColumn.d.ts

@@ -5,7 +5,7 @@ type PickerViewColumnProps = StandardProps
 /** 滚动选择器子项
  * 仅可放置于 `<PickerView />` 中，其孩子节点的高度会自动设置成与 picker-view 的选中框的高度一致
  * @classification forms
- * @supported weapp, swan, alipay, tt, h5, rn
+ * @supported weapp, swan, alipay, tt, h5, rn, harmony
  * @see https://developers.weixin.qq.com/miniprogram/dev/component/picker-view-column.html
  */
 declare const PickerViewColumn: ComponentType<StandardProps>

package/types/Progress.d.ts

@@ -81,7 +81,7 @@ interface ProgressProps extends StandardProps {
 
 /** 进度条。组件属性的长度单位默认为 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/Radio.d.ts

@@ -44,7 +44,7 @@ interface RadioProps extends StandardProps {
 
 /** 单选项目
  * @classification forms
- * @supported weapp, alipay, swan, tt, qq, h5, rn
+ * @supported weapp, alipay, swan, tt, qq, h5, rn, harmony
  * @example_react
  * ```tsx
  * export default class PageRadio extends Component {

package/types/RadioGroup.d.ts

@@ -19,7 +19,7 @@ declare namespace RadioGroupProps {
 
 /** 单项选择器，内部由多个 Radio 组成。
  * @classification forms
- * @supported weapp, alipay, swan, tt, qq, h5, rn
+ * @supported weapp, alipay, swan, tt, qq, h5, rn, harmony
  * @see https://developers.weixin.qq.com/miniprogram/dev/component/radio-group.html
  */
 declare const RadioGroup: ComponentType<RadioGroupProps>

package/types/RichText.d.ts

@@ -118,7 +118,7 @@ declare namespace RichTextProps {
 
 /** 富文本
  * @classification base
- * @supported weapp, swan, alipay, tt, h5, rn
+ * @supported weapp, swan, alipay, tt, h5, rn, harmony
  * @example_react
  * ```tsx
  * class App extends Components {

package/types/ScrollView.d.ts

@@ -262,7 +262,7 @@ declare namespace ScrollViewProps {
  * H5 中 ScrollView 组件是通过一个高度（或宽度）固定的容器内部滚动来实现的，因此务必正确的设置容器的高度。例如: 如果 ScrollView 的高度将 body 撑开，就会同时存在两个滚动条（body 下的滚动条，以及 ScrollView 的滚动条）。
  * 微信小程序 中 ScrollView 组件如果设置 scrollX 横向滚动时，并且子元素为多个时（单个子元素时设置固定宽度则可以正常横向滚动），需要通过 WXSS 设置 `white-space: nowrap` 来保证元素不换行，并对 ScrollView 内部元素设置 `display: inline-block` 来使其能够横向滚动。
  * @classification viewContainer
- * @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/ShareElement.d.ts

@@ -2,17 +2,17 @@ import { ComponentType } from 'react'
 import { StandardProps, CommonEventFunction } from './common'
 interface ShareElementProps extends StandardProps {
   /** 映射标记
-   * @supported weapp 
+   * @supported weapp
    */
   key?: string
 
   /** 映射标记
-   * @supported weapp 
+   * @supported weapp
    */
   mapkey?: string
 
   /** 映射标记
-   * @supported alipay 
+   * @supported alipay
    */
   name?: string
 

package/types/Slider.d.ts

@@ -118,7 +118,7 @@ declare namespace SliderProps {
 
 /** 滑动选择器
  * @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 PageView extends Component {

package/types/Slot.d.ts

@@ -14,7 +14,8 @@ interface SlotProps {
 }
 
 /** slot 插槽
- * @supported weapp, swan, alipay, tt, jd, qq
+ * @classification viewContainer
+ * @supported weapp, swan, alipay, tt, jd, qq, harmony
  * @example
  * ```tsx
  * import { Slot, View, Text } from '@tarojs/components'

package/types/Swiper.d.ts

@@ -247,7 +247,7 @@ declare namespace SwiperProps {
 /** 滑块视图容器。其中只可放置 swiper-item 组件，否则会导致未定义的行为。
  * > 不要为 `SwiperItem` 设置 **style** 属性，可以通过 class 设置样式。[7147](https://github.com/NervJS/taro/issues/7147)
  * @classification viewContainer
- * @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/SwiperItem.d.ts

@@ -16,7 +16,7 @@ interface SwiperItemProps extends StandardProps {
 /** 仅可放置在 swiper 组件中，宽高自动设置为100%
  * > 不要为 `SwiperItem` 设置 **style** 属性，可以通过 class 设置样式。[7147](https://github.com/NervJS/taro/issues/7147)
  * @classification viewContainer
- * @supported weapp, alipay, swan, tt, jd, h5, rn
+ * @supported weapp, alipay, swan, tt, jd, h5, rn, harmony
  * @example_react
  * ```tsx
  * class App extends Component {

package/types/Switch.d.ts

@@ -93,7 +93,7 @@ declare namespace SwitchProps {
  *   </view>
  * </template>
  * ```
- * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
+ * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony
  * @see https://developers.weixin.qq.com/miniprogram/dev/component/switch.html
  */
 declare const Switch: ComponentType<SwitchProps>

package/types/Textarea.d.ts

@@ -224,7 +224,7 @@ declare namespace TextareaProps {
 
 /** 多行输入框。该组件是原生组件，使用时请注意相关限制
  * @classification forms
- * @supported weapp, alipay, swan, tt, qq, h5, rn
+ * @supported weapp, alipay, swan, tt, qq, h5, rn, harmony
  * @example_react
  * ```tsx
  * export default class PageView extends Component {

package/types/Video.d.ts

@@ -643,7 +643,7 @@ declare namespace VideoProps {
 
 /** 视频。相关api：Taro.createVideoContext
  * @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 {

package/types/View.d.ts

@@ -142,7 +142,7 @@ interface ViewProps extends StandardProps {
 
 /** 视图容器
  * @classification viewContainer
- * @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/WebView.d.ts

@@ -49,7 +49,7 @@ declare namespace WebViewProps {
 
 /** web-view 组件是一个可以用来承载网页的容器，会自动铺满整个小程序页面。个人类型与海外类型的小程序暂不支持使用。
  * @classification open
- * @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 {