framework7-vue 6.3.4 → 7.0.0-beta.3

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

@@ -1,5 +1,3 @@
-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 { computed, ref, onMounted, onBeforeUnmount, onUpdated, toRaw, h } from 'vue';
 import { classNames, noUndefinedProps, getRouterId } from '../shared/utils';
 import { colorClasses, colorProps } from '../shared/mixins';
@@ -8,7 +6,7 @@ import { useTab } from '../shared/use-tab';
 import { getRouterInitialComponent } from '../shared/get-router-initial-component';
 export default {
   name: 'f7-view',
-  props: _extends({
+  props: {
     tab: Boolean,
     tabActive: Boolean,
     name: String,
@@ -178,23 +176,26 @@ export default {
     init: {
       type: Boolean,
       default: true
-    }
-  }, colorProps),
+    },
+    ...colorProps
+  },
   emits: ['view:init', 'view:resize', 'swipeback:move', 'swipeback:beforechange', 'swipeback:afterchange', 'swipeback:beforereset', 'swipeback:afterreset', 'tab:hide', 'tab:show'],
-  setup: function setup(props, _ref) {
-    var emit = _ref.emit,
-        slots = _ref.slots;
+
+  setup(props, {
+    emit,
+    slots
+  }) {
     // 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);
-    var initialPageComponent = null;
-    var f7View = null;
-    var elRef = ref(null);
-    var routerData = null;
-    var initialPage;
-    var initialRoute;
+    const initialPageComponent = null;
+    let f7View = null;
+    const elRef = ref(null);
+    let routerData = null;
+    let initialPage;
+    let initialRoute;
 
-    var onViewInit = function onViewInit(view) {
+    const onViewInit = view => {
       emit('view:init', view);
 
       if (!props.init) {
@@ -203,32 +204,32 @@ export default {
       }
     };
 
-    var getViewParams = function getViewParams() {
-      var routes = toRaw(props.routes || []);
-      var routesAdd = toRaw(props.routesAdd || []);
-      return noUndefinedProps(_extends({}, props, {
-        routes: routes,
-        routesAdd: routesAdd
-      }));
+    const getViewParams = () => {
+      const routes = toRaw(props.routes || []);
+      const routesAdd = toRaw(props.routesAdd || []);
+      return noUndefinedProps({ ...props,
+        routes,
+        routesAdd
+      });
     };
 
     if (f7 && !f7View && props.init) {
-      var routerId = getRouterId();
-      f7View = f7.views.create(elRef.value, _extends({}, getViewParams(), {
-        routerId: routerId,
+      const routerId = getRouterId();
+      f7View = f7.views.create(elRef.value, { ...getViewParams(),
+        routerId,
         init: false,
         on: {
           init: onViewInit
         }
-      }));
+      });
       routerData = {
-        routerId: routerId,
+        routerId,
         instance: f7View
       };
       f7routers.views.push(routerData);
 
       if (f7View && f7View.router && (props.url || props.main)) {
-        var initialData = getRouterInitialComponent(f7View.router, initialPageComponent);
+        const initialData = getRouterInitialComponent(f7View.router, initialPageComponent);
         initialPage = initialData.initialPage;
         initialRoute = initialData.initialRoute;
 
@@ -239,58 +240,58 @@ export default {
       }
     }
 
-    var pages = ref(initialPage ? [initialPage] : []);
+    const pages = ref(initialPage ? [initialPage] : []);
 
-    var _setPages = function setPages(newPages) {
-      newPages.forEach(function (page) {
+    const setPages = newPages => {
+      newPages.forEach(page => {
         // eslint-disable-next-line
         page.component = toRaw(page.component);
       });
       pages.value = newPages;
     };
 
-    var onResize = function onResize(view, width) {
+    const onResize = (view, width) => {
       emit('view:resize', width);
     };
 
-    var onSwipeBackMove = function onSwipeBackMove(data) {
-      var swipeBackData = data;
+    const onSwipeBackMove = data => {
+      const swipeBackData = data;
       emit('swipeback:move', swipeBackData);
     };
 
-    var onSwipeBackBeforeChange = function onSwipeBackBeforeChange(data) {
-      var swipeBackData = data;
+    const onSwipeBackBeforeChange = data => {
+      const swipeBackData = data;
       emit('swipeback:beforechange', swipeBackData);
     };
 
-    var onSwipeBackAfterChange = function onSwipeBackAfterChange(data) {
-      var swipeBackData = data;
+    const onSwipeBackAfterChange = data => {
+      const swipeBackData = data;
       emit('swipeback:afterchange', swipeBackData);
     };
 
-    var onSwipeBackBeforeReset = function onSwipeBackBeforeReset(data) {
-      var swipeBackData = data;
+    const onSwipeBackBeforeReset = data => {
+      const swipeBackData = data;
       emit('swipeback:beforereset', swipeBackData);
     };
 
-    var onSwipeBackAfterReset = function onSwipeBackAfterReset(data) {
-      var swipeBackData = data;
+    const onSwipeBackAfterReset = data => {
+      const swipeBackData = data;
       emit('swipeback:afterreset', swipeBackData);
     };
 
-    onMounted(function () {
-      f7ready(function () {
+    onMounted(() => {
+      f7ready(() => {
         if (f7View) {
           routerData.el = elRef.value;
           routerData.pages = pages.value;
 
-          routerData.setPages = function (newPages) {
-            _setPages([].concat(newPages));
+          routerData.setPages = newPages => {
+            setPages([...newPages]);
           };
 
           if (initialPage && initialPage.isAsync && !initialPage.initialComponent) {
-            initialPage.component().then(function () {
-              setTimeout(function () {
+            initialPage.component().then(() => {
+              setTimeout(() => {
                 f7View.init(elRef.value);
 
                 if (initialPage) {
@@ -318,25 +319,26 @@ export default {
             }
           }
         } else {
-          var _routerId = getRouterId();
-
+          const routerId = getRouterId();
           routerData = {
             el: elRef.value,
-            routerId: _routerId,
+            routerId,
             pages: pages.value,
             instance: f7View,
-            setPages: function setPages(newPages) {
-              _setPages([].concat(newPages));
+
+            setPages(newPages) {
+              setPages([...newPages]);
             }
+
           };
           f7routers.views.push(routerData);
-          routerData.instance = f7.views.create(elRef.value, _extends({
-            routerId: _routerId
-          }, getViewParams(), {
+          routerData.instance = f7.views.create(elRef.value, {
+            routerId,
+            ...getViewParams(),
             on: {
               init: onViewInit
             }
-          }));
+          });
           f7View = routerData.instance;
         }
 
@@ -349,7 +351,7 @@ export default {
         f7View.on('swipebackAfterReset', onSwipeBackAfterReset);
       });
     });
-    onBeforeUnmount(function () {
+    onBeforeUnmount(() => {
       if (f7View) {
         f7View.off('resize', onResize);
         f7View.off('swipebackMove', onSwipeBackMove);
@@ -364,44 +366,42 @@ export default {
       f7routers.views.splice(f7routers.views.indexOf(routerData), 1);
       routerData = null;
     });
-    onUpdated(function () {
+    onUpdated(() => {
       if (!routerData || !f7) return;
       f7events.emit('viewRouterDidUpdate', routerData);
     });
     useTab(elRef, emit);
-    var classes = computed(function () {
-      return classNames('view', {
-        'view-main': props.main,
-        'tab-active': props.tabActive,
-        tab: props.tab
-      }, colorClasses(props));
-    });
+    const classes = computed(() => classNames('view', {
+      'view-main': props.main,
+      'tab-active': props.tabActive,
+      tab: props.tab
+    }, colorClasses(props)));
 
-    var getComponent = function getComponent(page) {
-      return toRaw(page.component);
-    };
+    const getComponent = page => toRaw(page.component);
 
-    var getProps = function getProps(page) {
-      var pageComponent = page.component,
-          pageProps = page.props;
-      var keys = [];
-      var passProps = {};
+    const getProps = page => {
+      const {
+        component: pageComponent,
+        props: pageProps
+      } = page;
+      let keys = [];
+      const passProps = {};
       if (pageComponent && pageComponent.props) keys = Object.keys(pageComponent.props);
-      keys.forEach(function (key) {
+      keys.forEach(key => {
         if (key in pageProps) passProps[key] = pageProps[key];
       });
       return passProps;
     };
 
-    return function () {
+    return () => {
       return h('div', {
         ref: elRef,
         class: classes.value
-      }, [slots.default && slots.default()].concat(pages.value.map(function (page) {
-        return h(getComponent(page), _extends({
-          key: page.id
-        }, getProps(page)));
-      })));
+      }, [slots.default && slots.default(), ...pages.value.map(page => h(getComponent(page), {
+        key: page.id,
+        ...getProps(page)
+      }))]);
     };
   }
+
 };

package/components/views.js

@@ -0,0 +1,29 @@
+import { renderSlot as _renderSlot, openBlock as _openBlock, createBlock as _createBlock } from "vue";
+
+function render(_ctx, _cache) {
+  return _openBlock(), _createBlock("div", {
+    class: _ctx.classes
+  }, [_renderSlot(_ctx.$slots, "default")], 2);
+}
+
+import { computed } from 'vue';
+import { classNames } from '../shared/utils';
+import { colorClasses, colorProps } from '../shared/mixins';
+export default {
+  name: 'f7-views',
+  render,
+  props: {
+    tabs: Boolean,
+    ...colorProps
+  },
+
+  setup(props) {
+    const classes = computed(() => classNames('views', {
+      tabs: props.tabs
+    }, colorClasses(props)));
+    return {
+      classes
+    };
+  }
+
+};

package/{esm/framework7-vue-bundle.js → framework7-vue-bundle.js}

@@ -1,5 +1,5 @@
 /**
- * Framework7 Vue 6.3.4
+ * Framework7 Vue 7.0.0-beta.3
  * Build full featured iOS & Android apps using Framework7 & Vue
  * https://framework7.io/vue/
  *
@@ -7,7 +7,7 @@
  *
  * Released under the MIT License
  *
- * Released on: September 16, 2021
+ * Released on: October 5, 2021
  */
 import Framework7Vue from './shared/plugin';
 import { f7, f7ready, theme } from './shared/f7';

package/{esm/framework7-vue.js → framework7-vue.js}

@@ -1,5 +1,5 @@
 /**
- * Framework7 Vue 6.3.4
+ * Framework7 Vue 7.0.0-beta.3
  * Build full featured iOS & Android apps using Framework7 & Vue
  * https://framework7.io/vue/
  *
@@ -7,7 +7,7 @@
  *
  * Released under the MIT License
  *
- * Released on: September 16, 2021
+ * Released on: October 5, 2021
  */
 import Framework7Vue from './shared/plugin';
 import { f7, f7ready, theme } from './shared/f7';

package/package.json

@@ -1,10 +1,13 @@
 {
   "name": "framework7-vue",
-  "version": "6.3.4",
+  "version": "7.0.0-beta.3",
   "description": "Build full featured iOS & Android apps using Framework7 & Vue",
-  "main": "cjs/framework7-vue.js",
-  "module": "esm/framework7-vue.js",
-  "jsnext:main": "esm/framework7-vue.js",
+  "type": "module",
+  "exports": {
+    ".": "./framework7-vue.js",
+    "./bundle": "./framework7-vue-bundle.js",
+    "./components/*": "./components/*"
+  },
   "typings": "framework7-vue.d.ts",
   "repository": {
     "type": "git",

package/{esm/shared → shared}/components-router.js

@@ -1,37 +1,43 @@
 /* eslint no-underscore-dangle: "off" */
 import { f7events, f7routers } from './f7';
 import { extend, getComponentId } from './utils';
+import { routerOpenIn } from './router-open-in';
 
-var getChildrenArray = function getChildrenArray(el) {
-  var arr = [];
+const getChildrenArray = el => {
+  const arr = [];
 
-  for (var i = 0; i < el.children.length; i += 1) {
+  for (let i = 0; i < el.children.length; i += 1) {
     arr.push(el.children[i]);
   }
 
   return arr;
 };
 
-var hasSameChildren = function hasSameChildren(childrenBefore, childrenAfter) {
+const hasSameChildren = (childrenBefore, childrenAfter) => {
   if (childrenBefore.length !== childrenAfter.length) return false;
-  var set = new Set([].concat(childrenBefore, childrenAfter));
+  const set = new Set([...childrenBefore, ...childrenAfter]);
   if (set.size === childrenBefore.length) return true;
   return false;
 };
 
 export default {
   proto: {
-    pageComponentLoader: function pageComponentLoader(_ref) {
-      var routerEl = _ref.routerEl,
-          component = _ref.component,
-          options = _ref.options,
-          resolve = _ref.resolve,
-          reject = _ref.reject;
-      var router = this;
-      var routerId = router.id;
-      var el = routerEl;
-      var viewRouter;
-      f7routers.views.forEach(function (data) {
+    openIn(router, navigateUrl, options) {
+      return routerOpenIn(router, navigateUrl, options);
+    },
+
+    pageComponentLoader({
+      routerEl,
+      component,
+      options,
+      resolve,
+      reject
+    }) {
+      const router = this;
+      const routerId = router.id;
+      const el = routerEl;
+      let viewRouter;
+      f7routers.views.forEach(data => {
         if (data.el && data.el === routerEl || data.routerId && data.routerId === routerId) {
           viewRouter = data;
         }
@@ -42,23 +48,23 @@ export default {
         return;
       }
 
-      var pageData = {
-        component: component,
+      const pageData = {
+        component,
         id: getComponentId(),
         props: extend({
           f7route: options.route,
           f7router: router
         }, options.route.params, options.props || {})
       };
-      var resolved;
-      var childrenBefore = getChildrenArray(el);
+      let resolved;
+      const childrenBefore = getChildrenArray(el);
 
       function onDidUpdate(componentRouterData) {
         if (componentRouterData !== viewRouter || resolved) return;
-        var childrenAfter = getChildrenArray(el);
+        const childrenAfter = getChildrenArray(el);
         if (hasSameChildren(childrenBefore, childrenAfter)) return;
         f7events.off('viewRouterDidUpdate', onDidUpdate);
-        var pageEl = el.children[el.children.length - 1];
+        const pageEl = el.children[el.children.length - 1];
         pageData.el = pageEl;
         resolve(pageEl);
         resolved = true;
@@ -68,10 +74,11 @@ export default {
       viewRouter.pages.push(pageData);
       viewRouter.setPages(viewRouter.pages);
     },
-    removePage: function removePage($pageEl) {
+
+    removePage($pageEl) {
       if (!$pageEl) return;
-      var router = this;
-      var f7Page;
+      const router = this;
+      let f7Page;
       if ('length' in $pageEl && $pageEl[0]) f7Page = $pageEl[0].f7Page;else f7Page = $pageEl.f7Page;
 
       if (f7Page && f7Page.route && f7Page.route.route && f7Page.route.route.keepAlive) {
@@ -79,13 +86,13 @@ export default {
         return;
       }
 
-      var viewRouter;
-      f7routers.views.forEach(function (data) {
+      let viewRouter;
+      f7routers.views.forEach(data => {
         if (data.el && data.el === router.el) {
           viewRouter = data;
         }
       });
-      var pageEl;
+      let pageEl;
 
       if ('length' in $pageEl) {
         // Dom7
@@ -96,8 +103,8 @@ export default {
       }
 
       if (!pageEl) return;
-      var pageComponentFound;
-      viewRouter.pages.forEach(function (page, index) {
+      let pageComponentFound;
+      viewRouter.pages.forEach((page, index) => {
         if (page.el === pageEl) {
           pageComponentFound = true;
           viewRouter.pages.splice(index, 1);
@@ -109,18 +116,18 @@ export default {
         pageEl.parentNode.removeChild(pageEl);
       }
     },
-    tabComponentLoader: function tabComponentLoader(_temp) {
-      var _ref2 = _temp === void 0 ? {} : _temp,
-          tabEl = _ref2.tabEl,
-          component = _ref2.component,
-          options = _ref2.options,
-          resolve = _ref2.resolve,
-          reject = _ref2.reject;
-
-      var router = this;
+
+    tabComponentLoader({
+      tabEl,
+      component,
+      options,
+      resolve,
+      reject
+    } = {}) {
+      const router = this;
       if (!tabEl) reject();
-      var tabRouter;
-      f7routers.tabs.forEach(function (tabData) {
+      let tabRouter;
+      f7routers.tabs.forEach(tabData => {
         if (tabData.el && tabData.el === tabEl) {
           tabRouter = tabData;
         }
@@ -131,21 +138,21 @@ export default {
         return;
       }
 
-      var id = getComponentId();
-      var tabContent = {
-        id: id,
-        component: component,
+      const id = getComponentId();
+      const tabContent = {
+        id,
+        component,
         props: extend({
           f7route: options.route,
           f7router: router
         }, options.route.route && options.route.route.tab && options.route.route.tab.options && options.route.route.tab.options.props || {}, options.route.params, options.props || {})
       };
-      var resolved;
+      let resolved;
 
       function onDidUpdate(componentRouterData) {
         if (componentRouterData !== tabRouter || resolved) return;
         f7events.off('tabRouterDidUpdate', onDidUpdate);
-        var tabContentEl = tabEl.children[0];
+        const tabContentEl = tabEl.children[0];
         resolve(tabContentEl);
         resolved = true;
       }
@@ -153,10 +160,11 @@ export default {
       f7events.on('tabRouterDidUpdate', onDidUpdate);
       tabRouter.setTabContent(tabContent);
     },
-    removeTabContent: function removeTabContent(tabEl) {
+
+    removeTabContent(tabEl) {
       if (!tabEl) return;
-      var tabRouter;
-      f7routers.tabs.forEach(function (tabData) {
+      let tabRouter;
+      f7routers.tabs.forEach(tabData => {
         if (tabData.el && tabData.el === tabEl) {
           tabRouter = tabData;
         }
@@ -170,35 +178,35 @@ export default {
 
       tabRouter.setTabContent(null);
     },
-    modalComponentLoader: function modalComponentLoader(_temp2) {
-      var _ref3 = _temp2 === void 0 ? {} : _temp2,
-          component = _ref3.component,
-          options = _ref3.options,
-          resolve = _ref3.resolve,
-          reject = _ref3.reject;
 
-      var router = this;
-      var modalsRouter = f7routers.modals;
+    modalComponentLoader({
+      component,
+      options,
+      resolve,
+      reject
+    } = {}) {
+      const router = this;
+      const modalsRouter = f7routers.modals;
 
       if (!modalsRouter) {
         reject();
         return;
       }
 
-      var modalData = {
-        component: component,
+      const modalData = {
+        component,
         id: getComponentId(),
         props: extend({
           f7route: options.route,
           f7router: router
         }, options.route.params, options.props || {})
       };
-      var resolved;
+      let resolved;
 
       function onDidUpdate() {
         if (resolved) return;
         f7events.off('modalsRouterDidUpdate', onDidUpdate);
-        var modalEl = modalsRouter.el.children[modalsRouter.el.children.length - 1];
+        const modalEl = modalsRouter.el.children[modalsRouter.el.children.length - 1];
         modalData.el = modalEl;
         resolve(modalEl);
         resolved = true;
@@ -208,15 +216,17 @@ export default {
       modalsRouter.modals.push(modalData);
       modalsRouter.setModals(modalsRouter.modals);
     },
-    removeModal: function removeModal(modalEl) {
-      var modalsRouter = f7routers.modals;
+
+    removeModal(modalEl) {
+      const modalsRouter = f7routers.modals;
       if (!modalsRouter) return;
-      var modalDataToRemove;
-      modalsRouter.modals.forEach(function (modalData) {
+      let modalDataToRemove;
+      modalsRouter.modals.forEach(modalData => {
         if (modalData.el === modalEl) modalDataToRemove = modalData;
       });
       modalsRouter.modals.splice(modalsRouter.modals.indexOf(modalDataToRemove), 1);
       modalsRouter.setModals(modalsRouter.modals);
     }
+
   }
 };