framework7-vue 7.0.8 → 8.0.0-beta.1

package/components/toggle.js

@@ -1,10 +1,8 @@
 import { createElementVNode as _createElementVNode, normalizeClass as _normalizeClass, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
 const _hoisted_1 = ["name", "disabled", "readonly", "checked", "value"];
-
 const _hoisted_2 = /*#__PURE__*/_createElementVNode("span", {
   class: "toggle-icon"
 }, null, -1);
-
 function render(_ctx, _cache) {
   return _openBlock(), _createElementBlock("label", {
     ref: "elRef",
@@ -21,7 +19,6 @@ function render(_ctx, _cache) {
     })
   }, null, 40, _hoisted_1), _hoisted_2], 2);
 }
-
 import { computed, ref, watch, onMounted, onBeforeUnmount } from 'vue';
 import { classNames } from '../shared/utils.js';
 import { colorClasses, colorProps } from '../shared/mixins.js';
@@ -45,7 +42,6 @@ export default {
     ...colorProps
   },
   emits: ['change', 'toggle:change', 'update:checked'],
-
   setup(props, _ref) {
     let {
       emit
@@ -53,11 +49,9 @@ export default {
     let f7Toggle = null;
     const elRef = ref(null);
     useTooltip(elRef, props);
-
     const onChange = event => {
       emit('change', event);
     };
-
     watch(() => props.checked, newValue => {
       if (!f7Toggle) return;
       f7Toggle.checked = newValue;
@@ -72,7 +66,6 @@ export default {
               emit('toggle:change', toggleInstance.checked);
               emit('update:checked', toggleInstance.checked);
             }
-
           }
         });
       });
@@ -81,7 +74,6 @@ export default {
       if (f7Toggle && f7Toggle.destroy && f7Toggle.$el) {
         f7Toggle.destroy();
       }
-
       f7Toggle = null;
     });
     const classes = computed(() => classNames('toggle', {
@@ -94,5 +86,4 @@ export default {
       onChange
     };
   }
-
 };

package/components/toolbar.d.ts

@@ -9,7 +9,7 @@ declare const Toolbar: DefineComponent<
       type: BooleanConstructor;
     },
 
-    labels: {
+    icons: {
       type: BooleanConstructor;
     },
 
@@ -21,16 +21,9 @@ declare const Toolbar: DefineComponent<
       type: BooleanConstructor;
     },
 
