framework7-svelte 7.0.0-beta.2 → 7.0.0-beta.20

package/shared/components-router.js

@@ -1,6 +1,7 @@
 /* eslint no-underscore-dangle: "off" */
-import { app } from './f7';
-import { extend, getComponentId } from './utils';
+import { app } from './f7.js';
+import { extend, getComponentId } from './utils.js';
+import { routerOpenIn } from './router-open-in.js';
 
 const getChildrenArray = el => {
   const arr = [];
@@ -21,13 +22,18 @@ const hasSameChildren = (childrenBefore, childrenAfter) => {
 
 export default {
   proto: {
-    pageComponentLoader({
-      routerEl,
-      component,
-      options,
-      resolve,
-      reject
-    }) {
+    openIn(router, navigateUrl, options) {
+      return routerOpenIn(router, navigateUrl, options);
+    },
+
+    pageComponentLoader(_ref) {
+      let {
+        routerEl,
+        component,
+        options,
+        resolve,
+        reject
+      } = _ref;
       const router = this;
       const routerId = router.id;
       const el = routerEl;
@@ -112,13 +118,14 @@ export default {
       }
     },
 
-    tabComponentLoader({
-      tabEl,
-      component,
-      options,
-      resolve,
-      reject
-    } = {}) {
+    tabComponentLoader(_temp) {
+      let {
+        tabEl,
+        component,
+        options,
+        resolve,
+        reject
+      } = _temp === void 0 ? {} : _temp;
       const router = this;
       if (!tabEl) reject();
       let tabRouter;
@@ -174,12 +181,13 @@ export default {
       tabRouter.setTabContent(null);
     },
 
-    modalComponentLoader({
-      component,
-      options,
-      resolve,
-      reject
-    } = {}) {
+    modalComponentLoader(_temp2) {
+      let {
+        component,
+        options,
+        resolve,
+        reject
+      } = _temp2 === void 0 ? {} : _temp2;
       const router = this;
       const modalsRouter = app.f7routers.modals;
 

package/shared/f7.js

@@ -1,27 +1,27 @@
 /* eslint-disable import/no-mutable-exports */
 // eslint-disable-next-line
-import Framework7 from 'framework7/lite';
-import { extend, unsetRouterIds } from './utils';
+import { extend, unsetRouterIds } from './utils.js';
 let f7;
-const theme = {}; // eslint-disable-next-line
-
-if (!Framework7.__app__) {
-  // eslint-disable-next-line
-  Framework7.__app__ = {
-    f7: undefined,
-    f7events: undefined,
-    theme: {},
-    f7routers: {
-      views: [],
-      tabs: [],
-      modals: null
-    }
-  };
+const theme = {};
+/* eslint-disable no-restricted-globals */
+
+const app = typeof window !== 'undefined' && window.Framework7ComponentsApp ? window.Framework7ComponentsApp : {
+  Framework7: undefined,
+  f7: undefined,
+  f7events: undefined,
+  theme: {},
+  f7routers: {
+    views: [],
+    tabs: [],
+    modals: null
+  }
+};
+
+if (typeof window !== 'undefined') {
+  window.Framework7ComponentsApp = app;
 }
+/* eslint-enable no-restricted-globals */
 
-const {
-  __app__: app
-} = Framework7;
 
 app.setInstance = instance => {
   f7 = instance;
@@ -51,10 +51,18 @@ const cleanup = () => {
 };
 
 const f7initEvents = () => {
-  app.f7events = new Framework7.Events();
+  app.f7events = new app.Framework7.Events();
 };
 
-const f7init = (rootEl, params = {}, init = true) => {
+const f7init = function (rootEl, params, init) {
+  if (params === void 0) {
+    params = {};
+  }
+
+  if (init === void 0) {
+    init = true;
+  }
+
   const f7Params = extend({}, params, {
     el: rootEl,
     init
@@ -63,7 +71,7 @@ const f7init = (rootEl, params = {}, init = true) => {
   if (!f7Params.routes) f7Params.routes = [];
 
   if (f7Params.userAgent && (f7Params.theme === 'auto' || !f7Params.theme)) {
-    const device = Framework7.getDevice({
+    const device = app.Framework7.getDevice({
       userAgent: f7Params.userAgent
     }, true);
     app.theme.ios = !!device.ios;
@@ -75,7 +83,7 @@ const f7init = (rootEl, params = {}, init = true) => {
   if (app.f7 && typeof window !== 'undefined') return; // eslint-disable-next-line
 
   if (typeof window === 'undefined') cleanup();
-  const instance = new Framework7(f7Params);
+  const instance = new app.Framework7(f7Params);
   app.f7 = instance;
   f7 = instance;
   app.setInstance(instance);

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

@@ -1,4 +1,4 @@
-import { getComponentId } from './utils';
+import { getComponentId } from './utils.js';
 export const getRouterInitialComponent = (router, initialComponent) => {
   let initialComponentData;
   const {

package/shared/mixins.js

@@ -1,4 +1,4 @@
-import { isStringProp } from './utils';
+import { isStringProp } from './utils.js';
 export function colorClasses(props) {
   const {
     color,
@@ -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,

package/shared/modal-state-classes.js

@@ -1,7 +1,8 @@
-export const modalStateClasses = ({
-  isOpened,
-  isClosing
-} = {}) => {
+export const modalStateClasses = function (_temp) {
+  let {
+    isOpened,
+    isClosing
+  } = _temp === void 0 ? {} : _temp;
   return {
     'modal-in': isOpened && !isClosing,
     'modal-out': isClosing

package/shared/plugin.js

@@ -1,12 +1,17 @@
 // eslint-disable-next-line
-import Framework7 from 'framework7/lite';
-import componentsRouter from './components-router';
-import { f7ready, theme, app, f7initEvents, setTheme } from './f7';
+import componentsRouter from './components-router.js';
+import { f7ready, theme, app, f7initEvents, setTheme } from './f7.js';
 const Framework7Svelte = {
   name: 'sveltePlugin',
   installed: false,
 
-  install(params = {}) {
+  install(params) {
+    if (params === void 0) {
+      params = {};
+    }
+
+    const Framework7 = this;
+    app.Framework7 = Framework7;
     if (Framework7Svelte.installed) return;
     Framework7Svelte.installed = true;
     f7initEvents();

package/shared/rest-props.js

@@ -1,5 +1,9 @@
-const ignoreProps = ['color', 'colorTheme', 'textColor', 'bgColor', 'borderColor', 'rippleColor', 'themeDark', 'force', 'reloadCurrent', 'reloadPrevious', 'reloadAll', 'reloadDetail', 'animate', 'ignoreCache', 'routeTabId', 'view', 'transition', 'openIn', 'back', 'linkBack', 'external', 'preventRouter', 'searchbarEnable', 'searchbarDisable', 'searchbarClear', 'searchbarToggle', 'panelOpen', 'panelClose', 'panelToggle', 'popupOpen', 'popupClose', 'actionsOpen', 'actionsClose', 'popoverOpen', 'popoverClose', 'loginScreenOpen', 'loginScreenClose', 'sheetOpen', 'sheetClose', 'sortableEnable', 'sortableDisable', 'sortableToggle', 'cardOpen', 'cardClose'];
-export function restProps(rest = {}) {
+const ignoreProps = ['color', 'colorTheme', 'textColor', 'bgColor', 'borderColor', 'rippleColor', 'dark', 'force', 'reloadCurrent', 'reloadPrevious', 'reloadAll', 'reloadDetail', 'animate', 'ignoreCache', 'routeTabId', 'view', 'transition', 'openIn', 'back', 'linkBack', 'external', 'preventRouter', 'searchbarEnable', 'searchbarDisable', 'searchbarClear', 'searchbarToggle', 'panelOpen', 'panelClose', 'panelToggle', 'popupOpen', 'popupClose', 'actionsOpen', 'actionsClose', 'popoverOpen', 'popoverClose', 'loginScreenOpen', 'loginScreenClose', 'sheetOpen', 'sheetClose', 'sortableEnable', 'sortableDisable', 'sortableToggle', 'cardOpen', 'cardClose'];
+export function restProps(rest) {
+  if (rest === void 0) {
+    rest = {};
+  }
+
   const props = {};
   Object.keys(rest).filter(prop => !ignoreProps.includes(prop)).forEach(key => {
     if (key.indexOf('on') !== 0) {

package/shared/router-open-in-component.svelte

@@ -0,0 +1,41 @@
+<script>
+  import Popup from '../components/popup.svelte';
+  import View from '../components/view.svelte';
+  import LoginScreen from '../components/login-screen.svelte';
+  import Sheet from '../components/sheet.svelte';
+  import Popover from '../components/popover.svelte';
+  import Panel from '../components/panel.svelte';
+
+  export let openIn;
+  export let url;
+  export let viewSelector;
+  export let targetEl;
+  export let side;
+  export let effect;
+</script>
+
+{#if openIn === 'popup'}
+  <Popup className="popup-router-open-in" data-url={url}>
+    <View linksView={viewSelector} {url} ignoreOpenIn />
+  </Popup>
+{/if}
+{#if openIn === 'loginScreen'}
+  <LoginScreen className="login-screen-router-open-in" data-url={url}>
+    <View linksView={viewSelector} {url} ignoreOpenIn />
+  </LoginScreen>
+{/if}
+{#if openIn === 'sheet'}
+  <Sheet className="sheet-modal-router-open-in" data-url={url}>
+    <View linksView={viewSelector} {url} ignoreOpenIn />
+  </Sheet>
+{/if}
+{#if openIn === 'popover'}
+  <Popover className="popover-router-open-in" {targetEl} data-url={url}>
+    <View linksView={viewSelector} {url} ignoreOpenIn />
+  </Popover>
+{/if}
+{#if openIn.indexOf('panel') === 0}
+  <Panel {side} {effect} className="panel-router-open-in" data-url={url}>
+    <View linksView={viewSelector} {url} ignoreOpenIn />
+  </Panel>
+{/if}

package/shared/router-open-in.js

@@ -0,0 +1,47 @@
+import RouterOpenInComponent from './router-open-in-component.svelte';
+export const routerOpenIn = (router, url, options) => {
+  const navigateOptions = {
+    url,
+    route: {
+      path: url,
+      options: { ...options,
+        openIn: undefined,
+        props: { ...(options.props || {}),
+          url,
+          openIn: options.openIn,
+          viewSelector: router.view.selector
+        }
+      }
+    }
+  };
+  const params = { ...options
+  };
+  params.component = RouterOpenInComponent;
+
+  if (options.openIn === 'popup') {
+    navigateOptions.route.popup = params;
+  }
+
+  if (options.openIn === 'loginScreen') {
+    navigateOptions.route.loginScreen = params;
+  }
+
+  if (options.openIn === 'sheet') {
+    navigateOptions.route.sheet = params;
+  }
+
+  if (options.openIn === 'popover') {
+    params.targetEl = options.clickedEl || options.targetEl;
+    navigateOptions.route.popover = params;
+    navigateOptions.route.options.props.targetEl = params.targetEl;
+  }
+
+  if (options.openIn.indexOf('panel') >= 0) {
+    const parts = options.openIn.split(':');
+    navigateOptions.route.options.props.side = parts[1] || 'left';
+    navigateOptions.route.options.props.effect = parts[2] || 'cover';
+    navigateOptions.route.panel = params;
+  }
+
+  return router.navigate(navigateOptions);
+};

package/shared/use-icon.js

@@ -1,4 +1,8 @@
-export const useIcon = (props = {}) => {
+export const useIcon = function (props) {
+  if (props === void 0) {
+    props = {};
+  }
+
   const {
     icon,
     iconMaterial,

package/shared/use-smart-select.js

@@ -1,7 +1,7 @@
 // eslint-disable-next-line
 import { onMount, onDestroy } from 'svelte';
-import { f7ready, app } from './f7';
-import { extend } from './utils';
+import { f7ready, app } from './f7.js';
+import { extend } from './utils.js';
 export const useSmartSelect = (props, setInstance, getEl) => {
   let f7SmartSelect;
   onMount(() => {

package/shared/use-store.js

@@ -1,21 +1,21 @@
 // eslint-disable-next-line
 import { onDestroy } from 'svelte';
-import { f7 } from './f7';
-export const useStore = (...args) => {
+import { f7 } from './f7.js';
+export const useStore = function () {
   // (store, getter, callback)
-  let store = args[0];
-  let getter = args[1];
-  let callback = args[2];
+  let store = arguments.length <= 0 ? undefined : arguments[0];
+  let getter = arguments.length <= 1 ? undefined : arguments[1];
+  let callback = arguments.length <= 2 ? undefined : arguments[2];
 
-  if (args.length === 1) {
+  if (arguments.length === 1) {
     // (getter)
     store = f7.store;
-    getter = args[0];
-  } else if (args.length === 2 && typeof args[0] === 'string') {
+    getter = arguments.length <= 0 ? undefined : arguments[0];
+  } else if (arguments.length === 2 && typeof (arguments.length <= 0 ? undefined : arguments[0]) === 'string') {
     // (getter, callback)
     store = f7.store;
-    getter = args[0];
-    callback = args[1];
+    getter = arguments.length <= 0 ? undefined : arguments[0];
+    callback = arguments.length <= 1 ? undefined : arguments[1];
   } // eslint-disable-next-line
 
 

package/shared/use-tab.js

@@ -1,6 +1,6 @@
 // eslint-disable-next-line
 import { onMount, onDestroy } from 'svelte';
-import { f7, f7ready } from './f7';
+import { f7, f7ready } from './f7.js';
 export const useTab = (getEl, emit) => {
   const onTabShow = el => {
     if (getEl() !== el) return;

package/shared/use-theme.js

@@ -1,4 +1,4 @@
-import { f7ready, app } from './f7';
+import { f7ready, app } from './f7.js';
 export const useTheme = set => {
   const t = app.f7 ? app.theme : null;
 

package/shared/use-tooltip.js

@@ -1,4 +1,4 @@
-import { app, f7ready } from './f7';
+import { app, f7ready } from './f7.js';
 export const useTooltip = (el, props) => {
   let f7Tooltip = null;
   const {
@@ -17,9 +17,11 @@ export const useTooltip = (el, props) => {
   }
 
   return {
-    update({
-      tooltip: value
-    } = {}) {
+    update(_temp) {
+      let {
+        tooltip: value
+      } = _temp === void 0 ? {} : _temp;
+
       if (!value && f7Tooltip) {
         f7Tooltip.destroy();
         f7Tooltip = null;

package/shared/utils.js

@@ -14,11 +14,15 @@ export function isObject(o) {
 export function now() {
   return Date.now();
 }
-export function extend(...args) {
+export function extend() {
   let deep = true;
   let to;
   let from;
 
+  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+    args[_key] = arguments[_key];
+  }
+
   if (typeof args[0] === 'boolean') {
     [deep, to] = args;
     args.splice(0, 2);
@@ -57,8 +61,13 @@ export function extend(...args) {
 
   return to;
 }
-export function classNames(...args) {
+export function classNames() {
   const classes = [];
+
+  for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+    args[_key2] = arguments[_key2];
+  }
+
   args.forEach(arg => {
     if (typeof arg === 'object' && arg.constructor === Object) {
       Object.keys(arg).forEach(key => {