framework7-vue 6.3.16 → 7.0.0-beta.12

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

@@ -1,25 +1,23 @@
-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 { createVNode as _createVNode, renderSlot as _renderSlot, resolveComponent as _resolveComponent, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode } from "vue";
 
-var _hoisted_1 = /*#__PURE__*/_createVNode("div", {
+const _hoisted_1 = /*#__PURE__*/_createVNode("div", {
   class: "navbar-bg"
 }, null, -1);
 
-var _hoisted_2 = {
+const _hoisted_2 = {
   key: 3,
   className: "title-large"
 };
-var _hoisted_3 = {
+const _hoisted_3 = {
   className: "title-large-text"
 };
 
 function render(_ctx, _cache) {
-  var _component_f7_nav_left = _resolveComponent("f7-nav-left");
+  const _component_f7_nav_left = _resolveComponent("f7-nav-left");
 
-  var _component_f7_nav_title = _resolveComponent("f7-nav-title");
+  const _component_f7_nav_title = _resolveComponent("f7-nav-title");
 
-  var _component_f7_nav_right = _resolveComponent("f7-nav-right");
+  const _component_f7_nav_right = _resolveComponent("f7-nav-right");
 
   return _openBlock(), _createBlock("div", {
     ref: "elRef",
@@ -34,46 +32,40 @@ function render(_ctx, _cache) {
     "back-link-show-text": _ctx.backLinkShowText,
     "onBack:click": _ctx.onBackClick
   }, {
-    default: _withCtx(function () {
-      return [_renderSlot(_ctx.$slots, "nav-left"), _renderSlot(_ctx.$slots, "left")];
-    }),
+    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(function () {
-      return [_renderSlot(_ctx.$slots, "title")];
-    }),
+    default: _withCtx(() => [_renderSlot(_ctx.$slots, "title")]),
     _: 3
   }, 8, ["title", "subtitle"])) : _createCommentVNode("", true), _ctx.hasRight ? (_openBlock(), _createBlock(_component_f7_nav_right, {
     key: 2
   }, {
-    default: _withCtx(function () {
-      return [_renderSlot(_ctx.$slots, "nav-right"), _renderSlot(_ctx.$slots, "right")];
-    }),
+    default: _withCtx(() => [_renderSlot(_ctx.$slots, "nav-right"), _renderSlot(_ctx.$slots, "right")]),
     _: 3
   })) : _createCommentVNode("", true), _ctx.hasLargeTitle ? (_openBlock(), _createBlock("div", _hoisted_2, [_createVNode("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';
-import { colorClasses, colorProps } from '../shared/mixins';
-import { f7ready, f7 } from '../shared/f7';
-import { useTheme } from '../shared/use-theme';
-import f7NavLeft from './nav-left';
-import f7NavTitle from './nav-title';
-import f7NavRight from './nav-right';
+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',
-  render: render,
+  render,
   components: {
-    f7NavLeft: f7NavLeft,
-    f7NavTitle: f7NavTitle,
-    f7NavRight: f7NavRight
+    f7NavLeft,
+    f7NavTitle,
+    f7NavRight
   },
-  props: _extends({
+  props: {
     backLink: [Boolean, String],
     backLinkUrl: String,
     backLinkForce: Boolean,
@@ -95,99 +87,102 @@ export default {
     large: Boolean,
     largeTransparent: Boolean,
     transparent: Boolean,
-    titleLarge: String
-  }, colorProps),
+    titleLarge: String,
+    ...colorProps
+  },
   emits: ['navbar:hide', 'navbar:show', 'navbar:expand', 'navbar:collapse', 'navbar:transparentshow', 'navbar:transparenthide', 'click:back', 'back:click'],
-  setup: function setup(props, _ref) {
-    var emit = _ref.emit,
-        slots = _ref.slots;
-    var routerPositionClass = '';
-    var largeCollapsed = false;
-    var routerNavbarRole = null;
-    var routerNavbarRoleDetailRoot = false;
-    var routerNavbarMasterStack = false;
-    var transparentVisible = false;
-    var elRef = ref(null);
-    var theme = useTheme();
 
-    var onHide = function onHide(navbarEl) {
+  setup(props, {
+    emit,
+    slots
+  }) {
+    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:hide');
     };
 
-    var onShow = function onShow(navbarEl) {
+    const onShow = navbarEl => {
       if (elRef.value !== navbarEl) return;
       emit('navbar:show');
     };
 
-    var onExpand = function onExpand(navbarEl) {
+    const onExpand = navbarEl => {
       if (elRef.value !== navbarEl) return;
       largeCollapsed = false;
       emit('navbar:expand');
     };
 
-    var onCollapse = function onCollapse(navbarEl) {
+    const onCollapse = navbarEl => {
       if (elRef.value !== navbarEl) return;
       largeCollapsed = true;
       emit('navbar:collapse');
     };
 
-    var onNavbarTransparentShow = function onNavbarTransparentShow(navbarEl) {
+    const onNavbarTransparentShow = navbarEl => {
       if (elRef.value !== navbarEl) return;
       transparentVisible = true;
       emit('navbar:transparentshow');
     };
 
-    var onNavbarTransparentHide = function onNavbarTransparentHide(navbarEl) {
+    const onNavbarTransparentHide = navbarEl => {
       if (elRef.value !== navbarEl) return;
       transparentVisible = false;
       emit('navbar:transparenthide');
     };
 
-    var onNavbarPosition = function onNavbarPosition(navbarEl, position) {
+    const onNavbarPosition = (navbarEl, position) => {
       if (elRef.value !== navbarEl) return;
-      routerPositionClass = position ? "navbar-" + position : '';
+      routerPositionClass = position ? `navbar-${position}` : '';
     };
 
-    var onNavbarRole = function onNavbarRole(navbarEl, rolesData) {
+    const onNavbarRole = (navbarEl, rolesData) => {
       if (elRef.value !== navbarEl) return;
       routerNavbarRole = rolesData.role;
       routerNavbarRoleDetailRoot = rolesData.detailRoot;
     };
 
-    var onNavbarMasterStack = function onNavbarMasterStack(navbarEl) {
+    const onNavbarMasterStack = navbarEl => {
       if (elRef.value !== navbarEl) return;
       routerNavbarMasterStack = true;
     };
 
-    var onNavbarMasterUnstack = function onNavbarMasterUnstack(navbarEl) {
+    const onNavbarMasterUnstack = navbarEl => {
       if (elRef.value !== navbarEl) return;
       routerNavbarMasterStack = false;
     };
 
-    var hide = function hide(animate) {
+    const hide = animate => {
       if (!f7) return;
       f7.navbar.hide(elRef.value, animate);
     };
 
-    var show = function show(animate) {
+    const show = animate => {
       if (!f7) return;
       f7.navbar.show(elRef.value, animate);
     };
 
-    var size = function size() {
+    const size = () => {
       if (!f7) return;
       f7.navbar.size(elRef.value);
     };
 
-    var onBackClick = function onBackClick(event) {
+    const onBackClick = event => {
       emit('back:click', event);
       emit('click:back', event);
     };
 
-    onMounted(function () {
+    onMounted(() => {
       if (!elRef.value) return;
-      f7ready(function () {
+      f7ready(() => {
         f7.navbar.size(elRef.value);
         f7.on('navbarShow', onShow);
         f7.on('navbarHide', onHide);
@@ -201,7 +196,7 @@ export default {
         f7.on('navbarTransparentHide', onNavbarTransparentHide);
       });
     });
-    onBeforeUnmount(function () {
+    onBeforeUnmount(() => {
       if (!f7) return;
       f7.off('navbarShow', onShow);
       f7.off('navbarHide', onHide);
@@ -214,54 +209,42 @@ export default {
       f7.off('navbarTransparentShow', onNavbarTransparentShow);
       f7.off('navbarTransparentHide', onNavbarTransparentHide);
     });
-    var addLeftTitleClass = computed(function () {
-      return theme.value && theme.value.ios && f7 && !f7.params.navbar.iosCenterTitle;
-    });
-    var addCenterTitleClass = computed(function () {
-      return theme.value && theme.value.md && f7 && f7.params.navbar.mdCenterTitle || theme.value && theme.value.aurora && f7 && f7.params.navbar.auroraCenterTitle;
-    });
-    var isLarge = computed(function () {
-      return props.large || props.largeTransparent;
-    });
-    var isTransparent = computed(function () {
-      return props.transparent || isLarge.value && props.largeTransparent;
-    });
-    var isTransparentVisible = computed(function () {
-      return isTransparent.value && transparentVisible;
-    });
-    var classes = computed(function () {
-      return classNames('navbar', routerPositionClass, {
-        'navbar-hidden': props.hidden,
-        'navbar-large': isLarge.value,
-        'navbar-large-collapsed': isLarge.value && largeCollapsed,
-        'navbar-transparent': isTransparent.value,
-        'navbar-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-shadow': props.noShadow,
-        'no-hairline': props.noHairline
-      }, colorClasses(props));
-    });
-    var largeTitle = computed(function () {
-      var largeTitleText = props.titleLarge;
+    const addLeftTitleClass = computed(() => theme.value && theme.value.ios && f7 && !f7.params.navbar.iosCenterTitle);
+    const addCenterTitleClass = computed(() => theme.value && theme.value.md && f7 && f7.params.navbar.mdCenterTitle || theme.value && theme.value.aurora && f7 && f7.params.navbar.auroraCenterTitle);
+    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', routerPositionClass, {
+      'navbar-hidden': props.hidden,
+      'navbar-large': isLarge.value,
+      'navbar-large-collapsed': isLarge.value && largeCollapsed,
+      'navbar-transparent': isTransparent.value,
+      'navbar-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-shadow': props.noShadow,
+      'no-hairline': props.noHairline
+    }, colorClasses(props)));
+    const largeTitle = computed(() => {
+      let largeTitleText = props.titleLarge;
       if (!largeTitleText && props.large && props.title) largeTitleText = props.title;
       return largeTitleText;
     });
-    var hasLeft = computed(function () {
+    const hasLeft = computed(() => {
       return props.backLink || slots['nav-left'] || slots.left;
     });
-    var hasTitle = computed(function () {
+    const hasTitle = computed(() => {
       return props.title || props.subtitle || slots.title;
     });
-    var hasRight = computed(function () {
+    const hasRight = computed(() => {
       return slots['nav-right'] || slots.right;
     });
-    var hasLargeTitle = computed(function () {
+    const hasLargeTitle = computed(() => {
       return largeTitle.value || slots['title-large'];
     });
-    var innerClasses = computed(function () {
+    const innerClasses = computed(() => {
       return classNames('navbar-inner', props.innerClass, props.innerClassName, {
         sliding: props.sliding,
         'navbar-inner-left-title': addLeftTitleClass.value,
@@ -269,18 +252,19 @@ export default {
       });
     });
     return {
-      elRef: elRef,
-      classes: classes,
-      innerClasses: innerClasses,
-      hide: hide,
-      show: show,
-      size: size,
-      largeTitle: largeTitle,
-      hasLeft: hasLeft,
-      hasTitle: hasTitle,
-      hasRight: hasRight,
-      hasLargeTitle: hasLargeTitle,
-      onBackClick: onBackClick
+      elRef,
+      classes,
+      innerClasses,
+      hide,
+      show,
+      size,
+      largeTitle,
+      hasLeft,
+      hasTitle,
+      hasRight,
+      hasLargeTitle,
+      onBackClick
     };
   }
+
 };

package/{esm/components → components}/page-content.js

@@ -1,26 +1,24 @@
-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 { resolveComponent as _resolveComponent, createVNode as _createVNode, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, renderSlot as _renderSlot } from "vue";
-var _hoisted_1 = {
+const _hoisted_1 = {
   key: 0,
   class: "ptr-preloader"
 };
 
-var _hoisted_2 = /*#__PURE__*/_createVNode("div", {
+const _hoisted_2 = /*#__PURE__*/_createVNode("div", {
   class: "ptr-arrow"
 }, null, -1);
 
-var _hoisted_3 = {
+const _hoisted_3 = {
   key: 3,
   class: "ptr-preloader"
 };
 
-var _hoisted_4 = /*#__PURE__*/_createVNode("div", {
+const _hoisted_4 = /*#__PURE__*/_createVNode("div", {
   class: "ptr-arrow"
 }, null, -1);
 
 function render(_ctx, _cache) {
-  var _component_f7_preloader = _resolveComponent("f7-preloader");
+  const _component_f7_preloader = _resolveComponent("f7-preloader");
 
   return _openBlock(), _createBlock("div", {
     ref: "elRef",
@@ -38,18 +36,18 @@ function render(_ctx, _cache) {
 }
 
 import { computed, ref, onMounted, onBeforeUnmount } from 'vue';
-import { classNames } from '../shared/utils';
-import { colorClasses, colorProps } from '../shared/mixins';
-import f7Preloader from './preloader';
-import { useTab } from '../shared/use-tab';
-import { f7ready, f7 } from '../shared/f7';
+import { classNames } from '../shared/utils.js';
+import { colorClasses, colorProps } from '../shared/mixins.js';
+import f7Preloader from './preloader.js';
+import { useTab } from '../shared/use-tab.js';
+import { f7ready, f7 } from '../shared/f7.js';
 export default {
   name: 'f7-page-content',
-  render: render,
+  render,
   components: {
-    f7Preloader: f7Preloader
+    f7Preloader
   },
-  props: _extends({
+  props: {
     tab: Boolean,
     tabActive: Boolean,
     ptr: Boolean,
@@ -71,51 +69,54 @@ export default {
     hideNavbarOnScroll: Boolean,
     hideToolbarOnScroll: Boolean,
     messagesContent: Boolean,
-    loginScreen: Boolean
-  }, colorProps),
+    loginScreen: Boolean,
+    ...colorProps
+  },
   emits: ['ptr:pullstart', 'ptr:pullmove', 'ptr:pullend', 'ptr:refresh', 'ptr:done', 'infinite', 'ptrPullStart', 'ptrPullMove', 'ptrPullEnd', 'ptrRefresh', 'ptrDone', 'tab:hide', 'tab:show'],
-  setup: function setup(props, _ref) {
-    var emit = _ref.emit;
-    var elRef = ref(null);
 
-    var onPtrPullStart = function onPtrPullStart(el) {
+  setup(props, {
+    emit
+  }) {
+    const elRef = ref(null);
+
+    const onPtrPullStart = el => {
       if (elRef.value !== el) return;
       emit('ptr:pullstart');
       emit('ptrPullStart');
     };
 
-    var onPtrPullMove = function onPtrPullMove(el) {
+    const onPtrPullMove = el => {
       if (elRef.value !== el) return;
       emit('ptr:pullmove');
       emit('ptrPullMove');
     };
 
-    var onPtrPullEnd = function onPtrPullEnd(el) {
+    const onPtrPullEnd = el => {
       if (elRef.value !== el) return;
       emit('ptr:pullend');
       emit('ptrPullEnd');
     };
 
-    var onPtrRefresh = function onPtrRefresh(el, done) {
+    const onPtrRefresh = (el, done) => {
       if (elRef.value !== el) return;
       emit('ptr:refresh', done);
       emit('ptrRefresh', done);
     };
 
-    var onPtrDone = function onPtrDone(el) {
+    const onPtrDone = el => {
       if (elRef.value !== el) return;
       emit('ptr:done');
       emit('ptrDone');
     };
 
-    var onInfinite = function onInfinite(el) {
+    const onInfinite = el => {
       if (elRef.value !== el) return;
       emit('infinite');
     };
 
     useTab(elRef, emit);
-    onMounted(function () {
-      f7ready(function () {
+    onMounted(() => {
+      f7ready(() => {
         if (props.ptr) {
           f7.on('ptrPullStart', onPtrPullStart);
           f7.on('ptrPullMove', onPtrPullMove);
@@ -129,7 +130,7 @@ export default {
         }
       });
     });
-    onBeforeUnmount(function () {
+    onBeforeUnmount(() => {
       if (!f7) return;
       f7.off('ptrPullStart', onPtrPullStart);
       f7.off('ptrPullMove', onPtrPullMove);
@@ -138,24 +139,23 @@ export default {
       f7.off('ptrDone', onPtrDone);
       f7.off('infinite', onInfinite);
     });
-    var classes = computed(function () {
-      return classNames('page-content', {
-        tab: props.tab,
-        'tab-active': props.tabActive,
-        'ptr-content': props.ptr,
-        'ptr-bottom': props.ptrBottom,
-        'infinite-scroll-content': props.infinite,
-        'infinite-scroll-top': props.infiniteTop,
-        'hide-bars-on-scroll': props.hideBarsOnScroll,
-        'hide-navbar-on-scroll': props.hideNavbarOnScroll,
-        'hide-toolbar-on-scroll': props.hideToolbarOnScroll,
-        'messages-content': props.messagesContent,
-        'login-screen-content': props.loginScreen
-      }, colorClasses(props));
-    });
+    const classes = computed(() => classNames('page-content', {
+      tab: props.tab,
+      'tab-active': props.tabActive,
+      'ptr-content': props.ptr,
+      'ptr-bottom': props.ptrBottom,
+      'infinite-scroll-content': props.infinite,
+      'infinite-scroll-top': props.infiniteTop,
+      'hide-bars-on-scroll': props.hideBarsOnScroll,
+      'hide-navbar-on-scroll': props.hideNavbarOnScroll,
+      'hide-toolbar-on-scroll': props.hideToolbarOnScroll,
+      'messages-content': props.messagesContent,
+      'login-screen-content': props.loginScreen
+    }, colorClasses(props)));
     return {
-      elRef: elRef,
-      classes: classes
+      elRef,
+      classes
     };
   }
+
 };