@tarojs/plugin-platform-harmony-ets 3.7.0-alpha.27 → 4.0.0-alpha.10

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

@@ -1,347 +1,154 @@
 /* eslint-disable accessor-pairs */
 // @ts-nocheck
-import matrix4 from '@ohos.matrix4'
-
-import { ObjectAssign, TaroAny } from '../../'
-import { FlexManager, getNodeMarginOrPaddingData, getUnit } from './util'
+import { BORDER_STYLE_MAP, FlexManager } from './util'
 
 import type { HarmonyStyle, HarmonyType, TaroStyleType, TaroTextStyleType } from './type'
 
 export { HarmonyStyle, HarmonyType, TaroStyleType, TaroTextStyleType }
 
 export default class StyleSheet {
-
   public hmStyle: HarmonyStyle = {}
 
   get display () {
     return this.hmStyle.display
   }
 
-  set display (value: string) {
-    this.hmStyle.display = value
-  }
-
   get position () {
     return this.hmStyle.position
   }
 
-  set position (value: string) {
-    this.hmStyle.position = value
-  }
-
   get padding () {
-    const { top = 0, right = 0, bottom = 0, left = 0 } = this.hmStyle.padding || {}
-    return `${top} ${right} ${bottom} ${left}`
-  }
-
-  set padding (value: string) {
-    this.hmStyle.padding = getNodeMarginOrPaddingData(value)
-  }
-
-  set _padding (value: Margin) {
-    this.hmStyle.padding = value
+    return `${this.hmStyle.paddingTop} ${this.hmStyle.paddingRight} ${this.hmStyle.paddingBottom} ${this.hmStyle.paddingLeft}`
   }
 
   get paddingTop () {
-    return this.hmStyle.padding?.top
-  }
-
-  set paddingTop (value: string) {
-    this.hmStyle.padding = ObjectAssign({}, this.hmStyle.padding, { top: getUnit(value) })
+    return this.hmStyle.paddingTop
   }
 
   get paddingBottom () {
-    return this.hmStyle.padding?.bottom
-  }
-
-  set paddingBottom (value: string) {
-    this.hmStyle.padding = ObjectAssign({}, this.hmStyle.padding, { bottom: getUnit(value) })
-  }
-
-  get paddingRight () {
-    return this.hmStyle.padding?.right
-  }
-
-  set paddingRight (value: string) {
-    this.hmStyle.padding = ObjectAssign({}, this.hmStyle.padding, { right: getUnit(value) })
+    return this.hmStyle.paddingBottom
   }
 
   get paddingLeft () {
-    return this.hmStyle.padding?.left
+    return this.hmStyle.paddingLeft
   }
 
-  set paddingLeft (value: string) {
-    this.hmStyle.padding = ObjectAssign({}, this.hmStyle.padding, { left: getUnit(value) })
+  get paddingRight () {
+    return this.hmStyle.paddingRight
   }
 
   get margin () {
-    const { top = 0, right = 0, bottom = 0, left = 0 } = this.hmStyle.margin || {}
-    return `${top} ${right} ${bottom} ${left}`
-  }
-
-  set margin (value: string) {
-    this.hmStyle.margin = getNodeMarginOrPaddingData(value)
-  }
-
-  set _margin (value: Margin) {
-    this.hmStyle.margin = value
+    return `${this.hmStyle.marginTop} ${this.hmStyle.marginRight} ${this.hmStyle.marginBottom} ${this.hmStyle.marginLeft}`
   }
 
   get marginTop () {
-    return this.hmStyle.margin?.top
-  }
-
-  set marginTop (value: string) {
-    this.hmStyle.margin = ObjectAssign({}, this.hmStyle.margin, { top: getUnit(value) })
+    return this.hmStyle.marginTop
   }
 
   get marginBottom () {
-    return this.hmStyle.margin?.bottom
-  }
-
-  set marginBottom (value: string) {
-    this.hmStyle.margin = ObjectAssign({}, this.hmStyle.margin, { bottom: getUnit(value) })
-  }
-
-  get marginRight () {
-    return this.hmStyle.margin?.right
-  }
-
-  set marginRight (value: string) {
-    this.hmStyle.margin = ObjectAssign({}, this.hmStyle.margin, { right: getUnit(value) })
+    return this.hmStyle.marginBottom
   }
 
   get marginLeft () {
-    return this.hmStyle.margin?.left
+    return this.hmStyle.marginLeft
   }
 
-  set marginLeft (value: string) {
-    this.hmStyle.margin = ObjectAssign({}, this.hmStyle.margin, { left: getUnit(value) })
+  get marginRight () {
+    return this.hmStyle.marginRight
   }
 
   get top () {
     return this.hmStyle.top
   }
 
-  set top (value: string | number) {
-    this.hmStyle.top = getUnit(value)
-  }
-
-  set _top (value: Length) {
-    this.hmStyle.top = value
-  }
-
   get left () {
     return this.hmStyle.left
   }
 
-  set left (value: string | number) {
-    this.hmStyle.left = getUnit(value)
+  get right () {
+    return this.hmStyle.right
   }
 
-  set _left (value: Length) {
-    this.hmStyle.left = value
+  get bottom () {
+    return this.hmStyle.bottom
   }
 
-  get flexBasis () {
-    return this.hmStyle.flexBasis
+  get flex () {
+    return `${this.hmStyle.flexGrow} ${this.hmStyle.flexShrink} ${this.hmStyle.flexBasis}`
   }
 
-  set flexBasis (value: string) {
-    this.hmStyle.flexBasis = getUnit(value)
-  }
-
-  set _flexBasis (value: number | string) {
-    this.hmStyle.flexBasis = value
+  get flexBasis () {
+    return this.hmStyle.flexBasis
   }
 
   get flexGrow () {
     return Number(this.hmStyle.flexGrow)
   }
 
-  set flexGrow (value: number | string) {
-    this.hmStyle.flexGrow = Number(value)
-  }
-
-  set _flexGrow (value: number) {
-    this.hmStyle.flexGrow = value
-  }
-
   get flexShrink () {
     return Number(this.hmStyle.flexShrink)
   }
 
-  set flexShrink (value: number | string) {
-    this.hmStyle.flexShrink = Number(value)
-  }
-
-  set _flexShrink (value: number) {
-    this.hmStyle.flexShrink = value
-  }
-
   get alignSelf () {
     return FlexManager.reverseItemAlign(this.hmStyle.alignSelf)
   }
 
-  set alignSelf (value: string | number) {
-    this.hmStyle.alignSelf = FlexManager.itemAlign(value)
-  }
-
-  set _alignSelf (value: ItemAlign) {
-    this.hmStyle.alignSelf = value
-  }
-
-  set _flexOptions (value) {
-    if (typeof value.direction !== 'undefined') {
-      this.hmStyle.direction = value.direction
-    }
-    if (typeof value.justifyContent !== 'undefined') {
-      this.hmStyle.justifyContent = value.justifyContent
-    }
-    if (typeof value.alignItems !== 'undefined') {
-      this.hmStyle.alignItems = value.alignItems
-    }
-  }
-
   get flexDirection () {
-    return FlexManager.reverseDirection(this.hmStyle.direction)
-  }
-
-  set flexDirection (value: string) {
-    this.hmStyle.direction = FlexManager.direction(value)
-  }
-
-  set _direction (value: FlexDirection) {
-    this.hmStyle.direction = value
+    return FlexManager.reverseDirection(this.hmStyle.flexDirection)
   }
 
   get justifyContent () {
     return FlexManager.reverseFlexAlign(this.hmStyle.justifyContent)
   }
 
-  set justifyContent (value: string) {
-    this.hmStyle.justifyContent = FlexManager.flexAlign(value)
-  }
-
-  set _justifyContent (value: FlexAlign) {
-    this.hmStyle.justifyContent = value
-  }
-
   get alignItems () {
     return FlexManager.reverseItemAlign(this.hmStyle.alignItems)
   }
 
-  set alignItems (value: string) {
-    this.hmStyle.alignItems = FlexManager.itemAlign(value)
+  get alignContent () {
+    return FlexManager.reverseFlexAlign(this.hmStyle.alignContent)
   }
 
-  set _alignItems (value: ItemAlign) {
-    this.hmStyle.alignItems = value
+  get flexWrap () {
+    return FlexManager.reverseFlexWrap(this.hmStyle.flexWrap)
   }
 
   get width () {
     return this.hmStyle.width
   }
 
-  set width (value: string | number) {
-    this.hmStyle.width = getUnit(value)
-  }
-
-  set _width (value: Length) {
-    this.hmStyle.width = value
-  }
-
   get height () {
     return this.hmStyle.height
   }
 
-  set height (value: string | number) {
-    this.hmStyle.height = getUnit(value)
-  }
-
-  set _height (value: Length) {
-    this.hmStyle.height = value
-  }
-  
-  set _constraintSize(value: ConstraintSizeOptions) {
-    this.hmStyle.constraintSize = value
-  }
-
   get minHeight () {
-    return this.hmStyle.constraintSize?.minHeight
-  }
-
-  set minHeight (value: string | number) {
-    this._minHeight = getUnit(value)
+    return this.hmStyle.minHeight
   }
 
   get maxHeight () {
-    return this.hmStyle.constraintSize?.maxHeight
-  }
-
-  set maxHeight (value: string | number) {
-    this._maxHeight = getUnit(value)
+    return this.hmStyle.maxHeight
   }
 
   get minWidth () {
-    return this.hmStyle.constraintSize?.minWidth
-  }
-
-  set minWidth (value: string | number) {
-    this._minWidth = getUnit(value)
+    return this.hmStyle.minWidth
   }
 
   get maxWidth () {
-    return this.hmStyle.constraintSize?.maxWidth
-  }
-
-  set maxWidth (value: string | number) {
-    this._maxWidth = getUnit(value)
+    return this.hmStyle.maxWidth
   }
 
   get background () {
     return `${this.backgroundColor} ${this.backgroundImage} ${this.backgroundRepeat} ${this.backgroundSize}`.trim()
   }
 
-  // TODO: 未实现
-  set background (value: string) {
-    
-  }
-
-  set _background (value: TaroAny) {
-    const _backgroundImage: HarmonyType.Background.backgroundImage = value?.image?.[0]
-    if (_backgroundImage) {
-      this.hmStyle.backgroundImage = _backgroundImage.src
-      if (_backgroundImage.repeat) {
-        this.hmStyle.backgroundRepeat = _backgroundImage.repeat
-      }
-    }
-    this.hmStyle.backgroundImageSize = value?.size?.[0]
-    this.hmStyle.backgroundColor = this.hmStyle.backgroundImage ? null : value?.color
-  }
-
   get backgroundColor () {
     return this.hmStyle.backgroundColor
   }
 
-  set backgroundColor (value: string) {
-    this.hmStyle.backgroundColor = value
-  }
-
   get backgroundImage () {
     return this.hmStyle.backgroundImage && `url(${this.hmStyle.backgroundImage})`
   }
 
-  set backgroundImage (value: string) {
-    if (typeof value === 'string' && value.indexOf('url(') !== -1 && value.indexOf(')') !== -1) {
-      // 如果包含 url()，则说明是 background-image 属性
-      const match = value.match(new RegExp('url\\([\'"]?(.*?)[\'"]?\\)'))
-      if (match) {
-        this.hmStyle.backgroundImage = match[1]
-      }
-    }
-  }
-
   get backgroundRepeat () {
     if (this.hmStyle.backgroundRepeat) {
       switch (this.hmStyle.backgroundRepeat) {
@@ -349,34 +156,33 @@ export default class StyleSheet {
         case ImageRepeat.Y: return 'repeat-y'; break
         case ImageRepeat.XY: return 'repeat'; break
         case ImageRepeat.NoRepeat: return 'no-repeat'; break
-      } 
-    }
-  }
-
-  set backgroundRepeat (value: string) {
-    if (typeof value === 'string') {
-      switch (value) {
-        case 'repeat-x': this.hmStyle.backgroundRepeat = ImageRepeat.X; break
-        case 'repeat-y': this.hmStyle.backgroundRepeat = ImageRepeat.Y; break
-        case 'no-repeat': this.hmStyle.backgroundRepeat = ImageRepeat.NoRepeat; break
-        default: this.hmStyle.backgroundRepeat = ImageRepeat.XY; break
       }
     }
   }
 
   get backgroundSize () {
     if (this.hmStyle.backgroundImage) {
-      return [this.hmStyle.backgroundImageSize.width, this.hmStyle.backgroundImageSize.height].join(' ')
+      return [this.hmStyle.backgroundSize.width, this.hmStyle.backgroundSize.height].join(' ')
     }
   }
 
-  set backgroundSize (value: string) {
-    if (typeof value === 'string') {
-      const sizes = value.split(' ')
-      if (sizes.length === 1) {
-        this.hmStyle.backgroundImageSize = { width: getUnit(sizes[0]) }
-      } else if (sizes.length === 2) {
-        this.hmStyle.backgroundImageSize = { width: getUnit(sizes[0]), height: getUnit(sizes[1]) }
+  get backgroundPosition () {
+    if (this.hmStyle.backgroundPosition) {
+      switch (this.hmStyle.backgroundPosition) {
+        case Alignment.TopStart: return 'left top'; break
+        case Alignment.Top: return 'center top'; break
+        case Alignment.TopEnd: return 'right top'; break
+        case Alignment.Start: return 'left center'; break
+        case Alignment.Center: return 'center center'; break
+        case Alignment.End: return 'right center'; break
+        case Alignment.BottomStart: return 'left bottom'; break
+        case Alignment.Bottom: return 'center bottom'; break
+        case Alignment.BottomEnd: return 'right bottom'; break
+        default: {
+          if (this.hmStyle.backgroundPosition) {
+            return [this.hmStyle.backgroundPosition, this.hmStyle.backgroundPosition.y].join(' ')
+          }
+        }
       }
     }
   }
@@ -385,99 +191,100 @@ export default class StyleSheet {
     return [this.borderWidth, this.borderStyle, this.bordercolor].join(' ')
   }
 
-  set border (value: string) {
-    const [width, style, color] = value.split(' ')
-    this.hmStyle.borderWidth = getUnit(width)
-    this.hmStyle.borderStyle = BORDERhmStyleYLE_MAP.get(style)
-    this.hmStyle.borderColor = color
-  }
-
   get borderWidth () {
     return this.hmStyle.borderWidth
   }
 
-  set borderWidth (value: string) {
-    this.hmStyle.borderWidth = getUnit(value)
+  get borderLeftWidth () {
+    return this.hmStyle.borderLeftWidth
   }
 
-  set _borderWidth (value: Length | EdgeWidths) {
-    this.hmStyle.borderWidth = value
+  get borderRightWidth () {
+    return this.hmStyle.borderRightWidth
+  }
+
+  get borderTopWidth () {
+    return this.hmStyle.borderTopWidth
+  }
+
+  get borderBottomWidth () {
+    return this.hmStyle.borderBottomWidth
   }
 
   get borderColor () {
     return this.hmStyle.borderColor
   }
 
-  set borderColor (value: string) {
-    this.hmStyle.borderColor = value
+  get borderLeftColor () {
+    return this.hmStyle.borderLeftColor
   }
 
-  set _borderColor (value: ResourceColor | EdgeColors) {
-    this.hmStyle.borderColor = value
+  get borderRightColor () {
+    return this.hmStyle.borderRightColor
   }
 
-  get borderStyle () {
-    return BORDERhmStyleYLE_MAP.reverse(this.hmStyle.borderStyle)
+  get borderTopColor () {
+    return this.hmStyle.borderTopColor
   }
 
-  set borderStyle (value: string) {
-    this.hmStyle.borderStyle = BORDERhmStyleYLE_MAP.get(value)
+  get borderBottomColor () {
+    return this.hmStyle.borderBottomColor
   }
 
-  set _borderStyle (value: BorderStyle | EdgeStyles) {
-    this.hmStyle.borderStyle = value
+  get borderStyle () {
+    return BORDER_STYLE_MAP.reverse(this.hmStyle.borderStyle)
   }
-  
-  get borderRadius () {
-    return this.hmStyle.borderRadius
+
+  get borderLeftStyle () {
+    return BORDER_STYLE_MAP.reverse(this.hmStyle.borderLeftStyle)
   }
 
-  set borderRadius (value: string) {
-    this.hmStyle.borderRadius = getUnit(value)
+  get borderRightStyle () {
+    return BORDER_STYLE_MAP.reverse(this.hmStyle.borderRightStyle)
   }
 
-  set _borderRadius (value: Length | BorderRadiuses) {
-    this.hmStyle.borderRadius = value
+  get borderTopStyle () {
+    return BORDER_STYLE_MAP.reverse(this.hmStyle.borderTopStyle)
   }
 
-  get zIndex (): number {
-    return Number(this.hmStyle.zIndex)
+  get borderBottomStyle () {
+    return BORDER_STYLE_MAP.reverse(this.hmStyle.borderBottomStyle)
   }
 
-  set zIndex (value: string) {
-    this.hmStyle.zIndex = Number(value)
+  get borderRadius () {
+    return this.hmStyle.borderRadius
   }
 
-  get opacity () {
-    return this.hmStyle.opacity
+  get borderTopLeftRadius () {
+    return this.hmStyle.borderTopLeftRadius
   }
 
-  set opacity (value: string) {
-    this.hmStyle.opacity = Number(value)
+  get borderTopRightRadius () {
+    return this.hmStyle.borderTopRightRadius
   }
 
-  get overflow () {
-    return this.hmStyle.clip ? 'hidden' : 'visible'
+  get borderBottomLeftRadius () {
+    return this.hmStyle.borderBottomLeftRadius
   }
 
-  set overflow (value: string) {
-    this.hmStyle.clip = value === 'hidden'
+  get borderBottomRightRadius () {
+    return this.hmStyle.borderBottomRightRadius
   }
 
-  set _overflow (value: boolean) {
-    this.hmStyle.clip = value
+  get zIndex () {
+    return this.hmStyle.zIndex
   }
 
-  get focus () {
-    return !!this.hmStyle.focus
+  get opacity () {
+    return this.hmStyle.opacity
   }
 
-  set focus (value: boolean) {
-    this.hmStyle.focus = value
+  get overflow () {
+    return this.hmStyle.overflow ? 'hidden' : 'visible'
   }
 
-  set _focus (value: boolean) {
-    this.hmStyle.focus = value
+  get focus () {
+    return !!this.hmStyle.focus
   }
 
   // 文本相关
@@ -485,50 +292,26 @@ export default class StyleSheet {
     return this.hmStyle.color
   }
 
-  set color (value: string) {
-    this.hmStyle.color = value
-  }
-
-  set _color (value: ResourceColor) {
-    this.hmStyle.color = value
-  }
-
   get fontSize () {
     return this.hmStyle.fontSize
   }
 
-  set fontSize (value: string) {
-    this.hmStyle.fontSize = getUnit(value)
-  }
-
-  set _fontSize (value: number | string | Resource) {
-    this.hmStyle.fontSize = value
-  }
-
   get fontWeight () {
     return this.hmStyle.fontWeight
   }
 
-  set fontWeight (value: string) {
-    this.hmStyle.fontWeight = value
-  }
-
-  set _fontWeight (value: number | FontWeight | string) {
-    this.hmStyle.fontWeight = value
+  get fontStyle () {
+    switch (this.hmStyle.fontStyle) {
+      case FontStyle.Italic: return 'italic'; break
+      case FontStyle.Normal: return 'normal'; break
+      default: return ''
+    }
   }
 
   get fontFamily () {
     return this.hmStyle.fontFamily
   }
 
-  set fontFamily (value: string) {
-    this.hmStyle.fontFamily = value
-  }
-
-  set _fontFamily (value: string | Resource) {
-    this.hmStyle.fontFamily = value
-  }
-  
   get textAlign () {
     switch (this.hmStyle.textAlign) {
       case TextAlign.End: return 'right'; break
@@ -538,68 +321,34 @@ export default class StyleSheet {
     }
   }
 
-  set textAlign (value: string) {
-    switch (value) {
-      case 'right':
-        return TextAlign.End
-      case 'center':
-        return TextAlign.Center
-      default:
-        return TextAlign.Start
+  get verticalAlign() {
+    switch (this.hmStyle.verticalAlign) {
+      case Alignment.Center: return 'middle'; break
+      case Alignment.Top: return 'top'; break
+      case Alignment.Bottom: return 'bottom'; break
+      default: return ''
     }
   }
 
-  set _textAlign (value: TextAlign) {
-    this.hmStyle.textAlign = value
-  }
-
   get lineHeight () {
     return this.hmStyle.lineHeight
   }
 
-  set lineHeight (value: string) {
-    this.hmStyle.lineHeight = getUnit(value)
-  }
-
-  set _lineHeight (value: string | number | Resource) {
-    this.hmStyle.lineHeight = value
-  }
-
   get letterSpacing () {
     return this.hmStyle.letterSpacing
   }
 
-  set letterSpacing (value: string) {
-    this.hmStyle.letterSpacing = getUnit(value)
-  }
-
-  set _letterSpacing (value: number | string) {
-    this.hmStyle.letterSpacing = value
-  }
- 
   get textDecoration () {
-    switch (this.hmStyle.decoration) {
-      case TextDecorationType.Underline: return 'underline'; break
-      case TextDecorationType.Overline: return 'overline'; break
-      case TextDecorationType.LineThrough: return 'line-through'; break
-      case TextDecorationType.None: return 'none'; break
-      default: return ''
-    }
-  }
-
-  set textDecoration (value: string) {
-    if (typeof value === 'string') {
-      switch (value) {
-        case 'underline': this.hmStyle.decoration = TextDecorationType.Underline; break
-        case 'overline': this.hmStyle.decoration = TextDecorationType.Overline; break
-        case 'line-through': this.hmStyle.decoration = TextDecorationType.LineThrough; break
-        default: this.hmStyle.decoration = TextDecorationType.None; break
+    if (this.hmStyle.textDecoration) {
+      switch (this.hmStyle.textDecoration.type) {
+        case TextDecorationType.Underline: return 'underline'; break
+        case TextDecorationType.Overline: return 'overline'; break
+        case TextDecorationType.LineThrough: return 'line-through'; break
+        case TextDecorationType.None: return 'none'; break
+        default: return ''
       }
     }
-  }
-
-  set _textDecoration (value: TextDecorationType) {
-    this.hmStyle.decoration = value
+    return ''
   }
 
   get textOverflow () {
@@ -613,75 +362,19 @@ export default class StyleSheet {
     }
   }
 
-  set textOverflow (value: string) {
-    if (typeof value === 'string') {
-      let overflow = TextOverflow.None
-      switch (value) {
-        case 'clip': overflow = TextOverflow.Clip; break
-        case 'ellipsis': overflow = TextOverflow.Ellipsis; break
-        case 'marquee': overflow = TextOverflow.MARQUEE; break
-      }
-      this.hmStyle.textOverflow = {
-        overflow
-      }
-    }
-  }
-
-  set _textOverflow (value: TextOverflow) {
-    this.hmStyle.textOverflow = value
-  }
-
   get WebkitLineClamp () {
-    return Number(this.hmStyle.maxLines)
-  }
-
-  set WebkitLineClamp (value: string | number) {
-    this.hmStyle.maxLines = Number(value)
-  }
-
-  set _WebkitLineClamp (value: number) {
-    this.hmStyle.maxLines = value
+    return Number(this.hmStyle.WebkitLineClamp)
   }
 
-  // TODO: 未实现转换为w3c
-  get linearGradient (): HarmonyType.LinearGradient {
-    return this.hmStyle.linearGradient
-  }
-
-  set _linearGradient (value: HarmonyType.LinearGradient[]) {
-    this.hmStyle.linearGradient = value?.[0]
-  }
-  
   get transform () {
     return this.hmStyle.transform
   }
 
-  set _tranform (value: HarmonyType.Transform.Transform) {
-    this.hmStyle.transform = value
+  get transformOrigin () {
+    return this.hmStyle.transformOrigin
   }
-}
-
-
-class BORDERhmStyleYLE_MAP {
-  static solid = BorderStyle.Solid
-  static dotted = BorderStyle.Dotted
-  static dashed = BorderStyle.Dashed
 
-  static get(type: string): BorderStyle {
-    switch (type) {
-      case 'dotted': return BorderStyle.Dotted
-      case 'dashed': return BorderStyle.Dashed
-      default: return BorderStyle.Solid
-    }
-  }
-
-  static reverse(type: BorderStyle): string {
-    switch (type) {
-      case BorderStyle.Dotted: return 'dotted'
-      case BorderStyle.Dashed: return 'dashed'
-      case BorderStyle.Solid: return 'solid'
-      default: return ''
-    }
-  
+  get content () {
+    return this.hmStyle._content
   }
 }