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

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

@@ -1,15 +1,9 @@
-import { bindInstanceToNode, eventHandler, getComponentEventCallback, AREA_CHANGE_EVENT_NAME, VISIBLE_CHANGE_EVENT_NAME, initComponentNodeInfo,
-  TaroEvent, TaroAny } from '@tarojs/runtime'
+import { eventHandler, getComponentEventCallback, AREA_CHANGE_EVENT_NAME, VISIBLE_CHANGE_EVENT_NAME, createTaroEvent } from '@tarojs/runtime'
 
-import { createNode } from './render'
-import TaroComponentWrapper from './base'
-import { TOUCH_EVENT_MAP } from './utils/constant/event'
-import { createTaroEvent } from './utils/events'
-import { FlexManager } from './utils/FlexManager'
-import { getNodeThresholds, getNormalAttributes, shouldBindEvent, bindAnimation } from './utils/helper'
+import { createLazyChildren } from './render'
+import { getNodeThresholds, getNormalAttributes, shouldBindEvent } from './utils/helper'
 
-import type { TaroSwiperElement, TaroSwiperItemElement, TaroElement } from './element'
-import type { TaroStyleType } from '@tarojs/runtime'
+import type { TaroStyleType, TaroSwiperElement, TaroEvent, TaroAny } from '@tarojs/runtime'
 
 interface SwiperAttrs {
   index?: number
@@ -37,6 +31,7 @@ function swiperStyle (style: TaroStyleType) {
   .backgroundColor(style.backgroundColor)
   .backgroundImage(style.backgroundImage, style.backgroundRepeat)
   .backgroundImageSize(style.backgroundImageSize)
+  .backgroundImagePosition(style.backgroundImagePosition)
   .rotate(style.rotate)
   .scale(style.scale)
   .translate(style.translate)
@@ -75,130 +70,24 @@ function getSwiperAttributes (node: TaroSwiperElement): SwiperAttrs {
   return swiperAttrs
 }
 
-@Component
-export struct TaroSwiper {
-  private swiperController: SwiperController = new SwiperController()
-
-  nodeInfoMap: TaroAny = {}
-
-  @ObjectLink node: TaroSwiperElement
-
-  @Styles visibleChangeEvent () {
-    .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))
-  }
-
-  aboutToAppear () {
-    initComponentNodeInfo(this, this.node)
-    bindInstanceToNode(this.node, this)
-    // 绑定动画
-    bindAnimation(this.node)
-  }
-
-  @Styles defaultEvent () {
-    .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', this.node), this.node, ['click']))
-    .onAreaChange(getComponentEventCallback(this.node, AREA_CHANGE_EVENT_NAME, res => {
-      const eventResult: TaroAny = res.eventResult
-      this.nodeInfoMap[this.node._nid].areaInfo = eventResult[1]
-    }))
-  }
-
-  build() {
-    TaroComponentWrapper({ node: this.node }) {
-      Swiper(this.swiperController) {
-        ForEach(this.node.childNodes, (item: TaroElement) => {
-          createNode(item)
-        }, (item: TaroElement) => item._nid)
-      }
-      .swiperStyle(getNormalAttributes(this.node))
-      .swiperAttr(getSwiperAttributes(this.node))
-      .defaultEvent()
-      .indicatorStyle({
-        color: this.node.getAttribute('indicatorColor'),
-        selectedColor:  this.node.getAttribute('indicatorActiveColor')
-      })
-      .onChange((index: number) => {
-        const event: TaroEvent = createTaroEvent('change', { detail: { current: index } }, this.node)
-        eventHandler(event, 'change', this.node)
-      })
-      .visibleChangeEvent()
-    }
-  }
-}
-
-@Extend(Flex)
-function flexStyle (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)
-  .backgroundColor(style.backgroundColor)
-  .backgroundImage(style.backgroundImage, style.backgroundRepeat)
-  .backgroundImageSize(style.backgroundImageSize)
-  .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)
-  .zIndex(style.zIndex)
-  .opacity(style.opacity)
-  .clip(style.clip)
-}
-
-function getAttributes (node: TaroSwiperItemElement) {
-  const _attrs = node._attrs
-  const _nid = node._nid
-  const style = getNormalAttributes(node)
-  style.id = _attrs.itemId || _attrs.id || _nid
-  return style
-}
-
-@Component
-export struct TaroSwiperItem {
-  nodeInfoMap: TaroAny = {}
-
-  @Styles visibleChangeEvent () {
-    .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))
-  }
-
-  @ObjectLink node: TaroSwiperItemElement
-
-  aboutToAppear () {
-    initComponentNodeInfo(this, this.node)
-    bindInstanceToNode(this.node, this)
-    // 绑定动画
-    bindAnimation(this.node)
-  }
-
-  @Styles defaultEvent () {
-    .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', this.node), this.node, ['click']))
-    .onTouch(shouldBindEvent((e: TouchEvent) => eventHandler(e, TOUCH_EVENT_MAP.get(e.type), this.node), this.node, TOUCH_EVENT_MAP.values()))
-    .onAreaChange(getComponentEventCallback(this.node, AREA_CHANGE_EVENT_NAME, res => {
-      const eventResult: TaroAny = res.eventResult
-      this.nodeInfoMap[this.node._nid].areaInfo = eventResult[1]
-    }))
-  }
-
-  build() {
-    TaroComponentWrapper({ node: this.node }) {
-      Flex(FlexManager.flexOptions(this.node)) {
-        ForEach(this.node.childNodes, (item: TaroElement) => {
-          createNode(item)
-        }, (item: TaroElement) => item._nid)
-      }
-      .flexStyle(getAttributes(this.node))
-      .defaultEvent()
-      .visibleChangeEvent()
-    }
+@Builder
+export default function TaroSwiper (node: TaroSwiperElement) {
+  Swiper(node.controller) {
+    createLazyChildren(node)
   }
+  .swiperStyle(getNormalAttributes(node))
+  .swiperAttr(getSwiperAttributes(node))
+  .indicatorStyle({
+    color: node.getAttribute('indicatorColor'),
+    selectedColor:  node.getAttribute('indicatorActiveColor')
+  })
+  .onChange((index: number) => {
+    const event: TaroEvent = createTaroEvent('change', { detail: { current: index } }, node)
+    eventHandler(event, 'change', node)
+  })
+  .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))
 }

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

