feat(vue): support open-in functionality with vue components route

nolimits4web · nolimits4web · commit 6610febe13db · 2021-10-04T18:30:23.000+03:00
diff --git a/src/vue/shared/components-router.js b/src/vue/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 = [];
@@ -18,6 +19,9 @@ const hasSameChildren = (childrenBefore, childrenAfter) => {
 
 export default {
   proto: {
+    openIn(router, navigateUrl, options) {
+      return routerOpenIn(router, navigateUrl, options);
+    },
     pageComponentLoader({ routerEl, component, options, resolve, reject }) {
       const router = this;
       const routerId = router.id;
diff --git a/src/vue/shared/router-open-in.js b/src/vue/shared/router-open-in.js
@@ -0,0 +1,91 @@
+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.targetEl = options.clickedEl || options.targetEl;
+    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);
+};
