@xenknight/framework7-vue 0.0.5 → 0.0.7

package/components/app.d.ts

@@ -34,6 +34,11 @@ declare const App: DefineComponent<
       default: () => undefined;
     },
 
+    mdColorScheme: {
+      type: any;
+      default: undefined;
+    },
+
     lazyModulesPath: {
       type: any;
       default: undefined;

package/components/app.js

@@ -41,6 +41,10 @@ export default {
       type: Object,
       default: () => undefined
     },
+    mdColorScheme: {
+      type: String,
+      default: undefined
+    },
     lazyModulesPath: {
       type: String,
       default: undefined

package/components/navbar-new.d.ts

@@ -0,0 +1,20 @@
+
+import { ComponentOptionsMixin, DefineComponent, PropType } from 'vue';
+
+
+declare const NavbarNew: DefineComponent<
+  {
+    
+  },
+  () => JSX.Element,
+  unknown,
+  {},
+  {},
+  ComponentOptionsMixin,
+  ComponentOptionsMixin,
+  ("navbar-new:hide" | "navbar-new:show" | "navbar-new:expand" | "navbar-new:collapse" | "navbar-new:transparentshow" | "navbar-new:transparenthide" | "click:back" | "back:click")[],
+  "navbar-new:hide" | "navbar-new:show" | "navbar-new:expand" | "navbar-new:collapse" | "navbar-new:transparentshow" | "navbar-new:transparenthide" | "click:back" | "back:click"
+>;
+
+export default NavbarNew;
+  

package/components/navbar-new.js

@@ -0,0 +1,248 @@
+import { createElementVNode as _createElementVNode, renderSlot as _renderSlot, resolveComponent as _resolveComponent, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, createElementBlock as _createElementBlock, normalizeClass as _normalizeClass } from "vue";
+const _hoisted_1 = /*#__PURE__*/_createElementVNode("div", {
+  class: "navbar-new-bg"
+}, null, -1);
+const _hoisted_2 = {
+  key: 3,
+  className: "title-large"
+};
+const _hoisted_3 = {
+  className: "title-large-text"
+};
+function render(_ctx, _cache) {
+  const _component_f7_nav_left = _resolveComponent("f7-nav-left");
+  const _component_f7_nav_title = _resolveComponent("f7-nav-title");
+  const _component_f7_nav_right = _resolveComponent("f7-nav-right");
+  return _openBlock(), _createElementBlock("div", {
+    ref: "elRef",
+    class: _normalizeClass(_ctx.classes)
+  }, [_hoisted_1, _renderSlot(_ctx.$slots, "before-inner"), _createElementVNode("div", {
+    class: _normalizeClass(_ctx.innerClasses)
+  }, [_ctx.hasLeft ? (_openBlock(), _createBlock(_component_f7_nav_left, {
+    key: 0,
+    "back-link": _ctx.backLink,
+    "back-link-url": _ctx.backLinkUrl,
+    "back-link-force": _ctx.backLinkForce,
+    "back-link-show-text": _ctx.backLinkShowText,
+    "onBack:click": _ctx.onBackClick
+  }, {
+    default: _withCtx(() => [_renderSlot(_ctx.$slots, "nav-left"), _renderSlot(_ctx.$slots, "left")]),
+    _: 3
+  }, 8, ["back-link", "back-link-url", "back-link-force", "back-link-show-text", "onBack:click"])) : _createCommentVNode("", true), _ctx.hasTitle ? (_openBlock(), _createBlock(_component_f7_nav_title, {
+    key: 1,
+    title: _ctx.title,
+    subtitle: _ctx.subtitle
+  }, {
+    default: _withCtx(() => [_renderSlot(_ctx.$slots, "title")]),
+    _: 3
+  }, 8, ["title", "subtitle"])) : _createCommentVNode("", true), _ctx.hasRight ? (_openBlock(), _createBlock(_component_f7_nav_right, {
+    key: 2
+  }, {
+    default: _withCtx(() => [_renderSlot(_ctx.$slots, "nav-right"), _renderSlot(_ctx.$slots, "right")]),
+    _: 3
+  })) : _createCommentVNode("", true), _ctx.hasLargeTitle ? (_openBlock(), _createElementBlock("div", _hoisted_2, [_createElementVNode("div", _hoisted_3, [_createTextVNode(_toDisplayString(_ctx.largeTitle) + " ", 1), _renderSlot(_ctx.$slots, "title-large")])])) : _createCommentVNode("", true), _renderSlot(_ctx.$slots, "default")], 2), _renderSlot(_ctx.$slots, "after-inner")], 2);
+}
+import { computed, ref, onMounted, onBeforeUnmount } from 'vue';
+import { classNames } from '../shared/utils.js';
+import { colorClasses, colorProps } from '../shared/mixins.js';
+import { f7ready, f7 } from '../shared/f7.js';
+import { useTheme } from '../shared/use-theme.js';
+import f7NavLeft from './nav-left.js';
+import f7NavTitle from './nav-title.js';
+import f7NavRight from './nav-right.js';
+export default {
+  name: 'f7-navbar-new',
+  render,
+  components: {
+    f7NavLeft,
+    f7NavTitle,
+    f7NavRight
+  },
+  props: {
+    backLink: [Boolean, String],
+    backLinkUrl: String,
+    backLinkForce: Boolean,
+    backLinkShowText: {
+      type: Boolean,
+      default: undefined
+    },
+    sliding: {
+      type: Boolean,
+      default: true
+    },
+    title: String,
+    subtitle: String,
+    hidden: Boolean,
+    outline: {
+      type: Boolean,
+      default: true
+    },
+    innerClass: String,
+    innerClassName: String,
+    large: Boolean,
+    largeTransparent: Boolean,
+    transparent: Boolean,
+    titleLarge: String,
+    ...colorProps
+  },
+  emits: ['navbar-new:hide', 'navbar-new:show', 'navbar-new:expand', 'navbar-new:collapse', 'navbar-new:transparentshow', 'navbar-new:transparenthide', 'click:back', 'back:click'],
+  setup(props, _ref) {
+    let {
+      emit,
+      slots
+    } = _ref;
+    let routerPositionClass = '';
+    let largeCollapsed = false;
+    let routerNavbarRole = null;
+    let routerNavbarRoleDetailRoot = false;
+    let routerNavbarMasterStack = false;
+    let transparentVisible = false;
+    const elRef = ref(null);
+    const theme = useTheme();
+    const onHide = navbarEl => {
+      if (elRef.value !== navbarEl) return;
+      emit('navbar-new:hide');
+    };
+    const onShow = navbarEl => {
+      if (elRef.value !== navbarEl) return;
+      emit('navbar-new:show');
+    };
+    const onExpand = navbarEl => {
+      if (elRef.value !== navbarEl) return;
+      largeCollapsed = false;
+      emit('navbar-new:expand');
+    };
+    const onCollapse = navbarEl => {
+      if (elRef.value !== navbarEl) return;
+      largeCollapsed = true;
+      emit('navbar-new:collapse');
+    };
+    const onNavbarTransparentShow = navbarEl => {
+      if (elRef.value !== navbarEl) return;
+      transparentVisible = true;
+      emit('navbar-new:transparentshow');
+    };
+    const onNavbarTransparentHide = navbarEl => {
+      if (elRef.value !== navbarEl) return;
+      transparentVisible = false;
+      emit('navbar-new:transparenthide');
+    };
+    const onNavbarPosition = (navbarEl, position) => {
+      if (elRef.value !== navbarEl) return;
+      routerPositionClass = position ? `navbar-${position}` : '';
+    };
+    const onNavbarRole = (navbarEl, rolesData) => {
+      if (elRef.value !== navbarEl) return;
+      routerNavbarRole = rolesData.role;
+      routerNavbarRoleDetailRoot = rolesData.detailRoot;
+    };
+    const onNavbarMasterStack = navbarEl => {
+      if (elRef.value !== navbarEl) return;
+      routerNavbarMasterStack = true;
+    };
+    const onNavbarMasterUnstack = navbarEl => {
+      if (elRef.value !== navbarEl) return;
+      routerNavbarMasterStack = false;
+    };
+    const hide = animate => {
+      if (!f7) return;
+      f7.navbarNew.hide(elRef.value, animate);
+    };
+    const show = animate => {
+      if (!f7) return;
+      f7.navbarNew.show(elRef.value, animate);
+    };
+    const size = () => {
+      if (!f7) return;
+      f7.navbarNew.size(elRef.value);
+    };
+    const onBackClick = event => {
+      emit('back:click', event);
+      emit('click:back', event);
+    };
+    onMounted(() => {
+      if (!elRef.value) return;
+      f7ready(() => {
+        f7.navbarNew.size(elRef.value);
+        f7.on('navbarNewShow', onShow);
+        f7.on('navbarNewHide', onHide);
+        f7.on('navbarNewCollapse', onCollapse);
+        f7.on('navbarNewExpand', onExpand);
+        f7.on('navbarPosition', onNavbarPosition);
+        f7.on('navbarRole', onNavbarRole);
+        f7.on('navbarMasterStack', onNavbarMasterStack);
+        f7.on('navbarMasterUnstack', onNavbarMasterUnstack);
+        f7.on('navbarNewTransparentShow', onNavbarTransparentShow);
+        f7.on('navbarNewTransparentHide', onNavbarTransparentHide);
+      });
+    });
+    onBeforeUnmount(() => {
+      if (!f7) return;
+      f7.off('navbarNewShow', onShow);
+      f7.off('navbarNewHide', onHide);
+      f7.off('navbarNewCollapse', onCollapse);
+      f7.off('navbarNewExpand', onExpand);
+      f7.off('navbarPosition', onNavbarPosition);
+      f7.off('navbarRole', onNavbarRole);
+      f7.off('navbarMasterStack', onNavbarMasterStack);
+      f7.off('navbarMasterUnstack', onNavbarMasterUnstack);
+      f7.off('navbarNewTransparentShow', onNavbarTransparentShow);
+      f7.off('navbarNewTransparentHide', onNavbarTransparentHide);
+    });
+    const addLeftTitleClass = computed(() => theme.value && theme.value.ios && f7 && !(f7.params.navbarNew && f7.params.navbarNew.iosCenterTitle));
+    const addCenterTitleClass = computed(() => theme.value && theme.value.md && f7 && f7.params.navbarNew && f7.params.navbarNew.mdCenterTitle);
+    const isLarge = computed(() => props.large || props.largeTransparent);
+    const isTransparent = computed(() => props.transparent || isLarge.value && props.largeTransparent);
+    const isTransparentVisible = computed(() => isTransparent.value && transparentVisible);
+    const classes = computed(() => classNames('navbar-new', routerPositionClass, {
+      'navbar-new-hidden': props.hidden,
+      'navbar-new-large': isLarge.value,
+      'navbar-new-large-collapsed': isLarge.value && largeCollapsed,
+      'navbar-new-transparent': isTransparent.value,
+      'navbar-new-transparent-visible': isTransparentVisible.value,
+      'navbar-master': routerNavbarRole === 'master',
+      'navbar-master-detail': routerNavbarRole === 'detail',
+      'navbar-master-detail-root': routerNavbarRoleDetailRoot === true,
+      'navbar-master-stacked': routerNavbarMasterStack === true,
+      'no-outline': !props.outline
+    }, colorClasses(props)));
+    const largeTitle = computed(() => {
+      let largeTitleText = props.titleLarge;
+      if (!largeTitleText && props.large && props.title) largeTitleText = props.title;
+      return largeTitleText;
+    });
+    const hasLeft = computed(() => {
+      return props.backLink || slots['nav-left'] || slots.left;
+    });
+    const hasTitle = computed(() => {
+      return props.title || props.subtitle || slots.title;
+    });
+    const hasRight = computed(() => {
+      return slots['nav-right'] || slots.right;
+    });
+    const hasLargeTitle = computed(() => {
+      return largeTitle.value || slots['title-large'];
+    });
+    const innerClasses = computed(() => {
+      return classNames('navbar-new-inner', props.innerClass, props.innerClassName, {
+        sliding: props.sliding,
+        'navbar-new-inner-left-title': addLeftTitleClass.value,
+        'navbar-new-inner-centered-title': addCenterTitleClass.value
+      });
+    });
+    return {
+      elRef,
+      classes,
+      innerClasses,
+      hide,
+      show,
+      size,
+      largeTitle,
+      hasLeft,
+      hasTitle,
+      hasRight,
+      hasLargeTitle,
+      onBackClick
+    };
+  }
+};

package/components/page.js

@@ -2,6 +2,7 @@ import { computed, ref, onMounted, onBeforeUnmount, h } from 'vue';
 import { classNames } from '../shared/utils.js';
 import { colorClasses, colorProps } from '../shared/mixins.js';
 import { f7ready, f7 } from '../shared/f7.js';
+import $ from '../../core/shared/dom7.js';
 import f7PageContent from './page-content.js';
 export default {
   name: 'f7-page',
@@ -78,7 +79,7 @@ export default {
     const onPageInit = page => {
       if (elRef.value !== page.el) return;
       if (typeof props.withSubnavbar === 'undefined' && typeof props.subnavbar === 'undefined') {
-        if (page.$navbarEl && page.$navbarEl.length && page.$navbarEl.find('.subnavbar').length || page.$el.children('.navbar').find('.subnavbar').length) {
+        if (page.$navbarEl && page.$navbarEl.length && page.$navbarEl.find('.subnavbar').length || page.$navbarNewEl && page.$navbarNewEl.length && page.$navbarNewEl.find('.subnavbar').length || page.$el.children('.navbar').find('.subnavbar').length || page.$el.children('.navbar-new').find('.subnavbar').length) {
           hasSubnavbar = true;
         }
       }
@@ -86,6 +87,9 @@ export default {
         if (page.$navbarEl && page.$navbarEl.hasClass('navbar-large')) {
           hasNavbarLarge = true;
         }
+        if (page.$navbarNewEl && page.$navbarNewEl.hasClass('navbar-new-large')) {
+          hasNavbarLarge = true;
+        }
       }
       emit('page:init', page);
     };
@@ -157,6 +161,22 @@ export default {
       if (elRef.value !== pageEl) return;
       hasNavbarLargeCollapsed = false;
     };
+    const onNavbarNewCollapse = navbarEl => {
+      if (!elRef.value) return;
+      const $navbarEl = $(navbarEl);
+      const $pageEl = $navbarEl.parents('.page');
+      if ($pageEl.length && $pageEl[0] === elRef.value) {
+        hasNavbarLargeCollapsed = true;
+      }
+    };
+    const onNavbarNewExpand = navbarEl => {
+      if (!elRef.value) return;
+      const $navbarEl = $(navbarEl);
+      const $pageEl = $navbarEl.parents('.page');
+      if ($pageEl.length && $pageEl[0] === elRef.value) {
+        hasNavbarLargeCollapsed = false;
+      }
+    };
     const onCardOpened = (cardEl, pageEl) => {
       if (elRef.value !== pageEl) return;
       hasCardExpandableOpened = true;
@@ -208,6 +228,8 @@ export default {
         f7.on('pageMasterUnstack', onPageMasterUnstack);
         f7.on('pageNavbarLargeCollapsed', onPageNavbarLargeCollapsed);
         f7.on('pageNavbarLargeExpanded', onPageNavbarLargeExpanded);
+        f7.on('navbarNewCollapse', onNavbarNewCollapse);
+        f7.on('navbarNewExpand', onNavbarNewExpand);
         f7.on('cardOpened', onCardOpened);
         f7.on('cardClose', onCardClose);
         f7.on('pageTabShow', onPageTabShow);
@@ -231,6 +253,8 @@ export default {
       f7.off('pageMasterUnstack', onPageMasterUnstack);
       f7.off('pageNavbarLargeCollapsed', onPageNavbarLargeCollapsed);
       f7.off('pageNavbarLargeExpanded', onPageNavbarLargeExpanded);
+      f7.off('navbarNewCollapse', onNavbarNewCollapse);
+      f7.off('navbarNewExpand', onNavbarNewExpand);
       f7.off('cardOpened', onCardOpened);
       f7.off('cardClose', onCardClose);
       f7.off('pageTabShow', onPageTabShow);
@@ -251,7 +275,7 @@ export default {
       'page-with-card-opened': hasCardExpandableOpened === true,
       'login-screen-page': props.loginScreen
     }, colorClasses(props)));
-    const fixedTags = 'navbar toolbar tabbar subnavbar searchbar messagebar fab list-index panel'.split(' ').map(tagName => `f7-${tagName}`);
+    const fixedTags = 'navbar navbar-new toolbar tabbar subnavbar searchbar messagebar fab list-index panel'.split(' ').map(tagName => `f7-${tagName}`);
     return () => {
       const fixedList = [];
       const staticList = [];
@@ -277,6 +301,9 @@ export default {
           if (tag === 'f7-navbar') {
             if (vnode.props && (vnode.props.large || vnode.props.large === '')) hasNavbarLargeComputed = true;
           }
+          if (tag === 'f7-navbar-new') {
+            if (vnode.props && (vnode.props.large || vnode.props.largeTransparent || vnode.props.large === '')) hasNavbarLargeComputed = true;
+          }
           if (typeof hasMessages === 'undefined' && tag === 'f7-messages') hasMessages = true;
           if (fixedTags.indexOf(tag) >= 0) {
             isFixedTag = true;
@@ -290,7 +317,7 @@ export default {
       if ((hasSubnavbarComputed || hasSubnavbar) && typeof props.subnavbar === 'undefined' && typeof props.withSubnavbar === 'undefined' && classesValue.indexOf('page-with-subnavbar') < 0) {
         classesValue += ' page-with-subnavbar';
       }
-      if ((hasNavbarLargeComputed || hasNavbarLarge) && typeof props.navbarLarge === 'undefined' && typeof props.withNavbarLarge === 'undefined' && classesValue.indexOf('page-with-navbar-large') < 0) {
+      if ((hasNavbarLargeComputed || hasNavbarLarge) && typeof props.navbarLarge === 'undefined' && typeof props.withNavbarLarge === 'undefined' && classesValue.indexOf('page-with-navbar-large') < 0 && classesValue.indexOf('page-with-navbar-new-large') < 0) {
         classesValue += ' page-with-navbar-large';
       }
       if (!props.pageContent) {

package/components/popover.d.ts

@@ -19,11 +19,6 @@ declare const Popover: DefineComponent<
       default: undefined;
     },
 
-    arrow: {
-      type: BooleanConstructor;
-      default: undefined;
-    },
-
     backdrop: {
       type: BooleanConstructor;
       default: undefined;

package/components/popover.js

@@ -1,16 +1,12 @@
-import { openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, renderSlot as _renderSlot, createElementVNode as _createElementVNode, normalizeClass as _normalizeClass } from "vue";
+import { renderSlot as _renderSlot, createElementVNode as _createElementVNode, normalizeClass as _normalizeClass, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
 const _hoisted_1 = {
-  key: 0,
-  class: "popover-arrow"
-};
-const _hoisted_2 = {
   class: "popover-inner"
 };
 function render(_ctx, _cache) {
   return _openBlock(), _createElementBlock("div", {
     ref: "elRef",
     class: _normalizeClass(_ctx.classes)
-  }, [_ctx.arrow !== false ? (_openBlock(), _createElementBlock("div", _hoisted_1)) : _createCommentVNode("", true), _createElementVNode("div", _hoisted_2, [_renderSlot(_ctx.$slots, "default")])], 2);
+  }, [_createElementVNode("div", _hoisted_1, [_renderSlot(_ctx.$slots, "default")])], 2);
 }
 import { computed, ref, watch, onMounted, onBeforeUnmount } from 'vue';
 import { classNames } from '../shared/utils.js';
@@ -30,10 +26,6 @@ export default {
       type: [String, Object],
       default: undefined
     },
-    arrow: {
-      type: Boolean,
-      default: undefined
-    },
     backdrop: {
       type: Boolean,
       default: undefined
@@ -95,6 +87,9 @@ export default {
     };
     watch(() => props.opened, value => {
       if (!f7Popover.value) return;
+      if (value === f7Popover.value.opened) {
+        return;
+      }
       if (value) {
         f7Popover.value.open();
       } else {
@@ -117,7 +112,6 @@ export default {
         closeByBackdropClick,
         closeByOutsideClick,
         closeOnEscape,
-        arrow,
         backdrop,
         backdropEl,
         containerEl,
@@ -127,7 +121,6 @@ export default {
       if (typeof closeByBackdropClick !== 'undefined') popoverParams.closeByBackdropClick = closeByBackdropClick;
       if (typeof closeByOutsideClick !== 'undefined') popoverParams.closeByOutsideClick = closeByOutsideClick;
       if (typeof closeOnEscape !== 'undefined') popoverParams.closeOnEscape = closeOnEscape;
-      if (typeof arrow !== 'undefined') popoverParams.arrow = arrow;
       if (typeof backdrop !== 'undefined') popoverParams.backdrop = backdrop;
       if (typeof backdropEl !== 'undefined') popoverParams.backdropEl = backdropEl;
       if (typeof containerEl !== 'undefined') popoverParams.containerEl = containerEl;

package/components/searchbar-new.d.ts

@@ -0,0 +1,20 @@
+
+import { ComponentOptionsMixin, DefineComponent, PropType } from 'vue';
+
+
+declare const SearchbarNew: DefineComponent<
+  {
+    
+  },
+  () => JSX.Element,
+  unknown,
+  {},
+  {},
+  ComponentOptionsMixin,
+  ComponentOptionsMixin,
+  ("change" | "input" | "focus" | "blur" | "submit" | "click:clear" | "click:disable" | "searchbar-new:search" | "searchbar-new:clear" | "searchbar-new:enable" | "searchbar-new:disable" | "update:value")[],
+  "change" | "input" | "focus" | "blur" | "submit" | "click:clear" | "click:disable" | "searchbar-new:search" | "searchbar-new:clear" | "searchbar-new:enable" | "searchbar-new:disable" | "update:value"
+>;
+
+export default SearchbarNew;
+  

package/components/searchbar-new.js

@@ -0,0 +1,291 @@
+import { renderSlot as _renderSlot, createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, toDisplayString as _toDisplayString, resolveDynamicComponent as _resolveDynamicComponent, normalizeClass as _normalizeClass, withCtx as _withCtx, createBlock as _createBlock } from "vue";
+const _hoisted_1 = {
+  class: "searchbar-new-inner"
+};
+const _hoisted_2 = {
+  class: "searchbar-new-input-wrap"
+};
+const _hoisted_3 = ["value", "placeholder", "spellcheck"];
+const _hoisted_4 = /*#__PURE__*/_createElementVNode("i", {
+  class: "searchbar-new-icon"
+}, null, -1);
+const _hoisted_5 = /*#__PURE__*/_createElementVNode("i", {
+  class: "icon icon-close"
+}, null, -1);
+const _hoisted_6 = {
+  key: 0
+};
+function render(_ctx, _cache) {
+  return _openBlock(), _createBlock(_resolveDynamicComponent(_ctx.tag), {
+    ref: "elRef",
+    class: _normalizeClass(_ctx.classes),
+    onSubmit: _ctx.onSubmit
+  }, {
+    default: _withCtx(() => [_renderSlot(_ctx.$slots, "before-inner"), _createElementVNode("div", _hoisted_1, [_renderSlot(_ctx.$slots, "inner-start"), _createElementVNode("div", _hoisted_2, [_renderSlot(_ctx.$slots, "input-wrap-start"), _createElementVNode("input", {
+      value: _ctx.value,
+      placeholder: _ctx.placeholder,
+      spellcheck: _ctx.spellcheck,
+      type: "search",
+      onInput: _cache[0] || (_cache[0] = function () {
+        return _ctx.onInput && _ctx.onInput(...arguments);
+      }),
+      onChange: _cache[1] || (_cache[1] = function () {
+        return _ctx.onChange && _ctx.onChange(...arguments);
+      }),
+      onFocus: _cache[2] || (_cache[2] = function () {
+        return _ctx.onFocus && _ctx.onFocus(...arguments);
+      }),
+      onBlur: _cache[3] || (_cache[3] = function () {
+        return _ctx.onBlur && _ctx.onBlur(...arguments);
+      })
+    }, null, 40, _hoisted_3), _hoisted_4, _ctx.clearButton ? (_openBlock(), _createElementBlock("span", {
+      key: 0,
+      class: "input-clear-button",
+      onClick: _cache[4] || (_cache[4] = function () {
+        return _ctx.onClearButtonClick && _ctx.onClearButtonClick(...arguments);
+      })
+    })) : _createCommentVNode("", true), _renderSlot(_ctx.$slots, "input-wrap-end")]), _ctx.disableButton ? (_openBlock(), _createElementBlock("span", {
+      key: 0,
+      class: "searchbar-new-disable-button",
+      onClick: _cache[5] || (_cache[5] = function () {
+        return _ctx.onDisableButtonClick && _ctx.onDisableButtonClick(...arguments);
+      })
+    }, [_hoisted_5, _ctx.disableButtonText ? (_openBlock(), _createElementBlock("span", _hoisted_6, _toDisplayString(_ctx.disableButtonText), 1)) : _createCommentVNode("", true)])) : _createCommentVNode("", true), _renderSlot(_ctx.$slots, "inner-end"), _renderSlot(_ctx.$slots, "default")]), _renderSlot(_ctx.$slots, "after-inner")]),
+    _: 3
+  }, 40, ["class", "onSubmit"]);
+}
+import { computed, ref, onMounted, onBeforeUnmount } from 'vue';
+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-searchbar-new',
+  render,
+  props: {
+    outline: {
+      type: Boolean,
+      default: true
+    },
+    form: {
+      type: Boolean,
+      default: true
+    },
+    placeholder: {
+      type: String,
+      default: 'Search'
+    },
+    spellcheck: {
+      type: Boolean,
+      default: undefined
+    },
+    disableButton: {
+      type: Boolean,
+      default: true
+    },
+    disableButtonText: {
+      type: String,
+      default: 'Cancel'
+    },
+    clearButton: {
+      type: Boolean,
+      default: true
+    },
+    // Input Value
+    value: [String, Number, Array],
+    // SB Params
+    inputEvents: {
+      type: String,
+      default: 'change input compositionend'
+    },
+    expandable: Boolean,
+    inline: Boolean,
+    searchContainer: [String, Object],
+    searchIn: {
+      type: String,
+      default: '.item-title'
+    },
+    searchItem: {
+      type: String,
+      default: 'li'
+    },
+    searchGroup: {
+      type: String,
+      default: '.list-group'
+    },
+    searchGroupTitle: {
+      type: String,
+      default: '.list-group-title'
+    },
+    foundEl: {
+      type: [String, Object],
+      default: '.searchbar-new-found'
+    },
+    notFoundEl: {
+      type: [String, Object],
+      default: '.searchbar-new-not-found'
+    },
+    backdrop: {
+      type: Boolean,
+      default: undefined
+    },
+    backdropEl: [String, Object],
+    hideOnEnableEl: {
+      type: [String, Object],
+      default: '.searchbar-new-hide-on-enable'
+    },
+    hideOnSearchEl: {
+      type: [String, Object],
+      default: '.searchbar-new-hide-on-search'
+    },
+    ignore: {
+      type: String,
+      default: '.searchbar-new-ignore'
+    },
+    customSearch: {
+      type: Boolean,
+      default: false
+    },
+    removeDiacritics: {
+      type: Boolean,
+      default: false
+    },
+    hideGroupTitles: {
+      type: Boolean,
+      default: true
+    },
+    hideGroups: {
+      type: Boolean,
+      default: true
+    },
+    init: {
+      type: Boolean,
+      default: true
+    },
+    ...colorProps
+  },
+  emits: ['change', 'input', 'focus', 'blur', 'submit', 'click:clear', 'click:disable', 'searchbar-new:search', 'searchbar-new:clear', 'searchbar-new:enable', 'searchbar-new:disable', 'update:value'],
+  setup(props, _ref) {
+    let {
+      emit
+    } = _ref;
+    let f7Searchbar = null;
+    const elRef = ref(null);
+    const search = query => {
+      if (!f7Searchbar) return undefined;
+      return f7Searchbar.search(query);
+    };
+    const enable = () => {
+      if (!f7Searchbar) return undefined;
+      return f7Searchbar.enable();
+    };
+    const disable = () => {
+      if (!f7Searchbar) return undefined;
+      return f7Searchbar.disable();
+    };
+    const toggle = () => {
+      if (!f7Searchbar) return undefined;
+      return f7Searchbar.toggle();
+    };
+    const clear = () => {
+      if (!f7Searchbar) return undefined;
+      return f7Searchbar.clear();
+    };
+    const onChange = event => {
+      emit('change', event);
+    };
+    const onInput = event => {
+      emit('input', event);
+      emit('update:value', event.target.value);
+    };
+    const onFocus = event => {
+      emit('focus', event);
+    };
+    const onBlur = event => {
+      emit('blur', event);
+    };
+    const onSubmit = event => {
+      emit('submit', event);
+    };
+    const onClearButtonClick = event => {
+      emit('click:clear', event);
+    };
+    const onDisableButtonClick = event => {
+      emit('click:disable', event);
+    };
+    onMounted(() => {
+      if (!props.init) return;
+      f7ready(() => {
+        const params = noUndefinedProps({
+          el: elRef.value,
+          inputEvents: props.inputEvents,
+          searchContainer: props.searchContainer,
+          searchIn: props.searchIn,
+          searchItem: props.searchItem,
+          searchGroup: props.searchGroup,
+          searchGroupTitle: props.searchGroupTitle,
+          hideOnEnableEl: props.hideOnEnableEl,
+          hideOnSearchEl: props.hideOnSearchEl,
+          foundEl: props.foundEl,
+          notFoundEl: props.notFoundEl,
+          backdrop: props.backdrop,
+          backdropEl: props.backdropEl,
+          disableButton: props.disableButton,
+          ignore: props.ignore,
+          customSearch: props.customSearch,
+          removeDiacritics: props.removeDiacritics,
+          hideGroupTitles: props.hideGroupTitles,
+          hideGroups: props.hideGroups,
+          expandable: props.expandable,
+          inline: props.inline,
+          on: {
+            search(searchbar, query, previousQuery) {
+              emit('searchbar-new:search', searchbar, query, previousQuery);
+            },
+            clear(searchbar, previousQuery) {
+              emit('searchbar-new:clear', searchbar, previousQuery);
+            },
+            enable(searchbar) {
+              emit('searchbar-new:enable', searchbar);
+            },
+            disable(searchbar) {
+              emit('searchbar-new:disable', searchbar);
+            }
+          }
+        });
+        Object.keys(params).forEach(key => {
+          if (params[key] === '') {
+            delete params[key];
+          }
+        });
+        f7Searchbar = f7.searchbarNew.create(params);
+      });
+    });
+    onBeforeUnmount(() => {
+      if (f7Searchbar && f7Searchbar.destroy) f7Searchbar.destroy();
+      f7Searchbar = null;
+    });
+    const classes = computed(() => classNames('searchbar-new', {
+      'searchbar-new-inline': props.inline,
+      'no-outline': !props.outline,
+      'searchbar-new-expandable': props.expandable
+    }, colorClasses(props)));
+    const tag = computed(() => props.form ? 'form' : 'div');
+    return {
+      elRef,
+      tag,
+      classes,
+      search,
+      enable,
+      disable,
+      toggle,
+      clear,
+      onChange,
+      onInput,
+      onFocus,
+      onBlur,
+      onSubmit,
+      onClearButtonClick,
+      onDisableButtonClick
+    };
+  }
+};

package/components/toolbar-new.d.ts

@@ -0,0 +1,20 @@
+
+import { ComponentOptionsMixin, DefineComponent, PropType } from 'vue';
+
+
+declare const ToolbarNew: DefineComponent<
+  {
+    
+  },
+  () => JSX.Element,
+  unknown,
+  {},
+  {},
+  ComponentOptionsMixin,
+  ComponentOptionsMixin,
+  ("toolbar-new:hide" | "toolbar-new:show")[],
+  "toolbar-new:hide" | "toolbar-new:show"
+>;
+
+export default ToolbarNew;
+  

package/components/toolbar-new.js

@@ -0,0 +1,135 @@
+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-new-inner"
+};
+function render(_ctx, _cache) {
+  return _openBlock(), _createElementBlock("div", {
+    ref: "elRef",
+    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.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-new',
+  render,
+  props: {
+    tabbar: Boolean,
+    icons: Boolean,
+    scrollable: Boolean,
+    hidden: Boolean,
+    outline: {
+      type: Boolean,
+      default: true
+    },
+    position: {
+      type: String,
+      default: undefined
+    },
+    topMd: {
+      type: Boolean,
+      default: undefined
+    },
+    topIos: {
+      type: Boolean,
+      default: undefined
+    },
+    top: {
+      type: Boolean,
+      default: undefined
+    },
+    bottomMd: {
+      type: Boolean,
+      default: undefined
+    },
+    bottomIos: {
+      type: Boolean,
+      default: undefined
+    },
+    bottom: {
+      type: Boolean,
+      default: undefined
+    },
+    inner: {
+      type: Boolean,
+      default: true
+    },
+    ...colorProps
+  },
+  emits: ['toolbar-new:hide', 'toolbar-new:show'],
+  setup(props, _ref) {
+    let {
+      emit
+    } = _ref;
+    const elRef = ref(null);
+    const theme = useTheme();
+    const onHide = toolbarEl => {
+      if (elRef.value !== toolbarEl) return;
+      emit('toolbar-new:hide');
+    };
+    const onShow = toolbarEl => {
+      if (elRef.value !== toolbarEl) return;
+      emit('toolbar-new:show');
+    };
+    const hide = animate => {
+      if (!f7) return;
+      f7.toolbarNew.hide(elRef.value, animate);
+    };
+    const show = animate => {
+      if (!f7) return;
+      f7.toolbarNew.show(elRef.value, animate);
+    };
+    onMounted(() => {
+      if (props.tabbar && f7 && elRef.value) {
+        f7.toolbarNew.setHighlight(elRef.value);
+      }
+      f7.on('toolbarNewShow', onShow);
+      f7.on('toolbarNewHide', onHide);
+    });
+    onBeforeUnmount(() => {
+      f7.off('toolbarNewShow', onShow);
+      f7.off('toolbarNewHide', onHide);
+    });
+    const TabbarNewContext = computed(() => ({
+      tabbarHasIcons: props.icons
+    }));
+    provide('TabbarNewContext', TabbarNewContext);
+    const classes = computed(() => {
+      const {
+        tabbar,
+        bottomMd,
+        bottomIos,
+        bottom,
+        position,
+        topMd,
+        topIos,
+        top,
+        icons,
+        scrollable,
+        hidden,
+        outline
+      } = props;
+      return classNames('toolbar-new', {
+        'tabbar-new': tabbar,
+        'toolbar-new-bottom': theme.value && theme.value.md && bottomMd || theme.value && theme.value.ios && bottomIos || bottom || position === 'bottom',
+        'toolbar-new-top': theme.value && theme.value.md && topMd || theme.value && theme.value.ios && topIos || top || position === 'top',
+        'tabbar-new-icons': icons,
+        'tabbar-new-scrollable': scrollable,
+        'toolbar-new-hidden': hidden,
+        'no-outline': !outline
+      }, colorClasses(props));
+    });
+    return {
+      classes,
+      elRef,
+      hide,
+      show
+    };
+  }
+};

package/components/toolbar-pane-new.d.ts

@@ -0,0 +1,19 @@
+
+import { ComponentOptionsMixin, DefineComponent, PropType } from 'vue';
+
+
+declare const ToolbarPaneNew: DefineComponent<
+  {
+    
+  },
+  () => JSX.Element,
+  unknown,
+  {},
+  {},
+  ComponentOptionsMixin,
+  ComponentOptionsMixin,
+  
+>;
+
+export default ToolbarPaneNew;
+  

package/components/toolbar-pane-new.js

@@ -0,0 +1,22 @@
+import { renderSlot as _renderSlot, normalizeClass as _normalizeClass, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
+function render(_ctx, _cache) {
+  return _openBlock(), _createElementBlock("div", {
+    ref: "elRef",
+    class: _normalizeClass(_ctx.classes)
+  }, [_renderSlot(_ctx.$slots, "default")], 2);
+}
+import { computed } from 'vue';
+import { classNames } from '../shared/utils.js';
+export default {
+  name: 'f7-toolbar-pane-new',
+  render,
+  props: {},
+  setup() {
+    const classes = computed(() => {
+      return classNames('toolbar-new-pane');
+    });
+    return {
+      classes
+    };
+  }
+};

package/framework7-vue-bundle.js

@@ -57,6 +57,7 @@ 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 f7NavbarNew from './components/navbar-new.js';
 import f7Navbar from './components/navbar.js';
 import f7PageContent from './components/page-content.js';
 import f7Page from './components/page.js';
@@ -70,6 +71,7 @@ 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 f7SearchbarNew from './components/searchbar-new.js';
 import f7Searchbar from './components/searchbar.js';
 import f7Segmented from './components/segmented.js';
 import f7Sheet from './components/sheet.js';
@@ -85,6 +87,8 @@ 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 f7ToolbarNew from './components/toolbar-new.js';
+import f7ToolbarPaneNew from './components/toolbar-pane-new.js';
 import f7Toolbar from './components/toolbar.js';
 import f7TreeviewItem from './components/treeview-item.js';
 import f7Treeview from './components/treeview.js';
@@ -92,7 +96,7 @@ 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, f7AreaChart, f7Badge, f7BlockFooter, f7BlockHeader, f7BlockTitle, f7Block, f7BreadcrumbsCollapsed, f7BreadcrumbsItem, f7BreadcrumbsSeparator, f7Breadcrumbs, f7Button, f7CardContent, f7CardFooter, f7CardHeader, f7Card, f7Checkbox, f7Chip, f7FabBackdrop, f7FabButton, f7FabButtons, f7Fab, f7Gauge, f7Icon, f7Input, f7Link, f7ListButton, f7ListGroup, f7ListIndex, f7ListInput, f7ListItem, f7List, f7LoginScreenTitle, f7LoginScreen, 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, f7Searchbar, f7Segmented, f7Sheet, f7SkeletonAvatar, f7SkeletonBlock, f7SkeletonImage, f7SkeletonText, f7Stepper, f7Subnavbar, f7SwipeoutActions, f7SwipeoutButton, f7Tab, f7Tabs, f7TextEditor, f7Toggle, f7Toolbar, f7TreeviewItem, f7Treeview, f7UseIcon, f7View, f7Views }
+export { f7AccordionContent, f7AccordionItem, f7AccordionToggle, f7Accordion, f7ActionsButton, f7ActionsGroup, f7ActionsLabel, f7Actions, f7App, f7AreaChart, f7Badge, f7BlockFooter, f7BlockHeader, f7BlockTitle, f7Block, f7BreadcrumbsCollapsed, f7BreadcrumbsItem, f7BreadcrumbsSeparator, f7Breadcrumbs, f7Button, f7CardContent, f7CardFooter, f7CardHeader, f7Card, f7Checkbox, f7Chip, f7FabBackdrop, f7FabButton, f7FabButtons, f7Fab, f7Gauge, f7Icon, f7Input, f7Link, f7ListButton, f7ListGroup, f7ListIndex, f7ListInput, f7ListItem, f7List, f7LoginScreenTitle, f7LoginScreen, f7Message, f7MessagebarAttachment, f7MessagebarAttachments, f7MessagebarSheetImage, f7MessagebarSheetItem, f7MessagebarSheet, f7Messagebar, f7MessagesTitle, f7Messages, f7NavLeft, f7NavRight, f7NavTitleLarge, f7NavTitle, f7NavbarNew, f7Navbar, f7PageContent, f7Page, f7Panel, f7PhotoBrowser, f7PieChart, f7Popover, f7Popup, f7Preloader, f7Progressbar, f7Radio, f7Range, f7RoutableModals, f7SearchbarNew, f7Searchbar, f7Segmented, f7Sheet, f7SkeletonAvatar, f7SkeletonBlock, f7SkeletonImage, f7SkeletonText, f7Stepper, f7Subnavbar, f7SwipeoutActions, f7SwipeoutButton, f7Tab, f7Tabs, f7TextEditor, f7Toggle, f7ToolbarNew, f7ToolbarPaneNew, f7Toolbar, f7TreeviewItem, f7Treeview, f7UseIcon, f7View, f7Views }
 export { f7, f7ready, theme, useStore, setTheme };
 export default Framework7Vue;
 
@@ -152,6 +156,7 @@ function registerComponents(app) {
   app.component('f7-nav-right', f7NavRight);
   app.component('f7-nav-title-large', f7NavTitleLarge);
   app.component('f7-nav-title', f7NavTitle);
+  app.component('f7-navbar-new', f7NavbarNew);
   app.component('f7-navbar', f7Navbar);
   app.component('f7-page-content', f7PageContent);
   app.component('f7-page', f7Page);
@@ -165,6 +170,7 @@ function registerComponents(app) {
   app.component('f7-radio', f7Radio);
   app.component('f7-range', f7Range);
   app.component('f7-routable-modals', f7RoutableModals);
+  app.component('f7-searchbar-new', f7SearchbarNew);
   app.component('f7-searchbar', f7Searchbar);
   app.component('f7-segmented', f7Segmented);
   app.component('f7-sheet', f7Sheet);
@@ -180,6 +186,8 @@ function registerComponents(app) {
   app.component('f7-tabs', f7Tabs);
   app.component('f7-text-editor', f7TextEditor);
   app.component('f7-toggle', f7Toggle);
+  app.component('f7-toolbar-new', f7ToolbarNew);
+  app.component('f7-toolbar-pane-new', f7ToolbarPaneNew);
   app.component('f7-toolbar', f7Toolbar);
   app.component('f7-treeview-item', f7TreeviewItem);
   app.component('f7-treeview', f7Treeview);

package/framework7-vue.d.ts

@@ -56,6 +56,7 @@ 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 f7NavbarNew from './components/navbar-new.js';
 import f7Navbar from './components/navbar.js';
 import f7PageContent from './components/page-content.js';
 import f7Page from './components/page.js';
@@ -69,6 +70,7 @@ 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 f7SearchbarNew from './components/searchbar-new.js';
 import f7Searchbar from './components/searchbar.js';
 import f7Segmented from './components/segmented.js';
 import f7Sheet from './components/sheet.js';
@@ -84,6 +86,8 @@ 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 f7ToolbarNew from './components/toolbar-new.js';
+import f7ToolbarPaneNew from './components/toolbar-pane-new.js';
 import f7Toolbar from './components/toolbar.js';
 import f7TreeviewItem from './components/treeview-item.js';
 import f7Treeview from './components/treeview.js';
@@ -116,6 +120,6 @@ declare const useStore: useStore;
 
 declare const setTheme: (theme: string) => void;
 
-export { f7AccordionContent, f7AccordionItem, f7AccordionToggle, f7Accordion, f7ActionsButton, f7ActionsGroup, f7ActionsLabel, f7Actions, f7App, f7AreaChart, f7Badge, f7BlockFooter, f7BlockHeader, f7BlockTitle, f7Block, f7BreadcrumbsCollapsed, f7BreadcrumbsItem, f7BreadcrumbsSeparator, f7Breadcrumbs, f7Button, f7CardContent, f7CardFooter, f7CardHeader, f7Card, f7Checkbox, f7Chip, f7FabBackdrop, f7FabButton, f7FabButtons, f7Fab, f7Gauge, f7Icon, f7Input, f7Link, f7ListButton, f7ListGroup, f7ListIndex, f7ListInput, f7ListItem, f7List, f7LoginScreenTitle, f7LoginScreen, 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, f7Searchbar, f7Segmented, f7Sheet, f7SkeletonAvatar, f7SkeletonBlock, f7SkeletonImage, f7SkeletonText, f7Stepper, f7Subnavbar, f7SwipeoutActions, f7SwipeoutButton, f7Tab, f7Tabs, f7TextEditor, f7Toggle, f7Toolbar, f7TreeviewItem, f7Treeview, f7UseIcon, f7View, f7Views }
+export { f7AccordionContent, f7AccordionItem, f7AccordionToggle, f7Accordion, f7ActionsButton, f7ActionsGroup, f7ActionsLabel, f7Actions, f7App, f7AreaChart, f7Badge, f7BlockFooter, f7BlockHeader, f7BlockTitle, f7Block, f7BreadcrumbsCollapsed, f7BreadcrumbsItem, f7BreadcrumbsSeparator, f7Breadcrumbs, f7Button, f7CardContent, f7CardFooter, f7CardHeader, f7Card, f7Checkbox, f7Chip, f7FabBackdrop, f7FabButton, f7FabButtons, f7Fab, f7Gauge, f7Icon, f7Input, f7Link, f7ListButton, f7ListGroup, f7ListIndex, f7ListInput, f7ListItem, f7List, f7LoginScreenTitle, f7LoginScreen, f7Message, f7MessagebarAttachment, f7MessagebarAttachments, f7MessagebarSheetImage, f7MessagebarSheetItem, f7MessagebarSheet, f7Messagebar, f7MessagesTitle, f7Messages, f7NavLeft, f7NavRight, f7NavTitleLarge, f7NavTitle, f7NavbarNew, f7Navbar, f7PageContent, f7Page, f7Panel, f7PhotoBrowser, f7PieChart, f7Popover, f7Popup, f7Preloader, f7Progressbar, f7Radio, f7Range, f7RoutableModals, f7SearchbarNew, f7Searchbar, f7Segmented, f7Sheet, f7SkeletonAvatar, f7SkeletonBlock, f7SkeletonImage, f7SkeletonText, f7Stepper, f7Subnavbar, f7SwipeoutActions, f7SwipeoutButton, f7Tab, f7Tabs, f7TextEditor, f7Toggle, f7ToolbarNew, f7ToolbarPaneNew, f7Toolbar, f7TreeviewItem, f7Treeview, f7UseIcon, f7View, f7Views }
 export { f7, f7ready, theme, useStore, setTheme };
 export default Framework7Vue;

package/framework7-vue.js

@@ -1,13 +1,13 @@
 /**
- * Framework7 Vue 0.0.3
+ * Framework7 Vue 0.0.6
  * Build full featured iOS & Android apps using Framework7 & Vue
  * https://framework7.io/vue/
  *
- * Copyright 2014-2025 Vladimir Kharlampidi
+ * Copyright 2014-2026 Vladimir Kharlampidi
  *
  * Released under the MIT License
  *
- * Released on: December 14, 2025
+ * Released on: January 1, 2026
  */
 import Framework7Vue from './shared/plugin.js';
 import { f7, f7ready, theme, setTheme } from './shared/f7.js';
@@ -68,6 +68,7 @@ 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 f7NavbarNew from './components/navbar-new.js';
 import f7Navbar from './components/navbar.js';
 import f7PageContent from './components/page-content.js';
 import f7Page from './components/page.js';
@@ -81,6 +82,7 @@ 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 f7SearchbarNew from './components/searchbar-new.js';
 import f7Searchbar from './components/searchbar.js';
 import f7Segmented from './components/segmented.js';
 import f7Sheet from './components/sheet.js';
@@ -96,6 +98,8 @@ 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 f7ToolbarNew from './components/toolbar-new.js';
+import f7ToolbarPaneNew from './components/toolbar-pane-new.js';
 import f7Toolbar from './components/toolbar.js';
 import f7TreeviewItem from './components/treeview-item.js';
 import f7Treeview from './components/treeview.js';
@@ -103,6 +107,6 @@ 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, f7AreaChart, f7Badge, f7BlockFooter, f7BlockHeader, f7BlockTitle, f7Block, f7BreadcrumbsCollapsed, f7BreadcrumbsItem, f7BreadcrumbsSeparator, f7Breadcrumbs, f7Button, f7CardContent, f7CardFooter, f7CardHeader, f7Card, f7Checkbox, f7Chip, f7FabBackdrop, f7FabButton, f7FabButtons, f7Fab, f7Gauge, f7Icon, f7Input, f7Link, f7ListButton, f7ListGroup, f7ListIndex, f7ListInput, f7ListItem, f7List, f7LoginScreenTitle, f7LoginScreen, 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, f7Searchbar, f7Segmented, f7Sheet, f7SkeletonAvatar, f7SkeletonBlock, f7SkeletonImage, f7SkeletonText, f7Stepper, f7Subnavbar, f7SwipeoutActions, f7SwipeoutButton, f7Tab, f7Tabs, f7TextEditor, f7Toggle, f7Toolbar, f7TreeviewItem, f7Treeview, f7UseIcon, f7View, f7Views }
+export { f7AccordionContent, f7AccordionItem, f7AccordionToggle, f7Accordion, f7ActionsButton, f7ActionsGroup, f7ActionsLabel, f7Actions, f7App, f7AreaChart, f7Badge, f7BlockFooter, f7BlockHeader, f7BlockTitle, f7Block, f7BreadcrumbsCollapsed, f7BreadcrumbsItem, f7BreadcrumbsSeparator, f7Breadcrumbs, f7Button, f7CardContent, f7CardFooter, f7CardHeader, f7Card, f7Checkbox, f7Chip, f7FabBackdrop, f7FabButton, f7FabButtons, f7Fab, f7Gauge, f7Icon, f7Input, f7Link, f7ListButton, f7ListGroup, f7ListIndex, f7ListInput, f7ListItem, f7List, f7LoginScreenTitle, f7LoginScreen, f7Message, f7MessagebarAttachment, f7MessagebarAttachments, f7MessagebarSheetImage, f7MessagebarSheetItem, f7MessagebarSheet, f7Messagebar, f7MessagesTitle, f7Messages, f7NavLeft, f7NavRight, f7NavTitleLarge, f7NavTitle, f7NavbarNew, f7Navbar, f7PageContent, f7Page, f7Panel, f7PhotoBrowser, f7PieChart, f7Popover, f7Popup, f7Preloader, f7Progressbar, f7Radio, f7Range, f7RoutableModals, f7SearchbarNew, f7Searchbar, f7Segmented, f7Sheet, f7SkeletonAvatar, f7SkeletonBlock, f7SkeletonImage, f7SkeletonText, f7Stepper, f7Subnavbar, f7SwipeoutActions, f7SwipeoutButton, f7Tab, f7Tabs, f7TextEditor, f7Toggle, f7ToolbarNew, f7ToolbarPaneNew, f7Toolbar, f7TreeviewItem, f7Treeview, f7UseIcon, f7View, f7Views }
 export { f7, f7ready, theme, useStore, setTheme };
 export default Framework7Vue;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xenknight/framework7-vue",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "description": "Build full featured iOS & Android apps using Framework7 & Vue",
   "type": "module",
   "exports": {