@@ -1,12 +1,8 @@
-import { bindInstanceToNode, eventHandler, getComponentEventCallback, AREA_CHANGE_EVENT_NAME, VISIBLE_CHANGE_EVENT_NAME, initComponentNodeInfo,
-  TaroEvent, TaroAny } from '@tarojs/runtime'
+import { eventHandler, getComponentEventCallback, AREA_CHANGE_EVENT_NAME, VISIBLE_CHANGE_EVENT_NAME, createTaroEvent } from '@tarojs/runtime'
 
-import TaroComponentWrapper from './base'
-import { createTaroEvent } from './utils/events'
 import { getNodeThresholds, shouldBindEvent, getNormalAttributes } from './utils/helper'
 
-import type { TaroSwitchElement } from './element'
-import type { TaroStyleType } from '@tarojs/runtime'
+import type { TaroAny, TaroStyleType, TaroSwitchElement, TaroEvent } from '@tarojs/runtime'
 
 interface SwitchAttrs {
   selectedColor?: ResourceColor
@@ -28,6 +24,7 @@ function styles (style: TaroStyleType) {
   .backgroundColor(style.backgroundColor)
   .backgroundImage(style.backgroundImage, style.backgroundRepeat)
   .backgroundImageSize(style.backgroundImageSize)
+  .backgroundImagePosition(style.backgroundImagePosition)
   .rotate(style.rotate)
   .scale(style.scale)
   .translate(style.translate)
@@ -59,55 +56,28 @@ function themeStyles(isDisabled: boolean) {
   .opacity(isDisabled ? 0.4 : 1)
 }
 
-@Component
-export default struct TaroSwitch {
-  nodeInfoMap: TaroAny = {}
+@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)
 
-  @ObjectLink node: TaroSwitchElement
-
-  @State value: boolean = false
-
-  @Styles visibleChangeEvent () {
-    .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))
-  }
-
-  aboutToAppear () {
-    initComponentNodeInfo(this, this.node)
-    bindInstanceToNode(this.node, this)
-
-    this.value = !!this.node._attrs.checked
-  }
-
-  @Styles defaultEvent () {
-    .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', this.node), this.node, ['click']))
-    .onAreaChange(getComponentEventCallback(this.node, AREA_CHANGE_EVENT_NAME, res => {
-      const eventResult: TaroAny = res.eventResult
-      this.nodeInfoMap[this.node._nid].areaInfo = eventResult[1]
+        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]
     }))
