framework7-vue 7.0.0-beta.2 → 7.0.0-beta.20

package/components/text-editor.js

@@ -1,20 +1,20 @@
-import { renderSlot as _renderSlot, createVNode as _createVNode, openBlock as _openBlock, createBlock as _createBlock } from "vue";
+import { renderSlot as _renderSlot, createElementVNode as _createElementVNode, normalizeClass as _normalizeClass, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
 const _hoisted_1 = {
   class: "text-editor-content",
   contenteditable: ""
 };
 
 function render(_ctx, _cache) {
-  return _openBlock(), _createBlock("div", {
+  return _openBlock(), _createElementBlock("div", {
     ref: "elRef",
-    class: _ctx.classes
-  }, [_renderSlot(_ctx.$slots, "root-start"), _createVNode("div", _hoisted_1, [_renderSlot(_ctx.$slots, "default")]), _renderSlot(_ctx.$slots, "root-end"), _renderSlot(_ctx.$slots, "root")], 2);
+    class: _normalizeClass(_ctx.classes)
+  }, [_renderSlot(_ctx.$slots, "root-start"), _createElementVNode("div", _hoisted_1, [_renderSlot(_ctx.$slots, "default")]), _renderSlot(_ctx.$slots, "root-end"), _renderSlot(_ctx.$slots, "root")], 2);
 }
 
 import { computed, ref, onMounted, onBeforeUnmount, watch } from 'vue';
-import { classNames, noUndefinedProps } from '../shared/utils';
-import { colorClasses, colorProps } from '../shared/mixins';
-import { f7ready, f7 } from '../shared/f7';
+import { classNames, noUndefinedProps } from '../shared/utils.js';
+import { colorClasses, colorProps } from '../shared/mixins.js';
+import { f7ready, f7 } from '../shared/f7.js';
 export default {
   name: 'f7-text-editor',
   render,
@@ -57,9 +57,10 @@ export default {
   },
   emits: ['texteditor:change', 'texteditor:input', 'texteditor:focus', 'texteditor:blur', 'texteditor:buttonclick', 'texteditor:keyboardopen', 'texteditor:keyboardclose', 'texteditor:popoveropen', 'texteditor:popoverclose', 'texteditor:insertlink', 'texteditor:insertimage', 'texteditorChange', 'texteditorInput', 'texteditorFocus', 'texteditorBlur'],
 
-  setup(props, {
-    emit
-  }) {
+  setup(props, _ref) {
+    let {
+      emit
+    } = _ref;
     let f7TextEditor = null;
     const elRef = ref(null);
 
@@ -104,11 +105,11 @@ export default {
     };
 
     const onInsertLink = (editor, url) => {
-      emit(props, 'texteditor:insertlink', url);
+      emit('texteditor:insertlink', url);
     };
 
     const onInsertImage = (editor, url) => {
-      emit(props, 'texteditor:insertimage', url);
+      emit('texteditor:insertimage', url);
     };
 
     watch(() => props.value, newValue => {

package/components/toggle.js

@@ -1,29 +1,32 @@
-import { createVNode as _createVNode, openBlock as _openBlock, createBlock as _createBlock } from "vue";
+import { createElementVNode as _createElementVNode, normalizeClass as _normalizeClass, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
+const _hoisted_1 = ["name", "disabled", "readonly", "checked", "value"];
 
-const _hoisted_1 = /*#__PURE__*/_createVNode("span", {
+const _hoisted_2 = /*#__PURE__*/_createElementVNode("span", {
   class: "toggle-icon"
 }, null, -1);
 
 function render(_ctx, _cache) {
-  return _openBlock(), _createBlock("label", {
+  return _openBlock(), _createElementBlock("label", {
     ref: "elRef",
-    class: _ctx.classes
-  }, [_createVNode("input", {
+    class: _normalizeClass(_ctx.classes)
+  }, [_createElementVNode("input", {
     type: "checkbox",
     name: _ctx.name,
     disabled: _ctx.disabled,
     readonly: _ctx.readonly,
     checked: _ctx.checked,
     value: _ctx.value,
-    onChange: _cache[1] || (_cache[1] = (...args) => _ctx.onChange && _ctx.onChange(...args))
-  }, null, 40, ["name", "disabled", "readonly", "checked", "value"]), _hoisted_1], 2);
+    onChange: _cache[0] || (_cache[0] = function () {
+      return _ctx.onChange && _ctx.onChange(...arguments);
+    })
+  }, null, 40, _hoisted_1), _hoisted_2], 2);
 }
 
 import { computed, ref, watch, onMounted, onBeforeUnmount } from 'vue';
-import { classNames } from '../shared/utils';
-import { colorClasses, colorProps } from '../shared/mixins';
-import { f7ready, f7 } from '../shared/f7';
-import { useTooltip } from '../shared/use-tooltip';
+import { classNames } from '../shared/utils.js';
+import { colorClasses, colorProps } from '../shared/mixins.js';
+import { f7ready, f7 } from '../shared/f7.js';
+import { useTooltip } from '../shared/use-tooltip.js';
 export default {
   name: 'f7-toggle',
   render,
@@ -43,9 +46,10 @@ export default {
   },
   emits: ['change', 'toggle:change', 'update:checked'],
 
-  setup(props, {
-    emit
-  }) {
+  setup(props, _ref) {
+    let {
+      emit
+    } = _ref;
     let f7Toggle = null;
     const elRef = ref(null);
     useTooltip(elRef, props);

package/components/toolbar.js

@@ -1,23 +1,23 @@
-import { renderSlot as _renderSlot, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode } from "vue";
+import { renderSlot as _renderSlot, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, normalizeClass as _normalizeClass } from "vue";
 const _hoisted_1 = {
   key: 0,
   className: "toolbar-inner"
 };
 
 function render(_ctx, _cache) {
-  return _openBlock(), _createBlock("div", {
+  return _openBlock(), _createElementBlock("div", {
     ref: "elRef",
-    class: _ctx.classes
-  }, [_renderSlot(_ctx.$slots, "before-inner"), _ctx.inner ? (_openBlock(), _createBlock("div", _hoisted_1, [_renderSlot(_ctx.$slots, "default")])) : _renderSlot(_ctx.$slots, "default", {
+    class: _normalizeClass(_ctx.classes)
+  }, [_renderSlot(_ctx.$slots, "before-inner"), _ctx.inner ? (_openBlock(), _createElementBlock("div", _hoisted_1, [_renderSlot(_ctx.$slots, "default")])) : _renderSlot(_ctx.$slots, "default", {
     key: 1
   }), _renderSlot(_ctx.$slots, "after-inner")], 2);
 }
 
 import { computed, ref, provide, onMounted, onBeforeUnmount } from 'vue';
-import { classNames } from '../shared/utils';
-import { colorClasses, colorProps } from '../shared/mixins';
-import { f7 } from '../shared/f7';
-import { useTheme } from '../shared/use-theme';
+import { classNames } from '../shared/utils.js';
+import { colorClasses, colorProps } from '../shared/mixins.js';
+import { f7 } from '../shared/f7.js';
+import { useTheme } from '../shared/use-theme.js';
 export default {
   name: 'f7-toolbar',
   render,
@@ -73,9 +73,10 @@ export default {
   },
   emits: ['toolbar:hide', 'toolbar:show'],
 
-  setup(props, {
-    emit
-  }) {
+  setup(props, _ref) {
+    let {
+      emit
+    } = _ref;
     const elRef = ref(null);
     const theme = useTheme();
 

package/components/treeview-item.js

@@ -1,4 +1,4 @@
-import { renderSlot as _renderSlot, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, resolveComponent as _resolveComponent, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, createVNode as _createVNode, resolveDynamicComponent as _resolveDynamicComponent, mergeProps as _mergeProps, withCtx as _withCtx } from "vue";
+import { renderSlot as _renderSlot, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, resolveComponent as _resolveComponent, createBlock as _createBlock, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, createElementVNode as _createElementVNode, resolveDynamicComponent as _resolveDynamicComponent, mergeProps as _mergeProps, withCtx as _withCtx, normalizeClass as _normalizeClass } from "vue";
 const _hoisted_1 = {
   key: 0,
   className: "treeview-toggle"
@@ -17,28 +17,28 @@ const _hoisted_4 = {
 function render(_ctx, _cache) {
   const _component_f7_use_icon = _resolveComponent("f7-use-icon");
 
-  return _openBlock(), _createBlock("div", {
+  return _openBlock(), _createElementBlock("div", {
     ref: "elRef",
-    class: _ctx.classes
+    class: _normalizeClass(_ctx.classes)
   }, [(_openBlock(), _createBlock(_resolveDynamicComponent(_ctx.itemRootTag), _mergeProps({
     class: _ctx.itemRootClasses
   }, _ctx.itemRootAttrs, {
     onClick: _ctx.onClick
   }), {
-    default: _withCtx(() => [_renderSlot(_ctx.$slots, "root-start"), _ctx.needToggle ? (_openBlock(), _createBlock("div", _hoisted_1)) : _createCommentVNode("", true), _createVNode("div", _hoisted_2, [_renderSlot(_ctx.$slots, "content-start"), _ctx.icon ? (_openBlock(), _createBlock(_component_f7_use_icon, {
+    default: _withCtx(() => [_renderSlot(_ctx.$slots, "root-start"), _ctx.needToggle ? (_openBlock(), _createElementBlock("div", _hoisted_1)) : _createCommentVNode("", true), _createElementVNode("div", _hoisted_2, [_renderSlot(_ctx.$slots, "content-start"), _ctx.icon ? (_openBlock(), _createBlock(_component_f7_use_icon, {
       key: 0,
       icon: _ctx.icon
-    }, null, 8, ["icon"])) : _createCommentVNode("", true), _renderSlot(_ctx.$slots, "media"), _createVNode("div", _hoisted_3, [_renderSlot(_ctx.$slots, "label-start"), _createTextVNode(" " + _toDisplayString(_ctx.label) + " ", 1), _renderSlot(_ctx.$slots, "label")]), _renderSlot(_ctx.$slots, "content"), _renderSlot(_ctx.$slots, "content-end")]), _renderSlot(_ctx.$slots, "root"), _renderSlot(_ctx.$slots, "root-end")]),
+    }, null, 8, ["icon"])) : _createCommentVNode("", true), _renderSlot(_ctx.$slots, "media"), _createElementVNode("div", _hoisted_3, [_renderSlot(_ctx.$slots, "label-start"), _createTextVNode(" " + _toDisplayString(_ctx.label) + " ", 1), _renderSlot(_ctx.$slots, "label")]), _renderSlot(_ctx.$slots, "content"), _renderSlot(_ctx.$slots, "content-end")]), _renderSlot(_ctx.$slots, "root"), _renderSlot(_ctx.$slots, "root-end")]),
     _: 3
-  }, 16, ["class", "onClick"])), _ctx.hasChildren ? (_openBlock(), _createBlock("div", _hoisted_4, [_renderSlot(_ctx.$slots, "children-start"), _renderSlot(_ctx.$slots, "default"), _renderSlot(_ctx.$slots, "children")])) : _createCommentVNode("", true)], 2);
+  }, 16, ["class", "onClick"])), _ctx.hasChildren ? (_openBlock(), _createElementBlock("div", _hoisted_4, [_renderSlot(_ctx.$slots, "children-start"), _renderSlot(_ctx.$slots, "default"), _renderSlot(_ctx.$slots, "children")])) : _createCommentVNode("", true)], 2);
 }
 
 import { computed, ref, onMounted, onBeforeUnmount } from 'vue';
-import { classNames } from '../shared/utils';
-import { colorClasses, colorProps, actionsAttrs, actionsProps, actionsClasses, routerAttrs, routerProps, routerClasses, iconProps } from '../shared/mixins';
-import { useIcon } from '../shared/use-icon';
-import { f7ready, f7 } from '../shared/f7';
-import f7UseIcon from './use-icon';
+import { classNames } from '../shared/utils.js';
+import { colorClasses, colorProps, actionsAttrs, actionsProps, actionsClasses, routerAttrs, routerProps, routerClasses, iconProps } from '../shared/mixins.js';
+import { useIcon } from '../shared/use-icon.js';
+import { f7ready, f7 } from '../shared/f7.js';
+import f7UseIcon from './use-icon.js';
 export default {
   name: 'f7-treeview-item',
   render,
@@ -67,10 +67,11 @@ export default {
   },
   emits: ['click', 'treeview:open', 'treeview:close', 'treeview:loadchildren'],
 
-  setup(props, {
-    slots,
-    emit
-  }) {
+  setup(props, _ref) {
+    let {
+      slots,
+      emit
+    } = _ref;
     const elRef = ref(null);
     const hasChildren = computed(() => {
       return slots.default || slots.children || slots['children-start'];

package/components/treeview.js

@@ -1,14 +1,14 @@
-import { renderSlot as _renderSlot, openBlock as _openBlock, createBlock as _createBlock } from "vue";
+import { renderSlot as _renderSlot, normalizeClass as _normalizeClass, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
 
 function render(_ctx, _cache) {
-  return _openBlock(), _createBlock("div", {
-    class: _ctx.classes
+  return _openBlock(), _createElementBlock("div", {
+    class: _normalizeClass(_ctx.classes)
   }, [_renderSlot(_ctx.$slots, "default")], 2);
 }
 
 import { computed } from 'vue';
-import { classNames } from '../shared/utils';
-import { colorClasses, colorProps } from '../shared/mixins';
+import { classNames } from '../shared/utils.js';
+import { colorClasses, colorProps } from '../shared/mixins.js';
 export default {
   name: 'f7-treeview',
   render,

package/components/use-icon.js

@@ -1,14 +1,14 @@
-import { toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, resolveComponent as _resolveComponent, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock, mergeProps as _mergeProps, createCommentVNode as _createCommentVNode } from "vue";
+import { toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, resolveComponent as _resolveComponent, normalizeProps as _normalizeProps, guardReactiveProps as _guardReactiveProps, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock, mergeProps as _mergeProps, createCommentVNode as _createCommentVNode } from "vue";
 
 function render(_ctx, _cache) {
   const _component_f7_badge = _resolveComponent("f7-badge");
 
   const _component_f7_icon = _resolveComponent("f7-icon");
 
-  return _openBlock(), _createBlock(_component_f7_icon, _ctx.icon.props, {
-    default: _withCtx(() => [_ctx.icon.badge ? (_openBlock(), _createBlock(_component_f7_badge, _mergeProps({
+  return _openBlock(), _createBlock(_component_f7_icon, _normalizeProps(_guardReactiveProps(_ctx.icon.props)), {
+    default: _withCtx(() => [_ctx.icon.badge ? (_openBlock(), _createBlock(_component_f7_badge, _normalizeProps(_mergeProps({
       key: 0
-    }, _ctx.icon.badge.props), {
+    }, _ctx.icon.badge.props)), {
       default: _withCtx(() => [_createTextVNode(_toDisplayString(_ctx.icon.badge.content), 1)]),
       _: 1
     }, 16)) : _createCommentVNode("", true)]),
@@ -16,8 +16,8 @@ function render(_ctx, _cache) {
   }, 16);
 }
 
-import f7Icon from './icon';
-import f7Badge from './badge';
+import f7Icon from './icon.js';
+import f7Badge from './badge.js';
 export default {
   name: 'f7-use-icon',
   render,

package/components/view.d.ts

@@ -97,6 +97,11 @@ declare const View: DefineComponent<
       type: PropType<FunctionConstructor | ArrayConstructor>;
     },
 
+    initRouterOnTabShow: {
+      type: BooleanConstructor;
+      default: undefined;
+    },
+
     router: {
       type: BooleanConstructor;
       default: boolean;

package/components/view.js

@@ -1,15 +1,19 @@
 import { computed, ref, onMounted, onBeforeUnmount, onUpdated, toRaw, h } from 'vue';
-import { classNames, noUndefinedProps, getRouterId } from '../shared/utils';
-import { colorClasses, colorProps } from '../shared/mixins';
-import { f7ready, f7routers, f7, f7events } from '../shared/f7';
-import { useTab } from '../shared/use-tab';
-import { getRouterInitialComponent } from '../shared/get-router-initial-component';
+import { classNames, noUndefinedProps, getRouterId } from '../shared/utils.js';
+import { colorClasses, colorProps } from '../shared/mixins.js';
+import { f7ready, f7routers, f7, f7events } from '../shared/f7.js';
+import { useTab } from '../shared/use-tab.js';
+import { getRouterInitialComponent } from '../shared/get-router-initial-component.js';
 export default {
   name: 'f7-view',
   props: {
     tab: Boolean,
     tabActive: Boolean,
     name: String,
+    initRouterOnTabShow: {
+      type: Boolean,
+      default: undefined
+    },
     router: {
       type: Boolean,
       default: true
@@ -181,14 +185,16 @@ export default {
   },
   emits: ['view:init', 'view:resize', 'swipeback:move', 'swipeback:beforechange', 'swipeback:afterchange', 'swipeback:beforereset', 'swipeback:afterreset', 'tab:hide', 'tab:show'],
 
-  setup(props, {
-    emit,
-    slots
-  }) {
+  setup(props, _ref) {
+    let {
+      emit,
+      slots
+    } = _ref;
     // 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 initialPageComponent = null;
+    const shouldInitRouter = !(props.initRouterOnTabShow && props.tab && !props.tabActive);
     let f7View = null;
     const elRef = ref(null);
     let routerData = null;
@@ -228,7 +234,7 @@ export default {
       };
       f7routers.views.push(routerData);
 
-      if (f7View && f7View.router && (props.url || props.main)) {
+      if (shouldInitRouter && f7View && f7View.router && (props.url || props.main)) {
         const initialData = getRouterInitialComponent(f7View.router, initialPageComponent);
         initialPage = initialData.initialPage;
         initialRoute = initialData.initialRoute;

package/components/views.js

@@ -1,14 +1,14 @@
-import { renderSlot as _renderSlot, openBlock as _openBlock, createBlock as _createBlock } from "vue";
+import { renderSlot as _renderSlot, normalizeClass as _normalizeClass, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
 
 function render(_ctx, _cache) {
-  return _openBlock(), _createBlock("div", {
-    class: _ctx.classes
+  return _openBlock(), _createElementBlock("div", {
+    class: _normalizeClass(_ctx.classes)
   }, [_renderSlot(_ctx.$slots, "default")], 2);
 }
 
 import { computed } from 'vue';
-import { classNames } from '../shared/utils';
-import { colorClasses, colorProps } from '../shared/mixins';
+import { classNames } from '../shared/utils.js';
+import { colorClasses, colorProps } from '../shared/mixins.js';
 export default {
   name: 'f7-views',
   render,

package/framework7-vue-bundle.js

@@ -1,116 +1,120 @@
 /**
- * Framework7 Vue 7.0.0-beta.2
+ * Framework7 Vue 7.0.0-beta.20
  * Build full featured iOS & Android apps using Framework7 & Vue
  * https://framework7.io/vue/
  *
- * Copyright 2014-2021 Vladimir Kharlampidi
+ * Copyright 2014-2022 Vladimir Kharlampidi
  *
  * Released under the MIT License
  *
- * Released on: October 4, 2021
+ * Released on: April 15, 2022
  */
-import Framework7Vue from './shared/plugin';
-import { f7, f7ready, theme } from './shared/f7';
-import { useStore } from './shared/use-store';
+import Framework7Vue from './shared/plugin.js';
+import { f7, f7ready, theme } from './shared/f7.js';
+import { useStore } from './shared/use-store.js';
 
-import f7AccordionContent from './components/accordion-content';
-import f7AccordionItem from './components/accordion-item';
-import f7AccordionToggle from './components/accordion-toggle';
-import f7Accordion from './components/accordion';
-import f7ActionsButton from './components/actions-button';
-import f7ActionsGroup from './components/actions-group';
-import f7ActionsLabel from './components/actions-label';
-import f7Actions from './components/actions';
-import f7App from './components/app';
-import f7Appbar from './components/appbar';
-import f7AreaChart from './components/area-chart';
-import f7Badge from './components/badge';
-import f7BlockFooter from './components/block-footer';
-import f7BlockHeader from './components/block-header';
-import f7BlockTitle from './components/block-title';
-import f7Block from './components/block';
-import f7Button from './components/button';
-import f7CardContent from './components/card-content';
-import f7CardFooter from './components/card-footer';
-import f7CardHeader from './components/card-header';
-import f7Card from './components/card';
-import f7Checkbox from './components/checkbox';
-import f7Chip from './components/chip';
-import f7Col from './components/col';
-import f7FabBackdrop from './components/fab-backdrop';
-import f7FabButton from './components/fab-button';
-import f7FabButtons from './components/fab-buttons';
-import f7Fab from './components/fab';
-import f7Gauge from './components/gauge';
-import f7Icon from './components/icon';
-import f7Input from './components/input';
-import f7Link from './components/link';
-import f7ListButton from './components/list-button';
-import f7ListGroup from './components/list-group';
-import f7ListIndex from './components/list-index';
-import f7ListInput from './components/list-input';
-import f7ListItemCell from './components/list-item-cell';
-import f7ListItemRow from './components/list-item-row';
-import f7ListItem from './components/list-item';
-import f7List from './components/list';
-import f7LoginScreenTitle from './components/login-screen-title';
-import f7LoginScreen from './components/login-screen';
-import f7MenuDropdownItem from './components/menu-dropdown-item';
-import f7MenuDropdown from './components/menu-dropdown';
-import f7MenuItem from './components/menu-item';
-import f7Menu from './components/menu';
-import f7Message from './components/message';
-import f7MessagebarAttachment from './components/messagebar-attachment';
-import f7MessagebarAttachments from './components/messagebar-attachments';
-import f7MessagebarSheetImage from './components/messagebar-sheet-image';
-import f7MessagebarSheetItem from './components/messagebar-sheet-item';
-import f7MessagebarSheet from './components/messagebar-sheet';
-import f7Messagebar from './components/messagebar';
-import f7MessagesTitle from './components/messages-title';
-import f7Messages from './components/messages';
-import f7NavLeft from './components/nav-left';
-import f7NavRight from './components/nav-right';
-import f7NavTitleLarge from './components/nav-title-large';
-import f7NavTitle from './components/nav-title';
-import f7Navbar from './components/navbar';
-import f7PageContent from './components/page-content';
-import f7Page from './components/page';
-import f7Panel from './components/panel';
-import f7PhotoBrowser from './components/photo-browser';
-import f7PieChart from './components/pie-chart';
-import f7Popover from './components/popover';
-import f7Popup from './components/popup';
-import f7Preloader from './components/preloader';
-import f7Progressbar from './components/progressbar';
-import f7Radio from './components/radio';
-import f7Range from './components/range';
-import f7RoutableModals from './components/routable-modals';
-import f7Row from './components/row';
-import f7Searchbar from './components/searchbar';
-import f7Segmented from './components/segmented';
-import f7Sheet from './components/sheet';
-import f7SkeletonAvatar from './components/skeleton-avatar';
-import f7SkeletonBlock from './components/skeleton-block';
-import f7SkeletonImage from './components/skeleton-image';
-import f7SkeletonText from './components/skeleton-text';
-import f7Stepper from './components/stepper';
-import f7Subnavbar from './components/subnavbar';
-import f7SwipeoutActions from './components/swipeout-actions';
-import f7SwipeoutButton from './components/swipeout-button';
-import f7SwiperSlide from './components/swiper-slide';
-import f7Swiper from './components/swiper';
-import f7Tab from './components/tab';
-import f7Tabs from './components/tabs';
-import f7TextEditor from './components/text-editor';
-import f7Toggle from './components/toggle';
-import f7Toolbar from './components/toolbar';
-import f7TreeviewItem from './components/treeview-item';
-import f7Treeview from './components/treeview';
-import f7UseIcon from './components/use-icon';
-import f7View from './components/view';
-import f7Views from './components/views';
+import f7AccordionContent from './components/accordion-content.js';
+import f7AccordionItem from './components/accordion-item.js';
+import f7AccordionToggle from './components/accordion-toggle.js';
+import f7Accordion from './components/accordion.js';
+import f7ActionsButton from './components/actions-button.js';
+import f7ActionsGroup from './components/actions-group.js';
+import f7ActionsLabel from './components/actions-label.js';
+import f7Actions from './components/actions.js';
+import f7App from './components/app.js';
+import f7Appbar from './components/appbar.js';
+import f7AreaChart from './components/area-chart.js';
+import f7Badge from './components/badge.js';
+import f7BlockFooter from './components/block-footer.js';
+import f7BlockHeader from './components/block-header.js';
+import f7BlockTitle from './components/block-title.js';
+import f7Block from './components/block.js';
+import f7BreadcrumbsCollapsed from './components/breadcrumbs-collapsed.js';
+import f7BreadcrumbsItem from './components/breadcrumbs-item.js';
+import f7BreadcrumbsSeparator from './components/breadcrumbs-separator.js';
+import f7Breadcrumbs from './components/breadcrumbs.js';
+import f7Button from './components/button.js';
+import f7CardContent from './components/card-content.js';
+import f7CardFooter from './components/card-footer.js';
+import f7CardHeader from './components/card-header.js';
+import f7Card from './components/card.js';
+import f7Checkbox from './components/checkbox.js';
+import f7Chip from './components/chip.js';
+import f7Col from './components/col.js';
+import f7FabBackdrop from './components/fab-backdrop.js';
+import f7FabButton from './components/fab-button.js';
+import f7FabButtons from './components/fab-buttons.js';
+import f7Fab from './components/fab.js';
+import f7Gauge from './components/gauge.js';
+import f7Icon from './components/icon.js';
+import f7Input from './components/input.js';
+import f7Link from './components/link.js';
+import f7ListButton from './components/list-button.js';
+import f7ListGroup from './components/list-group.js';
+import f7ListIndex from './components/list-index.js';
+import f7ListInput from './components/list-input.js';
+import f7ListItemCell from './components/list-item-cell.js';
+import f7ListItemRow from './components/list-item-row.js';
+import f7ListItem from './components/list-item.js';
+import f7List from './components/list.js';
+import f7LoginScreenTitle from './components/login-screen-title.js';
+import f7LoginScreen from './components/login-screen.js';
+import f7MenuDropdownItem from './components/menu-dropdown-item.js';
+import f7MenuDropdown from './components/menu-dropdown.js';
+import f7MenuItem from './components/menu-item.js';
+import f7Menu from './components/menu.js';
+import f7Message from './components/message.js';
+import f7MessagebarAttachment from './components/messagebar-attachment.js';
+import f7MessagebarAttachments from './components/messagebar-attachments.js';
+import f7MessagebarSheetImage from './components/messagebar-sheet-image.js';
+import f7MessagebarSheetItem from './components/messagebar-sheet-item.js';
+import f7MessagebarSheet from './components/messagebar-sheet.js';
+import f7Messagebar from './components/messagebar.js';
+import f7MessagesTitle from './components/messages-title.js';
+import f7Messages from './components/messages.js';
+import f7NavLeft from './components/nav-left.js';
+import f7NavRight from './components/nav-right.js';
+import f7NavTitleLarge from './components/nav-title-large.js';
+import f7NavTitle from './components/nav-title.js';
+import f7Navbar from './components/navbar.js';
+import f7PageContent from './components/page-content.js';
+import f7Page from './components/page.js';
+import f7Panel from './components/panel.js';
+import f7PhotoBrowser from './components/photo-browser.js';
+import f7PieChart from './components/pie-chart.js';
+import f7Popover from './components/popover.js';
+import f7Popup from './components/popup.js';
+import f7Preloader from './components/preloader.js';
+import f7Progressbar from './components/progressbar.js';
+import f7Radio from './components/radio.js';
+import f7Range from './components/range.js';
+import f7RoutableModals from './components/routable-modals.js';
+import f7Row from './components/row.js';
+import f7Searchbar from './components/searchbar.js';
+import f7Segmented from './components/segmented.js';
+import f7Sheet from './components/sheet.js';
+import f7SkeletonAvatar from './components/skeleton-avatar.js';
+import f7SkeletonBlock from './components/skeleton-block.js';
+import f7SkeletonImage from './components/skeleton-image.js';
+import f7SkeletonText from './components/skeleton-text.js';
+import f7Stepper from './components/stepper.js';
+import f7Subnavbar from './components/subnavbar.js';
+import f7SwipeoutActions from './components/swipeout-actions.js';
+import f7SwipeoutButton from './components/swipeout-button.js';
+import f7SwiperSlide from './components/swiper-slide.js';
+import f7Swiper from './components/swiper.js';
+import f7Tab from './components/tab.js';
+import f7Tabs from './components/tabs.js';
+import f7TextEditor from './components/text-editor.js';
+import f7Toggle from './components/toggle.js';
+import f7Toolbar from './components/toolbar.js';
+import f7TreeviewItem from './components/treeview-item.js';
+import f7Treeview from './components/treeview.js';
+import f7UseIcon from './components/use-icon.js';
+import f7View from './components/view.js';
+import f7Views from './components/views.js';
 
-export { f7AccordionContent, f7AccordionItem, f7AccordionToggle, f7Accordion, f7ActionsButton, f7ActionsGroup, f7ActionsLabel, f7Actions, f7App, f7Appbar, f7AreaChart, f7Badge, f7BlockFooter, f7BlockHeader, f7BlockTitle, f7Block, f7Button, f7CardContent, f7CardFooter, f7CardHeader, f7Card, f7Checkbox, f7Chip, f7Col, f7FabBackdrop, f7FabButton, f7FabButtons, f7Fab, f7Gauge, f7Icon, f7Input, f7Link, f7ListButton, f7ListGroup, f7ListIndex, f7ListInput, f7ListItemCell, f7ListItemRow, f7ListItem, f7List, f7LoginScreenTitle, f7LoginScreen, f7MenuDropdownItem, f7MenuDropdown, f7MenuItem, f7Menu, f7Message, f7MessagebarAttachment, f7MessagebarAttachments, f7MessagebarSheetImage, f7MessagebarSheetItem, f7MessagebarSheet, f7Messagebar, f7MessagesTitle, f7Messages, f7NavLeft, f7NavRight, f7NavTitleLarge, f7NavTitle, f7Navbar, f7PageContent, f7Page, f7Panel, f7PhotoBrowser, f7PieChart, f7Popover, f7Popup, f7Preloader, f7Progressbar, f7Radio, f7Range, f7RoutableModals, f7Row, f7Searchbar, f7Segmented, f7Sheet, f7SkeletonAvatar, f7SkeletonBlock, f7SkeletonImage, f7SkeletonText, f7Stepper, f7Subnavbar, f7SwipeoutActions, f7SwipeoutButton, f7SwiperSlide, f7Swiper, f7Tab, f7Tabs, f7TextEditor, f7Toggle, f7Toolbar, f7TreeviewItem, f7Treeview, f7UseIcon, f7View, f7Views }
+export { f7AccordionContent, f7AccordionItem, f7AccordionToggle, f7Accordion, f7ActionsButton, f7ActionsGroup, f7ActionsLabel, f7Actions, f7App, f7Appbar, f7AreaChart, f7Badge, f7BlockFooter, f7BlockHeader, f7BlockTitle, f7Block, f7BreadcrumbsCollapsed, f7BreadcrumbsItem, f7BreadcrumbsSeparator, f7Breadcrumbs, f7Button, f7CardContent, f7CardFooter, f7CardHeader, f7Card, f7Checkbox, f7Chip, f7Col, f7FabBackdrop, f7FabButton, f7FabButtons, f7Fab, f7Gauge, f7Icon, f7Input, f7Link, f7ListButton, f7ListGroup, f7ListIndex, f7ListInput, f7ListItemCell, f7ListItemRow, f7ListItem, f7List, f7LoginScreenTitle, f7LoginScreen, f7MenuDropdownItem, f7MenuDropdown, f7MenuItem, f7Menu, f7Message, f7MessagebarAttachment, f7MessagebarAttachments, f7MessagebarSheetImage, f7MessagebarSheetItem, f7MessagebarSheet, f7Messagebar, f7MessagesTitle, f7Messages, f7NavLeft, f7NavRight, f7NavTitleLarge, f7NavTitle, f7Navbar, f7PageContent, f7Page, f7Panel, f7PhotoBrowser, f7PieChart, f7Popover, f7Popup, f7Preloader, f7Progressbar, f7Radio, f7Range, f7RoutableModals, f7Row, f7Searchbar, f7Segmented, f7Sheet, f7SkeletonAvatar, f7SkeletonBlock, f7SkeletonImage, f7SkeletonText, f7Stepper, f7Subnavbar, f7SwipeoutActions, f7SwipeoutButton, f7SwiperSlide, f7Swiper, f7Tab, f7Tabs, f7TextEditor, f7Toggle, f7Toolbar, f7TreeviewItem, f7Treeview, f7UseIcon, f7View, f7Views }
 export { f7, f7ready, theme, useStore };
 export default Framework7Vue;
 
@@ -131,6 +135,10 @@ function registerComponents(app) {
   app.component('f7-block-header', f7BlockHeader);
   app.component('f7-block-title', f7BlockTitle);
   app.component('f7-block', f7Block);
+  app.component('f7-breadcrumbs-collapsed', f7BreadcrumbsCollapsed);
+  app.component('f7-breadcrumbs-item', f7BreadcrumbsItem);
+  app.component('f7-breadcrumbs-separator', f7BreadcrumbsSeparator);
+  app.component('f7-breadcrumbs', f7Breadcrumbs);
   app.component('f7-button', f7Button);
   app.component('f7-card-content', f7CardContent);
   app.component('f7-card-footer', f7CardFooter);