framework7-svelte 7.0.8 → 8.0.0-beta.1

package/components/navbar.d.ts

@@ -11,8 +11,7 @@ interface NavbarProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap['d
   title ?: string;
   subtitle ?: string;
   hidden ?: boolean;
-  noShadow ?: boolean;
-  noHairline ?: boolean;
+  outline ?: boolean;
   innerClass ?: string;
   innerClassName ?: string;
   large ?: boolean;

package/components/navbar.svelte

@@ -23,8 +23,7 @@
   export let title = undefined;
   export let subtitle = undefined;
   export let hidden = false;
-  export let noShadow = false;
-  export let noHairline = false;
+  export let outline = true;
   export let innerClass = undefined;
   export let innerClassName = undefined;
   export let large = false;
@@ -67,9 +66,7 @@
   $: hasTitleLargeSlots = $$slots['title-large'];
 
   $: addLeftTitleClass = theme && theme.ios && app.f7 && !app.f7.params.navbar.iosCenterTitle;
-  $: addCenterTitleClass =
-    (theme && theme.md && app.f7 && app.f7.params.navbar.mdCenterTitle) ||
-    (theme && theme.aurora && app.f7 && app.f7.params.navbar.auroraCenterTitle);
+  $: addCenterTitleClass = theme && theme.md && app.f7 && app.f7.params.navbar.mdCenterTitle;
 
   $: isLarge = large || largeTransparent;
   $: isTransparent = transparent || (isLarge && largeTransparent);
@@ -89,8 +86,7 @@
       'navbar-master-detail': routerNavbarRole === 'detail',
       'navbar-master-detail-root': routerNavbarRoleDetailRoot === true,
       'navbar-master-stacked': routerNavbarMasterStack === true,
-      'no-shadow': noShadow,
-      'no-hairline': noHairline,
+      'no-outline': !outline,
     },
     colorClasses($$props),
   );

package/components/page.d.ts

