framework7-vue 6.3.15 → 7.0.0-beta.11

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

@@ -1,28 +1,34 @@
-import { isStringProp } from './utils';
+import { isStringProp } from './utils.js';
 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 = {
+import componentsRouter from './components-router.js';
+import { f7, f7ready, theme, f7initEvents, setTheme } from './f7.js';
+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.js';
+import View from '../components/view.js';
+import LoginScreen from '../components/login-screen.js';
+import Sheet from '../components/sheet.js';
+import Popover from '../components/popover.js';
+import Panel from '../components/panel.js';
+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 () {
+import { f7ready, f7 } from './f7.js';
+import { extend } from './utils.js';
+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.js';
+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) {
+import { f7, f7ready } from './f7.js';
+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);

package/shared/use-theme.js

@@ -0,0 +1,13 @@
+import { ref } from 'vue';
+import { f7, f7ready, theme } from './f7.js';
+export const useTheme = () => {
+  const t = ref(f7 ? theme : null);
+
+  if (!f7) {
+    f7ready(() => {
+      t.value = theme;
+    });
+  }
+
+  return t;
+};

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

@@ -1,13 +1,15 @@
 import { watch, onMounted, onBeforeUnmount } from 'vue';
-import { f7, f7ready } from './f7';
-export var useTooltip = function useTooltip(elRef, props) {
-  var f7Tooltip = null;
-  var tooltip = props.tooltip,
-      tooltipTrigger = props.tooltipTrigger;
-  onMounted(function () {
+import { f7, f7ready } from './f7.js';
+export const useTooltip = (elRef, props) => {
+  let f7Tooltip = null;
+  const {
+    tooltip,
+    tooltipTrigger
+  } = props;
+  onMounted(() => {
     if (!elRef.value) return;
     if (!tooltip) return;
-    f7ready(function () {
+    f7ready(() => {
       f7Tooltip = f7.tooltip.create({
         targetEl: elRef.value,
         text: tooltip,
@@ -15,15 +17,13 @@ export var useTooltip = function useTooltip(elRef, props) {
       });
     });
   });
-  onBeforeUnmount(function () {
+  onBeforeUnmount(() => {
     if (f7Tooltip && f7Tooltip.destroy) {
       f7Tooltip.destroy();
       f7Tooltip = null;
     }
   });
-  watch(function () {
-    return props.tooltip;
-  }, function (value) {
+  watch(() => props.tooltip, value => {
     if (!value && f7Tooltip) {
       f7Tooltip.destroy();
       f7Tooltip = null;