-  }
-
-  build() {
-    TaroComponentWrapper({ node: this.node }) {
-      Toggle({
-        type: this.node._attrs.type !== 'checkbox' ? ToggleType.Switch : ToggleType.Checkbox,
-        isOn: this.value,
-      })
-        .defaultEvent()
-        .styles(getNormalAttributes(this.node))
-        .attrs(getAttributes(this.node))
-        .themeStyles(!!this.node._attrs.disabled)
-        .onChange((isOn: boolean) => {
-          if (!this.node._attrs.disabled) {
-            this.value = isOn
-            const event: TaroEvent = createTaroEvent('change', { detail: { value: this.value } }, this.node)
-            eventHandler(event, 'change', this.node)
-          } else {
-            // FIXME 找下文档是否有强制刷新方法
-            this.value = !this.value
-            this.value = !this.value
-          }
-        })
-        .visibleChangeEvent()
-    }
-  }
+    .onVisibleAreaChange(getNodeThresholds(node) || [0.0, 1.0], getComponentEventCallback(node, VISIBLE_CHANGE_EVENT_NAME))
 }

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

@@ -1,15 +1,13 @@
-import { bindInstanceToNode, eventHandler, getComponentEventCallback, AREA_CHANGE_EVENT_NAME, VISIBLE_CHANGE_EVENT_NAME, initComponentNodeInfo, TaroAny, NodeType } from '@tarojs/runtime'
+import { eventHandler, convertNumber2VP, getComponentEventCallback, AREA_CHANGE_EVENT_NAME, VISIBLE_CHANGE_EVENT_NAME, NodeType } from '@tarojs/runtime'
 
-import TaroComponentWrapper from './base'
-import { getNodeThresholds, getNormalAttributes, getFontAttributes, shouldBindEvent, bindAnimation } from './utils/helper'
+import { getButtonColor } from './button'
+import { BUTTON_THEME_COLOR } from './utils/constant/style'
+import { getNodeThresholds, getNormalAttributes, getFontAttributes, shouldBindEvent } from './utils/helper'
 
-import type { TaroTextElement } from './element'
-import type { TaroStyleType, TaroTextStyleType } from '@tarojs/runtime'
+import type { TaroButtonElement, TaroElement, TaroTextElement, TaroAny, TaroTextStyleType, TaroStyleType } from '@tarojs/runtime'
 
 @Extend(Text)
