framework7-vue 6.3.4 → 7.0.0-beta.3

package/{esm/shared → shared}/f7.js

@@ -1,23 +1,23 @@
 /* eslint-disable import/no-mutable-exports */
 import Framework7 from 'framework7/lite';
 import { extend, unsetRouterIds } from './utils';
-var f7;
-var f7events;
-var theme = {};
-var f7routers = {
+let f7;
+let f7events;
+const theme = {};
+const f7routers = {
   views: [],
   tabs: [],
   modals: null
 };
 
-var setTheme = function setTheme() {
+const setTheme = () => {
   if (!f7) return;
   theme.ios = f7.theme === 'ios';
   theme.md = f7.theme === 'md';
   theme.aurora = f7.theme === 'aurora';
 };
 
-var cleanup = function cleanup() {
+const cleanup = () => {
   unsetRouterIds();
   delete theme.ios;
   delete theme.md;
@@ -27,28 +27,20 @@ var cleanup = function cleanup() {
   f7routers.modals = null;
 };
 
-var f7initEvents = function f7initEvents() {
+const f7initEvents = () => {
   f7events = new Framework7.Events();
 };
 
-var f7init = function f7init(rootEl, params, init) {
-  if (params === void 0) {
-    params = {};
-  }
-
-  if (init === void 0) {
-    init = true;
-  }
-
-  var f7Params = extend({}, params, {
+const f7init = (rootEl, params = {}, init = true) => {
+  const f7Params = extend({}, params, {
     el: rootEl,
-    init: init
+    init
   });
   if (typeof params.store !== 'undefined') f7Params.store = params.store;
   if (!f7Params.routes) f7Params.routes = [];
 
   if (f7Params.userAgent && (f7Params.theme === 'auto' || !f7Params.theme)) {
-    var device = Framework7.getDevice({
+    const device = Framework7.getDevice({
       userAgent: f7Params.userAgent
     }, true);
     theme.ios = !!device.ios;
@@ -60,7 +52,7 @@ var f7init = function f7init(rootEl, params, init) {
   if (f7 && typeof window !== 'undefined') return; // eslint-disable-next-line
 
   if (typeof window === 'undefined') cleanup();
-  var instance = new Framework7(f7Params);
+  const instance = new Framework7(f7Params);
   f7 = instance;
   setTheme();
 
@@ -68,14 +60,14 @@ var f7init = function f7init(rootEl, params, init) {
     f7 = instance;
     f7events.emit('ready', f7);
   } else {
-    instance.on('init', function () {
+    instance.on('init', () => {
       f7 = instance;
       f7events.emit('ready', f7);
     });
   }
 };
 
-var f7ready = function f7ready(callback) {
+const f7ready = callback => {
   if (!callback) return;
   if (f7 && f7.initialized) callback(f7);else {
     f7events.once('ready', callback);

package/shared/get-router-initial-component.js

@@ -0,0 +1,39 @@
+import { getComponentId } from './utils';
+export const getRouterInitialComponent = (router, initialComponent) => {
+  let initialComponentData;
+  const {
+    initialUrl
+  } = router.getInitialUrl();
+  const initialRoute = router.findMatchingRoute(initialUrl);
+  let routeProps = {};
+
+  if (initialRoute && initialRoute.route && initialRoute.route.options) {
+    routeProps = initialRoute.route.options.props;
+  }
+
+  const isMasterRoute = route => {
+    if (route.master === true) return true;
+    if (typeof route.master === 'function') return route.master(router.app);
+    return false;
+  };
+
+  if (initialRoute && initialRoute.route && (initialRoute.route.component || initialRoute.route.asyncComponent) && !isMasterRoute(initialRoute.route)) {
+    initialComponentData = {
+      component: initialRoute.route.component || initialRoute.route.asyncComponent,
+      initialComponent,
+      id: getComponentId(),
+      isAsync: !!initialRoute.route.asyncComponent,
+      props: {
+        f7route: initialRoute,
+        f7router: router,
+        ...routeProps,
+        ...initialRoute.params
+      }
+    };
+  }
+
+  return {
+    initialPage: initialComponentData,
+    initialRoute
+  };
+};

package/{esm/shared → shared}/mixins.js

@@ -1,28 +1,34 @@
 import { isStringProp } from './utils';
 export function colorClasses(props) {
-  var _ref;
-
-  var color = props.color,
-      colorTheme = props.colorTheme,
-      textColor = props.textColor,
-      bgColor = props.bgColor,
-      borderColor = props.borderColor,
-      rippleColor = props.rippleColor,
-      themeDark = props.themeDark;
-  return _ref = {
-    'theme-dark': themeDark
-  }, _ref["color-" + color] = color, _ref["color-theme-" + colorTheme] = colorTheme, _ref["text-color-" + textColor] = textColor, _ref["bg-color-" + bgColor] = bgColor, _ref["border-color-" + borderColor] = borderColor, _ref["ripple-color-" + rippleColor] = rippleColor, _ref;
+  const {
+    color,
+    colorTheme,
+    textColor,
+    bgColor,
+    borderColor,
+    rippleColor,
+    dark
+  } = props;
+  return {
+    dark,
+    [`color-${color}`]: color,
+    [`color-theme-${colorTheme}`]: colorTheme,
+    [`text-color-${textColor}`]: textColor,
+    [`bg-color-${bgColor}`]: bgColor,
+    [`border-color-${borderColor}`]: borderColor,
+    [`ripple-color-${rippleColor}`]: rippleColor
+  };
 }
-export var colorProps = {
+export const colorProps = {
   color: String,
   colorTheme: String,
   textColor: String,
   bgColor: String,
   borderColor: String,
   rippleColor: String,
-  themeDark: Boolean
+  dark: Boolean
 };
-export var iconProps = {
+export const iconProps = {
   icon: String,
   iconMaterial: String,
   iconF7: String,
@@ -34,7 +40,7 @@ export var iconProps = {
   iconBadge: [String, Number],
   iconBadgeColor: String
 };
-export var routerProps = {
+export const routerProps = {
   back: Boolean,
   external: Boolean,
   force: Boolean,
@@ -58,24 +64,26 @@ export var routerProps = {
   openIn: String
 };
 export function routerAttrs(props) {
-  var force = props.force,
-      reloadCurrent = props.reloadCurrent,
-      reloadPrevious = props.reloadPrevious,
-      reloadAll = props.reloadAll,
-      reloadDetail = props.reloadDetail,
-      animate = props.animate,
-      ignoreCache = props.ignoreCache,
-      routeTabId = props.routeTabId,
-      view = props.view,
-      transition = props.transition,
-      openIn = props.openIn;
-  var dataAnimate;
+  const {
+    force,
+    reloadCurrent,
+    reloadPrevious,
+    reloadAll,
+    reloadDetail,
+    animate,
+    ignoreCache,
+    routeTabId,
+    view,
+    transition,
+    openIn
+  } = props;
+  let dataAnimate;
 
   if ('animate' in props && typeof animate !== 'undefined') {
     dataAnimate = animate.toString();
   }
 
-  var dataReloadDetail;
+  let dataReloadDetail;
 
   if ('reloadDetail' in props && typeof reloadDetail !== 'undefined') {
     dataReloadDetail = reloadDetail.toString();
@@ -96,17 +104,19 @@ export function routerAttrs(props) {
   };
 }
 export function routerClasses(props) {
-  var back = props.back,
-      linkBack = props.linkBack,
-      external = props.external,
-      preventRouter = props.preventRouter;
+  const {
+    back,
+    linkBack,
+    external,
+    preventRouter
+  } = props;
   return {
     back: back || linkBack,
-    external: external,
+    external,
     'prevent-router': preventRouter
   };
 }
-export var actionsProps = {
+export const actionsProps = {
   searchbarEnable: [Boolean, String],
   searchbarDisable: [Boolean, String],
   searchbarClear: [Boolean, String],
@@ -145,28 +155,30 @@ export var actionsProps = {
   }
 };
 export function actionsAttrs(props) {
-  var searchbarEnable = props.searchbarEnable,
-      searchbarDisable = props.searchbarDisable,
-      searchbarClear = props.searchbarClear,
-      searchbarToggle = props.searchbarToggle,
-      panelOpen = props.panelOpen,
-      panelClose = props.panelClose,
-      panelToggle = props.panelToggle,
-      popupOpen = props.popupOpen,
-      popupClose = props.popupClose,
-      actionsOpen = props.actionsOpen,
-      actionsClose = props.actionsClose,
-      popoverOpen = props.popoverOpen,
-      popoverClose = props.popoverClose,
-      loginScreenOpen = props.loginScreenOpen,
-      loginScreenClose = props.loginScreenClose,
-      sheetOpen = props.sheetOpen,
-      sheetClose = props.sheetClose,
-      sortableEnable = props.sortableEnable,
-      sortableDisable = props.sortableDisable,
-      sortableToggle = props.sortableToggle,
-      cardOpen = props.cardOpen,
-      cardClose = props.cardClose;
+  const {
+    searchbarEnable,
+    searchbarDisable,
+    searchbarClear,
+    searchbarToggle,
+    panelOpen,
+    panelClose,
+    panelToggle,
+    popupOpen,
+    popupClose,
+    actionsOpen,
+    actionsClose,
+    popoverOpen,
+    popoverClose,
+    loginScreenOpen,
+    loginScreenClose,
+    sheetOpen,
+    sheetClose,
+    sortableEnable,
+    sortableDisable,
+    sortableToggle,
+    cardOpen,
+    cardClose
+  } = props;
   return {
     'data-searchbar': isStringProp(searchbarEnable) && searchbarEnable || isStringProp(searchbarDisable) && searchbarDisable || isStringProp(searchbarClear) && searchbarClear || isStringProp(searchbarToggle) && searchbarToggle || undefined,
     'data-panel': isStringProp(panelOpen) && panelOpen || isStringProp(panelClose) && panelClose || isStringProp(panelToggle) && panelToggle || undefined,
@@ -180,30 +192,32 @@ export function actionsAttrs(props) {
   };
 }
 export function actionsClasses(props) {
-  var searchbarEnable = props.searchbarEnable,
-      searchbarDisable = props.searchbarDisable,
-      searchbarClear = props.searchbarClear,
-      searchbarToggle = props.searchbarToggle,
-      panelOpen = props.panelOpen,
-      panelClose = props.panelClose,
-      panelToggle = props.panelToggle,
-      popupOpen = props.popupOpen,
-      popupClose = props.popupClose,
-      actionsClose = props.actionsClose,
-      actionsOpen = props.actionsOpen,
-      popoverOpen = props.popoverOpen,
-      popoverClose = props.popoverClose,
-      loginScreenOpen = props.loginScreenOpen,
-      loginScreenClose = props.loginScreenClose,
-      sheetOpen = props.sheetOpen,
-      sheetClose = props.sheetClose,
-      sortableEnable = props.sortableEnable,
-      sortableDisable = props.sortableDisable,
-      sortableToggle = props.sortableToggle,
-      cardOpen = props.cardOpen,
-      cardPreventOpen = props.cardPreventOpen,
-      cardClose = props.cardClose,
-      menuClose = props.menuClose;
+  const {
+    searchbarEnable,
+    searchbarDisable,
+    searchbarClear,
+    searchbarToggle,
+    panelOpen,
+    panelClose,
+    panelToggle,
+    popupOpen,
+    popupClose,
+    actionsClose,
+    actionsOpen,
+    popoverOpen,
+    popoverClose,
+    loginScreenOpen,
+    loginScreenClose,
+    sheetOpen,
+    sheetClose,
+    sortableEnable,
+    sortableDisable,
+    sortableToggle,
+    cardOpen,
+    cardPreventOpen,
+    cardClose,
+    menuClose
+  } = props;
   return {
     'searchbar-enable': searchbarEnable || searchbarEnable === '',
     'searchbar-disable': searchbarDisable || searchbarDisable === '',

package/shared/modal-state-classes.js

@@ -0,0 +1,9 @@
+export const modalStateClasses = ({
+  isOpened,
+  isClosing
+} = {}) => {
+  return {
+    'modal-in': isOpened && !isClosing,
+    'modal-out': isClosing
+  };
+};

package/{esm/shared → shared}/plugin.js

@@ -1,40 +1,39 @@
 import Framework7 from 'framework7/lite';
 import componentsRouter from './components-router';
 import { f7, f7ready, theme, f7initEvents, setTheme } from './f7';
-var Framework7Vue = {
+const Framework7Vue = {
   name: 'vuePlugin',
   installed: false,
-  install: function install(params) {
-    if (params === void 0) {
-      params = {};
-    }
 
+  install(params = {}) {
     if (Framework7Vue.installed) return;
     Framework7Vue.installed = true;
     f7initEvents();
-    var _params = params,
-        paramsTheme = _params.theme,
-        userAgent = _params.userAgent;
+    const {
+      theme: paramsTheme,
+      userAgent
+    } = params;
     if (paramsTheme === 'md') theme.md = true;
     if (paramsTheme === 'ios') theme.ios = true;
     if (paramsTheme === 'aurora') theme.aurora = true; // eslint-disable-next-line
 
-    var needThemeCalc = typeof window === 'undefined' ? !!userAgent : true;
+    const needThemeCalc = typeof window === 'undefined' ? !!userAgent : true;
 
     if (needThemeCalc && (!paramsTheme || paramsTheme === 'auto')) {
-      var device = Framework7.getDevice({
-        userAgent: userAgent
+      const device = Framework7.getDevice({
+        userAgent
       }, true);
       theme.ios = !!device.ios;
       theme.aurora = device.desktop && device.electron;
       theme.md = !theme.ios && !theme.aurora;
     }
 
-    f7ready(function () {
+    f7ready(() => {
       setTheme();
     });
     Framework7.Router.use(componentsRouter);
   }
+
 };
 export { f7ready, f7, theme };
 export default Framework7Vue;

package/shared/router-open-in.js

@@ -0,0 +1,114 @@
+import { h } from 'vue';
+import Popup from '../components/popup';
+import View from '../components/view';
+import LoginScreen from '../components/login-screen';
+import Sheet from '../components/sheet';
+import Popover from '../components/popover';
+import Panel from '../components/panel';
+export const routerOpenIn = (router, url, options) => {
+  const navigateOptions = {
+    url,
+    route: {
+      path: url,
+      options: { ...options,
+        openIn: undefined
+      }
+    }
+  };
+  const params = { ...options
+  };
+
+  if (options.openIn === 'popup') {
+    params.component = {
+      setup() {
+        return () => h(Popup, {
+          class: 'popup-router-open-in',
+          'data-url': url
+        }, [h(View, {
+          linksView: router.view.selector,
+          url,
+          ignoreOpenIn: true
+        })]);
+      }
+
+    };
+    navigateOptions.route.popup = params;
+  }
+
+  if (options.openIn === 'loginScreen') {
+    params.component = {
+      setup() {
+        return () => h(LoginScreen, {
+          class: 'login-screen-router-open-in',
+          'data-url': url
+        }, [h(View, {
+          linksView: router.view.selector,
+          url,
+          ignoreOpenIn: true
+        })]);
+      }
+
+    };
+    navigateOptions.route.loginScreen = params;
+  }
+
+  if (options.openIn === 'sheet') {
+    params.component = {
+      setup() {
+        return () => h(Sheet, {
+          class: 'sheet-modal-router-open-in',
+          'data-url': url
+        }, [h(View, {
+          linksView: router.view.selector,
+          url,
+          ignoreOpenIn: true
+        })]);
+      }
+
+    };
+    navigateOptions.route.sheet = params;
+  }
+
+  if (options.openIn === 'popover') {
+    params.targetEl = options.clickedEl || options.targetEl;
+    params.component = {
+      setup() {
+        return () => h(Popover, {
+          class: 'popover-router-open-in',
+          'data-url': url,
+          targetEl: options.clickedEl || options.targetEl
+        }, [h(View, {
+          linksView: router.view.selector,
+          url,
+          ignoreOpenIn: true
+        })]);
+      }
+
+    };
+    navigateOptions.route.popover = params;
+  }
+
+  if (options.openIn.indexOf('panel') >= 0) {
+    const parts = options.openIn.split(':');
+    const side = parts[1] || 'left';
+    const effect = parts[2] || 'cover';
+    params.component = {
+      setup() {
+        return () => h(Panel, {
+          class: 'panel-router-open-in',
+          'data-url': url,
+          side,
+          effect
+        }, [h(View, {
+          linksView: router.view.selector,
+          url,
+          ignoreOpenIn: true
+        })]);
+      }
+
+    };
+    navigateOptions.route.panel = params;
+  }
+
+  return router.navigate(navigateOptions);
+};

package/shared/use-icon.js

@@ -0,0 +1,38 @@
+export const useIcon = (props = {}) => {
+  const {
+    icon,
+    iconMaterial,
+    iconF7,
+    iconMd,
+    iconIos,
+    iconAurora,
+    iconColor,
+    iconSize,
+    iconBadge,
+    badgeColor,
+    iconBadgeColor
+  } = props;
+
+  if (icon || iconMaterial || iconF7 || iconMd || iconIos || iconAurora) {
+    return {
+      props: {
+        material: iconMaterial,
+        f7: iconF7,
+        icon,
+        md: iconMd,
+        ios: iconIos,
+        aurora: iconAurora,
+        color: iconColor,
+        size: iconSize
+      },
+      badge: iconBadge || iconBadge === 0 ? {
+        props: {
+          color: badgeColor || iconBadgeColor
+        },
+        content: iconBadge
+      } : null
+    };
+  }
+
+  return null;
+};

package/{esm/shared → shared}/use-route-props.js

@@ -1,14 +1,13 @@
 import { onMounted, onUpdated } from 'vue';
-export var useRouteProps = function useRouteProps(elRef, _temp) {
-  var _ref = _temp === void 0 ? {} : _temp,
-      routeProps = _ref.routeProps;
-
-  onMounted(function () {
+export const useRouteProps = (elRef, {
+  routeProps
+} = {}) => {
+  onMounted(() => {
     if (elRef.value && routeProps) {
       elRef.value.f7RouteProps = routeProps;
     }
   });
-  onUpdated(function () {
+  onUpdated(() => {
     if (elRef.value && routeProps) {
       elRef.value.f7RouteProps = routeProps;
     } else if (elRef.value && elRef.value.f7RouteProps) {

package/{esm/shared → shared}/use-smart-select.js

@@ -1,12 +1,12 @@
 import { onMounted, onBeforeUnmount } from 'vue';
 import { f7ready, f7 } from './f7';
 import { extend } from './utils';
-export var useSmartSelect = function useSmartSelect(props, setInstance, getEl) {
-  var f7SmartSelect;
-  onMounted(function () {
-    f7ready(function () {
+export const useSmartSelect = (props, setInstance, getEl) => {
+  let f7SmartSelect;
+  onMounted(() => {
+    f7ready(() => {
       if (props.smartSelect) {
-        var ssParams = extend({
+        const ssParams = extend({
           el: getEl()
         }, props.smartSelectParams || {});
         f7SmartSelect = f7.smartSelect.create(ssParams);
@@ -14,7 +14,7 @@ export var useSmartSelect = function useSmartSelect(props, setInstance, getEl) {
       }
     });
   });
-  onBeforeUnmount(function () {
+  onBeforeUnmount(() => {
     if (f7SmartSelect && f7SmartSelect.destroy) {
       f7SmartSelect.destroy();
     }

package/shared/use-store.js

@@ -0,0 +1,28 @@
+import { onBeforeUnmount, ref } from 'vue';
+import { f7 } from './f7';
+export const useStore = (...args) => {
+  // (store, getter)
+  let store = args[0];
+  let getter = args[1];
+
+  if (args.length === 1) {
+    // (getter)
+    store = f7.store;
+    getter = args[0];
+  } // eslint-disable-next-line
+
+
+  const obj = store._gettersPlain[getter];
+  const valueRef = ref(obj.value);
+
+  const callback = v => {
+    valueRef.value = v;
+  };
+
+  obj.onUpdated(callback);
+  onBeforeUnmount(() => {
+    // eslint-disable-next-line
+    store.__removeCallback(callback);
+  });
+  return valueRef;
+};

package/{esm/shared → shared}/use-tab.js

@@ -1,24 +1,24 @@
 import { onMounted, onBeforeUnmount } from 'vue';
 import { f7, f7ready } from './f7';
-export var useTab = function useTab(elRef, emit) {
-  var onTabShow = function onTabShow(el) {
+export const useTab = (elRef, emit) => {
+  const onTabShow = el => {
     if (elRef.value !== el) return;
     emit('tab:show', el);
   };
 
-  var onTabHide = function onTabHide(el) {
+  const onTabHide = el => {
     if (elRef.value !== el) return;
     emit('tab:hide', el);
   };
 
-  onMounted(function () {
+  onMounted(() => {
     if (!elRef.value) return;
-    f7ready(function () {
+    f7ready(() => {
       f7.on('tabShow', onTabShow);
       f7.on('tabHide', onTabHide);
     });
   });
-  onBeforeUnmount(function () {
+  onBeforeUnmount(() => {
     if (!f7) return;
     f7.off('tabShow', onTabShow);
     f7.off('tabHide', onTabHide);