@tarojs/plugin-platform-harmony-ets 4.0.0-beta.53 → 4.0.0-beta.55

package/dist/components-harmony-ets/input.ets

@@ -72,6 +72,7 @@ export default struct TaroInput {
     .maxLength(Number(this.node._attrs?.maxlength) || null)
     .placeholderColor(getPlaceholderColor(this.node))
     .enterKeyType(INPUT_CONFIRM_MAP.get(this.node._attrs?.confirmType) || EnterKeyType.Done)
+    .padding(0) // Note: 移出 Input 默认 padding 设置
     .attributeModifier(commonStyleModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
     .styles(this.node?.hmStyle)
     .attrs(getAttributes(this.node))

package/dist/components-harmony-ets/style.ets

@@ -1,7 +1,7 @@
 import type { TaroAny, HarmonyStyle, TaroElement, TaroStyleType, TaroTextElement }  from '@tarojs/runtime'
 import { ObjectAssign }  from '@tarojs/runtime'
 import { isUndefined } from '@tarojs/shared'
-import { computeBackgroundPosition } from './utils'
+import { computeBackgroundPosition, convertVp2Px } from './utils'
 import { getNormalAttributes } from './utils/helper'
 import { isMaxWidthView } from './utils/styles'
 import { FlexManager } from './utils/flexManager.ets'
@@ -113,6 +113,7 @@ class PseudoStyleModify implements AttributeModifier<CommonAttribute> {
   applyNormalAttribute(instance: CommonAttribute): void {
     if (this.style) {
       setNormalAttributeIntoInstance(instance, this.style)
+      setTransformAttributeIntoInstance(instance, this.style || {})
     }
   }
 }
@@ -376,34 +377,15 @@ export function setNormalAttributeIntoInstance(instance: CommonAttribute, style:
     // 为了适应position不设置z-index也能高于同层级组件，估且让设置了z-index的会更高一级
     instance.zIndex(style.zIndex + 1)
   }
-  // if (!isUndefined(style.transform)) {
-  //   if (style.transform.Translate) {
-  //     instance.translate({
-  //       x: style.transform.Translate.x || 0,
-  //       y: style.transform.Translate.y || 0,
-  //       z: style.transform.Translate.z || 0,
-  //     })
-  //   }
-  //   if (style.transform.Scale) {
-  //     instance.scale({
-  //       x: style.transform.Scale.x || 0,
-  //       y: style.transform.Scale.y || 0,
-  //       z: style.transform.Scale.z || 0,
-  //       centerX: style.transformOrigin?.x || 0,
-  //       centerY: style.transformOrigin?.y || 0,
-  //     })
-  //   }
-  //   if (style.transform.Rotate) {
-  //     instance.rotate({
-  //       x: style.transform.Rotate.x || 0,
-  //       y: style.transform.Rotate.y || 0,
-  //       z: style.transform.Rotate.z || 0,
-  //       centerX: style.transformOrigin?.x || 0,
-  //       centerY: style.transformOrigin?.y || 0,
-  //       angle: style.transform.Rotate.angle
-  //     })
-  //   }
-  // }
+  if (!isUndefined(style.boxShadow)) {
+    instance.shadow({
+      radius: convertVp2Px(style.boxShadow.radius),
+      color: style.boxShadow.color,
+      offsetX: convertVp2Px(style.boxShadow.offsetX),
+      offsetY: convertVp2Px(style.boxShadow.offsetY),
+      fill: style.boxShadow.fill,
+    })
+  }
 }
 
 export const pseudoModify = new PseudoStyleModify()

package/dist/components-harmony-ets/swiper.ets

@@ -77,5 +77,28 @@ export default struct TaroSwiper {
         this.node._nodeInfo.areaInfo = res[1]
       }))
       .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))
+      .onGestureSwipe(shouldBindEvent((index: number, extraInfo: SwiperAnimationEvent) => {
+        const currentOffset = extraInfo.currentOffset || 0
+        // 判断设置的滚动方向
+        const isVertical = this.node._attrs.vertical || false
+        let event: TaroEvent
+        if (isVertical) {
+          event = createTaroEvent('transition', { detail: { dx: 0, dy: currentOffset } }, this.node)
+        } else {
+          event = createTaroEvent('transition', { detail: { dx: currentOffset, dy: 0 } }, this.node)
+        }
+        eventHandler(event, 'transition', this.node)
+      }, this.node, ['transition']))
+      .onTouch(shouldBindEvent((event: TouchEvent) => {
+        if (event.type === TouchType.Down) {
+          eventHandler(event, 'touchStart', this.node)
+        }
+        if (event.type === TouchType.Up) {
+          eventHandler(event, 'touchEnd', this.node)
+        }
+        if (event.type === TouchType.Move) {
+          eventHandler(event, 'touchMove', this.node)
+        }
+      }, this.node, ['touchstart', 'touchmove', 'touchend']))
   }
 }

