vant 4.0.0-rc.3 → 4.0.0-rc.4

package/README.md

@@ -92,16 +92,15 @@ Vant 3/4 supports modern browsers and Chrome >= 51、iOS >= 10.0 (same as Vue 3)
 | --- | --- |
 | [vant-weapp](https://github.com/vant-ui/vant-weapp) | WeChat MiniProgram UI |
 | [vant-demo](https://github.com/vant-ui/vant-demo) | Collection of Vant demos |
-| [vant-cli](https://github.com/vant-ui/vant/tree/dev/packages/vant-cli) | Scaffold for UI library |
-| [vant-icons](https://github.com/vant-ui/vant/tree/dev/packages/vant-icons) | Vant icons |
-| [vant-touch-emulator](https://github.com/vant-ui/vant/tree/dev/packages/vant-touch-emulator) | Using vant in desktop browsers |
+| [vant-cli](https://github.com/vant-ui/vant/tree/main/packages/vant-cli) | Scaffold for UI library |
+| [vant-icons](https://github.com/vant-ui/vant/tree/main/packages/vant-icons) | Vant icons |
+| [vant-touch-emulator](https://github.com/vant-ui/vant/tree/main/packages/vant-touch-emulator) | Using vant in desktop browsers |
 
 ## Community Ecosystem
 
 | Project | Description |
 | --- | --- |
 | [3lang3/react-vant](https://github.com/3lang3/react-vant) | React mobile UI Components based on Vant |
-| [rc-ui-lib](https://github.com/rancui/rc-ui-lib) | React mobile UI Components based on Vant |
 | [vant-aliapp](https://github.com/ant-move/Vant-Aliapp) | Alipay MiniProgram UI |
 | [taroify](https://gitee.com/mallfoundry/taroify) | Vant Taro |
 | [vant-theme](https://github.com/Aisen60/vant-theme) | Online theme preview built on Vant UI |
@@ -112,7 +111,7 @@ Vant 3/4 supports modern browsers and Chrome >= 51、iOS >= 10.0 (same as Vue 3)
 
 - [Documentation](https://vant-ui.github.io/vant)
 - [Changelog](https://vant-ui.github.io/vant#/en-US/changelog)
-- [Gitter](https://gitter.im/vant-contrib/discuss?utm_source=share-link&utm_medium=link&utm_campaign=share-link)
+- [Discussions](https://github.com/vant-ui/vant/discussions)
 
 ## Preview
 

package/changelog.generated.md

@@ -1,3 +1,35 @@
+### [v4.0.0-rc.4](https://github.com/vant-ui/vant/compare/v4.0.0-rc.3...v4.0.0-rc.4)
+
+`2022-09-25`
+
+**Bug Fixes**
+
+- cli: downgrade vite version to fix the website [#11087](https://github.com/vant-ui/vant/issues/11087)
+- cli: should remove light theme class in dark mode [#11039](https://github.com/vant-ui/vant/issues/11039)
+- Tabs: incorrect scroll position in some cases [#11085](https://github.com/vant-ui/vant/issues/11085)
+- Tabs: incorrect scroll position when inited [#11059](https://github.com/vant-ui/vant/issues/11059)
+
+**Document**
+
+- Cascader: update field-names type [#11052](https://github.com/vant-ui/vant/issues/11052)
+- changelog: vant@4.0.0-rc.3 [#11038](https://github.com/vant-ui/vant/issues/11038)
+- improve dark theme guide [#11040](https://github.com/vant-ui/vant/issues/11040)
+- PickerGroup: fix TimePicker link error [#11053](https://github.com/vant-ui/vant/issues/11053)
+- update links [#11041](https://github.com/vant-ui/vant/issues/11041)
+
+**Feature**
+
+- Field: add message param to 'end-validate' method [#11080](https://github.com/vant-ui/vant/issues/11080)
+
+**perf**
+
+- improve the type of setTimeout [#11069](https://github.com/vant-ui/vant/issues/11069)
+- move @vant/icons to dev dependencies [#11075](https://github.com/vant-ui/vant/issues/11075)
+
+**release**
+
+- @vant/cli 5.0.0-beta.0 [#11082](https://github.com/vant-ui/vant/issues/11082)
+- vant@1.4.3 [#11076](https://github.com/vant-ui/vant/issues/11076)
 ### [v4.0.0-rc.3](https://github.com/vant-ui/vant/compare/v4.0.0-rc.2...v4.0.0-rc.3)
 
 `2022-09-12`
@@ -19,29 +51,9 @@
 **release**
 
 - @vant/popperjs 1.3.0 [16c1f3](https://github.com/vant-ui/vant/commit/16c1f35135d93090ad7b129a73a0569203c3825d)
+- 4.0.0-rc.3 [5509ca](https://github.com/vant-ui/vant/commit/5509ca0d1dec6a819df69295dda2d7b59fbd3328)
 
 **Types**
 
 - some theme vars can be number type [#11037](https://github.com/vant-ui/vant/issues/11037)
 - Toast: fix missing global components type [#11033](https://github.com/vant-ui/vant/issues/11033)
-### [v4.0.0-rc.2](https://github.com/vant-ui/vant/compare/v4.0.0-rc.1...v4.0.0-rc.2)
-
-`2022-09-11`
-
-**Bug Fixes**
-
-- attach css variables to :root element [#11026](https://github.com/vant-ui/vant/issues/11026)
-- Dialog: incorrect transform behavior [#11028](https://github.com/vant-ui/vant/issues/11028)
-
-**Document**
-
-- changelog: vant@4.0.0-rc.1 [#11025](https://github.com/vant-ui/vant/issues/11025)
-- fix legacy css variables in demo [b6f2eb](https://github.com/vant-ui/vant/commit/b6f2eb3e2a101e8dbae14d7649f98afa514af539)
-
-**release**
-
-- 4.0.0-rc.2 [bcae14](https://github.com/vant-ui/vant/commit/bcae14d7cbfcf623bf56a21a5d51bc5b7f1baa67)
-
-**style**
-
-- Empty: fix opacity in dark mode [#11027](https://github.com/vant-ui/vant/issues/11027)

package/es/field/Field.mjs

@@ -137,7 +137,8 @@ var stdin_default = defineComponent({
       state.validateMessage = "";
     };
     const endValidate = () => emit("endValidate", {
-      status: state.status
+      status: state.status,
+      message: state.validateMessage
     });
     const validate = (rules = props.rules) => new Promise((resolve) => {
       resetValidation();

package/es/index.d.ts

@@ -93,4 +93,4 @@ declare namespace _default {
 }
 export default _default;
 export function install(app: any): void;
-export const version: "4.0.0-rc.3";
+export const version: "4.0.0-rc.4";

package/es/index.mjs

@@ -86,7 +86,7 @@ import { TimePicker } from "./time-picker/index.mjs";
 import { Toast } from "./toast/index.mjs";
 import { TreeSelect } from "./tree-select/index.mjs";
 import { Uploader } from "./uploader/index.mjs";
-const version = "4.0.0-rc.3";
+const version = "4.0.0-rc.4";
 function install(app) {
   const components = [
     ActionBar,

package/es/notify/function-call.mjs

@@ -52,7 +52,7 @@ function showNotify(options) {
   instance.open(options);
   clearTimeout(timer);
   if (options.duration > 0) {
-    timer = window.setTimeout(closeNotify, options.duration);
+    timer = setTimeout(closeNotify, options.duration);
   }
   return instance;
 }

package/es/tab/Tab.mjs

@@ -2,7 +2,7 @@ import { withDirectives as _withDirectives, vShow as _vShow, createVNode as _cre
 import { ref, watch, provide, computed, nextTick, defineComponent } from "vue";
 import { extend, truthProp, unknownProp, numericProp, createNamespace } from "../utils/index.mjs";
 import { TABS_KEY } from "../tabs/Tabs.mjs";
-import { useParent } from "@vant/use";
+import { doubleRaf, useParent } from "@vant/use";
 import { useId } from "../composables/use-id.mjs";
 import { useExpose } from "../composables/use-expose.mjs";
 import { routeProps } from "../composables/use-route.mjs";
@@ -56,6 +56,16 @@ var stdin_default = defineComponent({
       }
       return isActive;
     });
+    const hasInactiveClass = ref(!active.value);
+    watch(active, (val) => {
+      if (val) {
+        hasInactiveClass.value = false;
+      } else {
+        doubleRaf(() => {
+          hasInactiveClass.value = true;
+        });
+      }
+    });
     watch(() => props.title, () => {
       parent.setLine();
       parent.scrollIntoView();
@@ -79,7 +89,7 @@ var stdin_default = defineComponent({
           "id": id,
           "role": "tabpanel",
           "class": bem("panel-wrapper", {
-            inactive: !active.value
+            inactive: hasInactiveClass.value
           }),
           "tabindex": active.value ? 0 : -1,
           "aria-hidden": !active.value,

package/es/tabs/Tabs.mjs

@@ -133,7 +133,7 @@ var stdin_default = defineComponent({
         index += diff;
       }
     };
-    const setCurrentIndex = (currentIndex) => {
+    const setCurrentIndex = (currentIndex, skipScrollIntoView) => {
       const newIndex = findAvailableTab(currentIndex);
       if (!isDef(newIndex)) {
         return;
@@ -148,11 +148,18 @@ var stdin_default = defineComponent({
           emit("change", newName, newTab.title);
         }
       }
+      if (!skipScrollIntoView) {
+        scrollIntoView();
+      }
+      setLine();
+      if (stickyFixed && !props.scrollspy) {
+        setRootScrollTop(Math.ceil(getElementTop(root.value) - offsetTopPx.value));
+      }
     };
-    const setCurrentIndexByName = (name2) => {
+    const setCurrentIndexByName = (name2, skipScrollIntoView) => {
       const matched = children.find((tab, index2) => getTabName(tab, index2) === name2);
       const index = matched ? children.indexOf(matched) : 0;
-      setCurrentIndex(index);
+      setCurrentIndex(index, skipScrollIntoView);
     };
     const scrollToCurrentContent = (immediate = false) => {
       if (props.scrollspy) {
@@ -279,15 +286,8 @@ var stdin_default = defineComponent({
         });
       }
     });
-    watch(() => state.currentIndex, () => {
-      scrollIntoView();
-      setLine();
-      if (stickyFixed && !props.scrollspy) {
-        setRootScrollTop(Math.ceil(getElementTop(root.value) - offsetTopPx.value));
-      }
-    });
     const init = () => {
-      setCurrentIndexByName(props.active);
+      setCurrentIndexByName(props.active, true);
       nextTick(() => {
         state.inited = true;
         if (wrapRef.value) {

package/lib/field/Field.js

@@ -161,7 +161,8 @@ var stdin_default = (0, import_vue2.defineComponent)({
       state.validateMessage = "";
     };
     const endValidate = () => emit("endValidate", {
-      status: state.status
+      status: state.status,
+      message: state.validateMessage
     });
     const validate = (rules = props.rules) => new Promise((resolve) => {
       resetValidation();

package/lib/index.d.ts

@@ -93,4 +93,4 @@ declare namespace _default {
 }
 export default _default;
 export function install(app: any): void;
-export const version: "4.0.0-rc.3";
+export const version: "4.0.0-rc.4";

package/lib/index.js

@@ -200,7 +200,7 @@ __reExport(stdin_exports, require("./time-picker"), module.exports);
 __reExport(stdin_exports, require("./toast"), module.exports);
 __reExport(stdin_exports, require("./tree-select"), module.exports);
 __reExport(stdin_exports, require("./uploader"), module.exports);
-const version = "4.0.0-rc.3";
+const version = "4.0.0-rc.4";
 function install(app) {
   const components = [
     import_action_bar.ActionBar,

package/lib/notify/function-call.js

@@ -83,7 +83,7 @@ function showNotify(options) {
   instance.open(options);
   clearTimeout(timer);
   if (options.duration > 0) {
-    timer = window.setTimeout(closeNotify, options.duration);
+    timer = setTimeout(closeNotify, options.duration);
   }
   return instance;
 }

package/lib/tab/Tab.js

@@ -79,6 +79,16 @@ var stdin_default = (0, import_vue2.defineComponent)({
       }
       return isActive;
     });
+    const hasInactiveClass = (0, import_vue2.ref)(!active.value);
+    (0, import_vue2.watch)(active, (val) => {
+      if (val) {
+        hasInactiveClass.value = false;
+      } else {
+        (0, import_use.doubleRaf)(() => {
+          hasInactiveClass.value = true;
+        });
+      }
+    });
     (0, import_vue2.watch)(() => props.title, () => {
       parent.setLine();
       parent.scrollIntoView();
@@ -102,7 +112,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
           "id": id,
           "role": "tabpanel",
           "class": bem("panel-wrapper", {
-            inactive: !active.value
+            inactive: hasInactiveClass.value
           }),
           "tabindex": active.value ? 0 : -1,
           "aria-hidden": !active.value,

package/lib/tabs/Tabs.js

@@ -163,7 +163,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
         index += diff;
       }
     };
-    const setCurrentIndex = (currentIndex) => {
+    const setCurrentIndex = (currentIndex, skipScrollIntoView) => {
       const newIndex = findAvailableTab(currentIndex);
       if (!(0, import_utils.isDef)(newIndex)) {
         return;
@@ -178,11 +178,18 @@ var stdin_default = (0, import_vue2.defineComponent)({
           emit("change", newName, newTab.title);
         }
       }
+      if (!skipScrollIntoView) {
+        scrollIntoView();
+      }
+      setLine();
+      if (stickyFixed && !props.scrollspy) {
+        (0, import_utils.setRootScrollTop)(Math.ceil((0, import_utils.getElementTop)(root.value) - offsetTopPx.value));
+      }
     };
-    const setCurrentIndexByName = (name2) => {
+    const setCurrentIndexByName = (name2, skipScrollIntoView) => {
       const matched = children.find((tab, index2) => getTabName(tab, index2) === name2);
       const index = matched ? children.indexOf(matched) : 0;
-      setCurrentIndex(index);
+      setCurrentIndex(index, skipScrollIntoView);
     };
     const scrollToCurrentContent = (immediate = false) => {
       if (props.scrollspy) {
@@ -309,15 +316,8 @@ var stdin_default = (0, import_vue2.defineComponent)({
         });
       }
     });
-    (0, import_vue2.watch)(() => state.currentIndex, () => {
-      scrollIntoView();
-      setLine();
-      if (stickyFixed && !props.scrollspy) {
-        (0, import_utils.setRootScrollTop)(Math.ceil((0, import_utils.getElementTop)(root.value) - offsetTopPx.value));
-      }
-    });
     const init = () => {
-      setCurrentIndexByName(props.active);
+      setCurrentIndexByName(props.active, true);
       (0, import_vue2.nextTick)(() => {
         state.inited = true;
         if (wrapRef.value) {

package/lib/vant.cjs.js

@@ -2635,7 +2635,7 @@ var stdin_default$1m = vue.defineComponent({
         index += diff;
       }
     };
-    const setCurrentIndex = (currentIndex) => {
+    const setCurrentIndex = (currentIndex, skipScrollIntoView) => {
       const newIndex = findAvailableTab(currentIndex);
       if (!isDef(newIndex)) {
         return;
@@ -2650,11 +2650,18 @@ var stdin_default$1m = vue.defineComponent({
           emit("change", newName, newTab.title);
         }
       }
+      if (!skipScrollIntoView) {
+        scrollIntoView();
+      }
+      setLine();
+      if (stickyFixed && !props.scrollspy) {
+        setRootScrollTop(Math.ceil(getElementTop(root.value) - offsetTopPx.value));
+      }
     };
-    const setCurrentIndexByName = (name2) => {
+    const setCurrentIndexByName = (name2, skipScrollIntoView) => {
       const matched = children.find((tab, index2) => getTabName(tab, index2) === name2);
       const index = matched ? children.indexOf(matched) : 0;
-      setCurrentIndex(index);
+      setCurrentIndex(index, skipScrollIntoView);
     };
     const scrollToCurrentContent = (immediate = false) => {
       if (props.scrollspy) {
@@ -2781,15 +2788,8 @@ var stdin_default$1m = vue.defineComponent({
         });
       }
     });
-    vue.watch(() => state.currentIndex, () => {
-      scrollIntoView();
-      setLine();
-      if (stickyFixed && !props.scrollspy) {
-        setRootScrollTop(Math.ceil(getElementTop(root.value) - offsetTopPx.value));
-      }
-    });
     const init = () => {
-      setCurrentIndexByName(props.active);
+      setCurrentIndexByName(props.active, true);
       vue.nextTick(() => {
         state.inited = true;
         if (wrapRef.value) {
@@ -2982,6 +2982,16 @@ var stdin_default$1k = vue.defineComponent({
       }
       return isActive;
     });
+    const hasInactiveClass = vue.ref(!active.value);
+    vue.watch(active, (val) => {
+      if (val) {
+        hasInactiveClass.value = false;
+      } else {
+        use.doubleRaf(() => {
+          hasInactiveClass.value = true;
+        });
+      }
+    });
     vue.watch(() => props.title, () => {
       parent.setLine();
       parent.scrollIntoView();
@@ -3005,7 +3015,7 @@ var stdin_default$1k = vue.defineComponent({
           "id": id,
           "role": "tabpanel",
           "class": bem$18("panel-wrapper", {
-            inactive: !active.value
+            inactive: hasInactiveClass.value
           }),
           "tabindex": active.value ? 0 : -1,
           "aria-hidden": !active.value,
@@ -3891,7 +3901,8 @@ var stdin_default$1e = vue.defineComponent({
       state.validateMessage = "";
     };
     const endValidate = () => emit("endValidate", {
-      status: state.status
+      status: state.status,
+      message: state.validateMessage
     });
     const validate = (rules = props.rules) => new Promise((resolve) => {
       resetValidation();
@@ -10322,7 +10333,7 @@ function showNotify(options) {
   instance.open(options);
   clearTimeout(timer);
   if (options.duration > 0) {
-    timer = window.setTimeout(closeNotify, options.duration);
+    timer = setTimeout(closeNotify, options.duration);
   }
   return instance;
 }
@@ -14541,7 +14552,7 @@ const Lazyload = {
     });
   }
 };
-const version = "4.0.0-rc.3";
+const version = "4.0.0-rc.4";
 function install(app) {
   const components = [
     ActionBar,

package/lib/vant.es.js

@@ -2633,7 +2633,7 @@ var stdin_default$1m = defineComponent({
         index += diff;
       }
     };
-    const setCurrentIndex = (currentIndex) => {
+    const setCurrentIndex = (currentIndex, skipScrollIntoView) => {
       const newIndex = findAvailableTab(currentIndex);
       if (!isDef(newIndex)) {
         return;
@@ -2648,11 +2648,18 @@ var stdin_default$1m = defineComponent({
           emit("change", newName, newTab.title);
         }
       }
+      if (!skipScrollIntoView) {
+        scrollIntoView();
+      }
+      setLine();
+      if (stickyFixed && !props.scrollspy) {
+        setRootScrollTop(Math.ceil(getElementTop(root.value) - offsetTopPx.value));
+      }
     };
-    const setCurrentIndexByName = (name2) => {
+    const setCurrentIndexByName = (name2, skipScrollIntoView) => {
       const matched = children.find((tab, index2) => getTabName(tab, index2) === name2);
       const index = matched ? children.indexOf(matched) : 0;
-      setCurrentIndex(index);
+      setCurrentIndex(index, skipScrollIntoView);
     };
     const scrollToCurrentContent = (immediate = false) => {
       if (props.scrollspy) {
@@ -2779,15 +2786,8 @@ var stdin_default$1m = defineComponent({
         });
       }
     });
-    watch(() => state.currentIndex, () => {
-      scrollIntoView();
-      setLine();
-      if (stickyFixed && !props.scrollspy) {
-        setRootScrollTop(Math.ceil(getElementTop(root.value) - offsetTopPx.value));
-      }
-    });
     const init = () => {
-      setCurrentIndexByName(props.active);
+      setCurrentIndexByName(props.active, true);
       nextTick(() => {
         state.inited = true;
         if (wrapRef.value) {
@@ -2980,6 +2980,16 @@ var stdin_default$1k = defineComponent({
       }
       return isActive;
     });
+    const hasInactiveClass = ref(!active.value);
+    watch(active, (val) => {
+      if (val) {
+        hasInactiveClass.value = false;
+      } else {
+        doubleRaf(() => {
+          hasInactiveClass.value = true;
+        });
+      }
+    });
     watch(() => props.title, () => {
       parent.setLine();
       parent.scrollIntoView();
@@ -3003,7 +3013,7 @@ var stdin_default$1k = defineComponent({
           "id": id,
           "role": "tabpanel",
           "class": bem$18("panel-wrapper", {
-            inactive: !active.value
+            inactive: hasInactiveClass.value
           }),
           "tabindex": active.value ? 0 : -1,
           "aria-hidden": !active.value,
@@ -3889,7 +3899,8 @@ var stdin_default$1e = defineComponent({
       state.validateMessage = "";
     };
     const endValidate = () => emit("endValidate", {
-      status: state.status
+      status: state.status,
+      message: state.validateMessage
     });
     const validate = (rules = props.rules) => new Promise((resolve) => {
       resetValidation();
@@ -10320,7 +10331,7 @@ function showNotify(options) {
   instance.open(options);
   clearTimeout(timer);
   if (options.duration > 0) {
-    timer = window.setTimeout(closeNotify, options.duration);
+    timer = setTimeout(closeNotify, options.duration);
   }
   return instance;
 }
@@ -14539,7 +14550,7 @@ const Lazyload = {
     });
   }
 };
-const version = "4.0.0-rc.3";
+const version = "4.0.0-rc.4";
 function install(app) {
   const components = [
     ActionBar,

package/lib/vant.js

@@ -2999,7 +2999,7 @@
           index += diff;
         }
       };
-      const setCurrentIndex = (currentIndex) => {
+      const setCurrentIndex = (currentIndex, skipScrollIntoView) => {
         const newIndex = findAvailableTab(currentIndex);
         if (!isDef(newIndex)) {
           return;
@@ -3014,11 +3014,18 @@
             emit("change", newName, newTab.title);
           }
         }
+        if (!skipScrollIntoView) {
+          scrollIntoView();
+        }
+        setLine();
+        if (stickyFixed && !props.scrollspy) {
+          setRootScrollTop(Math.ceil(getElementTop(root.value) - offsetTopPx.value));
+        }
       };
-      const setCurrentIndexByName = (name2) => {
+      const setCurrentIndexByName = (name2, skipScrollIntoView) => {
         const matched = children.find((tab, index2) => getTabName(tab, index2) === name2);
         const index = matched ? children.indexOf(matched) : 0;
-        setCurrentIndex(index);
+        setCurrentIndex(index, skipScrollIntoView);
       };
       const scrollToCurrentContent = (immediate = false) => {
         if (props.scrollspy) {
@@ -3145,15 +3152,8 @@
           });
         }
       });
-      vue.watch(() => state.currentIndex, () => {
-        scrollIntoView();
-        setLine();
-        if (stickyFixed && !props.scrollspy) {
-          setRootScrollTop(Math.ceil(getElementTop(root.value) - offsetTopPx.value));
-        }
-      });
       const init = () => {
-        setCurrentIndexByName(props.active);
+        setCurrentIndexByName(props.active, true);
         vue.nextTick(() => {
           state.inited = true;
           if (wrapRef.value) {
@@ -3340,6 +3340,16 @@
         }
         return isActive;
       });
+      const hasInactiveClass = vue.ref(!active.value);
+      vue.watch(active, (val) => {
+        if (val) {
+          hasInactiveClass.value = false;
+        } else {
+          doubleRaf(() => {
+            hasInactiveClass.value = true;
+          });
+        }
+      });
       vue.watch(() => props.title, () => {
         parent.setLine();
         parent.scrollIntoView();
@@ -3363,7 +3373,7 @@
             "id": id,
             "role": "tabpanel",
             "class": bem$18("panel-wrapper", {
-              inactive: !active.value
+              inactive: hasInactiveClass.value
             }),
             "tabindex": active.value ? 0 : -1,
             "aria-hidden": !active.value,
@@ -4249,7 +4259,8 @@
         state.validateMessage = "";
       };
       const endValidate = () => emit("endValidate", {
-        status: state.status
+        status: state.status,
+        message: state.validateMessage
       });
       const validate = (rules = props.rules) => new Promise((resolve) => {
         resetValidation();
@@ -10654,7 +10665,7 @@
     instance.open(options);
     clearTimeout(timer);
     if (options.duration > 0) {
-      timer = window.setTimeout(closeNotify, options.duration);
+      timer = setTimeout(closeNotify, options.duration);
     }
     return instance;
   }
@@ -15756,7 +15767,7 @@
       });
     }
   };
-  const version = "4.0.0-rc.3";
+  const version = "4.0.0-rc.4";
   function install(app) {
     const components = [
       ActionBar,