@tarojs/plugin-platform-harmony-ets 4.0.0-beta.57 → 4.0.0-beta.59

package/dist/apis/device/clipboard.ts

@@ -40,7 +40,12 @@ export const setClipboardData: typeof Taro.setClipboardData = function (options)
         callAsyncFail(reject, res, options)
       } else {
 
-        promptAction.showToast({ message: '内容已复制' })
+        promptAction.showToast({ 
+          message: '内容已复制', 
+          duration: 1500,
+          bottom: '50%',
+          showMode: 1 // 设置弹窗显示模式，显示在应用之上。
+        })
         
         return handle.success({
           data,

package/dist/apis/ui/interaction/index.ts

@@ -33,7 +33,6 @@ export function showToast (options) {
       message: options.title,
       duration: options.duration,
       bottom: options.bottom,
-      // @ts-ignore
       showMode: 1 // 设置弹窗显示模式，显示在应用之上。
     })
     callAsyncSuccess(resolve, resCallback('showToast'), options)
@@ -173,16 +172,7 @@ export function showActionSheet (options) {
   })
 }
 
-export function hideToast (options) {
-  return new Promise(resolve => {
-    promptAction.showToast({
-      message: '关闭中',
-      duration: 10,
-      bottom: '9999px'
-    })
-    callAsyncSuccess(resolve, resCallback('hideToast'), options)
-  })
-}
+export const hideToast = /* @__PURE__ */ temporarilyNotSupport('hideToast')
 
 export const showLoading = temporarilyNotSupport('showLoading')
 export const hideLoading = temporarilyNotSupport('hideLoading')

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

@@ -25,6 +25,10 @@ import { TaroCheckboxGroup, TaroCheckbox } from './checkbox'
 import TaroPageMeta from './pageMeta'
 import TaroNavigationBar from './navigationBar'
 
+import TaroListView from './listView'
+import TaroStickySection from './stickySection'
+import TaroScrollList from './scrollList'
+
 import commonStyleModify, { rowModify, columnModify, textModify, setNormalTextAttributeIntoInstance } from './style'
 import { getButtonColor } from './button'
 import { FlexManager } from './utils/flexManager'
@@ -82,4 +86,7 @@ export {
   TaroCheckbox,
   TaroPageMeta,
   TaroNavigationBar,
+  TaroListView,
+  TaroStickySection,
+  TaroScrollList
 }

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