package/dist/components-harmony-ets/text.ets

@@ -1,7 +1,7 @@
 import { isString } from '@tarojs/shared'
 import { eventHandler, convertNumber2VP, getComponentEventCallback, AREA_CHANGE_EVENT_NAME, VISIBLE_CHANGE_EVENT_NAME, NodeType } from '@tarojs/runtime'
 
-import commonStyleModify, { textModify, setNormalTextAttributeIntoInstance } from './style'
+import { textModify, setNormalTextAttributeIntoInstance } from './style'
 import { getButtonColor } from './button'
 import { getImageMode } from './image'
 import { BUTTON_THEME_COLOR } from './utils/constant/style'
@@ -60,7 +60,7 @@ export default struct TaroText {
         // text 下还有标签
         if (this.node.childNodes.length > 1 || ((this.node.childNodes[0] && this.node.childNodes[0] as TaroElement)?.nodeType === NodeType.ELEMENT_NODE)) {
           ForEach(this.node.childNodes, (item: TaroElement) => {
-            createTextChildNode(item, getSpanVerticalAlign(this.node.hmStyle?.verticalAlign))
+            createTextChildNode(item)
           }, (item: TaroElement) => item._nid)
         }
       }
@@ -75,12 +75,41 @@ export default struct TaroText {
 }
 
 @Builder