-function textStyle (style: TaroStyleType) {
-  .id(style.id)
-  .key(style.id)
+function textNormalStyle (style: TaroStyleType) {
   .padding(style.padding)
   .margin(style.margin)
   .width(style.width)
@@ -22,6 +20,7 @@ function textStyle (style: TaroStyleType) {
   .backgroundColor(style.backgroundColor)
   .backgroundImage(style.backgroundImage, style.backgroundRepeat)
   .backgroundImageSize(style.backgroundImageSize)
+  .backgroundImagePosition(style.backgroundImagePosition)
   .rotate(style.rotate)
   .scale(style.scale)
   .translate(style.translate)
@@ -32,8 +31,14 @@ function textStyle (style: TaroStyleType) {
   .borderRadius(style.borderRadius)
   .linearGradient(style.linearGradient)
   .zIndex(style.zIndex)
-  .opacity(style.opacity)
   .clip(style.clip)
+}
+
+@Extend(Text)
+function textNormalFontStyle (style: TaroStyleType) {
+  .id(style.id)
+  .key(style.id)
+  .opacity(style.opacity)
   .fontColor(style.color)
   .fontSize(style.fontSize)
   .fontWeight(style.fontWeight)
@@ -47,51 +52,42 @@ function textStyle (style: TaroStyleType) {
 }
 
 @Extend(Text)
-function textAttr(attr: TaroTextStyleType) {
+function textSpecialFontStyle(attr: TaroTextStyleType) {
   .textAlign(attr.textAlign)
   .textOverflow(attr.textOverflow)
   .maxLines(attr.maxLines)
   .letterSpacing(attr.letterSpacing)
 }
 
+function getButtonFontSize (node: TaroButtonElement) {
+  const isMini = node._attrs.size === 'mini'
 
-@Component
-export default struct TaroText {
-  nodeInfoMap: TaroAny = {}
-
-  @Styles visibleChangeEvent () {
-    .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))
-  }
-
-  @ObjectLink node: TaroTextElement
-
-  aboutToAppear () {
-    initComponentNodeInfo(this, this.node)
-    bindInstanceToNode(this.node, this)
-    // 绑定动画
-    bindAnimation(this.node)
-  }
-
-  @Styles defaultEvent () {
-    .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', this.node), this.node, ['click']))
-    .onAreaChange(getComponentEventCallback(this.node, AREA_CHANGE_EVENT_NAME, res => {
-      const eventResult: TaroAny = res.eventResult
-      this.nodeInfoMap[this.node._nid].areaInfo = eventResult[1]
-    }))
-  }
-
+  return isMini ? convertNumber2VP(26) : convertNumber2VP(36)
+}
 
-  build() {
-    TaroComponentWrapper({ node: this.node }) {
-      if (this.node.nodeType === NodeType.TEXT_NODE) {
-        Text(this.node.textContent)
-      } else {
-        Text(this.node.textContent)
-          .defaultEvent()
-          .textStyle(getNormalAttributes(this.node))
-          .textAttr(getFontAttributes(this.node))
-          .visibleChangeEvent()
-      }
+@Builder
+export default function TaroText (node: TaroTextElement) {
+  if (node.nodeType === NodeType.TEXT_NODE && node.parentNode) {
+    if ((node.parentNode as TaroElement).tagName === 'BUTTON') {
+      Text(node.textContent)
+        .textNormalFontStyle(getNormalAttributes(node.parentNode as TaroElement))
+        .textSpecialFontStyle(getFontAttributes(node.parentNode as TaroElement))
+        .fontSize((node.parentNode as TaroButtonElement).hmStyle.fontSize || getButtonFontSize((node.parentNode as TaroButtonElement)))
+        .fontColor((node.parentNode as TaroButtonElement).hmStyle.color || getButtonColor(node.parentNode as TaroButtonElement, BUTTON_THEME_COLOR.get((node.parentNode as TaroButtonElement)._attrs.type).text))
+    } else {
+      Text(node.textContent)
+        .textNormalFontStyle(getNormalAttributes(node.parentNode as TaroElement))
+        .textSpecialFontStyle(getFontAttributes(node.parentNode as TaroElement))
     }
+  } 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))
   }
 }

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

@@ -1,15 +1,8 @@
-import window from '@ohos.window'
-import common from '@ohos.app.ability.common'
-import { isNumber, isUndefined } from '@tarojs/shared'
-import { bindFocus, bindInstanceToNode, eventHandler, Current, getComponentEventCallback, AREA_CHANGE_EVENT_NAME, VISIBLE_CHANGE_EVENT_NAME, initComponentNodeInfo,
-  TaroEvent, TaroAny } from '@tarojs/runtime'
+import { eventHandler, getComponentEventCallback, AREA_CHANGE_EVENT_NAME, VISIBLE_CHANGE_EVENT_NAME, createTaroEvent } from '@tarojs/runtime'
 
-import TaroComponentWrapper from './base'
-import { createTaroEvent } from './utils/events'
-import { getNodeThresholds, getNormalAttributes, getFontAttributes, parseStyles, shouldBindEvent, bindAnimation } from './utils/helper'
+import { getNodeThresholds, getNormalAttributes, getFontAttributes, shouldBindEvent, parseStyles } from './utils/helper'
 
-import type { TaroTextAreaElement } from './element'
-import type { TaroStyleType, TaroTextStyleType } from '@tarojs/runtime'
+import type { TaroAny, TaroStyleType, TaroTextStyleType, TaroTextAreaElement, TaroEvent } from '@tarojs/runtime'
 
 @Extend(TextArea)
 function textStyle (style: TaroStyleType) {
@@ -27,6 +20,7 @@ function textStyle (style: TaroStyleType) {
   .backgroundColor(style.backgroundColor)
   .backgroundImage(style.backgroundImage, style.backgroundRepeat)
   .backgroundImageSize(style.backgroundImageSize)
+  .backgroundImagePosition(style.backgroundImagePosition)
   .rotate(style.rotate)
   .scale(style.scale)
   .translate(style.translate)
@@ -52,118 +46,56 @@ function textAttr(attr: TaroTextStyleType) {
   .maxLines(attr.maxLines)
 }
 
-@Component
-struct TaroTextArea {
-  nodeInfoMap: TaroAny = {}
-
-  @State text: string = ''
-
-  @ObjectLink node: TaroTextAreaElement
-
-  controller: TextAreaController = new TextAreaController()
+function getPlaceholderColor (node: TaroTextAreaElement): string {
+  const placeholderStyle: string = node._attrs.placeholderStyle || ''
 
-  windowClass?: window.Window
-
-  _height: number = 0
+  return parseStyles(placeholderStyle)?.color
+}
 
-  heightChange = (height: number) => {
-    if (isNumber(height)) {
-      if (this._height !== height) {
-        this.onKeyboardHeightChange(height)
-        this._height = height
-      }
-    }
-  }
+@Component
+export default struct TaroTextArea {
+  @State value: string = ''
 
-  @Styles visibleChangeEvent () {
-    .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))
-  }
+  node: TaroTextAreaElement | null = null
 
   aboutToAppear () {
-    initComponentNodeInfo(this, this.node)
-    bindInstanceToNode(this.node, this)
-    bindFocus(this.node)
-    // 绑定动画
-    bindAnimation(this.node)
-
-    this.text = this.node._attrs.value || ''
-
-    try {
-      Current.contextPromise
-        .then((context: common.BaseContext) => {
-          return window.getLastWindow(context, (err, windowClass: window.Window) => {
-            const errCode: number = err.code;
-            if (errCode) {
-              console.error('Failed to obtain the top window. Cause: ' + JSON.stringify(err))
-              return;
-            }
-            this.windowClass = windowClass
-            windowClass.on('keyboardHeightChange', this.heightChange)
-          })
-        })
-    } catch (exception) {
-      console.error('Failed to obtain the top window. Cause: ' + JSON.stringify(exception))
-    }
-  }
-
-  aboutToDisappear () {
-    if (this.windowClass) {
-      try {
-        this.windowClass.off('keyboardHeightChange', this.heightChange)
-      } catch (err) {
-        console.error('Failed to obtain the top window. Cause: ' + JSON.stringify(err))
-      }
+    if (this.node) {
+      this.value = this.node.value
+      this.node._instance = this
     }
   }
 
-  onKeyboardHeightChange (height: number) {
-    const event: TaroEvent = createTaroEvent('keyboardHeightChange', { detail: { height, duration: 0 } }, this.node)
-    eventHandler(event, 'keyboardHeightChange', this.node)
-  }
-
-  getPlaceholderColor (node: TaroTextAreaElement): string {
-    const placeholderStyle: string = node._attrs.placeholderStyle || ''
-
-    return parseStyles(placeholderStyle)?.color
-  }
-
-  getText (): string {
-    return isUndefined(this.node._attrs.value) ? this.text : this.node._attrs.value
-  }
-
-  @Styles defaultEvent () {
-    .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', this.node), this.node, ['click']))
-    .onBlur(() => {
-      const event: TaroEvent = createTaroEvent('blur', { detail: { value: this.text } }, this.node)
-      eventHandler(event, 'blur', this.node)
-    })
-    .onFocus(() => {
-      const event: TaroEvent = createTaroEvent('focus', { detail: { value: this.text, height: this._height } }, this.node)
-      eventHandler(event, 'focus', this.node)
-    })
-    .onAreaChange(getComponentEventCallback(this.node, AREA_CHANGE_EVENT_NAME, res => {
-      const eventResult: TaroAny = res.eventResult
-      this.nodeInfoMap[this.node._nid].areaInfo = eventResult[1]
-    }))
-  }
-
-  build() {
-    TaroComponentWrapper({ node: this.node }) {
-      TextArea({ text: this.getText(), placeholder: this.node._attrs?.placeholder || '', controller: this.controller })
-        .focusable(true)
+  build () {
+    if (this.node) {
+      TextArea({ text: this.value, placeholder: this.node._attrs?.placeholder || '', controller: this.node.controller })
         .key(this.node._nid)
-        .placeholderColor(this.getPlaceholderColor(this.node))
-        .defaultEvent()
+        .maxLength(Number(this.node._attrs?.maxlength) || null)
+        .placeholderColor(getPlaceholderColor(this.node))
         .textStyle(getNormalAttributes(this.node))
         .textAttr(getFontAttributes(this.node))
         .onChange((value: string) => {
           const event: TaroEvent = createTaroEvent('input', { detail: { value } }, this.node)
+          
+          this.value = value
+          this.node?.updateFormWidgetValue(value)
           eventHandler(event, 'input', this.node)
-          this.text = value
         })
-        .visibleChangeEvent()
+        .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', this.node), this.node, ['click']))
+        .onBlur(() => {
+          const event: TaroEvent = createTaroEvent('blur', { detail: { value: this.value } }, this.node)
+          eventHandler(event, 'blur', this.node)
+        })
+        .onFocus(() => {
+          const event: TaroEvent = createTaroEvent('focus', { detail: { value: this.value, height: this.node?._height } }, this.node)
+    
+          eventHandler(event, 'focus', this.node)
+        })
+        .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))
     }
   }
 }
-
-export default TaroTextArea

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

@@ -10,30 +10,33 @@ export class TEXT_DEFAULT_STYLE {
 }
 
 interface IBUTTON_THEME_COLOR {
-  text: string
+  text: Color
   background: string
+  plainText: string | Color
 }
 
 export class BUTTON_THEME_COLOR {
   static get (type: string): IBUTTON_THEME_COLOR {
     switch (type) {
       case 'primary': return {
-        text: '#fff',
+        text: Color.White,
         background: '#1aad19',
+        plainText: '#1aad19'
       }
       case 'warn': return {
-        text: '#fff',
-        background: '#e64340'
+        text: Color.White,
+        background: '#e64340',
+        plainText: '#e64340'
       }
       default: return {
-        text: '#000',
+        text: Color.Black,
         background: '#f7f7f7',
+        plainText: Color.Black
       }
     }
   }
 }
 
-
 export class INPUT_TYPE_MAP {
   static get (type: string) {
     switch (type) {