-    noShadow: {
-      type: BooleanConstructor;
-    },
-
-    noHairline: {
-      type: BooleanConstructor;
-    },
-
-    noBorder: {
-      type: BooleanConstructor;
+    outline: {
+      type: any;
+      default: boolean;
     },
 
     position: {
@@ -48,11 +41,6 @@ declare const Toolbar: DefineComponent<
       default: undefined;
     },
 
-    topAurora: {
-      type: BooleanConstructor;
-      default: undefined;
-    },
-
     top: {
       type: BooleanConstructor;
       default: undefined;
@@ -68,11 +56,6 @@ declare const Toolbar: DefineComponent<
       default: undefined;
     },
 
-    bottomAurora: {
-      type: BooleanConstructor;
-      default: undefined;
-    },
-
     bottom: {
       type: BooleanConstructor;
       default: undefined;

package/components/toolbar.js

@@ -3,7 +3,6 @@ const _hoisted_1 = {
   key: 0,
   className: "toolbar-inner"
 };
-
 function render(_ctx, _cache) {
   return _openBlock(), _createElementBlock("div", {
     ref: "elRef",
@@ -12,7 +11,6 @@ function render(_ctx, _cache) {
     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';
@@ -23,12 +21,13 @@ export default {
   render,
   props: {
     tabbar: Boolean,
-    labels: Boolean,
+    icons: Boolean,
     scrollable: Boolean,
     hidden: Boolean,
-    noShadow: Boolean,
-    noHairline: Boolean,
-    noBorder: Boolean,
+    outline: {
+      type: Boolean,
+      default: true
+    },
     position: {
       type: String,
       default: undefined
@@ -41,10 +40,6 @@ export default {
       type: Boolean,
       default: undefined
     },
-    topAurora: {
-      type: Boolean,
-      default: undefined
-    },
     top: {
       type: Boolean,
       default: undefined
@@ -57,10 +52,6 @@ export default {
       type: Boolean,
       default: undefined
     },
-    bottomAurora: {
-      type: Boolean,
-      default: undefined
-    },
     bottom: {
       type: Boolean,
       default: undefined
@@ -72,39 +63,32 @@ export default {
     ...colorProps
   },
   emits: ['toolbar:hide', 'toolbar:show'],
-
   setup(props, _ref) {
     let {
       emit
     } = _ref;
     const elRef = ref(null);
     const theme = useTheme();
-
     const onHide = toolbarEl => {
       if (elRef.value !== toolbarEl) return;
       emit('toolbar:hide');
     };
-
     const onShow = toolbarEl => {
       if (elRef.value !== toolbarEl) return;
       emit('toolbar:show');
     };
-
     const hide = animate => {
       if (!f7) return;
       f7.toolbar.hide(elRef.value, animate);
     };
-
     const show = animate => {
       if (!f7) return;
       f7.toolbar.show(elRef.value, animate);
     };
-
     onMounted(() => {
       if (props.tabbar && f7 && elRef.value) {
         f7.toolbar.setHighlight(elRef.value);
       }
-
       f7.on('toolbarShow', onShow);
       f7.on('toolbarHide', onHide);
     });
@@ -113,7 +97,7 @@ export default {
       f7.off('toolbarHide', onHide);
     });
     const TabbarContext = computed(() => ({
-      tabbarHasLabels: props.labels
+      tabbarHasIcons: props.icons
     }));
     provide('TabbarContext', TabbarContext);
     const classes = computed(() => {
@@ -121,29 +105,24 @@ export default {
         tabbar,
         bottomMd,
         bottomIos,
-        bottomAurora,
         bottom,
         position,
         topMd,
         topIos,
-        topAurora,
         top,
-        labels,
+        icons,
         scrollable,
         hidden,
-        noShadow,
-        noHairline,
-        noBorder
+        outline
       } = props;
       return classNames('toolbar', {
         tabbar,
-        'toolbar-bottom': theme.value && theme.value.md && bottomMd || theme.value && theme.value.ios && bottomIos || theme.value && theme.value.aurora && bottomAurora || bottom || position === 'bottom',
-        'toolbar-top': theme.value && theme.value.md && topMd || theme.value && theme.value.ios && topIos || theme.value && theme.value.aurora && topAurora || top || position === 'top',
-        'tabbar-labels': labels,
+        'toolbar-bottom': theme.value && theme.value.md && bottomMd || theme.value && theme.value.ios && bottomIos || bottom || position === 'bottom',
+        'toolbar-top': theme.value && theme.value.md && topMd || theme.value && theme.value.ios && topIos || top || position === 'top',
+        'tabbar-icons': icons,
         'tabbar-scrollable': scrollable,
         'toolbar-hidden': hidden,
-        'no-shadow': noShadow,
-        'no-hairline': noHairline || noBorder
+        'no-outline': !outline
       }, colorClasses(props));
     });
     return {
@@ -153,5 +132,4 @@ export default {
       show
     };
   }
-
 };

package/components/treeview-item.d.ts

@@ -183,10 +183,6 @@ declare const TreeviewItem: DefineComponent<
       type: StringConstructor;
     },
 
-    iconAurora: {
-      type: StringConstructor;
-    },
-
     iconColor: {
       type: StringConstructor;
     },

package/components/treeview-item.js

@@ -13,10 +13,8 @@ const _hoisted_4 = {
   key: 0,
   className: "treeview-item-children"
 };
-
 function render(_ctx, _cache) {
   const _component_f7_use_icon = _resolveComponent("f7-use-icon");
-
   return _openBlock(), _createElementBlock("div", {
     ref: "elRef",
     class: _normalizeClass(_ctx.classes)
@@ -32,7 +30,6 @@ function render(_ctx, _cache) {
     _: 3
   }, 16, ["class", "onClick"])), _ctx.hasChildren ? (_openBlock(), _createElementBlock("div", _hoisted_4, [_renderSlot(_ctx.$slots, "children-start"), _renderSlot(_ctx.$slots, "default"), _renderSlot(_ctx.$slots, "children")])) : _createCommentVNode("", true)], 2);
 }
-
 import { computed, ref, onMounted, onBeforeUnmount } from 'vue';
 import { classNames } from '../shared/utils.js';
 import { colorClasses, colorProps, actionsAttrs, actionsProps, actionsClasses, routerAttrs, routerProps, routerClasses, iconProps } from '../shared/mixins.js';
@@ -66,7 +63,6 @@ export default {
     ...routerProps
   },
   emits: ['click', 'treeview:open', 'treeview:close', 'treeview:loadchildren'],
-
   setup(props, _ref) {
     let {
       slots,
@@ -78,26 +74,21 @@ export default {
     });
     const needToggle = computed(() => typeof props.toggle === 'undefined' ? hasChildren.value : props.toggle);
     const icon = computed(() => useIcon(props));
-
     const onClick = event => {
       emit('click', event);
     };
-
     const onOpen = el => {
       if (elRef.value !== el) return;
       emit('treeview:open', el);
     };
-
     const onClose = el => {
       if (elRef.value !== el) return;
       emit('treeview:close', el);
     };
-
     const onLoadChildren = (el, done) => {
       if (elRef.value !== el) return;
       emit('treeview:loadchildren', el, done);
     };
-
     const attachEvents = () => {
       if (!elRef.value) return;
       f7ready(() => {
@@ -106,14 +97,12 @@ export default {
         f7.on('treeviewLoadChildren', onLoadChildren);
       });
     };
-
     const detachEvents = () => {
       if (!f7) return;
       f7.off('treeviewOpen', onOpen);
       f7.off('treeviewClose', onClose);
       f7.off('treeviewLoadChildren', onLoadChildren);
     };
-
     onMounted(() => attachEvents());
     onBeforeUnmount(() => detachEvents());
     const classes = computed(() => classNames('treeview-item', {
@@ -130,7 +119,6 @@ export default {
       let href = props.link;
       if (props.link === true) href = '#';
       if (props.link === false) href = undefined; // no href attribute
-
       return {
         href,
         ...routerAttrs(props),
@@ -149,5 +137,4 @@ export default {
       elRef
     };
   }
-
 };

package/components/treeview.js

@@ -1,25 +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", {
     class: _normalizeClass(_ctx.classes)
   }, [_renderSlot(_ctx.$slots, "default")], 2);
 }
-
 import { computed } from 'vue';
 import { classNames } from '../shared/utils.js';
 import { colorClasses, colorProps } from '../shared/mixins.js';
 export default {
   name: 'f7-treeview',
   render,
-  props: { ...colorProps
+  props: {
+    ...colorProps
   },
-
   setup(props) {
     const classes = computed(() => classNames('treeview', colorClasses(props)));
     return {
       classes
     };
   }
-
 };

package/components/use-icon.js

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

package/components/view.d.ts

@@ -57,14 +57,6 @@ declare const View: DefineComponent<
       type: NumberConstructor;
     },
 
-    auroraSwipeBackActiveArea: {
-      type: NumberConstructor;
-    },
-
-    auroraSwipeBackThreshold: {
-      type: NumberConstructor;
-    },
-
     browserHistoryRoot: {
       type: StringConstructor;
     },
@@ -112,11 +104,6 @@ declare const View: DefineComponent<
       default: undefined;
     },
 
-    stackPages: {
-      type: BooleanConstructor;
-      default: undefined;
-    },
-
     xhrCache: {
       type: BooleanConstructor;
       default: undefined;
@@ -202,21 +189,6 @@ declare const View: DefineComponent<
       default: undefined;
     },
 
-    auroraSwipeBack: {
-      type: BooleanConstructor;
-      default: undefined;
-    },
-
-    auroraSwipeBackAnimateShadow: {
-      type: BooleanConstructor;
-      default: undefined;
-    },
-
-    auroraSwipeBackAnimateOpacity: {
-      type: BooleanConstructor;
-      default: undefined;
-    },
-
     browserHistory: {
       type: BooleanConstructor;
       default: undefined;

package/components/view.js

@@ -24,10 +24,6 @@ export default {
       type: Boolean,
       default: undefined
     },
-    stackPages: {
-      type: Boolean,
-      default: undefined
-    },
     xhrCache: {
       type: Boolean,
       default: undefined
@@ -105,20 +101,6 @@ export default {
     },
     mdSwipeBackActiveArea: Number,
     mdSwipeBackThreshold: Number,
-    auroraSwipeBack: {
-      type: Boolean,
-      default: undefined
-    },
-    auroraSwipeBackAnimateShadow: {
-      type: Boolean,
-      default: undefined
-    },
-    auroraSwipeBackAnimateOpacity: {
-      type: Boolean,
-      default: undefined
-    },
-    auroraSwipeBackActiveArea: Number,
-    auroraSwipeBackThreshold: Number,
     // Push State
     browserHistory: {
       type: Boolean,
@@ -184,7 +166,6 @@ export default {
     ...colorProps
   },
   emits: ['view:init', 'view:resize', 'swipeback:move', 'swipeback:beforechange', 'swipeback:afterchange', 'swipeback:beforereset', 'swipeback:afterreset', 'tab:hide', 'tab:show'],
-
   setup(props, _ref) {
     let {
       emit,
@@ -200,28 +181,26 @@ export default {
     let routerData = null;
     let initialPage;
     let initialRoute;
-
     const onViewInit = view => {
       emit('view:init', view);
-
       if (!props.init) {
         routerData.instance = view;
         f7View = routerData.instance;
       }
     };
-
     const getViewParams = () => {
       const routes = toRaw(props.routes || []);
       const routesAdd = toRaw(props.routesAdd || []);
-      return noUndefinedProps({ ...props,
+      return noUndefinedProps({
+        ...props,
         routes,
         routesAdd
       });
     };
-
     if (f7 && !f7View && props.init) {
       const routerId = getRouterId();
-      f7View = f7.views.create(elRef.value, { ...getViewParams(),
+      f7View = f7.views.create(elRef.value, {
+        ...getViewParams(),
         routerId,
         init: false,
         on: {
@@ -233,21 +212,17 @@ export default {
         instance: f7View
       };
       f7routers.views.push(routerData);
-
       if (shouldInitRouter && f7View && f7View.router && (props.url || props.main)) {
         const initialData = getRouterInitialComponent(f7View.router, initialPageComponent);
         initialPage = initialData.initialPage;
         initialRoute = initialData.initialRoute;
-
         if (initialRoute && initialRoute.route && initialRoute.route.masterRoute) {
           initialPage = undefined;
           initialRoute = undefined;
         }
       }
     }
-
     const pages = ref(initialPage ? [initialPage] : []);
-
     const setPages = newPages => {
       newPages.forEach(page => {
         // eslint-disable-next-line
@@ -255,54 +230,43 @@ export default {
       });
       pages.value = newPages;
     };
-
     const onResize = (view, width) => {
       emit('view:resize', width);
     };
-
     const onSwipeBackMove = data => {
       const swipeBackData = data;
       emit('swipeback:move', swipeBackData);
     };
-
     const onSwipeBackBeforeChange = data => {
       const swipeBackData = data;
       emit('swipeback:beforechange', swipeBackData);
     };
-
     const onSwipeBackAfterChange = data => {
       const swipeBackData = data;
       emit('swipeback:afterchange', swipeBackData);
     };
-
     const onSwipeBackBeforeReset = data => {
       const swipeBackData = data;
       emit('swipeback:beforereset', swipeBackData);
     };
-
     const onSwipeBackAfterReset = data => {
       const swipeBackData = data;
       emit('swipeback:afterreset', swipeBackData);
     };
-
     onMounted(() => {
       f7ready(() => {
         if (f7View) {
           routerData.el = elRef.value;
           routerData.pages = pages.value;
-
           routerData.setPages = newPages => {
             setPages([...newPages]);
           };
-
           if (initialPage && initialPage.isAsync && !initialPage.initialComponent) {
             initialPage.component().then(() => {
               setTimeout(() => {
                 f7View.init(elRef.value);
-
                 if (initialPage) {
                   initialPage.el = f7View.router.currentPageEl;
-
                   if (initialRoute && initialRoute.route && initialRoute.route.keepAlive) {
                     initialRoute.route.keepAliveData = {
                       pageEl: initialPage.el
@@ -313,10 +277,8 @@ export default {
             });
           } else {
             f7View.init(elRef.value);
-
             if (initialPage) {
               initialPage.el = f7View.router.currentPageEl;
-
               if (initialRoute && initialRoute.route && initialRoute.route.keepAlive) {
                 initialRoute.route.keepAliveData = {
                   pageEl: initialPage.el
@@ -331,11 +293,9 @@ export default {
             routerId,
             pages: pages.value,
             instance: f7View,
-
             setPages(newPages) {
               setPages([...newPages]);
             }
-
           };
           f7routers.views.push(routerData);
           routerData.instance = f7.views.create(elRef.value, {
@@ -347,7 +307,6 @@ export default {
           });
           f7View = routerData.instance;
         }
-
         if (!props.init) return;
         f7View.on('resize', onResize);
         f7View.on('swipebackMove', onSwipeBackMove);
@@ -368,7 +327,6 @@ export default {
         if (f7View.destroy) f7View.destroy();
         f7View = null;
       }
-
       f7routers.views.splice(f7routers.views.indexOf(routerData), 1);
       routerData = null;
     });
@@ -382,9 +340,7 @@ export default {
       'tab-active': props.tabActive,
       tab: props.tab
     }, colorClasses(props)));
-
     const getComponent = page => toRaw(page.component);
-
     const getProps = page => {
       const {
         component: pageComponent,
@@ -398,7 +354,6 @@ export default {
       });
       return passProps;
     };
-
     return () => {
       return h('div', {
         ref: elRef,
@@ -409,5 +364,4 @@ export default {
       }))]);
     };
   }
-
 };

package/components/views.js

@@ -1,11 +1,9 @@
 import { renderSlot as _renderSlot, normalizeClass as _normalizeClass, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
-
 function render(_ctx, _cache) {
   return _openBlock(), _createElementBlock("div", {
     class: _normalizeClass(_ctx.classes)
   }, [_renderSlot(_ctx.$slots, "default")], 2);
 }
-
 import { computed } from 'vue';
 import { classNames } from '../shared/utils.js';
 import { colorClasses, colorProps } from '../shared/mixins.js';
@@ -16,7 +14,6 @@ export default {
     tabs: Boolean,
     ...colorProps
   },
-
   setup(props) {
     const classes = computed(() => classNames('views', {
       tabs: props.tabs
@@ -25,5 +22,4 @@ export default {
       classes
     };
   }
-
 };