@@ -0,0 +1,26 @@
+import commonStyleModify from './style'
+
+import type { TaroViewElement, TaroAny } from '@tarojs/runtime'
+
+@Component
+export default struct TaroListView {
+  @Builder customBuilder() {}
+  @BuilderParam createLazyChildren: (node: TaroViewElement) => void = this.customBuilder
+  @ObjectLink node: TaroViewElement
+  @State overwriteStyle: Record<string, TaroAny> = {}
+
+  aboutToAppear(): void {
+    if (this.node) {
+      this.node._instance = this
+    }
+  }
+
+  build() {
+    ListItem() {
+      Stack() {
+        this.createLazyChildren(this.node)
+      }
+    }
+    .attributeModifier(commonStyleModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
+  }
+}

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

@@ -0,0 +1,94 @@
+import { eventHandler, getComponentEventCallback, AREA_CHANGE_EVENT_NAME, VISIBLE_CHANGE_EVENT_NAME, createTaroEvent } from '@tarojs/runtime'
+
+import commonStyleModify from './style'
+import { TOUCH_EVENT_MAP } from './utils/constant/event'
+import { getNodeThresholds, shouldBindEvent } from './utils/helper'
+
+import type { TaroScrollViewElement, TaroAny, TaroEvent } from '@tarojs/runtime'
+
+interface ScrollViewAttrs {
+  scrollBar: BarState
+}
+interface ScrollViewCurrentOffset {
+  xOffset: number
+  yOffset: number
+}
+interface ScrollViewEvent {
+  deltaX: number
+  deltaY: number
+  scrollLeft: number
+  scrollTop: number
+  scrollWidth: number
+  scrollHeight: number
+}
+
+function getAttributes (node: TaroScrollViewElement): ScrollViewAttrs {
+  const _attrs = node._attrs
+  const scrollAttrs: ScrollViewAttrs = {
+    scrollBar: typeof _attrs.showScrollbar === 'boolean'
+      ? _attrs.showScrollbar ? BarState.On : BarState.Off
+      : BarState.Auto
+  }
+  return scrollAttrs
+}
+
+function handleScrollEvent (node: TaroScrollViewElement, eventName = 'scroll', scrollOffset?: number) {
+  const currentOffset = node.scroller.currentOffset() as ScrollViewCurrentOffset
+  const currentXOffset = currentOffset?.xOffset || 0
+  const currentYOffset = currentOffset?.yOffset || 0
+  const value: ScrollViewEvent = {
+    deltaX: vp2px(node._attrs.scrollX ? scrollOffset : 0),
+    deltaY: vp2px(node._attrs.scrollX ? 0 : scrollOffset),
+    scrollLeft: vp2px(currentXOffset),
+    scrollTop: vp2px(currentYOffset),
+    scrollWidth: vp2px(Number(node._nodeInfo?._scroll?.width)),
+    scrollHeight: vp2px(Number(node._nodeInfo?._scroll?.height)),
+  }
+  const event: TaroEvent = createTaroEvent(eventName, { detail: value }, node)
+
+  eventHandler(event, eventName, node)
+}
+
+@Component
+export default struct TaroScrollList {
+  @Builder customBuilder() {}
+  @BuilderParam createLazyChildren: (node: TaroScrollViewElement) => void = this.customBuilder
+  @ObjectLink node: TaroScrollViewElement
+  @State overwriteStyle: Record<string, TaroAny> = {}
+
+  aboutToAppear(): void {
+    if (this.node) {
+      this.node._instance = this
+    }
+  }
+
+  handleScroll = (scrollOffset: number) => { 
+    handleScrollEvent(this.node, 'scroll', scrollOffset)
+  }
+
+  build() {
+    List({
+      scroller: this.node.scroller
+    }) {
+      this.createLazyChildren(this.node)
+    }
+    .attributeModifier(commonStyleModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
+    .sticky(StickyStyle.Header)
+    .listDirection(this.node.getAttribute('scrollX') ? Axis.Horizontal: Axis.Vertical)
+    .align(Alignment.TopStart)
+    .clip(true)
+    .scrollBar(getAttributes(this.node).scrollBar)
+    .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: TaroAny) => {
+      this.node._nodeInfo.areaInfo = res[1]
+    }))
+    .onDidScroll(shouldBindEvent((scrollOffset: number) => { handleScrollEvent(this.node, 'scroll', scrollOffset) }, this.node, ['scroll']))
+    .onScrollStart(shouldBindEvent(() => { handleScrollEvent(this.node, 'scrollstart') }, this.node, ['scrollstart']))
+    .onScrollStop(shouldBindEvent(() => { handleScrollEvent(this.node, 'scrollend') }, this.node, ['scrollend']))
+    .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))
+    .onReachEnd(shouldBindEvent(() => { handleScrollEvent(this.node, 'scrolltolower') }, this.node, ['scrolltolower']))
+  }
+}
+
+

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

@@ -122,7 +122,7 @@ export default struct TaroScrollView {
     .onAreaChange(getComponentEventCallback(this.node, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => {
       this.node._nodeInfo.areaInfo = res[1]
     }))
-    .onScroll(shouldBindEvent(() => { handleScrollEvent(this.node, 'scroll') }, this.node, ['scroll']))
+    .onDidScroll(shouldBindEvent((xOffset: number, yOffset: number) => { handleScrollEvent(this.node, 'scroll', xOffset, yOffset) }, this.node, ['scroll']))
     .onScrollStart(shouldBindEvent(() => { handleScrollEvent(this.node, 'scrollstart') }, this.node, ['scrollstart']))
     .onScrollStop(shouldBindEvent(() => { handleScrollEvent(this.node, 'scrollend') }, this.node, ['scrollend']))
     .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))

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

