@tarojs/plugin-platform-harmony-ets 4.0.0-beta.0 → 4.0.0-beta.2

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

@@ -26,70 +26,128 @@ interface ScrollViewEvent {
 function rowAttrs (style: TaroStyleType) {
   .id(style.id)
   .key(style.id)
-  .padding(style.padding)
-  .margin(style.margin)
-  .height(style.height)
-  .constraintSize({
-    minWidth: style?.constraintSize?.minWidth || style.width,
-    minHeight: style?.constraintSize?.minHeight,
-    maxWidth: style?.constraintSize?.maxWidth,
-    maxHeight: style?.constraintSize?.maxHeight,
-  })
   .flexGrow(style.flexGrow)
   .flexShrink(style.flexShrink)
   .flexBasis(style.flexBasis)
   .alignSelf(style.alignSelf)
+  .padding({
+    top: style.paddingTop,
+    right: style.paddingRight,
+    bottom: style.paddingBottom,
+    left: style.paddingLeft
+  })
+  .margin({
+    top: style.marginTop,
+    right: style.marginRight,
+    bottom: style.marginBottom,
+    left: style.marginLeft
+  })
+  .height(style.height)
+  .constraintSize({
+    minWidth: style.minWidth || style.width,
+    maxWidth: style.maxWidth,
+    minHeight: style.minHeight,
+    maxHeight: style.maxHeight
+  })
   .backgroundColor(style.backgroundColor)
-  .backgroundImage(style.backgroundImage, style.backgroundRepeat)
-  .backgroundImageSize(style.backgroundImageSize)
-  .backgroundImagePosition(style.backgroundImagePosition)
-  .rotate(style.rotate)
-  .scale(style.scale)
-  .translate(style.translate)
-  .transform(style.transform)
-  .borderStyle(style.borderStyle)
-  .borderWidth(style.borderWidth)
-  .borderColor(style.borderColor)
-  .borderRadius(style.borderRadius)
-  .linearGradient(style.linearGradient)
+  .backgroundImage(style.backgroundImage?.src, style.backgroundRepeat)
+  .backgroundImageSize(style.backgroundSize)
+  .backgroundImagePosition(style.backgroundPosition)
+  .borderStyle({
+    top: style.borderTopStyle,
+    right: style.borderRightStyle,
+    bottom: style.borderBottomStyle,
+    left: style.borderLeftStyle
+  })
+  .borderWidth({
+    top: style.borderTopWidth,
+    right: style.borderRightWidth,
+    bottom: style.borderBottomWidth,
+    left: style.borderLeftWidth
+  })
+  .borderColor({
+    top: style.borderTopColor,
+    right: style.borderRightColor,
+    bottom: style.borderBottomColor,
+    left: style.borderLeftColor
+  })
+  .borderRadius({
+    topLeft: style.borderTopLeftRadius,
+    topRight: style.borderTopRightRadius,
+    bottomLeft: style.borderBottomLeftRadius,
+    bottomRight: style.borderBottomRightRadius
+  })
   .zIndex(style.zIndex)
   .opacity(style.opacity)
-  .clip(style.clip)
+  .linearGradient(style.linearGradient)
+  .clip(style.overflow)
+  .rotate({ centerX: style.transformOrigin?.x, centerY: style.transformOrigin?.y, angle: 0 })
+  .scale({ centerX: style.transformOrigin?.x, centerY: style.transformOrigin?.y })
+  .transform(style.transform)
 }
 
 @Extend(Column)
 function columnAttrs (style: TaroStyleType) {
   .id(style.id)
   .key(style.id)
-  .padding(style.padding)
-  .margin(style.margin)
-  .width(style.width)
-  .constraintSize({
-    minWidth: style?.constraintSize?.minWidth,
-    minHeight: style?.constraintSize?.minHeight || style.height,
-    maxWidth: style?.constraintSize?.maxWidth,
-    maxHeight: style?.constraintSize?.maxHeight,
-  })
   .flexGrow(style.flexGrow)
   .flexShrink(style.flexShrink)
   .flexBasis(style.flexBasis)
   .alignSelf(style.alignSelf)
+  .padding({
+    top: style.paddingTop,
+    right: style.paddingRight,
+    bottom: style.paddingBottom,
+    left: style.paddingLeft
+  })
+  .margin({
+    top: style.marginTop,
+    right: style.marginRight,
+    bottom: style.marginBottom,
+    left: style.marginLeft
+  })
+  .width(style.width)
+  .constraintSize({
+    minWidth: style.minWidth,
+    maxWidth: style.maxWidth,
+    minHeight: style.minHeight || style.height,
+    maxHeight: style.maxHeight
+  })
   .backgroundColor(style.backgroundColor)
-  .backgroundImage(style.backgroundImage, style.backgroundRepeat)
-  .backgroundImageSize(style.backgroundImageSize)
-  .backgroundImagePosition(style.backgroundImagePosition)
-  .rotate(style.rotate)
-  .scale(style.scale)
-  .translate(style.translate)
-  .transform(style.transform)
-  .borderStyle(style.borderStyle)
-  .borderWidth(style.borderWidth)
-  .borderColor(style.borderColor)
-  .borderRadius(style.borderRadius)
-  .linearGradient(style.linearGradient)
+  .backgroundImage(style.backgroundImage?.src, style.backgroundRepeat)
+  .backgroundImageSize(style.backgroundSize)
+  .backgroundImagePosition(style.backgroundPosition)
+  .borderStyle({
+    top: style.borderTopStyle,
+    right: style.borderRightStyle,
+    bottom: style.borderBottomStyle,
+    left: style.borderLeftStyle
+  })
+  .borderWidth({
+    top: style.borderTopWidth,
+    right: style.borderRightWidth,
+    bottom: style.borderBottomWidth,
+    left: style.borderLeftWidth
+  })
+  .borderColor({
+    top: style.borderTopColor,
+    right: style.borderRightColor,
+    bottom: style.borderBottomColor,
+    left: style.borderLeftColor
+  })
+  .borderRadius({
+    topLeft: style.borderTopLeftRadius,
+    topRight: style.borderTopRightRadius,
+    bottomLeft: style.borderBottomLeftRadius,
+    bottomRight: style.borderBottomRightRadius
+  })
   .zIndex(style.zIndex)
   .opacity(style.opacity)
-  .clip(style.clip)
+  .linearGradient(style.linearGradient)
+  .clip(style.overflow)
+  .rotate({ centerX: style.transformOrigin?.x, centerY: style.transformOrigin?.y, angle: 0 })
+  .scale({ centerX: style.transformOrigin?.x, centerY: style.transformOrigin?.y })
+  .transform(style.transform)
 }
 
 
@@ -110,7 +168,7 @@ function getScrollable (node: TaroScrollViewElement) {
 }
 
 function handleScrollEvent (node: TaroScrollViewElement, eventName = 'scroll', xOffset?: number, yOffset?: number) {
-  const currentOffset: ScrollViewCurrentOffset = node.scroller.currentOffset()
+  const currentOffset = node.scroller.currentOffset() as ScrollViewCurrentOffset
   const currentXOffset = currentOffset.xOffset
   const currentYOffset = currentOffset.yOffset
   const value: ScrollViewEvent = {

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

@@ -15,31 +15,65 @@ interface SliderAttrs {
 function style (style: TaroStyleType) {
   .id(style.id)
   .key(style.id)
-  .padding(style.padding)
-  .margin(style.margin)
-  .width(style.width)
-  .height(style.height)
-  .constraintSize(style.constraintSize)
   .flexGrow(style.flexGrow)
   .flexShrink(style.flexShrink)
   .flexBasis(style.flexBasis)
   .alignSelf(style.alignSelf)
+  .padding({
+    top: style.paddingTop,
+    right: style.paddingRight,
+    bottom: style.paddingBottom,
+    left: style.paddingLeft
+  })
+  .margin({
+    top: style.marginTop,
+    right: style.marginRight,
+    bottom: style.marginBottom,
+    left: style.marginLeft
+  })
+  .width(style.width)
+  .height(style.height)
+  .constraintSize({
+    minWidth: style.minWidth,
+    maxWidth: style.maxWidth,
+    minHeight: style.minHeight,
+    maxHeight: style.maxHeight
+  })
   .backgroundColor(style.backgroundColor)
-  .backgroundImage(style.backgroundImage, style.backgroundRepeat)
-  .backgroundImageSize(style.backgroundImageSize)
-  .backgroundImagePosition(style.backgroundImagePosition)
-  .rotate(style.rotate)
-  .scale(style.scale)
-  .translate(style.translate)
-  .transform(style.transform)
-  .borderStyle(style.borderStyle)
-  .borderWidth(style.borderWidth)
-  .borderColor(style.borderColor)
-  .borderRadius(style.borderRadius)
-  .linearGradient(style.linearGradient)
+  .backgroundImage(style.backgroundImage?.src, style.backgroundRepeat)
+  .backgroundImageSize(style.backgroundSize)
+  .backgroundImagePosition(style.backgroundPosition)
+  .borderStyle({
+    top: style.borderTopStyle,
+    right: style.borderRightStyle,
+    bottom: style.borderBottomStyle,
+    left: style.borderLeftStyle
+  })
+  .borderWidth({
+    top: style.borderTopWidth,
+    right: style.borderRightWidth,
+    bottom: style.borderBottomWidth,
+    left: style.borderLeftWidth
+  })
+  .borderColor({
+    top: style.borderTopColor,
+    right: style.borderRightColor,
+    bottom: style.borderBottomColor,
+    left: style.borderLeftColor
+  })
+  .borderRadius({
+    topLeft: style.borderTopLeftRadius,
+    topRight: style.borderTopRightRadius,
+    bottomLeft: style.borderBottomLeftRadius,
+    bottomRight: style.borderBottomRightRadius
+  })
   .zIndex(style.zIndex)
   .opacity(style.opacity)
-  .clip(style.clip)
+  .linearGradient(style.linearGradient)
+  .clip(style.overflow)
+  .rotate({ centerX: style.transformOrigin?.x, centerY: style.transformOrigin?.y, angle: 0 })
+  .scale({ centerX: style.transformOrigin?.x, centerY: style.transformOrigin?.y })
+  .transform(style.transform)
 }
 
 @Extend(Slider)
@@ -75,6 +109,11 @@ export default struct TaroSlider {
     if (this.node) {
       this.value = this.node.value
       this.node._instance = this
+
+      if (!this.node._isInit) {
+        this.node._isInit = true
+        this.node._reset = this.node.value || 0
+      }
     }
   }
 

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

@@ -19,31 +19,65 @@ interface SwiperAttrs {
 function swiperStyle (style: TaroStyleType) {
   .id(style.id)
   .key(style.id)
-  .padding(style.padding)
-  .margin(style.margin)
-  .width(style.width)
-  .height(style.height)
-  .constraintSize(style.constraintSize)
   .flexGrow(style.flexGrow)
   .flexShrink(style.flexShrink)
   .flexBasis(style.flexBasis)
   .alignSelf(style.alignSelf)
+  .padding({
+    top: style.paddingTop,
+    right: style.paddingRight,
+    bottom: style.paddingBottom,
+    left: style.paddingLeft
+  })
+  .margin({
+    top: style.marginTop,
+    right: style.marginRight,
+    bottom: style.marginBottom,
+    left: style.marginLeft
+  })
+  .width(style.width)
+  .height(style.height)
+  .constraintSize({
+    minWidth: style.minWidth,
+    maxWidth: style.maxWidth,
+    minHeight: style.minHeight,
+    maxHeight: style.maxHeight
+  })
   .backgroundColor(style.backgroundColor)
-  .backgroundImage(style.backgroundImage, style.backgroundRepeat)
-  .backgroundImageSize(style.backgroundImageSize)
-  .backgroundImagePosition(style.backgroundImagePosition)
-  .rotate(style.rotate)
-  .scale(style.scale)
-  .translate(style.translate)
-  .transform(style.transform)
-  .borderStyle(style.borderStyle)
-  .borderWidth(style.borderWidth)
-  .borderColor(style.borderColor)
-  .borderRadius(style.borderRadius)
-  .linearGradient(style.linearGradient)
+  .backgroundImage(style.backgroundImage?.src, style.backgroundRepeat)
+  .backgroundImageSize(style.backgroundSize)
+  .backgroundImagePosition(style.backgroundPosition)
+  .borderStyle({
+    top: style.borderTopStyle,
+    right: style.borderRightStyle,
+    bottom: style.borderBottomStyle,
+    left: style.borderLeftStyle
+  })
+  .borderWidth({
+    top: style.borderTopWidth,
+    right: style.borderRightWidth,
+    bottom: style.borderBottomWidth,
+    left: style.borderLeftWidth
+  })
+  .borderColor({
+    top: style.borderTopColor,
+    right: style.borderRightColor,
+    bottom: style.borderBottomColor,
+    left: style.borderLeftColor
+  })
+  .borderRadius({
+    topLeft: style.borderTopLeftRadius,
+    topRight: style.borderTopRightRadius,
+    bottomLeft: style.borderBottomLeftRadius,
+    bottomRight: style.borderBottomRightRadius
+  })
   .zIndex(style.zIndex)
   .opacity(style.opacity)
-  .clip(style.clip)
+  .linearGradient(style.linearGradient)
+  .clip(style.overflow)
+  .rotate({ centerX: style.transformOrigin?.x, centerY: style.transformOrigin?.y, angle: 0 })
+  .scale({ centerX: style.transformOrigin?.x, centerY: style.transformOrigin?.y })
+  .transform(style.transform)
 }
 
 @Extend(Swiper)

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

@@ -12,31 +12,65 @@ interface SwitchAttrs {
 function styles (style: TaroStyleType) {
   .id(style.id)
   .key(style.id)
-  .padding(style.padding)
-  .margin(style.margin)
-  .width(style.width)
-  .height(style.height)
-  .constraintSize(style.constraintSize)
   .flexGrow(style.flexGrow)
   .flexShrink(style.flexShrink)
   .flexBasis(style.flexBasis)
   .alignSelf(style.alignSelf)
+  .padding({
+    top: style.paddingTop,
+    right: style.paddingRight,
+    bottom: style.paddingBottom,
+    left: style.paddingLeft
+  })
+  .margin({
+    top: style.marginTop,
+    right: style.marginRight,
+    bottom: style.marginBottom,
+    left: style.marginLeft
+  })
+  .width(style.width)
+  .height(style.height)
+  .constraintSize({
+    minWidth: style.minWidth,
+    maxWidth: style.maxWidth,
+    minHeight: style.minHeight,
+    maxHeight: style.maxHeight
+  })
   .backgroundColor(style.backgroundColor)
-  .backgroundImage(style.backgroundImage, style.backgroundRepeat)
-  .backgroundImageSize(style.backgroundImageSize)
-  .backgroundImagePosition(style.backgroundImagePosition)
-  .rotate(style.rotate)
-  .scale(style.scale)
-  .translate(style.translate)
-  .transform(style.transform)
-  .borderStyle(style.borderStyle)
-  .borderWidth(style.borderWidth)
-  .borderColor(style.borderColor)
-  .borderRadius(style.borderRadius)
-  .linearGradient(style.linearGradient)
+  .backgroundImage(style.backgroundImage?.src, style.backgroundRepeat)
+  .backgroundImageSize(style.backgroundSize)
+  .backgroundImagePosition(style.backgroundPosition)
+  .borderStyle({
+    top: style.borderTopStyle,
+    right: style.borderRightStyle,
+    bottom: style.borderBottomStyle,
+    left: style.borderLeftStyle
+  })
+  .borderWidth({
+    top: style.borderTopWidth,
+    right: style.borderRightWidth,
+    bottom: style.borderBottomWidth,
+    left: style.borderLeftWidth
+  })
+  .borderColor({
+    top: style.borderTopColor,
+    right: style.borderRightColor,
+    bottom: style.borderBottomColor,
+    left: style.borderLeftColor
+  })
+  .borderRadius({
+    topLeft: style.borderTopLeftRadius,
+    topRight: style.borderTopRightRadius,
+    bottomLeft: style.borderBottomLeftRadius,
+    bottomRight: style.borderBottomRightRadius
+  })
   .zIndex(style.zIndex)
   .opacity(style.opacity)
-  .clip(style.clip)
+  .linearGradient(style.linearGradient)
+  .clip(style.overflow)
+  .rotate({ centerX: style.transformOrigin?.x, centerY: style.transformOrigin?.y, angle: 0 })
+  .scale({ centerX: style.transformOrigin?.x, centerY: style.transformOrigin?.y })
+  .transform(style.transform)
 }
 
 @Extend(Toggle)
@@ -56,28 +90,45 @@ function themeStyles(isDisabled: boolean) {
   .opacity(isDisabled ? 0.4 : 1)
 }
 
-@Builder
-export default function TaroSwitch (node: TaroSwitchElement) {
-  Toggle({
-    type: node._attrs.type !== 'checkbox' ? ToggleType.Switch : ToggleType.Checkbox,
-    isOn: node.checked,
-  })
-    .styles(getNormalAttributes(node))
-    .attrs(getAttributes(node))
-    .themeStyles(!!node._attrs.disabled)
-    .onChange((isOn: boolean) => {
-      if (!node?._attrs.disabled) {
-        const event: TaroEvent = createTaroEvent('change', { detail: { value: isOn } }, node)
+@Component
+export default struct TaroSwitch {
+  node: TaroSwitchElement | null = null
+
+  aboutToAppear () {
+    if (this.node && !this.node._isInit) {
+      this.node._isInit = true
+      this.node._reset = this.node.checked || false
+    }
+  }
 
-        node.updateCheckedValue(isOn)
-        eventHandler(event, 'change', node)
-      } else {
-        node.updateComponent()
-      }
-    })
-    .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', node), node, ['click']))
-    .onAreaChange(getComponentEventCallback(node, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => {
-      node._nodeInfo.areaInfo = res[1]
-    }))
-    .onVisibleAreaChange(getNodeThresholds(node) || [0.0, 1.0], getComponentEventCallback(node, VISIBLE_CHANGE_EVENT_NAME))
+  build () {
+    if (this.node) {
+      Toggle({
+        type: this.node._attrs.type !== 'checkbox' ? ToggleType.Switch : ToggleType.Checkbox,
+        isOn: this.node.checked,
+      })
+        .styles(getNormalAttributes(this.node))
+        .attrs(getAttributes(this.node))
+        .themeStyles(!!this.node._attrs.disabled)
+        .onChange((isOn: boolean) => {
+          if (this.node) {
+            if (!this.node?._attrs.disabled) {
+              const event: TaroEvent = createTaroEvent('change', { detail: { value: isOn } }, this.node)
+      
+              this.node.updateCheckedValue(isOn)
+              eventHandler(event, 'change', this.node)
+            } else {
+              this.node.updateComponent()
+            }
+          }
+        })
+        .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', this.node), this.node, ['click']))
+        .onAreaChange(getComponentEventCallback(this.node, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => {
+          if (this.node) {
+            this.node._nodeInfo.areaInfo = res[1]
+          }
+        }))
+        .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))
+    }
+  }
 }

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

@@ -8,30 +8,67 @@ import type { TaroButtonElement, TaroElement, TaroTextElement, TaroAny, TaroText
 
 @Extend(Text)
 function textNormalStyle (style: TaroStyleType) {
-  .padding(style.padding)
-  .margin(style.margin)
-  .width(style.width)
-  .height(style.height)
-  .constraintSize(style.constraintSize)
+  .id(style.id)
+  .key(style.id)
   .flexGrow(style.flexGrow)
   .flexShrink(style.flexShrink)
   .flexBasis(style.flexBasis)
   .alignSelf(style.alignSelf)
+  .padding({
+    top: style.paddingTop,
+    right: style.paddingRight,
+    bottom: style.paddingBottom,
+    left: style.paddingLeft
+  })
+  .margin({
+    top: style.marginTop,
+    right: style.marginRight,
+    bottom: style.marginBottom,
+    left: style.marginLeft
+  })
+  .width(style.width)
+  .height(style.height)
+  .constraintSize({
+    minWidth: style.minWidth,
+    maxWidth: style.maxWidth,
+    minHeight: style.minHeight,
+    maxHeight: style.maxHeight
+  })
   .backgroundColor(style.backgroundColor)
-  .backgroundImage(style.backgroundImage, style.backgroundRepeat)
-  .backgroundImageSize(style.backgroundImageSize)
-  .backgroundImagePosition(style.backgroundImagePosition)
-  .rotate(style.rotate)
-  .scale(style.scale)
-  .translate(style.translate)
-  .transform(style.transform)
-  .borderStyle(style.borderStyle)
-  .borderWidth(style.borderWidth)
-  .borderColor(style.borderColor)
-  .borderRadius(style.borderRadius)
-  .linearGradient(style.linearGradient)
+  .backgroundImage(style.backgroundImage?.src, style.backgroundRepeat)
+  .backgroundImageSize(style.backgroundSize)
+  .backgroundImagePosition(style.backgroundPosition)
+  .borderStyle({
+    top: style.borderTopStyle,
+    right: style.borderRightStyle,
+    bottom: style.borderBottomStyle,
+    left: style.borderLeftStyle
+  })
+  .borderWidth({
+    top: style.borderTopWidth,
+    right: style.borderRightWidth,
+    bottom: style.borderBottomWidth,
+    left: style.borderLeftWidth
+  })
+  .borderColor({
+    top: style.borderTopColor,
+    right: style.borderRightColor,
+    bottom: style.borderBottomColor,
+    left: style.borderLeftColor
+  })
+  .borderRadius({
+    topLeft: style.borderTopLeftRadius,
+    topRight: style.borderTopRightRadius,
+    bottomLeft: style.borderBottomLeftRadius,
+    bottomRight: style.borderBottomRightRadius
+  })
   .zIndex(style.zIndex)
-  .clip(style.clip)
+  .opacity(style.opacity)
+  .linearGradient(style.linearGradient)
+  .clip(style.overflow)
+  .rotate({ centerX: style.transformOrigin?.x, centerY: style.transformOrigin?.y, angle: 0 })
+  .scale({ centerX: style.transformOrigin?.x, centerY: style.transformOrigin?.y })
+  .transform(style.transform)
 }
 
 @Extend(Text)
@@ -46,7 +83,7 @@ function textNormalFontStyle (style: TaroStyleType) {
   .fontFamily(style.fontFamily)
   .lineHeight(style.lineHeight)
   .decoration({
-    type: style.decoration,
+    type: style.textDecoration,
     color: style.color
   })
 }
@@ -55,7 +92,7 @@ function textNormalFontStyle (style: TaroStyleType) {
 function textSpecialFontStyle(attr: TaroTextStyleType) {
   .textAlign(attr.textAlign)
   .textOverflow(attr.textOverflow)
-  .maxLines(attr.maxLines)
+  .maxLines(attr.WebkitLineClamp)
   .letterSpacing(attr.letterSpacing)
 }
 
@@ -82,12 +119,12 @@ export default function TaroText (node: TaroTextElement) {
   } else {
     Text(node.textContent)
     .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', node), node, ['click']))
-    .onAreaChange(getComponentEventCallback(node, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => {
-      node._nodeInfo.areaInfo = res[1]
-    }))
     .textNormalStyle(getNormalAttributes(node))
     .textNormalFontStyle(getNormalAttributes(node))
     .textSpecialFontStyle(getFontAttributes(node))
     .onVisibleAreaChange(getNodeThresholds(node) || [0.0, 1.0], getComponentEventCallback(node, VISIBLE_CHANGE_EVENT_NAME))
+    .onAreaChange(getComponentEventCallback(node, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => {
+      node._nodeInfo.areaInfo = res[1]
+    }))
   }
 }