-function createTextChildNode (item: TaroElement, align: ImageSpanAlignment) {
+function createTextChildNode (item: TaroElement) {
   if (item.tagName === 'IMAGE') {
     ImageSpan(item.getAttribute('src'))
-      .attributeModifier(commonStyleModify.setNode(item))
+      // .attributeModifier(commonStyleModify.setNode(item))
       .objectFit(getImageMode(item.getAttribute('mode')))
-      .verticalAlign(align)
+      // .verticalAlign(align)
+      .width(item._st.hmStyle.width)
+      .height(item._st.hmStyle.height)
+      .margin({
+        top: item._st.hmStyle.marginTop,
+        left: item._st.hmStyle.marginLeft,
+        right: item._st.hmStyle.marginRight,
+        bottom: item._st.hmStyle.marginBottom,
+      })
+      .padding({
+        top: item._st.hmStyle.paddingTop,
+        left: item._st.hmStyle.paddingLeft,
+        right: item._st.hmStyle.paddingRight,
+        bottom: item._st.hmStyle.paddingBottom,
+      })
+      .textBackgroundStyle({
+        color: item._st.hmStyle.backgroundColor,
+        radius: {
+          topLeft: item._st.hmStyle.borderTopLeftRadius,
+          topRight: item._st.hmStyle.borderTopRightRadius,
+          bottomLeft: item._st.hmStyle.borderBottomLeftRadius,
+          bottomRight: item._st.hmStyle.borderBottomRightRadius,
+        }
+      })
+      .borderRadius({
+        topLeft: item._st.hmStyle.borderTopLeftRadius,
+        topRight: item._st.hmStyle.borderTopRightRadius,
+        bottomLeft: item._st.hmStyle.borderBottomLeftRadius,
+        bottomRight: item._st.hmStyle.borderBottomRightRadius
+      })
       .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', item), item, ['click']))
   } else if (item.nodeType === NodeType.TEXT_NODE) {
     Span(item.textContent)
@@ -88,30 +117,39 @@ function createTextChildNode (item: TaroElement, align: ImageSpanAlignment) {
     Span(item.textContent)
       .attributeModifier(spanModify.setNode(item))
       .letterSpacing(item._st.hmStyle.letterSpacing)
+      .textBackgroundStyle({
+        color: item._st.hmStyle.backgroundColor,
+        radius: {
+          topLeft: item._st.hmStyle.borderTopLeftRadius,
+          topRight: item._st.hmStyle.borderTopRightRadius,
+          bottomLeft: item._st.hmStyle.borderBottomLeftRadius,
+          bottomRight: item._st.hmStyle.borderBottomRightRadius,
+        }
+      })
       .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', item), item, ['click']))
   }
 }
 
-function getSpanVerticalAlign (verticalAlign?: Alignment) {
-  switch (verticalAlign) {
-    case Alignment.Start:
-    case Alignment.TopStart:
-    case Alignment.Top:
-    case Alignment.TopEnd: {
-      return ImageSpanAlignment.TOP
-    }
-    case Alignment.End:
-    case Alignment.BottomStart:
-    case Alignment.Bottom:
-    case Alignment.BottomEnd: {
-      return ImageSpanAlignment.BOTTOM
-    }
-    case Alignment.Center: {
-      return ImageSpanAlignment.CENTER
-    }
-  }
-  return ImageSpanAlignment.BASELINE
-}
+// function getSpanVerticalAlign (verticalAlign?: Alignment) {
+//   switch (verticalAlign) {
+//     case Alignment.Start:
+//     case Alignment.TopStart:
+//     case Alignment.Top:
+//     case Alignment.TopEnd: {
+//       return ImageSpanAlignment.TOP
+//     }
+//     case Alignment.End:
+//     case Alignment.BottomStart:
+//     case Alignment.Bottom:
+//     case Alignment.BottomEnd: {
+//       return ImageSpanAlignment.BOTTOM
+//     }
+//     case Alignment.Center: {
+//       return ImageSpanAlignment.CENTER
+//     }
+//   }
+//   return ImageSpanAlignment.BASELINE
+// }
 
 
 class SpanStyleModify implements AttributeModifier<SpanAttribute> {

package/dist/components-harmony-ets/utils/index.ts

@@ -80,3 +80,8 @@ export function computeBackgroundPosition(style) {
 
   return { offsetX, offsetY }
 }
+
+export function convertVp2Px(val: string | number) {
+  const vp = parseFloat(`${val}`)
+  return vp2px(vp)
+}

package/dist/runtime-ets/dom/cssNesting.ts

@@ -77,7 +77,7 @@ function depthTraversal(root: ReactElement) {
       // import { View } from '~/components'
       // hack：如果是taro节点，但是被赋予了__styleSheet，则走一下__styleSheet转__hmStyle
       if (tree.props.__styleSheet && typeof tree.type !== 'function') {
-        tree.props.__hmStyle = tree.props.__styleSheet.value
+        tree.props.__hmStyle = Object.assign({}, tree.props.__hmStyle, tree.props.__styleSheet.value)
       }
 
       // 后代选择器

package/dist/runtime-ets/dom/stylesheet/type.ts

@@ -113,6 +113,15 @@ export interface TaroStyleType {
   animationDelay?: number
   animationIterationCount?: number
 
+  // shadow
+  boxShadow?: {
+    radius: number
+    color?: string
+    offsetX?: number
+    offsetY?: number
+    fill?: boolean
+  }
+
   // other
   opacity?: number | Resource
   zIndex?: number

package/dist/runtime-ets/utils/index.ts

@@ -55,6 +55,7 @@ export function parseClasses (classNames = ''): string[] {
 
 // 合并静态样式，从样式表里面找到对应的样式
 export function calcStaticStyle (styleSheet: Record<string, CSSProperties>, classNames = ''): CSSProperties {
+  classNames = classNames || '' // 兼容有些开发者传入了false/null等非字符串类型
   const obj: CSSProperties[] = []
 
   if (!styleSheet.cache) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tarojs/plugin-platform-harmony-ets",
-  "version": "4.0.0-beta.53",
+  "version": "4.0.0-beta.55",
   "description": "OpenHarmony & 鸿蒙系统插件",
   "author": "O2Team",
   "homepage": "https://gitee.com/openharmony-sig/taro",
@@ -25,13 +25,13 @@
   },
   "dependencies": {
     "webpack-sources": "^3.2.3",
-    "@tarojs/components": "4.0.0-beta.53",
-    "@tarojs/helper": "4.0.0-beta.53",
-    "@tarojs/runner-utils": "4.0.0-beta.53",
-    "@tarojs/service": "4.0.0-beta.53",
-    "@tarojs/runtime": "4.0.0-beta.53",
-    "@tarojs/taro": "4.0.0-beta.53",
-    "@tarojs/shared": "4.0.0-beta.53"
+    "@tarojs/components": "4.0.0-beta.55",
+    "@tarojs/helper": "4.0.0-beta.55",
+    "@tarojs/runtime": "4.0.0-beta.55",
+    "@tarojs/runner-utils": "4.0.0-beta.55",
+    "@tarojs/service": "4.0.0-beta.55",
+    "@tarojs/shared": "4.0.0-beta.55",
+    "@tarojs/taro": "4.0.0-beta.55"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^25.0.7",
@@ -44,7 +44,7 @@
     "solid-js": "^1.8.16",
     "tslib": "^2.4.0",
     "typescript": "^4.8.2",
-    "rollup-plugin-copy": "4.0.0-beta.53"
+    "rollup-plugin-copy": "4.0.0-beta.55"
   },
   "scripts": {
     "prebuild": "rimraf ./dist",