framework7-vue 7.0.9 → 8.0.0-beta.1

package/components/page.js

@@ -7,7 +7,6 @@ export default {
   name: 'f7-page',
   props: {
     name: String,
-    stacked: Boolean,
     withSubnavbar: {
       type: Boolean,
       default: undefined
@@ -56,7 +55,6 @@ export default {
     ...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(props, _ref) {
     let {
       emit,
@@ -67,177 +65,132 @@ export default {
     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 elRef = ref(null);
 
+    // Main Page Events
     const onPageMounted = page => {
       if (elRef.value !== page.el) return;
       emit('page:mounted', page);
     };
-
     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) {
           hasSubnavbar = true;
         }
       }
-
       if (typeof props.withNavbarLarge === 'undefined' && typeof props.navbarLarge === 'undefined') {
         if (page.$navbarEl && page.$navbarEl.hasClass('navbar-large')) {
           hasNavbarLarge = true;
         }
       }
-
       emit('page:init', page);
     };
-
     const onPageReinit = page => {
       if (elRef.value !== page.el) return;
       emit('page:reinit', page);
     };
-
     const onPageBeforeIn = page => {
       if (elRef.value !== page.el) return;
-
       if (!page.swipeBack) {
         if (page.from === 'next') {
           routerPositionClass = 'page-next';
         }
-
         if (page.from === 'previous') {
           routerPositionClass = 'page-previous';
         }
       }
-
       emit('page:beforein', page);
     };
-
     const onPageBeforeOut = page => {
       if (elRef.value !== page.el) return;
       emit('page:beforeout', page);
     };
-
     const onPageAfterOut = page => {
       if (elRef.value !== page.el) return;
-
       if (page.to === 'next') {
         routerPositionClass = 'page-next';
       }
-
       if (page.to === 'previous') {
         routerPositionClass = 'page-previous';
       }
-
       emit('page:afterout', page);
     };
-
     const onPageAfterIn = page => {
       if (elRef.value !== page.el) return;
       routerPositionClass = 'page-current';
       emit('page:afterin', page);
     };
-
     const onPageBeforeRemove = page => {
       if (elRef.value !== page.el) return;
       emit('page:beforeremove', page);
     };
-
     const onPageBeforeUnmount = page => {
       if (elRef.value !== page.el) return;
       emit('page:beforeunmount', page);
-    }; // Helper events
-
-
-    const onPageStack = pageEl => {
-      if (elRef.value !== pageEl) return;
-      routerForceUnstack = false;
     };
-
-    const onPageUnstack = pageEl => {
-      if (elRef.value !== pageEl) return;
-      routerForceUnstack = true;
-    };
-
     const onPagePosition = (pageEl, position) => {
       if (elRef.value !== pageEl) return;
       routerPositionClass = `page-${position}`;
     };
-
     const onPageRole = (pageEl, rolesData) => {
       if (elRef.value !== pageEl) return;
       routerPageRole = rolesData.role;
       routerPageRoleDetailRoot = rolesData.detailRoot;
     };
-
     const onPageMasterStack = pageEl => {
       if (elRef.value !== pageEl) return;
       routerPageMasterStack = true;
     };
-
     const onPageMasterUnstack = pageEl => {
       if (elRef.value !== pageEl) return;
       routerPageMasterStack = false;
     };
-
     const onPageNavbarLargeCollapsed = pageEl => {
       if (elRef.value !== pageEl) return;
       hasNavbarLargeCollapsed = true;
     };
-
     const onPageNavbarLargeExpanded = pageEl => {
       if (elRef.value !== pageEl) return;
       hasNavbarLargeCollapsed = false;
     };
-
     const onCardOpened = (cardEl, pageEl) => {
       if (elRef.value !== pageEl) return;
       hasCardExpandableOpened = true;
     };
-
     const onCardClose = (cardEl, pageEl) => {
       if (elRef.value !== pageEl) return;
       hasCardExpandableOpened = false;
     };
-
     const onPageTabShow = pageEl => {
       if (elRef.value !== pageEl) return;
       emit('page:tabshow');
     };
-
     const onPageTabHide = pageEl => {
       if (elRef.value !== pageEl) return;
       emit('page:tabhide');
     };
-
     const onPtrPullStart = () => {
       emit('ptr:pullstart');
     };
-
     const onPtrPullMove = () => {
       emit('ptr:pullmove');
     };
-
     const onPtrPullEnd = () => {
       emit('ptr:pullend');
     };
-
     const onPtrRefresh = done => {
       emit('ptr:refresh', done);
     };
-
     const onPtrDone = () => {
       emit('ptr:done');
     };
-
     const onInfinite = () => {
       emit('infinite');
     };
-
     onMounted(() => {
       f7ready(() => {
         f7.on('pageMounted', onPageMounted);
@@ -249,8 +202,6 @@ export default {
         f7.on('pageAfterIn', onPageAfterIn);
         f7.on('pageBeforeRemove', onPageBeforeRemove);
         f7.on('pageBeforeUnmount', onPageBeforeUnmount);
-        f7.on('pageStack', onPageStack);
-        f7.on('pageUnstack', onPageUnstack);
         f7.on('pagePosition', onPagePosition);
         f7.on('pageRole', onPageRole);
         f7.on('pageMasterStack', onPageMasterStack);
@@ -274,8 +225,6 @@ export default {
       f7.off('pageAfterIn', onPageAfterIn);
       f7.off('pageBeforeRemove', onPageBeforeRemove);
       f7.off('pageBeforeUnmount', onPageBeforeUnmount);
-      f7.off('pageStack', onPageStack);
-      f7.off('pageUnstack', onPageUnstack);
       f7.off('pagePosition', onPagePosition);
       f7.off('pageRole', onPageRole);
       f7.off('pageMasterStack', onPageMasterStack);
@@ -288,7 +237,6 @@ export default {
       f7.off('pageTabHide', onPageTabHide);
     });
     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,
@@ -316,46 +264,35 @@ export default {
       let hasNavbarLargeComputed = false;
       let hasMessages = props.messagesContent;
       const slotsDefaultRendered = slotsDefault && slotsDefault();
-
       if (slotsDefaultRendered) {
         slotsDefaultRendered.forEach(vnode => {
           if (typeof vnode === 'undefined') return;
           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);
             return;
           }
-
           if (tag === 'f7-subnavbar') hasSubnavbarComputed = true;
-
           if (tag === 'f7-navbar') {
             if (vnode.props && (vnode.props.large || vnode.props.large === '')) hasNavbarLargeComputed = true;
           }
-
           if (typeof hasMessages === 'undefined' && tag === 'f7-messages') hasMessages = true;
-
           if (fixedTags.indexOf(tag) >= 0) {
             isFixedTag = true;
           }
-
           if (props.pageContent) {
             if (isFixedTag) fixedList.push(vnode);else staticList.push(vnode);
           }
         });
       }
-
       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';
       }
-
       if ((hasNavbarLargeComputed || hasNavbarLarge) && typeof props.navbarLarge === 'undefined' && typeof props.withNavbarLarge === 'undefined' && classesValue.indexOf('page-with-navbar-large') < 0) {
         classesValue += ' page-with-navbar-large';
       }
-
       if (!props.pageContent) {
         return h('div', {
           class: classesValue,
@@ -363,7 +300,6 @@ export default {
           'data-name': props.name
         }, [slotsFixed && slotsFixed(), slotsStatic && slotsStatic(), slotsDefault && slotsDefaultRendered]);
       }
-
       return h('div', {
         class: classesValue,
         ref: elRef,
@@ -392,5 +328,4 @@ export default {
       }, () => [slotsStatic && slotsStatic(), staticList])]);
     };
   }
-
 };

package/components/panel.d.ts

@@ -25,6 +25,10 @@ declare const Panel: DefineComponent<
       type: BooleanConstructor;
     },
 
+    floating: {
+      type: BooleanConstructor;
+    },
+
     left: {
       type: BooleanConstructor;
     },

package/components/panel.js

@@ -3,14 +3,12 @@ const _hoisted_1 = {
   key: 0,
   class: "panel-resize-handler"
 };
-
 function render(_ctx, _cache) {
   return _openBlock(), _createElementBlock("div", {
     ref: "elRef",
     class: _normalizeClass(_ctx.classes)
   }, [_renderSlot(_ctx.$slots, "default"), _ctx.resizable ? (_openBlock(), _createElementBlock("div", _hoisted_1)) : _createCommentVNode("", true)], 2);
 }
-
 import { computed, ref, watch, onMounted, onBeforeUnmount } from 'vue';
 import { classNames, noUndefinedProps } from '../shared/utils.js';
 import { colorClasses, colorProps } from '../shared/mixins.js';
@@ -24,6 +22,7 @@ export default {
     cover: Boolean,
     reveal: Boolean,
     push: Boolean,
+    floating: Boolean,
     left: Boolean,
     right: Boolean,
     opened: Boolean,
@@ -66,7 +65,6 @@ export default {
     ...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(props, _ref) {
     let {
       emit
@@ -77,70 +75,57 @@ export default {
     let isClosing = false;
     let isCollapsed = false;
     let isBreakpoint = false;
-
     const onOpen = event => {
       isOpened = true;
       isClosing = false;
       emit('panel:open', event);
       emit('update:opened', true);
     };
-
     const onOpened = event => {
       emit('panel:opened', event);
     };
-
     const onClose = event => {
       isOpened = false;
       isClosing = true;
       emit('panel:close', event);
     };
-
     const onClosed = event => {
       isClosing = false;
       emit('panel:closed', event);
       emit('update:opened', false);
     };
-
     const onBackdropClick = event => {
       emit('click', event);
       emit('panel:backdropclick', event);
     };
-
     const onSwipe = event => {
       emit('panel:swipe', event);
     };
-
     const onSwipeOpen = event => {
       emit('panel:swipeopen', event);
     };
-
     const onBreakpoint = event => {
       isBreakpoint = true;
       isCollapsed = false;
       emit('panel:breakpoint', event);
     };
-
     const onCollapsedBreakpoint = event => {
       isBreakpoint = false;
       isCollapsed = true;
       emit('panel:collapsedbreakpoint', event);
     };
-
     const onResize = function () {
       for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
         args[_key] = arguments[_key];
       }
-
       emit('panel:resize', ...args);
     };
-
     watch(() => props.resizable, newValue => {
       if (!f7Panel) return;
       if (newValue) f7Panel.enableResizable();else f7Panel.disableResizable();
     });
     watch(() => props.opened, newValue => {
       if (!f7Panel) return;
-
       if (newValue) {
         f7Panel.open();
       } else {
@@ -151,11 +136,9 @@ export default {
       f7ready(() => {
         const $ = f7.$;
         if (!$) return;
-
         if ($('.panel-backdrop').length === 0) {
           $('<div class="panel-backdrop"></div>').insertBefore(elRef.value);
         }
-
         const params = noUndefinedProps({
           el: elRef.value,
           resizable: props.resizable,
@@ -184,7 +167,6 @@ export default {
           }
         });
         f7Panel = f7.panel.create(params);
-
         if (props.opened) {
           f7Panel.open(false);
         }
@@ -194,13 +176,11 @@ export default {
       if (f7Panel && f7Panel.destroy) {
         f7Panel.destroy();
       }
-
       f7Panel = null;
     });
     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
-
+      const effectComputed = props.effect || (props.reveal ? 'reveal' : props.push ? 'push' : props.floating ? 'floating' : 'cover'); // eslint-disable-line
       return classNames('panel', {
         'panel-in': isOpened && !isClosing && !isBreakpoint,
         'panel-in-breakpoint': isBreakpoint,
@@ -215,5 +195,4 @@ export default {
       classes
     };
   }
-
 };

package/components/photo-browser.js

@@ -84,38 +84,30 @@ export default {
     renderStandalone: Function
   },
   emits: ['photobrowser:open', 'photobrowser:close', 'photobrowser:opened', 'photobrowser:closed', 'photobrowser:swipetoclose'],
-
   setup(props, _ref) {
     let {
       emit
     } = _ref;
     let f7PhotoBrowser = null;
-
     const open = index => {
       return f7PhotoBrowser.open(index);
     };
-
     const close = () => {
       return f7PhotoBrowser.close();
     };
-
     const expositionToggle = () => {
       return f7PhotoBrowser.expositionToggle();
     };
-
     const expositionEnable = () => {
       return f7PhotoBrowser.expositionEnable();
     };
-
     const expositionDisable = () => {
       return f7PhotoBrowser.expositionDisable();
     };
-
     watch(() => props.photos, value => {
       const pb = f7PhotoBrowser;
       if (!pb) return;
       pb.params.photos = value;
-
       if (pb.opened && pb.swiper) {
         pb.swiper.update();
       }
@@ -124,15 +116,14 @@ export default {
       if (!props.init) return;
       f7ready(() => {
         let paramsComputed;
-
         if (typeof props.params !== 'undefined') {
           paramsComputed = props.params;
         } else {
-          paramsComputed = { ...props
+          paramsComputed = {
+            ...props
           };
           delete paramsComputed.params;
         }
-
         Object.keys(paramsComputed).forEach(param => {
           if (typeof paramsComputed[param] === 'undefined' || paramsComputed[param] === '') delete paramsComputed[param];
         });
@@ -141,23 +132,18 @@ export default {
             open() {
               emit('photobrowser:open');
             },
-
             close() {
               emit('photobrowser:close');
             },
-
             opened() {
               emit('photobrowser:opened');
             },
-
             closed() {
               emit('photobrowser:closed');
             },
-
             swipeToClose() {
               emit('photobrowser:swipetoclose');
             }
-
           }
         });
         f7PhotoBrowser = f7.photoBrowser.create(paramsComputed);
@@ -175,9 +161,7 @@ export default {
       expositionDisable
     };
   },
-
   render() {
     return null;
   }
-
 };

package/components/pie-chart.js

@@ -1,7 +1,6 @@
 import { renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, renderSlot as _renderSlot } from "vue";
 const _hoisted_1 = ["width", "height", "viewBox"];
 const _hoisted_2 = ["d", "fill", "data-index", "onClick", "onMouseenter"];
-
 function render(_ctx, _cache) {
   return _openBlock(), _createElementBlock("div", {
     ref: "elRef",
@@ -29,7 +28,6 @@ function render(_ctx, _cache) {
     }, null, 42, _hoisted_2);
   }), 128))], 12, _hoisted_1)), _renderSlot(_ctx.$slots, "default")], 2);
 }
-
 import { computed, onBeforeUnmount, ref, watch } from 'vue';
 import { classNames } from '../shared/utils.js';
 import { f7 } from '../shared/f7.js';
@@ -49,7 +47,6 @@ export default {
     formatTooltip: Function
   },
   emits: ['select'],
-
   setup(props, _ref) {
     let {
       emit
@@ -57,11 +54,9 @@ export default {
     const elRef = ref(null);
     let f7Tooltip = null;
     const currentIndex = ref(null);
-
     const setCurrentIndex = index => {
       currentIndex.value = index;
     };
-
     const summValue = computed(() => {
       let summ = 0;
       props.datasets.map(d => d.value || 0).forEach(value => {
@@ -72,13 +67,11 @@ export default {
     const paths = computed(() => {
       const p = [];
       let cumulativePercentage = 0;
-
       function getCoordinatesForPercentage(percentage) {
         const x = Math.cos(2 * Math.PI * percentage) * (props.size / 3);
         const y = Math.sin(2 * Math.PI * percentage) * (props.size / 3);
         return [x, y];
       }
-
       props.datasets.forEach(_ref2 => {
         let {
           value,
@@ -90,8 +83,10 @@ export default {
         cumulativePercentage += percentage;
         const [endX, endY] = getCoordinatesForPercentage(cumulativePercentage);
         const largeArcFlag = percentage > 0.5 ? 1 : 0;
-        const points = [`M ${startX} ${startY}`, // Move
-        `A ${props.size / 3} ${props.size / 3} 0 ${largeArcFlag} 1 ${endX} ${endY}`, // Arc
+        const points = [`M ${startX} ${startY}`,
+        // Move
+        `A ${props.size / 3} ${props.size / 3} 0 ${largeArcFlag} 1 ${endX} ${endY}`,
+        // Arc
         'L 0 0' // Line
         ].join(' ');
         p.push({
@@ -102,7 +97,6 @@ export default {
       });
       return p;
     });
-
     const formatTooltipText = () => {
       if (currentIndex.value === null) return '';
       const {
@@ -111,12 +105,10 @@ export default {
         color
       } = props.datasets[currentIndex.value];
       const percentage = value / summValue.value * 100;
-
       const round = v => {
         if (parseInt(v, 10) === v) return v;
         return Math.round(v * 100) / 100;
       };
-
       if (props.formatTooltip) {
         return props.formatTooltip({
           index: currentIndex.value,
@@ -126,7 +118,6 @@ export default {
           percentage
         });
       }
-
       const tooltipText = `${label ? `${label}: ` : ''}${round(value)} (${round(percentage)}%)`;
       return `
       <div class="pie-chart-tooltip-label">
@@ -134,12 +125,10 @@ export default {
       </div>
     `;
     };
-
     const setTooltip = () => {
       const index = currentIndex.value;
       if (index === null && !f7Tooltip) return;
       if (!props.tooltip || !elRef.value || !f7) return;
-
       if (index !== null && !f7Tooltip) {
         f7Tooltip = f7.tooltip.create({
           trigger: 'manual',
@@ -151,9 +140,7 @@ export default {
         f7Tooltip.show();
         return;
       }
-
       if (!f7Tooltip) return;
-
       if (index !== null) {
         f7Tooltip.setText(formatTooltipText());
         f7Tooltip.setTargetEl(elRef.value.querySelector(`path[data-index="${index}"]`));
@@ -162,7 +149,6 @@ export default {
         f7Tooltip.hide();
       }
     };
-
     watch(() => currentIndex.value, () => {
       emit('select', currentIndex.value, props.datasets[currentIndex.value]);
       setTooltip();
@@ -171,7 +157,6 @@ export default {
       if (f7Tooltip && f7Tooltip.destroy) {
         f7Tooltip.destroy();
       }
-
       f7Tooltip = null;
     });
     const classes = computed(() => classNames('pie-chart'));
@@ -184,5 +169,4 @@ export default {
       setCurrentIndex
     };
   }
-
 };

package/components/popover.d.ts

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