@@ -0,0 +1,42 @@
+import commonStyleModify from './style'
+
+import type { TaroViewElement, TaroElement, TaroAny } from '@tarojs/runtime'
+
+@Component
+export default struct TaroStickySection {
+  @Builder customBuilder() {}
+  @BuilderParam createLazyChildren: (node: TaroViewElement) => void = this.customBuilder
+  @ObjectLink node: TaroViewElement
+  @State overwriteStyle: Record<string, TaroAny> = {}
+
+  aboutToAppear(): void {
+    if (this.node) {
+      this.node._instance = this
+    }
+  }
+
+  @Builder
+  itemHead(header: TaroViewElement) {
+    Stack() {
+      LazyForEach(header, (item: TaroElement) => {
+        if (item.tagName === 'STICKY-HEADER') {
+          this.createLazyChildren(item as TaroViewElement)
+        }
+      }, (item: TaroElement) => `${item._nid}-${item._nodeInfo?.layer || 0}`)
+    }
+  }
+
+  build() {
+    ListItemGroup({
+      header: this.itemHead(this.node)
+    }) {
+      ForEach(this.node.children, (item: TaroElement) => {
+        if (item.tagName === 'LIST-VIEW') {
+          this.createLazyChildren(item as TaroViewElement)
+        }
+      }, (item: TaroElement) => `${item._nid}-${item._nodeInfo?.layer || 0}`)
+
+    }
+    .attributeModifier(commonStyleModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
+  }
+}

package/dist/components-harmony-ets/tag.ts

@@ -49,3 +49,7 @@ export const TaroListTagName = 'list'
 export const TaroListItemTagName = 'list-item'
 export const TaroOpenDataTagName = 'open-data'
 export const TaroIgnoreTagName = 'ignore'
+
+export const TaroStickySectionTagName = 'sticky-section'
+export const TaroStickyHeaderTagName = 'sticky-header'
+export const TaroListViewTagName = 'list-view'

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

@@ -163,6 +163,10 @@ function depthTraversal(root: ReactElement) {
 function combineStyle(nestingStyle: NestingStyle, class_mapping: TMapping, alias: Record<string, string[]>) {
 
   const findElement = (selector_string, combinator_type, selector_mapping, remainder_selector, declaration) => {
+    // 防止修改原数组
+    if (selector_string instanceof Array) {
+      selector_string = selector_string.slice()
+    }
     let selector_list = [selector_string]
     const selector_nodes: TSelectorNode[] = []
     let shouldUseCombinations = false
@@ -182,31 +186,36 @@ function combineStyle(nestingStyle: NestingStyle, class_mapping: TMapping, alias
     for (let i = 0; i < selector_list.length; i++) {
       const selector = selector_list[i]
       if (selector instanceof Array) {
-        let obj
+        let hitElements: any
         // 如果是数组，说明他是一个多类选择器：.a.b，我们需要搜索这两个类名都指向同一个node
         if (shouldUseCombinations) {
-          obj = generateCombinations(selector, (combination) => {
+          hitElements = generateCombinations(selector, (combination) => {
             // combination 是组合后的选择器['parent', 'child']
             const _obj = findSendNode(combination, selector_mapping)
             if (_obj) return _obj
           })
         } else {
-          obj = findSendNode(selector, selector_mapping)
+          hitElements = findSendNode(selector, selector_mapping)
         }
         // 找出最后搜寻出来的node
-        if (obj) {
-          if (typeof obj.node.type === 'function') {
-            // 自定义组件，往下传递需要搜寻的内容向里面搜寻
-            const nestingData = {
-              selectors: [selector_string, combinator_type, ...remainder_selector.slice()],
-              declaration: declaration
+        if (hitElements) {
+          let objs = [hitElements]
+          objs = flattenArray(objs)
+          objs.forEach(obj => {
+            if (typeof obj.node.type === 'function') {
+              // 自定义组件，往下传递需要搜寻的内容向里面搜寻
+              const nestingData = {
+                selectors: [selector_string, combinator_type, ...remainder_selector.slice()],
+                declaration: declaration
+              }
+              obj.node.props.__nesting = obj.node.props.__nesting ?
+                [...obj.node.props.__nesting, nestingData] : [nestingData]
             }
-            obj.node.props.__nesting = obj.node.props.__nesting ?
-              [...obj.node.props.__nesting, nestingData] : [nestingData]
-          }
-          selector_nodes.push({
-            mapping: (obj.ref || obj)[combinator_type === ' > ' ? 'children' : 'descendants'],
-            node: obj.node
+            selector_nodes.push({
+              // @ts-ignore
+              mapping: (obj.ref || obj)[combinator_type === ' > ' ? 'children' : 'descendants'],
+              node: obj.node
+            })
           })
         }
       } else {
@@ -286,17 +295,19 @@ function generateCombinations (arrays: (string[] | string)[], cbFn, currentCombi
   const currentArray = arrays[0]
   if (currentArray instanceof Array) {
     // 遍历当前数组的每个元素
+    const eles: TMappingNode[] = []
     for (let i = 0; i < currentArray.length; i++) {
       // 将当前元素添加到当前组合中
       currentCombination.push(currentArray[i])
       // 递归处理剩余的数组
       const shouldStop = generateCombinations(arrays.slice(1), cbFn, currentCombination)
       if (shouldStop) {
-        return shouldStop
+        eles.push(shouldStop)
       }
       // 回溯，移除最后一个元素，尝试其他组合
       currentCombination.pop()
     }
+    return eles
   } else {
     // 如果不是数组，直接将当前元素添加到当前组合中
     currentCombination.push(currentArray)
@@ -391,3 +402,10 @@ export function __combine_nesting_style__(react_tree: ReactElement, styles: Nest
   }
   return react_tree
 }
+
+// 拍平数组
+function flattenArray(arr) {
+  return arr.reduce((acc, val) => {
+    return acc.concat(Array.isArray(val) ? flattenArray(val) : val)
+  }, [])
+}

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

@@ -47,6 +47,7 @@ export function initHarmonyElement () {
       case 'movable-view': return new TaroMovableViewElement()
       case 'progress': return new TaroProgressElement()
       case 'scroll-view': return new TaroScrollViewElement()
+      case 'scroll-list': return new TaroScrollViewElement()
       case 'checkbox-group': return new TaroCheckboxGroupElement()
       case 'input': return new TaroInputElement()
       case 'picker': return new TaroPickerElement()

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

@@ -7,8 +7,8 @@ import { BORDER_STYLE_MAP, capitalizeFirstLetter, FlexManager, getNodeMarginOrPa
 
 // 背景解析正则
 const BACKGROUND_REGEX = {
-  IMAGE: /url\((['"])?(.*?)\1\)|(linear|radial)-gradient\([^)]*\)/,
-  COLOR: /(#[0-9a-fA-F]{3,6}|rgb\(\d+,\s*\d+,\s*\d+\)|rgba?\(\d+,\s*\d+,\s*\d+,\s*(?:0?\.\d+|\d+%)\)|transparent)/,
+  IMAGE: /url\((['"])?(.*?)\1\)|((linear|radial)-gradient\([^)]*\))/g,
+  COLOR: /(#[0-9a-fA-F]{3,8}|rgb\(\d+,\s*\d+,\s*\d+\)|rgba?\(\d+,\s*\d+,\s*\d+,\s*(?:0?\.\d+|\d+%)\)|transparent)/,
   REPEAT: /(repeat-x|repeat-y|repeat|space|round|no-repeat)/,
   POSITION: /(top|left|center|right|bottom|\d+(\.\d+)?(px|%|vw|vh)?)+/g,
   SIZE: /(cover|contain|\d+(\.\d+)?(px|%|vw|vh)?)+/g
@@ -469,20 +469,24 @@ export default function convertWebStyle2HmStyle(webStyle: CSSProperties, node?:
 }
 
 function setBackgroundImage(hmStyle, value) {
-  if (typeof value === 'string' && value.indexOf('url(') !== -1 && value.indexOf(')') !== -1) {
-    // 如果包含 url()，则说明是 background-image 属性
-    const match = value.match(new RegExp('url\\([\'"]?(.*?)[\'"]?\\)'))
-    if (match) {
-      hmStyle.backgroundImage = {
-        src: match[1]
+  if (typeof value === 'string') {
+    if (value.indexOf('url(') !== -1 && value.indexOf(')') !== -1) {
+      // 如果包含 url()，则说明是 background-image 属性
+      const match = value.match(new RegExp('url\\([\'"]?(.*?)[\'"]?\\)'))
+      if (match) {
+        hmStyle.backgroundImage = {
+          src: match[1]
+        }
       }
+    } else if (value.indexOf('linear-gradient(') !== -1) {
+      hmStyle.backgroundImage = parseGradient(value)
     }
   }
-  // todo 渐变需要处理
 }
 
 // 解析background属性
 function setBackground (backgroundValue: string) {
+  backgroundValue = preprocessCss(backgroundValue)
   const result = {
     'background-color': '',
     'background-image': '',
@@ -726,3 +730,76 @@ function parseTransformOrigin (value: string) {
     y: 0
   }
 }
+
+function directionToAngle(direction) {
+  const map = {
+    'to top': 270,
+    'to bottom': 90,
+    'to left': 180,
+    'to right': 0,
+    'to top left': 225,
+    'to left top': 225,
+    'to top right': 315,
+    'to right top': 315,
+    'to bottom left': 135,
+    'to left bottom': 135,
+    'to bottom right': 45,
+    'to right bottom': 45
+  }
+  return map[direction.toLowerCase()] || 0 // 默认为0度（to right）
+}
+
+function parseGradient(gradientString) {
+  const directionPattern = /linear-gradient\((to [a-z ]+|\d+deg),/
+  const directionMatch = gradientString.match(directionPattern)
+  let angle
+
+  if (directionMatch) {
+    const direction = directionMatch[1]
+    if (direction.includes('deg')) {
+      angle = parseInt(direction, 10)
+    } else {
+      angle = directionToAngle(direction)
+    }
+  } else {
+    angle = 0 // 默认方向为向右（0度）
+  }
+  const colorPattern = /(?:(#[0-9a-f]{3,8}|rgba?\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*(?:,\s*\d*\.?\d+\s*)?\)))\s*(\d*%|)/gi
+  const colors = []
+  let match
+  while ((match = colorPattern.exec(gradientString)) !== null) {
+    const color = match[1] ? match[1].trim() : null
+    const position = match[2] ? parseInt(match[2], 10) / 100 : null
+    colors.push([color, position])
+  }
+
+  if (colors.some(color => color[1] === null)) {
+    const step = 1 / (colors.length - 1)
+    colors.forEach((color, index) => (color[1] = index * step))
+  }
+
+  return {
+    angle: angle,
+    colors: colors
+  }
+}
+
+function rgbaToHex(rgba) {
+  const parts = rgba.match(/rgba?\((\d+),\s*(\d+),\s*(\d+),?\s*(\d*\.?\d+)?\)/)
+  if (!parts) return rgba // 如果匹配失败，返回原字符串
+
+  const r = parseInt(parts[1]).toString(16).padStart(2, '0')
+  const g = parseInt(parts[2]).toString(16).padStart(2, '0')
+  const b = parseInt(parts[3]).toString(16).padStart(2, '0')
+  if (parts[4]) {
+    const a = parts[4] ? Math.round(parseFloat(parts[4]) * 255).toString(16).padStart(2, '0') : 'ff'
+    return `#${a}${r}${g}${b}`
+  } else {
+    return `#${r}${g}${b}`
+  }
+}
+function preprocessCss(css) {
+  return css.replace(/rgba?\((\d+\s*,\s*\d+\s*,\s*\d+\s*,?\s*\d*\.?\d*)\)/g, (match) => {
+    return rgbaToHex(match)
+  })
+}

package/dist/runtime-utils.d.ts

@@ -588,7 +588,7 @@ declare namespace apis {
     function showToast(options: any): Promise<unknown>;
     function showModal(options: any): Promise<unknown>;
     function showActionSheet(options: any): Promise<unknown>;
-    function hideToast(options: any): Promise<unknown>;
+    const hideToast: (option?: {}, ...args: any[]) => Promise<Partial<ICallbackResult> & Record<string, unknown> & ICallbackResult>;
     const showLoading: (option?: {}, ...args: any[]) => Promise<Partial<ICallbackResult> & Record<string, unknown> & ICallbackResult>;
     const hideLoading: (option?: {}, ...args: any[]) => Promise<Partial<ICallbackResult> & Record<string, unknown> & ICallbackResult>;
     const enableAlertBeforeUnload: (option?: {}, ...args: any[]) => Promise<Partial<ICallbackResult> & Record<string, unknown> & ICallbackResult>;

package/dist/runtime-utils.js

@@ -656,7 +656,12 @@ const setClipboardData = function (options) {
                 callAsyncFail(reject, res, options);
             }
             else {
-                promptAction.showToast({ message: '内容已复制' });
+                promptAction.showToast({
+                    message: '内容已复制',
+                    duration: 1500,
+                    bottom: '50%',
+                    showMode: 1 // 设置弹窗显示模式，显示在应用之上。
+                });
                 return handle.success({
                     data,
                 }, { resolve, reject });
@@ -3645,7 +3650,6 @@ function showToast(options) {
             message: options.title,
             duration: options.duration,
             bottom: options.bottom,
-            // @ts-ignore
             showMode: 1 // 设置弹窗显示模式，显示在应用之上。
         });
         callAsyncSuccess(resolve, resCallback('showToast'), options);
@@ -3735,16 +3739,7 @@ function showActionSheet(options) {
         });
     });
 }
-function hideToast(options) {
-    return new Promise(resolve => {
-        promptAction.showToast({
-            message: '关闭中',
-            duration: 10,
-            bottom: '9999px'
-        });
-        callAsyncSuccess(resolve, resCallback('hideToast'), options);
-    });
-}
+const hideToast = /* @__PURE__ */ temporarilyNotSupport('hideToast');
 const showLoading = temporarilyNotSupport('showLoading');
 const hideLoading = temporarilyNotSupport('hideLoading');
 const enableAlertBeforeUnload = /* @__PURE__ */ temporarilyNotSupport('enableAlertBeforeUnload');