framework7-vue 7.0.0-beta.2 → 7.0.0-beta.3

package/components/app.d.ts

@@ -39,7 +39,7 @@ declare const App: DefineComponent<
       default: () => [];
     },
 
-    autoDarkTheme: {
+    autoDarkMode: {
       type: any;
       default: undefined;
     },

package/components/app.js

@@ -48,7 +48,7 @@ export default {
       default: () => []
     },
     store: Object,
-    autoDarkTheme: {
+    autoDarkMode: {
       type: Boolean,
       default: undefined
     },

package/framework7-vue-bundle.js

@@ -1,5 +1,5 @@
 /**
- * Framework7 Vue 7.0.0-beta.2
+ * Framework7 Vue 7.0.0-beta.3
  * Build full featured iOS & Android apps using Framework7 & Vue
  * https://framework7.io/vue/
  *
@@ -7,7 +7,7 @@
  *
  * Released under the MIT License
  *
- * Released on: October 4, 2021
+ * Released on: October 5, 2021
  */
 import Framework7Vue from './shared/plugin';
 import { f7, f7ready, theme } from './shared/f7';

package/framework7-vue.js

@@ -1,5 +1,5 @@
 /**
- * Framework7 Vue 7.0.0-beta.2
+ * Framework7 Vue 7.0.0-beta.3
  * Build full featured iOS & Android apps using Framework7 & Vue
  * https://framework7.io/vue/
  *
@@ -7,7 +7,7 @@
  *
  * Released under the MIT License
  *
- * Released on: October 4, 2021
+ * Released on: October 5, 2021
  */
 import Framework7Vue from './shared/plugin';
 import { f7, f7ready, theme } from './shared/f7';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "framework7-vue",
-  "version": "7.0.0-beta.2",
+  "version": "7.0.0-beta.3",
   "description": "Build full featured iOS & Android apps using Framework7 & Vue",
   "type": "module",
   "exports": {

package/shared/components-router.js

@@ -1,6 +1,7 @@
 /* eslint no-underscore-dangle: "off" */
 import { f7events, f7routers } from './f7';
 import { extend, getComponentId } from './utils';
+import { routerOpenIn } from './router-open-in';
 
 const getChildrenArray = el => {
   const arr = [];
@@ -21,6 +22,10 @@ const hasSameChildren = (childrenBefore, childrenAfter) => {
 
 export default {
   proto: {
+    openIn(router, navigateUrl, options) {
+      return routerOpenIn(router, navigateUrl, options);
+    },
+
     pageComponentLoader({
       routerEl,
       component,

package/shared/mixins.js

@@ -7,10 +7,10 @@ export function colorClasses(props) {
     bgColor,
     borderColor,
     rippleColor,
-    themeDark
+    dark
   } = props;
   return {
-    'theme-dark': themeDark,
+    dark,
     [`color-${color}`]: color,
     [`color-theme-${colorTheme}`]: colorTheme,
     [`text-color-${textColor}`]: textColor,
@@ -26,7 +26,7 @@ export const colorProps = {
   bgColor: String,
   borderColor: String,
   rippleColor: String,
-  themeDark: Boolean
+  dark: Boolean
 };
 export const iconProps = {
   icon: String,

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);
+};