@@ -4,7 +4,6 @@ import { SvelteComponentTyped } from 'svelte';
 
 interface PageProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap['div']> {
   name ?: string;
-  stacked ?: boolean;
   withSubnavbar ?: boolean;
   subnavbar ?: boolean;
   withNavbarLarge ?: boolean;

package/components/page.svelte

@@ -11,7 +11,6 @@
 
   // Props
   export let name = undefined;
-  export let stacked = undefined;
   export let withSubnavbar = undefined;
   export let subnavbar = undefined;
   export let withNavbarLarge = undefined;
@@ -47,7 +46,6 @@
   let hasNavbarLargeCollapsed = false;
   let hasCardExpandableOpened = false;
   let routerPositionClass = '';
-  let routerForceUnstack = false;
   let routerPageRole = null;
   let routerPageRoleDetailRoot = false;
   let routerPageMasterStack = false;
@@ -65,7 +63,6 @@
     'page',
     routerPositionClass,
     {
-      stacked: stacked && !routerForceUnstack,
       tabs,
       'page-with-subnavbar': subnavbar || withSubnavbar || forceSubnavbar,
       'page-with-navbar-large': navbarLarge || withNavbarLarge || forceNavbarLarge,
@@ -180,15 +177,7 @@
     if (el !== page.el) return;
     emit('pageBeforeUnmount', [page]);
   }
-  // Helper events
-  function onPageStack(pageEl) {
-    if (el !== pageEl) return;
-    routerForceUnstack = false;
-  }
-  function onPageUnstack(pageEl) {
-    if (el !== pageEl) return;
-    routerForceUnstack = true;
-  }
+
   function onPagePosition(pageEl, position) {
     if (el !== pageEl) return;
     routerPositionClass = `page-${position}`;
@@ -243,8 +232,6 @@
     app.f7.on('pageAfterIn', onPageAfterIn);
     app.f7.on('pageBeforeRemove', onPageBeforeRemove);
     app.f7.on('pageBeforeUnmount', onPageBeforeUnmount);
-    app.f7.on('pageStack', onPageStack);
-    app.f7.on('pageUnstack', onPageUnstack);
     app.f7.on('pagePosition', onPagePosition);
     app.f7.on('pageRole', onPageRole);
     app.f7.on('pageMasterStack', onPageMasterStack);
@@ -266,8 +253,6 @@
     app.f7.off('pageAfterIn', onPageAfterIn);
     app.f7.off('pageBeforeRemove', onPageBeforeRemove);
     app.f7.off('pageBeforeUnmount', onPageBeforeUnmount);
-    app.f7.off('pageStack', onPageStack);
-    app.f7.off('pageUnstack', onPageUnstack);
     app.f7.off('pagePosition', onPagePosition);
     app.f7.off('pageRole', onPageRole);
     app.f7.off('pageMasterStack', onPageMasterStack);

package/components/panel.d.ts

@@ -10,6 +10,7 @@ interface PanelProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap['di
   cover ?: boolean;
   reveal ?: boolean;
   push ?: boolean;
+  floating ?: boolean;
   left ?: boolean;
   right ?: boolean;
   opened ?: boolean;

package/components/panel.svelte

@@ -16,6 +16,7 @@
   export let cover = false;
   export let reveal = false;
   export let push = false;
+  export let floating = false;
   export let left = false;
   export let right = false;
   export let opened = false;
@@ -52,7 +53,8 @@
   // eslint-disable-next-line
   $: sideComputed = side || (left ? 'left' : right ? 'right' : 'left');
   // eslint-disable-next-line
-  $: effectComputed = effect || (reveal ? 'reveal' : push ? 'push' : 'cover');
+  $: effectComputed =
+    effect || (reveal ? 'reveal' : push ? 'push' : floating ? 'floating' : 'cover');
   $: classes = classNames(
     className,
     'panel',

package/components/popover.d.ts

@@ -8,6 +8,7 @@ interface PopoverProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap['
   opened ?: boolean;
   animate ?: boolean;
   targetEl ?: string | object;
+  angle ?: boolean;
   backdrop ?: boolean;
   backdropEl ?: string | object;
   closeByBackdropClick ?: boolean;

package/components/popover.svelte

@@ -14,6 +14,7 @@
   export let opened = undefined;
   export let animate = undefined;
   export let targetEl = undefined;
+  export let angle = undefined;
   export let backdrop = undefined;
   export let backdropEl = undefined;
   export let closeByBackdropClick = undefined;
@@ -93,6 +94,7 @@
     if (typeof closeByOutsideClick !== 'undefined')
       params.closeByOutsideClick = closeByOutsideClick;
     if (typeof closeOnEscape !== 'undefined') params.closeOnEscape = closeOnEscape;
+    if (typeof angle !== 'undefined') params.angle = angle;
     if (typeof backdrop !== 'undefined') params.backdrop = backdrop;
     if (typeof backdropEl !== 'undefined') params.backdropEl = backdropEl;
     if (typeof containerEl !== 'undefined') params.containerEl = containerEl;

package/components/popup.svelte

@@ -125,7 +125,7 @@
     f7ready(() => {
       f7Popup = app.f7.popup.create(popupParams);
       if (opened) {
-        f7Popup.open(false);
+        f7Popup.open(false, true);
       }
     });
   });

package/components/preloader.svelte

@@ -24,7 +24,13 @@
       : '')
   ).replace(';;', ';');
 
-  $: classes = classNames(className, 'preloader', colorClasses($$props));
+  $: classes = classNames(
+    className,
+    {
+      preloader: true,
+    },
+    colorClasses($$props),
+  );
 </script>
 
 <span style={preloaderStyle} class={classes} {...restProps($$restProps)}>
@@ -45,7 +51,5 @@
       <span class="preloader-inner-line" />
       <span class="preloader-inner-line" />
     </span>
-  {:else if theme && theme.aurora}
-    <span class="preloader-inner"> <span class="preloader-inner-circle" /> </span>
   {:else}<span class="preloader-inner" />{/if}
 </span>

package/components/searchbar.d.ts

@@ -5,8 +5,7 @@ import { Searchbar } from 'framework7/types';
 
 
 interface SearchbarProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap['div']> {
-  noShadow ?: boolean;
-  noHairline ?: boolean;
+  outline ?: boolean;
   form ?: boolean;
   placeholder ?: string;
   disableButton ?: boolean;

package/components/searchbar.svelte

@@ -10,8 +10,7 @@
   let className = undefined;
   export { className as class };
 
-  export let noShadow = false;
-  export let noHairline = false;
+  export let outline = true;
   export let form = true;
   export let placeholder = 'Search';
   export let autocomplete = undefined;
@@ -32,7 +31,7 @@
   export let searchIn = '.item-title';
   export let searchItem = 'li';
   export let searchGroup = '.list-group';
-  export let searchGroupTitle = '.item-divider, .list-group-title';
+  export let searchGroupTitle = '.list-group-title';
   export let foundEl = '.searchbar-found';
   export let notFoundEl = '.searchbar-not-found';
   export let backdrop = undefined;
@@ -80,8 +79,7 @@
     'searchbar',
     {
       'searchbar-inline': inline,
-      'no-shadow': noShadow,
-      'no-hairline': noHairline,
+      'no-outline': !outline,
       'searchbar-expandable': expandable,
     },
     colorClasses($$props),

package/components/segmented.d.ts

@@ -6,15 +6,12 @@ interface SegmentedProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap
   raised ?: boolean;
   raisedIos ?: boolean;
   raisedMd ?: boolean;
-  raisedAurora ?: boolean;
   round ?: boolean;
   roundIos ?: boolean;
   roundMd ?: boolean;
-  roundAurora ?: boolean;
   strong ?: boolean;
   strongIos ?: boolean;
   strongMd ?: boolean;
-  strongAurora ?: boolean;
   tag ?: string;
   children?: React.ReactNode;
   color?: string;

package/components/segmented.svelte

@@ -9,15 +9,12 @@
   export let raised = false;
   export let raisedIos = false;
   export let raisedMd = false;
-  export let raisedAurora = false;
   export let round = false;
   export let roundIos = false;
   export let roundMd = false;
-  export let roundAurora = false;
   export let strong = false;
   export let strongIos = false;
   export let strongMd = false;
-  export let strongAurora = false;
   export let tag = 'div';
 
   $: classes = classNames(
@@ -26,16 +23,13 @@
       segmented: true,
       'segmented-raised': raised,
       'segmented-raised-ios': raisedIos,
-      'segmented-raised-aurora': raisedAurora,
       'segmented-raised-md': raisedMd,
       'segmented-round': round,
       'segmented-round-ios': roundIos,
-      'segmented-round-aurora': roundAurora,
       'segmented-round-md': roundMd,
       'segmented-strong': strong,
       'segmented-strong-ios': strongIos,
       'segmented-strong-md': strongMd,
-      'segmented-strong-aurora': strongAurora,
     },
     colorClasses($$props),
   );
@@ -44,11 +38,11 @@
 {#if tag === 'div'}
   <div class={classes} {...restProps($$restProps)}>
     <slot />
-    {#if strong || strongIos || strongMd || strongAurora}<span class="segmented-highlight" />{/if}
+    {#if strong || strongIos || strongMd}<span class="segmented-highlight" />{/if}
   </div>
 {:else if tag === 'p'}
   <p class={classes} {...restProps($$restProps)}>
     <slot />
-    {#if strong || strongIos || strongMd || strongAurora}<span class="segmented-highlight" />{/if}
+    {#if strong || strongIos || strongMd}<span class="segmented-highlight" />{/if}
   </p>
 {/if}

package/components/stepper.d.ts

@@ -27,23 +27,18 @@ interface StepperProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap['
   round ?: boolean;
   roundMd ?: boolean;
   roundIos ?: boolean;
-  roundAurora ?: boolean;
   fill ?: boolean;
   fillMd ?: boolean;
   fillIos ?: boolean;
-  fillAurora ?: boolean;
   large ?: boolean;
   largeMd ?: boolean;
   largeIos ?: boolean;
-  largeAurora ?: boolean;
   small ?: boolean;
   smallMd ?: boolean;
   smallIos ?: boolean;
-  smallAurora ?: boolean;
   raised ?: boolean;
   raisedMd ?: boolean;
   raisedIos ?: boolean;
-  raisedAurora ?: boolean;
   color?: string;
   colorTheme?: string;
   textColor?: string;

package/components/stepper.svelte

@@ -33,23 +33,18 @@
   export let round = false;
   export let roundMd = false;
   export let roundIos = false;
-  export let roundAurora = false;
   export let fill = false;
   export let fillMd = false;
   export let fillIos = false;
-  export let fillAurora = false;
   export let large = false;
   export let largeMd = false;
   export let largeIos = false;
-  export let largeAurora = false;
   export let small = false;
   export let smallMd = false;
   export let smallIos = false;
-  export let smallAurora = false;
   export let raised = false;
   export let raisedMd = false;
   export let raisedIos = false;
-  export let raisedAurora = false;
 
   let el;
   let f7Stepper;
@@ -66,23 +61,18 @@
       'stepper-round': round,
       'stepper-round-ios': roundIos,
       'stepper-round-md': roundMd,
-      'stepper-round-aurora': roundAurora,
       'stepper-fill': fill,
       'stepper-fill-ios': fillIos,
       'stepper-fill-md': fillMd,
-      'stepper-fill-aurora': fillAurora,
       'stepper-large': large,
       'stepper-large-ios': largeIos,
       'stepper-large-md': largeMd,
-      'stepper-large-aurora': largeAurora,
       'stepper-small': small,
       'stepper-small-ios': smallIos,
       'stepper-small-md': smallMd,
-      'stepper-small-aurora': smallAurora,
       'stepper-raised': raised,
       'stepper-raised-ios': raisedIos,
       'stepper-raised-md': raisedMd,
-      'stepper-raised-aurora': raisedAurora,
     },
     colorClasses($$props),
   );

package/components/swiper-slide.d.ts

@@ -1,4 +1,17 @@
-// eslint-disable-next-line
-import { SwiperSlide } from 'swiper/svelte';
+<script>
+  export let lazy = undefined;
+  export let zoom = undefined;
+</script>
 
-export default SwiperSlide;
+<swiper-slide {lazy} {...$$restProps}>
+  {#if zoom}
+    <div
+      class="swiper-zoom-container"
+      data-swiper-zoom={typeof zoom === 'number' ? zoom : undefined}
+    >
+      <slot />
+    </div>
+  {:else}
+    <slot />
+  {/if}
+</swiper-slide>

package/components/swiper-slide.svelte

@@ -0,0 +1,17 @@
+<script>
+  export let lazy = undefined;
+  export let zoom = undefined;
+</script>
+
+<swiper-slide {lazy} {...$$restProps}>
+  {#if zoom}
+    <div
+      class="swiper-zoom-container"
+      data-swiper-zoom={typeof zoom === 'number' ? zoom : undefined}
+    >
+      <slot />
+    </div>
+  {:else}
+    <slot />
+  {/if}
+</swiper-slide>

package/components/swiper.d.ts

@@ -1,4 +1,52 @@
-// eslint-disable-next-line
-import { Swiper } from 'swiper/svelte';
+<script>
+  import { onMount } from 'svelte';
 
-export default Swiper;
+  let swiperEl = null;
+  let containerClasses = '';
+  let className = undefined;
+  export { className as class };
+
+  const getData = (restProps) => {
+    const props = {};
+    const attrs = {};
+    const events = {};
+    Object.keys(restProps).forEach((prop) => {
+      if (prop === 'class' || prop === 'id' || prop.includes('data-')) {
+        attrs[prop] = restProps[prop];
+      } else if (prop.indexOf('on') === 0) {
+        const eventName = prop.substring(2);
+        eventName[0] = eventName[0].toLowerCase();
+        events[eventName] = restProps[prop];
+      } else {
+        props[prop] = restProps[prop];
+      }
+    });
+    props.on = {
+      ...(props.on || {}),
+      ...events,
+      // eslint-disable-next-line
+      _containerClasses(_swiper, classes) {
+        containerClasses = classes;
+      },
+    };
+    return { props, attrs };
+  };
+
+  $: data = getData($$restProps);
+
+  onMount(() => {
+    Object.assign(swiperEl, data.props);
+    swiperEl.initialize();
+  });
+</script>
+
+<swiper-container
+  class={[containerClasses, className || ''].filter((c) => !!c).join(' ')}
+  bind:this={swiperEl}
+  {...data.attrs}
+  init="false"
+>
+  <slot name="container-start" slot="container-start" />
+  <slot />
+  <slot name="container-end" slot="container-end" />
+</swiper-container>

package/components/swiper.svelte

@@ -0,0 +1,52 @@
+<script>
+  import { onMount } from 'svelte';
+
+  let swiperEl = null;
+  let containerClasses = '';
+  let className = undefined;
+  export { className as class };
+
+  const getData = (restProps) => {
+    const props = {};
+    const attrs = {};
+    const events = {};
+    Object.keys(restProps).forEach((prop) => {
+      if (prop === 'class' || prop === 'id' || prop.includes('data-')) {
+        attrs[prop] = restProps[prop];
+      } else if (prop.indexOf('on') === 0) {
+        const eventName = prop.substring(2);
+        eventName[0] = eventName[0].toLowerCase();
+        events[eventName] = restProps[prop];
+      } else {
+        props[prop] = restProps[prop];
+      }
+    });
+    props.on = {
+      ...(props.on || {}),
+      ...events,
+      // eslint-disable-next-line
+      _containerClasses(_swiper, classes) {
+        containerClasses = classes;
+      },
+    };
+    return { props, attrs };
+  };
+
+  $: data = getData($$restProps);
+
+  onMount(() => {
+    Object.assign(swiperEl, data.props);
+    swiperEl.initialize();
+  });
+</script>
+
+<swiper-container
+  class={[containerClasses, className || ''].filter((c) => !!c).join(' ')}
+  bind:this={swiperEl}
+  {...data.attrs}
+  init="false"
+>
+  <slot name="container-start" slot="container-start" />
+  <slot />
+  <slot name="container-end" slot="container-end" />
+</swiper-container>

package/components/toolbar.d.ts

@@ -4,20 +4,16 @@ import { SvelteComponentTyped } from 'svelte';
 
 interface ToolbarProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap['div']> {
   tabbar ?: boolean;
-  labels ?: boolean;
+  icons ?: boolean;
   scrollable ?: boolean;
   hidden ?: boolean;
-  noShadow ?: boolean;
-  noHairline ?: boolean;
-  noBorder ?: boolean;
+  outline ?: boolean;
   position ?: string;
   topMd ?: boolean;
   topIos ?: boolean;
-  topAurora ?: boolean;
   top ?: boolean;
   bottomMd ?: boolean;
   bottomIos ?: boolean;
-  bottomAurora ?: boolean;
   bottom ?: boolean;
   inner ?: boolean;
   color?: string;

package/components/toolbar.svelte

@@ -13,20 +13,16 @@
   export { className as class };
 
   export let tabbar = false;
-  export let labels = false;
+  export let icons = false;
   export let scrollable = false;
   export let hidden = false;
-  export let noShadow = false;
-  export let noHairline = false;
-  export let noBorder = false;
+  export let outline = true;
   export let position = undefined;
   export let topMd = undefined;
   export let topIos = undefined;
-  export let topAurora = undefined;
   export let top = undefined;
   export let bottomMd = undefined;
   export let bottomIos = undefined;
-  export let bottomAurora = undefined;
   export let bottom = undefined;
   export let inner = true;
 
@@ -38,7 +34,7 @@
   });
 
   setReactiveContext('TabbarContext', () => ({
-    tabbarHasLabels: labels,
+    tabbarHasIcons: icons,
   }));
 
   $: classes = classNames(
@@ -49,20 +45,14 @@
       'toolbar-bottom':
         (theme && theme.md && bottomMd) ||
         (theme && theme.ios && bottomIos) ||
-        (theme && theme.aurora && bottomAurora) ||
         bottom ||
         position === 'bottom',
       'toolbar-top':
-        (theme && theme.md && topMd) ||
-        (theme && theme.ios && topIos) ||
-        (theme && theme.aurora && topAurora) ||
-        top ||
-        position === 'top',
-      'tabbar-labels': labels,
+        (theme && theme.md && topMd) || (theme && theme.ios && topIos) || top || position === 'top',
+      'tabbar-icons': icons,
       'tabbar-scrollable': scrollable,
       'toolbar-hidden': hidden,
-      'no-shadow': noShadow,
-      'no-hairline': noHairline || noBorder,
+      'no-outline': !outline,
     },
     colorClasses($$props),
   );

package/components/treeview-item.d.ts

@@ -62,7 +62,6 @@ interface TreeviewItemProps extends svelte.JSX.HTMLAttributes<HTMLElementTagName
   iconF7?: string;
   iconIos?: string;
   iconMd?: string;
-  iconAurora?: string;
   iconColor?: string;
   iconSize?: string | number;
   onClick ?: (event?: any) => void;

package/components/view.d.ts

@@ -13,7 +13,6 @@ interface ViewProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap['div
   linksView ?: Object | string;
   url ?: string;
   main ?: boolean;
-  stackPages ?: boolean;
   xhrCache ?: boolean;
   xhrCacheIgnore ?: Array<any>;
   xhrCacheIgnoreGetParameters ?: boolean;
@@ -39,11 +38,6 @@ interface ViewProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap['div
   mdSwipeBackAnimateOpacity ?: boolean;
   mdSwipeBackActiveArea ?: number;
   mdSwipeBackThreshold ?: number;
-  auroraSwipeBack ?: boolean;
-  auroraSwipeBackAnimateShadow ?: boolean;
-  auroraSwipeBackAnimateOpacity ?: boolean;
-  auroraSwipeBackActiveArea ?: number;
-  auroraSwipeBackThreshold ?: number;
   browserHistory ?: boolean;
   browserHistoryRoot ?: string;
   browserHistoryAnimate ?: boolean;