framework7-svelte 8.0.0-beta.3 → 8.0.0-beta.5

package/components/actions-label.d.ts

@@ -3,7 +3,7 @@ import { SvelteComponentTyped } from 'svelte';
 
 
 interface ActionsLabelProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap['div']> {
-  bold?: boolean;
+  strong?: boolean;
   onClick?: (event?: any) => void;
   children?: React.ReactNode;
   color?: string;

package/components/popover.d.ts

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

package/components/popover.svelte

@@ -15,7 +15,7 @@
   export let opened = undefined;
   export let animate = undefined;
   export let targetEl = undefined;
-  export let angle = undefined;
+  export let arrow = undefined;
   export let backdrop = undefined;
   export let backdropEl = undefined;
   export let closeByBackdropClick = undefined;
@@ -95,7 +95,7 @@
     if (typeof closeByOutsideClick !== 'undefined')
       params.closeByOutsideClick = closeByOutsideClick;
     if (typeof closeOnEscape !== 'undefined') params.closeOnEscape = closeOnEscape;
-    if (typeof angle !== 'undefined') params.angle = angle;
+    if (typeof arrow !== 'undefined') params.arrow = arrow;
     if (typeof backdrop !== 'undefined') params.backdrop = backdrop;
     if (typeof backdropEl !== 'undefined') params.backdropEl = backdropEl;
     if (typeof containerEl !== 'undefined') params.containerEl = containerEl;
@@ -116,7 +116,7 @@
 </script>
 
 <div class={classes} bind:this={el} {style} {...restProps($$restProps)}>
-  <div class="popover-angle" />
+  <div class="popover-arrow" />
   <div class="popover-inner">
     <slot popover={f7Popover} />
   </div>

package/components/searchbar.d.ts

@@ -29,7 +29,7 @@ interface SearchbarProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap
   ignore ?: string;
   customSearch ?: boolean;
   removeDiacritics ?: boolean;
-  hideDividers ?: boolean;
+  hideGroupTitles ?: boolean;
   hideGroups ?: boolean;
   init ?: boolean;
   color?: string;

package/components/searchbar.svelte

@@ -41,7 +41,7 @@
   export let ignore = '.searchbar-ignore';
   export let customSearch = false;
   export let removeDiacritics = false;
-  export let hideDividers = true;
+  export let hideGroupTitles = true;
   export let hideGroups = true;
   export let init = true;
 
@@ -135,7 +135,7 @@
         ignore,
         customSearch,
         removeDiacritics,
-        hideDividers,
+        hideGroupTitles,
         hideGroups,
         expandable,
         inline,

package/components/tab.svelte

@@ -6,6 +6,7 @@
   import { classNames, createEmitter, getComponentId } from '../shared/utils.js';
   import { f7ready, app } from '../shared/f7.js';
   import { useTab } from '../shared/use-tab.js';
+  import { getReactiveContext } from '../shared/get-reactive-context.js';
 
   const emit = createEmitter(createEventDispatcher, $$props);
 
@@ -16,10 +17,17 @@
 
   const RouterContext = getContext('RouterContext') || {};
 
+  let TabsSwipeableContext =
+    getReactiveContext('TabsSwipeableContext', (newValue) => {
+      TabsSwipeableContext = newValue || false;
+    }) || {};
+
   let el;
   let routerData = null;
   let initialTabContent = null;
 
+  $: isSwiper = TabsSwipeableContext;
+
   if (
     !routerData &&
     RouterContext &&
@@ -83,9 +91,18 @@
   });
 </script>
 
-<div {id} class={classes} bind:this={el} {...restProps($$restProps)}>
-  {#if tabContent}
-    <svelte:component this={tabContent.component} {...tabContent.props} />
-  {/if}
-  <slot />
-</div>
+{#if isSwiper || TabsSwipeableContext}
+  <swiper-slide {id} class={classes} bind:this={el} {...restProps($$restProps)}>
+    {#if tabContent}
+      <svelte:component this={tabContent.component} {...tabContent.props} />
+    {/if}
+    <slot />
+  </swiper-slide>
+{:else}
+  <div {id} class={classes} bind:this={el} {...restProps($$restProps)}>
+    {#if tabContent}
+      <svelte:component this={tabContent.component} {...tabContent.props} />
+    {/if}
+    <slot />
+  </div>
+{/if}

package/components/tabs.svelte

@@ -1,9 +1,10 @@
 <script>
-  import { onMount } from 'svelte';
+  import { onMount, tick } from 'svelte';
 
   import { restProps } from '../shared/rest-props.js';
   import { colorClasses } from '../shared/mixins.js';
   import { classNames } from '../shared/utils.js';
+  import { setReactiveContext } from '../shared/set-reactive-context.js';
 
   let className = undefined;
   export { className as class };
@@ -15,28 +16,46 @@
   let wrapEl;
 
   $: classes = classNames(className, colorClasses($$props));
-  $: wrapClasses = classNames({
-    'tabs-animated-wrap': animated,
-    'tabs-swipeable-wrap': swipeable,
-  });
+
   $: tabsClasses = classNames({
     tabs: true,
     'tabs-routable': routable,
   });
 
+  setReactiveContext('TabsSwipeableContext', () => true);
+
   onMount(() => {
     if (swipeable && swiperParams && wrapEl) {
-      wrapEl.f7SwiperParams = swiperParams;
+      Object.assign(wrapEl, swiperParams);
+      wrapEl.initialize();
     }
+    tick().then(() => {
+      if (swipeable && wrapEl.swiper) {
+        wrapEl.swiper.update();
+      }
+    });
   });
 </script>
 
-{#if animated || swipeable}
-  <div class={classNames(wrapClasses, classes)} bind:this={wrapEl} {...restProps($$restProps)}>
+{#if animated}
+  <div
+    class={classNames('tabs-animated-wrap', classes)}
+    bind:this={wrapEl}
+    {...restProps($$restProps)}
+  >
     <div class={tabsClasses}>
       <slot />
     </div>
   </div>
+{:else if swipeable}
+  <swiper-container
+    bind:this={wrapEl}
+    class={classNames(tabsClasses, classes)}
+    {...restProps($$restProps)}
+    init={swiperParams ? 'false' : 'true'}
+  >
+    <slot />
+  </swiper-container>
 {:else}
   <div class={classNames(tabsClasses, classes)} {...restProps($$restProps)}>
     <slot />

package/framework7-svelte.js

@@ -1,5 +1,5 @@
 /**
- * Framework7 Svelte 8.0.0-beta.3
+ * Framework7 Svelte 8.0.0-beta.5
  * Build full featured iOS & Android apps using Framework7 & Svelte
  * https://framework7.io/svelte/
  *
@@ -7,7 +7,7 @@
  *
  * Released under the MIT License
  *
- * Released on: March 9, 2023
+ * Released on: March 23, 2023
  */
 import Framework7Svelte from './shared/plugin.js';
 import { f7, f7ready, theme, app } from './shared/f7.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "framework7-svelte",
-  "version": "8.0.0-beta.3",
+  "version": "8.0.0-beta.5",
   "description": "Build full featured iOS & Android apps using Framework7 & Svelte",
   "type": "module",
   "svelte": "./framework7-svelte.js",
@@ -46,5 +46,5 @@
     "type": "patreon",
     "url": "https://www.patreon.com/framework7"
   },
-  "releaseDate": "March 9, 2023"
+  "releaseDate": "March 23, 2023"
 }