framework7-vue 6.3.4 → 7.0.0-beta.3

package/{esm/components → components}/page.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, h } from 'vue';
 import { classNames } from '../shared/utils';
 import { colorClasses, colorProps } from '../shared/mixins';
@@ -7,7 +5,7 @@ import { f7ready, f7 } from '../shared/f7';
 import f7PageContent from './page-content';
 export default {
   name: 'f7-page',
-  props: _extends({
+  props: {
     name: String,
     stacked: Boolean,
     withSubnavbar: {
@@ -54,29 +52,32 @@ export default {
     hideNavbarOnScroll: Boolean,
     hideToolbarOnScroll: Boolean,
     messagesContent: Boolean,
-    loginScreen: Boolean
-  }, colorProps),
+    loginScreen: Boolean,
+    ...colorProps
+  },
   emits: ['page:mounted', 'page:init', 'page:reinit', 'page:beforein', 'page:beforeout', 'page:afterout', 'page:afterin', 'page:beforeremove', 'page:beforeunmount', 'page:tabshow', 'page:tabhide', 'ptr:pullstart', 'ptr:pullmove', 'ptr:pullend', 'ptr:refresh', 'ptr:done', 'infinite'],
-  setup: function setup(props, _ref) {
-    var emit = _ref.emit,
-        slots = _ref.slots;
-    var hasSubnavbar = false;
-    var hasNavbarLarge = false;
-    var hasNavbarLargeCollapsed = false;
-    var hasCardExpandableOpened = false;
-    var routerPositionClass = '';
-    var routerForceUnstack = false;
-    var routerPageRole = null;
-    var routerPageRoleDetailRoot = false;
-    var routerPageMasterStack = false;
-    var elRef = ref(null); // Main Page Events
-
-    var onPageMounted = function onPageMounted(page) {
+
+  setup(props, {
+    emit,
+    slots
+  }) {
+    let hasSubnavbar = false;
+    let hasNavbarLarge = false;
+    let hasNavbarLargeCollapsed = false;
+    let hasCardExpandableOpened = false;
+    let routerPositionClass = '';
+    let routerForceUnstack = false;
+    let routerPageRole = null;
+    let routerPageRoleDetailRoot = false;
+    let routerPageMasterStack = false;
+    const elRef = ref(null); // Main Page Events
+
+    const onPageMounted = page => {
       if (elRef.value !== page.el) return;
       emit('page:mounted', page);
     };
 
-    var onPageInit = function onPageInit(page) {
+    const onPageInit = page => {
       if (elRef.value !== page.el) return;
 
       if (typeof props.withSubnavbar === 'undefined' && typeof props.subnavbar === 'undefined') {
@@ -94,12 +95,12 @@ export default {
       emit('page:init', page);
     };
 
-    var onPageReinit = function onPageReinit(page) {
+    const onPageReinit = page => {
       if (elRef.value !== page.el) return;
       emit('page:reinit', page);
     };
 
-    var onPageBeforeIn = function onPageBeforeIn(page) {
+    const onPageBeforeIn = page => {
       if (elRef.value !== page.el) return;
 
       if (!page.swipeBack) {
@@ -115,12 +116,12 @@ export default {
       emit('page:beforein', page);
     };
 
-    var onPageBeforeOut = function onPageBeforeOut(page) {
+    const onPageBeforeOut = page => {
       if (elRef.value !== page.el) return;
       emit('page:beforeout', page);
     };
 
-    var onPageAfterOut = function onPageAfterOut(page) {
+    const onPageAfterOut = page => {
       if (elRef.value !== page.el) return;
 
       if (page.to === 'next') {
@@ -134,110 +135,110 @@ export default {
       emit('page:afterout', page);
     };
 
-    var onPageAfterIn = function onPageAfterIn(page) {
+    const onPageAfterIn = page => {
       if (elRef.value !== page.el) return;
       routerPositionClass = 'page-current';
       emit('page:afterin', page);
     };
 
-    var onPageBeforeRemove = function onPageBeforeRemove(page) {
+    const onPageBeforeRemove = page => {
       if (elRef.value !== page.el) return;
       emit('page:beforeremove', page);
     };
 
-    var onPageBeforeUnmount = function onPageBeforeUnmount(page) {
+    const onPageBeforeUnmount = page => {
       if (elRef.value !== page.el) return;
       emit('page:beforeunmount', page);
     }; // Helper events
 
 
-    var onPageStack = function onPageStack(pageEl) {
+    const onPageStack = pageEl => {
       if (elRef.value !== pageEl) return;
       routerForceUnstack = false;
     };
 
-    var onPageUnstack = function onPageUnstack(pageEl) {
+    const onPageUnstack = pageEl => {
       if (elRef.value !== pageEl) return;
       routerForceUnstack = true;
     };
 
-    var onPagePosition = function onPagePosition(pageEl, position) {
+    const onPagePosition = (pageEl, position) => {
       if (elRef.value !== pageEl) return;
-      routerPositionClass = "page-" + position;
+      routerPositionClass = `page-${position}`;
     };
 
-    var onPageRole = function onPageRole(pageEl, rolesData) {
+    const onPageRole = (pageEl, rolesData) => {
       if (elRef.value !== pageEl) return;
       routerPageRole = rolesData.role;
       routerPageRoleDetailRoot = rolesData.detailRoot;
     };
 
-    var onPageMasterStack = function onPageMasterStack(pageEl) {
+    const onPageMasterStack = pageEl => {
       if (elRef.value !== pageEl) return;
       routerPageMasterStack = true;
     };
 
-    var onPageMasterUnstack = function onPageMasterUnstack(pageEl) {
+    const onPageMasterUnstack = pageEl => {
       if (elRef.value !== pageEl) return;
       routerPageMasterStack = false;
     };
 
-    var onPageNavbarLargeCollapsed = function onPageNavbarLargeCollapsed(pageEl) {
+    const onPageNavbarLargeCollapsed = pageEl => {
       if (elRef.value !== pageEl) return;
       hasNavbarLargeCollapsed = true;
     };
 
-    var onPageNavbarLargeExpanded = function onPageNavbarLargeExpanded(pageEl) {
+    const onPageNavbarLargeExpanded = pageEl => {
       if (elRef.value !== pageEl) return;
       hasNavbarLargeCollapsed = false;
     };
 
-    var onCardOpened = function onCardOpened(cardEl, pageEl) {
+    const onCardOpened = (cardEl, pageEl) => {
       if (elRef.value !== pageEl) return;
       hasCardExpandableOpened = true;
     };
 
-    var onCardClose = function onCardClose(cardEl, pageEl) {
+    const onCardClose = (cardEl, pageEl) => {
       if (elRef.value !== pageEl) return;
       hasCardExpandableOpened = false;
     };
 
-    var onPageTabShow = function onPageTabShow(pageEl) {
+    const onPageTabShow = pageEl => {
       if (elRef.value !== pageEl) return;
       emit('page:tabshow');
     };
 
-    var onPageTabHide = function onPageTabHide(pageEl) {
+    const onPageTabHide = pageEl => {
       if (elRef.value !== pageEl) return;
       emit('page:tabhide');
     };
 
-    var onPtrPullStart = function onPtrPullStart() {
+    const onPtrPullStart = () => {
       emit('ptr:pullstart');
     };
 
-    var onPtrPullMove = function onPtrPullMove() {
+    const onPtrPullMove = () => {
       emit('ptr:pullmove');
     };
 
-    var onPtrPullEnd = function onPtrPullEnd() {
+    const onPtrPullEnd = () => {
       emit('ptr:pullend');
     };
 
-    var onPtrRefresh = function onPtrRefresh(done) {
+    const onPtrRefresh = done => {
       emit('ptr:refresh', done);
     };
 
-    var onPtrDone = function onPtrDone() {
+    const onPtrDone = () => {
       emit('ptr:done');
     };
 
-    var onInfinite = function onInfinite() {
+    const onInfinite = () => {
       emit('infinite');
     };
 
-    onMounted(function () {
-      f7ready(function () {
+    onMounted(() => {
+      f7ready(() => {
         f7.on('pageMounted', onPageMounted);
         f7.on('pageInit', onPageInit);
         f7.on('pageReinit', onPageReinit);
@@ -261,7 +262,7 @@ export default {
         f7.on('pageTabHide', onPageTabHide);
       });
     });
-    onBeforeUnmount(function () {
+    onBeforeUnmount(() => {
       if (!f7) return;
       f7.off('pageMounted', onPageMounted);
       f7.off('pageInit', onPageInit);
@@ -285,43 +286,41 @@ export default {
       f7.off('pageTabShow', onPageTabShow);
       f7.off('pageTabHide', onPageTabHide);
     });
-    var classes = computed(function () {
-      return classNames('page', routerPositionClass, {
-        stacked: props.stacked && !routerForceUnstack,
-        tabs: props.tabs,
-        'page-with-subnavbar': props.subnavbar || props.withSubnavbar,
-        'page-with-navbar-large': props.navbarLarge || props.withNavbarLarge,
-        'no-navbar': props.noNavbar,
-        'no-toolbar': props.noToolbar,
-        'no-swipeback': props.noSwipeback,
-        'page-master': routerPageRole === 'master',
-        'page-master-detail': routerPageRole === 'detail',
-        'page-master-detail-root': routerPageRoleDetailRoot === true,
-        'page-master-stacked': routerPageMasterStack === true,
-        'page-with-navbar-large-collapsed': hasNavbarLargeCollapsed === true,
-        'page-with-card-opened': hasCardExpandableOpened === true,
-        'login-screen-page': props.loginScreen
-      }, colorClasses(props));
-    });
-    var fixedTags = 'navbar toolbar tabbar subnavbar searchbar messagebar fab list-index panel'.split(' ').map(function (tagName) {
-      return "f7-" + tagName;
-    });
-    return function () {
-      var fixedList = [];
-      var staticList = [];
-      var slotsStatic = slots.static,
-          slotsFixed = slots.fixed,
-          slotsDefault = slots.default;
-      var hasSubnavbarComputed = false;
-      var hasNavbarLargeComputed = false;
-      var hasMessages = props.messagesContent;
-      var slotsDefaultRendered = slotsDefault && slotsDefault();
+    const classes = computed(() => classNames('page', routerPositionClass, {
+      stacked: props.stacked && !routerForceUnstack,
+      tabs: props.tabs,
+      'page-with-subnavbar': props.subnavbar || props.withSubnavbar,
+      'page-with-navbar-large': props.navbarLarge || props.withNavbarLarge,
+      'no-navbar': props.noNavbar,
+      'no-toolbar': props.noToolbar,
+      'no-swipeback': props.noSwipeback,
+      'page-master': routerPageRole === 'master',
+      'page-master-detail': routerPageRole === 'detail',
+      'page-master-detail-root': routerPageRoleDetailRoot === true,
+      'page-master-stacked': routerPageMasterStack === true,
+      'page-with-navbar-large-collapsed': hasNavbarLargeCollapsed === true,
+      '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}`);
+    return () => {
+      const fixedList = [];
+      const staticList = [];
+      const {
+        static: slotsStatic,
+        fixed: slotsFixed,
+        default: slotsDefault
+      } = slots;
+      let hasSubnavbarComputed = false;
+      let hasNavbarLargeComputed = false;
+      let hasMessages = props.messagesContent;
+      const slotsDefaultRendered = slotsDefault && slotsDefault();
 
       if (slotsDefaultRendered) {
-        slotsDefaultRendered.forEach(function (vnode) {
+        slotsDefaultRendered.forEach(vnode => {
           if (typeof vnode === 'undefined') return;
-          var tag = vnode.type && vnode.type.name ? vnode.type.name : vnode.type;
-          var isFixedTag = false;
+          const tag = vnode.type && vnode.type.name ? vnode.type.name : vnode.type;
+          let isFixedTag = false;
 
           if (!tag) {
             if (props.pageContent || props.pageContent === '') staticList.push(vnode);
@@ -346,7 +345,7 @@ export default {
         });
       }
 
-      var classesValue = classes.value;
+      let classesValue = classes.value;
 
       if ((hasSubnavbarComputed || hasSubnavbar) && typeof props.subnavbar === 'undefined' && typeof props.withSubnavbar === 'undefined' && classesValue.indexOf('page-with-subnavbar') < 0) {
         classesValue += ' page-with-subnavbar';
@@ -383,15 +382,14 @@ export default {
         hideToolbarOnScroll: props.hideToolbarOnScroll,
         messagesContent: props.messagesContent || hasMessages,
         loginScreen: props.loginScreen,
-        onPtrPullStart: onPtrPullStart,
-        onPtrPullMove: onPtrPullMove,
-        onPtrPullEnd: onPtrPullEnd,
-        onPtrRefresh: onPtrRefresh,
-        onPtrDone: onPtrDone,
-        onInfinite: onInfinite
-      }, function () {
-        return [slotsStatic && slotsStatic(), staticList];
-      })]);
+        onPtrPullStart,
+        onPtrPullMove,
+        onPtrPullEnd,
+        onPtrRefresh,
+        onPtrDone,
+        onInfinite
+      }, () => [slotsStatic && slotsStatic(), staticList])]);
     };
   }
+
 };

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

@@ -1,7 +1,5 @@
-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 { renderSlot as _renderSlot, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode } from "vue";
-var _hoisted_1 = {
+const _hoisted_1 = {
   key: 0,
   class: "panel-resize-handler"
 };
@@ -19,8 +17,8 @@ import { colorClasses, colorProps } from '../shared/mixins';
 import { f7ready, f7 } from '../shared/f7';
 export default {
   name: 'f7-panel',
-  render: render,
-  props: _extends({
+  render,
+  props: {
     side: String,
     effect: String,
     cover: Boolean,
@@ -60,83 +58,78 @@ export default {
     swipeThreshold: {
       type: Number,
       default: 0
-    }
-  }, colorProps),
+    },
+    ...colorProps
+  },
   emits: ['panel:open', 'panel:opened', 'panel:close', 'panel:closed', 'click', 'panel:backdropclick', 'panel:swipe', 'panel:swipeopen', 'panel:breakpoint', 'panel:collapsedbreakpoint', 'panel:resize', 'update:opened'],
-  setup: function setup(props, _ref) {
-    var emit = _ref.emit;
-    var f7Panel = null;
-    var elRef = ref(null);
-    var isOpened = false;
-    var isClosing = false;
-    var isCollapsed = false;
-    var isBreakpoint = false;
-
-    var onOpen = function onOpen(event) {
+
+  setup(props, {
+    emit
+  }) {
+    let f7Panel = null;
+    const elRef = ref(null);
+    let isOpened = false;
+    let isClosing = false;
+    let isCollapsed = false;
+    let isBreakpoint = false;
+
+    const onOpen = event => {
       isOpened = true;
       isClosing = false;
       emit('panel:open', event);
       emit('update:opened', true);
     };
 
-    var onOpened = function onOpened(event) {
+    const onOpened = event => {
       emit('panel:opened', event);
     };
 
-    var onClose = function onClose(event) {
+    const onClose = event => {
       isOpened = false;
       isClosing = true;
       emit('panel:close', event);
     };
 
-    var onClosed = function onClosed(event) {
+    const onClosed = event => {
       isClosing = false;
       emit('panel:closed', event);
       emit('update:opened', false);
     };
 
-    var onBackdropClick = function onBackdropClick(event) {
+    const onBackdropClick = event => {
       emit('click', event);
       emit('panel:backdropclick', event);
     };
 
-    var onSwipe = function onSwipe(event) {
+    const onSwipe = event => {
       emit('panel:swipe', event);
     };
 
-    var onSwipeOpen = function onSwipeOpen(event) {
+    const onSwipeOpen = event => {
       emit('panel:swipeopen', event);
     };
 
-    var onBreakpoint = function onBreakpoint(event) {
+    const onBreakpoint = event => {
       isBreakpoint = true;
       isCollapsed = false;
       emit('panel:breakpoint', event);
     };
 
-    var onCollapsedBreakpoint = function onCollapsedBreakpoint(event) {
+    const onCollapsedBreakpoint = event => {
       isBreakpoint = false;
       isCollapsed = true;
       emit('panel:collapsedbreakpoint', event);
     };
 
-    var onResize = function onResize() {
-      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-
-      emit.apply(void 0, ['panel:resize'].concat(args));
+    const onResize = (...args) => {
+      emit('panel:resize', ...args);
     };
 
-    watch(function () {
-      return props.resizable;
-    }, function (newValue) {
+    watch(() => props.resizable, newValue => {
       if (!f7Panel) return;
       if (newValue) f7Panel.enableResizable();else f7Panel.disableResizable();
     });
-    watch(function () {
-      return props.opened;
-    }, function (newValue) {
+    watch(() => props.opened, newValue => {
       if (!f7Panel) return;
 
       if (newValue) {
@@ -145,16 +138,16 @@ export default {
         f7Panel.close();
       }
     });
-    onMounted(function () {
-      f7ready(function () {
-        var $ = f7.$;
+    onMounted(() => {
+      f7ready(() => {
+        const $ = f7.$;
         if (!$) return;
 
         if ($('.panel-backdrop').length === 0) {
           $('<div class="panel-backdrop"></div>').insertBefore(elRef.value);
         }
 
-        var params = noUndefinedProps({
+        const params = noUndefinedProps({
           el: elRef.value,
           resizable: props.resizable,
           backdrop: props.backdrop,
@@ -187,29 +180,30 @@ export default {
         }
       });
     });
-    onBeforeUnmount(function () {
+    onBeforeUnmount(() => {
       if (f7Panel && f7Panel.destroy) {
         f7Panel.destroy();
       }
 
       f7Panel = null;
     });
-    var classes = computed(function () {
-      var _classNames;
-
-      var sideComputed = props.side || (props.left ? 'left' : 'right');
-      var effectComputed = props.effect || (props.reveal ? 'reveal' : props.push ? 'push' : 'cover'); // eslint-disable-line
+    const classes = computed(() => {
+      const sideComputed = props.side || (props.left ? 'left' : 'right');
+      const effectComputed = props.effect || (props.reveal ? 'reveal' : props.push ? 'push' : 'cover'); // eslint-disable-line
 
-      return classNames('panel', (_classNames = {
+      return classNames('panel', {
         'panel-in': isOpened && !isClosing && !isBreakpoint,
         'panel-in-breakpoint': isBreakpoint,
         'panel-in-collapsed': isCollapsed,
-        'panel-resizable': props.resizable
-      }, _classNames["panel-" + sideComputed] = sideComputed, _classNames["panel-" + effectComputed] = effectComputed, _classNames), colorClasses(props));
+        'panel-resizable': props.resizable,
+        [`panel-${sideComputed}`]: sideComputed,
+        [`panel-${effectComputed}`]: effectComputed
+      }, colorClasses(props));
     });
     return {
-      elRef: elRef,
-      classes: classes
+      elRef,
+      classes
     };
   }
+
 };