framework7-react 6.3.16 → 7.0.0-beta.12

package/{esm/components → components}/toolbar.js

@@ -1,67 +1,66 @@
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import React, { forwardRef, useRef, useImperativeHandle } from 'react';
-import { useIsomorphicLayoutEffect } from '../shared/use-isomorphic-layout-effect';
-import { classNames, getExtraAttrs, getSlots, emit } from '../shared/utils';
-import { colorClasses } from '../shared/mixins';
-import { useTheme } from '../shared/use-theme';
-import { f7ready, f7 } from '../shared/f7';
-import { TabbarContext } from '../shared/tabbar-context';
+import { useIsomorphicLayoutEffect } from '../shared/use-isomorphic-layout-effect.js';
+import { classNames, getExtraAttrs, getSlots, emit } from '../shared/utils.js';
+import { colorClasses } from '../shared/mixins.js';
+import { useTheme } from '../shared/use-theme.js';
+import { f7ready, f7 } from '../shared/f7.js';
+import { TabbarContext } from '../shared/tabbar-context.js';
 
-var Toolbar = /*#__PURE__*/forwardRef(function (props, ref) {
-  var className = props.className,
-      id = props.id,
-      style = props.style,
-      tabbar = props.tabbar,
-      labels = props.labels,
-      scrollable = props.scrollable,
-      hidden = props.hidden,
-      noShadow = props.noShadow,
-      noHairline = props.noHairline,
-      noBorder = props.noBorder,
-      position = props.position,
-      topMd = props.topMd,
-      topIos = props.topIos,
-      topAurora = props.topAurora,
-      top = props.top,
-      bottomMd = props.bottomMd,
-      bottomIos = props.bottomIos,
-      bottomAurora = props.bottomAurora,
-      bottom = props.bottom,
-      _props$inner = props.inner,
-      inner = _props$inner === void 0 ? true : _props$inner;
-  var extraAttrs = getExtraAttrs(props);
-  var elRef = useRef(null);
+const Toolbar = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    className,
+    id,
+    style,
+    tabbar,
+    labels,
+    scrollable,
+    hidden,
+    noShadow,
+    noHairline,
+    noBorder,
+    position,
+    topMd,
+    topIos,
+    topAurora,
+    top,
+    bottomMd,
+    bottomIos,
+    bottomAurora,
+    bottom,
+    inner = true
+  } = props;
+  const extraAttrs = getExtraAttrs(props);
+  const elRef = useRef(null);
 
-  var onHide = function onHide(toolbarEl) {
+  const onHide = toolbarEl => {
     if (elRef.current !== toolbarEl) return;
     emit(props, 'toolbarHide');
   };
 
-  var onShow = function onShow(toolbarEl) {
+  const onShow = toolbarEl => {
     if (elRef.current !== toolbarEl) return;
     emit(props, 'toolbarShow');
   };
 
-  var hide = function hide(animate) {
+  const hide = animate => {
     if (!f7) return;
     f7.toolbar.hide(elRef.current, animate);
   };
 
-  var show = function show(animate) {
+  const show = animate => {
     if (!f7) return;
     f7.toolbar.show(elRef.current, animate);
   };
 
-  useImperativeHandle(ref, function () {
-    return {
-      el: elRef.current,
-      hide: hide,
-      show: show
-    };
-  });
-  useIsomorphicLayoutEffect(function () {
-    f7ready(function () {
+  useImperativeHandle(ref, () => ({
+    el: elRef.current,
+    hide,
+    show
+  }));
+  useIsomorphicLayoutEffect(() => {
+    f7ready(() => {
       if (tabbar && f7 && elRef.current) {
         f7.toolbar.setHighlight(elRef.current);
       }
@@ -69,15 +68,15 @@ var Toolbar = /*#__PURE__*/forwardRef(function (props, ref) {
       f7.on('toolbarShow', onShow);
       f7.on('toolbarHide', onHide);
     });
-    return function () {
+    return () => {
       if (!f7) return;
       f7.off('toolbarShow', onShow);
       f7.off('toolbarHide', onHide);
     };
   });
-  var theme = useTheme();
-  var classes = classNames(className, 'toolbar', {
-    tabbar: tabbar,
+  const theme = useTheme();
+  const classes = classNames(className, 'toolbar', {
+    tabbar,
     'toolbar-bottom': theme && theme.md && bottomMd || theme && theme.ios && bottomIos || theme && theme.aurora && bottomAurora || bottom || position === 'bottom',
     'toolbar-top': theme && theme.md && topMd || theme && theme.ios && topIos || theme && theme.aurora && topAurora || top || position === 'top',
     'tabbar-labels': labels,
@@ -86,7 +85,7 @@ var Toolbar = /*#__PURE__*/forwardRef(function (props, ref) {
     'no-shadow': noShadow,
     'no-hairline': noHairline || noBorder
   }, colorClasses(props));
-  var slots = getSlots(props);
+  const slots = getSlots(props);
   return /*#__PURE__*/React.createElement("div", _extends({
     id: id,
     style: style,

package/{esm/components → components}/treeview-item.js

@@ -1,94 +1,95 @@
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import React, { forwardRef, useRef, useImperativeHandle } from 'react';
-import { useIsomorphicLayoutEffect } from '../shared/use-isomorphic-layout-effect';
-import { classNames, getExtraAttrs, getSlots, emit } from '../shared/utils';
-import { colorClasses, actionsAttrs, actionsClasses, routerAttrs, routerClasses } from '../shared/mixins';
-import { useIcon } from '../shared/use-icon';
-import { f7ready, f7 } from '../shared/f7';
+import { useIsomorphicLayoutEffect } from '../shared/use-isomorphic-layout-effect.js';
+import { classNames, getExtraAttrs, getSlots, emit } from '../shared/utils.js';
+import { colorClasses, actionsAttrs, actionsClasses, routerAttrs, routerClasses } from '../shared/mixins.js';
+import { useIcon } from '../shared/use-icon.js';
+import { f7ready, f7 } from '../shared/f7.js';
 
-var TreeviewItem = /*#__PURE__*/forwardRef(function (props, ref) {
-  var className = props.className,
-      id = props.id,
-      style = props.style,
-      toggle = props.toggle,
-      itemToggle = props.itemToggle,
-      selectable = props.selectable,
-      selected = props.selected,
-      opened = props.opened,
-      label = props.label,
-      loadChildren = props.loadChildren,
-      link = props.link;
-  var extraAttrs = getExtraAttrs(props);
-  var elRef = useRef(null);
+const TreeviewItem = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    className,
+    id,
+    style,
+    toggle,
+    itemToggle,
+    selectable,
+    selected,
+    opened,
+    label,
+    loadChildren,
+    link
+  } = props;
+  const extraAttrs = getExtraAttrs(props);
+  const elRef = useRef(null);
 
-  var onClick = function onClick(event) {
+  const onClick = event => {
     emit(props, 'click', event);
   };
 
-  var onOpen = function onOpen(el) {
+  const onOpen = el => {
     if (elRef.current !== el) return;
     emit(props, 'treeviewOpen', el);
   };
 
-  var onClose = function onClose(el) {
+  const onClose = el => {
     if (elRef.current !== el) return;
     emit(props, 'treeviewClose', el);
   };
 
-  var onLoadChildren = function onLoadChildren(el, done) {
+  const onLoadChildren = (el, done) => {
     if (elRef.current !== el) return;
     emit(props, 'treeviewLoadChildren', el, done);
   };
 
-  useImperativeHandle(ref, function () {
-    return {
-      el: elRef.current
-    };
-  });
+  useImperativeHandle(ref, () => ({
+    el: elRef.current
+  }));
 
-  var attachEvents = function attachEvents() {
+  const attachEvents = () => {
     if (!elRef.current) return;
-    f7ready(function () {
+    f7ready(() => {
       f7.on('treeviewOpen', onOpen);
       f7.on('treeviewClose', onClose);
       f7.on('treeviewLoadChildren', onLoadChildren);
     });
   };
 
-  var detachEvents = function detachEvents() {
+  const detachEvents = () => {
     if (!f7) return;
     f7.off('treeviewOpen', onOpen);
     f7.off('treeviewClose', onClose);
     f7.off('treeviewLoadChildren', onLoadChildren);
   };
 
-  useIsomorphicLayoutEffect(function () {
+  useIsomorphicLayoutEffect(() => {
     attachEvents();
     return detachEvents;
   });
-  var slots = getSlots(props);
-  var hasChildren = slots.default && slots.default.length || slots.children && slots.children.length || slots['children-start'] && slots['children-start'].length;
-  var needToggle = typeof toggle === 'undefined' ? hasChildren : toggle;
-  var iconEl = useIcon(props);
-  var TreeviewRootTag = link || link === '' ? 'a' : 'div';
-  var classes = classNames(className, 'treeview-item', {
+  const slots = getSlots(props);
+  const hasChildren = slots.default && slots.default.length || slots.children && slots.children.length || slots['children-start'] && slots['children-start'].length;
+  const needToggle = typeof toggle === 'undefined' ? hasChildren : toggle;
+  const iconEl = useIcon(props);
+  const TreeviewRootTag = link || link === '' ? 'a' : 'div';
+  const classes = classNames(className, 'treeview-item', {
     'treeview-item-opened': opened,
     'treeview-load-children': loadChildren
   }, colorClasses(props));
-  var itemRootClasses = classNames('treeview-item-root', {
+  const itemRootClasses = classNames('treeview-item-root', {
     'treeview-item-selectable': selectable,
     'treeview-item-selected': selected,
     'treeview-item-toggle': itemToggle
   }, routerClasses(props), actionsClasses(props));
-  var href = link;
+  let href = link;
   if (link === true) href = '#';
   if (link === false) href = undefined; // no href attribute
 
-  var itemRootAttrs = _extends({
-    href: href
-  }, routerAttrs(props), actionsAttrs(props));
-
+  const itemRootAttrs = {
+    href,
+    ...routerAttrs(props),
+    ...actionsAttrs(props)
+  };
   return /*#__PURE__*/React.createElement("div", _extends({
     id: id,
     style: style,

package/{esm/components → components}/treeview.js

@@ -1,22 +1,22 @@
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import React, { forwardRef, useRef, useImperativeHandle } from 'react';
-import { classNames, getExtraAttrs } from '../shared/utils';
-import { colorClasses } from '../shared/mixins';
+import { classNames, getExtraAttrs } from '../shared/utils.js';
+import { colorClasses } from '../shared/mixins.js';
 
-var Treeview = /*#__PURE__*/forwardRef(function (props, ref) {
-  var className = props.className,
-      id = props.id,
-      style = props.style,
-      children = props.children;
-  var extraAttrs = getExtraAttrs(props);
-  var elRef = useRef(null);
-  useImperativeHandle(ref, function () {
-    return {
-      el: elRef.current
-    };
-  });
-  var classes = classNames(className, 'treeview', colorClasses(props));
+const Treeview = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    className,
+    id,
+    style,
+    children
+  } = props;
+  const extraAttrs = getExtraAttrs(props);
+  const elRef = useRef(null);
+  useImperativeHandle(ref, () => ({
+    el: elRef.current
+  }));
+  const classes = classNames(className, 'treeview', colorClasses(props));
   return /*#__PURE__*/React.createElement("div", _extends({
     id: id,
     style: style,

package/components/view.js

@@ -0,0 +1,238 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+/* eslint-disable no-nested-ternary */
+import React, { forwardRef, useRef, useImperativeHandle, useState } from 'react';
+import { useIsomorphicLayoutEffect } from '../shared/use-isomorphic-layout-effect.js';
+import { classNames, getExtraAttrs, noUndefinedProps, emit, getRouterId } from '../shared/utils.js';
+import { colorClasses } from '../shared/mixins.js';
+import { f7ready, f7routers, f7, f7events } from '../shared/f7.js';
+import { useTab } from '../shared/use-tab.js';
+import { useAsyncComponent } from '../shared/use-async-component.js';
+import { getRouterInitialComponent } from '../shared/get-router-initial-component.js';
+import { RouterContext } from '../shared/router-context.js';
+
+
+const View = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    className,
+    id,
+    style,
+    children,
+    init = true,
+    main,
+    tab,
+    tabActive,
+    url,
+    browserHistoryInitialMatch = true
+  } = props;
+  const childrenArray = React.Children.toArray(children);
+  const initialPageComponent = childrenArray.filter(c => c.props && c.props.initialPage)[0];
+  const restChildren = childrenArray.filter(c => !c.props || !c.props.initialPage);
+  const extraAttrs = getExtraAttrs(props);
+  const f7View = useRef(null);
+  const elRef = useRef(null);
+  const routerData = useRef(null);
+  let initialPage;
+  let initialRoute;
+
+  const onViewInit = view => {
+    emit(props, 'viewInit', view);
+
+    if (!init) {
+      routerData.current.instance = view;
+      f7View.current = routerData.current.instance;
+    }
+  };
+
+  if (f7 && !f7View.current && init) {
+    const routerId = getRouterId();
+    f7View.current = f7.views.create(elRef.current, {
+      routerId,
+      init: false,
+      ...noUndefinedProps(props),
+      browserHistoryInitialMatch,
+      on: {
+        init: onViewInit
+      }
+    });
+    routerData.current = {
+      routerId,
+      instance: f7View.current
+    };
+    f7routers.views.push(routerData.current);
+
+    if (f7View.current && f7View.current.router && (url || main)) {
+      const initialData = getRouterInitialComponent(f7View.current.router, initialPageComponent);
+      initialPage = initialData.initialPage;
+      initialRoute = initialData.initialRoute;
+
+      if (initialRoute && initialRoute.route && initialRoute.route.masterRoute) {
+        initialPage = undefined;
+        initialRoute = undefined;
+      }
+    }
+  }
+
+  const [pages, setPages] = useState(initialPage ? [initialPage] : []);
+
+  const onResize = (view, width) => {
+    emit(props, 'viewResize', width);
+  };
+
+  const onSwipeBackMove = data => {
+    const swipeBackData = data;
+    emit(props, 'swipeBackMove', swipeBackData);
+  };
+
+  const onSwipeBackBeforeChange = data => {
+    const swipeBackData = data;
+    emit(props, 'swipeBackBeforeChange', swipeBackData);
+  };
+
+  const onSwipeBackAfterChange = data => {
+    const swipeBackData = data;
+    emit(props, 'swipeBackAfterChange', swipeBackData);
+  };
+
+  const onSwipeBackBeforeReset = data => {
+    const swipeBackData = data;
+    emit(props, 'swipeBackBeforeReset', swipeBackData);
+  };
+
+  const onSwipeBackAfterReset = data => {
+    const swipeBackData = data;
+    emit(props, 'swipeBackAfterReset', swipeBackData);
+  };
+
+  useImperativeHandle(ref, () => ({
+    el: elRef.current,
+    f7View: () => f7View.current
+  }));
+
+  const onMount = () => {
+    f7ready(() => {
+      if (f7View.current) {
+        routerData.current.el = elRef.current;
+        routerData.current.pages = pages;
+
+        routerData.current.setPages = newPages => {
+          setPages([...newPages]);
+        };
+
+        if (initialPage && initialPage.isAsync && !initialPage.initialComponent) {
+          initialPage.component().then(() => {
+            setTimeout(() => {
+              f7View.current.init(elRef.current);
+
+              if (initialPage) {
+                initialPage.el = f7View.current.router.currentPageEl;
+
+                if (initialRoute && initialRoute.route && initialRoute.route.keepAlive) {
+                  initialRoute.route.keepAliveData = {
+                    pageEl: initialPage.el
+                  };
+                }
+              }
+            }, 100);
+          });
+        } else {
+          f7View.current.init(elRef.current);
+
+          if (initialPage) {
+            initialPage.el = f7View.current.router.currentPageEl;
+
+            if (initialRoute && initialRoute.route && initialRoute.route.keepAlive) {
+              initialRoute.route.keepAliveData = {
+                pageEl: initialPage.el
+              };
+            }
+          }
+        }
+      } else {
+        const routerId = getRouterId();
+        routerData.current = {
+          el: elRef.current,
+          routerId,
+          pages,
+          instance: f7View.current,
+
+          setPages(newPages) {
+            setPages([...newPages]);
+          }
+
+        };
+        f7routers.views.push(routerData.current);
+        routerData.current.instance = f7.views.create(elRef.current, {
+          routerId,
+          ...noUndefinedProps(props),
+          browserHistoryInitialMatch,
+          on: {
+            init: onViewInit
+          }
+        });
+        f7View.current = routerData.current.instance;
+      }
+
+      if (!init) return;
+      f7View.current.on('resize', onResize);
+      f7View.current.on('swipebackMove', onSwipeBackMove);
+      f7View.current.on('swipebackBeforeChange', onSwipeBackBeforeChange);
+      f7View.current.on('swipebackAfterChange', onSwipeBackAfterChange);
+      f7View.current.on('swipebackBeforeReset', onSwipeBackBeforeReset);
+      f7View.current.on('swipebackAfterReset', onSwipeBackAfterReset);
+    });
+  };
+
+  const onDestroy = () => {
+    if (f7View.current) {
+      f7View.current.off('resize', onResize);
+      f7View.current.off('swipebackMove', onSwipeBackMove);
+      f7View.current.off('swipebackBeforeChange', onSwipeBackBeforeChange);
+      f7View.current.off('swipebackAfterChange', onSwipeBackAfterChange);
+      f7View.current.off('swipebackBeforeReset', onSwipeBackBeforeReset);
+      f7View.current.off('swipebackAfterReset', onSwipeBackAfterReset);
+      if (f7View.current.destroy) f7View.current.destroy();
+      f7View.current = null;
+    }
+
+    f7routers.views.splice(f7routers.views.indexOf(routerData.current), 1);
+    routerData.current = null;
+  };
+
+  useIsomorphicLayoutEffect(() => {
+    onMount();
+    return onDestroy;
+  }, []);
+  useIsomorphicLayoutEffect(() => {
+    if (routerData.current && f7) {
+      f7events.emit('viewRouterDidUpdate', routerData.current);
+    }
+  });
+  useTab(elRef, props);
+  const classes = classNames(className, 'view', {
+    'view-main': main,
+    'tab-active': tabActive,
+    tab
+  }, colorClasses(props));
+  return /*#__PURE__*/React.createElement("div", _extends({
+    id: id,
+    style: style,
+    className: classes,
+    ref: elRef
+  }, extraAttrs), restChildren, pages.map(({
+    component: PageComponent,
+    id: pageId,
+    props: pageProps,
+    isAsync,
+    initialComponent
+  }) => /*#__PURE__*/React.createElement(RouterContext.Provider, {
+    key: pageId,
+    value: {
+      router: pageProps.f7router,
+      route: pageProps.f7route
+    }
+  }, initialComponent ? /*#__PURE__*/React.cloneElement(initialComponent, { ...pageProps
+  }) : isAsync ? useAsyncComponent(PageComponent, pageProps) : /*#__PURE__*/React.createElement(PageComponent, pageProps))));
+});
+View.displayName = 'f7-view';
+export default View;

package/{esm/components → components}/views.js

@@ -1,24 +1,24 @@
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import React, { forwardRef, useRef, useImperativeHandle } from 'react';
-import { classNames, getExtraAttrs } from '../shared/utils';
-import { colorClasses } from '../shared/mixins';
+import { classNames, getExtraAttrs } from '../shared/utils.js';
+import { colorClasses } from '../shared/mixins.js';
 
-var Views = /*#__PURE__*/forwardRef(function (props, ref) {
-  var className = props.className,
-      id = props.id,
-      style = props.style,
-      children = props.children,
-      tabs = props.tabs;
-  var extraAttrs = getExtraAttrs(props);
-  var elRef = useRef(null);
-  useImperativeHandle(ref, function () {
-    return {
-      el: elRef.current
-    };
-  });
-  var classes = classNames(className, 'views', {
-    tabs: tabs
+const Views = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    className,
+    id,
+    style,
+    children,
+    tabs
+  } = props;
+  const extraAttrs = getExtraAttrs(props);
+  const elRef = useRef(null);
+  useImperativeHandle(ref, () => ({
+    el: elRef.current
+  }));
+  const classes = classNames(className, 'views', {
+    tabs
   }, colorClasses(props));
   return /*#__PURE__*/React.createElement("div", _extends({
     id: id,

package/framework7-react.d.ts

@@ -17,6 +17,10 @@ import BlockFooter from './components/block-footer';
 import BlockHeader from './components/block-header';
 import BlockTitle from './components/block-title';
 import Block from './components/block';
+import BreadcrumbsCollapsed from './components/breadcrumbs-collapsed';
+import BreadcrumbsItem from './components/breadcrumbs-item';
+import BreadcrumbsSeparator from './components/breadcrumbs-separator';
+import Breadcrumbs from './components/breadcrumbs';
 import Button from './components/button';
 import CardContent from './components/card-content';
 import CardFooter from './components/card-footer';
@@ -122,6 +126,6 @@ declare const useStore: useStore;
 
 declare const Framework7React: Framework7Plugin;
 
-export { AccordionContent, AccordionItem, AccordionToggle, Accordion, ActionsButton, ActionsGroup, ActionsLabel, Actions, App, Appbar, AreaChart, Badge, BlockFooter, BlockHeader, BlockTitle, Block, Button, CardContent, CardFooter, CardHeader, Card, Checkbox, Chip, Col, FabBackdrop, FabButton, FabButtons, Fab, Gauge, Icon, Input, Link, ListButton, ListGroup, ListIndex, ListInput, ListItemCell, ListItemContent, ListItemRow, ListItem, List, LoginScreenTitle, LoginScreen, MenuDropdownItem, MenuDropdown, MenuItem, Menu, Message, MessagebarAttachment, MessagebarAttachments, MessagebarSheetImage, MessagebarSheetItem, MessagebarSheet, Messagebar, MessagesTitle, Messages, NavLeft, NavRight, NavTitleLarge, NavTitle, Navbar, PageContent, Page, Panel, PhotoBrowser, PieChart, Popover, Popup, Preloader, Progressbar, Radio, Range, RoutableModals, Row, Searchbar, Segmented, Sheet, SkeletonAvatar, SkeletonBlock, SkeletonImage, SkeletonText, Stepper, Subnavbar, SwipeoutActions, SwipeoutButton, SwiperSlide, Swiper, Tab, Tabs, TextEditor, Toggle, Toolbar, TreeviewItem, Treeview, View, Views }
+export { AccordionContent, AccordionItem, AccordionToggle, Accordion, ActionsButton, ActionsGroup, ActionsLabel, Actions, App, Appbar, AreaChart, Badge, BlockFooter, BlockHeader, BlockTitle, Block, BreadcrumbsCollapsed, BreadcrumbsItem, BreadcrumbsSeparator, Breadcrumbs, Button, CardContent, CardFooter, CardHeader, Card, Checkbox, Chip, Col, FabBackdrop, FabButton, FabButtons, Fab, Gauge, Icon, Input, Link, ListButton, ListGroup, ListIndex, ListInput, ListItemCell, ListItemContent, ListItemRow, ListItem, List, LoginScreenTitle, LoginScreen, MenuDropdownItem, MenuDropdown, MenuItem, Menu, Message, MessagebarAttachment, MessagebarAttachments, MessagebarSheetImage, MessagebarSheetItem, MessagebarSheet, Messagebar, MessagesTitle, Messages, NavLeft, NavRight, NavTitleLarge, NavTitle, Navbar, PageContent, Page, Panel, PhotoBrowser, PieChart, Popover, Popup, Preloader, Progressbar, Radio, Range, RoutableModals, Row, Searchbar, Segmented, Sheet, SkeletonAvatar, SkeletonBlock, SkeletonImage, SkeletonText, Stepper, Subnavbar, SwipeoutActions, SwipeoutButton, SwiperSlide, Swiper, Tab, Tabs, TextEditor, Toggle, Toolbar, TreeviewItem, Treeview, View, Views }
 export { f7, f7ready, theme, useStore };
 export default Framework7React;