framework7-svelte 6.3.5 → 7.0.0-beta.4

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

@@ -1,37 +1,45 @@
 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 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();
@@ -52,39 +60,43 @@ 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 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,
@@ -98,30 +110,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

@@ -2,20 +2,18 @@
 import Framework7 from 'framework7/lite';
 import componentsRouter from './components-router';
 import { f7ready, theme, app, f7initEvents, setTheme } from './f7';
-var Framework7Svelte = {
+const Framework7Svelte = {
   name: 'sveltePlugin',
   installed: false,
-  install: function install(params) {
-    if (params === void 0) {
-      params = {};
-    }
 
+  install(params = {}) {
     if (Framework7Svelte.installed) return;
     Framework7Svelte.installed = true;
     f7initEvents();
-    var _params = params,
-        paramsTheme = _params.theme,
-        userAgent = _params.userAgent;
+    const {
+      theme: paramsTheme,
+      userAgent
+    } = params;
 
     if (paramsTheme === 'md') {
       app.theme.md = true;
@@ -33,11 +31,11 @@ var Framework7Svelte = {
     } // 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);
       app.theme.ios = !!device.ios;
       theme.ios = app.theme.ios;
@@ -47,10 +45,11 @@ var Framework7Svelte = {
       theme.md = app.theme.md;
     }
 
-    f7ready(function () {
+    f7ready(() => {
       setTheme();
     });
     Framework7.Router.use(componentsRouter);
   }
+
 };
 export default Framework7Svelte;

package/shared/rest-props.js

@@ -0,0 +1,10 @@
+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 = {}) {
+  const props = {};
+  Object.keys(rest).filter(prop => !ignoreProps.includes(prop)).forEach(key => {
+    if (key.indexOf('on') !== 0) {
+      props[key] = rest[key];
+    }
+  });
+  return props;
+}

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/{esm/shared → shared}/set-reactive-context.js

@@ -1,20 +1,20 @@
 // eslint-disable-next-line
 import { setContext, beforeUpdate } from 'svelte';
-export var setReactiveContext = function setReactiveContext(name, getValue) {
-  var contextCallbacks = [];
+export const setReactiveContext = (name, getValue) => {
+  const contextCallbacks = [];
 
-  var contextSubscribe = function contextSubscribe(callback) {
+  const contextSubscribe = callback => {
     contextCallbacks.push(callback);
   };
 
-  var contextUnsubscribe = function contextUnsubscribe(callback) {
+  const contextUnsubscribe = callback => {
     if (contextCallbacks.indexOf(callback) >= 0) {
       contextCallbacks.splice(contextCallbacks.indexOf, callback);
     }
   };
 
-  var contextRunCallbacks = function contextRunCallbacks() {
-    contextCallbacks.forEach(function (callback) {
+  const contextRunCallbacks = () => {
+    contextCallbacks.forEach(callback => {
       callback(getValue());
     });
   };
@@ -24,7 +24,7 @@ export var setReactiveContext = function setReactiveContext(name, getValue) {
     subscribe: contextSubscribe,
     unsubscribe: contextUnsubscribe
   });
-  beforeUpdate(function () {
+  beforeUpdate(() => {
     contextRunCallbacks();
   });
 };

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,16 +1,18 @@
-export var useRouteProps = function useRouteProps(el, routeProps) {
+export const useRouteProps = (el, routeProps) => {
   if (el && routeProps) {
     el.f7RouteProps = routeProps;
   }
 
   return {
-    update: function update(newValue) {
+    update(newValue) {
       if (el && el.f7RouteProps && !newValue) delete el.f7RouteProps;else if (el && newValue) el.f7RouteProps = newValue;
     },
-    destroy: function destroy() {
+
+    destroy() {
       if (el && routeProps) {
         delete el.f7RouteProps;
       }
     }
+
   };
 };

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

@@ -2,12 +2,12 @@
 import { onMount, onDestroy } from 'svelte';
 import { f7ready, app } from './f7';
 import { extend } from './utils';
-export var useSmartSelect = function useSmartSelect(props, setInstance, getEl) {
-  var f7SmartSelect;
-  onMount(function () {
-    f7ready(function () {
+export const useSmartSelect = (props, setInstance, getEl) => {
+  let f7SmartSelect;
+  onMount(() => {
+    f7ready(() => {
       if (props.smartSelect) {
-        var ssParams = extend({
+        const ssParams = extend({
           el: getEl()
         }, props.smartSelectParams || {});
         f7SmartSelect = app.f7.smartSelect.create(ssParams);
@@ -15,7 +15,7 @@ export var useSmartSelect = function useSmartSelect(props, setInstance, getEl) {
       }
     });
   });
-  onDestroy(function () {
+  onDestroy(() => {
     if (f7SmartSelect && f7SmartSelect.destroy) {
       f7SmartSelect.destroy();
     }

package/shared/use-store.js

@@ -0,0 +1,36 @@
+// eslint-disable-next-line
+import { onDestroy } from 'svelte';
+import { f7 } from './f7';
+export const useStore = (...args) => {
+  // (store, getter, callback)
+  let store = args[0];
+  let getter = args[1];
+  let callback = args[2];
+
+  if (args.length === 1) {
+    // (getter)
+    store = f7.store;
+    getter = args[0];
+  } else if (args.length === 2 && typeof args[0] === 'string') {
+    // (getter, callback)
+    store = f7.store;
+    getter = args[0];
+    callback = args[1];
+  } // eslint-disable-next-line
+
+
+  const obj = store._gettersPlain[getter];
+  const value = obj.value;
+
+  if (callback) {
+    obj.onUpdated(callback);
+  }
+
+  onDestroy(() => {
+    if (callback) {
+      // eslint-disable-next-line
+      store.__removeCallback(callback);
+    }
+  });
+  return value;
+};

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

@@ -1,35 +1,35 @@
 // eslint-disable-next-line
 import { onMount, onDestroy } from 'svelte';
 import { f7, f7ready } from './f7';
-export var useTab = function useTab(getEl, emit) {
-  var onTabShow = function onTabShow(el) {
+export const useTab = (getEl, emit) => {
+  const onTabShow = el => {
     if (getEl() !== el) return;
     emit('tabShow', [el]);
   };
 
-  var onTabHide = function onTabHide(el) {
+  const onTabHide = el => {
     if (getEl() !== el) return;
     emit('tabHide', [el]);
   };
 
-  var attachEvents = function attachEvents() {
+  const attachEvents = () => {
     if (!getEl()) return;
-    f7ready(function () {
+    f7ready(() => {
       f7.on('tabShow', onTabShow);
       f7.on('tabHide', onTabHide);
     });
   };
 
-  var detachEvents = function detachEvents() {
+  const detachEvents = () => {
     if (!f7) return;
     f7.off('tabShow', onTabShow);
     f7.off('tabHide', onTabHide);
   };
 
-  onMount(function () {
+  onMount(() => {
     attachEvents();
   });
-  onDestroy(function () {
+  onDestroy(() => {
     detachEvents();
   });
 };

package/shared/use-theme.js

@@ -0,0 +1,12 @@
+import { f7ready, app } from './f7';
+export const useTheme = set => {
+  const t = app.f7 ? app.theme : null;
+
+  if (!app.f7) {
+    f7ready(() => {
+      set(app.theme);
+    });
+  }
+
+  return t;
+};

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

@@ -1,11 +1,13 @@
 import { app, f7ready } from './f7';
-export var useTooltip = function useTooltip(el, props) {
-  var f7Tooltip = null;
-  var tooltip = props.tooltip,
-      tooltipTrigger = props.tooltipTrigger;
+export const useTooltip = (el, props) => {
+  let f7Tooltip = null;
+  const {
+    tooltip,
+    tooltipTrigger
+  } = props;
 
   if (el && tooltip) {
-    f7ready(function () {
+    f7ready(() => {
       f7Tooltip = app.f7.tooltip.create({
         targetEl: el,
         text: tooltip,
@@ -15,10 +17,9 @@ export var useTooltip = function useTooltip(el, props) {
   }
 
   return {
-    update: function update(_temp) {
-      var _ref = _temp === void 0 ? {} : _temp,
-          value = _ref.tooltip;
-
+    update({
+      tooltip: value
+    } = {}) {
       if (!value && f7Tooltip) {
         f7Tooltip.destroy();
         f7Tooltip = null;
@@ -37,11 +38,13 @@ export var useTooltip = function useTooltip(el, props) {
       if (!value || !f7Tooltip) return;
       f7Tooltip.setText(value);
     },
-    destroy: function destroy() {
+
+    destroy() {
       if (f7Tooltip && f7Tooltip.destroy) {
         f7Tooltip.destroy();
         f7Tooltip = null;
       }
     }
+
   };
 };