!25 删除旧代码，新增atomicservicetabs组件

Merge pull request !25 from 连漪/master

BUILD.gn

@@ -0,0 +1,16 @@
+# Copyright (c) 2024 Huawei Device Co., Ltd.
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+group("as_advanced_ui_component") {
+  deps = [ "atomicservicetabs/interfaces:atomicservicetabs" ]
+}

README.md

@@ -7,6 +7,7 @@ advanced_ui is an ArkTS-based UI framework that offers efficient UI combinations
 **Figure 1** Relationship between advanced_ui and ArkUI
 
 ![](figures/advanced_ui_en.png "Relationship between advanced_ui and ArkUI")
+
 **Figure 2** advanced_ui architecture
 
 ![](figures/advanced_ui_sub_en.png "advanced_ui architecture")
@@ -16,20 +17,12 @@ The following figure shows the directory structure.
 
 ```
 /arkui_advanced_ui_component
-├── interface                       # APIs
-│   ├── arkdialog                   # Components
-│   └── composelistitem
-│   └── .....
+├── atomicservicetabs                   # Components
+│   └── interface                       # APIs
+│   └── source                          # framework sorce work
+├── .....
 
-├── source                          # Framework source code
-│   ├── arkdialog                   # Components
-│   └── composelistitem
-│   └── .....
 ```
 ## When to Use
 
 With advanced_ui, you can develop your application UI must faster, leveraging its diverse array of UI component combinations with consistent design and style definitions. You can use and reuse any component anywhere as needed.
-
-## How to Use
-> See the [doc folder](https://gitee.com/openharmony-sig/arkui_advanced_ui_component/tree/master/doc).
- 

README_zh.md

@@ -4,9 +4,12 @@
 advanced_ui 是基于使用场景设计，为应用提供高效的UI组合，接口封闭、风格一致，开箱即用的组件接口；使用ArkTS语言开发，依赖系统的public API
 
 ## 软件架构
-**图 1**  advanced_ui和ArkUI架构关系 
+**图 1**  advanced_ui和ArkUI架构关系
+
 ![](figures/advanced_ui.png "advanced_ui和ArkUI架构关系")
-**图 2**  advanced_ui架构设计 
+
+**图 2**  advanced_ui架构设计
+
 ![](figures/advanced_ui_sub.png "advanced_ui架构设计")
 
 ## 目录
@@ -14,15 +17,11 @@ advanced_ui 是基于使用场景设计，为应用提供高效的UI组合，接
 
 ```
 /arkui_advanced_ui_component
-├── interface                       # 接口目录
-│   ├── arkdialog                   # 各个组件目录
-│   └── composelistitem
-│   └── .....
+├── atomicservicetabs                   # Components
+│   └── interface                       # APIs
+│   └── source                          # framework sorce work
+├── .....
 
-├── source                          # 框架源码
-│   ├── arkdialog                   # 各个组件目录
-│   └── composelistitem
-│   └── .....
 ```
 ## 使用场景<a name="section171384529150"></a>
 

atomicservicetabs/interfaces/BUILD.gn

@@ -0,0 +1,59 @@
+# Copyright (c) 2024 Huawei Device Co., Ltd.
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+import("//build/config/components/ets_frontend/es2abc_config.gni")
+import("//build/ohos.gni")
+import("//foundation/arkui/ace_engine/ace_config.gni")
+import("//foundation/arkui/ace_engine/adapter/preview/build/config.gni")
+import("//foundation/arkui/ace_engine/build/ace_gen_obj.gni")
+
+es2abc_gen_abc("gen_atomicservicetabs_abc") {
+  src_js = rebase_path("atomicservicetabs.js")
+  dst_file = rebase_path(target_out_dir + "/atomicservicetabs.abc")
+  in_puts = [ "atomicservicetabs.js" ]
+  out_puts = [ target_out_dir + "/atomicservicetabs.abc" ]
+  extra_args = [ "--module" ]
+}
+
+gen_js_obj("atomicservicetabs_abc") {
+  input = get_label_info(":gen_atomicservicetabs_abc", "target_out_dir") +
+          "/atomicservicetabs.abc"
+  output = target_out_dir + "/atomicservicetabs_abc.o"
+  dep = ":gen_atomicservicetabs_abc"
+}
+
+gen_obj("atomicservicetabs_abc_preview") {
+  input = get_label_info(":gen_atomicservicetabs_abc", "target_out_dir") +
+          "/atomicservicetabs.abc"
+  output = target_out_dir + "/atomicservicetabs_abc.c"
+  snapshot_dep = [ ":gen_atomicservicetabs_abc" ]
+}
+
+ohos_shared_library("atomicservicetabs") {
+  sources = [ "atomicservicetabs.cpp" ]
+
+  if (use_mingw_win || use_mac || use_linux) {
+    deps = [ ":gen_obj_src_atomicservicetabs_abc_preview" ]
+  } else {
+    deps = [ ":atomicservicetabs_abc" ]
+  }
+
+  external_deps = [
+    "hilog:libhilog",
+    "napi:ace_napi",
+  ]
+
+  relative_install_dir = "module/atomicservice"
+  subsystem_name = "arkui"
+  part_name = "as_advanced_ui_component"
+}

atomicservicetabs/interfaces/atomicservicetabs.cpp

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2023-2023 Huawei Device Co., Ltd.
+ * Copyright (c) 2024 Huawei Device Co., Ltd.
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
@@ -13,42 +13,39 @@
  * limitations under the License.
  */
 
-#include "native_engine/native_engine.h"
-
-#include "napi/native_api.h"
 #include "napi/native_node_api.h"
 
-extern const char _binary_subheader_abc_start[];
-extern const char _binary_subheader_abc_end[];
+extern const char _binary_atomicservicetabs_abc_start[];
+extern const char _binary_atomicservicetabs_abc_end[];
 
 // Napi get abc code function
 extern "C" __attribute__((visibility("default")))
-void NAPI_arkui_advanced_SubHeader_GetABCCode(const char **buf, int *buflen)
+void NAPI_atomicservice_AtomicServiceTabs_GetABCCode(const char **buf, int *buflen)
 {
     if (buf != nullptr) {
-        *buf = _binary_subheader_abc_start;
+        *buf = _binary_atomicservicetabs_abc_start;
     }
     if (buflen != nullptr) {
-        *buflen = _binary_subheader_abc_end - _binary_subheader_abc_start;
+        *buflen = _binary_atomicservicetabs_abc_end - _binary_atomicservicetabs_abc_start;
     }
 }
 
 /*
  * Module define
  */
-static napi_module subheaderModule = {
+static napi_module AtomicServiceTabsModule = {
     .nm_version = 1,
     .nm_flags = 0,
     .nm_filename = nullptr,
-    .nm_modname = "arkui.advanced.SubHeader",
+    .nm_modname = "atomicservice.AtomicServiceTabs",
     .nm_priv = ((void*)0),
     .reserved = { 0 },
 };
 
 /*
- * Module register function
+ * Module registerfunction
  */
-extern "C" __attribute__((constructor)) void subheaderRegisterModule(void)
+extern "C" __attribute__((constructor)) void AtomicServiceTabsRegisterModule(void)
 {
-    napi_module_register(&subheaderModule);
+    napi_module_register(&AtomicServiceTabsModule);
 }

atomicservicetabs/interfaces/atomicservicetabs.js

@@ -0,0 +1,205 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to  in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+if (!("finalizeConstruction" in ViewPU.prototype)) {
+    Reflect.set(ViewPU.prototype, "finalizeConstruction", () => { });
+}
+const DEFAULT_BAR_WIDTH = 96;
+const DEFAULT_BAR_HEIGHT = 52;
+export class AtomicServiceTabs extends ViewPU {
+    constructor(m1, n1, o1, p1 = -1, q1 = undefined, r1) {
+        super(m1, o1, p1, r1);
+        if (typeof q1 === "function") {
+            this.paramsGenerator_ = q1;
+        }
+        this.tabContents = undefined;
+        this.__tabBarOptionsArray = new SynchedPropertyObjectOneWayPU(n1.tabBarOptionsArray, this, "tabBarOptionsArray");
+        this.__tabBarPosition = new SynchedPropertySimpleOneWayPU(n1.tabBarPosition, this, "tabBarPosition");
+        this.__barBackgroundColor = new SynchedPropertyObjectOneWayPU(n1.barBackgroundColor, this, "barBackgroundColor");
+        this.__index = new SynchedPropertyObjectOneWayPU(n1.index, this, "index");
+        this.__barOverlap = new SynchedPropertySimpleOneWayPU(n1.barOverlap, this, "barOverlap");
+        this.controller = new TabsController();
+        this.onChange = undefined;
+        this.onTabBarClick = undefined;
+        this.onContentWillChange = undefined;
+        this.setInitiallyProvidedValue(n1);
+        this.finalizeConstruction();
+    }
+    setInitiallyProvidedValue(l1) {
+        if (l1.tabContents !== undefined) {
+            this.tabContents = l1.tabContents;
+        }
+        if (l1.tabBarPosition === undefined) {
+            this.__tabBarPosition.set(TabBarPosition.BOTTOM);
+        }
+        if (l1.barBackgroundColor === undefined) {
+            this.__barBackgroundColor.set(Color.Transparent);
+        }
+        if (l1.index === undefined) {
+            this.__index.set(0);
+        }
+        if (l1.barOverlap === undefined) {
+            this.__barOverlap.set(true);
+        }
+        if (l1.controller !== undefined) {
+            this.controller = l1.controller;
+        }
+        if (l1.onChange !== undefined) {
+            this.onChange = l1.onChange;
+        }
+        if (l1.onTabBarClick !== undefined) {
+            this.onTabBarClick = l1.onTabBarClick;
+        }
+        if (l1.onContentWillChange !== undefined) {
+            this.onContentWillChange = l1.onContentWillChange;
+        }
+    }
+    updateStateVars(k1) {
+        this.__tabBarOptionsArray.reset(k1.tabBarOptionsArray);
+        this.__tabBarPosition.reset(k1.tabBarPosition);
+        this.__barBackgroundColor.reset(k1.barBackgroundColor);
+        this.__index.reset(k1.index);
+        this.__barOverlap.reset(k1.barOverlap);
+    }
+    purgeVariableDependenciesOnElmtId(j1) {
+        this.__tabBarOptionsArray.purgeDependencyOnElmtId(j1);
+        this.__tabBarPosition.purgeDependencyOnElmtId(j1);
+        this.__barBackgroundColor.purgeDependencyOnElmtId(j1);
+        this.__index.purgeDependencyOnElmtId(j1);
+        this.__barOverlap.purgeDependencyOnElmtId(j1);
+    }
+    aboutToBeDeleted() {
+        this.__tabBarOptionsArray.aboutToBeDeleted();
+        this.__tabBarPosition.aboutToBeDeleted();
+        this.__barBackgroundColor.aboutToBeDeleted();
+        this.__index.aboutToBeDeleted();
+        this.__barOverlap.aboutToBeDeleted();
+        SubscriberManager.Get().delete(this.id__());
+        this.aboutToBeDeletedInternal();
+    }
+    get tabBarOptionsArray() {
+        return this.__tabBarOptionsArray.get();
+    }
+    set tabBarOptionsArray(i1) {
+        this.__tabBarOptionsArray.set(i1);
+    }
+    get tabBarPosition() {
+        return this.__tabBarPosition.get();
+    }
+    set tabBarPosition(h1) {
+        this.__tabBarPosition.set(h1);
+    }
+    get barBackgroundColor() {
+        return this.__barBackgroundColor.get();
+    }
+    set barBackgroundColor(g1) {
+        this.__barBackgroundColor.set(g1);
+    }
+    get index() {
+        return this.__index.get();
+    }
+    set index(f1) {
+        this.__index.set(f1);
+    }
+    get barOverlap() {
+        return this.__barOverlap.get();
+    }
+    set barOverlap(e1) {
+        this.__barOverlap.set(e1);
+    }
+    initialRender() {
+        this.observeComponentCreation2((c1, d1) => {
+            Tabs.create({
+                barPosition: this.tabBarPosition === TabBarPosition.LEFT ? BarPosition.Start : BarPosition.End,
+                index: this.index,
+                controller: this.controller
+            });
+            Tabs.barBackgroundColor(ObservedObject.GetRawObject(this.barBackgroundColor));
+            Tabs.divider(null);
+            Tabs.vertical(this.tabBarPosition === TabBarPosition.LEFT ? true : false);
+            Tabs.scrollable(false);
+            Tabs.barOverlap(this.barOverlap);
+            Tabs.barBackgroundBlurStyle(BlurStyle.COMPONENT_THICK);
+            Tabs.onChange(this.onChange);
+            Tabs.onTabBarClick(this.onTabBarClick);
+            Tabs.onContentWillChange(this.onContentWillChange);
+            Tabs.width((!this.tabContents && this.tabBarPosition === TabBarPosition.LEFT) ? DEFAULT_BAR_WIDTH : '100%');
+            Tabs.height((!this.tabContents && this.tabBarPosition === TabBarPosition.BOTTOM) ? DEFAULT_BAR_HEIGHT : '100%');
+        }, Tabs);
+        this.observeComponentCreation2((h, i) => {
+            ForEach.create();
+            const j = (l, m) => {
+                const n = l;
+                this.observeComponentCreation2((p, q) => {
+                    If.create();
+                    if (n) {
+                        this.ifElseBranchUpdateFunction(0, () => {
+                            this.observeComponentCreation2((u, v) => {
+                                TabContent.create(() => {
+                                    this.observeComponentCreation2((y, z) => {
+                                        If.create();
+                                        if (this.tabContents && this.tabContents[m]) {
+                                            this.ifElseBranchUpdateFunction(0, () => {
+                                                this.tabContents[m]?.bind(this)?.(this);
+                                            });
+                                        }
+                                        else {
+                                            this.ifElseBranchUpdateFunction(1, () => {
+                                            });
+                                        }
+                                    }, If);
+                                    If.pop();
+                                });
+                                TabContent.tabBar(BottomTabBarStyle.of(n.icon, n.text)
+                                    .labelStyle({ unselectedColor: n.unselectedColor, selectedColor: n.selectedColor })
+                                    .iconStyle({ unselectedColor: n.unselectedColor, selectedColor: n.selectedColor }));
+                                TabContent.width((!this.tabContents && this.tabBarPosition === TabBarPosition.LEFT) ? DEFAULT_BAR_WIDTH : '100%');
+                                TabContent.height((!this.tabContents && this.tabBarPosition === TabBarPosition.BOTTOM) ? DEFAULT_BAR_HEIGHT : '100%');
+                            }, TabContent);
+                            TabContent.pop();
+                        });
+                    }
+                    else {
+                        this.ifElseBranchUpdateFunction(1, () => {
+                        });
+                    }
+                }, If);
+                If.pop();
+            };
+            this.forEachUpdateFunction(h, this.tabBarOptionsArray, j, undefined, true, false);
+        }, ForEach);
+        ForEach.pop();
+        Tabs.pop();
+    }
+    rerender() {
+        this.updateDirtyElements();
+    }
+}
+export class TabBarOptions {
+    constructor(b, c, d, e) {
+        this.icon = b;
+        this.text = c;
+        this.unselectedColor = d;
+        this.selectedColor = e;
+    }
+}
+
+export var TabBarPosition;
+(function (a) {
+    a[a["LEFT"] = 0] = "LEFT";
+    a[a["BOTTOM"] = 1] = "BOTTOM";
+})(TabBarPosition || (TabBarPosition = {}));
+
+export default { AtomicServiceTabs, TabBarOptions, TabBarPosition};

atomicservicetabs/source/atomicservicetabs.ets

@@ -0,0 +1,92 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+const DEFAULT_BAR_WIDTH: number = 96;
+const DEFAULT_BAR_HEIGHT: number = 52;
+
+@Component
+export struct AtomicServiceTabs {
+  @BuilderParam tabContents?: [TabContentBuilder?,
+                              TabContentBuilder?,
+                              TabContentBuilder?,
+                              TabContentBuilder?,
+                              TabContentBuilder?];
+  @Prop tabBarOptionsArray: [TabBarOptions, TabBarOptions, TabBarOptions?, TabBarOptions?, TabBarOptions?];
+  @Prop tabBarPosition?: TabBarPosition = TabBarPosition.BOTTOM;
+  @Prop barBackgroundColor?: ResourceColor = Color.Transparent;
+  @Prop index?: number | undefined = 0;
+  @Prop barOverlap?: boolean = true;
+  controller?: TabsController = new TabsController();
+  onChange?: Callback<number>;
+  onTabBarClick?: Callback<number>;
+  onContentWillChange?: OnContentWillChangeCallback;
+
+  build() {
+    Tabs({
+      barPosition: this.tabBarPosition === TabBarPosition.LEFT ? BarPosition.Start : BarPosition.End,
+      index: this.index,
+      controller: this.controller
+    }) {
+      ForEach(this.tabBarOptionsArray, (item: TabBarOptions, index: number) => {
+        if (item) {
+          TabContent() {
+            if (this.tabContents && this.tabContents[index]) {
+              this.tabContents[index]?.()
+            }
+          }
+          .tabBar(BottomTabBarStyle.of(item.icon, item.text)
+            .labelStyle({ unselectedColor: item.unselectedColor, selectedColor: item.selectedColor })
+            .iconStyle({ unselectedColor: item.unselectedColor, selectedColor: item.selectedColor }))
+          .width((!this.tabContents && this.tabBarPosition === TabBarPosition.LEFT) ? DEFAULT_BAR_WIDTH : '100%')
+          .height((!this.tabContents && this.tabBarPosition === TabBarPosition.BOTTOM) ? DEFAULT_BAR_HEIGHT : '100%')
+        }
+      })
+    }
+    .barBackgroundColor(this.barBackgroundColor)
+    .divider(null)
+    .vertical(this.tabBarPosition === TabBarPosition.LEFT ? true : false)
+    .scrollable(false)
+    .barOverlap(this.barOverlap)
+    .barBackgroundBlurStyle(BlurStyle.COMPONENT_THICK)
+    .onChange(this.onChange)
+    .onTabBarClick(this.onTabBarClick)
+    .onContentWillChange(this.onContentWillChange)
+    .width((!this.tabContents && this.tabBarPosition === TabBarPosition.LEFT) ? DEFAULT_BAR_WIDTH : '100%')
+    .height((!this.tabContents && this.tabBarPosition === TabBarPosition.BOTTOM) ? DEFAULT_BAR_HEIGHT : '100%')
+  }
+}
+
+export class TabBarOptions {
+  public icon: ResourceStr | TabBarSymbol;
+  public text: ResourceStr;
+  public unselectedColor?: ResourceColor;
+  public selectedColor?: ResourceColor;
+
+  constructor(icon: ResourceStr | TabBarSymbol, text: ResourceStr,
+              unselectedColor?: ResourceColor, selectedColor?: ResourceColor) {
+    this.icon = icon;
+    this.text = text;
+    this.unselectedColor = unselectedColor;
+    this.selectedColor = selectedColor;
+  }
+}
+
+export enum TabBarPosition {
+  LEFT = 0,
+  BOTTOM = 1
+}
+
+export type TabContentBuilder = () => void;
+export type OnContentWillChangeCallback = (currentIndex: number, comingIndex: number) => boolean;

bundle.json

@@ -1,13 +1,13 @@
 {
     "name": "@ohos/advanced_ui_component",
     "version": "1.0.0",
-    "description": "advanced_ui_component",
+    "description": "as_advanced_ui_component",
     "publishAs": "code-segment",
     "segment": {
-        "destPath": "foundation/arkui/advanced_ui_component"
+        "destPath": "foundation/arkui/as_advanced_ui_component"
     },
     "component": {
-        "name": "advanced_ui_component",
+        "name": "as_advanced_ui_component",
         "subsystem": "arkui",
         "syscap": [],
         "features": [],
@@ -25,19 +25,7 @@
         },
         "build": {
             "sub_component": [
-              "//foundation/arkui/advanced_ui_component/interface/filter:filter",
-              "//foundation/arkui/advanced_ui_component/interface/composetitlebar:composetitlebar",
-              "//foundation/arkui/advanced_ui_component/interface/editabletitlebar:editabletitlebar",
-              "//foundation/arkui/advanced_ui_component/interface/selecttitlebar:selecttitlebar",
-              "//foundation/arkui/advanced_ui_component/interface/tabtitlebar:tabtitlebar",
-              "//foundation/arkui/advanced_ui_component/interface/splitlayout:splitlayout",
-              "//foundation/arkui/advanced_ui_component/interface/subheader:subheader",
-              "//foundation/arkui/advanced_ui_component/interface/treeview:treeview",
-              "//foundation/arkui/advanced_ui_component/interface/composelistitem:composelistitem",
-              "//foundation/arkui/advanced_ui_component/interface/swiperefresher:swiperefresher",
-              "//foundation/arkui/advanced_ui_component/interface/arkdialog:arkdialog",
-              "//foundation/arkui/advanced_ui_component/interface/toolbar:toolbar",
-              "//foundation/arkui/advanced_ui_component/interface/progressbutton:progressbutton"
+              "//foundation/arkui/arkui_advanced_ui_component/atomicservicetabs/interfaces:atomicservicetabs"
             ],
             "inner_kits": [],
             "test": []

doc/Readme-CN.md

@@ -1,15 +0,0 @@
-# 组件目录
-
-- [Dialog](ts-composite-components-arkdialog.md)
-- [SplitLayout](ts-composite-components-splitlayout.md)
-- [ToolBar](ts-composite-components-toolbar.md)
-- [ProgressButton](ts-composite-components-progressbutton.md)
-- [SubHeader](ts-composite-components-subheader.md)
-- [Filter](ts-composite-components-filter.md)
-- [TreeView](ts-composite-components-treeview.md)
-- [ComposeListItem](ts-composite-components-composelistitem.md)
-- [EditableTitleBar](ts-composite-components-editabletitlebar.md)
-- [ComposeTitleBar](ts-composite-components-composetitlebar.md)
-- [SelectTitleBar](ts-composite-components-selecttitlebar.md)
-- [TabTitleBar](ts-composite-components-tabtitlebar.md)
-- [SwipeRefresher](ts-composite-components-swiperefresher.md)

doc/ts-composite-components-arkdialog.md

@@ -1,414 +0,0 @@
-# Dialog
-
-
-弹出框是一种模态窗口，通常用于在保持当前的上下文环境时，临时展示用户需关注的信息或待处理的操作，用户在模态弹出框内完成上述交互任务。模态弹出框需要用户进行交互才能够退出模态模式。
-
-
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
-> 该组件从API Version 10开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
-
-
-## 导入模块
-
-```
-import { TipsDialog, SelectDialog, ConfirmDialog, AlertDialog, LoadingDialog } from '@ohos.arkui.advanced.Dialog'
-```
-
-
-## 子组件
-
-无
-
-
-## TipsDialog
-
-
-TipsDialog({controller: CustomDialogController, imageRes: Resource, imageSize: SizeOptions, title: ResourceStr, content?: ResourceStr, checkTips?: ResourceStr, ischecked?: boolean, primaryButton?: ButtonOptions, secondaryButton?: ButtonOptions})
-
-
-提示弹出框，即为带图形确认框，必要时可通过图形化方式展现确认框。
-
-
-**装饰器类型：**\@CustomDialog
-
-
-**系统能力：** SystemCapability.ArkUI.ArkUI.Full
-
-
-**参数：**
-
-
-| 参数名 | 参数类型 | 必填 | 装饰器类型 | 描述 | 
-| -------- | -------- | -------- | -------- | -------- |
-| controller | [CustomDialogController](https://docs.openharmony.cn/pages/v3.2/en/application-dev/reference/arkui-ts/ts-methods-custom-dialog-box.md/) | 是 | - | 提示弹出框控制器。 | 
-| imageRes | [Resource](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resource) | 是 | - | 展示的图片。 | 
-| imageSize | [SizeOptions](https://docs.openharmony.cn/pages/v4.0/en/application-dev/reference/arkui-ts/ts-types.md/#sizeoptions) | 是 | - | 自定义图片尺寸。 | 
-| title | [ResourceStr](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resourcestr) | 是 | - | 提示弹出框标题。 | 
-| content | [ResourceStr](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resourcestr) | 否 | - | 提示弹出框内容。 | 
-| checkTips | [ResourceStr](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resourcestr) | 否 | - | checkbox的提示内容。 | 
-| isChecked | boolean | 否 | \@Prop | value为true时，表示checkbox已选中，value为false时，表示未选中。<br/>默认值：false。 | 
-| primaryButton | [ButtonOptions](#buttonoptions) | 否 | - | 提示框左侧按钮。 | 
-| secondaryButton | [ButtonOptions](#buttonoptions) | 否 | - | 提示框右侧按钮。 | 
-
-
-## SelectDialog
-
-SelectDialog({controller: CustomDialogController, title: ResourceStr, content?: ResourceStr, selectedIndex?: number, confirm?: ButtonOptions, radioContent?: Array&lt;SheetInfo&gt;})
-
-选择类弹出框，弹框中以列表或网格的形式提供可选的的内容。
-
-**装饰器类型：**\@CustomDialog
-
-**系统能力：** SystemCapability.ArkUI.ArkUI.Full
-
-**参数：**
-
-| 参数名 | 参数类型 | 必填 | 描述 | 
-| -------- | -------- | -------- | -------- |
-| controller | CustomDialogController | 是 | 选择弹出框控制器。 | 
-| title | [ResourceStr](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resourcestr) | 是 | 选择弹出框标题。 | 
-| content | [ResourceStr](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resourcestr) | 否 | 选择弹出框内容。 | 
-| selectedIndex | number | 否 | 选择弹出框的选中项。 | 
-| confirm | boolean | 否 | 确认按钮。 | 
-| radioContent | Array&lt;[SheetInfo](https://docs.openharmony.cn/pages/v3.2/en/application-dev/reference/arkui-ts/ts-methods-action-sheet.md/)&gt; | 否 | 选择弹出框的子项内容列表，每个选择项支持设置图片、文本和选中的回调事件。 | 
-
-
-## ConfirmDialog
-
-ConfirmDialog({controller: CustomDialogController, title: ResourceStr, content?: ResourceStr, checkTips?: ResourceStr, ischecked?: boolean, primaryButton?: ButtonOptions, secondaryButton?: ButtonOptions})
-
-信息确认类弹出框，操作未正确执行（如网络错误、电池电量过低），或未正确操作时（如指纹录入），反馈的错误或提示信息。
-
-**装饰器类型：**\@CustomDialog
-
-**系统能力：** SystemCapability.ArkUI.ArkUI.Full
-
-**参数：**
-
-| 参数名 | 参数类型 | 必选 | 装饰器类型 | 参数描述 | 
-| -------- | -------- | -------- | -------- | -------- |
-| controller | CustomDialogController | 是 | - | 确认弹出框控制器。 | 
-| title | [ResourceStr](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resourcestr) | 是 | - | 确认弹出框标题。 | 
-| content | [ResourceStr](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resourcestr) | 否 | - | 确认弹出框内容。 | 
-| checkTips | [ResourceStr](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resourcestr) | 否 | - | checkbox的提示内容。 | 
-| isChecked | boolean | 否 | \@Prop | value为true时，表示checkbox已选中，value为false时，表示未选中。<br/>默认值：false。 | 
-| primaryButton | [ButtonOptions](#buttonoptions) | 否 | - | 确认框左侧按钮。 | 
-| secondaryButton | [ButtonOptions](#buttonoptions) | 否 | - | 确认框右侧按钮。 | 
-
-
-## AlertDialog
-
-AlertDialog({controller: CustomDialogController, content?: ResourceStr, primaryButton?: ButtonOptions, secondaryButton?: ButtonOptions})
-
-操作确认类弹出框，触发一个将产生严重后果的不可逆操作时，如删除、重置、取消编辑、停止等。
-
-**装饰器类型：**\@CustomDialog
-
-**系统能力：** SystemCapability.ArkUI.ArkUI.Full
-
-**参数：**
-
-| 参数名 | 参数类型 | 必选 | 参数描述 | 
-| -------- | -------- | -------- | -------- |
-| controller | CustomDialogController | 是 | 确认弹出框控制器。 | 
-| content | [ResourceStr](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resourcestr) | 是 | 确认弹出框内容。 | 
-| primaryButton | [ButtonOptions](#buttonoptions) | 否 | 确认框左侧按钮。 | 
-| secondaryButton | [ButtonOptions](#buttonoptions) | 否 | 确认框右侧按钮。 | 
-
-
-## LoadingDialog
-
-LoadingDialog({controller: CustomDialogController, content?: ResourceStr})
-
-**参数：**
-
-| 参数名 | 参数类型 | 必选 | 参数描述 | 
-| -------- | -------- | -------- | -------- |
-| controller | CustomDialogController | 是 | 加载弹出框控制器。 | 
-| content | [ResourceStr](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resourcestr) | 是 | 加载弹出框内容。 | 
-
-
-## ButtonOptions
-
-**系统能力：** SystemCapability.ArkUI.ArkUI.Full
-
-| 名称 | 类型 | 必填 | 描述 | 
-| -------- | -------- | -------- | -------- |
-| value | [ResourceStr](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resourcestr) | 是 | 按钮的内容。 | 
-| action | ()&nbsp;=&gt;&nbsp;void | 否 | 按钮的点击事件。 | 
-| background | [ResourceColor](https://docs.openharmony.cn/pages/v3.2/en/application-dev/reference/arkui-ts/ts-types.md/#resourcecolor) | 否 | 按钮的背景。 | 
-| fontColor | [ResourceColor](https://docs.openharmony.cn/pages/v3.2/en/application-dev/reference/arkui-ts/ts-types.md/#resourcecolor) | 否 | 按钮的字体颜色。 | 
-
-
-## 示例
-
-
-### 示例1
-
-```
-import { TipsDialog } from '@ohos.arkui.advanced.Dialog'
-@Entry
-@Component
-struct Index {
-  radioIndex = 0;
-  isChecked = false;
-  dialogControllerImage: CustomDialogController = new CustomDialogController({
-    builder: TipsDialog({
-      imageRes: $r('app.media.icon'),
-      title: '文本标题',
-      content: '文本文本文本文本文本文本文本文本文本',
-      isChecked: this.isChecked,
-      checkTips: '不再提示',
-      primaryButton: {
-        value: '取消',
-        action: () => {
-          console.info('Callback when the CheckBox is clicked')
-        },
-      },
-      secondaryButton: {
-        value: '确定',
-        action: () => {
-          console.info('Callback when the second button is clicked')
-        }
-      },
-    }),
-    autoCancel: true,
-    customStyle: true,
-    alignment: DialogAlignment.Bottom
-  })
-
-  build() {
-    Row() {
-      Stack() {
-        Column(){
-          Button("上图下文弹出框")
-            .width(96)
-            .height(40)
-            .onClick(() => {
-              this.dialogControllerImage.open()
-            })
-          }.margin({bottom: 300})
-        }.align(Alignment.Bottom)
-        .width('100%').height('100%')
-      }
-     .backgroundImageSize({ width: '100%', height: '100%' })
-     .height('100%')
-   }
-}
-```
-
-![20230728-111325](figures/20230728-111325.png)
-
-
-### 示例2
-
-```
-import { SelectDialog } from '@ohos.arkui.advanced.Dialog'
-@Entry
-@Component
-struct Index {
-  radioIndex = 0;
-  isChecked = false;
-dialogControllerList: CustomDialogController = new CustomDialogController({
-  builder: SelectDialog({
-    title: '文本标题',
-      selectedIndex: this.radioIndex,
-    confirm: {
-      value: '取消',
-      action: () => null,
-    },
-    radioContent: [
-      {
-      title: '文本文本文本文本文本',
-      action: () => {
-        this.radioIndex = 0
-      }
-    },
-      {
-      title: '文本文本文本文本',
-      action: () => {
-        this.radioIndex = 1
-      }
-    },
-      {
-      title: '文本文本文本文本',
-      action: () => {
-        this.radioIndex = 2
-      }
-    },
-    ]
-  }),
-  customStyle: true,
-  alignment: DialogAlignment.Bottom,
-  autoCancel: false
-})
-
-  build() {
-    Row() {
-      Stack() {
-        Column(){
-          Button("纯列表弹出框")
-            .width(96)
-            .height(40)
-            .onClick(() => {
-              this.dialogControllerList.open()
-            })
-          }.margin({bottom: 300})
-        }.align(Alignment.Bottom)
-        .width('100%').height('100%')
-      }
-     .backgroundImageSize({ width: '100%', height: '100%' })
-     .height('100%')
-   }
-}
-```
-
-![20230728-101201](figures/20230728-101201.png)
-
-
-### 示例3
-
-```
-import { ConfirmDialog } from '@ohos.arkui.advanced.Dialog'
-@Entry
-@Component
-struct Index {
-  radioIndex = 0;
-  isChecked = false;
-dialogControllerCheckBox: CustomDialogController = new CustomDialogController({
-  builder: CheckBoxDialog({
-    title: '文本标题',
-    content: '文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本',
-    isChecked: this.isChecked,
-    checkTips: '禁止后不再提示',
-    primaryButton: {
-      value: '禁止',
-      action: () => null,
-    },
-    secondaryButton: {
-      value: '允许',
-      action: () => {
-        this.isChecked = false
-        console.info('Callback when the second button is clicked')
-      }
-    },
-  }),
-  autoCancel: true,
-  customStyle: true,
-  alignment: DialogAlignment.Bottom
-})
-
-  build() {
-    Row() {
-      Stack() {
-        Column(){
-          Button("文本+勾选弹出框")
-            .width(96)
-            .height(40)
-            .onClick(() => {
-              this.dialogControllerCheckBox.open()
-            })
-          }.margin({bottom: 300})
-        }.align(Alignment.Bottom)
-        .width('100%').height('100%')
-      }
-     .backgroundImageSize({ width: '100%', height: '100%' })
-     .height('100%')
-   }
-}
-```
-
-![20230728-101236](figures/20230728-101236.png)
-
-
-### 示例4
-
-```
-import { AlertDialog } from '@ohos.arkui.advanced.Dialog'
-@Entry
-@Component
-struct Index {
-  radioIndex = 0;
-  isChecked = false;
-dialogControllerConfirm: CustomDialogController = new CustomDialogController({
-  builder: AlertDialog({
-    content: '文本文本文本文本文本',
-    primaryButton: {
-      value: '取消',
-      action: () => null,
-    },
-    secondaryButton: {
-      value: '确认',
-      fontColor: $r('sys.color.ohos_id_color_warning'),
-      action: () => {
-        console.info('Callback when the second button is clicked')
-      }
-    },
-  }),
-  autoCancel: true,
-  customStyle: true,
-  alignment: DialogAlignment.Bottom
-})
-
-  build() {
-    Row() {
-      Stack() {
-        Column(){
-          Button("纯文本弹出框")
-            .width(96)
-            .height(40)
-            .onClick(() => {
-              this.dialogControllerConfirm.open()
-            })
-          }.margin({bottom: 300})
-        }.align(Alignment.Bottom)
-        .width('100%').height('100%')
-      }
-     .backgroundImageSize({ width: '100%', height: '100%' })
-     .height('100%')
-   }
-}
-```
-
-![20230728-101355](figures/20230728-101355.png)
-
-
-### 示例5
-
-```
-import { LoadingDialog } from '@ohos.arkui.advanced.Dialog'
-@Entry
-@Component
-struct Index {
-  radioIndex = 0;
-  isChecked = false;
-dialogControllerProgress: CustomDialogController = new CustomDialogController({
-  builder: ProgressDialog({
-    content: '文本文本文本文本文本...',
-  }),
-  autoCancel: true,
-  customStyle: true,
-  alignment: DialogAlignment.Bottom
-})
-
-  build() {
-    Row() {
-      Stack() {
-        Column(){
-          Button("进度条弹出框")
-            .width(96)
-            .height(40)
-            .onClick(() => {
-              this.dialogControllerProgress.open()
-            })
-          }.margin({bottom: 300})
-        }.align(Alignment.Bottom)
-        .width('100%').height('100%')
-      }
-     .backgroundImageSize({ width: '100%', height: '100%' })
-     .height('100%')
-   }
-}
-```
-
-![20230728-101306](figures/20230728-101306.png)

doc/ts-composite-components-composelistitem.md

@@ -1,240 +0,0 @@
-# ComposeListItem
-
-
-列表包含一系列相同宽度的列表项。适合连续、多行呈现同类数据，例如图片和文本。
-
-
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
-> 该组件从API Version 10开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
-
-
-## 导入模块
-
-```
-import { ComposeListItem } from "@ohos.arkui.advanced.ComposeListItem"
-```
-
-
-## 子组件
-
-无
-
-
-## 接口
-
-ComposeListItem({contentItem?: ContentItem, operateItem?: OperateItem})
-
-**装饰器类型：**\@Component
-
-**系统能力：** SystemCapability.ArkUI.ArkUI.Full
-
-
-**参数：**
-
-
-| 参数名 | 参数类型 | 必填 | 装饰器类型 | 参数描述 | 
-| -------- | -------- | -------- | -------- | -------- |
-| contentItem | [ContentItem](#contentitem) | 否 | \@Prop | 定义左侧以及中间元素。 | 
-| operateItem | [OperateItem](#operateitem) | 否 | \@Prop | 定义右侧元素。 | 
-
-
-## ContentItem
-
-| 名称 | 值 | 必填 | 描述 | 
-| -------- | -------- | -------- | -------- |
-| iconStyle | [IconType](#icontype枚举说明) | 否 | 左侧元素-图标样式。 | 
-| icon | [ResourceStr](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resourcestr) | 否 | 左侧元素-图标。 | 
-| primaryText | [ResourceStr](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resourcestr) | 否 | 中间元素-标题内容。 | 
-| secondaryText | [ResourceStr](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resourcestr) | 否 | 中间元素-副标题内容。 | 
-| description | [ResourceStr](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resourcestr) | 否 | 中间元素-描述内容。 | 
-
-
-## IconType枚举说明
-
-| 名称 | 描述 | 
-| -------- | -------- |
-| BADGE | 左侧图标为badge类型，图标大小为8\*8dp。 | 
-| NORMAL_ICON | 左侧图标为小图标类型，图标大小为16\*16dp。 | 
-| SYSTEM_ICON | 左侧图标为系统图标类型，图标大小为24\*24dp。 | 
-| HEAD_SCULPTURE | 左侧图标为头像类型，图标大小为40\*40dp。 | 
-| APP_ICON | 左侧图标为应用图标类型，图标大小为64\*64dp。 | 
-| PREVIEW | 左侧图标为预览图类型，图标大小为96\*96dp。 | 
-| LONGITUDINAL | 左侧图标为横向特殊比例（宽比高大），保持最长边为96dp。 | 
-| VERTICAL | 左侧图标为竖向特殊比例（高比宽大），保持最长边为96dp。 | 
-
-
-## OperateItem
-
-| 名称 | 值 | 必填 | 描述 | 
-| -------- | -------- | -------- | -------- |
-| arrow | [OperateIcon](#operateicon) | 否 | 右侧元素-箭头，大小为12\*24dp。 | 
-| icon | [OperateIcon](#operateicon) | 否 | 右侧元素-第一个图标，大小为24\*24dp。 | 
-| subIcon | [OperateIcon](#operateicon) | 否 | 右侧元素-第二个图标，大小为24\*24dp。 | 
-| button | [OperateButton](#operatebutton) | 否 | 右侧元素-按钮。 | 
-| switch | [OperateCheck](https://gitee.com/openharmony-sig/arkui_advanced_ui_component/blob/master/doc/ts-composite-components-composelistitem.md#switchcheckboxradio-operatecheck) | 否 | 右侧元素-开关。 | 
-| checkbox | [OperateCheck](https://gitee.com/openharmony-sig/arkui_advanced_ui_component/blob/master/doc/ts-composite-components-composelistitem.md#switchcheckboxradio-operatecheck) | 否 | 右侧元素-多选框，大小为24\*24dp。 | 
-| radio | [OperateCheck](https://gitee.com/openharmony-sig/arkui_advanced_ui_component/blob/master/doc/ts-composite-components-composelistitem.md#switchcheckboxradio-operatecheck) | 否 | 右侧元素-单选，大小为24\*24dp。 | 
-| image | [ResourceStr](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resourcestr) | 否 | 右侧元素-图片，大小为48\*48dp。 | 
-| text | [ResourceStr](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resourcestr) | 否 | 右侧元素-文字。 | 
-
-
-## OperateIcon
-
-| 名称 | 值 | 必填 | 描述 | 
-| -------- | -------- | -------- | -------- |
-| value | [ResourceStr](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resourcestr) | 是 | 右侧元素-图标/箭头。 | 
-| action | ()=>void | 否 | 右侧元素-图标/箭头点击事件。 | 
-
-
-## OperateButton
-
-| 名称 | 值 | 必填 | 描述 | 
-| -------- | -------- | -------- | -------- |
-| text | [ResourceStr](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resourcestr) | 否 | 右侧元素-按钮文字。 | 
-
-
-## Switch/CheckBox/Radio-OperateCheck
-
-| 名称 | 值 | 必填 | 描述 | 
-| -------- | -------- | -------- | -------- |
-| isCheck | boolean | 否 | 右侧元素-右侧Switch/CheckBox/Radio选中状态。 | 
-| onChange | (value: boolean)=>void | 否 | 右侧元素-右侧Switch/CheckBox/Radio选中状态改变时触发回调。 | 
-
-
-## 示例1-纯文本
-
-```ts
-import { ComposeListItem } from '@ohos.arkui.advanced.ComposeListItem';
-import { ContentItem } from '@ohos.arkui.advanced.ComposeListItem';
-
-@Entry
-@Component
-struct ComposeListItemExample {
-  build() {
-    Column() {
-      List() {
-        ListItem(){
-          ComposeListItem({
-            contentItem: ({
-              primaryText: '单行列表'
-            })
-          })
-        }
-      }
-    }
-  }
-}
-```
-
-
-![示例1-纯文本](figures/zh-cn_image_2023072903.PNG)
-
-
-## 示例2-左侧元素+文本
-
-```ts
-import { ComposeListItem } from '@ohos.arkui.advanced.ComposeListItem';
-import { IconType } from '@ohos.arkui.advanced.ComposeListItem';
-import { ContentItem } from '@ohos.arkui.advanced.ComposeListItem';
-
-@Entry
-@Component
-struct ComposeListItemExample {
-  build() {
-    Column() {
-      List() {
-        ListItem(){
-          ComposeListItem({
-            contentItem: ({
-              iconStyle: IconType.NORMAL_ICON,
-              icon: $r('sys.media.ohos_app_icon'),
-              primaryText: '双行列表',
-              secondaryText: '辅助文字'
-            })
-          })
-        }
-      }
-    }
-  }
-}
-```
-
-
-![示例2-左侧元素+文本](figures/zh-cn_image_2023072904.PNG)
-
-
-## 示例3-右侧元素
-
-```ts
-import { ComposeListItem } from '@ohos.arkui.advanced.ComposeListItem';
-import { OperateItem } from '@ohos.arkui.advanced.ComposeListItem';
-import promptAction from '@ohos.promptAction'
-
-@Entry
-@Component
-struct ComposeListItemExample {
-  build() {
-    Column() {
-      List() {
-        ListItem() {
-          ComposeListItem({
-            operateItem: ({
-              icon: {
-                value: $r('sys.media.ohos_app_icon'),
-                action: () => {
-                  promptAction.showToast({ message: 'icon' })
-                } 
-              },
-              text: '右侧文本'
-            })
-          })
-        }
-      }
-    }
-  }
-}
-```
-
-
-![示例3-右侧元素](figures/zh-cn_image_2023072905.PNG)
-
-
-## 示例4-左右元素+文本
-
-```ts
-import { ComposeListItem } from '@ohos.arkui.advanced.ComposeListItem';
-import { IconType } from '@ohos.arkui.advanced.ComposeListItem';
-import { ContentItem } from '@ohos.arkui.advanced.ComposeListItem';
-import { OperateItem } from '@ohos.arkui.advanced.ComposeListItem';
-import promptAction from '@ohos.promptAction'
-
-@Entry
-@Component
-struct ComposeListItemExample {
-  build() {
-    Column() {
-      List() {
-        ListItem() {
-          ComposeListItem({
-            contentItem: ({
-              iconStyle: IconType.NORMAL_ICON,
-              icon: $r('sys.media.ohos_app_icon'),
-              primaryText: '双行列表',
-              secondaryText: '辅助文字'
-            }),
-            operateItem: ({
-              icon: {
-                value: $r('sys.media.ohos_app_icon'),
-                action: () => {
-                  promptAction.showToast({ message: 'icon' })
-                } },
-              text: '右侧文本'
-            })
-          })
-        }
-      }
-    }
-  }
-```
-
-![示例4-左右元素+文本](figures/zh-cn_image_2023072906.PNG)

doc/ts-composite-components-composetitlebar.md

@@ -1,177 +0,0 @@
-# ComposeTitleBar
-
-
-普通型标题栏的一种，支持设置标题、头像（可选）、副标题（可选）；可用于一级页面、二级及其以上界面（配置返回键）。
-
-
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
-> 该组件从API Version 10开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
-
-
-## 导入模块
-
-```
-import { ComposeTitleBar } from "@ohos.arkui.advanced.ComposeTitleBar"
-```
-
-
-## 子组件
-
-无
-
-
-## 接口
-
-ComposeTitleBar({item?: ComposeTitleBarMenuItem, title: ResourceStr, subtitle?: ResourceStr, menuItems?: Array<ComposeTitleBarMenuItem>})
-
-**装饰器类型：**\@Component
-
-**系统能力：** SystemCapability.ArkUI.ArkUI.Full
-
-**参数：**
-
-| 参数名 | 参数类型 | 必选 | 参数描述 | 
-| -------- | -------- | -------- | -------- |
-| item | [ERROR:Invalid link:zh-cn_topic_0000001617072014.xml#xref1948916525328,link:zh-cn_topic_0000001609264184.xml#section478410410453](zh-cn_topic_0000001609264184.xml#section478410410453) | 否 | 用于左侧头像的单个菜单项目 | 
-| title | [ResourceStr](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resourcestr) | 是 | 标题 | 
-| subtitle | [ResourceStr](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resourcestr) | 否 | 副标题 | 
-| menuItems | Array<[ERROR:Invalid link:zh-cn_topic_0000001617072014.xml#xref33563123310,link:zh-cn_topic_0000001609264184.xml#section478410410453](zh-cn_topic_0000001609264184.xml#section478410410453)> | 否 | 右侧菜单项目列表 | 
-
-
-### ComposeTitleBarMenuItem
-
-| 名称 | 值 | 是否必填 | 描述 | 
-| -------- | -------- | -------- | -------- |
-| value | [ResourceStr](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resourcestr) | 是 | 图标资源 | 
-| isEnabled | boolean | 是 | 是否启用，默认启用 | 
-| action | () => void | 否 | 触发时的动作闭包 | 
-
-
-## 示例 1 - 单行文本
-
-```
-import { ComposeTitleBar } from "@ohos.arkui.advanced.ComposeTitleBar"
-
-@Entry
-@Component
-struct Index {
-  build() {
-    Row() {
-      Column() {
-        ComposeTitleBar({
-          title: "啦啦啦啦啦啦啦啦啦啦啦啦啦啦"
-        })
-      }.width('100%')
-    }.height('100%')
-  }
-}
-```
-
-![zh-cn_image_0000001616913438](figures/zh-cn_image_0000001616913438.png)
-
-
-## 示例 2 - 双行文本
-
-```
-import { ComposeTitleBar } from "@ohos.arkui.advanced.ComposeTitleBar"
-
-@Entry
-@Component
-struct Index {
-  build() {
-    Row() {
-      Column() {
-        ComposeTitleBar({
-          title: "啦啦啦啦啦啦啦啦啦啦啦啦啦啦",
-          subtitle: "啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦"
-        })
-      }.width('100%')
-    }.height('100%')
-  }
-}
-```
-
-![zh-cn_image_0000001665513149](figures/zh-cn_image_0000001665513149.png)
-
-
-## 示例 3 - 双行文本带菜单
-
-```
-import { ComposeTitleBar } from "@ohos.arkui.advanced.ComposeTitleBar"
-import Prompt from '@system.prompt'
-
-@Entry
-@Component
-struct Index {
-  menuItems: { value: Resource, isEnabled: boolean, action: () => void }[] =
-    [ { isEnabled: true, value: $r('app.media.ic_public_save'),
-        action: () => prompt.showToast({ message: "show toast index 1" })
-      },
-      { isEnabled: true, value: $r('app.media.ic_public_reduce'),
-        action: () => prompt.showToast({ message: "show toast index 2" })
-      },
-      { isEnabled: true, value: $r('app.media.ic_public_edit'),
-        action: () => prompt.showToast({ message: "show toast index 3" })
-      },
-      { isEnabled: true, value: $r('app.media.ic_public_reduce'),
-        action: () => prompt.showToast({ message: "show toast index 4" })
-      } ]
-  build() {
-    Row() {
-      Column() {
-        Divider().height(2).color(0xCCCCCC)
-        ComposeTitleBar({
-          title: "啦啦啦啦啦啦啦啦啦啦啦啦啦啦",
-          subtitle: "啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦",
-          menuItems: this.menuItems.slice(0, 1),
-        })
-        Divider().height(2).color(0xCCCCCC)
-        ComposeTitleBar({
-          title: "啦啦啦啦啦啦啦啦啦啦啦啦啦啦",
-          subtitle: "啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦",
-          menuItems: this.menuItems.slice(0, 2),
-        })
-        Divider().height(2).color(0xCCCCCC)
-        ComposeTitleBar({
-          title: "啦啦啦啦啦啦啦啦啦啦啦啦啦啦",
-          subtitle: "啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦",
-          menuItems: this.menuItems,
-        })
-        Divider().height(2).color(0xCCCCCC)
-      }.width('100%')
-    }.height('100%')
-  }
-}
-```
-
-![zh-cn_image_0000001617233250](figures/zh-cn_image_0000001617233250.png)
-
-
-## 示例 4 - 头像+双行文本带菜单
-
-```
-import { ComposeTitleBar } from "@ohos.arkui.advanced.ComposeTitleBar"
-import Prompt from '@system.prompt'
-
-@Entry
-@Component
-struct Index {
-  build() {
-    Row() {
-      Column() {
-        ComposeTitleBar({
-          menuItems: [ { isEnabled: true, value: $r('app.media.ic_public_save'),
-            action: () => Prompt.showToast({ message: "show toast index 1" })
-          } ],
-          title: "啦啦啦啦啦啦啦啦啦啦啦啦啦啦",
-          subtitle: "啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦",
-          item: { isEnabled: true, value: $r('app.media.app_icon'),
-            action: () => Prompt.showToast({message:"show toast index portrait"})
-          } })
-      }.width('100%')
-    }.height('100%')
-  }
-}
-```
-
-![zh-cn_image_0000001617393174](figures/zh-cn_image_0000001617393174.png)

doc/ts-composite-components-editabletitlebar.md

@@ -1,130 +0,0 @@
-# EditableTitleBar
-
-
-编辑型标题栏，适用于多选界面或者内容的编辑界面，一般采取左叉右勾的形式。
-
-
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
-> 该组件从API Version 10开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
-
-
-## 导入模块
-
-```
-import { EditableTitleBar } from "@ohos.arkui.advanced.EditableTitleBar"
-```
-
-
-## 子组件
-
-无
-
-
-## 接口
-
-EditableTitleBar({leftIconType: EditableLeftIconType, title: ResourceStr, menuItems?: Array<EditableTitleBarMenuItem>, onSave?: () => void, onCancel?: () =>void})
-
-**装饰器类型：**\@Component
-
-**系统能力：** SystemCapability.ArkUI.ArkUI.Full
-
-**参数：**
-
-| 参数名 | 参数类型 | 必选 | 参数描述 | 
-| -------- | -------- | -------- | -------- |
-| leftIconStyle | [ERROR:Invalid link:zh-cn_topic_0000001665632009.xml#xref19441410133613,link:zh-cn_topic_0000001658583341.xml#section1340683083317](zh-cn_topic_0000001658583341.xml#section1340683083317) | 是 | 左侧按钮类型 | 
-| title | [ResourceStr](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resourcestr) | 是 | 标题 | 
-| menuItems | Array<[ERROR:Invalid link:zh-cn_topic_0000001665632009.xml#xref81499144365,link:zh-cn_topic_0000001658583341.xml#section1287821819325](zh-cn_topic_0000001658583341.xml#section1287821819325)> | 否 | 右侧菜单项目列表 | 
-| onSave | () => void | 否 | 保存时的动作闭包 | 
-| onCancel | () => void | 否 | 当左侧按钮类型为 Left，触发取消时的动作闭包 | 
-
-
-### EditableLeftIconType
-
-| 名称 | 描述 | 
-| -------- | -------- |
-| Back | 返回按钮 | 
-| Cancel | 取消按钮 | 
-
-
-### EditableTitleBarMenuItem
-
-| 名称 | 值 | 是否必填 | 描述 | 
-| -------- | -------- | -------- | -------- |
-| value | [ResourceStr](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resourcestr) | 是 | 图标资源 | 
-| isEnabled | boolean | 是 | 是否启用，默认启用 | 
-| action | () => void | 否 | 触发时的动作闭包 | 
-
-
-## 示例 1
-
-```
-import { EditableLeftIconType } from "@ohos.arkui.advanced.EditableTitleBar"
-import { EditableTitleBar } from "@ohos.arkui.advanced.EditableTitleBar"
-import Prompt from '@system.prompt'
-
-@Entry
-@Component
-struct Index {
-  build() {
-    Row() {
-      Column() {
-        EditableTitleBar({
-          leftIconStyle: EditableLeftIconType.Cancel,
-          title: "编辑页面",
-          menuItems: [],
-          onCancel: () => {
-            Prompt.showToast({ message: "on cancel" })
-          },
-          onSave: () => {
-            Prompt.showToast({ message: "on save" })
-          }
-        })
-      }.width('100%')
-    }.height('100%')
-  }
-}
-```
-
-
-![zh-cn_image_0000001617073302](figures/zh-cn_image_0000001617073302.png)
-
-
-## 示例 2
-
-```
-import { EditableLeftIconType } from "@ohos.arkui.advanced.EditableTitleBar"
-import { EditableTitleBar } from "@ohos.arkui.advanced.EditableTitleBar"
-import Prompt from '@system.prompt'
-
-@Entry
-@Component
-struct Index {
-  build() {
-    Row() {
-      Column() {
-        EditableTitleBar({
-          leftIconStyle: EditableLeftIconType.Back,
-          title: "编辑页面",
-          menuItems: [
-            { value: $r('app.media.ic_public_reduce'),
-              isEnabled: false,
-              action: () => {
-                Prompt.showToast({ message: "show toast index 2" })
-              }
-            }
-          ],
-          onCancel: () => {
-            Prompt.showToast({ message: "on cancel" })
-          },
-          onSave: () => {
-            Prompt.showToast({ message: "on save" })
-          }
-        })
-      }.width('100%')
-    }.height('100%')
-  }
-}
-```
-
-![zh-cn_image_0000001665393297](figures/zh-cn_image_0000001665393297.png)

doc/ts-composite-components-filter.md

@@ -1,119 +0,0 @@
-# Filter
-
-
-多条件筛选，帮助用户在大量信息中找到所需内容，应结合具体场景选择合适筛选方式。多条件筛选控件由筛选器与悬浮条构成，悬浮条可下拉展示悬浮筛选器。筛选器样式可分为多行可折叠类型与多行列表类型，并可以在筛选器最后一行附加快捷筛选器。
-
-
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
-> 该组件从API Version 10开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
-
-
-## 导入模块
-
-```
-import { Filter } from '@ohos.arkui.advanced.Filter'
-```
-
-
-## 子组件
-
-无
-
-
-## Filter
-
-Filter({ multiFilters: Array<FilterParams>,  additionFilters: FilterParams, filterType: FilterType, onFilterChanged: (Array<FilterResult>) => void })
-
-**装饰器类型：**\@Component
-
-**系统能力：** SystemCapability.ArkUI.ArkUI.Full
-
-**参数：**
-
-
-| 参数名 | 参数类型 | 必选 | 装饰器类型 | 参数描述 | 
-| -------- | -------- | -------- | -------- | -------- |
-| multiFilters | Array<[FilterParams](#filterparams)> | 是 | \@Prop | 多条件筛选列表。 | 
-| additionFilters | [FilterParams](#filterparams) | 否 | \@Prop | 附加快捷筛选项。 | 
-| filterType | [FilterType](#filtertype) | 否 | \@Prop | 筛选器的样式类型。 | 
-| onFilterChanged | (Array<[FilterResult](#filterresult)>) => void | 是 | \@Prop | 用户点击后的回调事件。回调函数的参数为选中的筛选项结果列表。 | 
-| container | ()=>void | 否 | \@BuilderParam | 筛选结果展示区域自定义内容，通过尾随闭包形式传入。 | 
-
-
-## FilterParams
-
-| 名称 | 值 | 是否必选 | 描述 | 
-| -------- | -------- | -------- | -------- |
-| name | [ResourceStr](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resourcestr) | 是 | 筛选项维度名称。 | 
-| options | Array<[ResourceStr](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resourcestr)> | 是 | 筛选项维度可选项列表。 | 
-
-
-## FilterType
-
-| 参数名 | 描述 | 
-| -------- | -------- |
-| MULTI_LINE_FILTER | 多行可折叠类型筛选器。 | 
-| LIST_FILTER | 多行列表类型筛选器。 | 
-
-
-## FilterResult
-
-| 名称 | 值 | 是否必选 | 描述 | 
-| -------- | -------- | -------- | -------- |
-| name | [ResourceStr](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resourcestr) | 是 | 筛选项维度名称。 | 
-| index | number | 是 | 该维度筛选项选中项目的索引值。<br/>默认值：-1 | 
-| value | [ResourceStr](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resourcestr) | 是 | 该维度筛选项选中项目的值。<br/>默认值："" | 
-
-
-## 示例
-
-多行可折叠Filter：内容区可完全自定义。
-
-```
-import { Filter, FilterParams, FilterResult, FilterType } from '@ohos.arkui.advanced.Filter'
-
-@Entry
-@Component
-struct Index {
-  private filterParam: Array<FilterParams> = [{name: '月份', options: ['全部','1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']},
-    {name: '年份', options: ['全部','2023','2022','2021','2020','2019','2018','2017','2016','2015','2014','2013','2012','2011','2010','2009','2008']},
-    {name: '节气', options: ['全部','立春','雨水','惊蛰','春分','清明','谷雨','立夏','小满','芒种','夏至','小暑','大暑','立秋','处暑','白露','秋分','寒露','霜降','立冬','小雪','大雪','冬至','小寒','大寒']}]
-  private additionParam: FilterParams = { name: '您还可以搜', options: ['运营栏目1','运营栏目2','运营栏目3','运营栏目4','运营栏目5','运营栏目6']}
-  private arr: number[] = [1,2,3,4,5,6,7,8,9,10,1,2,3,4,5,6,7,8,9,10];
-  build() {
-    Column() {
-      Filter({
-        multiFilters: this.filterParam,
-        additionFilters: this.additionParam,
-        filterType: FilterType.MULTI_LINE_FILTER,
-        onFilterChanged: (select: Array<FilterResult>) => {
-          console.log('rec filter change')
-          for (let filter of select) {
-            console.log('name:' + filter.name + ',index:' + filter.index + ',value:' + filter.value)
-          }
-        }
-      }){
-        List({ initialIndex: 0 }) {
-          ForEach(this.arr, (item, index: number) => {
-            ListItem() {
-              Text(item.toString())
-                .width("100%")
-                .height(100)
-                .fontSize(16)
-                .textAlign(TextAlign.Center)
-                .borderRadius(10)
-                .backgroundColor(Color.White)
-                .margin({ top:10, bottom: 10 })
-            }
-          })
-        }.backgroundColor(Color.Gray)
-        .padding({ left: 20, right: 20 })
-      }
-    }
-    .height('100%')
-    .width('100%')
-  }
-}
-```
-
-![zh-cn_image_0000001665809293](figures/zh-cn_image_0000001665809293.png)

doc/ts-composite-components-progressbutton.md

@@ -1,152 +0,0 @@
-# ProgressButton
-
-
-文本下载按钮，可显示具体下载进度。
-
-
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
-> 该组件从API Version 10开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
-
-
-## 导入模块
-
-```
-import { ProgressButton } from '@ohos.arkui.advanced.ProgressButton'
-```
-
-
-## ProgressButton
-
-ProgressButton({progress: number, content: string, progressButtonWidth?: Length, clickCallback: () => void, enable: boolean})
-
-**装饰器类型：**\@Component
-
-**系统能力：** SystemCapability.ArkUI.ArkUI.Full
-
-**参数：**
-
-| 参数名 | 参数类型 | 必填 | 装饰器类型 | 描述 | 
-| -------- | -------- | -------- | -------- | -------- |
-| progress | number | 是 | \@Prop | 下载按钮的当前进度值。 | 
-| content | string | 是 |  | 下载按钮的文本。 | 
-| progressButtonWidth | Length | 否 | - | 下载按钮的宽度。 | 
-| clickCallback | void | 是 |  | 下载按钮的点击回调。 | 
-| enable | boolean | 是 |  | 下载按钮是否可以点击，<br/>默认为true。 | 
-
-
-## 示例
-
-```
-import { ProgressButton } from '@ohos.arkui.advanced.ProgressButton'
-@Entry
-@Component
-struct Index {
-  @State halfProgress: number = 50
-  @State smallProgress: number = 8
-  @State bigProgress: number = 51
-  @State textState1: string = '下载'
-  @State textState2: string = '下载'
-  @State textState3: string = '下载'
-  @State isRunning1: boolean = false
-  @State isRunning2: boolean = false
-  @State isRunning3: boolean = false
-  @State enableState1: boolean = true
-  @State enableState2: boolean = true
-  @State enableState3: boolean = true
-  build() {
-    Column({space: 20}) {
-      Text('6、下载按钮：')
-      ProgressButton({
-        progress: this.halfProgress,
-        progressButtonWidth: "60",
-        content: this.textState1,
-        enable: this.enableState1,
-        clickCallback: () => {
-          if (this.textState1 && !this.isRunning1 && this.halfProgress < 100) {
-            this.textState1 = '继续'
-          }
-          this.isRunning1 = !this.isRunning1
-          let timer = setInterval(() => {
-            if (this.isRunning1) {
-              if (this.halfProgress === 100) {
-              } else {
-                this.halfProgress++
-                if (this.halfProgress === 100) {
-                  // this.halfProgress = 0
-                  this.textState1 = '已完成'
-                  this.enableState1 = false
-                }
-                console.info('x progress++ = ' + this.halfProgress)
-              }
-            } else {
-              console.info('x isRunning = ' + false)
-              clearInterval(timer)
-            }
-          }, 100)
-        }
-      })
-      ProgressButton({
-        progress: this.smallProgress,
-        progressButtonWidth: "100",
-        content: this.textState2,
-        enable: this.enableState2,
-        clickCallback: () => {
-          if (this.textState2 && !this.isRunning2 && this.smallProgress < 100) {
-            this.textState2 = '继续'
-          }
-          this.isRunning2 = !this.isRunning2
-          let timer = setInterval(() => {
-            if (this.isRunning2) {
-              if (this.smallProgress === 100) {
-
-              } else {
-                this.smallProgress++
-                if (this.smallProgress === 100) {
-                  this.textState2 = '已完成'
-                  this.enableState2 = false
-                }
-                console.info('x progress++ = ' + this.smallProgress)
-              }
-            } else {
-              console.info('x isRunning = ' + false)
-              clearInterval(timer)
-            }
-          }, 100)
-        }
-      })
-      ProgressButton({
-        progress: this.bigProgress,
-        progressButtonWidth: '300',
-        content: this.textState3,
-        enable: this.enableState3,
-        clickCallback: () => {
-          this.isRunning3 = !this.isRunning3
-          if (!this.isRunning3 && this.textState3 && this.bigProgress < 100) {
-            this.textState3 = '继续'
-          }
-
-          let timer = setInterval(() => {
-            if (this.isRunning3) {
-              if (this.bigProgress === 100) {
-              } else {
-                this.bigProgress++
-                if (this.bigProgress === 100) {
-                  this.textState3 = '已完成'
-                  this.enableState3 = false
-                }
-                console.info('x progress++ = ' + this.bigProgress)
-              }
-            } else {
-              console.info('x isRunning = ' + false)
-              clearInterval(timer)
-            }
-          }, 100)
-        }
-      })
-    }.alignItems(HorizontalAlign.Center).width('100%')
-  }
-}
-```
-
-
-![zh-cn_image_0000001664713029](figures/zh-cn_image_0000001664713029.png)

doc/ts-composite-components-selecttitlebar.md

@@ -1,186 +0,0 @@
-# SelectTitleBar
-
-
-普通型标题栏的一种，含有一个 Select 控件，可用于页面之间的切换；可用于一级页面、二级及其以上界面（配置返回键）。
-
-
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
-> 该组件从API Version 10开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
-
-
-## 导入模块
-
-```
-import { SelectTitleBar } from "@ohos.arkui.advanced.SelectTitleBar"
-```
-
-
-## 子组件
-
-无
-
-
-## 接口
-
-SelectTitleBar({selected: number, options: Array<SelectOption>, menuItems?: Array<SelectTitleBarMenuItem>, subtitle?: ResourceStr, badgeValue?: number, hidesBackButton?: boolean, onSelected?: (index: number) => void})
-
-**装饰器类型：**\@Component
-
-**系统能力：** SystemCapability.ArkUI.ArkUI.Full
-
-**参数：**
-
-| 参数名 | 参数类型 | 必选 | 装饰器类型 | 参数描述 |
-| -------- | -------- | -------- | -------- | -------- |
-| selected | number | 是 | \@Prop | 当前选中项目的索引 |
-| options | Array<SelectOption> | 是 | - | 下拉菜单中的项目 |
-| menuItems | Array<SelectTitleBarMenuItem&gt; | 否 | - | 右侧菜单项目列表，定义标题栏右侧的菜单项目。 |
-| subtitle | [ResourceStr](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resourcestr) | 否 | - | 子标题 |
-| badgeValue | number | 否 | - | 新事件标记 |
-| hidesBackButton | boolean | 否 | - | 是否隐藏 |
-| onSelected | (index:&nbsp;number)&nbsp;=&gt;&nbsp;void | 否 | - | 下拉菜单项目选中触发的闭包，传入选中项的索引 |
-
-
-### SelectTitleBarMenuItem
-
-| 名称 | 值 | 是否必填 | 描述 | 
-| -------- | -------- | -------- | -------- |
-| value | [ResourceStr](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resourcestr) | 是 | 图标资源 | 
-| isEnabled | boolean | 是 | 是否启用 | 
-| action | ()&nbsp;=&gt;&nbsp;void | 否 | 触发时的动作闭包 | 
-
-
-## 示例 1 - 一级页面下拉菜单
-
-```
-import { SelectTitleBar } from "@ohos.arkui.advanced.SelectTitleBar"
-import Prompt from '@system.prompt'
-
-@Entry
-@Component
-struct Index {
-  build() {
-    Row() {
-      Column() {
-        SelectTitleBar({
-          options: [
-            { value: '所有照片' },
-            { value: '本地（设备）' },
-            { value: '本地本地本地本地本地（储存卡）' }
-          ],
-          selected: 0,
-          onSelected: (index) => Prompt.showToast({ message: 'page index ' + index }),
-          hidesBackButton: true
-        })
-      }.width('100%')
-    }.height('100%')
-  }
-}
-```
-
-![zh-cn_image_0000001665793709](figures/zh-cn_image_0000001665793709.png)
-
-
-## 示例 2 - 二级页面下拉菜单
-
-```
-import { SelectTitleBar } from "@ohos.arkui.advanced.SelectTitleBar"
-import Prompt from '@system.prompt'
-
-@Entry
-@Component
-struct Index {
-  build() {
-    Row() {
-      Column() {
-        Divider().height(2).color(0xCCCCCC)
-        SelectTitleBar({
-          options: [
-            { value: '所有照片' },
-            { value: '本地（设备）' },
-            { value: '本地本地本地本地本地（储存卡）' }
-          ],
-          selected: 0,
-          onSelected: (index) => Prompt.showToast({ message: 'page index ' + index }),
-          hidesBackButton: false
-        })
-        Divider().height(2).color(0xCCCCCC)
-        SelectTitleBar({
-          options: [
-            { value: '所有照片' },
-            { value: '本地（设备）' },
-            { value: '本地本地本地本地本地（储存卡）' }
-          ],
-          selected: 1,
-          onSelected: (index) => Prompt.showToast({ message: 'page index ' + index }),
-          subtitle: "example@openharmony.cn"
-        })
-        Divider().height(2).color(0xCCCCCC)
-        SelectTitleBar({
-          options: [
-            { value: '所有照片' },
-            { value: '本地（设备）' },
-            { value: '本地本地本地本地本地（储存卡）' }
-          ],
-          selected: 1,
-          onSelected: (index) => Prompt.showToast({ message: 'page index ' + index }),
-          subtitle: "example@openharmony.cn",
-          menuItems: [ { isEnabled: true, value: $r('app.media.ic_public_save'),
-            action: () => Prompt.showToast({ message: "show toast index 1" })
-          } ]
-        })
-        Divider().height(2).color(0xCCCCCC)
-      }.width('100%')
-    }.height('100%')
-  }
-}
-```
-
-![zh-cn_image_0000001617439304](figures/zh-cn_image_0000001617439304.png)
-
-
-## 示例 3 - 新事件标记
-
-```
-import { SelectTitleBar } from "@ohos.arkui.advanced.SelectTitleBar"
-import Prompt from '@system.prompt'
-
-@Entry
-@Component
-struct Index {
-  menuItems: { value: Resource, isEnabled: boolean, action: () => void }[] =
-    [ { isEnabled: true, value: $r('app.media.ic_public_save'),
-        action: () => prompt.showToast({ message: "show toast index 1" })
-      },
-      { isEnabled: true, value: $r('app.media.ic_public_reduce'),
-        action: () => prompt.showToast({ message: "show toast index 2" })
-      },
-      { isEnabled: true, value: $r('app.media.ic_public_edit'),
-        action: () => prompt.showToast({ message: "show toast index 3" })
-      },
-      { isEnabled: true, value: $r('app.media.ic_public_reduce'),
-        action: () => prompt.showToast({ message: "show toast index 4" })
-      } ]
-  build() {
-    Row() {
-      Column() {
-        SelectTitleBar({
-          options: [
-            { value: '所有照片' },
-            { value: '本地（设备）' },
-            { value: '本地本地本地本地本地（储存卡）' }
-          ],
-          selected: 0,
-          onSelected: (index) => Prompt.showToast({ message: 'page index ' + index }),
-          subtitle: "example@openharmony.cn",
-          menuItems: this.menuItems,
-          badgeValue: 99,
-          hidesBackButton: true
-        })
-      }.width('100%')
-    }.height('100%')
-  }
-}
-```
-
-![zh-cn_image_0000001616959836](figures/zh-cn_image_0000001616959836.png)

doc/ts-composite-components-splitlayout.md

@@ -1,88 +0,0 @@
-# SplitLayout
-
-
-上下结构布局介绍了常用的页面布局样式。主要分为上下文本和上下图文两种类型。
-
-
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
-> 该组件从API Version 10开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
-
-
-## 导入模块
-
-```
-import { SplitLayout } from '@ohos.arkui.advanced.SplitLayout'
-```
-
-
-## 子组件
-
-无
-
-
-## 接口
-
-SplitLayout({mainImage: Resource, primaryText: string, secondaryText?: string, tertiaryText?: string})
-
-**装饰器类型：**\@Component
-
-**系统能力：** SystemCapability.ArkUI.ArkUI.Full
-
-**参数：**
-
-| 参数名 | 参数类型 | 必选 | 参数描述 | 
-| -------- | -------- | -------- | -------- |
-| mainImage | [ResourceStr](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resourcestr) | 是 | 传入图片。 | 
-| primaryText | [ResourceStr](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resourcestr) | 是 | 标题内容。 | 
-| secondaryText | [ResourceStr](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resourcestr) | 否 | 副标题内容。 | 
-| tertiaryText | [ResourceStr](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resourcestr) | 否 | 辅助文本。 | 
-| container | () => void | 否 | 容器内组件。 | 
-
-
-## 示例
-
-```
-import { SplitLayout } from '@ohos.arkui.advanced.SplitLayout'
-@Entry
-@Component
-struct Index {
-  @State demoImage: Resource = $r("app.media.music")
-  @State primaryText: string = "主标题"
-  @State secondaryText: string = "副标题"
-
-  build() {
-      Column() {
-        SplitLayout({
-          mainImage: this.demoImage,
-          primaryText: '新歌推荐',
-          secondaryText: '私人订制新歌精选站，为你推荐专属优质新歌;',
-          tertiaryText: "每日更新",
-        }) {
-          Text('示例：空白区域容器内可添加组件')
-            .margin({top:36})
-        }
-      }
-      .justifyContent(FlexAlign.SpaceBetween)
-      .height('100%')
-      .width('100%')
-  }
-}
-```
-
-
-小于600Vp布局：
-
-
-![zh-cn_image_0000001665553957](figures/zh-cn_image_0000001665553957.png)
-
-
-大于600Vp小于840Vp布局：
-
-
-![zh-cn_image_0000001616957408](figures/zh-cn_image_0000001616957408.png)
-
-
-大于840Vp布局：
-
-
-![zh-cn_image_0000001617116972](figures/zh-cn_image_0000001617116972.png)

doc/ts-composite-components-subheader.md

@@ -1,168 +0,0 @@
-# SubHeader
-
-
-子标题，用于列表项顶部，将该组列表划分为一个区块，子标题名称用来概括该区块内容；也可以用于内容项顶部，子标题名称用来概括该区块内容。
-
-
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
-> 该组件从API Version 10开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
-
-
-## 导入模块
-
-```ts
-import { SubHeader } from '@ohos.arkui.advanced.SubHeader'
-```
-
-
-## 子组件
-
-无
-
-
-## 接口
-
-SubHeader({primaryTitle?: ResourceStr, secondaryTitle?: ResourceStr, icon?: ResourceStr, select?: SelectOptions, operationType?: OperationType, operationItem?: Array<OperationOption>})
-
-**装饰器类型：**\@Component
-
-**系统能力：** SystemCapability.ArkUI.ArkUI.Full
-
-
-**参数：**
-
-
-| 参数名 | 参数类型 | 必填 | 装饰器类型 | 参数描述 | 
-| -------- | -------- | -------- | -------- | -------- |
-| primaryTitle | [ResourceStr](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resourcestr) | 否 | \@Prop | 标题内容。 | 
-| secondaryTitle | [ResourceStr](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resourcestr) | 否 | \@Prop | 副标题内容。 | 
-| icon | [ResourceStr](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resourcestr) | 否 | \@Prop | 图标设置项。 | 
-| select | SelectOptions | 否 | - | select内容以及事件。 | 
-| operationType | OperationType | 否 | \@Prop | 操作区(右侧)元素样式。<br/>默认值：OperationType.BUTTON | 
-| operationItem | Array&lt;OperationOption&gt; | 否 | - | 操作区（右侧）的设置项。 | 
-
-
-## OperationType枚举说明
-
-| 名称 | 描述 | 
-| -------- | -------- |
-| TEXT_ARROW | 文本按钮（带右箭头）。 | 
-| BUTTON | 文本按钮（不带右箭头）。 | 
-| ICON_GROUP | 图标按钮（最多支持配置三张图标）。 | 
-| LOADING | 加载动画。 | 
-
-
-## SelectOptions
-
-| 名称 | 值 | 是否必填 | 描述 | 
-| -------- | -------- | -------- | -------- |
-| options | Array&lt;[SelectOption](https://docs.openharmony.cn/pages/v3.1/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-select.md/)&gt; | 是 | 下拉选项内容。 | 
-| selected | number | 否 | 设置下拉菜单初始选项的索引。<br/>第一项的索引为0。<br/>当不设置selected属性时，<br/>默认选择值为-1，菜单项不选中。 | 
-| value | [ResourceStr](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resourcestr) | 否 | 设置下拉按钮本身的文本内容。 | 
-| onSelect | callback:&nbsp;(index:&nbsp;number,&nbsp;value?:&nbsp;string)&nbsp;=&gt;&nbsp;void | 否 | 下拉菜单选中某一项的回调。<br/>-&nbsp;index：选中项的索引。<br/>-&nbsp;value：选中项的值。 | 
-
-
-## OperationOption
-
-| 名称 | 值 | 是否必填 | 描述 | 
-| -------- | -------- | -------- | -------- |
-| value | [ResourceStr](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resourcestr) | 是 | 文本内容。 | 
-| action | ()=&gt;void | 否 | 事件。 | 
-
-
-## 示例
-
-```ts
-import promptAction from '@ohos.promptAction'
-import { OperationType, SubHeader } from '@ohos.arkui.advanced.SubHeader'
-
-@Entry
-@Component
-struct SubHeaderExample {
-  build() {
-    Column() {
-      SubHeader({
-        icon: $r('app.media.ic_public_community_messages'),
-        primaryTitle: '子标题',
-        operationType: OperationType.BUTTON,
-        operationItem: [{ value: '操作',
-          action: () => {
-            promptAction.showToast({ message: 'demo' })
-          }
-        }]
-      })
-    }
-  }
-}
-```
-
-![子标题3](figures/zh-cn_image_202307291.png)
-
-```ts
-import promptAction from '@ohos.promptAction'
-import { OperationType, SubHeader } from '@ohos.arkui.advanced.SubHeader'
-
-@Entry
-@Component
-struct SubHeaderExample {
-  build() {
-    Column() {
-      SubHeader({
-        primaryTitle: '标题',
-        secondaryTitle: '副文本副文本副文本副文本',
-        operationType: OperationType.TEXT_ARROW,
-        operationItem: [{ value: '更多',
-          action: () => {
-            promptAction.showToast({ message: 'demo' })
-          }
-        }]
-      })
-    }
-  }
-}
-```
-
-![zh-cn_image_0000001664546481](figures/zh-cn_image_0000001664546481.png)
-
-```ts
-import promptAction from '@ohos.promptAction'
-import { OperationType, SubHeader } from '@ohos.arkui.advanced.SubHeader'
-
-@Entry
-@Component
-struct SubHeaderExample {
-  build() {
-    Column() {
-      SubHeader({
-        select: {
-          options: [{ value: 'aaa' }, { value: 'bbb' }, { value: 'ccc' }],
-          value: 'selectdemo',
-          selected: 2,
-          onSelect: (index: number, value?: string) => {
-            promptAction.showToast({ message: 'demo' })
-          }
-        },
-        operationType: OperationType.ICON_GROUP,
-        operationItem: [{
-          value: $r('app.media.ic_public_community_messages'),
-          action: () => {
-            promptAction.showToast({ message: 'demo' })
-          }
-        }, {
-          value: $r('app.media.ic_public_community_messages'),
-          action: () => {
-            promptAction.showToast({ message: 'demo' })
-          }
-        }, {
-          value: $r('app.media.ic_public_community_messages'),
-          action: () => {
-            promptAction.showToast({ message: 'demo' })
-          }
-        }
-      })
-    }
-  }
-}
-```
-
-![子标题5](figures/zh-cn_image_2023072902.png)

doc/ts-composite-components-swiperefresher.md

@@ -1,63 +0,0 @@
-# SwipeRefresher
-
-
-内容加载指获取内容并加载出来。
-
-
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
-> 该组件及其子组件从 API Version 10 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
-
-
-## 导入模块
-
-```
-import { SwipeRefresher } from '@ohos.arkui.advacned.SwipeRefresher'
-```
-
-
-## 子组件
-
-无
-
-
-## 接口
-
-SwipeRefresher ({content: string, isLoading: boolean})
-
-**装饰器类型：**\@Component
-
-**系统能力：** SystemCapability.ArkUI.ArkUI.Full
-
-**参数：**
-
-| 参数值 | 参数类型 | 必填 | 装饰器类型 | 参数描述 | 
-| -------- | -------- | -------- | -------- | -------- |
-| content | string | 否 | \@Prop | 内容加载时显示的文本。 | 
-| isLoading | boolean | 是 | \@Prop | 当前是否正在加载。 | 
-
-
-## 示例
-
-```
-import { SwipeRefresher } from '@ohos.arkui.advacned.SwipeRefresher';
-
-@Entry
-@Component
-struct Index {
-  build() {
-    Column() {
-      SwipeRefresher({
-        content: '正在加载中',
-        isLoading: true })
-
-      SwipeRefresher({
-        isLoading: true })
-      SwipeRefresher({
-        content: '正在加载中',
-        isLoading: false })
-    }
-  }
-}
-```
-
-![Snipaste_2023-07-24_11-35-40](figures/Snipaste_2023-07-24_11-35-40.png)

doc/ts-composite-components-tabtitlebar.md

@@ -1,126 +0,0 @@
-# TabTitleBar
-
-
-页签型标题栏，用于页面之间的切换；仅一级页面适用。
-
-
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
-> 该组件从API Version 10开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
-
-
-## 导入模块
-
-```
-import { TabTitleBar } from "@ohos.arkui.advanced.TabTitleBar"
-```
-
-
-## 子组件
-
-无
-
-
-## 接口
-
-TabTitleBar({tabItems: Array<TabTitleBarTabItem>, menuItems?: Array<TabTitleBarMenuItem>, swiperContent: () => void})
-
-**装饰器类型：**\@Component
-
-**系统能力：** SystemCapability.ArkUI.ArkUI.Full
-
-**参数：**
-
-| 参数名 | 参数类型 | 必选 | 装饰器类型 | 参数描述 | 
-| -------- | -------- | -------- | -------- | -------- |
-| tabItems | Array<[TabTitleBarTabItem](https://gitee.com/openharmony-sig/arkui_advanced_ui_component/blob/master/doc/ts-composite-components-tabtitlebar.md/#tabtitlebartabitem)> | 是 | - | 左侧页签项目列表，定义标题栏左侧的页签项目。 | 
-| menuItems | Array<[TabTitleBarMenuItem](https://gitee.com/openharmony-sig/arkui_advanced_ui_component/blob/master/doc/ts-composite-components-tabtitlebar.md/#tabtitlebarmenuitem)> | 否 | - | 右侧菜单项目列表，定义标题栏右侧的菜单项目 | 
-| swiperContent | () => void | 否 | \@BuilderParam | 页签列表关联的页面内容构造器 | 
-
-
-### TabTitleBarMenuItem
-
-| 名称 | 值 | 是否必填 | 描述 | 
-| -------- | -------- | -------- | -------- |
-| value | [ResourceStr](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resourcestr) | 是 | 图标资源 | 
-| isEnabled | boolean | 是 | 是否启用 | 
-| action | () => void | 否 | 触发时的动作闭包 | 
-
-
-### TabTitleBarTabItem
-
-| 名称 | 值 | 是否必填 | 描述 | 
-| -------- | -------- | -------- | -------- |
-| title | [ResourceStr](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resourcestr) | 是 | 文字页签 | 
-| icon | [ResourceStr](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resourcestr) | 否 | 图片页签资源 | 
-
-
-## 示例
-
-```
-import { TabTitleBar } from "@ohos.arkui.advanced.TabTitleBar"
-import Prompt from '@system.prompt'
-
-@Entry
-@Component
-struct Index {
-  @Builder componentBuilder() {
-    Text("#1ABC9C\nTURQUOISE")
-      .fontWeight(FontWeight.Bold)
-      .fontSize(14)
-      .width("100%")
-      .textAlign(TextAlign.Center)
-      .fontColor("#CCFFFFFF")
-      .backgroundColor("#1ABC9C")
-    Text("#16A085\nGREEN SEA")
-      .fontWeight(FontWeight.Bold)
-      .fontSize(14)
-      .width("100%")
-      .textAlign(TextAlign.Center)
-      .fontColor("#CCFFFFFF")
-      .backgroundColor("#16A085")
-    Text("#2ECC71\nEMERALD")
-      .fontWeight(FontWeight.Bold)
-      .fontSize(14)
-      .width("100%")
-      .textAlign(TextAlign.Center)
-      .fontColor("#CCFFFFFF")
-      .backgroundColor("#2ECC71")
-    Text("#27AE60\nNEPHRITIS")
-      .fontWeight(FontWeight.Bold)
-      .fontSize(14)
-      .width("100%")
-      .textAlign(TextAlign.Center)
-      .fontColor("#CCFFFFFF")
-      .backgroundColor("#27AE60")
-  }
-  private readonly tabItems: { title: ResourceStr, icon?: ResourceStr }[] =
-    [ { title: "页签1" },
-      { title: "页签2" },
-      { title: "页签3" },
-      { title: "Happy",
-        icon: $r('app.media.emoji_happy') } ]
-  private readonly menuItems: { value: Resource, isEnabled: boolean, action: () => void }[] =
-    [ { isEnabled: true, value: $r('app.media.ic_public_reduce'),
-        action: () => Prompt.showToast({ message: "on item click! index 0" })
-      },
-      { isEnabled: true, value: $r('app.media.ic_public_edit'),
-        action: () => Prompt.showToast({ message: "on item click! index 1" })
-      },
-      { isEnabled: true, value: $r('app.media.ic_public_save'),
-        action: () => Prompt.showToast({ message: "on item click! index 2" })
-      } ]
-  build() {
-    Row() {
-      Column() {
-        TabTitleBar({
-          swiperContent: this.componentBuilder,
-          tabItems: this.tabItems,
-          menuItems: this.menuItems,
-        })
-      }.width('100%')
-    }.height('100%')
-  }
-}
-```
-
-![zh-cn_image_0000001616916278](figures/zh-cn_image_0000001616916278.png)

doc/ts-composite-components-toolbar.md

@@ -1,135 +0,0 @@
-# ToolBar
-
-
-工具栏用于展示针对当前界面内容的操作选项，在界面底部显示。底部最多显示5个入口，超过则收纳入“更多”子项中，在最右侧显示。
-
-
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
-> 该组件从API Version 10开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
-
-
-## 导入模块
-
-```
-import { ToolBar, ToolBarOptions } from '@ohos.arkui.advanced.ToolBar'
-```
-
-
-## 子组件
-
-无
-
-
-## 接口
-
-Toolbar({toolBarList: ToolBarOptions, activateIndex?: number, controller: TabsController})
-
-**装饰器类型：**\@Component
-
-**系统能力：** SystemCapability.ArkUI.ArkUI.Full
-
-**参数：**
-
-| 参数名 | 参数类型 | 必选 | 参数描述 | 
-| -------- | -------- | -------- | -------- |
-| toolBarList | [ToolBarOptions](#toolbaroptions) | 是 | 工具栏列表。 | 
-| activateIndex | number | 否 | 激活态的子项。<br/>默认值为-1。 | 
-| controller | [TabsController](https://docs.openharmony.cn/pages/v3.1/zh-cn/application-dev/reference/arkui-ts/ts-container-tabs.md/#Tabscontroller) | 是 | 筛选器的样式类型。 | 
-
-
-## ToolBarOptions
-
-继承自Array&lt;ToolBarOption&gt;
-
-**ToolBarOption：**
-
-| 名称 | 值 | 是否必填 | 描述 | 
-| -------- | -------- | -------- | -------- |
-| content | [ResourceStr](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resourcestr) | 是 | 工具栏子项的文本。 | 
-| action | void | 否 | 工具栏子项点击事件。 | 
-| icon | [Resource](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resource) | 否 | 工具栏子项的图标。 | 
-| state | [ItemState](#itemstate) | 否 | 工具栏子项的状态，默认为ENABLE。 | 
-
-
-## ItemState
-
-| 名称 | 描述 | 
-| -------- | -------- |
-| ENABLE | 工具栏子项为正常可点击状态。 | 
-| DISABLE | 工具栏子项为不可点击状态。 | 
-| ACTIVATE | 工具栏子项为激活状态，可点击。 | 
-
-
-## 示例
-
-```
-import { ToolBar, ToolBarOptions } from '@ohos.arkui.advanced.ToolBar'
-@Entry
-@Component
-struct Index {
-  @State toolbarList: ToolBarOptions = new ToolBarOptions()
-    aboutToAppear() {
-    this.toolbarList.push({ text: '剪贴我是超超超超超超超超超长样式',
-      icon: $r('sys.media.ohos_ic_public_share'),
-      action: () => {
-      },
-    })
-    this.toolbarList.push({ text: '拷贝',
-      icon: $r('sys.media.ohos_ic_public_copy'),
-      action: () => {
-      },
-      state:2
-    })
-    this.toolbarList.push({ text: '粘贴',
-      icon: $r('sys.media.ohos_ic_public_paste'),
-      action: () => {
-      },
-      state:3
-    })
-    this.toolbarList.push({ text: '全选',
-      icon: $r('sys.media.ohos_ic_public_select_all'),
-      action: () => {
-      },
-    })
-    this.toolbarList.push({ text: '分享',
-      icon: $r('sys.media.ohos_ic_public_share'),
-      action: () => {
-      },
-    })
-    this.toolbarList.push({ text: '分享',
-      icon: $r('sys.media.ohos_ic_public_share'),
-      action: () => {
-      },
-    })
-  }
-  build() {
-    Row() {
-      Stack() {
-        Column(){
-          Button("修改减少item")
-            .width(96)
-            .height(40)
-            .onClick(() => {
-              this.toolbarList.pop()
-            })
-          Button("修改增加item")
-            .width(96)
-            .height(40)
-            .onClick(() => {
-              this.toolbarList.push(this.toolbarList[1])
-            })
-        }.margin({bottom: 300})
-        Column() {
-          ToolBar({
-            currentIndex: 2,
-            hwToolBarList: this.toolbarList,
-          })
-        }
-      }.align(Alignment.Bottom)
-      .width('100%').height('100%')
-    }
-  }
-}
-```
-
-![zh-cn_image_0000001658655445](figures/zh-cn_image_0000001658655445.png)

doc/ts-composite-components-treeview.md

@@ -1,379 +0,0 @@
-# TreeView
-
-
-树视图作为一种分层显示的列表，适合显示嵌套结构。拥有父列表项和子列表项，可展开或折叠。子列表项支持选中一项或多项。
-
-
-用于效率型应用，如备忘录、电子邮件、图库中的侧边导航栏中。
-
-
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
-> 该组件从API Version 10开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
-
-
-## 导入模块
-
-```
-import { TreeView } from "@ohos.arkui.advanced.TreeView"
-```
-
-
-## 子组件
-
-无
-
-
-## 接口
-
-TreeView({ treeController: TreeController })
-
-**装饰器类型：**\@Component
-
-**系统能力：** SystemCapability.ArkUI.ArkUI.Full
-
-
-**参数：**
-
-
-| 参数名 | 参数类型 | 必填 | 参数描述 | 
-| -------- | -------- | -------- | -------- |
-| treeController | [TreeController](#treecontroller) | 是 | 树视图节点信息。 | 
-
-
-## TreeController
-
-树视图组件的控制器，可以将此对象绑定至树视图组件，然后通过它控制树的节点信息，同一个控制器不可以控制多个树视图组件。
-
-
-### 导入对象
-
-```
-treeController: TreeController = new TreeController()
-```
-
-
-### addNode
-
-
-addNode(nodeParam?: NodeParam): void
-
-
-点击某个节点后，调用该方法可以触发新增孩子节点
-
-
-**参数：**
-
-
-| 参数名 | 参数类型 | 必填 | 参数描述 | 
-| -------- | -------- | -------- | -------- |
-| nodeParam | [NodeParam](#nodeparam) | 否 | 节点信息。 | 
-
-
-### removeNode
-
-removeNode(): void
-
-点击某个节点后，调用该方法可以触发删除该节点
-
-
-### modifyNode
-
-
-modifyNode(): void
-
-
-点击某个节点后，调用该方法可以触发修改该节点
-
-
-### buildDone
-
-buildDone(): void
-
-建立树视图。节点增加完毕后，必须调用该方法，触发树信息的保存
-
-
-### refreshNode
-
-refreshNode(parentId: number, parentSubTitle: ResourceStr, currentSubtitle: ResourceStr): void
-
-**参数：**
-
-| 参数名 | 参数类型 | 必填 | 参数描述 | 
-| -------- | -------- | -------- | -------- |
-| parentId | number | 是 | 父节点Id。 | 
-| parentSubTitle | ResourceStr | 是 | 父节点副文本 | 
-| currentSubtitle | ResourceStr | 是 | 当前节点副文本 | 
-
-
-## NodeParam
-
-| 名称 | 值 | 是否必填 | 描述 | 
-| -------- | -------- | -------- | -------- |
-| parentNodeId | number | 否 | 父亲节点 | 
-| currentNodeId | number | 否 | 当前孩子节点 | 
-| isFolder | boolean | 否 | 是否是目录 | 
-| icon | ResourceStr | 否 | 图标 | 
-| selectedIcon | ResourceStr | 否 | 选中图标 | 
-| editIcon | ResourceStr | 否 | 编辑图标 | 
-| primaryTitle | ResourceStr | 否 | 主标题 | 
-| secondaryTitle | ResourceStr | 否 | 副标题 | 
-| container | () => void | 否 | 绑定在节点上的子组件，子组件由[@Builder](https://docs.openharmony.cn/pages/v3.1/en/application-dev/ui/ts-component-based-builder.md/)修饰 | 
-
-
-## TreeListenerManager对象说明
-
-树视图组件的监听器，可以将此对象绑定至树视图组件，然后通过它监听树的节点的变化，同一个监听器不可以控制多个树视图组件。
-
-
-### 导入对象
-
-```
-import { TreeListenerManager } from '@ohos.arkui.advanced.TreeView'
-```
-
-
-### getInstance
-
-getInstance(): TreeListenerManager
-
-获取监听管理器单例对象
-
-
-### getTreeListener()
-
-getTreeListener(): TreeListener
-
-获取监听器
-
-
-## TreeListener对象说明
-
-树视图组件的监听器，可以将此对象绑定至树视图组件，然后通过它监听树的节点的变化，同一个监听器不可以控制多个树视图组件。
-
-
-### 导入对象
-
-```
-treeListener: TreeListener = TreeListenerManager.getInstance().getTreeListener()
-```
-
-
-### on
-
-on(type: TreeListenType, callback: (callbackParam: CallbackParam) => void): void;
-
-注册监听
-
-**参数：**
-
-| 参数名 | 参数类型 | 必填 | 参数描述 | 
-| -------- | -------- | -------- | -------- |
-| type | [TreeListenType](#treelistentype) | 是 | 监听类型 | 
-| nodeParam | [NodeParam](#nodeparam) | 是 | 节点信息。 | 
-
-
-### once
-
-once(type: TreeListenType, callback: (callbackParam: CallbackParam) => void): void;
-
-注册一次监听
-
-**参数：**
-
-| 参数名 | 参数类型 | 必填 | 参数描述 | 
-| -------- | -------- | -------- | -------- |
-| type | [TreeListenType](#treelistentype) | 是 | 监听类型 | 
-| nodeParam | [NodeParam](#nodeparam) | 是 | 节点信息。 | 
-
-
-### off
-
-
-off(type: TreeListenType, callback?: (callbackParam: CallbackParam) => void): void;
-
-
-取消监听
-
-
-**参数：**
-
-
-| 参数名 | 参数类型 | 必填 | 参数描述 | 
-| -------- | -------- | -------- | -------- |
-| type | [TreeListenType](#treelistentype) | 是 | 监听类型 | 
-| nodeParam | [NodeParam](#nodeparam) | 是 | 节点信息。 | 
-
-
-## TreeListenType
-
-| 名称 | 描述 | 
-| -------- | -------- |
-| NODE_CLICK | 监听节点点击事件 | 
-| NODE_ADD | 监听节点增加事件 | 
-| NODE_DELETE | 监听节点删除事件 | 
-| NODE_MODIFY | 监听节点修改事件 | 
-| NODE_MOVE | 监听节点移动事件 | 
-
-
-## CallbackParam
-
-| 名称 | 值 | 是否必填 | 描述 | 
-| -------- | -------- | -------- | -------- |
-| currentNodeId | number | 是 | 当前孩子节点 | 
-| parentNodeId | number | 否 | 父亲节点表 | 
-| childIndex: number | number | 否 | 孩子索引 | 
-
-
-## 示例
-
-```
-import { TreeController, TreeListener, TreeListenerManager, TreeListenType, NodeParam, TreeView, CallbackParam } from '@ohos.arkui.advanced.TreeView'
-
-@Entry
-@Component
-struct TreeViewDemo {
-  private listTreeNode: TreeController = new TreeController();
-  private appEventBus: TreeListener = TreeListenerManager.getInstance().getTreeListener();
-  @State clickNodeId: number = 0;
-  @State numbers: string[] = ['one', 'two', 'three', 'four', 'five', 'six'];
-
-  aboutToDisappear(): void {
-    this.appEventBus.off(TreeListenType.NODE_CLICK, null);
-    this.appEventBus.off(TreeListenType.NODE_ADD, null);
-    this.appEventBus.off(TreeListenType.NODE_DELETE, null);
-  }
-
-  @Builder menuBuilder0() {
-    Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
-      Text('删除').fontSize(16).width(100).height(30).textAlign(TextAlign.Center)
-        .onClick((event: ClickEvent) => {
-          this.listTreeNode.removeNode();
-        })
-    }.width(100).border({width: 1, color: 0x80808a, radius: '16dp'})
-  }
-
-  @Builder menuBuilder1() {
-    Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
-      Text('新增').fontSize(16).width(100).height(30).textAlign(TextAlign.Center)
-        .onClick((event: ClickEvent) => {
-          this.listTreeNode.addNode();
-        })
-      Divider()
-      Text('删除').fontSize(16).width(100).height(30).textAlign(TextAlign.Center)
-        .onClick((event: ClickEvent) => {
-          this.listTreeNode.removeNode();
-        })
-      Divider()
-      Text('重命名').fontSize(16).width(100).height(30).textAlign(TextAlign.Center)
-        .onClick((event: ClickEvent) => {
-          this.listTreeNode.modifyNode();
-        })
-    }.width(100).border({width: 1, color: 0x80808a, radius: '16dp'})
-  }
-
-  aboutToAppear(): void {
-    this.appEventBus.on(TreeListenType.NODE_MOVE, (callbackParam: CallbackParam) => {
-    })
-    this.appEventBus.on(TreeListenType.NODE_CLICK, (callbackParam: CallbackParam) => {
-    })
-
-    let normalResource: Resource = $r('app.media.ic_public_collect_normal');
-    let selectedResource: Resource = $r('app.media.ic_public_collect_selected');
-    let editResource: Resource = $r('app.media.ic_public_collect_edit');
-    let nodeParam: NodeParam = { parentNodeId:-1, currentNodeId: 1, isFolder: true, icon: normalResource, selectedIcon: selectedResource,
-      editIcon: editResource, primaryTitle: "目录1验证悬浮框自适应效果是否OK",
-      menu: this.menuBuilder1.bind(this), secondaryTitle: "6" };
-    this.listTreeNode
-      .addNode(nodeParam)
-      .addNode({parentNodeId:1, currentNodeId: 2, isFolder: false, primaryTitle: "项目1_1" })
-      .addNode({ parentNodeId:-1, currentNodeId: 7, isFolder: true, primaryTitle: "目录2", menu: this.menuBuilder1.bind(this) })
-      .addNode({ parentNodeId:-1, currentNodeId: 23, isFolder: true, icon: normalResource, selectedIcon: selectedResource,
-        editIcon: editResource, primaryTitle: "目录3", menu: this.menuBuilder1.bind(this) })
-      .addNode({ parentNodeId:-1, currentNodeId: 24, isFolder: false, primaryTitle: "项目4", menu: this.menuBuilder1.bind(this) })
-      .addNode({ parentNodeId:-1, currentNodeId: 31, isFolder: true, icon: normalResource, selectedIcon: selectedResource,
-        editIcon: editResource, primaryTitle: "目录5", menu: this.menuBuilder1.bind(this), secondaryTitle: "0" })
-      .addNode({ parentNodeId:-1, currentNodeId: 32, isFolder: true, icon: normalResource, selectedIcon: selectedResource,
-        editIcon: editResource, primaryTitle: "目录6", menu: this.menuBuilder1.bind(this), secondaryTitle: "0" })
-      .addNode({ parentNodeId:32, currentNodeId: 35, isFolder: true, icon: normalResource, selectedIcon: selectedResource,
-        editIcon: editResource, primaryTitle: "目录6-1", menu: this.menuBuilder1.bind(this), secondaryTitle: "0" })
-      .addNode({ parentNodeId:-1, currentNodeId: 33, isFolder: true, icon: normalResource, selectedIcon: selectedResource,
-        editIcon: editResource, primaryTitle: "目录7", menu: this.menuBuilder1.bind(this), secondaryTitle: "0" })
-      .addNode({ parentNodeId:33, currentNodeId: 34, isFolder: false, primaryTitle: "项目8" })
-      .addNode({ parentNodeId:-1, currentNodeId: 36, isFolder: false, primaryTitle: "项目9" })
-      .buildDone();
-  }
-
-  @Builder subfieldPopup(item: any) {
-    Column() {
-      Text(item)
-        .width('50%').height(60).fontSize(16).borderRadius(10)
-        .textAlign(TextAlign.Center).backgroundColor(Color.Yellow)
-    }
-  }
-
-  build() {
-    SideBarContainer(SideBarContainerType.Embed)
-    {
-      TreeView({ treeController: this.listTreeNode })
-      Row() {
-        Divider().vertical(true).strokeWidth(2).color(0x000000).lineCap(LineCapStyle.Round)
-        Column() {
-          Row() {
-            Text('ClickNodeId=' + this.clickNodeId).fontSize('16fp')
-            Button('Add', { type: ButtonType.Normal, stateEffect: true })
-              .borderRadius(8).backgroundColor(0x317aff).width(90)
-              .onClick((event: ClickEvent) => {
-                this.listTreeNode.addNode();
-              })
-            Button('Modify', { type: ButtonType.Normal, stateEffect: true })
-              .borderRadius(8).backgroundColor(0x317aff).width(90)
-              .onClick((event: ClickEvent) => {
-                this.listTreeNode.modifyNode();
-              })
-            Button('Remove', { type: ButtonType.Normal, stateEffect: true })
-              .borderRadius(8).backgroundColor(0x317aff).width(120)
-              .onClick((event: ClickEvent) => {
-                this.listTreeNode.removeNode();
-              })
-          }
-
-          /* drag item. */
-          List({ space: 10, initialIndex: 0 }) {
-            ForEach(this.numbers, (item) => {
-              ListItem() {
-                Text('' + item)
-                  .width('100%').height(38).fontSize(16).borderRadius(10)
-                  .textAlign(TextAlign.Center).backgroundColor(0xAFEEEE)
-              }
-              .onSelect((isSelected: boolean) => {
-                console.log('listItem selected')
-              })
-              .onDragStart(() => {
-                this.listTreeNode.refreshNode(1,'选择节点','目标节点')
-                return this.subfieldPopup(item)
-              })
-            }, item => item)
-          }
-          .editMode(true)
-          .multiSelectable(true)
-          .onDrop((event: DragEvent, extraParams: string) => {
-            console.log('outer onDrop')
-          })
-
-        }.height('100%').width('70%').alignItems(HorizontalAlign.Start)
-      }
-    }
-    .focusable(true)
-    .sideBarWidth(240)
-    .minSideBarWidth(0)
-    .maxSideBarWidth(900)
-    .showControlButton(false)
-    .showSideBar(true)
-    .onChange((value: boolean) => {
-      console.info('status:' + value);
-    })
-  }
-}
-```
-
-![zh-cn_image_0000001664822257](figures/zh-cn_image_0000001664822257.png)

interface/arkdialog/BUILD.gn

@@ -1,46 +0,0 @@
-# Copyright (c) 2023-2023 Huawei Device Co., Ltd.
-# Licensed under the Apache License, Version 2.0 (the "License");
-# you may not use this file except in compliance with the License.
-# You may obtain a copy of the License at
-#
-#     http://www.apache.org/licenses/LICENSE-2.0
-#
-# Unless required by applicable law or agreed to in writing, software
-# distributed under the License is distributed on an "AS IS" BASIS,
-# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-# See the License for the specific language governing permissions and
-# limitations under the License.
-
-import("//build/ohos.gni")
-import("//foundation/arkui/ace_engine/ace_config.gni")
-import("//arkcompiler/ets_frontend/es2panda/es2abc_config.gni")
-
-es2abc_gen_abc("gen_arkdialog_abc") {
-  src_js = rebase_path("arkdialog.js")
-  dst_file = rebase_path(target_out_dir + "/arkdialog.abc")
-  in_puts = [ "arkdialog.js" ]
-  out_puts = [ target_out_dir + "/arkdialog.abc" ]
-  extra_args = [ "--module" ]
-}
-
-gen_js_obj("arkdialog_abc") {
-  input = get_label_info(":gen_arkdialog_abc", "target_out_dir") + "/arkdialog.abc"
-  output = target_out_dir + "/arkdialog_abc.o"
-  dep = ":gen_arkdialog_abc"
-}
-
-ohos_shared_library("arkdialog") {
-  sources = [ "arkdialog.cpp" ]
-
-  deps = [ ":arkdialog_abc" ]
-
-  external_deps = [
-    "hilog:libhilog",
-    "napi:ace_napi",
-  ]    
-
-  subsystem_name = "arkui"
-  part_name = "advanced_ui_component"
-
-  relative_install_dir = "module/arkui/advanced"
-}

interface/arkdialog/arkdialog.cpp

@@ -1,53 +0,0 @@
-/*
- * Copyright (c) 2023-2023 Huawei Device Co., Ltd.
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-#include "native_engine/native_engine.h"
-
-#include "napi/native_api.h"
-#include "napi/native_node_api.h"
-
-extern const char _binary_arkdialog_abc_start[];
-extern const char _binary_arkdialog_abc_end[];
-
-// Napi get abc code function
-extern "C" __attribute__((visibility("default")))
-void NAPI_arkui_advanced_ArkDialog_GetABCCode(const char **buf, int *buflen)
-{
-    if (buf != nullptr) {
-        *buf = _binary_arkdialog_abc_start;
-    }
-    if (buflen != nullptr) {
-        *buflen = _binary_arkdialog_abc_end - _binary_arkdialog_abc_start;
-    }
-}
-
-/*
- * Module define
- */
-static napi_module arkdialogModule = {
-    .nm_version = 1,
-    .nm_flags = 0,
-    .nm_filename = nullptr,
-    .nm_modname = "arkui.advanced.ArkDialog",
-    .nm_priv = ((void*)0),
-    .reserved = { 0 },
-};
-/*
- * Module register function
- */
-extern "C" __attribute__((constructor)) void arkdialogRegisterModule(void)
-{
-    napi_module_register(&arkdialogModule);
-}

interface/composelistitem/BUILD.gn

@@ -1,46 +0,0 @@
-# Copyright (c) 2023-2023 Huawei Device Co., Ltd.
-# Licensed under the Apache License, Version 2.0 (the "License");
-# you may not use this file except in compliance with the License.
-# You may obtain a copy of the License at
-#
-#     http://www.apache.org/licenses/LICENSE-2.0
-#
-# Unless required by applicable law or agreed to in writing, software
-# distributed under the License is distributed on an "AS IS" BASIS,
-# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-# See the License for the specific language governing permissions and
-# limitations under the License.
-
-import("//build/ohos.gni")
-import("//foundation/arkui/ace_engine/ace_config.gni")
-import("//arkcompiler/ets_frontend/es2panda/es2abc_config.gni")
-
-es2abc_gen_abc("gen_composelistitem_abc") {
-  src_js = rebase_path("composelistitem.js")
-  dst_file = rebase_path(target_out_dir + "/composelistitem.abc")
-  in_puts = [ "composelistitem.js" ]
-  out_puts = [ target_out_dir + "/composelistitem.abc" ]
-  extra_args = [ "--module" ]
-}
-
-gen_js_obj("composelistitem_abc") {
-  input = get_label_info(":gen_composelistitem_abc", "target_out_dir") + "/composelistitem.abc"
-  output = target_out_dir + "/composelistitem_abc.o"
-  dep = ":gen_composelistitem_abc"
-}
-
-ohos_shared_library("composelistitem") {
-  sources = [ "composelistitem.cpp" ]
-
-  deps = [ ":composelistitem_abc" ]
-
-  external_deps = [
-    "hilog:libhilog",
-    "napi:ace_napi",
-  ]
-
-  subsystem_name = "arkui"
-  part_name = "advanced_ui_component"
-
-  relative_install_dir = "module/arkui/advanced"
-}

interface/composelistitem/composelistitem.cpp

@@ -1,49 +0,0 @@
-/*
- * Copyright (c) 2023-2023 Huawei Device Co., Ltd.
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-#include "native_engine/native_engine.h"
-
-#include "napi/native_api.h"
-#include "napi/native_node_api.h"
-
-extern const char _binary_composelistitem_abc_start[];
-extern const char _binary_composelistitem_abc_end[];
-
-// Napi get abc code function
-extern "C" __attribute__((visibility("default")))
-void NAPI_arkui_advanced_ComposeListItem_GetABCCode(const char **buf, int *buflen)
-    {
-    if (buf != nullptr) {
-        *buf = _binary_composelistitem_abc_start;
-        }
-        if (buflen != nullptr) {
-            *buflen = _binary_composelistitem_abc_end - _binary_composelistitem_abc_start;
-        }
-    }
-
-
-static napi_module composelistitemModule = {
-    .nm_version = 1,
-    .nm_flags = 0,
-    .nm_filename = nullptr,
-    .nm_modname = "arkui.advanced.ComposeListItem",
-    .nm_priv = ((void*)0),
-    .reserved = { 0 },
-};
-
-extern "C" __attribute__((constructor)) void composelistitemRegisterModule(void)
-{
-    napi_module_register(&composelistitemModule);
-}

interface/composelistitem/composelistitem.js

@@ -1,799 +0,0 @@
-/*
- * Copyright (c) 2023-2023 Huawei Device Co., Ltd.
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-export var IconType;
-!function(e){
-    e[e.BADGE=1] = "BADGE";
-    e[e.NORMAL_ICON=2] = "NORMAL_ICON";
-    e[e.SYSTEM_ICON=3] = "SYSTEM_ICON";
-    e[e.HEAD_SCULPTURE=4] = "HEAD_SCULPTURE";
-    e[e.APP_ICON=5] = "APP_ICON";
-    e[e.PREVIEW=6] = "PREVIEW";
-    e[e.LONGITUDINAL=7] = "LONGITUDINAL";
-    e[e.VERTICAL=8] = "VERTICAL"
-}(IconType || (IconType = {}));
-var ItemHeight;
-!function(e){
-    e[e.FIRST_HEIGHT=48] = "FIRST_HEIGHT";
-    e[e.SECOND_HEIGHT=56] = "SECOND_HEIGHT";
-    e[e.THIRD_HEIGHT=64] = "THIRD_HEIGHT";
-    e[e.FOURTH_HEIGHT=72] = "FOURTH_HEIGHT";
-    e[e.FIFTH_HEIGHT=96] = "FIFTH_HEIGHT"
-}(ItemHeight || (ItemHeight = {}));
-const LISTITEMCARD_BORDER_HIDDEN = 0;
-const TEXT_MAX_LINE = 1;
-const LISTITEMCARD_BORDER_SHOWN = 2;
-const TEXT_COLUMN_SPACE = 2;
-const TEXT_SAFE_MARGIN = 8;
-const BADGE_SIZE = 8;
-const SMALL_ICON_SIZE = 16;
-const SYSTEM_ICON_SIZE = 24;
-const SAFE_LIST_PADDING = 32;
-const HEADSCULPTURE_SIZE = 40;
-const BUTTON_SIZE = 28;
-const APP_ICON_SIZE = 64;
-const PREVIEW_SIZE = 96;
-const LONGITUDINAL_SIZE = 96;
-const VERTICAL_SIZE = 96;
-const NORMAL_ITEM_ROW_SPACE = 16;
-const SPECIAL_ITEM_ROW_SPACE = 0;
-const SPECIAL_ICON_SIZE = 0;
-const DEFAULT_ROW_SPACE = 0;
-const SPECICAL_ROW_SPACE = 4;
-const OPERATEITEM_ICONLIKE_SIZE = 24;
-const OPERATEITEM_ARROW_WIDTH = 12;
-const OPERATEITEM_ICON_CLICKABLE_SIZE = 48;
-const OPERATEITEM_IMAGE_SIZE = 48;
-const HOVERING_COLOR = "#0d000000";
-const TOUCH_DOWN_COLOR = "#1a000000";
-const ACTIVED_COLOR = "#1a0a59f7";
-
-class ContentItemStruct extends ViewPU {
-    constructor(e, t, o, i = -1) {
-        super(e, o, i);
-        this.iconStyle = null;
-        this.icon = null;
-        this.title = null;
-        this.subtitle = null;
-        this.description = null;
-        this.iconSizeMap = new Map([[IconType.BADGE, 8], [IconType.NORMAL_ICON, 16], [IconType.SYSTEM_ICON, 24], [IconType.HEAD_SCULPTURE, 40], [IconType.APP_ICON, 64], [IconType.PREVIEW, 96], [IconType.LONGITUDINAL, 96], [IconType.VERTICAL, 96]]);
-        this.itemHeight = ItemHeight.FIRST_HEIGHT;
-        this.itemRowSpace = 16;
-        this.setInitiallyProvidedValue(t)
-    }
-
-    setInitiallyProvidedValue(e) {
-        void 0 !== e.iconStyle && (this.iconStyle = e.iconStyle);
-        void 0 !== e.icon && (this.icon = e.icon);
-        void 0 !== e.title && (this.title = e.title);
-        void 0 !== e.subtitle && (this.subtitle = e.subtitle);
-        void 0 !== e.description && (this.description = e.description);
-        void 0 !== e.iconSizeMap && (this.iconSizeMap = e.iconSizeMap);
-        void 0 !== e.itemHeight && (this.itemHeight = e.itemHeight);
-        void 0 !== e.itemRowSpace && (this.itemRowSpace = e.itemRowSpace)
-    }
-
-    updateStateVars(e) {
-    }
-
-    purgeVariableDependenciesOnElmtId(e) {
-    }
-
-    aboutToBeDeleted() {
-        SubscriberManager.Get().delete(this.id__());
-        this.aboutToBeDeletedInternal()
-    }
-
-    aboutToAppear() {
-        null == this.subtitle && null == this.description ? null == this.icon ? this.itemHeight = ItemHeight.FIRST_HEIGHT : this.itemHeight = this.iconStyle <= IconType.HEAD_SCULPTURE ? ItemHeight.SECOND_HEIGHT : ItemHeight.THIRD_HEIGHT : null == this.description ? null == this.icon || null != this.icon && this.iconStyle <= IconType.SYSTEM_ICON ? this.itemHeight = ItemHeight.THIRD_HEIGHT : this.itemHeight = ItemHeight.FOURTH_HEIGHT : this.itemHeight = ItemHeight.FIFTH_HEIGHT;
-        null == this.icon && null == this.iconStyle && (this.itemRowSpace = 0);
-        this.iconSizeMap.get(this.iconStyle) >= this.itemHeight && (this.itemHeight = this.iconSizeMap.get(this.iconStyle) + 32)
-    }
-
-    createIcon(e = null) {
-        this.observeComponentCreation(((e, t) => {
-            ViewStackProcessor.StartGetAccessRecordingFor(e);
-            If.create();
-            null != this.icon && null != this.iconStyle ? this.ifElseBranchUpdateFunction(0, (() => {
-                this.observeComponentCreation(((e, t) => {
-                    ViewStackProcessor.StartGetAccessRecordingFor(e);
-                    If.create();
-                    this.iconStyle <= IconType.PREVIEW ? this.ifElseBranchUpdateFunction(0, (() => {
-                        this.observeComponentCreation(((e, t) => {
-                            ViewStackProcessor.StartGetAccessRecordingFor(e);
-                            Image.create(this.icon);
-                            Image.objectFit(ImageFit.Contain);
-                            Image.width(this.iconSizeMap.get(this.iconStyle));
-                            Image.height(this.iconSizeMap.get(this.iconStyle));
-                            Image.borderRadius({
-                                id: -1,
-                                type: 10002,
-                                params: ["sys.float.ohos_id_corner_radius_default_m"],
-                                bundleName: "",
-                                moduleName: ""
-                            });
-                            Image.focusable(!0);
-                            t || Image.pop();
-                            ViewStackProcessor.StopGetAccessRecording()
-                        }))
-                    })) : this.ifElseBranchUpdateFunction(1, (() => {
-                        this.observeComponentCreation(((e, t) => {
-                            ViewStackProcessor.StartGetAccessRecordingFor(e);
-                            Image.create(this.icon);
-                            Image.objectFit(ImageFit.Contain);
-                            Image.constraintSize({
-                                minWidth: 0,
-                                maxWidth: this.iconSizeMap.get(this.iconStyle),
-                                minHeight: 0,
-                                maxHeight: this.iconSizeMap.get(this.iconStyle)
-                            });
-                            Image.borderRadius({
-                                id: -1,
-                                type: 10002,
-                                params: ["sys.float.ohos_id_corner_radius_default_m"],
-                                bundleName: "",
-                                moduleName: ""
-                            });
-                            Image.focusable(!0);
-                            t || Image.pop();
-                            ViewStackProcessor.StopGetAccessRecording()
-                        }))
-                    }));
-                    t || If.pop();
-                    ViewStackProcessor.StopGetAccessRecording()
-                }));
-                If.pop()
-            })) : If.branchId(1);
-            t || If.pop();
-            ViewStackProcessor.StopGetAccessRecording()
-        }));
-        If.pop()
-    }
-
-    createText(e = null) {
-        this.observeComponentCreation(((e, t) => {
-            ViewStackProcessor.StartGetAccessRecordingFor(e);
-            Column.create({ space: 2 });
-            Column.margin({ top: 8, bottom: 8 });
-            Column.alignItems(HorizontalAlign.Start);
-            t || Column.pop();
-            ViewStackProcessor.StopGetAccessRecording()
-        }));
-        this.observeComponentCreation(((e, t) => {
-            ViewStackProcessor.StartGetAccessRecordingFor(e);
-            Text.create(this.title);
-            Text.fontSize({
-                id: -1,
-                type: 10002,
-                params: ["sys.float.ohos_id_text_size_body1"],
-                bundleName: "",
-                moduleName: ""
-            });
-            Text.fontColor({
-                id: -1,
-                type: 10001,
-                params: ["sys.color.ohos_id_color_text_primary"],
-                bundleName: "",
-                moduleName: ""
-            });
-            Text.maxLines(1);
-            Text.textOverflow({ overflow: TextOverflow.Ellipsis });
-            Text.focusable(!0);
-            t || Text.pop();
-            ViewStackProcessor.StopGetAccessRecording()
-        }));
-        Text.pop();
-        this.observeComponentCreation(((e, t) => {
-            ViewStackProcessor.StartGetAccessRecordingFor(e);
-            If.create();
-            null != this.subtitle ? this.ifElseBranchUpdateFunction(0, (() => {
-                this.observeComponentCreation(((e, t) => {
-                    ViewStackProcessor.StartGetAccessRecordingFor(e);
-                    Text.create(this.subtitle);
-                    Text.fontSize({
-                        id: -1,
-                        type: 10002,
-                        params: ["sys.float.ohos_id_text_size_body2"],
-                        bundleName: "",
-                        moduleName: ""
-                    });
-                    Text.fontColor({
-                        id: -1,
-                        type: 10001,
-                        params: ["sys.color.ohos_id_color_text_secondary"],
-                        bundleName: "",
-                        moduleName: ""
-                    });
-                    Text.maxLines(1);
-                    Text.textOverflow({ overflow: TextOverflow.Ellipsis });
-                    Text.focusable(!0);
-                    t || Text.pop();
-                    ViewStackProcessor.StopGetAccessRecording()
-                }));
-                Text.pop()
-            })) : If.branchId(1);
-            t || If.pop();
-            ViewStackProcessor.StopGetAccessRecording()
-        }));
-        If.pop();
-        this.observeComponentCreation(((e, t) => {
-            ViewStackProcessor.StartGetAccessRecordingFor(e);
-            If.create();
-            null != this.description ? this.ifElseBranchUpdateFunction(0, (() => {
-                this.observeComponentCreation(((e, t) => {
-                    ViewStackProcessor.StartGetAccessRecordingFor(e);
-                    Text.create(this.description);
-                    Text.fontSize({
-                        id: -1,
-                        type: 10002,
-                        params: ["sys.float.ohos_id_text_size_body2"],
-                        bundleName: "",
-                        moduleName: ""
-                    });
-                    Text.fontColor({
-                        id: -1,
-                        type: 10001,
-                        params: ["sys.color.ohos_id_color_text_secondary"],
-                        bundleName: "",
-                        moduleName: ""
-                    });
-                    Text.maxLines(1);
-                    Text.textOverflow({ overflow: TextOverflow.Ellipsis });
-                    Text.focusable(!0);
-                    t || Text.pop();
-                    ViewStackProcessor.StopGetAccessRecording()
-                }));
-                Text.pop()
-            })) : If.branchId(1);
-            t || If.pop();
-            ViewStackProcessor.StopGetAccessRecording()
-        }));
-        If.pop();
-        Column.pop()
-    }
-
-    initialRender() {
-        this.observeComponentCreation(((e, t) => {
-            ViewStackProcessor.StartGetAccessRecordingFor(e);
-            Row.create({ space: this.itemRowSpace });
-            Row.height(this.itemHeight);
-            t || Row.pop();
-            ViewStackProcessor.StopGetAccessRecording()
-        }));
-        this.createIcon.bind(this)();
-        this.createText.bind(this)();
-        Row.pop()
-    }
-
-    rerender() {
-        this.updateDirtyElements()
-    }
-}
-
-class OperateItemStruct extends ViewPU {
-    constructor(e, t, o, i = -1) {
-        super(e, o, i);
-        this.arrow = null;
-        this.icon = null;
-        this.subIcon = null;
-        this.button = null;
-        this.switch = null;
-        this.checkBox = null;
-        this.radio = null;
-        this.image = null;
-        this.text = null;
-        this.__switchState = new ObservedPropertySimplePU(!1, this, "switchState");
-        this.__radioState = new ObservedPropertySimplePU(!1, this, "radioState");
-        this.__checkBoxState = new ObservedPropertySimplePU(!1, this, "checkBoxState");
-        this.rowSpace = 0;
-        this.setInitiallyProvidedValue(t)
-    }
-
-    setInitiallyProvidedValue(e) {
-        void 0 !== e.arrow && (this.arrow = e.arrow);
-        void 0 !== e.icon && (this.icon = e.icon);
-        void 0 !== e.subIcon && (this.subIcon = e.subIcon);
-        void 0 !== e.button && (this.button = e.button);
-        void 0 !== e.switch && (this.switch = e.switch);
-        void 0 !== e.checkBox && (this.checkBox = e.checkBox);
-        void 0 !== e.radio && (this.radio = e.radio);
-        void 0 !== e.image && (this.image = e.image);
-        void 0 !== e.text && (this.text = e.text);
-        void 0 !== e.switchState && (this.switchState = e.switchState);
-        void 0 !== e.radioState && (this.radioState = e.radioState);
-        void 0 !== e.checkBoxState && (this.checkBoxState = e.checkBoxState);
-        void 0 !== e.rowSpace && (this.rowSpace = e.rowSpace)
-    }
-
-    updateStateVars(e) {
-    }
-
-    purgeVariableDependenciesOnElmtId(e) {
-        this.__switchState.purgeDependencyOnElmtId(e);
-        this.__radioState.purgeDependencyOnElmtId(e);
-        this.__checkBoxState.purgeDependencyOnElmtId(e)
-    }
-
-    aboutToBeDeleted() {
-        this.__switchState.aboutToBeDeleted();
-        this.__radioState.aboutToBeDeleted();
-        this.__checkBoxState.aboutToBeDeleted();
-        SubscriberManager.Get().delete(this.id__());
-        this.aboutToBeDeletedInternal()
-    }
-
-    get switchState() {
-        return this.__switchState.get()
-    }
-
-    set switchState(e) {
-        this.__switchState.set(e)
-    }
-
-    get radioState() {
-        return this.__radioState.get()
-    }
-
-    set radioState(e) {
-        this.__radioState.set(e)
-    }
-
-    get checkBoxState() {
-        return this.__checkBoxState.get()
-    }
-
-    set checkBoxState(e) {
-        this.__checkBoxState.set(e)
-    }
-
-    aboutToAppear() {
-        null != this.switch && (this.switchState = this.switch.isCheck);
-        null != this.radio && (this.radioState = this.radio.isCheck);
-        null != this.checkBox && (this.checkBoxState = this.checkBox.isCheck);
-        (null == this.button && null == this.image && null != this.icon && null != this.text || null == this.button && null == this.image && null == this.icon && null != this.arrow && null != this.text) && (this.rowSpace = 4)
-    }
-
-    createButton(e, t = null) {
-        this.observeComponentCreation(((t, o) => {
-            ViewStackProcessor.StartGetAccessRecordingFor(t);
-            Button.createWithLabel(e);
-            Button.fontSize({
-                id: -1,
-                type: 10002,
-                params: ["sys.float.ohos_id_text_size_button3"],
-                bundleName: "",
-                moduleName: ""
-            });
-            Button.fontColor({
-                id: -1,
-                type: 10001,
-                params: ["sys.color.ohos_id_color_text_primary_activated_transparent"],
-                bundleName: "",
-                moduleName: ""
-            });
-            Button.height(28);
-            Button.backgroundColor({
-                id: -1,
-                type: 10001,
-                params: ["sys.color.ohos_id_color_button_normal"],
-                bundleName: "",
-                moduleName: ""
-            });
-            Button.labelStyle({ maxLines: 1 });
-            o || Button.pop();
-            ViewStackProcessor.StopGetAccessRecording()
-        }));
-        Button.pop()
-    }
-
-    createIcon(e, t = null) {
-        this.observeComponentCreation(((t, o) => {
-            ViewStackProcessor.StartGetAccessRecordingFor(t);
-            Row.create();
-            Row.height(48);
-            Row.width(48);
-            Row.justifyContent(FlexAlign.Center);
-            Row.onClick(e.action);
-            o || Row.pop();
-            ViewStackProcessor.StopGetAccessRecording()
-        }));
-        this.observeComponentCreation(((t, o) => {
-            ViewStackProcessor.StartGetAccessRecordingFor(t);
-            Image.create(e.value);
-            Image.height(24);
-            Image.width(24);
-            Image.focusable(!0);
-            Image.fillColor({
-                id: -1,
-                type: 10001,
-                params: ["sys.color.ohos_id_color_primary"],
-                bundleName: "",
-                moduleName: ""
-            });
-            o || Image.pop();
-            ViewStackProcessor.StopGetAccessRecording()
-        }));
-        Row.pop()
-    }
-
-    createImage(e, t = null) {
-        this.observeComponentCreation(((t, o) => {
-            ViewStackProcessor.StartGetAccessRecordingFor(t);
-            Image.create(e);
-            Image.height(48);
-            Image.width(48);
-            o || Image.pop();
-            ViewStackProcessor.StopGetAccessRecording()
-        }))
-    }
-
-    createText(e, t = null) {
-        this.observeComponentCreation(((t, o) => {
-            ViewStackProcessor.StartGetAccessRecordingFor(t);
-            Text.create(e);
-            Text.fontSize({
-                id: -1,
-                type: 10002,
-                params: ["sys.float.ohos_id_text_size_body2"],
-                bundleName: "",
-                moduleName: ""
-            });
-            Text.fontColor({
-                id: -1,
-                type: 10001,
-                params: ["sys.color.ohos_id_color_text_secondary"],
-                bundleName: "",
-                moduleName: ""
-            });
-            Text.focusable(!0);
-            o || Text.pop();
-            ViewStackProcessor.StopGetAccessRecording()
-        }));
-        Text.pop()
-    }
-
-    createArrow(e, t = null) {
-        this.observeComponentCreation(((t, o) => {
-            ViewStackProcessor.StartGetAccessRecordingFor(t);
-            Image.create(e.value);
-            Image.height(24);
-            Image.width(12);
-            Image.focusable(!0);
-            Image.fillColor({
-                id: -1,
-                type: 10001,
-                params: ["sys.color.ohos_id_color_fourth"],
-                bundleName: "",
-                moduleName: ""
-            });
-            Image.onClick(e.action);
-            o || Image.pop();
-            ViewStackProcessor.StopGetAccessRecording()
-        }))
-    }
-
-    createRadio(e, t = null) {
-        this.observeComponentCreation(((t, o) => {
-            ViewStackProcessor.StartGetAccessRecordingFor(t);
-            Radio.create({ value: null, group: null });
-            Radio.checked(this.radioState);
-            Radio.onChange(e.onChange);
-            Radio.height(24);
-            Radio.width(24);
-            o || Radio.pop();
-            ViewStackProcessor.StopGetAccessRecording()
-        }))
-    }
-
-    createCheckBox(e, t = null) {
-        this.observeComponentCreation(((t, o) => {
-            ViewStackProcessor.StartGetAccessRecordingFor(t);
-            Checkbox.create();
-            Checkbox.select(this.checkBoxState);
-            Checkbox.onChange(e.onChange);
-            Checkbox.height(24);
-            Checkbox.height(24);
-            o || Checkbox.pop();
-            ViewStackProcessor.StopGetAccessRecording()
-        }));
-        Checkbox.pop()
-    }
-
-    createSwitch(e, t = null) {
-        this.observeComponentCreation(((e, t) => {
-            ViewStackProcessor.StartGetAccessRecordingFor(e);
-            Row.create();
-            Row.height(48);
-            Row.width(48);
-            Row.justifyContent(FlexAlign.Center);
-            t || Row.pop();
-            ViewStackProcessor.StopGetAccessRecording()
-        }));
-        this.observeComponentCreation(((t, o) => {
-            ViewStackProcessor.StartGetAccessRecordingFor(t);
-            Toggle.create({ type: ToggleType.Switch, isOn: this.switchState });
-            Toggle.onChange(e.onChange);
-            Toggle.onClick((() => {
-                this.switchState = !this.switchState
-            }));
-            o || Toggle.pop();
-            ViewStackProcessor.StopGetAccessRecording()
-        }));
-        Toggle.pop();
-        Row.pop()
-    }
-
-    initialRender() {
-        this.observeComponentCreation(((e, t) => {
-            ViewStackProcessor.StartGetAccessRecordingFor(e);
-            Row.create({ space: this.rowSpace });
-            t || Row.pop();
-            ViewStackProcessor.StopGetAccessRecording()
-        }));
-        this.observeComponentCreation(((e, t) => {
-            ViewStackProcessor.StartGetAccessRecordingFor(e);
-            If.create();
-            null != this.button ? this.ifElseBranchUpdateFunction(0, (() => {
-                this.createButton.bind(this)(this.button.text)
-            })) : null != this.image ? this.ifElseBranchUpdateFunction(1, (() => {
-                this.createImage.bind(this)(this.image)
-            })) : null != this.icon && null != this.text ? this.ifElseBranchUpdateFunction(2, (() => {
-                this.createText.bind(this)(this.text);
-                this.createIcon.bind(this)(this.icon)
-            })) : null != this.arrow && null == this.text ? this.ifElseBranchUpdateFunction(3, (() => {
-                this.createArrow.bind(this)(this.arrow)
-            })) : null != this.arrow && null != this.text ? this.ifElseBranchUpdateFunction(4, (() => {
-                this.createText.bind(this)(this.text);
-                this.createArrow.bind(this)(this.arrow)
-            })) : null != this.text ? this.ifElseBranchUpdateFunction(5, (() => {
-                this.createText.bind(this)(this.text)
-            })) : null != this.radio ? this.ifElseBranchUpdateFunction(6, (() => {
-                this.createRadio.bind(this)(this.radio)
-            })) : null != this.checkBox ? this.ifElseBranchUpdateFunction(7, (() => {
-                this.createCheckBox.bind(this)(this.checkBox)
-            })) : null != this.switch ? this.ifElseBranchUpdateFunction(8, (() => {
-                this.createSwitch.bind(this)(this.switch)
-            })) : null != this.icon && this.ifElseBranchUpdateFunction(9, (() => {
-                this.createIcon.bind(this)(this.icon);
-                this.observeComponentCreation(((e, t) => {
-                    ViewStackProcessor.StartGetAccessRecordingFor(e);
-                    If.create();
-                    null != this.subIcon ? this.ifElseBranchUpdateFunction(0, (() => {
-                        this.createIcon.bind(this)(this.subIcon)
-                    })) : If.branchId(1);
-                    t || If.pop();
-                    ViewStackProcessor.StopGetAccessRecording()
-                }));
-                If.pop()
-            }));
-            t || If.pop();
-            ViewStackProcessor.StopGetAccessRecording()
-        }));
-        If.pop();
-        Row.pop()
-    }
-
-    rerender() {
-        this.updateDirtyElements()
-    }
-}
-
-export class ComposeListItem extends ViewPU {
-    constructor(e, t, o, i = -1) {
-        super(e, o, i);
-        this.__contentItem = new SynchedPropertyObjectOneWayPU(t.contentItem, this, "contentItem");
-        this.__operateItem = new SynchedPropertyObjectOneWayPU(t.operateItem, this, "operateItem");
-        this.__frontColor = new ObservedPropertySimplePU(Color.Transparent.toString(), this, "frontColor");
-        this.__borderSize = new ObservedPropertySimplePU(0, this, "borderSize");
-        this.isActive = !1;
-        this.setInitiallyProvidedValue(t)
-    }
-
-    setInitiallyProvidedValue(e) {
-        void 0 !== e.contentItem ? this.__contentItem.set(e.contentItem) : this.__contentItem.set(null);
-        void 0 !== e.operateItem ? this.__operateItem.set(e.operateItem) : this.__operateItem.set(null);
-        void 0 !== e.frontColor && (this.frontColor = e.frontColor);
-        void 0 !== e.borderSize && (this.borderSize = e.borderSize);
-        void 0 !== e.isActive && (this.isActive = e.isActive)
-    }
-
-    updateStateVars(e) {
-        this.__contentItem.reset(e.contentItem);
-        this.__operateItem.reset(e.operateItem)
-    }
-
-    purgeVariableDependenciesOnElmtId(e) {
-        this.__contentItem.purgeDependencyOnElmtId(e);
-        this.__operateItem.purgeDependencyOnElmtId(e);
-        this.__frontColor.purgeDependencyOnElmtId(e);
-        this.__borderSize.purgeDependencyOnElmtId(e)
-    }
-
-    aboutToBeDeleted() {
-        this.__contentItem.aboutToBeDeleted();
-        this.__operateItem.aboutToBeDeleted();
-        this.__frontColor.aboutToBeDeleted();
-        this.__borderSize.aboutToBeDeleted();
-        SubscriberManager.Get().delete(this.id__());
-        this.aboutToBeDeletedInternal()
-    }
-
-    get contentItem() {
-        return this.__contentItem.get()
-    }
-
-    set contentItem(e) {
-        this.__contentItem.set(e)
-    }
-
-    get operateItem() {
-        return this.__operateItem.get()
-    }
-
-    set operateItem(e) {
-        this.__operateItem.set(e)
-    }
-
-    get frontColor() {
-        return this.__frontColor.get()
-    }
-
-    set frontColor(e) {
-        this.__frontColor.set(e)
-    }
-
-    get borderSize() {
-        return this.__borderSize.get()
-    }
-
-    set borderSize(e) {
-        this.__borderSize.set(e)
-    }
-
-    initialRender() {
-        this.observeComponentCreation(((e, t) => {
-            ViewStackProcessor.StartGetAccessRecordingFor(e);
-            Column.create();
-            Column.padding({
-                left: {
-                    id: -1,
-                    type: 10002,
-                    params: ["sys.float.ohos_id_default_padding_start"],
-                    bundleName: "",
-                    moduleName: ""
-                },
-                right: {
-                    id: -1,
-                    type: 10002,
-                    params: ["sys.float.ohos_id_default_padding_end"],
-                    bundleName: "",
-                    moduleName: ""
-                }
-            });
-            t || Column.pop();
-            ViewStackProcessor.StopGetAccessRecording()
-        }));
-        this.observeComponentCreation(((e, t) => {
-            ViewStackProcessor.StartGetAccessRecordingFor(e);
-            Flex.create({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center });
-            Flex.focusable(!0);
-            Flex.border({
-                width: this.borderSize,
-                color: {
-                    id: -1,
-                    type: 10001,
-                    params: ["sys.color.ohos_id_color_focused_outline"],
-                    bundleName: "",
-                    moduleName: ""
-                }
-            });
-            Flex.borderRadius({
-                id: -1,
-                type: 10002,
-                params: ["sys.float.ohos_id_corner_radius_default_m"],
-                bundleName: "",
-                moduleName: ""
-            });
-            Flex.backgroundColor(this.frontColor);
-            Flex.onFocus((() => {
-                this.borderSize = 2
-            }));
-            Flex.onBlur((() => {
-                this.borderSize = 0
-            }));
-            Flex.onHover((e => {
-                this.frontColor = e ? "#0d000000" : this.isActive ? "#1a0a59f7" : Color.Transparent.toString()
-            }));
-            Flex.onTouch((e => {
-                e.type == TouchType.Down && (this.frontColor = "#1a000000");
-                e.type == TouchType.Up && (this.frontColor = this.isActive ? "#1a0a59f7" : Color.Transparent.toString())
-            }));
-            Flex.onClick((() => {
-                this.isActive = !this.isActive;
-                this.frontColor = this.isActive ? "#1a0a59f7" : Color.Transparent.toString()
-            }));
-            t || Flex.pop();
-            ViewStackProcessor.StopGetAccessRecording()
-        }));
-        this.observeComponentCreation(((e, t) => {
-            ViewStackProcessor.StartGetAccessRecordingFor(e);
-            If.create();
-            null == this.contentItem ? this.ifElseBranchUpdateFunction(0, (() => {
-                this.observeComponentCreation(((e, t) => {
-                    ViewStackProcessor.StartGetAccessRecordingFor(e);
-                    t ? ViewPU.create(new ContentItemStruct(this, {
-                        title: null
-                    }, void 0, e)) : this.updateStateVarsOfChildByElmtId(e, {});
-                    ViewStackProcessor.StopGetAccessRecording()
-                }))
-            })) : If.branchId(1);
-            t || If.pop();
-            ViewStackProcessor.StopGetAccessRecording()
-        }));
-        If.pop();
-        this.observeComponentCreation(((e, t) => {
-            ViewStackProcessor.StartGetAccessRecordingFor(e);
-            If.create();
-            null != this.contentItem ? this.ifElseBranchUpdateFunction(0, (() => {
-                this.observeComponentCreation(((e, t) => {
-                    ViewStackProcessor.StartGetAccessRecordingFor(e);
-                    t ? ViewPU.create(new ContentItemStruct(this, {
-                        icon: "string" == typeof this.contentItem.icon ? null : this.contentItem.icon,
-                        iconStyle: this.contentItem.iconStyle,
-                        title: "string" == typeof this.contentItem.primaryText ? this.contentItem.primaryText : null,
-                        subtitle: "string" == typeof this.contentItem.secondaryText ? this.contentItem.secondaryText : null,
-                        description: "string" == typeof this.contentItem.description ? this.contentItem.description : null
-                    }, void 0, e)) : this.updateStateVarsOfChildByElmtId(e, {});
-                    ViewStackProcessor.StopGetAccessRecording()
-                }))
-            })) : If.branchId(1);
-            t || If.pop();
-            ViewStackProcessor.StopGetAccessRecording()
-        }));
-        If.pop();
-        this.observeComponentCreation(((e, t) => {
-            ViewStackProcessor.StartGetAccessRecordingFor(e);
-            If.create();
-            null != this.operateItem ? this.ifElseBranchUpdateFunction(0, (() => {
-                this.observeComponentCreation(((e, t) => {
-                    ViewStackProcessor.StartGetAccessRecordingFor(e);
-                    t ? ViewPU.create(new OperateItemStruct(this, {
-                        icon: this.operateItem.icon,
-                        subIcon: this.operateItem.subIcon,
-                        button: this.operateItem.button,
-                        switch: this.operateItem.switch,
-                        checkBox: this.operateItem.checkbox,
-                        radio: this.operateItem.radio,
-                        image: "string" == typeof this.operateItem.image ? null : this.operateItem.image,
-                        text: "string" == typeof this.operateItem.text ? this.operateItem.text : null,
-                        arrow: "string" == typeof this.operateItem.arrow ? null : this.operateItem.arrow
-                    }, void 0, e)) : this.updateStateVarsOfChildByElmtId(e, {});
-                    ViewStackProcessor.StopGetAccessRecording()
-                }))
-            })) : If.branchId(1);
-            t || If.pop();
-            ViewStackProcessor.StopGetAccessRecording()
-        }));
-        If.pop();
-        Flex.pop();
-        Column.pop()
-    }
-
-    rerender() {
-        this.updateDirtyElements()
-    }
-}
-
-export default { IconType, ComposeListItem };

interface/composetitlebar/BUILD.gn

@@ -1,46 +0,0 @@
-# Copyright (c) 2023-2023 Huawei Device Co., Ltd.
-# Licensed under the Apache License, Version 2.0 (the "License");
-# you may not use this file except in compliance with the License.
-# You may obtain a copy of the License at
-#
-#     http://www.apache.org/licenses/LICENSE-2.0
-#
-# Unless required by applicable law or agreed to in writing, software
-# distributed under the License is distributed on an "AS IS" BASIS,
-# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-# See the License for the specific language governing permissions and
-# limitations under the License.
-
-import("//build/ohos.gni")
-import("//foundation/arkui/ace_engine/ace_config.gni")
-import("//arkcompiler/ets_frontend/es2panda/es2abc_config.gni")
-
-es2abc_gen_abc("gen_composetitlebar_abc") {
-  src_js = rebase_path("composetitlebar.js")
-  dst_file = rebase_path(target_out_dir + "/composetitlebar.abc")
-  in_puts = [ "composetitlebar.js" ]
-  out_puts = [ target_out_dir + "/composetitlebar.abc" ]
-  extra_args = [ "--module" ]
-}
-
-gen_js_obj("composetitlebar_abc") {
-  input = get_label_info(":gen_composetitlebar_abc", "target_out_dir") + "/composetitlebar.abc"
-  output = target_out_dir + "/composetitlebar_abc.o"
-  dep = ":gen_composetitlebar_abc"
-}
-
-ohos_shared_library("composetitlebar") {
-  sources = [ "composetitlebar.cpp" ]
-
-  deps = [ ":composetitlebar_abc" ]
-
-  external_deps = [
-    "hilog:libhilog",
-    "napi:ace_napi",
-  ]
-
-  subsystem_name = "arkui"
-  part_name = "advanced_ui_component"
-
-  relative_install_dir = "module/arkui/advanced"
-}

interface/composetitlebar/composetitlebar.cpp

@@ -1,49 +0,0 @@
-/*
- * Copyright (c) 2023-2023 Huawei Device Co., Ltd.
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-#include "native_engine/native_engine.h"
-
-#include "napi/native_api.h"
-#include "napi/native_node_api.h"
-
-extern const char _binary_composetitlebar_abc_start[];
-extern const char _binary_composetitlebar_abc_end[];
-
-// Napi get abc code function
-extern "C" __attribute__((visibility("default")))
-void NAPI_arkui_advanced_ComposeTitleBar_GetABCCode(const char **buf, int *buflen)
-    {
-    if (buf != nullptr) {
-        *buf = _binary_composetitlebar_abc_start;
-        }
-        if (buflen != nullptr) {
-            *buflen = _binary_composetitlebar_abc_end - _binary_composetitlebar_abc_start;
-        }
-    }
-
-
-static napi_module composetitlebarModule = {
-    .nm_version = 1,
-    .nm_flags = 0,
-    .nm_filename = nullptr,
-    .nm_modname = "arkui.advanced.ComposeTitleBar",
-    .nm_priv = ((void*)0),
-    .reserved = { 0 },
-};
-
-extern "C" __attribute__((constructor)) void composetitlebarRegisterModule(void)
-{
-    napi_module_register(&composetitlebarModule);
-}

interface/composetitlebar/composetitlebar.js

@@ -1,714 +0,0 @@
-/*
- * Copyright (c) 2023-2023 Huawei Device Co., Ltd.
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-var __decorate = this && this.__decorate || function(e, t, o, i) {
-  var s, r = arguments.length,
-    n = r < 3 ? t : null === i ? i = Object.getOwnPropertyDescriptor(t, o) : i;
-  if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) n = Reflect.decorate(e, t, o, i);
-  else
-    for (var c = e.length - 1; c >= 0; c--)(s = e[c]) && (n = (r < 3 ? s(n) : r > 3 ? s(t, o, n) : s(t, o)) || n);
-  return r > 3 && n && Object.defineProperty(t, o, n), n
-};
-const KeyCode = requireNapi('multimodalInput.keyCode').KeyCode;
-const PUBLIC_MORE = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMAAAADACAYAAABS3GwHAAAAIGNIUk0AAHomAACAhAAA+gAAAIDoAAB1MAAA6mAAADqYAAAXcJy6UTwAAAAEZ0FNQQAAsY58+1GTAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAAOxAAADsQBlSsOGwAABEZJREFUeNrt3D1rFFEUBuAxhmAhFlYpUohYiYWFRcAmKAhWK2pjo1iKf8BCMIKFf8BarCyMhVj4VZhGSKEg2FqJyCKWIhYWnstMINgYsh+cmfs88BICydxw7jmzu2HvNg0AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADBN+3r6dx+LXIqsRpa7FF8j48hm5Fn3Peo9mAEYRdYjJ3f582Vj7nZfUe/eDsCRyMPI2h5/fyNyI/JDT6v3Tvt7sBllE15ETkxwjeORi5G3ke/6W737MgBnI68jh6ZwrcORq5HnhkC9+zAA5YXXy8jBKV5zKXIu8jjyS7+rd+YBeNVtyrSVO9PRyBM9r94LSTfjWuTUDK9/eYIXeENUbb0zDsBi5PYc1rmj79U74wCszuih+F/ljrSi/+uud8YBGA10rayqrnfGAVgb6FpZVV3vjAOwPNC1sqq63hkHYGWga2VVdb0XKt/8Rf1fd70zDsB4jmt5u3Tl9a59AMb6v+56ZxyArYGulVXV9c44ABtzXOup/q+73hkH4N2cHio/Rj7r/7rrnXEAfkfuz2Gddb2v3ln/DfpgxneLzaY9xE3l9c46AH8iVyI/Z3Dt8nB/Xc+rd5H5QMy3yJemPVs6zY0edc9HUe/0Z4I/dQ/N5Vjd0oTXKp9QcKFpD2qj3r0YgO1NeRM507TH6/bifeR85IMeV++d+vTBWOV9JDcjt5rdv6uw3M3uRR7pa/Xu+wBsOxA53bTnTP/3UX1b3fNQ1BsAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAKqyr6d/97HIpchqZLlL8TUyjmxGnnXfo96DGYBRZD1ycpc/XzbmbvcV9e7tAByJPIys7fH3NyI3Ij/0tHrvtL8Hm1E24UXkxATXOB65GHkb+a6/1bsvA3A28jpyaArXOhy5GnluCNS7DwNQXni9jByc4jWXIucijyO/9Lt6Zx6AV92mTFu5Mx2NPNHz6r2QdDOuRU7N8PqXJ3iBN0TV1jvjACxGbs9hnTv6Xr0zDsDqjB6K/1XuSCv6v+56ZxyA0UDXyqrqemccgLWBrpVV1fXOOADLA10rq6rrnXEAVga6VlZV13uh8s1f1P911zvjAIznuJa3S1de79oHYKz/6653xgHYGuhaWVVd74wDsDHHtZ7q/7rrnXEA3s3pofJj5LP+r7veGQfgd+T+HNZZ1/vqnfXfoA9mfLfYbNpD3FRe76wD8CdyJfJzBtcuD/fX9bx6F5kPxHyLfGnas6XT3OhR93wU9U5/JvhT99BcjtUtTXit8gkFF5r2oDbq3YsB2N6UN5EzTXu8bi/eR85HPuhx9d6pTx+MVd5HcjNyq9n9uwrL3exe5JG+Vu++D8C2A5HTTXvO9H8f1bfVPQ9FvQEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgCn7C9HjBtwWfXpKAAAAAElFTkSuQmCC";
-const PUBLIC_BACK = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMAAAADACAYAAABS3GwHAAAAIGNIUk0AAHomAACAhAAA+gAAAIDoAAB1MAAA6mAAADqYAAAXcJy6UTwAAAAEZ0FNQQAAsY58+1GTAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAAOxAAADsQBlSsOGwAAA8VJREFUeNrt3LFLlHEYwPFXz0GiIZpEoikkwsFRIiK3gqCigxIC/4Kmhv6OoChouaGoqKCgCKducGh0cDAIamhwiCaHCIeelztpUszee/vl8/nAM3Vd8nufr+fddVYVAAAAAAAAAAAAAAAAAAAAAABQijFH0KhrMd2Y2ZitmNWYRzHLjkYAB9lUzMOYizv8eS/mZsymoypLxxE0svzvY07vcpu5mOmY145LAAdx+U/u4bZzwx+JPjq2cow7glaWf1vXsQkg6/JvPwoggJTLjwDSL/8nRyiAzN/5nzpGAWRd/n7MM0cpgIzLvx6z6CjL453gdpZ/IWbDcQrA8iMAy48ALD8CsPwIwPIjAMuPACw/ArD8CMDyIwDLjwAsPwKw/AjA8iMAy48ALD8CsPwIwPIjAMuPACw/ArD85A3A8pM2AMtP2gAsP2kDsPykDcDykzYAy0/aACw/aQOw/KQNwPKTNgDLT9oALD9pA7D8pA3A8pM2AMtP2gAsP2kDsPykDcDykzYAy0/aACw/aQOw/KQNwPKTNgDLT9oALD9pA7D8pA3A8pM2AMtP2gAsP2kDsPykDcDykzYAy0/aACw/aQOw/KQNwPLz3xlv6H4mYp5YfrI+AizF9BwnI/AlZi3mbsxy03feaeh+HsQcc60YgSMxMzE3YmZj3sX8LOlHoPoLnHedaEE35n5pzwF856dN9SPBpZICmHRNaNnlkgL46nrQsvmSAqhftlx1TWjR4ZICqPVcE1q0XloA96rBa7XQhl5pAWzFXKm8i8vo9WMeN3VnnQa/sO8xL2POxEy7Toxo+RdjNpu6w1F9HuBqNXi99lw1eKMM9utHzIeYV8MftbccCQAAAAAAsBdt/XLc+sPy9W+MmPqL+1iJuVA1+C4gdFr6d77FvK0GH2nb739lPR5zNuZ51eBnQhFAJQIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIE8M8jmBlGgABSRnAqZiXms+MUQNYIDnkUKMu4I/gj6zELMRv7/PsnHKEAMkcw6fgEkDmCNUcngMwRvHFsngRnfWJcL/9tRyaAgxrB+ZijO9ymH7MUs+m4yjLmCBozEXMr5nr1+9We1ZgXMXccDwAAAAAAAAAAAAAAAAAAAAAAwO5+AfVgtqHKRnawAAAAAElFTkSuQmCC";
-export class ComposeTitleBar extends ViewPU {
-  constructor(e, t, o, i = -1) {
-    super(e, o, i);
-    this.item = void 0;
-    this.title = void 0;
-    this.subtitle = void 0;
-    this.menuItems = void 0;
-    this.__titleMaxWidth = new ObservedPropertySimplePU(0, this, "titleMaxWidth");
-    this.__isItemOnFocus = new ObservedPropertySimplePU(!1, this, "isItemOnFocus");
-    this.setInitiallyProvidedValue(t)
-  }
-  setInitiallyProvidedValue(e) {
-    void 0 !== e.item && (this.item = e.item);
-    void 0 !== e.title && (this.title = e.title);
-    void 0 !== e.subtitle && (this.subtitle = e.subtitle);
-    void 0 !== e.menuItems && (this.menuItems = e.menuItems);
-    void 0 !== e.titleMaxWidth && (this.titleMaxWidth = e.titleMaxWidth);
-    void 0 !== e.isItemOnFocus && (this.isItemOnFocus = e.isItemOnFocus)
-  }
-  updateStateVars(e) {}
-  purgeVariableDependenciesOnElmtId(e) {
-    this.__titleMaxWidth.purgeDependencyOnElmtId(e);
-    this.__isItemOnFocus.purgeDependencyOnElmtId(e)
-  }
-  aboutToBeDeleted() {
-    this.__titleMaxWidth.aboutToBeDeleted();
-    this.__isItemOnFocus.aboutToBeDeleted();
-    SubscriberManager.Get().delete(this.id__());
-    this.aboutToBeDeletedInternal()
-  }
-  get titleMaxWidth() {
-    return this.__titleMaxWidth.get()
-  }
-  set titleMaxWidth(e) {
-    this.__titleMaxWidth.set(e)
-  }
-  get isItemOnFocus() {
-    return this.__isItemOnFocus.get()
-  }
-  set isItemOnFocus(e) {
-    this.__isItemOnFocus.set(e)
-  }
-  initialRender() {
-    this.observeComponentCreation(((e, t) => {
-      ViewStackProcessor.StartGetAccessRecordingFor(e);
-      Flex.create({
-        justifyContent: FlexAlign.SpaceBetween,
-        alignItems: ItemAlign.Stretch
-      });
-      Flex.width("100%");
-      Flex.height(ComposeTitleBar.totalHeight);
-      Flex.backgroundColor({
-        id: -1,
-        type: 10001,
-        params: ["sys.color.ohos_id_color_background"],
-        bundleName: "",
-        moduleName: ""
-      });
-      Flex.onAreaChange(((e, t) => {
-        let o = Number(t.width);
-        if (void 0 !== this.menuItems) {
-          let e = this.menuItems.length;
-          e >= CollapsibleMenuSection.maxCountOfVisibleItems ? o -= ImageMenuItem.imageHotZoneWidth * CollapsibleMenuSection.maxCountOfVisibleItems : e > 0 && (o -= ImageMenuItem.imageHotZoneWidth * e)
-        }
-        this.titleMaxWidth = o;
-        this.titleMaxWidth -= ComposeTitleBar.leftPadding;
-        this.titleMaxWidth -= ImageMenuItem.imageHotZoneWidth;
-        void 0 !== this.item && (this.titleMaxWidth -= ComposeTitleBar.portraitImageLeftPadding + ComposeTitleBar.portraitImageSize + ComposeTitleBar.portraitImageRightPadding);
-        this.titleMaxWidth -= ComposeTitleBar.rightPadding
-      }));
-      t || Flex.pop();
-      ViewStackProcessor.StopGetAccessRecording()
-    }));
-    this.observeComponentCreation(((e, t) => {
-      ViewStackProcessor.StartGetAccessRecordingFor(e);
-      Row.create();
-      Row.margin({
-        left: {
-          id: -1,
-          type: 10002,
-          params: ["sys.float.ohos_id_default_padding_start"],
-          bundleName: "",
-          moduleName: ""
-        }
-      });
-      t || Row.pop();
-      ViewStackProcessor.StopGetAccessRecording()
-    }));
-    this.observeComponentCreation(((e, t) => {
-      ViewStackProcessor.StartGetAccessRecordingFor(e);
-      Navigator.create();
-      t || Navigator.pop();
-      ViewStackProcessor.StopGetAccessRecording()
-    }));
-    this.observeComponentCreation(((e, t) => {
-      ViewStackProcessor.StartGetAccessRecordingFor(e);
-      t ? ViewPU.create(new ImageMenuItem(this, {
-        item: {
-          value: PUBLIC_BACK,
-          isEnabled: !0
-        }
-      }, void 0, e)) : this.updateStateVarsOfChildByElmtId(e, {});
-      ViewStackProcessor.StopGetAccessRecording()
-    }));
-    Navigator.pop();
-    this.observeComponentCreation(((e, t) => {
-      ViewStackProcessor.StartGetAccessRecordingFor(e);
-      If.create();
-      void 0 !== this.item ? this.ifElseBranchUpdateFunction(0, (() => {
-        this.observeComponentCreation(((e, t) => {
-          ViewStackProcessor.StartGetAccessRecordingFor(e);
-          Image.create(this.item.value);
-          Image.width(ComposeTitleBar.portraitImageSize);
-          Image.height(ComposeTitleBar.portraitImageSize);
-          Image.margin({
-            left: {
-              id: -1,
-              type: 10002,
-              params: ["sys.float.ohos_id_text_paragraph_margin_xs"],
-              bundleName: "",
-              moduleName: ""
-            },
-            right: {
-              id: -1,
-              type: 10002,
-              params: ["sys.float.ohos_id_text_paragraph_margin_m"],
-              bundleName: "",
-              moduleName: ""
-            }
-          });
-          Image.focusable(this.item.isEnabled);
-          Image.borderRadius(ImageMenuItem.buttonBorderRadius);
-          Image.onFocus((() => this.isItemOnFocus = !0));
-          Image.onBlur((() => this.isItemOnFocus = !1));
-          Image.border(this.isItemOnFocus ? {
-            width: ImageMenuItem.focusBorderWidth,
-            color: {
-              id: -1,
-              type: 10001,
-              params: ["sys.color.ohos_id_color_emphasize"],
-              bundleName: "",
-              moduleName: ""
-            },
-            style: BorderStyle.Solid
-          } : {
-            width: 0
-          });
-          Image.onClick((() => this.item.isEnabled && this.item.action && this.item.action()));
-          t || Image.pop();
-          ViewStackProcessor.StopGetAccessRecording()
-        }))
-      })) : If.branchId(1);
-      t || If.pop();
-      ViewStackProcessor.StopGetAccessRecording()
-    }));
-    If.pop();
-    this.observeComponentCreation(((e, t) => {
-      ViewStackProcessor.StartGetAccessRecordingFor(e);
-      Column.create();
-      Column.justifyContent(FlexAlign.Start);
-      Column.alignItems(HorizontalAlign.Start);
-      Column.constraintSize({
-        maxWidth: this.titleMaxWidth
-      });
-      t || Column.pop();
-      ViewStackProcessor.StopGetAccessRecording()
-    }));
-    this.observeComponentCreation(((e, t) => {
-      ViewStackProcessor.StartGetAccessRecordingFor(e);
-      If.create();
-      void 0 !== this.title ? this.ifElseBranchUpdateFunction(0, (() => {
-        this.observeComponentCreation(((e, t) => {
-          ViewStackProcessor.StartGetAccessRecordingFor(e);
-          Row.create();
-          Row.justifyContent(FlexAlign.Start);
-          t || Row.pop();
-          ViewStackProcessor.StopGetAccessRecording()
-        }));
-        this.observeComponentCreation(((e, t) => {
-          ViewStackProcessor.StartGetAccessRecordingFor(e);
-          Text.create(this.title);
-          Text.fontWeight(FontWeight.Medium);
-          Text.fontSize({
-            id: -1,
-            type: 10002,
-            params: ["sys.float.ohos_id_text_size_headline8"],
-            bundleName: "",
-            moduleName: ""
-          });
-          Text.fontColor({
-            id: -1,
-            type: 10001,
-            params: ["sys.color.ohos_id_color_titlebar_text"],
-            bundleName: "",
-            moduleName: ""
-          });
-          Text.maxLines(void 0 !== this.subtitle ? 1 : 2);
-          Text.textOverflow({
-            overflow: TextOverflow.Ellipsis
-          });
-          Text.constraintSize({
-            maxWidth: this.titleMaxWidth
-          });
-          t || Text.pop();
-          ViewStackProcessor.StopGetAccessRecording()
-        }));
-        Text.pop();
-        Row.pop()
-      })) : If.branchId(1);
-      t || If.pop();
-      ViewStackProcessor.StopGetAccessRecording()
-    }));
-    If.pop();
-    this.observeComponentCreation(((e, t) => {
-      ViewStackProcessor.StartGetAccessRecordingFor(e);
-      If.create();
-      void 0 !== this.subtitle ? this.ifElseBranchUpdateFunction(0, (() => {
-        this.observeComponentCreation(((e, t) => {
-          ViewStackProcessor.StartGetAccessRecordingFor(e);
-          Row.create();
-          Row.justifyContent(FlexAlign.Start);
-          t || Row.pop();
-          ViewStackProcessor.StopGetAccessRecording()
-        }));
-        this.observeComponentCreation(((e, t) => {
-          ViewStackProcessor.StartGetAccessRecordingFor(e);
-          Text.create(this.subtitle);
-          Text.fontSize({
-            id: -1,
-            type: 10002,
-            params: ["sys.float.ohos_id_text_size_over_line"],
-            bundleName: "",
-            moduleName: ""
-          });
-          Text.fontColor({
-            id: -1,
-            type: 10001,
-            params: ["sys.color.ohos_id_color_titlebar_subtitle_text"],
-            bundleName: "",
-            moduleName: ""
-          });
-          Text.maxLines(1);
-          Text.textOverflow({
-            overflow: TextOverflow.Ellipsis
-          });
-          Text.constraintSize({
-            maxWidth: this.titleMaxWidth
-          });
-          t || Text.pop();
-          ViewStackProcessor.StopGetAccessRecording()
-        }));
-        Text.pop();
-        Row.pop()
-      })) : If.branchId(1);
-      t || If.pop();
-      ViewStackProcessor.StopGetAccessRecording()
-    }));
-    If.pop();
-    Column.pop();
-    Row.pop();
-    this.observeComponentCreation(((e, t) => {
-      ViewStackProcessor.StartGetAccessRecordingFor(e);
-      If.create();
-      void 0 !== this.menuItems && this.menuItems.length > 0 ? this.ifElseBranchUpdateFunction(0, (() => {
-        this.observeComponentCreation(((e, t) => {
-          ViewStackProcessor.StartGetAccessRecordingFor(e);
-          t ? ViewPU.create(new CollapsibleMenuSection(this, {
-            menuItems: this.menuItems
-          }, void 0, e)) : this.updateStateVarsOfChildByElmtId(e, {});
-          ViewStackProcessor.StopGetAccessRecording()
-        }))
-      })) : If.branchId(1);
-      t || If.pop();
-      ViewStackProcessor.StopGetAccessRecording()
-    }));
-    If.pop();
-    Flex.pop()
-  }
-  rerender() {
-    this.updateDirtyElements()
-  }
-}
-ComposeTitleBar.totalHeight = 56;
-ComposeTitleBar.leftPadding = 12;
-ComposeTitleBar.rightPadding = 12;
-ComposeTitleBar.portraitImageSize = 40;
-ComposeTitleBar.portraitImageLeftPadding = 4;
-ComposeTitleBar.portraitImageRightPadding = 16;
-class CollapsibleMenuSection extends ViewPU {
-  constructor(e, t, o, i = -1) {
-    super(e, o, i);
-    this.menuItems = void 0;
-    this.__isPopupShown = new ObservedPropertySimplePU(!1, this, "isPopupShown");
-    this.__isMoreIconOnFocus = new ObservedPropertySimplePU(!1, this, "isMoreIconOnFocus");
-    this.__isMoreIconOnHover = new ObservedPropertySimplePU(!1, this, "isMoreIconOnHover");
-    this.__isMoreIconOnClick = new ObservedPropertySimplePU(!1, this, "isMoreIconOnClick");
-    this.setInitiallyProvidedValue(t)
-  }
-  setInitiallyProvidedValue(e) {
-    void 0 !== e.menuItems && (this.menuItems = e.menuItems);
-    void 0 !== e.isPopupShown && (this.isPopupShown = e.isPopupShown);
-    void 0 !== e.isMoreIconOnFocus && (this.isMoreIconOnFocus = e.isMoreIconOnFocus);
-    void 0 !== e.isMoreIconOnHover && (this.isMoreIconOnHover = e.isMoreIconOnHover);
-    void 0 !== e.isMoreIconOnClick && (this.isMoreIconOnClick = e.isMoreIconOnClick)
-  }
-  updateStateVars(e) {}
-  purgeVariableDependenciesOnElmtId(e) {
-    this.__isPopupShown.purgeDependencyOnElmtId(e);
-    this.__isMoreIconOnFocus.purgeDependencyOnElmtId(e);
-    this.__isMoreIconOnHover.purgeDependencyOnElmtId(e);
-    this.__isMoreIconOnClick.purgeDependencyOnElmtId(e)
-  }
-  aboutToBeDeleted() {
-    this.__isPopupShown.aboutToBeDeleted();
-    this.__isMoreIconOnFocus.aboutToBeDeleted();
-    this.__isMoreIconOnHover.aboutToBeDeleted();
-    this.__isMoreIconOnClick.aboutToBeDeleted();
-    SubscriberManager.Get().delete(this.id__());
-    this.aboutToBeDeletedInternal()
-  }
-  get isPopupShown() {
-    return this.__isPopupShown.get()
-  }
-  set isPopupShown(e) {
-    this.__isPopupShown.set(e)
-  }
-  get isMoreIconOnFocus() {
-    return this.__isMoreIconOnFocus.get()
-  }
-  set isMoreIconOnFocus(e) {
-    this.__isMoreIconOnFocus.set(e)
-  }
-  get isMoreIconOnHover() {
-    return this.__isMoreIconOnHover.get()
-  }
-  set isMoreIconOnHover(e) {
-    this.__isMoreIconOnHover.set(e)
-  }
-  get isMoreIconOnClick() {
-    return this.__isMoreIconOnClick.get()
-  }
-  set isMoreIconOnClick(e) {
-    this.__isMoreIconOnClick.set(e)
-  }
-  getMoreIconFgColor() {
-    return this.isMoreIconOnClick ? {
-      id: -1,
-      type: 10001,
-      params: ["sys.color.ohos_id_color_titlebar_icon_pressed"],
-      bundleName: "",
-      moduleName: ""
-    } : {
-      id: -1,
-      type: 10001,
-      params: ["sys.color.ohos_id_color_titlebar_icon"],
-      bundleName: "",
-      moduleName: ""
-    }
-  }
-  getMoreIconBgColor() {
-    return this.isMoreIconOnClick ? {
-      id: -1,
-      type: 10001,
-      params: ["sys.color.ohos_id_color_click_effect"],
-      bundleName: "",
-      moduleName: ""
-    } : this.isMoreIconOnHover ? {
-      id: -1,
-      type: 10001,
-      params: ["sys.color.ohos_id_color_hover"],
-      bundleName: "",
-      moduleName: ""
-    } : Color.Transparent
-  }
-  initialRender() {
-    this.observeComponentCreation(((e, t) => {
-      ViewStackProcessor.StartGetAccessRecordingFor(e);
-      Column.create();
-      Column.height("100%");
-      Column.margin({
-        right: {
-          id: -1,
-          type: 10002,
-          params: ["sys.float.ohos_id_default_padding_end"],
-          bundleName: "",
-          moduleName: ""
-        }
-      });
-      Column.justifyContent(FlexAlign.Center);
-      t || Column.pop();
-      ViewStackProcessor.StopGetAccessRecording()
-    }));
-    this.observeComponentCreation(((e, t) => {
-      ViewStackProcessor.StartGetAccessRecordingFor(e);
-      Row.create();
-      t || Row.pop();
-      ViewStackProcessor.StopGetAccessRecording()
-    }));
-    this.observeComponentCreation(((e, t) => {
-      ViewStackProcessor.StartGetAccessRecordingFor(e);
-      If.create();
-      this.menuItems.length <= CollapsibleMenuSection.maxCountOfVisibleItems ? this.ifElseBranchUpdateFunction(0, (() => {
-        this.observeComponentCreation(((e, t) => {
-          ViewStackProcessor.StartGetAccessRecordingFor(e);
-          ForEach.create();
-          this.forEachUpdateFunction(e, this.menuItems, (e => {
-            const t = e;
-            this.observeComponentCreation(((e, o) => {
-              ViewStackProcessor.StartGetAccessRecordingFor(e);
-              o ? ViewPU.create(new ImageMenuItem(this, {
-                item: t
-              }, void 0, e)) : this.updateStateVarsOfChildByElmtId(e, {});
-              ViewStackProcessor.StopGetAccessRecording()
-            }))
-          }));
-          t || ForEach.pop();
-          ViewStackProcessor.StopGetAccessRecording()
-        }));
-        ForEach.pop()
-      })) : this.ifElseBranchUpdateFunction(1, (() => {
-        this.observeComponentCreation(((e, t) => {
-          ViewStackProcessor.StartGetAccessRecordingFor(e);
-          ForEach.create();
-          this.forEachUpdateFunction(e, this.menuItems.slice(0, CollapsibleMenuSection.maxCountOfVisibleItems - 1), (e => {
-            const t = e;
-            this.observeComponentCreation(((e, o) => {
-              ViewStackProcessor.StartGetAccessRecordingFor(e);
-              o ? ViewPU.create(new ImageMenuItem(this, {
-                item: t
-              }, void 0, e)) : this.updateStateVarsOfChildByElmtId(e, {});
-              ViewStackProcessor.StopGetAccessRecording()
-            }))
-          }));
-          t || ForEach.pop();
-          ViewStackProcessor.StopGetAccessRecording()
-        }));
-        ForEach.pop();
-        this.observeComponentCreation(((e, t) => {
-          ViewStackProcessor.StartGetAccessRecordingFor(e);
-          Row.create();
-          Row.width(ImageMenuItem.imageHotZoneWidth);
-          Row.height(ImageMenuItem.imageHotZoneWidth);
-          Row.borderRadius(ImageMenuItem.buttonBorderRadius);
-          Row.foregroundColor(this.getMoreIconFgColor());
-          Row.backgroundColor(this.getMoreIconBgColor());
-          Row.justifyContent(FlexAlign.Center);
-          Row.border(this.isMoreIconOnFocus ? {
-            width: ImageMenuItem.focusBorderWidth,
-            color: {
-              id: -1,
-              type: 10001,
-              params: ["sys.color.ohos_id_color_emphasize"],
-              bundleName: "",
-              moduleName: ""
-            },
-            style: BorderStyle.Solid
-          } : {
-            width: 0
-          });
-          Row.onFocus((() => this.isMoreIconOnFocus = !0));
-          Row.onBlur((() => this.isMoreIconOnFocus = !1));
-          Row.onHover((e => this.isMoreIconOnHover = e));
-          Row.onKeyEvent((e => {
-            if (e.keyCode === KeyCode.KEYCODE_ENTER || e.keyCode === KeyCode.KEYCODE_SPACE) {
-              e.type === KeyType.Down && (this.isMoreIconOnClick = !0);
-              e.type === KeyType.Up && (this.isMoreIconOnClick = !1)
-            }
-          }));
-          Row.onTouch((e => {
-            e.type === TouchType.Down && (this.isMoreIconOnClick = !0);
-            e.type === TouchType.Up && (this.isMoreIconOnClick = !1)
-          }));
-          Row.onClick((() => this.isPopupShown = !0));
-          Row.bindPopup(this.isPopupShown, {
-            builder: {
-              builder: this.popupBuilder.bind(this)
-            },
-            placement: Placement.Bottom,
-            popupColor: Color.White,
-            enableArrow: !1,
-            onStateChange: e => this.isPopupShown = e.isVisible
-          });
-          t || Row.pop();
-          ViewStackProcessor.StopGetAccessRecording()
-        }));
-        this.observeComponentCreation(((e, t) => {
-          ViewStackProcessor.StartGetAccessRecordingFor(e);
-          Image.create(PUBLIC_MORE);
-          Image.width(ImageMenuItem.imageSize);
-          Image.height(ImageMenuItem.imageSize);
-          Image.focusable(!0);
-          t || Image.pop();
-          ViewStackProcessor.StopGetAccessRecording()
-        }));
-        Row.pop()
-      }));
-      t || If.pop();
-      ViewStackProcessor.StopGetAccessRecording()
-    }));
-    If.pop();
-    Row.pop();
-    Column.pop()
-  }
-  popupBuilder(e = null) {
-    this.observeComponentCreation(((e, t) => {
-      ViewStackProcessor.StartGetAccessRecordingFor(e);
-      Column.create();
-      Column.width(ImageMenuItem.imageHotZoneWidth + CollapsibleMenuSection.focusPadding * CollapsibleMenuSection.marginsNum);
-      Column.margin({
-        top: CollapsibleMenuSection.focusPadding,
-        bottom: CollapsibleMenuSection.focusPadding
-      });
-      t || Column.pop();
-      ViewStackProcessor.StopGetAccessRecording()
-    }));
-    this.observeComponentCreation(((e, t) => {
-      ViewStackProcessor.StartGetAccessRecordingFor(e);
-      ForEach.create();
-      this.forEachUpdateFunction(e, this.menuItems.slice(CollapsibleMenuSection.maxCountOfVisibleItems - 1, this.menuItems.length), ((e, t) => {
-        const o = e;
-        this.observeComponentCreation(((e, t) => {
-          ViewStackProcessor.StartGetAccessRecordingFor(e);
-          t ? ViewPU.create(new ImageMenuItem(this, {
-            item: o
-          }, void 0, e)) : this.updateStateVarsOfChildByElmtId(e, {});
-          ViewStackProcessor.StopGetAccessRecording()
-        }))
-      }), void 0, !0, !1);
-      t || ForEach.pop();
-      ViewStackProcessor.StopGetAccessRecording()
-    }));
-    ForEach.pop();
-    Column.pop()
-  }
-  rerender() {
-    this.updateDirtyElements()
-  }
-}
-CollapsibleMenuSection.maxCountOfVisibleItems = 3;
-CollapsibleMenuSection.focusPadding = 4;
-CollapsibleMenuSection.marginsNum = 2;
-__decorate([], CollapsibleMenuSection.prototype, "popupBuilder", null);
-class ImageMenuItem extends ViewPU {
-  constructor(e, t, o, i = -1) {
-    super(e, o, i);
-    this.item = void 0;
-    this.__isOnFocus = new ObservedPropertySimplePU(!1, this, "isOnFocus");
-    this.__isOnHover = new ObservedPropertySimplePU(!1, this, "isOnHover");
-    this.__isOnClick = new ObservedPropertySimplePU(!1, this, "isOnClick");
-    this.setInitiallyProvidedValue(t)
-  }
-  setInitiallyProvidedValue(e) {
-    void 0 !== e.item && (this.item = e.item);
-    void 0 !== e.isOnFocus && (this.isOnFocus = e.isOnFocus);
-    void 0 !== e.isOnHover && (this.isOnHover = e.isOnHover);
-    void 0 !== e.isOnClick && (this.isOnClick = e.isOnClick)
-  }
-  updateStateVars(e) {}
-  purgeVariableDependenciesOnElmtId(e) {
-    this.__isOnFocus.purgeDependencyOnElmtId(e);
-    this.__isOnHover.purgeDependencyOnElmtId(e);
-    this.__isOnClick.purgeDependencyOnElmtId(e)
-  }
-  aboutToBeDeleted() {
-    this.__isOnFocus.aboutToBeDeleted();
-    this.__isOnHover.aboutToBeDeleted();
-    this.__isOnClick.aboutToBeDeleted();
-    SubscriberManager.Get().delete(this.id__());
-    this.aboutToBeDeletedInternal()
-  }
-  get isOnFocus() {
-    return this.__isOnFocus.get()
-  }
-  set isOnFocus(e) {
-    this.__isOnFocus.set(e)
-  }
-  get isOnHover() {
-    return this.__isOnHover.get()
-  }
-  set isOnHover(e) {
-    this.__isOnHover.set(e)
-  }
-  get isOnClick() {
-    return this.__isOnClick.get()
-  }
-  set isOnClick(e) {
-    this.__isOnClick.set(e)
-  }
-  getFgColor() {
-    return this.isOnClick ? {
-      id: -1,
-      type: 10001,
-      params: ["sys.color.ohos_id_color_titlebar_icon_pressed"],
-      bundleName: "",
-      moduleName: ""
-    } : {
-      id: -1,
-      type: 10001,
-      params: ["sys.color.ohos_id_color_titlebar_icon"],
-      bundleName: "",
-      moduleName: ""
-    }
-  }
-  getBgColor() {
-    return this.isOnClick ? {
-      id: -1,
-      type: 10001,
-      params: ["sys.color.ohos_id_color_click_effect"],
-      bundleName: "",
-      moduleName: ""
-    } : this.isOnHover ? {
-      id: -1,
-      type: 10001,
-      params: ["sys.color.ohos_id_color_hover"],
-      bundleName: "",
-      moduleName: ""
-    } : Color.Transparent
-  }
-  initialRender() {
-    this.observeComponentCreation(((e, t) => {
-      ViewStackProcessor.StartGetAccessRecordingFor(e);
-      Row.create();
-      Row.width(ImageMenuItem.imageHotZoneWidth);
-      Row.height(ImageMenuItem.imageHotZoneWidth);
-      Row.borderRadius(ImageMenuItem.buttonBorderRadius);
-      Row.foregroundColor(this.getFgColor());
-      Row.backgroundColor(this.getBgColor());
-      Row.justifyContent(FlexAlign.Center);
-      Row.opacity(this.item.isEnabled ? 1 : ImageMenuItem.disabledImageOpacity);
-      Row.border(this.isOnFocus ? {
-        width: ImageMenuItem.focusBorderWidth,
-        color: {
-          id: -1,
-          type: 10001,
-          params: ["sys.color.ohos_id_color_emphasize"],
-          bundleName: "",
-          moduleName: ""
-        },
-        style: BorderStyle.Solid
-      } : {
-        width: 0
-      });
-      Row.onFocus((() => {
-        this.item.isEnabled && (this.isOnFocus = !0)
-      }));
-      Row.onBlur((() => this.isOnFocus = !1));
-      Row.onHover((e => {
-        this.item.isEnabled && (this.isOnHover = e)
-      }));
-      Row.onKeyEvent((e => {
-        if (this.item.isEnabled && (e.keyCode === KeyCode.KEYCODE_ENTER || e.keyCode === KeyCode.KEYCODE_SPACE)) {
-          e.type === KeyType.Down && (this.isOnClick = !0);
-          e.type === KeyType.Up && (this.isOnClick = !1)
-        }
-      }));
-      Row.onTouch((e => {
-        if (this.item.isEnabled) {
-          e.type === TouchType.Down && (this.isOnClick = !0);
-          e.type === TouchType.Up && (this.isOnClick = !1)
-        }
-      }));
-      Row.onClick((() => this.item.isEnabled && this.item.action && this.item.action()));
-      t || Row.pop();
-      ViewStackProcessor.StopGetAccessRecording()
-    }));
-    this.observeComponentCreation(((e, t) => {
-      ViewStackProcessor.StartGetAccessRecordingFor(e);
-      Image.create(this.item.value);
-      Image.width(ImageMenuItem.imageSize);
-      Image.height(ImageMenuItem.imageSize);
-      Image.focusable(this.item.isEnabled);
-      t || Image.pop();
-      ViewStackProcessor.StopGetAccessRecording()
-    }));
-    Row.pop()
-  }
-  rerender() {
-    this.updateDirtyElements()
-  }
-}
-ImageMenuItem.imageSize = 24;
-ImageMenuItem.imageHotZoneWidth = 48;
-ImageMenuItem.buttonBorderRadius = 8;
-ImageMenuItem.focusBorderWidth = 2;
-ImageMenuItem.disabledImageOpacity = .4;
-export default {
-  ComposeTitleBar: ComposeTitleBar
-};

interface/editabletitlebar/BUILD.gn

@@ -1,46 +0,0 @@
-# Copyright (c) 2023-2023 Huawei Device Co., Ltd.
-# Licensed under the Apache License, Version 2.0 (the "License");
-# you may not use this file except in compliance with the License.
-# You may obtain a copy of the License at
-#
-#     http://www.apache.org/licenses/LICENSE-2.0
-#
-# Unless required by applicable law or agreed to in writing, software
-# distributed under the License is distributed on an "AS IS" BASIS,
-# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-# See the License for the specific language governing permissions and
-# limitations under the License.
-
-import("//build/ohos.gni")
-import("//foundation/arkui/ace_engine/ace_config.gni")
-import("//arkcompiler/ets_frontend/es2panda/es2abc_config.gni")
-
-es2abc_gen_abc("gen_editabletitlebar_abc") {
-  src_js = rebase_path("editabletitlebar.js")
-  dst_file = rebase_path(target_out_dir + "/editabletitlebar.abc")
-  in_puts = [ "editabletitlebar.js" ]
-  out_puts = [ target_out_dir + "/editabletitlebar.abc" ]
-  extra_args = [ "--module" ]
-}
-
-gen_js_obj("editabletitlebar_abc") {
-  input = get_label_info(":gen_editabletitlebar_abc", "target_out_dir") + "/editabletitlebar.abc"
-  output = target_out_dir + "/editabletitlebar_abc.o"
-  dep = ":gen_editabletitlebar_abc"
-}
-
-ohos_shared_library("editabletitlebar") {
-  sources = [ "editabletitlebar.cpp" ]
-
-  deps = [ ":editabletitlebar_abc" ]
-
-  external_deps = [
-    "hilog:libhilog",
-    "napi:ace_napi",
-  ]
-
-  subsystem_name = "arkui"
-  part_name = "advanced_ui_component"
-
-  relative_install_dir = "module/arkui/advanced"
-}

interface/editabletitlebar/editabletitlebar.cpp

@@ -1,49 +0,0 @@
-/*
- * Copyright (c) 2023-2023 Huawei Device Co., Ltd.
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-#include "native_engine/native_engine.h"
-
-#include "napi/native_api.h"
-#include "napi/native_node_api.h"
-
-extern const char _binary_editabletitlebar_abc_start[];
-extern const char _binary_editabletitlebar_abc_end[];
-
-// Napi get abc code function
-extern "C" __attribute__((visibility("default")))
-void NAPI_arkui_advanced_EditableTitleBar_GetABCCode(const char **buf, int *buflen)
-    {
-    if (buf != nullptr) {
-        *buf = _binary_editabletitlebar_abc_start;
-        }
-        if (buflen != nullptr) {
-            *buflen = _binary_editabletitlebar_abc_end - _binary_editabletitlebar_abc_start;
-        }
-    }
-
-
-static napi_module editabletitlebarModule = {
-    .nm_version = 1,
-    .nm_flags = 0,
-    .nm_filename = nullptr,
-    .nm_modname = "arkui.advanced.EditableTitleBar",
-    .nm_priv = ((void*)0),
-    .reserved = { 0 },
-};
-
-extern "C" __attribute__((constructor)) void editabletitlebarRegisterModule(void)
-{
-    napi_module_register(&editabletitlebarModule);
-}

interface/editabletitlebar/editabletitlebar.js

@@ -1,435 +0,0 @@
-/*
- * Copyright (c) 2023-2023 Huawei Device Co., Ltd.
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-const KeyCode = requireNapi('multimodalInput.keyCode').KeyCode;
-export var EditableLeftIconType;
-! function(e) {
-  e[e.Back = 0] = "Back";
-  e[e.Cancel = 1] = "Cancel"
-}(EditableLeftIconType || (EditableLeftIconType = {}));
-const PUBLIC_CANCEL = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMAAAADACAYAAABS3GwHAAAAIGNIUk0AAHomAACAhAAA+gAAAIDoAAB1MAAA6mAAADqYAAAXcJy6UTwAAAAEZ0FNQQAAsY58+1GTAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAAOxAAADsQBlSsOGwAABKpJREFUeNrt3bFrlHccx/Ff4o2dgkOQ4JzR4SYJgksnbYcGOrTQsUPtpE4d/RNcFBeFlg7NUlTSTrXQQgsKGV0KHTs4ODiJSL8PdxaUGJK7pPc893m94TvleZLnnt/7fcc9z5FrDQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAnDQrPTuej2u2a87VvKp5XLNT87OlGiSf1lx6Zz2/q3kkgLdZr7k5lX8/7tZ8XfOCU4OgW887U/n341bN9T6s56menLAfaj464OfdM8iF6XYv+dV7+X+pOX/ANuOatZqHAmjti5prh9jurAgGI//mIbbtIvi15u9FHvBqD07a50fYdqtmt+YDrg1a/jd8tuiD7kMA4yNuL4LlkH+WtV/KAEYz7COC4cs/69ovXQB7M+4ngmHLP8/aL1UAD+bYVwTDlX/etT8W+nAV6M82uQS6PuP+rg4NV/5vBNDa6za5HLY9xzO5CIYl/9OaT5obYf/xrE1uioggQ/6LNf/04QGd6tHJFQH5owMQAfnjAxAB+eMDEAH54wMQAfnjAxAB+eMDEAH54wMQAfnjAxAB+eMDEAH54wMQAfnjAxAB+eMDEAH54wMQAfnjAxAB+eMDEAH54wMQAfnjAxAB+eMDEAH54wMQAfnjAxAB+eMDSI6A/AKIjYD8AoiNgPwCiI2A/AKIjYD8AoiNgPwCiI2A/AKIjYD8AoiNgPwCiI2A/AKIjYD8AoiNgPwCiI2A/AKIjYD8AoiNgPwCiI2A/AKIjYD8AoiNgPwCiI2A/AKIjYD8AoiNgPwCiI1gjfyLY8UpmJnNqbjrc/yO32pOk98rQPIrwWnyCyA5AvILQATkF4AIyC8AEZBfACIgvwBEQH4BiID8J8qqU3BiPJ8O+XuMO8Eng8/2CID85BcA+ckvAPKT35tg8h+n/KP2/3/2SADojfzf1+yKYH7cBxim/N39hWX8RnsBkP9Q8r9BBAKIlV8EAoiXXwQCiJdfBAKIl18EAoiXXwQz4D5A/+Tv2KjZmuPvdfu6T+AVYJDyd3Qfo17Gb7QXAPkPzTMRCCBVfhEIIF5+EQggXn4RCCBefhEIIF5+EQggXn4RCCBefhEIIF5+EQggXn4RCCBefhEIIF5+EQggXn4RCCBefhEIIF5+EQggXn4RCCBefhEIwD+qFUFuAOQXQWwA5BdBbADkF0FsAOQXQWwA5BdBbADkF0FsAOQXQWwA5BdBbADkF0FsAOQXQWwA5BdBbADkF0FsAOQXQWwA5BdBbADkF0FsAOQXQWwA5BdBbADkF0FsAOQXQWwA5BdBdAD3a8bkj4rgTM2PAmjty5or5I+L4FzNHzV/LfKB9OGb4rfJP0iO49xvL/pB9CGAMfljIxgLoLUR+WMjGAmgtT3yx0awJ4DWdsgfG8HOog+6D1eBntR8WLNB/sFzlKtDnfw3BNDa65rfp2+I3hfBo5rL5B9UBFttcoNzP35qk8vfLxZ9sCs9OnHdG6Kvps8e3TXiVzWPp88Ut3k1OLr1vFpz6Z31/LbmntMDAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEAO/wLvsR65mx80NAAAAABJRU5ErkJggg==";
-const PUBLIC_OK = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMAAAADACAYAAABS3GwHAAAAIGNIUk0AAHomAACAhAAA+gAAAIDoAAB1MAAA6mAAADqYAAAXcJy6UTwAAAAEZ0FNQQAAsY58+1GTAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAAOxAAADsQBlSsOGwAAA+lJREFUeNrt3bFrFgccx+GLlSDi4JDBITiJZHBwEBGRIoqKoIu6iVMd3OosCg6W0sm/wEFUDDgpCDoIDoqOKqIoHUrp4CDFoUMRB39HLotoeXMpMXff54EfFE0ivv1+kpQGrmkAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIBJTHkJGIhddT/V7ajbUPey7l7dlbpPAmCs1tb9Wne2++cvPa07Vfd7nw/+g9eXVT7+m3Wn69Z8421m6w7WXa37KADGNv4TE7ztTN36uvtL/UPWeJ0Z+PgXnejzBwmAMYx/8VuhTQIgcfy9CYCxjP9D3TsBkPqZf95XAFLH3372vyAAEsf/T93Ruvd93tn/CWbo4z9c96jvBxAAseMXANHjFwDR4xcA0eMXANHjFwDR4xcA0eMXANHjFwDR4xcA0eMXANHjFwDR4xcA0eMXANHjFwDR4xcA0eMXANHjFwDR4xcA0eMXANHjFwDR4xcA0eMXANHjFwDR4xcA0eMXANHjFwDR4xcA0eP/HgG0z3f9uVl45uu2ZuGBBu3zXn9rej7mEuMfSgDtA46v1c195ff+rbtU94stGv9KWqnHpLaPsXxSt/k//iXsq9vY9HjUJca/2gNoH2e/c4K32yUC4x9bAOvqrjeTP41GBMY/qgC2151Z4vuIwPhXxEo8I2xdz/c7W3fZXo1/6F8B/q471/N9fSUw/sEH8LEb8hYRGH9iAK3HdafrpkVg/IkBtA8yflt3bBn/3SEC4x9sAK3Xda9EYPypAYjA+OMDEIHxxwcgAuOPD0AExh8fgAiMPz4AERh/fAAiMP74AERg/PEBiMD44wMQgfHHByAC448PQATGHx+ACIw/PgARGH98AMkRGL8AYiMwfgHERmD8AoiNwPgFEBuB8QsgNgLjF0BsBMYvgNgIjF8AsREYvwBiIzB+AcRGYPwCiI3A+AUQG4HxCyA2AuMXQGwExi+A2AiMXwCxERi/AGIjMH4BjDaCTXUP6j59423aJ2PeMH4BjDWCHd24n9f9+cXvHa+7U7fb+Fe/qeC/ezvU+e5bleX40A11pm6u+xapMX5fARK+Eix+u7O1brbp/1Bw4xfAoCP4Pxi/AGIjMH4BxEZg/AKIjcD4BRAbgfELIDYC4xdAbATGL4DYCIxfAIOL4EXdkbrpZX6sd3WH6p56WQUwJG/qbtX92Cz8EFwfD+sO1L31cq4uU16CibU/M3Sy7nzdlgnf51ndxbrbXj4BjCmEPXX76/Y2Cz8DNNP9+l91f3Sf8e92AQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAzKZwK1uX4kZ6mnAAAAAElFTkSuQmCC";
-const PUBLIC_BACK = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMAAAADACAYAAABS3GwHAAAAIGNIUk0AAHomAACAhAAA+gAAAIDoAAB1MAAA6mAAADqYAAAXcJy6UTwAAAAEZ0FNQQAAsY58+1GTAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAAOxAAADsQBlSsOGwAAA8VJREFUeNrt3LFLlHEYwPFXz0GiIZpEoikkwsFRIiK3gqCigxIC/4Kmhv6OoChouaGoqKCgCKducGh0cDAIamhwiCaHCIeelztpUszee/vl8/nAM3Vd8nufr+fddVYVAAAAAAAAAAAAAAAAAAAAAABQijFH0KhrMd2Y2ZitmNWYRzHLjkYAB9lUzMOYizv8eS/mZsymoypLxxE0svzvY07vcpu5mOmY145LAAdx+U/u4bZzwx+JPjq2cow7glaWf1vXsQkg6/JvPwoggJTLjwDSL/8nRyiAzN/5nzpGAWRd/n7MM0cpgIzLvx6z6CjL453gdpZ/IWbDcQrA8iMAy48ALD8CsPwIwPIjAMuPACw/ArD8CMDyIwDLjwAsPwKw/AjA8iMAy48ALD8CsPwIwPIjAMuPACw/ArD85A3A8pM2AMtP2gAsP2kDsPykDcDykzYAy0/aACw/aQOw/KQNwPKTNgDLT9oALD9pA7D8pA3A8pM2AMtP2gAsP2kDsPykDcDykzYAy0/aACw/aQOw/KQNwPKTNgDLT9oALD9pA7D8pA3A8pM2AMtP2gAsP2kDsPykDcDykzYAy0/aACw/aQOw/KQNwPLz3xlv6H4mYp5YfrI+AizF9BwnI/AlZi3mbsxy03feaeh+HsQcc60YgSMxMzE3YmZj3sX8LOlHoPoLnHedaEE35n5pzwF856dN9SPBpZICmHRNaNnlkgL46nrQsvmSAqhftlx1TWjR4ZICqPVcE1q0XloA96rBa7XQhl5pAWzFXKm8i8vo9WMeN3VnnQa/sO8xL2POxEy7Toxo+RdjNpu6w1F9HuBqNXi99lw1eKMM9utHzIeYV8MftbccCQAAAAAAsBdt/XLc+sPy9W+MmPqL+1iJuVA1+C4gdFr6d77FvK0GH2nb739lPR5zNuZ51eBnQhFAJQIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIE8M8jmBlGgABSRnAqZiXms+MUQNYIDnkUKMu4I/gj6zELMRv7/PsnHKEAMkcw6fgEkDmCNUcngMwRvHFsngRnfWJcL/9tRyaAgxrB+ZijO9ymH7MUs+m4yjLmCBozEXMr5nr1+9We1ZgXMXccDwAAAAAAAAAAAAAAAAAAAAAAwO5+AfVgtqHKRnawAAAAAElFTkSuQmCC";
-export class EditableTitleBar extends ViewPU {
-  constructor(e, t, A, i = -1) {
-    super(e, A, i);
-    this.leftIconStyle = void 0;
-    this.title = void 0;
-    this.menuItems = void 0;
-    this.onSave = void 0;
-    this.onCancel = void 0;
-    this.__titleMaxWidth = new ObservedPropertySimplePU(0, this, "titleMaxWidth");
-    this.setInitiallyProvidedValue(t)
-  }
-  setInitiallyProvidedValue(e) {
-    void 0 !== e.leftIconStyle && (this.leftIconStyle = e.leftIconStyle);
-    void 0 !== e.title && (this.title = e.title);
-    void 0 !== e.menuItems && (this.menuItems = e.menuItems);
-    void 0 !== e.onSave && (this.onSave = e.onSave);
-    void 0 !== e.onCancel && (this.onCancel = e.onCancel);
-    void 0 !== e.titleMaxWidth && (this.titleMaxWidth = e.titleMaxWidth)
-  }
-  updateStateVars(e) {}
-  purgeVariableDependenciesOnElmtId(e) {
-    this.__titleMaxWidth.purgeDependencyOnElmtId(e)
-  }
-  aboutToBeDeleted() {
-    this.__titleMaxWidth.aboutToBeDeleted();
-    SubscriberManager.Get().delete(this.id__());
-    this.aboutToBeDeletedInternal()
-  }
-  get titleMaxWidth() {
-    return this.__titleMaxWidth.get()
-  }
-  set titleMaxWidth(e) {
-    this.__titleMaxWidth.set(e)
-  }
-  initialRender() {
-    this.observeComponentCreation(((e, t) => {
-      ViewStackProcessor.StartGetAccessRecordingFor(e);
-      Flex.create({
-        justifyContent: FlexAlign.SpaceBetween,
-        alignItems: ItemAlign.Stretch
-      });
-      Flex.width("100%");
-      Flex.height(EditableTitleBar.totalHeight);
-      Flex.backgroundColor({
-        id: -1,
-        type: 10001,
-        params: ["sys.color.ohos_id_color_background"],
-        bundleName: "",
-        moduleName: ""
-      });
-      Flex.onAreaChange(((e, t) => {
-        let A = Number(t.width);
-        A = A - EditableTitleBar.leftPadding - EditableTitleBar.rightPadding - EditableTitleBar.titlePadding;
-        A = A - ImageMenuItem.imageHotZoneWidth - ImageMenuItem.imageHotZoneWidth;
-        void 0 !== this.menuItems ? this.menuItems.length > EditableTitleBar.maxCountOfExtraItems ? this.titleMaxWidth = A - ImageMenuItem.imageHotZoneWidth * EditableTitleBar.maxCountOfExtraItems : this.titleMaxWidth = A - ImageMenuItem.imageHotZoneWidth * this.menuItems.length : this.titleMaxWidth = A
-      }));
-      t || Flex.pop();
-      ViewStackProcessor.StopGetAccessRecording()
-    }));
-    this.observeComponentCreation(((e, t) => {
-      ViewStackProcessor.StartGetAccessRecordingFor(e);
-      Row.create();
-      Row.margin({
-        left: {
-          id: -1,
-          type: 10002,
-          params: ["sys.float.ohos_id_default_padding_start"],
-          bundleName: "",
-          moduleName: ""
-        }
-      });
-      t || Row.pop();
-      ViewStackProcessor.StopGetAccessRecording()
-    }));
-    this.observeComponentCreation(((e, t) => {
-      ViewStackProcessor.StartGetAccessRecordingFor(e);
-      If.create();
-      this.leftIconStyle == EditableLeftIconType.Back ? this.ifElseBranchUpdateFunction(0, (() => {
-        this.observeComponentCreation(((e, t) => {
-          ViewStackProcessor.StartGetAccessRecordingFor(e);
-          Navigator.create();
-          t || Navigator.pop();
-          ViewStackProcessor.StopGetAccessRecording()
-        }));
-        this.observeComponentCreation(((e, t) => {
-          ViewStackProcessor.StartGetAccessRecordingFor(e);
-          t ? ViewPU.create(new ImageMenuItem(this, {
-            item: {
-              value: PUBLIC_BACK,
-              isEnabled: !0
-            }
-          }, void 0, e)) : this.updateStateVarsOfChildByElmtId(e, {});
-          ViewStackProcessor.StopGetAccessRecording()
-        }));
-        Navigator.pop()
-      })) : this.ifElseBranchUpdateFunction(1, (() => {
-        this.observeComponentCreation(((e, t) => {
-          ViewStackProcessor.StartGetAccessRecordingFor(e);
-          t ? ViewPU.create(new ImageMenuItem(this, {
-            item: {
-              value: PUBLIC_CANCEL,
-              isEnabled: !0,
-              action: () => this.onCancel && this.onCancel()
-            }
-          }, void 0, e)) : this.updateStateVarsOfChildByElmtId(e, {});
-          ViewStackProcessor.StopGetAccessRecording()
-        }))
-      }));
-      t || If.pop();
-      ViewStackProcessor.StopGetAccessRecording()
-    }));
-    If.pop();
-    this.observeComponentCreation(((e, t) => {
-      ViewStackProcessor.StartGetAccessRecordingFor(e);
-      Column.create();
-      Column.justifyContent(FlexAlign.Start);
-      Column.alignItems(HorizontalAlign.Start);
-      Column.constraintSize({
-        maxWidth: this.titleMaxWidth
-      });
-      t || Column.pop();
-      ViewStackProcessor.StopGetAccessRecording()
-    }));
-    this.observeComponentCreation(((e, t) => {
-      ViewStackProcessor.StartGetAccessRecordingFor(e);
-      Text.create(this.title);
-      Text.fontWeight(FontWeight.Medium);
-      Text.fontSize({
-        id: -1,
-        type: 10002,
-        params: ["sys.float.ohos_id_text_size_headline8"],
-        bundleName: "",
-        moduleName: ""
-      });
-      Text.fontColor({
-        id: -1,
-        type: 10001,
-        params: ["sys.color.ohos_id_color_titlebar_text"],
-        bundleName: "",
-        moduleName: ""
-      });
-      Text.maxLines(1);
-      Text.textOverflow({
-        overflow: TextOverflow.Ellipsis
-      });
-      Text.constraintSize({
-        maxWidth: this.titleMaxWidth
-      });
-      t || Text.pop();
-      ViewStackProcessor.StopGetAccessRecording()
-    }));
-    Text.pop();
-    Column.pop();
-    Row.pop();
-    this.observeComponentCreation(((e, t) => {
-      ViewStackProcessor.StartGetAccessRecordingFor(e);
-      t ? ViewPU.create(new EditableTitleBarMenuSection(this, {
-        menuItems: this.menuItems,
-        onSave: this.onSave
-      }, void 0, e)) : this.updateStateVarsOfChildByElmtId(e, {});
-      ViewStackProcessor.StopGetAccessRecording()
-    }));
-    Flex.pop()
-  }
-  rerender() {
-    this.updateDirtyElements()
-  }
-}
-EditableTitleBar.maxCountOfExtraItems = 2;
-EditableTitleBar.totalHeight = 56;
-EditableTitleBar.leftPadding = 12;
-EditableTitleBar.rightPadding = 12;
-EditableTitleBar.titlePadding = 16;
-class EditableTitleBarMenuSection extends ViewPU {
-  constructor(e, t, A, i = -1) {
-    super(e, A, i);
-    this.menuItems = void 0;
-    this.onSave = void 0;
-    this.setInitiallyProvidedValue(t)
-  }
-  setInitiallyProvidedValue(e) {
-    void 0 !== e.menuItems && (this.menuItems = e.menuItems);
-    void 0 !== e.onSave && (this.onSave = e.onSave)
-  }
-  updateStateVars(e) {}
-  purgeVariableDependenciesOnElmtId(e) {}
-  aboutToBeDeleted() {
-    SubscriberManager.Get().delete(this.id__());
-    this.aboutToBeDeletedInternal()
-  }
-  initialRender() {
-    this.observeComponentCreation(((e, t) => {
-      ViewStackProcessor.StartGetAccessRecordingFor(e);
-      Column.create();
-      Column.margin({
-        left: {
-          id: -1,
-          type: 10002,
-          params: ["sys.float.ohos_id_elements_margin_vertical_l"],
-          bundleName: "",
-          moduleName: ""
-        },
-        right: {
-          id: -1,
-          type: 10002,
-          params: ["sys.float.ohos_id_default_padding_end"],
-          bundleName: "",
-          moduleName: ""
-        }
-      });
-      Column.justifyContent(FlexAlign.Center);
-      t || Column.pop();
-      ViewStackProcessor.StopGetAccessRecording()
-    }));
-    this.observeComponentCreation(((e, t) => {
-      ViewStackProcessor.StartGetAccessRecordingFor(e);
-      Row.create();
-      t || Row.pop();
-      ViewStackProcessor.StopGetAccessRecording()
-    }));
-    this.observeComponentCreation(((e, t) => {
-      ViewStackProcessor.StartGetAccessRecordingFor(e);
-      If.create();
-      void 0 !== this.menuItems && this.menuItems.length > 0 ? this.ifElseBranchUpdateFunction(0, (() => {
-        this.observeComponentCreation(((e, t) => {
-          ViewStackProcessor.StartGetAccessRecordingFor(e);
-          ForEach.create();
-          this.forEachUpdateFunction(e, this.menuItems.slice(0, EditableTitleBar.maxCountOfExtraItems), (e => {
-            const t = e;
-            this.observeComponentCreation(((e, A) => {
-              ViewStackProcessor.StartGetAccessRecordingFor(e);
-              A ? ViewPU.create(new ImageMenuItem(this, {
-                item: t
-              }, void 0, e)) : this.updateStateVarsOfChildByElmtId(e, {});
-              ViewStackProcessor.StopGetAccessRecording()
-            }))
-          }));
-          t || ForEach.pop();
-          ViewStackProcessor.StopGetAccessRecording()
-        }));
-        ForEach.pop()
-      })) : If.branchId(1);
-      t || If.pop();
-      ViewStackProcessor.StopGetAccessRecording()
-    }));
-    If.pop();
-    this.observeComponentCreation(((e, t) => {
-      ViewStackProcessor.StartGetAccessRecordingFor(e);
-      t ? ViewPU.create(new ImageMenuItem(this, {
-        item: {
-          value: PUBLIC_OK,
-          isEnabled: !0,
-          action: () => this.onSave && this.onSave()
-        }
-      }, void 0, e)) : this.updateStateVarsOfChildByElmtId(e, {});
-      ViewStackProcessor.StopGetAccessRecording()
-    }));
-    Row.pop();
-    Column.pop()
-  }
-  rerender() {
-    this.updateDirtyElements()
-  }
-}
-class ImageMenuItem extends ViewPU {
-  constructor(e, t, A, i = -1) {
-    super(e, A, i);
-    this.item = void 0;
-    this.__isOnFocus = new ObservedPropertySimplePU(!1, this, "isOnFocus");
-    this.__isOnHover = new ObservedPropertySimplePU(!1, this, "isOnHover");
-    this.__isOnClick = new ObservedPropertySimplePU(!1, this, "isOnClick");
-    this.setInitiallyProvidedValue(t)
-  }
-  setInitiallyProvidedValue(e) {
-    void 0 !== e.item && (this.item = e.item);
-    void 0 !== e.isOnFocus && (this.isOnFocus = e.isOnFocus);
-    void 0 !== e.isOnHover && (this.isOnHover = e.isOnHover);
-    void 0 !== e.isOnClick && (this.isOnClick = e.isOnClick)
-  }
-  updateStateVars(e) {}
-  purgeVariableDependenciesOnElmtId(e) {
-    this.__isOnFocus.purgeDependencyOnElmtId(e);
-    this.__isOnHover.purgeDependencyOnElmtId(e);
-    this.__isOnClick.purgeDependencyOnElmtId(e)
-  }
-  aboutToBeDeleted() {
-    this.__isOnFocus.aboutToBeDeleted();
-    this.__isOnHover.aboutToBeDeleted();
-    this.__isOnClick.aboutToBeDeleted();
-    SubscriberManager.Get().delete(this.id__());
-    this.aboutToBeDeletedInternal()
-  }
-  get isOnFocus() {
-    return this.__isOnFocus.get()
-  }
-  set isOnFocus(e) {
-    this.__isOnFocus.set(e)
-  }
-  get isOnHover() {
-    return this.__isOnHover.get()
-  }
-  set isOnHover(e) {
-    this.__isOnHover.set(e)
-  }
-  get isOnClick() {
-    return this.__isOnClick.get()
-  }
-  set isOnClick(e) {
-    this.__isOnClick.set(e)
-  }
-  getFgColor() {
-    return this.isOnClick ? {
-      id: -1,
-      type: 10001,
-      params: ["sys.color.ohos_id_color_titlebar_icon_pressed"],
-      bundleName: "",
-      moduleName: ""
-    } : {
-      id: -1,
-      type: 10001,
-      params: ["sys.color.ohos_id_color_titlebar_icon"],
-      bundleName: "",
-      moduleName: ""
-    }
-  }
-  getBgColor() {
-    return this.isOnClick ? {
-      id: -1,
-      type: 10001,
-      params: ["sys.color.ohos_id_color_click_effect"],
-      bundleName: "",
-      moduleName: ""
-    } : this.isOnHover ? {
-      id: -1,
-      type: 10001,
-      params: ["sys.color.ohos_id_color_hover"],
-      bundleName: "",
-      moduleName: ""
-    } : Color.Transparent
-  }
-  initialRender() {
-    this.observeComponentCreation(((e, t) => {
-      ViewStackProcessor.StartGetAccessRecordingFor(e);
-      Row.create();
-      Row.width(ImageMenuItem.imageHotZoneWidth);
-      Row.height(ImageMenuItem.imageHotZoneWidth);
-      Row.borderRadius(ImageMenuItem.buttonBorderRadius);
-      Row.foregroundColor(this.getFgColor());
-      Row.backgroundColor(this.getBgColor());
-      Row.justifyContent(FlexAlign.Center);
-      Row.opacity(this.item.isEnabled ? 1 : ImageMenuItem.disabledImageOpacity);
-      Row.border(this.isOnFocus ? {
-        width: ImageMenuItem.focusBorderWidth,
-        color: {
-          id: -1,
-          type: 10001,
-          params: ["sys.color.ohos_id_color_emphasize"],
-          bundleName: "",
-          moduleName: ""
-        },
-        style: BorderStyle.Solid
-      } : {
-        width: 0
-      });
-      Row.onFocus((() => {
-        this.item.isEnabled && (this.isOnFocus = !0)
-      }));
-      Row.onBlur((() => this.isOnFocus = !1));
-      Row.onHover((e => {
-        this.item.isEnabled && (this.isOnHover = e)
-      }));
-      Row.onKeyEvent((e => {
-        if (this.item.isEnabled && (e.keyCode === KeyCode.KEYCODE_ENTER || e.keyCode === KeyCode.KEYCODE_SPACE)) {
-          e.type === KeyType.Down && (this.isOnClick = !0);
-          e.type === KeyType.Up && (this.isOnClick = !1)
-        }
-      }));
-      Row.onTouch((e => {
-        if (this.item.isEnabled) {
-          e.type === TouchType.Down && (this.isOnClick = !0);
-          e.type === TouchType.Up && (this.isOnClick = !1)
-        }
-      }));
-      Row.onClick((() => this.item.isEnabled && this.item.action && this.item.action()));
-      t || Row.pop();
-      ViewStackProcessor.StopGetAccessRecording()
-    }));
-    this.observeComponentCreation(((e, t) => {
-      ViewStackProcessor.StartGetAccessRecordingFor(e);
-      Image.create(this.item.value);
-      Image.width(ImageMenuItem.imageSize);
-      Image.height(ImageMenuItem.imageSize);
-      Image.focusable(this.item.isEnabled);
-      t || Image.pop();
-      ViewStackProcessor.StopGetAccessRecording()
-    }));
-    Row.pop()
-  }
-  rerender() {
-    this.updateDirtyElements()
-  }
-}
-ImageMenuItem.imageSize = 24;
-ImageMenuItem.imageHotZoneWidth = 48;
-ImageMenuItem.buttonBorderRadius = 8;
-ImageMenuItem.focusBorderWidth = 2;
-ImageMenuItem.disabledImageOpacity = .4;
-export default {
-  EditableLeftIconType: EditableLeftIconType,
-  EditableTitleBar: EditableTitleBar
-};

interface/filter/BUILD.gn

@@ -1,46 +0,0 @@
-# Copyright (c) 2023-2023 Huawei Device Co., Ltd.
-# Licensed under the Apache License, Version 2.0 (the "License");
-# you may not use this file except in compliance with the License.
-# You may obtain a copy of the License at
-#
-#     http://www.apache.org/licenses/LICENSE-2.0
-#
-# Unless required by applicable law or agreed to in writing, software
-# distributed under the License is distributed on an "AS IS" BASIS,
-# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-# See the License for the specific language governing permissions and
-# limitations under the License.
-
-import("//build/ohos.gni")
-import("//foundation/arkui/ace_engine/ace_config.gni")
-import("//arkcompiler/ets_frontend/es2panda/es2abc_config.gni")
-
-es2abc_gen_abc("gen_filter_abc") {
-  src_js = rebase_path("filter.js")
-  dst_file = rebase_path(target_out_dir + "/filter.abc")
-  in_puts = [ "filter.js" ]
-  out_puts = [ target_out_dir + "/filter.abc" ]
-  extra_args = [ "--module" ]
-}
-
-gen_js_obj("filter_abc") {
-  input = get_label_info(":gen_filter_abc", "target_out_dir") + "/filter.abc"
-  output = target_out_dir + "/filter_abc.o"
-  dep = ":gen_filter_abc"
-}
-
-ohos_shared_library("filter") {
-  sources = [ "filter.cpp" ]
-
-  deps = [ ":filter_abc" ]
-
-  external_deps = [
-    "hilog:libhilog",
-    "napi:ace_napi",
-  ]
-
-  subsystem_name = "arkui"
-  part_name = "advanced_ui_component"
-
-  relative_install_dir = "module/arkui/advanced"
-}

interface/filter/filter.cpp

@@ -1,53 +0,0 @@
-/*
- * Copyright (c) 2023-2023 Huawei Device Co., Ltd.
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-#include "native_engine/native_engine.h"
-
-#include "napi/native_api.h"
-#include "napi/native_node_api.h"
-
-extern const char _binary_filter_abc_start[];
-extern const char _binary_filter_abc_end[];
-
-// Napi get abc code function
-extern "C" __attribute__((visibility("default")))
-void NAPI_arkui_advanced_Filter_GetABCCode(const char **buf, int *buflen)
-{
-    if (buf != nullptr) {
-        *buf = _binary_filter_abc_start;
-    }
-    if (buflen != nullptr) {
-        *buflen = _binary_filter_abc_end - _binary_filter_abc_start;
-    }
-}
-
-/*
- * Module define
- */
-static napi_module filterModule = {
-    .nm_version = 1,
-    .nm_flags = 0,
-    .nm_filename = nullptr,
-    .nm_modname = "arkui.advanced.Filter",
-    .nm_priv = ((void*)0),
-    .reserved = { 0 },
-};
-/*
- * Module register function
- */
-extern "C" __attribute__((constructor)) void filterRegisterModule(void)
-{
-    napi_module_register(&filterModule);
-}

interface/progressbutton/BUILD.gn

@@ -1,46 +0,0 @@
-# Copyright (c) 2023-2023 Huawei Device Co., Ltd.
-# Licensed under the Apache License, Version 2.0 (the "License");
-# you may not use this file except in compliance with the License.
-# You may obtain a copy of the License at
-#
-#     http://www.apache.org/licenses/LICENSE-2.0
-#
-# Unless required by applicable law or agreed to in writing, software
-# distributed under the License is distributed on an "AS IS" BASIS,
-# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-# See the License for the specific language governing permissions and
-# limitations under the License.
-
-import("//build/ohos.gni")
-import("//foundation/arkui/ace_engine/ace_config.gni")
-import("//arkcompiler/ets_frontend/es2panda/es2abc_config.gni")
-
-es2abc_gen_abc("gen_progressbutton_abc") {
-  src_js = rebase_path("progressbutton.js")
-  dst_file = rebase_path(target_out_dir + "/progressbutton.abc")
-  in_puts = [ "progressbutton.js" ]
-  out_puts = [ target_out_dir + "/progressbutton.abc" ]
-  extra_args = [ "--module" ]
-}
-
-gen_js_obj("progressbutton_abc") {
-  input = get_label_info(":gen_progressbutton_abc", "target_out_dir") + "/progressbutton.abc"
-  output = target_out_dir + "/progressbutton_abc.o"
-  dep = ":gen_progressbutton_abc"
-}
-
-ohos_shared_library("progressbutton") {
-  sources = [ "progressbutton.cpp" ]
-
-  deps = [ ":progressbutton_abc" ]
-
-  external_deps = [
-    "hilog:libhilog",
-    "napi:ace_napi",
-  ]
-
-  subsystem_name = "arkui"
-  part_name = "advanced_ui_component"
-
-  relative_install_dir = "module/arkui/advanced"
-}

interface/progressbutton/progressbutton.cpp

@@ -1,53 +0,0 @@
-/*
- * Copyright (c) 2023-2023 Huawei Device Co., Ltd.
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-#include "native_engine/native_engine.h"
-
-#include "napi/native_api.h"
-#include "napi/native_node_api.h"
-
-extern const char _binary_progressbutton_abc_start[];
-extern const char _binary_progressbutton_abc_end[];
-
-// Napi get abc code function
-extern "C" __attribute__((visibility("default")))
-void NAPI_arkui_advanced_ProgressButton_GetABCCode(const char **buf, int *buflen)
-{
-    if (buf != nullptr) {
-        *buf = _binary_progressbutton_abc_start;
-    }
-    if (buflen != nullptr) {
-        *buflen = _binary_progressbutton_abc_end - _binary_progressbutton_abc_start;
-    }
-}
-
-/*
- * Module define
- */
-static napi_module progressbuttonModule = {
-    .nm_version = 1,
-    .nm_flags = 0,
-    .nm_filename = nullptr,
-    .nm_modname = "arkui.advanced.ProgressButton",
-    .nm_priv = ((void*)0),
-    .reserved = { 0 },
-};
-/*
- * Module register function
- */
-extern "C" __attribute__((constructor)) void progressbuttonRegisterModule(void)
-{
-    napi_module_register(&progressbuttonModule);
-}

interface/progressbutton/progressbutton.js

@@ -1,236 +0,0 @@
-/*
- * Copyright (c) 2023-2023 Huawei Device Co., Ltd.
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-const EMPTY_STRING = '';
-const MAX_PROGRESS = 100;
-const MAX_PERCENTAGE = '100%';
-const MIN_PERCENTAGE = '0%';
-const TEXT_OPACITY = 0.4;
-const BUTTON_NORMARL_WIDTH = 44;
-const BUTTON_NORMARL_HEIGHT = 28;
-const BUTTON_BORDER_RADIUS = 14;
-const BUTTON_BORDER_WIDTH = 0.5;
-
-export class ProgressButton extends ViewPU {
-  constructor(e, t, s, r = -1) {
-    super(e, s, r);
-    this.__progress = new SynchedPropertySimpleOneWayPU(t.progress, this, 'progress');
-    this.__textProgress = new ObservedPropertySimplePU('', this, 'textProgress');
-    this.__content = new SynchedPropertySimpleOneWayPU(t.content, this, 'content');
-    this.__isLoading = new ObservedPropertySimplePU(!1, this, 'isLoading');
-    this.__enable = new SynchedPropertySimpleOneWayPU(t.enable, this, 'enable');
-    this.progressButtonWidth = 44;
-    this.clickCallback = null;
-    this.setInitiallyProvidedValue(t);
-    this.declareWatch('progress', this.getProgressContext);
-  }
-
-  setInitiallyProvidedValue(e) {
-    void 0 !== e.textProgress && (this.textProgress = e.textProgress);
-    void 0 !== e.content ? this.__content.set(e.content) : this.__content.set('');
-    void 0 !== e.isLoading && (this.isLoading = e.isLoading);
-    void 0 !== e.enable ? this.__enable.set(e.enable) : this.__enable.set(!0);
-    void 0 !== e.progressButtonWidth && (this.progressButtonWidth = e.progressButtonWidth);
-    void 0 !== e.clickCallback && (this.clickCallback = e.clickCallback);
-  }
-
-  updateStateVars(e) {
-    this.__progress.reset(e.progress);
-    this.__content.reset(e.content);
-    this.__enable.reset(e.enable);
-  }
-
-  purgeVariableDependenciesOnElmtId(e) {
-    this.__progress.purgeDependencyOnElmtId(e);
-    this.__textProgress.purgeDependencyOnElmtId(e);
-    this.__content.purgeDependencyOnElmtId(e);
-    this.__isLoading.purgeDependencyOnElmtId(e);
-    this.__enable.purgeDependencyOnElmtId(e);
-  }
-
-  aboutToBeDeleted() {
-    this.__progress.aboutToBeDeleted();
-    this.__textProgress.aboutToBeDeleted();
-    this.__content.aboutToBeDeleted();
-    this.__isLoading.aboutToBeDeleted();
-    this.__enable.aboutToBeDeleted();
-    SubscriberManager.Get().delete(this.id__());
-    this.aboutToBeDeletedInternal();
-  }
-
-  get progress() {
-    return this.__progress.get();
-  }
-
-  set progress(e) {
-    this.__progress.set(e);
-  }
-
-  get textProgress() {
-    return this.__textProgress.get();
-  }
-
-  set textProgress(e) {
-    this.__textProgress.set(e);
-  }
-
-  get content() {
-    return this.__content.get();
-  }
-
-  set content(e) {
-    this.__content.set(e);
-  }
-
-  get isLoading() {
-    return this.__isLoading.get();
-  }
-
-  set isLoading(e) {
-    this.__isLoading.set(e);
-  }
-
-  get enable() {
-    return this.__enable.get();
-  }
-
-  set enable(e) {
-    this.__enable.set(e);
-  }
-
-  getButtonProgress() {
-    return this.progress < 0 ? 0 : this.progress > MAX_PROGRESS ? MAX_PROGRESS : this.progress;
-  }
-
-  getProgressContext() {
-    if (this.progress < 0) {
-      this.isLoading = !1;
-      this.textProgress = '0%';
-    } else if (this.progress >= MAX_PROGRESS) {
-      this.isLoading = !1;
-      this.textProgress = '100%';
-    } else {
-      this.textProgress = Math.floor(this.progress / MAX_PROGRESS * MAX_PROGRESS).toString() + '%';
-    }
-  }
-
-  initialRender() {
-    this.observeComponentCreation(((e, t) => {
-      ViewStackProcessor.StartGetAccessRecordingFor(e);
-      Button.createWithChild();
-      Button.borderRadius(BUTTON_BORDER_RADIUS);
-      Button.clip(!1);
-      Button.hoverEffect(HoverEffect.None);
-      Button.backgroundColor({
-        id: -1,
-        type: 10001,
-        params: ['sys.color.ohos_id_color_foreground_contrary'],
-        bundleName: '',
-        moduleName: ''
-      });
-      Button.border({
-        width: BUTTON_BORDER_WIDTH,
-        color: this.enable ? {
-          id: -1,
-          type: 10001,
-          params: ['sys.color.ohos_id_color_toolbar_text_actived'],
-          bundleName: '',
-          moduleName: ''
-        } : {
-          id: -1,
-          type: 10001,
-          params: ['sys.color.ohos_id_color_foreground_contrary_disable'],
-          bundleName: '',
-          moduleName: ''
-        }
-      });
-      Button.constraintSize({ minWidth: 44 });
-      Button.width(this.progressButtonWidth < BUTTON_NORMARL_WIDTH ? BUTTON_NORMARL_WIDTH : this.progressButtonWidth);
-      Button.stateEffect(this.enable);
-      Button.onClick((() => {
-        if (this.enable) {
-          this.progress < MAX_PROGRESS && (this.isLoading = !this.isLoading);
-          this.clickCallback && this.clickCallback();
-        }
-      }));
-      t || Button.pop();
-      ViewStackProcessor.StopGetAccessRecording();
-    }));
-    this.observeComponentCreation(((e, t) => {
-      ViewStackProcessor.StartGetAccessRecordingFor(e);
-      Stack.create();
-      t || Stack.pop();
-      ViewStackProcessor.StopGetAccessRecording();
-    }));
-    this.observeComponentCreation(((e, t) => {
-      ViewStackProcessor.StartGetAccessRecordingFor(e);
-      Progress.create({ value: this.getButtonProgress(), total: MAX_PROGRESS, style: ProgressStyle.Capsule });
-      Progress.height(BUTTON_NORMARL_HEIGHT);
-      Progress.borderRadius(BUTTON_BORDER_RADIUS);
-      Progress.width('100%');
-      Progress.hoverEffect(HoverEffect.None);
-      Progress.clip(!1);
-      Progress.enabled(this.enable);
-      t || Progress.pop();
-      ViewStackProcessor.StopGetAccessRecording();
-    }));
-    this.observeComponentCreation(((e, t) => {
-      ViewStackProcessor.StartGetAccessRecordingFor(e);
-      Row.create();
-      t || Row.pop();
-      ViewStackProcessor.StopGetAccessRecording();
-    }));
-    this.observeComponentCreation(((e, t) => {
-      ViewStackProcessor.StartGetAccessRecordingFor(e);
-      Text.create(this.isLoading ? this.textProgress : this.content);
-      Text.fontSize({
-        id: -1,
-        type: 10002,
-        params: ['sys.float.ohos_id_text_size_button3'],
-        bundleName: '',
-        moduleName: ''
-      });
-      Text.fontWeight(FontWeight.Medium);
-      Text.fontColor(this.isLoading ? {
-        id: -1,
-        type: 10001,
-        params: ['sys.color.ohos_id_color_text_primary'],
-        bundleName: '',
-        moduleName: ''
-      } : {
-        id: -1,
-        type: 10001,
-        params: ['sys.color.ohos_id_color_emphasize'],
-        bundleName: '',
-        moduleName: ''
-      });
-      Text.maxLines(1);
-      Text.textOverflow({ overflow: TextOverflow.Ellipsis });
-      Text.padding({ left: 8, right: 8 });
-      Text.opacity(this.enable ? 1 : TEXT_OPACITY);
-      t || Text.pop();
-      ViewStackProcessor.StopGetAccessRecording();
-    }));
-    Text.pop();
-    Row.pop();
-    Stack.pop();
-    Button.pop();
-  }
-
-  rerender() {
-    this.updateDirtyElements();
-  }
-}
-export default { ProgressButton };

interface/selecttitlebar/BUILD.gn

@@ -1,46 +0,0 @@
-# Copyright (c) 2023-2023 Huawei Device Co., Ltd.
-# Licensed under the Apache License, Version 2.0 (the "License");
-# you may not use this file except in compliance with the License.
-# You may obtain a copy of the License at
-#
-#     http://www.apache.org/licenses/LICENSE-2.0
-#
-# Unless required by applicable law or agreed to in writing, software
-# distributed under the License is distributed on an "AS IS" BASIS,
-# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-# See the License for the specific language governing permissions and
-# limitations under the License.
-
-import("//build/ohos.gni")
-import("//foundation/arkui/ace_engine/ace_config.gni")
-import("//arkcompiler/ets_frontend/es2panda/es2abc_config.gni")
-
-es2abc_gen_abc("gen_selecttitlebar_abc") {
-  src_js = rebase_path("selecttitlebar.js")
-  dst_file = rebase_path(target_out_dir + "/selecttitlebar.abc")
-  in_puts = [ "selecttitlebar.js" ]
-  out_puts = [ target_out_dir + "/selecttitlebar.abc" ]
-  extra_args = [ "--module" ]
-}
-
-gen_js_obj("selecttitlebar_abc") {
-  input = get_label_info(":gen_selecttitlebar_abc", "target_out_dir") + "/selecttitlebar.abc"
-  output = target_out_dir + "/selecttitlebar_abc.o"
-  dep = ":gen_selecttitlebar_abc"
-}
-
-ohos_shared_library("selecttitlebar") {
-  sources = [ "selecttitlebar.cpp" ]
-
-  deps = [ ":selecttitlebar_abc" ]
-
-  external_deps = [
-    "hilog:libhilog",
-    "napi:ace_napi",
-  ]
-
-  subsystem_name = "arkui"
-  part_name = "advanced_ui_component"
-
-  relative_install_dir = "module/arkui/advanced"
-}

interface/selecttitlebar/selecttitlebar.cpp

@@ -1,49 +0,0 @@
-/*
- * Copyright (c) 2023-2023 Huawei Device Co., Ltd.
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-#include "native_engine/native_engine.h"
-
-#include "napi/native_api.h"
-#include "napi/native_node_api.h"
-
-extern const char _binary_selecttitlebar_abc_start[];
-extern const char _binary_selecttitlebar_abc_end[];
-
-// Napi get abc code function
-extern "C" __attribute__((visibility("default")))
-void NAPI_arkui_advanced_SelectTitleBar_GetABCCode(const char **buf, int *buflen)
-    {
-    if (buf != nullptr) {
-        *buf = _binary_selecttitlebar_abc_start;
-        }
-        if (buflen != nullptr) {
-            *buflen = _binary_selecttitlebar_abc_end - _binary_selecttitlebar_abc_start;
-        }
-    }
-
-
-static napi_module selecttitlebarModule = {
-    .nm_version = 1,
-    .nm_flags = 0,
-    .nm_filename = nullptr,
-    .nm_modname = "arkui.advanced.SelectTitleBar",
-    .nm_priv = ((void*)0),
-    .reserved = { 0 },
-};
-
-extern "C" __attribute__((constructor)) void selecttitlebarRegisterModule(void)
-{
-    napi_module_register(&selecttitlebarModule);
-}

interface/selecttitlebar/selecttitlebar.js

@@ -1,785 +0,0 @@
-/*
- * Copyright (c) 2023-2023 Huawei Device Co., Ltd.
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-var __decorate = this && this.__decorate || function(e, t, o, i) {
-  var s, r = arguments.length,
-    n = r < 3 ? t : null === i ? i = Object.getOwnPropertyDescriptor(t, o) : i;
-  if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) n = Reflect.decorate(e, t, o, i);
-  else
-    for (var c = e.length - 1; c >= 0; c--)(s = e[c]) && (n = (r < 3 ? s(n) : r > 3 ? s(t, o, n) : s(t, o)) || n);
-  return r > 3 && n && Object.defineProperty(t, o, n), n
-};
-const KeyCode = requireNapi('multimodalInput.keyCode').KeyCode;
-const PUBLIC_MORE = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMAAAADACAYAAABS3GwHAAAAIGNIUk0AAHomAACAhAAA+gAAAIDoAAB1MAAA6mAAADqYAAAXcJy6UTwAAAAEZ0FNQQAAsY58+1GTAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAAOxAAADsQBlSsOGwAABEZJREFUeNrt3D1rFFEUBuAxhmAhFlYpUohYiYWFRcAmKAhWK2pjo1iKf8BCMIKFf8BarCyMhVj4VZhGSKEg2FqJyCKWIhYWnstMINgYsh+cmfs88BICydxw7jmzu2HvNg0AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADBN+3r6dx+LXIqsRpa7FF8j48hm5Fn3Peo9mAEYRdYjJ3f582Vj7nZfUe/eDsCRyMPI2h5/fyNyI/JDT6v3Tvt7sBllE15ETkxwjeORi5G3ke/6W737MgBnI68jh6ZwrcORq5HnhkC9+zAA5YXXy8jBKV5zKXIu8jjyS7+rd+YBeNVtyrSVO9PRyBM9r94LSTfjWuTUDK9/eYIXeENUbb0zDsBi5PYc1rmj79U74wCszuih+F/ljrSi/+uud8YBGA10rayqrnfGAVgb6FpZVV3vjAOwPNC1sqq63hkHYGWga2VVdb0XKt/8Rf1fd70zDsB4jmt5u3Tl9a59AMb6v+56ZxyArYGulVXV9c44ABtzXOup/q+73hkH4N2cHio/Rj7r/7rrnXEAfkfuz2Gddb2v3ln/DfpgxneLzaY9xE3l9c46AH8iVyI/Z3Dt8nB/Xc+rd5H5QMy3yJemPVs6zY0edc9HUe/0Z4I/dQ/N5Vjd0oTXKp9QcKFpD2qj3r0YgO1NeRM507TH6/bifeR85IMeV++d+vTBWOV9JDcjt5rdv6uw3M3uRR7pa/Xu+wBsOxA53bTnTP/3UX1b3fNQ1BsAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAKqyr6d/97HIpchqZLlL8TUyjmxGnnXfo96DGYBRZD1ycpc/XzbmbvcV9e7tAByJPIys7fH3NyI3Ij/0tHrvtL8Hm1E24UXkxATXOB65GHkb+a6/1bsvA3A28jpyaArXOhy5GnluCNS7DwNQXni9jByc4jWXIucijyO/9Lt6Zx6AV92mTFu5Mx2NPNHz6r2QdDOuRU7N8PqXJ3iBN0TV1jvjACxGbs9hnTv6Xr0zDsDqjB6K/1XuSCv6v+56ZxyA0UDXyqrqemccgLWBrpVV1fXOOADLA10rq6rrnXEAVga6VlZV13uh8s1f1P911zvjAIznuJa3S1de79oHYKz/6653xgHYGuhaWVVd74wDsDHHtZ7q/7rrnXEA3s3pofJj5LP+r7veGQfgd+T+HNZZ1/vqnfXfoA9mfLfYbNpD3FRe76wD8CdyJfJzBtcuD/fX9bx6F5kPxHyLfGnas6XT3OhR93wU9U5/JvhT99BcjtUtTXit8gkFF5r2oDbq3YsB2N6UN5EzTXu8bi/eR85HPuhx9d6pTx+MVd5HcjNyq9n9uwrL3exe5JG+Vu++D8C2A5HTTXvO9H8f1bfVPQ9FvQEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgCn7C9HjBtwWfXpKAAAAAElFTkSuQmCC";
-const PUBLIC_BACK = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMAAAADACAYAAABS3GwHAAAAIGNIUk0AAHomAACAhAAA+gAAAIDoAAB1MAAA6mAAADqYAAAXcJy6UTwAAAAEZ0FNQQAAsY58+1GTAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAAOxAAADsQBlSsOGwAAA8VJREFUeNrt3LFLlHEYwPFXz0GiIZpEoikkwsFRIiK3gqCigxIC/4Kmhv6OoChouaGoqKCgCKducGh0cDAIamhwiCaHCIeelztpUszee/vl8/nAM3Vd8nufr+fddVYVAAAAAAAAAAAAAAAAAAAAAABQijFH0KhrMd2Y2ZitmNWYRzHLjkYAB9lUzMOYizv8eS/mZsymoypLxxE0svzvY07vcpu5mOmY145LAAdx+U/u4bZzwx+JPjq2cow7glaWf1vXsQkg6/JvPwoggJTLjwDSL/8nRyiAzN/5nzpGAWRd/n7MM0cpgIzLvx6z6CjL453gdpZ/IWbDcQrA8iMAy48ALD8CsPwIwPIjAMuPACw/ArD8CMDyIwDLjwAsPwKw/AjA8iMAy48ALD8CsPwIwPIjAMuPACw/ArD85A3A8pM2AMtP2gAsP2kDsPykDcDykzYAy0/aACw/aQOw/KQNwPKTNgDLT9oALD9pA7D8pA3A8pM2AMtP2gAsP2kDsPykDcDykzYAy0/aACw/aQOw/KQNwPKTNgDLT9oALD9pA7D8pA3A8pM2AMtP2gAsP2kDsPykDcDykzYAy0/aACw/aQOw/KQNwPLz3xlv6H4mYp5YfrI+AizF9BwnI/AlZi3mbsxy03feaeh+HsQcc60YgSMxMzE3YmZj3sX8LOlHoPoLnHedaEE35n5pzwF856dN9SPBpZICmHRNaNnlkgL46nrQsvmSAqhftlx1TWjR4ZICqPVcE1q0XloA96rBa7XQhl5pAWzFXKm8i8vo9WMeN3VnnQa/sO8xL2POxEy7Toxo+RdjNpu6w1F9HuBqNXi99lw1eKMM9utHzIeYV8MftbccCQAAAAAAsBdt/XLc+sPy9W+MmPqL+1iJuVA1+C4gdFr6d77FvK0GH2nb739lPR5zNuZ51eBnQhFAJQIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIE8M8jmBlGgABSRnAqZiXms+MUQNYIDnkUKMu4I/gj6zELMRv7/PsnHKEAMkcw6fgEkDmCNUcngMwRvHFsngRnfWJcL/9tRyaAgxrB+ZijO9ymH7MUs+m4yjLmCBozEXMr5nr1+9We1ZgXMXccDwAAAAAAAAAAAAAAAAAAAAAAwO5+AfVgtqHKRnawAAAAAElFTkSuQmCC";
-export class SelectTitleBar extends ViewPU {
-  constructor(e, t, o, i = -1) {
-    super(e, o, i);
-    this.__selected = new ObservedPropertySimplePU(0, this, "selected");
-    this.options = void 0;
-    this.menuItems = void 0;
-    this.subtitle = void 0;
-    this.badgeValue = void 0;
-    this.hidesBackButton = void 0;
-    this.onSelected = void 0;
-    this.__selectMaxWidth = new ObservedPropertySimplePU(0, this, "selectMaxWidth");
-    this.setInitiallyProvidedValue(t)
-  }
-  setInitiallyProvidedValue(e) {
-    void 0 !== e.selected && (this.selected = e.selected);
-    void 0 !== e.options && (this.options = e.options);
-    void 0 !== e.menuItems && (this.menuItems = e.menuItems);
-    void 0 !== e.subtitle && (this.subtitle = e.subtitle);
-    void 0 !== e.badgeValue && (this.badgeValue = e.badgeValue);
-    void 0 !== e.hidesBackButton && (this.hidesBackButton = e.hidesBackButton);
-    void 0 !== e.onSelected && (this.onSelected = e.onSelected);
-    void 0 !== e.selectMaxWidth && (this.selectMaxWidth = e.selectMaxWidth)
-  }
-  updateStateVars(e) {}
-  purgeVariableDependenciesOnElmtId(e) {
-    this.__selected.purgeDependencyOnElmtId(e);
-    this.__selectMaxWidth.purgeDependencyOnElmtId(e)
-  }
-  aboutToBeDeleted() {
-    this.__selected.aboutToBeDeleted();
-    this.__selectMaxWidth.aboutToBeDeleted();
-    SubscriberManager.Get().delete(this.id__());
-    this.aboutToBeDeletedInternal()
-  }
-  get selected() {
-    return this.__selected.get()
-  }
-  set selected(e) {
-    this.__selected.set(e)
-  }
-  get selectMaxWidth() {
-    return this.__selectMaxWidth.get()
-  }
-  set selectMaxWidth(e) {
-    this.__selectMaxWidth.set(e)
-  }
-  initialRender() {
-    this.observeComponentCreation(((e, t) => {
-      ViewStackProcessor.StartGetAccessRecordingFor(e);
-      Flex.create({
-        justifyContent: FlexAlign.SpaceBetween,
-        alignItems: ItemAlign.Stretch
-      });
-      Flex.width("100%");
-      Flex.height(SelectTitleBar.totalHeight);
-      Flex.backgroundColor({
-        id: -1,
-        type: 10001,
-        params: ["sys.color.ohos_id_color_background"],
-        bundleName: "",
-        moduleName: ""
-      });
-      Flex.onAreaChange(((e, t) => {
-        let o = Number(t.width);
-        if (!this.hidesBackButton) {
-          o -= ImageMenuItem.imageHotZoneWidth;
-          o += SelectTitleBar.leftPadding;
-          o -= SelectTitleBar.leftPaddingWithBack
-        }
-        if (void 0 !== this.menuItems) {
-          let e = this.menuItems.length;
-          e >= CollapsibleMenuSection.maxCountOfVisibleItems ? o -= ImageMenuItem.imageHotZoneWidth * CollapsibleMenuSection.maxCountOfVisibleItems : e > 0 && (o -= ImageMenuItem.imageHotZoneWidth * e)
-        }
-        void 0 !== this.badgeValue ? this.selectMaxWidth = o - SelectTitleBar.badgeSize - SelectTitleBar.leftPadding - SelectTitleBar.rightPadding - SelectTitleBar.badgePadding : this.selectMaxWidth = o - SelectTitleBar.leftPadding - SelectTitleBar.rightPadding
-      }));
-      t || Flex.pop();
-      ViewStackProcessor.StopGetAccessRecording()
-    }));
-    this.observeComponentCreation(((e, t) => {
-      ViewStackProcessor.StartGetAccessRecordingFor(e);
-      Row.create();
-      Row.margin({
-        left: this.hidesBackButton ? {
-          id: -1,
-          type: 10002,
-          params: ["sys.float.ohos_id_max_padding_start"],
-          bundleName: "",
-          moduleName: ""
-        } : {
-          id: -1,
-          type: 10002,
-          params: ["sys.float.ohos_id_default_padding_start"],
-          bundleName: "",
-          moduleName: ""
-        }
-      });
-      t || Row.pop();
-      ViewStackProcessor.StopGetAccessRecording()
-    }));
-    this.observeComponentCreation(((e, t) => {
-      ViewStackProcessor.StartGetAccessRecordingFor(e);
-      If.create();
-      this.hidesBackButton ? If.branchId(1) : this.ifElseBranchUpdateFunction(0, (() => {
-        this.observeComponentCreation(((e, t) => {
-          ViewStackProcessor.StartGetAccessRecordingFor(e);
-          Navigator.create();
-          t || Navigator.pop();
-          ViewStackProcessor.StopGetAccessRecording()
-        }));
-        this.observeComponentCreation(((e, t) => {
-          ViewStackProcessor.StartGetAccessRecordingFor(e);
-          t ? ViewPU.create(new ImageMenuItem(this, {
-            item: {
-              value: PUBLIC_BACK,
-              isEnabled: !0
-            }
-          }, void 0, e)) : this.updateStateVarsOfChildByElmtId(e, {});
-          ViewStackProcessor.StopGetAccessRecording()
-        }));
-        Navigator.pop()
-      }));
-      t || If.pop();
-      ViewStackProcessor.StopGetAccessRecording()
-    }));
-    If.pop();
-    this.observeComponentCreation(((e, t) => {
-      ViewStackProcessor.StartGetAccessRecordingFor(e);
-      Column.create();
-      Column.justifyContent(FlexAlign.Start);
-      Column.alignItems(HorizontalAlign.Start);
-      Column.constraintSize({
-        maxWidth: this.selectMaxWidth
-      });
-      t || Column.pop();
-      ViewStackProcessor.StopGetAccessRecording()
-    }));
-    this.observeComponentCreation(((e, t) => {
-      ViewStackProcessor.StartGetAccessRecordingFor(e);
-      If.create();
-      void 0 !== this.badgeValue ? this.ifElseBranchUpdateFunction(0, (() => {
-        this.observeComponentCreation(((e, t) => {
-          ViewStackProcessor.StartGetAccessRecordingFor(e);
-          Badge.create({
-            count: this.badgeValue,
-            position: BadgePosition.Right,
-            style: {
-              badgeSize: SelectTitleBar.badgeSize,
-              badgeColor: {
-                id: -1,
-                type: 10001,
-                params: ["sys.color.ohos_id_color_emphasize"],
-                bundleName: "",
-                moduleName: ""
-              },
-              borderColor: {
-                id: -1,
-                type: 10001,
-                params: ["sys.color.ohos_id_color_emphasize"],
-                bundleName: "",
-                moduleName: ""
-              },
-              borderWidth: 0
-            }
-          });
-          t || Badge.pop();
-          ViewStackProcessor.StopGetAccessRecording()
-        }));
-        this.observeComponentCreation(((e, t) => {
-          ViewStackProcessor.StartGetAccessRecordingFor(e);
-          Row.create();
-          Row.justifyContent(FlexAlign.Start);
-          Row.margin({
-            right: {
-              id: -1,
-              type: 10002,
-              params: ["sys.float.ohos_id_elements_margin_horizontal_l"],
-              bundleName: "",
-              moduleName: ""
-            }
-          });
-          t || Row.pop();
-          ViewStackProcessor.StopGetAccessRecording()
-        }));
-        this.observeComponentCreation(((e, t) => {
-          ViewStackProcessor.StartGetAccessRecordingFor(e);
-          Select.create(this.options);
-          Select.selected(this.selected);
-          Select.value(this.selected < this.options.length ? this.options[this.selected].value.toString() : "");
-          Select.font({
-            size: this.hidesBackButton && void 0 === this.subtitle ? {
-              id: -1,
-              type: 10002,
-              params: ["sys.float.ohos_id_text_size_headline7"],
-              bundleName: "",
-              moduleName: ""
-            } : {
-              id: -1,
-              type: 10002,
-              params: ["sys.float.ohos_id_text_size_headline8"],
-              bundleName: "",
-              moduleName: ""
-            }
-          });
-          Select.fontColor({
-            id: -1,
-            type: 10001,
-            params: ["sys.color.ohos_id_color_titlebar_text"],
-            bundleName: "",
-            moduleName: ""
-          });
-          Select.backgroundColor(Color.Transparent);
-          Select.onSelect(this.onSelected);
-          Select.constraintSize({
-            maxWidth: this.selectMaxWidth
-          });
-          Select.offset({
-            x: -4
-          });
-          t || Select.pop();
-          ViewStackProcessor.StopGetAccessRecording()
-        }));
-        Select.pop();
-        Row.pop();
-        Badge.pop()
-      })) : this.ifElseBranchUpdateFunction(1, (() => {
-        this.observeComponentCreation(((e, t) => {
-          ViewStackProcessor.StartGetAccessRecordingFor(e);
-          Row.create();
-          Row.justifyContent(FlexAlign.Start);
-          t || Row.pop();
-          ViewStackProcessor.StopGetAccessRecording()
-        }));
-        this.observeComponentCreation(((e, t) => {
-          ViewStackProcessor.StartGetAccessRecordingFor(e);
-          Select.create(this.options);
-          Select.selected(this.selected);
-          Select.value(this.selected < this.options.length ? this.options[this.selected].value.toString() : "");
-          Select.font({
-            size: this.hidesBackButton && void 0 === this.subtitle ? {
-              id: -1,
-              type: 10002,
-              params: ["sys.float.ohos_id_text_size_headline7"],
-              bundleName: "",
-              moduleName: ""
-            } : {
-              id: -1,
-              type: 10002,
-              params: ["sys.float.ohos_id_text_size_headline8"],
-              bundleName: "",
-              moduleName: ""
-            }
-          });
-          Select.fontColor({
-            id: -1,
-            type: 10001,
-            params: ["sys.color.ohos_id_color_titlebar_text"],
-            bundleName: "",
-            moduleName: ""
-          });
-          Select.backgroundColor(Color.Transparent);
-          Select.onSelect(this.onSelected);
-          Select.constraintSize({
-            maxWidth: this.selectMaxWidth
-          });
-          Select.offset({
-            x: -4
-          });
-          t || Select.pop();
-          ViewStackProcessor.StopGetAccessRecording()
-        }));
-        Select.pop();
-        Row.pop()
-      }));
-      t || If.pop();
-      ViewStackProcessor.StopGetAccessRecording()
-    }));
-    If.pop();
-    this.observeComponentCreation(((e, t) => {
-      ViewStackProcessor.StartGetAccessRecordingFor(e);
-      If.create();
-      void 0 !== this.subtitle ? this.ifElseBranchUpdateFunction(0, (() => {
-        this.observeComponentCreation(((e, t) => {
-          ViewStackProcessor.StartGetAccessRecordingFor(e);
-          Row.create();
-          Row.justifyContent(FlexAlign.Start);
-          Row.margin({
-            left: SelectTitleBar.subtitleLeftPadding
-          });
-          t || Row.pop();
-          ViewStackProcessor.StopGetAccessRecording()
-        }));
-        this.observeComponentCreation(((e, t) => {
-          ViewStackProcessor.StartGetAccessRecordingFor(e);
-          Text.create(this.subtitle);
-          Text.fontSize({
-            id: -1,
-            type: 10002,
-            params: ["sys.float.ohos_id_text_size_over_line"],
-            bundleName: "",
-            moduleName: ""
-          });
-          Text.fontColor({
-            id: -1,
-            type: 10001,
-            params: ["sys.color.ohos_id_color_titlebar_subtitle_text"],
-            bundleName: "",
-            moduleName: ""
-          });
-          Text.maxLines(1);
-          Text.textOverflow({
-            overflow: TextOverflow.Ellipsis
-          });
-          Text.constraintSize({
-            maxWidth: this.selectMaxWidth
-          });
-          Text.offset({
-            y: -4
-          });
-          t || Text.pop();
-          ViewStackProcessor.StopGetAccessRecording()
-        }));
-        Text.pop();
-        Row.pop()
-      })) : If.branchId(1);
-      t || If.pop();
-      ViewStackProcessor.StopGetAccessRecording()
-    }));
-    If.pop();
-    Column.pop();
-    Row.pop();
-    this.observeComponentCreation(((e, t) => {
-      ViewStackProcessor.StartGetAccessRecordingFor(e);
-      If.create();
-      void 0 !== this.menuItems && this.menuItems.length > 0 ? this.ifElseBranchUpdateFunction(0, (() => {
-        this.observeComponentCreation(((e, t) => {
-          ViewStackProcessor.StartGetAccessRecordingFor(e);
-          t ? ViewPU.create(new CollapsibleMenuSection(this, {
-            menuItems: this.menuItems
-          }, void 0, e)) : this.updateStateVarsOfChildByElmtId(e, {});
-          ViewStackProcessor.StopGetAccessRecording()
-        }))
-      })) : If.branchId(1);
-      t || If.pop();
-      ViewStackProcessor.StopGetAccessRecording()
-    }));
-    If.pop();
-    Flex.pop()
-  }
-  rerender() {
-    this.updateDirtyElements()
-  }
-}
-SelectTitleBar.badgeSize = 16;
-SelectTitleBar.totalHeight = 56;
-SelectTitleBar.leftPadding = 24;
-SelectTitleBar.leftPaddingWithBack = 12;
-SelectTitleBar.rightPadding = 24;
-SelectTitleBar.badgePadding = 16;
-SelectTitleBar.subtitleLeftPadding = 4;
-class CollapsibleMenuSection extends ViewPU {
-  constructor(e, t, o, i = -1) {
-    super(e, o, i);
-    this.menuItems = void 0;
-    this.__isPopupShown = new ObservedPropertySimplePU(!1, this, "isPopupShown");
-    this.__isMoreIconOnFocus = new ObservedPropertySimplePU(!1, this, "isMoreIconOnFocus");
-    this.__isMoreIconOnHover = new ObservedPropertySimplePU(!1, this, "isMoreIconOnHover");
-    this.__isMoreIconOnClick = new ObservedPropertySimplePU(!1, this, "isMoreIconOnClick");
-    this.setInitiallyProvidedValue(t)
-  }
-  setInitiallyProvidedValue(e) {
-    void 0 !== e.menuItems && (this.menuItems = e.menuItems);
-    void 0 !== e.isPopupShown && (this.isPopupShown = e.isPopupShown);
-    void 0 !== e.isMoreIconOnFocus && (this.isMoreIconOnFocus = e.isMoreIconOnFocus);
-    void 0 !== e.isMoreIconOnHover && (this.isMoreIconOnHover = e.isMoreIconOnHover);
-    void 0 !== e.isMoreIconOnClick && (this.isMoreIconOnClick = e.isMoreIconOnClick)
-  }
-  updateStateVars(e) {}
-  purgeVariableDependenciesOnElmtId(e) {
-    this.__isPopupShown.purgeDependencyOnElmtId(e);
-    this.__isMoreIconOnFocus.purgeDependencyOnElmtId(e);
-    this.__isMoreIconOnHover.purgeDependencyOnElmtId(e);
-    this.__isMoreIconOnClick.purgeDependencyOnElmtId(e)
-  }
-  aboutToBeDeleted() {
-    this.__isPopupShown.aboutToBeDeleted();
-    this.__isMoreIconOnFocus.aboutToBeDeleted();
-    this.__isMoreIconOnHover.aboutToBeDeleted();
-    this.__isMoreIconOnClick.aboutToBeDeleted();
-    SubscriberManager.Get().delete(this.id__());
-    this.aboutToBeDeletedInternal()
-  }
-  get isPopupShown() {
-    return this.__isPopupShown.get()
-  }
-  set isPopupShown(e) {
-    this.__isPopupShown.set(e)
-  }
-  get isMoreIconOnFocus() {
-    return this.__isMoreIconOnFocus.get()
-  }
-  set isMoreIconOnFocus(e) {
-    this.__isMoreIconOnFocus.set(e)
-  }
-  get isMoreIconOnHover() {
-    return this.__isMoreIconOnHover.get()
-  }
-  set isMoreIconOnHover(e) {
-    this.__isMoreIconOnHover.set(e)
-  }
-  get isMoreIconOnClick() {
-    return this.__isMoreIconOnClick.get()
-  }
-  set isMoreIconOnClick(e) {
-    this.__isMoreIconOnClick.set(e)
-  }
-  getMoreIconFgColor() {
-    return this.isMoreIconOnClick ? {
-      id: -1,
-      type: 10001,
-      params: ["sys.color.ohos_id_color_titlebar_icon_pressed"],
-      bundleName: "",
-      moduleName: ""
-    } : {
-      id: -1,
-      type: 10001,
-      params: ["sys.color.ohos_id_color_titlebar_icon"],
-      bundleName: "",
-      moduleName: ""
-    }
-  }
-  getMoreIconBgColor() {
-    return this.isMoreIconOnClick ? {
-      id: -1,
-      type: 10001,
-      params: ["sys.color.ohos_id_color_click_effect"],
-      bundleName: "",
-      moduleName: ""
-    } : this.isMoreIconOnHover ? {
-      id: -1,
-      type: 10001,
-      params: ["sys.color.ohos_id_color_hover"],
-      bundleName: "",
-      moduleName: ""
-    } : Color.Transparent
-  }
-  initialRender() {
-    this.observeComponentCreation(((e, t) => {
-      ViewStackProcessor.StartGetAccessRecordingFor(e);
-      Column.create();
-      Column.height("100%");
-      Column.margin({
-        right: {
-          id: -1,
-          type: 10002,
-          params: ["sys.float.ohos_id_default_padding_end"],
-          bundleName: "",
-          moduleName: ""
-        }
-      });
-      Column.justifyContent(FlexAlign.Center);
-      t || Column.pop();
-      ViewStackProcessor.StopGetAccessRecording()
-    }));
-    this.observeComponentCreation(((e, t) => {
-      ViewStackProcessor.StartGetAccessRecordingFor(e);
-      Row.create();
-      t || Row.pop();
-      ViewStackProcessor.StopGetAccessRecording()
-    }));
-    this.observeComponentCreation(((e, t) => {
-      ViewStackProcessor.StartGetAccessRecordingFor(e);
-      If.create();
-      this.menuItems.length <= CollapsibleMenuSection.maxCountOfVisibleItems ? this.ifElseBranchUpdateFunction(0, (() => {
-        this.observeComponentCreation(((e, t) => {
-          ViewStackProcessor.StartGetAccessRecordingFor(e);
-          ForEach.create();
-          this.forEachUpdateFunction(e, this.menuItems, (e => {
-            const t = e;
-            this.observeComponentCreation(((e, o) => {
-              ViewStackProcessor.StartGetAccessRecordingFor(e);
-              o ? ViewPU.create(new ImageMenuItem(this, {
-                item: t
-              }, void 0, e)) : this.updateStateVarsOfChildByElmtId(e, {});
-              ViewStackProcessor.StopGetAccessRecording()
-            }))
-          }));
-          t || ForEach.pop();
-          ViewStackProcessor.StopGetAccessRecording()
-        }));
-        ForEach.pop()
-      })) : this.ifElseBranchUpdateFunction(1, (() => {
-        this.observeComponentCreation(((e, t) => {
-          ViewStackProcessor.StartGetAccessRecordingFor(e);
-          ForEach.create();
-          this.forEachUpdateFunction(e, this.menuItems.slice(0, CollapsibleMenuSection.maxCountOfVisibleItems - 1), (e => {
-            const t = e;
-            this.observeComponentCreation(((e, o) => {
-              ViewStackProcessor.StartGetAccessRecordingFor(e);
-              o ? ViewPU.create(new ImageMenuItem(this, {
-                item: t
-              }, void 0, e)) : this.updateStateVarsOfChildByElmtId(e, {});
-              ViewStackProcessor.StopGetAccessRecording()
-            }))
-          }));
-          t || ForEach.pop();
-          ViewStackProcessor.StopGetAccessRecording()
-        }));
-        ForEach.pop();
-        this.observeComponentCreation(((e, t) => {
-          ViewStackProcessor.StartGetAccessRecordingFor(e);
-          Row.create();
-          Row.width(ImageMenuItem.imageHotZoneWidth);
-          Row.height(ImageMenuItem.imageHotZoneWidth);
-          Row.borderRadius(ImageMenuItem.buttonBorderRadius);
-          Row.foregroundColor(this.getMoreIconFgColor());
-          Row.backgroundColor(this.getMoreIconBgColor());
-          Row.justifyContent(FlexAlign.Center);
-          Row.border(this.isMoreIconOnFocus ? {
-            width: ImageMenuItem.focusBorderWidth,
-            color: {
-              id: -1,
-              type: 10001,
-              params: ["sys.color.ohos_id_color_emphasize"],
-              bundleName: "",
-              moduleName: ""
-            },
-            style: BorderStyle.Solid
-          } : {
-            width: 0
-          });
-          Row.onFocus((() => this.isMoreIconOnFocus = !0));
-          Row.onBlur((() => this.isMoreIconOnFocus = !1));
-          Row.onHover((e => this.isMoreIconOnHover = e));
-          Row.onKeyEvent((e => {
-            if (e.keyCode === KeyCode.KEYCODE_ENTER || e.keyCode === KeyCode.KEYCODE_SPACE) {
-              e.type === KeyType.Down && (this.isMoreIconOnClick = !0);
-              e.type === KeyType.Up && (this.isMoreIconOnClick = !1)
-            }
-          }));
-          Row.onTouch((e => {
-            e.type === TouchType.Down && (this.isMoreIconOnClick = !0);
-            e.type === TouchType.Up && (this.isMoreIconOnClick = !1)
-          }));
-          Row.onClick((() => this.isPopupShown = !0));
-          Row.bindPopup(this.isPopupShown, {
-            builder: {
-              builder: this.popupBuilder.bind(this)
-            },
-            placement: Placement.Bottom,
-            popupColor: Color.White,
-            enableArrow: !1,
-            onStateChange: e => this.isPopupShown = e.isVisible
-          });
-          t || Row.pop();
-          ViewStackProcessor.StopGetAccessRecording()
-        }));
-        this.observeComponentCreation(((e, t) => {
-          ViewStackProcessor.StartGetAccessRecordingFor(e);
-          Image.create(PUBLIC_MORE);
-          Image.width(ImageMenuItem.imageSize);
-          Image.height(ImageMenuItem.imageSize);
-          Image.focusable(!0);
-          t || Image.pop();
-          ViewStackProcessor.StopGetAccessRecording()
-        }));
-        Row.pop()
-      }));
-      t || If.pop();
-      ViewStackProcessor.StopGetAccessRecording()
-    }));
-    If.pop();
-    Row.pop();
-    Column.pop()
-  }
-  popupBuilder(e = null) {
-    this.observeComponentCreation(((e, t) => {
-      ViewStackProcessor.StartGetAccessRecordingFor(e);
-      Column.create();
-      Column.width(ImageMenuItem.imageHotZoneWidth + CollapsibleMenuSection.focusPadding * CollapsibleMenuSection.marginsNum);
-      Column.margin({
-        top: CollapsibleMenuSection.focusPadding,
-        bottom: CollapsibleMenuSection.focusPadding
-      });
-      t || Column.pop();
-      ViewStackProcessor.StopGetAccessRecording()
-    }));
-    this.observeComponentCreation(((e, t) => {
-      ViewStackProcessor.StartGetAccessRecordingFor(e);
-      ForEach.create();
-      this.forEachUpdateFunction(e, this.menuItems.slice(CollapsibleMenuSection.maxCountOfVisibleItems - 1, this.menuItems.length), ((e, t) => {
-        const o = e;
-        this.observeComponentCreation(((e, t) => {
-          ViewStackProcessor.StartGetAccessRecordingFor(e);
-          t ? ViewPU.create(new ImageMenuItem(this, {
-            item: o
-          }, void 0, e)) : this.updateStateVarsOfChildByElmtId(e, {});
-          ViewStackProcessor.StopGetAccessRecording()
-        }))
-      }), void 0, !0, !1);
-      t || ForEach.pop();
-      ViewStackProcessor.StopGetAccessRecording()
-    }));
-    ForEach.pop();
-    Column.pop()
-  }
-  rerender() {
-    this.updateDirtyElements()
-  }
-}
-CollapsibleMenuSection.maxCountOfVisibleItems = 3;
-CollapsibleMenuSection.focusPadding = 4;
-CollapsibleMenuSection.marginsNum = 2;
-__decorate([], CollapsibleMenuSection.prototype, "popupBuilder", null);
-class ImageMenuItem extends ViewPU {
-  constructor(e, t, o, i = -1) {
-    super(e, o, i);
-    this.item = void 0;
-    this.__isOnFocus = new ObservedPropertySimplePU(!1, this, "isOnFocus");
-    this.__isOnHover = new ObservedPropertySimplePU(!1, this, "isOnHover");
-    this.__isOnClick = new ObservedPropertySimplePU(!1, this, "isOnClick");
-    this.setInitiallyProvidedValue(t)
-  }
-  setInitiallyProvidedValue(e) {
-    void 0 !== e.item && (this.item = e.item);
-    void 0 !== e.isOnFocus && (this.isOnFocus = e.isOnFocus);
-    void 0 !== e.isOnHover && (this.isOnHover = e.isOnHover);
-    void 0 !== e.isOnClick && (this.isOnClick = e.isOnClick)
-  }
-  updateStateVars(e) {}
-  purgeVariableDependenciesOnElmtId(e) {
-    this.__isOnFocus.purgeDependencyOnElmtId(e);
-    this.__isOnHover.purgeDependencyOnElmtId(e);
-    this.__isOnClick.purgeDependencyOnElmtId(e)
-  }
-  aboutToBeDeleted() {
-    this.__isOnFocus.aboutToBeDeleted();
-    this.__isOnHover.aboutToBeDeleted();
-    this.__isOnClick.aboutToBeDeleted();
-    SubscriberManager.Get().delete(this.id__());
-    this.aboutToBeDeletedInternal()
-  }
-  get isOnFocus() {
-    return this.__isOnFocus.get()
-  }
-  set isOnFocus(e) {
-    this.__isOnFocus.set(e)
-  }
-  get isOnHover() {
-    return this.__isOnHover.get()
-  }
-  set isOnHover(e) {
-    this.__isOnHover.set(e)
-  }
-  get isOnClick() {
-    return this.__isOnClick.get()
-  }
-  set isOnClick(e) {
-    this.__isOnClick.set(e)
-  }
-  getFgColor() {
-    return this.isOnClick ? {
-      id: -1,
-      type: 10001,
-      params: ["sys.color.ohos_id_color_titlebar_icon_pressed"],
-      bundleName: "",
-      moduleName: ""
-    } : {
-      id: -1,
-      type: 10001,
-      params: ["sys.color.ohos_id_color_titlebar_icon"],
-      bundleName: "",
-      moduleName: ""
-    }
-  }
-  getBgColor() {
-    return this.isOnClick ? {
-      id: -1,
-      type: 10001,
-      params: ["sys.color.ohos_id_color_click_effect"],
-      bundleName: "",
-      moduleName: ""
-    } : this.isOnHover ? {
-      id: -1,
-      type: 10001,
-      params: ["sys.color.ohos_id_color_hover"],
-      bundleName: "",
-      moduleName: ""
-    } : Color.Transparent
-  }
-  initialRender() {
-    this.observeComponentCreation(((e, t) => {
-      ViewStackProcessor.StartGetAccessRecordingFor(e);
-      Row.create();
-      Row.width(ImageMenuItem.imageHotZoneWidth);
-      Row.height(ImageMenuItem.imageHotZoneWidth);
-      Row.borderRadius(ImageMenuItem.buttonBorderRadius);
-      Row.foregroundColor(this.getFgColor());
-      Row.backgroundColor(this.getBgColor());
-      Row.justifyContent(FlexAlign.Center);
-      Row.opacity(this.item.isEnabled ? 1 : ImageMenuItem.disabledImageOpacity);
-      Row.border(this.isOnFocus ? {
-        width: ImageMenuItem.focusBorderWidth,
-        color: {
-          id: -1,
-          type: 10001,
-          params: ["sys.color.ohos_id_color_emphasize"],
-          bundleName: "",
-          moduleName: ""
-        },
-        style: BorderStyle.Solid
-      } : {
-        width: 0
-      });
-      Row.onFocus((() => {
-        this.item.isEnabled && (this.isOnFocus = !0)
-      }));
-      Row.onBlur((() => this.isOnFocus = !1));
-      Row.onHover((e => {
-        this.item.isEnabled && (this.isOnHover = e)
-      }));
-      Row.onKeyEvent((e => {
-        if (this.item.isEnabled && (e.keyCode === KeyCode.KEYCODE_ENTER || e.keyCode === KeyCode.KEYCODE_SPACE)) {
-          e.type === KeyType.Down && (this.isOnClick = !0);
-          e.type === KeyType.Up && (this.isOnClick = !1)
-        }
-      }));
-      Row.onTouch((e => {
-        if (this.item.isEnabled) {
-          e.type === TouchType.Down && (this.isOnClick = !0);
-          e.type === TouchType.Up && (this.isOnClick = !1)
-        }
-      }));
-      Row.onClick((() => this.item.isEnabled && this.item.action && this.item.action()));
-      t || Row.pop();
-      ViewStackProcessor.StopGetAccessRecording()
-    }));
-    this.observeComponentCreation(((e, t) => {
-      ViewStackProcessor.StartGetAccessRecordingFor(e);
-      Image.create(this.item.value);
-      Image.width(ImageMenuItem.imageSize);
-      Image.height(ImageMenuItem.imageSize);
-      Image.focusable(this.item.isEnabled);
-      t || Image.pop();
-      ViewStackProcessor.StopGetAccessRecording()
-    }));
-    Row.pop()
-  }
-  rerender() {
-    this.updateDirtyElements()
-  }
-}
-ImageMenuItem.imageSize = 24;
-ImageMenuItem.imageHotZoneWidth = 48;
-ImageMenuItem.buttonBorderRadius = 8;
-ImageMenuItem.focusBorderWidth = 2;
-ImageMenuItem.disabledImageOpacity = .4;
-export default {
-  SelectTitleBar: SelectTitleBar
-};

interface/splitlayout/BUILD.gn

@@ -1,46 +0,0 @@
-# Copyright (c) 2023-2023 Huawei Device Co., Ltd.
-# Licensed under the Apache License, Version 2.0 (the "License");
-# you may not use this file except in compliance with the License.
-# You may obtain a copy of the License at
-#
-#     http://www.apache.org/licenses/LICENSE-2.0
-#
-# Unless required by applicable law or agreed to in writing, software
-# distributed under the License is distributed on an "AS IS" BASIS,
-# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-# See the License for the specific language governing permissions and
-# limitations under the License.
-
-import("//build/ohos.gni")
-import("//foundation/arkui/ace_engine/ace_config.gni")
-import("//arkcompiler/ets_frontend/es2panda/es2abc_config.gni")
-
-es2abc_gen_abc("gen_splitlayout_abc") {
-  src_js = rebase_path("splitlayout.js")
-  dst_file = rebase_path(target_out_dir + "/splitlayout.abc")
-  in_puts = [ "splitlayout.js" ]
-  out_puts = [ target_out_dir + "/splitlayout.abc" ]
-  extra_args = [ "--module" ]
-}
-
-gen_js_obj("splitlayout_abc") {
-  input = get_label_info(":gen_splitlayout_abc", "target_out_dir") + "/splitlayout.abc"
-  output = target_out_dir + "/splitlayout_abc.o"
-  dep = ":gen_splitlayout_abc"
-}
-
-ohos_shared_library("splitlayout") {
-  sources = [ "splitlayout.cpp" ]
-
-  deps = [ ":splitlayout_abc" ]
-
-  external_deps = [
-    "hilog:libhilog",
-    "napi:ace_napi",
-  ]
-
-  subsystem_name = "arkui"
-  part_name = "advanced_ui_component"
-
-  relative_install_dir = "module/arkui/advanced"
-}

interface/splitlayout/splitlayout.cpp

@@ -1,48 +0,0 @@
-/*
- * Copyright (c) 2023-2023 Huawei Device Co., Ltd.
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-#include "native_engine/native_engine.h"
-
-#include "napi/native_api.h"
-#include "napi/native_node_api.h"
-
-extern const char _binary_splitlayout_abc_start[];
-extern const char _binary_splitlayout_abc_end[];
-
-// Napi get abc code function
-extern "C" __attribute__((visibility("default")))
-void NAPI_splitlayout_GetABCCode(const char **buf, int *buflen)
-{
-    if (buf != nullptr) {
-        *buf = _binary_splitlayout_abc_start;
-    }
-    if (buflen != nullptr) {
-        *buflen = _binary_splitlayout_abc_end - _binary_splitlayout_abc_start;
-    }
-}
-
-static napi_module splitlayoutModule = {
-    .nm_version = 1,
-    .nm_flags = 0,
-    .nm_filename = nullptr,
-    .nm_modname = "splitlayout",
-    .nm_priv = ((void*)0),
-    .reserved = { 0 },
-};
-
-extern "C" __attribute__((constructor)) void splitlayoutRegisterModule(void)
-{
-    napi_module_register(&splitlayoutModule);
-}

interface/splitlayout/splitlayout.js

@@ -1,524 +0,0 @@
-/*
- * Copyright (c) 2023-2023 Huawei Device Co., Ltd.
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-export class splitlayout extends ViewPU {
-  constructor(e, t, o, r = -1) {
-    super(e, o, r);
-    this.container = void 0;
-    this.__sizeValue = new ObservedPropertySimplePU("", this, "sizeValue");
-    this.__areaWidth = new ObservedPropertySimplePU(0, this, "areaWidth");
-    this.__imageBackgroundColor = new ObservedPropertySimplePU("#FFFFFF", this, "imageBackgroundColor");
-    this.__mainImage = new SynchedPropertyObjectOneWayPU(t.mainImage, this, "mainImage");
-    this.__primaryText = new SynchedPropertySimpleOneWayPU(t.primaryText, this, "primaryText");
-    this.secondaryText = "私人订制新歌精选站，为你推荐专属优质新歌;为你推荐专属优质新歌";
-    this.tertiaryText = "每日更新";
-    this.setInitiallyProvidedValue(t)
-  }
-
-  setInitiallyProvidedValue(e) {
-    void 0 !== e.container && (this.container = e.container);
-    void 0 !== e.sizeValue && (this.sizeValue = e.sizeValue);
-    void 0 !== e.areaWidth && (this.areaWidth = e.areaWidth);
-    void 0 !== e.imageBackgroundColor && (this.imageBackgroundColor = e.imageBackgroundColor);
-    void 0 !== e.mainImage ? this.__mainImage.set(e.mainImage) : this.__mainImage.set({
-      id: -1,
-      type: 2e4,
-      params: ["app.media.music"],
-      bundleName: "",
-      moduleName: ""
-    });
-    void 0 !== e.primaryText ? this.__primaryText.set(e.primaryText) : this.__primaryText.set("新歌推荐");
-    void 0 !== e.secondaryText && (this.secondaryText = e.secondaryText);
-    void 0 !== e.tertiaryText && (this.tertiaryText = e.tertiaryText)
-  }
-
-  updateStateVars(e) {
-    this.__mainImage.reset(e.mainImage);
-    this.__primaryText.reset(e.primaryText)
-  }
-
-  purgeVariableDependenciesOnElmtId(e) {
-    this.__sizeValue.purgeDependencyOnElmtId(e);
-    this.__areaWidth.purgeDependencyOnElmtId(e);
-    this.__imageBackgroundColor.purgeDependencyOnElmtId(e);
-    this.__mainImage.purgeDependencyOnElmtId(e);
-    this.__primaryText.purgeDependencyOnElmtId(e)
-  }
-
-  aboutToBeDeleted() {
-    this.__sizeValue.aboutToBeDeleted();
-    this.__areaWidth.aboutToBeDeleted();
-    this.__imageBackgroundColor.aboutToBeDeleted();
-    this.__mainImage.aboutToBeDeleted();
-    this.__primaryText.aboutToBeDeleted();
-    SubscriberManager.Get().delete(this.id__());
-    this.aboutToBeDeletedInternal()
-  }
-
-  get sizeValue() {
-    return this.__sizeValue.get()
-  }
-
-  set sizeValue(e) {
-    this.__sizeValue.set(e)
-  }
-
-  get areaWidth() {
-    return this.__areaWidth.get()
-  }
-
-  set areaWidth(e) {
-    this.__areaWidth.set(e)
-  }
-
-  get imageBackgroundColor() {
-    return this.__imageBackgroundColor.get()
-  }
-
-  set imageBackgroundColor(e) {
-    this.__imageBackgroundColor.set(e)
-  }
-
-  get mainImage() {
-    return this.__mainImage.get()
-  }
-
-  set mainImage(e) {
-    this.__mainImage.set(e)
-  }
-
-  get primaryText() {
-    return this.__primaryText.get()
-  }
-
-  set primaryText(e) {
-    this.__primaryText.set(e)
-  }
-
-  initialRender() {
-    this.observeComponentCreation(((e, t) => {
-      ViewStackProcessor.StartGetAccessRecordingFor(e);
-      Column.create();
-      Column.onAreaChange(((e, t) => {
-        console.info(`Ace: on area change, oldValue is ${JSON.stringify(e)} value is ${JSON.stringify(t)}`);
-        this.sizeValue = JSON.stringify(t);
-        this.areaWidth = parseInt(t.width.toString(), 0);
-        console.info("pingAce: on area change, oldValue is" + this.areaWidth);
-        console.info("pingAce: on area change, oldValue is" + parseInt(t.height.toString(), 0))
-      }));
-      t || Column.pop();
-      ViewStackProcessor.StopGetAccessRecording()
-    }));
-    this.observeComponentCreation(((e, t) => {
-      ViewStackProcessor.StartGetAccessRecordingFor(e);
-      If.create();
-      this.areaWidth < 600 ? this.ifElseBranchUpdateFunction(0, (() => {
-        this.observeComponentCreation(((e, t) => {
-          ViewStackProcessor.StartGetAccessRecordingFor(e);
-          GridRow.create({
-            columns: 4,
-            breakpoints: { reference: BreakpointsReference.WindowSize },
-            direction: GridRowDirection.Row
-          });
-          t || GridRow.pop();
-          ViewStackProcessor.StopGetAccessRecording()
-        }));
-        this.observeComponentCreation(((e, t) => {
-          ViewStackProcessor.StartGetAccessRecordingFor(e);
-          GridCol.create({ span: { xs: 4, sm: 4, md: 4, lg: 4 } });
-          t || GridCol.pop();
-          ViewStackProcessor.StopGetAccessRecording()
-        }));
-        this.observeComponentCreation(((e, t) => {
-          ViewStackProcessor.StartGetAccessRecordingFor(e);
-          Column.create();
-          t || Column.pop();
-          ViewStackProcessor.StopGetAccessRecording()
-        }));
-        this.observeComponentCreation(((e, t) => {
-          ViewStackProcessor.StartGetAccessRecordingFor(e);
-          Stack.create({ alignContent: Alignment.Bottom });
-          Stack.height("34%");
-          Stack.width("100%");
-          t || Stack.pop();
-          ViewStackProcessor.StopGetAccessRecording()
-        }));
-        this.observeComponentCreation(((e, t) => {
-          ViewStackProcessor.StartGetAccessRecordingFor(e);
-          Image.create(this.mainImage);
-          t || Image.pop();
-          ViewStackProcessor.StopGetAccessRecording()
-        }));
-        this.observeComponentCreation(((e, t) => {
-          ViewStackProcessor.StartGetAccessRecordingFor(e);
-          Column.create();
-          Column.alignItems(HorizontalAlign.Center);
-          Column.margin({
-            left: {
-              id: -1,
-              type: 10002,
-              params: ["sys.float.ohos_id_max_padding_start"],
-              bundleName: "",
-              moduleName: ""
-            },
-            right: {
-              id: -1,
-              type: 10002,
-              params: ["sys.float.ohos_id_max_padding_end"],
-              bundleName: "",
-              moduleName: ""
-            }
-          });
-          t || Column.pop();
-          ViewStackProcessor.StopGetAccessRecording()
-        }));
-        this.observeComponentCreation(((e, t) => {
-          ViewStackProcessor.StartGetAccessRecordingFor(e);
-          Text.create(this.primaryText);
-          Text.textAlign(TextAlign.Center);
-          Text.fontSize({
-            id: -1,
-            type: 10002,
-            params: ["sys.float.ohos_id_text_size_headline7"],
-            bundleName: "",
-            moduleName: ""
-          });
-          Text.fontColor({
-            id: -1,
-            type: 10001,
-            params: ["sys.color.ohos_id_color_text_primary"],
-            bundleName: "",
-            moduleName: ""
-          });
-          t || Text.pop();
-          ViewStackProcessor.StopGetAccessRecording()
-        }));
-        Text.pop();
-        this.observeComponentCreation(((e, t) => {
-          ViewStackProcessor.StartGetAccessRecordingFor(e);
-          Text.create(this.secondaryText);
-          Text.textAlign(TextAlign.Center);
-          Text.fontSize({
-            id: -1,
-            type: 10002,
-            params: ["sys.float.ohos_id_text_size_body2"],
-            bundleName: "",
-            moduleName: ""
-          });
-          Text.fontColor({
-            id: -1,
-            type: 10001,
-            params: ["sys.color.ohos_id_color_text_primary"],
-            bundleName: "",
-            moduleName: ""
-          });
-          Text.margin({ top: 4, bottom: 8 });
-          t || Text.pop();
-          ViewStackProcessor.StopGetAccessRecording()
-        }));
-        Text.pop();
-        this.observeComponentCreation(((e, t) => {
-          ViewStackProcessor.StartGetAccessRecordingFor(e);
-          Text.create(this.tertiaryText);
-          Text.textAlign(TextAlign.Center);
-          Text.fontSize({
-            id: -1,
-            type: 10002,
-            params: ["sys.float.ohos_id_text_size_caption"],
-            bundleName: "",
-            moduleName: ""
-          });
-          Text.fontColor({
-            id: -1,
-            type: 10001,
-            params: ["sys.color.ohos_id_color_text_secondary"],
-            bundleName: "",
-            moduleName: ""
-          });
-          Text.margin({ bottom: 24 });
-          t || Text.pop();
-          ViewStackProcessor.StopGetAccessRecording()
-        }));
-        Text.pop();
-        Column.pop();
-        Stack.pop();
-        this.observeComponentCreation(((e, t) => {
-          ViewStackProcessor.StartGetAccessRecordingFor(e);
-          Column.create();
-          Column.height("66%");
-          Column.width("100%");
-          t || Column.pop();
-          ViewStackProcessor.StopGetAccessRecording()
-        }));
-        this.container.bind(this)();
-        Column.pop();
-        Column.pop();
-        GridCol.pop();
-        GridRow.pop()
-      })) : 600 < this.areaWidth && this.areaWidth < 840 ? this.ifElseBranchUpdateFunction(1, (() => {
-        this.observeComponentCreation(((e, t) => {
-          ViewStackProcessor.StartGetAccessRecordingFor(e);
-          GridRow.create({
-            columns: 8,
-            breakpoints: { reference: BreakpointsReference.WindowSize },
-            direction: GridRowDirection.Row
-          });
-          t || GridRow.pop();
-          ViewStackProcessor.StopGetAccessRecording()
-        }));
-        this.observeComponentCreation(((e, t) => {
-          ViewStackProcessor.StartGetAccessRecordingFor(e);
-          GridCol.create({ span: { xs: 8, sm: 8, md: 8, lg: 8 } });
-          t || GridCol.pop();
-          ViewStackProcessor.StopGetAccessRecording()
-        }));
-        this.observeComponentCreation(((e, t) => {
-          ViewStackProcessor.StartGetAccessRecordingFor(e);
-          Column.create();
-          t || Column.pop();
-          ViewStackProcessor.StopGetAccessRecording()
-        }));
-        this.observeComponentCreation(((e, t) => {
-          ViewStackProcessor.StartGetAccessRecordingFor(e);
-          Row.create();
-          Row.backgroundColor(this.imageBackgroundColor);
-          Row.height("34%");
-          t || Row.pop();
-          ViewStackProcessor.StopGetAccessRecording()
-        }));
-        this.observeComponentCreation(((e, t) => {
-          ViewStackProcessor.StartGetAccessRecordingFor(e);
-          Image.create(this.mainImage);
-          Image.margin({ left: 96, right: 36 });
-          Image.height("60%");
-          Image.width("20%");
-          t || Image.pop();
-          ViewStackProcessor.StopGetAccessRecording()
-        }));
-        this.observeComponentCreation(((e, t) => {
-          ViewStackProcessor.StartGetAccessRecordingFor(e);
-          Column.create();
-          Column.alignItems(HorizontalAlign.Start);
-          Column.margin({ right: 96 });
-          t || Column.pop();
-          ViewStackProcessor.StopGetAccessRecording()
-        }));
-        this.observeComponentCreation(((e, t) => {
-          ViewStackProcessor.StartGetAccessRecordingFor(e);
-          Text.create(this.primaryText);
-          Text.fontSize({
-            id: -1,
-            type: 10002,
-            params: ["sys.float.ohos_id_text_size_headline7"],
-            bundleName: "",
-            moduleName: ""
-          });
-          Text.fontColor({
-            id: -1,
-            type: 10001,
-            params: ["sys.color.ohos_id_color_text_primary"],
-            bundleName: "",
-            moduleName: ""
-          });
-          t || Text.pop();
-          ViewStackProcessor.StopGetAccessRecording()
-        }));
-        Text.pop();
-        this.observeComponentCreation(((e, t) => {
-          ViewStackProcessor.StartGetAccessRecordingFor(e);
-          Text.create(this.secondaryText);
-          Text.fontSize({
-            id: -1,
-            type: 10002,
-            params: ["sys.float.ohos_id_text_size_body2"],
-            bundleName: "",
-            moduleName: ""
-          });
-          Text.fontColor({
-            id: -1,
-            type: 10001,
-            params: ["sys.color.ohos_id_color_text_primary"],
-            bundleName: "",
-            moduleName: ""
-          });
-          Text.margin({ top: 4, bottom: 8 });
-          t || Text.pop();
-          ViewStackProcessor.StopGetAccessRecording()
-        }));
-        Text.pop();
-        this.observeComponentCreation(((e, t) => {
-          ViewStackProcessor.StartGetAccessRecordingFor(e);
-          Text.create(this.tertiaryText);
-          Text.fontSize({
-            id: -1,
-            type: 10002,
-            params: ["sys.float.ohos_id_text_size_caption"],
-            bundleName: "",
-            moduleName: ""
-          });
-          Text.fontColor({
-            id: -1,
-            type: 10001,
-            params: ["sys.color.ohos_id_color_text_secondary"],
-            bundleName: "",
-            moduleName: ""
-          });
-          t || Text.pop();
-          ViewStackProcessor.StopGetAccessRecording()
-        }));
-        Text.pop();
-        Column.pop();
-        Row.pop();
-        this.observeComponentCreation(((e, t) => {
-          ViewStackProcessor.StartGetAccessRecordingFor(e);
-          Column.create();
-          Column.height("66%");
-          t || Column.pop();
-          ViewStackProcessor.StopGetAccessRecording()
-        }));
-        this.container.bind(this)();
-        Column.pop();
-        Column.pop();
-        GridCol.pop();
-        GridRow.pop()
-      })) : this.areaWidth > 840 && this.ifElseBranchUpdateFunction(2, (() => {
-        this.observeComponentCreation(((e, t) => {
-          ViewStackProcessor.StartGetAccessRecordingFor(e);
-          GridRow.create({
-            columns: 12,
-            breakpoints: { reference: BreakpointsReference.WindowSize },
-            direction: GridRowDirection.Row
-          });
-          t || GridRow.pop();
-          ViewStackProcessor.StopGetAccessRecording()
-        }));
-        this.observeComponentCreation(((e, t) => {
-          ViewStackProcessor.StartGetAccessRecordingFor(e);
-          GridCol.create({ span: { xs: 4, sm: 4, md: 4, lg: 4 } });
-          GridCol.height("100%");
-          t || GridCol.pop();
-          ViewStackProcessor.StopGetAccessRecording()
-        }));
-        this.observeComponentCreation(((e, t) => {
-          ViewStackProcessor.StartGetAccessRecordingFor(e);
-          Column.create();
-          Column.height("100%");
-          Column.backgroundColor(this.imageBackgroundColor);
-          Column.justifyContent(FlexAlign.Center);
-          Column.alignItems(HorizontalAlign.Center);
-          t || Column.pop();
-          ViewStackProcessor.StopGetAccessRecording()
-        }));
-        this.observeComponentCreation(((e, t) => {
-          ViewStackProcessor.StartGetAccessRecordingFor(e);
-          Image.create(this.mainImage);
-          Image.height("17%");
-          Image.width("34%");
-          Image.margin({ bottom: 36 });
-          t || Image.pop();
-          ViewStackProcessor.StopGetAccessRecording()
-        }));
-        this.observeComponentCreation(((e, t) => {
-          ViewStackProcessor.StartGetAccessRecordingFor(e);
-          Text.create(this.primaryText);
-          Text.textAlign(TextAlign.Center);
-          Text.fontSize({
-            id: -1,
-            type: 10002,
-            params: ["sys.float.ohos_id_text_size_headline7"],
-            bundleName: "",
-            moduleName: ""
-          });
-          Text.fontColor({
-            id: -1,
-            type: 10001,
-            params: ["sys.color.ohos_id_color_text_primary"],
-            bundleName: "",
-            moduleName: ""
-          });
-          Text.margin({ left: 48, right: 48 });
-          t || Text.pop();
-          ViewStackProcessor.StopGetAccessRecording()
-        }));
-        Text.pop();
-        this.observeComponentCreation(((e, t) => {
-          ViewStackProcessor.StartGetAccessRecordingFor(e);
-          Text.create(this.secondaryText);
-          Text.textAlign(TextAlign.Center);
-          Text.fontSize({
-            id: -1,
-            type: 10002,
-            params: ["sys.float.ohos_id_text_size_body1"],
-            bundleName: "",
-            moduleName: ""
-          });
-          Text.fontColor({
-            id: -1,
-            type: 10001,
-            params: ["sys.color.ohos_id_color_text_primary"],
-            bundleName: "",
-            moduleName: ""
-          });
-          Text.margin({ top: 4, bottom: 8, left: 48, right: 48 });
-          t || Text.pop();
-          ViewStackProcessor.StopGetAccessRecording()
-        }));
-        Text.pop();
-        this.observeComponentCreation(((e, t) => {
-          ViewStackProcessor.StartGetAccessRecordingFor(e);
-          Text.create(this.tertiaryText);
-          Text.textAlign(TextAlign.Center);
-          Text.fontSize({
-            id: -1,
-            type: 10002,
-            params: ["sys.float.ohos_id_text_size_body2"],
-            bundleName: "",
-            moduleName: ""
-          });
-          Text.fontColor({
-            id: -1,
-            type: 10001,
-            params: ["sys.color.ohos_id_color_text_secondary"],
-            bundleName: "",
-            moduleName: ""
-          });
-          Text.margin({ bottom: 24, left: 48, right: 48 });
-          t || Text.pop();
-          ViewStackProcessor.StopGetAccessRecording()
-        }));
-        Text.pop();
-        Column.pop();
-        GridCol.pop();
-        this.observeComponentCreation(((e, t) => {
-          ViewStackProcessor.StartGetAccessRecordingFor(e);
-          GridCol.create({ span: { xs: 8, sm: 8, md: 8, lg: 8 } });
-          t || GridCol.pop();
-          ViewStackProcessor.StopGetAccessRecording()
-        }));
-        this.container.bind(this)();
-        GridCol.pop();
-        GridRow.pop()
-      }));
-      t || If.pop();
-      ViewStackProcessor.StopGetAccessRecording()
-    }));
-    If.pop();
-    Column.pop()
-  }
-
-  rerender() {
-    this.updateDirtyElements()
-  }
-}

interface/subheader/BUILD.gn

@@ -1,46 +0,0 @@
-# Copyright (c) 2023-2023 Huawei Device Co., Ltd.
-# Licensed under the Apache License, Version 2.0 (the "License");
-# you may not use this file except in compliance with the License.
-# You may obtain a copy of the License at
-#
-#     http://www.apache.org/licenses/LICENSE-2.0
-#
-# Unless required by applicable law or agreed to in writing, software
-# distributed under the License is distributed on an "AS IS" BASIS,
-# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-# See the License for the specific language governing permissions and
-# limitations under the License.
-
-import("//build/ohos.gni")
-import("//foundation/arkui/ace_engine/ace_config.gni")
-import("//arkcompiler/ets_frontend/es2panda/es2abc_config.gni")
-
-es2abc_gen_abc("gen_subheader_abc") {
-  src_js = rebase_path("subheader.js")
-  dst_file = rebase_path(target_out_dir + "/subheader.abc")
-  in_puts = [ "subheader.js" ]
-  out_puts = [ target_out_dir + "/subheader.abc" ]
-  extra_args = [ "--module" ]
-}
-
-gen_js_obj("subheader_abc") {
-  input = get_label_info(":gen_subheader_abc", "target_out_dir") + "/subheader.abc"
-  output = target_out_dir + "/subheader_abc.o"
-  dep = ":gen_subheader_abc"
-}
-
-ohos_shared_library("subheader") {
-  sources = [ "subheader.cpp" ]
-
-  deps = [ ":subheader_abc" ]
-
-  external_deps = [
-    "hilog:libhilog",
-    "napi:ace_napi",
-  ]
-
-  subsystem_name = "arkui"
-  part_name = "advanced_ui_component"
-
-  relative_install_dir = "module/arkui/advanced"
-}

interface/swiperefresher/BUILD.gn

@@ -1,46 +0,0 @@
-# Copyright (c) 2023-2023 Huawei Device Co., Ltd.
-# Licensed under the Apache License, Version 2.0 (the "License");
-# you may not use this file except in compliance with the License.
-# You may obtain a copy of the License at
-#
-#     http://www.apache.org/licenses/LICENSE-2.0
-#
-# Unless required by applicable law or agreed to in writing, software
-# distributed under the License is distributed on an "AS IS" BASIS,
-# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-# See the License for the specific language governing permissions and
-# limitations under the License.
-
-import("//build/ohos.gni")
-import("//foundation/arkui/ace_engine/ace_config.gni")
-import("//arkcompiler/ets_frontend/es2panda/es2abc_config.gni")
-
-es2abc_gen_abc("gen_swiperefresher_abc") {
-  src_js = rebase_path("swiperefresher.js")
-  dst_file = rebase_path(target_out_dir + "/swiperefresher.abc")
-  in_puts = [ "swiperefresher.js" ]
-  out_puts = [ target_out_dir + "/swiperefresher.abc" ]
-  extra_args = [ "--module" ]
-}
-
-gen_js_obj("swiperefresher_abc") {
-  input = get_label_info(":gen_swiperefresher_abc", "target_out_dir") + "/swiperefresher.abc"
-  output = target_out_dir + "/swiperefresher_abc.o"
-  dep = ":gen_swiperefresher_abc"
-}
-
-ohos_shared_library("swiperefresher") {
-  sources = [ "swiperefresher.cpp" ]
-
-  deps = [ ":swiperefresher_abc" ]
-
-  external_deps = [
-    "hilog:libhilog",
-    "napi:ace_napi",
-  ]
-
-  subsystem_name = "arkui"
-  part_name = "advanced_ui_component"
-
-  relative_install_dir = "module/arkui/advanced"
-}

interface/swiperefresher/swiperefresher.cpp

@@ -1,49 +0,0 @@
-/*
- * Copyright (c) 2023-2023 Huawei Device Co., Ltd.
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-#include "native_engine/native_engine.h"
-
-#include "napi/native_api.h"
-#include "napi/native_node_api.h"
-
-extern const char _binary_swiperefresher_abc_start[];
-extern const char _binary_swiperefresher_abc_end[];
-
-// Napi get abc code function
-extern "C" __attribute__((visibility("default")))
-void NAPI_arkui_advanced_swiperefresher_GetABCCode(const char **buf, int *buflen)
-    {
-    if (buf != nullptr) {
-        *buf = _binary_swiperefresher_abc_start;
-        }
-        if (buflen != nullptr) {
-            *buflen = _binary_swiperefresher_abc_end - _binary_swiperefresher_abc_start;
-        }
-    }
-
-
-static napi_module swiperefresherModule = {
-    .nm_version = 1,
-    .nm_flags = 0,
-    .nm_filename = nullptr,
-    .nm_modname = "arkui.advanced.SwipeRefresher",
-    .nm_priv = ((void*)0),
-    .reserved = { 0 },
-};
-
-extern "C" __attribute__((constructor)) void swiperefresherRegisterModule(void)
-{
-    napi_module_register(&swiperefresherModule);
-}

interface/swiperefresher/swiperefresher.js

@@ -1,119 +0,0 @@
-/*
- * Copyright (c) 2023-2023 Huawei Device Co., Ltd.
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-const LOADINGPROGRESS_SIZE = 24;
-const DEFAULT_MARGIN = 16;
-const ITEM_SPACE = 4;
-
-export class SwipeRefresher extends ViewPU {
-    constructor(e, t, o, s = -1) {
-        super(e, o, s);
-        this.__content = new SynchedPropertySimpleOneWayPU(t.content, this, "content");
-        this.__isLoading = new SynchedPropertySimpleOneWayPU(t.isLoading, this, "isLoading");
-        this.setInitiallyProvidedValue(t)
-    }
-
-    setInitiallyProvidedValue(e) {
-        void 0 !== e.content ? this.__content.set(e.content) : this.__content.set(null);
-        void 0 !== e.isLoading ? this.__isLoading.set(e.isLoading) : this.__isLoading.set(!1)
-    }
-
-    updateStateVars(e) {
-        this.__content.reset(e.content);
-        this.__isLoading.reset(e.isLoading)
-    }
-
-    purgeVariableDependenciesOnElmtId(e) {
-        this.__content.purgeDependencyOnElmtId(e);
-        this.__isLoading.purgeDependencyOnElmtId(e)
-    }
-
-    aboutToBeDeleted() {
-        this.__content.aboutToBeDeleted();
-        this.__isLoading.aboutToBeDeleted();
-        SubscriberManager.Get().delete(this.id__());
-        this.aboutToBeDeletedInternal()
-    }
-
-    get content() {
-        return this.__content.get()
-    }
-
-    set content(e) {
-        this.__content.set(e)
-    }
-
-    get isLoading() {
-        return this.__isLoading.get()
-    }
-
-    set isLoading(e) {
-        this.__isLoading.set(e)
-    }
-
-    initialRender() {
-        this.observeComponentCreation(((e, t) => {
-            ViewStackProcessor.StartGetAccessRecordingFor(e);
-            Flex.create({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center });
-            Flex.margin({ top: 16, bottom: 16 });
-            t || Flex.pop();
-            ViewStackProcessor.StopGetAccessRecording()
-        }));
-        this.observeComponentCreation(((e, t) => {
-            ViewStackProcessor.StartGetAccessRecordingFor(e);
-            If.create();
-            this.isLoading ? this.ifElseBranchUpdateFunction(0, (() => {
-                this.observeComponentCreation(((e, t) => {
-                    ViewStackProcessor.StartGetAccessRecordingFor(e);
-                    LoadingProgress.create();
-                    LoadingProgress.height(24);
-                    LoadingProgress.width(24);
-                    LoadingProgress.margin({ right: 4 });
-                    t || LoadingProgress.pop();
-                    ViewStackProcessor.StopGetAccessRecording()
-                }))
-            })) : If.branchId(1);
-            t || If.pop();
-            ViewStackProcessor.StopGetAccessRecording()
-        }));
-        If.pop();
-        this.observeComponentCreation(((e, t) => {
-            ViewStackProcessor.StartGetAccessRecordingFor(e);
-            Text.create(this.content);
-            Text.fontColor({
-                id: -1,
-                type: 10001,
-                params: ["sys.color.ohos_id_color_text_secondary"],
-                bundleName: "",
-                moduleName: ""
-            });
-            Text.fontSize({
-                id: -1,
-                type: 10002,
-                params: ["sys.float.ohos_id_text_size_body2"],
-                bundleName: "",
-                moduleName: ""
-            });
-            t || Text.pop();
-            ViewStackProcessor.StopGetAccessRecording()
-        }));
-        Text.pop();
-        Flex.pop()
-    }
-
-    rerender() {
-        this.updateDirtyElements()
-    }
-}

interface/tabtitlebar/BUILD.gn

@@ -1,46 +0,0 @@
-# Copyright (c) 2023-2023 Huawei Device Co., Ltd.
-# Licensed under the Apache License, Version 2.0 (the "License");
-# you may not use this file except in compliance with the License.
-# You may obtain a copy of the License at
-#
-#     http://www.apache.org/licenses/LICENSE-2.0
-#
-# Unless required by applicable law or agreed to in writing, software
-# distributed under the License is distributed on an "AS IS" BASIS,
-# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-# See the License for the specific language governing permissions and
-# limitations under the License.
-
-import("//build/ohos.gni")
-import("//foundation/arkui/ace_engine/ace_config.gni")
-import("//arkcompiler/ets_frontend/es2panda/es2abc_config.gni")
-
-es2abc_gen_abc("gen_tabtitlebar_abc") {
-  src_js = rebase_path("tabtitlebar.js")
-  dst_file = rebase_path(target_out_dir + "/tabtitlebar.abc")
-  in_puts = [ "tabtitlebar.js" ]
-  out_puts = [ target_out_dir + "/tabtitlebar.abc" ]
-  extra_args = [ "--module" ]
-}
-
-gen_js_obj("tabtitlebar_abc") {
-  input = get_label_info(":gen_tabtitlebar_abc", "target_out_dir") + "/tabtitlebar.abc"
-  output = target_out_dir + "/tabtitlebar_abc.o"
-  dep = ":gen_tabtitlebar_abc"
-}
-
-ohos_shared_library("tabtitlebar") {
-  sources = [ "tabtitlebar.cpp" ]
-
-  deps = [ ":tabtitlebar_abc" ]
-
-  external_deps = [
-    "hilog:libhilog",
-    "napi:ace_napi",
-  ]
-
-  subsystem_name = "arkui"
-  part_name = "advanced_ui_component"
-
-  relative_install_dir = "module/arkui/advanced"
-}

interface/tabtitlebar/tabtitlebar.cpp

@@ -1,49 +0,0 @@
-/*
- * Copyright (c) 2023-2023 Huawei Device Co., Ltd.
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-#include "native_engine/native_engine.h"
-
-#include "napi/native_api.h"
-#include "napi/native_node_api.h"
-
-extern const char _binary_tabtitlebar_abc_start[];
-extern const char _binary_tabtitlebar_abc_end[];
-
-// Napi get abc code function
-extern "C" __attribute__((visibility("default")))
-void NAPI_arkui_advanced_TabTitleBar_GetABCCode(const char **buf, int *buflen)
-    {
-    if (buf != nullptr) {
-        *buf = _binary_tabtitlebar_abc_start;
-        }
-        if (buflen != nullptr) {
-            *buflen = _binary_tabtitlebar_abc_end - _binary_tabtitlebar_abc_start;
-        }
-    }
-
-
-static napi_module tabtitlebarModule = {
-    .nm_version = 1,
-    .nm_flags = 0,
-    .nm_filename = nullptr,
-    .nm_modname = "arkui.advanced.TabTitleBar",
-    .nm_priv = ((void*)0),
-    .reserved = { 0 },
-};
-
-extern "C" __attribute__((constructor)) void tabtitlebarRegisterModule(void)
-{
-    napi_module_register(&tabtitlebarModule);
-}

interface/tabtitlebar/tabtitlebar.js

@@ -1,930 +0,0 @@
-/*
- * Copyright (c) 2023-2023 Huawei Device Co., Ltd.
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-var __decorate = this && this.__decorate || function(e, t, o, i) {
-  var s, r = arguments.length,
-    n = r < 3 ? t : null === i ? i = Object.getOwnPropertyDescriptor(t, o) : i;
-  if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) n = Reflect.decorate(e, t, o, i);
-  else
-    for (var c = e.length - 1; c >= 0; c--)(s = e[c]) && (n = (r < 3 ? s(n) : r > 3 ? s(t, o, n) : s(t, o)) || n);
-  return r > 3 && n && Object.defineProperty(t, o, n), n
-};
-const KeyCode = requireNapi('multimodalInput.keyCode').KeyCode;
-const PUBLIC_MORE = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMAAAADACAYAAABS3GwHAAAAIGNIUk0AAHomAACAhAAA+gAAAIDoAAB1MAAA6mAAADqYAAAXcJy6UTwAAAAEZ0FNQQAAsY58+1GTAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAAOxAAADsQBlSsOGwAABEZJREFUeNrt3D1rFFEUBuAxhmAhFlYpUohYiYWFRcAmKAhWK2pjo1iKf8BCMIKFf8BarCyMhVj4VZhGSKEg2FqJyCKWIhYWnstMINgYsh+cmfs88BICydxw7jmzu2HvNg0AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADBN+3r6dx+LXIqsRpa7FF8j48hm5Fn3Peo9mAEYRdYjJ3f582Vj7nZfUe/eDsCRyMPI2h5/fyNyI/JDT6v3Tvt7sBllE15ETkxwjeORi5G3ke/6W737MgBnI68jh6ZwrcORq5HnhkC9+zAA5YXXy8jBKV5zKXIu8jjyS7+rd+YBeNVtyrSVO9PRyBM9r94LSTfjWuTUDK9/eYIXeENUbb0zDsBi5PYc1rmj79U74wCszuih+F/ljrSi/+uud8YBGA10rayqrnfGAVgb6FpZVV3vjAOwPNC1sqq63hkHYGWga2VVdb0XKt/8Rf1fd70zDsB4jmt5u3Tl9a59AMb6v+56ZxyArYGulVXV9c44ABtzXOup/q+73hkH4N2cHio/Rj7r/7rrnXEAfkfuz2Gddb2v3ln/DfpgxneLzaY9xE3l9c46AH8iVyI/Z3Dt8nB/Xc+rd5H5QMy3yJemPVs6zY0edc9HUe/0Z4I/dQ/N5Vjd0oTXKp9QcKFpD2qj3r0YgO1NeRM507TH6/bifeR85IMeV++d+vTBWOV9JDcjt5rdv6uw3M3uRR7pa/Xu+wBsOxA53bTnTP/3UX1b3fNQ1BsAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAKqyr6d/97HIpchqZLlL8TUyjmxGnnXfo96DGYBRZD1ycpc/XzbmbvcV9e7tAByJPIys7fH3NyI3Ij/0tHrvtL8Hm1E24UXkxATXOB65GHkb+a6/1bsvA3A28jpyaArXOhy5GnluCNS7DwNQXni9jByc4jWXIucijyO/9Lt6Zx6AV92mTFu5Mx2NPNHz6r2QdDOuRU7N8PqXJ3iBN0TV1jvjACxGbs9hnTv6Xr0zDsDqjB6K/1XuSCv6v+56ZxyA0UDXyqrqemccgLWBrpVV1fXOOADLA10rq6rrnXEAVga6VlZV13uh8s1f1P911zvjAIznuJa3S1de79oHYKz/6653xgHYGuhaWVVd74wDsDHHtZ7q/7rrnXEA3s3pofJj5LP+r7veGQfgd+T+HNZZ1/vqnfXfoA9mfLfYbNpD3FRe76wD8CdyJfJzBtcuD/fX9bx6F5kPxHyLfGnas6XT3OhR93wU9U5/JvhT99BcjtUtTXit8gkFF5r2oDbq3YsB2N6UN5EzTXu8bi/eR85HPuhx9d6pTx+MVd5HcjNyq9n9uwrL3exe5JG+Vu++D8C2A5HTTXvO9H8f1bfVPQ9FvQEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgCn7C9HjBtwWfXpKAAAAAElFTkSuQmCC";
-export class TabTitleBar extends ViewPU {
-  constructor(e, t, o, i = -1) {
-    super(e, o, i);
-    this.tabItems = void 0;
-    this.menuItems = void 0;
-    this.swiperContent = void 0;
-    this.__tabWidth = new ObservedPropertySimplePU(0, this, "tabWidth");
-    this.__currentIndex = new ObservedPropertySimplePU(0, this, "currentIndex");
-    this.menuSectionWidth = 0;
-    this.scroller = new Scroller;
-    this.swiperController = new SwiperController;
-    this.settings = new RenderingContextSettings(!0);
-    this.leftContext2D = new CanvasRenderingContext2D(this.settings);
-    this.rightContext2D = new CanvasRenderingContext2D(this.settings);
-    this.setInitiallyProvidedValue(t)
-  }
-  setInitiallyProvidedValue(e) {
-    void 0 !== e.tabItems && (this.tabItems = e.tabItems);
-    void 0 !== e.menuItems && (this.menuItems = e.menuItems);
-    void 0 !== e.swiperContent && (this.swiperContent = e.swiperContent);
-    void 0 !== e.tabWidth && (this.tabWidth = e.tabWidth);
-    void 0 !== e.currentIndex && (this.currentIndex = e.currentIndex);
-    void 0 !== e.menuSectionWidth && (this.menuSectionWidth = e.menuSectionWidth);
-    void 0 !== e.scroller && (this.scroller = e.scroller);
-    void 0 !== e.swiperController && (this.swiperController = e.swiperController);
-    void 0 !== e.settings && (this.settings = e.settings);
-    void 0 !== e.leftContext2D && (this.leftContext2D = e.leftContext2D);
-    void 0 !== e.rightContext2D && (this.rightContext2D = e.rightContext2D)
-  }
-  updateStateVars(e) {}
-  purgeVariableDependenciesOnElmtId(e) {
-    this.__tabWidth.purgeDependencyOnElmtId(e);
-    this.__currentIndex.purgeDependencyOnElmtId(e)
-  }
-  aboutToBeDeleted() {
-    this.__tabWidth.aboutToBeDeleted();
-    this.__currentIndex.aboutToBeDeleted();
-    SubscriberManager.Get().delete(this.id__());
-    this.aboutToBeDeletedInternal()
-  }
-  get tabWidth() {
-    return this.__tabWidth.get()
-  }
-  set tabWidth(e) {
-    this.__tabWidth.set(e)
-  }
-  get currentIndex() {
-    return this.__currentIndex.get()
-  }
-  set currentIndex(e) {
-    this.__currentIndex.set(e)
-  }
-  GradientMask(e, t, o, i, s, r = null) {
-    this.observeComponentCreation(((e, t) => {
-      ViewStackProcessor.StartGetAccessRecordingFor(e);
-      Column.create();
-      Column.width(TabTitleBar.gradientMaskWidth);
-      Column.height(TabTitleBar.totalHeight);
-      t || Column.pop();
-      ViewStackProcessor.StopGetAccessRecording()
-    }));
-    this.observeComponentCreation(((r, n) => {
-      ViewStackProcessor.StartGetAccessRecordingFor(r);
-      Canvas.create(e);
-      Canvas.width(TabTitleBar.gradientMaskWidth);
-      Canvas.height(TabTitleBar.totalHeight);
-      Canvas.onReady((() => {
-        var r = e.createLinearGradient(t, o, i, s);
-        r.addColorStop(0, "#ffffffff");
-        r.addColorStop(1, "#00ffffff");
-        e.fillStyle = r;
-        e.fillRect(0, 0, TabTitleBar.gradientMaskWidth, TabTitleBar.totalHeight)
-      }));
-      n || Canvas.pop();
-      ViewStackProcessor.StopGetAccessRecording()
-    }));
-    Canvas.pop();
-    Column.pop()
-  }
-  initialRender() {
-    this.observeComponentCreation(((e, t) => {
-      ViewStackProcessor.StartGetAccessRecordingFor(e);
-      Column.create();
-      t || Column.pop();
-      ViewStackProcessor.StopGetAccessRecording()
-    }));
-    this.observeComponentCreation(((e, t) => {
-      ViewStackProcessor.StartGetAccessRecordingFor(e);
-      Flex.create({
-        justifyContent: FlexAlign.SpaceBetween,
-        alignItems: ItemAlign.Stretch
-      });
-      Flex.backgroundColor({
-        id: -1,
-        type: 10001,
-        params: ["sys.color.ohos_id_color_background"],
-        bundleName: "",
-        moduleName: ""
-      });
-      Flex.margin({
-        right: {
-          id: -1,
-          type: 10002,
-          params: ["sys.float.ohos_id_max_padding_end"],
-          bundleName: "",
-          moduleName: ""
-        }
-      });
-      Flex.onAreaChange(((e, t) => {
-        this.tabWidth = Number(t.width) - this.menuSectionWidth
-      }));
-      t || Flex.pop();
-      ViewStackProcessor.StopGetAccessRecording()
-    }));
-    this.observeComponentCreation(((e, t) => {
-      ViewStackProcessor.StartGetAccessRecordingFor(e);
-      Stack.create({
-        alignContent: Alignment.End
-      });
-      t || Stack.pop();
-      ViewStackProcessor.StopGetAccessRecording()
-    }));
-    this.observeComponentCreation(((e, t) => {
-      ViewStackProcessor.StartGetAccessRecordingFor(e);
-      Stack.create({
-        alignContent: Alignment.Start
-      });
-      t || Stack.pop();
-      ViewStackProcessor.StopGetAccessRecording()
-    }));
-    this.observeComponentCreation(((e, t) => {
-      ViewStackProcessor.StartGetAccessRecordingFor(e);
-      Column.create();
-      t || Column.pop();
-      ViewStackProcessor.StopGetAccessRecording()
-    }));
-    this.observeComponentCreation(((e, t) => {
-      ViewStackProcessor.StartGetAccessRecordingFor(e);
-      List.create({
-        initialIndex: 0,
-        scroller: this.scroller,
-        space: 0
-      });
-      List.width("100%");
-      List.height(TabTitleBar.totalHeight);
-      List.constraintSize({
-        maxWidth: this.tabWidth
-      });
-      List.edgeEffect(EdgeEffect.Spring);
-      List.listDirection(Axis.Horizontal);
-      List.scrollBar(BarState.Off);
-      t || List.pop();
-      ViewStackProcessor.StopGetAccessRecording()
-    }));
-    this.observeComponentCreation(((e, t) => {
-      ViewStackProcessor.StartGetAccessRecordingFor(e);
-      ForEach.create();
-      this.forEachUpdateFunction(e, this.tabItems, ((e, t) => {
-        const o = e;
-        {
-          const e = !0;
-          const i = (t, o) => {
-            ViewStackProcessor.StartGetAccessRecordingFor(t);
-            ListItem.create(r, e);
-            o || ListItem.pop();
-            ViewStackProcessor.StopGetAccessRecording()
-          };
-          const s = () => {
-            this.observeComponentCreation(i);
-            this.observeComponentCreation(((e, i) => {
-              ViewStackProcessor.StartGetAccessRecordingFor(e);
-              i ? ViewPU.create(new TabContentItem(this, {
-                item: o,
-                index: t,
-                maxIndex: this.tabItems.length - 1,
-                currentIndex: this.currentIndex,
-                onCustomClick: () => this.currentIndex = t
-              }, void 0, e)) : this.updateStateVarsOfChildByElmtId(e, {
-                currentIndex: this.currentIndex
-              });
-              ViewStackProcessor.StopGetAccessRecording()
-            }));
-            ListItem.pop()
-          };
-          const r = (e, s) => {
-            i(e, s);
-            this.updateFuncByElmtId.set(e, i);
-            this.observeComponentCreation(((e, i) => {
-              ViewStackProcessor.StartGetAccessRecordingFor(e);
-              i ? ViewPU.create(new TabContentItem(this, {
-                item: o,
-                index: t,
-                maxIndex: this.tabItems.length - 1,
-                currentIndex: this.currentIndex,
-                onCustomClick: () => this.currentIndex = t
-              }, void 0, e)) : this.updateStateVarsOfChildByElmtId(e, {
-                currentIndex: this.currentIndex
-              });
-              ViewStackProcessor.StopGetAccessRecording()
-            }));
-            ListItem.pop()
-          };
-          e ? (() => {
-            this.observeComponentCreation(i);
-            ListItem.pop()
-          })() : s()
-        }
-      }), void 0, !0, !1);
-      t || ForEach.pop();
-      ViewStackProcessor.StopGetAccessRecording()
-    }));
-    ForEach.pop();
-    List.pop();
-    Column.pop();
-    this.GradientMask.bind(this)(this.leftContext2D, 0, TabTitleBar.totalHeight / 2, TabTitleBar.gradientMaskWidth, TabTitleBar.totalHeight / 2);
-    Stack.pop();
-    this.GradientMask.bind(this)(this.rightContext2D, TabTitleBar.gradientMaskWidth, TabTitleBar.totalHeight / 2, 0, TabTitleBar.totalHeight / 2);
-    Stack.pop();
-    this.observeComponentCreation(((e, t) => {
-      ViewStackProcessor.StartGetAccessRecordingFor(e);
-      If.create();
-      void 0 !== this.menuItems && this.menuItems.length > 0 ? this.ifElseBranchUpdateFunction(0, (() => {
-        this.observeComponentCreation(((e, t) => {
-          ViewStackProcessor.StartGetAccessRecordingFor(e);
-          __Common__.create();
-          __Common__.height(TabTitleBar.totalHeight);
-          __Common__.onAreaChange(((e, t) => {
-            this.menuSectionWidth = Number(t.width)
-          }));
-          t || __Common__.pop();
-          ViewStackProcessor.StopGetAccessRecording()
-        }));
-        this.observeComponentCreation(((e, t) => {
-          ViewStackProcessor.StartGetAccessRecordingFor(e);
-          t ? ViewPU.create(new CollapsibleMenuSection(this, {
-            menuItems: this.menuItems
-          }, void 0, e)) : this.updateStateVarsOfChildByElmtId(e, {});
-          ViewStackProcessor.StopGetAccessRecording()
-        }));
-        __Common__.pop()
-      })) : If.branchId(1);
-      t || If.pop();
-      ViewStackProcessor.StopGetAccessRecording()
-    }));
-    If.pop();
-    Flex.pop();
-    this.observeComponentCreation(((e, t) => {
-      ViewStackProcessor.StartGetAccessRecordingFor(e);
-      Column.create();
-      t || Column.pop();
-      ViewStackProcessor.StopGetAccessRecording()
-    }));
-    this.observeComponentCreation(((e, t) => {
-      ViewStackProcessor.StartGetAccessRecordingFor(e);
-      Swiper.create(this.swiperController);
-      Swiper.index(this.currentIndex);
-      Swiper.itemSpace(0);
-      Swiper.indicator(!1);
-      Swiper.width("100%");
-      Swiper.height("100%");
-      Swiper.curve(Curve.Friction);
-      Swiper.onChange((e => {
-        this.currentIndex = e;
-        this.scroller.scrollToIndex(this.currentIndex);
-        this.scroller.scrollBy(TabTitleBar.correctionOffset, 0)
-      }));
-      Swiper.onAppear((() => {
-        this.scroller.scrollToIndex(this.currentIndex);
-        this.scroller.scrollBy(TabTitleBar.correctionOffset, 0)
-      }));
-      t || Swiper.pop();
-      ViewStackProcessor.StopGetAccessRecording()
-    }));
-    this.swiperContent.bind(this)();
-    Swiper.pop();
-    Column.pop();
-    Column.pop()
-  }
-  rerender() {
-    this.updateDirtyElements()
-  }
-}
-TabTitleBar.totalHeight = 56;
-TabTitleBar.correctionOffset = -40;
-TabTitleBar.gradientMaskWidth = 24;
-__decorate([], TabTitleBar.prototype, "GradientMask", null);
-class CollapsibleMenuSection extends ViewPU {
-  constructor(e, t, o, i = -1) {
-    super(e, o, i);
-    this.menuItems = void 0;
-    this.__isPopupShown = new ObservedPropertySimplePU(!1, this, "isPopupShown");
-    this.__isMoreIconOnFocus = new ObservedPropertySimplePU(!1, this, "isMoreIconOnFocus");
-    this.__isMoreIconOnHover = new ObservedPropertySimplePU(!1, this, "isMoreIconOnHover");
-    this.__isMoreIconOnClick = new ObservedPropertySimplePU(!1, this, "isMoreIconOnClick");
-    this.setInitiallyProvidedValue(t)
-  }
-  setInitiallyProvidedValue(e) {
-    void 0 !== e.menuItems && (this.menuItems = e.menuItems);
-    void 0 !== e.isPopupShown && (this.isPopupShown = e.isPopupShown);
-    void 0 !== e.isMoreIconOnFocus && (this.isMoreIconOnFocus = e.isMoreIconOnFocus);
-    void 0 !== e.isMoreIconOnHover && (this.isMoreIconOnHover = e.isMoreIconOnHover);
-    void 0 !== e.isMoreIconOnClick && (this.isMoreIconOnClick = e.isMoreIconOnClick)
-  }
-  updateStateVars(e) {}
-  purgeVariableDependenciesOnElmtId(e) {
-    this.__isPopupShown.purgeDependencyOnElmtId(e);
-    this.__isMoreIconOnFocus.purgeDependencyOnElmtId(e);
-    this.__isMoreIconOnHover.purgeDependencyOnElmtId(e);
-    this.__isMoreIconOnClick.purgeDependencyOnElmtId(e)
-  }
-  aboutToBeDeleted() {
-    this.__isPopupShown.aboutToBeDeleted();
-    this.__isMoreIconOnFocus.aboutToBeDeleted();
-    this.__isMoreIconOnHover.aboutToBeDeleted();
-    this.__isMoreIconOnClick.aboutToBeDeleted();
-    SubscriberManager.Get().delete(this.id__());
-    this.aboutToBeDeletedInternal()
-  }
-  get isPopupShown() {
-    return this.__isPopupShown.get()
-  }
-  set isPopupShown(e) {
-    this.__isPopupShown.set(e)
-  }
-  get isMoreIconOnFocus() {
-    return this.__isMoreIconOnFocus.get()
-  }
-  set isMoreIconOnFocus(e) {
-    this.__isMoreIconOnFocus.set(e)
-  }
-  get isMoreIconOnHover() {
-    return this.__isMoreIconOnHover.get()
-  }
-  set isMoreIconOnHover(e) {
-    this.__isMoreIconOnHover.set(e)
-  }
-  get isMoreIconOnClick() {
-    return this.__isMoreIconOnClick.get()
-  }
-  set isMoreIconOnClick(e) {
-    this.__isMoreIconOnClick.set(e)
-  }
-  getMoreIconFgColor() {
-    return this.isMoreIconOnClick ? {
-      id: -1,
-      type: 10001,
-      params: ["sys.color.ohos_id_color_titlebar_icon_pressed"],
-      bundleName: "",
-      moduleName: ""
-    } : {
-      id: -1,
-      type: 10001,
-      params: ["sys.color.ohos_id_color_titlebar_icon"],
-      bundleName: "",
-      moduleName: ""
-    }
-  }
-  getMoreIconBgColor() {
-    return this.isMoreIconOnClick ? {
-      id: -1,
-      type: 10001,
-      params: ["sys.color.ohos_id_color_click_effect"],
-      bundleName: "",
-      moduleName: ""
-    } : this.isMoreIconOnHover ? {
-      id: -1,
-      type: 10001,
-      params: ["sys.color.ohos_id_color_hover"],
-      bundleName: "",
-      moduleName: ""
-    } : Color.Transparent
-  }
-  initialRender() {
-    this.observeComponentCreation(((e, t) => {
-      ViewStackProcessor.StartGetAccessRecordingFor(e);
-      Column.create();
-      Column.height("100%");
-      Column.justifyContent(FlexAlign.Center);
-      t || Column.pop();
-      ViewStackProcessor.StopGetAccessRecording()
-    }));
-    this.observeComponentCreation(((e, t) => {
-      ViewStackProcessor.StartGetAccessRecordingFor(e);
-      Row.create();
-      t || Row.pop();
-      ViewStackProcessor.StopGetAccessRecording()
-    }));
-    this.observeComponentCreation(((e, t) => {
-      ViewStackProcessor.StartGetAccessRecordingFor(e);
-      If.create();
-      this.menuItems.length <= CollapsibleMenuSection.maxCountOfVisibleItems ? this.ifElseBranchUpdateFunction(0, (() => {
-        this.observeComponentCreation(((e, t) => {
-          ViewStackProcessor.StartGetAccessRecordingFor(e);
-          ForEach.create();
-          this.forEachUpdateFunction(e, this.menuItems, (e => {
-            const t = e;
-            this.observeComponentCreation(((e, o) => {
-              ViewStackProcessor.StartGetAccessRecordingFor(e);
-              o ? ViewPU.create(new ImageMenuItem(this, {
-                item: t
-              }, void 0, e)) : this.updateStateVarsOfChildByElmtId(e, {});
-              ViewStackProcessor.StopGetAccessRecording()
-            }))
-          }));
-          t || ForEach.pop();
-          ViewStackProcessor.StopGetAccessRecording()
-        }));
-        ForEach.pop()
-      })) : this.ifElseBranchUpdateFunction(1, (() => {
-        this.observeComponentCreation(((e, t) => {
-          ViewStackProcessor.StartGetAccessRecordingFor(e);
-          ForEach.create();
-          this.forEachUpdateFunction(e, this.menuItems.slice(0, CollapsibleMenuSection.maxCountOfVisibleItems - 1), (e => {
-            const t = e;
-            this.observeComponentCreation(((e, o) => {
-              ViewStackProcessor.StartGetAccessRecordingFor(e);
-              o ? ViewPU.create(new ImageMenuItem(this, {
-                item: t
-              }, void 0, e)) : this.updateStateVarsOfChildByElmtId(e, {});
-              ViewStackProcessor.StopGetAccessRecording()
-            }))
-          }));
-          t || ForEach.pop();
-          ViewStackProcessor.StopGetAccessRecording()
-        }));
-        ForEach.pop();
-        this.observeComponentCreation(((e, t) => {
-          ViewStackProcessor.StartGetAccessRecordingFor(e);
-          Row.create();
-          Row.width(ImageMenuItem.imageHotZoneWidth);
-          Row.height(ImageMenuItem.imageHotZoneWidth);
-          Row.borderRadius(ImageMenuItem.buttonBorderRadius);
-          Row.foregroundColor(this.getMoreIconFgColor());
-          Row.backgroundColor(this.getMoreIconBgColor());
-          Row.justifyContent(FlexAlign.Center);
-          Row.border(this.isMoreIconOnFocus ? {
-            width: ImageMenuItem.focusBorderWidth,
-            color: {
-              id: -1,
-              type: 10001,
-              params: ["sys.color.ohos_id_color_emphasize"],
-              bundleName: "",
-              moduleName: ""
-            },
-            style: BorderStyle.Solid
-          } : {
-            width: 0
-          });
-          Row.onFocus((() => this.isMoreIconOnFocus = !0));
-          Row.onBlur((() => this.isMoreIconOnFocus = !1));
-          Row.onHover((e => this.isMoreIconOnHover = e));
-          Row.onKeyEvent((e => {
-            if (e.keyCode === KeyCode.KEYCODE_ENTER || e.keyCode === KeyCode.KEYCODE_SPACE) {
-              e.type === KeyType.Down && (this.isMoreIconOnClick = !0);
-              e.type === KeyType.Up && (this.isMoreIconOnClick = !1)
-            }
-          }));
-          Row.onTouch((e => {
-            e.type === TouchType.Down && (this.isMoreIconOnClick = !0);
-            e.type === TouchType.Up && (this.isMoreIconOnClick = !1)
-          }));
-          Row.onClick((() => this.isPopupShown = !0));
-          Row.bindPopup(this.isPopupShown, {
-            builder: {
-              builder: this.popupBuilder.bind(this)
-            },
-            placement: Placement.Bottom,
-            popupColor: Color.White,
-            enableArrow: !1,
-            onStateChange: e => this.isPopupShown = e.isVisible
-          });
-          t || Row.pop();
-          ViewStackProcessor.StopGetAccessRecording()
-        }));
-        this.observeComponentCreation(((e, t) => {
-          ViewStackProcessor.StartGetAccessRecordingFor(e);
-          Image.create(PUBLIC_MORE);
-          Image.width(ImageMenuItem.imageSize);
-          Image.height(ImageMenuItem.imageSize);
-          Image.focusable(!0);
-          t || Image.pop();
-          ViewStackProcessor.StopGetAccessRecording()
-        }));
-        Row.pop()
-      }));
-      t || If.pop();
-      ViewStackProcessor.StopGetAccessRecording()
-    }));
-    If.pop();
-    Row.pop();
-    Column.pop()
-  }
-  popupBuilder(e = null) {
-    this.observeComponentCreation(((e, t) => {
-      ViewStackProcessor.StartGetAccessRecordingFor(e);
-      Column.create();
-      Column.width(ImageMenuItem.imageHotZoneWidth + CollapsibleMenuSection.focusPadding * CollapsibleMenuSection.marginsNum);
-      Column.margin({
-        top: CollapsibleMenuSection.focusPadding,
-        bottom: CollapsibleMenuSection.focusPadding
-      });
-      t || Column.pop();
-      ViewStackProcessor.StopGetAccessRecording()
-    }));
-    this.observeComponentCreation(((e, t) => {
-      ViewStackProcessor.StartGetAccessRecordingFor(e);
-      ForEach.create();
-      this.forEachUpdateFunction(e, this.menuItems.slice(CollapsibleMenuSection.maxCountOfVisibleItems - 1, this.menuItems.length), ((e, t) => {
-        const o = e;
-        this.observeComponentCreation(((e, t) => {
-          ViewStackProcessor.StartGetAccessRecordingFor(e);
-          t ? ViewPU.create(new ImageMenuItem(this, {
-            item: o
-          }, void 0, e)) : this.updateStateVarsOfChildByElmtId(e, {});
-          ViewStackProcessor.StopGetAccessRecording()
-        }))
-      }), void 0, !0, !1);
-      t || ForEach.pop();
-      ViewStackProcessor.StopGetAccessRecording()
-    }));
-    ForEach.pop();
-    Column.pop()
-  }
-  rerender() {
-    this.updateDirtyElements()
-  }
-}
-CollapsibleMenuSection.maxCountOfVisibleItems = 1;
-CollapsibleMenuSection.focusPadding = 4;
-CollapsibleMenuSection.marginsNum = 2;
-__decorate([], CollapsibleMenuSection.prototype, "popupBuilder", null);
-class TabContentItem extends ViewPU {
-  constructor(e, t, o, i = -1) {
-    super(e, o, i);
-    this.item = void 0;
-    this.index = void 0;
-    this.maxIndex = void 0;
-    this.onCustomClick = void 0;
-    this.__currentIndex = new SynchedPropertySimpleOneWayPU(t.currentIndex, this, "currentIndex");
-    this.__isOnFocus = new ObservedPropertySimplePU(!1, this, "isOnFocus");
-    this.__isOnHover = new ObservedPropertySimplePU(!1, this, "isOnHover");
-    this.__isOnClick = new ObservedPropertySimplePU(!1, this, "isOnClick");
-    this.setInitiallyProvidedValue(t)
-  }
-  setInitiallyProvidedValue(e) {
-    void 0 !== e.item && (this.item = e.item);
-    void 0 !== e.index && (this.index = e.index);
-    void 0 !== e.maxIndex && (this.maxIndex = e.maxIndex);
-    void 0 !== e.onCustomClick && (this.onCustomClick = e.onCustomClick);
-    void 0 !== e.isOnFocus && (this.isOnFocus = e.isOnFocus);
-    void 0 !== e.isOnHover && (this.isOnHover = e.isOnHover);
-    void 0 !== e.isOnClick && (this.isOnClick = e.isOnClick)
-  }
-  updateStateVars(e) {
-    this.__currentIndex.reset(e.currentIndex)
-  }
-  purgeVariableDependenciesOnElmtId(e) {
-    this.__currentIndex.purgeDependencyOnElmtId(e);
-    this.__isOnFocus.purgeDependencyOnElmtId(e);
-    this.__isOnHover.purgeDependencyOnElmtId(e);
-    this.__isOnClick.purgeDependencyOnElmtId(e)
-  }
-  aboutToBeDeleted() {
-    this.__currentIndex.aboutToBeDeleted();
-    this.__isOnFocus.aboutToBeDeleted();
-    this.__isOnHover.aboutToBeDeleted();
-    this.__isOnClick.aboutToBeDeleted();
-    SubscriberManager.Get().delete(this.id__());
-    this.aboutToBeDeletedInternal()
-  }
-  get currentIndex() {
-    return this.__currentIndex.get()
-  }
-  set currentIndex(e) {
-    this.__currentIndex.set(e)
-  }
-  get isOnFocus() {
-    return this.__isOnFocus.get()
-  }
-  set isOnFocus(e) {
-    this.__isOnFocus.set(e)
-  }
-  get isOnHover() {
-    return this.__isOnHover.get()
-  }
-  set isOnHover(e) {
-    this.__isOnHover.set(e)
-  }
-  get isOnClick() {
-    return this.__isOnClick.get()
-  }
-  set isOnClick(e) {
-    this.__isOnClick.set(e)
-  }
-  getBgColor() {
-    return this.isOnClick ? {
-      id: -1,
-      type: 10001,
-      params: ["sys.color.ohos_id_color_click_effect"],
-      bundleName: "",
-      moduleName: ""
-    } : this.isOnHover ? {
-      id: -1,
-      type: 10001,
-      params: ["sys.color.ohos_id_color_hover"],
-      bundleName: "",
-      moduleName: ""
-    } : Color.Transparent
-  }
-  initialRender() {
-    this.observeComponentCreation(((e, t) => {
-      ViewStackProcessor.StartGetAccessRecordingFor(e);
-      Row.create();
-      Row.height(TabTitleBar.totalHeight);
-      Row.alignItems(VerticalAlign.Center);
-      Row.justifyContent(FlexAlign.Center);
-      Row.margin({
-        left: 0 === this.index ? 16 : 0,
-        right: this.index === this.maxIndex ? 12 : 0
-      });
-      Row.borderRadius(TabContentItem.buttonBorderRadius);
-      Row.backgroundColor(this.getBgColor());
-      Row.border(this.isOnFocus ? {
-        width: TabContentItem.focusBorderWidth,
-        color: {
-          id: -1,
-          type: 10001,
-          params: ["sys.color.ohos_id_color_emphasize"],
-          bundleName: "",
-          moduleName: ""
-        },
-        style: BorderStyle.Solid
-      } : {
-        width: 0
-      });
-      t || Row.pop();
-      ViewStackProcessor.StopGetAccessRecording()
-    }));
-    this.observeComponentCreation(((e, t) => {
-      ViewStackProcessor.StartGetAccessRecordingFor(e);
-      Column.create();
-      Column.justifyContent(FlexAlign.Center);
-      t || Column.pop();
-      ViewStackProcessor.StopGetAccessRecording()
-    }));
-    this.observeComponentCreation(((e, t) => {
-      ViewStackProcessor.StartGetAccessRecordingFor(e);
-      If.create();
-      void 0 === this.item.icon ? this.ifElseBranchUpdateFunction(0, (() => {
-        this.observeComponentCreation(((e, t) => {
-          ViewStackProcessor.StartGetAccessRecordingFor(e);
-          Text.create(this.item.title);
-          Text.fontSize(this.index === this.currentIndex ? {
-            id: -1,
-            type: 10002,
-            params: ["sys.float.ohos_id_text_size_headline7"],
-            bundleName: "",
-            moduleName: ""
-          } : {
-            id: -1,
-            type: 10002,
-            params: ["sys.float.ohos_id_text_size_headline9"],
-            bundleName: "",
-            moduleName: ""
-          });
-          Text.fontColor(this.index === this.currentIndex ? {
-            id: -1,
-            type: 10001,
-            params: ["sys.color.ohos_id_color_titlebar_text"],
-            bundleName: "",
-            moduleName: ""
-          } : {
-            id: -1,
-            type: 10001,
-            params: ["sys.color.ohos_id_color_titlebar_text_off"],
-            bundleName: "",
-            moduleName: ""
-          });
-          Text.fontWeight(FontWeight.Medium);
-          Text.focusable(!0);
-          Text.padding({
-            top: this.index === this.currentIndex ? 6 : 10,
-            left: 8,
-            bottom: 2,
-            right: 8
-          });
-          Text.onFocus((() => this.isOnFocus = !0));
-          Text.onBlur((() => this.isOnFocus = !1));
-          Text.onHover((e => this.isOnHover = e));
-          Text.onKeyEvent((e => {
-            if (e.keyCode === KeyCode.KEYCODE_ENTER || e.keyCode === KeyCode.KEYCODE_SPACE) {
-              e.type === KeyType.Down && (this.isOnClick = !0);
-              e.type === KeyType.Up && (this.isOnClick = !1)
-            }
-          }));
-          Text.onTouch((e => {
-            e.type === TouchType.Down && (this.isOnClick = !0);
-            e.type === TouchType.Up && (this.isOnClick = !1)
-          }));
-          Text.onClick((() => this.onCustomClick && this.onCustomClick()));
-          t || Text.pop();
-          ViewStackProcessor.StopGetAccessRecording()
-        }));
-        Text.pop()
-      })) : this.ifElseBranchUpdateFunction(1, (() => {
-        this.observeComponentCreation(((e, t) => {
-          ViewStackProcessor.StartGetAccessRecordingFor(e);
-          Row.create();
-          Row.width(TabContentItem.imageHotZoneWidth);
-          Row.height(TabContentItem.imageHotZoneWidth);
-          Row.justifyContent(FlexAlign.Center);
-          Row.onFocus((() => this.isOnFocus = !0));
-          Row.onBlur((() => this.isOnFocus = !1));
-          Row.onHover((e => this.isOnHover = e));
-          Row.onKeyEvent((e => {
-            if (e.keyCode === KeyCode.KEYCODE_ENTER || e.keyCode === KeyCode.KEYCODE_SPACE) {
-              e.type === KeyType.Down && (this.isOnClick = !0);
-              e.type === KeyType.Up && (this.isOnClick = !1)
-            }
-          }));
-          Row.onTouch((e => {
-            e.type === TouchType.Down && (this.isOnClick = !0);
-            e.type === TouchType.Up && (this.isOnClick = !1)
-          }));
-          Row.onClick((() => this.onCustomClick && this.onCustomClick()));
-          t || Row.pop();
-          ViewStackProcessor.StopGetAccessRecording()
-        }));
-        this.observeComponentCreation(((e, t) => {
-          ViewStackProcessor.StartGetAccessRecordingFor(e);
-          Image.create(this.item.icon);
-          Image.alt(this.item.title);
-          Image.height(TabContentItem.imageSize);
-          Image.focusable(!0);
-          Image.scale({
-            x: this.index === this.currentIndex ? TabContentItem.imageMagnificationFactor : 1,
-            y: this.index === this.currentIndex ? TabContentItem.imageMagnificationFactor : 1
-          });
-          t || Image.pop();
-          ViewStackProcessor.StopGetAccessRecording()
-        }));
-        Row.pop()
-      }));
-      t || If.pop();
-      ViewStackProcessor.StopGetAccessRecording()
-    }));
-    If.pop();
-    Column.pop();
-    Row.pop()
-  }
-  rerender() {
-    this.updateDirtyElements()
-  }
-}
-TabContentItem.imageSize = 24;
-TabContentItem.imageHotZoneWidth = 48;
-TabContentItem.imageMagnificationFactor = 1.4;
-TabContentItem.buttonBorderRadius = 8;
-TabContentItem.focusBorderWidth = 2;
-class ImageMenuItem extends ViewPU {
-  constructor(e, t, o, i = -1) {
-    super(e, o, i);
-    this.item = void 0;
-    this.__isOnFocus = new ObservedPropertySimplePU(!1, this, "isOnFocus");
-    this.__isOnHover = new ObservedPropertySimplePU(!1, this, "isOnHover");
-    this.__isOnClick = new ObservedPropertySimplePU(!1, this, "isOnClick");
-    this.setInitiallyProvidedValue(t)
-  }
-  setInitiallyProvidedValue(e) {
-    void 0 !== e.item && (this.item = e.item);
-    void 0 !== e.isOnFocus && (this.isOnFocus = e.isOnFocus);
-    void 0 !== e.isOnHover && (this.isOnHover = e.isOnHover);
-    void 0 !== e.isOnClick && (this.isOnClick = e.isOnClick)
-  }
-  updateStateVars(e) {}
-  purgeVariableDependenciesOnElmtId(e) {
-    this.__isOnFocus.purgeDependencyOnElmtId(e);
-    this.__isOnHover.purgeDependencyOnElmtId(e);
-    this.__isOnClick.purgeDependencyOnElmtId(e)
-  }
-  aboutToBeDeleted() {
-    this.__isOnFocus.aboutToBeDeleted();
-    this.__isOnHover.aboutToBeDeleted();
-    this.__isOnClick.aboutToBeDeleted();
-    SubscriberManager.Get().delete(this.id__());
-    this.aboutToBeDeletedInternal()
-  }
-  get isOnFocus() {
-    return this.__isOnFocus.get()
-  }
-  set isOnFocus(e) {
-    this.__isOnFocus.set(e)
-  }
-  get isOnHover() {
-    return this.__isOnHover.get()
-  }
-  set isOnHover(e) {
-    this.__isOnHover.set(e)
-  }
-  get isOnClick() {
-    return this.__isOnClick.get()
-  }
-  set isOnClick(e) {
-    this.__isOnClick.set(e)
-  }
-  getFgColor() {
-    return this.isOnClick ? {
-      id: -1,
-      type: 10001,
-      params: ["sys.color.ohos_id_color_titlebar_icon_pressed"],
-      bundleName: "",
-      moduleName: ""
-    } : {
-      id: -1,
-      type: 10001,
-      params: ["sys.color.ohos_id_color_titlebar_icon"],
-      bundleName: "",
-      moduleName: ""
-    }
-  }
-  getBgColor() {
-    return this.isOnClick ? {
-      id: -1,
-      type: 10001,
-      params: ["sys.color.ohos_id_color_click_effect"],
-      bundleName: "",
-      moduleName: ""
-    } : this.isOnHover ? {
-      id: -1,
-      type: 10001,
-      params: ["sys.color.ohos_id_color_hover"],
-      bundleName: "",
-      moduleName: ""
-    } : Color.Transparent
-  }
-  initialRender() {
-    this.observeComponentCreation(((e, t) => {
-      ViewStackProcessor.StartGetAccessRecordingFor(e);
-      Row.create();
-      Row.width(ImageMenuItem.imageHotZoneWidth);
-      Row.height(ImageMenuItem.imageHotZoneWidth);
-      Row.borderRadius(ImageMenuItem.buttonBorderRadius);
-      Row.foregroundColor(this.getFgColor());
-      Row.backgroundColor(this.getBgColor());
-      Row.justifyContent(FlexAlign.Center);
-      Row.opacity(this.item.isEnabled ? 1 : ImageMenuItem.disabledImageOpacity);
-      Row.border(this.isOnFocus ? {
-        width: ImageMenuItem.focusBorderWidth,
-        color: {
-          id: -1,
-          type: 10001,
-          params: ["sys.color.ohos_id_color_emphasize"],
-          bundleName: "",
-          moduleName: ""
-        },
-        style: BorderStyle.Solid
-      } : {
-        width: 0
-      });
-      Row.onFocus((() => {
-        this.item.isEnabled && (this.isOnFocus = !0)
-      }));
-      Row.onBlur((() => this.isOnFocus = !1));
-      Row.onHover((e => {
-        this.item.isEnabled && (this.isOnHover = e)
-      }));
-      Row.onKeyEvent((e => {
-        if (this.item.isEnabled && (e.keyCode === KeyCode.KEYCODE_ENTER || e.keyCode === KeyCode.KEYCODE_SPACE)) {
-          e.type === KeyType.Down && (this.isOnClick = !0);
-          e.type === KeyType.Up && (this.isOnClick = !1)
-        }
-      }));
-      Row.onTouch((e => {
-        if (this.item.isEnabled) {
-          e.type === TouchType.Down && (this.isOnClick = !0);
-          e.type === TouchType.Up && (this.isOnClick = !1)
-        }
-      }));
-      Row.onClick((() => this.item.isEnabled && this.item.action && this.item.action()));
-      t || Row.pop();
-      ViewStackProcessor.StopGetAccessRecording()
-    }));
-    this.observeComponentCreation(((e, t) => {
-      ViewStackProcessor.StartGetAccessRecordingFor(e);
-      Image.create(this.item.value);
-      Image.width(ImageMenuItem.imageSize);
-      Image.height(ImageMenuItem.imageSize);
-      Image.focusable(this.item.isEnabled);
-      t || Image.pop();
-      ViewStackProcessor.StopGetAccessRecording()
-    }));
-    Row.pop()
-  }
-  rerender() {
-    this.updateDirtyElements()
-  }
-}
-ImageMenuItem.imageSize = 24;
-ImageMenuItem.imageHotZoneWidth = 48;
-ImageMenuItem.buttonBorderRadius = 8;
-ImageMenuItem.focusBorderWidth = 2;
-ImageMenuItem.disabledImageOpacity = .4;
-export default {
-  TabTitleBar: TabTitleBar
-};

interface/toolbar/BUILD.gn

@@ -1,46 +0,0 @@
-# Copyright (c) 2023-2023 Huawei Device Co., Ltd.
-# Licensed under the Apache License, Version 2.0 (the "License");
-# you may not use this file except in compliance with the License.
-# You may obtain a copy of the License at
-#
-#     http://www.apache.org/licenses/LICENSE-2.0
-#
-# Unless required by applicable law or agreed to in writing, software
-# distributed under the License is distributed on an "AS IS" BASIS,
-# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-# See the License for the specific language governing permissions and
-# limitations under the License.
-
-import("//build/ohos.gni")
-import("//foundation/arkui/ace_engine/ace_config.gni")
-import("//arkcompiler/ets_frontend/es2panda/es2abc_config.gni")
-
-es2abc_gen_abc("gen_toolbar_abc") {
-  src_js = rebase_path("toolbar.js")
-  dst_file = rebase_path(target_out_dir + "/toolbar.abc")
-  in_puts = [ "toolbar.js" ]
-  out_puts = [ target_out_dir + "/toolbar.abc" ]
-  extra_args = [ "--module" ]
-}
-
-gen_js_obj("toolbar_abc") {
-  input = get_label_info(":gen_toolbar_abc", "target_out_dir") + "/toolbar.abc"
-  output = target_out_dir + "/toolbar_abc.o"
-  dep = ":gen_toolbar_abc"
-}
-
-ohos_shared_library("toolbar") {
-  sources = [ "toolbar.cpp" ]
-
-  deps = [ ":toolbar_abc" ]
-
-  external_deps = [
-    "hilog:libhilog",
-    "napi:ace_napi",
-  ]
-
-  subsystem_name = "arkui"
-  part_name = "advanced_ui_component"
-
-  relative_install_dir = "module/arkui/advanced"
-}

interface/toolbar/toolbar.cpp

@@ -1,53 +0,0 @@
-/*
- * Copyright (c) 2023-2023 Huawei Device Co., Ltd.
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-#include "native_engine/native_engine.h"
-
-#include "napi/native_api.h"
-#include "napi/native_node_api.h"
-
-extern const char _binary_toolbar_abc_start[];
-extern const char _binary_toolbar_abc_end[];
-
-// Napi get abc code function
-extern "C" __attribute__((visibility("default")))
-void NAPI_arkui_advanced_ToolBar_GetABCCode(const char **buf, int *buflen)
-{
-    if (buf != nullptr) {
-        *buf = _binary_toolbar_abc_start;
-    }
-    if (buflen != nullptr) {
-        *buflen = _binary_toolbar_abc_end - _binary_toolbar_abc_start;
-    }
-}
-
-/*
- * Module define
- */
-static napi_module toolbarModule = {
-    .nm_version = 1,
-    .nm_flags = 0,
-    .nm_filename = nullptr,
-    .nm_modname = "arkui.advanced.ToolBar",
-    .nm_priv = ((void*)0),
-    .reserved = { 0 },
-};
-/*
- * Module register function
- */
-extern "C" __attribute__((constructor)) void toolbarRegisterModule(void)
-{
-    napi_module_register(&toolbarModule);
-}

interface/toolbar/toolbar.js

@@ -1,477 +0,0 @@
-/*
- * Copyright (c) 2023-2023 Huawei Device Co., Ltd.
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-const REFLECT_MAX_COUNT = 3;
-const IMAGE_SIZE_WIDTH_HEIGHT = 24;
-const TEXT_MIN_SIZE = 9;
-const DISABLE_OPACITY = 0.4;
-const TEXT_MAX_LINES = 2;
-const TOOLBAR_LIST_LENGTH = 5;
-const TOOLBAR_LIST_NORMORL = 4;
-const ITEM_DISABLE_STATE = 2;
-const ITEM_DISABLE_ACTIVATE = 3;
-
-let __decorate = this && this.__decorate || function (e, t, o, r) {
-  let s;
-  let i = arguments.length;
-  let a = i < REFLECT_MAX_COUNT ? t : null === r ? r = Object.getOwnPropertyDescriptor(t, o) : r;
-  if ('object' === typeof Reflect && 'function' === typeof Reflect.decorate) {
-    a = Reflect.decorate(e, t, o, r);
-  } else {
-    for (let n = e.length - 1; n >= 0; n--) {
-      (s = e[n]) && (a = (i < REFLECT_MAX_COUNT ? s(a) : i > REFLECT_MAX_COUNT ? s(t, o, a) : s(t, o)) || a);
-    }
-  }
-  return i > REFLECT_MAX_COUNT && a && Object.defineProperty(t, o, a), a;
-};
-export let ItemState;
-!function(e) {
-  e[e.ENABLE = 1] = 'ENABLE';
-  e[e.DISABLE = 2] = 'DISABLE';
-  e[e.ACTIVATE = 3] = 'ACTIVATE';
-}(ItemState || (ItemState = {}));
-const PUBLIC_MORE = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAYAAADimHc4AAAA' +
-  'IGNIUk0AAHomAACAhAAA+gAAAIDoAAB1MAAA6mAAADqYAAAXcJy6UTwAAAAEZ0FNQQAAsY58+1GTAAAAAXNSR0IAr' +
-  's4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAYFJREFUeNrt3CFLQ1EUB/CpCwYRo8' +
-  'G4j2IwCNrUYjH4AfwcfgBBwWZRMNgtFqPdILJgEhGDweAZvDjmJnfv3I3fD/5l3DfOfWdv23vhdDoAAAAAAAAwzxa' +
-  'm9L5rkePIdmSjee05chu5iHxXej5ar3saDdiJXDabGaYfOYg8VHbyU+peKryJvch1ZHnEmtXIYeQ+8lrJyU+re7Hg' +
-  'JtYj52Ou7Uau/thwW1LrLtmAk8jKBOsH37FHFTQgte6SDdht6ZjSUusu2YBeS8eUllr3YvLmuzP6971bYwP6/zjmpY' +
-  'KTmVp3yQbctXRMaal1l2zAaeRngvUfkbMKGpBad8kbsffIZ2RrzPX7kacKGpBad+k74cfmE7I54ur6au4obyr6UU2r' +
-  'e1oP43rNDc6wh1qDS/6t0n83s1o3AAAAAAAAAAAAAEAysyKS6zYrIrlusyKS6zYrwqyIdGZFJDMrIplZETPIrIh5qdu' +
-  'sCLMi0pkVkcysiAqYFVEJsyIAAAAAAAAAKOYXUlF8EUcdfbsAAAAASUVORK5CYII=';
-let ToolBarOption = class {
-  constructor() {
-    this.state = 1;
-  }
-};
-ToolBarOption = __decorate([Observed], ToolBarOption);
-
-export { ToolBarOption };
-let ToolBarOptions = class extends Array {
-};
-ToolBarOptions = __decorate([Observed], ToolBarOptions);
-
-export { ToolBarOptions };
-
-export class ToolBar extends ViewPU {
-  constructor(e, t, o, r = -1) {
-    super(e, o, r);
-    this.__toolBarList = new SynchedPropertyNesedObjectPU(t.toolBarList, this, 'toolBarList');
-    this.controller = void 0;
-    this.__activateIndex = new SynchedPropertySimpleOneWayPU(t.activateIndex, this, 'activateIndex');
-    this.__menuContent = new ObservedPropertyObjectPU([], this, 'menuContent');
-    this.toolBarItemBackground = [];
-    this.__itemBackground = new ObservedPropertyObjectPU({
-      id: -1,
-      type: 10001,
-      params: ['sys.color.ohos_id_color_toolbar_bg'],
-      bundleName: '',
-      moduleName: ''
-    }, this, 'itemBackground');
-    this.setInitiallyProvidedValue(t);
-  }
-
-  setInitiallyProvidedValue(e) {
-    this.__toolBarList.set(e.toolBarList);
-    void 0 !== e.controller && (this.controller = e.controller);
-    void 0 !== e.activateIndex ? this.__activateIndex.set(e.activateIndex) : this.__activateIndex.set(-1);
-    void 0 !== e.menuContent && (this.menuContent = e.menuContent);
-    void 0 !== e.toolBarItemBackground && (this.toolBarItemBackground = e.toolBarItemBackground);
-    void 0 !== e.itemBackground && (this.itemBackground = e.itemBackground);
-  }
-
-  updateStateVars(e) {
-    this.__toolBarList.set(e.toolBarList);
-    this.__activateIndex.reset(e.activateIndex);
-  }
-
-  purgeVariableDependenciesOnElmtId(e) {
-    this.__toolBarList.purgeDependencyOnElmtId(e);
-    this.__activateIndex.purgeDependencyOnElmtId(e);
-    this.__menuContent.purgeDependencyOnElmtId(e);
-    this.__itemBackground.purgeDependencyOnElmtId(e);
-  }
-
-  aboutToBeDeleted() {
-    this.__toolBarList.aboutToBeDeleted();
-    this.__activateIndex.aboutToBeDeleted();
-    this.__menuContent.aboutToBeDeleted();
-    this.__itemBackground.aboutToBeDeleted();
-    SubscriberManager.Get().delete(this.id__());
-    this.aboutToBeDeletedInternal();
-  }
-
-  get toolBarList() {
-    return this.__toolBarList.get();
-  }
-
-  get activateIndex() {
-    return this.__activateIndex.get();
-  }
-
-  set activateIndex(e) {
-    this.__activateIndex.set(e);
-  }
-
-  get menuContent() {
-    return this.__menuContent.get();
-  }
-
-  set menuContent(e) {
-    this.__menuContent.set(e);
-  }
-
-  get itemBackground() {
-    return this.__itemBackground.get();
-  }
-
-  set itemBackground(e) {
-    this.__itemBackground.set(e);
-  }
-
-  MoreTabBuilder(e, t = null) {
-    this.observeComponentCreation(((e, t) => {
-      ViewStackProcessor.StartGetAccessRecordingFor(e);
-      Column.create();
-      Column.width('100%');
-      Column.height('100%');
-      Column.bindMenu(ObservedObject.GetRawObject(this.menuContent), { offset: { x: 5, y: -10 } });
-      Column.padding({ left: 4, right: 4 });
-      Column.borderRadius({
-        id: -1,
-        type: 10002,
-        params: ['sys.float.ohos_id_corner_radius_clicked'],
-        bundleName: '',
-        moduleName: ''
-      });
-      t || Column.pop();
-      ViewStackProcessor.StopGetAccessRecording();
-    }));
-    this.observeComponentCreation(((e, t) => {
-      ViewStackProcessor.StartGetAccessRecordingFor(e);
-      Image.create(PUBLIC_MORE);
-      Image.width(IMAGE_SIZE_WIDTH_HEIGHT);
-      Image.height(IMAGE_SIZE_WIDTH_HEIGHT);
-      Image.fillColor({
-        id: -1,
-        type: 10001,
-        params: ['sys.color.ohos_id_color_toolbar_icon'],
-        bundleName: '',
-        moduleName: ''
-      });
-      Image.margin({ top: 8, bottom: 2 });
-      Image.objectFit(ImageFit.Contain);
-      t || Image.pop();
-      ViewStackProcessor.StopGetAccessRecording();
-    }));
-    this.observeComponentCreation(((e, t) => {
-      ViewStackProcessor.StartGetAccessRecordingFor(e);
-      Text.create({
-        id: -1,
-        type: 10003,
-        params: ['app.string.id_string_more'],
-        bundleName: '',
-        moduleName: ''
-      });
-      Text.fontColor({
-        id: -1,
-        type: 10001,
-        params: ['sys.color.ohos_id_color_toolbar_text'],
-        bundleName: '',
-        moduleName: ''
-      });
-      Text.fontSize({
-        id: -1,
-        type: 10002,
-        params: ['sys.float.ohos_id_text_size_caption'],
-        bundleName: '',
-        moduleName: ''
-      });
-      Text.fontWeight(FontWeight.Medium);
-      t || Text.pop();
-      ViewStackProcessor.StopGetAccessRecording();
-    }));
-    Text.pop();
-    Column.pop();
-  }
-
-  TabBuilder(e, t = null) {
-    this.observeComponentCreation(((t, o) => {
-      ViewStackProcessor.StartGetAccessRecordingFor(t);
-      Column.create();
-      Column.width('100%');
-      Column.height('100%');
-      Column.focusable(!(ITEM_DISABLE_STATE === this.toolBarList[e].state));
-      Column.focusOnTouch(!(ITEM_DISABLE_STATE === this.toolBarList[e].state));
-      Column.padding({ left: 4, right: 4 });
-      Column.borderRadius({
-        id: -1,
-        type: 10002,
-        params: ['sys.float.ohos_id_corner_radius_clicked'],
-        bundleName: '',
-        moduleName: ''
-      });
-      Column.backgroundColor(ObservedObject.GetRawObject(this.itemBackground));
-      Column.onClick((() => {
-        ITEM_DISABLE_ACTIVATE === this.toolBarList[e].state && (this.activateIndex === e ? this.activateIndex = -1 : this.activateIndex = e);
-        ITEM_DISABLE_STATE !== this.toolBarList[e].state && this.toolBarList[e].action && this.toolBarList[e].action();
-      }));
-      Column.onHover((t => {
-        this.toolBarItemBackground[e] = t ? ITEM_DISABLE_STATE === this.toolBarList[e].state ? {
-          id: -1,
-          type: 10001,
-          params: ['sys.color.ohos_id_color_toolbar_bg'],
-          bundleName: '',
-          moduleName: ''
-        } : {
-          id: -1,
-          type: 10001,
-          params: ['sys.color.ohos_id_color_hover'],
-          bundleName: '',
-          moduleName: ''
-        } : {
-          id: -1,
-          type: 10001,
-          params: ['sys.color.ohos_id_color_toolbar_bg'],
-          bundleName: '',
-          moduleName: ''
-        };
-        this.itemBackground = this.toolBarItemBackground[e];
-      }));
-      ViewStackProcessor.visualState('pressed');
-      Column.backgroundColor(ITEM_DISABLE_STATE === this.toolBarList[e].state ? this.toolBarItemBackground[e] : {
-        id: -1,
-        type: 10001,
-        params: ['sys.color.ohos_id_color_click_effect'],
-        bundleName: '',
-        moduleName: ''
-      });
-      ViewStackProcessor.visualState('normal');
-      Column.backgroundColor(this.toolBarItemBackground[e]);
-      ViewStackProcessor.visualState();
-      o || Column.pop();
-      ViewStackProcessor.StopGetAccessRecording();
-    }));
-    this.observeComponentCreation(((t, o) => {
-      ViewStackProcessor.StartGetAccessRecordingFor(t);
-      Image.create(this.toolBarList[e].icon);
-      Image.width(IMAGE_SIZE_WIDTH_HEIGHT);
-      Image.height(IMAGE_SIZE_WIDTH_HEIGHT);
-      Image.fillColor(this.activateIndex === e && ITEM_DISABLE_STATE !== this.toolBarList[e].state ? {
-        id: -1,
-        type: 10001,
-        params: ['sys.color.ohos_id_color_text_primary_activated'],
-        bundleName: '',
-        moduleName: ''
-      } : {
-        id: -1,
-        type: 10001,
-        params: ['sys.color.ohos_id_color_primary'],
-        bundleName: '',
-        moduleName: ''
-      });
-      Image.opacity(ITEM_DISABLE_STATE === this.toolBarList[e].state ? DISABLE_OPACITY : 1);
-      Image.margin({ top: 8, bottom: 2 });
-      Image.objectFit(ImageFit.Contain);
-      o || Image.pop();
-      ViewStackProcessor.StopGetAccessRecording();
-    }));
-    this.observeComponentCreation(((t, o) => {
-      ViewStackProcessor.StartGetAccessRecordingFor(t);
-      Text.create(this.toolBarList[e].content);
-      Text.fontColor(this.activateIndex === e && ITEM_DISABLE_STATE !== this.toolBarList[e].state ? {
-        id: -1,
-        type: 10001,
-        params: ['sys.color.ohos_id_color_toolbar_text_actived'],
-        bundleName: '',
-        moduleName: ''
-      } : {
-        id: -1,
-        type: 10001,
-        params: ['sys.color.ohos_id_color_toolbar_text'],
-        bundleName: '',
-        moduleName: ''
-      });
-      Text.fontSize({
-        id: -1,
-        type: 10002,
-        params: ['sys.float.ohos_id_text_size_caption'],
-        bundleName: '',
-        moduleName: ''
-      });
-      Text.maxFontSize({
-        id: -1,
-        type: 10002,
-        params: ['sys.float.ohos_id_text_size_caption'],
-        bundleName: '',
-        moduleName: ''
-      });
-      Text.minFontSize(TEXT_MIN_SIZE);
-      Text.fontWeight(FontWeight.Medium);
-      Text.maxLines(TEXT_MAX_LINES);
-      Text.textOverflow({ overflow: TextOverflow.Ellipsis });
-      Text.opacity(ITEM_DISABLE_STATE === this.toolBarList[e].state ? DISABLE_OPACITY : 1);
-      o || Text.pop();
-      ViewStackProcessor.StopGetAccessRecording();
-    }));
-    Text.pop();
-    Column.pop();
-  }
-
-  refreshData() {
-    this.menuContent = [];
-    for (let e = 0; e < this.toolBarList.length; e++) {
-      if (e >= TOOLBAR_LIST_NORMORL && this.toolBarList.length > TOOLBAR_LIST_LENGTH) {
-        this.menuContent[e - TOOLBAR_LIST_NORMORL] = {
-          value: this.toolBarList[e].content,
-          action: this.toolBarList[e].action
-        };
-      } else {
-        this.toolBarItemBackground[e] = {
-          id: -1,
-          type: 10001,
-          params: ['sys.color.ohos_id_color_toolbar_bg'],
-          bundleName: '',
-          moduleName: ''
-        };
-        this.menuContent = [];
-      }
-    }
-    return !0;
-  }
-
-  aboutToAppear() {
-    this.refreshData();
-  }
-
-  initialRender() {
-    this.observeComponentCreation(((e, t) => {
-      ViewStackProcessor.StartGetAccessRecordingFor(e);
-      Column.create();
-      t || Column.pop();
-      ViewStackProcessor.StopGetAccessRecording();
-    }));
-    this.observeComponentCreation(((e, t) => {
-      ViewStackProcessor.StartGetAccessRecordingFor(e);
-      Divider.create();
-      Divider.width('100%');
-      Divider.height(1);
-      t || Divider.pop();
-      ViewStackProcessor.StopGetAccessRecording();
-    }));
-    this.observeComponentCreation(((e, t) => {
-      ViewStackProcessor.StartGetAccessRecordingFor(e);
-      Column.create();
-      Column.width('100%');
-      t || Column.pop();
-      ViewStackProcessor.StopGetAccessRecording();
-    }));
-    this.observeComponentCreation(((e, t) => {
-      ViewStackProcessor.StartGetAccessRecordingFor(e);
-      Tabs.create({ barPosition: BarPosition.End, controller: this.controller });
-      Tabs.vertical(!1);
-      Tabs.constraintSize({ minHeight: 56, maxHeight: 56 });
-      Tabs.barMode(BarMode.Fixed);
-      Tabs.onChange((e => {
-      }));
-      Tabs.width('100%');
-      Tabs.backgroundColor({
-        id: -1,
-        type: 10001,
-        params: ['sys.color.ohos_id_color_toolbar_bg'],
-        bundleName: '',
-        moduleName: ''
-      });
-      t || Tabs.pop();
-      ViewStackProcessor.StopGetAccessRecording();
-    }));
-    this.observeComponentCreation(((e, t) => {
-      ViewStackProcessor.StartGetAccessRecordingFor(e);
-      ForEach.create();
-      this.forEachUpdateFunction(e, this.toolBarList, ((e, t) => {
-        this.observeComponentCreation(((e, o) => {
-          ViewStackProcessor.StartGetAccessRecordingFor(e);
-          If.create();
-          this.toolBarList.length <= TOOLBAR_LIST_LENGTH ? this.ifElseBranchUpdateFunction(0, (() => {
-            this.observeComponentCreation(((e, r) => {
-              ViewStackProcessor.StartGetAccessRecordingFor(e);
-              TabContent.create();
-              TabContent.tabBar({
-                builder: () => {
-                  this.TabBuilder.call(this, t);
-                }
-              });
-              TabContent.enabled(!(ITEM_DISABLE_STATE === this.toolBarList[t].state));
-              TabContent.focusOnTouch(!(ITEM_DISABLE_STATE === this.toolBarList[t].state));
-              r || TabContent.pop();
-              ViewStackProcessor.StopGetAccessRecording();
-            }));
-            TabContent.pop();
-          })) : t < TOOLBAR_LIST_NORMORL && this.ifElseBranchUpdateFunction(1, (() => {
-            this.observeComponentCreation(((e, r) => {
-              ViewStackProcessor.StartGetAccessRecordingFor(e);
-              TabContent.create();
-              TabContent.tabBar({
-                builder: () => {
-                  this.TabBuilder.call(this, t);
-                }
-              });
-              TabContent.enabled(!(ITEM_DISABLE_STATE === this.toolBarList[t].state));
-              TabContent.focusOnTouch(!(ITEM_DISABLE_STATE === this.toolBarList[t].state));
-              r || TabContent.pop();
-              ViewStackProcessor.StopGetAccessRecording();
-            }));
-            TabContent.pop();
-          }));
-          r || If.pop();
-          ViewStackProcessor.StopGetAccessRecording();
-        }));
-        If.pop();
-      }), void 0, !0, !1);
-      t || ForEach.pop();
-      ViewStackProcessor.StopGetAccessRecording();
-    }));
-    ForEach.pop();
-    this.observeComponentCreation(((e, t) => {
-      ViewStackProcessor.StartGetAccessRecordingFor(e);
-      If.create();
-      this.refreshData() && this.toolBarList.length > TOOLBAR_LIST_LENGTH ? this.ifElseBranchUpdateFunction(0, (() => {
-        this.observeComponentCreation(((e, t) => {
-          ViewStackProcessor.StartGetAccessRecordingFor(e);
-          TabContent.create();
-          TabContent.tabBar({
-            builder: () => {
-              this.MoreTabBuilder.call(this, TOOLBAR_LIST_NORMORL);
-            }
-          });
-          t || TabContent.pop();
-          ViewStackProcessor.StopGetAccessRecording();
-        }));
-        TabContent.pop();
-      })) : If.branchId(1);
-      t || If.pop();
-      ViewStackProcessor.StopGetAccessRecording();
-    }));
-    If.pop();
-    Tabs.pop();
-    Column.pop();
-    Column.pop();
-  }
-
-  rerender() {
-    this.updateDirtyElements();
-  }
-}
-export default { ToolBarOptions, ToolBar };

interface/treeview/BUILD.gn

@@ -1,48 +0,0 @@
-# Copyright (c) 2023-2023 Huawei Device Co., Ltd.
-# Licensed under the Apache License, Version 2.0 (the "License");
-# you may not use this file except in compliance with the License.
-# You may obtain a copy of the License at
-#
-#     http://www.apache.org/licenses/LICENSE-2.0
-#
-# Unless required by applicable law or agreed to in writing, software
-# distributed under the License is distributed on an "AS IS" BASIS,
-# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-# See the License for the specific language governing permissions and
-# limitations under the License.
-
-import("//build/ohos.gni")
-import("//foundation/arkui/ace_engine/ace_config.gni")
-import("//arkcompiler/ets_frontend/es2panda/es2abc_config.gni")
-
-es2abc_gen_abc("gen_treeview_abc") {
-  src_js = rebase_path("treeview.js")
-  dst_file = rebase_path(target_out_dir + "/treeview.abc")
-  in_puts = [ "treeview.js" ]
-  out_puts = [ target_out_dir + "/treeview.abc" ]
-  extra_args = [ "--module" ]
-}
-
-gen_js_obj("treeview_abc") {
-  input = get_label_info(":gen_treeview_abc", "target_out_dir") + "/treeview.abc"
-  output = target_out_dir + "/treeview_abc.o"
-  dep = ":gen_treeview_abc"
-}
-
-ohos_shared_library("treeview") {
-  sources = [ "treeview.cpp" ]
-
-  deps = [ ":treeview_abc" ]
-
-  external_deps = [
-    "hilog:libhilog",
-    "napi:ace_napi",
-  ]
-
-  subsystem_name = "arkui"
-  part_name = "advanced_ui_component"
-
-  relative_install_dir = "module/arkui/advanced"
-}
-
-

interface/treeview/treeview.cpp

@@ -1,55 +0,0 @@
-/*
- * Copyright (c) 2023-2023 Huawei Device Co., Ltd.
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-#include "native_engine/native_engine.h"
-
-#include "napi/native_api.h"
-#include "napi/native_node_api.h"
-
-extern const char _binary_treeview_abc_start[];
-extern const char _binary_treeview_abc_end[];
-
-// Napi get abc code function
-extern "C" __attribute__((visibility("default")))
-void NAPI_arkui_advanced_TreeView_GetABCCode(const char **buf, int *buflen)
-{
-
-    if (buf != nullptr) {
-        *buf = _binary_treeview_abc_start;
-    }
-    if (buflen != nullptr) {
-        *buflen = _binary_treeview_abc_end - _binary_treeview_abc_start;
-    }
-}
-
-/*
- * Module define
- */
-static napi_module treeviewModule = {
-    .nm_version = 1,
-    .nm_flags = 0,
-    .nm_filename = nullptr,
-    .nm_modname = "arkui.advanced.TreeView",
-    .nm_priv = ((void*)0),
-    .reserved = { 0 },
-};
-
-/*
- * Module register function
- */
-extern "C" __attribute__((constructor)) void treeviewRegisterModule(void)
-{
-    napi_module_register(&treeviewModule);
-}

source/ArkDialog/ArkDialog.ets

@@ -1,417 +0,0 @@
-/*
- * Copyright (c) 2023-2023 Huawei Device Co., Ltd.
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
- 
-const CHECKBOX_CONTAINER_HEIGHT: number = 48
-const CONTENT_MAX_LINES: number = 2
-const DIVIDER_CONTAINER_WIDTH: number = 16
-const DIVIDER_HEIGHT: number = 24
-const DIVIDER_WIDTH: number = 2
-const LOADING_PROGRESS_WIDTH: number = 40
-const LOADING_PROGRESS_HEIGHT: number = 48
-const ITEM_TEXT_SIZE: number = 14
-export declare type ButtonOptions = {
-  value: ResourceStr;
-  action?: () => void;
-  background?: ResourceColor;
-  fontColor?: ResourceColor;
-}
-
-@CustomDialog
-export struct TipsDialog{
-  controller: CustomDialogController
-  imageRes: Resource
-  imageSize: SizeOptions = {width: '100%', height: 180}
-  title: ResourceStr = ''
-  content?: ResourceStr = ''
-  checkTips?: ResourceStr = ''
-  @State isChecked?: boolean = false
-  primaryButton?: ButtonOptions = {value: ""}
-  secondaryButton?: ButtonOptions = {value: ""}
-
-  build() {
-    Column() {
-      Row() {
-        Column() {
-          Image(this.imageRes)
-            .size(this.imageSize)
-            .objectFit(ImageFit.Fill)
-        }.layoutWeight(1)
-        .clip(true)
-      }.width('100%')
-      .padding({ left: 24, right: 24})
-      .margin({top: 24})
-      Row() {
-        Text(this.title)
-          .fontSize($r('sys.float.ohos_id_text_size_headline8'))
-          .fontWeight(FontWeight.Medium)
-          .fontColor($r('sys.color.ohos_id_color_text_primary'))
-          .textAlign(TextAlign.Center)
-      }.padding({ left: 24, right: 24 })
-      .margin({top: 16})
-      if (this.content) {
-        Row() {
-          Text(this.content)
-            .fontSize($r('sys.float.ohos_id_text_size_body2'))
-            .fontWeight(FontWeight.Medium)
-            .fontColor($r('sys.color.ohos_id_color_text_primary'))
-            .textAlign(TextAlign.Center)
-            .minFontSize($r('sys.float.ohos_id_text_size_body3'))
-        }.padding({ left: 24, right: 24, top: 8, bottom: 8 })
-        .width('100%')
-      }
-      Row() {
-        Checkbox({ name: 'checkbox', group: 'checkboxGroup' }).select(this.isChecked)
-          .onChange((checked: boolean) => {
-            this.isChecked = checked
-          })
-          .margin({ left: 0, right: 8})
-        Text(this.checkTips).fontSize($r('sys.float.ohos_id_text_size_body2'))
-          .fontWeight(FontWeight.Medium)
-          .fontColor($r('sys.color.ohos_id_color_text_primary'))
-          .maxLines(CONTENT_MAX_LINES)
-          .layoutWeight(1)
-          .focusOnTouch(true)
-          .onClick(() => {
-            this.isChecked = !this.isChecked
-          })
-      }.height(CHECKBOX_CONTAINER_HEIGHT).width('100%').padding({ left: 24, right: 24 , top: 8, bottom: 8 })
-
-      Row() {
-        if (this.primaryButton.value) {
-          Button(this.primaryButton.value)
-            .fontSize($r('sys.float.ohos_id_text_size_button1'))
-            .fontWeight(FontWeight.Medium)
-            .layoutWeight(1)
-            .backgroundColor(this.primaryButton.background? this.primaryButton.background: $r('sys.color.ohos_id_color_background_transparent'))
-            .fontColor(this.primaryButton.fontColor ? this.primaryButton.fontColor: $r('sys.color.ohos_id_color_text_primary_activated'))
-            .onClick(() => {
-              if (this.primaryButton.action) this.primaryButton.action()
-              this.controller.close()
-            })
-        }
-        if (this.secondaryButton.value && this.primaryButton.value) {
-          Column() {
-            if (!this.secondaryButton.background) {
-              Divider().width(DIVIDER_WIDTH).height(DIVIDER_HEIGHT).color($r('sys.color.ohos_id_color_list_separator')).vertical(true)
-            }
-          }.width(DIVIDER_CONTAINER_WIDTH).alignItems(HorizontalAlign.Center)
-        }
-        if (this.secondaryButton.value) {
-          Button(this.secondaryButton.value)
-            .fontSize($r('sys.float.ohos_id_text_size_button1'))
-            .fontWeight(FontWeight.Medium)
-            .layoutWeight(1)
-            .backgroundColor(this.secondaryButton.background? this.secondaryButton.background: $r('sys.color.ohos_id_color_background_transparent'))
-            .fontColor(this.secondaryButton.fontColor ? this.secondaryButton.fontColor: $r('sys.color.ohos_id_color_text_primary_activated'))
-            .onClick(() => {
-              if (this.secondaryButton.action) this.secondaryButton.action()
-              this.controller.close()
-            })
-        }
-      }.width('100%').padding({ left: 16, right: 16, top: 16, bottom: 16 })
-    }
-    .backgroundBlurStyle(BlurStyle.Thick)
-    .borderRadius($r('sys.float.ohos_id_corner_radius_dialog'))
-    .margin({
-      left: $r('sys.float.ohos_id_dialog_margin_start'),
-      right: $r('sys.float.ohos_id_dialog_margin_end'),
-      bottom: $r('sys.float.ohos_id_dialog_margin_bottom')
-    })
-    // 1.backgroundcolor use in blur enable mod mast set this color: colorDialogBgBlur. but now it is not found
-    .backgroundColor($r('sys.color.ohos_id_color_dialog_bg'))
-  }
-}
-
-@CustomDialog
-export struct SelectDialog{
-  controller: CustomDialogController
-  title: ResourceStr = ''
-  content?: ResourceStr = ''
-  selectedIndex?: number = -1
-  confirm?: ButtonOptions = {value: ""}
-  radioContent: Array<SheetInfo> = []
-
-  build() {
-      Column() {
-        Row() {
-          Text(this.title)
-            .fontSize($r('sys.float.ohos_id_text_size_dialog_tittle'))
-            .fontWeight(FontWeight.Medium)
-            .maxLines(CONTENT_MAX_LINES)
-            .minFontSize($r('sys.float.ohos_id_text_size_sub_title1'))
-            .textOverflow({ overflow: TextOverflow.Ellipsis})
-            .fontColor($r('sys.color.ohos_id_color_text_primary'))
-            .textAlign(TextAlign.Start)
-            .width('100%')
-        }.padding({ left: 24, right: 24, top: 24 })
-        .constraintSize({minHeight: 56})
-        if (this.content) {
-          Row() {
-            Text(this.content)
-              .fontSize($r('sys.float.ohos_id_text_size_body2'))
-              .fontWeight(FontWeight.Medium)
-              .fontColor($r('sys.color.ohos_id_color_text_primary'))
-              .maxLines(CONTENT_MAX_LINES)
-              .textOverflow({ overflow: TextOverflow.Ellipsis})
-              .minFontSize($r('sys.float.ohos_id_text_size_body3'))
-          }.padding({ left: 24, right: 24, top: 8, bottom: 8 })
-          .width('100%')
-        }
-        List({space: 1}) {
-          ForEach(this.radioContent, (item: SheetInfo, index?: number) => {
-            ListItem() {
-              Column() {
-                Row() {
-                  Text(item.title)
-                    .fontSize(ITEM_TEXT_SIZE)
-                    .fontWeight(FontWeight.Regular)
-                    .maxLines(CONTENT_MAX_LINES)
-                    .fontColor($r('sys.color.ohos_id_color_text_primary'))
-                    .layoutWeight(1)
-                  Radio({ value: 'item.title', group: 'radioGroup'}).checked(this.selectedIndex == index)
-                    .onChange(() => {
-                      item.action && item.action()
-                      this.controller.close()
-                    })
-                    .onClick(() => {
-                      item.action && item.action()
-                      this.controller.close()
-                    })
-                }.constraintSize({minHeight: 48}).clip(false)
-                .onClick(() => {
-                  item.action && item.action()
-                  this.controller.close()
-                })
-                if (index < this.radioContent.length - 1) {
-                  Divider().color($r('sys.color.ohos_id_color_list_separator'))
-                }
-              }
-            }
-          })
-        }.width('100%').padding({ left: 24, right: 24, top: 8, bottom: 8 }).clip(false)
-        Row() {
-          if (this.confirm.value) {
-            Button(this.confirm.value)
-              .fontSize($r('sys.float.ohos_id_text_size_button1'))
-              .fontWeight(FontWeight.Medium)
-              .layoutWeight(1)
-              .backgroundColor(this.confirm.background? this.confirm.background: $r('sys.color.ohos_id_color_background_transparent'))
-              .fontColor(this.confirm.fontColor ? this.confirm.fontColor: $r('sys.color.ohos_id_color_text_primary_activated'))
-              .onClick(() => {
-                this.confirm.action && this.confirm.action()
-                this.controller.close()
-              })
-          }
-        }.width('100%').padding({ left: 16, right: 16, top: 16, bottom: 16 })
-      }
-      .backgroundBlurStyle(BlurStyle.Thick)
-      .borderRadius($r('sys.float.ohos_id_corner_radius_dialog'))
-      .margin({
-        left: $r('sys.float.ohos_id_dialog_margin_start'),
-        right: $r('sys.float.ohos_id_dialog_margin_end'),
-        bottom: $r('sys.float.ohos_id_dialog_margin_bottom')
-      })
-      // 1.backgroundcolor use in blur enable mod mast set this color: colorDialogBgBlur. but now it is not found
-      .backgroundColor($r('sys.color.ohos_id_color_dialog_bg'))
-  }
-}
-
-@CustomDialog
-export struct ConfirmDialog{
-  controller: CustomDialogController
-  title: ResourceStr = ''
-  content?: ResourceStr = ''
-  checkTips?: ResourceStr = ''
-  @State isChecked?: boolean = false
-  primaryButton?: ButtonOptions = {value: ""}
-  secondaryButton?: ButtonOptions = {value: ""}
-
-  build() {
-      Column() {
-        Row() {
-          Text(this.title)
-            .fontSize($r('sys.float.ohos_id_text_size_dialog_tittle'))
-            .fontWeight(FontWeight.Medium)
-            .maxLines(CONTENT_MAX_LINES)
-            .minFontSize($r('sys.float.ohos_id_text_size_sub_title1'))
-            .textOverflow({ overflow: TextOverflow.Ellipsis})
-            .fontColor($r('sys.color.ohos_id_color_text_primary'))
-            .textAlign(TextAlign.Start)
-            .width('100%')
-        }.padding({ left: 24, right: 24, top: 24 })
-        .constraintSize({minHeight: 56})
-        if (this.content) {
-          Row() {
-            Text(this.content)
-              .fontSize($r('sys.float.ohos_id_text_size_body1'))
-              .fontWeight(FontWeight.Medium)
-              .fontColor($r('sys.color.ohos_id_color_text_primary'))
-              .maxLines(CONTENT_MAX_LINES)
-              .textOverflow({ overflow: TextOverflow.Ellipsis})
-              .minFontSize($r('sys.float.ohos_id_text_size_body3'))
-          }.padding({ left: 24, right: 24, top: 8, bottom: 8 })
-          .width('100%')
-          .constraintSize({minHeight: 36})
-        }
-        Row() {
-          Checkbox({ name: 'checkbox', group: 'checkboxGroup' }).select(this.isChecked)
-            .onChange((checked: boolean) => {
-              this.isChecked = checked
-            })
-            .margin({ left: 0, right: 8})
-          Text(this.checkTips).fontSize($r('sys.float.ohos_id_text_size_body2'))
-            .fontWeight(FontWeight.Medium)
-            .fontColor($r('sys.color.ohos_id_color_text_primary'))
-            .maxLines(CONTENT_MAX_LINES)
-            .layoutWeight(1)
-            .focusOnTouch(true)
-            .onClick(() => {
-              this.isChecked = !this.isChecked
-            })
-        }.height(CHECKBOX_CONTAINER_HEIGHT).width('100%').padding({ left: 24, right: 24 , top: 8, bottom: 8 })
-
-        Row() {
-          if (this.primaryButton.value) {
-            Button(this.primaryButton.value)
-              .fontSize($r('sys.float.ohos_id_text_size_button1'))
-              .fontWeight(FontWeight.Medium)
-              .layoutWeight(1)
-              .backgroundColor(this.primaryButton.background? this.primaryButton.background: $r('sys.color.ohos_id_color_background_transparent'))
-              .fontColor(this.primaryButton.fontColor ? this.primaryButton.fontColor: $r('sys.color.ohos_id_color_text_primary_activated'))
-              .onClick(() => {
-                if (this.primaryButton.action) this.primaryButton.action()
-                this.controller.close()
-              })
-          }
-          if (this.secondaryButton.value && this.primaryButton.value) {
-            Column() {
-              if (!this.secondaryButton.background) {
-                Divider().width(DIVIDER_WIDTH).height(DIVIDER_HEIGHT).color($r('sys.color.ohos_id_color_list_separator')).vertical(true)
-              }
-            }.width(DIVIDER_CONTAINER_WIDTH).alignItems(HorizontalAlign.Center)
-          }
-          if (this.secondaryButton.value) {
-            Button(this.secondaryButton.value)
-              .fontSize($r('sys.float.ohos_id_text_size_button1'))
-              .fontWeight(FontWeight.Medium)
-              .layoutWeight(1)
-              .backgroundColor(this.secondaryButton.background? this.secondaryButton.background: $r('sys.color.ohos_id_color_background_transparent'))
-              .fontColor(this.secondaryButton.fontColor ? this.secondaryButton.fontColor: $r('sys.color.ohos_id_color_text_primary_activated'))
-              .onClick(() => {
-                if (this.secondaryButton.action) this.secondaryButton.action()
-                this.controller.close()
-              })
-          }
-        }.width('100%').padding({ left: 16, right: 16, top: 16, bottom: 16 })
-      }
-      .backgroundBlurStyle(BlurStyle.Thick)
-      .borderRadius($r('sys.float.ohos_id_corner_radius_dialog'))
-      .margin({
-        left: $r('sys.float.ohos_id_dialog_margin_start'),
-        right: $r('sys.float.ohos_id_dialog_margin_end'),
-        bottom: $r('sys.float.ohos_id_dialog_margin_bottom')
-      })
-      // 1.backgroundcolor use in blur enable mod mast set this color: colorDialogBgBlur. but now it is not found
-      .backgroundColor($r('sys.color.ohos_id_color_dialog_bg'))
-  }
-}
-
-@CustomDialog
-export struct AlertDialog{
-  controller: CustomDialogController
-  content: ResourceStr = ''
-  primaryButton?: ButtonOptions = {value: ""}
-  secondaryButton?: ButtonOptions = {value: ""}
-  build() {
-    Column() {
-      Row() {
-        Text(this.content)
-          .fontSize($r('sys.float.ohos_id_text_size_body1'))
-          .fontWeight(FontWeight.Medium)
-          .fontColor($r('sys.color.ohos_id_color_text_primary'))
-      }.padding({ left: 24, right: 24, top: 24 })
-      Row() {
-        if (this.primaryButton.value) {
-          Button(this.primaryButton.value)
-            .fontSize($r('sys.float.ohos_id_text_size_button1'))
-            .fontWeight(FontWeight.Medium)
-            .layoutWeight(1)
-            .backgroundColor(this.primaryButton.background? this.primaryButton.background: $r('sys.color.ohos_id_color_background_transparent'))
-            .fontColor(this.primaryButton.fontColor ? this.primaryButton.fontColor: $r('sys.color.ohos_id_color_text_primary_activated'))
-            .onClick(() => {
-              if (this.primaryButton.action) this.primaryButton.action()
-              this.controller.close()
-            })
-        }
-        if (this.secondaryButton.value && this.primaryButton.value) {
-          Column() {
-            if (!this.secondaryButton.background) {
-              Divider().width(DIVIDER_WIDTH).height(DIVIDER_HEIGHT).color($r('sys.color.ohos_id_color_list_separator')).vertical(true)
-            }
-          }.width(DIVIDER_CONTAINER_WIDTH).alignItems(HorizontalAlign.Center)
-        }
-        if (this.secondaryButton.value) {
-          Button(this.secondaryButton.value)
-            .fontSize($r('sys.float.ohos_id_text_size_button1'))
-            .fontWeight(FontWeight.Medium)
-            .layoutWeight(1)
-            .backgroundColor(this.secondaryButton.background? this.secondaryButton.background: $r('sys.color.ohos_id_color_background_transparent'))
-            .fontColor(this.secondaryButton.fontColor ? this.secondaryButton.fontColor: $r('sys.color.ohos_id_color_text_primary_activated'))
-            .onClick(() => {
-              if (this.secondaryButton.action) this.secondaryButton.action()
-              this.controller.close()
-            })
-        }
-      }.width('100%').padding({ left: 16, right: 16, top: 16, bottom: 16 })
-    }
-    .backgroundBlurStyle(BlurStyle.Thick)
-    .borderRadius($r('sys.float.ohos_id_corner_radius_dialog'))
-    .margin({
-      left: $r('sys.float.ohos_id_dialog_margin_start'),
-      right: $r('sys.float.ohos_id_dialog_margin_end'),
-      bottom: $r('sys.float.ohos_id_dialog_margin_bottom')
-    })
-    // 1.backgroundcolor use in blur enable mod mast set this color: colorDialogBgBlur. but now it is not found
-    .backgroundColor($r('sys.color.ohos_id_color_dialog_bg'))
-  }
-}
-
-@CustomDialog
-export struct LoadingDialog{
-  controller: CustomDialogController
-  content?: ResourceStr = ''
-  build() {
-    Column() {
-      Row() {
-        Text(this.content)
-          .fontSize($r('sys.float.ohos_id_text_size_body1'))
-          .fontWeight(FontWeight.Medium)
-          .fontColor($r('sys.color.ohos_id_color_text_primary'))
-          .layoutWeight(1)
-        LoadingProgress().width(LOADING_PROGRESS_WIDTH).height(LOADING_PROGRESS_HEIGHT).margin({ left: 16 })
-      }.margin({ left: 24, right: 24, top: 24, bottom: 24 })
-      .constraintSize({minHeight: 48})
-    }
-    .backgroundBlurStyle(BlurStyle.Thick)
-    .borderRadius($r('sys.float.ohos_id_corner_radius_dialog'))
-    .margin({
-      left: $r('sys.float.ohos_id_dialog_margin_start'),
-      right: $r('sys.float.ohos_id_dialog_margin_end'),
-      bottom: $r('sys.float.ohos_id_dialog_margin_bottom')
-    })
-    // 1.backgroundcolor use in blur enable mod mast set this color: colorDialogBgBlur. but now it is not found
-    .backgroundColor($r('sys.color.ohos_id_color_dialog_bg'))
-  }
-}

source/ComposeListItem/ComposeListItem.ets

@@ -1,488 +0,0 @@
-/*
- * Copyright (c) 2023-2023 Huawei Device Co., Ltd.
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-export enum IconType {
-  BADGE = 1,
-  NORMAL_ICON,
-  SYSTEM_ICON,
-  HEAD_SCULPTURE,
-  APP_ICON,
-  PREVIEW,
-  LONGITUDINAL,
-  VERTICAL
-}
-
-enum ItemHeight {
-  FIRST_HEIGHT = 48,
-  SECOND_HEIGHT = 56,
-  THIRD_HEIGHT = 64,
-  FOURTH_HEIGHT = 72,
-  FIFTH_HEIGHT = 96
-}
-
-export type OperateItem = {
-  icon?: OperateIcon,
-  subIcon ?: OperateIcon,
-  button?: OperateButton;
-  switch?: OperateCheck;
-  checkbox?: OperateCheck;
-  radio?: OperateCheck;
-  image?: ResourceStr;
-  text?: ResourceStr;
-  arrow?: OperateIcon;
-}
-
-export type ContentItem = {
-  iconStyle?: IconType;
-  icon?: ResourceStr;
-  primaryText?: ResourceStr;
-  secondaryText?: ResourceStr;
-  description?: ResourceStr;
-}
-
-const LISTITEMCARD_BORDER_HIDDEN = 0;
-const TEXT_MAX_LINE = 1;
-const LISTITEMCARD_BORDER_SHOWN = 2;
-const TEXT_COLUMN_SPACE = 2;
-const TEXT_SAFE_MARGIN = 8;
-const BADGE_SIZE = 8;
-const SMALL_ICON_SIZE = 16;
-const SYSTEM_ICON_SIZE = 24;
-const SAFE_LIST_PADDING = 32;
-const HEADSCULPTURE_SIZE = 40;
-const BUTTON_SIZE = 28;
-const APP_ICON_SIZE = 64;
-const PREVIEW_SIZE = 96;
-const LONGITUDINAL_SIZE = 96;
-const VERTICAL_SIZE = 96;
-const NORMAL_ITEM_ROW_SPACE = 16;
-const SPECIAL_ITEM_ROW_SPACE = 0;
-const SPECIAL_ICON_SIZE = 0;
-const DEFAULT_ROW_SPACE = 0;
-const SPECICAL_ROW_SPACE = 4;
-const OPERATEITEM_ICONLIKE_SIZE = 24;
-const OPERATEITEM_ARROW_WIDTH = 12
-const OPERATEITEM_ICON_CLICKABLE_SIZE = 48;
-const OPERATEITEM_IMAGE_SIZE = 48;
-const HOVERING_COLOR = '#0d000000';
-const TOUCH_DOWN_COLOR = '#1a000000';
-const ACTIVED_COLOR = '#1a0a59f7';
-
-@Component
-struct ContentItemStruct {
-  iconStyle: IconType = null
-  icon: Resource = null
-  title: string = null
-  subtitle: string = null
-  description: string = null
-  private iconSizeMap: Map<number, number> = new Map([
-    [IconType.BADGE, BADGE_SIZE],
-    [IconType.NORMAL_ICON, SMALL_ICON_SIZE],
-    [IconType.SYSTEM_ICON, SYSTEM_ICON_SIZE],
-    [IconType.HEAD_SCULPTURE, HEADSCULPTURE_SIZE],
-    [IconType.APP_ICON, APP_ICON_SIZE],
-    [IconType.PREVIEW, PREVIEW_SIZE],
-    [IconType.LONGITUDINAL, LONGITUDINAL_SIZE],
-    [IconType.VERTICAL, VERTICAL_SIZE]
-  ])
-  private itemHeight: number = ItemHeight.FIRST_HEIGHT
-  private itemRowSpace: number = NORMAL_ITEM_ROW_SPACE
-
-  aboutToAppear() {
-    if (this.subtitle == null && this.description == null) {
-      if (this.icon == null) {
-        this.itemHeight = ItemHeight.FIRST_HEIGHT
-      }
-      else {
-        this.itemHeight = this.iconStyle <= IconType.HEAD_SCULPTURE ? ItemHeight.SECOND_HEIGHT : ItemHeight.THIRD_HEIGHT
-      }
-    }
-    else if (this.description == null) {
-      if (this.icon == null || (this.icon != null && this.iconStyle <= IconType.SYSTEM_ICON)) {
-        this.itemHeight = ItemHeight.THIRD_HEIGHT
-      }
-      else {
-        this.itemHeight = ItemHeight.FOURTH_HEIGHT
-      }
-    }
-    else {
-      this.itemHeight = ItemHeight.FIFTH_HEIGHT
-    }
-
-    if (this.icon == null && this.iconStyle == null) {
-      this.itemRowSpace = SPECIAL_ITEM_ROW_SPACE
-    }
-
-    if (this.iconSizeMap.get(this.iconStyle) >= this.itemHeight) {
-      this.itemHeight = this.iconSizeMap.get(this.iconStyle) + SAFE_LIST_PADDING;
-    }
-  }
-
-  @Builder
-  createIcon() {
-    if (this.icon != null && this.iconStyle != null) {
-      if (this.iconStyle <= IconType.PREVIEW) {
-        Image(this.icon)
-          .objectFit(ImageFit.Contain)
-          .width(this.iconSizeMap.get(this.iconStyle))
-          .height(this.iconSizeMap.get(this.iconStyle))
-          .borderRadius($r('sys.float.ohos_id_corner_radius_default_m'))
-          .focusable(true)
-      }
-      else {
-        Image(this.icon)
-          .objectFit(ImageFit.Contain)
-          .constraintSize({
-            minWidth: SPECIAL_ICON_SIZE,
-            maxWidth: this.iconSizeMap.get(this.iconStyle),
-            minHeight: SPECIAL_ICON_SIZE,
-            maxHeight: this.iconSizeMap.get(this.iconStyle)
-          })
-          .borderRadius($r('sys.float.ohos_id_corner_radius_default_m'))
-          .focusable(true)
-      }
-    }
-  }
-
-  @Builder
-  createText() {
-    Column({ space: TEXT_COLUMN_SPACE }) {
-      Text(this.title)
-        .fontSize($r('sys.float.ohos_id_text_size_body1'))
-        .fontColor($r('sys.color.ohos_id_color_text_primary'))
-        .maxLines(TEXT_MAX_LINE)
-        .textOverflow({ overflow: TextOverflow.Ellipsis })
-        .focusable(true)
-      if (this.subtitle != null) {
-        Text(this.subtitle)
-          .fontSize($r('sys.float.ohos_id_text_size_body2'))
-          .fontColor($r('sys.color.ohos_id_color_text_secondary'))
-          .maxLines(TEXT_MAX_LINE)
-          .textOverflow({ overflow: TextOverflow.Ellipsis })
-          .focusable(true)
-      }
-      if (this.description != null) {
-        Text(this.description)
-          .fontSize($r('sys.float.ohos_id_text_size_body2'))
-          .fontColor($r('sys.color.ohos_id_color_text_secondary'))
-          .maxLines(TEXT_MAX_LINE)
-          .textOverflow({ overflow: TextOverflow.Ellipsis })
-          .focusable(true)
-      }
-    }
-    .margin({
-      top: TEXT_SAFE_MARGIN,
-      bottom: TEXT_SAFE_MARGIN
-    })
-    .alignItems(HorizontalAlign.Start)
-  }
-
-  build() {
-    Row({ space: this.itemRowSpace }) {
-      this.createIcon()
-      this.createText()
-    }
-    .height(this.itemHeight)
-  }
-}
-
-@Component
-struct OperateItemStruct {
-  arrow: OperateIcon = null
-  icon: OperateIcon = null
-  subIcon: OperateIcon = null
-  button: OperateButton = null
-  switch: OperateCheck = null
-  checkBox: OperateCheck = null
-  radio: OperateCheck = null
-  image: Resource = null
-  text: string = null
-  @State switchState: boolean = false
-  @State radioState: boolean = false
-  @State checkBoxState: boolean = false
-  private rowSpace: number = DEFAULT_ROW_SPACE
-
-  aboutToAppear() {
-    if (this.switch != null) {
-      this.switchState = this.switch.isCheck
-    }
-    if (this.radio != null) {
-      this.radioState = this.radio.isCheck
-    }
-    if (this.checkBox != null) {
-      this.checkBoxState = this.checkBox.isCheck
-    }
-
-    if ((this.button == null && this.image == null && this.icon != null && this.text != null) ||
-      (this.button == null && this.image == null && this.icon == null && this.arrow != null && this.text != null)) {
-      this.rowSpace = SPECICAL_ROW_SPACE
-    }
-  }
-
-  @Builder
-  createButton(text: string) {
-    Button(text)
-      .fontSize($r('sys.float.ohos_id_text_size_button3'))
-      .fontColor($r('sys.color.ohos_id_color_text_primary_activated_transparent'))
-      .height(BUTTON_SIZE)
-      .backgroundColor($r('sys.color.ohos_id_color_button_normal'))
-      .labelStyle({
-        maxLines: TEXT_MAX_LINE
-      })
-  }
-
-  @Builder
-  createIcon(icon: OperateIcon) {
-    Row() {
-      Image(icon.value)
-        .height(OPERATEITEM_ICONLIKE_SIZE)
-        .width(OPERATEITEM_ICONLIKE_SIZE)
-        .focusable(true)
-        .fillColor($r('sys.color.ohos_id_color_primary'))
-    }
-    .height(OPERATEITEM_ICON_CLICKABLE_SIZE)
-    .width(OPERATEITEM_ICON_CLICKABLE_SIZE)
-    .justifyContent(FlexAlign.Center)
-    .onClick(icon.action)
-  }
-
-  @Builder
-  createImage(image: Resource) {
-    Image(image)
-      .height(OPERATEITEM_IMAGE_SIZE)
-      .width(OPERATEITEM_IMAGE_SIZE)
-  }
-
-  @Builder
-  createText(text: string) {
-    Text(text)
-      .fontSize($r('sys.float.ohos_id_text_size_body2'))
-      .fontColor($r('sys.color.ohos_id_color_text_secondary'))
-      .focusable(true)
-  }
-
-  @Builder
-  createArrow(icon: OperateIcon) {
-    Image(icon.value)
-      .height(OPERATEITEM_ICONLIKE_SIZE)
-      .width(OPERATEITEM_ARROW_WIDTH)
-      .focusable(true)
-      .fillColor($r('sys.color.ohos_id_color_fourth'))
-      .onClick(icon.action)
-  }
-
-  @Builder
-  createRadio(radio: OperateCheck) {
-    Radio({ value: null, group: null })
-      .checked(this.radioState)
-      .onChange(radio.onChange)
-      .height(OPERATEITEM_ICONLIKE_SIZE)
-      .width(OPERATEITEM_ICONLIKE_SIZE)
-  }
-
-  @Builder
-  createCheckBox(checkBox: OperateCheck) {
-    Checkbox()
-      .select(this.checkBoxState)
-      .onChange(checkBox.onChange)
-      .height(OPERATEITEM_ICONLIKE_SIZE)
-      .height(OPERATEITEM_ICONLIKE_SIZE)
-  }
-
-  @Builder
-  createSwitch(toggleParams: OperateCheck) {
-    Row() {
-      Toggle({ type: ToggleType.Switch, isOn: this.switchState })
-        .onChange(toggleParams.onChange)
-        .onClick(() => {
-          this.switchState = !this.switchState
-        })
-    }
-    .height(OPERATEITEM_ICON_CLICKABLE_SIZE)
-    .width(OPERATEITEM_ICON_CLICKABLE_SIZE)
-    .justifyContent(FlexAlign.Center)
-  }
-
-  build() {
-    Row({
-      space: this.rowSpace
-    }) {
-      if (this.button != null) {
-        this.createButton(this.button.text)
-      }
-
-      else if (this.image != null) {
-        this.createImage(this.image)
-      }
-      else if (this.icon != null && this.text != null) {
-        this.createText(this.text)
-        this.createIcon(this.icon)
-      }
-      else if (this.arrow != null && this.text == null) {
-        this.createArrow(this.arrow)
-      }
-      else if (this.arrow != null && this.text != null) {
-        this.createText(this.text)
-        this.createArrow(this.arrow)
-      }
-      else if (this.text != null) {
-        this.createText(this.text)
-      }
-      else if (this.radio != null) {
-        this.createRadio(this.radio)
-      }
-      else if (this.checkBox != null) {
-        this.createCheckBox(this.checkBox)
-      }
-      else if (this.switch != null) {
-        this.createSwitch(this.switch)
-      }
-      else if (this.icon != null) {
-        this.createIcon(this.icon)
-        if (this.subIcon != null) {
-          this.createIcon(this.subIcon)
-        }
-      }
-    }
-  }
-}
-
-/**
- * Declare type OperateIcon
- * @typedef OperationOption
- * @syscap SystemCapability.ArkUI.ArkUI.Full
- * @since 10
- */
-export declare type OperateIcon = {
-  /**
-   * The content of text or the address of icon.
-   * @type { ResourceStr }.
-   * @since 10
-   */
-  value: ResourceStr,
-
-  /**
-   * Callback function when operate the icon.
-   * @type { () => void }.
-   * @since 10
-   */
-  action?: () => void
-}
-
-export type OperateButton = {
-  /**
-   * The text on the button.
-   * @type { ResourceStr }.
-   * @since 10
-   */
-  text?: string
-}
-
-/**
- * Declare type OperateCheck
- * @typedef OperationOption
- * @syscap SystemCapability.ArkUI.ArkUI.Full
- * @since 10
- */
-export declare type OperateCheck = {
-  /**
-   * Whether is checked on default.
-   * @type { ResourceStr }.
-   * @since 10
-   */
-  isCheck?: boolean,
-
-  /**
-   * Callback function when operate the checkbox/switch/radio.
-   * @type { () => void }.
-   * @since 10
-   */
-  onChange?: (value: boolean) => void
-}
-
-@Component
-export struct ComposeListItem {
-  @Prop contentItem: ContentItem = null;
-  @Prop operateItem: OperateItem = null;
-  @State frontColor: string = Color.Transparent.toString()
-  @State borderSize: number = 0;
-  private isActive: boolean = false
-
-  build() {
-    Column() {
-      Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) {
-        if (this.contentItem == null) {
-          ContentItemStruct({
-            title: null
-          })
-        }
-        if (this.contentItem != null) {
-          ContentItemStruct({
-            icon: typeof this.contentItem.icon === 'string' ? null : this.contentItem.icon,
-            iconStyle: this.contentItem.iconStyle,
-            title: typeof this.contentItem.primaryText === 'string' ? this.contentItem.primaryText : null,
-            subtitle: typeof this.contentItem.secondaryText === 'string' ? this.contentItem.secondaryText : null,
-            description: typeof this.contentItem.description === 'string' ? this.contentItem.description : null
-          })
-        }
-        if (this.operateItem != null) {
-          OperateItemStruct({
-            icon: this.operateItem.icon,
-            subIcon: this.operateItem.subIcon,
-            button: this.operateItem.button,
-            switch: this.operateItem.switch,
-            checkBox: this.operateItem.checkbox,
-            radio: this.operateItem.radio,
-            image: typeof this.operateItem.image === 'string' ? null : this.operateItem.image,
-            text: typeof this.operateItem.text === 'string' ? this.operateItem.text : null,
-            arrow: typeof this.operateItem.arrow === 'string' ? null : this.operateItem.arrow
-          })
-        }
-      }
-      .focusable(true)
-      .border({
-        width: this.borderSize,
-        color: $r('sys.color.ohos_id_color_focused_outline')
-      })
-      .borderRadius($r('sys.float.ohos_id_corner_radius_default_m'))
-      .backgroundColor(this.frontColor)
-      .onFocus(() => {
-        this.borderSize = LISTITEMCARD_BORDER_SHOWN
-      })
-      .onBlur(() => {
-        this.borderSize = LISTITEMCARD_BORDER_HIDDEN
-      })
-      .onHover((isHover: boolean) => {
-        this.frontColor = isHover ? HOVERING_COLOR : (this.isActive ? ACTIVED_COLOR : Color.Transparent.toString())
-      })
-      .onTouch((event: TouchEvent) => {
-        if (event.type == TouchType.Down) {
-          this.frontColor = TOUCH_DOWN_COLOR
-        }
-        if (event.type == TouchType.Up) {
-          this.frontColor = this.isActive ? ACTIVED_COLOR : Color.Transparent.toString()
-        }
-      })
-      .onClick(() => {
-        this.isActive = !this.isActive
-        this.frontColor = this.isActive ? ACTIVED_COLOR : Color.Transparent.toString()
-      })
-    }
-    .padding({
-      left: $r('sys.float.ohos_id_default_padding_start'),
-      right: $r('sys.float.ohos_id_default_padding_end')
-    })
-  }
-}

source/ComposeTitleBar/ComposeTitleBar.ets

@@ -1,369 +0,0 @@
-/*
- * Copyright (c) 2023-2023 Huawei Device Co., Ltd.
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { KeyCode } from '@ohos.multimodalInput.keyCode'
-
-export declare type ComposeTitleBarMenuItem = {
-  value: ResourceStr
-  isEnabled: boolean
-  action?: () => void
-}
-
-const PUBLIC_MORE = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMAAAADACAY' +
-  'AAABS3GwHAAAAIGNIUk0AAHomAACAhAAA+gAAAIDoAAB1MAAA6mAAADqYAAAXcJy6UTwAAAAEZ0FNQQAAsY58+1GTAAA' +
-  'AAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAAOxAAADsQBlSsOGwAABEZJREFUeNrt3D1rFFEUBuA' +
-  'xhmAhFlYpUohYiYWFRcAmKAhWK2pjo1iKf8BCMIKFf8BarCyMhVj4VZhGSKEg2FqJyCKWIhYWnstMINgYsh+cmfs88BI' +
-  'Cydxw7jmzu2HvNg0AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADBN+3r6dx+LXIqsRpa7FF8j48hm5Fn3Peo9mAEYRdY' +
-  'jJ3f582Vj7nZfUe/eDsCRyMPI2h5/fyNyI/JDT6v3Tvt7sBllE15ETkxwjeORi5G3ke/6W737MgBnI68jh6ZwrcORq5H' +
-  'nhkC9+zAA5YXXy8jBKV5zKXIu8jjyS7+rd+YBeNVtyrSVO9PRyBM9r94LSTfjWuTUDK9/eYIXeENUbb0zDsBi5PYc1rm' +
-  'j79U74wCszuih+F/ljrSi/+uud8YBGA10rayqrnfGAVgb6FpZVV3vjAOwPNC1sqq63hkHYGWga2VVdb0XKt/8Rf1fd70' +
-  'zDsB4jmt5u3Tl9a59AMb6v+56ZxyArYGulVXV9c44ABtzXOup/q+73hkH4N2cHio/Rj7r/7rrnXEAfkfuz2Gddb2v3ln' +
-  '/DfpgxneLzaY9xE3l9c46AH8iVyI/Z3Dt8nB/Xc+rd5H5QMy3yJemPVs6zY0edc9HUe/0Z4I/dQ/N5Vjd0oTXKp9QcKF' +
-  'pD2qj3r0YgO1NeRM507TH6/bifeR85IMeV++d+vTBWOV9JDcjt5rdv6uw3M3uRR7pa/Xu+wBsOxA53bTnTP/3UX1b3fN' +
-  'Q1BsAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAKqyr6d/97HIpchqZLlL8TUyjmxGnnX' +
-  'fo96DGYBRZD1ycpc/XzbmbvcV9e7tAByJPIys7fH3NyI3Ij/0tHrvtL8Hm1E24UXkxATXOB65GHkb+a6/1bsvA3A28jp' +
-  'yaArXOhy5GnluCNS7DwNQXni9jByc4jWXIucijyO/9Lt6Zx6AV92mTFu5Mx2NPNHz6r2QdDOuRU7N8PqXJ3iBN0TV1jv' +
-  'jACxGbs9hnTv6Xr0zDsDqjB6K/1XuSCv6v+56ZxyA0UDXyqrqemccgLWBrpVV1fXOOADLA10rq6rrnXEAVga6VlZV13u' +
-  'h8s1f1P911zvjAIznuJa3S1de79oHYKz/6653xgHYGuhaWVVd74wDsDHHtZ7q/7rrnXEA3s3pofJj5LP+r7veGQfgd+T' +
-  '+HNZZ1/vqnfXfoA9mfLfYbNpD3FRe76wD8CdyJfJzBtcuD/fX9bx6F5kPxHyLfGnas6XT3OhR93wU9U5/JvhT99BcjtU' +
-  'tTXit8gkFF5r2oDbq3YsB2N6UN5EzTXu8bi/eR85HPuhx9d6pTx+MVd5HcjNyq9n9uwrL3exe5JG+Vu++D8C2A5HTTXv' +
-  'O9H8f1bfVPQ9FvQEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgCn7C9HjBtwWfXpKAAAAAElFTkSuQmCC'
-
-const PUBLIC_BACK = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMAAAADACAY' +
-  'AAABS3GwHAAAAIGNIUk0AAHomAACAhAAA+gAAAIDoAAB1MAAA6mAAADqYAAAXcJy6UTwAAAAEZ0FNQQAAsY58+1GTAAAAA' +
-  'XNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAAOxAAADsQBlSsOGwAAA8VJREFUeNrt3LFLlHEYwPFXz0G' +
-  'iIZpEoikkwsFRIiK3gqCigxIC/4Kmhv6OoChouaGoqKCgCKducGh0cDAIamhwiCaHCIeelztpUszee/vl8/nAM3Vd8nufr' +
-  '+fddVYVAAAAAAAAAAAAAAAAAAAAAABQijFH0KhrMd2Y2ZitmNWYRzHLjkYAB9lUzMOYizv8eS/mZsymoypLxxE0svzvY07' +
-  'vcpu5mOmY145LAAdx+U/u4bZzwx+JPjq2cow7glaWf1vXsQkg6/JvPwoggJTLjwDSL/8nRyiAzN/5nzpGAWRd/n7MM0cpg' +
-  'IzLvx6z6CjL453gdpZ/IWbDcQrA8iMAy48ALD8CsPwIwPIjAMuPACw/ArD8CMDyIwDLjwAsPwKw/AjA8iMAy48ALD8CsPw' +
-  'IwPIjAMuPACw/ArD85A3A8pM2AMtP2gAsP2kDsPykDcDykzYAy0/aACw/aQOw/KQNwPKTNgDLT9oALD9pA7D8pA3A8pM2A' +
-  'MtP2gAsP2kDsPykDcDykzYAy0/aACw/aQOw/KQNwPKTNgDLT9oALD9pA7D8pA3A8pM2AMtP2gAsP2kDsPykDcDykzYAy0/' +
-  'aACw/aQOw/KQNwPLz3xlv6H4mYp5YfrI+AizF9BwnI/AlZi3mbsxy03feaeh+HsQcc60YgSMxMzE3YmZj3sX8LOlHoPoLn' +
-  'HedaEE35n5pzwF856dN9SPBpZICmHRNaNnlkgL46nrQsvmSAqhftlx1TWjR4ZICqPVcE1q0XloA96rBa7XQhl5pAWzFXKm' +
-  '8i8vo9WMeN3VnnQa/sO8xL2POxEy7Toxo+RdjNpu6w1F9HuBqNXi99lw1eKMM9utHzIeYV8MftbccCQAAAAAAsBdt/XLc+s' +
-  'Py9W+MmPqL+1iJuVA1+C4gdFr6d77FvK0GH2nb739lPR5zNuZ51eBnQhFAJQIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIE' +
-  'IAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAI' +
-  'EIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIE8M8jmBlGgABSRnAqZiXms+MUQNYIDnkUKMu4I/gj6z' +
-  'ELMRv7/PsnHKEAMkcw6fgEkDmCNUcngMwRvHFsngRnfWJcL/9tRyaAgxrB+ZijO9ymH7MUs+m4yjLmCBozEXMr5nr1+9We1' +
-  'ZgXMXccDwAAAAAAAAAAAAAAAAAAAAAAwO5+AfVgtqHKRnawAAAAAElFTkSuQmCC'
-
-@Component
-export struct ComposeTitleBar {
-  item: ComposeTitleBarMenuItem
-  title: ResourceStr
-  subtitle: ResourceStr
-  menuItems: Array<ComposeTitleBarMenuItem>
-
-  @State titleMaxWidth: number = 0
-  @State isItemOnFocus: boolean = false
-
-  private static readonly totalHeight = 56
-  private static readonly leftPadding = 12
-  private static readonly rightPadding = 12
-  private static readonly portraitImageSize = 40
-  private static readonly portraitImageLeftPadding = 4
-  private static readonly portraitImageRightPadding = 16
-
-  build() {
-    Flex({
-      justifyContent: FlexAlign.SpaceBetween,
-      alignItems: ItemAlign.Stretch
-    }) {
-      Row() {
-        Navigator() {
-          ImageMenuItem({ item: {
-            value: PUBLIC_BACK,
-            isEnabled: true
-          } })
-        }
-        if (this.item !== undefined) {
-          Image(this.item.value)
-            .width(ComposeTitleBar.portraitImageSize)
-            .height(ComposeTitleBar.portraitImageSize)
-            .margin({
-              left: $r('sys.float.ohos_id_text_paragraph_margin_xs'),
-              right: $r('sys.float.ohos_id_text_paragraph_margin_m')
-            })
-            .focusable(this.item.isEnabled)
-            .borderRadius(ImageMenuItem.buttonBorderRadius)
-            .onFocus(() => this.isItemOnFocus = true)
-            .onBlur(() => this.isItemOnFocus = false)
-            .border(this.isItemOnFocus ?
-              { width: ImageMenuItem.focusBorderWidth,
-                color: $r('sys.color.ohos_id_color_emphasize'),
-                style: BorderStyle.Solid
-              } : { width: 0 })
-            .onClick(() => this.item.isEnabled && this.item.action && this.item.action())
-        }
-        Column() {
-          if (this.title !== undefined) {
-            Row() {
-              Text(this.title)
-                .fontWeight(FontWeight.Medium)
-                .fontSize($r('sys.float.ohos_id_text_size_headline8'))
-                .fontColor($r('sys.color.ohos_id_color_titlebar_text'))
-                .maxLines(this.subtitle !== undefined ? 1 : 2)
-                .textOverflow({ overflow: TextOverflow.Ellipsis })
-                .constraintSize({ maxWidth: this.titleMaxWidth })
-            }
-            .justifyContent(FlexAlign.Start)
-          }
-          if (this.subtitle !== undefined) {
-            Row() {
-              Text(this.subtitle)
-                .fontSize($r('sys.float.ohos_id_text_size_over_line'))
-                .fontColor($r('sys.color.ohos_id_color_titlebar_subtitle_text'))
-                .maxLines(1)
-                .textOverflow({ overflow: TextOverflow.Ellipsis })
-                .constraintSize({ maxWidth: this.titleMaxWidth })
-            }
-            .justifyContent(FlexAlign.Start)
-          }
-        }
-        .justifyContent(FlexAlign.Start)
-        .alignItems(HorizontalAlign.Start)
-        .constraintSize({ maxWidth: this.titleMaxWidth })
-      }
-      .margin({ left: $r('sys.float.ohos_id_default_padding_start') })
-      if (this.menuItems !== undefined && this.menuItems.length > 0) {
-        CollapsibleMenuSection({ menuItems: this.menuItems })
-      }
-    }
-    .width('100%')
-    .height(ComposeTitleBar.totalHeight)
-    .backgroundColor($r('sys.color.ohos_id_color_background'))
-    .onAreaChange((_oldValue: Area, newValue: Area) => {
-      let newWidth = Number(newValue.width)
-      if (this.menuItems !== undefined) {
-        let menusLength = this.menuItems.length
-        if (menusLength >= CollapsibleMenuSection.maxCountOfVisibleItems) {
-          newWidth = newWidth - ImageMenuItem.imageHotZoneWidth * CollapsibleMenuSection.maxCountOfVisibleItems
-        } else if (menusLength > 0) {
-          newWidth = newWidth - ImageMenuItem.imageHotZoneWidth * menusLength
-        }
-      }
-      this.titleMaxWidth = newWidth
-      this.titleMaxWidth -= ComposeTitleBar.leftPadding
-      this.titleMaxWidth -= ImageMenuItem.imageHotZoneWidth
-      if (this.item !== undefined) {
-        this.titleMaxWidth -= ComposeTitleBar.portraitImageLeftPadding
-          + ComposeTitleBar.portraitImageSize
-          + ComposeTitleBar.portraitImageRightPadding
-      }
-      this.titleMaxWidth -= ComposeTitleBar.rightPadding
-    })
-  }
-}
-
-@Component
-struct CollapsibleMenuSection {
-  menuItems: Array<ComposeTitleBarMenuItem>
-
-  static readonly maxCountOfVisibleItems = 3
-  private static readonly focusPadding = 4
-  private static readonly marginsNum = 2
-
-  @State isPopupShown: boolean = false
-
-  @State isMoreIconOnFocus: boolean = false
-  @State isMoreIconOnHover: boolean = false
-  @State isMoreIconOnClick: boolean = false
-
-  getMoreIconFgColor() {
-    return this.isMoreIconOnClick
-      ? $r('sys.color.ohos_id_color_titlebar_icon_pressed')
-      : $r('sys.color.ohos_id_color_titlebar_icon')
-  }
-
-  getMoreIconBgColor() {
-    if (this.isMoreIconOnClick) {
-      return $r('sys.color.ohos_id_color_click_effect')
-    } else if (this.isMoreIconOnHover) {
-      return $r('sys.color.ohos_id_color_hover')
-    } else {
-      return Color.Transparent
-    }
-  }
-
-  build() {
-    Column() {
-      Row() {
-        if (this.menuItems.length <= CollapsibleMenuSection.maxCountOfVisibleItems) {
-          ForEach(this.menuItems, (item) => {
-            ImageMenuItem({ item: item })
-          })
-        } else {
-          ForEach(this.menuItems.slice(0, CollapsibleMenuSection.maxCountOfVisibleItems - 1), (item) => {
-            ImageMenuItem({ item: item })
-          })
-
-          Row() {
-            Image(PUBLIC_MORE)
-              .width(ImageMenuItem.imageSize)
-              .height(ImageMenuItem.imageSize)
-              .focusable(true)
-          }
-          .width(ImageMenuItem.imageHotZoneWidth)
-          .height(ImageMenuItem.imageHotZoneWidth)
-          .borderRadius(ImageMenuItem.buttonBorderRadius)
-          .foregroundColor(this.getMoreIconFgColor())
-          .backgroundColor(this.getMoreIconBgColor())
-          .justifyContent(FlexAlign.Center)
-          .border(this.isMoreIconOnFocus ?
-            { width: ImageMenuItem.focusBorderWidth,
-              color: $r('sys.color.ohos_id_color_emphasize'),
-              style: BorderStyle.Solid
-            } : { width: 0 })
-          .onFocus(() => this.isMoreIconOnFocus = true)
-          .onBlur(() => this.isMoreIconOnFocus = false)
-          .onHover((isOn) => this.isMoreIconOnHover = isOn)
-          .onKeyEvent((event) => {
-            if (event.keyCode !== KeyCode.KEYCODE_ENTER && event.keyCode !== KeyCode.KEYCODE_SPACE) {
-              return
-            }
-            if (event.type === KeyType.Down) {
-              this.isMoreIconOnClick = true
-            }
-            if (event.type === KeyType.Up) {
-              this.isMoreIconOnClick = false
-            }
-          })
-          .onTouch((event) => {
-            if (event.type === TouchType.Down) {
-              this.isMoreIconOnClick = true
-            }
-            if (event.type === TouchType.Up) {
-              this.isMoreIconOnClick = false
-            }
-          })
-          .onClick(() => this.isPopupShown = true)
-          .bindPopup(this.isPopupShown, {
-            builder: this.popupBuilder,
-            placement: Placement.Bottom,
-            popupColor: Color.White,
-            enableArrow: false,
-            onStateChange: (e) => this.isPopupShown = e.isVisible
-          })
-        }
-      }
-    }
-    .height('100%')
-    .margin({ right: $r('sys.float.ohos_id_default_padding_end') })
-    .justifyContent(FlexAlign.Center)
-  }
-
-  @Builder popupBuilder() {
-    Column() {
-      ForEach(this.menuItems.slice(CollapsibleMenuSection.maxCountOfVisibleItems - 1, this.menuItems.length), (item, _index?) => {
-        ImageMenuItem({ item: item })
-      })
-    }
-    .width(ImageMenuItem.imageHotZoneWidth + CollapsibleMenuSection.focusPadding * CollapsibleMenuSection.marginsNum)
-    .margin({ top: CollapsibleMenuSection.focusPadding, bottom: CollapsibleMenuSection.focusPadding })
-  }
-}
-
-@Component
-struct ImageMenuItem {
-  item: ComposeTitleBarMenuItem
-
-  static readonly imageSize = 24
-  static readonly imageHotZoneWidth = 48
-  static readonly buttonBorderRadius = 8
-  static readonly focusBorderWidth = 2
-  static readonly disabledImageOpacity = 0.4
-
-  @State isOnFocus: boolean = false
-  @State isOnHover: boolean = false
-  @State isOnClick: boolean = false
-
-  getFgColor() {
-    return this.isOnClick
-      ? $r('sys.color.ohos_id_color_titlebar_icon_pressed')
-      : $r('sys.color.ohos_id_color_titlebar_icon')
-  }
-
-  getBgColor() {
-    if (this.isOnClick) {
-      return $r('sys.color.ohos_id_color_click_effect')
-    } else if (this.isOnHover) {
-      return $r('sys.color.ohos_id_color_hover')
-    } else {
-      return Color.Transparent
-    }
-  }
-
-  build() {
-    Row() {
-      Image(this.item.value)
-        .width(ImageMenuItem.imageSize)
-        .height(ImageMenuItem.imageSize)
-        .focusable(this.item.isEnabled)
-    }
-    .width(ImageMenuItem.imageHotZoneWidth)
-    .height(ImageMenuItem.imageHotZoneWidth)
-    .borderRadius(ImageMenuItem.buttonBorderRadius)
-    .foregroundColor(this.getFgColor())
-    .backgroundColor(this.getBgColor())
-    .justifyContent(FlexAlign.Center)
-    .opacity(this.item.isEnabled ? 1 : ImageMenuItem.disabledImageOpacity)
-    .border(this.isOnFocus ?
-      { width: ImageMenuItem.focusBorderWidth,
-        color: $r('sys.color.ohos_id_color_emphasize'),
-        style: BorderStyle.Solid
-      } : { width: 0 })
-    .onFocus(() => {
-      if (!this.item.isEnabled) {
-        return
-      }
-      this.isOnFocus = true
-    })
-    .onBlur(() => this.isOnFocus = false)
-    .onHover((isOn) => {
-      if (!this.item.isEnabled) {
-        return
-      }
-      this.isOnHover = isOn
-    })
-    .onKeyEvent((event) => {
-      if (!this.item.isEnabled) {
-        return
-      }
-      if (event.keyCode !== KeyCode.KEYCODE_ENTER && event.keyCode !== KeyCode.KEYCODE_SPACE) {
-        return
-      }
-      if (event.type === KeyType.Down) {
-        this.isOnClick = true
-      }
-      if (event.type === KeyType.Up) {
-        this.isOnClick = false
-      }
-    })
-    .onTouch((event) => {
-      if (!this.item.isEnabled) {
-        return
-      }
-      if (event.type === TouchType.Down) {
-        this.isOnClick = true
-      }
-      if (event.type === TouchType.Up) {
-        this.isOnClick = false
-      }
-    })
-    .onClick(() => this.item.isEnabled && this.item.action && this.item.action())
-  }
-}
-
-export default {ComposeTitleBar}

source/EditableTitleBar/EditableTitleBar.ets

@@ -1,282 +0,0 @@
-/*
- * Copyright (c) 2023-2023 Huawei Device Co., Ltd.
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { KeyCode } from '@ohos.multimodalInput.keyCode'
-
-export enum EditableLeftIconType {
-  Back,
-  Cancel
-}
-
-export declare type EditableTitleBarMenuItem = {
-  value: ResourceStr
-  isEnabled: boolean
-  action?: () => void
-}
-
-const PUBLIC_CANCEL = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMAAAADACAYAAABS3Gw' +
-  'HAAAAIGNIUk0AAHomAACAhAAA+gAAAIDoAAB1MAAA6mAAADqYAAAXcJy6UTwAAAAEZ0FNQQAAsY58+1GTAAAAAXNSR0IA' +
-  'rs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAAOxAAADsQBlSsOGwAABKpJREFUeNrt3bFrlHccx/Ff4o2dgkOQ4' +
-  'JzR4SYJgksnbYcGOrTQsUPtpE4d/RNcFBeFlg7NUlTSTrXQQgsKGV0KHTs4ODiJSL8PdxaUGJK7pPc893m94TvleZLnnt' +
-  '/7fcc9z5FrDQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAnDQrPTuej2u2a87VvKp5XLNT87OlGiSf1lx' +
-  '6Zz2/q3kkgLdZr7k5lX8/7tZ8XfOCU4OgW887U/n341bN9T6s56menLAfaj464OfdM8iF6XYv+dV7+X+pOX/ANuOatZqH' +
-  'Amjti5prh9jurAgGI//mIbbtIvi15u9FHvBqD07a50fYdqtmt+YDrg1a/jd8tuiD7kMA4yNuL4LlkH+WtV/KAEYz7COC4' +
-  'cs/69ovXQB7M+4ngmHLP8/aL1UAD+bYVwTDlX/etT8W+nAV6M82uQS6PuP+rg4NV/5vBNDa6za5HLY9xzO5CIYl/9OaT5' +
-  'obYf/xrE1uioggQ/6LNf/04QGd6tHJFQH5owMQAfnjAxAB+eMDEAH54wMQAfnjAxAB+eMDEAH54wMQAfnjAxAB+eMDEAH' +
-  '54wMQAfnjAxAB+eMDEAH54wMQAfnjAxAB+eMDEAH54wMQAfnjAxAB+eMDEAH54wMQAfnjAxAB+eMDSI6A/AKIjYD8AoiN' +
-  'gPwCiI2A/AKIjYD8AoiNgPwCiI2A/AKIjYD8AoiNgPwCiI2A/AKIjYD8AoiNgPwCiI2A/AKIjYD8AoiNgPwCiI2A/AKIj' +
-  'YD8AoiNgPwCiI2A/AKIjYD8AoiNgPwCiI1gjfyLY8UpmJnNqbjrc/yO32pOk98rQPIrwWnyCyA5AvILQATkF4AIyC8AEZ' +
-  'BfACIgvwBEQH4BiID8J8qqU3BiPJ8O+XuMO8Eng8/2CID85BcA+ckvAPKT35tg8h+n/KP2/3/2SADojfzf1+yKYH7cBxi' +
-  'm/N39hWX8RnsBkP9Q8r9BBAKIlV8EAoiXXwQCiJdfBAKIl18EAoiXXwQz4D5A/+Tv2KjZmuPvdfu6T+AVYJDyd3Qfo17G' +
-  'b7QXAPkPzTMRCCBVfhEIIF5+EQggXn4RCCBefhEIIF5+EQggXn4RCCBefhEIIF5+EQggXn4RCCBefhEIIF5+EQggXn4RC' +
-  'CBefhEIIF5+EQggXn4RCCBefhEIwD+qFUFuAOQXQWwA5BdBbADkF0FsAOQXQWwA5BdBbADkF0FsAOQXQWwA5BdBbADkF0' +
-  'FsAOQXQWwA5BdBbADkF0FsAOQXQWwA5BdBbADkF0FsAOQXQWwA5BdBbADkF0FsAOQXQWwA5BdBdAD3a8bkj4rgTM2PAmj' +
-  'ty5or5I+L4FzNHzV/LfKB9OGb4rfJP0iO49xvL/pB9CGAMfljIxgLoLUR+WMjGAmgtT3yx0awJ4DWdsgfG8HOog+6D1eB' +
-  'ntR8WLNB/sFzlKtDnfw3BNDa65rfp2+I3hfBo5rL5B9UBFttcoNzP35qk8vfLxZ9sCs9OnHdG6Kvps8e3TXiVzWPp88Ut' +
-  '3k1OLr1vFpz6Z31/LbmntMDAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEAO/wLvsR65mx80NAAAAABJRU' +
-  '5ErkJggg=='
-
-const PUBLIC_OK = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMAAAADACAYAAABS3' +
-  'GwHAAAAIGNIUk0AAHomAACAhAAA+gAAAIDoAAB1MAAA6mAAADqYAAAXcJy6UTwAAAAEZ0FNQQAAsY58+1GTAAAAAXNSR0IArs4c6QAAAAZ' +
-  'iS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAAOxAAADsQBlSsOGwAAA+lJREFUeNrt3bFrFgccx+GLlSDi4JDBITiJZHBwEBGRIoqKoIu6iVMd3' +
-  'OosCg6W0sm/wEFUDDgpCDoIDoqOKqIoHUrp4CDFoUMRB39HLotoeXMpMXff54EfFE0ivv1+kpQGrmkAAAAAAAAAAAAAAAAAAAAAAAAAAAA' +
-  'AAAAAAAAAAAAAAIBJTHkJGIhddT/V7ajbUPey7l7dlbpPAmCs1tb9Wne2++cvPa07Vfd7nw/+g9eXVT7+m3Wn69Z8421m6w7WXa37KADGN' +
-  'v4TE7ztTN36uvtL/UPWeJ0Z+PgXnejzBwmAMYx/8VuhTQIgcfy9CYCxjP9D3TsBkPqZf95XAFLH3372vyAAEsf/T93Ruvd93tn/CWbo4z9' +
-  'c96jvBxAAseMXANHjFwDR4xcA0eMXANHjFwDR4xcA0eMXANHjFwDR4xcA0eMXANHjFwDR4xcA0eMXANHjFwDR4xcA0eMXANHjFwDR4xcA0' +
-  'eMXANHjFwDR4xcA0eMXANHjFwDR4xcA0eMXANHjFwDR4xcA0eP/HgG0z3f9uVl45uu2ZuGBBu3zXn9rej7mEuMfSgDtA46v1c195ff+rbt' +
-  'U94stGv9KWqnHpLaPsXxSt/k//iXsq9vY9HjUJca/2gNoH2e/c4K32yUC4x9bAOvqrjeTP41GBMY/qgC2151Z4vuIwPhXxEo8I2xdz/c7W' +
-  '3fZXo1/6F8B/q471/N9fSUw/sEH8LEb8hYRGH9iAK3HdafrpkVg/IkBtA8yflt3bBn/3SEC4x9sAK3Xda9EYPypAYjA+OMDEIHxxwcgAuO' +
-  'PD0AExh8fgAiMPz4AERh/fAAiMP74AERg/PEBiMD44wMQgfHHByAC448PQATGHx+ACIw/PgARGH98AMkRGL8AYiMwfgHERmD8AoiNwPgFE' +
-  'BuB8QsgNgLjF0BsBMYvgNgIjF8AsREYvwBiIzB+AcRGYPwCiI3A+AUQG4HxCyA2AuMXQGwExi+A2AiMXwCxERi/AGIjMH4BjDaCTXUP6j5' +
-  '9423aJ2PeMH4BjDWCHd24n9f9+cXvHa+7U7fb+Fe/qeC/ezvU+e5bleX40A11pm6u+xapMX5fARK+Eix+u7O1brbp/1Bw4xfAoCP4Pxi/A' +
-  'GIjMH4BxEZg/AKIjcD4BRAbgfELIDYC4xdAbATGL4DYCIxfAIOL4EXdkbrpZX6sd3WH6p56WQUwJG/qbtX92Cz8EFwfD+sO1L31cq4uU16' +
-  'CibU/M3Sy7nzdlgnf51ndxbrbXj4BjCmEPXX76/Y2Cz8DNNP9+l91f3Sf8e92AQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA' +
-  'AAAAAzKZwK1uX4kZ6mnAAAAAElFTkSuQmCC'
-
-const PUBLIC_BACK = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMAAAADACAY' +
-  'AAABS3GwHAAAAIGNIUk0AAHomAACAhAAA+gAAAIDoAAB1MAAA6mAAADqYAAAXcJy6UTwAAAAEZ0FNQQAAsY58+1GTAAAAA' +
-  'XNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAAOxAAADsQBlSsOGwAAA8VJREFUeNrt3LFLlHEYwPFXz0G' +
-  'iIZpEoikkwsFRIiK3gqCigxIC/4Kmhv6OoChouaGoqKCgCKducGh0cDAIamhwiCaHCIeelztpUszee/vl8/nAM3Vd8nufr' +
-  '+fddVYVAAAAAAAAAAAAAAAAAAAAAABQijFH0KhrMd2Y2ZitmNWYRzHLjkYAB9lUzMOYizv8eS/mZsymoypLxxE0svzvY07' +
-  'vcpu5mOmY145LAAdx+U/u4bZzwx+JPjq2cow7glaWf1vXsQkg6/JvPwoggJTLjwDSL/8nRyiAzN/5nzpGAWRd/n7MM0cpg' +
-  'IzLvx6z6CjL453gdpZ/IWbDcQrA8iMAy48ALD8CsPwIwPIjAMuPACw/ArD8CMDyIwDLjwAsPwKw/AjA8iMAy48ALD8CsPw' +
-  'IwPIjAMuPACw/ArD85A3A8pM2AMtP2gAsP2kDsPykDcDykzYAy0/aACw/aQOw/KQNwPKTNgDLT9oALD9pA7D8pA3A8pM2A' +
-  'MtP2gAsP2kDsPykDcDykzYAy0/aACw/aQOw/KQNwPKTNgDLT9oALD9pA7D8pA3A8pM2AMtP2gAsP2kDsPykDcDykzYAy0/' +
-  'aACw/aQOw/KQNwPLz3xlv6H4mYp5YfrI+AizF9BwnI/AlZi3mbsxy03feaeh+HsQcc60YgSMxMzE3YmZj3sX8LOlHoPoLn' +
-  'HedaEE35n5pzwF856dN9SPBpZICmHRNaNnlkgL46nrQsvmSAqhftlx1TWjR4ZICqPVcE1q0XloA96rBa7XQhl5pAWzFXKm' +
-  '8i8vo9WMeN3VnnQa/sO8xL2POxEy7Toxo+RdjNpu6w1F9HuBqNXi99lw1eKMM9utHzIeYV8MftbccCQAAAAAAsBdt/XLc+s' +
-  'Py9W+MmPqL+1iJuVA1+C4gdFr6d77FvK0GH2nb739lPR5zNuZ51eBnQhFAJQIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIE' +
-  'IAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAI' +
-  'EIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIE8M8jmBlGgABSRnAqZiXms+MUQNYIDnkUKMu4I/gj6z' +
-  'ELMRv7/PsnHKEAMkcw6fgEkDmCNUcngMwRvHFsngRnfWJcL/9tRyaAgxrB+ZijO9ymH7MUs+m4yjLmCBozEXMr5nr1+9We1' +
-  'ZgXMXccDwAAAAAAAAAAAAAAAAAAAAAAwO5+AfVgtqHKRnawAAAAAElFTkSuQmCC'
-
-@Component
-export struct EditableTitleBar {
-  leftIconStyle: EditableLeftIconType
-  title: ResourceStr
-  menuItems: Array<EditableTitleBarMenuItem>
-  onSave?: () => void
-  onCancel?: () => void
-
-  @State titleMaxWidth: number = 0
-
-  static readonly maxCountOfExtraItems = 2
-  private static readonly totalHeight = 56
-  private static readonly leftPadding = 12
-  private static readonly rightPadding = 12
-  private static readonly titlePadding = 16
-
-  build() {
-    Flex({
-      justifyContent: FlexAlign.SpaceBetween,
-      alignItems: ItemAlign.Stretch
-    }) {
-      Row() {
-        if (this.leftIconStyle == EditableLeftIconType.Back) {
-          Navigator() {
-            ImageMenuItem({ item: {
-              value: PUBLIC_BACK,
-              isEnabled: true
-            } })
-          }
-        } else {
-          ImageMenuItem({ item: {
-            value: PUBLIC_CANCEL,
-            isEnabled: true,
-            action: () => this.onCancel && this.onCancel()
-          } })
-        }
-
-        Column() {
-          Text(this.title)
-            .fontWeight(FontWeight.Medium)
-            .fontSize($r('sys.float.ohos_id_text_size_headline8'))
-            .fontColor($r('sys.color.ohos_id_color_titlebar_text'))
-            .maxLines(1)
-            .textOverflow({ overflow: TextOverflow.Ellipsis })
-            .constraintSize({ maxWidth: this.titleMaxWidth })
-        }
-        .justifyContent(FlexAlign.Start)
-        .alignItems(HorizontalAlign.Start)
-        .constraintSize({ maxWidth: this.titleMaxWidth })
-      }
-      .margin({ left: $r('sys.float.ohos_id_default_padding_start') })
-
-      EditableTitleBarMenuSection({
-        menuItems: this.menuItems,
-        onSave: this.onSave
-      })
-    }
-    .width('100%')
-    .height(EditableTitleBar.totalHeight)
-    .backgroundColor($r('sys.color.ohos_id_color_background'))
-    .onAreaChange((_oldValue: Area, newValue: Area) => {
-      let nValue = Number(newValue.width)
-      nValue = nValue - EditableTitleBar.leftPadding - EditableTitleBar.rightPadding - EditableTitleBar.titlePadding
-      nValue = nValue - ImageMenuItem.imageHotZoneWidth - ImageMenuItem.imageHotZoneWidth
-      if (this.menuItems === undefined) {
-        this.titleMaxWidth = nValue
-        return
-      }
-      if (this.menuItems.length > EditableTitleBar.maxCountOfExtraItems) {
-        this.titleMaxWidth = nValue - ImageMenuItem.imageHotZoneWidth * EditableTitleBar.maxCountOfExtraItems
-      } else {
-        this.titleMaxWidth = nValue - ImageMenuItem.imageHotZoneWidth * this.menuItems.length
-      }
-    })
-  }
-}
-
-@Component
-struct EditableTitleBarMenuSection {
-  menuItems: Array<EditableTitleBarMenuItem>
-  onSave?: () => void
-
-  build() {
-    Column() {
-      Row() {
-        if (this.menuItems !== undefined && this.menuItems.length > 0) {
-          ForEach(this.menuItems.slice(0, EditableTitleBar.maxCountOfExtraItems), (item: EditableTitleBarMenuItem) => {
-            ImageMenuItem({ item: item })
-          })
-        }
-        ImageMenuItem({ item: {
-          value: PUBLIC_OK,
-          isEnabled: true,
-          action: () => this.onSave && this.onSave()
-        } })
-      }
-    }
-    .margin({
-      left: $r('sys.float.ohos_id_elements_margin_vertical_l'),
-      right: $r('sys.float.ohos_id_default_padding_end')
-    })
-    .justifyContent(FlexAlign.Center)
-  }
-}
-
-@Component
-struct ImageMenuItem {
-  item: EditableTitleBarMenuItem
-
-  static readonly imageSize = 24
-  static readonly imageHotZoneWidth = 48
-  static readonly buttonBorderRadius = 8
-  static readonly focusBorderWidth = 2
-  static readonly disabledImageOpacity = 0.4
-
-  @State isOnFocus: boolean = false
-  @State isOnHover: boolean = false
-  @State isOnClick: boolean = false
-
-  getFgColor() {
-    return this.isOnClick
-      ? $r('sys.color.ohos_id_color_titlebar_icon_pressed')
-      : $r('sys.color.ohos_id_color_titlebar_icon')
-  }
-
-  getBgColor() {
-    if (this.isOnClick) {
-      return $r('sys.color.ohos_id_color_click_effect')
-    } else if (this.isOnHover) {
-      return $r('sys.color.ohos_id_color_hover')
-    } else {
-      return Color.Transparent
-    }
-  }
-
-  build() {
-    Row() {
-      Image(this.item.value)
-        .width(ImageMenuItem.imageSize)
-        .height(ImageMenuItem.imageSize)
-        .focusable(this.item.isEnabled)
-    }
-    .width(ImageMenuItem.imageHotZoneWidth)
-    .height(ImageMenuItem.imageHotZoneWidth)
-    .borderRadius(ImageMenuItem.buttonBorderRadius)
-    .foregroundColor(this.getFgColor())
-    .backgroundColor(this.getBgColor())
-    .justifyContent(FlexAlign.Center)
-    .opacity(this.item.isEnabled ? 1 : ImageMenuItem.disabledImageOpacity)
-    .border(this.isOnFocus ?
-      { width: ImageMenuItem.focusBorderWidth,
-        color: $r('sys.color.ohos_id_color_emphasize'),
-        style: BorderStyle.Solid
-      } : { width: 0 })
-    .onFocus(() => {
-      if (!this.item.isEnabled) {
-        return
-      }
-      this.isOnFocus = true
-    })
-    .onBlur(() => this.isOnFocus = false)
-    .onHover((isOn) => {
-      if (!this.item.isEnabled) {
-        return
-      }
-      this.isOnHover = isOn
-    })
-    .onKeyEvent((event) => {
-      if (!this.item.isEnabled) {
-        return
-      }
-      if (event.keyCode !== KeyCode.KEYCODE_ENTER && event.keyCode !== KeyCode.KEYCODE_SPACE) {
-        return
-      }
-      if (event.type === KeyType.Down) {
-        this.isOnClick = true
-      }
-      if (event.type === KeyType.Up) {
-        this.isOnClick = false
-      }
-    })
-    .onTouch((event) => {
-      if (!this.item.isEnabled) {
-        return
-      }
-      if (event.type === TouchType.Down) {
-        this.isOnClick = true
-      }
-      if (event.type === TouchType.Up) {
-        this.isOnClick = false
-      }
-    })
-    .onClick(() => this.item.isEnabled && this.item.action && this.item.action())
-  }
-}
-
-export default { EditableLeftIconType, EditableTitleBar }