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

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)
 }
 

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

@@ -8,31 +8,65 @@ import type { TaroAny, TaroStyleType, TaroTextStyleType, TaroTextAreaElement, Ta
 function textStyle (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)
   .fontColor(style.color)
   .fontSize(style.fontSize)
   .fontWeight(style.fontWeight)
@@ -43,7 +77,7 @@ function textStyle (style: TaroStyleType) {
 @Extend(TextArea)
 function textAttr(attr: TaroTextStyleType) {
   .textAlign(attr.textAlign)
-  .maxLines(attr.maxLines)
+  .maxLines(attr.WebkitLineClamp)
 }
 
 function getPlaceholderColor (node: TaroTextAreaElement): string {
@@ -62,6 +96,11 @@ export default struct TaroTextArea {
     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 || ''
+      }
     }
   }
 

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

@@ -1,9 +1,6 @@
-import { bindFocus, bindInstanceToNode, bindScrollTo, initComponentNodeInfo, TaroAny, TaroElement } from '@tarojs/runtime'
-
-import { bindAnimation } from './helper'
+import { TaroAny, TaroElement } from '@tarojs/runtime'
 
 export class DynamicCenter {
-
   install (node: TaroElement, parentNode: TaroElement) {
     if (!parentNode._isCompileMode) return
 
@@ -25,13 +22,7 @@ export class DynamicCenter {
     const dynamicID = node._attrs?._dynamicID
 
     // dynamicID 只是为了更新到精准的 node
-    // 而为了让半编译模板中每个 node 都能响应 api 的调用，因此 initComponentNodeInfo、bindInstanceToNode 和各种 bindAttribute 都需要执行
-    initComponentNodeInfo(component, node)
-    bindInstanceToNode(node, component)
-    bindFocus(node)
-    bindAnimation(node)
-    bindScrollTo(node, component)
-
+    node._instance = component
     node._isCompileMode = true
 
     if (dynamicID) {

package/dist/components-harmony-ets/utils/flexManager.ets

@@ -4,7 +4,7 @@ class FlexManager {
   static flexOptions (node: TaroElement): FlexOptions {
     const hmStyle = node.hmStyle
 
-    let flexDirection = hmStyle.direction
+    let flexDirection = hmStyle.flexDirection
     if (!flexDirection && flexDirection !== 0) {
       flexDirection = hmStyle.display === 'flex' ? FlexDirection.Row : FlexDirection.Column
     }

package/dist/components-harmony-ets/utils/styles.ets

@@ -2,14 +2,15 @@ import { ObjectAssign } from '@tarojs/runtime'
 
 import { TEXT_DEFAULT_STYLE } from './constant/style'
 
-import type { StandardProps } from '@tarojs/components/types'
+import type { StandardProps, TextProps } from '@tarojs/components/types'
 import type { TaroAny, TaroElement, TaroStyleType, TaroTextStyleType, HarmonyType, HarmonyStyle } from '@tarojs/runtime'
 
 export function getFontAttributes (node: TaroElement): TaroTextStyleType {
   const hmStyle = node.hmStyle
+  const attrs: TextProps = node._attrs || {}
 
   const attributes: TaroAny = {
-    maxLines: hmStyle.maxLines || Infinity,
+    WebkitLineClamp: attrs.maxLines || hmStyle.WebkitLineClamp || Infinity,
     // 已做处理的属性
     letterSpacing: hmStyle.letterSpacing,
     textAlign: hmStyle.textAlign,
@@ -25,11 +26,11 @@ export function getNormalAttributes (node: TaroElement): TaroStyleType {
   const _nid = node._nid
   const _attrs: StandardProps = node._attrs || {}
 
-  const transform: TaroAny = hmStyle.transform
-  const transformRotate: HarmonyType.Transform.Rotate = transform?.rotate?.[0]
-  const transformTranslate: HarmonyType.Transform.Translate = transform?.translate?.[0]
-  const transformScale: HarmonyType.Transform.Scale = transform?.scale?.[0]
-  const transformTransform: HarmonyType.Transform.Transform = transform?.transform?.[0]
+  let linearGradient: HarmonyType.LinearGradient | undefined = undefined
+  // 渐变
+  if (hmStyle.backgroundImage?.colors) {
+    linearGradient = hmStyle.backgroundImage
+  }
 
   let normalAttributes: HarmonyStyle = {
     // Flex相关
@@ -40,26 +41,52 @@ export function getNormalAttributes (node: TaroElement): TaroStyleType {
     // 尺寸相关
     width: hmStyle.width,
     height: hmStyle.height,
-    constraintSize: hmStyle.constraintSize,
-    margin: hmStyle.margin,
-    padding: hmStyle.padding,
+    minHeight: hmStyle.minHeight,
+    maxHeight: hmStyle.maxHeight,
+    minWidth: hmStyle.minWidth,
+    maxWidth: hmStyle.maxWidth,
+    marginTop: hmStyle.marginTop,
+    marginRight: hmStyle.marginRight,
+    marginBottom: hmStyle.marginBottom,
+    marginLeft: hmStyle.marginLeft,
+    paddingTop: hmStyle.paddingTop,
+    paddingRight: hmStyle.paddingRight,
+    paddingBottom: hmStyle.paddingBottom,
+    paddingLeft: hmStyle.paddingLeft,
     // 边框相关
     borderStyle: hmStyle.borderStyle,
+    borderTopStyle: hmStyle.borderTopStyle,
+    borderRightStyle: hmStyle.borderRightStyle,
+    borderBottomStyle: hmStyle.borderBottomStyle,
+    borderLeftStyle: hmStyle.borderLeftStyle,
     borderWidth: hmStyle.borderWidth,
+    borderTopWidth: hmStyle.borderTopWidth,
+    borderRightWidth: hmStyle.borderRightWidth,
+    borderBottomWidth: hmStyle.borderBottomWidth,
+    borderLeftWidth: hmStyle.borderLeftWidth,
     borderColor: hmStyle.borderColor,
+    borderTopColor: hmStyle.borderTopColor,
+    borderRightColor: hmStyle.borderRightColor,
+    borderBottomColor: hmStyle.borderBottomColor,
+    borderLeftColor: hmStyle.borderLeftColor,
     borderRadius: hmStyle.borderRadius,
+    borderTopLeftRadius: hmStyle.borderTopLeftRadius,
+    borderTopRightRadius: hmStyle.borderTopRightRadius,
+    borderBottomRightRadius: hmStyle.borderBottomRightRadius,
+    borderBottomLeftRadius: hmStyle.borderBottomLeftRadius,
     // 背景相关
     backgroundColor: hmStyle.backgroundColor,
     backgroundImage: hmStyle.backgroundImage,
-    backgroundImageSize: hmStyle.backgroundImageSize,
+    backgroundSize: hmStyle.backgroundSize,
     backgroundRepeat: hmStyle.backgroundRepeat,
-    backgroundImagePosition: hmStyle.backgroundImagePosition,
-    linearGradient: hmStyle.linearGradient,
+    backgroundPosition: hmStyle.backgroundPosition,
+    linearGradient,
     // 变换相关
-    rotate: transformRotate,
-    translate: transformTranslate,
-    scale: transformScale,
-    transform: transformTransform,
+    transform: hmStyle.transform,
+    transformOrigin: {
+      x: hmStyle.transformOrigin?.x || 0,
+      y: hmStyle.transformOrigin?.y || 0
+    },
     // 通用文本相关
     color: hmStyle.color,
     fontSize: hmStyle.fontSize,
@@ -67,9 +94,9 @@ export function getNormalAttributes (node: TaroElement): TaroStyleType {
     fontWeight: hmStyle.fontWeight,
     fontFamily: hmStyle.fontFamily || TEXT_DEFAULT_STYLE.FONT_FAMILY,
     lineHeight: hmStyle.lineHeight,
-    decoration: hmStyle.decoration,
+    textDecoration: hmStyle.textDecoration,
     // 其他
-    clip: hmStyle.clip,
+    overflow: hmStyle.overflow,
     id: _attrs.id || _nid,
     opacity: hmStyle.opacity,
     // focus: _attrs.focus || false,

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

@@ -25,31 +25,65 @@ export interface VideoUpdateEvent {
 function attrs (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(Video)